Dreamweaver Temelleri

Dreamweaver Temelleri
Dreamweaver (DW) ara yüzü belli başlı parçalardan oluşmakta. Bunlar;
 Insert panel (Ekle paneli)
 Document toolbar (Doküman araç paneli)
 Document window (Doküman penceresi)
 Panel groups (Panel grupları)
 Properties Inspector (özellik yönetgeci)
 Tag selector (etiket seçici)
Dreamweaver 8 çalışma ortamı
DW, bizlere ihtiyaçlarımıza göre değiştirilebilir bir çalışma ortamı sunma özelliğine sahip bir editördür. Örneğin
DW'ı daha çok kod yazmak için kullanacaksanız bu ara yüzü "Coder" çalışma ortamı olarak seçebilir ve
Macromedia'nın eski HTML editörü olan "Home Site" benzeri bir ara yüz elde edebilirsiniz. Onun dışında
kurulum ile standart olarak seçili gelen "Designer" çalışma ortamında ise tasarım ihtiyaçlarını karşılayacak bir
ara yüze kavuşabilirsiniz.
Çalışma ortamını Window / Workplace Layout menüsü altında yer alan seçenekler ile yapılandırabilirsiniz.
Window / Workplace Layout menüsü ile ara yüzü yapılandırabilirsiniz
Çift monitör ile çalışanlar "Dual Screen" seçeneği ile her iki ortamı da aynı anda kullanabilme şansına
sahipler.
Coder ara yüzü ile DW çalışma ortamı
Çalışma ortamı ayarlarını devamlı değiştiren kullanıcılar, Window / Workplace Layout / Save
Current menüsü ile bu ayarları kaydedip daha sonra tekrar kullanmak üzere çağırabilirler. Window /
Workplace Layout / Manage menüsü ile de önceden tanımlı bu ayarları düzenleyebilirler.
Önceden tanımlı bu ayarları düzenleme penceresi
Insert panel
DW‟ın beklide en çok kullanılan ve önem verilmesi gereken ara yüz bileşenidir. Sayfamıza ekleyeceğimiz her
türden içeriği bu panel yardımı ile sayfamıza eklememiz mümkündür. Oldukça iyi kategorize edilmiş bir yapısı
olmakla beraber, isterseniz sizde kendi araç panelinizi oluşturarak kişiselleştirebilirsiniz.
Insert bar ve alt sekmeleri
Kategorileri seçmek için panelin sol kısmında bulunan ve aşağı işaret eden ok düğmesine tıklayarak açılan
menüden bir kategori görebilirsiniz. İsterseniz eski DW sürümlerinde olduğu gibi sekmeler (tab) halinde
görüntülemek için ise “Show as Tabs” seçeneğini kullanabilirsiniz.
Diğer taraftan bir obje birden fazla alt seçeneğe de sahip olabileceğinden yanlarındaki oklara tıklayarak alt
içeriklerini görmeniz de mümkün tabi. Örneğin Insert Image düğmesi altından Rollover
image yada Image map seçeneklerine de ulaşabilmekteyiz.
Insert bar ile sayfanıza resim tablo gibi bir çok bileşen ekleyebilirsiniz
Yeri gelmişken bu panel ile Insert (Ekle) menüsünün içerikleri de aynıdır. Yani birbirleri yerine de
kullanılabilirler. Fakat kullanım ve erişim kolaylığı sağlamak amacı ile bir toolbar haline
getirilen Insert menüsü gerçekten de DW‟ın belkemiğini oluşturuyor desek hata etmiş olmayız sanırım.
Bir diğer değinilmesi gereken nokta ise bu Insert panelin kurduğumuz eklentiler ile genişleyebileceği,
yeni düğmeler hatta yeni kategorilerle zenginleşebileceğidir. Eski DW sürümlerinde bu panelin adı "Object
Panel" olarak geçmektedir. Bundan yola çıkarak kurduğumuz eklentilerin türleri Object ise eklenen
menünün ya da düğmenin Insert menüsü ve Insert panel altında olduğunu tahmin edebilirsiniz.
Insert panelin kişiselleştirilmesi
İhtiyaçlarınız ve istekleriniz çerçevesinde Insert paneli dilediğinizce düzenleyebilir en sık kullandığınız
düğmeleri bir araya toplayabilirsiniz. Kişiselleştirme işlemine başlamak için Insert panelin sol kısmında yer
alana "Common" (ya da hangi sekme seçili ise onun adının yazılı olduğu) düğmesine tıklayarak açılan
menüden "Favorites" sekmesine geçebilirsiniz.
Sekmeler menüsünden Favorites sekmesine geçiyoruz
Şimdi panel üzerinde herhangi bir yere sağ tıklayarak açılan menüden "Customize Favorites" seçeneğini
seçiyoruz ve açılan iletişim penceresi vasıtasıyla Favorites (sık kullanılan) sekmesini kişiselleştirebiliriz.
Panelde herhangi bir yere sağ tıklayıp Customize favorites seçeneğine tıklıyoruz
Sol kısımda yer alan düğmeleri sağ kısımda yer alan Favorites sekmesine taşıma için aradaki ok işaretini
(>>) kullanabilirsiniz. Panelden kaldırmak istediğiniz düğmeler için "Favorite objects" listesinin üstünde yer
alan "Remove selected object in Favorite objects list" düğmesi ile silebilirsiniz. Yukarı aşağı ok işaretleri
ile de düğmelerin konumlarını belirleyebilirsiniz.
Kişiselleştirme iletişim penceresi
Farklı gruptan düğmeleri gruplamak ve grupları birbirinden ayırmak için "Add separator" seçeneğini
kullanabilirsiniz.
Bu şekilde kendime özgü yapılandırdığımız ve sık kullandığımız seçeneklerin bir arada bulunduğu bir panel
elde etmiş olduk. Çalışma zamanımızı oldukça kısaltan bu uygulama ile sizde daha verimli çalışmalar yapabilir,
devamlı paneller arasında geçişler yapmaktan kurtulabilirsiniz.
Properties inspector
Insert toolbar ve/veya menüsü vasıtası ile sayfamıza eklediğimiz her türlü içeriğe yönetmemizi sağlayan bu
panel en az Insert toolbar kadar önemli bir yere sahiptir. Zira HTML Attributes olarak tabir ettiğimiz
objelerin birçok özelliklerine (resimlerin boyutları, metinlerin linkleri, linklerin hedef pencereleri tabloların
sütun satır sayısı vs…) Properties paneli vasıtasıyla hükmetmek mümkündür. Seçtiğimiz objenin türüne göre
bu panel de değişiklik göstermekte ve kendini seçili olan objenin Attribute‟lerine göre yeniden
yapılandırmaktadır.
Properties paneli ile sayfadaki her türlü elemana hükmedebilirsiniz
Yine aynı panel sayesinde seçtiğimiz objelerin CSS stillerini değiştirip onlara stil atamamız dahi mümkün.
Properties panel vs CSS ilişkisi
Panelde boş bir alana çift tıklarsanız panelin küçülüp büyüdüğünü göreceksiniz. Büyük hali daha ayrıntılı
seçenekleri içermekle beraber, küçük hali yer kazanmak isteyenler için oldukça kullanışlı olacaktır.
DW öğrenmenin büyük bir parçası olan Properties inspector‟ün kullanım alanlarını kavramak özellikle yeni
başlayanlar için oldukça önemli bir yere sahip olsa gerek.
Sayfa ayarları
Yeni bir doküman oluşturduktan sonra bu dokümanın arka fon, link ve yazı rengi, kenar boşlukları, sayfa
başlığı ve dil kodlama bilgisi olan "Encoding" ayarlarını yapmak için Modify / Page Properties menüsü ile
ulaşabileceğiniz sayfa ayarları iletişim penceresini kullanabilirsiniz.
Appearance
Modify / Page Properties menüsü ile sayfa ayarları iletişim penceresine ulaşabilirsiniz
"Appearance" sekmesinden arka fon ve renk ayarları ile kenar boşlukları gibi görünüm özelliklerini
yapabilmek mümkün.
Genel ayarlar
Eğer Edit / Preferences menüsü ile ulaştığımız Ayarlar kısmındaki "General" sekmesi altında yer alan "Use
CSS instead of HTML tags" seçeneği işaretli ise "Page Properties" penceresinde yaptığınız görünüm
özelliklerindeki değişiklikler "body" etiketi için bir CSS tanımlaması olarak yapılacaktır. Eğer bu seçenek işaretli
değilse klasik teknik olan "body" etiketine parametre olarak eklenecektir.
HTML etiketleri yerine CSS ile biçimlendirme yapmak
Böylece zahmetsiz ve kolay bir biçimde sayfalarımıza modern CSS standartlarına uygun görünüm
biçimlendirmesi yapabilir ve klasik tekniklerdeki hataları tekrarlamaktan kaçınmış oluruz.
Rollover test linkleri sayfa ayarları ile yapmak oldukça kolay
Yine bu sayede genelde yeni başlayan arkadaşların takıldıkları bir konu olan "Rollover Text Linkler" için
yani üzerine gidince rengi ve alt çizgi özellikleri değişen linkler ile ilgili ayarları da oldukça zahmetsiz bir
biçimde yapmak mümkün olabiliyor. Aynı şekilde sayfa başlık etiketlerini de (H1,H2,...H6) "Heading"
sekmesinden yapılandırabilirsiniz.
Tekrar hatırlatalım bu kısımların aktif olabilmesi için Edit / Preferences menüsünden "General" sekmesi
altında yer alan "Use CSS instead of HTML tags" seçeneğinin işaretli olması gerekiyor.
Title/Encoding
"Title" ile sayfamızın tarayıcı penceresinin üst kısmında görünen başlık metni ve sayfamızın dil kodlama
bilgisi olan "Encoding" ayarlarını yapabilmemiz mümkün. Sayfalarımızda Türkçe karakter kullanabilmek için
listeden "Türkçe (Windows)" seçeneğini seçmiş olmalıyız.
Sayfada Türkçe karakter kullanabilmek için Türkçe (Windows) seçili olmalıdır
Tracing Image
Bu seçenek ile; bir tasarım ile çalışırken yada bir tasarımı kopyalamanız gerektiği durumlarda neyin tam
olarak nerde olduğunu anlayabilmek için "Tracing Image" seçeneğini kullanabilirsiniz. Bu seçenek ile
sayfaya eklediğiniz resmin saydamlığını da ayarlayarak opak bir görünüm verip kendi tasarımınızı bu kılavuz
tasarım resmi üzerine inşa edebilirisiniz. Bu resim Sadece DW ile çalışırken görünüp sayfayı kaydedip tarayıcı
ile baktığınızda görünmeyeceğinden tasarım aşamasında bizlere büyük bir kolaylık sağlayarak tasarım
sürecinin oldukça kısalmasını da sağlayacaktır.
Tracing Image ile tasarım üzerinde çalışmak oldukça kolay
Document toolbar
Panel üzerinde çalıştığımız doküman ile ilgili daha doğrusu doküman penceresi ile ilintili değişiklikleri hızlı bir
biçimde yapmanıza olanak sağlıyor.
Doküman paneli
Show Code View: Kod görünümüne geçmeyi sağlar.
Show Code and Design: Hem tasarım hem de kod görünümünü aynı anda görebilme imkanı tanır.
Show Design: Tasarım görünüme geçmeyi sağlar.
Server Debug: Dinamik sayfalar ile çalışırken tarayıcı ile localhost üzerinden sayfayı kontrol etmektense
Server debug düğmesine tıklayarak gerçek zamanlı veritabanından gelen kayıtların ve kodların çıktılarının
nasıl bir sonuç verdiğini görmenize olanak tanır. Oldukça kullanışlı bir özellik.
DW içerisinde Server Debug ile çalışırken
Document Title: Dokümanımıza başlık atamamızı sağlar. Bu başlık tarayıcının başlık çubuğunda görünen
metni ifade etmektedir.
No Browser/Check Errors: Dokümanımızın tarayıcı uyumluluğunu kontrol etme seçeneklerine
ulaşabilmemizi sağlar.
Validate Markup: Dokümanı ya da seçili tagın kod geçerliliğini kontrol eder
File Management: Dosya yönetim menüsüne erişimi sağlar. Özellikle Remote site tanımlaması yapılmış
sitelerde FTP den dosya düzenleme yetkilerini düzenleyen ve proje üzerinde aynı anda çalışan iki kişinin aynı
anda birbirinden bağımsız dosyaları değiştirmemesini sağlayan Check in / Check out seçeneklerini ve
dosyayı FTP den gönderme seçeneklerini yönetmemizi sağlar.
Burada önemli gördüğüm Design Notes aracı çalıştığımız dokümanların bizim için önemli bazı bilgilerinin DW
tarafından saklanması ve gerektiğinde bize sunulmasını organize eder. Eğer sitenizde aynı dokümanın birkaç
versiyonu varsa çok işinize yaracaktır. Bu notlar sadece tasarımcı tarafından DW içerisinde görünen bilgilerdir
ziyaretçileriniz bu notları göremezler.
Design notes penceresi
Tanımlı siteler ile çalışırken, DW tarafından otomatik olarak site dizini altında oluşturulan "_notes" klasörü bu
"Design notes" bilgilerini içermektedir ve sitenizi yayınlarken bu klasörleri uzak sunucuya göndermenize
gerek yoktur.
Preview/Debug in Browser: Dokümanı tarayıcı ön izlememizi sağlar.
Refresh Design View: tasarım görünümünü yeniden yükleyerek kod görünümünde yaptığınız son
değişikliklerin tasarıma yansımasını sağlar.
View Options: Görünüm özelliklerini yönetmenizi sağlar. Kenarlarda ızgara göster/gizle, satır numaralarını
göster/gizle, kelime kaydır/kaydırma gibi seçenekleri düzenlemenizi sağlar.
Visual Aids: Tasarım görünümünde sayfayı tasarlarken hangi tasarım elemanı yardımcılarını kullanıp
kullanmayacağınız belirtmenizi sağlar. Örneğin DIV, katman ve ya tablolardaki sınır çizgilerini göstermemesini
sağlamak istiyorsanız; “CSS layout outlines” seçeneğini kapatmanız yeterli olacaktır. Buradan size en
uygun çalışma ortamını seçerek işlerinizi daha kolaylaştırabilmeniz de mümkün.
Status bar
Birçok programda olduğu gibi DW‟da da bir durum çubuğu (status bar) bulunmakta. Fakat DW‟ın durum
çubuğu oldukça enteresan işlevlere de sahip.
Durum çubuğu
Document size and estimated download time: üzerinde çalıştığımız dokümanın dosya boyutu ve
tahmini yüklenme süresi
Window size pop-up menu: Kullanılabilir içerik alanına göre doküman penceresini boyutlandıran ve
tasarımımızın tahmini olarak nasıl göründüğünü gösteren oldukça faydalı bir özellik.
Çözünürlüğe göre yeniden boyutlandırma menüsü
Bu seçeneklerin aktif olması için Window / Cascade menüsü ile pencereleri sıralatmak gerekmektedir.
Set magnification: Doküman penceresindeki içerik alanını büyütme daha doğrusu yakınlaştırma oranı. Aynı
şekilde Zoom tool da aynı görevi görmektedir.
Hand tool: Sayfadaki içeriği seçim yapmaksızın sadece sağa sola yukarı aşağı çekiştirme gibi işlemleri
yapmanıza olanak sağlar.
Select tool: Hand tool‟un aksine tıklanan objeyi seçmeye yarayan araçtır. DW‟da varsayılan olarak seçili
gelir.
Diğer bileşenler
Panel Groups
Panel grupları hakkında ayrıntılı yazıyı sitemizde bulabilirsiniz. O yüzden burada söz etmeyeceğim.
Tag selector
Dreamweaver içerisinde seçtiğiniz bir HTML elemanını DOM (Document Object Model) mantığına dayalı
olarak hangi etiketin hangi ana bileşene bağlı olduğunu basamaklı olarak gösteren bir yapıya sahiptir. Bu araç
sayesinde tasarım görünümünde doğrudan seçemediğiniz taglara (etiket demek ne kadar doğru bilmiyorum
ama) hükmetmemizi sağlıyor.
Etiket seçme aracı
Document window
Burası adından da anlaşılacağı üzere doküman penceresi yani çalışma alanızı ifade etmekte. Document
toolbar‟dan Code, Split ve Design düğmeleri ile çalışma alanımızı kod görünüm yada tasarım görünümü
arasında değiştirmek de mümkün. Ben genelde Split i kullanırım. Tasarımla uğraşırken zaman zaman koda
müdahale etmek de gerekebiliyor.
Doküman penceresi
Dreamweaver Panel Grupları
Bu paneller Dreamweaver‟ın (DW) temel ara yüz bileşenlerini oluşturmakla beraber hepsinin kullanımı
birbirine oldukça benzemektedir. Bu nedenle bunların çalışma ve işleyiş prensiplerini kavradığınız takdirde
DW‟ı kullanmak çocuk oyuncağından farksız olmakta. Artık bir standart halini alan bu paneller sürümden
sürüme farklılık gösterse dahi temelde aynı mantığı korumaya devam etmektedir.
Örneğin aynı panel bir önceki sürümde farklı bir panel grubuna dahil iken bir sonraki sürümde sadece yeri
değişmiş fakat işlevinde herhangi bir değişme olmamıştır.
Makaleyi okurken olurda sizdeki Dreamweaver sürümünde böyle bir panel göremezseniz endişelenmeyin.
Makale Dreamweaver 8 baz alınarak kaleme alınmıştır.
Panellerin sağ üst köşelerindeki simgelere tıkladığımızda açılan Panel menülerinden ilgili panele ait tüm
işlemleri yapabilmemiz mümkün. Örneğin CSS Styles paneli menüsünden Yeni bir stil yaratabilir ya da var
olanları yönetebiliriz. Yine aynı Panel menüleri sayesinde “Group CSS styles with…” seçeneği ile bu panelin
başka bir panel gurubu altında yer almasını sağlayabiliriz. Aynı şekilde panelleri sol üst köşelerinden tutup
istediğiniz bir yere sürükleyerek çalışma ortamınızı kendinize göre düzenlemeniz de mümkün.
CSS styles paneli
Uzatmadan panel gruplarını incelemeye başlayabiliriz. Bu gruplar CSS Styles, Application, Files, Tag
inspector, Layers, Results, History ve Frames dir. Daha yakından incelemek gerekirse;
CSS styles
Bu panelimiz adından da anlaşılacağı üzere CSS stillerimizi yönetmemize yarıyor. Eski sürümlere göre DW
8 de biraz daha kapsamlı ve kullanışlı hale getirilmiş olan bu panel işlerimizi tahmin ettiğiniz gibi oldukça
kolaylaştırmakta.
CSS styles paneli liste görünümü
Panelde önceden tanımladığımız stillerin isimleri listelenmekte ve biz de bu listeden ilgili stile tıklayarak
panelin alt kısmında bulunan “Properties for …” başlıklı kısımdan stilimizin özelliklerine doğrudan müdahale
edebiliyoruz.
Aynı panel içerisinde yer alan “Current” sekmesi ile sayfada herhangi bir alana tıkladığımızda o alanı
etkileyen CSS özelliklerini görüntülemeye yarıyor. Örneğin Current sekmesine geçip bir başlığa ya da stiller ile
biçimlendirilmiş bir metne tıkladığınız anda bu alanda stil özellikleri listelenmekte ve bize bu elemanın hangi
stillerden etkilendiği konusunda fikir vermektedir.
CSS styles paneli current sekmesi görünümü
Bu panelin daha ayrıntılı özellikleri CSS stiller ve biçimlendirme kapsamında ileride ele alınacağından şimdilik
bu kadarla geçiyoruz.
Files
Bu panel standart olarak 3 sekmeden daha doğrusu 3 ayrı panelden meydana gelmektedir. Eğer siz sonradan
bir panel grup değişikliği yapmadıysanız bunlar:
 Files
 Assets
 Snippets
Her biri değişik işlevlere sahip bu panelleri incelemek istersek:
Files
Eğer tanımlı sitelerle çalışıyorsak yani Dreamweaver içerisinde bir site tanımlaması yaptıysak ve
çalışmalarımızı bu site üzerinden yürütüyorsak bu panelde otomatikman içerisinde çalışılan sitenin dosyaları
görünecektir. Yine aynı şekilde Windows Gezgini mantığı ile ağaç yapısında klasörleri gezebilir değiştirmeke
istediğiniz dosyalara ulaşmak için bu paneli kullanabilirsiniz.
Files panel grubunda Files paneli ile site dosyalarınızı yönetebilirsiniz
Örneğin sayfanıza bir resim eklemek için bu Files panelinden resimlerin bulunduğu dizine girip resim
dosyasını sürükleyip sayfa içerisine bıraktığınızda resim doğrudan sayfanın içerisine eklenecektir.
Files panelinden resimleri sürükle bırak yöntemiyle sayfanıza ekleyebilirsiiz
Panelin sağ üst köşesindeki işarete tıklayarak açılan menüden panele ait bazı özel işlemleri
gerçekleştirebilmemiz de mümkün. Bu özellik her panel grubu için geçerli olduğundan ileride bunu tekrarlama
ihtiyacı duymayacağım.
Files paneli menüsü
Assets
Assets kelime anlamı itibariyle mal varlığı manasına geliyor. Aslında DW yapımcıları bu panelin ne işe
yaradığını çok güzel anlatan bir isim seçmiş. Tanımlı bir sitede çalışırken o site içerisinde kullandığınız her
türlü resim, CSS tanımlarken kullandığınız renkler, linkler, flash dosyaları ve şablon kütüphanesi objeleri
(Library) dosyaları gibi site içeriğinin oluşturulmasında görev alan tüm elemanları bu panel üzerinden tek bir
liste halinde görmek mümkün.
Assets paneli
Eğer listenin eksik olduğunu düşünüyorsanız son yaptığınız değişikliklerin listeye yansımasını sağlamak için
yine sağ üst köşeden açılan menüden Recreate site listseçeneğinden listeyi baştan oluşturabilirsiniz.
Assets paneli menüsü
Panel aynı zamanda Favorites görevi de görmekte. Yani sıkça kullandığımız materyallere kolayca erişmemizi
sağlayan bir listeyi de tutuyor. Böylece materyallere erişmek gerçekten de kolaylaşıyor.
Snippets
Bu panel daha çok hazır kod parçalarını barındıran bir kod kütüphanesi gibi düşünülebilir. DW ile standart
olarak birçok hazır script ve örnek kod bulunmakta: Öte yandan kendi yazdığınız kodlarla veya fonksiyonlar
sayesinde de kendi kütüphanelerinizi oluşturmak mümkün. Böylece özellikle kod yazan arkadaşlar her
an elinin altında kod kütüphanelerini kullanabilmekte
Snippets paneli
Yine sürükle bırak mantığı ile çalışan bu panel özelleştirilebilmesi açısından oldukça işe yarayacak gibi
görünüyor.
Application
Sunucu modelleri ile çalışarak dinamik içerikli sayfalar yapıyorsanız Application paneline çokça ihtiyacınız
olacak demektir. Panel grubu;
 Database
 Binding
 Server behaviors
 Compoments
Database
Yaptığımız projede kullandığımız veritabanı bağlantılarını bu panelde görebiliriz.
Applications paneli altında Database (veritabanı) sekmesi
Bindings
Bu panel altında Recordset olarak tabir ettiğimiz DW içerisinde veritabanına bağlanarak SQL sorgularının
sonuçlarını aldığımız kayıt dizelerini oluşturabilir ve bu sorgu sonucunda dönen veritabanı alanlarının listesini
görebiliriz. Recordset kavramı ve sayfaya veri yazdırma işlemleri ilerideki konularda ayrıntılı olarak ele
alınacağından şimdilik bu kadarla geçiyoruz.
Applications paneli altında Bindings (bağlantılar) sekmesi
Server Behaviors
Behavior kavramına daha önce de deyinmiştik. Server behavior‟lar ise onların dinamik sayfalardaki
eşdeğerleri olarak karşımıza çıkıyor aslında. Yani sayfaya eklenen dinamik içerikle ilgili her türlü bilgi bu
panelde listelenmekte. Aynı şekilde kayıt sayısı veya sayfa bilgisi, kullanıcı giriş çıkış işlemleri gibi bir çok
dinamik opsiyonu da bu panel üzerinden yönetebilmek de olası
Applications paneli altında Server Behaviors sekmesi
Kurduğumuz eklentilere (extension) göre bu listenin içeriği genişleyebilir. Kurduğunuz eklenti eğer server
behaviors ile ilgili bir eklenti ise öncelikle burada aramak daha mantıklı olacaktır.
Applications paneli altında Server Behaviors sekmesi menüsü
Components
Emin olmamakla beraber sanırım sadece ASP.NET sayfalarında bir anlam kazanan ve eklentiler ile birlikte
gelen componentlerin yönetildiği panel oluyor kendileri. ASP.NET ile herhangi bir DW projesi
geliştirmediğimden bu panel hakkında pek de geniş bilgi veremeyeceğim. Bir şeyler eklemek isteyen
arkadaşlar bana konu ile ilgili e-mail göndererek katkıda bulunabilirler.
Tag inspector
Panel Attributes ve Behaviors adlı iki panelden oluşmakta.
Attributes
Attribute kelime anlamı olarak özellik, bağlaç manasına gelmekte. Programlama ile ilgilenenlerin pek de
yabancı olmadığı bir kavram aslında. Örneğin sayfamıza resim eklemek için gerekli kod aşağıdaki gibidir.
1. <img src="images/resim2.jpg" width="250" height="375" style="float: right;" />
2.
Buradaki width, height, style ve src birer attribute‟ü temsil etmekte. Bunların sayısı HTML öğelerinin
türlerine göre değişmekle beraber sonradan sayfa düzeni sırasında bir attribute eklemek de olası. Fakat
tasarım yaparken bir attribute eklemek için kod görünümüne geçmek ve kodun içerisinden ilgili satırı bulup
değişikliği yapmak gerekmektedir. Buda zaman zaman can sıkıcı bir hal almakta idi. Fakat DW ile bu işlem
oldukça kolay. Sayfada herhangi bir eleman seçin (resim, link, paragraf vs.) ve Attribute paneline dikkat edin.
Seçtiğiniz elemana göre bize çeşitli seçenekler sunmaktadır. Örneğin buradan bir resmi sağa hizalamak için
gerekli STYLEkodunu girmek gerçektende oldukça kolay.
Attributes paneli kategori görünümü
İsterseniz attribute‟leri kategorilere göre isterseniz de bir liste halinde görmek mümkün
Attributes paneli
Behaviors
Aslında eski DW kullanıcılarının ilk sürümlerden bu yana pek de yabancı olmadıkları bir panel bu.
Muhteviyatını ise hazır JavaScript Events (olayları) oluşturmakta.
Behaviors paneli menüsü
Burada “Event” olarak tabir edilen olay kavramını açıklamak gerekiyor sanırım. HTML standartlarına göre
objenin türünden türüne değişmekle beraber belli başlı standart olaylar bulunmaktadır. Bunlar çağrılan
JavaScript kod bloğunun çalıştırılmaya başlayacağı veya daha farklı bir deyimle tetikleneceği anı belirtir.
Örneğin bir linke tıkladığımızda Pop-up pencere açtırmak istersen öncelikle bir metne link olarak # veriyoruz.
Bu boş bir linktir. Yani hiçbir işlevi yoktur. Daha sonra bu link seçili ikenBehaviors panelden + işaretine
tıklayarak açılan menüden Open Browser Window seçeneğini seçtiğimiz takdirde karşımıza pop-up pencere
ile ilgili ayarlar çıkacaktır. Bu ayarları yapıp OK dediğimizde ise Behaviors panelde “onClick Open Browser
Window” şeklinde bir ifade göreceğiz. onClick in üzerine tıkladığımızda bu html elemanı için geçerli
event‟ların listesi açılacaktır.
Behaviors paneli event (olay) listesi
Sayfada elemanları seçtikçe önceden bu elemanlar için tanımlı behavior‟ların listesi bu panel içerisinde
Event‟ları ile birlikte görünecektir. Listenin en altında yer alanShow Events for menüsünden bu olay
listesinin hangi tarayıcı uyumluluğu baz alınarak listeleneceğini seçebiliriz.
Behaviors paneli Show events for ile tarayıcı uyumluluğunu ayarlayabilirsiniz
Results
Bu panel adından da anlaşılacağı üzere sonuçları bünyesinde barındırıyor. Bu sonuçlar sayfada Search And
Replace ile değiştirdiğimiz kelimelerin sonuçlarından sayfayı tarayıcı uyumluluğuna dair kontrol ettirdiğimiz
rapor sonuçlarına kadar birçok şeyi kapsamaktadır. Göze hoş görünmesi açısından ben Timeline panelini de
buraya taşıdım oldukça güzel göründü sizlere de tavsiye ederim. İçerdiği paneller;
 Search
 Reference
 Validation
 Target Browser Check
 Link Checker
 Site Reports
 FTP logs
 Server Debug
Search
Tahmin edebileceğiniz gibi sayfada yaptığımız bul değiştir olaylarının sonuçlarını görmemize yarayan bir
panel. Üzerinde söylecek pek bir şey yok.
Search paneli sonuçları
Edit / Search and Replace seçeneğinde Find in olarak belirtilen menüden “Entire current local site”
seçeneği ile tüm site içinde bul-değiştir işlemini yapabilir ve bu result paneli sayesinde hangi dokümanın
hangi satırında ilgili değişikliğin yapıldığını görebilirsiniz.
Reference
DW içerisinde gelen e-book‟lar olarak tabir edebiliriz bunları. Macromedia‟nın kendi
ve OREILLY yayınlarından oluşan oldukça güzel bir kaynak kitaplığı oluşturulmuş. Kod yazarken sıkıştığınız
zamanlarda hayat kurtarıcı olabiliyor.
Reference paneli
Validator
Sayfamızdaki HTML ve ColdFusion başta olmak üzere belli başlı dillerin yazım ve kullanım standartlarına
uygun olup olmadığını kontrol eden ve w3c standartlarına göre kontrol yapan bir araç ve bu aracın kontrol
sonuçlarını gösteren ekrandan oluşan bu panel özellikle profesyonel olarak bu işle ilgilenenlerin dikkatini
çekecektir.
Validator paneli
Setting seçeneği ile bu geçerlilik kontrolünün hangi standartlara göre yapılacağını da belirlemeniz mümkün.
Validatör ayarları
Taget Browser Check
Yine Validator benzeri bir işlevi olan fakat bu sefer sayfamızın tarayıcılara uygun olup olmadığını tarayıcıların
destek standartlarına göre kontrol eden oldukça faydalı bir araç
Taget Browser Check
Settings den hangi tarayıcılara göre kontrol yapılacağını seçmeniz de mümkün
Taget Browser Check ayarları
Link Checker
Sayfanızda ya da sitedeki tüm dosyalardaki linkleri geçerli olup olmadıklarını kontrol eden ve bunu bir rapor
halinde görmenizi sağlayan oldukça faydalı bir panel. Yeşil düğmeye tıkladığınızda açılan menüden “Check
links for entire current local site” ile tüm sitedeki linkleri kontrol ettirmeniz mümkün.
Link Checker
Site reports
Site raporları aslında tüm bu bahsi geçen araçların bir kombinasyonu gibi düşünülebilir. Kapsam olarak bir
veya birkaç dokümanı (sitedeki tüm dokümanları da olabilir) hatalara ve geçersiz HTML kodlarına karşı kontrol
edip bunları bize bir rapor olarak sunmaktadır. Yeşil düğmeye tıkladığımız anda açılan iletişim penceresinden
raporlarımız ile ilgili ayarları yapmak mümkün. Hangi özellikler için kontrol yapılacağını bu pencereden
seçebileceğimiz gibi alt kısımda bulunan “Report setting” ile ilgili seçeneğe dair ayrıntılı düzenlemeleri
yapmak da mümkün
Site reports
Örneğin önce Accessibility‟i seçip sonra Report settings‟e tıklarsak açılan
pencereden Accessibility (erişilebilirlik) ile ilgili ayrıntılı düzenlemeler yapabiliriz.
Site reports ayarları
FTP log
Site tanımlamasını Remote server yani uzaktaki sunucu ayarlarını FTP ye göre yaparsanız DW işlemler
bittikten sonra dosyaları FTP ile sunucuya otomatik olarak gönderecektir. İşte bu transfer işlemleri sırasında
meydana gelen FTP talep ve sunucudan gelen yanıtları bu FTP log panelinden takip edebilirsiniz.
Server Debug
Eğer ColdFusion MX 6.1 ve sonrası bir sürümü ile Windows ortamında projeler geliştiriyorsanız dinamik içerikli
sayfalarla çalışırken bu panelden ColdFusion debugger ile sayfadaki hataları görebilir ve düzeltebilirsiniz.
Layers
Panelin standart içeriği Timeline ve Layers panellerinden oluşmakta fakat ben çalışma ortamını düzenlerken
daha kullanışlı olacağını düşündüğümden Timeline panelini Results panel grubu altına taşımıştım. Anlatımda
kafanız karışmaması için dile getirmek istedim :)
Timeline
Taman çizgisi olarak çevirmek ne kadar doğru bilmiyorum fakat yaptığı iş tam olarak bu. Sayfamızda
Behaviors panel kaynaklaı JavaScript lerle (Özellikle de Change Property behavior ı ile) bir akış sağladığınızda
Timeline ile kaçıncı saniyede nasıl bir olay tetikleneceğini seçebilir ve görsel olarak ayarlayabilirsiniz. Flash
veya video düzenleme programlarının yabancı olmadığı bir kavram olan timeline ile ilgili yazılarımızı ileride
daha detaylı olarak ele alacağız.
Timeline paneli
Layers
Sayfamızdaki tüm DIV ve katmanları tek bir ara yüz içerisinde görerek yönetmemizi sağlayan oldukça
kullanışlı bir panel. Özellikle Absolute pozisyonlu katmanları veTimeline uygulamaları ile uğraşanların
oldukça çok işine yarayacak bir panel olsa gerek.
Layers (katmanlar) paneli
Bu panel ile katmanların Z-index değerlerini kolayca değiştirerek hangi katmanın üstte hangisinin altta
görüntüleneceğini belirleyebilirsiniz. Yeri gelmişken Z-index‟i büyük olan katman üstte görüntülenecektir.
Frames
Frame içeren sayfalar ile çalışırken Frame ve özellikle Frameset (tüm frameleri içeren ana pencere)
üzerinde daha kolay değişiklik ve düzenleme yapmanızı sağlayan bir paneldir. Frameleri seçtikten
sonra Properties panelinden ilgili frame‟e ait değişiklikleri yapabilirsiniz.
Frames paneli
History
DW ile çalışırken sayfa içerisinde yaptığımız her hamle her değişiklik olay geçmişine kaydedilmekte ve
yaptığımız hataları CTRL+Z ile geriye alabilmekteyiz. Diyelim bir doküman üzerinde çalışırken yaptığınız bir
hatayı biraz geç fark ettiniz. İşte History panel ile yaptığınız her türlü değişikliği basamak basamak görmeniz
ve önceki bir basamağa atlamak oldukça kolay.
History paneli
Dreamweawer İnce Ayar
Dreamweaver açtıktan sonra Edit / Preferences... menüsü ile ayarlar kısmını açıyoruz. Bu pencere ile
DW'ımıza her türlü ayarı yapabilir ve onu en iyi şekilde yönetebiliriz. Burada görüldüğü üzere kolaylık
sağlamak amacı ile özellikler belli guruplara ayrılmış. Şimdi bunları ayrıntılı bir biçimde incelemeye
başlayabiliriz.
Genel ayarlar
General
General kısmı altındaki ayarlar
Genel ayarlar
 Show Start Page: Açılışta DW‟ın karşılama ekranı göstermesini sağlar. Bu pencere ile son açtığınız
dokümanlara daha kolay erişebilme yeni doküman oluşturma gibi seçenekleri daha rahat yapabilme
imkânı bulabilirsiniz.
 Reopen Documents on Startup: Açılışta DW‟ın son açık dokümanı geri yüklemesini sağlar, eğer
seçili değilse boş sayfa veya karşılama ekranı ile başlanır.
 Warn When Opening Read-Only Files: Salt okunur dosyalar ya da yazılamayacak bir medya
üzerinden (CD, DVD uzaktaki bir sunucu vs.) okunan dosyaları açtığımızda DW‟ın uyarı mesajı
vermesini sağlar.
 Update Links When Moving Files: Sayfları site içerisinde başka bir konuma kaydettiğinizde ya da
taşıdığınızda DW sizin için sayfa içerisindeki linkleri yeni konuma göre düzenler. Bu işlem sırasında
nasıl davranması gerektiğini bu seçenek ile belirtebiliriz. Değiştirmek için sormasını
istiyorsak Prompt, sormadan değiştirmesi için Allways, bu özelliği kapatmak için Never.
 Show Dialog When Inserting Objects: Sayfaya bir obje eklerken DW‟ın bir iletişim penceresi ile
eklenen objenin ilgili parametrelerini girmemizi sağlar. Örneğin tablo eklerken satır sütun sayısı,
resim eklerken Alt metin, DIV eklerken id ve stil isimleri vs.
 Enable Double-Byte Inline Input: Bir geliştirme ortamı kullanıyorsanız ya da double-byte olarak
tabir edilen (Japonca gibi) metinlerle çalışıyorsanız bu seçeneğin açık olması gerekiyor. Aksi takdirde
doküman içerisinde kullanan metindeki karakterler düzgün görünmeyecektir.
 Switch to Plain Paragraph After Heading: Bu seçenek yazmaya başladığınız h1, h3... başlıklarının
sonunda Entera bastığınızda başlığı sonlandırıp yeni bir paragraf oluşturmasını sağlıyor. Bu in-aktif
hale getirirseniz başlıktan sonra Enter‟a bastığınızda başlık sona ermez ve yeni paragrafı da başlık
olarak yazmaya devam edersiniz.
 Allow Multiple Consecutive Spaces: Word'de yazı yazarken boşluk bırakır gibi HTML içindede arka
arkaya ekstra boşluklar.
 Use <strong> and <em> in place of <b> and <i>: Yeni web standartlarına uygun olarak kalın
yazmak için <b> yerine <strong>, eğik yazmak için ise<i> yerine <em> kullanılmasını sağlar.
 Use CSS Instead of HTML Tags: Bu özellik DW ile standart olarak açık geliyor fakat ben çok da
faydalı bir özellik olduğunu düşünmüyorum. Özellikle yeni başlayan arkadaşlar için kolaylık sağlasa
da sayfadaki herhangi bir metnin rengini değiştirdiğinizde ya da kalın, eğik veya altı çizgili
yaptığınızda otomatik olarak yeni bir stil yarayarak (style1, style2, style3 …) bu stili ilgili metne
uyguluyor. Fakat bir süre sonra iş çığırından çıkıyor ve hemen her şey için ayrı bir stil yaratmak
zorunda kalıyor. Buda işleri karmaşıklaştırabiliyor. Kendi stilini kendi yazan birisi olarak bu özelliği
kapatıyorum ama dediğim gibi yeni başlayan arkadaşlar işin mantığını kavrayana kadar bu seçeneği
kullanmaya devam edebilirler.
 Warn when placing editable regions within <p> or <h1><h6> tags: DW şablonlarını
(template) kullanırken, “Editable region” olarak tabir edilen şablon içerisindeki değiştirilebilir
alanların bir paragraf ya da başlık (h1, h6 gibi) içerisinde yer alması durumunda DW, bir uyarı
mesajı ile kullanıcıların başka paragraf yaratamayacaklarını tek paragraflık bir metin eklenebileceği
konusunda kullanıcıyı uyarmasını sağlar.
 Maximum Number of History Steps: Geriye dönük maksimum işlem basamağı sayısı. (History
panel den görünen işlem listesi de diyebiliriz)
 Spelling Dictionary: DW‟ın Word‟deki gibi dilbilgisi kontrolü yapmasını sağlayan dil kütüphanesi.
Henüz Türkçe için aktif değil.
Accessibility
Accessibility (erişilebilirlik) kısmı altındaki ayarlar şu şekilde sıralanmakta;
Erişilebilirlik ayarları
 Show Attributes When Inserting: Oldukça faydalı olacağını düşündüğüm bir özellik. Sayfaya
eklediğiniz öğeye ait erişilebilirlik ayarlarını daha eklerken bir diyalog kutusu ile yapmanızı
sağlayabilirsiniz. Özellikle form elemanları ve resimler için işaretlemenizi öneririm. FrontPage
kullanıcıları bu özelliği sanırım çok sevecekler.
 Keep focus in the panel when opening: Yeni bir iletişim penceresi veya panel açıldığında focus
yani kürsor odaklamasının bu açılan pencerede kalmasını istiyorsanız bu seçeneği seçmelisiniz. Bu
seçenek özellikle görme engellilerin kullandığı ekran okuyucu ya da OCR programları için faydalı
olacaktır.
 Offscreen rendering: Aynı şekilde ekran okuyucu yada OCR programlar ile sorun yaşıyorsanız bu
seçeneği kapamalısınız.
Bu seçenekleri ancak DW'ı yeniden başlattıktan sonra kullanmaya başlayabilirsiniz.
Erişilebilirlik hakkında daha fazla bilgi almak ve ne olup olmadığını görmek için buraya tıklayabilirsiniz.
Code Coloring
Code Coloring kısmı altındaki ayarlar
Kod renklendirme ayarları
DW, web tasarım teknolojisinde kullanılan hemen hemen bütün programlama dillerini okuyup tanıyabilen bir
yapıya sahip demiştik. Yani kodun türünü belirleyip farklı vurgu renklendirmeleri yapabiliyor. Fakat siz bunları
daha sonradan kendinize göre değiştirmek isteyebilirsiniz.
Bunun için Edit / Preferences / Code Coloring kısmından "Edit Coloring Schene" bölümüne
geçmelisiniz. Buradan istediğiniz kod gurubunu istediğiniz gibi renklendirebilirsiniz.
Kod renklendirme ayarları
Code Format
Code Format kısmı altındaki ayarlar
Kod biçimlendirme ayarları
 Indent :
o With: burada kodlarla çalışırken koda girinti vermek için Tab ya da boşluk kullanmayı
seçebilirsiniz. Tab Size ise bu girintilerin ne kadar olacağı konusunda ayarları yapabilirsiniz.
With önündeki seçeneğini kaldırıp indentleri kaldırırsanız dokümanınızın daha az yer kaplamasını
sağlayabilirsiniz. Fakat buda dokun biraz zor anlaşılır bir hal almasını sağlar. Öte yandan DW MX'deki bir
bugdan dolayı sizin kodlarda girinti olmasını istemediğiniz durumlarda dahi girinti yapmasının önüne geçmek
için sitemizde yayınlananNo Indent Fix (DWMX 6.1) isimli yamayı kurmanız gerekiyor.
 Automotaic Wrapping :
o After Column: Kodlarda belli bir karakter sayısından sonra otomatik olarak bir alt satıra
geçmeyi sağlar. Örneğin çok uzun bir paragraf varsa, buraya 75 yazdıysanız, bu uzun
paragraf 75 erli satırlara bölünecektir. Böylece kod düzenleme işlemi çok daha pratik bir hal
alacak ve kodlar daha anlaşılır olacaktır. Fakat doküman boyutları biraz büyük olacaktır. Bu
işlem sadece kod görünümü etkilediğinden ziyaretçilerinizin sayfa görüntülemesinde
herhangi bir değişiklik olmayacaktır.
 Line Break Type: Kodlarda wrapping işleminde yani bir alt satıra geçilmek istendiğinde hangi
standardın kullanılacağını belirtir.
o CRLF Windows : “nr”
o CR Macintosh : “n”
o Unix LF : “r” ile bir alt satıra geçecektir.
 Default Tag Case: Varsayılan tag yazma karakter türünü belirtir.
o “<UPPERCASE>” : tagları tamamen büyük harflerle yazar (<TABLE><TR>… gibi),
o “<lovercase>” : ise küçük yazacaktır.
Yeni XML standartlarına göre tamamen BÜYÜK harfli yazılmış kodlar tarayıcı uyumlulukları ve destekleri
açısından sorun teşkil ettiğinden w3c HTML ve XHTML kodlarında tamamen küçük harf kullanımını tavsiye
etmekte ve geçerli saymaktadır.
 Default Attiribute Case: Bu ise attribute (argüman) içeren tagların nasıl formatlanacağını beliritir.
o <ATTIRIBUTE=”value”> ile argüman büyük harflerle yazılacaktır. (<font SIZE="”1”>"
gibi).
o <lovercase="”value”> ise küçük yazdıracaktır. (<font size="”1”>" gibi)
 Overwrite Case Of: Tag ve argümanların kod formatlama sırasında değiştirilebileceğini gösteriri. Yani
DW‟da açtığınız dokümanda "<font size="”1”>" şeklinde bir ifade varsa bunlar Dreamweaver
tarafından otomatik olarak "<FONT SIZE="”1”>" olarak değiştirilebilir.
 No Break After TD: Tablo kodlarında Sütün kodlarından sonra wrap yapılmayacağını belirtir. Kod
şöyle görünecektir:
1. <TR>
2. <TD>sütun içeriği</TD>
3. </TR>
4.
 Centering: Bir objeyi hizalarken ortaladığınızda DW‟ın bu işlem için <DIV
ALIGN="”CENTER”> yada <CENTER> taglarından hangisini kullanacağını belirtir. <CENTER>
tagı yeni w3c standartlarına göre kullanımdan kaldırılmıştır.
Code Hints
Code Hints kısmındaki ayarlar.
Code hints ayarları
 Close tags: DW‟ın otomatik tag kapatma fonksiyonunun hangi durumlarda devreye gireceğini belirtir.
Örneğin siz <strong>vs vs vs </ yazdığınız anda DW sizin için </strong> u ekler. Böylece
kapatılmamış taglardan kurtulmuş olursunuz.
 Enable Code Hints: Otomatik kod tamamlama fonksiyonu olan Code Hints i devreye sokar. Siz
<FONT yazdığınızda otomatik olarak bir drop down menü açılır ve bu tag ile ilgili tüm argümanlar
listelenir, sizde zamandan kazanırsınız.
 Delay: Code Hints in kaç saniye gecikmeyle açılacağını belirtir. Bunu biraz yavaşlatırsanız iyi olur. Zira
zaman zaman siz bir argüman istemeseniz dahi hemen açılması işleri karıştırabilir.
 Menus: Code hints içinde listelenmesini istediğiniz argüman tiplerini belirtir.
Dreamweaver ile çalışırken Code hints'ler
Bunları “Tag Library Editor” ile kendinizde düzenleyebilirsiniz.
Etiket kütüphanesi ayarları
Code Rewriting
Code Rewriting kısmındaki ayarlar.
Tekrar kod yazma ayarları
 "Rewrite code" : Başka bir doküman tarafından derlenmiş HTML kodlarını sizin "Code Fromat"
kısmında belirlediğiniz kriterlere göre tekrardan biçimlendirmesini sağlayan ve bu biçimlendirme
sırasında da neleri yapıp neleri yapmaması gerektiğini buradan ayarlıyoruz.
o Fix Invalidly Nested and Unclosed Tags: Hatalı ve sonlandırılmamış tagları onar olarak
yorumlayabiliriz bu seçeneği. Örn. <b><i>text</b></i> ibaresi, <b><i>text</i></b>
olarak düzeltilecektir.
o Rename Form Items When Pasting: Form öğelerini kopyala yapıştır esnasında
tekrardan isimlendirir. Eğer dokumanda “isim” diye bir text input varsa kopyalanan yeni
input “isim2” olarak yeniden adlandırılır.
o Remove Extra Closing Tags: Fazladan eklenmiş ve bir işlevi olmayan kapalı tagları siler
Örn. <P></P> ler gibi.
o Warn When Fixing or Removing Tags: DW'ın bu düzeltme işlemlerini yaparken bizi
uyarmasını sağlar.
 "Never Rewrite Code: In Files with Extensions" : bu uzantıya sahip dosyaların kodlarını asla
onarma anlamına gelir. Eğer ASP ve ya PHP veya başka bir programlama dili ile çalışıyorsanız ve
include dosyalarında yarım kalmış gibi görünen taglarınız varsa buraya ASP yi eklemelisiniz (zaten
mevcut)
 Special characters: <, >, & ve „ karakterlerini adres satırları ve doküman için encode edilmesini
sağlar. W3C standartlarına göre adres satırında kullanılan tüm özel karakterler ampersantlar ile
encode edilmelidir. Örneğin sorgu.asp?tablo=uyeler&amp;user=Ahmet şeklinde kullanım
doğru kabul edilmektedir. Eğer bu seçeneği işaretlersen DW bizim için tüm bu kodlama işlemini
otomatik olarak yapacaktır.
 URL encoding: Aynı şekilde adres satırında kullanılan özel karakterleri DW bizim için encode
edecektir. Fakat bu işlemi tarayıcılar zaten istem ve cevap işlemleri sırasında otomatik yaptığından
bizim encdoe etmemiz gereksiz olabilir. İhtiyacınıza ve sunucu ayarlarınıza göre bu seçenekleri
tekrar gözden geçirebilirsiniz.
Copy/Paste
Copy/Paste kısmındaki ayarlar.
Kopyala-yapıştır ayarları
 Bu kısımda diğer uygulamalardan kopyalayıp sayfamıza yapıştırdığımız metinler için DW‟ın nasıl
davranması gerektiğini belirtiyoruz.
o Text only: sadece metni alır biçimlendirme ve vurguları temizler, paragraflar liste ve
tabloları tanımaz, yeni satır yapar.
o Text with structure: Yapı ile birlikte metni alır. Paragraflar listeler ve tabloları korur.
o Text with structure plus basic formating: Yapıyı korur ayrıca temel biçimlendirme
özellikleri olan kalın italik yazı gibi vurguları korur.
o Text with structure plus full formating: Yapıyı korur ayrıca zengin biçimlendirme
seçenekleri ile birlikte metni alır. Stiller ve renkler korunur. Bu seçenek Word‟den
kopyalanan metinler için sorun yaratabilir ve ekstradan gereksiz kodlara neden olabilir.
 Retain line breaks: Yeni satırları (<br />) korur ve aynen aktarır.
 Clean up Word paragraph spacing: Word den kopyalama sırasında oluşan paragraflar arası boşluğa
sebep olan stilleri siler.
CSS styles
CSS styles kısmındaki ayarlar:
CSS stil ayarları
 When Creating CSS Rules
o Use Shorthand For: DW‟ın yeni stil yaratırken hangi CSS parametreleri için hıızlı yazma
özelliğini kullanacağını belirtir.
 When Editing CSS Rules
o Use Shorthand: Aynı şekilde stil düzenleme işlemi sırasında hangi parametrelerde hızlı
yazma özelliğinin kullanılacağını belirtir.
o Open CSS files when modified: Stil dosyasında yaptığınız herhangi bir değişiklikten
sonra stil dosyasının DW içerisinde açılmasını sağlar.
 When Double-Clicking in CSS Panel: CSS stilin üzerine çift tıklandığında hangi işlemin yapılacağını
belirtir.
File compare
File compare kısmındaki ayarlar.
Dosya karşılaştırma ayarları
DW‟ın dosya karşılaştırma işlemi sırasında hangi yazımlı kullanacağını bu kısımdan belirtebilirsiniz. Dosya
karşılaştırma yazılımları hakkında ayrıntılı bilgiyi Macromedia‟nın sayfasından alabilirsiniz.
File types / Editors
File types / Editors kısmındaki ayarlar.
Dosya tipleri düzenleyicisi
 Open in code view: bu uzantıya sahip dosyaları DW ile açarken doğrudan kod görünümünde
açılmasını sağlar.
 External code editor: Harici bir kod düzenleme yazılımı kullanıyorsanız bunu belirtmenizi sağlar.
(Örneğin EditPlus gibi)
 Reload modified file: Değişiklik yapılmış dosyayı yeniden yüklerken nasıl davranılması gerektiğini
belirtir.
 Save on launch: Ön izleme sırasında dosyanın kaydedilmesi sırasında nasıl davranılması gerektiğini
belirtir.
 Fireworks: Sisteminizde Fireworks kurulu ise kurulu olduğu dizini buradan belirtebilirsiniz.
Fonts
Fonts kısmındaki ayarlar.
Yazıtipleri
 Fonts Settings: DW‟ın varsayılan olarak kullanacağı Font Encoding ini belirtir. Türkçe sayfalarda
sorun yaşamamak için Türkçe seçili olmalıdır.
 Proportional Font, Fixed Font, Code View: DW içerisindeki çalışma ortamlarında kullanılacak olan
fontun türünü belirtir.
Highlighting
Highlighting kısmındaki ayarlar.
Vurgu ayarları
DW‟ın şablon alanları ile çalışırken kullandığı renklendirme şekillerini düzenlemenizi sağlar.
Invisible Elements
Invisible Elements kısmındaki ayarlar.
Görünmez bileşen ayarları
DW‟da “Design View” (Tasarım görünümü) ile çalışırken normalde görünmeyen fakat bir işlevi olan
elementlerin tasarım görünüm içinde nasıl görüneceğini belirten işaretler kullanılır. Buradan hangilerin
görünüp hangilerinin görünmeyeceğini belirtebilirsiniz.
 Show Dynamic Text as:
o (Recordset Field) : Dinamik metinlerin (recordset_adi[filed_adi]) şeklinde ekrana
yazdırır. Aynı sayfada çoklu Recordset kullanıyor iseniz çok işe yarar.
o (): doğrudan (filed_adi) şeklinde yazdırır.
 Server Side Include: Show Content Of ıncluded File : Include edilmiş dosyanın içeriğini Tasarım
görünümde gösterilmesini sağlar.
 Server-Side includes Show contents of icluded file: Sunucu taraflı programlama
dillerinin include fonksiyonları ile sayfanıza dahil ettiğiniz dokümanların içeriklerini DW içerisinde de
görünmesini sağlar. Böylece tasarım elemanlarını barındıran (header, footer gibi) include dosyaları
ile çalışmak daha rahat olacaktır.
Layers
Layers kısmındaki ayarlar.
Katman ayarları
Sayfalarınıza eklediğiniz katmanlarınız için varsayılan ayarlarını bu kısım altından belirtebilirsiniz
Layout Mode
Layout Mode kısmındaki ayarlar.
Ara yüz ayarları
 Autoinsert Spacer :
o When Making Autostretch Tables : Layout view da çalışırken Aotuostretch tablolar
yaptığımızda bu tabloların içini doldurmak için kullanılan 1x1 piksellik bir GIF dosyasını
DW‟ın otomatik olarak yaratmasını belirtir.
 Spacer Image: Bu spacer dosyasının seçtiğimiz her site için ayrı ayrı tanımlayabilmemize olanak
sağlar.
Diğer seçenekler Layout View‟ın görünüm opsiyonlarını belirten renkleri kendimize göre özelleştirmemizi
sağlar.
New Document
New Document kısmındaki ayarlar.
Yeni doküman ayarları
Burası DW ile çalışırken File / New menüsünü seçtiğimizde açılan yeni dokumana ait ayarlarımızın olduğu
kısım.
 Default document: Varsayılan sayfa türünün ne olduğunu belirler.
 Default document type (DTD): XHTML sayfa türü tanımlamasını (XHTML Document Type
Definitions) seçmemizi sağlar. Sayfa içeriğindeki yazım kurallarını etkileyip tasarım değişmesine dahi
sebep olan bu türü dikkatli seçmelisiniz.
 Default Encoding: İşte önemli noktalardan biri Türkçe dil sorununu aşabilmek için burayı Türkçe
(Windows) yapmalıyız.
Eğer eski bir DW sürümü kullanıyorsanız ve bu listede böyle bir seçenek yoksa Dreamweaver MX Türkçe
Encoding adlı eklentiyi kurmamışsınız demektir. Bu eklentiyi sitemizden temin edebilirsiniz.
 Unicode Normalization Form: Eğer varsayılan encoding olarak Unicode (UTF-8) seçtiyseniz listeden
bir form seçiniz.
 Include Unicode Signature (BOM): Eğer varsayılan encoding olarak Unicode (UTF-8) seçtiyseniz…
 Show New Document Dialog on Control+N: CTRL+N ye basıldığında New Document diyalog
penceresinin açılmasını sağlar.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3.
Preview in Browser
Preview in Browser kısmındaki ayarlar.
Tarayıcıda ön izleme ayarları
Sayfanızı DW'da düzenlerken tarayıcıda nasıl göründüğüne bakmak için "Preview in Browser" seçeneğini
kullanırsınız. İşte burada onunla ilgili temel ayarları yapıyoruz.
 "Browsers" kısmına sisteminizde yüklü diğer tarayıcıları da + işaretine tıklayarak ekleyebilir ya da
önceden eklediğiniz tarayıcıları - ile kaldırabilirsiniz. Sayfa her zaman tüm tarayıcılarda aynı
görünmeyebiliyor
 Preview using temporary file: Sayfanın ön izleme görünümü tarayıcının geçici internet dizini
üzerinden çağırılarak görüntülenir. Bu şartlarda eğer sayfada bir değişiklik yapıp kaydederseniz
sayfayı tazele demek bir işe yaramayacaktır. U seçeneği kaldırmanızı tavsiye ediyorum. Zira bu
şekilde yaptığımız değişiklikleri tarayıcının tazele / yeniden yükle (F5) düğmesine bastığımızda
bize yansımasını sağlamış oluyoruz. Aksi taktirde her değişiklikten sonra DW içerisindePreview in
browser seçeneğini (F12) kullanmamız gerekecektir.
Site
Site kısmındaki ayarlar.
Site ayarları
Tanımlı sitelerle çalışırken Files panelinin görünüm ve erişim ayarlarını bu kısımdan yapıyoruz.
Always Show: Uzak sunucu bağlantısı yapıldığında yerel ve ya uzak sunucunun ekranın hangi tarafında
görüntüleneceğini belirtir.
Dependent Files: Bağımlı dosyaların (resim, harici .css stil ve ya Javascript .js dosyaları) düzenleme
sırasında uzak sunucudan alınması veya gönderilmesi işlemleri sırasında DW‟ın uyarı vermesini sağlar.
Bu uyarı pencerelerinin opsiyonlar seçilmeyene kadar zorla görüntülenmesini sağlamak için Windows
kullanıcıları ALT, Macintosh kullanıcıları ise Option tuşlarına basılı tutarak bu işaretleri tıklayabilirler.
FTP Connection Disconnect after __ minutes iddle: dk. boşta kaldığında bağlantıyı kes
FTP Time Out: FTP bağlantısı için zaman aşım süresi.
FTP Transfer options: DW‟ın diyalog penceresi görüntülendikten kaç sn sonrasına kadar beklemesi
gerektiğini belirtir. Eğer bu süre sonunda ekranda görüntülenen uyarı mesajına bir cevap verilmezse
varsayılan seçenek işleme konacaktır. (var olan dosyaların üstüne yaz, yeniden adlnadır vs. gibi işlemler)
Firewall Host / Firewall Port: Sisteminizde kurulu olan güvenlik duvarı ayarları. DW‟ın internete
açılabilmesi için bu ayarların uygun yapılmış olması gerekmektedir.
Put Options: Save Files Before Putting: DW‟ın dosyaları uzaktaki sunucuya göndermeden önce
kaydetmesini belirtir.
Move options Prompt before moving files on server: Uzaktaki sunucuda dosyaları taşırken DW‟ın bir
uyarı mesajı göstermesini sağlar.
Manage Sites: Tanımlı siteleri yönetmenizi sağlar. Bu seçeneğe Site / Manage sites menüsünden de
ulaşabilirsiniz.
Status Bar
Status Bar kısmındaki ayarlar.
Durum çubuğu ayarları
Aslında çok zekice düşünülmüş fakat pek de bilinmeyen bir seçenek. DW‟da bir tasarım yaparken çoğu zaman
hangi çözünürlükte çalışıyorsak ona göre hazırlarız. Fakat farklı çözünürlük kullanan bir ziyaretçi siteye
girdiğinde sayfada kaymalar ve bozulmalar olur. Öte yandan 800x600 çözünürlükte siteyi görüntüleyen bir
ziyaretçi görüntü alanı olarak tam anlamıyla 800 piksel genişlik göremez. Tarayıcının kaydırma çubuklarından
(scroll bar) ve pencere kenarlıklarından kaynaklanan kayıplar nedeniyle bu rakam 760-780 piksel arasında
değişmektedir. İşte Status bar bize tam olarak hangi çözünürlükte hangi piksellerde bir tasarım yapmamız
gerektiğini gösteren seçenekler sunuyor.
Buradaki değerleri istediğiniz gibi değiştirebileceğiniz gibi yeni değerler de ekleyebilirsiniz. Örnek olarak bir
Pop-up pencere ile çalışırken yine bu kayıplar nedeniyle yatay kaydırma çubuklarının çıkmasını
önleyemediğimiz ve istemediğimiz durumlarda buraya açtığınız pop-up un genişliğini ve gerçek genişliği
girerek pop-up‟ın içeriğini hazırlarken doğru genişliklere göre pencereyi yeniden boyutlandırıp daha sağlıklı bir
tasarım yapmanızı sağlar. Ayrıca DW bize dokümanın dosya boyutuna göre bu dokümanın kaç sn de
yükleneceğini yaklaşık olarak hesaplayıp status barda gösterir. Bağlantı ayarını da yine “Connection Speed”
seçeneği ile yapıyoruz.
Validator
Validator kısmındaki ayarlar.
Validatör ayarları
DW'ın HTML kodunun geçerliliğini kontrol ederken hangi kriterlerle uyumluluk göstermesi gerektiğini bu
kısımdan düzenliyoruz.
Burada hiyerarşik bir yapı söz konusu, örneğin eğer HTML 4.0'ı işaretlerseniz HTML 3.2 ve HTML 2.0
otomatik olarak seçilmiş olacaktır. Seçimleriniz için ayrıntılı ayarları yapmak için "Options" butonuna
tıklamalısınız. Buradan ilgili kısımları işaretleyip OK ile pencereyi kapatıyoruz.
Dreamweaver ve CSS Stiller
İşe DW içerisindeki stil kullanımlarını anlatarak başlayalım. Çok kullanılan ve bir web standardı olan CSS stiller
(Cascading style sheets) DW ile tam anlamıyla bir tasarım silahına dönüşüyor.
Bu makalede CSS‟nin olduğundan çok DW içerisinde stil yönetim ve kullanım araçlarından bahsedeceğiz.
CSS konusunda bilgisi az olan arkadaşlara en azından internet üzerindeki kaynaklardan bilgi edinmelerini ve
HTML tasarımı konusunda CSS‟nin ne anlama geldiğini kavramalarını öneriyorum. Aksi takdirde bu makale
kendilerine pek bir anlam ifade etmeyecektir.
DW içerisinde stilleri kullanabilmenin ve yönetebilmenin ilk kuralı CSS styles panelini iyi tanımaktan geçiyor.
Bu panelin kullanımı da herhangi bir DW panelinin kullanımından farklı değil. Genel olarak panel gruplarının
ne işe yaradığını kavradığınızda bu panelinde kullanımının son derece basit olduğunu göreceksiniz.
CSS Styles Paneli
Panel All Rules bölümünde sayfamız içerisinde ilişkili ve önceden tanımlı stillerin bir listesini barındırıyor. Bu
liste sayesinde stilleri seçili objelere uygulayabiliyor ve stillerimizi yönetebiliyoruz.
CSS styles paneli
All Rules‟dan bir stili seçtiğimiz anda Properties kısmında ilgili stile ait özellikler ve parametreler
listeleniyor. Add Properties seçeneği ile de stilimiz için yeni bir özellik tanımlama mümkün. Özelliğin türüne
ve stilin konumuna göre DW bize olası seçenekler ve tanımlamaları Code hints‟e benzer bir ara yüz ile
sunuyor.
CSS styles paneli ile stile yeni bir parametre eklemek oldukça kolay
Aynı panel içerisinde yer alan “Current” sekmesi ile sayfada herhangi bir alana tıkladığımızda o alanı
etkileyen CSS özelliklerini görüntülemeye yarıyor. Örneğin Current sekmesine geçip bir başlığa ya da stiller ile
biçimlendirilmiş bir metne tıkladığınız anda bu alanda stil özellikleri listelenmekte ve bize bu elemanın hangi
stillerden etkilendiği konusunda fikir vermektedir.
CSS styles paneli current sekmesi görünümü
Panelin alt kısmında bulunan düğmeler ile de panel menüsündeki işlemleri gerçekleştirmek mümkün. Sağ alt
kısımda bulunan
Stil yönetim düğmeleri
 Attach Style Sheet: Harici .css uzantılı stil dosyalarınızı çalıştığınız doküman ile ilişkilendirmeye yarar.
Böylece tek bir stil dosyası ile sitenizdeki tüm sayfaları biçimlendirebilir ve değişikliklerin tek bir .css
dosyası üzerinden yürümesini sağlayabilirsiniz. Buraya tıkladığımızda açılan iletişim
penceresinden Browse diyerek ilgili CSS dosyasını seçebiliriz.
Harici CSS dosyasını doküman ile ilişkilendirmek
Add as: seçeneği stilin nasıl doküman içerisine dahil edileceğini belirtiyor. "Link"
dediğimizde ornek.css dosyasını "link" tekniği sayesinde doküman ile ilişkilendiriyor.
"Import" dediğimizde ise ornek.css dosyası "@inport" tekniği ile dokümanımız ile
ilişkilendiriliyor. Bu iki yöntem şu aşamada bizim için anlam ifade eden bir fark taşımıyor,
herhangi birini seçebilirsiniz
o Media: Bu stilin ne tür medyalar için görüntülenmesi gerektiğini belirtiyor. (Style
rendering kısmında konunun ayrıntılı açıklamasını bulabilirsiniz)
o Sample style sheets: DW içerisinde standart olarak gelen önceden hazırlanmış hazır stil
dosyalarını sayfamıza ilişkilendirebileceğimiz bir ara yüz açar. (Ayrıntılar için Hazır
stiller kısmına bakabilirsiniz)
 New CSS Rule: Yeni bir stil yaratmaya yarar.
 Edit Style: Seçili olan stili düzenlemeye yarar.
 Delete CSS Rule: Seçili stili siler.
Sol alt kısımda bulunan
o
Panel yönetim düğmeleri
 Category View: Stil özelliklerini kategorilere ayırarak listeler.
Kategori görünümü
 List View: Ne kadar özellik varsa hepsini listeler Fakat tüm özellikleri gösterdiği için biraz kafa
karıştırıcı olabilir.
Liste görünümü
 Set Properties View: Standart olarak DW kurulumunda gelen görünüm türüdür. Bence en başarılı ve
kullanışlı görünüm türü olmakla beraber az yer kaplar.
Stilleri nesneler uygulamak
Yarattığımız ya da dışarıdan harici olarak ilişkilendirdiğimiz CSS stilleri herhangi bir nesneye uygulamak için
öncelikle ilgili nesneyi (metin grubu, paragraf, link, resim,tablo veya DIV) seçmemiz gerekmektedir.
Ardından Properties paneli üzerinden “Style” listesinden uygun bir stil seçebiliyoruz.
Properties paneli üzerinden CSS stilleri seçip uygulayabilirsiniz
Veya yine nesneyi seçtikten sonra CSS Styles panelinden uygulamak istediğimiz stili seçip sağ tıklıyoruz ve
“Apply” diyoruz yine aynı sonucu alacağız.
CSS styles pnaelinde n stil uygulamak
Bunu da beğenmezseniz nesneye tasarım görünümünde çalışırken sağ tıklayıp CSS styles / stil
ismi şeklindeki menüden de stilimizi uygulayabiliyoruz.
Sağ tuşu kullanarak stil uygulamak
Design Time Style Sheet….
DW MX ile gelen çok kullanışlı bir özellik olan “Design time style sheet” özelliği; özellikle profesyonel
tasarımcıların baş balesi olan ve include ya da dosyaları şablon kütüphanesi objeleri (Library) ile çalışırken
karşılaşılan tasarım problemlerini ortadan kaldırıyor.
DW ile çalışırken bazen CSS stilleri doğru bir biçimde göremeyebilirsiniz. Ancak tarayıcıda çalıştırıldığında
izlenebilecek olan bu stilleri DW içinde çalışırken kullanabilmek için DW‟ın “Design Time Style Sheet”
özelliğini kullanacağız.
Peki nedir bu Design Time Style Sheet ?
Eğer programlama dilleri ile bir web geliştirme projesinde çalıştıysanız (ASP, PHP gibi) include ile çalışırken bu
stillere ihtiyacınız olduğu anlarda onları kullanamadığınızı bilirsiniz. Yada şablon (template) veya şablon
kütüphanesi (Library) dosyaları ile çalışırken de aynı sorun söz konusu tabi. İşte Design Time Style Sheet
özelliği ile DW‟da çalışırken önceden belirlediğiniz bir .css dosyası doküman düzenleme sırasında (sayfaya
bağlanmış–bağlanmamış fark etmez) aktif hale getirilecek ve en doğru biçimlendirmeyi yapmanız
sağlanacaktır. Diğer taraftan tam tersi bir durum da söz konusu olabilir. Sayfa tasarımını yaparken bazı
stillerin gizlenmesini ama tarayıcıda doğru görünmesini istiyor olabilirsiniz. İşte Design time style sheet bize
bu imkânları sağlıyor.
Design Time Style Sheet özelliğini kullanmak için CSS Styles panelinin özellikler menüsünden “Design Time
…” seçeneğine tıklamanız yeterlidir.
CSS panel müsünden Design Time seçeneğini seçiyoruz
Açılan diyalog penceresinden “Show only at Design Time” kısmı sadece tasarım anında görüntülenecek
olan CSS Stil dosyalarını belirtiyor. + işaretine tıklayarak istediğiniz kadar .css dosyası ekleyebilirsiniz. “Hide
at Design Time” ise tasarım anında gizlenmesi gereken .css dosyalarını belirtiyor. Oldukça kullanışlı bir
özellik.
Design time style sheet iletişim penceresi
Style rendering
Style rendering stillerimizin görüntüleneceği daha doğrusu sayfa görünümüne katılacağı
(burada rendering olarak tabir edilen olay) medya türünü belirten bir terminolojidir. Söz gelimi siteniz
tasarımı için farklı medyalar için farklı CSS dosyaları hazırlayıp bunları sayfanız ile ilişkilendirirseniz, siteniz
erişilebilirlik seçeneklerini en üst düzeyde tutmuş olursunuz. Örneğin yazıcı çıktısı sırasında; site tasarımındaki
logo ve renkli tasarım bileşenlerinin yazıcı kartuşlarını bitireceği yada çıktı kalitesini düşüreceği gibi sitenizdeki
içerik için çıktı alan ziyaretçinin sitenizden soğumasına sebep olabilmektedir.
Bu tarayıcıların desteklediği bir özellik olmakla beraber DW içerisinde tasarım sırasında nasıl göründüğünü
görmek isteyebilirsiniz. İşte bunun için DW geliştiricileri çalışma esnasında hangi medya türüne göre stil
görüntüleme seçeneklerinin aktif olacağını belirten bir özellik olan Styl rendering‟i bizlere sunmaktalar.
Varsayılan olarak kapalı gelen Style Rendering toolbar‟ı açmak için View / Toolbars / Style
Rendering menüsünü kullanabilirsiniz.
Style rendering toolbar
Bu toolbar içerisinden DW‟da kullanım sırasında hangi medya türüne göre stil görüntüleneceğini
belirtebilirsiniz. Başlıca media türleri şu şekildedir
 Render Screen Media Type: Ekranlar için görüntüler. Bu PC kullanıcıları oluyor.
 Render Print Media Type: Yazıcı çıktısı sırasında görüntülenir.
 Render Handheld Media Type: Mobil cihazlarda (smartphone veya PDA cihazlar gibi) görüntülenir.
 Render Projection Media Type: Projeksiyon cihazlarında görüntülenir.
 Render TTY Media Type: Teletype olarak tabir edilen uzak yazıcı cihazlarında görüntülenir.
 Render TV Media Type: Televizyon ekranında görüntülenir.
Attach style sheet seçeneği sırasında stilimiz için hangi medya türünün geçerli olacağı seçmemizde
mümkün. (bu özellik tarayıcıları etkiliyor)
Buradan “all” derseniz her türlü görüntüleme medyası için geçerli olabileceği gibi; “projection” projeksiyon
cihazlarında görüntüleneceği, “screen” sadece ekranlarda görüntülenebileceği, “print” dediğimizde ise
sadece yazıcı çıktısı sırasında görüntülenmesi anlamına geliyor. (Bu şekilde sayfa tasarımına normal tasarım
stili ile birlikteprint medyası için sadece gerekli kısımların göründüğü diğer logo ve menülerin CSS özellikleri
ile gizlendiği bir stil dosyası ilişkilendirirseniz ziyaretçileriniz sitenizden yazıcı çıktısı alırken
zorlanmayacaklardır.)
Medya türleri seçimi
Hazır Stiller
DW içerisinde gelen hazır stil şablonlarını kullanarak kendinize yeni ufuklar açabilirsiniz.
File / New menüsü ile yeni doküman oluşturma penceresini açtığınızda CSS Style Sheets kategorisi altında
hazır olarak tanımlanmış ve bir sayfanın tüm stil ihtiyaçlarını karşılayacak CSS tanımlamalarını içeren
şablonlara ulaşabilirsiniz.
Hazır stil dosyalarını kullanmak
Dokümanımıza harici bir stil dosyası ilişkilendirme esnasında Sample style sheets seçeneği ile de hazır stil
dosyalarını sayfamıza ilişkilendirebileceğimiz bir ara yüze ulaşmak mümkün. CSS konusunda yeni olan
arkadaşlar bu stilleri inceleyerek bir stil dosyasında ne tür stiller olması gerektiğini kavrayabilirler.
Hazır stil dosyalarının seçimi
Dreamweaver ve Metinler
Tabi ziyaretçilere sadece bir metin ulaştırmak her zaman tatmin edici olmayabilir. Yapacağımız
biçimlendirmeler, renk seçimleri ve hizalama teknikleri sayfa görünümüne çok daha hoş bir hava katacaktır.
HTML içerisinde <FONT> tagı ile metinlerimizi biçimlendirmemiz mümkün. DW'da ise işin kod kısmına
geçmemize hiç gerek yok. DW'ın bizlere sunduğu kullanışlı biçimlendirme araçları ile en kolay yoldan sonuca
ulaşmak mümkün.
W3C font tagını kullanımdan kaldırmış ve bu tagı kullanan web sayfalarını demode ve geçersiz kod yapısına
sahip sayfalar olarak nitelendirmiştir. Biçimlendirme seçeneklerinizde font yerine CSS kullanmak size daha
sağlıklı sonuçlar vereceği aklınızdan bulunması gereken önemli bir noktadır. Konu hakkında daha detaylı
bilgiyi www.w3c.com dan alabilirsiniz.
Metin biçimlendirirken CSS kullanmakta büyük projelerde çalışan ve sayfanın ara yüzünün metinlerin tekrar
boyutlandırılması gibi durumlarda bozulmamasını isteyenler için çok daha mantıklı olacaktır. CSS Style ile
ilgili daha kapsamlı bilgilere sitemizdeki ilgili makalelerden ulaşabilirsiniz.
Text & HTML
İlk önce HTML içerisindeki metin ve biçim kavramlarına biraz deyinelim. HTML de kullanılan başlıca metin
biçimleri şunlardır.
Temel metin biçimleri
 Paragraph: Paragraflarımız oluşturan <P> ....</P> tagları arasında yer alan biçimdir.
 Heading: Başlık anlamına gelir 6 farklı heading türü vardır. (Heading 1, Heading 2.... Heading 6)
Türüne göre <H1>...</H1> yada <Hx>....</Hx> biçiminde kullanılır. Heading 1 en büyük, Heading
6 en küçük başlıktır.
 Preformated: <PRE>....</PRE> tagına karşılık gelen biçimlendirme türüdür. Bu biçimde metin çıktısı
olduğu gibi verilir. Yani fazladan boşluklar doğrudan ekrana yansıtılır, Enter'a basılan yerler (n) alt
satıra kaydırılır, tablar, sekme biçiminde görüntülenir vs.
Bunlar en temel HTML metin etiketleri idi. Birde HTML stil olarak isimlendirilen ve HTML içinde standart olarak
tanımlı gelen ve her Tarayıcı tarafından tanınan standart stiller mevcuttur. DW içinde bu stillere Text /
Style menüsü ile ulaşabilirsiniz.
Text menüsü ve metin biçimleri
Metin biçimlendirmek
Ziyaretçileri etkilemenin birçok yolu var biz ilk önce metinler ile neler yapabiliyoruz bir bakalım.
Biçimlendirme işlemini Property Inspector (Properties) panelinden yapacağız. Bu paneldeki tüm ayarları
Text menüsü altında yer alan alt menüler ile de yapabileceğinizi söylemeden geçmeyelim. Bu paneldeki
başlıca öğeler;
Properties panel vs CSS ilişkisi
 Format: HTML biçimleri olarak anlattığımız Heading, Paragraph.... Kısmı. .(Text / Paragraph
Format)
 Link: Bu ise seçili durumdaki metin veya metin grubuna bir link atamaya yarar. Buraya direk adres
veya dosya ismi yazarak yada yanındaki klasör simgesine tıklayarak (Browse/Gözat) link ile
bağlanacak dosyayı seçebilirsiniz. Bu kısmı doldurduktan sonra yanındaki Target alanı da aktif hale
gelecektir. Target ise Frameler ile çalışan tasarımcılar için bağlanan linkin hangi frame içinde
açılacağını belirtmeye yarayan "hedef" kısmıdır. (Insert / Hyperlink)
 Font: Bu drop down menü ile HTML içinde en uyumlu yazı tiplerinin tanımlı olduğu bir menüye
ulaşabilirsiniz. Buradan Sayfamıza eklediğimiz metinin yazı tipini belirliyoruz. (Text / Font)
 Size: Metnimizin yazı tipi büyüklüğünü belirtir. 1 ile 7 arasında bir rakam olabilir. .(Text / Size)
 Color: Metnimizin rengini belirler. Tıklayarak rengi siz seçebileceğiniz gibi bir grafik programında
kopyaladığınız renk kodunu direk yapıştırarak da rengi belirleyebilirsiniz. DW aynı zamanda
ekrandaki bir bölgeden renk kodu çalabilmektedir.(Text / Color...)
 Unordered list: Madde imi işaretleri kullanarak liste yaratmaya yarar. Basılan her Enter da yeni bir
liste öğesi oluşturulur. .(Text / List / Unordered)
 Ordered list: Numaralandırma yaparak liste yaratmaya yarar. Basılan her Enter da yeni bir liste öğesi
oluşturulur. .(Text / List / Ordered)
 Text Outdent: Paragrafı bir sekme (Tab) dışarı kaydırır. .(Text / Outdent)
 Text Indent: Paragrafı bir sekme (Tab) içeri kaydırır. .(Text / Indent)
 Bold: Kalın yazmak için kullanılır. .(Text / Style / Bold)
 Italic: Eğik yazmak için kullanılır. .(Text / Style / Italic)
 Align Left: Sola hizala. .(Text / Align / Left)
 Align Center: Ortaya hizala. .(Text / Align / Center)
 Align Right: Sağa hizala. .(Text / Align / Right)
 Justify: İki yana hizala.(Text / Align / Justify)
Font kısmında belirtilen fontları yetersiz bulduğunuzda bu menünün en altında yer alan "Edit Font list"
seçeneği ile yeni font türleri tanımlayabilirsiniz. Fakat bunu pek tavsiye etmiyorum.
Yazı tipi listesini düzenlemek
Zira sizin çok hoşunuza giden şatafatlı fontlarınızın herkeste olmadığını aklınızdan çıkarmamanız gerekiyor.
Yani yeni bir font tanımlaması yaparken Web ve Dünya standartlarındaki fontlardan birini seçmelisiniz.
Örneğin Arial her Win9x yüklü bir bilgisayarda bulunan bir fonttur.
Yazı tipi düzenleme iletişim penceresi
Ayrıca Insert paneli altında yer alan "Text" sekmesinden de metin biçimlendirme işlemleri ile ilgili birçok
araca ulaşabilir ve sayfanızda yer alan metinleri kolayca düzenleyebilirisiniz.
Insert panelde yer alan Text sekmesi
Metinlere link vermek
Bir HTML sayfasında en çok kullanılan ve beklide kullanılması gereken text-linkler sayfaların birbiri ile olan
bağlantılarını sağlar ve sayfalar arası geçişleri düzenler.
Sadece metinlere değil, resimlere de link verebilme şansına sahibiz. Biz burada metinlere nasıl link
vereceğimize değineceğiz.
Bir text'e link vermek için;
Öncelikle link vermek istediğiniz metni seçin Arkasından seçili metnin üzerine sağ tıklayıp ve "Make Link"
seçeneğine seçin.
Sağ tuş menüsü ile link vermek için
Yada metni seçtikten sonra doğrudan Properties Panelinden "Link" kısmına bağlantının URL sini yazarak da
(yandaki klasör simgesine tıklayarak Gözat da diyebilirsiniz) link verebilirsiniz.
Properties panelinden link vermek için
Eğer harici bir web sayfasına link vermeniz gerekiyorsa mutlaka adresin başına http:// yazmanız gerekiyor.
Mail adreslerine link vererek ziyaretçilerin bilgisayarında kurulu olan Outlook Express benzeri bir programla
size e-mail yollamasını sağlayabilirsiniz. Bunun için mail linki verirken mail adresinin başına "mailto:"
yazmanız yeterlidir. Bunun dışında Insert Panelden Common kategorisi altındaki Email link isimli düğme
ile de mail linkler yaratmanız mümkün.
E-mail linki ekleme penceresi
Birde çok daha detaylı linkler yaratabilmek için; Insert / Hyperlink menüsünü kullanabilirsiniz. Açılan
iletişim penceresinden bir link için yapabileceğiniz en detaylı ayarları gerçekleştirebilirisiniz.
Gelişmiş link ekleme iletişim penceresi
Dynamic metin (Dinamik text)
Aslında bu konuyu çok daha ayrıntılı bir şekilde inceleyeceğiz ama yeri gelmişken bir şeyler söyleyelim.
Bu konu daha çok sunucu modelleri ile çalışırken kullandığımız konuları kapsamına giriyor. Fakat yeri
gelmişken açıklayalım. DW içerisinde desteklenen sunucu modellerinden biri ile sunucu taraflı (Server side)
bir dili kullanıyor iseniz Veritabanına ulaşıp bir Recordset yarattıktan sonra verileri sayfaya yazdırdığımız
anda yazdırdığımız bu veriler artık Dinamik nitelik taşıyan bir obje durunu alırlar. DW içerisinde bu
"Dynamic" kavramı oldukça fazla geçiyor. Dynamic Table, Dynamic list menu vs. Bunlar ilerideki konularda
çok daha ayrıntılı bir biçimde açıklanacak. Şimdilik bu kadar ile yetinelim.
Özel karakterler
Dokümanlarımızda para birimlerinin sembolleri veya bilimsel ifadeler gibi özel karakterleri metin içerisinde
kullanmak isteyebiliriz. Bu gibi durumlar için HTML içerisinde özel kodlar ile ifade edilen özel karakterleri
kullanmak en kolay yol olacaktır. DW içerisinde özel karakterlere Insert paneli altında yer alan "Text"
sekmesinden ulaşabilir ve sayfanıza ekleyebilirsiniz.
Insert panelde yer alan Text sekmesi
En sık kullanılan karakterler kolay ulaşım açısından menüye eklenmiş durumda, bu karakterlerin dışında bir
şey eklemek için menüden "Other Characters" menüsüne tıklayarak diğer karakterlere de ulaşabilirsiniz.
Özel karakter ekleme penceresi
Dreamweaver Rollover Text Linkler
"CSS Styles" panelini açık değilse Windows / CSS Styles menüsü veya Shift+F11 ile açıyoruz. "CSS
styles" panelinin sağ üst köşesindeki düğmeye tıklayarak açılan panel menüsünden "New ..." diyoruz.
CSS styles paneli menüsünden New diyerek yeni bir stil tanımlamaya başlayabilirsiniz
Açılan diyalog penceresindeki "Type" kısmından "Advanced (IDs, pseudo-class selectors)" seçeneğini
işaretliyoruz. "Selector" kısmını da yanındaki açılır menüden yararlanarak ekleyeceğimiz stile göre uygun
olanı seçiyoruz.
Yeni bir text link yaratmak
Sırasıyla a:link, a:visited, a:hover, a:active stillerini ekliyoruz ve daha önce anlatıldığı gibi stil ayarlarını yapıp
dokümanımızı kaydediyoruz.
Bu tür altında yer alan öğeler ve anlamları ise şu şekilde;
 a:link: Bu sayfamızdaki standart text-linkleri temsil eder.
 a:visited: Ziyaret edilmiş text-link rengini veya özelliklerini belirtir.
 a:hover: Text-linklerin üzerine gidince değişecek olan durumu yani rollover durumunu temsil eder.
 a:active: Bu ise linke tıklandığı anda linkin alacağı durumdur.
Bu şekilde standart "CSS Selector" tanımlamaları yapabileceğiniz gibi kendinizde özel link grupları
oluşturabilirsiniz. Bu sayede tek sayfada birden fazla rollover text-link tanımlaması yaparak farklı link grupları
oluşturabilirsiniz.
Link tanımlama sıranız her zaman link, visited, hover, active şeklinde olmalıdır. Aksi takdirde CSS stiller
tarayıcıda düzgün görünmeyecektir.
Rollover Text Link olayını zahmetsiz ve kolay bir biçimde yapmanın bir diğer yolu da Modify / Page
Properties menüsü ile ulaştığımız sayfa ayarları iletişim penceresindeki "Links" sekmesidir. Bu bölümde
linkleriniz için renk ve metin dekorasyon ayarlarınızı oldukça kolay ve kullanıcı dostu bir ara yüz ile
yapabilmeniz mümkün.
Rollover test linkleri sayfa ayarları ile yapmak oldukça kolay
İlgili ayarları yapıp "Apply" dediğinizde DW, rollover text-linkler için gerekli olan CSS kodunu sayfaya
ekleyecektir.
Sayfa ayarları iletişim penceresindeki "Links" sekmesinin ve bu özelliklerin kullanılabilmesi için Edit /
Preferences menüsünden "General" sekmesi altında yer alan "Use CSS instead of HTML tags"
seçeneğinin işaretli olması gerekiyor. Aksi taktirde sayfa ayarları penceresinde bu ayarları yapabileceğiniz
kısımlar görünmeyecektir.
Tek Sayfada birden fazla Rollover Text-Link
Sayfalarda (abartılmadığı sürece) çok hoş görünen ve CSS'in en çok bilinen özelliği olan Text-Link Rollover
olayına daha önce deyinmiştik hatırlarsanız. Çok güzel, sayfalarımızda rahatlıkla kullanabiliyoruz. Peki
sayfamızda farklı bir renk ile renklendirmemiz gereken ikinci bir link grubu (menü, alt menü veya arka fon
nedeniyle iyi görünmeyen linklerde) olursa ?? İşte orda da CSS'in "A" selector özelliğini kullanacağız.
Olayın Dreamweaver ile pek bir alakası yok aslında. Sadece DW'ın bize sunduğu görsel ortamı kullanıyoruz.
Bütün sır CSS'de.
Farklı renkte Text link rollover'lar tanımlamak için;
İlk önce sayfanıza daha önce anlatıldığı gibi bir "Text link rollover" ekliyorsunuz.
Şimdi ikinci rollover grubu için işe koyulalım. CSS Styles panelinde Yeni bir stil yaratmak için "New" diyoruz,
Bu ekleyeceğimiz stil normal bir stil değildir. Yeni bir CSS selector tanımlaması yapacağız. O yüzden
"Advanced (IDs, pseudo-class selectors)" seçeneğini seçiyoruz. Selector kısmına "a.pembelinkler"
yazıyoruz ve OK diyoruz.
Bir sayfada birden fazla text-link rollover tanımlamak için
Ayarları aşağıdaki gibi (ya da nasıl istiyorsanız) yapıp tekrar OK diyoruz. (Burada ikinci link grubunun
font'uda, rengi de büyüklüğü de her şeyi farklı olabilir) Şimdi ikinci bir link grubu yaratmış olduk. Şimdi bunun
içinde "visited, active ve hover" tanımlamaları yapacağız.
İkinci rollover test link için stil özellikleri
Tekrar New diyoruz yine "Advanced (IDs, pseudo-class selectors)" ve Selector kısmına bu sefer
"a.pembelinkler:visited" yazıyoruz ve OK deyip bunun içinde istediğiniz stil ayarlarını yapıyoruz. Ben
sadece rengini ve Text Decoration kısmını değiştiriyorum ama siz istediğiniz değişikliği yapabilirsiniz. Bu
şekilde "a. pembelinkler:hover" ıda ekliyoruz.
İkinci rollover text linkler için :hover stili özellikleri
Şimdi bu stili uygulamak istediğimiz linki tümüyle seçili duruma getirip CSS Styles panelinden
"pembelinkler" adlı stile tıklıyoruz. Şimdi sayfayı kaydedip tarayıcıda bir göz atabiliriz.
Bu şekilde istediğiniz kadar a.grup2, a.grup3.... gibi link grupları ekleyebilirsiniz.
Bu şekilde Selector tanımlamaları yaparken şu sırayı izlerseniz bir sorun ile karşılaşmazsınız:
 a:link
 a:visited
 a:hover
 a:active
Aksi takdirde stiller birbirini etkileyip devre dışı bırakabiliyor yada sorunlar çıkabiliyor. Aklınızda bulunması
gereken bir ayrıntı olarak eklemek istedim.
Bu etkiyi yapabileceğiniz bir diğer yöntem de DIV ve katmanlar için hazırladığınız ID'ye özel stillerin alt stilleri
şeklinde link biçimlendirmeleri de yapabilirsiniz. Örneğin ID siUstTaraf olan bi DIV için
eklenen #UstTaraf isimli bir stil olduğunu varsayalım. Bu UstTaraf DIV'inin içinde yer alan herhangi bir linki
seçip CSS Styles PanelindenNew diyerek yeni bir stil tanımlamaya başarsanız DW sizi bunun için hiyerarşik
CSS yapısını takip eden bir selector ismi ile sizi yönlendirecektir. Bu sıra ile aynı şekilde #UstTaraf a:visited
ve #UstTaraf a:hover şeklinde stiller ile linkleri biçimlendirmeye devam edebilirsiniz.
Farklı renkte rollover text-link tanımlamak için farklı bir yöntem
Resimde de görüldüğü gibi bu şekilde UstTaraf DIV'i içerisinde yer alan her türlü HTML elemanını
biçimlendirebilmeniz mümkün. Bu biçimlendirmeler sayfadaki diğer elemanları etkilemeyecek sadece bu DIV
içerisinde sınırlı kalacaktır. Daha ayrıntılı bilgiyi CSS kaynaklarından alabilirsiniz.
Örneğin Dreamweaver Sayfasının tasarımında bu stiller kullanılmaktadır. Sayfayı kaydedip CSS dosyasını
inceleyebilirsiniz.
Dreamweaver ve Tablolar
Tabloların anlamını herkes bildiği için sadece DW içerisindeki kullanımlarına değineceğim. Tablolar sayfamızda
ziyaretçimize sunmamız gereken düzenli anlamlı veriler için bir nevi konteynır görevi görmektedir. Sayfa
tasarımlarımızı doğrudan tablolar ile yapmak da mümkündür fakat yeni web standartları kapsamında sayfa
tasarımının temelinde (layout) tablo kullanan ve tasarımını tablolar üzerine oturtan siteler demode siteler
olarak sınıflandırılmakta ve bu konudaki otoriteler tarafından kabul görmemektedir. Ayrıntılı bilgiyi W3C nin
web sayfasından almanız da mümkün.
Biz burada listeli verileri tablolar ile nasıl kullanıcıya sunabileceğimizi ve DW içerisinde tablolara nasıl
hükmedebileceğimizi göreceğiz.
Tablolar oluşturmak
Öncelikle DW içerisinde yeni bir tablo nasıl yaratılıyor onu görelim.
Sayfanıza yeni bir tablo eklemek için:
Insert / Table (CTRL+ALT+T) menüsünü kullanabilir ya da "Insert" (Eski adı ile Object Panel)
panelindeki Common ve Layout başlıkları altında yer alan "Table" düğmesine tıklayabilirsiniz.
Tablo ekleme k için Isert panelini kullanabilirsiniz
Bu aşamadan sonra karşımıza bir iletişim penceresi gelecek ve eklemek istediğimiz tablo ile ilgili özellikleri
bizden girmemizi isteyecektir.
Tablo ekleme iletişim penceresi
 Rows: (Satırlar) Tablomuzun satır sayısı.
 Columns: (Kolonlar) Tablomuzun kolon sayısı.
 Table Width: (Genişlik) Tablomuzun genişliği. Burada birim olarak iki seçeneğimiz mevcut. İlki
kurulum ile standart olarak işaretli olarak gelen "Percent" (yüzde) diğeri ise "Pixels" (piksel).
Percent adından da anlaşılacağı üzere tablonun sayfamızın % olarak ne kadarını kaplayacağını
belirtiyor. Bunu seçerseniz kullanıcın çözünürlüğü her ne olursa olsun tablo sayfanın, sizin
belirlediğin yüzde kısmını kaplayacaktır. (%100 tüm sayfayı kaplar) Pixels ise sayfamızın piksel
cinsinden sabit genişliğini belirler. Ve çözünürlüğe göre değişmez. (Yüzde olarak girilen genişliklerde
dikkat edilmesi gerek nokta eğer bu tablo başka bir tablonun içerisinde ise dıştaki tablonun
genişliğinin yüzdesi üzerinden boyutlandırılacağıdır.)
 Border: (Çerçeve) Tablomuzu ve hücrelerimizi çevreleyen çerçevenin piksel cinsinden kalınlığını
belirtir. 0 (Sıfır) Olarak kullanılması halinde çerçeve kalkar.
 Cell Padding: Bu hücre içindeki materyalin duvarlarına olan uzaklığı olarak yorumlanabilir. Piksel
olarak işlenir. 0 girildiği takdirde resim, yazı gibi içerik hücre duvarlarına bitişik bir durumda görünür.
 Cell Spacing: Piksel cinsinden hücreler arası boşluğu ifade eder.
 Header: Tablomuzun ilk satırını yada ilk sütununu yada hem satır ve sütununu başlık olarak
ayarlayarak, içeriğimizin daha kolay anlaşılır bir hal almasını sağlayabiliriz.
 Caption: Tablomuzun başlığı diyebiliriz. Örneğin üyelerin isimlerinin listelendiği bir tabloya başlık
olarak üyeler yazabiliriz.
 Align Caption: başlığın ne tarafa hizalanacağını belirtir.
 Summary: tablonun içeriğine dair bir özet. Sadece kod görünümünde görülebilir ziyaretçiler için bir
anlam taşımaz.
Temel ayarları bu şekilde yaptıktan sonra OK'e tıklayarak tablonuzu sayfaya ekleyebilirsiniz.
Tabloları biçimlendirmek
Tablomuzu sayfamıza eklediğimize göre şimdide Properties (Eski adı ile Properties Inspector) panelinden
tablomuza ilişkin ayrıntılı ayarları nasıl yapacağımıza bir göz atalım.
Tabloları biçimlendirmek için Properties panelini kullanabilirsiniz
 Table Id: Tablomuzun HTML içindeki adı.
 Rows: Satır sayısı.
 Cols: Kolon sayısı
 H: Tablonun yüksekliği
 W: Tablonun genişliği.
 CellSpace: Hücreler arası genişlik.
 CellPad: Hücre içeriğinin hücre duvarlarına olan mesafesi.
 Align: Tablonun hizalama durumu.
 Border: Çerçeve kalınlığı.
 Clear Column Widths: Kolonları genişlik değerlerini temizle.
 Convert Table Widths to Pixel: Tablonun genişliklerini piksele çevir.
 Convert Table Widths to Percent: Tablonun genişliklerini yüzdeye çevir.
 Clear Rows Heights: Satırların yükseklik değerlerini temizle.
 Convert Table Heights to Pixel: Tablonun yüksekliklerini piksele çevir.
 Convert Table Heights to Percent: Tablonun yüksekliklerini yüzdeye çevir.
 Bg color: Tablonun arka fon rengi.
 Bg Image: Tablonun arka fon resmi.
 Brdr Color: Tablonun çerçeve rengi.
 Class: Tabloya uygulanacak CSS stili.
İlgili kısımlara ulaşarak tabloları istediğiniz gibi biçimlendirebilirsiniz. Tablo ID leri veya sayfada kullanılan bir
nesnenin ID benzersiz olmalı ve sayfa içerisinde sadece bir kez kullanılmış olmalıdır.
Ayrıca Tablonuz ile ilgili ayarların bir kısmını da Modify menüsünden gerçekleştirebilmeniz mümkün.
Bunlardan:
 Tablonuza satır eklemek için: Modify / Table / Insert Row
 Tablonuza kolon eklemek için: Modify / Table / Insert Column
 Satır silmek için: Modify / Table / Delete Row
 Kolon silmek için: Modify / Table / Delete Column
 Seçili hücreden sonraki satırı birleştirmek için: Modify / Table / Increase Row Span
 Seçili hücreden sonraki kolonları birleştirmek için: Modify / Table / Increase Column Span
 Önceden birleştirilmiş satırları tekrar geri ayırmak için: Modify / Table / Decrease Row Span
 Önceden birleştirilmiş kolonları tekrar geri ayırmak için: Modify / Table / Decrease Column Span
Hücreleri biçimlendirmek
Bazen tüm tablonun değil de belli bir hücrenin ya da satırın (sütun da olabilir) özelliklerini değiştirmek
isteyebiliriz. Tablo içindeki herhangi bir hücreye tıkladığınızdaProperties paneli aşağıdaki gibi değişecektir.
Sırasıyla;
Bir hücreyi seçtikten sonra Properties panelinden ilgili hücrenin özelliklerini değiştirebilirsiniz
 Marges selected cells using spans: Seçtiğiniz birden fazla hücreyi birleştirip tek bir hücre haline
sokar. Aynı işlemi Modify / Marge Cell menüsü ile de yapabilirsiniz.
 Splits cell into rows or columns: Seçtiğiniz hücreyi kolon veya satır olarak ikiye ya da daha fazla
parçaya böler. Aynı işlemi Modify / Split Cell menüsü ile de yapabilirsiniz.
 Horz: Hücre içi dikey hizalama.
 Vert: Hücre içi yatay hizalama.
 H: Hücre yüksekliği.
 W: Hücre genişliği.
 No Wrap: Hücre içindeki dokümanı bölmeden düz olarak devam etmesini sağlar.
 Header: Seçili hücreyi başlık hücresi olarak vurgular. (TD tagını TH'ye çevirir)
 Bg: Hücre arka fon resmi ve rengi.
 Brdr: Hücre çerçeve kalınlığı.
Tabloları sıralama
Çok uzun ve düzenli tablolar yapmanız gereken durumlarda içeriği daha sonra bir sıraya koymak gerekebilir.
Buda daha önce düzensiz bir sırayla eklenen içerik için zor bir durum ortaya çıkartır. Fakat DW'ın bize
sunduğu kullanışlı araçlar ile bu sorunun üstesinden gelebiliriz.
Bir tabloyu seçtikten sonra Commands / Sort Table menüsü ile tablo içeriği sıralama için kullanılacak araca
ulaşabilirsiniz. Bu açılan diyalog penceresinden ise sıralamanın kriterlerini giriyoruz. Alfabetik ya da nümerik
olarak sıralama yapabileceğimiz gibi ikincil sıralama kriterleri de belirleyebilirsiniz.
Tablo sıralama iletişim penceresi
Sort By kısmı sıralamanın hangi kolon içeriğine göre yapılacağını belirtiyor.
Then by ise eğer ilk sıralama kriterleri eşit ise ikincil olarak hangi kolon içeriğinin sıralama kriteri olarak
kullanacağını belirtiyor.
Sort includes the firs row İlk satırı da sıralamaya dahil etme seçeneğidir. Eğer Header kullandıysanız bunu
işaretlememelisiniz.
Keep all row colors the same after the sort has been completed sıralama işlemi bittikten sonra bütün
satır renklerinin rengini aynen koru. Eğer tabloda alternate renk kullandıysanız (bir satır koyu bir satır açık
renk) sıralama sonunda bu renk düzeninin bozulmaması için bu kısmı işaretlememelisiniz.
Tabloları biçimlendirmek (Format Table)
Hazır tablo şablonları sayesinde büyük ve karışık tabloları düzenli ve anlaşılır bir hale getirebilirsiniz.
Commands / Format Table menüsü ile Tablo formatlandırma aracına ulaşabilirsiniz.
Tablo biçimlendirme iletişim penceresi
Burada göze çarpan ayarlar olarak:
Alternate: Satırların birbirini taklip eden bir sıra ile renk değiştirmesi olarak nitelendirilebilir. Böylece uzun ve
geniş kapsamlı tablolarda ziyaretçi için satır bilgilerini takip kolaylaşmış olur.
Top row: İlk satırı belirtir. Bunu tablonun header'ı olarak düşünürsek tablo header biçimlerini buradan
yapabilirsiniz.
Left col: Yine top row'da olduğu gibi en soldaki kolonu header gibi biçimlendirmenize olanak sağlar.
Border: Çerçeve kalınlığı
Apply All Attributes to TD Tags Instead of TR Tags: Biçimlendirme işlemi için kullanılan parametreleri
satır kodları yerine her sütun için ayrı ayrı girilmesini sağlar. Ne gibi bir fayda getireceğini tam
anlayamamakla beraber, HTML kodunu oldukça büyüteceğinden eminim.
Dinamik Tablolar
Sunucu modelleri ile çalışırken işinizi kolaylaştıracak bir seçenek olduğu için deyinme ihtiyacı duydum.
"Insert" panelden Application kısmında ya da Insert / Application Object / Dynamic data /
Dynamic Table menüsü ile ulaşabileceğiniz bu seçenek ile bir defada tablo yapısını oluşturabilir bir defada
kaç kayıt çekileceğini düzenleyebilirsiniz.
Dinamik tablolar ile kayıtları listelemek çok kolay
Inport Tabular Data
Eğer elinizde web sayfasına dökmeniz gereken tablosal veriler varsa bunları DW için aktarırken CSV formatını
kullanabilirsiniz
CSV nedir?
CSV (Comma Separated Values / Virgül ile ayrılmış değerler) verileri bir ayraçlar ile (genelde virgül
veya noktalı virgül kullanılır) ayrılmış her satırında bir veri içerdiği kabul edilen metin dosyalarına verilen genel
isimdir.
Örnek bir CSV dosyasının içeriği şu şekildedir.
1. ADI;SOYADI;ADRES;ILCE;IL
2. SEVTAP;ÇINAR;1 Nolu Sağlık Ocağı;SÖKE ;AYDIN
3. A.GÜLTEN;KANTARCI;1440Sok.No:2D:9E.Ü.Ecz.Fak.;ALSANCAK;İZMİR
4. A.NURHAL;ERTEM;Cumhuriyet Meydanı No:7;SEFERİHİSAR;İZMİR
5. ABDÜLAZİZ;KARTAL;GazilerCd.No:341/A;YENİŞEHİR;İZMİR
6. ADİL;OKUCU;AliHikmetPaşaMeyd.No:22;;BALIKESİR
7.
Kolay yoldan CSV yapmak için Microsoft Ecel'i kullanabilirsiniz. Tablo ihtiva eden bir .xls (Excel dokümanı)
dosyasını açıp Dosya / Faklı Kaydet menüsü ile dokümanı farklı kaydedin. Kaydederken Kayıt türü
bölümünden "CSV (virgülle ayrılmış) (*.csv)" seçin ve Kaydet deyin. Oluşturulan CSV dosyası bir Excel
dokumanı gibi görünecektir ve çift tıklandığında Excel tarafından açılacaktır. Bu dosyayı bir Text editörü ile
(Dreamweaver, EditPlus, Notepad vs.) açıp düzenleme de yapabilirsiniz.
Dosyayı kaydederken türünü CSV (virgülle ayrılmış) (*.csv) olarak seçmelisiniz
Elinizdeki CSV dosyasını sayfaya eklemek için;
Yeni bir dokuman açın ve ardından File / Inport / Tabular Data ya da Insert / Table Object / Insert
Tabular data menüsü ile Tabular data (Çizelgeli veri diye çevirebiliriz) ekleme iletişim penceresini açın.
Sırasıyla;
Insert Tablular Data iletişim penceresi
 Data File: bilgileri içeren .csv dosyası
 Definiter: CSV dosyasından kullanılan ayracın türünü belirtiyor. Ayraç
olarak Tab (sekme), Comma (virgül), Semicolon (noktalı virgül), Colon (kolon) veya özel bir
ayraç olarak Other seçeneklerinden herhangi birini kullanabilirsiniz. (Excel varsayılan ayraç olarak
noktalı virgül kullanır)
 Table Witdh: Tablo genişliği. Eğer tablo genişliğinin içerdiği veriye göre genişleyebilmesini
istiyorsanız Fit to data, sabit bir genişlikte olmasını istiyorsanız Setseçeneğini kullanabilirsiniz.
 Cell padding: Tablo ekleme bölümünde ne olduğundan ayrıntılı bir şekilde bahsetmiştik.
 Cell Spacing: Tablo ekleme bölümünde ne olduğundan ayrıntılı bir şekilde bahsetmiştik.
 Border: Çerçeve kalınlığı.
 Format Top Row: En üst satırın başlık olarak kullanılacağı durumlarda bu satırın farklı bir formatta
olması daha mantıklıdır. Buradan uygun bir format seçebilirsiniz.
Seçeneklerini uygun şekilde doldurup OK dediğinizde DW, CSV dosyasının içeriğini otomatik olarak okuyup
sayfamıza bir tablo olarak ekleyecektir.
Daha sonra sayfaya eklenen tablo üzerinden ilgili değişiklikleri yapabilirsiniz
Dreamweaver ve Resimler
Öyle ki tasarımın önemli bir bölümünü ve kilit noktasını oluşturan resimler, harici editörler ile (Photoshop,
GIMP, Paint Shop Pro, Paint) oluşturulup düzenlenir ve daha sonra DW içine alınır. Bizim ilgileneceğimiz
kısım ikinci basamak olan DW'ın içinde resimlerin sayfamız içerisinde nasıl kullanılacağı ve düzenlenmesi
konusu.
Image Placeholder
İşinize ne kadar yarar bilemiyorum fakat bir deyinmekte fayda var.
Image Placeholder nedir?
Resim yüklenmeden önce sayfada görüntülenen ve resmin boyutlarını ve yerini belirten bir yer belirteci
diyebiliriz. Ziyaretçiye resim hakkında bir ön fikir vermek için kullanılabilecek bu özellik ile resimlerin yeri daha
sayfa yüklenmeden belli olacaktır. Böylece ziyaretçi sayfanın tamamının yüklenmesini beklemek zorunda
kalmayacaktır.
Image placeholder ekleme iletişim penceresi
Bir image placeholder eklediğinizde resim için gerekli HTML kodu sayfaya eklenecektir. (<img src=""">"
şeklinde) Sonradan placeholder'ın üzerine tıklayıp Property Inspector üzerinden resim ayarlarını
yaparak SRC den ilgili resim dosyasını seçmelisiniz.
Sayfaya Resim eklemek
Öncelikle yeni bir doküman açın ve bunu kaydedin. Bu nokta çok önemli Yeni bir sayfaya başlamadan önce
mutlaka onu kaydetmelisiniz. Aksi takdirde dosya yollarında sorunlar oluşacak ve sonuçta dosyaları sunucuya
gönderdiğinizde resimler görünmeyecek linkler çalışmayacaktır.
Dokümanınızı kaydettikten sonra "Insert" panelinden ya da Insert / Image menüsü ile bir resim eklemek
için ilk adımı atabiliriz. Insert paneldeki "Image" düğmesi genişleyebilen bir düğmedir. Aynı düğmenin alt
menüleri ile Rollover image (üzerine fare ile gidilince değişen resimler) ve ya navigasyon menüleri de
eklemek mümkün.
Insert paneldeki Image düğmesi ile sayfanıza resim ekleyebilirsiniz
Biz şu anda "Image" seçeneğine tıklıyoruz. Açılan diyalog penceresinden aradığımız resmi bulup seçiyoruz
ve OK diyoruz.
Resim ekleme iletişim penceresi ile resim dosyamızın nerede olduğunu seçiyoruz
Resmi seçerken URL kısmına dikkat etmemiz gerekiyor. Öte yandan dokümana eklediğimiz resimler ya bu
dokümanla aynı dizinde ya da alt dizinlerden birinde olmalıdır. Örneğin "images" adlı bir klasör yaratıyoruz
ve tüm resim dosyalarımızı buraya atıyoruz. Ve bir resim eklemek istediğimizde URL kısmında
"images/resim_dosyasi_adi.gif" şeklinde bir ibare yer alıyorsa sorun yok demektir. Fakat
"file://C./Program Files/..." gibi bir adres görüyorsanız başınız dertte demektir. Ya dokümanı henüz
kaydetmediniz ya da çok alakasız bir dizindeki resmi dokümana eklemek istiyorsunuz demektir.
Sitenizin için varsayılan bir resimler klasörü tanımlayabilirsiniz
Bu bakımdan tanımlı siteler ile çalışmanın bazı avantajları ortaya çıkıyor. Eğer bir site tanımlaması yaptı iseniz
ve bu tanımlama sırasında resimler için bir klasör belirtip LinksRelavite to seçeneğini girdiyseniz DW sizin
için bütün URL sorunlarını halledecektir. Farklı dizindeki dosyaları dokümanınıza eklemeye kalktığınızda dahi
bunu site içerisindeki resimler klasörüne taşıyacaktır.
Bu resimi ste içerisine kopyalamak için Evet demelsiniz
Eğer site için varsayılan resimler klasörü belirtmezseniz sizi uyararak bu resimi taşıyıp taşımak istemediğiniz
soracaktır. Eğer bu soruya Hayır derseniz resim adresi "file://C./Program Files/..." gibi atanacaktır.
Buda dosyaları sunucuya gönderdiğinizde resimlerin görünmemesine neden olacaktır. Sonrası
malûm, yeni başlayanların en çok karşılaştığı sorun; "anaa resimler nerde yaa ?" Eğer böyle bi sorunla
karşılamak istemiyorsanız resim eklerken bu URL kısmına dikkat edeceksiniz. Aynı
şekilde Properties panelinden SRC kısmından da olaya müdahale edebilmeniz mümkün tabi.
Hatalı bir SRC adresi file:// şeklinde başlamaktadır
Resmimizi seçme ve site içerisine taşıma işlemleri bittikten sonra DW bize resim ile ilgili ilk bilgileri
girebileceğimiz bir iletişim penceresi açacaktır.
Resim için bir alt metin girebileceğiniz iletişim penceresi
Bu iletişim penceresi opsiyonel bir seçenektir. Eski DW sürümlerinde bu pencere çıkmadan doğrudan resmi
sayfamıza dâhil ediyordu. BW 8 de bunu varsayılan olarak açık hale getirmişler. Aslında faydalı bir araç, resmi
eklerken alternate metin (alt text) girmenize olanak sağlıyor. Alt metni olmayan resimler ise W3C
standartlarına göre geçersiz resimler olarak değerlendiriliyor. Bu bakımdan faydalı bir özellik ama
isterseniz Edit / Preferences menüsünden ulaşabildiğiniz ayarlar kısmından Accessibilitysekmesi altından
hangi nesneler için bu iletişim penceresinin görüntülenmesi gerektiğini seçebilirsiniz.
Resim dosyalarının türleri GIF, JPEG, ya da PNG den başka bir şey olmamalı. Bunlar tüm tarayıcılar ve web
teknolojileri tarafından desteklenen standartlardır ve az yer kaplarlar. Ayrıca dosya isimleri Türkçe
karakter ve boşluk içermemelidir. (ust_kose_1.gif gibi isimler kullanmalısınız.)
Resimleri biçimlendirmek
Eklediğiniz resimler üzerinde kayıtsız şartsız egemenlik için her zamanki gibi yine Properties panelini
kullanabiliyoruz. Sayfanıza bir resim eklediğinizde veya sayfadaki bir resmin üzerine
tıkladığınızda Properites paneli aşağıdaki görünümü alacaktır. Paneldeki bileşenler şu şekilde sıralanabilir;
Resimler ile ilgili düzenlemeleri Properties panelinden yapabiliriz
 Image ID: Resmimizin sayfa içerisindeki benzersiz ve sadece bu resme özel bir ismi diyebiliriz. Türkçe
karakter ve boşluk içermeyen bir isim verebilirsiniz.
 W: Piksel cinsinden genişlik.
 H: Piksel cinsinden yükseklik.
 Link: Resme link vermek için buraya linki girin yada kutucuğun yanındaki Klasör resmine
tıklayarak Browse / Göz at penceresini kullanın.
 Src: Resmin adresi, eğer "file://C:/Program Files ...." Gibi bir ifadeyle başlıyorsa sunucuya
gönderdiğinizde resimler görünmeyecektir.
 Edit & Resim düzenleme seçenekleri: Bu seçeneklerden bazılarına (Contrast ve Sharpen gibi)
tıkladığınızda anlamadığım bir sebepten dolayı DW açılması gereken iletişim penceresini doküman
pencerelerinin arkasına atmakta ve pencereye erişiminizi engellemektedir. Herhangi bir yere
tıklamanıza da izin vermediğinden sizi zor bir duruma sokmaktadır. Ben sorunu çözmek için bir kere
görev çubuğundaki (taskbar) simge durumundaki DW a tıklıyorum umarım sizlere de yardımcı olur.
o Edit: Eğer sisteminizde kuruluysa Fireworks'ü açarak resim üzerinde düzenlemeler
yapmanızı sağlar.
o Optimize: Sisteminizde Fireworks kurulu ise resmi sıkıştırıp boyutunu azaltır ve optimize
eder
o Crop: Eğer resim gereğinden fazla büyükse ve istediğiniz kısım resmin sadece bir
bölümünde ise bu araç ile resmi kırpabilirsiniz.
o Resample: Resmi yeniden boyutlandırmaya yarar.
o Brightness and Contrast: Resme kontrast ve parlaklık ayarı yapmanızı sağlar.
o Sharpen: Resimleri netleştirmek ve hatları keskinleştirmek için kullanabileceğiniz bir araç.
 Alt: Alt text olarak isimlendirilen fare ile resmin üzerine gidildiğinde fare imlecinin kenarında çıkan
açıklama kutucuğunda görünen metin.
 Image Map seçenekleri: Resmin sadece bir bölgesine link vermek için kullandığımız Image Map
olayına hükmetmemizi sağlayan seçim araçları.
 H Space: Resmin etrafındaki diğer materyallere (metin veya diğer resimlere) olan yatay uzaklığı
(piksel olarak).
 V Space: Resmin etrafındaki diğer materyallere (metin veya diğer resimlere) olan dikey uzaklığı
(piksel olarak).
 Target: Eğer resme link verdiyseniz link ile ilgili Target ayarını buradan seçebiliyoruz.
 Low src: Resim yüklenmeden önce o resmin yerinde görünecek geçiş resmi diyebiliriz. Örneğin bir
resim galerisinde bir resim görünmesi gereken yere o resmin 2 bit versiyonunu (Siyah-beyaz) low
src olarak verebilirsiniz. Böylece ziyaretçi resmin yüklendiğinde nasıl bir şey olacağı konusunda fikir
sahibi olabilir.
 Border: Çerçeve, eğer resme link verdiyseniz bu otomatik olarak 0 olarak atanacaktır. Ama isterseniz
bunu piksel cinsinden girip farklı görünüşler elde edebilirsiniz.
 Align: Resmin hizalanmasıyla ilgili ayarları bu menüden yapıyoruz.
 Sağa yasla-Ortala-Sola yasla: yine hizalama ama biraz daha farklı bir opsiyon.
 Class: Resmi etkilemesini istediğiniz CSS stili.
Image Map ile çalışmak
Image Map nedir? ilk önce bu soruyu cevaplayalım; diyelim resmin sadece bir bölgesine link vermeniz
gerekiyor. (Örneğin bir dünya haritasında sadece Türkiye'ye link vereceksiniz) İşte böyle işlemler için Image
Map'leri kullanıyoruz.
Zaten kelime anlamı itibariyle "harita" olan Image Map'ler bir nevi resmi haritalayarak (işte yeni bir terim
doğdu haritalamak :) belli bölgeleri seçmenize olanak sağlıyor.
Image map eklemek için:
Resmi seçtikten sonra resimle ilgili ayarları yaptığımız Property Inspector üzerinde sol alt köşede
bulunan Map kısmını kullanacağız. Aynı şekilde Insert paneldekiImage düğmesinin alt
düğmelerindeki Image map seçeneklerinden birini de kullanabilirsiniz
Properties panelinden resimlere Image map ekleyebiliriz
Buradaki üç farklı mapping yönteminden birini seçtikten sonra resminizin üzerinde map'lerinizi seçmeye
başlayabilirsiniz. Siyah ok simgesi ile ifade edilen düğme ise;Pointer Hotspot tool olarak isimlendirilen ve
sonradan, mapler üzerinde köşelerinden tutup çekiştirerek değişiklik yapmaya yarayan bir araçtır.
Resmin link vermek istediğiniz bölgelerini dikkatli bir şekilde seçiyoruz
Map işlemi yapılan bölgeler açık mavi bir kısım olarak işaretlenecektir. Bunları ayrı ayrı seçerek tek tek
ayarlarını yapabilirsiniz. Buradaki ayarlar bir resim dosyası için yapılan ayarların aynısıdır.
Mapller için ilgili düzenlemeleri Properties panelinden yapabilirsiniz
Örneğin bir resmi seçtikten sonra resimde önceden tanımlanmış olan bir image map bölgesine bir kez
tıkladığınızda map bölgesinin kenarlarında ufak tutamaçlar çıkacaktır. Bunlarla map bölgesini tekrar
boyutlandırabilirsiniz. Veya sadece bu bölgeye ait link vermek için Property Inspector üzerinde "Link"
kısmına ilgili dosyanın adresini yazabilirsiniz. Bir map bölgesini seçip klavyeden "Del" tuşuna basarsanız map
bölgesi silinecektir.
Fireworks'den Dreamweaver'a
Fireworks kullanarak hazırladığınız bir dokümanı Export seçeneği ile HTML olarak export ettiğinizde bunu o
anda DW'da çalıştığınız dokümana dâhil etmek isteyebilirsiniz. Bu gibi durumlarda Insert Fireworks
HTML seçeneği çok iş görecektir.
Firewokrs HTML dosyalarını sayfaya eklemek için:
Dokümanınızı Fireworks'ün derlediği HTML dosyası ile aynı dizine kaydedin ve Insert panelde yer
alan Image düğmesinin bir alt düğmesi olan Firewokrs HTMLdüğmesi ile ya da, Insert / Image Objects
/ Fireworks HTML menüsü ile ilgili iletişim penceresini açın.
Insert panelden Image düğmesi altından Fireworks HTML alt düğmesine tıklıyoruz
Yapmanız gereken tek şey Firewokrs tarafından derlenmiş HTML dosyasını seçmektir. Eğer dosya DW'da
çalıştığınız dokümana dâhil edildikten sonra var olan Fireworks dosyasını silmek istiyorsanız "Delete file
after insertion" seçeneğini işaretlemelisiniz.
Insert Fireworks HTML iletişim penceresi
Resim galerileri oluşturmak
Elinizde çok sayıda resim varsa ve bunları kullanıcılara düzenli bir yapı ve/veya galeri şeklinde sunmak
istiyorsanız DW'ın içerisinde gelen "Create Web Photo Album" bileşenini (Commands menüsü altında
bulabilirsiniz) kullanabilirsiniz.
Yeni bir foto albüm yapmak için;
Öncelikle yeni bir doküman açın ve bunu tanımlanmış bir sitenin altına kaydedin.
Bu Commandı kullanmadan önce dokümanınızı mutlaka kaydetmiş olmalısınız. Öte yandan bu kayıtlı
doküman önceden tanımlanmış bir sitenin altında yer almalıdır. Sebebi, kaynak olarak seçtiğiniz
dosyaların hedef olarak seçtiğiniz dizine kopyalanması sırasında resim ve dosya link yollarının doğru ve
sorunsuz bir şekilde olması içindir. Aksi taktirde dosya yolları C:/Program Files/Macromedia .... Şeklinde
olacaktır ve sizin bilgisayarınızda çalışmasına rağmen sunucuda çalışmayacaktır.
Fotoğraf albümünün oluşturulabilmesi için sisteminizde Fireworks'ün de kurulu olması gerekmektedir.
Ardından Commands / Create Web Photo Album menüsü ile albüm bileşenini çalıştırıyoruz. Açılan
iletişim penceresinde sırayla;
Fotoğraf albümü ekleme iletişim penceresi
 Photo Album Title: Albümünüzün başlığı.
 Subheading Info: Albümünüz ile ilgili kısa bir açıklama.
 Other Info: Diğer açıklama metni.
 Source Image Folder: Albüm haline getirilecek orijinal resim dosyalarının olduğu klasör.
 Destination Folder: Albümün oluşturulacağı hedef klasör.
 Thumbnail Size: Resimlerin ön izlemeleri olan ufak resimlerin hangi boyutlarda (piksel cinsinden)
olacağını belirtir.
 Show Filenames: Resim dosyalarının isimlerini altlarında görüntülenmesini sağlar. Büyük projelerde
bunlar resimler için açıklayıcı bilgiler içerebilir.
 Columns: Küçük resimlerin kaç kolon şeklinde sayfaya yerleştireceğini belirtir.
 Thumbnail Format: Küçük resimlerin formatının ne olacağını belirler. (Genelde GIF küçük resimlerin
daha az yer kaplamasını sağlayacaktır)
 Photo Format: Orijinal resimlerin hangi formatta olacaklarını belirtir. (Bunlar için kullanacağınız format
oldukça önemlidir. Zira resmin yüklenmesi ne kadar kısa sürerse ziyaretçi için o kadar cazip
olacaktır. Eğer resimlerinizde fazla kontrast/renk varsa format olarak JPEG kullanmak akıllıca
olacaktır.)
 Scale: Büyük resimlerin orijinallerine göre hangi boyutlarda kalacağını belirtir. Eğer resimlerin büyük
hallerinin belli bir oranda küçültülmesini istiyorsanız buraya bu oranı girerek resimleri
küçültebilirsiniz.
 Create Navigation Page for Each photo: Her resim için ayrı bir HTML dosyası oluşturarak albüm
içerisinde gezintinin en üst düzeyde olmasını sağlar.
Gerekli bilgileri girdikten sonra OK e tıkladığınızda Fireworks açık değilse otomatik olarak açılıp işleme
başlayacaktır. Seçtiğiniz resimler sırayla açılıp işlenecektir. Fireworks ise size durumu küçük bir iletişim
penceresi yardımı ile bildirecektir.
Fireworks resimleri düzenlerken...
İşlem tamamlandığında DW'da Album Created mesajı görünecektir. Resim dosyanız yaratılmıştır. Sayfayı
kaydedip deneyebilirsiniz.
Fotoğraf galerisinin bitmiş hali
Dreamweaver ve Rollover Resimler İle Çalışmak
Çok resmi oldu biraz basitleştirirsek fareyle bir resmin veya linkin üzerine gittiğinizde başka bir resmin
görünmesi olayıdır.Rollover kavramını bu şekilde açıkladıktan sonra bir örnekle olayı pekiştirelim, bir rollover
resim eklemek için;
Yeni bir doküman açın bunu kaydedin. Arkasından bu dokümanı kaydettiğiniz dizinle aynı dizine ya da alt
dizinlerinden birine (images/ klasörü olabilir mesela) kullanacağınız rollover image için gerekli resim
dosyalarını kaydetmelisiniz. İki adet resim dosyasına ihtiyacımız var; Orginal image ve rollover image.
Resim dosyalarımızı hazırladıktan sonra rollover image operasyonuna başlayabiliriz;
Insert panelden "Common" sekmesi altında yer alan Image düğmesinin bir alt düğmesi olan Rollover
image düğmesine yada Insert / Image Object / Rollover image menüsü ile Rollover image iletişim
penceresini açıyoruz.
Insert Panelden Rollover Image düğmesine tıklıyoruz
Şimdi ayarları yapmaya başlıyoruz, sırasıyla;
Insert Rollover Image iletişim penceresi
 İmage Name: Rollover image objesine bir isim vermek zorundayız. Buna spesifik bir isim verebilirsiniz
fakat çok da önemli değil DW bizim için zaten bir isim vermiş. Eğer sayfa içerisinde çok fazla rollover
resim kullandıysanız anlamlı isimler kullanmak işleri kolaylaştırabilir.
 Orginal image: Adından da anlaşılacağı üzere orijinal resim dosyasını seçiyoruz. Bu resim linkimizin
asıl resmini teşkil ediyor. Yani, fare imleci linkin üzerinde değilken görünecek resim.
 Rollover image: Bu ise fare imleci linkin üzerine gittiğinde görünecek resmi ifade ediyor.
 Preload Rollover image: Rollover resimlerin yüklenmesi uzun sürebilir ve bu süre zarfında ziyaretçi
linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye çalışılacak bu ise hoş
olmayan bir görüntüye sebep olacaktır. İşte bu seçeneği kullanarak rollover image arka planda
yükleninceye kadar, orginal image'in ekranda sabit kalmasını sağlayabiliriz. Böylece bu sorun
ortadan kalkmış olur.
 Altermate Text: Daha önce anlattığımız Alt Text hadisesi, resmin üzerine fare ile gidildiğinde görünen
yazı, açıklama vs...
 When Clicked Goto URL: Eğer rollover resmimize link vermek istiyorsak buraya ilgili dosyanın
adresini yazabiliriz yada "Browse..." a tıklayıp dosya seçebiliriz.
Orgina image ve Rollover image resim dosyalarının adresleri yine resim ekleme konusunda anlatılan ilkeler
doğrultusunda olmalıdır.
Tüm ayarları uygun şekilde yaptıktan sonra OK diyip rollover resmimizi sayfamıza dâhil edebiliriz. Rollover
resimler DW içinde sabit görüneceklerdir. Dokümanınızı kaydedip Web tarayıcınız ile sayfayı açarak test
edebilirsiniz.
Örnek bir rollover image çalışmasının görünümü
Rollover image ve Orginal image dosyaları arasında bir bütünlük olması çoğu zaman çok profesyonel
etkiler ortaya çıkmasına sebep olabilir. Örneğin yazı renklerinin veya arka fon renklerinin değişmesi veya
nesnelerin deforme olması her zaman için iyi bir izlenim bırakan efektlerdir.
Navigation Bar kullanımı
Sitenizde ziyaretçilerin kolayca dolaşabilmeleri ve aradıkları bölümü rahatça bulabilmeleri için bir navigasyon
menüsü kullanmak en mantıklı çözümdür. Bu menüyü sadece tablo ve text-linkleri kullanarak yapabileceğiniz
gibi göze daha hoş görünmesi adına resim ve/veya rollover resimler ile de yapabilirsiniz.
Eğer navigasyon menüsü için rollover tabanlı bir çözüm düşünüyorsanız her link için ayrı ayrı rollover resim
eklemek zor olacaktır. Bu gibi durumlarda DW'ın kullanışlı araçlarından biri olan Insert Navigation Bar'ı
kullanabilirsiniz.
Navigation bar kullanmak için;
Yeni bir doküman açın ve kaydedin. Rollover resimler ile çalışırken yaptığımız gibi resim dosyalarını önceden
hazırlamış olmamız gerekmektedir. Hazırlanması gereken resimler şu şekilde sıralanabilir;
 Up image: Rollover resimlerde gördüğümüz Orginal image ile aynı işleve sahip resim dosyasını
belirtir. Yani fare imleci linkin üzerinde değilken görünene resim.
 Over image: Fare imleci linkin üzerine geldiğinde görünecek resmi belirtir.
 Down image: Fare ile linke tıklandığı anda görünecek resmi belirtir. (Genelde Over image deki ile
aynı dosyayı kullanmak iyi bir sonuç verir fakat farklı da olabilirler)
 Over While Down Image: Bu ise Over Image'in linke tıklandıktan sonraki versiyonu diyebiliriz. Yani
diyelim ki linke bir kez tıklandı ve tıklandığı anda DownImage devreye girdi, işte bundan sonra
Over image devre dışı kalacağından onun yerini bu dosya alır yani işlevi Over image ile aynıdır.
Yeri gelmişken belirtelim Down image ve Over While Down Image, Frame kullanılarak yapılmış
navigasyon menülerinde bir işleve sahiptir. Yani navigasyon menüsünün sabit kaldığı ve değişmediği durumlar
için geçerlidir.
Resim dosyalarını isimlendirirken son ekler kullanmak işleri oldukça kolaylaştıracaktır. Örneğin navigasyon
barın ana sayfa linki için;
Up image: menu_anasayfa_a.gif
Over image: menu_anasayfa_b.gif
Down image: menu_anasayfa_c.gif
Over While Down Image: menu_anasayfa_d.gif
Gibi bir isimlendirme ile karışıklıklardan kurtulabilirsiniz.
Dosyalarımız da hazırsa navigation menümüzü yapalım. Insert paneldeki Image düğmesinin bir alt düğmesi
olan Navigation Bar düğmesi veya Insert / Image Object / Navigation Bar menüsü ile sayfanıza
navigasyon menüsü eklemeye başlayabilirsiniz.
Insert panelden Navigation Bar düğmesine tıklıyoruz
Şimdi ayarları yapmaya başlıyoruz, sırasıyla;
Insert Navigation Bar iletişim penceresi
 Nav. Bar Elements: Navigasyon menüsü öğelerini belirtir. Buradan + ve - düğmelerini kullanarak yeni
bir öğe ekleyebilir ya da çıkarabilirsiniz. Düzenlemek istediğiniz öğenin üzerine tıklamanız yeterli
olacaktır.
 Element Name: Her öğenin bir ismi olmalıdır. Buraya öğeyi en iyi tanımlayan ismi girmelisiniz. Boşluk
ve Türkçe karakter kullanmamaya dikkat etmelisiniz.
 Up, Over, Down, Over While Down image'lerin neler olduğunu yukarda belirtmiştik. Uygun
resimleri seçmelisiniz.
 Altermate Text: Daha önce anlattığımız Alt Text hadisesi, resmin üzerine fare ile gidildiğinde görünen
yazı, açıklama vs...
 When Clicked Goto URL: Eğer elemente link vermek istiyorsak buraya ilgili dosyanın adresini
yazabiliriz yada "Browse..." a tıklayıp dosya seçebiliriz.
o ..in: Bu kısım Target kısmıdır. Kullandığınız Framelere göre bunu nasıl düzenleyeceğiniz
Frame konusunda ayrıntılı bir biçimde anlatılmıştır.
 Options
o Preload images : Rollover resimlerin yüklenmesi uzun sürebilir, ve bu süre zarfında
ziyaretçi linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye çalışılacak
bu ise hoş olmayan bir görüntüye sebep olacaktır. İşte bu seçeneği kullanarak Over
image arka planda yükleninceye kadar, Up image'in ekranda sabit kalmasını
sağlayabiliriz. Böylece bu sorun ortadan kalkmış olur.
o Show Down Image Initialy: Bir öğeye tıklandığında ziyaretçinin hangi sayfayı gezdiğini
vurgulamak için bu seçeneği kullanabiliriz. Örneğin ziyaretçi linkler kısmını gezerken Linkler
elementinin Down image gösterilmelidir ki, ziyaretçi o anda gezdiği sayfanın linkler sayfası
olduğunu anlayabilsin. Eğer Frame kullanmıyorsanız bu seçenek ile navigasyon menüsü
eklediğiniz sayfaya ait elemente tıklayıp bu seçeneği işaretlerseniz bu sayfada bu sayfaya
ait elementin Down image'i varsayılan olarak yüklenecektir. Bu şekilde anlatınca biraz
karışık oluyor fakat bir örnek yapıp daha iyi anlayabilirsiniz.
 Insert : Horizontaly (yatay) - Verticaly (dikey) burada navigasyon menüsünün yatay mı yoksa
dikey mi olacağını belirtiyoruz.
 Use Table: her zaman işaretli kalması gereken bir noktadır. Menünün daha düzgün görünmesini
sağlayacaktır.
Eğer baştan Show Down Image Initialy seçeneğini işaretlemeyi unuttuysanız Nav barı ekledikten sonra
ilgili elementin üzerine bir kez tıklayıp Behaviors Panelden / Set Nav Bar Image seçeneğini
kullanabilirsiniz.
Tüm ayarları uygun bir biçimde yaptıysanız OK diyip vanigasyon barınızı sayfaya dahil edebiliriz. . Menü
resimleri DW içinde sabit görüneceklerdir. Dokümanınızı kaydedip Web tarayıcınız ile sayfayı açarak test
edebilirsiniz.
Her sayfada sadece bir Nav. Bar kullanabilirsiniz. Önceden eklediğiniz bir Nav. Bar üzerinde değişiklik yapmak
için; tekrar Insert / Oöage Objects / Navigation Barmenüsü ile yeni bir nav. Bar ekliyormuş gibi
yapmalısınız. DW size "Each page can only have one Navigation Bar, an done already exist on this
page Would you like to modify the existing one?" şeklinde sayfada zaten var olan nav. Barı
düzenlemek isteyip istemediğiniz soracaktır. Buna olumlu yanıt vererek önceden eklediğiniz nav. Barı
düzenleyebilirsiniz.
Her sayfada sadece bir navigasyon menüsü olabilir
Dreamweaver ile Resim Değiştirmece
Zaman zaman güzel örneklerini gördüğümüz bu resim değiştirmece olayını Dreamweaver ile oldukça kolay
yapabilmekteyiz. Rollover resimler konusunda bir resmin üzerine gidildiğinde yerine başka bir resim çıkmasını
nasıl yapacağımızı görmüştük. Şimdi ise bir resim ya da linkin üzerine gidildiğinde (veya tıklandığında) başka
bir resmin / resimlerin değiştirilmesini göreceğiz. Olayın temelini "Swap Image"
isimli Behavior oluşturmakta. Yani rollover resimlerde aslında birer "Swap Image" olayıdır (event) diyebiliriz.
Bu makalede yapacağımız örneğin son halini görmek için buraya, Photoshop dosyasının da dahil olduğu tüm
uygulamayı indirmek için buraya tıklayabilirsiniz. Evet, örneği çalıştırdığınızda ne yapmaya çalıştığımızı daha
iyi göreceksiniz. Neyse lafı fazla uzatmadan uygulamaya geçelim.
Önce materyalleri hazırlayalım
İşlemlere başlamadan önce grafik dosyalarınızı hazırlamanız gerekmektedir. Ben Photoshop ile basit bir
tasarım yapıp "Slice tool" ile resmi dilimlere ayırdım
Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz
Ardından File / Save for web menüsünden kaydedeceğim resim dosyası türünü ve kalitesini belirleyip
"Save" düğmesine bastım.
File / Save for web menüsünden çalışmamızı kaydediyoruz
Son olarak dosya kayıt iletişim penceresinde "Kayıt türü" olarak "HTML and images (*.html)" seçeneğini
seçip tüm dilimleri (All slices) kaydettim.
Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz
Böylece Photoshop çalışmamızı bir web sayfasına aktarmış olduk. Seçtiğimiz dizinde bir ".html" dokümanı ve
"images" klasörü içerisinde de dilimlenmiş olan çalışmamızın grafik dosyaları kaydedilecektir. Sonrasında bu
HTML dokümanını DW ile açıp ilgili değişiklikleri yapacağız. Sizde kendi ihtiyacınıza yönelik grafik dosyalarını
hazırlayarak konuyu takip edebilirsiniz.
Çalışmamızı Dreamweaver içerisine aktardık
Dokümanı DW ile açtığınızda göreceğiniz üzere Photoshop dilimleri bir tablo içerisinde yerleştirip düzgün
görünmesini sağlamaktadır. Bizde bu tabloyu tasarımımızda istediğimiz yere kopyalayabilirsiniz. Kopyala /
Yapıştır işlemleri sırasında tablonun ve hücrelerin özelliklerini değiştirip bozmamaya özen göstermelisiniz, aksi
takdirde kaymalar olabilir. Beyaz boş dilimleri silerek sayfanın yüklenme boyutunu azaltabilirsiniz, fakat
sildiğiniz bu düz beyaz dilimlerin bulunduğu tablo hücrelerinin boyutlarını sildiğiniz dilim boyutu olarak
yükseklik ve genişlik cinsinden girmelisiniz. Böylece deformasyonu önleyebilirsiniz.
Eğer tabloyu kopyaladığınız yeni sayfada dilimler arasında boşluklar olursa yeni bir stil yaratıp border,
padding, magrin değerlerini 0 (sıfır) olarak girin, font size ve line heidght değerlerini de 1 piksel olarak atayın
ve bu stili tabloya uygulayın. Böylece genişlemeleri önlemiş olacaksınız.
Genişlemelere engel olmak için gereken ilgili CSS stili için kaynak kod şu şekilde olmalı:
1. .TabloIcinStil{
2. font-size: 1px;
3. line-height: 1px;
4. border-collapse: collapse;
5. margin: 0px;
6. padding: 0px;
7. border: 0px;
8. }
9.
Neyse işin hazırlık kısmı bu şekilde sizde kendi uygulamalarınızı yapıp bu aşamaya geldiyseniz şimdi asıl
konumuza dönelim.
Resim Değiştirmece (Swap Image)
Şimdi bu örnekteki tasarımımızda menü linkleri bulunmakta (Hakkımızda, Ürünlerimiz, Projelerimiz...).
Resimdeki ilgili dilimleri seçip ilgili linkleri atıyoruz.
İlgili dilimi seçip Properties panelinden link atıyoruz
Bu şekilde tüm menü elemanlarına link atadıktan sonra resim değiştirme işlemine geçebiliriz. Şimdi burada
yapacağımız örnekte menü elemanlarından birinin üzerine gittiğimizde ortadaki alan değişecek ve ilgili
bölümün resmi çıkacak.
Burada yapmamız gereken ek bir işlem var oda değişimin yapılacağı resimlere birer ID atamaktır. Böylece
hangi resmin ne zaman değişeceğini ID sini zikrederek belirtebileceğiz. Bunun için, DW'da resimlerin üzerine
bir kez tıklayıp seçtikten sonra Properties panelindeki ID bölümüne resim ile ilgili bir ID girmeliyiz. ID
girerken Türkçe karakter ve özel karakterler girmemeye ve "_ -" gibi ifadeler kullanmamaya özen
göstermelisiniz.
Değişecek resimlere ID atıyoruz
Olaya dahil olacak bütün resimlere birer ID atadıktan sonra ortadaki resim olan ve değişecek resme de ID
atmayı unutmadığımızdan emin olarak işleme devam edebiliriz.
Eğer açık değilse Window / Behaviors (Shift+F4) menüsü ile Behaviors panelini açıyoruz. Şimdi menü
elemanlarından "Hakkımızda" linkinin üzerine bir kez tıklıyor ve seçiyoruz. Seçim işlemini "Tag selector"
panelinden de yapabiliriz.
Seçim işlemini Tag selector panelinden de yapabiliriz.
Ardından Behaviors panelindeki artı işaretine (+) tıklayıp açılan menüden "Swap Image" seçeneğini
seçiyoruz.
Behaviors panelinden Swap Image seçeneğine tıklıyoruz.
Açılan iletişim penceresinde doküman içerisindeki resimlerin listelendiğini göreceksiniz. Buradan "Hakkımızda"
menü elemanının üzerine gelindiğinde değişecek kısımda çıkmasını istediğiniz resmi seçip "Set soruce to"
bölümünde "Browse / Gözat" düğmesine tıklayıp ilgili resmi seçiyoruz.
Swap image iletişim penceresi
"Preload images" seçeneği doküman yüklenirken resimlerin arka fonda yüklenmesini ve linklerin üzerine
gidildiğinde henüz yüklenmemiş resim olmamasını sağlayan bir seçenektir. "Restore images onMouseOut"
seçeneği ise fare imlecinin resim üzerinden çekilmesi durumunda tekrar eski resmin yerine gelmesini belirtir.
İlgili ayarları yapıp "OK" dediğinizde Behaviors panelde bu link için 2 olay (event) atandığını göreceksiniz.
Bunlardan
 "onMosueOver" (fare imleci üzerine geldiğinde) olayına atanan "Swap image"; resim değiştirme
işlemini yapan fonksiyonu çağır
 "onMouseOut" (fare imleci üzerinden gidince) "Swap image Restore"; tekrar eski resmin çıkmasını
sağlayan fonksiyonu çağırır.
İşlem sonrası Behaviors panelin görünümü
Dokümanı kaydedip tarayıcı ile görüntülediğinizde ilgili link üzerine fare imleci ile gidildiğinde ortadaki resmin
değiştiğini göreceksiniz.
Tüm linkler için bu işlemi tekrarlayarak değişmesini istediğiniz resimleri atayabilirsiniz. Çalışmanın son halini
görmek için buraya tıklayınız. Bu örnekte sadece bir resmin değişmesini sağladık fakat aynı anda birkaç
resmin değişmesini de sağlamak mümkündür. "Swap image" iletişim penceresinde listeden değişik resimler
seçip teker teker "Set source to" ayarı yaparsanız aynı anda çoklu resim değişimi sağlayabilirsiniz. Örneğin
sitemizde kullandığımız oylama sisteminde böyle çoklu bir resim değiştirme işlemi yapılmaktadır. Sizde bir
örnek yaparak işleyişi daha iyi kavrayabilirsiniz.
Oylama sisteminde aynı anda 5 yıldız birden değişiyor
Dreamweaver ve Katmanlar
Alışalı gelmiş statik tablo ve paragraf mantığının aksine katmanlar hareket edebilene hoplayıp zıplayabilen
yapıları ile bizlere üstün hareket olanağı sağlamaktadırlar. Öte yandan kullanım zorluğu nedeniyle pek de
pratik bir çözüm gibi görülmezler. Daha önce de belirttiğimiz gibi daha çok DHTML uygulamalarında ileri çıkan
bir bileşendir.
Yeni başlayan arkadaşların sayfadaki objeleri istedikleri sayfada istedikleri yere taşıma kolaylığı nedeniyle
sıklıkla katmanlara başvurmaları sayfada çözünürlük farklarından doğan görüntü kaymaları ve bozulmalarına
sebep olmaktadır. CSS stiller bölümünde anlatılan ve yeni bir stil yaratırken CSS özellikleri
penceresinden Positioningsekmesi altında yer alan "Type" kısmı "Absolute" olan katmanlar ile yapılan
tasarımlar hiçbir zaman sağlıklı sonuçlar vermezler.
Stil yaratma penceresi, Position bölümü
Sayfa tasarımlarında katman sıkça kullanılan bir teknik olmakla beraber DIV olarak tabir edilen katman türleri
kullanılmaktadır. Konu ile ilgili makaleler ilerleyen günlerde sitemizde yayınlanacaktır.
Sayfaya yeni bir katman eklemek
DW ile sayfalarımıza nasıl yeni bir katman ekleyeceğimizi öğreneceğiz. Öncelikle yeni bir doküman açın ve
kaydedin
Daha sonra Insert paneldeki Layout sekmesi altında yer alan Draw Layer seçeneği ile istediğiniz boyutta
bir katman çizebilir ya da Insert / Layer seçeneği ile sayfanıza Absolute olarak pozisyonlandırılmış bir
katman ekleyip biçimlendirebilirsiniz.
Dreaw layer düğmesi ile bir katman çizebilirsiniz
Draw Layer seçeneğine tıkladığınız anda fare imleci + işaretine dönüşecektir ve size serbest bir dikdörtgen
çizme olanağı sağlayacaktır.
Dreamweaver içerisinde katmanların görünümü
Ayrıca Insert Panelde Common ve Layout sekmelerinde yer alan "Insert Dıv Tag" düğmesi ile doğrudan
DIV ekleyebilirsiniz. Bu DIV'ler Draw layer seçeneğinin aksine durağan içerik elemanları olup sayfa ara yüz
tasarımının temelini oluşturmaktadırlar.
Insert DIV tag düğmesi ile sayfaya DIV ekleyebilirsiniz
DW, DIV için bir iletişim penceresini ekrana getirip bizden ilgili ayarları yapmamızı isteyecektir.
Insert DIV tag iletişim penceresi
Burada geçen Insert seçenekleri DIV tagının sayfaya nasıl ekleneceğini belirtiyor. "Wrap around
selection" seçeneği seçili olan içeriğin etrafını saran bir DIVekleyecektir. Aynı şekilde listedeki diğer
seçenekleri de deneyerek amacınıza uygun olan ekleme türünü seçebilirsiniz.
Katmanlar ile ilgili düzenleme ve biçimlendirmelerin çoğunu Property Inspector üzerinden yapıyoruz. (bu
sadece katmanlar için değil resim, tablo, resim ve ya flash objeleri gibi birçok bileşen içinde geçerli).
Bir katmanı seçmek için o katmanın kenarlarından birine tıklamanız yeterli olacaktır. Katmanı seçtiğiniz anda
katmanın kenarlarında ve köşelerinde boyutlandırma için tutamaçlar görünecektir. Bunları kullanarak
katmanınızı tekrardan boyutlandırabiliriz.
Bir katman seçtiğinizde Properties paneli aşağıdaki hali alacaktır. Bileşenleri şu şekilde sıralanabilir;
Katmanlar ile ilgili değişiklikleri Properties panelinden yapabilirsiniz
 LayerID: Sadece bu katmana özgü özel bir isim.
 T: Katmanın üst kenara olan uzaklığı.
 L: Katmanın sol kenara olan uzaklığı.
 H: Katmanın yüksekliği.
 W: Katmanın genişliği.
 Z-index: Katmanların tarayıcıda görünme önceliği diyebiliriz. Z-index'i büyük olan katman üstte küçük
olan katman altta görüntülenir.
 Vis: Katmanın görünürlük türü. Eğer katmanın gizli olmasını istiyorsanız bunu hidden olarak
ayarlamalısınız.
 Bg image: Katmanın arka fon resmi atamamıza yarar.
 Bg color: Katmanın arka fon rengi atamamıza yarar.
 Overflow: Çok işinize yarayacağına inandığım bir. Bu seçenek katmanımızın içerisindeki içeriğin nasıl
görüntüleneceğini belirtiyor. Örneğin 100 piksel yüksekliğinde bir katmanımız var ve içerisinde
oldukça uzun bir metnimiz var. Metnin nasıl görüntülenmesini istiyorsanız buraya "Visible, hidden,
scroll veyaAuto" seçeneklerinde size uygun olanı seçerek belirleyebilirsiniz. Auto seçeneği
wordwrap özelliği ile katmanı adeta bir iFramemişcesine biçimlendirerek harika bir özellik sunuyor.
Mutlaka deneyin.
 Clip: Katmanın içerisindeki içeriğin görüntülenebilir alanını alt, üst, sağ ve sol kenarlara olan
uzaklıklarını piksel cinsinden belirtmenizi saplar. (13 14 15)
Katma-CSS ilişkisi
CSS HTML'in ve dolayısı ile DHTML'in vazgeçilmez bir bileşeni olarak katmanlar ile birlikte çok karşımıza
çıkmakta. Bu iki bileşeni birleştirerek oldukça kullanışlı tasarımlar ve ara yüzler yapabiliriz.
Öte yandan İlerideki konularda görebileceğiniz Hareketli katmanlar (Drag Layer Behavior'ı)
ve Timeline efektlerinde katman CSS kombinasyonlarını çokça kullanacağız
Öncelikle ihtiyaca yönelik bir CSS hazırlamış olmalıyız. Katmanlar ile kullanacağımız
stiller Border ve Background özellikleri de içerebilir ki bizim burada vurgulamak istediğimiz nokta da bu.
Nasıl yeni bir stil tanımlayacağınızı önceki konularda anlatmıştık burada sizler için bir fikir vermesi açısından
ufak bir uygulama örneği vereceğim.
Örneğin "icerikkatmani" ID'sine sahip katmanımıza özel bir stil tanımlayacağız. Bunun için "Advanced" stil
tanımlaması yapmanız ve selector olarak #icerikkatmanigirmeniz yeterli olacaktır.
Katman için bir CSS yaratıp bu stili katmana uygulayabilirsiniz
Stil tanımlamasını yaptıktan sonra DIV'i seçtikten sonra Properties panelinden Class ayarlarını
değiştirebilirsiniz.
Yarattığınız bu stil için arkafon ve çerçeve özelliklerini ayarlayarak etkili tasarımlar yapabilirsiniz
Sonuç aşağıda görünüyor. Sizde yaratıcılığınız sınırları dâhilinde kullanışlı ve estetik içerik ara yüzleri
oluşturabilirsiniz.
Örnek bir uygulama
Show-Hide Layer
Bazı durumlarda dokümandaki katmanların belli durumlarda görünüp belli durumlarda gizlenmesi isteriz. Bu
biraz DHTML teknikleri gerektiren bir husus.
Fakat DW içerisinde bu konu oldukça pratik bir hâl almış durumdadır. Sadece bir iki fare tıklaması ile onlarca
JavaScript kodu derlemeye gerek kalmaksızın bu soruna çözüm getirebiliriz.
Show-hide layer kullanmak için;
Yeni bir doküman açın ve sayfanıza farklı boyut ve özelliklerde katmanlar ekleyin (Draw layer ile) ve bunların
arka fon renklerini değiştirin. (Arka fon renklerini değiştirmemizin sebebi katmanların Show (Görünür)
ve Hide (Gizli) durumlarını daha rahat bir şekilde görebilmek içindir)
Daha sonra sayfaya bir link ekleyin. Link olarak # kullanın. Zira linkin ne olduğu çok da önemli değil. Boş
linkler kullanıyoruz çünkü JavaScript çağrılmasını sağlayacağız.
Daha sonra bu linki seçip Behaviors Panel'den Show Hide Layers seçeneği ile ilgili pencereye
ulaşabilirsiniz.
Behaviors panelden Show-hide layer seçeneğini seçiyoruz
Named Layers kısmından üzerinde değişiklik olmasını istediğiniz katmanları seçip eğer görünmesini
istiyorsanız Show, gizlenmesini istiyorsanız Hide, durumdan bir değişiklik olmasını
istemiyorsanız Default düğmelerinden herhangi birine tıklayıp bu katmanın özelliklerini belirleyebilirsiniz.
Show-hide layer iletişim penceresi
İlgili ayarları yaptıktan sonra OK dediğinizde bu linke ait behavior sayfaya eklenecektir. Linki seçip Behaviors
paneline baktığınızda Events listesinde onClick bölümündeShow-Hide Layer adında bir olay eklendiğini
görebilirsiniz. Bu tıklandığında bu olayın gerçekleşeceği anlamına gelir.
Behaviors panelden değişiklikleri yapabilir ve durumu takip edebiliriz
Hareketli layerlar
İşte katmanların en eğlenceli kısımlarından biri, artık katmanlarımız durağan değil hareketli. Üstelik biz nereye
istersek oraya gidiyorlar.
Hareketli Layerlar yapmak için;
Öncelikle sayfamıza bir katman çiziyoruz ve bunu arka fon rengi veya önceki konularda öğrendiğimiz gibi CSS
ile renklendirip görünür hale getiriyoruz. Ardından Status barda bulunan tag selector ile <body> tagını
seçiyoruz. Bu nokta oldukça önemli aksi takdirde Drag Layer menüsü aktif hale geçmiyor.
Tag selector ile BODY tagını seçmeliyiz
Arkasından Behaviors Panelden "Drag Layer" menüsüne tıklıyoruz. İşin kilit noktasını Drag Layer adlı
Behavior oluşturuyor.
Behaviors panelden Drag layer seçeneğini seçmeliyiz
Açılan iletişim penceresinden;
Drag layer iletişim penceresi
 Layer: Buradan hareket etmesini istediğimiz katmanı seçiyoruz.
 Movement: Katman hareketinin türünü seçiyoruz. Unconstrained, serbest hareketi belirtiyor. Yani
katmanı sayfada istediğiniz yere taşıyabiliyorsunuz.Constrained ise belli bir alan içerisinde
sınırlandırılmış hareketi belirtiyor.
 Drop Target: Hareketin başlangıç noktasını belirtiyor. Eğer katmanın o anki pozisyondan harekete
başlamasını istiyorsanız "Get Current Position" butonuna tıklayarak o anki pozisyonu alabilirsiniz.
 Sanp if Within... : Eğer katman hareketi belli bir değerin altındaysa tekrar eski pozisyonuna
dönmesini sağlar. Örneğin buraya 100 yazarsak Başlangıç noktasından 100 piksel uzağına kadar
katmanı hareket ettirirsek katman tekrar başlangıç noktasına dönecektir. Hareket 100 pikselden
fazla olursa katman bıraktığımız noktada kalacaktır.
Bu ayarlamaları yaptıktan sonra OK diyerek katmanlarımıza hareket kazandırabiliriz. Sayfayı kaydedip
tarayıcıda deneyin. Tarayıcıda iken katmanı tutup sürüklemeye çalışın nasıl hoş değil mi? Bu özellikle
yapabileceğiniz oyun (örneğin Puzzle) ve uygulamaları bir düşünün.
Dreamweaver iFrame Kullanımı
iFrame'i anlatmak için şöyle bir örnek verebiliriz. Sayfamızın içerisinde tıpkı bir katman (Layer) gibi istediğimiz
bir alanda harici bir sayfayı dokümanımızın içine oturtma işlemidir.
iFrame eklemek için;
Öncelikle iFrame olarak çağıracağınız doküman önceden hazırlanmış ve kaydedilmiş olmalıdır.
Daha sonra içerisine iFrame eklemek istediğiniz dokümanı DW içerisinde açıp kod görünümüne
geçip Insert panel altındaki HTML sekmesine seçiyoruz. Panelin sağ kısmına doğru Frames isimli düğmenin
bir alt düğmesi olan Floating Frame isimli düğmeye tıklıyoruz. Sayfamıza <iframe></iframe> şeklinde
bir kod eklenecektir. Aynı işlemi Insert / HTML / Frames menüsü ile de yapmak mümkün.
Insert panelden HTML sekmesi altında yer alan Frames düğmesinden sayfanıza iFrame ekleyebilirsiniz
İşin bundan sonraki kısmını DW'ın Code hints'leri ile halledebiliriz. Şimdi kürsör ile <iframe> tagının içine
giriyoruz ve tagın sonunda bir kez boşluğa basıyoruz ve code hints'ler listeleniyor.
Bu listeden SRC„yi bulup ENTER'a basıyoruz ve SRC kısmına hedef iframe dosyasının adresini giriyoruz.
iFrame için ilgili ayarları Code hints'ler sayesinde zahmetsizce yapabilirsiniz
Ya da Browse diyerek dosyayı seçebiliriz.
Browse ile kaynak dosyayı seçebilirsiniz
Daha sonra sırasıyla
 NAME="frame_adi"
 MARGINWIDTH="0" (İçeriğin kenarlara olan yatay uzaklığı)
 MARGINHEIGHT="0" (İçeriğin kenarlara olan dikey uzaklığı)
 FRAMEBORDER="0" (Çerçeve kalınlığı)
 SCROLLING="YES" (Kaydırma çubuğu)
 STYLE="WIDTH: 200; HEIGHT: 225"
Gibi ek parametreleri de yollayabilirsiniz. Kodumuzun son hali şuna benziyor;
1. <iframe style="width: 200px; height: 225px" name="frame_adi"
2. marginWidth="0" marginHeight="0" src="iframe.htm" frameBorder="0"
3. scrolling="yes"></iframe>
4.
Bu şekilde gerekli ayarları yaptıktan sonra iFrame'imiz kullanıma hazır. Sayfayı kaydedip deneyebilirsiniz.
DW içerisinde iFrameler ile çalışırken tasarım görünümünde iFrameleri aşağıdaki şekilde görürsünüz. Bu şekil
iFrame için yer ve büyüklük bakımından bize fikir vermesi açısından oldukça kullanışlı bir özellik olarak
karşımıza çıkıyor. Fakat daha önce de belirttiğimiz gibi ince ayarları ve parametreli kod görünümünden
halletmemiz gerekiyor.
iFramelerin DW içerisinde görünüşü
Bu işlem için bu kadar uğraşmak yerine piyasada ücretli veya ücretsiz bulabileceğiniz birçok eklenti ile de aynı
işlemleri çok daha zahmetsiz bir şekilde yapmanız mümkün. Dreamweaver Sayfasi dosya arşivinde de
bulabileceğiniz birçok eklenti işinizi görecektir.
Dreamweaver İçerisinde Form Kullanımı
Kavram kargaşası!
Makaleyi okuyan birçoğunuzun aklına form denildiğinde farklı şeyler geldiğini biliyorum. O yüzden bir iki
açıklamaya deyinsek iyi olacak sanırım. Web sitelerinin "İletişim", "Email" ve "Contact Us" gibi kısımları
altındaki iletişim formlarının şuan anda anlattığımız konu kapsamına girdiğini düşünebilirsiniz. Fakat biz çok
daha geniş anlamda tüm form bileşenlerini ve bunların ne işe yaradıklarını inceleyeceğiz. Öte yandan yazının
sonunda böyle bir uygulamanın da nasıl yapılacağını öğreneceğiz.
Birde Forum var tabi, o çok farklı bir konu :) Uzun uzadıya Forum nedir form ile arasında bir ilişki var mıdır,
anlatmayacağım. Zira bunu siz de az çok kestirebilirsiniz.
Şimdi DW ile formları yakından incelemeye başlayabiliriz.
Form kavramı
Formlar HTML'in ayrılmaz ve vazgeçilmez parçalarından biridir. Bu yazıda işin biraz teorik kısmına
deyineceğiz.
Formlar HTML kodlarında <form> </from> tagları ile belirtilir. Bu iki tag arasına yazılan tüm form
elemanları bu formun bir üyesidir ve bu form elementleri genelde kullanıcı odaklı veri girişleri için kullanılır.
Zaten formun genel amacı da içindeki elemanlara girilen verileri ilgili noktaya (ACTION) iletmektir. Konuyu
şematik olarak anlatmak gerekirse;
Formlar ve ziyaretçi ile sunucu arasındaki iletişimin işleyiş mantığı
Formların çalışma prensibi genel anlamda bu şekilde. Kullanıcı kendine sunulan formu doldurur ve formu web
sunucuya gönderir. (Submit işlemi) Bu aşamadan sonra sunucuda bu formdan gelen veriyi karşılayan ve
yakalayan bir program vardır. Bu program formun ACTION kısmında belirtilen ve kodlama dili sunucu taraflı
bir dil olan (PHP, ASP, JSP ya da ColdFusion gibi) bir script'tir. Sunucu tarafından bu program ile işlenen ve
gerekli yerlere ulaştırılan (veritabanı gibi) bilgiler işlendikten sonra kullanıcıya işlemin sonucu ile alakalı bir
HTML çıktısı gösterilir.
FORM parametreleri
Form tagının başlıca parametreleri şunlardır:
Properties panelinden form alanı ile ilgili değişiklikleri yapabilirsiniz
 NAME: Formun adını belirtir. Her HTML elemanı gibi her formun ve form elemanının da adı olmak
zorundadır.
 ID: Temel olarak NAME ile aynı işlevdedir. Fakat JavaScript erişimlerinde ID ile de forma erişmek
mümkündür.
 ACTION: Formun girdileri nereye yollayacağını belirtir. Bu genelde sunucu taraflı bir programlama dili
(ASP, PHP, ASP.NET, JSP, veya ColdFusion gibi) ile yazılmış bir dosyadır.
 METHOD: Girdilerin ACTION da belirtilen sayfaya nasıl yollanacağını belirtir. GET ve POST olmak
üzere iki standart mevcuttur. GET; adres satırı üzerinden verileri iletir. POST ise kullanıcıya
herhangi bir şey yansıtmadan doğrudan post değerler olarak iletir.
 TARGET: Frameler konusunda buna uzun uzun deyinmiştik. Buradaki karşılığı da aynı zaten. Formun
hangi frame'i hedef aldığını belirtir.
 ENCTYPE: Form verilerinin nasıl bir formatta yollanacağını belirtir. Örneğin form kullanarak bir dosya
yollama işlemi yapıyorsak ENCTYPE=""multipart/form-data" olarak belirtilmelidir.
Genel olarak Formlar için kullanılan parametreler bunlardı. Şimdi örnek bir Form kodu görelim:
1. <FORM ACTION="kayit.php" METHOD="post" ENCTYPE="multipart/formdata" NAME="register" ID="register">
2.
3. </FORM>
4.
Dreamweaver ile Form kullanımı
Formların genel mantığını kavradığımıza göre artık DW ile nasıl formları kullanacağımıza geçebiliriz. DW
içerisinde formlar Insert (Object) panel altındaki "Forms" sekmesinde yer almaktadır.
Insert panelde yer alan Forms sekmesi ile sayfanıza form elemanları ekleyebilirsiniz
Şimdi bu menü altındaki bileşenleri yakından tanıyalım:
 Form: Yeni bir Form yaratır. DW içerisinde bir Formun etki alanı kırmızı ince bir çizgi ile belirtilir.
 Text Field: Kayıt ya da üye girişi gibi işlemler sırasında veri girişi yapılan (ad, soyad, email, kullanıcı
adı veya parola gibi) metin alanlarını formumuz içerisine eklememize olanak sağlar.
 Hidden Field: Formlardaki gizli alanlardır. Bunlar kullanıcı tarafından görünmez fakat form içerisinde
kullanıcıya yansımaması gereken bilgilerin iletilmesinde kullanılır.
 Textarea: Biraz önce belirttiğimiz text field'ların çok satırlı ve daha çok bilgi alabilen türü. İşlev aynı
diyebiliriz.
 Check Box: Formlardaki inisiyatife bağlı opsiyonlarda işaretlenebilir (Tick) bileşenler yaratmamızı
sağlar.
 Radio Button: Çoktan seçmeli opsiyonlarda sadece bir cevabın seçilebileceği durumlar yaratmamızı
sağlar. Böyle çok seçenekli bir uygulama yapmak için isimleri aynı değerleri farklı seçenekler
eklenerek kullanıcının sadece bir tanesini seçmesi sağlanabilir.
 Radio Group: Toplu olarak Radio button ekleme işlemini büyük ölçüde kolaylaştıran çok güzel bir
araç.
 List Menu: Dropdown menü olarak da bilinen çok opsiyonlu açılır menuler yapmamızı sağlar.
 Jump Menu: bildiğimiz list menünün biraz daha gelişmiş hali. Yani amacı farklı aslında. Site içerisinde
bazı sayfalara hızlı erişim sağlamak istiyorsanız bu Jump menü özelliğini kullanabilirsiniz.
 Image Field: Standart butonlardan sıkılanlar için buton yerine resimde kullanabilecekleri güzel bir
özellik.
 File Field: Form aracılığıyla dosya yollama (Web Upload) işlemleri için kullanılan form bileşenidir.
 Button: Bir formdaki girilen verilerin ACTION'da belirtilen sayfaya iletilmesini (submit) sağlayan yada
forma girilen tüm verileri sıfırlayan (reset) gibi işlemleri üstlenen formların en önemli
bileşenlerinden biri.
 Label: Genelde Radio button ve Check Box'lar için olmak üzere tüm form elemanları için kullanılan
etiket olayı.
 Fieldset: Oldukça güzel fakat pek bilinmeyen bir özellik olan Fieldset eklememizi sağlar. Bunu sadece
formlarda değil her yerde kullanabiliriz.
Bu düğmeleri kullanarak sayfanıza ihtiyacınıza göre form bileşenlerini ekleyebilirsiniz. Bir form elemanı
eklemek için herhangi bir düğmeye tıkladığınızda DW bize ilgili form elemanı ile ilgili ilk ayarları
yapabileceğimiz bir iletişim penceresi gösterecektir.
Eklediğiniz form elemanı ile ilgili erişilebilirlik seçenekleri
Bu pencere kullanımı Edit / Preferences menüsü ile açılan Preferences (Ayarlar)
ekranından Accessibility sekmesinden devre dışı bırakılabilir.
Her objede olduğu bunlar için de ince ayarları Properties paneli üzerinden hallediyoruz. Örneğin bir Text
field ekledikten sonra bu elemanı seçip Propertiesüzerinden bu field ile her türlü parametreye erişebilme
şansına sahibiz. Söz gelimi "Type" olarak "Multi line" seçerseniz bu Text field bir Textarea, "Password"
seçerseniz ise parola girmenize olanak sağlayan parola alanı halini alacaktır.
Properties paneli ile form elemanlarının özelliklerini değiştirebilir ve yönetebilirsiniz
Aynı şekilde herhangi bir form elemanını seçtiğinizde de Properties panelinde bu elemanla ilgili ayarları
yapabilirsiniz.
Dreamweaver ile Site Tanımlamaları
Dreamweaver'ın proje yönetim sisteminin temeli "Site" kavramı üzerine kuruludur. DW içerisinde her proje
siteler olarak tanımlanır ve yönetilir. DW bir web tasarım programı ve geliştirme ortamı olduğuna göre
geliştiricilerin böyle bir yöntem seçmeleri oldukça mantıklı olmuş.
DW içerisinde site tanımlamaları yaparak sadece DW'a özel bazı avantajları da kullanabilme şansına sahip
olabiliyoruz...
Öte yandan sadece yönetmekle kalmayıp sitemiz ile ilgili gidişatı raporlar halinde bize sunmaktan tutunda siz
farkında dahi olmadan değişikliğe uğrayan dosyaları FTP aracılığı ile sunucuya gönderme gibi birçok işlemde
bu proje bazlı çalışmaların bizlere kazandırdığı avantajlar arasında yer almakta.
DW içerisinde site tanımlamaları yaparak sadece DW'a özel bazı avantajları da kullanabilme şansına sahip
oluyoruz. Örneğin DW konforlu sunucu taraflı projeler geliştirme ortamını kullanmaktan tutunda büyük
sitelerde tek tık ile sitedeki bir çok dosyayı güncelleme imkânı sağlayan şablon (template) yönetimine kadar
bir çok DW özelliğini kullanabiliyoruz.
DW içerisinde proje yönetimi için "Site" menüsünü kullanacağız. Bu menü ile yeni site tanımlayıp var olan
sitelerimizi de yönetme şansına sahibiz.
Site menüsü ile sitelerimiz ile ilgili her türlü işlemi yapabiliriz
Yine aynı menü altında yer alan "Manage Sites" seçeneği ile de önceden tanımlı sitelerimizi yönetebilmemiz
mümkün tabi.
Site manager ile yeni site tanımlama ve tanımlıları düzenleme işlemlerini yapabiliriz
Site tanımlama işlemleri esas itibariyle aynı olmasına karşın dinamik ve statik siteler için ufak tefek farklılıklar
içermekte. Bu nedenle anlatımı statik, dinamik ve uzak sunucu gibi birkaç ana başlıkta toplamaya çalıştım.
Eğer yeni başlayan bir kullanıcı iseniz ve DW'ı sadece tasarım ve HTML düzenleme amacı ile kullanacaksanız,
bir diğer deyimle siteniz sunucu taraflı bir programlama dili ihtiva etmiyor ise Statik site tanımlamasını,
sunucu taraflı bir proje ise ve/ve ya veritabanı odaklı bazı içerik yönetim sistemleri ile çalışmak
istiyorsanız Dinamik site tanımlamasını incelemenizi tavsiye edeceğim. En nihayetinde ister statik isterse
de dinamik olsun sitenizi sunucuya göndermek için FTP işlemlerini de DW içerisinde yapmak istiyorsanız ve ya
sayfalarınızı test etmek için uzak bir sunucu kullanmak istiyorsanız, Uzak sunucu ayarlarını incelemeniz
sizin için faydalı olacaktır.
Statik site tanımlamaları
Sitemizi tanımlamaya Site / New Site menüsü ile başlıyoruz.
Site menüsü ile sitelerimiz ile ilgili her türlü işlemi yapabiliriz
Bu menüye tıkladıktan sonra DW bize bir site tanımlama sihirbazı sunacaktır. Bu sihirbaz ile adım adım ve
oldukça basit bir biçimde site tanımlamalarımızı yapabiliriz. Eski DW kullanıcıları ayrıntılı ayarlar yapmak ve
eski ara yüzdeki gibi bir ara yüz kullanmak isterseler sihirbazın üst kısmında yer alan Avanced sekmesine
geçebilirler.
Site ayarlarını Advanced sekmesine geçip ayrıntılı bir biçimde yapabilirsiniz
tanımlamasını başlatıyoruz.
1. basamak
İlk adım olarak DW bizden sitemiz için bir isim girmemizi istiyor. "What would you like to name your
site" kısmına sizin için anlamlı ve açıklayıcı olan bir site ismi giriniz.
Sitemizin adını ve adresini giriyoruz
What is the http address (URL) of your site kısmına ise sitenizi web adresini yazmalısınız. Bu şekilde ilk
basamağı tamamlamış oluyoruz. "Next" düğmesine tıklayarak bir sonraki basamağa geçebiliriz.
2. basamak
İkinci adımda ise DW bize sitemizde sunucu taraflı bir teknoloji kullanmayı isteyip istemediğimizi sunuyor. Biz
şuanda statik bir site tanımlaması yapacağımız için buradaki soruya "No, i do not want to use a server
technology" seçeneğini seçiyoruz. Diğer seçenekte ne gibi ayarlar yapılacağını dinamik site tanımlaması
bölümünde inceleyebilirsiniz.
Server teknolojisi kullanmak isteyip istemediğimizi seçiyoruz
"Next" diyerek devam ediyoruz.
3. basamak
Üçüncü adımda çalışmalarımız sırasında dosyaları nasıl kullanmak istediğimiz sorulmakta.
Dosyaları nasıl kullanmak istediğimizi seçiyoruz
Edit local copies on my machine, then upload the server when ready (Recommended); bu
seçenek ile dosyalarımızı kendi bilgisayarımızda düzenliyoruz ardından dosyalar hazır olduğunda onları
sunucuya gönderiyoruz. Eğer bu şekilde bir çalışma yöntemi izliyorsanız bu seçeneği kullanabilirsiniz. Zaten
DW bize bu seçeneği tavsiye ediyor :)
Edit directly on server using local network; eğer uzak sunucu ayarları ile uğraşmak istemiyorsanız ve
dosyalarınızı sunucuya kendiniz harici bir FTP programı ile göndermek istiyorsanız bu seçeneği seçmelisiniz.
Seçeneklerden hangisi kullanırsanız kullanın aşağıdaki kısma siteniz çalışma klasörünün belirtmeniz gerekiyor.
Yandaki klasör seçeneğine tıklayarak sitenizin çalışma klasöründe iken "Kaydet" diyerek klasörü
seçebilirsiniz.
Eğer burada "Edit directly on server using local network" seçeneğini seçtiyseniz ileri dediğinizde site
tanımlamasını tamamlamış olacağınızdan "Done" diyerek işlemi tamamlayabilirsiniz.
Site tanımlasının bittiğini gösteren ekran
4. basamak
Eğer "Edit local copies on my machine, then upload the server when ready (Recommended)"
seçeneğini seçtiyseniz dosyalarınız ile çalışırken DW'ın sunucuya bağlanmak için nasıl bir yol izleyeceğini
seçebilirsiniz.
Uzak sunucu ayarlarımızı yapıyoruz
Eğer sisteminizde bir web sunucu kurulu ise ve sitenizi bu sunucu üzerinden localhostta denemek
istiyorsanız LocalNetwork seçeneğini seçmeli ve sarı klasör simgesine tıklayarak makinenizde kurulu olan
web sunucununuz yayın dizini içerisindeki site dosyalarınızın bulunduğu dizini seçerek "Kaydet" demelisiniz.
Eğer bir uzak sunucu türü seçip "Next" derseniz Check in / Check out ayarlarını yapmanız gerekecektir. Bu
ayarlar ve FTP seçeneği ile ilgili bilgiler için Uzak sunucu ayarları kısmına geçebilirsiniz.
Eğer herhangi bir uzak sunucu kullanmak istemiyor veya dosyaları sunucuya kendiniz göndermek istiyorsanız
"None" seçeneğini seçip "Next" dediğinizde site tanımlama işleminin bittiğini gösteren bir özet sayfasıyla
karşılaşacaksınız ve "Done" diyerek site tanımlama işlemini sonlandırabilirsiniz.
Statik site tanımlamaları
Sitemizi tanımlamaya Site / New Site menüsü ile başlıyoruz.
Site menüsü ile sitelerimiz ile ilgili her türlü işlemi yapabiliriz
Bu menüye tıkladıktan sonra DW bize bir site tanımlama sihirbazı sunacaktır. Bu sihirbaz ile adım adım ve
oldukça basit bir biçimde site tanımlamalarımızı yapabiliriz. Eski DW kullanıcıları ayrıntılı ayarlar yapmak ve
eski ara yüzdeki gibi bir ara yüz kullanmak isterseler sihirbazın üst kısmında yer alan Avanced sekmesine
geçebilirler.
Site ayarlarını Advanced sekmesine geçip ayrıntılı bir biçimde yapabilirsiniz
tanımlamasını başlatıyoruz.
1. basamak
İlk adım olarak DW bizden sitemiz için bir isim girmemizi istiyor. "What would you like to name your
site" kısmına sizin için anlamlı ve açıklayıcı olan bir site ismi giriniz.
Sitemizin adını ve adresini giriyoruz
What is the http address (URL) of your site kısmına ise sitenizi web adresini yazmalısınız. Bu şekilde ilk
basamağı tamamlamış oluyoruz. "Next" düğmesine tıklayarak bir sonraki basamağa geçebiliriz.
2. basamak
İkinci adımda ise DW bize sitemizde sunucu taraflı bir teknoloji kullanmayı isteyip istemediğimizi sunuyor. Biz
şuanda statik bir site tanımlaması yapacağımız için buradaki soruya "No, i do not want to use a server
technology" seçeneğini seçiyoruz. Diğer seçenekte ne gibi ayarlar yapılacağını dinamik site tanımlaması
bölümünde inceleyebilirsiniz.
Server teknolojisi kullanmak isteyip istemediğimizi seçiyoruz
"Next" diyerek devam ediyoruz.
3. basamak
Üçüncü adımda çalışmalarımız sırasında dosyaları nasıl kullanmak istediğimiz sorulmakta.
Dosyaları nasıl kullanmak istediğimizi seçiyoruz
Edit local copies on my machine, then upload the server when ready (Recommended); bu
seçenek ile dosyalarımızı kendi bilgisayarımızda düzenliyoruz ardından dosyalar hazır olduğunda onları
sunucuya gönderiyoruz. Eğer bu şekilde bir çalışma yöntemi izliyorsanız bu seçeneği kullanabilirsiniz. Zaten
DW bize bu seçeneği tavsiye ediyor :)
Edit directly on server using local network; eğer uzak sunucu ayarları ile uğraşmak istemiyorsanız ve
dosyalarınızı sunucuya kendiniz harici bir FTP programı ile göndermek istiyorsanız bu seçeneği seçmelisiniz.
Seçeneklerden hangisi kullanırsanız kullanın aşağıdaki kısma siteniz çalışma klasörünün belirtmeniz gerekiyor.
Yandaki klasör seçeneğine tıklayarak sitenizin çalışma klasöründe iken "Kaydet" diyerek klasörü
seçebilirsiniz.
Eğer burada "Edit directly on server using local network" seçeneğini seçtiyseniz ileri dediğinizde site
tanımlamasını tamamlamış olacağınızdan "Done" diyerek işlemi tamamlayabilirsiniz.
Site tanımlasının bittiğini gösteren ekran
4. basamak
Eğer "Edit local copies on my machine, then upload the server when ready (Recommended)"
seçeneğini seçtiyseniz dosyalarınız ile çalışırken DW'ın sunucuya bağlanmak için nasıl bir yol izleyeceğini
seçebilirsiniz.
Uzak sunucu ayarlarımızı yapıyoruz
Eğer sisteminizde bir web sunucu kurulu ise ve sitenizi bu sunucu üzerinden localhostta denemek
istiyorsanız LocalNetwork seçeneğini seçmeli ve sarı klasör simgesine tıklayarak makinenizde kurulu olan
web sunucununuz yayın dizini içerisindeki site dosyalarınızın bulunduğu dizini seçerek "Kaydet" demelisiniz.
Eğer bir uzak sunucu türü seçip "Next" derseniz Check in / Check out ayarlarını yapmanız gerekecektir. Bu
ayarlar ve FTP seçeneği ile ilgili bilgiler için Uzak sunucu ayarları kısmına geçebilirsiniz.
Eğer herhangi bir uzak sunucu kullanmak istemiyor veya dosyaları sunucuya kendiniz göndermek istiyorsanız
"None" seçeneğini seçip "Next" dediğinizde site tanımlama işleminin bittiğini gösteren bir özet sayfasıyla
karşılaşacaksınız ve "Done" diyerek site tanımlama işlemini sonlandırabilirsiniz.
Dinamik site tanımlaması
DW ile sunucu teknolojilerini kullanarak PHP, ASP ya da Macromedia'nın kendi ürünü olan ColdFusion gibi
bir sunucu taraflı programlama dili ile projeler yapmak istiyorsanız dinamik sitelerle çalışmanız gerektiğini
söylemiştik.
1. basamak
Dinamik site tanımlama işleminin ilk basamağı statik site tanımlamasında da olduğu gibi Site / New
site menüsü ile başlıyor ve ilk basamakta herhangi bir fark içermiyor. Aynı ayarlar bu basamak için de
geçerli. Sitenize bir ad girip web adresini yazdıktan sonra "Next" diyebilirsiniz.
2. basamak
İkinci basamak olan "Do you want to work with a server technology..." sorusuna "Yes, I want to use
a server technology" seçeneğini seçiyor ve "Which server technology?" bölümünden ihtiyacınıza uygun
bir sunucu teknoloji seçmelisiniz.
Kullanmak istediğimiz sunucu teknolojisini seçiyoruz
Ben buradan PHP MySQL seçeneğini seçerek devam ediyorum. Bu aşamada hangi teknolojiyi seçtiğiniz çok
da bir önemi yok ayarlar yine aynı sadece size uygun olanı seçip "Next" demelisiniz.
3. basamak
Bir sonraki basamakta dosyalar ile nasıl çalışmak istediğimiz sorulmakta.
Dosyalar ile nasıl çalışmak istediğimizi seçiyoruz
Edit and test locally (my testing server on this machine); seçeneği eğer sisteminizde bir web
sunucusu kurulu ise (Apache ve ya Internet Information Serverice-IIS gibi) ve doğrudan bu sunucunun yayın
dizini içerisinde çalışıyorsanız kullanmanız gereken bir seçenek oluyor. Bu seçeneği seçip "Next" derseniz ileri
seçeneklerde uzak sunucu seçeneklerini de seçebilirsiniz.
Edit loacally, then upload remote testing server; bu seçenek ise kendi bilgisayarınızda bir web sunucu
kurulu değil ise ve denemelerinizi doğrudan uzaktaki sunucu üzerinde yapacak iseniz ya da birden fazla kişi
ile ortak bir sunucu üzerinde eş zamanlı bir proje geliştirmesi yapacak iseniz (intranet den ortak çalışmalar
gibi düşünebilirsiniz) kullanmanız gereken bir seçenek oluyor. Bu seçeneği seçerseniz 6.
basamağa atlayınız.
Edit directly on remote testing server using local network: Eğer kendi bilgisayarınızda bir web sunucu
kurulu ise ayrıca uzak sunucu ayarları ile uğraşmak istemiyor ve dosyaları FTP ile kendiniz sunucuya
göndermek istiyorsanız sizin için en uygun olan seçenek bu gibi görünüyor.
Seçeneklerden hangisi kullanırsanız kullanın aşağıdaki kısma siteniz çalışma klasörünün belirtmeniz gerekiyor.
Yandaki klasör seçeneğine tıklayarak sitenizin çalışma klasöründe iken "Kaydet" diyerek klasörü
seçebilirsiniz.
Eğer burada "Edit loacally, then upload remote testing server" seçeneğini işaretlerseniz 6.
basamağa atlayınız
Bu seçeneklerden size ve gereksinimlerinize en uygun olanı seçip "Next" diyerek devam edebilirsiniz.
4. basamak
Eğer 3. basamaktaki soruya "Edit and test locally (my testing server on this machine)" ve ya "Edit
directly on remote testing server using local network" cevaplarından birini verdiyseniz bu basamakta
test sunucunuz ile DW arasındaki iletişimin kullanılacağı adresi girmemiz gerekiyor.
Test sunucu adresini girip kontrol ediyoruz
Burada dikkat etmeniz gereken bir nokta var; bu adres web sitenizin adresi olabileceği gibi aslında sitenizi
test ettiğiniz sunucu adresidir. Genelde kendi bilgisayarınızda, yaptığınız siteleri denemek için kurduğunuz
web sunucular için bu adres eğer size sonradan değiştirmediyseniz http://localhost ya
da http://127.0.0.1şeklindedir.
Web sunucunuzun yayın dizininde hangi klasörü sitenizin çalışma klasörü olarak seçerseniz adresi ona göre
değiştirmeniz gerekecektir. Örneğin benim makinemde Apache'nin root klasörü D:www dizini altında yer
almaktadır. Çalışmak istediğim siteyi de php_site şeklinde bir klasör yaratıp orada konumlandırdığım için
(D.wwwphp_site) buraya http://localhost/php_site/ yazdım. Sizde kendi ayarlarınıza göre burada ilgili
değişiklikleri yapmalısınız.
Girdiğiniz adresin doğruluğunu kontrol etmek için "Test URL" düğmesine tıklayarak geçerliliğini kontrol
edebilirsiniz. Eğer herhangi bir sorun yok ise testin başarılı olduğuna dair bir mesaj alacaksınız.
Adresin doğruluğunu bu mesaj ile onaylıyoruz
Bu kontrolleri de yaptıktan sonra "Next" diyebilirsiniz.
Bir sonraki basamakta nasıl devam edeceğimiz 3. basamaktaki seçimlerimize göre değişecektir.
5. basamak
Eğer 3. basamaktaki soruya "Edit and test locally (my testing server on this machine)" cevabını
verdiyseniz; bu aşamada DW bize dosyaların düzenleme işlemi bittikten sonra onları başka bir yere
kopyalamak isteyip istemediğiniz soracaktır. Bu başka konum; farklı bir bilgisayara (web sunucu gibi)
olabileceği gibi birden fazla kişi ile bir proje geliştiriyorsanız ortak çalışma dizini de olabilir.
Bu soruya Yes dersek ileride bir uzak sunucu seçmemiz gerekecek
Eğer bu soruya "No" derseniz bir sonraki aşamada site tanımlama işleminin tamamlamış olacaksınız ve
"Done" diyerek işlemi sonlandırabilirsiniz.
Eğer bu soruya "Yes, i want to use a remote server" cevabını verdiyseniz 6. basamaktan devam
edebilirsiniz.
6. basamak
Bu aşamada DW bize test sunucusuna nasıl bağlanacağını sormaktadır. Eğer bilgisayarınızda bir web sunucu
kurulu ise buradan LocalNetwork seçeneğini seçmeli ve sarı klasör simgesine tıklayarak makinenizde kurulu
olan web sunucununuz (Apache ya da IIS gibi) yayın dizini içerisindeki site dosyalarınızın bulunduğu dizini
seçerek "Kaydet" demelisiniz.
localhost ayarları
Eğer 3. basamakta "Edit loacally, then upload remote testing server" seçeneğini seçtiyseniz ve 6.
basamakta da LocalNetwork seçeneğini işaretleyip "Next" dediğinizde 4. basamakta anlatıldığı üzere test
sunucu adresinizi ile ilgili ayarları yapmalısınız.
Eğer bir uzak sunucu türü seçtiyseniz bir sonraki aşamada Check in / Check out ayarlarını yapmanız
gerekmektedir, ilgili ayarlar ve ya FTP ayarları için Uzak sunucu ayarları kısmına geçebilirsiniz.
Eğer herhangi bir uzak sunucu kullanmak istemiyorsanız "None" ve ya "I'll set this up later" seçeneğini
seçip "Next" dediğinizde son basamak olan site bilgilerinin genel bir özetini göreceksiniz ve "Done" diyerek
site tanımlama işlemini bitirebilirsiniz.
Dinamik site tanımlamaızın bittiğini gösteren ekran
Uzak sunucu ayarları
İster statik ister dinamik olsun site tanımlamalarınız sırasında sitenizin yayınlandığı uzaktaki sunucu ayarlarını
yapmanız gerekebilir.biz burada Statik site tanımlamaişlemlerinin 4. basamağı ile Dinamik site
tanımlama işlemlerinin 6. basamağında geçen bu uzak sunucu ayarları kısmındaki FTP seçeneğine
değineceğiz.
Zaten konu anlatımlarında eğer sisteminizde Apache ya da IIS gibi web sunucu kurulu ise LocalNetwork'ü
seçmeniz ve ne gibi ayarlar yapmanız gerektiğini dile getirmiştik.
Uzak sunucu ayarlarımızı yapıyoruz
Eğer test sunucusuna FTP ile erişmek istiyorsanız yada dosyaları doğrudan uzak sunucu üzerinden kullanırken
DW'ın FTP bağlantısı kullanmasını istiyorsanız; ilgili kısımları şu şekilde doldurmanız gerekmektedir;
Uzak sunucu için FTP ayarları
What is the hostname or FTP address of your web server: Buraya sitenize bir FTP arayüzü ile erişirken
kullandığınız FTP adresini yada sitenizin FTP hizmetini veren sunucu adresini yazmalısınız.
What folder on the server do you want to store your files: Eğer sunucu üzerinde bir alt dizin
kullanıyorsanız yada kullandığınız FTP kullanıcı adı sunucu üzerinde sadece belli bir alt dizine erişme hakkına
sahip ise (bazı ücretsiz ftp alanı veren servislerde olduğu gibi) buraya kullandığınız alt dizini giriniz.
What is your FTP login: FTP kullanıcı adını giriniz.
What is your FTP password: FTP parolasını giriniz.
Eğer FTP erişimi sırasında SSL üzerinden FTP kullanım yetkiniz var ise buradaki "Use secure FTP (SFTP)"
seçeneğini işaretlemelisiniz.
İlgili ayarları yaptıktan sonra "Next" diyerek bir sonraki aşama olan Check in / Check out ayarları kısmına
geçebilirsiniz.
Check in / Check out ayarları
Eğer birden fazla kişi ile ortak bir proje üzerinde DW ile çalışıyorsanız iki kişinin birbirinden habersiz olarak
aynı anda aynı dosya üzerinde değişiklik yapmalarına mani olmak için Check in/out özelliğini kullanabilirsiniz.
Bu özellik açık iken DW deneme sunucu üzerinden dosyayı açtığı anda diğer kullanıcıların bu dosyaya
erişimlerini engelleyerek bu karışıklıkları önleyebilmektedir.
Check in / Check out ayarları
Eğer bu özelliği kullanmak istiyorsanız ve "Yes, enable check in and check out" seçeneğini
işaretlediyseniz bu özellik ile ilgili ayarları yapabilirsiniz. Burada geçen"When you open a file that isn't
shecked out, should Dreamweaver check it our, or do you want to view a read only copy?"
sorusuna cevap olarak;
"I want to view a read only copy" cevabını verirseniz, bir kullanıcı o dosya üzerinde çalışırken ikinci bir
kullanıcı da ilgili dosyaya erişmeye çalıştığında DW dokümanın sadece görüntülenebilir bir kopyasını
gösterecektir fakat doküman üzerinde bir değişiklik yapmanıza izin vermeyecektir.
"Dreamweaver should check it out" cevabını verirseniz, bir kullanıcı o dosya üzerinde çalışırken ikinci bir
kullanıcı da ilgili dosyaya erişmeye çalıştığında DW dosya üzerinde çalışmakta olan kişinin çalışmasını
sonlandırıp sonradan erişmeye çalışan kullanıcının çalışmaya devam etmenizi sağlayacaktır.
"What is your name" kısmına diğer proje çalışanlarının sizi tanıyabilecekleri bir ad giriniz (nicknameiniz de
olabilir), "What is your email address" kısmına ise e-mail adresinizi giriniz ki böylece aynı proje üzerinde
çalışan aynı isimli kişilerin birbirlerinden ayırt edilebilecekleri benzersiz bir kimlikleri olsun. BU bilgiler check in
check out yetkileri için kullanılacaktır.
Eğer Check in / check out özelliğini kullanmak istemiyorsanız "No, do not enable check in and check out"
seçeneğini kullanabilirsiniz.
Tanımlı siteler ile çalışmak
Site tanımlamalarınızı yaptıktan sonra projelerimizin yapımı sırasında Files panel grubu
altındaki Files panelinden çalışmakta olduğumuz sitenin dosyalarını takip edebiliriz.
Files paneli ile site dosyalarımızı yönetebiliyoruz
Resimde yer alan ve "Ornek site" yazan açılır menüden sisteminizde tanımlı siteler arasında geçiş yaparak
hangi site üzerinde çalışmak istediğinizi seçebilirsiniz. Hangi dosyaların gösterileceğini ise "Local view"
şeklinde ifade edilen açılır menüden seçebilirsiniz. "Local view" sitenin kendi bilgisayarımızda bulunan
çalışma dosyalarını ifade etmekte. "Remote view", uzak sunucu bağlantısını (FTP sunucu) ifade ediyor.
"Testing server" ile deneme sunucunuzdaki dosyaları görebiliyorsunuz. "Map view" seçeneği ile de hangi
dosyalardan hangi dokümanlara link verildiğini ve bu linklerin geçerliliğini görebileceğiniz bir site haritasına
ulaşabilirsiniz.
Map view ile sitemizdeki dosyalar arası bağlantıları görebiliriz
Eğer bir uzak sunucu tanımlaması yapıysanız (FTP gibi) paneldeki "Connect to remote host" isimli
düğmeye tıklayarak uzak sunucuya bağlanabilirsiniz.
Yine panelde yer alan "Put file(s)" düğmesi ile dosyaları sunucuya gönderebilir "Get file(s)" düğmesi ile ise
sunucudaki dosyaları bilgisayarınıza indirebilirsiniz.
"Check in / out file(s)" düğmeleri ile de dosyalar üzerinde çalışırken ikinci şahısların dosya üzerinde
değişiklik yapabilmelerini sağlayan giriş çıkış olaylarını düzenleyebilirsiz.
"Expand to show local and remote sites" düğmesi ile geniş görünüme geçerek bir FTP istemci
programda alışık olduğumuz üzere yerel ve uzak sunucu dosyalarını aynı anda görmekteyiz. "Local Files"
kısmından dosyaları seçip "Put file(s)" düğmesine tıkladığınız anda dosyalar "Remote Files" kısmına
aktarılacaktır.
Expand view ile site dosyalarınızı daha rahat yönetebilirsiniz
Eğer dosyaları gönderirken bağımlı dosyalarında gönderilip gönderilmeyeceği sorulacaktır. Bu bağımlı dosyalar
harici CSS, JavaScript dosyaları olabileceği gibi dinamik sitelerde veritabanı bağlantı dosyaları da
olabilmektedir. Eksik gönderilen bağımlı dosyalar sunucuda sitenin düzgün çalışmamasına sebep olabilir.
Bağımlı dosyaları da suncuya göndermeliyiz aksi taktirde sorun çıkacaktır
Site yönetim işlemleri
Önceki konularda yeni bir siteyi nasıl tanımlayacağımızı ve ayarlarını nasıl yapacağımızı görmüştük. Şimdi de
bu siteleri DW içerisinde nasıl yönetebileceğimize deyineceğiz.
Siteler ile her türlü işlemimizi "Site" menüsünden yapabiliyoruz. Site / Mange Sites menüsü ile site
yöneticisi ekranına ulaşabilmemiz mümkün.
Site manager ile yeni site tanımlama ve tanımlıları düzenleme işlemlerini yapabiliriz
Burada yer alan "Edit" düğmesi ile önceden tanımlı sitelerimizi düzenleyebilmemiz mümkün. "Duplicate" ise
seçili sitenin bir kopyasını daha oluşturmaya yarar. "Remove" da tahmin edeceğiniz üzere seçili siteyi
silecektir.
"Export" seçeneği ile siteniz ile ilgili ayarları ".ste" uzantılı "Dreamweaver site definition file" formatında
dışarıya aktarmanız da mümkün. Aynı şekilde "Inport" seçeneği ile de önceden export edilmiş site
tanımlamalarını DW'a aktarabilirsiniz. Böylece DW'ı her yenibaştan kurduğunuzda sitelerinizi tekrar
tanımlamak zorunda kalmayacaksınız.
Bu pencereden bir site seçip "Done" dediğiniz anda DW üzerinde çalışmak için o siteyi seçecek
ve Files panelini ona göre yapılandıracaktır.
Site raporları
Site / Reports menüsü ile de site ile ilgili rapor niteliği taşıyan birçok bilgiye ulaşabilirsiniz. Sitemizdeki
dokümanları hatalara ve olası sorunlara karşı kontrol eden bu site raporlarını kullanarak sitenizi daha
sorunsuz bir hale getirebilirsiniz.
Site reports
Raporlar ile ilgili her seçenek için ayrıntılı ayarları yapmak için "Report Settings" düğmesine tıklamanız
yeterlidir. Örneğin önce Accessibility'i seçip sonra Report settings'e tıklarsak açılan
pencereden Accessibility (erişilebilirlik) ile ilgili ayrıntılı düzenlemeler yapabiliriz.
Site reports ayarları
Raporların sonuçlarını ise "Results" panelinden görebilirsiniz.
Site raporlarının sonuçlarını Result panelinden takip edebiliriz
Kırık link kontrolü (Check links)
Aynı şekilde Site / Check Links sitewide menüsü ile de sitedeki çalışmayan linklerin bir listesini
görebilirsiniz.
Site / Check links sitewide menüsü ile sitemizdeki tüm linklerin geçerliliklerini kontrol ettirebiliriz
Link değiştirme (Change links)
Sitenizdeki hatalı ve kırık linkleri gördükten sonra onları geçerli başka bir link ile değiştirmek isterseniz Site /
Change links sitewide menüsü ile bu işlemi gerçekleştirebilirsiniz.
Site / Change links sitewide menüsü ile değiştirmek istediğiniz linkleri kolayca değiştirebilirsini
Dreamweaver ve Şablon Uygulamaları
Şablon kullanımını anlatmak için şöyle bir örnek vererek işe başlayabiliriz; oldukça fazla sayıda sayfadan ve
içerikten oluşan bir siteniz olduğunu düşünün ve bu site için standart bir tasarım olmasını her sayfadaki
görünümün yani içerik dışındaki alanların aynı olmasını ve bunu sitedeki tüm dokümanlara uygulamak
istediğinizi düşünelim. Bunu ilk aşamada yapmak bir zorluk teşkil etmiyor. Tasarım yapılır daha sonra site
içeriği bu tasarımın içerisine oturtularak ayrı ayrı kaydedilir böylece tüm sitede aynı tasarım korunmuş olur.
Peki ya tasarım ile ilgili bir değişiklik yapmak gerekirse ya da tasarımda sorun yaratan bir objenin varlığını fark
ederseniz ne olacak?
Onlarca beklide yüzlerce dokümanı tek tek düzenlemek pek de hoş bir manzara gibi görünmüyor. İşte DW
bize bu konuda da kolaylık sağlayarak şablon (Template) olarak tabir edilen bir özellik sunuyor.
Bu şablonlar sayesinde sitedeki belli alanları düzenlenebilir alanlar olarak işaretleyip bu alanlar dışındaki
kısımların DW tarafından bir defada güncellenebilmesini sağlayabilirsiniz. Aslında olayın mantığı şu şekilde;
DW sayfanın HTML kodları arasına belli yazım kurallarına uygun olarak bazı yorum (comment) satırları ekliyor.
Bu yorum satırları DW tarafından okunup değerlendirilebiliyor. Neyse bu işin teorik kısmı şimdi şablonları DW
içerisinde nasıl kullanıyoruz bir bakalım.
Şablonları kullanmadan önce tanımlı bir site ile çalışmanız gerekiyor. Önceki makalelerde nasıl bir site tanımı
yapabileceğimizden bahsetmiştik, burada tekrar anlatarak vakit kaybetmeyeceğim.
Yeni bir şablon oluşturmak
Öncelikle bir site tanımlaması yapmış olmanız gerekiyor. Daha sonra bu site altında sitenizin genel tasarımını
bir HTML dokümanı olarak kaydedin veya hazırlayın. Dokümanı DW içerisinde açarak gerekli düzenlemeleri
yapın.
Örneğin ben basit bir site tasarımı yaptım ve tasarımı UstTaraf, Orta ve AltTaraf isimli üç DIV ile
birbirinden ayırdım. Tahmin edebileceğiniz gibi UstTaraf'a site başlığı ve ana menüyü
yerleştirdim. AltTaraf'a ise yine ufak bir menü ve copyright bilgisi gibi footer bilgilerinin yer aldığı bir şeyler
koydum. Orta olarak isimlendirdiğim DIV içerisine de site tasarımını yerleştirebileceğimi düşündüm. Tüm
bunları hazırlayıp Orta isimli DIV içerisine girip "İÇERİK BURADA OLACAK" yazdım ve bu dokümanı
kaydettim.
Tasarımımızı yapıyor ve kaydediyoruz
Tasarım ile işimizin bittiğini düşündükten sonra File / Save as Template menüsü ile dokümanı bir şablon
dosyası olarak kaydediyorum.
File / Save as template menüsü ile şablonumuzu kaydediyoruz
Sitemiz içerisindeki şablonları görüp düzenleyebileceğimiz şablon yönetici açılıyor ve şablonumuza ne simi
vermek istediğimizi soruyor. Uygun bir isim verip kaydediyoruz.
Şablonumuza bir isim verip kaydediyoruz
Şablonu kaydederken "Site" kısmında içerisinde çalıştığımız veya bu şablonu eklemek istediğimiz sitenin seçili
olduğuna dikkat etmeliyiz. İşlemlerimizi yapıp OK diyoruz ve şablonumuzu kaydediyoruz.
DW bizden "Update Links?" şeklinde bir uyarı mesajı gösterecek. Bu soruya "Evet" diyoruz.
Şablondaki resim ve linklerin düzgün çalışması için Evet diyoruz
Çünkü DW şablon dosyalarını site dizini altında yarattığı "Templates" dizini altında tutuyor ve bu tasarımı
oraya taşıyor. Haliyle tasarım içerisinde kullandığımız linklerin yolu veya resimleri "SRC" bilgisi bundan
etkileniyor. Bunları DW'ın tekrar düzenleyerek bu şablonu diğer dokümanlara uyguladığımızda DW'ın bunu
algılayarak tekrar düzeltebilmesi için bu soruya "Evet" demeliyiz.
Şimdi içeriğin olmasını istediğim yeri yani "İÇERİK BURAYA GELECEK" yazısını seçiyoruz ve Insert /
Template Objects / Editable Region (CTRL+ALT+V) menüsü ile seçili alanı editable yani değiştirilebilir
bir alan haline getiriyoruz.
Şablonumuza değiştirilebilir bir alan ekliyoruz
Düzenlenebilir alanımız için bir isim giriyoruz ve OK diyerek alanımızı ekliyoruz.
Değiştirilebilir alanımıza bir isim veriyoruz
Fark edeceğiniz gibi değiştirilebilir alanımızın etrafı açık mavi bir çerçeve ile çevrilerek üstünde alana
verdiğimiz isim yer aldı. DW içerisinde tasarım görünümünde şablonlarda düzenlenebilir alanları bu ara yüz ile
seçebilir ve düzenleyebiliriz.
DW içerisinde değiştirilebilir alanların görünümü
Önceden tanımlı bir değiştirilebilir alanın ismini değiştirmek için alan simi üzerine bir kez
tıklayıp Properties panelinden ilgili değişikliği yapabilirsiniz.
Değiştirilebilir alanımızın ismini Properties panelinden değiştirebiliyoruz
Şablonları sayfaya uygulamak
Şablon dosyamızı bu şekilde hazırladıktan sonra CTRL+S ile ya da File / Save menüsü ile kaydedip File /
New ile yeni bir doküman oluşturuyoruz.
Ardından Modify / Template / Apply template to page menüsü ile bu sayfaya önceden hazırladığımız
şablonu uygulamaya başlıyoruz.
Şablonumuzu boş sayfamıza uyguluyoruz
Hangi şablonu sayfaya uygulamak istediğimizi seçtikten sonra "Select" diyerek şablonu sayfamıza
uygulayabiliriz.
Uygulayacağımız şablonu seçiyoruz
Burada dikkat etmemiz gereken nokta "Update page when template change" seçeneğinin mutlaka seçili
olmasıdır. Eğer bu seçeneği seçmezsek şablon dosyasında yaptığımız değişiklikle bu sayfayı etkilemeyecektir.
Şablonu sayfamıza uyguladıktan sonra şablon dosyasının içeriği sayfamıza yansıyacak ve resimdeki gibi bir
görüntü ile karşılaşacağız. Gördüğünüz üzere sadece "orta_icerik" olarak belirtilen değiştirilebilir alanda
düzenlemeler yapabiliyor diğer alanlara herhangi bir müdahalede yapamıyoruz. Buda tasarımın şablon
haricinde değiştirilmesini ve site tasarımındaki bütünlüğün bozulmasını engellemiş oluyor.
Şablon uygulanmış bir sayfanın DW içerisindeki görünümü
tüm dokümanlara şablon dosyasını uygulayabilirsiniz.
Şablonların değiştirilmesi ve toplu dosya güncelleme
Siteniz dosyalarının bulunduğu dizin altında yer alan "Template" klasöründeki "GenelTasarim.dwt" isimli
şablon dosyasını DW ile açın ve orta_icerik yazan kısım dışında herhangi bir yerde (editable regionlar
dışındaki bir yerde) bir değişiklik yapın ve dosyayı kaydedin. Kaydet dediğiniz anda DW bu şablon dosyasını
kullanan ve tüm dosyaları güncellemek isteyip istemediğiniz soracaktır. Bu soruya "Update" demeniz
gerekiyor ki değişiklik bu dosyalara da yansısın.
Şablondaki değişiklikler tüm sayfalara uygulanıyor
"Update" dediğiniz anda DW bu şablonu kullanan bütün dosyalarda ilgili alanları bulup düzenleyecektir.
İçeriğin yer aldığı kısımlara ise dokunmayacağından sadece olmasını istediğimiz değişiklik bütün dokümanlara
uygulanacaktır.
Hangi dosyaların güncellendiğini bu ekrandan takip edebilirsiniz
Seçmeli alanlar (Optional Regions)
Şablonlar sadece bu şekilde sabit belli bir bölgenin değiştirilmesi işlemini yapmıyorlar. Oldukça kapsamlı ve
esnek bir kod yapısına ve tabiri caizse bir kodlama diline sahipler. Bu dil sayesinde koşullu ifadelerden tekrar
edebilen döngülere kadar birçok işlevi gerçekleştirebilmek dahi mümkün. Şimdi bunlara yakından bir göz
atalım.
Seçmeli alanlar nedir?
Seçmeli alanlar şablon içerisinde değiştirilemez olarak belirlediğimiz, değiştirilebilir alanlar dışındaki bölgelere
bir miktar esneklik sağlayarak bazı koşullara göre belli alanların gösterilip bazılarının gösterilmemesini
sağlamaktadırlar. Bir örnek vermek gerekirse site ana menüsünde ziyaretçi "Hakkımızda" bölümünü gezerken
bu bölüme ait ana menü linkinin tıklanabilir olmasına gerek yoktur. Ya da bu linkin arka fon renginin yada
yazı rengini farklı yaparak ziyaretçini o an hangi bölümü gezdiğini vurgulayabiliriz.
Tabi bu sadece şablon kodunun derlenmesi sırasında DW tarafından işleme tabi tutulan ve ona göre şablon
kullanılmış dosyada ilgili değişikliklerin yapılması şeklinde olan bir olaydır. Şimdi örnek bir uygulama ile olayı
daha yakından kavramaya çalışalım.
Öncelikle GenelTasarim isimli şablon dosyamızı (GenelTasarim.dwt) DW içerisinde açıp, sadece hakkımızda
sayfasında (about.html) görünmesini istediğimiz bir alan yada nesneyi seçip Insert / Template Objects /
Optional Region menüsü ile seçmeli bir alan eklemeye başlıyoruz. Seçim kolaylığı açısından kod görünümde
de çalışabilirsiniz.
Sayfamıza seçmeli bir alan ekliyoruz
Açılan iletişim penceresinde "Name" kısmına "isAboutPage" yazıyoruz ve "Show by default" seçeneğini
de işaretliyoruz. Aynı şekilde iletişim sayfası için (contact.html) için "isContactPage", ana sayfa için
(index.html) "isIndexPage"... şeklinde seçmeli alanlarımızı ekliyoruz.
Seçmeli alanımız için koşulları belirtiyoruz
Şablon dosyasını kaydet deyip değişikliği tüm dosyalarda yapılması için "Update" diyoruz.
Şimdi örnek olarak hazırladığımız sitedeki about.html dosyasını açıyoruz ve Modify / Template
Properties menüsünden şablon özellikleri iletişim penceresini açıyoruz ve listelenen şablon
parametrelerinden sadece "isAboutPage" parametresinin "true" diğerlerinin "false" olmasını sağlıyoruz.
Bunu yaparken alt kısımda yer alan "Show isAboutPage" (ve ya Show isIndexPage vs.) seçeneğini
kullanıyoruz.
Şablon uygulanmış sayfalarda şablon parametrelerini değiştiriyoruz
Sitedeki diğer dokümanlar içinde bu işlemi aynı mantık çerçevesinde yapıyoruz. Örneğin ben gösterilen
sayfaya göre değişen bir ana menü sistemi yaptım örnek dokümanı inceleyerek olayı daha iyi
kavrayabilirsiniz.
Bu şekilde siste kendi koşullu seçmeli alanlarınızı yaratarak tasarımda büyük kolaylıklar sağlayabilirsiniz.
İç şablonlar (Nested templates)
İç şablonları anlatmak istersek şablon içinde şablon olarak tanımlayabiliriz aslında. Örneğin sitenizde genel bir
tasarım var fakat bu tasarım sitenin bazı bölümlerinde değişiklikler gösteriyor. Sözgelimi içerik kısmı zaman
zaman tek bir metin olurken bazen başlık, alt başlık ve detay bilgisi gibi kendi içinde standart bir yapıya da
dönüşebiliyor diyelim.
Bu gibi durumlarda iç şablonları kullanmak işinizi oldukça kolaylaştırabilir. İsterseniz bu alanları sayfalar
içerisinde yeniden yapılandırabilir isterseniz de standart iç şablon yapısını koruyarak ana şablon dosyasının
değişik varyasyonlarını yaratabilirisiniz. Şimdi örnek bir uygulama yapalım;
Önceden şablon kullanılarak hazırlanmış bir dokümanı DW içerisinde açıyoruz ve Insert / Template
Objects / Make Nested Template menüsü ile sayfamıza bir iç şablon eklemeye başlıyoruz. Açılan iletişim
penceresinden bu iç şablonumuza bir isim verim "Save" diyoruz böylece bir iç şablon dosyası kaydetmiş
olduk.
İç şablonu ayrı bir şablon dosyası olarak kaydediyoruz
Şimdi bu yeni şablon dosyası üzerinde önceden yaratılmış olan bir değiştirilebilir alan (editable region)
içerisinde ayrı değiştirilebilir alanlar oluşturuyoruz. Örneğin içerik içinde "icerik_baslik" ve "icerik_metin"
gibi. Yeni bir değiştirilebilir alan eklediğimizde dıştaki ana değiştirilebilir alanın rengi sarı olacak ve ana
değiştirilebilir alan olduğunu belli edecektir. Böylece ana şablondan gelene değiştirilebilir alanlar ile sonradan
iç şablonda oluşturulan alanlar birbirlerine karışmamış olacaklar.
DW içerisinde iç şablonların görünümü
İlgili değişiklikleri yaptıktan sonra kaydederek bu iç şablon dosyasını kapatabilirsiniz. Şimdi yeni bir doküman
açıp Modify / Templates / Apply template to pagemenüsü ile biraz önce kaydettiğimizi iç şablonu
sayfamıza uygulamaya başlıyoruz.
İç şablondan etkilenen dokümanlar güncelleniyor
Bu şablonu sayfaya uyguladıktan sonra sayfa içeriğini bir şeyler le doldurarak kaydediyoruz. Böylece ana
şablona bağımlı bir iç şablon yapısını sistemimizde kullanmış olduk.
Bazılarınızın aklında iki farklı şablon dosyası olmasından dolayı güncellemede sorun çıkabileceği düşüncesi
takılabilir. Fakat biraz öncede belirttiğimiz gibi "ana şablona bağımlı bir iç şablon yapısı" kullandığımız için
"GenelTasarim.dwt" dosyasında yapılacak herhangi bir değişiklik doğrudan "ikincilTasarim.dwt"
dosyasına oradan da bu iç şablonun kullanıldığı dosyalara yansıyacaktır. Yani güncelleme işlemleri aynı
şekilde devam edecektir.
Aynı şekilde iç şablon dosyasını açıp alt değiştirilebilir alanları içerisinde de değişiklikle yapabilirsiniz. Fakat
sadece ana şablon için belirlenmiş sarı çizgili değiştirilebilir alan için değişiklikler yapabilirsiniz.
Birkaç püf nokta
Şablonlar konusuna son verirken bazı inceliklere de deyinmek istedim. Bu püf noktalar sayesinde şablonları
daha verimli kullanabileceğinize inanıyorum.
Şablonsuz şablon
Şablon kullanarak tüm sitenizi yaptınız şimdi sitenizi yayınlamak istiyorsunuz fakat şablon kodlarınızın
başkaları tarafından görülmesinden rahatsızlık duyuyorsanız veya sitenizin kaynak kodlarını inceleyenlerin
şablon kullandığınızı bilmemelerini istiyorsanız sayfaları şablon kodları olmaksızın farklı bir konuma
kaydedebilir ve böylece temiz kaynak kodlara sahip dokümanları yayınlayabilirsiniz.
Şablon kodlarını temizlemek için; Modify / Templates / Export Without markup menüsü ile işe
başlayabilirsiniz.
Şablon tagları olmaksızın sayfaları kaydetmek
Açılan iletişim penceresinden dosyaları aktaracağınız site dışında bir klasörü seçip OK dediğinizde şablon
kodları olmayan sayfalarınız yaratılarak seçtiğiniz konuma kaydedilecektir.
Kaydedeceğimiz konumu seçiyoruz
Şablonlardan kurtulmak
Diyelim şablonlar ile bir çalışma yaptınız fakat memnun kalmadınız. Önceden şablon ile yapılandırılmış sayfa
üzerinde değiştirilebilir alanlar dışında da değişiklik yapmak istiyorsunuz fakat DW izin vermiyor. İşte bu gibi
durumlarda Modify / Templates / Detach from template menüsü ile şablon taglarından kurtularak
normal bir doküman gibi sayfayı istediğiniz şekilde düzenleyip kaydedebilirsiniz.
Bu şekilde şablondan kurtarılmış dosyalar artık şablon güncellemelerinden etkilenmeyecektir.
Dreamweaver Şablon Kütüphaneleri
Daha önceleri "Include" ile çalışan arkadaşlara yakın gelecek bir özellik olabilir aslında bu şablon
kütüphaneleri. Tek farkı statik HTML ile ve şablon mantığı ile çalışıyor olması.
Şablon kütüphaneleri ile çalışırken tanımlı sitelerle çalışmanız gerektiğini söylemeye gerek var mı bilmiyorum
fakat yeri gelmişken hatırlatalım. Nasıl bir site tanımlayacağımızı ise önceki makalelerde dile getirmiştik.
Hatırlamayan arkadaşlar o konulara dönüp tekrar gözden geçirebilirler.
Önceden tanımlı bir siteniz olduğunu var sayarsak şimdi şablon kütüphaneleri ile çalışmaya başlayabiliriz.
Şablon kütüphanesi (Library) kavramı
Şablon kütüphaneleri nedir öncelikle ona deyinelim isterseniz. Çalışma esası açısından şablonlara çok
benzemekle beraber daha esnek bir yapı sunarak sonradan yapılan müdahalelerde bizlere daha rahat bir
çalışma ortamı sağlamakta. Yönetim ve düzenlemeleri de oldukça basit bir ara yüz üzerinden yürütülmesi ise
bir diğer artısı olarak karşımıza çıkıyor.
Site ara yüz tasarımınızın belli parçalardan oluştuğunu var sayalım. (üst, alt, sağ-sol blok ve içerik gibi) Bu tür
bir tasarımda her sayfada tasarımı oluşturan elemanlara ihtiyaç olmayabilir. Örneğin bazı sayfalarda
yanlardaki bloklara gerek olmaksızın sadece alt ve üst kısım gerekebilir. Ya da duruma göre bunların kendi
içlerinde belli kombinasyonları söz konusu olabilir. Bir diğer bakış açısı da sitenizde devamlı kullandığınız bir
ara yüz bileşenini (bir çeşit menü ya da başlık grubu gibi) her defasında bir yerlerden kopyalamak yerine
bunu bir defaya mahsus olarak tanımlayıp gerektiğinde çağırmak için şablon kütüphanelerini kullanabiliyoruz.
Ayrıca kompleks tasarım elemanlarının yer aldığı bir ara yüzde bunlara sonradan müdahale etmenin
güçleşmesinden dolayı bunları ayrı birer şablon kütüphanesi şeklinde tanımlayıp sonradan düzenlemek de
işleri oldukça basitleştirecektir. Neyse bu kadar teorik bilgi yeter şimdi ufak bir uygulama görelim;
Yeni bir şablon kütüphanesi yaratmak
Öncelikle kayıtlı bir dokümanda ya da bir şablon dosyasında (.dwt uzantılı dosyalar) nerede olduğunun pek
önemi olmayan bir tasarım veya kullanmak istediğimiz objeyi içeren bir dokümanı DW içerisinde açıyoruz.
Burada dikkat etmemiz gereken; dokümanın çalıştığımız tanımlı site altında bir yerlerde kayıtlı olması. Zira
kullandığımız obje resim veya flash dosyası içeriyorsa ya da linkler site içerisinde başka bir yeri işaret ediyor
ise bunların site içerisinde farklı dizinlerde kullanılması sonucunda sorun yaratmaması için böyle bir yol
izlemekte fayda var.
Şimdi ileride farklı yerlerde kullanmak istediğimiz kısmı seçiyoruz.
[important]Eğer şablon kütüphanesi olarak tanımlayacağınız kısmı bir katman veya DIV içerisine alırsanız
seçmesi ve taşıması daha kolay olacaktır. Ayrıca kullanım yerine göre de düzgün görünmesini sağlamış
olursunuz.[/ important]
Seçim işlemini tamamladıktan sonra Modify / Library / Add object to library menüsü ile seçtiğimiz alanı
kütüphanemize dâhil edebiliriz.
Seçtiğimiz alanı bir şablon kütüphanesi olarak belirliyoruz
Eğer seçim yaptığınız alanda CSS stiller ile bir biçimlendirme yapıldı ise DW size bu objenin kullanıldığı yerde
düzgün görünemeyebileceğini, stillerin kopyalanamadığını bildiren bir uyarı mesajı gösterecektir. OK deyip
geçebilirsiniz.
Bu kütüphane objesi uygulandığı dokümanlarda düzgün görünmeyebilir
Bu menüyü seçtiğimiz anda Files panel grubu altında yer alan Assets paneli aktive olacak ve şablon
kütüphaneleri ile ilgili olan kısmı açılacaktır. Buradan kütüphane elemanınıza bir isim verebilirsiniz.
Kütüphane objemize bir isim verip kaydediyoruz
Bu panelden kütüphane objelerinizi yönetebilir ve sayfa içerisinde kullanmak üzere seçebilirsiniz. Sitenizde
tanımladığınız şablon kütüphanesi objeleriniz site dizini içerisinde "Library" klasöründe yer almaktadır.
Sitenizi sunucuya gönderirken bu dosyalarınızı göndermeniz gerekmiyor fakat bilgisayarınızdaki dosyalara bir
zarar gelmesi veya kazara silinmesi durumunda yedek olarak kullanmak için bu dosyaları da sunucuya
gönderebilirsiniz.
Böylece kendimize ait bir kütüphane objesi yaratmış olduk. Şimdi bu objeyi kullanmak istediğiniz bir
dokümanı DW içerisinde açıp ilgili bölgeye objenizi tutup sürükleyin. Objenin doğrudan istediğiniz bölgede
yerini aldığını göreceksiniz.
Kütüphane objelerinin DW içerisindeki görünümü
Eğer buraya uygun olmadığını düşünüyorsanız objeyi seçmek için üzerine bir kez tıklayıp, klavyeden "Del"
tuşunu basmak yeterli olacaktır.
Şablon kütüphanelerinin güncellenmesi
Daha önce anlatıldığı gibi yeni bir kütüphane objesi yaratıp bunu istediğiniz dokümanlarda kullandıktan sonra
bu obje üzerinde bir değişiklik yapmanız icap ettiğinde yineAssets panel üzerinden ilgili kütüphane objesinin
üzerine sağ tıklayıp "Edit" diyerek bu objeyi düzenlemeye başlayabilirsiniz.
Kütüphane objemizi güncellemek için üzerine sağ tıklayıp Edit dememiz yeterli
Bu kütüphane dosyaları <HEAD> ve <BODY> tagları içermeyen birer HTML dokümanlarıdır. Doğrudan DW
içerisinde bunları düzenleyebilirsiniz. Fakat burada dikkat etmeniz gereken bazı noktalar var.
Edit / Preferences menüsünden ayarlar penceresi içerisinde yer alan "New document" sekmesindeki
"Default encoding" ayarının "Türkçe" ve altındaki "Use opening existing file that don't specify an
encoding" seçeneğinin işaretli olduğundan emin olunuz. Çünkü biraz önce de bahsettiğimiz gibi bu
kütüphane objeleri dosyalarının <HEAD>, dolayısıyla da encoding tagları bulunmamaktadır. Bu gibi
durumlarda varsayılan encoding ayarının devreye girmesini bu ayar sayesinde sağlamış oluyoruz.
Yeni doküman ayarları
Bir diğer dikkat edilecek nota da; bu kütüphane objeleri dosyaları CSS stiller ile biçimlendirilmiş olabilirler ve
bu şekilde tek başlarına düzgün görünmeyebilir ve sizleri yanıltabilir. Bu şekilde harici dosyalarda CSS stilleri
görebilmek için kullandığımız "Design time styles sheets" özelliği ile bu kütüphane objesinin CSS etkisiyle
nasıl biçimlendirildiğini görebilir böylece daha rahat çalışabilirsiniz.
CSS panel müsünden Design Time seçeneğini seçiyoruz
Design time style sheet penceresinden bu objeyi etkileyen stili seçerek "Show only at design time"
kısmına ekleyerek tasarım anında görüntülenmesini sağlayabilirsiniz.
Design time style sheet iletişim penceresi
Artık rahat rahat tasarım yapmaya devam edebilirsiniz.
Design time stiller uygulandıktan sonra kütüphane dosyasının görünümü
Kütüphane objemiz ile ilgili değişiklikleri yaptıktan sonra File / Save menüsü ile kütüphane objesini
güncelleyebilirsiniz. Çıkan iletişim penceresinden "Update" diyerek etkilenen dosyaların güncellenmesini
sağlayabilirsiniz.
Bu kütüphane dosyasını kullanan doküman ve şablon dosyaları güncelleniyor
Burada da gördüğünüz gibi kütüphane dosyalarından etkilenen sadece dokümanlar değil ".dwt" uzantılı
şablon dosyaları da olabiliyor. Bu şekilde birçok şablonda ortak kullandığınız bir kütüphaneyi güncellediğinizde
aynı zamanda bu kütüphaneyi kullanan ve şablon ile biçimlendirilmiş tüm sayfaları da güncellemiş
oluyorsunuz.
Dreamweaver ve Timeline Uygulamaları
"Timeline" kavramına deyinerek yazımıza başlayabiliriz. Flash ya da bir video düzenleme programı ile
ilgilenmiş arkadaşlar için yabancı bir kavram olmayan bu "timeline" kelimesi "zaman çizelgesi" olarak
Türkçeye çevrilebilir. Yani adından da anlaşılacağı üzere bir süreç içerisinde hangi anda ne olacağını
belirleyebildiğimiz bir akış periyodu göstergesidir de diyebiliriz.
"DHTML" (Dynamic HTML) olarak tabir edilebilen ve JavaScript-CSS ilişkisinin beklide en yoğun kullanım
bulduğu alanlardan biridir bu timeline süreci. Birçok örneğine rastladığınız hareketli katmanları ve bir görünüp
bir kaybolan objeleri timeline ile DW içerisinde yapmak mümkün olabilmekte.
Biz burada basit bir örnek ile kullanımına deyinip panel hakkında genel bilgiler verecek ve yazıyı
tamamlayacağız. Tabi gerisi tamamen sizin hayal gücünüze kalmış. Örnek bir uygulama olarak hareket eden
katmanlar yapacağız. Sizde bu tür örnekleri çeşitli kombinasyonlar ile tekrarlayarak olayın mantığını daha iyi
kavrayabilirsimiz. Neyse fazla uzatmadan uygulamamıza geçelim.
Timelines Paneli
Bütün zaman çizelgesi uygulamalarımızı yönetebilmemize olanak tanıyan bu panele eğer açık
değilse Window / Timelines menüsü ile ulaşabilirsiniz. Standart olarak farklı bir konumda gelen
"Timelines" panelini ben rahat çalışabilmek adına "Results" paneli altına taşıdım. Sizde ihtiyaçlarınıza göre
panel gruplarını kendi aralarında yeniden sınıflandırarak verimliliğinizi arttırabilirsiniz.
Paneli kısaca tanıtmak gerekirse;
Timelines panelinin bileşenleri
 Timeline pop-up menu: Bu açılır menü o an üzerinde çalıştığımız zaman çizelgesini gösteriyor. Dikkat
ederseniz bu alan açılır bir menü, yani bu, bir sayfada birden fazla zaman çizelgesi, birden fazla
süreç olabileceği anlamına geliyor. Bu da çalışmalarımızda esneklik ve çeşitlilik kazandırmamızı
sağlıyor.
 Playback head: Bir zaman çizelgesi üzerinde kaçında karede (frame) yani animasyonun hangi anında
olduğumuzu belirtiyor.
 Frame numbers: Kare numarasını belirtiyor. Buradan da anlayacağınız üzere animasyonumuz (ya da
olay, süreç ne derseniz artık) karelerden yani "frame" lerden oluşmakta. Buradaki "frame" kavramını
daha önce anlatılan "Frame kullanımı" konusu ile karıştıranlar bu ikisinin farklı kavramlar olduğuna
dikkat etmeliler.
 Behaviors channel: Zaman çizelgemizdeki objeleri etkileyen Behavior'ları gösteren kanaldır.
 Animation bar: Animasyonun ne kadar süreceğini gösterir. Sağ ucundan tutup uzatıp kısaltarak
sürecin kaç kare boyunca devam edeceğini belirleyebilirsiniz.
 Keyframe: Anahtar kare olarak tabir edebileceğimiz animasyonun son karesidir. Bunun ne anlama
geldiğine birazdan deyineceğiz.
 Animation channel: Animasyon kanalıdır. Bir zaman çizelgesi birden fazla animasyon kanalı içerebilir.
Buda demek oluyor ki; bir süreç içersinde birden fazla olayı ve objeyi yönetebiliyoruz.
Paneli genel olarak tanıdığımıza göre genel zaman çizelgesi kavramlarına deyinebiliriz. Bu kavramlar bir
animasyon sürecinde ihtiyacımız olan terimleri belirtmesi açısından önem taşıyorlar.
Keyframe
Daha önceden Flash ile animasyon yapan arkadaşlar bunun ne anlama geldiğini biliyorlar aslında. Biz bir kez
daha tekrarlayalım. Animasyon süreci belirli bir kareden başlar ve başka bir karede biter. Bu aradaki zaman
dilimi içerisinde objeler çeşitli değişikliğe uğrayabilirler. Örneğin 0 numaralı karede X ekseninde 150px
konumunda bulunan bir katman 25. karede X eksenindeki 400. piksele hareket etmiş olabilir. Daha sonra ise
55. karede ise Y ekseninde 100px aşağı kaymış olabilir. İşte bu 25 ve 55. kareler birer "keyframe" olarak
adlandırılır ve objelerin parametre ve/ve ya özelliklerindeki belirli bir değişiklik olduğu anı belirtir.
Loop
Animasyon sürecinin bittikten sonra tekrar başa döneceğini belirtir. Animasyonumuz bu şekilde kendini
sonsuza kadar tekrar edecektir (sayfa açık olduğu sürece).
Autoplay
Animasyon sürecinin kendiliğinden otomatik olarak başlaması anlamına gelir. Yani sayfa yüklenir yüklenmez
(onLoad) süreç başlayacak ve kendini tamamlayacaktır. Fakat biz her zaman bunu istemeyebiliriz. Örneğin
bir linke tıkladığımızda sürecin başlamasını istiyorsak bu seçeneği işaretlememeliyiz.
FPS
Frame per second yani saniyedeki kare sayısını belirtir. Televizyon ve sinema gibi tüm hareketli
medyalar için geçerli bir kavramdır. Animasyonun akıcılığını belirtir. FPS değeri yüksek olan animasyon daha
yumuşak hareketlere sahiptir. FPS ne kadar düşük olarsa animasyon o kadar kesik biçimde ilerler. Hareketli
medyalarda FPS değeri dosya büyüklüğünü belirleyen önemli bir etkendir fakat zaman çizelgesi
uygulamalarında durum ne açıkçası bilmiyorum. DW içerisinde Timelines paneli üzerindeki "Fps" yazısı, bazı
Windows görsel stillerinde kaymalardan dolayı "Fas" gibi görünmektedir, aklınızda bulunsun :)
Örnek bir uygulama
Şimdi bu kadar teorik bilginin ardından biraz uygulama görmenin zamanı geldi. Şimdi sayfanıza Insert paneli
altındaki "Layout" sekmesi altında yer alan "Draw layer" düğmesi ile bir katman çiziyoruz. Biz bu örnekte
katman kullanacağız. Zaman çizelgesi uygulamalarında katmanlar yanında resimleri de kullanabilmekteyiz.
Tabi katman içerisine koyacağınız materyale göre birçok objeyi de kullanmak da mümkün.
Katman çizme düğmesi
Yeni bir katman çizdiğimiz an bu katman ile aynı isimde bir stilde dokümanımıza eklenecektir. Bu stil ile
katmanın konumu arka fon rengi hizalama ve boyut bilgilerini yönetebilmekteyiz. Sizde istediğiniz gibi bu stili
yapılandırarak size uygun bir hale getirebilirsiniz. Ben basit olarak rengini ve yazı tipi seçeneklerini
değiştiriyorum.
Bu değişiklikleri Properties paneli üzerinden yapabilirsiniz. Ben aşağıdaki değerleri uyguladım:
Katman özellikleri
 Layer ID: katman1
 L: 50px
 T: 35px
 W: 300px
 H: 30px
 Bg color: #99CC00
 Z-index: 1
Zaman çizelgesi içerisinde kullandığınız objelere sizin için anlam ifade eden ve çalışmalarınızı kolaylaştıracak
ID'ler vererek bu süreci daha az zahmetli bir hale getirebilirsiniz. DW'ın otomatik olarak verdiği
"layer1,image5..." gibi ID'ler ile çalışmak bazen can sıkıcı olabiliyor.
Şimdi bu katmanımızı zaman çizelgemiz içerisinde dahil edeceğiz. Hala açık değilse Window /
Timelines panelinden zaman çizelgesi panelimizi açıyoruz. 1. kareye sağ tıklayıp "Add Object" seçeneğine
tıklıyoruz.
İlgili kareye sağ tıklayıp Add Object menüsü ile objemizi zaman çizelgemize ekliyoruz
Bu seçenek yerine objeyi tutup Timelines paneli üzerine sürüklediğinizde de aynı işlemi daha kolay bir
biçimde yapmanız mümkün.
Eğer bu seçeneği ilk defa kullanıyorsanız DW bir uyarı mesajı göstererek "bu zaman çizelgesi uygulaması ile
katmanın sadece sol-üst kenarlara olan uzaklığını (konumunu), yüksekliğini, genişliğini, Z-index ve görünüm
parametrelerini değiştirebileceğiniz ve yükseklik-genişlik değişimlerinin Netscape 4.0'da çalışmayacağını"
belirtiyor. "OK" deyip geçiyoruz.
Obje ekleme uyarı mesajı
Şimdi zaman çizelgemizde 15. kareye kadar mor bir alan oluştu ve katmanın ismi (katman1) bu alanda yer
aldı. Bu animasyon sürecinin 15 kare süreceğini gösteriyor ve FPS değerimizde 15 olduğuna göre tam 1
saniyelik bir süreç anlamına geliyor. Bu mor alanın sonundaki ortasında yuvarlak olan kareyi tutup başka bir
kareye sürükleyerek animasyonun ne kadar süreceğini belirleyebiliriz. Ben 30. kareye kadar bunu uzatarak
animasyonun 30 kare sürmesini belirttim.
Timelines panelinin obje eklendikten sonraki görünümü
Bu ortasında yuvarlak olan kare bizim "keyframe" olarak tabir ettiğimiz anahtar karemizi gösteriyor.
Şimdi animasyonumuzun son karesi olan ve aynı zamanda anahtar karemizi de bünyesinde barındıran 30.
kareye tıklıyoruz ve Properties panelinden "L" değerini "500px" yapıyoruz. Bu değişikliği yaptığımız kare
anahtar kare olduğu için DW aradaki boşlukları kendisi hesaplayarak animasyonu ona göre yapılandırıyor ve
bunu da animasyon yolunu ince bir çizgi ile belirterek bize bildiriyor.
Animasyon yolunun görünümü
Burada objeyi eklediğimiz için DW otomatik olarak bir anahtar kare ekledi. Eğer siz animasyonlarınızda aralara
anahtar kareler tanımlayarak animasyonu ilerletmek ve ara değişimler tanımlamak
isterseniz Timelines panelinden mor alan içerisindeki ilgili kareye tıklayıp Modify / Timeline / Add
Keyframe menüsü ile bir anahtar kare tanımlayabilirsiniz.
Bu aşamada animasyonumuzu yapmış oluyoruz. Fakat henüz animasyonumuzu tetikleyen bir şey olmadığı
için sayfayı kaydedip kontrol ettiğinizde hiçbir şey olmayacaktır. "Autoplay" seçeneğini işaretleyip sayfayı
kaydedip denediğinizde ise animasyonun sayfa açılır açılmaz yürütüldüğünü göreceksiniz.
Autoplay uyarısı
"Autoplay" seçeneğini işaretlediğinizde dokümanın "onLoad" olayına zaman çizelgesinin yürütülmesi
komutunun eklendiğini belirten bir uyarı mesajı alacaksınız.Behaviors panelinin açıp "Tag selector" ile
BODY etiketini seçtiğinizde "onLoad" olayında "Play Timeline" isimli bir komut olduğunu göreceksiniz.
onLoad olayındaki Play Timeline komutunun Behaviors panelden görünüm
Buradan yola çıkarak bir linke tıklayarak da bu animasyon sürecini harekete geçirebileceğiniz sonucuna
varabilirsiniz. Link aracılığı ile animasyonu başlatmak için;
Öncelikle "Autoplay" seçeneğini eğer seçili ise kaldırıyoruz. Ardından bir metini seçip link olarak # veriyor ve
bu link seçili iken Behaviors panelden (+) işaretine tıklayarak açılan menüden Timeline / Play
Timeline seçeneğini seçiyor ve açılan iletişim penceresinden üzerinde çalıştığımız zaman çizelgesini
seçiyoruz.
Behaviors panelden Timeline / Play Timeline seçeneğine tıklıyoruz
Bu işlemi yaptığımızda seçtiğimiz linkin "onClick" olayına "Play Timeline" komutu eklenecek ve bu linkte
tıkladığımızda animasyonumuz başlayacaktır. Aynı şekilde animasyonu durdurmak (Stop Timeline) ve belirli
bir karesine atlamak (Go to Timeline Frame) komutlarını da linklere atayarak zaman çizelgesi üzerinde
hakimiyet kurabilirsiniz. Öte yandan animasyonun devamlı tekrarını sağlayan "Loop" seçeneği de
animasyonun son karesindeki "Go to Timeline Frame" seçeneğine 1 değeri verilerek yapılan bir etkidir.
Animasyon son kareye kadar ilerler ve son karede 1. kareye geri dön komutu ile animasyonu baştan oynatır
(Flash'daki ActionScriptler gibi).
Gelişmiş seçenekler
Birde resim animasyonu örneği verelim. Sayfaya bir resim ekliyoruz ve bu resmi Timelines paneli üzerinde bir
noktaya sürükleyerek bu objeyi zaman çizelgemize eklemiş oluyoruz. Bu aşamada DW bize yine bir uyarı
gösteriyor ve "resimlerin sadece SRC parametrelerinin yani resimlerin kaynaklarının zaman çizelgesi
uygulamalarında değiştirilebildiğini ve konumunu değiştirmek istiyorsak bunu bir katman içerisine koyarak
katmanı hareketlendirmemiz gerektiğini" söylüyor. E haksız da değil tabi :)
Resim objesi ekleme uyarısı
Bizde eklediğimiz objeyi zaman çizelgesinden silip bunu bir katmanın içine yerleştiriyor ve bu katmanı zaman
çizelgesi üzerine sürükleyerek bu kısıtlamadan kurtuluyoruz.
Birden fazla obje ile çalışırken her objeyi farklı animasyon kanallarına atmak zaman çizelgesini yönetmek
açısından kolaylık sağlayacaktır. Bu nedenle biz burada içerisinde resim olan katmanı ikinci kanala
sürüklüyoruz. Şimdi sondaki anahtar kareden tutup mor alanı uzatarak animasyon sürecini ayarlıyoruz. Ben
20. kareden başlayıp 45. karede biten bir süreç yarattım.
resimliKatman‟ı ekledikten sonra Timelines panelinin görünümü
Son kareye tıklayarak katmanın yerini değiştirip animasyona bir hareket sağlayabilirsiniz. Ayrıca ek
olarak Properties paneldeki "Visibility" seçeneğini de "hidden" yaptığınız da katman animasyonun bu
karesine geldiğinde görünmez olacak ve ekrandan silinecektir.
Doğrusal olmayan hareketler
Şimdi doğrusal hareketler yerine biraz daha karmaşık hareketleri nasıl yapacağımız konusunda gelelim. Bu
işlem için "Record Path Of Layer" seçeneğini kullanacağız. Bunun için animasyonunuzun başlamasını
istediğiniz kareye tıklayıp ilgili katmanı seçiyoruz ve Timelines panelinden başlangıç karesine sağ tıklayıp
açılan menüden "Record Path Of Layer" seçeneğini seçiyor ya da Modify / Timeline / Record Path Of
Layer menüsüne tıklıyoruz.
İlgili kareye sağ tıklayıp Record Path of Layer seçeneğini seçiyoruz
Bu aşamadan sonra DW katman üzerinde yaptığımız sürükleme hareketlerinin güzergâhını kaydedecek ve bu
yaptığımız hareketler doğrultusunda otomatik olarak anahtar kareleri ve animasyon uzunluğunu
ayarlayacaktır. Sürecin uzunluğu "Record Path Of Layer" menüsüne tıkladığınız anda başlayacaktır.
Katmanın sol üst köşesinden tutup farenin sol tuşunu basılı tutarak yaptığınız hareketler kaydedilecek ve
ekranda gidiş yolu çizilecektir.
Katmanı tutup istediğimiz konumlara sürüklüyoruz
Sürükleme işlemini bitirdiğinizde ve farenin sol tuşunu serbest bıraktığınız anda zaman çizelgesi paneli kendini
bu hareketler doğrultusunda yapılandıracaktır.
Hareket sonrası zaman çizelgesinin görünümü
Bu sayede sizde istediğiniz gibi kompleks animasyonlar yaratabilir ve Flash animasyonlarını aratmayacak cıvıl
cıvıl sayfalar yaratabilirsiniz. Fakat bu işlemlerin karmaşık JavaScript'ler ile yapıldığını ve tüm tarayıcıların bu
özellikleri destekleyemeyebileceğini de unutmadan bu işlemleri yapmayı da aklınızdan çıkarmamalısınız.
Dreamweaver Klavye Kısayolları
Klavye kısayollarının yönetimi
Dreamweaver içerisinde klavye kısayollarını kullanmanın dışında önceden kullandığınız başka bir editördeki
kısayollar gibi DW kısayollarını da yapılandırabiliyorsunuz. Genelde belli kısayollara alışmış bir kullanıcı için
yeni ve başka bir sistemi kullanamaya başlamak oldukça zor olabilmekte. Bu bakımdan DW içerisinde Edit /
Keyboard Shortcuts menüsü ile DW kısayollarını yeniden yapılandırabiliyorsunuz.
Edit / Keyboard Shortcuts menüsü ile DW kısayollarını yeniden yapılandırabiliyorsunuz
Klavye kısayolları yapılandırma penceresinden kısayollar ile ilgili bütün işlemleri yapmak mümkün.
Klavye kısayolları yapılandırma penceresi
Current Set: Bu açılır menüden kullandığınız diğer programlardaki ön tanımlı kısayolları doğrudan DW
içerisine aktarabilme şansına sahibiz. Örneğin eski bir "HomeSite" fanatiği için buradaki klavye kısayollarını
görmek eminim oldukça heyecan verici olacaktır. Aynı Şekilde "Dreamweaver MX 2004" kullanıcıları da
alıştıkları düzene buradan geçiş yapabilirler.
Bu menü ile tanımlı bir profili seçebilirsiniz.
"Current set" ile aynı hizada yer alan düğmeler ile de seçili kısayolları profillerini yönetebilirler.
 Duplicate: Seçili olan profilin bir kopyasını oluşturmanızı sağlar. Böylece varolan profile zarar
vermeden kendi profilinizi düzenleyebilirsiniz.
 Rename: Seçili profili yeniden adlandırır.
 Save as HTML File: Profilin bir HTML çıktısını istediğiniz konuma kaydeder. Bu özellik tüm kısayolları
bir arada görüp tekrar düzenlemeniz gerektiğinde çok işinize yarayabilir.
 Delete: Seçili profili siler.
Commands: Bu açılır menü ile hangi kısayol grubunu düzenlemek istediğinizi seçebilirsiniz.
Shortcuts: bölümünde yer alan (+) ve (-) düğmeleri ile seçtiğiniz işlem için yeni kısayollar ekleyip
silebilirsiniz. "Press key" kısmında ilgili tuş kombinasyonlarına basıp "Change" düğmesi ile kısayolu
değiştirebilirsiniz.
Klavye kısayollarının yönetimi bu şekilde. Şimdi yazımıza sıkça kullanabileceğiniz bazı işlemlerin klavye
kısayollarına deyinerek yazımıza devam edelim.
Klavye kısayolları
Ok tuşlarının kullanımı sadece Windows kullanıcıları için geçerlidir.
Windows içerisindeki "Control (CTRL)" tuşu yerine "Macintosh" kullanıcıları "Command", "Enter" tuşu
yerine ise "Return" tuşunu kullanabilirler.
Paneller arası geçiş
Doküman penceresi içerisinde çalışırken Control+Alt+Tab ile panel grubu odaklamasıı değiştirebilirsiniz.
Odaklanamnın hangi panelde olduğunu panel başlığı çevresindeki kesikli çizgilerden oluşan çerçeveden
anlayabilirsiniz. Tekrar Control+Alt+Tab kombinasyonu ile sonraki panele geçebilirsiniz. Bir önceki panele
dönmek için ise Control+Alt+Shift+Tab tuş kombinasyonunu kullanabilirsiniz. Bu tuş kombinasyonları ile
kod görünüm ve tasarım görünüm arasındaki geçişleri de yapabilmeniz mümkün.
Panel kısayolları
Eğer ilgilendiğiniz panel açık değilse panel klavye kısayolu ile paneli açıp kapatabilirsiniz. İstediğiniz panelin
başlık çubuğu odaklı iken "Space (boşluk)" tuşu ile paneli genişletebilir "Tab" tuşu ile de panel içerisinde
gezinebilirsiniz. Eğer birden fazla alt paneli olan bir panel grubunda diğer sekmelere geçmek isterseniz
"CTRL+Tab" (Windows) ya da "Option+Tab" (Macintosh) kombinasyonunu kullanabilirsiniz.
Seçenekleri olan bir alana geldiğinizde ok tuşlarını kullanarak seçimleri değiştirebilirsiniz.
İletişim pencereleri içerisinde
"Tab" tuşu ile seçenekler arası geçişler yapabilirsiniz. Eğer seçenek birden fazla opsiyon içeriyorsa (örneğin
açılır menüler-combo box'lar gibi) ok tuşları ile herhangi birini seçebilirsiniz.
Eğer iletişim penceresi birden fazla sekme içeriyorsa "CTRL+Tab" (Windows) ya da "Option+Tab"
(Macintosh) kombinasyonunu ile sekmeler arası geçiş yapabilirsiniz.
İletişim penceresinden çıkmak için "Enter" (Windows) ya da "Return" (Macintosh) tuşuna basabilirsiniz.
Frameler ile çalışırken
Doküman penceresinde çalışırken "Alt+Üst ok" tuş kombinasyonu ile aktif frame'e odaklanılabilir. "Alt+Üst
ok" kombinasyonuna basmaya devam ederek Frameset seçimi de yapmak mümkündür.
"Alt+Aşağı ok" ile alt framelere (child frames) odaklama yapılabilir. "Alt+Sağ-Sol ok" tuşları ile frameler
arası geçiş yapılabilir.
Tablolar ile çalışrken
Tablo içerisinde ok tuşları yada Tab duşu ile hücreler arası geçiş yapabilirsiniz. "Control+A" (Windows) ya
da "Command+A" ile hücreyi seçebilirsiniz. Tüm tabloyu seçmek için bu tuş kombinasyonuna iki kez
basmanız yeterli olacaktır.
Bir tablodan çıkmak için üç defa "Control+A" (Windows) ya da "Command+A" kombinasyonuna basmanız
yeterlidir.
Kısayollar tablosu
İşinize yarayacak en sık kullanılan kısayolları bu tablodan takip edebilirsiniz.
File Menüsü
Komut
Windows
Macintosh
Yeni Döküman
Control+N
Command+N
Bir HTML dosyası
aç
Control+O, Yada Site dosya menüsünden
doküman penceresine sürükleyin
Command+O
Frame'in içine aç
Control+Shift+O
Command+Shift+O
Kapat
Control+W
Command+W
Kaydet
Control+S
Command+S
Farklı Kaydet
Control+Shift+S
Command+Shift+S
Linkleri Kontrol et
Shift+F8
Command+F8
Geçerlilik kotrolü
yap
Shift+F6
Command+F6
Çıkış
Control+Q
Command+Q
Edit (Düzen) Menüsü
Komut
Windows
Macintosh
Geri al
Control+Z
Command+Z
Tekrar yap
Control+Y ya da Control+Shift+Z
Command+Y ya da Command+Shift+Z
Kes
Control+X ya da Shift+Del
Command+X ya da Shift+Del
Kopyala
Control+C ya da Control+Ins
Command+C ya da Command+Ins
Yapıştır
Control+V ya da Shift+Ins
Command+V ya da Shift+Ins
Özel yapıştır
Control+Shift+V
Command+Shift+V
Temizle
Delete
Delete
Tümünü Seç
Control+A
Command+A
Üst etiket seç
(Parent tag)
Control+[
Command+[
Alt etiket seç
(Child tag)
Control+]
Command+]
Bul ve Değiştir
Control+F
Command+F
Sonrakini bul
F3
Command+G
Seçileni bul
Shift+F3
Shift+F3
Satıra git
Control+G
Command+G
Code Hınts göster
Control+Space
Command+Space
Kod içeri al
Control+Shift+>
Command+Shift+>
Kod dışarı al
Control+Shift+<
Control+Shift+<
Harici editörü aç
Control+E
Command+E
Özellikler
Control+U
Command+U
View (Görünüm) Menüsü
Komut
Windows
Yakınlaş
Control+=
Uzaklaş
Control+-
100% yakınlaşma
ya daanı
Control+Alt+1
Seçimi sığdır
Control+Alt+0
Hepsini sığdır
Control+Shift+0
Genişliğe sığdır
Control+Shift+Alt+0
Görünüm modunu
değiştir
Control+`
Tasarım
görünümünü zatele
F5
Server Debug
Control+Shift+G
Live Data
Control+Shift+R
Genişletilmiş tablo
modu
F6
Layout Mod
Control+F6
Macintosh
Tablo düzenleme işlemleri
Komut
Windows
Macintosh
Tablo Seç (Tablo'da
gelişigüzel)
Control+A
Command+A
Sonraki hücreye git
Tab
Tab
Önceki hücreye git
Shift+Tab
Shift+Tab
Row (yaty sıra) ekle
(geçerliden önce)
Control+M
Command+M
Tablo sonuna satır
ekle
Tab in the last cell
Tab in the last cell
Geçerli satırı sil
Control+Shift+M
Command+Shift+M
Kolon ekle
Control+Shift+A
Command+Shift+A
Kolonu sil
Control+Shift+ - (hyphen)
Command+Shift+ - (hyphen)
Seçili hücreleri birleştir
Control+Alt+M
Command+Option+M
Hücreleri ayır
Control+Alt+S
Command+Option+S
Metin ekleme işlemleri
Komut
Windows
Macintosh
Yeni paragraf yarat
Enter
Return
Line break (ekstra satır)
Insert et
Shift+Enter
Shift+Return
Nonbreaking space (Ekstra
Boşluk) Insert et
Control+Shift+Spacebar
Option+Spacebar
Objeyi yada metni sayfa
içinde başka bir yere
hareket ettir
Seç ve yeni konuma sürükle
Drag selected item to new
location
Obje yada metni sayfa
Control+Seç ve yeni konuma sürükle
Option-drag selected item to new
içinde başka bir yere
kopyala
location
Bir kelime seçmek
Double-click
Double-click
Kitaplıktan bir madde ekle
Control+Shift+B
Command+Shift+B
Properties panelinde aç
yada kapa sdasa
Control+Shift+J
Command+Shift+J
Yazım hatasını kontrol et
(yanlızca ingilizce)
Shift+F7
Shift+F7
Yardım almak
Komut
Windows
Macintosh
Dreamweaver Yardım
Konuları
F1
F1
ColdFusion yardım
Control+F1
Command+F1
Referanslar
Shift+F1
Shift+F1
Dreamweaver CSS Kullanarak Sayfa Ara Yüz Tasarımı
Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez
ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı
yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet
alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2.0 kavramının
gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web
teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile.
Modern tasarım süreçlerinin bazı yaptırımları vardır. Aslında bunlara "yaptırım" demek ne kadar doğru
bilemiyorum ama geçerli bir sayfa yapmak için bunlara dikkat etmemiz gerekiyor. Makaleyi okuyan birçok
arkadaş için sıkıcı bir konu olsa da bu hususları işin başından ele alarak ileride yaşanacak muhtemel hataları
elimine edebilirsiniz.
Bunlardan bazıları şu şekilde sıralanabilir.
1.
2.
Sayfalar doğru doküman türü tanımlamasına (DOCTYPE) sahip olmalılar
3.
Kullanılan HTML (veya XHTML) ve CSS kodları geçerli ve W3C standartlarına uygun olmalı ve
geçerleme motorlarından (validator) hatasız olarak geçebilmeli.
Sayfa tasarım bileşenleri tablo hücreleri yerine DIV'ler içerisine yerleştirilerek konumlandırma ve
hizalamalar tamamıyla CSS ile ve "CSS kutu modeli" (CSS Box Model) göz önüne alınarak
yapılmalı.
Doğru DOCTYPE
İlk madde olan doğru "DOCTYPE" bilgisinin seçilmesi konusuna ilgili makalede oldukça ayrıntılı bir biçimde
deyinmiştik. Genel bir özet olarak şunları belirtmekte fayda var; eğer spesifik olarak XHTML'e ihtiyaç
duymuyorsanız (sayfanız XML verisi içermiyorsa) ve standart olarak bir HTML sayfası tasarlıyorsanız, başka bir
deyimle amacınız sayfanızı anlaşılabilir bir biçimde kullanıcılara sunmak ise kullanmanız gereken doküman
türü "HTML 4.01 Strict" tanımlamasıdır.
Doğru "DOCTYPE" tanımlaması sayfa tasarımlarımızda tarayıcılar arası kayma ve farklı görünüm sorunlarının
aşılması açısından en önemli aşamalardan biridir. Eğer doküman türü doğru tanımlanmaz ise safta tarayıcı
tarafından hatalı olarak, "Garip Mod" (Quirks Mod) adı verilen bir durumda yorumlanacak bu durum da
sayfamızın hatalı görünmesine sebep olacaktır.
CSS Kutu modeli (BOX model)
CSS2 ile sıkça konuşulur olan bu CSS kutu modeli, sayfadaki tüm içerik alanlarını birer kutu gibi değerlendirir
ve boyutlandırma ve konumlandırma işlemini özel bir algoritma ile algılar. Burada sözü geçen "kutular"
içeriğimizi yerleştirdiğimiz HTML bileşenlerini ifade etmektedir. (Örneğin DIV, tablo, başlık ve/veya
paragraflar) Eğer bir dokümanın "DOCTYPE" bilgisi doğru bir biçimde tanımlanmış ise modern tarayıcılar
"Standart Mod" ile çalışıp bu içerik alanı bileşenlerinin boyutlarını hesaplarken şöyle bir yol izler;
Bir objenin (kutunun) tüm genişliği; içerik (content area) + çerçeve kalınlığı (border) + kenar boşluları
(padding) değerlerinin toplamına eşittir. Yani CSS'de "width: 300px" olarak belirtilen bir DIV etiketinin
genişliği sadece içerik alanının (content area) belirtir. Eğer bu DIV etiketinin çerçeve kalınlığı 1 piksel ve
içeriğin DIV sınırlarına olan uzaklık bilgisi (padding) de 10 piksel ise bu DIV etiketinin toplam kapladığı alan:
sol çerçeve+sol boşluk+içerik+sağ boşluk+sağ çerçeve
1+10+300+10+1=322 pikseldir.
CSS kutu modeli şematik görnümü
Modern tarayıcılar Standart mod ile çalışırken bunu algılayıp yaptığınız biçimlendirmeleri buna göre
yorumlarlarken, diğer taraftan Garip mod ile çalışırken eski tarayıcılar gibi yorumlarlar. Eski tarayıcılarda ise
bu 300 piksellik genişlik DIV etiketinin toplam genişliğini bildirir ve içeriğin genişliği, kenar boşluları ve
çerçeve genişliği bu değerden çıktıktan sonra kalan değere (300-22=278 piksel) eşittir.
CSS kutu modeli hakkında daha detaylı bilgi için;
 http://www.unbf.ca/altiustu/arsiv/2005/02/kutucuk_modeli.php
 http://www.fatihhayrioglu.com/?p=13
 http://www.yakuter.com/cssin-temeli-kutu-modeli
 http://www.godoro.com/Divisions/Ehil/...BoxModel.html
Geçerli kodlar
Bu konu, sayfalarımızın tarayıcılar tarafından daha kolay ve doğru yorumlanması ve yaptığımız hataları daha
kolay algılayıp müdahale etmemizi sağlaması açısından oldukça önemli bir yere sahiptir. Web tasarımı ile
ilgilenmeye başlayan birçok kullanıcı yaşadığı basit sorunların neden kaynaklandığını, sayfalarını geçerli hale
getirmeye çalışırken görebilirler.
Örneğin bir etiketi (HTML tag) kullanılmaması gereken bir yerde kullanıldığında bu standartlara uygun
olmayan bir sayfadır ve muhtemelen tarayıcı tarafından hatalı yorumlanmaya sebep olan bir durumdur. Acemi
kullanıcı bu geçerlilik kuralını sayfasına uyguladığında yaşadığı sorunu da halletmiş olacaktır. Bu geçerlilik
kuralları web geliştiricilerin işlerini kolaylaştırmak ve standart bir kod yapısı ile uyumluluğu arttırmak amacı ile
konmuşlardır. Neden sayfalarımızı geçerlememiz gerektiği ve bunun için yapabileceklerimiz hakkında daha
detaylı bilgiyi Roger Johansson'ın "Web Standartlarını Kullanarak Geliştirmek" başlıklı nefis
makalesinden alabilirsiniz.
Sayfalarımızın standartlara uygun olup olmadığını W3C (web komisyonu) geçerleme motorundan kontrol
ettirebilir hatalarımızı daha yakından görebiliriz.
Evet, biraz uzun bir giriş oldu fakat yeni bir sayfa yapmaya başlamadan önce bunları göz önünde
bulundurmamız gerekmektedir. Şimdi uygulamaya geçebiliriz.
Dreamweaver ile Sayfa Ara Yüz (Layout) Tasarımı
Sayfamızın tasarımını yaparken tablolar yerine CSS ve DIV kullanacağımızı belirtmiştik. Birçok yeni başlayan
kullanıcının yaşadığı en büyük handikaplardan biri olan tasarımda istenilen objenin istenilen yere
yerleştirilememesi ve hizalanamaması sorununu aşmak için CSS kullanacağız. Tabi bunun için en azından
temel CSS bilgisine ihtiyacımız var. Bu makalede CSS bilgisine girip konuyu fazla dağıtmak istemiyorum.
Genel olarak temel noktalara deyineceğim. Fakat burada bahsi geçen uygulamaları anlayabilmeniz için ilgili
CSS kaynaklarından kendinizi geliştirmenizi şiddetle tavsiye edeceğim. Aksi takdirde söz ettiğimiz şeyler
havada kalacaktır.
İçinizde CSS Zen Garden'ı (ZG) görenleriniz olmuştur. ZG birçok web geliştiricin ilham kaynağı olmuş ve
CSS'in sadece metinleri biçimlendirip rollover text-linkler yapmaktan öte tek başına bir web sayfasını baştan
aşağı CSS ile biçimlendirilebileceğini bizlere göstermiştir. İncelediğinizde fark edeceğiniz üzere ZG'daki bütün
tasarımların HTML kaynak kodları aynı olup değişen tek şey sayfaya bağlı olan ".css" dosyasıdır. Söz gelimi
"bu" sayfa ile "şu" sayfanın kanyak kodlarına bakarsanız birebir aynı olduklarını görebilirsiniz :) Oldukça
etkileyici değil mi?
Bizde sayfamızı tasarlarken CSS'in bu güçlü özelliklerinden faydalanacağız. Bu makalede hazırlayacağımız
örnek tasarım 2 veya 3 sütunlu standart blog ve portallerde görebileceğiniz sayfa düzenidir. Fatih
Harioğlu'nun sayfasındaki bahsi geçen makaleyi temel alarak anlatıma devam edeceğim. Tasarımın aşağıda
görüldüğü üzere sabit genişlikte bir dış çerçeve (#sayfa), başlık bölümü (#ustAlan), sol sütun (#anaMenu),
içerik sütunu (#icerik) ve alt kısımdan (#altAlan) oluşmaktadır.
2 sütunlu ve sabit genişlikli genel sayfa tasarımının şematik görünümü
Sayfanın bitmiş halini görmek için buraya indirmek için ise buraya tıklayınız.
Şimdi DW'da File / New menüsü ile yeni bir HTML dokümanı açın. Yeni dokümanı açarken "Document
Type (DTD)" olarak "HTML 4.01 Strict" seçili olduğuna dikkat edin. Dokümanı oluşturup uygun bir konuma
kaydedin.
Yeni bir HTML dokümanı oluşturuyoruz
Şimdi sayfaya, tüm tasarımı kapsayıp ve toparlayan çerçeve olan "sayfa" isimli bir DIV ekliyoruz. Bunun için
"Insert" paneldeki "Layout" sekmesi altında yer alan "Insert Div Tag" düğmesini ya da Insert / Layout
Objects / Div Tag menüsünü kullanabilirsiniz.
Sayfaya bir DIV ekliyoruz
Açılan iletişim penceresinden "ID" kısmına "sayfa" yazıyoruz. "Class" bilgisini şimdilik boş bırakıyoruz.
Birazdan tüm DIV'ler için stil tanımlamalarını toplu olarak yapacağız.
DIV ekleme iletişim penceresi
Şimdi eklediğimiz "sayfa" isimli DIV etiketinin içine sırayla "ustAlan", "anaMenu", "icerik" ve "altAlan" isimli 4
tane daha DIV ekliyoruz. Sayfanın DW içersindeki son hali şuna benzemelidir;
Sayfanın son halinin DW içerisindeki görünümü
"sayfa" DIV'inin içerisine diğer DIV'leri eklerken kolaylık olması açısından "sayfa" içerisinde "Content for id
"sayfa" Goes Here" yazısını seçip bir defa ENTER(Return) tuşuna basarak yeni bir paragraf
oluşturabilirsiniz. Bütün DIV'leri ekledikten sonra sondaki veya aralardaki fazla paragrafları silmeyi unutmayın.
Gördüğünüz gibi sayfa ana iskeleti bu şekilde olacak. Hangi DIV'in nasıl boyutlandırılıp hizalanacağını ise CSS
ile belirteceğiz.
CSS tanımlamaları
Sayfaya herhangi bir müdahale yapmadan "CSS Styles" panelini eğer açık değilse Window / CSS
Styles menüsü veya Shift+F11 tuş kombinasyonu ile açıyor ve sağ üst köşedeki sembole tıklayıp açılan
menüden "New..." seçeneğine tıklıyoruz.
Yeni bir stil tanımlamaya başlıyoruz
Açılan iletişim penceresinden "Selector type" kısmından "Tag (redefines the look of a spesific tag)"
seçeneğini seçiyor, "Tag" kısmından "body" etiketini buluyor ve "Define in" bölümünden de "New Style
Sheet File" seçeneğini seçiyoruz. "OK" diyerek "body" etiketi için stil tanımlaması yapmaya başlıyoruz. Bu
stil yarattığımız ilk stil olduğu için DW yeni bir stil dosyası yaratacak ve bunu nereye kaydetmek istediğiniz
soracaktır. Şuan çalıştığınız doküman ile aynı veya herhangi bir alt dizinde bir yere uygun bir isimle
(örneğin stiller.css) stil dosyasını kaydedip işleme devam ediyoruz.
Yeni stil oluşturma iletişim penceresi
"body" etiketi HTML dokümanımızın ana gövde kısmını belirten bölüm olup sayfa arka fon rengi, kenar
boşlukları, metin rengi ve boyutu gibi özellikleri tanımlamamıza yarar. Stil özellikleri iletişim penceresinden
sayfamız ile ilgili ana biçim özelliklerini belirliyoruz. Bu örnekte arka fonu açık mavi olan ve kenar boşlukları
olmayan bir sayfa tasarlayacağız. Bunun için neleri değiştireceğinizi bildiğinizi varsayarak bu kısmı hızlı
geçiyorum. "body" için stil özellikleri şu şekilde olacak;
 Type
o
o
o
o
Font: Verdana, Arial, Helvetica, sans-serif
Size: 11 pixels
Line height: 13 pixels
Color: #000000
 Background
o Background-color: #E0F0F8
 Block
o Text-align: center
 Box
o Padding: 0 pixels
o Margin: 0 pixels
Body için stil özelliklerini belirtiyoruz
"OK" dediğiniz anda dokümanın arka fon rengi açık mavi olacak ve sayfadaki tüm yazılar ortalanacaktır.
Endişelenmeyin hep böyle kalmayacak. Metinleri ortalamamızın sebebi tasarımın tam ortada olmasını ve
kullanıcının çözünürlüğü ne olursa olsu daima tarayıcının ortasında yer almasını sağlamaktır.
"body" biçimlendirmesini de bu şekilde yaptıktan sonra DIV'leri biçimlendirmeye başlayabiliriz. Tekrar CSS
Styles panelinden sağ üst köşedeki düğmeye tıklayıp "New..." diyerek yeni bir stil tanımlıyoruz. Açılan
iletişim penceresinden "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini
seçiyoruz. "Selector" olarak "#sayfa" yazıyoruz.
#sayfa için stil tanımlaması yapıyoruz.
İçinizde neden stil ismi olarak "#" ile başlayan bir isim girdiğimizi merak edenler olabilir. Bunu şu şekilde
açıklayabiliriz; hatırlarsanız biraz önce "sayfa" ID bilgisine sahip bir DIV yaratmıştık. CSS tanımlamalarında
"#" ile başlayan stiller birer ID tanımlamalarını belirtir ve sadece ilgili ID'ye sahip elemanları ve bu elemana
bağlı alt elemanları kapsar. Tahmin edeceğiniz üzere de "#sayfa" isimli bir tanımlama "sayfa" ID'li DIV'i yani
tasarımımızı çevreleyen ana DIV'i belirtmektedir.
#sayfa
"#sayfa" için stil özelliklerini tanımlayarak işleme devam edebiliriz. Ben özellikleri şu şekilde belirledim.
 Block
o
Text-align: left
o
o
o
width: 760 pixels
Padding: 0 pixels
Margin:
 Top: 0 pixels
 Right: auto
 Bottom: 0 pixels
 Left: auto
 Box
Burada gördüğünüz üzere "sayfa" isimli DIV elemanının genişliğini 760 piksel olarak belirledik. Bu değer
800x600 çözünürlükte dahi tarayıcı ekranına sığabilen bir değerdir. Bu, "sayfa" DIV'i tüm tasarımı dışardan
çepeçevre sardığından tasarımımızın maksimum genişliğinin 760 piksel olabileceği anlamına geliyor. Aynı
zamanda sayfanın ortalanması içinde "margin" yani objenin diğer tasarım elemanlarına ve objelere olan
mesafe bilgisinde sağ ve sol boşluk değerlerinin "auto" olarak belirtilmesi gerekiyor. Bu değer sayesinde
"icerik" DIV'inin sağ ve sol kenarlara olan uzaklığı otomatik olarak ayarlanacak başka bir değişle her iki yana
da eşit uzaklıkta olması (sayfanın ortasında) sağlanacaktır. Dikkat çekmek istediğim bir diğer nokta da
"padding" yani içeriğin kenarlara olan mesafe bilgisinin 0 piksel olarak ayarlanmasıdır. Bu tür çok elemanlı
sayfa tasarımlarında dış objelerin "margin" ve "padding" değerlerinin 0 olarak atanıp daha sonra iç DIV ve
elemanların kendi değerlerinin belirtilmesi her zaman için daha pratik ve sağlıklı bir yöntemdir. Tabi dış
objelerin de değişik değerlere sahip olduğu durumlar olabilir bu tamamen isteğinize ve gereksinimlerinize
bağlı bir konudur.
"#sayfa" stil tanımlamasını yaptığınız anda sayfa içeriği ortalanacak fakat metinler sola hizalı olacak şekilde
konumlandırılacaktır. Evet, yavaş yavaş sayfamız biçimlenmeye başladı.
#ustAlan
Tekrar yeni bir stil yaratıyoruz ve yine "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)"
seçeneğini seçiyoruz. "Selector" olarak "#sayfa #ustAlan" yazıyoruz. Bu "ustAlan" yani sitemizin üst
kısmını temsil eden DIV'in biçimlendirilmesi anlamına geliyor.
Bir CSS tanımlaması yaparken aralarında boşluk bırakarak yapılan isimlendirmeler, "element > alt
element" şeklinde stil tanımlamaları yapmamıza olanak sağlar. Bu örnekte "sayfa" DIV'inin içindeki "ustAlan"
DIV'ini biçimlendirmek için "#sayfa #ustAlan" yazıyoruz. Yine aynı şekilde "ustAlan" DIV'inin içindeki "H1"
başlık biçimini CSS ile biçimlendirmek için de "#sayfa #ustAlan h1" yazmamız yeterlidir.
"ustAlan" için stil özellikleri; "#sayfa #ustAlan"
 Background
o Background-color: #F36507
 Box
o Width: 760 pixels
o Height: 75 pixels
o Padding: 0 pixels
o Margin: 0 pixels
 Border
o Bottom: Solid, 7 pixels, #000000
 Positioning
o Type: Relative
"ustAlan" ın genişliğini "icerik" ile aynı yani 760 piksel, yüksekliğini de 75 piksel olarak ayarladık. "margin"
ve "padding" değerlerini 0 piksel olarak girdik. Hoş bir görünüm elde etmek için 7 piksellik bir alt çerçeve
yaptık. İleride yapacağımız pozisyonlama belirtmelerinden etkilenmemesi için de "Positioning" bölümünden
"Type" değerini "Relative" olarak ayarladık.
#anaMenu
Aynı şekilde "anaMenu" için stil özellikleri; "#sayfa #anaMenu"
 Background
o Background-color: #FFFFFF
 Box
o Width: 200 pixels
o Padding: 0 pixels
o Float: left
o Margin:
 Top: 5 pixels
 Right: 0 pixels
 Bottom: 5 pixels
 Left: 0 pixels
Dikkat ettiyseniz "anaMenu" için genişliği 200 piksel girdik, "Float" değeri olarak da "left" verdik. Böylece
sola hizalanmış 200 piksel genişliğinde bir sütunumuz oldu. (Objeleri hizalamak için CSS içerisinde "Float"
özelliğini kullanmaktayız), "magrin" değerlerini de "Top" ve "Bottom" için 5 piksel diğerlerini ise 0
piksel olarak ayarladık. Böylece üst ve alt kısımda yani "ustAlan" ile "anaMenu" ve "altAlan" ile
"anaMenu" arasında 5 piksellik bir boşluk elde etmiş olduk.
#icerik
"icerik" alanı için stil özellikleri; "#sayfa #icerik"
 Background
o Background-color: #FFFFFF
 Box
o Width: 560 pixels
o Padding: 0 pixels
o Float: right
o Margin:
 Top: 5 pixels
 Right: 0 pixels
 Bottom: 5 pixels
 Left: 0 pixels
"anaMenu" DIV'ini sola hizaladığımıza göre bu içerik alanını da sağa hizalıyoruz. "Float" değerini "right"
vererek bu hizalama işlemini yapabiliriz. Aynı şekilde sadece üstte ve altta 5 piksellik mesafe vererek diğer
"margin" değerlerini 0 piksel olarak giriyoruz. DIV'in genişliğini belirten "width" olarak da 560
piksel giriyoruz. Burada bu genişlik değeri oldukça önemli bir yere sahip. Hatırlarsanız CSS kutu modelinin
işleyişinden bahsetmiştik. Tasarımımızı yaparken bunu aklımızdan çıkartmamamız gerekiyor. Basit bir
matematiksel hesap ile şöyle bir sonuç elde edebiliriz.
#anaMenu: 200px
#icerik: 560px
Toplam: 760px
"#sayfa" için genişliği 760 piksel olarak belirtmiştik. Yani "sayfa" DIV'inin içindeki tüm elemanlarının
"margin", "padding", "border" ve genişlik değerlerinin toplamı 760'ı geçmemelidir. Aksi takdirde "Float"
özelliğinin bir belirtimi olarak objeler genişlikleri ve hizalamaları ölçüsünde alana sığdırılmak için kaydırılırlar.
Aynı matematik hesabını şu şekilde genişletebiliriz
#anaMenu: 200px = (1px sol çerçeve + 5px sol padding + 188px width + 5px sağ padding + 1px sağ
çerçeve)
#icerik: 560px = (5px sol padding + 550px width + 5px sağ padding)
Toplam: 760px
Genişlikleri girerken bunlara dikkat etmemiz halinde herhangi bir sorunla yaşamadan tasarım sürecini
tamamlayabilirsiniz.
Objelerin kutu modelinden nasıl etkilendiklerini görmek için "icerik" alanının genişliğini 561 piksel olarak
girip sayfayı tarayıcıda deneyebilirsiniz. Sayfayı tarayıcıda açtığınızda "icerik" alanının "anaMenu" ile aynı
hizada olması gerekirken aşağıya kaydığını göreceksiniz. Gördüğünüz gibi 1 piksellik bir hata bile CSS kutu
modelinden etkilenmektedir. Bu sorun birçok acemi kullanıcının anlam veremediği kaymaların başlıca
sebebidir. Hesaba katılmayan ya da unutulan bir "padding" veya "margin" değeri bu tür kaymalara sebep
olur ve geliştiriciyi çileden çıkarabilir.
#altAlan
"altAlan" için stil özellikleri "#sayfa #altAlan"
 Type
o Size: 10 pixels
 Background
o Background-color: #B0D2E4
 Box
o Width: 740 pixels
o
o
o
Padding: 10 pixels
Margin: 0 pixels
Clear: both
Genişliğin 740 piksel olduğu dikkatinizi cezp etmiş olsa gerek. Sebebinin 10 piksel olarak tanımlanan
"padding" değerinden ileri geldiğini söylememize gerek yok sanırım. (10+740+10=760px) Diğer alanlardan
farklı olarak "altAlan" için "Clear" özelliğini "both" olarak tanımladık. "Clear" özelliği ile bir objeyi,
kendinden önce gelen objelere uygulanan "Float" etkisinden kurtarmak mümkündür. Eğer "altAlan" DIV'i
için "Clear" tanımlamasını "both" olarak yapmasaydık, "altAlan" DIV'i "icerik" DIV'i içerisindeki içeriğin
altında kalacak idi. "Float" ve "Clear" ile ilgili açıklayıcı bir yazı için Fatih Hayrioğlu'nun makalesine göz
atabilirsiniz.
Dokümanın DW içerisindeki son görünümü
Evet, tanımlamaları yaptıktan sonra dokümanınızı ve CSS stil dosyasındaki değişiklikleri kaydedip tarayıcınızda
deneyerek nasıl bir sonuç elde ettiğimizi görebilirsiniz.
Tasarımın tarayıcıdaki son görünümü
Son dokunuşlar
Tasarımımızı ayağa kaldırdık sayılır. Şimdi birkaç püf nokta ve bazı temel bilgilerden bahsetmenin zamanı
geldi. Şimdi içeriğin sayfada nasıl görüneceğini test etmek için "icerik" alanına birkaç paragraflık bir şeyler
kopyalayıp yapıştırın ya da yazın. "anaMenu" içine temsili bir şeyler yazın. "ustAlan" içine de bir H1 başlığı
ve onun altına slogan olacak bir şeyler yazın. "altAlan" a da bir şeyler yazmayı unutmayın. Amacımız
tasarımı test etmek. Şimdi kaydedip tarayıcıdan kontrol edin.
Tasarımı test etmek için bir şeyler yazıyoruz
Şimdi dikkatinizi çekecek bazı noktalar olmalı. Bunlardan biri "icerik" içerisindeki yazıların kenarlara çok yakın
olduğu, ayrıca başlığında standart biçimde pek hoş görünmediği olabilir. "ustAlan" içerisindeki başlığın bir
kısmının dışarı taşması ve sloganın başlığa çok uzak olması da diğer sorunlar olarak göze çarpabilir. Şimdi bu
sorunları nasıl çözeceğimize deyinelim.
Öncelikle "ustAlan" içerisindeki başlığı biraz biçimlendirip göze hoş görünür bir hal almasını sağlayalım. CSS
Styles panelinden "New..." menüsü ile yeni bir stil tanımlamaya başlıyoruz. "Selecto Type" olarak
"Advanced (IDs, pseudo class selectors)" seçeneğini seçip, "Selector" olarak "#sayfa #ustAlan h1"
yazıyoruz.
ustAlan için başlık tanımlaması yapıyoruz
Başlık için stil özellikleri şu şekilde;
 Type
o
o
o
o
Font: Georgia, Times, serif
Size: 30 pixels
Weight: Bold
Color: #FFFFFF
o
Padding: 0 pixels
 Top: 10 pixels
 Right: 0 pixels
 Bottom: 20 pixels
 Left: 0 pixels
Margin:
 Top: 15 pixels
 Right: 0 pixels
 Bottom: 0 pixels
 Left: 25 pixels
Positioning
 Type: Absolute
 Box
o
o
Şimdide sloganı biçimlendirelim. "#sayfa #ustAlan p" için stil özellikleri
 Type
o
o
o
o
Font: Georgia, Times, serif
Size: 11 pixels
Weight: Bold
Color: #FFBD91
o
o
Padding: 0 pixels
Margin:
 Top: 50 pixels
 Right: 0 pixels
 Bottom: 0 pixels
 Left: 115 pixels
Positioning
 Type: Absolute
 Box
o
Üst kısmın biçimlendirmesi bitti gibi. Şimdide "icerik" ile ilgilenmeye başlayalım. Yeni bir stil yaratıyoruz.
"Selector" olarak "#sayfa #icerik h1" yazıyoruz. İçeriğin başlığı için stil özellikleri şu şekilde;
 Type
o
o
o
o
Font: Arial, Helvetica, sans-serif
Size: 24 pixels
Weight: Bold
Color: #2981AF
o
Padding:
 Top: 10 pixels
 Right: 0 pixels
 Bottom: 10 pixels
 Left: 0 pixels
Margin: 5 pixels
Border
 Bottom: Solid, 1 pixels, #2981AF
 Box
o
o
Şimdide paragrafları biçimlendirelim. "#sayfa #icerik p" için stil özellikleri;
 Box
o
o
Padding: 5 pixels
Margin: 0 pixels
Böylece içeriğin kenarlara çok yakın olmasını engellemiş olduk. Tabi bu sadece "icerik" içindeki paragraflar
için geçerli. Aynı şekilde her eleman için "padding" ve "margin" ayarlamaları yaparak düzgün görünümlü
içerikler elde edebilirsiniz.
Son olarak "altAlan" a göze daha hoş görünmesi için geçişli (gradient) bir arka fon resmi ekliyoruz. Stil
özelliklerinde şu değişikliği yapmalısınız.
 Background
o
o
Background-image: images/altAlan_bg.gif
Repeat: repeat-x
Sonucu görmek için tüm belgeleri kaydedip tarayıcıdan kontrol edebilirsiniz.
Tasarımın son halinin tarayıcıdaki görünümü
Böylelikle CSS biçimlendirmenin gücünü kullanarak nasıl bir site ara yüz tasarımı yapabileceğimizi ve bunu
geliştirebileceğimizi görmüş olduk. Bu örneğimizde iki sütunlu tasarımlar üzerinde durduk. Bu yaklaşımdan
yola çıkarak 3 sütunlu tasarımların nasıl yapıldığını kendiniz de bulabilirsiniz fakat ipucu olarak şunu
belirtmekte fayda var. Bu tür 2 den fazla sütunlu tasarımlarda bileşenleri kendi aralarında ikili gruplara
ayırarak sağ ve sol "Float" özelliklerini kullanabilirsiniz.
3 sütunlu tasarımın şematik görünümü
Elastik sayfalar
Eğer sayfa tasarımının sabit bir değerde değil de kullanıcının ekran çözünürlüğü ve tarayıcı penceresinin
genişliğine göre otomatik olarak boyutlandırılmasını sağlamak istiyorsanız; elastik tasarımlar (Liquid layout)
kullanmalısınız.
Hizalama teknikleri açısından herhangi bir fark içermeyen bu sayfalarda yapmanız gereken tek şey birimleri
piksel yerine yüzde (%) olarak belirtmeniz gerektiğidir. Bu bakımdan "#sayfa" için "width" değerini 760
piksel yerine "95" olarak birimi de "%" girerseniz sayfa genişliği elastik olarak genişleyecektir. Tabi
"#ustAlan", "#anaMenu", "#icerik" ve "#altAlan" için de "width" değerlerini "%" cinsinden girmeniz
gerekmektedir.
Birimleri % olarak girmelisiniz
Burada genişlikleri birbirine göre oranlamanız da mümkün tabiî ki. Örneğin "#anaMenu" için "%25",
"#icerik" için ise "%75" olarak girmelisiniz. Örneği görmek için tıklayınız.
Elastik sayfanın tarayıcıdaki görünümü
Birimleri "%" olarak kullanırken CSS kutu modelinin halen devrede olduğunu ve verdiğiniz bu "width"
değerlerinin sadece içerik alanının genişliğini belirttiğini unutmamalısınız. Örnek sayfanın resmine bakarsanız
"altAlan" IV'inin diğer DIV'lerden daha geniş olduğunu göreceksiniz. Bu durum "altAlan" için önceden
tanımladığımız 10 piksellik "padding" değerinden kaynaklanmaktadır. Bu tür uygulamalarda "padding",
"margin" ve/veya "border" değerlerini göz önünde bulundurarak "%" değerleri girmekte fayda vardır.
Dreamweaver Tasarım Düzenleri
Tasarım aşamasındaki hizalama ve yerleştirme problemleri, Dreamweaver ile yeni tanışan ve HTML diline
yeterince hakim olamayan kullanıcıların en çok yaşadığı problemlerdir. DW geliştiricileri bu ihtiyacı
karşılamaya yönelik bazı araçları DW içerisine entegre ederek bu tür sorunlara farklı çözümler getirmişlerdir.
Örneğinkatmanların (Layer) kolay taşınıp istenilen yere konumlandırılabilmesinden yola çıkıp bunları en son
aşamada bir tasarım haline getirebilecek özelliklerden tutunda, sanki bir masaüstü yayıncılık yazılımında
çalışıyormuşçasına tasarımlar yapmanıza olanak tanıyan tasarım düzenlerine kadar değişik araçlara sahip olan
DW üzerine düşeni yapıyor gibi görünüyor.
Bu noktada dikkat çekmek istediğim bir nokta var!!! DW bu işlemleri yaparken tablolardan faydalanarak onları
adeta birer görünmez ızgara gibi kullanarak sorunlara şahsi kanaatimce "yetersiz" çözümler sunmaktadır.
Öteyandan uygulanan teknikler modası geçmiş ve CSS ile DIV elemanları üzerine kurulu olan modern tasarım
süreçleri ile taban tabana zıt yöntemlerdir. Örneğin tablo hücrelerinin genişlik ve yüksekliğinin istenildiği gibi
ayarlanmasını sağlayan "1 piksel genişlik ve 1 piksel yükseklikteki saydam bir GIF ile bu hücreleri istenilen
boyutta doldurma" tekniği günümüz web profesyonelleri tarafından kesinlikle kabul görmeyen birçok kitaba
ve makaleye konu olan yapılmaması gereken bir teknik olarak nitelendirilmektedir.
Aslında bu çözümler günü kurtarmak ve sorunları gidermek için yeterli şeyler olsa da bu işi yeni öğrenen biri
iseniz sizi yıllar öncesinin web tasarım teknolojilerine götürebilmesi açısından da tehlikeli bir yoldur.
Yani uzun lafın kısası bu çözümler aslında demode ve yanlış tekniklerle yapılmaktadır. DW bu sefer bizi hayal
kırıklığına uğratarak "en iyi yol bildiğim yoldur" şeklinde bir yaklaşım ile sorunlarımızı çözüyor.
Bu yüzden olacak ki makaleyi yazarken içimde bir isteksizlik uyanmakta ve bu yöntemleri kedim hiç
kullanmıyor olsam da madem amacımız bilgiyi paylaşmak buyurun o zaman :)
Dreamweaver Tasarım Düzenleri (Layout Modes)
Evet, DW'ın ihtiyaçları karşılamak için değişik yaklaşımları olduğundan bahsetmiştik. Eğer tasarımlarınızı
tablolar ve tablo hücreleri üzerine inşa ediyor iseniz hücreleri biçimlendirmek konusunda sorunlar yaşıyor
olabilirsiniz. Bu sorunların başında da hizalama ve seçim işlemleri gelmekte şüphesiz. Şimdi bunları en aza
indirecek tasarım düzenlerine kısaca bir göz atalım. Dreamweaver 8 temel olarak üç farklı tasarım düzenine
sahiptir bunlar sırasıyla;
1.
Standart Mod (Olağan düzen)
2.
3.
Expanded Mod (Genişletilmiş düzen)
Layout Mod (Serbest çizim düzeni)
Düzenler arası Geçiş
Çalışmalarınız sırasında bir düzenden diğerine geçme ihtiyacı duyabilirsiniz. Bunun için en pratik yol klavye
kısayollarını kullanmaksa da "Insert" paneldeki "Layout" sekmesi altında yer alan geçiş tuşlarını da
kullanabilirsiniz.
Düzenleri arası geçiş için Insert panel altındaki Layout sekmesindeki düğmeleri kullanabilirsiniz
Aynı işlemi View / Table Mode menüsü ile de yapabilirsiniz. Hangisi sizin için daha pratik ve kolay olursa onu
kullanabilirsiniz.
Düzenler arası geçiş için View / Table Mode menüsünü kullanabilirsiniz
Düzenler arası geçişi bu şekilde açıkladıktan sonra Bu düzenlerin özelliklerine deyinmekte fayda var.
Standart Mod (Olağan düzen)
Bu standart olarak seçili olarak gelen ve alışılagelmiş DW ara yüzünün temelini oluşturan tasarım düzenidir.
Görünmeyen kenarlar ince kesikli çizgiler ile gösterilir ve genel olarak içi boş nesnelerin (tablo katman DIV
gibi) seçim işlemleri için nesnelerin sınır çizgilerine fare ile tıklamak veya yine fare imleci ile nesnenin içerisine
girmek yeterlidir.
Standart düzende nesnelerin görünüşü
Expanded Mod (Genişletilmiş düzen)
Adından da anlaşılacağı üzere bu düzende tablo hücreleri normal genişliklerinden daha geniş görünürler.
Böylece çok dar hücreler içerisine fare imlecini taşıyabilir bu hücreleri seçebilir ve yönetebilirsiniz. Kenar
boşlukları (cel padding) ve hücreler arası boşluklar (cell spacing) abartılı biçimde gösterilerek ayırt edilebilir
bir hal alırlar. Sadece tablolar için geçerlidir diğer nesneler bu düzenden etkilenmezler.
Genişletilmiş düzende tabloların görünümü
Layout Mod (Serbest çizim düzeni)
Bu düzen oldukça farklı prensipler ile çalışma ortamını değiştiren ve diğer HTML editörleri arasında DW'a ayrı
bir yer kazandıran bir düzen olarak tarihe geçmiştir. Eğer masa üstü yayıncılık için kullanılan bir yazılım ile
daha önceden bir deneyiminiz olduysa bu düzene oldukça aşinasınız demektir. Bu yazılımlarda sayfa düzeni
için kutucuklar başka bir ifadeyle metin ve içerik alanları çizer bu alanları içerik materyali ile (metin, resim vs.)
doldurursunuz. İşte bu serbest tasarım düzeni de bu şekilde çalışarak bize sayfa düzenlerini oluşturmakta tam
bir özgürlük sunmaktadır. Tabi çalışma ortamımız tablolar olduğundan bu düzen de sadece tabloları
kapsamakta diğer nesnelere bir etkisi olmamaktadır. Bu düzende tablo sınırları içerisinde çizdiğiniz hücreleri
istediğiniz gibi taşıyıp konumlandırabilirsiniz.
Serbest çizim düzeni (Layout Mod) içerisinde tabloların görünümü
Eğer bu düzeni ilk kez kullanıyorsanız DW size bu düzen hakkında kısa bir bilgi içeren ufak bir iletişim
penceresi gösterecektir. Serbest çizim düzenine geçtiğinizde sadece tablo içerisindeki, açık gri bir renk ile
gösterilen düzenlenebilir alanları yönetebildiğinizi göreceksiniz. Insert panelde bu düzene geçmeniz ile
aktive olan "Layout table" ve "Draw Layout cell" düğmeleri ile çizimlerinizi yapabilirsiniz.
Tablolar yeşil ince bir çizgi halindeki çerçeveler ile hücreler ise mavi çizgiler ile belirtilirler. Bu renkleri Edit /
Preferences bölümündeki "Layout Mode" sekmesinden düzenleyebilirsiniz.
Bir hücre yada tabloyu seçtiğinizde Properties panelinden seçili hücre veya tablo ile ilgili ayarları
yapabilirsiniz. Bu düzende çalışırken hücre ve tablolar için "Fixed" ve "Autostretch" şeklinde iki tür genişlik
türü olduğunu göreceksiniz. "Fixed" genişlikler sabit genişliklerdir ve girdiğiniz genişlikler hücre içerisinde
büyük bir obje veya uzun bir metin olmadığı sürece değişmez. "Autostretch" genişlikler ise elastik
genişliklerdir ve tarayıcı penceresinin genişliğine ve kullanıcının ekran çözünürlüğüne göre boyutlandırılırlar.
Örneğin bir "Layout Table" için genişliği "Autostrecth" olarak belirlerseniz farklı ekran çözünürlüklerinde
dahi tüm sayfayı kaplayacak şekilde boyutlandırılırlar.
Tablo ve hücre özellikleri için Properties panelini kullanabilirsiniz
Eğer bir genişliği "Autostretch" olarak belirlerseniz DW bu çalışmanız sırasında bir defaya mahsus olarak bir
diyalog penceresi ile size nasıl davranmak istediğinizi soracaktır. Eğer tanımlı bir site ile çalışıyorsanız
seçiminiz kaydedilecek ve ilerideki işlemler için hep bu seçiminiz kullanılacaktır. Açık gri olarak belirtilen
alanda kalan ve normalde gösterilmeyen diğer hücrelerin bu elastik boyutlu hücrenin genişliğine göre
otomatik olarak ayarlanması için içlerine 1x1 piksel boyutunda saydam bir GIF yerleştirip boyutun otomatik
olarak ayarlanıp kaymamasını sağlayan bir resim dosyası (Spacer image) kullanabilirsiniz.
Saydam resimler için seçenekler diyalog penceresi
 Create a spacer image file: Saydam resim dosyası oluşturmak için bu seçeneği kullanabilirsiniz. Bu
seçeneği seçtiğinizde DW resim dosyasını nereye kaydetmek istediğinizi soracak ve saydam resmi
otomatik olarak oluşturacaktır.
 Use an existing spacer image file: Önceden yarattığınız saydam resim dosyasını kullanmak için bu
seçeneği kullanabilirsiniz. Saydam resim;1x1 piksel boyutlarında saydam bir GIF olmalıdır.
 Don't use spacer images for autostretch tables: Esnek hücreler için saydam resim kullanmak
istemiyorsanız ya da zaten bu işlemi kendi yöntemleriniz ile yaptıysanız bu seçeneği
işaretleyebilirsiniz. Eğer saydam resim kullanmayıp elastik hücreler ile çalışırsanız elastik hücreler
boyutları ayarlanırken diğer boş ve küçük hücreler ile birleştirilebilir buda beklenmeyen sonuçlara yol
açabilir. DW size bu durumu bir uyarı mesajı ile bildirecektir.
Hücreleri Autostretch yapmak için hücre başlığı menüsünü de kullanabilirsiniz.
"Layout Mode" hakkında söylenecekler bu şekilde sizde birkaç alıştırma yaparak kendinizi geliştirebilirsiniz.
Katmanlardan Tablolara (Serbest Çizim teknikleri)
Eğer "Layout Mode" ile çalışmanıza rağmen hâlihazırda tablolar ile sorunlar yaşıyorsanız diğer bir alternatif
olan tasarımı katmanlar (layer) ile yapıp son aşamada bu katmanları tablolara dönüştürebilirsiniz.
Bu tekniği kullanmak için; öncelikle tasarımımızı "Draw Layer" seçeneği ile gönlünüzce çizerek yapıyoruz.
Katman çizme düğmesi
Katmanları çizip içlerine resim, metin ya da Flash animasyon gibi istediğiniz objeleri ekledikten sonra
Tasarımımıza çeki düzen veriyoruz.
Tasarımı katmanlar ile çizip son halini veriyoruz
Son olarak Modify / Convert / Layers to Tables menüsü ile katmanları tablolara dönüştürebiliriz. Bu
seçeneği seçtiğimiz anda DW bize bir iletişim penceresi ile bu dönüştürme işleminin nasıl yapılacağını
soracaktır.
Layers to Table dönüşüm iletişim penceresi
 Most Accurate: Her katmanı ve katmanlar arası boşluğu bir tablo hücresine çevirir.
 Smallest: Collapse Empty Cells: "Less than .... Pixels wide" ile belirtilen değere kadar genişlikte
olan katmanları veya katmanlar arası boşlukları birleştirerek tablo hücrelerini oluşturur. Bu yöntem
tablolarınızın daha az hücreye sahip olmasını sağlayabilir fakat bu küçük hücrelerin birleştirilmesi ile
çizdiğiniz tasarım ile birebir örtüşmeyen sonuçlarda ortaya çıkabilir.
 Use Transparent GIFs: Tabloların son satırını saydam bir GIF ile (spacer image) doldurur. Bu yöntem
sütunların genişliğinin her tarayıcı için aynı olmasını sağlar. Bu seçeneği kullandığınızda sonuçta elde
edilen tablonun sütun genişliklerini sürükleyip bırakarak ayarlayamazsınız, genişlikler ilk girilen
değerde kalacaktır. Fakat bu seçeneği kullanmazsanız bu sütun genişliği ayarlamasını sürükleyerek
yapabilirsiniz fakat bu da tarayıcılar arası genişlik farklarına yol açabilecektir.
 Center on Page: Oluşturulan tabloyu ortalayarak tam ortada çıkmasını sağlar.
 Layout tools: DW çalışma ortamını yapılandıran ayarları yapmanıza olanak sağlar.
o
o
o
o
Prevent layer overlaps: Katmanların üst üste binmesini engeller. Bu seçeneği
işaretlerseniz üst üste binen katmanlar çeşitli konumlara taşınarak en uygun pozisyonları
hesaplanacaktır. Bu durum tasarımınızın beklediğinizden çok farklı sonuçlara yol açmasına
sebep olabilir. Eğer bu seçeneği işaretlemezseniz ve doküman üst üste binmiş katmanlar
içeriyorsa dönüşüm işlemi yapılmayacak ve uyarı mesajı belirecektir.
Show layers panel: Katmanlar panelini görüntüler.
Show grid: Izgarayı görünür hale getirir.
Snap to grid: Hücreleri ızgaraya hizalar.
Eğer dönüşüm yaptığınız doküman kaydedilmemiş ise DW bu durumu size belirten bir uyarı mesajı ile
dokümanın tanımlı bir site altında kayıtlı olması gerektiğini söyleyecektir.
Dönüşüm yapılacak dokümanın kayıtlı olması gerekmektedir
İşlemi tamamlayıp dönüşüm bittiğinde katmanlar özelliklerine göre birer tablo hücresine dönüştürülecek ve
gerekli düzenlemeler DW tarafından yapılacaktır.
Sayfanın son halinin Dreamweaver içerisindeki görünümü
1. Şablon (template) dokümanlarındaki veya şablon uygulanmış dokümanlardaki katmanları
dönüştüremezsiniz.
2. Bu dönüşüm işlemi sonucunda çok sayıda boş hücresi olan tablolar oluşabilir ve sayfanın dosya boyutu
dramatik bir biçimde artabilir.
DW, bu işlemin tersine de (Modify / Convert / Tables to Layers) olanak tanımaktadır fakat bu konu hakkında
herhangi bir deneyimim olmadığı için işin o kısmını size ve hayal gücünüze bırakıyorum
Dreamweaver ve Frameler
Frame Kavramı
Türkçeye çevirdiğimizde "çerçeve" olarak karşımız çıkıyor fakat HTML içerisinde Frame dediğimizde bir ana
sayfanın (_parent) birden fazla parçaya ayrılarak farklı HTML dosyalarını bünyesinde barındırması olayı
diyebiliriz.
Örnek ile anlatmaya çalışırsak web'de sıklıkla gördüğümüz yan veya üst kısımdaki navigasyon menüsünün
sabit kalması ve sadece içeriğin olduğu kısmın yüklendiği sayfalarda kullanılan teknik; Framedir. Frame ile
hazırlanmış sitelere örnek olarak Ekşi Sözlük'ü gösterebiliriz. (eksizoluk.com)
DW içerisinde Frameler oldukça geniş bir desteğe sahiptir. Özellikle WYSIWYG'in en güzel uygulandığı
konulardan biri olan Frameleri DW içinde yönetmek diğer editörlere göre çok daha kolaydır.
Frame kullanımı
Framelerin ne olduğunu öğrendiğimize göre şimdi DW içerisinde nasıl kullanıldığını açıklayalım.
Öncelikle DW içinde boş bir doküman açın ve bunu kaydedin. Burada yeri gelmişken belirtelim; eğer
Framelerin içerisine yerleştireceğimiz bölümler önceden hazırsa işlerimiz çok daha kolaylaşacaktır. Öte yandan
aynı anda Frameleri sayfaya ekleyip DW'ın güçlü ara yüzü sayesinde Frame içerisinde de tasarım yapabiliriz.
Fakat bu pek sağlıklı sonuçlar vermeyebilir.
Sayfamıza ekleyebileceğimiz Framelerin neler olduğunu, Insert / HTML / Frames menüsü ile görebiliriz.
Buradan ihtiyacınıza uygun olan Frame türünü seçip sayfaya ekleyebilirsiniz.
Insert / HTML / Frames menüsünden sayfamıza yeni bir freame ekleyebiliyoruz
Ya da Insert Panel (Eski adı ile Object Panel) altındaki Layout sekmesinde yer alan Frames düğmesinden
de aynı seçeneklere ulaşabilirsiniz.
Insert panel altındaki Layout sekmesinde yer alan Frames düğmesi ile de Frame eklemek mümkün
Uygun Frame ya da Frameleri sayfaya ekledikten sonra Windows / Frames (Shift+F12) menüsü ile
Frameleri yönetebileceğiniz panelin açılmasını sağlayabilirsiniz. Bu sayede Framelerin yönetimi hem çok
kolaylaşmakta hem de daha güçlü bir hal almaktadır.
Sayfamızdaki frameleri Frames paneli ile yönetmek oldukça kolay
Bu panel sayesinde Framelerin seçim işlemi oldukça basitleşiyor. Buradan bir Frame
seçtiğinizde Properties paneli de bu Frame'e ait ayarları yapacak şekilde değişmektedir. Bunlar sırasıyla;
Seçtiğimiz frame ile ilgili ayarları Properties panelinden yapabiliriz
 Frame Name: Frame'in adı, bu oldukça önemli bir nokta aslında. Zira frameler ile çalışırken bir link
yarattığımızda bu linkin hangi Frame içerisinde açılacağını bu frame isimleri belirtiyor. Örneğin Şu an
benim çalıştığım dokümanda soldaki framein ismi leftFrame sağ tarafta yer alan ve içeriğin
bulunacağı frame'inki isemainFrame olarak belirlenmiş. Bu Target kavramını biraz daha ileride
daha ayrıntılı inceleyeceğiz.
 Scroll: Framelerdeki içeriğe göre tarayıcıda kaydırma çubuğu (Scrollbar) çıkıp çıkmayacağı yada nasıl
bir hal alacağını belirtir.
 Src: Bu ise Frame olarak çağrılan HTML dokümanının adresini belirtiyor.
 Borders: Framein kenarlarında çerçeve olup olmayacağını belirten özellik.
 Magrin Height: Frame içerisindeki içeriğin kenarlara olan dikey uzaklığı
 Magrin Witdh: Frame içerisindeki içeriğin kenarlara olan yatay uzaklığı
 No Resize: Framein daha sonradan ziyaretçi tarafından tekrar boyutlandırılabilmesini belirtir.
 Border Color: Çerçeve rengini belirtir.
Bu ayarları sizin için uygun şekilde yaptıktan sonra Framelerimizi kaydedip sayfamızı deneyebiliriz.
Her Frame bir HTML dokümanından oluşur ve her birini ayrı ayrı kaydetmeliyiz. İlgili Frame'i seçtikten
sonra File / Save Frame menüsü ile Framelerimizi ayrı ayrı kaydedebiliriz. İşe başlarken açtığımız boş
doküman şuanda mainFrame'i teşkil ediyor. Birde bu Framelerin hepsini bir arada tutan dış Frame var. Bu
Frame Parent Frame'i oluşturup tüm Framelerin bir arada durmasını sağlar.
Frameseti seçmek için kenarındaki ince çerçeveye tıklamanız yeterli
Frames panelinden tüm framelerin dışında bir çerçeve olarak belirtilen bu ana Frame'i (Frameset)
seçip File / Save Frameset menüsü ile bunu da kaydedebilirsiniz.
Target Kavramı ve Framelere Link verme
Her zaman Frameler ile çalışırken link verme işlemleri sorun olmuştur. Ama bu yazıda bunlara kesin çözüm
getirmeyi garanti ediyoruz.:)
Öncelikle örnek sayfamızı inceleyerek ne yapmaya çalıştığımız bir görelim isterseniz.
Frame kullanılan örnek bir sayfadan görüntü
Burada sol tarafta bir menümüz var bu menüye tıklandıkça değişen bir mainFrame'imiz var.
Target kavramı:
Target HTML içerisinde Frameler ile kullandığımız bir kavramdır. Tabi önce Frameset'e bir açıklık getirmek
gerekir. Her Frameset içerisinde bu framesetin sahip olduğu framelerin bilgileri tutulur. (topFrame'in border'ı
olsun, leftFramein kaynak adresi main.htm'dir vs vs...)
Örnek bir Frameset kodu:
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
2. <HTML>
3. <HEAD>
4. <TITLE>Örnek Frame Sayfasy</TITLE>
5. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset="iso-8859-1"">
6. </HEAD>
7.
8. <FRAMESET ROWS="*" COLS="172,*" FRAMESPACING="0" FRAMEBORDER="NO" BORDER="0"
>
9. <FRAME src="frame_sol.htm" NAME="leftFrame" FRAMEBORDER="YES" SCROLLING="NO" NORE
SIZE BORDERCOLOR="#FFFFFF">
<FRAME src="frame_main.htm" NAME="mainFrame">
</FRAMESET>
10.
11.
12.
13.
14.
15.
16.
17.
18.
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>
</HTML>
19.
Bu Frameset bilgisi içerisinde her frame'in bir adı vardır ve bu ad o Frame „e özgüdür. İşte bu özgünlük
bize istediğimiz Frame'e link verebilme özgürlüğü sağlar. Bunun için ise linklere ek bir parametre
olarak TARGET kullanılır.
Normalde bir link vermek için şu kod yeterlidir;
1. <a href="http://www.google.com">Google</a>
2.
Fakat bu linkin hedefi belli değildir. Yani hangi Frame içerisinde açılacağı belirtilmemiştir. Bu yüzden
varsayılan olarak Parent Frame'i yani Ana çerçeve olan dış framei hedef alır ki buda istediğimiz bir şey
olmayabilir. Linklere hedef belirtmek için;
1. <a href="http://www.google.com" target="mainFrame">Google</a>
2.
Şeklinde kodu değiştirmemiz gerekir. Bu target ayarlarını DW içerisinde Properties panelinden rahatlıkla
yapabiliriz.
Linklerin hdeflerini Properties paneli üzerinden değiştirebilirsiniz
Standart tanımlı Targetları şunlardır;
 _blank: Yeni ve boş bir pencere anlamına gelir. (linki yeni bir tarayıcı penceresinde açar)
 _parent: Frameset bilgisinin olduğu Parent Frame'i belirtir.
 _self: Linkin içerisinde bulunduğu frame'i gösterir. Link yine bu frame içerisinde açılacaktır.
 _top: Sayfayı o an açık olan tarayıcı penceresi içerisinde açar.
 mainFrame, leftFrame... : Bunlar ise sizin sayfaya eklediğiniz ve özel olarak isimlendirdiğiniz yada
DW'ın otomatik olarak isimlendiği frameleri belirtir.
Konuyu toparlarsak örneğimizde yer alan sol menüdeki bir linke tıklandığında sadece sağ tarafın değişmesi
için bu linkin Target'ı olarak mainFrame seçmeliyiz.