Web 2.0 Tasarımı

  • Super User tarafından yazıldı.
  • Kategori: Web Tasarım

Web 2.0 tasarımı; bu kelimeyi ilk duyduğumda doğrusu ben bir program olduğunu sanmıştım. Web 2.0 diye örnek gösterilen birçok sitenin hoş görünümlü portal sitelere benzediği daha çok hakimdi üzerimde. Anlamakta aslında uzun süre güçlük çekmiştim web 2.0 tasarımını.Web 2.0 için bir kaç template incelediğimde benim için korku tüneli olan div ler geri atmamı sağlamıştır pek çok defa. Fakat şu an web 2.0 ın google açısından neler ifade ettiğini biliyoruz. İşte size Web 2.0 Web 2.0 teknolojisinde table mantığından uzaklaşılarak div yapısına geçilmiş durumda. Kodlamada google örümceklerini yormayacak yeni teknikler kullanılıyor. web tasarımı sade ve şık şekilde ayarlanmakta ve renkler özenle seçilmekte. Yazı fonları ayarlanabilir özellikte önemli noktalara seo teknikleri ile vurgu yapılmakta. Komik siteyi yavaşlatan animasyonlardan ise tamamen uzak tutulmakta. Tercihen admin panelli güncellenebilir sistemler kullanılmakta.

WSY web tasarım

  • Super User tarafından yazıldı.
  • Kategori: Web Tasarım

WSY web tasarım
WSY; birçok web tasarım şirketinden farklı olarak web sitesini oluşturan tüm resim ve grafikleri web tasarım uygulamasında optimize ederek en az yeri kaplamasını, dolayısıyla web sitenizin kısa sürede yüklenmesini sağlar. Müşteri; web tasarımının her aşamasını sadece kendisine verilen bir adres üzerinden takip etme şansına sahiptir.

Bu sayede web sitesinin tasarım aşamalarını adım adım kontrol edebilir, gerekli yerlerde düzeltmeler yaptırabilir ve kendi isteklerini belirtebilir.

Web tasarım, İnternet ortamında firmanızın tanıtımlarını ziyaretçi lerin görebilmesi için, mevcut veya adınıza alacağımız domain name ( www . firmaadi . com, .com.tr, vs.) altında, web sayfalarının düzenlenip programlanması ve İnternet Servis Sağlayıcı'daki (ISS) Sunucu bilgisayara (Server) transfer edilmesi hizmetidir.
Sürekli Yenilenen teknoloji ile birlikte artık birçok firmanın internet üzerinde sanal mağazaya ihtiyacı doğmuştur. Bizde bu etkenden dolayı müşterilerimize kısa süreli çözümler ile birlkte birer web tasarım ( sanal mağaza ) ihtiyaçlarını karşılamaktayız. Web site tasarımları müşterilerin ihtiyaçları doğrultusunda müşterinin verdiği bilgiler çerçevesinde bu süreç işler.
Ayrıca müşterilerimize web tasarım tamamlandıktan sonra detaylı bilgi sunulup, müşterininde tasarım konusunda yeterli bilgiye sahip olması sağlanır.

WSY, web tasarım sonrası hizmetlerini de özenle gerçekleştirir. WSY, web sitesinin tasarım aşamasında ve tasarımından sonraki tüm sorumluluklarını içeren sözleşmesini müşterisi ile karşılıklı imzalayarak ileride oluşabilecek tüm ihtilaf ve anlaşmazlıkları önleyerek müşterinin güven içerisinde ve alacağı hizmetten emin olmasını sağlar.

Web tasarımlarımızda, Linux tabanlı sunucularımızda html, php, javascript, flash ve cm sistemler kullanmaktayız.

Google Web Tasarımcıları Üzüyor

  • Super User tarafından yazıldı.
  • Kategori: Web Tasarım

Google arama sonuçları için kendini geliştirmeye devam ediyor ve bu doğrultuda yeni özelliklerini dneiyor. Bugüne kadar yaptığı herşey ile kullanıcılarını memnun eden google sanırım ilk defa kullanıcıları özelliklede web tasarım ve seo yapan kişileri üzecek bir çalışma yapmış durumda. Bazı kelimeleri google da aradığınız zaman ilk 3 sonuçtan sonra Bu terimler için sonuçlara bakın: başlığı altında benzer bir kelimeden 3 farklı siteyi listeliyor. Bu durum bazıları için iyi iken bazıları için ise kötü bir durum. Sizin emek verip google aramalarında ilk sırada yer almasını sağladığınız bir site var ise ve bu site 4. sıra veya daha altında ise google aradan 3 site daha sıkıştırıyor. Bir zamanlar ekmek kuyrukları olurmuş orada insanlar araya kaynamaya çalışırmış. Bu uygulama buna benzemiş kesinlikle.Öyleki aradığınız kelimede 7. sayfada yer alan bir sitenin birden bu yöntem ile ilk sayfaya gelmesi sizide pek sevindirmez hatta bizim gibi kızdırır ve üzerdi. eskiden ilk beş siteden biri olmak mükemmel bir olay iken google firmasının bu uygulamasını kaldırmadığı taktirde ilk 3 siteden biri olmamanız durumunda google ilk sayfada yer almasının bir anlamı olmayacaktır.

Dreamweaver Web Tasarım

  • Super User tarafından yazıldı.
  • Kategori: Web Tasarım

Dreamweaver, Macromedia firmasının geliştirdiği web sitesi tasarımı için kullanılan bir programdır. Bu tip programlar bizleri HTML kodları yazma eziyetinden kurtaran, daha kısa zamanda daha fazla iş yapmamızı sağlayan aracılarıdır. Grafik tasarımlarını web sayfasında kullanmak için Dreamweaver gibi bir program kullanırsak, HTML kodları yazarak yaptığımız tasarımlardan çok daha güzel tasarımlar elde etmiş oluruz.
4.1.1. Dreamweaver Programının Menüleri ve Kullanımı
Bu programda da diğer programlara benzer menüler ve kontrol panelleri vardır. Bu elemanları tanıtarak programın genel çalışma ilkeleri ve bir web sitesinin nasıl oluşturulduğu adım adım anlatılacaktır.
4.1.1.1. Programın Çalışma Ekranı
Şekil 4.1. Dreamweaver Programının çalışma ekranı (5).

Şekil 4.1.’ de görüldüğü gibi programın çalışma ekranı menüler, kontrol panelleri ve çalışma alanında oluşmaktadır. Çalışma alanı biraz karışık gibi görünmektedir. Bu şekil sadece programın içerdiği bu menüleri gösterir. Çalışma esnasında kullanıcı bu panellerin içinde boğulup kalmaz, hangisini kullanmak istiyorsa onu açıp, kullandıktan sonra kapatma şansı vardır.
4.1.1.2. Menüler ve Kontrol Panelleri
1. File Menüsü:
New: Yeni, boş bir sayfa açmamızı sağlar.

New From Template: Template dosyaları açmamızı sağlar. Önceden oluşturulmuş şablonları açmakta kullanılır.

Open: Varolan bir dosyayı açmamızı sağlar.
Open In Frame: Frame içeren sayfalarımızda frame alanına bir dosya açmamızı sağlar.

Close: Dosyayı kapatmamızı sağlar.

Save: Dosyamızı kaydetmemizi sağlar.
Save As: Dosyayı başka bir isimle içeriğini değiştirmeden kaydedebilmemizi sağlar

Save As Template: Kaydettiğimiz dosyayı, Template yani Şablon olarak kaydedip daha sonra kullanmamıza olanak tanır.

Save Frame Set: Frame kullandığımızda frame içeren Frame Setini kaydetme olanağı tanır.


Şekil 4.2. File Menüsü (5).
Save Frame Set As: Frame Setimizi başka bir isimle veya uzantıyla kaydetmemizi sağlar.


Save All: Frame alanları ile çalıştığımız zaman, hem Frame alanlarımızı hem de Frame Setimizi aynı anda kaydedebilme seçeneği sunar.
Revert: Dosyayı ilk açtığımız haline geri getirir.

Design Notes: Dosyamızla çalışırken yaptığımız çalışmalarla ilgili notlar alabilmemizi sağlayan bir board.

Import: Bu komut, açılan bir menüdür. Dosyanıza XML, Word HTML ve Table Data dosyalarını dahil edebilirsiniz.

Export: Çalışmamızı XML, CSS ve Table Data olarak gönderebilmemizi sağlar.

Convert: Çalışmamızı 3.0 Browserlara ayarlı olarak, dönüştürür. Çalışmamız bir çok özelliğini kaybedecektir. Mesela; CSS' ler, Swap yada Rollover Image gibi özellikleri kaybeder. Bunu geçerli dosyamızda yapmaz. Yeni bir dosya yaratarak yapar.

Preview In Browser: Bu seçenek de açılır bir menüdür. Belirlediğiniz Browserler bu açılır menüde yer alır. Edit Browser List seçeneğini tıklarsak, Preferences Penceresi açılır ve bize Browser seçeneklerini belirlememizi sağlar. Açılan pencerede Primary yani birincil olarak belirleyeceğimiz browser, F12 tuşuna bastığımız zaman görüntülenecek Browser olacaktır.

Check Links: Kırık veya External (Harici) Linkleri bulmamızı sağlar. Seçtiğimiz zaman, bir pencere açılır ve HTML kodunu tarayarak, bize kırık linkleri bildirir.

Check Target Browsers: Bu seçeneği seçtiğimizde, bir pencere açılır ve bir browser tipi ve sürümü seçmemiz istenir. Seçip Check butonuna tıkladığımız zaman, açılan bir Browser Penceresinde bulunan hatalar bir rapor halinde sunulur.

Son Çalışılan Dosyalar: Altta gördüğümüz dosya isimleri de çalışılan son 4 dosyayı simgeler.

Exit: Programdan çıkmamızı sağlar (5).

2. Edit Menüsü:
Undo: Son yaptığımız işlemleri geri alabiliriz. Her defasında, işlemimizi bir geriye alırız. Geri alma sayısı Preferences seçeneğinden ayarlanır.
Redo: Geri aldığımız işlemleri ileri almamızı sağlar.

Cut: Seçili olan imajımızı, Layer veya text, kısacası elimizde olan objelerin tümünü kesmeye yarar.


Şekil 4.3. Edit Menüsü (5).
Copy: Seçili olan objelerimizi kopyalamaya olanak tanır. Çoğaltma işlemlerinde kullanılır.
Paste: Kopyalayarak veya keserek aldığımız objeleri, seçili yere yapıştırmamızı sağlar.
Copy Text Only: Normalde bir text seçilip kopyalandığı zaman, HTML Kodlarıyla birlikte kopyalanır. Kopyalarken bu seçeneği kullanırsak, sadece text olarak kopyalanacak ve kodları dahil etmeyecektir.
Paste As Text: Kopyaladığımız yazıları sadece text olarak yani kod olmaksızın yapıştırmamızı sağlar.


Select All: Sayfamızdaki bütün objeleri veya bir Layerın içindeki tüm nesne veya objeleri seçebiliriz.

Select Parent TAG: İmlecimizin bulunduğu tagı komple seçebiliriz.

Select Child TAG: İmlecimizin bulunduğu yerdeki alt tagın içeriğini seçmemizi sağlar.
Find: Sayfamız içerisinde kullandığımız bir kelimeyi, bir harfi veya bir tagı bulmamızı sağlar. Find Next seçeneği ile, sonrakini, Find All seçeneği ile hepsini arattırabiliriz. Find All dediğimiz zaman Find penceresinin altında bir pencere açılır ve bulduklarının üzerine iki kere tıklarsak, yerini saptayabiliriz. Ulaşmak istediğimiz bilgilere kolayca ulaşabiliriz.

Find Next: Sayfamızdayken F3 tuşuna basarsak, aradığımız kelimenin veya harfin, bir sonraki bulunduğu yeri seçerek bize gösterir.

Replace: Aradığımız veya arayacağımız kelimenin, tagın bulunup belirttiğimiz yeni değerle değiştirilmesini sağlar. Replace All seçeneğiyle hepsini bulur ve yeni verdiğimiz değerle değiştirir.
Launch External Editor: Preferences ayarlarında hangi editörü harici olarak belirlediysek, çalıştığımız dosyayı son haliyle o editörde açar.

Preferences: Dreamweaver programının ayarlarını içerir (5).


3. View Menüsü:
Head Content: Seçtiğimizde açılan editör, çalışmamızın, <HEAD>......</HEAD> tagları arasında yer alan kodları düzenlememizi sağlar. Bunların üzerine tıkladığımız zaman, açılan Properties penceresinden ayarlarımızı yapabiliriz. Böylece HTML kodlarına girmeden HEAD tagı içindeki içeriği düzenleyebiliriz. Mesela kullandığımız bazı Java Script kodlarını, title (Başlık) gibi.


Şekil 4.4. View Menüsü (5).
Invisible Elements: Bize görünen ama tarayıcılarda görünmeyen elementlerin çalışma sayfasında görünüp, görünmeyeceğini ayarlamamıza olanak tanır.


Layer Borders: Layer çizgilerini gizler veya gösterir. Kullandığımız katmanların dış çizgilerini kapatır veya açarız.

Table Borders: Çalıştığımız dosyada, tabloların kenar çizgilerini gizler veya gösteririz.
Frame Borders: Dreamweaver programında Frame alanı olan bir sayfa hazırlarken, programı kapatıp açarsak, Frame mesafelerini ayarladığımız Border araçlarının kaybolduğunu görürüz. Kaybolan Frame kenarlarını buradan açabiliriz.


Image Maps: İmajlarda kullandığımız HotSpot yani sıcak noktaların çalışma anında gösterilip, gösterilmeyeceğini belirleriz.

Ruler: Bu seçeneğimiz de çalışma alanımızın üst ve sol yanına cetvel açabilmemize olanak tanır. Orijin noktasını yani "0" noktasını sol köşedeki merkezden tutup istediğimiz yere sürükleyebiliriz. Cetvelimizin birimini de değiştirebiliriz. Birimleri; Piksel İnç ve Santimetredir.

Grid: Sayfamızda hizalama ızgaralarını açabiliriz. Bu ızgaralar bize nesneleri birbirine hizalamamızda yardımcı olur. Ayrıca, Snap To yani ‘ızgaraya yapış’ özelliğini açarak, taşıdığımız nesnelerin, ızgaraya yani Grid noktalarına duyarlı hale gelmesini sağlayabiliriz. Settings bölümünden, Grid noktalarımızın rengini, çizgi ya da nokta görünümünde mi olacağını, taşıdığımız nesnelere duyarlı olup olmayacağını ve son olarak da ızgaralar arası boşlukların ne kadar olacağını ayarlayabiliriz (Şekil 4.5.).


Şekil 4.5. Grid Settings Paneli (5).


Tracing Image: Belirleyeceğiniz bir imajı rehber olarak kullanmanızı sağlar.

Plug-Ins (Sayfada Kullanılan Plug-In'ler)
Play All: Bu seçenek kullandığımız Plug-In' leri çalıştırmamızı sağlar.
Stop All: Sayfada kullandığımız Plug-In'lerin çalışmasını durdurur. (Test Çalışmasını)
Status Bar: Status Bar aracını açıp kapatmamızı sağlar (5).

4. Insert Menüsü:
Bu menüdeki komutlar çok kullanıldığı için komut ile birlikte nasıl kullanıldığı da açıklanacaktır.
Image Komutu:
Menü çubuğunda Insert menüsünden Image komutu seçilir. Ekrana gelen Select Image Source iletişim (Şekil 4.7.) kutusunda resmin web’ deki veya bilgisayardaki yeri URL metin kutusuna girilir veya resim dosyasını bulana kadar bilgisayardaki dosyalar ve klasörler arasında dolaşılır. Resim dosyası ikonuna tıklandığında dosya ismi File name metin kutusuna girilir. Select tuşuna tıklayarak, resim sayfaya eklenir.
Şekil 4.6. Insert Menüsü (5).
Dreamweaver programında, HTML programlarının çoğunda olduğu gibi, bir resim seçildiğinde Properties denetçisi resimlere özgü özellikleri gösterir. Bunun için özelliklerini görmek istediğimiz resim seçilir. Properties denetçisi o resmin özelliklerini gösterirken, resmin ufak bir örneğini Apply (uygula) düğmesi olarak gösterir. Denetçinin sağlayabileceği tüm resim özelliklerini görmek için, denetçinin sağ alt köşesindeki genişletme okuna tıklanabilir (Şekil 4.8.).
Resim sayfaya yerleştiğinde, ayarlanabilecek pek çok özelliği vardır. Bunların arasında görünüş özellikleri (boyut ve çerçeve), sayfa düzeni özellikleri (hizalama, Vspace ve Hspace) ve sayfa yükleme özellikleri (alt etiketleri ve düşük çözünürlük) vardır. Resimler için bir isim belirlenmesi de mümkündür. Bu isim, ekranda gösterilmez. Ancak doğrudan kod üzerinde çalışma planlanıyorsa yararlı olabilir ve Java Script veya Visual Basic Script kodunda resimleri kullanmak için gereklidir (5).

Şekil 4.7. Select Image Source iletişim kutusu (5).


Şekil 4.8. Properties Denetçisi (5).

Dreamweaver programında resimlerin gösterilmesi için varsayılan, resimlerin çerçevesiz gösterilmesidir. Ancak istenirse bir çerçeve eklenebilir. Bunun için; çerçeve eklemek istediğimiz resim seçilir. Properties denetçisinde, border metin kutusuna piksel cinsinden bir değer girilir. Enter tuşuna veya Apply düğmesine tıklandığında resim etrafında bir çerçeve belirir.
Dreamweaver programında bir resmi ilk kez yerleştirdiğimizde, oluşturulduğu sırada sahip olduğu orijinal ölçülerini alır. Sayfanın düzenine uydurmak için bir resmi yeni bir yükseklik ve genişlik atamak için; boyu değiştirilmek istenen resim seçilir. Properties denetçisi resmin ölçülerini W (Width) ve H (Height) metin kutularına piksel cinsinden girilir.
Resimlerin hizalanması için yine properties denetçisinde Align (Hizala) listesine tıklanır. Bir seçenek seçildiğinde, resim hareket eder. Bazı seçenekler sadece başka nesnelerle bir araya geldiklerinde diğerlerine göre farklı görünürler.
Browser Default; hizalaması genellikle baseline dır.
Baseline; seçeneği resmin alt tarafını yazını en yakın nesnenin temel çizgisi ile hizalar. Bir yazının temel çizgisi yazının üzerine oturduğu hayali bir çizgidir.
Bottom; seçeneği, resmin altını yakındaki en büyük nesnenin yanına hizalar.
Top; seçeneği, resmin üstünü nesnenin üstüne hizalar.
Middle; resmin ortasını yazının temel çizgisi ile hizalar.
Text top; resmin üstünü en yakınındaki yazı satırındaki en uzun karakterle hizalar.
Absolute bottom; resmin altını en yakınındaki yazı satırında en aşağı inen karaktere göre hizalar.
Absolute middle; resmin ortasını yazını ortası ile hizalar.
Left ve right; seçenekleri resmi sayfa kenarına göre hizalar, resmin sayfa kenarında kalması için yakınındaki yazıyı alt satıra atar.
Boşluk eklemek için properties denetçisinde Vspace ve Hspace metin kutusuna piksel olarak bir değer girilir.
Kullanıcıların resimlerin içeriklerini öğrenebilmesi için alternatif bir yazı sağlanması gerekir. Bunun için alt etiketinin kullanılması gerekir. Bunun için; alt etiketi eklenecek resim seçilir. Properties denetçisinde alt metin kutusuna bir açıklama yazılır.
Resimlerin yüklenmesini yine properties denetçisinde bulunan bir özellik ile daha çabuk hale getirebiliriz. Bunun için; resim editörünü kullanarak daha küçük ve daha hızlı yüklenebilecek bir resim oluşturulur. Kendisi için düşük çözünürlüklü resim oluşturulan resim seçilir. Properties denetçisinde Low Source metin kutusuna resmin konumu girilir ve enter tuşuna tıklanır. Seçim dreamweaver ekranında görülmez. Sayfayı tarayıcıda izlediğimizde bu etki izlenebilir (5).
Rollover Image:
Bir image rollover, bir resmin kaynağını başka bir resim dosyası ile değiştirmemizi sağlayan bir Java Script eylemidir. Bu şekilde imleci bir resmin üstüne getirdiğimizde başka bir resim belirir. Rollover image nesnesi, üç olayı gerçekleştiren basit bir davranışı ayarlar: Sayfa yüklenirken resimler önceden yüklenir; kullanıcının imleci belirlenen resmin üzerine geldiğinde farklı bir resim gösterilir; kullanıcının imleci resimden uzaklaştığında tekrar orijinal resim gösterilir. Bu iki resmin aynı boyda olması veya ikinci resmin birinci resmin şekline yakın olması gerekir. Rollover resmini ayarlamak için Insert menüsünden rollover image komutu seçilir. Ekrana gelen Insert Rollover Image iletişim kutusunda ilgili metin kutularına dosya adları yazılarak orijinal resmin ve rollover resminin kaynakları sağlanır (Şekil 4.9.). Resmi başka bir web sayfasına bağlamak için When Clicked, Go To URL metin kutusuna bu URL veya yerel siteden bir sayfa seçilir. Rollover Image objesini denemek için Java Script tanıyabilen bir browser da çalışmak gereklidir.
Preload Rollover Images seçeneği varsayılan durumda seçilidir. Bu buton işaretli olmadığı takdirde ikinci resim talep edildiğinde yüklenmesi için beklemek gerekir.

Şekil 4.9. Insert Rollover Image iletişim kutusu (5).

Table:
Bir tablonun eklenmesi için tablonun görünmesi istenen yere imleç konumlandırıldıktan sonra Insert menüsünden Table komutu seçilir. Ekrana gelen Insert Table iletişim kutusunda Rows (satırlar) ve Columns (sütunlar) seçilir (Şekil 4.10.). Tablonun, Width seçeneği ile genişliği seçilir. Tablo oluşturulurken ona bir genişlik atanmış olabilir. Ancak tablonun genişliği istediğimiz zaman ayarlanabilir. Bunun için; tüm tablo seçilerek properties denetçisinden W metin kutusunun sağındaki metin kutusundan pixels veya percent seçilir. W kutusuna genişlik girilir.
Genellikle hücrenin genişliğine sığdırmak üzere, tablo hücrelerindeki yazılar alt satıra atılır. Sözcük kaydırmayı (Wrap) kapattığımız takdirde, hücre yazıya uymak için genişler. Bunun için No Wrap seçeneğini uygulamak istediğimiz satır, sütun veya hücre seçilir. Daha sonra No Wrap seçeneği işaretlenir. Bu seçenek uygulandığında hücrelerin herhangi birinde yazı varsa, bu hücreler içlerindeki yazıya uyacak şekilde genişleyebilir.
Bir tabloyu Dreamweaver programına eklediğimiz zaman, varsayılan durumda bir kenar (border) adı verilen bir piksellik bir çizgi hücreleri ve tablonun kenarlarını çevreler. Ancak bu çevrenin kalınlığını değiştirebiliriz. Bunu ayarlamak için Properties Denetçisinde Border metin kutusuna bir sayı girilir. Bir tabloyu bir sayfa düzeni aracı olarak kullanırken, tablodaki öğelerin arasındaki boşluğu kontrol edebilmek önem kazanır.
Cell Spacing (hücre boşluğu), hücrelerin arasındaki boşluk miktarıdır. Bu, tablo kenarlarına benzer. Ancak tablo ile etrafı arasındaki boşluğu değil, hücreler arası boşluğu belirtir. Eğer sıfıra ayarlanmışsa tablo kenarları sayfa da görünmeyebilir.
Cell Pading (hücre dolgusu) ise, hücrelerin duvarları ve hücrenin içindeki içerik arasındaki boşluk miktarıdır. Bu özellikleri değiştirebilmek için tablo seçilir ve Cellspace ve Cellpading metin kutularına piksel cinsinden değerleri gireriz (5).

Şekil 4.10. Insert Table iletişim kutusu (5).

Horizontal Rule:
Bir horizontal rule, sayfada görünen yatay çizgidir. Bir dokümanın kısımları arasında net bir ayrımı göstermeyi sağlar. Bunu eklemek için Insert menüsünden horizontal rule seçeneği seçilir. Sayfanın genişliği boyunca, kendisinden önce ve sonra birer paragraf boşluğu bulunan bir yatay çizgi belirir. Çizgiyi değiştirmek için yatay çizgi seçilir ve üzerine çift tıklanarak properties denetçisinde horizontal rule özelliklerinin görünmesi sağlanır (5).
Navigation Bar:
Bir Dreamweaver Navigation Bar çubuğundaki bir düğme, dörde kadar farklı görünüşe sahip olabilir; Up (ilk), over (imleç düğmenin üzerine geldiğinde), down (kullanıcı düğmeye tıkladığında) ve over while down (kullanıcı düğme basılı iken imleci düğmenin üzerinden çektiğinde). Bir Navigation Bar çubuğu oluşturmak için tek bir resim grubuna ihtiyaç vardır. Ancak çubuktaki her düğmenin her durumu için ayrı bir resim dosyasının oluşturulması gerekir.
Navigation Bar çubuğu eklemek için Insert menüsünden navigation bar seçeneği seçilir. Ekrana gelen iletişim kutusunda (Şekil 4.11.) Up image metin kutusuna kullanmak istenilen resmin dosya adı girilir. Düğmenin diğer durumları için de bir resim dosyası seçilir. Sayfa yüklenirken bu düğmenin basılı olması gerekiyorsa Show “Down Image” Initially onay kutusu işaretlenir. Yüklenirken basılı olacak resmin yanına bir asteriks işareti belirir. When Clicked, Go To URL metin kutusuna, linkin URL’ si yazılır. Başka bir düğme eklemek için + düğmesine tıklanır. Dinamik olarak sunulan resimler kullanılmıyorsa, Preload Image onay kutusu işaretli bırakılır. Böylece sayfa yüklenirken Web tarayıcısı tüm düğme durumları için gereken tüm resimleri alabilir. Aksi halde kullanıcı, imleci bir düğme üzerine getirdiğinde resmin yüklenmesini bekler. Seçimler yapıldığında OK tuşuna tıklayarak iletişim kutusu kapatılır.
Butonlarımızı oluştururken Fireworks programında kestiğimi parça resimlerini Navigation Bar iletişim kutusunda tanımladığımız zaman, hareketli butonlarımızı elde etmiş oluruz (5).

Şekil 4.11. Insert Navigation Bar iletişim kutusu (5).

Layers:
Layer (katman) çok basit olarak yazı ve resimleri üst üste gelecek şekilde ayarlamak veya bunları birbirinin üzerine yerleştirmek için kullanılır. Sayfaya katman eklemek için Insert menüsünden katman (Layer) komutu seçilir. Bir katman eklendikten sonra properties denetçisinden özellikleri değiştirilebilir.
Katmanları oluştururken kullanılan dört etiket vardır. <div> ve <span> etiketleri marquee layer adı verilen bir katmanı oluşturur. <div> etiketi, mutlak konumlandırmayı kullanır. <div> etiketini bir paragraf kesmesi çevreler. Paragraf kesmeleri olmadan bir iç katman oluşturmak tercih edilirse, bu durumda izafi konumlandırmayı kullanan <span> etiketi kullanılır. Kullanılabilecek diğer etiketler olan <layer> ve <ilayer> Netscape etiketleridir.
Bir katmanın bir sayfadaki konumu, sayfanın sol üst köşesinden, katmanın kendisinin sol üst köşesine olan mesafe ile ölçülür. Properties denetçisinde, L metin kutusuna katmanın sol sayfa kenarından uzaklığı, T metin kutusuna katmanın üst sayfa kenarından uzaklığı girilir.
Bir katmana içerik eklemeden önce veya ekledikten sonra, bir katmanın yüksekliğini ve genişliğini değiştirebiliriz. Properties denetçisinde, W metin kutusuna katmanın genişliğini, H metin kutusuna katmanın yüksekliği girilir.
Overflow (taşma), içeriği katmanın sınırlarını aştığında katmanın davranışlarını belirler. Dışarı taşan içeriğin görünür veya gizli olması sağlanabilir. İçeriğin geri kalanına ulaşmayı sağlamak için kaydırma çubukları (scroll) kullanılabilir. Genelde auto seçeneği de kaydırma çubuklarını gösterir.
Clip (kırpma), katmanın kırpma alanını belirtir. Bu, katmanın içinde, içeriğin göründüğü alandır. Bir katmana 200x200 piksellik bir alan sağladıktan sonra, sadece 100x100 piksellik bir alanın görünmesine izin verilebilir. Bir kırpma alanını, dört ölçüden oluşan dikdörtgen şeklinde bir alan olarak ayarlanabilir.
Visibility, öğenin yüklendiğinde görünür olup olmayacağını belirler. Bir öğeyi visible veya hidden olarak bildirebilir veya özelliklerini ebeveyn öğeden miras (inherit) almasını sağlayabiliriz.
Z- index, üst üste binen öğelerin yığılma sırasını belirler. Z-index, X ve Y ile bir arada kullanıldığında bir sayfada bir katmanın konumunu üç boyulu olarak belirleyen üçüncü koordinattır. Bu sayı ne kadar büyükse, o öğeye o kadar fazla öncelik sağlanır. Z- index değeri 3 olan bir katman, Z-index değeri 1 ve 2 olan öğelerin üstünde görünür.
Katmanlarla ilgili ne güzel şeylerden biri, bir katmanı başka bir katmanın içine koyabilmek veya üst üste binen iki katman oluşturabilmektir. Bunun için tek yapılması gereken iki katmanı üst üste gelecek şekilde taşımaktır. İlk katman oluşturulur. Mevcut katmanın içine tıklayarak ikinci katman yerleştirilir (5).
Şekil 4.12. Layer özelliklerini gösteren Properties Denetçisi (5).


Form:
Bir HTML formunun nasıl kullanılacağı, form elementinin Action niteliği ile ayarlanır. Action niteliğine genellikle form bilgilerini işleyecek olan bir programın URL’ si atanır. Bu URL de genellikle form sonuçlarını açacak olan bir CGI programcığını gösterir. Verilerin nasıl gönderileceği ise Method niteliği ile belirlenir. Post metodu büyük miktarda veri gönderilmesi gerektiği zamanlarda kullanılır. Form bilgileri URL’ den hemen sonra gönderilir. Get yönteminde çok fazla güvenlik yoktur. Form nesneleri:
Text field: İki tiptir. Tek satırlı ve çok satırlı.
Button: Formun bir şeyler yapabilmesini sağlar. Gönderme (submit), sıfırlama (reset) gibi...
Check box: Tek başına veya iki veya daha çok öğeden oluşan gruplar halinde kullanılır. Onay kutuları kullanıcını evet veya hayır cevaplarını belirtmesini sağlar.
Radio button: Her zaman iki veya daha çok öğeden oluşan gruplar halinde kullanılır. bunlar bir dizi seçenek arasında sadece birini seçmemize izin verirler. Radyoda bir düğmeye basıldığında diğer düğmeler dışarı çıkar..
Listeler/menüler: Kullanıcının uzun bir seçenek listesinden sayfa üzerinde çok fazla yer kaplamayacak şekilde seçim yapmasını sağlar (5).

Şekil 4.13. Form özelliklerini gösteren Properties Denetçisi (5).

Frames:
Sayfamızın kenarlarında Frame alanları oluşturularak Banner gibi sabit araçların yerleştirilmesi için kullanılır.
Insert menüsündeki diğer komutları gerek Properties Denetçisini gerekse diğer başka araçları kullanarak yapabiliriz. Özellikle Properties Denetçisi bize bu konuda çok fazla destek olacaktır (5).
5. Modify Menüsü:
Page Properties: Sayfa özellikleri (page properties), sayfadaki bir tek nesneye değil, tüm bir sayfaya uygulanan ayarları içerir. Görsel özellikler arasında sayfanın başlığı, bir zemin rengi veya resmi, metin ve linklerin renkleri, metin yazarken üst ve solda bırakmak istediğimiz boşluklar vardır. Ayrıca Tracing Image (kopya resim) ile sayfamıza bir resim koyabilir ve bu resmin parlaklık ayarını Image Transparency cetveli ile ayarlayabiliriz. Bu resim sayfamızın arka planında kalır, üzerine yazı veya herhangi bir şey yazabiliriz (Şekil 4.15.) (5).
Şekil 4.14. Modify Menüsü (5).

Selection Properties: Document sayfasında, üzerinde bulunduğumuz objenin properties denetçisini (özelliklerini) gösterir. Hiçbir nesne seçili değilse, properties denetçisi metin özelliklerini gösterir (5).
Şekil 4.15. Page Properties iletişim kutusu (5).

Quick Tag Editor: Dreamweaver 3.0 versiyonundan sonra gelen en yenilikçi özelliktir. İmlecimizin yanıp söndüğü yerdeyken aşağıda gördüğünüz Tag editörü açılır ve içerisine dilediğimiz kodu girebiliriz. < ve > işaretlerinin arasına faremizi getirir ve üzerinde aşağı doğru gezdirirseniz, sağ tarafta bir Tag menüsü açılır. Kullanmak istediğimiz Tagı buradan seçebiliriz.

Şekil 4.16. Quick Tag Editor İletişim Penceresi (5).

Make Link: Bu seçeneğimizi seçili bir öğe varken kullanırsak, karşımıza Browse penceresi gelir ve link vermek istediğimiz adresi seçerek, seçtiğimiz öğeyi link haline getirmiş oluruz. Link rengi, Page Properties te ayarladığımız renge dönüşür.
Change Link: Seçili olan öğemizdeki link adresini değiştirmemizi sağlar.
Remove Link: Seçili olan öğemizdeki linki kaldırmamızı sağlar.
Open Linked Page: Daha önce link vermiş olduğumuz sayfayı Dreamweaver programında açmamızı sağlar.
Link Target: Link verdiğimiz objenin, sahip olduğu linki nasıl bir sayfada açması gerektiğini belirlememize olanak tanır. _blank, _top gibi...
Table: Kullandığımız tablonun ayarlarını yapmamızı sağlar. Açılan pencereden;
Select Table: Tabloyu seçer.
Merge Cells: Seçilen hücreleri birleştirir.
Split Cells: İmlecin içinde bulunduğu hücreyi yatay veya dikey bölmemizi sağlar.
Insert Row: İmlecin bulunduğu hücrenin üstüne satır ekler.
Insert Column: İmlecin bulunduğu hücrenin soluna sütun ekler.
Insert Rows or Columns: İmlecin bulunduğu noktanın üstüne veya altına satır eklememizi sağlar. Veya imlecin bulunduğu noktanın sağına veya soluna sütun eklememizi sağlar.
Delete Row: Bir satır siler.
Delete Column: Bir sütun siler.
Increase Row Span: İmlecin bulunduğu hücrenin satır sayısını arttırır.
Increase Column Span: İmlecin bulunduğu hücrenin sütun sayısını arttırır.
Decrease Row Span: İmlecin bulunduğu hücrenin satır sayısını azaltır.
Decrease Column Span: İmlecin bulunduğu hücrenin sütun sayısını azaltır.
Clear Cell Heights: Tablomuzda, yükseklik olarak meydana gelmiş hücre boşluklarını siler.
Clear Cell Widhts: Tablomuzda, enine olarak meydana gelmiş hücre boşluklarını siler.
Converts Widts to Pixels: Tablomuzun ölçü birimini Piksele çevirir.
Converts Widts to Percent: Tablomuzun ölçü birimini %’ ye çevirir.
Layers And Hotspots:
Align Left, Align Right, Align Top, Align Bottom: Bu seçenekler birden fazla katmanı seçip ortalama ayarı yapmak istediğimiz zaman aktif hale gelir. Mesela, iki tane katmanı seçili hale getirip Align Left komutunu işletirsek ikisi de sol tarafta blok olur.
Bring To Front: Bu seçenekte iki tane Image Map ya da Sıcak Nokta ya da başka bir deyişle Hotspot kullandığımız zaman aktif hale gelir. Seçili olan Sıcak Noktayı yanında bulunan veya kesişen sıcak noktalara göre en üst konuma getirir.
Send To Back: Seçili olan sıcak noktayı yanında bulunan veya kesişen sıcak noktalara göre en alt konuma getirir.
Make Same Width: Bu seçenek iki veya daha fazla katmanı seçili hale getirdiğimiz zaman aktif hale gelir. Katmalarımız seçili halde iken bu komutu uygularsak, seçili olan katmanların genişliği aynı büyüklükte olur.
Make Same Height: İki veya daha fazla Layer seçili halde iken bu seçeneği uygularsak, seçili olan katmanlarımızın yüksekliği aynı boyutta olur.
Frameset: Bu menüye geldiğimiz zaman bir alt menü açılır. Bu alt menüdeki seçenekler sayfamızı Frame’ lere bölmemizi (Split Frame Left, Split Frame Right...) veya bölünmüşse Frame’ leri kaldırmamızı (Edit No Frames Content) sağlar.
Layout Mode: Convert Tables to Layers, tablo tabanlı sayfamızı layer tabanlı sayfaya dönüştürür. Yani tablomuzun her bir hücresi bir layer olacak şekilde hücre sayısı kadar layer oluşturur. Convert Layers to Tables ise tam tersini, yani layer tabanlı sayfamızdaki bütün Layer’ ları birleştirerek tablo tabanlı sayfaya dönüştürür. Convert Tables to Layers iletişim kutusu, katmanlı yeni sayfamızı oluşturmak ve izlemek için seçenekler sunar. Üst üste binmelere karşı otomatik koruma için Prevent Layer Overlaps onay kutusu işaretlenir. Sayfa açıldığında Layers denetçisinin açılmasını sağlamak için Show Layer Palette onay kutusu işaretlenir. Sayfa açıldığında ızgaranın görünmesi için Show Grid onay kutusu işaretlenir. Snap To Grid işaretli olduğunda sayfanın tüm katmanları ızgaraya kenetlenir.

Şekil 4.17. Convert Tables to Layers İletişim Penceresi (5).


Şekil 4.18. Convert Layers to Table İletişim Penceresi (5).

6. Text Menüsü:
Indent: Seçili olan satıra paragraf boşluğu vermek için kullanılır
Outdent: Seçili olan satırda paragraf boşluğu varsa onu kaldırmayı sağlar.
Format: Bu açılır menüden yazacağımız metinin formatını seçeriz.
Şekil 4.19. Text Menüsü (5).
Default halde paragraf gelir. Altı başlık boyu veya düzeyi vardır. Heading 1 en büyüğüdür, Heading 6 ise genellikle gövde yazısından daha küçüktür. Preformatted Text ise başka bir programda biçimlendirdiğiniz ve biçimini korumasını istediğiniz yazıları önceden biçimlendirilmiş metin olarak eklemenize yarar (Şekil 4.20.)

Align:Yazımızı hizalamamızı sağlar

Şekil 4.20. Text Formatları
Left:Yazıyı sola blok yapar.
Right: Yazıyı sağa blok yapar.
Center: Yazıyı ortalar.
List: Sıralı ve sırasız listeler oluşturabiliriz
Unordered List: Yazılarımızın başına küçük bullet’ lar koyabiliriz.
DreamWeaver
Flash
Photoshop gibi

Ordered List: Yazılarımızın başına rakamlar koyabiliriz.
1. DreamWeaver
2. Flash
3. Photoshop gibi
Definition List: Liste öğeleri bir atlanarak terim veya tanım olacak şekilde biçimlendirilir.
Font: Bu açılır menüden Dreamweaver programında kullanabileceğimiz hazır font kombinasyonlarını seçebiliriz. Tarayıcı, önerilen ilk fontun yüklü olup olmadığını kontrol eder, sonra ikinciyi kontrol eder bu işlem devam eder. Tavsiye edilen fontların hiçbiri yoksa, yazı kullanıcının varsayılan tarayıcı fontuyla gösterilir. Bir font kombinasyonuna istediğimiz sayıda font ekleyebilir hatta kendimiz bir font kombinasyonu tanımlayabiliriz.
Bir Font Kombinasyonu Tanımlamak: Font menüsünden Edit Font List’ i seçeriz. Font List iletişim kutusu açılır (Şekil 4.21.)

Şekil 4.21. Edit Font List Penceresi (5).

Önce sağ taraftan eklemek istediğimiz fontları seçerek butonuna tıklıyor ve seçtiğimiz fontları sol tarafa, seçilmiş fontlar penceresine taşıyoruz. Seçme işlemimiz bittikten sonra yukarıda gördüğünüz işaretine tıklayarak Font List' imize alıyoruz. Eğer bu işarete tıklamazsak seçtiğimiz fontlar Font List' imize alınmayacaktır. Yukarı ve Aşağı Ok yön tuşlarıyla, fontları istediğiniz sırayla dizebilirsiniz.
Style: Kelime işlemci programınızda veya sayfa hazırlama aracınızda koyu, italik veya altı çizili gibi stilleri kullanıyor olabilirsiniz. Bu ve diğer stilleri Style listesinden seçip, yazının kısımlarına vurgu veya görsel kontrast kazandırabilirsiniz.
HTML Styles: Web ortamında kullanılan bazı standartlar vardır. Bunları listeden seçerek kullanabilirsiniz.
CSS Styles: Cascading Style Sheets ile web sayfası şablonlarında, yazı stillerinde, renklerde ve yazının formatında kontrolü daha rahat sağlayabilirsiniz. Çünkü Cascading Style Sheets ile bir sayfada yada tüm sitede kullanacağınız fontu, stili, kontrol boşluklarını vs. açıkça baştan belirtmiş olursunuz.
Yeni Bir Stil Yaratmak: CSS Styles seçeneğinden Edit Style Sheet’ i seçeriz. Edit Style Sheet iletişim kutusu açılır (Şekil 4.22.)
Bu iletişim kutusundaki New seçeneğini tıklarız ve New Style iletişim kutusu açılır (Şekil 4.23.). Burada Name bölümüne bir isim yazarız. Bu bizim yeni stilimizin ismi olacaktır.
Şekil 4.22. Edit Style Sheet Penceresi (5).
New Style iletişim kutusundaki OK seçeneğini tıkladığımızda Style Definition iletişim kutusu açılır. Burada oluşturmak istediğimiz stilin özelliklerini belirleyen birçok seçenek bulunur (Yazı fontu, büyüklüğü, arka plan rengi, kelime aralıkları, girintiler vs.).

Şekil 4.23. New Style Penceresi (5).

Bu seçimleri yapıp OK tuşuna tıkladığımızda artık CSS Styles seçeneğinde görünen Yeni isimli bir stilimiz var (Şekil 4.24.).

Şekil 4.24. CSS stilinde yeni stil oluşturulması (5).

Size: Burada metinde kullandığınız fontun büyüklüğünü seçebilirsiniz. Yazının mutlak ölçeği en küçük boy olan 1 ile başlar ve maksimum font boyu olan 7’ ye kadar gider.
Size Increase: Font boyunu arttırır.
Size Decrease: Font boyunu azaltır.
Color: Bu seçenekle seçili olan metnin rengini belirleyebilirsiniz.
Check Spelling: Yazım denetimi yapmayı sağlayan seçenektir. Yazım denetimine başlandığında Dreamweaver ilk şüpheli kelimeyi bulur; bu Word Not Found in Dictionary metin kutusunda görülen kelimedir.

Şekil 4.25. Yazım Denetiminin yapılması (5).

Burada çok sayıda seçeneğiniz vardır. Yazım denetiminin sorguladığı her kelime için bu tercihlerden birini yapmanız gerekir:
· Kelime doğru yazılmışsa Ignore (dikkate alma) seçeneğine tıklayın.
· Kelime doğru yazılmışsa ve sayfanızda başka yerlerde de bulunduğunu düşünüyorsanız, Ignore All (tümünü dikkate alma) seçeneğine tıklayın.
· Kelime yanlış yazılmışsa ve doğru yazımı Suggestions (öneriler) liste kutusunda görülüyorsa, doğru kelimenin üzerine tıklayın ve sonra Change seçeneğine tıklayın.
· Kelimenin birden fazla yerde yanlış yazıldığını düşünüyorsanız, Suggestions liste kutusundan doğru kelimenin üzerine tıklayın, sonra Change All (tümünü değiştir) seçeneğinin üzerine tıklayın.
· Change To metin kutusuna doğru kelimeyi yazdıktan sonra Change seçeneğine tıklayarak kelimeyi elle de düzeltebilirsiniz (5).
7. Command Menüsü:
Start Recording: Bu komutu seçip ekrana bir obje veya yazı eklediğimizde objeyi kaydeder.
Play Recorded Command: Bir önceki komut ile kaydettiğimiz objeyi veya yazıyı çoğaltmamızı sağlar.
Edit Command List: Komutların isimlerini değiştirip kendimizin verdiği isimler ile kullanmamızı sağlar.
Get More Commands: Internet’ e bağlanarak yeni komutlar almamızı sağlar.
Şekil 4.26. Command Menüsü (5).
Clean Up HTML: Gereksiz HTML kodlarını temizler.
Dreamweaver programının otomatik temizlik işlemlerinin yanında, istediğiniz anda daha hassas kod temizleme işlemleri yapabiliriz.
Commands> Clean Up HTML komutunu seçin. Clean Up HTML iletişim kutusu açılır (Şekil 4.27.)

Şekil 4.27. Clean Up HTML penceresi (5).

Programın kaldırmanıza izin verdiği kodlar:
1. Empty Tags (boş etiketler).
2. Redundant Nested Tags (yuvarlanmış gereksiz etiketler)
3. Non-Dreamweaver HTML Comments (Dreamweaver tarafından eklenmemiş açıklamalar)
4. Specific Tags (belirtilen etiketler)
Kaldırılmasını istediğiniz gereksiz kodların yanındaki kutuyu işaretleyin. Gereksiz font etiketlerinin tümünü bir tek etiket haline getirmek için Combine Nested <font> Tags When Possible onay kutusunu işaretleyin. Programın yakaladığı kendi hatalarınızı görmek için, Show Log On Completion onay kutusunu işaretleyin.OK tuşuna tıklayın. Dreamweaver sayfanızda seçtiğiniz hataları tarar, kaydın gösterilmesini seçtiyseniz düzelttiği şeylerin listesini gösterir.
Clean Up Word HTML: Web sayfalarımızda kullandığımız metinleri düzenlemek için Dreamweaver programını kullanabiliriz. Fakat program HTML kodları mantığına göre çalıştığı için yazıları istediğimiz düzene sokamayız. Satırlar arası boşluğu ayarlamak için bile, kullanmamız gereken bir çok kod vardır. Bu yüzden bir çok kullanıcı metinleri Office programında düzenleyip, web sayfası formatında kaydedip kullanmayı tercih eder. Bu yöntemin de bazı sakıncaları vardır. Yazıları düzenlediğimiz program, dosyayı kaydederken kendine göre bazı kodlar ilave eder. Bu kodları temizlemediğimiz taktirde, oluşturduğumuz dosyayı Office programı kurulu olmayan bir bilgisayarda görmemiz mümkün değildir. Web sayfamızı Internet’ e gönderdiğimizi düşünürsek, milyonlarca bilgisayar arasından böyle bir tanesinin çıkması mümkündür. Dreamweaver programında bu Word kodlarını temizleyerek sayfamızı sorunsuz hale getirir. Clean Up Word HTML komutunu seçtiğimizde karşımıza gelen pencereden (Şekil 4.28.) gerekli ayarları yaparak Word kodlarını temizleyebiliriz. Pencerelerdeki seçenekler:
Remove all Word specific markup: Word’ e özgü ve standart HTML etiketi olmayan tüm etiketleri kaldırır.
Clean up CSS: Cascading Style Sheets kullanılarak yapılan değişikleri kaldırır.
Clean up <font> tags: Aşırı metin biçimlendirmelerini birleştirir.
Fix Invalidly Nested Tags: Standart olmayan bir sırayla yuvarlanmış etiketleri düzeltir.
Set background color: Zemin rengini ayarlar.
Apply Source Formating: Satır başları, satır sonları ve küçük büyük harf durumları üzerinde değişiklik yapar.
Show log on completion: Yapılan değişikleri gösterir.

Şekil 4.28. Clean Up Word HTML penceresi (5).

Add / Remove Netscape Resize Fix: Netscape Navigator aracının bazı versiyonları hata içerir. Bu, sayfayı tam ekran yapmamız veya küçültmemiz esnasında sorun oluşturur. Bu komut ile Web sayfamıza bir Java Script kodu ekleyerek sorunu gidermiş oluruz.
Optimizme Image in Fireworks: Seçili bir objeyi Fireworks programında düzenlemek için kullanılır.
Create Web Photo Album: Web sayfamıza fotoğraf albümü eklememizi sağlar. Fireworks programının 3.0 versiyonu kurulu olmalıdır.
Formating Table: Oluşturduğumuz tabloya efektler, yeni özellikler eklemek için kullanılır.
Sort Table: Tabloya girdiğimiz yazıları alfabetik veya sayısal olarak sıralamamızı sağlar. Bunun için; tabloyu tıklayarak, Commands > Sort Table (tabloyu sırala) seçilir. Sort Table iletişim kutusu açılır (Şekil 4.29.). Sort By (şuna göre sırala) çekme menüsünden, ilk kez kendisine göre sıralama yapılacak sütunu (numarasıyla) seçeriz. Order (sıralama) çekme menüsündeki komutlardan Alphabetically, alfabetik olarak, Numerically sayısal olarak sıralama yapmamızı sağlar. Sonraki çekme menüden Ascending A’ dan Z’ ye veya 1’ den 9’ a artan sıralama yapmamızı, Descending ise bunun tersi A’ dan Z’ ye veya 1’ den 9’ a azalan bir sıralama yapmamızı sağlar. İlk satırı sıralamaya dahil etmek için, Sort Includes First Row onay kutusu işaretlenmelidir. Ham biçimlerin sıralamayla birlikte hareket etmesi için Keep TR Attributes with Sorted Row onay kutusunu işaretlenmelidir. OK tuşuna tıklayarak Sort Table iletişim kutusunu kapatıldığında, tablo, belirttiğiniz kriterlere göre sıralanmış olur (5).

Şekil 4.29. Sort Table penceresi (5).

8. Site Menüsü:
Dreamweaver programında en çok kullanılan menü Site menüsüdür. Bunun için menüdeki komutları kısaca açıklayıp ayrıntılarını ana başlıklar altında açıklanacaktır.
Site Files: Web sitesinin dosyaların görmemizi sağlar.
Site Map: Web sitesinin dosyaları arasındaki bağlantıları, linkleri gösterir.
New Site: Yeni site oluşturmamızı sağlar.
Open Site: Kayıtlı olan siteyi açmamızı sağlar.
Şekil 4.30. Site Menüsü (5).
Define Sites: Tanımlı olan, üzerine çalışabileceğimiz siteleri göstererek, istediğimizi seçmemizi sağlar.
Get: Diğer sitelerden dosya almamızı sağlar.
Check Out: Diğer sitelere gönderdiğimiz dosyaları kontrol eder.
Put: Dış sitelere dosyalar göndermemizi sağlar.
Check In: Dış sitelerden aldığımız dosyaları kontrol eder.
Check Links Sitewide: Web sitesindeki linkleri kontrol ederek, sorunlu linkleri gösterir.
Locate in Local Site: Çalıştığımı sayfanın o andaki yerini, yerel sitede gösterir.
Locate in Remote Site: Çalıştığımı sayfanın o andaki yerini, uzak sitede gösterir (5).
9. Window Menüsü:
Şekil 4.31. Window Menüsü (5).
Bu menü Dreamweaver programındaki bütün panelleri yönetebilmenizi sağlayan menüdür. İçinde tasarım esnasında gerekli olacak bütün paneller yer alır. Kullanıcı istediği paneli buradan açabilir, açık olanları da kapatabilir. Menü beş parçadan oluşmuştur. İlk parça içinde programda iki elimiz diye tanımladığımız Objects ve Properties panellerini açmak ya da kapamak için kullanabileceğimiz komutlar yer alır. İlgili satırların başında tik işaretinin olması ilgili panellerin o an aktif durumda olduklarını gösterir. Şu halde bunlar programın tasarım ekranından görülmelidir. Launcher panelini açıp kapatan komut da birinci parçada yer alır. İkinci parçada Site menüsü içinde de tanıttığımız siteye ait dosya ve/veya dizinleri gösteren Site Files ve oluşturduğumuz sayfaların ağaç yapısını gösteren Site Map yer alır.
Ayrıca istediğimiz zaman açıp kapayabileceğimiz diğer panel komutları yer alır. Bunlar kullanıcının tercihine göre açılıp kapanabilecek pencerelerdir. Üçüncü parçada Arrange Floating Palettes komutunu kullanarak, o an açık olan panelleri ekrana döşeyebilir ya da Hide Floating Palettes komutunu kullanarak gizleyebiliriz. En son parçada ise o an açık olan sayfaların adları listelenir. Kullanıcı bu kısmı kullanarak sayfalar arasında dolaşabilir.
Bu paneller çok kullanıldıkları için içerdikleri komutları tanıtmamız gerekmektedir. Bunun için ilk önce Launcher panelinden ve komutlarından bahseidlecektir (Şekil 4.31.).

Şekil 4.32. Launcher Paneli (5).


Show Site: Üzerinde çalıştığımız siteye ait tüm dosya ve dizinleri görmek için kullanırız.
Library: Çalışmalarda kullanmak için kendi kütüphanemizi oluşturmamızı sağlayan Library penceresini açar (Şekil 4.33.)

Şekil 4.33. Library Penceresi (5).


Show HTML Style: Yeni stiller oluşturabileceğimiz ve bu stilleri sayfalarımıza uygulayabilme imkanı sağlayacak olan HTML Style penceresini açar.

Şekil 4.34. HTML Style Penceresi (5).

Show CSS Style: Sayfalarımızda kullanmak için CSS' ler tanımlayabileceğimiz, bunlar üzerinde istediğimiz işlemleri yapabilmemizi sağlayan CSS Style penceresin açar (Şekil 4.35.).

Şekil 4.35. CSS Style Penceresi (5).

Behaviors: Sayfalarımızı interaktif hale getirebiliriz. Browser ile ilgili sorunları çözebilir, Java Script’ ler ekleyebiliriz v.b.
Show History: Tasarım esnasında sürekli tekrar ettiğimiz işlemleri History penceresini (Şekil 4.36.) kullanarak çabuklaştırabilir, bunları tekrar tekrar kullanabiliriz.

Şekil 4.36. History Penceresi (5).

HTML Source: HTML kodları yazarak, sayfayı düzenlememize yardımcı olan HTML Source penceresini açar (Şekil 4.37.). O an için HTML kodlarının bulunduğu yere gitmek istediğimizde bu pencereyi kullanacağız. İmlecimiz tasarım ekranında nerede duruyorsa oraya gitmemizi ve HTML kodlarını düzenlememizi sağlar (5).

Şekil 4.37. HTML Source Penceresi (5).

Window menüsünden Properties komutunu seçtiğimizde, daha önce tanıttığımız Properties denetçisi açılır. Bu panel ile yaptığımız işlemlerin düzenleyebilir, boyutları ayarlayabilir, linkler verebilir ve daha bir çok işlem yapabiliriz. Kısacası Properties denetçisi tasarımın her aşamasında kullanılabilir (Şekil 4.38.) (5).

Şekil 4.38. Properties Denetçisi (5).

Window menüsünden Objects komutunu seçtiğimizde karşımızda Common, Character, Forms, Head, Invisibles ve Special olmak üzere altı adet kontrol paneli açar (Şekil 4.39.).
Common: Bu paneldeki komutlar ile sayfalarımıza Insert menüsü ile ekleyebileceğimiz objeleri ekleyebiliriz. Image, Table, Navigation Bar gibi.
Character: Sayfalarınızda ekstra karakterler eklemek için kullanacağız.
Forms: Formlar oluşturmak istediğinizde kullanacağız.
Head: Arama motorlarına kayıt olabilmek için sayfalarımıza eklemek durumunda olduğumuz Meta taglarını oluşturabilmek için kullanacağız.
Special: Sayfalarımıza anchor, script veya açıklamalar eklemek için kullanabileceğimiz Invisibles, Applet, Plug-In veya ActiveX' ler eklemek için kullanacağız (5).

Şekil 4.39. Objects Panelleri (5).

4.2. WEB SITESININ OLUŞTURULMASI
Menüler ve kontrol panellerini tanıttıktan sonra sitenin oluşturulması için gerekli işlemleri anlatacağız. Sitenin sayfaları ve aralarındaki bağlantıları kontrol etmek için gerekli panellere Site menüsünün altındaki komutlar ile ulaşabiliriz.
4.2.1. Site Penceresi Hakkında
Dreamweaver programının Site penceresi bir dosya yönetimi aracıdır, aynı zamanda da sitenizi on line hale getirmenize yardımcı olan eksiksiz bir FTP istemcisidir.
Site, penceresinde, bilgisayarınızdaki veya yerel ağınızdaki bir klasörü veya dizini yerel site olarak atarsınız. Bu klasör sitenin kök klasörü haline gelir ve Dreamweaver, resimlerin konumları da dahil olmak üzere izafi bağları kodlamak için onu kullanır. İzafi bağlar, aynı web sitesinin içindeki sayfaları işaret eden verimli kısa yollardır. Dosyaların yerel ve uzak sitelerde yönetimi Site penceresinde gerçekleştirilir.
Site penceresini açmak için menü çubuğundan Window > Site Files komutunu seçip veya F5 tuşuna basarak Site penceresini açabiliriz (Şekil 4.40.). Site penceresini ilk kez gördüğünüzde boş olacaktır. Yerel site üzerinde çalışmaya başlayabilmeniz için, önce bilgisayarınızda bir yerel site kurmanız gerekir.

Şekil 4.40. Site Penceresi (5).

4.2.1.1. Yerel Bir Site Kurulması
Yerel bir siteyi, mevcut bir Web sitesinin içeriğine dayanarak kurabilir veya daha önce hiç var olmamış bir yerel site kurabilirsiniz. Seçiminiz bunların hangisi olursa olsun, yerel siteniz için bir kök dizin seçmeniz gerekir.
4.2.1.2. Yerel Bir Sitenin Kök Dizinin Atamak
Menü çubuğundan Site > Define Sites veya Site penceresinin Site çekme menüsünden Define Sites komutunu seçebiliriz. Her iki şekilde de Define Sites iletişim kutusu açılır (Şekil 4.41.).

Şekil 4.41. Define Sites Penceresi (5).

New butonuna tıklayarak Site Definition (site tanımı) iletişim kutusunu açın (Şekil 4.42.). Local Root Folder metin kutusuna yerel sitenin kök klasörünün dizin adresinin girin veya klasör ikonuna tıklayın. Choose Local Folder (yerel klasörü seç) iletişim kutusu açılır. Mevcut bir klasörü seçebilir veya yeni bir klasör yaratabilirsiniz.
Mevcut bir klasörü seçmek için klasör ikonuna tıklayın, Open butonuna tıklayın ve seçiminizi yaptıktan sonra, Select butonuna tıklayarak Choose Local Folder iletişim kutusunu kapatarak Site Definition penceresine geri dönün.
Yeni bir klasör yaratmak için, New Folder (yeni klasör) butonuna tıklayın ve yeni klasör için bir isim girin. Oluşturduğumuz klasör ikonuna çift tıklayarak seçin ve Site Definition penceresine geri dönün.
Site Name iletişim kutusunda bir site ismi girin ve OK butonuna tıklayarak iletişim kutusunu kapatın.
Cache nedir?
Dreamweaver, yerel siteleriniz için cache (önbellek) adı verilen bir indeks yaratabilir, bu sayede metin ararken veya değiştirirken daha hızlı araştırmalar yapabilirsiniz. Bu önbellek, yerel bir dosyayı başka bir dosyaya ne zaman bağladığınızı da hatırlar. Bu sayede, bir dosyayı taşıdığınızda ya da ismini değiştirdiğinizde, bir bağı tüm site içinde güncelleyebilirsiniz (5).

Şekil 4.42. Sites Definition Penceresi (5).

4.2.2. Bağların İdaresi
Dreamweaver programı sitelerdeki bağları izlemenize, kontrol etmenize ve güncellemenize yardımcı olur.
4.2.2.1. Bir Yerel Sitedeki Bağları Kontrol Etmek
Menü çubuğundan Site > Open Side komutu ile site adını seçin. Site penceresi açılır ve seçtiğiniz sitenin içeriğini gösterir. Site penceresinin menü çubuğundan Site > Check Links Sitewide (sitede bağları kontrol et) komutunu seçin. Link Checker iletişim kutusu açılır (Şekil 4.43.) ve yerel sitenizi taramaya başlar. Sitenizin uzunluğuna bağlı olarak, bu iş birkaç saniye veya daha uzun sürebilir. Tamamlandığında, özette kaç tane dosyanın, bağın kontrol edildiğini, kaç bağın geçersiz olduğunu ve kaç tane harici bağın bulunduğunu göreceksiniz. Link Checker ayrıca boşta kalan (Orphaned) dosyaları da sayar. Bunlar yerel sitenizde bulunan ancak başka hiçbir sayfadan bağ gelmeyen sayfalardır. Boşta kalan dosyaların listesini görmek için Show menüsünden Orphaned Files komutunu seçin. Bir klasörün içindeki bağları veya birkaç dosyayı da kontrol edebilirsiniz. Site penceresinde kontrol etmek istediğiniz dosya grubunu seçin. Sonra Site penceresinin menü çubuğundan File > Check Links komutunu seçin.

Şekil 4.43. Link Checker Penceresi (5).

Geçersiz bağları düzeltmek için Link Checker komutunu bir sayfa, bir sayfa grubu veya bir yerel site üzerinde kullanın. Link Checker iletişim kutusunda geçersiz bir bağın URL adresine tıklayın. Bir dosya düğmesi belirir. Eski URL adresi üzerine doğru URL adresini (harici veya izafi) yazın veya dosya düğmesine tıklayarak Select HTML File iletişim kutusunu açın. Yerel sitenizden doğru dosyayı seçin ve Select (seç) butona tıklayın. Bu bağ birden fazla yerde geçiyorsa, Dreamweaver geçtiği her yeri düzeltmeyi isteyip istemediğinizi sorar. Yes butonuna tıklayarak bu URL adresine gönderen tüm bağları düzeltebilir veya No butonuna tıklayarak bir tek bağı değiştirebilirsiniz (5).
4.2.3. Web Sitelerinin Yönetimi
Bir sayfayı (veya tüm bir siteyi) herkesin görebilmesi için Web ortamına yüklemeye hazır olduğunuzda, Dreamweaver programından çıkmanız gerekmez. Site penceresi, eksiksiz ve kullanışlı bir FTP istemcisidir. Yani, dosyaların Web ortamına konması veya yüklenmesi için kullanabileceğiniz yerleşik bir araçtır. Dreamweaver programını kullanarak Web ortamından dosya almanız veya göndermeniz de mümkündür.
Yerel sitedeki adresler ve Web sunucunuzun adı da dahil olmak üzere site bilgilerinizi belirledikten sonra, bir uzak sunucuya bağlanabilirsiniz. Uzak sunucu, Web sitenizin yaşayacağı yerdir. Bilgisayarınız ve uzak sunucu arasında dosyalarınızı aktarırken, Dreamweaver sitenin iki versiyonundaki dizin yapısının aynı olmasını sağlar. Dreamweaver, otomatik güncellemeler yapmaz, ancak bu konumlardan birindeki bir dosyayı siler ya da dosya eklerseniz, değişen bağlan otomatik olarak tarayabilir (5).
4.2.3.1. Uzak Site Bilgilerini Ayarlamak
Site penceresinin menü çubuğundan veya Document penceresinin menü çubuğundan Site > Define Sites komutunu seçin. Define Sites (site tanımla) iletişim kutusu açılır. Ayarlamak istediğiniz yerel siteyi seçin ve Edit butonuna tıklayın. Site Definition (site tanımı) iletişim kutusu açılır (Şekil 4.44.). Sol taraftaki Category listesinden Web Server Info seçeneğine tıklayın. İletişim kutusunun bu paneli öne gelir. Çekme menüden FTP seçeneğini aktif hale getirin. İletişim kutusunda FTP bilgileri görünür.
FTP Host metin kutusuna Web sunucunuzun alfanümerik adresini girin (örneğin, ftp.site.com veya www.site.com). Host Directory metin kutusuna, sitenin başlangıç kök dizinini girin (örneğin, public_html veya html/public/personal). Login metin kutusuna, ftp veya www hesabınız için kullanıcı adını girin. Password metin kutusuna ftp veya www hesabınızın parolasını girin. Kullanıcı adını ve parolayı kaydetmek için, Save onay kutusunu işaretleyin. Yerel ve uzak site bilgilerinin her ikisini doldurduğunuzda, OK butonuna tıklayarak Site Definition iletişim kutusunu kapatın, yerel sitenizi gösteren Site penceresine geri döneceksiniz (5).

Şekil 4.44. Site Definition Penceresi (5).

4.2.4. Uzak Siteye Bağlanmak ve Bağlantıyı Kesmek
Mevcut uzak sitelerden birine dosya yüklemek veya ondan dosya indirmek için, önce ona bağlanmanız gerekir.
4.2.4.1. Uzak Siteye Bağlanmak
Bir uzak site profili ayarlayın. Site penceresinde Site çekme menüsünden bağlanmak istediğiniz siteyi seçin. Connect (bağlan) düğmesine tıklayın. Dreamweaver, uzak Web sunucusuna bağlanmak için ona verdiğiniz adresi ve diğer bilgileri kullanır. Dreamweaver Web sunucusuyla irtibat kurarken, Connecting to [sunucu adı] başlıklı bir iletişim kutusu açılır. Uzak sunucuya başarıyla bağlandığınızda, Connect (bağlan) düğmesi Disconnect (bağlantıyı kes) düğmesine dönüşür ve uzak dosyaların listesi belirir (5).
4.2.4.2. Uzak Site Bağlantısını Kesmek
Site penceresinde durum çubuğuna bakarak hiçbir dosya aktarımının yapılmadığından emin olun. Pencerede bir işlem yapılmıyorsa, durum çubuğunda şu yazıyı görürsünüz: Connected to [site adı]. Disconnect düğmesine tıklayın. Durum çubuğunda Disconnected yazısı görünür ve Disconnect düğmesi tekrar Connect düğmesine dönüşür. 30 dakika boyunca hiçbir dosya aktarımı yapmazsanız, Dreamweaver sizin için bağlantıyı keser (5).
4.2.4.3. Almak ve Koymak
Artık yerel ve uzak sitelerinizden dosya çekmeye (Get) ve onlara dosya yüklemeye (Put) hazırsınız. Çekeceğiniz dosyalar, uzak sitede yerel sitede henüz var olmayan bir dizinde duruyorsa, o dizin yerel sitede de yaratılır, bunun tersi de olabilir (5).
4.2.4.4. Uzak Siteden Dosya Çekmek
Önceki sayfada anlatıldığı şekilde uzak siteye bağlanın. Site penceresinde, çekmek istediğiniz dosya veya dosyaları, klasör veya klasörleri seçin. Get butonuna tıklayın. Dependent Files (bağımlı dosyalar) iletişim kutusu açılır Yes veya No butonuna tıklayın. Dosyalar alınmaya başlandığında, aktarımın ilerleyişi Site penceresinin durum çubuğunda görünür (5).
4.2.4.5. Uzak Siteye Dosyaları Yüklemek
Uzak siteye bağlanın. Site penceresinde, karşıya yüklemek istediğiniz dosyaları veya klasörleri seçin. Put butonuna tıklayın. Dependent Files iletişim kutusu açılır. Yes veya No butonuna tıklayın. Dosyalar uzak sunucuya gönderilmeye başlandığında, aktarımın ilerleyişini penceresinin durum çubuğunda görünür (5).
4.2.5. Senkronizasyon
Dreamweaver programı bir dizindeki veya tüm sitedeki daha yeni olan dosyaları otomatik olarak seçebilir. Bu sayede, bir aktarım sırasında herhangi bir dosyanın son sürümünün üzerine yazmadığınızdan emin olabilirsiniz (5).
4.2.5.1. Yeni Dosyaları Seçmek
Doğru yerel siteyi seçin ve onunla ilişkili uzak siteye bağlanın. Site penceresinin menü çubuğundan, yeni dosyaların hangi panelde seçilmesini istediğinize bağlı olarak, Edit > Select Newer Local (yeni yerel dosyaları seç) komutunu veya Edit > Select Newer Remote (yeni uzak dosyalan seç) komutunu seçin. Dreamweaver, yerel ve uzak dosyaların tarihlerini karşılaştırır. Karşılaştırma tamamlandığında, diğer sitedekine göre daha yeni olan dosyalar seçilir. Kontrol ettikten sonra, seçilen dosyaları alabilir, karşıya yükleyebilir veya senkronize edebilirsiniz. Synchronize (senkronize et) özelliği, daha yeni olan dosyaları seçer ve sonra onları yığın halinde alır veya karşıya yükler. Bu işlemden önce bir yedek almayı düşünebilirsiniz (5).
4.2.5.2. Dosyaları Senkronize Etmek
Site penceresinin menü çubuğundan Synchronize komutunu seçin. Synchronize Files (dosyaları senkronize et) iletişim kutusu açılır. Synchronize çekme menüsünden, tüm siteyi ya da sadece seçiminizi senkronize etmeyi seçin. Direction çekme menüsünden Get (al), Put (karşıya yükle) veya Both (ikisi) seçeneklerinden birini seçin. OK butonuna tıklayarak senkronizasyona hazırlanın. Site iletişim kutusu açılır. Dahil edilmesini istemediğiniz dosyaların yanından işareti kaldırın. Hazır olduğunuzda OK butonunu tıklayın. Belirtilen daha yeni olan dosyalar yüklenir veya alınır ve aktarımların ilerleyişi Site penceresinin durum çubuğunda görülür. Delete remote files not on local drive (yerel sürücüde olmayan uzak dosyaları sil) onay kutusunu işaretlememenizi şiddetle tavsiye ederim. Aksi halde, dosyaları alırken, yerel sitenizde bulunan ancak uzak sitede bulunmayan dosyalar bilgisayarınızdan silinir. Dosyaları karşıya yüklerken, uzak sitede bulunan ancak yerel sitenizde bulunmayan dosyalar da Web sunucusundan silinir. Synchronize Files iletişim kutusunda görünmese de, bu işlem çift yönlü çalışır (5).
4.2.6. Check In ve Check Out
Bir site üzerinde çok sayıda kişi çalışıyorsa, kimin hangi dosyayı nereye, ne zaman koyduğunu bilmeniz faydalı olacaktır. Site üzerinde sadece bir veya iki kişi çalışıyorsa, cevabı zaten bilirsiniz.
Bir dosyada Check Out işlemini yapmanız, o dosyayı yeşil bir onay işaretiyle işaretler, o dosyaya sizin kullanıcı adınızı atar ve dosyayı Dreamweaver programının Site penceresinde kilitler. Dreamweaver kullanan diğer ekip üyeleri, kilidi dosyaların (yani başka bir kişi tarafından Check Out uygulanmış dosyaların) üzerine yazamazlar. Ancak başka FTP istemcileri bu dosyaların üstüne yazabilir. Bu, üretim gruplarında kullanılan Unix tabanlı bir araç olan CVS checkout aracı daha basit, kullanıcı tabanlı ve daha az güvenli bir benzeridir.
Diğer insanların Check Out ile işaretlediği dosyalar, Site penceresinde kırmızı bir işaretle görünür ve o kişinin adı Checked Out By sütununda görünür (5).
4.2.6.1. Check In ve Check Out Kullanımını Etkinleştirmek
Check In ve Check Out özelliklerini kullanabilmek için, sitenin tanımında bu seçeneği etkinleştirmeniz gerekir. Site penceresinin menü çubuğundan Site > Define Sites komutunu seçin. Define Sites (site tanımla) iletişim kutusu açılır. Check In ve Check Out seçeneklerini ayarlamak istediğiniz siteyi seçin ve Edit butonuna tıklayın. Site Definition (site tanımı) iletişim kutusu açılır (Şekil 4.45.). Sol taraftaki kategori kısmından Check In/Out kategorisini seçin. Bu panel iletişim kutusunun ön tarafına gelir. Check In ve Check Out işlemini etkinleştirmek için Enable onay kutusuna tıklayın. Document penceresinde açtığınız dokümanların Check Out durumunda görünmesi için, Check Out Files When Opening onay kutusunu işaretleyin. Check Out Name metin kutusuna, diğer kullanıcıların Check Out uyguladığınız dosyaların yanında görmesini istediğiniz ismi yazın. Bu, tam adınız veya kullanıcı adınız (e-posta adresiniz) olabilir. OK butonuna tıklayın. Artık uzak sunucudan aldığınız her dosya Check Out durumunda görünür ve sunucuya koyduğunuz her dosya Check In durumunda gösterilir (5).

Şekil 4.45. Site Definition Penceresinde Check In/Out etkinleştirilmesi (5).

4.2.6.2. Bir Uzak Siteye Check Out Uygulamak
Site penceresinde istediğiniz siteye bağlanın. Check Out butonuna tıklayın. Dependent Files (bağımlı dosyalar) iletişim kutusunu cevaplayın. Dosya yerel siteye kopyalanır, ancak açılmaz. Dosyayı görebilmek için yerel siteyi (veya yeni yarattıysanız klasörünü) tazelemeniz gerekebilir.
Dosyalara Check Out uyguladıktan sonra, Site penceresinin menü çubuğundan File > Undo Check Out komutunu (Site>Site Files View>Undo Check Out) seçerek bu işlemi geri alabilirsiniz (5).
4.2.6.3. Dosyalara Check In Uygulamak
Site penceresinde istediğiniz siteye bağlanın. Yerel sitede Check In uygulamak istediğiniz dosyalara tıklayarak seçin. Site penceresinden Site > Check In komutunu seçin. Sadece Check In düğmesine de tıklayabilirsiniz. Açılırsa, Dependent Files (bağımlı dosyalar) uyarısını ve Overwrite (üstüne yazma) uyarılarını cevaplayın. Dosya, yerel sitede bir kilit sembolü ile gösterilir. Uzak sunucudan Check Out durumu ve LCK dosyası kaldırılır, isminiz Checked Out By sütunundan kaldırılır. Bir dosyaya Check Out uygulandığında, o dosya seçildiğinde Check Out sütununda bir onay işareti görünür. Bir onay işareti görünmüyorsa, bu sütuna tıklayarak bir dosyaya Check Out uygulayabilirsiniz. Check In uygulanmış dosyaların salt-okunur özelliğini kaldırmak için, Site penceresinin menü çubuğundan File > Turn Off Read Only komutunu seçin (5).
4.2.7. Site Haritasının Kullanılması
Dreamweaver, dosyaların ilişkilerini görmek için kullanabileceğiniz görsel site haritaları sunar, bunlar sadece dosyaların hangi dizinde olduğunu değil, aynı zamanda neyin nereye bağlı olduğunu da gösterir.
Görsel bir site haritasını kullanmak için, önce ana sayfa olacak dosyayı seçmeniz gerekir. Bu, belirli bir sitenin varsayılan indeks sayfası olabilir. Bir sitenin bir alt bölümüne ait site haritasını göstermeyi de isteyebilirsiniz; bu durumda ana sayfa görünüşünü değiştirerek, o sayfayı site haritasının odak noktası haline getirebilirsiniz (5).
4.2.7.1. Ana Sayfayı Ayarlamak
Site penceresinde Site çekme menüsünden Define Sites komutunu seçin. Define Sites (site tanımla) iletişim kutusu açılır.
Düzenlemek istediğiniz siteyi seçin ve Edit butonuna tıklayın. Site Definition (site tanımı) iletişim kutusu açılır.
Sol taraftaki kategori kısmından, Site Map Layout kategorisine tıklayın. iletişim kutusunun bu paneli öne gelir (Şekil 4.46.). Sitenizin kök dizininde index.html isimli bir dosya varsa, Dreamweaver onun ana sayfa olduğunu varsayar ve Home Page metin kutusuna onu girer.
Home Page metin kutusuna, ana sayfa olarak atayacağınız dosyanın konumunu girin veya Browse düğmesine tıklayarak Choose Home Page (ana sayfa seç) iletişim kutusunu açın.
Dosyayı seçin ve Open butonuna tıklayarak Choose Home Page iletişim kutusunu kapatın ve Site Definition iletişim kutusuna geri dönün.
OK butonuna tıklayarak Site Definition iletişim kutusunu kapatın ve Site penceresine geri dönün. Artık site haritasını görebilirsiniz (5).

Şekil 4.46. Site Map Layout kategorisinin etkinleştirilmesi (5).

4.2.7.2. Site Haritasını Görmek
Site penceresinde, Site Map View (site haritası görünümü) düğmesine tıklayın. Site penceresinde site haritası görünür (Şekil 4.47.).
Pencerenin sağ alt köşesini sürükleyerek pencereyi büyütebilirsiniz; ayrıca, iki bölmenin arasındaki kenarı sürükleyebilirsiniz (5).
Şekil 4.47. Site Haritası (5).

4.2.7.3. Site Haritasının Düzenini Ayarlamak
Site Definition iletişim kutusunun Site Map Layout panelini açın. Number of Columns metin kutusuna bir sayı girerek maksimum sütun sayısını ayarlayın. Column Width metin kutusuna bir sayı girerek, piksel cinsinden sütun genişliğini ayarlayın. Sayfa ikonlarının etiketi olarak dosya isimlerini ya da sayfa başlıklarını kullanabilirsiniz. Dosya isimlerini görmek için File Names düğmesini seçin. Sayfa başlıklarını görmek için Page Titles düğmesini seçin. Normalde gizli olanlar da dahil olmak üzere (LCK dosyaları ve FTP kayıt dosyaları gibi) tüm dosyaları göstermek için Display Files Marked as Hidden onay kutusunu işaretleyin. Bir frame ailesindeki tüm dosyalar gibi, tüm bağımlı dosyaları göstermek için Display Dependent Files onay kutusunu işaretleyin. OK tuşuna tıklayarak Site Definition iletişim kutusunu kapatın ve Site penceresine dönün (5).
4.2.7.4. Site Haritasının Bağlarını Çizmek
Site haritasını izlerken içinden bir sayfayı seçerseniz, sayfanın yanında bağ aracı (Link Tool) ikonu belirir. Bu aracı istediğimiz dosyaya sürükleyip bıraktığımızda, dosyaya link vermiş oluruz (5).
4.2.7.5. Bağ Aracını Kullanmak
Bu ikona tıklayıp, site haritası panelindeki veya yerel siteler panelindeki bir sayfaya sürükleyerek bir bağ yaratabilirsiniz. Bağ, ikonu aldığınız sayfada, ikonu bıraktığınız sayfaya giden bir bağ yaratır (Şekil 4.48.).
Bağ ikonunu sürüklerken düz bir çizgi göreceksiniz. Yerel panelindeki bir sayfaya sürüklerseniz, sayfa site haritasında yeni konumunda belirir. Buna ek olarak sayfanın alt tarafında sayfanın başlığına veya medya dosyasına bir bağ belirir (5).

Şekil 4.48. Bağ Aracını Kullanmak (5).

4.2.7.6. Yeni Bağ Düzenlemek
Bağ ikonunu sürüklediğiniz sayfaya çift tıklayın. Document penceresinde açılır. Sayfanın alt tarafındaki bağı bulun. Bu bağı istediğiniz herhangi bir yere sürükleyebilir, yazısını düzenleyebilir veya konunu ve bağı mevcut nesnelere kopyalayabilirsiniz (5).
4.2.8. Tasarım Notlarını Ayarlamak
Tasarım notları (Design Notes) Dreamweaver Programının 3.0 versiyonu ile gelen, yeni araçlarından biridir ve bir dosyayla ilgili iş akışı bilgilerini kaydetmenize izin verir. Tasarım notlarını kullanarak, dikkat isteyen dosyaları belirtebilir, bir dosyanın üzerinde kimlerin çalıştığını takip edebilir ve hemen her konuda notlar düzenleyebilirisiniz.
Tasarım notlarını kullanabilmek için, önce yerel sitenizde bunların kullanımını etkinleştirmeniz gerekir.
F5 tuşuna basarak Site penceresini açın. Site penceresinin menü çubuğundan Sites > Define Sites komutunu seçin. Define Sites iletişim kutusu açılır. Tasarım notlarını etkinleştirmek istediğiniz sitenin adına tıklayın. Edit butonuna tıklayın. Site Definition iletişim kutusu açılır. Sol taraftaki Category kısmından Design Notes kategorisine tıklayın. İletişim kutusunun bu paneli açılır. Maintain Design Notes onay kutusu işaretliyse, bir şeye dokunmayın. İşaretsizse, bu onay kutusunu işaretleyerek Tasarım notlarını etkinleştirin. Tasarım notlarını da sunucuya yüklemek isteyebilirsin Tasarım notlarının otomatik olarak yüklenmesini sağlamak için, Upload Design Notes for Sharing onay kutusunu işaretleyin. Bir proje üzerinde tek başınıza çalışıyorsanız veya grubunuzdaki herkes Dreamweaver kullanmıyorsa, Upload Design Notes for Sharing onay kutusunu boş bırakın; aksi halde sunucu sizin dışınızdaki kimseye faydası olmayan dosyalarla dolar (5).
4.2.8.1. Tasarım Notlarını Kullanmak
Tasarım notu, temel olarak başka bir dosya hakkında bilgi içeren gizli bir metin dosyasıdır. Tasarım notlarını sadece Web sayfalarında değil, resimlerde, multimedya dosyalarında, CSS veya HTML style sayfalarında, kütüphane öğelerinde, şablonlarda ve yerel sitenizdeki tüm dosya türleriyle kullanabilirsiniz (5).
4.2.8.2. Bir Tasarım Notu Yaratmak
Site penceresinde istediğiniz dosyayı seçin veya çalışma ekranında açın. Sonra, Site veya çalışma ekranının menü çubuğundan File > Design Notes komutunu seçin. Design Notes iletişim kutusu açılarak dosyanın adını ve sitede konumunu / adresini gösterir (Şekil 4.49). Status (durum) çekme menüsü, bir dosyaya şu etiketlerden birini atamanızı sağlar: Draft (taslak); Revision 1, 2, 3 (revizyon 1, 2, 3); alpha, beta, final (son); needs attention (dikkat gerektiriyor). Bunlardan birini seçebilir veya menüyü boş bırakabilirsiniz. Tasarım notuna geçerli tarihi eklemek için Notes metin kutusundaki dikey kaydırma çubuğunun üstündeki Date düğmesine tıklayın. Notes metin kutusunda tarih belirir. Notes metin kutusuna ilave notlarınızı yazın. Dosya açıldığında Dreamweaver programının Tasarım notlarını açması için, Show When File Is Opened kutusunu işaretleyin. Farklı dosyalarda tutarlı bit tarzda kullanacağınız özel notlar eklemek için All Info sekmesine tıklayarak iletişim kutusunun bu paneline geçin (Şekil 4.50.). Bir not eklemek için + düğmesine tıklayın. Name (isim) ve Value (değer) metin kutularına Proje ve Intranet veya Yazar ve towers gibi bilgileri girin. İşiniz bittiğinde, OK tuşuna tıklayarak iletişim kutusunu kapatın ve Tasarım notlarınızı kaydedin (5).

Şekil 4.49. Design Notes penceresinin Basic Info bölümü (5).


Şekil 4.50. Design Notes penceresinin All Info bölümü (5).

4.2.8.3. Tasarım Notlarına Erişmek
Bir Web sayfasına veya başka bir dosyaya ait bir Tasarım notunu açmak, bir tasarım notu yaratmak gibidir. Aynı iletişim kutusunu açarsınız, sonra Tasarım notlarını okur ve düzenlersiniz (5).
4.2.8.4. Bir Tasarım Notu Açmak
Site penceresinde Tasarım notlarını okumak istediğiniz dosyayı seçin. Site penceresinin menü çubuğundan File > Design Notes komutunu seçin. Design Notes iletişim kutusu açılır (5).
4.2.8.5. Tasarım Notlarını Silmek
Bir dosyayı sildiğinizde, Dreamweaver o dosyayla ilişkili tasarım notlarını otomatik olarak silmez. Geride kalan tasarım notlarını kolayca silebilirsiniz. Site penceresinin menü çubuğundan, Sites > Define Sites komutunu seçin. Define Sites iletişim kutusu açılır. Tasarım notlarını silmek istediğiniz sitenin adına tıklayın. Edit butonuna tıklayın.
Site Definition iletişim kutusu açılır. Sol taraftaki kategori kısmından Design Notes kategorisine tıklayın. İletişim kutusunun bu paneli açılır. Clean Up düğmesine tıklayın. Bir iletişim kutusu açılarak, bunu yapmayı gerçekten isteyip istemediğinizi sorar. Yes butonuna tıklayın. Dreamweaver, seçiğiniz sitede geride kalan tüm tasarım notlarını siler. Maintain Design Notes seçeneğinden işaretli kaldırırsanız, Dreamweaver sitenin tüm tasarım notlarını siler (5).
Şekil 4.51. Design Notes özelliklerinin silinmesi (5).


SONUÇ VE ÖNERILER:
Internet alanındaki gelişmeler sonucunda kullanımının yaygınlaşması, kişisel kullanıcılarda bu büyük oluşumda yer alma isteği doğurmuştur.
HTML dilini kullanarak, web siteleri oluşturmak zor ve çok uzun süren bir iştir. Fireworks ve Dreamweaver tarzı programlar, pratik ve daha özgür çözümler sunmamızı sağlayacaktır. Bu sayede yapacağımız işleri kolay ve daha kısa zamanda yapmış olacağız. Ayrıca oluşturacağımız web siteleri görsellik açısından daha zengin olacaktır.
Fakat, anlatılan yararlarına rağmen bu programlar ile yapılan tasarımların bazı dezavantajları vardır. Kullandığımız paket programların yetersiz olduğu noktalar mutlaka çıkacaktır. Bu sebepten HTML dilini öğrenmemiz önümüzü açarak, bize takıldığımız yerlerden kurtulmamıza yardımcı olacaktır.
KAYNAKLAR:
1. ÖCAL, Hakkı, Internet Tasarım Rehberi, Ankara 1998
2. YILDIZ, Murat, WEB Tasarımı, BYTE Dergisi, Cilt 5, Sayı 1-12
3. www.hacettepe.edu.tr.
4. Fireworks Programı ve Fireworks Help Dosyaları.
5. Dreamweaver Programı ve Dreamweaver Help Dosyaları

Web Tasarımcıların Ortak Dertleri

  • Super User tarafından yazıldı.
  • Kategori: Web Tasarım

Bir web tasarımcı olarak sıkıntı yaşadığımız anlar oluyor. Bunların başında çok bildiğini sanan insanlarla uğraşmak geliyor. "Ne olacak kardeşim iki tık yapacaksın" bu sözü duymayan varmı acaba bizim sektörde merak ediyorum. Hani içimden fareyi verip adama iki tık yap demek geliyor.
Fakat müşterilerin bu şekilde düşünmesinde bizlerinde suçu yokmu; elbette var. Alo abi ben web tasarımcısıyım şöyle böyle web sitesi yapıyorum. Sizi bu şekilde arayan oldu mu? Şahse bizim firmamızı arayanlar oldu. X firmasını bu şekilde arayan beş kişi olduğunu düşünün ve sizde o firmaya teklifinizi sundunuz. X firmasının yetkilisinden duyacağınız söz genelde şu oluyor: " sen ne yaptın kardeşim alt tarafı iki tık yapacaksın". Tabiki web tasarım yapan firmaların tek sıkıntısı bu değil... Sallıyorum X hosting bie yazılım yapıyor ve duyuruyor. Flash flash flash 35 TL ye web siteniz hazır. Neymiş bu yazılımla firma kendine bir tema seçecek sonrada içeriğini kendisi dolduracak. Müşteri saten iki tıkçı ilan etmiş web tasarımcıları bu sefer gidecek iki tıkınıda kendisi yapacak. Tabi olacak olan malumdur. İki tıkını yapacak ve parasını boş yere harcadığını anlayacak. Bir başka sıkıntı ise çomak sokma sıkıntısı. Siz hiç bir web sitesini yarılamışken müşteriden vazgeçtim lafını duydunuz mu? Ben biten sitede bile duydum. Neymiş z kişisi100 liraya site yapıyormuş biz ondan on kat fazlasına yapıyormuşuz. Eskiden ahdi vefa denen birşey varmış ama artık nerede. Çok kez anlaştığımız fiyatı kurtarmayacak hale gelen projeleri biz laf ağızdan bir kere çıkar diyerek iptal etmemişken nedense iki tıkçılık sıfatından kurtaramadık kendimizi. Sizde sıkıntılarınızı burada anlatmak isterseniz. İletişim bölümünden yazın bize.

Saygılarımızla WSY ekibi

Top of Page