You are on page 1of 117

Adobe Dreamweaver CS3 Yardmc 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

Blm 1 Genel Bilgiler

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.

Minimum Sistem Gereksinimleri


Windows 1,7 GHz Intel Pentium IV ya da edeer veya daha yeni bir ilemci Microsoft Windows 2000 ya da Windows XP 512 MB RAM 1024 x 768, 16-bit monitr (32-bit tavsiye edilir) 2 GB bo sabit disk alan Macintosh 1 Ghz PowerPC G4 veya daha yeni bir ilemci Mac OS X 10.3, 10.4 512 MB RAM 1024 x 768, binlerce renk zelliine sahip monitr (milyonlarca renk tavsiye edilir) 2 GB bo sabit disk alan

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

Blm 2 Dremweaver Temelleri

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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.

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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.

Bu Blmde Neler Var?


Dreamweaver arabirimini tanyacaksnz Dreamweaver ortamn zelletireceksiniz Planlama ileminin nasl yapldn reneceksiniz Yeni bir site oluturacaksnz Yeni bir belge oluturacak ve bunu kaydedeceksiniz Aralar tanyacaksnz Sayfanza bir balk atayacaksnz nizleme Web tarayclarn belirleyecek ve sayfanz test edeceksiniz rendiklerinizi kendi sitenize (sitelerinize) uygulayacaksnz

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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. Byk irketlerde bu ilemler iin birden fazla insan ya da departman grevlendirilebilir ve bunlarn tamamlanaca zaman dilimleri ciddi anlamda akabilir. 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. Derslerde ilerlerken Dreamweaver size bu bahsettiimiz ilemlerin birounu (sadece prodksiyon ve post prodksiyon aamalarndakileri deil) gerekletirme konusunda yardmc olacaktr. 1. Aama: Aratrma Herhangi bir sayfa zerinde almaya balamadan nce kendinize ya da mterinize aadaki 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.

11

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: 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 versiyonlar 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 Balang sayfasndaki Yeni Olutur blmnden Dreamweaver Sitesini sein. 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.

14

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: 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.

19

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

20

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

Dosyalar panelinde artk kendi dosya ve klasrlerinizi greceksiniz.

21

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

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.

27

Adobe Dreamweaver CS3 Blm 2: Dreamweaver Temelleri

28

Adobe Dreamweaver CS3 Blm 3: erik Eklemek

Blm 3 erik Eklemek

29

Adobe Dreamweaver CS3 Blm 3: erik Eklemek

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.

Bu Blmde Neler Var?


Bir sayfaya metin yerletireceksiniz. erii mantkl blmler halinde dzenleyeceksiniz. Metnin konum ve biimlendirme ayarlarn yapacaksnz. Belgenin font ve renk iin varsaylan ayarlarn yapacaksnz. zel karakterler ve dier elemanlar ekleyeceksiniz. oklu dil destei ieren belgeler oluturacaksnz.

30

Adobe Dreamweaver CS3 Blm 3: erik Eklemek

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.

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 verilebilinir. 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.

31

Adobe Dreamweaver CS3 Blm 3: erik Eklemek

Metni Hizalamak ve Madde mleri


Paragraflar hizalamak iin zellikler panelinde metin hizalama butonlarn kullanabilirsiniz.

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

Adobe Dreamweaver CS3 Blm 3: erik Eklemek

Sayfay nizleme ile Taraycda Grntlemek


Dreamweaver iinde alrken oluturduunuz sayfalar taraycda nizleyerek iindeki hatalar grmek yada 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.

33

Adobe Dreamweaver CS3 Blm 3: erik Eklemek

34

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

Blm 4 Balant Oluturmak

35

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

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.

Bu Blmde Neler Var?


Balantlarn farkl durumlarda alacaklar renkleri belirleyeceksiniz. Metin iinde dier belgelere giden balantlar oluturacaksnz. Sayfann farkl blmlerine atlamay salamak iin yer imlerinden faydalanacaksnz. E-posta balantlar oluturacaksnz.

36

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

Balantlara 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 Page Properties iletiim kutusunda belirtilir. 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. Sayfa iindeki metinlerinizin renklerini deitirmek iin Deitir > Sayfa zelliklerini sein. Alan Sayfa zellikleri penceresinden Balar sekmesine tklayn.

Balantlar farkl durumlara sahiptir. rnein tklanan ve tklanmayan balantlarn durumu farkldr. Bir balantnn her durumu iin ayr grnm

37

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

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.

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.

38

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

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 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. Yerel sitenizdeki bir baka sayfa yada dosyaya balant oluturmak iin balant vereceiniz yazy iaretledikten sonra zellikler panelinde Ba metin kutusunun sandaki klasr iaretine tklayn ve sitenizin iinden ilgili dosyay sein.

39

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

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

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

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.

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

Adobe Dreamweaver CS3 Blm 4: Balant Oluturmak

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.

42

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

Blm 5 Stil Sayfalar Oluturmak

43

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

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

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

sayfalaryla kontrol ederek farkl platformlar ve Web tarayclar arasnda daha uyumlu sayfalar oluturabilirsiniz.

Bu Blmde Neler Var?


Bir sayfann arka plan rengini ayarlamak. Font, renk ve byklk gibi metin niteliklerini ayarlamak. Dahili bir stil oluturmak. Dahili stilleri harici stillere dntrmek. Harici bir stil sayfas oluturmak. Harici bir stil sayfasn balamak

45

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

Sayfa Arkaplan Rengini Deitirmek


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

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

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

</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

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

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

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

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

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

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.

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)

50

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

seeneini semeli veya daha nce harici bir stil sayfanz varsa alan pencereden onu semelisiniz.

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 deiikliklikleri sayfanzda gremeyebilirsiniz. Bu durumu engellemek iin yapmanz gereken Dreamweaver iinde Dzen > Tercihler seeneini semek ve CSS Stilleri mensnden Deitirildiinde CSS dosyalarn a kutucuundaki iareti kaldrmaktr.

51

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

Eklediiniz Stilleri Kullanmak


Stil olarak eklediiniz Snflar sayfanzn iinde kullanmak iin onlarn etki edecekleri metinleri semelisiniz. Bu ilem iin sayfanzn iinde bir metni yada 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 heryerde deiecektir.

Bir Etiket in Stil Oluturmak


Eer sayfanzn iinde bir etiketin getii heryerdeki 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.

Oluturduunuz yeni stil, paragraf etiketleriyle biimlendirilen metnin grntlenme eklini yeniden tanmlayacaktr.

52

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

Gelimi Still Hazrlamak


Eer stillerinizin belli bir isimli nesneye hitap etmesini istiyorsanz Gelimi modunu kullanmalsnz. Ayn zamanda sayfanzn iindeki balantlara efekt eklemek iin de gelimi modunu kullanabilirsiniz. Gelimi modu iinde hazr olarak tanmlanm 4 adet link seenei bulunmaktadr. 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.

53

Adobe Dreamweaver CS3 Blm 5: Stil Sayfalar Oluturmak

54

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

Blm 6 Resimlerle almak

55

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

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.

Bu Blmde Neler Var?


Resim trleri. Bir sayfaya arkaplan resmi eklemek. Bir sayfaya resim eklemek. Temel resim dzenleme aralarn kullanmak. Assets panelini kullanmak. Resim yer tutucularn kullanmak.

56

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

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

Adobe Dreamweaver CS3 Blm 6: 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. Sayfalarnza Resim Eklemek Sayfalarnza resim eklemek iin imlecinizi sayfa iinde resmi eklemek istediiniz yere yerletirdikten sonra Ekle panelinden Resim dmesine tklamalsnz.

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

Adobe Dreamweaver CS3 Blm 6: 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 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

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

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 (Colors) 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.

60

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

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. Image Placeholder iletiim kutusu alacaktr. Resim yer tutucusu belge penceresinde belirecektir. Yer tutucunun renginin siyah olduuna ve resmin ismiyle boyutlarn grntlediine dikkat edin.

Resim Yer Tutucusunu Deitirmek


Asl resmi oluturduktan ya da mterinizden aldktan sonra yer tutucuyu (sayfanzda resmin nasl duracayla ilgili olarak fikir vermesi iin kullanmtnz) asl resimle deitirmeniz gerekir. Belge penceresindeki resim yer tutucusuna ift tklayn. Grnt Kaynan Se iletiim kutusu alacaktr.

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 (Windowsta) komutunu sein ve Tercihler iletiim kutusundaki Kategori listesinde Dosya Trleri / Dzenleyicileri sein.

61

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

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. Bu balant, bir greceli yoldur. Balantlar oluturmak iin metinlerde olduu gibi resimleri de kolayca kullanabilirsiniz.

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.

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

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

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

Adobe Dreamweaver CS3 Blm 6: Resimlerle almak

64

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

Blm 7 Tablo Oluturmak

65

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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.

Bu Blmde Neler Var?


Yerleim dzeni. Tablo ekleme ve zellikleri. Harici tablolar almak. Satr ve stun zellikleri Tablo ieriini sralama. Yerleim dzeni boyutu. Mizanpaj modu.

66

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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.

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 (bu, hem Macintoshta,

70

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

<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 salyacaktr. 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.

72

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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.

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. Srlama yapmak iin , tabloyu sein ve arkasndan Komutlar > Tabloyu Srala komutunu sein.

74

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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.

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. Eer ayn menden Satr veya Stun ekle seeneini iaretlerseniz aadaki gibi bir iletiim kutusu karnza kacaktr.

75

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Mizanpaj Grnmnde Tablo Oluturmak


Dreamweaver, tablo oluturmak iin kullanabileceiniz Mizanpaj adnda bir moda daha sahiptir. Mizanpaj modu, daha ok bir sayfa dzeni program gibi alr. Bu programlarda sayfada birtakm kutular izer ve sonra da bu kutular metin ya da resimlerle doldurursunuz. Bu kutular yeniden boyutlandrabilir ve sayfada istediiniz bir konuma yerletirebilirsiniz. Mizanpaj moduna gemek iin Grnm > Tablo Modu > Mizanpaj Modu komutunu seebilir veya Alt+F6 klavye ksayolunu kullanabilirsiniz. Document ara ubuunun hemen altnda, zerinde Mizanpaj Modu [k] metni ortalanm olarak bulunan bir ubuk belirecektir (belgenin iindeymi gibi grnr). Bu ubuk Web taraycsnda grnmez, nk sadece Dreamweaverda, o da Mizanpaj modunda altnz gstermek iin kullanlr. Geniletilmi modunda olduu gibi Standard dmesine tklayarak ya da Mizanpaj modundayken belgenin st ksmndaki ubukta yer alan [k] balantsna tklayarak tekrar Standart moda geebilirsiniz.

76

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Adobe Dreamweaver CS3 Blm 7: Tablo Oluturmak

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

Adobe Dreamweaver CS3 Blm 8: oklu Ortam Bileenlerini Kullanmak

Blm 8 oklu Ortam Bileenlerini Kullanmak

79

Adobe Dreamweaver CS3 Blm 8: oklu Ortam Bileenlerini Kullanmak

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.

Bu Blmde Neler Var? Sayfanza Flash animasyonu eklemek

80

Adobe Dreamweaver CS3 Blm 8: oklu Ortam Bileenlerini Kullanmak

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.

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

Adobe Dreamweaver CS3 Blm 8: oklu Ortam Bileenlerini Kullanmak

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

Adobe Dreamweaver CS3 Blm 9: Kullanc Etkileimi

Blm 9 Kullanc Etkileimi

83

Adobe Dreamweaver CS3 Blm 9: 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.

Bu Blmde Neler Var?


Rolloverlar oluturmak. Kullanc etkileimi eklemek Bir durum ubuu mesaj oluturmak Yeni bir tarayc penceresi amak

84

Adobe Dreamweaver CS3 Blm 9: Kullanc Etkileimi

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. 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 ara ubuundaki Ortak sekmesine tklayn. Bu sekmede daha nce resim eklediiniz butona tklayn ve alan menden Rollover Grnts seeneini sein.

85

Adobe Dreamweaver CS3 Blm 9: Kullanc Etkileimi

Bu adm gerekletirdiinizde Rollover Grnts Ekle iletiim kutusu alacaktr.

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

Adobe Dreamweaver CS3 Blm 9: Kullanc Etkileimi

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

Adobe Dreamweaver CS3 Blm 9: Kullanc Etkileimi

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.

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
88

Adobe Dreamweaver CS3 Blm 9: Kullanc Etkileimi

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

Adobe Dreamweaver CS3 Blm 9: Kullanc Etkileimi

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

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

Blm 10 Form Oluturmak

91

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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.

Bu Blmde Neler Var?


Bir web sayfas iinde form oluturmak. Form eleri Form eylemleri

92

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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. Formuzun 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.

95

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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.

96

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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.

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.

98

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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.

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. 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
99

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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 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.

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

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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.

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

101

Adobe Dreamweaver CS3 Blm 10: Form Oluturmak

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.

Gizli alan nesnesine grebilirsiniz.

tkladnzda

zellik

panelinden

zelliklerini

102

Adobe Dreamweaver CS3 Blm 11: ablonlar

Blm 11 ablonlar

103

Adobe Dreamweaver CS3 Blm 11: ablonlar

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.

Bu Blmde Neler Var?


ablonlar oluturmak Dzenlenebilir alanlar ablondan yeni sayfa oluturmak

104

Adobe Dreamweaver CS3 Blm 11: ablonlar

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.

Bir ablona Dzenlenebilir Alanlar Eklemek


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.

105

Adobe Dreamweaver CS3 Blm 11: ablonlar

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

Adobe Dreamweaver CS3 Blm 11: ablonlar

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.

107

Adobe Dreamweaver CS3 Blm 11: ablonlar

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.

108

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

Blm 12 Siteyi Ynetmek

109

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

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

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

siteye farkllk gsterebilir. rnein test ilemleri dzenli bir ekilde faaliyete sokma aamasndan nce ve sonra gerekletirilmelidir.

Bu Blmde Neler Var?


Dosyalar Paneli Site Raporlar Uzak Bir Site Balants

111

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

Dsoyalar 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.

112

Adobe Dreamweaver CS3 Blm 12: 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. 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

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

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

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

Bir Uzak Siteye Balanmak


Blm 2de 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.

115

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

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

Adobe Dreamweaver CS3 Blm 12: Siteyi Ynetmek

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

You might also like