Dreamweaver'ın Temel Araçları Nelerdir?

Merhaba Arkadaşlar,

İnternet kullanımının hızla yaygınlaştığı günümüzde kurum ve kuruluşlar için web ortamı önemli bir yer teşkil etmektedir. Bu durum, Bilişim Teknolojileri alanı açısından web sayfası tasarımının önemini artırmıştır. Web sayfası tasarımı, kodlar aracılığıyla yapılabildiği gibi tasarım editörleri kullanılarak da yapılmaktadır. Dreamweaver’da, bu tasarım araçlarından en sık olarak kullanılanıdır.

 
Bu makalemde sizlere Dreamweaver Editörünün temel araçlarının neler olduğundan ve ne işe yaradıklarından detaylar ile bahsetmek istiyorum. Amacım ise web tasarım editörünün yapısı hakkında bilgi sahibi olarak temel araçlarını kullanabileceksiniz.

Çalışma Alanının Tanıtılması

Bilgisayarımıza kurmuş olduğumuz programı çalıştırmak için Başlat – Programlar – Macromedia – Macromedia Dreamweaver MX 2004 menüleri kullanılabileceği gibi programı kurmuş olduğumuz sürücü içinde bulunan klasörlerden de (C:\Program Files\Macromedia\Dreamweaver MX 2004\Dreamweaver) faydalanabiliriz. Programı ilk kez çalıştırdığımızda;karşımıza, çalışma alanı türünü seçeceğimiz bir pencere gelecektir. (Macromedia üzerinden makale yazma sebebim ise siz okurlarımızın çoğunluğu adobe dreamweaver kulllanmamakta, ayrıca okullarda da kullanılan macromedia’dır. Ama ben ilerleyen zaman zarlarında Adobe üzerinde daha sık duracağım.)

Başlangıç Sayfası
Dreamweaver’ı ilk kez çalıştırdığımızda çalışma alanı seçiminin ardından Başlangıç Sayfası karşımıza gelecektir. Bu sayfada en son açtığımız belgeler (Recent Item), yeni belge oluşturmak için kullanacağımız dosya türleri (Crate New) ve örnek tasarımlar (Samples) yer almaktadır. Başlangıç sayfasının her açılışta karşımıza gelmesini istemiyorsak sayfanın alt kısmında bulunan Don’t show again (Bir daha gösterme) onay kutusunu işaretlememiz gerekmektedir.

Başlangıç sayfasının görüntülenmesiyle ilgili ayarları Edit/Preferences menü seçenekleri ile ulaştığımız pencere içinde bulunan General sekmesi altındaki Document options bölümünden değiştirebiliriz.

Siteyi Geliştirmek Üzere Hazırlık Yapma

Site hazırlarken, herhangi bir sayfanın üzerinde çalışmaya başlamadan önce bazı noktalarda net cevaplar yakalandıktan sonra işe girişmemiz daha yararlı olacaktır. Site hazırlanmasına referans olacak bu can alıcı noktaları şöyle sıralayabiliriz:
• Sitenin hitap edeceği kitlenin tanınması
• Siteye ihtiyaç duyulma sebepleri
• Ziyaretçilerin siteye girme sebepleri
• Sitenin içeriği (metin, resim vb.)
• Site yönetimi-ziyaretçi iletişimi düzeyi

Yerel Site Tanımlama

Web sitesi hazırlarken, herhangi bir sayfa oluşturmaya başlamadan önce, siteye ait her şeyi içinde bulunduracak olan klasör oluşturulmalıdır. Bu işlem, yerel site tanımlama anlamına gelir. Oluşturulacak klasör, yerel kök klasör (root folder) olarak adlandırılır ve internet ortamında çalışacak olan sitemizin temsilini ifade eder.
Yerel site oluşturmak, site için kullanılacak tüm dosya ve klasörlerin düzenli bir biçimde tek bir klasör altında toplanmasını sağlar. Bu durum işlevsellik ve süreklilik açısından ön plana çıkmaktadır. Yazdığım bu makalede, yerel site tanımlamasıyla oluşturulmuş es_yazilim klasörü kullanılmıştır. Yerel site oluşturmak için:

• Site / Manage Sites menü seçeneğini tıklanır.
• Karşımıza gelen pencereden New düğmesine tıklanarak anda açılan pencereden ise Site seçeneği işaretlenir

• Açılan Site Definition penceresindeki Basic sekmesinde site adı sorulmaktadır (What would you like to name your site?). Buraya site adı yazılarak Next düğmesine tıklanır.

NOT: Site Definition penceresindeki Advanced sekmesi aracılığıyla site tanımlaması sırasında ayrıntılı düzenlemeler yapabiliriz.

• İsim tanımlama işleminin ardından site içinde sunucu teknolojisinden faydalanılıp faydalanılmayacağına dair bir soru penceresi (Do you want to work wiht a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?) karşımıza gelecektir. Herhangi bir sunucu teknolojisi kullanmayacağımız için bu soruya “No, I do not…” cevabını vermeliyiz.

• Sunucu teknolojisi tanımlama işleminin ardından site tasarım sürecinde çalışacağımız dosyaların kaydedileceği yere dair bir soru (How do you want to work with your files during development?) gelecektir. Çalışacağımız dosyalar bilgisayarımızda bulunduğu için “Edit local copies…” seçeneğini işaretlemeliyiz. Eğer ağ üzerinde bulunan dosyalar ile çalışacak olsaydık “Edit directly on server…” seçeneği ile yola devam etmemiz gerekecektir.

• Dosya alanını belirlediğimiz pencerede, site tasarımı sürecinde kullanacağımız veya oluşturacağımız dosyaların kaydedileceği alanı da (Where on computer do you want to store your files?) belirleyebiliriz

• Site oluşturmayı tamamlayacağımız pencereden hemen önce uzak sunucuya bağlantı şeklimizi soran bir soru (How do you connect to your remote server?) karşımıza gelecektir. Herhangi bir sunucu üzerinden çalışmayacağımız için bu soruya None seçeneğini işaretleyerek cevap vermemiz gerekmektedir.

• Site tanımlama işleminin son adımında, yaptığımız tanımlamalara ait özet bilgiler karşımıza gelecektir. Özet, tanımlamak istediğimiz siteyi ifade ediyorsa Done düğmesine tıklayarak site tanımlama işlemini bitirebiliriz.

Yeni Bir Sayfa Oluşturma ve Kaydetme

Yerel site tanımlama işleminin tamamlanmasıyla sitemiz için sayfalar oluşturmaya başlayabiliriz. Bunun için aşağıdaki adımları uygulamamız yeterli olacaktır:
• File / New menü seçeneği tıklanır.
• Karşımıza gelen New Document penceresinde bulunan General sekmesi altındaki Category listesinden Basic Page’i seçilir.
• Basic Page listesinden HTML seçilip Create düğmesi tıklanır.

Oluşturulan yeni sayfanın kaydedilmesini de menüler yardımıyla kolaylıkla gerçekleştirebiliriz.
• File / Save menü seçeneği işaretlenir.
• Karşımıza gelen Save As penceresi içinde bulunan Save in alanında oluşturduğumuz site (es_yazilim) gösterilir.

• File Name alanına ise sayfayı kaydetmek istediğimiz isim (index) yazılır.
• Save as type kısmında ise dosyanın kayıt türü (htm, html, shtm…) belirlenir.

Araçlar

Web sayfamızın tasarımına başlamadan önce Dreamweaver çalışma alanında bulunan araçları tanımamız yararlı olacaktır.
Web sayfamızla ilgili yapacağımız tüm işlemler, belge penceresi içinden gerçekleştirilmektedir. Bu alan, gövde (body) olarak adlandırılmaktadır. Gövde alanındaki görünüm, hazırlamış olduğumuz sayfanın web tarayıcımızda nasıl görüneceğine dair fikir de
vermektedir.

Dreamweaver’da Code, Split ve Design olmak üzere 3 görünüm türü bulunmaktadır. Code görünümünde sayfamıza ait kodlar görüntülenirken Split görünümünde ise hem kodlara hem de tasarım ekranındaki nesnelere ulaşılabilmektedir. Designer, sayfanın internet ortamına aktarıldığında nasıl görüntüleneceği hakkında fikir veren, tasarımı kolaylaştıran görünüm türüdür.

Editör penceremizin üst kısmında Insert araç çubuğu bulunmaktadır. Bu alan içinde; resim, tablo, form gibi sayfamıza ekleyebileceğimiz birçok nesne bulunmaktadır. Insert araç çubuğu içinde 8 ayrı menü grubu bulunmaktadır: Common, Layout,
Forms, Text, HTML, Application, Flash Elements ve Favorites. Varsayılan durumda Common menü grubu etkindir. İmleç, bir süre belirli bir düğmenin üzerinde tutulduğunda ilgili düğmenin adı belirecektir.

Paneller
Dreamweaver’da bulunan paneller, işlevlerine göre gruplandırılmış bir halde yer almaktadırlar. Varsayılan panel grupları Design, Code, Application, Tag Inspector ve Files olarak adlandırılmıştır. Panel isimlerinin hemen yanında bulunan genişletme/küçültme düğmesine tıklayarak panel içeriklerini görebilir veya gizleyebiliriz.

Sayfaya Başlık Atma

Oluşturacağımız sayfaların başlığının bulunması hem estetik açısından hem de tasarım sürecinin kolaylığı açısından yararlı olacaktır. Başlık sayesinde sayfa içeriğinin tanınması kolaylaşacaktır. Başlık seçimi yapılırken site adının ve belge içeriğine ait tanımlamanın bulunması yararlı olacaktır.

Sayfaya başlık eklemek için Belge araç çubuğunda bulunan Title (Etiket) alanına uygun ifadeyi yazmamız yeterlidir.

Arka Plan Rengi Belirleme

Dreamweaver’da oluşturacağımız sayfaların arka plan rengini renk paletinde bulunan renkleri kullanarak kolayca değiştirebiliriz.
Bunun için;
• Modify menüsünden Page Properties seçeneği tıklanır. (Aynı işlem, tasarım editörü ekranındaki Properties penceresi içinde bulunan Page Properties düğmesine tıklanarak da yapılabilir).
• Açılan pencere içindeki Category listesinden Appearance seçilir.
• Appearence ayarları içinde bulunan Background color seçeneğinin yanındaki renk kutusuna tıklanır.
• Açılan renk paleti içinde imleç otomatik olarak bir damlalığa dönüşecektir.
• İstenen rengin üzerine bir defa tıklanarak arka plan rengini belirlenir.
• Belirlenen renge ait hekzadesimal kod otomatik olarak görüntülenecektir. (#CCCCFF)

Ön İzlemede Kullanılacak Web Tarayıcılarının Belirlenmesi

Web sayfalarının görüntülenmesi, aynı tarayıcının değişik sürümlerinde bile farklılıklar gösterebilmektedir. Bu sebeple Web sayfalarımızı oluştururken, farklı web tarayıcılarında nasıl göründüğünü test etmemiz, tarayıcılar arası farklılıkları görerek gerekli
düzenlemeleri yapabilmemiz açısından yararlı olacaktır. Ön izlemede kullanacağımız web tarayıcılarına ait tanımlamaları aşağıdaki adımları takip ederek gerçekleştirebiliriz:
• File menüsü altında bulunan Preview in Browser seçeneği içindeki Edit Browser List komutu tıklanır. Preferences penceresi karşımıza gelecektir.

• Preferences penceresi içinde bulunan Category listesi içindeki Preview in Browser alanı içindeki ( + ) düğmesine tıklayarak yeni tarayıcılar ekleyebiliriz.
• Preview using temporary file seçeneğini işaretlediğimizde; ön izleme sırasında Dreamweaver tarafından geçici dosyalar oluşturulacaktır.
• Web tarayıcısı ekleme işlemini bitirdiğimizde OK düğmesine tıklayabiliriz.

NOT: Oluşturduğumuz sayfayı birincil web tarayıcımızda görüntülemek için klavyeden F12 tuşuna basmamız yeterli olacaktır.