1. DREAMWEAVER TEMEL ARAÇLARI

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

Bilgisayarımıza kurmuş olduğumuz Dreamweaver 8 programını çalıştırmak için Başlat-Programlar - Macromedia – Macromedia Dreamweaver 8 menüleri kullanılabileceği gibi programı kurmuş olduğumuz sürücü içinde bulunan klasörlerden de (C:\Program Files\Macromedia\Dreamweaver 8\Dreamweaver.exe) faydalanabiliriz.

Programı ilk kez çalıştırdığımızda;karşımıza, çalışma alanı türünü seçeceğimiz bir pencere gelecektir.

Dreamweaver 8 Çalışma Alanı Seçenekleri

Designer, tüm pencere ve panellerin görsel tasarım için optimize edildiği çalışma alanı, Coder ise kodlarla çalışmak isteyen kullanıcılar için hazırlanmış çalışma alanıdır

1.2. 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 (Create 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.

Dreamweaver 8 Başlangıç Sayfası

NOT : 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.

1.3. 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

1.4. 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.

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ıklanır ve açılan seçeneklerden Site seçeneği işaretlenir.

Manage Sites Penceresi

• 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.

İsim Tanımlama

• İ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.

Dosya Alanı Belirleme

• 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.

Uzak sunucu bağlantısı tanımlama

• 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

Site tanımlama işleminin tamamlanmasıyla Manage Sites penceresinde oluşturduğumuz site görülecektir

Yerel site tanımlama işlemi sonrası Manage Sites penceresi

1.5. 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.

Dreamweaver 8 Yeni Sayfa Oluşturma

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 oluşturduğumuz site (webdunyasi) gösterilir.

Sayfayı Kaydetme

• 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.

1.6. 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.

Sayfamızı kaydederken verdiğimiz ismi (index.htm) ise başlık çubuğunda görebiliriz.

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.

Belge Penceresi Öğeleri

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 ve Common menü grubu

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.Menü grubu seçeneğine tıklandığında diğer seçenekler de görüntülenecektir.

Insert araç çubuğu menü grubu seçenekleri

Burada bulunan Show as Tabs seçeneği ile insert araç çubuğunun sekmeli şekilde görüntülenmesini sağlayabiliriz.

Insert araç çubuğu sekmeleri

Editör penceremizin alt kısmında ise Properties (Özellikler) penceresi bulunmaktadır.

Properties (özellikler) penceresi

Properties penceresini kullanarak belge penceresinde seçili olan metin veya nesneler ile ilgili biçim ayarlarını görebilir ve düzenleyebiliriz.

1.7. 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.

Paneller

1.8. 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 aşağıdaki resimde de gösterildiği gibi belge araç çubuğunda bulunan Title (Etiket) alanına uygun ifadeyi yazmamız yeterlidir

Sayfaya Başlık Ekleme

1.9. 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 rengi belirlenir.
• Belirlenen renge ait hekzadesimal kod otomatik olarak görüntülenecektir. (#CCCCFF)
• Page Properties penceresini kapamak ve sayfaya dönmek için OK düğmesine tıklanmalıdır.

Sayfa arka plan rengi belirleme

1.10. Ö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.

Ön İzleme için Tarayıcı Ayarları

• 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.

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. Belge penceresinde bulunan simgesine tıklayarak ön izlemede kullanacağımız tarayıcıyı seçebiliriz.