Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj04.05.2011, 15:18 (UTC)    
Mesaj konusu: Div ile Tasarım Kodlama - WeBloog Özel Anlatım

Merhaba arkadaşlar ;
Ben WeBloog [ MERT ] Bugün sizlere tamamıyla kendi anlatımım olan “DİV TASARIMI NASIL YAPILIR?” konusunu anlatacağım … Belki okumak istemezsiniz ama bu sizin için yararlı olacaktır… Özellikle de web sitesi olanlara…

Hepimiz bir web sitesi yapmaya kalktığımızda göze çarpan ilk nokta tasarım olur… Bunu düzeltmek için bir şablona ve kodlamaya ihtiyaç duyulur… Şablon oluştururken çoğu kişi tabloları kullanır. Tablolarla oluşturulan şablon sürükle-bırak yöntemiyle en fazla 10 dakikanızı alır. Fakat bu yöntemde hazırlanan tasarımların düzgün olabilmesi için iç içe tablolar gerekir ve buda daha sonraki çalışmalarımızda problemlere neden olur…

Bu nedenle farklı bir yöntem kullanacağız… Tablosuz, diğer ismiyle Div-Css yardımıyla tasarımlar yapacağız.. Bu tür tasarımlar kullanılabilirlik açısından daha iyidir… İlk olarak web şablonumuzda neyin nerede olacağını kağıt üzerinde belirtiyoruz. Sonra her birer bölüm için bir div oluşturuyoruz… Div’lerimizi HTML sayfamıza yazıyoruz.. Aşağıda DİV YAZIMI örneği vardır…


Kod:
<div>  <div>


Sayfamızda bu div özelliklerini belirtmemiz gerekir. Bu özellikleri tabikide CSS ile ayarlıyoruz… Çünkü CSS (Cascading Style Sheets) stil şablonlarından faydalanarak bir div'in boyutlarını, sayfadaki konumunu, arkaplan rengini ayarlayabiliyoruz. Hem de bu özellikleri ayrı bir dosya içerisinde yapıyoruz. Bu da bize kolay yönetilebilen uygulamalar yapmamızı sağlıyor.
Peki biz bu stil şablonlarını tablolarda uygulayamaz mıyız?

Tabi ki uygularız. Tablolara id vererek ya da etiketler yardımıyla tablolarımıza stiller verebiliriz. Ama bu tercih edilir mi, bunu sormak lazım. Çünkü tablolu tasarımlarda iç içe geçen tablolar olduğundan dolayı yine ayarlarınızda problemler olacaktır.

Şimdi ise anlatıklarımızı bir örnekle pekiştirelim.


> Bir web şablonu oluştururken aklımızda oluşturduğumuz şekli bir kağıda, ordan da Fireworks ve benzeri uygulamalarla bilgisayar ortamında çizebilirsiniz. Örnek boyunca yukarıda biçimsel olarak çizdiğim web şablonunu yapmaya çalışacağız. Burada her bir renk bir div'i göstermektedir.
> İlk olarak bir Html sayfası açıyoruz.Dreamwear veya notpad de yazabilirsiniz.Ben uygulamamda Dreamwear kullanıyorum.
> Html sayfasının body düğümleri(node) arasına divlerimizi tanımlıyoruz.
> Daha sonra bir CSS sayfası açıyoruz. Açtığımız CSS'i html sayfamıza eklememiz gerekiyor. Yani diyer bir değişle include işlemi gerçekleştiriyoruz.
> Html sayfamızda kullanacağımız CSS dosyasını belirlemek için aşağıdaki kodları sayfamızın head kısmına yazmamız gerekiyor.
Kod:
<link  href="template1.css"  type="text/css"  media="all"  rel="stylesheet" />


Id kullanarak CSS stillerini vereceğimiz için # işareti ve id sini yazarak { } işaretleri içinde özellikleri atayabiliriz.

#id { padding:5px; }

Kod:
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>   
   <title>Untitled Document</title>
   <link href="template1.css" media="all" rel="stylesheet" />
   </head>
   <body>
   <div id="page">
   
   <div id="header"></div>
   <div id="menu"></div>
   <div id="leftside"></div>
   <div id="content"></div>
   
   <div>
   
   <div id="region1"></div>
   <div id="region2"></div>
   <div id="region3"></div>
   <div id="region4"></div>
   
   </div>
   
   <div id="footer"></div>
   
   </div>
   </body>
   </html>


Aşağıda bu şablona ait Div haritasını görebilirsiniz.

______________
Mesaj04.05.2011, 17:37 (UTC)    
Mesaj konusu:

Videolu Veya Resimli Göstersen Okumak Türklerin Zoruna Gidiyo Yani Bnimde Mr. Green Lütfen Herkez İstiyodur Umarım
______________
Mesaj05.05.2011, 12:02 (UTC)    
Mesaj konusu:

hylzdesign yazmış:
Videolu Veya Resimli Göstersen Okumak Türklerin Zoruna Gidiyo Yani Bnimde Mr. Green Lütfen Herkez İstiyodur Umarım


Hemen eklemem imkansız.. Bunu bile zar zor hazırlayabildim... Nedeni okul,sınavlar,sbs,dershane falan işte Sad
______________
Mesaj05.05.2011, 13:50 (UTC)    
Mesaj konusu:

biliyordum zaten yinede teşekkürler birde normal tasarım kodlamayı anlatırmısın?
______________
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu