web tasarimi meb ders notu

8/8/2019 Web Tasarimi Meb Ders Notu

1/41

385

BLM-9:WEB TASARIMI

9.1.Macromedia DREAMWEAVER-4

Programlama dillerinde oldugu gibi HTML iin de, Visual (grsel) programlama zelligi tasiyan vehazir nesneler kullanan editr programlari gelistirilmistir. Bu programlar kullanilarak HTML dili daha basiteindirgenmis, sayfalar dolusu program kodu yazmak yerine hazir nesneler, grsel olarak kullanilmistir.Dreamweaverda bu programlarin en iyileri arasinda yer almaktadir.

Bu programla byk, karmasik ve etkilesimli web sayfalari hazirlamak mmkn. Dreamweaver webtasarimcilari iin hazirlanmis olan profesyonel bir web tasarim paketidir. Basit bir dokman dosyasi hazirlar gibiweb sitenizi hazirlayabilirsiniz. Dreamweaver, site tasarimini sadece kendi zellikleri ile sinirlamaz. digerprogramlarla kurdugu iliskiler ile agirip alistirmanizi saglar ve olusturdugunuz objeleri destekler.Olusturacaginiz web sayfalarinin yayina hazirlanmasini artirir ve site ynetimini en iyi dzeyde gelistirir.

Dreamweaver ile web sayfalariniolustururken sayfa yerlesimini hem grselolarak dzenleme imkani bulabilir hem desayfayi temsil eden HTML kodlarini arka

plnda takip edebilirsiniz. Sayfa ierisindedegisiklik saglamak iin ayrica hizli HTMLeditr bulunmaktadir. Bu kk editr ilebirlikte bir ok HTML komutu otomatik olaraksunulmaktadir.

Hizli bir sekilde web dizaynininsaglanmasi iin gelistirilmis bir diger zellik iseHTML stilleridir. Stilleri kullanarak siteierisinde yazi tipi, yazi zellikleri, zemin

renkleri veya resimlerinin tanimini, bloklama ve yerlesim islemlerini, ereveleme gibi bir ok islemi ayni andatanimlayip btn siteye uygulayabilirsiniz. Olusturdugunuz stil tanimini saklayarak btn siteye uygulama sansinasahip olacaksiniz. Bylece siteyi olusturan btn sayfalar iin ayri ayri tanimlar yapmaktan kurtulacak, kendinizezg tasarim sablonlari olusturabileceksiniz.

Site ierisine eklediginiz grsel nesnelerin arka planda nasil bir HTML kodu olusturdugunu takipedebilirsiniz. Dreamweaver HTML kodlarini satir numarasi vererek takip etme imkani da saglayacaktir. Busekilde numaralara gre sayfa ierisindeki kodlari takip edebilirsiniz. Ayrica yerlesim ekraninda setiginiz birnesnenin kodlarinin, HTML kaynak kodlari ierisinde de seili oldugunu grebilirsiniz. Bu zellik yardimi ilenesneye ait kodlari isaretlemis olabilirsiniz.

Olusturulan her sayfa, diger sayfalardan bagimsiz olarak tasarlanir. Sayfalarin birbirlerine baglanmasiile site olusur. Dreamweaver sadece sayfalarin olusturulmasi ve ynetimi iin degil, siteyi olusturan btnsayfalari kontrol eder ve ynetimini saglar. Site ierisinde bulunan sayfalari kontrol eder ve sayfalar ierisindetanimlanan kirik baglantilari tespit eder. Ayrica kullanilmayan herhangi bir dosyayi sitenin boyutunubytmemesi iin silinmesini saglar.

Olusturacaginiz sitenin, yerel disk alaninda saklanacagi konumu belirleyebilirsiniz. Ayrica siteierisine eklediginiz yada siteden sildiginiz dosyalara gre, siteye ait dosya listesini otomatik olarakgncellestirebilirsiniz. Dreamweaver siteyi temsil eden dosyalari sadece disk alaninda saklamakla yetinmez, webortaminda herhangi bir FTP(File Transfer Protocol) adresinede ynlendirebilir. Bu sekilde sitenin internetortaminda yayinlanmasini saglayabilirsiniz. Ayrica yayinladiginiz dosyalarin kontroln de saglamanizmmkndr. Yani, daha nce yayinladiginiz dosyalarin boyutlari kontrol edilecek, sadece ierigi degisendosyalar ve yeni dosyalarin yayinlanmasi saglanacaktir. Bu zellik kullanilarak srekli gncellenen sitelerinyayinlanmasi hizlandirilabilir.

9.2.TASARIMA NASIL BASLANMALI?

Web sitesinin tasarimina baslamadan nce site ierisinde kullanacaginiz dokmanlari olusturmanizgerekiyor. Web sayfalari ierisinde kullanacaginiz ses, resim, film ve metin dosyalarini nceden hazirlamaniz,hatta hangi dosyayi hangi sayfada kullanacaginizi kagit zerinde tasarlamaniz, sitenin olusturulmasi esnasindasize isik tutacaktir.

Ziyareti kitlesini ve bu kitleye yapacaginiz hitap metinlerini de uygun bir sekilde hazirlamaniz, siteninziyareti oranini arttiracaktir.Web iin kullanilan materyallerden site ierisine yazilan dil ve sluba kadar herseyden site tasarimcisi


2/41

386

sorumlu olacaktir. Bu yzden site olusturulurken toplumun sosyal ve kltrel zellikleri gz nnde tutulmali,hibir zaman hukuk ve demokrasi ile akisan ifadeler kullanilmamalidir. Site ierisinde kullanilan materyallereger bir baska yerden alinti ise kesinlikle alinan yerden izin alinmali yada materyalin serbest kullanilipkullanilmayacagi arastirilmalidir. Aksi halde telif yasalarina gre sulu duruma dsebilirsiniz.

9.3.DREAMWEAVER ILE ALISMAYA NASIL BASLANIR?

Bilgisayarinizda tm web ieriginizi kaydedeceginiz bir klasr ainiz ve bu klasrn iinde kullanimamacina uygun alt klasrler olusturunuz. (Resimleriniz iin "resim" klasr, grafik alismalariniz iin "grafik"klasr gibi). Ancak klasr ve dosya isimlerini verirken kesinlikle Trke karakterler (i, , g, s, , )kullanmayiniz. nk Trke karakterler web tarayicilarinin dosyanizi grmemesine neden olacaktir.

Ziyaretilerinizin "url" adresinizle grecekleri ilk sayfa yani ana sayfanizin ismi "index.html" olmalidir.Ana sayfanizdan ulasilabilecek diger sayfalariniza kisa ve anlasilabilir isimler vermeniz, istediginize ulasirkensize yardimci olacaktir.

9.4.DREAMWEAVER PROGRAMINI TANIYALIM.

Dreamweaver programini ilk alistirdiginizda asagidaki grnt ile karsilasacaksiniz. Ilk bakista biraz

karisik gelen grnt sizi tedirgin etmesin. nk programi kullanmaya basladika program arayznn sizebirok kolaylik sagladigini fark edeceksiniz.

Resim.9. 1

1.Belge PenceresiWeb sayfamizi olustaracagimiz alan. Yazilarimizi, grafiklerimizi,

tablolarimizi, formlarimizi vb. bu alan zerinde tasarliyoruz.2.Nesne Kutusu

Windows mensnden Objects(nesneler) komutunu tikladiginizda(Ctrl+F2)karsiniza sol taraftaki nesne kutusu ekrana gelir. Grms oldugunuz nesnelerdenistediginizi sayfanizda olusturabilirsiniz. rnegin sayfaniza resim eklemekistediginizde, dgmesine tiklamaniz yeterli. Siz sadece ekleyeceginiz resim

dosyasinin yolunu gstereceksiniz.Nesne kutusunda ekleyeceginiz nesneler alti kategori altinda

toplanmistir.

3.Kolay Erisim Penceresi

1

2 3

4

56


3/41

387

Windows mensnden Launcher komutunu tikladiginizda kolay erisim penceresi ekrana gelecektir. Bupencere bazi pencereleri ekrana getirir.

rnegin site haritanizi grmek istediginizde site dgmesini tiklamaniz yeterli.dgmesini tiklayarak web sayfanizin arka plandaki html kodlarini code inspector da

grebilirsiniz.

4. Gemis (History) PenceresiBu pencerede sayfanizi tasarlarken yapmis oldugumuz eylemler adim adim tutulur. Bylece sitenizi

olustururken hangi islem basamaklarindan gemis oldugunuzu grebilir, istediginiz bir adima geri dnebilirsiniz.Ayni zamanda bu pencere iinde Frames ve Layers blmleri var. Bunlaratiklayarak da ileriki konularimizda anlatacagimiz ilgili ayarlari yapabilirisiniz.

5. Stil (CSS) PenceresiStil, web sayfasinin ierisindeki metin ve paragraf ayarlari ile linklerle ilgili zelliklerin ekranda nasil

grnecegini belirleyen bir dizi ayar ieren komut satiridir. Sayfanizda degisiklik yapmak istediginizde bu

pencere yardimi ile degisikligi stil sayfanizda yapiyorsunuz, diger sayfalar ona gre grnslerini ayarliyorlar.6. zellikler (Properties) PenceresiBu pencere ile sayfanizi tasarlarken o anda zerinde ugrastiginiz herhangi bir nesnenin(metin, resim,

layer vs.) zelliklerini degistirebilirsiniz. Bu pencereyi ekrana Windows mensnden properties komutu veyaklavyeden Ctrl+F3 kisayolu ile agirabilirsiniz.

Ara pencerelerini ekrana getirmek iin WINDOWS mensn kullanabilirsiniz. Tasarim asamasindaekranda grmek istediginiz pencerenin ismini tiklayarak ekrana agirabilirsiniz. Mendeki komutlarin basindacheck(dogru isareti) olan pencereleri F4 tusuna basarak ekrandan gnderebilir, tekrar F4 tusuna basarak ekranagetirebilirsiniz.

9.5.SITE AYARLARI

Web sitenizi ncelikle kendi bilgisayarinizda tasarlamali ve her seyin tamam olduguna inandiktan sonrasayfalarinizi webservera gndermelisiniz. Bu blmde bu islemin nasil yapilmasi gerektigi anlatilacaktir.

nce Site mensnden New Site... komutunu alistiriniz. Komutla ulastiginiz pencerede

karsiniza gelen local info blmnde, Site Name kutusunda ncelikle sitenize bir isim verin.

Sonra Local root folder satirina, dgmesini tiklayarak kendi bilgisayarinizda yaratmis

oldugunuz klasrn yolunu gsteriniz. Bylece ilgili klasr root (en st dzey) olarak

tanitmis olursunuz. Bundan sonra kaydedecek olacaginiz dosyalar Local Root Folder da

tanimlanmis klasrn iine kopyalanacaktir. Alttaki HTTP adres satirina, sitenizin tam URL

adresini yaziniz.

Cache seim kutusunu tiklarsaniz. Dreamwearin bu web sitesi iin bir nbellek dosyasi

(cache file) yaratmasini isteyebilirsiniz. nbellek dosyasi sayesinde web siteniz, ierisindeki

dosyalarin konumunu ve zelliklerini aklinda tutar ve yaptiginiz degisiklikleringncellenmesini kolaylastirir.(Sekil-1)

Bu

isleriyaptiktan

Resim.9. 2


4/41

388

sonra OK dgmesini tiklatiniz. Karsiniza asagidaki pencere ikacaktir.

9.6.SAYFALARI

NIZIN

TRKEAYARL

ARI

M

acromedia

Dreamwea

ver Trke karakter setini desteklemiyor. Dolayisi ile sayfalarinizda yazmis oldugunuz i,,g,s,, gibi karakterler

farkli karakterler olarak ekrana yansiyor. Bu nedenle bir kez Dreamweavera Trke karakter setini tanimlamaniz

gerekiyor.

Dreamweaver programini atiktan sonra EDIT mensndenPreferences komutunu alistiriniz. Ekrana

gelecek olan diyalog kutusu ierisinde sol taraftaki listeden Fonts / Encoding seenegini aktif hale getiriniz.

Bylece Dreamweaverin ekranda gsterdigi yazilari hangi dilin alfabesinden seecegini ayarlamak iin

kullanacaginiz zellikleri diyalog kutusunun sag tarafinda grebilirsiniz. Ayarlari su sekilde yapiniz.

Default Encoding :Other

Font Settings :Other

Proportional Font :Times New Roman (Turkish)

Fixed Font :Courier New (Turkish)

Html Inspecter :Times New Roman (Turkish)

Ayarlarinizi tamamladiktan sonra OK dgmesine basin ve diyalog kutusunu kapatin. Bu islemdensonra sayfanizda ilk denemenizi yapabilirsiniz. Trke karakterlerinizi ekranda dogru grebiliyorsaniz sorunun ilk

adimini halletmissiniz demektir.

9.6.1.Web

Sayfalariniz Trke

Grnsn

Hazirlami

s oldugunuz web

sayfalarinizi ziyeret

edecek olan

kullanicilarin da

Trke karakterleri

dogru grebilmesi

iin html

sayfalarinizin

ierisine zel bir kod

yazmaniz gerekiyor.

Bu kodu kullanarak

sizin sayfaniza erisen

web tarayicisinin

(browser), karakter

setini otomatik

Resim.9. 4

Resim.9. 5


5/41

389

olarak Trke gstermesini saglayabilirsiniz.

Sa

yfanizin

Html

kodlarini

VIEWmensnden

Code

komutunu

alistirarak veya Launcher ara penceresinden Code Inspector dgmesini tiklayarak agirabilirsiniz.

9.7.SayfaTasarimi

Tasarlayacagimiz

ilk sayfamiz web sitemizin giris sayfasi olacak. Yani index.html. ncelikle yukaridaki blmlerde anlatmisoldugumuz, site ayarlari veTrke karakter ayarlariniyapmis olmaniz gerekiyor.

Resim.9. 9

Modify veya Sag fare mensnden Page Propertieskomutunu alistirin(Ctrl+J). Karsiniza Resim1de grlensayfa zelliklerini gsteren pencere ikacaktir.

Resim.9. 8

Resim.9. 6

Sayfanizin Html kodunu gsteren (Show code view)dgme tiklayarak asagi resimde grlen kodlari basligin(title) altina giriniz..

Resim.9. 7


6/41

390

Resim.9. 10

Title :Sayfanizin basligini buraya girebilirsiniz.Background Image :Browse(gzat) dgmesini tiklayarak.sayfanizin arka alanina resim koyabilirsiniz.Karsiniza gelen ekranda(Resim 2) resim dosyasinin yolunu gsteriyorsunuz. Preview images seenegini aktifhale getirdiginizde resim nizlemesini aktif hale getirip, resim dosyalarini isaretlediginizde ekranin sag tarafindakk nizleme yapabilirsiniz.

Site tanimlamasi yaparken olusturdugunuz Local Folderun(dosyalarinizi koydugunuz klasr) iinderesim isimli bir klasr olusturup grafik dosyalarinizi buraya koyabilirsiniz. Bu yntem dosyanin yolunu

tanimlarken size kolaylik saglayacaktir.

Resim.9.11


7/41

391

Background :Sayfanizin arka pln rengini, renkpaletinden seebilirsiniz.Text:Sayfanizdaki dz yazi rengi.Links:Sayfadaki yazilara eklenen linklerin rengi.Visited Links:Sayfada ziyaret edilmis linklerin rengi.Active Links:Sayfadaki aktif linklerin rengi.

Bu renk ayarlarini yapmazsaniz, Dreamweaverprogrami kendi default (varsayilan) ayarlari kabuledecektir. Default ayarlarda arka plan beyaz, metinlersiyah, linkler mavi, ziyaret edilmis renkler ise kirmizidir.

Ayni zamanda bu blmde yapmis oldugunuzmetin rengi ayarlari sayfa genelinde yaptiginizayarlardir. Isterseniz sayfanizin bir blmnden, blmseip, setiginiz blm iin ayri metin ayarlari

yapabilirsiniz.

9.8.Metin BiimlendirmeDreamweaver da yazilarinizi bir metin editr kullanir gibi girebilir ve biimlendirebilirsiniz.

Sayfanizin ilk satirindan baslayarak yazilarinizi girebilirsiniz. Metni girdikten sonra seili hale getirip daha sonra

Properties(Ctrl+F3) penceresini kullanarak bu metni istediginiz gibi degistirebilirsiniz.Metin zellikleri dialog kutusu asagidaki sekilde gsterilmistir.

Resim.9.13

1. Baslik iin istediginiz bir biimlendirmeyi buradan seebilirsiniz.

2. Metnin fontunu buradan seebilirsiniz.

3. Metnin punto byklgn buradan girebilirsiniz.

4. Metnin rengini buradan belirleyebilirisiniz.

5. Belirlediginiz rengin HEX kodunu buradan grebilirsiniz.

6. Seilen metini kalin (bold) yapar.

7. Seilen metini egik (italik) yapar.

8. Seilen metini sola, ortaya veya saga yaslar.

9. Seili metinle bir baska sayfaya link verecekseniz, onun yolunu burada belirtebilirsiniz.

10. Seilen metinle ayni sayfa ierisinde bir link vereceksiniz, bu dgmeyi kullanabilirsiniz.

11. Gzat dgmesini kullanarak link verilecek dosyanin yolunu gsterebilirsiniz.

Resim.9. 12

11

1 2 3 4 5 6 7

8

9 10 11 12 13 14


8/41

392

12. Eger sayfanizda frame (ereve) kullaniyorsaniz, linke tiklandiginda hangi ereve iindeailacak.

13. Madde imi ve numaralandirma.

14.Liste girdileri ve paragraf girintisini artirma-azaltma.

Asagidaki (Resim.9.14) resimde, grlen ekran grntsnde sayfanin basligi biimlendirilmistir.Yazi zerinde yapilan biim degisiklikleri properties penceresinde grlmektedir.

Resim.9. 14

Metinleri yazarken satir sonuna gelip ENTER tusuna bastiginizda, yeni bir paragraf eklediginiziunutmayin. Paragraf eklediginizde iki metin arasinda paragraf boslugu birakilacaktir. Paragraf boslugubirakilmasini istemiyorsaniz SHIFT+ENTER tus kombinasyonuna basmaniz yeterlidir.

9.9.Liste Biimlendirme

Sayfanizda sirali listeler olusturmak istediginizde nce sayfaniza liste elemanlarini alt altagirin. Sonra girdiginiz metinleri seip, Properties penceresindeki (sol tarafta resmi grlen)dgmelerinden herhangi birini tiklayarak numaralandirma veya madde imleri verebilirsiniz.

Resim.9. 15


9/41

393

Resim.9. 16

Liste zerinde herhangi bir alana farenin sag dgmesini tiklayarak LISTPropertieskomutunu alistirin. Karsiniza liste zelliklerini ieren pencere gelecektir (Resim.9.18). ListProperties dialog penceresine ekrana List Item dgmesini tiklayarak da ulasabilirsiniz.

Resim.9 17 Resim.9.18


10/41

394

Resim.9.19

Buradan List Type blm ile nasil birsiralama yaptiginizi gstermektedir. Istersenizburadan degistirebilirsiniz. Style blmn desz konusu listenin grnm seenekleribelirleyebilirsiniz. rnegin Resim.9.16 da1.2.3... seklinde olusturulmus listeyi A.B.C...

gibi sirali liste haline getirebilirsiniz(Bkz.Resim.9.19). Listenizi ille de 1.2.3.. veyaa.b.c... sirasinda baslatmak zorunda degilsiniz.Start Count kutusuna baslatmak istediginizsayiyi yazmaniz yeterli olacaktir. Resim.9.16.grlen liste, List Properties ekraninda yapilandegisikliklerle Resim.9.20. deki gibidegismistir.

Resim.9.20

9.10.Alt Liste OlusturmaListelerin iinde alt liste olusturabilirsiniz. Alt liste olusturmak istediginiz listeyi seili halegetirin(Resim.9.21). Daha sonra Properties (Ctrl+F3) dialog kutusunda bulunan (yanda grlen) dgmeyitiklayarak seili alani alt liste haline dnstrebilirsiniz. Olusturdugunuz alt listede herhangi bir yere

tiklayarak sag fare mensnden LIST Properties ekranina ulasabilirsiniz. Buradaki List Type ve Styleblmnden istediginiz siralandirmayi seebilirsiniz.(rnek:Resim.9.21)

Alt liste iindede alt liste olusturabilirsiniz. Yapmaniz gereken sadece alt liste olusturulacak alani seip

Properties dialog kutusundaki, sol ok resmi bulunan dgmeyi tiklamak.


11/41

395

Resim.9.21 Resim.9.22

9.11.Web Sayfasi ve ResimlerBir web sayfasi ierisinde metinler kadar nemliyse, resimler de bir o kadar nemlidir. Dz yazi ileanlatamayacaginiz pek ok seyi resimlerle anlatabilirsiniz. Resimler ayni zamanda sayfalarin gze gzelgrnmesini saglamaktadir. zgn bir sayfa iin, internet zerinden internet kullanicilarina sunacak oldugunuzmalzemeleri ok iyi semelisiniz.

Bu arada resimlerin asiri kullanimindan da kainmak gerekir. Zaten yavas olan internet hiziyla, bolresimlerle dolu bir web sayfasinin yklenmesini beklemek sayfanizi ziyaret edenlerin kamasina yol aacaktir.Bu yzden sayfalarimizda dev resimler kullanmak hi de mantikli bir yntem olmayacaktir.

Bu web sayfalarini yaratirken kullanacagimiz resimleri web sayfalarimiza nasil yerlestireceginizi debu blmde ayrintilari ile greceksiniz.

Web sayfalarinda kullanilan resimler, GIF veya JPEG formatinda olmalidir. Resimleri siniflandirmakgerekirse, GIF trndeki resim dosyalarinin daha ok izim, dgme, logo gibi grntleri web sayfalarinaaktarmak iin kullanildigi sylenebilir. Fotograf, manzara, peyzaj gibi grntleri web sayfalarinda kullanmak

gerektiginde ise JPEG formatindaki resimler daha iyi sonu verir. Her ikisi de "sikistirmak" bir resim formatiolan GIF ve JPEG arasinda da birok fark var. GIF resimleri sikistirirken kayba neden olmuyor, resmin orijinalgrnts neyse ekranda da onu gsteriyor. Oysa kayipli sikistirma yapan JPEG formatinda, resim birazbozuluyor. Ancak daha ok fotograf tr resimlerde kullanildigi iin bu kayip ok da byk farklar getirmiyor.

Bir web sayfasina bu iki formattan birinde hazirlanmis bir resmi yerlestirmek iin resmi, ilk nce websiteniz iin hazirladiginiz klasrn ierisindeki "resimler" klasrne kopyalamalisiniz.

Resim.9. 23

Yukaridaki rnek resimde, fare imleci hemen birinci paragrafin basinda bulunuyor. Btnkartlarin... kelimeleri ile baslayan cmlenin basinda yer aliyor. simdi bu konumda bir resim eklemek iin sol

taraftaki alet antasi adini verdigimiz ara ubugundan birinci dgmeye basabilirsiniz veya INSERTmensndenImage komutunu tiklayabilirsiniz.(Bkz. Resim.9.24 ve Resim.9.25)

Imlecin bulundugu yer


12/41

396

Resim.9. 24

Resim.9. 25

Bu dgmeye bastiginizda, ekranda resim eklemek iin kullanilan bir gzat pencersi grntlenecektir.Asagida bir rnegi grlen bu diyalog kutusunu kullanarak sabit diskiniz ierisinde web sitenizin altinda kiresimleri depoladiginiz klasr bulun ve buradan sayfaya eklemek istediginiz resmi sein.

Resim.9. 26

Gzat penceresi ierisindeki herhangi bir resmin zerine tikladiginizda (eger sag alt taraftakiPREVIEW IMAGES seenegi aktifse) o resmin rnek bir grntsn diyalog kutusunun sag tarafindan izleyipkararinizi ona gre verebilirsiniz. Bu nizleme grntsnn hemen altinda da resmin eni ve boyu, resimdosyasinin boyutu ve web tarayicisinin normal sartlarda bu resmi ne kadar zamanda ykleyebilecegi yazacaktir.Gerekli ayarlari yaptiktan sonra SELECT dgmesine basin. Resim web sayfasi ierisinde ayarlamis oldugunuzyerde grntlenecektir.9.11.1. Resim Etiketleri

Bir web sayfasi aildiginda, ilk nce metinler, arkasindan da resimler yklenir. Ancak bazidurumlarda, rnegin internet hizinin dsk oldugu durumlarda bu resimlerin yklenmesi uzun bir zaman alabilir.Bu durumda web sayfasinin yklenmesi sirasinda internet kullanicisinin kendisini nasil bir web sayfasininbekledigini bilmesi iin web sayfalarindaki resimlerin etiketlerini belirlemek iyi bir fikir olacaktir. Eger bir

resme etiket koyarsaniz, web sayfasi yklenirken resmin bulunmasi gereken yerde bu etiket yazar ve websayfasini ykleyen kisi de en azindan nasil bir resimle karsilasacagini bilir.

Web sayfaniza aldiginiz herhangi bir resme byle bir metin etiketi yapistirmak istiyorsaniz resmiseili duruma getirin ve zellikler diyalog kutusuna bakin. Burada sag alt tarafta greceginiz ALT isimli metinalanina resmin etiketini yazip ENTER tusuna basarak yapabilirsiniz.


13/41

397

Resim.9. 27

9.11.2. Resimleri Degisik Konumlara YerlestirmekBir resmi bir web sayfasina yerlestirdikten sonra etrafindaki metne gre konumunu degistirebilirsiniz. Aynen

kelime islem veya diger sayfa tasarim programlarinda oldugu gibi resmi saga veya sola yaslayarak metnin

etrafinda kaymasini saglayabilirsiniz. Bylece gereksiz st ve alt bosluklarin olusmasini da engellemisolursunuz. rnegin bir nceki ekran grntsnde aldigimiz resimde herhangi bir "yaslama ayari" yapilmamisoldugu iin resmin hemen saginda metin gereksiz yere asagidan baslamis olarak grlyor.

Resim.9. 28 Resim.9. 29

Bir resmi metne gre saga veya sola yaslamak iin resmin zerine bir kere tiklayin ve seili durumagetirin. Seili duruma getirilen resmin etrafinda bir ereve greceksiniz. Simdi zellikler diyalog kutusuna birgz atin (eger ekranda degilse CTRL + F3 tuslarina basarak bu diyalog kutusunu ekrana getirebilirsiniz). Budiyalog kutusunun ierisinde sag st tarafta ALIGN adinda asagi dogru ailan bir liste kutusu greceksiniz.Buradan resmi sola veya saga yaslayabilirsiniz. Sol iin LEFT, sag iin de RIGHT seenegini kullanabilirsiniz.

Resim.9. 30

Bir resmi saga veya sola yasladiginizda, editr ekrani ierisinde kk mavi bir karecik greceksiniz.Bu mavi karecigi fare ile srkleyerek resmin metne gre yerlesimini ayarlayabilirsiniz. Yani mavi karecigi fareile srkleyerek metnin ierisinde herhangi bir yere birakabilir ve resmin o konuma gre saga veya solayaslanmasini saglayabilirsiniz.

Bazi durumlarda resimleri metne gre degil metinleri resme gre yerlestirmek gerekebilir. rnegin alt

alta resimlerin yer aldigi ve sag taraflarinda da aiklamalarin bulundugu bir web sayfasi hazirlamak istediginizivarsayalim. Bu durumda metinleri resimlerin tam ortalarina denk getirmek isteyebilirsiniz. Veya btn metinleri

Resime kendiniz

isim verebilirsiniz

Resmin boyutlarini

degistirebilirsiniz.Resim zerinden baskabir sayfaya linkverebilirsiniz

Resmin sayfaierisindekihizalamasini

yapabilirsiniz.

Resmi blmlereayirarak farkli sayfalaralinkler verebilirsiniz.

Resmin kenarlarindabosluk birakabilirsiniz..

Frame kullaniyorsaniz,link verdiginiz sayfaninnerede ailacaginibelirle ebili orsunuz.

Eklediginizresme ereveekleyebiliyorsunuz..


14/41

398

resimlerin sag st kseleri ile hizalamak gibi bir amaciniz olabilir. Bu durumda da yine resim zelliklerindenALIGN ayarini kullanacaksiniz. Burada kullanabileceginiz seenekleri kisaca zetleyelim.Baseline veya BottomMetin satirinin en alt siniri resimle hizalanir. engellere (g veya j harfi gibi) dikkat edilmez..Absolute BottomMetin satirinin en alt siniri resimle hizalanir. engellere (g veya j harfi gibi) dikkat edilir.

TopMetin satiri ierisindeki en yksek karakterin en st ile resmin en st hizalanir.Text topMetin satiri ierisindeki en yksek karakterin en st ile resmin en st hizalanir.MiddleMetin satirinin en alt siniri, resmin tam ortasi ile hizalanir.Absolute Middle Metin satirinin tam ortasi, resmin tam ortasi ile hizalanir.9.11.3. Resimlere ereve Eklemek

Web sayfalariniza aldiginiz resimlere bu tr ereveler eklemek istiyorsaniz, bu islemi yapmak iinMacromedia Dreamweaver ile sayfaya resmi ekledikten sonra zerine bir kere tiklayin ve seili duruma getirin.Properties penceresinden Border alanina sayisal deger girin.

Resim.9. 31

9.11.4. Resimlere LinklerLink'leri kisaca tanimlarsak, link baglanti anlamina geliyor. Ayni zamanda bir web sayfasi

ierisinde zerine fare ile tikladiginizda sizi baska bir web sayfasina alip gtren bir alana verilen addir. Yanikpr.

Bir web sayfasi ierisindeki herhangi bir nesneyi (ki bu nesne bir metin, bir resim veya bir filmolabilir) bir link'e dnstrebilirsiniz. Linkleri koymak ve kullanmak Dreamweaver ile son derece kolaydir. Bublmde degisik web sayfasi elemanlari kullanarak bir web sayfasindan digerine veya bir web sayfasi ierisinde,

bir yerden baska bir yere link vermeyi grenecegiz.9.11.4.1. Sayfa Ierisindeki Link'lerok uzun bir web sayfaniz oldugunu dsnelim. Ekranlara sigmiyor, en az bir iki ekran asagi dogru kaymaniz

gerekiyor. Bu durumda, bu upuzun yaziyi belli basliklarla ayirip sayfanin st tarafindan basliklara link vererekweb sayfasina baglanan bir internet kullanicisinin sayfa ierisinde asagi yukari kaydirma yapmadan istedigibilgiyi ieren blme gitmesini saglayabilirsiniz. Elbette o blmnn sonunda sayfanin en tepesine geridnmesini saglayacak bir link koymayi unutmamalisiniz.

Biz bu isleme "sayfa ierisinde link vermek" diyoruz. Bu konuyu bir rnekle uygulamaya baslayabiliriz. ncezerinde alismak istediginiz sayfayi ain. Bu sayfanin ierisinde en az iki ekran asagi kaymanizigerektirecek uzun bir yazi olmasina ve blm basliklari ile ayrilmis olmasina dikkat etmelisiniz. Yoksayapacagimiz isi kendi bilgisayarinizda iyi rnekleyemezsiniz. Bu tr uzun yazilari eski kelime islembelgelerinizden bulup kopyalayip (CTRL+C) Macromedia Dreamweaver editr penceresine yapistirarak(CTRL+V) elde edebilirsiniz.

ncelikle INSERT >> invisible tags >> Anchor komutunu alistiriyoruz veya Ctrl+Alt+A tuskombinasyonunu kullanarak da ulasabiliriz. Linke tikladigimizda nereye gitmesini istiyorsak anchor linkini oblge zerinde veriyoruz asagidaki sekilde oldugu gibi.


15/41

399

Resimde ncelikleanchor link

isminiveriyoruz bendisk ismini

verdim. Artiksayfanin herhangi yerine

veya baska bir web sayfasinda verecegimiz, ben sabitdisk.htm sayfasina ekledim anchor linkimi. rnegin bendonanim.htm sayfamda setigim bir resmin veya metinin properties kutusuna link blmne sabitdisk.htm#diskseklinde link verdim.(Resim.9.33)

Resim.9. 33

Uzun bir sayfaniz varsa, ayni sayfa ierisinde link verecekseniz, setiginiz resim veya metininproperties ekranindaki link blmne vermis oldugunuz anchor link ismini giriniz. rnegin ben sabitdiksayfamda sayfanin sonlarina dogru bir yerde disk kelimesinin oldugu kelimeyi seip properties kutusuna linkblmne #disk seklinde link verdim.(Resim.9.34)

Resim.9. 34

Aklinizda olmasi gereken kk bir not dselim. Macromedia Drearmveaver'in Trke isaretler vebosluklar ile arasi pek iyi degil. Bu yzden blm basliklarini isaretlerken ve isimleri verirken, Trkekarakterler kullanmayin ve bosluk birakmayin. Bosluk kullanmak istediginizde, altizgi kullanabilirsiniz.9.11.4.2. Diger Sayfalara Link'ler

Resmi veya metni seili duruma getirdikten sonra Properties diyalog kutusuna bakin. Diyalog kutusuierisinde LINK adinda bir blm greceksiniz. Bu blme bu web sayfasina baglanan bir internetkullanicisinin, resim veya metnin zerine tikladiginda gitmesini istedigi web sayfasinin adresinigsterin.(Resim.9.35). Ok ile belirtilen gzat dgmesini tiklayin.

Resim.9. 32

Sayfanin, zerinde mi, yoksa yeni birpencerede mi ailacagini belirleyebilirsiniz.


16/41

400

Resim.9. 35

Ekrana, asagida resmi grlen pencere gelecektir. Buradan daha nce hazirlayip kaydetmis oldugunuzweb sayfanizin yolunu gsterin.

Resim.9. 36

9.11.4.3. Diger Sitelere Link'lerBir web sayfasi ierisinde zerine tiklayarak baska web sayfalarini ekrana getirecek linkler de

olusturabilirsiniz. rnegin, bir yazinin ierisinde "Milli Egitim Bakanligi " adi geiyor diyelim. Bu yaziyi birlink haline getirip, sayfaya baglanan internet kullanicisinin otomatik olarak bu link'in zerine tiklayarak MilliEgitim Bakanligi web sitesine baglanmasini saglayabilirsiniz. Bunu yapmak iin nce yaziyi hazirlayin, dahasonra link haline dnstrmek istediginiz metni seili duruma getirin.(Resim.9.37)

Resim.9. 37

Adresi eksiksiz yazmayi ihmal etmeyin. Eger bir web sitesine link veriyorsaniz bu adresi www iledegil http://www ile baslatmaniz gerekli. Aksi takdirde isler karisacaktir. Bir web sitesine link verdiginizde egergidilen web sayfasi sizin sitenizin ierisinden bir web sayfasi degilse, bu durumda yeni ailan web sayfasiinternet kullanicisinin sizin web siteniz ile ilgili olan btn baglarim koparacaktir. Bu yzden internet

kullanicilarini web sitenize bagli tutabilmek iin bu tr "site disi" link'leri yeni ailan web tarayicisipencerelerine gndermekte yarar vardir. Bylece sizin web siteniz arka plnda aik kalacak, yeni adres ailan


17/41

401

yeni bir pencerenin ierisinde grntlenecektir. Bu pencere kapatildiginda sizin web siteniz yine ekranda hazirdurumda bekliyor olacaktir.

Bir link'e tiklanildiginda link'in isaret ettigi web sayfasinin yeni bir web gezgini penceresi ierisindeailmasini saglamak iin link'i verdikten sonra zellikler diyalog kutusu ierisinde LINK blmnn sagindakiTARGET adindaki asagi dogru ailan liste kutusuna bakin. Buradaki menden _BLANK seenegini aktif halegetirirseniz sz konusu link yeni bir pencerede ailacaktir. rnek iin yukaridaki resme bakabilirsiniz.

9.11.4.4. E-mail Adresine Link Vermek.Her web sayfasi iinde bu sayfayi hazirlayan kisi veya kurumun bir e-mail adresinin grntlenmesiiyi bir seenektir. Bylece sayfayi izleyen internet kullanicisi bir konuda bir sorusu, elestiri veya yorumuoldugunda bunu kime yneltecegini merak etmez, nk bu bilgi zaten sayfa ierisinde kendisine verilmistir.

Bir web sayfasi ierisinde tek tiklama ile istediginiz adrese e-mail gndermesini saglayacak bir linkhazirlayabilirsiniz. Hem de son derece kolay bir sekilde. nce sayfa ierisinde imleci e-mail adresinizingrntlenmesini istediginiz konuma getirin. Yazdiginiz bir metni veya resmi seili konuma getirin. SimdiDreamweaverin INSERT mensnden E-Mail Link komutunu alistirin. Bu komutu alistirdiginizda ekranaasagidaki rnek resimdeki gibi bir diyalog kutusu gelecektir.(Resim.9.38)

Bu diyalog kutusu ierisinde TEXT blmne link'in metnini, E-MAIL blmne de bu link'etiklanildiginda e-mail mesaji atilacak olan e-mail adresini girin. OK dgmesine basin ve diyalog kutusunukapatin. E-mail gnderme link'iniz sayfanin ierisine girilmis olacaktir. Artik bu link'e tiklayan internetkullanicisinin e-mail programi otomatik olarak ailacak ve ayarlamis oldugunuz e-mail adresine mesaj

gndermeye hazir bir sekilde bekleyecektir.

Resim.9. 38

9.11.4.5. Image-MapResimlerin zerinde dolasirken bazi linkler grrsnz ayni resim zerinde bi ka tane link olur

rnegin bunu dreamweaver'da image map komutuyla yapiyoruz. ncelikle resmi INSERT >> images komutunualistirip resmimizin sayfaya yerlestigini, sonrada selection mende resim zelliklerinden image map zelligininde aildigini grecegiz. Asagidaki sekilde grelim.

Resim.9. 39

Sekildede grldg gibi hangi image map seklini kullanacaksak seiyoruz ve resmin zerindeki yesilalan gibi tariyoruz, ve link veriyoruz. Target vereceksek dzenliyoruz ve kaydettigimiz zaman artik resminzerinde bi ka tane link olusturmus oluyoruz.

9.12.Web Sayfasinda Tablolar


18/41

402

Dreamweaverde'da web sayfasi hazirlamanin en kolay yolu tablolar olusturmaktir. Tablo genisliginiyzde (percent) olarak verebilirsiniz. Bylece gelen ziyaretinin ekranini sayfaya tam olarak kaplayacaktir.Ancak byk ekranlarda yatayda bazi bosluklar olacagi iin 800 piksel genisligindeki bir ekranda alisiyorsaniz,yzde seenegini kullanin.Su an Trkiye'de srf edenlerin %60'i 800*600 ekran znrlgn kullanmaktadir. Yzde 30'u ise 1024*768ekran znrlgn tercih etmektedirler. Bu nedenle tablo olustururken sayfanin genisligini 800 piksel olarak

belirlemeniz daha dogru olacaktir.Bir tabloyu olusturduktan hemen sonra ykseklik degerini girin. Ardindan her hcre iin genislik veykseklik degerlerini, yapacaginiz ayarlamaya gre girmeyi unutmayin. Bu iki detay unutuldugu iin, browserarayznde, hcrelere yerlestirilen elemanlar, dagilmis olarak grnmektedir. Tablo kullaniminda bir digernemli husus, cell pading ve cell spacing degerlerinin 0 (sifir) yapilmasidir. Aksi takdirde, hcreler arasindabeyaz bosluklar grnmektedir

Browser yazilimlari, bir web sayfasini, stten alta dogru, tablolar ile ykler. Bu nedenle, sayfatasariminizi, yatayda tablolara bln Eger tm sayfayi, tek tablo iinde tamamlarsaniz, ziyaretiniz tablonunaltindaki son resim elemanin son pikseli ykleninceye kadar, hi birsey gremeyecektir.

Resim.9. 40

Trke ayarlarini yaptiktan sonra basit bir tablo yaratarak ise baslayalim. Bir Web sayfasinin ierisinetablo eklemek iin sag taraftaki alet kutusundan sol siradan yukaridan ikinci dgmeye basin, bu dgmeyebastiginizda ekranda tablonuzun boyutunu ve hcre sayisini belirleyecek olan bir diyalog kutusu ile karsi karsiyakalacaksiniz.(Tablo eklemek iin INSERT mensnden Table (crtl+alt+T) komutunu da kullanabilirsiniz.)

Rows : Asagi dogru ekleyeceginiz tablo sayisi.Columns : Saga dogru ekleyeceginiz tablo sayisi.Width : Tablonuzun genisligi. Yaninda pixels seili bu pixel genisligine gre genislik ayariniyapmamiz lazim yani 800*600 ekran znrlgnde 750 semek mantikli, percent seerseniz, budasayfanizin boyutunu % de ile belirlersiniz %100 yaparsaniz 1024*768 znrlkte de tam ekranailir. 800*600 ekran znrlgnde de ayni ailir.Cell padding : Tablo iindeki alan boyutu.Cell Spacing : Tablo alanlari arasindaki bosluk boyutu.

Border : Tablo kenar genisligi.Bu zellikleri istediginiz gibi ayarladiktan sonra OK dgmesine basin. Tablonuz web sayfasininierisinde grntlenecektir. Asagidaki rnek resimde 3x3 boyutlarinda, 300 piksel genisliginde, ereveleriolmayan bir tablo olusturulmustur.


19/41

403

Resim.9. 41

Tablonuzun ierisini byle doldurduktan sonra, tablonun boyutunu, hcrelerin genisligini ve bunungibi zelliklerini istediginiz gibi degistirebilirsiniz. Hcre boyutlarini degistirmek iin farenizi kullanin vehcrelerin erevelerine tiklayip srkleyip tablonun boyutunu ayarlayin. Hcre boyutlarini bylece ayarladiktansonra hcrelerin ayarlayabileceginiz diger zelliklerine bir gz atalim.

ncelikle, tablo zelliklerini degistirme islemini sayfanin alt tarafindaki zellikleri diyalog kutusunu

kullanarak yapacaginizi unutmayin. Tablonuzun zellikler diyalog kutusunu ekrana getirmek iin hcreerevesine tiklayip tabloyu seili duruma getirmelisiniz. Bu islemi yaptiginizda tablonun etrafinda bir erevegrntlenecek, zellikler diyalog kutusunda da tablo seenekleri beliriverecektir.

Bu diyalog kutusunun tm seeneklerini ekrana getirmek iin sag alt tarafindaki kk genetiklamalisiniz. O zaman diyalog kutusu asagiya dogru uzayacak ve tm seenekler ekrana ikacaktir. Simdi debu seeneklere bir gz atalim:

ROWS :Tablonun satir sayisini buradan degistirebilirsinizCOLS :Tablonun stun sayisini buradan degistirebilirsinizW :Tablonun genisligini yzde veya piksel olarak buradan degistirebilirsinizH :Tablonun yksekligini yzde veya piksel olarak buradan degistirebilirsiniz.CELLPAD :Hcre ieriginin ereveye olan uzakligini piksel cinsinden ayarlayabilirsinizCELLSPACE :Hcrelerin birbirine olan uzakligini piksel cinsinden ayarlayabilirsinizALIGN :Tabloyu saga, sola yaslayabilir veya ortalayabilirsiniz

BORDER :Tablo erevesinin kalinligini piksel cinsinden ayarlayabilirsinizLIGHT BRDR :Tablo erevesinin birinci rengiDARK BRDR :Tablo erevesinin ikinci rengiBG (stteki) :Tablonun arka planina bir resim dsemek istiyorsaniz buradan seebilirsiniz.BG (alttaki) :Tablonun genel arka plan rengini buradan belirleyebilirsinizBRDR :Eger tablo erevesi kullaniyorsaniz tablonun ereve rengini buradan

belirleyebilirsinizTablonun genel ayarlarini bu diyalog kutusundaki bu seenekleri kullanarak yapabilirsiniz. Ancak,

eger hcreleri tek tek biimlendirmek (formatlamak) istediginizde baska seenekleriniz de var9.12.1.Hcre Biimlendirme

Bir tablo ierisindeki hcreleri tek tek seerek veya bir grup hcreyi fare ile seerek degisik biimleruygulayabilirsiniz. Hcre ayarlari diyalog kutusunu ekrana getirmek iin ayarlamak istediginiz hcreleri fareninsol dgmesine basili tutup srkleyerek sein. Asagidaki rnek ekran grntsnde tablonun sag alt tarafindaki

hcre seili duruma getirilmis olarak grnyor. Dikkat ederseniz, seili duruma getirilen hcrelerin erevesikoyu renkle isaretlenmis durumda. Byle bir seim yaptiginizda asagidaki diyalog kutusunun seeneklerinin dedegistigini ve ekranda hcrelere zel ayarlarin grntlendigini fark edeceksiniz. Simdi bu yeni ayarlara bir gzatalim. Diyalog kutusunun st tarafindaki ayarlarin bir nemi yok, onlar klasik metin biimlendirme seenekleri.

HORZ :Hcre ieriginin hcre iinde yatay olarak yerlesimiVERT :Hcre ieriginin hcre iinde dikey olarak yerlesimiNO WRAP :Hcre ieriginin genisligi hcre genisliginden uzunsa bir alt satira inilecek mi?HEADER :Hcreler baslik hcreleri mi?Bir tablo ierisindeki hcrelerin ierdigi metinler birbirinden degisik uzunlukta olabilirler. Eger

herhangi zel bir ayar yapilmamissa bu ierik dikey olarak ortalanarak, yatay olarak da sola yaslanarakgrntlenir. Ancak siz istiyorsaniz bu yerlesim seenegini degistirebilirsiniz. Bu yerlesim ayarlari hcrezellikleri diyalog kutusunun HORZ ve VERT seenekleri kullanilarak yapilmaktadir. Asagidaki resimdekitabloda bu ayarlarin degisik kullanim rneklerini ieren bir tablo gryorsunuz.


20/41

404

Resim.9. 42

Asagidaki, grdgnz gibi 3x4 boyutlarinda, birbirine ok benzeyen hcrelerden olusuyor. Simdiartik blme - birlestirme islemlerine baslayabiliriz. rnegin, tablonun en st satirini tek bir satir haline getirerekbir baslik sekline dnstrmek istedigimizi varsayalim. Bu durumda yapacagimiz islem su olacak: nce fareimlecini kullanarak st taraftaki hcreyi seili duruma getirecegiz. Daha sonra hcre zellikleri diyalogkutusuna bakin. Eger diyalog kutusu ierisindeki alt blm grlmyorsa diyalog kutusunun sag alt tarafindaki

gen simgesine tiklayarak tamamini grnr hale getirin. Bu islemi yaptiktan sonra asagidaki rnek resimde degrldg gibi zellikler diyalog kutusunun sag alt tarafindaki hcre birlestirme dgmesine basin.


21/41

405

Resim.9. 43

Resim.9. 44

Ayni islemi bir hcreyi birka paraya ayirmak istediginizde de yapabilirsiniz. Simdi tabloya tekrarbakalim. Bu tabloda sol alt taraftaki hcreyi ikiye ayirmak istedigimizi varsayalim. Bunun iin yine hcrezellikleri diyalog kutusuna bas vuracagiz. Ancak nce bu hcreyi fare ile tiklayarak seili duruma getirmemizgerekiyor. Hcreyi seili duruma getirdikten sonra blmek iin hcre zellikleri diyalog kutusunun sol alttarafindaki hcre blme dgmesine basin.


22/41

406

Resim.9. 45

Bu dgmeye bastiginizda ekranda yeni bir diyalog kutusu belirecektir. Bu diyalog kutusu ierisindehcreleri nasil blmek istediginiz size sorulacaktir. Hcreleri dikey veya yatay olarak blebilirsiniz. Yatayblmek ve hcreyi satirlara ayirmak iin ROWS seenegini, dikey blmek yani hcreyi stunlara ayirmak iinCOLUMNS seenegini kullanmaniz gerekecektir.

Bu seeneklerden uygun olani belirledikten sonra OK dgmesine basin ve diyalog kutusunu kapatin.Yapmis oldugunuz ayarlamaya gre hcre gerekli sekilde blnecektir. Bu blnme islemi gereklestirildiktensonra yeni olusacak olan hcrelerin boyutunu fare yardimi ile ayarlayabilirsiniz.

Resim.9. 46

9.13.Web Sayfasinda FramelerBir sayfada ayni anda birden fazla sayfanin kullanimi olayidir. rnegin sol tarafta hep sabit kalan bir navigator

bar sag tarafta ise mendeki butonlari tikladika degisen bir sayfa, frame kullanimi bu ve buna benzer sekillerdeolabilir. Frame kullanmaktaki en byk avantaj sayfanin mensnn veya sabit kisminin bir kez yklenerekdefalarca yklenmesini ve buna bagli olarak sayfanin ailisini yavaslatmasini engellemektir.


23/41

407

Resim.9. 47Resim.9. 48

Frame eklemek iin: INSERT/Frame mens altindaki frame seeneklerinden birini kullanabilirsiniz.Isterseniz Object ara penceresinden Framei seip, istediginiz bir modeli sayfaniza tiklayabilirsiniz. Frame'iniziekledikten sonra frame ile ilgili ayarlari yapmaya baslayabiliriz. Ilk nce frame'inizin genisligini ayarlamaliyiz.Onun ardindan WINDOW/Frames penceresi aktif durumda degil ise aktif duruma getirerek sayfamizdakiframelerin genel bir grnmn alabiliriz.

Resim.9. 49

Bu pencere sayesinde setigimiz frame ile ilgili ayarlari Property Inspector zerinden degistirebiliriz.Eger frame'inizde kaydirma ubugu ikmasini istemiyorsaniz Scrooling kismina 'No' olarak birakmalisiniz.

Gelelim framelerin kaydedilmesine; her frame ayri birer HTML sayfasidir, bu yzden her biri ayriayri kaydedilmelidir. Ilk nce bu framelerin bir arada durmasini saglayan dis sayfayi kaydetmelisiniz. nceWINDOW/Frames penceresi aktif durumda degil ise aktif duruma getirerek sayfamizdaki framelerin genel birgrnmn saglayiniz. Sonra bu pencereden en distaki pencereyi seili duruma getirin. Sonra FILE...mensnden Save Frameset komutunu tiklayin. Dosyanizi site tanimlamasi ncesi olusturdugunuz klasrniine kaydedin. Daha sonra Frames penceresinden diger Frameleri seip, FILE... mensnden SaveAllFrameskomutu ile diger sayfalari da kaydedin. (Resim.9.51) Dosyalarinizi kaydederken, kayit trn Html Documentsolmasina dikkat edin.


24/41

408

Resim.9. 50

Resim.9. 51

Resim.9. 52

Eger daha nceden hazirlamis oldugunuz bir sayfayi setiginiz bir Frame gmmek istiyorsanizFILE... Mensnden Open in Frame komutunu kullanabilirsiniz.

Framelerden birisi zerinde bir link varsa ve bu linke tiklandiginda hangi framelerin degisiphangisinin sabit kalacagi ayari Property Inspectorzerinden yapilabilir. Burada link eklediginiz text yada resimdosyasini setikten sonra Property Inspector zerindeki link kutucugunun yanindaki Target seeneginiihtiyaciniza gre degistirmelisiniz.

Resim.9. 53

_Blank : Tiklanan sayfayi hi bozmadan yeni bir pencere aarak linki o pencere iinde aar._Parent : Linki kendi zerinde aar_Self :Varsayilan ayarlardaki framei aar._Top :En distaki framein degismesini saglayarak tm framelerin yerini alan tek bir sayfa ailmasini saglar.


25/41

409

_MainFrame:Ana Framein degismesini saglar. (Eger sol taraftaki men zerindeki bir linke tiklandiginda sagtaraftaki ana sayfanin degismesini istiyorsaniz bunu kullanacaksiniz)_LeftFrame, _RrightFrame, topFrame ... eklediginiz framelere gre istediginiz frame'in degismesinisaglayabilirsiniz.

Bir Web sayfasinda kullanilan her erevenin digerlerinden farkli bir adi vardir. ereve ierigineisaret etmek iin bu isim kullanilacagi iin her erevenin adini akilda kalici bir sekilde belirleyebilirsiniz. Adini

degistirmek istediginiz erevenin zerine tikladiginizda zellikler diyalog kutusunun sol alt tarafinda FRAMENAME adinda bir blm greceksiniz. Buradan erevenin ismini belirleyebilirsiniz. Her erevenin ilk bastaismi bellidir. Ancak siz bunlari degistirip, st, sol, sag gibi isimler verebilirsiniz. Burada da dikkatinizi ekeyim,ereve ismi olarak bosluk ve Trke karakterler kullanmayin. erevelerin ismini degistirdiginizde temsiliereve penceresindeki erevelerin iinde de bu isimleri greceksiniz.Bu arada, erevelerin ierisine alinan Web sayfalari ile erevelerin boyutlarinin ayni olmasi mmkn degilelbette. Bu tr bir durum sz konusu oldugunda, Web sayfasinin ierigi ereve sinirinin disina tastiginda sayfaierigini grmek iin erevelerin yaninda kaydirma ubuklari ikmak zorundadir. Bazi durumlarda buerevelerin ikmasini istemeyebilirsiniz, veya sadece gerekli oldugunda grntlenmesini tercih edebilirsiniz.Bu ayari yapmak iin temsili ereve penceresinden ayarini yapmak istediginiz ereveyi seerek, zelliklerdiyalog kutusu ierisinden de SCROLL seenegini kullanacaksiniz. Buradaki seenekler syle:NO :Web sayfasi tassa bile erevede kaydirma ubuklari grntlenmeyecekYES :Web sayfasi tassa da tasmasa da kaydirma ubuklari grntlenecek

AUTO :Normalde kaydirma ubuklari grntlenmeyecek, Web sayfasi tasarsa grntlenecek

Resim.9. 54

Web sayfanizda nasil bir tasarim kullandiginiza bagli olarak bu ara ubuklarini grntleme veya

grntlememe seenegini kullanabilirsiniz. Bu arada, erevelerin boyutlarinin internet kullanicisi tarafindandegistirilmesini isteyip istemediginize bagli olarak da bazi kisitlamalar koyabilirsiniz. Bunun iin ilgili ereveyiseili duruma getirin, zellikler ara ubugundan NORESIZE seenegini kullanin. Eger bu seenegi aktif halegetirirseniz internet kullanicisi erevelerin boyutlarini degistiremez, eger aik birakirsaniz isteyen ereveyiistedigi gibi degistirebilir.

Bir ereveyi kaldirmak istediginizde btn yapacaginiz ereve sinirini fare ile srkleyip Webtasarim penceresinin sol veya st taraflarina dayamaniz yeterlidir. ereve aninda silinecektir. Bunun disindaerevenin boyutlarini sayfayi dzenlerken fare imleci ile srkleyip birakarak istediginiz gibi degistirebilirsiniz.9.14.Web Sayfasinda Tasarim Kolayliklari9.14.1.Sablon Olusturma

Bir Web sitesindeki sayfalarin temel tasarim zelliklerinin birbirine benzemesi geerlidir. Bylece Websitesini gezen bir internet kullanicisi ziyareti esnasinda srekli olarak ayni Web sitesi ierisinde dolasmakta

oldugunun bilincinde olur, bir sayfadan digerine getiginde tasarima yabanci olmadigi iin aradigi bilgiyi


26/41

410

kolayca bulabilir, ierisinde birbirinden farkli tasarimlar kullanilmis onlarca Web sayfasindan olusan Websiteleri ziyaretileri tarafindan ok fazla basarili bulunmamaktadir.

Bu arada, bazi sayfalarda ok tekrar ettiginiz kodlar da olacaktir elbette. rnegin en bastakiblmlerde bahsettigimiz Trke karakter setini aktif hale getirmek iin kullanilan takisi ayarlarini,Web sitenizde olusturdugunuz btn sayfalarda kullanmaniz sarttir. Web sitenizdeki btn sayfalarda ayni arkaplan rengini veya desenini kullanacaksiniz diyelim. Bu durumda olusturdugunuz btn sayfalarda, tek tek

zellikler diyalog kutusunu aip arka pln resmini belirlemek sikinti yaratacaktir.Dreamvveaver, standart bir Web sayfasi hazirlamaniza ve bu sayfayi Web sitenize sablon olarak kaydetmenizeimkan veriyor. Bylece, ok standart sayfalardan olusan bir Web sayfasinda bos sayfalari bu sablondan yolaikarak hazirlayip pek ok zahmetten kurtulmus oluyorsunuz.

rnek bir sablon hazirlayalim.

Sablonumuzu bu bos alanda adim adim olusturacagiz. nceFILE mensnden Save As Template komutunu alistirin.Bu komutu alistirdiginizda ekrana o anda Web siteniz iintanimlanmis olan sablonlarin grntlendigi bir diyalogkutusu grntlenecektir. Su anda herhangi sablon olmadigiiin bu diyalog kutusu ierisindeki liste bostur. Diyalog

kutusu ierisinde SAVE AS blmne gelin vesablonunuzun ismini belirleyin. Asagidaki rnek resimdesablon ismi olarak "tasarim" kullanilmistir.

Resim.9. 56

Her zaman oldugu gibi sablon isimlerinde de Trke karakter ve bosluk kullanmiyoruz. Sablonumuzukaydettikten sonra FILE mensnden Close komutunu alistirin ve Web tasarim penceresini kapatin. Hizlierisim ubugundan SITE dgmesine basin ve site haritasini ekrana getirin, site haritasi ierisinde TEMPLATES adinda yeni bir klasrn yaratildigini greceksiniz. Bu klasr atiginizda da sablon dosyanizin burayakaydedilmis oldugunu greceksiniz

Soyadi DWT olan sablon dosyalarini istediginiz gibi degistirebilirsiniz. Bunun iin zerine ifttiklamaniz yeterli olacaktir. Dosyanin zerine ift tikladiginizda sablon dosyasi Web tasarim editrnnierisinde ailacaktir. Simdi gerekli degisiklikleri yapmaya baslayabiliriz.

zerinde alisacak oldugunuz sablon dosyasini Web tasarim editr ile atiktan sonra standart sayfatasariminizi bu sayfaya ekleyebilirsiniz. rnegin, sayfa zelliklerinden sayfanin arka pln rengini ve basliginibelirleyebilirsiniz. Bir sablonun ierisinde bu sablonu temel alarak retilecek olan sayfalarda hangi alanlarindegistirilebilecegine, hangilerinin sabit kalacagina karar verebilirsiniz. Normalde, bir Macromedia

Resim.9. 55


27/41

411

Dreamvveaver sablonunun ierisinde hi bir alan degistirilebilir durumda degildir. Ancak istediginiz yerlere de-gistirilebilecek alanlar ekleyebilirsiniz. rnegin tm sayfalarin st tarafinda sabit bir logo grntlenmesini,gerekli linklerin bulunmasini saglayabilirsiniz. Sayfanizin diger kisimlarinda ise yazilar, tablolar, resimler veyazilar degisebilir.

Simdi bu rnek tabloyu inceleyelim. 500 piksel genisliginde olan bu tablonun st sag ve sol tarafinda birresim, ve sayfanin basligi yer aliyor. Tablonun alt satirina ise siyah bir bant seklinde degismeyecek olan M.E.B.

yazisi yazilmis.Bu sayfada, sadece arada " Burasi degisecek olan blm" ibaresi ile belirlenmis olan alanindegistirilebilmesine izin vermek istiyoruz. Bu sablonu temel alan bir Web sayfasi hazirlanirken sadece bu hcre-nin ierisine bir seyler yazilabilecek, sayfanin diger geleri ise sabit kalacak. Simdi siz de buna benzer bir sablonolusturun ve imleci degistirilmesini istediginiz alana getirin. Imleci getirdikten sonra MODIFY mensndenTEMPLATES * NEW EDITABLE REGION...komutunu alistirin. Bylece Dreamvveaver'a ierigidegistirilebilir yeni bir alan tanimlamakta oldugumuzu bildiriyoruz. Bu komutu alistirdiginizda ekrandaasagidaki gibi bir diyalog kutusu greceksiniz. New Editable Region basligini tasiyan bu diyalog kutusuierisinde NAME blmne bu alani tanimlayacak bir bilgi girin .

Resim.9. 57

"Burasi degisecek olan blm alanina Degisek blm" gibi bir isim verebilirsiniz, ismi belirleyip OKdgmesine basinca diyalog kutusu kapatilacak ve ayarlamis oldugunuz alan ierisinde mesajiniz kivrikparantezler arasinda grntlenecektir. rnek iin asagidaki resme bakabilirsiniz.

Resim.9. 58

Bu blm belirledikten sonra buraya girilecek olan metinlerin fontunu, rengini ve boyutunu ayarlayin. Buradastandart metin formatlama seeneklerini zellikler diyalog kutusunu kullanarak uygulayabilirsiniz. Gerekliayarlari yaptiktan sonra FILE mensn-den CLOSE komutunu alistirin. Ekrana gelecek olan ve size "dosyayi


28/41

412

kaydetmek istiyor musunuz?" sorusunu soran diyalog kutusuna EVET cevabini verin.9.14.2.Sablon Kullanarak Sayfa Olusturma

Artik standart sablonunuz kullanima hazirdir. Simdi bu sablonu temel alan bir web sayfasi hazirlayalim. ncesite haritasi grntsn ain (hizli ara ubugundan SITE dgmesine basarak), aga yapisinda yeni sayfayiolusturmak istediginiz klasr seili duruma getirin. Ekrandaki site haritasi penceresinin FILE mensnden

New From Template komutunu alistirin. Bu komutu alis tirdiginizda ekrana bir diyalog kutusu gelecek ve budiyalog kutusu ierisinde Dreamweaver ierisinde tanimli olan sablonlarin bir listesi grntlenecektir. Buradayaratmis oldugunuz sablonun adini seili duruma getirin ve Select dgmesine basin.

Resim.9. 59

Resim.9. 60

Bu dgmeye bastiginizda Dreamweaver Web tasarim penceresinin ierisinde sablonunuzu temel almis bos birWeb sayfasi ailacaktir. Bu Web sayfasi ierisinde degistirilmesine izin verilmeyen alanlar sari renk ileisaretlenmistir. Degistirme imkni verilmis olan alanlar ise kivrik parantezler arasinda belirtilmistir.


29/41

413

Resim.9. 61

Artik sayfanizda degisecek olan blmde eklemelerinizi yaparak yeni dosyanizi kaydedebilirsiniz.Zaman zaman sablonlari temel alarak rettiginiz Web sayfalarindan bazilarim sablonun koymus oldugu belli

kurallari bozarak degisik bir sekilde dzenlemek istersiniz. Bu tr esneklikler degisik trde sayfalarkullanildiginda ise yarayacaktir. Sablona baglanmis olan bir Web sayfasinin bagli oldugu sablonla ilgili btnbaglarini kesmek ve onu istediginiz gibi dzenlenebilir hale getirmek iin belgenin zerine ift tiklayinDreamweaver Web editr ile ain.

Resim.9. 62

Belge aildiginda MODIFY mensnden TEMPLATES * Detach From Template komutunu alistirin.Bundan byle bu belge zerinde istediginiz degisiklikleri yapabilecek, sayfanin grnmn istediginiz gibidegistirebileceksiniz.9.14.3.Ktphane ile alismak

Dreamweaver web sayfalarini standartlastirmak isteyen web tasarimcilarina sablonlara ek olarak bir dektphaneler kullanma seenegi veriyor. Ktphaneleri aiklamak iin basite su rnegi verebiliriz. Btn web

sayfalarinizda kullanmakta oldugunuz bir resim var diyelim. Sayfalarda sablon kullanmak istemiyor ancak buresmi degisecegini tahmin ediyorsaniz, bu durumda bu geleri bir ktphane haline dnstrp websayfalariniza ekleyebilirsiniz. Bu durumda, ileride degisiklik yapmak istediginizde, sadece ktphanedeki ta-nimini degistirmeniz yeterli olacaktir. Yaptiginiz degisiklik bu ktphaneyi kullanan btn Web sayfalarinaotomatik olarak uygulanacak. Bylece sayfalari tek tek aip degisiklik yapmak zorunda olmayacaksiniz.

Ktphaneler bir bakima sablonlara benzer, ancak daha esnek web tasarimlari sz konusu oldugundakullanilir. Sablonlar bir sayfanin genel grnsne mdahale etmek istediginiz zamanlarda olduka kullanislidir.Ancak degisik tasarimli sayfalarda ortak alanlar kullanmaniz sz konusu oldugunda, bu alanlari ktphanelerdenekerek kendinize daha verimli bir alisma ortami hazirlayabilirsiniz.

Bir ktphaneden bir elemani bir Dreamweaver belgesine eklediginizde Dreamweaver HTML kodun-da degisiklik yaparak bu elemanin grntlendigi yere zel kodlar ekler. Bu kodlar ierisinde orijinalktphaneye bir referans yer alir. Bylece, ktphane elemanini degistirdiginizde Dreamweaver dosyalari tekerteker aip referanslarini kontrol ederek dosyalari yeni tasarima gre gncelleyebilir.

Eger bir Web sitesinde ktphaneler kullaniliyorsa, Dreamweaver web sitesinin klasrnn ierisindeLIBRARY adinda bir klasr olusturur ve ktphane tanimlarini ieren sayfalari bu klasrn ierisine kaydeder.


30/41

414

Her ktphane elemanini ayri ayri tanimlayabilir, adini degistirebilir veya zerine ift tiklayarak dzen-leyebilirsiniz.

Bir web sayfasi ierisindeki tasarim paralarindan resim, metin, tablo vs... herhangi birini birktphane elemani haline dnstrebilir ve diger Web sayfalarinizda kullanabilirsiniz. Ktphane elemaniolarak kullanmak istediginiz nesneyi bos bir Dreamweaver web dzenleme penceresinde yazin, izin ve seiliduruma getirin.

Bu nesne artik ktphane elemani olmaya hazirdir. Bunun iin MODIFY mensnden LIBRARY* Add Object To Library komutunu alistirin. Bu komutu alistirdiginizda ekranin saginda Dreamweaver'mktphane penceresi ailacak ve semis oldugunuz alan bir ktphane elemani olarak bu pencereye eklenecektir.Asagidaki rnek resimde bir resim ve metin ieren bir tablonun tamami ktphane elemani olaraktanimlanmistir.

Resim.9. 63

Resim.9. 64

Bu yntemi kullanarak degisik ierikleri olan ve degisik amalara hizmet eden istediginiz kadar farkliktphane elemani tanimlayabilirsiniz. Unutmamaniz gereken bir nokta var. Ktphane elemanlarinin isimleriniseerken dikkatli olmak ve kafanizi karistirmamak iin isimleri akilda kalici ve ieriginin ne oldugunu gstericiisimleri tercih etmemiz gerekir.


31/41

415

Herhangi bir ktphane elemanindan memnun degilseniz, veya artik isinize yaramiyorsa, hemensilebilirsiniz. Silme islemini gereklestirmek iin ktphane penceresini ain, ilgili ktphane elemanini seiliduruma getirin ve pencerenin sag alt tarafindaki zerinde p tenekesi simgesi olan dgmeye basin. Ekranagelecek olan ve silme islemini onaylamanizi isteyen diyalog kutusuna EVET cevabini verdiginizde ktphaneelemani tarihin karanlik raflarinakaldirilacaktir.

Simdi sitenizin ierisindeki herhangi bir web sayfasinin zerine ift tiklayin ve dzenleme

penceresinde ain. Amacimiz bu sayfanin ierisine ktphaneden tasarlamis oldugumuz parayi alip koymakolacak. Bunun iin Web sayfasi aildiktan sonra WINDOW mensnden LIBRARYkomutunu alistirin vektphane penceresini ekrana getirin. Ktphane penceresinden sayfa ierisinde kullanmak istediginizktphane elemanini bulun, fare imleci ile srkleyin ve sayfanin ierisinde kullanmak istediginiz alana birakin.Ktphane elemaninin ierigi sayfanin ierisine yapistirilacak ve farkli bir arka pln ile gsterilecektir.

Resim.9. 65

9.14.4.Ktphane Elemanlarini Degistirmek

Web sayfalarinda kullanmis oldugunuz ktphane elemanlarini degistirmeniz gerekebilir. rneginktphane elemani olarak setigimiz bir tablonun ierisindeki metne ekleme yapmak isteyebiliriz. Dreamweaverile bu degisiklikleri sadece ktphane elemaninin zerinde gereklestirip diger btn Web sayfalarinda otomatikolarak gerekli gncellemelerin yapilmasini saglayabiliriz.

Bunun iin nce SITE dgmesine basip site haritasini ekrana getirmek gerekiyor. Site haritasi ekranagelince, degistirmek istedigimiz ktphane elemanini bulacak ve zerine ift tiklayacagiz. Ktphane elemanibos bir web dzenleme penceresinin ierisinde ailacaktir. Bu pencere ierisinde istediginiz degisiklikleriyapabilirsiniz.

Bu degisiklikleri gereklestirdikten sonra FILE mensnden CLOSE komutunu alistiripdzenlemeyi bitirebilirsiniz. Bu komutu alistirdiginizda ekrana gelecek ve size "dosyayi kaydetmek istiyor

musunuz?" sorusunu soracak olan diyalog kutusuna EVET cevabini verin. Dosyadaki gncellemelerkaydedilecektir. Kayit islemi bittikten sonra ekrana bir diyalog kutusu gelecek ve bu diyalog kutusu ierisinde buktphane elemanini kullanan Web sayfalarinin bir lis tesi grlecektir. Bu listedeki Web sayfalarini seiliduruma getirin ve UPDATE dgmesine basin. Btn gncellemeler yapilacaktir.

9.15.Men Olusturmak

Dreamweaver ile bu tr link'ler ieren bir aktif men olusturmak iin nce meny ierecek olan websayfasini web sayfasi dzenleme penceresi ierisinde ain. Web sayfasini atiktan sonra ierisinde menyyerlestireceginiz alani hazirlayin.

Drt elemani olan bu mende iki adet sitenin ierisine, iki adet de sitenin disarisina link bulunuyor.Simdi sirada bu link'lere gitmemizi saglayacak olan meny olusturmak var. ilk is olarak INSERT mensnden

FORM OBJECT * JUMP MENUkomutunu alistirin. Bu komutu alistirdiginizda ekranda asagidaki gibi birdiyalog kutusu ile karsilasacaksiniz.Bu diyalog kutusu ierisindeki seenekleri kullanarak men elemanlarini adim adim


32/41

416

tanimlayabilirsiniz. Birinci eleman TEXT blmnde "unnamedl" olarak karsimizda duruyor. Bu blme gelinve ilk elemanin adini yazin, bizim rnekte "Anakart" yaziyoruz. Buraya yazdiginiz metin mennn ierisindegrlecektir. Simdi, mende bu eleman seildiginde gidilecek olan Web sayfasini belirlemek iin hemen alttakiWHEN SELECTED GOTO URL isimli metin kutusuna gelin. Burada, eger Web sitesinin ierisindeki birsayfaya link vermek istiyorsaniz BROWSE dgmesine basip ekrana gelecek olan diyalog kutusunu kullanarakgitmek istediginiz web sayfasini belirleyebi1irsiniz.

Bu ayari yaptiktan sonra diyalog kutusunun sol st tarafinda, zerinde + isareti olan dgmeye basin.Men seeneklerinin arasina bos bir seenek daha eklenecektir. Yine bir nceki teknigi kullanarak bu menelemaninin da adim ve adresini belirleyebilirsiniz. Bu yntemi kullanarak men elemanlarini teker tekerbelirleyin. Yeni men elemani ekledike diger elemanlar diyalog kutusunun st tarafindaki listede isim -> adresseklinde listelenecektir.

Linkleri hazirladiktan sonra yukaridaki listenin sag st tarafindaki yukari ve asagi oklari kullanarakbir elemanin liste ierisindeki yerini degistirebilir, yanlis girdiginiz bir elemani sol st tarafta zerinde - isaretiolan dgmeye basarak silebilirsiniz.

Normalde, bir internet kullanicisi bu menden bir elemani setiginde link'in isaret ettigi Websayfasina otomatik olarak ynlendirilecektir. Ama mennn yaninda bir de GIT dgmesi grntlemekistiyorsaniz, bu diyalog kutusu ierisindeki INSERT GO BUTTON AFTER MENU seenegini aktif halegetirin. Bunu yapinca sag tarafinda zerinde GO yazan bir dgme grntlenecektir. Bu dgmenin zerindeyazan yaziyi da zerine tiklayip zellikler diyalog kutusu ierisinden degistirebilir "GIT", seklinde

koyabilirsiniz.

9.16. Sayfalarinda Etkilesimli Dgmeler

ncelikle dgme dedigimizde neyi ifade etmeye alistigimizi aiklayalim. Bir dgme aslinda iki adetresimden olusur, GIF veya JPEG formatinda olabilir. Bu iki resimden birincisi web sayfasi yklendigindeekranda grnr, ikincisi ise HTML kodunda gizli olarak bekler. Sayfayi ziyaret etmekte olan internet kullanicisifare imleci ile dgme olarak ayarlamis oldugunuz resmin zerine gelince bu resim silinir, yerine arka plandabeklemekte olan ikinci dgme resmi grntlenir. rnegin orijinal dgme resmi mavi ise, fare imleci zerinegetirildiginde ayni dgmenin kirmizi renkli bir versiyonu gsterilir. Bylece resmin bir orijinal hali olur, bir defare imleci zerine geldiginde gsterilen hali. Renk ve sekil degistirilen dgmeler ile kullanicilari etkileyen okhos tasarimli Web sayfalari hazirlamak mmkndr.

Elbette, dgmelerin tasarimi ve sekli tamamen sizin resim izme veya internetten resim seebilmeyeteneginize bagli. Bu arada, dgmeleri sadece link'ler olarak da dsnmelisiniz. rnegin iki fotografi bu sekildeayarlayarak fare imleci zerine geldiginde degisen fotograflar da elde edebilirsiniz.

Ise baslamadan nce dgme olarak kullanacaginiz resimleri hazirlamaniz gerekli.Resimleri hazirladiktan sonra simdi iinde dgme olusturmak istediginiz Web sayfasini ain. Resmin

(daha dogrusu dgmenin) grntlenmesini istediginiz yere imleci getirin, imleci getirdikten sonra dosyayikaydedin. Hemen arkasindan INSERT mensnden ROL-LOVER IMAGE komutunu alistirin. Bu komutualistirdiginizda ekranda asagidaki gibi bir diyalog kutusu ile karsilasacaksiniz.

Resim.9. 66Bu diyalog kutusu ierisinde Image Name blmnde dgmeye bir isim verin. Macromedia


33/41

417

Dreamweaver default olarak buraya bir isim verecektir. Isterseniz aynen birakabilir, isterseniz de degistire-bilirsiniz. Bundan sonra Original Image, ekrana gelecek olan diyalog kutusunu kullanarak Web sayfasiaildiginda ilk olarak grntlenecek olan resmi sein. Resmi setikten sonra SELECT dgmesine basin vetekrar bu diyalog kutusuna geri dnn. Resmin adresi metin kutusunun ierisine alinacaktir.

Simdi bir alt blme inin ve Rollover Image blmne gelip BROWSE dgmesine basin. Burada daresmin ikinci halini bulup SELECT dgmesine basin. Dgmenin ikinci halini, yani fare imleci zerine geldigi

sirada gsterilecek olan resim dosyasini da belirlemis oldunuz.Resimleri belirledikten sonra diyalog kutusunun bir alt blmndeki Preload Rollover Image seenegininaktif olmasina dikkat edin. Bu seenek aktifken Web sayfasi yklendiginde resmin ikinci hali de Web tarayicisitarafindan yklenir ve fare imleci zerine geldiginde bu resim aninda gsterilir. Aksi takdirde fare imleci zerinegeldiginde kullanici bu resmin yklenmesini beklemek zorunda kalacaktir.

Bu ayari da kontrol ettikten sonra diyalog kutusunun en altina gelin ve burada Go To Url blmndeBROWSE dgmesine basarak bu dgmeye tiklandiginda ekrana getirilecek olan Web sayfasini ayarlayin. Egerburadan baska bir Web sitesine link vereceksiniz. Bu link'in adresini bu metin kutusunun ierisine direkt olarakgirebilirsiniz. (Ancak;basina http:// eklemeyi unutmayin).

Ayarlarimiz tamam, artik Ok dgmesine basip bu diyalog kutusunu kapatabiliriz.Diyalog kutusu kapatildiginda ekranda dgmenin birinci halini greceksiniz. Dreamweaver penceresinde fareimlecinin degisimini izleyemezsiniz. Bunun iin CTRL + S tuslarina basin ve dosyayi kaydedin. Daha sonraF12 tusuna basarak Web sayfasini Web tarayiciniz ierisinde grntleyin. Dgmelerinizin alismakta oldugunu

greceksiniz.Dgmeleri ereveli sayfalarda kullanirken, link'leri ayarladiktan sonra Web sayfasinin ierisindezerine tiklayin ve zellikler penceresinin alt blmndeki TARGET seenegini kullanarak isaret edilen Websayfasinin hangi ereve ierisinde ailacagini belirlemeyi unutmayin.

9.17. Katmanlar (Layers)Ileri seviye web tasarimlari iin en fazla kullanilan seeneklerden biri olan katmanlar (layers) yeni

nesil web sayfalarinda birbirinden gzel tasarim imkanlari sagliyor. Katmanlar sayesinde hazirladiginiz websayfasindaki istediginiz elemani istediginiz konuma yerlestirebiliyorsunuz. Tablolarda bulunan sinirlamalarinkatmanlarda bulunamamasi, her katmanin ayri ayri biimlendirilebilmesi ve katmanlara DHTML efektleriniuygulama olanaginin olmasi pek ok tasarim gesini web sayfalarinda pek pratik bir sekilde uygulayabilmeimkani veriyor. Ilk bakista uygulanmasi biraz karisik grnen katmanlari web sayfalarinin zerinde istediginizgibi yerlestirebileceginiz kk kutucuklar olarak dsnebilirsiniz. Yerlesimini serbest olarak ayarlayabilecegi-niz bu kutucularin ierisinde metin, resim, animasyon gibi her seyi yerlestirebilibilrisiniz. Her kutucugu ayri bir

Web sayfasi olarak da yorumlamak mmkndr.Bir web sayfasinin ierisine koyabileceginiz her trl nesne bu Web sayfasinin ierisindeki bir

katmanin ierisine ne konabilir. Katmanlar sayesinde bir Web sayfasina koymak istediginiz, genin; pikselcinsinden yerini belirleyebilirsiniz. Bylece tasarim ayarlarinizi tam bir keskinlikle uygulama imkaniniz olur. Buarada katmanlari st ste de yerlestirebilir ve hangi katmanin stte, hangisinin altta oldugunu belirleyebilir, hattaistediginiz katmanlari grnmez hale bile getirebilirsiniz.

Katmanlar iki ayri standarTA gre islenirler. Bu standartlardan birincisinin adi "CSS layers", digerininadi ise "Netscape layers" olarak belirlenmistir. Web tasariminda bu iki standart da kabul grmekle beraberisleyisi farklidir. CSS Layer seenekleri kullanildiginda Web sayfasinin ierisindeki elemanlar stil sayfalaritanimlari ile ayarlanirlar. "Netscape layers" standardi kullanildiginda ise katmanlarin yerlesimi Netscape'inLAYER ve ILAYER takilari ile gsterilirler.

CSS standardinda hazirlanan sayfalar hem internet Explorer 4.0 hem de Netscape Navigator 4.0 ve buprogramlarin yukari srmleri tarafindan destekleniyor. Diger standart ise sadece Netscape Navigator tarafindan

destekleniyor.Sayfaya bir katman eklemek iin INSERT mensnden Layer komutunu alistirin. Her katmanin sol

st ksesinde kk bir kutucuk vardir. Adi geen bu kutucuga tikladiginizda katman seili duruma gelecek vekatman erevelerinde kk tutmalar grntlenecektir. katmanin boyutlarini bu tutmalari kullanarakdegistirebilirsiniz. Katmanin sayfa ierisindeki konumunu degistirmek iin de bu kk kutucuktan tutupsrklemeniz gereklidir. Siz katmanlari tutup srklerken ekranin alt tarafindaki zellikler diyalog kutusuierisinde katmanin web ekranindaki yerlesim ve boyut koordinatlari ekranda grnecektir.

Katmanlari ekranda dolastirmak iin sadece fareye mahkum degilsiniz. Zaten dzenli, sabit boyutluparalardan olusan web sayfalarinda bu tr ayarlar kesin pikseller hesabi ile yapilir. Bu zellikler penceresininierisindeki alanlari kullanarak katmanlari istediginiz yere tam olarak yerlestirebilir, genislik ve yksekliklerinitam olarak ayarlayabilirsiniz. Asagidaki rnek resmi inceleyelim.


34/41

418

Resim.9.67

Bu web sayfasinda bir adet katman bulunuyor. Bu katman ekranin solundan 160 piksel, stnden 36piksel uzakligindan basliyor. Genisligi 198, yksekligi is e 115 piksel. Bu sayilari resimde yuvarlak ierisineailmis olan blmden grebiliyor ve degistirebiliyoruz.

Bu blmde, katmanlarin grsel olarak degistirebilecegimiz zelliklerinden bahsedecegiz. ncelikle,bir Web sayfasinda birden fazla katman varsa, bunlardan hangisini nasil seeceginize bakalim. Katmanlarin

zerine tiklayarak seebiliriz, ancak bunun daha kolay bir yolu daha var. Bunun iin katmanli web sayfasi aikdurumdayken WINDOW menusunu ain ve LAYERS komutunu alistirin. Ekranda sag tarafta kk birpencere ierisinde o anda web sayfasinin ierisine izilmis olan katmanlarin isimlerini greceksiniz. Buradakiisimlerin zerine tiklayarak istediginiz katmani seili duruma getirebilirsiniz.

Resim.9. 68

Simdi her katmanin hangi zelliklerinin oldugunu ve zelliklerin nasil degistirilecegine bir gz atalim.Katmanlarin grsel zelliklerini sayfanin alt tarafindaki zellikler penceresinden gryor ve degistiriyoruz. Bupencereden yola ikarak, soldan saga degistirebilecegimiz seeneklere gz atacagiz.1. LAYER ID (katmanin adi): Bir Web sayfasinin ierisinde tanimlanmis olan her katmanin bir adi vardir.Katmanlara akilda ka lici isimler vererek alismalarinizi kolaylastirabilirsiniz.2. LEFT (soldan uzaklik): Bir katmanin iinde grldg Web tarayicisi penceresinin sol erevesinden pikselcinsinden uzakligi bu blmden ayarlanir.

3. TOP (stten uzaklik): Bir katmanin iinde grldg Web tarayicisi penceresinin st erevesinden pikselcinsinden uzakligi bu blmden ayarlanir.


35/41

419

4. WIDTH (genislik): Katmanin genisligi (piksel cinsinden).5. HEIGHT (ykseklik): Katmanin yksekligi (piksel cinsinden).6. Z-INDEX: Katmanin ncelik sirasi7. VISIBILITY: Katmanin grntlenme seenegi (HIDDEN seenegini aktif yaparsaniz katman ekrandagrntlenmez).8. BG IMAGE: Katmanin arka planina duvar kagidi olarak bir resim dsenmesini istiyorsaniz resmi buradan

belirleyebilirsiniz.9. BG COLOR: Katmanin arka plan rengini buraya tiklayarak seebilirsiniz.10 .TAG: Katmanin hangi dil standardina gre grntlenecegini belirler. DIV olarak birakabilirsiniz.11. OVERFLOW: Eger katmanin ierisindeki metin veya resimlerin boyutu katmanin disina ikarsa ne olacak?VISIBLE seenegini kullanirsaniz ierik grntlenir, SCROLL seenegini kullanirsaniz katmanin kenarlarindakaydirma ubuklari grntlenir. Eger HIDDEN seenegini kullanirsaniz katman sinirlarindan sonraki blmlerkirpilir.9.18. Sunucuya Dosya Gnderme

Bilgisayarinizin sabit diskinde hazirladiginiz web sayfalari ieren bir web sitesini, internet zerindendiger internet kullanicilari ile paylasmak tek amaciniz degil mi? Bunun iin internet zerinde herhangi birsekilde bir web alani elde ettikten sonra (cretli veya cretsiz, fark etmez) bilgisayarinizdaki dosyalari internetzerinden bu alana yollayip diger internet kullanicilarinin kullanimina aabilirsiniz.

Genelde bu tr "dosya gnderme" islemlerinde FTP protokol kullanilir. FTP, internet zerinden bir

bilgisayardan digerine dosya gndermek zere kullanilan bir protokoldr. Kendi bilgisayarinizdaki dosyalarikarsi taraftaki bilgisayara gnderebilmek iin bir FTP programi kullanabilirsiniz. Bu programlar arasindaCuteFTP en ok olarak kullanilanidir. Ancak Dreamweaver ile artik bu tr programlari kullanmaniza gerekkalmiyor. nk, Dreamweaver ierisinde FTP ile karsi tarafa dosya gndermek, dosyalari senkronize etmek vebunun gibi bir dizi transfer islemini gereklestirmek iin kullanilabilecek seenekler geliyor. Bu blmmzdebu konuya derinlemesine girecegiz.

Ister Dreamweaver olsun ister baska herhangi bir FTP programi olsun, size ayrilmis olan alanainternet zerinden Web sayfalarinizi gndermek iin elinizde ana genin bulunmasi gerekiyor.

1. Karsi taraftaki bilgisayarin FTP adresi2. Bu FTP alanina baglanmak iin gerekli olan kullanici adi3. Bu kullanici adi ile beraber kullanilacak olan sifre ister bedava ister parali olsun, bir web

sunucusundan alan aldiginizda, bu bilgi size mutlaka verilir. Eger kullanici adinizi ve sifrenizi biliyor da FTPadresini bilmiyorsaniz bunu da o web servisinin yardim veya destek blmlerine bakarak bulabilirsiniz. (Bkz.

cretsiz Web Alani Alma konusu)Bu bilgileri aldiktan sonra Web sitenizi Dreamweaver ile aynen karsi tarafa transfer edebilirsiniz. Bu

is iin sitenizin harita grnmn kullanacaksiniz. Birazdan anlatacagimiz rnekte cretsiz Web Alani Almakonusunu islerken www.geocities.com adresinden oldugum hesabi kullanacagim.9.18.1. Dosya Gnderme Ayarlarinizi Yapin

Dreamweaver uygulamasini alistirin ve SITE mensnden Open Site komutunu alistirip gndermekistediginiz Web sitesini aktif hale getirin. Eger Dreamweaver ile sadece tek bir site zerinde alisiyorsaniz bunuyapmaniza gerek yoktur nk gerekli site otomatik olarak ailacaktir. Sitenizi atiktan sonra hizli erisim araubugundan SITE dgmesine basin ve site haritasini ekrana getirin. Site haritasi ekrana geldiginde bu pen-cerenin SITE mensnden Define Sites komutunu alistirin.

Bu komutunu alistirdiginizda, ekranda bir diyalog kutusu grntlenecek ve Macromedia Dreamweaverierisinde tanimlamis oldugunuz Web sitelerinin bir listesini greceksiniz. Buradan, dosya gndermek ayarlariniyapmak istediginiz web sitesini sein ve EDIT dgmesine basin.


36/41

420

Resim.9. 69

Bu dgmeye bastiginizda ekranda Web sitesinin o anki ayarlarinin grntlendigi bir diyalog kutusugreceksiniz, bu diyalog kutusunun sol tarafindaki listeden Remote Info zerine tiklayin. Sol taraftaki alanindegistigini greceksiniz. Burada, Access kismini FTP olacak sekilde ayarlayin. Alt taraftaki ayarlari da asagidaki

bilgiler isiginda doldurun.FTP HOST Dosya gndermek iin kullanacaginiz FTP adresi.HOST DIRECTORY Baglanilacak olan FTP sunucusunda gidilecek olan klasr. Eger zel bir

klasrnz yoksa/olarak birakabilirsiniz.

Resim.9. 70

LOGIN FTP Sunucusuna baglanmak iin gerekli olan kullanici adi.PASSWORD Kullanici adi ile birlikte kullanilacak olan sifre.Dreamweaver'in sifreyi aklinda tutmasini ve her seferinde size sormamasini istiyorsaniz bu diyalog

kutusu ierisinde SAVE seenegini aktif hale getirin. Eger bir ofisten Internet'e baglaniyorsaniz bu durumdaUSE FIREWALL seenegini aktif hale getirmeniz gerekebilir. Bu durumda FIREWALL bilgilerini ofisinizinsistem yneticisinden almalisiniz. Ayrica, bazi FTP sunucularina baglanirken PASSIVE FTP adi verilen birtransfer modu kullanmaniz gerekebilir.

Bu bilgiler isiginda ayarlarinizi yaptiktan sonra OK dgmesine basin ve diyalog kutusunu kapatin.Artik bu diyalog kutusu ile isiniz kalmadi, nk dosya transfer ayarlarinizi yaptiniz. DONE dgmesine basin veekradaki diyalog kutusunu da kapatin. Bundan sonra sira dosyalan gndermeye geldi.9.18.2. Dosya Gnderme Islemi

Dreamweaver kullanarak bir FTP sitesine web sayfalarinizi gndermek iin ilk nce ayarlari dzgn


37/41

421

olarak yapmaniz gerekli. Ayarlarda bir sorun yoksa artik site haritasi penceresine geebiliriz. Burada en son stksedeki dgmeye basin ve karsi taraftaki FTP alaninin ierigini gsterme seenegini de aktif hale getirin.

Bu dgmeye bastiginizda site haritasinin sag blmnde Web sitenizin ierisindeki dosyalar veklasrler, sol taraftaki blmnde ise karsi taraftaki FTP sunucusunun ierigi grntlenecektir. Su anda soltaraf bostur, nk henz FTP sunucusu ile baglanti yapilmamistir. Site haritasi penceresindeki CONNECTdgmesine basin ve baglantinin saglanmasini bekleyin.

Resim.9. 71

Eger bir sorun ikmaz ve baglanti saglanirsa, baglanti saglandiktan sonra site haritasi penceresinin solblmnde baglanmis oldugunuz FTP sunucusunun ierigini greceksiniz.

Simdi Web sitemizi karsi tarafa rahatlikla ierisinde gnderebiliriz. Bunun iin SITE mensndenSYNCHRONIZE komutunu alis tirin. Bu komutu alistirdiginizda ekranda senkronizasyon islemi baslamadannce yapabileceginiz senkronizasyon ayarlarini gre bilirsiniz. Simdi bu seeneklere bakalim:

Resim.9. 72


38/41

422

Resim.9. 73

Entire Site Bilgisayarinizdaki btn Web sayfalarini, resimleri ve klasrleri karsi tarafa gnderir. Eger karsitarafta daha eski dosyalar varsa bu dosyalar yenileri ile degistirilir.Selected Remote Files Karsi taraftaki FTP alaninda sadece belli dosyalan seili duruma getirip bu seenegikullanarak sadece bu dosyalarinin sizin bilgisayarinizdaki en yeni halleri ile degistirilmesini saglayabilirsinizPut Newer Files To Remote Sizin bilgisayarinizda daha gncel dosyalar varsa, bunlar FTP sitesine gnderilirGet Newer Files From Remote Eger FTP sunucusunda daha yeni dosyalar varsa, bu dosyalar sizinbilgisayariniza transfer edilir.Get And Put Newer Files Yukaridaki iki islem birden yapilir, dosyalarin hangi tarafta oldugu nemsenmez.

Dreamweaver senkronizasyon islemi esnasinda dosyalarin son gncellenme tarih ve saatlerini gznne alarak bir karsilastirma yapar. Bu yzden bir Web sitesini bir kere FTP yolu ile gnderip yayina atiktansonra, zerinde degisiklikler yapip tekrar senkronize etmek istediginizde bir ton dosya bos yere gnderil-mez,sadece degistirilmis olan dosyalar gnderilir.

Eger karsi taraftaki FTP sitesinde sizin Web klasrnde olmayan dosya veya klasrler varsa budosyalarin otomatik olarak silinmesi iin bu diyalog kutusu ierisinde Delete Remote Files Not On Local Driveseenegini aktif hale getirin.

Resim.9. 74

Yukaridaki bilgiler isiginda senkronizasyon ayarlarinizi yaptiktan sonra OK dgmesine basin vediyalog kutusunu kapatin. Simdi bir sre beklemeniz gerekli. Gerekli FTP islemleri yapilmaya baslanacaktir.Ekrana gelecek olan diyalog kutusu ierisinde transfer islemi baslayacak ve gnderilen dosyalar adim adimgrntlenecektir. Bu arada, eger herhangi bir hata olursa (rnegin iinde Trke karakter olan bir dosyayitransfer etmeye alisiyorsaniz) ilgili hata ekranda grntlenecek ve diger dosyalar transfer edilmeye devamedilecektir.


39/41

423

Resim.9. 75

Islem devam ederken dosyalarin ne kadarinin gittigini ne kadarinin kaldigini diyalog kutusunun sagalt tarafindaki ubuk grafiginde izleyebilirsiniz. Islem bittiginde ekranda asagidaki gibi bir diyalog kutusugrnecektir. Bu diyalog kutusunun st tarafinda SYNCHORIZATION COMPLETE yazacaktir. Sol alttarafta da ka dosyanin gittigini, ka tanesinin hata verdigini izleyebilirsiniz.

Resim.9. 76

cretsiz Web Alani Alma

ncelikle web sayfalarimizi yayinlayabilecegimiz bir Web Servera ihtiyacimiz var. Bu hizmetiinternet zerinde, parali ve parasiz olarak veren birok web sitesi mevcut. Simdi kendimize www.geocities.comadresinden, sayfalarimizi yayinlayabilecegimiz bir alan hesabi alalim.

tiklayin

Kullanici adiniz. Bu alanlara Trkekarakter girmeyiniz. Noktalama isaretlerive bosluktan kaininiz.


40/41

424

Yukaridaki formda girdiginiz kullanici adi (Yahoo ID), daha nceden bir baskasi tarafindan alinmisise, web arayznde size uyari mesaji ikacaktir. Ayni sekilde formda eksik ve hatali girdiginiz bilgiler var ise

sizden dzeltmeniz istenecektir.

Kendinize bir sifre belirleyiniz.

Yukari kutuda girmis oldugunuz sifreninaynisini bu kutuya tekrar giriniz.

Sifrenizi unuttugunuz zaman sizesorulmasini istediginiz soruyu seiniz.

Sorunuzuncevabini yaziniz.

Dogum tarihiniz, ay, gn, yilE-mail adresinizi bu kutuya giriyorsunuz.

Buradan Other(digeri)seebilirsiniz

Posta Kodunu Giriniz.

Cinsiyetiniz, Male(Erkek),Female(Bayan).

Mesleginiz.alisma Alaniniz Ok ile belirtilen yaziyi,buraya giriniz.

Burayi tiklayiniz


41/41

Karsiniza gelen bu ekran size bu isi basardiginizi sylemektedir. Geriye hazirlamis oldugunuz websayfalarini bu adrese gnderme (upload) islemi kaliyor.

Ilgilendiginiz alanveya alanlariisaretlediktensonra burayitiklayiniz.