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öGriGGffrmek 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ı

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.

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 uygulamarı yapabileciğ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 so