Dreamweaver MX Giriş

Macromedia'nın diğer MX ürünlerinde kullandığı kolay kullanımlı menüleri ile dikkat çekiyor. Özellikle benim hoşuma giden özellik Insert, Properties gibi menülerin daha derli toplu durması. Böylece sayfada bütün menüler açık olsa bile kolaylıkla çalışma yapabiliyoruz. Fakat sistem ihtiyaçları biraz artmış. Bunun sebebi yeni programlama dillerini desteklemesi; ASP.net, JSP gibi. Programı çalıştırdığımızda aşağıdaki gibi bir ekran görürüz;

Dreamweaver MX ana ekranı
Burada;

1)Program ve görünüm ayarlarını görebilir, dosya işlemlerini yapabiliriz.
2)Yardımcı menüler; Dizayn, kod, ASP uygulamaları, sitemizin dosyaları gibi kısımlar.
3)Insert; ana bileşenler (tablo, resim...) ve diğer bileşenler.
4) Properties; yani özellikler. O an kullandığımız nesnenin özelliklerini buradan değiştiririz.
5)Dizayn için kullandığımız çalışma alanı.

Bu menüleri sayfa içinde istediğimiz yere bağlayabilir kapatabilir, ismini değiştirebiliriz. Yerini değiştirmek için şekildeki yerden mouse ile istediğimiz yere taşıyabiliriz. Kapatmak ve isim
değiştirmek için sağ tuşu kullanabiliriz.

Bu kısım ile kısmını kapatıp açarak daha iyi görüş sağlayabiliriz.

DWmx ana menüleri

Sayfanın HTML kodları ile çalışmayı sağlar.

Aynı anda kodlar ve dizayn ile çalışmayı sağlar. (Kod görünümü View > Design view on top seçeneği ile değişir)

Sadece dizayn ile çalışmayı sağlar.

ASP gibi dillerle çalışırken veritabanı datalarını göstermeyi sağlar.

Sayfayı browserda (Internet explorer) test etmeyi sağlar.

HTML, ASP, Javascript gibi dillerin komutları hakkında bilgi veren pencereyi açar.

Visual aids > tablo, frame, layer çerçevelerini gizler.
Grid > Izgarayı gösterir.
Rulers > Cetveli gösterir.
Title Sayfaya başlık verdiğimiz kısım.

- file menüsü -

New---------------Yeni dosya açar.Burada hazır taslaklardan yararlanabiliriz.
Open---------------Varolan bir dosya açar.
Close---------------Dosyayı kapatır.
Save---------------Dosya kaydeder.
Save As---------------Dosyayı farklı kaydeder.
Save All---------------Açık dosyaların hepsini kaydeder.
Revert---------------Açık olan dosyanın bir önceki düzenlenmiş haline döner.
Print code---------------Yazıcıayarları.
Import---------------Dosya eklemek için. Burada Tabular data > Excel, Word > word dosyası.
Export---------------Dosyayı farklı kaydeder. CSS styles > stil dosyası, Table > Excel dosyası
Convert ---------------Dosyayı eski browserlara uyumlu veya XHTML haline çevirir.
Preview in browser---------------Browserda sayfayı test eder.
Debug in browser---------------Javascript leri browserda kontrol eder.
Check page---------------Sayfanın linklerini ve taglarını kontrol eder.
Design notes---------------Sayfayı yapanın özel notları.
Exit---------------Malum

- edit menüsü -

Undo---------------Yapılan değişikliği geri alır.
Redo---------------Yapılan değişikliği geri getirir.
Cut---------------Seçileni temizleyip kopyalar.
Copy---------------Seçileni kopyalar.
Paste---------------Seçileni yapıştırır.
Clear---------------Seçileni temizler.
Copy HTML---------------Seçileni HTML olarak kaydeder.
Paste HTML---------------Seçileni HTML olarak yapıştırır.
Select All---------------Herşeyi seçer.
Select parent tag---------------İmlecin bulunduğu tagı seçer.
Find and replace---------------Kelime bulmayı ve değiştirmeyi sağlar.
Find next---------------Başka kelimeleri arar.
Goto line---------------Kod ekranında istenilen satıra gitmeyi sağlar.
Show code hints---------------Kodlarla çalışırken imlecin bulunduğu tagın içeriğini listeler.
Edit with...---------------Sayfayı başka bir text editörüyle açmayı sağlar.
Preferences---------------Genel özellikler. Aşağıda genişçe incelenmiştir.

- View menüsü -

Code---------------Kod ekranını getirir.
Design---------------Dizayn ekranını getirir.
Code and design---------------Hem kod hem dizayn ekranını getirir.
Refresh design view---------------Dizayn görüntüsünü günceller.
Design view on top---------------Dizayn görüntüsü en üstte olur.
Live data---------------ASP vb. veritabanı datalarını gösterir.
Head content---------------Head tagları menüsünü getirir.
Table view---------------Tablo görünümlerini değiştirir.
Visual aids---------------Herşeyi seçer.
Code view options---------------İmlecin bulunduğu tagı seçer.
Rulers---------------Kelime bulmayı ve değiştirmeyi sağlar.
Grid---------------Başka kelimeleri arar.
Tracing image---------------Kod ekranında istenilen satıra gitmeyi sağlar.
Plugins---------------Kodlarla çalışırken imlecin bulunduğu tagın içeriğini listeler.
Hide panels---------------Sayfayı başka bir text editörüyle açmayı sağlar.
Toolbars---------------Genel özellikler. Aşağıda genişçe incelenmiştir.

- Insert menüsü -

Yardımcı menülerde Insert kısmında incelenmiştir.

- Modify menüsü -

Page properties---------------Sayfa özelliklerini ayarlamayı sağlar.
template properties---------------Taslak özelliklerini ayarlar.
Selection properties---------------Seçilen kısmın özelliklerini ayarlar.
Edit tag---------------Tag düzenlemek için kullanılır.
Quick tag editor---------------Hızlı tag düzenlemek için.
Make link, link target---------------Link vermek.
Table, frameset,navigation---------------tablo, frame, navigasyon menü
L ibrary---------------Seçileni kütüphaneye ekler.
Timeline---------------Flash ta kullanılan timeline ile aynı.

- Text menüsü -

Sayfa hazırlama bölümünde incelenmiştir.[ileride yazılacak]

- Commands menüsü -

Start recording---------------Klavye ile yapılan hareketleri kaydeder.
Play recording command---------------Kaydedilmiş hareketleri oynatır. Yapılan hareketleri ayrıca History sekmesinde görülebilir.
Edit command list---------------History sekmesinde kaydedilen hareketleri düzenler.
Get more commands---------------Macromedia sitesinden başka hareketler indirir.
Manage extensions---------------Extensionları düzenler.Extension ileride açıklanmıştır.
Apply source formatting---------------Kod ekranında yapılan değişikliği uygular.
Clean up HTML---------------Sayfadaki gereksiz tagları temizler..
Create web photo album---------------Fotoğraf albümü oluşturur.Bu komut için macromedia fireworks gereklidir.
Set color scheme---------------Sayfada kullanmak üzere arkaplan,font,tablo renkleri belirlemeye yarar.
Format table---------------Hazır tablo stilleri seçmeye yarar.
Sort table---------------Tabloları dizmeye yarar.

- Site menüsü -

Site files---------------Sitemizin dosyalarını gösterir.
Site map---------------Sitemizin dosyalarını simgelerle gösterir.
New site---------------Yeni bir site oluşturmayı sağlar.
Edit sites---------------Oluşturulan sitenin özelliklerini ayarlar.
Locate in site---------------Sayfanın sitedeki yerini gösterir.
Reports---------------Siteyi raporlamayı sağlar.

- Window menüsü -

Yardımcı pencereleri açıp/kapar.

1. Dreamweaver Neler Yapabilir?

Web sayfası yapar, bu sayfayı yapmakla da yetinmez onu admin (Sahip) olarak yönetmenize, tek bir tıklamayla yüzlerce sayfayı aynı anda güncellemenizi, internette yayımlamanızı, programlamanızı ve bunun gibi bir çok opsiyonu yerine getirebilmekte yani web tasarımda devrim niteliğinde bir programdır Dreamweaver Mx 2004 programı.

Aslında Göründüğü Kadar Karmaşık Değil!

Dreamweaver programı, web sayfası tasarımına yeni başlamış, deyim yerindeyse tecrübesiz kullanıcıların karmaşık diye tabir ettiği bir yazılım değildir aslında. Programla yeni tanışan çoğu kullanıcı sadece programın ara yüzüne bakarak kullanımının zor olduğuna karar verebilir, ancak durum sanıldığı gibi değil. Program içerisinde her özellik kendine ait bir menü altında yer alıyor ve bu menülere alışmak fazla zamanınızı almıyor. Dreamweaver programının ara yüzü genel olarak üç bölümden oluşuyor. Sağ kısmı tamamen program içerisindeki pencerelerin yer aldığı panel kaplıyor. Alt kısımda ise programın en önemli pencerelerden biri olan ve programda kullanabileceğiniz bütün araçların özelliklerini ayarlamanızı sağlayacak olan properties bölümü bulunuyor. Bu bölümün üst kısmı ise sayfamızın görüntülendiği bölüm olarak ayrılmış. Bunların dışında, çalışmalarımızda kullanacağımız araçların yer aldığı menüler de en üst kısımda bulunuyor.

Dreamweaver'de Bir Sorun Türkçe Konuşamaması. (Ama Dert Değil Bunu da Nasıl Gidereceğimizi Anlatıyorum)

Sayfa içerisinde kullandığınız Türkçe karakterler browser'da(internet Explorer) istediğiniz gibi görünmüyor. Bu problem sizinde tahmin edebileceğiniz gibi ş ve ğ harflerinden kaynaklanıyor. bu olayın olmaması için bir çok yöntem vardır ama ben en basitini anlatayım. İlk olarak edit menüsünden preferences'i tıklayın. Ekran karşınıza gelince sağ taraftaki Default Encoding'ten Other Front Settings'den de Other'ı seçin. Proportional Font'um Times New Roman (Turkish), Fixed Font ve Html Inspector'u Courier New(turkish) yapın. Ok butonuna tıkladıktan sonra Dreamweaver'i kapatıp tekrar açın. Bu yaptıklarınızla artık yaptığınız sayfalarda Türkçe karakterlerde kullanabilirsiniz.

Yazılar, Yazılar, Yazılar…

Dreamweaver yazı özellikleri bakımından diğer web tasarım programlarından daha iyidir. Sayfanızdaki yazıların font ve büyüklüklerini değiştirmeye yarayan özellikler de bazı farklılıklar içerir. Dreamweaver'in yazı özelliklerinin nasıl olduğunu ve daha sonra sizin için uygun olanı seçip ana sayfanızda uygulayınız. Programı çalıştırdığınız zaman file den new'e tıklayın. Boş bir sayfa açılacaktır. Bu sayfanın ortasına bir yazı yazalım mesela isminizi. En alttaki bölüm olan properties bölümünden istediğimiz değişikliği yapabiliriz. "Properties" yukarıdaki ekran karşınıza çıkacaktır. Burada format ile başlayalım. Yazımızın hangi formatlarda olacağını belirler. Font yazımızın hangi fontla yazılması, size yazının büyüklüğünü, style yazının hangi stille yazılacağı, B (yazı kalın), I (yazı italic) altta renk kutucuğu yazı rengini, link yazıya köprü, link yapmamıza olanak sağlar (En önemli olanlar bunlar olduğu için anlattım diğerlerini karıştırarak öğrenebilirsiniz).

Sayfa İle İlgili Özellikler

Sayfamızın özelliklerini sayfa içerisinde sağ tıklayarak Page Properties'i seçmekle işe başlamalısınız. Bu ekran Çok anlaşılırdır. Apperance bölümü bizim bölümüz çünkü en önemli olan ayarlar orada mevcuttur. Sırasıyla page font sayfanın ana fontunu belirlememizi sağlar. Size ise sayfa yazılarının hangi büyüklükte olacağını, text colar sayfamızdaki yazıların ana rengini belirlememizi, Backgroundacolor sayfamızın arka planının ne renk olacağını, Background imege sayfamızın arka planına resim eklememizi sağlar(bunlar en önemlileri diğerlerini deneyerek öğrenmek kolay olur)

Yaptığım Sayfaları Birbirine Nasıl Bağlarım? (Güzel Soru, Kutluyorum ve anlatmaya başlıyorum)

En çok kullanacağınız ve en çokta ihtiyacınız olan link özelliği de budur işte. İki sayfa yapalım ve bunları kayıt edelim. File menüsünden save ile yapabiliriz (tabi ilk sayfayı tasarlarız ondan sonra save deriz. Böyle iki sayfa kayıt edelim. Ve bunları birbirine nasıl bağlarız sorusuna cevap bulalım) Mesela ilk sayfamızda Mağazam diye bir yazı olsun. Bu yazıyı seçerek (mouse'la) properties bölümündeki link'e bağlanacağımız dosyayı yazıyoruz. Yada hedef işaretinin yanındaki klasör resmine tıklayın oradan hangi sayfayı kullanacağınızı seçin. Ve ok tıklayın. F12 tuşuyla deneme yapın göreceksiniz ki sayfalarınız birbirine bağlanmış olacaktır. (yani tıkladığımızda başka sayfaya gitsin diye)

Sayfamıza Mail Adresi Ekleme

E-mai linki eklemek dreamweaver'de farklıdır. En üstteki bölümden insert bölümünden e-mail linkine tıklayın. Ekranda text bölümüne Yazıyı, Email kısmına ise email adresinizi yazın. Ok tıklayın artık sayfanızda bir email linki bile oldu.

Sayfamıza Resim Ekleyelim

Sayfamıza resim eklemek için Objects panelinden Insert Image'e tıklayın. Select Image Source penceresi açılacaktır. Resim eklemek için bu pencereden hangi resmi ekliyeceksek sayfamıza onu seçmeliyiz. Sonra ok tıklayıp sayfamıza geri döneriz. Tabiki resimli haline. Eğer resmimize köprü, başka sayfaya bağlanmasını istiyorsanız Url kısmına hangi sayfaya bağlanacağını yazabilirsiniz.

Resme Link Verme

Önceki konularda nasıl link eklediğimizi söylemiştim ama resme link eklemeyi bir daha açıklık getireyim. Sayfaya resim ekledikten sonra link vermek çok kolay. Zaten dreamweaver'de çoğu işi yapmak çok kolaydır. Yeter ki sabır gösterip işin nasıl yapıldığını deneyin. Resme tek tıkladıktan sonra properties bölümündeki link bölümünü kullanacağız. Resme tıklanınca karşımıza hangi sayfanın gelmesini istiyorsak linkin sağındaki dosya butonuna tıklamanız iyi olacaktır. Hedef dosya ne ise seçip select butonuna tıklayınız. bu durumda resme link vermiş olduk.

Dreamweaver Ve Tablolar

Tabloların bir webmaster için ne anlama geldiğini anlatmam gerekirse profesyonel bir site düşünün kesinlikle bu site tablolar üzerine kurulmuştur. Bir inşaatın temeli inşaat için ne önem taşıyorsa web sitesi içinde tablolar o önemi taşıyor. Tablo eklemek için Objects panelinden Insert table butonuna tıklayalım. Insert table ekranı karşınıza çıkacaktır. Ekranda neler olduğuna ve bizim için önemli olanlara göz atalım. Rows kutucuğu kaç satırlık bir tablo kullanacağımızı, colomns'a ise kolon sayısı yazılacak. Cell padding hücrelerin içindeki yazıların veya resimlerin hücrelerin sol üst köşesinden ne kadar uzaklıkta olacağını, Cell Spacing ise hücrelerin arasında bırakılacak alan boşluğu belirlenir. Tablonun genişliğini Width kısmından, tablonuzda kenar çizgileri olmasını istiyorsunuz border kısmını arttırmanızı sağlar. Bunları yaptıktan sonrada ok tıklayın (bunlar en önemli bilgiler diğerlerini bulabileceğinizi sizde biliyorsunuz artık).

Frame'ler ve Biz!!!

Frame'nin kelime anlamı çerçevedir. Web sayfanızı aynı pencerede gibi değişik bölümlere ayırır. Sayfanızı kaç bölüme ayıracağınızı seçersiniz. Ayırdığınız her birini ayrı ayrı dizayn etmenize olanak sağlar. Bahsettiğim gibi frame'in sitenizi vezirde rezilde edebilir. Frame kullanarak yapılan bir sayfa, en az 3 sayfan oluşur. Bu sayfaların ilki sayfanın anası yani kendisidir, diğer sayfalar ise tek başlarına birer html sayfası olup pencerenin kenarlarıdır. Biraz karışık öyle değimli, Örnek yaparak daha iyi anlayabilirsiniz. Frame'yi evinizin pencerelerine benzetebilirsiniz.

Ne Zaman Frame Kullanmalıyım?

Frame kullanabileceğiniz ilk durum, siteniz çok fazla konu başlığı içermesidir. Çok fazla konu başlığı olması, çok fazla link olması demektir ki bu işlem oldukça uzun sürecektir. Bu durumda bir sayfayı(daha doğrusu frame'nin bir bölümünü)sitenizdeki konu başlıkları sıralamak için kullanabilirsiniz. Sayfanızın kalan bölümlerinde ise sitenizdeki diğer sayfaları gösterebilirisiniz. Sayfalarınızı konularına göre kategorilere ayırırsanız frame kullanmak sizi rahatlatacak, yeni sayfalar ve kategoriler eklemek çok kolay olacaktır.

Dreamweaver'de Frame Tasarımı Ve Rahat Olan Kullanımı

Programdaki en üst öğelerden olan Modify'den Frameset'i izleyerek istediğimiz frame'i seçmektedir.

Böyle bir ekran çıkmaktadır. Böyle dört seçenek gelmelidir. Dört Seçeneği de İnceleyelim mi ne dersiniz bence iyi olur.

1.Split FrameLeft: Sayfanın sol tarafında bir frame oluşturur.
2.Split Frame Right: Sağda bir frame oluşturur.
3.Split Frame Up: Üstte bir Frame oluşturur.
4.Split Frame Down: Altta bir frame oluşturur.

Gördüğünüz gibi bu yöntemle sayfamıza bir frame ekleyebiliriz. Dreamweaver sayfanın kodlarında gerekli değişikliği yaparak sayfada bir frame alanı oluşturur. Oluşan her iki bölümü de istediğiniz gibi düzenleyebilirsiniz. Bu yöntemle iki tane sayfayı frame özelliğiyle yapabilirsiniz ama istediğiniz tasarım bu değilse ne yapabilirsiniz. Buyurun…

İkinci yöntem Frame panelini kullanmaktır. Öncelikle Object panelinden Frame'i seçmelisiniz. Frame paneli değişik frame seçeneklerini sunan bir paneldir. Bu paneli object panelini görüntüledikten sonra sayfanızı hangi frame yapısına göre yapacağınıza karar vermeniz gerekecektir. Karar verdiğiniz frame dizaynına tıklayın ve düzenlemeleri yapın. Ben size burada sitelerde en çok kullanılan yani aşağıdaki şekildeki gibi olan frame'yi açıklayayım ve sizde uygulayın.

Dreamweaver'da Sayfa Özellikleri

Dreamweaver da sayfa özelliklerini ayarlamak için Modify>Page Properties veya Ctrl+J tuş kombinasyonunu Sayfa özellikleri menüsüne ulaşabilirsiniz.

» Title Sayfanızı tanımlayan ismi yazacağınız bölümdür ve browserlarda en üstte çıkar.
» Background İmage Sayfanın arka planını resim eklemek için kullanılır.
» Background Sayfanın arka planını renklendirmek için kullanılır.
» Text Sayfada kullanılan yazıların rengini belirtmek için kullanılır.
» Visited Links Ziyaret edilmiş link rengini değiştirmenize yarar.
» Links Linklerinizin görünen rengini belirler.
» Active Links O anda kullanılan link yani link tıklantıdğı zaman görülen rengi değiştirmek için kullanılır.
» Left Margin Sayfa içerisinde bulunan nesnelerin (yazı, resim, tablo vs.) sayfanın sol tarafına olan uzaklığını belirlemede kullanılır.
» Top Margin Sayfanın üst kenara olan uzaklığını belirlemek için kullanılır.
» Margin Width Sayfanın eni ile ilgili margin ayarları yapmanızı sağlar.
» Margin Height Sayfanın boyu ile ilgili margin ayarları yapmanızı sağlar.
» Document encoding sayfada kullanılacak olan dil karakterinin tanımlaması burada yapılır.
» Tracing İmage anlamı izleyen şekildir. Sadece dreamweaver içerisinde görünen ve tarayıcı içerisinde görünmeyen bir resim ekler sayfanıza.
» İmage Transparancey Tracing image'ın transparan ayarlarını yapmaya yarar

Dreamweaver MX 2004 Yardımcı menüler 3

Font tag ve stil seçimi yapmayı sağlar.

Kalın yazı

Yatık yazı

Daha kalın yazı

Vurgulu yazı

Paragraf vermek için

Satır başı girintisi verir

Başlık 1

Başlık 2

Başlık 3

* Girintili listeleme

1.Numaralı listeleme

Normal listeleme
Kısaltma yazmak için.
Sözcüklerin baş harflerinden oluşan sözcük

Yardımcı menüler - INSERT - Forms

Form - Boş bir form alan ı oluşturur.Bu Dizayn ekranında kırmızı kesik çizgiyle gösterilir.

Text field - Yazı formu ekler.

Textfield---------------Yazı alanının adı.
Char width---------------Yazı alanının genişliği
Max. chars---------------Alan içine yazılabilecek max. karakter sayısı
Type---------------Yazının içeriği
Single line---------------Tek satılık yazı
Multiline---------------Çok satılık yazı
password---------------Parola yazmak için
Init val---------------Alan içindeki bizim yazdığımız yazı

Üstteki textfield örneğinde; charwidth=20, max. chars=20, Type=Single line, Init val="örnek bir textfield"

Hidden field - Gizli yazı formu ekler
Value------------------gizli formun adı
Hidden form genellikle formlarda kullanıcının girmesine gerek olmayan otomatik güncellenen tarih, ID no gibi verileri içerir.

Multiline - Çok satırlı yazı formu ekler
Özellikleri text field ile aynıdır.

Check box - Onay kutusu ekler.

Checked value------------------Onay kutusunun yanına yazılan yazı
Initial state------------------Onaylı veya onaysız hali
Checked------------------Onaylı
Unchecked------------------Onaysız

radio button - Seçim kutusu ekler.
Check box ile aynıdır.

Radio group - Çok sayıda seçim kutusu ekler.
Name------------------grupadı
Radio buttons: seçim kutuları eklemek için "+" silmek için "-" kullanın.
Label------------------Buton yazısı
Value------------------Buton adı
Lay out using------------------Dizilişi belirtir.
Line breaks------------------Satır atlayarak
Table------------------Tablo şeklinde

List/menu - Liste veya seçim menü formuhazırlamayı sağlar.

type------------------Liste veya menü biçimi
List values------------------Listenin elemanlarını girmek için.
Item values------------------Eleman adı
Item label------------------Eleman yazısı
Initially selected ------------------En üstte gösterilecek menü elemanı

Jump menu - Link verilebilir menü oluşturmayı sağlar.

Menu items------------------Menü elemanı
Label------------------Menü yazısı
When selected goto url------------------Elamanı seçince hangi adrese gitsin
Open URls in------------------Açılan sayfayı mevcut sayfada veya frame içinde açar.
Menu name------------------Oluşturduğumuz menünün adı
Insert go button after menu------------------Git butonu oluşturmayı sağlar.Böylece menü elemanını seçince butona basmadan linke gitmez.
Select first item after URL change------------------ilgili adrese gidildikten sonra ilk menü elemanını seçili hale getirir.

Image field - Resimleri buton gibi kullanmayı sağlar.

file field - Diskten dosya seçmeyi sağlar.

File field diskten dosya seçebilme imkanı sağlar

Button - Buton eklemeyi sağlar.

Button name------------------Buton adı
Label------------------Buton yazısı
Action------------------Butona basıldığı an gerçekleşecek işlem
Submit form------------------Formu gerekli işleme sokar.
reset form------------------Form içindeki girilen tüm verileri siler.
None------------------Hiç bir işme yapmaz.

Label - Form içinde çeşitli alanlara isim atamayı sağlar.
Bu, kod ekranında <label>...</label> tagları oluşturur.

Fieldset - Form elementlerindeki mantıksal grupları ifade eder.
Bu, kod ekranında <fieldset><legend>...</fieldset></legend> tagları oluşturur

Dreamweaver MX Sayfa Oluşturma

Eğer Dreamweaver mx 2004 kullanmıyorsanız eski versiyonlarda oluşan Türkçe karakter problemini çözmek için;

1. Encodings dosyasının içindekileri "C:Program FilesMacromediaDreamweaver MXconfigurationEncodings" klasörüne kopyalayın.

2. Programı açIP edit > Preferences > Fonts dan Font settings > Turkish olarak ayarlayın.

3. Yine Edit > Preferences >New document den default encoding > Turkish (1254) veya Turkish ISO olarak ayarlayın. İsterseniz burada Default document type i devamlı çalışacağınız sayfa tipine göre ayarlayabilirsiniz.

Dreamweaver Mx 2004 kullanıcıları 2. adımdan itibaren ayarları yapabilirler.
Öncelikle bir site oluşturalım. Bunun için Site > New site diyoruz. Burada;

1.Kısım: Sitemize bir ad veriyoruz

2.Kısım: Bze server teknolojisini kullanmak isteyip istemediğimiz soruluyor. Bu seçenek daha çok ASP, ASP.net gibi diller için geçerli olduğundan şimdilik hayır diyoruz.

3.Kısım: İlk seçeneği işaretleyip site dosyalarımızın diskte bulunduğu yeri belirtiyoruz.

4.Kısım: "None" seçeneğini seçiyoruz.

Bu işlemlerden sonra sağ taraftaki file penceresi açılıyor. Buradan dosyalarımızı kontrol edebiliriz.
Şimdi ise yeni bir döküman açıp Dizayn ekranında sağ tıklayıp sayfamızın görüntü ayarlarına bakalım.

Title: Sayfamızın başlığı
Background image: Arkaplan için resim koymak için
Background: Arkplan rengi
Text: Yazı rengi
Links: Linklerin sayfadaki rengi
Visited links: Önceden tıklanmış link rengi
Active links: Daha tıklanmamış link rengi
Text Margin: Sayfayı soldan sıfırlar
Top Margin: Sayfayı üstten sıfırlar
Margin weight-height: Sayfa kenar boşluğu
Document Encoding: Dil ayarları
Tracing image: Arkaplana sabit bir resim yerleştirir
Image transparency: Sabir arkaplan renginin görünme miktarı

Bir püf noktası >>> Eğer hep aynı renkleri kullanmak isterseniz;
"C:Program FilesMacromediaDreamweaver MXConfiguration DocumentTypesNewDocuments" klasörü içindeki "default.htm" dosyasınının içeriğini değiştirmelisiniz. Bu dosya her yeni döküman açıldığında çalışan dosyadır.

Sayfaya resim, tablo gibi ne eklersek ekleyelim özelliklerini Properties ekranından ayarlarız. Bu pencere normal halde yazı özelliklerini gösterir. Bu ayarlar;

Format: Yazı fontu
Size: Yazı büyüklüğü
B: Kalın yazı
I: Yatık yazı
Link: Link vermek için
Target: Linkin açılma penceresi
Align(Hizalama) : Yazıyı sola,ortaya, sağa kaydırır
List: Liste oluşturmak için
Indent-outdent (Girinti) : Paragraf girintisi yapar

TABLO EKLEYELİM

simgesini tıkladıktan sonra properties den ayarlamaları yapabiliriz. Tablonun büyüklüğünü mouse ile de ayarlayabiliriz.

Tablolarla çalışırken genişliği yüzde olarak ayarlamak önemlidir. Böylece 800*600 ile 1024*768 çözünürlükte sayfa aynı boyutlarda görülür.

RESİM EKLEYELİM

Resim eklemek için simgesini kullanırız. Çeşitli sayfalarda gördüğümüz resimlerin belli yerine link vermeyi (image map) kullanmak için aşağıdaki logoyu inceleyelim;

Properties den yandaki kareyi seçiyoruz.
Resim üzerinde bir yeri mouse ile seçiyoruz.

Çıkan hotspot menüsünde istediğimiz link adresini yazıyoruz. Yukarıdaki logonun işaretlediğimiz yerine tıklayıp yaptığımız image map i deneyin.

Rollover image ile mouse ile değişen resimler yapabiliriz.

FRAME KULLANALIM

Frameler ile sayfayı bölerek kullanabiliriz. Bu bize ne kazandırır? Örneğin sayfayı ikiye ayırarak sol tarafa sayfamızın menüsünü yerleştiririz. Böylece sol taraf devamlı yüklenmeyecek diğer sayfalarda sağ tarafta açılacak. Genellikle sol-sağ ve sol-sağ-üst şeklinde frameler kullanılır.Daha fazla da bölebiliriz ama kalabalık bir tasarım olur ve olası bir yüklenmeme durumunda görüntü bozulabilir.

Örnek olarak sol frame kullanalım. Mouse ile sol tarafın büyüklüğünü ayarlayabiliriz. Properties den ;

Borders: Aradaki kaydırma çubuğunun durumu
No: Kaydırma çubuğunu göstermez
Yes: Kaydırma çubuğunu gösterir
Default: Sayfanın uzunlunğu büyükse kaydırma çubuğunu gösterir.
Bordercolor: Aradaki çerçevenin rengi
Column: Sol tarafın genişliğini değer olarak girebiliriz.

Daha sonra sol taraftaki frame içinde sağ tıklayarak sayfanın özelliklerini ayarlayabiliriz. Ne kadar frame kullanırsak o kadar sayfa oluşturulur. Bu sayfaları kaydetmek için mevcut frame içinde save frame yapmalıyız. Örneğin örnekteki gibi sol taraftaki frame içinde iken save frame ile sayfayı soltaraf.htm olarak , sağ taraftaki frame içinde save frame ile sayfayı sagtaraf.htm olarak kaydedelim. En son olarakta tüm frameleri kullanacağımız ana sayfayı save ile anasayfa.htm olarak kaydedelim. Artık anasayfa.htm yi çalıştırırsak bu iki frame i kullanabiliriz.

Yeni bir şablon oluşturmak

Öncelikle bir site tanımlaması yapmış olmanız gerekiyor. Daha sonra bu site altında sitenizin genel tasarımını bir HTML dokümanı olarak kaydedin veya hazırlayın. Dokümanı DW içerisinde açarak gerekli düzenlemeleri yapın.

Örneğin ben basit bir site tasarımı yaptım ve tasarımı UstTaraf, Orta ve AltTaraf isimli üç DIV ile birbirinden ayırdım. Tahmin edebileceğiniz gibi UstTaraf'a site başlığı ve ana menüyü yerleştirdim. AltTaraf'a ise yine ufak bir menü ve copyright bilgisi gibi footer bilgilerinin yer aldığı bir şeyler koydum. Orta olarak isimlendirdiğim DIV içerisine de site tasarımını yerleştirebileceğimi düşündüm. Tüm bunları hazırlayıp Orta isimli DIV içerisine girip "İÇERİK BURADA OLACAK" yazdım ve bu dokümanı kaydettim.

Tasarımımızı yapıyor ve kaydediyoruz

Tasarım ile işimizin bittiğini düşündükten sonra File / Save as Template menüsü ile dokümanı bir şablon dosyası olarak kaydediyorum.

File / Save as template menüsü ile şablonumuzu kaydediyoruz

Sitemiz içerisindeki şablonları görüp düzenleyebileceğimiz şablon yönetici açılıyor ve şablonumuza ne simi vermek istediğimizi soruyor. Uygun bir isim verip kaydediyoruz.

Şablonumuza bir isim verip kaydediyoruz

Şablonu kaydederken "Site" kısmında içerisinde çalıştığımız veya bu şablonu eklemek istediğimiz sitenin seçili olduğuna dikkat etmeliyiz. İşlemlerimizi yapıp OK diyoruz ve şablonumuzu kaydediyoruz.

DW bizden "Update Links?" şeklinde bir uyarı mesajı gösterecek. Bu soruya "Evet" diyoruz.

Şablondaki resim ve linklerin düzgün çalışması için Evet diyoruz

Çünkü DW şablon dosyalarını site dizini altında yarattığı "Templates" dizini altında tutuyor ve bu tasarımı oraya taşıyor. Haliyle tasarım içerisinde kullandığımız linklerin yolu veya resimleri "SRC" bilgisi bundan etkileniyor. Bunları DW'ın tekrar düzenleyerek bu şablonu diğer dokümanlara uyguladığımızda DW'ın bunu algılayarak tekrar düzeltebilmesi için bu soruya "Evet" demeliyiz.

Şimdi içeriğin olmasını istediğim yeri yani "İÇERİK BURAYA GELECEK" yazısını seçiyoruz ve Insert / Template Objects / Editable Region (CTRL+ALT+V) menüsü ile seçili alanı editable yani değiştirilebilir bir alan haline getiriyoruz.

Şablonumuza değiştirilebilir bir alan ekliyoruz

Düzenlenebilir alanımız için bir isim giriyoruz ve OK diyerek alanımızı ekliyoruz.

Değiştirilebilir alanımıza bir isim veriyoruz

Fark edeceğiniz gibi değiştirilebilir alanımızın etrafı açık mavi bir çerçeve ile çevrilerek üstünde alana verdiğimiz isim yer aldı. DW içerisinde tasarım görünümünde şablonlarda düzenlenebilir alanları bu ara yüz ile seçebilir ve düzenleyebiliriz.

DW içerisinde değiştirilebilir alanların görünümü

Önceden tanımlı bir değiştirilebilir alanın ismini değiştirmek için alan simi üzerine bir kez tıklayıp Properties panelinden ilgili değişikliği yapabilirsiniz.

Değiştirilebilir alanımızın ismini Properties panelinden değiştirebiliyoruz

Şablon dosyamızı bu şekilde hazırladıktan sonra CTRL+S ile ya da File / Save menüsü ile kaydedip File / New ile yeni bir doküman oluşturuyoruz.

Ardından Modify / Template / Apply template to page menüsü ile bu sayfaya önceden hazırladığımız şablonu uygulamaya başlıyoruz.

Şablonumuzu boş sayfamıza uyguluyoruz

Hangi şablonu sayfaya uygulamak istediğimizi seçtikten sonra "Select" diyerek şablonu sayfamıza uygulayabiliriz.

Uygulayacağımız şablonu seçiyoruz

Burada dikkat etmemiz gereken nokta "Update page when template change" seçeneğinin mutlaka seçili olmasıdır. Eğer bu seçeneği seçmezsek şablon dosyasında yaptığımız değişiklikle bu sayfayı etkilemeyecektir.

Şablonu sayfamıza uyguladıktan sonra şablon dosyasının içeriği sayfamıza yansıyacak ve resimdeki gibi bir görüntü ile karşılaşacağız. Gördüğünüz üzere sadece "orta_icerik" olarak belirtilen değiştirilebilir alanda düzenlemeler yapabiliyor diğer alanlara herhangi bir müdahalede yapamıyoruz. Buda tasarımın şablon haricinde değiştirilmesini ve site tasarımındaki bütünlüğün bozulmasını engellemiş oluyor.

Şablon uygulanmış bir sayfanın DW içerisindeki görünümü

tüm dokümanlara şablon dosyasını uygulayabilirsiniz.

Dreamweaver (DW) ara yüzü belli başlı parçalardan oluşmakta. Bunlar;

Insert panel (Ekle paneli)
Document toolbar (Doküman araç paneli)
Document window (Doküman penceresi)
Panel groups (Panel grupları)
Properties Inspector (özellik yönetgeci)
Tag selector (etiket seçici)

Dreamweaver 8 çalışma ortamı

DW, bizlere ihtiyaçlarımıza göre değiştirilebilir bir çalışma ortamı sunma özelliğine sahip bir editördür. Örneğin DW'ı daha çok kod yazmak için kullanacaksanız bu ara yüzü "Coder" çalışma ortamı olarak seçebilir ve Macromedia'nın eski HTML editörü olan "Home Site" benzeri bir ara yüz elde edebilirsiniz. Onun dışında kurulum ile standart olarak seçili gelen "Designer" çalışma ortamında ise tasarım ihtiyaçlarını karşılayacak bir ara yüze kavuşabilirsiniz.

Çalışma ortamını Window / Workplace Layout menüsü altında yer alan seçenekler ile yapılandırabilirsiniz.

Window / Workplace Layout menüsü ile ara yüzü yapılandırabilirsiniz

Çift monitör ile çalışanlar "Dual Screen" seçeneği ile her iki ortamı da aynı anda kullanabilme şansına sahipler.

Coder ara yüzü ile DW çalışma ortamı

Çalışma ortamı ayarlarını devamlı değiştiren kullanıcılar, Window / Workplace Layout / Save Current menüsü ile bu ayarları kaydedip daha sonra tekrar kullanmak üzere çağırabilirler. Window / Workplace Layout / Manage menüsü ile de önceden tanımlı bu ayarları düzenleyebilirler.

Önceden tanımlı bu ayarları düzenleme penceresi

Bu paneller Dreamweaver’ın (DW) temel ara yüz bileşenlerini oluşturmakla beraber hepsinin kullanımı birbirine oldukça benzemektedir. Bu nedenle bunların çalışma ve işleyiş prensiplerini kavradığınız takdirde DW’ı kullanmak çocuk oyuncağından farksız olmakta. Artık bir standart halini alan bu paneller sürümden sürüme farklılık gösterse dahi temelde aynı mantığı korumaya devam etmektedir.

Örneğin aynı panel bir önceki sürümde farklı bir panel grubuna dahil iken bir sonraki sürümde sadece yeri değişmiş fakat işlevinde herhangi bir değişme olmamıştır.

Makaleyi okurken olurda sizdeki Dreamweaver sürümünde böyle bir panel göremezseniz endişelenmeyin. Makale Dreamweaver 8 baz alınarak kaleme alınmıştır.

Panellerin sağ üst köşelerindeki simgelere tıkladığımızda açılan Panel menülerinden ilgili panele ait tüm işlemleri yapabilmemiz mümkün. Örneğin CSS Styles paneli menüsünden Yeni bir stil yaratabilir ya da var olanları yönetebiliriz. Yine aynı Panel menüleri sayesinde “Group CSS styles with…” seçeneği ile bu panelin başka bir panel gurubu altında yer almasını sağlayabiliriz. Aynı şekilde panelleri sol üst köşelerinden tutup istediğiniz bir yere sürükleyerek çalışma ortamınızı kendinize göre düzenlemeniz de mümkün.

CSS styles paneli

Uzatmadan panel gruplarını incelemeye başlayabiliriz. Bu gruplar CSS Styles, Application, Files, Tag inspector, Layers, Results, History ve Frames dir.

Dreamweaver açtıktan sonra Edit / Preferences... menüsü ile ayarlar kısmını açıyoruz. Bu pencere ile DW'ımıza her türlü ayarı yapabilir ve onu en iyi şekilde yönetebiliriz. Burada görüldüğü üzere kolaylık sağlamak amacı ile özellikler belli guruplara ayrılmış. Şimdi bunları ayrıntılı bir biçimde incelemeye başlayabiliriz.

Genel ayarlar

RESİM DEĞİŞTİRME

Zaman zaman güzel örneklerini gördüğümüz bu resim değiştirmece olayını Dreamweaver ile oldukça kolay yapabilmekteyiz. Rollover resimler konusunda bir resmin üzerine gidildiğinde yerine başka bir resim çıkmasını nasıl yapacağımızı görmüştük. Şimdi ise bir resim ya da linkin üzerine gidildiğinde (veya tıklandığında) başka bir resmin / resimlerin değiştirilmesini göreceğiz. Olayın temelini "Swap Image" isimli Behavior oluşturmakta. Yani rollover resimlerde aslında birer "Swap Image" olayıdır (event) diyebiliriz.

Bu makalede yapacağımız örneğin son halini görmek için buraya, Photoshop dosyasının da dahil olduğu tüm uygulamayı indirmek için buraya tıklayabilirsiniz. Evet, örneği çalıştırdığınızda ne yapmaya çalıştığımızı daha iyi göreceksiniz. Neyse lafı fazla uzatmadan uygulamaya geçelim.

Önce materyalleri hazırlayalım

İşlemlere başlamadan önce grafik dosyalarınızı hazırlamanız gerekmektedir. Ben Photoshop ile basit bir tasarım yapıp "Slice tool" ile resmi dilimlere ayırdım

Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz

Ardından File / Save for web menüsünden kaydedeceğim resim dosyası türünü ve kalitesini belirleyip "Save" düğmesine bastım.

File / Save for web menüsünden çalışmamızı kaydediyoruz

Son olarak dosya kayıt iletişim penceresinde "Kayıt türü" olarak "HTML and images (*.html)" seçeneğini seçip tüm dilimleri (All slices) kaydettim.

Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz

Böylece Photoshop çalışmamızı bir web sayfasına aktarmış olduk. Seçtiğimiz dizinde bir ".html" dokümanı ve "images" klasörü içerisinde de dilimlenmiş olan çalışmamızın grafik dosyaları kaydedilecektir. Sonrasında bu HTML dokümanını DW ile açıp ilgili değişiklikleri yapacağız. Sizde kendi ihtiyacınıza yönelik grafik dosyalarını hazırlayarak konuyu takip edebilirsiniz.

Çalışmamızı Dreamweaver içerisine aktardık

Dokümanı DW ile açtığınızda göreceğiniz üzere Photoshop dilimleri bir tablo içerisinde yerleştirip düzgün görünmesini sağlamaktadır. Bizde bu tabloyu tasarımımızda istediğimiz yere kopyalayabilirsiniz. Kopyala / Yapıştır işlemleri sırasında tablonun ve hücrelerin özelliklerini değiştirip bozmamaya özen göstermelisiniz, aksi takdirde kaymalar olabilir. Beyaz boş dilimleri silerek sayfanın yüklenme boyutunu azaltabilirsiniz, fakat sildiğiniz bu düz beyaz dilimlerin bulunduğu tablo hücrelerinin boyutlarını sildiğiniz dilim boyutu olarak yükseklik ve genişlik cinsinden girmelisiniz. Böylece deformasyonu önleyebilirsiniz.

Eğer tabloyu kopyaladığınız yeni sayfada dilimler arasında boşluklar olursa yeni bir stil yaratıp border, padding, magrin değerlerini 0 (sıfır) olarak girin, font size ve line heidght değerlerini de 1 piksel olarak atayın ve bu stili tabloya uygulayın. Böylece genişlemeleri önlemiş olacaksınız.

Genişlemelere engel olmak için gereken ilgili CSS stili için kaynak kod şu şekilde olmalı:

.TabloIcinStil{
font-size: 1px;
line-height: 1px;
border-collapse: collapse;

margin: 0px;

padding: 0px;
border: 0px;
}

TABLO EKLEMEK

Tabloların anlamını herkes bildiği için sadece DW içerisindeki kullanımlarına değineceğim. Tablolar sayfamızda ziyaretçimize sunmamız gereken düzenli anlamlı veriler için bir nevi konteynır görevi görmektedir. Sayfa tasarımlarımızı doğrudan tablolar ile yapmak da mümkündür fakat yeni web standartları kapsamında sayfa tasarımının temelinde (layout) tablo kullanan ve tasarımını tablolar üzerine oturtan siteler demode siteler olarak sınıflandırılmakta ve bu konudaki otoriteler tarafından kabul görmemektedir. Ayrıntılı bilgiyi W3C nin web sayfasından almanız da mümkün.

Biz burada listeli verileri tablolar ile nasıl kullanıcıya sunabileceğimizi ve DW içerisinde tablolara nasıl hükmedebileceğimizi göreceğiz.

PHP KULLANARAK DOSYA EKLEMEK

Öncelikle aşağıdaki gibi dw ile kullanıcı arayüzü hazırlıyoruz. Biraz kodlama gerektiren bir uygulama olduğu için dw sadece bu arayüzü hazırlamada kullanacağız.

Ekran Görüntüsü

Yukarıda ki resimde form görünümü ve elemanların ayrıntıları mevcut. burada dikkat etmemiz gereken form oluştururken özelliklerinde Enctype kısmını multipart/form-data yapmayı unutmamak.

şimdi gelelim işin kodlama kısmına burayı parça parça anlatma gerekir ise;

ilk olarak post ile gelen dosyayı yakalıyacağız. bunun uzantısına bulup, bu uzantı için izin verilip verilmediğine baktıktan sonra, eğer izin verilmiş ise sunucu yükleme işine geçeceğiz.

Benim hazırlamış olduğum yukarıdaki yukarıdaki form da görmüş olduğunuz gibi bir de isim box ı var eğer buraya değer girilirse yüklenen dosyanın ismi bu olacak eğer girilmez ise script bizim için random bir isim verecektir. burada aslında dosyanın ismini orjinal halinde de bırakabiliriz, bu sadece sizin tercihinize kalmış birşey. Ben örnek olsun diye upload eğer başarılı ise dosyanın ismini db ye de kayıt edicem.

kod bloğuna bakacak olursak . . .

<? if( $_POST['do'] == "yukle") {

$isim = $_POST['isim']; // Formdan gelen dosya için ad. Burada eğer bu değer boş gelirse dosyaya rasgele bir ad verilecek.

if($isim != "") {
$dosya_adi = $isim; }
else {
$dosya_adi='enver_'.rand(1,9999);
}

$uploaddir = 'galeri/'; // Dosyanın yükleneceği dizin.

// UZANTI BULUCU :D

$dadi = $_FILES['dosya']['name']; //POST edilen dosya adı
$parcala_behcet = explode(".",$dadi); //noktadan sonralarını alır
$uzanti = '.'.$parcala_behcet[count($parcala_behcet)-1]; //son...

// UZANTI İZİNLERİ KONTROL EDİLİYOR

if ($uzanti == '.jpg' or $uzanti == '.gif'){
$tmp_name = $_FILES[dosya][tmp_name];
// eğer izin varsa yükleniyor.

$yukle = move_uploaded_file($tmp_name, $uploaddir.$dosya_adi.$uzanti);
}
else
{
echo "<script>alert('Geçersiz Dosya Tipi');window.location.href='upload.php';</script>";
exit();

}

// yükleme işi gerçekleşirse db ye yazılıyor.

if($yukle) {

$resim = $dosya_adi.$uzanti;

$sql = mysql_query("INSERT INTO galeri VALUES ('','$dosya')");

if($sql) { ?>
<span class="style4" id="style4">Dosya Yüklendi Başka Bir Tane Ekle<br />
Yüklenen Dosya : <img src="galeri/<? echo $resim; ?>" border="0" /></span>

<? } } }?>

Görüldüğü gibi basti bir uygulam bunu geliştirmek sadece size kalmış birşey

SİTE TANIMLAMALARI

Dreamweaver'ın proje yönetim sisteminin temeli "Site" kavramı üzerine kuruludur. DW içerisinde her proje siteler olarak tanımlanır ve yönetilir. DW bir web tasarım programı ve geliştirme ortamı olduğuna göre geliştiricilerin böyle bir yöntem seçmeleri oldukça mantıklı olmuş.

DW içerisinde site tanımlamaları yaparak sadece DW'a özel bazı avantajları da kullanabilme şansına sahip olabiliyoruz...

Öte yandan sadece yönetmekle kalmayıp sitemiz ile ilgili gidişatı raporlar halinde bize sunmaktan tutunda siz farkında dahi olmadan değişikliğe uğrayan dosyaları FTP aracılığı ile sunucuya gönderme gibi birçok işlemde bu proje bazlı çalışmaların bizlere kazandırdığı avantajlar arasında yer almakta.

DW içerisinde site tanımlamaları yaparak sadece DW'a özel bazı avantajları da kullanabilme şansına sahip oluyoruz. Örneğin DW konforlu sunucu taraflı projeler geliştirme ortamını kullanmaktan tutunda büyük sitelerde tek tık ile sitedeki bir çok dosyayı güncelleme imkânı sağlayan şablon (template) yönetimine kadar bir çok DW özelliğini kullanabiliyoruz.

DW içerisinde proje yönetimi için "Site" menüsünü kullanacağız. Bu menü ile yeni site tanımlayıp var olan sitelerimizi de yönetme şansına sahibiz.

Site menüsü ile sitelerimiz ile ilgili her türlü işlemi yapabiliriz

Yine aynı menü altında yer alan "Manage Sites" seçeneği ile de önceden tanımlı sitelerimizi yönetebilmemiz mümkün tabi.

Site manager ile yeni site tanımlama ve tanımlıları düzenleme işlemlerini yapabiliriz

Site tanımlama işlemleri esas itibariyle aynı olmasına karşın dinamik ve statik siteler için ufak tefek farklılıklar içermekte. Bu nedenle anlatımı statik, dinamik ve uzak sunucu gibi birkaç ana başlıkta toplamaya çalıştım. Eğer yeni başlayan bir kullanıcı iseniz ve DW'ı sadece tasarım ve HTML düzenleme amacı ile kullanacaksanız, bir diğer deyimle siteniz sunucu taraflı bir programlama dili ihtiva etmiyor ise Statik site tanımlamasını, sunucu taraflı bir proje ise ve/ve ya veritabanı odaklı bazı içerik yönetim sistemleri ile çalışmak istiyorsanız Dinamik site tanımlamasını incelemenizi tavsiye edeceğim. En nihayetinde ister statik isterse de dinamik olsun sitenizi sunucuya göndermek için FTP işlemlerini de DW içerisinde yapmak istiyorsanız ve ya sayfalarınızı test etmek için uzak bir sunucu kullanmak istiyorsanız, Uzak sunucu ayarlarını incelemeniz sizin için faydalı olacaktır.

Dreamweaver, alanının öncüsü bir WYSIWYG (What you see is what you get / Ne görürsen onu alırsın) bir web editör ve geliştirme ortamıdır. Aslında burada HTML editörü demek gelmişti içimden ama sonra Dreamweaver'ın sadece bir HTML editörü olmadığı onunda ötesinde giderek tam bir Framewrok (Geliştirme ortamı) halini aldığı geldi aklıma. Evet her yeni sürümde Dreamweaver bizi biraz daha kendine bağlamakta ve kendini rakipsiz kılmakta.

Genel Dreamweaver ara yüzü

Dreamweaver’ı nereden temin edebilirim

Dreamweaver ticari bir yazılım oluo belli bir ücret karşılığında lisans esaslı satışı yapılmaktadır. Dreamweaver’ı nereden satın alabileceğiniz konusunda daha kapsamlı bilgiyi www.medyasoft.com.tr adresinden alabilirsiniz. İnternet üzerinde bir çok alışveriş sitesinin sanal vitrinlerinde Dreamweaver’ı bulmanız da mümkün.

Dreamweaver ve birçok Adobe ürününün deneme sürümlerini www.adobe.com adresinden temin edebilmeniz de mümkün.

Dreamweaver Neler yapabilir

Dreamweaver; başta HTML düzenleme olmak üzere bir web tasarımcının ihtiyacı olan hemen her konuda ihtiyaçlarına cevap verebilecek donatılara sahiptir. Örneğin basit HTML olayları olarak nitelendirebileceğimiz, tablo, resim, metin flash (swf) ve aklınıza gelebilecek her türlü HTML bileşenini sayfalarımıza görsel bir ara yüz ile ekleyebilme imkanından başka, bu standart HTML bileşenlerine w3c inisiyatifleri içerisindeki geçerli yöntemlerle hükmedebilme, biçimlendirebilme ve sıfırdan yapılandırabilme imkanı sağlamaktadır. Sözgelimi CSS (Cascading Style Sheet) ler ile sayfalarınızdaki elemanları konumlandırabilir renklendirebilir ve biçim düzenlemesi yapabilirsiniz. Bu konuya ileride daha geniş deyineceğiz o yüzden şimdilik hızlı hızlı geçiyorum.

Tablo ekle iletişim penceresi

Bu işin HTML tarafı. Dreamweaver ayrıca Behaviors veya Commands olarak adlandırılabilen ve extensions olarak tabir edilen eklentiler sayesinde sınırı olmaksızın genişleyebilen JavaScript başta olmak üzere güçlü araçlara sahiptir. Bu bahsi geçen araçlar ile sayfalarınızda kolayca açılır menülerden (pop-up menu) fare ile üzerine gidildiğinde değişen resimlere (rollower images) her türlü JavaScript aksiyonunu yapabilmemiz mümkündür.

Behaviors panelinden genel bir görünüş

Dreamweaver’ın yetenekleri bu kadarla da kalmıyor tabi. Dreamweaver’ın web tasarım dünyasına getirdiği en büyük yeniliklerden biri olan Server Behaviors yani Dreamweaver ile sunucu taraflı projeler geliştirme imkânı sağlayan kullanıcı dostu bir ara yüzü de bünyesinde barındırmaktadır. Bu ara yüz birkaç da eklenti yardımı ile oldukça etkileyici işlere imza atabilmektedir. Kayıt giriş, güncelleme ve silme gibi veritabanı işlemlerinden, üyelik sistemi ve kullanıcı yönetimi gibi birçok işlemi bu araçlar ile yapabilmek mümkün. Üstelik herhangi bir programlama bilgisine de ihtiyacınız olmadan bu tür projeler geliştirebilmeniz de muhtemel.

Application paneli ile sunucu taraflı çalışmalar

Aslında programlamanın temellerini bilmeden bu tür işlere girişmek çok ciddi sorunlara yol açmaktadır. Bu nedenle ASP, PHP ya da hangi geliştirme ortamını kullanıyorsanız, en azından bu programlama dillerinin genel çalışma prensiplerini öğrenmek size ilerideki çalışmalarınızda oldukça büyük fayda sağlayacaktır.

Bunlara ek olarak Dreamweaver içerisinde hazır şablonlardan kendi şablonlarınız ile çok sayfalı statik siteleri tek tıklama ile aynı anda güncelleme gibi Template yönetimi, hata düzeltme ve kod geçerlilik kontrolleri gibi yönetimsel araçlarda bulunmaktadır. Dreamweaver bu bahsi geçen işlemleri kendi içerisinde bulunan bir site yöneticisi (Site Manager) ile kolayca erişim ve yine kendi içerisindeki FTP istemci yazılım ile siz farkında bile olmadan sunucuya gönderme imkânı da sağlamaktadır.

Site manager ile projelerinizi yönetmek çok kolay

TEMELLERİ

Dreamweaver (DW) ara yüzü belli başlı parçalardan oluşmakta. Bunlar;

Insert panel (Ekle paneli)
Document toolbar (Doküman araç paneli)
Document window (Doküman penceresi)
Panel groups (Panel grupları)
Properties Inspector (özellik yönetgeci)
Tag selector (etiket seçici)

Dreamweaver 8 çalışma ortamı

Çalışma ortamını Window / Workplace Layout menüsü altında yer alan seçenekler ile yapılandırabilirsiniz.

Window / Workplace Layout menüsü ile ara yüzü yapılandırabilirsiniz

Çift monitör ile çalışanlar "Dual Screen" seçeneği ile her iki ortamı da aynı anda kullanabilme şansına sahipler.

Coder ara yüzü ile DW çalışma ortamı

Önceden tanımlı bu ayarları düzenleme penceresi

Dreamweaver Menuler (Window)

Window Menüsü

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 .

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

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

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

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.

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 .

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

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.

Dreamweaver Menuler (Command,Site)

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.

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

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)

Clean Up Word HTML:

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. 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ı temizleyebilirsiniz.

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

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 .

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.

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.

Dreamweaver Menuler (Text)

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.

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

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

Ordered List: Yazılarımızın başına rakamlar koyabiliriz.

· DreamWeaver

· Flash

· 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.)

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

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

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

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.

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 .

Dreamweaver Menuler (Modify)

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

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.

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.

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.

Dreamweaver Menuler (Insert)

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Dreamweaver Menuler (View)

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

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

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.

Dreamweaver Menuler (File,Edit)

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.

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.

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.

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.

Yeni bir şablon oluşturmak

Önce materyalleri hazırlayalım

Dreamweaver’ı nereden temin edebilirim

Dreamweaver Neler yapabilir

Yeni bir şablon oluşturmak