2 3

hiby

Dreamweawer Dersleri

 

 

Dreamweaver Dersleri (Resimli Anlatım)
Dreamweaver web site tasarlama konusunda alanında en iyi programlardan bir tanesidir. Dreamweaver'la statik web siteleri yapıldığı gibi dinamik web siteleride yapılabilmektedir. Ben bu derslerde, size dreamweaver ı tanıtmayı, dreamweaver la neler yapabileceğinizi görmenizi amaçlıyorum. Bir yararım dokunabilirse ne mutlu bana...: Dreamweaver Dersleri (Resimli Anlatım)

Ders 1: Dreamweaver 'da Yeni Sayfa Açmak ve Sayfayı Kaydetmek

Dreamweaver 'ı açalım.



Sol üst Köşedeki File menüsünden New komutuna tıklayalım.



Sırasıyla Basic Page > HTML yi seçtikten sonra Kırmızı renk ile işaretli olan Create butonuna tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 643x636


Dreamweaver' da sayfamızı açtık şimdi bu sayfayı kaydetmeyi göreceğiz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 643x638


Yine sol üst köşedeki File menüsünden Save komutuna tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 641x639



Dosya adı yazan yere index.html yazdıktan sonra kaydet Butonuna tıklayalım.

Ve sayfa açma ve kaydetme işlemi bu kadar....
 
Ders 3: Dreamweaver da Nasıl Çalışabilirim?: Dreamweaver Dersleri (Resimli Anlatım)

Dreamveaver size istediğiniz gibi bir çalışma ortamı hazırlar.

İsterseniz kod bölümünden , isterseniz design bölümünden sitenizi hazırlayabilirsiniz.

Biz design bölümünden çalışıyoruz. Diğer bölümleride aşagıdan öğrenebilirsiniz.



Kırmızı ile işaretli olan kısma tıklarsanız, yaptığınız sitenin kodlarla yazılmış hali karşınıza gelir, isterseniz buradan değişiklikler yapabilirsiniz.

: Dreamweaver Dersleri (Resimli Anlatım)

Split bölümüne tıklarsanız, hem design, hemde kodlarla çalışabilirsiniz.
 
 
Ders 4: Sayfa Özelliklerini Ayarlamak:

Dreamweaver da sayfa özelliklerini ayarlamak için page Properties bölümü kullanılır.

 
Resimi büyültmek için tıklayın. Orjinal Boyut: 674x641
: Dreamweaver Dersleri (Resimli Anlatım)


Yukarıda kırmızı ile işaretlenmiş page properties butonuna tıklayalım.
: Dreamweaver Dersleri (Resimli Anlatım)
 
Resimi büyültmek için tıklayın. Orjinal Boyut: 675x638


Page properties kısmına tıkladıktan sonra karşımıza yukarıdaki gibi bir pencere gelir. Ben resimdeki sekmeleri numaralandırdım. Tek tek açıklayacağım.

1)Page Font: Sayfa Fontunu belirler.Bu kısma hangi font ismini yazarsanız sayfanızdaki yazılar o yazı tipi ile görünür.

2)Size: Yazı büyüklüğünü belirler.

3)Text Color: Yazı Rengini Belirler.

4)Background Color: Arkaplan Rengini belirler.

5)Background İmage: Arkaplan Resmini Belirler.

6)Repeat: Arkaplan ın tekrar ayarıdır.

7) Sayfanın sağında, solunda , altında ve üstündeki boşlukları ayarlamamıza yardımcı olur.
 
 
 
Ders 5 : Dreamweaver da Siteye Yazı Eklemek:

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x422


Ok işaretiyle gösterilen yer sitemizi tasarlayacağımız yerdir . Yazımızı Buraya yazacağız.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x554
: Dreamweaver Dersleri (Resimli Anlatım)

Yazımızı bu kısıma yazdık, kaydet dedikten sonra browser dan bakabilirsiniz.



Ders 6: Yazdığımız Yazıya Renk Vermek:

Yazdığımız yazıya renk vermek için , öncelikle yazıyı seçelim.

Resimi büyültmek için tıklayın. Orjinal Boyut: 673x619


Seçtikten sonra ok ile işaretli yere tıklayalım. : Dreamweaver Dersleri (Resimli Anlatım)

Tıkladıktan sonra resimdeki gibi renkler gelir.

İstediğiniz Bir rengi seçebilirsiniz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 672x553
: Dreamweaver Dersleri (Resimli Anlatım)

Ve sonunda yazımıza renk verdik.
 
 
Ders 7: Arkaplan' a renk Vermek:

Arka plana renk vermek için Page Properties butonuna tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 673x553


Page Properties penceresi açıldıktan sonra ok ile işaretli kısma tıklayalım.
Dreamweaver Dersleri (Resimli Anlatım)
İstediğimiz Rengin üstüne tıklayalım.

Sonra Kare içine Alınmış "OK" Butonuna tıklayalım..

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x554


Ve arkaplan rengini vermiş olduk.

İşlemimiz Bu kadar...
 

Ders 8: Dreamweaver da Arkaplana Resim Koymak:

Dreamveaver da arkaplan a resim koymak için Page Properties Butonuna tıklıyoruz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 671x551


Kare içine alınmış Browse butonuna tıklıyoruz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 673x553


Arkaplan a koyacağımız resmi seçiyoruz ve kare ile işaretlenmiş OK butonuna tıklıyoruz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 672x553


Resimde de görüldüğü gibi seçtiğimiz resim o kutuya yazıldı.

Sonra OK butonuna Tıklıyoruz.: Dreamweaver Dersleri (Resimli Anlatım)

Resimi büyültmek için tıklayın. Orjinal Boyut: 673x554



Ve arkaplan resmini vermiş bulunuyoruz...

Not:Resmin arkaplanda görünmesi için index.html ile resmimizin aynı klasörde bulunması gerekir . Bu nota dikkat ediniz.
 
 
Ders 9: Sayfaya Resim Eklemek:

Sayfaya resim eklemek için resim ve index.html nin aynı klasörde bulunması gerekir. Aksi taktirde görünmez.

Öncelikle bir klasör açalım.Dreamweaver Dersleri (Resimli Anlatım)

İçine sayfaya Koyacağımız resmi atalım.

Bir index.html açalım.

İndex.html yi açtıktan sonra,

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x650


İnsert Menüsünden İmage Sekmesine tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x652


Açtığımız klasörün içine gelerek resmimizi seçelim.

Sonra kırmızı ile işaretli olan "OK" butonuna tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x650


Kırmızı ile işaretli yere resmin açıklamasını yapabilirsiniz. Eğer yapmak istemiyorsanız "CANCEL" butonuna tıklayabilirsiniz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x766


Resmimizi Ekledik.

Resmi yeniden boyutlandırmak için resmin üstüne bir kez tıklayarak resmimizi seçelim.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x766


Seçtikten Sonra yukarıda resimdeki gibi " W " ve "H" bölümleri görünür.

W:Width(Genişlik)

H:Height(Yükseklik)

tir.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x571


Bu değerlerlerle istediğiniz gibi oynayarak resminizi yeniden boyutlandırabilirsiniz.

Not: İşlemler bittikten sonra File>Save menüsünden kayıt etmeyi unutmayınız.
 

 

 

Ders 10: Yazıya Link Vermek:

Yazıya link vermek için index.html nin yanında yeni bir sayfa açalım.

Ben dreamweaver.html diye bir dosya açtım.

Siz istediğiniz gibi bir dosya açabilirsiniz.
Resimi büyültmek için tıklayın. Orjinal Boyut: 675x573


index.html nin içine dreamweaver sayfası yazalım ve bu yazıyı seçelim.

Kare içine alınmış link bölümü var.

Ordaki dosya işaretine tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 672x570


Dreamweaver.html yi seçelim ve ok butonuna basalım: Dreamweaver Dersleri (Resimli Anlatım)

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x573


Gördüğünüz gibi link vermiş bulunuyoruz.: Dreamweaver Dersleri (Resimli Anlatım)

Link verdikten sonra dosyayı kaydedelim.

Resimi büyültmek için tıklayın. Orjinal Boyut: 676x573


Kaydettikten sonra Browser a dönerek linkin çalışıp çalışmadığını kontrol edelim.



Linke Tıklayalım:



Dreamweaver.html dosyası geldi.

Link çalışıyor.
 
Ders 11: Resme Link Vermek:

Resme link vermek için index.html nin içine resmimizi atalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x573


Resmimizin üstüne 1 kere tıklayarak resmimizi seçelim.

Resimi büyültmek için tıklayın. Orjinal Boyut: 676x573


Yine link bölümündeki dosyaya tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x572
Dreamweaver Dersleri (Resimli Anlatım) Dreamweaver Dersleri (Resimli Anlatım)

Dreamweaver.html yi seçelim, ok butonuna basalım.

Sonra dosyayı Kaydedelim.

Sonra browser dan çalışıp çalışmadığını kontrol edelim.



Resme Tıklayalım.




Ve resme link verme işlemi bu kadar...
 
Ders 12: Dreamweaver da Tablolarla Çalışmak:i

Tablolar, web tasarımında kullanılan en büyük etmenlerden biridir. Çoğu web siteleri web sitelerini tasarlarken tabloları kullanır. Bu derste dreamweaver da tabloların özelliklerini göreceğiz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x573


İnsert Menüsünden Table sekmesine Tıklıyoruz.

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x574


Yukarıdaki özellikleri numaralandırdım.

Şimdi onları tek tek açıklayalım.

1)Rows(Sutunlar): Tablomuzun kaç sutundan oluşacağını belirtir.

2)Columns(Satırlar):Tablomuzun kaç satırdan oluşacağını belirtir.

3)Table width(Tablo Genişliği): Tablonun genişliğinin kaç pixel oldugunu ayarlar.

4)Percent/Px: Percent ı seçersek, yüzde olarak algılanır. Px i seçersek normal pixel olarak algılanır.

5)Border Thickness:Tablo kenarlıklarının iki renkten olusması ve bunların büyüklüğünün ayarlanmasıdır.

6)Cellpadding:Tabloların içine yerleştirilen nesnelerle tablo kenarlıkları arasındaki boşlugu belirtir.

7)CellSpacing:Tablonun kenarlıkları arasındaki boşluğu ayarlamamıza yardımcı olur.

Bu ayarları resimdeki gibi yapıp ok butonuna basalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x574
: Dreamweaver Dersleri (Resimli Anlatım)

Tablomuz, iki satır , bir sutun olarak eklendi.

Şimdi Properties bölümünden birkaç değişiklik yapalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 676x573


Resimdeki gibi numaralandırdım. Tek tek açıklayalım.

1 ) Width(Genişlik): Tablonun genişliğini belirler.

2 ) Height(Yükseklik):Tablonun yüksekliğini belirler.

3) Align:Tablonun Nerede duracağını belirler (Sağ sol orta gibi)

4)Border(Kenarlık):Kenarlık kalınlığını belirler.

5)Bg Color(Arkaplan Rengi): Tablonun arkaplan rengini belirler.

6)Border Color(Kenarlık Rengi):Kenarlıkların rengini belirler.

7)Bg İmageArkaplan Resmi):Tablonun arkaplan resmini belirler.

Resimi büyültmek için tıklayın. Orjinal Boyut: 676x572



Resimdeki gibi biraz oynadım. Sizde kendiniz oynayabilir neyin ne olduğunu görebilirsiniz.

Tabloyu browser da görmek için file>save yapıp browser ı açmanız yeterli olacaktır.

 

Ders 13: Sayfaya Müzik Eklemek:: Dreamweaver Dersleri (Resimli Anlatım)

Dreamweaver de eklediğimiz müzikler media player aracılığıyla browser da çalınır.

Öncelikle index.html nin bulunduğu klasörün içine müziğimizi atalım.

 

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x571



İnsert Menüsünden Media > Plugin sekmesine Tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x570



müziğimizi seçip Ok a tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x571


Şu anda plugin i ekledik . Şimdi media player ı boyutlandıralım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x572

: Dreamweaver Dersleri (Resimli Anlatım)

Kare ile işaretlendiği gibi width=300 , height=45 yapınız.



Browser ı Açtığımızda şekildeki gibi görünür ve otomatik çalmaya başlar.

Sayfaya Müzik ekleme işlemi bu Kadar.

 

Ders 14: Sayfaya Video Eklemek:

Sayfaya video Eklemek İçin müzik ekleme ile aynı işlemler kullanılır.

Yine eklenecek videoyu index.html ile aynı klasöre atalım.: Dreamweaver Dersleri (Resimli Anlatım)

 

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x571


Yine İnsert > Media > Plugin sekmesine tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 673x571

: Dreamweaver Dersleri (Resimli Anlatım)
Video muzu seçip OK butonuna tıklayalım.
Resimi büyültmek için tıklayın. Orjinal Boyut: 674x573


Width ve Height ı kendinize göre ayarlayınız.

Son Görünüm:



Şeklinde Olur.

Ders 15 : Sayfaya Flash Eklemek:

Sayfaya flash eklemek için ; Dreamweaver Dersleri (Resimli Anlatım)
Resimi büyültmek için tıklayın. Orjinal Boyut: 676x573


İnsert > Media > Flash sekmesine tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x571


Swf dosyasını seçtikten sonra ok butonuna tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x570
: Dreamweaver Dersleri (Resimli Anlatım)

Flash dosyasına acıklama ekleyelim.

Resimi büyültmek için tıklayın. Orjinal Boyut: 673x570


Kaydedelim.

Son görünüm:

Resimi büyültmek için tıklayın. Orjinal Boyut: 772x469


Şeklinde Olmalıdır.
 
Ders 16 : Dreamweaver'da Arama yapmak:

Dreamweaver da aradığınız bir yazıyı bulmak için;

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x573
: Dreamweaver Dersleri (Resimli Anlatım)

Edit menüsünden Find And Replace komutuna tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x574
: Dreamweaver Dersleri (Resimli Anlatım)

Find yazılan yere arayacagımız kelimeyi yazıp find next butonuna basalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x571


Ve gördüğünüz gibi seçerek gösterdi.

Find all butonuna tıklarsak bütün Dreamweaver yazılarını seçer.
Ders 17: Linki Yeni Pencerede Açmak:

Linki yeni pencerede açmak için yazıya normal olarak link verelim.
Resimi büyültmek için tıklayın. Orjinal Boyut: 674x607


Link verip ok butonuna tıkladıktan sonra;

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x608



Link kısmının altında bulunan Target bölümüne tıklayalım.

"_blank" sekmesini seçelim.: Dreamweaver Dersleri (Resimli Anlatım)

Seçtikten sonra sayfayı kaydedip browserdan bakabilirsiniz

 

 

Ders 18: Dreamweaver da Pop up Pencere Yapımı:

Dreamweaver da pop up pencere yapmak için önce link verelim ve link yazan yere " # " işaretini koyalım.

 

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x609


Bu işareti koyduktan sonra Dreamweaver yazımızı seçelim ve Behaviors panelinden , Open Browser Window sekmesine tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x607


Aşağıdaki gibi bir pencere açılır,

Resimi büyültmek için tıklayın. Orjinal Boyut: 675x610
: Dreamweaver Dersleri (Resimli Anlatım)


Browse ' a tıklayalım.

Resimi büyültmek için tıklayın. Orjinal Boyut: 674x608


Browse a tıklayıp dreamweaver.html yi (pop up pencerede açılacak dosya) seçelim.: Dreamweaver Dersleri (Resimli Anlatım)

Window width (Pencere genişligi)kısmını ayarlayalım

Window height (Pencere yüksekliği) kısmını ayarlayalım.

Ok butonuna basalım.

Sayfayı kaydedelim.



Ve dreamweaver yazısına tıkladığımız zaman dreamweaver.html dosyası yeni bir pencere içinde açılmıştır.

 

 
Alıntı olan ders yerleride var emeğe saygı umarım yararı dokunur...
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol