ii-master - dw ana ders

dw ana ders

TASARIMA NASIL BAŞLANMALI ?

Web sitesinin tasarımına başlamadan önce site içerisinde kullanacağınız dokümanları oluşturmanız gerekiyor. Web sayfaları içerisinde kullanacağınız ses, resim, film ve metin dosyalarını önceden hazırlamanız, hatta hangi dosyayı hangi sayfada kullanacağınızı kağıt üzerinde tasarlamanız, sitenin oluşturulması esnasında size ışık tutacaktır.
Ziyaretçi kitlesini ve bu kitleye yapacağınız hitap metinlerini de uygun bir şekilde hazırlamanız, sitenin ziyaretçi oranını arttıracaktır.
Web için kullanılan materyallerden site içerisine yazılan dil ve üsluba kadar herşeyden site tasarımcısı sorumlu olacaktır. Bu yüzden site oluşturulurken toplumun sosyal ve kültürel özellikleri göz önünde tutulmalı, hiçbir zaman hukuk ve demokrasi ile çakışan ifadeler kullanılmamalıdır. Site içerisinde kullanılan materyaller eğer bir başka yerden alıntı ise kesinlikle alınan yerden izin alınmalı yada materyalin serbest kullanılıp kullanılmayacağı araştırılmalıdır. Aksi halde telif yasalarına göre suçlu duruma düşebilirsiniz.

DREAMWEAVER ILE ÇALIŞMAYA NASIL BAŞLANIR?

Bilgisayarınızda tüm web içeriğinizi kaydedeceğiniz bir klasör açınız ve bu klasörün içinde kullanım amacına uygun alt klasörler oluşturunuz. (Resimleriniz için "resim" klasörü, grafik çalışmalarınız için "grafik" klasörü gibi). Ancak klasör ve dosya isimlerini verirken kesinlikle Türkçe karakterler (ı, ç, ğ, ş, ö, ü) kullanmayınız. Çünkü Türkçe karakterler web tarayıcılarının dosyanızı görmemesine neden olacaktır.
Ziyaretçilerinizin "url" adresinizle görecekleri ilk sayfa yani ana sayfanızın ismi "index.html" olmalıdır. Ana sayfanızdan ulaşılabilecek diğer sayfalarınıza kısa ve anlaşılabilir isimler vermeniz, istediğinize ulaşırken size yardımcı olacaktır.

DREAMWEAWER PROGRAMINI TANIYALIM

1.BELGE PENCERESİ
Web sayfamızı oluşturacağımız alan. Yazılarımızı, grafiklerimizi, tablolarımızı, formlarımızı vb. bu alan üzerinde tasarlıyoruz
istediğiniz pencerenin ismini tıklayarak ekrana çağırabilirsiniz. Menüdeki komutların başında check(doğru işareti) olan pencereleri F4 tuşuna basarak ekrandan gönderebilir, tekrar F4 tuşuna basarak ekrana getirebilirsiniz.

2. INSER PENCERESİ
INSERT Penceresinde bir çok özellik mevcuttur. her bir sekmeyi tıklayarak çok farklı işlemler yapabiliriz.

A)Common Sekmesi: Başka sayfalara link (bağlantı kurmak) E-posta adresleri ile web üzerinden bağlantı kurmak,Tablolar oluşturmak, Katmanlar oluşturmak, Resim eklemek, Flash dosyaları eklemek, Değişen butonlar oluşturmak,Flah butonları oluşrma işlemleri Common sekmesinden yapılır.
B)Layout Sekmesi: Tasrım modunda çizerek tablolar oluşturma işlemleri Layout Sekmesinden yapılır.

C)Text Sekmesi: Bu bölümde Metinlerimizi şekillendirmek için kullanılır. Metni Koyu,italik,Değişik boyutlarda metin oluşturmak, sıralı listeler oluşturmak için kullanılır.

D)Tables Sekmesi : Belge penceresinin code bölümünde tablolar ile ilgili kodları oluşturmak için kullanılır.

E)Frame Sekmesi: Bir sayfanın içine birden çok sayfa gömme işlemi frame işlemi bu sekmeden yapılır.

F)Forms Sekmesi : Web sayfalarınızda bilgi toplamak amacı ile oluşturacağınız formlar bu sekmeden yapılır.

G)Templates Pencersi : Web sayfasındaki bütün sayfalarda aynı sayfayı kullanmak için şablon oluşturulur ve sayfalar bu dizayna göre yapılır. işte standart sayfalar oluşturmak için bu sekme kullanılır

H)Media Sekmesi: Web sayfanızda Flas butonlar, java appletler ve eklentiler eklemek için bu sekme kullanılır.

I)Head Sekmesi : Web sayfanızın arasında head takları mevcuttur. burada web sayfanızın arama motorlarında aranıp bulunması için anahtar kelimeler ve web sayfanızın adresi görünmesi için head takları arasına meta takları oluşturulur.

2. PROPERTIES (ÖZELLİKLER) PENCERESİ

Bu pencere ile sayfanızı tasarlarken o anda üzerinde uğraştığınız herhangi bir nesnenin(metin, resim, layer vs.) özelliklerini değiştirebilirsiniz. Bu pencereyi ekrana Windows menüsünden properties komutu veya klavyeden Ctrl+F3 kısa yolu ile çağırabilirsiniz.
Araç pencerelerini ekrana getirmek için WINDOWS menüsünü kullanabilirsiniz. Tasarım aşamasında ekranda görmek

Örneğin : Belge üzerine tabloyu işaretlediğimde tabloya uygulanacak bütün özellikler geldi.kaç sütun, kaç satır, yükseklik,genişlik, hücreler arası boşluk, arka plan rengi gibi tüm özellikler properties penceresine geldi. Buradan istediğiniz şekilde özelliklerini değiştirebilirsiniz.

4) SİTE PENCERESİ:

Bu pencereden Dreamweawer da bir web projesi başlatmak, proje içindeki klasörleri oluşturmak, dosyaları oluşturmak ve resimleri projeye dahil etme işlemleri bu pencereden yapılır

DREAMWEAWER İLE PROJE BAŞLATMAK

1.Web sayfalarında bir bütünlük sağlamak için Dreamweawer programında projenizi oluşturmanız gerekir.
a)Site penceresi ekranda yok ise Windows penceresinden site komutuna tıklayınız.
b)Site penceresinden Site/ New Site seçiniz
c) Gelen pencereden siteye bir ad veriniz

d) next butonuna basınız ve bir sonraki pencereyide next tuşuna basarak geçiniz.

e) Eğer web sayfasını bir Networks üzerinde veya direk serverda denemiyorsanız ilk seçeneği seçiniz next tuşuna basınız.

Yukarıdaki pencerede de açılır kutudan none seçiniz.next tuşuna basınız yine gelen pencerede next tuşuna basarak Dreamweawer projesi oluşsun.

DEAMWEAWERDA TÜRKÇE KAREKTER SORUNUNU ÇÖZMEK:

Macromedia Dreamweawer Türkçe karakter setini desteklemiyor. Dolayısı ile sayfalarınızda yazmış olduğunuz ı,ç,ğ,ş,ö,ü gibi karakterler farklı karakterler olarak ekrana yansıyor. Bu nedenle bir kez Dreamweavera Türkçe karakter setini tanımlamanız gerekiyor.
Dreamweawer programını açtıktan sonra
1. EDİT menüsünden Preferences komutunu çalıştırınız. Ekrana gelecek olan diyalog kutusu içerisinde sol taraftaki listeden Fonts / Other ve aşağıdaki resimdeki gibi ayarları yapınız.

Code bölümünden kod kısmına geçin.

3) <Head>
</Head> tagları arasına şu kodları yazınız.

4) Modify menüsünden Page properties seç gelen pencereden Other seç artık sayfamızda ve browserda Türkçe karakterler görünür.

SAYFA AYARLARI : Tasarlayacağımız ilk sayfamız web sitemizin giriş sayfası olacak. Yani index.html. Öncelikle yukarıdaki bölümlerde anlatmış olduğumuz, site ayarları ve Türkçe karakter ayarlarını yapmış olmanız gerekiyor.

Title: Sayfanızın başlığını buraya girebilirsiniz.
Background image: :Browse…(gözat) düğmesini tıklayarak.sayfanızın arka alanına resim koyabilirsiniz. Karşınıza gelen ekranda(Resim 2) resim dosyasının yolunu gösteriyorsunuz. Preview images seçeneğini aktif hale getirdiğinizde resim önizlemesini aktif hale getirip, resim dosyalarını işaretlediğinizde ekranın sağ tarafında küçük önizleme yapabilirsiniz.
Site tanımlaması yaparken oluşturduğunuz Local Folder’un(dosyalarınızı koyduğunuz klasör) içinde resim isimli bir klasör oluşturup grafik dosyalarınızı buraya koyabilirsiniz. Bu yöntem dosyanın yolunu tanımlarken size kolaylık sağlayacaktır.

Background: :Sayfanızın arka plân rengini, renk paletinden seçebilirsiniz.
Text:Sayfanızdaki düz yazı rengi.
Links:Sayfadaki yazılara eklenen link’lerin rengi.
Visited Links:Sayfada ziyaret edilmiş link’lerin rengi.
Active Links:Sayfadaki aktif link’lerin rengi.
Bu renk ayarlarını yapmazsanız, Dreamweaver programı kendi default (varsayılan) ayarları kabul edecektir. Default ayarlarda arka plan beyaz, metinler siyah, linkler mavi, ziyaret edilmiş renkler ise kırmızıdır.
Aynı zamanda bu bölümde yapmış olduğunuz metin rengi ayarları sayfa genelinde yaptığınız ayarlardır. İsterseniz sayfanızın bir bölümünden, bölüm seçip, seçtiğiniz bölüm için ayrı metin ayarları yapabilirsiniz.
Left Margin: Sayfanın sol marj ayarı
Top margin: Sayfanızın üst marj ayarı

Magrin Width: Genişlik marjin ayarı
Magrin height : Yükseklik marjin ayarları
Document encoding: Sayfanın dil ayarları
Tracing İmage: Resmin kendi boyutunda arka plana resim eklmek
image tranparency: Resimlerin görünürlük ayarını oluşturmak için kullanılır.

Metin Biçimlendirme
Dreamweawer’ da yazılarınızı bir metin editörü kullanır gibi girebilir ve biçimlendirebilirsiniz. Sayfanızın ilk satırından başlayarak yazılarınızı girebilirsiniz. Metni girdikten sonra seçili hale getirip daha sonra Properties(Ctrl+F3) penceresini kullanarak bu metni istediğiniz gibi değiştirebilirsiniz.
Metin özellikleri diyalog kutusu aşağıdaki şekilde gösterilmiştir.

Başlık için istediğiniz bir biçimlendirmeyi buradan seçebilirsiniz.
Metnin fontunu buradan seçebilirsiniz
Metnin punto büyüklüğünü buradan girebilirsiniz.
Metnin rengini buradan belirleyebilirisiniz.
. Belirlediğiniz rengin HEX kodunu buradan görebilirsiniz.
Seçilen metini kalın (bold) yapar.
Seçilen metini eğik (italik) yapar.
Seçilen metini sola, ortaya veya sağa yaslar.
Seçili metinle bir başka sayfaya link verecekseniz, onun yolunu burada belirtebilirsiniz.
Eğer sayfanızda frame (çerçeve) kullanıyorsanız, linke tıklandığında hangi çerçeve içinde açılacak.
Madde imi ve numaralandırma.
Liste girdileri ve paragraf girintisini artırma-azaltma.
Properties penceresinden yapılan işlemler ile ilgili kodları görmek için kullanılır.

Web Sayfası ve Resimler
Bir web sayfası içerisinde metinler ne kadar önemliyse, resimler de bir o kadar önemlidir. Düz yazı ile anlatamayacağınız pek çok şeyi resimlerle anlatabilirsiniz. Resimler aynı zamanda sayfaların göze güzel görünmesini sağlamaktadır. Özgün bir sayfa için, Internet üzerinden Internet kullanıcılarına sunacak olduğunuz malzemeleri çok iyi seçmelisiniz.
Bu arada resimlerin aşırı kullanımından da kaçınmak gerekir. Zaten yavaş olan Internet hızıyla, bol resimlerle dolu bir web sayfasının yüklenmesini beklemek sayfanızı ziyaret edenlerin kaçmasına yol açacaktır. Bu yüzden sayfalarımızda dev resimler kullanmak hiç de mantıklı bir yöntem olmayacaktır.
Bu web sayfalarını yaratırken kullanacağımız resimleri web sayfalarımıza nasıl yerleştireceğinizi de bu bölümde ayrıntıları ile göreceksiniz.
Web sayfalarında kullanılan resimler, GIF veya JPEG formatında olmalıdır. Resimleri sınıflandırmak gerekirse, GIF türündeki resim dosyalarının daha çok çizim, düğme, logo gibi görüntüleri web sayfalarına aktarmak için kullanıldığı söylenebilir. Fotoğraf, manzara, peyzaj gibi görüntüleri web sayfalarında kullanmak gerektiğinde ise JPEG formatındaki resimler daha iyi sonuç verir. Her ikisi de "sıkıştırmak" bir resim formatı olan GIF ve JPEG arasında da birçok fark var. GIF resimleri sıkıştırırken kayba neden olmuyor, resmin orijinal görüntüsü neyse ekranda da onu gösteriyor. Oysa kayıplı sıkıştırma yapan JPEG formatında, resim biraz bozuluyor. Ancak daha çok fotoğraf türü resimlerde kullanıldığı için bu kayıp çok da büyük farklar getirmiyor.
Bir web sayfasına bu iki formattan birinde hazırlanmış bir resmi yerleştirmek için resmi, ilk önce web siteniz için hazırladığınız klasörün içerisindeki "resimler" klasörüne kopyalamalısınız.

Yukarıdaki örnek resimde, fare imleci hemen birinci paragrafın başında bulunuyor. “Bütün kartların...” kelimeleri ile başlayan cümlenin başında yer alıyor. şimdi bu konumda bir resim eklemek için sol taraftaki alet çantası adını verdiğimiz araç çubuğundan birinci düğmeye basabilirsiniz veya INSERT menüsünden Image komutunu tıklayabilirsiniz.

Gözat penceresi içerisindeki herhangi bir resmin üzerine tıkladığınızda (eğer sağ alt taraftaki PREVIEW IMAGES seçeneği aktifse) o resmin örnek bir görüntüsünü diyalog kutusunun sağ tarafından izleyip kararınızı ona göre verebilirsiniz. Bu önizleme görüntüsünün hemen altında da resmin eni ve boyu, resim dosyasının boyutu ve web tarayıcısının normal şartlarda bu resmi ne kadar zamanda yükleyebileceği yazacaktır. Gerekli ayarları yaptıktan sonra SELECT düğmesine basın. Resim web sayfası içerisinde ayarlamış olduğunuz yerde görüntülenecektir.

Resim Etiketleri
Bir web sayfası açıldığında, ilk önce metinler, arkasından da resimler yüklenir. Ancak bazı durumlarda, örneğin internet hızının düşük olduğu durumlarda bu resimlerin yüklenmesi uzun bir zaman alabilir. Bu durumda web sayfasının yüklenmesi sırasında internet kullanıcısının kendisini nasıl bir web sayfasının beklediğini bilmesi için web sayfalarındaki resimlerin etiketlerini belirlemek iyi bir fikir olacaktır. Eğer bir resme etiket koyarsanız, web sayfası yüklenirken resmin bulunması gereken yerde bu etiket yazar ve web sayfasını yükleyen kişi de en azından nasıl bir resimle karşılaşacağını bilir.
Web sayfanıza aldığınız herhangi bir resme böyle bir metin etiketi yapıştırmak istiyorsanız resmi seçili duruma getirin ve özellikler diyalog kutusuna bakın. Burada sağ alt tarafta göreceğiniz ALT isimli metin alanına resmin etiketini yazıp ENTER tuşuna basarak yapabilirsiniz.

Web sayfanızdaki bir resim üzerine gelirseniz Resim properties görünür.

Resimleri Değişik Konumlara Yerleştirmek
Bir resmi bir web sayfasına yerleştirdikten sonra etrafındaki metne göre konumunu değiştirebilirsiniz. Aynen kelime işlem veya diğer sayfa tasarım programlarında olduğu gibi resmi sağa veya sola yaslayarak metnin etrafında kaymasını sağlayabilirsiniz. Böylece gereksiz üst ve alt boşlukların oluşmasını da engellemiş olursunuz. Örneğin bir önceki ekran görüntüsünde aldığımız resimde herhangi bir "yaslama ayarı" yapılmamış olduğu için resmin hemen sağında metin gereksiz yere aşağıdan başlamış olarak görülüyor.

Bir resmi metne göre sağa veya sola yaslamak için resmin üzerine bir kere tıklayın ve seçili duruma getirin. Seçili duruma getirilen resmin etrafında bir çerçeve göreceksiniz. Şimdi özellikler diyalog kutusuna bir göz atın (eğer ekranda değilse CTRL + F3 tuşlarına basarak bu diyalog kutusunu ekrana getirebilirsiniz). Bu diyalog kutusunun içerisinde sağ üst tarafta ALIGN adında aşağı doğru açılan bir liste kutusu göreceksiniz. Buradan resmi sola veya sağa yaslayabilirsiniz. Sol için LEFT, sağ için de RIGHT seçeneğini kullanabilirsiniz.

Bir resmi sağa veya sola yasladığınızda, editör ekranı içerisinde küçük mavi bir karecik göreceksiniz. Bu mavi kareciği fare ile sürükleyerek resmin metne göre yerleşimini ayarlayabilirsiniz. Yani mavi kareciği fare ile sürükleyerek metnin içerisinde herhangi bir yere bırakabilir ve resmin o konuma göre sağa veya sola yaslanmasını sağlayabilirsiniz.
Bazı durumlarda resimleri metne göre değil metinleri resme göre yerleştirmek gerekebilir. Örneğin alt alta resimlerin yer aldığı ve sağ taraflarında da açıklamaların bulunduğu bir web sayfası hazırlamak istediğinizi varsayalım. Bu durumda metinleri resimlerin tam ortalarına denk getirmek isteyebilirsiniz. Veya bütün metinleri resimlerin sağ üst köşeleri ile hizalamak gibi bir amacınız olabilir. Bu durumda da yine resim özelliklerinden ALIGN ayarını kullanacaksınız. Burada kullanabileceğiniz seçenekleri kısaca özetleyelim.
Baseline veya Bottom
Metin satırının en alt sınırı resimle hizalanır. Çengellere (g veya j harfi gibi) dikkat edilmez..
Absolute Bottom
Metin satırının en alt sınırı resimle hizalanır. Çengellere (g veya j harfi gibi) dikkat edilir.
Top
Metin satırı içerisindeki en yüksek karakterin en üstü ile resmin en üstü hizalanır.
Text top
Metin satırı içerisindeki en yüksek karakterin en üstü ile resmin en üstü hizalanır.
Middle
Metin satırının en alt sınırı, resmin tam ortası ile hizalanır.
Absolute Middle Metin satırının tam ortası, resmin tam ortası ile hizalanır.

Resimlere Çerçeve Eklemek
Web sayfalarınıza aldığınız resimlere bu tür çerçeveler eklemek istiyorsanız, bu işlemi yapmak için Macromedia Dreamweawer ile sayfaya resmi ekledikten sonra üzerine bir kere tıklayın ve seçili duruma getirin. Properties penceresinden Border alanına sayısal değer girin.

Resim.9. 31
Resimlere Linkler
Link'leri kısaca tanımlarsak, link “bağlantı” anlamına geliyor. Aynı zamanda bir web sayfası içerisinde üzerine fare ile tıkladığınızda sizi başka bir web sayfasına alıp götüren bir alana verilen addır. Yani köprü.
Bir web sayfası içerisindeki herhangi bir nesneyi (ki bu nesne bir metin, bir resim veya bir film olabilir) bir link'e dönüştürebilirsiniz. Linkleri koymak ve kullanmak Dreamweawer ile son derece kolaydır. Bu bölümde değişik web sayfası elemanları kullanarak bir web sayfasından diğerine veya bir web sayfası içerisinde, bir yerden başka bir yere link vermeyi öğreneceğiz.
Sayfa İçerisindeki Link'ler
Çok uzun bir web sayfanız olduğunu düşünelim. Ekranlara sığmıyor, en az bir iki ekran aşağı doğru kaymanız gerekiyor. Bu durumda, bu upuzun yazıyı belli başlıklarla ayırıp sayfanın üst tarafından başlıklara link vererek web sayfasına bağlanan bir Internet kullanıcısının sayfa içerisinde aşağı yukarı kaydırma yapmadan istediği bilgiyi içeren bölüme gitmesini sağlayabilirsiniz. Elbette o bölümünün sonunda sayfanın en tepesine geri dönmesini sağlayacak bir link koymayı unutmamalısınız.
Biz bu işleme "sayfa içerisinde link vermek" diyoruz. Bu konuyu bir örnekle uygulamaya başlayabiliriz. Önce üzerinde çalışmak istediğiniz sayfayı açın. Bu sayfanın içerisinde en az iki üç ekran aşağı kaymanızı gerektirecek uzun bir yazı olmasına ve bölüm başlıkları ile ayrılmış olmasına dikkat etmelisiniz. Yoksa yapacağımız işi kendi bilgisayarınızda iyi örnekleyemezsiniz. Bu tür uzun yazıları eski kelime işlem belgelerinizden bulup kopyalayıp (CTRL+C) Macromedia Dreamweawer editör penceresine yapıştırarak (CTRL+V) elde edebilirsiniz.

Öncelikle INSERT >> invisible tags >> Anchor komutunu çalıştırıyoruz veya Ctrl+Alt+A tuş kombinasyonunu kullanarak da ulaşabiliriz. Linke tıkladığımızda nereye gitmesini istiyorsak anchor linkini o bölge üzerinde veriyoruz aşağıdaki şekilde olduğu gibi.
Resimde öncelikle anchor link ismini veriyoruz ben disk ismini verdim. Artık sayfanın her hangi yerine veya başka bir web sayfasında vereceğimiz, ben sabitdisk.htm sayfasına ekledim anchor linkimi. Örneğin ben donanim.htm sayfamda seçtiğim bir resmin veya metinin properties kutusuna link bölümüne sabitdisk.htm#disk şeklinde link verdim

Uzun bir sayfanız varsa, aynı sayfa içerisinde link verecekseniz, seçtiğiniz resim veya metinin properties ekranındaki link bölümüne vermiş olduğunuz anchor link ismini giriniz. Örneğin ben sabitdik sayfamda sayfanın sonlarına doğru bir yerde disk kelimesinin olduğu kelimeyi seçip properties kutusuna link bölümüne #disk şeklinde link verdim.

Aklınızda olması gereken küçük bir not düşelim. Macromedia Drearmveaver'ın Türkçe işaretler ve boşluklar ile arası pek iyi değil. Bu yüzden bölüm başlıklarını işaretlerken ve isimleri verirken, Türkçe karakterler kullanmayın ve boşluk bırakmayın. Boşluk kullanmak istediğinizde, altçizgi kullanabilirsiniz.
9.11.4.2. Diğer Sayfalara Link'ler
Resmi veya metni seçili duruma getirdikten sonra Properties diyalog kutusuna bakın. Diyalog kutusu içerisinde LINK adında bir bölüm göreceksiniz. Bu bölüme bu web sayfasına bağlanan bir internet kullanıcısının, resim veya metnin üzerine tıkladığında gitmesini istediği web sayfasının adresini gösterin. Ok ile belirtilen gözat düğmesini tıklayın.

Ekrana, aşağıda resmi görülen pencere gelecektir. Buradan daha önce hazırlayıp kaydetmiş olduğunuz web sayfanızın yolunu gösterin.

Diğer Sitelere Link'ler
Bir web sayfası içerisinde üzerine tıklayarak başka web sayfalarını ekrana getirecek linkler de oluşturabilirsiniz. Örneğin, bir yazının içerisinde "Milli Eğitim Bakanlığı " adı geçiyor diyelim. Bu yazıyı bir link haline getirip, sayfaya bağlanan internet kullanıcısının otomatik olarak bu link'in üzerine tıklayarak Milli Eğitim Bakanlığı web sitesine bağlanmasını sağlayabilirsiniz. Bunu yapmak için önce yazıyı hazırlayın, daha sonra link haline dönüştürmek istediğiniz metni seçili duruma getirin

Adresi eksiksiz yazmayı ihmal etmeyin. Eğer bir web sitesine link veriyorsanız bu adresi www ile değil http://www ile başlatmanız gerekli. Aksi takdirde işler karışacaktır. Bir web sitesine link verdiğinizde eğer gidilen web sayfası sizin sitenizin içerisinden bir web sayfası değilse, bu durumda yeni açılan web sayfası internet kullanıcısının sizin web siteniz ile ilgili olan bütün bağlarım koparacaktır. Bu yüzden internet kullanıcılarını web sitenize bağlı tutabilmek için bu tür "site dışı" link'leri yeni açılan web tarayıcısı pencerelerine göndermekte yarar vardır. Böylece sizin web siteniz arka plânda açık kalacak, yeni adres açılan yeni bir pencerenin içerisinde görüntülenecektir. Bu pencere kapatıldığında sizin web siteniz yine ekranda hazır durumda bekliyor olacaktır.
Bir link'e tıklanıldığında link'in işaret ettiği web sayfasının yeni bir web gezgini penceresi içerisinde açılmasını sağlamak için link'i verdikten sonra özellikler diyalog kutusu içerisinde LINK bölümünün sağındaki TARGET adındaki aşağı doğru açılan liste kutusuna bakın. Buradaki menüden _BLANK seçeneğini aktif hale getirirseniz söz konusu link yeni bir pencerede açılacaktır. Örnek için yukarıdaki resme bakabilirsiniz.
E-mail Adresine Link Vermek.
Her web sayfası içinde bu sayfayı hazırlayan kişi veya kurumun bir e-mail adresinin görüntülenmesi iyi bir seçenektir. Böylece sayfayı izleyen internet kullanıcısı bir konuda bir sorusu, eleştiri veya yorumu olduğunda bunu kime yönelteceğini merak etmez, çünkü bu bilgi zaten sayfa içerisinde kendisine verilmiştir.
Bir web sayfası içerisinde tek tıklama ile istediğiniz adrese e-mail göndermesini sağlayacak bir link hazırlayabilirsiniz. Hem de son derece kolay bir şekilde. Önce sayfa içerisinde imleci e-mail adresinizin görüntülenmesini istediğiniz konuma getirin. Yazdığınız bir metni veya resmi seçili konuma getirin. Şimdi Dreamweaver’ın INSERT menüsünden E-Mail Link komutunu çalıştırın. Bu komutu çalıştırdığınızda ekrana aşağıdaki örnek resimdeki gibi bir diyalog kutusu gelecektir.(Resim.9.38)
Bu diyalog kutusu içerisinde TEXT bölümüne link'in metnini, E-MAIL bölümüne de bu link'e tıklanıldığında e-mail mesajı atılacak olan e-mail adresini girin. OK düğmesine basın ve diyalog kutusunu kapatın. E-mail gönderme link'iniz sayfanın içerisine girilmiş olacaktır. Artık bu link'e tıklayan internet kullanıcısının e-mail programı otomatik olarak açılacak ve ayarlamış olduğunuz e-mail adresine mesaj göndermeye hazır bir şekilde bekleyecektir.
İmage-Map
Resimlerin üzerinde dolaşırken bazı linkler görürsünüz aynı resim üzerinde bi kaç tane link olur örneğin bunu dreamweaver'da image map komutuyla yapıyoruz. Öncelikle resmi INSERT >> images komutunu çalıştırıp resmimizin sayfaya yerleştiğini, sonrada selection menüde resim özelliklerinden image map özelliğinin de açıldığını göreceğiz. Aşağıdaki şekilde görelim.

Şekildede görüldüğü gibi hangi image map şeklini kullanacaksak seçiyoruz ve resmin üzerindeki yeşil alan gibi tarıyoruz, ve link veriyoruz. Target vereceksek düzenliyoruz ve kaydettiğimiz zaman artık resmin üzerinde bi kaç tane link oluşturmuş oluyoruz.

Web Sayfasında Tablolar
Dreamweaverde' da web sayfası hazırlamanın en kolay yolu tablolar oluşturmaktır. Tablo genişliğini yüzde (percent) olarak verebilirsiniz. Böylece gelen ziyaretçinin ekranını sayfaya tam olarak kaplayacaktır. Ancak büyük ekranlarda yatayda bazı boşluklar olacağı için 800 piksel genişliğindeki bir ekranda çalışıyorsanız, yüzde seçeneğini kullanın.
Şu an Türkiye'de sörf edenlerin %60'ı 800*600 ekran çözünürlüğünü kullanmaktadır. Yüzde 30'u ise 1024*768 ekran çözünürlüğünü tercih etmektedirler. Bu nedenle tablo oluştururken sayfanın genişliğini 800 piksel olarak belirlemeniz daha doğru olacaktır.
Bir tabloyu oluşturduktan hemen sonra yükseklik değerini girin. Ardından her hücre için genişlik ve yükseklik değerlerini, yapacağınız ayarlamaya göre girmeyi unutmayın. Bu iki detay unutulduğu için, browser arayüzünde, hücrelere yerleştirilen elemanlar, dağılmış olarak görünmektedir. Tablo kullanımında bir diğer önemli husus, cell pading ve cell spacing değerlerinin 0 (sıfır) yapılmasıdır. Aksi takdirde, hücreler arasında beyaz boşluklar görünmektedir
Browser yazılımları, bir web sayfasını, üstten alta doğru, tablolar ile yükler. Bu nedenle, sayfa tasarımınızı, yatayda tablolara bölün Eğer tüm sayfayı, tek tablo içinde tamamlarsanız, ziyaretçiniz tablonun altındaki son resim elemanın son pikseli yükleninceye kadar, hiç birşey göremeyecektir.

Rows : Aşağı doğru ekleyeceğiniz tablo sayısı.
Columns : Sağa doğru ekleyeceğiniz tablo sayısı.
Width : Tablonuzun genişliği. Yanında pixels seçili bu pixel genişliğine göre genişlik ayarını yapmamız lazım yani 800*600 ekran çözünürlüğünde 750 seçmek mantıklı, percent seçerseniz, buda sayfanızın boyutunu % de ile belirlersiniz %100 yaparsanız 1024*768 çözünürlükte de tam ekran açılır. 800*600 ekran çözünürlüğünde de aynı açılır.
Cell padding : Tablo içindeki alan boyutu.
Cell Spacing : Tablo alanları arasındaki boşluk boyutu.
Border : Tablo kenar genişliği.

Bu özellikleri istediğiniz gibi ayarladıktan sonra OK düğmesine basın. Tablonuz web sayfasının içerisinde görüntülenecektir. Aşağıdaki örnek resimde 3x3 boyutlarında, 300 piksel genişliğinde, çerçeveleri olmayan bir tablo oluşturulmuştur.

Tablonuzun içerisini böyle doldurduktan sonra, tablonun boyutunu, hücrelerin genişliğini ve bunun gibi özelliklerini istediğiniz gibi değiştirebilirsiniz. Hücre boyutlarını değiştirmek için farenizi kullanın ve hücrelerin çerçevelerine tıklayıp sürükleyip tablonun boyutunu ayarlayın. Hücre boyutlarını böylece ayarladıktan sonra hücrelerin ayarlayabileceğiniz diğer özelliklerine bir göz atalım.
Öncelikle, tablo özelliklerini değiştirme işlemini sayfanın alt tarafındaki özellikleri diyalog kutusunu kullanarak yapacağınızı unutmayın. Tablonuzun özellikler diyalog kutusunu ekrana getirmek için hücre çerçevesine tıklayıp tabloyu seçili duruma getirmelisiniz. Bu işlemi yaptığınızda tablonun etrafında bir çerçeve görüntülenecek, özellikler diyalog kutusunda da tablo seçenekleri beliriverecektir.

Bu diyalog kutusunun tüm seçeneklerini ekrana getirmek için sağ alt tarafındaki küçük üçgene tıklamalısınız. O zaman diyalog kutusu aşağıya doğru uzayacak ve tüm seçenekler ekrana çıkacaktır. Şimdi de bu seçeneklere bir göz atalım:
ROWS :Tablonun satır sayısını buradan değiştirebilirsiniz
COLS  :Tablonun sütun sayısını buradan değiştirebilirsiniz
W  :Tablonun genişliğini yüzde veya piksel olarak buradan değiştirebilirsiniz
H  :Tablonun yüksekliğini yüzde veya piksel olarak buradan değiştirebilirsiniz.
CELLPAD :Hücre içeriğinin çerçeveye olan uzaklığını piksel cinsinden ayarlayabilirsiniz
CELLSPACE :Hücrelerin birbirine olan uzaklığını piksel cinsinden ayarlayabilirsiniz
ALIGN :Tabloyu sağa, sola yaslayabilir veya ortalayabilirsiniz
BORDER :Tablo çerçevesinin kalınlığını piksel cinsinden ayarlayabilirsiniz
LIGHT BRDR :Tablo çerçevesinin birinci rengi
DARK BRDR :Tablo çerçevesinin ikinci rengi
BG (üstteki) :Tablonun arka planına bir resim döşemek istiyorsanız buradan seçebilirsiniz.
BG (alttaki) :Tablonun genel arka plan rengini buradan belirleyebilirsiniz
BRDR :Eğer tablo çerçevesi kullanıyorsanız tablonun çerçeve rengini buradan belirleyebilirsiniz
Tablonun genel ayarlarını bu diyalog kutusundaki bu seçenekleri kullanarak yapabilirsiniz. Ancak, eğer hücreleri tek tek biçimlendirmek (formatlamak) istediğinizde başka seçenekleriniz de var

Hücre Biçimlendirme
Bir tablo içerisindeki hücreleri tek tek seçerek veya bir grup hücreyi fare ile seçerek değişik biçimler uygulayabilirsiniz. Hücre ayarları diyalog kutusunu ekrana getirmek için ayarlamak istediğiniz hücreleri farenin sol düğmesine basılı tutup sürükleyerek seçin. Aşağıdaki örnek ekran görüntüsünde tablonun sağ alt tarafındaki üç hücre seçili duruma getirilmiş olarak görünüyor. Dikkat ederseniz, seçili duruma getirilen hücrelerin çerçevesi koyu renkle işaretlenmiş durumda. Böyle bir seçim yaptığınızda aşağıdaki diyalog kutusunun seçeneklerinin de değiştiğini ve ekranda hücrelere özel ayarların görüntülendiğini fark edeceksiniz. Şimdi bu yeni ayarlara bir göz atalım. Diyalog kutusunun üst tarafındaki ayarların bir önemi yok, onlar klasik metin biçimlendirme seçenekleri.

HORZ :Hücre içeriğinin hücre içinde yatay olarak yerleşimi
VERT :Hücre içeriğinin hücre içinde dikey olarak yerleşimi
NO WRAP :Hücre içeriğinin genişliği hücre genişliğinden uzunsa bir alt satıra inilecek mi?
HEADER :Hücreler başlık hücreleri mi?
Bir tablo içerisindeki hücrelerin içerdiği metinler birbirinden değişik uzunlukta olabilirler. Eğer herhangi özel bir ayar yapılmamışsa bu içerik dikey olarak ortalanarak, yatay olarak da sola yaslanarak görüntülenir. Ancak siz istiyorsanız bu yerleşim seçeneğini değiştirebilirsiniz. Bu yerleşim ayarları hücre özellikleri diyalog kutusunun HORZ ve VERT seçenekleri kullanılarak yapılmaktadır. Aşağıdaki resimdeki tabloda bu ayarların değişik kullanım örneklerini içeren bir tablo görüyorsunuz

Web Sayfasında Frame’ler
Bir sayfada aynı anda birden fazla sayfanın kullanımı olayıdır. Örneğin sol tarafta hep sabit kalan bir navigator bar sağ tarafta ise menüdeki butonları tıkladıkça değişen bir sayfa, frame kullanımı bu ve buna benzer şekillerde olabilir. Frame kullanmaktaki en büyük avantaj sayfanın menüsünün veya sabit kısmının bir kez yüklenerek defalarca yüklenmesini ve buna bağlı olarak sayfanın açılışını yavaşlatmasını engellemektir.

Frame eklemek için: INSERT/Frame menüsü altındaki frame seçeneklerinden birini kullanabilirsiniz. İsterseniz Object araç penceresinden Frame’i seçip, istediğiniz bir modeli sayfanıza tıklayabilirsiniz. Frame'inizi ekledikten sonra frame ile ilgili ayarları yapmaya başlayabiliriz. İlk önce frame'inizin genişliğini ayarlamalıyız. Onun ardından WINDOW/Frames penceresi aktif durumda değil ise aktif duruma getirerek sayfamızdaki framelerin genel bir görünümünü alabiliriz.

Bu pencere sayesinde seçtiğimiz frame ile ilgili ayarları Property Inspector üzerinden değiştirebiliriz. Eğer frame'inizde kaydırma çubuğu çıkmasını istemiyorsanız Scrooling kısmına 'No' olarak bırakmalısınız.
Gelelim framelerin kaydedilmesine; her frame ayrı birer HTML sayfasıdır, bu yüzden her biri ayrı ayrı kaydedilmelidir. İlk önce bu framelerin bir arada durmasını sağlayan dış sayfayı kaydetmelisiniz. Önce WINDOW/Frames penceresi aktif durumda değil ise aktif duruma getirerek sayfamızdaki framelerin genel bir görünümünü sağlayınız. Sonra bu pencereden en dıştaki pencereyi seçili duruma getirin. Sonra FILE... menüsünden Save Frameset komutunu tıklayın. Dosyanızı site tanımlaması öncesi oluşturduğunuz klasörün içine kaydedin. Daha sonra Frames penceresinden diğer Frameleri seçip, FILE... menüsünden Save All Frames komutu ile diğer sayfaları da kaydedin. Dosyalarınızı kaydederken, kayıt türünü Html Documents olmasına dikkat edin.

Eğer daha önceden hazırlamış olduğunuz bir sayfayı seçtiğiniz bir Frame gömmek istiyorsanız FILE... Menüsünden Open in Frame komutunu kullanabilirsiniz

Framelerden birisi üzerinde bir link varsa ve bu linke tıklandığında hangi framelerin değişip hangisinin sabit kalacağı ayarı Property Inspector üzerinden yapılabilir. Burada link eklediğiniz text yada resim dosyasını seçtikten sonra Property Inspector üzerindeki link kutucuğunun yanındaki Target seçeneğini ihtiyacınıza göre değiştirmelisiniz.

Blank : Tıklanan sayfayı hiç bozmadan yeni bir pencere açarak linki o pencere içinde açar.
_Parent : Linki kendi üzerinde açar
_Self :Varsayılan ayarlardaki frame’i açar.
_Top :En dıştaki frame’in değişmesini sağlayarak tüm framelerin yerini alan tek bir sayfa açılmasını sağlar.
_MainFrame:Ana Frame’in değişmesini sağlar. (Eğer sol taraftaki menü üzerindeki bir linke tıklandığında sağ taraftaki ana sayfanın değişmesini istiyorsanız bunu kullanacaksınız)
_LeftFrame, _RrightFrame, topFrame ... eklediğiniz framelere göre istediğiniz frame'in değişmesini sağlayabilirsiniz.
Bir Web sayfasında kullanılan her çerçevenin diğerlerinden farklı bir adı vardır. Çerçeve içeriğine işaret etmek için bu isim kullanılacağı için her çerçevenin adını akılda kalıcı bir şekilde belirleyebilirsiniz. Adını değiştirmek istediğiniz çerçevenin üzerine tıkladığınızda özellikler diyalog kutusunun sol alt tarafında FRAME NAME adında bir bölüm göreceksiniz. Buradan çerçevenin ismini belirleyebilirsiniz. Her çerçevenin ilk başta ismi bellidir. Ancak siz bunları değiştirip, üst, sol, sag gibi isimler verebilirsiniz. Burada da dikkatinizi çekeyim, çerçeve ismi olarak boşluk ve Türkçe karakterler kullanmayın. Çerçevelerin ismini değiştirdiğinizde temsili çerçeve penceresindeki çerçevelerin içinde de bu isimleri göreceksiniz.
Bu arada, çerçevelerin içerisine alınan Web sayfaları ile çerçevelerin boyutlarının aynı olması mümkün değil elbette. Bu tür bir durum söz konusu olduğunda, Web sayfasının içeriği çerçeve sınırının dışına taştığında sayfa içeriğini görmek için çerçevelerin yanında kaydırma çubukları çıkmak zorundadır. Bazı durumlarda bu çerçevelerin çıkmasını istemeyebilirsiniz, veya sadece gerekli olduğunda görüntülenmesini tercih edebilirsiniz. Bu ayarı yapmak için temsili çerçeve penceresinden ayarını yapmak istediğiniz çerçeveyi seçerek, özellikler diyalog kutusu içerisinden de SCROLL seçeneğini kullanacaksınız. Buradaki seçenekler şöyle:
NO :Web sayfası taşsa bile çerçevede kaydırma çubukları görüntülenmeyecek
YES :Web sayfası tassa da taşmasa da kaydırma çubukları görüntülenecek
AUTO :Normalde kaydırma çubukları görüntülenmeyecek, Web sayfası taşarsa görüntülenecek

Web sayfanızda nasıl bir tasarım kullandığınıza bağlı olarak bu araç çubuklarını görüntüleme veya görüntülememe seçeneğini kullanabilirsiniz. Bu arada, çerçevelerin boyutlarının internet kullanıcısı tarafından değiştirilmesini isteyip istemediğinize bağlı olarak da bazı kısıtlamalar koyabilirsiniz. Bunun için ilgili çerçeveyi seçili duruma getirin, özellikler araç çubuğundan NORESIZE seçeneğini kullanın. Eğer bu seçeneği aktif hale getirirseniz internet kullanıcısı çerçevelerin boyutlarını değiştiremez, eğer açık bırakırsanız isteyen çerçeveyi istediği gibi değiştirebilir.
Bir çerçeveyi kaldırmak istediğinizde bütün yapacağınız çerçeve sınırını fare ile sürükleyip Web tasarım penceresinin sol veya üst taraflarına dayamanız yeterlidir. Çerçeve anında silinecektir. Bunun dışında çerçevenin boyutlarını sayfayı düzenlerken fare imleci ile sürükleyip bırakarak istediğiniz gibi değiştirebilirsiniz.

WEB SAYFALARINDA TASARIM KOLAYLIKLARI

ŞABLON OLUŞTURMA

Bir Web sitesindeki sayfaların temel tasarım özelliklerinin birbirine benzemesi geçerlidir. Böylece Web sitesini gezen bir Internet kullanıcısı ziyareti esnasında sürekli olarak aynı Web sitesi içerisinde dolaşmakta olduğunun bilincinde olur, bir sayfadan diğerine geçtiğinde tasarıma yabancı olmadığı için aradığı bilgiyi kolayca bulabilir, içerisinde birbirinden farklı tasarımlar kullanılmış onlarca Web sayfasından oluşan Web siteleri ziyaretçileri tarafından çok fazla başarılı bulunmamaktadır.
Bu arada, bazı sayfalarda çok tekrar ettiğiniz kodlar da olacaktır elbette. Örneğin en baştaki bölümlerde bahsettiğimiz Türkçe karakter setini aktif hale getirmek için kullanılan <META> takısı ayarlarını, Web sitenizde oluşturduğunuz bütün sayfalarda kullanmanız şarttır. Web sitenizdeki bütün sayfalarda aynı arka plan rengini veya desenini kullanacaksınız diyelim. Bu durumda oluşturduğunuz bütün sayfalarda, tek tek özellikler diyalog kutusunu açıp arka plân resmini belirlemek sıkıntı yaratacaktır.
Dreamweawer, standart bir Web sayfası hazırlamanıza ve bu sayfayı Web sitenize şablon olarak kaydetmenize imkan veriyor. Böylece, çok standart sayfalardan oluşan bir Web sayfasında boş sayfaları bu şablondan yola çıkarak hazırlayıp pek çok zahmetten kurtulmuş oluyorsunuz.

1.Şablonumuzu bu boş alanda adım adım oluşturacağız. Önce FILE menüsünden Save As Template komutunu çalıştırın.

2.Bu komutu çalıştırdığınızda ekrana o anda Web siteniz için tanımlanmış olan şablonların görüntülendiği bir diyalog kutusu görüntülenecektir. Şu anda herhangi şablon olmadığı için bu diyalog kutusu içerisindeki liste boştur. Diyalog kutusu içerisinde SAVE AS bölümüne gelin ve şablonunuzun ismini belirleyin. Aşağıdaki örnek resimde şablon ismi olarak "tasarım" kullanılmıştır.

3.Her zaman olduğu gibi şablon isimlerinde de Türkçe karakter ve boşluk kullanmıyoruz. Şablonumuzu kaydettikten sonra FILE menüsünden Close komutunu çalıştırın ve Web tasarım penceresini kapatın. Hızlı erişim çubuğundan SITE düğmesine basın ve site haritasını ekrana getirin, site haritası içerisinde TEMPLATES adında yeni bir klasörün yaratıldığını göreceksiniz. Bu klasörü açtığınızda da şablon dosyanızın buraya kaydedilmiş olduğunu göreceksiniz Soyadı DWT olan şablon dosyalarını istediğiniz gibi değiştirebilirsiniz. Bunun için üzerine çift tıklamanız yeterli olacaktır. Dosyanın üzerine çift tıkladığınızda şablon dosyası Web tasarım editörünün içerisinde açılacaktır. Şimdi gerekli değişiklikleri yapmaya başlayabiliriz.

4.Üzerinde çalışacak olduğunuz şablon dosyasını Web tasarım editörü ile açtıktan sonra standart sayfa tasarımınızı bu sayfaya ekleyebilirsiniz. Örneğin, sayfa özelliklerinden sayfanın arka plân rengini ve başlığını belirleyebilirsiniz. Bir şablonun içerisinde bu şablonu temel alarak üretilecek olan sayfalarda hangi alanların değiştirilebileceğine, hangilerinin sabit kalacağına karar verebilirsiniz. Normalde, bir Macromedia Dreamweawer şablonunun içerisinde hiç bir alan değiştirilebilir durumda değildir. Ancak istediğiniz yerlere değiştirilebilecek alanlar ekleyebilirsiniz. Örneğin tüm sayfaların üst tarafında sabit bir logo görüntülenmesini, gerekli linklerin bulunmasını sağlayabilirsiniz. Sayfanızın diğer kısımlarında ise yazılar, tablolar, resimler ve yazılar değişebilir.

5.Şimdi bu örnek tabloyu inceleyelim. 800 piksel genişliğinde olan bu tablonun üstte değişmeyecek resim ve solda yine değişmeyecek link sadece sağ taraftaki tablo değişecek. şekilde bir şablon hazırlayalım.

6.Bu sayfada, sadece arada " Burası değişecek olan bölüm" ibaresi ile belirlenmiş olan alanın değiştirilebilmesine izin vermek istiyoruz. Bu şablonu temel alan bir Web sayfası hazırlanırken sadece bu hücrenin içerisine bir şeyler yazılabilecek, sayfanın diğer öğeleri ise sabit kalacak. Şimdi siz de buna benzer bir şablon oluşturun ve imleci değiştirilmesini istediğiniz alana getirin. İmleci getirdikten sonra MODIFY menüsünden TEMPLATES * NEW EDITABLE REGION...komutunu çalıştırın. Böylece Dreamweawer'a içeriği değiştirilebilir yeni bir alan tanımlamakta olduğumuzu bildiriyoruz. Bu komutu çalıştırdığınızda ekranda aşağıdaki gibi bir diyalog kutusu göreceksiniz. New Edıtable Regıon başlığını taşıyan bu diyalog kutusu içerisinde NAME bölümüne bu alanı tanımlayacak bir bilgi girin.

"Burası değişecek alan” alanına “Değişek alan" gibi bir isim verebilirsiniz, ismi belirleyip OK düğmesine basınca diyalog kutusu kapatılacak ve ayarlamış olduğunuz alan içerisinde mesajınız kıvrık parantezler arasında görüntülenecektir. Örnek için aşağıdaki resme bakabilirsiniz.

7.Bu bölümü belirledikten sonra buraya girilecek olan metinlerin fontunu, rengini ve boyutunu ayarlayın. Burada standart metin formatlama seçeneklerini özellikler diyalog kutusunu kullanarak uygulayabilirsiniz. Gerekli ayarları yaptıktan sonra FILE menüsün-den CLOSE komutunu çalıştırın. Ekrana gelecek olan ve size "dosyayı kaydetmek istiyor musunuz?" sorusunu soran diyalog kutusuna EVET cevabını verin.

ŞABLON KULLANARAK SAYFA OLUŞTURMA

Artık standart şablonunuz kullanıma hazırdır. Şimdi bu şablonu temel alan bir web sayfası hazırlayalım. Önce site haritası görüntüsünü açın (hızlı araç çubuğundan SİTE düğmesine basarak), ağaç yapısında yeni sayfayı oluşturmak istediğiniz klasörü seçili duruma getirin. Ekrandaki site haritası penceresinin FILE menüsünden New From Template komutunu çalıştırın. Bu komutu çalıştırdığınızda ekrana bir diyalog kutusu gelecek ve bu diyalog kutusu içerisinde Dreamweaver içerisinde tanımlı olan şablonların bir listesi görüntülenecektir. Burada oluşturmuş olduğunuz şablonun adını seçili duruma getirin ve Create düğmesine basın.

Bu düğmeye bastığınızda Dreamweawer Web tasarım penceresinin içerisinde şablonunuzu temel almış boş bir Web sayfası açılacaktır. Bu Web sayfası içerisinde değiştirilmesine izin verilmeyen alanlar sarı renk ile işaretlenmiştir. Değiştirme imkânı verilmiş olan alanlar ise kıvrık parantezler arasında belirtilmiştir.
Artık sayfanızda değişecek olan bölümde eklemelerinizi yaparak yeni dosyanızı kaydedebilirsiniz.
Zaman zaman şablonları temel alarak ürettiğiniz Web sayfalarından bazılarım şablonun koymuş olduğu belli kuralları bozarak değişik bir şekilde düzenlemek istersiniz. Bu tür esneklikler değişik türde sayfalar kullanıldığında işe yarayacaktır. Şablona bağlanmış olan bir Web sayfasının bağlı olduğu şablonla ilgili bütün bağlarını kesmek ve onu istediğiniz gibi düzenlenebilir hale getirmek için belgenin üzerine çift tıklayın Dreamweawer Web editörü ile açın

Belge açıldığında MODIFY menüsünden TEMPLATES * Detach From Template komutunu çalıştırın. Bundan böyle bu belge üzerinde istediğiniz değişiklikleri yapabilecek, sayfanın görünümünü istediğiniz gibi değiştirebileceksiniz.

Eğer şablonuzda değişikler yapacaksanız diğer sayfalara link vermiş iseniz şablondaki sayfadan hangi sayfalarınız etkileniyorsa diğer sayfalarda otomatik olarak güncelleşecektir.

MENÜ OLUŞTURMAK

Dreamweawer ile bu tür link'ler içeren bir aktif menü oluşturmak için önce menüyü içerecek olan web sayfasını web sayfası düzenleme penceresi içerisinde açın. Web sayfasını açtıktan sonra içerisinde menüyü yerleştireceğiniz alanı hazırlayın.
Dört elemanı olan bu menüde iki adet sitenin içerisine, iki adet de sitenin dışarısına link bulunuyor. Şimdi sırada bu link'lere gitmemizi sağlayacak olan menüyü oluşturmak var. ilk iş olarak INSERT menüsünden FORM OBJECT * JUMP MENU komutunu çalıştırın. Bu komutu çalıştırdığınızda ekranda aşağıdaki gibi bir diyalog kutusu ile karşılaşacaksınız.
Bu diyalog kutusu içerisindeki seçenekleri kullanarak menü elemanlarını adım adım tanımlayabilirsiniz. Birinci eleman TEXT bölümünde "unnamedl" olarak karşımızda duruyor. Bu bölüme gelin ve ilk elemanın adını yazın, Buraya yazdığınız metin menünün içerisinde görülecektir. Şimdi, menüde bu eleman seçildiğinde gidilecek olan Web sayfasını belirlemek için hemen alttaki WHEN SELECTED GOTO URL isimli metin kutusuna gelin. Burada, eğer Web sitesinin içerisindeki bir sayfaya link vermek istiyorsanız BROWSE düğmesine basıp ekrana gelecek olan diyalog kutusunu kullanarak gitmek istediğiniz web sayfasını belirleyebi1irsiniz.
Bu ayarı yaptıktan sonra diyalog kutusunun sol üst tarafında, üzerinde + işareti olan düğmeye basın. Menü seçeneklerinin arasına boş bir seçenek daha eklenecektir. Yine bir önceki tekniği kullanarak bu menü elemanının da adım ve adresini belirleyebilirsiniz. Bu yöntemi kullanarak menü elemanlarını teker teker belirleyin. Yeni menü elemanı ekledikçe diğer elemanlar diyalog kutusunun üst tarafındaki listede isim -> adres şeklinde listelenecektir.
Linkleri hazırladıktan sonra yukarıdaki listenin sağ üst tarafındaki yukarı ve aşağı okları kullanarak bir elemanın liste içerisindeki yerini değiştirebilir, yanlış girdiğiniz bir elemanı sol üst tarafta üzerinde - işareti olan düğmeye basarak silebilirsiniz.
Normalde, bir internet kullanıcısı bu menüden bir elemanı seçtiğinde link'in işaret ettiği Web sayfasına otomatik olarak yönlendirilecektir. Ama menünün yanında bir de GİT düğmesi görüntülemek istiyorsanız, bu diyalog kutusu içerisindeki INSERT GO BUTTON AFTER MENU seçeneğini aktif hale getirin. Bunu yapınca sağ tarafında üzerinde GO yazan bir düğme görüntülenecektir. Bu düğmenin üzerinde yazan yazıyı da üzerine tıklayıp özellikler diyalog kutusu içerisinden değiştirebilir "GİT", şeklinde koyabilirsiniz.

SAYFALARINDA ETKİLEŞİMLİ DÜĞMELER

Öncelikle düğme dediğimizde neyi ifade etmeye çalıştığımızı açıklayalım. Bir düğme aslında iki adet resimden oluşur, GIF veya JPEG formatında olabilir. Bu iki resimden birincisi web sayfası yüklendiğinde ekranda görünür, ikincisi ise HTML kodunda gizli olarak bekler. Sayfayı ziyaret etmekte olan Internet kullanıcısı fare imleci ile düğme olarak ayarlamış olduğunuz resmin üzerine gelince bu resim silinir, yerine arka planda beklemekte olan ikinci düğme resmi görüntülenir. Örneğin orijinal düğme resmi mavi ise, fare imleci üzerine getirildiğinde aynı düğmenin kırmızı renkli bir versiyonu gösterilir. Böylece resmin bir orijinal hali olur, bir de fare imleci üzerine geldiğinde gösterilen hali. Renk ve şekil değiştirilen düğmeler ile kullanıcıları etkileyen çok hoş tasarımlı Web sayfaları hazırlamak mümkündür.
Elbette, düğmelerin tasarımı ve şekli tamamen sizin resim çizme veya internetten resim seçebilme yeteneğinize bağlı. Bu arada, düğmeleri sadece link'ler olarak da düşünmelisiniz. Örneğin iki fotoğrafı bu şekilde ayarlayarak fare imleci üzerine geldiğinde değişen fotoğraflar da elde edebilirsiniz.
İşe başlamadan önce düğme olarak kullanacağınız resimleri hazırlamanız gerekli.
Resimleri hazırladıktan sonra şimdi içinde düğme oluşturmak istediğiniz Web sayfasını açın. Resmin (daha doğrusu düğmenin) görüntülenmesini istediğiniz yere imleci getirin, imleci getirdikten sonra dosyayı kaydedin. Hemen arkasından INSERT menüsünden Interactive İmages / Rollover Image komutunu çalıştırın. Bu komutu çalıştırdığınızda ekranda aşağıdaki gibi bir diyalog kutusu ile karşılaşacaksınız.

Bu diyalog kutusu içerisinde Image Name bölümünde düğmeye bir isim verin. Macromedia Dreamweaver default olarak buraya bir isim verecektir. İsterseniz aynen bırakabilir, isterseniz de değiştirebilirsiniz. Bundan sonra Original Image, ekrana gelecek olan diyalog kutusunu kullanarak Web sayfası açıldığında ilk olarak görüntülenecek olan resmi seçin. Resmi seçtikten sonra Browse düğmesine basın ve tekrar bu diyalog kutusuna geri dönün. Resmin adresi metin kutusunun içerisine alınacaktır.
Şimdi bir alt bölüme inin ve Rollover Image bölümüne gelip BROWSE düğmesine basın. Burada da resmin ikinci halini bulup Browse düğmesine basın. Düğmenin ikinci halini, yani fare imleci üzerine geldiği sırada gösterilecek olan resim dosyasını da belirlemiş oldunuz.
Resimleri belirledikten sonra diyalog kutusunun bir alt bölümündeki Preload Rollover Image seçeneğinin aktif olmasına dikkat edin. Bu seçenek aktifken Web sayfası yüklendiğinde resmin ikinci hali de Web tarayıcısı tarafından yüklenir ve fare imleci üzerine geldiğinde bu resim anında gösterilir. Aksi takdirde fare imleci üzerine geldiğinde kullanıcı bu resmin yüklenmesini beklemek zorunda kalacaktır.

Bu ayarı da kontrol ettikten sonra diyalog kutusunun en altına gelin ve burada Go To Url bölümünde BROWSE düğmesine basarak bu düğmeye tıklandığında ekrana getirilecek olan Web sayfasını ayarlayın. Eğer buradan başka bir Web sitesine link vereceksiniz. Bu link'in adresini bu metin kutusunun içerisine direkt olarak girebilirsiniz. (Ancak;başına http:// eklemeyi unutmayın).
Ayarlarımız tamam, artık Ok düğmesine basıp bu diyalog kutusunu kapatabiliriz.
Diyalog kutusu kapatıldığında ekranda düğmenin birinci halini göreceksiniz. Dreamweaver penceresinde fare imlecinin değişimini izleyemezsiniz. Bunun için CTRL + S tuşlarına basın ve dosyayı kaydedin. Daha sonra F12 tuşuna basarak Web sayfasını Web tarayıcınız içerisinde görüntüleyin. Düğmelerinizin çalışmakta olduğunu göreceksiniz.Düğmeleri çerçeveli sayfalarda kullanırken, link'leri ayarladıktan sonra Web sayfasının içerisinde üzerine tıklayın ve özellikler penceresinin alt bölümündeki TARGET seçeneğini kullanarak işaret edilen Web sayfasının hangi çerçeve içerisinde açılacağını belirlemeyi unutmayın.

NAVIGATION BAR EKLEMEK

yatay ve dikey olarak bir grup linkler oluşturabilirz. Interactive İmages / Navigation Bar komutu ile oluşturulu

Nav Bar Element : Gruptaki elemntin ismi
Element name: Elementin ismi
Up İmage: Resmin ilk hali
Ower İmage: Mouse üzerine gelince oluşacak resim
Down İmage: Tıklandıktan sonraki Resim
Ower While Down İmage: Üzerine gelince ve tıklandığında oluşacak resim
Alternate Text: Resim Görünecek yazı
When Clicked, Go To URL : Tıklandığında gideceği linkin adı
Preload Images: Bütün resimlerin yüklenmesi

FLASH BUTON EKLEMEK

Web sayfamıza etkileşimli swf uzantılı flash butonlarda kayabiliriz. Inset / Interactive Images/ Flash buton komutunu verdiğimizde flash buton ekleme dialog penceresi gelir.

Sample: Buton örneğini görnek için
Style: Buton çeşitleri
Button Text : Buton üzerinde görünecek İsim
Font: Yazı Tipi
Link: Butona tıklanında gideceği web sayfası veya adresi
Target: butona tıklandığında Açılacak sayfanın nasıl açılacağı
Bg Color: Buton araka plan rengi
Save As: Flas Buton adı

BEHAVIORS(DAVRANIŞLAR)
Hazır bazı java kodlarıyla işlemler yapabilmek için Behaviors penceresini kullanırız. bu pencere aktif halde değilse window menüsünden / Bhawiors komutunu çalıştırırsanız sağ tarafta bir pencere açar

Go To URL: Web Sayfası açılırken başka bir web sayfasına yönlenme işi bu komutla yapılr. ilk sayfa açılmadan başaka bir web sayfasına gider. Bu java kodları daha çok web server taşındığında başaka bir web sayfasına yönlenmede çok kullanışlıdır.

Open Browser Wimdow: Ana Sayfa açılırken isteğimiz boyutlarda başka bir web sayfası açmak için kullanılır.
URL To Display: Açılacak Pencere
Window Width: Pencere genişliği
Window Height: Pencere yüksekliği
Navigation Toolbar: Pencere başlığı olup olmayacağı
Menü Bar: Menü barın olup olmayacağı
Scrolbars as Needed : Kaydırma çubuklarının olup olmayacağı
Resize Handles : Yeniden boyutlandırılabilir olup olmayacağı
Windows Name: Pencerenin adı

Popup Message : Web Sayfasının açılışında bir mesaj pencersi açılması için kullanılır.

Set Text: Statüs barda mesaj görüntülemek için kullanılır.

Play Sound: Web Sayfası açıldıktan sonra müzik çalması için kullanılır

Show Pup – Up Menu: Web Sayfanızda Aktif olan bir link bloklandığında Show Pup – Up Menu aktif hale geliyor. Link tıklandığında alt munüler gelmesi için bu java komutundan yararlanılır.

Show Hide Layers: Üst üste katmanlar oluşturup bunlardan birini gösterip diğerlerini gizleyerek sanki bir çok sayfa ile çalışıyormuş gibi bir menü oluşturabiliriz. bu davranışı yapabilmek için işlem sıramız şöyle olacak
1.Layerleri gösterebilmek için üst üste layerler oluşturup hepsini hidden yaparız.
2.Layerin açılacağı link bağlantısını yapmak için metinlere “#” işareti ile link oluşturuz

3.Window menüsünden layer penceresi açılır.
4.Layer 4 Bloklanır ve Behavior penceresinden Show Hide Layers Komutu seçilir.ve aşağıdaki dialog penceresi gelir.

hangi layer gösterilecekse o layer Show diğerleri Hide yapılarak üst üste bindirilmiş layerlerden sadece birinin içeriği gösterilir.

CSS STYE
Web sayfanızda belgelerinizi şekillendirmek için daha önceden tanımlanmış bilgileri ile metinlerinizi,tablolarınızı, formlarınızı şekillendirebilirsiniz.
STYLE ÇEŞİTLERİ
1.Dosya olarak style oluşturmak ve sayfalarınıza link bağlarını kurarak style oluşturmak
2.Web sayfanızda HTML Taglar arasına yazarak style oluşturmak

CSS Style oluşturmak için Text /CSS Style komutu çalıştırılır. veya Window bölümünden CSS Styles komutu çalıştırılır. CSS Penceresi açılır. CSS Komutu çalıştırıldığında aşağıdaki pencere açılır.

Make Custom Style(Class) : Özel tanımlamalar yaparak stil oluşturmak
Redefine HTML Tag: Direk HTML Taglarına stiller atayarak web sayfasında HTML Taglar kullanıldığında daha önceden tanımlanan HTML Tagları göre şekillenir.
USe CSS Selector: Linklerin şeklenmesinde kullanılıyor:
Define in: New Style Sheet File: Stillerin bir dosya olarak saklanması
This Document Only: Sadece Aktif sayfaya stiler tanımlanması

BİR DOSYA OLARAK CSS OLUŞTURMAK:
1.Text/ CSS Styles/ New CSS Style komutu çalıştırılır.
2.2. Yukarıdaki CSS Style penceresi açılır.

Use CSS Selector: Web sayfasında linklere çeşitli stiller oluşturulur.Selector seçeneğinden linklerin durumu seçilir.
a:link : Web Sayfasındaki linkin durumu
a:visited : Ziyaret edilmiş linklerin durumu
a: hover : Mouse ile linklerin üzerine gelince linkin durumu
a: activeAktif linkin durumu
yukarıdaki işlemlerden herhangi birini seçip ok tuşuna bastığımızda dosyayı kaydet penceresi açılır

Bu pencerede css dosyasının adı verilir ve projenin içine kayıt yapılır.

STİLERİN ÖZELLİKLERİ

Not: CSS Tipi ne olursa olsun tüm css işlemlerinde aşağıdaki penceredeki özellikler kullanılır.

TYPE: Metinler ile ilgili stil tanımlamaları yapılır.

Font: Metinlerin Font Tipi ayarlanır.
Size: Metnin boyutu ayarlanır
Syyle: Metinlerin styeli ayarlanır.
Weight: Metinlerin kayu olup olmayacağı ayarlanır.
Line Height: Metinlerin satır yüksekliği ayarlanır.
Case: Metinlerin Büyük harf veya küçük harf durumu ayarlanır.
Color: Metin rengi ayarlanır.
Decoration: Metinlerin altı çizgili, üzeri çizgili, gibi durumlarının olup olmayacağı ayarlanır. daha sonra uygulanan işlemlerin aktif olması için Apply ve ok tuşuna tıklanır.

BACKROUNT: tabloların,metinlerin, hücrelerin arka planları ile ilgili stil tanımlamaları için kullanılır.
Bacground: Arka Plan Rengi
Background İmage: Arka plan resmi
Rpeat : Yenileme türü
Attachment: eklentinin nasıl olacağı
Horizontal Position: Yatay pozizizyon
Vertical Position: Dikey posizyonun nasıl olacağı

BLOCK: Stillerin bloklanması ile ilgili bölümdür.
Word Spacing: Kelimeler arası boşluk
Letter Spacing: Harfler arasında Bırakılacak boşluk miktarı
Vertical Alignment: Dikey hizlama
Text Align: Metinlerin hizalanması
Text İndent: Metinlerin ne kadar içerden başlayacağı
Display: Bloklamanın nereye uygulanacağı

BOX: kutular oluşturmak.

Width: Kutunun genişliği
Height: Kutunun Yüksekliği
Padding: Kutrunun metinlerin boşluğu
Margin: marj ayarları
Float: Kutunun nereye yerleştirileceği

BORDER: Stil uygulanacak alana kenar çizgileri tanımlama işlemi buradan yapılır.

Style: Sağ ,sola,Alta,ve üste uygulanacak çizgi tipi
Width: Çizginin genişliği
Color: Çizginin rengi

LİST: Madde imleri oluşturmak için kullanılır.
Type: Madde imi tipi
Bullet image: Madde imi olarak küçük resim kullanma
Position: madde iminin pozisyonu

POSİTİON: Stil tanımlanan alanların pozisyonlarını belirlemek için kullanılır.
Type: Pozisyonun tipi
Width: genişiliğ
Height: Yüksekliği
Placement: Sağ, sol, yukarı, ve aşağı posizyonunu belirlemek.
Visibility: Görünürlük durumu
Z-Index: Katman sırası

EXTENSIONS: Stillerde özellikle link bağlantılarında kullanılır.
Before: Önce
After: Sonra
Cursor: Mouse imlecinin durumu
Filter: Filtreleme efekleri

Use CSS Selector: linkler ile ilgili stil tanımlamaları yapmak için kullanılan Stil tipidir.
Use CSS Selector seçildiğinde Selector açılır menüsünden
a: Link: web tasarım aşamasındaki linkin tanımlamaları yapılır. örneğin aktif linkin Font Tipi: Arial, Boyu: 14 Ve koyu yaptık

A: Visited: Ziyaret edilmiş linklerin rengi örneğin Ziyaret edilmiş linklerin rengini kırmızı yaptık fontu:arial ve boyutu: 20 yaptık

A: Active: Aktif linkler ile ilgili linkin durumunu belirler. örneğin aktif linkler fontu:arial, boyutu:20 rengi yeşil olsun

A:Hover: Linklerin üzerine Mouse gelindiğindeki durumu. örneğin Mouse ile linklerin üzerine gelince fontu:arial olsun, boyutu 20 olsun ve rengde turuncu olsun

Not: Linkleri bu şekilde tanımlayarak tüm web sayfamızdaki linkleri tanımlarız.

Refine HTML Tag : Web sayfasında kullanılan HTML Taglarına direk stil tanımlamaları yapabiliriz. örneğin Bir tablo oluşturuyorsak tablonun arka plan rengi tablo içindeki metinlerin tipi gibi bir çok işlemi html taglarına stiller tanımlayarak kullanabiliriz

HTML Tag olarak Table seçtik. Table tag’ına uyguladığımız stiller. Web sayfasında ne kadar tablo oluşturursak tüm tablolarda atanan stil geçerlidir.

Table bacground:yeşil yaptık
Border: çizgi verdik

Make Custom Style(Class) : ismini kendimiz tanımladığımız stiller oluştururuz. amacımıza göre çeşitli isimler altında stiller tanımlarız ve bu stilleri web sayfamızda istediğimiz yerde kullanırız.
Örnek: özel tanımlı stilleri oluşturmak için
1.Metin1 adını verdik
2.Fontunu arial, boyutunu 10 ve kalın yaptık
3.Bu stili web sayfasınız nesrinde kullanacaksak orada bu stili ekleriz.

STİLLERİN WEB SAYFASINA BAĞLANMASI
Web sayfasına Stilleri iki türlü bağlarız
1.Sadece Aktif dokumana bağlanır. <Head> </Head> Tagları arasında tanımlanır.
CSS Style olarak This Document Only seçilir.
ve tanımladığımız stiller head tagları arasında görülür. sadece bu dökümanı etkiler. örneği aşağdaki resim gibi.

2.Önce Stiller uzantısı “CSS” olarak saklanır. sonra tüm sayfalara bağlanır.

a)Sayfalara CSS Dosyasını bağlamak için Text/ CSS Styles/ Attach Stye Sheet komutu çalıştırılır.
b)Gelen pencereden CSS Dosyası seçilir ve ok butonuna tıklanır.
c)Web sayfamızın kod bölümüne aşağıdaki resimdeki gibi bağlantı oluşturunca Dosya içerisindeki tüm dosyalar kullanıma hazır hale getirilir.

alıntıdır