Teknolojideki destekçiniz

Adobe Dreamweaver ile HTML sayfası oluşturma

0 1.401

HTML hakkında öğrendiğimiz herşeyi Dreamweaver da tekrar ederek başlayacağız. Sonrasında daha fazlasına erişeceğimiz yeni şeyler öğreneceğiz. Adobe Dreamweaver’da projeye başlamadan önce nasıl dosya açabileceğimizi öğrenmekle başlayalım. Açılış ekranı karşımıza geldiğinde 2 farklı yol bize yeni proje oluşturmaya yardımcı olacak.Birinci yol Dosya > Yeni seçenekleriyle, ikinci yol ise ana ekranda Yeni Oluştur seçeneği altında yer alan sayfa yapılarından faydalanabiliriz.

 

Yukarıda önerdiğimiz seçeneklerden herhangi biriyle projemizi açıyoruz. Yeni Belge ekranı karşımıza geliyor. 4 sütun barındıran bu ekran da ihtiyaç duyulan şablonlar, sayfa türü, mizanpaj ve önizleme gibi işimizi kolaylaştıracak kısımlar yer alıyor.

 

Daha önceki yayınlarımı okumadıysanız aşağıdaki bağlantılara tıklayarak okuyabilirsiniz…

 

 

 

 

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Konumuz gereği şimdilik boş sayfayı, HTML ve mizanpaj kısmını yok olarak seçiyoruz.

 

Aşağıdaki görüntüde yer alan ekran bizi karşılıyor. Bomboş bir şablon bizim için hazır. Genel bir inceleme yaparak başlayalım. En üstte Dosya, Düzen, Görünüm,Ekle,Değiştir,Format,Komutlar , Site, Pencere, Yardım gibi ana başlıklar yer alıyor. Bu ekranın sağ üst köşesinde varsayılan olarak seçili olan Tasarımcı seçeneği haricinde coder, app coder gibi mevcut seçeneklerle var olan çalışma düzenlerini görebilirsiniz. Hemen alt kısımda yer alan koyu gri satır da ise aktif olarak çalıştığımız projeler yer alıyor. Bir alt satırda Kod, Böl, Tasarım , Canlı Kod, W3C doğrulama, Tarayıcı uyumluluğu Denetleyici, Dosya Aktarım, Canlı Görünüm tarayıcı da görüntüle/hata ayıkla seçenekleri yer alıyor.

Kod, Böl, Tasarım üçlüsü, aslında bizim not defterinde kod yazıp çalıştırma işlemlerimizi eş zamanlı olarak ister kod, ister tasarım , isterseniz de yazdığınız kodun aynı anda karşılığını görebileceğiniz çalışma imkanı sunuyor. Üstteki ekran görüntüsü tasarım seçeneğine ait. Altta kod ve böl seçeneklerinin de görüntülerini inceleyerek kendinize en uygun çalışma şeklini seçebilirsiniz. sonuçta yer yiğidin yoğurt yiyişi farklıdır. 🙂

 

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Yukarıda gördüğünüz kod parçalarının açıklama notunu düşmeden geçmeyeyim. <!DOCTYPE> etiketiyle başlayan kod bloku sayfanın oluşturulduğu işaretleme dilinin sürümünü tarayıcıya bildiren talimattır. Charset=utf-8 satırı ise tarayıcı karakter uyumu için kullanılan bir eklentidir.

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Canlı görünüm seçeneğimiz, yaptığımız tüm işlemleri tarayıcı ekranında görür gibi şekillendirme yapmayı sağlar. Açıkçası ben devam eden çalışma boyunca tercih etmeyeceğim.

 

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Özellikleri incelemeye devam edelim. Hemen bir deneme cümlesi yazarak metinsel işlemlere bakalım.

 

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Cümlemizi yazdıktan sonra aşağıda her öge için değişkenlik gösteren özellikler(properties) panelinde metin ile ilgili tüm özellikler karşımıza geliyor. Kalın-italik, font, yazı stili,konum, ID , Köprü-Bağlantı(anchor) özelliği gibi bir çok detayı bir kaç fare tıklamasıyla halledebiliyoruz. Bu detaylar resim, vide, GIF ve diğer eklentileriniz içinde geçerli , içeriğe uygun özellikler ile bize kolaylık sağlıyor.

 

Adobe Dreamweaver ile HTML sayfası oluşturma

 

Ekranın sağ tarafında yer alan Adobe Browser başlığının altında yer alan Ekle seçeneği içerisinde resim, tablo , video, yorum satırı, widget gibi bir çok eklenti mevcut.Aşağı panel de yer alan Dosyalar sekmesinde dosya hiyerarşisini görmekteyiz. Dreamweaver bizi böyle karşılıyor. Bir sonraki yazımız da, önce ki 3 yazıda yaptığımız tüm işlemleri Dreamweaver ‘ın özelliklerini keşfederek tek seferde uygulayacağız.