web tasar›m› - Aycan Gönenç

web tasar›m›
Önemli! Bafl›nda # iflareti olan class’lar›
yaratabilmeniz için karfl›n›za ç›kan pencerede “Advanced” seçene¤inin iflaretli
olmas› gerekir.
fiimdi yaratt›¤›m›z bu class’lara çeflitli
de¤erler uygulamak sureti ile menümüzü flekillendirmeye bafllayabiliriz. Öncelikle body class’a verece¤imiz de¤erlere
ve ne anlama geldi¤ine bakal›m.
Aycan Gönenç
[email protected]
www.aycangonenc.com
‹leri CSS teknikleri
ile tab’l› menüler
Web sayfalar›n› yormayan, kolay
uygulan›p zaman kazand›ran CSS
temelli tab’l› menü yap›yoruz.
Bu menüyü http://www.aycangonenc.com/
menu/menu.htm adresinde görebilir ve bilgisayar›n›za indirebilirsiniz.
SS “Cascading Syle Sheet” asl›nda bizim tasar›mc›lar›m›z taraf›ndan yeterince efektif
kullan›lmaz, genelde sayfadaki yaz›lar›n tiplerini ve linklerin renklerini belirlemek gibi, CSS standard›n›n en basit özellikleriyle yetiniriz. Halbuki CSS
bize bunlardan çok daha fazlas›n› sunuyor. ‹leri
CSS tekniklerini kullan›rken tek dikkat etmemiz gereken fley, yapt›¤›m›z ifli farkl› Web taray›c›lar›nda
test edip, hepsinde ayn› sonucu verdi¤inden emin
olmakt›r. Çünkü baz› CSS özellikleri taray›c›dan taray›c›ya farkl› sonuçlar gösterebiliyor.
Tab için görselimizi haz›rlayal›m
Photoshop’ta yeni bir doküman aç›n, çözünürlü¤ü
72 piksel, arka plan› transparent olsun.
Açt›¤›n›z doküman›n içine bir kare alan çizin ve içini Edit > Fill komutuyla herhangi bir renk ile doldurun. Daha sonra Windows > Styles menüsünden
Photoshop’un haz›r fill efektlerine ulafl›n ve bunlardan hoflunuza gideni seçip çizdi¤iniz kareye uygulay›n. Örne¤in ben, Web Styles seçene¤inden haz›r
bir efekt kulland›m.
Daha sonra Flatten Image komutu ile Photoshop
katmanlar›n› birlefltirin ve elde etti¤iniz çizimden,
Menümüzü haz›rlayal›m
Dreamweaver doküman› içindeki “Content for class “menu” id “menu” Goes
Here“ yaz›s› yerine menümüzde yer alacak linkleri her biri birer BulletPoint olacak flekilde yazal›m.
body
{
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
C
Neden CSS?
• Klasik yöntemlerle haz›rlayaca¤›n›z bir menü,
hem çok fazla vaktinizi al›r, hem de de¤ifltirmek istedi¤inizde sayfadaki tüm grafikleri bafltan yapmak
zorunda kal›rs›n›z.
• CSS ile haz›rlanm›fl bir menünün Web taray›c›s›
taraf›ndan görüntülenme h›z› çok daha yüksektir.
• Afla¤›da anlataca¤›m menüyü rollover resimler ve
javascript kullanarak yapsayd›n›z, javascript’i devre
d›fl› b›rakan kulan›c›lar yapt›¤›n›z menüyü göremezlerdi.
• Ve en önemlisi, CSS ile yapaca¤›n›z menü alternatiflerinin s›n›r› yok. CSS’nin size sunamad›¤› tek
fley yarat›c›l›k, o da sizde var zaten :)
Bugün sizlerle tamamen CSS tabanl› bir tab’l› menü haz›rlayaca¤›z.
Önce nas›l bir menü yapaca¤›m›za bir göz atal›m:
Menümüz yanyana dizilmifl tab’lardan olufluyor.
Fare ile menü üzerine geldi¤imizde, seçti¤imiz tab
yukar› do¤ru aç›larak kendini gösteriyor :)
54 z Haziran 2005
}
dikey, küçük bir parçay› Crop arac› ile seçip, kesin.
Elde etti¤iniz çizimi, File > Save For Web komutu
ile tab.gif ad› ile gif format›nda kaydedin.
Elde etti¤imiz bu küçük resim, menümüzün temelini oluflturacak. CSS kullanmadan benzer bir menü
yapmaya kalksayd›k, bunun gibi onlarca görüntü
haz›rlamak zorundayd›k!
Sayfam›z› haz›rlayal›m
fiimdi s›ra menümüzün görüntülenece¤i Web sayfas›nda. Dreamweaver’da menu.htm ad›yla yeni bir
doküman yarat›n ve tab.gif ile ayn› dizine kay›t
edin. Daha sonra Insert > Layout Objects > Div Tag
sekmesine gidin.
Karfl›n›za ç›kan pencere içindeki ID ve Class
bölümlerine “menu” yaz›n ve okeyleyin. Karfl›n›za
“Content for class “menu” id “menu” Goes
Here” fleklinde bir yaz› ç›kacakt›r. Bu flekilde,
içinde menümüzün yer alaca¤› Div Tag’i oluflturmufl bulunuyoruz.
CSS doküman›m›z›
haz›rlayal›m!
Evet iflin püf noktas›na geldik... Haz›rlad›¤›m›z linkleri flekillendirip, tabl› menünün oluflmas›n› sa¤layacak olan CSS doküman›n› haz›rlayaca¤›z. Bunun için,
Dreamweaver doküman› aç›kken, Text >
CSS Styles > Manage Styles menüsüne
giderek, Dreamweaver içindeki CSS yönetim bölümünü aç›n.
Bu bölümü kullanarak yeni bir harici
CSS doküman› yarat›n ve menu.css olarak isimlendirin. Daha sonra yine ayn›
menüyü kullanarak menu.css içinde afla¤›daki CSS Class’lar› yarat›n:
body
#menu
#menu a
#menu ul
#menu li
#menu li a
#menu a:hover
Haz›rlad›¤›m›z menünün sayfaya soldan,
sa¤dan ve yukar›dan tam yap›flmas›n› istiyoruz. Bu nedenle body tag içindeki
margin ve padding de¤erlerinin tümünü
0 piksel yapt›k.
Ayr›ca menünün yer ald›¤› sayfan›n zemin rengini de beyaz olarak ayarlad›k
(#FFFFFF).
#menu
{
display: block;
}
‹çinde menümüzün yer ald›¤› Div Tag’in,
içeri¤ini alt sat›ra kayd›rmadan tek halinde görüntülemesini istedi¤imiz için
display seçene¤ini “block” olarak seçtik.
#menu a
{
text-decoration: none;
color: #333333;
font-family: Arial, Helvetica,
sans-serif;
font-size: 11px;
font-weight: bold;
}
Bu class, menü tag’i içindeki linkli yaz›lar için geçerlidir. Kulland›¤›m›z linklerdeki yaz› rengini, yaz› boyutunu ve fleklini buradan ayarl›yoruz.
#menu ul
{
width: 100%;
height: 57px;
margin: 0px;
padding: 0px;
float: left;
background-color: #6387BE;
background-image:
url(tab.gif);
background-position: 0px
20px;
background-repeat: repeat-x;
}
Hat›rlarsan›z menümüzü Bullet Point
fleklinde haz›rlam›flt›k... Bir bullet point
s›ralamas›n›n en bafl›nda <ul> en sonunda ise </ul> tag’leri yer al›r. Bu tag’ler aras›ndaki maddeler ise <li> ve </li>
tag’leri aras›ndad›r. Menu ul fleklinde bir
class yaratmakla menümüzün içindeki
her bir linki içine alan bir fon yaratm›fl
oluyoruz. Menü fonunun sayfay› soldan
sa¤a kaplamas› için widht de¤erini
100% veriyoruz. Yüksekli¤i ise 57 piksel
olarak belirledik. Linkleri alt sat›ra kaymamas› ve düz bir hat halinde olmas›
için float:left de¤erini verdik. Fon rengi
olarak daha önce haz›rlad›¤›m›z tab.gif
resminin en aç›k k›sm› ile yaklafl›k ayn›
renkte olan bir renk seçtik. Daha sonra
fon resmi olarak tag.gif’i seçtik ve bu
resmin sayfan›n solundan sa¤›na do¤ru
tekrar etmesini, sayfan›n yukar›s›ndan
itibaren ise 57 piksel afla¤›da yer almas›n› sa¤lad›k.
#menu li {
list-style-type: none;
float: left;
}
#menu li a {
margin: 20px 0px 0px;
padding: 15px 5px 0px;
list-style-type: none;
height: 20px;
width: auto;
float: left;
background-image:
url(tab.gif);
border-right-width: 1px;
border-right-style: solid;
border-right-color: #6387BE;
}
Linklerimizin her birisinin <li> ve </li>
tag’leri aras›nda yer ald›¤›n› söylemifltik.
Dolay›s›yla linklerin her birisinin görüntüsünü yönetecek bir class (#menu li) ve
yine bu tag içinde yer alan linkli yaz›lar›
yönetecek bir class (#menu li a) yaratt›k.
Linkleri Bullet Point olarak haz›rlad›¤›m›z
için her birisinin bafl›nda bir madde iflareti var tabii... Bunlardan kurtulmak için
list-style-type: none; ve linklerin alt alta
Haziran 2005 z 55
de¤il, yan yana dizilmesi için float: left;
de¤erini verdik. Böylece altta gördü¤ünüz flekli elde etmifl olduk.
Her bir linkin soldan sa¤dan, yukar›dan
ve afla¤›dan yükseklik, espas de¤erlerini
belirledik. Linklerin arka plan›na tag.gif
resmimizi yerlefltirdik ve her bir linkin
sa¤ taraf›na 1 piksel geniflli¤inde ve menü fonu ile ayn› rekte bir çizgi koyduk.
#menu li a:hover {
color: #FFFFFF;
height: 25px;
margin-top: 15px;
}
Menümüze en son eklememiz gereken
fley, bir linkin üzerine gitti¤imiz zaman
menü tab’lar›n›n yukar› do¤ru yükselmesini sa¤layacak olan CSS kodlar›.
CSS’nin hover alt class’› ile bunu yapabiliriz. Bunun için menü tag’i içindeki linklerin hover özelli¤ini yönetecek bir class
yaratt›k (#menu li a:hover). Bu tag içindeki yükseklik ve margin de¤erlerini
(#menu li a) tag’inden farkl› de¤erlerle
oluflturarak, fare ile bir link üzerine geldi¤imizde tag’in yukar› do¤ru aç›lmas›n›
sa¤lad›k. Evet CSS menümüz haz›r!
fiimdi yapmam›z gereken, oluflturdu¤umuz menüyü farkl› Web taray›c›lar›nda
test etmek... Çünkü CSS’nin baz› özellikleri farkl› taray›c›larda ayn› sonuçlar›
vermeyebiliyor. Ben bu menüyü Mac
OSX Explorer, Safari, Fireworks, Mozilla’da, Windows XP Explorer ve Netscape’de test ettim. Hepsinden s›n›f› geçti:)
‹ndirdi¤iniz dosyalar› Dreamweaver’da
aç›p, CSS yönetim bölümünde üzerinde
oynayarak de¤iflikler yaparak CSS’yi daha yak›ndan tan›yabilirsiniz.
Tekrar görüflmek üzere... ML
Konu ile ilgili kaynaklar
Yaz›l›m: CSS ile komple web sayfas› tasar›m›,
harika menüler oluflturabilece¤iniz STYLEMASTER program›’n›n deneme sürümünü;
http://www.westciv.com/style_master/index.ht
ml adresinden indirebilirsiniz.
Web siteleri:
Maxdesign - ‹yi bir CSS kayna¤›!
http://css.maxdesign.com.au adresinde CSS ile
yap›labilecek yüzlerce menü ve tasar›m
örne¤ini bulabilirsiniz. Özellikle %100 CSS ile
yap›lm›fl menüler ilginç.
CSSDRIVE.COM CSS kullan›larak yap›lm›fl birbirinden ilginç web sitelerini görebilece¤iniz bir
site… Ayr›ca güzel CSS örnekleri de mevcut
http://www.cssdrive.com/
Online CSS menü oluflturmak için http://accessify.com/tools-and-wizards/list-o-matic/list-omatic.asp adresine ba¤lanarak form bilgilerini
girip, haz›r template'lerden istedi¤inizi seçerek
CSS tabanl› menüler oluflturabilirsiniz.
56 z Haziran 2005