WEB TASARIMI DREAMWEAVER

Hazrlayan: r. Grv. Mahmut KANTAR

NDEKLER
1. WEB ..................................................................................................................................................... 4 1.1. WWW nedir ? ............................................................................................................................... 4 1.2. HTML nedir ? ................................................................................................................................ 4 1.3. Web Sayfas nedir? ....................................................................................................................... 4 1.4 Web sitesi nedir? ........................................................................................................................... 4 1.5. Web tasarm nedir? ..................................................................................................................... 4 2. Dreamweaver Temelleri ...................................................................................................................... 5 2.1. Balang Sayfas ve alma Alan ................................................................................................ 5 2.2. Siteyi Gelitirmek zere Hazrlk Yapmak ..................................................................................... 6 2.3. Yerel Site Tanmlamak ve Site Klasr Yapsn Oluturmak........................................................... 6 2.4. Yeni Bir Sayfa Oluturmak ve Kayt Etmek.................................................................................... 7 2.5. lk Al Sayfas ve Paneller .......................................................................................................... 8 2.6. Sayfaya Balk Atamak ................................................................................................................ 10 2.7. Metin Eklemek ............................................................................................................................ 10 2.8. Paragraf ve Satr Aras Eklemek .................................................................................................. 11 2.9. Metni Hizalamak ve Madde mleri ............................................................................................. 11 2.10. zel Karakterler Eklemek ......................................................................................................... 11 2.11. Sayfay nizleme ve Taraycda Grntlemek ........................................................................ 13 3. Sayfa Biimlendirme ve Stil Sayfalar Oluturmak ............................................................................. 13 3.1. Sayfa Arkaplan Rengini Deitirmek ........................................................................................... 13 3.2. CSS ( Cascading Style Shets ): Basamakl Stil ablonlar ............................................................. 14 3.3. Dahili Stiller ve Harici Stiller........................................................................................................ 14 3.4. Dahili Stil Oluturma ................................................................................................................... 15 3.5. Eklediiniz Stilleri Kullanmak ...................................................................................................... 16 3.6. Harici Stiller Oluturmak ............................................................................................................. 17 3.7. Mevcut Bir Harici Stil Sayfasn Balamak................................................................................... 18 3.8. Balarla ( Link ) almak ............................................................................................................ 18 4. Balar ................................................................................................................................................. 18 2

4.1. Balara Farkl Renk Atamak ........................................................................................................ 18 4.2. Hipermetin Balantlar Oluturmak........................................................................................... 19 4.3. Sayfa inde Link Vermek ............................................................................................................ 20 4.4. E-Posta Balantlar Eklemek ...................................................................................................... 21 5.Resimler .............................................................................................................................................. 22 5.1. Resimlerle almak .................................................................................................................... 22 5.2. Resim Trleri............................................................................................................................... 22 5.3. Sayfalarnza Arkaplan Resmi Eklemek ....................................................................................... 22 5.4. Sayfalarnza Resim Eklemek ...................................................................................................... 23 5.5. Resim zellikleri ......................................................................................................................... 24 5.6. Resimlere sim Vermek ............................................................................................................... 25 6. Tablolarla almak ............................................................................................................................ 25 6.1. Tablo Oluturmak ....................................................................................................................... 25 6.2. Tablo Hcrelerini Semek ve Biimlendirmek ............................................................................ 27 6.3. Tablolara Satr ya da Stun Eklemek .......................................................................................... 27 6.4. Tabloda Satr ya da Stunlar Silmek .......................................................................................... 28 6.5. Hcre birletirme ........................................................................................................................ 28 7. oklu Ortam Bileenlerini Kullanmak ................................................................................................ 28 7.1. Sayfalarnza Flash Animasyonlar Eklemek ................................................................................. 28 7.2. Bir Rollover Resmi Eklemek ........................................................................................................ 30 8. ablonlar (Template) ......................................................................................................................... 31 8.1. Belirli Bir ablonu Temel Alan Sayfalar Hazrlamak .................................................................... 31 8.2. ablonda Deiiklik Yapmak ....................................................................................................... 32

1. WEB
Web kelimesi rmcek a, a, dokuma kuma kelimelerinden tremi olup grnt, metin, ses, video gibi ieriklerin kullanlabildii, yaynland servisler olarak ifade edilebilir.

1.1. WWW nedir ?

Alm "World Wide Web" olan kelime "Dnyay saran a" olarak ifade etmek mmkndr

1.2. HTML nedir ?

Alm "Hypertext Markup Language" olan kelime, web sayfalarnn hazrlanmasnda kullanlan zengin metin biimli dil olarak ifade edilmektedir.

1.3. Web Sayfas nedir?

HTML olarak adlandrlan dil yardmyla oluturulmu, metin, grnt, ses gibi nesnelerin bulunduu ve tarayc yardmyla grntlenebilen dosyalara verilen isimdir.

1.4 Web sitesi nedir?

Bir kurum ya da kuruluun rn, hizmet, bilgi, iletiim gibi balklarda ve pek ok alanda oluturulabilen web sayfalarnn toplu halde bir dzen iinde bulunduu web sayfas gruplarna web sitesi ad verilir.

1.5. Web tasarm nedir?

Web sitesinin grntlenen grafik ara yzn gze ho gelecek ekilde, men ve eriim yapsnn basit ve kullanl, bilgiye en ksa yolla ulaabilecek, ilevsel bir yapda oluturulmasdr. Profesyonel bir web sitesinin karakteristik zellikleri nelerdir? Profesyonel bir web sitesi kullanc odakl olmaldr. Web sayfasnn hzn drecek animasyonlar, bekleme sreleri, video ve ses nesneleri tercih edilmemelidir. Her sayfa arama motorlar tarafndan listelenebilir yapda olmaldr. Gereksiz ve kullanlmayacak nesneler olmamaldr. Web sitesi zgn olmaldr. Tasarm ve ierii tekil olmaldr.

Web sayfas yapmak ve yaynlamak bir anlamda yeni bir iyeri amak gibidir. nce bir dkkan kiralarsnz. Sonra dkknnzn ismini koyarsnz. Ve mterilerinize satmak ya da sergilemek iin rnler alr dkknnz doldurursunuz. e web tasarm da byledir. Web sayfanz yapar ve bu sayfay barndracak bir alan kiralanr. Birde insanlarn sizin sayfanza ulaabilmeleri iin bir isim alrsnz. Alan kiralama ilemine Hosting ad verilir. Bu hizmeti veren pek ok irket vardr. sim alma ilemine Domain ad verilir ve bu isimlerde yllk belli bir cret karlnda kiralanr. Sayfa ieriklerini oluturabileceiniz bir web editr programna ihtiyacnz olacaktr. Gnmzde pazarn

lider rnlerinden Adobe Dreamweaver ihtiyacnz fazlasyla karlayabilecek bir programdr. Adobenin web sitesinden deneme srmlerini indirip kullanmak mmkndr. Dreamweaver, alannn ncs bir WYSIWYG (What you see is what you get / Ne grrsen onu alrsn) bir web editr ve gelitirme ortamdr Dreamweaver; bata HTML dzenleme olmak zere bir web tasarmcnn ihtiyac olan hemen hemen her konuda ihtiyalara cevap verebilecek zelliklere sahiptir. rnein tablo, resim, metin ve aklnza gelebilecek her trl HTML bileenini sayfalarmza grsel bir ara yz ile ekleyebilir ve dzenleyebilirsiniz.

2. Dreamweaver Temelleri
Adobe Dreamweaver CS5, Web sitelerinin oluturulmasn, ynetilmesini, bakmnn ve devamlln salanmasn mmkn klmak iin gl grsel tasarm aralaryla metin tabanl HTML dzenleme zelliklerini bir araya getirmitir. Dreamweaver grsel bir web editrdr. Hibir kod bilmeyen herhangi kullanc bile basit bir web sayfas oluturabilir. Dreamweaver CS5 kullanclarn Web sayfalar oluturmak iin gereken aralara kolayca ulamasn salarken, programlama dilini bilen kullanclara da gerektiinde dorudan kodla alma imkn salar.

2.1. Balang Sayfas ve alma Alan

Dreamweaver programn bilgisayarnza kurduktan sonra Tm Programlar listesi altnda Adobe Dreamweaver CS5 yoluyla program altrabilirsiniz. lk al ekran aadaki ekilde gelmektedir.

lk al ekrannda karmza stun kmaktadr. Soldaki Open a Recent Item stununda daha nce altmz dosyalarmz grnr. Eer almak istediimiz dosya bu listede yoksa Open seeneini kullanarak dosyamz aabiliriz. Ortadaki Create New stunundan yeni bir dosya oluturabiliriz. Buradaki listede Dreamweaver CS5 ile zerinde alabileceimiz dosya trlerini grmekteyiz. Bu listede bizim kullanacamz dosya tr temel seviyede tasarm yapacamz HTML dosya trdr. Sadaki en son Top Features ( videos ) stununda ise Dreamweaver CS5 ile beraber gelen hazr web site sihirbazlar veya Adobe tarafndan salanan yardmc video balantlar yer almaktadr.

2.2. Siteyi Gelitirmek zere Hazrlk Yapmak

Bir web sitesini oluturmaya balamadan nce n hazrlk yapmak site gelitirme aamasnn en nemli basamadr. Web sitesi yapmaya balamadan nce baz n hazrlk sorularna cevap vermek gerekir. Bu tr sorular Web sitesinin yapl amac nedir? Nasl bir web sitesi yaplacak ve hangi program kullanlacaktr? Web sitemizin ierii nasl olacak ve bu ierik iin hangi malzemeleri kullanacaktr? Web sitesi ne kadar zamanda yaplacak vb.

2.3. Yerel Site Tanmlamak ve Site Klasr Yapsn Oluturmak

Herhangi bir sayfa oluturmaya balamadan nce bir Web sitesi hazrlamann ilk adm, bilgisayarnzda sitenin iinde yer alacak her eyi ierecek olan klasrn oluturulmasdr. Bu ilem yerel bir site tanmlamak olarak adlandrlr. Yerel bir site tanmlamak size yerel ve web zerindeki site arasnda ayn yapy koruma imkn salar. Bu da ilevsel bir site tasarm ve bunun devamll asndan ok nemlidir. Elemanlar daima yerel site klasr iinde oluturma ve ayn klasr iinde alma alkanl edinmek gerekir. Bu alkanlk balantlar, yollar ve dosya ynetimi konularnn ynetimini kolaylatrr. Yerel kk klasrnn ad, ilgili sitenin ad ya da sizin setiiniz baka bir ad olabilir. Birden fazla site hazrlyorsanz, siteleri birbirinden kolayca ayrmanz salayacak aklayc isimler semeniz iinizi kolaylatracaktr. Yerel kk klasrnn ad sadece dosya ynetimi asndan nemlidir ve sitenin ziyaretileri tarafndan grnmeyecektir. Siteniz iinde dosyalarnz ile alrken dzenli bir alma ortam iin, site klasrnz iinde aadaki alt klasrleri oluturmalsnz. image: Bu klasr sizin sitenizin iinde resimlerinizi barndracanz klasrdr. css: Css klasr sitenizin iinde stil dosyalarnz saklayacanz klasrdr.

materyal: Sitenizin iinde ham dosyalarnz saklayacanz (ileride kolay bulmanz iin) klasrdr. Bu klasrn iine fla, psd gibi sitenizi iinde direk olarak kullanlmayan, fakat ktlarnn 6

kullanld ham dosyalar yerletirebilirsiniz. kullanmamaya zen gstermelisiniz.

Klasrlerinizi

adlandrrken

Trke

karakter

2.4. Yeni Bir Sayfa Oluturmak ve Kayt Etmek

Yeni sayfa oluturmak iin File mensnden New komutu tklanabilir ya da ilk al ekranndan HTML seenei tklanabilir.

Site klasr yapsn tanmladktan sonra Web sayfalarnz oluturmaya ve bunlarla almaya hazrsnz demektir. Yeni bir sayfa oluturduunuzda ilk yapmanz gereken ey belgenizi kaydetmek olmaldr. 7

Hibir tasarma ve eklemeye balamadan nce dosyanz site klasrnzn iine kayt etmelisiniz. Bu kayt srasnda dikkat etmeniz gereken; Trke karakter ( ,,,,,, gibi ) kullanlmamaldr, Byk harf kullanlmamaldr, Dosya ad birden fazla kelimeden oluuyorsa, boluk kullanlmamaldr. rnein ben kimim yerine ben_kimim eklinde olmaldr.

Belgeyi kaydetmek iin, File mensnden Save komutuna tklanr. Alan pencereden Dosya Ad kutucuuna yukarda yazlan kurallar eliinden bir isim verilir. Eer kaydettiiniz sayfanz anasayfanz ise dosya adn index vermeniz gerekir. Dosya trnde herhangi bir deiiklik yapmanza gerek yoktur. Tr olarak htm ya da html olarak kaydedilecektir.

2.5. lk Al Sayfas ve Paneller

Web sayfas oluturma iinde daha fazla ilerlemeden nce Dreamweaver CS5 arabiriminde yer alan ve verimli bir ekilde Web siteleri oluturmanz salayan eitli aralar ve panelleri tanmak gerekir. Tasarm ve kod yazma almalarnzn byk bir ksm belge penceresi iinde gerekleecektir. Bu alan sayfann gvde ksm olarak bilinir ve burada bir Web sayfasn oluturan eitli elemanlar ekleme, dzenleme ve silme ilemlerini yapabilirsiniz. Dreamweaver CS5de tane grnm modu bulunmaktadr: Code (Kod) Split (Bl) Desing (Tasarm )

Code : HTML programlama dilini bilen ileri dzey tasarmclar tarafndan kullanlr. Web site tasarm HTML kodlar kullanlarak yaplr. Desing : Temel tasarm ekrandr. Kod yazmaya gerek kalmadan grsel olarak tasarm yaplabilecek grnm modudur. Split : Her iki grnm modunu ( Code Desing ) birlikte kullanmak isteyen tasarmclar iindir. Bu grnm modunda isterseniz grsel olarak tasarm yapabilirsiniz isterseniz HTML dilini kullanarak kod yazabilirsiniz.

Temel seviyede bir kullancnn kod bilmesine gerek yoktur. Dreamweaver CS5 program bizim tasarm aamasnda yaptklarmz otomatik olarak HTML kodlarna dntrecektir. Sayfamzn en stnde Dreamweaver CS5 menleri bulunur. kinci srada zerinde altmz dosyalarmzn adn sekmeler halinde grebiliriz. Dosya isminin yannda * iareti bu dosyamz ile ilgili deiiklik yaptmz ve bu deiikliklerin kaydedilmediini gstermektedir. Sayfann altnda, sayfamzda kullandmz nesneler ve metinler ile ilgili zellikleri deitirebileceimiz Properties paneli bulunur.

2.6. Sayfaya Balk Atamak

Oluturduunuz her HTML belgesinin bir bal olmaldr. Bu balk ncelikle belgenin tannmas iin kullanlr. Web taraycsnn balk ubuunda grntlenir, sayfann ieriini gsterir ve Favorites (Sk Kullanlanlar) listelerinde isim olarak grnr. Title(Balk) blmnde Balksz Belge olarak grnr. Bu bal sayfanz uygun bir balkla deitirilir ve bu deiiklii yaptktan sonra dosya kaydedilir.

2.7. Metin Eklemek

Tasarm sayfamza metin eklemek iin birka yntem vardr. Ama en basit olan ve en ok kullanlan sayfamzda istediimiz yerine metni direkt yazmak veya kopyala yaptr yapmaktr. Sayfamza herhangi bir metin eklediinizde Properties panelinde metin ile ilgili zellikler aktif olur ve zerinde deiiklik yaplabilir. Text (Metin) iin Properties (zellikler) denetisi iki blm ayrlmtr: HTML ve CSS HTML alannda metnin HTML zelliklerini dzenlenebilir. Metninizin grsel zelliklerini dzenlemek iin CSS seeneini seilmelidir.

10

2.8. Paragraf ve Satr Aras Eklemek

Metin yazarken paragraf yapmak veya bir alt satra inmek metnin okunurluunu ve sitemizin grnrln kolaylatrr. Burada dikkat edilmesi gereken nokta bir alt satr kavram ile paragraf kavramdr. Yazlarda paragraf oluturmak iin Enter tuunu kullanlabilir. Paragraf olmadan bir alt satra inmek iin Shift + Enter tu bileimini kullanlabilir.

2.9. Metni Hizalamak ve Madde mleri

Metinleri hizalamak iin hizalanacak metni setikten sonra Properties ( zellikler ) panelinden CSS sekmesi altndaki seenekleri kullanlabilir.

Sayfamzdaki metinleri madde iareti eklinde oluturmak iin Properties ( zellikler) panelinden HTML sekmesi altndaki seenekleri kullanlabilir. HTML sayfalarnda her bir paragraf bir madde imi olarak kabul edilir. Metinler seilerek zellikler penceresinden HTML grubunda yer alana madde iaretleri simgesi tklanr.

2.10. zel Karakterler Eklemek

Web sayfamza klavyemizde olmayan zel karakterleri ( ,,,,,, gibi ) eklemek iin ekrann sa tarafndaki Insert paneline tklanr. Alt resimde grlen 1 numaral grnm grlecektir. Bu ekrandan Common ifadesi tklanarak 2 numaral ekrann grnmesi salanr. Alan listeden Text 11

ifadesi tklanr. Bu ifadenin alt listesi 3 numaral ekrandaki gibidir. Buradan Characters ifadesi tklanr. Yine alan pencereden Other Characters ifadesi tklanr.

Bu ekranda onlarca yardmc zel karakter bulunmaktadr. Herhangi birisi seilerek OK butonu tklanarak karakter ekleme ilemi tamamlanr. 12

2.11. Sayfay nizleme ve Taraycda Grntlemek

Dreamweaver CS5 ile altmz sayfay internete aktardmzda nasl grneceini nizleme yaparak grebiliriz. Bylelikle hem sayfamzn son halini grm oluruz hem de yaptmz tasarmn neye benzediini grebilirsiniz. Bunun iin yapmanz gereken klavyenizden F12 tuuna basmak ya da File mensnden Preview in Browser seeneine tklatmaktr. Burada bilgisayarda kurulu olan internet tarayclarnn isimleri bulunur. Eer F12 tuu kullanlrsa sayfa varsaylan tarayc ile nizlemeye alacaktr.

3. Sayfa Biimlendirme ve Stil Sayfalar Oluturmak

3.1. Sayfa Arkaplan Rengini Deitirmek
Sayfa arkaplan rengini deitirmek iin sayfa zellikleri kullanlabilir. Bu zellii amak iin Modify mensnden Page Properties ( Ctrl + J ) seeneini kullanlabilir.

Alan pencerenden sayfa ile ilgili ayarlar yaplabilir. Page Font: Sayfamzda kullanlacak temel yaz fontu grubunun seimidir. Burada bir satrda birden fazla yaz stili olmasnn nedeni, sitemizi ziyaret eden kullancnn bilgisayarnda birinci srada bulunan yaz sitili yok ise ikinci sradaki yaz stilinde grnmesi, o da yoksa nc srada bulunan yaz sitilinde grnmesini salayarak sayfann bozulmasn engellemektir. rnein; Verdana, Geneva, sans-serif

13

yaz tipi seildiinde ziyaretinin bilgisayarnda Verdana yaz karakteri ykl ise bu yaz karakteri ile grntler. Ykl deil ise Geneva ile grntler. O da ykl deil ise sans-serif ile grntler. Size: Sayfadaki metinler iin varsaylan yaz punto ayardr. Text Color: Metinlerin iin temel yaz rengidir. Background Color: Sayfann arka plan renk ayardr. Background image: Sayfann arka plannda renk yerine resim kullanmak istenirse, buradan eklenebilir. Repeat: Eer arka plan resmi sayfay tam olarak kaplamazsa tekrarlama ynnn seimidir. Bunlar No Repeat ( Tekrarlama ), Repeat ( Dikey ve Yatay Tekrarla ), Repeat x ( Yatay Tekrarla ) ve Repeat-y (Dikey Tekrarla ) seenekleridir.

3.2. CSS ( Cascading Style Shets ): Basamakl Stil ablonlar

Cascading Style Sheets (Basamakl Stil ablonlar ya da Basamakl Biem Sayfalar, bilinen ksa adyla CSS), HTML'e ek olarak metin ve format biimlendirme alannda fazladan olanaklar sunan bir Web teknolojisidir. Stil ( style ), tek bir isim ve at altnda tanmlanan birok biimlendirme kmesi niteliindedir nternet sayfalar iin ablonlar hazrlama olana verdii gibi, bamsz olarak harflerin stilini, yani renk, yaz tipi, byklk gibi zelliklerini deitirmek iin de kullanlabilir. Bu tekniin en nemli zellii kullanmndaki esnekliktir. Stillerin avantajn en genel ekilde ifade etmek gerekirse; bir stilin zelliklerinden herhangi birinde (renk, biim, boyut gibi ) bir deiiklik yaptnzda, yaplan bu deiiklik bu stil tarafndan kontrol edilen yani bu stile bal btn elemanlarda ve sayfalarda gncellenmi olur. CSS yardmyla Dreamweaver CS5de yapmas kark ve uzun olan birok ilemi otomatikletirmi oluruz. Stil sayfalarn kullanmann bir dier avantaj da, web sayfalarnn ieriinin biimlendirmeden ayr tutmasdr. CSS ile yapacamz deiikler ierik ne olursa olsun bal bulunan btn elemanlarda uygulanacaktr. Sayfamza metin, resim veya nesne biim ayar yapmadan sadece yaptmz stile balamak yeterli olacaktr.

3.3. Dahili Stiller ve Harici Stiller

Sadece oluturulduu sayfada geerli olan, ayr stil dosyas olarak saklanmayan stil trlerine dahili stiller denilir. Bu stiller sadece tek bir sayfada geerlidir. Dier sayfalarda kullanlamazlar. Tanmlanan stilin birden fazla sayfada geerli olmasn istiyorsanz, oluturduumuz stili harici olarak stil dosyas olarak oluturmanz gerekmektedir. Web tasarmnda genel olarak harici stil kullanlr. nk biimlendirmeyi ierikten ayr tutmak hem sitemizin yklenme hzn arttracak hem de gncelleme yaparken iimizi kolaylatracak ve tm sayfalara biimlendirme uygulanm olacaktr.

14

3.4. Dahili Stil Oluturma

Sayfamzda kaytl stilleri Dreamweaver CS5 ekrannn sa tarafnda bulunan CSS STYLES panelinden grebilirsiniz.

Yeni bir dahili stil oluturmak iin bu ekrann sa alt tarafnda bulunan New CSS Rule butonuna tklanr. Daha sonra stil kayt ekran alacaktr. Burada dikkat edilmesi gereken nemli nokta, stile isim verilirken Selector Name ksmnn benzersiz bir isim olmasdr. Stile isim verdikten sonra OK butonu ile stil kaydedilir.

Stil dosyas kaydedip tamam dedikten sonra stilde uygulanacak zelliklerin ayarlanaca pencere gelecektir. Buradaki kategorilerde;

15

Type : Metin ayarlar yaplr. Background :Arkaplan ayarlar yaplr. Block :Metin aral ve metinlerin yerletirilmesi yaplr. Box : Tablolarn byklk ve boluk ayarlar yaplr. Border :Tablolarn kenarlk ayarlar yaplr. List : Tanml tanmsz listelerin ayarlar yaplr. Positioning :Elemanlarn yerletirilecei konum ayarlar yaplr. Extensions : Fare imleci gibi ayalar yaplr. Ve OK butonuna tklanarak yeni bir stili oluturulmu olur.

3.5. Eklediiniz Stilleri Kullanmak

Oluturduumuz stilleri sayfalarmz iine ekleme ileminden sonra stilimizin zelliklerini uygulamak istediimiz metni veya herhangi bir nesneyi seip ekrann alt ksmnda bulunan Properties panelinde bulunan HTML zelliklerinden Class ksmndaki listeden stil seilip uygulanabilir.

16

3.6. Harici Stiller Oluturmak

Stillerinizi, her sayfa iin yeniden oluturmak yerine, web sitenizde kullanmak istediiniz stilleri saklayabilecek harici bir stil sayfas oluturabilir ve kullanmak isteimiz btn sayfalar iin kullanlabilir yapabilirsiniz. Bu biimlendirme seeneklerini tek bir yerden yneterek bu ilemi hem dzenli hale getirecek hem de hzlandracaktr.

17

Yeni bir harici stil oluturmak iin CSS panelinde New CSS Rule komutunu verdikten sonra alan pencerede alt ksmda bulunan Rule Definition ksmnda New Style Sheet File seenei seilmesi gerekmektedir. OK butonuna tklandnda CSSi kaydetme ekran gelecektir. Bir isimle alma klasr ierisine kaydedilir. Sonrasnda stil dzenleme ekrann alacak ve gerekli biimlendirmeler yaplarak OK butonuna tklanr.

3.7. Mevcut Bir Harici Stil Sayfasn Balamak

Web sayfalar iin daha nce oluturulan harici bir stil dosyas varsa ve bu stil tm sayfalarda kullanlmak isteniyorsa bu stili dosyaya balamak gerekiyor. Harici bir stil dosyasn bir sayfaya balamak iin Dreamweaver iinde CSS paneli altnda bulunan Attack Style Sheet (Stil Sayfasn Ekle) komutunu vermelisiniz. Bu komutu verdiimizde Dreamweaver bizden css dosyamzn olduu konumu soracaktr. Buradan dosyamz seip tamam dedikten sonra harici stilimiz sayfamza balanm olacaktr. Harici stiller ile alrken unutmamanz gereken nokta bu stil zerinde yapacanz her hangi bir deiiklik bal bulunan tm stilleri etkileyecektir.

3.8. Balarla ( Link ) almak

Site iinde bulunan metin, resim veya dier tm elemanlar arasnda dorusal bir balant kurabilmek iin kullanlrlar. Balar iki eleman birbirine balayan aralara verilen isimdir. Bu balar iki web sitesi olabilecei gibi site ierisinde bir sayfa, metin, resim gibi elemanlarda olabilir. Web tarayclar veya tasarm programlar farkl renk, alt izgi veya fare iaretisini deitirerek bu nesnelerin balantl olduklarn belirtir.

4. Balar
4.1. Balara Farkl Renk Atamak
Sayfamzda metin tabanl bir ba kurduunuzda Dreamweaver program bunu farkl bir renk ile belirtecektir. Bylelikle kullanc burada bir balant olduunu fark edebilecektir. Web tasarm yaparken eer bu renklerin dikkat ekici veya sizin tasarmnza uymadn dnrseniz bu renkleri kapatabilir veya isteiniz bir renk ayarlayabilirsiniz. Sayfanzn varsaylan balant renk dzenini deitirmek iin Modify mensnden Page Properties komutunu kullanlabilir. Alan pencereden Links ( CSS ) blmnden balar ( linkler ) iin yaz tipi, boyutu, rengi gibi ayarlar yapabiliriz. 18

Web sayfamzdaki balarn anlalr ve okunur olmas iin, ayarladmz renklerin arka plan veya dier kullandmz elemanlarla renk uyumsuzluu oluturmamasna dikkat etmek gerekir.

4.2. Hipermetin Balantlar Oluturmak

Hipermetin balantlar ziyaretileri web site iindeki belgelere ya da dier web sitelerindeki sayfalara ynlendirme olarak tanmlanabilir. Bu tr balantlara dosya indirme balantlar veya baka siteye verilen linkler rnek olarak verilebilir. Ayn site iindeki belgelere veya sitemizin dier sayfalarna gitmek iin verilen balantlara greceli balantlar denilmektedir. Bu tr balantlara ana sayfamzdan hakkmzda veya iletiim sayfasna gitmek rnek olarak verilebilir. Web tasarm yaparken link vermeden nce link verilecek sayfalarn kaydedilmesine dikkat etmek gerekir. nk kaydedilmemi bir sayfaya link vermek ve sonradan sayfay baka bir isim ile kaydetmek linklerin almamasna neden olabilir. Herhangi bir metine veya nesneye link vermek iin nesne seilir ve properties panelinden HTML sekmesinde Link ksmna balant vermek istediimiz sayfa, nesne veya site ismi yazlr veya yanndaki klasr simgesine tklanarak seilir. Eer link vereceimiz nesne site klasrmz iinde ise dorudan ismini yazarak balanty oluturabiliriz.( rnek: banner.jpg) Ancak balanty baka bir siteye verecek ise http://n ekini de yazmak gerekir.(rnek: http://www.aku.edu.tr).

19

4.3. Sayfa inde Link Vermek

Web sitemizde kullandmz belge ok uzunsa ya da birka blmden oluuyorsa, ziyaretinin belge iinde rahat dolaabilmesi iin belgenin belli noktalar arasnda balant oluturmamz gerekebilir. Bu yntem, ziyaretilerin yaz ile dolu bir ekran srekli kaydrma derdinden kurtarr. Sayfasnn ortasnda veya sonuna doru olan bir kullanc sayfa bana gitmek isteyebilir. te bu tr sorunlar amak iin sayfa ii link yntemi kullanlr. engel atma yntemi veya Adl balant ( Name Anchor) da denilen bu yntemde, sayfann eitli yerlerinde atlanacak balant yeri iaretlenir.

Site ii balant eklemek iin Insert ( Ekle ) mensnden Named Anchor seeneini kullanlr. Buraya tklandnda karmza bir pencere kacaktr. Bu pencerede Anchor Name ksmna benzersiz ve balantmz iin anlaml bir isim vererek ( Trke karakter olmadan ) OK butonu ile engelimizi olutururuz. Bu engel sayfamzda imle nerede ise oraya otomatik olarak eklenecektir. Bunu

20

istediimiz noktaya srkleyebiliriz. Tasarm aamasnda sayfamza eklenen bu nesne web taraycsnda grnmeyecek ancak balantlar alacaktr. Adl balant nesnemizi oluturup yerini belirledikten sonra sitemiz iinde bulunan metin, resim, nesne gibi elemanlara normal link verme ileminde yaptmz nesne seilir ve Link ksmndan adl balant iin #adlbalant eklinde ifade yazlr. rnein; adl balantnn ad deneme ise link kutucuuna #deneme eklinde yazlmaldr. Bylelikle seili olan nesneye tklandnda sayfa iinde engel nerede ise ekranmz site iinde oraya gidecektir.

Adl balant simgesini grnmyorsa Wiew (Grnm) mensnden Visual Aids (Grsel Yardmclar) seeneinden Invisible Elements (Grnmez eler) komutunu seilerek grnmez elerin grnrln aktif edilebilir.

4.4. E-Posta Balantlar Eklemek

Dreamweaver program iinde eposta adreslerine link vermek mmkndr. Bunun iin yapmamz gereken normal link verme ilemi ile hemen hemen ayndr. Aradaki tek fark web taraycsnn balantnn eposta adresi olduunu anlamas iin adresin nne mailto: n ekini getirmektir. rnek olarak enformatik@aku.edu.tr eposta adresine link vermek istersek Link blmne mailto:enformatik@aku.edu.tr yazmak yeterli olacaktr.

21

5.Resimler
5.1. Resimlerle almak
Resimler ziyaretilerin dikkatini ekmek ve/veya site zerinden vermek isteimiz mesajlar daha etkin bir ekilde iletmek iin etkili bir ara olabilirler. Dreamweaver CS5, sitemizde kullandmz resimler zerinde kontrol imkn salar. Bu sayede resim zelliklerini Dreamweaver iinden hzl ekilde deitirebilir, sitemiz iin uygun hale getirebilir veya dier resim ileme programlar ile aabiliriz. Burada dikkat edilmesi gereken husus, resimlerinizin alma klasr ierisinde toplu olarak bir alt klasrde yer almasdr. Daha nce ifade edildii gibi resimler iin image yada images isimli alt klasrler a-oluturulmas tavsiye edilmiti.

5.2. Resim Trleri

Web sitenizi gelitirirken sayfalarnzn iinde resimleri kullanarak etkiyi arttrabilirsiniz. Sayfalarmzda kullanabileceimiz resim trleri; JPG GIF PNG

resimleridir. nternette veya web tasarmnda en ok kullanlan resim formatlar GIF ve JPEGdir. Site iinde kullanlacak resimler seilirken en yksek kalite ve en dk dosya boyutu hedeflenmelidir. Dosya boyutlar bydke sayfamzn yklenmesi yava olacaktr. Site iindeki resimlerde GIF format kullanmak daha hzl bir web sitesi salayacaktr. Ancak fotoraf gibi kalitenin n plana kt resimlerde ise JPEG format kullanmak daha tercih edilen bir yntemdir.

5.3. Sayfalarnza Arkaplan Resmi Eklemek

Sayfalarmzn kullanclarn dikkatini daha ok ekmek veya iletmek istediimiz mesajlar daha etkin ekilde aktarabilmek iin sayfamzn arka plann da ayarlayabiliriz. Sayfann arka plann deitirmek iin Modify ( Deitir ) mensnden Page Properties ( Sayfa zellikleri ) komutu kullanlabilir. Alan iletiim kutusunda Appearance ( CSS ) ( Grnm ) sekmesinden Background color (Arkaplan rengi) ksmndan isteimiz rengi veya Background Image ( Arkaplan Resmi ) ksmndan isteimiz resmi seerek arka planmz deitirebiliriz.

22

5.4. Sayfalarnza Resim Eklemek

Sayfalarmzda kullanmak isteimiz resimleri ncelikle olarak sayfaya eklemek gerekmektedir. Bunun iin resmi eklemek isteimiz yere imlecimizi yerletirdikten sonra Insert (Ekle) mensnden Image (Resim ) seeneini kullanlabilir. 23

Resim dosyamz setikten sonra OK diyerek resmi seebiliriz. Daha sonra karmza Image Tag Accessibility Attributes ( Grnt Etiketi Eriebilirlik zellikleri) penceresi kacaktr. Burada Alternate text ksmna imle resim zerine gelince kacak ksa bir aklama yazlabilir ve daha sonra OK diyerek sayfamza resim eklenmi olur.

5.5. Resim zellikleri

Sayfamza eklediimiz resimlerin zelliklerini Properties panelini kullanarak dzenleyebilirsiniz. Bu panel resmin zerine tklatldnda alacaktr.

Bu pencerede bulunan baz kontrol zellikleri unlardr:

24

W (Width) H (Height) Src (Source) Link Alt V H Space Border

: : : : : : :

Resmin genilii Resmin ykseklii Resim dosyamzn kaynann adresi Resim dosyamza verebileceimiz link balants Resim zerine gelince kacak aklama Resmin sanda solunda ve altnda stnde braklacak boluk Resim kenarl

Dreamweaver ile resim zelliklerini ( zellikle boyutunu ) deitirdiimizde resmimizin kalitesinin deieceini unutmamak gerekir. Bunun olmamas iin sayfamzda kullanacamz resimleri ncelikle resim dzenleme programnda ayarlamalarmz yapmak gerekmektedir.

5.6. Resimlere sim Vermek

Resimler verdiimiz isimler genel olarak sayfamzda grnmese de isim vermek tasarm asndan nemli bir noktadr. Bu isimleri verirken Trke karakter kullanmamaya ve resim asndan tanmlayc bir isim kullanmak her zaman avantajdr. Bu isimleri pek kullanmaksak da kod yazm esnasnda iimize ok yarayacaktr. Bunun iin resmi setikten sonra Properties panelinden ID (Kimlik) ksmn kullanlabilir.

6. Tablolarla almak
Web sayfasnn iskeletini bir tablo ile yapmak nesnelerin yerleiminde kolaylk salayacaktr. Tm sayfa bir tablo olabilecei gibi bu iskelet iinde onlarca tablo ile eitli dzenlemeler de yaplabilir.

6.1. Tablo Oluturmak

Web sayfasnda tablo yapmak wordde tablo yapmaktan farkszdr. Bunun iin Insert mensnden Table seenei tklanr. Alan Table penceresinden satr ve stun says girilerek OK butonuna tklanr. Bu pencereden baz ifadeler aklanacak olursa; Rows: Satr says Columns: Stun says Table width: Tablo genilii 25

Border thickness: Kenarlk kalnl Cell padding: Hcre ii kenar boluu Cell spacing: Tablo kenarndan olan hcre boluu

26

6.2. Tablo Hcrelerini Semek ve Biimlendirmek

Tablo hcrelerini semek iin fare iaretisi kullanlabilir. Eer satr seilecekse satrn hizasna gelinerek fare sol tuuna, eer stun seilecekse stunun zerine gelinerek fare sol tuuna tklanr. Sonrasnda Properties penceresinde ilgili seenekler alacaktr. rnein seilen bir stun ise hcre ierisindeki verileri yatayda hizalamak isteniyorsa Horz ifadesinden gerekli seenek tklanr. Deyde hizalama yaplacaksa Vert ifadesinden deiim salanr. Seilen stunun arkaplan rengi deiecekse Bg ifadesinden uygun bir renk seilebilir.

6.3. Tablolara Satr ya da Stun Eklemek

Tabloya yeni satrlar ve stun eklenebilir. Bunun iin yeni satr yada stun eklenecek konuma fare imleci tklanr. Insert mensnden Table Object seenei tklanr. Yanda bir liste alacaktr. Bu listeden alta bir satr m, ste bir satr m, sola bir stun mu yok sa saa bir stun mu eklenecei soruluyor. lgili bir seenek tklanarak ekleme ilemi tamamlanr.

rnein; birinci satrn bana yeni bir satr oluturalm. Bunun iin tabloda birinci satrda herhangi bir hcreye tklanr. Insert mensnden Table Objects seeneinden alan pencereden Insert Row Above ifadesi tklanr. Yeni bir satr ste eklenmi olur. 27

6.4. Tabloda Satr ya da Stunlar Silmek

Var olan satr ve stunlar silmek iin ncelikle seme ilemi yaplmaldr. Sonrasnda Modify mensnden Table seenei tklanarak alan pencereden Delete Row yada Delete Column ifadesi tklanr.

6.5. Hcre birletirme

ncelikle birletirilecek hcreler seilir. Sonrasnda Modify mensnden Table ifadesi tklanarak alan pencereden Merge Cell ifadesi seilir. Bylece seilen hcreler birletirilmi olur.

7. oklu Ortam Bileenlerini Kullanmak

Sayfanza flash, film, yada ses dosyalar ekleyerek daha grsel hale gelmesi salanabilir. ncelikle bu tr nesneleri ilgili programlarda oluturmak gerekmektedir.

7.1. Sayfalarnza Flash Animasyonlar Eklemek

Flash animasyonlar swf olarak da adlandrlan ve reklam, banner, men gibi konumlarda yer alan bileenlerdir. Bu tr bileenleri oluturmak iin Flash programn bilmek gerekiyor. Var olan bir flash animasyonunu eklemek iin; Insert mensnden Media bal altndaki SWF ifadesi tklanr.

28

Alan pencereden swf dosyas seilerek OK butonu tklanr.

29

Object Tag Accessibility Attributes penceresinde herhangi bir ifade yazmandan OK butonu tklanabilir.

Flash animasyon uygulamas sayfaya eklenmi olur.

7.2. Bir Rollover Resmi Eklemek

Web sayfasna eklenen menlerde butonlarn zerine gelindiinde buton renginin ya da yaz renginin deitii grlr. Bu deiimi rollower zellii ile gerekletirebiliriz. Bunun iin bo iken nasl bir resim grlecei, fare ile zerine gelindiinde nasl bir resim grlecekse her ikisi de bir fotoraf editr program ile yaplmaldr. Sonrasnda resim eklenecek konuma fare imleci tklanr. Insert

30

mensnden Image Objects ifadesi zerine gelindiinde yanda bir pencere alacaktr. Alan pencereden Rollower Image ifadesi tklanr.

Alan pencerede; Orginal Image: Resim statik iken yani fare zerine gelmediinde grlecek olan resim Rollower Image: Fare ile resmin zerine gelindiinde kacak olan ikinci resi Alternate text: Fare ile resmin zerine gelindiinde kacak aklayc metin When clicked, Go to URL: Resme tklatldnda gidecei adres ekliden kutucuklar tamamlanr ve OK butonu tklanr. Klavyeden F12 tuuna baslarak nizleme yapldnda ve resmin zerine gelindiinde ikinci resmin kt grlecektir.

8. ablonlar (Template)
ablonlar hazr web siteleri olarak ifade edilebilir. nternet ortamnda hazrlayacanz konuya uygun binlerce cretsiz ablon rnei bulmak mmkndr. Bunun iin herhangi bir arama motoruna Free web template ifadesi yazldnda binlerce sayfa grntlenecektir. Bunlardan bir tanesi indirilip dzenlenebilir ve kendi web sayfanz kolayca oluturabilirsiniz.

8.1. Belirli Bir ablonu Temel Alan Sayfalar Hazrlamak

Genellikle ablon dosyalarda bir anasayfa bir de ierik sayfas rnei bulunur. Anasayfa da yer alan butonlar, menleri, banner, metinsel ifadeleri ve varsa resimleri elinizde bulunan dokmanlar eliinde tamamlayabilir, dzenleyebilirsiniz. Ayn sre ierik sayfalar iin de gerekletirilebilir. erik sayfalarn her defasnda farkl kaydet seenei ile kaydeder ve yeni isimler verilir. Bylece ierik sayfalarn bir ablon formunda oluturmu olursunuz.

31

8.2. ablonda Deiiklik Yapmak

ablon dosyasnda deiiklik yapmak iin ilgili dosyay Dreamweaver program ile amak gerekir. Bunu web sayfas zerinde fare sa tuuna tklanarak alan pencereden Edit With Adobe Dreamweaver ifadesi tklanr.

Design blmnden wordde dzenleme yaparcasna istenilen ifadeler yazlabilir, silinebilir, eklenebilir be biimlendirilebilir. Ayn ekilde ierik sayfalar da bu ekilde deitirilebilir. Farkl kaydet ifadesi ile ierik sayfalar oaltlabilir. 32