Web Tasarım

Sayfalar arasında nasıl link oluşturabiliriz? ASP ve PHP gibi programlama  dilleriyle hazırlanan sayfalar neden daha kullanışlı? 
 
SON dersimizde resim ve yazıların yerleşimini, renklendirme, rollover menü oluşturma ve ortaya çıkan şablonumuzun üzerini yavaş yavaş içerikle doldurmayı görmüştük. Artık işin grafik ağırlığını atlattığımız için, Pho-toshop’u bu dersimizden öncesine oranla çok daha az kullanacağız. HTML kodlama ve web sayfaları konusunda genel bilgilerle de dersimize devam ediyoruz.
Tasarımımızda iki farklı yerde menü kullanabileceğimizden bahsetmiş ve üst kesimdeki menümüzü grafik olacak şekilde oluşturmuştuk. Burayı sonraya bırakarak sol kesime nasıl menü yapabileceğimizi görelim.
Geçen dersimizde, bu sol kesimdeki hücrenin içine 160 piksel genişliğinde birkaç satırdan oluşan bir tablo yap-mıştık. Bu tablonun ilk satırını boş bı-rakarak ikinci satırdan itibaren linklerimizi vermeye başlayabiliriz. İlk satı-rı boş bırakmamızın nedeni, yazıları-mızın bir üstteki gri renkle çok fazla bitişmemesi içindi. Deneyip nasıl sonuç verdiğini görmek amacıyla, üzerinde çalıştığımız HTML sayfasını Dreamweaver ile açtıktan sonra bu ilk satıra yazı yazıp kaydederek sonucuna tarayıcımızda bakabiliriz. Göreceğiniz gibi, arada bir satırlık mesafe vermek daha iyi olacak.
LİNK OLUŞTURMA
Alt satırdan devam edelim. Ben şimdiye kadar bu sayfalarda anlatmış oldu-ğumuz Web Okulu derslerinin her sa-yısına birer link oluşturmak istiyorum. Dolayısıyla bu ay da dahil olmak üzere toplam 6 link yapacağım. Bu-nun anlamı da 6 tane ayrı HTML say-famız olacak demek.
Satıra gittikten sonra öncelikle kul-lanıcının görüp tıklayacağı yazıyı oluşturmamız gerekiyor. Buraya “Ders:1 Photoshop’a giriş” yazalım. İmlecimiz P harfinin başındayken ve klavyeden Shift tuşu basılıyken En-ter’a bastığımızda “Photoshop’a giriş” kısmını hemen bir alt satıra atabiliriz. Böylece daha hoş bir görünüm oluşur. Shift kullanmadan Enter tuşuna bassaydık, programın standart ayarlarındaki 1.5 satırlık aralık verilecekti. Bu yolla, HTML koduna girip yazmamıza gerek kalmadan doğrudan <BR> kodunun oluşmasını sağlamış olduk. Bu işlemi yaptıktan sonra, Code simgesine tıklayıp kod görünümüne geçerseniz, eklenmiş olan <BR> ifadesini de görebilirsiniz.
Tasarım görünümüne geçtikten son-ra sol fare ile link vermek istediğimiz “Ders:1 Photoshop’a giriş” yazısının tamamını seçelim. Hatırlayacağınız gibi geçen sayıdaki dersimizde, tasa-rımda kullandığımız yazı ve linklerin, zeminin ve diğer bölümlerin renklerini içeren temel CSS dosyasını http://WWW.WEBTASARIMX.COM/pcworld. css adresinden indirip “index.htm” sayfanızın olduğu yere kopyalamıştık. Bu dosyanın okunmasını sağlayan ilgili kodu da ekleyerek CSS dosyamızı tanıtmıştık.
CSS tipi ve link verilecek dosya ismi alt kesime girilir. Link vermek istediğimiz alanı seçti
116 WWW.WEBTASARIMX.COM / KASIM 2004
ğimizde Dreamweaver’da alt kesimdeki “Properties” bölümünde sağdaki “Link” kutusunun içine dosya ismini “ders1.htm” olarak verelim. Daha sonra da “Style” kutucuğunun yanın-daki listeye bakarsak, “pcworld.css” dosyası içinde bulunan stillerin her birinin isimlerini görürüz. Linkler için verilen seçenek “MenuLink”. Böylece hem seçtiğimiz alanın hangi sayfaya bir bağlantı noktası olduğunu hem de renklendirmesini ayarlamış olduk.
Kaydedip tarayıcımızda sonuca bakacak olursak: Fare ile linkimize tıkla-dığımızda tarayıcımız “ders1.htm” di-ye bir sayfaya gitmeye çalışacak ancak hata verecektir. Çünkü ders1.htm say-fasını henüz oluşturmadık. Daha son-rası için hazırlayacağımızı düşündü-ğümüz dosyanın ismini şimdiden belirledik sadece.
CSS DOSYASINI DÜZENLEME
Bu noktada CSS dosyamızı kurcalamaya başlayabiliriz. Çünkü kolayca fark edeceğiniz gibi tarayıcıda linkimiz siyah bir yazı şeklinde görülüyor ve üzerine geldiğimizde de herhangi bir değişiklik olmuyor. Hatırlarsanız geçen dersimizde üste rollover menü yapmıştık ve her resim için bir beyaz, bir de sarı olacak şekilde grafiklerimizi kaydetmiştik. Şimdiki link için de sarı ve beyaz arası geçiş yaparak bir bütünlük sağlayalım.
“pcworld.css” dosyasını Not Defteri (Notepad) ile açalım. Göreceğiniz kodların en alt kesiminde “A.Menu-Link” ismiyle başlayan bir bölüm var. Burası bizim linklerimizi renklendire-bileceğimiz kesim. “A.MenuLink:visi-ted” yazan yerin hemen alt satırı, say-famızda önceden ziyaret edilmiş linklerin ne renkte görüneceğini, “A.Me-nuLink:hover” yazan yerin altındaki satır, fare ile linkin üzerine geldiğimiz-de hangi rengin görüleceğini, sadece “A.MenuLink” yazan yerin altındaki satır da fare ile üzerine gelinmemiş ve link henüz ziyaret edilmemişken ne
 
CSS ayarlarını yaptıktan sonra fare ile linke gelince sarı oldu.
şisel tercihim olarak sayfamda ziyaret edilmiş linklerin farklı renkte çıkması-nı istemiyorum. O nedenle “visited” kısmı için renk değeri olarak #FFFFFF (beyaz renk kodu) girdim.
“Hover” için fare ile üzerine geldiği-mizde linkin sarı olmasını istediğimizi belirtmiştik. Dolayısıyla buraya da #FFFF00 değerini girelim.
Standart link rengimiz de beyaz ola-cağından en alt kesime #FFFFFF girelim. Bu bölümlerde istersek her duruma göre yazı tipi, renk veya yazı boyunu da değiştirebiliriz. Ama dosyada yer alan değerler göze hoş gelen bir görünümün sağlanması için girildi. Yine de kişisel zevklerinize göre bu bölümlerde, Verdana yazı tipi ile yazan linkin üzerine gelindiğinde Arial’e dönüşmesini sağlamak gibi değişiklik-ler de yapabilirsiniz. Bu dosyayı kaydedip kapadıktan sonra, hazırlamakta olduğumuz HTML sayfasına tarayıcı-mız ile yeniden bakalım. Şimdi fare ile linkin üzerine geldiğimizde beyazdan sarıya bir geçiş olduğunu da görebiliriz.
Dreamweaver ekranımıza geri dönelim. İlk linkimizi oluşturduk. Kalan 5 linki de benzer şekilde alt satırlara gelecek şekilde sırayla yapalım. Dosya isimleri de sırayla ders2, ders3... diye devam edebilir. Her linkimiz için “Style” kutusundan CSS tipini belirlemeyi de unutmayalım.
Linklerimizi hazırladık ama sayfala-rımız henüz yok. Bunları da teker teker oluşturmaya başlayacağız. Ama daha öncesinde bilmemiz gereken bazı genel bilgiler var. Şablonumuz hazır ve diğer alt sayfalar da bu şablon örne-ğinde olacağı için işimiz oldukça ko-lay. Bu sayfayı Dreamweaver’da “File” menüsünden “Save as...” diyerek kaydedip oluşturacağımız dosyanın adını vermemiz yeterli. Daha sonra da  o dosyaların içeriğini dolduracağız.

Gökhan Savaşoğlu