Dreamweaver Dersleri

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

Tracing Image ile tasarım üzerinde çalışmak oldukça kolay

Document toolbar

Panel üzerinde çalıştığımız doküman ile ilgili daha doğrusu doküman penceresi ile ilintili değişiklikleri hızlı bir biçimde yapmanıza olanak sağlıyor.

Doküman paneli

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

DW içerisinde Server Debug ile çalışırken

Document Title: Dokümanımıza başlık atamamızı sağlar. Bu başlık tarayıcının başlık çubuğunda görünen metni ifade etmektedir.

No Browser/Check Errors: Dokümanımızın tarayıcı uyumluluğunu kontrol etme seçeneklerine ulaşabilmemizi sağlar.

Validate Markup: Dokümanı ya da seçili tagın kod geçerliliğini kontrol eder

File Management: Dosya yönetim menüsüne erişimi sağlar. Özellikle Remote site tanımlaması yapılmış sitelerde FTP den dosya düzenleme yetkilerini düzenleyen ve proje üzerinde aynı anda çalışan iki kişinin aynı anda birbirinden bağımsız dosyaları değiştirmemesini sağlayan Check in / Check out seçeneklerini ve dosyayı FTP den gönderme seçeneklerini yönetmemizi sağlar.

Burada önemli gördüğüm Design Notes aracı çalıştığımız dokümanların bizim için önemli bazı bilgilerinin DW tarafından saklanması ve gerektiğinde bize sunulmasını organize eder. Eğer sitenizde aynı dokümanın birkaç versiyonu varsa çok işinize yaracaktır. Bu notlar sadece tasarımcı tarafından DW içerisinde görünen bilgilerdir ziyaretçileriniz bu notları göremezler.

Design notes penceresi

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

Durum çubuğu

Document size and estimated download time: üzerinde çalıştığımız dokümanın dosya boyutu ve tahmini yüklenme süresi

Window size pop-up menu: Kullanılabilir içerik alanına göre doküman penceresini boyutlandıran ve tasarımımızın tahmini olarak nasıl göründüğünü gösteren oldukça faydalı bir özellik.

Çözünürlüğe göre yeniden boyutlandırma menüsü

Çö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ı

Etiket seçme aracı

Document window

Burası adından da anlaşılacağı üzere doküman penceresi yani çalışma alanızı ifade etmekte. Document toolbar’dan Code, Split ve Design düğmeleri ile çalışma alanımızı kod görünüm yada tasarım görünümü arasında değiştirmek de mümkün. Ben genelde Split i kullanırım. Tasarımla uğraşırken zaman zaman koda müdahale etmek de gerekebiliyor.

Doküman penceresi

Doküman penceresi

kaynak:bilgisayardershanesi.com

Yorum ekle

Güvenlik kodu
Yenile