Merhaba arkadaşlar sanalkurs da okuduğum bi dersi sizlerle paylaşmak istedim;

Bu makalede sizlere tablolu tasarım ve div tasarımı hakkında genel bilgiler verdikten sonra bu div-CSS kullanarak bir web şablonu oluşturmaya çalışacağız.

Bildiğimiz gibi bir web sitesi yapmaya kalkıştığınızda ilk önce websitesine ait şablonun oluşturulaması ve buna uygun olarak web programcının kodlamayı gerçekleştirmesi gerekir. Şablon oluştururken en kolay ve bir çok kişinin kullanıdığı yöntem tablolardır.Tablolarla şablon oluştururken sürükle bırak (Drag-Drop) yöntemiyle yaklaşık 5 dakikada bir sitenin tasarımını oluşturabiliriz. Fakat bu yöntemle hazırlanan tasarımların düzgün olabilmesi için iç-içe tablolar eklenmesi gerekir. Bu da daha sonraki zamanlarda problemlere sebep olur.

Kullandığımız IDE yardımıyla da tabloların arkaplanları (background) değiştirilerek hoş görünmesi sağlanır. Bu yöntem, tamamıyla sayfanın html kısmını şişirir. Bu yöntemle hazırladığımız web sitelerinin dinamik (kolay değişebilen) bir yapıya sahip değildir. Örneğin sayfanızı yada sayfaya ait belirli bir kısmın arkaplan renginin değiştirmek istediğimizde sayfanın html kodlarını açıp oradan bulmamız gerekir. Bu da zahmetli bir iştir. Üstelik birden daha fazla sayfa için bunu yapmamız gerekirse.

Farklı bir örnek verecek olursak; sayfamızın bir kısmının genişliğini değiştirmek istediğimizde bir tablonun genişliğiyle oynarken diğer tablonun düzeni bozulur. Bir de 40 sayfamız olduğunu düşünürsek bu daha zordur. Sonuç olarak tablosuz tasarım yaptığımızda şablonumuz; kullanılabilirlik, yönetilebilirlik açısından pek iyi bir durum da olmaz.

Tablosuz, diğer bir ifadeyle div-CSS yardımıyla yaptığımız tasarımlar daha kullanılabilir, daha yönetilebilir ve daha dinamik oluyorlar. İlk olarak web şablonumuzda neyin nerde olacağını kağıt üzerine belirledikten sonra her birer bölüm için bir div oluşturulur ve bu div’lere ait kimlikler id (identity) verilir. Eğer karmaşık ve daha gelişmiş bir uygulama yapıyorsak div haritası çıkarılır ve daha sonra gelecek arkadaşların sistemi daha kolay anlaması için proje dosyasına döküman olarak ekleyebiliriz. Div’lerimizi Html sayfamıza doğrudan yazıyoruz. Aşağıda div yazımını örnekleyelim.

<div>  <div>

Sayfamızda bu div’e ait özellikleri belirlememiz gerekir. İşte bu özellikleri belirlerken web teknolojilerinin kaçınılmazı olan CSS yardımıyla yapıyoruz. 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.

Düşünsenize; Web sitemizde milyonlarca sayfa var ve müşterimiz bize sayfanın arkaplanını değiştirmemizi istedi. Sadece CSS dosyasına ait o div’in rengini değiştirmemiz yeterli olacak. Farklı bir şekilde ifade edecek olursak, web sitemize ait olan bütün stil – görünüş – biçim ayarlarını tek bir dosyadan kontrol edebileceğiz.

Buraya kadar anlattıktan sonra aklımıza bir sorunun gelmesi gerek:

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.

<link  href="template1.css"  type="text/css"  media="all"  rel="stylesheet" />

<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>

Gelen aramalar :

• div ile tablo oluşturma
• div ile tablo
• div tablo

The post Tablo Kullanmadan (Div Tasarımı) Tasarım Yapmak first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.