Dreamweaver Temelleri

Transkript

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

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

3 Ö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

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

5 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

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

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

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

9 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ç

10 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

11 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ü

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

13 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ü

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

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

16 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ü

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

18 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

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

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

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

22 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

23 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

24 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

25 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

26 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

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

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

29 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

30 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

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

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

33 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

34 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&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:

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

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

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

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

39 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" " 2. <html xmlns=" 3. Preview in Browser Preview in Browser kısmındaki ayarlar.

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

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

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

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

44 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 o 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

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

46 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?

47 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

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

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

50 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)

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

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

53 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 yazmanız gerekiyor. Mail adreslerine link vererek ziyaretçilerin bilgisayarında kurulu olan Outlook Express benzeri bir programla size 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 link isimli düğme ile de mail linkler yaratmanız mümkün. 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.

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

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

56 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

57 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

58 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

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

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

61 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

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

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

64 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;

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

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

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

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

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

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

71 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;

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

73 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

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

75 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)

76 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;

77 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 Options o 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. 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. 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.

78 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

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

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

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

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

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

84 İş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.

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

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

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

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

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

90 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;

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

92 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;

93 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", " " 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.

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

95 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"> </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, , 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.

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

97 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

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

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

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

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

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

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

104 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

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

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

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

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

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

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

111 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 ya da 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 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

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

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

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

115 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ı

116 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;

117 "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 address" kısmına ise 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.

118 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

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

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

121 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;

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

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

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

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

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

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

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

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

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

131 İç ş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.

132 İç ş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.

133 Ş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ı.

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

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

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

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

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

139 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;

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

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

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

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

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

145 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 :)

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

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

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

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

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

151 İ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) Alt etiket seç (Child tag) Control+[ Control+] Command+[ Command+] Bul ve Değiştir Control+F Command+F Sonrakini bul F3 Command+G Seçileni bul Shift+F3 Shift+F3

152 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 Macintosh Yakınlaş Uzaklaş 100% yakınlaşma ya daanı Seçimi sığdır Hepsini sığdır Genişliğe sığdır Görünüm modunu değiştir Tasarım görünümünü zatele Server Debug Live Data Genişletilmiş tablo modu Layout Mod Tablo düzenleme işlemleri Control+= Control+- Control+Alt+1 Control+Alt+0 Control+Shift+0 Control+Shift+Alt+0 Control+` F5 Control+Shift+G Control+Shift+R F6 Control+F6 Komut Windows Macintosh Tablo Seç (Tablo'da gelişigüzel) Control+A Sonraki hücreye git Tab Tab Command+A Önceki hücreye git Shift+Tab Shift+Tab Row (yaty sıra) ekle (geçerliden önce) Tablo sonuna satır ekle Control+M Tab in the last cell Command+M 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 Objeyi yada metni sayfa içinde başka bir yere hareket ettir Control+Shift+Spacebar Seç ve yeni konuma sürükle Option+Spacebar Drag selected item to new location Obje yada metni sayfa Control+Seç ve yeni konuma sürükle Option-drag selected item to new

153 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 Yazım hatasını kontrol et (yanlızca ingilizce) Control+Shift+J Shift+F7 Command+Shift+J Shift+F7 Yardım almak Komut Windows Macintosh Dreamweaver Yardım Konuları F1 ColdFusion yardım Control+F1 Command+F1 Referanslar Shift+F1 Shift+F1 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. Sayfalar doğru doküman türü tanımlamasına (DOCTYPE) sahip olmalılar 2. 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ı. 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. 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"

154 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 =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; 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ı

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

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

157 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

158 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 Font: Verdana, Arial, Helvetica, sans-serif o Size: 11 pixels o Line height: 13 pixels o Color: # Background o Background-color: #E0F0F8 Block o Text-align: center Box o Padding: 0 pixels o Margin: 0 pixels

159 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 Box o o o o Text-align: left width: 760 pixels Padding: 0 pixels Margin: Top: 0 pixels Right: auto Bottom: 0 pixels Left: auto 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.

160 "#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 Positioning o o Bottom: Solid, 7 pixels, # 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

161 "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

162 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. ( =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.

163 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;

164 Type Box o o o o o o o Font: Georgia, Times, serif Size: 30 pixels Weight: Bold Color: #FFFFFF 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 Şimdide sloganı biçimlendirelim. "#sayfa #ustalan p" için stil özellikleri Type Box o o o o o o o Font: Georgia, Times, serif Size: 11 pixels Weight: Bold Color: #FFBD91 Padding: 0 pixels Margin: Top: 50 pixels Right: 0 pixels Bottom: 0 pixels Left: 115 pixels Positioning Type: Absolute Ü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 Box o o o o o o o Font: Arial, Helvetica, sans-serif Size: 24 pixels Weight: Bold Color: #2981AF Padding: Top: 10 pixels Right: 0 pixels Bottom: 10 pixels Left: 0 pixels Margin: 5 pixels Border Bottom: Solid, 1 pixels, #2981AF Şimdide paragrafları biçimlendirelim. "#sayfa #icerik p" için stil özellikleri; Box o o Padding: 5 pixels Margin: 0 pixels

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

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

167 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)

168 2. Expanded Mod (Genişletilmiş düzen) 3. 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)

169 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ı

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

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

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

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

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

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

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

177 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" " 2. <HTML> 3. <HEAD> 4. <TITLE>Örnek Frame Sayfasy</TITLE> 5. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset="iso ""> 6. </HEAD> <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"> 10. <FRAME src="frame_main.htm" NAME="mainFrame"> 11. </FRAMESET> <NOFRAMES> 14. <BODY> 15. </BODY> 16. </NOFRAMES> </HTML>

178 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=" 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=" 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.