Professional Documents
Culture Documents
Adobe Dreamweaver CS3 Yardımcı El Kitabı
Adobe Dreamweaver CS3 Yardımcı El Kitabı
Adobe Dreamweaver CS3 Yardımcı El Kitabı
indekiler
Blm 1 - Genel BilgilerGiri ............................................................................................. 3 Blm 2 - Dremweaver Temelleri ..................................................................................... 7 Blm 3 - erik Eklemek ................................................................................................. 29 Blm 4 - Balant Oluturmak....................................................................................... 35 Blm 5 - Stil Sayfalar Oluturmak................................................................................ 43 Blm 6 - Resimlerle almak........................................................................................ 55 Blm 7 - Tablo Oluturmak ............................................................................................ 65 Blm 8 - oklu Ortam Bileenlerini Kullanmak ............................................................ 79 Blm 9 - Kullanc Etkileimi........................................................................................... 83 Blm 10 - Form Oluturmak .......................................................................................... 91 Blm 11 - ablonlar ...................................................................................................... 103 Blm 12 - Siteyi Ynetmek........................................................................................... 109
Giri
Dreamweaver CS3, 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.
n Gereksinimler
Bu kitabn temel amac, size Dreamweaver gelitirme ortamn tantmak ve Web sayfalarnn hazrlanmas ve tasarm iin gereken becerileri kazandrmaktr. Elinizdeki bu kitap, Dreamweaver konusunda hi tecrbesi olmayan acemi kullanclara ve program az da olsa tanyan orta dzeydeki kullanclara yneliktir. Bu yzden veritabanlar, sunucu davranlar ve eitli Web uygulamalarnn kullanmyla dinamik Web siteleri oluturma ve ileri dzey uygulamalar gelitirme konular bu kitabn kapsam dnda braklmtr. Elinizdeki bu kitap; Web tasarmclar, Web gelitiricileri ve Web sayfas oluturma konusuyla ilgilenen dier insanlar dnlerek hazrlanmtr. Burada Dreamweavera yeni baladnz kabul edilmekle birlikte Macintoshtaki ya da PCdeki temel ilemlere (men elerini seme, dosya ama, kaydetme vs) aina olduunuz varsaylmaktadr. Web konusunda temel dzeyde bir bilginiz varsa kitaptan daha iyi bir ekilde faydalanabilirsiniz. Standart kelime ilem programlaryla (Microsoft Word gibi) ilgili genel bir bilgi sahibi olmak da faydal olacaktr, ama bu art deildir.
Dreamweaver Temelleri
Adobe Dreamweaver CS3, 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. Daha sonra Dreamweaver CS3n temellerini renecek ve programn arabirimini ve aralarn tanyacaksnz.
Bu derste, basit bir Web sayfas oluturmak ve mevcut bir sayfay amak, ayrca almanz farkl Web tarayclarnda test etmek (bu, ilevsel ve eriilmesi kolay Web siteleri hazrlamak iin gerekli bir admdr) iin belge ayarlaryla nasl alacanz reneceksiniz. Ayrca bu derste Dreamweaver kendi alma aknza uygun olarak nasl zelletireceinizi renecek ve Dreamweavern ilevlerini gelitirme yollar hakknda bilgi edineceksiniz.
Balang Sayfas
Dreamweaver CS3 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 Kendi siteleriniz iin bir balang noktas oluturacak sayfa tasarm rnekleri Aralarnda bir Dreamweaver turu ve klavuzunun da bulunduu program kaynaklar Programn aralarna ekleme yapmak iin kullanabileceiniz kaynaklar ieren Dreamweaver Exchangee ait bir balant Yeni bir sayfa oluturma ilemine baladnzda veya Balang Sayfasndaki dier seenekleri setiinizde Balang Sayfas kendiliinden kapanr.
10
11
2. Aama: Planlama ve Yaplandrma Web sitenizle ziyaretilerinizin arasndaki balant, ksmen sitenizin yapsna baldr. Aklk ve kullanm kolayl iyi bir Web sitesi iin hayati zelliklerdir. Sitenin yapsn oluturmak: 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 mterinizle srekli olarak grmeniz gerekir. Tasarm fikirleri asndan mterinizin istemeyecei rnekler oluturmak istemeyeceksinizdir. 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. 2. aamadaki kavramlardan bazlarn bundan sonraki birka derste
12
greceksiniz; bununla birlikte 3. aamaya ait prodksiyon evresi kitaptaki neredeyse tm dersleri kapsamaktadr. 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 CS3, 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 adlandrken Trke karakter kullanmamaya zen gstermelisiniz. Varliklar klasr ismi bu nedenle varlklar eklinde kullanlmamtr. Benim Sitem L images L css L varliklar
13
14
Bu uygulamada henz seili durumda deilse Temel sekmesine tklaynz. 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. Bu ekrandaki HTTP Addresi metin alann bo brakmanz gerekir. HTTP Addresi (sitenin URLi), site kkyle ilikili balantlar tanmlamak iin kullanlr;
15
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. u anda veritabanlar ya da dier sunucu teknolojilerini kullanan sayfalar oluturmadnz iin Hayr seeneini iaretlemeniz gerekiyor. Site ayarlarnda deiiklik yapmanz gerektiinde Site > Siteleri Ynet komutunu, ardndan da listeden istediiniz siteyi seip Dzenle dmesine tklayarak bu ilevi daha sonra eklemeniz mmkndr.
Bu blmn st ksmnda Dreamweaver, Gelitirme srasnda dosyalarnzla nasl almak istiyorsunuz? ifadesiyle gelitirme srecinde dosyalarnzla nasl almak istediinizi sorar. Makinamdaki yerel kopyalar dzenle sonra
16
hazr olduunda sunucuya ykle (nerilen) seeneine tklayn. u anda makinenizdeki dosyalarla alacaksnz ve bir uzak sunucuya erimeniz gerekmiyor. Byle durumlarda bilgisayarnzda bulunan dosyalar dzenlersiniz. Eer bir uzak sunucunuz varsa, bu seenek, dosyalarn iki kopyas olduunu (biri yerel sabit diskinizde, dieri de sunucunuzda) gsterir. Bu da gerektiinde size orijinal dosyalar sunucudan alma seeneini sunar (eer yerel olarak deitirilen dosyalar ykleyerek bunlar deitirmediyseniz). Prodksiyon ve test almalarnz yerel sabit diskinizde yaptnzda, tamamlanmam sayfalarn Webde yaynlanmasn engellemi olursunuz.
Yine bu blmde Dreamweaver, Dosyalarnz bilgisayarnzda nerede depolamak istiyorsunuz? ifadesiyle dosyalarnz bilgisayarnzda nerde depolamak istediinizi sorar. Metin alannn sandaki klasr simgesine
17
tklayn ve oluturduunuz klasrn bulun. Bu metin alan sabit diskinizde siteye ait btn dosyalarn saklanaca klasr belirlemenizi salar. Bu, uzak sitedeki kk klasrn edeeridir. Dreamweaver bu yerel kk klasrn sitenizdeki belgeler, resimler ve balantlara ait yollar belirlemek iin kullanr.
Kendi sitelerinizi olutururken eer mevcut bir klasrnz yoksa, Dreamweavern siteniz iin setiiniz ismi temel alarak otomatik olarak bir klasr oluturmasna izin vererek iinizi kolaylatrabilirsiniz.
18
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.
19
leri dmesine tklayarak bir sonraki blme gein. Yeni tanmladnz site bilgilerini gzden geirin ve iletiim kutusunun alt ksmndaki Bitti dmesine tklayn.
20
21
Yeni Bir Sayfa Oluturmak ve Bu Sayfay Kaydetmek Yerel sitenizi tanmladktan sonra Web sayfalarnz oluturmaya ve bunlarla almaya hazrsnz demektir. Yeni bir sayfa oluturduunuzda ilk yapmanz gereken ey belgenizi kaydetmek olmaldr. Dosya > Yeni komutunu sein. Yeni Belge iletiim kutusu alacaktr.
Alan pencereden HTML seeneini sein ve Olutur butonuna tklayarak HTML dokman oluturun. 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.
22
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. 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.
23
Aralar ve Arayz
Web sayfas oluturma iinde daha fazla ilerlemeden nce Dreamweaver CS3 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.
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
24
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. Ekle ara ubuunda Ortak sekmesini sein. Burada genel olarak kullanacanz aralar bulunmaktadr.
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. Sayfanzn altnda, kullandnz nesneler ve metinlerle ilgili zellikleri deitirebileceiniz zellikler panelini grebilirsiniz.
25
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. Dreamweaver bu derse balamadan nce atysanz, paneller aynen program en son kapattnzda braktnz konumlarnda olacaktr. Pencere mensnde bir enin yanndaki onay iareti, o panelin ya da ara ubuunun panel grubunda seili durumda ve etkin (grnr) olduunu gsterir. Dreamweavern panellerine ve aralarna ainalk kazandktan sonra panelleri ve panel gruplarn yeniden dzenleyerek arabirimi ihtiyalarnza gre zelletirebilirsiniz. Oluturduunuz zel alma alanlarn Pencere > alma Uzay Mizanpaj > Geerliyi Kaydet komutunu seerek kaydedebilirsiniz.
26
27
28
29
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.
30
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 yada yazdnzda zellikler penceresi ile zelliklerini deitirebilirsiniz.
Format penceresinden eitli n tanml ayarlar seerek balklarnz formatlayabilirsiniz. Font blmnden yaznzn belli bir blm iin karakterler seebilirsiniz. Font alr mensndeki fontlar tm bilgisayarlarda olduundan emin olunan fontlardr. Bu nedenle bu fontlar semelisiniz. Bunun dnda alan menden Font Listesini Dzenle seeneini seerek font listesini dzenleyebilirsiniz. Ancak setiiniz fontlar ziyareti bilgisayarnda yoksa tarayc varsaylan fontu kullanacaktr. Boyut alr mensnden fontlarn boyutunu seebilirsiniz.
31
Metinlerinizden madde imi oluturmak iin yine zellikler panelinde 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 yada numarasz) grnm deitirmek iin listenin iindeyken Metin > Liste > zellikler seeneini sein.
zel Karakterler Eklemek zel karakterler eklemek iin Ekle ubuundaki Metin sekmesine tklayn. En sadaki alr menden dilediiniz zel karakterleri sayfanza ekleyebilirsiniz.
32
33
34
35
Balantlar
Benzersiz 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.
36
Balantlar farkl durumlara sahiptir. rnein tklanan ve tklanmayan balantlarn durumu farkldr. Bir balantnn her durumu iin ayr grnm
37
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.
38
39
Bu alana eer baka bir siteye link verecekseniz bu sitenin adresini banda http bulunarak yazmalsnz. (r: http://www.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.
40
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. 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.
41
42
43
Cascading 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
44
sayfalaryla kontrol ederek farkl platformlar ve Web tarayclar arasnda daha uyumlu sayfalar oluturabilirsiniz.
45
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. 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). body { background-color: #003333; } body,td,th { font-family: Arial, Helvetica, sans-serif; }
46
</style> Yine ayn sayfa zellikleri penceresi iinde sayfanza ait font rengini de belirleyebilirsiniz. Dahili 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.
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.
47
Dremaweaver iinde kullanabileceiniz 3 eit stil vardr. Bunlar, Snf, Etiket ve Gelimitir. 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. 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. Advanced: Bu seici tipi, zel etiket kombinasyonlar 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. 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 koymasanzda Dreamweaver bunu sizin iin koyacaktr.
48
Tamam butonuna bastktan sonra alan pencerede bu stil ile ilgili zellikleri dzenleyebilirsiniz.
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
49
stil sayfas... seeneini iaretlemelisiniz. Bu aamadan sonra Dreamweaver size yeni still 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.
50
seeneini semeli veya daha nce harici bir stil sayfanz varsa alan pencereden onu semelisiniz.
51
Oluturduunuz yeni stil, paragraf etiketleriyle biimlendirilen metnin grntlenme eklini yeniden tanmlayacaktr.
52
53
54
55
Resimler izleyicilerinizin dikkatini ekmede ve Web sitenizde vermeyi dndnz mesaj etkin bir ekilde iletmede nemli bir rol oynayabilir. Adobe Dreamweaver 8deki 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.
56
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.
57
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.
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 alanardan Alternatif metin alanna bu resimle ilgili akayc 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 dzeneleme ilemlerini yapabilirsiniz. Bu ilemleri yapmak iin zellikler panelindeki Dzenle buton grubunu kullanabilirsiniz. Bu butonlar srasyla aadaki gibidir:
58
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 dzeneleme 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 dzeltebilirsiniz. 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 fade etmektedir.
Resminizin genilik yada yksekliini, G yada Y deerini veya resminizin kenar tutamalarndan tutaran boyutunu deitirdiinizde iki birim arasnda bir yenile ikonu kacaktr. Bu ikona tklayarak resmin orjinal boyutlarna dnmesini salayabilirsiniz.
59
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.
60
61
Elem metin alann gremiyorsanz zellikler denetisinin sa alt kesindeki geniletme okuna tklayn. 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
62
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.
63
64
65
Tablolar, 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.
66
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. 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. Table 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.
67
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. 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. rnein st seeneini kullanrsanz ve ilk stunun en stteki hcresine Sipari yazarsanz bu stundaki dier hcreler ierikleri gsterilmek zere bir ekran okuyucu (grme zrl ziyaretiler tarafndan ya da standart Web tarayclarnn kullanlamad durumlarda kullanlan bir tr Web taraycs) tarafndan sesli olarak okunurken bata Sipari kelimesi daha sonra da hcrenin ierii okunacaktr. 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 insanlar 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:
68
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. ubuun st 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. 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.
69
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.
70
hem de Windowsta bulunan bir sistem zelliidir ve Dreamweavera ait bir e deildir) tablonun ya da yaptrlan hcrelerin tabloda yerine geecei seimin yapsna btnyle uymaldr. Bir hcreyi kopyalayp bunu seili bir hcrenin yerine geecek ekilde yaptrabilirsiniz. Ama iki hcreyi kopyalayp bunu tek hcrelik bir seimle deitiremezsiniz. Kopyaladnz hcrelerin says ve yn, deitirmek istediiniz hcrelerin says ve ynyle ayn olmaldr. Birden fazla hcreyi tek bir hcreye yaptrabilirsiniz, ama sonuta aadaki rnekte greceiniz gibi ok sayda hcre elde edersiniz. 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. 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.
71
<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.
72
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. Bg Rengi: Tablonuzun arkaplan rengi Bg Grnts: Tablonuzun arkaplan resmi. Kenarlk Rengi: Tablolarnzn kenarlk rengi.
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.
73
Seilen hcreleri yaylmalar kullanarak birletir: Bu seenekle birbirine komu iki hcreyi birletirebilirsiniz. Seilen hcreleri satr yada stnlara bler: Bu seenek ile seilen hcreleri satr yada stnlara blebilirsiniz. Yatay: Hcre iindeki yatay hizalamay belirler. Dikey: Hcre iindeki dikey hizalamay belirler. G: Stnun geniliini belirler. H: Satrn yksekliini belirler. Bg: Hcre arkaplan renginizi belirler. Burada vermi olduunuz deer tabloya vermi olduunuz arkaplan deerinin zerinde gzkr. Bg: Hcrenizin arkaplan resmini belirler. Burada vermi olduunuz resim deeri hcrenizin arkaplan resmini belirler ve tablonuzun arkaplan resminin zerinde gzkr. Sarma Yok: Yazlarnzn tablo kldnde bir alt satra inmesini engeller. stbilgi: aretlendii hcrenin balk formatnda gzkmesini salar. Kenarlk: Kenarlk deeri ise sadece bu hcreye kenarlk genilii vermenizi salar.
74
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.
75
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.
76
Mizanpaj modundayken hcreleri izmek iin hcre izme aracndan yararlanabilirsiniz. Siz AP Blm iz aracn setikten sonra, belge penceresine gtrdnzde imle art iaretine (+) dnecektir. Yerleim hcreleri, sayfann istediiniz yerine hcre izmenizi salar. Mizanpaj modunda tablonuzu olutururken satrlarn ve stunlarn dzeni ve saysyla ilgili olarak endielenmenize gerek yoktur. Siz hcrelerin sayfanzdaki konumunu belirledikten sonra Dreamweaver satrlar ve stunlar otomatik olarak oluturacak ve kontrol edecektir. mleci sayfann istediiniz bir yerine tklayarak istediiniz boyutta bir hcre izebilirsiniz. Yerleim tablosu yaklak belge penceresinin geniliinde izilir. Ama siz tabloyu istediiniz boyutlarda olacak ekilde ayarlayabilirsiniz. Hcre, yeil d hatl tabloyla kartrlmamas iin mavi bir d hatla gsterilir. Dz mavi izgi, ekleme noktasnn hcre iinde olduunu gsterir. Kesikli mavi izgi ise, ekleme noktasnn hcre iinde olmadnn iaretidir. Tablonun hcre dnda kalan btn blmleri gri renkle gsterilir. nce beyaz izgiler, siz yerleim hcrelerini izerken Dreamweavern tabloyu hazrlamak iin oluturduu satrlar ve stunlar gsterir. mleci hcre kenarlnn zerine getirdiinizde hangi hcrenin zerinde olduunuzu gstermek iin kenarln rengi krmzya dner. Varsaylan durumda yerleim tablolar st tarafta, ilgili tablonun tanmlanmasn kolaylatran bir sekmeyle grntlenir. Bu sekme, tablonun sayfann st ksmna gre biraz aada kalmasna sebep olur. Web taraycsnda bu ekstra boluk yoktur. Tabloda ayrca alt tarafta stunlara ait genilikler ve menlerle birlikte tablo genilii ve bir tablo mens ieren bir ubuk yer alr. Standard moddaki tablo stbilgi ubuuyla ayn ileve sahip olan bu ubuk balangta siz imleci yeni oluturduunuz hcrenin alt kenarnn zerine getirmedike grnmeyebilir.
77
Mizanpaj modunda iken tablolarn iine resim vb. nesneleri ekleyebilirsiniz. Bu modda iken bir hcreyi silmek iin hcreyi setikten sonra klavyenizden Sil tuuna basmanz yeterli olacaktr.
78
79
Adobe 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.
80
Resimlerde olduu gibi Varlklar panelini kullanarak belgelerinize Flash animasyonlar da ekleyebilirsiniz.
Herhangi bir flash animasyonunu sayfanza eklediinizde zellikler paneli yukardaki gibi deiir. Buradaki alanlar: G: Genilik Y: Ykseklik Dosya: Dosyann sitenizdeki yeri Kaynak: Bu dosya iin orjinal FLA dosyanz varsa onun yeri Dzenle: Bu dosyann orjinal FLA sn ap dzenlemeniz iin gerekli buton Boyutlar Sfrla: Dosyann boyutlarn sayfa zerinde deitirdiyseniz orjinal boyuta dnmeniz iin gerekli buton G Boluk: animasyonun sanda ve solunda verilecek yatay boluk Boluk: Animasyonun stnde ve altnda verilecek dikey boluk Kalite: Animasyonun hangi kalitede oynayaca. Bu ayar eer ziyaretilerinizin dk bilgisayar konfigrasyonlar olduunu dnyorsanz deitirin.
81
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 Bg: Arkaplan rengi 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.
82
83
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.
84
85
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. 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. Orjinal Grnt alanndaki Gzat... butonunu seerek orjinal resim olarak gzkecek resmi sein.
86
Rollover Grnts, imle orjinal 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. 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.
87
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.
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. 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. 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
89
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.
90
91
Kimi 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 eposta 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 ihtita duymayacaksnz.
92
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 yanyana koymak istiyorsanz iki nesneyi de bir evreleyicinin (tablo yada div etiketi) iine koymalsnz. Ekleme noktanza imlecinizi koyduktan sonra Ekle ara ubuunun Formlar kategorisindeki Form dmesine tklayn. Bu dme en soldaki dmedir. Bylece bir formu sayfanzn iine eklmi oldunuz. Bu eklediiniz sadece formun genel erevesidir. inde herhangi bir form eleman barndrmamaktadr.
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 geler komutunu seerek formun krmz noktal snrlarn grntleyin. Eer grnmez elemanlar etkin durumdaysa bu uyar mesajn grmezsiniz. Dreamweavern Tercihler iletiim kutusunda yer alan Grnmez geler 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
93
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 yada etiketini setiinizde zellikler denetisinde bu formun zellikleri gzkr.
Bu pencere iindeki form1 yerinde formunuzun ismini yazabilirsiniz. Eylem alan, formuzun altndaki gnder butonuna (henz nasl ekleneceini sylemedik) basldnda sayfann hangi sayfaya ynleneceini sylediimiz yerdir. Bu alana genelde formuzu 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.
94
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.
95
Herhangi bir form nesnesi eklediinizde Eriilebilirlik zellikleri penceresi alabilir. Bu pencere formlarnzn eriilebilir olmas iin kullanabileceiniz zellikleri barndrr.
96
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. 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.
97
En soldaki kutucuk iinde yer alan textfield kelimesi yerine bu alan form iinde eiz (tekil) olarak niteleyecek bir ismi zel karakterler olmadan ve Trke karakterleri() kullanmadan yazn. Karakter alan bu metin kutusunun ayn anda ka karakteri gsterebileceini ayarlardnz 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.
98
Varsaylan durumda her grup (Radyo Grubu) en az iki radyo dmesi ierir. stediiniz kadar radyo dmesi ekleyebilirsiniz. Art (+) ve eksi (-) dmelerini kullanarak yeni giriler ekleyebilir veya mevcut girileri 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.
seme imkn tanyabilirsiniz. Menlerde ziyaretiler tek bir seim yapabilir. Bunlarn her ikisinde de, ziyaretinin setii eler vurgulu hale gelir. Liste veye men eleri eklemek iin Ekle ara ubuunun Formlar kategorisinde yer alan List/Menu dmesine tklayn.
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 ile tek satrl metin olanlarnn zellikleri birbirine benzemektedir. ok satrl metin alanlarnda ek olarak Sar(wrap) seenei ve satr says seenei bulunmaktadr.
100
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 (Temizle-Reset) 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.
101
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.
tkladnzda
zellik
panelinden
zelliklerini
102
Blm 11 ablonlar
103
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. rnein, diyelim ki rnleriniz iin online bir katalounuz var ve rnn resmi, tanm ve fiyat dnda btn sayfalarn grnmnn ayn olmasn istiyorsunuz. Bir ablon oluturursanz, ekibiniz sayfalar Dreamweaver ya da Contribute kullanarak hazrlayabilir ve her sayfann grnm ayn olur.
104
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 Update Links?(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.
105
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 orjinal 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. Dzenelenebilir alanlarnza anlaml bir isim verirseniz sonraki aamalarnzda iiniz kolay olacaktr. Dzenelenebilir alan balklar grnmez nesnelerdir yani ziyaretiler tarafndan grnmezler.
106
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.
107
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.
108
109
Bir 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. Bir Web sitesiyle ilgili yaplan alma retim aamas tamamlandnda sona ermez. retim aamasndan sonra Web sitesinin ziyaretiler iin eriilebilir hale getirilmesi gerekir. Bu da faaliyete sokma (launching) ad verilen bir ilemle gerekletirilir. lemde, bir sunucuya yklendikten sonra sitenin tantm ve reklm yaplr. Ayrca pek ok Web sitesi, ziyaretilerinin ihtiyalar ve istekleri dorultusunda, etkinliini srdrmek ve yeni ziyaretilerin ilgisini ekmek, daha nce gelen ziyaretilerin tekrar gelmelerini salamak iin srekli olarak gelimek zorundadr. Srekli olarak devam eden deiiklik yapma, gncelleme, yeni ierik ekleme ve Web sitesini optimize etme ilemleri sitenin devamlln salamak (site maintenance) olarak adlandrlr. retim aamasndan devamll salama aamasna geite, sitenin bir sunucuya yklenmek zere ayarlanmas, ayrntl bir ekilde test edilmesi, sitenin faaliyete sokulmas ile srekli ynetim ve devamll salama almalar iin hazrlk yapma ilemleri gerekletirilir. 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. Planlama, retim ve devamll salama aamalar arasnda akmalar meydana gelebilir ve her bir aamada yaplan ilemlere ait zellikler siteden
110
siteye farkllk gsterebilir. rnein test ilemleri dzenli bir ekilde faaliyete sokma aamasndan nce ve sonra gerekletirilmelidir.
111
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.
112
Yerel dosyalarnz Dosyalar panelinin sadaki blmesinde (Yerel Grnm) yer alr. Dosyalar panelini genilettikten sonra Geniletme/Toparlama dmesine tklayarak tekrar Dosyalar panel grubu haline getirebilirsiniz. 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.
113
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.
114
115
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 hostunuza 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. 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.
116
Site Raporlar
altnz sitelerle ilgili eitli raporlar da Dreamweaver ile alabilirsiniz. Bunun iin yapmanz gereken Site > Raporlar... seeneini semenizdir. Bu seenek aracl ile sitenizin iindeki krk linkleri ve link almayan dosyalar kolaylkla raporlayabilirsiniz.
117