hiby
Dreamweawer Dersleri
|
 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.
 Dreamweaver' da sayfamızı açtık şimdi bu sayfayı kaydetmeyi göreceğiz.
 Yine sol üst köşedeki File menüsünden Save komutuna tıklayalım.
 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?:
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.  : 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.
 : Yukarıda kırmızı ile işaretlenmiş page properties butonuna tıklayalım. :
 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:
 Ok işaretiyle gösterilen yer sitemizi tasarlayacağımız yerdir . Yazımızı Buraya yazacağız.
 : 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.
 Seçtikten sonra ok ile işaretli yere tıklayalım. : Tıkladıktan sonra resimdeki gibi renkler gelir. İstediğiniz Bir rengi seçebilirsiniz.
 : 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.
 Page Properties penceresi açıldıktan sonra ok ile işaretli kısma tıklayalım. İstediğimiz Rengin üstüne tıklayalım. Sonra Kare içine Alınmış "OK" Butonuna tıklayalım..
 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.
 Kare içine alınmış Browse butonuna tıklıyoruz.
 Arkaplan a koyacağımız resmi seçiyoruz ve kare ile işaretlenmiş OK butonuna tıklıyoruz.
 Resimde de görüldüğü gibi seçtiğimiz resim o kutuya yazıldı. Sonra OK butonuna Tıklıyoruz.:
 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. İçine sayfaya Koyacağımız resmi atalım. Bir index.html açalım. İndex.html yi açtıktan sonra,
 İnsert Menüsünden İmage Sekmesine tıklayalım.
 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.
 Kırmızı ile işaretli yere resmin açıklamasını yapabilirsiniz. Eğer yapmak istemiyorsanız "CANCEL" butonuna tıklayabilirsiniz.
 Resmimizi Ekledik. Resmi yeniden boyutlandırmak için resmin üstüne bir kez tıklayarak resmimizi seçelim.
 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.
 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.
 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.
 Dreamweaver.html yi seçelim ve ok butonuna basalım:
 Gördüğünüz gibi link vermiş bulunuyoruz.: Link verdikten sonra dosyayı kaydedelim.
 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:
Ders 12: Dreamweaver da Tablolarla Çalışmak:iResme link vermek için index.html nin içine resmimizi atalım.
 Resmimizin üstüne 1 kere tıklayarak resmimizi seçelim.
 Yine link bölümündeki dosyaya tıklayalı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... 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.
 İnsert Menüsünden Table sekmesine Tıklıyoruz.
 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.
 : Tablomuz, iki satır , bir sutun olarak eklendi. Şimdi Properties bölümünden birkaç değişiklik yapalım.
 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.
Ders 13: Sayfaya Müzik Eklemek::
 İnsert Menüsünden Media > Plugin sekmesine Tıklayalım.
 müziğimizi seçip Ok a tıklayalım.
 Şu anda plugin i ekledik . Şimdi media player ı boyutlandıralım.
Ders 14: Sayfaya Video Eklemek:
Yine İnsert > Media > Plugin sekmesine tıklayalım.
 : Video muzu seçip OK butonuna tıklayalım.
 Width ve Height ı kendinize göre ayarlayınız. Son Görünüm:  Şeklinde Olur. Ders 15 : Sayfaya Flash Eklemek:
Ders 16 : Dreamweaver'da Arama yapmak:Sayfaya flash eklemek için ;
 İnsert > Media > Flash sekmesine tıklayalım.
 Swf dosyasını seçtikten sonra ok butonuna tıklayalım.
 : Flash dosyasına acıklama ekleyelim.
 Kaydedelim. Son görünüm:
 Şeklinde Olmalıdır. Dreamweaver da aradığınız bir yazıyı bulmak için;
 : Edit menüsünden Find And Replace komutuna tıklayalım.
 : Find yazılan yere arayacagımız kelimeyi yazıp find next butonuna basalım.
 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.
 Link verip ok butonuna tıkladıktan sonra;
Ders 18: Dreamweaver da Pop up Pencere Yapımı:
 Bu işareti koyduktan sonra Dreamweaver yazımızı seçelim ve Behaviors panelinden , Open Browser Window sekmesine tıklayalım.
 Aşağıdaki gibi bir pencere açılır,
 : Browse ' a tıklayalım.
 Browse a tıklayıp dreamweaver.html yi (pop up pencerede açılacak dosya) seçelim.: 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.
|
