You are on page 1of 122

ADOBE DREAMWEAVER CS4

Kullanc El Kitab

ADOBE DREAMWEAVER CS4


Kullanc El Kitab

NDEKLER
Dreamweaver Temelleri erik Eklemek Stil Sayfalar Oluturmak Balarla almak Resimlerle almak Tablolarla almak oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri Formlarla almak ablonlar Siteyi Ynetmek 1 19 27 43 51 65 81 95 109 113

BLM

Dreamweaver Temelleri
Dreamweaver Temelleri Balang Sayfas Siteyi Gelitirmek zere Hazrlk Yapmak Yerel Bir Site Tanmlamak Yeni Bir Sayfa Oluturmak ve Kayt Etmek Dosya Adlandrma Standartlar Aralar ve Arayz Paneller Sayfaya Balk Atamak

Blm 1 Dreamweaver Temelleri

Dreamweaver Temelleri
Dreamweaver CS4, Web sitelerinin oluturulmasn, ynetilmesini, bakmnn ve devamlln salanmasn mmkn klmak iin gl grsel tasarm aralaryla metin tabanl HTML dzenleme zelliklerini bir araya getirmitir. Yazlm, acemi kullanclarn Web sayfalar oluturmak iin gereken aralara kolayca ulamasn salarken, elle kod yazmaya alkn deneyimli kullanclara da gerektiinde dorudan kodla alma imkn salar. Bu esnek program, gelimi teknikleri eriilebilir ve kolay kullanlr hale getirir. Gl tasarm, kod ve etkileim zelliklerinin bir arada sunulmas hem acemiler, hem de deneyimli kullanclar iin saysz fayda salar. Adobe Dreamweaver CS4, pek ok Web gelitiricisinin tercih ettii bir aratr. Bir yandan kolayca eriilebilir ve standartlara uygun siteler hazrlama ihtiyalarna karlk verirken, dier yandan da mevcut ve gelimekte olan pek ok teknolojik zmle alma imkn salayan bir ortamda hem grsel tasarm, hem de kod dzenleme aralar sunar. Dreamweaver, retim srecini hzlandrr ve site ynetimi ve sitenin devamlln salamak iin gereken aralar sunar. Web gelitirme yazlmlar sektrnde lider olan Dreamweaver, Web siteleri oluturma ve bunlarn devamlln salama, ayrca srekli deien standartlar, yeni teknolojiler ve kullanc ihtiyalarn karlama konularndaki zorluklar amanza yardmc olmak iin ihtiya duyduunuz aralar salar

Balang Sayfas
Dreamweaver CS4 atktan sonra bir balang sayfas greceksiniz. Bu sayfada u aralar bulunmaktadr: En son alan belgelere ait hzl balantlar Farkl dosya tiplerinde yeni belgeler oluturmak iin kullanabileceiniz seenekler

Blm 1 Dreamweaver Temelleri

Dreamweaver ile ilgili sihirbaz ve bilgiler Kaynaklar Dreamweaver Exchange Balants

Yeni bir sayfa oluturma ilemine baladnzda veya Balang Sayfasndaki dier seenekleri setiinizde Balang Sayfas kendiliinden kapanr.

Siteyi Gelitirmek zere Hazrlk Yapmak


Bir Web sitesi oluturmak iin gereken ayrntl aratrma ve planlama aamalarna zaman ayrmak ok nemlidir. Gelitirme iin bir strateji oluturmak daha verimli olmanza, fikirlerinizi daha iyi ve daha ayrntl bir ekilde gelitirmenize ve projenizin kapsamn daha iyi anlamanza yardm edecek, ayrca zaman ve kaynaklar daha verimli kullanmanz salayacaktr. yi bir Web sitesi sezgisel olmal ve kullanclara olumlu ve benzersiz bir deneyim sunmaldr. Etkin bir Web sitesi hazrlarken ie ilgili siteyi oluturma nedenini tanmlama ve zetleme, rekabet analizi, ak grafii ya da taslak hazrlama, site zelliklerinin nasl alacan yazl olarak tanmlama ve sitenin grntsn ve insanlarda oluturaca hissi tasarlama gibi ilemlerle balarsnz. Bu sre eitli ekillerde blmlere ayrlabilir. Bir Web sitesi hazrlamann temel bileenleri bu kitapta be gelitirme aamasnda gerekletirilen admlar olarak anlatlmtr. Gerekten etkin bir site (ister kendi sitenizi hazrlarken, ister bir mteri iin ya da bir ekiple birlikte alrken) hazrlamak iin bu bileenlerin hepsini kullanmak gerekir.

Blm 1 Dreamweaver Temelleri

1. Aama: Aratrma
Herhangi bir sayfa zerinde almaya balamadan nce kendinize ya da mterinize sitenizin hangi amalara hizmet edecei ve ne gibi ierikler barndrmas gerektirdii ile ilgili sorular sorun.

2. Aama: Planlama ve Yaplandrma


Web sitenizle ziyaretileriniz arasndaki balant, ksmen sitenizin yapsna baldr. Aklk ve kullanm kolayl iyi bir Web sitesi iin hayati zelliklerdir. Gelitirme srecinin bu nemli aamas, bu kitapta greceiniz ilk konudur. Web sitelerinin temelini site yaps oluturur. yi yaplandrlmam bir Web sitesinde dolamak ve byle bir siteyi kullanmak kafa kartrc ve zor olabilir, ayrca byle bir sitenin devamlln salamak da pek kolay olmayabilir. Anlalr, iletiim sorunu olmayan ve ziyaretilerinin kolayca kullanabilecei bir site oluturmak iin, herhangi bir HTML belgesi oluturmadan nce sitenin yapsnn nasl olacan ve sitede kullanlacak dosya ve klasrlerin hiyerarisini eksiksiz olarak planlamanz gerekir.

3. Aama: GelitirmeSitenin Tasarlanmas


Bir Web sitesi tasarlarken almaya, genel tasarm gsteren kk resimler oluturarak balayabilirsiniz (bu, fikirlerinizi kt zerinde grmek iin kullanabileceiniz hzl bir beyin frtnas yntemidir). Bu sre boyunca, 1. Aamada sorulan sorularn cevaplarn ve yaptnz aratrmann sonularn gz nnde bulundurmaya devam etmeniz gerekir. Tasarmnz gelitirirken uygulamanz gereken ikinci adm, balangtaki fikirlerinizin en iyilerini ayklayarak ok daha ayrntl taslaklar oluturmaktr. Son olarak, seilen tasarma gre oluturulan sayfalarn nasl grneceini gsteren eksiksiz rnek(ler) oluturulabilir. Bu tasarm srecinde iin sahibi ile srekli olarak grmeniz gerekir. Ayrca, dncelerinizin teknik olarak Web sitesinde de aynen gerekletirileceinden emin olmak iin yapacanz grsel tasarm bileenlerini test etme ileminin de bu aamada gerekletirilmesi gerekir. Etkin bir Web tasarmnn temelini, sitenin tmyle ilevsel teknik zelliklerine aktarlabilen grsel kavramlar oluturur. Bir Web sitesinde gerekletirebileceiniz eylerle ilgili bilginiz ne kadar fazlaysa, sitede kullanacanz elerin etkin bir ekilde tasarm iin o kadar donanmlsnz demektir. Bu kitapta, olutururken Dreamweaverdan yardm alabileceiniz birok teknik Web zelliini reneceksiniz. Sitenin grnts ve insanlarda oluturduu his, grnm ve sitede kullanlacak stiller ve renklerle ilgili zel ayrntlar ieren stil klavuzu da genellikle bu aamada oluturulur. Bir Web sitesi oluturulurken, gelitirme aamalarnn byk lde i ie getii pek ok durumla (aamalarn her birinde sk sk tekrarlanan almalar) karlalr.

Blm 1 Dreamweaver Temelleri

4. Aama: Test
Web sitesini tasarlama ilemini bitirdikten sonra, ziyaretilerin kullanmna sunmadan nce onu test etmek de ok nemlidir. En basit Web sitelerinin bile mantkl bir ekilde test edilmesi gerekir. rnein Web sitenizi, popler Web tarayclarnn hepsiyle test etmeniz gerekmektedir. Her ne kadar Windowsta kullanlan Microsoft Internet Explorer gnmzde en ok kullanlan tarayc olsa da, Mozilla Firefox, Opera ve Safarinin pazardaki paylar da azmsanmayacak ldedir. Internet Explorer gibi bir taraycnn bile, brakn Windows ve Macintosh srmleri arasndaki farklar, 5, 5.5 ve 6 srmleri arasnda ciddi farklar vardr. Farkl tarayclarn sayfalarnz grntleme ekillerindeki farklar dnda, her sayfay ve her balanty da test ettiinizden emin olmalsnz.

5. Aama: Devamlln Salanmas


Birok Web sitesi gelitiricisi, bir Web sitesi gelitirmenin asla sona ermeyen bir ilem olduunu dnr. Yeni sayfalar eklemek, balantlar gncellemek, ierikte deiiklik yapmak ve resimleri deitirmek, bir Web sitesinin devamlln salamak iin uygulanan standart ilemlerdir. Dreamweaver CS4, ktphane eleri, ablonlar ve dier aralar yardmyla Web sitelerinin devamlln salama ilemini kolaylatrmak iin birok zellik sunar.

Site Klasr Yaps Nasl Olmaldr?


Siteniz iinde dosyalarnz ile alrken dzenli bir alma ortam iin, site klasrnz iinde aadaki klasrleri oluturmalsnz. images: Bu klasr sizin sitenizin iinde resimlerinizi barndracanz klasrdr. css: Css klasr sitenizin iinde stil dosyalarnz saklayacanz klasrdr. varliklar: Sitenizin iinde ham dosyalarnz saklayacanz (ileride kolay bulmanz iin) klasrdr. Bu klasrn iine fla, psd gibi sitenizi iinde direk olarak kullanlmayan, fakat ktlarnn kullanld ham dosyalar yerletirebilirsiniz. Klasrlerinizi adlandrrken Trke karakter kullanmamaya zen gstermelisiniz. Varliklar klasr ismi bu nedenle varlklar eklinde kullanlmamtr. Benim Sitem images css varliklar

Blm 1 Dreamweaver Temelleri

Yerel Bir Site Tanmlamak


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. Hedef klasr, yerel kk klasr (local root folder) olarak bilinir ve sabit diskinizde yer alacak olan yerel sitenin snrlarn belirler ve uzak sitenin adeta bir temsili gibidir. Uzak site, ziyaretilerinizin eriecei Web sunucusunda bulunacak olan asl sitedir. Yerel bir site tanmlamak size yerel ve uzak srmler arasnda ayn klasr hiyerarisini koruma imkn salar. Bu da ilevsel bir site yaratmak ve bunun srekliliini salamak iin ok nemlidir. inde sitenin dosyalar ve klasrlerinin yapsyla ilgili ayarlar bulunan yerel kk klasryle birlikte bir yerel site oluturduunuzda, siteye ait dosyalarn yerel kk klasrnn dnda bir yerde saklanmas nlenmi olur. Sabit diskinizde yer alan ama yerel kk klasrnzn dnda bulunan dosyalar uzak sunucuya aktarlamaz. Bu kstlama, siz sitenizi gelitirirken site evrimii olarak eriilebilir hale getirildiinde kullanlamaz durumda olan dosyalara erimenizi engeller. Sitedeki farkl bir konuma tanm olan bir dosyaya ait btn referanslarn gncellenmesi gibi pek ok Dreamweaver zellii gerek anlamda alabilmek iin yerel bir site tanmna ihtiya duyar. Elemanlar daima yerel siteler iinde oluturma ve yine ayn yerde alma alkanln edinmeniz gerekir. Bu alkanl kazanmazsanz balantlar, yollar ve dosya ynetimi konularnda sorun yaayabilirsiniz. Bilgisayarnzda siteniz iin bir klasr oluturun. Bu klasr iin en uygun yer srcnzn kknde bir klasr oluturmaktr (r: C:\WebSitem) 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. Dreamweaver iinde site oluturmak iin aadakileri yapn:

Blm 1 Dreamweaver Temelleri

Dreamweaver balang sayfasndan Dreamweaver Sitesi men nesnesini sein

veya Site > Yeni Site men nesnesini sein.

Blm 1 Dreamweaver Temelleri

Temel ve Gelimi adndaki iki sekmesiyle birlikte Site Tanm iletiim kutusu alacaktr. Bu sekmeleri kullanarak bir site tanmlama ilemini nasl gerekletirmek istediinizi seebilirsiniz.

Temel, iletiim kutusunu atnzda varsaylan olarak grnen moddur ve ilem boyunca size adm adm yardmc olur. Gelimi modu, yaplandrmada kullanabileceiniz bir dizi ilave seenek ve ayar sunar. Temel modundaki aklayc metinler burada grntlenmez.

Blm 1 Dreamweaver Temelleri

Bu uygulamada henz seili durumda deilse Temel sekmesine tklayn. Dreamweaver, Site Tanm iletiim kutusunun Temel sekmesinde Sitenizi nasl adlandrmak istersiniz? ifadesiyle sitenizin adnn ne olacan soracaktr. Site ad kutusuna Dreamweaver yazn ve leri dmesine tklayn. Anlalr ve mantkl isimler her bir siteyi dierlerinden kolayca ayrmanz salar ve birden fazla siteyle alrken bunlarn ynetimini kolaylatrr. Yerel kk klasrnde olduu gibi site ismi sadece sizin Dreamweavern tanmlanm siteler listesinde referans olarak kullanacanz bir aratr ve sitenizin kullanclar tarafndan grlmez. Dreamweaver, ColdFusion, ASP.NET, ASP, JSP, yada PHP gibi bir sunucu teknolojisi ile almak ister misiniz? ifadesiyle ColdFusion, ASP.NET, ASP, JSP ya da PHP gibi bir sunucu teknolojisiyle alp almayacanz soracaktr. Hayr, sunucu teknolojisi kullanmak istemiyorum seeneine ait radyo dmesine tklayarak bir sunucu teknolojisi kullanmak istemediinizi belirtin. leri dmesine tklayarak bir sonraki blme gein.

Makinemdeki yerel kopyalar dzenle sonra hazr olduunda sunucuya ykle (nerilen) seeneine tklayn. u anda makinenizdeki dosyalarla alacaksnz ve bir uzak sunucuya erimeniz gerekmiyor. Byle durumlarda bilgisayarnzda bulunan dosyalar dzenlersiniz.

Blm 1 Dreamweaver Temelleri

leri dmesine tklayarak bir sonraki blme gein. Uzak sunucunuza nasl balanacanz soran Uzak sunucunuza nasl balanyorsunuz? sorusunun altndaki Yok seeneini iaretleyin. u anda yerel bir site zerinde alyorsunuz ve bir uzak sunucuya erimeniz gerekmiyor.

10

Blm 1 Dreamweaver Temelleri

leri dmesine tklayarak bir sonraki blme gein. Yeni tanmladnz site bilgilerini gzden geirin ve iletiim kutusunun alt ksmndaki Bitti dmesine tklayn.

Dosyalar panelinde kendi dosyalarnz grebilirsiniz

Blm 1 Dreamweaver Temelleri

11

Yeni Bir Sayfa Oluturmak ve Kayt Etmek


Yerel sitenizi tanmladktan sonra Web sayfalarnz oluturmaya ve bunlarla almaya hazrsnz demektir. Yeni bir sayfa oluturduunuzda ilk yapmanz gereken ey belgenizi kaydetmek olmaldr. Yeni dosya oluturmak iin aadakileri yapn:

Dosya > Yeni komutunu sein. Yeni Belge iletiim kutusu alacaktr.

Alan pencereden HTML seeneini sein ve Olutur butonuna tklayarak HTML dokman oluturun.

12

Blm 1 Dreamweaver Temelleri

Dosya > Kaydet seeneini seerek oluturduunuz dokman kayt edin. Sayfanz kaydetmek iin sayfann zerine metin ya da resim yerletirmeyi beklemeyin. Yeni belgeleri aar amaz sayfalarnz kaydedin. Dosyanz zamannda kaydettiyseniz, resim ya da baka medya elemanlar aktardnzda bu elemanlarn sitenizdeki konumlarn gsteren btn yollar dzgn olarak oluturulacaktr.

Eer belgenizi kaydetmezseniz, eklediiniz elemann konumunu sabit diskinize gre tanmlayan ve file:// eklinde balayan bir yol kullanlacaktr. Belgeyi kaydetmeden bir nesne eklemeye kalktnzda Dreamweaver bu eleman iin file:// eklinde bir yol kullanmas gerektiini belirterek sizi uyaracaktr. Bu file:// yollar uzak sunucularda almaz, nk dosyalarn bilgisayarnza zg konumlarn tanmlarlar.

Dosya Adlandrma Standartlar


Bir Web sunucusunda kullanlacak dosyalar adlandrma ileminin, sabit diskinizdeki dosyalar adlandrmaya gre biraz farkl olduunu unutmayn. Sunucuda hangi iletim sisteminin kullanldn bilmeniz iinizi kolaylatracaktr. Bunun iin en ok kullanlan sistemler Unix, Linux, Windows NT ve Mac OStur. Windowstaki adlandrma yaps, dier *NIX tabanl iletim sistemlerinden farkldr. rnein Unix BYK/kk harflere duyarldr. Yani dosyam.html ile DOSYAM.HTML ayn deildir. Dosyalarnzn isimlerini sadece kk harflerle yazarak dosya adlandrma ilemini basitletirmi ve tutarllk salam olursunuz. Dosyalarnz adlandrrken sadece alfabedeki harfleri (A-Z) ve rakamlar (0-9) kullanmalsnz. Aada hem dosya, hem de klasrlerin isimlerinde uymak gereken dier nemli adlandrma standartlar verilmitir.

Blm 1 Dreamweaver Temelleri

13

Boluklar: Dosya isimlerinde asla boluk kullanmayn. Szckleri ayrmanz gerekiyorsa, boluun ilevini grmesi iin alt izgi veya tire karakterini kullann. Boluk karakteri kullandnzda sorun kabilir, nk tarayclar boluk karakterlerini %20 karakterleriyle deitirirler. zel karakterler: ?, %, *, > ya da / gibi zel karakterleri kullanmayn. Virgl kullanmayn. Saylar: Dosya isimlerinin en banda say kullanmaktan kann. Uzunluk: Klasr ve dosya isimlerinin olabildiince ksa olmasna gayret edin. Klasr isminin sayfaya erimek iin yazdnz URLin bir paras haline geldiini unutmayn.

Aralar ve Arayz
Web sayfas oluturma iinde daha fazla ilerlemeden nce Dreamweaver CS4 arabiriminde yer alan ve verimli bir ekilde Web siteleri oluturmanz salayan eitli aralar ve panelleri tanmanz 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. Siz almaya devam ederken belge penceresi sayfanzn bir Web sayfasnda nasl grnecei hakknda yaklak olarak size bir fikir verir. Burada yaklak olarak bir fikir edinirsiniz, nk tarayclarn Web sayfalarn yorumlama ekilleri arasnda baz farklar vardr.

14

Blm 1 Dreamweaver Temelleri

Dosya ismi balk ubuunda belirecektir (Windowsta dosya ad, belge penceresinin st ksmnda bir sekmede gsterilir). Varsaylan durumda bu sayfa balangta Belge ara ubuundaki Balk metin alannda gsterildii gibi Balksz-1 olarak adlandrlr. Grnm > Ara ubuklar komutu kullanlarak grnr ya da gizli hale getirilebilen Belge ara ubuunda eitli ilemlere kolayca eriebilmenizi salayan baz dmeler ve menler bulunur. Varsaylan durumda ara ubuu belge penceresinin bir parasdr. Windows kullanclar belge penceresinden ayrmak iin ara ubuunun sol kenarndaki tama noktasna (tutama) ift tklayabilir veya bunu srkleyebilirler. Bylece o da ayr bir panel halinde gelir. Dreamweaverda tane grnm modu mevcuttur: Tasarm, Kod ve Bl.

Bl modunda hem Tasarm grnm, hem de Kod grnm yer alr. Bu modlara ait dmeler Belge ara ubuunun sol tarafnda yer almaktadr. mleci bu dmelerin zerine getirip bir sre tutarak grnm modlarnn isimlerini grebilirsiniz. Burada Tasarm grnm modunu kullanmanz gerekiyor. Etkin dme vurgulu hale gelerek Dreamweavern sayfay o grnm modunda grntlediini gsterir. Belge penceresinin sol alt kesinde Etiket Seici dmesi bulunur. Etiket Seici daima <body> etiketinden balar ve hiyerarik olarak, o anda seili durumdaki elemana uygulanan HTML etiketlerini grntler. Etiket Seici, bu elemanlara karlk gelen HTML etiketlerinin araclyla kod hiyerarisinde hzl bir ekilde hareket ederek hangi elemanlarla altnz grmenizi ve dier elemanlar kolayca semenizi salar.

Blm 1 Dreamweaver Temelleri

15

Ekle ara ubuu; resimler, tablolar, zel karakterler, formlar ve HTML gibi sayfanza ekleyebileceiniz pek ok nesne ya da eleman ierir. Bunlar tiplerine gre yedi gruba ayrlmtr: Ortak, Mizanpaj, Formlar, Data, Spry, Metin, Sk Kullanlanlar. Etkin grubun ismi mende grntlenir. Varsaylan durumda Ortak grubu etkindir. Meny kullanarak farkl bir nesne grubuna geebilirsiniz. Bu gruplardaki farkl nesnelerin ounun ilve aralar, seenekler ve ilikili dier nesnelerle birlikte kendi zel mens vardr ve bunlara kk siyah bir okla eriilir.

16

Blm 1 Dreamweaver Temelleri

Sayfanzn altnda, kullandnz nesneler ve metinlerle ilgili zellikleri deitirebileceiniz zellikler panelini grebilirsiniz.

Paneller
Dreamweaverdaki panellerin byk bir ksm kenetlenmi bir halde, ilevlerine gre sekmeli pencereler eklinde panel gruplarnda yer alr. Varsaylan panel gruplar CSS, Uygulama, Etiket Denetimi ve Dosyalardr. Panellere bu gruplardan ya da Pencere mensnden eriebilirsiniz. Panel gruplar, en ok kullandnz panellere kolayca erimenizi ya da bunlar gizlemenizi mmkn klar. Kenetleme ilemi, ekran alann maksimum bykle getirmenizi ve ayn zamanda ihtiyacnz olan panellere abucak erimenizi salar. Her panel grubu, etkin paneli ve iindeki dier panellerin sekmelerini grntleyecek ekilde geniletilebilir ya da sadece grubun ad grnecek ekilde kltlebilir.

Blm 1 Dreamweaver Temelleri

17

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 Sk Kullanlanlar (Favorites) listelerinde isim olarak grnr. Balk blmnde Balksz Belge olarak grnr. Bu bal sayfanz uygun bir balkla deitirin. Bu deiiklii yaptktan sonra dosyay kaydedin.

BLM

erik Eklemek
Metin Eklemek Satr Aras Eklemek Blnmez Boluk Eklemek Metni Hizalamak ve Madde mleri zel Karakterler Eklemek Sayfay nizleme ile Taraycda Grntlemek

Blm 2 erik Eklemek

19

eriin hiyerarisini ve yapsn gelitirmek, bir Web sitesi oluturma srecinde bir sonraki admdr. Yapy oluturarak ve aty kurarak sitenin temel bileeni olan ierii hazrlam olursunuz.

Metin Eklemek
Sayfaya metin eklemek iin birka farkl yntem bulunmaktadr. Metni oluturduunuz bo sayfa iine yazmak. Baka bir metin dzenliyicisinden kopyalayarak yaptrmak. TXT gibi dz metinleri Dreamweaver iinde amak

Herhangi bir metni Dreamweaver sayfasna eklediinizde ya da yazdnzda zellikler denetisi ile zelliklerini deitirebilirsiniz.

Metin iin zellikler denetisi iki blm ayrlmtr: HTML ve CSS

20

Blm 2 erik Eklemek

HTML alannda metnin HTML zelliklerini dzenleyebilirsiniz. Metninizin grsel zelliklerini dzenlemek iin CSS seeneini semelisiniz. Dreamweaver CS4 srmnden itibaren tm metin dzenlemeleri iin CSS tekniini kullanmaktadr.

Satr Aras Eklemek


Yazlarnz yazarken bir alt satra inmek istediinizde CTRL + Enter ksayolunu kullanarak bir line break ekleyebilirsiniz. Sadece Enter tuuna basarak yeni bir paragraf oluturabilirsiniz.

Blnmez Boluk Eklemek


HTML dokmanlarnda ardarda bir tane boluk verilebilir. Ardarda birden fazla boluk vermek iin CTRL + SHIFT + BOLUK tuuna basmalsnz. Eer bu ksayol yerine her seferinde boluk tuuna bastnzda birden fazla boluk vermek isterseniz Dzen > Tercihler seeneini sein. Genel sekmesinde Birden ok ardk bolua izin ver seeneini sein ve Tamam butonuna basarak pencereyi kapatn.

Blm 2 erik Eklemek

21

Metni Hizalamak ve Madde mleri


Paragraflar hizalamak metin hizalama butonlarn zellikler denetisinde CSS sekmesi altnda kullanabilirsiniz.

Metinlerinizden madde imi oluturmak iin yine zellikler paneli HTML sekmesinde bulunan madde imi butonlarn kullanabilirsiniz.

HTML dokmanlarnda her bir paragraf bir madde imi olarak kabul edilmektedir. Eer madde imi iinde bir alt satra inmek isterseniz CTRL + ENTER tularna basmalsnz. Oluturduunuz madde imlerinin (numaral ya da numarasz) grnm deitirmek iin listenin iindeyken Format > Liste > zellikler seeneini sein.

22

Blm 2 erik Eklemek

zel Karakterler Eklemek


zel karakterler eklemek iin Ekle panelinde Metin seeneini sein.

Blm 2 erik Eklemek

23

En alttaki alr menden dilediiniz zel karakterleri sayfanza ekleyebilirsiniz.

24

Blm 2 erik Eklemek

Sayfay nizleme ile Taraycda Grntlemek


Dreamweaver iinde alrken oluturduunuz sayfalar taraycda nizleyerek iindeki hatalar grmek ya da yapm olduunuz sayfann neye benzediine bakmak isteyebilirsiniz. Bu durumda yapmanz gereken klavyenizden F12 tuuna basarak yapm olduunuz sayfann taraycda almasn salamak olacaktr. F12 tuuna bastnzda sayfa varsaylan taraycda alacaktr. Eer varsaylan taraycy deitirmek yada alternatif bir taraycy nizleme seeneklerine eklemek istiyorsanz Dreamweaver mensnden Dosya > Taraycda nizleme > Tarayc Listesini Dzenle... semelisiniz.

Alan iletiim kutusundan istediiniz ikincil taraycy ekleyebilir yada var olan birincil tarayc ile ilgili deiiklikler yapabilirsiniz.

Blm 2 erik Eklemek

25

BLM

Stil Sayfalar Oluturmak


Sayfa Arkaplan Rengini Deitirmek Sayfa Karakterini Deitirmek Dhili Stiller Dahili Stilleri Harici Stillere Dntrmek Mevcut Bir Harici Stil Sayfasn Balamak Harici Stiller Oluturmak Dreamweavern CSS Dzenleme zellii Eklediiniz Stilleri Kullanmak Bir Etiket in Stil Oluturmak

Blm 3 Stil Sayfalar Oluturmak

27

ascading Style Sheets (CSS) olarak adlandrlan stil sayfalar, metinler ve resimler gibi eitli elemanlarn Web sayfalarnzda nasl grneceini tanmlamanz salar. Cascading (basamakl) terimi, stillerin srasn ve ncelik dzeyini tanmlar. Stil (style), tek bir isimle tanmlanan bir dizi biimlendirme niteliidir. Bu da Web taraycsna bir eleman nasl grntlemesi gerektiini bildirir. HTML belgelerindeki stiller, biimlendirme, grnm ve yerleim dzeni zerinde geni bir kontrol imkn salar. Stillerden faydalanmann avantajn yle zetleyebiliriz: Bir stilin niteliklerinden birinde bir deiiklik yaptnzda, bu stil tarafndan kontrol edilen btn elemanlar otomatik olarak gncellenir (stili nasl oluturduunuza bal olarak tek bir belgede ya da btn site genelinde). Font, byklk ve renk gibi standart niteliklerden sadece CSS ile eriilebilen gelimi metin niteliklerine (satr aralklar [leading] gibi) kadar pek ok ayarda deiiklik yapabilirsiniz. Stil sayfalarn kullanarak rnein 1,25 cmlik kenar boluuna sahip bir paragraf oluturabilir, satrlarnn arasn 20 punto yapabilir ve metinde kullanlan fontun puntosunu 12 olarak ayarlayabilirsiniz. Byle bir eyi CSS olmadan yapamazsnz. Web tarayclarnn 4.0 ya da daha yeni srmleri CSS desteine sahiptir. Internet Explorer 3.0 baz stil niteliklerini tansa da eski Web tarayclar CSSi grmezden gelir. En iyi sonucu, srm 5.0 ve daha st versiyonu olan Web tarayclar verir. Bunlar pek ok zellii destekler. Tek bir sayfay biimlendirmek iin belgede saklanan bir dahili stili kullanabilirsiniz. eitli belgeleri birden fazla sayfada (ayn metin biimlendirme zelliklerini koruyacak ekilde) bir btn olarak kontrol etmek isterseniz bir harici stil sayfasndan da faydalanabilirsiniz. eitli belgelerin grnmn, ayn metin biimlendirme zelliklerini birden fazla sayfada koruyacak ekilde bir btn olarak kontrol etmek isterseniz bir harici stil sayfasndan da faydalanabilirsiniz. Bu stil sayfas Web sayfasnn dnda bulunur ve geerli sayfaya balanr. Byle durumlarda metinlerin ve sayfa yerleim dzeninin btn site iinde tutarl olmasn salamak en iyisidir. nk bu eler sayfadan sayfaya ciddi lde deiiklik gsterirse, ziyaretileriniz baka bir siteye getiklerini dnebilir. Stil sayfalarn kullanmann dier bir avantaj da, Web sayfalarnn ieriini biimlendirmeden ayr tutabilmeyi salamasdr. Sonu olarak bu, ieriinizin grnm zerinde daha hassas bir kontrol imkn salar ve Web sitenize ierik eklemek daha hzl ve daha az karmak bir ilem halini alr. erii bu ekilde izole etmek, sitenin gncellenmesi ve devamllnn salanmasn ok daha basit bir hale getirir. Web sayfalarnzn biimlendirme zelliklerini stil sayfalaryla kontrol ederek farkl platformlar ve Web tarayclar arasnda daha uyumlu sayfalar oluturabilirsiniz.

Sayfa Arkaplan Rengini Deitirmek


Sayfa arkaplan rengini deitirmek iin sayfa zellikleri penceresini amalsnz. Sayfa zelliklerini amak iin Dreamweaver mensnden Deitir > Sayfa zellikleri seeneini sein.

28

Blm 3 Stil Sayfalar Oluturmak

Sayfa zelliklerini iki ekilde ayarlayabilirsiniz: CSS ve HTML

Blm 3 Stil Sayfalar Oluturmak

29

Alan iletiim penceresinde grnm alt mens iindeki arkaplan rengi alanndan kendi sayfanza zg bir renk seebilirsiniz. Burada semi olduunuz renk sayfanz iinde bir CSS olarak Dreamweaver tarafndan tanmlanacaktr.

Sayfa Karakterini Deitirmek


Sayfanzn iinde btn metinlerinizin ayn fontta olmasn istiyorsanz yine sayfa zellikleri penceresi iinde Sayfa Fontu seeneini dilediiniz bir fontu yanstacak ekilde dzenleyebilirsiniz. Sayfa fontunu belirlemek iin Sayfa zellikleri penceresini an. Sayfa zelliklerini amak iin Dreamweaver mensnden Deitir > Sayfa zellikleri seeneini sein.

30

Blm 3 Stil Sayfalar Oluturmak

Alan pencerede Grnm (CSS) seeneini seerek sayfanz iindeki metinlerin stil grnmlerini dzenleyebilirsiniz.

Bu seiminiz de sayfa iinde bir CSS olarak gzkecektir. Sayfanzn kod grnmne getiinizde yapm olduunuz seimlere gre aadaki gibi gzktn greceksiniz (Sizin seimleriniz farkl olabileceinden aadaki kodun aynsn gremeyebilirsiniz). <style> body { background-color: #003333; } body,td,th { font-family: Arial, Helvetica, sans-serif; }

</style> Yine ayn sayfa zellikleri penceresi iinde sayfanza ait font rengini de belirleyebilirsiniz.

Blm 3 Stil Sayfalar Oluturmak

31

Dhili Stiller
Dahili stiller sadece geerli belgede tanmlanan, kullanlan stillerdir. Sitenizdeki tek bir sayfa iin bir stil tanmlar oluturacaksanz dahili stilleri kullanabilirsiniz. Eer tanmladnz stilin siteniz iinde birden fazla sayfada kullanlmasn istiyorsanz, harici bir stil sayfas oluturmanz ve bu stil sayfasn ayn grnme sahip olmasn istediiniz her belgeye balamanz gerekir. Mmkn olan her yerde harici stil sayfalar kullanmanz tavsiye edilir. Harici stiller dier belgelerdeki stilleri kullanabilmenizi salad iin ok kullanldr. Ayrca, harici stiller iin kullanlan biimlendirme kodu ortak bir harici belgede sakland iin bu stil sayfasn kullanan Web sayfalar biimlendirme bilgilerini tekrar tekrar yklemek zorunda kalmaz. Bu da daha az kod kullanlmasn salar ve bylece sayfalar daha hzl yklenir. Bunlara ek olarak, hepsi ayn yerde bulunduu iin stillerin gncellenmesi de daha kolay olur.

Dahili stil oluturmak iin CSS panelinden yararlanacaz. Bu panel iinde hem dahili hem de harici stilleri bir arada grebilirsiniz. Bu panel ak deilse amak iin Pencere > CSS Stilleri seeneini sein.

32

Blm 3 Stil Sayfalar Oluturmak

CSS Styles panelinde, sayfa zelliklerini tanmladnzda oluturulan stillerin bir listesi bulunur. CSS panelinin altndaki yeni CSS kural butonuna basn. Karnza yeni stil oluturma penceresi kacaktr.

Dremaweaver iinde kullanabileceiniz 4 eit stil vardr. Bunlar Snf, Kimlik, Etiket ve Bileiktir.

Blm 3 Stil Sayfalar Oluturmak

33

Snf: Bu seici tipi, belirli bir elemana bal olmayan snflar yaratmanz salar. Tek bir snf pek ok farkl elemana uygulayabilirsiniz. Snflar, balarna konan nokta iaretiyle gsterilirler. Kimlik: Bu seici tipi IDler oluturmanz salar ve nemli bir istisna dnda snflara benzerler: IDler belirli bir eleman benzersiz bir ekilde tanmlama yntemi olarak sayfa bana sadece tek bir kez kullanlabilirler. Benzersiz yaplarndan tr IDler genellikle script yazma amacyla kullanlr ve bir diyez iaretiyle (#) gsterilirler. Etiket: Bu seici tipi, stil tarafndan yeniden tanmlanacak olan bir eleman olarak bir HTML etiketinin grsel zelliklerini belirlemenizi salar. Etiketin varsaylan grnm stil tarafndan deitirilir. Bileik: Bu seici tipi, zel etiket birleimleri iin kullanlan stiller oluturmanz salar (balamsal seiciler). Bu seici tipi ayrca IDler oluturmanz salar ve nemli bir istisna dnda snflara benzerler: IDler belirli bir eleman benzersiz bir ekilde tanmlama yntemi olarak sayfa bana sadece tek bir kez kullanlabilirler. Benzersiz yaplarndan tr IDler genellikle script yazma amacyla kullanlr ve bir diyez iaretiyle (#) gsterilirler. Snf tr bir stil oluturmak iin aadakileri yapn: Sadece dahili bir stil oluturacaksanz o zaman alan pencere iinde Sadece bu belge seeneini semelisiniz. Ad alanna bu stile vermek istediiniz ismi yazmalsnz. Yazm olduunuz ismin bana bir . nokta koyarak ismi yazabilirsiniz. Nokta iaretini koymasanz da Dreamweaver bunu sizin iin koyacaktr.

34

Blm 3 Stil Sayfalar Oluturmak

Tamam butonuna bastktan sonra alan pencerede bu stil ile ilgili zellikleri dzenleyebilirsiniz.

Blm 3 Stil Sayfalar Oluturmak

35

Dahili Stilleri Harici Stillere Dntrmek


Stil sayfalar harici olarak saklanabilir ve bir ya da daha fazla belgeye balanabilir. Bir harici stil sayfas, sadece CSS spesifikasyonlar ieren bir dosyadr. Harici stil sayfalarn birden fazla Web sayfasnda kullanarak sayfalarn tutarl olmasn salayabilirsiniz. Dahili stiller ieren bir belgeniz varsa ve bu stilleri dier sayfalarda da kullanmak istiyorsanz, bunlar harici bir stil sayfasna kolayca aktarabilirsiniz.

Dahili stil sayfanz harici bir stil olarak kayt etmek iin setiiniz stil zerinde sa tkladktan sonra CSS Kuraln ta... komutunun semeli ve ve Yeni bir stil sayfas... seeneini iaretlemelisiniz.

Bu aamadan sonra Dreamweaver size yeni stil sayfanz kayt edeceiniz yeri soracaktr. Harici stil sayfalarnz tutacanz en uygun yer siteniz altndaki CSS klasrnn iindir. Bu nedenle siteniz iinde oluturduunuz CSS klasrn kullanabilirsiniz.

36

Blm 3 Stil Sayfalar Oluturmak

Mevcut Bir Harici Stil Sayfasn Balamak


Eer harici bir stil dosyanz varsa ve bunu siteniz iindeki dier sayfalarda da kullanmak istiyorsanz o zaman sayfalarnz bu stil sayfalarna balamalsnz. Harici var olan bir stil sayfanz bir sayfaya balamak iin o sayfay Dreamweaver iinde atktan sonra, CSS panelinin altnda bulunan Stil Sayfasn Ekle seeneini iaretlemelisiniz.

Bu seenei setiinizde karnza yeni bir iletiim kutusu alacak ve sizden harici stil sayfanzn yerini soracaktr. Bu alan pencerede stil sayfanz setiinizde artk iindeki css tanmlarn sayfanz iinde de kullanabilirsiniz. Harici stil sayfalar ile alrken unutmamanz gereken ey, bu stillerde bir deiiklik yaptnzda buna bal olan tm sayfalardaki bu stilin grnm de deiecektir.

Harici Stiller Oluturmak


Font, font bykl, rengi gibi eitli biimlendirme niteliklerini ayr ayr belgelerde kolayca deitirebilirsiniz. Ancak harici stil sayfalarnn seeneklerinizi artrabileceini ve bu stilleri sitenizdeki dier belgelerde de kolayca uygulamanz saladn unutmayn. Stillerinizi, onlar kullanmak istediiniz her sayfada yeniden yaratmak yerine, btn stillerinizi saklamak zere bir harici stil sayfas kullanabilir ve bylece bu stilleri sz konusu stil sayfasnn bal olduu her belge tarafndan eriilebilir klabilirsiniz. Bu da biimlendirme ilemini nemli lde hzlandrabilir. Harici bir stil oluturmak iin CSS panelinde Yeni CSS Kural butonuna bastktan sonra alan pencerede Tanmla alannda (Yeni Stil Sayfas Dosyas) seeneini semeli veya daha nce harici bir stil sayfanz varsa alan pencereden onu semelisiniz.

Blm 3 Stil Sayfalar Oluturmak

37

Dreamweavern CSS Dzenleme zellii


Dreamweaver varsaylan davran olarak CSS sayfalarn dzenlediinizde onlar aar ve yaptnz deiiklikleri iine ekler ancak otomatik olarak kayt etmez. Bu durumda yaptnz son deiiklikleri sayfanzda gremeyebilirsiniz. Bu durumu engellemek iin yapmanz gereken Dreamweaver iinde Dzen > Tercihler seeneini sein.

38

Blm 3 Stil Sayfalar Oluturmak

CSS Stilleri mensnden Deitirildiinde CSS dosyalarn a kutucuundaki iareti kaldrmaktr.

Blm 3 Stil Sayfalar Oluturmak

39

Eklediiniz Stilleri Kullanmak


Stil olarak eklediiniz Snf lar sayfanzn iinde kullanmak iin onlarn etki edecekleri metinleri semelisiniz. Bu ilem iin sayfanzn iinde bir metni ya da baka bir nesneyi iaretlemeli ve ona oluturmu olduunuz stili seerek yeni grnmn vermelisiniz. Yazy iaretledikten sonra zellikler panelindeki Stil penceresinden eklemi olduunuz bu stili semelisiniz. Unutmayn bu stili CSS panelinde deitirdiinizde sayfa iinde uyguland her yerde deiecektir.

Bir Etiket in Stil Oluturmak


Eer sayfanzn iinde bir etiketin getii yerlerdeki zelliklerini bir seferde dzenlemek istiyorsanz o zaman, o etiket iin bir stil tanmlayabilirsiniz. Bunu yapmak iin yeni stil ekleme butonuna bastktan sonra Etiket seeneini semeli ve buradan hangi etiket iin ilem yapacaksanz onun seili olduundan emin olmalsnz. rnein dokmanlarnzn iindeki tm paragraflarn sizin setiiniz ekilde gzkmesini istiyorsanz o zaman alan menden p etiketini semelisiniz (HTML bir etiketler dilidir. Sayfa iindeki tm gsterimler ile ilikili bir etiket bulunmaktadr. Paragraf iin kullanlan etikette <p> dir.

40

Blm 3 Stil Sayfalar Oluturmak

Oluturduunuz yeni stil, paragraf etiketleriyle biimlendirilen metnin grntlenme eklini yeniden tanmlayacaktr. Bileik Stil Hazrlamak Bileik stili kullanabileceiniz yerlerden biri sayfanzn iindeki balantlara efekt eklemektir. Bileik modu iinde hazr olarak tanmlanm 4 adet link seenei bulunmaktadr.

Blm 3 Stil Sayfalar Oluturmak

41

Bunlar: a:link Sayfa iinde daha nceden ziyaret edilmemi linklerin grnm ile ilgili grsel ayarlamalar yapabileceiniz tanmlama. a:hover Sayfa iindeki linklerin zerine geldiinizde nasl bir grnm alacan ayarlayabileceiniz tanmlama. a:active Eer ereveli sayfalar kullanyorsanz tklanm olan linkin nasl bir grnm alacan ayarlayabileceiniz tanmlama. a:visited Daha nce ziyaret edilmi bir linkin nasl bir grnm alacan ayarlayabileceiniz tanmlama.

BLM

Balarla almak
Balara Farkl Renk Atamak Onaltlk Tabanl Renk Kodlar Hipermetin Balantlar Oluturmak Sayfa inde Link Vermek E-Posta Balantlar Eklemek

Blm 4 Balarla almak

43

enzersiz bir ara olan Web sitelerinin gc, metinleri ve resimleri dier belgelerle dorusal ya da sral olmayan balantlar araclyla balama becerilerinden ileri gelir. Web taraycs, balant olduklarn gstermek iin bu blgeleri vurgulayabilir (genellikle belirli bir renkle ya da altizgiyle). HTMLde balantlar iki paradan oluur: Kendisine balanlacak olan dosyann ad ve yolu (ya da URLi - Uniform Resource Locator) ile tklanabilir alan olarak grev yapan metin ya da resim. Kullanc bir balantya tkladnda Web taraycs bal belgeyi ykler. Baz Web tarayclarnda imle zerine geldiinde balantnn yolu, tarayc penceresinin durum alannda (pencerenin sol alt kesinde yer alr) grntlenir. Balantlar kullanclar dier HTML dosyalarna, resimlere ve dier medya dosyalarna indirilebilir, dosyalara ynlendirebilir.

Balara Farkl Renk Atamak


Sayfanzdaki metin tabanl balantlarn varsaylan rengini belirleyebilirsiniz. Belgedeki normal gvde metninden farkl bir balant rengi setiinizde kullanclar balantlar kolayca ayrt edebileceklerdir. Belgenizin varsaylan balant zellikleri Sayfa zellikleri iletiim kutusunda belirtilir.

Ba renklerini deitirmek iin Deitir > Sayfa zellikleri men nesnesini sein. Alan sayfa zelliklerinde Balar (CSS) baln sein.

44

Blm 4 Balarla almak

Eer balant renklerini belirlemezseniz, sayfa kullancnn Web taraycsnda grntlendiinde taraycnn varsaylan ayarlar kullanlacaktr. Bu varsaylan ayarlar taraycdan taraycya farkllk gsterebilir. Sitenizin grnm zerinde almaya baladnzda sitenin renk dzenini bir btn olarak hesaba katmak en iyisi olacaktr. Sitenin tamamnda kullanlacak stillere ve renklere karar verirken balant renklerini deitirerek bu renklerin sayfalarnzda kullanlan dier renklerle uyumlu olmasn salayabilirsiniz. Balantlarn kolayca okunabilmesi iin, setiiniz renklerin arka planla ve dier elemanlarla kontrast oluturmas (ama uyumsuzluk yaratmamas) gerekir. Balantlar farkl durumlara sahiptir. rnein tklanan ve tklanmayan balantlarn durumu farkldr. Bir balantnn her durumu iin ayr grnm nitelikleri kullanabilirsiniz. Kullancnn davranna gre deien drt farkl balant durumu iin renk tanmlayabilirsiniz. Ba Rengi: Balantnn, zerine tklanmadan nceki yani balangtaki rengidir. Balantlar iin kullanlan standart Web taraycs rengi mavidir. Ziyaret Edilen Balar: Kullanc bir balantya tkladnda balantnn ald renktir. Tklanm bir balant iin kullanlan standart Web taraycs rengi mordur. Rollover Balar: Kullanc, imleci bir balantnn zerinde bir sre tuttuunda balantnn ald renktir. Bu, bir enin tklanabilir olduunu gsteren ikinci bir iaret olarak tanmlanabilir. Bu seenek bo braklrsa rollover kullanlmaz. Etkin Balar: mle zerindeyken farenin dmesine basldnda balantnn ald renktir. Etkin balantlardan, ziyaretiye ilgili balantya tklandn gsteren etkileimli bir iaret olarak faydalanlabilir. Bununla birlikte, kullanclarn Internet eriiminin hzlanmasyla etkin balantlarn eskisi kadar rabet grmediini hatrlatmak isterim. Bu seenek bo braklrsa etkinlik durumunu gstermek iin bir etkin renk kullanlmaz.

Blm 4 Balarla almak

45

Onaltlk Tabanl Renk Kodlar


HTMLde renkler RGB (Red/Green/Blue Krmz/Yeil/Mavi) kullanlarak onaltlk kodlarla tanmlanr. Onaltlk sistemde rakamlar (0-9) ve harfler (A-F) kullanlr. HTMLde renkleri tanmlamak iin kullanlan alt basamakl kodda ilk iki basamak krmzy, ikinci iki basamak yeili ve son iki basamak da maviyi temsil eder. rnein #00FF00 ifadesiyle gsterilen renkte krmz ve mavi yoktur ve parlak bir yeil kullanlmtr. #000000 ifadesiyle gsterilen renkte ise ne krmz, ne yeil, ne de mavi kullanlmtr. Bu, siyah rengi gsterir. Bunun tersine, #FFFFFF ifadesi de krmz, yeil ve mavinin maksimum derecelerini gsterir ve bunlar birletiinde ekrannzda beyaz rengi oluturur. Bilgisayar ekranlarnn sizin grdnz renkleri oluturmak iin ktan faydalandn hatrlayn. In renk zellikleri (eklenen renk sistemine dayanr ve bu sistemde tm renkler birleerek beyaz oluturur), basl medyada (karlan renk sistemine dayanr ve bu sistemde tm renkler birleerek siyah oluturur) kullanlan pigmentlerin zelliklerinden ok farkldr. Diyez iareti (#), kendisini takip eden ifadenin bir renk ismi (siyah, beyaz, krmz, vs. gibi) deil, onaltlk tabanl bir deer olduunu gsterir.

Hipermetin Balantlar Oluturmak


Hipermetin balantlar (hypertext links) ziyaretileri Web sitenizin iindeki belgelere ya da Internetteki baka sayfalara ynlendirmenizi salar. Ayn site iindeki dier belgelere ya da sayfalara giden balantlara greceli balantlar (relative links) denir. Greceli balantlar tek bir sitenin klasr yaps iinde farkl konumlarda yer alan pek ok farkl dosyaya atayabilirsiniz. Bu tr balantlar oluturmak iin birok farkl yntemden faydalanabilirsiniz. Aadaki uygulamada bu yntemleri greceksiniz. Herhangi bir balant oluturmadan nce yeni belgeleri kaydetmek nemlidir. Bylece Dreamweavera belgenizin nerede olduunu bildirerek balant yollarn belirlemesini salarsnz. Dreamweavern bal dosyann balanty yerletirdiiniz dosyaya gre olan konumunu belirlemesi gerekir. Belgenizi ilk kez kaydetmeden nce bir balant oluturmaya alrsanz bu balantya ait yol file:// ifadesiyle balanacak ve uzak sitelerde kullanlamayacaktr, nk bunlar sabit diskinize gre tanmlanmtr, balantnn bulunduu dosyaya gre deil. Siz belgelerinizi kaydettiinizde Dreamweaver balantlar otomatik olarak gnceller. Ama sorunlu yollarn ortaya kma ihtimalini ortadan kaldrmak iin, dokmannz oluturduunuzda kayt etmeniz en iyisidir. Site olutururken balantlar gstermek iin kullanacanz ifadeleri seerken dikkatli olun. Buraya Tklayn ifadesini kullanmaktan kann. nk bu belirsiz bir ifadedir ve gezintiyle ilgili zorluklar da dahil olmak zere eitli sorunlara yol aabilir. rnein grme engelli ziyaretiler (zellikle de sesli Web taraycs kullananlar) Buraya Tklayn ifadesini kullanan birden fazla balanty birbirinden ayrt edemeyebilir ve bunun sonucunda sitenizde gezinirken ciddi anlamda zorlanabilirler. Ayrca, sayfalarnza ilgilerini ekecek bir balant var m diye gz atan ziyaretiler genellikle balantlar gsteren alt izgilere dikkat ederler. Gzel bir aklama yerine Buraya Tklayn ifadesini kullanmak durumu zorlatrr. Balant ieren ifadeler yazarken her zaman konuyu aklayc ifadeler kullanmaya dikkat edin.

46

Blm 4 Balarla almak

Yerel sitenizdeki bir baka sayfa ya da dosyaya balant oluturmak iin balant vereceiniz yazy iaretledikten sonra, zellikler panelinde, HTML sekmesine tklayn ve Ba metin kutusunun sandaki klasr iaretine tklayn ve sitenizin iinden ilgili dosyay sein.

Bu alana eer baka bir siteye link verecekseniz bu sitenin adresini banda http bulunarak yazmalsnz. (r: http://wwww.adobe.com) Eer sayfanzn yeni bir pencerede almasn istiyorsanz Hedef mensnden _blank seeneini semelisiniz. Kendi siteniz iinde baka bir dosyaya link verdiinizde, eer link verdiiniz dosyalar, iinde link bulunan sayfa ile ayn klasrdeyse, dier dosya ismini Ba alannda grrsnz. rnein index. hmtl dosyasnn iinden ayn klasrdeki iletisim.html dosyasna link veriyorsanz Ba penceresinde iletisim.html dosya ismini grrsnz. Eer bir klasr daha altta ise bu alanda rnein sayfalar/ iletisim.html yazsn grrsnz. Eer bir klasr stteyse ../iletisim.html yazsn grrsnz. Daha alt klasrlere gitmek iin yolunuz zerindeki tm klasr isimleri linkinizin iinde olmaldr. Eer daha ste gitmek istiyorsanz ktnz her st seviye iin linkinize ayr bir ../ eklemelisiniz . Sitenizin iinde yeni bir klasr oluturmak isterseniz Dosyalar panelindeki bo beyaz alanda sa butona basarak yeni klasr seeneini sein.

Sayfa inde Link Vermek


Bir belge ok uzunsa ya da birden fazla blmden oluuyorsa, kullancnn belge iindeki belirli yerlere atlamasn salayan eitli balantlar oluturmanz gerekebilir. Bu teknik, kullanclar uzun metin pasajlaryla dolu bir ekran srekli kaydrma zorunluluundan kurtarr. Adl balant (named anchor), sayfada belirli bir balantnn atlayaca yeri iaretler. Adl balant eklemek iin Ekle panelinden apa butonuna basn.

Blm 4 Balarla almak

47

simli balant eklemek iin Ekle > Adl Balant seeneini sein. Alan pencerede yer imine bir isim verin.

Bu ismi kullanarak sayfa iinde link verebilirsiniz. simde boluk, noktalama iareti veya zel karakter (telif hakk sembol, diyez iareti vs gibi) kullanmayn. Ayn belgede ayn isme sahip birden fazla isimli yer imi asla kullanlmamaldr. Aksi takdirde Web taraycs kullancy doru yer imine gtremez. Sayfada, isimli yer imini gstermek iin sar bir simge belirecektir. Sayfada ilk belirdiinde bu simgeyi seebilirsiniz (seilen yer imi simgelerinin rengi maviye dner). Bu simge, Web taraycsnda grnmeyen bir elemandr. Adl balant simgesini gremiyorsanz Grnm > Grsel Yardmclar > Grnmez eler komutunu seerek grnmez elerin grndnden emin olun.

48

Blm 4 Balarla almak

Sayfa iinde yer imlerini oluturduunuza gre onlara artk link verebilirsiniz. Sayfa iinde bir balantya tkladnzda gitmek istediiniz yere yer iminizi yerletiriniz. Balant vermek istediiniz metni iaretleyin ve Ba penceresine yer iminin adnn nne # iareti koyarak yer iminin adn yazn. rnein yer imi olarak bolum1 koyduysanz bu imi gitmek iin link alanna #bolum1 yazmalsnz.

E-Posta Balantlar Eklemek


Sayfanz iinde tkladnda alan bir eposta linki istiyorsanz bunun iin yapmanz gereken linki vermek istediiniz metni iaretlemek ve Ba kutucuunun iine eposta linkini mailto:bilgi@ example.com eklinde yazmaktr. Bylece bir eposta linki oluturmu olursunuz.

Blm 4 Balarla almak

49

BLM

Resimlerle almak
Resim Trleri Sayfalarnza Arkaplan Resmi Eklemek Sayfalarnza Resim Eklemek Dreamweaver inde Temel Resim Dzenleme lemleri Resim zellikleri Resimlere sim Atamak Varlklar Panelini Kullanarak Resim Eklemek Bir Resim Yer Tutucusu Eklemek Resim Dzenleme Tercihlerini Ayarlamak Resim Tabanl Balantlar Oluturmak Resim Haritas Oluturmak

Blm 5 Resimlerle almak

51

esimler izleyicilerinizin dikkatini ekmede ve Web sitenizde vermeyi dndnz mesaj etkin bir ekilde iletmede nemli bir rol oynayabilir.

Adobe Dreamweaver CS4deki zellikler, sitenizde kullandnz resimler zerinde nemli lde kontrol imkn salar. Bylece resim zelliklerini Dreamweaver iinden hzl bir ekilde deitirebilir ve resimleri harici bir resim editrnde aabilirsiniz. Varlklar paneli, sitenizde kullandnz ya da kullanmanz gereken btn resimler iin kataloglar hazrlamanz salayarak resimlerin ynetimini basitletirir.

Resim Trleri
Web sitenizi gelitirirken sayfalarnzn iinde resimleri kullanarak etkiyi arttrabilirsiniz. Sayfalarnzn iinde kullanabileceiniz resim trleri aadakiler gibidir:

JPG GIF PNG

nternette en ok ve en yaygn ekilde kullanlan resim format GIF (Graphic Interchange Format) ve JPEGdir (Joint Photographic Experts Group). Resimleri Internette kullanmak zere kaydetme ilemi optimizasyon olarak adlandrlr ve Adobe Fireworks ya da Adobe Photoshop gibi bir resim editryle gerekletirilebilir. Bir resmi GIF olarak m yoksa JPEG olarak m kaydedeceinize karar verirken en yksek resim kalitesini ve olas en dk dosya boyutunu hedefleyin. Genel bir kural olarak, resimde dz renklerden oluan geni alanlar varsa ve renk harmanlar yoksa veya ok azsa GIF formatn kullann. GIFler metinlerde, vektr tabanl resimlerde, ayrca snrl renge ve ok kk boyutlara sahip resimlerde ok kullanldr. GIF resimleri maksimum 8-bit renk modu kullanlarak kaydedilebilir. Bu modda sadece 256 renk grntlenebilir. GIF dosyalar daha hzl yklenir, daha fazla optimizasyon seeneine sahiptir, ayrca saydamlk ve animasyonu destekler. GIF dosyalar iin .gif uzants kullanlr. Fotoraflarda ya da ton aral byk olan resimlerde JPEG formatn kullanmalsnz. JPEG format renk harmanlarn ok iyi grntleyebilir ve bir GIF resminin kesri kadarlk bir boyutta ok daha kaliteli fotografik resimler oluturabilirsiniz. JPEG formatnda resimler 24-bit modunda kaydedilir, btn renkler korunur ve fazlalk verilerin atld kaypl bir sktrma tipi kullanlr. JPEG kalitesi dtke, bahsettiimiz atlan verilerden dolay resme ait daha fazla bilgi kayb olur. JPEGlerin kaypl zelliinden dolay resmin kalitesini drmemek iin btn dzenleme ilemleri kaynak dosyas zerinde yaplmal ve tekrar JPEG olarak kaydedilmelidir. JPEG dosyalarnn uzants .jpgdir. nternette PNG (Portable Network Graphic) adnda nc bir format daha kullanlr.

52

Blm 5 Resimlerle almak

PNG format, GIFin yerini almas iin tasarlanmtr; JPEG ve GIF formatlarnn zelliklerini birletirir. PNG dosyalar kaypszdr, GIF dosyalarndan daha iyi sktrr ve renk kontrol asndan daha fazla seenee sahiptir, ayrca JPG gibi btn renkleri koruyabilir ya da bir GIF dosyas gibi snrl sayda renk kullanabilir. PNG JPEGlerin yerini almas iin tasarlanmamtr. PNG, animasyon desteine sahip deildir ve eski Web tarayclar tarafndan desteklenmez. Dosya uzants .pngdir.

Sayfalarnza Arkaplan Resmi Eklemek


Sayfalarnza arkaplan resmi eklemek iin Dreamweaver mensnden Deitir > Sayfa zellikleri seeneklerini sein.

Alan iletiim kutusunda Arka plan grnts seeneinden uygun bir resmi seebilirsiniz. Bu seimi Grnm (CSS)

Blm 5 Resimlerle almak

53

veya Grnm (HTML) seeneklerinden birini kullanarak yapabilirsiniz.

Sayfalarnza Resim Eklemek


Sayfalarnza resim eklemek iin imlecinizi sayfa iinde resmi eklemek istediiniz yere yerletirdikten sonra Ekle panelinden Resim dmesine tklamalsnz.

54

Blm 5 Resimlerle almak

Blm 5 Resimlerle almak

55

Alan iletiim kutusundan eklemek istediiniz resmi sein. Eer setiiniz resim sitenizin iinde deil de bilgisayarnzda baka bir yerde ise resmi setikten sonra Dreamweaver size bu dosyay sitenizin iine kopyalamay isteyip istemediinizi soracaktr. Bu soruya Evet olarak cevap vermeli ve dosyay sitenizin iindeki images klasr iine kayt etmelisiniz. Sonraki iletiim kutusunda karnza kan alanlardan Alternatif metin alanna bu resimle ilgili aklayc bir balk, uzun aklama blmne ise grme zrl ziyaretilerin sayfalarnz kolaylkla ekran okuyucu programlarla okuyabilmeleri iin aklama metnini yazabilirsiniz.

Dreamweaver inde Temel Resim Dzenleme lemleri


Dreamweaver iinde temel resim dzenleme ilemlerini yapabilirsiniz. Bu ilemleri yapmak iin zellikler panelindeki Dzenle buton grubunu kullanabilirsiniz. Bu butonlar srasyla aadaki gibidir:

56

Blm 5 Resimlerle almak

Dzenle: Harici bir resim dzenleme programn aar ve dzenlemek iin hazrlar En yiletir...:Resminizin KB cinsinden boyutunu optimize etmek iin optimizasyon penceresini aar. Krp: Baka bir dzenleme programna ihtiya duymakszn resimleri krpmanz salar. Parlaklk ve Kontrast: Resimlerinizin parlaklk ve kontrastlarn ayarlamanz salar. Keskinletir: Resimlerinizin keskinliini arttrr.

Resim zellikleri
Sayfalarnza eklediiniz resimlerin zelliklerini zellik panelini kullanarak dzenleyebilirsiniz.

G: Resmin genilii Y: Resmin ykseklii Kaynak: Resmin sabit diskiniz zerindeki yeri Ba: Resmin linki Alt: Resmin zerine gelindiinde kacak yaz D Boluk: Resmin altnda ve stndeki boluu Y Boluk: Resmin solunda ve sandaki boluu Hedef: Resmin linkinin hangi pencerede alaca Dk Kaynak: Resim yklenene kadar gsterilecek dk boyutlu versiyonu Kenarlk: Resmin ereve kalnln ifade etmektedir. Resminizin genilik yada yksekliini, G yada Y deerini veya resminizin kenar tutamalarndan tutarak boyutunu deitirdiinizde iki birim arasnda bir yenile ikonu kacaktr. Bu ikona tklayarak resmin orijinal boyutlarna dnmesini salayabilirsiniz.

Blm 5 Resimlerle almak

57

Resmin boyutlarn bytrken kalitenin dtne dikkat edin. Resimler Web tarayclarnda ekran znrlnde (72 dpi) grntlenir. Bu znrlk deeri, resmi orijinalinden daha byk boyutlarda grntlemek iin yeterli deildir. Bu yzden, mmkn olan en kk dosya boyutunu elde etmek zere bir resim editrnde (Adobe Fireworks ya da Adobe Photoshop gibi) boyutlar ayarlamanz gerekecektir.

Resimlere sim Atamak


Resim isimleri, her ne kadar ounlukla grnmeseler de Web sayfalarnn nemli bileenlerindendir. Resimlere birer isim atamak genel olarak iyi bir alkanlktr ve bu isimler script yazarken nesneyi tanmlamak iin kullanlr.

Varlklar Panelini Kullanarak Resim Eklemek


Varlklar paneli, sitenizin bileenlerini Dreamweaver iinden dzenleme imkn salar. Bu arac, eitli medya ve sayfa elemanlarn grmek ve dzenlemek iin kullanabilirsiniz. rnein btn resimlerinizi dzenlemeniz zor olabilir; zellikle de byk bir site zerinde alyorsanz. Varlklar paneli ile bu resimleri kolayca takip edebilirsiniz. Varlklar panelinin sol tarafnda yer alan dier dmeler sitenizde kullanabileceiniz farkl varlk (asset) tiplerini temsil eder. Bunlarn iinde renkler de yer alr. Varlklar paneliyle iki ekilde alabilirsiniz. Paneli, Site listesiyle (sitenizdeki btn resimlerin tam bir listesini ierir) ya da Sk Kullanlanlar listesiyle (sadece sizin sk kullanlan olarak iaretlediiniz resimleri gsterir) grntleyebilirsiniz. Her iki grnmde de setiiniz bir resmi sayfanza ekleyebilirsiniz.

Bir Resim Yer Tutucusu Eklemek


Asl resim henz hazr deilse bir resim yer tutucusu da ekleyebilirsiniz. Belgenize bir resim yer tutucusu ekleyerek asl resmin sayfada metinler, tablolar veya dier elemanlarla birlikte nasl grnecei hakknda yaklak olarak bir fikir elde edebilirsiniz. Grnt yer tutucusu eklemek iin Ekle Paneli iinde Grntler alr mensn sein.

58

Blm 5 Resimlerle almak

Alan menden Grnt Yer Tutucuyu sein

Blm 5 Resimlerle almak

59

Grnt Yer Tutucu iletiim kutusu alacaktr. Bu pencere iinde gerekli deerleri girebilirsiniz.

Resim yer tutucusu belge penceresinde belirecektir.

Resim Dzenleme Tercihlerini Ayarlamak


Dreamweaver ile Web sayfalar olutururken, kullandnz resimlerde deiiklik yapma gerei duyabilirsiniz. Kapsaml dzenleme ilemleri iin resmi harici bir resim dzenleme programnda amanz ve gereken ayarlamalar o ekilde yapmanz gerekir. Dreamweaver bu ilemi, ilgili resmi, tanmladnz bir programda hzl bir ekilde amanz salayarak basitletirir. Dreamweaver Dzen > Tercihler men nesnesini sein.

60

Blm 5 Resimlerle almak

Tercihler iletiim kutusundaki Kategori listesinde Dosya Trleri / Dzenleyicileri sein.

Blm 5 Resimlerle almak

61

Gerekli tanmlamalar bu pencereden yapabilirsiniz.

Resim Tabanl Balantlar Oluturmak


Kendi sitenizdeki ya da dier sitelerdeki belgelere balanmak iin resimlerden de faydalanabilirsiniz. Bu uygulamada harici bir balantnn nasl oluturulduunu greceksiniz. Resimleri sitenizdeki dosyalara balamak iin nceki uygulamada kullandnz teknikleri kullanabilirsiniz. Resimlere balant oluturmak iin, ba bilgisini gireceiniz resmi sein ve zellikler denetisi iindeki ba blmne dosya adn yazn.

Resim Haritas Oluturmak


nceki uygulamada bir resme balant uygulamann ne kadar kolay olduunu grmtnz. Bal sayfaya gitmek iin kullancnn resmin herhangi bir yerine tklamas yeterliydi. Resmi, aktif alan (hotspot) ad verilen eitli bal alanlara da blebilirsiniz. Burada resme aktif alanlar yerletirmek iin bir resim haritas (image map) kullanrsnz. Sz konusu aktif alanlar ille de dikdrtgen eklinde olmak zorunda deildir, farkl ekillerde de olabilirler. Kavramsal olarak bakldnda, resim haritalar corafi haritalarda kolayca kullanlabilir. Bununla birlikte herhangi bir resmi de resim haritas olarak kullanabilirsiniz. zellikler denetisindeki Elem metin alanna istediiniz ismi yazabilirsiniz.

62

Blm 5 Resimlerle almak

Bu alandaki ekil aralarn seerek resminiz zerine resim alanlar izebilirsiniz. Resim alann izdikten sonra eriilebilirlikle ilgili bir uyar grntlenecektir.

Resim haritas resim zerinde belirecek ve zellikleri de zellikler denetisinden eriilebilir olacaktr.

Resmin bu blmnde, isimlerin etrafnda tutamalarla birlikte mavi-yeil renkli yar saydam bir alan belirecektir. zellikler denetisinde aktif alan zelliklerinin belirdiine dikkat edin. Dreamweaver, zellikler denetisindeki Ba metin alanna otomatik olarak bir bo balant (#) yerletirecektir. Yerine hemen bir balant yazmayacaksanz bu karakteri silmeyin. Bu karakter, ilgili alann tklanabilir olduunu gstermek iin bir yer tutucu olarak grev yapar. Oluturduunuz aktif alanlar kolayca dzenlenebilir. Bunlar istediiniz zaman yeniden boyutlandrabilir, tayabilir ya da silebilirsiniz. Resim haritasyla iiniz bittikten sonra areti Etkin Nokta Aracyla resmin zerinde aktif alan dnda baka bir yere tklayabilirsiniz. Resim zerinde resim alannn dnda farkl bir yere tkladnzda zellikler denetisindeki seenekler resim zelliklerini gsterecek ekilde deiecektir. Bir aktif alan tamak isterseniz imleci aktif alann iine yerletirin ve srkleyin. Aktif alan areti Etkin Nokta aracyla seildikten sonra ok tularn kullanarak da aktif alann konumunu ayarlayabilirsiniz. lemi gerekletirdikten sonra F12ye basarak sayfalarnz nizleyebilirsiniz.

Blm 5 Resimlerle almak

63

BLM

Tablolarla almak
Tablo Oluturmak Harici Tablolar Aktarmak Tablo Hcrelerini Kopyalamak ve Yaptrmak Tablo Hcrelerini Semek ve Biimlendirmek Tablo zellikleri Hcre zellikleri Tablo eriini Sralamak Tabloda Satr yada Stnlar Silmek Tablolara Satr yada Stn Eklemek ie Tablolar Farkl Ekran znrlkleri in Uygun Boyutlar

Blm 6 Tablolarla almak

65

ablolar, bilgileri dzenli bir ekilde sunmanz salar. Tablolarda yer alan satrlar (rows) ve stunlarn (columns) kesiimi hcreleri (cells) oluturur ve tablo ieriini bu hcrelere yerletirirsiniz. Hcreleri birletirerek daha byk hcreler elde edebilirsiniz. Tablolar, hesap tablolaryla sunulmas gereken sekmeli (tabular) verilerden resimler ve HTML metinlerinin kombinasyonlarndan oluan grsel tasarmlara kadar pek ok farkl tipte ierik sunmak iin kullanlabilir. Tablolar yerleim dzenini kontrol etmek iin kullanlabilir. erii tablo hcreleri iinde dzenleyerek nesneleri sayfa zerinde belirli konumlara yerletirebilir ve daha karmak grsel tasarmlar oluturabilirsiniz. Tablolar, tasarmclara ve gelitiricilere sitelerinin yerleim dzeni zerinde kontrol imkn salayan HTML elemanlarndan biridir.

Tablo Oluturmak
Bir tablonun tm ierii her zaman bir hcre iinde yer alr ve her tabloda bir ya da daha fazla hcre bulunur. Hcre (cell), bir satr (row) ve bir stunun (column) kesimesiyle oluan alana verilen isimdir. Bir tabloda en az bir satr ve bir stun olmaldr; bylece bir hcre elde edilir. Ekle ara ubuunda Mizanpaj kategorisini sein ve Standart mod dmesinin seili olduundan emin olun.

66

Blm 6 Tablolarla almak

Varsaylan durumda Standart mod seenei etkin olmaldr. Etkin mod, vurgulu bir dmeyle gsterilir. Etkin tablo modu olarak Standart mod seili deilse, Standart dmesine tklayn.

Daha sonra ekleme noktanz sayfanzn iinde istediiniz bir noktaya koyarak yeni bir tablo eklemek iin Ekle panelindeki Mizanpaj modundaki yada Ortak modundaki Tablo dmesine tklayn.

Blm 6 Tablolarla almak

67

Tablo iletiim kutusu blme ayrlmtr Table Boyutu, stbilgi ve Eriebilirlik.

Tablo Boyutu blmnde u seenekler yer alr: Satrlar: Tablodaki satrlarn saysn gsterir. Daha nce bir tablo oluturmadysanz varsaylan Dreamweaver deeri 3tr. Stunlar: Stun saysn gsterir. Daha nce bir tablo oluturmadysanz varsaylan Dreamweaver deeri 3tr Tablo Genilii: Piksel ya da Web taraycs penceresinin bir yzde deeri cinsinden tablo geniliidir. Piksel cinsinden tanmlanan tablolar metin ve resimlerin hassas bir ekilde yerletirilmesi asndan iyidir. Yzde cinsinden tanmlanan tablolar ise stunlarn orantlar asl geniliklerinden daha nemliyse ideal bir seenektir. Daha nce bir tablo oluturmadysanz varsaylan Dreamweaver deeri 200 piksel olacaktr. Kenarlk Kalnl: Tablo kenarlnn geniliini (kalnln) gsterir. Daha nce bir tablo oluturmadysanz varsaylan Dreamweaver deeri 1 olacaktr. Hcre Dolgusu: Hcre ierii ve hcre duvarlar arasndaki boluk miktarn gsterir. Bu seenei bo brakrsanz, varsaylan deer olan 1 piksel kullanlr. Byle bir boluk kullanmak istemiyorsanz metin alanna 0 (sfr) yazdnzdan emin olun. Daha nce bir tablo oluturmadysanz varsaylan Dreamweaver deeri botur. Metin alannn sanda sz konusu boluu gstermek iin mavi rengin kullanld kk bir tablo resmi greceksiniz. Hcre Boluu: Tablo hcreleri arasndaki boluk miktardr (kenarlk buna dahil deildir). Bu seenei bo brakrsanz varsaylan deer olan 1 piksel kullanlr. Bunun iin herhangi bir boluk kullanmak istiyorsanz metin alanna 0 yazdnzdan emin olun. Daha nce bir tablo oluturmadysanz varsaylan Dreamweaver deeri botur. Metin alannn sanda sz konusu boluu gstermek iin mavi rengin kullanld kk bir tablo resmi greceksiniz.

68

Blm 6 Tablolarla almak

Bu zellikleri daha sonra da deitirebilirsiniz. Belge penceresinde bir tablo seildiinde Tablo Boyutu blmndeki seeneklere zellikler denetisinden ulaabilirsiniz. Tablo iletiim kutusunu daha nce kullandysanz bu seeneklerin varsaylan deerleri farkl olabilir. Bu durumda varsaylan deerler bir tablo iin en son tanmladnz deerler olacaktr. stbilgi blm stbilgi iin drt farkl yerleim seenei ierir: Yok, Sol, st ve Her ikisi. stbilgi (header), ieriinizi etiketlemek iin kullandnz bir satr ya da stun baldr.

stbilgiler tasarm/yerleim tablolarndan (tasarm amacyla grsel elemanlarn dzenlenmesi ve yerletirilmesi iin kullanlan tablolar) ziyade ounlukla veri tablolar (hesap tablolar gibi ilev gren tablolar) iin kullanlr. Bir hcreyi (ya da hcreleri) stbilgiye dntren bu seenee zellikler denetisi araclyla da eriebilir ve istediiniz zaman zerinde deiiklik yapabilirsiniz. Sayfalarnzn ziyaretileriniz asndan eriilebilirlik durumunu srekli olarak dikkate almanz nemlidir. Eriilebilir sayfalar hazrlamann amac, olabildiince ok ziyareti iin (engelli olanlar da dahil olmak zere) ilevsel bir ierik oluturmaktr. Dreamweaver, Eriilebilirlik blm araclyla eriilebilirlik zelliklerini en batan itibaren dahil etmeyi ok kolay bir hale getirmektedir. Bu blmde u seenekler yer alr:

Blm 6 Tablolarla almak

69

Resim Yazs: Siz bir tablo aklamas (caption) tanmladnzda bu aklama btn kullanclar tarafndan grlr ve tablonun stne, altna, soluna ya da sana hizalanabilir. Bu seenei bo brakrsanz herhangi bir tablo aklamas eklenmez. Bu seenek sadece Tablo iletiim kutusunda bulunur. Daha ileride bu zellii dahil etmek isterseniz, HTML kodunu dzenleyerek bunu gerekletirebilirsiniz. zet: Tablo zeti sayfada grntlenmez. Ekran okuyucular tarafndan okunur ve tablonun kullanlma amacn ve ieriini aklamak iin kullanlr. zet (summary), tablodaki materyali zl, aklayc ve olabildiince ksa bir ekilde tanmlamaldr. Tablonun ieriinin ne olduunu gstermelidir. Bu seenei bo brakrsanz zet dahil edilmez. Sayfada, belirlediiniz zelliklerle oluturulmu bir tablo belirecek ve otomatik olarak seili durumda olacaktr. Tablonun st ksmna bir tablo stbilgisi (ak renkli gri ubuk) eklendiine dikkat edin. Tablonun sol ve sa snrlarn gsteren yeil renkli dey izgiler bu ubuun iki yannda grntlenir.

70

Blm 6 Tablolarla almak

ubuun st veya alt ksm boyunca, ortasnda tablonun genilik deeri yazan ve bir men oku bulunan yeil bir izginin uzandn greceksiniz. ubuun tabloya en yakn ksmnda bir dizi ksa yeil izgi yer almaktadr. Stunlarn geniliini gsteren bu izgilerin her biri kendi men okuna sahiptir. Siz tablonun dnda bir yere tkladnzda tablo stbilgisi kaybolur, tablo tekrar etkin duruma geldiinde ya da seildiinde yine belirir. Tablo stbilgisi, tablonun st ksmndaki ierii rtebilir. Eer tablo belgenizdeki ilk eyse, tablo stbilgisi tablonun alt ksmna eklenebilir. ubuun nerede grntleneceini kontrol edemezsiniz. Grnm > Grsel Yardmclar > Tablo Genilikleri komutunu seerek tablo stbilgisi grsel yardmcsn aabilir ya da kapatabilirsiniz.

Blm 6 Tablolarla almak

71

Onay iareti sz konusu seenein etkin durumda olduunu gsterir. Eer yannda onay iareti yoksa seenek kapal durumda demektir. Tabloyla tablo aklamasn evreleyen ve alt ve sa yannda seim tutamalar bulunan siyah dz bir d hat (outline), tablonun seili durumda olduunu gsterir. ki satr ve drt stun, tablo aklamasn evrelemeyen gri bir kenarlkla gsterilir. Varsaylan Hcre Dolgusu deerinin uygulanmasndan dolay hcrelerin arasnda bir boluk grebilirsiniz. nk Hcre Boluu seenei bo braklmt. Siz yazp dier hcrelere gemeye devam ettike tablo metni sdrmak iin stunlarn geniliini otomatik olarak deitirebilir. Hcreler arasnda hareket etmek iin Tab tuunu ya da ok tularn kullanabilirsiniz. Tab tuu, sada yer alan bir sonraki hcreye ya da satrn en sonundayken alttaki satrn ilk hcresine (en soldaki hcre) gemek iin en hzl yntemdir. erii bulunan bir hcreye Tab tuunu kullanarak getiinizde o hcrenin ierii seili hale gelir. Eer tabloyu eklerken en st satr st bilgi satr olarak tanmladysanz iine yazdnz metinler koyu renkte ve ortalanm olarak karnza kacaktr. Tablonun dna tkladnzda stunlar genilikleri deierek hafife kayabilirler.

Harici Tablolar Aktarmak


Dreamweaver iine harici tablolar, Microsoft Office programlarndan aktarabilirsiniz. Bunun iin yapmanz gereken ilgili tabloyu kopyalamak ve HTML sayfanzn iine yaptrmaktr.

72

Blm 6 Tablolarla almak

Tablo Hcrelerini Kopyalamak ve Yaptrmak


Hcreler, ekleme noktasnn bulunduu bir konuma yaptrlabilir ya da mevcut bir tablodaki seimin yerine konabilir. Birden fazla tablo hcresini yaptrmak istiyorsanz panonun (clipboard) ierii tablonun ya da yaptrlan hcrelerin tabloda yerine geecei seimin yapsna btnyle uymaldr. Bir hcreyi kopyalayp bunu seili bir hcrenin yerine geecek ekilde yaptrabilirsiniz. Btn satrlar bir tablonun sonuna yaptrrsanz satrlar tabloya eklenir. Yaptrma ilemini bir ya da daha fazla hcreyi deitirmek amacyla yapyorsanz, pano ieriinin seilen hcrenin (ya da hcrelerin) yapsna uymas durumunda seilen hcrenin (ya da hcrelerin) ierii kopyalanm olanlarla deitirilir. Hcreyi ya da hcreleri bir tablonun dna yaptryorsanz, satrlar, stunlar veya hcreler yeni bir tablo tanmlamak iin kullanlr. Hcrelerin ieriini silmeniz, ama ayn zamanda hcrelerin kendisini ayn ekilde brakmanz gerekiyorsa bir ya da daha fazla hcreyi sein (tm satr ya da stunu deil), ardndan da Dzen > Temizle komutunu sein veya Sil tuuna basn. Btn bir satr silmeniz gerekiyorsa imleci srkleyerek satrdaki btn hcreleri sein ve Sil tuuna basn. Silmek iin nce bu tabloyu semeniz gerekir. Dreamweaver, tablo semek iin kullanabileceiniz birka yntem sunar. Tablo yapsnn karmaklna bal olarak baz yntemler dierlerine gre daha kolaydr. Bir tabloyu, sol st kesine veya sa ya da alt kenarnda bir yere tklayarak da seebilirsiniz. Kenarlardan birine yaklatrdnzda imle okunun yannda bir tablo simgesi belirecektir. Tklamadan nce imleci grene kadar bekleyin. Bir tabloyu semek iin kullanabileceiniz bir dier yntem de tablonun iinde bir yere tklayp ardndan Deitir > Tablo > Tablo Se komutunu semek eklindedir.

Blm 6 Tablolarla almak

73

Tabloyu semek iin gri ubuk boyunca uzanan yeil renkli yatay tablo genilik izgisine de tklayabilirsiniz. Seildikten sonra tablonun etrafnda seim tutamalar belirir ve btn tabloyu siyah bir kenarlk evreler. Siyah kenarlk sadece bir ya da birden fazla hcrenin etrafn sarmaz, tm tabloyu kapsar.

Eer ekleme noktas tablonun iindeyse ve tablo seili durumda deilse Etiket Seicide <table> etiketinin yannda <tr> ve <td> etiketlerini de grebilirsiniz. <tr> etiketi, tablo satrn temsil eder. <td> etiketi tablo verisini temsil eder ve hcre olarak da bilinir. Bir <td> etiketini setiinizde ilgili hcre seili hale gelir ve zellikler denetisini kullanarak bu hcre zerinde deiiklik yapabilirsiniz. mle bir hcrenin iindeyken Ctrl+A klavye ksayolunu kullandnzda hcre seili hale gelir. Bu ksayolu ikinci kez kullandnzda tm tablo seilir.

Tablo Hcrelerini Semek ve Biimlendirmek


Bir tablodaki tek bir satr, tek bir stunu ya da tablodaki btn hcreleri kolayca seebilirsiniz. Bunun iin satra soldan yada stuna stten yaklatnzda ok iareti kar. Bu ok iareti ktnda tklamanz satr semenizi salayacaktr. Bir tablodaki komu olmayan hcreleri de (birbirine demeyen hcreler) seebilir ve bunlarn zelliklerinde deiiklik yapabilirsiniz. Ancak komu olmayan hcreleri kopyalayp yaptramazsnz. Bir tablo iinde birbirine komu olmayan hcreleri semek istediinizde klavyeden CTRL tuuna basl tutarak hcrelere 1 kere tklayn. Bylece birbirine komu olmayan hcreleri semi olursunuz. mleci bir hcrenin zerinde hareket ettirirken Ctrl tuunu basl tuttuunuzda, ok imlecinin yannda birden fazla hcre setiinizi gstermek zere d hatlar belirgin bir kare belirebilir.

74

Blm 6 Tablolarla almak

Tablo zellikleri
Herhangi bir tabloyu setiinizde zellik denetisi iinde bu tablo ile ilgili zellikler belirecektir. Bu zellikler aadaki gibidir.

Tablo Kimlii: Tablonun baln girebileceiniz alandr. Bu alan sizin tablonuzu sayfa iinde esiz bir ekilde tanmlayabileceiniz alan belirler. Satrlar: Tablolarnzn satr saysn ayarlayabileceiniz alan. Stunlar: Tablolarnzn stun saysn ayarlayabileceiniz alan. G: Tablolarnzn geniliini ayarlayabileceiniz alan. Buradan tablo geniliinizi piksel yada yzde olarak ayarlayabilirsiniz. Hcre Dolgusu: Hcrelerinizin iindeki nesnelerle duvarlar arasndaki uzakln piksel olarak deeri. Hcre Boluu: Hcre aras boluklarnzn piksel olarak deeri. Hizala: Tablonuzun sayfanz iindeki yatay hizalamas Kenarlk: Tablolarnzn kenar kalnl. Bu kalnlk deeri, eer tablolarnz tasarm eleman olarak kullanyorsanz 0 olarak ayarlanmaldr.

Hcre zellikleri
Tablo zelliklerini dzenleyebileceiniz gibi, tablolarnzn her bir hcresinin yada oklu seim yaptysanz hepsinin zelliklerini de bir arada deitirebilirsiniz. Bunun iin zelliklerini deitirmek istediiniz hcreye tklamal veya birden fazla hcre iin bu ii yapacaksanz o hcreleri CTRL tuuna basarak semelisiniz.

Seilen hcreleri yaylmalar kullanarak birletir: Bu seenekle birbirine komu iki hcreyi birletirebilirsiniz. Seilen hcreleri satr yada stunlara bler: Bu seenek ile seilen hcreleri satr yada stunlara blebilirsiniz. Yatay: Hcre iindeki yatay hizalamay belirler. Dikey: Hcre iindeki dikey hizalamay belirler. Gen: Stnn geniliini belirler.

Blm 6 Tablolarla almak

75

Yk: Satrn yksekliini belirler. Bg: Hcre arkaplan renginizi belirler. Burada vermi olduunuz deer tabloya vermi olduunuz arkaplan deerinin zerinde gzkr. Sarma Yok: Yazlarnzn tablo kldnde bir alt satra inmesini engeller. stbilgi: aretlendii hcrenin balk formatnda gzkmesini salar.

Tablo eriini Sralamak


Tek bir stunun ieriini alarak basit bir tablo sralamas yapabilirsiniz. ki stunun ieriini temel alarak daha karmak bir sralama ilemi de gerekletirmek mmkndr. Birletirilmi hcreler ieren tablolarda sralama yapamazsnz. Sralama yapmak iin, tabloyu sein ve arkasndan Komutlar > Tabloyu Srala komutunu sein.

Tabloyu Srala penceresi alacaktr.

76

Blm 6 Tablolarla almak

Bununla Srala: Sralamada temel alnacak stunu semek iin kullanabilirsiniz. Sralama: Stunu alfabetik olarak m yoksa saysal olarak m sralayacanz belirler. Bu seenein nemi, ierii saysal olan stunlarda ortaya kar. Bir ve iki basamakl saylarla numaralandrlm bir listeyi alfabetik olarak sralarsanz, normal bir saysal sralama yerine (1, 2, 3, 10, 20, 30 gibi) alfanmerik bir sralama elde edersiniz (1, 10, 2, 20, 3, 30 gibi). Sralama dzeni iin azalan (Adan Zye veya artan) seeneini iaretleyin (varsaylan). Sonra Bununla: Bu uygulamada bu seenei bo (varsaylan) brakn. Sonra Bununla ile farkl bir stunda ikincil bir sralama gerekletirebilirsiniz. Mendeki sralama seenekleri Bununla Sraladakilerle ayndr. Sralama ilk satr ierir: Bu seenekle ilk satrn sralamaya dahil edilip edilmeyeceini belirleyebilirsiniz. Eer ilk satr baka bir yere tanmamas gereken bir stbilgiyse bu onay kutusunu iaretlemeden brakn (varsaylan). st bilgi satrlarn srala: stbilgi satrlarn gster. Alt bilgi satrlarn srala: Altlk satrlarn gster. Sralama tamamlandktan sonra tm satr renklerini ayn ekilde koruyun: Bir satrn herhangi bir niteliini deitirdiyseniz, bu seenei iaretleyerek satrdaki ilgili niteliini eski deerine getirebilirsiniz. lk satrna belirli bir renk atanm olan bir tabloyu sraladnz farz edelim. Sralamadan sonra ilk satrdaki veriler ikinci satra kayar. Bu seenek iaretlendiinde verilerle birlikte renk de ikinci satra kayar. Eer bu seenek iaretli deilse renk ilk satrda kalr.

Tabloda Satr yada Stnlar Silmek


Tablonuzdan satr yada stunu setikten sonar klavyenizden sil butonuna basarak yada menden Deitir > Tablo > Satr Sil yada Stun Sil seeneini seerek silme ilemini gerekletirebilirsiniz.

Blm 6 Tablolarla almak

77

Tablolara Satr yada Stn Eklemek


Tablolarnza satr yada stun eklemek isterseniz yapmanz gereken eklemek istediiniz satr yada stun iinde bir hcreye tkladktan sonra Deitir > Tablo > Satr Ekle yada Stun Ekle seeneine tklamaktr.

78

Blm 6 Tablolarla almak

Eer ayn menden Satr veya Stun ekle seeneini iaretlerseniz aadaki gibi bir iletiim kutusu karnza kacaktr.

ie Tablolar
Tablolar tek bana kullanabileceiniz gibi ayn zamanda iie olacak ekilde de kullanabilirsiniz. Bu ilem ile tablolarnz sayfa tasarm iin daha gelikin olarak kullanabilirsiniz. Bu ilemi yapmak iin bir tablo ekledikten sonra tablonun iinde herhangi bir hcreye tklayarak farkl zelliklerde bir baka tablo daha ekleyebilirsiniz.

Farkl Ekran znrlkleri in Uygun Boyutlar


Ziyaretilerinizin ekran znrlkleri birbirinden ok farkl olabilir. Bu durumda bu farkl znrlklere hitap edecek farkl boyutlarda tablolar hazrlamanz gerekebilir. Bu durumda yapmanz gereken hedef kitlenize uygun bir tablo genilii semektir. Tablo genilikleri ile ilgili uygun boyutlar aadaki gibidir. znrlk (Piksel) Cihaz 160 X 160 Palm tipi cihazlar 240 X 320 Cep bilgisayar 544 X 372 Web TV 640 X 240 Windows CE 640 X 480 13 inlik monitr 800 X 600 15-17 inlik monitr 1024 X 768 17- 19 inlik monitr 1200 X 1024 21 inlik monitr

Blm 6 Tablolarla almak

79

BLM

oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri


Sayfalarnza Flash Animasyonlar Eklemek Kullanc Etkileimi Bir Rollover Resmi Eklemek Bir Durum ubuu Mesaj Oluturmak Yeni Bir Tarayc Penceresi Amak Ajax Eklentileri

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

81

dobe Flash ve QuickTime filmleri gibi multimedya elemanlar, sitenizde sunduunuz ierii gelitirmenizde size yardmc olabilir. Bu elemanlar kullanarak sitenizin ziyaretilerine mesajnz iletmek zere sitenize animasyonlar ve videolar ekleyebilirsiniz.

Sayfalarnza Flash Animasyonlar Eklemek


Sayfalarnza Flash animasyonu eklemek iin Ortak sekmesindeki oklu ortam bileenleri mensne tklayarak Flash semeniz yeterli olacaktr. Resimlerde olduu gibi Varlklar panelini kullanarak belgelerinize Flash animasyonlar da ekleyebilirsiniz. Flash animasyonu eklemek iin Ekle panelinden Ortam alr mensne tklayn ve Flash seeneini sein.

Flash animasyonu eklenirken eriilebilirlik penceresi alacaktr.

82

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

Herhangi bir Flash animasyonunu sayfanza eklediinizde zellikler paneli aadaki gibi deiir.

Buradaki alanlar: Gen: Genilik Yk: Ykseklik Dosya: Dosyann sitenizdeki yeri Kaynak: Bu dosya iin orijinal FLA dosyanz varsa onun yeri Dzenle: Bu dosyann orijinal FLA dosyasn ap dzenlemeniz iin gerekli buton D Boluk: animasyonun sanda ve solunda verilecek dikey boluk Y Boluk: Animasyonun stnde ve altnda verilecek yatay boluk Kalite: Animasyonun hangi kalitede oynayaca. Bu ayar eer ziyaretilerinizin dk bilgisayar konfigrasyonlar olduunu dnyorsanz deitirin. Oynat/al: Animasyonu DW iinde nizlemek istiyorsanz gerekli buton Parametreler: Flash animasyonuna gndermek istediiniz parametreleri burada belirtebilirsiniz. Hizala: Flash animasyonunu etrafndaki baka bir nesneye gre hizalama seenei Wmode: Flashn grnm parametresi lek: Flash animasyonunun geniliinin %100 olmas durumunda bu boyuta gelirken eer deforme olmasn istemiyorsanz Kenarlk Yok seeneini, eer deforme olmasnda saknca yoksa Tam Sma seeneini seebilirsiniz.

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

83

Kullanc Etkileimi
Etkileim ve kullanc geribildirimi, Web sitelerinin nemli bileenleridir. Bunlar etkin bir ekilde kullanarak eitli avantajlar elde edebilirsiniz. Bu bileenleri kullanarak rnein ziyaretilerinizin sitenizin ieriini ve amacn daha iyi anlamalarna yardmc olabilir, sayfalarnzda dolamalarn kolaylatrabilir ve sitenizde gezmeyi onlar iin daha ho ve faydal bir deneyim haline getirebilirsiniz. Bir Web sitesine etkileim eklemenin pek ok yolu vardr. Etkileimli sayfalar oluturmak iin kullanabileceiniz birok araca rnek olarak dinamik ve veritaban destekli sayfalar, Adobe Flash ve QTVR (Quick Time Virtual Reality) verebiliriz. QTVR, 360 panoramik grnmleri ve etkileimli bileenleri destekleyen filmlerdir. Etkileimli Web siteleri oluturmak iin kullanlan aralarn en yaygn ve etkili olanlarndan biri (zellikle istemci tarafl scriptlerin yazlmasnda kullanlan) JavaScripttir. stemci tarafl scriptler, Web sayfalarnda bulunan ve tarayc tarafndan ilenen scriptlerdir. JSP (Java Server Page) tarafndan kullanlan scriptler de dahil olmak zere dier scriptler, sunucu tarafl scriptlerdir. Bunlar sunucu tarafndan ilenir ve kullancya gnderilir. Adobe Dreamweaver, standart JavaScript fonksiyonlarnn kullanlma srecini ve davranlarn kullanma sunarak basitletirir. Davranlar (behavior) Web sitenize kolaylkla dahil edebileceiniz nceden yazlm JavaScript kod rutinleridir. Davran, bir kullanc olayn (rnein imlecin Web taraycsndaki grafik tabanl bir dmenin zerine getirilmesi), bu olayn sonucu olarak gerekleen bir eylemle ya da bir dizi eylemle birletirir. Davranlar sayfalarnza etkileim eklemek, kullanclarn eylemlerine bal olarak geribildirim almalarn ve grdkleri bilgileri deitirmelerini ya da deitiremiyorlarsa kontrol etmelerini salamak iin kullanabilirsiniz. Dreamweaverda nceden tanmlanm bir dizi davran bulunmaktadr. lave davranlar ekleyerek Dreamweaver gelitirebilir ya da JavaScript konusunda yeterli bilgiye sahip iseniz kendi davranlarnz oluturabilirsiniz.

Bir Rollover Resmi Eklemek


Web sayfalarnda JavaScript en ok rollover oluturmak iin kullanlr. (Rollover, kullanc imleci zerine getirdiinde deien bir resimdir.) Rolloverlar, iki resmin kullanmn ayn alanda birletirir. Bir ziyareti rolloverlarn kullanld bir sayfaya ilk girdiinde, bu resim kombinasyonlar orijinal durumlarnda grntlenir. mle rollover resminin zerine getirildiinde, bunun yerini yeni bir resim alr. Yeni resim, bazen resmin on ya da over durumu olarak adlandrlr. Kullanc imleci resimden uzaklatrdnda, resim orijinal haline geri dnebilir ya da deimi olarak kalr. Rollover, etkileimin temel bir uygulamasdr. Kullancnn imleci resmin zerine getirme ilemine bir yant verir. Bu yant, genellikle mevcut resimde grsel bir efekt (rnein bir dmenin aydnlatlmas, bir sekmenin vurgulanmas ya da bir gezinti elemannn etkin grnmesini salamak iin derinliin deitirilmesi) olarak grnr. Rollover yantnda ayrca, yeni resme ieriin tanm ya da aklamas gibi ilave bilgiler de eklenebilir.

84

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

Web sitesindeki etkileim, zellikle kullanc asndan nemlidir. Bu, ziyareti ile Web sitesi arasnda gerekleen bir eydir. Etkileimin salanmas iin bir hareket ve bir yant gerekir; yani bu iki ynl bir iletiim srecidir. Sayfalarnza etkileim eklemeniz (yani ziyaretilerin eylemlerine sitenizin verecei yant belirlemeniz), sitenize yaplan ziyaretlerin karmaklk derecesini ve derinliini artrabilir. Ziyaretileri belirli eylemler gerekletirmeye ya da katlmda bulunmaya tevik eden Web siteleri, kullanc zerinde yaratlan etki asndan, kullancy pasif bir konumda tutan sitelere gre muhtemelen daha baarl ve ilevseldir ve aklda daha ok kalr. Dreamweaverda, hi HTML ya da JavaScript kodu kullanmadan rolloverlar oluturabilirsiniz. Rollover, Ekle ubuunun Ortak kategorisinde yer alan basit bir davrantr. Bu yntemi kullandnzda, davran Dreamweaver tarafndan oluturulur. Sayfanza Rollover resmi eklemek iin ncelikle Ekle panelindeki Ortak sekmesine tklayn. Bu panelde daha nce resim eklediiniz butona tklayn ve alan menden Rollover Grnts seeneini sein.

Dreamweaver, rollover oluturma ileminde bu iletiim kutusu araclyla size adm adm yardmc olur. Rollover oluturmak iin kullanacanz resimleri henz sayfaya yerletirmediyseniz bu yntemi kullanmay tercih edebilirsiniz, nk bu yntemle ayn anda hem resmi ekleyebilir, hem de bunu rollover olarak tanmlayabilirsiniz.

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

85

Bir rollover resmi eklemek iin ayrca Ekle > Grnt Nesneleri > Rollover Grnts komutunu seip yine ayn iletiim kutusunu kullanmanz da mmkndr.

Grnt ad blmne bir isim yazarak resmi adlandrabilirsiniz. Buraya bir isim yazmazsanz Dreamweaver resimleri kendisi adlandracaktr. Orijinal Grnt alanndaki Gzat... butonunu seerek orijinal resim olarak gzkecek resmi sein. Rollover Grnts, imle orijinal resmin zerine geldiinde deiecei ikincil halinin dosyasdr. Rollover grnty nceden ykle kutucuunu iaretlediinizde ikincil resim daha ona ihtiya olmadan sayfanzn iine n ykleme ile yklenir. Bylece kullanclarn resmin zerine geldiinde ikincil resmin kmas iin beklemesi engellenmi olunur. Alternatif metin, resimler iin kullandmz ALT alan ile ayn ilevi grmektedir. Tklandnda URLye git seenei ise resme verdiiniz linki gstermektedir.

86

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

Resme eklediiniz davranlar, Davranlar panelinde grlmektedir. Eer daha nceden eklenmi resimleriniz varsa onlara da rollover davrann ekleyebilirsiniz. Bunun iin yapmanz gereken rollover ekleyeceiniz resmi semek ve Davranlar panelini amak olacaktr. Daha sonra resminiz halen seili iken Davranlar panelinden + butonuna basarak, Grnt Deitir seeneini semelisiniz. Alan iletiim kutusunda setiiniz resim liste iinde seili olarak karnza gelecektir. Kayna buna ayarla seeneinin yanndaki Gzat... butonuna tklayarak yeni ikincil resminizi seebilirsiniz. Bu eklemi olduunuz davran da, resmi setiinizde, Davranlar panelinde gzkecektir. Bir davran silmeniz gerekirse, belge penceresinde davran ieren nesneyi ve Davranlar panelinde silmek istediiniz eylemi sein, sonra da Davranlar panelinin st ksmndaki eksi () iaretli dmeye tklayn. Bir davran, setikten sonra Backspace tuuna basarak da silebilirsiniz. Bir davran eklediinizde bu davrann ortaya kmas iin bir olayn meydana gelmesi gereklidir. rnein kullancnn imlecini bir resmin zerine gtrmesi yukarda anlattmz rollover ilemi iin gerekli bir olaydr. Bu tr olaylara bir tetikleyici olay yada tetik deriz. Rollover davrann eklediiniz resmi setiinizde Davranlar panelinde soldaki stunda bu ilemin gereklemesi iin gerekli tetikler grnmektedir. Rollover davran iin varsaylan tetik onMouseOver, yani farenin nesnenin zerine gitmesidir. Ancak isterseniz alan menden bu davran deitirebilirsiniz ve kendi almanza uygun baka bir tetik seebilirsiniz. Sayfanza bir davran eklediinizde bu davran ile ilgili javascript kodlar sayfanzn iine eklenir. Bylece amaladnz etkileim oluturulmu olur. Davranlar ekledikten sonra sayfanzn Kod grnmne dnerek davranlarla ilgili javascript kodlarn inceleyebilirsiniz.

Bir Durum ubuu Mesaj Oluturmak


Durum ubuu mesaj, kullanclara balantlarn onlar nereye gtrecei konusunda ek bilgi vermek iin kullanlabilir. Tarayc penceresinin alt ksmndaki durum ubuunda grnen bu mesaj, bal sayfaya giden URL ya da yolun yerini alr. Oluturacanz durum ubuu mesaj sadece sayfann Internet Explorer ya da Mozilla tarayclarda almas durumunda grnr. Bu mesajn grnmesi iin hangi nesneye bu etkileimi ekleyecekseniz o nesneyi semelisiniz (resim, link yada sayfann body etiketi). Daha sonra Davranlar penceresinden + iaretine tklayn ve Metni Ayarla > Durum ubuu Metni Ayarla seeneini sein. Alan iletiim kutusunun iine gzkmesini istediiniz mesaj yazdktan sonra tamam butonuna basarak pencereyi kapatabilirsiniz. Bylece sayfanz bu davran eklemi olursunuz.

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

87

Yeni Bir Tarayc Penceresi Amak


Sayfanz iinde en ok kullanabileceiniz davranlardan bir tanesi bir linke tkladnzda bu linkin ieriinin yeni bir pencerede almasn salamaktr. Bu yeni pencereyi reklamlar, terimler ya da baka bilgileri grntlemek iin kullanabilirsiniz. _blank hedefini standart bir balant ile birlikte kullanarak bir tarayc penceresi aabilirsiniz, ama bu yeni pencerenin niteliklerini hibir ekilde kontrol edemezsiniz. Dier yandan, Tarayc Penceresini A seenei, yeni tarayc penceresinin bykl ile birlikte kaydrma ubuklar ve men ubuklar gibi eitli niteliklerini kontrol etmenize imkn salar. Tarayc Penceresini A seeneini eklemek kolay olsa da, bunu bir Web sayfasnda kullanmadan nce iyi dnn. Ekstra bir pencerenin gerekli olduundan emin olun. Kullanclar Webde dolarken srekli olarak alan yeni pencerelerden genellikle rahatsz olurlar. Bunlar makul bir seviyede tutmak nemlidir. Yeni tarayc pencereleri olutururken ya da baka davranlar kullanrken, ziyaretilere sunduunuz geribildirim ya da etkileim seeneklerinin miktarn gz nnde bulundurmay unutmayn ve ok az (bu durumda kullancya yeterli bilgi sunulmaz) ve ok fazla (bu da genellikle zorlayc olabilir) arasnda gereken dengeyi kurun. Ziyaretilerin Web siteleriyle ve dier ortamlarla ilgili daha nceki deneyimlerini anlamanz, onlarn sitenizi ziyaret ettiklerinde ve sitenizle etkileime girdiklerinde karlaacaklar eyleri daha iyi belirlemenize yardmc olacaktr. Yeni bir davran eklemek iin Davranlar panelindeki art dmesine (+) tklayn ve ardndan alan listeden Tarayc Penceresini A sein.

88

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

Bu ilem sonrasnda yeni tarayc penceresi iletiim kutusu karnza kacaktr.

Gezinti ara ubuu: Aralarnda Back (Geri), Forward (leri), Home (Giri) ve Reload (Yenile) dmelerinin de bulunduu tarayc dmeleri. Konum ara ubuu: Aralarnda location (konum) alannn da bulunduu tarayc seenekleri. Durum ubuu: Tarayc penceresinin alt ksmnda bulunan ve mesajlarn (kalan ykleme sresi ve balantlarla ilikili URLler gibi) grntlendii alandr. Men ubuu: Tarayc penceresinin (sadece Windowsta) File (Dosya), Edit (Dzenle), View (Grnm), Go (Git) ve Help (Yardm) gibi menlerin grnd alandr. Kullanclarn yeni pencerede gezinti imknna sahip olmalarn istiyorsanz bu seenei ayarlamanz gerekir. Eer bu seenei ayarlamazsanz, kullanclar yeni pencerede sadece pencereyi kapatma ya da minimum boyuta getirme seeneklerine sahip olurlar.

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

89

Gerektiinde kaydrma ubuklarn grntle: eriin grnr alann dna tamas durumunda kaydrma ubuklarnn grntlenmesi gerektiini belirtir. Bu seenei ayarlamadnz takdirde, kaydrma ubuklar grntlenmeyebilir. Bunun yannda Yeniden Boyutlandrma Tutamalar seeneinin etkinlii de kaldrlrsa, ziyaretiler ieriin pencerenin orijinal boyutlarna smayan ksmn hibir ekilde gremeyebilir. Eer durum byleyse, pencerenin sayfann ieriine uygun olacak ekilde boyutlandrldndan emin olmanz gerekir. Pencerenin ok kk ya da ok byk olmas ve kaydrma ubuklarnn bulunmamas ziyaretiler asndan sinir bozucu bir durumdur. Baz Web tarayclar bu ayar (yeniden boyutlandrma tutamalar ayaryla birlikte) dikkate almaz ve gerektiinde kullanr. Yeniden boyutlandrma tutamalar: Kullanclarn pencerenin boyutlarn, pencerenin sa alt kesini srkleyerek ya da sa st kedeki Maximize (Ekran Kapla) dmesine (Windowsta) veya boyutlandrma kutusuna (Macintoshta) tklayarak deitirebilmeleri gerektiini belirtir. Bu seenei ayarlamadnz takdirde, boyut deitirme kontrolleri genellikle kullanlamaz durumda olur ve kullanc pencerenin boyutlarn deitiremez. Pencere ismi: Yeni pencerenin ismidir. Yeni pencereyi balantlar iin hedef olarak tanmlamak ya da JavaScript ile kontrol etmek istiyorsanz, bu pencereyi adlandrmanz gerekir.

Ajax Eklentileri
Dreamweaver yeni srm ile birlikte kolay Ajax uygulamalar gelitirebileceiniz Spry Framework zellii ile gelmektedir. Spry, Adobe tarafndan dnya zerinde en ok kullanlan Ajax yntemlerinin iinden zenle seilmi bir koleksiyondur. Dreamweaver iinde gelen Spry aslnda bir JavaScript ktphanesidir. Ayn davranlar gibi size birka admda kolay olarak sayfalarnza Ajax kontrolleri eklemenizi salarlar. Spry Akordeonu, Spry Sekmeli Paneller, Spry Daraltlabilir Panel Spry ktphanesi iinde veri ile alabileceiniz zellikler olduu gibi grsel eler de bulunmaktadr. Bu grsel elerden herhangi birini eklemek iin yapmanz gereken Ekle panelindeki Spry grubunu amaktr.

90

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

Spry sekmesinde eklemek Spry Akordeonu butonuna tklayn. Dier grsel elerin kullanm da benzer ekildedir.

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

91

Bu butona bastnzda sayfanzn iine bir akordeon men eklenecektir. Bu men ile sayfalarnz iinde snflandrmak istediiniz alanlar alr kapanr bir men eklinde kullanabilirsiniz. Sayfanz Dosya > Kaydet seenei ile kayt ettiinizde Dreamweaver size bu eklentiyi ilk kez kullandnzda ilgili Javascript dosyalarn kopyalamanz gerektiini syleyecektir.

Bu pencerede Tamam seeneini sein. Bu dosyalar SpryAssets klasr altna yerletirilecektir. Bu dosyalar SpryAssets klasr altna yerletirilecektir. Sitenizi sunucunuza atarken, bu dosyalar atmay unutmayn.

92

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

Yukardaki resimde akordeon kontrol eklediinizde sayfann ieriini grmektesiniz. Yeni blmler eklemek iin Paneller balnn yanndaki + iaretine tklayabilir var olan bir blm silmek iin iaretine tklayabilirsiniz. Yukar ya da aa oklar ile blmlerin srasn deitirebilirsiniz. F12ye basarak dosyanz varsaylan taraycnzda nizleyebilirsiniz. Dier Spry grsel panelleri de ayn zelliklere sahiptir.

Blm 7 oklu Ortam Bileenlerini Kullanmak, Kullanc Etkileimi ve Ajax Bileenleri

93

BLM

Formlarla almak
Formun Oluturulmas Form eriini Gruplamak Tek Satrl Metin Alanlar Eklemek Radyo Dmeleri Eklemek Onay Kutular Eklemek Liste ve Men eleri Eklemek ok Satrl Metin Alanlar Eklemek Buton Eklemek Gizli Alanlar Oluturmak

Blm 8 Formlarla almak

95

imi zaman Web sitenizi ziyaret eden insanlardan bilgi almanz gerekebilir. Bu bilgiler iinde insanlarn siteyle ilgili dnceleri, kullanc kayt verileri, anket cevaplar ve rn satn alma bilgileri (e-ticaret) saylabilir. Farkl tipte bilgiler toplamaktan ziyaretilerin siteyle etkileime girmesini salamaya kadar pek ok ileve sahip olan formlar, veri elde etmenizi salayan kullanc arabirimleridir. Formlarla ziyaretilerinizden belirli konularla ilgili bilgi alabilir ya da onlara geribildirim, soru ya da istek gnderme imkn tanyabilirsiniz. Ziyareti kayt ilemleri ve rn siparileri genellikle formlarla salanan bir ilevsellii gerektirir. Formlar veritabanlaryla ska kullanlr ve ziyaretilerin arama yapmalarn ve bir veritabanna dahil edilecek bilgileri gndermelerini salayabilir. Formlar alan (field) ad verilen ve ziyaretinin bilgi girdii baz bileenler ierir. Bu alanlarn arasnda metin alanlarn, radyo dmelerini, onay kutularn, menleri ya da listeleri sayabiliriz. Form verileri genellikle bir sunucu zerinde yer alan bir veritabanna, bir e-posta adresine ya da kendilerini ileyecek bir uygulamaya gnderilir. Formlarn ilenmesi, dinamik sayfalarn (bu sayfalar veritabanlar gibi dinamik ierik kaynaklarna erimek iin PHP, JSP, ColdFusion vb dilleri kullanrlar) ya da CGI (Common Gateway Interface) scriptlerinin kullanmyla gerekletirilir. CGI, formdaki verilerle sunucu arasnda iletiim balants olarak grev yapan standart bir protokoldr. Bu blmdeki konularn iinde veritaban yada bir sunucu ile iletiim olmadndan, sunucu eriimine ihtiya duymayacaksnz

Formun Oluturulmas
Bir sayfaya alanlar ve dmeler gibi elemanlar eklemeden nce bu elemanlar ierecek olan formu oluturmak gerekir. Form; alanlar, dmeler, menler ve ziyaretilerin bilgi girmek ya da seim yapmak iin kulland dier nesneler iin bir tayc grevi stlenir. Formlar ayrca gnderildiklerinde verilere ne olacan belirler. Form nesnelerinin alabilmesi iin mutlaka bir form ile evreli olmalar gereklidir. Bunun iin sayfanza ilk olarak form etiketini yada evreleyicisini eklemelisiniz. Sayfanzn iinde formunuzu ekleyeceiniz noktay sein. Form etiketleri blok elemanlar olduundan iinde bulunduklar erevenin (Bir tablo hcresi yada bir div etiketi veya sayfann tamam) tamamn doldururlar. Bu nedenle bir formu baka bir nesne ile yan yana koymak istiyorsanz iki nesneyi de bir evreleyicinin (tablo yada div etiketi) iine koymalsnz. Ekleme noktanza imlecinizi koyduktan sonra Ekle panelinin Formlar kategorisindeki Form dmesine tklayn.

96

Blm 8 Formlarla almak

Bu dme en soldaki dmedir. Bylece bir formu sayfanzn iine eklemi oldunuz. Bu eklediiniz sadece formun genel erevesidir. inde herhangi bir form eleman barndrmamaktadr.

Blm 8 Formlarla almak

97

Form tarafndan kaplanan alan, belge penceresinde krmz noktal izgilerle gsterilir. Bu alan kodda <form> ve </form> etiketleriyle tanmlanr. Sz konusu krmz izgiler sadece Dreamweaverda grntlenen grnmez elemanlardr. Sayfay bir Web taraycsnda atnzda form alann gsteren herhangi bir iaret gremezsiniz. Ayrca bu krmz izgileri tutup srkleyemezsiniz. Eer grnmez elemanlar etkin deilse bir mesaj kutusu belirecek ve formu gremeyeceinizi belirtecektir. OK dmesine tklayarak mesaj kutusunu kapatn ve Grnm > Grsel Yardmclar > Grnmez eler komutunu seerek formun krmz noktal snrlarn grntleyin. Eer grnmez elemanlar etkin durumdaysa bu uyar mesajn grmezsiniz. Dreamweavern Tercihler iletiim kutusunda yer alan Grnmez eler kategorisindeki Form Ayrc seeneinin de iaretli olmas gerekir. Bu seenek varsaylan durumda iaretlidir. Bir sayfaya birden fazla form yerletirebilirsiniz. Ancak HTMLde bir formu dier bir formun iine yerletiremezsiniz. Bu kstlamadan dolay Dreamweaver formlarn yanllkla i ie yerletirilmesini engeller. Bunu da bir formun dier formun iine yerletirilmesini imknsz klarak gerekletirir. Form ekleme seenei iptal edilmez, ama bir formu dier bir formun iine yerletirmeye kalktnzda bu ilem gereklemez. Form etiketlerinin baka bir forma elle eklenmesi durumunda Dreamweaver hatal etiketleri vurgulayarak dikkatinizi hatann bulunduu konuma eker. Eklemi olduunuz bir form erevesini ya da etiketini setiinizde zellikler denetisinde bu formun zellikleri gzkr.

Bu pencere iindeki form1 yerinde formunuzun ismini yazabilirsiniz. Eylem alan, formunuzun altndaki gnder butonuna (henz nasl ekleneceini sylemedik) basldnda sayfann hangi sayfaya ynleneceini sylediimiz yerdir. Bu alana genelde formunuzu ileyecek ve sunucu ile balantl bir dinamik sayfann adresini girersiniz. Ancak statik bir sayfa yaptnzda ve bir sunucu ile iletiiminiz yoksa buraya mailto:birisi@example.com gibi bir eposta adresi girerseniz, form ierikleri ziyaretinin bilgisayarndaki varsaylan eposta istemcisi aracl (Outlook, Outlook Express, Thunderbird, vb) ile gsterdiiniz eposta adresine gnderilir. Dreamweaver formlar iin genel tipte isimler oluturur. Siz her form oluturduunuzda bu formlarn isimleri saysal olarak otomatik bir ekilde artar (form1, form2, vb). Btn form isimlerinin benzersiz olmas ve ayrca zel karakter iermemesi gerekir. Form isimleri nemli tanmlayclardr (identifier); zellikle de bir sayfada birden fazla form varsa veya form araclyla istenen ya da toplanan bilgileri ieren bir veritaban kullanyorsanz. Form isimleri ayrca, JavaScript gibi script dilleri araclyla formlar kontrol etmek iin de kullanlr. Tablo, formun yerleim dzenini gelitirir. Tablo kullanmak, etiketlemek zere metin ya da resimlerin form alanlaryla hizalanmasn kolaylatrr. Bir formun iine bir tablo ya da bir tablonun iine bir form yerletirebilirsiniz. Ama burada sz konusu tablo, formu tamamen kapsamal ya da form tarafndan tamamen kapsanmaldr.

98

Blm 8 Formlarla almak

Form eriini Gruplamak


Formunuzun ieriini oluturmaya balamadan nce biraz zaman ayrarak ieriin ayrntl bir taslan oluturmanz gerekir. Ziyaretilerden isteyeceiniz bilgilerin bir taslan oluturduktan sonra bu bilgileri ierik benzerliini temel alarak mantksal gruplara ayrabilirsiniz. Formunuzun blmlerini belirledikten sonra formun iinde bu blmleri oluturmak iin alan kmelerini (fieldsets) kullanmaya hazrsnz demektir. Alan kmeleri, bir form iinde ayr ayr ierik blmleri oluturmak iin kullanlan form elemanlardr. Formunuzun ieriini kk ve bamsz blmler halinde grupladnzda ziyaretilerin formu anlamas ve doldurmas daha kolay olur. Bylece ziyaretileriniz formun genel yapsn hemen kavrayabilirler. Formunuzun iine grup eklemek iin imlecinizi eklemek istediiniz noktaya tklatn ve Formlar kategorisi altndan Alan Kmesini sein.

Fieldset iletiim kutusu alacaktr. ine balnz yazn ve Tamam tuuna basn. Bir alan kmesi, kullanabilecei btn alan kaplayacak kadar geniler. Formlarda olduu gibi alan kmesini bir tabloya veya bir tabloyu bir alan kmesine yerletirmek mmkndr. Ama tablo alan kmesini tamamen kapsamal ya da alan kmesi tarafndan tamamen kapsanmaldr. Vermi olduunuz alan bal form iinde gzkecek ve kullanclarnzn formunuzu kolay anlamas iin kullanlacaktr. Bu nedenle alanlarnza aklayc balklar verin.

Blm 8 Formlarla almak

99

Tek Satrl Metin Alanlar Eklemek


Metin alanlar, ziyaretinin yazarak girebilecei bilgileri toplamak iin kullanlr. Ksa, zl cevaplar (bir szck ya da szck grubu gibi) iin tek satrl metin alanlar kullanlr. Normalde kullanlan tek satrl metin alanlar; ziyaretinin isim, ksa adres ve e-posta gibi bilgilerini girmesi iin kullanlr. Bu metin alanlar ayrca temel arama ilemleri iin de kullanlr. Burada ziyareti, ilgili alana istenen bilgiyi tanmlayan szckleri girer. Btn form alanlarn ve dmeleri krmz noktal izgilerin iine yerletirmeniz gerekir, aksi takdirde bunlar formun bir paras olmaz. Form alanlarn krmz izgilerin dna yerletirmeye kalkarsanz Dreamweaver size bu alan kapsayan bir form alan oluturup oluturmak istemediinizi sorar. Hayr derseniz ilgili alan ya da dmeler herhangi bir formun bir paras olarak ilev grmez. Formunuza tek satrl bir metin alan eklemek iin Formlar panelinden metin alan seenei sein.

Herhangi bir form nesnesi eklediinizde Eriilebilirlik zellikleri penceresi alabilir. Bu pencere formlarnzn eriilebilir olmas iin kullanabileceiniz zellikleri barndrr.

100

Blm 8 Formlarla almak

Bu pencerede ilgili alanlar doldurabilir yada ptal seeneine tklayarak devam edebilirsiniz. Eer Dreamweaver Girdi Etiketi Eriebilirlik Nitelikleri iletiim kutusunu otomatik olarak amazsa, form nesneleri iin eriilebilirlik zelliklerini etkinletirmeniz gerekebilir. Bunun iin Dzen > Tercihler komutunu sein. Eriebilirlik kategorisine gein ve Form nesneleri onay kutusunu iaretleyin.

Blm 8 Formlarla almak

101

Sonra da Tamam dmesine tklayn. Eer her seferinde bu iletiim kutusu ile uramak istemiyorsanz bu zellii kapatmak iin bu sefer ilgili alanlardaki iareti kaldrmanz yeterli olacaktr. Formunuza tek satrl metin alann ekledikten sonra ona ait zellikleri deitirebilirsiniz. Bunu yapabilmek iin metin kutusuna tkladktan sonra zellikler penceresi iinde zelliklerini belirleyin.

En soldaki kutucuk iinde yer alan textfield kelimesi yerine bu alan form iinde esiz (tekil) olarak niteleyecek bir ismi zel karakterler olmadan ve Trke karakterleri() kullanmadan yazn. Karakter alan bu metin kutusunun ayn anda ka karakteri gsterebileceini ayarladnz seenektir. Maks kar, bu metin kutusunun iinde en fazla ka karakter barndrabileceini belirttiiniz alandr. Bu alandaki rakam ile karakter alanndaki rakamlar birbirinden farkl olabilir. rnein bir metin kutusu ayn anda 10 karakter gsterebilirken, iinde en fazla 20 karakter bulundurabilir. Bu durumda bu alan dolduran ziyaretiler yazmaya devam ederken yazlar sola doru kayacaktr. Yazm seenei bu alann tek satrl m yoksa ok satrl m olacan setiiniz alandr. Burada ayn zamanda bu alan bir ifre alan olarak da gsterebileceiniz bir seenek bulunmaktadr. ifre seeneini seerseniz metin alannn iine yazlan yazlarn yerinde noktalar gzkecektir. Balang deeri, seenei ile bu alann, sayfa ilk yklendiinde hangi metinle dolacan seebilirsiniz.

Radyo Dmeleri Eklemek


Radyo dmelerini (radio buttons) kullanclarn bir dizi seenek arasndan sadece birini semesini istediiniz durumlarda kullanrsnz. Bir seenei iaretlediinizde dier seenekler otomatik olarak geersiz klnr. Radyo dmeleri genellikle kredi kart seimi ve Evet ya da Hayr eklinde cevaplanan sorular iin kullanlr. Bir radyo grubu eklemek iin Formlar panelinde Radyo Grubu butonuna tklayn. Radyo Grubu iletiim kutusu alacaktr. Bu penceredeki etiket alanlar sayfa iinde ziyaretilerin grecei deerleri, Deer alan ise sayfa ile gnderilecek deerleri gstermektedir. Eer bu grubun satr atlatlarak sralanmasn istiyorsanz, satr kesmelerini, tablo ile gsterilmesini istiyorsanz Tablo seeneini semelisiniz.

102

Blm 8 Formlarla almak

Varsaylan durumda her grup (Radyo Grubu) en az iki radyo dmesi ierir. stediiniz kadar radyo dmesi ekleyebilir, silebilirsiniz. Girileri seip ok tularnn yardmyla listede yukarya ya da aaya doru tayarak girilerin sralamasn da deitirebilirsiniz. Bir form gnderildiinde buradaki deerler, sunucuda formu ileyen scripte gnderilir. Ziyaretinin hangi seenei iaretlediini anlayabilmek iin her bir radyo dmesine farkl bir deer verdiinizden emin olun.

Onay Kutular Eklemek


Onay kutular (checkboxes), ziyaretilerin birbiriyle alkal bir grup e arasndan bir ya da birden fazla e semesini salar. Ziyaretinin istedii sayda seenei iaretleyebilmesine izin vermek istediiniz yerlerde genellikle onay kutularn kullanrsnz.

Blm 8 Formlarla almak

103

Eer ziyaretinin sadece tek bir seenek iaretlemesini istiyorsanz, bundan sonraki uygulamada olduu gibi radyo dmelerinden faydalanrsnz. Onay kutusu eklemek iin Ekle ara ubuunun Formlar kategorisinde yer alan Onay kutusu dmesine tklayn.

Liste ve Men eleri Eklemek


Kaydrlabilir bir liste (scrolling list) ya da men oluturarak ziyaretilerin buradaki elerin arasndan seim yapmasn salayabilirsiniz. Kaydrlabilir bir listeyle ziyaretilerinize birden fazla bitiik ya da bitiik olmayan eyi seme imkn tanyabilirsiniz. Menlerde ziyaretiler tek bir seim yapabilir. Bunlarn her ikisinde de, ziyaretinin setii eler vurgulu hale gelir. Liste veya men eleri eklemek iin Ekle ara ubuunun Formlar kategorisinde yer alan List/Menu dmesine tklayn.

104

Blm 8 Formlarla almak

Eklediiniz form nesnesine tkladnzda karnza bununla ilgili zellikler denetisi kacaktr.

Tr alannda bu form elemannn Men m Liste mi olacan seebilirsiniz. Liste olan nesneler ayn anda birden fazla ierii gsterebilirler ve bunlarn iinden birden fazlas ayn anda seilebilir. Ykseklik deeri eer tr olarak Listeyi seerseniz aktif olacaktr. okluya izin ver seenei de yine eer tr olarak Listeyi seerseniz aktif olacaktr. Liste deerleri butonu ile bu listenin iini dolduracak deerleri seebilirsiniz. Balangta seili seenei ile sayfanz yklendiinde formunuzun iinde balang olarak hangi deerin seili olduunu ayarlayabilirsiniz

ok Satrl Metin Alanlar Eklemek


Ziyaretilerin metin girebilecei birden fazla satra sahip metin alanlar araclyla ziyaretilerinizden daha byk miktarda bilgi alabilirsiniz. ok satrl metin alanlar genelde ziyaretilerden yorum ve geribildirim almak iin kullanlr. ok satrl bir metin alann Ekle > Form > Metin Blgesi komutunu seerek de ekleyebilirsiniz.

Blm 8 Formlarla almak

105

ok satrl metin alanlar ile tek satrl metin olanlarnn zellikleri birbirine benzemektedir. ok satrl metin alanlarnda ek olarak Sar(wrap) seenei ve satr says seenei bulunmaktadr. Sar (wrap) mensndeki seenekler unlardr: Varsaylan(Default), Kapal(off), Sanal(virtual) ve Fiziksel(physical). Varsaylan seenei, taraycnn varsaylan ayarn kullanr. Yazm alannda ok Satrly iaretlediinizde otomatik olarak bu seenek ayarlanr. Kapal seenei, metnin blnerek bir sonraki satra gemesini engeller. Metin, siz Return ya da Enter tuuna basana kadar ayn satrda devam eder. Ziyareti yazarken metin grnebilir alann snrn atnda sola doru kayar. Sanal seenei, metni blerek bir sonraki satrdan devam etmesini salar. Ama szck sarma zellii, form gnderildii zaman verilere uygulanmaz. Fiziksel seenei, metni blerek bir sonraki satrdan devam etmesini salar ve szck sarma zellii, form gnderildiinde verilere uygulanr.

Buton Eklemek
Formlarda, biri form verisini gndermek (Gnder-Submit), dieri de formu temizlemek (TemizleReset) iin olmak zere genellikle iki dme kullanlr. Gnder(Submit) dmesi Web taraycsna veriyi gndermesi gerektiini bildirir. Temizle(Reset) dmesi ise sayfadaki alanlarda bulunan btn bilgileri siler. Temel arama ilevi iin oluturulan bir formda genellikle sadece tek bir Gnder(Submit) dmesi bulunur. Bu da ounlukla Ara ya da Git eklinde adlandrlr. Sayfanza bir buton eklemek iin yapmanz gereken imlecinizi formunuzun iinde uygun bir yere koyduktan sonra, formlar sekmesinden buton elemann eklemektir. Butonun ilev zelliklerini deitirebilirsiniz. Bir butonun Gnderme, silme yada grevsiz zelliinde olmasn ve iinde yazacak olan balk yazsn zellikler denetisinden ayarlayabilirsiniz.

106

Blm 8 Formlarla almak

Gizli Alanlar Oluturmak


Kimi zaman formunuza, ziyaretiler tarafndan grlmeyen ya da ziyareti tarafndan doldurulacak baz bilgileri dahil etmeniz gerekebilir.

Byle durumlarda Web taraycsnda grntlenmeyen gizli alanlardan faydalanabilirsiniz. Gizli alanlar (hidden fields) genellikle, formun ilenmesi iin (isim, sipari numaras ya da satlan rnle ilgili baka bir bilgi almak, form bir e-posta adresine gnderilecekse bir e-posta adresi ve konu bal eklemek, formu doldurduktan sonra ziyaretilerinizi ynlendirmek istediiniz bir sayfann URLsini dahil etmek, bilgileri bir formdan baka bir forma aktarmak ya da belirli alanlarn ziyareti tarafndan doldurulmasn salamak iin) belirli bilgiler gerektiinde sunucu tarafl scriptlerle birlikte kullanlr. Byle durumlarda gizli alanlarn ilenebilmesi iin sunucu tarafl scriptler (server side scripting) gerekir. Sunucu tarafl scriptlerin gerekmedii ya da kullanlamad durumlarda gizli alanlarla birlikte JavaScript de (istemci tarafl script olarak da bilinir) kullanlabilir. stemci tarafl script (client side scripting) kullanmnda scriptleri ziyaretinin Web taraycs (istemci) iler. Gizli alan eklemek iin Formlar sekmesinden gizli alan butonuna basmalsnz.

Blm 8 Formlarla almak

107

BLM

ablonlar
ablon Oluturmak Bir ablona Dzenlenebilir Alanlar Eklemek Belirli Bir ablonu Temel Alan Sayfalar Hazrlamak ablonda Deiiklik Yapmak

Blm 9 ablonlar

109

ablon (template), dier belgeleri oluturmak iin temel olarak kullanabileceiniz bir belgedir. ablon kullanlarak oluturulan her belge, bu ablonla ayn yerleim dzenini ve yapy kullanr. Bir ablon oluturulurken, bu ablonu temel alan belgelerde dzenlenebilir durumda olmas gereken alanlarn gsterilmesi gerekir. ablonun dier ksmlar kilitli durumdadr ve ebeveyn ablon tarafndan kontrol edilir. ablonlar, birden fazla sayfann yapsn ve ieriini gncellemek iin kullanlabilecek hzl bir yol sunmalar asndan ktphane elerine benzer. ster pek ok blmden oluan byk bir Web siteniz, ister ortak bir tasarm kullanan birden fazla sayfanz olsun, bir ablon oluturarak prodksiyon srecini hzlandrabilirsiniz. Bir ablon kullanrsanz, birka dakika iinde birden fazla sayfada deiiklik yaparak sitenizin grnmn deitirebilir ya da gncelleyebilirsiniz. Sitenin belirli bir blmn hazrlayan bir ekiple altnz durumlarda ablonlar ok faydal olur. Web tasarmcs bir ablon oluturabilir ve sayfann dzenlenebilecek olan ksmlarna yer tutucular ekleyebilir. Sayfann genel tasarm kilitli durumda kalr. Ekip yeleri, bir ablonu temel alp Adobe Dreamweaver ya da Adobe Contribute kullanarak sayfalar hazrlayabilir ve dzenleyebilirler. (Adobe Contribute, Web sitelerini oluturma konusunda ok az deneyime sahip olan ya da hi deneyimli olmayan ierik editrleri gibi teknik konularla ilgilenmeyen kullanclara ynelik bir programdr.) ablonlarn avantajlar iki durumda net olarak ortaya kar: Bir blm ya da sayfa grubunda ayn tasarmn ve yerleim dzeninin kullanlmas gereken durumlarda ya da sayfann grnmnn tasarmc tarafndan oluturulduu, ama sayfa ieriklerinin ierik editrleri tarafndan eklendii durumlarda.

ablon Oluturmak
ablonlar, sayfalarn yerleim dzenini ve tasarmn tanmlar. Bir ablon olutururken uygulamanz gereken ilk adm, genellikle sayfa tasarmnn hazrlanmasn ierir. ablonlarla tasarm yaparken ncelikli olarak bo bir HTML sayfas oluturmal ve bu sayfay ablon olarak kayt etmelisiniz (Dosya > ablon Olarak Kayt Et). Bu seenekten sonra karnza kan iletiim kutusundan ablonu kaydetmek istediiniz siteyi seebilirsiniz. Dreamweaver otomatik olarak ablona bir isim verecektir. Siz isterseniz bunu deitirebilirsiniz. ablonun ismini deitirmek istiyorsanz, yeni ismi Save As (Farkl Kaydet) metin alanna yazn. ablonun ismi sadece ekibiniz ve sizin iin bir referans niteliindedir. Bu ismi sitenizin ziyaretileri grmeyecektir. ablonlarnz iin mmkn olduu kadar aklayc isimler kullanmaya gayret edin. Kaydet dmesine tklayarak iletiim kutusunu kapatn. Dreamweaver Balantlar Gncelleyeyim mi? diye soran bir uyar kutusu grntlediinde Evet dmesine tklayn. Balantlarn gncellenmesi, Dreamweavern balantlara ve resimlere giden yollar doru olarak muhafaza etmesini salayacaktr. Artk ablonunuz sitenize eklendi ve .dwt uzantsyla Templates klasrne kaydedildi. Templates adnda bir klasr mevcut deilse, Dreamweaver bu klasr otomatik olarak ekler. Templates klasrn grmek iin, Dosyalar panelindeki Yenile (Refresh) dmesine tklamanz gerekebilir. Bu dosyay bir sonraki uygulamada kullanmak zere ak brakn.

Bir ablona Dzenlenebilir Alanlar Eklemek

110

Blm 9 ablonlar

Bir ablonun oluturulmasnda ikinci adm, bu ablon temel alnarak oluturulan belgelerde dzenlenebilir durumda olmas gereken alanlar tanmlamaktr. (Dzenlenebilir alanlar, belgenin ablon temel alnarak oluturulan sayfalardaki deitirilebilen blmleridir.) Kural olarak, bir ablondaki btn alanlar balangta kilitli durumdadr. ablonu kullanan sayfalardaki bilgileri deitirmek istiyorsanz, dzenlenebilir alanlar ya da blgeler oluturmanz gerekir. Birok Web sitesinde, bu blgeler genellikle ierik alanlardr. ablonda aka dzenlenebilir olarak tanmlanmayan her ey, ablonu temel alan sayfalarda kilitli durumdadr. Orijinal ablonu dzenlerken hem dzenleyebilir, hem de kilitli alanlarda deiiklik yapabilirsiniz; ama ablon kullanlarak hazrlanm olan bir sayfada sadece dzenlenebilir blgelerde deiiklik yapabilirsiniz. Bir ablona dzenlenebilir alan eklemek iin ablon iinde ierik gelitiriciler tarafndan dzenlenebilir alana imlecinizle tklamanz yada bu bir tablo yada hcre ise bu nesneyi semeniz gereklidir. Bu seimi yaptnz alan dzenelenebilir alan olarak atandnda ablondaki deiikliklerden etkilenmeyecektir. Sadece bu alann dndaki blgeler orijinal ablon deitiinde deiecektir. stediiniz alan setikten sonra yapmanz gereken Ortak sekmesinden ablonlar butonu altndaki Dzenlenebilir Blge butonuna basmaktr.

Bylece imlecinizin bulunduu yer yada tablo artk dzenlenebilir bir alan olarak kullanlacaktr. Dzenlenebilir alanlarnza anlaml bir isim verirseniz sonraki aamalarnzda iiniz kolay olacaktr. Dzenlenebilir alan balklar grnmez nesnelerdir yani ziyaretiler tarafndan grnmezler.

Blm 9 ablonlar

111

Belirli Bir ablonu Temel Alan Sayfalar Hazrlamak


ablonlarn kullanld bir site oluturma srecinde bir sonraki adm, orijinal ablonu temel alan sayfalar oluturmaktr. Bu uygulamada, bu dersin daha nceki uygulamalarnda oluturduunuz teacher ablonunu kullanan yeni sayfalar oluturacaksnz. Orijinal ablonun ierii bu sayfalarda da yer alacaktr. Bu yeni sayfalarda sadece ablonda dzenlenebilir olarak tanmladnz ksmlar deitirebilirsiniz. Dosya > Yeni komutunu sein. Bu pencerede yer alan ablondan Sayfa sekmesine tklayn. rnek olarak tanmladmz Kitap Evi sitesi, seili site iin oluturduunuz rnek dier ablonu ve ablonun kendisi grnecektir. ablonu sein ve Olutur butonuna tklayn. Yeni sayfada, kilitli blgelere ait vurgu renginin (varsaylan renk ak sardr) sayfay evrelediini greceksiniz. Ayrca, belge penceresinin sa st kesinde ayn renkteki bir sekmede ablonun ismini de greceksiniz. zerine getirdiinizde ya da kilitli blgelerden birine tklamay denediinizde, imle, ortasndan izgi geen bir daireye dnr. Bu da sz konusu alanlarn dzenlenemeyeceini gsterir. Bazen metnin biimlendirilmesi tablonun genilemesine neden olur. Stili daha kk boyutlu metinler kullanan bir stille deitirirseniz, normal bir belgede yaptnz gibi tablonun dna tklayp tabloyu tekrar klterek uygun bykle getirmeniz mmkn olmaz. Bu belge bir ablon kullanlarak oluturulduundan, tablolarn byklk asndan ieriklerine uygun ekilde ayarlanabilmesi iin dosyay kapatp yeniden amanz gerekir. Yeni bir stil oluturmadan bu belgedeki metnin bykln deitiremezsiniz, nk metni tanmlayan dahili stil sayfas dzenlenebilir durumda deildir.

ablonda Deiiklik Yapmak


Bir ablon yardmyla, bu orijinal ablonun tasarmn kullanan sayfalar ok kolay bir ekilde hazrlayabilirsiniz. Sayfay oluturan kii sayfadan sayfaya farkllk gsterecek olan ierii ekleyebilir, fakat kilitli alanlarn hibirinde deiiklik yapamaz. ablon kullanlarak hazrlanan sayfalarn hepsinde deiiklik yapmanz gereken durumlarda, ablonlar size ciddi lde zaman kazandrr. ablon kullanmyorsanz, her bir sayfay tek tek dzenlemeniz gerekir. ablon kullandnzda ise, ablondan oluturulmu btn sayfalar gncellemek iin sadece orijinal ablon dosyasn dzenlemeniz yeterlidir. ablonlardan oluturduunuz sayfalarda kilitli alanlar deitiremezsiniz. Bunun iin bu deiikliklerinizi ablon iinde yapmalsnz. ablon dosyanz templates klasr iinde bulup Dreamweaverda an. Alm olan dosya zerinde gerekli deiiklikleri yaptktan sonra onu tekrar Dosya > Kaydet seenei ile kayt edin. Bu ilemden sonra Dreamweaver size bu ablona bal dosyalarn olduunu yaptnz deiikliin onlara da etki edip etmesini istemediinizi soracaktr. Bu durumda uygula derseniz ablondan oluturulmu tm dosyalara bu deiiklikler uygulanacaktr. Eer ptal seeneini seerseniz o zaman bu deiiklikler uygulanmadan atlanacaktr. Bu durumda ablonunuzla, bu ablondan oluturduunuz sayfalar arasnda uyumsuzluk oluacaktr.

BLM

10

Siteyi Ynetmek
Dosyalar Panelini Kullanmak

Blm 10 Siteyi Ynetmek

113

ir Web sitesi gelitirme sreci genellikle planlama amasyla balar. Bu aamada siteyle ilgili genel fikri oluturur, site dosyalarn ve gezinti yapsn hazrlar, ierii toplar, ayrca sitenin grnmn ve ziyaretiler zerinde nasl bir etki yaratmak istediinizi tasarlarsnz. Bu hazrlk admlar genellikle Dreamweaverda almaya balamadan nce gerekleir. Planlama aamasn retim aamas takip eder. Web gelitirme srecinin hayat bileenlerinden biri olan site ynetimi, bir sitenin srekli olarak kullanlabilmesi asndan ok nemlidir. Dreamweaver, yerel kk klasrnzde ve uzak sunucuda bulunan site dosyalarnn devamlln salayarak Web sitenizi kolayca gncellemenizi ve kontrol etmenizi salayan pek ok ynetim arac sunar. Dreamweaver, dosyalarnz izlemek iin site tanmlarn kullanr ve burada devamllk salama ilemlerini (dosyalarn ve klasrlerin tanmas, eklenmesi, silinmesi gibi) gerekletirmek zere site aralarn kullandnzda gncellemelerin otomatik olarak yaplmasn salar. Bir ekibin i akn ynetmek, ekip almasn ve ibirlii abalarn koordine etmeye ynelik eitli aralarla gerekletirilebilir. Dreamweaver araclyla birden fazla Web sitesini ynetebilir, site ayarlarn ieriye ve darya aktarabilir, hatta site hazrlamak zorunda kalmadan sunucularla balant kurarak hzl aktarma ilemleri gerekletirebilirsiniz.

Dosyalar Panelini Kullanmak


Dosyalar paneli (sitenizin dosya ve klasr yapsn gsterir), kenetlenmi bir panel olarak ya da geniletilmi modda daha byk bir pencere olarak grntlenebilir. Dosyalar panelini dosya ve klasrlerin eklenmesi, silinmesi, yeniden adlandrlmas ve tanmas gibi eitli devamllk salama ilemlerini gerekletirmek iin daraltlm ya da geniletilmi grnmde kullanabilirsiniz. Devamllk salamayla ilgili btn ilemleri Dreamweaver iinde gerekletirerek gerektiinde balantlar, resimler ve dier elemanlara ait yollarn otomatik olarak gncellenmesini salarsnz. Dreamweaver, yaptnz deiiklikleri izler ve tanmlanm bir sitede yaplan btn deiiklikleri temel alarak dosyalarnz gnceller. Dosya ya da klasr deiikliklerini Finder (Macintoshta), Bilgisayarm (Windowsta) veya Windows Explorer File Managerda (Windowsta) yaparsanz, Dreamweavern dosya bilgilerini gncellemek iin Yenile (Refresh) dmesini kullanmadnz takdirde Dreamweaver bu deiiklikleri tanmaz ve yollar doru ekilde takip edemez. Varsaylan durumda Dosyalar paneline balangta daraltlm grnmde eriebilirsiniz. Bu moddayken panel Dosyalar panel grubunda Varlklar paneline kenetlenmi durumdadr ve sadece yerel dosyalar grnr. Dosyalar paneli bir ara ubuuyla birlikte site devamlln salama ilevlerine sahip pek ok balam mens seenei ierir. Gster mens, tanmladnz herhangi bir siteye ya da bilgisayarnza gemenizi salar. Panelin st ksmnda yer alan Grnm mensn kullanarak Yerel Grnm, Uzak Grnm, Test Sunucusu ve Elem Grnm seenekleri arasnda gei yapabilirsiniz.

114

Blm 10 Siteyi Ynetmek

Yerel dosyalarnz Dosyalar panelinin sadaki blmesinde (Yerel Grnm) yer alr. Dosyalar panelini genilettikten sonra Geniletme/Toparlama dmesine tklayarak tekrar Dosyalar panel grubu haline getirebilirsiniz.

Blm 10 Siteyi Ynetmek

115

Bu aamada Dosyalar panel penceresinin sol blmesinde (Uzak Grnm) bir Yardm metni grntlenecektir. Bu metinde Web sunucunuzdaki mevcut dosyalar grebilmek iin bir uzak site tanmlamanz gerektii belirtilir. Blmelerin bykln, onlar ayran ubuu srkleyerek ayarlayabilirsiniz. Dosyalar panelindeki temel aralar, Dosyalar ara ubuu zerinde yer alr. Gster mens, tanmladnz btn siteleri grntler ve bilgisayarnzdaki dier dosyalara erime ve uzak sitelere hzl bir ekilde balanma imkn salar. Belirli bir siteyi amak iin menden ilgili siteyi semeniz yeterlidir. Uzak ana bilgisayara balanma dmesi, uzak siteye balanmanz ya da bu balanty kesmenizi salar. Henz bir uzak site tanmlamadnz iin bu dmeye tkladnzda Site Tanmlamas iletiim kutusu alr. Varsaylan durumda Dreamweaver bir uzak FTP sitesiyle kurulan balanty, 30 dakikadan fazla bo kalma durumunda keser. Yenile dmesi, beklediiniz eyi yapar. Yani yerel ve uzak dizin listelerini tazeler. Dosya listelerinde yaplan btn deiiklikler Yenile dmesine tklandktan sonra grntlenir. dmeden oluan grup, farkl grnm seenei sunar: Site Dosyalar, Test Sunucusu ve Site Elemi. Etkin grnm vurgulanr. Burada varsaylan grnm seenei Site Dosyalardr. Dosyalar Al dmesi, seili dosyay ya da dosyalar uzak siteden yerel klasrnze kopyalar. Bunu yaparken mevcut yerel kopyalar siler. Dosyalar Koy dmesi, seili dosyay ya da dosyalar yerel klasrden uzak siteye kopyalar. Bunu yaparken mevcut uzak kopyalar siler. Dosyalar Teslim Al dmesi, seili dosyay ya da dosyalar uzak sunucudan yerel klasrnze kopyalar. Bunu yaparken mevcut kopyalar siler. Dosya daha sonra sunucuda alnd (checked out) eklinde iaretlenir. Teslim Al/Teslim Et zellii Web sitesinde bir ekiple ibirlii iinde alrken ok faydal bir aratr. Bir dosyann bu ekilde iaretlenmesi durumunda Dreamweaver hi kimsenin bu dosyay dzenlemesine izin vermez. Teslim Al dmesi seili dosyay ya da dosyalar yerel klasrden uzak sunucuya kopyalar. Bunu yaparken mevcut uzak kopyalar siler. Uzak sunucudaki dosya dier elemanlar tarafndan dzenlenebilir. Dosyann yerel klasrnzde (genellikle bilgisayarnzda) bulunan kopyas salt okunur hale gelir ve siz onu almadka (Teslim Et) dzenlenemez. Senkronize Et seenei dosyalar yerel ve uzak klasr arasnda senkronize hale getirir. Men seenekleri olan Dosya, Dzen, Grnm ve Site, geniletilmi Dosyalar panelinin sa st kesindeki balam mensnde (Macintoshta) veya geniletilmi Dosyalar panelinin sol st tarafnda (Windowsta) yer alr. Balam mens hem Macintoshta, hem de Windowsta Files panelinin daraltlm grnmnde (Files panel grubunun sa st kesinde yer alr) bu menlere eriim salar. Dosyalar panelinde iken dosyalar bir klasrden dierine tadnzda Dreamweaver bu dosyalara olan linkleri otomatik olarak dzenlemek iin sizden izin ister. Bu durumda Gncelle seeneini seerek bu dzenleme iin izin vermelisiniz.

116

Blm 10 Siteyi Ynetmek

Daha nce bir yerel site oluturmutunuz. Bu, sabit diskinizde bulunan ve siteniz iin gereken btn klasrleri ve dosyalar ieren bir klasrd. Fakat kendi sitelerinizi gelitirirken, retim aamasn tamamladktan sonra Web sayfalarnzn ziyaretiler tarafndan grlebilmesi iin yerel dosyalarnz bir uzak siteye kopyalamanz gerekecektir. Uzak site genellikle hostunuz, Web yneticiniz ya da istemciniz tarafndan belirlenen bir sunucuda bulunur. Bu site ayrca yerel bir ada da bulunabilir. Siteyi bir canl sunucuya aktarmak (ideali, bu i iin sitenin bulunduu sunucuyu kullanmaktr) ve her eyin beklendii ekilde altn grmek iin bu siteyi test etmek iyi olacaktr. Siteyi farkl bir konuma aktardnz iin baz eylerin nceki konumda olduu gibi almama ihtimali her zaman mevcuttur. Bu tr sorunlarn olup olmadn, siteyi ziyaretilerin ya da siteyi grmesi istenen kiilerin kullanmna amadan nce belirlemek ve eer varsa bu sorunlar zmek en iyisidir. Site > Siteleri Ynet komutunu sein. Alan menden dzenleme yapmak istediiniz siteyi sein ve Dzenle butonuna basn. Alan pencerede gelimi seeneini sein. letiim kutusunun sol tarafndaki Kategori listesinden Uzak Bilgilerini sein. Site Tanmlamas iletiim kutusunun Uzak Bilgileri blmnde, Dreamweavera hangi uzak siteye balanmas gerektiini ve bu uzak sitenin niteliklerini bildirmek iin gereken bilgileri girersiniz. Geerli seenek Yok (None) tur. Burada eer sunucunuz yerel anzda ise yerel/A seeneini semelisiniz. Eer bir FTP sunucusuna balanacaksanz o zaman FTP seeneini semelisiniz. Aadaki admlarda uzak FTP (File Transfer Protocol) sitesini taklit etmek iin bir klasr oluturacaksnz. Bu ilem, bir uzak sunucuya erimek zorunda kalmadan Dosyalar Al ve Dosyalar Koy fonksiyonlaryla ilve site ynetimi fonksiyonlarn kullanmanz salar. FTP eriimi, uzak bir sitedeki dosyalar almak ya da bu siteye dosya gndermek iin sk kullanlan bir yntemdir. Bu blm tamamlarken bir uzak site eriiminiz olamayabilir. Bu yzden aadaki bilgiler sadece referans olmas amacyla verilmitir. Bu seenekleri doru olarak ayarlamak iin a yneticinize ya da sunucu firmanza bavurun. Aadaki seeneklere, Site Tanmlamas iletiim kutusunun Uzak Bilgiler blmndeki Eriim mensnden FTPyi seerek ulaabilirsiniz. FTP host: Web sunucunuzun host ad (adobe.com gibi). Ana Bilgisayar Dizini: Uzak sitede, ziyaretiler tarafndan grnen belgelerin sakland dizin (site root yani sitenin kk dizini olarak da bilinir. Oturum A ve ifre: Sunucudaki kullanc adnz ve ifreniz. Kaydet onay kutusunun iaretini kaldrrsanz, uzak siteye her balannzda sizden ifre girmeniz istenir. Pasif FTP Kullan: Bu seenei, bilgisayarnzla sunucu arasnda bir gvenlik varsa kullanrsnz. Bu seenek de varsaylan durumda iaretli deildir. Gvenlik Duvar: Bu seenei, uzak sunucuya bir gvenlik duvar arkasndan balanyorsanz kullanrsnz. Bu seenek de varsaylan durumda iaretli deildir. Gvenlik duvar ayarlar Dreamweavern Tercihler iletiim kutusunda bulunur. Gvenlik Duvar Ayarlar dmesine tklayarak buraya hemen ulaabilirsiniz.

Blm 10 Siteyi Ynetmek

117

Gvenli FTP Kullan (SFTP): Bu seenei, bir SFTP sunucunuz varsa kullanrsnz. SFTP sunucusu gvenli balantlar oluturmak iin ifreleme zelliini kullanr. Bu seenek de varsaylan durumda iaretli deildir. Bu balanty saladktan sonra sunucuya dosyalarnz atmak iin Yukar mavi oka (Dosyalar koy), sunucudan dosyalar almak iin ise aa yeil oka (dosyalar al) basmalsnz.

You might also like