Göbegi Eritmek-1

Kilo verme kararınızı bir önceki yazımı okuduktan sonra verdiniz. Eşofmanları giydiniz. "CSS Diyet" merkezine hoş geldiniz.

Kilo verme kararınızı bir önceki yazımı okuduktan sonra verdiniz. Eşofmanları giydiniz. "CSS Diyet" merkezine hoş geldiniz.

Antrenmana başlamadan önce birkaç şeyi belirtmek istiyorum. Bir web sitesi için kullanılması gereken standart, CSS tabanlı tasarımdır. Tablo, tamamen başka bir fonksiyonu temsil ederken, biz tasarımcılar, HTML'in yetersizliği nedeniyle, tabloları, tasarım yapmak için kullanmaya başladık yıllar önce. Fakat bu, CSS 2 ve standartları destekleyen browser kullanıcılarının artması ile değişti artık. CSS tabanlı tasarım, şu an Internet'te görebileceğiniz en sağlam, kaliteli tasarımdır. Artık tabloları terk etmenin zamanı geldi.

Bunları söyledikten sonra, bu antrenman size CSS tabanlı tasarımı öğretmeyecek. Tablolarınızı ve diğer HTML alışkanlıklarınızı nasıl zayıflatabileceğinizi gösterecektir.

Birçok tasarımcı, CSS'in ne amaçla kullanıldığını az ya da çok biliyor. Hatta birçok tasarımcı, font ve renk gibi özellikleri CSS dosyalarında tanımlıyor. Hâlbuki CSS'den, tablolar ile tasarlanmış bir sitede daha da çok yararlanılabilir. Yalnızca renk ve font yanında daha birçok özellik, CSS dosyasına yerleştirilebilir.

Gelin lafı uzatmayalım ve ısınma hareketlerine başlayalım. Ben bu CSS diyetinde Diyetmax sitesi üzerinde çalışacağım. Siz kendi sitenizdeki bir sayfa üzerinde, ya da benimle aynı site üzerinde çalışabilirsiniz. Öncellikle yapmamız gereken, sitenin yapısal özelliğini çok iyi bir şekilde anlamak. Yani tablolar nasıl kurulmuş? Hangi tablo, hangi tablonun içinde yer alıyor? Acaba bu tablolardan herhangi birini silebilir miyiz? Tablo hücrelerinden (TD) tasarruf sağlayabilir miyiz?

Bu soruların cevabini anlamanın en kolay yolu, sayfanın içine yerleştireceğimiz "Teşhis CSS"dir. Sayfanızı bir Tekst Editörü (HomeSite ya da benzeri) içinde açınız ve TITLE elementinin altına şunları yazınız:

<style> 
table {border:2px solid red; margin:4px;} 
td {border:1px dotted purple; padding:2px;} 
</style>

Bu CSS kodu bizim tabloların nasıl yerleştirildiğini daha iyi görmemizi sağlayacak. Sonuç buraya tıkladığınızda göreceğiniz gibi olmalıdır.

Ben "Teşhis CSS" yardımı ile sayfamda 8 tane tablo olduğunu ve bu tabloların nasıl yerleştirildiğini rahat bir şekilde görebiliyorum. Daha sonra yapacağımız işlem ise her tabloya bir "KIMLIK" vermek. Kimlik vermek için kullanacağınız HTML elementinin adi ise id.

ID elementinde birkaç noktaya çok dikkat etmeliyiz:
- ID'ler yalnızca harflerden oluşmalıdır.
- Bir kere kullanılan bir ID, aynı sayfa içinde bir daha kullanılmamalıdır
- ID'ler anlam içermelidir. id=kirmizi yerine id=baslik demek daha doğru olacaktır, çünkü ileriki bir tarihte sitemizdeki tüm "kirmizi" renkli başlıkları "siyah" yaptığımızda id'miz halen bir anlam içerecektir.

İşte sayfamda yer alan ilk tablonun eski hali:

<TABLE width="800" border="0" align="center" cellpadding="0" cellspacing="0">

Ve id verilmiş yeni hali ise:

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="masthead">

Tüm 8 tabloya da id verdikten sonra, yapacağımız diğer bir ekleme ise DOCTYPE eklemesidir. (Biliyorum, içinizde "hani biz sayfayı zayıflatacaktık ama onun yerine bir dolu şey ekliyoruz" diyorsunuz. Haklısınız... Ama bu eklemeler, sağlam bir HTML yapısı için gerekli eklemeler. Bu gerekli eklemeleri yaptıktan sonra, gereksiz HTML’leri sayfamızdan atacağız.)

En kısa tanımı ile DOCTYPE, bir sayfanın cinsini bize gösteren bir işaretlemedir. Maalesef çok ihmal edilen bu HTML elementi, son zamanlarda, özellikle web standartları ile birlikte büyük bir önem kazanmıştır. DOCTYPE bize, bir sayfanın, hangi HTML versiyonunu kullandığını, hangi teknoloji ile yazıldığını gösterir. DOCTYPE ile birlikte, gelecekte ki olabilecek gelişmelere sayfanızı hazırlamış olmakla birlikte, sayfanızı "onay motorlarından" başarı ile geçmesi için gerekli bir elementtir.

Gelin DOCTYPE elementini üzerinde çalıştığımız sayfaya ekleyelim:

Sayfanın DOCTYPE eklenmemiş hali:

<HTML> 
<HEAD>

Ben sayfanın FRAME kullanmadığını ve HTML 4.01 ile yazıldığını bildiğimden, aşağıdaki DOCTYPE ekledim. Eğer siteniz FRAME ya da XHTML kullanıyorsa başka bir DOCTYPE eklemeniz gerekecek. İşte size uygun DOCTYPE'i bulabileceğiniz liste işte burada verilmiş.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head>

Bu arada DOCTYPE eklemekle birlikte, HTML ve HEAD elementlerini de küçük harfle yazdım. İleride eğer sayfayı XHTML'e dönüştürmek istersem, bu yaklaşım bana yardımcı olacak. Çünkü XHTML'de her HTML elementi küçük harfler ile yazılmak zorunda.

Bu yazı içinde son yer alan sayfa üzerinde son yapacağımız değişiklik ise JavaScript kodlarını "dâhili" kod yerine "harici" kod haline dönüştürmek. Eğer sayfanın koduna bakarsanız göreceksiniz ki JavaScript sayfa içinde gömülmüş bir durumda. Bu kodu seçin, tekst editörünüz içinde yeni bir sayfa açın, kodu onun içinde yapıştırın ve dosyayı script.js diye saklayın. Yeni dosyanın sekli şu şekilde olmalıdır.

Yukarıda sözünü ettiğim değişiklikleri yaptıktan sonraki görüntü şöyle olmalıdır (ekstra birkaç META elementi de ekledim):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Diyetmax Turkiye</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="description" content="Diyetmax Turkiye ile ilgili birkac kelime">
    <meta name="keywords" content="diyet, kilo, kilo vermek, yemek, zayiflamak, patch">
    <meta name="Author" content="Diyemax">
    <script language="javascript" type="text/javascript" src="script.js"></script>
</head>

Bir sonraki yazıda CSS'in kurulumundan ve uygulanmasından bahsedeceğim.

 

  • Etiketler;
  • css
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git