Dreamweawer İnce Ayar

Dreamweaver açtıktan sonra Edit / Preferences... menüsü ile ayarlar kısmını açıyoruz. Bu pencere ile DW'ımıza her türlü ayarı yapabilir ve onu en iyi şekilde yönetebiliriz. Burada görüldüğü üzere kolaylık sağlamak amacı ile özellikler belli guruplara ayrılmış. Şimdi bunları ayrıntılı bir biçimde incelemeye başlayabiliriz.

Genel ayarlar

General

General kısmı altındaki ayarlar

Genel ayarlar

• Show Start Page: Açılışta DW’ın karşılama ekranı göstermesini sağlar. Bu pencere ile son açtığınız dokümanlara daha kolay erişebilme yeni doküman oluşturma gibi seçenekleri daha rahat yapabilme imkânı bulabilirsiniz.
• Reopen Documents on Startup: Açılışta DW’ın son açık dokümanı geri yüklemesini sağlar, eğer seçili değilse boş sayfa veya karşılama ekranı ile başlanır.
• Warn When Opening Read-Only Files: Salt okunur dosyalar ya da yazılamayacak bir medya üzerinden (CD, DVD uzaktaki bir sunucu vs.) okunan dosyaları açtığımızda DW’ın uyarı mesajı vermesini sağlar.
• Update Links When Moving Files: Sayfları site içerisinde başka bir konuma kaydettiğinizde ya da taşıdığınızda DW sizin için sayfa içerisindeki linkleri yeni konuma göre düzenler. Bu işlem sırasında nasıl davranması gerektiğini bu seçenek ile belirtebiliriz. Değiştirmek için sormasını istiyorsak Prompt, sormadan değiştirmesi için Allways, bu özelliği kapatmak için Never.
• Show Dialog When Inserting Objects: Sayfaya bir obje eklerken DW’ın bir iletişim penceresi ile eklenen objenin ilgili parametrelerini girmemizi sağlar. Örneğin tablo eklerken satır sütun sayısı, resim eklerken Alt metin, DIV eklerken id ve stil isimleri vs.
• Enable Double-Byte Inline Input: Bir geliştirme ortamı kullanıyorsanız ya da double-byte olarak tabir edilen (Japonca gibi) metinlerle çalışıyorsanız bu seçeneğin açık olması gerekiyor. Aksi takdirde doküman içerisinde kullanan metindeki karakterler düzgün görünmeyecektir.
• Switch to Plain Paragraph After Heading: Bu seçenek yazmaya başladığınız h1, h3... başlıklarının sonunda Entera bastığınızda başlığı sonlandırıp yeni bir paragraf oluşturmasını sağlıyor. Bu in-aktif hale getirirseniz başlıktan sonra Enter’a bastığınızda başlık sona ermez ve yeni paragrafı da başlık olarak yazmaya devam edersiniz.
• Allow Multiple Consecutive Spaces: Word'de yazı yazarken boşluk bırakır gibi HTML içindede arka arkaya ekstra boşluklar.
• Use <strong> and <em> in place of <b> and <i>: Yeni web standartlarına uygun olarak kalın yazmak için <b> yerine <strong>, eğik yazmak için ise<i> yerine <em> kullanılmasını sağlar.
• Use CSS Instead of HTML Tags: Bu özellik DW ile standart olarak açık geliyor fakat ben çok da faydalı bir özellik olduğunu düşünmüyorum. Özellikle yeni başlayan arkadaşlar için kolaylık sağlasa da sayfadaki herhangi bir metnin rengini değiştirdiğinizde ya da kalın, eğik veya altı çizgili yaptığınızda otomatik olarak yeni bir stil yarayarak (style1, style2, style3 …) bu stili ilgili metne uyguluyor. Fakat bir süre sonra iş çığırından çıkıyor ve hemen her şey için ayrı bir stil yaratmak zorunda kalıyor. Buda işleri karmaşıklaştırabiliyor. Kendi stilini kendi yazan birisi olarak bu özelliği kapatıyorum ama dediğim gibi yeni başlayan arkadaşlar işin mantığını kavrayana kadar bu seçeneği kullanmaya devam edebilirler.
• Warn when placing editable regions within <p> or <h1><h6> tags: DW şablonlarını (template) kullanırken, “Editable region” olarak tabir edilen şablon içerisindeki değiştirilebilir alanların bir paragraf ya da başlık (h1, h6 gibi) içerisinde yer alması durumunda DW, bir uyarı mesajı ile kullanıcıların başka paragraf yaratamayacaklarını tek paragraflık bir metin eklenebileceği konusunda kullanıcıyı uyarmasını sağlar.
• Maximum Number of History Steps: Geriye dönük maksimum işlem basamağı sayısı. (History panel den görünen işlem listesi de diyebiliriz)
• Spelling Dictionary: DW’ın Word’deki gibi dilbilgisi kontrolü yapmasını sağlayan dil kütüphanesi. Henüz Türkçe için aktif değil.

Accessibility

Accessibility (erişilebilirlik) kısmı altındaki ayarlar şu şekilde sıralanmakta;
 

Erişilebilirlik ayarları

• Show Attributes When Inserting: Oldukça faydalı olacağını düşündüğüm bir özellik. Sayfaya eklediğiniz öğeye ait erişilebilirlik ayarlarını daha eklerken bir diyalog kutusu ile yapmanızı sağlayabilirsiniz. Özellikle form elemanları ve resimler için işaretlemenizi öneririm. FrontPage kullanıcıları bu özelliği sanırım çok sevecekler.
• Keep focus in the panel when opening: Yeni bir iletişim penceresi veya panel açıldığında focus yani kürsor odaklamasının bu açılan pencerede kalmasını istiyorsanız bu seçeneği seçmelisiniz. Bu seçenek özellikle görme engellilerin kullandığı ekran okuyucu ya da OCR programları için faydalı olacaktır.
• Offscreen rendering: Aynı şekilde ekran okuyucu yada OCR programlar ile sorun yaşıyorsanız bu seçeneği kapamalısınız.

Bu seçenekleri ancak DW'ı yeniden başlattıktan sonra kullanmaya başlayabilirsiniz.

Erişilebilirlik hakkında daha fazla bilgi almak ve ne olup olmadığını görmek için buraya tıklayabilirsiniz.

Code Coloring

Code Coloring kısmı altındaki ayarlar

Kod renklendirme ayarları

DW, web tasarım teknolojisinde kullanılan hemen hemen bütün programlama dillerini okuyup tanıyabilen bir yapıya sahip demiştik. Yani kodun türünü belirleyip farklı vurgu renklendirmeleri yapabiliyor. Fakat siz bunları daha sonradan kendinize göre değiştirmek isteyebilirsiniz.

Bunun için Edit / Preferences / Code Coloring kısmından "Edit Coloring Schene" bölümüne geçmelisiniz. Buradan istediğiniz kod gurubunu istediğiniz gibi renklendirebilirsiniz.

Kod renklendirme ayarları

Code Format

Code Format kısmı altındaki ayarlar

Kod biçimlendirme ayarları

• Indent :
  • 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 :
  • 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.
  • CRLF Windows : “nr”
  • CR Macintosh : “n”
  • Unix LF : “r” ile bir alt satıra geçecektir.
• Default Tag Case: Varsayılan tag yazma karakter türünü belirtir.
  • “<UPPERCASE>” : tagları tamamen büyük harflerle yazar (<TABLE><TR>… gibi),
  • “<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.
  • <ATTIRIBUTE=”value”> ile argüman büyük harflerle yazılacaktır. (<font SIZE="”1”>" gibi).
  • <lovercase="”value”> ise küçük yazdıracaktır. (<font size="”1”>" gibi)
• Overwrite Case Of: Tag ve argümanların kod formatlama sırasında değiştirilebileceğini gösteriri. Yani DW’da açtığınız dokümanda "<font size="”1”>" şeklinde bir ifade varsa bunlar Dreamweaver tarafından otomatik olarak "<FONT SIZE="”1”>" olarak değiştirilebilir.
• No Break After TD: Tablo kodlarında Sütün kodlarından sonra wrap yapılmayacağını belirtir. Kod şöyle görünecektir:

1. <TR>
2. <TD>sütun içeriği</TD>
3. </TR>
4.  

• Centering: Bir objeyi hizalarken ortaladığınızda DW’ın bu işlem için <DIV ALIGN="”CENTER”> yada <CENTER> taglarından hangisini kullanacağını belirtir. <CENTER> tagı yeni w3c standartlarına göre kullanımdan kaldırılmıştır.

Code Hints

Code Hints kısmındaki ayarlar.

Code hints ayarları

• Close tags: DW’ın otomatik tag kapatma fonksiyonunun hangi durumlarda devreye gireceğini belirtir. Örneğin siz <strong>vs vs vs </ yazdığınız anda DW sizin için </strong> u ekler. Böylece kapatılmamış taglardan kurtulmuş olursunuz.
• Enable Code Hints: Otomatik kod tamamlama fonksiyonu olan Code Hints i devreye sokar. Siz <FONT yazdığınızda otomatik olarak bir drop down menü açılır ve bu tag ile ilgili tüm argümanlar listelenir, sizde zamandan kazanırsınız.
• Delay: Code Hints in kaç saniye gecikmeyle açılacağını belirtir. Bunu biraz yavaşlatırsanız iyi olur. Zira zaman zaman siz bir argüman istemeseniz dahi hemen açılması işleri karıştırabilir.
• Menus: Code hints içinde listelenmesini istediğiniz argüman tiplerini belirtir.

Dreamweaver ile çalışırken Code hints'ler

Bunları “Tag Library Editor” ile kendinizde düzenleyebilirsiniz.

Etiket kütüphanesi ayarları

Code Rewriting

Code Rewriting kısmındaki ayarlar.

Tekrar kod yazma ayarları

• "Rewrite code" : Başka bir doküman tarafından derlenmiş HTML kodlarını sizin "Code Fromat" kısmında belirlediğiniz kriterlere göre tekrardan biçimlendirmesini sağlayan ve bu biçimlendirme sırasında da neleri yapıp neleri yapmaması gerektiğini buradan ayarlıyoruz.
  • 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.
  • 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.
  • Remove Extra Closing Tags: Fazladan eklenmiş ve bir işlevi olmayan kapalı tagları siler Örn. <P></P> ler gibi.
  • Warn When Fixing or Removing Tags: DW'ın bu düzeltme işlemlerini yaparken bizi uyarmasını sağlar.
• "Never Rewrite Code: In Files with Extensions" : bu uzantıya sahip dosyaların kodlarını asla onarma anlamına gelir. Eğer ASP ve ya PHP veya başka bir programlama dili ile çalışıyorsanız ve include dosyalarında yarım kalmış gibi görünen taglarınız varsa buraya ASP yi eklemelisiniz (zaten mevcut)
• Special characters: <, >, & ve ‘ karakterlerini adres satırları ve doküman için encode edilmesini sağlar. W3C standartlarına göre adres satırında kullanılan tüm özel karakterler ampersantlar ile encode edilmelidir. Örneğin sorgu.asp?tablo=uyeler&amp;user=Ahmet şeklinde kullanım doğru kabul edilmektedir. Eğer bu seçeneği işaretlersen DW bizim için tüm bu kodlama işlemini otomatik olarak yapacaktır.
• URL encoding: Aynı şekilde adres satırında kullanılan özel karakterleri DW bizim için encode edecektir. Fakat bu işlemi tarayıcılar zaten istem ve cevap işlemleri sırasında otomatik yaptığından bizim encdoe etmemiz gereksiz olabilir. İhtiyacınıza ve sunucu ayarlarınıza göre bu seçenekleri tekrar gözden geçirebilirsiniz.

Copy/Paste

Copy/Paste kısmındaki ayarlar.

Kopyala-yapıştır ayarları

• Bu kısımda diğer uygulamalardan kopyalayıp sayfamıza yapıştırdığımız metinler için DW’ın nasıl davranması gerektiğini belirtiyoruz.
  • Text only: sadece metni alır biçimlendirme ve vurguları temizler, paragraflar liste ve tabloları tanımaz, yeni satır yapar.
  • Text with structure: Yapı ile birlikte metni alır. Paragraflar listeler ve tabloları korur.
  • Text with structure plus basic formating: Yapıyı korur ayrıca temel biçimlendirme özellikleri olan kalın italik yazı gibi vurguları korur.
  • Text with structure plus full formating: Yapıyı korur ayrıca zengin biçimlendirme seçenekleri ile birlikte metni alır. Stiller ve renkler korunur. Bu seçenek Word’den kopyalanan metinler için sorun yaratabilir ve ekstradan gereksiz kodlara neden olabilir.
• Retain line breaks: Yeni satırları (<br />) korur ve aynen aktarır.
• Clean up Word paragraph spacing: Word den kopyalama sırasında oluşan paragraflar arası boşluğa sebep olan stilleri siler.

CSS styles

CSS styles kısmındaki ayarlar:

CSS stil ayarları

• When Creating CSS Rules
  • 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
  • Use Shorthand: Aynı şekilde stil düzenleme işlemi sırasında hangi parametrelerde hızlı yazma özelliğinin kullanılacağını belirtir.
  • Open CSS files when modified: Stil dosyasında yaptığınız herhangi bir değişiklikten sonra stil dosyasının DW içerisinde açılmasını sağlar.
• When Double-Clicking in CSS Panel: CSS stilin üzerine çift tıklandığında hangi işlemin yapılacağını belirtir.

File compare

File compare kısmındaki ayarlar.

Dosya karşılaştırma ayarları

DW’ın dosya karşılaştırma işlemi sırasında hangi yazımlı kullanacağını bu kısımdan belirtebilirsiniz. Dosya karşılaştırma yazılımları hakkında ayrıntılı bilgiyi Macromedia’nın sayfasından alabilirsiniz.

File types / Editors

File types / Editors kısmındaki ayarlar.

Dosya tipleri düzenleyicisi

• Open in code view: bu uzantıya sahip dosyaları DW ile açarken doğrudan kod görünümünde açılmasını sağlar.
• External code editor: Harici bir kod düzenleme yazılımı kullanıyorsanız bunu belirtmenizi sağlar. (Örneğin EditPlus gibi)
• Reload modified file: Değişiklik yapılmış dosyayı yeniden yüklerken nasıl davranılması gerektiğini belirtir.
• Save on launch: Ön izleme sırasında dosyanın kaydedilmesi sırasında nasıl davranılması gerektiğini belirtir.
• Fireworks: Sisteminizde Fireworks kurulu ise kurulu olduğu dizini buradan belirtebilirsiniz.

Fonts

Fonts kısmındaki ayarlar.

Yazıtipleri

• Fonts Settings: DW’ın varsayılan olarak kullanacağı Font Encoding ini belirtir. Türkçe sayfalarda sorun yaşamamak için Türkçe seçili olmalıdır.
• Proportional Font, Fixed Font, Code View: DW içerisindeki çalışma ortamlarında kullanılacak olan fontun türünü belirtir.

Highlighting

Highlighting kısmındaki ayarlar.

Vurgu ayarları

DW’ın şablon alanları ile çalışırken kullandığı renklendirme şekillerini düzenlemenizi sağlar.

Invisible Elements

Invisible Elements kısmındaki ayarlar.

Görünmez bileşen ayarları

DW’da “Design View” (Tasarım görünümü) ile çalışırken normalde görünmeyen fakat bir işlevi olan elementlerin tasarım görünüm içinde nasıl görüneceğini belirten işaretler kullanılır. Buradan hangilerin görünüp hangilerinin görünmeyeceğini belirtebilirsiniz.

• Show Dynamic Text as:
  • (Recordset Field) : Dinamik metinlerin (recordset_adi[filed_adi]) şeklinde ekrana yazdırır. Aynı sayfada çoklu Recordset kullanıyor iseniz çok işe yarar.
  • (): doğrudan (filed_adi) şeklinde yazdırır.
• Server Side Include: Show Content Of ıncluded File : Include edilmiş dosyanın içeriğini Tasarım görünümde gösterilmesini sağlar.
• Server-Side includes Show contents of icluded file: Sunucu taraflı programlama dillerinin include fonksiyonları ile sayfanıza dahil ettiğiniz dokümanların içeriklerini DW içerisinde de görünmesini sağlar. Böylece tasarım elemanlarını barındıran (header, footer gibi) include dosyaları ile çalışmak daha rahat olacaktır.

Layers

Layers kısmındaki ayarlar.

Katman ayarları

Sayfalarınıza eklediğiniz katmanlarınız için varsayılan ayarlarını bu kısım altından belirtebilirsiniz

Layout Mode

Layout Mode kısmındaki ayarlar.

Ara yüz ayarları

• Autoinsert Spacer :
  • When Making Autostretch Tables : Layout view da çalışırken Aotuostretch tablolar yaptığımızda bu tabloların içini doldurmak için kullanılan 1x1 piksellik bir GIF dosyasını DW’ın otomatik olarak yaratmasını belirtir.
• Spacer Image: Bu spacer dosyasının seçtiğimiz her site için ayrı ayrı tanımlayabilmemize olanak sağlar.

Diğer seçenekler Layout View’ın görünüm opsiyonlarını belirten renkleri kendimize göre özelleştirmemizi sağlar.

New Document

New Document kısmındaki ayarlar.

Yeni doküman ayarları

Burası DW ile çalışırken File / New menüsünü seçtiğimizde açılan yeni dokumana ait ayarlarımızın olduğu kısım.

• Default document: Varsayılan sayfa türünün ne olduğunu belirler.
• Default document type (DTD): XHTML sayfa türü tanımlamasını (XHTML Document Type Definitions) seçmemizi sağlar. Sayfa içeriğindeki yazım kurallarını etkileyip tasarım değişmesine dahi sebep olan bu türü dikkatli seçmelisiniz.
• Default Encoding: İşte önemli noktalardan biri Türkçe dil sorununu aşabilmek için burayı Türkçe (Windows) yapmalıyız.

Eğer eski bir DW sürümü kullanıyorsanız ve bu listede böyle bir seçenek yoksa Dreamweaver MX Türkçe Encoding adlı eklentiyi kurmamışsınız demektir. Bu eklentiyi sitemizden temin edebilirsiniz.

• Unicode Normalization Form: Eğer varsayılan encoding olarak Unicode (UTF-8) seçtiyseniz listeden bir form seçiniz.
• Include Unicode Signature (BOM): Eğer varsayılan encoding olarak Unicode (UTF-8) seçtiyseniz…
• Show New Document Dialog on Control+N: CTRL+N ye basıldığında New Document diyalog penceresinin açılmasını sağlar.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3.  

Preview in Browser

Preview in Browser kısmındaki ayarlar.

Tarayıcıda ön izleme ayarları

Sayfanızı DW'da düzenlerken tarayıcıda nasıl göründüğüne bakmak için "Preview in Browser" seçeneğini kullanırsınız. İşte burada onunla ilgili temel ayarları yapıyoruz.

• "Browsers" kısmına sisteminizde yüklü diğer tarayıcıları da + işaretine tıklayarak ekleyebilir ya da önceden eklediğiniz tarayıcıları - ile kaldırabilirsiniz. Sayfa her zaman tüm tarayıcılarda aynı görünmeyebiliyor
• Preview using temporary file: Sayfanın ön izleme görünümü tarayıcının geçici internet dizini üzerinden çağırılarak görüntülenir. Bu şartlarda eğer sayfada bir değişiklik yapıp kaydederseniz sayfayı tazele demek bir işe yaramayacaktır. U seçeneği kaldırmanızı tavsiye ediyorum. Zira bu şekilde yaptığımız değişiklikleri tarayıcının tazele / yeniden yükle (F5) düğmesine bastığımızda bize yansımasını sağlamış oluyoruz. Aksi taktirde her değişiklikten sonra DW içerisindePreview in browser seçeneğini (F12) kullanmamız gerekecektir.

Site

Site kısmındaki ayarlar.

Site ayarları

Tanımlı sitelerle çalışırken Files panelinin görünüm ve erişim ayarlarını bu kısımdan yapıyoruz.

Always Show: Uzak sunucu bağlantısı yapıldığında yerel ve ya uzak sunucunun ekranın hangi tarafında görüntüleneceğini belirtir.

Dependent Files: Bağımlı dosyaların (resim, harici .css stil ve ya Javascript .js dosyaları) düzenleme sırasında uzak sunucudan alınması veya gönderilmesi işlemleri sırasında DW’ın uyarı vermesini sağlar.
 

Bu uyarı pencerelerinin opsiyonlar seçilmeyene kadar zorla görüntülenmesini sağlamak için Windows kullanıcıları ALT, Macintosh kullanıcıları ise Option tuşlarına basılı tutarak bu işaretleri tıklayabilirler.

FTP Connection Disconnect after __ minutes iddle: dk. boşta kaldığında bağlantıyı kes

FTP Time Out: FTP bağlantısı için zaman aşım süresi.

FTP Transfer options: DW’ın diyalog penceresi görüntülendikten kaç sn sonrasına kadar beklemesi gerektiğini belirtir. Eğer bu süre sonunda ekranda görüntülenen uyarı mesajına bir cevap verilmezse varsayılan seçenek işleme konacaktır. (var olan dosyaların üstüne yaz, yeniden adlnadır vs. gibi işlemler)

Firewall Host / Firewall Port: Sisteminizde kurulu olan güvenlik duvarı ayarları. DW’ın internete açılabilmesi için bu ayarların uygun yapılmış olması gerekmektedir.

Put Options: Save Files Before Putting: DW’ın dosyaları uzaktaki sunucuya göndermeden önce kaydetmesini belirtir.

Move options Prompt before moving files on server: Uzaktaki sunucuda dosyaları taşırken DW’ın bir uyarı mesajı göstermesini sağlar.

Manage Sites: Tanımlı siteleri yönetmenizi sağlar. Bu seçeneğe Site / Manage sites menüsünden de ulaşabilirsiniz.

Status Bar

Status Bar kısmındaki ayarlar.

Durum çubuğu ayarları

Aslında çok zekice düşünülmüş fakat pek de bilinmeyen bir seçenek. DW’da bir tasarım yaparken çoğu zaman hangi çözünürlükte çalışıyorsak ona göre hazırlarız. Fakat farklı çözünürlük kullanan bir ziyaretçi siteye girdiğinde sayfada kaymalar ve bozulmalar olur. Öte yandan 800x600 çözünürlükte siteyi görüntüleyen bir ziyaretçi görüntü alanı olarak tam anlamıyla 800 piksel genişlik göremez. Tarayıcının kaydırma çubuklarından (scroll bar) ve pencere kenarlıklarından kaynaklanan kayıplar nedeniyle bu rakam 760-780 piksel arasında değişmektedir. İşte Status bar bize tam olarak hangi çözünürlükte hangi piksellerde bir tasarım yapmamız gerektiğini gösteren seçenekler sunuyor.

Buradaki değerleri istediğiniz gibi değiştirebileceğiniz gibi yeni değerler de ekleyebilirsiniz. Örnek olarak bir Pop-up pencere ile çalışırken yine bu kayıplar nedeniyle yatay kaydırma çubuklarının çıkmasını önleyemediğimiz ve istemediğimiz durumlarda buraya açtığınız pop-up un genişliğini ve gerçek genişliği girerek pop-up’ın içeriğini hazırlarken doğru genişliklere göre pencereyi yeniden boyutlandırıp daha sağlıklı bir tasarım yapmanızı sağlar. Ayrıca DW bize dokümanın dosya boyutuna göre bu dokümanın kaç sn de yükleneceğini yaklaşık olarak hesaplayıp status barda gösterir. Bağlantı ayarını da yine “Connection Speed” seçeneği ile yapıyoruz.

Validator

Validator kısmındaki ayarlar.

Validatör ayarları

DW'ın HTML kodunun geçerliliğini kontrol ederken hangi kriterlerle uyumluluk göstermesi gerektiğini bu kısımdan düzenliyoruz.

Burada hiyerarşik bir yapı söz konusu, örneğin eğer HTML 4.0'ı işaretlerseniz HTML 3.2 ve HTML 2.0 otomatik olarak seçilmiş olacaktır. Seçimleriniz için ayrıntılı ayarları yapmak için "Options" butonuna tıklamalısınız. Buradan ilgili kısımları işaretleyip OK ile pencereyi kapatıyoruz.

KAYNAK:  http://www.bilgisayardershanesi.com/bilgisayar_dersleri/dreamweaver-ince-ayar.html

Dreamweaver ve CSS Stiller

İşe DW içerisindeki stil kullanımlarını anlatarak başlayalım. Çok kullanılan ve bir web standardı olan CSS stiller (Cascading style sheets) DW ile tam anlamıyla bir tasarım silahına dönüşüyor.

Bu makalede CSS’nin olduğundan çok DW içerisinde stil yönetim ve kullanım araçlarından bahsedeceğiz.

CSS konusunda bilgisi az olan arkadaşlara en azından internet üzerindeki kaynaklardan bilgi edinmelerini ve HTML tasarımı konusunda CSS’nin ne anlama geldiğini kavramalarını öneriyorum. Aksi takdirde bu makale kendilerine pek bir anlam ifade etmeyecektir.

DW içerisinde stilleri kullanabilmenin ve yönetebilmenin ilk kuralı CSS styles panelini iyi tanımaktan geçiyor. Bu panelin kullanımı da herhangi bir DW panelinin kullanımından farklı değil. Genel olarak panel gruplarının ne işe yaradığını kavradığınızda bu panelinde kullanımının son derece basit olduğunu göreceksiniz.

CSS Styles Paneli

Panel All Rules bölümünde sayfamız içerisinde ilişkili ve önceden tanımlı stillerin bir listesini barındırıyor. Bu liste sayesinde stilleri seçili objelere uygulayabiliyor ve stillerimizi yönetebiliyoruz.

CSS styles paneli

All Rules’dan bir stili seçtiğimiz anda Properties kısmında ilgili stile ait özellikler ve parametreler listeleniyor. Add Properties seçeneği ile de stilimiz için yeni bir özellik tanımlama mümkün. Özelliğin türüne ve stilin konumuna göre DW bize olası seçenekler ve tanımlamaları Code hints’e benzer bir ara yüz ile sunuyor.

CSS styles paneli ile stile yeni bir parametre eklemek oldukça kolay

Aynı panel içerisinde yer alan “Current” sekmesi ile sayfada herhangi bir alana tıkladığımızda o alanı etkileyen CSS özelliklerini görüntülemeye yarıyor. Örneğin Current sekmesine geçip bir başlığa ya da stiller ile biçimlendirilmiş bir metne tıkladığınız anda bu alanda stil özellikleri listelenmekte ve bize bu elemanın hangi stillerden etkilendiği konusunda fikir vermektedir.

CSS styles paneli current sekmesi görünümü

Panelin alt kısmında bulunan düğmeler ile de panel menüsündeki işlemleri gerçekleştirmek mümkün. Sağ alt kısımda bulunan

Stil yönetim düğmeleri

• Attach Style Sheet: Harici .css uzantılı stil dosyalarınızı çalıştığınız doküman ile ilişkilendirmeye yarar. Böylece tek bir stil dosyası ile sitenizdeki tüm sayfaları biçimlendirebilir ve değişikliklerin tek bir .css dosyası üzerinden yürümesini sağlayabilirsiniz. Buraya tıkladığımızda açılan iletişim penceresinden Browse diyerek ilgili CSS dosyasını seçebiliriz.
  
   
  

  Harici CSS dosyasını doküman ile ilişkilendirmek
  
   
  • Add as: seçeneği stilin nasıl doküman içerisine dahil edileceğini belirtiyor. "Link" dediğimizde ornek.css dosyasını "link" tekniği sayesinde doküman ile ilişkilendiriyor. "Import" dediğimizde ise ornek.css dosyası "@inport" tekniği ile dokümanımız ile ilişkilendiriliyor. Bu iki yöntem şu aşamada bizim için anlam ifade eden bir fark taşımıyor, herhangi birini seçebilirsiniz
  • 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)
  • 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

Panel yönetim düğmeleri

• Category View: Stil özelliklerini kategorilere ayırarak listeler.
  
   
  

  Kategori görünümü
  
   
• List View: Ne kadar özellik varsa hepsini listeler Fakat tüm özellikleri gösterdiği için biraz kafa karıştırıcı olabilir.
  
   
  

  Liste görünümü
  
   
• Set Properties View: Standart olarak DW kurulumunda gelen görünüm türüdür. Bence en başarılı ve kullanışlı görünüm türü olmakla beraber az yer kaplar.

Stilleri nesneler uygulamak

Yarattığımız ya da dışarıdan harici olarak ilişkilendirdiğimiz CSS stilleri herhangi bir nesneye uygulamak için öncelikle ilgili nesneyi (metin grubu, paragraf, link, resim,tablo veya DIV) seçmemiz gerekmektedir. Ardından Properties paneli üzerinden “Style” listesinden uygun bir stil seçebiliyoruz.

Properties paneli üzerinden CSS stilleri seçip uygulayabilirsiniz

Veya yine nesneyi seçtikten sonra CSS Styles panelinden uygulamak istediğimiz stili seçip sağ tıklıyoruz ve “Apply” diyoruz yine aynı sonucu alacağız.

CSS styles pnaelinde n stil uygulamak

Bunu da beğenmezseniz nesneye tasarım görünümünde çalışırken sağ tıklayıp CSS styles / stil ismi şeklindeki menüden de stilimizi uygulayabiliyoruz.

Sağ tuşu kullanarak stil uygulamak

Design Time Style Sheet….

DW MX ile gelen çok kullanışlı bir özellik olan “Design time style sheet” özelliği; özellikle profesyonel tasarımcıların baş balesi olan ve include ya da dosyaları şablon kütüphanesi objeleri (Library) ile çalışırken karşılaşılan tasarım problemlerini ortadan kaldırıyor.

DW ile çalışırken bazen CSS stilleri doğru bir biçimde göremeyebilirsiniz. Ancak tarayıcıda çalıştırıldığında izlenebilecek olan bu stilleri DW içinde çalışırken kullanabilmek için DW’ın “Design Time Style Sheet” özelliğini kullanacağız.

Peki nedir bu Design Time Style Sheet ?

Eğer programlama dilleri ile bir web geliştirme projesinde çalıştıysanız (ASP, PHP gibi) include ile çalışırken bu stillere ihtiyacınız olduğu anlarda onları kullanamadığınızı bilirsiniz. Yada şablon (template) veya şablon kütüphanesi (Library) dosyaları ile çalışırken de aynı sorun söz konusu tabi. İşte Design Time Style Sheet özelliği ile DW’da çalışırken önceden belirlediğiniz bir .css dosyası doküman düzenleme sırasında (sayfaya bağlanmış–bağlanmamış fark etmez) aktif hale getirilecek ve en doğru biçimlendirmeyi yapmanız sağlanacaktır. Diğer taraftan tam tersi bir durum da söz konusu olabilir. Sayfa tasarımını yaparken bazı stillerin gizlenmesini ama tarayıcıda doğru görünmesini istiyor olabilirsiniz. İşte Design time style sheet bize bu imkânları sağlıyor.

Design Time Style Sheet özelliğini kullanmak için CSS Styles panelinin özellikler menüsünden “Design Time …” seçeneğine tıklamanız yeterlidir.

CSS panel müsünden Design Time seçeneğini seçiyoruz

Açılan diyalog penceresinden “Show only at Design Time” kısmı sadece tasarım anında görüntülenecek olan CSS Stil dosyalarını belirtiyor. + işaretine tıklayarak istediğiniz kadar .css dosyası ekleyebilirsiniz. “Hide at Design Time” ise tasarım anında gizlenmesi gereken .css dosyalarını belirtiyor. Oldukça kullanışlı bir özellik.

Design time style sheet iletişim penceresi

Style rendering

Style rendering stillerimizin görüntüleneceği daha doğrusu sayfa görünümüne katılacağı (burada rendering olarak tabir edilen olay) medya türünü belirten bir terminolojidir. Söz gelimi siteniz tasarımı için farklı medyalar için farklı CSS dosyaları hazırlayıp bunları sayfanız ile ilişkilendirirseniz, siteniz erişilebilirlik seçeneklerini en üst düzeyde tutmuş olursunuz. Örneğin yazıcı çıktısı sırasında; site tasarımındaki logo ve renkli tasarım bileşenlerinin yazıcı kartuşlarını bitireceği yada çıktı kalitesini düşüreceği gibi sitenizdeki içerik için çıktı alan ziyaretçinin sitenizden soğumasına sebep olabilmektedir.

Bu tarayıcıların desteklediği bir özellik olmakla beraber DW içerisinde tasarım sırasında nasıl göründüğünü görmek isteyebilirsiniz. İşte bunun için DW geliştiricileri çalışma esnasında hangi medya türüne göre stil görüntüleme seçeneklerinin aktif olacağını belirten bir özellik olan Styl rendering’i bizlere sunmaktalar.

Varsayılan olarak kapalı gelen Style Rendering toolbar’ı açmak için View / Toolbars / Style Rendering menüsünü kullanabilirsiniz.

Style rendering toolbar

Bu toolbar içerisinden DW’da kullanım sırasında hangi medya türüne göre stil görüntüleneceğini belirtebilirsiniz. Başlıca media türleri şu şekildedir

• Render Screen Media Type: Ekranlar için görüntüler. Bu PC kullanıcıları oluyor.
• Render Print Media Type: Yazıcı çıktısı sırasında görüntülenir.
• Render Handheld Media Type: Mobil cihazlarda (smartphone veya PDA cihazlar gibi) görüntülenir.
• Render Projection Media Type: Projeksiyon cihazlarında görüntülenir.
• Render TTY Media Type: Teletype olarak tabir edilen uzak yazıcı cihazlarında görüntülenir.
• Render TV Media Type: Televizyon ekranında görüntülenir.

Attach style sheet seçeneği sırasında stilimiz için hangi medya türünün geçerli olacağı seçmemizde mümkün. (bu özellik tarayıcıları etkiliyor)

Buradan “all” derseniz her türlü görüntüleme medyası için geçerli olabileceği gibi; “projection” projeksiyon cihazlarında görüntüleneceği, “screen” sadece ekranlarda görüntülenebileceği, “print” dediğimizde ise sadece yazıcı çıktısı sırasında görüntülenmesi anlamına geliyor. (Bu şekilde sayfa tasarımına normal tasarım stili ile birlikteprint medyası için sadece gerekli kısımların göründüğü diğer logo ve menülerin CSS özellikleri ile gizlendiği bir stil dosyası ilişkilendirirseniz ziyaretçileriniz sitenizden yazıcı çıktısı alırken zorlanmayacaklardır.)

Medya türleri seçimi

Hazır Stiller

DW içerisinde gelen hazır stil şablonlarını kullanarak kendinize yeni ufuklar açabilirsiniz.

File / New menüsü ile yeni doküman oluşturma penceresini açtığınızda CSS Style Sheets kategorisi altında hazır olarak tanımlanmış ve bir sayfanın tüm stil ihtiyaçlarını karşılayacak CSS tanımlamalarını içeren şablonlara ulaşabilirsiniz.

Hazır stil dosyalarını kullanmak

Dokümanımıza harici bir stil dosyası ilişkilendirme esnasında Sample style sheets seçeneği ile de hazır stil dosyalarını sayfamıza ilişkilendirebileceğimiz bir ara yüze ulaşmak mümkün. CSS konusunda yeni olan arkadaşlar bu stilleri inceleyerek bir stil dosyasında ne tür stiller olması gerektiğini kavrayabilirler.

Hazır stil dosyalarının seçimi

KAYNAK:  http://www.bilgisayardershanesi.com/bilgisayar_dersleri/dreamweaver-ve-css-stiller.html

Dreamweaver Panel Grupları

Bu paneller Dreamweaver’ın (DW) temel ara yüz bileşenlerini oluşturmakla beraber hepsinin kullanımı birbirine oldukça benzemektedir. Bu nedenle bunların çalışma ve işleyiş prensiplerini kavradığınız takdirde DW’ı kullanmak çocuk oyuncağından farksız olmakta. Artık bir standart halini alan bu paneller sürümden sürüme farklılık gösterse dahi temelde aynı mantığı korumaya devam etmektedir.

Örneğin aynı panel bir önceki sürümde farklı bir panel grubuna dahil iken bir sonraki sürümde sadece yeri değişmiş fakat işlevinde herhangi bir değişme olmamıştır.

Makaleyi okurken olurda sizdeki Dreamweaver sürümünde böyle bir panel göremezseniz endişelenmeyin. Makale Dreamweaver 8 baz alınarak kaleme alınmıştır.

Panellerin sağ üst köşelerindeki simgelere tıkladığımızda açılan Panel menülerinden ilgili panele ait tüm işlemleri yapabilmemiz mümkün. Örneğin CSS Styles paneli menüsünden Yeni bir stil yaratabilir ya da var olanları yönetebiliriz. Yine aynı Panel menüleri sayesinde “Group CSS styles with…” seçeneği ile bu panelin başka bir panel gurubu altında yer almasını sağlayabiliriz. Aynı şekilde panelleri sol üst köşelerinden tutup istediğiniz bir yere sürükleyerek çalışma ortamınızı kendinize göre düzenlemeniz de mümkün.

CSS styles paneli

Uzatmadan panel gruplarını incelemeye başlayabiliriz. Bu gruplar CSS Styles, Application, Files, Tag inspector, Layers, Results, History ve Frames dir. Daha yakından incelemek gerekirse;

CSS styles

Bu panelimiz adından da anlaşılacağı üzere CSS stillerimizi yönetmemize yarıyor. Eski sürümlere göre DW 8 de biraz daha kapsamlı ve kullanışlı hale getirilmiş olan bu panel işlerimizi tahmin ettiğiniz gibi oldukça kolaylaştırmakta.

CSS styles paneli liste görünümü

Panelde önceden tanımladığımız stillerin isimleri listelenmekte ve biz de bu listeden ilgili stile tıklayarak panelin alt kısmında bulunan “Properties for …” başlıklı kısımdan stilimizin özelliklerine doğrudan müdahale edebiliyoruz.

Aynı panel içerisinde yer alan “Current” sekmesi ile sayfada herhangi bir alana tıkladığımızda o alanı etkileyen CSS özelliklerini görüntülemeye yarıyor. Örneğin Current sekmesine geçip bir başlığa ya da stiller ile biçimlendirilmiş bir metne tıkladığınız anda bu alanda stil özellikleri listelenmekte ve bize bu elemanın hangi stillerden etkilendiği konusunda fikir vermektedir.

CSS styles paneli current sekmesi görünümü

Bu panelin daha ayrıntılı özellikleri CSS stiller ve biçimlendirme kapsamında ileride ele alınacağından şimdilik bu kadarla geçiyoruz.

Files

Bu panel standart olarak 3 sekmeden daha doğrusu 3 ayrı panelden meydana gelmektedir. Eğer siz sonradan bir panel grup değişikliği yapmadıysanız bunlar:

• Files
• Assets
• Snippets

Her biri değişik işlevlere sahip bu panelleri incelemek istersek:

Files

Eğer tanımlı sitelerle çalışıyorsak yani Dreamweaver içerisinde bir site tanımlaması yaptıysak ve çalışmalarımızı bu site üzerinden yürütüyorsak bu panelde otomatikman içerisinde çalışılan sitenin dosyaları görünecektir. Yine aynı şekilde Windows Gezgini mantığı ile ağaç yapısında klasörleri gezebilir değiştirmeke istediğiniz dosyalara ulaşmak için bu paneli kullanabilirsiniz.

Files panel grubunda Files paneli ile site dosyalarınızı yönetebilirsiniz

Örneğin sayfanıza bir resim eklemek için bu Files panelinden resimlerin bulunduğu dizine girip resim dosyasını sürükleyip sayfa içerisine bıraktığınızda resim doğrudan sayfanın içerisine eklenecektir.

Files panelinden resimleri sürükle bırak yöntemiyle sayfanıza ekleyebilirsiiz

Panelin sağ üst köşesindeki işarete tıklayarak açılan menüden panele ait bazı özel işlemleri gerçekleştirebilmemiz de mümkün. Bu özellik her panel grubu için geçerli olduğundan ileride bunu tekrarlama ihtiyacı duymayacağım.

Files paneli menüsü

Assets

Assets kelime anlamı itibariyle mal varlığı manasına geliyor. Aslında DW yapımcıları bu panelin ne işe yaradığını çok güzel anlatan bir isim seçmiş. Tanımlı bir sitede çalışırken o site içerisinde kullandığınız her türlü resim, CSS tanımlarken kullandığınız renkler, linkler, flash dosyaları ve şablon kütüphanesi objeleri (Library) dosyaları gibi site içeriğinin oluşturulmasında görev alan tüm elemanları bu panel üzerinden tek bir liste halinde görmek mümkün.

Assets paneli

Eğer listenin eksik olduğunu düşünüyorsanız son yaptığınız değişikliklerin listeye yansımasını sağlamak için yine sağ üst köşeden açılan menüden Recreate site listseçeneğinden listeyi baştan oluşturabilirsiniz.

Assets paneli menüsü

Panel aynı zamanda Favorites görevi de görmekte. Yani sıkça kullandığımız materyallere kolayca erişmemizi sağlayan bir listeyi de tutuyor. Böylece materyallere erişmek gerçekten de kolaylaşıyor.

Snippets

Bu panel daha çok hazır kod parçalarını barındıran bir kod kütüphanesi gibi düşünülebilir. DW ile standart olarak birçok hazır script ve örnek kod bulunmakta: Öte yandan kendi yazdığınız kodlarla veya fonksiyonlar sayesinde de kendi kütüphanelerinizi oluşturmak mümkün. Böylece özellikle kod yazan arkadaşlar her an elinin altında kod kütüphanelerini kullanabilmekte

Snippets paneli

Yine sürükle bırak mantığı ile çalışan bu panel özelleştirilebilmesi açısından oldukça işe yarayacak gibi görünüyor.

Application

Sunucu modelleri ile çalışarak dinamik içerikli sayfalar yapıyorsanız Application paneline çokça ihtiyacınız olacak demektir. Panel grubu;

• Database
• Binding
• Server behaviors
• Compoments

Database

Yaptığımız projede kullandığımız veritabanı bağlantılarını bu panelde görebiliriz.

Applications paneli altında Database (veritabanı) sekmesi

Bindings

Bu panel altında Recordset olarak tabir ettiğimiz DW içerisinde veritabanına bağlanarak SQL sorgularının sonuçlarını aldığımız kayıt dizelerini oluşturabilir ve bu sorgu sonucunda dönen veritabanı alanlarının listesini görebiliriz. Recordset kavramı ve sayfaya veri yazdırma işlemleri ilerideki konularda ayrıntılı olarak ele alınacağından şimdilik bu kadarla geçiyoruz.

Applications paneli altında Bindings (bağlantılar) sekmesi

Server Behaviors

Behavior kavramına daha önce de deyinmiştik. Server behavior’lar ise onların dinamik sayfalardaki eşdeğerleri olarak karşımıza çıkıyor aslında. Yani sayfaya eklenen dinamik içerikle ilgili her türlü bilgi bu panelde listelenmekte. Aynı şekilde kayıt sayısı veya sayfa bilgisi, kullanıcı giriş çıkış işlemleri gibi bir çok dinamik opsiyonu da bu panel üzerinden yönetebilmek de olası

Applications paneli altında Server Behaviors sekmesi

Kurduğumuz eklentilere (extension) göre bu listenin içeriği genişleyebilir. Kurduğunuz eklenti eğer server behaviors ile ilgili bir eklenti ise öncelikle burada aramak daha mantıklı olacaktır.

Applications paneli altında Server Behaviors sekmesi menüsü

Components

Emin olmamakla beraber sanırım sadece ASP.NET sayfalarında bir anlam kazanan ve eklentiler ile birlikte gelen componentlerin yönetildiği panel oluyor kendileri. ASP.NET ile herhangi bir DW projesi geliştirmediğimden bu panel hakkında pek de geniş bilgi veremeyeceğim. Bir şeyler eklemek isteyen arkadaşlar bana konu ile ilgili e-mail göndererek katkıda bulunabilirler.

Tag inspector

Panel Attributes ve Behaviors adlı iki panelden oluşmakta.

Attributes

Attribute kelime anlamı olarak özellik, bağlaç manasına gelmekte. Programlama ile ilgilenenlerin pek de yabancı olmadığı bir kavram aslında. Örneğin sayfamıza resim eklemek için gerekli kod aşağıdaki gibidir.

1. <img src="images/resim2.jpg" width="250" height="375" style="float: right;" />
2. 
   

Buradaki width, height, style ve src birer attribute’ü temsil etmekte. Bunların sayısı HTML öğelerinin türlerine göre değişmekle beraber sonradan sayfa düzeni sırasında bir attribute eklemek de olası. Fakat tasarım yaparken bir attribute eklemek için kod görünümüne geçmek ve kodun içerisinden ilgili satırı bulup değişikliği yapmak gerekmektedir. Buda zaman zaman can sıkıcı bir hal almakta idi. Fakat DW ile bu işlem oldukça kolay. Sayfada herhangi bir eleman seçin (resim, link, paragraf vs.) ve Attribute paneline dikkat edin. Seçtiğiniz elemana göre bize çeşitli seçenekler sunmaktadır. Örneğin buradan bir resmi sağa hizalamak için gerekli STYLEkodunu girmek gerçektende oldukça kolay.

Attributes paneli kategori görünümü

İsterseniz attribute’leri kategorilere göre isterseniz de bir liste halinde görmek mümkün

Attributes paneli

Behaviors

Aslında eski DW kullanıcılarının ilk sürümlerden bu yana pek de yabancı olmadıkları bir panel bu. Muhteviyatını ise hazır JavaScript Events (olayları) oluşturmakta.

Behaviors paneli menüsü

Burada “Event” olarak tabir edilen olay kavramını açıklamak gerekiyor sanırım. HTML standartlarına göre objenin türünden türüne değişmekle beraber belli başlı standart olaylar bulunmaktadır. Bunlar çağrılan JavaScript kod bloğunun çalıştırılmaya başlayacağı veya daha farklı bir deyimle tetikleneceği anı belirtir. Örneğin bir linke tıkladığımızda Pop-up pencere açtırmak istersen öncelikle bir metne link olarak # veriyoruz. Bu boş bir linktir. Yani hiçbir işlevi yoktur. Daha sonra bu link seçili ikenBehaviors panelden + işaretine tıklayarak açılan menüden Open Browser Window seçeneğini seçtiğimiz takdirde karşımıza pop-up pencere ile ilgili ayarlar çıkacaktır. Bu ayarları yapıp OK dediğimizde ise Behaviors panelde “onClick Open Browser Window” şeklinde bir ifade göreceğiz. onClick in üzerine tıkladığımızda bu html elemanı için geçerli event’ların listesi açılacaktır.

Behaviors paneli event (olay) listesi

Sayfada elemanları seçtikçe önceden bu elemanlar için tanımlı behavior’ların listesi bu panel içerisinde Event’ları ile birlikte görünecektir. Listenin en altında yer alanShow Events for menüsünden bu olay listesinin hangi tarayıcı uyumluluğu baz alınarak listeleneceğini seçebiliriz.

Behaviors paneli Show events for ile tarayıcı uyumluluğunu ayarlayabilirsiniz

Results

Bu panel adından da anlaşılacağı üzere sonuçları bünyesinde barındırıyor. Bu sonuçlar sayfada Search And Replace ile değiştirdiğimiz kelimelerin sonuçlarından sayfayı tarayıcı uyumluluğuna dair kontrol ettirdiğimiz rapor sonuçlarına kadar birçok şeyi kapsamaktadır. Göze hoş görünmesi açısından ben Timeline panelini de buraya taşıdım oldukça güzel göründü sizlere de tavsiye ederim. İçerdiği paneller;

• Search
• Reference
• Validation
• Target Browser Check
• Link Checker
• Site Reports
• FTP logs
• Server Debug

Search

Tahmin edebileceğiniz gibi sayfada yaptığımız bul değiştir olaylarının sonuçlarını görmemize yarayan bir panel. Üzerinde söylecek pek bir şey yok.

Search paneli sonuçları

Edit / Search and Replace seçeneğinde Find in olarak belirtilen menüden “Entire current local site” seçeneği ile tüm site içinde bul-değiştir işlemini yapabilir ve bu result paneli sayesinde hangi dokümanın hangi satırında ilgili değişikliğin yapıldığını görebilirsiniz.

Reference

DW içerisinde gelen e-book’lar olarak tabir edebiliriz bunları. Macromedia’nın kendi ve OREILLY yayınlarından oluşan oldukça güzel bir kaynak kitaplığı oluşturulmuş. Kod yazarken sıkıştığınız zamanlarda hayat kurtarıcı olabiliyor.

Reference paneli

Validator

Sayfamızdaki HTML ve ColdFusion başta olmak üzere belli başlı dillerin yazım ve kullanım standartlarına uygun olup olmadığını kontrol eden ve w3c standartlarına göre kontrol yapan bir araç ve bu aracın kontrol sonuçlarını gösteren ekrandan oluşan bu panel özellikle profesyonel olarak bu işle ilgilenenlerin dikkatini çekecektir.

Validator paneli

Setting seçeneği ile bu geçerlilik kontrolünün hangi standartlara göre yapılacağını da belirlemeniz mümkün.

Validatör ayarları

Taget Browser Check

Yine Validator benzeri bir işlevi olan fakat bu sefer sayfamızın tarayıcılara uygun olup olmadığını tarayıcıların destek standartlarına göre kontrol eden oldukça faydalı bir araç

Taget Browser Check

Settings den hangi tarayıcılara göre kontrol yapılacağını seçmeniz de mümkün

Taget Browser Check ayarları

Link Checker

Sayfanızda ya da sitedeki tüm dosyalardaki linkleri geçerli olup olmadıklarını kontrol eden ve bunu bir rapor halinde görmenizi sağlayan oldukça faydalı bir panel. Yeşil düğmeye tıkladığınızda açılan menüden “Check links for entire current local site” ile tüm sitedeki linkleri kontrol ettirmeniz mümkün.

Link Checker

Site reports

Site raporları aslında tüm bu bahsi geçen araçların bir kombinasyonu gibi düşünülebilir. Kapsam olarak bir veya birkaç dokümanı (sitedeki tüm dokümanları da olabilir) hatalara ve geçersiz HTML kodlarına karşı kontrol edip bunları bize bir rapor olarak sunmaktadır. Yeşil düğmeye tıkladığımız anda açılan iletişim penceresinden raporlarımız ile ilgili ayarları yapmak mümkün. Hangi özellikler için kontrol yapılacağını bu pencereden seçebileceğimiz gibi alt kısımda bulunan “Report setting” ile ilgili seçeneğe dair ayrıntılı düzenlemeleri yapmak da mümkün

Site reports

Örneğin önce Accessibility’i seçip sonra Report settings’e tıklarsak açılan pencereden Accessibility (erişilebilirlik) ile ilgili ayrıntılı düzenlemeler yapabiliriz.

Site reports ayarları

FTP log

Site tanımlamasını Remote server yani uzaktaki sunucu ayarlarını FTP ye göre yaparsanız DW işlemler bittikten sonra dosyaları FTP ile sunucuya otomatik olarak gönderecektir. İşte bu transfer işlemleri sırasında meydana gelen FTP talep ve sunucudan gelen yanıtları bu FTP log panelinden takip edebilirsiniz.

Server Debug

Eğer ColdFusion MX 6.1 ve sonrası bir sürümü ile Windows ortamında projeler geliştiriyorsanız dinamik içerikli sayfalarla çalışırken bu panelden ColdFusion debugger ile sayfadaki hataları görebilir ve düzeltebilirsiniz.

Layers

Panelin standart içeriği Timeline ve Layers panellerinden oluşmakta fakat ben çalışma ortamını düzenlerken daha kullanışlı olacağını düşündüğümden Timeline panelini Results panel grubu altına taşımıştım. Anlatımda kafanız karışmaması için dile getirmek istedim :)

Timeline

Taman çizgisi olarak çevirmek ne kadar doğru bilmiyorum fakat yaptığı iş tam olarak bu. Sayfamızda Behaviors panel kaynaklaı JavaScript lerle (Özellikle de Change Property behavior ı ile) bir akış sağladığınızda Timeline ile kaçıncı saniyede nasıl bir olay tetikleneceğini seçebilir ve görsel olarak ayarlayabilirsiniz. Flash veya video düzenleme programlarının yabancı olmadığı bir kavram olan timeline ile ilgili yazılarımızı ileride daha detaylı olarak ele alacağız.

Timeline paneli

Layers

Sayfamızdaki tüm DIV ve katmanları tek bir ara yüz içerisinde görerek yönetmemizi sağlayan oldukça kullanışlı bir panel. Özellikle Absolute pozisyonlu katmanları veTimeline uygulamaları ile uğraşanların oldukça çok işine yarayacak bir panel olsa gerek.

Layers (katmanlar) paneli

Bu panel ile katmanların Z-index değerlerini kolayca değiştirerek hangi katmanın üstte hangisinin altta görüntüleneceğini belirleyebilirsiniz. Yeri gelmişken Z-index’i büyük olan katman üstte görüntülenecektir.

Frames

Frame içeren sayfalar ile çalışırken Frame ve özellikle Frameset (tüm frameleri içeren ana pencere) üzerinde daha kolay değişiklik ve düzenleme yapmanızı sağlayan bir paneldir. Frameleri seçtikten sonra Properties panelinden ilgili frame’e ait değişiklikleri yapabilirsiniz.

Frames paneli

History

DW ile çalışırken sayfa içerisinde yaptığımız her hamle her değişiklik olay geçmişine kaydedilmekte ve yaptığımız hataları CTRL+Z ile geriye alabilmekteyiz. Diyelim bir doküman üzerinde çalışırken yaptığınız bir hatayı biraz geç fark ettiniz. İşte History panel ile yaptığınız her türlü değişikliği basamak basamak görmeniz ve önceki bir basamağa atlamak oldukça kolay.

History paneli


KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/dreamweaver-panle-gruplari.html