DREAMWEAVER 4.0 DERS NOTLARI

     Dreamweaver: Kod yazmadan Web sayfası tasarımı yapabilen program.
     Dreamweaver 'da kodsuz web tasarımının yanı sıra yine kod yazmadan JavaScript eklentileri, özel butonlar, FTP olayını yapma olayları da mevcuttur.

     Dreamweaver ekranını tanıyalım



Dreamweaver da görünüm ayarları
Izgara ( GRID ) görmek için
VİEW > GRİD bölümünden
     1- Izgaraların görünmesini
     2- Izgaralara Kenetleme
     3- Izgara ayarları yapılır
Cetvel ( RULERS ) çıkartmak için
Bu alanda Dreamweaver ın üstünde ve sol tarafında cetvel belirir.
VİEW > RULERS bölümünden
    1- Görünmesini
    2- Orjin noktasını sıfırlama
    3- Birim değer ayarları yapılır.

Dreamweaver da HTML kod alanını görmek için F10 tuşuna veya Window menüsünden Code Inspector dan gösterilebilir.

Properties Paneli
Bu panel ayar paneli olduğunda her komutta özellikleri değişen bir paneldir. Bu paneli görmek için Ctrl+F3 veya Window menüsünden Properties kısmından çıkartabilirsiniz.

               Şekil 2 : Properties Paneli

Sayfa Özelliklerinin Ayarları

1- Sayfa Başlığı
2- Taban'a resim koymak için
3- Taban'a sadece renk atamak için
4- Sayfadaki yazı ve link renkleri
5- Sayfa marj (boşluk) ayarları
6- Tabana tra transparan resim koymak istediğinizde kullanılır

Dreamweaver da yaptığınız sayfayı anında görmek istiyorsanız F12 tuşuna basın

YAZIYLA ÇALIŞMAK
Yazınızı Dreamweaver normal word de yazar gibi yazabilirsiniz. Fakat boyutlarını, renklerini, link vermeyi properties penceresinden veya üst menüde bulunan TEXT menüsünden yapabiliriz.
Kolay ve çabuk olması açısından properties penceresinden anlatacağız.


Yazı yazmaya başladığınızda properties paneli bu hale gelir.
Biçimlendirmek istediğiniz harfi veya kelimeyi seçiniz.

ÖZEL KARAKTER EKLEMEK İÇİN
Klavyeden giremediğiniz özel karakterle eklemek için
INSERT > CHARACTERS kısmından ekleyebilirsiniz. Bunlarında boyut, renk gibi ayarlarını yapabilirsiniz.

MADDE İMLERİ YERLEŞTİRMEK
TEXT > LIST > ..... kısmından ekleyebilirsiniz.
Otomatik olarak yazdığımız yazının başına sırsı ile rakam veya madde imleri koyar.

BUL ve DEĞİŞTİR
Dreamweaver da bir kelimeyi başka kelimeye dönüştürmek istiyorsanız.
EDIT > FIND AND REPLACE kısmından yapabilirsiniz.

RESİMLERLE ÇALIŞMAK
Resim yerleştirmek
Dreamweaver da sayfamıza iki yerden image (resim) çağırabiliriz.
· INSERT > IMAGE
· Object panelinden

Çağırdığınız resme link atama gibi ayarları kolaylıkla yapabiliriz.
Çağırdığınız resmi seçin (üzerini 1 kez tıklayın ) ve properties panelinin değiştiğini göreceksiniz. Properties paneli ni inceleyelim.

Resim ismi à Objeye isim vermek içim kullanılır
Boyutları à Resmin Genişlik ( W ) ve Yükseklik ( H ) ayarları yapılır.
Resim Yeri à Çağırdığını resmin diskinizde bulunduğu yeri gösterir.
Link à Çağırdığınız resme link vermek
Hizalama à Resmi sayfanıza hizalamak için kullanılır.
Alt yazı à Mouse resmin üzerine geldiğinde çıkan yazı

Target à Target ayarını yapmak için kullanılır.
Border à Resim dış kalınlığı
Edit à Resmi düzenlemek için
Reset size à Boyutlarıyla oynadığınız resmin orijinal boyutuna getirir.
Resim kenar boşlukları à Üstten ( V ) ve Sol taraftan ( H ) boşluk ayarlarını yapar.
Image Map à
Bu özellik bir resim üzerinde 1 den fazla link vermek için kullanılır.

JPEG & GIF : Farkı nedir?
Jpeg: sayısallaştırılmış renkli fotoğraflar için tasarlanmıştır. Milyonlarca renk desteği vardır.
Gif : Hızlı resim alışverişlerde kullanılır. 256 renk desteği vardır.
Not: Bir resimde ne kadar sıkıştırma olursa o kadar bozulur.

Diğer resim ve hareket uzantı karşılaştırması
( * ) Diğerlerini bu uzantılara karşılaştırarak alınacaktır
Yani : 1 mb BMP uzantı --- 70 kb GIF e eşittir.

UZANTI ADI DESTEĞI KALİTE BOYUT
AVI Hareketli Orta 1 Mb ( * )
BMP Resim Orta 1 Mb ( * )
JPG Resim Kötü 200 kb
MOV Hareketli Orta 800 kb
TIF Resim Kaliteli 4,5 Mb
FLC Hareketli Kötü 70 Mb
GIF Resim / Hareketli Kötü 60 kb
DAT Hareketli Kötü 450 kb
MPG Hareketli Kötü 100 kb

ROLLOVER RESİMLER
Rollover: Dreamweaver da 2 tane resim ister . birincisi sayfa yüklendiğinde görülecek olan resim. Diğeri ise mouse üzerine geldiği zamanki resimdir.

Rollover image girmek için
· Insert > Rollover image
· Object Panelinden

Buralardan birinden girdikten sonra çıkan tabloda ayarları yapabilirsiniz.

E- POSTA BAĞI EKLEMEK
Bu olay bir tazıya tıklanınca otomatik olarak bilgisayarda Outlook Express açılır ve mail adresiniz yerini alır.
INSERT > E-mail LINK
Kısmına girdinizde karşınıza gelem tablodan ayarları yapabilirsiniz.


Bu mail olayını resimde denemek istiyorsanız. Resmi seçip Properties Panelinde ki Link kısmına mailto:selcukteknik@hotmail.com yazmanız gerekiyor.

YATAY ÇİZGİ
INSERT > HORIZONTAL RULE
Sayfanın istediğimiz bir yerine sayfa boyunca yatay çizgi koyar.

TABLOLARLA ÇALIŞMAK
Tablolar, daha düzgün objeler yerleştirme (form araçları gibi) , raporlar sunmak için kullanılır.

INSERT > TABLO

ulaşabilirsiniz.
Tablo kısmına girdikten sonra tablo ile ilgili ayarları yapabilirsiniz.

Tablo ekledikten sonra o tablo üzerinde daha sonra değişiklikler yapmak gerekirse Tablo yu seçin Properties Paneline geçiniz.

Bu properties panelinin alt kısmı tabloyu tek tıklayıp seçtiğiniz zaman çıkar. İçerisinde hücre olarak seçtiğinizde properties panelinin alt kısmı değişecektir.

İki veya daha fazla hücre seçince properties panelinin alt kısmı.

Örnek Tablo.

TABLO VERİLERİNİ ÇAĞIRMAK

Dreamweaver 4 u kullanarak, veritabanı veya tablolama dosyalarından karmaşık veri gruplarına karmaşık veri gruplarını bir HTML tablosuna ithal edebilirsiniz. ( Microsoft Excel , Access , Emacs , 4D , Oracle )

Veriyi çağırmak için ; INSERT > TABULAR DATA
Karşımıza gelen tablo;

1- Buradan veri dosyamızı çağırmak için kullanılır.
2- Veri dosyanız, tablo hücreleri arasındaki boşlukları göstermek için noktalama işaretleri kullanılır. Genellikle bu dosya VİRGÜLLE (COMMA) veya SEKMEYLE (TAB); Noktalı Virgül veya İki Nokta Üst Üsteyi de kullanabilirsiniz.
3- Tablo genişliği
Fit to data à otomatik olarak ayarlar. (Verinin Kapladığı alana göre ayarlar)
Set à Genişliği kendimiz ayarlamak için kullanılır.
4- Gelen verinin Cell pad ve Cell Space ayarı
5- Seçtiğiniz veri hücresinde yazının ayarları (kalın, italik)
6- Kenar kalınlık değeri

TABLO VERILERINI IHRAÇ ETMEK
Dreamweaver da yaptığımız tabloları başka programlarda açmak için Export yapmamız gerekiyor. Tablonu içerisini tıklayın ve FILE > EXPORT > EXPORT TABLE yaptıktan sonra karşınıza gelen tablodan ayarları yaptıkdan sonra nereye kaydetmek istediğiniz sorulur ve size CSV uzantılı bir dosya saklar (excel de açabilirsiniz).

TABLO VERILERINI SIRALAMAK
Yaptığınız tabloları istediğiniz türde sırlamaya koyabilirsiniz.
Yinde tablonun içerisini bir kere tıklayın. Daha sonra COMMANDS > SORT TABLE dedikten sonra karşımıza bir tablo gelir.

Birleştirilmiş hücreler bu sıralama esnasında hata verecektir. O yüzden Hücre birleştirme yapmadan sıralama yapınız.

FRAME 'leri KULLANMAK
Frame: Bir pencerenin 2 ve fazla sayfalara bölünmesine frame denir.

Dreamweaver da frameset lerimizi oluşturduktan sonra properties panelinde ayarlarının yapılması.
Frameset ler den birisinin üzerini tıkladıktan sonra properties paneli;

Frame lere isim vermek
Framelere bizim anlayacağımız türden isim vermek bir link esnasında target olayında sorun yaşamamamıza neden olur. Frameset isimlerini WINDOW>FRAMES (SHIFT+F2) kısmından gelen panelden yapabilirsiniz.

FRAMES LER ARASI BAĞLANTI
Frameler genelde kullanım amacı menu kısmın sabit kalıp sürekli olarak ortadaki framelerde sayfaların açılması sağlanır. Böylece Web sayfasından çıkılmadan sitede dolaşma imkanı verir.

Yukarıda belirtilen isimleri dikkate alarak link verme işlemine geçelim.
Öncelikle SOLTARAF kısmına link vermek için bir yazı veya bir buton ekleyelim. Daha sonra eklediğimiz yazı veya butona link verelim. İşte bu linke tıklandığında atanan link ANAFRAME denilen kısımda görülmesi gerekiyor. Bu olayı linkin atamsını yaptığımız properties panelindeki TARGET kısmında ANAFRAME i seçerek yapabiliriz.

Target bölümünün aktif hale gelmesi için önce link atanacak objeye LINK i atamış olmanız gerekiyor.


IFRAME
İnternet Explorer, frame'lerin bir sayfanın içinde görünmesini sağlayan özel <IFRAME> etiketini çıkarttı.

<IFRAME name="tasarim" src="dosya.htm" frameborder=1 height="80%" width=200 scrooling=yes>
Bu sayfadaki görüntü IFRAME'e bir örnektir.
</IFRAME>


İframe kodunun açıklaması:
Name = frame adı
Src = iframe in içerisinde görülecek olan dosya
Frameborder = Dış frame kalınlığı
Height = Yüksekliği
Width = Genişliği
Scroolling = Dosya iframe içerisine sığmadığı zaman kayan çubuğun çıkıp çıkmaması

FORMLAR
Form Araçları ve Özellikleri
Form yaratmak için INSERT>FORM ve INSERT>FORM OBJECTS kısmında ulaşabilirsiniz.
Form : Kullanacağınız diğer form nesnelerini içerisinde tutan form alanıdır. Diğer form elemanlarının çalışabilmesi için form alanının sayfada oluşturulması ve form nesnelerinin bu alan içerisinde olmak gerekir.
Sadece form özellikleri:

ACTION : Form içerisine yerleştirdiğiniz form nesneleri belli bilgiler içerecektir. Action bu bilgileri işleme tabi tutan Server Side uygulamasını tanıtır. Server destekli dosyalar perl,cgi,asp,php uzantılı dosyalardır. Server Side dosyasına ait URL konumunu belirtmek için için, klasör düğmesini tıklayın ve ait olduğu konumu belirtin.

METOD : Form verisini göndermek/almak için kullanılan metotları içerir. Genel olarak form verileri iki tür metot ile gönderilebilir. Bunlardan birincisi GET metodudur. Bu metot ile sınırlı karakter sayısı ile veri gönderilir. POST seçeneğinde ise, daha geniş veriler gönderilip, alınabilir.

Form araçları
Form Araçlarına Ulaşmak için INSERT>FORM ve INSERT>FORM OBJECTS veya Object panelinden Forms kısmına girebilirsiniz.

2- Button
Ziyaretçilerin bir olayı onaylamak için kullanılırlar. 3 çeşit buton vardır.
a. Submit (Gönder) : Formu form işleyicine göndermek için tıkladığınız düğmelerdir.
b. Reset (Sıfırla) : Formdaki girdileri siler ve formu ilk haline geri döndürür.
c. None : Herhangi bir eyleme sahip değillerdir. Ancak JavaScript veya başka bir aktif içerikle birlikte kullanıldığında bir şey yapabilir.

Buton yerleştirdikten sonra butonun üzerine tıklandığında Properties penceresi

3-Radio Button
Formda bir seçenek bölümünde sadece 1 tanesi tıklanması gerekiyorsa (mesela: Cinsiyet sorusunda ) konulacak olan form objesidir. Bir gruptaki radio butonlarının işlemesi için her radio butonun ismini aynı yazmanız gerekiyor.

Radio buton Properties paneli;

4-File Field
Sitenize giren kişinin dosyalarından birine ulaşması için kullanılır. Kullanımı database kodları gerekir. (örn: Hotmail'den bir kişiye dosya göndermek olayının bir bölümü).
Properties penceresinde : İsim (Name), Genişliğini (Width), Max. Karakter sayısı (Max. Chars)
Not: karakter sayısı kısmına değer yazmazsanız sınırsız olur.

5-Hidden Field
Bir formda kullanabileceğiniz bildik öğelerin yanı sıra, koda bazı gizli form alanları da ekleyebilirsiniz. Bu sayede, bazı sabit bilgiler geri kalan verilerle gönderilir.
Web sayfasında gizli alanları görmezsiniz. Ancak kullanıcı formu gönderdiğinde, bu değer de geri kalan verilerle birlikte gider.

6-Text Field
Sitenize giren kişi tarafından yazı girdi birimi olarak kullanılır. Text Field ekledikten sonra üzerine tıklandığında Properties penceresi

a. Single Line: Tek satırlık yazı yazılması için kullanılır.

b. Multi line : Birden fazla satırla yazı yazma alanı

Wrap kısmı text alanındaki scroll (kaydırma çubukları) ayarlar.
Default : sağda ve altta kaydırma çubuğu bulunur.
Off : Kaydırma çubukları olmaz.
Virtual: Sadece sağ taraf da bulunur.
Physic : Sadece altta bulunur.

c. Password: (şifre alanı) Bu kısım tek satırlık yazı alanı oluşturur Fakat içerisine ne yazılırsa yazılsın yıldız ( * ) şeklinde görülür.

7-Check Box
Bu form alanı radio butondan farklı olarak bir grup içerisinde birden fazla seçim için kullanılır.

8-List/Menu
Liste şeklinde bulunan menüdür. Sayfalarda yer tasarrufu sağlamak amacıyla kullanılır. Liste ayarlarını properties penceresinde bulunan List Values kısmında yapılır.

Özellik seçimi: --MENU: Açılacak olan ilk bakıldığında sadece bir tane seçeneği görülen özelliktir.

Özellik seçimi: --LIST : Tüm içeriği ilk bakışta görebileceğimiz hatta birden fazla seçim yapma olanağımız imkanı veren seçenektir.


9-IMAGE FIELD
Form alanına resim yerleştirmek için kullanılır. Ayarları normal image çağırma ile aynıdır.

10-JUMP MENU
List menusune benzeyen fakat birine tıklandığında yönlendirilen internet adresine veya yönlendirilen dosyaya gider.

Jump menu kısmına girince karşımıza gelen pencere;

Macromedia Dreamweaver`ın en büyük özelliği visual yani görsel bir ortamda hatasız ve geniş açılı program yazabilmenizi sağlamasıdır.. Aslında program yazmak için tek satır kod yazmassınız, sadece yapılacak işleri doğru olarak belirlersiniz ve Dreamweaver yapar!.. Macromedia Dreamweaver`ın şu anda ki en iyi web tasarım ve programlama aracı olmasının sebebide budur zaten...

Macromedia Dreamweaver`ın programlama araçları ile kolayca JavaScript kodları yazdırabilirsiniz.. Mesela layerların gizlenip gösterilmesi, status barın değiştirilmesi, sayfadaki grafiklerin rollover yani üstüne gelince değişen hale getirilmesi vs. Behaviors adı verilen pencereden tüm bu JavaScript uygulamalarını yapabilirsiniz. Ayrıca bu JavaScript uygulamalarının listesini browser türüne göre alabilirsiniz.. Mesela Internet Explorer ve Netscape ile çalışacak uygulamaları veya sadece Internet Explorer ile çalışacak uygulamaların gösterilmesine siz karar verebilirsiniz.. Tabii browser sürümleride bu seçebileceğiniz seçenekler arasında..
Dreamweaver`ın CSS (Cascading Style Sheets) aracı ile kolayca sayfa stilleri yani CSS`ler hazırlayabilirsiniz. Ayrıca istediğiniz taktirde yine tek satır kod yazmadan harici stil dosyalarını (*.css) sayfanıza ekleyebilirsiniz.

Behaviors ile Çalışmak:
Behaviors ile JavaScript uygulamaları yapabileceğinizi daha önce söylemiştik.. Peki ne gibi uygulamalar yapabilirsiniz ve Behaviors nasıl kullanılır?... Behaviors penceresini açtığınızda karşınıza aşağıdaki gibi bir pencere gelecektir:

Bu pencerede bulunan "+" butonu ile seçtiğiniz sayfa öğesine uygulama ekleyebilir, "-" butonu ile uygulama çıkarabilirsiniz..

Uygulama eklemek için ilk önce bir sayfa öğesi seçmeniz gerekir.. Mesela link üzerine gelince Status Bar`da bulunan yazının değişmesini istiyorsunuz.. Bunun için ilk önce linki seçin ve daha sonra Behaviors penceresinden "+" yı seçin ve çıkan menüde Set Text menüsünden Set Text of StatusBar`ı seçin..
Daha sonra çıkan dialog kutusunda yeni status bar yazısını yazın ve OK tuşu ile çıkın.. Daha sonra Behaviors penceresine eklediğiniz uygulamanın adı eklenecektir ve bu uygulama adının ortalarında aşağı doğru duran bir ok bulunacaktır. Bu ok yardımı ile Events menüsünü açın ve OnMouseOver`ı seçin.. Böylece linkin üzerine gelince browser statusbarındaki yazı sizin belirlediğiniz yazıya dönüşecektir.

Bu JavaScript uygulamasını silmek istediğiniz taktirde Behaviors penceresinden uygulama ismini seçin ve yukarda bulunan "-" butonuna tıklayın.

Behaviors ile standart olarak gelen uygulamalar şunlardır:

Call JavaScript: Herhangi bir JavaScript fonksiyonunu çağırmanızı ve işlettirmenizi sağlar.
Change Property: Herhangi bir sayfa öğesinin özelliklerini değiştirmenizi sağlar.
Check Browser: Web tarayıcısı için test yapmanızı ve tarayıcıya göre yönlendirme vs. yapmanızı sağlar.
Check Plug-In: Web sayfanızda Flash, Shockwave gibi plug-in gerektiren nesneler ve teknolojiler kullanıyorsanız bu özellik ile ziyaretçinizin plug-inini kontrol ederek sonuca göre muamele yapabilirsiniz. Mesela Flash plug-ini yoksa başka bir sayfaya yönlendirerek uyarıda bulunabilirsiniz...
Control Shockwave or Flash: Check Plug-In özelliğinin sadece Macromedia Shockwave ve Macromedia Flash plug-ini kontrol edebilen versiyonu.. Böyle bir uygulamanın gereksiz yere niye konulduğu ise bilinmiyor!...
Drag Layer: Sayfanızda bulunan layerların yani katmanların sürüklenerek hareket ettirilmesini sağlar. Ayrıca bu özellik sayesinde layerların konumunu istediğiniz işleme göre değiştirebilirsiniz. Mesela bir butona tıklandığında X:22, Y:55 konumunda bulunan layerın konumunu X:66, Y:123 yapabilirsiniz..
GoTo URL: Bu uygulama ile herhangi bir işlem sonucu istediğiniz sayfaya gitmeyi sağlayabilirsiniz... Mesela bir layer drag edildiğinde filanca.asp`ye gitmeyi sağlayabilirsiniz.
Jump Menu: Bu uygulama ile form içinde bulunan drag-drop menüden herhangi bir seçim yapıldığında herhangi bir sayfanın çağırılmasını sağlayabilirsiniz.
Jump Menu Go: Jump Menu uygulamasının özelliğe göre sayfa çağırtan versiyonu...
Open Browser Window: İstediğiniz herhangi bir işleme göre browser penceresi açmanızı sağlar... Ayrıca browser penceresi için sayfa boyu, browser araç çubuğu özellikleri, browser başlığı gibi özelliklerde ayarlamanız mümkün...
Play Sound: Bu uygulama ile herhangi bir istediğiniz işlem sonucu ses dosyasının çalmasını sağlayabilirsiniz. Mesela bir butona veya linke tıklandığında herhangi bir ses dosyasını çalabilirsiniz.
Popup Message: Herhangi bir işlem sonucu sayfada mesaj çıkmasını sağlar.
Preload Images: Sayfa yüklenirken grafiklerin önden yüklenmesini sağlar.. Rollover grafikler için kullanılması tavsiye edilir.
Set Nav Bar Image: Navigasyon barı kullandığınız taktirde bu özellik aktif olabilir.. Bu özellik ile navigasyon barında bulunan grafikleri düzenleyebilirsiniz.
Set Text: Set Text özelliği sayesinde Status Bar (durum çubuğu), Text Field (metin kutusu), Layer (katman), Frame (çerçeve) özelliklerinin metinlerini ayarlayabilirsiniz.. Mesela bir linkin üstüne gelince browserın durum çubuğunda "Tıklayın" yazsın isterseniz Set Text kısmından Status Bar seçerek bunu kolayca yapabilirsiniz.
Show-Hide Layers: Türkçesi katmanları göster/gizle olan bu özellik ile sayfa üstündeki layerları gizleyip gösterebilirsiniz... Mesela açılır kapanır menüleri bu özellik ile kolayca yapabilirsiniz... Veya özelleştirilebilir sitelerde içeriği layerlara oturtarak özelleştirme işini kolay hale getirebilirsiniz.
Swap Image: Bu özellik sayesinde herhangi bir elementin üstüne gelince bir grafiğin değişmesini sağlayabilirsiniz. Mesela bir linkin üzerine gelince bir grafiğin değişerek linkle ilgili açıklama yapmasını sağlayabilirsiniz.
Swap Image Restore: Bu özellik ile swap image kullanılan grafiklerin eski haline dönmesini sağlayabilirsiniz.
Timeline: Dreamweaver`ın Timeline özelliğini yönetmenizi sağlar. Mesela bir butona tıklayınca bir layer için zaman verilmesini ve bu zaman bitiminde layerın gizlenmesini sağlayabilirsiniz.
Validate Form: Form elementlerinin form gönderilmeden hemen önce kontrol edilmesini bu özellik ile sağlayabilirsiniz. Mesela müşterileriniz için bir talep formu yaptınız ve müşterinin e-mail adresini mecburi olarak forma girmesini istiyorsunuz. O halde bu özelliği kullanarak e-mail kısmı girilmediği taktirde hata mesajı çıkarılmasını sağlayabilirsiniz. Ayrıca bu özellik ile e-mailin doğru olup olmadığıda kontrol edilecektir.
Show Events For: İstediğiniz browserı seçerek behaviorsların seçtiğiniz browser ve sürümüne göre gösterilmesini sağlayabilirsiniz.
Get More Behaviors...: Bu seçenek ile Macromedia sitesinde bulunan ilgili bölüme girerek daha fazla behaviors yükleyebilirsiniz... Mesela Nokia WML Editor...

Anasayfa