Web Tasar.m. - Aycan Gönenç

Web Tasarımı 15/7/04 9:45 Page 2
web tasar›m›
Aycan Gönenç
[email protected]
www. aycangonenc.com
<table> Out,
<div> In!
Hiç tablo kullanmadan sayfa tasarlaman›n kolayl›¤›n› yaflay›n.
W
eb sayfalar›n› tasarlarken bugüne kadar
genellikle tablolardan yararland›k
(<table> </table>). Ancak her fleyde
oldu¤u gibi Web tasar›m› da yerinde durmuyor ve
her geçen gün, hayat›m›z› kolaylaflt›ran yeniliklerle
karfl›m›za ç›k›yor. Geçti¤imiz say›larda sizlere CSS
ile sayfa tasarlaman›n kolayl›klar›ndan, Web sayfalar›n›z› CSS ile nas›l flekillendirebilece¤inizden bahsetmifltim. CSS ayn› zamanda bizlere hiç tablo kullanmadan sayfa içindeki yaz›, grafik, resim gibi
ö¤eleri flekillendirme kolayl›¤› veriyor.
Tablo kullanman›n nesi kötü?
•Tablolardan oluflan bir sayfan›n kodlar›, CSS ile
tasarlanan bir sayfaya oranla çok daha uzundur.
Bu da sayfan›n görüntülenme süresini uzat›r.
•100 sayfal›k bir siteyi e¤er tablo kullanarak tasarlarsan›z, sitenin görüntüsünü de¤ifltirmek istedi¤inizde, her sayfay› tek tek tekrar düzenlemeniz gerekir. Halbuki CSS ile haz›rlanan bir tasar›mda, bunun için sadece CSS doküman›n› de¤ifltirmeniz yeterli olacakt›r.
•CSS ile oluflturulan bir tasar›m size milimetrik
ayarlar yapman›z, sayfan›n istedi¤iniz bölümüne istedi¤iniz flekilde ve renkte ö¤eler eklemeniz için
çok daha fazla esneklik sa¤lar.
•CSS ile ek bir programlamaya gerek duymadan
(PHP, ASP gibi) yaz›c› uyumlu sayfalar yapabilir, örne¤in sayfa bas›ld›¤› zaman istemedi¤iniz bölümlerin ka¤›da bas›lmamas›n›, tüm fontlar›n siyah
renkte ve farkl› bir büyüklükte ç›kmas›n› sa¤layabilirsiniz.
28 z A¤ustos 2004
<table> yerine <div>
Evet bundan sonra sayfalar›m›za tablo yerlefltirmek
yerine <div> tag’ini kullanaca¤›z. Bafll›yoruz...
•Dreamweaver’da yeni bir sayfa aç›n ve sayfay›
kaydedin.
•Insert > Layout Objects > Div Tag sekmesine
gidin.
•Karfl›n›za ç›kan pencereden oluflturdu¤unuz
<div> tag’e bir class ve Id de¤eri girin.
(class=main, id=main gibi)
•Web sayfan›zda (Content for class "main" id
"main" Goes Here) fleklinde bir yaz› ç›kacakt›r. Bu
yaz›n›n bulundu¤u yere yazaca¤›n›z yaz›, yeni
oluflturdu¤unuz div alan›na CSS ile atayaca¤›n›z
de¤erlere göre flekillenecektir. Sayfan›n kaynak kodundaki görüntü ise flöyledir: <div class="main"
Web Tasarımı 15/7/04 9:45 Page 3
id="main">Content for class "main" id
"main" Goes Here</div>
•fiimdi, Text > CSS Styles > New sekmesine gidin.
•Selector Type = Advanced ve Define in
= New style sheet seçeneklerini
iflaretleyin.
•Selector k›sm›na # iflaretinden sonra,
div tag’e verdi¤iniz class ismini girin:
(#main).
•Bu pencereyi onaylad›ktan sonra karfl›n›za ç›kan pencereden CSS doküman›n›za bir isim verip (uzant›s› .css olmal›,
style.css gibi) CSS doküman›n›z› sayfa ile
ayn› dizine kaydedin.
•Ve flimdi karfl›n›zda yeni oluflturdu¤unuz div tag’›n›z›n içindeki ö¤eleri flekillendirmeniz için genifl seçenekler sunan
bir pencere duruyor!
Buradan div alan› içinde yer alan yaz›n›n
fontunu, büyüklü¤ünü, sat›r aralar›n›
belirleyebilir, yaz›n›n içinde yer ald›¤› bölümün sa¤›na, soluna ya da her bir köflesine istedi¤iniz gibi çerçeve, çizgi koyabilir, yaz›y› sayfan›n istedi¤iniz yerine
milimetrik olarak tafl›yabilirsiniz. Benim
size önerim, bu aflamada karfl›n›za ç›kan
seçenekler penceresinin içerisinde dolafl›p farkl› de¤erler girerek (apply) butonuna basmak sureti ile sayfan›zdaki yaz›n›n ne flekilde de¤iflti¤ini, hangi seçene¤in ne ifle yarad›¤›n› görmek için biraz
al›flt›rma yapman›z.
Tasar›ma bafllamadan
önce...
Div özelli¤i ile sayfalar›n›z› oluflturmaya
bafllamadan önce, tasar›m›n›z›n
hangi bölümlerden oluflaca¤›na karar
vermelisiniz.
Örne¤in, sayfan›n üst k›sm›nda yer
alan ve logonuzun yer ald›¤› (header)
bölümü.
Ana yaz›lar›n bulundu¤u bölüm, linkler
ve sayfan›n en alt›nda bulunan ve tel,
faks gibi bilgilerin oldu¤u (footer) bölümü gibi. Daha sonra bu bölümlerin her
biri için bir (div alan›) oluflturup bunlar›
yukar›da anlatt›¤›m flekilde CSS doküman› üzerinden flekillendirebilirsiniz.
Div Tag içinde alt stiller
oluflturmak
CSS doküman› (#main) olarak oluflturdu¤unuz div alan› içindeki yaz›lar› yönetirken, baz› alt stiller belirlemeniz gere-
kecektir. Örne¤in #main alan› içindeki
<h1></h1> tagleri içinde yer alan bafll›klar› 15 piksel ve rengini de k›rm›z›
yapmak isteyebilirsiniz. Bunun için CSS
doküman› içinde yeni bir alt stil oluflturmal›s›n›z. Bunun formülü flöyledir: nokta
+ div alan›n›n ad› + boflluk + alt stilin
html tag kodu (h1, h2, a:link, a:hover,
a:visited vb. gibi).
E¤er div alan›n›z›n CSS içinde kulland›¤›
isim #main ise, bafll›k için kullanaca¤›n›z
stilin ad› (.main h1) fleklinde olmal›d›r.
Ayn› flekilde mesela linklerin görünümünü de¤ifltirmeniz gerekiyorsa (.main
a:link) fleklinde bir stil oluflturman›z gerekir. Linkin üzerine gelince yaz›n›n renginin farl› bir renge dönüflmesini istiyorsan›z, (.main a:hover) fleklinde yeni bir
stil oluflturup istedi¤iniz de¤erleri girmeniz yeterli olacakt›r. Web sayfan›z›n her
bir bölümü için ayr› bir div alan› oluflturup alt stillerini belirledi¤inizde sadece
CSS doküman›n›zda de¤ifliklikler yaparak sitenin tümünün görüntüsünü
yönetebilirsiniz.
Haydi, yaz›c› uyumlu
sayfa yapal›m!
Diyelim ki Web sayfan›z bas›ld›¤›nda
sayfan›n en üstündeki site tasar›m›n›n
sayfaya bas›lmamas›n›, gri renkte görünen yaz›lar›n da siyah ç›kmas›n› istiyorsunuz. Div alanlar› ve CSS ile bunu yapmak çok kolay! Sayfan›z›n kaynak kodunda <head></head> bölümü içine
afla¤›daki kodu yaz›n›z: <link
rel="stylesheet" type="text/css"
href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="print.css" media="print" />
Bu kod ile sayfaya iki ayr› CSS doküman› ba¤l›yoruz. Bunlardan birincisi sayfan›n ekrandaki görüntüsünü (media=”screen”), ikincisi ise ka¤›da bas›ld›¤› zamanki görüntüsünü belirliyor (media=”print”).
Sonra iki ayr› CSS doküman› yarat›p, (bu
örnekte screen.css ve print.css olarak
isimlendirildi. Bunlardan screen.css içine
ekran görüntümüzdeki istenen de¤erleri, di¤erine ise ka¤›da bas›ld›¤› zamanki
görünüm de¤erlerini giriyoruz.
Hepsi bu!
‹pucu: E¤er bir div tag alan› içindeki içeri¤in bas›ld›¤› zaman ka¤›da ç›kmamas›n› istiyorsan›z, Dreamweaver içindeki
CSS yönetim bölümünü kullanarak (Text
> CSS styles > Manage Styles)
print.css’yi daha sonra da ka¤›da ç›kmas›n› istemedi¤iniz div tag’in ad›n› seçin.
Sonra positioning sekmesindeki (visibility) de¤erini (invisible) olarak de¤ifltirin.
Küçük bir örnek...
Örnek olarak haz›rlad›¤›m bu sayfada,
iki tane div alan› var.
#main ve #side. #main sol taraftaki
ana yaz› alan›n› flekillendiriyor. #side ise
sa¤daki küçük yaz› alan›n› yönetiyor. Bu
sayfada hiçbir flekilde table kullan›lm›yor.
Örnek sayfam›z›n ba¤l› oldu¤u CSS doküman›n›n kodlar› ise flöyle:
#main {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
height: auto;
width: 300px;
margin-top: 60px;
margin-left: 50px;
position: absolute;
text-align: justify;
}
#side {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
margin-left: 380px;
height: auto;
width: 70px;
position: absolute;
margin-top: 95px;
font-weight: bold;
}
.main h1 {
font-size: 15px; color: #CC3300;
}
Umar›m bu yaz› ile sizleri tablolar›n s›k›c›l›¤›ndan kurtarm›fl›md›r.
‹yi tasar›mlar! ML
Sayfa tasar›mlar›n› CSS
ve DIV alanlar› ile oluflturan sitelerden birkaç
örnek:
‰
http://studio.adobe.com
http://www.wired.com
‰ http://www.quark.com
‰ http://www.inc.com/home
‰ http://www.pga.com
Bir inceleyin isterseniz.
‰
A¤ustos 2004 z 31