DREAMWEAVER 8 DERS NOTLARI

 

BAĞLANTILAR (LİNKLER) VE HER BİR SAYFANIN ORTAK STİLİ OLDUĞU

TEMEL BİR SİTE YAPMA

Bu alıştırmada kömür hakkında üç sayfadan oluşan bir site hazırlanacaktır.

1.     Bilgisayarınızda bir yerel site tanımlayın.

A.    Masaüstünde komur isimli bir klasör oluşturun
(masaüstü > sağ tıkla > yeni > klasör > komur)

B.     Dreamweaver programını çalıştırın

C.     Komur klasörünü yerel site olarak Dreamweaver’a tanıtın
Site > Site Yönetimi > Yeni…

D.     Dreamweaver programını kapatın

2.     Siteniz için gerekli metin, resim vs. bilgiler temin edin.

A.    Gerekli metin dosyasını ilgili internet sitesinden, komur klasörünün içine kaydedin.
komur_metin.txt linki> sağ tıkla > hedefi farklı kaydet > masaüstü > komur

B.     komur klasörünün içinde resimler isimli bir klasör oluşturun
komur > sağ tıkla > yeni > klasör > resimler

C.     Gerekli resim dosyasını resimler klasörünün içine kaydedin
arkaplan.jpg linki > sağ tıkla > resmi farklı kaydet > masaüstü > komur > resimler

3.     İlk web sayfalarınızın metin düzenini hazırlayın

A.    Dreamweaver programını çalıştırın: Files panelinde dosyalarınızı görün

B.     Yeni boş belge oluşturun ve index.html ismiyle kaydedin

C.     Dreamweaver programını simge durumuna küçültün

D.     Komur klasörünün içindeki komur_metin.txt dosyasına çift tıklayarak açın

E.     Gerekli kısmı seçin ve sağ tıklayıp kopyalaya basın

F.     Simge durumundaki Dreamweaver:index.html dosyasını açın

G.     Sağ tıklayıp yapıştıra basın

H.    Başlık (Title) kısmına Kömür Ana Sayfa yazın

İ.      Metindeki başlıkları tanımlayın
Properties > Format > Heading 1, 2 vs

J.     Dosyanızı kaydedin
Dosya menüsü > kaydet

K.     Sayfanızı görüntüleyin
F12 veya Preview in Internet Explorer

4.     Diğer web sayfalarınızın metin düzenlerini hazırlayın

A.    Yeni boş dosya oluşturun

B.     Dosyayı komurlesme.html ismiyle kaydedin

C.     komur_metin.txt dosyasında ilgili kısmı kopyalayın

D.     Başlık (Title) kısmına Kömürleşme Olayı yazın

E.     Metindeki başlıkları tanımlayın

F.     Dosyanızı kaydedin

G.     Aynı işlemleri üçüncü dosyanız için tekrar edin
Dosya adı: onemi.html
Başlık: Kömürün Önemi

5.     Sayfalar arasındaki bağlantıları (linkleri) belirleyin

A.    index.html dosyasınında ilgi yere aşağıdakileri yazın
Kömürleşme Olayı | Kömürün Önemi | MTA Genel Müdürlüğü

B.     Kömürleşme Olayı yazısını seçin ve komurlesme.html dosyasına link verin

C.     Kömürün Önemi yazısını seçin ve onemi.html dosyasına link verin

D.     MTA Genel Müdürlüğü yazısını seçin http://www.mta.gov.tr adresine link verin. Bu linkin tıklanıldığında yeni pencerede açılması için Hedefi (target) _blank olarak seçin.

E.     Dosyayı kaydedin, görüntüleyin ve kapatın

6.     Sayfalar arasındaki bağlantıları tanımlamaya devam edin

A.    komurlesme.html dosyasını açın
Açıksa üzerine tıklayın
Kapalıysa Files panelinde üzerine çift tıklayın

B.     İlgili yere aşağıdakileri yazın
Ana Sayfaya Git | Kömürün Önemi | MTA Genel Müdürlüğü

C.     Ana Sayfaya Git yazısını seçin ve index.html dosyasına link verin

D.     Kömürün Önemi yazısını seçin ve onemi.html dosyasına link verin

E.     MTA Genel Müdürlüğü yazısını seçin http://www.mta.gov.tr adresine link verin. Bu linkin tıklanıldığında yeni pencerede açılması için Hedefi (target) _blank olarak seçin.

F.     Dosyayı kaydedin, görüntüleyin ve kapatın

7.     Sayfalar arasındaki bağlantıları tamamlayın

A.    onemi.html dosyasını açın
Açıksa üzerine tıklayın
Kapalıysa Files panelinde üzerine çift tıklayın

B.     İlgili yere aşağıdakileri yazın
Ana Sayfaya Git | Kömürleşme Olayı | MTA Genel Müdürlüğü

C.     Ana Sayfaya Git yazısını seçin ve index.html dosyasına link verin

D.     Kömürleşme Olayı yazısını seçin ve komurlesme.html dosyasına link verin

E.     MTA Genel Müdürlüğü yazısını seçin http://www.mta.gov.tr adresine link verin. Bu linkin tıklanıldığında yeni pencerede açılması için Hedefi (target) _blank olarak seçin.

F.     Dosyayı kaydedin, görüntüleyin ve kapatın

8.     Ana sayfada bir e-posta linki oluşturun

A.    İndex.html dosyasını açın

B.     Sayfanın en sonuna e-posta göndermek için tıklayınız yazın

C.     e-posta göndermek için tıklayınız yazısını seçin ve aşağıdakileri yapın
common > e-mail link > text: e-posta göndermek için tıklayınız > E-Mail: adresiniz@site.com

D.     Dosyayı kaydedin, görüntüleyin ve kapatın

9.     Sayfa içi bağlantı yapın

A.    onemi.html dosyasını açın

B.     Uygun bir yere aşağıdakileri yazın
Sayfadaki Bağlantılar: Kömürün günlük hayattaki önemi | Kömürün oluşumu | Bataklıkların geliştiği ortamlar

C.     Birinci başlığın başına tıklayın burada onem isimli bir yer imi (anchor) oluşturun
common > named anchor > Anchor name: onem

D.     İkinci başlığın başına tıklayın burada olusumu isimli bir yer imi (anchor) oluşturun
common > named anchor > Anchor name: olusumu

E.     Üçüncü başlığın başına tıklayın burada bataklik isimli bir yer imi (anchor) oluşturun
common > named anchor > Anchor name: bataklik

F.     Sayfa içi bağlantılar oluşturun

*         “Kömürün günlük hayattaki önemi” seçin Properties > Link: #onem

*         “Kömürün oluşumu” seçin Properties > Link: #olusumu

*         “Bataklıkların geliştiği ortamlar” seçin Properties > Link: #bataklik

G.     Dosyayı kaydedin, görüntüleyin ve kapatın

10. Bir sayfada dahili stil oluşturun.

A.    İndex.html dosyasını açın

B.     Sayfa özelliklerinde aşağıdakileri tanımlayın
Appearance: Page font, Size, Text color, Background image
Links: Link font, Size, Link color, Rollover color, Visited color, Active color, Underline style
Headings: Heading font, Heading 1, Heading 2

C.     CSS panelini inceleyerek stilinizi görün

D.     Yeni stil öğesi ekleyin
CSS paneli > New CSS rule > Class > Name: vurgu > Background : renk

E.     CSS panelini inceleyerek .vurgu isimli yeni bir stil öğesinin var olfuğunu görün

F.     Herhangi bir metini seçin ve stilini .vurgu olarak ayarlayın
Properties > Style > vurgu

G.     Dosyayı kaydedin ama kapatmayın

11. Dahili stili harici stil yapın

A.    Dahili stil oluşturulan index.html dosyasıdaki stili dahiri yapın
Dosya menüsü > Ver > CSS stili
Dosya Adı: stilim

B.     Files panelinde stilim.css ismiyle bir stil dosyası oluştuğunu görün

C.     Dahili stili silim
CSS paneli > <style> sağ tıkla > Delete

D.     Sayfadaki stilin kaybolduğunu görün

E.     Dosyayı kaydedin, görüntüleyin ve kapatın

12. Harici stil dosyasını kullanarak tüm sayfalarınızdaki stili aynı yapın

A.    Herhangi bir web sayfası dosyanızı Dreamweaver ile açın

B.     CSS panelini açın

C.     Stil dosyasını html dosyasına bağlamak için Attach Style Sheet butonuna basın

D.     stilim.css dosyasını seçin ve OK’e basın

E.     Stilin değiştiğini görün

F.     CSS panelini inceleyerek stilin artık stilim.css olduğunu görün

G.     Diğer dosyalarınızda da aynılarını tekrarlayın

H.    Tüm dosyalarınızı kaydedin, görüntüleyin ve kapatın

İ.      Dreamweaver programını kapatın

13. Web sitenizi kontrol edin

A.    index.html dosyasını normal yolla açın
Masaüstü > komur > index.html: çift tıkla

B.     Web sitenizi inceleyin linklerin çalışıp çalışmadığını bir aksaklık olup olmadığını kontrol edin

C.     Aksaklıkları Dreamweaver programını açarak düzeltin

DERS 5 RESİMLERLE ÇALIŞMAK

Bu derste önce CSS stil kullanmadan sonra CSS stil kullanarak resimler düzenlenecektir.

1.     Arka plan resmi kullanmak

A.    Arkaplan yapma
Properties > Page properties > Appearance > Background image

B.     Arkaplanın sayfada tekrarlanması
Properties > Page properties > Appearance > Repeat
Seçenekler: Repeat-y, Repeat-y, Repeat-y, no-repeat

2.     Sayfaya resim yerleştirmek

A.    Insert tool > Common > Images

B.     Alternate text: Alternatif yazı

3.     Resimleri boyutlandırmak

A.    Sayı girerek boyutlandırma: Resme tıkla > Properties > W ve H (pixel)

B.     Kenardan boyutlandırma: Oran korumak için Shift tuşuna basılı tut

C.     Orijinal boyutuna getirme: Resme tıkla > Properties > W ve H Reset

4.     Resimlerin yerleştirilmesi

A.    Resme tıkla > Properties > Align

5.     Resim etrafına kenarlık ekleme

A.    Resme tıkla > Properties > Border

6.     Resimlere isim atama

A.    Resme tıkla > Properties > Image’nin altı
Türkçe karakter kullanılmaz

7.     Resim yer tutucusu ekleme

A.    Insert tool > Common > Image place holder

8.     Temel resim düzenleme işlemleri

A.    Resme tıkla > Properties > Crop

B.     Resme tıkla > Properties > Birghtness and contrast

C.     Resme tıkla > Properties > Sharpen

9.     Resim tabanlı bağlantılar oluşturmak

A.    Resme tıkla > Properties > Link

10. Resim Haritası oluşturmak

A.    Resme tıkla > Properties > Map > Hot spot

B.     Hot spot alanını belirle

C.     Link, Target, Alt doldur

11. CSS stil kullanarak arka plan resmi kullanmak

A.    CSS Panel > Body > Background > Background image

12. CSS stil kullanarak resimlerin yerleştirilmesi

A.    CSS Panel > New CSS rule > Class > Ad ver: resimstil > Box > Float
Resme tıkla > Page properties > Class > .resimstil

13. CSS stil kullanarak resim etrafına kenarlık ekleme

A.    CSS Panel > .resimstil > Border

14. CSS stil kullanarak resmin etrafındaki boşluğu ayarlama

A.    CSS Panel > .resimstil > Box > Magrin

15. CSS stil kullanarak resmin ile kenarlık arasındaki boşluğu ayarlama

A.    CSS Panel > .resimstil > Box > Padding

 

 

DERS 6: TABLO OLUŞTURMAK

1.     Tablo oluşturmak

A.    Hücre (cell), satır (row), sütun (column)

B.     Görsel düzenleme modları
Insert toll > Layout > Standart*, Layout, Extended

C.     Tablo ekleme
Insert toll > Common > Table
Insert toll > Layout > Table

D.     Eklenen tablonun özellikleri
Rows, Columns, Table width (pixcell, %), Border thickness, Cell padding, Cell spacing, Header

E.     Tablo içine yazı yazma

2.     Tablo seçmek

A.    Etiket seçici: <table>

B.     Köşesine tıklayarak

3.     Tablo hizalamak
Table seç > Properties > Align

4.     Tablo biçimlendirme
Tablo seç > Properties
Bg (arka plan), Brdr (kenarlık), Bg (arka plan resmi), Horz ve Vert (hizalama), W ve H (yükseklik ve genişlik)

5.     Tablo hücrelerini seçmek ve biçimlendirmek

A.    Hücre(ler) seçme
Tıkla veya tara
Etiket seçici: <td>

B.     Satır seçme
Sola tıklama veya Etiket seçici: <tr>

C.     Sütun seçme
Üste tıklama

D.     Biçimlendirme
Bg (arka plan), Brdr (kenarlık), Bg (arka plan resmi), Horz ve Vert (hizalama), W ve H (yükseklik ve genişlik)

E.     Hücre bölme ve birleştirme

F.     Tablo kenarlık ölçülerini kullanma

6.     Tablolarda resim kullanma

7.     Tabloları iç içe yerleştirmek

 

 

DERS 7: MULTİMEDYA BİLEŞENLERİNİ KULLANMAK

1.     Flah metni oluşturmak

A.    Insert Araç Çubuğu > Common > Flash Text: Açılan pencerede gerekli ayarlar yapılır
Save as: metin1.swf (flash dosyası olarak haricen kaydedilir)

B.     Oluşturulan flash metin boyutlandırılabilir

2.     Flash metninde değişiklik yapmak

A.    Flash metnine çift tıkla ilgili değişiklikleri yap

3.     Flash düğmeleri (butonları) eklemek

A.    Insert Araç Çubuğu > Common > Flash Buton: Açılan pencerede gerekli ayarlar yapılır
Save as: buton1.swf (flash dosyası olarak haricen kaydedilir)

B.     Çalıştırmak için Seç > Properties > Play (Durdurmak için: Stop)

4.     Flash düğmelerinde değişiklik yapmak

A.    Stop durumundayken flash butona çift tıkla ilgili değişiklikleri yap

5.     Flash animasyonu eklemek

A.    Insert Araç Çubuğu > Common > Flash
İlgili dosyayı seç > OK

6.     Image viewer’ın (Resim görüntüleyici) kullanılması

A.    Insert Araç Çubuğu > Flash Elements > Image Viewer

B.     Save As (ad ver ve kaydet)

C.     Seç > Properties > Play (Stop)

D.     Seç > Panel > Tag Inspector
frameColor: renk gir; frameShow: Yes; frameThickness: 1
imageURLS > Edit Array Values > İlgili resimleri (sadece jpg uzantılı olanlar) tanımla
+ ile ekle, - ile kaldır
slideOutoPlay: Yes veya No (Sayfa yüklendiğinde otomatik slayt geçişi)
Title: Başlık yaz, transitionsType: Geçiş efekti seç

 

DERS 8: KULLANICI ETKİLEŞİMİ

1.     Bir rollover resmi eklemek

A.    Insert araç çubuğu > Common > Rollover Image

B.     Original image ve Rollover image tanımla

C.     Preload rollover image kutusunu işaretle

D.     When clicked, Go to URL: link ver

2.     Davranış eklemek

A.    Insert araç çubuğu > Common > Image: Resim ekle

B.     Resmi seç > Properties > Ad ver

C.     Etiket seçici > Verdiğin adı seç

D.     Panel > Tag Inspector > Behaviors > + > Swap image

E.     Açılan pencerede: Set Source to - Browse > Resim seç

F.     Paneli incele

3.     Bir olayda birden fazla resim değiştirmek

A.    Sayfada birden çok resim olmalı ve hepsi adlandırılmalıdır

B.     2. aşamadan devam et

C.     Panel > Tag Inspector > Behaviors

D.     “Swap Image” çift tıkla

E.     Images kısmından başka bir resmi seç

F.     Set Source to - Browse > Resim seç

4.     Resim haritalarına davranış eklemek

A.    Bir resim haritası oluştur ve hotspot’ları adlandır (Ders 5-10’a bak)

B.     Bir hotspot seç

C.     2. aşamadaki gibi davranış ekle

5.     Tag Inspector > Behaviors paneliyle çalışmak

A.    Davranış verilmiş bir öğeye tıkla

B.     OnMouseOver ve OnMouseOut seçeneklerini incele

6.     Eylemleri ve olayları düzenlemek

A.    Bir öğe seç

B.