CHIP Online - Arşiv: Nisan 1999 DOWNLOAD Profesyonel Web Sayfası Tasarımı Bölüm 2

I ntemet Navigation ve Düğmeler Sadece Web'de değil, aynı zamanda Hoınepage'inizde de iyi bir Navigation'm önemi büyüktür. Web tasarım serimizin ikinci bölümünde grafiksel Navigation için Button ve Image Map tanımlamayı ayıklıyoruz. İkiden fazla dokümanı olan Ho-mepage.'erde iyi düşünülmüş. bir Navigation gereklidir. Zira sayfanıza bağlanan bir ziyaretçi site içeriğine ya (fa giriş sayfasına kolayca ulaşamadığında hemen sitenizi lak edecektir. Wcb sayfalarını? Imerneı'ie yayınlamadan önce yapısı ile ilgili birkaç noktaya dikkat edin. İki iarklı model seçebilirsiniz; Küçük siteler için yıl-diz formu ve kapsamlı siteler için hi-yerarşik bir yapı. Yıldız formundaki yapıda giriş .sayfası, diğer nnn sayfalara ulaşabileceğiniz bir merkez teşkil eder. Hi-yerarştk düzen ise sabitdıskinizdeki dizin yapısını andırır Ana şayiadan hır sonraki alı düzleme linkler dallanır, sabitdıskinizdeki alıdizinler gihi. Her düzlem de kendine özgü bir konuya sahiptir ve başka altbölümlefc dallanabilir Bu tip bir yapı. mesela sajdanrzdâ meıtn arşivleri kullanmak İstiyorsanız, manii ki ıI ir. C Web Serîsi AİS ¦ 1. FrameTokniklciı 3/99 2-NavioatJon om 3. Tablolar 5/99 4 Siyle ve Layer 6/99 5, "Arama" ve Javascnpl 7/99 6. Mail. DownJoad. .ı99 GiriS sayfanıza büyük önem verin. Bu sayfada ıtiın alısayfaiara linkler bu hin malıdır. Yine birçok çok katmanlı Web SÎ-Lelertn.de bir somaki aîtdUzleme linkler bulunmalıdır. Yine lanı lersi olarak giriş sayfasına her ahsayfadan ulaşılabilmek. Hîrçok alidûzlemc. sahip bir sile kurmak istiyorsanız, ayrıca her sayfada bu üst düzlemi filden hır bnk buluımıalıdır. Kucuk şilelerde bu hiyerarşik yapının dışına çıkabilirsiniz. Giriş şayiasına linkler yanında, het bir sayfaya çapraz Uöfc de konulabilir. Navigation Çubuğu Nereye Gider Bu Linkler Navigation bileşenleri iyi gurşnûr ve her şayiada aynı yerde mevcuı ol-malidir. Frame desıekfi sitelerde bu linkleri ayrı ayrı Frame'lere yerleşti-rin (geçen sayımızda bundan bahser-mişiik). S rMapapş Jjte |* y** (ic kmİ b*__ Bark '¦¦¦•: RrW Hcra Se>**ı Nefte* Frame'siz çalışıyorsanız:, navigas-yo" bileşenlerini her dokümanın ait ve Üst kısımlarına ycrleşunn. Optik olarak yol göstericileri siıe içeriğinden ayırmak gerekir. Buıuııı için -grafiksel zevkinize göte - yatay bir çizgi. renkli yazı veya ayrı bu grafik yeterlidir, Böylece ziyaretçinin her sayfada tanıyabileceği bu Navigaıion çubuğu oluşur. 1 Basit Navigation Kısayollarla Gezinin Aceleniz varsa veya basiı tasarınla önem veriyorsanız, metinlerle dolu bir navigasyon çubuğu idealdir. I lyperlinklcr burada aynen HTMI-'de oluşturuldukları gibi görünür; bhkaç köseli parantez ve allı çizili Navigation karakteri (burada we.1cnmc.hmil): >a hret-"arcnv.ht.'nl*> ÎArşiv)>/8> >a hrel-"ya?.hm]"> [Yazı \şlsn]>/e> >a href-"welcome.html"> [Homepa- geh/a;- İs tıref-'maittD:uysman@chi().com.t,'-> fFe0dbaj;kl>/a> >/p> >hr align-left widtb-BGO> Bu örnekle timi linkler tek biı sa-tırda bulunur. Kaynak koddaki satır kesmesi her link arasında bir boşluk bırakılmasını sağlar. Son link de her sayfada bulunması gereken faydalı bir kısayoidıır; Mailin Tag'i iıklandı-gmda, ziyaretçinin bilgisayarında e-mail istemeisinm açılmasını ve ilgili adrese tnatl gönderilmesini sağlar. Böylece şayianızı ziyaret edenler her sayfadan size. adresinizi aramak & ;J'Bsctn-a'l-.i A U^,t.|ı-.-,'.r|.V.U^'.^^-'.ril-'^^'*~-^ LArİiyJ lYagjjfeı! [Homeoaşai fFeMİba Web sayfası için basit taşanını tercih edenler navigasyon ScortF-' çubuklanru meün _____i bileştin İerinden I ohışiurabilirler. Köşeli parantez içindeki Hyperlınkler en çok tutulanlar. ı 208 • CHIP NİSAN 1959 I nternet ıuiWiJ- zorunda kalmadan e-mail göndereh: lirler. Navıgatioıı çubuğu yatay bir sizgi ile sayfadan ayıttır. Burada align=lcU de sola yaslanmıştır ve width-800 parametresi ile de genişliği SCO pikselle kısıtlanmıştır. 2 Kendi Düğmenizi Kendiniz Yapın Gölgesız Düğmeler: Grafiksel olarak iddialı Web taşanım için kendi düğmelerinizi çizmelisiniz. 10ÛM0 piksellik düğme büyüklükleri çok lululuyor. Bu tıp Buıton'lar yazı için yeterince yer ve görsellik sağlayabiliyorlar. Kûçuk boj ııilu düğmelet* aynı zamanda daha hızlı transfer edilir. Çabuk düğme tasarımı İçin popüler bîr Sluırcwarc programı olan Pa inrshop Pro'yıı Bunonize fonksiyonu ılı* kullanabilirsiniz. Ancak bunu dikkatli kullanmanız gerekir. Painrshop Pro'da 1.6.7 milyon re.nku:. I00M0 piksel çözünürlükte. yeni bir grafik dosyası açın. At lalan beyaz kalsın. Şimdi 7.oom tonksiyo nu ite yeni resmi büyütün, Böylece metni (TcxtJ daha kolay yerleştirebilirsiniz. \ext düğmesine tıklayın ve 12 puntoluk. kaim (Bold) herhangi biryazıtipi tl*onı) seçin. Text olarak rm ı ıı ı——¦— ¦j>lşqlPg_fj^lt1l^l^'M.^ftL Paintshop Ptonuıı Buttonize. fonksiyonu ile kolayca Web sayfanız için düğmeler çizebilirsiniz. Yazısız bir düğmeyi değişiklikler ve yeni dûgmr.lcr için yedek olarak ruam. "Home'* girin, OKV tıklayın vı; yazıyı yelli düğmenin ortasına yerleştirin. Mclin halen seçili olduğu için, seçimi iptal etmek için |Ctrli.|NI tuşlarına basın. Şlrndl Image - Specıal Eşccıs ¦ Buttonize simgelerine Tıklayın, fîdge Size olarak eger Trans parem I:dge seçiliyse. %13-20 arasında bu değer seçin. Solid lidge 0 kadar güzel görünmez. Ancak bunu kullanmak isterseniz Edge Sıze'ı %5-lû arasında bir değere düşülün. OK düğmesine tıkladıktan sonra yeni düğmeniz hasırdır. Yeni düğmeyi JPCİ dosyası olarak kaydedin IITML belgesinde (WEL( O-MO.ilTML) graligı Hypcrlmk ile şu şekilde ekleyebilirsiniz: >a href-'welcome.htmr> >img src-buraonT.jpg Dûrdar-0>>/a> border=0 parametresi graiigin arka sında bir link bulunduğunu gösteren çirkin mavi çerçevenin görüıt-—., ; memesini sağlar [ Gölgeli Düğmeler: Göl-I ge atma her zaman çekiciliğini koruyor. Birkaç tıkiaruaykı çabucak bu hoş navigasyon eleman lanın çizebilirsiniz. Burada da l'aınrshop Pro kullanabilirsiniz. ¦1(10*400 piksellik yeni bir grafik açın. İlk deneme için analan resmi i-çin beyaz ve 16.7 milyon renk kullanın. Şimdi resim penceresinin sol üs-riınde bir dörtgen çizin. Kili fonksiyonunun etkin olmasına ve aynı boyutla ikinci bir dörıgene de ye- ÜW Painıshop Pro ve Blur More fonksiyonu ile yumuşak badi ve gölgeli düğmeler çizebilirsiniz. lerince yer kalmasına dikk.ii edin. $imdi dörtgeni simge çubugundaki Magjc Wand düğmesi ile işarclleyin. Burada Tolerance ve Fcather seçeneklerinin değerini 10 olarak ayarlayın. Dörtgene Tıkladığınızda Painıshop daha büyük bir işaretleme çerçevesi çekecektir !?imdi beş defa arka arkaya Image - Normal Fillere - Blur More simgelerine tıklayın Böylece gölgenin çerçevesi daha yumuşak görünecektir. Daha sonra lekraı Magic Wand (Sihirli değnek*! ile ilk dörtgeni işaretleyin. Fcntlıer burada tekrar 0 değerini alacaktır. İlk dörtgeni gölgesinin üzerine sağda ve alna biraz boşluk kalacak şekilde yerleştirin. Hazır düğmeyi kesin ve JPG dosyası olarak kaydedin. Daha sonra ileride boş düğmeye yazılar yazabilir ve istediğiniz isim allımla kaydedebilirsiniz. Boş düğmeyi silmeyin, zira değişiklikler ve yeni düğmeler için ona ihtiyacınız olacak. 3 Navigation Çubuğu Tasarımı Bir navigasyon çubuğu aralarında boşluk bulunmayan birçok grafikten oluşur. Bunun için önce kompir çubuğu çizin ve üzerine gerekli yazıları ve başlıkları yazın. Daha sonra resmi parçalara ayırın ve bunları kaydedin. ^ 210 • CHlP NfSAH 199? I nternet : i:*:-'",.,. LA 'J.JJAV Wcb dokümanına bunları şu şekilde ekleyebilirdiniz: >nobr> >a hraf-Vı;elCQme.hürıf>-;irng tw der-O src="hutron1.;ı>ij' a!t-"Hr)tne">-i/a> >a iırelı1ink.hcmr>>inİj borderO src-*butLnnİ?,Jpg" all-"L)nk">>/8*. >a href=',yaz.fttmr>>İmg üorder-0 src-"buWon3.İPİ' fifeı"¥aa lçler">t/a> >/nobrı Burada cıı Önemli rolü nohr Tag'i nynar. Bu Tag. Brovvscı penceresi düğme çubuğundan daha dar oba bile, satır kesmesini engeller. Ayrıca I lyperlink'lcr arasında kaynak metin de satır keftnıeci bulunmamalıdır. Aksi halde Hrmvser her bir restin arasında boşluk bırakır. Alternatif olarak resimleri bîr Bibloya yerleştirebilirsiniz. Bu aynı optik ... ;- ._ ..... .... a-,------- ğ- .,_, ğ. -'[.'¦_ -¦¦¦ -; '¦ etkiye sahiptir, ancak size daha fazla seçenek sunar (ayrıntılı bilgiyi serinin bir sonraki bölümünde, bulabilirsiniz): >table celIspacıngO ceilpaddinçj-0 bordGi--Oy >tr> >a href-*we!come.htmî">>ımg ber-lîer=0 src-*"butlO!i1.i|^-aK-*Horoe*>>/e>>Azi > u*^ Navigaüoa çubuklarını önce komple tasarlayın, ? daha sonra çubuğu I parçalara ayı np ' düğmelen ayn ayn kaydedin. HTML kodunda düğmeleri tekrar birleştirebilirsiniz. -:a hre*-,ınk.hi;ınr'>>ımg border-Cl src-'üuU.on2.ipn," aR-'Lİnk'>>/a>>/td> >td> •ca hpef-'Vail*ni">>img bortter-0 Erc-"bıifuıı3.|pg' alt-'Yazı lslen'^/a>*/td> >/td> >/tr> Client Side imago Map Client Stda Image Map'ier Web sayfanız için hoş giriş menfileri tasarlamak iç'iı idealdir. Inage Map'ier, belirli alanlarına Hyporlink'le' yerleştirilmiş resimlerden o-luşur Bu Map'lorin tanımlanmasını HTML kodunda birkaç satir ila gerçekleştirebilirsiniz {önünvudeki ayın CD'sinde image-map.html dosyasında bulabilirsiniz), Image Tag'de çapraz link >map na-rne=...> ifade* ile yerleştirilir. Üç nokta yerine alan tanımlarım girmelisiniz. Şunlar Koordinat çiftlerinden oluşur. Dörtgenlerde sol üst ve sol alt köşelerin her Din i-çin bir çıtı kco-'dinata ihtiyacınız var, dairelerde ise orta nokta ve üçüncü değer olarak çap değeri tanımlama için yeterli olacaktır Koordinatların lespitinds Pa-inîshop Pro'nun durum çubuğundaki (Statu3bar) İarenin koordinat verilen işinize yarayacaktır. Ancak Uve Image gibi ur oy ramlarla bu >ş daha kolay. Bu editörde istediğimi çizip kesiyorsunuz. Live tmago uygun koordinatları kendi hesaplıyor ve HTML Kodu olarak kaydediyor. Live Imageın S^arewa'e sUmmünü ln-lemeî'tö vww trvetmagc.eorı nd-esinoe veya Mayıs CHiP CD'sinde bulabilirsiniz. ALT-ernatişer Web sayfamızda grafiksel nesnelerle ca- İnce Kesim lışıyo*samz, mutlaka her zaman AİT parametresini kısa bir bilgi metni ile kullanmaya dikkal edin- >n href"VelraınTe.htrnl">...... alt-THo- mQ-x/a> Bu metin (Home) ilgili meim yüklenene kadar ekranda görünür. Veri otoyolundakı bir hata veya durum yüzünden sılenizdo-ki resim görünmese büe. sayfanızı Ziyaret eden k*şı bu Text'lo yolunu bulabilir Frontpage'de Navigalion FrOntpaşe i* çalışıyorsanız, Navıgaüon tasarımında Editor'e tamamen gûvenebi- Frontpagc'ıie çift tıklama ile çubuğun görünümünü, içeriğini ve konumunu ayarlayabilirsiniz. Saf metin daha çabuk yüklenir, ancak pek de güzel görünmez. lirsiniz, jineak eğer sadece yeni bir siteyi sıfırdan Kurmak istiyorsanız. Sihirbaz sitenin ana tasanmı boyunca size yardımcı olacaktır Sonuçla komplo bir Homepage yapısı oluşturacak ve en önemli Navigaıion bileşenler im her bı' Web şayiasına yedeştirecoklir Hazır sayla yapısını en iyi şekilde Fronl-page E*plorer'da Navigatıon altında go rebîlirsiniz. Burada İare ile tek fek şayialar Öderinde yapılan uyana kadar değişiklik yapabilirsiniz (yerlorinî değiştirmek gibi). Aynca sayla ieimlerfnl de değiştirebilirsiniz Buıadaki avantajlardan biri do Fronlpaçpe'in herhangi bu değişiklikle diğer saylalardakı ilgili Rypsrlink'feri de uygun şekilde değiştirmesi. Navigalion çubuklarını Frontpage Edı-tor'Ca düzenleyebilirsiniz. Bileşenlerden birino çift tıklayarak (ya da sat) tuşla mönüden Mypertink Propeıtıes simgesine OkİayaraK) Hyperlınk özelliklerini açabilirsiniz. Bulada Style O-ğmesr'e tıklayın Nâviga'ion çubuğunu en ryisi saylanın üstüne ya da sol kenarına yerleştirin ve çubukta metinler mi yoksa u/a:k!er mi o ocağına Karar vorin Gerçi metinler genelde çoK daha hızh yüklenir, ancak gra-fttter de daha gOzel ycrûnur. Navigalinrı çubuğundaki tüm değişiklikler tüm Web sitesinde Kendini belli eem. g 212" CHiP NİSAN 1949

Arşiv Listesi