Dreamweaver'ın Temel Araçları Nelerdir?

Dreamweaver’ın Temel Araçları Nelerdir? Merhaba Arkadaşlar, İnternet kullanımının hızla yaygınlaştığı bu zamanlarda kurum ve firmalar için web ortamı önemli bir yer teşkil etmektedir. Bu durum, Bilişim Teknolojileri piyasası açısından web sayfası tasarımının önemini artırmıştır. Web sayfası tasarımı, kodlar aracılığı ile yapılabildiği benzeri tasarım editörleri kullanılarak da yapılmaktadır. Dreamweaver’da, bu tasarım araçlarından en yoğun 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ı meselesinde bilgi sahibi şekilde 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 benzeri programı kurmuş olduğumuz sürücü içerisinde 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 endüstrisi türünü seçeceğimiz bir pencere gelecektir. (Macromedia üstünden makale yazma sebebim ise siz okurlarımızın çoğunluğu adobe dreamweaver kulllanmamakta, bununla birlikte okullarda da uygulanan macromedia’dır. Ama ben ilerleyen süre zarlarında Adobe üstünde daha yoğun duracağım.)   Başlangıç Sayfası Dreamweaver’ı ilk kere çalıştırdığımızda çalışma sektörü 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ü alternatifleri ile ulaştığımız pencere içerisinde 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 üstünde çalışmaya başlamadan evvela bazı noktalarda net yanıtlar yakalandıktan sonra işe girişmemiz daha yararlı olacaktır. Site hazırlanmasına referans olacak bu can müşteri 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çerisinde 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) şekilde bilinir ve internet ortamında çalışacak olan sitemizin temsilini anlatım eder. Yerel site oluşturmak, site için kullanılacak olan bütün dosya ve klasörlerin düzenli bir biçimde tek bir klasör altında toplanmasını sağlar. Bu vaziyet işlevsellik ve süreklilik açısından ön plana çıkmaktadır. Yazdığım bu makalede, yerel site tanımlamasıyla hazırlanmış 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 ismi sorulmaktadır (What would you like to mektup your site?). Buraya site ismi yazılarak Next düğmesine tıklanır.   NOT: Site Definition penceresindeki Advanced sekmesi vasıtası ile site tanımlaması sırasında ayrıntılı düzenlemeler yapabiliriz.   • İsim tanımlama işleminin ardından site içerisinde 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 olduğu için “Edit local copies…” seçeneğini işaretlemeliyiz. Eğer file üstünde bulunan dosyalar ile çalışacak olsaydık “Edit directly 10 server…” seçeneği ile yola devam etmemiz gerekecektir.   • Dosya sahasını belirlediğimiz pencerede, site dizaynı sürecinde kullanacağımız veya oluşturacağımız dosyaların kaydedileceği piyasası da (Where 10 computer do you want to store your files?) belirleyebiliriz   • Site oluşturmayı tamamlayacağımız pencereden hemen herşeyden önce irak 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 anlatım 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 sayesinde kolaylıkla gerçekleştirebiliriz. • File / Save menü seçeneği işaretlenir. • Karşımıza gelen Save As penceresi içerisinde bulunan Save in alanında oluşturduğumuz site (es_yazilim) gösterilir. • File Name alanına ise sayfayı kaydetmek istediğimiz İsim (index) yazılır. • Save as type kısmında ise dosyanın kayıt şekli (htm, html, shtm…) belirlenir.     Araçlar Web sayfamızın tasarımına başlamadan evvela Dreamweaver çalışma bölgesinde bulunan araçları tanımamız yararlı olacaktır. Web sayfamızla ilgili yapacağımız bütün işlemler, belge penceresi içinden gerçekleştirilmektedir. Bu alan, vücut (body) şekilde 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 üç manzara şekli 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 bölgesinde fikir veren, dizaynı 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 benzeri sayfamıza ekleyebileceğimiz çok sayıda nesne bulunmaktadır. Insert araç çubuğu içerisinde 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 vakit belirli bir düğmenin üstünde tutulduğunda ilgili düğmenin ismi belirecektir.     Paneller Dreamweaver’da bulunan paneller, işlevlerine göre gruplandırılmış bir durumda yer almaktadırlar. Varsayılan panel grupları Design, Code, Application, Tag Inspector ve Files olarak adlandırılmıştır. Panel isimlerinin hemen birlikte bulunan genişletme/küçültme düğmesine tıklayarak panel içeriklerini görebilir ve ya 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 yardımı ile 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 art proje 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çerisinde bulunan Page Properties düğmesine tıklanarak da yapılabilir). • Açılan pencere içindeki Category listesinden Appearance seçilir. • Appearence ayarları içerisinde bulunan Background color seçeneğinin yanındaki renk kutusuna tıklanır. • Açılan renk paleti içerisinde imleç otomatik şekilde bir damlalığa dönüşecektir. • İstenen rengin üzerine bir kere tıklanarak art proje rengini belirlenir. • Belirlenen renge ait hekzadesimal kod otomatik şekilde görüntülenecektir. (#CCCCFF)     Ön İzlemede Kullanılacak Web Tarayıcılarının Belirlenmesi Web sayfalarının görüntülenmesi, tıpkı tarayıcının ayrıcalıklı sürümlerinde bile farklılıklar gösterebilmektedir. Bu sebeple Web sayfalarımızı oluştururken, türlü web tarayıcılarında nasıl göründüğünü test etmemiz, tarayıcılar arası farklılıkları görerek lüzumlu 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çerisinde bulunan Category listesi içindeki Preview in Browser sektörü içindeki ( + ) düğmesine tıklayarak yeni tarayıcılar ekleyebiliriz. • Preview using temporary ağ seçeneğini işaretlediğimizde; ön izleme sırasında Dreamweaver vasıtasıyla 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. Arama Terimleri: editör temel araçları nedir


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar