Ali Emre
👑Efsanevi Grafiker👑
Bu dersimizde Dreamweaver CS3 programının arayüzünü tanımaya çalışacağız.
Kırmızı Alan :Bu alan, sayfa menülerinin ve Insert Menüsünün yer aldığı kısımdır.Insert Menüsü web tasarımı sırasında bize yardımcı olacak olmazsa olmaz dediğimiz araçların bulunduğu kısımdır.İlerdeki derslerde ayrıntılı bir şekilde anlatılacaktır.
Yeşil Alan :Bu alan ise Properties penceresidir.Sayfa özelliklerinin ayarlanabilmesine ve her türlü araç seçiminde,araç özelliklerine göre değişerek bize bir çok ayrıntılı ayarı yapmamıza olanak sağlayan penceredir..
Turuncu Alan:Bu alanda ise web sitesi klasörü olarak tanımladığımız klasör ve dosyaları yönetmemize yardımcı olur.Klasörler içinde yeni web sayfaları ve klasörler oluşturmamaıza izin verir.Web dünyasına yeni katılmış olan CSS ayarlarını da bu alandan yapabiliriz.
1-)Dreamweaver da 3 şekilde tasarım apılır.“CODE” bölümünde sadece kod sayfası karşınızda olur ve sürekli kod yazarak çalışmanızı yapabilirsiniz.Çalışmanız bittiğinde değişiklileri onaylamak için “F5” basmanız gerekir.
2-)2. tasarım şekli ise ”SPLİT” dir.Bu butona tıklarsanız çalışma alanı 2 ye ayrılır.Üst bölümde kod sayfası ,aşağıda ise görsel tasarım alanı yer alır.Görsel alanda web sayfası üzerinde tıkladığınız her nesnenin ilgilendirdiği kodlar üzeri seçilerek size üstteki kod bölümünde gösterilir.
3-)3.Tasarım şekli ise “DESIGN” dir.Buraya tıklarsanız web sayfanızı tamamen görsel olarak tasarlarsınız.Siz görsel olarak bir şeyler yaptığınızda Dreamweaver alakalı kodları code bölümüne otomatik olarak ekler.Fazla kod bilgisi olmayanlar bu alanda çalışmaları daha uygun olur.
4-)”Title” alanına girdiğiniz yazı internet tarayıcısında en üstte gözükür ve sayfa hakkında kısa bilgi verir.Aşağıdaki resimde en üstte “Grafikerler.net – Türkiyenin Büyük Grafiker Topluluğu – Grafik – Tasarım – Sanat” yazısı titlealanına yazılmış yazıdır.
5-)”File Managament” kısmında web sayfasında kullandığınız dosyaların(resim,flash,video…)daha yarıntılı yöneltilmesini sağlar.
11-)”Check Page” ile sayfanızı taratarak olası hataları önceden belirlersiniz.
6-)”Preview in Browser” kısmına tıklarsanız sisteminizde bulunan tarayıcılar listelenir.Birine tıkladığınızda bu ana kadar yapmış olduğunuz çalışmanın bir web tarayıcısında nasıl durduğunu görürsünüz ve hatalarınızı görmeniz için sık sık bu seçeneği kullanmanız önerilir.Bir kez tıklayın ve açılan menüden “Edit Browser List” e tıklayın burada tarayıcılarımıza kısayol atarız.Varsayılan kısyol “F12” tuşudur.”+” ya tıklayarak bu alana yeni tarayıcılar eklersiniz.”-“ ye basarsanız seçili tarayıcıyı listeden kaldırırsınız.Listeden birini seçin ve aşağıdaki “Defaults” kısmında bulunan kutucuğa tik koyun.Eğer “Primary browser” a tik koyarsanız seçili taracıyı ilk browser olarak ayarlanır.Yani F12 ye bastığınızda birinci taraycıda önizleme yaparsınız.Başka bir tarayıcı seçerek “Secondary browser” ı seçerseniz seçtiğiniz tarayıcı da ikinci tarayıcı olarak ayarlanır.”Ctrl + F12” yaptığınızda da ikinci tarayıcıda önizleme yaprsınız.OK deyerek değişiklikleri onaylayın.
7-)”Reflesh Design View” kutucuğu kod bölümünü kullanarak yaptığınız değişikler sonucu aktif olur.Yapılan kodun ” Design “sayfasında gözükmesini sağlar.Kısayolu F5 tir.
”View Options” tan sayfada kullandığınız cetvel,kılavuz çizgiler gibi araçların ayarlamalarını yaparsınız.
9-)”Visual Aids” de sayfa üzerinde kullandığınız bazı önemli araçların (Tablolar ,CSS gibi)bazı özelliklerini aktif eder veya kapatırsınız.”Frame Borders” hariç hepsini açmanız sizin yararınıza olacaktır.
10-)”Validate Markup” ile bekgenizde bulunan kodları daha ayrıntılı bir şekilde incelemenizi sağlar.Kodlarda hata varsa hata raporu ile onları listeler.
PDF dosyasını olarak indir.
Kırmızı Alan :Bu alan, sayfa menülerinin ve Insert Menüsünün yer aldığı kısımdır.Insert Menüsü web tasarımı sırasında bize yardımcı olacak olmazsa olmaz dediğimiz araçların bulunduğu kısımdır.İlerdeki derslerde ayrıntılı bir şekilde anlatılacaktır.
Yeşil Alan :Bu alan ise Properties penceresidir.Sayfa özelliklerinin ayarlanabilmesine ve her türlü araç seçiminde,araç özelliklerine göre değişerek bize bir çok ayrıntılı ayarı yapmamıza olanak sağlayan penceredir..
Turuncu Alan:Bu alanda ise web sitesi klasörü olarak tanımladığımız klasör ve dosyaları yönetmemize yardımcı olur.Klasörler içinde yeni web sayfaları ve klasörler oluşturmamaıza izin verir.Web dünyasına yeni katılmış olan CSS ayarlarını da bu alandan yapabiliriz.
1-)Dreamweaver da 3 şekilde tasarım apılır.“CODE” bölümünde sadece kod sayfası karşınızda olur ve sürekli kod yazarak çalışmanızı yapabilirsiniz.Çalışmanız bittiğinde değişiklileri onaylamak için “F5” basmanız gerekir.
2-)2. tasarım şekli ise ”SPLİT” dir.Bu butona tıklarsanız çalışma alanı 2 ye ayrılır.Üst bölümde kod sayfası ,aşağıda ise görsel tasarım alanı yer alır.Görsel alanda web sayfası üzerinde tıkladığınız her nesnenin ilgilendirdiği kodlar üzeri seçilerek size üstteki kod bölümünde gösterilir.
3-)3.Tasarım şekli ise “DESIGN” dir.Buraya tıklarsanız web sayfanızı tamamen görsel olarak tasarlarsınız.Siz görsel olarak bir şeyler yaptığınızda Dreamweaver alakalı kodları code bölümüne otomatik olarak ekler.Fazla kod bilgisi olmayanlar bu alanda çalışmaları daha uygun olur.
4-)”Title” alanına girdiğiniz yazı internet tarayıcısında en üstte gözükür ve sayfa hakkında kısa bilgi verir.Aşağıdaki resimde en üstte “Grafikerler.net – Türkiyenin Büyük Grafiker Topluluğu – Grafik – Tasarım – Sanat” yazısı titlealanına yazılmış yazıdır.
5-)”File Managament” kısmında web sayfasında kullandığınız dosyaların(resim,flash,video…)daha yarıntılı yöneltilmesini sağlar.
11-)”Check Page” ile sayfanızı taratarak olası hataları önceden belirlersiniz.
6-)”Preview in Browser” kısmına tıklarsanız sisteminizde bulunan tarayıcılar listelenir.Birine tıkladığınızda bu ana kadar yapmış olduğunuz çalışmanın bir web tarayıcısında nasıl durduğunu görürsünüz ve hatalarınızı görmeniz için sık sık bu seçeneği kullanmanız önerilir.Bir kez tıklayın ve açılan menüden “Edit Browser List” e tıklayın burada tarayıcılarımıza kısayol atarız.Varsayılan kısyol “F12” tuşudur.”+” ya tıklayarak bu alana yeni tarayıcılar eklersiniz.”-“ ye basarsanız seçili tarayıcıyı listeden kaldırırsınız.Listeden birini seçin ve aşağıdaki “Defaults” kısmında bulunan kutucuğa tik koyun.Eğer “Primary browser” a tik koyarsanız seçili taracıyı ilk browser olarak ayarlanır.Yani F12 ye bastığınızda birinci taraycıda önizleme yaparsınız.Başka bir tarayıcı seçerek “Secondary browser” ı seçerseniz seçtiğiniz tarayıcı da ikinci tarayıcı olarak ayarlanır.”Ctrl + F12” yaptığınızda da ikinci tarayıcıda önizleme yaprsınız.OK deyerek değişiklikleri onaylayın.
7-)”Reflesh Design View” kutucuğu kod bölümünü kullanarak yaptığınız değişikler sonucu aktif olur.Yapılan kodun ” Design “sayfasında gözükmesini sağlar.Kısayolu F5 tir.
”View Options” tan sayfada kullandığınız cetvel,kılavuz çizgiler gibi araçların ayarlamalarını yaparsınız.9-)”Visual Aids” de sayfa üzerinde kullandığınız bazı önemli araçların (Tablolar ,CSS gibi)bazı özelliklerini aktif eder veya kapatırsınız.”Frame Borders” hariç hepsini açmanız sizin yararınıza olacaktır.
10-)”Validate Markup” ile bekgenizde bulunan kodları daha ayrıntılı bir şekilde incelemenizi sağlar.Kodlarda hata varsa hata raporu ile onları listeler.
PDF dosyasını olarak indir.
