Dreamweaver8 Kaynagindan Egitim

macromedia
DREAMWEAVER 8
Kaynandan Eitim
Khristine Annwn Page
Macromedia Dreamweaver 8
Kaynandan Eitim
eviren: Arif Ortakma
Editr: Suat Koyuncu
ISBN: 975-6675-34-9
Medyasoft Yaynlar tarafndan Adobe Press ve
Pearson Educationn bir birimi olan Peachpit Press ile birlikte yaynlanmtr.
Bizi World Wide Webde u adreslerde bulabilirsiniz:
http://www.medyasoft.com.tr http://www.peachpit.com http://www.adobe.com
Medyasoft Yaynlar
Genel Yayn Ynetmeni: Suat Koyuncu
Medyasoft Bilgi Sistemleri San. ve Tic. Ltd.
Okmeydan, Dnr Sk. No: 3, Biliim Center
Kathane STANBUL
Tel: 0 (212) 220 54 52
Faks: 0 (212) 210 52 78
E-posta: kitap@medyasoft.com.tr
Web: http://www.medyasoft.com.tr
Authorized translation from the English language edition, entitled Macromedia Dreamweaver 8 Training from the Source
(1st edition, 0-321-33626-7 by Khristine Annwn Page), published by Pearson Education, Inc, publishing as Adobe Press, Copyright 2006
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical,
including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.
TURKISH language edition published by Medyasoft Bilgi Sistemleri San. ve Tic. Ltd., Copyright 2006
Pearson Education, Inc.ye bal Adobe Press tarafndan yaynlanm olan, Macromedia Dreamweaver 8
Training from the Source (1. bask, Khristine Annwn Page) isimli kitabn ngilizceden yetkili evirisidir. Copyright 2006
Tm haklar sakldr. Bu kitabn hibir blm yayncnn yazl izni alnmakszn elektronik ve mekanik yntemler,
fotokopi, kayt ilemi veya burada belirtilmeyen farkl yntemler kullanlarak oaltlamaz ve datlamaz.
Trke basks Medyasoft Bilgi Sistemleri San. ve Tic. Ltd. tarafndan yaynlanmtr. Copyright 2006
Trke evirinin tm yayn haklar bir Medyasoft Bilgi Sistemleri San. ve Tic. Ltd. ti.ne aittir.
Yaynevinden yazl izin alnmadan ksmen veya tamamen alnt yaplamaz,
hibir ekilde kopya edilemez, oaltlamaz ve yaynlanamaz.
Ticari Markalar
Flash, Macromedia Flash, Dreamweaver, Fireworks, Macromedia ve Macromedia logosu, Adobe Systems, Inc.in tescilli markalardr.
Bu kitapta tescilli markalar kullanlmtr. Tescilli bir markann adnn getii her durumda bir tescilli marka iareti koymak yerine,
bu markalar sadece yaynclk anlamnda, marka sahibinin yararna, hibir hak ihlali niyeti olmakszn kullandmz belirtiriz.
Bu kitaptaki herhangi bir terimin kullanm ekli, ticari marka veya hizmet markasnn ihlali olarak grlmemelidir.
Uyar
Bu kitaptaki bilgiler tamamen garanti dnda olup olduu gibi datlmaktadr. Bu kitabn hazrlanmas konusunda gsterilen
tm zene ramen, yazar, Adobe Systems Inc. ve bu kitabn yaynclar, ne ahs ne de kurum olarak bu kitapta bahsedilen
bilgisayar yazlm ve donanm rnleri yznden, dorudan ya da dolayl olarak gerekleen veya gerekletii iddia edilen
kayplar ve zararlardan hibir kii ya da ahsa kar sorumlu deildirler.
Birinci Basm : Eyll 2006
Basm ve Cilt : ELMA Bilgisayar Basm / STANBUL
Trkiyede baslm ve ciltlenmitir.
Brnd btn ekillerle

Kutsal Ruha ve Tanrsal gce
duyduum derin sevgiyle birlikte
bykannemle bykbabamn
ansna, btn aileme.
Biyografi
Khristine Annwn Page, hepsi Peachpit Press ve Macromedia Press tarafndan yaynlanan
Macromedia Dreamweaver MX 2004 Kaynandan Eitim ve Macromedia Dreamweaver
MX Kaynandan Eitim kitaplarn yazm ve Macromedia Dreamweaver MX 2004
Certified Developer Study Guide ve Macromedia Dreamweaver 4 Training from the
Source kitaplarnda yardmc yazarlk yapmtr. San Francisco Eyalet niversitesinin
Multimedia Studies programnda Dreamweaver ve Web tasarm dersleri vermi, ayrca
Stanford niversitesindeki Reuters Digital Vision Fellowship program kapsamnda ve
pek ok bamsz mteriye Dreamweaver eitimi vermitir. Khristine u anda San Jose,
Kaliforniyadaki bir sanat, dans ve yoga merkezi olan Prakasa Mann
(www.prakasama.com) yneticiliini yapmaktadr ve Crescent dergisinin editr/
yaymcsdr. Ayrca sanatlar ve yazarlardan oluan bir grup olan NorthWind Studios
(www.northwindstudios.com) araclyla serbest Web gelitiricisi olarak almaktadr.
Khristine gemite San Francisco Exploratoriumda Multimedya Uzman ve mzeler,
kr amac gtmeyen kurulular ve sosyal sorumlulua dayal irketler iin Web sitesi
hazrlayan bir firma olan Ideumda Web tasarmcs olarak grev yapmtr. Khristine,
Rhode Island School of Designdan (www.risd.edu) Senior Award for Excellence dln
almtr ve BFA sahibidir. Kendisine Adobe tarafndan da eitli dller verilmitir ve
almalar Providence, RI, New York City ve Palo Alto, CAdaki galerilerde sergilenmitir.
Teekkr
Susan Hobbs, Angela Kozlowski, Demian Holmberg, Sue Hovea ve Peachpit ile
Macromediadaki dier btn harika insanlara ok teekkr ederim. zellikle Jayne
Hillman ve Yoga Sanghaya (www.yogasangha.com), ayrca sitelerinin bu kitabn projesi
olarak kullanlmasna izin verdikleri iin stdyodaki dier eitmenlere ve personele
binlerce kez teekkr ederim. Btn destekleri, asla esirgemedikleri sevgileri ve verdikleri
cesaret iin, Avalon Art & Yogadan Paul ve Brittaya, Mary Page, Rick Page, Jill Page, Rich
Page, Yayoi Page, Adrienne Renka Page, Jessie Gauld, Russell Reza-Khaliq Gonzaga, Carol
Coughline ve Katarina, Bhaktisukhiniye ve DoKtaki herkese ve dier arkadalarma ve
aileme zel olarak teekkrlerimi sunuyorum.
Kitabn ngilizce Orijinal Basmna Katkda Bulunanlar

Yazar
Macromedia Press Editr

Angela C. Kozlowski
Editr
Susan Hobbs
Yardmc Editr
Nancy Sixsmith
Teknik Editrler
Demian Holmberg - Dori Smith
retim Kordinatr
Becky Winter
Tasarmclar:
Rick Gordon, Emerald Valley Graphics
Debbie Roberti, Espresso Graphics
Dizin:
Julie Bess, JBIndexing Inc.
Kapak Tasarm
George Mattingly, GMD
Kitabn Trke Basmna Katkda
Bulunanlar
eviren
Arif Ortakma
Editr
Suat Koyuncu
Yardmc Editrler
Hatice Korkut - Ece Zeynep
Dizin
Suat Koyuncu
Sayfa Tasarm
Mahmut Benek
Kapak Tasarm
Hayati entrk
indekiler Tablosu

Giri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
DERS 1
Dreamweaver 8 Temelleri. . . . . . . . . . . . . . . . . . . . . . . . 1
alma Alannn Tannmas
Siteyi Gelitirmek zere Hazrlk Yapmak
Yerel Bir Site Tanmlamak
Yeni Bir Sayfa Oluturmak ve Bu Sayfay Kaydetmek
Aralar Tanyalm
Panellerle ve Belgelerle almak
Sayfaya Bir Balk Atamak
nizlemede Kullanlacak Web Tarayclarnn Belirlenmesi
Temel Konular Tek Banza Kefedin
DERS 2
3
5
10
18
23
27
32
33
35
Sayfaya erik Eklemek. . . . . . . . . . . . . . . . . . . . . . . . 39

Metin Aktarmak
41
eriin Yapsn Tanmlamak
43
Satr Sonu Oluturmak
46
Blnemez Boluk Eklemek
47
Metni Hizalamak
49
Alntlar Tanmlamak
50
Liste Oluturmak
52
Tanm Listeleri Oluturmak
56
e Listeler Oluturmak
57
Satrii Karakter Biimlendirme
59
zel Karakter Eklemek
61
oklu Dil Destei eren Belgeler Oluturmak
63
Yatay Cetvel Eklemek
65
Otomatik Olarak Tarih Eklemek
66
erii Tek Banza Biimlendirin
68
DERS 3
Balant Oluturmak . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Balant Rengini ve Biimlendirme zelliklerini Ayarlamak
73
Hipermetin Balantlar Oluturmak
77
Balantlar ve Dosya Yaps
80
Bir Siteye Yeni Klasrler ve Dosyalar Eklemek
82
Bir Site Haritas Oluturmak
89
Site Haritas Grnmnde Balantlarla almak
91
Sitenin Bir Alt Blmn Grntlemek
94
Site Haritasn Kaydetmek
96
Balant Hedefini Ayarlamak
96
simli Yer mleri Eklemek ve Bunlara Balant Atamak
98
E-posta Balantlar Eklemek
104
Balantlarla Tek Banza aln
105
DERS 4
Stil Sayfalar Gelitirmek. . . . . . . . . . . . . . . . . . . . . . 107

Bir Arka Plan Rengi Belirlemek
110
Fontu Deitirmek
111
Font Boyutunu Deitirmek
115
Font Rengini Tanmlamak
118
Stillerin ncelenmesi
121
Dahili Stillerle almak
123
Dahili Stilleri Harici Stillere Dntrmek
130
Mevcut Bir Harici Stil Sayfasn Balamak
131
Harici Stiller Oluturmak
134
Etiket Kombinasyonlar in Stil Oluturmak
144
Mevcut Bir Stili Dzenlemek
149
Stil ncelii
151
Temel Tipte Bir CSS Yerleim Dzeni Hazrlamak
159
CSSle Tek Banza aln
165
DERS 5
Resimlerle almak . . . . . . . . . . . . . . . . . . . . . . . . . 169

Bir Arka Plan Resmi Kullanmak
171
Sayfaya Resim Yerletirmek
175
Resimleri Yeniden Boyutlandrmak ve Tazelemek
180
Resimlerin Yerletirilmesi
182
Bir Resmin Etrafna Kenarlk Eklemek
184
Resimlere sim Atamak
185
NDEKLER TABLOSU vii
Assets Panelini Kullanarak Resim Eklemek

Resimleri Favori Listesiyle Ynetmek
Bir Resmin Etrafndaki Boluu Ayarlamak
Bir Resim Yer Tutucusu Eklemek
Resim Yer Tutucusunu Deitirmek
Resim Dzenleme Tercihlerini Ayarlamak
Temel Resim Dzenleme lemleri
Resim Tabanl Balantlar Oluturmak
Resim Haritas Oluturmak
Resimleri Tek Banza Kullann
186
190
191
193
194
195
196
199
200
204
DERS 6
Tablo Oluturmak. . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Tablo Oluturmak
209
Hesap Tablolarndan Veri Aktarmak
215
Tablo Hcrelerini Kopyalamak ve Yaptrmak
217
Tabloyu Semek
219
Tablo Hcrelerini Semek ve Biimlendirmek
220
Tablo eriini Sralamak
226
Tabloda Deiiklik Yapmak
227
Tablolarn Darya Aktarlmas
229
Tablolarda Resim Kullanmak
230
Tablolar e Yerletirmek
237
Bilgisayar Ekranlar in Tasarm Yapmak
241
Window Size Mensn Kullanarak Sayfa Dzenini Kontrol Etmek 242
Layout Grnmnde Tablo Oluturmak
243
Tablo Yerleiminde Deiiklik Yapmak
247
Hcrelere Biimlendirme Uygulamak
249
Layout Modunda Genilik Ayar
250
Taslak Resim Kullanmak
252
DERS 7
Multimedya Bileenlerini Kullanmak. . . . . . . . . . . . 255

Flash Metni Oluturmak
257
Flash Metninde Deiiklik Yapmak
260
Flash Dmeleri Eklemek
260
Flash Animasyonu Eklemek
263
Image Viewern Kullanlmas
265
Quicktime Filmlerini Gmmek
273
viii NDEKLER TABLOSU
DERS 8
Kullanc Etkileimi. . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Bir Rollover Resmi Eklemek
279
Davran Eklemek
282
Bir Olayla Birden Fazla Resmi Deitirmek
287
Resim Haritalarna Davran Eklemek
289
Eylemleri ve Olaylar Dzenlemek
291
Bir Durum ubuu Mesaj Oluturmak
293
Web Taraycsn Kontrol Etmek
294
Yeni Bir Tarayc Penceresi Amak
297
Bir Alr Men Oluturmak
300
DERS 9
Katman Oluturmak. . . . . . . . . . . . . . . . . . . . . . . . . . 307

Katman Oluturmak
309
Katmanlar Adlandrmak
315
Katmanlarda Deiiklik Yapmak
316
Katmanlarn Ylma Srasn Deitirmek
322
Katmanlar e Yerletirmek ve Darya karmak
324
Katmann Grnrlk zelliini Deitirmek
327
Izgara ve Cetvel Seeneklerini Ayarlamak
328
Drag Layer Davrann Kullanmak
331
Show-Hide Layers Davrann Kullanmak
334
Katmanlar Tablolara Dntrmek
336
Netscape Resize Fix Komutunu Kullanmak
340
Timeline ile Animasyon
341
Timelinen alma ekli
341
Timelines Paneli
342
Timelinea Nesne Eklemek
342
Anahtar Karelerin Kullanlmas
343
Timeline Davranlarla Kontrol Etmek
344
Bir Nesneyi Yerletirmek
345
Bir Katmann Yolunu Kaydetmek
346
Resim zelliklerini Deitirmek
348
Grnrl ve Bykl Deitirmek
348
Dreamweaverda Animasyonu nizlemek
348
NDEKLER TABLOSU ix
DERS 10
FrameOluturmak. . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Bir Frameset Oluturmak
353
Bir Frameseti Kaydetmek
357
Bir Framesette Bulunan Frameleri Yeniden Boyutlandrmak
359
Frame zelliklerini Ayarlamak
363
Frame eriini Oluturmak ve Dzenlemek
366
Dier erik Belgelerini Oluturmak
369
Mevcut Bir Sayfay Bir Framede Amak
370
Frame eriini Kontrol Etmek
371
Frame eriini Balantlarla Kontrol Etmek
372
NoFrames eriini Oluturmak
374
Framelerle Tek Banza aln
376
DERS 11
Form Oluturmak. . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

Formun Oluturulmas
379
Form eriini Gruplamak
381
Tek Satrl Metin Alanlar Eklemek
383
Radyo Dmeleri Eklemek
390
Onay Kutular Eklemek
393
Liste ve Men eleri Eklemek
395
ok Satrl Metin Alanlar Eklemek
398
Dme Eklemek
401
Gizli Alanlar Oluturmak
402
Formlar Biimlendirmek
404
Formlarn lenmesi
406
Formlar Test Etmek
407
Srama Menleri Oluturmak
409
Formlarnz Tek Banza Oluturun
411
DERS 12
Ktphane elerini Kullanmak. . . . . . . . . . . . . . . . 413

Bir Ktphane esi Oluturmak
415
Bir Ktphane esini Bir Sayfaya Yerletirmek
417
Bir Ktphane esini Yeniden Oluturmak
420
Bir Ktphane esinde Deiiklik Yapmak
421
Ktphane Referanslarn Gncellemek
424
NDEKLER TABLOSU
DERS 13
ablonlar Kullanmak. . . . . . . . . . . . . . . . . . . . . . . . . 427

ablon Oluturmak
429
Bir ablona Dzenlenebilir Alanlar Eklemek
432
Dzenlenebilir Blgeleri Kaldrmak
436
stee Bal erik Oluturmak
437
Tekrarlanan Blgeler Eklemek
440
Belirli Bir ablonu Temel Alan Sayfalar Hazrlamak
444
stee Bal erii Kontrol Etmek
447
Tekrarlanan Giriler Eklemek
448
ablonda Deiiklik Yapmak
450
Dzenlenebilir Etiket Nitelikleri Oluturmak
452
Dzenlenebilir Bir Etiket Niteliinde Deiiklik Yapmak
454
Yuvalanm ablonlar Oluturmak
455
DERS 14
Siteyi Ynetmek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

Files Panelini Kullanmak
461
Bir Dreamweaver Sitesi Dndaki Dosyalara Erimek
464
Files Panelini Kullanarak Sayfalarda Deiiklik Yapmak
466
Bir Uzak Siteye Balanmak
470
Dosyalar Yklemek
473
Dosyalar ve Klasrleri Gizlemek
477
Dosya Almak ve Gndermek (Check In/Out)
482
Tasarm Notlar Kullanmak
486
Site Tanmlarn Darya Aktarmak
488
Sunucu Balantlar Oluturmak
489
Contribute Uyumluluu
491
DERS 15
Eriilebilirlik ve Test. . . . . . . . . . . . . . . . . . . . . . . . . . 497

Eriilebilirlik Testi
499
Tarayc Uyumluluunu Kontrol Etmek
502
Sitedeki Balantlar Kontrol Etmek
508
Artk Dosyalar Kontrol Etmek
509
Site in Rapor Oluturmak
512
Yazm Denetimi
513
NDEKLER TABLOSU xi
DERS 16
Kodlar Dzenlemek. . . . . . . . . . . . . . . . . . . . . . . . . . 515

Belge Grnmleri Arasnda Gei Yapmak
517
Code Grnmnde HTML Kodunu Dzenlemek
520
Code Ara ubuunu Kullanmak
523
Yeni Pencerenin Konumunu Ayarlamak
526
Meta Etiketleri
529
Tag Inspector Kullanmak
533
Kodu Quick Tag zelliiyle Dzenlemek
535
Snippetlar Kullanmak
537
Clean Up XHTML Komutunu Kullanmak
541
Microsoft Word HTML Dosyalaryla almak
543
Code Grnmnde Kodu Yazdrmak
545
Gelimi zelletirme lemleri
545
DERS 17
Bul ve Deitir zellii. . . . . . . . . . . . . . . . . . . . . . . 549

Belgede Arama Yapmak
551
HTML Etiketlerini Silmek
553
Bul ve Deitir zellii Kullanarak Harici Stil Sayfalarn litirmek 557
Bul ve Deitir zelliini Kullanarak zel Stiller Uygulamak
560
Arama Kriterlerini Kaydetmek ve Tekrar Kullanmak
562
Dzenli fadeleri Kullanarak Aramak ve Deitirmek
563
Bir smin eitli Varyasyonlarn Bulmak
566
EK A
Dzenli fadeler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
EK B
Macintosh Ksayollar . . . . . . . . . . . . . . . . . . . . . . . . 571
EK C
Windows Ksayollar . . . . . . . . . . . . . . . . . . . . . . . . . 575
Dizin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579
xii NDEKLER TABLOSU
Giri
Dreamweaver 8, 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.
Bu konular, dinamik tasarm kavramlar ve bu tr siteleri oluturmak iin kullanlan diller
(ASP, JSP, ColdFusion vs) hakknda bilgi sahibi olmay gerektirir. Kodlarla ilgilenenler iin
Ders 16, Dreamweavern kod yazma aralaryla nasl alldn anlatmasyla kod yazma
ortamna giri niteliindedir ve yine bu derste konuyla ilgili ayrntl bilgi sahibi olmak
iin faydalanabileceiniz program ii kaynaklardan bahsedilmektedir.
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.
Son olarak, bu kitaptaki uygulamalarda Macintoshunuza ya da Windows ykl
bilgisayarnza Dreamweaver 8i kurmu olduunuz ve bilgisayarnzn 5. sayfadaki)
Minimum Sistem Gereksinimlerini karlad kabul edilmektedir. Bu minimum
konfigrasyon, Dreamweaver 8i altrmanz ve kitapla gelen CDdeki uygulama
dosyalarn amanz iin yeterlidir. CDde programn bir demo srm yer almaktadr.
Kitaptaki dersleri demo srmyle tamamlayabilirsiniz, ancak bu demo srm sadece 30
gn alr. Bu sre getikten sonra seri numaras olmadan program altramazsnz.
Kitaptaki Dersler
Bu kitapta, her derste konular farkl projeler hakinde sunularak Dreamweaver 8in ana
zellikleri ve aralar anlatlmakta, ayrca Web sitesi oluturmayla ilgili becerilerinizi
gelitirme konusunda yol gsterilmektedir. Aada balklarn grdnz 17 dersten
oluan bu kursun tamamlanmas yaklak 24-28 saat srecektir.
Ders 1: Dreamweaver 8 Temelleri
Ders 2: Sayfaya erik Eklemek
Ders 3: Balant Oluturmak
xiv GR
Ders 4: Stil Sayfalar Gelitirmek

Ders 5: Resimlerle almak
Ders 6: Tablo Oluturmak
Ders 7: oklu Ortam Bileenlerini Kullanmak
Ders 8: Kullanc Etkileimi Eklemek
Ders 9: Katman Oluturmak
Ders 10: Frame Oluturmak
Ders 11: Form Oluturmak
Ders 12: Ktphane elerini Kullanmak
Ders 13: ablonlar Kullanmak
Ders 14: Siteyi Ynetmek
Ders 15: Eriilebilirlik ve Test
Ders 16: Kodlar Dzenlemek
Ders 17: Bul ve Deitir zelliini Kullanmak
Ek A: Dzenli fadeler
Ek B: Macintosh Ksayollar
Ek C: Windows Ksayollar
Kitapta Kullanlan Anlatm Teknikleri ve Kitabn Format
Kitaptaki her dersin banda ilgili dersin ierii ve amalar ana hatlaryla zetlenmektedir.
Dersler, bu derslerden her birine ait konular renmenizde ve bunlar kullanmanzda size
yardmc olacak eitli blmlere ayrlmtr.
Bu kitap, Kaynandan Eitim serisinin bir parasdr. Kavramsal bilgiler, ayrntl konu
ierii ve adm adm aklamalarla zenginletirilmitir. Ayrca her derste u zelliklerden
faydalanlmtr:
Kodlar iin kullanlan zel font: Bu fontlar sayesinde kitaptaki kodlar kolayca ayrt
edebilirsiniz. Kodlar, dier metinlerden farkl zel bir fontla biimlendirilmitir.
talik metinler: talik fontlar, okuyucunun yazmas gereken metinleri gstermek
iin kullanlmtr. Numaralandrarak hazrladmz admlar uygularken yazmanz

gereken metinleri bylece kolayca anlayacaksnz.
GR xv
pucu: pucu szcyle gsterilen ksa blmlerde, sk kullanlan ilemleri
gerekletirmek iin faydalanabileceiniz ksayollar ve sk rastlanan sorunlar zmek

iin rendiiniz becerileri kullanabileceiniz yntemler sunulmaktadr.
Not: Not szcyle gsterilen ksa blmlerde, ilgili konulara ait ilave bilgiler
verilmektedir.
Ekler: Ek blmleri, dzenli ifadelerden PC ve Mac ksayollarna kadar
Dreamweaverla ilgili eitli faydal bilgiler iermektedir.
Bu kurs, her derste ilerlerken becerilerinizi aamal olarak gelitirmenizde size yardmc
olacak ekilde gelitirilmitir. Kursu tamamladnzda Dreamweaver konusunda
gerekten yetkin bir duruma geleceksiniz.
Kitapla birlikte verilen CDde her bir dersi tamamlamak iin gerekli tm dosyalar
bulunmaktadr. Her derse ait dosyalar, ilgili dersin numarasyla adlandrlm ayr birer
klasrde bulunmaktadr. Sabit diskinizde bir klasr oluturmanz ve kitapla almaya
balamadan nce btn ders dosyalarn bu klasre kopyalamanz neririz.
Kitaptaki derslerde, u koullarn saland farz edilmitir:
Windows ya da Macintosh iletim sisteminde menleri kullanmak, dosyalar amak
ve kaydetmek, vb. ilemlere yabanc deilsiniz.
Bilgisayarnzda Dreamweaver 8 kurulu durumda.
Bilgisayarnz bu blmn sonunda belirtilen sistem gereksinimlerini karlyor.
Macromedia Kaynandan Eitim Dizisi

Program renmekte olan okuyucular iin ideal olan Kaynandan Eitim Dizisi
dizisindeki kitaplarda, programla ilgili salam bir altyap oluturan uygulamal dersler
yer almaktadr. Uygulayarak daha iyi rendiinizi dnyorsanz, bu dizi tam size
gre demektir. Her Kaynandan Eitim kitab, saatlerce uzunlukta zengin uygulamalar
iermektedir. Bu uygulamalar, profesyonel dzeyde, gelimi projeler olutururken
ihtiya duyacanz teknikleri renmenizi salayacak ekilde tasarlanmtr. Her kitapta,
derslerde kullanacanz btn dosyalar ve karlatrma yapmak iin inceleyebileceiniz
tamamlanm proje dosyalarn, vs. ieren bir CD yer almaktadr.
Macromedia Yetkili Eitim ve Sertifikasyon Sistemi

Bu kitap, kaynaktan gelen ierii kullanarak kendi kendinize alabilmenizi salayacak
ekilde hazrlanmtr. Macromedia Yetkili Eitim Orta (Macromedia Authorized
xvi GR
Training Partner) program kapsamnda yer alan dier eitim seeneklerini de

deerlendirebilirsiniz. Macromedia Sertifikal Eitmenleri (Macromedia Certified
Instructors) tarafndan verilen uygulamal derslerle eitiminizi ok ksa srede
tamamlayabilirsiniz. Macromedia Universityden online etkileimli eitim alarak bu
konudaki her eyi kendi kendinize renmeniz de mmkn. Tm bu eitim seenekleri,
sizi Macromedia Sertifikal Gelitirici (Macromedia Certified Developer) olmaya
hazrlayacaktr.
Macromediann Sertifikal Eitim kurslaryla ilgili ayrntl bilgi iin http://www.
macromedia.com/support/training adresini ziyaret edebilirsiniz. Ayrca bu kitabn Trke
basmnn yayncs olan Medyasoftun Web sitesinden de tm Macromedia yazlmlaryla
ilgili eitimler hakknda bilgi alabilirsiniz: http://www.medyasoft.com.tr/MedyaSoft/
egitimmerkezi
Neler reneceksiniz?
Bu dersleri takip ederek kendi Web sitelerinizi hazrlamak ve ynetmek iin ihtiya
duyacanz becerileri gelitireceksiniz.
Bu kursun sonunda unlar renmi olacaksnz:
Dreamweaver aacak, sayfalar oluturacak ve bu sayfalar Web tarayclarnda
nizleyeceksiniz.
Programdaki yerleik stilleri kullanarak metinleri farkl byklk deerleri, renkler ve
stillerle biimlendireceksiniz.
Aralarnda metin dosyalar, Word belgeleri ve hesap tablolarnn da yer ald eitli
kaynaklardan metin aktaracaksnz.
Resimler ekleyerek bunlarn grnmn kontrol edeceksiniz.
Siteniz iin e-posta balantlar ile dahili ve harici balantlar oluturacak ve bunlar
yneteceksiniz.
Dorudan HTML kodlarnn iinden nasl deiiklik yapldn reneceksiniz.
Yerleim dzeni zerinde daha fazla kontrol sahibi olmak iin metinleri ve resimleri
tablolarn iine yerletireceksiniz.
Sayfalarnzda resim tabanl rolloverlar ve etkileim zelliine sahip farkl elemanlar
kullanacaksnz.
Site penceresini kullanarak dosyalarnz ve klasrlerinizi yneteceksiniz.
Ayn elemanlar hzl bir ekilde tekrar kullanabilmek iin ktphane eleri
oluturacaksnz.
GR xvii
Sitenin grnmnn tutarl olmasn salamak iin ablonlar oluturacaksnz.

Sayfalarnz ok sayda insan tarafndan eriilebilecek ekilde hazrlayacak
ve ziyaretilerinizi kullandklar tarayc srmne gre alternatif sayfalara
ynlendireceksiniz.
Sayfalarnza bir arka plan resmi ekleyecek ve sayfalarnzn arka plan renklerini
deitireceksiniz.
Metinlerin grnm zerinde daha fazla kontrol sahibi olmak iin CSS kullanarak
metin niteliklerini ayarlayacaksnz.
Dreamweaver ihtiyalarnza uygun hale getirmek iin zelletirecek ve programa
yeni beceriler ekleyeceksiniz.
Minimum Sistem Gereksinimleri

Windows
800 MHz Intel Pentium III ya da edeer veya daha yeni bir ilemci
Microsoft Windows 2000 ya da Windows XP
256 MB RAM (birden fazla Studio 8 rnn ayn anda altrmak iin 1 GB tavsiye
edilir)
1024 x 768, 16-bit monitr (32-bit tavsiye edilir)
650 MB bo sabit disk alan
Macintosh
600 MHz PowerPC G3 veya daha yeni bir ilemci

Mac OS X 10.3, 10.4
256 MB RAM (birden fazla Studio 8 rnn ayn anda altrmak iin 1 GB tavsiye
edilir)
1024 x 768, binlerce renk zelliine sahip monitr (milyonlarca renk tavsiye edilir)
300 MB bo sabit disk alan
xviii GR
Dreamweaver 8
Temelleri
Macromedia Dreamweaver 8, 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.
Bu derste Web sitesi gelitirme srecinin (tamamen yeni bir Web sunumu ya da mevcut
bir sitenin yeniden tasarlanmas ii olabilir) en nemli admlar olan siteyi planlama ve
hazrlamann temellerini renerek ie balayacaksnz. Bu sre iinde, kitapta kullanlan
siteyi de yakndan tanyacaksnz. Burada kullanlan proje (San Franciscodaki bir yoga
stdyosu olan Yoga Sanghann Web sitesinin yeniden tasarlanmas) gerek bir rnektir.
Daha sonra Dreamweaver 8in temellerini renecek ve programn arabirimini ve
aralarn tanyacaksnz. Makinenizde, Yoga Sangha sitesinin blmlerini gelitirirken
oluturacanz sayfalar ierecek yerel bir site oluturarak temel site ynetim zelliklerini
kullanmaya balayacaksnz.
Bu derste, kitapta kullanacanz sitenin
hazrlanmas ve ayarlarnn yaplmas
ilemlerini tamamlarken bir yandan da
Dreamweaver arabirimini tanyacaksnz.
Bu derste, basit bir Web sayfas oluturmak ve mevcut bir sayfay amak, ayrca
almanz farkl Web tarayclarnda test etmek (bu, ilevsel ve eriilmesi kolay Web
siteleri hazrlamak iin gerekli bir admdr) iin belge ayarlaryla nasl alacanz
reneceksiniz. Ayrca bu derste Dreamweaver kendi alma aknza uygun olarak
nasl zelletireceinizi renecek ve Dreamweavern ilevlerini gelitirme yollar
hakknda bilgi edineceksiniz.
Bu dersin en son uygulamasnda, bu derste rendiiniz beceri ve teknikleri kendi Web
projelerinize uygulamaya balayacaksnz.
CD-ROMdaki Lesson_01_Basics klasrnn iinde bulunan Completed klasrnde Ders
1in (Lesson 1) tamamlanm bir rneini bulabilirsiniz.
Neler reneceksiniz?
Bu derste unlar reneceksiniz:
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
Yaklak Sre
Bu dersin tamamlanmas yaklak 1 saat srecektir.
Ders Dosyalar
Balang Dosyalar:
Lesson_01_Basics/resources/client-questionnaire.doc
Tamamlanm Proje:
Lesson_01_Basics/Completed/yoga.html
Lesson_01_Basics/Completed/yoga-sangha-responses.pdf
DERS 1
alma Alannn Tannmas

Dreamweaver ile almaya balayabilmek iin arabirimi ve alma alanndaki balang
seeneklerini tanmanz gerekir. Programn Windows ve Macintosh srmleri arasnda
kk baz farklar vardr.
Windows Kullanclar iin: Dreamweaver 8i Windows ykl bir bilgisayarda ilk defa
aacaksanz, sizden iki alma alanndan birini semeniz istenecektir: Designer ve

Coder. Bu uygulamada Designer alma alann semeniz gerekiyor, nk btn kitapta
bunu kullanacaz. Designer alma alan, Dreamweaver ile ilgili btn pencereleri
ve panelleri grsel tabanl Web sitesi tasarm iin optimize edilmi bir ortamda bir
araya getirmektedir. Bu, tasarmclar iin ideal bir zelliktir. Coder alma alan asl
olarak HTML ve dier Web ve programlama dilleriyle almak isteyen programclar
iin tasarlanmtr. Btn Dreamweaver zelliklerine ve aralarna her iki alma
alanndan da eriebilirsiniz. alma alanlarnda aralar optimize ayarlarda olacak ekilde
dzenlenir.
stediiniz zaman Window > Workspace Layout komutunu ve ardndan da istediiniz
alma alann seerek Designer alma alan ile Coder alma alan arasnda gei
yapabilirsiniz.
Macintosh Kullanclar iin: Yukarda bahsedilen Designer ve Coder alma alan
seenekleri Macintoshta mevcut deildir. Macintosh, ihtiyalarnza gre dzenleyerek

ayn optimize ortam elde etmenizi salayan bir kayar panel sistemi kullanr.
Dreamweavern alma alannn zelletirilmesiyle ilgili ayrntlar bu dersin devamnda
ve kitap boyunca greceksiniz.
Dreamweaver 8 Temeller
Balang Sayfas
Dreamweaver 8i atktan sonra Bir Balang Sayfas (Start Page) 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
Siz Dont show again (Tekrar gsterme) onay kutusunu iaretlemedike, Dreamweaver
her atnzda Balang Sayfas karnza kacaktr.
Alta Balang Sayfas grnmyorsa ve siz de bu sayfay grmek
istiyorsanz, Dreamweavern Preferences blmnden Balang
Sayfasnn grntlenmesiyle ilgili ayarlar deitirebilirsiniz. Bunun iin
Dreamweaver > Preferences (Macintoshta) ya da Edit > Preferences
(Windowsta) komutunu setikten sonra Category listesinden General
seip Document Options blmndeki Show Start Page onay kutusuna
tklayn. Bu seenekteki onay iareti, program aldnda Balang
Sayfasnn grntleneceini gsterir. Onay iareti yoksa, program
aldnda sayfa grntlenmez.
Yeni bir sayfaya oluturma ilemine baladnzda veya Balang Sayfasndaki dier
seenekleri kurcaladnzda Balang Sayfas kendiliinden kapanr. Macintosh
kullanclar, sol st kesindeki Close dmesini kullanarak da bu pencereyi kapatabilirler.
Dreamweaver 8in
Balang Sayfas
DERS 1
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. Yoga Sangha Web sitesinin gelitirilmesinde kullanlan Mteri anketinin tam
hali CD ROMdaki Lesson_01_Basics/resources klasrnde verilmitir. Bu blmde, Yoga
Sangha tarafndan anketteki en nemli sorulara verilen cevaplar bulacaksnz. Bu cevaplar,
Yoga Sangha sitesinin nasl gelitirildiini ve burada ele alnan srecin sitenin gelitirilmesinde
neden temel rol oynadn anlamanz salayacaktr. Bu sreci tmyle anladktan sonra
burada edindiiniz tecrbelerden kendi Web sitelerinizi olutururken de faydalanacaksnz.
Kime hitap edeceksiniz, bu siteye neden ihtiya var ve sitenizin ziyaretilerinin
neden sitenize gelmesini istiyorsunuz? Hitap edeceiniz kitleyi doru belirlemeniz ok
nemlidir. Genel bir kullanc profili tanmlamak hedef kitlenize etkin olarak ulamanz
kolaylatracaktr. Farkl tipte kullanclara hitap ediyor olabilirsiniz. Byle bir durumda her
biri iin ayr bir profil gelitirin.
Hitap edeceiniz kitleyi belirledikten sonra bu insanlarn nasl bir teknolojiye sahip
olabilecei konusunu dnn. Ziyaretilerinizin byk bir ounluu acaba hangi
eklentileri, hangi Web tarayclarn, hangi iletim sistemlerini kullanyor? Ziyaretilerinizin
kulland aralarn tipi, hedef kitlenizin kolayca eriebilecei bir Web sitesi yaratrken
dikkat etmeniz gereken ok nemli bir faktrdr. rnein sadece en yeni ve en gncel Web
tarayclarnn destekledii elemanlar ieren bir site oluturuyorsanz ve ou ziyaretinizin
bilgisayar bu tarayclar altramayacak kadar eskiyse bu durum pek ho olmayacaktr.
Sitenizin hizmet edecei amacn ne olacan ve her bir potansiyel kullancnn siteden
ne ekilde faydalanabileceini iyice dnn. Site bu amac yerine getirmek iin nasl
bir ierie sahip olmal? Ziyaretilerin sitenizde yapacaklar eylerle ilgili muhtemel
senaryolar belirlemek iin, daha nce oluturduunuz ziyareti profil(ler)ini kullann.
Proje Sitesi: Yoga Sanghann Hitap Edecei Kitle

Kime hitap edeceksiniz? Potansiyel rencilerin ve site ziyaretilerinin ilgi
alanlar ve ya aralklar ne?
Yoga yapmak isteyen ya da salklarn fiziksel aktiviteler vastasyla gelitirmek isteyen
20-60 ya arasndaki yoga rencilerinin dikkatini ekmek istiyoruz.
Bu kitle Web sitenizi ve irketinizin salad hizmetleri nasl kullanacak?
Sitedeki bilgileri, gitmek istedikleri snf ve atlye almalarn semeleri iin
kullanmalarn istiyoruz. Kalitemizi, derinliimizi, balantlarmz ve kiisel hizmetlerimizi
gsteren hizmetlerimiz ve stdyomuzla ilgili fikir edinmelerini istiyoruz.
Yoga Sangha rencilerine nasl yardmc oluyor ve onlarn normal programlaryla
sizin derslerinizin arasndaki uyumu nasl salyorsunuz?
Bunu, hem gndz, hem de gece olmak zere farkl beceri seviyelerinde yoga dersleri
vererek ve atlye almalarn da hafta sonlarnda yaparak salyoruz. Bu da rencilerin
form durumlarna ve kiisel programlarna uygun bir snf ya da atlye almas
bulabilmelerini salyor.
rencilerin Yoga Sanghay semelerini salayacak balca sebepler neler?
nk biz rencilerimizin yaadklar yere yaknz, nk Anusara yoga retiyoruz ve
nk en sevdikleri hocalar Yoga Sanghada ders veriyor. Ayrca Yoga Sanghada sadece
durular deil, yogann nasl uygulandn da reniyorlar.
Site nasl bir ierik gerektiriyor? Sitede kullanlacak materyali belirlemek ve toplamak,
bir Web sitesi tasarlama ve oluturmaya hazrlk ksmnn nemli aamalarndan biridir.
Metinler, resimler ve multimedya elemanlar gibi btn ierii toparlamanz gerekir.
Bu elemanlar dzenlemek eksiksiz ve ayrntl bir Web sitesi hazrlamanzda size ok
yardmc olacaktr. Bylece ne tr ieriklerin gelitirilmesi gerektiini belirleyebilirsiniz.
Proje Sitesi: Yoga Sanghann erii

Sitede olmasn istediiniz blmleri, zellikleri ve ierii bir liste halinde yazn. Bu
ierik bileenlerinden hangileri mevcut ve hangilerinin gelitirilmesi gerekiyor?
Sitede bir stdyo turu, aylk haberler, Katchie ve Jaynein (stdyonun sahipleri) ayda
bir yazacaklar bir mektup, bir harita ve talimatlarn olmasn istiyoruz. Bunlarn hepsinin
gelitirilmesi gerekiyor. Ayrca sitede ayda ya da ayda bir olmak zere, dnyada baarl
ilere imza atan kr amac gtmeyen kurululara (NGO), belirli hocalarn yazlarna ve
gelecekteki ihtiyalar temel alarak, iletmek istediimiz dier bilgilere yer vermek istiyoruz.
Yine bunlarn da gelitirilmesi gerekiyor.
DERS 1
Sitede ziyaretilerle iletiiminiz nasl olacak ve onlara neler anlatacaksnz?

Sitede ziyaretilerinize ne anlatacanz tam olarak bilmeniz ok nemlidir.
Ne sylemeye altnz bilmiyorsanz ziyaretiler de bunu muhtemelen
anlamayacaktr. Sitenizin mesajn ak bir ekilde belirtin. Ziyaretilerle iletiim
kurmak, etkili bir sitenin kalitesini koruyabilmenin nemli bir bileenidir.
Proje Sitesi: Yoga Sanghann

letiimle lgili Hedefleri
Sitenizin temel hedefleri neler?
Stdyomuz, topluluk bilinciyle faaliyet gsteren, evreye duyarl ve kiisel bir stdyodur.
Web sitemizde Anusara Yoga felsefesini ve stdyomuzla ilgili deneyimleri, kiisel duygular,
toplumsal konular iletmek istiyoruz. Biz ayrca, gelecek seneden itibaren stdyomuzun
tam bir Yeil stdyo olmas, yani tam bir ekolojik sorumluluk ve srdrlebilirlie sahip
olmas iin yeni bir programa dahiliz. Aktivizmin nemli isimlerinin katlaca konferanslar
araclyla yogann gnlk hayatla ilikisini gstermek, ekolojik bilin, beslenme, toplum
ilikileri, felsefe ve meditasyon konularndan bahsetmek istiyoruz.
Yeni bir Web sitesiyle ilgili olarak yaplacak aratrmann son ksmn, rekabet durumunu
incelemek oluturur. Hazrladnz Web sitesi sadece belirli bir kesime hitap edecek olsa
bile bu adm hayati nem tar. nk Web, neredeyse manta uygun her trl Web
sitesinin zaten hazrlanm olduu ok byk bir alandr. Rakiplerinizi tanr ve onlarn
Web sitelerini nasl hazrladklarn bilirseniz, farkl bir eyler ortaya koyabilirsiniz.
Rakiplerinizin Web sitelerinin tasarmnda zayflklar ve zellik anlamnda birtakm
eksiklikler olabilir ve siz bunlar grebilirsiniz. Byle bir durumda ok daha farkl bir site
tasarlayabilir ve dierlerinden stn olduunuzu gsterebilirsiniz. Eer rakiplerinizin Web
sitesi gerekten iyi bir tasarma sahipse, bu da size daha iyi bir Web sitesi hazrlamak iin
itici g olabilir. Her halkarda, eer rakiplerinizin yaptklarn dikkate almazsanz, bu
sizin ve tasarmn yaptnz Web sitesi iin bir dezavantaj yaratacaktr.
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. Gelitirme
srecinin bu nemli aamas, bu kitapta greceiniz ilk konudur.
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.
Ayrntl bir ak emas ya da storyboard ile birlikte sitenin kapsaml bir taslan
hazrlamak, planlama srecinin nemli bir admdr.
3. aamadaki tasarm evresinden nce ieriin organize edilmesi ve ayr ayr ve daha
ayrntl sayfa seviyesinde ak emalarnn gelitirilmesi genellikle bu aamada
gerekletirilir. Sayfa seviyesindeki ieriin organize edilmesi konusunu Ders 2de
greceksiniz.
Dosya ve klasr yapsn oluturmak: Gelitirme srecinden nce dosya ynetimi
iin bir strateji hazrlamak nemlidir. Bunu gerekletirmek iin kullanabileceiniz gzel
yntemlerden biri, her dosya tipi iin farkl tipteki medya elerini ayr klasrlerde
tutmaktr. Bir HTML klasr, bir resim klasr, bir CSS (Cascading Style Sheets)
klasr ve bir multimedya klasr kullanabilirsiniz. rnein sadece HTML ve XHTML
dosyalarn ieren html_docs adnda bir klasr kullanmak, bu dosyalar dzenli bir
ekilde tutmanz ve kolayca bulmanz salayacaktr. Eer site ok bykse, onu, her
ksm ve alt ksm iin birer klasr olacak ekilde daha kolay ynetilebilir paralara
ayrmak isteyebilirsiniz. Byle bir durumda her ksm ve alt ksm klasrnde ayn dosya
tipleri iin birer klasr kullanabilirsiniz. Site genelinde kullanlan resimler gibi eler
varsa, ayn dosyalar site iinde farkl konumlarda tekrar tekrar oluturmamak iin
ana klasr iinde bu tr dosyalar iin ortak bir klasr ya da klasrler oluturabilirsiniz.
Farkl klasr seviyelerinde grafik tabanl bir ak emas oluturmak, klasr hiyerarisini
tanmlamanzda size yardmc olacaktr. Anlalr ve iyi yaplandrlm bir Web sitesinin
gelitirilmesi ve devamllnn salanmas, iyi organize edilmemi bir siteye gre ok
daha kolay ve verimli bir ekilde gerekletirilir. Site yaps ve klasr hiyerarisi, Ders 3te
greceimiz balantlarla da ilikili olduu iin, bu konularla renecekleriniz bu derste
anlatlanlarla snrl deil. Bu kitapta dosya organizasyonu derslere gre dzenlenmitir.
Bir sonraki uygulamada, DW8_YogaSangha/Completed_YogaSangha_
SampleSite klasrndeki klasrleri ve dosyalar inceleyerek Yoga Sangha
proje sitesinin yapsn greceksiniz.
3. Aama: GelitirmeSitenin Tasarlanmas
Bir Web sitesi tasarlarken almaya, genel tasarm gsteren kk resimler oluturarak
almaya 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. Sitede
kullanlacak grafik elerinin birou bu aamada oluturulur. Sayfa dzeni oluturma
konusunu Ders 4te, resimleri sayfalara yerletirme konusunu da Ders 5te greceksiniz.
DERS 1
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 greceksiniz; bununla birlikte 3.
aamaya ait prodksiyon evresi kitaptaki neredeyse tm dersleri kapsamaktadr.
1. ve 2. aamann prodksiyon ncesi admlarnda neler olduunu (bunlar proje sitesi
iin nceden hazrlanm durumdadr) anladnza gre, Yoga Sangha projesinin belirli
blmlerini Dreamweaver ile yeniden oluturmak iin hazrsnz demektir. Kitapta proje
zerinde almaya devam ederken, btn aratrma, ierik ve tasarm almalarn gzel
bir Web sitesinde bir araya getiren HTML belgelerini yaratarak siteyi Dreamweaverla
nasl oluturacanz reneceksiniz.
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. Ders 14te de greceiniz
gibi, Dreamweaver 8 size bu postprodksiyon ilemlerinde yardmc olabilir.
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 8, ktphane eleri, ablonlar ve dier aralar yardmyla
Web sitelerinin devamlln salama ilemini kolaylatrmak iin birok zellik sunar.
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.
(Dreamweavern bu zelliklerle ilgili aralarn sonraki derslerde greceiz.)
Sitenizin gelitirilme aamas sabit diskinizdeki yerel sitede gerekleir. Sayfalarnz burada
oluturur ve balangtaki test aamasn burada gerekletirirsiniz.
Bir sitenin ayarlarnn hemen yaplmas art deildir ama tavsiye edilir.
Dreamweaver siteyle ilgili ayarlar yapmadan dosyalar hzl bir ekilde
dzenlemenize, balamanza ve aktarmanza izin verir. Site ynetimiyle ilgili
ayrntlar Ders 14te greceksiniz.
1. CD-ROMdaki DW8_YogaSangha klasrn sabit diskinize kopyalayn.
DW8_YogaSangha klasr, sitenizin yerel kk klasr olacaktr. Bu klasr, kitapta belirli

blmlerini hazrlayacanz Yoga Sangha proje sitesinin tm dosyalarn ve klasrlerini
ierecektir. Kendi siteleriniz zerinde almaya baladnzda her site iin ayr bir kk
klasr oluturmanz gerekecek.
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.
Yerel kk klasrnz sabit diskinizde Dreamweaver 8 uygulama klasr dnda
bir yere kaydetmelisiniz. Eer onu Dreamweaver 8 uygulama klasrnde tutarsanz,
Dreamweaver yeniden yklemeniz gerektiinde btn almalarnz kaybedersiniz.
10 DERS 1
Yerel kk klasrlerini saklayabileceiniz konumlarla ilgili tavsiyeler:

Macintosh: Macintosh HD/[KullancAd]/Sites/yerel kk klasr
Windows: Belgelerim\yerel kk klasr
2. Dreamweaver Balang sayfasndaki Create New blmnden Dreamweaver
Site sein.
Site > New Site ya da Site > Manage Sites komutunu seip New dmesine
tkladktan sonra alan menden Site seerek de yeni bir site
oluturabilirsiniz. Bu ilemden sonra Site Definition iletiim kutusu alacaktr.
Basic ve Advanced adndaki iki sekmesiyle birlikte Site Definition iletiim kutusu
alacaktr. Bu sekmeleri kullanarak bir site tanmlama ilemini nasl gerekletirmek
istediinizi seebilirsiniz. Basic, iletiim kutusunu atnzda varsaylan olarak grnen
moddur ve ilem boyunca size adm adm yardmc olur. Advanced modu, yaplandrmada
kullanabileceiniz bir dizi ilave seenek ve ayar sunar. Basic modundaki aklayc
metinler burada grntlenmez.
Bu uygulamada henz seili durumda deilse Basic sekmesine tklaynz.
Site Definition iletiim kutusunun Basic blm
Dreamweaver 8 Temeller 11
3. Dreamweaver, Site Definition iletiim kutusunun Basic sekmesinde What would

you like to name your site? ifadesiyle sitenizin adnn ne olacan soracaktr.
Site ad kutusuna Yoga Sangha yazn ve Next dmesine tklayn.
Yoga Sangha, burada oluturduunuz proje sitesinin addr. Kendi sitelerinizi olutururken
atayacanz isimler, sitelerinizin kolayca tannmasn salamaldr. 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 Address metin alann bo brakmanz gerekir. HTTP Address (sitenin
URLi), site kkyle ilikili balantlar tanmlamak iin kullanlr; bu konuyu Ders 3te
greceiz. Bu seenek istee baldr ve bu kitapta yer alan uygulamalarda gerekli deildir.
Basic grnmndeki bu blm, Advanced grnmndeki Local Info
kategorisinin Site metin alanna karlk gelir. Siteyi tanmlama ilemi boyunca
Advanced grnmn kontrol etmek iin Basic ve Advanced grnmleri
arasnda gei yapabilirsiniz. Advanced grnmyle Ders 14te alacaksnz.
4. Dreamweaver, Do you want to work with a server technology such as
ColdFusion, ASP.NET, ASP, JSP, or PHP? ifadesiyle ColdFusion, ASP.NET,
ASP, JSP ya da PHP gibi bir sunucu teknolojisiyle alp almayacanz
soracaktr. No, I do not want to use a server technology seeneine ait radyo
dmesine tklayarak bir sunucu teknolojisi kullanmak istemediinizi belirtin.
Next dmesine tklayarak bir sonraki blme gein.
u anda veritabanlar ya da dier sunucu teknolojilerini kullanan sayfalar oluturmadnz

iin No seeneini iaretlemeniz gerekiyor. Site ayarlarnda deiiklik yapmanz gerektiinde
Site > Manage Sites komutunu, ardndan da listeden istediiniz siteyi seip Edit dmesine
tklayarak bu ilevi daha sonra eklemeniz mmkndr.
Site Definition
iletiim kutusunda
sunucu teknolojisi
seeneinin
ayarlanmas
12 DERS 1
Basic grnmnn bu blm Advanced grnmndeki Testing Server

kategorisine karlk gelir. Bu da, uzak sunucuda kullanlan sunucu modelinin
seilmesi gibi dinamik siteler oluturmayla ilgili ilave seenekler sunar.
5. Bu blmn st ksmnda Dreamweaver, How do you want to work with your
files during development? ifadesiyle gelitirme srecinde dosyalarnzla nasl
almak istediinizi sorar. Edit local copies on my machine, then upload to
server when ready (recommended) seeneine tklayn.
Site Definition
iletiim
kutusunda
dosyalarla
alma eklinin
belirlenmesi
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.
Eer dorudan bir sunucu zerinde alyorsanz, yaptnz tm deiiklikler hemen
orijinal dosyalara uygulanr.
6. Yine bu blmde Dreamweaver, Where on your computer do you want to store

your files? ifadesiyle dosyalarnz bilgisayarnzda nerde saklamak istediinizi
sorar. Metin alannn sandaki klasr simgesine tklayn ve DW8_YogaSangha
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. Yollar ve
balantlar konusunu Ders 4te greceksiniz.
DW8_YogaSangha klasr, bu uygulamann birinci admnda CD-ROMdan sabit diskinize
kopyaladnz klasrdr. Varsaylan durumda metin alannda balangta Yoga Sangha
adndaki klasre ait bir yol bulunur. Bu varsaylan seenei kullanarak sabit diskinizde Yoga
Sangha adnda yeni bir klasr oluturun. Bu, sizin yerel kk klasrnz olacak. Dosyalar ieren
DW8_YogaSangha klasrn kullanmanz gerektii iin bu klasre erimeniz gerekmektedir.
Macintosh kullanclar iin: Sabit diskinizdeki DW8_YogaSangha klasrn bulup sein ve
Choose dmesine tklayn.
Windows kullanclar iin: Sabit diskinizdeki DW8_YogaSangha klasrn bulup sein
ve Open dmesine tklayn, ardndan DW8_YogaSangha klasrn yerel kk klasrnz

olarak ayarlamak iin Select dmesine tklayn. DW8_YogaSangha klasrnn seileceini
gstermek iin Choose Local Root Folder For Site Yoga Sangha iletiim kutusunun sol alt
kesinde Select:DW8_YogaSangha metni belirecektir.
Sabit diskinize kopyaladnz DW8_YogaSangha klasrn (CD-ROMdakini
deil) setiinizden emin olun. Windowsun baz srmlerinde CDden
kopyalanan dosyalar salt okunur olarak iaretlenir. Bu durumu dzeltmek iin,
kopyaladktan sonra tm dosyalar sein (Ctrl+A), Properties (zellikler)
penceresini an (Alt+Enter tularna basarak ya da seilen dosyalar sa tklayp
Propertiese [zellikler] tklayarak) ve Read-Only (Salt Okunur) onay kutusunun
iaretini kaldrn. Ardndan Apply (Uygula) veya OK (Tamam) dmesine tklayn.
Site definition
iletiim
kutusunda
yerel kk
klasrnn
belirlenmesi
14 DERS 1
Yerel kk klasrne (DW8_YogaSangha) giden yol, metin alannda grntlenecektir ve

bunun konumunun sabit diskinize gre tanmlanm olduunu greceksiniz.
Bununla birlikte bu durumda, yerel kk klasrnz olarak mevcut (ve bu kitaptaki
derslerde ihtiyacnz olan dosyalar ieren) DW8_YogaSangha klasrn semeniz gerekir.
Kendi sitelerinizi olutururken eer mevcut bir klasrnz yoksa, Dreamweavern siteniz
iin setiiniz ismi temel alarak otomatik olarak bir klasr oluturmasna izin vererek
iinizi kolaylatrabilirsiniz.
Gelimi Site Tanm Seenekleri

Basic grnmn bu blm (yerel kk klasrn belirlediiniz blm), Advanced
grnmndeki Local Info kategorisinde bulunan Local root folder metin alanna
karlk gelir. Advanced site tanm grnm ayrca yerel dosya listesini otomatik olarak
gncellemenizi (Refresh Local File List automatically), nbellei etkinletirmenizi
(Enable Cache), varsaylan resim klasrn (Default Images folder) ve HTTP adresini
(HTTP Address) tanmlamanz salar.
Refresh Local File List seenei varsaylan durumda iaretlidir. Bu da site klasrne
yeni bir dosya eklediinizde Dreamweavern site listesini gncellemesini salar. Eer
bu seenein iaretini kaldrrsanz, dosya ekleme ya da silme gibi deiikliklerden sonra
yerel dosyalar elle yenilemeniz gerekir.
Enable Cache seenei varsaylan durumda iaretlidir. nbellei etkinletirme seenei,
sk kullanlan site verilerini saklamak iin bellekte yer ayrr ve bylece balant ve site
ynetimi ilemlerini hzlandrr. Site nbellei bilgileri bilgisayarnzn RAM belleinde
saklayarak nbellei kullanan zelliklere eriimi hzlandrr. Bu seenek etkinse, siz
almaya devam ederken Dreamweaver nbellekte saklanan bilgileri srekli gnceller.
Her ne kadar nbellek seeneini etkin durumda brakmak genelde en iyi yaklam olsa
da, ok byk sitelerde nbellein yeniden oluturulmasnn ilemleri yavalatabileceini
de unutmayn.
Default Images folder, sitenizdeki resimlerin konumunu tanmlamanz salar ve resim
eklemek zere resimlerin bulunduu konuma ularken harcayacanz zaman azaltabilir.
Resimlerin kullanmn Ders 5te greceiz.
Yine istee bal bir seenek olan HTTP address ile Web sitenizin URLini
tanmlayabiliriniz. Bu adres mutlak balantlar dorulamak iin kullanlr. Balantlarla
ilgili ayrntl bilgi iin Ders 3e baknz.
7. Next dmesine tklayarak bir sonraki blme gein. Uzak sunucunuza

nasl balanacanz soran How do you connect to your remote server?
sorusunun altndaki None seeneini iaretleyin.
Site Definition iletiim kutusundaki balant seenekleri
u anda yerel bir site zerinde alyorsunuz ve bir uzak sunucuya erimeniz gerekmiyor.
Uzak bir sunucuya balanmayla ilgili ayrntlar Ders 14te bulabilirsiniz.
Basic grnmndeki ayarlarn bu blm Advanced grnmndeki
Remote Info kategorisine karlk gelmektedir. Bu da bir uzak sunucuya
dosya transfer etme konusuyla ilgili ilave seenekleri (sunucuda dosyalar
saklamak iin kullanlacak klasr belirlemek gibi) ierir.
16 DERS 1
8. Next dmesine tklayarak bir sonraki blme gein. Yeni tanmladnz site
bilgilerini gzden geirin ve iletiim kutusunun alt ksmndaki Done dmesine
tklayn.
Site Definition iletiim kutusundaki site bilgileri zet grnm
Remote Info ve Testing Server blmlerinde No seeneini iaretlediiniz iin,

Dreamweaver her ikisi iin de eriim ayarlarnn daha sonra yaplacan bildiren Access:
Ill set this up later. ifadesini grntleyecektir.
Done dmesine tkladnzda Dreamweaver sitenin nbelleini oluturmak iin
DW8_YogaSangha klasrndeki dosyalar tarar. Dreamweaver ilk kez nbellek oluturma
ilemini tamamladnda ksa bir sreliine bir iletiim kutusuyla karlaabilirsiniz. ok
byk sitelerde nbellei oluturmak daha uzun srer.
Files panelinde artk DW8_YogaSangha klasrn greceksiniz. Varsaylan durumda Files

paneli, bu derste daha sonra greceiniz panel gruplarnn alt ksmnda grntlenir. Files
paneliyle ilgili ayrntlar iin Ders 14e baknz.
Files panelinde
Yoga Sangha sitesi
grntleniyor
Daha nce Dreamweaverda bir site tanmlamadysanz, Files panelinde,

bilgisayarnzdaki klasrlerin hiyerarisi ve Manage Sites iletiim kutusunu
amak iin kullanabileceiniz bir balant grntlenir. Macintosh
kullanclar iin Site paneli alr mensndeki varsaylan seenek
Computerdr ve bu seenek balangta Macintosh HD, Network, FTP &
RDS Servers ve Desktop klasrn ierir. Windows kullanclar iin
varsaylan seenek, balangta My Computer (Bilgisayarm), My Network
Places (A Balantlarm), FTP & RDS Servers ve Desktop items elerini
ieren Desktoptur. Siz bir site oluturduktan sonra bu site varsaylan
seenek olur. Eer birden fazla siteniz varsa, Dreamweaver Files panelinde
en son kullanlan siteyi grntler. Files paneli Files panel grubunda yer alr.
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.
1. File > New komutunu sein. New Document iletiim kutusu alacaktr.
18 DERS 1
New Document iletiim kutusunu amak iin Cmd+N (Macintoshta) ya da

Ctrl+N (Windowsta) klavye komutlarn kullanabilirsiniz. Bu klavye komutlarn
kullanrken New Document iletiim kutusunu atlamak ve hemen yeni bir
belge amak isterseniz Dreamweaver > Preferences (Macintoshta) ya da Edit
> Preferences (Windowsta) komutunu sein, ardndan Category listesinden
New Documenti sein ve Show New Document Dialog on Command+N
(Macintoshta) ya da Show New Document Dialog on Ctrl+N (Windowsta)
seeneinin iaretini kaldrn. Bu blmde ayrca varsaylan belge tipini,
uzanty ve kodlamay deitirmenizi salayan seenekler bulunmaktadr.
Kitaptaki derslerde varsaylan seenekleri kullandnz kabul edilmitir.
Preferences iletiim kutusunu amann dier bir yolu da New Document
iletiim kutusunun alt ksmndaki Preferences dmesine tklamaktr.
New Document iletiim kutusu aldnda iki sekme grrsnz: General ve Templates.
imdiki uygulamada yeni bir HTML (Hypertext Markup Language) sayfas oluturacaksnz.
Yeni bir HTML sayfas oluturma seenei General sekmesinin Basic kategorisinde yer alr.
Bunlar varsaylan ayarlardr ve nceden seilmi olabilir.
New
Document
iletiim
kutusu
New Document iletiim kutusunda birok farkl tipte sayfa oluturmanz salayan ilave
seenekler de sunulur. Basic Page kategorisinde HTMLe ek olarak CSS (Cascading Style
Sheets), JavaScript ve XML gibi bir dizi seenek yer alr. Kullanabileceiniz dier sayfa tipi
kategorileri arasnda da Dynamic Pages (ASP, ColdFusion ve PHP gibi diller kullanlr)
ve Page Designs (kendi sitenizi olutururken balang noktas olarak kullanabilirsiniz)
sayabiliriz. letiim kutusunun sol tarafndaki kategori listesini (Dynamic, Templates, CSS
Style Sheets, Framesets ve Page Designs) kullanarak zel sayfa tiplerine eriebilirsiniz.
Buradaki uygulamada bu ilave sayfa tiplerinden herhangi birini kullanmayacaksnz, ama
bunlarn neler olduunu bilmeniz iyi olur. letiim kutusunun ortasndaki stunun ierii,
sol stunda seilen kategoriye gre deiir.
XHTML, XML ve Belge Tipi Tanmlar

Bir Web sayfasnn grsel ksmnn temelini kod oluturur. aretleme dili (markup language) olarak da adlandrlan bu bileen, ziyaretilerin tarayclarnda grd eyleri
oluturmak iin kullanlr. aretleme terimi; metin ve resim gibi elemanlar talimatlarla
tanmlayarak bir sayfann yapsn ve grnmn ve ayn zamanda bu elemanlarn nasl
grntleneceini tanmlar. Bu tanmlama ilemini de etiketler ve bunlarn nitelikleriyle
gerekletirir. Hypertext Markup Language (HTML) u anda en ok bilinen iaretleme
dilidir. Ancak HTML doas gerei snrldr. Bu ncelikle yeni zelliklerin genellikle geriye
ynelik uyumlu olmamas anlamnda geerlidir ve farkl tarayclarda kullanmyla ilgili pek
ok uyum sorunu ortaya kmaktadr. HTML, mevcut Web standartlarn karlayamad
ve bu standartlara uymasn salayacak gelime potansiyeline sahip olmad iin yava
yava kullanmdan kalkmaya balayan eski bir iaretleme dilidir.
XHTML (Extensible Hypertext Markup Language), bir XML (Extensible Markup Language)
dili olarak dzenleyerek HTMLin becerilerini gelitirmekte ve onun yerini almaktadr.
XML iaretleme dili, bir sayfann ieriinin ve yapsnn tanmlanmas araclyla yap,
ierik ve sunumun birbirinden ayrlmasnn nemini vurgular ve bunu kolaylatrr. Ancak
bu, grnm ya da sunum iin geerli deildir; tm sunum tanm CSS gibi aralarla ayrca
gerekletirilir.
XHTML kullanlmasnn avantajlar arasnda hem geriye, hem de ileriye ynelik uyumluluk,
cep telefonlar ya da avuii bilgisayarlar gibi alternatif Web eriimi salayan aralarda
kullanlabilirlik ve gelitirilebilme potansiyeli saylabilir. XHTML 1.0 Transitional, kullanlmas
artk uygun grlmeyen (endstride uyumluluk salanmas iin belirli Web standartlar
gelitiren bir kurum olan World Wide Web Consortium [W3C] tarafndan modas gemi
olarak tanmlanan) ve bu yzden XHTMLin daha kat kurallar ieren srmlerinde mevcut
olmayan baz HTML elemanlarnn kullanlmasna izin veren bir XHTML srmdr.
Kullanlmas artk uygun bulunmayan bu elemanlarn kullanlmasna izin vermesi dolaysyla
HTMLin XHTMLe dntrlmesi yoluyla geriye ynelik uyumluluu mmkn kld iin
XHTML 1.0 Transitional u anda Web gelitirme iin tavsiye edilen iaretleme dilidir.
Bu dillerin kullanm Belge Tipi Tanm (Document Type Definition - DTD) araclyla
tanmlanr. Ziyaretiler tarafndan grlmeyen DTD, Web sayfasn oluturan kodun en
banda bulunur. DTD, sayfada kullanlan iaretleme dilinin szdizimini belirtir, yani Web
taraycsnn veya Web eriim cihaznn sayfay nasl yorumlayacan tanmlar.
20 DERS 1
Dreamweaver varsaylan durumda, siz farkl bir tip semediiniz mddete

btn yeni HTML belgelerinde Belge Tipi Tanm (Document Type Definition
- DTD) olarak XHTML 1.0 Transitional kullanr. Yeni bir belgenin Belge Tipi
Tanmn New Document iletiim kutusunun alt tarafndaki DTD
mensnden istediiniz tipi seerek deitirebilirsiniz. Bu kitapta varsaylan
seenek olan XHTML 1.0 Transitional kullanacaksnz (DTD ayaryla
oynamayn). File > Convert komutunu ve kullanmak istediiniz tipi seerek
HTML ile XHTML arasnda dntrme ilemi yapabilirsiniz.
Siz Create dmesine tkladktan sonra balksz yeni bir XHTML belgesi alacak ve
Balang Sayfas otomatik olarak kapanacaktr.
Create New stunundan dosya tipini (mesel bu uygulamada
oluturduunuz HTML gibi) seerek dorudan Balang Sayfasndan da
yeni bir belge oluturabilirsiniz. Bu ilemi yaptktan sonra setiiniz tipte yeni
bir belge alacak ve Balang Sayfas kapanacaktr.
2. New Document iletiim kutusundaki General sekmesine tklayn ve kategori
listesinden Basic Pagei sein. Basic Page listesinden HTMLi sein ve Create
dmesine tklayn.
3. File > Save komutunu sein ve Lesson_01_Basics iindeki html_docs klasrn
bulun. Yeni dosyay bu klasre kaydedeceksiniz. Save As (Macintoshta) ya da
File Name (Windowsta) alanna yoga.html yazn ve Save dmesine tklayn.
Save As
iletiim
kutusu
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.
Belgenizi kaydetmek iin Cmd+S (Macintoshta) ya da Ctrl+S (Windowsta)
klavye komutunu kullanabilirsiniz. Belgelerinizi sk sk kaydedin. Bylece
herhangi bir sebeple bilgisayarnzn kmesi durumunda yaayacanz bilgi
kayb fazla olmaz.
Macintosh kullanclar iin: Dreamweaver, HTML belgesinin File Name metin
alanndaki dosya adnn sonuna otomatik olarak.html uzantsn ekler. Bu uzanty aynen
brakabilir ya da belgeyi farkl ekilde kaydetmek iin baka bir uzant seebilirsiniz.
Windows kullanclar iin: Dreamweaver, HTML belgelerini kaydederken File Name
metin alannda herhangi bir dosya uzants belirtilmemise dosya adnn sonuna otomatik
olarak .html uzantsn ekler. Dosya uzantsn siz de belirleyebilirsiniz.
Dreamweaver, oluturduunuz her dosyaya varsaylan dosya uzantsn ekler.
rnein bir CSS dosyas oluturuyorsanz, Dreamweaver dosya adna .css
uzantsn ekleyecektir.
Belgelerinizi her zaman .html uzantsyla kaydetmelisiniz. Eer Dreamweaver varsaylan

olarak .htm olarak uzantsn kullanrsa, Dreamweaver > Preferences (Macintoshta) ya
da Edit > Preferences (Windowsta) komutunu ve ardndan New Document kategorisini
seerek bu varsaylan uzanty deitirebilirsiniz. Varsaylan dosya uzants bir metin
kutusunda grntlenir. Kitaptaki uygulamalarda ve CD-ROMdaki materyalde .html
uzants kullanlmtr ve uygulamalarda varsaylan uzanty kullanacanz kabul
edilmitir.
.htm uzants, Windowsun sadece 3 karakterlik dosya uzantlaryla
alabildii eski zor gnlerden kalmtr. Hazrladnz site zerinde Windows
3.1 kullanan biri almayacaksa .htm uzantsn kullanmann bir gerei yoktur,
nk bu yaklam pek profesyonelce kabul edilmez.
22 DERS 1
Save As metin alannda yeni belgelere varsaylan olarak Untitled-1.html ad verilir. Burada
kullanlan numaralar, oluturulan her yeni belge iin srayla artar.
New Document ve Save seenekleri Standard ara ubuunda da
mevcuttur. Bu ara ubuunu View > Toolbars > Standard komutunu seerek
aabilirsiniz. Varsaylan Document ara ubuu dndaki ara ubuklar
sadece siz onlar etkin belgeye tadnzda ya da eklediinizde grnrler.
Deiiklikler dier belgelere yanstlmaz.
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.
Aralar Tanyalm
Web sayfas oluturma iinde daha fazla ilerlemeden nce Dreamweaver 8 arabiriminde
yer alan ve verimli bir ekilde Web siteleri oluturmanz salayan eitli aralar ve
panelleri tanmanz gerekir.
1. mleci belge penceresinin ve Document ara ubuunun zerine getirin. mleci
bir sre belirli bir dmenin zerinde tutun ve dmenin adnn belirmesini
bekleyin.
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.
Design grnm
Split grnm
Code grnm
Belge penceresi
Belgenin balk ubuu
Title metin alan
Document
ara
ubuu
Etiket
Seici
Dosya ismi olan yoga.html (nceki uygulamada bu sayfay bu isimle kaydetmitiniz) balk
ubuunda belirecektir (Windowsta dosya ad, belge penceresinin st ksmnda bir sekmede
gsterilir; bkz. Sayfa 31deki resim). Varsaylan durumda bu sayfa balangta Document ara
ubuundaki Title metin alannda gsterildii gibi Untitled Document olarak adlandrlr.
View > Toolbars komutu kullanlarak grnr ya da gizli hale getirilebilen Document ara
ubuunda eitli ilemlere kolayca eriebilmenizi salayan baz dmeler ve menler bulunur.
Varsaylan durumda ara ubuu belge penceresinin bir parasdr. Windows kullanclar belge
penceresinden ayrmak iin ara ubuunun sol kenarndaki tama noktasna (gripper) ift
tklayabilir veya bunu srkleyebilirler. Bylece o da ayr bir panel halinde gelir.
Dreamweaverda tane grnm modu mevcuttur: Design, Code ve Split. Split modunda
hem Design grnm, hem de Code grnm yer alr. Bu modlara ait dmeler Document
ara ubuunun sol tarafnda yer almaktadr. mleci bu dmelerin zerine getirip bir sre
tutarak grnm modlarnn isimlerini grebilirsiniz. Burada Design grnm modunu
kullanmanz gerekiyor. Etkin dme vurgulu hale gelerek Dreamweavern sayfay o grnm
modunda grntlediini gsterir. Ders 16da Code ve Split grnmlerinde alacaksnz.
Belge pencereniz birinde kod bulunan iki blmeye ayrlmsa ya da kod ieren tek bir blme
24 DERS 1
halindeyse Document ara ubuunun zerinde bulunan Design View simgesine

tklamanz gerekir.
Belge penceresinin sol alt kesinde Etiket Seici (Tag Selector) 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
elemanlar altnz grmenizi ve dier elemanlar kolayca semenizi salar. Etiket Seici
ile almaya almak zellikle Ders 6da tablo kullanmaya baladnzda yardmc olacaktr.
Etiket Seiciyi gremiyorsanz belge pencerenizin boyutlarn kltmeyi
deneyin. Etiket Seici Properties denetisinin (zellik Denetisi) arkasnda
gizlenmi olabilir.
Kitaptaki derslerde ilerledike belge penceresindeki pek ok dmeye ve zelletirilebilir

seenee ainalk kazanacaksnz.
2. Insert ara ubuunun sol ucundaki alr mende Commonn seili olduundan
emin olun ve imleci, varsaylan konumu ekrannzn st ksm olan ubuun zerine
getirin. Adn grmek iin dmelerden birinin zerinde imleci bir sre tutun.
Hyperlink Email link
Men:
Named anchor
Common
Table
(Varsaylan
Etkin
Insert Divtag
Grup)
Images: Image
Tag chooser
lave aralar gstergesi

Media
Date
Templates
Comment
Server-Side Include
Insert ara ubuu; resimler, tablolar, zel karakterler, formlar ve HTML gibi sayfanza
ekleyebileceiniz pek ok nesne ya da eleman ierir. Bunlar tiplerine gre sekiz gruba
ayrlmtr: Common, Layout, Forms, Text, HTML, Application, Flash Elements ve
Favorites. Etkin grubun ismi mende grntlenir. Varsaylan durumda Common 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. Insert ara ubuundaki
mende yer alan son seenek Show As Tabs adn tar ve Insert ara ubuunu,
ubuun st ksmnda her bir kategorinin sekmesi grntlenecek ekilde deitirir. Men
formatna dnmek iin Insert ara ubuunun sa st kesindeki balam mensnden
Show As Menu komutunu sein. stediiniz grntleme yntemini (sekme veya men)
seebilirsiniz.
Sekmeli Insert ara ubuu
Balam mens
Kitap iinde nesneler ve elemanlar szcklerinin birbirinin yerine

kullanldn greceksiniz. Nesne szc elden geldiince dmeleri
anlatmak iin, eleman szc de belge penceresinde beliren bileenler iin
kullanlmtr.
Bir eleman eklemek iin ilgili nesneye ait simgeyi Insert ara ubuundan belge
penceresinde bunun grnmesini istediiniz konuma srkleyebilirsiniz. nce ekleme
noktasn belge penceresinde nesnenin grnmesini istediiniz yere getirip sonra panelde
bu nesnenin simgesine tklayabilirsiniz. Simgeye tkladnzda eleman belgede ekleme
noktasnn bulunduu konumda belirecektir.
Srekli kullandnz pek ok nesneyi, ara ubuuna sa tklayp (tek dmeli
fareyle alan Macintosh kullanclar ayn seeneklere ulamak iin
Control+tklama yntemini kullanabilirler) Customize Favorites komutunu
seerek Insert ara ubuunun Favorites grubuna tayabilirsiniz. Alan
Available Objects mensnden istediiniz eyi sein ve Available Objects ile
Favorite Objects listelerinin arasndaki ift ok simgeli dmeye tklayn.
Favorite Objects listesinin stndeki yukar ve aa ok tularn kullanarak
nesnelerin srasn ayarlayabilirsiniz. Bu iletiim kutusunu kullanarak Favorites
grubundaki nesneleri silmeniz ve daha iyi organize etmek iin nesnelerin
arasna ayrclar eklemeniz de mmkndr.
3. mleci, normalde ekrannzn alt ksmnda yer alan Properties denetisinin zerine
getirin. Adn grmek iin dmelerden birinin zerinde imleci bir sre tutun.
Properties denetisini bir belgedeki seili metinlerin, resimlerin, tablolarn ve dier

nesnelerin niteliklerini grmek ve dzenlemek iin kullanrsnz. Properties denetisi
balama duyarldr. Yani zerinde grntlenen nitelikler, belge penceresinde seilen eye
bal olarak deiir. Properties denetisini geniletmek ya da toparlamak iin panelin sa
26 DERS 1
alt kesindeki geniletme okuna tklayn. Properties denetisi toparlanmsa, siz paneli
geniletmeden grnmeyen ilave zellikler olabilir.
Windows kullanclar denetiyi sadece ismi grnecek ekilde kltebilir ve
grntlenen alan bytebilirler.
Properties denetisi
Geniletme/Toparlama dmesi
Windows kullanclar ayrca belge penceresi ile Properties denetisi

arasnda bulunan yatay kenarlktaki ok dmesini srkleyerek Properties
denetisini (ve daha sonra bu alanda grntlenen ilave panelleri) yeniden
boyutlandrabilirler. Ok dmesine tkladnzda tm alan toparlanr, yeniden
amak iin dmeye tekrar tklamanz yeterli olacaktr. Programn
Macintoshtaki arabiriminde yatay kenarlk yoktur.
Panellerle ve Belgelerle almak

Dreamweaverdaki panellerin byk bir ksm kenetlenmi bir halde, ilevlerine gre
sekmeli pencereler eklinde panel gruplarnda yer alr. Varsaylan panel gruplar
CSS, Application, Tag Inspector ve Filestr. Panellere bu gruplardan ya da Windows
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. Window mensnde bir enin
yanndaki onay iareti, o panelin ya da ara ubuunun panel grubunda seili durumda ve
etkin (grnr) olduunu gsterir.
1. Henz ak durumda deilse CSS panel grubunun balk ubuundaki oka

tklayarak grubu geniletin.
CSS panel grubu, varsaylan olarak panel gruplarnn en stnde yer alr. CSS panel grubu
geniletildiinde CSS Styles panelini grrsnz. (Bu grupla Ders 4te alacaksnz.)
Panelin sa st kesinde balam mensne ait dme yer alr ve bu dme, panel grubu
kltldnde grnmez.
CSS panel grubunun balk ubuu
Panel tama noktas
Balam mens
CSS Styles panel sekmesi
Window mensnde gizli panellerin adnn yannda onay iareti bulunmaz. Gizli
durumdaki bir paneli grntlemek isterseniz Window mensnden bu paneli sein.
Setiiniz panel o anda kullanlmayan bir panel grubunda bulunuyorsa hem panel, hem
de bunu tayan panel grubu ekrana gelecektir. stenen paneli ieren panel grubu grnr
durumda ama kltlm ise, Window mensnden bu paneli setiinizde grup
genileyecek ve sz konusu panel grntlenecektir.
Kimi zaman bir panel dier bir panelin ya da belge penceresinin arkasnda
kalabilir. Bunun sebeplerinden biri ekran znrlnn deitirilmesi
olabilir. Bir panel gizlenmi durumdaysa ve Window mensnden
setiinizde grntlenmiyorsa, ak durumdaki btn panelleri varsaylan
konumlarna getirmek iin Window > Arrange Panels (Sadece Macintoshta)
komutunu semeniz gerekebilir. Ayrca hem Macintosh, hem de Windows
kullanclar, tm aralar ve panelleri orijinal konumlarna getirmek iin
Window > Workspace Layout > Default (Windowsta Designer) komutunu da
kullanabilirler. Bu durumda Insert ara ubuu ekrann sol st kesine,
Properties denetisi ekrann alt ksmna ve ak durumdaki dier tm
paneller de ekrann sana gidecektir.
28 DERS 1
2. mleci, iki panel grubunu ayran izginin alt ksmna getirerek burada tutun. mle
dey iki oklu bir simge haline geldiinde tklayn ve panellerin boyunu ayarlamak
iin tklayp imleci yukar ya da aa doru srkleyin.
alrken daha fazla bilgi grntlemek ya da dier paneller ve belge penceresi iin yer
amak isterseniz panelleri yeniden boyutlandrmanz gerekebilir.
Windows kullanclar ayrca dey kenarlktaki ok dmesini srkleyerek

kenetlenmi durumdaki btn panel gruplarnn tm alannn geniliini yeniden
boyutlandrabilir. Ok dmesine tkladnzda btn kenetlenme alan daraltlr, tekrar
tkladnzda yeniden alr.
Macintosh arabiriminde bu dey kenarlk yoktur. Macintosh kullanclar kenetlenmi
durumdaki panel gruplarnn geniliini, panel gruplarnn sa alt kesindeki yeniden
boyutlandrma dmesini zerine tklayp srkleyerek deitirebilirler.
Kenetlenmi
durumdaki
paneller
(Macintoshta)
Panel alann
ayarlamada
kullanlan
dey kenarlk
(Windowsta)
Kenetlenmi
durumdaki
paneller
(Windowsta)
Panelin byklnn ayarlanmas
Yeniden
boyutlandrma
kontrol
(Macintoshta)
Dreamweavern panellerine ve aralarna ainalk kazandktan sonra panelleri ve panel

gruplarn yeniden dzenleyerek arabirimi ihtiyalarnza gre zelletirebilirsiniz.
Oluturduunuz zel alma alanlarn Window > Workspace Layout > Save Current
komutunu seerek kaydedebilirsiniz. Ayrca Workspace Layout alt mens iki monitrle
(Dual Screen) alan gelitiriciler iin bir alma alan ile birlikte Manage seenei
araclyla alma alanlarn yeniden adlandrma ve silme imkn sunar.
Herhangi bir panel grubunu kenetleme alanndan ayrarak kayar hale
getirebilirsiniz. Bir panel grubunu kayar hale getirmek iin imleci panel
grubuna ait balk ubuunun sol tarafnda noktalarla gsterilen panel
tama noktasnn zerine getirin. mle bir ele (Macintoshta) ya da art
imlecine (Windowsta) dntnde tklayp srkleyerek panel grubunu
pencerenin dna karp brakn. Kenetlenmi durumdaki panellerin dna
doru srklerken, siz brakana kadar panel grubunun silik bir grnts
belirir. Balam mens simgesine tklayp Rename Panel Group komutunu
seerek bu yeni pencereyi ya da panel grubunu yeniden adlandrabilirsiniz.
Bir panel grubunu tekrar kenetlenmi durumdaki dier gruplarn zerine
srklerken brakmadan nce panel grubunun silik bir grntsn ve panel
grubunun bulunduu yerde kaln ve koyu renkli bir izgi grrsnz. Ayrca
dier gruplarn altnda ya da stnde bulunan gruplardan herhangi birini
tamak zere tama noktasn kullanarak panel gruplarnn srasn yeniden
dzenleyebilirsiniz. Farkl gruplara tayarak panellerin sekme dzenini
deitirmek isterseniz, sekmesine tklayarak bir paneli sein ve balam
mensnden Group (panel ad) with komutunu sein.
Bu kitaptaki derslerde Dreamweaver 8deki panellerin ve panel gruplarnn sralarnda

ve isimlerinde deiiklik yapmadan varsaylan panel konfigrasyonunu kullandnz
kabul edilmitir. Eer aralardan herhangi birini yeniden dzenlediyseniz, Window >
Workspace Layout > Default (Macintoshta) ya da Window > Workspace > Designer
(Windowsta) komutunu seerek varsaylan konfigrasyona dnebilirsiniz.
3. File > New komutunu sein ve General sekmesinin Basic page kategorisinden
HTMLi sein.
Geerli belge penceresinde yeni bir sekmeyle yeni bir XHTML belgesi alacaktr.
30 DERS 1
Belge penceresi sekmeleri
Ekran Kapla/Aa Geri Getir (Sadece Windowsta)
Windows kullanclar iin: Belgeleri grntlemek iin Cascade (Basamakl), Tile
Horizontally (Yatay de) ve Tile Vertically (Dikey de) adnda seenek vardr. Ayn
anda birden fazla belgeniz aksa Cascade seenei, alma alannn belge penceresi
ksm iinde bu pencerelerin birbiri zerinde kayar durumda olmasn salar. Tile
Horizontally seenei, belge pencerelerini yatay olarak st ste dizer. Tile Vertically
seenei ise belge pencerelerinin dey olarak yan yana dizilmesini salar. Bu seeneklere
Window mensnden eriebilirsiniz. Ayrca Tile grnmne belge penceresinin sa st
kesindeki Ekran Kapla (Maximize) dmesine (programa ait Ekran Kapla dmesine
deil) tklayarak da geebilirsiniz. Bir belge penceresinin Ekran Kapla dmesine tekrar
tkladnzda sekmeli grnme geri dnersiniz.
Macintosh kullanclar iin: Belgeleri grntlemek iin Cascade, Tile ve Combine
As Tabs adnda seenek vardr. Cascade seenei belgelerin birbiri zerinde kayar
durumda grnmesini salar. Tile seenei belgeleri ayr ayr pencerelerde yan
yana grntler. Combine As Tabs varsaylan yerletirme seeneidir. Bu seenei
kullandnzda yeni belgeler her biri iin birer sekme olacak ekilde, ayn pencere iinde
geerli belgeler olarak grntlenir. Sekmeli belgelerden istediinizi, ilgili sekmeye sa
tklayp (Windowsta) ya da Control dmesi basl durumdayken tklayp Move To New
Window komutunu seerek aabilirsiniz.
Sayfaya Bir 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. Sitenin
adyla balayan, belgenin kullanm amacn aklayan ksa ve bilgilendirici bir ifade
semeniz gerekir. Oluturduunuz her sayfaya metin ya da resim eklemeden nce balk
atama alkanln edinin. Bunu yapmay unutursanz Dreamweaver dosyay varsaylan
olarak Untitled Document olarak adlandracaktr.
Sayfanza bir balk atamak iin, yoga.html belgesinin sekmesine tklayn ve Document ara
ubuundaki Title metin alanna Yoga Sangha Project yazn. Return (Macintoshta) ya da
Enter (Windowsta) tuuna basn veya yoga.html belgesinin iine tklayn.
Eer Title metin alannn yer ald Document ara ubuunu gremiyorsanz
View > Toolbars > Document komutunu sein.
Title metin alannda balangta Untitled Document ifadesi yer alr. Burada bu yer tutucu
bal proje sitesindeki bir sayfann balyla deitiriyorsunuz.
Belgenizin baln Page Properties iletiim kutusunun Title/Encoding

kategorisindeki Title metin alann kullanarak da belirleyebilirsiniz. Page
Properties iletiim kutusuna erimek iin Modify > Page Properties
komutunu sein.
32 DERS 1
nizlemede Kullanlacak Web Tarayclarnn

Belirlenmesi
Web sayfalar gelitirirken almalarnzn farkl Web tarayclarnda (Internet Explorer
ve Safari gibi) nasl grndn srekli test etmeniz gerekir. Dreamweavern belge
penceresindeki grnt, sayfalarnzn nasl grnecei hakknda yaklak olarak bir fikir
verir. Her Web taraycs Web sayfalarn grntlemede baz farkllklara sahiptir. Bunlardan
bazlar nemsiz olsa da, arada baz ok byk farkllklar da olabilir. Ayn Web taraycsnn
farkl srmleri arasnda bile farkllklar grebilirsiniz. Sitenizi farkl Web tarayclarnda ve
farkl iletim sistemlerinde ne kadar sk test ederseniz ve dzenli olarak sayfalarnzda uygun
deiiklikleri yapma alkanlna ne kadar sadk kalrsanz, sitenizin ziyaretilerinin sayfalar
istediiniz ekilde greceinden de o kadar emin olursunuz.
Dreamweaverdaki tercih ayarlarn (Preferences) kullanarak sitenizin sayfalarn nizlemek
iin hangi Web tarayclarn kullanacanz belirleyebilirsiniz. nizleme ilemini
hzlandrmak iin her biri iin bir klavye ksayoluyla birlikte biri birincil, dieri de ikincil
olmak zere iki tarayc tanmlayabilirsiniz.
1. File > Preview in Browser > Edit Browser List komutunu sein.
Preferences iletiim kutusunun Preview In Browser blmn amak iin

alternatif olarak Dreamweaver > Preferences (Macintoshta) ya da Edit >
Preferences (Windowsta) komutunu, ardndan da iletiim kutusunun sol
tarafnda yer alan Category listesinden Preview In Browser seebilirsiniz.
Preferences iletiim kutusunu amak iin Command+U (Macintoshta) veya
Ctrl+U (Windowsta) klavye ksayolunu da kullanabilirsiniz.
Preferences iletiim kutusu alarak Preview In Browser seeneklerini grntlenecektir.

Dreamweaver burada bilgisayarnzda bulunan bir ya da daha fazla Web taraycsn
otomatik olarak listeleyebilir.
Windowsta Internet Explorer listede iexplore ya da iexplore.exe olarak
grntlenebilir.
Tarayc listesinde bir tarayc adna tkladnzda, listenin altndaki onay kutular bunun
birincil tarayc m, yoksa ikincil tarayc m olduunu gsterir. Bilgisayarnzda ikiden fazla
tarayc yklyse, birincil ya da ikincil tarayc olmayan seeneklerde iki kutu da iaretlenmeden
braklr.
Preview Using Temporary File seenei varsaylan durumda listedeki tm tarayclar iin
iaretsiz durumdadr. Bu seenei iaretlediinizde sayfalarn bir Web taraycsnda nizlenmesi
srasnda Dreamweaver geici dosyalar oluturur.
2. Tercihleri gzden geirdikten sonra OK dmesine tklayarak iletiim kutusunu kapatn.
Gerektiinde listeye tarayc ekleyebilir ya da mevcut tarayclar deitirebilir veya silebilirsiniz.

Tarayc Eklemek: Listeye bir tarayc eklemek iin art (+) dmesine tklayn. letiim
kutusu aldnda sabit diskinize gz atarak bir Web tarayc uygulamas sein. Eer
sayfalarnz nizlerken Option+F12 (Macintoshta) veya F12 (Windowsta) tularna
tkladnzda bu taraycnn almasn istiyorsanz, Primary Browser onay kutusunu
iaretleyin. Belgelerinizi nizlemek iin Command+F12 (Macintoshta) ya da Ctrl+F12
(Windowsta) tularn kullandnzda bu taraycnn almasn istiyorsanz, Secondary
Browser onay kutusunu iaretleyin. (Bu kitaptaki dersleri tamamlarken sayfalar sk sk
nizlemeniz gerekecek. Dolaysyla bu ksayollar size zaman kazandrabilir.)
Taraycda nizlemeyle ilgili klavye ksayollarnn alabilmesi iin fonksiyon
tularnzn etkinletirilmi olmas gerekir. Genelde fonksiyon tular varsaylan
olarak etkin durumdadr. Eer almyorlarsa iletim sisteminizin tercihler
blmn kontrol edin. Eer fonksiyon tularnz sistem fonksiyonlarn yerine
getiriyorsa Dreamweavera ait fonksiyon tularn kullanmak iin Fn tuuna
basmanz ya da sistem tercihlerinizi uygun ekilde ayarlamanz gerekebilir.
Tarayc Silmek: Listedeki tarayclardan birini silmek isterseniz, listeden ilgili taraycnn
adn sein ve eksi (-) dmesine tklayn.
Bir taraycy deitirmek isterseniz, listeden ilgili taraycnn adn sein. Sonra da
Edit dmesine tklayarak yeni taraycnn bilgisayarnzda bulunduu konuma gidin.
3. Sayfay birincil Web taraycnzda nizlemek iin yoga.html belge sekmesine tklayn
ve F12 tuuna basn.
nizleme ilemi iin File > Preview in Browser komutunu seip ardndan da alt
meny kullanarak nizlemede kullanmak istediiniz taraycy semeniz de
mmkndr. Ayrca Document ara ubuunda bulunan Preview/Debug In
Browser adndaki dmeye tklayp alan menden nizlemede kullanmak
istediiniz taraycy seebilirsiniz.
Preview/Debug in Browser dmesi

34 DERS 1
Preferences iletiim kutusundaki Preview In Browser blmnde birincil Web taraycs

(Primary Browser) olarak tanmlanan tarayc alacak (ya da etkin uygulama halini
alacak) ve bir tarayc penceresinde yoga.html dosyasn grntleyecektir. Taraycnn
balk ubuundaki Yoga Sangha balna dikkat edin.
Bu aamada Web taraycnzda bo bir sayfa greceksiniz. Artk ierik eklemeye hazrsnz.
Bir sonraki derste bu dosyaya metin ekleyeceksiniz.
Bu derste daha nce grdnz Balang Sayfasndaki Dont show again
onay kutusunu iaretlemediiniz srece, btn ak belgeleri kapadnzda
Balang Sayfas tekrar belirecektir.
4. yoga.html belgesini kaydedin. Balksz belgeyi kapatn ve kaydetmeyin.
Bir sonraki ders iin yoga.html belgesini ak brakabilirsiniz.
Temel Konular Tek Banza Kefedin

Bir Web sitesinin nasl planlandn ve Dreamweaverda bir site oluturup hem yeni, hem
de mevcut sayfalarla nasl alacanz rendiinize gre bu becerileri ve teknikleri
kendi Web sitenize (sitelerinize) uygulamaya hazrsnz demektir.
1. Kendi siteniz iin planlama aamalarn ve daha nce grdmz sorular
kullanarak aratrma ilemini tamamlayn ve bir yaratc brif hazrlayn.
Bu srete alrken ayrntlara dikkat etmeyi unutmayn. Sitenizi gelitirme ilemine u

ilemleri yaparak balayn:
Sitenizin kullanm amacn, hedeflerini ve hitap edecei pazar dnp deerlendirin
Hitap edeceiniz kitlenin kim olacan ve bu insanlarn ihtiyalarnn neler olduunu
belirleyin
Hazr durumdaki ierik bileenlerinin ve elerin neler olduunu kontrol edin
Hangi elemanlarn oluturulmas gerektiini belirleyin
Sitenin temel yapsn hazrlayn
Dosya yapsn oluturun
Yaratc brif, 1. aamada siteyle ilgili yaplan tm aratrma ve almalar dzenlediiniz
bir belgedir. Bu, sonraki aamalarda daha koordine bir ekilde almanzda size yardmc
olabilir ve oluturduunuz sitenin gelitirilme srecini daha kolay takip etmenizi salar.
2. Dreamweaverda sitenizi hazrlamak iin Site Definition iletiim kutusunu
kullann.
Site hazrlama srecinde, btn site dosyalarnz saklayacanz yerel kk klasr

oluturulur.
3. New Document iletiim kutusunda yer alan balang sayfalarn ve sayfa

tasarmlarn kullanarak yeni sitenizin iinde birka tane yer tutucu sayfa
oluturun.
Bu sayfalar ileride ierik eklemek zere yer tutucu olarak yerel kk klasrnze
kaydedebilirsiniz.
Bu kaynaklara, Balang Sayfasndaki Create From Samples blmnden
bir kategori seerek de eriebilirsiniz.
Derslerde ilerlerken, bu balang sayfalarnda karnza kan eitli elemanlarla

(balantlar, resimler ve CSS gibi) nasl alacanz reneceksiniz.
nerilen Kaynaklar
Kitap: Web ReDesign 2.0: Workflow that Works
Yazar: Kelly Goto ve Emily Cotler
Yaynevi: New Riders. 2004
ISBN 0-7357-1433-9
Bu kitap, ister sfrdan yeni bir site oluturun, ister mevcut bir siteyi yeniden tasarlayn, bir
Web sitesi gelitirme srecinde faydalanabileceiniz harika bir bilgi kaynadr. Kitapta,
gelitirme sreci ak bir ekilde anlatlmakta ve alma akn projenize en uygun
ekilde gelitirmek iin faydalanabileceiniz birok ara ve teknik (rnekler, formlar,
kontrol listeleri ve alma sayfalar) sunulmaktadr.
Web: www.adobe.com/resources/techniques
Macromedia ile Web ReDesign: Workflow that Works kitabnn yazarlarndan biri
olan Kelly Goto tarafndan ortak olarak hazrlanan bir Web kayna. Bu sitede Web
gelitirmenin her aamasyla ilgili birok makale yer almaktadr. Ayrca sitenin forum
kesinde (Production Management Online Forum gibi) ilave kaynaklar da mevcuttur.
Kitap: Dont Make Me Think: A Common Sense Approach to Web Usability
(kinci Bask)
Yazar: Steve Krug
Yaynevi: New Riders. 2005
ISBN 0-3213-4475-8
Kullanm kolayl ve anlalrlk konularn temel alan Kullanlrlk zellii, iyi bir Web
sitesi yaratmann temel anahtardr. Web iin kullanlrlk kavramnn mantkl ynlerinin incelendii bu kitapta sitenin test edilmesi ve sitenin btn zelliklerinin (sitede
dolama, yerleim dzeni, ierik, vs.) hitap edilecek kitle tarafndan kolayca kullanlp
kullanlamayacann belirlenmesiyle ilgili eitli yntemler anlatlmaktadr.
36 DERS 1
Ne rendiniz?
Bu derste unlar rendiniz:
Dreamweaver atnz (Sayfa 45).

Web sitesi gelitirme ileminin aamalarn rendiniz (Sayfa 59).
Bir Web sitesi oluturmak iin hazrlk yaptnz, bir yerel site hazrladnz ve yerel kk
klasrn tanmladnz (Sayfa 1018).
Yeni bir sayfa oluturdunuz ve uygun adlandrma standartlarn kullanarak belgeyi
kaydettiniz (Sayfa 1823).
Dreamweavern Insert paneli, Properties denetisi, belge penceresi bileenlerini ve
dier aralar, pencereleri ve panellerini tandnz (Sayfa 2331).
Sayfanza bir balk atadnz (Sayfa 32).
nizlemede kullanlacak Web tarayclarn belirlediniz ve sayfanz test etmek iin
klavye ksayollarn kullandnz (Sayfa 3335).
Sayfaya erik
Eklemek
Bu derste, bir sayfada kullanlacak materyalin akn kontrol etmek iin metin tabanl
ieriin hiyerarisinin nasl olacan belirleyeceksiniz. 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 derste
ele alnan prensipleri kullanarak yapy tanmlamak, daha esnek, daha etkin ve daha
kolay eriilebilir bir Web sitesi yaratmanza yardmc olacaktr. Aada greceiniz
uygulamalarda Web sitesini ekillendirecek olan formu oluturacaksnz. Bunu, ieriin
nem srasn belirleyerek (bilgileri ayr blmlerde gruplayarak ve alt blmlere ayrarak)
gerekletireceksiniz. Bu ayrma ilemi, ziyaretilerin sitede grecei eylerin anlam
kazanmasna ve etkili ve iyi organize edilmi bir site oluturmanza yardm edecektir.
Bu derste farkl dosya formatlarnda kaydedilmi metinleri nasl aktaracanz, farkl
iletim sistemlerindeki materyali nasl alacanz ve oklu dil destei ieren belgeleri
Bu derste bir yandan
Yoga Sangha proje
sitesinin ana sayfas
zerinde alrken,
dier yandan da
ierik eklemeyi ve
eldeki materyali
gruplayarak etkin sayfa
yaplar gelitirmeyi
reneceksiniz.
kullanmay reneceksiniz. Ayrca font ve metin bykl gibi temel belge zelliklerini
ayarlamay, metni farkl liste tipleri eklinde biimlendirmeyi ve telif hakk sembol gibi
zel karakterleri belgelerinize eklemeyi reneceksiniz.
Metni biimlendirmek, ziyaretilerin Web sitesindeki bilgileri daha kolay okuyabilmesini
salamak iin ok nemlidir. Metin, sayfalarnzn hayati bileenlerinden biri olabilir; bu
yzden elinizdeki materyali kullanclarn Web sitesinin ieriini hzl ve kolayca takip
edebilmesini salayacak ekilde organize etmek ve dzenlemek iin gereken zaman
ayrmay ihmal etmeyin.
CD-ROMdaki Lesson_02_Content klasrnn iinde bulunan Completed klasrnde
Ders 2nin (Lesson 2) tamamlanm bir rneini bulabilirsiniz.
Neler reneceksiniz?
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.
Yaklak Sre
Ders Dosyalar
Balang Dosyalar:
Lesson_02_Content/index.html
Lesson_02_Content/definitions.html
Lesson_02_Content/sanskrit.html
Lesson_02_Content/Text/home_mac.txt
Lesson_02_Content/Text/home_win.txt
Lesson_02_Content/Text/definitions_mac.txt
Lesson_02_Content/Text/definitions_win.txt
Lesson_02_Content/Text/sanskrit_terms.rtf
Tamamlanm Proje:
Lesson_02_Content/Completed/index.html
Lesson_02_Content/Completed/definitions.html
Lesson_02_Content/Completed/sanskrit.html
40 DERS 2
Metin Aktarmak
Bir sayfaya metin eklemek iin aada belirtilenler gibi eitli yntemlerden
faydalanabilirsiniz.
Metni Macromedia Dreamweaver Document (belge) penceresinde yazarak.
Baka bir uygulamadaki metni kopyalayp yaptrarak. Hem Dreamweaver, hem
de ierii almak istediiniz uygulamay aabilir ve sonra da ilgili ierii (metni)
kopyalayp Dreamweavera yaptrabilirsiniz (veya metni ya da ilgili eleman seip
Dreamweaver belge penceresinin zerine srkleyebilirsiniz).
Bir HTML belgesini aarak. Microsoft Word gibi kelime ilem programlar da dahil
olmak zere eitli uygulamalarda HTML belgeleri oluturabilirsiniz. Bir Microsoft
Word belgesini HTML olarak kaydetmek iin ilgili belgeyi Wordde an ve File > Save
as Web Page komutunu sein. Wordle oluturulan HTML belgelerinde hatal kodlarla
ilgili birok sorunla karlalmaktadr. Bu sorunlar ve zmleri Ders 16da greceiz.

Metin
dosyalarn dorudan Dreamweaverda aarak. Kelime ilem ya da sayfa
dzenleme uygulamalarnda oluturulan dosyalar amak iin Dreamweaver

kullanabilirsiniz (eer bu dosyalar ASCII (American Standard Code for Information
Interchange) metin dosyalar olarak kaydedildiyse. Metin (.txt) dosyalar
Dreamweaverda her zaman Code grnm kullanlarak yeni bir pencerede alr.
Bir metin dosyasn Dreamweaverda atktan sonra ihtiyacnz olan metni kopyalayp
baka bir belgeye yaptrabilirsiniz.
ASCII Dosyalaryla almak

ASCII metin dosyalarndan metin aktarrken paragraf ve yeni satr (New Line) gibi basit
biimlendirme ilemleri de uygulanabilir. Ama satr formatlarn dzgn ekilde korumak
iin farkl platformlardaki ASCII formatlar arasndaki farkllklar biliyor olmanz gerekir.
Windowsta oluturulan dosyalarda, metin iindeki yeni bir satr gstermek iin LF (Line
Feed) ad verilen grnmez bir kontrol karakteri ve CR (Carriage Return) karakterleri
kullanlr. Macintoshlarda Line Feed karakteri kullanlmaz, sadece Carriage Return kullanlr.
Unixte de sadece Line Feed karakteri (LF) kullanlr.
ASCII dosyalarndaki metinleri dzgn bir ekilde aktarmak ve satr sonu biimlendirme
zelliini korumak iin Dreamweavern Line break type tercih ayarlarn, aktarmak istediiniz
metin dosyalarnn oluturulduu iletim sistemine uygun ekilde deitirmeniz gerekir.
Preferences iletiim kutusunu grntlemek iin Dreamweaver > Preferences (Macintoshta)
ya da Edit > Preferences (Windowsta) komutunu, ardndan da Category listesinden Code
Format sein. Line Break Type mensnden satr sonu tipini sein. Her tip, karlk
gelen iletim sistemiyle birlikte gsterilir. Bylece metin dosyasnn oluturulduu iletim
sistemini seebilirsiniz. Line Break Type mensnde seenekleriniz unlar olacaktr: CR LF
(Windows), CR (Macintosh) ve LF (Unix).
Macintosh kullanclar iin varsaylan seenek: CR (Macintosh).

Windows kullanclar iin varsaylan seenek: CR LF (Windows).
Sayfaya erk Eklemek 41
1. Dreamweaver kullanarak Lesson_02_Content/Text/home_mac.txt

(Macintoshta) ya da home_win.txt (Windowsta) dosyasn an. Ardndan tm
metni sein ve kopyalayn. Lesson_02_Content/index.html dosyasn an,
belgenin Design grnm modunda grntlendiinden emin olun, ekleme
noktasn belgenin en st ksmna getirin ve kopyaladnz metni yaptrn.
Bu uygulamada, kullandnz iletim sisteminde oluturulmu belgeyi sein.

Farkl platformlara ait metin dosyalarn aktarmaya alarak denemeler
yapabilirsiniz. Bunun iin dier platformda oluturulan belgeyi an. home_mac.
txt bir Macintoshta, home_win.txt ise Windows ykl bir bilgisayarda
oluturulmutur. Bu ilave dosyayla deneme yapacaksanz, Satr Sonu Tipi (Line
Break Type) ayarlarn uygun biimde, bu uygulamann banda yer alan ASCII
Dosyalaryla almak balkl ksmda anlatld ekilde yapmay unutmayn.

index.html belgesi, Ders 1de oluturduunuza benzeyen bir XHTML

belgesidir. Dreamweavern aralaryla ilgili olarak ekstra uygulama yapmak
isterseniz, Lesson_02_Content klasrnde yeni bir belge oluturabilir ve
nceki derste anlatld gibi buna bir balk atayabilirsiniz. Bu belgeyi farkl
bir isimle kaydetmeniz gerekir, nk ayn klasrde ayn isme sahip iki dosya
oluturamazsnz.
Metni kopyalamak ve yaptrmak iin Edit mensn kullanabilir (Edit > Copy ve/veya
Edit > Paste komutunu sein) veya kopyalamak iin Cmd+C (Macintoshta) ya da Ctrl+C
(Windowsta) ve yaptrmak iin de Cmd+V (Macintoshta) ya da Ctrl+V (Windowsta)
klavye ksayollarn kullanabilirsiniz. Bu ksayollar tandk gelecektir.
2. index.html dosyasn kaydedin ve home_mac.txt ya da home_win.txt dosyasn
kapatn.
index.html belgesini bir sonraki uygulama iin ak brakabilirsiniz.

42 DERS 2
eriin Yapsn Tanmlamak

Sayfa ieriinin sralamasn tanmlayarak belge hiyerarisini oluturmak, site
gelitirme srecinin nemli admlarndan biridir. Bu uygulamada ve bu ders sresince
bir dizi HTML biimlendirme seenei araclyla elinizdeki materyalin yapsn
tanmlayacaksnz. Buna yapsal iaretleme (structural markup) ad verilir. Bu iaretleme
eklini doru kullanmak iin ierii (materyalin grsel tasarmn deil) organize etmek
ve yaplandrmak gerekir. HTML ile biimlendirme, tasarm anlamnda ok kstldr.
Byklk, boluk brakma ve hizalama anlamnda fazla bir kontrol imkn yoktur, nk
buradaki seenekler belge hiyerarisini tanmlamak amacyla gelitirilmitir, grafiksel
grnm deil. eriin grnm ile ilgili ayarlamalar ve grsel tasarm ilemleri
zerinde sonraki derslerde alacaksnz. Bu uygulamada yapacanz gibi, estetik
ayrntlar oluturmaya balamadan nce yapy gelitirmeniz gerekir.
Grnm zerinde daha fazla kontrol sahibi olmak isterseniz, sayfanzdaki
elemanlarn grnmn ve konumunu tanmlamak iin CSS (Cascading
Style Sheets) kullanmanz gerekir. CSS konusunu Ders 4te greceiz.
1. index.html belgesinin penceresinde imleci sayfann en stnde yer alan Yoga
Sangha metninin iine yerletirin.
Bu metin sayfann asl baldr.

2. Properties denetisindeki Format alr mensnden Heading 1i sein.
Bylece metin biimini 1. seviye konu bal olarak tanmlam oldunuz. Metin blok
dzeyi eleman olarak biimlendirilmiti. Format mensnde iaretlenen btn seenekler
btn bir metin blouna uygulanr. Bir metin bloundaki tek bir szce ya da belirli bir
blme konu bal ya da baka bir blok dzeyi biimlendirme zellii uygulayamazsnz.
Sonu olarak bir konu baln uygulamak iin metni semeniz gerekmez. Metin blounda
bulunan metnin tamam, otomatik olarak Format mensnden setiiniz biimlendirme
ayarn kullanr.
Dier blok dzeyi elemanlar arasnda Properties denetisinden eriilebilen paragraflar,

listeler, yatay cetveller ve hizalama seeneklerini sayabiliriz. Bu biimlendirme aralaryla
nasl alacanz yine bu derste reneceksiniz.
Konu balklar (headings) normal gvde metnine gre daha byk ve daha kaln fontlarla
grntlenir. HTMLde birden altya kadar numaralandrlm alt konu bal dzeyi
bulunur. Heading 1 en byk puntoya, Heading 6 da en kk puntoya sahip seenektir.

Bir metin blounu konu bal olarak etiketlediinizde baln etrafnda otomatik olarak
bir boluk oluturulur. Bu da setiiniz bala gre deiir. Biimlendirme iin CSS
kullanmadnz mddete bu boluu herhangi bir ekilde kontrol edemezsiniz.
1den 6ya kadar konu balklar
Konu balklarndan, ieriinizi blmlere ayrmak ve sayfann belirli ksmlarna dikkat

ekmek iin faydalanabilirsiniz. Kullanclar Web sayfalarn genellikle hzl bir ekilde
tararlar ve her eyi okumazlar. Web sayfalarnz tasarlarken bunu da hesaba katarsanz,
ziyaretiler iin kullanm ok daha kolay olan sayfalar hazrlayabilirsiniz. Metinlerinizi
konu balklaryla ve bu ders boyunca kullanlan dier tekniklerle biimlendirerek
ierik iindeki farkl blmleri ortaya karabilir ve grsel ynden ak bir hiyerari
oluturabilirsiniz.
Pek ok belgede sayfadaki ilk konu bal (heading) ierik asndan asl
bala (title) benzer. ok paradan oluan belgelerde ilk konu balnn
metni, rnein bir blm bal gibi, konuyla ilgili bilgileri iermelidir. Tm
sayfaya ait asl balk da belgeyi daha geni bir balamda (bir kitap
rneinden yola karsak rnein hem kitabn adn, hem de kitaptaki ilgili
blmn baln) tanmlamaldr.
44 DERS 2
3. Properties denetisindeki Format mensn kullanarak belgenin geri kalan

konu balklarn ayarlayn. Aadaki satrlarda Heading 5 kullanlmas
gerekmektedir.
Discover how playful and open-hearted yoga can be.

Intro to Anusara Workshop With Sierra
Anusara Yoga Immersion With Katchie Ananda and Jayne Hillman
Aadaki satrlarda da Heading 3 kullanlmas gerekmektedir.
Welcome to Yoga Sangha
Announcements (News, Upcoming Events, etc.)
Feature: The Eight Limbs of Yoga
Schedule
Contact Us
Bylece belgeniz uygun konu balklaryla biimlendirilecek ve grnts aadaki
resimdekine benzeyecektir.
4. mleci belgenin ilk satrnn sonuna yerletirin ve Return (Macintoshta) ya da

Enter (Windowsta) tuuna basn.
Bylece Yoga Sangha balnn altnda bir satr daha oluturdunuz. Bu satr, yeni bir
metin blounun bir parasdr. Varsaylan durumda yeni metin blou bir paragraf olarak
biimlendirilir. Her yeni paragraf kendi metin blounu oluturur.
5. Anusara Yoga in the Heart of San Franciscos Mission District yazn.
Paragraf biimlendirme genellikle standart gvde metni iin kullanlr ve belirli miktardaki
bir bolukla dier metin bloklarndan ayrlr. Yeni metin blounu nceki bloktan bo bir
satr ayrr. Biimlendirme iin CSS kullanmazsanz bu boluu deitiremezsiniz.
Bir metin blounun biimlendirmesini paragraf olarak ayarlamak iin
Properties denetisindeki Format mensnden Paragraph seebilir ya da
Cmd+Shift+P (Macintoshta) veya Ctrl+Shift+P (Windowsta) klavye
ksayolunu kullanabilirsiniz.
6. Dosyay kaydedin.
Belgenizi dzenlerken Dreamweavern belge penceresinin st ksmnda dosya adnn

yanna ekledii yldz (*) iaretine dikkat edin. Bu yldz, dosyada deiiklik yapldn ama
dosyann henz kaydedilmediini gsterir. Siz belgeyi kaydettikten sonra bu yldz iareti
kaybolur. Emeklerinizin boa gitmemesi iin belgelerinizi sk sk kaydetmeyi unutmayn.
Satr Sonu Oluturmak

nceki metin satryla arasnda herhangi bir boluk bulunmayan yeni bir satr oluturmak
isterseniz (metinde tek bir satr sonu) bir satr sonundan (line break) faydalanabilirsiniz.
Bu teknik, adres satrlarnda iinize yarayabilir (rnein adresteki her bir satr iin
paragraflarn oluturduu ekstra boluk olmadan yeni bir satr kullanmak istediinizde).
1. Ekleme noktasn Intro To Anusara Workshop Position konu balnda With
Sierra szcklerinin hemen nne getirin. Shift+Return (Macintoshta) ya da
Shift+Enter (Windowsta) tularna basn.
Ekleme noktasnn arkasnda kalan metin bir sonraki satra geecektir. Bylece bir satr
sonu oluturmu oldunuz (yeni bir paragraf deil). Bu yzden iki satr arasnda ekstra bir
boluk yoktur.
ki satr sonu kullanarak yeni bir paragraf grnm oluturabilirsiniz. Ama
gerekten bir paragraf oluturmadnz iin tek bir paragraf sonu (paragraph
return) yerine iki satr sonu ieren bir metne biimlendirme stili uygulamaya
alrken zorlanabilirsiniz.
46 DERS 2
Paragraf
aral
Satr Sonu
ki satr
sonu
2.Aadaki metinde (gsterildii gibi) satr sonlarn ekleyin:
Anusara Yoga Immersion (Satr Sonu Ekleyin)

With Katchie Ananda and Jayne Hillman
3030-A 16th St. (Satr Sonu Ekleyin)
(between Mission and Valencia) (Satr Sonu Ekleyin)
San Francisco, CA 94103
Email: info@yogasangha.com (Satr Sonu Ekleyin)
Phone: 415-934-0000
Insert > HTML > Special Characters > Line Break komutunu seerek ya da Insert ara
ubuundaki Text kategorisini setikten sonra Characters alr mensne tklayp Line
Break seeneini iaretleyerek de satr sonu ekleyebilirsiniz. Insert ara ubuunda satr
sonu simgesi olarak BR kullanlr, nk satr sonu iin kullanlan HTML etiketi <br>dir
ve yine satr sonu iin kullanlan XHTML etiketi de <br />dir. Bu ve dier etiketlerle
almayla ilgili ayrntlar Ders 16da greceiz.
Insert ara ubuunun Text kategorisindeki Characters alr mens
Blnemez Boluk Eklemek

HTML sadece tek bir standart boluu tanr (birden fazla boluu tanmaz). Metin
kaydrma (text wrap) sonucunda blnmemesi gereken iki szcn arasnda bir
boluk oluturmanz gerektiinde blnemez boluk (nonbreaking space) ad verilen zel
karakterden faydalanabilirsiniz. Blnemez boluk, eklendii yerde satr sonu olumasn
engeller (zel boluktan nceki ve sonraki ierik ayn satrda kalmaya zorlanr). Bir
Web sayfasndaki metin blounda metin kaydrma sonucu oluan satr sonunun
konumu, punto ve ziyaretinin tarayc penceresi gibi eitli faktrlere bal olarak ciddi
farkllklar gsterebilir. rnein Yoga ve Sangha szckleri arasnda normal bir boluk
kullandnzda Yoga szc bir satrn sonunda, Sangha szc de bir sonraki
satrn banda grnr. Blnemez boluk kullandnzda ise tarayc bu iki szc bir
arada tutmaya zorlanr.
Blnemez boluk, birden fazla boluk efekti oluturmak iin kullanlmaktadr, nk
bu ekilde birden fazla boluu arka arkaya ekleyebilirsiniz. Ayrca bir metin satrnn
bana da blnemez boluklar ekleyebilirsiniz, ancak bir satra standart bir bolukla
balayamazsnz. Bununla birlikte, yerleim dzenini kontrol etmek (rnein ilk satr
girintilerini CSS ile oluturmak gibi) iin dier yntemleri kullanmak en iyisidir.
Ayrlmamas gereken karakterler, szckler ya da dier elemanlarn (matematiksel
denklemler, isimler ve bunlarn sonekleri ve tarihler gibi) arasna boluk eklemeniz
gerektiinde blnemez boluklardan faydalanabilirsiniz.
1. index.html belgesinde ekleme noktasn, Discover how playful and openhearted yoga can be konu balnn altndaki ilk satrn sonunda yer alan
Anusara ve Yoga szcklerinin arasna yerletirin.
Eer boluk ubuuna bir kereden fazla basarsanz, szckler arasndaki boluk
miktarnda deiiklik olmaz ve sadece tek bir boluk kalr. Birden fazla boluk tannmaz.
Blnemez boluun ekleme noktas
48 DERS 2
2. Mevcut boluu silin ve ardndan Option+Spacebar (Macintoshta) ya da

Crtl+Shift+Spacebar (Windowsta) tularna bir kez basn.
Bir blnemez boluk eklemek iin Insert > HTML > Special Characters > NonBreaking Space komutunu kullanabilir ya da Insert ara ubuundaki Text
kategorisini seip Characters mensne tkladktan sonra Non-Breaking
Space seeneini iaretleyebilirsiniz.
Her blnemez boluk ekleyiinizde szcklerin arasndaki boluk artar.

Tercih ayarlarn deitirerek yazarken birden fazla boluk eklenmesini
salayabilirsiniz. Dreamweaver > Preferences (Macintoshta) ya da Edit >
Preferences (Windowsta) komutunu sein ve General kategorisine gein. Allow
Multiple Consecutive Spaces seeneini iaretleyin. Bu seenek iaretliyken
boluk tuuna birden fazla bastnzda Dreamweaver blnemez boluklar
kullanacaktr. Her zaman bu seenei kullanmayn, nk boluklar ve yerleimi
kontrol etmek iin CSS kullanmak daha iyi bir yntemdir.
3. index.html dosyasn bir Web taraycsnda nizleyin. Anusara ve Yoga
szcklerinin ayrld noktada satr sonu olumasn salamak iin tarayc
penceresini geniletin ve kltn.
Szcklerin ayn satrda kaldna dikkat edin. Satr sonu, blnemez boluun bulunduu
konumda deil, nnde ya da arkasnda ortaya kacaktr.
Dreamweaver belgelerinin Web tarayclarnda nizlenmesi konusunu Ders
1de grmtk.
Metni Hizalamak
Burada kullanabileceiniz be seenek vardr: varsaylan (hizalama yok), Align Left (Sola
hizala), Align Center (Ortala), Align Right (Saa hizala) ve Justify (Her iki yana yasla).
Varsaylan seenek (bu, taraycnn varsaylan ayarlarna baldr) genellikle Align Left ile
ayndr. Bu seenekler bir elemann tayc (container) ile yatay olarak nasl hizalandn
tanmlar. Tayc, dier elemanlar (btn bir sayfa veya bir paragraf gibi) evreleyen bir edir.
index.html belgesinde ekleme noktasn sayfann st ksmndaki Yoga Sangha konu balnn
iine yerletirin. Properties denetisindeki Align Center dmesine tklayn.
Properties
denetisindeki
metin hizalama
seenekleri
Align Center Align Right

(Ortala) (Saa hizala)
Align Left
Justify (Her iki yana yasla)
(Sola hizala)
Balk ortalanacaktr. Bir metin blouna uyguladnz her trl paragraf biimlendirmesi
(konu balklar ya da hizalama gibi) o paragrafn iindeki her eyi etkiler.
yi Kod Yazma Prensipleri:

Align Niteliinin Kullanmdan Kaldrlmas
HTMLin 4.01 srmnden itibaren align (hizalama) nitelii artk benimsenmemektedir, yani W3 tarafndan kaldrlmas gereken niteliklerden biri
olarak kabul edilmitir. align nitelii, karlk gelen blok elemann etiketinde
u ekilde grnr:
<h1 align=center>Yoga Sangha</h1>

Benzer ekilde, hizalamay dorudan aadaki rnekteki gibi bir div
(<div> etiketi, genellikle bir belgenin eitli ksmlarn tanmlamada
faydalanlan ve CSS ile birlikte kullanlan bir yapsal iaretleme trdr)
iinde tanmlama yaklam da artk benimsenmemektedir.
<div align=right>
Sayfalarnzda kullandnz metin ve resim gibi elemanlar hizalamann
en iyi yolu CSS kullanmaktr. Mevcut standartlara uygun ve olabilecek en
etkin sayfalar oluturmak iin mmkn olan her yerde CSS kullann ve
Properties denetisindeki drt hizalama seeneini kullanmaktan kann,
nk bu seenekler align niteliini kullanrlar.
CSSin kullanlmas konusunu Ders 4te, kodlarla alma konusunu ise
Ders 16da greceiz.
Alntlar Tanmlamak
Properties denetisinde Text Outdent ve Text Indent adn tayan iki seenek bulunur.
Bu seeneklerin isimleri ilk bakta yanl anlalabilir. Bunlarn bir metin girintileme
yntemi olarak deil, alntlar gstermek iin kullanlmalar gerekir. Bu seenekler, metin
blounu blok alnt olarak adlandrlan bir bileenle evrelerler. Blok alnt, ierdii metnin
bir alnt olduunu gsteren bir blok dzeyi elemandr. Bu metin varsaylan olarak
iki taraftan da girintili bir grnme sahiptir. Text Indent yani Metin Girintisi ismi de
buradan gelmektedir. Daha ok alntlanan uzun metin paralar iin kullanlr. Blok alnt,
alntnn bana ve sonuna al ve kapan trnak iaretlerini eklemez, bunlar metne sizin
eklemeniz gerekir.
1. mleci Announcements konu balnn stnde yer alan alntnn iine
yerletirin ve Properties denetisindeki Text Indent dmesine tklayn.
Ayrca, bir blok alnt uygulamak iin Text > Indent komutunu seebilir ve
bylece seili durumdaki metne girinti verebilirsiniz.
50 DERS 2
Properties denetisindeki
metin girinti seenekleri
Text Outdent
Text indent
Paragraf hem sol, hem de sa kenar boluuna gre girintili olarak grnecektir. Blok
alntlar tm paragrafa uygulanr. Bu girintinin miktarn kontrol etmenin tek yolu, blok
alnt eleman iin bir CSS stili oluturmaktr. Blok alnty CSS olmadan uyguladnzda
tarayc tarafndan belirlenen varsaylan boluk ayar kullanlr ve bu da taraycdan
taraycya farkllk gsterebilir.
Bir paragrafa girinti vermeye alyorsanz ve bunun yaknndaki
paragraflara da girinti uygulanyorsa, paragraf m yoksa ift satr sonu mu
kullandnz kontrol edin. Bir paragraf sonu kullandnzdan emin olmak
iin imleci girinti vermek istediiniz paragrafn bana getirin. nceki
paragrafn sonuna gelene kadar Delete (Macintoshta) ya da Backspace
(Windowsta) tuuna ve ardndan yeni bir paragraf oluturmak iin Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn.
Sayfadaki standart gvde metninden ayrmak iin alnt olmayan bir metne girinti vermek
isterseniz veya bir paragrafn sadece ilk satrna girinti vermek isterseniz CSS kullanmanz
gerekir (CSS konusunu Ders 4te ele alacaz).
2. Bir blok alnty silmek isterseniz Properties denetisindeki Text Outdent
dmesine tklayn ya da Text > Outdent komutunu sein.
XHTMLde blok alntlarn sadece metin deil, paragraf gibi blok dzeyi
elemanlar da iermesi gerekir. Bu gereksinimi karlamak iin Dreamweaver
XHTML belgelerinde orijinal elemann paragraf biimlendirmesini otomatik
olarak koruyacaktr.

Blok alntlara uygulanabilecek birok ilave nitelik mevcuttur, rnein

alntnn URL kaynan belirtmek iin kullanlan cite, alntnn hangi dilde
olduunu gsteren lang ve ara ipularn (fare imleci blok alntnn zerine
getirildiinde alan bir pencerede kullancya ek bilgi sunan ksa mesaj)
grntlemek iin kullanlan title gibi. Bu nitelikler dier birok etikete de
uygulanabilir. Bu tr nitelikleri, Ders 16da anlatlan Dreamweavern kod
aralarn kullanarak ekleyebilirsiniz.
Liste Oluturmak
Dreamweaverda temel liste tipi oluturabilirsiniz: sral listeler, srasz listeler ve tanm
listeleri. Bir sral liste, saysal ya da alfabetik olarak sralanm elerden oluur. Latin ya
da Romen rakamlarn veya BYK ya da kk harfleri kullanabilirsiniz. Sral listeler,
admlardan oluan bir listeyi sunarken olduu gibi eleri ak bir ekilde dzenlemek
ve etiketlemek gereken durumlarda idealdir. Srasz listeler genellikle madde imli listeler
olarak anlr. nk listedeki her enin nnde bir madde imi bulunur. Dreamweaverda
madde imi iin kullanlan varsaylan sembol deitirilerek disk, yuvarlak ya da kare
haline getirilebilir. Srasz listeler, her enin birbirinden ayrlmasnn gerektii, fakat
rakamlarla veya harflerle etiketlemenin gerekmedii durumlarda (yemek listesi gibi) gayet
kullanldr. Tanm listeleri terimlerden ve bunlarn tanmlarndan oluur. Bunlar daha
sonraki bir uygulamada greceiz.
Her list tipinde de listenin dzgn bir ekilde biimlendirilebilmesi iin listedeki her
enin kendi paragraf iinde bulunmas gerekir.
Bu uygulamada biri sral, biri de srasz olmak zere iki liste oluturacaksnz. Sonra da
List Properties iletiim kutusunu kullanarak liste stillerinde deiiklik yapacaksnz. Tanm
listesi rneini bu dersin ilerleyen blmlerinde greceiz.
1. index.html belgesinde yama (restraints or moral codes) ifadesi ile balayan
ve samadhi (meditative absorption) ifadesiyle biten metni sein. Properties
denetisindeki Ordered List dmesine tklayn.
Seili durumdaki metin biimlendirilerek girintili ve numaralandrlm bir liste haline

gelecektir.
Properties denetisindeki
liste seenekleri
Unordered List (Srasz liste)

Ordered List (Sral liste)
Listelerle ilgili birok seenek vardr. Listenin zelliklerinde deiiklik yaparak sral
listelerin numaralandrma dzenini deitirebilirsiniz. Sradaki admlarda bu ilemi srasz
bir liste zerinde gerekletireceksiniz.
Sral bir listede deiiklik yaplrken sral liste tipi, List Properties iletiim kutusunun List
type alr mensnde Numbered List olarak gsterilir.
52 DERS 2
2. Schedule konu balnn altndan gnleri ve bunlara ait zaman dilimlerini sein.
Properties denetisindeki Unordered List dmesine tklayn.
Seili metni srasz bir liste olarak biimlendirmek iin Text > List > Unordered
List komutunu da kullanabilirsiniz.
Seilen metin madde imli bir liste olarak biimlendirilecektir.

Listenin zellikleriyle oynayarak srasz listelerin varsaylan madde imi simgesini
deitirebilirsiniz. Bu ilem aada ayrntl olarak anlatlmtr. Madde imi simgelerinin
grn taraycdan taraycya deiebilir ve tm listeler yine taraycdan taraycya
deien belirli bir boluk miktar kullanr. Madde imleri ve liste boluklar ve saylarn/
harflerin grn ile ilgili olarak kullanabileceiniz seenekler snrldr. Liste grnm
zerinde daha fazla kontrol sahibi olmak iin Ders 4te greceimiz stil sayfalarndan
faydalanabilirsiniz.
Srasz bir listede deiiklik yaplrken, srasz liste tipi, List Properties iletiim kutusunun
List type alr mensnde Bulleted List olarak gsterilir.
Listenin biimlendirme zelliklerini silmek ya da farkl bir liste tipine gemek
isterseniz tm listeyi sein ve Properties denetisindeki ilgili liste dmesine
tklayn. Biimlendirme zelliklerini kaldrmak iin Ordered List dmesine
(eer bu sral bir listeyse) veya Numbered List dmesine (eer
numaralandrlm bir listeyse) ya da gemek istediiniz liste tipine ait dmeye
tklayn.
3. Ekleme noktasn madde imli listedeki son satrn en sonuna yerletirin ve Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn. Sunday yazn.
Bir listeye metin eklerken, ilave e iin yeni bir metin blou oluturmak istiyorsanz
normal bir paragraf sonu kullanmanz gerekir. Listedeki her e ayr bir paragrafta
olmaldr.
Return (Macintoshta) ya da Enter (Windowsta) tuuna iki kez bastnzda liste
modundan karsnz ve varsaylan tipte bir paragrafla almaya balarsnz.
4. Shift+Return (Macintoshta) ya da Shift+Enter (Windowsta) tularna basarak bir
satr sonu oluturun ve ardndan 9-10:30am yazn. Bir satr sonu daha ekleyin ve
11am-12:30pm yazn. nc bir satr sonu daha ekleyerek 6:15-7:45pm yazn.
Ayn e iinde bir ya da daha fazla yeni satr oluturmanz gerekiyorsa, bu admda
yaptnz gibi satr sonlarndan faydalanabilirsiniz.
Belgenizin grnm aadaki rnee benzeyecektir.
5. Madde imli listede herhangi bir satra tklayn ve ardndan Properties

denetisindeki List Item dmesine tklayn.
List Item dmesi
54 DERS 2
Tm listeyi setiinizde List Item dmesi soluk renkle gsterilecek ve kullanlamaz

durumda olacaktr. Eer List Item dmesi grnmyorsa, Properties denetisinin sa alt
kesindeki geniletme okuna tklayn.
mle listenin iindeyken Text > List > Properties komutunu seerek ayn List
Properties iletiim kutusunu aabilirsiniz.
List Properties iletiim kutusu alacaktr. Alan List Properties iletiim kutusunda List Type
mensnden liste tipini ve Style alr mensnden de istediiniz stili seebilirsiniz. Style
mensndeki seenekler, listenin sral ya da srasz olmasna bal olarak farkllk gsterir.
List Properties iletiim kutusu
List Properties iletiim kutusunun alt ksmndaki List item alannda, tm listenin dzenini
ve grnmn deitirmek yerine listedeki bir ya da birden fazla enin grnmn
deitirmenizi salayan New style adnda bir men bulunur. Ayrca bu alanda Reset
count to adnda bir metin alan bulunmaktadr. Bu seenei kullanarak ekleme
noktasnn bulunduu satrn sra numarasn deitirebilirsiniz.
List Properties iletiim kutusundaki List type mensnde iki ilave liste tipi
daha bulunur: Menu ve Directory. Bunlar, madde imli listenin eski trleridir.
Her ikisi de kullanm amac olarak srasz listelere benzer ve normalde ou
Web taraycs tarafndan srasz listelerle tamamen ayn ekilde grntlenir.
Srasz listeler iin genellikle madde imli listeleri (Bulleted List) kullanmanz
tavsiye edilir.
6. Style mensnden Squarei sein. OK dmesine tklayn.
List Properties
iletiim
kutusundaki
Style
mensnn
seenekleri
Style mensn kullandnzdan emin olun (New style mensn deil). Eer List item
alanndaki New style mensn kullanrsanz, yaptnz deiiklik listede sadece ekleme
noktasn koyduunuz satr etkiler.
Listedeki btn elerin nnde kare eklindeki madde imi semboln greceksiniz.
Sral ve srasz listelerde kullanlan numaralarn ve madde imlerinin rengi,
belgede metin iin kullanlan varsaylan renge baldr. Belgenin varsaylan
ayarlarn CSSle almaya balayacanz Ders 4te yapacaksnz. Renk,
byklk ve grnmle ilgili dier nitelikler (madde imlerinin stili de dahil olmak
zere) dzenlemek iin en iyi seenek CSStir.
index.html belgesini ak brakn. Bu belgeye bu derste daha sonra tekrar dneceksiniz.
Tanm Listeleri Oluturmak

Bir tanm listesi (definition list) bir dizi terim ve bunlarn tanmlarndan oluur. Tanmlanacak
szck ya da terim sola hizaldr, tanm ise girintili olarak bir sonraki satra yerletirilir. Sral
ve srasz listelerdeki gibi bir ncl karakter (leading character) kullanlmaz.
1. definitions.html belgesini an ve Hatha Yoga satryla balayp belgenin sonuna
kadar devam eden metni sein. Text > List > Definition List komutunu sein.
Konuyla ilgili baka bir uygulama daha yapmak isterseniz, yeni bir belge
oluturabilir, bunu Lesson_02_Content klasrne kaydedebilir, belgenize bir
balk atayabilir ve Text klasrnde bulunan definitions.txt belgesindeki metni
aktarabilirsiniz. definitions.txt dosyas bir Macintoshta oluturulmutur. Ayrca
belgenin en st ksmnda bulunan Yoga balna bir konu bal biimi de
uygulayabilirsiniz.
Terimlerin sol kenar boluunun nnde ve bunlara ait girintili tanmlarn da takip eden
satrlarda grndne dikkat edin.
56 DERS 2
Tanm listenizin grnm aadaki rnee benzeyecektir.
2. definitions.html ve index.html dosyalarn kaydedin ve bir Web taraycsnda

nizleyin.
Btn bu listeleri oluturma ve biimlendirme ilemlerini tamamladnza gre artk

belgelerinizi kaydetme zaman geldi demektir. Dersin geri kalan ksmnda almaya
devam etmek iin iki belgeyi de ak brakn.
e Listeler Oluturmak
Dreamweaverda ie ie gemi listeler de (nested lists) oluturabilirsiniz. e ie gemi
listeler asl listeyle ayn ya da farkl tipte olabilir. rnein sral bir listeyi bir tanm listesinin
iine yerletirebilirsiniz. Varsaylan durumda madde imleri, siz i ie listeler olutururken
srasyla ii dolu yuvarlaklar, ii bo yuvarlaklar ve kareler eklinde grntlenir.
Dreamweaverda madde imi tipleri bullet (madde imi), circle (daire) ve square (kare) olarak
adlandrlr. Bunlara karlk gelen HTML terminolojisi ise disc, circle ve squaredir.
Baz Web tarayclar ii bo kare eklinde madde imleri grntler. rnein Netscape
4.7nin Macintosh srm ii bo kareler grntlerken Internet Explorer 5.0n
Macintosh srm ii dolu kareler grntler. Windowsta karelerin ii doludur.
1. index.html belgesinde, ahimsa ile balayan ve aparigraphaya kadar giden

satrlar sein.
Bu eler, bir nceki satrda bulunan yama kategorisine aittir, bu yzden imdi bu
eleri i ie yerletirme tekniiyle bir alt liste oluturacaksnz.
2. Properties denetisindeki Text Indent dmesine tklayn.
Burada Text Indent dmesi blok alnty seili metne uygulamaz. Bunun yerine, seili
eleri girintileyerek bir sonraki dzeye atayan i ie gemi tipte bir liste oluturur. Sral
bir listeden i ie gemi bir liste yaptnzda iteki eler yeniden sralanr. Srasz bir
listede iteki listenin madde imleri, ana listedekilere gre farkl bir stilde grntlenir (ii
bo daireler gibi). Daha nce ana listede yaptnz gibi List Properties iletiim kutusunu
kullanarak stili deitirebilirsiniz.
teki bir eyi normal bir liste esine dntrmek isterseniz, ekleme
noktasn iteki bu enin iine yerletirin, ama onu semeyin. Properties
denetisindeki Text Outdent dmesine tklayn.
ie gemi listenizin grnm aadaki rnee benzeyecektir.
Metne girinti verirken olduu gibi, girintisi kaldrlan metinlerin, listelerin ya da i ie

yerletirilen listelerin boluklar zerinde herhangi bir ayarlama veya kontrol imknna
sahip deilsiniz.
58 DERS 2
teki listenin son esiyle ondan sonra gelen ana liste esi arasnda ekstra
bir satr varsa, ekleme noktasn bu bo satra yerletirip Delete (Macintoshta)
ya da Backspace (Windowsta) tuuna basarak bu satr sonundan
kurtulabilirsiniz. Bunu yaptnzda iteki listenin son satrndaki son karakter
silinebilir. Bu karakteri tekrar yazarak sorunu zebilirsiniz.
Satrii Karakter Biimlendirme

Satrii biimlendirme, ierie dorudan belirli bir noktada uygulanr. Bu biimlendirme
ekli, metin dzeyinde iaretlemedir ve cmle elemanlar (phrase elements) olarak da
bilinir. Bir cmle eleman, kk metin paralarnn yaps ve kullanm ekliyle ilgili bilgileri
tanmlar ve bu ekilde belgenin daha byk bir blmnn yaps yerine balamyla
ilgili bilgi verir (blok dzeyi elemanlarda olduu gibi). Dreamweaverda oluturduunuz
metinlere belirli noktalar, szckleri ya da cmleleri vurgulamak iin birka biimlendirme
zellii uygulayabilirsiniz. En sk kullanlan iki zellik, kaln ve italik biimlendirmedir.
1. definitions.html belgesinde listenin en stnde yer alan terimi (Hatha Yoga) sein.
imdi seilen metne kaln biimlendirme uygulayacaksnz.

2. Properties denetisindeki Bold dmesine tklayn.
Bold (Kaln) Italic (talik)
Seilen metne kaln biimlendirme uygulamak iin Text > Style > Bold komutunu seebilir
ya da Insert ara ubuunun Text kategorisindeki Bold dmesine tklayabilirsiniz. Bunun
iin kullanlan ksayollar unlardr: Cmd+B (Macintoshta) ve Ctrl+B (Windowsta).
Kaln biimlendirme zelliini uygulamak iin Properties denetisini kullanrsanz (eer
tercih ayarlarnz uygun ekilde ayarlandysa) Dreamweaver seili durumdaki metnin bana
ve sonuna <strong> ve </strong> etiketlerini yerletirir. Benzer ekilde, italik biimlendirme
zelliini uygularken seili metnin bana ve sonuna srasyla <em> ve </em> etiketleri (em,
emphasis, yani vurgu manasndadr) konur. Dreamweaver, bold ve italik etiketlerinin (<b>,
<i>) yerine mantksal iaretleme olarak bilinen strong ve emphasis etiketlerini kullanr.
Mantksal iaretleme denmesinin sebebi, bu etiketlerin ierii hem balamsal, hem de
grsel anlamda etkilemesidir. Bold ve italic etiketleri fiziksel iaretleme olarak bilinir,
nk bunlar sadece grn etkiler. Mantksal iaretleme daha esnektir ve daha geni bir
kullanc kitlesine hitap eder. Bir metin blmnn ilevini temsil eder, sunumsal/grsel
bilgi vermenin tersine (bu da en iyi CSS araclyla gerekletirilir).
talik biimlendirme zelliini de ayn ekilde uygulayabilirsiniz. Bunun iin Properties
denetisindeki Italic dmesini kullanmanz yeterlidir.
Dier biimlendirme seenekleri arasnda Underline (metnin altna bir izgi izer),
Teletype (metni bir monospace yani earalkl fontla grntler) ve Strikethrough (tam
ortasndan geen bir izgiyle metnin stn izer) yer alr.
Web sayfalarnzda alt izgi biimlendirme zelliini kullanrken dikkatli olun.
Bir Web sayfasnda balantlar gstermek iin en sk kullanlan aralardan
biri de alt izgidir. Balantlar dndaki metinlerde alt izgi kullanmak
muhtemelen ziyaretilerinizin kafasn kartracaktr. Metinleri byklk,
renk ve boluk gibi dier zellikler araclyla da farkl klmak mmkndr.
Bu konularn hepsini Ders 4te reneceksiniz. Standart Web alkanlklarn
bilerek ve bunlar uygulayarak sitenizi daha anlalr ve eriilmesi kolay hale
getirebilirsiniz. Stilleri ve elemanlar kafa kartrmalarna neden olabilecek
ekillerde ve anlamlarda kullanmaktan kann.
3. Kaln biimlendirme zelliini tanm listesindeki dier terimlere de uygulayn.
ou kez en son yaptnz ilemi, rnein ayarladnz biimlendirme zelliini dier

bir paragrafta ya da baka bir seili metinde tekrarlamanz gerekecektir. Redo komutu
bu ilemi basit bir tu vuruuna indirmektedir. Edit mensnde ilk iki srada yer alan iki
komut Undo ve Redodur. Aadaki klavye ksayollarn ezberlemeniz size byk kolaylk
salayacaktr.
Undo: Cmd+Z (Macintoshta) ve Ctrl+Z (Windowsta)
Redo: Cmd+Y (Macintoshta) ve Ctrl+Y (Windowsta)
Sk sk tekrarladnz ilemleri hzlandrmak iin History panelini

kullanabilirsiniz. Bunu da Window > History komutunu seip History panelini
atktan sonra paneldeki arka arkaya gelen bir dizi eylemi seip panelin sa
alt kesindeki Save Selected Steps As Command dmesine tklayarak ya
da panelin sa st kesindeki balam mensnden Save As Command
komutunu seerek gerekletirebilirsiniz. Sk kullanlan kod paralarn hzl
bir ekilde eklemek isterseniz Snippets zelliini kullanmanz gerekir (bu
konuyu Ders 16da greceiz).
60 DERS 2
History paneli
Save Selected Steps As
Command dmesi
definitions.html belgesini kaydedebilir ve kapatabilirsiniz.
zel Karakter Eklemek

Dreamweaverda alrken bazen dorudan klavyeden eriemediiniz karakterleri
kullanmanz gerekir. Bu zel karakterler, hatrlanmas zor alternatif klavye ksayollarna ya
da zel HTML kodlarna sahiptir.
1. Ekleme noktasn index.html belgesinde son paragrafn bana, 2005 Yoga
Sangha ifadesinin hemen nne yerletirin.
Web sayfalarnn en altnda genellikle telif hakk bilgilerini ieren bir altbilgi blm
bulunur. Bu altbilgilerde, eriilebilirlii salamak ve sitenin temel blmlerine gitmeyi
salamak iin metin tabanl balantlarla birlikte kimi zaman irtibat bilgilerine de yer
verilir.
2. Insert ara ubuunda Text kategorisini sein. Characters mensne tklayn ve
eklemek iin (Copyright - telif hakk) karakterine tklayn.
Characters mensne, simgenin sandaki siyah oka tklayarak eriebilirsiniz.

Characters mensndeki simgesine tkladnzda (Copyright) karakteri yeni satra
eklenecektir.
Insert ara ubuundaki dier menlerde olduu gibi, Characters mensn temsil eden
simge, mende en son seilen eye bal olarak deiecektir.
Belgenizin kodlama tipine bal olarak zel karakterlerin btn Web
tarayclarda grnmeyebileceini belirten bir uyar mesajyla
karlaabilirsiniz. Kodlamann deitirilmesi konusunu bir sonraki
uygulamada greceiz.
Macintosh kullanclar iin: Eer Insert ara ubuunun Text kategorisindeki Characters
simgesini/mensn gremiyorsanz, Insert ara ubuunu geniletmeniz gerekebilir. Bunun
iin ara ubuunu yatay olarak geniletmek zere sa alt kesine tklayp srkleyin.
Characters mens
Insert ara ubuunun Text kategorisi
Copyright sembol
Insert ara ubuunun Text kategorisinde yer alan Characters mens

araclyla ihtiya duyduunuz sk kullanlan karakterlerin ouna hzl bir
ekilde eriebilirsiniz. Ama bu men size tm karakterleri ieren tam bir liste
sunmaz. Eer kullanmak istediiniz karakter Character mensnde yoksa,
mennn alt ksmndaki Other Characters seeneine tklayarak ya da Insert >
HTML > Special Characters > Other komutunu seerek sz konusu karakteri
bulabilirsiniz. Insert Other Character iletiim kutusundan bir karakter
setiinizde iletiim kutusunun sol st kesinde yer alan metin kutusunda
buna karlk gelen HTML kodu belirecektir. Kullanmak istediiniz karakteri
zerine tklayarak setikten sonra OK dmesine tklayn.
index.html belgesini ak brakn.
62 DERS 2
oklu Dil Destei eren Belgeler Oluturmak

Asl kullandnzdan farkl karakterler ieren alfabelerin kullanld oklu dil desteine
sahip belgeler oluturmak iin her sayfann kodlamasn ayarlamanz ve sayfanz iin
hangi karakter kmesinin (kmelerinin) gerektiini bilmeniz gerekir. Karakter kmesi
(character set), belirli bir ama iin bir araya getirilen karakterlerden (rnein bir alfabeyi
oluturulan karakterler gibi) oluan bir karakter grubudur. Kodlama sistemi (encoding
system), byle bir kmedeki karakterlerin kendilerini temsil eden veri bitleriyle nasl
eleneceini tanmlayan yntemidir.
1. Lesson_02_Content klasrndeki sanskrit.html dosyasn an. Modify > Page
Properties komutunu ve ardndan Title/Encoding kategorisini sein. Encoding
alr mensnden Unicode 4.0 UTF-8i (Macintoshta) ya da Unicode (UTF8)i (Windowsta) sein. OK dmesine tklayarak iletiim kutusunu kapatn.
letiim kutusundaki dier seenekleri varsaylan ayarlarnda brakabilirsiniz.

Seilen kodlamann orijinal kodlamada kullanlan btn karakterleri
iermediini belirten bir uyar mesajyla karlaabilirsiniz. Onaylamak iin
Apply dmesine tklayn ve yeni kodlamay uygulayn.
Page Properties iletiim kutusundaki Title/Encoding seenekleri
Kodlama tipinin seilmesi
Dreamweaverda kullanlan varsaylan kodlama Western ISO (Latin 1)dir. Bu seenek

ou Bat Avrupa dilini kapsamaktadr. (ISO, International Standards Organization, yani
Uluslararas Standart Organizasyonunun ksaltmasdr.)
ISO-8859-1 (Latin 1) olarak da bilinen Western ISO (Latin 1) kodlamas,

Dreamweavern uluslararas srmleri iin varsaylan seenek olarak
ayarlanmam olabilir.
Unicode, pek ok dile ait karakterlerin byk bir ksmn kapsayan genel bir karakter
kmesidir. Tek bir belgenin birok farkl dile ait karakterleri iermesini salayarak birok
karakter kmesinin bir st grubu olmas iin tasarlanmtr, hem oklu dil desteine,
hem de oklu platform desteine sahiptir. Farkl alfabelerin karakterlerini grntlemek
iin UTF-8 (Unicode Transformation Format 8) kodlamasn kullanabilirsiniz. Bu
kodlama tipi, bu derste daha nce rendiiniz gibi .txt belgelerinde ska kullanlan bir
format olan ASCII ile uyumludur. UTF-8, Windows 2000 ve Macintosh OS X tarafndan
desteklenir. Yine de, belirli unicode fontlar belirtmek ve/veya bir Unicode fontunu
(fontlarn) indirmek iin bir balant eklemek gerekebilir. Eski Web tarayclar ve eski
iletim sistemleri UTF-8i desteklemeyebilir.
Bat Latin alfabesinde bulunmayan karakterleri, rnein Japon Katakana alfabesini
(yabanc szckler) ve/veya Hiragana alfabesini (Japonca szckler), kullanmanz
gerektiinde, UTF-8 kodlamasn kullanmak zorunda kalabilirsiniz (ya da kullandnz
dile bal olarak tersi de sz konusu olabilir). Eer irketinizde birden fazla dil
konuuluyorsa ya da birden fazla dilde hizmet veriliyorsa, belgelerinizde dier alfabelerin
karakterlerini de kullanmak isteyebilirsiniz.
Buradaki uygulamada bu konuyu, Devanagari alfabesini kullanarak Sanskrite szckler
yardmyla reneceksiniz.
2. Text klasrnde yer alan sanskrit_terms.rtf dosyasn TextEdit (Macintoshta) ya
da WordPad (Windowsta) gibi bir uygulamada an, her eyi sein, kopyalayn
ve sanskrit.html belgesine yaptrn.
Belgenizin grnm aadaki rnekteki gibi olacaktr.
64 DERS 2
Baka alfabelere ait karakterlerin kullanld bir metni aktarmak iin, bu metni buradaki
uygulamada yaptnz gibi ilgili belgeden kopyalamanz ya da giri menleri veya
dorudan klavye araclyla dier karakter kmelerine erimenizi salayan dil aralarn
kullanarak kendiniz oluturmanz gerekir.
Macintosh OS X, birok dili destekler. Sistem tercihlerinin Uluslararas (International)
blmn kullanarak mevcut ayarlarnzda deiiklik yapabilir ve farkl dillere
eriebilirsiniz. Giri mens (Input menu), farkl karakterlerle nasl alacanz
semenizi salar (rnein klavyeyi ya da bir giri paletini kullanarak alabilirsiniz).
Windows 2000 ve daha yeni srmleri Unicode araclyla oklu dil desteine sahiptir.
3. sanskrit.html belgesini kaydedin ve bir Web taraycsnda nizleyin.
Sayfay farkl Web tarayclarnda test etmek isteyebilirsiniz. Her tarayc Unicode
kullanmn desteklemez.
erii dier dillere ve alfabelere uygun ekilde grntlemenin alternatif bir
yolu da, resimler kullanmaktr. Bununla birlikte, resim kullanmak, deiiklik
yaplmas durumunda ileri ciddi lde yavalatabilir. Metin kullanmann,
hzl ve kolayca dorudan Dreamweaver iinde gncelleme yaplmasn
salamak gibi bir avantaj vardr. Metinler resimlere gre daha esnektir ve
ayrca eriilmeleri ve aktarlmalar daha kolaydr.
sanskrit.html belgesini kapatabilirsiniz.
Yatay Cetvel Eklemek

Yatay cetvel (horizontal rule), sayfa boyunca yer alan bir izgidir ve ieriinizin
blmlerini grsel olarak ayrmanz salar. Cetvel bir belgenin yapsn tanmlarken
faydal olabilir ve materyalin her blmnn ak bir ekilde grlmesini salar. Buradaki
uygulamada telif hakk bilgisinin zerine bir yatay cetvel ekleyeceksiniz.
Ekleme noktasn, nceki uygulamada index.html belgesinin alt ksmna eklediiniz
telif hakk karakterinin hemen nne yerletirin. Insert ara ubuundaki HTML
kategorisinde Horizontal Rule dmesine tklayn.
Horizontal Rule dmesi
Eer Insert ara ubuu grnmyorsa Window > Insert komutunu sein.
Ayn ilemi, belgeye tklayp Insert > HTML > Horizontal Rule komutunu
seerek de gerekletirebilirsiniz.
Siz yatay cetveli ekledikten sonra cetvel, belge penceresinde seili durumda olacaktr.
Cetvel telif hakk bilgisinin hemen zerine yerletirilecek ve telif hakk bilgisi de yatay
cetvelin bir satr altna inecektir. Yatay cetvel, satrn stnde ve altnda belirli miktarda
bir bolua sahiptir. CSS kullanmadka bu boluun miktarn kontrol edemezsiniz.
Yatay cetveli setiinizde Properties denetisinde cetvelin nitelikleri grntlenecektir.
Burada isim, genilik ve ykseklik, l birimi (piksel ve yzde), glge, yatay hizalama ve
Class mens araclyla CSS uygulama seenekleri yer alr.
Properties denetisindeki yatay cetvel seenekleri
Properties denetisindeki byklk ve hizalama seenekleri, HTMLin 4.0 ve

sonraki srmlerinde artk benimsenmeyen etiketleri kullanr. Grnm, Ders 4te
reneceiniz gibi CSSle kontrol etmek daha iyidir.
CSS kullanarak deitirmenize ramen yatay cetvelin rengi yine gri
(Dreamweaverdaki varsaylan seenek) olarak grnebilir. Bu yzden yatay
cetvele CSSle uygulanan zellikleri Web taraycnzda nizlemeniz gerekir.
Otomatik Olarak Tarih Eklemek

Bazen sitenizdeki sayfalardan birinin son deiiklik tarihini takip etmeniz gerekebilir
ya da ziyaretilerinizin sayfalarnzdaki bilgilerin en son ne zaman gncellendiini
grebilmesini istersiniz. Dreamweaver bu bilgilerin izlenebilmesi iin sayfalarnza
tarih ve saat bilgisi eklemenize izin verir. Sayfalarnz Dreamweaver kullanarak her
kaydediinizde Dreamweaver tarihi ve saati otomatik olarak gncelleyebilir, bylece bu
ilemi elle yapmak zorunda kalmazsnz.
Bu tarih, bir kullancnn sayfaya eritii tarih ve/veya saate gre deien
dinamik bir tarih deildir. Bu tarih sadece kullanclarnza sayfalarnzn ne
zaman gncellendiini bildirir. Geerli tarihi ve/veya saati gsteren dinamik
tarihler genellikle JavaScriptle oluturulur. JavaScriptle ilgili ayrntl bilgileri
Ders 8de greceiz.
1. Ekleme noktasn telif hakk bilgisinin bulunduu paragrafn sonuna yerletirin,
bir satr sonu ekleyin ve Updated: yazn.
Bu bilgi genellikle haber sitelerinin sa st kesinde ya da dier bilgi sitelerinde sayfann

alt ksmnda yer alr.
66 DERS 2
2. Sayfaya o gnn tarihini yerletirmek iin Insert ara ubuundaki Common

kategorisini sein ve Date dmesine tklayn.
Insert Date iletiim kutusunu amak iin Insert > Date komutunu da
kullanabilirsiniz.
Date dmesi
Insert Date iletiim kutusu alacaktr.
3. Day format mensnde Thursday seeneini, Date format mensnde March

7, 1974 seeneini iaretleyin. Time format mensnde 10:18 PMi iaretleyin.
Belgenizi her kaydediinizde sayfanzdaki tarihin gncellenmesini salamak iin
Update Automatically On Save onay kutusunu iaretleyin. OK dmesine tklayn.
Geerli gn, tarih ve saat grntlenecek ve siz belgeyi her kaydettiinizde bu bilgi
deiecektir. Thursday (Perembe), gn bilgisinin belgenizde nasl grneceini size
gstermek iin Insert Date iletiim kutusunda bir rnek olarak kullanlmtr. Tarih ve saat
deerleri de birer rnektir.
Eer tarih otomatik olarak gncellenecek ekilde ayarlandysa, tarihi

ekledikten sonra biimde istediiniz zaman deiiklik yapabilirsiniz. Tarih
biimini deitirmek isterseniz belgenizdeki tarihe ve ardndan Properties
denetisindeki Edit Date Format dmesine tklayn. Insert Date iletiim
kutusu alacaktr. Uygun deiiklikleri yapn ve ardndan OK dmesine
tklayn. Yaptnz deiiklikler belgeye uygulanacaktr. Otomatik olarak
gncellenmeyen tarihlerin biimi iletiim kutusu araclyla dzenlenemez.
Bu tipteki tarihleri gncellemek iin belge penceresindeki tarih metnini
silmeniz ve yeniden yazmanz veya deitirmeniz gerekir.
index.html belgesini kaydedebilir, nizleyebilir ve kapatabilirsiniz.
erii Tek Banza Biimlendirin

erii dzenlemeye ve nceliklere gre organize etmeye yardm eden biimlendirme
teknikleriyle sayfalarnz nasl yaplandracanz rendiinize gre bu becerileri
kendi sayfalarnza uygulamaya hazrsnz demektir. Bunun iin, Ders 1deki Tek Banza
blmnde oluturduunuz aratrma ve gelitirme altrmasn sitemizin ieriini
oluturmak iin bir temel olarak kullanmanz gerekiyor. Sitenizde kullanacanz
metinleri temin ettikten sonra, aadaki admlarda anlatld gibi elinizdeki materyali
Dreamweaverda oluturduunuz sayfalara eklemeye balayabilirsiniz.
1. htiyacnz kadar HTML sayfasn ayr ayr oluturun ve bunlara ilgili ierikleri
aktarn.
Ders 1in sonunda gelitirdiiniz site yapsn klavuz olarak kullanarak ka sayfa
oluturulacan, bunlarn dosya yapsnda nerede bulunacan ve her sayfada hangi
ieriin kullanlacan belirleyin.
2. Her bir sayfay yaplandrmak iin sayfalar uygun ekilde konu bal
biimlendirmesi uygulayn ve gereken yerlerde satr sonlar, paragraflar ve
blnemez boluklar kullann.
Paragraf kombinasyonlar ve farkl konu bal dzeyleri kullanmak, belgelerinizin farkl

blmlerini tanmlamanzda size yardmc olacaktr. Belgelerinizin her birinin yapsn
ak bir ekilde tanmladysanz, sonraki derslerde reneceiniz sunum ve tasarmla ilgili
elemanlar eklemeniz ok daha kolay olacaktr.
3. Gereken yerlere alntlar, listeleri, zel karakterleri, satrii karakter
biimlendirme zelliklerini ve oklu dil destei ieren elemanlar bu derste
anlatld ekilde sayfalarnza ekleyin.
leride ierik eklemek amacyla kullanmak zere bu sayfalar yerel kk klasrnze birer
yer tutucu olarak kaydedebilirsiniz.
68 DERS 2
Ne rendiniz?
Metin tercihlerini ayarlama ve metin aktarma ilemlerini farkl ekillerde nasl

yapacanz rendiniz (Sayfa 4142).
Konu bal ve paragraf kombinasyonlar kullanarak metinleri yaplandrdnz
(Sayfa 4346).
erik akn kontrol etmek iin satr sonlar ve blnemez boluklar eklediniz
(Sayfa 4649).
Alntlar dzgn bir ekilde gstermek iin Text Indent aracn kullandnz
(Sayfa 4952).
farkl liste tipi oluturdunuz ve bunlarn zelliklerini deitirdiniz (Sayfa 5259)
Seilen ierie kaln ve italik satrii karakter biimlendirme zellikleri uyguladnz
(Sayfa 5961).
Sayfaya zel karakterler eklediniz (Sayfa 6162).
Dier karakter kmelerindeki karakterleri eklemek iin oklu dil destei ieren bir
ierik kullandnz (Sayfa 6366).
Sayfaya tarih bilgisini ekleyip bunu sayfa her kaydedildiinde gncellenecek ekilde
ayarladnz (Sayfa 6668).
Balant
Oluturmak
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. Metin tabanl balantlarla bu derste almaya
Bu derste, gezinti
balantlaryla birlikte tm
Yoga Sangha proje sitesine
ait yer tutucularn yer
ald ilevsel bir test sitesi
oluturacaksnz.
balayacak ve sonraki derslerde ilerlemeye devam ederken rendiklerinizi dier

aralara da uygulamaya devam edeceksiniz.
Bu derste Yoga Sangha proje sitesinin sayfalar iin yer tutucular hazrlayarak site
yapsnn ilk temelini oluturacaksnz. Dzgn alan bir test sitesi yaratmak iin
bu sayfalar Dreamweavern grsel site eleme aralarn kullanarak birbirlerine
balayacaksnz. Sitenin plak fakat ilevsel bir srm eklinde sayfalar ve
balantlar araclyla byle bir temel oluturmak, gelitirdiiniz gezinti sistemini test
etmenizde iinizi kolaylatrabilir. Site yapsn tasarmdan nce test etmek, temel
sorunlar gelitirme aamasnn bandayken grmenizde ve ok daha etkin bir ekilde
zmenizde size yardmc olacaktr.
Tamamlanm sayfalara ait bir rnek grmek isterseniz Lesson_03_Links/Completed
klasrndeki dosyalar inceleyebilirsiniz.
Neler reneceksiniz?
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.
Yaklak Sre
Ders Dosyalar
Balang Dosyalar:
Lesson_03_Links/index.html
Lesson_03_Links/definitions.html
Lesson_03_Links/sanskrit.html
Tamamlanm Proje:
Lesson_03_Links/Completed/ (dosyalarn tm)
72 DERS 3
Balant Rengini ve Biimlendirme zelliklerini

Ayarlamak
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.
Dreamweaver, sadece balantlara uygulanan renk, font ve punto zelliklerini
ayarlamak iin CSS (Cascading Style Sheets) kullanarak balantlarn
grnmn kontrol edebilir. CSS balant stilleri, snfms (pseudoclass)
olarak bilinir. Bu, sadece belirli koullarda uygulanan parametrelerle
oluturulan bir stil tipidir. CSS konusunu Ders 4te greceiz.
1. Lesson_03_Links klasrnde yer alan index.html belgesini an. Modify > Page
Properties (Cmd+J/Ctrl+J) komutunu ve ardndan Links kategorisini sein.
Bu uygulamada Link font seeneini varsaylan ayarnda (Same as page font) brakmanz
gerekiyor. Bu ayardan dolay sayfanzdaki balantlar bir sonraki derste belgeniz iin
ayarlayacanz stillerin zelliklerini kullanr.
Bir sonraki derste yapacanz gibi balant ieren bir metne bir CSS stili
uygularken, balant, varsaylan belge stilleri yerine bu stilin zelliklerini alr.
Balant Oluturmak 73
Balantlar farkl durumlara sahiptir. rnein tklanan ve tklanmayan balantlarn

durumu farkldr. Bir balantnn her durumu iin ayr grnm nitelikleri kullanabilirsiniz.
Kullancnn davranna gre deien drt farkl balant durumu iin renk
tanmlayabilirsiniz.
Link Color: Balantnn, zerine tklanmadan nceki yani balangtaki rengidir.
Balantlar iin kullanlan standart Web taraycs rengi mavidir.
Visited Links: Kullanc bir balantya tkladnda balantnn ald renktir. Tklanm
bir balant iin kullanlan standart Web taraycs rengi mordur.
Rollover Links: 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.
Active Links: 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.
CSS balant stilleri, kendisine uygulanabilen farkl durumlara ait belirli
niteliklerle link (balant) etiketini (<a>) kontrol eder. <a> etiketinin farkl
durumlar, kullanc belirli bir ilem gerekletirdiinde etkinleir (balantya
tklamak gibi). Durumlar u CSS seicileriyle tanmlanr: balant rengi a:link
ile, tklanan balantlar a:visited ile; imlecin zerinde tutulduu balantlar a:
hover ile ve etkin balantlar a:active ile.
2. Renk kutularnn yanndaki metin kutularn kullanarak balantlarnzda kullanacanz
renk seeneklerini u ekilde ayarlayn: Link Color iin #FF3300, Rollover Links iin
#FF9900, Visited Links iin #993300 ve Active Links iin #FFCC00.
74 DERS 3
Kullanmak istediiniz renklerin onaltlk tabanl deerlerini (Webde renkleri temsil etmek
iin kullanlan kodlar) biliyorsanz balant renklerine ait metin alanlarna bu deerleri
dorudan girebilirsiniz. Bu ilemi yaptnzda Dreamweaver renk kutusuna ilgili deere
karlk gelen rengi otomatik olarak ekleyecektir. Ayrca, metin alannn sol tarafndaki
renk kutusuna tklayarak eitli renk numunelerini ieren bir paleti aabilirsiniz. Paletten
bir renk numunesi setiinizde Dreamweaver metin alanna, karlk gelen onaltlk
tabanl deeri otomatik olarak yazacaktr. Bu deer, siz imleci renk numunelerinin zerine
getirdiinizde paletin st tarafnda grntlenir. Renk paletini kullanrken fare imleci
bir renk seicisine dnr. Bu arac kullanarak ekranda grnen renklerden istediiniz
birini ilgili alann stne gelip tklayarak seebilirsiniz. Bu yntem, dier belgelerdeki,
resimlerdeki ve aralardaki mevcut renkleri kolayca eletirmenizi salar.
Daha fazla renk grmek isterseniz, alr renk penceresinin sa st

kesindeki oka tklayn ve alan menden baka bir renk paleti sein. Dier
paletlerin platformlar aras uyumlu, Web uyumlu renklerle snrl olmadn
unutmayn. Web uyumlu renkler, hem Macintosh, hem de Windows iletim
sistemlerinde ayn olan ve 216 renkten oluan bir renk grubudur. Bu paletteki
renk seenekleri ciddi lde snrl olsa da Web uyumlu renkler kullanmak,
256 renk kullanan sistemlere sahip kullanclarn (gnmzde birok insan
milyonlarca renk grntleyebilen ekran kartlarna sahip olduu iin artk bu
ok sk karlalan bir durum deildir) sayfalarnz sizin istediiniz renklerde
grmesini salar. PDA gibi alternatif Web eriim aralar hl snrl sayda
renk kullanmaktadr, dolaysyla bu tr cihazlarla eriilmesi dnlen siteler
gelitirirken Web uyumlu renkleri kullanmak isteyebilirsiniz. Bu, Ders 1de
rendiiniz gibi sitenizin ziyaretileriyle ilgili aratrma yapmann ve bu
ziyaretilerin byk bir ksm tarafndan en ok kullanlan sistemleri ve
konfigrasyonlar belirlemenin neden nemli olduunu gsteren bir rnektir.
Balant Oluturmak 75
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.
Her ne kadar Dreamweaver deerleri diyez iareti olmadan da kabul etse bile, siz yine de
bu iareti kullann. Bir renk numunesini semek iin renk kutusunu kullandnzda diyez
iaretinin de grndne dikkat edin.
Balantlarnz iin renk seerken standart balant renklerinin (bu uygulamann ilk
admnda her balant iin liste halinde verilmiti) dna pek kmayn. rnein standart
balant (henz tklanmam balant) rengi olarak, daha nce tklanm olan balantlar
iin kullanlana benzer bir mor renk kullanrsanz ziyaretilerinizin kafas karabilir.
Sitenizi tasarlarken standart haline gelmi Internet alkanlklarnz kullanmanz ve
ziyaretilerinizin beklentilerini dikkate almanz ok nemlidir.
Page Properties iletiim kutusunun Link blmndeki son seenek Underline Styledr. Bu
seenei, sayfanzda kullanacanz altizgi stilini tanmlamak iin kullanrsnz. Buradaki
uygulamada varsaylan ayar olan Always Underline (Her zaman altn iz) deitirmeyin.
Bu mendeki dier seenekler Never Underline (Asla altn izme), Show Underline
Only On Rollover (Altizgiyi sadece rollover durumunda gster) ve Hide Underline On
Rollover (Rollover durumunda altizgiyi gizle). Btn balantlarda grnen varsaylan alt
izgiyi kaldrmak isterseniz Never Underline seeneini kullanabilirsiniz. Ama Web sitesi
olutururken ziyaretilerinizin beklentilerini de her zaman dikkate aln. Pek ok kullanc,
balantlarn altizgiyle gsterili ekline alktr. Alt izgileri kaldrrsanz kullanclarnz
balantlar atlayarak ilgili bilgilerden mahrum kalabilir. Bunun tersi olarak metninizdeki
dier szcklerin altn izerseniz, bu kez de kullanclar bunlarn balant olduunu
dnerek zerlerine tklamaya alabilir.
76 DERS 3
3. OK dmesine tklayarak Page Properties iletiim kutusunu kapatn ve

ardndan index.html dosyasn kaydedin.
Artk sayfanzdaki balantlar iin varsaylan olarak sizin tanmlanm olduunuz renkler
kullanlacaktr. Bir sonraki uygulamada balantlar oluturmaya baladnzda bu
renklerin kullanldn greceksiniz.
Sonraki uygulamalarda almak iin index.html belgesini ak brakn.
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.
1. index.html belgesinde Yoga is a 4,000 year-old satrnn bandaki Yoga
szcn sein.
Bu satr, belgenin bandaki Welcome to Yoga Sangha ksmnda yer almaktadr.

Bu terimde farkl yoga stillerinin tanmlarnn yer ald sayfaya giden bir balant
oluturacaksnz.
Bu dersteki balang dosyalar, nceki derslerde zerinde altnz
dosyalarn birer kopyasdr. Size kolaylk salamas iin bu dosyalarn
tamamlanm hallerini burada verdik. Bu dosyalar, kitapta u ana kadar
rendiiniz teknikler kullanlarak oluturulmutur.
Balant Oluturmak 77
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. rnein ziyaretileri farkl yoga
stilleri hakknda bilgi edinebilecekleri bir belgeye ynlendirirken balantnn Yoga
stilleri szcklerine atand Farkl Yoga stilleri ile ilgili ayrntlar gibi bir ifadede asl
balant gerekten aklayc ve bilgilendiricidir. Bu ifade, balantnn buraya tklayn
szcklerine atand Farkl Yoga stilleri ile ilgili ayrntl bilgi iin buraya tklayn gibi
bir ifadeye gre daha mantkl bir seim olabilir.
2. Properties denetisinde Link metin alannn sanda yer alan Browse For File
dmesine tklayn.
Link metin alan
Browse For File dmesi
Select File iletiim kutusu alacaktr.

3. Lesson_03_Links klasrndeki definitions.html dosyasn sein ve Choose
(Macintoshta) ya da OK (Windowsta) dmesine tklayn.
Link metin alannda definitions.html dosya ad belirecek ve index.html belgesinde

setiiniz szck bir balant olarak iaretlenecektir. Balant alt izili olarak ve bu dersin
ilk uygulamasnda balantlar iin setiiniz renkte grnecektir.
stediiniz bir balant iin sayfann varsaylan balant rengini kolayca
deitirebilirsiniz. Bunun iin balant metnini semeniz ve Properties
denetisinden baka bir renk semeniz yeterlidir. Dreamweaver bu renk iin
otomatik olarak yeni bir CSS stili oluturacaktr. Dreamweavern bu
yntemle oluturduu CSS stili bir dhili stildir. Bu konuyla ilgili ayrntlar
Ders 4te greceiz.
78 DERS 3
Bu balant, belgeye bal yollara bir rnektir. ou Web sitesinde yerel balantlar iin
kullanlabilecek en iyi seenektir ve btn kitap boyunca da bu seenek kullanlmtr. Belgeye
bal yol (document-relative path), mutlak URLin geerli belge ve bal belgede ayn olan
ksmn gz ard ederek sadece yolun farkl ksmn alr. Mutlak URL, bir site ya da kaynan
tm Web adresini gsteren bir URLdir (http://www.yogasangha.com gibi). Bal belgeyi
gsteren yol, balang noktas olarak balantnn bulunduu belgenin konumu temel alnarak
belirlenir. rnein ayn klasrdeki bir dosyaya ait yol dosyann_ad.htm eklinde ifade edilir. Bir
alt klasrde yer alan bir dosyaya ait yol da klasrn_ad/dosyann_ad.htm eklinde verilir.
Dier yandan site kk klasrne bal yol (site root-relative path), balang noktas olarak
sitenin kk klasr temel alnarak belirlenir ve geerli belgenin bulunduu konum temel
alnmaz. Bal belge, site yaps iindeki konumuna gre tanmlanr.
4. Feature: The Eight Limbs of Yoga ksmnda, imleci numaral listedeki 8 numaral
enin bulunduu satrn sonuna yerletirin. Return (Macintoshta) ya da Enter
(Windowsta) tuuna iki kez basn ve See the Sanskrit text for the Eight Limbs
yazn. 1den 3e kadar olan admlar tekrarlayarak Sanskrit szcn Lesson_03_
Links klasrndeki sanskrit.html dosyasna balayn.
Ders 2de rendiiniz gibi, bir listeden kmak iin Return ya da Enter tuuna
iki kez basmak gerekir. Tek bir paragraf sonu kullandnzda listede yeni bir e
yaratm olursunuz.
Balant atamak istediiniz dosyalarn isimlerini ve konumlarn biliyorsanz, dosyalar

bulmaya almak yerine isimlerini dorudan Link metin kutusuna yazabilirsiniz. Bununla
birlikte, balantlar oluturma ilemini Dreamweavera braktnzda da yazm hatas yapma
ihtimalini de azaltm olursunuz.

Ayn Dreamweaver oturumunda (yani Dreamweaver atktan sonra programdan

kana kadar geen srede) ayn balantlar birden fazla yerde kullanmanz
gerekiyorsa, Properties denetisindeki Link metin alannn sanda yer alan alr
menden en son kullanlan balantlar arasndan seim yaparak zaman
kazanabilirsiniz.
Bir balantnn hedefini dzenlemek gayet basit bir ilemdir. Bunun iin mevcut bir balantnn
iinde herhangi bir yere tklayn ve Properties denetisindeki Link metin alannda yer alan
deerde gereken deiiklikleri yapn (metin alanndaki yolu deitirerek veya Browse for File
simgesine tklayarak). Balantnn tamamn semek zorunda deilsiniz, nk Dreamweaver
balantlarn i ie yerletirilmesine otomatik olarak engel olur (yani bir balant dier bir
balantnn iine yerletirilemez). Balant uygulamak iin setiiniz metin, onu evreleyen
ya da ieren HTML etiketleri ile tanmlanr. Bu yzden, balantda yaptnz her deiiklik
otomatik olarak balantnn iinde yer alan tm metne (tm balant tiplerini gsteren <a>
etiketinin al ve kapan blmleri arasndaki metin) uygulanr. HTML etiketleriyle ilgili
ayrntl bilgi iin Ders 16ya baknz.
Balant Oluturmak 79
5. Belgenin en alt ksmnda yer alan www.yogasangha.com metnini sein. Properties

denetisindeki Link metin alanna http://www.yogasangha.com yazn ve balanty
uygulamak iin Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Bylece, kullanclar proje sitesi dnda bir siteye ynlendiren bir mutlak balant oluturdunuz.
6. index.html dosyasn kaydedin ve Web taraycsnda nizleyin. index.html
dosyasn kapatn.
Yeni oluturduunuz bu balant, zerlerine tkladnzda sizi kendilerine karlk gelen

sayfalara gtrecektir. Doru konumlara gittiklerinden emin olmak iin oluturduunuz
btn balantlar mutlaka test edin.
Eer alrsa Balang Sayfasn kapatabilirsiniz.
Ders 1de tanmladnz asl (birincil) Web taraycsnda bir pencere amak zere
F12 tuuna basarak belgenizi Web taraycsnda nizleyebilirsiniz. Eer
fonksiyon tularnz sistem ilemleri iin ayarlandysa, bir deitirici tu
(modifier key) kullanmanz gerekebilir.
Balantlar ve Dosya Yaps

Oluturduunuz balantlar, sitenizin dosya ve klasr yapsna baldr. Balant olutururken
yollarn nasl altn anlamak nemlidir. Aadaki ekilde bir site yaps rnei
gryorsunuz.
Geerli belgenin bulunduu klasrn dnda yer alan bir belgeye giden bir balant
oluturduunuzda balantnn yolunda (dosya adnn nnde) ../ karakter grubunun
80 DERS 3
kullanldna dikkat edin. ../ karakter grubu aslnda Web taraycsna geerli konumun bir
stndeki klasr dzeyine gitmesi gerektiini syleyen bir komuttur. ../ karakter grubunun
her rnei bir stteki klasr dzeyine gitmek gerektiini gsterir. Geerli dizinin iki klasr
dzeyi stnde yer alan bir belgeye ait balantda ../../dosyaad.html eklinde bir ifade
kullanlabilir. Mesel bir nceki rnekte books.html sayfasndan about.html sayfasna giden
bir balantnn yolu ../../about.html eklinde olur. Dreamweaverda balantlar dorudan
Link metin alanna yazarak eklemiyorsanz ../ karakter grubunu kullanmanz gerekmez.
Doru yolu tam olarak bilmiyorsanz istenen dosyay semek iin dosya yapsna gz
atmanz gerekir. Dreamweaver uygun yolu sizin yerinize belirleyecektir.
nceki rnek site yapsnda birden fazla index.html dosyasn olduuna dikkat edin.
index, pek ok sunucuda varsaylan dosya ya da klasr iin kullanlan standart isimdir. Bu
varsaylan dosyalarn URLde belirtilmesi gerekmez. Herhangi bir dosya belirtilmediinde
ziyareti otomatik olarak ilgili klasrn varsaylan dosyasna gnderilir. nceki rnekte
kullanc gardens klasrndeki index sayfasna erimek iin alan adn ve ardndan /gardens
ifadesini yazabilir. En sk kullanlan index.html dnda, varsaylan dosyalar iin yaygn
olarak kullanlan dier isimler arasnda default.html ve home.htmli sayabiliriz. Pek ok
uzant tipi kullanlabilir. Ama sunucunuzun .html ya da .htm dndaki uzantlara sahip
index dosyalarn tanyacak ekilde yaplandrlmas gerekebilir. Nasl yaplandrldn
grmek iin sunucunuzu ya da hostunuzu kontrol edin.
Geerli belgeyle ayn klasrde bulunan bir belgeye ait bir balant olutururken bu
balantnn yolu, sz konusu bal belgenin ismi olacaktr. Geerli belgenin bulunduu
klasrn iinde baka bir klasrde yer alan bir belge iin balant olutururken bu
balantnn yolunda (dosya adnn nnde) klasrad/ ifadesi kullanlr. klasrad/ ifadesi,
Web taraycsna belirtilen klasrn iine bakmas gerektiini ve bu klasrn de geerli
dizinin iinde yer aldn bildirir.
Sitenizi gelitirirken belirli dosyalar ya da klasrleri btnyle farkl konumlara tamay
gerekli grebilirsiniz. nceki rnek dosya yapsn kullanacak olursak, containers.html
belgesini indoors klasrne tadnz farz edelim. containers.html belgesinde yer
alan btn balantlar veya dier yollarn ve dier dosyalardan bu belgeye giden btn
balantlarn gncellenmesi gerekir. ayet bu yollar gncellenmezse, yollar geersiz hale gelir
ve balantlarla resimler dzgn almaz. Siz dosyalar tarken Dreamweaver sitenizdeki
btn balantlarn, resimlerin ve dier aralarn yollarn otomatik olarak gnceller. Ama
bunun iin btn deiiklikleri Dreamweavern Files panelinde yapmanz gerekir. Herhangi
bir deiiklii Dreamweavern dnda (Mac OS Xteki Finderda ya da Windows Explorerda)
yaparsanz Dreamweaver dosyalarnz izleyemez ve devamllklarn salayamaz.

Macintosh kullanclar, klasrlerin sabit diskten dosyaya kadar uzanan

hiyerarisini grmek iin Command tuunu basl tutup belgenin balk
ubuundaki dosya adna tklayabilir.
Balant Oluturmak 81
Bir Siteye Yeni Klasrler ve Dosyalar Eklemek

Yoga Sangha proje sitesinde balantl yer tutucu sayfalar gelitirme yntemiyle site
yapsnn balangtaki temelini oluturmak iin bir dizi yeni sayfa ve klasr oluturmanz
gerekecektir. Bu ilemi, bir sitenin dosya ve klasr yapsn oluturmanz salayan Files
panelini kullanarak hzl ve kolay bir ekilde yapabilirsiniz. Yer tutucu olarak grev yapan
sayfalar hemen oluturabilir ve bunlara daha sonra ierik ekleyebilirsiniz.
1. Files panelindeki Files paneli ara ubuunda bulunan Expand dmesine
tklayn.
Eer panellerin arasnda Files panelini gremiyorsanz, Window > Files

komutunu semeniz gerekebilir.
Expand dmesi
Yerel ve uzak siteleri grntlemek iin Expand dmesine tklayn.

Expand dmesi, ara ubuunun sa tarafnda, dosya listesinin stnde yer almaktadr.
Files panelindeki dier seenekleri Ders 14te greceiz.
2. Files paneli geniledikten sonra Show mensnde Yoga Sanghann
seildiinden emin olun. Ok (Macintoshta) ya da art simgesine (Windowsta)
tklayarak Local Files stununda gsterilen Lesson_03_Links klasrn an.
82 DERS 3
Show mens eer bir sitenin iindeyseniz sadece Windowsta grnr.

Eer sadece bir src ad (F: gibi) gryorsanz sadece Manage Sites
balants grntleniyor demektir.
Local Files stunu, geniletilen Files panelinin sa tarafnda yer alr. Panelin sol
tarafndaki Remote Site stununda herhangi bir dosya yoktur, nk henz bir uzak site
tanmlamadnz. Bu ilemle ilgili ayrntlar Ders 14te greceiz.
Dosyalarn grntlendii boluun miktarn geniletilmi durumdaki Files

panelinin iki yann ayran ubuu tayarak ayarlayabilirsiniz.
3. Lesson_03_Links klasrne sa tklayn (Windowsta) ya da Control tuunu
basl tutarak tklayn (Macintoshta).
Files panelinde biraz daha yer kazanmak amacyla ak durumdaki dier ders
klasrlerini kltmek isteyebilirsiniz. Bylece sitenin ieriini daha rahat
gzden geirebilirsiniz.
Balant Oluturmak 83
eitli seenekler ieren bir balam mens alacaktr. Bu mende sunulan seenekler,
seilen eye bal olarak farkllk gsterir. Balam mens, Dreamweavern ilevlerine
erimek iin kullanabileceiniz hzl bir yntemdir ve bylece retim srecini de
hzlandrabilirsiniz.
4. Balam mensnden New Folder komutunu sein.
Lesson_03_Links klasrnn iine balksz yeni bir klasr eklenecektir. Bu klasr yeni
oluturduunuz iin ismi vurgulu olarak ve metin alannn evresinde kalnca bir izgiyle
grntlenecektir. Bu iaretler klasr adlandrabileceinizi gsterir.
84 DERS 3
5. Yeni klasr adlandrmak iin about yazn ve Return (Macintoshta) ya da Enter

(Windowsta) tuuna basn.
Yeni klasrn zerinde burada atadnz ismin grntlendiine dikkat edin.
Files panelinde baka bir yere tkladnzda ismin seimi kaldrlacaktr. Eer
byle bir durumla karlarsanz ve klasr yeniden adlandrmanz
gerekiyorsa, klasrn adna tklamanz, biraz bekleyip tekrar tklamanz
gerekir. Bal seerek dzenleyebilirsiniz. Bu durumda ift tklamayn,
yoksa klasr aarsnz.
6. Files panelinde, Lesson_03_Links klasrnde yeni oluturduunuz about
klasrne sa tklayn (Windowsta) ya da Control tuunu basl tutarak tklayn
(Macintoshta).
Burada, bir sonraki admda iinde bir dosya oluturacanz klasre tklyorsunuz.
Balam mens alacaktr.
Balant Oluturmak 85
Eer istemeden yanl klasrde bir dosya oluturduysanz, balam

mensn kullanarak ve Edit > Delete komutunu seerek bu dosyay
silebilirsiniz. Windows kullanclar ayrca balam mens dnda Files
panelinin st ksmndaki menleri de kullanabilir.
7. Balam mensnden New File komutunu sein.
about klasrnn iinde isimsiz yeni bir belge oluturulacaktr. sim alan vurgulu olarak
grntlenecektir. Bu, sz konusu belge iin bir isim girmeniz gerektiini gsterir.
8. Yeni dosyay studio.html olarak adlandrn.
Files panelinde yeni klasrler oluturduunuzda, ilerinde dosya olmad

srece bu klasrler almayacaktr. Dosyay adlandrmadan nce klasr
amanz gerekebilir. Dosya ad deiikliini uygulamak iin Return
Dosya adndaki.html uzantsnn kalmas gerektiini unutmayn. Web tarayclarnn

tanyabilmesi iin, bir sitede oluturduunuz tm dosyalarn kendi belge tiplerine uygun
dosya uzantsna sahip olmalar gerekir.
86 DERS 3
Eer dosya adlarnz Local Files stunu iin ok uzunsa, kesilmi gibi
grnebilirler. Bunun sebebi, Files panelinde kstl bir grntleme alannn
kullanlmasdr. mleci dosya adnn zerinde tutup adn tamamnn grnmesini
bekleyerek ya da stunlarn konumunu ayarlayarak dosyann tam adn
grebilirsiniz. Stunlarn konumunu ayarlamak iin stun balklarn ayran
dey izgileri zerlerine tklayp srkleyin.
9. 6dan 8e kadar olan admlar tekrarlayarak about klasrne u dosyalar ekleyin:
contact.html, newsletter.html, news.html, location.html, anusara.html ve index.
html.
u anda about klasrnde yedi tane XHTML dosyas olmas gerekir. XHTML dosyalarnn
hl .html uzantsn kullandn hatrlayn.
Bu derste daha nce rendiiniz gibi, her klasrn kendi index.html dosyas olabilir. Bir
index.html dosyas kullanmak, ziyaretilerin sadece www.yogasangha.com/about gibi bir
klasr ad girmeleri durumunda bile index.html dosyasnn grntlenmesini salar.
Bir dizinin varsaylan belgesi iin en ok kullanlan isim index.htmldir. Bununla
birlikte, kullandnz Web sunucusuna bal olarak bunun iin baka pek ok
farkl isim kullanmak da mmkndr (default.html, index.cfm, index.jsp ya da
index.asp gibi).
10.3ten 8e kadar olan admlar tekrarlayarak aadaki klasrleri ve yine aada
belirtilen ve bu klasrlerin iinde yer almas gereken dosyalar oluturun.
Klasrn ad
Dosyalar
schedule
faq.html, events.html, download-schedule.html, index.html
teachers
jayne.html, katchie.html, sierra.html, index.html
community

outreach.html, mission.html, green.html, forums.html,

index.html
training

explorations

anusara-training.html, instructors.html, training-schedule.

html, application.html, resources.html, login.html, index.html
philosophy.html, sequences.html, meditations.html, media.
html, educational.html, index.html
Balant Oluturmak 87
Yoga Sangha projesindeki her sayfa iin yer tutucu oluturma ilemini tamamladnz
ve artk bunlar birbirine balamaya hazrsnz. Files panelindeki klasrler ve dosyalar
aadaki rnekteki gibi grnecektir.
88 DERS 3
Bir Site Haritas Oluturmak

Site haritas (site map), sitenizin seilen belirli bir ksmnn grsel bir temsilini sunar.
Sitenizdeki tm sayfalar gstermez; ana sayfa (home page) olarak tanmlanan sayfayla
balar ve bu ana sayfann bal olduu tm sayfalar gsterir. Balant hiyerarisinde
aaya doru inerek balants olmayan bir sayfaya ulaana kadar devam eder. Eer
sitenizde ana sayfadan direkt yollarla ulalamayan kopuk sayfalar varsa, bunlar site
haritasnda grnmezler.
1. Files panelinde, Lesson_03_Links klasrnde yer alan index.html dosyasna sa
tklayn (Windowsta) ya da Control tuunu basl tutarak tklayn (Macintoshta)
ve alan balam mensnden Set as Home Page komutunu sein.
Burada Lesson_03_Links klasrndeki en st dzey index sayfasn ana sayfa (proje

sitesinin asl sayfas) olarak seiyorsunuz.
Site haritasn etkinletirene kadar bu komutun sonucunu gremezsiniz. Artk ana sayfay
tanmladnzda gre site haritas grnmne geebilirsiniz. Site haritasna bir balang
noktas gstermek iin bir ana sayfa oluturmak gerekir.
Balant Oluturmak 89
2. Ara ubuundaki Site Map dmesine tklayn ve alan menden Map Only
komutunu sein.
Site Map
dmesi
Site Map dmesi ayn zamanda bir men olarak da alr. Bu dmeye tklayp
farenin dmesini basl tuttuunuzda Map Only grnm ile Map and Files
grnm arasnda seim yapmanz salayan bir men alr. Files panelini Map Only
grnmndeyken kltrseniz, ekranda penceresinin dosya ksmn grebilirsiniz.
Bu aamada index.html, definitions.html ve sanskrit.html belgelerini ve yogasangha.com

balantsn temsil eden harici bir balant simgesi ieren bir harita grmeniz gerekir.
Site haritas, sitenizin grafiksel bir temsilidir. Ana sayfa olan index.html, site haritasnn en st
dzeyinde grntlenir. Bir sayfadan dierine giden balant, balanty ieren dosyadan bu
dosyann bal olduu her sayfaya giden bir izgiyle gsterilir. Bu izginin ularndaki ok balar,
bal durumdaki her bir sayfay gsterir.
nceki uygulamada oluturduunuz yeni dosyalar bu haritada grntlenmez, nk index.
html sayfas bu dosyalara ait hibir balant iermemektedir. Ayrca index.html dosyasnn bal
olduu dosyalar da bu yeni dosyalara ait hibir balant iermemektedir. Bir sonraki uygulamada
bu balantlar oluturmaya balayacaksnz ve dosyalar da yava yava haritada grnmeye
balayacak.
Files paneli geniletilmi grnmdeyken Files panelinin mensnden
(Windowsta) ya da Files panelinin Options mensnden (Macintoshta) View >
Site Map Options > Layout komutunu seerek Map grnmn ayarlayabilirsiniz.
Siz bu komutu setikten sonra Site Definition iletiim kutusu alacaktr. Site Map
Layout seeneklerini grntlemek iin Advanced sekmesine tklayn. Varsaylan
durumda Dreamweaver site haritasn yatay olarak grntler. Daha rahat
grlmesini salamak zere site haritasn tek bir sayfaya sdrmak iin stun
saysn ve stun geniliini deitirebilirsiniz. Ana sayfada ok sayda balant
varsa ve site haritasnda btn sayfalar gstermeye yetecek kadar yer yoksa bu
ilemi uygulamak isteyebilirsiniz.
90 DERS 3
Site Haritas Grnmnde Balantlarla almak

Files panelindeki site haritas grnm araclyla balant ekleyebilir ve mevcut
balantlardan istediklerinizi silebilirsiniz.
Bal dosyalardan istediklerinizi grnecek ya da gizlenecek ekilde ayarlayarak
site haritasnda hangi dosyalarn grntleneceini kontrol edebilirsiniz.
Dosyalar gizlediinizde bu dosyalar sadece Map grnmnde gizlenir ve
Local Files listesinde yine grnr durumdadrlar. Ayrca balant ekleyip silerek
de dosyalarda deiiklik yapabilirsiniz. Bal durumdaki bir dosyay gizlemek ya
da grntlemek iin deiiklik yapmak istediiniz dosyaya sa tklayn
(Windowsta) ya da Control tuunu basl tutarak tklayn (Macintoshta) ve
Show/Hide Link komutunu sein. Files panel mensnden (Windowsta) ya da
Files panelinin Options mensnden (Macintoshta) View > Show Hidden Files
komutunu seerek btn gizli dosyalar grnr hale getirebilirsiniz. Gizli
balantlar belirtmek iin bu dosyalarn isimleri italik olarak grntlenir. Daha
sonra gizli dosyalara sa tklayarak (Windowsta) ya da Control tuunu basl
tutarak tklayarak (Macintoshta) Show/Hide Link komutunu seebilirsiniz.
1. Site Map mensnden Map and Files komutunu sein. Map grnm panelindeki
index.html dosyasn simgesini sein, Point To File simgesine tklayn ve Point To File
simgesini about klasrndeki index.html dosyasna ait simgenin zerine srkleyin.
index.html dosyas vurgulu hale geldiinde farenin dmesini brakn.
Point to File simgesi
Site Map dmesi
Siz srklerken imle bir ok ve Point To File simgesine dnecektir. Siz imleci en st
dzeydeki index.html dosyasndan about klasrnde yer alan index.html dosyasna
Balant Oluturmak 91
srklerken mavi bir izgi izilir. Siz imleci braktnzda, about klasrndeki index.
html dosyas Site Haritas (Site Map) grnmnde belirecektir. Balant en st dzeydeki
index.html belgesine eklenmi durumdadr. Eer en st dzeydeki index.html belgesiniz
aarsanz bu balanty grrsnz.
Site > Site Map View alt mensn kullanarak balantlar zerinde ekleme,
silme ve deitirme ilemleri uygulayabilirsiniz. Bu menye Files panel
mensnden (Windowsta) ya da Files panelinin sa st kenarnda yer alan
Options mensnden (Macintoshta) eriebilirsiniz.
2. Birinci adm tekrarlayarak en st dzeydeki index.html dosyasndan u
klasrlerde yer alan dier index.html dosyalarna giden balantlar oluturun:
schedule, teachers, community, training ve explorations.
mleci haritadaki belirli bir dosyann zerinde bir sre tuttuunuzda ilgili dosyann adn
ve konumunu gsteren bir ara ipucu belirir. Bir dosyay harita (map) grnmnde
setiinizde ayn dosya Files grnmnde de vurgulanr ve bunun tersi de dorudur.
Bu admda sitenin asl sayfas olan index.htmli her blmn asl sayfalarna (her klasrde
yer alan index.html dosyalar) baladnz.
Bu ekilde oluturulan balantlar ayn satr zerinde (her biri dierinden sonra gelecek
ekilde), belgedeki mevcut btn ieriin altnda grnr ve sayfadaki balant metni
iin dosyann ismini kullanr. Bu rnekte index.html eklinde tanmlanan dosya
ad ok aklayc deil, bu yzden bir sonraki admda balantlar gezinti alanna
uygulayacaksnz.
3. Lesson_03_Links klasrndeki index.html dosyasn an. Sayfann en
altndaki ilk index balantsn sein. Ardndan Properties denetisindeki Link
alannda bulunan metni sein. Telif hakk bilgisinin hemen zerinde yer alan
blm listesinden About szcn sein ve kopyalanan balanty Properties
denetisindeki Link alanna yaptrn.
92 DERS 3
Bu derste index.html belgesindeki sayfann alt ksmnda ana gezinti balantlarn

oluturuyorsunuz. Tmyle ilevsel bir sitede bu balant gruplar her belgede tekrarlanr. Bir
sitenin gezinti balantlarnn tutarl olmas (her sayfada ayn yerde olmas), ziyaretilerin site
iinde kolayca gezinmesini salar. Daha sonraki derslerde, proje sitesindeki btn sayfalarn en
st ksmnda yer alacak olan ana gezinti sistemini oluturacaksnz.
4. Kendilerine karlk gelen balantlarla Schedule, Teachers, Community, Training
ve Explorations blmleri iin nc adm tekrarlayn. Sayfann alt ksmndaki
index balantlar satrn silin, dosyay kaydedin ve kapatn.
Doru index balantsn doru (kendisine karlk gelen) blme uygulamak iin balantlar
kopyalarken Properties denetisinde yer alan Link metin alanndaki balant konumunu
kontrol ettiinizden emin olun. Eer bu uygulama ile bu derste daha nce klasrleri
oluturduunuz uygulama arasnda herhangi bir anda Dreamweaver kapattysanz, Files paneli
alfabetik srayla dzenlenerek yenilenmi olabilir. Bu yzden index balantlar blm listesiyle
ayn srada olmayabilir.
Artk gezinti balantlarnn ziyaretiyi gtrecekleri konumlar aka tanmlanm durumdadr.
Eer alrsa Balang Sayfasn kapatabilirsiniz.
5. Birinci adm tekrarlayarak schedule klasrndeki index.html dosyasndan yine
schedule klasrnde bulunan dier tm belgelere giden balantlar oluturun.
Bu admda, schedule blmnn asl sayfas olan schedule/index.htmli schedule

blmndeki geri kalan sayfalara baladnz.
Balant Oluturmak 93
Site haritasnda balant ieren sayfalar dosyann solunda bir art (+) ya da eksi (-)
iaretiyle birlikte grntlenir. Art iaretine tkladnzda, her biri kendi art iaretiyle
birlikte belgede yer alan balantlarn yer ald bir liste grntlenir. Krk balantlar
(yani almayan balantlar) krmz harflerle gsterilir. e-posta balants ve URL gibi
harici balantlar mavidir ve kk bir kre simgesiyle gsterilirler.
6. Geri kalan klasrlerdeki (about, teachers, community, training ve explorations)
dosyalar iin beinci adm tekrarlayn.
Bylece site iinde gezmenizi salayan balantlarn birounu ieren ve sitenizin yaps ile
gezinti zelliklerini test etmenizi salayan bir test sitesine sahip oldunuz. Bu test sitesini
tamamlamak iin alt klasrde yer alan her bir index.html dosyasndan en st dzeydeki
index dosyasna giden balantlar ve klasrlerdeki her bir sayfadan ayn klasrdeki index.
html dosyasna giden balantlar eklemeniz gerekiyor. Bu ilemleri yaptktan sonra site
haritanzn grnts aadaki rnee benzeyecektir.
Sitenin Bir Alt Blmn Grntlemek

Hazrladnz siteler bydke ve karmaklatka site haritas da Files panelinde
grntlenemeyecek kadar byyebilir. Bu grnty sadece seilen sayfa ve bu sayfaya
ait balantlar grnecek ekilde dzenleyebilirsiniz.
1. Files paneli site haritas grnmnde about klasrnn iinde yer alan index.
html sayfasn sein.
about klasrndeki index.html belgesini bir alt blm olarak grntlemek, balang
noktas olarak about/index.html dosyas kullanlarak eriilebilen btn sayfalara
odaklanmanz salar. Byk bir siteniz varsa bu yaklam iinize yarayabilir.
2. Files panel mensn (Windowsta) ya da Files panelinin sa st tarafnda yer
alan Options mensn (Macintoshta) kullanarak View > Site Map Options >
View as Root komutunu sein.
94 DERS 3
View as Root seeneini alternatif olarak, View As Rootu semenizi

salayan balam mensne erimek zere ilgili dosyaya sa tklayarak ya da
Control tuunu basl tutup tklayarak da ayarlayabilirsiniz.
Site haritas, balantlaryla (ikinci dzey) birlikte about/index.html sayfasn kk

(harita grnmnde en st dzey) olarak gsterecek ekilde deiecektir. Files ara
ubuunun altnda ana sayfa olarak ayarladnz dosyayla balayp sitenin kk olarak
grntlenmek zere setiiniz dosyayla biten site hiyerarisini gsteren gri bir ubuk yer
alr. Bu uygulamada index.html > index.html eklinde bir ifade greceksiniz. Eer dosya
yolunun tamamn gstermeye yetecek kadar alan yoksa, bu ubuk zerinde index.html
dosyasndan hemen sonra krmz bir ok grrsnz.
Bu yapsal site gezinti sistemi, birok sitede kullanlan ekmek krnts gezinti
sistemiyle ayn ekilde alr. Ekmek krntlar (ok bilinen bir masalda daha
sonra geri dnebilmek iin ocuklarn ekmek krntlarn gittikleri yol boyunca
artlarna brakmalarndan esinlenilmitir), ziyaretiye sitenin ana sayfasndan
bulunduklar sayfaya kadar btn hiyerarik yolu gsterir. Bunlar genellikle
sayfann st ksmna yakn bir konumda bulunur. Sitenin ekmek krnts
yolunda listelenen her bir paras normalde bu blme baldr. rnein about
klasrndeki anusara.html sayfasna ait ekmek krnts gezinti yaps, Main >
About > Anusara eklinde olacaktr. Bu rnekte Main szc en st
dzeydeki index.html sayfasna, About szc ise anusara.html sayfasna
balanan about klasrndeki index.html sayfasna balanacaktr. Anusara
szc bal deildir ve ekmek krntlarnn en sonunda bulunmaktadr. Bu da
ziyaretiye ekranda grd sayfann Anusara olduunu syler.
Balant Oluturmak 95
3. Site Navigation ubuundaki ilk index.html yazsnn solundaki Dreamweaver

dosya simgesine tklayn.
Ana sayfanz (Yoga Sangha proje sitesinde en st dzeyde yer alan index.html sayfas) yine
sitenin kk haline gelecektir.
Site Haritasn Kaydetmek

1. Files panel mensn (Windowsta) ya da Files panelinin sa st ksmnda yer
alan panel Options mensn (Macintoshta) kullanarak File > Save Site Map
komutunu sein.
Save Site Map iletiim kutusu alacaktr. Bylece site haritasn bir resim olarak
kaydedebilirsiniz. Bazen site haritasn baka insanlarla paylamanz gerekebilir. Site
haritasn resim olarak kaydetme seenei, site haritasn bakalarna gstermenizi
kolaylatrr. Macintoshlarda resim PICT formatnda, Windows ykl makinelerde ise
PNG veya BMP formatnda kaydedilir.
Map Only grnmndekinin tersine, Map and Files grnmn kullanrken
eer Local Files paneli etkinse site haritas ilevlerinin hepsine
eriemezsiniz. Eer Save Site Map seenei seilemez durumda ise Files
paneline geri dnn ve etkin olduundan emin olmak iin site haritasnn
bulunduu blmenin beyaz bo alanna tklayn. Sonra da geri dnp Save
Site Map komutunu tekrar sein.
2. File name (Dosya ad) metin alanna project_yoga yazn ve dosyay Lesson_03_
Links klasrne kaydedin.
Site haritas, yazdrlabilen ya da bir resim editrnde grntlenebilen bir resim olarak
kaydedilecektir.
Balant Hedefini Ayarlamak

Kullanclar bir balantya her tkladklarnda, bal sayfa genellikle taraycdaki geerli
sayfann yerini alr. Standart balant davran bu ekildedir ve u ana kadar bu derste
kullanlan tm balantlar da bu ekilde almaktadr. Web taraycsna balantnn
nerede grneceini bildiren talimat hedef (target) olarak adlandrlr. Balantlarnzla
birlikte kullanabileceiniz farkl hedefler mevcuttur. Bazen yeni tarayc sayfasnn farkl
bir pencerede grntlenmesini isteyebilirsiniz. rnein, kendi sitenizin dndaki bir
siteye balant atadnzda, yeni site tarayc pencerenizdeki sitenin yerini alyorsa,
ziyaretilerinizi sitenizin dna karm olursunuz. Ve eer kullanclar sitenizin URLini
Favoriler ya da Yer mleri arasna eklemediyse, sitenize nasl dnmeleri gerektiini
hatrlayamayabilirler. Ama dardaki site yeni bir tarayc penceresinde alrsa orijinal
sayfa ilk pencerenizde grntlenmeye devam eder.
96 DERS 3
1. Lesson_03_Links klasrndeki index.html belgesini an ve Yoga Sangha Web

sitesine giden balanty sein. Properties denetisindeki Target mensnden
_blanki sein.
Sayfann alt ksmna yakn bir konumda bulunan Yoga Sangha Web sitesine ait balanty
bu dersin ikinci uygulamasnda oluturmutunuz.
Belgenin alt ksmndaki alt index balantsna dikkat edin. Bunlar, bu derste daha nce
oluturduunuz ve alt klasrde bulunan index.html dosyalarna giden balantlardr.
Dreamweaver, bal sayfann nerede grntleneceini belirleyebilmeniz iin size eitli

hedef seenekleri sunar. _blank dndaki dier hedef seenekleri framelerle birlikte
kullanlr. Frame konusunu Ders 10da greceiz. Kullanabileceiniz hedef seenekleri
unlardr:
_blank: Bal belgeyi adlandrlmam yeni bir tarayc penceresinde aar.
_parent: Bal belgeyi, ebeveyn framesette ya da balanty ieren framein
penceresinde aar.
_self: Bal belgeyi balantyla ayn pencerede ya da ayn framede aar. Bu hedef
seenei varsaylan seenekle ayndr. Bu yzden ounlukla bu seenei belirtmeniz
gerekmez.
_top: Bal belgeyi tam byklkte bir tarayc penceresinde aar. Tm frameleri siler.
2. Dosyay kaydedin ve Web taraycnzda nizleyin.
yogasangha.com balantsna tkladnzda bal sayfa yeni bir tarayc penceresinde

alacaktr. Bu dosyay kapatabilirsiniz.
Balant hedefi iin yeni tarayc penceresi seeneini kullanrken dikkatli
olun. Ekranda birden fazla pencere olmas ziyaretilerinizin cann skabilir ya
da kafasn kartrabilir. Her yeni pencere ziyaretinin bilgisayarndaki RAM
kullanmn artrabilir. Gnmzde ou bilgisayarda kullanlan bellek
miktarn dndmzde bu ciddi bir sorun saylmaz, ama ziyaretilerinizin
byk bir ksm eski makine kullanyorsa sorun yaratabilir.
Balant Oluturmak 97
simli Yer mleri Eklemek ve Bunlara Balant Atamak

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. simli yer imi (named anchor), sayfada belirli bir balantnn atlayaca yeri iaretler.
Buradaki uygulamada bir isimli yer imi ekleyecek ve buna bir balant atayacaksnz. Ayrca
Point To File simgesinin yardmyla balant dosyalarn semek iin kullanabileceiniz farkl
bir yntemi reneceksiniz.
1. Lesson_03_Links klasrndeki definitions.html dosyasn an. Modify > Page
Properties komutunu sein ve Page Properties iletiim kutusundaki Links
kategorisini sein. Balant renklerini bu dersin ilk uygulamasnda index.html
belgesi iin kullandnz ekilde ayarlayn. OK dmesine tklayn.
Link color seeneine ait onaltlk tabanl deerin #FF3300, Rollover links seeneine ait
renk deerinin #FF9900, Visited links deerinin #993300 ve Active links renk deerinin de
#FFCC00 olduunu hatrlayacaksnz.
Balant renklerinin btn sitede ayn olmasna dikkat edin. Rasgele bir ekilde
deien balant renkleri ziyaretilerinizin kafasn kartrabilir.
Bu dosya, ziyaretinin tm belgeyi grebilmesi iin ekran kaydrmasn gerektirecek kadar

byk bir metin iermektedir.
2. Ekleme noktasnn belgenin alt ksmnda yer alan Vinyasa Yoga szcklerinin
nne getirin. Insert ara ubuundaki Common kategorisinde yer alan Named
Anchor dmesine tklayn.
Named Anchor
Named Anchor iletiim kutusu alacaktr.

Insert > Named Anchor komutunu ya da Option+Command+A (Macintoshta)
veya Ctrl+Alt+A (Windowsta) klavye ksayolunu kullanarak da isimli bir yer imi
ekleyebilirsiniz.
3. Anchor name metin alanna vinyasa yazn ve OK dmesine tklayn.
98 DERS 3
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.
simli yer imi simgesi
simli yer imi (Named Anchor) simgesini gremiyorsanz View > Visual Aids >
Invisible Elements komutunu seerek Invisible Elements seeneinin etkin
durumda olduundan emin olun. Siz isimli bir yer imi eklerken Invisible Elements
seeneini etkinletirmedike yer imini gremeyeceinizi bildiren bir uyar
penceresi ekrana gelebilir. Ayrca Preferences iletiim kutusundaki Invisible
Elements kategorisinde Named anchors seeneinin de iaretli olmas gerekir.
Edit > Preferences komutunu seerek ve Invisible Elements kategorisini
iaretleyerek hangi seeneklerin etkin durumda olacan belirleyebilirsiniz. Named
Anchors kutusunun iaretli olmas gerekir. Bu kitaptaki uygulamalarda varsaylan
konfigrasyonu kullandnz varsaylmaktadr.
Balant Oluturmak 99
4. mleci, sayfann en st ksmnda yoga tanmnn yapld paragrafn sonuna

yerletirin. Return tuuna basn ve There are many styles of yoga, including:
yazn. Return (Macintoshta) ya da Enter (Windowsta) tuuna basn ve
aralarnda birer satr sonu olacak ekilde u terimleri yazn:
Hatha
Anusara
Ashtanga
Bikram
Dynamic Hatha
Integral
Iyengar
Kripalu
Vinyasa
Bu metin, kullancy sayfann ilgili blmne gtrerek bir gezinti eleman olarak
alacaktr. Her terim, nceki admlarda bu sayfann alt ksmna yakn bir konumda
oluturduunuz Vinyasa Yoga iin oluturduunuza benzer ekilde ilgili isimli yer imini
iaret eden bir balant olacaktr.
5. Yeni oluturduunuz yoga stilleri listesinden Vinyasa szcn sein.
Properties denetisindeki Link metin alanna #vinyasa yazn.
Diyez iaretini (#) kullanmak, Web taraycsna bu balantnn dahili olduunu bildirmek
iin gereklidir. Dahili balant kullancy ayn sayfadaki bir konuma gtrr.
Diyez iaretinden sonra yazdnz ismin yer iminin ismiyle tamamen ayn olduundan
emin olun. Yer imlerini adlandrrken Ders 1de rendiiniz adlandrma standartlarna
uymanz gerekir. simli yer imleri BYK/kk harfe duyarldr (her ne kadar birok
Web taraycs harflerin BYK/kk olmasn deitirme (case change) zelliine
sahip olsa da). rnein yer iminizi vinyasa olarak adlandrdktan sonra Link metin
alanna #Vinyasa yazarsanz, balantnz btn Web tarayclarnda dzgn bir ekilde
almayabilir.
Yoga stilleri listesinde yer alan Vinyasa szc, sayfann alt ksmnda yer alan Vinyasa
terimine ve tanmna baland. imdi ayn ilemi Kripalu szc iin tekrarlayacaksnz.
100 DERS 3
6. Belgenin alt ksmna yakn bir konumda bulunan Kripalu szcnn nne bir
yer imi ekleyin ve bu yer imini kripalu olarak adlandrn.
Bylece ikinci bir yer imi oluturmu oldunuz.

Eer yanl konuma yerletirildiyse yer imini srkleyerek yeni bir konuma
tayabilirsiniz.
7. Belgenin st tarafnda yer alan yoga stilleri listesinde Kripalu szcn sein.
Point to File simgesini (Properties denetisindeki Link metin alannn yannda
yer alr) yeni oluturduunuz kripalu adndaki isimli yer imine doru srkleyin.
mle isimli yer iminin zerine gelince farenin dmesini brakn.
Point to File aracna ilk tkladnzda balangta Link metin alannda setiiniz
balantyla deitirilecek olan aklayc bir metin yer alr. mleci isimli yer iminin stne
getirdiinizde Link metin alannda #kripalu ifadesi belirecektir. Balant oluturmak iin
Point to File simgesini kullanmak yazm hatas yapmanza engel olabilir.
Files paneli aksa, Point to File simgesini sitenizdeki dier dosyalar

balamak iin de kullanabilirsiniz. Balant atamak istediiniz metin ya da
resim seili durumdayken Point To File simgesini zerine tklayarak Files
panelinin zerine srkleyin. Files paneli belge penceresinin ya da dier
panellerin arkasndaysa ne gelir ve iaretleyiciyi balamak istediiniz
dosyann zerine getirene kadar srkleme ilemine devam edebilirsiniz.
Balant Oluturmak 101
8. Belgenin banda oluturduunuz geri kalan gezinti balklar iin isimli yer
imlerini ve balantlar ekleyin. Yer imi isimleri olarak kendilerine karlk gelen
yoga tipleri iin hatha, anusara, ashtanga, bikram, dynamic, integral ve iyengar
yazn.
stediiniz bir yer iminin adn, ilgili yer iminin zerine tklayarak dzenleyebilirsiniz.
Siz bu ilemi yaptktan sonra Properties denetisindeki seenekler, isimli bir yer iminin
seildiini gsterecek ekilde deiecektir. Properties denetisinin Name metin alann
kullanarak istediiniz ismi deitirebilirsiniz.
9. Sayfann en stnde Yoga metninin nne bir isimli yer imi ekleyin ve bunu top
olarak adlandrn. Sayfann en alt ksmnda yeni bir satr oluturun, Back To Top
yazn ve Properties denetisindeki Link metin alann kullanarak bunu #topa
balayn.
Tanm listesi oluturmamak ve yeni bir satr oluturmak iin iki paragraf sonu
kullanmanz gerektiini unutmayn.
Uzun belgelerde her blmn sonuna sayfann bandaki bir yer imine ya da gezinti
zelliklerine sahip bir indekiler Tablosuna giden bir balant atamak sk kullanlan bir
tekniktir. Sk rastlanan bu yer imi genellikle #top olarak adlandrlr. Bu tipte bir balant
kullandnzda ziyaretiler, dier blmlere atlamak iin bu balantlar kullanmaya
devam etmek isterlerse, ekran sayfann en stne kadar kaydrmak zorunda kalmazlar.
Bir sayfada istediiniz kadar balanty ayn isimli yer imine atayabilirsiniz.
simli yer imi bir balantnn iindeyse, bu yer imine gitmesi gereken bir
balantnn ziyaretileri yanl bir yere gtrmesi ya da almamas gibi
sorunlar ortaya kabilir. Bu tr sorunlarn ortaya kmasn engellemek iin,
bir yer iminin bir balantya eklenmesi durumunda Dreamweaver otomatik
olarak balanty isimli yer iminin hemen nnde sonlandrr ve yer iminin
hemen arkasnda ayn hedefe giden ikinci bir balant oluturur (orijinal
balantn bittii yerde sonlanr). Byle durumlarda, isimli yer imi ayn deere
sahip iki ayr balant arasnda kalr. Sonu olarak, imleci balant metninin
bana yerletirip balant deerinde deiiklik yaptnzda sadece bu
balantnn ilk rnei deiir. Yaptnz deiiklikleri isimli yer iminden sonra
yer gelen balantnn ikinci rneinde de tekrarlamay unutmayn.
Sayfann banda yer alan gezinti terimleri artk kendilerine karlk gelen blmlere
balanm durumdadr. definitions.html dosyasn kapatabilirsiniz.
102 DERS 3
simli yer imleri tablolara ya da katmanlara yerletirildiklerinde beklendii

ekilde almayabilirler. En iyi ekilde sonu almak iin yer imlerini tablolarn
ve katmanlarn dnda tutun. Tablo oluturmay Ders 6da, katmanlar da
Ders 9da greceksiniz.
Bir sonraki admda isimli bir yer imi kullanarak baka bir belgenin belirli bir blmne
nasl balanldn renme konusuna devam edeceksiniz.
11. Lesson_03_links klasrnde en st dzeyde bulunan index.html dosyasn
an. Anusara Yoga, a form of hatha yoga eklinde balayan paragrafta
hatha yoga szcklerini sein. Properties denetisindeki Link metin alanna
definitions.html#hatha yazn.
Link metin alanndaki orijinal diyez iaretini (#) girdiiniz balantyla deitirdiinizden
emin olun.
nceki admlarda definitions.html dosyasnn hatha blmnde bir isimli yer imi
oluturmutunuz. Burada da index.html dosyasnda, sayfann stne balamak yerine
(balant olarak definitions.htmli kullanmanz durumunda byle yapacaktnz) dorudan
definitions.html dosyasndaki hatha blmn iaret eden bir balant oluturuyorsunuz.
index.html dosyasn Web taraycnzda nizleyebilir ve bu yeni balanty test edebilirsiniz.
Dier sayfalarn belirli blmlerine balanmak iin yer imleri kullandnzda
ziyaretilerinizi hemen aradklar balklara ynlendirerek ve uzun belgelerde ekran
kaydrmayla vakit kaybetmelerini engelleyerek sitenizin daha ilevsel olmasn
salayabilirsiniz. Siteniz ne kadar ilevselse ve kullanm ne kadar kolaysa, yeni ziyaretiler
kazanma ve mevcut ziyaretilerin sitenize tekrar gelme ihtimali o kadar fazla olur.
Point to File aracn kullanarak baka sayfalara ynlendiren yer imlerinin yer
ald balantlar oluturmanz da mmkndr (nceki admlarda ayn belge
iinde balantlar oluturmak iin bu arac kullanmtnz). rnein hem
index.html, hem de definitions.html belgeleri ayr ayr pencerelerde akken
index.html belgesinde bir balant seebilir, Link metin alannn sandaki
Point to File simgesine tklayabilir ve definitions.html belgesindeki istediiniz
bir isimli yer imini hedef olarak tanmlayabilirsiniz.
Bir sonraki uygulama iin index.html belgesini ak brakn.

E-posta Balantlar Eklemek

Balant atanm bir e-posta adresi vererek ziyaretilerinizin size bir Web sayfas
zerinden kolayca erimelerini salayabilirsiniz. Her zaman ziyaretilerin altnz
organizasyondan birileriyle yazmasn ya da etkileime girmesini salayan bir yntem
kullanmalsnz.
Dreamweaverda bir e-posta balantsn iki ekilde ekleyebilirsiniz. Balantya ait e-posta
adresini ve metni ayn anda ekleyebilir ya da sayfanzdaki mevcut bir metne balant
ekleyebilirsiniz. imdiki uygulamada bu yntemlerin her ikisini de greceiz.
1. index.html belgesinin alt ksmnda yer alan tarihin sonuna tklayn, boluk
tuuna basn ve by yazarak bir boluk daha ekleyin.
Bir sonraki admda buraya bir e-posta balants ekleyeceksiniz.

2. Insert ara ubuundaki Common kategorisinde bulunan Email Link
dmesine tklayn ya da Insert > Email Link komutunu sein.
Email Link
Metin (Text) ve e-posta (E-Mail) seeneklerini ieren Email Link iletiim kutusu alacaktr.
Insert ara ubuu varsaylan durumda ak olmaldr. Eer grnmyorsa
bu ara ubuunu amak iin Window > Insert komutunu sein ya da
panelleri, denetleyicileri ve ara ubuklarn varsaylan konumlarna getirmek
iin Window > Arrange Panels komutunu sein.
3. Text metin alanna adnz yazn. Email metin alanna e-posta adresinizi yazn ve
OK dmesine tklayn.
Metin sayfada bir balant olarak belirecektir. Siz ekleme noktasn balantnn iine
yerletirdiinizde Properties denetisindeki Link metin alannda mailto: ifadesi ve
hemen sonra da e-posta adresi grntlenecektir.
104 DERS 3
Sayfadaki mevcut bir metni seer ve sonra Insert Email Link iletiim kutusunu aarsanz,
setiiniz metin Text metin kutusunda belirecektir.
letiim bilgileri genellikle sayfann en altnda, telif hakk bilgisine yakn bir konumda
bulunur.
Properties denetisindeki Link metin alanna mailto: ve bunun hemen arkasna e-posta
adresinizi yazarak da e-posta balantlar oluturabilirsiniz. Bu yntemi kullanrken iki
nokta st ste iaretini kullanmay unutmayn ve iki nokta st ste iaretiyle e-posta
adresinizin arasnda boluk brakmayn.
index.html dosyasn kaydedip kapatabilirsiniz.
Balantlarla Tek Banza aln

Bu derste rendiiniz gibi, gezinti balantlar ieren bir test sitesi oluturarak site iinde
belirli yerlere tklayp ziyaretilerin sitede takip ettikleri yollarn alp almadn
grebilirsiniz. Gezinti elerini bu aamada test etmek, gelitirme anlamnda ok
ilerlemeden gereken ayarlamalar yapmanz salar. Bu uygulamada kendi siteniz iin bir
test sitesi hazrlayacaksnz.
1. Ders 1de siteniz iin gelitirdiiniz dosya yapsn klavuz olarak kullanarak
blm klasrlerini ve sitenizde kullanacanz sayfa yer tutucularn oluturun.
Blm klasrlerini ve yer tutucu dosyalar hazrlamak, test sitesi oluturmann ilk
admdr. Bu yeni klasrleri ve dosyalar siteye eklemek zere geniletilmi Files panelini
kullanarak ok sayda yeni dosyay hzl bir ekilde oluturabilirsiniz.
2. Bu derste daha nce rendiiniz beceri ve teknikleri kullanarak sitenizin yer
tutucu sayfalarnda bir balant sistemi oluturun.
Files panelinin Site Map yani site haritas grnmn kullanmak, her dosyay amak
zorunda kalmadan sitenizdeki sayfalar arasnda balantlar oluturmanz salar.
Yeni sayfalarnza herhangi bir balant rengi atamayn. Bir sonraki derste, belgelerinizde
kullanlan balant renklerinin tm site iin tek bir dosya araclyla nasl kontrol
edildiini reneceksiniz.
3. Sayfalarnza metin tabanl ierik eklemek iin Ders 1de gelitirdiiniz ierik
taslan kullann.
Her sayfada grnecek ierie ait taslaklar ya da listeleri kullanabilir veya sayfalara
ieriin kendisini ekleyebilirsiniz. Gelitirme srecindeki farkl aamalarda sitenize ierik
eklemeye ve deiiklik yapmaya devam edeceksiniz. Bununla birlikte, u anda ierik
eklemek nelerin mevcut ya da nelerin eksik olduunu ve sitede ieriin nasl bir ak
izleyeceini ve alacan grmenize yardm edecektir.
Gerekiyorsa balant hedeflerini ayarlayabilir, bunlara isimli yer imleri ve balantlar
ekleyebilir ve e-posta balantlar oluturabilirsiniz. Sitenizin gelitirilmesi srecinde bu
balantlarla almaya devam edeceksiniz. u anda hepsini tamamlamanz gerekmiyor.
4. Ana sayfanz bir Web taraycsnda nizleyin ve gelitirdiiniz site yapsn ve
gezinti elerini test sitenizin iinde muhtelif yerlere tklayarak test edin.
Ziyaretilerinizin sitenizi nasl kullanabileceklerini gznzn nne getirmeye aln.

Sitenizin iinde takip edebilecekleri muhtemel yollar neler olabilir? Buna gre gereken
deiiklikleri yapn.
Ne rendiniz?
Normal balantlarn, ziyaret edilen ve etkin durumdaki balantlarn renklerini

tanmladnz (Sayfa 7377).
Proje sitesi iindeki sayfalara giden metin balantlar ve dardaki bir siteye giden bir
balant oluturdunuz (Sayfa 7781).
Blm klasrleri ve yer tutucu dosyalar oluturdunuz (Sayfa 8288).
Balant oluturmak ve bunlar grntlemek iin Files panelinin ve site haritas
zelliinin nasl kullanldn rendiniz (Sayfa 8996).
Bir balant hedefini yeni bir pencerede alacak ekilde ayarladnz (Sayfa 9697).
Bir belgenin her blm iin isimli yer imleri eklediniz ve bu blmlere ait karlk
gelen balklar isimli yer imlerine baladnz (Sayfa 98103).
Insert ara ubuuyla otomatik olarak ve Properties denetisindeki Link metin alann
kullanarak elle e-posta balantlar oluturmay rendiniz (Sayfa 104106).
106 DERS 3
Stil Sayfalar
Gelitirmek
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
Bu derste CSS araclyla Dreamweaverdaki
stil tipini (snf [class] stilleri, etiket [tag] stilleri ve
gelimi [advanced] zel stiller) kullanarak metne
eitli biimlendirme seenekleri uygulayacaksnz.
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 netin niteliklerine (satr aralklar [leading] gibi) kadar pek ok
ayarda deiiklik yapabilirsiniz.
Stil sayfalarn kullanarak rnein 1,25 cmlik kenar boluuna sahip bir paragraf
oluturabilir, bunun 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 yeni olan Web tarayclar verir. Bunlar pek ok zellii
destekler.
Tek bir sayfay biimlendirmek iin belgede saklanan bir dahili stili kullanabilirsiniz.
eitli belgeleri birden fazla sayfada (ayn metin biimlendirme zelliklerini koruyacak
ekilde) bir btn olarak kontrol etmek isterseniz bir harici stil sayfasndan da
faydalanabilirsiniz. eitli belgelerin grnmn, ayn metin biimlendirme zelliklerini
birden fazla sayfada koruyacak ekilde bir btn olarak kontrol etmek isterseniz bir
harici stil sayfasndan da faydalanabilirsiniz. Bu stil sayfas Web sayfasnn dnda
bulunur ve geerli sayfaya balanr. Byle durumlarda metinlerin ve sayfa yerleim
dzeninin btn site iinde tutarl olmasn salamak en iyisidir. nk bu eler
sayfadan sayfaya ciddi lde deiiklik gsterirse, ziyaretileriniz baka bir siteye
getiklerini dnebilir.
Stil sayfalarn kullanmann dier bir avantaj da, Web sayfalarnn ieriini
biimlendirmeden ayr tutabilmeyi salamasdr. Sonu olarak bu, ieriinizin grnm
zerinde daha hassas bir kontrol imkn salar ve Web sitenize ierik eklemek daha
hzl ve daha az karmak bir ilem halini alr. erii bu ekilde izole etmek, sitenin
gncellenmesi ve devamllnn salanmasn ok daha basit bir hale getirir. Web
sayfalarnzn biimlendirme zelliklerini stil sayfalaryla kontrol ederek farkl platformlar
ve Web tarayclar arasnda daha uyumlu sayfalar oluturabilirsiniz.
Bu derste, metnin grnmn etkileyen stillere sahip temel stil sayfalar oluturmay
reneceksiniz. Bu sre ierisinde CSSin zelliklerini renecek ve nasl altn
kavrayacaksnz. Daha sonra burada rendiklerinizi temel bir CSS tabanl yerleim
dzeni oluturarak uygulayacaksnz. Kitabn geri kalan ksmnda da ilave CSS teknikleri
renerek bu becerilerinizi gelitirecek ve metin dndaki elemanlara da (rnein Ders
5te resimlere) stiller uygulayacaksnz.
108 DERS 4
Bu dersin sonunda elde edilen sayfalara ait rnekleri grmek isterseniz, Lesson_04_
CSS/Completed klasrndeki index.html ve sangha.css dosyalar ile Lesson_04_CSS/
Completed/about klasrndeki index.html dosyasn an.
Neler reneceksiniz?
Bir sayfann arka plan rengini ayarlayacaksnz.

Font, renk ve byklk gibi metin niteliklerini uygulayacaksnz.
Harici bir stil sayfas oluturacaksnz.
Mevcut bir stil sayfasna stiller ekleyeceksiniz.
Bir stili dzenleyeceksiniz.
zel bir stil oluturacaksnz.
Harici bir stil sayfasna balant atayacaksnz.
Bir dahili stil oluturacaksnz.
Dahili stilleri harici stillere dntreceksiniz.
Temel bir yerleim dzeni oluturacaksnz.
Yaklak Sre
Ders Dosyalar
Balang Dosyalar:
Lesson_04_CSS/index.html
Lesson_04_CSS/about/index.html
Lesson_04_CSS/Text/about.txt
Tamamlanm Proje:
Lesson_04_CSS/Completed/index.html
Lesson_04_CSS/Completed/about/index.html
Lesson_04_CSS/Completed/sangha.css
Stl Sayfalar Geltrmek 109
Bir Arka Plan Rengi Belirlemek

Dreamweaverda bir sayfann arka plan rengini Ders 3te balant renklerini tanmlarken
kullandnz gibi bir palet kullanarak kolayca deitirebilirsiniz. Bu uygulamada Page
Properties iletiim kutusunu kullanarak renk paletini aacak ve index.html belgesinin ark
plan rengini deitireceksiniz.
1. Lesson_04_CSS klasrndeki index.html dosyasn an. Modify > Page
Properties komutunu sein ve Category listesinden Appearance sein.
Page Properties iletiim kutusunu amak iin Cmd+J (Macintoshta) ya da

Ctrl+J (Windowsta) klavye komutlarn da kullanabilirsiniz.
Page Properties iletiim kutusunun Appearance ekrannda (Dreamweaverda belge

penceresinin varsaylan arka plan rengi beyaz olmasna ramen) sayfa iin tanmlanm
herhangi bir varsaylan seenek olmadn greceksiniz. Siz bir arka plan rengi
tanmlamazsanz, bir ziyareti bu sayfay ziyaret ettiinde sayfa, Web taraycsnn
varsaylan rengini (genellikle beyaz) kullanr. Web tarayclarnn varsaylan ayarlar farkl
olabildiinden her zaman sayfa iin bir arka plan rengi tanmlamanz tavsiye edilir.
110 DERS 4
2. Background Color seeneinin renk kutusuna tklayn. Onaltlk tabanl kodu

#FFFFCC olan soluk sar renk numunesine tklayn.
Soluk sar renk (#FFFFCC) sayfanzn arka plan rengi olarak ayarlanacaktr. Rengi,
onaltlk tabanl kodu dorudan renk kutusunun yanndaki metin alanna yazarak da
deitirebilirsiniz.
3. Page Properties iletiim kutusunu kapatmadan yeni arka plan rengini grmek
iin Apply dmesine tklayn.
Sayfanzn arka plan, Page Properties iletiim kutusunda setiiniz ak sar renge sahip
olacaktr.
Bir sonraki uygulama iin Page Properties iletiim kutusunu ak brakn.
Fontu Deitirmek
Sayfanzn daha ilgin ve daha kolay okunmasn salamak iin metinleri grntlemede
kullanlan fontlar deitirebilirsiniz. Yaznn bask iin kullanlmasyla ilgili nemli
miktarda bilgi mevcuttur; fakat bu bilgilerin tamam Webde kullanlmaz.
Bilgisayar ekrannda sans-serif tipindeki fontlar serif tipindeki fontlara gre genellikle
daha kolay okunur. Serif tipindeki fontlar normalde basl medyada kullanlr. nk serif
ad verilen izgi sonlarndaki kvrmlar karakterlerin daha kolay alglanmasn salar.
Ama bilgisayar ekrannda bu kvrmlar harflerin birbirinden ayrt edilmesini zorlatrr;

zellikle de uzun metinlerde ya da sz konusu metinde kullanlan fontun kk olmas
durumunda. Bir sayfadaki yaz aknn taraycdan taraycya ve bilgisayardan bilgisayara
farkllk gsterebilecei konusu da dikkate alnmaldr.
Dreamweaver, font seeneklerini tanmlamak iin eski bir yntem olan font etiket
nitelikleri kullanmak yerine entegre CSS stillerinden faydalanr.
Aadaki uygulamada da greceiniz gibi btn bir sayfada kullanlan fontu ya da
sayfada seili durumdaki bir metnin fontunu deitirebilirsiniz.
1. Page Properties iletiim kutusunun Appearance kategorisindeki Page font
mensnden Arial, Helvetica, sans-serifi sein. OK dmesine tklayarak Page
Properties iletiim kutusunu kapatn.
Sayfadaki metnin tamam setiiniz fontla biimlendirilecektir: Arial, Helvetica, sansserif. Daha sonra bu sayfaya ekleyeceiniz btn metinlerde ayn font kullanlacaktr.
Page Properties iletiim kutusu bir dizi etiketi (body, td, th) seilen font
nitelikleriyle yeniden tanmlamak iin dahili bir CSS stili oluturacaktr.
Harici CSS stillerini bu derste daha sonra greceiz.
Page Properties iletiim kutusundaki Appearance kategorisinin Page Font mensnde

listelenen font kombinasyonlar Web taraycsna metni seilen gruptaki bir fontla
(ziyaretilerin bilgisayarnda ykl fontlara bal olarak) grntlemesi gerektiini
112 DERS 4
bildirir. Font grubundaki ilk seenek kullanlamyorsa tarayc ikinci seenei kullanmaya
alr. kinci font da kullanlamyorsa nc fontu kullanr. Kullancn bilgisayarnda
kombinasyondaki fontlardan hibiri yoksa, metin, taraycnn varsaylan fontuyla
grntlenir.
2. Sayfann st ksmndaki Anusara Yoga in the Heart of San Franciscos
Mission District metnini sein. Properties denetisindeki Font mensnden
Courier New, Courier, monospacei sein.
Etiket satr iin setiiniz font, sayfa iin ayarlanan varsaylan font grubunun yerine geer.
Properties denetisindeki Font mensnde yer alan font kombinasyonlar, Page Properties
iletiim kutusundaki Appearance kategorisinin Page Font mensnde listelenen font
kombinasyonlaryla ayndr.
Balam mensne erimek zere sa tkladnzda (Macintosta ve

Windowsta) ya da Ctrl tuunu basl tutup tkladnzda belge penceresinde
seili durumda bulunan metne bir dizi biimlendirme seeneini dorudan
uygulayabilirsiniz.
Sitenin ziyaretilerinin metinleri sizin setiiniz fontlarla yazlm olarak grebilmesi

iin bu fontlarn ziyaretilerin bilgisayarnda ykl olmas gerekir. Nasl olsa herkesin
bilgisayarnda her font ykldr diye dnmeyin. Temel iletim sistemine dahil
olmayan fontlar ziyaretilerinizin bilgisayarnda muhtemelen olmayacaktr. Ayrca
Macintoshta bulunan her font Windowsta bulunmaz. Dreamweavern varsaylan font
setlerinde verilen font genellikle ou bilgisayarda mevcuttur (hem Macintoshta, hem de
Windowsta).
Ziyaretilerinizin bilgisayarnda olmama ihtimali bulunan bir font kullanmak
istiyorsanz, bu fontla yazlan metnin yerine kullanabileceiniz bir resim
oluturmanz tavsiye edilir. Bu teknik genellikle stbilgiler, asl balklar, vs
iin kullanlr. Uzun metinler iin resim kullanlmas tavsiye edilmez, nk bu
durumda eriilebilirlik kstlanr ve ieriin gncellenmesi daha zor olabilir.
Font kombinasyonlar (Arial, Helvetica, sans-serif gibi) kullanldr, ama bunlar sizin
kullanmak istediiniz btn zel fontlar iermeyebilirler. Font kombinasyonlarnda
deiiklik yapmak zere Properties denetisinin Font alr mensnden Edit Font List
komutunu seerek ya da Text > Font > Edit Font List komutunu kullanarak Edit Font List
iletiim kutusunu aabilirsiniz.
Edit Font List iletiim kutusunu kullanarak font setlerinde aadaki gibi bir dizi deiiklik
yapabilirsiniz.
Mevcut bir kombinasyona font eklemek isterseniz: Font list alanndan deiiklik
yapmak istediiniz font kombinasyonunu sein ve Available fonts listesine eklemek

istediiniz fontu sein. Sonra da Chosen fonts listesiyle Available fonts listesinin arasndaki
sol taraf gsteren oka tklayarak ilgili fontu Chosen fonts listesine ekleyin.
Mevcut bir kombinasyondan font silmek isterseniz: zerinde deiiklik yapmak
istediiniz font kombinasyonunu ve Chosen fonts listesinden silmek istediiniz fontu sein.
Ardndan Chosen fonts listesiyle Available fonts listesinin arasndaki sa taraf gsteren
dmeye tklayarak ilgili fontu Chosen fonts listesinden silin.
Bir font kombinasyonu eklemek iin: Font list alanndaki Add fonts in list below
seeneini iaretleyin. lave font kombinasyonlar iin iletiim kutusunun sol st

kesindeki art iaretli dmeye (+) tklayn ve Font list alanndaki yeni Add fonts in list
below seeneini iaretleyin.
Bir font kombinasyonunu silmek iin: Fonts list alannda silmek istediiniz font
kombinasyonunu sein ve iletiim kutusunun sol st kesindeki eksi iaretli dmeye (-)
tklayn.
Sisteminizde bulunmayan bir fontu eklemek iin: Available fonts listesinin altndaki
metin alanna ilgili fontun adn yazn ve solu gsteren dmeye tklayarak bu fontu
kombinasyona ekleyin. Siteminizde bulunmayan bir fontu eklemeniz faydal olacaktr.
rnein Macintoshta alrken Windowsa zg bir fontu tanmlayabilirsiniz. Doru font
adn kullandnzdan emin olun.
Font kombinasyonlarnn srasn deitirmek iin: lgili kombinasyonu sein ve iletiim
kutusunun sa st kesindeki yukar aa ok dmelerinden uygun olanna tklayn.
114 DERS 4
Edit Fonts List iletiim kutusundaki Available fonts listesi, bilgisayarnzda bulunan fontlar
ierir.
Taraycdaki metin, semi olduunuz fontla grntlenecektir. Bu, bilgisayarnzda ykl

durumdaki fontlara baldr.
Bir sayfada nce silmek istediiniz fontun kullanld metni seerek
sayfadaki font ayarlarn silebilir ve seili metni varsaylan ayarlarna
dndrebilirsiniz. Properties denetisinde Font alr mensndeki Default
Font seeneini iaretleyin ya da Text > Font > Default Font komutunu sein.
Font Boyutunu Deitirmek

Dreamweaver, aralarnda 9 ile 36 arasnda belirli aralklarla deien saysal deerler, xx-small
ile xx-large arasnda deien greceli deerler ve aralarnda smaller ve larger seeneklerinin
de bulunduu birok hazr font boyutu seeneine sahiptir. Bu seeneklerin tm metin
bykln tanmlamak iin CSS kullanr. Dreamweaver kullanarak ve btnleik CSS
zellikleri araclyla sayfalarnzdaki metinler zerinde byk lde kontrol imknna
sahip olursunuz. Gelimi CSS zelliklerini bu derste daha sonra greceiz.

Font Etiketinin Kullanmdan Kaldrlmas
HTML 4.01de font etiketi (metin zelliklerini tanmlayan bir etiket) artk benimsenmeyen
etiketlerin arasna eklenmitir, yani standart aralarn arasndan karlmtr; ancak u
anda da Web tarayclar tarafndan desteklenmeye devam etmektedir. Font etiketi, al
ve kapan etiketleriyle metinlerin etrafn u ekilde sarar:
<font face=Arial, Helvetica, sans-serif>Yoga Sangha</font>

Font etiketinin nitelikleri metinlerin grnm zerinde minimum dzeyde kontrol imkn
salarken, Web gelitiricileri CSS araclyla metni ok daha hassas bir ekilde kontrol
edebilirler.
Dreamweaver, gerektiinde (rnein ok eski sayfalar [1 Kasm 2001den nce oluturulan
Web sayfalar] zerinde allrken) kullanlmak zere eitli aralar salayarak font
etiketini tanr ve destekler.
Gnmz standartlarna uygun etkili sayfalar oluturmak iin mmkn olan her yerde CSS
kullann ve font etiketini kullanmaktan kann.
Macintosh ve Windows arasnda font boyutu anlamnda nemli farklar

vardr. Windows ykl bir bilgisayarda grntlenen bir metnin ayns
Maintoshta % 25 daha kk grnr. Yani Macintoshlardaki metinlerin
bykl, Windows ykl bilgisayarlardaki metinlerin drtte kadardr.
Kullanclar font boyutunu deitirebilir; ama bu, sayfa tasarmn etkileyebilir.
Sayfalarnz bu olaslklar hesaba kararak test edip tasarlarsanz daha fazla
ziyaretiye ulaan esnek bir Wen sitesi hazrlayabilirsiniz.
Sayfann st ksmndaki At Yoga Sangha, were dedicated paragrafn sein. Properties

denetisinin Size mensnden 12 deerini sein. Birim ayarnn varsaylan seenei olan
pixelsi deitirmeyin.
Properties denetisinin Appearance blmn kullanarak belge iin
varsaylan bir metin bykl de ayarlayabilirsiniz.
Paragrafn metin boyutu biraz klecek ve sayfadaki geri kalan metinden (henz boyut
ayaryla biimlendirilmedi) biraz daha kk grnecektir. Size alanna bir deer yazabilir
ya da hazr deerlerden birini seebilirsiniz.
Sayfanzda ilk kez kullanlan bir nitelik ya da niteliklerden oluan bir kombinasyon (boyut
gibi) setiinizde Dreamweaver, Properties denetisindeki Style mensnde listelenen
yeni bir stil oluturur. Daha sonra yazdnz ve bu boyutla tanmlanan her metin
ayn stili kullanacaktr. Font, boyut ve renk biimlendirme zelliklerinin her benzersiz
kombinasyonuyla yeni stiller oluturulur. Bu stiller saysal bir sraya gre otomatik
olarak oluturulan genel isimlere sahiptir (style1, style2, vs). Etkin durumdaki, yani
Properties denetisindeki Style mensnde grntlenen bir stili Style mensne tklayp
Rename komutunu seerek yeniden adlandrabilirsiniz. Bir stili etkin stil haline getirmek
istiyorsanz, imleci bu metnin kullanld metnin iine yerletirin.
Seili durumdaki metin iin herhangi bir byklk belirtilmediyse Size mensnde
None yazsn grrsnz. Web tarayclar, byklk tanm yaplmam metinleri
varsaylan byklkte grntler. Bu da Size mensndeki 14 deerine eittir. Ancak
ziyaretilerin tarayclarnda yapt tercih ayarlarna bal olarak bu deer taraycdan
taraycya farkllk gsterebilir.
Size mensndeki saysal font bykl seenekleri tandk gelebilir. nk bunlar
kelime ilem programlarndaki standart byklk deerlerine benzerler.
116 DERS 4
Eer font boyutu ayarlarn silmek ve varsaylan ayarlara dnmek isterseniz,

nce deitirmek istediiniz metni sein ve sonra da Properties
denetisindeki Style mensnden Noneu sein ya da Text > CSS Styles >
None komutunu sein.
Font Boyutlarnn Karlatrlmas:

Font Etiketi ve CSS
Bir Web gelitiricisi olarak modas gemi <font> etiketinin kullanld sayfalar zerinde
almanz da gerekebilir. Dolaysyla bu konuyla ilgili boyutlar ve seenekleri yakndan
tanmanz gerekir. Byle durumlarda btn <font> etiketlerini silerek ve CSS stilleri yaratarak
altnz sistemi deitirip CSS kullanabilirsiniz.
Bul ve Deitir (Find and Replace) zelliini kullanarak (bu konuyu Ders 17de greceksiniz) bir
sitedeki <font> etiketlerini kolayca kaldrabilirsiniz. Aadaki tabloda Properties denetisinde
bulunan Size mensndeki deerlerle eski <font> etiketi boyut seenekleri karlatrlmtr.

Font Etiket
Saysal
Boyutlar
Deerler*

-2
-1
None (varsaylan)
+1
+2
+3

+4

1
2
3
4
5
6

7
Greceli Deerler
Size mensnde
(CSS tabanl)

9
10
12
14
18
24

36**

Mutlak Deerler
Size mensnde
(CSS tabanl)

xx-small
x-small / smaller
small
medium / larger
large
x-large
xx-large
* l birimleri mensndeki varsaylan ayar olan pixels kullanlmtr.

** Bu saysal deer x-large (6) seeneinden biraz daha byk ve xx-large (7) seeneinden de biraz kktr.
<font> HTML etiketi metin byklklerini mutlak (1 ile 7 aras) ya da greceli (+1 ile +7
aras ve -1 ile -7 aras) olarak tanmlar. Bir mutlak say setiinizde byklk ayarlanr (1 en
kk, 7 en byktr). Bir Web taraycsnda metinler iin varsaylan taban boyut deeri
tr. Pozitif ya da negatif bir say setiinizde font boyutu, o fontun taban boyut deerine
gre ayarlanr. rnein +1 pozitif deeri font boyutunu taban boyut deerinden bir byk
olacak ekilde ayarlar. Font boyutu deeri olarak +3 seerseniz aslnda boyutu + yapm
olursunuz (3 + 3). Font boyutunun en byk deeri 7, en kk deeri de 1dir. 7den
byk btn HTML font boyutlar 7 olarak grntlenir. rnein font boyutunu +6 olarak
ayarlarsanz 3+6 deeri 7den byk olur ama font boyutu olarak 7 kullanlr. Bunlar, <font>
HTML etiketinin kstlamalardr ve CSSi etkilemezler. CSS, metin zelliklerini tanmlamak
iin kullanlan daha esnek ve ok ynl bir yntemdir.
Font Rengini Tanmlamak

nceki derste yaptmz gibi bir sayfann arka plan rengini deitirdiinizde grntyle
ilgili sorunlara yol amamak iin grntlenecek metnin rengini de deitirmeniz
gerekebilir. rnein siyah arka plan zerinde siyah bir metin grnmez. Belgeniz iin
bir renk dzeni seerken uyumlu renk kombinasyonlar semeye ve renklerin arasnda
yeterli derecede kontrast (kartlk) olmasna zen gsterin. Birbirine ok yakn renkleri
ayrt etmek (tamamlayc renklerde de olabildii gibi) zellikle bilgisayar ekrannda
ok zor olabilir. Aadaki uygulamada index.html belgesinin varsaylan font rengini
deitireceksiniz.
1. Modify > Page Properties komutunu sein ve Category listesinde Appearancen
seili olduundan emin olun.
Page Properties iletiim kutusunun Appearance blm, belgeyle ilgili birok zellii
ayarlamanz salayan pek ok seenek ierir.
2. Text color seeneinin renk kutusuna tklayn.
Bu derste daha nce belgenin arka plan rengini belirlemek iin kullandnza benzer bir
renk paleti alacaktr.
3. Onaltlk tabanl kodu #330000 olan koyu krmzms siyah rengi sein ve OK
dmesine tklayn.
Metin alanna onaltlk tabanndaki renk kodunu yazabilir veya renk numunelerini
kullanarak bir renk seebilirsiniz. Siz OK dmesine tkladktan sonra Page Properties
iletiim kutusu kapanr ve belgenize dnersiniz.
118 DERS 4
Text > Color komutunu seerek ilave bir Colors iletiim kutusuna
eriebilirsiniz. Onaltlk tabanl renk kodlarn dorudan Properties
denetisindeki Text Color renk seicisinin yanndaki renk metin alanna
girmek de mmkndr.
4. Welcome to Yoga Sangha metnini sein. Properties denetisindeki Text

Color kutusuna tklayn ve normal bir turuncu renk (#FFCC33) sein.
Font ve font boyutu seeneklerine benzer ekilde font rengi de Dreamweaverda

CSS stilleri araclyla tanmlanr. Daha nce bir renk uygulayarak yeni bir stil
oluturmutunuz. Properties denetisindeki Style mensnde stilin adn grebilirsiniz.
Eer font, font boyutu ya da renk nitelikleriyle denemeler yaparak ilave stiller
oluturduysanz, stilinizin numaras rneklerde gsterilenlerden farkl olabilir. Stili olan
bir metne font, font boyutu veya renk seenekleri uygularsanz, seili metnin sz konusu
stilin tek rnei olmas durumunda yeni nitelikler eski stile eklenecektir. Eer ayn stilin
baka rnekleri mevcutsa veya yeni nitelikleri stili olan bir metnin sadece bir ksmna
uygularsanz, Dreamweaver yeni bir stil oluturacaktr.
Metne stil uygularken stillerinizi dzenli bir ekilde tutmanz iyi olur. Metin niteliklerini
rasgele uygulamamaya aln, nk Dreamweaver her yeni kombinasyon iin yeni stiller
oluturur. Sadece gerektiinde dier nitelikleri kaltm (inheritance) yoluyla alan organize
stillerden oluan bir sistem oluturun. Kaltm konusuyla ilgili ayrntlar bu derste daha
sonra greceiz.
Sitenizde kullanlan onaltlk tabanl renkleri Assets paneli araclyla takip

edebilirsiniz. Assets paneli Files panel grubunda yer alr. Assets panelini Window
> Assets komutunu seerek de aabilirsiniz. Renk varlklarna erimek iin Assets
panelinin sol stunundaki Colors simgesine tklayn. Assets panelinin st tarafnda
yer alan radyo dmeleri renkleri grmek iin size iki seenek sunar: Site ve
Favorites. Site radyo dmesine tkladnzda Yoga Sangha proje sitesinde ya da
o anda etkin durumda bulunan sitede kullanlan renkler grntlenir. Sitenizde
herhangi bir renk kullanmadysanz listede renk grmezsiniz. Renkleri
tanmladysanz, fakat listelenmi olarak grmyorsanz, panelin sa alt
kesindeki Refresh Site List dmesine tklayn. Bu listede henz
kullanmadnz renkleri greceksiniz. nk Yoga Sangha proje sitesinin dier
ders klasrlerindeki belgelerde kullanlan baka renkler de vardr. Kullandnz
renklerin btn sitede tutarl olmasn salamak iin ok kullanlan renkleri Assets
panelinde Sk Kullanlanlar (Favorites) olarak kaydedebilirsiniz. Sk kullanlan bir
rengi kaydetmek isterseniz, istediiniz rengi Site listesinden sein ve Assets
panelinin sa alt kesindeki Add to Favorites dmesine tklayn. Dreamweaver,
ilgili rengin Favorite (Sk Kullanlanlar) listenize eklendiini bildiren bir iletiim
kutusu grntleyecektir. Favorites listesini grmek iin Assets panelinin st
ksmndaki Favorite radyo dmesine tklamanz gerekir. Assets panelini resimleri
ynetmek iin Ders 5te kullanacaksnz.
Site seenei
Assets paneli sekmesi
Favorites seenei
Colors simgesi
Refresh Site List

120 DERS 4
Add to Favorites
Stillerin ncelenmesi
u ana kadar bu dersin nceki uygulamalarnda bir dizi CSS stili kullandnz. Bu dersin
banda bir metni Properties denetisini kullanarak font, font bykl ve renk
nitelikleri ile biimlendirmeye baladnz. Dreamweaver da bir yandan ilgili CSS stillerini
oluturuyordu. Siz bir sayfada niteliklerden oluan yeni bir kombinasyon oluturduunuzda
Dreamweavern da yeni bir stil oluturduunu ve bu yeni stilin Properties denetisindeki
Style mensnde listelendiini grdnz. u ana kadar arka plan rengi, Ders 3teki
balantlarn farkl durumlarna ait renkler ve bu dersin bandaki varsaylan font
ayarlar gibi eitli sayfa zellikleriyle de alma frsat buldunuz. Btn bu nitelikler
Dreamweaverda CSS stilleriyle kontrol edilir.
imdiki uygulamada bir stil sayfasnn (style sheet) ne olduunu ve nasl altn
reneceksiniz.
1. index.html belgesi ak durumdayken Document ara ubuunun sol st
ksmndaki Split dmesine tklayn.
Split (Show Code and Design Views)
Belge penceresinde, derslerde u ana kadar kullandnz Design grnmyle birlikte

buradaki tasarma karlk gelen kodlardan oluan blnm bir ekran greceksiniz. Bu
grnm Ders 16da daha youn bir ekilde kullanacaksnz. Varsaylan durumda Code
grnm belge penceresinin st ksmnda, Design grnm de altta yer alr.
Bu grnmlerin bykln, imleci bu iki grnm ayran ubuun zerine

yerletirerek ayarlayabilirsiniz. mle iki ulu bir oka dntnde, zerine
tklayarak ubuu istediiniz gibi srkleyebilirsiniz.
2. Code grnmnde aadaki ifadeyi grene kadar ekran yukarya kaydrn.
<style type=text/css>
<!
a:link {
color: #FF3300;
}
Burada grdnz kod, bu sayfada kullanlan stillere ait btn bilgileri ieren bir stil
sayfasnn balangcn gsterir. Bu, bir dahili stil sayfas (internal style sheet) olarak
adlandrlr, nk belgeye gml durumdadr. nceki derslerde Properties denetisi ve
Page Properties iletiim kutusu kullanlarak oluturulan btn stiller dahili stildi. Siz bir
metin biimlendirmesi ya da sayfa zellikleri tanmladnzda Dreamweaver 8 otomatik
olarak bu stilleri oluturur.
CSS stilleri ve stil sayfas ekleri belgenin <head> ve </head> etiketlerinin arasna yerletirilir.
CSSte bir stil sayfas (style sheet), stillerden oluan bir gruptur. Bir stil (genellikle kural
[rule] olarak bilinir), belirli bir elemann grnmn tanmlayan ve kontrol eden bir
zellikler grubudur. index.html belgesine ait kodda stil sayfas <style type=text/css>
(stil sayfasn tanmlar) ve </style> (stil sayfasn sonlandrr) arasndaki her eydir. a:link
{ color: #FF3300; } kodu tek bir stili (ya da kural) temsil eder. Buradaki stil sayfasnda,
sayfann arka plan rengini ayarladnz zaman oluturulan aadaki kodu grrsnz.
body {
background-color: #FFFFCC;
}
Kurallar, seiciler ve bildirimlerden meydana gelir. Seici (selector), tanmlanan elemann

kendisidir. Bildirim (declaration) ise, zellikler ve bunlarn deerlerinin kombinasyonudur.
zellikler (properties), grnm kontrol eden nitelikleri, deer de belirtilen nicelik ya da
formattr. Bir stilin yaps u ekildedir: seici { zellik: deer } ve zellik: deer ifadesi de
bildirimdir.
rnein aadaki stilde
body { background-color: #FFFFCC }
tanmlanan eleman body seicisidir.

{ background-color: #FFFFCC } bildirimi, zelliklerin ve deerlerin kombinasyonudur.
Belirtilen arka plan elemannn nitelii, background-color (arka plan rengi) zelliidir.
Rengi tanmlayan deer de #FFCCCCdir.
122 DERS 4
Dahili Stillerle almak

Dahili stiller sadece geerli belgede tanmlanan kullanlan stillerdir. Sitenizdeki tek bir
sayfa iin bir stil tanmlar oluturacaksanz dahili stilleri kullanabilirsiniz. Eer sitenizde
birden fazlann uyumlu bir grnme sahip olmasn 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. Harici stillerin oluturulmasn bu derste daha sonra greceiz.
u ana kadar oluturduklarnzn hepsi dahili stillerdi. nceki uygulamada grdnz

stil sayfas da dahili bir stil sayfasdr, yani tmyle index.html belgesinin iinde
saklanmaktadr.
1. CSS panel grubunda yer alan CSS Styles panelini an ve panelin st ksmnda
yer alan All dmesine tklayn.
Eer CSS Styles paneli ak deilse, Window > CSS Styles komutunu
seerek bu panele eriebilirsiniz.
CSS Styles panelinde, sayfa zelliklerini tanmladnzda oluturulan stillerin bir listesi
bulunur.
Btn dahili stillerin listesini grmek iin CSS Styles panelinin st
ksmndaki <style> grubunu geniletmeniz gerekebilir.
2. CSS Styles panelinin alt ksmndaki New CSS Rule simgesine tklayn.
New CSS Rule dmesi
New CSS Rule iletiim kutusu alacaktr.

Bu iletiim kutusunu Text > CSS Styles > New komutunu seerek de
aabilirsiniz.
124 DERS 4
Dreamweaverda kullanabileceiniz farkl seici tipi (stiller tarafndan tanmlanan eleman

trleri) vardr:
Class: 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.
Tag: Bu seici tipi, stil tarafndan yeniden tanmlanacak olan bir eleman olarak bir HTML
etiketini 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.
3. New CSS Rule iletiim kutusunun Selector Type alanndaki Class seeneini
iaretleyin.
Metin alan, zel bir stil yaratmay mmkn klmak iin Name adnda bir metin alanna
dnecektir.
Dreamweaver genel isimleri otomatik olarak saysal bir srayla verir:.unnamed1, .unnamed2,
vb. Bu isimler pek aklayc deildir ve birden fazla snf oluturuyorsanz iinizi gerekten
de zorlatrabilirler. Stillerinize hangi amala kullanldklarn aklayan ksa isimler verme
alkanln edinin.
4. Name metin alanna snfnzn ismi olarak .dayName yazn.
smin nne bir nokta koymak gerekir. Eer noktay silerseniz Dreamweaver ismin nne
bu noktay otomatik olarak ekleyecektir (gsterilmese bile).
Stilin grnm nitelikleri yerine ilevini aklayan isimler atama alkanln edinmek en
iyisidir. levi aklayan isimler zellikle konuma tabanl Web tarayclarnda daha kolay
eriim salarlar.
5. Define In alanndaki This document only seeneini iaretleyin ve OK dmesine
tklayn.
This document only seenei, yeni bir dahili stil oluturduunuzu gsterir. CSS Rule
definition for .dayName iletiim kutusu alacaktr.
6. CSS Rule Definition iletiim kutusunun Type kategorisinde Size deerini
12 pixels, Weight seeneini bold, Variant seeneini small-caps ve Color
seeneini siyah (#000000) olarak ayarlayn. Dier btn seenekleri
tanmlanmam olarak brakn ve OK dmesine tklayn.
Yeni oluturduunuz snfn CSS Styles panelindeki stil listesinde grntlendiine dikkat edin.
126 DERS 4
.dayName kuraln yeni oluturduunuz iin, CSS Styles panelinin en st ksmnda yer
alan All Rules listesinde bu kural otomatik olarak seilecektir. Panelin alt ksmnda seili
durumdaki kurala ait zelliklerin yer ald bir liste bulunur. zellikler soldaki stunda,
bunlarn deerleri de sadaki stunda yer alr. Varsaylan durumda zellikler sadece,
deerleri tanmlanm zelliklerin listelendii Show Only Set Properties modunda
grntlenir. zellikler iin kullanlan iki ilave grntleme modu daha mevcuttur: Show
List View ve Show Category View. Show List View nitelik listesinin tamamn grntler,
Show Category View ise nitelik listesini CSS Rule Definition iletiim kutusundakilerle ayn
kategorilerde dzenlenmi olarak gsterir.
CSS Styles panelinde seili durumdaki bir kural dzenlemenin birok yolu vardr:
Mevcut zelliklerin deerlerini deitirmek: zellik deerlerini dorudan
zellikler listesinde ilgili deere tklayp karlk gelen menlere erierek
deitirebilirsiniz.
Yeni zellik ve deer eklemek: Show Only Set Properties modunda zellikler
listesini grntlerken listenin alt ksmndaki Add property balantsna tklayarak
yeni zellik semek iin kullanabileceiniz bir menye eriebilirsiniz. zellikler
listesini Show Category View veya Show List View modunda grntlerken listedeki
bir zellie, ilgili zelliin deer (value) alanna tklayarak bir deer ekleyebilirsiniz.
Kural dzenlemek iin iletiim kutusunu kullanmak: Panelin alt ksmndaki Edit
Style dmesine tklayarak CSS Rule definition iletiim kutusunu aabilirsiniz.
Snflar sayesinde belgenizin biimlendirme zellikleri zerinde ciddi lde kontrol
imknna sahip olursunuz. Snflar bir kelime ilem programndaki stillerle ayn ekilde
uygulayabilirsiniz. Yani metni seer ve sonra da stili uygularsnz. Bu stili metin bloklarna
ya da metin blou iinde yer alan szcklere tek tek uygulayabilirsiniz.
Sradaki admlarda dayName snfn madde imli listedeki belirli elere uygulayacaksnz.
7. index.html belgesindeki Schedule listesinde yer alan Monday szcn sein.
Stili uygulamak iin Properties denetisindeki Style mensnden dayNamei
sein. dayNamei listedeki dier gnlere uygulamaya devam edin.
Seilen metin, dayName snfnn zelliklerini yanstacak ekilde deiecektir.

Stili uyguladktan sonra Code grnmnde seilen szcn nnde
<span class=dayName> ifadesinin olduunu greceksiniz. Buradaki span ifadesi,
elemanlardan oluan seimi, class da <span> (al etiketi) ile </span> (kapan etiketi)
arasnda yer alan metne uygulanan stili tanmlar. <span> etiketi, byk bir metin bloundaki
eitli szckler gibi eleri tanmlayan bir satrii elemandr. Btn bloklar (paragraf gibi)
tanmlayan bir blok dzeyi eleman olan <div> etiketine benzer.
Metindeki stil biimlendirme zelliini kaldrmak isterseniz, ekleme noktasn
metnin iine yerletirin ve Properties denetisindeki Style mensnde None
seeneini iaretleyin. Stil ve ona ait biimlendirme zellikleri metinden
kaldrlacak, ancak stil yine stil sayfasnda kalacaktr.
8. CSS Styles panelindeki New CSS Rule dmesine tklayn. Selector Type
seeneini Class olarak ayarlayn, Name metin alanna .highlight yazn ve Define
In alannda This Document Only seeneini iaretleyin. OK dmesine tklayn.
CSS Rule Definition for .highlight iletiim kutusu alacaktr.

9. CSS Rule Definition iletiim kutusunda soldaki Category listesinden
Backgroundu sein.
CSS Rule Definition iletiim kutusu, arka plan seeneklerini gsterecek ekilde deiecektir.
128 DERS 4
10. Background Color seeneini beyaz (#FFFFFF) olarak ayarlayn ve OK

dmesine tklayn.
Yeni oluturduunuz highlight snf CSS Styles panelindeki kural listesinde belirecek ve
Properties denetisindeki Style mensnde de kullanlabilir hale gelecektir.
11. Announcements blmnde ilk olay baln (Intro to Anusara Workshop)
sein ve Properties denetisindeki Style mensn kullanarak highlight stilini
uygulayn.
Metin beyaz renkle vurgulanacaktr. Bu uygulamada oluturduunuz yeni stiller

(dayName ve highlight), tpk bu derste daha nce Properties denetisi araclyla metin
zelliklerini ayarlarken Dreamweavern oluturduu stiller gibi, Style mensnde sahip
olduklar zelliklere ait grsel iaretlerle grntlenecektir.
Gml stil sayfasndaki bir dahili stili silmek isterseniz, CSS Styles
panelinde ilgili stili setikten sonra panelin sa alt kesindeki Delete CSS
Rule simgesine tklayabilirsiniz. Bu ilemi yaptnzda stil ilgili stil
sayfasndan silinecektir. Artk bu stil tanm mevcut olmadndan, bu stilin
uyguland hibir metinde, silinen stil tarafndan tanmlanan nitelikleri
gremezsiniz. Bununla birlikte, bir stili CSS Styles panelinden silmekle stili
Properties denetisindeki Style mensnde None seeneini iaretleyerek
silmenin ayn ey olmadn unutmayn. Bir stil ait olduu stil sayfasndan
silindiinde, silinen stile ait referanslar (bir stili uyguladnzda koda
eklenirler) belgede kalacaktr. Referanslar da silmek isterseniz, Ders 17de
greceimiz Find & Replace (Bul ve Deitir) zelliiyle bunu hzl bir ekilde
gerekletirebilirsiniz. zellikler listesinde tek bir zellii seip Delete CSS
property simgesine tklayarak kurallarn zelliklerini silmek de mmkndr.
index.html dosyasn kaydedebilir ve bir sonraki uygulama iin ak brakabilirsiniz.
Dahili Stilleri Harici Stillere Dntrmek

Stil sayfalar harici olarak saklanabilir ve bir ya da daha fazla belgeye balanabilir. Bir
harici stil sayfas (external style sheet), 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.
1. index.html belgesinde File > Export > CSS Styles komutunu sein.
Export Styles As CSS File iletiim kutusu alacaktr.

2. Save As metin alanna stil sayfanzn ad olarak sangha.css yazn. Dosyay
Lesson_04_CSS klasrne kaydedin.
.css uzantsn eklemeniz gerekmez. Kaydetme ileminden sonra siz

eklemezseniz bu uzant belgeye otomatik olarak eklenir.
index.html belgesinde mevcut olan dahili stilleri (sayfa zelliklerini tanmlayan stillerle
birlikte dayName ve highlight stilleri) ieren bir harici stil sayfas oluturulacaktr.
Siz stilleri aktarrken yeni belgeye sadece dahili stiller eklenir. Dahili stillerini
aktardnz belgeye eklenmi bir harici stil sayfas varsa, bu harici stil
sayfasndaki stiller yeni stil sayfasna dahil edilmez.
Dahili stillerini dntrdnz belgedeki harici stil sayfasn kullanmak isterseniz, stil
sayfasn balamadan nce dahili stil sayfasn silmeniz gerekir. Bunun nasl yapldn
bir sonraki uygulamada reneceksiniz. Dreamweaver, bir dahili stil sayfasndakilerle ayn
isimleri kullanan stillerin bulunduu bir harici stil sayfasn eklemenize izin verir. Ancak
uyumazlk kmasn nlemek, HTML belgenizdeki kod miktarn azaltmak ve hata ya da
karklk kma olasln azaltmak iin dahili stilleri silmeniz gerekir.
Dahili stil sayfasn silmek iin CSS Styles panelindeki kurallar listesinin en stne gidin.
<style> ile gsterilen dahili stil sayfasn sein. Bu stil sayfas, bu derste kullandnz
btn kurallar iermektedir. <style> seili durumdayken CSS Styles panelinin alt
ksmndaki p tenekesi simgesine (Delete Embedded Style Sheet dmesi) tklayn. Bu
dmenin balama duyarl olduunu muhtemelen fark etmisinizdir. Dme, seilen
eye (zellik, kural ya da btn bir stil sayfas) bal olarak deiir.
index.html belgesini kapatabilirsiniz.
130 DERS 4
Mevcut Bir Harici Stil Sayfasn Balamak

u anda birden fazla stil tanmna sahip bir harici stil sayfanz var. Harici olduu iin,
stil tanmlarnn uygulanmasn ya da uygulanabilmesini istediiniz Web sayfalarna
balayarak bu dosyay dier belgelerle birlikte kullanabilirsiniz. Snflar ilgili paragraflara
ya da seili durumdaki metinlere elle uygulamanz gerekir. Bu derste daha ileride
HTML etiketlerini yeniden tanmlayan ve balamsal seicileri oluturan stillerin nasl
gelitirildiini reneceksiniz. Her iki stil tipi de, sz konusu stil sayfasnn eklenmi
olduu btn belgelere otomatik olarak uygulanacaktr.
CSS seici stilleri kullanlarak oluturulabilen IDler, harici stil sayfalar
eklendiinde belgelere otomatik olarak uygulanmaz.
1. Lesson_04_CSS/about klasrndeki index.html dosyasn an
Kullanlacak metin ierii bu sayfaya eklenmi ve nceki derslerde

rendiiniz tekniklerle biimlendirilmitir. lave uygulama yapmak isterseniz,
Lesson_04_CSS/Text klasrnde yer alan about.txt belgesindeki metni
aktarabilir ve bu uygulamada kullanacanz belgeye benzeyecek ekilde
biimlendirebilirsiniz.
Bu sayfann herhangi bir dahili ya da harici stili bulunmamaktadr.

Sradaki admlarda bu belgeyi nceki uygulamada index.html belgesindeki dahili
stillerden oluturduunuz harici stil sayfasna balayacaksnz.
Bu balama ilemi, metin biimlendirmesinin iki sayfada da tutarl olmasn salayacaktr.
Stilleri gelitirmeye devam ederken biimlendirmenin tutarl kalmasn
salamak iin definitions.html belgesindeki dahili stili silmeniz ve harici stil
sayfasn eklemek zere bu uygulamadaki admlar uygulamanz gerekir.
Harici stil sayfalar kullandnzda, bu stil sayfalarna bal olan btn
belgeler sz konusu harici stil sayfalarndaki stillerde yaplan her deiiklii
yanstacaktr. Bu ders iin definitions.html belgesini olduu gibi brakabilir ya
da ekstradan pratik yapmak iin burada anlatld ekilde zerinde
alabilirsiniz.
2. CSS Styles panelinin sa alt ksmndaki Attach Style Sheet simgesine tklayn.
Attach Style Sheet dmesi
Attach External Style Sheet iletiim kutusu alacaktr.
132 DERS 4
Dreamweaver, Web sitelerinizde kullanabileceiniz bir dizi hazr CSS stil

sayfas ierir. Bu stil sayfalarndan birini kullanmak isterseniz, Attach
External Style Sheet iletiim kutusunun alt tarafnda yer alan sample style
sheets balantsna tklayn. Sample Style Sheets iletiim kutusundan
istediiniz stil sayfasn sein ve OK dmesine tklayn. Bu stil sayfalarn
olduklar gibi kullanabilir ya da bir balang noktas olarak alarak kendi stil
sayfalarnz gelitirebilirsiniz. Sample Style Sheets iletiim kutusunda
Cancel dmesine tkladnzda Attach External Style Sheet iletiim
kutusuna dnersiniz.

HTML kodu yazma konusunda yeterli bilgiye sahipseniz ve CSS kodu

yazmay biliyorsanz, File > New komutunu setikten sonra General
sekmesindeki Basic Page kategorisinden de CSS belge tipini seerek
sfrdan bir CSS sayfas oluturabilirsiniz. Bu ilemi yaptnzda yeni bir
belge alacaktr. Bu belgede Code grnmnn tek grnm modu
olduuna dikkat edin.
CSS ve CSS elemanlaryla ilgili ayrntl bilgi almak isterseniz, Code panel
grubunda yer alan Reference panelindeki Book mensnden OREILLY
CSS Reference sein. Style mensn kullanarak CSS terimlerini seebilir
ve bunlarla ilgili aklamalar okuyabilirsiniz. Reference panelini Ders 15te
daha youn bir ekilde kullanacaksnz
3. Browse dmesine tklayn ve bu dersin banda oluturduunuz sangha.

css dosyasn bulun. Select Style Sheet File iletiim kutusundaki Choose
(Macintoshta) ya da OK (Windowsta) dmesine tklayarak stil sayfasn
sein. Attach External Style Sheet iletiim kutusunun Add As blmnde Link
seeneinin iaretli olduundan emin olun ve OK dmesine tklayn.
sangha.css adndaki harici stil sayfas index.html belgesine balanacaktr. Sayfa artk harici
stil sayfasnda tanmlanan biimlendirme niteliklerini yanstacaktr. Bunun sonularn
hemen greceksiniz. Balant renkleri, Ders 3te ayarladklarnzla ayn olacak, arka plan
bu derste daha nce ayarladnz soluk sar rengini alacak ve varsaylan sayfa fontu, yine
bu derste daha nce setiiniz fonta dnecektir.
Link seenei varsaylan olarak ayarlanm durumdadr, index.html belgesine ilk defa
bir stil sayfas ekliyorsunuz. Bir stil sayfas eklemek iin kullanlan Import seenei
Netscape Navigator 4.xte almaz. Bu Web taraycs Import seeneiyle eklenen btn
stil sayfalarn gz ard eder. Stil sayfalarnn basamakl yapsndan dolay ikinci stil sayfas
ncelie sahiptir ve ilk sayfada uyumsuzluk yaratan btn stilleri geersiz klar. Benzer
ekilde, nc stil sayfas da birinci ve ikinci sayfalardaki btn uyumsuz stilleri geersiz
klar. Birden fazla stil sayfas kullanma ilemi basamaklama (cascading) olarak bilinir.
Netscape 4.x kullanclar gz nne alnarak ska kullanlan bir teknik de, bu taraycyla
uyumlu olmayan btn stilleri Import seeneinin kullanld sonraki dier stil
sayfalarna yerletirmektir. Bylece Netscape 4.x sadece ilk stil sayfasnda yer alan stilleri
kullanacak ve uyumsuzluk karma ya da hata oluturma ihtimali bulunan stillerden
etkilenmez, nk Import seeneine balanan stil sayfalarn grmezden gelir. Sonraki
stil sayfalarnda aktarlan stilleri ierenler varsa, bunlar ilk sayfada yer alan eski Web
tarayclarna ynelik stilleri geersiz klabilir.
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.
134 DERS 4
imdiki uygulamada bir HTML etiketini yeniden tanmlayarak sangha.css harici stil
sayfas iinde yeni bir stil oluturacaksnz. Burada Heading 3 (<h3>) HTML imini yeniden
tanmlayarak Web taraycsna <h3> etiketini kullanan her metnin sizin tanmladnz
biimlendirme ayarlaryla grntlenmesi gerektiini bildireceksiniz. Bu kullanl
bir ilemdir, nk temel Heading 3 formatn deitirerek bu format kullanan btn
metinlerin sizin tanmladnz stil nitelikleriyle biimlendirilmesini salar.
1. CSS Styles panelindeki New CSS Rule simgesine tklayn. Selector Type
alannda Tagi sein. Tag mensn kullanarak h3 sein.
Bu uygulamada Heading 3 (Balk 3) iin bir stil oluturuyorsunuz. HTMLde buna karlk
gelen etiket <h3> ile gsterilir. Etiketler New CSS Rule iletiim kutusunda kodda etraflarn
saran byk-kk iaretleri olmadan gsterilir. Belgenin st tarafnda yer alan balk
Heading 3 olarak biimlendirilmitir ve bir sonraki admda tanmlayacanz nitelikleri
alacaktr.
Mevcut bir HTML etiketini yeniden tanmlayan bir stil oluturuyorsanz,
ekleme noktasn sayfada bu etiketi kullanan bir metnin iine yerletirmeniz
ya da stili oluturmadan nce Etiket Seicide bu etiketi semeniz iinizi
kolaylatracaktr. Selector Type alannda Tag varsaylan seenek olduu
mddete, Dreamweaver HTML etiketini, oluturulacak olan stille otomatik
olarak ilikilendirecektir (varsaylan seici tipi en son kullanlan tiptir).
Selector Type alanndaki varsaylan seenek Tag deilse onu seebilir,
ardndan New CSS Rule iletiim kutusundaki Cancel dmesine tklayabilir
ve tekrar New CSS Rulea tklayabilirsiniz. letiim kutusu tekrar aldnda
etiket seili hale gelecektir. HTML konusuna aina deilseniz etiketi New
CSS Rule iletiim kutusunu amadan nce semek iinizi kolaylatrabilir.
rnein bala tklayp, ardndan <h3> etiketini seebilir ve sonra da CSS
Styles panelindeki New CSS Rule simgesine tklayabilirsiniz. Selector Type
alannda Tag seiliyse, <h3> etiketi Tag metin alannda h3 eklinde gsterilir.
2. Define In alannda men seeneini iaretleyin ve menden sangha.cssi sein.

OK dmesine tklayn.
Bu, geerli belgeye balanm tek stil sayfas olduu iin mende sadece (New Style Sheet
File) ve sangha.css seenekleri bulunur. Herhangi bir harici stil sayfas eklenmemi belgeler
iin bu mendeki tek seenek (New Style Sheet File) olacaktr.
Yeni bir stil olutururken New CSS Rule iletiim kutusunun Define In
alanndaki mende (New Style Sheet File) seeneini iaretleyerek yeni bir
harici stil sayfas oluturabilirsiniz. Bir kural iin yeni bir harici stil sayfas
oluturduunuzda stil sayfas kendisi iin oluturulduu belgeye otomatik
olarak balanr. Bu tr yeni harici stil sayfalarn .css uzantsyla kaydetmeniz
gerekir. Dosya yapsn temiz ve dzgn tutmak iin baz sitelerde btn
harici stil sayfalar merkezi bir konumda toplanr.
CSS Rule Definition for h3 in sangha.css iletiim kutusu alacaktr. Bu iletiim kutusunu
Heading 3 biimlendirme zelliklerini tanmlamak iin kullanacaksnz.
136 DERS 4
CSS Rule Definition iletiim kutusu daima stilin seicisini (zerinde deiiklik yaplan
eleman) ve bunun tanmland stil sayfasnn adn grntler. Buradaki uygulamada
seici h3 ve stil sayfas da sangha.csstir.
3. Type kategorisinde Size mensnden 18i sein ve l deerini points olarak
deitirin. Font mensnden Courier New, Courier, monospacei sein. Renk
deerini #660066 olarak deitirin. Weight mensnden boldu sein ve OK
dmesine tklayn.
Dorudan CSS kodunda deiiklik yapmak iin sangha.css dosyasn da aabilirsiniz.

CSS Rule Definition iletiim kutusunu kapatmak iin OK dmesine tkladnzda,
belge penceresinde yeni bir sekmede sangha.css dosyas otomatik olarak alacaktr.
CSS dosyalar Code grnmnde ekrana gelir (bu grnm Ders 16da youn olarak
kullanacaksnz) Stil sayfasnda stil oluturma, dzenleme ya da silme gibi deiiklikler
yaparsanz, kapatmadan nce CSS belgesini kaydettiinizden emin olun. Kaydetmeden
kapatrsanz yapm olduunuz btn deiiklikleri kaybedersiniz. almaya devam
ederken CSS belgenizle HTML belgenizi dzenli olarak kaydetmeniz iyi olacaktr.
CSSle nasl alacanz ayarlamak iin Dreamweavern Preferences

iletiim kutusunu kullanabilirsiniz. CSS Styles kategorisi, zerinde deiiklik
yapldnda CSS dosyalarn ama imkn salar. Bu seenek varsaylan
durumda aktr. imdiki ders boyunca bu seenei iaretli olarak
brakmalsnz. Preferences iletiim kutusunun yine bu blmnde
Dreamweavern CSS yazma eklini etkileyen baz seenekler vardr.
138 DERS 4
Yeniden tanmlanan HTML etiket stilleri, stil sayfasnn uyguland belgedeki

(belgelerdeki) yeniden tanmlanm etiketlerin kapsad tm ierie otomatik olarak
uygulanr. Oluturduunuz stil heading 3 formatn kullanan metne yanstlacaktr.
4. Ekleme noktasn Yoga Sanghas inspiration is emerging. fadesiyle
balayan ilk paragrafn iine yerletirin.
Belge penceresinin sol alt kesindeki Etiket Seici bir HTML etiketi olan <p>yi gsterir.
Buradan, ekleme noktasnn paragrafn iinde olduunu anlarz. <p> etiketi bir paragraf
tanmlar.
5. CSS Styles panelindeki New CSS Rule simgesine tklayn. Tag metin alannda
p harfinin grnmesi, Selector Type alannda Tagin seilmi olmas ve
Define In alanndaki mende sangha.cssin seili olmas gerekir. Bu deerleri
ayarlamak iin gereken deiiklikleri yapn ve sonra da OK dmesine tklayn.
Oluturduunuz yeni stil, paragraf etiketleriyle biimlendirilen metnin grntlenme eklini

yeniden tanmlayacaktr. Burada seici p, stil sayfas da sangha.csstir.
letiim kutusundaki Tag metin alannda <p> etiketinin otomatik olarak seilmesi gerekir,
nk yeni bir CSS kural semeden nce ekleme noktasn <p> etiketini kullanan bir
paragrafn iine yerletirmitiniz. Bu derste New CSS Rule iletiim kutusunu en son
kullandnzda Selector Type alannda Tag seeneini iaretlediiniz iin bu tip otomatik
olarak seili durumda olacaktr. Dreamweaver kapatrsanz, New CSS Rule iletiim
kutusunu yeniden atnzda Selector Type alannda yine otomatik olarak Class seeneinin
iaretlenmi olduunu greceksiniz.
6. CSS Rule Definition iletiim kutusunun Type kategorisinde Font mensn bo
brakn. Size metin alanna 12 yazn ve Size alannn birim mensndeki l birimi
deerini pixels olarak ayarlayn. Line Height metin alanna 20 yazn ve lm
deerini pixels olarak ayarlayn. Color alannda siyah rengi (#000000) sein ve
iletiim kutusunu kapatmak ve stili oluturmak iin OK dmesine tklayn.
letiim kutusu ak durumdayken Apply dmesine tklayarak yaptnz

ayarlar sayfada grebilirsiniz. Metnin grnmyle ilgili deiiklikler yapmak
isterseniz bunu iletiim kutusunu kapatmadan nce yapabilirsiniz.
140 DERS 4
Belgede paragraf etiketleri iinde yer alan btn metinler harici stil sayfasnda
tanmladnz niteliklere ait biimlendirme zellikleriyle grnecektir. Stil sayfas, farkl
biimlendirme zellikleri uygulanm metinleri, konu balklarn ve listeleri etkilemez.
Webde lm in Kullanlan Birim

ve znrlk Seenekleri
Piksel (pixel), Web sayfalarndaki metin bykln tanmlamak
iin kullanlan lm birimlerinden biridir. Punto (point), basl
medya rnleri iin tretilmitir ve dolaysyla sadece kts
alnacak sayfalar iin iyi bir seenektir. Piksellerin k noktas
dijital medya rnleridir ve ekran znrln temel alan bir l
birimidir. Bunun sonucu olarak pikseller farkl Web tarayclar ve
platformlar arasnda gei yapldnda puntoya gre daha tutarl
sonular elde edilmesini salar. Windows ykl bir bilgisayarda
okunan kk boyutlu bir metin bir Macintoshta hi okunmayabilir.
Buna, gelitiricilerin metin boyutunu tanmlarken punto kulland
durumlarda ok daha sk rastlanr.
Aralarnda Ders 2de rendiiniz greceli byklklerin (Properties
denetisindeki small, medium, large, vs dier seenekler) ve bir
l birimi semeyi gerektiren mutlak deerlerin de (saysal olarak
tanmlanrlar) bulunduu birka lm seenei daha mevcuttur.
Bask tabanl dier seenekler arasnda in, santimetre ve milimetreyi de sayabiliriz.
Pika, (bir pika 12 puntoya eittir), ems, exs ve yzde de dier l
birimi seenekleridir. Yzde (percentage) seenei, ebeveyn
eleman veya etiket tarafndan tanmlanan bykl temel alr ve bu
yzden nceki bir stilde ya da varsaylan bir Web taraycs ayarnda
tanmlanan bir byklk (size) niteliinin varlna (kaltm yoluyla
alr) bamldr. Stillerin ncelii ve kaltm konularn bu derste daha
ileride greceiz.
Genellikle piksel, punto ya da dier bask tabanl lm birimlerinin
yerine greceli byklkler, ems ve yzde kullanlmas tavsiye edilir.
Ama dikkat etmek gereken en nemli nokta, Web sayfalarn farkl
platformlarda test ederek metinlerin Macintoshlarda ve Windows
ykl bilgisayarlarda nasl grndne bakmaktr.
7. Ekleme noktasn is a form of Hatha yoga ifadesiyle balayan listenin ilk

satrnn iine yerletirin. Etiket seicide <ul>ye tklayn.
Etiket Seici
Bu ilemde, metnin biimlendirmesini kontrol eden list etiketi seilir. <ul> etiketini (tm
listeye uygulanr) seerek biimlendirme zelliklerini ayn anda hem listenin madde
imine, hem de liste esine uygulam olursunuz. Etiket Seicide <li> etiketini de (sadece
listedeki tek bir eye uygulanr) greceksiniz.
alannda Tag seeneinin iaretli olduundan, Tag metin alannda ul ifadesinin
grntlendiinden ve stilin sangha.css stil sayfasnda oluturulacandan
emin olun. OK dmesine tklayn ve CSS Rule Definition iletiim kutusunu
kullanarak Size deerini 12 pixels, Weight deerini bold ve renk deerini de
#333333 olarak ayarlayn. OK dmesine tklayn.
142 DERS 4
ul stili, varsaylan gvde metni rengi (siyah) iin yaptnz ayarlar geersiz klar. Hangi
stillere ncelik verildiini nasl belirleyeceinizi bu derste daha ileride reneceksiniz.
9. Belge penceresinde, madde imli listenin hemen zerinde yer alan Anusara
Yoga konu balna tklayn. Etiket Seicide <h4> etiketin sein ve CSS
Styles panelindeki New CSS Rule dmesine tklayn. New CSS Rule iletiim
kutusunda Tag alannda <h4> ifadesinin grntlendiinden, Selector Type
seeneinin Tag olarak ayarlandndan ve stilin sangha.css dosyasnda
tanmlanacandan emin olun; sonra da OK dmesine tklayn. CSS Rule
Definition iletiim kutusunda Font Courier New, Courier, mono olarak, Size
deerini de 16 pixels olarak ayarlayn. OK dmesine tklayn.
Bu konu altbal Heading 4 formatna ayarlanmtr. Belge penceresinin sol alt kesinde
yer alan Etiket Seicide <h4> etiketinin grntlendiine dikkat edin. Properties
denetisindeki Format mensnde de Heading 4n seili olduunu grebilirsiniz.
Bu aamada belgenizin grnm aadaki rnektekine benzeyecektir.
Bir sonraki uygulama iin index.html dosyasn ak brakn. Hem index.html, hem
de sangha.css belgesini kaydedin. Bu derste daha nce stil sayfasn dzenlemeye
baladnzda sangha.css belgesinin otomatik olarak yeni bir sekmede aldn
hatrlayn.
Etiket Kombinasyonlar in Stil Oluturmak

u ana kadar iki seici tipi kullandnz: Class ve Tag. New CSS Rule iletiim kutusundaki
nc seenek Advanced olarak adlandrlmtr ve bu seenek, aralarnda etiket
kombinasyonlarn (dier etiketlerin iinde yer alan etiketler) biimlendirmek iin
kullanlan balamsal seicilerin de bulunduu eitli gelimi stiller oluturmanz salar.
Bu uygulamada metin paragraflar iin hizalamayla birlikte farkl bir biimlendirme
ayar tanmlayacaksnz. <p> etiketi iin daha nce bir stil oluturduunuzdan belgedeki
paragraflar geerli durumda bu biimlendirme zelliklerini yanstacaktr.
144 DERS 4
1. mleci belgenin st tarafnda yer alan ilk paragrafa (An Anusara Yoga Studio
satrnn hemen altnda) yerletirin. Etiket Seiciyi kullanarak <p> etiketini sein.
Paragrafn tamam seilecektir.

Belge penceresinin sol alt kesindeki Etiket Seici kod hiyerarisini gstermektedir.
Aadaki admlarda, paragraf blounu ieren bir etiket kombinasyonu oluturacaksnz.
2. Insert ara ubuundaki Insert Div Tag dmesine tklayn. Insert mensnden
Wrap Around Selection sein ve New CSS Style dmesine tklayn. Selector
Type seeneini Class olarak ayarlayn, Name metin alanna.description yazn
ve Define alannda sangha.cssi sein. OK dmesine tklayn.
Insert Div Tag dmesi
Burada bu <div> etiketine uygulanacak bir stil (description) oluturuyorsunuz. Bir sonraki
admda CSS Rule Definition iletiim kutusunu kullanarak description stilinin niteliklerini
tanmlayacaksnz.
3. Block kategorisini sein, Text Align mensnden justify sein ve ardndan
OK dmesine tklayn.
4. Insert Div Tag iletiim kutusunda description snfnn seili olduundan emin
olun. OK dmesine tklayn.
Paragraf artk belge penceresinde noktal d izgilerle (bu, Web taraycsnda grlmeyen
ve Dreamweavera zg bir grsel yardmcdr) gsterilen bir divin iinde yer alacaktr.
Fare imlecini zerine getirdiinizde bu noktal izgiler dz krmz izgilere dnecektir
ve bu da divi seebileceinizi gsterir.
146 DERS 4
Eer yukarda bahsettiimiz d izgileri gremiyorsanz, View > Visual Aids >
CSS Layout Outlines komutunu seebilirsiniz.
Eer bir divi etrafn saraca bir ey (rnein bu uygulamadaki <p> etiketi gibi)
semeden eklerseniz, div, Content for class snfn ad Goes Here yer tutucu metniyle
birlikte eklenecektir.
5. mleci divin iinde yere alan paragrafa yerletirin.
Burada Etiket Seicide <div.description><p> ifadesi grnecektir. Sradaki admlarda

etiket kombinasyonlarn tanmlamak iin bir stil oluturacaksnz ve bu da tablonun
iinde paragraf iin farkl bir stil oluturmanz salayacak.
alannda Advanced seeneini iaretleyin ve Selector metin alanna div p yazn.
Define In alannda sangha.cssi sein ve OK dmesine tklayn.
Selector metin alanna yazdnz div p ifadesi div etiketini ve iindeki paragraf
(paragraph) etiketini temsil eder. sangha.css stil sayfasna bal bir belgede bu zel etiket
kombinasyonu kullanldnda aadaki admlarda ayarlayacanz biimlendirme
zellikleri uygulanacaktr. div p kullandnzda sadece bir div iinde bulunan
paragraflarn etkileneceini belirtmi olursunuz.
Selector mensnde balantlara uygulanabilen drt durum yer alr: a:link, a:
visited, a:hover (eski Web tarayclar tarafndan desteklenmez) ve a:active.
Bu CSS seici tipi snfms (pseudo-class) olarak adlandrlr.
CSS Rule Definition iletiim kutusu alacaktr.

7. Category listesinden Blocku sein. Text Indent metin alanna 15 yazn, l
birimi olarak pixelsi sein ve OK dmesine tklayn.
Yaptnz deiiklikler metne yanstlacaktr.

8. index.html ve sangha.css belgelerinde yaptnz deiiklikleri kaydedin ve
index.html belgesini bir Web taraycsnda nizleyin.
Harici stil sayfas otomatik olarak kaydedilmedii iin sayfanz bir Web
taraycsnda nizlemeden nce onu kaydetmelisiniz. nizlemeden nce
kaydetmezseniz Dreamweaver size bunu yapmanz gerektiini bildirecektir.
Balamsal seiciler, dier etiketlerle arka arkaya kullanlan etiketleri biimlendirmenizi

salad iin, div iinde bulunan paragrafta yaptnz deiiklikler sayfadaki dier
paragraflar etkilemez.
148 DERS 4
Mevcut Bir Stili Dzenlemek

Harici stil sayfalar kullanmann en nemli avantajlarndan biri, stilleri kolay ve hzl
bir ekilde dzenleme imkn salamasdr. Deiiklikler Web sayfalar yerine sadece
stil sayfalarnda yapld iin yaptnz dzenlemeleri bir sr belgede tekrarlamanz
gerekmez. Harici stillerde biimlendirme ayarlar HTML belgesinde (index.html gibi)
tutulmaz. Dahil edilen tek stil bilgisi, snflarda hangi stilin kullanlmas gerektiini
belirten bir referanstr. Web sayfalar Web taraycsna, biimlendirme zelliklerinin
grntlenme ekliyle ilgili talimatlar iin hangi harici stil sayfalarnn kullanlacan
syler. Stiller elemanlara Web taraycs tarafndan, aadaki ekilde grdnz gibi,
dosyalar ziyareti tarafndan grntlendii anda uygulanr.
Yaplan her deiiklik, dzenlenen stil sayfasna bal btn sayfalara ziyareti tarafndan
grntlendikleri anda otomatik olarak yanstlr. Biimlendirme deerleri stil sayfasnda
(rnein sangha.css) saklandndan, stil sayfasna bal btn sayfalar etkilemek iin bu
deerlerin sadece tek bir konumda deitirilmesi gerekir. Bu ok kullanl bir zelliktir.
nk metin gibi bir elemann grnm birka sayfada, hatta btn sitede ok hzl bir
ekilde deitirilebilir.
Bu uygulamada sangha.css adndaki harici stil sayfasnda yer aan bir stili
dzenleyeceksiniz.
1. CSS Styles panelinin st ksmnda yer alan All Rules listesinden pyi sein.
sangha.css harici stil sayfasnda oluturduunuz stiller CSS Styles panelindeki listede
grntlenir.
CSS Styles panelinde pyi setiinizde CSS Styles panelinin CSS Properties blmnde
geerli durumdaki seimin p stili olduu belirtilir ve bu stil iin tanmlanan zellikler
(burada kullanlan zellikler renk, font bykl ve satr yksekliidir) grntlenir.
Her zellik, stilde tanmlanan belirli nitelikleri gsterir.
2. line-height yani satr ykseklii zelliinin deerine tklayn ve bu deeri 18
olarak deitirin.
zellikleri ve deerlerini dorudan CSS Styles panelinde deitirmek, stillerde deiiklik

yapmak iin kullanabileceiniz hzl bir yntemdir. Bir zelliin ismine (soldaki stunda)
tkladnzda bu zellik seili hale gelir. lgili deere (sadaki stunda) tklayarak bu
deeri deitirebilirsiniz. rnein fontun ismine tklayarak mevcut fontlarn bulunduu
bir menye, renk numunesine tklayarak da renk seicisine eriebilirsiniz.
Yaptnz deiiklikler belgeye uygulanacaktr. Satrlarn arasndaki boluk imdi biraz
daha az olacaktr. Bu stil sayfasna bal dier tm belgelerde <p> etiketini kullanan
metinler, Dreamweaverda ya da bir Web taraycsnda grntlendiklerinde, yeni
yaptnz deiikliklere gre otomatik olarak biimlendirilecektir.
150 DERS 4
Properties listesinin alt ksmndaki Add Property balantsna tkladnzda, kurala

eklemek zere yeni bir zellik seebilirsiniz.
Stilleri, ilgili stili seip CSS Styles panelinin alt ksmndaki Edit Style simgesine
tklayarak da dzenleyebilirsiniz. Siz bu ilemi yaptktan sonra CSS Rule
Definition iletiim kutusu alacaktr. Bu iletiim kutusu, nceki uygulamalarda
stilleri oluturmak iin kullandnz iletiim kutusuyla ayndr.
index.html ve sangha.css dosyalarn kaydedin ve ak brakn.
Stil ncelii
Ayn elemana birden fazla stil uygulanmsa Web taraycs her bir stilin niteliklerini
dier stillerle birlikte grntler ve bu stillerin arasnda uyumazlk kabilir. Byle bir
uyumazlk kmas durumunda stillerin ncelik sras CSSin basamakl (cascading) yaps
tarafndan belirlenir. Stillerinizi nasl yneteceinizi ve nasl sralayacanz bilirseniz
beklenmedik sonularla karlamazsnz.
CSS st ste eklenerek uygulanr. Yani ayn elemana uygulanyorlarsa her stil dier stillerin
zerine eklenir. Burada da aada belirtilen orijin, zgllk ve sralama kurallarna gre
sral bir dzen oluturulur.
Orijin
lk olarak orijin (stilin kayna) deerlendirilir. Stil orijinlerinin sras en dk ncelikten

(Web taraycs tarafndan kullanlr) balayarak u ekilde gider:
Web taraycs varsaylan seenekleri (en dk ncelik)
Kullanc tarafndan oluturulan stiller
Web sayfas tarafndan tanmlanan stiller (en yksek ncelik)
Yani Web tarayclar kendi varsaylan biimlendirme spesifikasyonlarn kullanr (bu
varsaylan deerleri geersiz klan bir stil sayfas olmad mddete). Kullanc tanml bir
stil sayfas Web taraycsnn varsaylan deerlerini geersiz klar. Web sayfas tarafndan
tanmlanan stiller de kullanc tanml stilleri geersiz klar.
1. Windows kullanclar iin: Internet Explorer an, Tools > Internet Options
komutunu sein, General sekmesine gein ve iletiim kutusunun alt ksmndaki
Accessibility dmesine tklayn. Mac OS X kullanclar iin: Safariyi an,
Safari > Preferences komutunu sein, Advanced kategorisini sein ve Style
Sheet alr mensn kullanarak daha nce oluturduunuz stil sayfanz sein.
Bilgisayarnzda Internet Explorer ya da Safari ykl deilse bu adm

tamamlamak iin herhangi bir Web taraycsn kullanabilirsiniz. Kullanc stil
sayfasnn tanmland blmn ad ve tam konumu taraycdan taraycya ve
srmden srme farkllk gsterebilir. Bir Web tasarmcs olarak farkl Web
tarayclarn tanyor olmanz iyi bir eydir. nk bu adm dier tarayclarda
tekrarlamak isteyebilirsiniz. Stil sayfas tanmlamayla ilgili bir seenek
bulamazsanz Web tarayc uygulamasnn Yardm blmne
bavurabilirsiniz.
Ziyaretiler, girdikleri sayfalarda stil sayfalarnn istedikleri ekilde uygulanmas

konusunda Web tarayclarn ynlendirme seeneine sahiptir. Bu seenek, kendi
ihtiyalarna gre optimize edilmi bir stil sayfas araclyla Web sayfalarnn
grnmn ayarlamalarna izin vererek kullanclara daha geni bir eriilebilirlik imkn
salayabilir. Bu, grme zorluu eken ziyaretiler iin nemli bir seenektir. rnein
arka plan zerinde kontrastl olmayan kk harfli metinleri okumakta zorlanan bir
kullanc, metinleri byk olan ve yksek kontrasta sahip bir renk kombinasyonu ieren
bir stil sayfas (beyaz arka plan zerinde siyah metin gibi) tanmlayabilir. Her ne kadar
byle bir seenek mevcut olsa da, ziyaretilerin byk bir ksm herhangi bir stil sayfas
tanmlamayacaktr. Bu yzden bir site gelitirirken tasarmnzn eriilebilirlik durumunu
yine dikkate almanz gerekir. Baz kullanclarn byle bir seenein varlndan dahi
habersiz olabileceini de unutmayn. Sitenizin rahata grlebilir hale getirilmesi
konusunda ziyaretilerinize fazla gvenmeyin. Sitenizi grmek iin fazladan ne kadar
aba harcarlarsa, muhtemelen ierie bakmak iin de o kadar az zaman harcayacaklardr.
Tasarmlarnz yaparken en iyi ekilde sonu almak iin (yani daha ok ziyaretinin
gelmesini kast ediyorum) ziyaretilerinizden gelen tepkileri dikkate aln ve tam, dank
olmayan ve kullanm olabildiince kolay siteler hazrlayn.
152 DERS 4
Windowstaki
Internet Explorer
tercihleri arasnda
yer alan kullanc stil
sayfas seenei
Eer kullanc tarafndan tanmlanan bir stil sayfas ile Web sayfas tarafndan tanmlanan
bir stil sayfas arasnda uyumazlk varsa, Web sayfas tarafndan tanmlanan sayfa
kullanlr. Eer kullanc tanml bir stil sayfas varsaylan font olarak Verdana kullanyorsa
ve Web sayfas tarafndan tanmlanan bir stil sayfasnda varsaylan font rengi yeilse, bu
durumda varsaylan metinde hem Verdana hem de yeil seenekleri kullanlr. Bu st ste
geme etkisi kaltm (inheritance) olarak bilinir.
Taraycnn Preferences (Macintoshta) ya da Tools (Windowsta) penceresini kapatabilirsiniz.
CSS Weight Bildirimi

Stillerde, weight bildirimi adndaki bir yntemle de deiiklik yaplabilir. Bu ncelik belirleme
ynteminde stillerin hangisinin ncelik sahibi olaca konusunda kullancya seme ans
verilir. Bir stilin arln (weight) artrmak iin stil bildiriminin sonuna, nitelik deerlerinden
sonra !important ifadesi eklenir. Kullanc tanml bir stil sayfasnda !important ifadesiyle
tanmlanan her stil, Web sayfas tarafndan tanmlanm uyumazlk yaratan stilleri
geersiz klar. Burada Web sayfasnn tanmlad stillerin !important modifiern kullanp
kullanmamas dikkate alnmaz. Eski CSS standartlarna gre, kayna Web sayfas olan
ve !important ifadesini ieren stiller !important ifadesini ieren kullanc stilleri geersiz
klyordu. !important bildirimi ieren kullanc tanml stillere ncelik veren deiiklikle
kullanclarn stiller zerinde kontrol salayabilmesi amalanmtr. Bu durum, sayfalar
belirli ekillerde grmesi gereken ziyaretiler iin nemli olabilir.
Bu modifier dikkatli bir ekilde kullann ve gerekten gerekip gerekmediini belirleyin.
!important modifiern kullanan bir stil yle grnecektir. body { color: #339900
!important }.
zgllk
Stil tiplerinin ncelii, hangi stilin en zel olduunu belirleyen bir sisteme baldr.
Stillerin zgllnde aada grld gibi abc formatndaki deerler temel alnr.
a, stildeki IDlerin saysdr
b, stil tarafndan tanmlanan niteliklerin saysdr
c, seicideki eleman isimlerinin saysdr
Daha yksek zgllk deerlerine sahip stiller, daha dk deere sahip stillere gre
nceliklidir.
zglln Belirlenmesiyle lgili rnekler

Stil
rnek Stiller
Tipi
p { color: #000000 }
Tag

div p { font-size:
Advanced
22px }

h5 { font-family:
Tag
Verdana, Arial,

Helvetica, sans-serif;
font-size 18px }

.quote { font-style: Class
normal; font-weight:
bold; color: #0033CC }

#left { font-size:
Advanced
22px; color: #000000 } (ID ve

Balamsal

Seici)

154 DERS 4
a b c
0

0

0

0

1

1

1

2

3

2

1

2

1

0

0

zgllk
11

12

21

30

120

(abc) Deeri
Bu stil, paragraf
bloklarndaki metinlerin
rengini siyah olarak
tanmlyor.
(Balamsal Seici) Bu stil,
bir div iindeki bir paragraf
blounda (paragraf
bloklarnda) bulunan
metinlerin font boyutunu
22 piksel olarak tanmlyor.
Bu stil, Heading 5 olarak
biimlendirilmi metinleri
18 piksel byklkte, font
ayar da Verdana, Arial,
Helvetica, sans-serif olacak
ekilde tanmlyor.
Bu stil, .quote stili
uygulanm metinlerin
normal font stilini
kullanacan, kaln
olacan ve koyu bir mavi
renk (#0033CC)
kullanacan sylyor.
Bu stil, benzersiz bir ID ile
iaretlenmi olan metnin
font bykln 22 piksel,
rengini de siyah olarak
tanmlyor.
2. Dreamweaverdaki sangha.css stil sayfasna gein. u stillerin zgllk

deerlerini hesaplayn: <h4> etiketi, highlight snf ve <ul> etiketi.
Deerleri hesapladktan sonra bunlar bu admn en sonunda verilen deerlerle

karlatrabilirsiniz.
Aadaki ekilde geerli stil sayfanzn nasl grnmesi gerektiini gryorsunuz.
zglln stil srasn nasl belirlediini gsteren rnein altnda listelenen zgllk
deerleri, burada grdnz stil sayfas temel alnarak hesaplanmtr.
Burada zglln stil srasn nasl belirlediini gsteren bir rnek gryorsunuz. Bu
derste daha nce oluturduunuz Heading 3 etiket stili, dersin banda Page Properties
iletiim kutusunda varsaylan fontu Arial, Helvetica, sans-serif olarak ayarladnzda
oluturulan stilin tanmlad fontu geersiz klar. Oluturulan stil balangta bir dahili
stildi, fakat daha sonra sangha.css harici stil sayfasn oluturmak iin en st seviyede
yer alan index.html belgesindeki dier dahili stillerle birlikte aktarld. <h3> etiket stili
(41drt nitelik ve bir seici) varsaylan metin stilinden (23iki nitelik ve seici) daha
byk bir zgllk deerine sahip. Varsaylan metin stili CSS belgesinde body, td, th {
font-family: Arial, Helvetica, sans-serif; color: #000000 } olarak; heading 3 stili h3 {fontfamily: Courier New, Courier, mono; font-size: 18pt; font-weight: bold; color:
#660066;} olarak grnr.
Varsaylan metin rengini tanmlayan stildeki seicileri ayran virgllere dikkat edin
(body, td, th). Virgller bu stilin daha nce for div p iin oluturduunuz gibi bir etiket
kombinasyonu olmadn, bu stilin bir dizi seiciyi bir grup olarak tanmladn gsterir.
Nitelikleri ayn olan seicileri gruplamak (ayr ayr stiller oluturmak yerine) daha verimli
bir yntemdir.
sangha.css stil sayfasnda bu admda hesapladnz zgllk deerleri yle olacaktr:
h4 (Tag): a = 0, b = 2, c = 1 (deer: 21)
Bu stilde herhangi bir ID (a) yok, font-family ve font-size adnda iki nitelik var (b),
ayrca bir de seici var (c), h4.
highlight (Class): a = 0, b = 1, c = 0 (deer: 10)
Bu stilde herhangi bir ID (a) yok, background-color adnda bir tane nitelik var (b) ve
hibir seici yok (c).
ul (Tag): a = 0, b = 3, c = 1 (deer: 31)
Bu stilde herhangi bir ID (a) yok, font-size, weight ve color adnda nitelik (b) ve
ayrca bir tane seici var (c): ul.
CSS, stillerin deerini hesaplamak iin byk, keyfi bir say taban kullanlr.
Onluk say taban kullanlmaz, nk genellikle stillerin dokuzdan fazla IDsi,
nitelii ya da eleman olabilir. Bir stilin hibir IDsi olmadn, 14 nitelii ve 5
eleman olduunu varsayalm. Byle bir stil on tabanna gre u deerleri
kullanr: a = 0, b = 14 ve c = 5 ve elde edilen deer de 145 olur. Daha byk
bir tabana sahip bir say sisteminde a = 0, b = E ve c = 5, elde edilen deer de
E5 olur. Bu nokta ok nemlidir. nk bir IDsi, bir nitelii olan ve hibir
eleman olmayan bir stil, hem onluk sistemde hem de daha byk bir say
sisteminde 110 deerine sahip olur. Onluk tabanda 145 deerine sahip ilk stil
110 deerine sahip ikinci stili geersiz klar. Ama daha byk bir say
sisteminde 110 deerine sahip ikinci stil, E5 deerine sahip birinci stili
geersiz klar. Doru zgllk sras da budur.
156 DERS 4
Sralama
Stillerin bulunduu konumlar temel alan stil sralamas, aadaki gibidir (en dk
ncelikten itibaren):
Web taraycs varsaylan deerleri (metne en uzak biimlendirme ayarlar, en dk
ncelik)
Harici CSS stilleri
Dahili CSS stilleri
Satrii CSS stilleri
Yerel HTML biimlendirme seenekleri (metne en yakn biimlendirme ayarlar,
en yksek ncelik-uyumazlk durumunda yukardaki stillerde ayarlanan btn
seenekleri geersiz klar)

Satrii Stiller ve Yerel Biimlendirme
zellikleri Kullanmaktan Kann
Bir satrii stil (inline style) aslnda dorudan koda yerletirilen bir stilin rneidir.
Satrii stillerini kullanlmas genellikle tavsiye edilen bir ey deildir. <h1 style=color:
#333333; font-family: Verdana, Arial, Helvetica, sans-serif> ifadesini bir
satrii stil rnei olarak verebiliriz. Satrii stiller belgenin ierii iinde tanmlanrlar
ve belgenin stnde (dahili stillerde olduu gibi) ya da ayr bir stil sayfasnda (harici
stillerde olduu gibi) herhangi bir stil sayfas kullanmazlar. Dahili ve harici stil sayfalar
ok daha gldr. nk satrii stiller ierii biimlendirmeyle birletirir ve bunlar bir
stil tanmnn baka yerde kullanlmayan tek bir rneidir.
Yerel HTML biimlendirme zellikleri btn stilleri geersiz klar. Dreamweaver metin
biimlendirmek iin uzun bir sredir HTML biimlendirme zelliklerini kullanmamaktadr,
nk Ders 2de grdmz gibi <font> etiketi HTML 4.0da geerliini yitirmitir.
Elle kod yazarken <font> etiketiyle biimlendirme Dreamweaverda ve baz Web
tarayclarnda desteklenmeye devam etmektedir. Ancak yeni standartlar kullanarak
daha esnek ve ilevsel Web siteleri tasarlayabileceinizi unutmayn. En iyisi <font>
etiketini kullanmaktan kanmaktr.
3. index.html sekmesine tklayarak tekrar index.html belge penceresine gein.

Listenin en son satrnda yer alan Universal Principles of Alignment metnine
highlight stilini uygulayn. CSS Styles panelinin st ksmndaki Current
dmesine tklayn.
highlight stilinde tanmlanan arka plan rengi, listenin biimlendirme zelliklerini kontrol
eden stille birleecektir.
CSS Styles panelinin Current grnm, panelin stteki ksmnda geerli seime
uygulanan btn zelliklerin ve deerlerin (uygulanma srasyla) bir zetini sunar. En
alttaki zellik, geerli seime en yakn olan zelliktir. Panelin alt ksmnda, zet alannda
seilen zellie ait ayrntlar greceksiniz. Burada, kuraln iinde bulunduu stil sayfas
ile ilgili bilgilerle birlikte highlight snf gsterilmektedir. Ayrntl bilgi edinmek iin
zet alanndaki zelliklerden istediiniz birini seebilirsiniz. nceki uygulamada bir stili
dzenlemek iin kullandnz CSS Styles panelinin Properties blm yine grnr
durumda olacaktr.
Bir metne Web sayfasn (orijin) hazrlayan kii tarafndan uyumazlk karan niteliklere
sahip birden fazla stil uygulandysa, ncelik en iteki stilin (geerli seime en yakn
stil) spesifikasyonlarna verilir. En yeni stiller daha eski stillerin iine yerletirilir.
Uyguladnz en son biimlendirme nitelikleri fiziksel olarak metne en yakn etiketler
olduu iin bunlar daha eski stillere gre nceliklidir ve metnin son grnmn kontrol
ederler.
Eer belgenizde bir harici stil sayfas kullanlyorsa, bu sayfadaki stiller btn belgede
kullanlr. rnein harici stil sayfasnn Heading 3 ve Heading 4 iin baz tanmlar
olduunu ve belgenizde Heading 3 etiketini yeniden tanmlayan bir de dahili stil
oluturduunuzu farz edelim. Niteliklerin harici stildekilerle uyumazlk karmas
durumunda ncelik dahili stile aittir. rnein dahili stil h3 etiketini krmz renkte olacak
158 DERS 4
ekilde, harici stil de yine h3 etiketini mavi renkte ve kaln olacak ekilde tanmladysa, h3
etiketi krmz ve kaln olur. Bu durumdan sadece uyumazlk karan nitelikler etkilenir.
Metnin belirli bir ksmna elle uygulanan metin biimlendirme zellikleri de dier stillere
gre ncelikli olabilir. Yukarda verdiimiz rnekte Heading 3 uygulanm satrlardan birine
Properties denetisini kullanarak farkl bir renk uyguladnz varsayalm. Dreamweaver,
Properties denetisinde yaplan renk ve biimlendirme seimlerini zel dahili stiller olarak
deerlendirir. Properties denetisindeki Style mens hem dahili, hem de harici stilleri ierir.
Belgenize bir stil sayfas ilitirdiyseniz ve Web taraycs biimlendirme zelliklerini
beklediiniz ekilde grntlemiyorsa, stil sayfanz ve belgenizi kontrol ederek,
kullanlmasn beklediiniz stilleri geersiz klan baka stiller ya da yerel biimlendirme
ayarlar olup olmadna bakn.
Temel Tipte Bir CSS Yerleim Dzeni Hazrlamak

CSS, Web sitelerinizin yerleim dzenini ve grnmn kontrol etmek iin
kullanabileceiniz harika bir aratr. CSS ilevsellii en iyi ekilde, pek ok zellii
destekleyebilen yeni Web tarayclaryla (5.0 ve daha yeni srmler) salanr. CSS
tablolarla birlikte ya da tabloyla oluturulan yerleim dzenlerine alternatif olarak
kullanlabilir (bu konuyu Ders 6da greceiz). Pek ok sitede tablo yerine CSS
kullanmna geilmitir, nk tablolar u anda daha fazla Web taraycs ile uyumlu bir
yerleim dzeni hazrlama yntemi olsalar da, bunlar kullanmann birok dezavantaj
vardr. zellikle karmak tablolar sayfalarnzn yklenmesini zorlatrabilir. Bu
tablolarda daha fazla kod kullanmak ve tablonun konumunu korumas iin genellikle
boluk resimleri (spacer GIFs) kullanmak gerekir. En nemli dezavantajlardan biri,
ieriin biimlendirme ve grnmle birletirilmesidir. CSSin avantajlar arasnda, CSS
tabanl sitelerin gncellenmesinin daha kolay ve hzl bir ekilde gerekletirilebilmesi,
tutarl grnm, daha az kod ve daha ksa indirme sresi saylabilir. CSS kullanldnda
ierik tasarmdan ve grnm tanmlayan niteliklerden ayrlr. CSS kullanldnda
ierik tasarmdan be grnm tanmlayan niteliklerden ayrlr. Yerleim dzeni iin
CSS kullanmann dier avantajlar arasnda, eriilebilirlik dzeyinin artrlmas, esneklik
ve verimden de bahsetmek gerekir. Bir Web sayfasnda kullanlacak yerleim aralar
konusunda karar verirken en nemli noktalar, oluturulmas dnlen yerleim
dzeni iin en iyi aracn hangisi olduunu ve ziyaretilerin byk ksmnn eriebilecei
eylerin neler olduunu belirlemektir. Sayfalarnz farkl Web tarayclarnda ve
iletim sistemlerinde nizleyerek semi olduunuz yerleim dzeni ynteminin nasl
grndn test etmeyi de sakn ihmal etmeyin.
imdiki uygulamada, bu derste daha nce oluturduunuz description kuraln
dzenleyecek ve description stilini kullanan ierik iin temel tipte bir kutu elde
edeceksiniz. index.html belgesinde, belgenin st ksmndaki paragraf ieren <div>,
description kuraln kullanmaktadr.
1. CSS Styles panelindeki All dmesine tklayn. All Rules listesinden description kuraln
sein ve CSS Styles panelinin alt ksmnda yer alan Edit Style dmesine tklayn.
Edit Style dmesi
imdi bu sayfada yer alacak basit kutunun grnmn tanmlamak iin kullanlacak snf
hazrlamaya balyorsunuz.
2. Category listesinden Backgroundu sein. Background color renk seicisinden
beyaz rengi (#FFFFFF) sein.
160 DERS 4
Bylece sar renkli arka plann st ksmnda grnecek olan stunun arka plan rengini
tanmlam oldunuz.
3. Category listesinden Box sein. Width metin alanna 90 yazn ve l birimi
mensnde %nin seili olduundan emin olun. Padding alanndaki Top metin
alanna 8 yazn. Same For All onay kutusunun iaretli olmas ve l birimi
mensnde pixelsin seili olmas gerekir (bunlar varsaylan ayarlardr).
Box kategorisinde, oluturduunuz tayc eleman kontrol etmede kullanabileceiniz

pek ok seenek bulunur. Burada, oluturacanz kutunun geniliini, kullanlabilir
Web taraycs geniliinin % 90 olacak ekilde tanmladnz. Padding ayarlar kutunun
kenaryla ierii arasnda belirli miktarda bir boluk yaratr. Margin ayarlar, Web
taraycsnn kenarlar ve kutunun kenarlar arasnda oluacak boluu ve kutuyla kutunun
dnda oluturulabilecek elemanlarn arasndaki boluu tanmlar.
4. Category listesinden Border sein. Style alanndaki Top mensnden Solidi

sein. Width alannda Same For All onay kutusunu iaretli olarak brakn
ve metin alanna 1 yazn. Sonra da l birimi mensnde pixelsin seilmi
olduundan emin olun. Color alanndaki Top renk seicisinde siyah rengi
(#000000) sein ve Same For All onay kutusunu iaretli olarak brakn. OK
dmesine tklayarak CSS Rule Definition iletiim kutusunu kapatn.
Border kategorisindeki seenekler kutunun nasl grneceini belirlemenizi salar.

Stil tanmyla ilgili toplam sekiz kategori vardr. u ana kadar bunlarn beini
kullandnz. Type, Background, Box, Block ve Border. Dier kategori
unlardr:
List: Sral ve srasz listelerin biimlendirilmesini kontrol etmek iin eitli
seenekler ierir.
Positioning: Elemanlarn yerletirilecei konumlarla ilgili baz seenekler
ierir. Dreamweaver konumlandrma seenei kullanlan her eleman bir

katman (Layer) olarak deerlendirir. (Katmanlar Ders 9da greceiz.)
Daha karmak yerleim dzenleri iin CSSi ve katmanlar bir arada
kullanabilirsiniz.
Extensions: Bazlar ok fazla desteklenmeyen ilave seenekler ierir.
162 DERS 4
u aamada paragraf ieren <div> siyah d izgili beyaz bir arka plan grntlemektedir.
5. mleci kutunun kenarlnn zerine getirin. izgi krmzya dntnde (bu
iaret <div>i seebileceinizi gsterir) kenarla tklayn.
Etiket Seicideki vurgulanm <div.description>dan da anlayabileceiniz gibi <div>

seili hale gelecektir.
Seilen <div>, etkilenen CSS niteliklerini gstermek iin bir dizi grsel yardmc (Border
zelliini gsteren dz mavi d izgi ve Padding zelliini gsteren ve kenarlk ile metin
arasnda bulunan glgeli alan gibi) kullanr.
6. View > Visual Aids > CSS Layout Backgrounds komutunu sein.
Dreamweaver, bir belgenin CSSle biimlendirilen alanlarn gstermek iin renk

kodlamasndan faydalanr ve her div, yerleim dzenleri olutururken onlar ayrt
etmenizi kolaylatrmak iin farkl bir renk kullanr. zelliklerin deerleri (font ve arka
plan renkleri gibi) bu modda geici olarak gz ard edilir.
Sadece Dreamweaverda bulunan bu grsel yardmc, sayfann Web taraycsnda nasl

grnecei hakknda bir fikir vermez.
7. View > Visual Aids > CSS Layout Backgrounds komutunu seerek CSS Layout
Backgrounds grsel yardmcsn kapatn. index.html ve sangha.css belgelerini
kaydedin ve index.html belgesini Web taraycsnda nizleyin.
Artk elinizde ierii evreleyen bir kutu var. Bu yerleim dzeni bir harici stil sayfas ile
oluturulduu iin, tutarl bir grnm elde etmek zere bunu baka pek ok belgeye
kolayca uygulayabilirsiniz. Tablo kullanmadan daha karmak yerleim dzenleri
oluturmak iin bunun gibi tekniklerden faydalanabilirsiniz.
Her iki dosyay da kapatabilirsiniz.
164 DERS 4
CSSle Tek Banza aln

Kitabn geri kalan ksmnda grnm ve yerleim dzenini kontrol etmek iin CSS
stilleri oluturmaya ve bunlar dzenlemeye devam edeceksiniz. lave uygulama
yapmak iin, bu derste rendiiniz teknikleri kullanarak kendi harici stil sayfalarnz
oluturabilir ve bunlar daha nceki Tek Banza blmlerinde kendi siteniz iin
oluturduunuz sayfalara balayabilirsiniz. Ayrca Dreamweaverda rnek ve balang
sayfas olarak verilen eitli CSS belgeleriyle de bunlar kendi Web sitenizdeki sayfalara
veya Yoga Sangha proje sitesinin balang sayfalarnn kopyalarna uygulayarak
denemeler yapabilirsiniz. Baka stil sayfalarn kurcalamak, CSSle neler yapabileceinizi
grmek ve kendi sayfalarnzda kullanabileceiniz farkl teknikleri renmek iin
kullanabileceiniz faydal bir yaklamdr.
1. File > New komutunu sein ve ardndan New Document iletiim kutusunun
General ksmnda Page Designs (CSS) kategorisini sein. Page Designs
listesinden Halo Left Nav gibi bir stil sayfas sein. Create dmesine tklayn.
Dreamweaver yeni belgeyi oluturacak ve bu belgenin kaydedilmesini istediiniz konumu

belirtmenizi isteyecektir. Baz balang sayfalar, otomatik olarak sitenize kopyalanacak
resim dosyalar gibi baz dosyalarn kullanmn gerektirebilir. Gerekli dosyalarn sitenize
kopyalanmas ilemi srasnda HTML belgesinde hazrlk nitelii tayan bir ierik
grebilirsiniz. Dosyalar kopyalandktan sonra bu grnt yenilenecektir.
Halo Left Nav stil sayfalar, aadaki rnektekine benzeyen bir sayfa oluturacaktr. Neye
benzediini grmek iin bu sayfay Web taraycnzda nizleyebilirsiniz.
Halo, aralarnda HTML ve Flash elemanlar ile yerleim dzeni
seeneklerinin de bulunduu bir dizi bileenden biridir ve Macromedia
tarafndan yaratlan bir arabirim tasarmdr. Halo ayn zamanda Web
gelitiricilerine pozitif kullanc deneyimi yaratma konusunda yardmc olmak
iin tasarlanan Studio programlarnn entegre bir bileenidir.
166 DERS 4
nceki uygulamada kullandnz CSS Layout Background grsel yardmcsn

atnzda, yerleim dzenini oluturmak iin birlikte alan stilleri grebilirsiniz.
2. Bu derste faydalandnz teknikleri kullanarak kendi siteniz iin stiller oluturun.
Stilleri olutururken dahili ve harici stillerin arasndaki farklar aklnzdan karmayn ve

ne tip stiller oluturduunuza dikkat edin. erikteki hiyerarik farkllklar grsel olarak
ayrt etmeyi salayan stiller oluturmaya aln.
Ne rendiniz?
Bir arka plan rengi ve font tanmladnz (Sayfa 110120).

Ayn metin biimlendirme zelliklerini hzl ve kolay bir ekilde kullanabilmek iin
bir dahili stil oluturdunuz (Sayfa 121122).
Farkl metin biimlendirme tiplerine uygulanabilen bir snf oluturdunuz
(Sayfa 123129).
Dahili stilleri dier belgeler tarafndan da kullanabilmeleri iin harici stillere
dntrdnz (Sayfa 130131).
Ayn metin biimlendirme ayarlarn kullanmak iin farkl bir belgeyi harici bir stil
sayfasna baladnz (Sayfa 131134).
Metinlerin grnmnn Web sitesinin tamamnda tutarl olmasn salamak
iin kullanlabilen ve metin biimlendirme zelliklerini tanmlayan harici stiller
oluturdunuz (Sayfa 134144).
HTML etiketlerini yeniden tanmlayarak mevcut bir stil sayfasna birden fazla stil
eklediniz (Sayfa 144148).
Harici bir stil sayfasnda yer alan bir stili dzenleyerek bunun kendisine balanan
btn belgeleri etkilemesini saladnz (Sayfa 149159).
Bir div ve bir CSS snf kullanarak temel tipte bir kutu oluturdunuz (Sayfa 159167).
Resimlerle
almak
Resimler izleyicilerinizin dikkatini ekmede ve Web sitenizde vermeyi dndnz

mesaj etkin bir ekilde iletmede nemli bir rol oynayabilir. Bu derste Yoga Sangha
proje sitesi iin oluturduunuz sayfalara eitli resimler ekleyeceksiniz. Sre boyunca
resimler iin kullanlan farkl dosya formatlarn tanyacak, CSS araclyla resimlerin
konumlarn nasl kontrol edeceinizi ve resim elerini metinlerle nasl bir araya
getireceinizi reneceksiniz.
Macromedia 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. Assets
paneli, sitenizde kullandnz ya da kullanmanz gereken btn resimler iin kataloglar
hazrlamanz salayarak resimlerin ynetimini basitletirir.
Bu derste
sayfalarnza
metinlerle birlikte
resim eklemeyi
renirken
buradakine
benzeyen bir sayfa
oluturacaksnz.
Bu dersin sonunda elde edilen almay grmek isterseniz, Lesson_05_Graphics

klasrndeki Completed alt klasrnde yer alan index.html dosyasn an.
Neler reneceksiniz?
Resim formatlarn tanyacak ve aralarndaki farklar greceksiniz.

Bir sayfaya eitli resimler ekleyeceksiniz
Resimlerinizin zelliklerinde deiiklik yapacaksnz
Bir sayfadaki resimlerin konumunu deitireceksiniz
Resimlerinize isim ve alt nitelikleri atayacaksnz
Assets panelini kullanarak resimleri yneteceksiniz
Metnin belirli bir blmn bir resmin etrafna saracaksnz
Resim yer tutucularn kullanacaksnz
Temel resim dzenleme aralarn kullanarak resimlerde ayarlamalar yapacaksnz
Metinleri resimlere gre hizalayacaksnz
Yaklak Sre
Ders Dosyalar
Ortam Dosyalar:
Lesson_05_Graphics/Images/green-studio.jpg
Lesson_05_Graphics/Images/studio-om.jpg
Lesson_05_Graphics/Images/teaching.jpg
Lesson_05_Graphics/Images/ys_bkg_main.gif
Lesson_05_Graphics/Images/yoga_sangha-title.jpg
Balang Dosyalar:
Lesson_05_Graphics/index.html
Lesson_05_Graphics/about/studio.html
Tamamlanm Proje:
Lesson_05_Graphics/Completed/index.html
170 DERS 5
Bir Arka Plan Resmi Kullanmak

Buradaki uygulamada, belirli bir sayfaya bir arka plan resmi ekleyeceksiniz. Arka plan
resmi olarak sayfanzn zerinde tarayc penceresinin genilii ve ykseklii boyunca
tekrarlanarak denen kk bir resim kullanabilirsiniz. Denmi bir arka plan resminin
sayfalarnzdaki kaydrma ubuklarnn grnts (ya da bunlarn olup olmamas)
zerinde herhangi bir etkisi yoktur. Ayrca arka plan resmi olarak daha byk resimler
kullanabilir ve bunlarn yerleimini, yatay olarak m yoksa dey olarak m veya her iki
ekilde de mi deneceklerini ya da denip denmeyeceklerini kontrol etmek iin
CSSten (Cascading Style Sheets) faydalanabilirsiniz. Arka plan resimleri, CSS destei
olmayan eski Web tarayclarnda otomatik olarak denirler.
Sayfalarnz iin hem bir arka plan rengi, hem de bir arka plan resmi tanmlayabilirsiniz.
Yava balantlarda ya da eski yava Web tarayclarnda nce arka plan rengi
grntlenebilir. Bu yzden, bir arka plan resmi kullanmay dnyor olsanz bile bu
yaklam kullanmak iyi bir fikirdir. Arka plan resmi yklendikten sonra bu resim ekranda
kamaya devam ederek arka plan renginin zerini kaplar.
Bu uygulamada, nceki derslerde rendiiniz beceri ve teknikler
kullanlarak oluturulan XHTML dosyalaryla alacaksnz. Fazladan
uygulama yapmak isterseniz, balang sayfalarn yol gsterici olarak
kullanarak bu dosyalar yeniden oluturabilirsiniz.
1. Lesson_05_Graphics klasrndeki index.html dosyasn an. CSS Styles
panelindeki All Rules listesini kullanarak sangha.css stil sayfasndan body
kuraln sein ve panelin alt ksmnda yer alan Edit Style dmesine tklayn.
Edit Style dmesi
Bu index.html belgesi, nceki derste oluturduunuz sangha.css stil sayfasn

kullanmaktadr. Bir arka plan resminin sitedeki dier belgelerde de kullanlabilmesini
Resmlerle almak 171
salamak iin ilgili stil sayfasnn dzenlenmesi gerekir. body kural, belgenin ieriinin
bulunduu <body> etiketini yeniden tanmlar.
Eski siteler zerinde alrken nitelikleri dorudan <body> etiketinin iinde tanmlayan
belgelerle karlaabilirsiniz. Arka plan ve balant renklerini tanmlamak iin kullanlan
bu yntem artk benimsenmemektedir ve bu yntemin kullanlmasndan kanarak
imdiki uygulamada greceiniz gibi stil sayfalarnn kullanm tercih edilmelidir.
Page Properties iletiim kutusunu kullanarak bir arka plan resmini dorudan
tek bir sayfaya eklemeniz de mmkndr. Bu yntemde, sadece uyguland
belgede kullanlabilen bir dahili stil oluturulur. Bunun iin Modify > Page
Properties komutunu ve ardndan Appearance kategorisini sein. Arka plan
resminin yerini bulmak iin Browse dmesini kullanabilir ve arzu ederseniz
bir yineleme (Repeat) yntemi seebilirsiniz. Page Properties iletiim
kutusuna hzl bir ekilde erimek iin Cmd+J (Macintoshta) ya da Ctrl+J
(Windowsta) klavye ksayolunu kullann. Ayrca dorudan Appearance ksmn
kullanarak sayfann kenar boluklarn da kontrol edebilirsiniz. Kenar boluu
miktarnn arka plan resmine bal olduu durumlarda bu zellik iinize
yarayabilir. rnein bu uygulamada zerinde altnz belge iin bir kenar
boluu tanyarak metnin sayfann sol tarafndaki dey ubuun stne
gelmesini engelleyebilirsiniz. Ayrca body etiketinin margin niteliini kullanarak
sayfalarn kenar boluklarn harici stil sayfalarnda da tanmlayabilirsiniz.
2. Background kategorisinde Background image metin alannn yannda bulunan
Browse dmesine tklayn. Lesson_05_Graphics klasrnn Images alt
klasrnde yer alan ys_bkg_main.gif resmini bulun. Bu resmi sayfann arka
plan olarak tanmlamak iin Choose (Macintoshta) ya da Select (Windowsta)
dmesine tklayn.
Background kategorisi otomatik olarak seili durumda olabilir, nk body etiketine bir
nitelik, yani soluk sar arka plan rengi (#FFFFCC) zaten uygulanm durumdadr.
172 DERS 5
Bir yol ad ya da yolun kendisi, ilgili dosyann konumunu tanmlar. u anda Background
image metin alannda ys_bkg_main.gif resmine giden yol grntlenmektedir; bu
yolun gsterdii konum, sangha.css belgesine gre tanmlanmtr. Bir arka plan resmini
eklerken dosyanz kaydetmediyseniz, metin alannda resmin sabit diskinize gre
tanmlanan yol adnn tamam grntlenir. Siz dosyanz kaydedene kadar Dreamweaver
bu tr referanslar oluturamaz. Bu nedenle geerli bir balant yerine resmin sabit
diskinizdeki konumuna bal bir yol ad kullanlr. Dosya kaydedildiinde yol ad
gncellenerek yerini resmin, kendi iinde bulunduu belgeye bal konumuna brakr.
Bununla birlikte, dosyay, herhangi bir resmi (hatta arka plan resimlerini) aktarmadan
nce kaydetmek en iyisidir. Sabit diskinize gre tanmlanan yol adlar uzak sunucuda
ie yaramaz. Sayfanz kaydetmeden resim eklediinizde balants kopmu resimler
kullanma riski sz konusudur.
Select Image Source iletiim kutusunda setiiniz resim yerel sitenizin
dnda bir yerdeyse Dreamweaver bir uyar penceresi grntler ve size
dosyay sitenize kopyalama seeneini sunar. Sitenizde kullandnz
sayfalar ve elemanlar (HTML, resimler, multimedya vs) genellikle yerel kk
klasrnzde bulunur. Mutlak yollar (absolute paths) ad verilen teknik
sayesinde yerel kk klasrnzde bulunmayan ama Internette (kendi
sitenizde ya da baka bir yerde) belirli bir konumda bulunan elemanlar da
kullanabilirsiniz. Ders 4te grdmz bu teknik bannerlarda sk sk
kullanlr. Bu tr eler Dreamweavern belge penceresinde
grntlenmedii iin bunlar grebilmek iin sayfanz ya da sayfalarnz
Web taraycnzda nizlemeniz gerekir.
Arka plan resimlerinizi Macromedia Fireworks veya Adobe Photoshop gibi bir resim
editrnde oluturabilirsiniz. Byk resimlerin sayfann boyutunu ve indirme sresini
ciddi lde artrabileceini aklnzdan karmayn. Bu yzden mmkn olan her yerde
daha kk resimler kullanmaya aln. Sayfalarnz ne kadar kk olursa, yklenmeleri
de o kadar hzl olur ve ziyaretilerinizin sitenizde kalmas, gezinmesi ve daha sonra
sitenizi tekrar ziyaret etmesi olasl da yine ayn oranda artar.
Eer birden fazla arka plan resmi arasndan seim yapacaksanz, Apply
dmesini kullanarak arka plan resmini Page Properties iletiim kutusunu
kapatmadan sayfanzda grebilirsiniz.
Bir arka plan resmini silmek istiyorsanz, Page Properties iletiim kutusunu ap ilgili
dosyann adn Background image metin alanndan silebilir ya da CSS panelinin
Properties listesinde background-image zelliini bulup bunun deerini deitirebilir
ya da silebilirsiniz.
Resmlerle almak 173
3. Repeat mensnden repeat-yyi sein ve OK dmesine tklayarak Page

Yaptnz deiiklikler belgeye uygulanacak ve ys_bkg_main.gif arka plan resmi belge

penceresinde dey olarak denecektir. Belge penceresini saa doru, arka plan resminin
bittii noktay geecek ekilde geniletirseniz, son derste uyguladnz arka plan renginiz
grebilirsiniz.
Aada grdnz gibi arka plan resminin repeat (tekrarlama) zelliini kontrol etmek
iin kullanabileceiniz eitli seenekler mevcuttur.
repeat-y seenei, seilen arka plan resmini dey olarak der
repeat-x seenei, resmi yatay olarak der
repeat seenei, resmi hem dey, hem de yatay olarak der
no-repeat seeneinde resim denmez
Siz bir repeat zellii tanmlamazsanz, varsaylan durumda arka plan resimleri hem yatay,
hem de dey olarak denir.
Bununla ilgili dier seenekler unlardr:
Attachment seenei arka plan resminin sabitlenip, sabitlenmeyeceini veya sayfann
geri kalan ksmyla birlikte kaydrlp kaydrlmayacan belirlemenizi salar. Bu
zellik tekrarlanmayan arka plan resimlerinde kullanlr.
Horizontal position ve Vertical position seenekleri arka plan resminin konumunu
kontrol etmenizi salar. Konum ayarlama ilemi, yatay olarak yerletirme iin left,
center ya da right seeneklerinin, dey olarak yerletirme iin de top, center ya da
bottom seeneklerinin ayarlanmasyla veya saysal deerler ve piksel (pixels) gibi bir
l birimi araclyla tam bir konum tanm yaplarak gerekletirilir.
174 DERS 5
Sayfaya Resim Yerletirmek

Resimler, metin gibi dier ierik bileenleriyle birlikte dorudan belgenin gvde ksmna
yerletirilebilir. Bu uygulamada belgelerinize resim eklemeye balayacaksnz.
Bu kitapta alacanz btn resimler, Internette kullanlmak zere GIF ve JPEG
formatnda kaydedilmitir. Hibir resmi tekrar kaydetmeniz veya optimize etmeniz
gerekmez.
nternette Kullanlan Resim Formatlar

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 Macromedia 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.
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.
Resmlerle almak 175
1. Ekleme noktasn belgenin en st ksmnda bulunan Yoga Sangha balnn

nne yerletirin ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Ekleme noktasn yeni bo satrn iine yerletirin. Insert ara ubuunun Common
kategorisinde yer alan Images men dmesine tklayn ve Image sein.
Images: Image dmesi
Select Image Source iletiim kutusu alacaktr. Bu iletiim kutusunu kullanarak sayfanza
resim ekleyebilirsiniz. Alternatif olarak Insert > Image komutu da kullanlabilir.
Windows kullanclar iin Preview images onay kutusu, gz atma esnasnda
tkladnz resimlerin kk rneklerini grmenizi salayan kullanl bir
seenek sunar. Bu seenek iaretlendiinde resimler Select Image Source
iletiim kutusunda boyutlar, dosya byklkleri ve yaklak indirilme
sreleriyle birlikte grntlenirler.

Macintoshta Preview images onay kutusu yoktur. Eer stunlu grnt

modundaysanz, bir resmi setiinizde Select Image Source iletiim
kutusunun sa panelinde resmin boyutlar, dosya bykl ve yaklak
indirilme sresiyle birlikte resmin nizlemesini grrsnz.
2. Lesson_05_Graphics/Images klasrndeki yoga_sangha-title.jpg dosyasn

bulun.
Select Image Source iletiim kutusu eitli seenekler ierir. Resim almak istediiniz
klasr meny kullanarak (bu men Macintoshta isimsizdir ve Windowsta da Look In
[Konum] olarak adlandrlmtr) ve men ile grnm aralarnn alt ksmnda yer alan
dosya ve klasr blmnden seim yaparak tanmlayabilirsiniz. Macintosh kullanclar
hiyerarik bir grnmden faydalanarak farkl dosya ve klasr seviyelerine eriebilir.
Windowsta grnm belirli dosya tipleriyle snrlandrmak iin kullanlabilen bir Files
of type (Dosya tr) mens ve seilen dosyann adn (normalde uzant olmadan)
grntleyen bir File name (Dosya ad) metin alan vardr.
URL metin alannda, seilen resme erimek iin index.html belgesi tarafndan kullanlacak
yol grntlenir. URL metin alannn altnda Relative to mens yer alr ve varsaylan
durumda Document olarak ayarlanmtr. Relative to seenei Dreamweavern resimlere
nasl gndermede bulunacan belirlemenizi salar: Belgeye bal olarak (Document
seenei) ya da sitenin kk klasrne bal olarak (Site Root seenei). Belgeye bal
gndermelerde Dreamweaver resme ait yolu, HTML belgenizin resim dosyasna bal
greceli konumunu temel alarak oluturur. Relative to mensnde Document seenei
176 DERS 5
iaretlendiinde mennn sa tarafnda resim eklediiniz belgenin dosya ad belirir

(burada index.htmli grrsnz). Site root (greceli gndermede bulunma) seenei
kullanldnda resmin yolu, seilen resmin sitenin kkne (yerel kk klasrnn en
st dzeyi olarak da bilinir) bal greceli konumu temel alnarak oluturulur. Site root
seenei iaretlenirse, mennn sanda sitenin ad grnr. Genelde belgeye bal yollar
ve balantlar kullanmanz gerekir. ok byk bir siteniz varsa ya da sayfalar sk sk
tamanz gerekiyorsa Site Root seeneini kullanmak isteyebilirsiniz. Resimler iin kitap
boyunca sadece belgeye bal yollar kullanacaksnz.
Select Image Source iletiim kutusunda dinamik sitelerle kullanlmak zere tasarlanan
eitli ilave seenekler greceksiniz. Select File Name From blmnde Macintosh
kullanclar bir Data Sources dmesiyle bir de Sites and Servers dmesi greceksiniz.
Select File Name From ksm Windowsta st iletiim kutusunun st tarafndadr ve
iki radyo dmesi (File system ve Data sources) ile birlikte bir de Sites and Servers
dmesi iermektedir. File System, Yoga Sangha proje sitesi iin ve bir sunucu teknolojisi
(ColdFusion, ASP, JSP ya da PHP gibi) kullanmayan ve buna benzeyen siteler iin hem
Macintoshta, hem de Windowsta varsaylan seim yntemidir. Data Sources ve Sites and
Servers seenekleri belgelerin bir uygulama sunucusunda altrld dinamik siteler iin
kullanlr. Kitaptaki derslerde bu seenekleri kullanmanza gerek yok, nk verilerlere
ynetilen dinamik bir site oluturmuyorsunuz.
Resmlerle almak 177
3. Choose (Macintoshta) ya da OK (Windowsta) dmesine tklayn. Image Tag

Accessibility Attributes iletiim kutusundaki Alternate Text metin alanna Yoga
Sangha yazn ve OK dmesine tklayn.
Alternate Text seenei, kullanclarn Web taraycsnda resim grntleme zellii devre
d brakldysa, kullanclarn Web taraycs resim grntleyemiyorsa, belirli bir resim
yklenemiyorsa veya kullancnn resimleri grmesini engelleyen baka bir durum sz
konusu ise, byle durumlarda grntlenecek olan metni tanmlamanz salar.
Alternatif metin, resmin yazl edeeri olmaldr, yani sz konusu ilevi tanmlamaldr.
rnein sitenin gezinti sistemi iin nem tayan btn resimlerde alternatif metin
kullanmak gerekir. Alternatif metin eklemek faydal bir zelliktir, nk kullanclarn Web
taraycsnda resim grntleme zellii devre d brakldysa ya da kullanclarn Web
taraycs salt metin tipinde ise, bu sayede normalde karacaklar bilgilerden bazlarn
grebilirler. Ayrca grme engelli insanlar genellikle okuyucu (reader) ya da konuma
rnekleyici (speech synthesizer) ad verilen ve Web sayfalarnn ieriini sesli olarak
ileten eitli programlar kullanrlar. Byle durumlarda resimlere ait alternatif metinler
sesli olarak okunur. Birok Web taraycsnda kullanc imleci resmin zerine getirdiinde
ilgili alternatif metin grntlenir. Kullandnz alternatif metinler ne kadar aklayc ve
ayrntl olursa, sitenizin kullanclar iin de o kadar faydal olurlar.
Kimi zaman sadece grsel olarak ilev gren ve sayfanzn ierii asndan nemli
szcklerin ya da baka betimleyici elerin grntlenmedii resimler kullanabilirsiniz.
Grme engelli kullanclarn sitenizde gezinirken ilerini zorlatrabilecek ilevsiz resimlere
rnek olarak alternatif metinlerle uygun olmayan ekilde tanmlanan boluk resimlerini
(belirli bir yer igal eden grnmez resimler) gsterebiliriz. Bu tip resimler iin Alternative
metin alannn sandaki men dmesine tklayarak <empty> seeneini iaretlemelisiniz.
Alkasz alternatif metinler kullanmaktan kann; bu yarardan ok zarar getirir.
Bu uygulamada tanmladnz alternatif metin, resimde gsterilen metnin aynsdr.
Alternatif metin, resimleri tanmlayan <img> etiketinin bir niteliidir.
Alternatif metin, ilgili resim seildikten sonra Properties denetisi araclyla
deitirilebilir. <empty> seeneini ieren men Properties denetisinde de
mevcuttur.
178 DERS 5
Section 508 ve WCAGye

Uygun Siteler Oluturmak
Eriilebilirliin (accessibility) amac, mmkn olan en fazla kullancnn eriebilecei siteler
yaratmaktr. Aada aklamalar verilen Section 508 ve Web erii Eriilebilirlik Ynergeleri
(Web Content Accessibility Guidelines - WCAG), Internet zerinden eriilebilirlik konusuyla ilgili
ihtiyalar temel almaktadr.
Section 508, 1973te karlan (Amerika Birleik Devletlerinde) Rehabilitasyon Kanununda
yaplan bir deiikliktir. Buna gre A.B.D.deki federal brolar, Internet gibi teknolojilerle
kullanma sunulan ierie erimek iin btn kullanclarn eit frsatlara sahip olmasn salayarak
engelli insanlarn ihtiyalarnn dikkate alnmasn salamak zorundadr. Section 508, engelli
olmayan insanlarn kullanabildii mukayese edilebilir bilgi kaynaklar ve servislerin sunulaca
engelli insanlar iin gereken standartlar tanmlar. Section 508 her ne kadar zel sektr iin
zorunlu olmasa da, btn Web sitelerinde olabildiince uyumlu kodlar kullanma alkanlnn
edinilmesi pek ok sebepten dolay nemlidir. Grme zayflndan renk krlne hatta tamamen krle kadar eitli bedensel engeller, nfusun ve dolaysyla kullanclarnzn nemli bir
blmn etkilemektedir.
WCAG, eriilebilirlikle ilgili pek ok sorunun zm iin W3C tarafndan gelitirilmitir ve
eriilebilir siteler gelitirmeyle ilgili ak ve anlalr bir ynerge paketi olarak ilev grmektedir.
Eriilebilir siteler tasarlamak WebTV, mobil telefonlar ve PDAler asndan da nemlidir. Konuyla
ilgili ayrntl bilgi iin http://www.w3.org/TR/WAI-WEBCONTENT/ adresini ziyaret edebilirsiniz.
Bu sorunun bir zm, sitenizin bir alternatif, salt metin tabanl versiyonunu oluturmaktr.
Ama ayn zamanda bu zm mmkn ya da gerekli olmayabilir (zellikle de sunulan ierik ve
hizmetlerle ilgili sorunlar, kullanlabilir alan, ilve sayfalarn oluturulmas iin gereken zaman
ve kaynak ile sitenin devamlln salamak iin artan ihtiyalar dikkate alndnda). Salt metin
tabanl bir sayfaya erimek (oluturulurken kullanlan tekniklere ve ieriine bal olarak) mmkn
olmayabilir. Salt metin tabanl sitelerin dier bir dezavantaj da, genellikle asl siteye gre daha
az bilgi iermeleri ve/veya ilevsellik anlamnda asl siteye gre daha yetersiz olmalardr.
Tek bir site kullanmak ve buna eriilebilirlik zellikleri eklemek genelde en iyi zmdr. Byle bir
site tek bir konumda mmkn olduunca fazla (birbirinden farkl) kullanc iin eitli seenekler
sunabilir, ayrca ierii kopyalama ve sitenin devamlln salama gibi ilemleri iki kez yapma
zahmetinden kurtarr. Eriilebilirlik sorunlarn zmek iin ayn sayfalar oluturmak zorunda
kalmadan ve sayfa tasarmnzn grsel zelliklerine zarar vermeden faydalanabileceiniz baka
birok entegre zm mevcuttur. Dreamweaver; CSS, alternatif metin, aklamalar ve zetler
gibi bileenlerin kullanmyla eriilebilir Web sayfalar oluturmanz salayan eitli basit yntemler sunar.
Eriilebilirlikle ilgili mesajlar etkinletirmek ya da devre d brakmak iin

(Windowsta) komutunu ve kategori listesinden de Accessibilityyi sein.
Eriilebilirlik nitelikleriyle ilgili mesaj almak istemediiniz btn elemanlarn
iaretini kaldrn.
Resmlerle almak 179
4. Heading 1 ile biimlendirilen Yoga Sangha metninin bulunduu satr silin ve

belgeyi kaydedin.
Bu bala artk gerek yok, nk resim proje sitesinin ismini ieriyor ve alternatif metin
de tanmland. Bu metnin ve bulunduu satrn silinmesi gerekiyor.
yoga_sangha-title.jpg resmi bir JPEG olarak kaydedildi; bunun sebebi
metnin arkasndaki geni ton araldr. Metni oluturan satrlarn kalitesini
korumak iin resim yksek kaliteli bir JPEG olarak kaydedildi ve bu da dosya
boyutunun byk olmasna sebep oldu. Daha dk kalitede bir JPEG
format kullanlsayd, ayn resimde daha fazla JPEG kalnts (Yoga Sangha
metni gibi dz renkli alanlarda daha sk rastlanan gereksiz verilerin atld
yerlerdeki kk blok eklinde kareler) olacakt. Burada fotografik alanlar ve
metnin ihtiya duyduu noktalar arasndaki dengeyi salamak iin en iyi
seenek JPEGtir.
Resimleri Yeniden Boyutlandrmak ve Tazelemek

Dardan bir resim aktardnzda resmin genilii ve ykseklii Properties denetisinde
grntlenir ve otomatik olarak koda yerletirilir. Bu da Web taraycsna sayfann
yerleim dzenini tanmlamak iin ihtiya duyduu bilgileri verir. Bu seenek,
sayfalarnzn yklenme hznda fark yaratabilir.
1. yoga_sangha-title.jpg resmini sein ve Properties denetisinde yer alan W
metin alanndaki deeri 220 piksel, H metin alanndaki deeri de 40 piksel
yaparak genilii ve ykseklii deitirin.
Deiiklii uygulamak ve grnty tazelemek iin Return (Macintoshta) ya da Enter

(Windowsta) tuuna basmanz veya belge penceresinin iinde bir yere tklamanz gerekir.
<img> (image - resim) etiketinin yeni genilik ve ykseklik nitelikleri, asl resim
dosyasnn bykln deitirmeden resmin daha kk boyutlarda grntlenmesini

salar. Seilen resmin dosya boyutunun (Properties denetisinde grntlenir)
deimediine dikkat edin. Btn resim dzenlemelerini (netlik, resim kalitesi ve dosya
byklnn ayarlanmas da dahil olmak zere) tek bir resim editrnde yapacak
ekilde ayarlamann nemli avantajlar vardr. Ayn resmi bir resim editrnde kltr
ve Internet iin yeniden optimize ederseniz dosya boyutu daha kk ve resim kalitesi de
daha yksek olacaktr.
180 DERS 5
Dosya boyutu Web sayfalar iin nemli bir zelliktir. Dosya boyutu ne kadar
kkse, resimleriniz o kadar hzl yklenir. Ve sayfalarnz ne kadar hzl yklenirse,
ziyaretilerinizin sklp baka bir siteye gitme olasl da o oranda azalacaktr.
2. Seili durumdaki resmin kenarl zerindeki seim tutamalarndan (siyah
kareler) birine tklayn. Yeniden boyutlandrmak zere imleci srkleyin ve resmi
orijinalinden daha byk hale getirin.
Genilik ve ykseklik zellikleri otomatik olarak gncellenecektir. Yeni boyutlarn

kaln olarak yazldna dikkat edin. Bu kaln biimlendirme ilgili resmin yeniden
boyutlandrldn gsterir. Kimi zaman bir resmi yanllkla boyutlandrabilirsiniz. Bu kaln
biimlendirme zelliini grerek durumu fark edebilirsiniz.
Resmin boyut orann korumak isterseniz resmin sa alt kesindeki seim
tutamalarn srklerken Shift tuunu basl tutun.
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 (Macromedia
Fireworks ya da Adobe Photoshop gibi) boyutlar ayarlamanz gerekecektir.
3. Properties denetisinde W ve H metin alanlarnn hemen sanda yer alan Reset
Image To Original Size dmesine tklayn.
Reset Image To Original Size dmesi Resample (grnty tazeleme) simgesiyle gsterilir.
Bu dme W (Genilik) ve H (ykseklik) metin alanlarn birletiren izgilerin ortasnda yer
alr. Resample simgesi ve birletirme izgileri, resmin boyutlarnn deitirildiini gsteren
dier bir iarettir. Bu simge, sadece resmin boyutlarnda deiiklik yapldnda belirir.
Simgeye tkladnzda resim orijinal byklne getirilir. Genilik ve ykseklik deerini
gsteren saylarn dz metne dndne dikkat edin. Bu da resmin orijinal bykle
ayarlandn gsterir.
ok byk resimler ya da dier sunucularda yer alan resimleri kullanrken dk
kaliteli bir kaynak resmi kullanarak ziyaretilere grsel bir ipucu salayabilirsiniz.
Dk kaliteli bir kayna tanmlarken, ilk bata grntlenecek olan daha
dk kaliteli bir resim seersiniz. Daha yksek kaliteli olan resim, indirme
ilemi tamamlandnda belirir. Bir resim seildiinde Properties denetisinde
dk kaliteli kaynak resminin tanmlanmas iin bir Low Src metin alan belirir.
Bir resim semek iin bu metin alannn yanndaki Browse For File Folder isimli
klasr simgesine tklayn. Bu teknii, asl resmin doysa boyutunun byk
olduunu ve bu yzden indirilmesinin kullancnn tahmininden daha uzun
sreceini biliyorsanz ya da resmi yavalad bilinen bir kaynaktan alyorsanz
kullanabilirsiniz. Byle durumlarda kullanlan dk kaliteli kaynak resimleri
genellikle Ykleniyor ya da Loading gibi mesajlar ierir.
Resmlerle almak 181
Resimlerin Yerletirilmesi
Bir belgeye resim yerletirirken bu yerletirme ilemiyle ilgili olarak eitli seeneklerden
faydalanabilirsiniz. Aadaki uygulamada CSS kullanan bir hizalama ayar oluturmak
iin faydalanlan bir yntem gsterilmitir.
1. index.html belgesinde ekleme noktasn At Yoga Sangha, were dedicated to
teaching ifadesinin yer ald satrn bana yerletirin. Lesson_05_Graphics/
Images klasrnde yer alan studio-om.jpg resmini ekleyin.
studio-om.jpg resmini eklerken bu derste daha nce yer alan Sayfaya Resim Yerletirmek
uygulamasnda rendiiniz teknikleri kullann. Varsaylan durumda resim metin
satrnn banda grnr.
Aadaki uygulamalarda CSS kullanarak resmi sola hizalayacak ve metni resmin sa
tarafn saracak ekilde ayarlayacaksnz.
alannda Class sein, Name metin alanna .studioPhoto yazn ve OK
dmesine tklayn. CSS Rule Definition iletiim kutusunda Box kategorisini
sein, Float mensnden lefti sein ve OK dmesine tklayn.
Bir belgedeki her eleman bir kutu (box) olarak deerlendirilir. CSS, kutu kavramn
bir elemann grnmn, konumunu, vs. kontrol etmek iin kullanr. Elemanlar ve
dolaysyla onlar temsil eden kutular blok ya da satrii tipte olabilir ve her kutu baka
kutular ierebilir. Burada kutuyu studioPhoto snfn uygulayacanz satrii resim
elemannn konumunu kontrol etmek iin kullanyorsunuz. Kullanlabilecek konum
ayarlama ynteminden biri Float, dier ikisi de absolute ve fixedtr.
Float seeneini left (sol) olarak ayarladnzda etkilenen blok, yani studioPhoto snfnn
uyguland eleman, onu ieren bloun sol tarafndaki kenar boluuna doru itilir.
182 DERS 5
Belgenin gvde ksm bir kutu olarak deerlendirilir ve baz durumlarda tutucu blok olarak
da dnlebilir. Kayar durumdaki elemann st ksm, iinde bulunduu bloun st
ksmyla hizalanacak ve evreleyen ierik, kayar durumdaki elemann etrafn saracaktr.
3. Belge penceresinde studio-om.jpg resmini ve ardndan Properties
denetisindeki Class mensnden studioPhotoyu sein.
Resim sayfann sol tarafna kayacak ve iinde bulunduu paragraf blounun st ksmyla
hizalanacaktr. Sonraki metin, sa tarafta resmin etrafn saracaktr.
Align Niteliini Kullanmak

Dreamweaver, dey ve yatay hizalama seeneklerinin yer ald bir men araclyla
Properties denetisindeki resim hizalama seeneklerine hzl bir ekilde erimenizi
salar. Bu mendeki tm hizalama seenekleri <img> etiketinin align niteliini kullanr.
align niteliini <img> etiketine uygulanm haliyle kullanmak artk tercih edilmeyen bir
yntemdir, nk bu satrii, sunuma ynelik bir iaretleme eklidir. Ancak eski siteler
zerinde alyorsanz bu yntemin nasl ilediini de bilmeniz gerekebilir. Hizalama
seenekleri resmin bulunduu geerli satr temel alnarak uygulanr. Bu seenekler
aada aklanmtr.
Default. Bu seenekte hibir align nitelii tanmlanmamtr.

Baseline. Resmin altn metin satrnn zerine oturduu taban izgisiyle hizalar.
Top. Resmin stn satrdaki en yksek eyle hizalar (bu e bir resim olabilir).
Middle. Resmin ortasn metin satrnn zerine oturduu taban izgisiyle hizalar.
Bottom. Resmin altn metin satrnn zerine oturduu taban izgisiyle hizalar
(Baseline seeneiyle ayndr).
TextTop. Resmin stn metin satrndaki en uzun boylu karakterle hizalar. Genellikle
Top seeneiyle ayndr (ama her zaman deil).
Absolute Middle. Resmin ortasn metin satrnn ortasyla hizalar.

Absolute Bottom. Resmin altn metin satrnn en ksa boylu karakteriyle hizalar.
Left. Resmi sola kaydrr. Bundan sonra gelen metin, sa tarafta resmin etrafn
sarar.
Right. Resmi saa kaydrr. Bundan sonra gelen metin, sol tarafta resmin etrafn
sarar.
Bu mendeki seenekler Left, Center ve Right hizalama dmeleriyle ayn deildir.
Mendeki hizalama seenekleri <img> etiketine uygulanr, ama yukarda ad geen
hizalama dmesi resimleri ieren blok elemanna (<p> etiketi gibi) uygulanr ve bu
yzden bu etiketin iindeki dier her ey hizalama ileminden etkilenir, nk onlar da
ayn bloun bir parasdr.
Resmlerle almak 183
Bir Resmin Etrafna Kenarlk Eklemek

Kimi zaman bir resmi vurgulamak iin arka plandan ya da onu evreleyen ierikten
ayrmanz gerekir. Bu efekti oluturmak iin kullanabileceiniz yntemlerden biri, resmin
etrafna bir kenarlk (border) eklemektir. Kenarlk, dikkati resmin zerine ekebilir ve
siteye daha ho bir grnm kazandrabilir. Bazen kenarlklar balantlar gstermek iin
de kullanlabilir. Bir kenarl iki ekilde tanmlayabilirsiniz. imdiki uygulamada kenarlk
oluturmak iin CSS kullanacaksnz, fakat image etiketine border nitelii uygulamak
eklindeki ikinci yntemi de reneceksiniz.
1. CSS Styles panelindeki All Rules listesinden studioPhoto kuraln sein ve
panelin alt ksmndaki Edit Style dmesine tklayn.
Kurallar, onlar oluturduunuz srayla, en eskisi listenin en stnde ve en yenisi de en altta

olacak ekilde grntlenirler.
2. CSS Rule Definition iletiim kutusunda Border kategorisini sein. Style
alannda Top mensnden solidi sein, Width alanndaki Top satrna karlk
gelen metin alanna 1 yazn ve Color alannda Top satrna karlk gelen metin
alanna #747E3F yazn. OK dmesine tklayarak iletiim kutusunu kapatn ve
yaptnz deiiklikleri uygulayn.
Dreamweaver resmin etrafna bir piksel geniliinde bir kenarlk ekleyecektir. Border
yani kenarlk ayarnda, Rule Definition iletiim kutusunun varsaylan seenei olan
piksel tabanl l birimi kullanlmaktadr. Kenarln genilik deerini istediiniz gibi
ayarlayabilirsiniz.
184 DERS 5
Bir resme <img> etiketinin border niteliini kullanarak da kenarlk

uygulayabilirsiniz. Bunun iin ilgili resmi sein ve Properties denetisindeki
Border metin alanna istediiniz kalnlk deerini girin. Bir resme balant
atarsanz, kenarlk rengi, Page Properties iletiim kutusunda tanmlanan
varsaylan balant rengi (Link Color) ile ayn olacaktr (eer bir CSS stili
uygulanmadysa, nk bu durumda balant kenarlk renginde herhangi bir
deiiklik yapmaz). Kenarlk rengi, Page Properties iletiim kutusunda
tanmlanan varsaylan metin rengiyle ayn olacaktr. Aadaki rnekte,
Properties denetisi ile uygulanm border niteliine sahip bir resim
gryorsunuz. Buradaki uygulamada yaptnz gibi resim kenarlklarn
tanmlamak iin CSS kullanmak amacyla border niteliini kullanmaktan
kanmak, daha iyi bir yaklamdr.
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.
yoga_sangha-title.jpg resmini sein ve Properties denetisindeki resim ad metin alanna
Yoga yazn.
Properties denetisindeki resim alan belirli bir etiketle gsterilmemitir. Bu alan sol st
kede, resim boyutunun hemen altnda yer alr.
Resim ad metin alan
Resme atadnz isim dahili bir isimdir ve asl olarak davranlar (Behaviors) gibi ilevler
(Ders 8) iin kullanlr. Resimleri adlandrmak art deildir, ama bunun iyi bir alkanlk
olduunu unutmayn. Resim isimlerini ksa tutun, kk harflerle yazn ve boluk ya da
zel karakterler kullanmaktan kann.
Resmlerle almak 185
Assets Panelini Kullanarak Resim Eklemek

Assets 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. Assets paneli ile bu resimleri kolayca takip edebilirsiniz.
1. Files panel grubunda Assets panelini sein. Assets panelinin sol tarafnda yer
alan dme stununun st ksmnda yer alan Images dmesine tklayn.
Assets paneli ya da Files panel grubu grnr durumda deilse, Files panel
grubu iinde Assets panelini amak iin Window > Assets komutunu
kullanabilirsiniz.
Assets panelinin sol tarafnda yer alan dier dmeler sitenizde kullanabileceiniz farkl
varlk (asset) tiplerini temsil eder. Bunlarn iinde renkler de (Colors) yer alr.
Assets paneliyle iki ekilde alabilirsiniz. Paneli Site listesiyle (sitenizdeki btn
resimlerin tam bir listesini ierir) ya da Favorites listesiyle (sadece sizin sk kullanlan
olarak iaretlediiniz resimleri gsterir) grntleyebilirsiniz. Her iki grnmde de
setiiniz bir resmi sayfanza ekleyebilirsiniz.
Images dmesi
186 DERS 5
2. Eer seili durumda deilse (varsaylan durumda seili olmas gerekir) Assets
panelinin st tarafndaki Images:Site seeneine (Images dmesinin sanda
yer alr) tklayn.
Yoga Sangha proje sitesinde, Assets panelinin Images blmnde listelenen

ou resmin birden fazla kopyasn greceksiniz. nk her ders klasrnde
ve ilgili Completed klasrnde resimlerin farkl kopyalar bulunmakta ve
dolaysyla sitede her resmin eitli kopyalar kullanlmaktadr. Kendi
sitelerinizde ayn resimlerden bazlarn ieren birden fazla resim klasr
kullanmadka bu durumla karlamazsnz. Boluk resmi (spacer) olarak
kullanlan GIFlere ve gezinti sisteminde kullanlan resimlere bazen farkl resim
klasrlerinde rastlarsnz. Bir resmin birden fazla kopyasn bulundurmak
genellikle art deildir. nk sitenizde herhangi bir konumdaki resimleri
kullanabilirsiniz. Aslnda birden fazla resim kullanm pek istenmez. Bir resmi
gncellemeniz gerektiinde ayn resmin birden fazla kopyas varsa bir sr
dosyada deiiklik yapmanz gerekebilir.
Assets penceresinin Site grnmnde sitedeki btn resimler gsterilir. Resimler, herhangi bir
belgede ister kullanlsn, ister kullanlmasn, bu pencerede otomatik olarak belirirler. Panelin
sitenizdeki btn resim varlklarnn bir katalogunu oluturmas birka saniye srebilir.
Sitenizi ilk oluturduunuzda nbellei etkinletirmediyseniz, Dreamweaver
nbellei etkinletirmek ve oluturmak iin Assets panelindeki Refresh Site
Liste dmesine tklamanz gerektiini bildirir. nbellek varsaylan durumda
etkindir ve siz sitenize ait Site Definition iletiim kutusundaki Enable Cache
onay kutusunun iaretini kaldrmadnz srece otomatik olarak oluturulur.
Sitenize yeni bir varlk eklediinizde bu varlk Assets panelinde hemen grntlenmeyebilir.
Paneli, sitenizdeki tm resimleri gsterecek ekilde gncellemek iin site katalogunu
tazelemeniz gerekir. Bunun iin Assets panelinin sa alt kesindeki Refresh Site List
dmesine tklayn.
3. Ekleme noktasn Yoga Sangha was founded by Katchie Ananda and Jayne
Hillman ifadesiyle balayan paragrafn bana yerletirin. Assets panelinde,
Lesson_05_Graphics/Images klasrnde yer alan teaching.jpg resmini bulun ve
Insert dmesine tklayn.
Ayrca Assets panelinde ilgili resmi seebilir ve istediiniz konuma

srkleyebilirsiniz.
Bir resim dosyasnn konumunu bulmak iin sz konusu dosyay setikten sonra Cmd
tuunu basl tutup tklayarak veya sa tklayarak alan balam mensnden Locate In Site
komutunu seebilirsiniz.
Resmlerle almak 187
Assets panelini yatay olarak genilettiinizde Full Path stununu grrsnz. Bu stunu
kullanarak resimlerin nereye konduunu grebilirsiniz. Macintosh kullanclar paneli sa alt
kesine tklayp srkleyerek geniletebilir. Paneli geniletmenizi salayacak kadar yere sahip
olmak iin nce paneli ya da panel gruplarn sola tamanz gerekebilir. Windowsta panelleri
arabirimin geri kalan ksmndan ayran dey ubuu zerine tklayp sola srkleyebilirsiniz.
Resim belge penceresinde belirecektir.

Assets panelinde resim setiinizde panelin st ksmnda resmin kk bir nizleme
grnts belirir. Kullanlabilir nizleme alann byterek (imleci grnm alannn
alttaki kenarlnn zerine getirin ve srkleyerek yeniden boyutlandrn) ve/veya tm
Assets panelini byterek bu kk resmin boyutlarn bytebilirsiniz. Assets panelinde
bir resmi kolayca seebilir ve Edit simgesine tklayarak resmi varsaylan resim dzenleme
programnzda aabilirsiniz.
Stun stbilgilerine tkladnzda resim listesi yeniden sralanacaktr. rnein Name
stununun stbilgisine tkladnzda resimler alfabetik olarak kkten bye (yukarya
bakan bir okla gsterilir) ya da bykten ke (aaya bakan bir okla gsterilir) doru
yeniden sralanr. Dier stun stbilgilerini de boyuta (Size), tre (Type) ve tam yol (Full
Path) gre sralamak iin kullanabilirsiniz. Dier stunlar grmek iin ekran saa doru
kaydrmanz gerekebilir. Bir stunda ya da stun stbilgisinde nokta (...) grrseniz, bu
stunun ieriini grmeniz iin paneli geniletmeniz gerekir. Assets paneli etkinletirildiinde
(listedeki bir resme tklayarak etkinletirin) aradnz dosyay semek iin dosyann adnn
ilk harfini (ya da ilk birka harfini) yazabilirsiniz.
188 DERS 5
Bu fotoraf bir JPEG olarak kaydedilmitir. Ayn resmi bir GIF olarak
kaydetseydiniz resim kaba degradelerle, renklerin etrafnda krkl kenarlarla
piksel piksel grntlenirdi. Bunun sebebi, bu formatta (GIF) btn renk
tonlarnn sadece birka renkle eletirilmesidir. Bu durumda en iyi seenek
JPEGtir.
4. Image Tag Accessibility Attributes iletiim kutusundaki Alternate Text metin
alanna A Yoga Sangha Teacher yazn ve OK dmesine tklayn. Belge
penceresinde yeni eklediiniz resmi sein ve Properties denetisindeki resim
ad metin alanna teacher yazn. Resme studioPhoto CSS snfn uygulayn.
Resimlerinize onlar ekleme aamasnda isim ve alternatif metin ayarsanz zaman

kazanrsnz. Ayrca gerektiinde Code grnmnde bunlarla almanz daha kolay olur.
Bu aamada belgenizin grnm stteki rnee benzeyecektir.

Resmlerle almak 189
Resimleri Favori Listesiyle Ynetmek

Tekrar tekrar kullandnz resimleri Favorite (Sk Kullanlanlar) listesine eklemeniz
size nemli lde zaman kazandrabilir. Sitenizdeki her resmi Favorite listenize
ekleyebilirsiniz. Her sitenin kendi Favorite listesi vardr. Dreamweaver kullanmaya
baladnzda bu liste botur. Aadaki uygulamada Site kategorisinden Favorite listenize
bir resim ekleyecek ve sonra da bu listeyi dzenleyeceksiniz.
1. Assets panelinin Site listesinde teaching.jpg resmini sein ve sa alt kedeki
Add To Favorites dmesine tklayn.
Add to Favorites
(Sk Kullanlanlara
Ekle) dmesi
Bir iletiim kutusu alarak seilen varlklarn bu sitenin Favorite listesine eklendiini
bildirecektir. letiyi kabul etmek iin OK dmesine tklayn ve iletiim kutusunu kapatn.
Bir resmi Favorites listesine eklemek iin kullanabileceiniz birka alternatif
yntem mevcuttur. Resmi Files panelinde seebilir ve panelin sa st
kesindeki balam mensn aarak Add to Favorites komutunu
seebilirsiniz. Dier bir yntem de, belge penceresindeki bir resmi sk
kullanlan varlklardan biri haline getirmektir. Bunun iin resme Ctrl tuunu
basl tutarak tklayn (Macintoshta) ya da sa tklayn (Windowsta) ve alan
balam mensnden Add To Image Favorites komutunu sein. Bu balam
mens pek ok seenek ierir ve balantlar ve Flash nesneleri gibi dier
elemanlarla birlikte de kullanlabilir.
190 DERS 5
2. Assets panelinin st ksmndaki Images seenekleri arasnda yer alan Images:

Favorites radyo dmesini sein.
Assets paneli, nceki admda eklediiniz resimle birlikte Favorite listesini

grntleyecektir.
Assests panelini kullanarak resimlerinizi ynetmeye baladktan sonra resim eklediiniz
gibi muhtemelen baz resimleri de silmeniz gerekecektir. Favorite listesinde bir resim
seildiinde Add to Favorites dmesi Remove from Favorites dmesine dnr.
Remove from Favorites dmesine tkladnzda, setiiniz resim listeden silinir.
Images kategorisindeyken hem Site, hem de Favorite listesinde sitenizin
iindeki belirli bir resmin konumunu bulmak iin balam mensn
kullanabilirsiniz. Bunun iin bir resmi sein ve balam mensnden Locate
in Site komutunu sein. Site yapsnda ilgili resim seili hale gelecek ekilde
Files paneli etkinleecektir.
3. Paneli alt ksmndaki New Favorites Folder simgesine tklayn. Alan klasrn
isim metin alanndaki Untitled varsaylan adnn yerine Teachers yazn ve
Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Resimlerinizi kolayca bulmak iin onlar klasrler halinde dzenleyebilirsiniz.

Bunun iin balam mensndeki New Favorites Folder seeneini de
kullanabilirsiniz. Bu seenek balam mensnde sadece Images
kategorisinin Favorite (Sk Kullanlanlar) blmndeyken kullanlabilir.
4. teaching.jpg resmini Teachers klasrnn zerine srkleyin.
Klasrn ieriini grmek iin kk klasr simgesine ift tklayabilir, sonra da tekrar ift
tklayarak klasr kapatabilirsiniz. Bir klasrn iindeki resimler klasrn altnda ve biraz
girintili olarak gsterilir.
Favorite listesinde oluturduunuz bir klasr silmeniz gerekirse ilgili klasr
sein ve Assets panelinin alt ksmndaki Remove from Favorites dmesine
tklayn.
Bir Resmin Etrafndaki Boluu Ayarlamak

Metinleri resimlerin etrafna sararken ilgili resmin etrafndaki boluu da ayarlamanz
gerekebilir. Balangta belgenizdeki metin resme ok yakn olacaktr. Bu da metnin
okunmasn zorlatrabilir. Belirli bir miktarda boluk yaratmak, sayfanzn yerleim
dzeninin daha gzel grnmesine yardmc olacaktr. Boluk ayarlarnda piksel tabanl
bir l kullanlr.
Resmlerle almak 191
1. CSS Styles panelindeki All Rules listesinden studioPhoto kuraln sein ve

panelin alt ksmndaki Edit Style dmesine tklayn.
u anda metin bu resmin kenarna ok yakn durmaktadr. Resmin etrafna biraz boluk
eklerseniz hem sayfa daha gzel grnecek, hem de metin daha rahat okunacaktr.
2. CSS Rule Definition iletiim kutusunda Box kategorisini sein. letiim
kutusunun Margin alannda Same For All onay kutusunun iaretini kaldrn,
yine Margin alanndaki Right ve Bottom metin alanlarna 5 yazn ve Return
(Macintoshta) ya da Enter (Windowsta) dmesine tklayn.
Yaptnz bu ayarla resmin sana ve altna 10 piksellik boluk eklenecektir. CSS

kullanarak ilgili elemann yanlarndaki boluk miktarn ayr ayr kontrol edebilirsiniz.
Bu zellik, rnein resmin st kenarnn metnin st ksmyla hizalanaca ve resmin sol
kenarnn da metnin sol kenaryla hizalanaca bir durumda ok iinize yarayabilir.
Ayrca <img> etiketinin H Space (yatay boluk) ve V Space (dey boluk)
niteliklerini tanmlayarak da bir resme boluk ekleyebilirsiniz. Bu nitelikler
resmin her iki tarafna da (yatay veya dey) eit miktarda boluk ekler. CSS
kullanmadka resmin sadece tek bir tarafna boluk ekleyemezsiniz. Bu
nitelikleri Properties denetisindeki V Space ve H Space metin alanlarn
kullanarak tanmlayabilirsiniz.
192 DERS 5
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.
1. Ekleme noktasn Anusara Yoga Immersion ilnna ait aklamann sonuna
yerletirin ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basarak
yeni bir paragraf oluturun. Insert ara ubuunun Common kategorisinde
Images mensne tklayn ve Image Placeholder sein.
Images: Image placeholder dmesi
Image Placeholder iletiim kutusu alacaktr.
Resim yer tutucularnn varsaylan genilii ve ykseklii 32 X 32 pikseldir.

2. Name metin alanna class yazn. Width (Genilik) deerini 176 ve Height
(Ykseklik) deerini de 132 olarak ayarlayn. Color (Renk) kutusuna tklayn ve
renk numunelerini kullanarak siyah rengi sein, sonra da Alternate Text metin
alanna a class at Yoga Sangha yazn. OK dmesine tklayn.
Resim yer tutucusu belge penceresinde belirecektir. Yer tutucunun renginin siyah
olduuna ve resmin ismiyle boyutlarn grntlediine dikkat edin.
Bilgisayarnzda Fireworks kuruluysa ve resim dosyalar iin varsaylan editr
olarak ayarlysa, belge penceresinde resim yer tutucusunu seip Properties
denetisindeki Create dmesine tklayarak yer tutucu iin tanmladnz
byklkte bir Fireworks belgesi aabilirsiniz. Bu belgeyi kaydettiinizde
Fireworksn Save As (Farkl Kaydet) iletiim kutusunda otomatik olarak yer
tutucu iin kullandnz isim atanacaktr.
Resmlerle almak 193
Sayfanz bir Web taraycsnda nizlediinizde resim yer tutucusu alternatif metinle
(sizin Image Placeholder iletiim kutusunda tanmladnz boyutlara ve renklere sahip
bir kutu ierisinde yer alr) birlikte yrtlm bir resim simgesi grntleyecektir. Bundan
kurtulmak iin resim yer tutucusunu bir sonraki uygulamada greceimiz gibi asl resimle
deitirmeniz gerekir.
Sayfanzn grnts bu rnektekine benzeyecektir.
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.
ki resmi birbiriyle deitirmek iin de bu teknikten faydalanabilirsiniz.
1. Belge penceresindeki resim yer tutucusuna ift tklayn.
Select Image Source iletiim kutusu alacaktr.

2. Lesson_05_Graphics/Images klasrndeki class.jpg resmini sein ve Choose
Asl resim belge penceresindeki yer tutucunun yerini alacaktr. Resim yer tutucusuna
atanan isim ve alternatif metin bu kez asl resme atanacaktr.
194 DERS 5
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.
1. Dreamweaver Preferences (Macintoshta) ya da Edit > Preferences (Windowsta)
komutunu sein ve Preferences iletiim kutusundaki Category listesinde File
Types/Editors sein.
Bu iletiim kutusunu kullanarak baka harici programlar da dosya uzantlarna gre

varsaylan editrler olarak atayabilirsiniz.
Dreamweaver 8, Flash ve Fireworksteki almalarnz balantl dzenleme
(roundtrip editing) olarak bilinen bir zellikle entegre hale getirebilirsiniz. Bu
zellik, dosya gncellemelerinin programlar arasnda aktarlmasn mmkn
klar. Bundan yararlanabilmek iin Fireworks varsaylan resim editr olarak
ayarlamanz gerekir.
2. Extensions listesinden.gifi sein. Editors listesinin stndeki art (+) dmesine
tklayn ve Fireworks gibi bir resim dzenleme program sein. Uygulama
listesinde ilgili program seiliyken program btn GIF dosyalar iin varsaylan
editr olarak ayarlamak zere Make Primary dmesine tklayn.
Resmlerle almak 195
Bir dzenleme program belirlemek iin Editors listesinin stndeki

dmeleri kullandnzdan emin olun. Extensions listesinin stndeki
dmeler dier uzantlar eklemek iin kullanlr.
Bilgisayarnzda bir resim dzenleme program yoksa bu adm atlayabilirsiniz.

Eer bir resim dzenleme programnz varsa bu adm JPEG ve PNG dosyalar iin
tekrarlamanz gerekir.
Kitapla birlikte verilen CD-ROMda Fireworksn deneme srmn
bulabilirsiniz.
3. yoga_sangha-title.jpg resmini sein.
Resimler iin kullanlan Properties denetisi arabiriminde, panelin st yarsnda ve

sa tarafnda bir Edit dmesi (Fireworks simgesine benzer) ile birlikte Optimize In
Fireworks adnda bir seenek yer alr. Edit seeneiyle resimlerinizi harici bir resim
editrnde hzl bir ekilde ap dzenlemeye balayabilirsiniz. Bunun iin nceki admda
anlatld gibi bir varsaylan resim editr tanmlam olmanz gerekir.
Temel Resim Dzenleme lemleri

Baz temel resim dzenleme ilevlerine dorudan Dreamweaver iinden eriebilirsiniz.
Bunlar sayesinde harici bir editre gerek kalmadan resminizde deiiklikler yapabilirsiniz.
Sitenizde kullanacanz resimleri yaratmak ya da nemli deiiklikler yapmak iin
harici bir resim editrne ihtiya duysanz da, yerleik halde bulunan Fireworks resim
dzenleme zellikleriyle pek ok deiiklii (krpmak, kontrast ayarlamak, netletirmek
gibi) dorudan Dreamweaver belge penceresinde gerekletirebilirsiniz.
1. class.jpg resmini sein.
Properties denetisinde resim dzenleme seenekleri belirecektir.
196 DERS 5
2. Properties denetisindeki Crop aracna tklayn.
Bir uyar penceresi ekrana gelerek bu ilemin diskinizdeki asl resmi deitireceini
bildirecektir. Bu iletiyi tekrar grmek istemiyorsanz Dont Show Me This Message Again
kutusunu iaretleyebilirsiniz. Devam etmek iin OK dmesine tklayn.
Resmin iinde bir seim alan belirecektir. Bu alan dz siyah bir izgiyle (Macintoshta) ya
da kesikli bir izgiyle (Windowsta) gsterilir. Seim alannn her kenarnn kelerinde ve
ortasnda tutamalar greceksiniz. Koyu resimlerde bu seim alann grmek zor olabilir.
Varsaylan durumda seim alan asl resimden biraz daha kktr ve yaklak olarak ayn
orana sahiptir. Seimin iindeki alan net bir ekilde grnr, dndaki alan ise krplacan
belirtmek iin daha gri bir renkle belirtilir. mleci seim alannn ortasna getirdiinizde
bir el (Macintoshta) ya da oklu bir art (Windowsta) eklini alr. Bu durumda seim
alann zerine tklayp srkleyerek tayabilirsiniz. mlele tklayp istediiniz tutamac
srkleyerek seim alannn bykln deitirebilirsiniz.
3. Krpma alannn bykln, orijinal resimden kk olacak ekilde ayarlayn
ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basarak resmi krpn.
Deiiklii uygulamak iin seim alannn iine ift tklayabilir ya da Properties

denetisindeki Crop simgesine tklayabilirsiniz. Krpma ilemini iptal etmek
isterseniz belge penceresinde resmin dnda herhangi bir alana tklayn.
Resim, setiiniz alana gre krplacaktr. Dosya boyutunun kldne dikkat edin.
Bunun miktar, resmin ne kadarlk bir alann krptnza baldr. Class.jpg resminin
Resmlerle almak 197
orijinal bykl yaklak olarak 7 KB idi. Resmin bykl, resim seildiinde Properties
denetisinin sol st kesine yakn bir noktada gsterilir.
Bir resimde Dreamweavern resim (Image) aralarn kullanarak deiiklik
yaparsanz, bu resmin sitenizde bulunan tm rnekleri deiir. Bunu istemiyorsanz,
resmin bir kopyasn oluturabilir ve deiiklikleri bu kopyann zerinde
gerekletirebilirsiniz. Bir krpma ilemini yaptktan sonra sonutan memnun
kalmazsanz Dreamweavern Undo komutunu kullanarak resmi orijinal durumuna
dndrebilirsiniz. Bunun iin Edit > Undo Crop komutunu seebilir ya da Cmd+Z
(Macintoshta) veya Ctrl+Z (Windowsta) klavye ksayolunu kullanabilirsiniz.
4. class.jpg resmi seili durumdayken Properties denetisindeki Brightness and
Contrast aracna tklayn. Parlaklk deerini (Birghtness) +25 olarak ayarlayn ve OK
dmesine tklayn.
Bir uyar penceresi alacak ve resim dosyasnda deiiklik yaplacan bildirerek sizi uyaracaktr.
Devam etmek iin OK dmesine tklayn.
Alan Brightness/Contrast iletiim kutusunda biri Brightness yani parlaklk, dieri de Contrast
yani kontrast iin ayrlm iki srg greceksiniz. Srglerin deer aral -100den +100e
kadardr. Varsaylan durumda srgler ortadadr ve bu konumun deeri sfrdr. Metin alanlarna
aralk dahilinde herhangi bir deeri yazabilir ya da srgleri zerlerine tklayp srkleyebilirsiniz.
Srgy sola, negatif saylara doru srklediinizde parlaklk azalr ya da kontrast der.
Srgy saa, pozitif saylara doru srklediinizde de parlaklk artar ya da kontrast ykselir.
Varsaylan durumda Previews kutusu iaretlidir. Bu da, yaptnz ayarlamalarn oluturduu
etkileri Dreamweaver belge penceresinde hemen grebilmenizi salar.
Bu admda yaptnz parlaklk ayarnn oluturduu fark ok belirgindir ve meydana
gelen deiiklii resimde kolayca grebilirsiniz. Bu seenei kullanrken dikkatli
olun, nk ar dzeyde kullanldnda resmin kalitesini ciddi ekilde etkileyebilir.
5. class.jpg resmi seili durumdayken Properties denetisindeki Sharpen aracna
tklayn. Srgy kullanarak deeri 2 yapn ve OK dmesine tklayn.
Bir uyar penceresi alacak ve resim dosyasnda deiiklik yaplacan bildirerek sizi
uyaracaktr. Devam etmek iin OK dmesine tklayn.
Sharpen iletiim kutusunda 0-10 aralna sahip tek bir srg yer alr. Brightness and Contrast
zelliinde olduu gibi burada da varsaylan durumda etkin olan bir Preview seenei mevcuttur.
198 DERS 5
Bu zellii tekrar tekrar kullanabilirsiniz. Ama dikkatli olun, nk fazla kullanrsanz

resmin kalitesini ciddi ekilde etkileyebilirsiniz. Ar netletirmek, resmin piksel piksel
grnmesine sebep olabilir.
Properties denetisindeki ilave dzenleme seenekleri arasnda Edit (Dzenle),
Optimize In Fireworks (Fireworkste optimize et) ve Resample (Yeniden
rnekle) yer alr. Dosyalar optimize etme avantajndan faydalanabilmek iin
bilgisayarnzda Fireworksn kurulu olmas gerekir. Optimize Images iletiim
kutusunu kullanarak resimlerin formatlar arasnda gei yapmak, kalite dzeyini
ayarlamak (JPEGlerde) ve renk paletini ayarlamak da (GIFlerde) dahil olmak
zere pek ok deiiklik yapabilirsiniz. Bir resmin kalite dzeyini drebilir ve
dosya boyutunu kltebilirsiniz. Ancak unutmayn ki, resimlerin kalitesini
artramazsnz. Daha iyi bir resim elde etmek iin orijinal kaynak dosyalarn
kullanmanz gerekir. Edit dmesine tkladnzda harici editr olarak, bu derste
daha nce Preferences iletiim kutusunda birincil (Primary) olarak ayarladnz
resim editr alr. Resample arac, resimlerinizin znrln artrma ya da
azaltma imkn salar. e yksek znrlkl bir resimle balamak ve
znrl istenen bykle gre drmek, dk znrlkl bir resmin
znrln artrmaktan her zaman daha iyidir. znrl artrsanz da bir
resmin kalitesini artramazsnz. Web znrl 72 ppidr (pixels per inch
in bana den piksel)
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.
1. zerine tklayarak class.jpg resmini sein. Properties denetisindeki Link metin
alanna schedule/immersion-details.html yazn.
Bu balant, bir greceli yoldur. Balantlar oluturmak iin metinlerde olduu gibi
resimleri de kolayca kullanabilirsiniz. schedule klasrnde immersion-details.html adnda
bir dosya yoktur. Bu yntemi kullanarak henz oluturulmam sayfalar iin balant
ekleyebilirsiniz.
Yerel dosya yapnzn dnda yer alan bir belgeye veya kk klasrnzn dnda bulunan
herhangi bir eye balanabilmek iin bir mutlak yol (absolute path) kullanmanz gerektiini
unutmayn. Bir mutlak balant, kullancnn bir Web sunucusuna balandn gstermek
iin http:// (HyperText Transfer Protocol) ifadesiyle balar. Mutlak balantnn kalan ksm,
balanlan sitenin adresini tanmlar. Harici Web sitelerinde bulunan belgelere ait tm
balantlar mutlak tiptedir.
Resmlerle almak 199
Eer bir URL uzun ya da karmaksa Web taraycnz kullanarak bu siteye

girebilir URLi kopyalayabilir ve Link metin alanna yaptrabilirsiniz.
mleci sayfann en altnda yer alan resimlerin zerine getirdiinizde bu resimlerin balant
ierdiini belirten bir el simgesi grrsnz. Kullandnz Web taraycsna bal olarak,
imlele balantlarn zerine geldiinizde Web taraycsnn durum ubuunda balant
konumunu grebilirsiniz.
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.
imdiki uygulamada biri dikdrtgen, biri de ember eklinde iki aktif alan ekleyeceksiniz.
Kavramsal olarak bakldnda, resim haritalar corafi haritalarda kolayca kullanlabilir.
Bununla birlikte herhangi bir resmi de resim haritas olarak kullanabilirsiniz.
1. Lesson_05_Graphics/about klasrndeki studio.html dosyasn an. greenstudio.jpg resmini sein.
Resmin her biri bir e iin olmak zere aktif alana blnmesi gerekiyor.
2. Properties denetisindeki Map metin alanna greenstudio yazn.
Bu isimde boluk ya da zel karakter kullanmayn. Bir sayfada birden fazla resim haritas
kullanabilirsiniz, ama ayn sayfadaki her haritay farkl bir ekilde adlandrmanz gerekir.
Resim haritalarnz adlandrmay unutursanz Dreamweaver her biri iin otomatik olarak
sral isimler oluturur (Map1, Map2, Map3 vs.) Bu tr genel isimler, uygulandklar resim
haritas ya da resimlerle ilgili tanmlayc bir bilgi iermezler. Bu uygulamada kullandnz
isim olan greenstudio, kullanlan resim haritasnn evre bilincine sahip bir stdyoya ait
olduunu belirtmektedir. Map metin alannda kendi istediiniz gibi, ilgili eyi ayrt edici
isimler kullanabilirsiniz. Ksa, zl ve eyi tanmlayc isimler kullanmak en iyisidir.
Map metin alann gremiyorsanz Properties denetisinin sa alt kesindeki

geniletme okuna tklayn.
200 DERS 5
3. Properties denetisindeki Map metin alannn altnda yer alan Rectangular

Hotspot aracn sein. Tklayp imleci srkleyerek floors ve materials
szcklerinin etrafnda bir kare izin.
Resim iin bir alternatif metin tanmlamanz gerektiini bildiren bir uyar mesajyla
karlaabilirsiniz.
Resmin bu blmnde, isimlerin etrafnda tutamalarla birlikte mavi-yeil renkli yar saydam
bir alan belirecektir. Properties denetisinde aktif alan zelliklerinin belirdiine dikkat edin.
Dreamweaver, Properties denetisindeki Link 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.
Client-side image maps seenei varsaylan durumda kapaldr. Bu seenei

etkinletirmek isterseniz, Preferences iletiim kutusunun Invisible Elements
kategorisinde ilgili seenei iaretleyebilirsiniz. Bu seenek etkin
durumdayken, bir ya da daha fazla resim haritas oluturduunuzda genellikle
belgenin alt ksmnda bir resim haritas simgesi belirir. Bu simge, isimli yer imi
simgesine benzer ve sadece Dreamweaverda grnr. Web taraycsnda bu
simgeyi gremezsiniz.
Ayrca View > Visual Aids > Image Maps komutunu kullanarak aktif alan
blgelerinin grnrlk durumunu etkinletirebilir ya da kapatabilirsiniz.
Resmlerle almak 201
4. Properties denetisindeki Map metin alannn altnda yer alan Pointer Hotspot
aracn sein. nc admda oluturduunuz aktif alan, tutamalardan
birini srkleyerek sadece floors szcn evreleyecek ekilde yeniden
boyutlandrn.
Oluturduunuz aktif alanlar kolayca dzenlenebilir. Bunlar istediiniz zaman yeniden

boyutlandrabilir, tayabilir ya da silebilirsiniz.
Bir aktif alan tamak isterseniz imleci aktif alann iine yerletirin ve srkleyin. Aktif
alan Pointer Hotspot aracyla seildikten sonra ok tularn kullanarak da aktif alann
konumunu ayarlayabilirsiniz.
Ayn anda Shift tuunu basl tutarsanz ok tular aktif alann bykln deitirir.
Bir aktif alan silmek isterseniz sein ve Delete (Macintoshta) ya da Backspace
Oval Hotspot aracn kullanarak ember eklinde aktif alanlar oluturabilirsiniz. Ayrca
aktif alan oluturmak istediiniz daha karmak ekilli bir alann etrafnda Polygon Hotspot
aracyla eitli noktalara tklayarak bu ilemi gerekletirebilirsiniz. Polygon aracn
kullandnzda her tklama bir nokta oluturur. Sonraki her nokta bir izgiyle bir ncekine
balanr. Tklarken saydam bir aktif alann olumaya baladn grrsnz. stediiniz
ekil oluana kadar tklamaya devam edebilirsiniz. Tekrar ilk noktaya tklayarak ekli
kapatmanz gerekmez. Aktif alanlar tanmlamak zere bir poligon eklinde ne kadar
ok nokta kullanlrsa, bu alanlar tanmlamak iin belgede de o kadar fazla kod kullanmak
gerekir.
Eer iki ya da daha fazla aktif alan st ste biniyorsa, ilk oluturduunuz,
stne gelen sonraki aktif alanlara gre nceliklidir.
5. Aktif alan seili durumdayken Properties denetisindeki Alt metin alanna floors
yazn.
Aktif alana ait alt metni, bir resim iin kullanlan alt metniyle ayn ii yapar. Yani sz
konusu aktif alann nereye balanacan gsterir.
6. Aktif alan (Hotspot) seeneklerinin grntlendii Properties denetisindeki Link
metin alanna green.html#floors yazn ve balantnn yeni bir tarayc penceresinde
almasn salamak iin Target alr mensnden _blanki sein.
Yazdnz balantnn Link metin alanndaki diyez iaretinin (#) yerini aldndan emin olun.
202 DERS 5
Burada kullandnz balant, zerine tklayan kullanclar green.html adndaki HTML

sayfasnda bulunan ve floors adn tayan bir isimli yer imine gtrecektir. Dier sayfalarn belirli
blmlerine balanmak iin yer imi kullanarak sitenizin daha ilevsel olmasn salayabilirsiniz.
Bylece ziyaretileriniz aradklar konulara daha kolay eriebilir ve upuzun belgeleri kaydrmakla
zaman kaybetmez. Hazrladnz site ne kadar ilevselse ve kullanm ne kadar kolaysa, nceki
ziyaretilerin tekrar gelme ve yeni ziyaretiler kazanma olasln o kadar arttrrsnz.
Balantda, hedef ayarnda veya alternatif metinde deiiklik yapabilmeniz iin ilgili aktif alan
semeniz gerekir.
Ders 3te ayn belgede balant oluturmak iin kullandnz Point To File
aracnn yardmyla dier sayfalara giden ve isimli yer imleri ieren balantlar
da oluturabilirsiniz. Bunun iin bir aktif alan seebilir, Link metin alannn
sandaki Point To File simgesine tklayabilir ve ak bir HTML belgesindeki
ilgili isimli yer iminin zerine srkleyebilirsiniz.
7. Rectangular Hotspot aracn kullanarak materials ve supplies szckleri iin
birer aktif alan oluturun. Beinci ve altnc admlar tekrarlayarak her iki szck
iin birer alternatif metin ve balant oluturun. Bu szcklerin alternatif metinleri
iin srasyla materials ve supplies szcklerini, balantlar iin de srasyla
green.html#materials ve green.html#supplies ifadelerini kullann.
Resmlerle almak 203
Resim haritasyla iiniz bittikten sonra Pointer Hotspot aracyla resmin zerinde aktif
alan dnda baka bir yere tklayabilirsiniz. Resim zerinde resim alannn dnda farkl
bir yere tkladnzda Properties denetisindeki seenekler resim zelliklerini gsterecek
ekilde deiecektir.
Rectangular Hotspot aracn kullanrken Shift tuunu basl tutarak en boy
orann kstlayp bir kare oluturabilirsiniz.
Oluturduunuz resim haritasndaki balantlar test edin. studio.html, index.html ve

sangha.css belgelerini kapatabilirsiniz.
Bir resim haritasn kopyalayp baka bir belgeye yaptrrsanz Dreamweaver
balantlar ve aktif alanlar koruyacaktr.
Resimleri Tek Banza Kullann

Bu derste rendiiniz gibi sitenize resim ekleyerek ve bu resimlerin yerleim dzenini
CSSle kontrol ederek sitenizin ziyaretilerinizin zerinde daha iyi bir etki brakmasn
salayabilirsiniz.
Bunun iin resimlerinizi bir resim dzenleme program kullanarak semeniz,
dzenlemeniz ve optimize etmeniz gerekecektir. GIF, JPEG ve PNG arasnda seim
yaparken her resmin ieriinin nasl olacan deerlendirin.
Resimleri sitenizin sayfalarna eklerken bu derste kullandnz teknikleri kullann.
Resimleri eklerken grsel malzemenizin yerleimini kontrol etmek iin CSS stilleri
oluturun.
Sitenize resim eklerken bu dersin banda grdmz eriilebilirlikle ilgili konular
aklnzdan karmayn.
204 DERS 5
Ne rendiniz?
Bir arka plan resmi kullandnz (Sayfa 171174).

Sayfanza eriilebilirlik nitelikleriyle birlikte resimler eklediniz (Sayfa 175180).
Resimleri yeniden boyutlandrdnz ve orijinal boyutlarna dndrdnz
(Sayfa 180181).
Resimlerin konumunu ayarladnz (Sayfa 182183).
Bir resmin etrafna kenarlk eklediniz (Sayfa 184185).
Resimlere isim ve alt nitelii atadnz (Sayfa 185).
Sitedeki resimleri ynetmek iin Assets panelini kullandnz (Sayfa 186189).
Favorites (Sk Kullanlanlar) listesini kullanarak resimleri ynettiniz (Sayfa 190191).
Resimlerin etrafndaki boluu ayarladnz (Sayfa 191192).
Bir resim yer tutucusu eklediniz (Sayfa 193195).
Bir resmi krptnz (Sayfa 196197).
Bir resmin parlaklk ve kontrast ayarlarn yaptnz (Sayfa 198199).
Bir resim haritas oluturdunuz (Sayfa 200204).
Resmlerle almak 205
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 biriydi. CSS
(Cascading Style Sheets) kullanmann sayfalarn tasarmn ve yerleim dzenini ve
Bu derste metin
ve resimler
ieren tablolar
oluturacak ve
sayfa dzeninizi
tablolarla nasl
gelitireceinizi
ve CSS ile
birlikte nasl
kullanacanz
reneceksiniz.
gelitirmek iin daha iyi bir yntem olabileceini aklnzdan karmayn, nk CSS pek
ok yerleim dzeni ve grnm seenei sunar, ayrca tasarmclara ve gelitiricilere
tm sitenin grnm ve yaratt his zerinde daha iyi bir kontrol imkn sunar.
Tablo tabanl yerleim dzenleri genelde daha kstlaycdr. CSS kullanarak daha esnek
bir ekilde alabilirsiniz. Ayrca CSS etkinlik ve eriilebilirlik asndan daha iyidir
ve W3Cnin Web gelitirme iin tanmlad mevcut standartlar karlamaktadr. Her
Web taraycs en yeni CSS srmn desteklemez (zellikle eski Web tarayclarnn
CSS destei ok iyi deildir), bu yzden tablolar yine de kullanl bir seenek olabilir.
Sonu olarak, zerinde alacanz eski sitelerin birounda tasarm iin muhtemelen
tablolardan faydalanlmaktadr. Bu yzden tablo tabanl yerleim dzeni tasarmyla ilgili
kavramlar ve teknikleri renmeniz sizin anzdan iyi olacaktr.
Bu derste elde edilen sonucu grmek isterseniz, Lesson_06_Tables klasrnde yer alan
Completed/Schedule alt klasrndeki index.html dosyasn an.
Neler reneceksiniz?
Sayfalarnzn yerleim dzenini kontrol etmek iin nasl tablo oluturacanz

reneceksiniz.
Tablo zelliklerinde (kenarlk, arka plan, boluk, renk, hizalama ve byklk)
deiiklik yapacaksnz.
Eriilebilir tablolar oluturacaksnz.
Hesap tablolarndan sekmeli (tabular) veriler aktaracaksnz.
Satrlar ve stunlar ayarlayarak bir tabloda deiiklik yapacaksnz.
Bir tablonun ieriini sralayacaksnz.
Bir tabloyu darya aktaracaksnz.
Yerleim dzeninizin optimum bykln belirleyeceksiniz.
Layout modunu kullanarak sayfa tasarmnz oluturacaksnz.
Dreamweavera bir taslak resim aktaracaksnz.
Yaklak Sre
208 DERS 6
Ders Dosyalar
Ortam Dosyalar:
Lesson_06_Tables/Images/(dosyalarn tm)
Balang Dosyalar:
Lesson_06_Tables/schedule/index.html
Lesson_06_Tables/schedule/events.html
Lesson_06_Tables/explorations/poses.html
Lesson_06_Tables/Text/schedule.txt
Lesson_06_Tables/Text/short-schedule.txt
Lesson_06_Tables/Text/events.txt
Tamamlanm Proje:
Lesson_06_Tables/Completed/index.html
Lesson_06_Tables/Completed/yoga-table.html
Lesson_06_Tables/Completed/schedule/index.html
Lesson_06_Tables/Completed/schedule/events.html
Lesson_06_Tables/Completed/explorations/poses.html
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.
Macromedia Dreamweaver 8, tablo oluturmak iin kullanabileceiniz eitli aralar ve
seenekler sunar. Bu aralara u grnm moduyla eriebilirsiniz: Standard, Layout
ve Extended. Her bir grsel dzenleme modu, tablo oluturma ve tablolar dzenleme
imknnn yannda, tablo tasarm ve yapsyla ilgili farkl bir perspektif sunar.
Bu uygulamada Standard grnm modunu kullanarak Yoga Sangha proje sitesinde bir
sayfa oluturmaya balayacaksnz.
Tablo Oluturmak 209
Tablolar ve CSS
HTMLde tablolar aslnda bilgileri dzenlemek iin kullanlan bir yntem olarak
tasarlanmtr. Bata bir tasarm arac olarak kullanlmalar dnlmemitir. Yllar iinde
Web tasarmclar grsel olarak daha ekici ve daha ilevsel Web siteleri hazrlamaya
baladka tablolar da yerleim dzeni iin temel bir ara haline geldi. Sonu olarak
Web sayfalarnn ierii ve yaps birbirine daha baml hale geldi. CSS, tasarmclara
ierii Web sayfalarnn yapsndan ayrma imkn salar. Bu da, eriilebilirlik ve esneklik,
indirme sresini ksaltma ve sayfalar oluturma ve bunlarn devamlln salama sresini
ksaltma asndan faydal olabilir. Web sayfalarnzn yerleimini kontrol etmek iin tablo
ve CSS arasnda yapacanz seim; Web taraycs destei, sayfalarnzn farkl platformlarda ve tarayclardaki grnts ve kullanlmas istenen yerleim dzeni gibi eitli
faktrlere baldr. CSS destei giderek yaygnlamaktadr, ama istediiniz yerleim
dzenini oluturmanz iin CSS yeterli olamayabilir. Web sitenizin gereksinimlerini
dnmeniz, CSS ve/veya tablo kullanmyla ilgili seenekleri tartmanz, sayfalarnz her
ikisiyle de test etmeniz ve yerleim dzeni iin kullanacanz yntemi ya da yntemleri
buna gre belirlemeniz gerekir.
1. Lesson_06_Tables/Schedule klasrndeki index.html dosyasn an.
Bu sayfada bir ierik mevcuttur. Sayfada ayrca temel biimlendirme zellikleri

ayarlanmtr ve sayfadaki elemanlarn (metinler ve resimler de dahil olmak zere)
grnmn kontrol etmek iin CSS kullanlmaktadr. Bu sayfay oluturmak iin
kullanlan teknikleri nceki derslerde renmitiniz.
lave uygulama yapmak isterseniz, yeni ve bo bir belge ap bu sayfay
klavuz olarak kullanarak ayn sayfay yeniden oluturabilirsiniz.
2. Insert ara ubuunda Layout kategorisini sein ve Standard mod dmesinin
seili olduundan emin olun.
Varsaylan durumda Standard mod seenei etkin olmaldr. Etkin mod, vurgulu bir
dmeyle gsterilir. Etkin tablo modu olarak Standard mod seili deilse, Standard
dmesine tklayn.
View > Table Mode komutunu kullanarak da modu kontrol edebilir ya da
dier bir moda geebilirsiniz. Mende bir modun yannda onay iareti varsa,
bu, o modun etkin olduunu gsterir.
210 DERS 6
3. Ekleme noktasn ilk paragrafla yatay izginin arasndaki bo paragrafn iine

yerletirin ve Insert ara ubuunda Layout kategorisindeki Table dmesine
tklayn.
Table dmesi Insert ara ubuunun Common kategorisinde de yer alr.

Table iletiim kutusunu amak iin alternatif olarak Insert > Table komutunu
seebilir ya da Option+Cmd+T (Macintoshta) veya Ctrl+Alt+T (Windowsta)
klavye ksayolunu kullanabilirsiniz.
Table iletiim kutusu alacaktr.
Table iletiim kutusu blme ayrlmtr: Table Size, Header ve Accessibility. Table Size
blmnde u seenekler yer alr:
Rows: Tablodaki satrlarn saysn gsterir. Daha nce bir tablo oluturmadysanz
varsaylan Dreamweaver deeri 3tr.
Columns: Stun saysn gsterir. Daha nce bir tablo oluturmadysanz varsaylan
Dreamweaver deeri 3tr
Tablo Oluturmak 211
Table width: 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.
Border thickness: Tablo kenarlnn geniliini (kalnln) gsterir. Daha nce bir
tablo oluturmadysanz varsaylan Dreamweaver deeri 1 olacaktr.
Cell padding: 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.
Cell spacing: 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
Table Size blmndeki seeneklere Properties denetisinden ulaabilirsiniz. Table iletiim
kutusunu daha nce kullandysanz bu seeneklerin varsaylan deerleri farkl olabilir. Bu
durumda varsaylan deerler bir tablo iin en son tanmladnz deerler olacaktr.
Baz tablo zelliklerini Tag Inspector araclyla da ayarlamak mmkndr.
Varsaylan durumda Tag Inspector Application ve Files panel gruplarnn
arasnda yer alr. Tag Inspectora Window > Tag Inspector komutunu seerek
ulaabilirsiniz.
Header blm stbilgi iin drt farkl yerleim seenei ierir: None, Left, Top ve
Both. 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. Header seenei, stbilgi
satrlarna ya da stunlarna yerletirilen bilgiyi her bir hcre iin (kendi satrlarnda ya
da stunlarnda) tanmlayc haline getirmek zere Scope niteliinden faydalanr. rnein
Top stbilgi seeneini kullanrsanz ve ilk stunun en stteki hcresine Order 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 Order nekinin
212 DERS 6
de sylendiini duyarsnz. Bir hcreyi (ya da hcreleri) stbilgiye dntren bu

seenee Properties denetisi araclyla da eriebilir ve istediiniz zaman zerinde
deiiklik yapabilirsiniz (her ne kadar burada scope nitelii ayarlanmasa da).
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,
Accessibility blm araclyla eriilebilirlik zelliklerini en batan itibaren dahil etmeyi
ok kolay bir hale getirmektedir. Bu blmde u seenekler yer alr:
Caption: 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 Table iletiim kutusunda bulunur. Daha ileride bu zellii dahil etmek
isterseniz, HTML kodunu dzenleyerek bunu gerekletirebilirsiniz. Bu konuyu Ders
16da greceiz.
Summary: 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. Tag Inspectordaki Attributes sekmesinin CSS/
Accessibility blmn kullanarak bu seenekte istediiniz zaman deiiklik
yapabilirsiniz.
4. Rows metin alanna 2, Columns metin alanna da 4 yazn. Table width deerini
deitirerek 500 piksel yapn, Border thickness deerini 1 yapn ve Cell
padding ile Cell spacing metin alanlarn bo brakn. Header blmnde Topu
sein. Accessibility blmnde Caption metin alanna Class Schedule at
Yoga Sangha yazn ve Align caption mensnde Top seeneini iaretleyin.
Summary metin alanna Information about the yoga classes available at
Yoga Sangha yazn. Her giri snfa ait hocay, gn ve saati ierecektir. OK
dmesine tklayarak iletiim kutusunu kapatn.
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
Tablo Oluturmak 213
st ksmndaki ierii rtebilir. Eer tablo belgenizdeki ilk eyse, tablo stbilgisi tablonun
alt ksmna eklenebilir. ubuun nerede grntleneceini kontrol edemezsiniz.
View > Visual Aids > Table Widths 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. Yine ayn meny ya da Cmd+Shift+I
(Macintoshta) veya Ctrl+Shift+I (Windowsta) klavye ksayolunu kullanarak
btn grsel yardmclar ap kapatabilirsiniz. Aadaki uygulamada grsel
yardmclarn (tablo stbilgisi de dahil) etkin olduu varsaylmtr.
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 Cell
padding deerinin uygulanmasndan dolay hcrelerin arasnda bir boluk grebilirsiniz.
nk Cell spacing seenei bo braklmt.
5. En stteki satrla soldaki stunun kesitii hcreye tklayn. Hcrenin iine Day
yazn, ardndan Tab tuuna basarak bir sonraki hcreye gein. Time yazn ve Tab
tuuna basn. Level yazn ve Tab tuuna basn. Son hcreye de Instructor yazn.
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.
214 DERS 6
En stteki satr stbilgi satr olduu iin, yazdnz metin ortalanacak ve kaln olarak
biimlendirilecektir (tablo stbilgilerinin varsaylan zellii). lave biimlendirme zellikleri
uygulamak isterseniz CSS kullanabilirsiniz. Bu uygulamada stbilgileri ellemeden brakn.
6. Ekleme noktasn tablonun altndaki bo paragraf satrna yerletirin.
Tablonun altnda bo bir paragraf satr yoksa, tablonun sonuna tklayn ve

Tablonun dna tkladnzda stunlar genilikleri deierek hafife kayabilirler. Ekleme

noktas u anda yeni bir paragrafta olmaldr.
Tablo verilerini dorudan hcrelere yazarak girebilirsiniz. Bir sonraki uygulamada tablo
ieriini girmek iin farkl bir yntem kullanacaksnz.
Hesap Tablolarndan Veri Aktarmak

Bir hesap tablosundaki, hatta bir Microsoft Word belgesindeki metni Dreamweaver
belgelerine kolayca aktarabilirsiniz. Bunun iin bir belgeyi Dreamweaverla uyumlu hale
getirmek zere sekmeyle ya da virglle ayrlm bir dosya olarak kaydetmeniz gerekir.
Microsoft Excel ve Microsoft Word gibi eitli programlar kullanlarak oluturulan sekmeyle
ya da virglle ayrlm dosyalar kullanabilirsiniz. Bu uygulama iin sekmeyle ayrlm bir
metin dosyas sizin yerinize daha nceden hazrlanmtr. Burada verileri yeni bir tabloya
aktaracak, sonra da yeni tablodaki verileri ilk oluturduunuz tabloya aktaracaksnz.
Tablo Oluturmak 215
1. Ekleme noktas nceki uygulamada index.html belgesinde oluturduunuz

yeni satrdayken Insert ara ubuunun Layout kategorisindeki Tabular Data
dmesine tklayn
Ayn iletiim kutusunu amak iin Insert > Table Objects > Import Tabular Data
komutunu da kullanabilirsiniz.
Tabular Data dmesi
Import Tabular Data iletiim kutusu alacaktr.
2. Data file metin alannn yanndaki Browse dmesine tklayn ve Lesson_06_

Tables/Text klasrndeki schedule.txt dosyasn sein. Delimiter mensndeki
Tab seeneini ellemeyin. Table width blmnde Set to seeneini iaretleyin
ve buradaki metin alanna 500 yazn, sonra da menden Pixelsi sein. Cell
padding ve Cell spacing seeneklerini bo brakn. Format top row seeneini
[No Formatting] ayarnda brakn (bu varsaylan ayardr) ve Border ayarn da 1
olarak brakn. iniz bitince OK dmesine tklayn.
Import Tabular Data iletiim kutusunu atnzda Table width blmnde Set to
seenei iaretliyse, byklk ve/veya l ayarn belirlemek iin kullanlan
Table width metin alan seilemez durumda olabilir. Bu durumla karlarsanz
nce Fit to data seeneini iaretleyin, ardndan tekrar Set to seeneine gein.
Yaptnz ayarlara gre bir tablo oluturulacak ve aktardnz sekmelerle ayrlm

schedule.txt dosyasndaki veriler bu yeni tabloya aktarlacaktr.
Noktal virgl (;), iki nokta st ste (:) gibi baka ayrclar da (delimiter)
kullanabilirsiniz, ama bunlarn arasnda en ok kullanlanlar sekme ve virgldr.
Delimiter mensnden Other setiinizde bir metin alan grntlenir. Bu
alana istediiniz ayrcy girebilirsiniz.
216 DERS 6
kinci tablo seildiinde tablo stbilgisinin gri ubuu ilk tablonun alt ksmnn stne
gelerek buray rtebilir. Tablolarn dnda bir yere tkladnzda tablo stbilgisi
kaybolacaktr.
Tablo Hcrelerini Kopyalamak ve Yaptrmak

u anda iki tane tablonuz var: her bir stuna ait balklar ieren ilk tablo ve verileri ieren
ikinci tablo. Artk bu iki tabloyu birletirmeniz gerekiyor. Ayn anda birden fazla tablo
hcresini kopyalayp yaptrabilirsiniz. Bu da hcrenin biimlendirme zelliklerini (eer
varsa) korur. Hcrenin sadece ieriini kopyalayp yaptrmanz da mmkndr.
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, 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.
1. index.html belgesinde, sol st kedeki hcreye tklayp imleci sa alt kede
yer alan hcreye doru srkleyerek ikinci tablodaki btn hcreleri sein.
Seili hcrelerin etrafnda siyah kenarlklarn belirdiine dikkat edin. Hcreleri bu ekilde
setiinizde btn tabloyu semi olmazsnz, sadece hcrelerin kendilerini seersiniz.
Tablo Oluturmak 217
2. Edit > Copy komutunu sein.
Ayrca Cmd+C (Macintoshta) ya da Ctrl+C (Windowsta) klavye ksayolunu da

kullanabilirsiniz.
Seilen hcrelerin kopyalanabilmesi ya da kesilebilmesi iin bir dikdrtgen oluturmalar

gerekir. rnein st satrda alt hcre, alt satrda da drt hcre ieren bir seim
oluturamazsnz.
3. stteki tabloda yer alan ikinci satrn ilk hcresinin iine bir kez tklayn.
kinci tablonun stbilgisi alttaki satr rtyorsa, onu ortaya karmak iin nce stteki
tablonun grnen bir yerine ya da sayfada iki tablonun dnda kalan bir alana tklamanz
gerekebilir.
Kopyalanan hcreleri bu bo hcreye yaptracaz.
4. Edit > Paste komutunu sein.
Pano ieriini (ikinci admda kopyaladnz hcreler) yaptrmak iin Cmd+V

(Macintoshta) ya da Ctrl+V (Windowsta) klavye ksayolunu da kullanabilirsiniz.
kinci tablodaki btn hcreler ilk tabloya eklenecektir. lk tablonuzun grnm

aadaki gibi olacaktr.
Hcrelerin seimini kaldrmak iin tablo dnda bir yere tklayn.
218 DERS 6
Btn satrlar bir tablonun sonuna yaptrrsanz (buradaki rnekte olduu

gibi) 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 kopyalananlarnkiyle 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 Edit > Clear komutunu sein ve ya Delete
tuuna basn. Btn bir satr silmeniz gerekiyorsa imleci srkleyerek
satrdaki btn hcreleri sein ve Delete tuuna basn.
Tabloyu Semek
kinci tablonun ierii artk birinci tabloda olduuna gre ikinci tabloya ihtiyacnz
kalmad. Silmek iin nce bu tabloyu semeniz gerekir. Dreamweaver, tablo semek iin
kullanabileceiniz birka yntem sunar. Tablo yapsnn karmaklna bal olarak baz
yntemlerin dierlerine gre daha kolay olduunu greceksiniz.
1. index.html belgesinde, imleci tablonun iinde bir yere yerletirip ardndan belge
penceresinin sol alt kesindeki Etiket Seicide <table> etiketine tklayarak
ikinci tabloyu sein.
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 Modify > Table > Select Table 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.
Tablo Oluturmak 219
Eer ekleme noktas tablonun iindeyse ve tablo seili durumda deilse Etiket
Seicide <table> etiketinin yannda <tr> ve <td> etiketlerini de grebilirsiniz.
<tr> etiketi, tablo satrn temsil eder. <td> etiketi tablo verisini temsil eder ve
hcre olarak da bilinir. Bir <td> etiketini setiinizde ilgili hcre seili hale gelir
ve Properties denetisini kullanarak bu hcre zerinde deiiklik yapabilirsiniz.
Etiketlerle ilgili ayrntlar Ders 16da greceiz.
2. kinci tabloyu silmek iin tablo seili durumdayken Delete (Macintoshta) ya da
Backspace (Windowsta) tuuna basn.
kinci tablo silinecektir.

mle bir hcrenin iindeyken Cmd+A (Macintoshta) ya da Ctrl+A
(Windowsta) 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. Bu derste daha nce komu hcreleri (bitiik ya da birbirine deen hcreler)
semitiniz. Bir tablodaki komu olmayan hcreleri de (birbirine demeyen hcreler)
seebilir ve bunlarn zelliklerinde deiiklik yapabilirsiniz. Ancak komu olmayan hcreleri
kopyalayp yaptramazsnz. Aadaki admlarda eitli seim yntemleri anlatlmaktadr.
Her bir hcre iin (tekli ya da birden fazla hcreden oluan seimlerde) eitli seeneklerde
deiiklik yapabilirsiniz. Bu seenekler iinde arka plan rengini ve hizalamay sayabiliriz.
1. index.html belgesinde tablonun geri kalan ksmnn st satrndaki komu olmayan
hcreleri sein. Bunun iin nce Cmd (Macintoshta) ya da Ctrl (Windowsta)
tuunu basl tutarak Day szcn ieren ilk hcreyi sein. Cmd ya da Ctrl
tuunu basl tutmaya devam ederek Level szcn ieren hcreyi sein.
mleci bir hcrenin zerinde hareket ettirirken Cmd ya da Ctrl tuunu basl tuttuunuzda,
ok imlecinin yannda birden fazla hcre setiinizi gstermek zere d hatlar belirgin bir
kare belirebilir.
Birbirine komu olmayan bu iki hcre seili hale gelecektir. Etraflarndaki siyah
kenarlklardan da bunu anlayabilirsiniz.
220 DERS 6
2. Properties denetisindeki Bg (Arka plan) renk metin alanna #CCCCFF onaltlk

kodunu yazn.
Bg (Arka plan) renk metin alan
Hcreler setiiniz rengi alacaktr. Deiikliin uygulanmas iin tablonun dnda bir
yere tklamanz gerekebilir
Yaptnz seime bal olarak tek bir hcrenin, birden fazla hcrenin ya da btn bir
tablonun arka plan rengini deitirebilirsiniz. Bu admda birden fazla hcrenin rengini tek
seferde deitirdiniz.
Properties denetisindeki Header seeneinin iaretli olduuna dikkat edin. Bu derste
daha nce en stteki satr stbilgi (Header) olacak ekilde ayarlamtnz ve dolaysyla
bu satrdaki btn hcreler stbilgi olarak biimlendirilmiti. En stteki satrda yer alan
btn hcreler iin bu seenei iaretli olarak brakmanz gerekmektedir.
Tablo Oluturmak 221
Btn tablonun arka plan rengini deitirmek iin tabloyu sein ve

Properties denetisindeki Bg seeneini kullanarak tablo iin bir renk sein
veya ilgili metin alanna istediiniz rengin onaltlk tabanl kodunu yazn.
3. Komu olmayan Time ve Instructor hcrelerini sein; sonra da arka plan
renklerini #9999CC olarak ayarlayn.
Tek bir hcreye, birden fazla hcreye veya tablonun tamamna bir arka plan resmi de
atayabilirsiniz. Arka plan resmi seenei Properties denetisinde de mevcuttur (arka plan
rengi seeneinin hemen zerinde).
Tablonun tamamna uygulanan bir arka plan resmi, tablonun iinde birden
fazla hcre veya baka tablolar bulunmas durumunda beklediiniz ekilde
grnmeyebilir. stediiniz ekilde grndnden emin olmak iin btn
sayfalarnz daima Web tarayclarnda nizleyerek test edin.
4. Monday satrnn iine tklayn ve imleci satrn en soluna, tablo kenarlnn
zerine yerletirin. Seim oku belirince tklayn, sonra da arka plan rengini
#6699CC olarak deitirin.
Seim okunun belirmesi iin imleci tablonun sol kenarl zerinde yukar aa hareket
ettirmeniz gerekebilir. Siz imleci doru konuma yerletirdikten sonra bu satrdaki btn
hcrelere krmz bir d hat uygulanacaktr. Seim okunu kullanmak, bir tablodaki tek bir
satr ya da tek bir stunu semek iin hzl bir yntemdir. Seim okunu ya da krmz d
hatlar gremiyorsanz satrn sol kenarlna tklamay deneyin. Kenarla tkladnzda
tablodaki btn hcreler seili hale gelecek ve siyah renkli bir d hatla grntlenecektir.
222 DERS 6
5. Gn isimlerinin bulunduu dier satrlarn rengini rnee uygun ekilde

deitirmeye devam edin.
Satrlarn bir beyaz, bir mavi olacak ekilde ayarlandna dikkat edin.
Tablolar, satr renkleri srayla deiecek ekilde otomatik olarak da abucak
biimlendirebilirsiniz. Commands > Format Table komutunu seerek Format
Table iletiim kutusunu an. Bu iletiim kutusunu kullanarak bir dizi hazr
biimlendirme seenei arasnda seim yapabilir ve renk, stil, hizalama ve
arka arkaya gelen satr seenekleriyle tablonuzun grnmn
zelletirebilirsiniz. Ancak Format Table komutu, tablo aklamas (caption)
ieren tablolarda (bu derste zerinde altnz tablo gibi) kullanlamaz.
6. Ekleme noktasn tablonun iine yerletirin, ardndan gri tablo genilii
ubuunda Instructor stununun zerindeki yeil stun genilii izgisine
tklayarak bu stunu sein.
Bylece btn stunu semi oldunuz.
Tablo Oluturmak 223
Instructor stununu, stunun en stteki hcresine tkladktan sonra Shift

tuunu basl tutup bu stunun en alt hcresine tklayarak da seebilirsiniz.
Yatay hizalamayla ilgili varsaylan ayar, Left seeneiyle ayn ii grr, yani seili hcrelerin
ieriini sola hizalar. Dey hizalamayla ilgili varsaylan ayar, Middle seeneiyle ayn ii
grr, yani seili hcrelerin ieriini ortaya hizalar. En stteki satr bir stbilgi satr olduu
iin bu hcrelerin ierikleri otomatik olarak ortalanr.
7. Properties denetisinde btn Instructor stununun yatay hizalamasn Right
olarak ayarlayn.
Instructor stunundaki btn hcrelerin ierii saa hizalanacaktr.
224 DERS 6
Properties denetisinin alt yars u hcre niteliklerini ierir:

Merges selected cells using spans: Seili durumdaki iki ya da daha fazla hcreyi tek
bir hcre halinde birletirir.
Splits cell into rows or columns: Tek bir hcreyi birden fazla hcreye bler.
Horizontal Alignment of the cell contents (Horz): Hcrelerin ieriinin yatay
hizalamasn Web taraycsnn varsaylan seeneine (Web tarayclarnda varsaylan
durumda normal hcreler genellikle sola, stbilgi hcreleri de ortaya hizalanr) ya da
sola, saa veya ortaya ayarlar.
Vertical Alignment of the cell contents (Vert): Hcrelerin ieriinin dey
hizalamasn Web taraycsnn varsaylan seeneine (genellikle orta) ya da yukarya,
ortaya, aaya veya taban izgisine gre ayarlar.
Width of cells in pixels or percent (Genilik - W) ve Height of cells in pixels or
percent (Ykseklik - H): Bu iki seenek, seili durumdaki hcrelerin piksel cinsinden
geniliini ve yksekliini belirler. Yzde kullanmak iin ilgili deerin arkasna bir
yzde iareti (%) ekleyin.
No Wrap: Metinlerin blnmesini engeller. Hcreler btn verileri ierecek ekilde
geniler. Normalde hcreler en uzun szc ierecek ekilde yatay ynde bydkten
sonra dey ynde byr.
Header: Seili durumdaki hcreyi ya da hcreleri tablo stbilgisi olarak biimlendirir.
Tablo stbilgisi olarak biimlendirilen hcrelerin ierii varsaylan durumda kaln
harfle yazlr ve ortalanr.
Background URL of cell (stteki Bg seenei): Hcrelerin arka plan resmini
ayarlamada kullanlr.
Background Color (alttaki Bg seenei): Hcrelerin arka plan rengini ayarlamada
kullanlr. Hcre arka planlar sadece hcrelerin iinde yer alr, yani arka plan hcre
boluuna ya da tablo kenarlna tamaz. Cell Spacing ve Cell Padding seenekleri
sfr olarak ayarlanmadysa, kenarlk sfra ayarlanm olsa bile renkli alanlarn arasnda
boluklar oluur. Bu boluklar istemiyorsanz, btn tabloya bir renk uygulamanz ya
da Cell Spacing ve Cell Padding deerlerini sfr yapmanz gerekir.
Border Color of cell: Hcrelerin kenarlk rengini ayarlar.
Bu seenekleri gremiyorsanz Properties denetisinin sa tarafndaki geniletme okuna
tklamanz gerekir. Sonraki uygulamalarda bu seeneklerden bazlarn kullanacaksnz.
Tablo Oluturmak 225
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 yapmazsnz. Aadaki uygulamada tablolarda nasl
sralama yapldn greceksiniz.
1. Lesson_06_Tables/Explorations klasrndeki poses.html belgesini an, tabloyu
sein ve arsndan Commands > Sort Table komutunu sein.
Sort Table iletiim kutusu alacaktr.
2. Aada verilen seenekleri anlatld ekilde ayarlayn.
Sort by: Sralamada temel alnacak stunu sein. Bu uygulamada varsaylan seenek olan
Column 1i kullann.
Order: Stunu alfabetik olarak m yoksa saysal olarak m sralayacanz belirleyin. Bu
uygulamada Alphabetically seeneini iaretleyin (varsaylan). 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
Ascending (Adan Zye veya alaktan yksee) seeneini iaretleyin (varsaylan).
Then by: Bu uygulamada bu seenei bo (varsaylan) brakn. Then By ile farkl bir
stunda ikincil bir sralama gerekletirebilirsiniz. Mendeki sralama seenekleri Sort
Bydekilerle ayndr.
Sort includes the first row: Bu seenekle ilk satrn sralamaya dahil edilip
edilmeyeceini belirleyebilirsiniz. Eer ilk satr baka bir yere tanmamas gereken
226 DERS 6
bir stbilgiyse bu onay kutusunu iaretlemeden brakn (varsaylan). Ancak buradaki

uygulamada bu seenei iaretlemeniz gerekiyor.
Sort header rows: imdiki uygulamada bu seenek iaretsiz olarak kalsn (varsaylan).
Sort footer rows: Bu seenei de bu uygulama iin iaretsiz olarak brakn (varsaylan).
Keep all row colors the same after the sort has been completed: Bir satrn
herhangi bir niteliini deitirdiyseniz, bu seenei iaretleyerek satrdaki ilgili nitelii
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. imdiki uygulama iin bu seenei iaretlemeden
brakn (varsaylan ayar).
3. OK dmesine tklayn.
Tablo, ilk stundaki veriler kullanlarak alfabetik olarak sralanacaktr. Belgenizi kaydedin.
Tabloda Deiiklik Yapmak

Bir tablo oluturduktan sonra bu tablonun ok byk ya da ok kk olduunu veya yeni
stunlar ve satrlar eklemeniz gerektiini fark edebilirsiniz. Bu tablo zelliklerini kolayca
ayarlayabilirsiniz.
1. index.html belgesinde tabloyu sein ve Properties denetisindeki 500 olan genilik
deerini 650 yapn. Deiiklii uygulamak iin Return (Macintoshta) veya Enter
Bylece tabloyu bytm oldunuz.

Tablonun bykln, imleci tablo kenarlnn alt ya da sa kenarnn zerine
getirerek de ayarlayabilirsiniz. mle iki ulu bir ok halini alnca stun kenarln
srkleyerek tablonun bykln istediiniz hale getirin. Yeni deeri, tabloyu
seip Properties denetisindeki genilik (W) metin alanna baktnzda
grebilirsiniz. Bykln deitirmek zere bir tablonun kenarln srklerken
dikkatli olun. Siz kenarlklar bu ekilde srklerken Dreamweaver otomatik
olarak genilik ve ykseklik deerleri atar ve bu deerleri gnceller. Kimi zaman
burada elde edilen sonu sizin istediiniz gibi olmayabilir. Genilik ya da ykseklik
deerini silmek isterseniz, Properties denetisindeki Clear Column Widths ve
Clear Row Heights dmelerine tklayabilirsiniz. Bunun iin tablonun st
tarafndaki gri ubukta bulunan tablo genilii mensnden Clear All Heights ve
Clear All Widths komutlarn da kullanabilirsiniz.
Tablo Oluturmak 227
2. Tablodaki en son satrda sa tarafta yer alan hcreye (sa alttaki hcre) tklayn ve
Tab tuuna basn.
Eer imle bir tablonun son hcresindeyse, Tab tuuna bastnzda ekleme noktas yeni bir
satrn en soldaki hcresine yerletirilir.
Modify > Table komutunu seip u seeneklerden birini kullanarak yeni satrlar ve
stunlar ekleyebilirsiniz. Insert Row (geerli satrn zerine bir satr ekler); Insert
Column (geerli stunun soluna bir stun ekler); Insert Rows or Columns (bu
seenek, satr m, yoksa stun mu ekleyeceinizi, eklenecek satr veya stun
saysn belirlemenizi ve bu satrlarn ya da stunlarn nereye ekleneceini
belirlemenizi salar). Gri ubuk zerinde bir stunun geniliini gsteren yeil
izgiye tklayp alan menden Insert Column Left ya da Insert Column Right
komutunu seerek de yeni stunlar ekleyebilirsiniz.
3. Yeni eklediiniz satrn solundaki hcreye tklayp imleci saa doru srkleyerek
satrdaki btn hcreleri sein. Properties denetisindeki Merges selected cells
using spans dmesine tklayn.
Bu drt hcre, drt stuna yaylan tek bir uzun hcre haline gelecektir. lk hcrenin her
nitelii (renk ve hizalama gibi) yeni byk hcreye uygulanacaktr.
Benzer ekilde Properties denetisindeki Split Cell dmesine tklayarak veya
Modify > Table > Split Cell komutunu seerek hcreleri blebilirsiniz. Bu yntemle
hcreleri eski haline dndrebilir (eer hcreleri birletirdiyseniz) ya da bir
hcreyi istediiniz sayda satra ya da stuna blebilirsiniz.
Birletirme yntemiyle istediiniz sayda hcreyi tek bir stuna ya da tek bir satra
dntrebilirsiniz. Birden fazla satrda ve stunda yer alan hcreleri de birletirebilirsiniz.
Ama bu hcrelerin bir dikdrtgen oluturmas gerekir. Hcreleri birletirerek bir L ekli
oluturamazsnz.
Hcreleri birletirmek iin Modify > Table > Merge Cells komutundan da
faydalanabilirsiniz. Satrlar birletirmek iin kullanlan klavye ksayolu
Option+Cmd+M (Macintoshta) ve Ctrl+Alt+Mdir (Windowsta). Sadece M tuuna
bastnzda da seili hcreler birleir.
4. Birletirme yntemiyle oluturduunuz hcreye 2006, Yoga Sangha yazn.
Hcreleri birletirme imknyla sayfa yerleimi iin kullanabileceiniz pek ok ilve seenee
kavuursunuz.
228 DERS 6
Bir satr silmeniz gerekiyorsa ilgili satra tkayn ve Modify > Table > Delete
Row komutunu sein. Bunun iin tabloya Ctrl tuunu basl tutup tkladnzda
(Macintoshta) ya da sa tkladnzda (Windowsta) alan balam
mensnden Table > Delete Row komutunu da seebilirsiniz.
5. Ekleme noktas tablonun en son satrndayken Modify > Table > Insert Rows
or Columns komutunu sein. Ekrana gelen Insert Rows or Columns iletiim
kutusunda Insert seeneklerinden Rowsu iaretleyin, Number of Rows metin
alanna 1 yazn ve Where alanndaki seeneklerden Above the Selection
iaretleyin. OK dmesine tklayn.
Insert Rows or Columns iletiim kutusunu kullanarak yeni satr geerli satrn nne mi
yoksa arkasna m ekleyeceinizi belirleyebilirsiniz. Bu iletiim kutusunun yardmyla yeni
satrlarn veya stunlarn yerletirilecei konumu kontrol edebilir ve istediiniz sayda satr
veya stun ekleyebilirsiniz.
Modify > Table > Insert Row komutunu seerseniz yeni satr varsaylan
durumda geerli satrn zerine eklenir. Bunun iin stteki satra Ctrl tuunu
basl tutup tklayarak (Macintoshta) ya da sa tklayarak (Windowsta) alan
balam mensnden Table > Insert Rows or Columns komutunu seebilirsiniz.
Eklediiniz bu yeni satr, telif hakk bilgisi ve onun zerindeki snf programyla ilgili bilgiler
arasnda bir boluk olarak grev yapar. Sayfanzdaki her blme ya da bilgi blouna biraz
boluk vererek ziyaretilerin sayfadaki metinleri birbirinden ayrmasn salayabilirsiniz.
Tamam bir arada grnen byk metin bloklarn okumak zordur.
Tablolarn Darya Aktarlmas

Bir tablodaki bilgileri bir veritaban, bir hesap tablosu ya da bir kelime ilem veya sayfa
dzenleme uygulamasna aktarmanz gerekiyorsa, metni kopyalayp yaptrma yntemi
iinize yaramaz. Bu durumda herhangi bir satr ve stun biimlendirmesi olmayan bir
metin elde edersiniz. Ama tabloyu aktarabilir ve dosyay, ou kelime ilem ve hesap
tablosu uygulamasnn okuyabilecei, sekmeyle ayrlm bir dosya olarak kaydedebilirsiniz.
1. poses.html belgesinde tabloyu sein.
Aadaki admlarda, seili durumdaki tabloyu Dreamweaverdan yeni bir dosyaya

aktaracaksnz.
Tablo Oluturmak 229
2. File > Export > Table komutunu sein.
Export Table iletiim kutusu alacaktr.
3. Delimiter mensnden Tabi sein (varsaylan seenek).
ou kelime ilem ve hesap tablosu program hem virgl, hem de sekmeyle ayrlm
tablolar okuyabilir. File > Export > Table komutunu setiinizde varsaylan olarak Tab
seilir. Tablo verileri iin kullanlan ayrc seenekleri arasnda unlar bulunur: Tab
(Sekme), Space (Boluk), Comma (Virgl), Semicolon (Noktal virgl) ve Colon (ki
nokta st ste). Hangi seenei kullanacanzdan emin olamyorsanz Tabi sein.
4. Line Breaks mensnde, kullandnz iletim sistemine ait seenei iaretleyin
(varsaylan): Windows, Macintosh ya da Unix.
Satr sonu, her satrn sonuna eklenene karakterlerin addr. Ders 2de dardan metin
aktarrken satr sonlaryla almtnz. Kullanlacak satr sonu tipini seerken dosyay
kendisine aktaracanz iletim sistemini sein. Eer dosya farkl bir platformda
kullanlacaksa, kendinizinkinden farkl bir iletim sistemini semeniz gerekebilir.
5. Export dmesine tklayn. Alan iletiim kutusunda aktarlan dosyay yoga_
poses.txt olarak adlandrn ve Lesson_06_Tables/Text klasrne kaydedin.
Btn tablo, setiiniz isimle yeni bir dosyaya aktarlacaktr. Oluturduunuz dosya, bir
dz metin dosyasdr. Bu tr dosyalarn darya aktarlmasyla ilgili ayrntlar iin bu
programlarn Yardm belgelerine bavurabilirsiniz.
Tablolarda Resim Kullanmak

Tablolar genellikle bir sayfann yapsn birden fazla resimle desteklemek ya da blnm
bir resmi yeniden birletirmek iin kullanlr. Bir resim, Web iin optimize edilmek zere
birden fazla kk resme blnebilir (optimizasyon ileminde resmin dosya boyutu
kltlrken olabildiince yksek bir resim kalitesi salanmaya allr). Sonuta elde
edilen paralar bir tablo vastasyla hizalanmaldr. Adobe Photoshop ve Macromedia
230 DERS 6
Fireworks gibi birok resim dzenleme program, ilgili HTML belgesinde tablonun
oluturulmasyla birlikte aktarlan dilimleri otomatik olarak belirtmenizi salar.
Bu uygulamada, Yoga Sangha proje sitesinin sayfalarnda kullanabileceiniz bir tablo
oluturacaksnz. Ayn yerleim dzenini CSS kullanarak oluturmak da mmkndr.
Kitabn geri kalannda bunun zerinde alacaksnz.
1. Yeni bir HTML sayfas oluturun, yoga-table.html adyla Lesson_06_Tables
klasrne kaydedin ve bu sayfaya Yoga Sangha baln verin.
Bu sayfa bir dizi tablo ierecek.

2. u ayarlarla yeni bir tablo oluturun = satr says (Row) = 5, stun says
(Column) = 4, genilik = 754 piksel, Border thickness = 0, Cell Padding = 0
ve Cell spacing = 0. Header seeneini None olarak ayarlayn, Caption metin
alann bo brakn ve Summary metin alanna Yoga Sangha Content yazn.
Table iletiim kutusunu her kullannzda Dreamweaver otomatik olarak

btn seenekleri en son tablo iin kullandnz deerlerle doldurur.
Oluturduunuz tablonun grnts aadaki rnektekine benzeyecektir.
Border thickness, Cell Padding ve Cell Spacinge metin alanlarna 0

yazdnzdan emin olun. Bu alanlar bo braktnzda Cell padding ve Cell
spacing iin 1 deeri kullanlr.
Tablo Oluturmak 231
3. lk stundaki be hcreyi de sein ve birletirin (Merge). kinci stunda, stten

ikinci ve nc satrlardaki iki hcreyi sein ve birletirin. Drdnc satrda,
iki ve numaral stunlardaki iki hcreyi sein ve birletirin. Beinci satrda
da yine iki ve numaral stunlardaki iki hcreyi sein ve birletirin. Drdnc
stunda, drdnc ve beinci satrlarda yer alan iki hcreyi sein ve birletirin.
Tablonuz aada yer alan ekildeki gibi grnecektir.
Tablonuzun yapsnn noktal izgilerle gsterildiine dikkat edin, nk

kenarlk geniliini 0 olarak tanmlamtnz. mleci gri tablo genilii
ubuunun zerinde yer alan ve tablo geniliini kapsayan yeil izginin
zerine imleci getirdikten sonra Cmd (Macintoshta) ya da Ctrl (Windowsta)
tuuna bastnzda tablo yapsn dz bir krmz izgiyle
grntleyebilirsiniz.
4. Ekleme noktasn ilk stundaki tek hcrenin zerine getirin ve Properties
denetisindeki Vert mensn kullanarak hcrenin dey hizalama ayarn
Top olarak deitirin. Lesson_06_Tables/Images klasrndeki green-bar.gif
resmini hcreye ekleyin. Image Tag Accessibility Attributes iletiim kutusunda
Alternative text mensnde <empty> seeneini iaretleyin ve Long description
alann olduu gibi brakn.
Eklediiniz yeil ubuk resmi, tablo ne kadar byrse bysn, bu stunun st tarafnda
kalacaktr.
Bu resim, bir grsel tasarm eleman olarak ilev grr, dolaysyla burada alternatif metin
kullanmak gereksizdir. Ders 3te bahsedildii gibi, sadece yerleim dzeni ya da tasarm
232 DERS 6
iin kullanlan resimlerde alternatif kullanmaktan kann. Bu tr resimlerde <empty>

seenei kullanlmaldr; Alternative text alann bo brakmayn.
Dreamweaverda hcrelere resim eklediinizde bo hcrelerin daralarak sanki yoklarm
gibi grnme eiliminde olduunu grrsnz. Aslnda hla mevcutlardr, ama
skarak daralmlardr. Tablonun dnda bir yere ya da baka bir hcreye tklayarak
bunu grebilirsiniz. Bu aamada hcreleri yeniden boyutlandrmaya kalkmayn.
Hcreler skarak daraldklarnda tablo iinde hareket etmek iin kullanabileceiniz
baz seenekler mevcuttur. Byle durumlarda tablonuzun kenarlklarn ve stunlaryla
satrlarn tutup srklemeye almayn. Tablo iinde ok tularn ve Expanded tables
modunu kullanarak ilerleyebilirsiniz. Aadaki admlarda bunun nasl yapldn
greceksiniz.
5. Insert ara ubuunun Layout kategorisindeki Expanded dmesine tklayn.
Bu modu ap kapatmak iin F6 ksayolunu da kullanabilir veya modlar

arasnda gei yapmak isterseniz View > Table Mode komutunu seip
altmende istediiniz grnm modunu iaretleyebilirsiniz.
Getting Started in Expanded Tables Mode adnda aklayc bir iletiim kutusu
belirecektir. Aklamay okuduktan sonra OK dmesine tklayarak bu iletiim kutusunu
kapatabilirsiniz.
Belge penceresinin st ksmnda, ara ubuunun hemen altnda Expanded Tables
Mode [exit] yazl bir ubuk belirecektir. Bu, Expanded Tables modunun etkin
durumda olduunu gsterir. ubuktaki [exit] balantsna tklayarak ya da Insert ara
ubuunun Layout kategorisinde yer alan Standard dmesine tklayarak Standard moda
dnebilirsiniz.
Expanded Tables modunda tablolarnz biraz byr ve kenarlklar, hcre ieriiyle hcre
duvarlarnn arasndaki boluklar (cell spacing) ve hcreler arasndaki boluk da (cell
padding) bym gibi grnr. Grnteki bu deiiklikler sadece bu moddadr.
Tablonuzun byklnde ya da Border thickness, Cell Spacing ve Cell Padding
zelliklerinde herhangi bir deiiklik olmaz. Bu mod, tablolarn Web tarayclarndaki
grnmn temsil etmez. Sayfanz bu modda grntlediinizde tablolarnzn
boyutlarnda herhangi bir deiiklik yapmayn. Mmknse tablolarnzn boyutlarn
Standard modda deitirin.
Tablo Oluturmak 233
6. Ekleme noktasn ilk satrn ikinci stununa yerletirin ve Properties denetisindeki

Horz mensn kullanarak hcrenin yatay ayarn Center olarak deitirin. Images
klasrndeki above-nav.jpg resmini ekleyin. Image Tag Accessibility Attributes
iletiim kutusunda Alternative text mensnden <empty>yi sein ve Long description
alann olduu gibi brakn.
En stteki satrn ortasna yerletirilen bu resim, Yoga Sangha sitesinin grsel efektleri iin kullanlan
kk bir resimdir. Resmin ierdii mesaj iletmek iin alternatif metin zelliini kullanmak nemli
bir admdr. Eer resim herhangi bir bilgi iletmiyorsa <empty> seeneini kullann.
7. Ekleme noktasn yerletirmek iin nc stunun ilk satrnda yer alan hcreye
tklayn. Images klasrndeki yoga-s-header.jpg resmini bu hcreye ekleyin.
Alternatif metin olarak Yoga Sangha ifadesini kullann.
Expanded Tables modu etkin durumda olduu iin hcrenin iine kolayca tklayabilirsiniz.
234 DERS 6
Standard modu kullanyor olsaydnz ok tularn kullanarak daraltlm bir tablonun

iinde gezinmeye devam edebilirdiniz. Bunun iin Yoga Sangha balk resmini
sein ve sa ok tuuna bir kez basarak resimden dar kn. Ekleme noktas, bu
resmin hemen sanda nav_titlebar.gif resmini ieren hcrenin iinde olacaktr.
Resmin sa kenarnda resimle ayn ykseklikte, yanp snen bir imle
greceksiniz. Sa ok tuna bir kez daha basarak bir sonraki (nc) stuna gein
ve ekleme noktasn nc satra gtrmek iin alt ok tuuna bir kez basn.
Stunlar tamamen daraltldnda hcrelerin snrlarn gsteren noktal izgilerin
arasnda yanp snen imleci grmek zor olabilir. Daraltlm stunlar grmek iin
tablonun kenarlklarn srklemeye ve tabloyu yeniden boyutlandrmaya
kalkmayn. Tablonuzu yeniden boyutlandrdnzda ykseklik ve genilik etiketleri
eklenerek tablonun boyutlar deiir. Bu etiketlerle tanmlanan boyutlar sorun
yaratabilir (resimlerin birbiriyle tam olarak hizalanmamas gibi). Ykseklik ya da
genilik etiketleri oluturulmas durumunda tabloyu seebilir ve Properties
denetisindeki Clear Row Heights ve Clear Column Widths dmelerine
tklayabilirsiniz. Stun geniliklerini temizledikten sonra tablonun geniliini
yeniden tanmlamanz gerekebilir. mle doru hcrenin iine geldikten sonra
kk bir metin yazdnzda hcre geniler. Bu genileme, stunlar daha rahat
grmenize yardm eder. Bu yntemi kullanrken daha sonra metni sildiinizden ya
da uygun metinle ya da resimle (veya resimlerle) deitirdiinizden emin olmanz
ok nemlidir. Baz tablolarda ekstra karakterler sorun yaratabilir, zellikle de tablo
boyutlarn belirli resimlere gre hesapladysanz.
8. Ekleme noktasn yerletirmek iin drdnc stunun ilk satrndaki hcreye
tklayn. Images klasrndeki om.jpg resmini hcreye ekleyin. Alternatif metin
olarak OM ifadesini kullann.
Resim hcrenin iinde belirecektir.
Tablo Oluturmak 235
9. Insert ara ubuunda Layout kategorisinde yer alan Standard dmesine

tklayarak tekrar Standard moda gein.
Standard modda stunlarn resimlerle tam olarak hizalandna dikkat edin. Aadaki
uygulamalarda Standard modu kullandnzda tablolarla resimlerin birlikte gzel bir
yerleim dzenini nasl oluturduunu greceksiniz. Oluturduunuz tablolarda ekstra
boluklar olumasna izin vermeyin. Bunu Expanded modunda takip etmek zordur. nk
bu grnm modu ilve boluklarn ortaya kmasna sebep olur.
Eer tablolarnzda buradaki gibi birbiriyle tam olarak hizalanan resimler varsa, siz resim
eklerken, bu resimler hcreleri ayran noktal izgilerin grnmesini engelleyebilirler.
Tablolarla alrken, Dreamweavern hcre ve tablo kenarlklarn gstermek
iin kulland noktal izgilerin her birinin bir piksellik yer kapladn
unutmayn. Belge bir Web taraycsnda grntlenirken, noktal izgilerin
oluturduu bu ekstra boluklar grnmez. Ancak bu pikseller, tablolarn
Dreamweaverda normalden biraz daha byk grnmesine sebep olabilir.
rnein bir belgede ayn genilikte iki tablonuz olduunu kabul edelim. lk
tablonun be stunu ve ikinci tablonun da sadece tek bir stunu olsun. Ama bir
Web taraycsnda her iki tablo da ayn genilikte gzkse bile ikinci tablo
Dreamweaverda birinciye gre drt piksel daha geni gzkecektir. View >
Visual Aids > Table Borders komutunu kullanarak tablo kenarlklarnn etkinliini
istediiniz zaman kapatabilirsiniz. Dier yandan, tablo kenarlklar genellikle
ok faydaldr ve kapatldklarnda tablolarla almak ok zor olabilir.
10. Ekleme noktasn nc stunun ikinci satrndaki hcreye yerletirin ve
alternatif metin iin <empty > seeneini kullanarak flower.jpg resmini ekleyin.
Ekleme noktasn nc stunda ve nc satrda yer alan hcreye yerletirin
ve alternatif metin iin <empty > seeneini kullanarak tag-bkg.jpg resmini
ekleyin. Ekleme noktasn ikinci stunda yer alan ve tablonun ikinci ve nc
satrlarna karlk gelen hcreye yerletirin. Images klasrndeki cell-nav.jpg
resmini hcreye ekleyin. Ekleme noktasn drdnc stunun ikinci satrndaki
hcreye yerletirin ve alternatif metin iin Teachers at Yoga Sangha ifadesini
kullanarak teaching.jpg resmini ekleyin. Bunun altndaki hcreye de alternatif
metin iin Classes at Yoga Sangha ifadesini kullanarak class.jpg resmini
ekleyin. Tablonun dnda bir yere tklayn.
Tablonun dna tkladnzda Dreamweaver tablonun tazelenmesini salar ve hcreler

resimlerin kenarlar etrafna tam olarak oturur. Kimi zaman bir boluk resmi (genellikle bir
arp bir piksel boyutlarnda saydam ya da arka planla ayn renkte olabilen kk bir GIF)
kullanmanz gerekebilir. Bu resim, sayfann son grnmn oluturmak zere tablolardaki
satr ve stunlarn boyutlarn korumak iin kullanlr. Tablolarda istediiniz boyutlar
korumak iin genellikle bu tr resimler kullanmak gerekir. Boluklar dolduran bu resimler
236 DERS 6
olmazsa stunlarnz kayabilir. Stunlarn doru ekilde boyutlandrlmasn salamak iin bu

boyutlar doldurmak zere uzatlan ve boluk resmi olarak kullanlan GIFlerden (genellikle 1 X
1 piksel boyutlarndaki saydam dosyalar) faydalanabilirsiniz.
Tablolarda kk resimlerle alyorsanz, bu resimleri olutururken ve zerlerinde
deiiklik yaparken ok tularn kullanarak tablo iinde kolayca gezinebilirsiniz.
Tablonuzun grnm aadaki rnektekine benzeyecektir.
Eer tablonuz buradaki gibi grnmyorsa, Dreamweaver hcrelerinize boluk

ekliyor olabilir. Preferences iletiim kutusunu an, Code Format kategorisini
sein ve No Break After TD seeneinin iaretli olduundan emin olun.
Tablolar e Yerletirmek
ie yerletirilen tablolar denince, bir tablonun iine baka bir tablonun konmasn anlyoruz.
ie yerletirilen tablolar eitli amalarla kullanlrlar. Internetin ilk gnlerinde tablolarn i
ie yerletirilmesine kt bir uygulama olarak baklyordu. nk bu uygulama ziyaretinin
Web taraycsn kertmek gibi birtakm sorunlara yol ayordu. Gnmzde Web tarayclar
ok gelimi durumda. Bugn i ie yerletirilen tablolar, normalde ok karmak tek bir
tablo kullanlmasn gerektiren sayfalarda veya istenen tasarmn baka trl salanamayaca
durumlarda ska kullanlyor. Tablolar i ie yerletirerek olabildiince basit tablolarla ok
daha karmak yerleim dzenleri oluturabilirsiniz. Tek bir tablo kullanlacaksa ve bu tablo
ne kadar karmaksa, onu oluturmak da o kadar zor olur. Bu ayrca hatalarn veya Web
tarayclarnda grntlemeyle ilgili baka sorunlarn kmas ihtimalini de artrr.
Tablo Oluturmak 237
1. yoga-table.html belgesinde nceki uygulamada oluturduunuz tablonun

dna tklayn ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
u ayarlarla yeni bir tablo oluturun: Satr says = 2, stun says = 1, genilik =
176 piksel, Border = 0, Cell padding = 0 ve Cell spacing = 0. Header seeneini
None olarak ayarlayn, Caption metin alann bo brakn ve Summary metin
alanna Schedule of Classes yazn. OK dmesine tklayn.
Baka bir tabloya yerletirmeyi dndnz tabloyu byk tablonun dnda

oluturmak genellikle daha kolaydr. nk bu ekilde resim ve ierik eklerken kk
tablonun kenarlklarn aka grebilir ve kk tabloyla alrken kazara byk tabloya
tklama ihtimalini ortadan kaldrrsnz.
2. Ekleme noktasn ikinci satra yerletirin ve Schedule yazn.
Kk tablonuz aadaki gibi grnecektir.
3. Tab tuuna basarak sonuncu satrn altna bir satr ekleyin. Properties
denetisindeki Splits Cell into Rows or Columns dmesine tklayn ve Split
Cell Into alannda Rowsu iaretleyin. Number Of Rows metin alanna 7 yazn.
Split Cell into Rows or Columns dmesi
238 DERS 6
Tabloyu hazrladnz ve blerek oluturduunuz hcreye ierii yerletirmeye hazrsnz.

4. Text klasrndeki short-schedule.txt belgesini ve her gn iin bir satr
kullanarak ilgili metinleri kopyalayp yaptrn.
Bu tr ilemleri geekletirmek iin Dreamweaverda kullanabileceiniz

eitli yntemler mevcuttur ve kullanacanz yntem verilerin biimlendirilme
ekli gibi eitli koullara baldr. rnein metni aktarmak iin farkl bir
yntem olarak .txt dosyasn ayrlm bir dosya olarak kaydedebilir ve bunu bir
tablo olarak aktarabilirsiniz. Daha sonra hcreleri kopyalayp yaptrarak
geerli tablodakilerle deitirebilir ya da aktarlan tabloyu bu uygulamada
oluturduunuz tabloya benzeyecek ekilde deitirebilirsiniz.
Her satr bir gn temsil etmektedir.

Tablonuzun grnm aadaki rnektekine benzeyecektir.
Tablo Oluturmak 239
5. zerinde altnz ve snf program tablosunu ieren tabloyu sein,

ardndan Edit > Cut komutunu sein. Ekleme noktasn, nceki uygulamada
oluturduunuz tablonun drdnc stununda ve drdnc satrnda yer alan
hcreye yerletirin ve Edit > Paste komutunu sein.
Belgenizin grnm aadaki gibi olacaktr.
Artk kk tablo ilk tablonun iine yerletirilmi durumdadr. Bu uygulamada byk

tablolu bir yerleim dzenini basitletirmek iin bir tabloyu baka bir tablonun iine
yerletirdiniz.
240 DERS 6
ie tablo yerletirirken be ya da altnc seviyeden daha derine inmekten kann.

Eski Web tarayclarnn (zellikle de Netscapein eski srmleri) derin bir ekilde i ie
gemi tablolar grntlemede sorun karabileceini (bazen bu i ie gemi tablolar
grntlemek iin gereken ar bellek gereksinimi dolaysyla) unutmayn. ie
yerletirdiiniz tablolarn ziyaretiler tarafndan sorunsuzca grntleneceinden emin
olmak iin sayfalarnz farkl platformlarda, farkl Web tarayclarnda test etmeniz gerekir.
Tablolar gereksiz yere i ie yerletirmeyin. Tablolar i ie yerletirmek; kapsaml, gelimi
yerleim dzenleri oluturmak iin kullanabileceiniz iyi bir tekniktir, ama dikkatli bir
ekilde ve gerekli yerlerde kullanlmaldr. ie yerletirdiiniz tablolarn seviyesi ok
derinlere iniyorsa, muhtemelen yerleiminizi yeniden gzden geirmeniz gerekecektir.
Daha basit bir yerleim dzeni, daha az kod oluturmak ve dolaysyla sayfalarn daha hzl
yklenmesi ve problem kma olaslnn azaltlmas anlamna gelir. Oluturduunuz
sayfalarla bir Web taraycsnda istediiniz grnty alamyorsanz, ok seviyeli tablolar
koddaki hatalarn sebebini bulmanz da zorlatrabilir.
Bilgisayar Ekranlar in Tasarm Yapmak

Basl medya dnyasnda tasarmclar sonuta sabit byklkte grlecek olan sayfalar
hazrlar. Kt, bask kalitesi ve boyutlar btnyle kontrol altndadr. Dier yandan
bir Web tasarmcsnn ok sayda olasl hesaba katmas gerekir. Sadece ziyaretilerin
kullanaca eitli Web tarayclarn hesaba katmanz yetmez. Bunun dnda,
monitrlerinin bykln ve znrln de dikkate almanz gerekir. Kullanclarn
Web sayfalarn grntlemek iin faydaland ekran tiplerinin says olduka artmtr ve
artmaya da devam edecektir. nsanlar Web sayfalarn bilgisayarlarda, televizyonlarda, cep
telefonlarnda, PDAlerde (Palm gibi), vb eitli cihazlarda grntlemektedir.
Bir sayfaya sadece metin koyacaksanz, metnin tarayc penceresi byklne bal
olarak sayfada yeniden akacan unutmayn. Daha sonra bir Web tasarmcs olarak
sayfann grnm zerinde herhangi bir kontrol imknnz olmayacaktr. Kullanc
pencereyi ekran kaplayacak ekilde geniletebilir, metni uzun, okunmas zor satrlar
halinde grntleyebilir. Metnin sayfadaki akn kontrol etmek isterseniz metnin bir
hcredeki satr uzunluunu snrlamak iin CSS kullanabilir ya da metni bir tabloya
yerletirebilirsiniz.
Sabit genilikte bir sayfa hazrlarken, tasarmnz ziyaretilerinizin kullanaca ortak
monitr byklklerinden en dk olanna gre yapmanz iyi olabilir. Kullanclarnzn
ounun 13 inlik monitr olduunu dnyorsanz bu bykl kullanmalsnz.
Kullanc pencereyi ekran kaplayacak ekilde bytse bile, Web taraycsnn ekrann
solunda ve sanda biraz yer braktn unutmayn. Taraycnn kulland alann
miktaryla ilgili belirli bir kural yoktur, bu yzden taraycnn boluk brakmasna izin
vermelisiniz. rnein 13 inlik monitrlerde maksimum sayfa geniliini 600 piksel yapn
Tablo Oluturmak 241
(Web taraycs ve iletim sisteminin kulland alan hesaba katlmamtr). Maksimum sayfa
geniliini belirlemek iin aadaki tablodan faydalanabilirsiniz.
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
1200 X 1024
17- 19 inlik monitr

21 inlik monitr
Ziyaretilerin Web sayfalarnn ktlarn alabilmesi dikkate alnmas gereken

nemli bir noktadr. Sayfalarnz yazdrlabilir hale getirmeniz veya metin arlkl
sayfalarn ya da ziyaretilerin yazdrma ihtiyac duyabilecei sayfalarn
yazdrlabilir versiyonlarn siteye dahil etmeniz ok nemlidir. Yazdrlabilir bir
sayfa iin kullanlan boyut 553 pikseldir. Her ne kadar tablolarla yerleim
dzeni oluturmak kolay olsa da, birok nedenden dolay CSS kullanmak tercih
edilir ve k almak da bu nedenlerden biridir. CSS, tasarmda daha fazla
esneklik imkn sunar ve sadece bask amacyla kullanlan zel CSS dosyalar
oluturmanz ve bylece yerleim dzeninizin kolayca yazdrlabilmesini salar.
Window Size Mensn Kullanarak Sayfa Dzenini

Kontrol Etmek
Window Size mensn kullanarak, sayfalarnzn farkl byklkteki ekranlarda nasl
grneceini belirlemek zere sayfa dzeninizi dorudan Dreamweaver iinde kontrol
edebilirsiniz.
Belge penceresinin alt ksmnda, geerli pencere bykl bilgisinin (boyutlar) sanda yer
alan siyah oka tklayn. 760 x 420 (800 x 600 Maximized) seeneini iaretleyin.
Windows kullanclar iin: nce belge penceresindeki Restore/Maximize (nceki
Boyut/Ekran Kapla) dmesine tklamanz gerekir (uygulamann Restore/Maximize

dmesine deil). Belge penceresi, klerek belge alannda kayar durumdaki bir
pencereye dnecektir. Bu grnmde sadece pencere bykln ayarlayabilirsiniz.
Bu uygulamadan sonra belge penceresinin Restore/Maximize dmesine tekrar tklayarak
tekrar sekmeli arabirime geebilirsiniz.
242 DERS 6
The Document window resets to 760420. This size accounts for the space taken up by the
browser and operating system on a screen at the 800600 resolution.
Belge penceresi bykl tekrar 760 x 420 olacaktr. Bu byklk, Web
taraycs ve iletim sistemi tarafndan 800 x 600 znrlkteki bir ekranda
kullanlan deerdir.
Mennn en altnda yer alan Edit Sizes komutunu kullanarak kendi byklk
deerlerinizi de listeye ekleyebilirsiniz.
Siz Dreamweavern belge penceresi bykln deitirirken Window Size alanndaki

boyutlarn yeni byklk deerini yanstacak ekilde deitiine dikkat edin.
Layout Grnmnde Tablo Oluturmak

Dreamweaver 8 tablo oluturmak iin kullanabileceiniz Layout adnda bir moda daha
sahiptir. Layout 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.
Katmanlar gibi baz Dreamweaver zellikleri Layout modunda almaz (katmanlar konusunu
Ders 9da greceiz). Bu zellikleri kullanmak iin Standard moda gemeniz gerekir.
Layout modunda, oluturduunuz tablolarla hcrelerin genilik ve ykseklik
ayarlarnn tam saysal deerleri, ayrca bu hcrelerin yerleimi burada
gsterilen rneklerden biraz farkl olacaktr. Bu rnekleri sayfanzn genel
yerleim dzeni iin birer klavuz olarak kullanabilirsiniz.
1. Lesson_06_Tables/Schedule klasrndeki events.html belgesini an.
Sonraki admlarda bu belgede bir tablo oluturmak iin Layout modunu kullanacaksnz.
2. Insert ara ubuunun Layout kategorisindeki Layout dmesine tklayn.
Tablo Oluturmak 243
Bylece Layout moduna gemi oldunuz. Burada gereken elemanlar sayfanza kolayca
yerletirebilirsiniz. Burada Getting Started in Layout Mode balkl bilgi penceresini
grebilirsiniz. Bu pencere ksaca temel aralar tanmlamaktadr: yerleim hcresi ve yerleim
tablosu. OK dmesine tklayarak bu iletiim kutusunu kapatabilirsiniz.
Dont Show Me This Message Again eklinde bir onay kutusu greceksiniz.
Bu kutuyu iaretsiz olarak brakrsanz Dreamweaver bir sonraki anzda
Layout moduna getiiniz takdirde bu iletiim kutusu yine karnza kacaktr.
Document ara ubuunun hemen altnda, zerinde Layout Mode [exit] metni ortalanm
olarak bulunan bir ubuk belirecektir (belgenin iindeymi gibi grnr). Bu ubuk Web
taraycsnda grnmez, nk sadece Dreamweaverda, o da Layout modunda altnz
gstermek iin kullanlr. Expanded modunda olduu gibi Insert ara ubuunun Layout
kategorisinde yer alan Standard dmesine tklayarak ya da Layout modundayken belgenin
st ksmndaki ubukta yer alan [exit] balantsna tklayarak tekrar Standard moda
geebilirsiniz.
Layout moduna gemek iin View > Table Mode > Layout Mode komutunu
seebilir ya da Cmd+F6 (Macintoshta) veya Ctrl+F6 (Windowsta) klavye
ksayolunu kullanabilirsiniz.
3. Insert ara ubuunda Layout kategorisinin seili olduundan emin olun ve
buradaki Draw Layout Cell dmesine tklayn.
Siz Draw Layout Cell aracn setikten sonra, belge penceresine gtrdnzde imle art
iaretine (+) dnecektir. Etiket Seicinin (Tag Selector) yerini, setiiniz arala ilgili bir
aklama alacaktr.
Yerleim hcreleri, sayfann istediiniz yerine hcre izmenizi salar. Layout 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.
Layout Table aracn, Layout modunda baka bir tablonun hcrelerinden birinde
bir tablo izmek iin kullanamazsnz. Tablolar i ie yerletirmek iin Standard
modu kullanmanz gerekir.
4. mleci sayfann ortasna yerletirin, sonra da tklayp srkleyerek yeni hcreyi izin.
Otomatik olarak hcreyi ieren bir yerleim tablosu izilecektir. Yerleim tablosu yaklak
belge penceresinin geniliinde izilir. Ama siz tabloyu istediiniz boyutlarda olacak ekilde
244 DERS 6
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.
Sekmeyi ve ubuu gizlemek iin View > Visual Aids > Table Widths komutunu
sein. Bu dersin geri kalan blmnde varsaylan grsel yardmclarn etkin
olduu ve yerleim tablosunda sekmeyle ubuu grebildiiniz varsaylmtr.
Tablo Oluturmak 245
5. Lesson_06_Tables/Images klasrndeki yoga_sangha-title.jpg resmini yeni

izdiiniz yerleim hcresine ekleyin. Alternatif metin alanna Yoga Sangha
yazn.
Assets panelindeki (Image seenei etkinken) Site blmn kullanarak

resmi seip Assets panelinden sayfadaki hcrenin zerine
srkleyebilirsiniz.
Bylece bir resim eklemi oldunuz. Hcre, resimden kkse resmi iine alacak ekilde
byyecektir. Yeni byklk deerinin, tablo genilikleri ubuundaki orijinal stun
byklnn yannda parantez iinde grntlendiine dikkat edin.
Siz resmi eklediinizde tablo genilikleri ubuu ortadan kaybolabilir. Bu
ubuu tekrar grntlemek isterseniz imleci hcrenin alt kenarnn zerine
getirin.
246 DERS 6
Tablo Yerleiminde Deiiklik Yapmak

Layout modunda sayfalarnz tasarlarken ierik ekleme aamasnda hcreleri tamak,
yeniden boyutlandrmak ya da yeni hcreler eklemek isteyeceksiniz. Yerleim iin
kullanlan bir hcre dier hcrelerin zerini rtemez ve yerleim tablosunun dna
tanamaz.
1. events.html belgesinde imleci kenarln zerine getirip krmzya dndnde
kenarla tklayarak hcreyi sein.
Hcre kenarlnn rengi maviye dnecek ve tutamalar belirecektir. Bu tutamalar

srkleyerek hcrenin boyutlarn deitirebilirsiniz.
Boyutlandrma tutamalarn, Cmd (Macintoshta) ya da Ctrl (Windowsta)
tuunu basl tutup bir hcrenin iine tklayarak da grntleyebilirsiniz.
2. Hcre resimden daha bykse tutamalaryla hcre kenarln srkleyerek
hcreyi resmi tam olarak saracak ekilde yeniden boyutlandrn. Hcrenin
bykl resimle ayn olmaldr.
Tablo genilii ubuu hcrenin alt ksmndaki dier seim tutamalarn

rtyorsa, boyutlar yeniden ayarlamak iin hcrenin sol alt kesindeki
seim tutamacn kullann. Btn grsel yardmclar gizlemek iin alternatif
olarak Cmd+Shift+I (Macintoshta) ya da Ctrl+Shift+I (Windowsta) klavye
ksayolunu kullanabilirsiniz. Hcreyi yeniden boyutlandrdktan sonra ayn
komutu tekrar kullanarak grsel yardmclar etkinletirin.
Table sekmesinde, parantez iinde gsterilen byklk eski byklk deerinin yerini
alacaktr. lk oluturduunuz hcre resimden daha kkse, hcre resmi tam olarak
saracak ekilde otomatik olarak byyecektir. Bu durumda sizin hcreyi yeniden
boyutlandrmanza gerek kalmaz. Eer oluturduunuz hcre resimden daha bykse,
hcrenin bykln yerleim hcresinin kenarlklar resmin kenarlaryla tam olarak
hizalanacak ekilde ayarlamanz gerekir.
3. Hcrenin kenarlna (yeniden boyutlandrma tutamalarna deil) tklayn ve
hcreyi sayfann ortasna, yukarya doru srkleyerek tayn.
Hcreyi ortalamak zere sola ya da saa doru tarsanz, yerleim tablosundaki stun
numaralarnn yeni bykl gsterecek ekilde deitiini grrsnz.
4. Ok tularn kullanarak hcreyi sola tayn.
Ok tularna her basnzda hcre 1 piksel tanr. Shift tuunu basl tutarak hcreyi bir
seferde 10 piksel tayabilirsiniz. Bu hcreyle tablonun yan taraf arasnda biraz boluk
brakn.
Tablo Oluturmak 247
5. Draw Layout Cell aracn tekrar sein ve en stteki hcrenin altnda sayfann
ortasna doru tek bir stunda hcre daha oluturun. Aralarnda biraz boluk
kalmasna dikkat edin.
Sayfanzn grnts aada yer alan rnektekine benzeyecektir. Tablo genilik ubuunda
yer alan stunlarn byklkleri konusunda endielenmeyin. Bunlar yerleim iin
kullandnz hcrelerin yerletirilme ekline gre deiirler.
Sayfada bir hcre izerken, ilk izdiiniz hcreyle hizalamak istediiniz dier hcreleri
yerletirmenize yardmc olan beyaz klavuz izgileri belirir. Hcrelerin st taraflarn
hizalamak iin yatay klavuz izgilerini kullanabilirsiniz.
Draw Layout Cell dmesine birden fazla kez tklamadan birden fazla hcre
izmek isterseniz ilk hcreyi izerken Cmd (Macintoshta) ya da Ctrl
(Windowsta) tuunu basl tutun. Yardmc tuu brakana kadar yeni hcreler
izmeye devam edebilirsiniz.
6. Yeni oluturduunuz hcreden en sttekini yoga_sangha-title.jpg resmini ieren
hcreyle ayn genilie sahip olacak ekilde bytn. Lesson_06_Tables/Text
klasrndeki events.txt dosyasn an. lk stbilgi satrn ve altndaki paragraf
kopyalayn, metni yoga_sangha-title.jpg resminin altndaki ilk hcreye yaptrn.
Hcre gerekirse bu ierii alacak ekilde byyecektir.

7. Lesson_06_Tables/Images klasrndeki om.jpg resmini, metni yaptrdnz
hcrenin altndaki bo hcreye ekleyin. Hcreyi resimle ayn byklkte olacak
ekilde ayarlayn ve sayfann ortasna tayn. events.txt dosyasndaki geri kalan
metni kopyalayn ve son hcreye yaptrn.
248 DERS 6
Sayfanzn grnts buradaki rnektekine benzeyecektir.
Hcrelere Biimlendirme Uygulamak

Standard modda olduu gibi eitli tablo niteliklerini (hcre rengi ve hizalama gibi)
deitirebilirsiniz.
events.html belgesinde, hcre kenarlna tklayarak om.jpg resminin zerindeki hcreyi
sein. Properties denetisindeki Bg metin alanna #FFCC99 renk kodunu girin. kinci metin
hcresinin arka plann da ayn renge ayarlayn.
Hcre renk deitirerek setiiniz rengi alacaktr. Ekleme noktasn hcrenin iine
yerletirmeyip hcreyi gerekten setiinizden emin olun. Bylece seim tutamalarn
grebilirsiniz.
Tablo Oluturmak 249
Btn tablonun arka plan rengini deitirmek iin yeil tablo kenarlna ya
da tablonun gri alanlarndan herhangi birine tklayarak tabloyu sein. Bg renk
kutusuna tklayn ve tablo iin bir renk sein.
Layout Modunda Genilik Ayar

Layout modunda tablolarn geniliini iki ekilde kontrol edebilirsiniz: Sabit bir genilik
deeri ayarlayarak (varsaylan) ya da Autostretch seeneini kullanarak. Bu seenek,
hcrelerin geniliinin taraycnn geniliine bal olarak deitirilmesini salar. imdiki
uygulamada genilii Autostretch seeneiyle kontrol edeceksiniz.
1. events.html belgesinde, yoga_sangha-title.jpg resminin hemen altnda yer alan
en st metin hcresini sein. Properties denetisindeki Width alannda yer alan
Autostretch seeneine tklayn.
Sitenizle bir boluk resmi (spacer) ilikilendirilmediyse Choose Spacer Image iletiim
kutusu alacaktr.
Alan iletiim kutusunda Use an existing spacer image file seeneini iaretleyin, OK
dmesine tklayn ve Lesson_06_Tables/Images klasrndeki spacer.gif resmini bulun.
Boluk resmi dosyasnn konumu tercihlerinizle birlikte kaydedilecektir. Boluk resmini
deitirmek ya da silmek isterseniz, Dreamweaver > Preferences (Macintoshta) ya da
Edit > Preferences (Windowsta) komutunu sein, ardndan da Layout Mode kategorisini
seerek Yoga Sangha sitesinin boluk resminin ayarlarn yapn.
250 DERS 6
Choose Spacer Image iletiim kutusu, boluk resmi dosyas oluturmak iin
kullanabileceiniz bir seenek ierir. Mevcut bir boluk resmi olmayan bir
sitenin zerinde alyorsanz bu seenei iaretlemeniz ve OK dmesine
tklayarak Dreamweavern boluk resmini kaydetmesini istediiniz dizine
gitmeniz gerekir. Bunun iin en iyi konum Images klasrdr.
Autostretch stunu, tablo genilii ubuunda zikzakl bir izgi eklinde grnr. Bunu
grmek iin ekran kaydrarak belgenin en altna inmeniz gerekebilir. Autostretch
seeneini kullandnzda Dreamweaver sabit genilikli stunlarn yerleimini kontrol
etmek iin boluk resimleri ekler. Boluk resmi yerleimdeki boluu kontrol eder, ama
tarayc penceresinde grnmez.
Autostretch seeneini uygulamak iin tablo genilii ubuunda bir

stunun mensne tklayarak Make Column Autostretch komutunu
semeniz de mmkndr.
2. Sayfay kaydedin ve Web taraycnzda nizleyin. Sonra da taraycnn
geniliini deitirin.
Siz genilii deitirirken stunun genilediine dikkat edin. Bir stun iin Autostretch
seeneini kullandnzda bu stuna ait btn hcreler bu seenekten etkilenir.
Sayfadaki beyaz izgileri kullanarak setiiniz stunda baka hcre olup olmadn
belirleyebilirsiniz.
Boluk resmi kullanmamaya karar verirseniz, stunlarn bykl deiecek, hatta ierik
tamyorlarsa stunlar ortadan kaybolacaktr. Bir Autostretch stunu oluturulduunda
boluk resimlerini kendiniz ekleyebilir ve silebilir ya da Dreamweavern bunlar otomatik
Tablo Oluturmak 251
olarak eklemesini salayabilirsiniz. Bu resimleri kendiniz ekleyecek ya da silecekseniz,

stun stbilgi mensnde yer alan u komutlardan birini kullann:
Add Spacer Image: Boluk resmi stuna eklenir. Siz boluk resmini grmezsiniz,
ama stun hafife kayabilir.
Remove Spacer Image: Boluk resmi silinir ve stun kayabilir.
Remove All Spacer Images: Btn yerleim dzeniniz ieriinize bal olarak
hafife ya da cidd lde kayabilir. Baz stunlarda ierik yoksa bunlar ortadan
kaybolabilir.
Stun menleri balama duyarldr ve hangi stunu setiinize bal olarak deiirler.
Yukardaki seenein hepsi btn stunlarda mevcut deildir.
events.html belgesini kapatabilirsiniz.
Taslak Resim Kullanmak

Kimi zaman Macromedia FreeHand, Adobe Photoshop ya da QuarkXPress gibi bir resim
programnda bakalarnn tasarlad sayfalarla almanz gerekebilir veya elinizde
sayfann bir ekran grnts olabilir. Bu sayfay bir JPEG, GIF ya da PNG resmine
dntrebilirseniz bu resmi Dreamweavera aktarabilir ve HTML sayfasn yeniden
oluturmak zere bir klavuz ya da taslak resim olarak kullanabilirsiniz.
Taslak resim sadece Dreamweaver iinde grnr durumdadr. HTML koduna gmlmez
ve Web taraycsnda grntlenmez. Taslak resim Dreamweaverda sayfanzdaki her eyin
arkasnda grnr. Bir taslak resim kullanrken sayfanzn arka plan resmi ya da arka plan
rengi gizlenir, ama sayfay bir Web taraycsnda atnzda bu arka plan resmini ya da
rengini yine grrsnz.
1. Lesson_06_Tables klasrndeki layout.html belgesini an ve Standard moda
gein.
imdiki uygulamada bu belgeye bir taslak resim ekleyeceksiniz.

2. View > Tracing Image > Load komutunu sein.
Select Image Source iletiim kutusu alacaktr.

3. Lesson_06_Tables/Images klasrnde bulunan design_trace.jpg dosyasn
sein, sonra da Choose (Macintoshta) ya da OK (Windowsta) dmesine
tklayn.
Page Properties iletiim kutusu alacaktr.
252 DERS 6
4. Tracing Image kategorisini sein. Resminizi sayfada grmek iin Apply

dmesine tklayn. Resmin rengini yzde 50 orannda amak iin
Transparency srgsn sola doru srkleyerek ayarlamay yapn. Deiiklii
grmek iin Apply dmesine tklayn.
Resmi grmek, ama ayn zamanda resmin dikkatinizi datmamasn istiyorsunuz.
5. Page Properties iletiim kutusundaki Appearance kategorisine tklayn ve sol

(Left margin), sa (Right margin), st (Top margin) ve alt (Bottom margin)
kenar boluklarn sfr olarak ayarlayn. OK dmesine tklayarak Page
Dreamweaver, tarayc penceresinin kenaryla sayfada yer alan elerin arasndaki kenar
boluunun bir benzerini oluturur. Page Properties iletiim kutusunu kullanarak bu
kenar boluunda deiiklik yaparsanz Dreamweaver taslak resmi yerletirmek iin sizin
belirlediiniz kenar boluu seeneklerini kullanr. Varsaylan kenar boluu (Margin
metin alan bo braklrsa kullanlr), kullanlan Web taraycsna gre farkllk gsterebilir,
ama yaklak olarak 7 pikseldir.
View > Tracing Image > Adjust Position komutunu seip x ve y koordinat
deerlerini girerek bir taslak resmin konumunu deitirebilirsiniz. Taslak
resmi Page Properties iletiim kutusunda tanmland ekliyle kenar boluu
iin ayrlan yere tarsanz, koordinat deerleri negatif olur. View > Tracing
Image > Reset Position komutunu setiinizde taslak resim belge
penceresinin sol st kesindeki yerine dner ve kenar boluklar (0 + kenar
boluu, 0 + kenar boluu) eklinde ayarlanr. View > Tracing Image > Align
with Selection komutunu setiinizde ise taslak resim seili durumdaki
elemanla hizalanr. Taslak resmin sol st kesi, seilen elemann sol st
kesiyle hizalanr.
Tablo Oluturmak 253
6. Sayfann en stne Download the latest schedule of classes at Yoga Sangha yazn.
Metnin, arkasnda taslak resimle birlikte grntlendiine dikkat edin. Bir sayfann yerleim
dzenini hazrlarken bir taslak resimden klavuz olarak faydalanabilirsiniz. Taslak resim
kullanarak sayfanzn nasl grneceini nceden ayrntl ve ak bir ekilde planlayabilirsiniz.
Btn ak belgeleri kaydedip kapatabilirsiniz.
Ne rendiniz?
Standard modda bir tablo oluturdunuz (Sayfa 209215).

Harici bir belgedeki sekmeli verileri bir Dreamweaver tablosu olarak aktardnz
(Sayfa 215219).
Tablo
zelliklerinde deiiklikler yaptnz (kenarlk, arka plan, boluk, renk, hizalama ve

byklk) (Sayfa 220225).
Bir
tablodaki bilgileri sraladnz (Sayfa 226227).

Satr, stun ekleyerek ve bunlar birletirerek bir tabloda eitli deiiklikler yaptnz
(Sayfa 227229).
Bir Dreamweaver tablosunu, dier uygulamalarn okuyabilecei bir ASCII metin
dosyasna aktardnz (Sayfa 229230).
ine
eitli resimler yerletirmek zere bir tablo oluturdunuz (Sayfa 230237)

Bir tabloyu dier bir tablonun iine yerletirerek tablolarn i ie nasl kullanldn
rendiniz (Sayfa 237241).
Ekran bykl ve ekran znrlnn kullancdan kullancya deimesinin sayfa
dzenini belirlemenizde nasl etkili olduunu rendiniz (Sayfa 241243)
Layout modunda sayfalarnzn yerleim dzenini ayarlamak iin tablolardan
faydalandnz (Sayfa 243252).
Yerleim
dzeni iin klavuz olarak kullanmak zere bir taslak resim aktardnz

(Sayfa 252254).
254 DERS 6
Multimedya Bileenlerini
Kullanmak
Macromedia 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 derste Flash ve QuickTime filmlerini bir araya getiren Web sayfalar oluturacaksnz.
Bu derste elde edilen sonucu grmek isterseniz, Lesson_07_Multimedia klasrnde
yer alan Completed alt klasrndeki index.html dosyasn an.
Bu derste sayfalarnza
multimedya elemanlarn
eklemeyi renecek ve
buradakine benzer bir
sayfa oluturacaksnz.
Neler reneceksiniz?
Farkl fontlara ve byklk deerlerine sahip metinleri hzl bir ekilde oluturmak
iin Flash metinleriyle alacaksnz.
Flashtan dme ve animasyon aktararak bunlar sayfalarnza ekleyeceksiniz
Image Viewer kullanarak bir slayt gsterisi hazrlayacaksnz.
Sayfanza bir QuickTime filmi ekleyeceksiniz.
Yaklak Sre
Bu dersin tamamlanmas yaklak yarm saat srecektir.
Ders Dosyalar
Ortam Dosyalar:
Lesson_07_Multimedia/Images/Chakras.swf
Lesson_07_Multimedia/Images/Videos/
Balang Dosyalar:
Lesson_07_Multimedia/index.html
Tamamlanm Proje:
Lesson_07_Multimedia/Completed/
256 DERS 7
Flash Metni Oluturmak

Sayfanza bir konu bal eklerken metin kullanabilir ve bu bal bir ekilde gvde
metninden farkl olacak ekilde ayarlayabilirsiniz (rnein bir heading etiketi olarak
biimlendirerek) ya da bir resim oluturarak bunu sayfanza ekleyebilirsiniz. Metinlerin,
Web sayfalarnda daha hzl yklenme gibi bir avantaj vardr, ama CSS ile kullanlsa
bile grnmle ilgili birtakm kstlamalar sz konusudur. Konu bal olarak resim
kullandnzda eksik fontlarla ilgili sorunlar zebilirsiniz, ancak elinizin altnda bir
resim program olmayabilir veya istediiniz resmi hazrlayacak vaktiniz olmayabilir.
Flash metinleri bu seeneklerin her ikisinden de en iyi ekilde faydalanmanz salar.
Bu ekilde, istediiniz fontu kullanabilir ve metni dorudan Dreamweaver iinde
oluturabilirsiniz. Oluturduunuz metin kk bir Flash dosyas olarak kaydedilir ve bu
dosyalar .SWF uzantsn kullanr.
Flash metinleri oluturmak ve bunlarla almak kolay ve hzl bir yntemdir,
ancak bu ekilde oluturduunuz bileenleri sitenize eklemeden nce
ziyaretilerin doru eklentilere sahip olup olmayaca konusunu iyice
dnmeniz gerekmektedir.
1. Lesson_07_Multimedia klasrndeki index.html belgesini an. Ekleme
noktasn belgenin st ksmna yakn bir konumda bulunan Welcome to Yoga
Sangha metninin altnda yeni, bo bir paragraf satrna yerletirin. Insert ara
ubuunun Common kategorisinde yer alan Media mensne tklayn ve
menden Flash Texti sein.
Flash ya da Flash Button seeneklerine tklamadnzdan emin olun. Bu uygulamada

Flash metni oluturma konusuyla ilgilidir. Flash seenei sayfanza Flash filmleri
eklemenizi, Flash Button seenei de dme oluturmanz salar. Bu seeneklerin ikisi de
Flash metninden farkldr.
Insert Flash Text iletiim kutusu alacaktr.
Multmedya Bleenlern Kullanmak 257
2. Aada belirtilen seenekleri anlatld ekilde ayarlayn.
Font mensnden Comic Sans MSi sein. Eer Comic Sans MS fontu yoksa baka bir
font sein.
Size metin alanna 22 yazn.
Color kutusunu kullanarak #FFCC00 deerine sahip turuncu rengi sein.
Text penceresine Welcome to Yoga Sangha yazn.
Rollover color (Rollover metni) alanna #FFFFCC yazn.
3. Save as metin alanna welcome.swf yazn ve ardndan OK dmesine tklayn.
Insert Flash Text iletiim kutusu kapanacak, Flash metni belge penceresinde belirecek ve
Flash Accessibility Attributes iletiim kutusu alacaktr.
258 DERS 7
Balangta Save as metin alanna otomatik olarak varsaylan bir dosya ad

yazlacaktr. Bu varsaylan isim bir saysal tantc ile birlikte oluturulur (text1.
swf, text2.swf vs). Bu genel ismi, oluturduunuz Flash metni dosyasn
tanmlayacak bir isimle deitirmeniz tavsiye edilir. Flash metninin
kaydedildii varsaylan konum, bu Flash metnini eklediiniz HTML
dosyasnn bulunduu klasrdr. Dilerseniz baka bir klasre de (rnein
Resimler klasrne ya da Ortam klasrne) kaydedebilirsiniz.
4. Title metin alanna Welcome to Yoga Sangha yazn ve OK dmesine tklayn.
Buradaki dier seenekler Access key ve Tab indextir (bunlarla ilgili ayrntlar Ders 11de
greceksiniz). Flash metni belgenizde belirecektir. Properties denetisinde welcome.swf
Flash metin dosyasnn niteliklerinin grntlendiine dikkat edin.
5. Belge penceresinde Flash metnini sein ve tutamalardan birini srkleyerek
metnin boyutlarn deitirin.
Flash metnini hangi bykle getirdiiniz nemli deildir. Bu, normal bir gvde
metni ya da bir Bitmap resmi deil de vektr tabanl bir Flash metni olduu iin bunun
bykln dorudan belge penceresinde ayarlayabilirsiniz. Resim kalitesinde dme
olacak diye endielenmeden resmin boyutlarn istediiniz gibi bytebilir ya da
kltebilirsiniz.
Dreamweaverda resimleri yeniden boyutlandrabilirsiniz, ancak bu pek tavsiye edilmez,
nk znrl ayarlayamazsnz. Fakat oluturduunuz Flash metni formundaki
resmi yeniden boyutlandrabilirsiniz, nk bu vektr tabanl bir resimdir. Vektr tabanl
resimler leklendiinde resmin btnln korurlar, ama bitmap resimleri (GIF
dosyalar ve JPEG dosyalar gibi) bunu yapamaz.
Flash metnini yeniden boyutlandrrken boyut orann korumak isterseniz
Shift tuunu basl tutun.
6. Artk Flash metninin zerinde yer alan orijinal Welcome to Yoga Sangha
metnini silebilirsiniz. Dosyay kaydedin ve Web taraycnzda nizleyin.
Metin, Dreamweaverdaki gibi grnecektir.

Flash metnine bir balant ve rollover rengi de atayabilirsiniz. Properties
denetisindeki Play dmesi ile bu tr efektleri dorudan Dreamweaver
iinde grebilirsiniz. Rolloverlar ve dier etkileimli elemanlar Ders 8de
greceksiniz.
Flash Metninde Deiiklik Yapmak

Dreamweaverda Flash metni nesnelerini deitirmek gayet basittir. Metni farkl bir
ekilde anlatma, farkl bir font kullanma ya da ierikte baka ayarlamalar yapma ihtiyac
duyuyorsanz, bu metin nesnelerini deitirmeniz gerekebilir.
1. Belge penceresinde Flash metnine ift tklayn.
Metni seemiyorsanz nce Properties denetisindeki Stop dmesine tklayn.

Insert Flash Text iletiim kutusu alacaktr.
2. Seenekleri istediiniz ekilde deitirin ve yaptnz deiikliklerin sonucunu
grmek iin Apply dmesine tklayn. inizi bitirdiinizde OK dmesine
tklayarak Insert Flash Text iletiim kutusunu kapatn.
Dzenlenmi Flash metni sayfada yeniden oluturulacak ve SWF dosyas gncellenecektir.
Flash Dmeleri Eklemek

Metinler, dmeler ve filmler gibi Flash nesnelerini kullanarak zel efektler elde
edebilirsiniz. Flash resimleri vektr tabanl olduundan bunlarn boyutu ok kk
olabilir ve bu da edeer normal resim dosyalaryla karlatrldnda bu resimlerin
kullancnn Web taraycsna ok daha hzl bir ekilde yklenmelerini salar. Flash
metinlerine benzer ekilde, Flash dmeleri oluturmak iin de bilgisayarnzda
Flashn ykl olmas gerekmez. Flash dmelerini dorudan Dreamweaver iinde
hazrlayabilirsiniz.
Flash dmeleri, imlecin konumuna ve fare dmesine baslp baslmadna bal olarak
eitli durumlarda bulunur. Greceimiz ilk durum, dmenin imle zerinde deilken
sahip olduu grnmdr. kinci durum, imle dmenin zerine getirildiinde, ama
farenin dmesine baslmadnda ortaya kar. nc durum, imle dmenin zerine
getirilip farenin dmesine baslmasyla oluur. Dreamweaverda bir dizi hazr dme
stilini kullanarak Flash dmeleri oluturabilir ve bunlarn devamlln salayabilirsiniz.
1. index.html belge penceresinde, ekleme noktasn belgenin alt ksmna yakn bir
konumda yer alan Email:info@yogasangha.com satrnn bana yerletirin.
Bu sayfaya bir Flash dmesi ekleyeceksiniz.

2. Insert ara ubuunun Common kategorisindeki Media mensne tklayn ve
Flash Button simgesini sein.
260 DERS 7
Insert Flash Button iletiim kutusu alacaktr.
3. Style listesinde aaya inerek Glass-Silver sein. Button text metin alanna
Email yazn. Font ve Size seeneklerinin varsaylan ayarlarn deitirmeyin:
Srasyla Verdana ve 12.
letiim kutusunun st tarafndaki Sample alannda dme stilinin bir nizleme

grnts oluturulacaktr. mleci bu rnek resmin zerine getirerek nasl altn
grebilirsiniz.
Gerekirse bu ayarlarda daha sonra deiiklik yapabilirsiniz. Bir sonraki uygulamada
bunun nasl yapldn greceiz.
Bu uygulamada istee bal Link alann bo braktmza dikkat edin.
4. Bg color metin alanna tklayn ve #FFFFCC yazn.
Arka plan rengine ait #FFFFCC eklindeki onaltlk tabanl kod, bu dmede
kullanlacak olan arka plan rengini temsil etmektedir. Dmenin sayfanzn bir paras
gibi grnmesini salamak amacyla sayfann arka plan iin kullanlan rengin aynsn
seersiniz.
5. Save as metin alanna email-button.swf yazn, sonra da iletiim kutusunun sa

st ksmndaki OK dmesine tklayn. Flash Accessibility Attributes iletiim
kutusundaki Title alanna Email yazn.
Her zaman iin Flash dme dosyalarn adlandrmanz ve ak bir eriilebilirlik bilgisi
salamanz gerekir. Siz bunu yapmazsanz Dreamweaver dmelerinize otomatik olarak
genel tipte isimler atar.
Siz ayarlarda deiiklik yaparken nizleme grnts dinamik olarak
deimez, sadece dmenin stili grntlenir. Deiiklikleri yaparken
dmeyi grmek isterseniz Apply dmesine tklamanz gerekir. Bu durumda
deiiklikleri belge penceresinde grebilirsiniz.
Insert Flash Button iletiim kutusu kapanacak ve belgede sizin yaptnz ayarlarla bir
dme belirecektir. Yeni eklediiniz iin dme seili durumda olacaktr.
6. Dme seili durumdayken Properties denetisindeki Play dmesine tklayn.
Play dmesine tkladnzda belge penceresinde Flash dmesine ait efektleri

grebilirsiniz. Dme, Web taraycsndaki ekliyle belirecek ve seim tutamalar
kaybolacaktr. Play dmesinin Stop dmesine dntne dikkat edin.
262 DERS 7
7. Belge penceresinde imleci Email dmesinin zerine getirin ve dmeye tklayn.
mle zerine geldiinde dme rollover durumuna, tklandnda da tklanma durumuna

(farkl bir grnm) geecektir.
8. Properties denetisindeki Stop dmesine tklayn. Dosyay kaydedin ve Web
taraycnzda nizleyin.
Dme, imlecin konumuna ve fare tklamalarna gre Dreamweaverda olduu gibi durum
deitirecektir.
Flash Dmelerinde Deiiklik Yapmak

Dme niteliklerinin birounu istediiniz zaman kolayca deitirebilirsiniz.
1. Belge penceresinde yeni oluturduunuz Flash dmesine ift tklayn.
Insert Flash Button iletiim kutusu alacaktr.

2. Flash dmesinin ayarlarnda deiiklikler yapn. Seenekleri istediiniz ekilde
ayarlayn.
rnein fontu Arial olarak deitirebilirsiniz.

3. Deiiklikleri grmek iin Apply dmesine tklayn. iniz bittiinde OK
dmesine tklayn.
Flash kullanp Dreamweaver dnda SWT Generator Template dosyalar oluturarak Style
listesine kendi ablon dmelerinizi ekleyebilirsiniz. Bu dosyalar Dreamweavera eklemek
iin Dreamweaver program klasrn amanz ve dosyalar Configuration > Flash Objects >
Flash Buttons klasrne yerletirmeniz gerekir.
Flash Animasyonu Eklemek

Flash programn kullanarak vektr tabanl resimler, animasyonlar ve filmler oluturabilirsiniz.
GIF ya da JPEG dosyalar gibi bitmap tabanl resimlerden farkl olarak, vektr tabanl
resimlerde grntlenen nesneleri ve resimlerin kendisini oluturmak iin matematiksel
formller kullanlr.
Bitmap tabanl resimlerde olduu gibi belgelerinize Flash animasyonlarn da kolayca
ekleyebilirsiniz. Tabii bunun iin sz konusu animasyonun mevcut olmas gerekir. Bu tr
animasyonlar dorudan Dreamweaver iinde oluturamazsnz, bunun iin Flash kullanmanz
gerekir. Buradaki uygulamada kullanmanz iin Flashta bir animasyon hazrlanmtr.
1. Lesson_07_Multimedia klasrndeki chakras.html belgesini an. Metnin zerine
yeni bir paragraf ekleyin ve ekleme noktasn yeni satra yerletirin.
Paragraf sonu kullandnzdan emin olun (satr sonu deil). Yeni bir metin blouna
ihtiyacnz olacak.
2. Insert ara ubuunun Common kategorisindeki Media mensne tklayn ve Flash

simgesini sein. Alan Select File iletiim kutusunda Images/Chakras.swf dosyasn
sein ve ardndan Choose (Macintoshta) ya da Select (Windowsta) dmesine tklayn.
Resimlerde olduu gibi Assets panelini kullanarak belgelerinize Flash animasyonlar da

ekleyebilirsiniz.
3. Object Tag Accessibility Attributes iletiim kutusundaki Title metin alanna chakras yazn.
Flash animasyonu sayfaya yerletirilecektir.

4. Properties denetisindeki Loop ve Autoplay seeneklerinin iaretli olduundan
emin olun. Animasyonu Dreamweaverda izlemek zere Play dmesine tklayn.
Animasyon dosyalarn Dreamweaverda izlemek iin Play dmesine tklayn. Test ilemi
bittikten sonra Stop dmesine tklayn.
Animasyonlar seim tutamalarn srkleyerek yeniden boyutlandrabilirsiniz.

En boy orann korumak iin Shift tuunu basl tutun.
5. Properties denetisindeki Stop dmesine tklayn. Dosyay kaydedin ve Web
taraycnzda nizleyin.
Autoplay seenei, sayfa Web taraycsna yklenir yklenmez Flash animasyonunun

oynamaya balamasna sebep olur. Properties denetisindeki Loop seeneini iaretlediiniz
iin animasyon tekrar tekrar oynatlr.
Bir Flash animasyonu eklerken her zaman bir SWF dosyas setiinizden emin olun.
FLA ya da SWT dosyas eklemeyin, nk bunlar Web tarayclarnda grnmez.
264 DERS 7
Image Viewern Kullanlmas

Flash Elemanlar sayfalarnza hzl bir ekilde etkileim zellikleri eklemenizi salar.
Image Viewer adl Flash eleman, bir dizi resmi sunmak iin kullanabileceiniz bir slayt
gsterisi arabirimi oluturur. Bu etkileimli sunum format (Dreamweaverda kolayca
yaplandrlabilir), slayt gsterisindeki her resim iin balant ve aklama atama gibi pek
ok seenek sunar.
Image Viewer, Dreamweaver 8le birlikte gelen tek Flash elemandr. Daha
ileride Macromedia ya da nc parti gelitiriciler tarafndan ilave Flash
elemanlar oluturulabilir ve bunlar Macromediann Web sitesindeki
Developers Exchange blm araclyla sunulabilir.
1. Lesson_07_Multimedia/about klasrndeki yogastudio.html dosyasn an.
Insert ara ubuunda Flash Elements kategorisini sein ve Image Viewer
dmesine tklayn.
Save Flash Element iletiim kutusu alacaktr.

2. Save as metin alanna yogastudio yazn ve dosyay Lesson_07_Multimedia/
about klasrne kaydedin.
Image Viewer Flash eleman dosyas kaydedilecek ve Dreamweaver gerekli SWF uzantsn
otomatik olarak ekleyecektir. Eer yeni yogastudio.swf dosyas Files panelinde hemen
belirmezse, dosya listesini gncellemek iin panelin st ksmndaki Refresh dmesine
tklayn.
Image Viewer belge penceresinde, ortasnda Flash simgesi bulunan byk gri bir yer
tutucu olarak belirecektir.
3. Properties denetisindeki Play dmesine tklayn.
Image Viewer imdi belge penceresinde varsaylan ayarlarla grntlenecektir. Image

Viewern st ksmnda bir kontrol ubuu greceksiniz. Bu ubuk sol tarafta balk iin
bir bo alan, geerli resmin numarasn grntleyen bir metin alan (kullanc bir say
girerek farkl bir resme geebilir) ve Geri, Oynat/Durdur ve leri dmelerini ierir.
Kontrol ubuunun altnda resim alan yer alr.
4. Image Viewer setiinizde balk ubuundaki yaz Flash Element olarak

deien Tag Inspectorda (Etiket Denetisi), frameColorn karsndaki renk
seiciye tklayn ve #666666 koduna sahip olan gri rengi sein.
Image Viewerla ilgili yaplandrma ayarlarnn ounu Tag Inspectorda yapacaksnz. Tag
Inspector, Image Viewer devreye girdiinde otomatik olarak alr ve bu Flash elemanna
ait varsaylan balang ayarlarn grntler.
Tag Inspector daraltlm durumdaysa, onu tekrar geniletmek isterseniz
adnn sol tarafndaki Geniletme/Toparlama dmesine tklayn. Tag
Inspector ekranda grmyorsanz Window > Tag Inspector komutunu sein.
266 DERS 7
frameColor seenei, Image Viewer evreleyen kenarln rengini belirler. Kontrol

ubuunda eitli gri tonlar kullanlr. #666666 numaral gri rengi daha koyu
tonlara karlk gelir. Siz bir renk setikten sonra Flash eleman otomatik olarak belge
penceresindeki yer tutucu resmine geebilir. Aadaki admlarda, belge penceresinde
tekrar grnr hale getirmeden nce Image Viewer yaplandrmaya devam edeceksiniz.
5. Men dmelerinin kullanlabilmesini salamak iin nce Tag Inspectorda
frameShow seeneinin karsndaki (No) deerine tklayn. Ekrana gelen
menye tklayarak (Yes) seeneini iaretleyin.
frameShow seenei Image Viewa ait kenarlk seeneini etkinletirir.

6. Tag Inspectorda frameThickness seeneinin deer alanna tklayn ve

bu deeri 1 olarak deitirin, sonra da deiiklii uygulamak iin Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn. Image Viewer tekrar
belge penceresinde grmek iin Properties denetisindeki Play dmesine
tklayn.
Kenarln genilii bir piksel olacaktr. Ayrca Image Viewern etrafndaki gri d hatta
dikkat edin.
Tag Inspectordaki bgColor seeneiyle tanmlanan Image Viewern arka plan rengi
varsaylan durumda beyaz olarak ayarlanmtr. Bu uygulamada arka plan rengini beyaz
olarak brakmanz gerekiyor.
7. Tag Inspectordaki imageURLs seeneinin deer alanna tklayn, sonra da
metin alannn sanda beliren Edit Array Values dmesine tklayn.
imageURLs seenei, Image Viewern ierecei resimleri tanmlar. Bu seenei resimlerin

konumunu belirlemek iin kullanmanz gerekiyor.
Flash elemanlarnda grlen seri halindeki deerler dizi (array) olarak
adlandrlr. Image Viewer, dizileri resimler, resim aklamalar ve URL
seenekleri iin kullanr.
268 DERS 7
Edit imageURLs Array iletiim kutusu alacaktr.
8. mle ilk eye ait satrn iindeyken onun sanda yer alan klasr simgesine
tklayn. Select File iletiim kutusunu kullanarak Lesson_07_Multimedia/about/
Images klasrne girin ve studio_photo.jpg dosyasn sein.
Resimlere giden yollar temsil eden bu deerler tek trnak iinde yazlacaktr. Image
Viewern dzgn alabilmesi iin bu trnak iaretlerinin dahil edilmesi gerekir.
Eer ilk aldnda Edit imageURLs Array iletiim kutusundaki Value
listesinde herhangi bir resim grntleniyorsa (img1.jpg eklinde olabilir),
studio_photo resimlerini eklemeden nce tek tek seip eksi (-) dmesine
tklayarak bu resmi ya da resimleri silin.
9. Yeni bir deer alan eklemek iin art (+) dmesine tklayn ve studio_photo2.
jpg resmini sein. Yeni deer alanlar eklemeye devam ederek bunlarn
kaynaklarn studio_photo3.jpg, studio_photo4.jpg, studio_photo5.jpg, studio_
photo6.jpg ve studio_photo7.jpg olarak ayarlayn. OK dmesine tklayarak
Edit imageURLs Array iletiim kutusunu kapatn.
Ekleme noktas son deer alanndayken Tab tuuna basarak da listeye yeni
bir e ekleyebilirsiniz.
u anda Image Viewerda yedi adet resim tanmlanm olarak bulunmaktadr.

10. Tag inspectordaki imageCaptions seeneinin deer alanna, ardndan da

metin alannn sanda beliren Edit Array Values dmesine tklayn. Value
metin alanna Yoga Sangha yazn (tekli trnak iaretlerini yazdnzdan emin
olun). Tab tuuna basarak ya da (+) dmesini kullanarak geri kalan resimler
iin ayn resim aklamasyla alt yeni deer alan daha ekleyin. OK dmesine
tklayn.
Resim deerlerindekine benzer ekilde Image Viewern dzgn alabilmesi iin

aklamalarn da tek trnak iinde yazlmas gerekir.
Resim aklamas olutururken kullanacanz metinleri resimleri eklediiniz srayla
eklemeniz gerekir. Resimlerinizle aklamalar ayn srayla listelenmezse, aklamalar (eer
birbirlerinden farkl iseler) ve onlara karlk gelen resimler doru olarak elemeyebilir.
Tag inspectordaki captionColor, captionFont ve captionSize seeneklerini
kullanarak srasyla resim aklamalarnn rengini, font tipini ve bykln
ayarlayabilirsiniz. Bu uygulama iin resim aklamas biimlendirme
seeneklerini varsaylan ayarlarnda brakmanz gerekiyor.
11. Tag inspectordaki Title seeneinin deer alanna tklayn. Ardndan metin
alanna Yoga Studio yazn ve Return (Macintoshta) ya da Enter (Windowsta)
tuuna basn. Image Viewer belge penceresinde tekrar grntlemek iin
Properties denetisindeki Play dmesine tklayn.
270 DERS 7
Balk (Title) kontrol ubuunun solundaki bolua yerletirilecektir.

Tag Inspectordaki titleColor, titleFont ve titleSize seeneklerini kullanarak
srasyla baln font rengini, font tipini ve bykln ayarlayabilirsiniz. Bu
uygulama iin balk biimlendirme seeneklerini varsaylan ayarlarnda
brakmanz gerekiyor.
Varsaylan durumda resimler arasndaki geiler Random, yani rasgele olarak

ayarlanmtr. Gei efekti ayarn deitirebilir ve transitionsType seeneinin deer
alanna tklayarak buradaki menden tekli bir gei efekti seebilirsiniz. Bu uygulamada
gei ayarn Random olarak braktnzda sayfay bir Web taraycsnda izlerken
veya Dreamweaverda kontrol ubuu dmelerini kullanrken farkl gei efektlerini
grebilirsiniz.
Belgenizin grnm aadaki rnee benzeyecektir.
imageLinks seeneinin deer alanna, ardndan da Edit Array Values

dmesine tklayarak resimlerle ilgili olarak balant ekleme, deitirme ya
da silme ilemlerini gerekletirebilirsiniz. Edit imageLinks Array iletiim
kutusu, resimleri ve resim aklamalarn ayarlarken kullandnz iletiim
kutularna benzer. Her URLin tek trnak iinde yazlmas gerekir. Yine resim
aklamalarn eklerken olduu gibi, balantlarn doru resimlerle
elemesini salamak iin balantlar da resimlerle ayn srada eklemeye
dikkat etmeniz gerekir. Hedefler, balantlarn nerede alacan tanmlar ve
imageLinkTarget seeneiyle ayarlanabilir. Varsaylan seenek _blanktir. Bu
seenei kullandnzda balantlar yeni bir pencerede alr.
12. Belge penceresinde Image Viewer dnda bir yere tklayarak Image Viewern
seimini kaldrn. Belgeyi kaydedin, Web taraycnzda nizleyin ve Image
Viewer test edin.
Web taraycsnda izledikten sonra yogastudio.html belgesini kapatabilirsiniz.

Properties denetisini kullanarak Image Viewern bykln
deitirebilirsiniz.
272 DERS 7
Quicktime Filmlerini Gmmek

QuickTime, hem Macintoshta, hem de Windowsta altrlabilen, popler, Internette
ska kullanlan bir video formatdr. QuickTime filmleri basit birer video eklinde de
olabilir, Flash elemanlar ve 360 derecelik panorama grnmne sahip etkileimli QTVR
(QuickTime Virtual Reality) filmleri gibi etkileimli elemanlar da ierebilir. QuickTime
filmlerini de Flash filmleri gibi kolayca ekleyebilirsiniz.
1. Lesson_07_Multimedia/explorations klasrndeki pose-demo.html dosyasn
an ve ekleme noktasn belgedeki ilk stbilginin altndaki bo satra yerletirin.
Insert ara ubuunda Common kategorisini sein, Media mensne tklayn
ve Plugini sein.
Dreamweaver QuickTime filmlerini birer eklenti (plug-in) olarak deerlendirir.
Select File iletiim kutusu alacaktr. Bu kutu vastasyla ilgili eklentiyi seebilirsiniz.
2. Lesson_07_Multimedia/explorations/Videos/Yoga1.mov dosyasn bulun ve
Choose (Macintoshta) ya da OK (Windowsta) dmesine tklayarak sein.
Eklenti, 32x32 piksellik varsaylan byklk deeri ve <embed> etiketi kullanlarak sayfaya
gmlecektir. Eklentinin, belge penceresinde ortasnda bir eklenti simgesi bulunan gri bir
kare olarak grndne dikkat edin.
3. Eklenti seili durumdayken Properties denetisini kullanarak genilik deerini
320, ykseklik deerini de 256 olarak deitirin.
nternette kullanlmak zere hazrlanan kk QuickTime Web filmlerinin standart

boyutlar 320 (genilik) x 240 (ykseklik) pikseldir. QuickTime kontrolcsnn ykseklii
16 pikseldir. Bu yzden filmin yksekliine 16 piksel eklemeniz gerekir. Film eklerken
kimi zaman filmlerin krplm gibi grnd ya da kontrolcnn grnmedii
durumlarla karlaabilirsiniz. Byle durumlarda genilik ve ykseklik deerlerini
artrarak film iin ayrlan alan miktarn artrmaya aln. Kendi filmlerinizi eklerken
filmin doru boyutlarn kullandnzdan emin olun ve kontrolc iin fazladan bir 16
piksel ekleyin.
4. Eklenti seili durumdayken Properties denetisindeki Parameters dmesine
tklayn.
Parameters iletiim kutusu alacaktr.
5. Parameter stununa tklayn ve metin alanna controller yazn. Macintosh

kullanclarnn Tab tuuna bir kez, Windows kullanclarnn ise iki kez basmas
gerekir. true yazn ve OK dmesine tklayn.
Parametreler filmlerin zelliklerini tanmlar. True deeriyle bir controller parametresi

tanmladnzda filmin altna QuickTime kontrolcsn dahil edersiniz. Bu deeri ya
True ya da False olarak ayarlayabilirsiniz. Kontrolc iin kullandnzda True deeri
kontrolcnn etkinletirilmesi, False deeri de kontrolcnn kapatlmas anlamna gelir.
Bu parametreye True deerini atamazsanz ziyaretileriniz kontrolcy gremeyebilir.
Ayarlayabileceiniz dier bir parametre autoplaydir. Bu parametre, sayfa
yklendikten sonra filmlerinizin hemen mi balatlacan, yoksa bunun
ziyaretinin Play dmesine basmasna m bal olacan belirler. Bu
parametreyi tanmlamak iin Parameters listesine bir e eklemeniz gerekir.
Parameter metin alanna autoplay ve buna karlk gelen deer alanna da
true ya da false yazn.
274 DERS 7
6. Belge penceresinde farkl bir yere tklayarak eklentinin seimini kaldrn.

Belgeyi kaydedin ve nizleyin.
Ziyaretilerinize Web sitenizdeki materyali nasl kullanacaklarn aklamanz her zaman

iin iyi bir alkanlktr.
Filmi Dreamweaver belge penceresinde grntlemek iin Properties denetisindeki
Play dmesine tklayabilir ya da sayfay Web taraycnzda nizleyebilirsiniz. QuickTime
filmlerinizi izleyebilmeniz iin makinenizde QuickTime oynatcsnn (QuickTime
Player) kurulu olmas gerekir. Applen Web sitesinden (http://www.apple.com/quicktime)
QuickTime oynatcsn cretsiz olarak indirebilirsiniz.
pose-demo.html dosyasn kaydedip kapatabilirsiniz.
Ne rendiniz?
Bir Flash metni oluturdunuz (Sayfa 257259).

Flash metninde deiiklik yaptnz (Sayfa 260).
Flash dmeleri eklediniz ve bunlarn zerinde deiiklik yaptnz (Sayfa 260263).
Bir Flash animasyonu eklediniz (Sayfa 263264).
Image Viewer aracn kullanarak bir slayt gsterisi oluturdunuz (Sayfa 265272).
Sayfanza bir QuickTime filmi eklediniz (Sayfa 273275).
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,
Macromedia 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.
Bu projede sayfa zerindeki mevcut
resimlerle rolloverlar oluturacak ve
ayn anda sayfadaki birden fazla resmin
deimesini nasl salayacanz
reneceksiniz
Macromedia Dreamweaver, standart JavaScript fonksiyonlarnn kullanlma

srecini, davranlar 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. Bu
derste Dreamweaver davranlarn rolloverlar, yeni tarayc pencereleri ve menler
oluturmak iin kullanacaksnz. Dreamweaverda nceden tanmlanm bir dizi davran
bulunmaktadr. lave davranlar ekleyerek Dreamweaver gelitirebilir ya da JavaScript
konusunda ustaysanz kendi davranlarnz oluturabilirsiniz.
Tamamlanm sayfa rneklerini grmek istiyorsanz Completed/explorations/poses.html
ve Lesson_08_Interactivity/Completed/explorations/meditations.html dosyalarn an.
Neler reneceksiniz?
Rolloverlar oluturacaksnz.
Davranlar kullanarak sayfalarnza kullanc etkileimi ekleyeceksiniz.
Bir kullanc eylemine birden fazla davran ekleyeceksiniz
Resim haritalarna davranlar ekleyeceksiniz.
Bir durum ubuu mesaj oluturacaksnz.
Kullanclar, ellerinde bulunan tarayc srmlerine gre yeniden ynlendireceksiniz.
Yeni bir tarayc penceresi aacaksnz.
Bir alr (popup) men oluturacaksnz.
Yaklak Sre
Ders Dosyalar
Balang Dosyalar:
Lesson_08_Interactivity/explorations(btn dosyalar)
Tamamlanm Proje:
Lesson_08_Interactivity/Completed/explorations(btn dosyalar)
278 DERS 8
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, Insert ubuunun Common kategorisinde yer alan basit bir
davrantr. Bu yntemi kullandnzda, davran Dreamweaver tarafndan oluturulur.
1. Lesson_08_Interactivity/explorations klasrndeki poses.html dosyasn an.
Belge penceresinin st ksmnda yer alan tablonun ilk bo hcresine tklayn.
Insert ara ubuunun Common kategorisindeki Images mensnden Rollover
Image dmesini sein.
Kullanc Etklem 279
Insert Rollover Image 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
sonraki uygulamada, sayfaya daha nceden yerletirilmi olan resimlerden rolloverlar
oluturacaksnz.
Bir rollover resmi eklemek iin Insert > Image Objects > Rollover Image
komutunu seip yine ayn iletiim kutusunu kullanmanz da mmkndr.
2. Image name metin alanna home yazarak resmi adlandrn.
Bu alan, resmi adlandrmak iin kullanlr. Rollover resimlerinize bir isim vermezseniz,
Dreamweaver bunlara otomatik olarak numara srasyla isimler atar (Image1, Image2, vb).
Web sayfalarnz olutururken rolloverlara bunlarn ne iin kullanlacaklarn gsteren
zel ve anlaml isimler vermeyi alkanlk haline getirmeniz iyi olur. Resimlerinizi
adlandrrken boluk ya da herhangi bir zel karakter kullanmayn ve ismin bana
bir numara yazmayn. Bunlarn herhangi birini yaptnz takdirde, scriptlerde sorun
kabilir ve rolloverlarnz doru ekilde almayabilir.
3. Original image metin alannn yanndaki Browse dmesine tklayn ve Lesson_
08_Interactivity/explorations/images klasrnden home.gif resmini sein.
Kullanc imleci resmin zerine getirmeden nce sayfada bu resim grnecektir.

4. Rollover image metin alannn yanndaki Browse dmesine tklayn ve Lesson_
08_Interactivity/explorations/images klasrnden home-on.gif rollover resmini
sein.
280 DERS 8
Bu sayfa bir Web taraycsnda grntlendiinde, ziyareti ilk bata home.gif resmini
grr. Kullanc imleci tarayc penceresindeki home.gif resminin zerine getirdiinde, bu
resmin yerini home-on.gif resmi alr.
Rollover resimlerini hazrlarken, orijinal resmi ve bunun yerini alacak olan
resmi ayn boyutlarda oluturun. Bu iki resim ayn boyutlarda deilse, ikinci
rollover resminin boyutlar ilk resmin boyutlarna uyacak ekilde deitirilebilir.
Boyutlarn deitirilmesi ikinci resmi bozar, nk bu resim sadece ilk resmin
bulunduu alan kullanabilir.
5. Alternate text metin alanna Home yazn. When clicked, Go to URL metin
alannn yanndaki Browse dmesine tklayn ve Lesson_08_Interactivity
klasrndeki index.html dosyasn bulun. Preload rollover image onay kutusunu
iaretli olarak brakn ve OK dmesine tklayn.
Preload rollover image seenei varsaylan durumda iaretlidir ve kullanlmas iddetle

tavsiye edilir. Bu ayar, belge ziyaretinin taraycsna yklendiinde ikinci resmin
yklenmesine neden olur. Eer bu ayar iaretli deilse, kullanc imleci birinci resmin
zerine getirinceye ve tarayc bu rollover resmini sunucudan talep edinceye kadar resim
yklenmez. Resmin sayfann geri kalan ksmyla birlikte yklenmesi, resmin kullanc
imleci zerine getirdii anda yklenmesinden kaynaklanan gecikmeleri nleyerek rollover
ileminin hzla gereklemesini salar.
Rollover setiiniz dosyaya balanacaktr. When clicked, Go to URL metin alannda
setiiniz dosya, resim seildiinde Properties denetisindeki Link metin alannda
grnecektir.
Rollover resmi seildiinde ortaya kan davran Behaviors panelinde grnr. Bunu bir
sonraki uygulamada kullanacaksnz.
Kullanc Etklem 281
6. Dosyanz kaydedin ve Web taraycnzda test edin.
Bu dosyay kapatabilirsiniz.
Resimlerinizi olutururken dosya boyutlarn mmkn olduu kadar kk
tutun. Rolloverlarda ayn dme iin bir deil, iki resim yklediinizi
unutmayn. Bu uygulamada eklediiniz rollover gibi bir rollovern dosya
boyutu byktr, nk indirilmesi gereken iki resim vardr. Dosya
boyutunun artma miktar, resimlerin boyutlarna bal olarak deiir.
Davran Eklemek
Bu uygulamada, sayfaya daha nce yerletirilmi olan resimlerle rollover oluturmay
reneceksiniz. Burada elde edilen sonu, bir nceki uygulamada elde edilen sonula
ayndr: mle resmin zerine getirildiinde bunun yerini baka bir resim alr. Ama
bu uygulamada, rolloverlar eklemek iin farkl bir yntem kullanacaksnz: Rollover
oluturmak iin gereken davran Behaviors panelini kullanarak ekleyeceksiniz.
Kendi Web sayfalarnz olutururken, eer bir sayfaya orijinal resimlerinizi daha
nce yerletirdiyseniz bu yntemi kullanmanz gerekir. Orijinal resimler sayfaya
yerletirilmemise, bir nceki uygulamadaki yntemi kullanarak orijinal resimle rollover
resmini tek bir admda ayarlayabilirsiniz.
1. Properties denetisindeki Image Name metin alann kullanarak sayfann
st ksmndaki tabloda yer alan blmlere ait alt gezinti resmini adlandrn.
Resimlerin u ekilde adlandrlmas gerekir: about.gif resmi about, community.
gif resmi community, explorations.gif resmi explorations, schedule.gif resmi
schedule, teachers.gif resmi teachers ve training.gif resmi de training olarak
adlandrlmaldr. Gezinti resimlerinin her birini Ders 5te Resim Tabanl
Balant Oluturmak blmnde anlatlan teknii kullanarak kendilerine
karlk gelen sayfalara balayn.
Resimlere ieriklerine ya da ilevlerine uygun isimler vermek iyi bir alkanlktr. Bu

adlandrma yaklam ayrca, hangi resimlerin seilen isimlerle ilikili olduunun net bir
ekilde grlmesine yardmc olur.
282 DERS 8
2. Etiket Seiciyi kullanarak about balantsn sein. Sadece resmi

semediinizden emin olun. Tag Inspector panelini an ve Behaviors
sekmesine tklayn.
Behaviors paneli alacaktr.
Behaviors panelini amak iin Window > Behaviors komutunu da

kullanabilirsiniz.
3. Behaviors panelindeki art iaretli (+) dmesine tklayn ve alan Actions yani
eylem mensnden Swap Image sein.
Kullanc Etklem 283
Swap Image iletiim kutusu alacaktr. Swap Image davran, nceki uygulamada
kullandnz rollover efektini oluturur. Yani ziyaretinin imleci zerine getirdii
orijinal resmin yerine yeni bir resmin gemesini salar. Davran, bir eylem ve bir olayn
kombinasyonudur.
Eylem (action), kullanc etkileiminin sonucu olarak ortaya kar. Bir eylem setiinizde,
Dreamweaver bu eylemi Behaviors panelindeki listeye ekler. Actions mens, belge
penceresinde setiiniz elemana bal olarak eylemleri grntler ya da bunlarn
etkinliklerini kaldrr. Bu rnekteki eylem, bir resmin dieriyle deitirilmesidir.
Dreamweaver ayrca, bu eylemler iin uygun bir olay (ya da olaylar) otomatik olarak
ekler. Olay (event), eylemin gereklemesini salar. Olay rnei olarak kullancnn imleci
bir resmin zerine getirmesi ya da bir dmeye tklamasn sayabiliriz. Bu rnekte olay
onMouseOverdr. Bu, rolloverlar iin Dreamweavern varsaylan seeneidir. Bu dersin
ilerleyen sayfalarnda, belirli olaylar semeyi reneceksiniz.
4. Images listesinde about resminin seili olduundan emin olun.
Resim listede about olarak yer alacaktr. Bu uygulamann ikinci admnda setiiniz
resme bu ismi vermi, drdnc admda da Behaviors panelini kullanarak buna bir eylem
eklemitiniz. Swap Image iletiim kutusundaki Images listesinde about resmini seerek,
kullanc imleci bu resmin zerine getirdiinde bunun bir rollover resmiyle deitirileceini
gstermi oldunuz. Rollover resmini bir sonraki admda seeceksiniz.
Bu listeden baka bir resim semi olsaydnz, kullanc imleci about resminin
zerine getirdiinde seili resim rollover resmiyle deitirilecekti, nk
davrann uyguland resim about resmidir. Bu ilemi bir sonraki
uygulamada yapacaksnz.
Resimlerinizi adlandrmadnz takdirde bunlarn bu iletiim kutusunda unnamed

<img> ismiyle grneceini unutmayn. Bu iletiim kutusunda unnamed <img>
284 DERS 8
isimli resim rnekleri grebilirsiniz, nk sadece yedi resmi adlandrdnz. Resimleri

uygun ekilde adlandrmak bu yzden nemlidir; resimler ak ve mantkl bir ekilde
adlandrlmad takdirde davranlarla almak ok zor olur. Adlandrlmam resimlerle
dolu bir listede zerinde almakta olduunuz resimleri bulmanz zor olabilir.
5. Set source to metin alannn yanndaki Browse dmesine tklayn ve Lesson_
08_Interactivity/explorations/images klasrnde yer alan about-on.gif resmini
bulun. Rollover resmi olarak kullanmak zere bu resmi semek iin Choose
Set source to, rollover resmi olarak ne kullanlacan tanmlar. Kaynan (source) ayarlanmas,
bir nceki uygulamada rollovern seilmesi ilemiyle ayn ekilde gerekletirilir. Genellikle bir
resmin orijinal grnm off durumu olarak, kullanc imleci resmin zerine getirdiinde
resmin deimesi de on durumu olarak bilinir. On durumlarnda kullanlan resimler
genellikle basl bir dme ya da vurgulanm bir szck gibi grnr. Bu da ziyaretiye,
nesnenin etkin ya da bal bir eleman olduunu gsterir.
Bu uygulamada kullanacanz btn rollover resimleri images klasrnde bulunmaktadr ve
rollover resim dosyalarnn isimlerinde _on soneki kullanlmtr. Resimleriniz iin mantkl ve
sral bir adlandrma sistemi oluturmanz (rnein orijinal resme about.gif, rollover resmine
de about_on.gif ya da about_over.gif ismini vermeniz) resimlerinizi dzenli tutmanza yardmc
olur ve bylece doru resmi daha kolay bulursunuz.
Resmi setikten sonra Swap Image iletiim kutusuna geri dnersiniz. Images listesinde resmin
sanda, buna rollover iin alternatif bir resim atandn gsteren bir yldz iareti grnecektir.
6. Preload images ve Restore images onMouseOut onay kutularnn iaretli
olduundan emin olun, sonra da OK dmesine tklayn.
Kullanc Etklem 285
Bir nceki uygulamada eklediiniz rolloverlarda da olduu gibi, Preload images seenei
varsaylan durumda iaretlidir. Bu seenek, resimlerin, tarayc resmi gstermeye ihtiya
duyup da ykleyene kadar beklemek yerine, sayfa tarayc tarafndan arldnda
yklenmelerine neden olur.
Restore images onMouseOut seenei de varsaylan olarak iaretlidir ve iaretli braklmas
tavsiye edilir. Bu seenek, kullanc imleci resimden uzaklatrdnda ilgili resmin orijinal
durumuna geri dnmesini salar.
Restore images onMouseOut seeneiyle tanmlanan ilem, Behaviors
panelinde ayr bir eylem olarak bulunan Swap Image Restore tarafndan
gerekletirilir.
Davrann her iki ksm da Behaviors panelinde listelenecektir: onMouseOver olay Swap
Image eyleminin, onMouseOut olay da Swap Image Restore eyleminin gereklemesine
neden olur. Bu eylemlerin ve olaylarn kombinasyonu, rollover efektini oluturur: Ziyareti
imleci resmin zerine getirdiinde resim deiir, imle resimden uzaklatrldnda da eski
durumuna geri dner.
7. nc ve yedinci adm arasndaki ilemleri geri kalan gezinti alan blm

balklar iin de tekrarlayn. Set source to metin alannda tanmlanan rollover
resimleri iin ilgili resimlerin -on versiyonlarn kullann.
Bir davran silmeniz gerekirse, belge penceresinde davran ieren nesneyi ve Behaviors
panelinde silmek istediiniz eylemi sein, sonra da Behaviors panelinin st ksmndaki
eksi () iaretli dmeye tklayn. Bir davran, setikten sonra Delete (Macintoshta) ya da
Backspace (Windowsta) tuuna basarak da silebilirsiniz.
Dreamweaver 8de rolloverlarn almas iin artk ilgili resme bir balant
uygulanm olmas gerekmemektedir. Rolloverlarn kendisini dorudan
resimlere uygulayabilirsiniz. Bu teknii tercih etmemenin iki iyi sebebi vardr.
Birincisi bu, eski Web tarayclarnda almaz; ikinci olarak da, ziyareti zerine
tkladnda hibir ey yapmayan rolloverlara sahip olursunuz. Web kullanclar
rolloverlarn tklanabilir eler olduunu bilirler ve resminizde balants
olmayan bir rollover kullandnzda bu durum ziyaretilerin kafasn kartrabilir.
286 DERS 8
8. Dosyay kaydedin ve rolloverlar Web taraycnzda test edin.
mleci zerlerine getirdiinizde resimlerin deitiine dikkat edin.
Bir Olayla Birden Fazla Resmi Deitirmek

Tek bir olaya birden fazla eylem uygulayarak daha karmak bir etkileim ortam
yaratabilirsiniz. rnein, ayn olayn sonucu olarak ayn anda birka resim alannda
orijinal resimden rollover resmine geilmesini salayabilirsiniz. Bu teknik, kullanc imleci
bir dmenin zerine getirdiinde iki orijinal resmin deimesini ve rollover resmine
gei yaplmasn salamak iin kullanlabilir.
Bu uygulamada meditation resmine bir davran uygulayacaksnz. Bu davran, kullanc
imleci ilk resmin zerine getirdiinde resmin altndaki boluk resminin yerini baka
bir resmin almasn salayacaktr. Bu uygulamada, ikinci rollover ileminin ayn olay
kullanarak gerekleebilmesi iin mevcut Swap Image eylemini dzenleyecek ve ikinci
resim deiikliini tanmlayacaksnz.
1. Lesson_08_Interactivity/explorations klasrndeki meditations.html belgesini
an. meditation resmini sein ve Behaviors panelindeki mevcut Swap Image
eylemine ift tklayn.
Swap Image Restore eyleminde deil de Swap Image eylemine ift tkladnzdan emin
olun.
Swap Image iletiim kutusu alacaktr.
Kullanc Etklem 287
2. Swap Image iletiim kutusunda photoArea adl resmi sein. Set Source
To metin alannn sandaki Browse dmesine tklayn ve Lesson_08_
Interactivity/explorations/images klasrnde yer alan med_hands.jpg resmini
sein.
meditation resminin altndaki bo resmi ieren photoArea resim alan, sizin yerinize
nceden adlandrlmtr. Bu admda, Swap Image iletiim kutusundaki bo resmi
seiyorsunuz. Bylece onu, meditasyon yapan kadn resmiyle deitirebilirsiniz.
Swap Image iletiim kutusundaki Images listesine bakn. simlerinin sonunda yldz iareti
bulunan resimlere bir rollover resmi atanm durumdadr. rnein, meditation resminin
yannda bir yldz iareti grnr, nk bu rollover tanmlanmtr. Artk photoArea
resminin yannda da bir yldz iareti grnmektedir, nk bu admda bu resme bir
rollover atadnz. Hangi orijinal resimlerin deierek rollover resimlerine dneceini bu
listeye bakarak hemen anlayabilirsiniz.
288 DERS 8
3. OK dmesine tklayarak Swap Image iletiim kutusunu kapatn. Dosyay tekrar

kaydedin ve Web taraycnzda test edin.
Birden fazla resmin deitirilmesi, kullanclara ilave bilgi vermek iin faydal olabilir,
ama tek bir eylemle ok fazla resim deiiklii meydana geldiinde taraycnn
yavalayabileceini unutmayn.
mleci meditation resminin zerine getirdiinizde szcn deierek daha ak bir renkle
grntlendiine ve altta yer alan ilgili resmin de deitiine dikkat edin. mleci baka bir
yere gtrdnzde her iki resim de tekrar orijinal haline dnecektir.
Resim Haritalarna Davran Eklemek

mleci standart bir rollover resminin herhangi bir ksmnn zerine getirdiinizde bir
JavaScript kodu arlr ve resim deiiklii gerekleir. Ama bazen rollover ileminin
sadece, kullanc imleci resmin belirli bir ksmnn zerine getirdiinde gereklemesini
istersiniz. Byle durumlarda, bu aktif alanlar tanmlamak iin resim haritalarn
kullanabilirsiniz.
1. meditations.html dosyasnda med_img_map.jpg resmini sein ve nav olarak
adlandrn. Ardndan Properties denetisindeki Rectangular Hotspot aracn
kullanarak meditations szcnn etrafnda buna yakn olacak ekilde bir resim
haritas oluturun.
Resim haritas, med_img_map.gif resminde sadece meditations szcnn tklanabilir

olmasn salar.
Kullanc Etklem 289
2. Behaviors panelindeki art (+) iaretli dmeye tklayn ve Actions mensnden

Swap Imagei sein.
Properties denetisindeki Alt metin alanna bir aklama girmeniz gerektiini bildiren
bir iletiim kutusuyla karlaabilirsiniz. Bu uygulamada aklama nceden atanm
durumdadr, dolaysyla bu mesaj grmezden gelebilirsiniz.
Burada bir resim haritasna bir swap image davran uyguluyorsunuz. Bu davran asl
resim iinde bulunan ve resim haritasn evreleyen alana uygulanmaz.
med_img_map.jpg resminin iindeki resim haritasn yeni oluturduunuz
iin, aktif alan (hotspot) otomatik olarak seili hale gelecektir. Eer davran
resim haritasn oluturduktan hemen sonra uygulamayacaksanz, aktif alan
etkin hale getirmek iin Properties denetisindeki iareti (pointer) aracn
semeniz ve resim haritasna tklamanz gerekir. Rollovern btn resme
uygulanmasn istemiyoruz.
3. Images listesinde photoArea resmini sein. Set source to metin alannn
yanndaki Browse dmesine tklayn ve images klasrnde med_hands.jpg
resmini bulun. Resmi semek ve Swap Image iletiim kutusuna geri dnmek
iin, Choose (Macintoshta) ya da OK (Windowsta) dmesine tklayarak resmi
sein ve Swap Image iletiim kutusuna geri dnn.
Bylece bir Web taraycsnda imleci aktif alann zerine getirdiinizde sol tarafta
grnecek olan resmi semi oldunuz.
Eer aktif alann bulunduu resmi deitirilecek resim olarak tanmlarsanz,
tklanabilir alan orijinal resmin sadece belirli bir ksmn olutursa bile resmin
tamam deitirilecektir.
4. Preload images ve Restore images onMouseOut onay kutularnn iaretli

olduundan emin olun ve OK dmesine tklayn.
290 DERS 8
letiim kutusunun kapandn ve belge penceresine dndnz greceksiniz. med_

img_map.jpg resminin zerindeki resim haritas seildiinde, Behaviors panelinde Swap
Imagein listelendiini greceksiniz. Resmi seer, fakat resim haritasn semezseniz,
Behaviors panelinde Swap Image grnmez.
5. Dosyay kaydedin ve almanz Web taraycnzda test edin.
Resim haritalarn davranlarla birlikte kullanarak resimler, eylemler ve olaylar zerinde

daha fazla kontrol imknna sahip olabilirsiniz.
Eylemleri ve Olaylar Dzenlemek

Davran oluturmak zere birletirilen eylemleri ve olaylar birka yolla
dzenleyebilirsiniz: Bir eylemin karlk geldii olay deitirebilir, tek bir olaya birden
fazla eylem ilitirebilir ve bu eylemlerin gerekleme srasn deitirebilirsiniz. rnein,
bir nceki uygulamada rollover davranna karlk gelen eylem Swap Image eylemi, olay
da OnMouseOver olaydr. Bu uygulamada, bir alr mesaj iin bir eylem ekleyecek ve
buna karlk gelen bir olay seeceksiniz.
1. meditations.html belgesinde med_img_map.jpg resmindeki poses szcnn
etrafnda dikdrtgen eklinde bir resim haritas aktif alan (hotspot) oluturun.
Aktif alan seerek Behaviors panelindeki art iaretli (+) dmeye tklayn ve
alan eylem mensnden Popup Message sein.
Kullanc Etklem 291
Popup Message iletiim kutusu alacaktr. Burada mesajnz girebileceiniz bir metin
alan greceksiniz.
2. Explore a variety of different yoga poses yazn ve OK dmesine tklayn.
Popup Message eylemi ve ona karlk gelen olay (onClick) Behaviors panelinde
belirecektir.
3. Behaviors panelindeki onClick olayna tklayn. Geerli olayn sanda alan

menden onMouseOut olayn sein.
Add Behavior mensnn Show Events For ksmnda istediiniz seimi

yaparak olaylar grntleyecek olan Web taraycs tipini belirleyebilirsiniz.
Olaylar belirli bir tarayc srmnde (rnein IE 6.0) ya da belirli bir srm
numarasna sahip olan (rnein 4.0 ve daha sonraki srmlere sahip) btn
tarayclarda grntlemeyi tercih edebilirsiniz. Tarayc tipini setikten
sonra, Behaviors panelinde bir olay seerek Events mensn
grntleyebilirsiniz. Events mensnde, sadece setiiniz tarayc tipinde
kullanlabilen olaylar grnecektir.
292 DERS 8
Bu mende yer alan olaylar, setiiniz tarayc tipine ve eyleme bal olarak farkllk gsterebilir.
Events mens sadece Behaviors panelinde bir olay semeniz durumunda grnr.
Behaviors panelindeki yukar ve aa ok tular, olaylarn Behaviors paneli listesindeki
srasn ayarlamak iin kullanlabilir. Yukar ok, seili eyi listede yukarya, aa ok
da aaya tar. Eylemlerin tarayc tarafndan altrlma srasn deitirmek iin bu
dmeleri kullann.
4. Sayfay kaydedin ve Web taraycnzda nizleyin.
Popup Message davrann sayfalarnza eklerken dikkatli olun. Bu derste daha sonra
greceimiz alr pencerelerde olduu gibi, alr mesajlar da ok fazla kullanldklar
takdirde ziyaretilerinizin cann skabilir.
Bu dosyay bir sonraki uygulamada kullanmak zere ak brakn.
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
Netscapete almas durumunda grnr.
1. meditations.html belgesinde med_img_map.jpg resminin zerinde yer alan
practice szcnn etrafnda dikdrtgen eklinde bir resim haritas aktif
alan (hotspot) oluturun. Aktif alan seerek Behaviors panelindeki art iaretli
(+) dmesine tklayn ve alan Add Behavior eylem mensnden Set Text > Set
Text Of Status Bar komutunu sein.
Set Text Of Status Bar iletiim kutusu alacaktr. Burada mesajnz yazabileceiniz bir
metin alan greceksiniz.
2. Developing a personal yoga practice yazn ve OK dmesine tklayn.
Durum ubuu mesajlarn kullanrsanz, bal materyallerin ksa aklamas kullanclarn

sayfalarnzda daha kolay dolamalarna yardmc olacaktr.
Kullanc Etklem 293
Behaviors panelinde Set Text of Status Bar eyleminin belirdiine dikkat edin.
3. Dosyay kaydedin ve sayfay Web taraycnzda test edin.
mleci practice szcnn zerine getirdiinizde, oluturduunuz mesaj tarayc

penceresinin alt ksmndaki durum ubuunda grntlenecektir. meditation.html
dosyasn ak brakabilirsiniz; bu dosyay bu derste daha sonra yine kullanacaksnz.
Web Taraycsn Kontrol Etmek

JavaScript olaylar ve dier baz zellikler btn Web tarayclar tarafndan desteklenmez.
Bunlarn bazlar, zellikle de srm numaras 4.0dan eski olan tarayclarn salad
destek son derece snrldr. Eski Web tarayclarnda dzgn bir ekilde gsterilemeyecek
olan gelimi zellikler sunmak istiyorsanz, Check Browser eylemiyle Web sitenizi
ziyaret edenlerin hangi tarayclar kullandn alglayabilir ve kullanclar baka bir
sayfaya ynlendirebilirsiniz. rnein sayfanz katmanlar ieriyorsa (bu konuyu Ders
9da greceiz), katman iermeyen bir sayfa oluturabilir ve tarayc srm 4.0 ya da
daha yeni olan ziyaretileri katmanlarla oluturulmu sayfaya ynlendirebilirsiniz. Bu
durumda, daha eski tarayc srmlerini kullanan ya da JavaScripti etkinletirmemi olan
kullanclar katmanlarn kullanlmad sayfada kalacaktr.
Bu uygulamada belirli bir sayfaya bir Check Browser davran ekleyecek ve
tarayc srm 4.0 ya da daha yeni olan kullanan ziyaretileri baka bir sayfaya
ynlendireceksiniz.
Bu zellii kullanacaksanz, Check Browser davrann ieren sayfann boyutunu ok
kk tutmanz iyi olabilir. Bylece bu sayfa hzla yklenip ziyaretileri hemen dier
tarafa ynlendirebilir. Sayfann boyutu ok bykse yklenmesi uzun srebilir; bu
da ziyaretilerin hem bu sayfann, hem de ynlendirilecekleri sayfann yklenmesini
beklemelerine neden olur.
294 DERS 8
1. explorations klasrndeki sequences.html dosyasn an. Etiket Seicideki

(belge penceresinin sol alt kesinde yer alr) <body> ifadesine tklayarak <body>
etiketini sein.
Eylem, sayfa yklendiinde kullancnn yeniden ynlendirilmesi iin <body> etiketine

eklenecektir. Behaviors panelinin balk ubuunda <body> ifadesini greceksiniz. Bu da
<body> etiketinin seili olduunu gsterir.
<body> etiketi seildiinde belgedeki tm ierik seilmi olarak grnr.
2. Behaviors panelindeki art iaretli (+) dmesine tklayn ve alan Add Behavior
eylem mensnden Check Browser sein.
Check Browser iletiim kutusu.
Kullanc Etklem 295
3. Netscape 4.0 ve Explorer 4.0 ya da daha sonraki srmler iin, ilgili menden
Go to URLi sein. Netscape ve Explorera ait Otherwise seeneklerinin ikisinde
de Stay on This Pagei sein. Other Browsers seeneini de Stay on This Page
olarak ayarlayn.
Check Browser davrann eski tarayc srmlerini kullanan ziyaretileri baka bir sayfaya
ynlendirmek iin kullanmay denerseniz, bu, JavaScripti desteklemeyen bir tarayc
kullanan ya da JavaScriptin etkinliini kaldrm olan ziyaretilerin iine yaramaz.
Kullandklar tarayc srmnden bamsz olarak btn kullanclar baka bir
sayfaya ynlendirmek istiyorsanz, Insert > HTML> Head Tags > Refresh
komutunu seerek ya da Insert ara ubuunun HTML kategorisine geip
Head mensndeki Refresh seeneine tklayarak refresh meta etiketini
kullanabilirsiniz. Alan iletiim kutusundaki Go to URL metin alanna,
kullanclarn ynlendirilmesini istediiniz URLi yazn. Tarayc ziyaretileri
ynlendirmek istediiniz sayfay yklemeden nce ziyaretilerin belirli bir sre
sayfada kalmalarn istiyorsanz, Delay metin alanna bu sreyi saniye cinsinden
girin. Refresh This Document seenei, bu sayfay taraycya yeniden ykler.
4. URL metin alannn yanndaki Browse dmesine tklayn ve Lesson_08_
Interactivity/explorations klasrndeki poses.htm dosyasn bulun.
poses.html dosyas, en yeni tarayc srmlerini kullanan ziyaretilerin ynlendirilecei

sayfadr.
5. JavaScript kodunu sayfanza eklemek iin OK dmesine tklayn.
296 DERS 8
Behaviors panelinde kendisine karlk gelen Check Browser eylemiyle onLoad olay belirecektir.
6. Dosyay kaydedin ve sayfay Web taraycnzda test edin.
Internet Explorer ya da Netscapein 4.0 ya da daha yeni bir srmn kullanmyorsanz, sabit
sayfada kalrsnz. Firefox, Safari ve Opera gibi sk kullanlan tarayclar da buna dahildir.
Internet Explorer ya da Netscapein 4.0 ya da daha yeni bir srmn kullanyorsanz, tarayc
sizi dier sayfaya (poses.html) ynlendirmeden nce ksa bir sre iin sequences.html sayfasn
grebilirsiniz.
sequences.html dosyasn kapatabilirsiniz.
Yeni Bir Tarayc Penceresi Amak

Bu uygulamada, sayfa yklendiinde yeni bir tarayc penceresinin nasl aldn
reneceksiniz. 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, Open Browser Window seenei, yeni tarayc penceresinin bykl ile birlikte
kaydrma ubuklar ve men ubuklar gibi eitli niteliklerini kontrol etmenize imkn salar.
Open Browser Window seeneini eklemek kolay olsa da, bunu bir Web
sayfasnda kullanmadan nce iyi dnn. Ekstra bir pencerenin gerekli
olduundan emin olun. Kullanclar Webde dolarken srekli olarak alan yeni
pencerelerden genellikle rahatsz olurlar. Bunlar makul bir seviyede tutmak
nemlidir. Yeni tarayc pencereleri olutururken ya da baka davranlar
kullanrken, ziyaretilere sunduunuz geribildirim ya da etkileim seeneklerinin
miktarn gz nnde bulundurmay unutmayn ve ok az (bu durumda
kullancya yeterli bilgi sunulmaz) ve ok fazla (bu da genellikle zorlayc olabilir)
arasnda gereken dengeyi kurun. Ziyaretilerin Web siteleriyle ve dier
ortamlarla ilgili daha nceki deneyimlerini anlamanz, onlarn sitenizi ziyaret
ettiklerinde ve sitenizle etkileime girdiklerinde karlaacaklar eyleri daha iyi
belirlemenize yardmc olacaktr.
Kullanc Etklem 297
1. poses.html dosyasnda ilk stunun sekizinci satrndaki Uttanasana szcn

sein. Yeni bir davran eklemek iin Behaviors panelindeki art dmesine (+)
tklayn ve ardndan alan listeden Open Browser Windowu sein.
Open Browser Window iletiim kutusu alacaktr.
2. Browse dmesine tklayn ve explorations/images klasrndeki fwd-fold.jpg

dosyasn bulun.
Bu dosya, yeni pencereye yklenecek olan resimdir.

3. Pencerenin geniliini (Window width) 405, yksekliini de (Window height)
605 olarak ayarlayn ve OK dmesine tklayn.
Buradaki genilik ve ykseklik deerleri yeni pencerenin ieriinin boyutlarna gre

seilir. Sadece bir banner grntleyecekseniz, yeni pencerenin bykln bu reklam
resminin geniliine ve yksekliine gre ayarlamanz gerekir. Kullanacanz ierik daha
bykse, pencerenin bykln buna uygun olacak ekilde ayarlamalsnz. Ayrca,
gerekiyorsa eitli pencere niteliklerini de ayarlayabilirsiniz. Yeni pencerelere ait ilve
nitelikler unlardr:
Navigation toolbar (Gezinti ara ubuu): Aralarnda Back (Geri), Forward (leri),
Home (Giri) ve Reload (Yenile) dmelerinin de bulunduu tarayc dmeleri. Bu

uygulama iin bu kutuyu iaretsiz durumda brakn.
Location toolbar (Konum ara ubuu): Aralarnda location (konum) alannn
da bulunduu tarayc seenekleri. Bu uygulama iin bu kutuyu iaretsiz durumda

brakn.
Status bar (Durum ubuu): Tarayc penceresinin alt ksmnda bulunan ve
mesajlarn (kalan ykleme sresi ve balantlarla ilikili URLler gibi) grntlendii

alandr. Bu uygulama iin bu kutuyu iaretsiz durumda brakn.
298 DERS 8
Menu bar (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. Bu
uygulama iin bu kutuyu iaretsiz durumda brakn.
Scrollbars as needed (Gerektiinde kaydrma ubuklarn grntle): eriin
grnr alann dna tamas durumunda kaydrma ubuklarnn grntlenmesi

gerektiini belirtir. Bu seenei ayarlamadnz takdirde, kaydrma ubuklar
grntlenmeyebilir. Bunun yannda Resize Handles seeneinin etkinlii de kaldrlrsa,
ziyaretiler ieriin pencerenin orijinal boyutlarna smayan ksmn hibir ekilde
gremeyebilir. Eer durum byleyse, pencerenin sayfann ieriine uygun olacak ekilde
boyutlandrldndan emin olmanz gerekir. Pencerenin ok kk ya da ok byk
olmas ve kaydrma ubuklarnn bulunmamas ziyaretiler asndan sinir bozucu bir
durumdur. Baz Web tarayclar bu ayar (yeniden boyutlandrma tutamalar ayaryla
birlikte) dikkate almaz ve gerektiinde kullanr. Bu uygulama iin bu kutuyu da iaretsiz
durumda brakn.
Resize handles (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. Bu uygulama iin bu kutuyu iaretsiz durumda brakn.
Window name (Pencere ismi): Yeni pencerenin ismidir. Yeni pencereyi balantlar iin
hedef olarak tanmlamak ya da JavaScript ile kontrol etmek istiyorsanz, bu pencereyi

adlandrmanz gerekir. Bu uygulama iin bu metin alann bo brakn.
Behaviors panelinde Open Browser Window eylemi grntlenecektir. Geerli olay,

olaylar iin kullandnz tarayclara bal olarak farkllk gsterir. Burada onFocus olay
grntlenmektedir.
Kullanc Etklem 299
4. onFocus olayn onClick olayyla deitirin.
onClick olay, kullanclarn yeni pencereye tablo hcresinin iine tklayarak

erimesini salayacaktr. Tablo hcresine tklanabileceini belirten bir iaret kullanmak
isteyebilirsiniz (rnein ilgili szce farkl bir renk atayarak, alt izgi ekleyerek ya da
baka bir ekilde).
5. Dosyay kaydedin ve sayfanz Web taraycnzda test edin.
Tablodaki Uttanasana szcn ieren hcrenin iine tkladnzda setiiniz resimle

birlikte yeni bir pencere alacaktr.
Bir Alr Men Oluturmak

Ziyaretilerinize sitenin eitli blmlerine hzl eriim imkn vermek ve seeneklerden
oluan bir liste sunmak iin gezinti elemanlarnzla birlikte JavaScript alr menlerini
kullanabilirsiniz. Dreamweavern Pop-Up Menu scripti Netscapete (srm 4 ve daha
yeni srmler), Internet Explorerda (srm 4 ve daha yeni srmler) ve gnmzn
dier popler Web tarayclarnda alr.
1. poses.html belgesinde sayfann st ksmndaki tabloda yer alan explorations
resmine tklayn.
Resmi setikten sonra Behaviors panelinde iki eylemin grntlendiine dikkat

edin. Buradaki balant iin bu derste daha nce bunlar kullanarak bir rollover
oluturmutunuz.
2. Properties denetisindeki Link metin alannda yazan index.html metnini silin
ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basn. JavaScript
olaylarnn silineceini bildirerek sizi uyaran mesaj kutusundaki OK dmesine
tklayn.
Artk explorations resmine ilitirilmi bir balant yok ve daha nce eklediiniz
davranlar da silindi.
3. zerine tklayarak explorations resmini sein, ardndan Behaviors panelindeki
art iaretli (+) dmeye tklayn ve eylem mensnden Show Pop-Up Menuy
sein. Alan Show Pop-up Menu iletiim kutusunda Continue dmesine
tklayn.
Show Pop-Up Menu iletiim kutusu ilk aldnda burada size Fireworks programn
kullanarak daha gelimi alr menler oluturabileceinizi bildiren bir ipucu grrsnz.
Dreamweaverda alr men oluturma ilemine devam etmek iin Continue dmesine
tklayn.
300 DERS 8
Show Pop-Up Menu iletiim kutusunun penceresinde Contents sekmesinin etkin

durumda olduunu greceksiniz. letiim kutusunun bu blmn kullanarak
ziyaretilerinize sunacanz seenekleri tanmlayacaksnz.
4. Text metin alanndaki varsaylan metni (New Item) Meditations yazarak

deitirin. Link metin alannn yanndaki klasr simgesine tklayn, explorations
klasrndeki meditations.html dosyasn bulun ve sein. Choose (Macintoshta)
ya da OK (Windowsta) dmesine tklayarak iletiim kutusunu kapatn.
Men eleri listesine Meditations esi eklenecektir.

5. Yeni bir e eklemek iin Menu alanndaki art iaretli (+) dmeye tklayn.
Varsaylan metni (New Item) Sequences yazarak deitirin. Link metin alannn
yanndaki klasr simgesine tklayn, sequences.html dosyasn bulun ve sein.
Listeye nc bir e ekleyin, bu eyi Philosophy olarak adlandrn ve
philosophy.html dosyasna balayn. Listeye drdnc bir e ekleyin, bu eyi
de Media olarak adlandrn ve media.html dosyasna balayn.
Men elerinin isimlerini ve bunlarn baland sayfalar, listeden ilgili eyi setikten
sonra Text ve Link metin alanlarn kullanarak dzenleyebilirsiniz.
Kullanc Etklem 301
Ksa ve zl men seenekleri kullanarak tasarmnz daha anlalr ve kolay

kullanlr bir hale getirebilirsiniz.
Bir eyi silmek isterseniz nce men eleri listesinden bu eyi sein ve
Menu alanndaki eksi iaretli () dmeye tklayn.
6. Men eleri listesinden Sequences sein. Move item up dmesine
tklayarak Sequences esini listenin en stne tayn. Listeden Philosophyyi
sein ve Move item down dmesine tklayarak listenin en altna tayn.
Men oku dmelerini kullanarak mendeki elerin srasn kolayca deitirebilirsiniz.

Men elerini kullanarak alt kategoriler oluturabilirsiniz. Bunun iin, nce
alt kategori haline getirmek istediiniz eyi sein, sonra da Indent Item
dmesine tklayn. Bir eyi daha yksek bir kategori seviyesine tamak
istiyorsanz, Outdent Item dmesini kullann.
7. Show Pop-Up Menu iletiim kutusundaki Appearance sekmesine tklayn. En
stte yer alan ynlendirme mensnde Vertical menu seeneini iaretleyin.
Font mensnden Verdana font kmesini sein ve Size metin alanna 10
deerini girin. Burada kaln (bold) ya da italik (italic) stil kullanlmamal ve
hizalama seenei Align left olarak ayarlanmaldr.
302 DERS 8
nizleme alannn tazelenmesi ve meny setiiniz boyutlarda gstermesi iin, Font

mensne tekrar tklamanz gerekebilir. Bir sonraki admda renkleri belirlediinizde de
nizleme alan tazelenecektir. Bir sonraki admda renkleri belirlediinizde de nizleme
alan tazelenecektir.
Burada, alr mendeki (pop-up) metin seeneklerini, Yoga Sangha proje sitesinde
kullanlan stillerle eletiriyorsunuz.
Men listenizde drtten az seenek varsa, Dreamweaver son girii, bu iletiim
kutusundaki nizleme alannda drt seenek oluncaya kadar tekrarlar. Bu
sadece grnt amacyladr; belgenizde byle bir ey grmezsiniz.
8. Renk kutularn kullanarak u ayarlar yapn: Up state alannda Text = #666600
(griye alan yeil), Up state alannda Cell = #FFFFFF (beyaz), Over state
alannda Text = #FF9900 (turuncu) ve Over state alannda Cell = #FFFFFF
(beyaz).
Bu seenekler, alr mennn grnmn gezinti resimlerinin stiline mmkn olduu

kadar uyacak ekilde ayarlamanz salar. Show Pop Up Menu iletiim kutusundaki
nizleme alannda mennn nasl gzkeceini grebilirsiniz. kinci men seeneine
Over State renkleri, dier men seeneklerine de Up State renkleri uygulanacaktr.
nizlemede sonular yaklak olarak grrsnz; taraycda renkler tam olarak byle
grnmeyebilir.
Kullanc Etklem 303
9. Show Pop-Up Menu iletiim kutusundaki Advanced sekmesine tklayn.

Varsaylan ayarlarn yle olduundan emin olun: Cell width ve Cell height
men seenekleri Automatic, Cell padding 3, Cell spacing 0, Text indent 0 ve
Menu delay 1000 olarak ayarlanm olmaldr. Gerekiyorsa uygun deiiklikleri
yaparak seenekleri bu ekilde ayarlayn. Pop-Up borders blmndeki Show
borders seeneini iaretlenmemi olarak brakn.
Menu delay, ziyareti imleci menden uzaklatrdnda mennn ne kadar srede

kaybolacan belirler.
10. Show Pop-Up Menu iletiim kutusundaki Position sekmesine tklayn. Soldan
ikinci Menu position dmesine tklayn. X deerini 5, Y deerini 26 yapn.
Hide Menu on MouseOut event kutusunun iaretli olduundan emin olun. OK
dmesine tklayn.
Mennz sayfaya yerletirmek iin, X ve Y eksenlerinin dnda Show Pop-Up Menu

iletiim kutusunun bu ksmndaki drt genel yerletirme dmesini de kullanabilirsiniz.
304 DERS 8
Behaviors panelinde Show Pop-Up Menu davran belirecektir. Bu davran iki ksma
ayrlmtr: Show Pop-Up Menu ve Hide Pop-Up Menu.
Burada .js uzantsna sahip haric bir JavaScript dosyas oluturulur.
Genellikle mm_menu.js ismini tayan bu dosya, alr mennn alabilmesi
iin gereklidir. Burada kullanlan harici dosyann boyutu byk olabilir, bu
nedenle, bunun gibi scriptleri eklediinizde ortaya kan dosyann
boyutunun, ziyaretilerinizin dosyay hzla ve kolayca indirmelerine engel
olup olmayacana sizin karar vermeniz gerekir.
Menlerinizi olabildiince ayrntl bir ekilde test edin. mleci explorations gezinti
resminin zerine getirdiinizde, explorations resminin altnda bu uygulamada
oluturduunuz men belirecektir. Mennn grnm ve konumuyla ilgili olarak
yaptnz ayarlar, mennn dier gezinti elemanlaryla uyumlu grnmesini
salayacaktr.
Burada kullandnz Show Pop-Up Menu davranyla men Macintosh ve
Windowsta eitli tarayclarda farkl ekilde grntlenebilir. Mennn
konumunu ayarlamanz gerekebilir.
Kullanc Etklem 305
Ne rendiniz?
Temel tipte rolloverlar oluturdunuz (Sayfa 279282).

Bir alr mesaj olutururken farkl olaylar seerek ve eylemler ekleyerek davranlar
nasl dzenleyeceinizi rendiniz (Sayfa 282287).
Bir kullanc eylemine birden fazla davran ekleyerek kullanc imleci sayfadaki
bir resmin zerine getirdiinde sayfada birden fazla resmin deimesini salamay
Ziyareti imleci bir balantnn zerine getirdiinde bununla ilgili daha fazla bilgi
grntlemek iin bir durum ubuu mesaj oluturdunuz (Sayfa 293294).
Ziyaretileri kullandklar tarayc srmne bal olarak farkl sayfalara
ynlendirmek iin Check Browser davrann kullandnz (Sayfa 294297).
Bir davran kullanarak, sayfa yklendiinde yeni bir tarayc penceresinin almasn
saladnz (Sayfa 297300).
Birden fazla men esi ieren bir JavaScript alr mens oluturdunuz
(Sayfa 300305).
306 DERS 8
Katman
Oluturmak
Katman (layer), Web taraycs penceresinde istediiniz bir konuma yerletirebileceiniz

ve HTML ierii iin kullanlan dikdrtgen eklinde bir tayc elemandr. Katmanlar eitli
elemanlar ierebilirler (metinler, resimler, tablolar ve hatta baka katmanlar). Bir HTML
belgesine yerletirebildiiniz her eyi bir katmana da yerletirebilirsiniz. Katmanlar zellikle
elemanlar birbirinin zerine yerletirmek ya da birbirlerinin stn rtmek iin ok kullanldr.
Katmanlar, sadece srm 4.0 ve daha yeni olan Web tarayclarnca desteklenir. CSSle
(Cascading Style Sheets) birlikte kullanldklarnda yerleim dzenini ve grnm kontrol
etmeyi, davranlarla birlikte kullanldklarnda da etkileim zellikleri eklemeyi mmkn klarlar.
Bu derste Dreamweaverda katman oluturmak iin eitli yntemler reneceksiniz.
Sayfada istediiniz boyutlarda bir katman oluturacak ve ayrca nceden tanmlanm bir
genilik ve ykseklik deeri kullanarak sayfaya bir katman yerletireceksiniz. Byklk,
konum ve grnrlk de dahil olmak zere eitli katman niteliklerinde deiiklik yapmay
Bu projede eitli
katmanlar oluturacak,
bunlarn iine metin ve
resimler yerletirecek,
zelliklerini
deitirecek ve sayfa
zerinde tayarak
konumlarna tam olarak
yerletireceksiniz.
Ayrca bu derste,
katman tabanl
animasyonlar
greceksiniz.
reneceksiniz. Ayrca eski tarayc kullanan ziyaretilerin de sayfalarnz grebilmesini

salamak iin katmanlarnz tablolara dntreceksiniz.
Ayrca eski tarayc kullanan ziyaretilerin de sayfalarnz grebilmesini salamak iin
katmanlarnz tablolara dntreceksiniz.
Tamamlanm sayfann bir rneini grmek isterseniz Lesson_09_Layers/Completed
klasrndeki layers.html dosyasn an.
Neler reneceksiniz?
eitli katmanlar oluturacaksnz.

Katmanlar adlandracaksnz.
Katmanlarn byklnde ve konumunda deiiklik yapacaksnz.
Sayfanzdaki ierii kontrol etmek iin katmanlardan faydalanacaksnz.
Katmanlarn srasn deitireceksiniz.
Katmanlar i ie yerletirecek ve i ie durumdaki katmanlar eski hallerine
getireceksiniz.
Katmanlarn grnrlk durumunu deitireceksiniz.
Cetvelleri ve zgaralar ayarlayacaksnz.
JavaScript kullanarak bir Netscape hatasn dzelteceksiniz.
Katmanlarla tasarlanm sayfalar eski tarayclarla uyumlu hale getireceksiniz.
Timelinelar tanyacaksnz.
Yaklak Sre
Ders Dosyalar
Ortam Dosyalar:
Lesson_09_Layers/Images/(btn dosyalar)
Balang Dosyalar:
Lesson_09_Layers/layers.html
Tamamlanm Proje:
Lesson_09_Layers/Completed/layers.html
Lesson_09_Layers/Completed/layers_table.html
Lesson_09_Layers/Completed/transparent.gif
308 DERS 9
Katman Oluturmak
Katman (layer), <div> etiketi olarak bilinen ve dier elemanlarn zerini rtmesini
salayan belirli CSS zelliklerinden (mutlak konumlandrma ve z-index) faydalanan bir
tayc bileendir.
Bir katman oluturmak iin eitli yntemlerden faydalanabilirsiniz. Setiiniz yntem,
katman nasl kullanmay dndnze ve nereye yerletirmek istediinize bal olarak
farkllk gsterebilir. Bu uygulamada eitli katmanlar oluturacak ve bunlara ierik
ekleyeceksiniz.
1. Lesson_09_Layers klasrndeki layers.html dosyasn an. Insert ara
ubuunda Layout kategorisine gein ve Standard dmesinin seili
olduundan emin olun.
Bu derste Design grnmn kullanmanz gerekiyor.
Standard grnm varsaylan seenektir ve Insert ara ubuundaki Standard dmesinin

etkin olduunu, vurgulu olarak grnmesinden anlayabilirsiniz. Katman oluturabilmek
iin Standard grnmde olmanz gerekir.
Draw Layer dmesi

2. Insert ara ubuunun Layout kategorisinde yer alan Draw Layer dmesine
tklayn. mleci belge penceresinin zerine getirin, sonra da tklayp
srkleyerek sayfann sa tarafnda yeni bir katman oluturun.
Belge penceresinin zerine getirdiinizde imle art iaretine (+) dnecektir. Siz imleci
srkleyip farenin dmesini brakarak katman oluturduktan sonra ekranda yeni
katman gsteren bir dikdrtgen belirecektir.
Katman Oluturmak 309
3. Dreamweaver > Preferences (Macintoshta) ya da Edit > Preferences

(Windowsta) komutunu sein. Invisible Elements kategorisini sein ve Anchor
Points For Layers seeneini iaretleyin. OK dmesine tklayn.
Belge penceresinin sol st tarafnda bir katman iareti greceksiniz. Seiliyken katmann
d hattnn mavi, grndne dikkat edin.
Katman semek iin katman iaretini kullanabilirsiniz. Ama katmannz belge
penceresinin sol st tarafndaysa iaret katmann konumunu kaydrm gibi
grnebilir. Bu kayma, sadece belge penceresinde grlr. Sayfa Web
taraycsnda aldnda btn elemanlarn yeri doru olarak grnr.
aretleri geici olarak kapatmak iin View > Visual Aids > Invisible Elements
komutunu sein. Mendeki komutun yannda yer alan onay iareti, seenein
etkin olduunu gsterir.
Varsaylan durumda katman kodu sayfann en stne, <body> etiketinin hemen arkasna
yerletirilir. Dreamweaver, katman oluturmak iin <div> etiketini kullanr. Bu etiket,
katmann konumunu tarayc penceresinin st ve sol kenarna gre belirlemek iin mutlak
konumlandrma (absolute positioning) zelliinden faydalanr. <div> etiketi, bir blok
seviyesi elemandr (block-level element). Blok seviyesi eleman, sayfanzn blmlerini
dzenleyen bir taycdr. Yeni bir satrdan ya da yeni bir bloktan itibaren balar. Dier
blok seviyesi elemanlarna rnek olarak <p> (paragraph) ve <ul> (Unordered List-Srasz
liste) gsterilebilir. Blok seviyesi elemanlar dier blok seviyesi elemanlarn ve satrii
310 DERS 9
elemanlar ierebilir. Satrii elemanlar (inline elements) genellikle sadece metinlerle dier
satrii elemanlar ierir ve blok elemanlar iinde kullanlr. Bunlar yeni bloklar ya da satrlar
oluturmaz. Satrii elemanlara rnek olarak <span> (Span), <br> (line BReak-Satr sonu) ve
<a> (anchors [Yer mleri] ya da link [balant] olarak bilinirler).
Dreamweaver, katman oluturmak iin kullanlabilen eitli ilve etiketleri
(<span>, <layer> ve <ilayer>) tanr, ama katman oluturmak zere bunlarn
kullanlmas gibi bir seenek sunmaz. Bir satrii eleman olan <span> etiketi,
katmann konumunu etrafndaki dier elemanlarn konumuna bal olarak
belirlemek iin greceli konumlandrma (relative positioning) zelliini kullanr.
<layer> ve <ilayer> etiketleri sadece Netscape Navigator 4te destekleniyordu.
Netscape artk bu etiketleri desteklemiyor, Internet Explorer ise bu etiketleri
hibir zaman desteklemedi. Design grnm bir katman iareti eklese bile bu
tipteki katmanlar render etmez veya grntlemez.
4. mleci katmann kenarlnn zerine getirin. mle bir el simgesine (Macintoshta)
ya da drt ulu bir oka (Windowsta) dntnde tklayarak katman sein.
mle katmann kenarln gsteren izginin zerine geldiinde izgilerin rengi krmzya
dner ve siz de katman seebileceinizi anlarsnz.
Katmann sol st tarafnda kare eklinde bir sekme greceksiniz. Bu sekme, katman seim
tutamacdr. Katmann kenarl zerinde grdnz mavi kareler ise boyutlandrma
tutamalardr.
5. Ekleme noktasn katmann iine yerletirin. Katmana u niteliklere sahip bir tablo
ekleyin: Rows = 1, Columns = 1, Table width = 300 pixels, Border thickness = 0, Cell
padding = 5, Cell spacing = 0, Header = None. Caption ve Summary alanlarn da
bo brakn. Lesson_09_Layers/Text klasrnde yer alan about.txt dosyasn an,
btn metni kopyalayn ve katmann iinde oluturduunuz tabloya yaptrn.
Insert ara ubuunun Layout kategorisinde Table adnda bir dme bulunur.
Katman, gerekirse tabloyu ve tablonun iindeki metni alacak ekilde geniler. Siz
Properties denetisindeki Overflow ayarn deitirmedike katmanlar btn ieriklerini
gsterecek ekilde genilerler.
6. Ekleme noktasn belgede katmann dnda bir konuma yerletirin. Draw Layer
dmesine tklayn ve sayfann sol tarafna kk bir katman daha ekleyin.
Lesson_09_Layers/Images klasrndeki studio-om.jpg resmini katmana
ekleyin. Resmin alternatif metni olarak OM ifadesini kullann.
Katman gerekirse resmin boyutlarna uygun olarak genileyecektir. Eer katman resimden
daha bykse, boyutlarnda herhangi bir deiiklik olmaz.
Draw Layer dmesine srekli basmadan birden fazla katman oluturmak
isterseniz, ilk katman izerken Cmd (Macintoshta) ya da Ctrl (Windowsta)
tuunu basl tutun. Yardmc tuu brakana kadar yeni katmanlar izmeye
devam edebilirsiniz.
Siz katman olutururken ekleme noktas bir katmann iindeyse, yeni katman dier
katmann iine yerletirilir.
ie geen katmanlarn eski tarayclarda sorun karabileceini unutmayn.
Bu aamada belgenizin grnm aadaki rnee benzeyecektir.
312 DERS 9
Seili olmayan ve etkin durumda olmayan katmanlarn kenarlklar soluk, gri

renkli ince bir izgiyle gsterilir. View > Visual Aids > Layer Outlines komutunu
seerek bu zellii aabilir ya da kapatabilirsiniz. Mendeki komutun yannda
bir onay iareti grrseniz, sz konusu seenein etkin olduunu anlarsnz.
7. Ekleme noktasn belgede ilk iki katmann dnda bir konuma yerletirin ve
Insert > Layout Objects > Layer komutunu sein. Lesson_09_Layers/Images
klasrndeki teaching.jpg resmini katmana yerletirin ve resmin alternatif
metni iin teaching ifadesini kullann.
Katman, katman tercihlerinde belirlenen varsaylan genilik ve ykseklik deerleri

kullanlarak belge penceresinin sol st kesinde oluturulacaktr. Bu nc katman
daha nce oluturduunuz ikinci katmann zerine binebilir.
Dreamweavern varsaylan genilik deeri 200 piksel, varsaylan ykseklik
deeri de 115 pikseldir. Ama Preferences iletiim kutusunun Layers
kategorisini kullanarak bu deerleri deitirebilirsiniz. Preferences iletiim
kutusunu amak iin Dreamweaver > Preferences (Macintoshta) ya da Edit >
Preferences (Windowsta) komutunu sein ve Layers kategorisine gein.
Preferences iletiim kutusunun Layers kategorisini kullanarak varsaylan
grnrlk, arka plan, i ie yerletirme ve uyumluluk seeneklerini de
ayarlayabilirsiniz. Bu seenekleri dersin sonraki blmlerinde ele alacaz.
Katman kodu eklenmi olmasna ramen ekleme noktasnn konumuna bal olarak, yeni
yerletirdiiniz katmann iaretleri grnmeyebilir. Katman iaretleri yeni katmanlarn
arkasnda gizlenmi olabilir. Sayfa zerinde imlele izilerek katman eklenirken katman
kodu arada hibir paragraf ya da baka bir kod olmadan sayfann en st ksmna yerletirilir.
Katman eklerken baka yntemler kullanldnda bu kodlar dier etiketlerin (rnein
paragraf iin kullanlan <p> etiketi gibi) arasna ya da iine yerletirilebilir. Koddaki bu
etiketleri silebilirsiniz (kodlarla alma konusunu Ders 16da greceiz). Bu aamada
nc katman dier katmanlarn iaretlerini ve belirli blmlerini ksmen rtebilir.
8. nceki admda eklediiniz katmann seimini kaldrmak iin belge
penceresinde mevcut katmanlarn dnda bir yere tklayn. Insert ara
ubuundaki Draw Layer simgesini srkleyerek belge penceresinin zerinde
mevcut katmanlarn dnda bir yere brakn. Ekleme noktasn yerletirmek
iin yeni katmann iine tklayn ve Lesson_09_Layers/Images klasrnde
yer alan class.jpg resmini katmana ekleyin. Resmin alternatif metni iin class
szcn kullann.
Draw Layer simgesini baka bir katmann iine brakmayn. Bunu yaptnz
takdirde katmanlar i ie yerletirilir.
Belge penceresinde, en son oluturduunuz katmann stnde hafife saa doru

telenmi olarak (varsaylan genilik ve ykseklik deerleriyle) drdnc bir katman
oluturulacaktr (bkz. sradaki rnek). Siz katman ekledikten sonra ekleme noktas
otomatik olarak bu katmann iine yerletirilecektir.
9. layers.html belgesini kaydedin.
Bir sonraki uygulama iin bu dosyay ak brakn.

Bu uygulamada katman oluturmak iin kullanlan btn yntemlerde belgenin gvde
ksmna <div> etiketi yerletirilmitir. Oysa CSSte bu katmanlar tanmlayan CSS
zellikleri belgenin ba ksmnda bir dahili stil sayfasna yerletirilirler. CSS konusunu
Ders 4te grmtk. Katman oluturmak iin kullanlabilecek dier bir yntem de,
katmanlarn yerleimini ve konumunu tanmlayan CSS zelliklerini bir harici stil
sayfasnda tanmlamaktr. Bu da dahili stillerin aktarlmasyla ya da stillerin en batan
harici bir stil sayfasnda oluturulmasyla gerekletirilir.
314 DERS 9
Katmanlar Adlandrmak
Dreamweaver katmanlara otomatik olarak numara srasyla genel tipte isimler atar (Layer1,
Layer2, vs). Bu isimler ok aklayc deildir; zellikle de birden fazla katman ieren
karmak sayfalar oluturuyorsanz. Katmanlarnza ksa ve aklayc isim verme alkanln
elde etmeniz iyi olacaktr.
1. Window > Layers komutunu seerek Layers panelini an.
Layers panelini, CSS panel grubunu atktan sonra Layers panelinin sekmesine
tklayarak da aabilirsiniz.
CSS panel grubunda yer alan Layers paneli, sayfada bulunan katmanlar bir liste halinde
grntler. Bu paneli kullanarak istediiniz bir katman seebilir, adlandrabilir, katmann
grnrlk seeneini, ylma srasn (stacking order) deitirebilir ya da bir sayfadaki
birden fazla katman seebilirsiniz. Yeni bir katman oluturduunuzda bu katman Layers
panelindeki listenin en stne, dier katmanlarn zerine yerletirilir (eer listede baka
katman varsa). Burada katmanlar azalan sralamayla listelenir. Eer katman gizlenmise ya da
sayfann dna tanmsa, bu katman semek iin tek zm Layers panelini ya da katman
iaretlerini kullanmak olabilir.
Eer ekleme noktas bir katmann iindeyse, bu katmann ismi Layers panelinde
kaln olarak grntlenir ve belge penceresinde seim tutamalar belirir. Bu,
katmann etkin durumda olduunu ama seili olmadn gsterir.
Oluturduunuz drt katman Layer1, Layer2, Layer3 ve Layer4 eklinde adlandrlacaktr.
2. Layers panelindeki Layer1e ift tklayn, katmann adn deitirmek iin textlayer
yazn ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basn. Paneldeki
Layer2 adl katmana ift tklayn, om yazn ve Return (Macintoshta) ya da Enter
(Windowsta) tuuna basn. Layer3 adl katmann ismini deitirmeyin. Paneldeki
Layer4 adl katmana ift tklayn, class yazn ve Return (Macintoshta) ya da Enter
Katman isimlerinde boluk ya da zel karakterler (alt izgi karakteri de dahil) kullanmayn.
Katman isimleri benzersiz olmaldr. Birden fazla katman ya da bir katmanla resim gibi farkl
bir eleman ayn ekilde adlandrmayn. Btn katmanlar iin tutarl bir adlandrma sistemi
kullanmak iyi bir yaklamdr.
Eer katman seili durumdaysa katmann ismini Properties denetisindeki Layer

ID metin alanna da yazabilirsiniz.
Siz katmanlara isim atadnzda bu katmanlar belge penceresinde seili hale gelir. Seili katman geici
olarak onun zerini rten dier btn katmanlarn nnde grnr. Seili durumdaki bir katmann
seimini kaldrmak iin belge penceresinde btn katmanlarn dnda bir yere tklamanz yeterlidir.
Bu dosyay bir sonraki uygulama iin ak brakn.
Katmanlarda Deiiklik Yapmak

Bir katman oluturduktan sonra buna bir arka plan eklemek, katman tamak ya da yeniden
boyutlandrmak isteyebilirsiniz. Katman kullanmann avantajlarndan biri, sayfa zerinde tam olarak
istenen konuma yerletirilebilmeleridir. Properties denetisini kullanarak konum deerleri girebilir
ve katmanlar dier katmanlarla hizalayabilirsiniz. Bir katmann zerinde deiiklik yapabilmeniz
iin nce o katman semeniz gerekir. Katman seimi iin eitli yntemlerden faydalanabilirsiniz.
Bu yntem, yerleim dzeninizin karmaklk dzeyine bal olarak belirlenebilir.
1. layers.html dosyasnn belge penceresinde imleci textlayer katmannn kenarlnn
zerine yerletirin ve imle bir el simgesine (Macintoshta) ya da ularnda ok
bulunan bir artya (Windowsta) dntnde kenarlk izgisine tklayn. Kenarln
rengi krmzya dnecektir.
Herhangi bir katman seili durumda deilken Shift tuunu basl tutarak bir
katmann iine tkladnzda o katman seili hale gelir. Katmann iine normal bir
ekilde tkladnzda ise ekleme noktas katmann iine yerletirilir ve katman
etkinletirilir, ama katmann kendisi seilmi olmaz. Shift tuunu basl tutup dier
katmanlara tklayarak birden fazla katman seebilirsiniz. Tek bir katman semek
iin; belge penceresinde bulunan ve katman temsil eden sar renkli katman
iaretine tklama, Etiket Seicide katmann etiketine tklama veya Layers
panelinde ilgili katmann adna tklama yntemlerinden birini de kullanabilirsiniz.
316 DERS 9
Siz bu ilemi yaptnzda sz konusu katman seili hale gelir ve etrafnda mavi renkli
boyutlandrma tutamalar belirir. Ayrca seili katmann ismi Layers panelinde
vurgulanr.
Properties denetisi, seili katmana ait seenekleri gsterecek ekilde deiir. Btn
zellikleri grmek isterseniz Properties denetisinin sa alt kesindeki geniletme okuna
tklayn.
Bir katman silmek isterseniz, nce o katman sein ve ardndan Delete
(Macintoshta) ya da Backspace (Windowsta) tuuna basn.
2. Properties denetisindeki W metin alanna 320px yazp Return (Macintoshta)
ya da Enter (Windowsta) tuuna basarak textlayer katmann yeniden
boyutlandrn.
Properties denetisinde W ve H metin alanlar katmann genilik ve ykseklik deerlerini

gsterir. Bir katman yeniden boyutlandrdnzda bu deerler deiir. Burada kullanlan
varsaylan birim pikseldir (px).
Pika (pc), Punto (pt), in (in), milimetre (mm), santimetre (cm) ya da ebeveyn
deere gre yzde (%) birimlerini de kullanabilirsiniz. Birim ksaltmalar deere
bitiik yazlmal, arada boluk kullanlmamaldr (3mm gibi). Tavsiye edilen
birimler piksel ve yzdedir.
Katmanlarn boyutlarn, boyutlandrma tutamalarndan birini tutup srkleyerek de

deitirebilirsiniz.
Bir katmann boyutunu klavyeyi kullanarak her seferinde bir piksel deitirmek
iin katman sein ve Macintoshta Option+sa ok tuuna (ya da herhangi bir ok
tuuna) veya Windowsta Ctrl+sa ok tuuna (ya da herhangi bir ok tuuna)
basn. Katman geerli zgara artm deerine gre boyutlandrmak isterseniz,
Macintoshta Shift+Option+right-ok tuuna (ya da katman geniletmek
istediiniz yne ait ok tuuna) veya Windowsta Shift+Ctrl+sa ok tuuna (ya da
katman geniletmek istediiniz yne ait ok tuuna) basn. Izgara artm
deerinin nasl ayarlandn grmek iin bu derste daha sonra greceimiz
Izgara Ve Cetvel Seeneklerini Ayarlamak uygulamasna bakabilirsiniz.
Bu derste daha nce metin ve resim eklerken grdnz gibi, katmanlar ierik sacak ekilde
genilerler. Katman ieriinin tanmlanm boyutlar amas durumunda genilik ve ykseklik
iin kullanlan orijinal deerler geersiz klnr. Properties denetisindeki Overflow ayar, bu
durumda katmanlarn nasl davranacan belirler. Drt tane Overflow seenei vardr: Visible,
Hidden, Scroll ve Auto.
Visible, (varsaylan seenek), katman btn ierii grnecek ekilde aaya ve saa
doru gerektii kadar genileterek katmann boyutlarn bytr.
Hidden seenei, katmann boyutlarn korur ve smayan ierii keser ve bu arada
herhangi bir kaydrma ubuu grntlemez.
Scroll seenei, ieriin katmann boyutlarn ap amadna bakmakszn katmana
kaydrma ubuklar ekler.
Auto seenei, kaydrma ubuklarn sadece ieriin katmann snrlarn amas
durumunda grntler.
Bu seenekleri grebilmek iin Properties denetisindeki geniletme okuna tklamanz gerekebilir.
Katmann grnr ksmn belirtmek iin bir krpma alan da (clipping area)
tanmlayabilirsiniz. Krpma alan daha kk, daha byk ya da katmanla ayn
boyda olabilir. Properties denetisindeki drt Clip alanna deer girerek grnr
alan tanmlayabilirsiniz: L (Left-sol), T (Top-st), R (Right-sa) ve B (Bottomalt). Krpma alannn dndaki btn ierik gizlenir. Bu ayar drt Overflow
seeneiyle de kullanlabilir.
3. textlayer katman seili durumdayken Properties denetisindeki L metin alanna
375px, T metin alanna da 50px yazn. om katmann sein ve L metin alanna
125px, T metin alanna da 100px yazn.
Properties denetisinde om katmanna ait sol (L metin alan) ve st (T metin alan) mesafe
zelliklerini deitirmeye almadan nce om katmann (ierdii resmi deil) setiinizden
emin olun.
L ve T metin alanlarndaki deerler negatif olarak ayarlandysa katmann konumu
sayfa dnda kalabilir. Katmana bir animasyon efekti uygulamak ve katmann
balangta sayfa dnda olmasn istiyorsanz bunu yapabilirsiniz. Katmanlara
animasyon uygulamay bu dersin ilerleyen blmlerinde greceiz.
Properties denetisinin st yarsnda yer alan L ve T metin alanlarn kullandnzdan emin

olun. Bu admda Clip blmndeki metin alanlarn kullanmayn. Properties denetisinin st
318 DERS 9
yarsndaki L metin alan, katmanla tarayc penceresinin sol kenar arasndaki boluu
tanmlar. Properties denetisinin st yarsndaki T metin alan ise katmanla tarayc
penceresinin st kenar arasndaki boluu tanmlar.
Seilen katman kenarlndan ya da seim tutamacndan tutup srkleyerek
sayfa zerinde baka bir konuma tayabilirsiniz. Bir katman klavyeyi
kullanarak her seferinde bir piksel tamak isterseniz, katman sein ve ok
tularn kullann. Ok tularn kullanrken Shift tuunu basl tutarsanz,
katman her seferinde geerli zgara artm deeri kadar ilerler.
4. Layers panelinde class katmann sein ve belge penceresindeki katman seim
tutamacn sayfada aaya doru srkleyerek katman sayfada daha altta, om
katmannn altnda grnecek ekilde tayn. Layer3 adl katman sein ve onu
da sayfada daha aaya, class katmannn altna srkleyin.
Katman seim tutamacn tutarak srklediinizde, sadece katmann ieriini deil, asl
katman srklediinizden emin olursunuz.
Layer3 adl katman srklerken katman belge penceresinin alt kenarnn
zerinde biraz tutarsanz, belge yukarya doru kaydrlr ve pencerenin alt
ksmnda katman iin ihtiyacnz olan bo alana ularsnz.
Katmanlar altlarnda grnen dier katmanlar gizliyorsa, zerinde deiiklik yapmak

istediiniz gizlenmi katman semek iin Layers panelini ya da katman iaretlerini
kullanmanz gerekebilir. Bir sonraki uygulamada greceimiz gibi katmanlarn ylma
srasn da ayarlayabilirsiniz.
Belgenizin grnm burada gsterilen rnee benzeyecektir.
5. textlayer katmann sein. Properties denetisinde Bg Color kutusuna tklayn

ve ak hki rengi sein ya da metin alanna #CCCC99 yazn.
Katman (inde metin bulunan tabloyu deil) setiinizden emin olun.
Katmann arka plan rengi ak hkiye dnecektir.

Katmanlarn arka planlaryla ilgili iki seenek mevcuttur:
Bg image: Katman iin bir arka plan resmi tanmlamaya yarar. Metin alanna
resmin yolunu yazn ya da bir kaynak resim semek iin klasr simgesine tklayn.
Katmanlarn arka plan her taraycda grnmeyebilir.
Bg color: Katman iin bir arka plan rengi tanmlamaya yarar. Bu seenei saydam
olarak ayarlamak iin metin alann bo brakn ya da renk mensnn st tarafnda

yer alan varsaylan seenei (zerinde krmz bir izgi olan bo renk kutucuu)
iaretleyin.
Bu seenekleri kullanrken sayfalarnz btn Web tarayclarnda test edin. Katmann

ieriine bal olarak sonular beklediinizden farkl olabilir. Buradaki uygulamada
katmann iinde metin var. Web taraycsnda grntlendiinde metnin boyutu byk
lde ziyaretinin Web taraycsna ve sistemine bal olarak (zellikle de metin
boyutu greceli olarak ayarlandysa) ok farkl olabilir. Metin, katman iin tanmlanan
uzunluk deerini aabilir. Bu durumda arka plan ok byk ya da ok kk olabilir.
Bunu nlemek iin tablonun arka planna ak hak rengi uygulayabilirsiniz. Bu sorunu
zmenin dier bir yolu da metin iin mutlak bir byklk tanmlamak zere CSS
kullanmak ve sonra da katmann bykln buna gre ayarlamaktr.
6. om katmann sein, ardndan Shift tuunu basl tutup kenarlna tklayarak
textlayer katmann sein.
Ayrca birden fazla katman semek iin Shift tuunu basl tutup Layers
panelinde semek istediiniz katmanlarn isimlerine tklayabilirsiniz.
Birden fazla katman seili durumda olduu iin en son seilen katman ii dolu mavi
tutamalarla gsterilir. Dier katmanlara ait tutamalarn ii botur.
320 DERS 9
Birden fazla katman ayn anda yeniden boyutlandrmak isterseniz, belgede

iki ya da daha fazla katman sein. Ardndan da Modify > Arrange > Make
Same Width ya da Make Same Height komutunu sein. lk seilen
katmanlarn genilik ya da ykseklik deerleri en son seilen katmann
genilik ya da ykseklik deerine eit olacak ekilde ayarlanacaktr. Bu
deerleri seili durumdaki btn katmanlara uygulamak iin Properties
denetisindeki genilik ve ykseklik metin alanlarn da kullanabilirsiniz.
7. Modify > Arrange > Align Top komutunu sein.
Bir hizalama seenei kullandnzda, seili durumdaki btn katmanlar en son seilen
katmann konumuna gre hizalanr. Bu mendeki dier hizalama seenekleri Align Left
(Sola Hizala), Align Right (Saa Hizala) ve Align Bottomdr (Alta Hizala).
textlayer ve om katmanlarnn st ksmlar birbirine gre hizalanacaktr.
8. Belgeyi kaydedin.

Katmanlarn Ylma Srasn Deitirmek

Katmanlarn ylma srasn deitirmek iin Properties denetisini ya da Layers panelini
kullanabilirsiniz. Burada her bir katmann z-index deeri kullanlr. z-index deeri,
katmanlarn Web taraycsnda hangi srayla oluturulacan belirler. z-index numaras
daha byk olan bir katman, z-index numaras daha kk olan katmanlarn stnde yer
alr. Burada kullanlan deerler pozitif ya da negatif olabilir. Bu, zellikle st ste gelen
katmanlarnz varsa ve hangi katmann ya da katmanlarn dierlerinin zerinde olacan
belirlemeniz gerekiyorsa faydaldr. Birden fazla katman ayn z-index numarasna sahip
olabilir. Bu durumda, kodda ilk grnen katman en stte yer alr.
1. layers.html belgesinde class katmann sein ve yukarya doru, om katmannn
zerini ksmen rtene kadar srkleyin. Sayfanz Web taraycnzda nizleyin.
Katmanlarda resimlerle alrken saydam arka plana sahip resimler

(saydaml destekleyen GIF formatnda kaydedilmi resimler)
oluturabilirsiniz. Katmanlarda dier resimlerin zerinde saydam arka plana
sahip resimler kullanarak daha derinlikli bir grsel efekt elde edebilirsiniz.
Bu uygulamann aadaki admlarnda katmanlarn ylma srasn deitirerek om

katmannn class katmannn zerinde grnmesini salayacaksnz.
322 DERS 9
2. Layers panelinde class katmann sein ve listede aaya doru, om

katmannn altna doru srkleyin. Layers panelinde class ve textlayer
katmanlarnn arasnda mavi, ince bir izgi belirince srkleme ilemini
durdurun ve katman brakn.
Layers panelinde bu deiikliin uygulandn greceksiniz. class katman artk

om ve textlayer katmanlarnn arasnda yer almaktadr. Layers panelindeki z-index
numaralar da otomatik olarak deiecektir. Ylma srasn, katmanlar Layers panelinde
srkleyerek deitirmek, z-index deerlerini Properties denetisinde elle deitirmeye
gre daha kolay olabilir. nk srkleme ynteminde Dreamweaver z-index deerlerini
otomatik olarak deitirir.
class katmannn Properties denetisinde yer alan Z-index metin alanndaki deer 4 iken
deierek 2 olacaktr.
Belgenizin grnts daha nce verilen rnee benzeyecektir.
Bu dosyay kaydedin ve bir sonraki uygulama iin ak brakn.
Katmanlar e Yerletirmek ve Darya

karmak
ie yerletirmek, katmanlar gruplama yntemlerinden biridir. Baka bir katmann iine
yerletirilen bir katman, ebeveyn katmanyla birlikte hareket eder ve onun grnrlk
ayarn kullanr. Kimi zaman bir katman dier bir katmann iine yerletirmeniz ya da
ierdeki bir katman darya karmanz gerekebilir. imdiki uygulamada bu ilemlerin
nasl yapldn greceiz. Yalnz dikkatli olun, nk i ie geen katmanlar btn Web
tarayclarnda dzgn bir ekilde grntlenmeyebileceinden sonular ok gvenilir
olmayabilir. Test etme konusunu Ders 15te greceiz.
Properties denetisindeki T (st) ve L (sol) deerleri baka bir katmann
iine yerletirilmi bir katmanda sayfann sol st kesine deil, ebeveyn
katmana baldr. T ve L deerleri, katmann konumunu sayfann ya da
ebeveyn katmann sol st kesine gre tanmlar.
1. layers.html belgesinde Layers panelini kullanarak Layer3 adl katman sein ve
Cmd (Macintoshta) ya da Ctrl (Windowsta) tuunu basl tutup srkleyerek
katman adn (katmann kendisini deil) textlayer katmannn zerine getirin.
textlayer katmannn zerine geldiinde Layer3 katmann brakn.
Windowsta, Layer3 katmann zerinde getirdiinizde textlayer katmannn isminin

etrafnda dz bir d hat belirir. Macintoshta byle bir grsel iaret kullanlmaz.
Katmanlarn arasndaki alan ince mavi bir izgi grntlenerek

vurgulandnda farenin dmesini brakmayn. Aksi takdirde katmanlar i
ie yerletirmek yerine katmanlarn ylma srasn deitirirsiniz.
324 DERS 9
Layers panelinde Layer3 katman, ebeveyn katmannn (textlayer) altnda girintili olarak
grntlenecektir. textlayer katmannn yannda aay gsteren bir gen (Macintoshta) ya
da bir eksi iareti () dmesi (Windowsta) greceksiniz; bunun yardmyla iteki katman
grebilirsiniz. Sadece ebeveyn katman grntlemek iin gene (Macintoshta) ya da eksi
iaretine (Windowsta) tklayarak bu grnm daraltabilirsiniz. Bu durumda sadece ebeveyn
katman ve yannda sa taraf gsteren bir gen (Macintoshta) ya da bir art iareti (+)
(Windowsta) grrsnz. teki katmanlarn listesini grmek iin art iaretine ya da gene
tekrar tklayabilirsiniz. Belge penceresinde Layer3 katmannn konumu, katman textlayer
katmannn sa altnda olacak ekilde kayacaktr. nk Layer3 katmannn L (sol) deeri artk
ebeveyn katman olan textlayera gre ayarlanmaktadr.
Belge penceresinde Layer3 temsil eden katman simgesi, textlayer katmannn zerinde, tablonun
hemen stnde grnecektir. Dreamweaverda bu simge tarafndan oluturulan alan, sadece
grsel yardmclarn (Visual Aids) etkinletirilmesi durumunda grnr. Simge, Web taraycsnn
penceresinde grnmez ve burada herhangi bir yer kaplamaz.
layers.html dosyasn farkl tarayclarda nizlerseniz, katmanlarn grntlenmesiyle ilgili baz
farkllklar olduunu grrsnz. Grnt, ziyaretilerin iletim sitemine ve Web taraycsna
bal olarak farkllk gsterebilir. Bu yzden her zaman almalarnz farkl tarayclarda test edin.
Insert ara ubuundaki Draw Layer dmesini kullanarak mevcut bir katmann
iinde yeni bir katman oluturabilirsiniz. Bunun iin Preferences iletiim
kutusunda Nest when created within a layer seeneinin iaretli olmas gerekir.
Katmanlarla ilgili tercihleri deitirmek isterseniz Dreamweaver > Preferences
(Macintoshta) ya da Edit > Preferences (Windowsta) komutunu sein ve
Category mensnde Layers seeneini iaretleyin.
2. Layers panelinde iteki Layer3 katmann sein ve textlayer katmannn zerine

doru, bu katmann (textlayer) hemen zerinde ince, mavi bir izgi grnecek
ekilde srkleyin.
Bylece katmanlarn i ie geme durumu ortadan kalkacak ve katman Layers panelinde

artk girintili olarak grnmeyecektir. Layer3 katman belge penceresinde orijinal
konumuna dnecek ve Layers panelinde textlayer katmannn zerinde grnecektir.

326 DERS 9
Katmann Grnrlk zelliini Deitirmek

Bir katman gstermek ya da gizlemek iin grnrlk zelliini deitirebilirsiniz. Bu,
kullanc etkileimi zellikleri eklemek iin katman kullanrken faydal olabilir. Kullanc siteyle
etkileime girdiinde cevap olarak grntlenecek dinamik ierikler olutururken katmanlarn
grnrlk zelliini deitirmeniz gerekebilir.
1. layers.html belgesinde Layer3 katmann sein. Bu katmann grnrlk zelliini
deitirmek iin Layers panelinin sol tarafnda yer alan Visibility stununa bir kez tklayn.
Layer3 satrna ait stunda kapal gz eklinde bir simge belirecektir. Bu, grnrlk zelliinin
gizli (Hidden) olarak ayarlandn gsterir ve katman geici olarak kaybolur.
Btn katmanlarn grnrlk zelliini ayn anda deitirmek isterseniz, stunun

en stnde yer alan gz simgesine tklayn.
Layers panelinde adet grnrlk seenei vardr: Inherit, visible ve Hidden.

Inherit seenei, katmann ebeveynine ait grnrlk zelliini kullanr. Bu seenekte
Visibility stununda herhangi bir simge grntlenmez.
Visible seenei, ebeveynin grnrlk zellii nasl ayarlanrsa ayarlansn, katman
ieriini grntler. Bu seenei gstermek iin Visibility stununda ak bir gz simgesi
grntlenir.
Hidden seenei, ebeveynin grnrlk zellii nasl ayarlanrsa ayarlansn, katman
ieriini saydam olarak grntler. Bir katmann grnrlk zelliini Hidden olarak
ayarlarsanz bu katman semek iin kullanabileceiniz aralar muhtemelen sadece katman
iareti ve Layers paneli olacaktr. Bu seenei gstermek iin Visibility stununda kapal bir
gz simgesi kullanlr.
Properties denetisinde drdnc bir grnrlk seenei daha vardr. Default (varsaylan)
seenei herhangi bir grnrlk zellii tanmlamaz, ama ou Web taraycs bu seenei,
katman ebeveynin grnrlk deerini kullanyormu gibi deerlendirir.
Yeni katmanlar iin kullanlan varsaylan grnrlk seeneini ayarlamak

isterseniz Dreamweaver > Preferences (Macintoshta) ya da Edit > Preferences
(Windowsta) komutunu sein ve Layers kategorisine gein.
2. layers.html belgesini kaydedin ve Web taraycnzda nizleyin.
Dreamweaverda seili durumdayken Layer3 katmann belge penceresinde grebilirsiniz. Seili

deilse katman ortadan kaybolur ve belge penceresinin Web taraycsndaki gibi grnmesine
sebep olur.
Gizli bir katmandaki ierik grnr durumdaki bir katmann ieriinden bykse, tarayc
penceresi bu gizli ierik yznden grnr katmann sonuna kadar kaydrlmaya devam edecektir.
3. Layers panelinde Layer3 katmann sein ve Edit > Clear komutunu sein
(Macintoshta) ya da Backspace tuuna basn (Windowsta).
Macintoshta Layers panelindeyken Delete tuuna basma ie yaramayabilir. Bunun yerine Edit
> Clear komutunu seebilir ya da katman belge penceresinden silebilirsiniz.
Izgara ve Cetvel Seeneklerini Ayarlamak

Katmanlarla alrken sayfanza katmanlar yerletirmek iin grsel yardmc olarak zgaralar
ve cetvelleri kullanmak isteyebilirsiniz.
1. class katmann sein ve Properties denetisini kullanarak kaymann boyutlarn
genilik (W) 15 ve ykseklik (H) 100 olacak ekilde deitirin.
Katmann ieriiyle ayn boyutlarda olmas, bu uygulamada katmann konumunu ayarlarken

iinizi kolaylatracaktr.
2. layers.html belgesinde View > Grid > Show Grid komutunu sein.
Izgara belge penceresinde grntlenecektir. Komutun yanndaki onay iareti, bu seenein

etkin olduunu gsterir.
3. View > Grid > Snap To Grid komutunu sein.
Bu seenek kenetlenme zelliini aar ya da kapatr. Komutun yanndaki onay iareti, bu

seenein etkin olduunu gsterir. Bu seenek etkin durumdayken katmanlar tadnzda
katmanlar zgara izgilerine yaklanca bu izgilere kenetlenirler.
4. om katmann sein; sonra da Shift tuunu basl tutarak class katmann sein.
class katmannn seim tutamacn kullanarak katmanlar, class katmannn sa
kenar soldan yedinci dey zgara izgisine yapacak ve belge penceresinin st
kenaryla om katmannn st kenar arasnda bir zgara kutusu olacak ekilde saa
doru tayn.
328 DERS 9
Siz katmanlar tarken class katman om katmann zerinde grnecektir, nk en son

class katmann setiniz. Layers panelinde her ikisinin de seili olduunu greceksiniz.
Bunu her iki katman adnn da vurgulu olmasndan anlayabilirsiniz. Belge penceresinin
bo bir alanna tklayarak katmanlarn seimini iptal ettiinizde om katman yine class
katmannn zerinde grnecektir.
class katman zgara izgisine kenetlenecektir. Her iki katmann da seimini iptal etmek
iin belge penceresine tkladktan sonra sadece class katmann sein. L deerinin 200px
olduunu greceksiniz. Seimi kaldrldktan sonra, belge penceresinde zgara izgisinin
hemen solunda class katmannn soluk gri renkli kenarln grebilirsiniz. Kenarlk
zgara izgisinin 1 piksel solunda grnyor olsa bile, katman aslnda zgara izgisiyle
tam olarak hizalanmtr. Grdnz 1 piksellik gri katman kenarl, Web taraycsnda
grntlenmeyen bir Dreamweaver grsel yardmcsdr.
View > Grid > Grid Settings komutunu seerek zgara ayarlarn
deitirebilirsiniz. Bu komutu setiinizde Grid Settings iletiim kutusu
alacaktr. Burada rengi, boluk deerini ve birimi (piksel, in ya da
santimetre) ayarlayabilir ve iki zgara grnts (izgi ve nokta) arasnda
gei yapabilirsiniz. Izgara, katmanlar hizalarken faydal olabilir.
5. Eer grnmyorlarsa View > Rulers > Show komutunu seerek cetvelleri
etkinletirin.
Cetveller belge penceresinin st ve sol kenarnda grntlenir. Komutun yanndaki

onay iareti, bu seenein etkin olduunu gsterir. View > Rulers > Pixels, Inches, ya
da Centimeters komutunu seerek cetveller iin kullanlan birimi deitirebilirsiniz.
Yanndaki onay iaretinden geerli birimin hangisi olduunu anlayabilirsiniz.
6. textlayer katmann sein ve class katmanyla ikisinin st ksmn hizalayarak
ve textlayer katmannn sol kenarn class katmannn sa kenar boyunca
uzanan zgara izgisine hizalayarak class katmannn sana tayn. textlayer
katmannn genilik deerini (W) 300px olarak deitirin.
7. Sayfay Web taraycnzda nizleyin. Gerekiyorsa Properties denetisi
araclyla textlayer katmannn L deerini ayarlayn veya sol ve sa ok tular
araclyla katmann tayarak class katmanyla textlayer katmannn arka
plan arasnda beyaz boluk kalmamasn salayn.
Eer textlayer katmannn hk renkli arka plan tablonun iinde metnin alt
ksmna kadar devam etmiyorsa ve Web taraycsnda grntlediinizde
tablonun alt ksmnn yaknlarnda beyaz bir boluk grnyorsa, tablonun
arka plan rengini ayn hk renge ayarlayabilir ya da katmann ykseklik
deerini artrabilirsiniz.
Ayrca View > Visual Aids > Layer Outlines komutunu seerek katman kenarlklarn geici
olarak kapatabilirsiniz. Bu dersin geri kalan ksmnda katman kenarlklar (Layer Outlines)
grsel yardmclarnn ak olduu kabul edilmitir.
Sfr noktas, yatay ve dey cetvelin kesitii noktadr. Sfr noktasnn
varsaylan konumu, sayfann sol st kesi, yani sayfann st ve sol kenarlarnn
kesitii noktadr. Yatay ve dey cetvellerin arasndaki kareye tkladktan sonra
sfr noktasn aaya ve saa doru srkleyip brakarak sfr noktasn farkl bir
konuma ayarlayabilirsiniz. Sfr noktas belge iinde bir noktaya tandnda sfr
noktasnn stnde ve solunda negatif deerler grrsnz. Sfr noktasn eski
konumuna getirmek isterseniz View > Rulers > Reset Origin komutunu sein.
Belgenizin grnm buradaki rnee benzeyecektir
8. Grid, Snap to Grid ve Ruler seeneklerini kapatn.
Mendeki onay iaretini kaldrmak ve zgaray gizlemek iin View > Grid > Show Grid
komutunu sein. Snap to Grid (View > Grid > Snap to Grid) ve Ruler (View > Rulers >
Show) seeneklerinin onay iaretlerini kaldrmak iin de ayn yntemi kullann.
Kitabn geri kalan ksmnda zgara seeneinin kapatlm olduu kabul edilmektedir.
Cetvelleri kapatabilir ya da ak brakabilirsiniz. Bu dosyay kaydedin ve bir sonraki
uygulama iin ak brakn.
330 DERS 9
Drag Layer Davrann Kullanmak

Katmanlar davranlarla (Ders 8de grmtk) birlikte kullanarak ziyaretilerinizin
sayfalarnzla etkileime girmesini salayabilirsiniz. Drag Layer davran, ziyaretilerin
tarayc penceresinde bir katman tutarak sayfadaki farkl bir konuma tamalarn
mmkn klar. Bu, kullanc tarafndan tanabilen elemanlarla etkileimli oyunlar ya da
retim aralar hazrlamak iin harika bir yoldur.
1. Ekleme noktasn textlayer katmannda bulunan metnin iine yerletirin. Belge
penceresinin alt ksmnda yer alan Etiket Seicideki <table> etiketine tklayn.
Ekleme noktasn tablonun hemen arkasna getirmek iin sa ok tuuna bir kez
basn ve teaching.jpg resmini ekleyin. Resmin alternatif metni iin teaching
ifadesini kullann.
Daha nce Layer3 katmannda kullandnz teaching.jpg resmi artk textlayer

katmannda, metni ieren tablonun hemen altnda yer almaktadr.
2. class katmannn hemen altnda yeni bir katman oluturun. Bu katman grab
olarak adlandrn ve katmann iine u cmleyi yazn: Grab the class image
above and move it next to the photograph of the teacher below.
Belgenizin grnts buradaki rnee benzeyecektir.
Bir enin tanabileceini ziyaretilere bildirmek iyi bir alkanlktr. Ziyaretilere

class resminin srklenebileceini bildiren metni eklediinize gre artk davran
uygulayabilirsiniz.
3. Belge penceresinin alt ksmnda yer alan Etiket Seicide <body> etiketini
zerine tklayarak sein.
Drag Layer davran bir katmana dorudan uygulanamaz. Bu yzden bu davran

belgenin <body> etiketine uygulayacaksnz.
Drag Layer davrann dier etiketlere de uygulayabilirsiniz (rnein bir
katmann iinde ya da dnda olabilen balant etiketi <a> gibi).
4. Behaviors panelindeki art iaretine (+) tklayn ve Add Behavior alr
mensnden Drag Layer eylemini sein.
Behaviors paneli Tag Inspector panel grubunda yer alr. Davran konusunu
Ders 8de grmtk.
Drag Layer iletiim kutusu alacaktr. Basic sekmesinin etkin olduuna dikkat edin.
Bir katman seili durumdaysa Drag Layer eylemi kullanlamaz. Eer
kullanlamaz durumdaysa (gri olarak gsterilir), <body> etiketinin seili
5. Layer mensnde layer class sein ve Movement mensnde Constrained
seeneini iaretleyin.
Movement alr mensnn sa tarafnda drt tane metin alan belirecektir (Up, Down,
Left ve Right).
332 DERS 9
6. Up metin alanna 10, Down metin alanna 600, Left metin alanna 10 ve Right
metin alanna da 10 yazn. Drop Target ve Snap if Within metin alanlarn bo
brakn.
Bu koordinatlar, ziyaretilerin class katmann sadece teaching resmine ait alann

iine yerletirmesine izin verir. zin verilen hareket miktar, class katmannn orijinal
konumuna baldr. Burada ziyaretiyi, class katmann bulunduu yerden ancak 10 piksel
yukarya ve 600 piksel aaya (ve dier ynlerde de ilgili koordinat deerleri kadarlk bir
mesafe iinde) tayabilecek ekilde kstlam oldunuz.
Movement mensnde Unconstrainedi seseydiniz, ziyareti class

katmann sayfada istedii yere tayabilirdi.
Constrain seeneini kullanarak ziyaretinin bir katman hangi ynde ve ka piksel

tayabileceini belirleyebilirsiniz. Up ve Down metin alanlarna 0 (sfr) yazarak
ziyaretileri katman sadece yatay dorultuda tayacak ekilde kstlayabilirsiniz. Bu
durumda katman yukarya ya da aaya tanamaz. Benzer ekilde Left ve Right metin
alanlarna 0 yazarak tama hareketini dey dorultuyla da snrlayabilirsiniz.
Ziyaretilerin katman yerletirmelerini istediiniz bir hedef alannz varsa, bu
konumu Drop Target alanndaki Left ve Top metin alanlarn (katmann hedef
konumunda sahip olaca deerler) kullanarak tanmlayabilirsiniz. Sz konusu
katman, piksel aralyla tanmladnz bir blgeye girdiinde hedef konuma
kenetlenecek ekilde ayarlayarak ziyaretilerin katman hedef konuma
yerletirmelerini kolaylatrabilirsiniz. Bu blgeyi (kenetlenme blgesi), Snap if
within metin alanna bir deer girerek belirleyebilirsiniz.
7. OK dmesine tklayn. Dosyay kaydedin ve Web taraycnzda nizleyin.
Tamaya alarak class katmannn nasl hareket ettiini test edin. Resmi, sadece altnc
admda girdiiniz saysal deerlerin tanmlad blge iinde tayabildiinize dikkat edin.
Bu davran btn tarayclarda almayabilir.
Drag Layer iletiim kutusunun Advanced sekmesini kullanarak resmin belirli

bir blmnde ziyaretilerin tutama olarak kullanabilecekleri bir alan
tanmlayabilirsiniz. Bylece ziyaretiler bu tutamac srkleyerek katman
tayabilirler. Burada ayrca katman tandnda katmanlarn z-index
deerine ne olacan da belirleyebilirsiniz. Btn bunlarn dnda bu iletiim
kutusunu kullanarak katman tanrken, brakldnda ya da hedefe
kenetlendiinde baka JavaScript kodlarn da arabilirsiniz. Drag Layer
davranyla ziyaretileriniz iin ok daha kapsaml bir etkileim ortam
salayabilirsiniz.
Show-Hide Layers Davrann Kullanmak

Show-Hide Layers davrann kullanarak bir katmann grnrlk zelliini kontrol
edebilir ve grnrlk zelliinin ziyaretinin hareketlerine bal olarak deimesini
salayabilirsiniz.
1. textlayer katmannn zerinde yeni bir katman oluturun. Bu katman yoga
olarak adlandrn ve jayne.jpg resmini bunun iine yerletirin. Resmin alternatif
metnini yoga olarak ayarlayn. yoga katmannn sanda ikinci bir katman
oluturun. Bu katman details olarak adlandrn ve iine u metni yazn: Learn
about a variety of yoga poses in our classes.
Belgenizin grnm aadaki gibi olacaktr.
334 DERS 9
2. details katmann seip Properties denetisindeki Vis mensnde hidden

seeneini iaretleyerek katmann grnrlk zelliini Hidden (Gizli) olarak
ayarlayn. Belge penceresinde katmann dnda bir yere tklayarak katmann
seimini kaldrn.
Katmann grnrlk zelliini, Visibility stununa tklayp kapal gz

simgesini grntleyerek de ayarlayabilirsiniz. Kapal gz simgesi, sz
konusu katmann gizli olduunu gsterir. Belirli bir katmann Visibility
stunundaki simgeye tkladnzda o katmann grnrlk durumu deiir.
details katman kaybolacaktr.

3. jayne.jpg resmini sein, Properties denetisindeki Link metin alanna # yazn
ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basn. Resim seili
durumdayken bir davran eklemek iin Behaviors panelindeki (Tag Inspector
panel grubunda yer alr) art iaretli dmeye (+) tklayn. Add Behavior
mensnden Show-Hide Layers sein.
Show-Hide Layers iletiim kutusu alacaktr. Buradaki listede sayfadaki katmanlar yer alr.
4. Named Layers listesinde details katmann sein ve Show dmesine tklayn. OK

dmesine tklayarak Show-Hide iletiim kutusunu kapatn.
Show dmesine tkladnzda, Show-Hide Layers iletiim kutusundaki listede details

katmannn yannda (show) ifadesi grntlenir.
5. Behaviors panelinde olay (Event) mensne tklayn ve <A> onMouseOver sein.
Bu davran, ziyareti imleci sz konusu katmann zerinde getirdiinde tetiklenir.

Davranlar iin olay semeyi Ders 8de grmtk.
6. layers.html dosyasn kaydedin ve sayfay Web taraycnzda test edin.

Ziyareti imleci resmin zerinden kaldrdnda katmann tekrar gizlenmesini
istiyorsanz, 3ten 5e kadar olan admlar tekrarlayn, bu ilemler esnasnda 4.
admda Show yerine Hide sein ve 5. admda da <A> onMouseOver
yerine <A> onMouseOutu sein.
Katmanlar Tablolara Dntrmek

Katmanlar sayfalarnz tasarlamak iin kolay bir yntem olabilir, ancak bu durumda
ziyaretilerinizin says snrlanabilir, nk btn Web tarayclar katmanlar desteklemez.
Yeni tarayclarn ou katmanlar desteklese de eski tarayclar katman tabanl ierikleri
herhangi bir konum ayar ve yerleim kontrol olmadan grntler. Eer sayfanz katman
kullanarak tasarlamaya karar verdiyseniz, tarayclar katman destei salamayan ziyaretiler
iin alternatif bir sayfa hazrlamak zere katmanlar bir tabloya dntrmek isteyebilirsiniz.
Sayfanz farkl tarayclarda test edip ziyaretilerinizin ne tip tarayclar kullandn grerek
alternatif bir sayfa hazrlamanzn gerekip gerekmediini belirleyin. Katmanlar bir tabloya
dntrdkten sonra tasarmla ilgili deiiklikleri tamamlamak iin Layout grnmne
geebilirsiniz. Daha sonra kullanclar tarayc srmlerine bal olarak yeniden
ynlendirmek iin Check Browser davrann kullanabilirsiniz.
Aadaki uygulamada katmanlarn nasl dntrld gsterilmektedir. Ama tablo
hazrlamak iin tavsiye edilen yntem, tablolar ve tablo hcrelerini Layout grnmn
kullanarak izmek ya da tablolar Standard grnmde oluturmaktr (Ders 6da her iki
yntemi de kullanmtnz).
Katmanlar tablolara dntrrken baz kstlamalarla karlarsnz. ie yerlemi
katmanlar kullanamazsnz ve katmanlar st ste gelemez. Bu koullarn gereklemesi
durumunda Dreamweaver bir uyar penceresi grntler ve tabloyu oluturmaz. Ayrca dier
katmanlar yine katman olarak brakarak tek bir katman ya da bir katman grubunu tabloya
dntremezsiniz. Sayfann tamam ve ierdii btn katmanlar bir tabloya dntrlr.
336 DERS 9
1. layers.html belgesindeyken File > Save As komutunu sein ve alan iletiim

kutusunda Save As (Macintoshta) ya da Dosya ad (Windowsta) metin alanna
layers_tables.html yazn. Dosyay Lesson_09_Layers klasrne kaydedin.
Bu belgedeki katmanlar dntrlecek ve yerlerini tek bir tabloya brakacaklardr.

Tabloya dntrme ileminde katman isimleri silinir.
2. Belge penceresine tklayn. Layers panelindeki Prevent Overlaps seeneini
iaretleyin. Sayfann st ksmnda katmanlarn konumunu, katmanlar yan yana
olmayacak ve st ste gelmeyecek ekilde ayarlayn.
st ste binen katmanlar tabloya dntrlemez. Katmanlar oluturmaya balamadan

nce bu seenei iaretlerseniz Dreamweaver katmanlarn st ste binmesini engeller.
Prevent Overlaps seeneini iaretledikten sonra class katmann om katmannn zerine
tamaya alarak bunu test edebilirsiniz. Prevent Overlaps seeneini kullanarak
katmanlar dier katmanlara olabildiince yaklatrabilirsiniz.
st ste binmi katmanlarnz varsa, Prevent Overlaps seeneini iaretlediinizde bu
katmanlar tanmaz. st ste binmelerini nlemek iin onlar sizin tamanz gerekir.
3. Etiket Seicide <body> etiketini sein. Behaviors panelinde Drag Layer
davrann sein ve Remove Event dmesine tklayn. Belge penceresindeki
jayne.jpg resmini sein, Behaviors panelinde Show-Hide Layers davrann
sein ve Remove Event dmesine tklayn.
Katmanlara uygulanan ya da katmanlar etkilemek iin kullandnz davranlar varsa,

katmanlar tabloya dntrdkten sonra bu davranlara gerek kalmaz. Belgeyi anlalr
klmak, hatalar ve gereksiz kodlar temizlemek ve dosya boyutunu kltmek iin bu tr
davranlarn silinmesi gerekir.
4. Modify > Convert > Layers to Table komutunu sein.
Convert Layers to Table iletiim kutusu alacaktr. Bu iletiim kutusunda eitli seenekler
bulunmaktadr.
Most accurate, her katman iin bir tablo hcresi, art katmanlarn arasndaki boluu
korumak iin gereken btn ilve hcreleri oluturur.
Smallest: collapse empty cells, belirlenen saydaki pikselin iine yerletirilmeleri durumunda
katmanlarn kenarlarnn hizalanmas gerektiini belirtir. Bu seenek iaretlendiinde,
sonuta elde edilen tablo daha az sayda bo satra ve stuna sahip olabilir.
Use transparent GIFs, tablonun son satrn saydam GIFlerle doldurur. Bylece tablonun
btn tarayclarda ayn ekilde grntlenmesi salanr. Bu seenek iaretlendiinde,
sonuta elde edilen tabloyu stunlarn srkleyerek dzenleyemezsiniz. Bu seenein
iaretlenmemesi durumunda, elde edilen tablo saydam GIFler iermez ve farkl
tarayclarda grntsnde kk farklar olabilir.
Center on page, sonuta elde edilen tabloyu sayfada ortalar. Bu seenek iaretlenmezse tablo
sola hizalanr.
Layout tools alann kullanarak istediiniz yerleim veya zgara seeneklerini
ayarlayabilirsiniz.
5. Most Accurate, Use Transparent GIFs ve Center on Page seeneklerinin
varsaylan ayarlarn ellemeyin ve OK dmesine tklayn.
st ste binmi katmanlarnz varsa bir uyar mesaj iletiim kutusu alacak ve Dreamweavern
katmanlar tabloya dntremediini bildirecektir. Bu durumla karlarsanz belgenize geri
dnn ve katmanlarn hibirinin st ste binmediinden emin olun.
338 DERS 9
Gizli durumdaki btn katmanlar silinir. Katmanlarnz bir tabloya dntrdkten

sonra tabloda gereken ayarlamalar yapabilirsiniz.
6. CSS Styles panelinde <style> grubunu sein ve panelin alt ksmndaki p

kutusu simgesine tklayn. Belge penceresinde class (snf) resminin altnda yer
alan tablo hcresindeki aklama metnini sein ve silin.
Katmanlar tabloya dntrme ileminde belgenin gvde ksmndaki <div> etiketleri

kendilerine karlk gelen <table> etiketiyle deitirilir, ancak belgenin ba ksmnda
tanmlanan dahili CSS zellikleri ayn ekilde kalr. Dahili stil sayfasn tmyle silmek iin
CSS Styles panelini kullanabilir ya da sadece katmanlar tanmlayan stilleri silebilirsiniz. CSS
Styles paneline baktnzda iki stil grubu greceksiniz (sangha.css ve <style>). Btn proje
sitesinde kullanlan harici stil sayfas sangha.csstir; <style> grubu ise, siz bu derste katmanlarla
alrken oluturulan dahili stil sayfasdr. rnein textlayer katman <style> grubunda
#textlayer olarak tanmlanmtr. Daha nce oluturduunuz katmanlarn isimlerini kullanan
stillerin hibiri artk gerekli deildir ve silinebilirler. Buradaki rnekte dahili stil sayfas
tmyle silinebilir, ancak dahili bir stil sayfasn silerken dikkatli davranmak ve katmanlarn
kendisi dndaki eyleri (font stili gibi) tanmlayan zellikleri gsteren ilave stillerin mevcut
olmadndan emin olmak iin durumu kontrol etmek isteyebilirsiniz.
Katmanlar tablolara dntrmek gibi ilemleri gerekletirirken belirli ilevler kullanlamaz

hale gelebilir. Buradaki rnekte kullanc artk class resmini sayfa zerinde baka bir yere
tayamaz; dolaysyla bu tr zelliklere ait tm referanslarn ya da talimatlarn silinmesi gerekir.
Netscape Resize Fix Komutunu Kullanmak

Netscapein 4.x srmlerinde, ziyareti tarayc penceresini yeniden boyutlandrdnda
ortaya kan bir katman sorunu vardr. Tarayc penceresi yeniden boyutlandrldnda
katmann ekli deimektedir. Bu da sayfayla ilgili olarak birtakm sorunlara yol aabilir.
Bu sorunu, katman kullandnz her yerde belgelerinize Netscape Resize Layer Fix
JavaScript kodunu ekleyerek zebilirsiniz. Bu JavaScript kodu Netscape 4.x sorununu
zer ve dier tarayclar etkilemez.
Siz belgede bir katman oluturduunuzda Dreamweaver, Netscape Resize Fix kodunu
otomatik olarak ekler. Belgedeki btn katmanlar sildiinizde bu komutu altrmanz
ve script hl belgenizdeyse bu kodu silmeniz gerekir. nceki uygulamada katman-tablo
dnm yaptnz iin scripti imdi sileceksiniz, nk artk ona gerek yok.
1. layers_tables.html belgesindeyken, Commands > Add/Remove Netscape Resize
Fix komutunu sein.
Alan Add/Remove Netscape Resize Fix iletiim kutusunu kullanarak scriptin belgenizde
olup olmamasna bal olarak JavaScript kodunu ekleyebilir ya da silebilirsiniz. Bu kod,
ziyaretinin tarayc penceresini yeniden boyutlandrmas durumunda sayfann yeniden
yklenmesine sebep olur. Dreamweaver bu kodu sayfanza otomatik olarak ekler. Eer
katman ieren bir sayfada bu kod bulunmuyorsa, bu iletiim kutusunu kullanarak onu
kolayca ekleyebilirsiniz.
Netscape Resize Fix Javascript kodu belgenin ba ksmnda, <body> etiketinden nce
yer alr ve Split ya da Code grnmndeyken bu kodu grebilirsiniz. Kodlarla ilgili
ayrntlar Ders 16da greceiz.
340 DERS 9
2. Remove dmesine tklayn.
Netscape Resize Fix JavaScript kodu sayfadan silinecektir.

3. layers_tables.html belgesini kaydedin.
Timeline ile Animasyon

HTML sayfalar, siz bir hareketli GIF ya da bir Macromedia Flash filmi eklemedike
genelde hareketsizdir. mleci zerine getirdiiniz dme, baka bir resimle deitirilirken
biraz hareket ediyormu gibi grnebilir, fakat sayfada hareketsiz olarak durur.
Dynamic HTML (DHTML) kullandnzda Web sayfanza dorudan Dreamweaver
iindeyken daha gelimi animasyonlar ekleyebilirsiniz. Bu animasyonlar HTML
sayfasnn iinde bir eklentiye gerek kalmadan JavaScript ile kontrol edilirler. DHTML
animasyonlaryla ilgili kstlama u ekildedir: Kullanclar, bu sayfalar grebilmek iin
srm 4.0 ya da daha yeni bir tarayc kullanmak zorundadrlar, bununla birlikte bu
animasyonlar ok daha fazla ey yapmanza imkn salayan Flash dosyalarna gre ok
daha kstldr. Ayrca Flash dosyalar genelde daha uyumludur ve daha az hata ierirler.
Mmkn olan her yerde timeline yerine Flash filmleri kullanmanz tavsiye edilir. Bu
sebeplerden dolay timeline zellii Dreamweaver MX 2004ten karlmtr. Fakat Web
gelitiricilerine Dreamweavern eski srmleriyle hazrlanm sayfalarn dzenlenmesi
ve devamllklarnn salanmas ilemlerini kolayca gerekletirme imkn vermek iin
bu zellik Dreamweaver 8 srmne tekrar dahil edilmitir. Eski sayfalarla allrken
bir altyap oluturmas iin Timeline animasyonlarnn genel zelliklerini ve bileenlerini
burada ksaca zetledik. Siz yine de animasyon hazrlarken en iyi yntemin Flash
kullanmak olduunu aklnzdan karmayn.
Timelinen alma ekli

Bir timeline animasyonunda kullanlan btn nesneler katmanlarn iinde bulunur.
Katmanlar, bir hareket yolu oluturan ve zaman ayarn kontrol eden bir timeline (zaman
izgisi) iinde dzenlenir. Timeline, filmlerdeki karelere benzeyen bir dizi kareden
oluur. Her kare Web sayfasnda zamandaki belirli bir noktada grntlenir. Bu da sizin
belirlediiniz saniyedeki kare says ayarna ve animasyonun uzunluuna baldr. Bir
karedeki her katmann zelliklerini ve yerleimini kontrol edebilirsiniz. Bir kare ayrca
animasyon srasnda belirli bir davran tetikleme zelliine de sahiptir.
Bir nesnenin (metin ya da resim gibi) tanabilmesi iin bu nesnenin bir katmann iinde
bulunmas gerekir. Resim gibi nesneler bir katmana yerletirilmeden timelinea eklenebilir.
Ama bunlarn konumuna animasyon uygulayamazsnz.
Timelines Paneli
Window > Timelines komutunu seerek Timelines panelini an
Timelines paneli, katmanlarn zelliklerinin zamana gre deiimini temsil eder.

Timelines panelindeki her satr bir animasyon kanal olarak adlandrlr ve sayfadaki
elemanlar temsil eder. Sadece katmanlara animasyon uygulayabildiiniz iin, Timelinedaki
her satr sadece katman ierebilir. Bir katmann konumunu, boyutlarn, grnrlk
durumunu ve ylma srasn kontrol etmek iin Timelines panelini kullanabilirsiniz.
Timelines panelindeki her stun kare (frame) olarak adlandrlr ve bir zaman birimini temsil
eder. Kare numaralar, her animasyonun ka kareden olutuunu gsterir.
Timelinea Nesne Eklemek

Timelinea bir nesne eklemek iin nce nesnenin bulunduu katman sein ve ardndan
Modify > Timeline > Add Object to Timeline komutunu sein. Bu yntemi kullandnzda
katman birinci animasyon kanalnda (ilk satr) Timelines paneline eklenir.
Ayrca katman seim tutamacn kullanarak katman tutup belge penceresinden
Timelines panelinin zerine srkleyebilirsiniz. Bir katman Timelines panelinin
zerine srklediinizde katman, kendisini zerine braktnz animasyon
kanalnda (satr) belirir.
Ayrca Modify > Timeline > Add Timeline komutunu seerek bir sayfaya daha ok timeline
ekleyebilirsiniz. birden fazla timeline oluturduysanz, Timeline alr mensn kullanarak
bunlardan birini seebilirsiniz.
342 DERS 9
Animasyon ubuu
Belirli bir timelinea bir nesne eklediinizde, timelineda yeni bir kanalda yatay, mavi bir animasyon
ubuu (animation bar) belirir ve ubukta katmann ad grntlenir.
Animasyon ubuklar her nesnenin sresini gsterir. Tek bir satrda farkl nesneleri temsil
eden birden fazla ubuk olabilir. Farkl ubuklar ayn kare iinde ayn nesneyi kontrol edemez.
Animasyon ubuu yeniden herhangi bir kareye ve herhangi bir kanala yerletirilebilir. Animasyon
ubuunun kanaldaki ilk konumu iin oynatm kafasnn konumu temel alnr.
Oynatm kafas, geerli durumda sayfada timelinen hangi karesinin grntlendiini gsterir.
Eer oynatm kafas 1. karede ise, animasyon ubuu 1. kareden balar; oynatm kafas 8. karede
ise, animasyon ubuu 8. kareden balar. Siz animasyon ubuunu hareket ettirdiinizde
oynatm kafas da hareket eder.
Animasyon ubuklarn Timelines panelinde dz renkli alanlarndan tutup srkleyerek
tayabilirsiniz.
Varsaylan durumda animasyon ubuklar, siz Timelines paneline katman eklediinizde,
balangta 15 kare uzunluundadr. Kare says animasyonun uzunluunu gsterir. Toplam kare
saysn ve saniyedeki kare saysn (fps-frames per second) animasyonun hzn ve uzunluunu
kontrol edebilirsiniz. Toplam kare saysn, en sondaki anahtar kareyi saa doru srkleyerek
ayarlayabilirsiniz (bu uygulamada yaptnz gibi). Saniyedeki kare saysn da Fps metin alann
kullanarak ayarlayabilirsiniz. Saniyedeki kare says iin varsaylan deer olan 15, iyi bir ortalama
deerdir. Daha yksek hz deerleri performans artrmayabilir. Web tarayclar, kullancnn
sisteminde belirtilen kare hzna eriemeseler bile, daima animasyonlarn her karesini oynatrlar.
Bir animasyonun balang zamann deitirmek isterseniz, animasyon ubuunu sein
(anahtar karelerden birine deil, ubuun ortasna tklayn) ve sola ya da saa doru srkleyin.
Ayn anda birden fazla ubuu semek isterseniz Shift tuunu basl tutun.
Anahtar Karelerin Kullanlmas

Btn animasyonlar anahtar kareler (keyframes) tarafndan kontrol edilir. Anahtar kareler,
animasyonda gerekleen olaylar tanmlayan temel rneklerdir. Timelinea bir katman
yerletirdikten sonra bu katmann sayfa zerindeki hareketini kontrol etmek iin anahtar
kareleri kullanrsnz. Anahtar kare, katmann belirtilen zelliklerinde (konum ya da byklk
gibi) bir deiiklik yapldnda animasyonda belirli bir noktay iaretler. Dreamweaver
deerlere enterpolasyon uygular, yani katmann yolunu elde etmek zere anahtar karelerin
arasndaki btn kareler iin gereken deerleri oluturur. Anahtar karelerin arasnda otomatik
olarak oluturulan yol iin anahtar karelerde yer alan katmanlarn konumlar ve deerleri
temel alnr. Varsaylan durumda her zaman bir balang anahtar karesi ile bir de biti anahtar
karesi mevcuttur. Bu kareler animasyon ubuunun banda ve sonunda ii bo yuvarlaklarla
gsterilir. Sadece bu iki anahtar kareye sahip olan bir animasyon dz bir izgi zerinde hareket
eder. Dz bir izgi zerinde hareket etmeyen ve daha akc bir hareketle ve daha karmak bir
yol zerinde ilerleyen bir animasyon oluturmak iin timelinedaki dier karelere de anahtar
kareler eklemeniz gerekir.
Bir anahtar kare eklemek iin Timelines panelindeyken, imle bir yuvarlaa dnene kadar
Cmd (Macintoshta) ya da Ctrl (Windowsta) tuunu basl tutun, ardndan istediiniz noktada
animasyon ubuuna tklayn ya da ilgili kareyi semek zere kare (frame) metin alanna bu
karenin numarasn yazn ve Modify > Timeline > Add Keyframe komutunu sein. Bir anahtar
kareyi silmek isterseniz, sz konusu anahtar kareyi sein ve ardndan Modify > Timeline >
Remove Keyframe komutunu sein.
Kare metin alan, size seilen anahtar karenin hangi karede bulunduunu (bu karenin
numarasn) syler. Timelineda anahtar kareleri sola ya da saa doru yeni bir karenin zerine
srkleyerek tayabilirsiniz. Eer animasyonunuzu ksaltmak ve hzlandrmak ya da genileterek
uzatmak isterseniz, en son anahtar kareyi uygun ekilde sola ya da saa doru srkleyerek
animasyon ubuunun boyunu deitirin. Siz bu ilemi yaptktan sonra btn anahtar
kareler dier anahtar karelere gre ayn konumda kalmak iin otomatik olarak orantl ekilde
tanacaktr. Dier anahtar karelerin tanmasna engel olmak isterseniz, animasyon ubuunun
sonunda bulunan anahtar kareyi srklerken Ctrl (Windowsta) ya da Cmd (Macintoshta)
tuuna basn. Yardmc tular hareketi sadece son anahtar kareye izin vererek kstlar.
Macintosh ve Internet Explorer 5.0la alan kullanclar resim ieren bir
katmana animasyon uyguladklarnda resim ekranda hareket ederken resmin izi
kalyormu gibi bir grntyle karlaabilirler. Macintoshta kullanlan Internet
Explorer 5.0 srm, katman resimle ayn boydaysa, sayfa zerinde hareket
ederken katmann boyutlarn hesaplayamaz. Bu durumu dzeltmek iin,
resimden daha byk yapmak zere katmann bykln (veya animasyon
uyguladnz katman) deitirmeniz gerekir. Katman timeline zerindeyken
katmann bykln her anahtar karede deitirmeniz gerekir. Katmann
byklk deerlerini her anahtar karede tam olarak eit yapmak iin Properties
denetisini kullann. Kullandnz timelineda ikiden fazla anahtar kare varsa,
katman timelinedan silip batan balamak daha kolay olabilir.
Timeline Davranlarla Kontrol Etmek

Timelinea davran eklemek, dier nesneler davran eklemeye benzer. Ancak burada
davran timelineda tek bir kareye eklersiniz, animasyon ubuunun tamamna deil. Siz bu
344 DERS 9
ilemi yaptktan sonra davran Behaviors kanalna eklenir ve Behaviors kanalnda beliren tire
iareti, davrann hangi kareye eklendiini gsterir.
Olaylar timelinen en banda gereklemek zorunda deildir. Timeline kullanarak sayfadaki
eylemi, sayfa yklendikten sonra belirli bir zamana kadar geciktirebilirsiniz. Bunun iin
animasyon ubuunu saa doru srkleyerek istediiniz kadar bo kare oluturursunuz.
Bir davran eklemek iin Behaviors kanalnda oynatm kafasnn (playhead) zerinde
istediiniz kareye tklayn. Behaviors panelini an ve istediiniz davran ekleyin.
Autoplay: Sayfa yklendiinde timelinedaki animasyonu oynatmak iin JavaScriptten
faydalanr. Sayfann <body> etiketine bir davran eklenir; davran, sayfa bir taraycya
yklendiinde otomatik olarak Play Timeline eylemini altrr. Bunu yaparken de onLoad
olayn kullanr. Bu olay, belge taraycya tamamen yklendikten sonra animasyonun
balamasn salar. Kimi zaman kullanclarn timelinedaki oynatm aralarn kontrol
edebilmesini isteyebilirsiniz. Kullanc imleci bir dmenin zerine getirdiinde ya
da bir resme tkladnda animasyonun oynatlmas iin bir Start Timeline dmesi
ekleyebilirsiniz. Timelines panelindeki ilk kareyi sein. Kullanmak istediiniz resmi ya da
dmeyi sein. Bir davran eklemek zere Behaviors panelindeki art iaretli (+) dmeye
tklayn ve Timeline > Play Timeline davrann ekleyin.
Loop: Timelines panelindeki Loop seeneini iaretlediinizde, oynatm kafasn 1
numaral kareye geri gnderen son kareye bir davran eklenir ve bu davran timelinedaki
animasyonu tekrar oynatr. Davran Behaviors kanalna eklenir ve son karenin zerinde
bir tire iareti ile gsterilir. Dng saysn tanmlamak iin Behaviors kanalndaki
tire iaretini seip Behaviors panelinde ilgili eyleme ift tklayarak bu davrann
parametrelerini dzenleyebilirsiniz. Alan iletiim kutusunu kullanarak animasyonun
dngyle ka kez ve hangi kareden itibaren tekrarlanacan belirleyebilirsiniz.
Show / Hide: Named Layers listesinde dier katmanlar seip Show (Gster) ya da
Hide (Gizle) dmelerine tklayarak birden fazla katmann ayn anda grnmesini ya da
gizlenmesini salayabilirsiniz. Default seenei katmann varsaylan grnrlk ayarn
geri ykler. Bu davranla katmanlar grntleyebilmeniz ya da gizleyebilmeniz iin
katmanlarn Timelines panelinde olmas gerekmez.
Bir Nesneyi Yerletirmek

Ok tular katman her seferinde bir piksel tar. Shift tuunu basl tutup bir ok tuuna
bastnzda katman, geerli zgara artm deeri kadar ilerler.
Katman ekrann dna tamak iin Properties denetisinin st ksmndaki L (Left-Sol) metin
alanna negatif bir say girebilirsiniz. Web taraycsnn sol st kesi sfr noktasdr (bu derste
daha nce cetveller konusunu ilerken grmtk). Dreamweavern yatay ve dey cetvelleri
grnr durumdayken bu noktada kesiirler. Bu noktann sanda ya da altnda bulunan her
ey pozitif bir deere, solunda ve yukarsnda bulunan her ey de negatif deere sahiptir.
Katmann hareketini taraycnn grnr penceresinin dnda balatmak iin katmann
balang noktasna negatif bir yatay deer atarsnz.
Btn bir animasyon yolunun konumunu kaydrmak iin timelineda animasyon

ubuunu sein ve katman sayfann zerinde srkleyin. Btn anahtar karelerin
konumunu ayarlayacaktr. ubuun tamam seiliyken deiiklik yapldnda ubuk
zerindeki btn anahtar karelerde deiiklik yaplr.
z-index, katmanlar st ste yerletirilirken kullanlacak sray belirler ve bunu
yaparken katmanlarn seviyesini yatay ya da dey olarak deil, nc
boyutta tanmlar. Eer timelinea bir katman yerletirene kadar beklerseniz,
z-indexi ayarladnzda ylma srasndaki deiiklik sadece Timelines
panelinde seili durumda olan anahtar kare iin geerli olacaktr. Bu zellik,
animasyon sresi iinde katmanlarnzn ylma srasn deitirmek
istediiniz durumlarda faydal olur.
Bir Katmann Yolunu Kaydetmek

Animasyonun hareketini tanmlamak iin kullanlabilecek dier bir yntem de, yolu
kaydetmektir. Bunu gerekletirmek iin Dreamweaver siz katman sayfann zerinde
srklerken imlecinizin hareketini takip eder. Dreamweaver hareketinizi izler ve
timelineda anahtar kareleri sizin yerinize kendisi oluturur. Dreamweaver ayrca katman
srklerken harcadnz zaman da uygun ekilde eletirir. Srkleme ilemini ne kadar
346 DERS 9
yava yaparsanz, o kadar fazla anahtar kare eklenir ve animasyon ubuu da o kadar
uzun olur. Daha sonra timeline zerinde anahtar kareler veya zaman zerinde deiiklik
yapabilirsiniz. Bir katmann izledii yol kaydedildiinde bu katman otomatik olarak
timelinea eklenir.
Bir yolu kaydetmek iin, kare numaralar satrnda 1e tklayarak Timelines panelindeki ilk
kareyi sein. Belge penceresinde istediiniz katman sein ve ardndan Modify > Timeline
> Record Path of Layer komutunu sein.
Siz katman srklerken, oluan yol noktal gri bir izgiyle gsterilir. Katman herhangi
bir ynde srkleyebilir, oluturduunuz yolun stnden tekrar geebilir ve katman
srkleme hznz deitirebilir ve bu ekilde yolun kaydedilme eklini etkileyebilirsiniz.
Srkleme ilemine son verip farenin dmesini braktnzda noktal izgi animasyon
izgisine dnr. Dreamweaver, katmann hareketini kontrol etmek iin gerekli anahtar
karelerle birlikte katman timelinea ekleyecektir.
Katmann yolunu kaydetme ilemi srasnda animasyon ubuunu srklerken

harcadnz zamana bal olarak animasyon ok uzun olabilir. Oluturduunuz yol
ne kadar uzunsa, animasyon da o kadar uzun olacaktr. Uzun, karmak animasyonlar
ve ok sayda farkl animasyon kanal ierek sayfalarn yklenmesi daha uzun srer ve
ziyaretilerin taraycsn kertme olasln artrr.
Siz animasyon ubuunu ksaltrken animasyondaki btn anahtar kareler kayar ve
bylece greceli konumlar sabit kalr. Anahtar kareler dier anahtar karelere gre ve
animasyon ubuunun bana ve sonuna gre ayn konumda kalr.
Resim zelliklerini Deitirmek

Timeline yardmyla deiikliin gereklemesini istediiniz noktay seerek bir resmin
kaynak zelliklerini deitirebilirsiniz. Bunun iin balk animasyon ubuuna ilgili
karede bir anahtar kare (keyframe) eklemeniz
Balang resmi olarak bir boluk resmi kullanmak, resmin grnmesini salamak
iin faydalanabileceiniz yntemlerden biridir. Bu sonucu, ilgili katmann grnrlk
zelliini deitirerek de elde edebilirsiniz.
Grnrl ve Bykl Deitirmek

Timeline kullanarak yapabilecekleriniz sadece katmanlar tamaktan ibaret deildir.
Timelinelar kullanarak bir katmann grnrlk durumunun zaman iinde deimesini
de salayabilirsiniz. rnein belirli bir katmann sadece baka bir katman ekranda
hareket ettikten sonra grntlenmesini isteyebilirsiniz. Byle bir projede ikinci katman
balangta gizli durumda olabilir ve belirli bir kareye gelindiinde grnr hale gelebilir.
Bir katmann grnrlk durumu dnda bykln de deitirebilirsiniz. Burada
kullanlan ilem, animasyon esnasnda grnrlk durumunu deitirirken kullandnz
tekniklerle ayndr. Bir katmann bykln deitirmek iin, etkilenmesini istediiniz
katmana ait animasyon ubuunda deiikliin gerekleecei anahtar kareyi seer ve
ardndan Properties denetisinde yer alan W ve H metin alanlarndaki deerleri deitirir
ya da belge penceresinde boyutlandrma tutamalarn kullanrsnz. Tarayclarn
farkl zelliklere sahip olduunu ve bunlarn hepsinin sayfalarnz dzgn ekilde
grntlemeyeceini unutmayn. Sonutan emin olmak iin sayfalarnz test edin.
Dreamweaverda Animasyonu nizlemek

Animasyonu nizlemek iin Timelines panelindeki Geri Sar (Rewind) dmesine
tklayn ve Oynat (Play) tuunu basl tutun. Katman tekrar belge penceresindeki
orijinal konumuna atlayacak ve oynatm kafas (playhead) Timelines panelindeki ilk
kareye gidecektir. Play dmesine bir kez tklarsanz, katmann her tklamada bir kare
ilerlediini ve oynatm kafasnn saa doru ilerlediini greceksiniz. Tkladktan sonra
Play dmesini basl tuttuunuzda animasyonun oynamaya devam ettiini grrsnz.
Animasyon, siz Play dmesini basl tuttuunuz srece tekrar tekrar oynamaya devam
edecektir. Animasyon oynatlrken oynatm kafas sayfada o an timelinen hangi karesinin
grntlendiini gsterir. Ayrca bir kare sola ya da geriye gitmek iin Back dmesini
kullanabilirsiniz. Animasyonu timelineda geriye doru oynatmak iin Back dmesini
basl tutun.
348 DERS 9
Ne rendiniz?
Belge penceresinde izerek ya da boyutlar nceden ayarlanm varsaylan katmanlar

ekleyerek eitli katmanlar oluturdunuz (Sayfa 309314).
Layers panelinde kolayca takip edebilmek iin katmanlar adlandrdnz
(Sayfa 315316).
nce bir ve daha sonra birden fazla katman setiniz, bunlarn boyutlarn ve
konumlarn deitirdiniz ve birbirlerine gre hizaladnz (Sayfa 315316).
eriinizin sayfanzdaki yerleimini ve grntsn kontrol etmek amacyla
katmanlardan faydalandnz (Sayfa 316321).
Yukardan aaya doru hangi srayla grntleneceklerini belirlemek iin
katmanlarn ylma srasn deitirdiniz (Sayfa 322324).
Katmanlarn gruplar halinde nasl altn ve yanllkla nasl i ie geebileceini
anlamak iin katmanlar i ie yerletirdiniz ve i ie geen katmanlar eski
konumlarna getirdiniz (Sayfa 324327).
Katmanlar sayfada tarken kolaylk salamalar iin cetvelleri ve zgaralar uygun
ekilde ayarladnz (Sayfa 328330).
Ziyaretilerin sayfalarnzla etkileime girebilmesi iin katmanlar davranlarla
birlikte kullandnz (Sayfa 331334).
Katmanlar btnyle gizlemek ve grntlemek iin katmanlarn grnrlk
zelliini deitirdiniz (Sayfa 334336).
Katmanlar bir tabloya dntrerek katmanlarla hazrlanan sayfalar eski tarayclarla
uyumlu hale getirdiniz (Sayfa 336340).
Katmanlarla ilgili grntleme sorunlarna yol aan bir Netscape hatasn dzeltmek
iin belirli bir JavaScript kodunun nasl eklendiini ve sonra da bunun nasl
silindiini rendiniz (Sayfa 340341).
Timeline zelliini rendiniz (Sayfa 341348).
10
Frame
Oluturmak
Standart bir HTML sayfas, tarayc penceresinin tamamn kaplayan tek bir blgeden
oluur. Frameler tarayc penceresini iki ya da daha fazla panele bler. Panellerin her
birinde bamsz bir HTML ierii yer alr. Bu bamsz blgelerin her biri, kendilerini
ieren byk tarayc penceresinin bir alt kmesidir. Frameler, sayfalarn gezinti ve ierik
alanlarn tanmlamak iin ska kullanlr. Genellikle gezinti alan sabit kalr, ierik alan
ise bir gezinti balantsna her tklandnda deiir. Framelerin bu ekilde kullanm,
sitede dolaan ziyaretiler asndan ok faydal olabilir. Framelerin kullanlmas
sitede deiiklik yaplmasn da kolaylatrabilir, nk gncellenecek sadece tek bir
gezinti sayfas vardr. Dier yandan, baarsz bir ekilde uygulanm olan frameler
Web sitesinin kalitesini drebilir. Net bir site yaps oluturmuyorlarsa ziyaretilerin
kafasn kartrabilir ve onlar yanl ynlendirebilirler, ziyaretilerin daha nceki bir
sayfaya tekrar gitmelerini ya da sk kullanlanlara ekleme ilemini zorlatrabilirler ya da
Bu derste frameset
ve frameler
oluturacak,
bunlarn zelliklerini
deitirecek,
frameleri yeniden
boyutlandracak ve
bunlarn ieriini
kontrol etmek
iin balantlar
kullanacaksnz.
uygun ekilde boyutlandrlmam ve biimlendirilmemilerse ieriin grntlenmesini

zorlatrabilirler.
Bir ziyareti iki framele oluturulmu bir Web sayfasn grntlediinde, aslnda
tarayc bu sayfay grntlemek iin ayr dosya kullanr: frameset dosyas ve iki
framein her birinde grnen ierii tayan iki dosya. Frameset, ziyareti tarafndan
grlmeyen ve bir Web sayfasnn yapsn framelerle tanmlayan bir HTML dosyasdr.
Bir frameset, framelerin her birinin ieriini salayan dosyalarn isimleriyle birlikte her
bir framein bykl ve konumu hakkndaki bilgileri de saklar. Her bir frame ayr bir
HTML dosyasdr. Framelerin kenarlklarn kaldrdnzda ziyaretiler bunlarn frame
olduunu kolayca anlayamaz. Ya da kenarlklar grntleyerek pencereyi ak bir
ekilde farkl panellere blebilirsiniz. Dier seeneklerin arasnda, kaydrma ubuklar
ve ziyaretilere kenarlklar srkleyerek frameleri yeniden boyutlandrma imknn
salamak da saylabilir.
Bu derste framelerle alarak, bir gezinti alannn ve bir de ierik alannn yer ald bir
Web sayfas oluturacaksnz. Ziyareti gezinti frameindeki bir balanty setiinde
hepsi ierik frameinde belirecek olan bir dizi sayfa oluturacak ve balantlar
farkl framelere gidecek ekilde nasl atayacanz reneceksiniz. Bu derste
ayrca, frameleri desteklemeyen tarayclarda grntlenecek olan ierikleri nasl
ekleyeceinizi de reneceksiniz.
Bu derste elde edilen sonucu grmek isterseniz, Lesson_10_Frames/Completed/
Community klasrndeki community.html dosyasn an.
Neler reneceksiniz?
Bir frameset oluturacaksnz.

Bir frameseti kaydedeceksiniz.
Frameler ve yuvalanm frameler oluturacaksnz.
Frameleri yeniden boyutlandracaksnz.
Frameset ve frame zelliklerini deitireceksiniz.
Framelerin iinde belgeler oluturacaksnz.
Frame ieriini ynlendireceksiniz.
NoFrames ierii oluturacaksnz.
352 DERS 10
Yaklak Sre
Ders Dosyalar
Ortam Dosyalar:
Lesson_10_Frames/Images/(btn dosyalar)
Balang Dosyalar:
Lesson_10_Frames/Text/(btn dosyalar)
Lesson_10_Frames/Community/sidebar.html
Lesson_10_Frames/Community/ys_nav.html
Lesson_10_Frames/sangha.css
Tamamlanm Proje:
Lesson_10_Frames/Completed/Community/AboutGreen.html
Lesson_10_Frames/Completed/Community/BeginningGreen.html
Lesson_10_Frames/Completed/Community/community.html
Lesson_10_Frames/Completed/Community/community_intro.html
Lesson_10_Frames/Completed/Community/sidebar.html
Lesson_10_Frames/Completed/Community/top.html
Lesson_10_Frames/Completed/Community/ys_nav.html
Bir Frameset Oluturmak

Bir frameset, framelerin kullanld bir sayfann genel grnmn tanmlar (sayfadaki
frame alanlarnn says, framelerin her birinin bykl ve kenarlk nitelikleri).
Framesetin kendisinde herhangi bir ierik bulunmaz; frameset sadece her bir framede
hangi HTML belgesinin kullanlacan belirtir. Frameset belgesi, frame tabanl bir Web
sayfasn arrken balant kurduunuz dosyadr. Bu derste, frameden meydana
gelen bir Web sayfas oluturacaksnz. Soldaki framede sabit kalan gezinti elemanlar yer
alacak, sadakinde gezinti frameinde tklanan balantlarla ilgili ieriklerin bulunduu
sayfalar grntlenecek, stteki framede ise sitenin bal yer alacaktr.
Macromedia Dreamweaverda bir frameset oluturmann iki yolu vardr: Frameleri elle
ekleyebilir ya da nceden tanmlanm eitli framesetler arasndan seim yapabilirsiniz.
nceden tanmlanm bir frameseti setiiniz takdirde, frameset ve frameler sizin
iin otomatik olarak ayarlanr. Bu seenek, frameleri kullanarak bir yerleim dzeni
oluturmak iin en hzl yollardan biridir, nk iin byk ksmn siz yapmazsnz.
Sadece sayfalar adlandrmanz gerekir.
Bu uygulamada, frame kullanan bir Web sayfas oluturmak iin nceden tanmlanm bir
framesetten faydalanacaksnz.
Frame Oluturmak 353
1. File > New komutunu sein. New Document iletiim kutusunun General
blmndeki Category listesinden Framesetsi sein.
New Document iletiim kutusunun Framesets blmne, balang

sayfasndaki Create from Samples listesinde yer alan Framesets
seeneine tklayarak da eriebilirsiniz.
New Document iletiim kutusu, yeni bir frameset olutururken kullanabileceiniz

nceden tanmlanm eitli seenekler ierir. Framesets listesine baktnzda, sadaki
nizleme alannda bir aklamayla (Description) birlikte temel frame yapsn gsteren
rnekleri grebilirsiniz.
Standart bir HTML belgesinden bir frameset oluturmak iin

kullanabileceiniz bir yntem daha vardr: Insert ara ubuunda Layout
mensne getikten sonra Frames mensnden nceden tanmlanm bir
frameset seebilirsiniz.
Insert ara ubuunun Layout kategorisindeki Frames mens
2. Framesets listesinden Fixed Right, Nested Topu sein ve Create dmesine

tklayn.
Bir frameset ya satrlardan ya da stunlardan oluabilir, ama her ikisinden birden

oluamaz. Setiiniz gibi birden fazla satr ve stun ieren bir yerleim dzeni oluturmak
iin framesetler i ie yerletirilebilir.
354 DERS 10
3. Frame Tag Accessibility Attributes iletiim kutusunda Frame mensn kullanarak

frameleri sein ve Title metin alann kullanarak balklar aada belirtilen ekilde
ayarlayn:
rightFramee ait bal Right Navigation

topFramee ait bal Title and Navigation
mainframee ait bal Main Content
Frame Tag Accessibility Attributes iletiim kutusu almazsa, Framelerin

eriilebilirlik zelliini Dreamweaver > Preferences (Macintoshta) ya da Edit >
Preferences (Windowsta) komutunu seip Category listesinden Accessibilityyi
iaretleyerek etkinletirebilirsiniz. Bu ilemi yaptktan sonra Show attributes
when inserting alannda Frames seeneinin iaretli olduundan emin olun.
Frame Tag Accessibility Attributes iletiim kutusu, her frame iin uygun bir balk semenizi salar.
Balk (Title) zellii, her framein ierii iin bir balam oluturur, bylece kullanclar aradklar
bilginin hangi framede olduunu belirleyebilir. Frame bal, title niteliiyle tanmlanr. Bu
nitelie, frameleri Frame Tag Accessibility Attributes iletiim kutusunun yardmyla kullanarak
olutururken kolayca eriebilirsiniz. Bununla birlikte, daha sonra da bir framei seip Tag panelinin
Attributes sekmesindeki CSS/Accessibility alan araclyla title niteliinde deiiklik yaparak
mevcut bir frame baln dzenlemeniz ya da bir frame bal uygulamanz mmkndr.
Frame Oluturmak 355
title (balk) nitelii name (isim) niteliinin yerine kullanlamaz. title nitelii
framei kullanclar iin, name nitelii ise script ve pencere hedefleme iin
etiketler. Kullanclar sadece bal (title) grr. Frame isimlerini bu derste
daha sonra greceiz.
Eriilebilirlik ve Frameler
Frame kullanmann dezavantajlar arasnda tam eriilebilirliin salanamamas ve ekran
okuyucularda ve PDA ya da cep telefonu gibi mobil cihazlarda sayfalarn kullanlamamasn
sayabiliriz. Web taraycsndaki Back (Geri) dmesinin almamas, yazdrmayla,
devamll salamayla ilgili sorunlar ve kullanm zorluu da dier sorunlardan bazlardr.
Frameler sayfay grsel olarak farkl blmeler iinde dzenlemek iin kullanlr. Grsel
eleri kullanamayan ziyaretiler iin framelerdeki ieriklerin arasndaki ilikilerin grsel
olmayan bir ekilde iletilmesi gerekir. Bu yzden Dreamweavern frame olutururken
sizden istedii eriilebilirlik zelliklerini kullanmak, daha eriilebilir belgeler oluturmak
iin nemli bir admdr.
Eriilebilirlik niteliklerini uyguladktan sonra framesetin belge penceresinde belirdiini

greceksiniz. Framesette sayfa kenarlarnn etrafnda noktal bir kenarlk bulunur ve
izgiler frame yapsn gsterir.
Frame yapsn gsteren izgiler
356 DERS 10
Frameset kenarl
Sayfa, iki frameset kullanlarak framee blnm durumdadr. Framesetler

sadece yatay veya sadece dey frameler ierebilirler (ayn anda hem dey, hem de
yatay frameler ieremezler). Dey ve yatay frame kombinasyonlar elde etmek iin
framesetlerin birbirlerinin iine yerletirilmeleri yani yuvalanmalar gerekir. Daha eski
bir frameset tarafndan tanmlanm bir framein iinde yer alan frameset, yuvalanm
bir frameset (nested frameset) olarak adlandrlr. Belgenizin balangtaki frameseti
iki dey frame (biri solda, dieri de sada) iermektedir. Soldaki frame, iki yatay framee
blnm bir yuvalanm frameset iermektedir (stte ksa bir frame ve altta daha uzun
bir frame). Dreamweavern nceden tanmlanm baz framesetleri, yuvalanm (i ie
yerletirilmi) framesetler kullanr. stediiniz frame yerleim dzenini elde etmek iin,
nceden tanmlanm bu framesetlerden oluan kombinasyonlar kullanabilirsiniz. nce
gri izgiler, frameler arasndaki blmleri gsterir.
Frameleri elle girmek iin, yeni bir HTML belgesi an ve View > Visual Aids >
Frame Borders komutunu seerek belge penceresinin sayfa kenarlarnn
etrafnda noktal bir frame kenarlnn grntlenmesini salayn. Kenarla
tklayn ve belge penceresine srkleyin. Kenarl en stnden ya da en
altndan tutup srklerseniz belge yatay olarak, kenarl sol ya da sa
tarafndan tutup srklerseniz dey olarak blnecektir. Kenarl kesinden
tutup srklerseniz, belge drt framee blnr. Ayn ilemi Modify > Frameset
> Split Frame Left, Right, Up ya da Down komutlarn seerek de yapabilirsiniz.
Yanl frame konfigrasyonunu setiyseniz ya da framesetinizdeki frame
saysn azaltmanz gerekiyorsa, istemediiniz framelerin kenarln sayfann
kenarna ya da baka bir framein zerine srkleyerek bunlar silebilirsiniz. Siz
bu ilemi yaptktan sonra fazla frameler kaybolacaktr.
Bir Frameseti Kaydetmek

stediiniz sayda framei elde etikten sonra frameseti kaydetmeniz gerekir. frameset
dosyas, bu Web sayfasna balanrken gndermede bulunduunuz dosyadr. Sayfay
Web taraycsnda nizleyebilmeniz iin, framesetin ve her bir framee ait dosyalarn
kaydedilmesi gerekir. Kaydetmeden nce sayfay taraycda nizleme giriiminde
bulunursanz, Dreamweaver nizleme iin framesetin ve frame dosyalarnn kaydedilmesi
gerektiini belirten bir mesaj grntler. Her bir dosyay tek tek kaydedebileceiniz
gibi, btn ak dosyalar tek bir seferde de kaydedebilirsiniz. Bu uygulamada, sadece
frameseti kaydedeceksiniz.
1. Belge penceresinde, Etiket Seiciye bakarak framesetin seili olduundan
emin olun. Burada <frameset> etiketinin vurgulu olarak grnmesi gerekir.
Frame Oluturmak 357
Bir frameset oluturduunuzda, bu frameset otomatik olarak seili hale gelir. Belge
penceresinde herhangi bir yere tkladnzda framesetin seimi kaldrlr, nk bu
durumda bir framein iine tklam olursunuz. Bir framein iine tklamak bir tablo
hcresinin iine tklamaya benzer. Ekleme noktasn bir hcrenin iine yerletirdiinizde
ilgili hcre etkin hale gelir, ama tablonun tamamnn seili olduu durumda
dzenleyebileceiniz zelliklere eriemezsiniz. Benzer ekilde, bir framesette deiiklik
yapmak iin framesetin kendisini semeniz gerekir.
Belge penceresinde frameset seili durumda
Etiket Seici, framesetin

seildiini gsteriyor
Framesetin noktal kenarl
Frameset seili durumda deilse, belge penceresinin kenarlarnn etrafndaki kenarla

tklayarak bunu seebilirsiniz. Frameseti, Window > Frames komutunu setikten sonra
Frames panelindeki frameleri evreleyen en d kenarla tklayarak da seebilirsiniz.
Frames paneli, belgedeki frame yapsnn basit bir versiyonunu gsterir.
Frames panelinde seili

durumdaki framesetin
dz kenarl
358 DERS 10
Frameset seili durumdayken, belge penceresinin etrafnda noktal bir izgi belirir ve
pencerenin en alt ksmnda yer alan Etiket Seicide <frameset> etiketi grnr. Belgenin
balk ubuunda UntitledFrameset-1 ifadesi grnr, Properties denetisinde
de frameset zellikleri grntlenir. Balksz belgenizin numaras (-1, -2, vb.),
Dreamweaver atktan sonra ka tane yeni belge oluturduunuza bal olarak deiebilir.
Frameset seili deilse, bunun yerine tek bir frame seili durumdadr ve
belge penceresinin etrafndaki frame kenarl dz siyah bir izgi olarak
grnr. Yuvalanm bir frameset seili durumdaysa, bunun bulunduu
framein kenarl noktal bir izgiyle evrilir.
Frames panelinde, seili bir frameset panelin etrafnda kaln bir kenarlkla gsterilir ve
frameler gri renkli, seilemez durumdaki bir kenarlkla grntlenir.
2. File > Save Frameset As komutunu sein ve dosyay Lesson_10_Frames/
Community klasrne community.html adyla kaydedin.
Belgenin balk ubuunda dosyann ad grntlenecektir.

3. Frameset seili durumdayken, sayfa baln Yoga Sangha: Community olarak
ayarlayn. Frameseti kaydedin.
Siz sayfa baln yazarken frameset seili durumda deilse, asl frameset dosyasna deil,
tek bir framee karlk gelen bir sayfaya balk atyor olabilirsiniz. Neyin seili durumda
olduunu anlamak iin Frames paneline bakn. Bu panel, framein iinde mi, yoksa
dzenlemek istediiniz framesetin iinde mi alyor olduunuzu anlamanza yardmc
olacaktr.
Bir sonraki uygulamada kullanmak zere community.html dosyasn ak brakn.
Bir Framesette Bulunan Frameleri Yeniden

Boyutlandrmak
Framelerinizin bykln belirlemek iin Properties denetisini kullanabilir ya da
ayn ilemi belge penceresindeki kenarlklar srkleyerek yapabilirsiniz. Properties
denetisinde boyutlar ayarlamaya ek olarak, btn framelerin tam byklkte
gsterilmesi iin yeterli yerin olmad durumlarda Web tarayclarnn framelere nasl
yer ayracan belirlemek de mmkndr.
Frame Oluturmak 359
1. Belge penceresinde, imleci st ve alt framelerin arasndaki yatay kenarln

zerine getirerek yuvalanm durumdaki framesetin seili durumda olduunu
dorulayn. mle ift ulu bir oka dntnde kenarla bir kez tklayarak
frameseti sein.
Ana framesetin
yatay kenarl
ift ulu ok
Yuvalanm frameset seili hale gelecek ve Properties denetisinde frameset zellikleri

grntlenecektir. Properties denetisindeki seenekler, bir frameseti ya da framei
semenize bal olarak deiir. Framelerin byklklerini deitirmek iin, frameseti
setiinizden emin olmanz gerekir.
Properties denetisinde yuvalanm framesete
ait frameset zellikleri grntleniyor
Satr deeri
(Row Value)
Satr deeri
birim mens
(Row Units)
stteki satr seili durumda
RowCol
Selection
Geniletme
oku
Frameset zellikleri grnmyorsa, Properties denetisindeki geniletme

okuna tklayarak bunlarn hepsini grntleyebilirsiniz.
360 DERS 10
2. stteki ve alttaki framelerin arasnda yer alan kenarl, stteki framein

ykseklii 112 piksel oluncaya kadar srkleyin.
Properties denetisindeki Row Value alann kullanarak ykseklik deerini kontrol edin ya
da RowCol Selection alannda st satr seili durumdayken Row Value metin alanna 112
deerini girip ykseklii tam olarak ayarlayn. Units mensnde Pixelsin seili durumda
olduundan emin olun. RowCol Selection alanndaki st satr, etkin durumda olduunu
gsterecek ekilde koyu renkte grnecektir.
Frames
panelinde
yuvalanm
frameset seili
durumda
3. Frameset seili durumdayken, Properties denetisinde yer alan RowCol

Selection alanndaki alt satra tklayarak yuvalanm framesetteki alt satr
sein. Row Value metin alannn yanndaki Units mensnde Relativein seili
durumda olduundan emin olun.
Bir satr ya da stunu semek iin Properties denetisindeki RowCol Selection alann
kullandnzda, framesetin iinde ilgili satr ya da stunu semi olursunuz. Bu da,
framesetin zelliklerini bu satr ya da stuna uygulanrken deitirmenize imkn salar.
Burada bir frame semi olmazsnz.
Alt satrn birim (Units) seeneini Relative olarak ayarlamanz, alt satrn, ziyaretinin
Web taraycsnn byklne ve stteki satra atam olduunuz 112 piksellik yer
ayrldktan sonra ne kadar yer kaldna bal olarak genilemesini ya da daralmasn
salar. Varsaylan durumda Dreamweaver, Relative olarak tanmlanan satrlarn Row
Value metin alanna otomatik olarak 1 deerini yerletirir.
Framesetin byklyle ilgili HTML kodunu grntlerseniz, frameset
rows=112,* ifadesini grrsnz. Row Value metin alanndaki 1 deeri ve
Units mensnde Relativein seilmesi, kodda yldz (*) karakteri
kullanlmasyla ayn anlama gelir. Bu karakter; framesetteki dier satrlara
gre orantl ya da greceli bir bykl temsil eder.
4. Frames panelinde, frameseti zerine tklayarak tmyle sein. Framein
Properties denetisindeki grsel temsili olan RowCol Selection alannda solda
yer alan stuna tklayarak soldaki yuvalanm frame stununu sein.
Frame Oluturmak 361
Belgenizde, dtaki frameset stunlardan, yuvalanm frameset ise satrlardan olumaktadr.

Properties denetisinde solda yer alan stunun rengi kararacaktr. Bu, onun seildiini gsterir.
Stun deeri
Stun deeri birim Soldaki stun
(Column Value) mens (Column Units) seili durumda
5. Properties denetisindeki Column Value metin alanna 484 yazn ve Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn. Units mensnde Pixelsin
seili durumda olduundan emin olun.
Soldaki stunun genilii 484 piksel olarak ayarlanacaktr.

Stunun bykln nasl ayarlayacanza karar verirken aadaki lm birimlerini gz
nnde bulundurun.
Pixels (Piksel): Bu seenek, seili stun ya da satrn mutlak bykln girdiiniz
piksel saysna ayarlar. Belirli bir bykle sahip olmas gereken frameler iin en iyi
seenek budur. Eer dier stunlar ya da satrlar farkl bir birimle tanmlanrsa, bu stun
ya da satrlara ancak Pixels olarak ayarlanm satrlar ya da stunlar tam boyutlarnda
grntlendikten sonra yer ayrlr.
Percent (Yzde): Bu seenek, geerli stunun ya da satrn kendi framesetinde
kaplayaca alan yzde olarak belirtir. Units mensnde Percent seeneiyle tanmlanan
stun ya da satrlara, Pixels olarak tanmlanm olan stun ya da satrlardan sonra ve
Relative olarak tanmlanan stun ya da satrlardan da nce yer ayrlr.
Relative (Greceli): Bu seenek, geerli stun ya da satra dier stun ve satrlara gre
geerli orantlar kullanlarak yer ayrlacan belirtir. Birimleri Relative olarak ayarlanm
stun ya da satrlara, Pixels ve Percent olarak ayarlanm stun ya da satrlardan sonra yer
ayrlr, ama bunlar kalan boluun tamamn kaplar. Alttaki ya da sadaki framei Relative
olarak ayarlarsanz, framein bykl tarayc penceresinin kalan geniliinin ya da
yksekliinin tamamn kaplayacak ekilde deiir.
6. Properties denetisinde, RowCol Selection alannda sada yer alan stuna

tklayarak yuvalanm framesetin sa stununu sein. Column Value metin
alannn yanndaki Units mensnde Relativein seili olduundan emin olun.
Bu ilemler, sadaki stunun, ziyaretinin taraycsnn byklne ve soldaki stuna

atanm olan 484 piksellik yer ayrldktan sonra ne kadar boluk kaldna bal olarak
genilemesini ya da daralmasn salar.
362 DERS 10
7. File > Save Frameset komutunu seerek frameseti kaydedin.
Bu komut kullanlabilir durumda deilse, nce stteki ve alttaki framelerin arasndaki

kenarla tklayarak dtaki frameseti sein.
Frameset seili durumdaysa, Cmd+S (Macintoshta) ya da Ctrl+S
(Windowsta) tuuna bastnzda sadece frameset kaydedilir.
community.html dosyasn bir sonraki uygulamada kullanmak zere ak brakn.
Frame zelliklerini Ayarlamak

Bir frameset olutururken framelerin her birini adlandrma alkanln edinin. Bir framee
atadnz isim, o framee karlk gelen belgenin dosya ad ya da bal veya framein kendi
bal deildir. framein ismini, belgenin frameli alann tanmlamak iin referans olarak
kullanabilirsiniz ve bu yaklam genelde scriptler iin kullanlr. Frameleri adlandrmanz,
frameli bir alandaki sayfalar grntlemek zere balant oluturduunuz durumlarda
nemlidir. Frameleri adlandrmak eriilebilirlik asndan da nemlidir, zellikle de
frame bal sayfay grntlemek iin kullanlan teknoloji tarafndan desteklenmiyorsa.
Bir nceki uygulamada, nceden tanmlanm framesetleri kullanmtnz. Framelerin
her birine nceden varsaylan bir isim verilmiti. Bu uygulamada bu isimleri, framelerin
kullanm amalarn yanstacak ekilde deitireceksiniz.
1. Frames panelinde sol stte yer alan framee tklayarak sol st framei sein.
Frames paneli ak deilse, Window > Frames komutunu sein.
Frames panelinde sol stte yer alan framein seilmesi, belge penceresine
tklayarak ekleme noktasn sol stteki framee yerletirmekle ayn ey deildir. Bir framei
setiinizde, bu framee ait zellikler Properties denetisinde kullanlr hale gelir. Belge
penceresindeki framein iine tkladnzda, ilgili framein bulunduu belgeye ait standart
metin zellikleri grntlenir. Ekleme noktas sol stteki framedeyse, bu frame etkin
durumdadr, ama frame zelliklerinde deiiklik yapamazsnz. Framein kendisine ait
zelliklerin deitirilebilmesi iin bu framein seili olmas gerekir.
Sol stte yer alan framei, Shift+Option tularn (Macintoshta) ya da Alt
tuunu (Windowsta) basl tutup belge penceresinde zerine tklayarak
semeniz de mmkndr.
Frames
panelinde sol
stteki frame
seili durumda
Frame Oluturmak 363
Frames panelinde, sol stteki framein etrafnda ince, siyah renkli bir kenarlk, ortada
da topFrame ismi grntlenecektir. Properties denetisinde topFrame adl framee ait
zelliklerin grntlendiinde dikkat edin.
2. Properties denetisindeki Frame name metin alanna, varsaylan isim olan
topFramein yerine titleNav yazn. Yaptnz deiiklii uygulamak iin, Return
Properties denetisindeki Frame name metin alan
Scroll mens
Ziyaretilerin framei yeniden boyutlandrmasn

salayan seenek
Frames panelinde, sol stteki framede titleNav szc grnecektir. Belirli bir framein
ismini renmek iin istediiniz zaman Frames paneline bavurabilirsiniz. Frame isimleri
genellikle balantlar belirli framelere yklemek zere ynlendirmek amacyla kullanlr.
Balantlarn hedef ayarn Ders 3te renmitiniz
Frameleri adlandrrken boluk, tire, nokta ya da zel karakterler
kullanmayn ve frame ismini alt izgiyle balatmayn. Bu karakterlerin
herhangi birini kullandnzda kod ya da scriptlerle ilgili sorun kabilir.
Ayrca ou kod dili BYK/kk harf yazmna duyarldr. Bu yzden
frame isimlerinizde tutarll koruduunuzdan emin olun.
3. Properties denetisindeki Scroll mensnde No seeneinin iaretli
olduundan ve No resize kutusunun da iaretli olduundan emin olun.
Kaydrma ubuklarnn ne zaman grneceini belirleyen Scroll seenei, hem dey,

hem de yatay kaydrma ubuklarna uygulanr. Auto ayar, kaydrma ubuklarn framede
sayfann ieriinin grntlenmesi iin yeterince yer kalmad durumlarda grntler.
Default, taraycnn varsaylan ayardr (bu ayar genellikle Autodur). Bu seenei
ayarlarken dikkatli olun. Eer No olarak ayarlanmsa ve frame ieriin tamamn
grntleyecek kadar byk deilse ziyareti kaydrma ubuklarn kullanarak ieriin
geri kalann grntleyemez; Yes olarak ayarlanmsa ve ierik framein iine syorsa,
kaydrma mmkn olmasa bile gri renkte ve seilemez durumda olan kaydrma ubuklar
sayfada yer kaplamaya devam eder.
No resize seenei, taraycda grntlenen framein byklnn deitirilmesini
engeller. Bu seenein iareti kaldrlrsa, ziyaretiler tarayc pencerelerinde
364 DERS 10
frame kenarlklarn tutup srkleyebilirler. Bu seenek, iaretli olsa da olmasa da,

Dreamweaverda frameleri yeniden boyutlandrmanz engellemez.
Web sitenizi ziyaret eden kiilerin monitrlerinin byklklerinin ve znrlk ayarlarnn
eitlilik gsterdiini unutmayn. Frameler sz konusu olduunda, siteleri byk ve yksek
znrlkl ekranlarda tasarlarken daha kk ekranlar da dikkate almak ok nemlidir.
Frame tabanl sayfalar kullanlrken, bunlar tasarlandklar ekranlardan daha byk ya da
daha kk ekranlarda grntlendiinde sorunlarla karlalabilir. rnein daha kk
ekranlar, sayfalarnzn ok fazla kaydrma ilemi gerektirmek gibi sorunlar yaratmasna
neden olabilir; bu da ziyaretilerin iini ok zorlatrabilir. Sayfalarnz eitli ortamlarda
test ederek, bunlarn farkl byklkteki ve znrlkteki ekranlara uyum salayacandan
emin olabilirsiniz. Byklkle ilgili byle sorunlarn yazdrma konusunda da sorunlara
yol aabileceini unutmayn. Sitenizde frameler kullanyorsanz, yazc dostu sayfalar gibi
alternatifler sunmay dnebilirsiniz.
Yazc dostu sayfalar 530 piksel geniliindedir (yazdrlabilir genilik) ve bu
sayfalarda minimum sayda resim kullanlr. Byle sayfalarda gezinti eleri
de (rnein sayfann alt ksmndaki metin balantlar) minimum sayda
olmaldr. Beyaz arka plan rengi ve siyah metinlerin kullanlmas, beyaz kt
zerinde okunabilirlik asndan en iyi seimdir. Serif fontlar da zellikle
yazdrlmak zere hazrlanan sayfalar iin iyi bir seimdir. Metinlerinizi
kolayca okunabilecek bir bykle (rnein 12 punto ya da daha byk
olacak ekilde) ayarlayn.
4. Sol alt ksmdaki framei sein ve bunu content olarak adlandrn. Scroll
seenei Auto olarak ayarlanmal ve No resize kutusu da iaretli olmaldr.
Properties denetisinde Borders mensnde Default ayarnn seili olduuna dikkat edin.
Sayfann yerleim dzenini oluturmak iin kullandnz nceden tanmlanm framesetler,
framelerin kenarlklar olmayacak ekilde otomatik olarak ayarlanmtr. Belirli bir frame
iin Borders seenei Default olarak ayarlandnda, bu frame ebeveyn framesetin ayarn
kullanr. Eer baka bir ayar (Yes ya da No) seilirse, framede ebeveyn framesetin ayarn
dikkate alnmaz.
Frames panelinde, sol alt framede content ismi grnecektir.
Frames panelinde
frameler iin
ayarladnz isimler
grntlenir.
Frame Oluturmak 365
5. Sadaki ksmdaki framei sein ve bunu moreContent olarak adlandrn. Scroll

seenei No olarak ayarlanmal ve No resize kutusu iaretli olmaldr.
Properties denetisinde Margin width (kenar boluu genilii) ve Margin height (kenar
boluu ykseklii) metin alanlarnn bo olduuna dikkat edin. Bu, sayfanzn yerleim
dzenini oluturmak iin kullandnz, nceden tanmlanm framesetlerin varsaylan
ayardr. Margin width, framein sol ve sa tarafndaki kenar boluklarn piksel kullanarak
ayarlar. Margin height ise framein st ve alt ksmndaki kenar boluklarn piksel kullanarak
ayarlar. Bu seenekleri bo olarak braktnzda taraycnn varsaylan ayar kullanlr; bu da
taraycnn srmne ve tipine bal olarak farkllk gsterebilir.
Frames panelinde, sa framede moreContent ismi grnecektir.
6. File > Save Frameset komutunu sein.
Frame zelliklerini deitirdiinizde, aslnda community.html framesetini deitirmi

olursunuz. Framesette hem frame, hem de frameset zellikleri tanmlanr.
community.html dosyasn bir sonraki uygulamada kullanmak zere ak brakn.
Frame eriini Oluturmak ve Dzenlemek

Bir framein ieriinin framesette deil, ayr bir HTML sayfasnda bulunduunu unutmayn.
Frame sayfalarn ayr olarak ya da bir framein snrlar iinde oluturabilirsiniz. Her bir
framede yer alacak olan sayfalar tasarlamak iin framesetlerden faydalanmak her zaman
iin iyi bir fikirdir. Bylece frame iin ok geni ya da ok dar olan bir sayfa oluturmam
olursunuz. eriin tamamn grmek iin sayfalar birden fazla ynde kaydrmak zorunda
kalan ziyaretilerin ii bir hayli zor olacaktr.
Bu uygulamada, framesetteki sayfalarn her birine ierik ekleyeceksiniz.
1. Ekleme noktasn belge penceresinde balk (title) frameine (stteki frame) yerletirin.
Belge balk ubuu (Macintoshta) ya da Dreamweaver programnn balk ubuu

(Windowsta), bunun balksz bir belge olduunu gsterecek ekilde deiecektir.
2. File > Save Frame komutunu sein. Dosyay Lesson_10_Frames/Community
klasrne top.html adyla kaydedin ve baln Yoga Sangha: Title yapn.
Lesson_10_Frames klasrndeki sangha.css stil sayfasn ekleyin.
Belge balk ubuu (Macintoshta) ya da Dreamweaver programnn balk ubuu

(Windowsta) bu framedeki belgenin baln ve dosya adn gsterecek ekilde deiecektir.
Sitenin ziyaretileri muhtemelen bu sayfann baln gremeyecektir, nk Web taraycs,
tarayc penceresinde framesetin baln kullanr. Yine de, her zaman belgelere balk
atamak iyi bir alkanlktr. Bylece sayfa herhangi bir sebeple bir pencerede kendi bana
alrsa balksz kalmam olur.
366 DERS 10
3. Lesson_10_Frames/Images klasrndeki ys_header.jpg resmini title frameine

ekleyin ve Alt metin alanna Yoga Sangha yazn. Framei kaydedin.
Sayfalarnz dzenlerken, bunlar sk sk kaydetmeyi ihmal etmeyin. Save klavye

ksayolunu, yani Cmd+S (Macintoshta) ya da Ctrl+S (Windowsta) kullandnzda,
sadece (eer seiliyse) geerli durumda seili framee ya da framesete karlk gelen
dosyay kaydetmi olursunuz. Save komutu belgelerin her birini kaydetmez; bunlar ayr
ayr kaydetmeniz ya da File > Save All komutunu kullanmanz gerekir.
Baka bir framede grntlenen dosyay kaydetmek istiyorsanz, belge penceresinde bu
framein iine tklayn, sonra da Save dmesine tklayn. Kaydetme ilemini yaparken,
hangi framein seili olduunu anlamak iin Frames paneline bakabilirsiniz. Frames
panelinde, ekleme noktasnn bulunduu framein ismi hari, btn frameler soluk gri
renkle grntlenir.
4. Ekleme noktasn content frameine (sol alt ksmdaki frame) yerletirin. Dosyay
community_intro.html adyla Lesson_10_Frames/Community klasrne kaydedin
ve buna Yoga Sangha Community: Introduction to Green Yoga baln atayn.
Lesson_10_Frames klasrndeki sangha.css stil sayfasn ekleyin.
Belgenin balk ubuu (Macintoshta) ya da Dreamweaver programnn balk ubuu

(Windowsta), bu framedeki belgenin baln ve dosya adn gsterecek ekilde
deiecektir.
5. Lesson_10_Frames/Community/ys_nav.html dosyasn an, ara ubuunu
kopyalayn ve content sayfasna yaptrn.
Ana gezinti ara ubuu ierik (content) sayfalarnda bulunacaktr, dolaysyla bu

framedeki btn sayfalara dahil edilecektir.
Frame Oluturmak 367
6. Return (Macintoshta) ya da Enter (Windowsta) tuuna basarak ara ubuunun

altnda yeni bir paragraf oluturun. Lesson_10_Frames/Text/green_page1.txt
dosyasn an, metni kopyalayn ve sayfaya yaptrn. Green Yoga at Yoga
Sangha metnini bir paragraf olarak deitirin ve Properties denetisindeki Style
mensn kullanarak tagline-style stilini uygulayn. Sayfay kaydedin.
Bu sayfa, bu derste daha sonra navigation frameinde oluturacanz Community

balantsna karlk gelen ierik sayfasdr.
erik (content) frameiniz burada yer alan rnekteki gibi grnecektir.
Frame tabanl sayfalarda, ziyaretilerin sayfalar dolarken grsel bir

geribildirim almalarn salamak iin, gezinti ubuu (navigation bar) adnda
etkileimli bir eleman kullanabilirsiniz. Gezinti ubuunu kendiniz
oluturabilirsiniz, bununla birlikte Dreamweaverda bunu oluturmak iin
kullanabileceiniz bir ara da mevcuttur. Gezinti ubuu, eitli sayfalara bal
olan bir dizi resimden oluur. Gezinti ubuklar JavaScript kullanr (bu konu
Ders 8de ele alnmtr). Bu da her bir resim iin kullanc etkileimine gre
drt durum eklemenize imkn salar. Bir resmin ilk durumu sayfa yklenirken,
ikinci durum da ziyareti fare imlecini resmin zerine getirdiinde ortaya kar.
Ziyareti resme tkladnda nc durum gsterilir, drdnc durum ise
resme tklandktan sonra ziyareti fare imlecini resmin zerine getirdiinde
kullanlr. Gezinti ubuu, ziyaretilerin gerekletirdikleri eylemlere cevap
verilmesi konusunda etkilidir. Bylece ziyaretileriniz, gezinti resimleriyle
gsterilen duruma gre hangi sayfalara baktn kolayca anlayabilir.
368 DERS 10
Dier erik Belgelerini Oluturmak

imdi de content frameinde grntlenecek olan dier belgeleri oluturmanz gerekiyor.
1. New Document iletiim kutusunun Basic Page kategorisini kullanarak yeni bir
HTML belgesi oluturun. Dosyay AboutGreen.html adyla Lesson_10_Frames/
Community klasrne kaydedin ve buna Yoga Sangha: Community: About
Green baln verin. Lesson_10_Frames klasrndeki sangha.css stil sayfasn
ekleyin.
Belgenin balk ubuu, belgenin baln ve dosya adn yanstacak ekilde deiecektir.
2. Lesson_10_Frames/ys_nav.html dosyasn an, ara ubuunu kopyalayn ve
AboutGreen.html sayfasna yaptrn.
Ana gezinti ara ubuu her bir ierik (content) sayfasnda bulunacaktr.
3. Return (Macintoshta) ya da Enter (Windowsta) tuuna basarak ara
ubuunun altnda yeni bir paragraf oluturun. Lesson_10_Frames/Text/green_
page2.txt dosyasn an, metni kopyalayn ve sayfaya yaptrn. About Green
Yoga metnini bir paragraf olarak deitirin ve Properties denetisindeki Style
mensn kullanarak tagline-style stilini uygulayn.
Bu sayfa, About Green balantsna karlk gelecek olan ierik sayfasdr. Bu derste daha
sonra rightNav frameinden bu sayfaya giden bir balant oluturacaksnz.
Frame Oluturmak 369
4. 1den 3e kadar olan admlar tekrar ederek Lesson_10_Frames/Community

klasrnde BeginningGreen.html adnda bir dosya oluturun. Bu dosyaya
green_page3.txt dosyasndaki metni ekleyerek Yoga Sangha: Community:
Beginning Green Yoga baln atayn.
Bu sayfa, bu derste daha sonra rightNav frameinde oluturacanz Begin balantsna

karlk gelen ierik sayfasdr.
AboutGreen.html ve BeginningGreen.html dosyalarn kapatabilirsiniz. Bir sonraki
uygulamada kullanmak zere community.html dosyasn ak brakn.
Mevcut Bir Sayfay Bir Framede Amak

moreContent frameinin ierii daha nceden sizin yerinize oluturulmutur. Bu sayfay
framee atamak istiyoruz. Ayrca daha nce birka tane ierik sayfas oluturmaya
balamtnz. Bu yzden, imdi bunlarn content frameine sacaklarndan emin olmanz
gerekiyor. Kontrol etmek ya da dzenlemek zere, bu dosyalar dorudan framede
aabilirsiniz.
1. community.html dosyasnn belge penceresinde moreContent frameinin iine
tklayn.
Bu, sidebar sayfasnn grnmesini istediiniz framedir.

2. File > Open in Frame komutunu sein. Alan iletiim kutusunda sidebar.htmli
sein. Frameseti kaydedin.
Sayfa content frameine yklenecek ve dzenlenmeye hazr hale gelecektir. kincil gezinti
elerinin henz kendileriyle ilikilendirilmi balantlarnn olmadna dikkat edin.
3. content frameinin iinde AboutGreen.html dosyasn an. Sayfann framee
tam olarak sdndan emin olun.
File mensndeki Save All Frames komutunu kullanrken ve framelerinizi

kaydederken dikkatli olun. Bu komut, framelerinizde ve framesetinizde yer
alan btn ak sayfalar kaydeder. Her bir framede ilk bata grnen
dosyalar framesette tanmlanr. Framelerde bulunan dier sayfalar
dzenlerken File > Save All Frames komutunu seerseniz, (File > Open in
Frame komutunu kullanarak), frameseti yeniden tanmlam olursunuz.
4. BeginningGreen.html dosyasn content frameinde an.
Sayfanzn u anki grnm sradaki rnee benzeyecektir. Sayfann framee sdndan

emin olun.
370 DERS 10
Frame eriini Kontrol Etmek

Framelerde sayfalar oluturup bunlar dzenlerken, bir framee kazara yanl ierii
yerletirebilirsiniz. Web sayfanzn balangtaki grnmnde framelerin her birine
doru sayfalarn yklendiinden emin olmak iin Properties denetisini kullanabilirsiniz.
1. Frames panelinde en stteki framee tklayarak titleNav frameini sein.
Properties denetisindeki Src metin alannda top.htmlin seili olduundan
emin olun. Eer seili deilse, buradaki klasr simgesine tklayarak bu dosyay
bulun ve sein.
Properties denetisinde titleNav frameine ait frame zellikleri grntlenecektir.

Seilen framede grnen dosyann kayna
Frame Oluturmak 371
2. Frames panelinde sada yer alan framee tklayarak moreContent frameini sein.
Properties denetisindeki Src metin alannda sidebar.html dosyasnn seili durumda
olduundan emin olun. Eer seili deilse, klasr simgesine tklayarak bu dosyay
bulun ve sein.
Properties denetisinde, moreContent frameine ait frame zellikleri grntlenecektir.

3. Frames panelinde sol alt ksmdaki framee tklayarak content frameini sein.
Properties denetisinde yer alan Src metin alannn yanndaki klasr simgesine
tklayarak community_intro.html dosyasn bulun ve sein. Frameseti kaydedin.
BeginningGreen.html dosyas seili durumdayd, nk bu framede en son altnz belge

buydu. Bir framede yer alan bir sayfay dzenlemek zere atnzda, framesetin kaydedilmesi,
frameset belgesi yklendiinde bu dosyann sz konusu frame iin varsaylan sayfa haline
gelmesine neden olur. community_intro.html dosyas, en sonda kullanlacak olan framesetin
content frameinde ilk grnmesini istediiniz belgedir.
Properties denetisinde, content frameine ait frame zellikleri grntlenecektir.
Properties denetisindeki Src metin alanna istediiniz sayfann URLini yazarak, eitli
kaynaklardaki Web sayfalarn belirli bir framede aabilirsiniz. ardnz sayfann frameset ile
ayn sunucuda yer almas gerekmez. Baka sunucularda yer alan sayfalarn alabilmesi, ieriin
ahlak olarak kullanm asndan olumsuz bir durum yaratabilir. Baz frame tabanl sayfalar,
bakalar tarafndan gelitirilen ieriklerin onlarn izni olmadan almas iin kullanlr. Kendinize
ait olmayan ieriklerin telif haklarna sayg gstermeyi ihmal etmeyin ve belirli materyaller sizin
Web sitenize ait deilse, ziyaretilerin yleymi gibi bir izlenim edinmelerine engel olun.
Sayfalarnzn baka birine ait bir frameden arlmas konusunda
endieleniyorsanz, JavaScript kullanarak sayfanz baka bir frameden
arldnda taraycnn sayfanz kendi penceresinde amasn salayabilirsiniz.
Site gnlk kaytlarn gzden geirerek ve daha fazla bilgi iin sistem yneticinize
danarak byle bir sorun olup olmadn tespit edebilirsiniz.
Frame eriini Balantlarla Kontrol Etmek

erik belge sayfalarn oluturduktan sonra gezinti elemanlarn, Web sayfanzn ierik alannda
grntlenmesi gereken sayfalara balamanz gerekir. eriin doru konumda grnmesini
salamak iin, balanty ilgili framee atamanz gerekir.
1. Ekleme noktasn moreContent frameindeki (sadaki frame) Introduction metin
balantsnn iine yerletirin. Properties denetisinde Link metin alannn
yanndaki Browse for File simgesine tklayarak bo balanty (#) deitirin. Ayn
dizindeki community_intro.html sayfasn sein. Balanty uygulamak iin Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn. Balant seili durumdayken
Target mensnden contenti sein.
372 DERS 10
Varsaylan durumda, balantlar bulunduklar framee ya da pencereye atanr. Ama bu

balantlarn, kendilerine karlk gelen belgeleri moreContent frameinde deil, content
frameinde amas gerekiyor.
Link metin alan
Target mens
Oluturduunuz her yeni framein ismi Target mensne otomatik olarak eklenir.
Kolay anlalr, ksa ve aklayc isimler kullanmak en iyisidir. Dreamweavern verdii
varsaylan isim framein konumu hakknda fikir verir. Ama bir belgenin belirli bir framede
almasn salamaya alyorsanz, bu genel tipteki isimler yine de zor ve kafa kartrc
grnebilir.
Bir framee yklenecek olan bir belge zerinde alyorsanz ve bu belgeyle
frameset iinde almyorsanz (bu derste olduu gibi), Target mensnde
framelerin ismini seme gibi bir ansnz olmaz. Dreamweaver, Target
mensnde sadece geerli belgede kullanlabilir durumda olan framelerin
isimlerini grntler. Byle durumlarda, sayfann almasn istediiniz
framein tam ismini Target metin alanna yazmanz gerekir.
2. Birinci adm tekrarlayarak, About metnini AboutGreen.html belgesine, Begin
metnini de BeginningGreen.html belgesine, balayn. Bu balantlarn her
birinin content frameine atanmas gerekir.
Target mensnde, aada grld gibi baka seenekler de yer alr.

_blank, bal belgeyi yeni, isimsiz bir tarayc penceresine ykler.
_parent, bal belgeyi, balanty ieren framein ebeveyn framesetine ykler.
Balanty ieren frame baka bir framein iinde deilse, bal belge tarayc
penceresinde tam ekran olarak alr.
_self, bal belgeyi, balantyla ayn frame ya da pencerede aar. Bu hedef seenei
aka anlald iin, genelde bunu belirtmeniz gerekmez.
_top, bal belgeyi tarayc penceresinde tam ekran olarak aar, bylece btn
frameleri siler.
Frame Oluturmak 373
Frame sayfalarnz Web taraycsnda nizlerken, btn framelerin kaydedilmesi

gerektiini bildiren bir iletiim kutusuyla karlaabilirsiniz. Btn frameleri ve frameseti
kaydetmek iin OK dmesine tklayn.
About balantsna tkladnzda, content frameinde AboutGreen.html belgesi
grntlenecektir.
Eer sayfalarnz beklediiniz framelerde grnmyorsa, Properties
denetisindeki Target alr mensnde her bir balant iin doru framei
seip semediinizi kontrol edin.
Balantlarn, btn sayfalar content frameinde amas gerekir. Eer byle olmuyorsa,
Target mensn kullanarak, sayfalar bu framede amayan btn balantlar iin hedef
ayarn dzeltmeniz gerekir.
NoFrames eriini Oluturmak

Dreamweaverda, frameleri grntleyebilen tarayclar tarafndan gz ard edilen
ve eski tipteki ve metin tabanl tarayclarda ya da frameleri desteklemeyen dier
tarayclarda grntlenen ierikler oluturabilirsiniz. NoFrames ierii ad verilen
bu bilgiler, frameleri desteklemeyen tanabilir Internet aygtlar, arama motorlar ve
ekran okuyucular tarafndan da kullanlr. Oluturduunuz NoFrames ierii, frameset
dosyasna yerletirilir. Frameleri desteklemeyen bir Web taraycs frameset dosyasn
yklediinde, bu tarayc sadece NoFrames ieriini grntler.
1. community.html belgesinde frameseti sein.
community.html belgesi taraycnn ilk ykledii sayfa olduu iin, NoFrames ierii
burada gsterilir.
2. Modify > Frameset > Edit NoFrames Content komutunu sein.
Modify mensndeki Frameset seenei kullanlamaz durumdaysa (gri

olarak gsterilir ve seilemez) bir frame semi olabilirsiniz.
Belge penceresi, NoFrames sayfasn gsterecek ekilde deiecek ve en st ksmda

NoFrames Content szckleri grnecektir. Bu hl community.html belgesidir; sizin
grdnz, sadece sayfa ieriinin farkl bir grnmdr.
374 DERS 10
3. green_page1.txt belgesini an, sonra da metnin tamamn sein ve kopyalayn.

green_page1.txt metin dosyasndan kopyaladnz bu metni yaptrarak belge
penceresinde NoFrames ieriini oluturun.
Alternatif ierik, standart bir html sayfasndan alnan elemanlar ierebilir. Bu

ierik, <noframes> ve </noframes> etiketlerinin arasna yerletirilir. Sadece frameleri
desteklemeyen Web tarayclar bu ierii grebilir. Bu ierik nispeten basit olmaldr.
Frameleri desteklemeyen tarayclar muhtemelen JavaScripti, resim haritalarn ve
dier karmak eleman tiplerini desteklemez. Baz Web siteleri NoFrames ieriini, basit
alternatif sayfalar salamak ya da ziyaretileri Web sitesinin metin tabanl bir versiyonuna
ynlendirmek iin kullanr. Baz siteler de NoFrames ieriini, sitenin sadece frameleri
grntleyebilen tarayclarda kullanlabileceini belirten bir mesaj grntlemek iin
kullanr.
4. Modify > Frameset > Edit NoFrames Content komutunun yannda onay iareti
Belge penceresi, NoFrames ieriini gizleyecek ekilde deiecek ve frameset belgesinin

normal grnmne geri dnecektir.
NoFrames ieriini dzenlemeyi tamamladktan sonra pencereyi kapatmak
isteyebilirsiniz, nk orijinal belgeyi gremezsiniz. Pencereyi kapatrsanz,
frameseti ve btn frame sayfalarn kapatm olursunuz. Bu durumda, eer
dzenlemeye devam etmek istiyorsanz bunlar tekrar amanz gerekir.
5. File > Save All komutunu sein ve btn belgelerinizi kapatn.
Frame Oluturmak 375
Framelerle Tek Banza aln

Frameler uygun ekilde kullanldnda bir Web gelitirme arac olarak ok faydal
olabilirler.
Sitenizi gzden geirin ve frame kullanmann gerekip gerekmeyeceini ya da ktphane
eleri (Ders 12de greceiz) ya da ablonlar (Ders 13te greceiz) gibi dier elemanlarn
salad ilevleri elde edip edemeyeceinizi dnn. lave uygulama yapmak isterseniz
sitenizin belirli bir blmnn iki versiyonunu (biri frameli, dieri de framesiz olmak
zere) oluturabilir ve bunlar karlatrabilirsiniz.
Framelerle sayfa gelitirirken, Dreamweavern sizden dahil etmenizi istedii eriilebilirlik
seeneklerini kullanmay unutmayn ve frame tabanl Web sayfalarn grntleyemeyen
tarayclar ya da cihazlar iin NoFrames ieriini oluturmay asla ihmal etmeyin. Eer
sayfalarnzn iki versiyonunu hazrlyorsanz, u noktalar dikkate alarak bu versiyonlarn
her birinin kullanlabilirlik dzeyini karlatrn:
Gezinti kolayl
Devamll salama
Web taraycsnn ilevsellii
Ne rendiniz?
Belgenizdeki framelerin yerleim dzenini tanmlamak iin bir frameset oluturdunuz

(Sayfa 353357).
Bir frameseti kaydettiniz ve dier frameleri tek tek kaydetmeye ek olarak, bunlarn
hepsini tek bir seferde nasl kaydedeceinizi rendiniz (Sayfa 357359).
nceden tanmlanm framesetleri kullanarak frameler ve yuvalanm frameler
oluturup sayfanzn yerleim dzenini deitirdiniz (Sayfa 357361).
Properties denetisini kullanarak frameleri yeniden boyutlandrdnz (Sayfa 359363).
Frames panelini ve Properties denetisini kullanarak, frameset ve frame zelliklerini
deitirdiniz (Sayfa 363366).
Elemanlar dorudan framelere ekleyerek ve mevcut belgeleri framelerde aarak
framelerin iinde belgeler oluturdunuz (Sayfa 369371).
Sayfalarn nerede grneceini belirleyerek frame ieriini baka framelere
ynlendirdiniz (Sayfa 371374).
Frameleri grntleyemeyen tarayclar iin NoFrames ierii oluturdunuz
(Sayfa 374376).
376 DERS 10
11
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 e-posta
adresine ya da kendilerini ileyecek bir uygulamaya gnderilir. Formlarn ilenmesi,
Bu projede eitli metin alanlar, onay kutular, radyo
dmeleri, Submit (Gnder) ve Reset (Sfrla) dmeleri
ve men ieren bir form oluturacaksnz.
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 derste ziyaretilerin grecei
bir form oluturacaksnz. Dinamik sayfalar ya da CGI kullanmayacanz iin bu dersi
tamamlamak iin bir sunucu eriiminizin olmas gerekmeyecek.
Bu derste elde edilen sonucu grmek iin Lesson_11_Forms/Completed/Training
klasrndeki training.html dosyasn an.
Neler reneceksiniz?
Bir Web sayfasnda form oluturacaksnz.

Form ieriini gruplara bleceksiniz.
Eriilebilir formlar oluturacaksnz.
Tek satrl metin alanlar ekleyeceksiniz.
ok satrl bir metin alan ekleyeceksiniz.
Onay kutular ekleyeceksiniz.
Radyo dmeleri ekleyeceksiniz.
Liste/men eleri ekleyeceksiniz.
Gizli alanlar ekleyeceksiniz.
Dmeler ekleyeceksiniz.
CSS kullanarak bir formu biimlendireceksiniz.
Bir srama mens oluturacaksnz.
Bir formu test edeceksiniz.
Yaklak Sre
Ders Dosyalar
Balang Dosyalar:
Lesson_11_Forms/training/training.html
Tamamlanm Proje:
Lesson_11_Forms/Completed/training/training.html
378 DERS 11
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. Bu uygulamada form
alann oluturacaksnz.
1. Lesson_11_Forms/Training klasrndeki training.html belgesini an. Ekleme
noktasn Yoga Teacher Certification Program Application metninin altndaki
bo paragrafn iine yerletirin. Insert ara ubuunun Forms kategorisindeki
Form dmesine tklayn.
Insert > Form > Form komutunu kullanarak da form ekleyebilirsiniz.

Forms kategorisi
Form dmesi
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. Form alannn bykl, forma koyduunuz elemana
baldr ve ierii kapsayacak ekilde yatay (tam genilikte) ve dey ynde (ierik sacak
ekilde) byr. Sayfaya yerletirdiiniz form, tayc elemann (bu bir div, bir tablo hcresi
ya da sayfann kendisi olabilir) tm geniliini kaplayacak kadar geniler.
Krmz noktal izgiler form tarafndan igal edilen

alan belirtmektedir.
Form Oluturmak 379
Eer grnmez elemanlar etkin deilse bir mesaj kutusu belirecek ve formu
gremeyeceinizi belirtecektir. OK dmesine tklayarak mesaj kutusunu
kapatn ve View > Visual Aids > Invisible Elements komutunu seerek formun
krmz noktal snrlarn grntleyin. Eer grnmez elemanlar etkin
durumdaysa bu uyar mesajn grmezsiniz. Dreamweavern Preferences
iletiim kutusunda yer alan Invisible Elements kategorisindeki Form delimiter
seeneinin de iaretli olmas gerekir. Bu seenek varsaylan durumda
iaretlidir.
Bir sayfaya birden fazla form yerletirebilirsiniz. Ancak HTMLde bir formu dier
bir formun iine yerletiremezsiniz. Bu kstlamadan dolay Dreamweaver formlarn
yanllkla i ie yerletirilmesini engeller. Bunu da bir formun dier formun iine
yerletirilmesini imknsz klarak gerekletirir. Form ekleme seenei iptal edilmez, ama
bir formu dier bir formun iine yerletirmeye kalktnzda bu ilem gereklemez. Form
etiketlerinin baka bir forma elle eklenmesi durumunda Dreamweaver hatal etiketleri
vurgulayarak dikkatinizi hatann bulunduu konuma eker.
2. Krmz noktal izgiye tklayarak formu sein.
Eer ekleme noktas formun iindeyse, formu semek iin Etiket Seiciyi de
kullanabilirsiniz.
Properties denetisi, form zelliklerini grntleyecek ekilde deiecektir.

Eer Properties denetisi grnr durumda deilse, Window > Properties
komutunu sein.
3. Properties denetisinde yer alan Form metin alanndaki varsaylan isim olan
form1in yerine training yazn.
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.
380 DERS 11
4. Ekleme noktasn forma yerletirin ve Insert > Table komutunu sein. Tablonun
satr saysn (Rows) 3, stun saysn da (Columns) 1 olarak ayarlayn. Tablo
genilii deeri (Table width) yzde (percent) 90 olmaldr. Border thickness
deerini 0, Cell padding deerini 0 ve Cell spacing deerini de 10 olarak
ayarlayn. Header mensnde None seeneini iaretleyin ve OK dmesine
tklayn.
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.
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. Bu derste oluturduunuz form blme ayrlabilir: Contact Information,
Experience and Interests ve Send Your Answers. 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.
1. Ekleme noktasn nceki uygulamada oluturduunuz tablonun ilk satrna
yerletirin. Insert ara ubuunun Forms kategorisinde yer alan Fieldset
dmesine tklayn.
Fieldset
Fieldset iletiim kutusu alacaktr.
Form Oluturmak 381
2. Legend metin alanna Contact Information yazn ve OK dmesine tklayn.
Bir alan kmesi, kullanabilecei btn alan kaplayacak kadar geniler. nceki
uygulamada oluturduunuz tablonun en stteki hcresi alan kmesinin snrlarn
oluturma ve yerleimi kontrol etme grevini stlenir. 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.
3. Ekleme noktasn ikinci satra yerletirin ve Insert ara ubuundaki Fieldset
dmesine tklayn. Legend metin alanna Experience And Interests yazn ve
OK dmesine tklayn.
Bir alan kmesi iin belirlediiniz not, gsterge (legend) olarak da bilinir. Bu e, blmle
ilgili bir aklama olarak grev yapar (ieriin tanmlanmas iin kullanlan bir yntem).
Kendi formlarnzda alan kmeleri iin gsterge olutururken olabildiince ak ifadeler
kullann. Bu notlarn alan kmelerinin ieriini tam olarak yanstmas gerekir.
4. Ekleme noktasn nc satra yerletirin ve Insert ara ubuundaki Fieldset
dmesine tklayn. Legend metin alanna Send Your Answers yazn ve OK
dmesine tklayn.
Alan kmesi, ieriini soluk gri bir izgiyle evreler.

Bir sonraki uygulama iin bu dosyay ak brakn.

382 DERS 11
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 Yes ve No seeneklerini ieren bir uyar kutusu
grntleyerek bir form etiketi (form tag) eklemek isteyip istemediinizi sorar. No
derseniz ilgili alan ya da dmeler herhangi bir formun bir paras olarak ilev grmez.
1. training.html belgesinde ekleme noktasn Contact Information metninin iine
yerletirin. Etiket Seiciyi kullanarak <legend> etiketini sein, sa ok tuuna bir
kez basn ve Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Form nesnelerinin alan kmelerine eklenmesi gerekir (ama gstergenin iine deil).
Ekleme noktasn gstergenin sonuna ekler ve Return tuuna basarsanz, ikinci bir legend
etiket grubu oluturulur. kinci bir legend etiket grubu olmamaldr.
Form Oluturmak 383
2. Insert ara ubuunun Forms kategorisinde yer alan Text Field dmesine
tklayn.
Bunun iin Insert > Form > Text Field komutunu da kullanabilirsiniz.
Text Field dmesi
Input Tag Accessibility Attributes iletiim kutusu alacaktr.
Eriilebilir formlar oluturmak daha fazla ziyaretiye ulamanz salar. Ekran okuyucu
gibi yardmc teknolojiler kullanmak zorunda olan kullanclar iin eriilebilir nitelikler
kullanmak nemlidir. Eer formunuzda bu nitelikler yoksa, baz ziyaretilerin formunuzu
doldurmas zorlaabilir. Varsaylan durumda Dreamweaver form eklerken eriilebilirlik
zelliklerini dahil etmeniz gerektiini size bildirecektir.
Eer Dreamweaver Input Tag Accessibility Attributes iletiim kutusunu
otomatik olarak amazsa, form nesneleri iin eriilebilirlik zelliklerini
etkinletirmeniz gerekebilir. Bunun iin Dreamweaver > Preferences
(Macintoshta) ya da Edit > Preferences (Windowsta) komutunu sein.
Accessibility kategorisine gein ve Form objects onay kutusunu iaretleyin.
Sonra da OK dmesine tklayn.
384 DERS 11
3. Label metin alanna Full Name: yazn.
Notlar (labels) form nesnelerinizin (metin alanlar, onay kutular, vs) ne amala
kullanldn ak olarak tanmlayan bilgileri ierir. Bylece ziyaretileriniz bu alanlara
hangi bilgiyi gireceklerini bilir. Notlarla tanmlamadnzda formlar kafa kartrabilir.
Not, hem ilgili metin alannn grsel bir aklamas olarak belge penceresinde, hem de bir
nitelik olarak metin alann tanmlayan HTML kodunda yer alr. Mmkn olan her yerde
ksa ve aklayc notlar kullanmaya aln.
4. Style blmnde Wrap with label tag seeneini iaretleyin. Position
blmnde Before form item seeneini iaretleyin. Access key ve Tab index
metin alanlarn bo brakn.
Wrap with label tag seenei, form nesnelerini bir not etiketiyle evreler. Bu seenei
kullandnzda form nesnesi her zaman belge penceresindeki metin notunun yannda
kalacaktr. Eer form nesnesi tanrsa, bu seenek onun not etiketinden ayrlmasn nler.
Bu seenei kullanmadnzda ekran okuyucu kullanan ziyaretiler asndan cidd bir
karklk sz konusu olabilir. nk bu durumda not, tanan form nesnesiyle artk
ilikili olmaz. Kodda, bu yntemle oluturulan bir metin alan belirecektir:
<label>Full Name: <input type=text name=textfield /></label>.
Attach label tag using for attribute seenei, karlk gelen metin alanyla tanmlanan
(bir id araclyla) bamsz bir not oluturur. Bu seenei kullandnzda, form
Form Oluturmak 385
nesnesini belge penceresinde kendisini aklayan metinden ayrabilirsiniz. Byle bir ileme,
yerleim dzenini ayarlamak amacyla gerek duyulabilir. Bu yntem daha esnektir, nk
form nesnesinin kendine karlk gelen metinden ayrlp ayrlmamasna bal olmakszn
almaya devam eder.
Hangi Style yntemini kullanacanza karar veremiyorsanz bunu sein. Kodda, bu
yntemle oluturulan bir metin alan belirecektir: <label for=textfield> Full Name:
</label> <input type=text name=textfield id=textfield />.
No label tag seeneini iaretlediinizde Label (Not) seenei kullanlmaz. Bu seenei

kullanrsanz, daha sonra Insert ara ubuunun Forms kategorisinde yer alan Label
dmesini kullanarak notlar ekleyebilirsiniz. Kullanabileceinizi iki ilve eriilebilirlik
nitelii daha vardr.
Access Key: Access key metin alann kullanarak belirli bir form nesnesi iin bir
klavye ksayolu oluturabilirsiniz. Bunu, ziyaretilerin Option (Macintoshta) ya da
Alt (Windowsta) tuuyla birlikte kullanabilecei bir karakter belirleyerek yaparsnz.
Ziyaretiler bir nesneden sonraki nesneye gemek iin Tab tuunu kullanabilir, ama eriim
tular (Access keys) sayfadaki herhangi bir form nesnesine ok daha hzl bir ekilde
gemenizi salar. Eriim tular olutururken standart klavye ksayollaryla uyumazlk
yaratabilecek karakterleri kullanmamaya zellikle dikkat edin. Eriim tular kullanrsanz,
ziyaretileriniz iin formun st ksmnda ya da bir alr pencerede (Ders 8de grmtk)
gereken aklamalar sunmanz ve ilgili metin alannn yannda klavye ksayolunu vermeniz
iyi olacaktr. Klavye ksayollarn gsteren ifadeler olabildiince ak olmal ve dikkat
ekmemelidir. Macintoshta klavye ksayollar men elerinin yannda ilgili deitirici tuu
gsteren bir simgeyle birlikte listelenir. Windowsta ise ilgili karakterin alt izilerek bunun
bir ksayol olduu gsterilir. Hangi yntemi kullanrsanz kullann, tutarl ve anlalr olun.
Ayrca ziyaretilerinizin aklamalarla ya da Yardm bilgisini kullanarak bu konuyla ilgili
aklamalara eriebilmesini salayn.
Tab Index: Pek ok Internet kullancs form doldururken Tab tuunu kullanr. Tab tuu,
hzl bir ekilde etkinlik durumunu (odak) bir form nesnesinden dierine geirmeyi ya da
bir form nesnesinden dier bir form nesnesine balanmay salar. Tab tuunun etkinlik
durumunu deitirme sras nesnelerin ve balantlarn kodda grnd sraya baldr.
Etkinlik durumunun deime sras genellikle beklediiniz ekilde gereklese de bir formun
grsel yerleimi, grlen sra bu nesnelerin koddaki asl srasndan farkl olacak ekilde de
sunulabilir. Byle durumlarda Tab Index alann kullanp form nesnelerine saylar atayarak
etkinlik durumu srasn belirlemeniz, formda ilerlerken ziyaretilerin iini kolaylatrabilir.
Alternatif olarak Tab Index zelliini sadece gereken alanlar iin ayarlayabilirsiniz. Bir Tab
Index belirlerken 1 saysyla balamanz, ardndan 2 saysn kullanmanz ve bu ekilde
devam etmeniz gerekir. Bu ilemde herhangi bir sayy atlamayn.
386 DERS 11
Form nesneleri eklerken eriilebilirlik zelliini kullanmayacaksanz, sizden bir

not tanmlamanz istenmeyecektir. Belge penceresine form nesnesi iin bir not
ekleyebilirsiniz. Ancak bu metin, siz <label> ve </label> etiketlerini elle koda
eklemedike ya da Insert ara ubuunun Forms kategorisinde yer alan Label dmesini
kullanmadka <label> ve </label> etiketlerinin iine alnmaz.
5. OK dmesine tklayarak metin alann ekleyin.
Tek satrl metin alan, metin notuyla birlikte forma eklenecektir. Her ikisinin de otomatik
olarak seili olduuna dikkat edin.
6. Belge penceresinde, sanda bir yere tklayarak metin alannn ve notun
seimini kaldrn. zerine tklayarak sadece metin alann sein. Properties
denetisindeki TextField metin alannda yer alan varsaylan textfield metninin
zerine fullName yazn.
Btn alanlarda isim kullanmak gerekir. Dreamweaver otomatik olarak

saysal bir srayla genel tipte isimler atar: textfield, textfield2, vs. form
gnderildiinde metin alannn ad, bu alana girilen bilgiyi tanmlar. Burada
fullName, sz konusu alana girilen bilginin ziyaretinin tam ad olduunu
belirtir.
simlerde boluk veya zel karakterler kullanmayn. Unutmayn ki bu isimler scriptlerle

(CGI scriptleri ya da JavaScript gibi) kullanldnda BYK/kk harf duyarll
nemli hale gelir.
Btn alanlar ksa ve aklayc bir ekilde adlandrmak ok nemlidir. Bir sayfada
yanlarnda notlaryla birlikte iki tane metin alan olduunu ve bu alanlardan birine ev
numarasnn, dierine de i numarasnn girilmesi gerektiini dnn. Eer bu alanlar
textfield ve textfield2 eklinde adlandrlrsa bu isimler hangi alana ev numarasn,
hangisine i numarasn girmek gerektii konusunda bir ipucu vermezler. Dier taraftan,
alanlara daha aklayc isimler vererek (inumaras ve evnumaras gibi) karklklar
nleyebilirsiniz. Ziyaretiler alan isimlerini grmez ve bu isimlerden etkilenmez. Alanlar
adlandrmak sizin ve Web ekibinizin iyilii iindir.
7. Metin alan form nesnesi seili durumdayken Properties denetisindeki Char
Width metin alanna tklayn ve 40 yazn. Return (Macintoshta) ya da Enter
Form Oluturmak 387
Char width (karakter genilii), metin alannda grntlenecek olan grnr karakter
saysdr. Metin alannn genilii kullanlabilir alan byterek yaklak 40 karakter
grntleyebilir. Metin alannn balangtaki genilii yaklak 24 karakterdir. Metin
alannn asl boyutlar, ilgili metin alan iin kullanlan metnin byklne bal olarak
taraycdan taraycya farkllk gsterir. Bu da CSS araclyla tanmlanabilir veya Web
taraycsnn varsaylan deerleri kullanlabilir. Metin alannn ykseklii de metin
byklne baldr.
Bir metin alan seili durumdayken Properties denetisindeki Class
mensnden istediiniz stili seerek bu metin alanna bir CSS stili
uygulayabilirsiniz.
8. Metin alan form nesnesi seili durumdayken Properties denetisindeki Max
Chars metin alanna tklayn ve 50 yazn. Return (Macintoshta) ya da Enter
Max Chars (maksimum karakter seenei), ziyaretinin girebilecei toplam karakter

saysn snrlar. Balangta bu metin alan botur ve ziyaretinin girebilecei karakter
says snrszdr.
Eer Max Chars deeri Char width deerinden bykse, ziyaretiler yazmaya devam
edebilir ve ziyareti grnr alann dnda yazarken metin, alan iinde sola doru kayar.
Kaydrlabilir alan Max Char deerinde sona erer.
Eer formunuz bilgileri bir veritabanna gnderiyorsa, maksimum karakter
deerinin, veritabannda buna karlk gelen alann maksimum deeriyle ayn
olduundan emin olmanz gerekir.
9. Ekleme noktasn belge penceresindeki Full Name notunun zerine yerletirin.
Etiket Seicide <label> etiketini sein, sa ok tuuna bir kez tklayn ve Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn. Insert ara ubuunda
yer alan Text Field dmesine tklayn ve Input Tag Accessibility Attributes
iletiim kutusundaki Label metin alanna Email: yazn. Style alannda Wrap
with label tag seeneinin, Position alannda da Before form item seeneinin
iaretli olduundan emin olun, dier alanlar bo brakn ve OK dmesine
tklayn. Metin alann sein ve Properties denetisini kullanarak alann adn
email, Char width deerini 40 ve Max Chars deerini de 70 olarak ayarlayn.
Return (Macintoshta) ya da Enter (Windowsta) tuuna basarak veya belge
penceresinin iine tklayarak bu deiiklikleri uygulayn.
Bu alan ziyaretinin e-posta adresini almak iin kullanlacaktr.

Yeni bir paragraf nceki form nesnesini evreleyen <label> etiketlerinin dnda
oluturmak nemlidir. Aksi takdirde yeni form nesnesi nceki nesnenin label (not)
etiketleri iinde yer alr ya da etiketler st ste binebilir veya baka zorluklar kabilir.
388 DERS 11
Etiket Seicide <label> etiketlerini setikten sonra ok tularn kullanp bu etiketlerin

dna karak bu durumu nleyebilirsiniz. Bu admda zaten bunu uygulamtnz. Bu
nesneleri eklerken Split grnmn kullanmak iinizi kolaylatrabilir.
E-posta adresi ve URL gibi bilgilerin girildii alanlar iin Max Char deerini
ayarlarken dikkatli olun. Ziyaretiler, girecekleri bilginin karakter says Max
Char deerinden daha bykse URLi ya da ilgili bilgiyi tam olarak yazamaz,
nk sizin belirlediiniz deerden daha fazla karakter giremezler.
10. email metin alan seili durumdayken Properties denetisindeki Init val metin
alanna Enter Your Email Address yazn.
Init val ya da balang deeri (initial value), ziyareti sayfay yklediinde ilgili metin
alannda belirecek olan metni ayarlamanz salar. Init val seenei, ziyaretiye kendisinden
istenen bilgiyle ilgili bir rnek grntleyerek yardmc olabilir. Ziyaretiler balang
deerini kendi yazdklar metinle deitirebilir. Balang deerlerinden, ziyaretilerden
bilgi girmelerini istemek veya rnek metinler grntlemek iin faydalanabilirsiniz. Her ne
kadar ziyaretiler bu metni deitirebilseler de, bu seenei dikkatli kullann. nk formu
hemen doldurup gemek isteyen ziyaretiler, iinde metin bulunan bir alan, daha nce
doldurmu olduklarn dnerek kolayca atlayabilirler. Balang deerleri ziyaretilerin
atlayp gemesi durumunda sorun yaratabilir. nk bu deerlerin bulunduu alanlar
doldurulmu gibi durur.
11. Ekleme noktasn belge penceresindeki Email notunun zerine yerletirin.
Etiket Seicide <label> etiketini sein, sa ok tuuna bir kez tklayn ve Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn. Insert ara ubuunda
yer alan Text Field dmesine tklayn ve Input Tag Accessibility Attributes
iletiim kutusundaki Label metin alanna Phone: yazn. Style alannda Wrap
with label tag seeneinin, Position alannda da Before form item seeneinin
iaretli olduundan emin olun, dier alanlar bo brakn ve OK dmesine
tklayn. Metin alann sein ve Properties denetisini kullanarak alann adn
Phone, Char width deerini 40 ve Max Chars deerini de 50 olarak ayarlayn.
Return (Macintoshta) ya da Enter (Windowsta) tuuna basarak veya belge
penceresinin iine tklayarak bu deiiklikleri uygulayn. Dosyay kaydedin ve
Web taraycsnda nizleyin.

Form Oluturmak 389
Normal bir metin alan Web taraycsnda girdiiniz metni siz yazarken grntler.
ifre iin kullanlan metin alan da dier metin alanlarna benzer, ancak buradaki
metin, siz yazarken ekranda madde imleri veya yldz eklinde grntlenir.
Password (ifre) seenei alandaki metni sadece, siz yazarken tepenizde birileri
varsa onlarn grmesini engellemek iin gizler. Verileri ifreleme veya koruma gibi
bir ilem yapmaz. Verileri ifrelemek iin Web sunucunuzda bir gvenli sunucu
yazlmnn alyor olmas gerekir. SSL (Secure Sockets Layer) ile veri
gvenliini salama konusuyla ilgili ayrntl bilgi almak iin, birlikte altnz
Web sorumlusuyla ya da sistem yneticisiyle konuabilirsiniz. Bir ifre alan
oluturmak isterseniz, standart bir tek satrl metin alan ekleyin ve Properties
denetisindeki Type alannda Password seeneini iaretleyin. Bu seenek,
ziyareti sz konusu alana giri yaparken ekranda yldz iaretlerinin ya da madde
imlerinin grntlenmesini salar. Password seeneinin kullanld metin
alanlar sadece tek satrl metin alan tipinde olabilir. Max Chars deeri,
sunucunuzdaki ifre snr deerine eit olacak ekilde ayarlanmaldr.
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. Buradaki uygulamada tabloya bir radyo
dmesi grubu ekleyeceksiniz.
1. Ekleme noktasn belge penceresinde Phone notunun bulunduu konuma
yerletirin. Etiket Seicide <label> etiketini sein, sa ok tuuna bir kez basn ve
ardndan Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Bir sonraki admda bu yeni paragrafa birka radyo dmesi ekleyeceksiniz.

2. Insert ara ubuunun Forms kategorisinde yer alan Radio Group dmesine tklayn.
Ayn ilemi Insert > Form > Radio Group komutunu kullanarak da
gerekletirebilirsiniz.
Radio Group iletiim kutusu alacaktr.
390 DERS 11
3. Radio Group iletiim kutusunda Name metin alanna contact yazn.
Radyo dmeleri kullanrken ayn gruptaki her bir radyo dmesi iin ayn ad
kullanmanz gerekir. Radyo dmeleri, sadece tek bir seenein iaretlenmesine izin
verildiini gsterir.
Radyo dmelerini birer birer ekliyorsanz (Insert ara ubuundaki Radio
Button dmesini ya da Insert > Form > Radio Button komutunu kullanarak),
hepsine ayn ismi vererek bu dmeleri ayn grubun birer paras haline
getirebilirsiniz. Birden fazla radyo dmesi iin ayn ismin kullanlmas, bu
dmelerin ayn gruba dahil olduunu gsterir. Eer isimler ayn deilse radyo
dmeleri farkl gruplar olarak deerlendirilir ve radyo dmeleri kullanmann
bir anlam kalmaz. Tek bir radyo dmesi de ekleyebilirsiniz. Ama ziyaretinizin
dmeye tkladktan sonra bu dmenin seimini kaldrmas iin tek yolun
formu sfrlamak olduunu unutmayn. Bu durumda ziyaretinin daha nce
dier form nesnelerine yazarak girdii ya da setii bilgiler de silinecektir.
CGI ve JavaScript ile birlikte kullanldnda form nesnelerinin isimlerinin BYK/

kk harfe duyarl hale geldiini de unutmayn. rnein bu durumda contact ile
Contact ayn olmayacaktr.
4. Radio Buttons listesinde ilk Radio rneine tklayn ve bu metni Email ile
deitirin. Buna karlk gelen Value metin alannda da ayn ismi kullann.
Radio szcnn ikinci rneine tklayn ve bunu da Phone ile deitirin.
Buna karlk gelen Value metin alannda da ayn ismi kullann.
Varsaylan durumda her grup (Radio Group) en az iki radyo dmesi ierir. stediiniz
kadar radyo dmesi ekleyebilirsiniz. Label ya da Value listesindeki bir rnee
tkladnzda ilgili metin vurgulu hale gelir ve bu metni deitirebilirsiniz.
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.
5. Lay Out Using alannda Line breaks seeneini iaretli olarak brakn ve OK
dmesine tklayarak Radio Group iletiim kutusunu kapatn. En son radyo
dmesinin altnda beliren satr sonunu silin.
Line breaks seenei radyo dmelerini belgenize her bir giri ayr bir satrda olacak ekilde
yerletirir. Table seenei ise, her bir giri ayr bir satrda olacak ekilde bir tablo ekler.
Form Oluturmak 391
6. Sayfay Web taraycnzda nizleyin ve radyo dmelerini her birine tklayarak

test edin.
Semek zere bir radyo dmesine tkladnzda dier radyo dmesinin seiminin
kaldrlmas gerekir. Bunu grmek iin dosyay Web taraycnzda nizlemeniz gerekir.
Form nesneleri Dreamweavern belge penceresinde seilmi ya da iaretlenmi olarak
grnmez.
training.html belgesini kaydedin ve bir sonraki uygulama iin ak brakn.
392 DERS 11
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. imdiki
uygulamada bir dizi onay kutusu ekleyeceksiniz.
1. Ekleme noktasn, Experience And Interests gstergesinin iine yerletirin,
Etiket Seicide <legend> etiketini sein. Sa ok tuuna bir kez basn ve
ardndan da Return (Macintoshta) ya da Enter (Windowsta) tuuna basn. I am
interested in specific training segment(s): yazn. Shift+Return (Macintoshta)
ya da Shift+Enter (Windowsta) tularna basarak metinden sonra bir satr sonu
ekleyin. (check all that apply) yazarak bunun sonuna da bir satr sonu ekleyin.
Ders 2den de hatrlayacanz gibi satr sonu, ekleme noktasn bo bir satr eklemeden bir
sonraki satra gtrr (normal bir paragraf sonunun yapt gibi).
2. Insert ara ubuunun Forms kategorisinde yer alan Checkbox dmesine
tklayn.
Ayn ilem iin Insert > Form > Check Box komutunu da kullanabilirsiniz.
Checkbox dmesi

3. Label metin alanna Anusara Yoga Immersion yazn. Style blmnde Wrap
with label tag seeneini ve Position blmnde de After form item seeneini
iaretleyin. Dier alanlar bo brakn ve OK dmesine tklayn.
Forma, ilgili not metniyle birlikte bir onay kutusu eklenecektir.

4. Sadece onay kutusunu sein. Properties denetisinde yer alan CheckBox
name metin alanndaki checkbox metninin yerine segment yazn. Checked
Value metin alanna immersion yazn.
Hem not, hem de onay kutusu seiliyse, Properties denetisinde onay

kutusu zellikleri grntlenmez.
Form Oluturmak 393
Bir ziyareti Anusara Yoga Immersion onay kutusunu iaretlerse immersion deeri buna
karlk gelen onay kutusunun seili durumda olduunu gsterir ve segment deeri, onay
kutusu grubunu tanmlar. Bir dizi onay kutusuna ayn ismi vererek bunlar bir grup olarak
tanmlayabilirsiniz. Bu onay kutularna ayr ayr anlalr ve doru deerler verdiinizden
emin olun.
5. Anusara Yoga Immersion notundan sonra gelen boluun arkasna bir satr
sonu ekleyin. kiden bee kadar olan admlar tekrarlayarak yeni onay kutular
oluturun ve bunlarn not metinlerini In-Depth Asana Training & Practice,
Yoga Philosophy Series ve Satsang: Kirtan, Meditation and Discussion
olarak ayarlayn. Her onay kutusu ve her onay kutusuna ait not kendi satrnda
olmaldr. Properties denetisinde yer alan CheckBox name metin alanndaki
checkbox yazsn btn onay kutularnda segment ile deitirin. Her bir
Checked Value metin alanna srasyla asana, philosophy ve satsang yazn.
Ekleme noktasn notlardan sonra gelen boluun arkasna yerletirmek nemlidir. nk

ekleme noktas, onay kutusu ve metni evreleyen label etiketinin dna yerletirilecektir.
Bunu Etiket Seiciye bakarak kontrol edebilirsiniz. <p><label> dizisi etiket hiyerarisinin
sonunda (sada) yer alyorsa ekleme noktas hl label (not) etiketlerinin arasnda
demektir ve onu tamanz gerekir. Burada sadece <p> etiketini grrseniz, bir sonraki
onay kutusu iin satr sonunu eklemeye hazrsnz demektir.
Ekleme noktasnn bulunduu konuma ait kod hiyerarisindeki en son etiket, Etiket
Seicinin en sanda grntlenir. Etiket Seici hiyerarisi her zaman <body> etiketiyle
balar. Eer etiket hiyerarisi, tamam grntlenemeyecek kadar uzunsa Etiket Seicinin
sol tarafnda (ba taraf) <body> etiketini gremeyebilirsiniz. Daha sonra eklenen etiketlere
yer amak iin Etiket Seicideki etiketler sol tarafta gzden kaybolmaya balar. Dier
etiketleri de grmek isterseniz, belge penceresini genileterek Etiket Seiciye biraz daha
yer kazandrabilirsiniz.
Tablo, siz form nesneleri eklemeye devam ederken ieriine yer amak zere aaya
doru byyecektir. Bu durumda formun krmz noktal izgisi tabloyu rtyormu
gibi grnebilir ve tablonun alt ksmyla birlikte aaya doru inmeyebilir. Bu durumla
karlarsanz, belge penceresinde tablonun dnda bir yere tklayarak Dreamweavern
grnty tazelemesini salayn.
6. Sayfay Web taraycnzda nizleyin ve her birine tek tek tklayarak onay
kutularn test edin.
Belgeniz burada gsterilen rnee benzeyecektir.
394 DERS 11
Liste ve Men eleri Eklemek

Kaydrlabilir bir liste (scrolling list) ya da men oluturarak ziyaretilerin buradaki
elerin arasndan seim yapmasn salayabilirsiniz. Kaydrlabilir bir listeyle
ziyaretilerinize birden fazla bitiik ya da bitiik olmayan eyi seme imkn
tanyabilirsiniz. Menlerde ziyaretiler tek bir seim yapabilir. Bunlarn her ikisinde de,
ziyaretinin setii eler vurgulu hale gelir.
1. Experience and Interests alan kmesinin iinde Satsang onay kutusunu
evreleyen label etiketinden hemen sonra Return (Macintoshta) ya da Enter
(Windowsta) tuuna basn. Insert ara ubuunun Forms kategorisinde yer alan
List/Menu dmesine tklayn.
Ayn ilemi Insert > Form > List/Menu komutunu seerek de

List/Menu dmesi

Form Oluturmak 395
2. Label metin alanna What type(s) of yoga have you studied and/or practiced?
yazn. Style alannda Wrap with label tag seenei, Position alannda da seenei
iaretli olmaldr. Geri kalan alanlar bo brakn ve OK dmesine tklayn.
Forma kk bir men ve buna karlk gelen not eklenecektir. Dreamweaver varsaylan
olarak bir alr men ekler.
3. Not metni ve mennn arasna bir satr sonu ekleyin. Sadece meny seerek
Properties denetisinde bununla ilgili seeneklerin grntlenmesini salayn.
Properties denetisinde List/Menu zellikleri grntlenecektir.
4. Properties denetisindeki Type alannda List seeneini iaretleyin ve Height

deerini 4 yapn. Selections alanndaki Allow multiple onay kutusunu iaretleyin.
Bylece eklediiniz nesnenin biimini kaydrlabilir bir liste olarak deitirdiniz. Form
nesnesini menden listeye dntrebilmeniz iin ykseklik (Height) seeneini 1den
byk bir deere ayarlamanz gerekir.
List ayar, menlerde olmayan ilve bir seenee daha sahiptir. Selections blmndeki
Allow multiple onay kutusunu kullanarak birden fazla seim yaplmasna izin verebilir ya da
vermeyebilirsiniz. Bu seenek varsaylan durumda iaretli deildir. Selections blmndeki
bu kutuyu iaretlerseniz, ziyaretiler Cmd (Macintoshta) ya da Ctrl tuunu (Windowsta)
basl tutup tklayarak bitiik olmayan birden fazla seenei iaretleyebilir. Ziyaretiler hem
Macintoshta, hem de Windowsta Shift tuunu basl tutup tklayarak bitiik birden fazla
seim yapabilir. Birden fazla seim yaplabilmesine izin verecekseniz, ziyaretilerinize birden
fazla seim yapabileceklerini (ve bunu nasl yapacaklarn) bildirmeniz iyi olacaktr. Pek ok
ziyareti bu komutlar bilemeyebilir. En iyisi, ziyaretilerinize sitenizle etkileime girmek
iin kullanabilecekleri bilgileri ve aralar salamaktr.
Height metin alanna grlmesini istediiniz satr saysn girerek kaydrlabilir liste iin bir
ykseklik deeri ayarlayabilirsiniz. Height deeri iin 1den byk bir say kullandnzdan
emin olun. Aksi takdirde kaydrlabilir liste bir men olarak grntlenecektir.
396 DERS 11
5. Properties denetisindeki List/Menu metin alannda yazan select szcn

yogaTypes ile deitirin ve ardndan List Values dmesine tklayn.
List Values iletiim kutusu alacaktr. Bu iletiim kutusu, hem liste, hem de men girileri
iin ayndr.
6. Item Label alanna Anusara yazn ve Tab tuuna basn. Value alanna anusara
yazn.
List Values iletiim kutusundaki en uzun e listenin ya da mennn geniliini belirler.

Bir listeyi ya da meny srkleme ya da boyutlarn tanmlama yntemiyle yeniden
boyutlandramazsnz.
7. Menye yeni bir seenek eklemek iin Tab tuuna basn ya da iletiim
kutusunun sol st kesindeki art iaretli dmeye (+) tklayn.
List Values iletiim kutusundan bir e silmek iin eksi iaretli dmeyi (-) kullanabilirsiniz.
8. Altnc ve yedinci adm tekrarlayarak listeye Ashtanga, Bikram, Dynamic
Hatha, Hatha, Integral, Iyengar, Kripalu, Vinyasa, Other Western-style ve Other
Eastern-style elerini ekleyin. Value alanndaki deerleri de her bir blge
adyla eleecek ekilde srasyla ashtanga, bikram, dynHatha, hatha, integral,
iyengar, kripalu, vinyasa, otherWest ve otherEast olarak deitirin.
Listenin srasn deitirmek isterseniz Value alannn stndeki ok dmelerini

kullanabilirsiniz.
Form Oluturmak 397
9. OK dmesine tklayarak iletiim kutusunu kapatn.
Listede yeni eklediiniz eleri grntlenecektir.

Properties denetisinde liste/men eleriyle ilgili Initially selected adnda ilve bir seenek
vardr. Sayfa yklendiinde seili halde grntlenmek zere listedeki elerden istediiniz
birini ayarlayabilirsiniz. Bu seenek kaydrlabilir listelerde pek tercih edilmeyebilir. Ama men
elerinin ilk satrnda Birini sein... gibi bir komutun ya da rnek bir seimin belirmesi
ziyaretiler asndan faydal olabilir.
Balangta seili halde grntlenmek zere bir e seerseniz, bunun seimini
dorudan kaldrmak iin kullanabileceiniz herhangi bir yntemin olmadn
unutmayn. Bu enin seimini kaldrmak isterseniz, List Values iletiim kutusunu
amanz, seilen eyi silmeniz ve tekrar listeye eklemeniz gerekir.
10. Listeden sonra bir satr sonu ekleyin ve (select the most appropriate optionsmake
multiple selections with Cmd-Click on the Macintosh and Ctrl-Click on Windows) yazn.
elerin seilmesiyle ilgili yardmc komutlar sunmak her zaman iin iyi bir alkanlktr.
Bu, zellikle birden fazla seim yapmay bilmeyen ziyaretiler iin ok faydaldr. Bylece
ziyaretilerinize kolaylk salam olursunuz ve ayrca ziyaretilerin formu eksiksiz olarak
doldurma ihtimali de artar.
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. Bu uygulamada formun iindeki
tabloya ok satrl bir metin alan yerletireceksiniz.
1. Ekleme noktasn liste kontrolnn altndaki metnin iinde herhangi bir yere
yerletirin. Etiket Seiciyi kullanarak <label> etiketini sein, sa ok tuuna bir kez
basn ve ardndan Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Ekleme noktas artk olmas gereken yerde, yani alan kmesinin iinde, fakat liste kontrolnn
dndadr.
2. Insert ara ubuunun Forms kategorisinde yer alan Textarea dmesine tklayn.
ok satrl bir metin alann Insert > Form > Textarea komutunu seerek de
ekleyebilirsiniz.
Textarea dmesi
398 DERS 11
Input Tag Accessibility Attributes iletiim kutusu alacaktr. Dreamweaverda ok satrl

bir metin alan textarea olarak adlandrlr.
3. Label metin alanna Have you had any teaching experience in general? Please
describe. yazn. Style alannda Wrap with label tag seeneinin, Position
alannda da Before form item seeneinin iaretli olmas gerekir. Geri kalan
alanlar bo brakn ve OK dmesine tklayn.
Belge penceresinde ok satrl bir metin alan ve buna karlk gelen not metni belirecektir.
4. Not metniyle ok satrl metin alannn arasna bir satr sonu ekleyin. ok satrl
metin alann sein.
Dorudan notla metin alannn arasna bir satr sonu eklemek iin metin
alann sein ve sol ok tuuna bir kez basn, sonra da satr sonunu ekleyin.
ok satrl bir metin alann setiiniz iin Properties denetisinde metin alan (Text Field)
zellikleri grntlenecektir.
Tek satrl bir metin alann seip ardndan Properties denetisindeki Type
alannda Multi line seeneini iaretleyerek bu alan ok satrl bir metin
alanna dntrebilirsiniz.
5. Properties denetisindeki TextField metin alanndaki textarea szcn
teachingExp ile deitirin. Char Width metin alanna 40 yazn.
ok satrl metin alanlar kullandnzda Properties denetisinde ilave bir seenek

grrsnz. Wrap mens sadece ok satrl metin alanlarnda kullanlabilir. Tek satrl
ve parola metin alanlarnda bu men seilemez durumdadr. Wrap mens, ok satrl
metin alanna girilen metnin grnr alana smamas durumunda bu metnin nasl
grntleneceini belirler. Bu uygulamada Wrap seeneini Default ayarnda brakn.
Wrap mensndeki seenekler unlardr: Default, Off, Virtual ve Physical.
Default seenei, taraycnn varsaylan ayarn kullanr. Type alannda Multi line
iaretlediinizde otomatik olarak bu seenek ayarlanr.
Off 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.
Form Oluturmak 399
Virtual seenei, metni blerek bir sonraki satrdan devam etmesini salar. Ama
szck sarma zellii, form gnderildii zaman verilere uygulanmaz.
Physical seenei, metni blerek bir sonraki satrdan devam etmesini salar ve szck
sarma zellii, form gnderildiinde verilere uygulanr.
6. Properties denetisindeki Num Lines metin alanna 4 yazn.
Bu seenek, kaydrlabilir alanda ka satrn grneceini bildirir. Ziyaretinin girecei

satr saysn snrlamaz. Ziyareti yaz yazarken ayarlanm olan deeri getiinde metin
yukarya doru kaydrlr.
7. Ekleme noktasn ok satrl metin alanna yerletirin ve Etiket Seicide
<label> etiketini sein. Sa ok tuuna bir kez basn ve ardndan da Return
(Macintoshta) ya da Enter (Windowsta) tuuna basn. kiden altya kadar olan
admlar tekrarlayarak ikinci bir metin alan oluturun. Not metni olarak `What
do you want to gain from this program? If you have specific goals or areas
of interest that you would like to explore, please explain. Please be specific
cmlelerini atayn. Dier eriilebilirlik seenekleri 3 numaral admdaki gibi
kalsn. Alan gain olarak adlandrn. nceki ok satrl metin alan iin 5 ve 6
numaral admlarda kullandnz nitelikleri ayarlayn.
Belgeniz burada grdnz rnektekine benzeyecektir.
8. Sayfay Web taraycnzda nizleyin ve farkl seenekleri iaretleyerek listeyi

test edin.

400 DERS 11
Dme Eklemek
Formlarda, biri form verisini gndermek (Submit-Gnder), dieri de formu temizlemek
(Reset) iin olmak zere genellikle iki dme kullanlr. Submit dmesi Web taraycsna
veriyi gndermesi gerektiini bildirir. Reset dmesi ise sayfadaki alanlarda bulunan btn
bilgileri siler.
Temel arama ilevi iin oluturulan bir formda genellikle sadece tek bir Submit
dmesi bulunur. Bu da ounlukla Search (Ara) ya da Go (Git) eklinde adlandrlr.
1. Ekleme noktasn, nc alan kmesinde bulunan Send Your Answers metninin
iine yerletirin. Etiket Seiciyi kullanarak <legend> etiketini sein, sa ok tuuna bir
kez basn ve ardndan Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Insert ara ubuunun Forms kategorisinde yer alan Button dmesine tklayn.
Ayn ilemi, Insert > Form > Button komutunu seerek de gerekletirebilirsiniz.

2. Label metin alann bo brakn ve Style alannda No label tag seeneini
iaretleyin. Position seeneklerinin mevcut ayarn deitirmeyin ve geri kalan
alanlar bo brakn. OK dmesine tklayn.
Forma bir Submit dmesi yerletirilecek ve Properties denetisinde dme zellikleri

grntlenecektir. Burada eriilebilirlik niteliklerini kullanmak gereksizdir; nk not,
dmenin zerinde yer almaktadr. Varsaylan olarak kullanlan dme Submit olduu iin,
bu dmeyle ilgili seeneklerde herhangi bir deiiklik yapmanz gerekmez.
3. Ekleme noktasn Submit dmesinin sana yerletirin. Insert ara ubuundaki
Button dmesine tklayn ve ikinci adm tekrarlayarak eriilebilirlik niteliklerini
Submit dmesi iin kullanlan deerlere ayarlayn.
Forma ikinci bir Submit dmesi yerletirilecektir. Aradaki tek fark, bu dmenin Submit2
olarak adlandrlmasdr, nk iki dme ayn isme sahip olamaz. Form nesnelerinde ayn
ismi sadece ayn grupta yer alan radyo dmelerinde ve ayn grupta bulunan onay kutularnda
kullanabilirsiniz. Bu uygulamada zerinde altnz dme farkldr, nk dier
dmelerle gruplanamaz ve bir sonraki admda greceiniz gibi kendi eylemini ierecektir.
4. kinci Submit dmesi seili durumdayken Properties denetisindeki Action
seenekleri arasndan Reset Formu sein.
Label metin alannda yer alan metin otomatik olarak Resete dnecektir. Bu dmenin eylemi,
btn metin alanlarnda, onay kutularnda ve radyo dmelerinde yaplan ayarlar sfrlar ve
bunlar orijinal durumlarna (sayfa Web taraycsna ilk yklendii zamanki durum) dndrr.
Form Oluturmak 401
Action blmndeki nc seenek Nonedr. Submit ve Reset seeneklerinden farkl

olarak None dme seeneine ilitirilmi bir eylem yoktur. Bu dme baka bir ilem
gerekletirmek iin bir scriptle birlikte kullanlabilir. rnein bir JavaScript rutini,
toplam ya da kazan hesab gibi ilemleri gerekletirmek iin kullanlabilir ve sonu
deerini ziyaretiye gnderebilir.
5. Label metin alannda Reset szcn Clear Form yazarak deitirin. Button
Name metin alannda varsaylan ismi reset olarak deitirin.
Dmeleri ak bir ekilde, ziyaretinin beklentilerini gz nne alarak adlandrmak

en iyisidir. Submit ve Reset, ziyaretilerin ne anlama geldiini bildii ve her yerde
kullanldklar iin standart haline gelmi form dmesi notlardr. Ziyaretiler formu
gndermeye kalktklarnda yanllkla tklamalarn nlemek iin Reset dmesini doru
drst bir konuma yerletirin ve not metninin aka grlmesine dikkat edin.
Insert ara ubuundaki Image Field dmesini kullanarak standart

dmelerin yerine resimlerden de faydalanabilirsiniz. Bunun iin ilgili resmi
bir form eleman olarak ekler ve koda da uygun deeri yerletirirsiniz
(value=Submit gibi). Dmelerin grnmn zelletirmek iin resim
kullanmak isteyebilirsiniz. Bu ekilde kullanlan btn resimlerin aka
dmeleri temsil ettiinden emin olmak gerekir.
Gizli Alanlar Oluturmak

Kimi zaman formunuza, ziyaretiler tarafndan grlmeyen ya da ziyareti tarafndan
doldurulacak baz bilgileri dahil etmeniz gerekebilir. Byle durumlarda Web taraycsnda
grntlenmeyen gizli alanlardan faydalanabilirsiniz. Gizli alanlar (hidden fields)
genellikle, formun ilenmesi iin (isim, sipari numaras ya da satlan rnle ilgili baka
bir bilgi almak, form bir e-posta adresine gnderilecekse bir e-posta adresi ve konu
bal eklemek, formu doldurduktan sonra ziyaretilerinizi ynlendirmek istediiniz bir
sayfann URLini 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. JavaScript
konusunu Ders 8de grmtk.
402 DERS 11
Form ilenmek zere gnderildiinde gizli alanlarla ilikilendirilmi herhangi bir script
kullanlmamsa, forma gmlen gizli alanlar, dier form nesnelerindeki deerler gibi dahil edilir.
1. Ekleme noktasn tablonun ikinci satrnn en altna yerletirin.
Ekleme noktas u anda Send Your Answers alan kmesini ieren hcrenin hemen stndeki
hcrede bulunmaktadr. Gizli alanlar belgede istediiniz yere yerletirebilirsiniz.
Ekleme noktas ikinci hcrenin alt ksmndaki satrda olduu iin artk Experience and
Interests yazsnn bulunduu alan kmesinin iinde deildir. Bu durum imdi yaptmz
uygulamada sorun yaratmaz, nk aadaki admlarda ekleyeceimiz gizli alan ziyareti
tarafndan grlmeyecektir. Burada yerleim nemli deildir.
2. Insert ara ubuunun Forms kategorisinde yer alan Hidden Field dmesine tklayn.
Hidden Field dmesi
Belgeye bir gizli alan eklenecektir. Gizli alan simgesi, (isimli yer imi simgeleri gibi) grnmeyen
elemanlar iin kullanlan grsel bir yardmcdr. Bu simge de Web taraycsnda grnmez.
Form Oluturmak 403
3. Gizli alan seili durumdayken HiddenField metin alanndaki varsaylan isim olan
hiddenfield webRequest yazarak deitirin. Properties denetisindeki Value
metin alanna true yazn.
Burada, bu formun baln gizli alan iin nceden tanmlanm bir deer olarak dahil
ediyorsunuz. Srekli sabit kalan bilgiler bu tr gizli alanlar vastasyla dinamik sayfalara
ve CGI scriptlerine aktarlabilir. Bu ekilde ayarlanan deerlerin kullanld gizli alanlar
ifrelenmez ya da gvenlik altna alnmaz. Bunlar Web taraycs araclyla belge kaynak
kodunda kolayca grlebilir. nemli bilgileri (ifre gibi) bu tr gizli alanlara yerletirmeyin.
Dinamik sayfalar ya da CGI scriptleri araclyla alann deeri dinamik olarak retilirken
gvenlik altna alnm gizli alanlar oluturulabilir.
Gizli alanlarn ismi ve deeri genellikle bunlar ilemek iin kullanlan scripte bamldr.
rnein veriyi bir e-posta adresine gnderen baz scriptler gizli alann ismi olarak alcy,
deer olarak da verinin gnderilmesi gereken e-posta adresini kullanabilir. Bu isim-deer
ifti, sunucunuzda alc alann ileyen script olmad srece bir ie yaramaz.
Formlarda kullanabileceiniz bir dier alan tipi de dosya alandr. Bir dosya
alan kullanarak ziyaretilerinizin formunuz araclyla size dosya
gnderebilmesini mmkn klarsnz. Bu zellik, formdaki verilerle ilgili
belgeleri almanz gerektiinde faydal olabilir. rnein ziyaretilerin CVlerini
gndermesini istediiniz bir i bavuru formunda bir dosya alan
kullanabilirsiniz. Dosya alanlar kullanldnda, formla alnan verilerin ilenmesi
ve dosyann yklenmesi ya da uygun bir konuma ynlendirilmesi iin
sunucudan destek alnr.
Formlar Biimlendirmek
Formlar sitenizin grnm ve genel yaps asndan daha uyumlu hale getirmek iin CSS
stillerinden (Ders 4te grmtk) faydalanabilirsiniz.
1. Ekleme noktasn ilk alan kmesindeki Contact Information gstergesinin iine
yerletirin. Etiket Seicide <fieldset> etiketini sein. CSS Styles panelindeki New
CSS Rule dmesine tklayn. Selector Type seenei olarak Tagi iaretleyin. Metin
alannda grnmyorsa, fieldseti semek iin Tag metin alannn sandaki meny
kullann. Define In blmnde This document only seeneini iaretleyin ve OK
dmesine tklayn. CSS Rule definition for fieldset iletiim kutusu alacaktr.
Formun farkl blmlerini evreleyen d hatlarn grnmn kontrol etmek amacyla

alan kmesi iin bir stil oluturabilirsiniz.
404 DERS 11
2. Category listesinde Box sein. Padding blmnde Top metin alanna 5 yazn
ve Same for all kutusunu iaretli olarak brakn.
Padding ayar, form nesneleri iin biraz boluk brakr. Bylece nesneler alan kmesi d
hattnn zerine gelmez.
3. Category listesinde Border sein. Style blmnde, Top mensnde solidi
iaretleyin ve Same for all kutusunu iaretli olarak brakn. Width blmnde
Top metin alanna 1 yazn, birim olarak pixels seeneinin iaretli olduundan
emin olun ve Same for all kutusunu iaretli olarak brakn. Color blmnde Top
metin alanna #CCCC99 yazn ve Same for all kutusunu iaretli olarak brakn.
OK dmesine tklayn.
Her alan kmesinin etrafnda birer kenarlk belirecektir.

Form Oluturmak 405
4. CSS Styles panelindeki New CSS Rule dmesine tklayn. Selector Type alannda
Tagi sein. Tag metin alannn sandaki meny kullanarak H5i sein ve Define
In alannda This Document Only seeneini iaretleyin. CSS Rule definition iletiim
kutusunda Type kategorisini sein ve renk seeneini #999999 olarak ayarlayn.
OK dmesine tklayn.
Bu stil, formun farkl blmlerini gsteren gstergeler iin kullanlacaktr.

5. Contact Information gsterge metnini sein. Properties denetisinde Format
seeneini deitirerek Heading 5 yapn. Dier iki alan kmesine ait gstergeler iin
de ayn stil ayarn kullann.
Ayn ilemi, ekleme noktasn metnin iine yerletirip Properties denetisindeki

Format mensnden H5i seerek de gerekletirebilirsiniz. Burada metni semeniz
gerekmez. nk balklar (headings) metin blounun tamamna uygulanr.
Formunuzun renk ve stil asndan Yoga Sangha proje sitesinin geri kalanyla uyumlu
grndne dikkat edin. Dosyay kaydedip Web taraycnzda nizleyebilirsiniz.
Formlarn lenmesi
Formunuzun bir veritabanna bilgi gndermesi ya da bir veritabanndan bilgi almas, bir arama
ilemi gerekletirmesi veya dier bir ekilde veri ilemesi gerekiyorsa, formunuzu ilevsel hale
getirmek iin sz konusu verilerle ne yaplacan ve bu verilerin nasl deerlendirileceini
tanmlamanz gerekir. Bu tanmlama ilemi, form seili durumdayken Properties denetisindeki
Action ve Method seenekleri kullanlarak yaplr. Formu semek iin ekleme noktasn formun
iinde herhangi bir konuma yerletirin ve Etiket Seicide <form#training> etiketine tklayn.
Formlar ilemek iin kullanlabilen ve veritabanlarndan faydalanan uygulamalar ve dinamik Web
sayfalar gelitirmek iin Dreamweaver kullanabilirsiniz. Veritabanyla alma zelliine sahip
dinamik bir Web sitesi oluturarak bununla almak iin bir sunucu balants gerekir. Hangi
script dilinin (PHP, ASP, JSP ve ColdFusion gibi) kullanlacan, sunucunun tipi ve yaplandrma
ayarlar belirler. Dinamik sayfalar ve veritabanlarndan faydalanan bir site oluturma konusu bu
kitabn kapsam dndadr ve bu dersi tamamlarken formlar ilemek zere dinamik sayfalar veya
CGI scriptleri kullanan bir sunucuya eriiminiz olmayabilir. Bu yzden aada verilen bilgiler
sadece referans malzemesi olarak sunulmutur. ISSnize (Internet Servis Salayc) ya da birlikte
altnz Web sorumlusuna bavurarak, sunucunuzda kullanlan scriptlerle almak zere
Action ve Method seeneklerini ayarlamak iin gereken bilgilere ulaabilirsiniz.
Action seenei, Web taraycsna form verileriyle ne yapmas gerektiini syler. Konuma ait
URL veya yolla birlikte ziyareti Submit dmesine tkladnda bilgileri ileyen sunucu tarafl
uygulamann (bu genellikle bir CGI scripti ya da bir dinamik sayfadr) ismini tanmlar. CGI
scriptleri, ilgili form tarafndan gnderilen verileri ileyen Web sunucusunda bulunur.
406 DERS 11
Method seenei, form verisinin nasl deerlendirileceini belirler (GET, POST ya

da Default). Form tarafndan gnderilen veri, ziyaretinin girdii bilgilerden tretilen
bir srekli metin katardr. GET metodu, form ieriklerini, Action metin alannda
tanmlanan URLe ekler. Bu yzden bu bilgi Web taraycsnn adres ubuunda grnr.
GET, veri aktarmnda gvenli bir metot deildir. Kredi kart bilgileri ya da sosyal
gvenlik numaralar gibi nemli bilgilerin aktarlmasnda kullanlmamaldr. GET
metodu sadece snrl bir miktarda bilgi gnderebilir. Bunun sebebi, Web tarayclarnn
ve sunucularn URL uzunluuyla ilgili getirdii kstlamalardr. Bu snrllk farkllk
gsterebilir. Bu yzden de GET metodu, ziyaretilerin uzun bilgiler girebilecei
formlar iin de iyi bir seenek deildir.(Uzun formlarda kstlamayla belirlenen snrn
almas durumunda bilgilerin geri kalan kaybedilir.) Dier yandan POST metodu,
ok daha fazla bilgi gnderebilir ve ok gvenilir ve gvenlidir. Scriptlerde form verisi
gndermek iin en sk kullanlan metottur. POST, form deerini bir mesajn gvde
blmnde gndermek iin bir HTTP talebi kullanr. Default ise Web taraycsnn
varsaylan metodunu kullanr. Bu da genellikle GETtir.
Formlar Test Etmek

Form eylemi iin, eer sunucunuzda alan bir CGI scripti yoksa, bir mailto esi
(Ders 3te grdmz bir e-posta balants) kullanarak bir formu belirli bir e-posta
adresine gnderebilirsiniz. Bu ilem sadece formlar test etmek iin yaplmaldr. Bu
yntemin eitli kusurlar vardr (e-posta mesaj gnderecek ekilde yaplandrlmayan
Web tarayclarndan dolay ortaya kan hatalar ya da bir e-posta programna
balanamama ve gvenliin olmamas gibi). Formlar ilemek iin her zaman dinamik
sayfalar ya da CGI scriptleri kullanmalsnz.
mailto eylemi balang iin formunuzu test etmenizi salasa da, formu ilgili
sunucu scriptleriyle test etme ileminin yerini tutamaz. Sayfalarnz her
zaman canl bir ortamda ayrntl bir ekilde test edin. Bylece
ziyaretilerinizin kullanmna sunmadan nce scriptlerinizin beklendii
ekilde altndan emin olabilirsiniz.
1. training.html belgesinde Etiket Seicide <form#training> etiketine tklayarak
formu sein. Properties denetisindeki forma ait Action metin alanna mailto:
ve bunun arkasna da e-posta adresinizi yazn. ki nokta st ste iaretinden
sonra boluk brakmayn.
ki nokta st ste iaretini eklemeyi ve boluk brakmamanz gerektiini unutmayn. Ders

3te de e-posta balantlarn bu ekilde elle eklemitiniz.
2. Method alr mensnden POSTu sein ve Properties denetisindeki Enctype
metin alanna text/plain yazn.
Form Oluturmak 407
Burada kodlama tipini dz metin olarak ayarladnz. Aksi takdirde, gnderilen metin
neredeyse okunamayacak bir ekilde kodlanacakt.
Enctype seenei, formdaki verilerin nasl kodlanacan tanmlar. text/plain deeri, her
bir form nesnesine ait bilgiyi ayr bir satrda biimlendirir. Bu deeri kullanarak bir e-posta
mesajndaki verilerin daha kolay bir ekilde okunmasn salayabilirsiniz. Siz bir kodlama
tipi tanmlamazsanz, Web taraycs verileri biimlendirmek iin varsaylan bir deer
kullanr. Bu varsaylan deer ou durumda kullanlmas gereken deer olduu iin genelde
sizin bir enctype deeri belirlemeniz gerekmez. Buradaki rnek istisnadr. nk e-posta
mesajnda formu test etmek iin kullanlacak olan verileri gnderiyorsunuz.
Formunuza bir konu satr eklemek iin Action metin alanndaki deeri aadaki
ile deitirin: mailto:YourEmailAddress?Subject=Title for Subject goes
here. ?Subject= ifadesi, arkasndan gelen metni Konu (Subject) olarak tanmlar.
Konuda boluk kullanabilirsiniz. Ama trnak iareti, kesme iareti, nokta ya da
bl gibi zel karakterler kullanmayn (?Subject= ifadesinde yer alan karakterler
hari, nk bunlar e-posta ile konuyu birbirinden ayrr). Zira bu karakterler
HTML koduyla uyumazlk karr. Bu, her Web taraycsnda almayabilir ve
formun test edilmesi dnda baka bir ey iin kullanlmamaldr.
mailto eyleminin btn Web tarayclarnda gvenli olarak almayabileceini unutmayn.

Bunu sadece test amacyla kullann. Eer Web taraycnz e-posta mesaj gnderecek ekilde
yaplandrlmamsa, formunuzu bu ekilde test edemezsiniz.
3. Dosyay kaydedin ve Web taraycnzda test edin.
nizleme iin kullandnz taraycya bal olarak e-posta mesaj gndermeyle ilgili uyar
mesajlar alabilirsiniz. Bu mesaj onayladnzda form sonular belirttiiniz e-posta
adresine gnderilecektir.
4. Etiket Seiciyi kullanarak <form#training> etiketini sein. Action metin
alanndaki yazy silin ve Method seeneini GET olarak deitirin. Dosyay
kaydedin ve Web taraycnzda test edin.
Bu, formlarnz test etmek iin kullanabileceiniz dier bir yntemdir. Burada sonular epostayla gnderilmez. Web taraycsnda formun bulunduu sayfa kalr ve formdaki sonular
tarayc pencerenizdeki Address (Adres) alannda yer alan URLe eklenir.
408 DERS 11
Srama Menleri Oluturmak

Srama mens (jump menu), sitenizdeki ya da dier Web sitelerindeki sayfalara giden
balantlar ieren bir men tipidir. Normal balantlara benzer ekilde srama mens
de her tip dosyaya (resim ya da PDF dosyalar da dahil olmak zere) balanabilir. Srama
mens, sitenizdeki sayfalara balant atamak iin kullanm kolay bir arabirim sunar
(tabii eer listeyi ok uzun tutmazsanz).
Forma gmlen bir srama mens, Web taraycsnda bir men listesi gibi grnr.
nceki ksmda anlatld gibi herhangi bir eyleme ya da ynteme ihtiya duymaz. nk
srama menlerinde verilerin gnderilmesi, alnmas ya da ilenmesi sz konusu deildir.
1. Lesson_11_Forms/Training klasrndeki training.html dosyasn an. Ekleme
noktasn sayfann sa st kesinde yer alan Anusara Yoga in the Heart of
San Franciscos Mission District metninin iinde herhangi bir yere yerletirin.
Etiket Seicide <table.tagline> etiketine tklayn. Sa ok tuuna basn ve
Return (Macintoshta) ya da Enter (Windowsta) tuuna basarak yeni bir
satr oluturun. Choose a Program yazn. Insert ara ubuunun Forms
kategorisinde yer alan Jump Menu simgesine tklayn.
Ayn ilemi, Insert > Form > Jump Menu komutunu seerek de
Insert Jump Menu iletiim kutusu alacaktr. Varsaylan durumda mende unnamed1
adnda tek bir e bulunur. Dreamweaver bu eler iin otomatik olarak saysal srayla
genel tipte isimler atar (unnamed1, unnamed2, vb).
Form Oluturmak 409
2. Insert Jump Menu iletiim kutusundaki Text metin alanna Pick One yazn.
When selected, go to URL metin alanna # yazn.
Men eleri listesindeki ilk e mennn ilk satrnda belirecektir. Ziyareti men
listesinde ilk bu eyi grd iin, ilk satr, listenin ksa bir aklamas ya da ziyaretiye
bunun bir srama mens olduunu bildiren ksa bir ipucu niteliinde olmaldr.
3. Options alannda Select first item after URL change seeneini iaretleyin.
Bu seim, ziyareti bu sayfaya geri dnd zaman, men listesinin listedeki ilk eyi
grntlemesini salar. Aksi takdirde listede en son iaretlenen seenek grntlenir.
Open URLs in mens, Ders 10da yaptnz gibi balantlar belirli
framelere ynlendirmek iin kullanlabilir. Bu uygulamada varsaylan Main
Window seeneini deitirmeyin.
4. Yeni bir men esi eklemek iin art iaretine (+) tklayn. Text metin alanna
Anusara Yoga Immersion yazn, Tab tuuna basn ve When selected, go to
URL metin alanna immersion.html yazn. In-Depth Asana Training, asana.
html; Yoga Philosophy Series, philosophy.html ve Satsang: kirtan, meditation,
satsang.html deerlerini girerek bu adm tekrarlayn. iniz bittikten sonra OK
dmesine tklayn.
Tarayc penceresinde bu eler seildiinde her bir e kendisine karlk gelen sayfaya
balanacaktr. Bir balant, ziyareti buna karlk gelen eyi setiinde etkinleir.
Listenize bir Go (Git) dmesi eklemek isterseniz Insert go button after
menu onay kutusunu iaretleyin.
410 DERS 11
Siz srama mensn dahil ettikten sonra Dreamweaver gereken formu otomatik olarak
ekler. Bunu krmz noktal izgilerden de anlayabilirsiniz. Ekleme noktas satrn sonunda
bulunduu iin srama mens metnin hemen altnda oluturulur. Eer Choose a
program metninin srama mensyle ayn satrda grnmesini isterseniz, bu metni
formun iine tamanz gerekir. Tablo kullanm, formlarnzn yerleimi zerinde size
daha fazla kontrol imkn salar.
Mendeki elerin srasn ayarlamak iin yukar ve aa ok dmelerini
kullanabilirsiniz.
OK dmesine tkladnzda, eklemi olduunuz men ok ksa grnebilir.

Ziyaretilerin bunu nasl grdn anlamak iin bir sonraki admda sayfay Web
taraycnzda nizleyeceksiniz.
Srama mensn oluturduktan sonra Properties denetisini kullanarak baz

deiiklikler yapabilirsiniz. Properties denetisi snrl bir dzenleme imkn salar
(ziyaretinin grecei metni ve metnin listedeki srasn deitirmek gibi).
Daha ayrntl dzenleme imkn iin srama menlerini JavaScriptle birlikte
kullanabilirsiniz.
Formlarnz Tek Banza Oluturun

Form, Web sitenizi ziyaret eden insanlar hakknda bilgi toplamak iin kullanabileceiniz
mkemmel bir aratr.
Sitenizin ieriini gzden geirin ve ziyaretilerinizden ne tr bilgiler toplamanz
gerektiini belirleyin. e, ihtiyacnz olan bilgi tiplerini bir taslak eklinde belirleyerek
balayn. Formlarla hangi verileri toplayacanz belirledikten sonra daha ilevsel ve etkin
bir form oluturabilirsiniz. Gereken metin alanlarn, menleri ve dmeleri oluturmak
iin bu derste rendiiniz teknikleri kullanabilirsiniz.
Formlarnz zamannda ve sk sk test edin. Formlarn kullanlabilirlik ve ilevsellik
zelliklerini deerlendirin.
Form Oluturmak 411
Ne rendiniz?
Bir Web sayfasnda, zerine form alanlar yerletirmek zere bir form oluturarak
ziyaretilerinize size bilgi gnderme imkn saladnz (Sayfa 379381).
Form ieriini gruplara ayrdnz ve bunlarn form nesneleri iin alan kmeleri
kullandnz (Sayfa 381382).
Genilik ve maksimum karakter says gibi seenekleri kullanarak tek satrl metin
alanlar eklediniz (Sayfa 383390).
Geni bir ziyareti kitlesi tarafndan kullanlabilecek bir form oluturmak zere
eriilebilir nitelikler kullandnz (Sayfa 384390).
Ziyaretileri tek bir seenekle snrlamak iin radyo dmeleri eklediniz
(Sayfa 390393).
Ziyaretilerin birden fazla seim yapabilmelerini salamak iin onay kutular
eklediniz (Sayfa 393395).
Liste kutular ve birden fazla e ieren menler eklediniz ve balangta seili olarak
grntlenecek bir eleman belirlediniz (Sayfa 395398).
ok satrl bir metin alan eklediniz ve satr says, maksimum karakter says ve metin
blme yntemiyle ilgili seenekleri ayarladnz (Sayfa 398400).
Ziyaretilerin formu gndermek ya da formdaki bilgileri silmek iin kullanabilecei
Submit ve Reset dmelerini eklediniz (Sayfa 401403).
Ziyaretilerin grmeyecei bilgileri forma dahil etmek iin bir gizli alan eklediniz
(Sayfa 403404).
CSS kullanarak formu biimlendirdiniz (Sayfa 404407).
mailto zelliine sahip bir formu test ederek doru alp almadn kontrol
ettiniz (Sayfa 407408).
Ziyaretilerin site iinde rahata gezinebilmesini salamak iin bir srama mens
412 DERS 11
12
Ktphane elerini
Kullanmak
Web sitenizde tekrar tekrar kullanmanz gerekebilecek pek ok e ve e grubu vardr.

Bunlarn arasnda gezinti eleri, telif hakk bilgileri, stbilgiler ve altbilgiler de yer alr,
ama bu eler bunlarla snrl deildir. Dreamweaver, sk kullanlan bu ierik bileenlerini
ktphane eleri olarak saklamanza imkn salar. Tek bir ierik bileeni ktphane
esi (library item) olarak adlandrlr ve bunlar, her bir rnek orijinal eye balanacak
ve onun tarafndan kontrol edilecek ekilde birden fazla sayfaya eklenebilir. Ktphane
eleri oluturarak ayn ierii birden fazla belgeye hzla ve kolayca ekleyebilirsiniz.
Sitenizde birok sayfada kullanlabilen telif hakk tarihleri gibi bilgileri deitirmeniz
gerekirse, ktphane eleri ierii dzenlemenizi ve bunu ieren btn belgeleri tek bir
komutla gncellemenizi mmkn klar. Ktphane elerini kullanmazsanz, sayfalarn
hepsini ap bilgileri tek tek dzenlemek ya da Bu ve Deitir (Find & Replace) zelliini
(bu konuyu Ders 17de greceiz) kullanmak zorunda kalrsnz. Kk bir sitede bu i
pek zor olmayabilir; ama bunu ok byk bir sitede yapmaya altnz takdirde zaman
kaybedebilirsiniz ve hata yapma olasl ciddi ekilde artabilir
Bu projede bir sayfaya bir ktphane
esi ekleyeceksiniz. Ktphane
esinde deiiklik yaptktan sonra,
ayn deiiklikleri sitede bu eyi
ieren btn sayfalarda hzl ve etkili
bir ekilde yapmak iin gncelleme
zelliini kullanacaksnz.
Ktphane elerini, sitenizin tutarlln muhafaza etmek ve gncelleme ilemini

otomatikletirmek iin kullanabilirsiniz. Ktphane eleri, belirli elemanlar birden fazla
sayfada kullanmanza imkn salar. Ktphane elerini etkili bir ekilde kullanmanz,
sadece Web sitenizi gelitirme aamasnda deil, daha sonraki gncelleme ve bakm
ilemlerinde de size zaman kazandrabilir.
Bu derse ait tamamlanm sayfalarn rneklerini grmek iin Lesson_12_Libraries/
Completed klasrndeki Community/community.html dosyasn aabilirsiniz.
Neler reneceksiniz?
Ktphane elerini ne zaman ve neden kullanmanz gerektiini reneceksiniz.

Bir ktphane esi oluturacak ve bunu sayfalarnza ekleyeceksiniz.
Bir ktphane esini yeniden oluturacaksnz.
Mevcut bir ktphane esini dzenleyeceksiniz.
Bir ktphane esine ait btn referanslar gncelleyeceksiniz.
Bir ktphane esiyle kaynak dosyas arasndaki balanty koparacaksnz.
Yaklak Sre
Ders Dosyalar
Balang Dosyalar:
Lesson_08_Interactivity/index.html
Lesson_12_Libraries/Community/community.html
Lesson_12_Libraries/Community/community_intro.html
Lesson_12_Libraries/Community/BeginningGreen.html
Lesson_12_Libraries/Community/AboutGreen.html
Lesson_12_Libraries/Community/sidebar.html
Tamamlanm Proje:
Lesson_12_Libraries/Completed/Community/Community.html
Completed klasrlerinde yer alan ktphane elerinin adlarnn sonuna,
bunlar bu derste sizin oluturacanz ktphane elerinden ayrt
edebilmeniz iin _solution ifadesi eklenmitir.
414 DERS 12
Bir Ktphane esi Oluturmak

Ktphane esi, birden fazla sayfada kullanlabilen bir ierik bileenidir. Sitenizdeki
sayfalardan ayrlm durumdadr ve ktphanede bulunan bir dosyada tutulur. Ktphane
esi, ilgili ierie ait koddan ibarettir; kendi bana bir HTML sayfas deildir. Bir
ktphane esini, belgedeki bir ya da daha fazla eleman seip ktphaneye ekleyerek
oluturabilirsiniz. Bunu yaptnzda, Dreamweaver bu seimi kendisine karlk gelen
ktphane esine bal olan ve dzenlenemeyen bir ierie dntrr. Aadaki
uygulamada bu ilemin nasl yapldn greceksiniz.
1. Lesson_08_Interactivity klasrndeki index.html dosyasn an. Ekran kaydrarak
sayfann en altna gelin ve telif hakk (copyright) metnini bulun. Bu paragrafn
tamamn sein.
Ktphane eleri, sadece <body> ve </body> etiketleri arasnda grnen ierii ihtiva edebilir.
Bunlarn arasnda her trl belge eleman (rnein metinler, tablolar, formlar, resimler, Java
appletleri, eklentiler ya da ActiveX eleri) yer alabilir.
Birden fazla elemandan bir ktphane esi oluturulabilmesi iin, bu elemanlarn belgede bitiik
bir seim oluturmas gerekir. Bitiik olmayan elerin bir ktphane esi grevi grmesini
istiyorsanz, birden fazla ktphane esi oluturmanz gerekir.
Telif hakk metni, e-posta adresi ve deitirme tarihi, bir Web sitesindeki btn sayfalarn alt
ksmnda kullanlabilecek standart bilgilerdir. Ktphaneler bu tip bilgiler iin ok faydal olabilir.
Greceli yollar (rnein sayfalara ya da resimlere giden balantlar) ieren bir
ktphane esini sitenizin dizin yapsnda istediiniz seviyeye
yerletirebilirsiniz. Dreamweaver, ktphane esinin ierebilecei elemanlara
giden doru yollar otomatik olarak hesaplar. Belgeye bal ve sitenin kk
klasrne bal yollar Ders 3 ve Ders 5te grmtk.
2. Files panel grubundaki Assets sekmesine tklayn ve Assets panelinin sol alt
ksmndaki Library dmesine tklayarak ktphaneyi an.
Library dmesi
Ktphane elern Kullanmak 415
Assets panelinin Library kategorisi alacaktr. Btn ktphane elerinizi buradan

ynetebilirsiniz.
3. Seili durumdaki telif hakk metnini Assets panelinin zerine srkleyin.
Modify > Library > Add Object to Library komutunu seerek de yeni bir
ktphane esi oluturabilirsiniz.
Assets panelinin Library kategorisinde, Untitled genel isminin vurgulu olarak

grntlendii bir metin alannn yannda yeni bir ktphane simgesi belirecektir.
Bir ktphane esi oluturduunuzda, Dreamweaver yerel kk klasrnzn
en st seviyesinde Library adnda bir klasr oluturur ve oluturduunuz btn
ktphane elerini bu konumda saklar. Ktphane zelliinin alabilmesi
iin, Library klasrnn sitenizin kk seviyesindeki orijinal konumunda
kalmas gerekir. Bu Library klasr ve ierdii ktphane dosyalar sadece
yerel olarak saklanr; Web ekibinizin dier yeleriyle paylamak istemediiniz
srece bunlar bir sunucuya yklemenize gerek yoktur. Dreamweaver, her bir
ktphane esini .lbi dosya uzantsyla kaydeder.
4. Yeni ktphane esini copyright olarak adlandrn, sonra da Return
Artk bu ktphane esi Library panelinde copyright olarak grnecektir. Ktphane

elerinize kolayca tannabilecek isimler vermeniz, bunlar sitenizde kontrol etmenizi
olduka kolaylatrr. Bu isimler sadece sizin referans olarak kullanmanz iindir;
kullanclar bunlar tarayc penceresinde gremez.
416 DERS 12
Panelin st ksmnda ktphane esinin bir nizleme grnts oluturulur. Elemanlar

grebilmek iin, ktphane esinin simgesine tklayarak bu grnty tazelemeniz gerekebilir.
index.html dosyasn kapatn.
Bir Ktphane esini Bir Sayfaya Yerletirmek

Bir ktphane esini bir belgeye yerletirdiinizde, ktphane esi dosyasnn ierii
belgeye eklenir ve bu ktphane esine ait bir referans oluturulur. Bir ktphane esini
eklediinizde asl HTML kodu eklenir, yani ktphane esine Library klasrnden
eriilemese bile ierik her zaman grnr. Dreamweaver, ktphane dosyasnn adn
ve orijinal eye ait referans gstermek iin, enin etrafndaki koda aklamalar
ekler. Aklamalar ve referans tarayc penceresinde grnmez. Haric ktphane esi
dosyasna ait referans, sadece ktphane esini deitirerek sitenin tamamndaki ierii
gncellemenize imkn salar.
1. Lesson_12_Libraries/Community klasrndeki community_intro.html dosyasn
an. Ekleme noktasn One of the most important teachings ifadesiyle
balayan paragrafn hemen altndaki bo paragrafn iine yerletirin.
Aadaki admlarda, bir nceki uygulamada oluturduunuz ktphane esini bu belgeye

yerletireceksiniz.
Library paneli grnmyorsa, Window > Assets komutunu sein ve Assets
panelindeki Library dmesine tklayn. Assets paneli Files panel grubunda
yer alr.
2. Assets panelinin Library kategorisindeki copyright ktphane esini sein ve

panelin sol alt kesindeki Insert dmesine tklayarak eyi belgeye ekleyin.
Alternatif olarak copyright dosya simgesini Library panelinden belge

penceresinde bu enin grnmesini istediiniz konuma srkleyebilirsiniz.
Metin belgeye eklenecektir. copyright ktphane esinin arka plan sar renkte olacaktr.
Ktphane eleri varsaylan olarak sar renkle vurgulanr, ama Preferences iletiim
kutusunu kullanarak bu zellii tamamen kapatabilir ya da rengi deitirebilirsiniz.
Bu e dorudan sayfann zerinde deitirilemez. Ktphane elerini bir sonraki
uygulamada deitireceksiniz.
418 DERS 12
Belge penceresinde seili durumda olan ktphane esiyle ilgili sreklilii salamak,
gncellemek gibi ilemleri gerekletirmek ve kaynak dosyasnn adn grmek iin
Properties denetisini kullanabilirsiniz.
Properties denetisinde bununla ilgili birka seenek mevcuttur:
Src: Ktphane esine ait kaynak dosyann konumunu ve dosya adn gsterir.
Open dmesine tklayarak ktphane esini dzenlemek zere aabilirsiniz.
Yaptnz deiiklikleri korumak iin dosyay kaydetmeniz gerekir.
Detach from original: Seili ktphane esiyle bunun kaynak dosyas arasndaki
balanty koparr. Bu durumda ktphane esinin ierii dzenlenebilir hale gelir,
ama artk ktphanenin ilgili zellikleri kullanlarak gncellenemez.
Recreate: Geerli seimi orijinal ktphane esinin zerine kaydeder. Ktphane
dosyasnn mevcut olmad, enin adnn deitirildii ya da enin dzenlendii
durumlarda ktphane elerini tekrar oluturmak iin bu seenei kullann.
3. Birinci ve ikinci adm tekrar ederek copyright ktphane esini Community/

BeginningGreen.html dosyasnn alt ksmna ekleyin.
Bir ktphane esini birden fazla sayfada tekrar tekrar kullanrken ktphane elerinin
ne kadar faydal olduunu anlarsnz.
4. Community/AboutGreen.html dosyasn an ve ekleme noktasn For more
information ifadesiyle balayan paragrafn altndaki bo paragrafn iine
yerletirin.
Bu sayfaya, telif hakk bilgisini ieren ktphane esinin kaynak dosyasndan ayrlm bir
kopyasn yerletireceksiniz. Bu yzden bu eyi belge iinde dzenlemek mmkn olacaktr.
5. Option (Macintoshta) ya da Ctrl (Windowsta) tuunu basl tutun ve copyright
dosya simgesini Library panelinden belgenin alt ksmna srkleyin.
Ktphane ierii belgeye kopyalanacak, ama ktphaneye balanmayacaktr. Bu nedenle

de sar renkle vurgulanmayacaktr. Elemanlar dorudan sayfa zerinde dzenlenebilir,
nk bunlar bir ktphane esine bal deildir. Balantlar koparlm olduu iin,
orijinal ktphane esinde deiiklik yapldnda bu elemanlar gncellenmez.
6. Btn dosyalar kaydedin ve kapatn.
Bir Ktphane esini Yeniden Oluturmak

Eer bir ktphane esi Assets panelinin Library kategorisinden kazara silindiyse ve
elinizde bunun bulunduu bir sayfa varsa, bu eyi tekrar oluturabilirsiniz.
1. sidebar.html belgesini an ve bir kez tklayarak, sayfann alt ksmndaki gezinti
amacyla kullanlan ktphane esini sein.
Bu, Library klasrnzde bulunmayan bir ktphane esidir. Frame tabanl Community
sayfalar iin kullanlan gezinti balantlarnn yer ald satra sahip basit bir tablodur.
Tabloya tkladnzda, ktphane esinin tamam seili hale gelir ve belge zerinde
dzenlenemeyeceini gsterecek ekilde rengi griye dnr. Bunun bir ktphane esi
olduunu, Etiket Seicide <mm:libitem> yazsnn grnmesinden de anlayabilirsiniz. Bu
eleman belge penceresinde bir ktphane esi olarak iaretli olmasna ramen Assets
panelinin Library kategorisinde grnmez, nk orijinal e sitenizin iinde deildir.
420 DERS 12
2. Properties denetisindeki Recreate dmesine tklayn.
Ktphane esine ait dosya, bu sayfada kullanlan e adyla yeniden oluturulacaktr.

Bu e artk Assets panelinin Library kategorisinde CommunitySubNav bal ile
grntlenecektir.
Ayrca sa tklayarak (Macintosh ve Windowsta) veya Control tuunu basl
tutup tklayarak (Macintoshta tek dmeli fare kullananlar) Recreate
komutunu ve seili ktphane esiyle ilgili dier seenekleri ieren bir
balam mens de aabilirsiniz.
3. sidebar.html belgesini kapatn.
Bir Ktphane esinde Deiiklik Yapmak

Bir ktphane esini dzenlerken, enin Library klasrndeki kaynak dosyasn
dzenlemeniz gerekir. Kaynak dosya, orijinal ktphane esi ya da yukardaki uygulamada
kullanlan tekniklerle tekrar oluturulan e olabilir. Bir ktphane esini dzenlediinizde
sadece ktphane esi deiir. Dzenleme ilemini tamamladnzda, Dreamweaver
sitede bu eyi kullanan btn sayfalarn gncellenmesi gerektii konusunda sizi uyarr. Bu
deiiklikleri sitenin tamamna uygulamak ya da uygulamamak arasnda seim yapabilirsiniz.
Dreamweaver, yeni dzenlediiniz ktphane dosyasna gndermede bulunan aklamalar
arayarak ve eski HTML kodunu yeni HTML kodunuzla deitirerek gncelleme ilemini
gerekletirir. Koddan ktphane aklamalarn karrsanz, ierikler artk ktphane
esiyle ilikili olmayacaktr ve bunlar ktphane esini gncelleyerek deitiremezsiniz.
Ktphane esinde yaplan btn deiiklikler, Library klasrnde yer alan
kaynak dosyasna uygulanmaldr. erii dorudan bir belgede dzenlemek
istiyorsanz, nce ktphane esine giden balanty koparmanz gerekir.
Bunu yapmak iin, eyi eklerken Ctrl (Windowsta) ya da Option
(Macintoshta) tuunu basl tutabilir ya da sayfada eyi seip Properties
denetisindeki Detach from original dmesine tklayabilirsiniz.
1. Assets panelinin Library kategorisindeki copyright dosya simgesine ift tklayn.
Assets panelinin Library kategorisi ak deilse, Window > Assets komutunu

sein ve Assets panelindeki Library simgesine tklayn.
Dreamweaver, dzenleme ilemi iin copyright ktphane esini aacaktr. Dahili

CSS stillerini ya da dier biimlendirme zelliklerini dorudan ktphane esinde
tanmlamadnz takdirde, bunlar bir sayfaya eklendii zaman o belgenin zelliklerini
alrlar; metin ve balant renkleri belge iin ayarlanm olan varsaylan renklere uyacak
ekilde deiir.
Alternatif olarak Library panelinde copyright setikten sonra paneldeki Edit

dmesine de tklayabilirsiniz. Ayrca sayfadaki ktphane esini setikten
sonra Properties denetisindeki Open dmesine tklamanz da
mmkndr.
2. copyright ktphane esinin (copyright.lbi) belge penceresinde, copyright
(telif hakk) metninin zerine bir yatay cetvel ekleyin. Yatay cetvelin
tanmlanmam olan ykseklik ayarn Properties denetisi araclyla 1 olarak
deitirin. Belgeyi kaydedin.
Yatay cetveli Ders 2de rendiiniz gibi ekleyebilirsiniz: Insert ara

ubuunun HTML kategorisindeki Horizontal Rule dmesine tklayarak ya
da Insert > HTML > Horizontal Rule komutunu seerek.
422 DERS 12
Update Library Items iletiim kutusu alacaktr. Burada sitenizde copyright ktphane
esini kullanan btn dosyalarn listesini grebilirsiniz.
3. Sitenizde copyright ktphane esini kullanan btn belgeleri gncellemek

iin Update dmesine tklayn.
Update Pages iletiim kutusu, yaptnz deiiklikler sonucunda hangi sayfalarn

gncellendiini gsterecektir.
Eer byk bir siteniz varsa, sitenizi btn deiikliklerle birlikte tek bir
seferde gncellemek iin beklemeyi tercih edebilirsiniz. Eer tercihiniz
buysa, ktphane esini kaydederken Dont Update dmesine tklayn.
4. Close dmesine tklayarak Update Pages iletiim kutusunu kapatn.
Yatay cetvel, hem community_intro.html, hem de BeginningGreen.html belgesinde yeni

konumunda grnecektir.
Ktphane Referanslarn Gncellemek

Eer sayfalarnz bir ktphane esini dzenlerken deil de daha sonra gncellemeyi
tercih ederseniz, Dreamweaver btn gncelleme ilemlerini tek bir komutla yapmanza
imkn salar. rnein, Web ekibinizin yelerinde ktphane eleri ieren sayfalar varsa,
sayfalar daha sonra gncellemek isteyebilirsiniz.
Ders 14te greceimiz bir site srekliliini salama zellii olan Check In
ve Check Outu kullanyor ve bir ktphane esini kullanan sayfalar
gncellemek istiyorsanz, Dreamweaver bu eyi ieren sayfalara bakmak
isteyip istemediinizi sorar. Gncellenmesini istiyorsanz, Dreamweavern
dosyaya bakmasna izin vermek iin bu istei onaylamanz gerekir.
1. copyright.lbi dosyasnda telif hakk tarihini 2006 olarak deitirin ve belgeyi
kaydedin. Update Library Items iletiim kutusundaki Dont Update dmesine
tklayn.
Yeni telif hakk tarihi henz community_intro.html dosyasnda da, BeginningGreen.html

dosyasnda da grnmeyecektir.
2. Men ubuunu kullanarak Modify > Library > Update Pages komutunu sein.
Update Pages iletiim kutusu alacaktr.
3. Look In mensnde Entire Siten seili olduundan emin olun.
Sa taraftaki men geerli siteyi (Yoga Sangha) gsterir. Burada, ktphane

elerini kullanan btn dosyalar gncellemeyi tercih ediyorsunuz. Bu seenekleri
kullandnzda, sitedeki btn ktphane esi referanslar gncellenecektir (sadece
copyright.lbi deil, btn ktphane eleri iin geerli). Tek bir ktphane esine
ait referanslar gncellemek istiyorsanz, Look in mensnde Files That Use seeneini
iaretleyin, sonra da sadaki menden istediiniz ktphane esini sein.
424 DERS 12
4. Update seeneklerinden Library items kutusunun iaretli olduundan,

Templates kutusunun da iaretli olmadndan emin olun. Show log onay
kutusunu iaretleyin ve Start dmesine tklayn.
Update Pages iletiim kutusu hangi dosyalarn gncellendiini gsterecektir.

5. Close dmesine tklayarak iletiim kutusunu kapatn.
Yeni telif hakk tarihi hem BeginningGreen.html, hem de community_intro.html

belgesinde grnecektir. copyright ktphane esi belgesini kapatabilirsiniz.
Ayn ilemleri Server Side Includes (SSI) ile de yapabilirsiniz. Ama
sayfalarnzda SSI kullanabilmeniz iin, sunucunuzun SSI destekleyecek
ekilde yaplandrlm olmas gerekir.
Snippet olarak adlandrlan bir Dreamweaver zellii vardr. Her ne kadar
gncellenemeseler bile (nk orijinal bir eye bal deildirler) snippetlar
kullanarak kodlarn sk kullanlan blmlerini ekleyebilirsiniz. Snippet
konusunu Ders 16da greceiz.
Ne rendiniz?
Bir sitede birden fazla sayfada tekrarlanmas gereken elemanlar iin ktphane
elerinin nasl kullanldn rendiniz (Sayfa 415419).
Assets panelinin Library kategorisini kullanarak bir ktphane esi oluturdunuz,
bunu bir sayfaya ktphane esine giden bir balantyla birlikte, baka bir sayfaya da
ktphane esine giden bir balant olmadan eklediniz (Sayfa 415419).
Properties denetisini kullanarak, Library panelinden silinmi olan bir ktphane
esini tekrar oluturdunuz (Sayfa 420421).
Library panelinde mevcut olan bir ktphane esini dzenlediniz ve deiiklikleri,
sitede bu eyi kullanan btn sayfalara uyguladnz (Sayfa 421423).
Bir ktphane esine ait btn referanslar gncellediniz (Sayfa 423425).
13
ablonlar
Kullanmak
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
Bu derste, mevcut bir
sayfadan bir ablon
oluturacak, bu
ablonu kullanarak
baka sayfalar
hazrlayacak ve
ablonu dzenleyerek
sayfalarda deiiklik
yapacaksnz.
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
Macromedia Dreamweaver ya da Macromedia Contribute kullanarak sayfalar hazrlayabilir
ve dzenleyebilirler. (Macromedia 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. Eer sayfalarda sadece stbilgilerin ve altbilgilerin
ayn olmasn, aradaki yerleim dzenlerinin de birbirinden farkl olmasn istiyorsanz,
ktphaneleri kullann (bu konuyu Ders 12de grmtk). Ama ayn tasarm birden fazla
sayfada kullanmak istiyorsanz, ablonlar kullann. Ktphaneler, belirli elemanlar ya
da eleman gruplarn sitenin genelinde tekrar tekrar kullanmanza ve sayfalarn yerleim
dzenlerini daha iyi kontrol etmenize imkn salar. ablonlar ise, ayn yerleim dzenini
ve tasarm kullanmanz salar. 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 derste elde edilen sonular grmek isterseniz Lesson_13_Templates/Completed/
Teachers klasrndeki Katchie.html, Hillman.html ve Lyon.html dosyalarn an.
Neler reneceksiniz?
Bir ablon oluturacaksnz.

ablona dzenlenebilir blgeler ekleyeceksiniz.
Dzenlenebilir blgeleri ablondan sileceksiniz.
stee bal blgeler oluturacaksnz.
Tekrarlanan blgeler ekleyeceksiniz.
ablondaki vurgu renklerini deitireceksiniz.
ablonu temel alan birden fazla sayfa hazrlayacaksnz.
ablonu deitirerek siteyi gncelleyeceksiniz.
Dzenlenebilir etiket nitelikleri tanmlayacaksnz.
Yuvalanm bir ablon (nested template) oluturacaksnz.
428 DERS 13
Yaklak Sre
Ders Dosyalar
Ortam Dosyalar:
Lesson_13_Templates/Images/(btn dosyalar)
Balang Dosyalar:
Lesson_13_Templates/Teachers/teacher.html
Text Files:
Lesson_13_Templates/Text/katchie.txt
Lesson_13_Templates/Text/hillman.txt
Lesson_13_Templates/Text/lyon.txt
Tamamlanm Proje:
Lesson_13_Templates/Completed/Teachers(btn dosyalar)
Completed klasrndeki dosyalarn oluturulmasnda, teacher_completed.
dwt ablonu kullanlmtr. Bu dosya, bu derste oluturacanz ablon
dosyalaryla karmamas ya da uyumazlk yaratmamas iin Completed/
Template_Files klasrne yerletirilmitir. Gerek bir sitede bu dosyalarn
yerletirilmesi gereken konum, siz bu dersteki uygulamalar yaparken
Dreamweavern oluturduu Templates klasrdr. Tamamlanm
dosyalarn ablonlarn kullanmanz gerekirse, bunlar Templates klasrne
tayn.
ablon Oluturmak
ablonlar, bunlar kullanarak oluturduunuz sayfalarn yerleim dzenini ve tasarmn
tanmlar. Bu derste oluturacanz ablon, Yoga Sangha proje sitesindeki teacher profiles
(hocalar) blmnn grnmnn ve insanlarda uyandraca hissin, site kimliinin ve
gezinti zelliklerinin nasl olacan belirleyecektir.
Bir ablon olutururken uygulamanz gereken ilk adm, genellikle sayfa tasarmnn
hazrlanmasn ierir. Bu projede bu adm sizin iin nceden uygulanmtr. teacher.
html belgesi, yapy, yerleim dzenini ve gezinti zelliklerini iermektedir. Bu sayfadan
oluturacanz ablonla hazrlanan sayfalarda tanmlanacak olan ierikler dnda her ey
bu dosyada yer alr.
ablonlar Kullanmak 429
Bu derste, ortak bir ablondan bir dizi Web sayfas oluturacaksnz. Bu sayfalarn her
biri farkl bir hocay tantacak. Bu uygulamada mevcut bir sayfay kullanarak ablonu
oluturacaksnz, daha sonraki uygulamalarda da bu ablondan faydalanarak dier sayfalar
hazrlayacaksnz.
1. Lesson_13_Templates/Teachers klasrndeki teacher.html dosyasn an.
Bu belgede, ierik alanlarna yerletirilecek olan ve her sayfada farkl olmas istenen
materyaller, aklayc yer tutucu metinlerle gsterilmitir.
2. File > Save As Template komutunu sein.
Save As Template iletiim kutusu alacaktr. Buradan ablonu kaydetmek istediiniz siteyi
seebilirsiniz. Bu projede, ablonu Yoga Sangha sitesine kaydetmeniz gerekiyor.
Dreamweaver ablona otomatik olarak teacher ismini (dosyanzn ismi) atayacaktr. Bu

uygulamada otomatik olarak atanan bu ismi kullann. Bu isim, ablonun kullanm amacn
doru bir ekilde aklamaktadr.
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.
Sayfay ablon olarak kaydettiniz. Bu derste daha sonra baka sayfalar hazrlamak iin bu
ablonu kullanabilirsiniz.
3. Save dmesine tklayarak iletiim kutusunu kapatn. Dreamweaver
Update Links?(Balantlar Gncelleyeyim mi?) diye soran bir uyar kutusu
grntlediinde Yes 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
430 DERS 13
ekler. Templates klasrn grmek iin, Files panelindeki Refresh (Tazele) dmesine
tklamanz gerekebilir. Bu dosyay bir sonraki uygulamada kullanmak zere ak brakn.
Artk teacher.dwt dosyas zerinde alyorsunuz. Belge penceresinin st ksmnda
<<Template>> (teacher.dwt) yazdn greceksiniz.
4. Files panel grubundaki Assets (Varlklar) sekmesine tklayn ve ardndan
Templates kategorisine gein.
Bir ablon, yani teacher.dwt ak olduu iin Assets panelinde Templates

kategorisi otomatik olarak alabilir.
Bylece Assets panelini Templates kategorisini gsterecek ekilde am oldunuz. Yeni

oluturduunuz ablon listede grnecektir. Ayrca, bu sitede daha sonra oluturacanz
ablonlar da bu listede yer alacaktr. Listedeki bir ablon seildiinde, bu belgenin bir
ksm panelin tepesindeki nizleme alannda belirir.
Templates dmesi
Yukarda yaptnz gibi mevcut bir sayfay ablon olarak kaydetmek yerine,
Assets panelinde Templates kategorisi etkinken panelin alt ksmnda yer
alan New Template simgesine tklayarak yeni, bo bir ablon oluturmanz
da mmkndr. Siz bu ilemi yaptktan sonra, paneldeki ablon listesine
balksz yeni bir ablon eklenir. Seili durumdayken bu ablonu adlandrn.
New Document iletiim kutusunun General sekmesindeki Category
listesinden Template page seeneini iaretleyip bir ablonu sfrdan
oluturmanz da mmkndr. New Document iletiim kutusunun Templates
sekmesi mevcut ablonlardan yeni sayfalar oluturmak iin kullanlr; bu
sekmeyi kullanarak yeni ablonlar oluturamazsnz.
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 dzenlenebilir, hem
de kilitli alanlarda deiiklik yapabilirsiniz; ama ablon kullanlarak hazrlanm olan bir
sayfada sadece dzenlenebilir blgelerde deiiklik yapabilirsiniz.
1. teacher.dwt ablonunda hem Code, hem de Design grnmlerini ayn anda
grntlemek iin Document ara ubuundaki Split grnm dmesine
tklayn. Hocann biyografisinin yazld (teacher bio) alann st ksmndaki
teachers full name metnini sein. Koda bakarak <h2 class=tagline-style>
al ve </h2> kapan etiketlerinin seime dahil edilmediinden emin olun.
Daha sonraki sayfalarn ieriini deitirebilmeniz iin, sayfann bu ksmnn

dzenlenebilir olmas gerekir. Bu rnekte sadece <h2> blok etiketinin iinde bulunan
ierii seiyorsunuz; bu yzden bu ablonla oluturulan tm sayfalarda sadece metnin
deitirilmesine izin verilecek, bu dzenlenebilir blgeye herhangi bir blok etiketinin
eklenmesine izin verilmeyecektir.
432 DERS 13
<<Template>> (teacher.dwt) dosyas ak deilse, bunu Assets panelinin

Templates kategorisini kullanarak aabilirsiniz. Bir nceki uygulamada
oluturduunuz ablon (teacher.dwt) listede teacher olarak grnr.
Assets panelinde ablonun ismine ift tklayarak bunu an. Ayn ilemi
Assets paneli listesinde ismini setikten sonra panelin alt ksmndaki Edit
dmesine tklayarak da gerekletirebilirsiniz.
2. Insert ara ubuunun Common kategorisinde yer alan Templates
mensndeki Editable Region simgesine tklayn.
New Editable Region iletiim kutusu alacaktr. Balangta Name metin alannda,
Dreamweaver tarafndan verilen genel bir isim grnr. Bu ismin sonundaki numara
otomatik olarak artrlr ve sizin almanzda aadaki rnektekinden farkl bir say
olabilir.
3. Name metin alanna teacherName yazn ve OK dmesine tklayn. Document

ara ubuundaki Design dmesine tklayarak tekrar Design grnmne
gein.
Blge isimlerinde zel karakterler (rnein trnak iaretleri, keli parantezler)

kullanmayn. Bu isimler birbirlerinden farkl olmaldr. Bir ablonda ayn blge ismini
birden fazla yerde kullanamazsnz.
Belge penceresinde, dzenlenebilir alan mavi bir d hatla evrilir. st ksmnda da

blgenin ismini gsteren bir sekme yer alr. Tablonun st kenarl ile yer tutucu resim
arasnda grnen ekstra boluun nedeni, dzenlenebilir blgenin sekmesidir. Aslnda
fazladan boluk eklenmemitir.
Blge isimleri ve d hatlar grnmyorsa, View > Visual Aids > Invisible Elements
komutunu sein.
stbilginin iinde yeni bir dzenlenebilir blge oluturulacaktr. Burada da yine ayn
mavi d hatt ve stte de dzenlenebilir blgenin ismini belirten sekmeyi greceksiniz,
dzenlenebilir alann iine de description szc yerletirilecektir. Daha sonra bu
ablonu bir belgeye uyguladnzda bu alann iindeki metni seecek ve bunu asl metinle
deitireceksiniz.
4. File > Save komutunu seerek ablonu kaydedin. Alan uyar mesaj
penceresinde OK dmesine tklayn.
Eer bir blok etiketinin iinde dzenlenebilir blgeleriniz varsa, ablonu her
kaydediinizde bir uyar mesajyla karlarsnz.
434 DERS 13
5. Etiket Seiciyi kullanarak bio metnini ve teacherImage resim yer tutucusunu

ieren tablo hcresini sein. Insert ara ubuunda yer alan Templates
mensndeki Editable Region dmesine tklayn. Blgeyi teacherBio olarak
adlandrn ve OK dmesine tklayn.
Tablo hcresini Etiket Seiciyi kullanarak semek iin belge penceresinde

teacherImage resmine tklayn ve ardndan Etiket Seicide ondan hemen
nce yer alan <td> etiketini sein.
Oluturduunuz btn dzenlenebilir blgelerin isimleri, Modify > Templates

mensnn en alt ksmnda listelenir. Bu listedeki bir dzenlenebilir blge seiliyse,
ekleme noktas bu blgedeyse ya da bu blgedeki bir e seiliyse, bu dzenlenebilir
blgenin yannda bir onay iareti grrsnz.
6. copyright (telif hakk) metnini ieren tablo hcresini sein. Insert ara
ubuundaki Templates mensnde yer alan Editable Region dmesine
tklayn, blm copyright olarak adlandrn ve OK dmesine tklayn.
Bir ablon temel alnarak oluturulan belgelerde deitirilmesi gereken her bileen
(balantlar da dahil olmak zere) bir dzenlenebilir blge iinde bulunmaldr.
7. Dosyanz kaydedin. <h2> etiketinin iindeki dzenlenebilir blgeyle ilgili uyar
mesaj ekrana geldiinde OK dmesine tklayn.
Blgelerin isimleri d hatla evrilen alann zerinde bir sekme iinde grntlenir.
Bylece hangi alanlar dzenlenebilir olarak tanmladnz kolayca anlayabilirsiniz.
Orijinal ablonlarnz oluturmak ve dzenlemek iin kullanabileceiniz

aralarn ve zelliklerin pek ou sadece, bu rneklerde altnz Design
grnmnde yer alr. Code grnmndeyseniz, baz ablon kontrollerini
kullanamazsnz (Ders 16da bu grnmde alacaksnz). Code
grnmnde alyorsanz ve belirli ablon ilemlerini yapamadnz fark
ettiyseniz, Design grnmne gein.
Dzenlenebilir Blgeleri Kaldrmak

nceki uygulamada ablonun belirli alanlarn dzenlenebilir hale getirmitiniz. Bunlar
yeniden kilitlemeniz de mmkndr. ablondan oluturulan bir sayfadaki kilitli alanlarda
yer alan elemanlar deitirilemez. Kilitli alanlardaki btn elemanlarn, orijinal ablon
dosyasnda dzenlenmeleri gerekir.
1. teacher.dwt belgesinde, belge penceresinde yer alan copyright blgesine ait
sekmeyi zerine tklayarak sein.
436 DERS 13
Belge penceresinin alt ksmnda yer alan Etiket Seici, ablon etiketini (<mmtemplate:
editable>) gsterecektir. Dreamweaver etiketin seili olduunu gstermek zere bunu
Etiket Seicide vurgulu olarak grntleyecektir.
Dzenlemek istediiniz ablon dosyas ak deilse, Assets panelindeki

Templates kategorisinde ismine ift tklayarak bu ablonu aabilirsiniz.
ablon dosyalarn tamak, yeniden adlandrmak ve silmek iin Assets
panelini kullanabilirsiniz. ablon dosyalarn silerken dikkatli olun, nk
bunlar yeniden oluturmak ktphane elerindeki kadar kolay deildir.
2. Modify > Templates > Remove Template Markup komutunu sein.
copyright hcresinin dzenlenebilir olduunu gsteren d hat kaybolacaktr. ablonun

bu ksm artk kilitli haldedir ve bu ablonu temel alan dosyalarda bu ksm artk
deitirilemez.
Kendisinden sayfalar oluturulmu olan bir ablondan dzenlenebilir bir
blgeyi kaldrrsanz, ablonu kaydettikten sonra sayfalar gncellediinizde
(sayfalarn nasl gncellendiini bu derste daha sonra reneceksiniz) daha
nce dzenlenebilir blgelerde deiiklik yaptnz btn sayfalar deitirilir.
Bu sayfalarda blgede yaplan btn deiiklikler silinir, nk daha nceki
dzenlenebilir blgenin bulunduu alan, alann ablondaki grnmn
yanstacak ekilde deiir. Kaldrlan alanda bulunan ieriin yerletirilecei
bir blge seebilirsiniz.
stee Bal erik Oluturmak

stee bal ierik zellii, ablonu temel alan sayfalarda ieriin gizli olmasyla
grntlenmesi arasnda seim yapmanza imkn salar. eriin grntlenmesi iin
koullu ya da zel deerler ayarlayabilirsiniz. Bu deerleri ablon parametreleri ve koullu
ifadeler araclyla kontrol edersiniz.
Belirli elemanlar ablonu temel alan sayfalarn sadece bazlarnda kullanmak iin, istee
bal bir ierik blgesi oluturabilirsiniz. Belirli elemanlarn tek tek dahil edilebilmesine
imkn vermek, ablonunuza byk oranda esneklik kazandrr. rnein baz sayfalarda
illstrasyonlar ya da aklamalar kullanlmas gerekebilir. Byle illstrasyonlarn ve
aklamalarn yerleim dzenlerini kontrol eden bir tablo oluturabilir, sonra da bunu
istee bal bir ierik blgesi olarak tanmlayabilirsiniz. Bylece, ablonu temel alan
belgelerde bu blgeleri ekleme ya da eklememe seeneine sahip olursunuz.
1. teacher.dwt belgesinde Etiket Seiciyi kullanarak yuvalanm tabloyu ve
teacherName Certifications ifadesini ieren tablo hcresinin <td> etiketini
sein.
Yaptnz seim, bu alann seildiini belirtmek zere gri bir renkle gsterilecektir. Bu
blm, teacher ablonunu kullanan sayfalarda istee bal bir eleman olacaktr.
2. Insert ara ubuunda yer alan Templates mensndeki Optional Region

dmesine tklayn.
New Optional Region iletiim kutusu alacak ve burada Basic sekmesi etkin olacaktr.
438 DERS 13
3. New Optional Region iletiim kutusunun Basic sekmesinde yer alan Show By
Default onay kutusunun iaretini kaldrn. OK dmesine tklayarak iletiim
kutusunu kapatn.
Kendi Web sitenizi olutururken, eer istee bal olarak tanmladnz ierik sayfalarn
byk ksmnda kullanlacaksa bu kutuyu iaretli brakabilirsiniz. Ama bu derste, bu
ierik sayfalardan sadece birinde kullanlaca iin, bu ierik varsaylan durumda gizli
olursa sonraki sayfalarn oluturulmas daha kolay olacaktr.
Bu rnekte, istee bal blge iin varsaylan ismi kullanacaz.
Daha nce sayfann baka bir yerinde istee bal bir ierik blgesi
oluturduysanz, Optional Content iletiim kutusunun Advanced sekmesini
kullanarak mevcut istee bal ierik blgesini yeni oluturduunuz blgeye
balayabilirsiniz. Advanced sekmesi ayrca, ablon fadeleri (Template
Expressions) oluturmanza da imkn salar.
stee bal bir blge dzenlenemez. stee bal blgenin dzenlenebilmesini istediiniz
alann tanmlamanz gerekir. Bu da, alann sadece bir ksmn dzenlenebilir olarak
tanmlamanza imkn verir. Bir sonraki adm olarak bu ilemi yapacaksnz.
4. teacherName Certifications metnini sein. Insert ara ubuunda yer alan
Templates mensnden Editable Region sein, blgeyi teacherNameCert olarak
adlandrn ve OK dmesine tklayn.
stee bal blgeleri olutururken bu blgelerde yer alan ierik, siz bir ya da daha fazla
dzenlenebilir blge tanmlayana kadar tmyle kilitlenir.
Tekrarlanan Blgeler Eklemek

Tekrarlanan bir blge, sayfada bir ya da daha fazla kez kopyalanmas gereken bir alandr.
Tekrarlanan blgeler, ablonlarnz temel alan sayfalara birden fazla giri yapmanz
gerektiren durumlarda ok faydal olabilir. rnein, yemek tarifleri iin bir ablon
oluturulduysa ve bu ablonu temel alan her sayfada farkl bir tarif olacaksa, malzeme
listesinin her sayfada deimesi gerekir. Liste eleri tekrarlanan blgeler olarak
tanmlanmsa, bu blgelerden istediiniz kadarn her bir sayfaya gerektii ekilde
ekleyebilirsiniz. Tekrarlanan blgeler, size birden fazla giriin grnmn kontrol
edebilme imkn verir. Bu uygulamada, mteri yorumlarnn listelendii tabloda
tekrarlanan blgeler kullanacaz.
1. teacher.dwt belgesinde Etiket Seiciyi kullanarak hoca sertifikalarna ait yer
tutucu metnini ieren tablo satrnn <tr> etiketini sein.
Bu satrn etrafnda, seili olduunu gsteren d hatlar belirecektir.

440 DERS 13
2. Insert ara ubuunda yer alan Templates mensndeki Repeating Region

seeneine tklayn.
New Repeating Region iletiim kutusu alacaktr.

3. Blgeyi certs olarak adlandrn ve OK dmesine tklayn.
Setiiniz satr ak mavi renkli bir d hatla evrilecek ve d hattn st ksmnda certs
isminin grnd bir sekme belirecektir. Tekrarlanan blgelerin vurgu rengi istee bal
blgelerin vurgu rengiyle ayn, dzenlenebilir blgelerin rengine gre ise daha aktr.
Kendi Web sitelerinizi hazrlarken, vurgulu blgelerin renkleri sayfanzda

kullanlan renklerin arasnda grnmyorsa bu renkleri deitirmek isteyebilirsiniz.
(Windowsta) komutunu, sonra da alan iletiim kutusunda Highlighting
kategorisini sein. Editable regions renk kutusuna tklayp buradan bir vurgu rengi
seebilir ya da dorudan metin alanna ilgili onaltlk renk kodunu girebilirsiniz.
Gerekiyorsa ayn ilemi dier vurgu renkleri iin de yapabilirsiniz. Dzenlenebilir
blgenin rengi ablonun kendisinde ve bu ablonu temel alan belgelerde, kilitli
blgenin rengi ise sadece ablonu temel alan belgelerde grnr. Varsaylan
renkler, dzenlenebilir blgeler iin mavi (#66CCCC), kilitli blgeler iin de ak
sardr (#FFFFCC). Bu renklerin belge penceresinde grntlenmesini ya da
grntlenmemesini salamak iin Show kutularn kullanabilirsiniz. Bu vurgu
renkleri belge penceresinde ancak grnmez elemanlarn grntlenmesini
salayan seenek etkin durumdayken grntlenebilir. ablon blgelerindeki
vurgular gibi grnmez elemanlar belge penceresinde grnmyorsa, View >
Visual Aids > Invisible Elements komutunu sein ve Preferences iletiim
kutusundaki Highlighting kategorisinde ablonun grsel yardmclarna ait Show
kutularnn iaretli olup olmadn kontrol edin. ablon tabanl sayfalar
ekibinizdeki birka kii tarafndan hazrlanyorsa, ekibin dier yelerinin varsaylan
renk ayarlarn kullanyor olabileceini gz nnde bulundurmanz gerekir.
4. Etiket Seicide, yer tutucu sertifika tarihi xx/xx/xxxxi ieren tablo hcresine
ait <td> etiketini sein. Insert ara ubuundaki Templates mensnde Editable
Region seeneine tklayn ve blge adn certDate olarak ayarlayn.
Birden fazla tablo hcresi tek bir dzenlenebilir blge olarak tanmlanamaz. Birden fazla
hcrenin dzenlenebilmesi gerekiyorsa, ya tablonun tamamn dzenlenebilir hale getirmeniz
ya da tabloyu dzenlenebilir birka blgeye ayrmanz gerekir. Bir tablonun iinde birden
fazla hcreyi seip bunlar dzenlenebilir hale getirmeye alrsanz tm tablo dzenlenebilir
bir blge haline gelir.
5. Etiket Seicide, certification yer tutucu ismini ieren tablo hcresinin <td>
etiketini sein. Insert ara ubuundaki Editable Region dmesine tklayn ve
blgenin adn certName olarak ayarlayn.
Bir hcreyi, Etiket Seicide uygun <td> etiketine tklama dnda, ekleme
noktasn ilgili hcreye yerletirdikten sonra Cmd (Macintoshta) ya da Ctrl
(Windowsta) klavye ksayolunu basl tutup tklayarak da kolayca seebilirsiniz.
teacher ablonunuzu temel alan belgelerdeki tekrarlanan blgelerde deiiklik yapabilmeniz

iin, tekrarlanan blgenin gereken sayda dzenlenebilir blge iermesi gerekir. Tekrarlanan
442 DERS 13
blgeler varsaylan durumda kilitlidir. Bu blgelerde hangi alanlarn dzenlenebilir

zellikte olacan tanmlamalsnz.
Dzenlenebilir bir blgeyi gsteren d hatt ya da sekmeyi grmek zorsa,
dzenlenebilir hale getirdiiniz bir hcrenin gerekten dzenlenebilir bir
blge olduunu dorulamak iin, hcrenin iine tklayp Etiket Seiciye
bakabilirsiniz. Vurgulu <td> etiketi, tkladnz hcreye karlk gelir. bu <td>
etiketinden sonra <mmtemplate:editable>.ablon etiketi yer alr.
Belgenizin grnm buradaki rnee benzeyecektir.
teacher.dwt dosyasn kaydedin ve kapatn.
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.
Sayfalar oluturmak iin ihtiya duyacanz resimleri Lesson_13_Templates/Images
klasrnde bulabilirsiniz.
1. File > New komutunu sein. New Document iletiim kutusunda Templates
sekmesine tklayn.
New Document iletiim kutusu alacaktr. Kutunun Templates ksmnda, tanmladnz

sitelerin bir listesi ve seili site iin oluturduunuz btn ablonlarn bir listesi
grnecektir.
444 DERS 13
2. Yoga Sangha sitesine ait ablon listesinden teacher ablonunu sein, Update
page when Template changes kutusunu iaretli durumda brakn, sonra da
Create dmesine tklayn.
ablondan yeni bir sayfa oluturulacaktr. Bu belgede ablondaki ierik grnyor olsa da,
bunun yine de kaydedilmesi gerekir.
3. Dosyay Lesson_13_Templates/Teachers klasrne Katchie.html olarak
kaydedin. Sayfann baln Yoga Sangha: Teachers: Katchie Ananda olarak
deitirin.
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.
Dreamweaver belgenin balnn etrafnda otomatik olarak doctitle adnda
dzenlenebilir bir blge oluturur. Bylece ablondan oluturulan btn
sayfalarn ismini deitirebilirsiniz.
zerine getirdiinizde ya da kilitli blgelerden birine tklamay denediinizde,

imle, ortasndan izgi geen bir daireye dnr. Bu da sz konusu alanlarn
dzenlenemeyeceini gsterir.
4. teachers full name yer tutucu metnini Katchie Ananda ile deitirin.
Yer tutucu stbilgi metni bu ablon tabanl belgedeki gerek ierikle deitirilecektir.
5. Lesson_13_Templates/Text klasrndeki katchie.txt dosyasn an. Metnin
tamamn sein, kopyalayn ve teacherBio yer tutucu metninin zerine
yaptrn.
Metin ve resim bir kenarlkla evrelenmi olarak belirecektir. Kenarlk rengi,

dzenlenebilir blgelerin rengiyle ayndr. Blgenin sol st kesinde yer alan sekmede
blgenin ad yazldr.
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 dahil stil sayfas dzenlenebilir durumda deildir.
6. Resim yer tutucusunu sein ve Srcyi Properties denetisini kullanarak Lesson_

13_Templates/Images klasrndeki Katchie_sm.jpg resmiyle deitirin.
Sayfanzn grnm aadaki resme benzeyecektir.
Katchie.html dosyasn kaydedebilirsiniz.

7. 1den 6ya kadar olan admlar tekrarlayarak ablon tabanl iki dosya daha
oluturun ve bunlar Lesson_13_Templates/Teachers klasrne Hillman.html
ve Lyon.html olarak kaydedin. Sayfalarda yer alan yer tutucu metinleri Text
klasrndeki hillman.txt ve lyon.txt dosyalarndaki metinlerle, yer tutucu
resimleri de Images klasrndeki jayne.jpg ve darcy.jpg resimleriyle deitirin.
Balang sayfasndaki Create New stununda yer alan More seeneine

tklayarak New Document iletiim kutusunu abucak aabilirsiniz.
Jayne Hillman belgesinin bal Yoga Sangha Teacher: Jayne Hillman.

Darcy Lyon belgesinin bal da Yoga Sangha Teacher: Darcy Lyon olarak ayarlanmaldr.
Bylece teacher ablonundan sayfa oluturdunuz. Hillman.html ve Lyon.html
dosyalarn kapatabilirsiniz. Katchie.html dosyasn bir sonraki uygulamada kullanmak
zere ak brakn.
446 DERS 13
stee Bal erii Kontrol Etmek

Bu dersin banda teacher ablonunu olutururken, sertifikalarn listesini gsterecek
olan tabloyu, bu ablonla oluturulan sayfalarda varsaylan durumda gizlenen istee
bal bir blge olarak tanmlamtnz. Bir ablon kullanarak yeni sayfalar oluturup
dzenlerken, orijinal ablonda oluturulan istee bal ierik alanlarn gsterebilir ya
da gizleyebilirsiniz. Bu uygulamada blgeyi grntleyerek, Katchie Ananda profili iin
istee bal ierii gelitirmeye hazrlanacaksnz.
1. Katchie.html belgesinde Modify > Template Properties komutunu sein.
Template Properties seenei, Modify mensnn st ksmna yakn bir

konumda, Page Properties seeneinin altnda yer alr.
Template Properties iletiim kutusu alacaktr.
2. Name listesinden OptionalRegion1i sein ve Show OptionalRegion1 onay

kutusunu iaretleyin.
Deerler listesinde false (gizli) olarak grnen OptionalRegion1 deeri deierek true
(grnr) olacaktr.
3. OK dmesine tklayarak Template Properties iletiim kutusunu kapatn.
Belgenize geri dnecek ve teacher ablonundaki istee bal blgede oluturduunuz

tabloda Katchie.html belgesinin grntlendiiniz greceksiniz. Bir sonraki uygulama
iin bu dosyay ak brakn.
Tekrarlanan Giriler Eklemek

u anda Katchie.html belgesinde grntlenen teacherName Certifications tablosu,
daha nce teacher ablonunda oluturduunuz tekrarlanan blgeyi ierir.
Buradaki uygulamada, bu tekrarlanan blgeyi iki sertifika iin giriler eklemek amacyla
kullanacaksnz.
1. u anda grnr durumda olan istee bal blgede yer alan Katchie.
html belgesindeki certDate dzenlenebilir blgesine 05/15/2000 ve cert
dzenlenebilir blgesine de Sample Yoga Certification yazn.
Her bir hcreye yerletirdiiniz dzenlenebilir blgeler, tekrarlanan blgelere ierik

girmenizi salar.
Bu satrda bir blgeden dierine gemek iin Tab tuunu kullanabilirsiniz
(tpk bir tabloda hcreden hcreye gemek iin yaptnz gibi). Ancak Tab
tuunu yeni bir satr oluturmak iin kullanamazsnz. Yeni bir satr eklemek
iin, aadaki adm uygulamanz gerekir.
2. Repeat: certs sekmesinde zerinde art iareti (+) bulunan dmeye tklayn.
Tekrarlanan blgenin bir kopyas, Sample Yoga Certificationa ait bilgileri yazdnz
satrn altna eklenecektir.
Tekrarlanan blge sekmesindeki drt dme, bu blgeye giri eklemenizi, girileri

silmenizi ve bunlarn srasn deitirmenizi salar.
448 DERS 13
3. Yeni eklenen satrdaki certDate dzenlenebilir blgesine 01/20/1998, cert

dzenlenebilir blgesine de Sample Yoga 200 Hour Certification yazn.
Bylece bu tabloya sertifika bilgisiyle ilgili iki giri yapm oldunuz.

4. Eleme noktasn Sample Yoga 200 Hour Certification hcresine yerletirin.
Tekrarlanan blgeye ait sekmedeki yukar ok dmesini kullanarak bu girii
listenin en stne tayn.
Buradaki ok tularn kullanarak girileri blge iinde yukarya ya da aaya

tayabilirsiniz.
5. Certification alannn zerindeki teacherName Certifications metnini sein ve
bu metni Katchies Certifications ifadesiyle deitirin. Dosyay kaydedin.
Katchie.html dosyasn kaydedin ve kapatn.

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.
1. Assets panelindeki Templates kategorisinde, teacher ablonuna ift tklayn.
Bu derste daha nce oluturduunuz orijinal ablon alacaktr.

2. Ekleme noktasn yan taraftaki Katchie Ananda gezinti metninin iine yerletirin
ve Properties denetisini kullanarak balanty Katchie.html olarak deitirin.
Jayne Hillman balantsn Hillman.html olarak, Darcy Lyon balantsn da Lyon.
html olarak deitirin. ablonu kaydedin.
Blok etiketi iindeki dzenlenebilir blgeyle ilgili uyar mesajn kabul etmek iin OK
dmesine tklayn. ablonda deiiklik yaptnz iin Update Template Files iletiim
kutusu alacaktr. Bu iletiim kutusunda ablondan oluturulan btn dosyalarn bir
listesini greceksiniz.
Kendi Web sitelerinizi olutururken, isterseniz Dont Update dmesine

tklayabilirsiniz. Sayfalar daha sonra Modify > Templates > Update Pages
komutunu seerek gncelleyebilirsiniz.
450 DERS 13
3. Yeni yaptnz deiikliklerle btn sayfalar gncellemek iin Update

dmesine tklayn. Gncelleme kaydn inceledikten sonra Update Pages
iletiim kutusunu kapatn.
ablondan daha nce oluturduunuz Katchie.html, Hillman.html ve Lyon.html belgeleri,

yeni balantlarla gncellenecektir. Bir ablonla ilikili btn sayfalar gncelleyebilme
zellii son derece faydal olabilir. ablonda balantlar ieren bir gezinti blmnz varsa
(zerinde altnz Yoga Sangha sayfalar gibi), bunlar ablonda ayarlayabilirsiniz.
Balantlarn deimesi durumunda ablonu deitirmeniz yeterli olur; bylece ablon
kullanlarak tasarlanan btn sayfalar gncellenir.
Modify > Templates > Detach from Template komutunu seerek bir sayfayla
bir ablon arasndaki balanty koparabilirsiniz. Balants koparlan bir sayfa
tamamen dzenlenebilir durumdadr, ama ablon deitirildiinde bu sayfa
artk gncellenmez. Ayrca, New Document iletiim kutusundaki Update
Page When Template Changes onay kutusunun iaretini kaldrarak
ablondan tamamen bamsz olarak sayfann bir kopyasn oluturabilirsiniz.
Bunu yaptnzda, sabit sayfalara ok benzer ekilde alan ve herhangi bir
ablon balantsna sahip olmayan bir sayfa oluturulur. Bu ekilde
oluturulan sayfalar ablon deitirildiinde gncellenmez.
4. Katchie.html dosyasn an ve Web taraycnzda nizleyin.
Artk sayfann yan tarafndaki balantlar, bu ablondan oluturulan dier iki sayfadaki
balantlar gibi kendilerine karlk gelen sayfalar gsterecektir.
CSS (Ders 4te grmtk) tarafndan kontrol edilen bir ierik oluturmak
isterseniz, bir harici stil sayfas kullanarak ablonu gncellemek zorunda
kalmadan stil sayfasn gncellemeyi mmkn klabilirsiniz.
Dzenlenebilir Etiket Nitelikleri Oluturmak

Dzenlenebilir etiket nitelikleri, orijinal ablon temel alnarak oluturulan yeni belgelerde
deitirilebilen etiketler tanmlamanz salar.
1. teacher ablonunda (teacher.dwt) hoca resmini ve biyografisini ieren tabloyu
sein.
Dtaki kenarlna tklayarak tabloyu sein.
Belge penceresinde tablonun etraf, seili olduunu gsterecek ekilde bir d hatla
evrilecektir.
2. Modify > Templates > Make Attribute Editable komutunu sein.
Editable Tag Attributes iletiim kutusu alacaktr.

3. Editable Tag Attributes iletiim kutusunda Add dmesine tklayn ve nitelik
(Attribute) olarak BGCOLOR yazn. OK dmesine tklayn ve bu niteliin
Attribute mensne eklendiine dikkat edin.
452 DERS 13
BGCOLOR nitelii sadece bu mende grnmez, nk tablo iin bir arka plan rengi
tanmlanmamtr. Bir niteliin grnmesi iin, balangta bu nitelii ayarlamanz
gerekir. Listedeki dier nitelikler WIDTH, BORDER, CELLPADDING ve CELLSPACING
nitelikleridir (tablonun daha nce tanmlanm olan btn zellikleri).
Nitelik isimleri byk harfle yazlmaldr. Bir nitelii kendiniz ekleyebilmek
iin, HTML etiketleri ve bunlara ait nitelikler hakknda bilgi sahibi olmanz
gerekir. Etiketler ve bunlara ait nitelikler hakknda daha fazla bilgi edinmek
iin, Reference panelini kullanabilirsiniz. rnein Reference panelindeki Tag
mensnde TD etiketini seerseniz, Description mensne tklayp etiket
niteliklerinden birini (rnein bgcolor) seerek bu etiketin nitelikleri hakknda
bilgi edinebilirsiniz. HTML ve Reference panelini Ders 16da greceksiniz.
4. Make attribute editable onay kutusuna tklayn. Label metin alanna bgcolor
yazn, Type seeneini Color olarak ayarlayn ve Default alanna #FFFFFF
yazn. OK dmesine tklayn. teacher ablonunu kaydedin, Update dmesine
tklayn, Update Pages iletiim kutusunu kapatn, sonra da teacher.dwt ablon
dosyasn kapatn.
Make attribute editable onay kutusuna tkladnzda, niteliin deeri ablonda tanmland
ekilde tabloya eklenir.
Editable Tag Attributes iletiim kutusu kapanacaktr. Tablonun arka plan rengi artk
dzenlenebilir bir etiket niteliidir. bgcolor niteliini dzenlenebilir hale getirdikten sonra
teacher.dwt ablonunu bir taraycda nizlerseniz, ablon beklediiniz gibi grnmeyebilir.
Dreamweavern ablonu temel alan btn belgeleri kontrol etmesine imkn salayacak olan
ablon iaretlemesini (markup) oluturabilmesi iin, Bgcolor metin alannda @@(bgcolor)@@
kodu grntlenir. ablonun alabilmesi iin bu tr bir iaretleme gerekir. Ayrca bu
iaretleme, ablonu temel alan asl belgelerin grnmnde sorun karmaz.
Daha nce dzenlenebilir olarak tanmlanm olan bir etiketi tekrar kilitlemek
iin, etiketi setikten sonra Modify > Templates > Make Attribute Editable
komutunu semeniz gerekir. Attribute alr mensnden kilitlemek istediiniz
nitelii sein ve Make attribute editable onay kutusunun iaretini kaldrn.
Dzenlenebilir Bir Etiket Niteliinde Deiiklik

Yapmak
Dzenlenebilir etiket niteliklerinin oluturulabilmesi, ablon oluturmayla ilgili seenekleri
nemli lde artrr. Potansiyel olarak pek ok etiket niteliini dzenlenebilir hale
getirebilirsiniz; bu da size orijinal ablonunuzdan oluturulan belgeler zerinde nemli
lde kontrol imkn salar. Arka plan rengi, hizalama ve byklk gibi nitelikler, ablon
tabanl belgelerinizi daha kullanl ve daha esnek hale getirebilir.
1. Katchie.html belgesini an ve Modify > Template Properties komutunu sein.
Template Properties iletiim kutusu alacaktr. Bir nceki uygulamada dzenlenebilir

hale getirdiiniz bgcolor etiket nitelii Name listesinde grnecektir. Value stununda bu
niteliin varsaylan ayarnn #FFFFFF olduunu grebilirsiniz.
2. bgcolor niteliini sein.
454 DERS 13
Etiketi dzenlemek iin kullanabileceiniz seenekler listenin altnda belirecektir. Burada,

rengi deitirmek iin kullanabileceiniz bir metin alan da mevcuttur.
3. bgcolor metin alanndaki #FFFFFF seeneini #FFFFCC ile deitirin, sonra da
OK dmesine tklayarak iletiim kutusunu kapatn.
stee bal tablonun rengi ak sar olarak deitirilecektir.
Katchie.html dosyasn kaydedip kapatabilirsiniz.

HTML bilgisi, dzenlenebilir etiket niteliklerinden en iyi ekilde
faydalanmanza yardmc olur. HTML bilmiyorsanz, Reference panelini
kullanarak eitli etiketler ve bunlara ait niteliklerin ilevleri hakknda bilgi
edinebilirsiniz. Nitelii dzenlenebilir hale getirmeden nce tanmlamak da
faydal olacaktr. HTML biliyorsanz, ok gl bir ablon zelliini
kullanabilirsiniz.
Yuvalanm ablonlar Oluturmak

Yuvalanm bir ablon (nested template), asl yerleim dzenini temel bir ablondan
alan bir ablondur. Btn sayfalarda grnmesi gereken asl ieriin bulunduu temel
bir ablon oluturduktan sonra yuvalanm bir ablon kullanarak sitenizin belirli bir
blm iin zel ierikler ya da bir yerleim dzeni stili oluturabilirsiniz. Ana gezinti
elemanlar, altbilgi ve stbilgi gibi ana site bileenlerini muhafaza ederek farkl bir
yerleim dzeni kullanmak istediiniz bir blm varsa, yine ana ablonunuzu temel alan
baka bir yuvalanm ablon oluturabilirsiniz. Yuvalanm ablonlarn en faydal olduu
durum, yerleim dzenleri ve tasarmlarnda farkllklar olan ve ortak ieriklerini bir ana
ablondan alan bir dizi sayfa stilinin oluturulduu projelerdir.
Normalde yuvalanm ablonlar oluturma ileminin ilk admn planlama oluturur. nce
sitenin grnmn ve ziyaretilerde yarataca hissi planlamanz ve bir ebeveyn ablon
oluturmanz, sonra da sitenin her bir blm iin yuvalanm ablonlar, son olarak da
yuvalanm ablonlardan sitenin sayfalarn oluturmanz gerekir. Yuvalanm ablonlarla
allrken asla sayfalar doudan ebeveyn ablon kullanlarak oluturulmaz. Bu ablon,
sitedeki sayfa almalar iin faydalanlan yuvalanm ablonlarla birlikte site tasarm iin
bir tayc bileen tanmlamak iin kullanlr.
1. Lesson_13_Templates klasrndeki ys-layout.html sayfasn an. Bu dosyay bir
ablon olarak kaydedin ve varsaylan ismini (ys-layout) deitirmeyin. Alan
mesaj penceresinde Yes (Evet) dmesine tklayarak balantlar gncelleyin.
Bu sayfa, Yoga Sangha sitesinin genel grnmn iermekte ve atmosferini

yanstmaktadr. Bu genel site tasarm kullanlarak btn site sayfalar (frame tabanl
sayfalar dnda) oluturulabilir. Burada iki ana ierik alan olduuna dikkat edin:
mainContent ve rightContent. Bu alanlarda dzenlenebilir blgeler oluturacaksnz.
Bylece ocuk ablonlar Web sitesinin her blm iin zel bir grnm ve atmosfer
tanmlayabilecektir.
2. Ekleme noktasn ana ierik alanna yerletirin. div tutamacn seerek ya da
Etiket Seicinin yardmyla <div#mainContent> etiketini seerek tm alan sein.
Insert > Template Objects > Editable Region komutunu sein.
Blgeyi mainContent olarak adlandrn ve OK dmesine tklayn.

Ekleme noktas alann iindeyken div etkin durumda olacak, ancak
seilmeyecektir. Kelerde ve orta noktalarda yer alan ii dolu kk kareler
divin seili olduunu gsterir.
Bu alan, btn ocuk sayfalar (yani bu ablondan oluturulan sayfalar) iin kullanlacak
olan ana ierii tutmas iin tasarlanmtr.
Divlerin etrafnda dzenlenebilir alan sekmesi ve grsel yardmclar belirmeyecektir. Fakat
bu blgenin dzenlenebilir hale getirildiini Tag Inspectora bakarak anlayabilirsiniz. Bu
durumda burada <mmtemplate.editable><div#mainContent> ifadesini grmeniz gerekir.
456 DERS 13
3. kinci adm tekrarlayarak rightContent alannda bir dzenlenebilir blge

oluturun. yeni dzenlenebilir blgeyi rightContent olarak adlandrn. Dosyay
kaydedin ve kapatn.
Artk orijinal Yoga Sangha ablonunu oluturduunuza gre geri kalan admlarda
yuvalanm ablonu oluturmaya hazrsnz demektir.
4. File > New komutunu sein. Templates sekmesine geerek ys-layout ablonunu
bulun ve Create dmesine tklayn.
ys-layout ablonu kullanlarak yeni bir sayfa oluturulacaktr. Bir sonraki admda yslayout ablonunu temel ablonunuz olarak kullanacaksnz.
5. File > Save As Template komutunu sein, oluturduunuz yuvalanm ablonu
ys-teacher olarak adlandrn ve Save dmesine tklayn.
Orijinal ablonu kullanarak oluturduunuz belgeyi bir ablon olarak kaydederek bir
yuvalanm ablon oluturursunuz. Yuvalanm ablonu oluturduunuza gre artk onu
dzenleyebilirsiniz. Dreamweaver .dwt uzantsn otomatik olarak ekleyecektir, dolaysyla
bu uzanty sizin belirtmeniz gerekmez.
Sitenin Teachers blmndeki her sayfa ys-teacher ablonu kullanlarak oluturulabilir.
ys-layout ebeveyn ablonunu kullanarak sitenin her blm iin ocuk ablonlar
oluturabilirsiniz.
ocuk ablonda deiiklik yapmak iin ebeveyn ablonda dzenlenebilir blgeler
oluturmanz gerekir; ocuk ablondaki dzenlenebilir blgeleri yuvalanm ablondan
oluturulan yeni sayfalarda dzenlenebilir alanlara dntrmeniz gerekir.
Ne rendiniz?
Mevcut bir sayfay ablon olarak kaydederek bu sayfadan bir ablon oluturdunuz
(Sayfa 429431).
ablondan oluturulan sayfalarda deiiklik yaplmasn salamak iin ablona
dzenlenebilir alanlar eklediniz (Sayfa 432436).
ablon temel alnarak hazrlanan sayfalarda deiiklik yaplmasn nlemek iin
ablondan dzenlenebilir alanlar kaldrdnz (Sayfa 436437).
Daha sonraki sayfalarda gsterilebilen ya da gizlenebilen istee bal ierik alanlar
ablonu temel alan sayfalara gerektii kadar ok ya da az giri yaplabilmesine imkn
salayan tekrarlanan blgeler eklediniz (Sayfa 440443).
Hem dzenlenebilir, hem de kilitli blgeler iin kullanlan ablon vurgu renklerini
Ayn yerleim dzenine sahip sayfalar oluturmak iin, ablonu temel alan birden
fazla sayfa hazrladnz (Sayfa 450451).
ablonda deiiklikler yaptnz ve sitede birden fazla sayfay bu deiiklikleri
yanstacak ekilde gncellediniz (Sayfa 450451).
Belirli elemanlar daha iyi kontrol edebilmek iin, dzenlenebilir etiket nitelikleri
oluturdunuz ve bunlar kullandnz (Sayfa 452455).
Orijinal ablon tarafndan kontrol edilen ana yerleim dzeninde baz farkllklar
oluturmak iin yuvalanm bir ablon kullandnz (Sayfa 455457).
458 DERS 13
14
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. Kitapta zerinde altnz proje sitesi olan Yoga Sangha iin bu admlar
Ders 1de anlatld gibi sizin yerinize daha nceden uygulanmtr. Planlama aamasn
retim aamas takip eder. Bu aamada da Ders 2den Ders 13e kadarki srete olduu
gibi Dreamweaver kullanarak sitenin sayfalarn oluturur ve test edersiniz.
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. Bu
Bu derste Files panelini
kullanarak dosyalarnz
ynetecek ve bir uzak siteye
balanacaksnz.
ilemde, 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 siteye farkllk
gsterebilir. rnein test ilemleri dzenli bir ekilde faaliyete sokma
aamasndan nce ve sonra gerekletirilmelidir. Sayfalarn Web taraycsnda
nizlenmesiyle gerekletirilen temel test ilemini Ders 1de grmtk. Ayrntl
test ilemlerini ise Ders 15te ele alacaz.
Neler reneceksiniz?
Files panelinin hangi amalarla kullanldn reneceksiniz.

Files panelini kullanarak eitli site ynetimi ilemlerini gerekletireceksiniz.
Bir yerel siteyle uzak site arasndaki farklar greceksiniz.
Bir uzak site balants oluturacaksnz.
Bir uzak sitedeki dosyalar yerel klasre ve mevcut dosyalar bu siteye kopyalayacaksnz.
Contribute uyumluluu zelliini etkinletireceksiniz.
Bir siteyi Contribute ile yneteceksiniz.
460 DERS 14
Yaklak Sre
Ders Dosyalar
Ortam Dosyalar:
Lesson_14_Sites/Images/(btn dosyalar)
Balang Dosyalar:
Lesson_14_Sites/(btn dosyalar)
Files Panelini Kullanmak

Files paneli (sitenizin dosya ve klasr yapsn gsterir), kenetlenmi bir panel olarak ya
da geniletilmi modda daha byk bir pencere olarak grntlenebilir. Files 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 Refresh dmesini kullanmadnz takdirde Dreamweaver bu
deiiklikleri tanmaz ve yollar doru ekilde takip edemez.
1. Files panel grubunu an ve Files sekmesini sein.
Stey Ynetmek 461
Varsaylan durumda Files paneline balangta daraltlm grnmde eriebilirsiniz.

Bu moddayken panel Files panel grubunda Assets paneline kenetlenmi durumdadr ve
sadece yerel dosyalar grnr. Files paneli bir ara ubuuyla birlikte site devamlln
salama ilevlerine sahip pek ok balam mens seenei ierir. Show mens,
tanmladnz herhangi bir siteye ya da bilgisayarnza gemenizi salar. Panelin st
ksmnda yer alan View mensn kullanarak Local View, Remote View, Testing Server ve
Map View seenekleri arasnda gei yapabilirsiniz.
Macintosh kullanclar iin: ou klasrde .DS_Store adndaki
dosyalarla karlaabilirsiniz. DS_Store dosyalar, Macintosh Finder
tarafndan klasrleri grmek iin kullanlan bilgileri ierir. Bu dosyalarla ve
bunlarn silinmesiyle ilgili ayrntl bilgi iin http://www.macromedia.com/go/
tn_16831 adresindeki teknik notlar inceleyebilirsiniz.
2. Site mensnde Yoga Sanghann seili olduundan emin olun ve Files paneli
ara ubuundaki Geniletme dmesine tklayn.
Macintosh kullanclar iin: Eer aksa, pencerenin sol st kesinde bulunan Close
Window dmesine tklayarak Balang sayfasn kapatmanz gerekir. Bu dersin byk
bir blmnde Files panelini kullanacaksnz ve balang sayfas kimi zaman geniletilmi
Files panelinin zerini kapatabilir.
Windows kullanclar iin: Balang sayfasn kapatmanz gerekmez, nk
geniletilmi Files paneli Dreamweaver uygulamas tarafndan kaplanan alan dolduracak
ekilde alr.
Siz Geniletme dmesine tkladktan sonra Files paneli aadaki ekilde gsterildii
gibi kendi geniletilmi penceresinde alr. Bu ders boyunca Files panelinin geniletilmi
grnmn kullanacaksnz.
462 DERS 14
Yerel dosyalarnz Files panelinin sadaki blmesinde (Local Files blmesi) yer alr. Files
panelini genilettikten sonra Geniletme/Toparlama dmesine tklayarak tekrar Files panel
grubu haline getirebilirsiniz. Local Files blmesinde, Ders 1de tanmladnz kk klasr
(DW8_YogaSangha) iindeki her eyi bulabilirsiniz. Bu pencerede sz konusu kk klasr
sizin Ders 1de verdiiniz ismiyle listelenir. Yoga Sangha.
Bu aamada Files panel penceresinin sol blmesinde (Remote blmesi) 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.
Bu derste daha sonra bir uzak site tanmlayacaksnz. define a remote site
balantsna tkladnzda Site Definition iletiim kutusu alr ve Advanced
sekmesinde Remote Info kategorisi seili durumdadr. Uzak siteye
balandnzda soldaki blmede uzak dosyalar belirir.
Files panelindeki temel aralar, Files ara ubuu zerinde yer alr.
Show 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. Bu uygulamada Yoga
Sanghann seilmesi gerekmektedir.
Connect/Disconnect dmesi, uzak siteye balanmanz ya da bu balanty kesmenizi
salar. Henz bir uzak site tanmlamadnz iin bu dmeye tkladnzda Site
Definition iletiim kutusu alr. Varsaylan durumda Dreamweaver bir uzak FTP
sitesiyle kurulan balanty, 30 dakikadan fazla bo kalma durumunda keser.
Zaman snr deerini deitirmeniz gerekirse Edit > Preferences komutunu
(Files paneli daraltlm grnmdeyken) sein, alan Preferences iletiim
kutusunda Site kategorisine gein ve FTP Connection blmndeki Minutes
Idle metin alanndaki sayy deitirin.
Refresh dmesi, beklediiniz eyi yapar. Yani yerel ve uzak dizin listelerini tazeler.
Dosya listelerinde yaplan btn deiiklikler Refresh dmesine tklandktan sonra
grntlenir. Sitenizin zerindeki deiiklikleri Dreamweaver dnda yani Finderda
(Macintoshta) ya da Windows Explorerda (Windowsta) yapmanz durumunda bu
deiiklikleri grmek iin yerel dosyalarnz (Local Files) tazelemeniz gerekir.
dmeden oluan grup, drt farkl grnm seenei sunar: Site Files, Testing
Server, Map Only ve Map and Files. Etkin grnm vurgulanr. Burada varsaylan
grnm seenei Site Filestr.
Get File(s) dmesi, seili dosyay ya da dosyalar uzak siteden yerel klasrnze
kopyalar. Bunu yaparken mevcut yerel kopyalar siler. Bu seenek u anda ilevsel
durumda deildir, nk henz bir uzak site tanmlanmamtr.
Stey Ynetmek 463
Put File(s) dmesi, seili dosyay ya da dosyalar yerel klasrden uzak siteye
kopyalar. Bunu yaparken mevcut uzak kopyalar siler. Bu seenek u anda ilevsel
durumda deildir, nk henz bir uzak site tanmlanmamtr.
Check Out File(s) 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. Check In/Check Out 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. Bu seenek u anda ilevsel durumda deildir; nk
henz bir uzak site tanmlanmamtr ve Yoga Sangha proje sitesi iin Check In/Check
Out seenei henz etkinletirilmemitir.
Check In 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 (check
out) dzenlenemez. Bu seenek u anda ilevsel durumda deildir; nk henz bir
uzak site tanmlanmamtr ve Yoga Sangha proje sitesi iin Check In/Check Out
seenei henz etkinletirilmemitir.
Synhcronize seenei dosyalar yerel ve uzak klasr arasnda senkronize hale
getirir. Bu seenek u anda ilevsel durumda deildir, nk henz bir uzak site
tanmlanmamtr.
Men seenekleri olan File, Edit, View ve Site, geniletilmi Files panelinin sa st
kesindeki balam mensnde (Macintoshta) veya geniletilmi Files 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.
Bir Dreamweaver Sitesi Dndaki Dosyalara

Erimek
Files panelini, sitenizin kk klasr dnda bulunan dosyalara erimek ve bunlarla
almak iin de kullanabilirsiniz. Kimi zaman resimlerin kaynak dosyalar ya da sayfa
yerleim dzenleri gibi genelde kk klasrlerinde bulunmayan dosyalara erimeniz
gerekebilir.
1. Files panelindeki Show mensnde Computer (Macintoshta) ya da Desktop
(Windowsta) seeneini iaretleyin.
Ok (Macintoshta) ya da art/eksi simgeleri (Windowsta) araclyla bilgisayarnzn

iinde eriebildiiniz eitli srcleri ve klasrleri geniletebilir ya da daraltabilirsiniz.
464 DERS 14
2. Computer simgesinin yanndaki oka (Macintoshta) ya da Desktop simgesinin

yanndaki art iaretine (Windowsta) tklayarak srclerinizi ve klasrlerinizi
grntleyin.
Dreamweaverla tanmlanm her site iin kk klasr olarak tanmlanan btn klasrler
yeille gsterilecektir. Dier btn klasrlerse mavi (Macintoshta) ya da sar(Windowsta)
olarak grntlenir.
Files paneli kullanlarak Site klasrleriyle Computer veya Desktop arasnda dosyalarn
srklenip braklmas durumunda yeni konumda dosyalarn birer kopyas oluturulur.
Dosyalar bir site klasr iinde srkleyip brakrsanz bu dosyalar yeni konuma tanr.
Dosyalar bir site klasryle Computer (Macintoshta) ya da Desktop
(Windowsta) arasnda srkleyip tama yoluyla kopyalamanz gerekiyorsa,
bunu Dreamweavern Files panelinde veya Finderda (Macintoshta),
Bilgisayarmda (Windowsta) ya da Windows Gezgininde (Windowsta)
yapmanz gerekir. Files panelindeki eleri Finder (Macintoshta), Bilgisayarm
(Windowsta) ya da Windows Gezgini (Windowsta) iindeki klasrlere
srkleyemezsiniz. Bunun tersi de geerlidir.
Dosyalar, zerlerine ift tklayarak dier programlarda aabilirsiniz. Dreamweaver, amak

zere setiiniz dosyayla ilikilendirdii program kullanr.
Edit > Preferences komutunu seip Preferences iletiim kutusundaki File
Types/Editors kategorisine geerek dosyalarla ilikilendirilen programlar
deitirebilirsiniz. Extensions listesinde istediiniz dosya uzantlarn seip
ekleyebilir ya da silebilirsiniz. Editors listesini kullanarak da seili uzantlara
sahip dosyalar amak iin hangi programlarn kullanlacan belirleyebilirsiniz.
Stey Ynetmek 465
Files Panelini Kullanarak Sayfalarda Deiiklik

Yapmak
Ders 3te rendiiniz gibi, site haritas (Site Map), sitenin seilen blmnn grsel bir temsilini
sunar. Site haritasnda sayfalar grntlerken ve imleci sayfalarn zerinde gezdirirken Files panelinin
durum ubuunda (alttaki ubuk) her bir sayfaya ait bilgilerin grntlendiine dikkat edin.
1. Local Files (Yerel Dosyalar) blmesinde Show mensn kullanarak tekrar Yoga
Sangha sitesine gein. Lesson_14_Sites klasrnde yer alan index.html dosyasn
sein. Files panelindeki balam mensne tklayn (Macintoshta). Site > Set as Home
Page komutunu sein.
Lesson klasrlerinin birounda kitaptaki derslerde zerinde alabilmeniz iin tm sitenin

bir kopyas yer alr. Bu yzden site haritasn grmek iin ana sayfay sfrlayarak, bu derse ait
klasrde yer alan index.html dosyasna dntrmeniz gerekecektir.
2. Map Only grnmne gein. training.html dosyasnn yanndaki art simgesine (+)
tklayn. mleci training.html dosyasnn altndaki listede yer alan asana.html dosya
adnn zerine yerletirin.
Ders 3te rendiiniz gibi Site Map grnm, ana sayfann balantlar araclyla baland
dosyalar gstermek iin grsel bir yntemden faydalanr. training.html dosyas, training
klasrnde yer alr. Bu training.html dosyasnn altnda listelenen sonraki dosyalar, training.
html dosyasnn bal olduu btn dosyalar gsterir.
Files panelinin alt ksmnda yer alan durum ubuunda belgenin bal ve boyutuyla birlikte
oluturulma tarihi grntlenir. mleci dosya adnn zerine getirdiinizden emin olun (dosya
simgesinin zerine deil). mle dosya adnn zerine getirilmedike durum ubuunda dosya
bilgileri grntlenmez. Durum ubuundaki bilgilere bakarak asana.html belgesinin bal
olmadn grebilirsiniz.
466 DERS 14
Bir sayfaya balk vermeyi unutursanz ya da bir bal deitirmek isterseniz bunu Files
panelini kullanarak gerekletirebilirsiniz.
3. Macintoshta balam mensne tklayn; Windowsta Files penceresindeki
meny kullann. Site haritasnda dosya adlar yerine sayfa balklarn grmek
iin View > Site Map Options > Show Page Titles komutunu sein.
Site haritas, dosyalar balklaryla gsterecek ekilde yeniden oluturulacaktr.

4. Geniletilmi listede Untitled Document balkl ikinci sayfay bulun. Bu sayfa,
ikinci admda grdnz asana.htmldir. Balna tklayarak bu sayfay sein.
Bir sre bekledikten sonra bala tekrar tklayn.
Baln etrafnda bir dikdrtgen belirecektir. Bu dikdrtgen, bal dzenleyebileceinizi

gsterir. Burada ift tklamayn, nk yapmak istediimiz ey dosyay amak deil.
Sadece bal seip deitirmemiz gerekiyor.
5. Yeni balk olarak Yoga Sangha: In-Depth Asana Training & Practice yazn ve
Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
Site haritasnda yeni balk grntlenecektir.
Files panelini kullanarak bir sayfay dzenlemek zere site haritas

blmesinde ya da Local Files blmesinde zerine ift tklayarak aabilirsiniz.
6. Balam mensne tklayn (sadece Macintoshta) ya da File penceresini
kullann (Windowsta). View > Site Map Options > Show Page Titles komutunu
seerek balk grnmnden dosya ad grnmne gein.
View > Site Map Options mensnde yer alan Show Page Titles komutunun yanndaki
onay iareti silinecek ve dosyalarn zerinde tekrar dosya isimleri grntlenecektir.
Stey Ynetmek 467
7. Files paneli ara ubuunda yer alan Site Files dmesine tklayarak dosya
listesine gein. Training klasrn an ve imm.html dosyasn sein.
ki blme arasndaki ubuu sola doru srkleyerek sol tarafta yer alan blmeyi
(Remote Site blmesi) daraltmak isteyebilirsiniz. Bylece Local Files blmesindeki
alma alann bytm olur ve dosyalar daha kolay bir ekilde grrsnz.
Dosyalarnzdan birinin adn deitirmeniz gerektiinde Dreamweaver tarafndan saklanan

balant bilgisini korumak iin bu deiiklii Dreamweavern Files panelinde yapmanz
gerekir. Bir dosyann (bu bir HTML dosyas, bir resim dosyas ya da dier herhangi bir dosya
olabilir) adn Dreamweavern dnda bir yerde deitirirseniz, Dreamweaver yaptnz
deiiklikleri izleyemez. Eer deiiklii Files panelinde yaparsanz, Dreamweavera bu
dosyaya bal olan veya resmi (ad deien bir resim dosyasysa) ieren btn sayfalar
gncelleme imkn vermi olursunuz.
8. imm.html seili durumdayken, dzenlemek iin dosya adna tklayn. Dosya
adn immersion.html olarak deitirin ve Return (Macintoshta) ya da Enter
lk tklamada imm.html dosya ad vurgulu hale gelecek ve ikinci tklamada dosya adnn etrafnda
bir dikdrtgen belirecektir. Bylece dosya adnn dzenlenebilir hale geldiini anlarsnz
Update Files iletiim kutusu alacak ve bu isim deiikliinden etkilenen btn dosyalarn bir
listesi grntlenecektir.
9. Dosyalar yeni dosya adna gre gncellemek iin Update dmesine tklayn.
Dosya listesinde yeni dosya ad grntlenecektir.

Dreamweaver dosya ad deiikliini, bu deiikliin uyguland asl dosyayla
ilikili btn dosyalarda uygular. Eer listedeki dosyalardan biri aksa,
Dreamweaver deiiklii yapar ama dosyay kaydetmez ya da kapatmaz. Ak
durumda olan ve deiiklie urayan dosyalarda yaplan deiiklikleri File > Save
komutunu seerek elle kaydetmeniz gerekir.
10. Files panelindeyken Lesson_14_Sites klasrndeki ysImages klasrn an.
468 DERS 14
Klasrde sadece darcy.jpg adnda bir dosya olduunu greceksiniz. Eer bir
dosya ya da klasr doru konumda deilse bu dosyay ya da klasr doru
konuma tayabilirsiniz. Bu deiiklii Files panelinde yaparak btn balant
bilgilerinin doru ve deimeden kalmasn salarsnz.
11. darcy.jpg resminin simgesini Lesson_14_Sites klasrnde listede daha yukarda yer alan
ve explorations klasrnn yaknnda bulunan Images klasrnn zerine srkleyin.
Bu resmi kullanan btn dosyalar yaptnz bu tama ileminden etkilenecektir. Bu yzden

resmin yolunu dzeltmeniz gerekir. Update Files iletiim kutusu alacak ve deiiklikten
etkilenen dosyalar gncellemek isteyip istemediinizi soracaktr.
12. Update dmesine tklayarak resme ait balanty gncelleyin.
Resim Images klasrne tanacaktr. HTML dosyalarnda bu resme ait btn referanslar
almaya devam edecektir. Eer bu dosyay Dreamweavern dna tarsanz yollar
gncellenmez ve resim grntlenemez. Yani belge penceresinde ya da Web taraycsnda bu
resmin yerine genel tipte bir resim simgesi grntlenir. Bu da sz konusu resim dosyasnn
HTMLde belirtilen konumda bulunamadn gsterir
Dreamweaverda stunlarn srasn deitirerek, stunlar grntleyerek,
gizleyerek ya da yeni stun ekleyerek Files panelini zelletirebilirsiniz. Files
panelini kullanarak stunlar zerinde deiiklik yapmak iin Site > Manage Sites
komutunu seerek Site Definition iletiim kutusunu an ve File View Columns
kategorisini sein. Yukar ya da aa ok dmelerini kullanarak stunlarn
srasn deitirebilirsiniz. Options seeneinin yanndaki Show onay kutusu,
Files panelinde hangi stunlarn grntleneceini kontrol eder. Bu ilemlerin
dnda yeni stun ekleyebilir veya mevcut stunlar silebilir ve bunlar tasarm
notlar (Design Notes) ile ilikilendirebilirsiniz. Tasarm Notlar ile ilgili ayrntlar
bu derste daha ileride greceiz. Kitabn geri kalannda Files panelinde
varsaylan stun dzenini kullandnz ve herhangi bir deiiklik yapmadnz
kabul edilmektedir. Btn stunlar grmek iin Local Files blmesinin alt
ksmndaki kaydrma ubuunu kullanabilirsiniz.
Stey Ynetmek 469
Bir Uzak Siteye Balanmak

Ders 1de bir yerel site oluturmutunuz. Bu, sabit diskinizde bulunan ve siteniz iin
gereken btn klasrleri ve dosyalar ieren bir klasrd. Ders 2den Ders 13e gelene
kadar sayfalar yerel sitede gelitirdiniz. 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. Test etme konusunu Ders 15te greceiz.
1. Site > Manage Sites komutunu sein.
Bunun iin Windows kullanclar, Files panelinin geniletilmi grnmnde

yer alan Site mensn de kullanabilir.
Manage Sites iletiim kutusu alacaktr.
2. Yoga Sangha proje sitesini sein ve Edit dmesine tklayn. Varsaylan

durumda Advanced sekmesi etkin olacaktr. Eer deilse, Advanced sekmesine
tklayn.
Site Definition for Yoga Sangha iletiim kutusu alacaktr.
470 DERS 14
3. letiim kutusunun sol tarafndaki Category listesinden Remote Infoyu sein.
Site Definition iletiim kutusunun Remote Info blmnde, Dreamweavera hangi uzak
siteye balanmas gerektiini ve bu uzak sitenin niteliklerini bildirmek iin gereken
bilgileri girersiniz.
Geerli seenek Nonedr. Yoga Sangha sitesini Ders 1de ilk oluturduunuzda bu seenek
byle ayarlanmt.
4. Access mensnde Local/Network sein.
Stey Ynetmek 471
Aadaki admlarda uzak FTP (File Transfer Protocol) sitesini taklit etmek iin bir klasr
oluturacaksnz. Bu ilem, bir uzak sunucuya erimek zorunda kalmadan Get ve Put
fonksiyonlaryla ilve site ynetimi fonksiyonlarn kullanmanz salar. Pek ok durumda,
uzak klasr ierecek olan adaki baka bir bilgisayara eriiminiz olduunda Local/
Network seeneini kullanrsnz. Burada bu, sizin kendi bilgisayarnzda olacak.
FTP eriimi, uzak bir sitedeki dosyalar almak ya da bu siteye dosya
gndermek iin sk kullanlan bir yntemdir. Bu dersi 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
Definition iletiim kutusunun Remote Info blmndeki Access mensnden
FTPyi seerek ulaabilirsiniz.

FTP host: Web sunucunuzun host ad (adobe.com gibi).
Host directory: Uzak sitede, ziyaretiler tarafndan grnen belgelerin

sakland dizin (site root yani sitenin kk dizini olarak da bilinir.
Login ve Password: Sunucudaki kullanc adnz ve ifreniz. Save onay

kutusunun iaretini kaldrrsanz, uzak siteye her balannzda sizden
ifre girmeniz istenir.
Use passive FTP: Bu seenei, bilgisayarnzla sunucu arasnda bir

firewall varsa kullanrsnz. Bu seenek de varsaylan durumda iaretli
deildir.
Use firewall: Bu seenei, uzak sunucuya bir firewall arkasndan

balanyorsanz kullanrsnz. Bu seenek de varsaylan durumda
iaretli deildir. Firewall ayarlar Dreamweavern Preferences iletiim
kutusunda bulunur. Firewall Settings dmesine tklayarak buraya
hemen ulaabilirsiniz.
Use Secure FTP (SFTP): Bu seenei, bir SFTP sunucunuz

varsa kullanrsnz. SFTP sunucusu gvenli balantlar
oluturmak iin ifreleme zelliini kullanr. Bu seenek de
varsaylan durumda iaretli deildir.
5. Uzak klasr belirlemek iin Remote Folder metin kutusunun sandaki klasr
simgesine tklayn.
Choose Remote Folder for Site Yoga Sangha iletiim kutusu alacaktr.
472 DERS 14
6. Sabit diskinizde kk klasrnzn (DW8_YogaSangha) dnda bir konumu sein.

New Folder dmesine tklayn, klasr ad olarak YogaRemote yazn ve bunu sein.
Uzak klasrn yerel kk klasrnzn dnda olmas gerekir.

Macintosh kullanclar iin: YogaRemote klasrn sein ve Choose dmesine tklayn.
Windows kullanclar iin: YogaRemote klasrn sein ve Open dmesine tklayn.
Sonra da YogaRemote klasrn uzak klasrnz olarak kullanmak iin Select dmesine
tklayn.
Bu klasr uzak sunucunun yerine kullanlacaktr.
7. lve site seeneklerine ait drt onay kutusunu varsaylan ayarnda brakn, OK
dmesine tklayarak sitenizle ilgili bilgileri kaydedin ve Done dmesine tklayarak
Manage Sites iletiim kutusunu kapatn.
Siz sitede gerekli deiiklikleri yaptnz iin Done dmesine tkladktan sonra
Dreamweaver site nbelleini (Site Cache) gncelleyebilir
Daha sonra Site > Manage Sites komutunu seip Manage Sites iletiim kutusunu atktan sonra
deiiklik yapmak istediiniz siteyi seerek site bilgilerini istediiniz zaman dzenleyebilirsiniz.
Bu uygulamada Refresh File List Automatically kutusunu iaretli, Check In/Out seeneklerini
iaretsiz ve Maintain synchronization information kutusunu iaretli olarak brakmtnz.
8. Files panelindeki Refresh dmesine tklayn.
Files panelinin Remote Site blmesinde bo uzak klasrn grntlendiine dikkat edin.
Klasr simgesinin yannda sabit diskinizden klasre giden yolu greceksiniz. Tam yolu grmek
iin imleci klasr adnn zerine getirin.
Burada bir yerel klasr tanmladnz. Files panelinin st ksmndaki Connect dmesi etkin
deildir, nk zaten bal durumdasnz. Otomatik olarak balanmadnzda Connect
dmesi sizi belirli bir uzak sunucuya balar (FTP seeneini kullandnzda olduu gibi).
Dosyalar Yklemek
Bir uzak site tanmladktan sonra mevcut btn dosyalar bu konuma yklemeniz gerekir.
Btn bir siteyi tek seferde ykleyebilir (bu durumda sunucudaki mevcut btn dosyalar
silinir) ya da sadece yeni veya deien dosyalar ykleyebilirsiniz.
1. Files panelinin Local Files blmesinde en st seviyedeki klasr (SiteYoga
Sangha) sein ve Files panelinin ara ubuundaki Put dmesine tklayn.
Put dmesi Files panelinin st tarafn gsteren mavi oktur. Get dmesi ise
Files panelinin alt tarafn gsteren yeil oktur.
Stey Ynetmek 473
Dreamweaver btn siteyi eklemek istediinizden emin misiniz diye soran bir uyar ekran
grntlediinde OK dmesine tklayn.
Btn site uzak klasre kopyalanacaktr. stediiniz bir ya da birden fazla eyi seip Put
dmesine tklayarak klasrleri, bunlarn ieriini ya da dosyalar tek tek de ykleyebilirsiniz.
Bitiik birden fazla eyi (arka arkaya gelen eler) semek iin Shift tuunu basl tutup
tklama ya da bitiik olmayan birden fazla eyi (aralarnda baka eler bulunan eler)
semek iin Cmd (Macintoshta) ya da Ctrl (Windowsta) tuunu basl tutup tklama yntemini
kullanabilirsiniz.
Background File Activity penceresi alacak ve aktarma ileminin ilerleyiini gsterecektir.
Aktarma ilemi devam ederken Dreamweaverda dosyalar zerinde almaya devam edebilirsiniz.
2. Local Files blmesinde Lesson_14_Sites/Training klasrnde yer alan asana.

html dosyasn bulun ve bu dosyay zerine ift tklayarak an. Text klasrndeki
asana.txt dosyasn an ve bu doyann ieriini panoya kopyalayn. asana.html
dosyasna geri dnn ve ierii buradaki metin bilgisinin zerine yaptrn, sonra
da dosyay kaydedin. ki dosyay da kapatn.
Bu dosya artk uzak klasrdeki asana.html dosyasndan daha yeni bir deitirilme tarihine
sahiptir.
Windows kullanclar iin: asana.html dosyasn atnzda Files paneli otomatik
olarak daralarak Files panel grubundaki Site blmesini grntledii haline
dnecektir. asana.html belgesiyle almanz tamamladktan sonra Files panelini
zerindeki Geniletme dmesine tklayarak geniletin.
Macintosh kullanclar iin: asana.html dosyasn kapattnzda balang sayfas
alyorsa, bu sayfay kapatarak Files panelinin zerini kapatmasn nleyin.
474 DERS 14
3. En st seviyedeki yerel klasr (Site---Yoga Sangha) sein. Balam mensne

tklayn (Macintoshta). Edit > Select Newer Local komutunu sein.
Dreamweaver btn yerel dosyalarn deitirilme tarihlerini uzak sitede bunlara karlk
gelen dosya bilgileriyle karlatrr ve sadece en yeni yerel dosyalar seer. Macintoshta
Dreamweaver btn dosyalarn deitirilme tarihlerini inceler ve bu ilem Background
File Activity penceresinde gsterilir. Hem Macintosh, hem de Windows kullanclar iin:
Dreamweaver bu ilemi tamamlamaya kadar bekleyin. Btn dosyalarn incelenmesi
birka dakika srebilir.
Dreamweaver iini bitirdikten sonra Lesson_14_Sites/Training klasrndeki asana.html
dosyas seilecektir.
Yeni oluturulan ya da deitirilen dosyalar seerken kullanabileceiniz iki

ilve seenek daha vardr. Select Newer Remote, uzak sitede, kendilerine
karlk gelen yerel klasr dosyalarndan daha yeni olan dosyalar seer.
Select Recently Modified, her iki konumda bulunan dosyalar karlatrarak
yeni ya da deimi dosyalar seer.
Stey Ynetmek 475
4. Files paneli ara ubuundaki Put File(s) dmesine tklayn.
Dependent Files iletiim kutusu alacaktr. Burada Yes (Evet), No (Hayr) ve Cancel
(ptal) seeneklerini greceksiniz.
Yes, seili durumdaki sayfada yer alan btn resimleri HTML sayfalaryla birlikte
sunucuya gnderir.
No, sadece HTML sayfalarn gnderir. Sadece HTML sayfasnda deiiklik
yaptysanz ve resimler sunucuda duruyorsa, resimleri tekrar gndermeniz iin
herhangi bir sebep yoktur. Bu yzden No dmesine tklamanz gerekir. Eer bir
resimde deiiklik yaptysanz veya sayfaya yeni bir resim eklediyseniz Yes dmesine
tklamanz gerekir.
Cancel seenei ise aktarma ileminin gereklemesini engeller ve iletiim kutusunu
kapatr.
Dependent Files iletiim kutusunda ayrca Dont Show Me This Message
Again onay kutusu bulunur. Bu seenek daha nce iaretlendiyse
Dependent Files iletiim kutusunu grmezsiniz. Eer Dependent Files
iletiim kutusunu grmyorsanz ama grmek ve bu seenekleri istediiniz
ekilde belirlemek istiyorsanz Dreamweaver > Preferences (Macintoshta) ya
da Edit > Preferences (Windowsta) komutunu sein. Site kategorisini sein
ve Dependent Files blmnde Prompt on Get/Check Out ile Prompt on
Put/Check In seeneklerine ait iki kutuyu iaretleyin.
5. Dependent Files iletiim kutusunu gryorsanz No dmesine tklayn.
Bu uygulamada baml dosyalarn hibirinde deiiklik yapmadnz. Bu yzden

YogaRemote adl uzak klasrde bunlar deitirmeniz gerekmez.
Seili dosya uzak siteye yklenir (kopyalanr).
Ykleme ilemi tamamlandnda, Local Files blmesindeki listeyi yanstan Remote Site
blmesinde bir dosya listesi grrsnz.
476 DERS 14
Sadece yeni oluturulan ya da zerinde deiiklik yaplan dosyalar yklemenin ya

da indirmenin dier bir yolu da, yerel ve uzak siteleri senkronize hale getirmektir.
Senkronize etmek, yerel klasrle uzak site arasnda paralel bir dosya ve klasr
yaps oluturmanz salar. Burada bir konumdaki dosyalar, dier konumda
kendilerine karlk gelen dosyalarn birer kopyasdr.

Dreamweaver, sitenizi senkronize etmek iin hem yerel, hem de uzak sitede
bulunan dosyalarn deitirilme tarihlerini karlatrr. Senkronizasyon, sadece
yeni oluturulan ve zerlerinde deiiklik yaplan dosyalar gncellemenizi salar.
Bir siteyi senkronize etmek iin Files panelindeki balam mensnden Site >
Synchronize komutunu sein (Macintoshta) ya da geniletilmi Files panelinde
Site > Synchronize komutunu sein (Windowsta). Direction mensnden
bir dorultu seerek senkronizasyon ileminin nasl gerekletirileceini
belirleyebilirsiniz. Put newer files to remote seenei, sadece Dreamweavern
yerel klasrnzde uzak sitedekilerden daha yeni dosyalar bulmas durumunda
gncelleme yapar. Get newer files from remote seeneinde indirme ilemi,
Dreamweavern uzak sitede yerel klasrnzde yer alanlardan daha yeni dosyalar
bulmas durumunda gerekletirilir. Get and Put newer files, dosyalar her iki
ynde de aktarr. lemi balatmak iin Preview dmesine tklayn. Dreamweaver
hem yerel, hem de uzak klasrde bulunan dosyalar tarar ve deitirilme tarihlerini
karlatrr. Dreamweaver yerel ve uzak klasrleri tarama ilemini bitirdikten sonra
aktarma gereklilii duyduu dosyalarn bir listesini grntler. Buradaki iletiim
kutusu eylemi (Put ya da Get), dosya adn ve durumu listeler. Her bir dosya iin
Action kutusunun iaretini kaldrmanz mmkndr. Dreamweaver bu dosyalar
aktaraca dosyalar listesinden karr. Gncellenecek olan dosyalarn says bu
iletiim kutusunun alt ksmnda verilir.
Check In/Out zelliini kullanyorsanz senkronizasyon ilevini dikkatli kullann.

nk senkronize etme ileminde dosyalar alnr ve gnderilir (Check In/Out
zelliini kullanyor olsanz bile). Dosyalara Check In/Check Out alma-gnderme
ilemi uygulamaz, sadece deitirir. Check In/Out konusuyla ilgili ayrntlar
bu derste daha ileride greceiz. Aktarma ilemi tamamlandktan sonra site
dosyalarnn oluturduu liste, ka tane dosyann gncellendii konusunda sizi
bilgilendirir. Dosyalarn ne zaman aktarldn takip etmeniz gerekiyorsa, Save
Log dmesine tklayarak dosya transfer ileminin gnln oluturabilirsiniz.
Dosyalar ve Klasrleri Gizlemek

Web sitenizi gelitirirken belirli dosyalarn yklenmesini veya indirilmesini engellemek
isteyebilirsiniz. rnein sayfalarnza gml halde ok sayda Flash ve QuickTime filmi varsa,
Get ya da Put ile alma ya da gnderme ilemi uyguladnz her zaman yerel klasrnzde ya da
Stey Ynetmek 477
uzak sunucunuzdaki bu dosyalar deitirmek istemeyebilir, ama dier baml dosyalarn

otomatik olarak yklenmesini isteyebilirsiniz. Ayrca yerel klasrnzde resimlere ait
kaynak dosyalar olabilir. Kaynak dosyalar normalde uzak sunuculara yklenmez, nk
bunlar ziyaretilerin Web sayfalarn grntlemeleri iin gerekli deildir ve ok fazla yer
kaplayabilirler.
Site aktarma ilevlerinden (Synchronize, Get ile Put ve Check In/Out) hari tutmak iin
belirli klasrleri ya da dosya tiplerini gizleyebilirsiniz. Gizlenmi klasrler ve dosya tipleri,
site genelinde uygulanan ilemlerden de (Select Newer Local ve Select Newer Remote,
balantlarn kontrol edilmesi, bul/deitir, raporlar ve ktphane/ablon gncelleme gibi)
hari tutulurlar. Gizlenmi klasrler ve dosya tipleri Assets ya da Files panelinde grnmez.
Pek ok Dreamweaver site ilevi gibi gizleme de dier FTP programlar
tarafndan tannmaz. Bu uygulamada gizleyeceiniz klasrlere ait bilgilerin
devamlln salamak iin Dreamweaver tarafndan ihtiya duyulan veriler
Library klasrnde tutulacaktr. Bu klasr ok az yer kaplar ve yerel veya
uzak konumlardan silinmemelidir.
1. Files panelinin Local Files blmesini kullanarak Lesson_14_Sites klasrnde
yer alan PNG klasrn sein.
Bu klasrde bir PNG dosyas bulunmaktadr.

Dosyalar tek tek gizleyemezsiniz. Ya klasrleri btn olarak ya da belirli bir dosya
tipindeki tm dosyalar gizleyebilirsiniz.
Sitenizi dzenlemek iin kullanabileceiniz gzel yntemlerden biri, btn
ortam dosyalarn ayn klasrde toplamaktr. rnein sitenizde ok sayda
PDF (Portable Document Format) dosyas varsa, sadece PDF dosyalar iin
bir klasr oluturmak sitenizi dzenli tutmanzda ve devamlln salamada
size ok yardmc olacaktr.
2. Balam mensne tklayn ve Site > Cloaking > Cloak komutunu sein (sadece
Macintoshta) ya da sa tklayarak Cloaking > Cloak komutunu sein.
Gizleme zellii varsaylan durumda etkin olmaldr. Eer Cloak seenei gri
olarak grntleniyorsa, yani seilemez durumdaysa balam mensne
tklayp Site > Cloaking > Enable Cloaking (Macintoshta) ya da Site >
Cloaking > Enable Cloaking (Windowsta) komutunu semeniz gerekir.
Macintosh kullanclar balam mensne ve gizleme ayarlarna erimek iin
Ctrl tuunu basl tutup tklama yntemini de kullanabilirler.
478 DERS 14
PNG klasr simgesi Files panelinin hem Local Files, hem de Remote Site blmelerinde,
zerinde apraz bir krmz izgiyle grntlenecektir. Bu apraz krmz izgi, ilgili
dosyann gizlendiini ve site ilemlerinden hari tutulacan gsterir. Klasr atnzda
Yoga-Sangha.png dosyasnn simgesinde de apraz bir krmz izgi olduunu grrsnz.
Klasre sa tkladktan ya da Ctrl tuunu basl tutup tkladktan
(Macintoshta tek dmeli fare kullananlar iin) sonra Cloaking > Uncloak
komutunu seerek klasrn gizleme zelliini kaldrabilir ve site ilemlerine
dahil edebilirsiniz.
Stey Ynetmek 479
3. PNG klasrne sa tklayn ya da Ctrl tuunu basl tutup tklayn (Macintoshta

tek dmeli fare kullananlar iin) ve Cloaking > Settings komutunu sein.
Site Definition iletiim kutusunun Advanced sekmesi alacaktr. Cloaking kategorisinin

seili olduuna dikkat edin.
4. Cloak Files Ending With onay kutusunu iaretleyin. onay kutusu Metin alannda
bulunan varsaylan dosya uzantlar listesinin en sonuna tklayn. Boluk tuuna
basn ve metin alanna .pdf yazn.
Birden fazla dosya tipini gizlemek iin buradaki metin alanna ilve dosya uzantlar
ekleyebilirsiniz. Birden fazla dosya tipini gizlemek iin uzantlar birer bolukla ayrmanz
gerekir. Metin alanndaki varsaylan seenekler olan .png ve .fla uzantlarnn da bu
ekilde yazlm olduunu gryorsunuz. Fireworks kaynak dosyalarnda .png extension
uzants, Flash kaynak dosyalarnda ise .fla uzants kullanlr. Sk kullanlan kaynak
dosyalar iin de uzant listesine ekleme yapabilirsiniz (Adobe Photoshop dosya uzants
olan .psd gibi).
480 DERS 14
5. OK dmesine tklayarak Site Definition iletiim kutusunu kapatn ve

Dreamweaver size nbellein yeniden oluturulacan syleyince OK
dmesine tklayn. lem bittiinde Files panelinde bulunan Refresh dmesine
tklayn.
Yoga Sangha proje sitesinde bulunan btn PDF dosyalar artk gizli durumdadr.
Lesson_14_Sites klasrnde dosya simgesinin zerinde apraz krmz izgilerin
grnd bir PDF dosyas bulunmaktadr: ysSchedule.pdf. Artk btn PDF dosyalar
site ilemlerinden hari tutulmaktadr.
Dosya tiplerinin gizlilik durumunu iptal etmek isterseniz, Assets panel
grubundaki (Macintoshta) ya da Files panel grubundaki (Windowsta) balam
mensne tklayn ve Site > Cloaking > Settings komutunu sein. Site Definition
iletiim kutusunda gizlilik durumunu iptal etmek istediiniz dosya tipinin
uzantsn buradaki metin alanndan silin veya btn dosya tiplerini grnr
klmak iin Cloak files ending with onay kutusundaki onay iaretini kaldrn.
6. Files panelinin Local Files blmesinde herhangi bir yere sa tklayarak ya da Ctrl
tuunu basl tutup tklayarak (Macintoshta tek dmeli fare kullananlar iin)
Cloaking > Enable Cloaking komutunu sein.
Enable Cloaking seeneinin iareti kaldrlacaktr. Bu da Yoga Sangha proje sitesinde

gizleme zelliinin iptal edildiini gsterir. Bu, bir sitedeki klasrlerin ve dosyalarn
gizleme zelliini geici olarak iptal etmek iin basit bir yntemdir. Eer Site > Cloaking
> Enable Cloaking komutunu tekrar seerseniz gizleme zellii tekrar etkinleir ve daha
nceden gizli durumda bulunan btn klasrler ve dosyalar yeniden gizlenir. Gizleme
zellii varsaylan durumda btn sitelerde etkindir. Klasrleri ve dosya tiplerini
gizleyebilmeniz iin bu zelliin etkin olmas gerekir.
Site Definition iletiim kutusunda Cloaking kategorisini seip Enable
Cloaking onay kutusunun iaretini kaldrarak da gizleme zelliini btn
sitede iptal edebilirsiniz. Ya da Cloaking > Uncloak All komutunu seerek
btn klasrlerin ve btn dosya tiplerinin gizleme zelliini ayn anda iptal
edebilirsiniz. Bu seenek gizleme zelliini etkin durumda brakr ve
sitenizdeki btn klasrlerin ve dosyalarn gizleme zelliini iptal eder. Eer
daha nce Uncloak All komutunu kullandysanz, klasrleri ve dosyalar
otomatik olarak yeniden gizleyemezsiniz. Gizleme zelliini sadece geici
olarak kaldrmak isterseniz, bunu altnc admda anlatld ekilde
yapmalsnz. Gizleme seeneklerine, Files (ya da Assets) panel grubunun
balam mensndeki Site mensnden (Macintoshta ve Windowsta
daraltlm durumdaki Files panelini kullanrken) ya da Site mensnden de
(Windowsta geniletilmi durumdaki Files paneli) eriebilirsiniz.
Stey Ynetmek 481
Dosya Almak Ve Gndermek (Check In/Out)

Eer bir Web sitesi projesinde bir ekiple birlikte alyorsanz, Check In/Out
seeneklerinin ibirliini ok daha kolay hale getirdiini greceksiniz. Bu zellik
etkinletirildiinde, ekiptekilerden biri bir dosyay dzenlemek zere alrsa (Check Out),
Dreamweaver alnan dosyay uzak sunucuda kilitler ve tekrar gnderilene (Check In)
kadar ekipteki baka hi kimse bu dosyay dzenleyemez. Tm ekibin Dreamweaver
kullanmas ve btn ekip elemanlarnn Check In/Out zelliini etkinletirmesi, Files
panelini kullanmas ve uzak sunucuya bal olmas durumunda Check In/Out zellii, biri
belirli bir dosya zerinde altnda grubu bundan haberdar eder ve bylece elerin
kazara silinmesini ya da insanlarn bouna emek harcamasn nler.
1. Site > Manage Sites komutunu sein.
Manage Sites iletiim kutusu alacaktr.

2. Listede Yoga Sangha proje sitesini sein ve Edit dmesine tklayn.
Site Definition For Yoga Sangha iletiim kutusu alacaktr.

3. letiim kutusunun Advanced sekmesine geerek Category listesinde Remote
Info seeneini iaretleyin.
Uzak siteyle ilgili bilgiler grntlenecektir.

4. Check In/Out alannda Enable file check in and check out kutusunu iaretleyin.
Bir ilve onay kutusu ve iki tane de ilve metin kutusu belirecektir. Check out files when
opening seeneini iaretlerseniz, siz atnzda dosyalar otomatik olarak alnacaktr. Bu
ilevin dzgn bir ekilde alabilmesi iin uzak siteye bal olmanz gerekir. Eer bal
deilseniz Dreamweaver uzak siteye otomatik olarak balanr.
lve metin kutularnn adlar srasyla Check Out Name ve Email Addresstir.
482 DERS 14
5. lgili metin alanlarna bir alma ad (Checkout name) ve e-posta adresinizi

yazn. Site Definition iletiim kutusunda OK dmesine, Manage Sites iletiim
kutusunda da Done dmesine tklayn.
Alma adnz sadece grup referans iindir. Bunun iin kendi tam adnz ya da bir kullanc
ad kullanabilirsiniz. Bu ad, bir dosyay aldnzda Files panelinin Checked Out By
stununda grntlenecektir. e-posta adresiniz de ekip yelerinin soru sormak zere
sizinle irtibat kurmasn salamak iin kullanlr.
6. Files panelinin Dosya listesi grnmnde Lesson_14_Sites klasrnde yer
alan index.html sayfasn sein ve pencerenin st ksmnda yer alan Check In
dmesine tklayn. Ayn ilemi sanskrit.html sayfas iin tekrarlayn. Baml
dosyalar dahil etmek isteyip istemediiniz sorulursa No deyin.
Check In Dmesi
Dreamweaver seili dosyalar uzak klasre ykleyecektir. Files panelinin Local Files
blmesinde baz dosyalar kk bir kilit simgesiyle iaretlenir. Bu da, sz konusu
dosyalarn gnderildiini ve bunlar yerel olarak dzenleyebilmeniz iin alnmalar
gerektiini gsterir.
483
Bir ekiple birlikte alyorsanz ve Check In/Out zelliini kullanyorsanz dosyalar

yklemek ve indirmek iin herkesin Get File(s) ve Put File(s) simgelerini deil de Check
In ve Check Out File(s) simgelerini kullanmas nemlidir.
Uzak sitenizin bir yerel kopyas varsa Check In/Out zelliinin dzgn bir ekilde
almas iin her bir yerel dosyay gndermeniz gerekir. Check In/Out zelliini
etkinletirdiinizde, dosyalarnzn uzak sunucuda otomatik olarak gnderilmeyeceini
aklnzdan karmayn. Onay ve kilit simgeleri, bir dosyann durumunu gsterir. Onay
iareti, ilgili dosyann alndn, kilit de dosyann gnderildiini gsterir. Bir dosyada bu
ikisi de yoksa (onay iareti ve kilit) bu dosyann mevcut bir Check In/Out durumu yok
demektir. Byle iaretsiz bir dosyay aabilir ya da dzenleyebilirsiniz. Bir ekiple birlikte
alyor ve Check In/Out zelliini kullanyorsanz, bu zellii etkinletirdikten sonra
btn sitenizi bir kez almanz ve gndermeniz iyi olacaktr. Bylece iaretlenmemi
dosyalarn alp kazara dzenlenmesini nlemi olursunuz.
7. Files panelinde Lesson_14_Sites klasrnde yer alan sanskrit.html sayfasn
sein. Panelin st ksmndaki Check Out File(s) dmesine tklayn. Baml
Check Out File(s) dmesi
484 DERS 14
Dosyalarn en son haliyle altnzdan emin olmak iin dosya yerel sitenize
indirilecektir. Hem yerel, hem de uzak dosyalarn bulunduu blmede dosya simgesinin
yanna kk yeil bir onay iareti konur. Bu da dosyann sizin tarafnzdan alndn
gsterir. Her iki blmde de yer alan Checked out by stunlar e-posta adresinize
giden tklanabilir bir balant formunda alma isminizi gsterir. Ekibinizin dier yeleri
tarafndan alnan dosyalar krmz bir onay iaretiyle gsterilir. Bu da, tekrar gnderilene
kadar sz konusu dosyalar sizin alamayacanzn bir iaretidir.
Baka birinin ald bir dosyay amaya kalkarsanz, Dreamweaver sizi bu dosyann
alnm olduu konusunda uyaracak ve birka seenek sunacaktr. Dosya ama ilemini
iptal edebilir, dosyay grmek iin aabilir ya da alma ilemini iptal edebilirsiniz.
Bu uygulamada dosyann baka biri tarafndan alndn bildiren bir mesajlar
karlarsanz, bu alma ilemini geersiz klma seeneini iaretleyin.
Check In/Out zelliinin dzgn bir ekilde alabilmesi iin ekipteki herkesin
Dreamweaver kullanmas gerekir. Dier FTP programlar Check In/Out zelliini
tanmaz. Dier programlar dosyalarn gnderilmesi ve alnmas ilemlerinin asl amacn
dikkate almayarak dosyalarn zerine yazabilir. Check In/Out zelliini kullandnzda,
FTP programlar, Dreamweavern oluturduu dosyalar grebilir. Alnan her bir dosya
iin sunucuda bir LCK dosyas oluturulur ve Dreamweavera dosyann alnd bildirilir.
Bu uygulamada Finderda (Macintoshta) veya Windows Gezgininde (Windowsta)
sanskrit.html.lck dosyasn grebilirsiniz. Bu dosyalar silmeyin. Bunlar Check In/Out
zelliinin almas iin gereklidir ve ok az yer kaplarlar.
Ayrca Dreamweavern Check In/Out kstlamalarn uygulayabilmesi iin, ekip
tarafndan kullanlan btn dosyalarn balangta btn kullanclarn i istasyonlarnda
gnderilmi olmas gerekir. Eer bir dosya hi gnderilmemi ya da alnmamsa, bu
dosya hl dzenlenebilir durumdadr (Check In/Out zellii atlanarak).
8. Files panelinde Local Files blmesinde yer alan sanskrit.html sayfasn sein.
Pencerenin st ksmnda bulunan Check In dmesine tklayn. Baml
Bu dosya artk gnderilmi durumdadr ve tekrar alnana kadar dzenlenemez. u an iin

Check In/Out zelliini etkin olarak brakabilirsiniz. Bu derste daha sonra greceimiz
uygulamalardan birinde buna ihtiyacmz olacak.
Eer Check In/Out zellii kapal durumdaysa ve dosyalar kilitlemek
istiyorsanz, Files (ya da Assets) panel grubundaki balam mensne
tklayabilir ve File > Turn Off Read Only komutunu seebilirsiniz. Bu
seenee, ilgili dosyaya sa tkladktan ya da Ctrl tuunu basl tutup
tkladktan (Macintoshta tek dmeli fare kullananlar iin) sonra Unlock
komutunu seerek de eriebilirsiniz.
Stey Ynetmek 485
Tasarm Notlar Kullanmak

Tasarm notlar (Design notes), dosyalarla ilgili bilgileri takip etmek iin ok faydaldr.
Bu notlar sadece sizin bilgi almanz iin kullanlr ve sitenizin ziyaretileri tarafndan
eriilemeyen ve Web taraycsnda grntlenemeyen gizli metin dosyalardr. Tasarm
notlarn uzak sunucuya ykleyerek birlikte altnz arkadalarnzla kolayca bilgi
paylaabilirsiniz. Bu notlar sitenizdeki btn dosyalarla birlikte kullanlabilir.
1. Site > Manage Sites komutunu sein. Yoga Sangha sitesini sein ve Edit
dmesine tklayn. File View Columns kategorisini sein ve File View Columns
listesinde Notes esine tklayn. Options blmndeki Show seeneini
iaretleyin. Deiiklikleri siteye uygulamak iin OK dmesine ve ardndan
Manage Sites iletiim kutusundaki Done dmesine tklayn.
Files panelinde oluturacanz tasarm notunu grmenizi salamak iin Notes stununun
etkinlemesi gerekir.
2. Files panelinde Lesson_14_Sites/Community klasrnde yer alan AboutGreen.
html sayfasn sein. Files panelindeki balam mensne tklayn ve File >
Design Notes (sadece Macintoshta) ya da AboutGreen.html dosyasna sa
tklayn ve Design Notes komutunu sein.
486 DERS 14
Files panelinde seili dosyaya ait Notes stununa ift tklayarak ya da dosyaya
sa tklayp veya Ctrl tuunu basl tutarak tklayp eriebileceiniz
(Macintoshta tek dmeli fare kullananlar iin) balam mensnden Design
Notes seeneini iaretleyerek de bir tasarm notu ekleyebilirsiniz.
Design Notes iletiim kutusu alacaktr. Bu admda kullandnz yntemi kullanarak bir
dosyaya Files panelinde seili durumdayken ya da belge penceresinde akken tasarm notu
ekleyebilirsiniz. Basic Info sekmesi, notun eklenecei dosyayla ilgili bilgileri ve bu dosyann
sitedeki yolunu grntler. Status mensnden bir seim yaparak dosyann durumunu
deitirebilirsiniz.
Site Definition iletiim kutusundaki Design Notes kategorisi araclyla Design

Notes zelliini aabilir ya da kapatabilirsiniz. Varsaylan durumda hem Maintain
Design Notes, hem de Upload Design Notes for sharing seenekleri iaretlidir.
Upload Design Notes for sharing seeneinin iaretli olmas durumunda sizin
uzak sunucuda alma veya gnderme (get, put, check in ya da check out
seenekleriyle) ilemi uyguladnz btn dosyalara ait tasarm notlar
Dreamweaver tarafndan otomatik olarak yklenir ya da indirilir.
3. Notes metin kutusunun sa kesinin zerinde bulunan Insert Date simgesine
tklayn. Status mensnden revision1i sein ve Show when file is opened
seeneini iaretleyin. Sonra da OK dmesine tklayn.
Check In/Out zelliini kullanrken, tasarm notu oluturmak iin dosyann

alnm olduundan emin olmanz gerekir. Burada dosya daha nce
gnderilmemitir, dolaysyla tasarm notunu dosyay almadan ekleyebilirsiniz.
Notes metin kutusunun ilk satrna tarih bilgisi eklenecektir. Bu alan dosyalarnzla ilgili
nemli bilgileri girmek iin kullanabilirsiniz.
Stey Ynetmek 487
Bu pencerenin alt ksmnda yer alan Show when file is opened seenei, dosya aldnda
bu notun grntlenmesini salar. Bylece ekibinizdeki dier yeler sizin eklediiniz
notlar kolayca grebilir.
Design Notes iletiim kutusu kapanacak ve not sizin eklediiniz bilgiyle birlikte
AboutGreen.html dosyasna ilitirilecektir.
4. Files panelinin Local Files blmesinde Notes stununu grene kadar ekran
saa kaydrn.
Notes stununda dosya adnn sa tarafnda sar bir metin balonu eklinde Design Notes
simgesi belirecektir. Bu simge, dosyaya bir not ilitirildiini gsterir.
Bu notlar dzenlemek isterseniz Design Notes simgesine (sar balon) ift

tklayarak Design Notes iletiim kutusunu tekrar an.
Site Tanmlarn Darya Aktarmak

Site Export ilevi, site listenizden bir site seerek bunu baka bir bilgisayara tamanz
salar. Bu ilev pek ok durumda iinize yarayacaktr. rnein site almalarn dier
ekip yeleriyle paylamanz ya da dier bilgisayarlara gemeniz gerektiinde. Siteler XML
dosyalar olarak kaydedilir ve Site Definition iletiim kutusundaki btn ayarlar korunur.
488 DERS 14
1. Site > Manage Sites komutunu sein ve Manage Sites iletiim kutusunda Yoga
Sangha sitesini sein. Export dmesine tklayn.
Geerli siteyi darya aktarmak iin Files panelindeki balam mensne

tklayarak (Macintoshta) Site > Export komutunu seebilirsiniz.
Export Site iletiim kutusu alacaktr. Bu iletiim kutusunu kullanarak dosyay

adlandrabilir ve aktarlan sitenin kaydedilecei konumu belirleyebilirsiniz.
2. Exported Site dosyasn Yoga Sangha sitesinin kk klasr dnda bir yere
kaydedin.
Site, .ste uzantsyla kaydedilecektir. Bu uzanty silmeye ya da deitirmeye almayn.

Ayn ilemin tersini yaparak bir siteyi Dreamweavera aktarmak iin Site Import ilevini
kullanabilirsiniz. Bunun iin Site > Import komutunu sein, sonra da Import Site iletiim
kutusunu kullanarak siteyi bulun ve sein. Bir yerel kk klasr (Local Root Folder)
semeniz istenecektir. Sadece Dreamweaverdan .ste uzantsyla XML dosyalar olarak
dar aktarlan siteleri Dreamweavera aktarabilirsiniz. Export ve Import zellikleri
sadece Site Definition iletiim kutusundaki ayarlar aktarr. Dosyalar site ayarlaryla
birlikte aktarlmaz. Dosyalar da aktarma ilemine dahil etmek isterseniz, siteyi darya
aktarmaya ek olarak kk klasrnz btn dosyalarla birlikte aktarmanz gerekir. Eer
Local/Network uzaktan eriim seeneini kullanyorsanz, dardan aktardnz sitede
uzak klasre giden yolu gncellemeniz gerekebilir.
Sunucu Balantlar Oluturmak

Dosyalar, bir site tanmlama ilemine girimeden aktarmak iin uzak sunuculara
erimenizi salayan balantlar oluturabilirsiniz. Bir Dreamweaver sitesi (Ders 1de
hazrlamaya baladnz ve bu derste de zerinde altnz site gibi) kullanarak
pek ok site ynetimi zelliine eriebilirsiniz. FTP ya da RDS kullanan (Remote
Development Services) sunucu balantlar, Dreamweavern bu derste anlatlan site
ynetimi zelliklerine eriim imkn salamaz.
1. Files panelindeki Show mensnde Computer (Macintoshta) ya da
Desktop (Windowsta) seeneini iaretleyin. Eer aksa Macintosh HDyi
(veya Macintoshta sabit diskinizi ne olarak adlandrdysanz onu) ya da
Bilgisayarm (Windowsta) simge boyutuna getirin. Files panelindeki listede
FTP & RDS Servers esine sa tklayn ya da Ctrl tuunu basl tutarak
tklayn (Macintoshta tek dmeli fare kullananlar iin) ve Add FTP Server
komutunu sein.
Configure Server iletiim kutusu alacaktr.

Stey Ynetmek 489
Configure Server iletiim kutusuna, Site > Manage Sites komutunu setikten
sonra New dmesine tklayp ardndan alan menden FTP & RDS Server
komutunu seerek de ulaabilirsiniz.
Buradaki seeneklerin birou, Site Definition iletiim kutusunun Remote kategorisindeki

seeneklere benzer.
2. Bir FTP sunucusuna eriiminiz yoksa Cancel dmesine tklayabilirsiniz.
Bu dersi tamamlarken bir uzak sunucuya eriiminizin olmayabilecei dnlerek

aadaki bilgiler sadece referans olarak verilmitir.
Name: Balant kurduunuz sunucuyla ilgili ksa bir aklama ya da bir isim.
Access type: FTP ile RDS arasnda seim yapabilirsiniz. FTP burada aklanan ve en
sk kullanlan seenektir. RDS seenei ise sadece ColdFusion altran bir sunucuya
balanldnda seilmelidir.
FTP host: Web sunucunuzun host ad (adobe.com gibi).

Host directory: Uzak sitede, ziyaretiler tarafndan grnen belgelerin sakland
dizin (site root yani sitenin kk dizini olarak da bilinir).
Login: Sunucudaki kullanc adnz.

Password: Sunucudaki ifreniz. Save onay kutusunun iaretini kaldrrsanz, uzak
siteye balandnzda ifrenizi girmeniz istenir.
490 DERS 14
Contribute Uyumluluu
Macromedia Contribute (Macromedia Studio 8e dahildir), daha ok teknik olmayan
kullanclarn faydaland bir programdr. Teknik olmayan kullanclara rnek olarak,
genelde Web sitesi oluturma, dzenleme veya ynetme gibi konularda tecrbesi
hi olmayan ya da ok az olan ierik editrlerini gsterebiliriz. Contribute, Web
tasarmclarna sitenin dzenlenmesi ve gncellenmesiyle ilgili sorumluluklar bir ekiple
paylama imkn verirken dier yandan da sitenin tasarm, stili, kodlar ve yapsyla ilgili
kontrollerin devam ettirilmesini mmkn klar. Bir Web sitesinin yneticisi olarak siteyi
kontrol etmek iin eitli seenekler ayarlayabilirsiniz. rnein ziyaretilerin sitenin
belirli blmlerine eriebilmesini salamak ve ierik editrlerinin kullanmas iin stil
sayfalar (bkz. Ders 4) ve ablonlar (bkz. Ders 13) tanmlamak gibi.
Macromediann ve Adobe'un Web sitesinden Contribute 3n 30 gnlk
deneme srmn indirebilirsiniz.
1. Site > Manage Sites komutunu sein, ardndan Yoga Sangha proje sitesini
seerek Edit dmesine tklayn.
Site Definition for Yoga Sangha iletiim kutusu alacaktr.

2. Eer seili deilse Advanced sekmesine tklayn. Category listesinde
Contributeu sein ve Enable Contribute compatibility kutusunu iaretleyin.
Eer Contributetan nce Design Notes ve Check In/Out zellikleri

etkinletirilmediyse bir mesaj penceresi alarak Contributela almak iin
Dreamweavern Design Notes ve Check In/Out zelliklerinin etkinletirilmesi
gerektiini bildirir. OK dmesine tklayarak iki zellii de etkinletirin.
Stey Ynetmek 491
Siz bu zellii etkinletirdikten sonra birka yeni ayar daha grntlenecektir:

Site root URL: Site Definition iletiim kutusunun Contribute blmndeki
bu metin alanna, ynetilecek olan Web sitesinin tam URLi yazlmaldr. (Site
Definition iletiim kutusunun Advanced sekmesi etkin durumda olmaldr.) URLi
yazdktan sonra Test dmesine tklayarak Dreamweavern tanmladnz siteye
balanabileceini dorulayn.
Administration: Administer Site in Contribute dmesi Contributeu aar ve site
eriimini kontrol etmek gibi ynetimsel seenekleri ayarlamanz salar. Bunun iin
bilgisayarnzda Macromedia Contribute programnn kurulu olmas gerekir.
Bir Contribute sitesinin ynetilmesiyle ilgili dier ayarlar ve seenekler Contribute iinden
ayarlanr. Eer bilgisayarnzda Contribute kurulu deilse bu uygulamann geri kalan ksmn
yapamazsnz. Bu durumda Cancel dmesine tklayarak Site Definition iletiim kutusunu,
ardndan da Done dmesine tklayarak Manage Sites iletiim kutusunu kapatabilirsiniz.
3. Administer Site in Contribution dmesine tklayn. Dreamweaver-style editing
radyo dmesine ve ardndan Yes dmesine tklayn.
Eer bu siteyi ilk defa Contribute kullanarak ynetiyorsanz, u iki dzenleme ilemi
arasnda seim yapmanz gerekir.
Standard word processing: Her yeni p etiketine satrii CSS stilleri uygular. Bir
Web sitesi iin tanmlanan CSS stilleri genellikle paragraflarn birbirine daha yakn
grntlenmesine sebep olur. Genelde bu stil, masast yaynclk uygulamalaryla (bu
uygulamalar bask konusunda daha fazla kontrol imkn salar) alan kullanclara
daha tandk gelmektedir. Kullanclar standart bir HTML paragraf etiketi (p) kullanmak
iin Enter tuuna iki kez basp paragraflarn arasna daha fazla boluk ekleyebilir.
Dreamweaver-style editing: Bu seenek, Web sayfas editrlerinde olduu gibi p
etiketleri kullanarak standart HTML paragraflar ekler. Kullanc Enter tuuna bastnda
Contribute p HTML etiketini ekler; tarayclar p etiketi kullanan paragraflarn arasna
bo bir satr grntler.
492 DERS 14
Satrii CSS stilleri kullanmann dezavantajlarndan biri, sayfaya daha

karmak iaretleme etiketlerinin eklenmesidir. Bu da, sayfann HTML
yapsnn HTML etiketlerini grntleyen Web tasarmclar tarafndan tam
olarak anlalamamasna sebep olabilir.
Seim yaptktan sonra Administer Website iletiim kutusuna Administrator rolyle

eklendiinizi greceksiniz.
4. Close dmesine tklayarak Administer Website iletiim kutusunu kapatn.

Bir iletiim kutusu alacak ve Administrator (Ynetici) ifresini bo brakmak
isteyip istemediinizi soracaktr. Administer Website iletiim kutusunda
Administration kategorisine gemek ve Administrator ifresini ayarlamak
iin No dmesine tklayn. letiim kutusunun Administration kategorisinde
Set Administrator Password dmesine tklayn. ifreyi password olarak
ayarlayn. Onaylamak iin ifreyi ikinci kez girmeniz gerekecektir. Sonra da OK
dmesine tklayn. Close dmesine tklayarak Administer Website iletiim
kutusunu kapatn.
5. Remote Info kategorisini sein ve Enable file check in and check out
seeneinin iaretini kaldrn. Site Definition iletiim kutusunda OK dmesine,
Manage Sites iletiim kutusunda da Done dmesine tklayn.
Yoga Sangha proje sitesini bir ekiple birlikte oluturmadnz iin Check In/Out zelliini
kullanmanz gerekmez. Kitabn geri kalannda Check In/Out zelliinin kapal olduu
varsaylmtr.
Stey Ynetmek 493
Contributeta Bir Balant Oluturmak

Eer Web siteniz ablonlar ve CSS kullanlarak iyi bir ekilde tasarlandysa, son
kullanclarn sayfalarnzn temel tasarmn deitirmeden ve ona bir zarar vermeden
sayfa oluturmalarn ve sayfalarda deiiklik yapmalarn kolayca salayabilirsiniz.
Bu admlar sadece bilgisayarnzda Contribute yklyse gerekletirebilirsiniz.
1) Contributeu an. Address ubuuna Yoga Sangha sitesinin URLini yazn. Bunun
iin Lesson_14_Sites klasrnde verilen u URLi kullann: http://localhost/yoga-
Remote/Lesson_14_Sites/index.html
Yoga Sangha ana sayfasn greceksiniz. Ana sayfann zerinde bir not greceksiniz.
Notta, henz bu Web sitesine ait bir balant oluturmadnz belirtilir.
494 DERS 14
Contributeta Bir Balant Oluturmak (devam)

2) Create Connection dmesine tklayn. Balant Sihirbazn (Connection
Wizard) balatmak iin Next dmesine tklayn.
Balant Sihirbazn kullanarak Web sitesi iin bir balant oluturabilirsiniz. Balanty
oluturduktan sonra, Contributeu kullanarak Web sitenizde sayfa oluturmaya
balayabilir ve mevcut sayfalarn devamlln salayabilirsiniz.
Genelde son kullanclar kendi balantlarn oluturmazlar. nk bu ilemi siz yaparsnz.
Genelde ynetici (Administrator) olarak kullanclar siz ayarlar ve balant anahtarlarn siz
gnderirsiniz.Bylece son kullanclarn balantnn temel alma eklini bilmesi gerekmez.
3) Web sitesine giden URL sizin yerinize eklenmi olduu iin Next dmesine
tklayn. Balant yntemi olarak Local/Network sein. Choose dmesine
tklayn ve uzak klasr sein: C:\inetpub\wwwroot\yogaRemote\Lesson_14_Sites.
Next dmesine tklayn.
FTP, Secure FTP, Local/Network ya da WebDAV araclyla, Contribute kullanan Web
sitesine balanabilirsiniz.
4) Balant Sihirbaznn User Information (Kullanc Bilgileri) admnda adnz ve
e-posta adresinizi yazn. Next dmesine tklayn ve ardndan Done dmesine
tklayarak sihirbaz kapatn.
Elinizde Contributeun birden fazla kopyas varsa, bu kopyalarn ykl olduu her makine
iin farkl bir kullanc ad kullann. rnein Bob(laptop) ve Bob(Mac) gibi. Ayn kullanc
adn kullandnzda sorun yaayabilirsiniz, nk bu durumda dier bir makinedeki
alma ilemlerini geersiz klabilirsiniz.
Artk Yoga Sangha Web sitesinin sayfalarnn devamlln salamaya hazrsnz.
Stey Ynetmek 495
Ne rendiniz?
Files panelini kullanarak eitli site ynetimi ilemleri gerekletirdiniz (yeni dosyalar
oluturmak, dosyalar adlandrmak ve tamak gibi) (Sayfa 461470).
Dosyalar tadktan sonra Update Files iletiim kutusunu kullanarak yollarn ve
balantlarn doru kalmasn saladnz (Sayfa 468479).
Files panelini zelletirdiniz ve stunlar dzenlediniz (Sayfa 469).
Bir site haritas oluturdunuz. Bunu yatay ve dey olarak grntleyerek
dosyalarnz ynetmek iin kullandnz ve site haritasn bir resim olarak kaydetmeyi
Yerel siteyle uzak site arasndaki farklar, sunuculara balanmak iin Local/Network
ve FTP seeneklerinin nasl kullanldn ve bu iki site tipinin nasl tanmlandn ve
dzenlendiini rendiniz (Sayfa 470473).
Zaman kazanmak iin Select Newer Local komutunu kullanarak uzak bir sitedeki
dosyalar yerel klasrlere ve mevcut dosyalar da uzak siteye kopyaladnz
(Sayfa 473477).
Belirli dosya tiplerinin yklenmesini ya da indirilmesini nlemek iin gizleme
zelliini etkinletirdiniz (Sayfa 477481).
Dier elemanlarla ibirliini kolaylatrmak iin Check In/Out seeneklerini
kullandnz (Sayfa 481485).
Bir dosyaya tasarm notu eklediniz, tasarm notlarn dzenlediniz ve bu notlarn
ekip yeleriyle bilgi paylamak ve dosya durumuyla versiyonlar renmek iin nasl
kullanldn rendiniz (Sayfa 486488).
Site ayarlarn bir bilgisayardan dierine gndermek zere site tanmn ieriye nasl
aktaracanz ve bir Dreamweaver sitesini darya nasl aktaracanz rendiniz
(Sayfa 488489).
Bir Dreamweaver sitesi oluturmadan dosyalar aktarmak iin hzl sunucu
balantlarnn nasl oluturulduunu rendiniz (Sayfa 489490).
Dreamweaver kullanmay bilmeme ihtimali olan insanlarla (ierik editrleri gibi)
almak iin Macromediann Contribute programn nasl kontrol edeceinizi
496 DERS 14
15
Eriilebilirlik
ve Test
u ana kadarki derslerde Web sayfalarn (genellikle bir uygulamay tamamladktan sonra)
bir Web taraycsnda nizleyerek test ettiniz. Sayfalar ya da blmleri tek tek olutururken
bu sayfalarn nasl grndn kontrol etme ve gerektiinde dzeltme yapma ansna
sahiptiniz. Bir siteyi ziyaretilerin kullanmna amadan nce bir adm daha ileri giderek
btn siteyi test etmeniz gerekir. Ortaya kabilecek btn sorunlar engellediinizden emin
olmak iin gereken zaman muhakkak ayrn. Eer bir test sunucusuna eriebiliyorsanz,
sitenizi bu sunucuya yklemeniz ve her trl farkl bilgisayar tipi ve olabildiince ok Web
taraycs srmyle sayfalara erimeye almanz iyi olacaktr. Test sunucular, kullanma
amadan nce sitelerinizi deneyebileceiniz uzak sunuculardr. Sayfalar normal kullanc
koullarnda test edin. Ziyaretilerinizin byk bir ksmnn evirmeli a modemi kullandn
dnyorsanz, sayfalarn yklenme hzn grmek iin siz de bir evirmeli a modemi
kullann. Web sitesini asl gelitiren kii sizseniz, sayfalarnz dier insanlarn da test
etmesini salayn. Dier insanlarn sitenizde nasl gezindiini izleyerek sitenin kullanlabilirlik
durumunu u kriterlere gre deerlendirin: Site sezgisel olarak kullanlabiliyor mu ve ilevsel
mi? Her balanty kontrol ettiinizden ve sorunlu btn balantlar dzelttiinizden emin
olun. Her ziyaretinin ayn ekilde dnmediini unutmayn.
Siteyi test ederken normalde yaplmasn beklemediiniz hareketlere de hazrlkl olun. Bir
ziyaretinin hangi olas yollar deneyebileceini dnn. Ziyaretilerin gerekletirebilecei
Bu projede Dreamweaver kullanarak
Web sayfalarnn eriilebilirlik durumunu
test edeceksiniz. Ayrca proje sitenizdeki
balantlar kontrol edecek ve sitenizin
nasl altn ve sitenize eriirken hangi
Web tarayclarnn sorun yaayabileceini
renmek iin raporlardan faydalanacaksnz.
olas ilemlerin (bir eyi aramak ve satn almak, irtibat bilgilerini aramak, vs) bir listesini yapn
ve ziyaretilerin bu ilemleri tamamlamak iin ne yapmalar gerektiini adm adm analiz edin.
En iyisi, test ilemine balamak iin Web sitesi tamamlanana kadar beklememektir. Test
ilemini erkenden balatr ve retim srecinin bir paras haline getirirseniz sorunlar daha
kolay grebilir ve daha hzl bir ekilde zebilirsiniz. Test ilemi iin site hazrlama ilemini
tamamlamay beklerseniz (saatlerce ya da haftalarca uratktan sonra) zmek iin ok
fazla zaman harcamanz gerektirecek bir hata yakalayabilirsiniz. Bu tr sorunlar erken
grrseniz hemen mdahale edebilir ve hem kendinize hem de birlikte altnz ekibe
nemli lde zaman kazandrabilirsiniz.
ster kk ister byk olsun, herhangi bir sitenin test edilmesi insann gzn korkutur. Siz
ierik ve tasarm iin o kadar alrsnz. Sonra da ziyaretiler hatal balantlar, kendi Web
tarayclarnda almayan sayfalar ya da ok yava yklenen sayfalar yznden sinir olur ve
sitenize bir daha uramazlar. Bu derste test ilemi iin Macromedia Dreamweaver nasl
kullanacanz reneceksiniz. Bunun iin sayfalarn belirli Web tarayclaryla uyumlu olup
olmadn grmek iin sitenizde rapor zelliini kullanacaksnz. Ayrca btn sitenizdeki
balantlar nasl kontrol edeceinizi ve eriilebilirlik testi yapmay reneceksiniz.
Neler reneceksiniz?
Sitenizi eriilebilirlik asndan test edeceksiniz.

Sitenizi Web taraycs uyumluluunu grmek iin test edeceksiniz.
Sitenizdeki balantlar test edeceksiniz.
Site raporlar oluturacaksnz.
Artk dosyalar olup olmadn kontrol edeceksiniz.
Yazm denetimi yapacaksnz.
Yaklak Sre
Ders Dosyalar
Ortam Dosyalar:
Lesson_15_Testing/Images/(btn dosyalar)
Balang Dosyalar:
Lesson_15_Testing/(btn dosyalar)
498 DERS 15
Eriilebilirlik Testi
Sitenizdeki sayfalarda rapor zelliini kullanarak sayfalarn eriilebilirlik standartlarna ne
kadar uyduunu grebilirsiniz.
1. Lesson_15_Testing klasrnde yer alan access_.check.html dosyasn an. Site >
Reports komutunu sein.
Reports iletiim kutusu alacaktr.

2. Report on mensnde Current Document seeneini iaretleyin. HTML Reports
blmndeki Accessibility seeneini yanndaki kutuya tklayarak iaretleyin.
Dier seenekleri iaretsiz olarak brakn ve Run dmesine tklayn.
Results panelinin Site Reports sekmesinde bir sonu listesi grntlenecektir. Burada
her e, iinde bulunduu belgenin dosya ad (burada geerli belge olan access_check.
html), enin kodda bulunduu satrn numaras ve enin ksa bir aklamas ile birlikte
gsterilmektedir.
Erleblrlk ve Test 499
3. Listedeki beinci eyi (Color is not essential ifadesiyle balayan e) sein.

Results penceresinin sol tarafndaki More Info simgesine tklayn.
Reference panelinde (Results panel grubunda yer alr) ok daha ayrntl bir aklama
belirecektir. Bu aklama, sz konusu eriilebilirlik kanunuyla ilgili zel bilgileri ve
sayfalarnz daha eriilebilir hale getirmek iin kullanabileceiniz yntem nerilerini ierir.
500 DERS 15
Bir Web sitesi olutururken renk, parlaklk ve kontrast, dikkate alnmas

gereken nemli elemanlardr. Monitrlerin verdii grnt cidd lde
farkllklar gsterebilir. Windows ekranlar Macintosh ekranlarna gre
genelde daha koyudur. Monitrnz kalibre etmek iin farkl ayarlar
kullanarak sayfalarnz test edebilirsiniz. Sayfalar test etmek iin farkl
monitrler kullanmak da faydal olacaktr.
Dreamweaver, Reference panelinde Web sayfalar oluturmak iin kullanlan kodlar

hakknda bilgi alabileceiniz bir dizi kitap sunmaktadr. UsableNet Accessibility Reference
ile, Section 508in (Ders 5te grmtk) gerektirdii pek ok standardn ayrntl
aklamasna kolayca eriebilirsiniz.
Btn panellerde olduu gibi Reference panelini de yeniden
boyutlandrabilirsiniz. Paneli byterek ierii daha rahat okuyabilirsiniz.
Panel kkken ierdii bilgileri okumak zor olabilir.
4. Reference panelinin st ksmndaki Book alr mensnde UsableNet
Accessibility Reference seeneinin iaretli olduundan emin olun. Yine
Reference panelindeki Rule mensnde Spacer IMG with Valid ALT sein.
Setiiniz eriilebilirlik standardyla ilgili aklama Reference panelinde grntlenecektir.

Aklamann hemen zerinde yeil karakterlerle bu eriilebilirlik standardnn Section
508deki konumu gsterilmektedir. Bu aklamada, btn boluk resimleri ve dekoratif
resimlerde (bunlarda art deil) uygun alternatif metinler kullanmann gereklilii
hakknda bilgi verilmektedir. Resimler iin alternatif bir metin belirlemeyi Ders
5te renmitiniz. Yine ayn derste boluk resimleri ve sadece grafiksel, estetik bir
grnm oluturmak iin kullanlan benzer resimler (bu resimler ziyaretiye nemli
bir bilgi iletmezler) iin Properties denetisindeki Alt mensnde <empty> seeneini
kullanmtnz.
5. Results panelini ve access_check.html dosyasn kapatn (Macintoshta) ya da
daraltn (Windowsta).
Reference paneli, Ders 16da reneceiniz gibi dorudan kodla almaya baladktan
sonra zellikle eriilebilir Web siteleri hazrlamak iin faydaldr.
Tarayc Uyumluluunu Kontrol Etmek

Web sayfalarnza ekleyebileceiniz pek ok eleman Web tarayclarnn sadece yeni
srmlerinde alr. rnein CSS ve katmanlar sadece 4.0 srmlerinde ya da daha yeni
srmlerde desteklenir. Bir siteyi kullanma amadan nce sayfalarnz test etmeniz ve varsa
hatalar dzeltmeniz gerekir. Bylece ziyaretilerinizi sayfalarnz sizin istediiniz ekilde
grebilir. Eriilebilir bir site hazrlamak iin hedef tarayclar belirleyebilir ve sayfalarnz bu
tarayclar dnerek tasarlayabilirsiniz. Eer sayfalarnz elde tanan cihazlar, okuyucular
ya da standart tarayclar dnda aralar kullanan insanlara ynelikse, sitenizi bu cihazlarla ve
yazlmlarla test etmelisiniz.
Bu uygulamada Dreamweaver kullanarak sayfalarnzdaki HTML kodlarn bir tarayc profili
kullanarak test edecek ve bu taraycnn sayfalarnzdaki kodlar destekleyip desteklemediini
greceksiniz. Kaydedilmi bir dosya, bir klasr ya da tm sitede tarayc kontrol yapabilirsiniz.
Dreamweaver sadece hatalar bildirir, dosyalarnzda herhangi bir deiiklik yapmaz. Sitenizi
uyumlu hale getirmek iin Dreamweaver tarafndan bildirilen hatalar dikkate almanz ve
sitenizin sayfalarnda kabul edilir bir zme ulaana kadar buna gre deiiklik yapmanz
gerekir. Kabul edilirlik dzeyi, siteden siteye gre deiebilir ve hedeflediiniz ziyaretilere
baldr.
1. Lesson_15_Testing/Check_Browser klasrndeki check_browser.html adl dosyay an.
Aadaki admlarda, bu dosyada bir hedef tarayc kontrol yapacaksnz.

2. Document ara ubuundaki Check Target Browser mensne tklayn ve Show All
Errors komutunu sein. Auto-check on Open seeneinin etkin olduundan emin
olun.
Ayn ilemi, File > Check Page > Check Target Browsers komutunu seerek de
Bir belgeyi atnzda tarayc hatas olup olmadn grmek iin Dreamweaver sayfay
otomatik olarak tarar. Document ara ubuundaki Check Target Browser simgesi bir hatann
502 DERS 15
alglanp alglanmamasna bal olarak deiir. Hata yoksa, ancak belki uyarlar ve bilgi
mesajlar varsa yeil bir onay iareti grntlenir. Hata bulunursa sar bir uyar simgesi
grntlenir.
Results panelinin Target Browser Check sekmesi alacaktr.
Results panelinde hatalar, ilerinde beyaz nlem iaretleri bulunan sekizgenlerle gsterilir.
Uyarlar iin siyah nlem iaretli sar genler kullanlr. Hatalar (errors), kodda tarayc
hatalarna ya da baka cidd grntleme problemlerine yol aan bir sorun olduunu
gsteren iaretlerdir. Uyarlar (warnings) ise, potansiyel grntleme sorunlarn
(bunlar hatalar kadar cidd olmayan ve genellikle bir sayfann grntlenmesini ya da
almasn etkilemeyen sorunlar olsalar da) gsterir. Results panelinde bilgilendirici
mesajlar da grebilirsiniz. Bunlar genellikle ilgili kod parasnn belirli bir taraycda
desteklenmeyebilecei ve gz ard edilecei konusunda sizi uyarrlar.
Burada check_browser.html belgesinde bir hata ve iki uyar bulundu.
Results panelini kapatabilir ya da yan tarafa tayabilirsiniz.
3. Document ara ubuundaki Check Target Browser mensnde Settings
seeneini iaretleyin ve sayfayla taraycy test etmek iin Netscape Navigator
srm mensnde 3.0 sein. OK dmesine tklayn.
Document ara ubuundaki Check Target Browser simgesinde sar bir gen greceksiniz.
Bu iaret sizi, belgenin baz blmlerinin Dreamweaverda test etmek zere ayarlanan Web
tarayclarndan biriyle uyumsuz olduu konusunda uyarr.
Results paneli tazelenecek ve belgeyle ilikilendirilen hatay ya da hatalar grntleyecektir.
Eer tazelenmezse Results panelini kapatn ve Document ara ubuundaki

Check Target Browser mensnden Show All Errors komutunu sein.
4. Results panelinde stten nc olarak grntlenen Style tag (Style etiketi)
hatasna ift tklayn.
Results panelinde, nc hata olan Style tag hatasn bulmak iin ekran
yukarya doru kaydrmanz gerekebilir.
Bir hataya ift tkladnzda Dreamweaver size o hatann tam olarak nerede olutuunu
gsterir. Belge penceresindeki grnm deiir ve Split grnmne geersiniz. Kodda
<style> etiketinin vurgulu olduuna dikkat edin. Sorunlu kodun alt krmz dalgal bir izgiyle
izilir (kod seildiinde bu rengi grmek zor olabilir). Kodda bu krmz izgiyle sadece
hatalar gsterilir. Uyarlar ve bilgilendirici mesajlar sadece raporlarda ve Results panelinde
grntlenir. Bu seenek, belgelerinizdeki hatalar dzeltmeye alrken ok iinize yarayabilir.
504 DERS 15
Burada herhangi bir deiiklik yapmanza gerek yok, nk Netscapein 3.0 srm bu
etiketi grmezden gelir. Bu e, uyar olarak deil, bir hata olarak deerlendirilir. nk sz
konusu etiket grmezden gelinse bile, bununla salanan destein eksik olmas grntleme
sorunlarna ya da beklenmeyen sonulara sebep olabilir. Bir Web sitesi hazrlarken
sayfalarnz, belirli tarayclarda desteklenmeyen btn kodlarn ya da elemanlarn ciddi bir
sorun karmayacandan emin olacak ekilde test etmeniz en iyisidir. Bir davran ciddi bir
sorun karmyorsa, taraycda herhangi bir hata ya da uyar olumaz (geri Dreamweaverda
baz hatalar ve uyarlar grebilirsiniz) ve tarayc desteklemedii elemanlar gz ard eder.
Eer taraycnzda bir hata ortaya karsa, sayfanz buna gre deitirmek, grnr bir hata
oluturmayan bir alternatif sayfa hazrlamak istersiniz.
5. Document ara ubuundaki Check Target Browser mensnden Settingsi
sein ve Opera seeneini iaretleyerek Opera taraycsn da Web taraycs
kontrolne dahil edin. OK dmesine tklayn.
Results panelinde, popler bir alternatif tarayc olan Operann farkl srmlerinde ortaya
kabilecek ilve baz hatalar grntlenecektir.
Dreamweaver, belgelerinizde hata kontrol yaparken tarayc profillerinden

faydalanr. Tarayc profillerine; desteklenen etiketler, nitelikler ve elemanlarla
ilgili bilgiler, uyarlar, hata mesajlar ve alternatif etiket nerileri dahil edilebilir.
Daha nceden hazrlanm bir tarayc profilini kullanarak ya da kendiniz bir
tane oluturarak listede bulunmayan tarayclar (WebTV ve cep telefonu
tarayclar gibi) iin profil ekleyebilir ya da oluturabilirsiniz. lave tarayc
profillerini Dreamweaver Exchange Web sitesinde (http://www.macromedia.
com/go/dreamweaver_exchange/) ya da Adobe Exchange Web sitesinde
(http://www.adobe.com/cfusion/exchange) bulabilirsiniz.
6. Results iletiim kutusunun sol tarafndaki Browse Report simgesine tklayn. Web
taraycsnda verilen bilgileri inceleyin ve tekrar Dreamweavera dnn.
Tarayc penceresinde ayrntl bir rapor grntlenecektir. Hedef tarayclarn verildii

listede, buradaki her tarayc srmnde bulunan hatalar ve uyarlarn saysn greceksiniz.
Check Target Browser zellii, bir belgeyi atnzda ve Check Target Browser mensnden
Show All Errors komutunu seerek test ilemini elle gerekletirdiinizde alr. Siz
alrken Document ara ubuundaki simge srekli gncellenmez.
7. Files panelini kullanarak Lesson_15_Testing klasr iinde yer alan Check_Browser
klasrn sein. Results panelinde Check Target Browser mensne tklayn (bu
men, Target Browser Check sekmesinin sol st kesinde yeil bir okla gsterilir)
ve Check Target Browsers For Selected Files/Folders In Site komutunu sein.
506 DERS 15
Macintoshta Check Target Browser mens/dmesi, siz Check Target Browsers for
Selected Files/Folders in Site seeneini iaretledikten sonra vurgulu olarak grnecektir.
Kontrol ilemini balatmak iin dmeye tklamanz gerekir. Windowsta kontrol ilemi siz
seiminizi yaptktan sonra otomatik olarak gerekletirilir, tekrar tklamanza gerek yoktur.
Results panelindeki Show mensnde bir seim yapmanz gerekmez. Siz
Check Target Browsers for Selected Files/Folders in Site komutunu
setiinizde Dreamweaver otomatik olarak Site Report seeneine geer.
Test ilemi gerekletirilir ve Results iletiim kutusunun Target Browser Check

sekmesinde bir rapor grntlenir.
Sitenizin grntlenme ekli, her farkl tarayc srmnde baz farkllklar ierir.
Sayfalarn grnmesiyle ilgili olarak baz dnler vermeniz gerekebilir. rnein
belirli JavaScript rutinleri, kendilerini desteklemeyen tarayclarda hata mesajlarnn
grntlenmesine sebep olur. Baz JavaScript rutinleri hi almaz ve ziyaretinin
bundan haberi bile olmayabilir. Olabildiince fazla sayda ziyaretiye erimek iin eski
tarayclarda hataya sebep olmayacak bir Web sitesi hazrlamanz gerekir. Ziyaretiler
asndan hata mesajlarn grmek yerine baz zelliklerden faydalanamamak ok
daha iyidir. Ziyaretileriniz farkl tarayc srmleri kullanyorsa, sayfalarnzn gezinti
sisteminde eski tarayclarca desteklenmeyen zellikler kullanmaz ya da tarayclarn en
yeni srmlerini kullanmayanlar veya ok farkl Internet uygulamalar kullananlar iin
alternatif sayfalar sunarsnz.
8. Document ara ubuundaki Check Target Browser mensnden Settingsi
sein. Netscape Navigator mensnden 4.0 seerek, Microsoft Internet
Explorer onay kutusunu iaretleyip bu menden 5.0 seerek ve Opera onay
kutusunun iaretini kaldrarak bu ayarlar varsaylan deerine getirin OK
dmesine tklayarak iletiim kutusunu kapatn.
Settings komutunu Results panelindeki Check Target Browser mensn

kullanarak da seebilirsiniz.
Check Target Browser ayarlar Dreamweavern orijinal varsaylan ayarlarna dnecektir.

Hangi tarayclar hedefleyeceim diye dnyorsanz, en popler yeni tarayclar ve
hedef kitlenizi hesaba katn. Siteniz kullanma almaya hazr hale geldikten sonra da
ziyaretilerinizin en ok hangi tarayclar tercih ettiini bulmak zere gereken bilgileri
toplayan ve deerlendiren programlar ve ilgili Web sitelerinin yapt istatistikleri kullanarak
hedef tarayclarnz belirleme almalarna devam edebilirsiniz. Daha fazla bilgi edinmek
iin Web hostunuzla, servis salaycnzla ya da sistem yneticinizle konumanz gerekebilir.
Pek ok Web tasarmcs sayfalarn Netscape, Explorer ve dier tarayclarn birok
srmn kullanarak test eder. Bu nedenle bilgisayarnzda tarayclarn farkl srmlerini
bulundurmanz iyi olacaktr.
Ak dosyalar kapatabilirsiniz.
Sitedeki Balantlar Kontrol Etmek

Web tasarmclar gelitirme srecinde sayfalarn dosya adlarn deitirmek, yeni dosyalar
eklemek ya da mevcut dosyalar silmek gibi ilemleri sk sk gerekletirir. Silinmi ya da
yeniden adlandrlm ve gncellenmemi dosyalara bal sayfalar gznzden kaabilir. File
Not Found hata mesajnn grntlenmesi ziyaretiler asndan ok can skc olabilir. Bu
mesaj, ziyaretilerin tklad balantnn gitmesi gereken sayfann mevcut olmadn gsterir.
imdiki uygulamada hatal balantlar bulmak iin Check Links zelliini kullanacaksnz.
Dreamweaver sadece site iindeki dosyalara giden balantlarn varln dorulayabilir.
Haric balantlar da listelenir, ama haric balantlarn geerli URLlere balandndan emin
olmak iin bunlar test etmek size kalmtr.
1. Lesson_15_Testing klasrndeki Check_Link klasrnde yer alan links.html
dosyasn an. File > Check Page > Check Links komutunu sein.
Results iletiim kutusu Link Checker sekmesi etkin olacak ekilde alacaktr. Check Links
zelliini altrdnzda varsaylan olarak Broken Links seili hale gelir. Hatal balantlarn
tamam Broken Links stununda grntlenir. Eer seili deilse Show mensnden Broken
Linksi sein.
Bu uygulamada listede sadece tek bir hatal balantnn grntlendiine dikkat edin.
508 DERS 15
Link Checker rapor penceresini amak iin Shift+F8 klavye ksayolunu da

kullanabilirsiniz.
2. Broken Links stununda gsterilen dosyann adna tklayn: ../About.html.
Dosya ad vurgulu hale gelecek ve hatal balantnn sa tarafnda bir klasr simgesi belirecektir.
3. ../About.html metninin zerine About.html yazn, sonra da Return (Macintoshta)

ya da Enter (Windowsta) tuuna basn.
Klasr simgesine tklayarak balantnn gitmesi gereken doru dosyaya bu ekilde de

ulaabilirsiniz.
Ayn dosyaya ait baka hatal referanslar varsa, bir iletiim kutusu alr ve dier referanslar
da dzeltmek isteyip istemediinizi sorar. Yes dmesine tkladnzda bu dosyaya ait btn
referanslar dzeltilir.
Dosyalar ve klasrleri, Files panelinde setikten sonra Files panelinin balam
mensne tklayp File > Check Links komutunu seerek de kontrol edebilirsiniz.
Properties denetisini kullanarak balantlar dzeltmek ya da belgeyi
grntlemek isterseniz, Link Checker penceresinde dosya adna ift tklayarak
dosyay an. Files panelindeki balam mensn Ders 14te kullanmtnz.
Bu dosyay kaydedip kapattktan sonra Results panelini ak brakabilirsiniz.
Artk Dosyalar Kontrol Etmek

Bir Web sitesi hazrlarken yeni dosyalar oluturur, ayrca kimi dosyalar yeniler ve yeni
dosyalarla eski dosyalar deitirirsiniz. Gelitirme srecinde belirli dosyalarn birden
fazla versiyonunu oluturabilir ya da dier dosyalar tamamen gz ard edebilirsiniz. Artk
dosyalar (orphan files), site dosyalar arasnda bulunan, ama sitede kullanlmayan dosyalara
denir. Bunlar, kendilerine atanm bir balant olmayan HTML dosyalar ya da hibir bir
sayfada kullanlmayan resimler olabilir.
1. Files panelinde Web sitenize ait yerel kk klasrn (Site - Yoga Sangha) sein.
Artk dosyalar raporu zelliini kullanabilmek iin nce btn sitede bir balant kontrol
yapmanz gerekir.
2. Results iletiim kutusunun Link Checker sekmesine tklayn ve Show alr

mensnde Broken Linksin seili olduundan emin olun. Check Links
simgesine (yeil ok) tklayn ve Check Links mensnden Check Links For
Entire Current Local Site komutunu sein.
510 DERS 15
Balant kontrol ilemini balatmak iin Macintosh kullanclarnn vurgulu durumdaki

Check Links mensne/dmesine tklamas gerekir. Windowsta ise Check Links for
Entire Site komutu seildikten sonra kontrol ilemi hemen balar.
Results panelinin durum ubuunda Dreamweavern siteyi kontrol ettiini grebilirsiniz.
lem tamamlandktan sonra iletiim kutusunda byk bir liste belirir. Results panelinin
durum ubuunda raporun bir zetini grrsnz.
3. Show mensnde Orphaned Files seeneini iaretleyin.
letiim kutusunda artk dosyalardan oluan bir liste belirecektir.
4. Results panelini kapatn (Macintoshta) ya da daraltn (Windowsta).
Artk dosyalarn silinmesi, sitenizin kaplad disk alann azaltabilir. Byk sitelerde
dzenli bakm ilemleri uygulamak ok faydaldr. Btn artk dosyalarn belirlenmesi ve
silinmesi sitenizin bykln nemli lde etkileyebilir.
Artk dosyalar silerken dosya listesini ayrntl bir ekilde incelediinizden emin olun.
Siteniz iin gerekli ama herhangi bir dosyaya balanmam durumda olan ya da baka bir
dosyada kullanlan dosyalar olabilir.
Bu uygulama iin listede bulunan artk dosyalarn hibirini silmeyin. Yoga Sangha proje
sitesindeki dosyalar bu kitaptaki derslerin tamamlanmas iin gereklidir. Sonu listesinde
birok hatal balant ve artk dosya mevcuttur, nk bu proje sitesi derslere elik etmesi
dnlen dosyalar oluturmak iin tasarlanmtr ve gerek bir site deildir..
Site in Rapor Oluturmak

Sitenizi test ederken Reports komutunu kullanarak eitli HTML nitelikleriyle ilgili
raporlar derleyip oluturabilirsiniz. Bu komut, eitli seenekleri kontrol etmenizi salar
(balksz belgeleri ve gereksiz yuvalanm etiketleri aramak da bunlara dahildir). Rapor
zelliini tek bir belgede, bir klasrde ya da sitenin tamamnda kullanarak sitenizi
kullanma amadan nce olas sorunlar yakalayabilir ve hatalar gidebilirsiniz.
1. Files panelini kullanarak Lesson_15_Testing klasrnde yer alan Reports
klasrn sein. Files panel grubundaki balam mensne (sadece
Macintoshta) tklayn ve Site > Reports komutunu sein.
Reports iletiim kutusu alacaktr.

2. Report on mensnde Selected Files In Site seeneini iaretleyin. Workflow
alanndaki btn seenekleri iaretsiz olarak brakn. HTML Reports alannda
Accessibility dndaki btn seenekleri iaretleyin.
Workflow seenekleri daha ok bir ekiple birlikte alrken ve dosyalar kimlerin aldn
ve oluturulan tasarm notlarn grmeniz gerektiinde faydal olur. Alma-gnderme
(Check In/Out) ve tasarm notlar (Design Notes) zelliklerini Ders 14te grmtk.
HTML Reports blmnde birletirilebilir yuvalanm fon etiketleri (Combinable Nested
Font Tags), eriilebilirlik (Accessibility), eksik alternatif metinler (Missing Alt Text),
gereksiz yuvalanm etiketler (Redundant Nested Tags), silinebilir bo etiketler (Removable
Empty Tags) ve balksz belgelerle (Untitled Documents) ilgili seenekler yer alr.
Rapor zelliini geerli belgede, bir yerel sitenin tamamnda, bir sitede seilen dosyalarda
ve belirli bir klasrde kullanabilirsiniz.
512 DERS 15
3. Raporu oluturmak iin Run dmesine tklayn.
Results panelinde sonular bir liste halinde grntlenecektir. Burada Dreamweaver

About.html belgesine henz bir balk verilmediini bildirerek sizi uyarr.
4. Results panelinin sol alt kesinde yer alan Save Report dmesine tklayn ve
raporu Lesson_15_Testing klasrne kaydedin.
Btn raporlar .xml dosya uzantsyla XML dosyalar olarak kaydedilir.

Reports komutu, sayfalarnzdaki sorunlar listeler, ama zmez.
Rapor zelliini kullandktan sonra Commands > Clean Up HTML komutunu
seerek istediiniz bir ak belgede Clean Up HTML zelliini kullanabilirsiniz.
Bu komut, site raporunda bulunan sorunlarn hepsini olmasa da ounu zer.
Bir dizi enin yer ald bir iletiim kutusu alr. Dreamweaverdan silmesini
istediiniz eleri seebilirsiniz: Bo etiketler (Empty Tags), gereksiz
yuvalanm etiketler (Redundant Nested Tags), Dreamweavera ait olmayan
HTML aklamalar (non-Dreamweaver HTML comments), Dreamweaver
HTML aklamalar (Dreamweaver special markup) ve zel etiketler (specific
tags). Mmkn olan yerlerde (eer sayfalarnzda <font> etiketleri
kullanlyorsa) yuvalanm <font> etiketlerini birletirmeyi ve ilemin
tamamlanmasndan sonra gnln gsterilmesini de tercih edebilirsiniz.
Gnlk, belgede yaplan deiikliklerin ayrntl bir listesini sunar. Bu zellikle
ilgili ayrntl bilgileri Ders 16da kodlarla alrken greceiz.
Yazm Denetimi
Metinlerde yazm hatalarnn olmamas, Web sitesinin grnm asndan nemli bir
noktadr. Dreamweaver, Web sayfalarnzda bir kelime ilem program gibi (rnein
Microsoft Word) yazm denetimi yapabilir.
Dreamweaver'da (dier Macromedia yazlmlarnda olduu gibi) Trke yazm
denetimi bulunmamaktadr.
1. Lesson_15_Testing klasrnde yer alan check_spelling.html dosyasn an.
Text > Check Spelling komutunu sein.
Check Spelling iletiim kutusu alacaktr. Sangha szcnn seili olduunu

greceksiniz.
2. Ignore dmesine tklayarak Sangha szcn atlayn ve Anusara szcn

de atlamak iin bu dmeye tekrar tklayn.
Trainning szc seilecektir. Benzer ekilde yazlan baz (nerilen) szckleri ieren bir
liste greceksiniz. Listeden Trainingi sein ve Change dmesine tklayn.
check_spelling.html belgesini kaydedip kapatabilir ve sonra da balam mensne tklayp

Close panel group komutunu seerek Results panelini kapatabilirsiniz.
Ne rendiniz?
Dreamweavern eriilebilir Web sayfalar oluturma konusunda size nasl yardmc

olabileceini rendiniz (Sayfa 499-502).
Tarayc uyumluluunu kontrol etmek ve herhangi bir hata ya da desteklenmeyen bir
etiket olup olmadn grmek zere sayfalar, klasrleri ya da bir sitenin tamamn
test etmek iin tarayc profillerinden faydalandnz (Sayfa 502508).
Sitenizde herhangi bir hatal balant olup olmadn anlamak iin sayfalarnzdaki
balantlar test ettiniz (Sayfa 508509).
Sitenizde artk dosya olup olmadn kontrol ettiniz ve bunlar bir liste halinde
grntlediniz (Sayfa 509511).
Gereksiz yuvalanm etiketler ve balksz belgeler gibi Web sitelerinde sk karlalan
sorunlar belirlemek iin site raporlar oluturdunuz (Sayfa 511513).
Bir belgede yazm denetimi yaptnz ve yanl yazlm szckleri dzelttiniz
(Sayfa 513-514).
514 DERS 15
16
Kodlar
Dzenlemek
Web sayfalarnzn oluturulmas iin kullanlan kodlar, bu kodlarn nasl dzenlendiini,

hatta bunlar sfrdan balayarak yazmay (elle kod yazma olarak da bilinir) rendikten
sonra, bu sayfalardaki elemanlarn birou zerinde daha fazla kontrol imknna
kavuacaksnz. Dreamweaver iin byk ksmn stlenerek, siz sayfalarnz grsel
olarak tasarlarken arka planda kodu oluturur. Bununla birlikte, Dreamweaver sadece
bir grsel editr deildir. Elle kod yazmak ve kodlar dzenlemek iin kullanlan kapsaml
bir ara ve kaynak setine de sahiptir. Bu zellikler, ileri seviyedeki programclarn hassas
deiiklikler yapmalarna, belgelerindeki sorunlar gidermelerine ve kod gelitirme
Bu derste, dorudan
kodlarla alacak ve
sreci hzlandrmak
iin Snippetler ve
Quick Tag Editor
gibi zellikleri
kullanacaksnz.
konusundaki en son yenilikleri kullanmalarna (bu yenilikler Dreamweaverdaki

zelliklerin gcn asa bile) imkn verir.
Dreamweavern tanmyor olabilecei eleri tantabilmeniz ve kodlarn zerinde sahip
olduunuz kontrol imkn, onu hzla deien Web gelitirme dnyasnn gerisinde
kalmadan kullanmaya devam edebileceiniz ok esnek bir program haline getirir.
Dreamweaver kullanmaya yeni balyor olsanz bile, bu kod zelliklerini kullanabilir ve
kodlar hakknda bilgi edinmek iin Dreamweavern kod aralarndan ve kaynaklarndan
faydalanabilirsiniz. JavaScript, ColdFusion, ASP, JSP, XML ve daha pek ok farkl
programlama diliyle almak iin Dreamweaver kullanabilirsiniz. Bu derste, HTML
(HyperText Markup Language) ile alacaksnz.
Bu derste, kodlar dzenlemeyi ve bunlar elle oluturmanza imkn salayan birok
arac kullanmay reneceksiniz. Bu dersin amac, Dreamweaverda bulunan kapsaml
kod dzenleme zelliklerine temel bir giri yapmaktr. Bu aralarn tam olarak
incelenmesi bu kitabn kapsam dndadr.
Bu derste elde edilen sonucu grmek isterseniz, Lesson_16_Code/Completed/Training
klasrndeki training.html ve asana.html dosyalarn an.
Neler reneceksiniz?
Belge grnmleri arasnda gei yapmay reneceksiniz.

HTML kodlarn dzenlemek iin Code grnmn kullanacaksnz.
Code ara ubuunu kullanacaksnz.
Meta etiketleri ve HTML aklamalar oluturacaksnz.
Tag Inspector kullanacaksnz.
Quick Tag Editor kullanacaksnz.
Snippetlar kullanacaksnz.
XHTML kodlarn temizleyeceksiniz.
Bir Word HTML belgesindeki gereksiz etiketleri temizleyeceksiniz.
Dreamweaver gelitireceksiniz.
Yaklak Sre
516 DERS 16
Ders Dosyalar
Ortam Dosyalar:
Lesson_16_Code/Images/(dosyalarn tm)
Balang Dosyalar:
Lesson_16_Code/Training/training.html
Lesson_16_Code/Training/asana.html
Tamamlanm Proje:
Lesson_16_Code/Completed/Training/training.html
Lesson_16_Code/Completed/Training/asana.html
Belge Grnmleri Arasnda Gei Yapmak

Sayfalarnz gelitirirken, Dreamweaver tarafndan retilen kaynak kodu grmeniz
gerekebilir. Belki kayp bir satr sonu ya da grnmeyen baka bir karakter, elde etmeye
altnz sonucu bozuyor olabilir, ama bunu belge penceresinde bulamazsnz. Ama
HTML kaynak koduna bakarak satr sonunu kolayca bulup kaldrabilirsiniz.
Dreamweaver, size belgelerinizi grntlemeniz iin seenek sunar: Sayfaya
eklemi olduunuz btn nesneleri (metinler, resimler, tablolar vb.) gsteren Design
grnm; sadece HTML kaynak kodunu gsteren Code grnm ve Code ile Design
grnmlerinin bir kombinasyonu olan Split grnm. Aadaki uygulamada, bu
grnmlerin her birini kullanma ansn bulacaksnz.
1. Lesson_16_Code/Training klasrndeki training.html belgesini an.
Document ara ubuu, Macintoshta belge penceresinin tepesinde, Windowsta da belge

penceresinin stnde bamsz bir panel olarak grnecektir.
Kodlar Dzenlemek 517
Document ara ubuu grnmyorsa, View > Toolbars > Document

komutunu sein.
2. Document ara ubuundaki Code dmesine tklayn.
View > Code komutunu seerek de Code grnmne geebilirsiniz.
Code grnmnde, Web sayfasnn grsel elemanlarn tarayc penceresinde olduu

ekilde grmezsiniz. Bunun yerine, bir metin editrnde HTML kodunu grrsnz.
Document ara ubuu, kodlarla ilgili olarak aadaki kontrolleri ierir:
Refresh Design View: Bu zellik, Design grnmn (sayfanzn grsel temsili), Split
grnmn kullanrken Code grnmnde yaptnz deiiklikleri yanstacak ekilde
gnceller.
View Options: Bu men, Code grnmn ayarlayan seenekler ierir. rnein
kodun her bir satrna satr numaralar ekleyebilir, sayfann yatay olarak kaydrlmasnn
gerekmemesi iin szck sarma (wrapping) zelliini etkinletirebilir ve kodu daha kolay
grntlenecek hale getirebilirsiniz. Dreamweaver > Preferences (Macintoshta) ya da Edit
> Preferences (Windowsta) komutunu seip Code Format kategorisine geerek bunlarn
arasndan istediiniz seenekleri zelletirebilirsiniz.
Refresh Design View Options
View dmesi dmesi
518 DERS 16
Code grnmyle ayn seenekleri ve kontrolleri sunan Code Inspector da

(Kod Denetisi) aabilirsiniz. Aradaki fark, Inspectorn ayr bir pencerede
almasdr. Baz gelitiriciler iki monitr kullanr ve bunlardan birinde Code
Inspector grntlerler. Bylece, belge penceresinin Design grnmnde
alrken ayn anda kodu da grebilirler. Bu Split grnmne benzer bir ileve
sahiptir, ama grnmlerin her birine daha fazla yer ayrr. Code Inspector
amak iin, Window > Code Inspector komutunu sein ya da F10 tuuna basn.
3. Document ara ubuundaki Split dmesine tklayn.
Split grnmne, View > Code and Design komutunu seerek de

geebilirsiniz.
Bu grnmde, hem tasarm, hem de sayfay oluturan kodu grebilirsiniz. Design ve

Code blmelerinin arasndaki kenarl srkleyerek Code blmesinin bykln
ayarlayabilirsiniz. Code blmesinin konumunu deitirmek iin, ara ubuundaki View
Options dmesine tklayn ve menden Design View on Top sein. Bu men, cetveller,
grsel yardmclar ve zgara da dhil olmak zere grnmn ayarlanmasnda kullanlan
dier seenekleri de ierir.
4. Ara ubuundaki Design dmesine tklayn.
Design grnmne, View > Design komutunu seerek de geebilirsiniz.
Belge pencereniz, sayfanzdaki btn grsel elemanlar yaklak olarak taraycda

grndkleri ekilde gsteren Design grnmne geecektir. Dier belge grnmlerinde
de olduu gibi, grnmle ilgili eitli seeneklere ara ubuundan eriebilirsiniz.
Code Grnmnde HTML Kodunu Dzenlemek

Kodlar elle dzenleyebilirsiniz. Dreamweaver yaptnz bu deiikliklerin zerine
kaydetmez. Bununla birlikte, yaplan bir deiiklik yanl gibi grnyorsa, Dreamweaver
bunu vurgulayarak sizi uyarr. Bazen aadaki admlarda gsterildii gibi kodda elle
ayarlamalar yapmanz gerekebilir.
1. training.html belgesinde ekleme noktasn formun iinde herhangi bir yere
yerletirin ve Etiket Seicide <table> etiketine tklayn.
teki tablo, seili olduunu gsterecek ekilde kaln siyah bir izgiyle evrelenecektir.
2. Split grnmne gein. Kodda tablonun balad yeri bulun. Bu ksmn
aadaki gibi grnmesi gerekir:
<table width=90% border=0 align=center cellpadding=0 cellspacing=10>
Tablo, belge penceresinin Design grnmnde seildii iin, Code grnmnde de buna
karlk gelen kod vurgulanacaktr. Al table etiketini bulmak iin, Code grnmndeki
seimin ba ksmna bakn.
Bu tabloda, tablonun amacn tanmlayan bir zet yer almamaktadr. Bir tablo eklediinizde,
eitli eriilebilirlik zellikleri kullanlr hale gelir. Bunlarn arasnda tablo iin zet
oluturma seenei de yer alr. Bununla birlikte, bir tablo eklendikten sonra (kodu ya da Tag
Inspector kullanmadnz takdirde) bir zet eklemeniz mmkn deildir.
3. Code grnm blmesinde, ekleme noktasn al table etiketinin sonundaki >
karakterinin nne yerletirin.
Code grnm blmesinin etkin hale geldii, kenarlarnn etrafnda kaln bir
izgi grntlenerek (Macintoshta) ya da kenar boluu vurgulanarak
(Windowsta) gsterilir.
520 DERS 16
Code grnmnde grdnz HTML etiketlerinden biriyle ilgili ayrntl bilgi edinmek
isterseniz, ekleme noktasn ilgili etiketin iinde herhangi bir konuma yerletirin ve Shift+F1
tularna birlikte basn. Results penceresinin Reference sekmesi alacaktr. Bu sekmede
otomatik olarak o an seili durumda bulunan nitelikle (burada cellspacing nitelii, nk
ekleme noktasnn bulunduu al table etiketinde en son tanmlanan nitelik cellspacing
idi) ilgili bilgiler grntlenir. Reference panelinin st ksmndaki Tag mensnden
dier etiketleri de seebilirsiniz. rnein Tag mensnden TABLE setiinizde, <table>
etiketi hakkndaki bilgiler grntlenir. Tag mensnn sanda bulunan ilve bir
men de, <table> etiketine ait belirli bir nitelii semenizi ya da Description seeneini
kullandnzda <table> etiketinin kendisiyle ilgili ayrntl bir aklamay grmenizi salar.
rnein, sradaki admlarda oluturacanz summary (zet) nitelii ile ilgili daha fazla bilgi
edinmek iin, bu menden summaryyi seebilirsiniz.
Reference panelinin st ksmndaki Book mensn kullanp baka bir kitap

seerek OREILLY HTML Reference hakkndaki tantc bilgileri okuyabilirsiniz.
Bunun ardndan Book mensn kullanarak OREILLY HTML Reference
tekrar sein. HTML referans materyal blmyle ilgili tantc bilgiler
grntlenecek ve bu kez herhangi bir etiket seili durumda olmayacaktr.
4. Code grnm blmesinde boluk tuuna bastnzda <tag> etiketine ait

niteliklerin bir listesini greceksiniz.
Siz Code grnmn kullanrken Dreamweaver Code Hinting ad verilen bir zellikten
faydalanmanz salar. Code Hinting zellii siz yazarken ilgili etiketin niteliklerini
grntler. Siz harfleri girerken bu zellik sizin girdiiniz harf dizisini, istediiniz nitelii
bulana kadar, mevcut niteliklerle eletirmeye alr.
5. su yazdnzda Code Hinting zellii bu girii summary niteliiyle
eletirecektir. summary nitelii seildikten sonra Enter (Windowsta) ya
da Return (Macintoshta) tuuna basn. Etikete summary= karakter katar
eklenecek ve ekleme noktas ift trnak iaretlerinin arasnda kalacaktr. ift
trnak iaretinin arasna Please enter your contact information and information
about your experiences with yoga yazn. Design grnm blmesine
tklayarak belgenin grnmn tazeleyin.
Kodda bir deiiklik yaptktan sonra Properties denetisinde beliren Refresh

dmesine de tklayabilirsiniz.
HTML kodunu dzenlerken bir hata yaptnz takdirde, Dreamweaver bu hatay

dzeltmez. Dreamweaverda, geersiz grnen kodlar parlak sar renkle vurgulayan
Highlight Invalid HTML (varsaylan durumda etkin deildir) adnda bir zellik vardr.
Dzeltmeleri sizin yapmanz gerekir. Bu zellik, Dreamweavern RoundTrip HTML
olarak bilinen avantajlarndan biridir. Dreamweavern kodu deitirmemesi nemlidir,
nk Dreamweavern geersiz olarak grd bir kodu kasten o ekilde yazm
olabilirsiniz. rnein Web sunucunuzun tand, ama standart HTML kodlar olmayan
zel etiketler ekleyebilirsiniz. Dreamweaver bunlar deitirmez. Invalid Markup (Geersiz
aretleme) vurgusu, sadece Dreamweaverda grnr ve taraycda grnenleri etkilemez.
522 DERS 16
Properties denetisi, size vurgulanan seimin Invalid Markup olduunu bildirir ve sorunlu
etiketleri, kodun neden geersiz olduu ile ilgili ek bilgiler ve sorunun nasl giderilebilecei
konusunda bir neriyle birlikte listeler.
Code grnmnde View > Code View Options > Highlight Invalid HTML komutunu
seerek Invalid Markup vurgusunu etkinletirebilir ya da bu seenein etkinliini
kaldrabilirsiniz. Design grnmndeki Invalid Markup vurgularn kaldramazsnz.
Yaptnz deiikliin bir etkisi yokmu gibi grnse de, sayfa artk daha eriilebilir bir
durumdadr. Dreamweavern grsel arabirimini kullanarak yapamayacanz bir deiiklik
yapmanz gerekiyorsa, summary etiketleri ekleyebilir ya da kodu dzenleyebilirsiniz.
Ayrca, Code grnm blmesinde bir etikete sa tklayarak ya da Ctrl tuunu
basl tutup tklayarak (Macintoshta tek dmeli fare kullananlar iin) balam
mensn aabilir ve buradan Edit Tag komutunu seebilirsiniz. Bunu
yaptnzda Tag Editor iletiim kutusu alr ve burada etiketi dzenlemek iin
kullanabileceiniz bir dizi kategori ve seenek grntlenir. Bu kategorilerin ve
seeneklerin says, seilen etikete bal olarak deiir.
Code Ara ubuunu Kullanmak

Dreamweaver 8de Code ara ubuu adn tayan ve kod yazmayla ilgili btn kolaylklar
sunan bir ara mevcuttur.
1. Split modunda grntlediiniz training.html sayfasnn Design grnm
ksmnda ekleme noktasn tablonun iine yerletirin ve Etiket Seicide
<table> etiketini sein. Belgenin Code grnm ksmnda yer alan Code ara
ubuundaki Collapse Full Tag simgesine tklayn.
Code ara ubuu; etiketleri bir btn olarak, belirli bir seimi ya da seilen etiketin ya
da seimin dndaki her eyi (Alt/Option tuunu basl tutmanz gerekir) daraltmanz
salar. Bu da kod zerinde almadnz blmlerini kapatmanz ve kodun asl almak
istediiniz blmlerini grntlemenizi salar.
2. Code ara ubuunda yer alan Expand All dmesine tklayn.
Siz bu dmeleri kullandnzda Dreamweaver kodlara herhangi bir zarar vermez, Sadece
rahat grntlenmesi iin kodun belirli blmlerini gizler. Kodunuzu istediiniz zaman
geniletebilirsiniz.
3. Ekleme noktasn herhangi bir tablo satr etiketinin (<tr>) iine yerletirin. Code
ara ubuundaki Select Parent Tag dmesine tklayn.
Dreamweaver ebeveyn etiketi (burada <table> etiketi) seecektir.

4. <table> etiketi seili durumdayken Code ara ubuundaki Apply Comment
dmesine tklayn. Alan menden Apply HTML Comment komutunu sein.
524 DERS 16
HTML aklamalar koda notlar eklemek, kodun belirli bir ksmnn kullanln
gstermek ya da aklamak ya da kodu silmeden belgenin bir ksmnn etkinliini
kaldrmak iin kullanlabilir. Code ara ubuunun Apply Comment seeneini
kullanarak kodun belirli bir ksmn abucak aklama haline getirebilirsiniz.
Dreamweaver tabloyu HTML aklama etiketlerinin () arasna alacak ve bylece
sayfa Web taraycsnda grntlenirken tablonun grnmesini engelleyecektir.
5. Aklama haline getirilen <table> etiketi seili durumdayken Code ara
ubuundaki Remove Comment dmesine tklayn.
CSS aklamalar, standart HTML aklamalarndan farkldr. Bir CSS

aklamas, stil sayfasnda /*Aklama*/ olarak grnr. CSS aklamalarn,
Apply Comment dmesine tkladktan sonra alan menden Apply /* */
Comment komutunu seerek ekleyebilirsiniz.
Kodun iinde aklama haline getirilmi bir blm seerseniz, Dreamweaver seimi
evreleyen aklamalar sizin yerinize silecektir.
training.html belgesini ak brakabilirsiniz. Bu dosyay bu derste daha sonra tekrar
kullanacaksnz.
Dreamweaver, kullanclara kodun gelitirilmesinde hassas kontrol imkn
salayan pek ok kod dzenleme arac ierir. Tag Library Editor kullanarak
standart ve zel etiketlerle ilgili bilgileri saklayabilirsiniz. Bu ara, geerli
etiketlerde deiiklik yapmanza ve Dreamweaver ile btnleik olarak bulunan
kapsaml etiket veritabanna dardan yeni etiketler aktarmanza imkn salar.
Etiketler bir ktphane sisteminde dzenlenmitir. Bu ktphanelerin her biri
farkl bir kod tipine (HTML, CFML, ASP, vs. gibi) zgdr. Ktphane
ekleyebilir ya da mevcut ktphaneleri silebilirsiniz. Ktphanelerin her biri,
etiket formatn (Tag Format) dzenlemek iin kullanabileceiniz eitli etiketler
ierir: Line Breaks (Satr Sonlar), Contents (erikler) ve Case (BYK/Kk
Harf). Preview metin alan, etiketi ayarladnz seeneklere gre grntler.
Her etiket eitli nitelikler ierir. Bu nitelikler de zelletirilebilir. Edit > Tag
Libraries komutunu seerek Tag Library Editor an. Etiket ktphanelerini,
etiketleri ve etiket niteliklerini eklerken, deitirirken ya da silerken dikkatli olun.
Bu iletiim kutusu zellikle, deitirmek istedikleri kodu gerekten tanyan ileri
seviyedeki Dreamweaver kullanclarna yneliktir.
Yeni Pencerenin Konumunu Ayarlamak

Yeni pencerelerin niteliklerini Open Browser Window davranyla nasl kontrol
edebileceinizi Ders 8de renmitiniz. Code grnmnde HTML kodunu dzenleyerek bu
pencerelerin konumlarn da belirleyebilirsiniz.
1. explorations/poses.html belgesini asl Web taraycnzda nizleyin. lk stundaki
Uttanasana balantsna tklayn.
lgili yoga pozisyonunu gsteren fotorafn yer ald yeni bir tarayc penceresi alacaktr.
fwd-fold.jpg dosyasn semek iin Open Browser Window davrann kullanarak bunun
gibi yeni bir pencere oluturmutunuz, ama pencerenin tam olarak nereye yerletirileceini
belirleyemiyordunuz. JavaScript koduna belirli parametreler ekleyerek pencerenin
ziyaretinin ekranndaki konumunu tam olarak belirleyebilirsiniz.
2. poses.html belgesi ak durumdayken Code grnm blmesinde, ziyareti
balantya tkladnda yeni tarayc penceresini aan kodu bulun.
Ekleme noktasn Design grnm blmesinde Uttanasana balantl metninin iine

yerletirerek bu kodu bulabilirsiniz. lgili kod Code grnm blmesinde otomatik olarak seili
hale gelecektir. Bunun, Code grnm blmesindeki 106 numaral satrda olmas gerekir.
526 DERS 16
Aadaki gibi bir kod greceksiniz:

<a href=# onclick=MM_openBrWindow(images/fwd-fold.jpg,,width=405,
height=605)>Uttanasana</a>
3. Height parametresinin deerinin yanna bir virgl ekleyin ve aadaki kodu

girin: top=0,left=0
Virgl ve kodu, 605 deerinden sonra, kesme iaretinden nce olacak ekilde
yazdnzdan emin olun. Boluk kullanmayn.
top ve left parametreleri pencereyi ekrann st ve sol yanna gelecek ekilde yerletirir.
0 parametresi kullanlrsa, yeni pencere bu koordinatlara (ekrann sol st kesine)
yerletirilir.
Elde edilen kod aadaki gibi olacaktr:

<a href=# onclick=MM_openBrWindow(images/fwd-fold.jpg,,width=405,
height=605,top=0,left=0)>Uttanasana</a>
4. Dosyanz kaydedin ve Web taraycnzda test edin.
Yeni pencere ekrannzn sol st kesinde grntlenecektir.

5. ki parametreyi de 200 olarak deitirin ve sayfay taraycda
grntlediinizde meydana gelen farkllklar inceleyin.
Yeni pencere farkl bir konumda grntlenecektir.

Yeni bir tarayc penceresinin konumunu tanmlarken, pencereyi ok aada ya da ok
sada olacak ekilde yerletirmemeye dikkat edin. Kk monitr kullanan ziyaretiler,
ayarlanan koordinatlar pencereyi ekran boyutlarnn dna yerletirdii takdirde
pencerenizi gremeyebilirler.
528 DERS 16
Meta Etiketleri
Kodlarnza, taraycda grntlenmeyen, ama yine de belge iin nemli olan belirli
elemanlar ekleyebilirsiniz. Bu tr elemanlara rnek olarak meta etiketlerini ve HTML
aklamalarn gsterebiliriz. Meta etiketleri pek ok amala kullanlabilir. Meta etiketleri
(meta tags) belgeleri tantr ve tanmlar, telif hakk bilgilerini verir, yazarlar ya da
yaratclar tantr, ziyaretileri farkl sayfalara ynlendirir, belge zetinin baz arama
motorlarndaki grnmn kontrol eder ve arama motorlarndaki sralamay etkiler.
1. training.html belgesindeyken View > Head Content komutunu sein.
Design grnm blmesinin zerinde Head Content alan belirecektir. Burada,

belgenizin head (ba) ksmnda, <head> ve </head> etiketlerinin arasnda bulunan elere
ait simgeler grnr. Bu aamada, bu alanda bulunan eler iinde belgenin balna
ait simgeler, http-equiv niteliiyle birlikte <meta> etiketi, belgenin head blmnde
grnmesi gereken JavaScript kod paralar ile harici CSS belgesine ait balant ve dahili
CSS bulunur.
Siz head blmesindeki simgelere tklarken, Code grnm blmesinde bu elere karlk
gelen kodlar vurgulanacaktr.
Bu head ierik alann grntlemek iin Design grnmnde ya da Split grnmnde
olmanz gerekir. Code grnmndeyken, View > Head Content seenei seilemez
durumdadr. Bu uygulama iin Split grnmn kullanmanz gerekir.
2. Document ara ubuundaki View Options dmesine tklayn ve Design View on
Top sein. Ayn View Options mensnde, Line Numbers seeneinin etkin durumda
olduundan emin olun. mleci, Design ve Code grnmlerini ayran ubuun zerine
getirin. mle iki oklu bir izgiye dntnde ubua tklayn ve Code grnm
byyecek, Design grnm de daralacak ekilde yukar doru srkleyin.
View Options mensn kod satr numaralar (Line numbers), klavuzlar

(Guides), cetveller (Rulers), szck sarma (Word Wrap) gibi dier kod ve
tasarm aralarn amak ve kapamak iin de kullanabilirsiniz. Buradaki
grnm seenekleri (View Options) sadece Dreamweavera zg aralardr ve
sayfann Web taraycsndaki grntsn etkilemezler.
530 DERS 16
Head alan ieriini belge pencerenizin st ksmnda, Design grnm blmesinin

hemen stnde greceksiniz. Ayrca Design grnm blmesi minimum boyutunda
grnecektir. Head alanndaki simgeleri setiinizde, Code grnmnde bunlara karlk
gelen kodlar kolayca grebilirsiniz.
3. Code grnm blmesinde, ekleme noktasn belgenin baln ieren 5

numaral satrn sonuna, </title> etiketinin hemen arkasna yerletirin, sonra
da Return (Macintoshta) ya da Enter (Windowsta) tuuna basn. Insert ara
ubuunda HTML kategorisini, sonra da Head mensnden Description
sein.
Description iletiim kutusu alacaktr. Burada sayfanzla ilgili aklamay yazabileceiniz

bir metin alan greceksiniz. Sayfanzn ieriini aklayan ksa bir zet vermek amacyla
kullanlan description meta etiketi, baz arama motorlarnda gsterilen arama sonularna
dahil edilir. Sayfalarnza description meta etiketini eklemeniz, sitenizin tantm asndan
ok nemlidir.
4. Submit your contact information to receive more information about Yoga Sangha
training offerings yazn. OK dmesine tklayn.
Aklamalar ksa olmal, yani en fazla 200 karakterden olumaldr. Arama motorlarnn
ounda belirli bir snr deeri vardr. Karakter says bu snr deerinin zerine kyorsa,
fazla gelen ksmlar kullanlmaz. yi bir aklama, belgenin ieriini ksa ve z olarak
vermelidir.
5. Ekleme noktas u anda 6 numaral satrn sonunda olmaldr. Yeni bir satr
oluturmak iin Return (Macintoshta) ya da Enter (Windowsta) tuuna
basn ve Insert ara ubuunun HTML kategorisindeki Head mensnden
Keywords sein. Keywords metin alanna yoga, sangha, ansara, training
yazn. OK dmesine tklayarak Keywords iletiim kutusunu kapatn ve anahtar
szckleri belgenize ekleyin.
Ekleme noktas bo bir satrdaysa (satr 6), Return (Macintoshta) ya da

Enter (Windowsta) tuuna basmanz gerekmez.
532 DERS 16
Bir anahtar szck listesi olutururken szckleri ya da szck gruplarn virgllerle

ayrabilirsiniz. Ayn anahtar szc ya da szck grubunu tekrar tekrar kullanmayn.
Anahtar szck listesi olarak rnein yoga yoga yoga yoga eklinde bir ifade
kullanrsanz, yoga szcnn tekrarlanmasndan dolay bu, spam olarak
deerlendirilebilir. Anahtar szckler, sayfanzn ieriini temsil etmeli ve sayfanzda
kullanlan szckler arasndan seilmelidir.
6. View > Head Content komutunu seerek Head Content grnm seeneinin
yanndaki iareti kaldrn.
Head alan kaybolacaktr. Kitabn geri kalan ksmnda, Head Content grnm
seeneinin etkinliini kaldrdnz kabul edilmitir.
Tag Inspector Kullanmak

Tag Inspector, panel kmesinin iinde yer alan bir panel grubudur. Tag Inspector,
dier btnleik gelitirme ortamlarnda (Integrated Development Environment-IDE)
bulunanlara benzeyen bir zellik sayfasnn yardmyla etiketleri ve nesneleri dzenlemek
iin kullanabilirsiniz.
1. training.html sayfasndayken Code grnmne gein. Ekleme noktasn 96

numaral satrdaki <table> etiketinin iine yerletirin. Tag Inspector panel
grubunu an ve Attributes panelinin grntlendiinden emin olun.
Tag Inspector, <table> etiketinin btn niteliklerini ve bunlarn deerlerini

grntleyecektir.
Eer Tag Inspector paneli grnmyorsa, Window > Tag Inspector
komutunu seebilir ya da F9 tuuna basabilirsiniz.
2. Ekleme noktasn Tag Inspectorda cellpadding niteliinin sandaki deer
stununun iine yerletirin. 0 olan deeri 3le deitirin. Enter (Windowsta) ya
da Return (Macintoshta) tuuna basn.
534 DERS 16
Tag Inspector kullanarak herhangi bir etiketin herhangi bir niteliini abucak ve
kesin bir dorulukla deitirebilirsiniz. Burada <table> etiketinin cellpadding niteliini
deitirdiniz.
training.html sayfasn kaydedebilirsiniz. Sonra da dosyay ak brakn.
Kodu Quick Tag zelliiyle Dzenlemek

Quick Tagler, HTML etiketlerini hzl bir ekilde eklemenizi salar. zellikle kodu
elinizle yazmak zorunda olduunuz durumlarda srecin hzlandrlmas asndan bu ok
nemlidir. HTML kodlarn Quick Tag Editor ile dzenlemenin yolu vardr. Yeni bir
HTML kodu ekleyebilir, mevcut bir etiketi dzenleyebilir, ya geerli seimin etrafn yeni
bir etiketle sarabilirsiniz.
1. Lesson_16_Code/Training dizinindeki asana.html sayfasn an. Design
grnmnde ekleme noktasn In-Depth Asana Training and Practice
stbilgisinin altndaki class (snf) resmiyle We will eklinde balayan metnin
arasna yerletirin. Properties denetisinin sa st kesinde bulunan Quick
Tag Editor dmesine tklayn.
QuickTag Editor button
Quick Tag Editor Insert HTML modunda alacaktr, nk ekleme noktasn belge
penceresine yerletirmi ve hibir eyi sememitiniz. Quick Tag Editorn Insert HTML
modunda grnmesi iin, imlecin belge penceresinin Design grnmnde olmas (bir
nesne ekleyecekmisiniz gibi) gerekir.
Insert HTML Quick Tag Editor, bir metin alan ve iinden etiket seebileceiniz bir men
ieren kk bir kutu olarak alacaktr. Code Hints mensnn almas iin bir sre
beklemeniz gerekir.
2. Hints mensndeki etiketlerin arasnda ilerleyerek br etiketini bulun ve ift
tklayn. Return (Macintoshta) ya da Enter (Windowsta) tuuna basn.
br etiketi, break yani satr sonunu temsil eder ve ift tkladnzda Quick Tag metin
alannda < ve > karakterlerinin arasnda grnr. Siz Return (Macintoshta) ya da Enter
(Windowsta) tuuna bastktan sonra, belge penceresinde ekleme noktasnn bulunduu

yere bir satr sonu eklenir.
Metin u anda, resmin hemen altndaki satrda yer almaktadr.
Metin alanna dorudan yazarak daha kapsaml kod dzenleme ilemleri de
yapabilirsiniz. Siz yazarken, Dreamweaver koddaki dzenlemeleri otomatik
olarak yapar.
3. Belge penceresinin Design grnmnde, class (snf) resmini sein ve
Properties denetisindeki Quick Tag Editor dmesine tklayn.
Quick Tag Editor Edit Tag modunda alacaktr, nk belgedeki bir nesneyi setiniz.
Edit Tag modunda etiket niteliklerinin deerlerini dzenleyebilirsiniz. Quick Tag
metin alannda, balangta resme ait yol (kaynak ya da source olarak da bilinir) seili
durumdadr.
4. Tab tuuna basarak resmin yolundan bir sonraki nitelie geebilirsiniz.
Alternatif metin deerine (Training Class) ulaana kadar Tab tuuna
basmaya devam edin. Alternatif metni Asana Training Class olarak deitirin.
Yaptnz deiikliklerin uygulanmas iin Return (Macintoshta) ya da Enter
Tab tuuna her bastnzda, Quick Tag Editor yapm olduunuz deiiklikleri uygular
(eer varsa) ve bir sonraki nitelie geer.
Sol kesine tklayp srkleyerek Quick Tag Editor baka bir konuma
tayabilirsiniz.
Resmin alternatif metni deiecektir.

5. Eitim snf resmi seili durumdayken Properties denetisindeki Quick Tag
Editor dmesine tklayn. Cmd+T (Macintoshta) ya da Ctrl+T (Windowsta)
tularna basarak farkl Quick Tag seeneinin arasnda Wrap Tag moduna
ulancaya kadar ilerleyin.
536 DERS 16
Cmd+T (Macintoshta) ya da Ctrl+T (Windowsta) tularna her bastnzda Quick Tag

Editor farkl bir moda geer.
Belgede neyi setiinize bal olarak Quick Tag Editor Edit Tag modunda ya da
Wrap Tag modunda alabilir. rnein belgede bir metin seerseniz, Quick Tag
Editor Wrap Tag modunda alr. Quick Tag Editor farkl bir modda amak
istiyorsanz, Cmd+T (Macintoshta) ya da Ctrl+T (Windowsta) tularn kullanarak
farkl bir seenee geebilirsiniz.
6. Quick Tag Editor mensnden divi sein. Boluk tuuna basn ve a yazn. Code
Hints mensnn grnmesini bekleyin, sonra da align seeneine ift tklayn.
align= metin alanna eklendikten sonra Code Hints mens aldnda center
seeneine ift tklayn. Yaptnz deiikliklerin koda uygulanmas iin Return
Eitim snf resmi ortalanacaktr. Resmin etrafna <div align=center> ve </div> etiketleri
yerletirilecektir.
Etiket Seicide bir etiketi seip Delete (Macintoshta) ya da Backspace
(Windowsta) tuuna basarsanz, etiket ve onun ierdii her ey silinir. Ama
sadece etiketi silmek ve ieriini aynen brakmak istiyorsanz, sa tkladktan ya
da Ctrl tuunu basl tutarak tkladktan (Macintoshta tek dmeli fare
kullananlar iin) sonra Remove Tagi sein.
Snippetlar Kullanmak
Dreamweaverda, snippet denilen kod paralarn daha sonra kolayca kullanlabilecek
ekilde saklayabilirsiniz. Dreamweaverda nceden tanmlanm pek ok snippet mevcuttur.
Aklamalar, JavaScript rutinlerini, kod paralarn ve dier kaynaklar kullanarak kendi
snippetlarnz da oluturabilirsiniz. Snippetlar, zellikle bir sitede tekrar tekrar kullanlmas
gereken kodlar (rnein bir e-posta adresi ya da bir balant gibi) iin faydaldr. Bu adan
Ders 12de anlatlan ktphane elerine benzerler, ama snippetlarn ktphane elerinden
bir fark vardr. Orijinal snippetta bir deiiklik yaptnzda sitedeki btn snippetlar bu
deiiklii yanstacak ekilde gncellenmez. Bir snippet dorudan koda yerletirebilir ya da
bir seimin etrafna sarabilirsiniz.
1. training.html belgesinde ekleme noktasn formun Contact Information

blmndeki Phone metin alannn arkasna yerletirin ve Return
Aadaki admlarda yeni paragraf satrna nceden tanmlanm bir Dreamweaver

snippetn ekleyeceksiniz.
2. Files panel grubunda Snippets sekmesini sein. Accessible klasrn ve
ardndan buradaki Form Elements klasrn an. Browse For File Button
snippetini sein. Snippets panelinin alt ksmnda yer alan Insert dmesine
tklayn. training.html belgesini kaydedin.
Bu snippet, kullancnn iletiim bilgilerinin geri kalan ksmn yklemek zere sabit
diskindeki bir dosyay semek iin kullanabilecei bir dme oluturacaktr.
Snippet, belgede yerletirilmesini istediiniz yere srklemeniz de
mmkndr.
538 DERS 16
3. asana.html belgesinde, sayfann alt ksmnda bulunan ve yer tutucu resimle buna
karlk gelen resim aklamasnn yer ald tabloyu evreleyen divi sein.
divi semek iin, tabloyu evreleyen ince noktal kenarla tklayabilir ya da

ekleme noktasn tablonun iinde herhangi bir yere yerletirerek belge
penceresinin alt ksmndaki Etiket Seici araclyla <div> etiketini
seebilirsiniz.
Bu tablo, bir Web sitesinde resimler ve bunlara karlk gelen resim aklamalar iin
kullanlabilecek tablolara bir rnektir. Bu tabloyu ieren bir snippet oluturursanz, artk
bir resim ve resim aklamas kombinasyonu eklemek iin her seferinde ayn kodu tekrar
oluturmak zorunda kalmazsnz. Snippet hzla ve kolay bir ekilde ekleyebilirsiniz.
Dier bir avantaj da, snippet kullanmann salad tutarllktr, Bylece, resim ve resim
aklamas kombinasyonlar iin standart bir grnm ve yerleim dzeni oluturabilirsiniz.
4. Snippets panelinin alt ksmndaki New Snippet dmesine tklayn.
Snippet iletiim kutusu alacaktr.

Snippetlar setikten sonra Snippets panelinin alt ksmndaki Edit Snippet
dmesine tklayarak dzenleyebilir ya da Remove dmesine tklayarak
silebilirsiniz. New Snippet Folder dmesine tklayarak snippetlarnz
yerletirmek zere klasrler oluturabilirsiniz.
5. Name metin alanna Image and Caption Table yazn. Description metin alanna
da Table layout for images needing captions yazn. Snippet Type alannda Insert
Block seeneini, Preview Type alannda da Design seeneini iaretleyin. OK
dmesine tklayn.
Snippet oluturulacak ve Snippets panelinde grnecektir. Artk bu snippet istediiniz

zaman bir belgeye ekleyebilirsiniz. Bunun iin, Snippets panelinde bu snippet setikten sonra
belgenize srklemeniz ya da Snippets panelindeki Insert dmesine tklamanz gerekir.
En son eklediiniz snippet Accessible klasrndeki Form Elements klasrnde yer ald iin
yeni snippet de Form Elements klasrnde grnecektir.
Snippetlarnz, tpk Files panelindeki dosyalarda yaptnz gibi farkl klasrlere
srkleyerek, klasrler oluturarak ve klasrleri yeniden adlandrarak organize
edebilirsiniz. Ayrca snippetlarnz iin klavye ksayollar da oluturabilirsiniz.
Code panel grubundaki balam mensn kullanarak ya da Dreamweaver >
Keyboard Shortcuts (Macintoshta) ya da Edit > Keyboard Shortcuts
(Windowsta) komutunu seerek Keyboard Shortcuts iletiim kutusunu
aabilirsiniz. Snippetlara ait ksayollar oluturmak iin Commands mensnden
Snippets sein, snippet listesinden bir snippet sein ve art (+) dmesine
tklayarak seili e iin bir ksayol ekleyin (gerekiyorsa Dreamweavern
uyarlarn takip ederek yeni bir grup oluturun) ve istediiniz tu
kombinasyonuna basn. Bastnz tular Press key metin alannda grnecektir.
540 DERS 16
6. Yeni snippetnz test edin. Bunun iin, asana.html belgesindeki orijinal divi
sildikten sonra bunun yerine, Snippets panelinde Image and Caption Table
snippet seeneini iaretleyip Insert dmesine tklayarak yeni snippetnz
ekleyin.
Snippetlarnzn isimlerini ve aklamalarn mmkn olduu kadar ksa tutun. Snippets

panelindeki ilk stun simgeleri ve isimleri, ikinci stun da aklamalar gsterir. mleci bir
aklamann zerine getirerek bu aklamann tamamn grebilirsiniz.
Clean Up XHTML Komutunu Kullanmak

Bir XHTML belgesinin oluturulma sreci boyunca, bo ya da fazlalk etiketlerle, gereksiz
ya da hatal bir ekilde i ie gemi etiketlerle ve belgenizdeki XHTML koduyla ilgili
baka sorunlarla karlaabilirsiniz. Clean Up XHTML komutunu kullanarak bu sorunlu
durumlarn hemen hepsinden kurtulabilirsiniz. Bir sayfay ya da siteyi tamamladktan
sonra Clean Up XHTML komutunu altrmanz tavsiye edilir.
1. asana.html belgesinde Commands > Clean Up XHTML komutunu sein.
Clean Up HTML/XHTML iletiim kutusu alacaktr. Varsaylan durumda Remove

alanndaki ilk iki seenek ve Options alanndaki her iki seenek de iaretli durumdadr.
Bu iletiim kutusundaki seenekler unlardr:
Empty container tags (<b></b>, <h1></h1>, ): Siz metinleri biimlendirirken
(zellikle de biimlendirirken, dzenlerken ve yeniden biimlendirirken vb),
bu iletiim kutusunda verilen <b></b> rneindeki gibi bo etiketler (kaln
biimlendirme al ve kapan etiketleri arasnda hibir ey yoktur) ortaya kabilir.
Belge zerinde ne kadar ok alrsanz, bu tr i ie gemi etiketlerin meydana
gelme olasl da o kadar yksek olur. Bu etiketler taraycda sorun yaratmayabilir,
ama bunlar yer kaplar ve Code grnmnde dzenleme yaparken kodu okumanz
zorlatrrlar. Varsaylan durumda bu seenek iaretlidir.
Redundant nested tags: Ayn ii yapan bir etiket grubunun iinde birbirinin ayns iki
etiket grubu varsa, ite olan etiket grubu fazlalktr, nk d ksmdaki etiket grubu zaten
gereken tanmlama ilemini yapmtr. Siz bir belge zerinde alrken, fazlalk yuvalanm
etiketler ortaya kabilir. Bu seenek iaretliyse, Dreamweaver birbirinin ayns olan etiket
gruplarnn btn rneklerini siler, nk bunlar gereksizdir. Varsaylan durumda bu
seenek iaretlidir.
Non-Dreamweaver HTML comments: Bu seenek iaretliyse, Dreamweaver tarafndan
eklenmemi olan btn aklamalar silinir. Bunlara Dreamweaver kullanlrken eklenmi
aklamalar da dhildir. Dreamweaver HTML aklamalar, Dreamweaver tarafndan belirli
nesneleri iaretlemek iin oluturulan aklamalardr. Buna rnek olarak bir ablondaki
teachers dzenlenebilir blgesini (bkz. Ders 13) gsteren  aklamasn verebiliriz. Bu seenek varsaylan durumda iaretli deildir.
Dreamweaver special markup: Dreamweaver, standart HTMLde olmayan birtakm
etiketler oluturur. Bu etiketlerin arasnda, Dreamweavera belirli nesnelerin nasl ileneceini
gsteren eler de (bir ktphane esini gsteren <mm:libitem> gibi) yer alr. Bu iaretlemeyi
yalnzca Dreamweaver tanr; tarayclar bunu gz ard eder. Bu seenei kullanrken dikkatli
olun, nk bu seenek ktphane eleriyle, ablonlarla ve taslak resimlerle ilikili btn
etiketlerin silinmesine neden olur. Bu olduu takdirde, artk bu zellikleri kullanarak sayfay
gncelleyemezsiniz. Bu seenek varsaylan durumda iaretli deildir.
Specific tag(s): Bu metin alan, Dreamweavera belirli etiketleri silme komutu vermenize
imkn salar. Ayn anda birden fazla etiketi silmek istiyorsanz, bunlar aralarna virgl
koyarak yazn. Bu seenek varsaylan durumda iaretli deildir.
Combine nested <font> Tags when possible: Belgenizde <font> etiketleri kullanlyorsa,
siz belgenizdeki metinleri biimlendirirken bu etiketler i ie geebilir. rnein, aadaki
gibi bir kod parasyla karlaabilirsiniz:
<font size="1"><font face="Verdana, Arial, Helvetica, sans-serif">
<font color="#336633">Yoga Sangha</font></font></font>
Bu rnekteki font etiket grubu tek bir <font> ve </font> grubunda birletirildiinde kod
ksalr ve daha anlalr bir hale gelir:
<font size="1" face="Verdana, Arial, Helvetica, sans-serif"
color="#336633">Yoga Sangha</font>
Varsaylan durumda bu seenek iaretlidir.

<font> etiketi HTML 4.0da deerini kaybetmitir, yani HTMLin daha sonraki
srmlerinde hi kullanlmayabilir. Metinlerin biimlendirilmesinde stil sayfalarnn
kullanlmas tavsiye edilir.
Show log on completion: Gnlk (log), Dreamweavern hangi eleri temizleyebildiini

renmenizi salar. Varsaylan durumda bu seenek iaretlidir.
542 DERS 16
2. Varsaylan seenekleri iaretli durumda brakn ve OK dmesine tklayn.
Dreamweaver Clean Up XHTML komutunu altracak ve nelerin temizlendiini gsteren

bir gnln yer ald bir iletiim kutusu alacaktr. Baz durumlarda temizlenecek hibir
ey olmayabilir.
3. OK dmesine tklayarak gnl kapatn. asana.html belgesini kaydedip kapatn.
Clean Up XHTML komutunun altrlmas, kodunuzun mmkn olduunca temiz

ve hatasz hale getirilmesine yardmc olur. Ayrca, belgenizin dosya boyutunun
kltlmesinde ve taraycya yklenme sresinin ksaltlmasnda da faydal olabilir.
Belgelerinizdeki kodlar daha fazla optimize etmek iin Validate Markup
komutunu altrarak kodda bulunabilecek etiket ve szdizimi hatalarnn
aratrlmasn salayabilirsiniz. Bunun iin File > Check Page > Validate
Markup komutunu seerek ya da Results penceresindeki Validation
sekmesine geip Validate dmesine (soldaki yeil gen) tklayn. Bulunan
btn hatalar Results iletiim kutusunda grntlenecektir.
Microsoft Word HTML Dosyalaryla almak

Bir Web sayfasnn ierii eitli kaynaklardan alnabilir. Mterileriniz ya da alma
arkadalarnz, malzemeleri size bir Microsoft Word dosyasnda gnderebilir. Word
belgesinin biimlendirmesi ok basitse, metninizi Dreamweavera aktarmak iin kopyalayaptr yntemini kullanabilirsiniz. Eer Word belgesinde madde imleri ya da tablolar
gibi biimlendirme zellikleri kullanlmsa, belgeyi bir Web sayfas olarak kaydedebilir
(Word 97 ya da daha sonraki srmlerde Dosya > Web Sayfas Olarak Kaydet komutunu
seerek) ve elde ettiiniz HTML dosyasn Dreamweaverda aabilirsiniz. Ama Word pek
ok gereksiz etiket ekler. Bu kodu Dreamweaverda tek bir admda temizleyebilirsiniz.
Dreamweavern sildii etiketler sayfann Wordde grntlenebilmesi iin gereklidir, ama
HTMLde ya da tarayclarda bunlara ihtiya yoktur.
1. Lesson_16_Code/Word klasrndeki GreenStudio.html dosyasn an.
Bu HTML dosyas, Microsoft Wordde Web Sayfas Olarak Kaydet komutu kullanlarak
oluturulmutur.
2. Commands > Clean Up Word HTML komutunu sein.
Clean Up Word HTML iletiim kutusu alacaktr.
Dreamweaver, HTML kodu oluturulurken Wordn hangi srmnn kullanldn

tespit etmeye alr. Eer Dreamweaver srm tespit edemezse, menden Word 2000
and Newer semeniz gerekir.
letiim kutusunda iki sekme yer alr: Basic ve Detailed. Bunlarn her birinde eitli
seenekler bulunur. Bu uygulamada varsaylan ayarlar kullanacaz (btn seenekler
iaretli olacak).
Basic sekmesindeki seenekler unlardr:
Remove all word-specific markup
Clean up CSS
Clean up <font> tags
Fix invalidly nested tags
Set background color
Apply source formatting
Show log on completion:
Detailed sekmesinde, Microsoft Worde zg btn iaretlemeleri silmenize ve CSSi
temizlemenize imkn salayan ilve seenekler yer alr.
544 DERS 16
3. Basic sekmesindeki btn seeneklerin iaretli olduundan emin olun ve OK

dmesine tklayn. Dreamweavern dosyay temizlerken yapt deiiklikleri
gzden geirdikten sonra OK dmesine tekrar tklayarak iletiim kutusunu
kapatn ve belgeyi kaydedin.
Dreamweaver, yapt btn deiiklikleri listeleyen bir iletiim kutusu grntleyecektir.
Code Grnmnde Kodu Yazdrmak

Kodlar bir bilgisayar ekrannda grmek genellikle pek kolay deildir. Dreamweaverda
kodlarn ktsn alabilirsiniz. Bu, basl bir kopya zerinde almanza ya da sonular
ekip yeleriyle paylamanza imkn salayan faydal bir zelliktir. Bu uygulamay
tamamlayabilmeniz iin, bilgisayarnza bal bir yazcnn olmas gerekir.
1. training.html dosyas akken File > Print Code komutunu sein.
Sisteminize bal bir yazc varsa, kopya says ve sayfa numaralar gibi yazdrma
seeneklerini ayarladktan sonra Print dmesine tklayarak kodunuzu yazdrabilirsiniz.
Design grnmn Dreamweavern iinden yazdramazsnz. Web
sayfasnn ktsn taraycda grnd ekilde almanz gerekiyorsa, sayfay
bir taraycda nizleyin ve taraycda akken yazdrn.
training.html dosyasn kapatabilirsiniz.
Gelimi zelletirme lemleri

Dreamweavern zelletirilmesiyle ilgili eitli seenekler mevcuttur. alma alann
ihtiyalarnza gre dzenlemek zere program, aralar, panelleri ve klavye ksayollarn
zelletirmek iin programn temel tercih seeneklerini kullanabilirsiniz.
Dreamweaver, gelitirilebilecek ekilde tasarlanmtr; dolaysyla uygun eklentileri
kullanarak Dreamweavern becerilerini artrabilirsiniz. Eklentiler (extensions), programn
ilevselliini artrmak iin eklenebilen yazlm paralardr. Basit HTML nesnelerinden
karmak JavaScript komutlarna kadar birok farkl eklenti vardr. Eklentileri yklemek,
ynetmek ve silmek iin Dreamweaver Extension Manager kullanrsnz.
Dreamweaverda kullanmak zere yeni davranlar ve eklentiler oluturabilir ya da
Dreamweaver Exchange Web sitesinden bakalarnn oluturduu eklentileri edinebilirsiniz.
Macromediann Dreamweaver Exchange (imdi Adobe Exchange adn alan) sitesinde
cretsiz scriptlerden satn alabileceiniz eklentilere kadar pek ok eklenti mevcuttur.
1. Help > Manage Extensions komutunu sein.
Eklentiler Dreamweavera Extension Manager kullanlarak yklenir. Extension Manager,

Dreamweaverla birlikte kurulan ayr bir programdr. Macromedia Extension Manager
klasr genellikle Macromedia Dreamweaver 8 klasryle ayn konuma yerletirilir.
Varsaylan kurulum konumu Applications (Macintoshta) ya da Program Files\Macromedia
(Windowsta) klasrnzn iinde olacaktr.
Extension Manager; eklentileri yklemenizi, silmenizi ykl durumdaki bir eklentiyle

ilgili ayrntl bilgilere ulamanz ve kendi eklentilerinizi hazrlamanz salar. Ayrca
Dreamweaver Exchange Web sitesine kolayca erimenizi salar. Bu site araclyla daha fazla
eklenti bulabilirsiniz.
Macromedia Extension Managerda eklentilerin ismi, srm numaras, tipi ve oluturan kii
grntlenir. Burada seili eklentiyle ilgili bir aklama grntlenir ve bu aklamada sz
konusu eklentinin ne ie yarad ve Dreamweaver iindeki konumuyla ilgili ayrntlar yer
alr. Eski eklentilerde Dreamweavern nceki srmlerinde yer alan arabirim elemanlarna
546 DERS 16
gndermede bulunan ve artk ie yaramayan aklamalarla karlaabilirsiniz. rnein

Objects paleti artk Insert ara ubuu olarak anlmaktadr.
2. Extension Manager > Quit Extension Manager (Macintoshta) ya da File > Exit
(Windowsta) komutunu seerek Extension Managerdan kn.
Dreamweaver Exchangede listelenen eklentilerde Dreamweavern hangi srm iin

oluturulduklar belirtilir. Baz eski eklentiler programn yeni srmleriyle dzgn
ekilde alrken bazlar da eitli sorunlara yol aabilmektedir. Bir eklentiyi ykledikten
sonra herhangi bir sorunla karlarsanz o eklentiyi silmeniz gerekir. Bir sorunla
karlatnzda kapatarak eklentilerinizi test edebilirsiniz. Extension Managerda yer
alan On/Off stunundaki onay kutularn kullanarak eklentileri geici olarak devreden
karabilirsiniz. Bylece, ortaya kan hatalarn belirli eklentilerle ilikili olup olmadn
anlayabilirsiniz. Bu kutudaki onay iareti, ilgili eklentinin geerli durumda ykl
olduunu gsterir.
Eklentilerin Bulunmas ve Yklenmesi

nternete balyken, Dreamweaverda Help > Dreamweaver Exchange komutunu
seerek ya da Extension Managerda File > Go To Macromedia Exchange komutunu seerek Dreamweaver Exchange sitesinden baka eklentiler de edinebilirsiniz.
Bu ilemi yaptnzda varsaylan Web taraycnzda Dreamweaver Exchange sitesi
alacaktr. Eklenti indirmek, gndermek ya da eklentilerle ilgili eletiri yazmak iin
macromedia.com sitesinin yesi olmanz gerekir. Bu, cretsiz bir yeliktir. ye olarak
Dreamweaver Exchange ana sayfasna girebilirsiniz. Macromedia, Dreamweaver
Exchange Web sitesini her tr eklenti iin bir nevi depo olarak kullanma sunmutur. Siz
Dreamweaver Exchange sitesinden eklenti indirirken, Extension Manager indirme ilemi
tamamlandktan sonra otomatik olarak alr ve ykleme ilemine balar (Macintoshta).
Windows kullanclarnn ise indirilen dosyay amalar ya da bu uygulamada anlatlan
ykleme ilemini gerekletirmeleri gerekir. Eklentilerden bazlarn Macromedia,
bazlarn da nc parti firmalar oluturur.
Bir eklentiyi Extension Manager ile yklemek iin File > Install Extension komutunu
sein ya da otomatik olarak Extension Manager iletiim kutusunu amak iin ilgili eklenti
dosyasna ift tklayn. Siz bu ilemi yaptktan sonra Install Extension (Macintoshta) ya
da Select Extension to Install (Windowsta) iletiim kutusu alacaktr.
Eklentileri ykledikten sonra Dreamweaver yeniden balatmak iyi bir alkanlktr.
Dreamweaver yeniden balattktan sonra yeni eklentileri kullanabilirsiniz. Program
yeniden balatlana kadar eklentiler kullanlamayabilir.
Ne rendiniz?
Belge grnmleri arasnda gei yaptnz ve HTML kodlarn Code grnmnde

dzenlediniz (Sayfa 517-520).
Split (Code and Design) grnmn kullanarak HTML kodlarn elle dzenlediniz
(Sayfa 520523).
Koda x ve y koordinatlar ekleyerek yeni tarayc penceresinin konumunu
Meta etiketleriyle aklamalar ve anahtar szckler eklediniz (Sayfa 529-533)
Etiketleri hzl bir ekilde dzenlemek iin Tag Inspector kullandnz (Sayfa 533-535)
Quick Tags ve Code Hints zelliklerini kullanarak kod eklediniz ve kodlar
dzenlediniz (Sayfa 535-537).
Snippetlar kullanarak kod oluturdunuz ve eklediniz (Sayfa 537-541).
Clean Up XHTML komutunu altrarak kodu temizlediniz (Sayfa 541543).
Dardan bir Word HTML dosyas aktardnz ve Clean Up Word HTML komutunu
kullanarak gereksiz etiketleri sildiniz (Sayfa 543545).
HTML kodlarnn ktsn nasl alacanz rendiniz (Sayfa 545).
Dreamweaver eklentilerini nereden bulacanz ve bunlar nasl ykleyeceinizi
rendiniz (Sayfa 545-547).
548 DERS 16
17
Bul ve Deitir
zellii
Macromedia Dreamweaverdaki Bul ve Deitir (Find and Replace) zellii, size gl

bir arama arac sunar. Geerli belgede, belirli bir klasrde ya da sitenin tamamnda arama
yapabilirsiniz. Buradaki pek ok seenek, metin ya da HTML etiketlerini aratmanza,
hatta arama ilemini HTML etiketlerindeki belirli niteliklerle snrlamanza imkn salar.
Aradnz bulduktan sonra bunu deitirebilir ya da zerinde deiiklik yapabilirsiniz. Bul
ve Deitir zellii, bir belgede ya da sitenin tamamnda byk deiiklikler yapmanz
gerektiinde size nemli lde zaman kazandrr.
Bu projede Bul ve
Deitir zelliini
kullanarak belirli bir
belgedeki baz szckleri
deitireceksiniz. Ayrca,
bu belgedeki metnin
biimlendirme niteliklerini
ayarlayacaksnz. Bunu
yaparken, haric bir
stil sayfasna balanp
metne zel bir stil
uygulama ilemlerini
otomatikletirmek iin
Bul ve Deitir zelliini
kullanacaksnz.
Bu derste, Bul ve Deitir zelliini kullanarak baz belgelerde eitli deiiklikler

yapacaksnz. CSS stillerini uygulamak ve harici bir stil sayfasn ayn anda bir dizi belgeye
ilitirmek iin Bul ve Deitir zelliini kullanacaksnz. Metinleri bulup deitirecek,
metinlerin biimlendirme zelliklerini deitirecek, aramalarnz daha sonra kullanmak
zere kaydetmeyi renecek, tarihleri bulacak ve isimleri deitireceksiniz.
Bu derste elde edilen sonucu grmek isterseniz, Lesson_17_FindReplace/Completed
klasrndeki index.html ve workshops.html dosyalarn an.
Neler reneceksiniz?
Metinleri bulup deitireceksiniz.

HTML etiketlerinin iindeki metinleri bulacaksnz.
Bul ve Deitir zelliini kullanarak zel bir stil uygulayacaksnz.
Bul ve Deitir zelliini kullanarak harici stil sayfalar ilitireceksiniz.
Arama ayarlarnz kaydedecek ve tekrar kullanacaksnz.
Metinde baz kalplar aratacaksnz.
Bir ismin eitli varyasyonlarn aratacaksnz.
Yaklak Sre
Ders Dosyalar
Balang Dosyalar:
Lesson_17_FindReplace/index.html
Lesson_17_FindReplace/Training/(btn dosyalar)
Lesson_17_FindReplace/schedule/workshops.html
Tamamlanm Proje:
Lesson_17_FindReplace/Completed/(btn dosyalar)
550 DERS 17
Belgede Arama Yapmak

Bu uygulamada, basit bir arama ilemi gerekletirerek bir belgedeki metinde belirli
szckleri bulacak ve deitireceksiniz.
1. Lesson_17_FindReplace klasrndeki index.html dosyasn an. Welcome to
Yoga Sanga balndaki Sanga szcn sein.
Bu belgede yer alan metinlerde Yoga Sanga ifadesi kullanlmaktadr. Oysa doru ifade Yoga
Sangha eklinde olmaldr. Bu uygulamada bu szckleri deitireceksiniz.
2. Edit > Find and Replace komutunu sein.
Find and Replace iletiim kutusu alacaktr.
Find and Replace iletiim kutusunu amadan nce bir metin seerseniz,
setiiniz metin otomatik olarak Search For metin alannda grnecektir.
3. Find in mensnde Current Document sein. Search mensnde Texti sein.
Find metin alannda Sanga szcnn vurgulanm olduundan emin olun.
Replace metin alanna Sangha yazn. Drt seenein yanndaki kutularn
iaretini kaldrn (Match case, Match whole word, Ignore whitespace, Use regular
expression).
Find in alannda Current Document seildiinde tm belgede arama yaplr ve bu seenek

(ilgili belge ak durumdayken) sadece tek bir belgede kullanlabilir. Find in mensnde be
seenek daha vardr:
Selected Text: Geerli belgenin setiiniz blmnde arama yapar.
Open Documents: Ak olan btn dosyalarda arama yapar.
Folder: Bir klasr bulup semenize ve bu klasrn ieriinde arama yapmanza imkn salar.
Selected Files in Site: Site panelinde setiiniz dosyalarda arama yapar.
Entire Current Local Site: Etkin durumdaki sitede arama yapar.
Bul ve Detr zell 551
Find and Replace iletiim kutusunun alt ksmnda drt seenek yer alr:
Match case: Aramay BYK/kk harflere duyarl olacak ekilde snrlar. Match
Case kutusu iaretliyse, aramada sadece Find metin alannda kullandnz BYK/
kk harf yazmyla tam olarak eleen ierik bulunur.
Match whole word: Sadece tam szckleri bulur.
Ignore whitespace: Btn boluklar gz ard eder. Bu seenek iaretliyse ve iki
tane szck aratyorsanz, Dreamweaver ayrca, bu szcklerin btn rneklerini
(aralarnda ilve boluklar olsa bile) bulur.
Use regular expression: Metindeki karakter kombinasyonlarn tanmlamak
iin kalplar kullanmanz salar. Bu seenei, rnein The szcyle balayan
cmleleri ya da bir say ieren nitelik deerlerini semek iin kullanabilirsiniz.
4. Find Next dmesine tklayn.
Szcn, ekleme noktasndan sonra gelen ilk rnei (aranan metin) vurgulanacaktr.
5. Replace dmesine tklayn.
Szck Sangha olarak deitirilecek ve szcn bir sonraki rnei vurgulanacaktr.

Belgenizdeki metinleri deitirirken nce Replace dmesine tklamanz,
sonra da yeni metni kontrol ederek Replace alanna doru bilgileri
girdiinizden emin olmanz tavsiye edilir. Replace All dmesini arama
kriterini ve sonular kontrol ettikten sonra kullanabilirsiniz.
6. Find All dmesine tklayn.
Arama sonular bulunacak ve Results panelinde grntlenecektir: Arattnz szcn

2 yerde daha getiini greceksiniz. Bu listedeki elerden birine ift tkladnzda, belge
penceresinde bu rnek vurgulanr. Find All seenei, metinde bu szcn getii her
yeri gzden geirmenize imkn salar.
552 DERS 17
7. Results panelinin sol tarafndaki yeil oka tklayn.
Find and Replace iletiim kutusu tekrar alacaktr.

Dreamweaver, en son yaptnz aramadaki ayarlar hatrlar. letiim kutusunu kapatp
tekrar aarsanz, iletiim kutusunu en son atnzda yaptnz metin ve seenek
ayarlarn grrsnz. Find metin alannda Sanga, Replace metin alannda da Sangha
szcn greceksiniz.
8. Find and Replace iletiim kutusundaki Replace All dmesine tklayn.
Find and Replace iletiim kutusu, metni arayp deitirme ilemini tamamladktan sonra
otomatik olarak kapanr. Results panelindeki durum ubuu, belgenizde bulunan ve
deitirilen elerin saysn gsterir.
9. Results panelinin sa st kesindeki balam mensne tklayn ve Clear

Results komutunu sein, sonra da Results panelini kapatn (Macintoshta) ya
da Results panelini daraltn (Windowsta). index.html belgesini kaydedin.
Bir sonraki uygulamada kullanmak zere bu dosyay ak brakn.
HTML Etiketlerini Silmek

index.html dosyas <font> etiketleri ierir. Ders 2 ve 4te anlatld gibi, <font>
etiketi HTML 4.0 srmnde deerini yitirmitir (deprecated); bu etiket gelecekte hi
kullanlmayabilir. Tarayclar tarafndan hl desteklense de, metinlere stil uygularken CSS
(Ders 4te anlatlmt) kullanlmas tavsiye edilir.
Dreamweavern nceki srmleri kullanlarak oluturulan belgelerde, eer <font> etiketi
ya da deerini yitirmi <body> etiketleri bu belgede mevcutsa ve bu nitelikler CSS kullanan
belge iin henz tanmlanmamsa, Page Properties iletiim kutusu araclyla tanmlanan
baz CSS belge niteliklerine eriemeyebileceinizi unutmayn. <font> etiketlerinin
kullanld ve herhangi bir CSS stilinin kullanlmad bir belge aarsanz, Properties
denetisinde sadece Appearance, Title/Encoding ve Tracing Image kategorilerini listelenir.
Links ve Headings kategorileri, nitelikleri ayarlamak iin CSS kullanr. <font> etiketleri
silinmedii takdirde bu kategoriler kullanlamaz. Balant renkleri, arka plan iin kullanlan
renk ya da resimler, <body> etiketinin nitelikleri olarak ayarlanacak olmalarna ramen
Appearance blmnde yer alr.
<font> etiketi, bir yerel biimlendirme tipidir. CSSte, yerel biimlendirme dahili ya da
harici stilleri geersiz klar. CSS stillerini uygulamak istiyorsanz, yerel biimlendirmenin
kaldrlmas gerekir. Dreamweavern daha nceki srmlerinde, yerel biimlendirme
uygulanrken metin niteliklerini <font> etiketleriyle tanmlamak iin Properties denetisi
kullanlyordu. Dreamweaver 8 ile hazrlanan yeni belgelerde, Properties denetisi ile
uygulanan varsaylan biimlendirme CSS tabanldr. Buradaki gibi <font> etiketleri
kullanan belgeleri atnzda, Properties denetisi metin biimlendirmesini dzenlemek ve
tanmlamak iin <font> etiketlerini kullanr.
Bu uygulamada, HTML <font> etiketini kaldrmak iin Bul ve Deitir zelliini
kullanacaksnz.
1. index.html belgesindeyken Edit > Find and Replace komutunu seerek Find and
Replace iletiim kutusunu an. Find in mensnde Current Documentn seili
olmas gerekir. Search mensndeki seenei Specific Tag olarak deitirin.
Find and Replace iletiim kutusunu amak iin Ctrl+F (Windowsta) ya da

Cmd+F (Macintoshta) ksayolunu da kullanabilirsiniz..
Specific Tagi setiinizde Dreamweavera belirli bir etiketi aratabilirsiniz. letiim kutusu,
bu arama metodunu yanstacak ekilde deiir. Arama ileminin daha dar bir erevede
yaplmasn ve belirli niteliklere sahip etiketlerin aranmasn salamak iin kullanlabilecek
baz seenekler grntlenir.
554 DERS 17
2. Search mensnn sanda yer alan etiket mensndeki HTML etiketleri

listesinden fontu sein.
Meny kullanmak yerine, etiketleri (byktr/kktr iaretlerini (< >) kullanmadan)

Search For metin alanna yazmanz da mmkndr.
3. Eksi () dmesine tklayarak etiket dzenleyici (tag modifier) seeneini

kaldrn. Action mensnden Strip Tagi sein ve Options alanndaki drt
kutunun da iaretini kaldrn.
<font> etiketlerini tmyle sileceiniz iin, dzenleyicilere (modifier) gerek yoktur.
Art (+) dmesine tklayarak ilve dzenleyiciler eklemeye devam edebilirsiniz.

Bunu yaptnzda zel seimler yapmanz salayan birka men ve metin
alan belirecektir. Bu menleri ve metin alanlarn kullanarak aramalarnz
snrlandrabilir ve bir etiketin benzersiz rneklerini ya da belirli bir nitelik ieren
bir etiketi bulabilirsiniz. Buradaki ilave seenekler unlardr: belirli bir nitelii
olan/olmayan bir etiketi aramak (With Attribute/Without Attribute), belirli bir
nitelii ieren/iermeyen bir etiketi aramak (Containing/Not Containing) ve
belirtilen etiketin iinde olan/olmayan belirli bir nitelii aramak (Inside Tag/Not
Inside Tag). Etiket dzenleyicileri (tag modifiers), seili etiketle kullanlabilecek
belirli bir nitelik semenizi, nitelii eittir (=), kktr (<), byktr (>) ve eit
deildir (!=) iaretleriyle tanmlamanz ve istediiniz nitelik iin bir deer
ayarlayabileceiniz bir yer semenizi salar. Menlerdeki seenekler, setiiniz
etikete ve nitelie gre deiir.
4. Replace All dmesine tklayn.
Belgedeki btn <font> etiketleri silinecektir.

Find and Replace iletiim kutusu otomatik olarak kapanacaktr. Results panelinde,
belgede nelerin deitirildii ya da silindii (bu rnekte olduu gibi) ile ilgili ayrntlar
grntlenecektir. Results paneli otomatik olarak almazsa, Macintosh kullanclar Window
> Results komutunu seerek bir nceki uygulamada kapatlan paneli aabilir, Windows
kullanclar ise bir nceki uygulamada daraltlm olan paneli geniletebilir. Windows
kullanclar, daraltlm paneli Properties denetisinin altnda bulabilirler.
Windows kullanclar Properties denetisinin hemen st ksmnda yer alan ince
ubuun zerindeki beyaz oka tklayarak ayn anda hem Properties denetisini,
hem de Results panelini kltebilirler. Dreamweaver arabiriminin alt ksmnda
yer alan bu dmeye tklayarak bu alandaki panelleri tekrar geniletebilirsiniz.
556 DERS 17

Results komutunu sein. Results panelini kapatn (Macintoshta) ya da kltn
(Windowsta). index.html belgesini kaydedin.
Bul ve Deitir zelliini Kullanarak Harici Stil

Sayfalarn litirmek
Ders 4te, harici bir stil sayfas oluturmu ve bu stil sayfasn baka bir belgeye
ilitirmitiniz. Bir belgeye bir stil sayfas eklemek iin uygulanmas gereken admlar zor
deildir, ama stil sayfasn birden fazla sayfaya ya da bir sitenin tamamna ilitirmeniz
gerekiyorsa bu ilem uzun srebilir. Bul ve Deitir zelliini kullanarak bu ilemi birka
dakikada tamamlayabilirsiniz.
Bu uygulamada, sangha.css harici stil sayfasn birden fazla sayfaya ilitireceksiniz.
1. Lesson_17_FindReplace/Training klasrnde yer alan asana.html dosyasn an
ve Design grnmne gein. Edit > Find and Replace komutunu sein.
Find and Replace iletiim kutusu alacak ve burada bir nceki uygulamada kullanlan
ayarlar grnecektir.
2. Find in mensnde Foldern seili olmas gerekir. Folder metin kutusunun
sandaki klasr simgesine tklayn ve Lesson_17_FindReplace/Training
klasrn sein. Search mensnde Source Codeu sein. Find metin alanna
</head> yazn. Replace metin alanna u kodu yazn: <link href=sangha.css
rel=stylesheet type=text/css></head>.
<link> etiketi, stil sayfasnn belgeye balanarak ilitirildiini gsterir. lk stil

sayfasnn ilitirilmesi iin tavsiye edilen yol budur. (Stil sayfalar dardan
aktarlarak da ilitirilebilir; bu iki yntemi Ders 4te grmtk). Stil sayfasnn
konumu href=sangha.css ile belirtilir, geerli belge ile ilitirilen stil sayfas
arasndaki iliki rel=stylesheet ile tanmlanr ve kt stbilgisi type=text/css
ieriin trn MIME (Multipurpose Internet Mail Extensions) tipi araclyla
tanmlayarak stil sayfalarn desteklemeyen tarayclarn link etiketini gz ard
etmelerine imkn salar.
Attach Style Sheet simgesini kullandnzda, Dreamweaver <link> etiketini <head> etiketinin
iine ekler. Burada Bul ve Deitir zelliini kullanarak head (</head>) kapan etiketini
aryor, sonra da kendisinden sonra bir </head> etiketi gelen <link> etiketiyle deitirerek
bunun nne <link> etiketini ekliyorsunuz.
Replace metin alanndayken yeni bir satr oluturmak iin, Shift+Return
(Macintoshta) ya da Shift+Enter (Windowsta) tularna basn. Sadece Return ya
da Enter tuunu kullanrsanz, iletiim kutusundaki Find Next dmesi
etkinletirilir. </head> etiketi genellikle baka bir satrda olduu iin, kodda </
head> etiketinin nne bir satr sonu eklemek isteyebilirsiniz. Bu bir <br> (break)
deildir; sadece kodda yeni bir satrdr.
Training klasrnde, haric stil sayfasnn ilitirilmesi gereken toplam be HTML belgesi
vardr. Training klasrndeki belgelerin hibirinde <font> etiketleri kullanlmamaktadr.
Dolaysyla bir nceki uygulamada index.html belgesinde yapmak zorunda kaldnz gibi Bul
ve Deitir zelliini kullanarak bu belgelerden <font> etiketlerini silmeniz gerekmez.
3. Buradaki btn seeneklerin iareti kaldrlm olmaldr. Find Next dmesine tklayn.
Klasrde Dreamweavern </head> etiketini bulduu ilk dosya Code grnmnde alr;
asana.html Code grnmnde grntlenmez ve Dreamweaver </head> etiketini seer.
558 DERS 17
4. Replace dmesine tklayn.
Dreamweaver deitirme ilemini gerekletirir ve arama kriterine uyan bir sonraki belge
otomatik olarak Code grnmnde alr. Bu belgede </head> etiketi seili durumdadr.
5. Replace All dmesine tklayn. Almayan belgelerde eleen rnekleri
deitirmek isteyip istemediiniz sorulduunda Yes dmesine tklayn.
Bu uygulamada konunun daha iyi anlalmas iin Training klasrne sangha.

css dosyasnn bir kopyas konmutur. Ama kendi sitelerinizde haric stil
sayfalarn bu ekilde oaltmamanz tavsiye edilir; nk bu stil
sayfalarndan birinde deiiklik yaptnzda bunun kopyas da
gncellenmedii takdirde, bu stil sayfasnn kopyasn kullanan belgeler bu
deiiklikleri yanstmaz. Farkl klasrlerdeki belgeleri ayn CSS dosyasna
balamak iin site kk ilikili balantlar kullanabilirsiniz. Bu balantlar
HTML belgelerinin (konumlar ne olursa olsun) doru CSS dosyasna
balanmalarn salar. (Site kk ilikili balantlar Ders 4te grmtk.)
Find and Replace iletiim kutusunu kapatp belge penceresine tklamadnz ya da

Refresh dmesine tklamadnz takdirde (Properties denetisi bu konuda sizi
uyarabilir), ak belgelerde arka plana uygulanan deiiklii gremeyebilirsiniz.
Results komutunu sein. Results panelini kapatn (Macintoshta) ya da
kltn (Windowsta).
Stil sayfas klasrdeki btn belgelere ilitirilecektir. Btn ak belgeleri kaydedip

kapatabilirsiniz.
Bul ve Deitir zelliini Kullanarak zel Stiller

Uygulamak
<font> etiketlerini sildiinize ve bir haric stil sayfas ilitirdiinize gre, index.
html belgesindeki metne zel bir CSS stili uygulayabilirsiniz. Bu uygulamada, Bul ve
Deitir zelliini kullanarak koddaki metni bulacak ve zel stile ait HTML etiketlerini
uygulayacaksnz.
1. index.html belgesini tekrar an. Gvde metninde Anusara Yoga ifadesinin
ilk rneini (At Yoga Sangha, were dedicated eklinde balayan cmlenin
sonunda) sein.
Aadaki admlarda Bul ve Deitir zelliini kullanarak bu ifadenin btn rneklerine

CSSle stil uygulayacaksnz.
2. Edit > Find and Replace komutunu sein. Find in mensnden Current
Document, Search mensnden de Source Codeu sein. Find metin alanna
Anusara Yoga yazn.
Find and Replace iletiim kutusunu amadan nce bir metin seerseniz,
setiiniz metin Find metin alannda grntlenir.
letiim kutusu, Source Code arama metodunu yanstacak ekilde deiecektir.

3. Replace metin alanna <span class=boldcolor>Anusara Yoga</span> yazn.
Buradaki drt seenein de iareti kaldrlm olmaldr.
560 DERS 17
index.html belgesinde Anusara Yoga ifadesinin btn rnekleri <span class=boldcolor>

Anusara Yoga</span> koduyla deitirilecektir. Stil uygulanmam szcklerin yerini stil
uygulanan szckler alacaktr.
4. Bu szcklerin belgenizdeki btn rneklerini deitirmek iin Replace All
dmesine tklayn.
Find and Replace iletiim kutusu otomatik olarak kapanacak ve Results paneli kodda
hangi deiikliklerin yapldn gsterecektir. Bylece belgedeki btn Anusara Yonga
szcklerini boldcolor CSS stiliyle biimlendirmi oldunuz. Bul ve Deitir zelliini stiller
uygulamak iin bu ekilde kullanmak size nemli oranda zaman kazandrr. Deiiklikleri
belge penceresinde grmek iin belge penceresinin iine ya da Refresh dmesine
tklamanz gerekebilir.
Bu metodu kullanrken, deitirdiiniz szcn ya da szcklerin (bu

rnekte Anusara Yoga) kodda deil, sadece metinde getiinden emin
olmanz gerekir. Eer herhangi bir resmin alternatif metninde Anusara Yoga
ifadesi kullanlyorsa ya da deitirdiiniz szckler bir yol isminin bir
parasysa kodunuzla ilgili sorunlarla karlaabilirsiniz. Bu konuda pheniz
varsa, Replace All dmesinin yerine Replace dmesini kullanabilirsiniz.
Bylece deitirilecek olan her eyi daha iyi kontrol edebilirsiniz.
Results komutunu sein. Sonra da Results panelini kapatn (Macintoshta) ya da
daraltn (Windowsta). index.html belgesini kaydedin.
Results panelini grmyorsanz Window > Results komutunu seerek bu

paneli aabilir ve Bul ve Deitir ileminin sonularn grebilirsiniz.
Ayrca seili metne bir stil uygulayabilir ve buna karlk gelen kodu Split ya da Code
grnmnde kopyalayarak Find and Replace iletiim kutusuna yaptrabilirsiniz. Ancak
bunu yaparken zel stili elle uyguladnz metnin ilk rneine tekrar bakmay unutmayn.
Bul ve Deitir zellii fazlalk etiketler ekledii iin burada iki <span> etiketi uygulandn
greceksiniz. Szck Dreamweaverda doru olarak grntleniyor gibi grnse de, bu
fazlalk etiketi kaldrmanz gerekir. kinci etiket grubunu Code grnmnde elle silebilir
ya da Commands > Cleanup XHTML komutunu seebilirsiniz (bu konuyu Ders 15te
grmtk). Cleanup XHTML komutunu kullanrken, Cleanup HTML/XHTML iletiim
kutusunda Redundant Nested Tagsin seili olduundan emin olun ve OK dmesine
tklayn.
Arama Kriterlerini Kaydetmek ve Tekrar Kullanmak

zellikle karmak arama ilemlerindeki arama kriterlerinizi kaydetmek ve sitenizdeki dier
belgelerde de kullanmak isteyebilirsiniz. Sorgu (query) olarak bilinen kaydedilmi arama
kriterleri, varsaylan durumda genellikle Dreamweaver klasrndeki Configuration/Queries
klasrne kaydedilir. Ama bunlar baka konumlara da kaydedebilirsiniz.
Bu uygulamada, arama sorgunuzu Lesson_17_FindReplace klasrne kaydedeceksiniz.
1. Edit > Find and Replace komutunu sein. Buradaki seenekleri nceki
uygulamada yaptnz ekilde ayarlayn. Find and Replace iletiim kutusundaki
Save Query dmesine tklayn.
Find and Replace iletiim kutusunda bir nceki uygulamada kullanlan ayarlar greceksiniz.
Save Query dmesi iin kullanlan simge bir disket eklindedir. Bu seenek, karmak
aramalar kaydetmenize ve daha sonra tekrar kullanmanza imkn salar.
562 DERS 17
2. Save query to file (Macintoshta) ya da Save Query (Windowsta) iletiim

kutusunda Lesson_17_FindReplace klasrn bulun ve an. Ardndan Save As
(Macintoshta) ya da Dosya Ad (Windowsta) metin kutusuna addStyle yazn ve
Kaydet (Save) dmesine tklayn.
Find sorgular. dwq uzantsna, Replace sorgular da .dwr uzantsna sahiptir. Siz sorgular
kaydederken bu uzantlar otomatik olarak eklenir.
addStyle sorgusunu kaydettiinize gre, ayn Bul ve Deitir fonksiyonunu kullanmanz
gerektiinde artk bu sorguyu dier belgelerde de kullanabilirsiniz.
Kendi aramalarnz nasl kaydedeceinizi renmek iin kendi banza bir
arama ilemi gerekletirin ve bunu test edin. Sonra da bu uygulamadaki birinci
ve ikinci admlar uygulayn.
3. Find and Replace iletiim kutusundaki Load Query dmesine tklayn.
Load Query dmesi iin kullanlan simge ak bir klasr eklindedir.

4. Load Query (Windowsta) ya da Load Query from File (Macintoshta) iletiim kutusunda,
Lesson_17_FindReplace klasrndeki addstyle.dwr sorgusunu bulun ve an.
Mevcut bul ve deitir sorgularn Find and Replace iletiim kutusunun iinden aabilir ve
altrabilirsiniz. Find and Replace iletiim kutusunu kapatabilir, Results panelini daraltabilir
ve ak durumdaki btn dosyalar kapatabilirsiniz.
Dzenli fadeleri Kullanarak Aramak
ve Deitirmek
Dzenli ifadeler (regular expressions), metindeki karakter kombinasyonlarn ya da kalplar
tanmlayan kontrol karakterleridir. rnein 1700 ile 1799 arasndaki yllarn btn
rneklerini aratmak istiyorsanz, kullanacanz kalp 17 olacak ve bundan sonra 0 ile 9
arasndaki karakterlerin herhangi ikisinden oluan bir kombinasyon gelecektir. Arama kalbn
tanmlamak iin birtakm zel karakterler kullanabilirsiniz. rnein, ters bl (\), dolar iareti
($) ve soru iareti (?) zel karakterlerdir. Dzenli ifadeleri kullanrken bu karakterleri bilmek
nemlidir. Metninizde byle zel karakterleri aryorsanz, bu karakterlerin zel bir karakter
olarak kullanlmadn ve karakter arama ileminin bir paras olduunu gstermek zere
bunlarn nne ters bl iareti koymanz gerekir.
EK Ada, btn zel karakterleri, dzenli ifadeleri ve bunlarn anlamlarn ieren bir tablo yer
almaktadr.
Bu uygulamada, bir belgede kalp ieren arama ilemleri uygulayacaksnz.
1. Lesson_17_FindReplace/schedule klasrndeki workshops.html dosyasn an, ekleme
noktasn belgenin bana yerletirin ve Edit > Find and Replace komutunu sein.
Find and Replace iletiim kutusu alacaktr.

2. Find in mensnde Current Document sein. Search mensnden Texti

sein. Use regular expression seeneini iaretleyin.
Use regular expression seeneini iaretlediinizde Ignore whitespace seeneinin seilemez

hale geldiine (gri olarak grntlenir) dikkat edin.
Ignore whitespace seenei etkinletirildiinde, eletirme amacyla btn
beyaz boluklara tek bir bolukmu gibi davranlr. rnein bu seenek etkin
durumdayken, this text metni this text ile eletirilir ama thistext ile
eletirilmez. Use Regular Expression seenei iaretlendiinde Ignore
Whitespace seenei kullanlamaz; beyaz boluun gz ard edilmesi iin
dzenli ifadenizi ak bir ekilde yazmanz gerekir. p ve br etiketlerinin beyaz
boluk olarak deerlendirilmediine dikkat edin.
3. Find metin alanna \d*:\d\dam yazn.
Metin alanna \d*:\d\dam yazarken aralara bl (/) deil, ters bl (\) iareti koyduunuzdan
emin olun.
Bu uygulamada, dikkati zerlerine ekmek iin saat 12:00den nce balayan atlye
almalarna vurgulama stili uygulayacaksnz. nc admda tanmladnz arama
kalbnda \d zel karakteri kullanlmaktadr. Bu karakter 0-9 aralndaki herhangi bir
rakam temsil eder. Yldz iareti, nceki karakterin sfr ya da daha fazla rneini bul
demektir. Dolaysyla \d* ifadesi sfr ya da daha fazla rakam aramak iin kullanlr.
Bu yzden bu kalp sfr ya da daha fazla say, ardndan iki nokta st ste iareti, onun
ardndan iki say ve am metnini arar. Bu da sabah saatlerini gsteren btn zaman
deerleriyle (rnein 11:30 am) eleecektir. Arama kalplarnda kullanlan dzenli ifadeler
iin, Ek A blmne baknz.
Ondalk saylarla yllar birbirinden ayrmak iin (rnein 19.09) arama
ileminde bir nokta iareti kullann. Nokta da zel bir karakter olduundan,
arama ileminde bundan nce de ters bl iaretinin gelmesi gerekir.
564 DERS 17
4. Find Next dmesine tklayn.
Dreamweaver, October listesinde bulunan 10/20 giriinin yanndaki 11:00am ifadesini

seecektir. Seimi grmek iin Find and Replace iletiim kutusunu baka bir yere
tamanz gerekebilir.
5. Nelerin seildiini grmek iin Find Next dmesine birka kez daha tklayn.
12:00 pmden nce balayan iki atlye almas mevcuttur.

6. Find and Replace iletiim kutusunda Search mensnden Source Codeu
sein.
Aadaki admlarda, saatleri kaln hale getirmek iin vurgulama etiketlerini (<em> ve
</em>) kullanacaksnz. Eer Replace metin alanna <em>\d*:\d\dam</em> yazarsanz,
belge penceresindeki metin \d*:\d\dam olarak deiecek ve bu da saatteki saylar
deitirecektir. Bu nedenle aramay kalp olarak ayrmanz; bunun iin de aradnz kalb
parantez iine almanz gerekir.
7. Find metin alannda, metnin nne ama parantezi, sonuna da kapama
parantezi ekleyin. rnein: (\d*:\d\dam).
Parantezler ilk kalb oluturacaktr.

8. Replace metin alanna <em>$1</em> yazn.
Yukardaki admda oluturduunuz kalba gndermede bulunmak iin, Replace metin

alannda $1 ifadesini kullanmanz gerekir. Bu semboln etrafna vurgulama etiketlerinin
yerletirilmesi, ilk kalp aramasnn sonularnn etrafna ayn etiketlerin eklenmesine
neden olur. Birden fazla kalp oluturmu olsaydnz, (parantezlerle gsterildii gibi) bir
sonraki kalp bu metin alannda $2 ile gsterilecek, sralama bu ekilde devam edecekti.
9. Find Next dmesine, sonra da Replace dmesine tklayn.
Code Inspectorda saat deerinin etrafna vurgulama etiketleri yerletirilecektir. Sonular

grmek iin belge penceresinin iine tklayn.
10. Arattnz metnin belgedeki btn rneklerinin deitirilmesi iin Replace All
dmesine tklayn. workshops.html belgesini kaydedin. Results panelinin sa
st kesindeki balam mensne tklayn ve Clear Results komutunu sein.
Results panelini kapatn (Macintoshta) ya da daraltn (Windowsta).
Sonular grebilmek ve temizlemek iin Macintosh kullanclarnn Window

> Results komutunu seerek Results panelini amalar gerekir (eer ak
deilse).
Results panelini kapatn, fakat workshops.html dosyasn bir sonraki uygulama iin ak
brakn.
Bir smin eitli Varyasyonlarn Bulmak

Bir ismin eitli varyasyonlarn da aratabilirsiniz. rnein bu atlye almalarnn
bazlar Satsang iindir, ama snfn isminde srekli olarak byk S harfi kullanlmamtr.
Bu format tutarl hale getirmek ve btn snf isimlerini Satsang olarak deitirmek
istiyoruz.
1. workshops.html belgesinde tekrar Design grnmne gein, ekleme noktasn
belgenin en st ksmna yerletirin ve Edit > Find and Replace komutunu sein.
Find in mensnde Current Document, Search mensnde de Texti sein.
Find metin alanna [sS]?atsang, [kK]?irtan yazn.
[sS], kk ya da byk s harfiyle balayan btn szckleri arar, ? sadece tek bir
karakteri belirtir ve atsang da ayn karakter dizisini ifade eder. Kirtan karakter dizisi iin
de ayn kalp kullanlmtr.
2. Options alannda Match case seeneinin iaretli olduundan emin olun. Use
regular expression seeneinin de iaretli olmas gerekir.
3. Replace metin alanna Satsang, Kirtan yazn. Belge penceresinde ekleme
noktasn metnin bana yerletirin. Find Next dmesine tklayarak Satsang,
kirtan ifadesinin ilk getii yeri bulun, sonra da Replace dmesine tklayarak
bunu deitirin.
566 DERS 17
Belgede Satsang, kirtan ifadesinin bir varyasyonunun getii ilk yer bulunacak ve Satsang,
Kirtan olarak deitirilecektir.
4. Find Next dmesine tklayn. Satsang, kirtan ifadesinin kalan btn
varyasyonlarn deitirmeye devam edin. workshops.html belgesini kaydedin.
Bu belgeyi ve Results panelini kapatabilirsiniz.
Ne rendiniz?
Ayrntl arama seeneklerini kullanarak belirli bir metni bulup deitirdiniz; bylece
belgede istediiniz deiiklikleri hzla yapm oldunuz (Sayfa 551553).
HTML etiketleri iinde belirli bir metni buldunuz ve bunu Bul ve Deitir zelliini
kullanarak nasl deitireceinizi rendiniz (Sayfa 553557).
Bul ve Deitir zelliini kullanarak bir sitede yer alan birden fazla sayfaya haric stil
sayfalar ilitirdiniz (Sayfa 557559).
Bul ve Deitir zelliini kullanarak bir belgeye zel bir stili hzl bir ekilde
uyguladnz (Sayfa 560562).
Arama ayarlarnz daha sonra kullanmak zere kaydettiniz ve daha nce kaydedilmi
olan sorgular yklediniz (Sayfa 562563).
Tarihler ve isimler gibi belirli metinleri bulmak iin dzenli ifadeler kullanarak
metinde belirli kalplar arattnz (Sayfa 563566).
Bir ismin birden fazla varyasyonunu arattnz ve bunlarn hepsini ismin ayn formuyla
Dzenli
fadeler
Dzenli ifadeler, kod ve metin ararken kullanabileceiniz kalplar tanmlar. Dzenli

ifadelerle arama yapmay Ders 17de grmtk. Aadaki tabloda, dzenli ifadelerde
kullanlan zel karakterler aklamalar ve rnekleriyle birlikte listelenmitir.
Tip
Aklama
rnek
Satrn ya da bir girdinin

balangc.

^T, Tahsin Amcadaki T ile eleir, ama
Satrn ya da bir girdinin

sonu.
h$, sabahtaki h ile eleir, ama
Kendisinden nce gelen

karakter(ler)in sfr kez
ya da daha fazla
kullanlmas durumunda
um*, Rumdaki um ile, yummaktaki

umm ile ve hurideki u ile eleir.

karakter(ler)in bir kez
ya da daha fazla
kullanlmas durumunda
um+, Rumdaki um ile ve yummaktaki

umm ile eleir, ama huride eleecek
bir ey bulamaz.

karakter(ler)in sfr ya da
bir kez kullanlmas
durumunda
st?on, fasondaki son ile ve bastondaki

ston ile eleir, baton ya da misyonda
eleecek bir ey bulamaz.
Yeni bir satr dnda herhangi

bir tek karakter.
.an, Okan zan altnda cmlesindeki kan

ve zanla eleir.
x|y

x ya da y.

FF0000|0000FF, BGCOLOR=#FF0000
ifadesindeki FF0000 ile ve FONT
COLOR=#0000FF ifadesindeki
0000FF ile eleir.
{n}

nceki karakterin tam olarak o{2} zoolog szcndeki oo ile ve

n defa kullanlmas durumunda mooooodaki ilk iki o ile eleir, ama mola

szcnde eleecek bir ey bulamaz.
Bat Trakyadaki T ile elemez.
sabahleyindeki h ile elemez.
Tip
Aklama
{n,m}

Parantezin nnde verilen

F{2,4}, #FF0000 ifadesinde FF ile ve
karakterin en az n ve en ok da #FFFFFF ifadesinde de ilk drt
m sayda tekrarlanmas
F ile eleir.
durumunda.
[abc]

Keli parantez iindeki

[e-g], bezdeki e ile, folluktaki f ile ve
karakterlerden herhangi biri.
gardiyandaki g ile eleir.
Tire kullanarak belirli bir
karakter araln
gsterebilirsiniz (rnein [a-f],
[abcdef] ifadesine eittir.
[âbc]

Keli parantez iinde olmayan [âeiou] nce oraletteki r ile, beyazdaki

herhangi bir karakter. Tire
b ile ve aitteki t ile eleir.
kullanarak belirli bir karakter
araln gsterebilirsiniz (rnein
[^g-z], [abcdef] ifadesine eittir.
\b

Szck snr (boluk ya da

carriage return karakteri gibi).
\bp, patikteki p ile eleir, ama zpr ya
\B

Szck snr hari.

\Bp, zprdaki p ile eleir, ama patikteki
\d

[0-9] ifadesine eittir.
Herhangi bir rakam karakteri.
\d, C3POdaki 3 ile ve blok 2Gdeki 2
\D

Rakam dndaki herhangi

bir karakter. [^0-9] ifadesine
eittir.
\D, 900Sdeki S ile ve Q45teki Q
\f
Form besleme (Form feed)
\n
Satr besleme (Line feed)
\r
Satr sonu (Carriage return)
\s

Tek bir boluk karakteri (boluk, \sst, alt st be kii ifadesindeki st

sekme, form feed ya da line
ile eleir, ama dizst szcnde
feed de dahil).
eleecek bir ey bulamaz.
\t
Sekme.
\w

Alt izgi de dahil herhangi bir

alfanmerik karakter.
[A-Za-z0-9_] ifadesine eittir.

\W

Alfanmerik olmayan herhangi \W, Marks & Spencer ifadesindeki & ile
bir karakter. [Â-Za-z0-9_]
ve % 100deki % ile eleir.
ifadesine eittir.
570 EK A
rnek
da kitapta eleecek bir ey bulamaz.
p ile elemez.
ile eleir.
ile eleir.
b\w* baran adamdaki baran
szcyle ve becerikli bir adam

ifadesindeki becerikli ve bir
szckleriyle eleir.
Macintosh
Ksayollar
Klavye ksayollar (keyboard shortcuts), tasarm ve kod elemanlaryla, ayrca site

ynetimi ilevleriyle almanz hzlandrarak ve kolaylatrarak siteyi gelitirme srecini
ksaltabilir. Dreamweaver > Keyboard Shortcuts komutuyla Keyboard Shortcuts iletiim
kutusunu atktan sonra yeni klavye ksayollar ekleyebilir ya da mevcut Dreamweaver
ksayollarn silebilir veya bunlarn zerinde deiiklik yapabilirsiniz.
Men Ksayollar
Edit (Dzen) Mens
Dreamweaver Mens
Komut / Trkesi
Ksayol
Undo / Geri Al

Redo / Yinele

Cut / Kes

Copy / Kopyala
Paste / Yaptr
Paste Special / zel Yaptr
Clear / Sil
Select All / Tmn Se
Select Parent Tag / Ebeveyn Etiketi Se
Select Child / ocuu Se
Find and Replace / Bul ve Deitir
Find Again / Tekrar Bul
Go to Line / Satra Git
Show Code Hints / Kod pularn Gster
Indent Code / Koda Girinti Ver
Outdent Code / Kod Girintisini Kaldr
Balance Braces / Kvrk Parantezleri Dengele
Code Collapse > Collapse Selection/
Kodu Toparla >Seimi Toparla
Code Collapse > Collapse Outside Selection/
Kodu Toparla >Seimin Dn Toparla
Command+Z ya da
Option+Delete
Command+Y ya da
Shift+Command+Z
Command+X ya da
Shift+Delete
Command+C
Command+V
Shift+Command+V
Delete
Command+A
Command+[
Command+]
Command+F
Command+G
Command+,
Control+Space
Shift+Command+>
Shift+Command+<
Command+
Komut / Trkesi
Ksayol
Preferences / Tercihler
Hide Dreamweaver / Dreamweaver Gizle
Quit Dreamweaver / Dreamweaverdan k
Command+U
Command+H
Command+Q
File (Dosya) Mens

Komut / Trkesi
Ksayol
New / Yeni
Open / A
Open in Frame / Framede A
Close / Kapat
Close All / Tmn Kapat
Save / Kaydet
Save As / Farkl Kaydet
Print Code / Kodu Yazdr
Preview in Primary Browser/
Birincil Taraycda nizle
Preview in Secondary Browser/
kincil Taraycda nizle
Check Links / Balantlar Kontrol Et
Validate Markup/
aretlemenin Geerliini Denetle
Command+N
Command+O
Shift+Command+O
Command+W
Shift+Command+W
Command+S
Shift+Command+S
Command+P
Option+F12
Command+F12, Shift+F12
Shift+F8
Shift+F6
Shift+Command+C
Command+Option+C
Edit (Dzen) Mens (devam)
Insert (Ekle) Mens
Komut / Trkesi
Komut / Trkesi
Code Collapse > Expand Selection/

Kodu Toparla >Seimi Genilet
Code Collapse > Collapse Full Tag/
Kodu Toparla >Tm Etiketi Toparla
Code Collapse > Collapse Outside Full Tag/
Kodu Toparla >Tm Etiketin Dn Toparla
Code Collapse > Expand All/
Kodu Toparla >Tmn Genilet
Ksayol
Shift+Command+E
Shift+Command+J
Command+Option+J
Command+Option+ E
View (Grnm) Mens

Komut / Trkesi
Ksayol
Zoom In / Yaknla
Command+=
Zoom Out / Uzakla
Command+Magnification > 50% / Bytme > 50%
Command+Option+5
Magnification > 100% / Bytme > 100%
Command+Option+1
Magnification > 200% / Bytme > 200% Command+Option+2
Fit Selection / Seimi Sdr
Command+Option+0
Fit All / Tmn Sdr
Shift+Command+0
Fit Width / Genilii Sdr
Shift+Command+Option+0
Switch Views / Grnm Deitir
Control+`
Refresh Design View/
Design Grnmn Tazele
F5
Live Data* / Canl Veriler
Shift+Command+R
Head Content / Ba Ksm erii
Shift+Command+H
Table Mode > Expanded Tables Mode/
Tablo Modu > Geniletilmi Tablo Modu
F6
Table Mode > Layout Mode/
Tablo Modu > Yerleim Dzeni Modu
Command+F6
Visual Aids > Hide All/
Grsel Yardmclar > Tmn Gizle
Shift+Command+I
Rulers > Show / Cetveller > Gster
Option+Command+R
Grid > Show / Izgara > Gster
Option+Command+G
Grid > Snap to Grid/
Izgara > Izgaraya Kenetlen
Option+Shift+Command+G
Guides > Show / Klavuzlar > Gster
Command+;
Guides > Lock Guides/
Klavuzlar > Klavuzlar Kilitle
Command+Opt+;
Guides > Snap to Guides/
Klavuzlar > Klavuzlara Kenetlen
Command+Shift+;
Guides > Guides Snap to Elements/
Klavuzlar > Klavuzlar Elemanlara Kenetle Command+Shift+/
Plugins > Play / Pluginler > Oynat
Option+Command+P
Plugins > Stop / Pluginler > Durdur
Option+Command+X
Plugins > Play All / Pluginler > Tmn Oynat Option+Shift+Command+P
Plugins > Stop All / Pluginler > Tmn Durdur Option+Shift+Command+X
Hide/Show Panels / Panelleri Gster/Gizle F4
*Bu komut View mensne dahil edilmemitir.
572 EK B
Ksayol
Tag / Etiket
Command+E
Image / Resim
Option+Command+I
Media > Flash / Ortam > Flash
Option+Command+F
Media > Shockwave / Ortam > Shockwave Option+Command+D
Table / Tablo
Option+Command+T
Named Anchor / simli Yer mi
Option+Command+A
HTML > Special Characters > Line Break/
HTML > zel Karakterler > Satr Sonu
Shift+Return
HTML > Special Characters >
Non-Breaking Space/
HTML > zel Karakterler >
Blnemez Boluk
Shift+Command+Space
Copyright Character ()*/
Telif Hakk Karakteri
Option+G
Template Objects > Editable Region/
ablon Nesneleri > Dzenlenebilir Blge
Option+Command+V
*Bu komut Insert mensne dahil edilmemitir.
Modify (Deitirme) Mens

Komut / Trkesi
Ksayol
Page Properties / Sayfa zellikleri

Command+J
Quick Tag Editor / Hzl Etiket Editr
Command+T
Make Link / Balant Haline Getir
Command+L
Remove Link / Balanty Kaldr
Shift+Command+L
Table > Select Table / Tablo > Tabloyu Se Command+A
Move to the Next Cell*/
Sonraki Hcreye Git
Tab
Move to the Previous Cell*/
nceki Hcreye Git
Shift+Tab
Table > Merge Cells/
Tablo > Hcreleri Birletir
Option+Command+M
Table > Split Cell / Tablo > Hcreyi Bl
Option+Command+S
Table > Insert Row / Tablo > Satr Ekle
Command+M
Table > Insert Column / Tablo > Stun Ekle Shift+Command+A
Table > Delete Row / Tablo > Satr Sil
Shift+Command+M
Table > Delete Column / Tablo > Stunu Sil Shift+Command+Table > Increase Column Span/
Tablo > Stun Araln Artr
Shift+Command+]
Table > Decrease Column Span/
Tablo > Stun Araln Azalt
Shift+Command+[
Arrange > Align Left / Diz > Sola Hizala
Shift+Command+1
Arrange > Align Right / Diz > Saa Hizala
Shift+Command+3
Arrange > Align Top / Diz > ste Hizala
Shift+Command+4
Arrange > Align Bottom / Diz > Alta Hizala
Shift+Command+6
Arrange > Make Same Width/
Diz > Ayn Genilie Ayarla
Shift+Command+7
Arrange > Make Same Height/
Diz > Ayn Ykseklie Ayarla
Shift+Command+9
Timeline > Add Object to Timeline/
Zaman izgisi >
Nesneyi Zaman izgisine Ekle
Ctrl+Opt+Shift+T
*Bu komut Modify mensne dahil edilmemitir.
Text (Metin) Mens
Window (Pencere) Mens
Komut / Trkesi
Ksayol
Komut / Trkesi
Ksayol
Indent / Girinti Ver

Outdent / Girintiyi Kaldr
Paragraph Format > None/
Paragraf Biimi > Yok
Paragraph Format > Paragraph/
Paragraf Biimi > Paragraf
Paragraph Format > Heading 1/
Paragraf Biimi > Balk 1
Align > Left / Hizala > Sola
Align > Center / Hizala > Ortaya
Align > Right / Hizala > Saa
Align > Justify / Hizala > ki Yana Yasla
Style > Bold / Stil > Kaln
Style > Italic / Stil > talik
Check Spelling / Yazm Denetimi Uygula
Option+Command+]
Option+Command+[
Insert / Ekle
Properties / zellikler
Layers / Katmanlar
Behaviors / Davranlar
Databases / Veritabanlar
Bindings / Balayclar
Server Behaviors / Sunucu Davranlar
Components / Bileenler
Files / Dosyalar
Assets / Varlklar
Tag Inspector / Etiket Denetisi
Results / Sonular
Reference / Referans
Frames / Kareler
Code Inspector / Kod Denetisi
Timelines / Zaman izgileri
Hide/Show Panels / Panelleri Gizle/Gster
Next Document / Sonraki Belge
Previous Document / nceki Belge
Command+F2
Command+F3
F2
Shift+F4
Shift+Command+F10
Command+F10
Command+F9
Command+F7
F8
Option+F11
Option+Shift+F9
F7
Shift+F1
Shift+F2
Option+F10
Option+F9
F4
Command+`
Shift+Command+`
Command+0
Shift+Command+P
Command+1
Command+2
Command+3
Command+4
Command+5
Command+6
Option+Shift+Command+L
Option+Shift+Command+C
Option+Shift+Command+R
Option+Shift+Command+J
Command+B
Command+I
Shift+F7
Commands (Komutlar) Mens

Komut / Trkesi
Ksayol
Start Recording / Kayd Balat
Shift+Command+X
Help (Yardm) Mens

Komut / Trkesi
Ksayol
Using Dreamweaver/
Dreamweavern Kullanl
F1
Using ColdFusion / ColdFusionn Kullanl Command+F1
Shift+F1
Site Mens
Komut / Trkesi
Ksayol
Get / Getir
Check Out / Al
Put / Gtr
Check In / Gnder
Check Links Sitewide/
Sitenin Balantlarn Kontrol Et
Shift+Command+D
Option+Shift+Command+D
Shift+Command+U
Option+Shift+Command+U
Command+F8
Macintosh KISAYOLLARI 573
Kod Ksayollar
Komut / Trkesi
Ksayol

Balance Braces / Kvrk Parantezleri Dengele
Select All / Tmn Se
Bold / Kaln
Italic / talik
Copy / Kopyala
Find Selection / Seimi Bul
Find Next / Sonrakini Bul
Paste / Yaptr
Cut / Kes
Redo / Yinele
Undo / Geri Al
Surround with # / # ile evrele
Delete Word Left / Soldaki Szc Sil
Select Line Up / stteki Satr Se
Select Line Down / Alttaki Satr Se
Character Select Left/
Soldaki Karakteri Se
Character Select Right/
Sadaki Karakteri Se
Select to Page Up/
Yukar Doru Bir Sayfa Se
Select to Page Down/
Aa Doru Bir Sayfa Se
Move Word Left / Bir Szck Sola Git
Move Word Right / Bir Szck Saa Git
Select Word Left / Soldaki Szc Se
Select Word Right / Sadaki Szc Se
Move to Start of Line / Satrn Bana Git
Move to End of Line / Satrn Sonuna Git
Select to Start of Line/
Satrn Bana Kadar Se
Select to End of Line/
Satrn Sonuna Kadar Se
Move to Top of File / Dosyann Bana Git
Move to End of File / Dosyann Sonuna Git
Select to Start of File/
Dosyann Bana Kadar Se
Select to End of File/
Dosyann Sonuna Kadar Se
Command+[
Command+]
Command+
Command+A
Command+B
Command+I
Command+C
Command+F
Command+Shift+G
Command+G
Command+V
Command+X
Command+Y
Command+Z
Command+P
Command+`
Command+Shift+3
Command+Delete
Shift+Up
Shift+Down
574 ek B
Shift+Left
Shift+Right
Shift+PgUp
Shift+PgDn
Command+Left
Command+Right
Command+Shift+Left
Command+Shift+Right
Home
End
Shift+Home
Shift+End
Command+Home
Command+End
Command+Shift+Home
Command+Shift+End
Files (Dosyalar)
Paneli Menleri
File (Dosya) Mens
Komut / Trkesi
Ksayol
New File / Yeni Dosya

New Folder / Yeni Klasr
Rename / Yeniden Adlandr
Shift+Command+N
Option+Shift+Command+N
F2
Option+F12
Command+F12
Shift+F8
Edit (Dzen) Mens

Komut / Trkesi
Ksayol
Cut / Kes
Copy / Kopyala
Paste / Yaptr
Duplicate / oalt
Select All / Tmn Se
Command+X
Command+C
Command+V
Command+D
Command+A
View (Grnm) Mens

Komut / Trkesi
Ksayol
Refresh / Tazele
Show/Hide Link / Balanty Gster/Gizle
View as Root / Kk Olarak Grntle
Show Page Titles / Sayfa Balklarn Gster
Site Map / Site Haritas
F5
Shift+Command+Y
Shift+Command+R
Shift+Command+T
Option+F8
Site Mens
Komut / Trkesi
Ksayol
Get / Getir
Check Out / Al
Put / Gtr
Check In / Gnder
Link to New File / Yeni Dosyaya Bala
Link to Existing File / Mevcut Dosyaya Bala
Change Link / Balanty Deitir
Shift+Command+D
Option+Shift+Command+D
Shift+Command+U
Option+Shift+Command+U
Command+F8
Shift+Command+N
Shift+Command+K
Command+L
Shift+Command+L
Windows
Ksayollar
Klavye ksayollar (keyboard shortcuts); tasarm ve kod elemanlaryla, ayrca site

ynetimi ilevleriyle almanz hzlandrarak ve kolaylatrarak siteyi gelitirme srecini
ksaltabilir. Edit > Keyboard Shortcuts komutuyla Keyboard Shortcuts iletiim kutusunu
atktan sonra yeni klavye ksayollar ekleyebilir ya da mevcut Dreamweaver ksayollarn
silebilir veya bunlarn zerinde deiiklik yapabilirsiniz.
Men Ksayollar
Edit (Dzen) Mens
File (Dosya) Mens

Komut / Trkesi
New / Yeni
Open / A
Open in Frame / Framede A
Close / Kapat
Close All / Tmn Kapat
Save / Kaydet
Save As / Farkl Kaydet
Validate Markup/
aretlemenin Geerliini Denetle
Exit / k
Ksayol
Ctrl+N
Ctrl+O
Ctrl+Shift+O
Ctrl+W
Ctrl+Shift+W
Ctrl+S
Ctrl+Shift+S
Ctrl+P
F12
Ctrl+F12
Shift+F8
Shift+F6
Ctrl+Q
Komut / Trkesi
Undo / Geri Al
Redo / Yinele
Cut / Kes
Copy / Kopyala
Paste / Yaptr
Paste Special / zel Yaptr
Select All / Tmn Se
Go to Line / Satra Git
Show Code Hints / Kod pularn Gster
Indent Code / Koda Girinti Ver
Outdent Code / Kod Girintisini Kaldr
Balance Braces/
Kvrk Parantezleri Dengele
Preferences / Tercihler
Ksayol
Ctrl+Z
Ctrl+Y
Ctrl+X
Ctrl+C
Ctrl+V
Ctrl+Shift+V
Ctrl+A
Ctrl+[
Ctrl+]
Ctrl+F
F3
Shift+F3
Ctrl+G
Ctrl+Space
Ctrl+Shift+>
Ctrl+Shift+<
Ctrl+
Ctrl+U
View (Grnm) Mens
Modify (Deitirme) Mens
Komut / Trkesi
Ksayol
Switch Views / Grnm Deitir
Ctrl+
Refresh Design View/
Design Grnmn Tazele
F5
Live Data* / Canl Veriler
Ctrl+Shift+R
Head Content / Ba Ksm erii
Ctrl+Shift+H
Table Mode > Expanded Tables Mode/
Tablo Modu > Geniletilmi Tablo Modu F6
Table Mode > Layout Mode/
Tablo Modu > Yerleim Dzeni Modu
Ctrl+F6
Visual Aids > Hide All/
Grsel Yardmclar > Tmn Gizle
Ctrl+Shift+I
Rulers > Show / Cetveller > Gster
Ctrl+Alt+R
Grid > Show Grid / Izgara > Izgaray Gster Ctrl+Alt+G
Grid > Snap to Grid/
Izgara > Izgaraya Kenetlen
Ctrl+Shift+Alt+G
Plugins > Play / Pluginler > Oynat
Ctrl+Alt+P
Plugins > Stop / Pluginler > Durdur
Ctrl+Alt+X
Plugins > Play All/
Pluginler > Tmn Oynat
Ctrl+Shift+Alt+P
Plugins > Stop All/
Pluginler > Tmn Durdur
Ctrl+Shift+Alt+X
Hide/Show Panels / Panelleri Gster/Gizle F4
*Bu komut View mensne dahil edilmemitir.
Komut / Trkesi
Ksayol
Page Properties / Sayfa zellikleri
Ctrl+J
CSS Styles / CSS Stilleri
Shift+F11
Quick Tag Editor / Hzl Etiket Editr
Ctrl+T
Make Link / Balant Haline Getir
Ctrl+L
Ctrl+Shift+L
Table > Select Table / Tablo > Tabloyu Se Ctrl+A
Move to the Next Cell*/
Sonraki Hcreye Git
Tab
Move to the Previous Cell*/
nceki Hcreye Git
Shift+Tab
Table > Merge Cells/
Tablo > Hcreleri Birletir
Ctrl+Alt+M
Table > Split Cell / Tablo > Hcreyi Bl
Ctrl+Alt+S
Table > Insert Row / Tablo > Satr Ekle
Ctrl+M
Table > Insert Column / Tablo > Stun Ekle Ctrl+Shift+A
Table > Delete Row / Tablo > Satr Sil
Ctrl+Shift+M
Table > Delete Column / Tablo > Stunu Sil Ctrl+Shift+Table > Increase Column Span/
Tablo > Stun Araln Artr
Ctrl+Shift+]
Table > Decrease Column Span/
Tablo > Stun Araln Azalt
Ctrl+Shift+[
Ctrl+Shift+1
Ctrl+Shift+3
Align > Top / Hizala > ste
Ctrl+Shift+4
Align > Bottom / Hizala > Alta
Ctrl+Shift+6
Align > Make Same Width/
Hizala > Ayn Genilie Ayarla
Ctrl+Shift+7
Align > Make Same Height/
Hizala > Ayn Ykseklie Ayarla
Ctrl+Shift+9
Timeline > Add Object to Timeline/
Zaman izgisi > Nesneyi Zaman
izgisine Ekle
Ctrl+Alt+Shift+T
*Bu komut Modify mensne dahil edilmemitir.
Insert (Ekle) Mens

Komut / Trkesi
Ksayol
Tag / Etiket
Ctrl+E
Image / Resim
Ctrl+Alt+I
Media > Flash / Ortam > Flash
Ctrl+Alt+F
Media > Shockwave / Ortam > Shockwave Ctrl+Alt+D
Table / Tablo
Ctrl+Alt+T
Named Anchor / simli Yer mi
Ctrl+Alt+A
Special Characters > Line Break/
zel Karakterler > Satr Sonu
Shift+Enter
Special Characters > Non-Breaking Space/
zel Karakterler > Blnemez Boluk
Ctrl+Shift+Space
Template Object > Editable Region/
ablon Nesneleri > Dzenlenebilir Blge Crtl+Alt+V
576 EK C
Text (Metin) Mens

Komut / Trkesi
Indent / Girinti Ver
Outdent / Girintiyi Kaldr
Paragraph Format > None/
Paragraf Biimi > Yok
Paragraph Format > Paragraph/
Paragraf Biimi > Paragraf
Align > Center / Hizala > Ortaya
Align > Justify / Hizala > ki Yana Yasla
Bold / Kaln
Italic / talik
Check Spelling / Yazm Denetimi Uygula
Window (Pencere) Mens

Ksayol
Ctrl+Alt+]
Ctrl+Alt+[
Ctrl+0
Ctrl+Shift+P
Ctrl+1
Ctrl+2
Ctrl+3
Ctrl+4
Ctrl+5
Ctrl+6
Ctrl+Shift+Alt+L
Ctrl+Shift+Alt+C
Ctrl+Shift+Alt+R
Ctrl+Shift+Alt+J
Ctrl+B
Ctrl+I
Shift+F7
Komut / Trkesi
Ksayol
InsertEkle / Ctrl+F2
Properties / zellikler
Ctrl+F3
CSS Styles / CSS Stilleri
Shift+F11
Layers / Katmanlar
F2
Behaviors / Davranlar
Shift+F4
Snippets / Kod Paralar
Shift+F9
Shift+F1
Databases / Veritabanlar
Ctrl+Shift+F10
Bindings / Balayclar
Ctrl+F10
Server Behaviors / Sunucu Davranlar Ctrl+F9
Components / Bileenler
Ctrl+F7
Files / Dosyalar
F8
Assets / Varlklar
F11
Tag Inspector / Etiket Denetisi
F9
Results / Sonular
F7
History / Gemi
Shift+F10
Frames / Kareler
Shift+F2
Code Inspector / Kod Denetisi
F10
Timelines / Zaman izgileri
Alt+F9
Hide/Show Panels / Panelleri Gizle/Gster F4
Ctrl+`
Previous Document / nceki Belge
Ctrl+Shift+`
Help (Yardm) Mens

Commands (Komutlar) Mens
Komut / Trkesi
Start Recording / Kayd Balat
Ksayol
Ctrl+Shift+X
Site Mens
Komut / Trkesi
Get / Getir
Check Out / Al
Put / Gtr
Check In / Gnder
Check Links Sitewide
Ksayol
Ctrl+Shift+D
Ctrl+Shift+Alt+D
Ctrl+Shift+U
Ctrl+Shift+Alt+U
Komut / Trkesi
Using Dreamweaver/
Dreamweavern Kullanl
Using ColdFusion/
ColdFusionn Kullanl
Ksayol
F1
Ctrl+F1
Shift+F1
Ctrl+F8
Windows KISAYOLLARI 577
Kod Ksayollar
Kod Dzenleme Ksayollar
Komut / Trkesi
Ksayol
Select Parent Tag / Ebeveyn Etiketi Se Ctrl+[
Ctrl+]
Select All / Tmn Se
Ctrl+A
Bold / Kaln
Ctrl+B
Italic / talik
Ctrl+I
Copy / Kopyala
Ctrl+C
Ctrl+F
Shift+F3
F3
Paste / Yaptr
Ctrl+V
Cut / Kes
Ctrl+X
Redo / Yinele
Ctrl+Y
Undo / Geri Al
Ctrl+Z
Ctrl+P
Surround with # / # ile evrele
Ctrl+Shift+3
Switch to Document / Belgeye Ge
Ctrl+`
Select Line Up / stteki Satr Se
Shift+Up
Select Line Down / Alttaki Satr Se
Shift+Down
Character Select Left/
Soldaki Karakteri Se
Shift+Left
Character Select Right/
Sadaki Karakteri Se
Shift+Right
Delete Word Left / Soldaki Szc Sil Ctrl+Backspace
Delete Word Right / Sadaki Szc Sil Ctrl+Del
Move to Page Up / Bir Sayfa Yukar Git Page Up
Move to Page Down / Bir Sayfa Aa Git Page Down
Select to Page Up/
Yukar Doru Bir Sayfa Se
Shift+Page Up
Select to Page Down/
Aa Doru Bir Sayfa Se
Shift+Page Down
Move Word Left / Bir Szck Sola Git
Ctrl+Left
Move Word Right / Bir Szck Saa Git Ctrl+Right
Select Word Left / Soldaki Szc Se Ctrl+Shift+Left
Select Word Right / Sadaki Szc Se Ctrl+Shift+Right
Move to Start of Line / Satrn Bana Git Home
Move to End of Line / Satrn Sonuna Git End
Select to Start of Line/
Satrn Bana Kadar Se
Shift+Home
Select to End of Line/
Satrn Sonuna Kadar Se
Shift+End
Move to Top of File / Dosyann Bana Git Ctrl+Home
Move to End of File / Dosyann Sonuna Git Ctrl+End
Select to Start of File/
Dosyann Bana Kadar Se
Ctrl+Shift+Home
578 ek C
Files (Dosyalar)
Paneli Menleri
File (Dosya) Mens
Komut / Trkesi
New File / Yeni Dosya
New Folder / Yeni Klasr
Rename / Yeniden Adlandr
Delete / Sil
Exit / k
Ksayol
Ctrl+Shift+N
Ctrl+Shift+Alt+N
F2
Del
Shift+F8
Ctrl+Q
Edit (Dzen) Mens

Komut / Trkesi
Cut / Kes
Copy / Kopyala
Paste / Yaptr
Duplicate / oalt
Select All / Tmn Se
Ksayol
Ctrl+X
Ctrl+C
Ctrl+V
Ctrl+D
Ctrl+A
View (Grnm) Mens

Komut / Trkesi
Refresh / Tazele
Show/Hide Link / Balanty Gster/Gizle
View as Root / Kk Olarak Grntle
Show Page Titles/
Sayfa Balklarn Gster
Site Files / Site Dosyalar
Site Map / Site Haritas
Ksayol
F5
Ctrl+Shift+Y
Ctrl+Shift+R
Ctrl+Shift+T
F8
Alt+F8
Site Mens
Komut / Trkesi
Get / Getir
Checkout / Al
Put / Gtr
Check In / Gnder
Link to New File / Yeni Dosyaya Bala
Link to Existing File/
Mevcut Dosyaya Bala
Change Link / Balanty Deitir
Ksayol
Ctrl+Shift+D
Ctrl+Shift+Alt+D
Ctrl+Shift+U
Ctrl+Shift+Alt+U
Ctrl+F8
Ctrl+Shift+N
Ctrl+Shift+K
Ctrl+L
Ctrl+Shift+L
Dizin
A
<a> etiketi, 74
Absolute Bottom seenei, hizalama, 183

Absolute Middle seenei, hizalama, 183
Access Key (eriilebilirlik nitelii), 386
Access mensnn komutlar
FTP, 472
Local/Network, 471
Action seenekleri (Properties
denetisi), 406
Actions mensnn komutlar
Popup Message, 291
Show Pop-Up Menu, 300
Swap Image, 283
aklamalar (HTML), 524525
Add Keyframe komutu (Modify
mens), 346, 344
Add Object to Library komutu (Modify
mens), 416
Add Object To Timeline komutu
(Modify mens), 342
Add Space Image komutu, 252
Add To Favorites dmesi, 120, 190
Add/Remove Netscape Resize Fix
iletiim kutusu, 340
Add/Remove Netscape Resize Fix
komutu (Commands mens), 340
adlandrmak
dosyalar, 23
katmanlar, 315316
resimler, 185
ablonlar, 430
Administration iletiim kutusu, 493
Advanced seici tipi, 124
Advanced sekmesi (Site Definition
iletiim kutusu), 11
aktarmak
hesap tablosu verileri, 215217
metin, 4142
stiller, 130
tablolar, 229230
aktif alan, 200
alan kmeleri, 381
Align Center dmesi, 49
Align komutu (Modify mens), 321
Align Left dmesi, 49
Align nitelii, 183
Align Right dmesi, 49

Align Top komutu (Modify mens), 321
Align With Selection komutu (View
mens), 253
American Standard Code for Information
Interchange (ASC II), 41
anahtar kareler, katmanlar, 343344
Anchor Points For Layers onay kutusu, 310
animasyon
Flash, 263264
katmanlar, 341343, 348
animasyon ubuklar, 343
Appearance ekran (Page Properties
iletiim kutusu), 110
Apply Comment dmesi, 524
arabirim, 1, 2327
ara ubuklar, 2324, 523526
aralar
arabirim, 2327
arama aralar
dzenli ifadeler, 569570
Find and Replace zellii, 549567
belgelerde arama yapmak, 551553
harici stil sayfalar ilitirmek, 557559
HTML etiketlerini silmek, 553557
isimlerin varyasyonlar, 566567
zel stiller uygulamak, 560562
sorgular, 562563
aratrma, Web sitesi gelitirme plan, 57
arka plan
katmanlar, 320
renkler, CSS (Cascading Style Sheets),
110111
resimler, 171174
Arrange komutu (Modify mens), 321
Arrange Panels komutu (Window
mens), 28, 104
artk dosyalar, 509512
ASCII (American Standard Code for
Information Interchange), 41
Assets komutu (Window mens), 120,
417, 421
Assets paneli, 120, 186189
Attach External Style Sheet iletiim
kutusu, 132
Attach Label Tag Using For Attribute
seenei (form nesneleri), 386
Attach Style Sheet simgesi, 132

Auto Overflow seenei (Properties
denetisi), 318
Autostretch seenei (Properties
denetisi), 250251
<b> etiketi, 59
Background Color metin alan, 221

Background Color nitelii, 225
Background File Activity penceresi, 474
Background Image nitelii, 225
balantlar, 7172
Check Link zellii, 508509
e-posta, 104105
frame ieriini kontrol etmek, 372
harici stil sayfalar, 131134
hedefi ayarlamak, 9697
hipermetin, 7780
isimli yer imleri, 98103
renkler, 7377
resimler, 199200
site haritalarn kaydetmek, 96
site haritas, 8994
Site Map grnm, 9194
sitenin alt blmn grntlemek, 94
sitenin dosya yaps, 8081
siteye dosya eklemek, 8288
balantlar, Contribute, 494495
balantlarn hedefini ayarlamak, 9697
Baseline seenei, hizalama, 183
Basic sekmesi (Site Definition iletiim
kutusu), 11
Basic sekmesindeki seenekler (Clean Up
Word HTML iletiim kutusu), 544
Balang sayfas, 4
balk ubuklar, 24
balklar, 32
Behaviors komutu (Window mens), 283
Behaviors paneli, 283
belge grnmleri arasnda gei
yapmak, kodu dzenlemek, 517520
belge grnmleri, gei yapmak, 517520
belgeler
arama, Find and Replace zellii, 551
balklar, 32
oklu dil destei, 6365
kaydetmek, 1823
oluturmak, 1823
paneller, 2731
belgeye bal gndermeler, 176
Bg Color arka plan (katmanlar), 320
Bg Image arka plan (katmanlar), 320
BGCOLOR nitelii, 453
biimlendirme
satrii, 5961
tablo hcreleri, 220225, 249250
bildirimler, 122
birden fazla resim, bir olayla resimleri
deitirmek, 287289
blok alnt, 5051
blok dzeyi elemanlar, 43
Bold dmesi, 59
Bold komutu (Text mens), 59
Book mens, OReilly HTML
Reference, 521
Border nitelii, 225
BORDER nitelii, 453
Border Thickness seenei (Table
boluklar, dosyalar adlandrmak, 23
Bottom seenei, hizalama, 183
blnemez boluklar, 4749
<br> etiketi, 47
Brightness and Contrast arac, 198
Brightness/Contrast iletiim kutusu, 198
Browse For File dmesi, 78, 538
Browse For File Folder simgesi, 181
Button komutu (Insert mens), 401
Button Name metin alan, 402
byklk, katmanlar, 348
carriage return karakteri (CR), 41

Cascade seenei, 31
Cascading Style Sheets, Bakn CSS
Cell Padding seenei (Table iletiim
kutusu), 212
Cell Spacing seenei (Table iletiim
kutusu), 212
CELLPADDING nitelii, 453
CELLSPACING nitelii, 453
cetveller, 122
CGI (Common Gateway Interface), 378
Char Width metin alan, 387388
Check Box komutu (Insert mens), 393
Check Browser davran, kullanc
etkileimi, 294297
Check Browser iletiim kutusu, 295
Check In arac (Files paneli), 464
Check In dmesi, 483
Check In/Out seenekleri, site
ynetimi, 481485
Check Links komutu (File mens), 508
Check Out File(s) arac (Files paneli), 464
580 DZN
Check Out Files dmesi, 484

Check Page komutu (File mens), 502,
508, 543
Check Spelling iletiim kutusu, 513
Check Spelling komutu, 513
Check Target Browser mens, 502
Check Target Browsers komutu, 502
Checkbox dmesi, 393
Checked Value metin alan, 393
Choose Remote Folder For Site Yoga
Sangha iletiim kutusu, 472
Choose Spacer Image iletiim kutusu, 250
cite nitelii, 51
Class seici tipi, 124
Clean Up HTML komutu (Commands
mens), 513, 541543
Clean Up HTML/XHTML iletiim
kutusu, 541
Clean Up Word HTML iletiim kutusu, 544
Clean Up Word HTML komutu
(Commands mens), 544
Clear komutu (Edit mens), 219, 328
Cloak files ending with: onay kutusu, 480
Cloaking komutu (Site mens), 478
Code and Design komutu (View
mens), 519
Code ara ubuu, 523526
Code grnm dmesi, 24
Code grnm, 517523
Code Inspector komutu (Window
mens), 519
Code inspector, 519
Code komutu (View mens), 518
Code View Options komutu (View
mens), 523
Coder alma alan, 3
Collapse Full Tag ara ubuu simgesi, 523
Colors iletiim kutusu, 119
Colors simgesi, 120
Columns seenei (Table iletiim
kutusu), 211
Combine As Tabs seenei, 31
Commands mensnn komutlar
Add/Remove Netscape Resize Fix, 340
Clean Up HTML, 513, 541543
Clean Up Word HTML, 544
klavye ksayollar, 573, 577
Snippets, 540
Common Gateway Interface (CGI), 378
Configure Server iletiim kutusu, 489
Connect/Disconnect arac (Files
paneli), 463
Connection Wizard (Contribute), 495
Contribute
balant oluturmak, 494495
uyumluluk zelliini etkinletirmek, 491
Convert komutu
File mens, 21
Modify mens, 338
Convert Layers To Table iletiim

kutusu, 338
Copy komutu (Edit mens), 42, 218
Cotler, Emily, Web ReDesign 2.0:
Workflow that Works, 36
CR (carriage return karakteri), 41
Crop arac, 197
CSS (Cascading Style Sheets), 107108
arka plan renkleri, 110111
balant renkleri, 7377
dahili stiller
harici stillere dntrmek, 130
temeller, 123129
dzenlemek, 149151
etiket kombinasyonlar, 144148
fontlar
boyut deiiklii, 115117
deitirmek, 111115
renk, 118120
harici stil sayfasna balamak, 131
metni hizalama, 50
ncelik
orijin, 151153
zgllk, 154156
sralama, 157159
tablolar, 210
temel yerleim dzeni oluturmak, 159
temeller, 121122
weight bildirimi, 153
CSS Layout Backgrounds komutu
(View mens), 163
CSS Layout Outlines komutu (View
mens), 147
CSS panel grubu, 2831
CSS Rule Definition iletiim kutusu, 126
CSS Styles komutu
File mens, 130
Text mens, 117
CSS Styles paneli, 2831, 123124
Cut komutu (Edit mens), 240
cmle elemanlar, 5961
alma alanlar, 34
ok satrl metin alanlar, formlar, 398
oklu dil destei ieren belgeler, 6365
znrlk, 141, 241242
dahili stil sayfalar

harici stil sayfalarna dntrmek, 130
temeller, 122129
Data Sources dmesi, 177
Date dmesi, 6668
Date iletiim kutusu, 67
davranlar
Drag Layer, 331334
eylemleri ve olaylar dzenlemek, 291

kullanc etkileimi, 277278
alr men oluturmak, 300305
bir olayla resimleri deitirmek, 287
Check Browser davran, 294297
durum ubuu mesaj oluturmak, 293
resim haritalarna eklemek, 289
rollover resimleri, 279282
yeni tarayc penceresi amak, 297
Open Browser Window, 526
Show-Hide Layers, 334336
timelinelar kontrol etmek, 344345
Default komutu (Window mens), 28
Default seenei
hizalama, 183
Wrap men esi, 399
Define Sites iletiim kutusu, 471
Definition List komutu (Text mens), 56
deerler, 122
Delete CSS Rule simgesi, 129
Delete Embedded Style Sheet dmesi, 130
Delete komutu (Edit mens), 86
Delete Row komutu, 229
Dependent Files iletiim kutusu, 476
Description iletiim kutusu, 532
Design grnm dmesi, 24
Design grnm, 517, 520
Design komutu (View mens), 520
Design Notes iletiim kutusu, 487
Design Notes komutu (File mens), 486
Designer alma alan, 3
Detach from original seenei
(Properties denetisi), 419
Detach From Template komutu
(Modify mens), 451
Detailed sekmesi (Clean Up Word
HTML iletiim kutusu), 544
devamll salamak, proje sitesi, 9
DHTML (Dynamic HTML), 341
<div> etiketi, 50
document ara ubuu, kodla ilgili
kontroller, 518519
Document komutu (View mens), 23
Document penceresi, 2324
Document Type Definition, Bakn DTD
Dont Ask Me Again onay kutusu
(Dependent Files iletiim kutusu), 476
Dont Make Me Think (kinci Bask), 36
dosyalar
adlandrmak, 23
ASCII (American Standard Code for
Information Interchange), 41
balantlar
site yaps, 8081
siteye eklemek, 8288
gizlemek, site ynetimi, 477481
yklemek, site ynetimi, 473477
dosyalar yklemek, site ynetimi, 473

dnmler, katmanlar tablolara, 336
Drag Layer davran, 331334
Drag Layer iletiim kutusu, 332
Draw Layer dmesi, 309
Draw Layout Cell dmesi, 244
Dreamweaver Exchange Web sitesi, 547
Dreamweaver Extension Manager, 546
Dreamweaver mensnn komutlar
klavye ksayollar, 571
Preferences, 4
Drop Target metin alanlar, 333
DTD (Document Type Definition), 20
durum ubuklar
mesaj oluturmak, kullanc
etkileimi, 293294
pencere nitelikleri, 298
dk kaliteli kaynak resimleri, 181
dzenlemek
eylemler ve olaylar, 291293
frame ierii, 366368
kod, 515548
yapmak, 517520
Clean Up HTML komutu, 541543
Code grnmnde HTML, 520
Code grnmnde yazdrmak, 545
gelimi zelletirme ilemleri, 545
Meta etiketler, 529533
Microsoft Word HTML, 543545
Quick Tag zellii, 535537
snippetlar, 537541
Tag inspector, 533535
yeni pencerenin konumunu
ayarlamak, 526528
resimler, 196199
dzenlenebilir alanlar, 432436
dzenlenebilir etiket nitelikleri
deiiklikler, 454455
ablonlar, 452454
dzenli ifadeler
arama aralar, 569570
Dynamic HTML (DHTML), 341
Edit Array iletiim kutusu, 269

Edit Browser List komutu (File
mens), 33
Edit Font List komutu (Text mens), 114
Edit Grid iletiim kutusu, 329
Edit mensnn komutlar
Clear, 219, 328
Copy, 42, 218
Cut, 240
Delete, 86
Find and Replace, 551
klavye ksayollar, 540, 571572, 575

Paste, 42, 218
Preferences, 4, 19, 310
Select Newer Local, 475
Select Newer Remote, 475
Select Recently Modified, 475
Tag Libraries, 526
Edit NoFrames Content komutu
(Modify mens), 374
Edit Style dmesi, 127, 160
Edit Style simgesi, 151
Edit Tag mode (Quick Tag Editor), 536
Editable Region dmesi, 435, 442
Editable Region komutu (Insert
mens), 456
Editable Region simgesi, 433
Editable Tag Attributes iletiim kutusu, 452
eklenti bulmak, 547
eklentiler, bulmak ve yklemek, 547
eklentiler, QuickTime filmleri, 273275
eklentileri yklemek , 547
ekmek krnts gezinti sistemi, 95
ekran znrl, 141
elle kod yazma, 515548
yapmak, 517520
meta etiketler, 529533
snippetlar, 537541
ayarlamak, 526528
<em> etiketi, 59
Email Link dmesi, 104
Email Link iletiim kutusu, 104
Email Link komutu (Insert mens), 104
<empty> etiketi, 178, 233
Enable Cloaking komutu (Site mens), 478
Enctype metin alan, 407
e-posta, balantlar, 104105
eriilebilirlik, 497514
Dreamweaver sitesinin dndaki
dosyalar, 464465
frameler, 356
nitelikler, 386
site raporu oluturmak, 512513
tarayc uyumluluunu kontrol etmek, 502
test etmek, 499501
WCAG (Web Content Accessibility
Guidelines) Section 508, 179
yazm denetimi, 513514
etiket seici, 124
DZN 581
etiketler
seici, 2425
etkileim (kullanc)
alr menler oluturmak, 300305
resim haritalarna davran eklemek, 291
etkileim, rollover resimleri, 279282
etkin balantlar, renkler, 74
Events mens, 292
Exit komutu (File mens), 547
Expand All ara ubuu seenei (Code
ara ubuu), 524
Export komutu
File mens, 130, 230
Site mens, 489
Export Styles As CSS File iletiim
kutusu, 130
Export Table iletiim kutusu, 230
Extensible Hypertext Markup Language
(XHTML), 2021
Extensible Markup Language (XML), 20
Extension Manager iletiim kutusu, 547
Extension Manager, 546
eylemler, 284, 291293
Favorite Objects listesi, 26

Favorites listesi, resimler, 190191
Fieldset iletiim kutusu, 381
File mensnn komutlar
Check Page, 502, 508, 543
Convert, 21
Exit, 547
Export, 130, 230
Go To Macromedia Exchange, 547
Install Extension, 547
New, 18
Open in Frame, 370
Preview in Browser, 33
Print Code, 545
Save All Frames, 370
Save All, 367
Save As Template, 430
Save as Web Page, 41
Save Frame, 366
Save Frameset As, 359
Save Frameset, 363
Save Site Map, 96
Save, 21
File Transfer Protocol (FTP), 472
Files komutu (Window mens), 82
Files paneli, 8288
582 DZN
site ynetimi, 461464

Check In arac, 464
Check Out File(s) arac, 464
Connect/Disconnect arac, 463
Get File(s) arac, 463
men seenekleri, 464
Put File(s) arac, 464
Refresh, 463
sayfalarda deiiklik yapmak, 466
Show mens, 463
Synchronize arac, 464
filmler, QuickTime, 273275
Find and Replace komutu, 551
Find and Replace iletiim kutusu, 551
belgelerde arama yapmak, 551553
harici stil sayfalar ilitirmek, 557559
isimlerin varyasyonlar, 566567
zel stiller uygulamak, 560562
Find In menu seenekleri, 551
Flash
animasyonlar, 263264
dmeler, 260263
metin, 257259
deiiklikler, 260
fontlar, 258
oluturmak, 257259
Flash Accessibility Attributes iletiim
kutusu, 258259
<font> etiketi, 115117
Font komutu (Text mens), 114
Font List iletiim kutusu, 114
fontlar
CSS (Cascading Style Sheets)
boyutunu deitirmek, 115117
deitirmek, 111115
renk, 118120
Flash metni, 258
Form komutu (Insert mens), 393, 401
Format Table iletiim kutusu, 223
formatlar, resimler, 175
formlar, 377412
biimlendirmek, 404406
ok satrl metin alanlar, 398400
dme eklemek, 401402
gizli alanlar, 402404
ierik, gruplamak, 381382
ilemek, 406407
liste eleri, 395398
men eleri, 395398
oluturmak, 379381
onay kutular, 393395
radyo dmeleri, 390392
srama menleri, 409411
tek satrl metin alanlar, 383390
test etmek, 407408
formlar biimlendirmek, 404406
formlarn ilenmesi, 406407

Frame Borders komutu, 357
frame sayfalarn amak, 370371
Frame Tag Accessibility Attributes
iletiim kutusu, 355
frameler, 351376
eriilebilirlik, 356
frameset oluturmak, 353357
framesetlerde yeniden
boyutlandrmak, 359363
framesetleri kaydetmek, 357359
ierik
balantlarla kontrol etmek, 372
kontrol etmek, 371372
oluturmak ve dzenlemek, 366
NoFrames ierii, 374375
zellikleri ayarlamak, 363366
sayfa amak, 370371
frameleri yeniden boyutlandrmak, 359
Frames komutu (Window mens), 358
Frameset komutu (Modify mens), 357
framesetler
frameleri yeniden boyutlandrmak, 359
i ie yerletirmek, 357
kaydetmek, 357359
oluturmak, 353357
FTP komutu (Access mens), 472
FTP (File Transfer Protocol), 472
Full Name metin alan, 388
gelimi zelletirme ilemleri, kodu

dzenlemek, 545547
gelimi site tanm seenekleri, 15
gelitirme planlar, Web siteleri
aratrma, 57
devamlln salamak, 9
tasarm, 89
test etmek, 9
yaps, 78
Get dmesi (Files paneli), 473
Get File(s) arac (Files paneli), 463
gezinti
ara ubuklar, 298
yapsal site gezinti sistemi, 95
gezinti ubuklar, 368
GIF (Graphic Interchange Format), 175
gizli alanlar, formlar, 402404
Go To Macromedia Exchange komutu
(File mens), 547
Goto, Kelly, Web ReDesign 2.0:
Workflow that Works, 36
greceli balantlar, 77
grnrlk durumu, katmanlar, 327, 348
Graphic Interchange Format (GIF), 175
Grid komutu (View mens), 328330
Grid Settings komutu, 329
gruplamak, form ierii, 381382
harici stil sayfalar

dahili stil sayfalarn dntrmek, 130
Find and Replace zellii ile
ilitirmek, 557559
oluturmak, 134144
Head Content komutu, 529
Header nitelii, 225
Help mensnn komutlar
Manage Extensions, 546
hesap tablolar, veri aktarmak, 215
Hidden Overflow seenei, 318
Hidden Visibility seenei, 327
HiddenField metin alan, 404
Hide Menu On MouseOut Event onay
kutusu, 304
Highlight Invalid HTML komutu, 523
Highlighting kategorisi, 442
hipermetin balantlar, 7780
History komutu (Window mens), 60
History paneli, 60
hizalama
metin, 4950
resimler, 183
Horizontal nitelii, 225
Horizontal Rule dmesi, 65
Horizontal Rule komutu, 65, 422
hotspot, 200
HTML komutu (Insert mens), 422
HTML (Hypertext Markup Language), 20
aklamalar, 524525
Code grnmnde dzenlemek, 520
hcreler, tablolar
biimlendirmek, 220225, 249250
kopyalamak ve yaptrmak, 217219
Hypertext Markup Language. Bkz.
HTML
IDE (Integrated Development

Environment), 533
Ignore whitespace seenei (Find and
Replace iletiim kutusu), 552
Image Assets paneli, 246
Image Caption Table snippet, 541
Image komutu (Insert mens), 176
Image Maps komutu, 201
Image Placeholder iletiim kutusu, 193
Image Tag Accessibility Attributes
iletiim kutusu, 178
Image Tag Accessibility Options iletiim
kutusu, 232
Image Transparency srgs, 253
Image Viewer, 265272
Images dmesi, 186
Images mensnn komutlar, 279

Import Table Data iletiim kutusu, 216
Import Tabular Data komutu, 216
Indent komutu (Text mens), 50
Inherit visibility seenei, 327
Input Tag Accessibility Attributes
iletiim kutusu, 384
Insert ara ubuu, 2526
Insert Date iletiim kutusu, 67
Insert Div Tag dmesi, 145
Insert Div Tag iletiim kutusu, 146
Insert Email Link iletiim kutusu, 105
Insert Flash Button iletiim kutusu, 261
Insert Flash Text iletiim kutusu, 257
Insert go button after menu onay
kutusu, 410
Insert komutu (Window mens), 104
Insert mens komutlar
Email Link, 104
Form, 401
HTML, 47
Image, 176
Interactive Images, 280
Layout Objects, 313
Named Anchor, 98
Table Objects, 216
Table, 211, 381
Template Objects, 456
Insert Other Character iletiim kutusu, 62
Insert Rollover Image iletiim kutusu, 280
Insert Row komutu (Modify mens), 229
Insert Rows Or Columns iletiim
kutusu, 229
Insert Rows Or Columns komutu, 229
Install Extension komutu, 547
Integrated Development Environment
(IDE), 533
Interactive Images, Rollover Image
komutu (Insert mens), 280
Internet Explorer, tercihler, 151152
Invalid Markup vurgusu, 523
Invisible Elements komutu, 99, 310, 380
Italic dmesi, 59
zgara seenekleri, katmanlar, 328330
<i> etiketi, 59
i ie yerletirilen framesetler, 357

i ie yerletirilen katmanlar, 324326
i ie yerletirilen listeler, 5759
i ie yerletirilen ablonlar, 455457
i ie yerletirilen tablolar, 237241
ierik, 3940
blok alntlar, 5051
blnemez boluk, 4749
formlar, gruplamak, 381382
frameler
balantlarla kontrol etmek, 372

dzenlemek, 366370
oluturmak, 366370
listeler, 5256
tanm, 5657
metin, hizalama, 4950
metinleri aktarmak, 4142
otomatik olarak tarih eklemek, 6668
zel karakterler eklemek, 6162
proje siteleri, 6
satr sonu, 4647
satrii biimlendirme, 5961
yaps, 4346
yatay cetvel, 6566
iletiimle ilgili hedefler, proje sitesi, 7
<img> etiketi, 180
isimli yer imleri, balantlar, 98103
istee bal ierik, ablonlar, 437440
istemci tarafl script, 402
iaretleme dilleri, 20
Joint Photographic Experts Group

(JPEG), 175
JPEG (Joint Photographic Experts
Group), 175
Jump Menu iletiim kutusu, 409
Jump Menu komutu, 409
Justify dmesi, 49
kaltm (inheritance), 153

karakterler
dosyalar adlandrmak, 23
ierie eklemek, 6162
satrii metin biimlendirme, 5961
katmanlar, 307349
adlandrmak, 315316
anahtar kareler, 343344
animasyon
nizleme, 348
timelinelar, 341343
arka planlar, 320
byklk, 348
deiiklikler, 316321
darya karmak, 324326
Drag Layer davran, 331334
grnrlk durumu, 327328, 348
zgara ve cetvel seenekleri, 328330
nesneleri yerletirmek, 345346
Netscape Resize Layer Fix, 340341
oluturmak, 309314
resim zellikleri, 348
Show-Hide Layers davran, 334336
tablolara dntrmek, 336340
DZN 583
ylma sras, 322324

yolu kaydetmek, 346347
katmanlar darya karmak, 324326
kaydetmek
framesetler, 357359
site haritalar, 96
yeni sayfalar, 1823
kaydrlabilir ubuklar, 299
kaydrlabilir listeler, 395
kaynaklar, 36
kenarlklar, resimler, 184185
kenetlenmi paneller, 29
Keyboard Shortcuts iletiim kutusu, 540
Keyboard Shortcuts komutu, 540
Keywords iletiim kutusu, 532
krpma alan (katmanlar), 318
klasrler
adlandrmak, 23
yerel kk klasr, 10
klavye ksayollar
Macintosh, 571574
Windows, 575578
kod denetisi, 519
kodlar
dzenlemek, 515548
yapmak, 517520
Code grnmnde yazdrmak, 545
meta etiketler, 529533
snippetlar, 537541
ayarlamak, 526528
klavye ksayollar
Macintosh, 574
Windows, 578
konuma rnekleyici, 178
kk klasrne bal, 176
Krug, Steven, Dont Make Me Think
(kinci Bask), 36
ktphane eleri, 413425
belgelere eklemek, 417419
deiiklikler, 421423
ktphane referanslarn
gncellemek, 424425
oluturmak, 415417
tekrar oluturmak, 420421
ktphane elerini tekrar oluturmak, 420
ktphane referanslarn
gncellemek, 424
584 DZN
lang nitelii, 51
Layer Borders komutu, 313

Layer komutu (Insert menu), 313
Layers komutu (Window mens), 315
Layers paneli, 315
Layers to Table komutu, 338
Layout grnm, tablo oluturmak, 243
Layout komutu (View mens), 90
Layout Objects komutu, 313
Layout Table arac, 244
Left seenei, hizalama, 183
LF (line feed), 41
Library dmesi, 415
Library klasr, 416
Library komutu, 416, 424
Line Break komutu (Insert mens), 47
line feed karakteri (LF), 41
Link Checker sekmesi (Results iletiim
kutusu), 508
List Item dmesi, 5455
List komutu (Text mens), 53
List Properties iletiim kutusu, 5256
List Values iletiim kutusu, 397
List/Menu komutu, 395
List/Menu name metin alan, 397
liste eleri, formlar, 395398
listeler, 5256
tanm, 5257
Load komutu (View mens), 252
Load Query button simgesi, 563
Local/Network komutu, 471
Location ara ubuu, 298
Macintosh
font boyutlar, 116
resimleri nizlemek, 176
sistem gereksinimleri, xviii
kullanc alma alan, 3
Macromedia Extension Manager, 546
Macromedia Website, 36
madde imli listeler, 5256
Make Attribute Editable onay kutusu, 454
Make Attributes Editable komutu
(Modify mens), 452, 454
Manage Extensions komutu, 546
Manage Sites iletiim kutusu, 469
Manage Sites komutu, 11, 468
Map and Files grnm, 90
Map Only grnm, 90
Match case seenei (Find and Replace
Match whole word seenei (Find and
Replace iletiim kutusu), 552
Max Chars metin alan, 388
men seenekleri (Files paneli), 464

menler
men ubuu, pencere nitelii, 299
men eleri, formlar, 395398
Merge Cells dmesi, 228
Merge Cells komutu, 228
Merge nitelii, 225
Method seenekleri (Properties
denetisi), 406407
metin
aktarmak, 4142
Flash metni, 257259
fontlar
boyut deiiklii, 115117
deitirmek, 111115
renk, 118120
hizalamak, 4950
satrii biimlendirme, 5961
metin alanlar
ok satrl formlar, 398400
Press Key, 540
Preview, 526
tek satrl formlar, 383390
Microsoft Word HTML, kodu
dzenlemek, 543545
Middle seenei, hizalama, 183
miras (inheritance), 153
Modify mensnn komutlar
Align, 321
Arrange, 321
Convert, 338
Frameset, 357, 374375
Library, 416
Page Properties, 32
Table, 219, 228
Template Properties, 447
Templates, 451
Timeline, 344
moreContent framei, 370
multimedya eleri, 255275
Flash animasyonlar, 263264
Flash dmeleri, 260263
Flash metni
deiiklikler, 260
oluturmak, 257259
Image Viewer, 265272
QuickTime filmlerini gmmek, 273
mteri anketi, 5
Named Anchor iletiim kutusu, 98

Named Anchor komutu (Insert
mens), 98
Named Anchor simgesi, 99
nesneleri yerletirmek, katmanlar, 345
Nest When Created Within a Layer
onay kutusu, 325
Netscape Resize Layer Fix, 340341

New CSS Rule dmesi, 404
New CSS Rule iletiim kutusu, 124
New CSS Rule simgesi, 124
New Document iletiim kutusu, 18, 354
New Editable Region iletiim kutusu, 433
New komutu (File mens), 18
New Optional Region iletiim kutusu, 439
New Repeating Region iletiim kutusu, 441
New Site komutu (Site mens), 11
New Snippet dmesi, 539
New Snippet Folder dmesi, 539
New Style Sheet File komutu, 136
New Template iletiim kutusu, 431
New Template simgesi, 431
No Resize onay kutusu, 364
No Wrap nitelii, 225
NoFrames ierii, 374375
Non-breaking Space komutu, 49
None komutu (Text mens), 117
OReilly HTML Reference, 521

Object Tag Accessibility Attributes
iletiim kutusu, 264
Off (Wrap men esi), 399
okuyucular, 178
olaylar, 284
dzenlemek, 291293
onClick, 300
onMouseOut, 286
onMouseOver, 286
oluturmak
alr menler, 300305
belgeler, 1823
Contribute balants, 494495
durum ubuu mesajlar, 293294
Flash metni, 257259
frameler, 366370
framesetler, 353357
katmanlar, 309314
ktphane eleri, 415417
resim yer tutucular, 193194
site haritalar, 8990
ablonlar, 429431
tablolar, 209215
yeni sayfalar, 1823
onaltlk tabanl renk deerleri, 75
onaltlk tabanl renkler, 119120
onay kutular, formlar, 393395
onClick olay, 300
onMouseOut olaylar, 286
onMouseOver olaylar, 286
Open Browser Window davran, 297
Open Browser Window iletiim kutusu, 298
Open in Frame komutu, 370
Optimize Images iletiim kutusu, 199
Optional Content iletiim kutusu, 439
Optional Region dmesi, 438

Ordered List dmesi, 52
orijin, stil ncelii, 151153
Orphaned Files komutu (Show
mens), 511
Others komutu (Window mens), 342
Overflow seenekleri (Properties
denetisi), 318
l birimi, 141
ncelik, CSS (Cascading Style Sheets)
orijin, 151153
zgllk, 154156
sralama, 157159
zel karakterler
dosyalar adlandrmak, 23
ierie eklemek, 6162
satrii metin biimlendirme, 5961
zel stiller, 560562
zelletirme, ileri dzeyde kod
dzenleme, 545547
zellikler, 122, 363366
<p> etiketi, 144148
Page Properties iletiim kutusu, 32, 111

Page Properties komutu (Modify
mens), 32
paneller, komutlarn klavye ksayollar
Macintosh, 574
Windows, 578
panelleri ayrmak, 30
Password metin alanlar, 390
Paste komutu (Edit mens), 42, 218
PDF (Portable Document Format)
dosyalar, 478
pencereler
adlandrmak, 299
nitelikler, 298299
yerleim, elle kod yazmak, 526528
pencerenin konumunu ayarlamak, elle
kod yazmak, 526528
percent seenei (stunlar yeniden
boyutlandrmak), 362
Physical (Wrap men esi), 400
piksel, 141
pixels seenei (stunlar yeniden
boyutlandrmak), 362
PNG (Portable Network Graphic), 175
Point To File arac, 203
Point To File simgesi, 91
Pointer Hotspot arac, 202
Popup Message iletiim kutusu, 292
Popup Message komutu (Actions
mens), 291
Portable Document Format (PDF)

dosyalar, 478
Portable Network Graphic (PNG), 175
Preferences iletiim kutusu, 313, 418
Preferences komutu (Edit mens), 4, 19
Preload rollover image onay kutusu, 281
Press Key metin alan, 540
Prevent Overlaps onay kutusu, 337
Preview In Browser Preferences iletiim
kutusu, 33
Preview in Browser komutu, 33
Preview metin alan, 526
Preview/Debug In Browser dmesi, 34
Print Code komutu (File mens), 545
proje sitesi
gelitirme planlar
aratrma, 57
devamlln salamak, 9
tasarm, 89
test etmek, 9
yaps, 78
yeni sayfa, 1823
yerel, tanmlamak, 1018
Properties komutu, 380
Properties denetisi, 2627, 419
punto, 141
Put dmesi (Files paneli), 473
Put File(s) arac (Files paneli), 464
QTVR (QuickTime Virtual Reality)

filmleri, 273
Quick Tag Editor, 535
Quick Tags, kodu dzenlemek, 535537
QuickTime filmleri, 273275
QuickTime Virtual Reality (QTVR)
filmleri, 273
Radio Group dmesi, 390

Radio Group iletiim kutusu, 390
Radio Group komutu, 390
radyo dmeleri, formlar, 390392
raporlar (site raporlar), 512513
RDS (Remote Development Services), 489
Recreate seenei (Properties denetisi), 419
Rectangular Hotspot arac, 201, 289
Refresh arac (Files paneli), 463
Refresh Design View kontrol
(Document ara ubuu), 518
Refresh Site List dmesi, 120, 187
relative links, 77
relative seenei (stunlar yeniden
boyutlandrmak), 362
Remote Development Services (RDS), 489
Remove All Space Images komutu, 252
Remove Comment dmesi, 525
DZN 585
Remove Dreamweaver Special Markup

seenei (Clean Up HTML/
XHTML iletiim kutusu), 542
Remove Empty Container Tag seenei
(Clean Up HTML/XHTML iletiim
kutusu), 541
Remove Event dmesi, 337
Remove From Favorites dmesi, 191
Remove Non-Dreamweaver HTML
Comments seenei (Clean Up
HTML/XHTML iletiim kutusu), 542
Remove Redundant Nested Tags
seenei (Clean Up HTML/
XHTML iletiim kutusu), 542
Remove Spacer Image komutu, 252
Remove Specific Tag(s) seenei (Clean Up
HTML/XHTML iletiim kutusu), 542
Remove Template Markup komutlar
(Modify mens), 437
renkler
balantlar, 7377
CSS (Cascading Style Sheets), arka
plan, 110111
fontlar, 118120
onaltlk tabanl renk kodlar, 76
Repeating Region dmesi, 441
Replace All seenei (Find and Replace
Reports iletiim kutusu, 499
Reports komutu (Site mens), 499
Resample arac, 199
Reset dmesi, 401402
Reset Image To Original Size dmesi, 181
Reset Origin komutu (View mens), 330
Reset Position komutu (View mens), 253
resim haritalar, 200204, 289291
resim zellikleri, katmanlar, 348
resimler, 169170
arka planlar, 171174
Assets panelini kullanarak resim
eklemek 186189
balantlar, 199200
dzenleme tercihlerini ayarlamak, 195
dzenlemek, 196199
etraftaki boluu ayarlamak, 191192
Favorites listesi, 190191
formatlar, 175
isim atamak, 185
kenarlklar, 184185
resim haritalar, 200204
sayfaya yerletirmek, 175180
tablolar, 230237
yeniden boyutlandrmak, 180181
yer tutucu
deitirmek, 194
oluturmak, 193194
yerletirmek, 182183
resimleri yeniden boyutlandrmak, 180
586 DZN
Results komutu (Window mens), 561

Right seenei, hizalama, 183
Rollover Image komutu, 279
rollover resimleri
dorudan uygulama, 286
eklemek, 279282
rollover balantlar, 74
RoundTrip HTML, 522
Rows seenei (Table iletiim kutusu), 211
ruler seenekleri, katmanlar, 328330
Rulers komutu (View mens), 329
S -
Same For All onay kutusu, 405

Sample Style Sheets iletiim kutusu, 133
satr aralklar, 108
satr sonlar, 4647
satrii stiller, iyi kod yazma prensipleri, 157
satrlar, yatay cetveller, 6566
Save All Frames komutu, 370
Save All komutu (File mens), 367
Save As iletiim kutusu, 21
Save As Template iletiim kutusu, 430
Save As Template komutu, 430
Save as Web Page komutu, 41
Save Current komutu, 30
Save Flash Element iletiim kutusu, 265
Save Frame komutu (File mens), 366
Save Frameset As komutu, 359
Save Frameset komutu, 363
Save komutu (File mens), 21
Save Page Design iletiim kutusu, 166
Save Query simgesi, 562
Save Selected Steps As Command
dmesi, 61
Save Site Map komutu, 96
saylar, dosyalar adlandrmak, 23
Scroll Overflow seenei (Properties
denetisi), 318
Section 508, WCAG (Web Content
Accessibility Guidelines), 179
seiciler, 122, 124
Select Extension to Install iletiim
kutusu, 547
Select File iletiim kutusu, 78, 264
Select Image Source iletiim kutusu, 173
Select Newer Local komutu, 475
Select Newer Remote komutu, 475
Select Parent Tag dmesi, 524
Select Recently Modified komutu, 475
Select Style Sheet File iletiim kutusu, 134
Select Table komutu (Modify mens), 219
Set As Home Page komutu (Site
mens), 89, 466
Set Text Of Status Bar iletiim kutusu, 293
Settings komutu (Site mens), 480
Show By Default onay kutusu, 439
Show Grid komutu (View mens), 328
Show Hidden Files komutu, 91

Show komutu (View mens), 329
Show Log On Completion seenei
(Clean Up HTML/XHTML iletiim
kutusu), 542
Show mens, 83
Orphaned Files, 511
Show New Document iletiim kutusu, 19
Show Only Set Properties mode, 127
Show OptionalRegion1 onay kutusu, 447
Show Page Titles komutu (View
mens), 467
Show Pop-Up Menu iletiim kutusu, 300
Show Pop-Up Menu komutu (Actions
mens), 300
Show-Hide Layers davran, 334336
Show-Hide Layers iletiim kutusu, 335
srama menleri, formlar, 409411
sralama, stil ncelii, 157159
sral listeler, 5256
srasz listeler, 5256
Site Assets penceresi, 187
Site Definition iletiim kutusu, 1117, 90
Site Export ilevi, site ynetimi, 488489
Site Files dmesi, 468
site haritalar
balantlarla almak, 9194
kaydetmek, 96
oluturmak, 8990
site kk klasrne bal yollar, 79
Site Map dmesi, 90
Site Map Options komutu (View
mens), 90, 467
Site Map grnm, balantlar, 9194
Site Map View komutu (Site mens), 92
Site mensnn komutlar
Cloaking, 478481
Export, 489
Manage Sites, 11, 468
New Site, 11
Reports, 499
Set As Home Page, 89, 466
Site Map View, 92
Synchronize, 477
site raporlar oluturmak, 512513
site ynetimi, 459496
Check In/Out seenekleri, 481485
Contribute uyumluluu, 491495
dosyalar ve klasrleri gizlemek, 477481
dosyalar yklemek, 473477
dosyalara erimek, 464465
Files paneli, 461469
Site Export ilevi, 488489
sunucu balantlar, 489490
tasarm notlar, 486488
uzak site balants, 470473

siteler
balantlar, 7172
alt blmleri grntlemek, 9496
dosya eklemek, 8288
dosya yaps, 8081
e-posta, 104105
hedefi ayarlamak, 9697
hipermetin, 7780
isimli yer imleri, 98103
renkler, 7377
site haritas, 8994
Site Map grnm, 9194
gelitirme planlar
aratrma, 57
devamlln salamak, 9
tasarm, 89
test etmek, 9
yaps, 78
yap, balantlar, 8081
yeni sayfa, 1823
yerel, tanmlanmas, 1018
Sites And Servers dmesi, 177
Snap to Grid komutu, 328
Snippet iletiim kutusu, 539
snippetlar, kodu dzenlemek, 537541
Snippets komutu, 540
sorgular, Find and Replace zellii,
562563
Sort Table iletiim kutusu, 226
<span> etiketi, 127
Special Characters komutu (Insert
mens), 47
speech synthesizers, 178
Split Cell dmesi, 228
Split Cell Into Rows Or Columns
dmesi, 238
Split Cell komutu (Modify mens), 228
Split dmesi, 121, 519
Split grnm dmesi, 24
Split grnm, 517
Split nitelii, 225
Src seenei (Properties denetisi), 419
Standard komutu (View mens), 23
stil sayfalar. Bkz. CSS
stiller, 122
<strong> etiketi, 59
<style> etiketi, 130
Style komutu (Text mens), 59
Submit dmesi, 401
sunucu balantlar, site ynetimi, 489
Swap Image iletiim kutusu, 284
Swap Image komutu, 283
Synchronize arac (Files panel), 464
Synchronize komutu (Site mens), 477
ablonlar, 427458
deiiklikler, 450451
dzenlenebilir alanlar eklemek, 432

dzenlenebilir blgeleri kaldrmak, 436
dzenlenebilir etiket nitelikleri, 452
isim deitirmek, 430
istee bal ierik, 437440, 447
oluturmak, 429431
sayfa oluturmak, 444446
tekrarlanan blgeler eklemek, 440
tekrarlanan giriler eklemek, 448449
Tab Index (accessibility nitelii), 386

Table dmesi, 211
<table> etiketi, 219
Table komutu
File mens, 230
Insert mens, 211, 381
Modify mens, 219, 228
Table iletiim kutusu, 211
Table mensnn komutlar, Insert
Rows Or Columns, 229
Table Mode komutu, 210, 233
Table Objects komutu, 216
Table Width seenei (Table iletiim
kutusu), 212
Table Widths komutu, 214, 245
tablo hcrelerini kopyalamak, 217219
tablo hcrelerini yaptrmak, 217219
tablo ieriini sralamak, 226227
tablolar, 207208
aktarmak, 229230
deiiklik yapmak, 227229
hesap tablosu verilerini aktarmak,
215217
hcreler
biimlendirmek, 220225, 249250
kopyalamak ve yaptrmak, 217
Layout grnm, 243246
monitr tiplerine gre tasarm
yapmak, 241242
oluturmak, 209215
pencere byklyle sayfa dzenini
resimler, 230237
semek, 219220
sralamak, 226227
tablolar dntrmek, 336340
taslak resim, 252254
yerleim dzeni
deiiklik, 247249
genilik, 250252
Tabular Data dmesi, 216
Tag Accessibility Attributes iletiim
kutusu, 189
Tag Inspector komutu (Window

mens), 212, 534
Tag inspector (Image Viewer), 266270
Tag inspector, kodu dzenlemek, 533
Tag Libraries komutu, 526
Tag Library Editor, 526
tanm listeleri, 5257
tarayclar
Internet Explorer tercihleri, 152
kullanc etkileimi
nizlemede kullanlacak taraycnn
belirlenmesi, 3335
uyumluluk, eriilebilirlik testi, 502507
Target Browser Check sekmesi (Results
panel), 503
Target mensndeki seenekler, 373
tarihler, otomatik olarak eklemek, 6668
tasarm notlar, site ynetimi, 486488
tasarmlar, proje siteleri, 89
taslak resimler, 252254
<td> etiketleri, 220
tek satrl metin alanlar, formlar, 383391
tekrarlanan blgeler, ablonlara
eklemek, 440443
tekrarlanan giriler, ablonlara eklemek, 448
Template Objects komutu (Insert
mens), 456
Template Properties iletiim kutusu, 447
Template Properties komutu (Modify
mens), 447
Templates komutu (Modify mens), 451
test etmek, 497514
eriilebilirlik, 499501
formlar, 407408
proje sitesi, 9
site raporlar oluturmak, 512513
tarayc uyumluluunu kontrol etmek,
502508
yazm denetimi yapmak, 513514
Text Color Picker dmesi, 119
Text Field komutu (Insert mens), 384
Text Indent dmesi, 51
Text mensnn komutlar
Check Spelling, 513
CSS Styles, 117
Font, 114
Indent, 51
List, 53
Style, 59
Text Outdent dmesi, 51
Textarea dmesi, 398
Textarea komutu (Insert mens), 398
DZN 587
TextTop seenei, hizalama, 183

tklanm balantlar, renkler, 74
Tile Horizontally seenei, 31
Tile Vertically seenei, 31
Timeline komutu, 342, 344
timeline, katman animasyonu, 341345
Timelines komutu, 342
Timelines paneli, 342
title nitelii, 355356
title nitelii, 51
Toolbars komutu, 24, 518
Top seenei, hizalama, 183
<tr> etiketi, 220
Tracing Image komutu, 252
<ul> etiketi, 142

Uncloak All komutlar, 481
Uniform Resource Locators (URLs), 71
Unordered List dmesi, 53
Unordered List komutu, 53
Update Files iletiim kutusu, 468
Update Library Items iletiim kutusu, 423
Update Page When Template Changes
onay kutusu, 451
Update Pages iletiim kutusu, 423
Update Pages komutu (Modify
mens), 424, 450
Update Template Files iletiim kutusu, 450
URL (Uniform Resource Locator), 71
Use regular expression seenei (Find
and Replace iletiim kutusu), 552
kullanc etkileimi, 277278
resim haritalarna davran eklemek, 289
uzak site balants, site ynetimi, 470
uzunluk, dosyalar adlandrmak, 23
Validate Markup komutu, 543

Vertical nitelii, 225
videolar, QuickTime filmleri, 273275
View as Root komutu, 94
View mensnn komutlar
Code and Design, 519
Code View Options, 523
Code, 518
Design, 520
Grid, 328330
Head Content, 529
Rulers, 329, 330
588 DZN
Show Hidden Files, 91

Site Map Options, 90, 467
Table Mode, 210, 233
Toolbars, 23, 518
Tracing Image, 252
Visual Aids, 99, 313
View Options kontrol, 518
View Options mens, 530
Virtual (Wrap men esi), 400
Visible Overflow seenei, 318
Visual Aids komutu, 99, 313, 357
WCAG (Web Content Accessibility

Guidelines), Section 508, 179
Web Content Accessibility Guidelines
(WCAG), Section 508, 179
Web ReDesign 2.0: Workflow that
Works, 36
Web siteleri
balantlar
alt blmleri grntlemek, 9496
dosya eklemek, 8288
site yaps, 8081
gelitirme plan
aratrma, 57
devamlln salamak, 9
tasarm, 89
test etmek, 9
yaps, 78
kullanc etkileimi
durum ubuu mesaj
oluturmak, 293294
eylemleri ve olaylar
dzenlemek, 291293
resim haritalarna davran
eklemek, 289291
Macromedia, 36
yap, balantlar, 8081
yeni sayfa, 1823
yerel siteler, tanmlamak, 1018
Web uyumlu renkler, 75
weight bildirimi, CSS, 153
WIDTH nitelii, 453
Width And Height nitelii, 225
Window mens, 2831
Window mensnn komutlar
Arrange Panels, 28, 104
Assets, 120, 417, 421
Behaviors, 283
Code Inspector, 519
Files, 82
Frames, 358
History, 60
Insert, 65, 104
Layers, 315
Others, 342
Properties, 380
Results, 561
Tag Inspector, 212, 534
Workspace Layout, 3, 28
Windows
font boyutu, 116
kullanc alma alan, 3
resimleri nizlemek, 176
Workspace Layout komutu (Window
mens), 3, 28
Wrap men eleri, 399
Wrap Tag mode (Quick Tag Editor), 536
Wrap With Label Tag seenei (form
nesneleri), 385
XHTML (Extensible Hypertext Markup

Language), 2021
XML (Extensible Markup Language), 20
yap, ierik, 4346

yapsal iaretleme, 43
yatay cetveller, 6566
yazdrmak, Code grnm, 545
yazm denetimi, 513514
yeni pencerenin konumunu ayarlamak,
elle kod yazmak, 526528
yeni sayfalar
balklar, 32
kaydetmek, 1823
oluturmak, 1823
paneller, 2731
yeniden boyutlandrma tutamalar,
window nitelii, 299
yer tutucular, resimler
deitirmek, 194
oluturmak, 193194
yerel HTML biimlendirme, iyi kod
yazma prensipleri, 157
yerel kk klasrleri, 10
yerel site, tanmlamak, 1018
yerel ve uzak siteleri senkronize hale
getirmek, 477
yerleim dzenleri
tablolar, 247249
ylma sras, katmanlar, 322324
yolu kaydetmek, katmanlar, 346347

ynetim, site, 459496
Check In/Out seenekleri, 481485
Contribute uyumluluu, 491495
dosyalar ve klasrleri gizlemek, 477
dosyalar yklemek, 473477

dosyalara erimek, 464465
Files paneli, 461464, 466469
Site Export ilevi, 488489
sunucu balantlar, 489490
tasarm notlar, 486488
uzak site balants, 470473
z-index (katmanlar), 322

ziyaretiler, proje sitesi, 6
DZN 589
LSANS ANLAMASI
KTAPLA BRLKTE VERLEN BU YAZILIM MEDYASININ PAKETN
AMADAN NCE EKTEK ANLAMA ARTLARINI OKUYUNUZ.
BU KAPALI YAZILIM PAKETN AARAK, AAIDA YAZILMI
OLAN ANLAMA KOULLARINI KABUL ETM OLURSUNUZ.
EER BU KOULLARI KABUL ETMYORSANIZ,
PAKET AMAYINIZ. SADECE PAKET GER VERNZ.
Bu kitaptaki bilgiler sadece bilgilendirme amal olup ve nceden haber verilmeksizin
zerinde deiiklik yaplabilir. Adobe Systems, Inc., Adobe Press ve Medyasoft Yaynlar, bu
kitapta olabilecek hatalardan ve yanllklardan dolay hibir sorumluluk stlenmemektedir.
Bu kitapta ele alnan yazlm lisansl bir yazlm olup,
sadece lisans koullarna uygun olarak kullanlabilir veya kopyalanabilir.
Kitapla birlikte verilen CD-ROMdaki yazlm dosyalarnn telifi Adobe Systems, Inc.e aittir.
Bu programlar ve dosyalar zel olarak kullanma hakknz yoktur.
Bunlar bir defada tek bir bilgisayarda kullanabilirsiniz.
Bunlar bir a zerindeki baka bir bilgisayara kopyalayamazsnz. Orijinal
CD-ROMa sahip olduunuz srece dosyalar tek bir sabit diske kopyalayabilirsiniz.
Yazlm zerinde kaynak kodlar gstermek iin hibir ilem yapamaz, kaynak kodlarn
deitiremez ya da paralara ayramazsnz. Adobe Systems, Inc.in yazl izni olmakszn
yazlm deitiremez, eviremez ya da kopyalarn datamazsnz.
Yazlm ortam olduu gibi esaslarna gre garantisiz olarak datlmaktadr.
Yazarlar, yazlm gelitiricileri, yaync Pearson Education Inc. ve
Medyasoft Yaynlar, yazlm programlarnn kaliteleriyle, doruluklaryla
veya belirli amalar iin kullanlmalaryla ilgili kesin veya dolayl olarak
hibir garanti ya da tavsiyede bulunmamtr.
Bu yzden, yazarlar, yazlm gelitiricileri, yaync Pearson Education Inc. ve
Medyasoft Yaynlar, medya zerinde bulunan yazlmlarn dolayl olarak
veya dorudan sebep olduu ne srlen kayp veya hasarlar nedeniyle size
veya hibir kii veya varla kar sorumluluk kabul etmez.
Bu, hizmetin yarda kesilmesi veri kayplar, zaman kayb, danma ve beklenti
yarar kayb veya bu programlarn kullanmna bal olan zararlar ierir,
fakat bununla snrl deildir. Eer medya kusurluysa, deitirmek zere iade edebilirsiniz.
CD paketinin almas lisans anlamasn kabul ettiiniz anlamna gelir.
Ykleme talimatlar iin, CD iindeki (ngilizce) ReadMe dosyasna baknz.

Dreamweaver8 Kaynagindan Egitim

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver8 Kaynagindan Egitim

Uploaded by

Copyright:

Available Formats

macromedia

Khristine Annwn Page

Brnd btn ekillerle

Kitabn ngilizce Orijinal Basmna Katkda Bulunanlar

Macromedia Press Editr

Kitabn Trke Basmna Katkda

Sayfaya erik Eklemek. . . . . . . . . . . . . . . . . . . . . . . . 39

Stil Sayfalar Gelitirmek. . . . . . . . . . . . . . . . . . . . . . 107

Resimlerle almak . . . . . . . . . . . . . . . . . . . . . . . . . 169

Assets Panelini Kullanarak Resim Eklemek

Tablo Oluturmak. . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Multimedya Bileenlerini Kullanmak. . . . . . . . . . . . 255

viii NDEKLER TABLOSU

Kullanc Etkileimi. . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Katman Oluturmak. . . . . . . . . . . . . . . . . . . . . . . . . . 307

Form Oluturmak. . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

Ktphane elerini Kullanmak. . . . . . . . . . . . . . . . 413

ablonlar Kullanmak. . . . . . . . . . . . . . . . . . . . . . . . . 427

Siteyi Ynetmek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

Eriilebilirlik ve Test. . . . . . . . . . . . . . . . . . . . . . . . . . 497

Kodlar Dzenlemek. . . . . . . . . . . . . . . . . . . . . . . . . . 515

Bul ve Deitir zellii. . . . . . . . . . . . . . . . . . . . . . . 549

Dzenli fadeler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569

Macintosh Ksayollar . . . . . . . . . . . . . . . . . . . . . . . . 571

Windows Ksayollar . . . . . . . . . . . . . . . . . . . . . . . . . 575

xii NDEKLER TABLOSU

Ders 4: Stil Sayfalar Gelitirmek

Kitapta Kullanlan Anlatm Teknikleri ve Kitabn Format

iin kullanlmtr. Numaralandrarak hazrladmz admlar uygularken yazmanz

pucu: pucu szcyle gsterilen ksa blmlerde, sk kullanlan ilemleri

gerekletirmek iin faydalanabileceiniz ksayollar ve sk rastlanan sorunlar zmek

Ekler: Ek blmleri, dzenli ifadelerden PC ve Mac ksayollarna kadar

Dreamweaverla ilgili eitli faydal bilgiler iermektedir.

Macromedia Kaynandan Eitim Dizisi

Macromedia Yetkili Eitim ve Sertifikasyon Sistemi

Training Partner) program kapsamnda yer alan dier eitim seeneklerini de

Sitenin grnmnn tutarl olmasn salamak iin ablonlar oluturacaksnz.

Minimum Sistem Gereksinimleri

600 MHz PowerPC G3 veya daha yeni bir ilemci

Dreamweaver arabirimini tanyacaksnz

alma Alannn Tannmas

aacaksanz, sizden iki alma alanndan birini semeniz istenecektir: Designer ve

Macintosh Kullanclar iin: Yukarda bahsedilen Designer ve Coder alma alan

seenekleri Macintoshta mevcut deildir. Macintosh, ihtiyalarnza gre dzenleyerek

Siteyi Gelitirmek zere Hazrlk Yapmak

Proje Sitesi: Yoga Sanghann Hitap Edecei Kitle

Proje Sitesi: Yoga Sanghann erii

Sitede ziyaretilerle iletiiminiz nasl olacak ve onlara neler anlatacaksnz?

Proje Sitesi: Yoga Sanghann

Web sitenizle ziyaretilerinizin arasndaki balant, ksmen sitenizin yapsna baldr.

3. Aama: GelitirmeSitenin Tasarlanmas

Ayrca, dncelerinizin teknik olarak Web sitesinde de aynen gerekletirileceinden

Web sitesini tasarlama ilemini bitirdikten sonra, ziyaretilerin kullanmna sunmadan

Yerel Bir Site Tanmlamak

DW8_YogaSangha klasr, sitenizin yerel kk klasr olacaktr. Bu klasr, kitapta belirli

Yerel kk klasrlerini saklayabileceiniz konumlarla ilgili tavsiyeler:

3. Dreamweaver, Site Definition iletiim kutusunun Basic sekmesinde What would

u anda veritabanlar ya da dier sunucu teknolojilerini kullanan sayfalar oluturmadnz

Basic grnmnn bu blm Advanced grnmndeki Testing Server

u anda makinenizdeki dosyalarla alacaksnz ve bir uzak sunucuya erimeniz

6. Yine bu blmde Dreamweaver, Where on your computer do you want to store

Choose dmesine tklayn.

Windows kullanclar iin: Sabit diskinizdeki DW8_YogaSangha klasrn bulup sein