Dreamweaver 8

Çalışma alanı yerleşimi
Dreamweaver 8
Windows’ta, bütün işlemlerin tek pencereden
yapıldığı bir entegre yerleşim sunmaktadır.
Bu entegre çalışma alanında, bütün
pencereler ve paneller tek bir büyük
uygulama penceresinde toplanmıştır.
Ders Notları
Doküman Penceresi (Document window)
Tasarım Görümü (Design view): Sayfa
yerleşiminin görsel olarak yapılmasını ve
uygulamaların hızla geliştirilmesini sağlayan
bir tasarım ortamıdır.
Kod Görünümü (Code view) :Bu görünümde
sadece sayfa kodları gösterilmektedir.
Notepad’te sayfa geliştirmeye benzemektedir.
Kod ve Tasarım Görünümü (Code and
Design view): Aynı anda hem kod sayfasını
hem de sayfanın gerçek görünümünü
göstermektedir.
1
Doküman Araç çubuğu (Document toolbar)
Sunucu Hata Ayıklama (Server Debug):
Cold fusion sayfasındaki hataları göstermek
için kullanılmaktadır.
Doküman Başlığı (Document Title) Web
tarayıcısının başlık çubuğunda gösterilecek
başlığı girmek için kullanılmaktadır.
No Browser/Check Errors: Farklı
tarayıcılarda sayfanın problemsiz çalışıp
çalışmadığını test etmek için kullanılmaktadır.
Yazımı Kontrol Et (Validate Markup):
Mevcut dokümanı ya da seçili tag’ın doğru
yazılıp yazılmadığını kontrol etmekte
kullanılır.
Dosya Yönetimi (File Management):
Dosyaları yönetmekte kullanılan pencereyi
açar.
Önizleme(Preview/Debug in Browser):
Hazırlanan sayfanın tarayıcıdaki
önizlemesinin alınmasını sağlamaktadır.
Tasarım Görünümünü Yenile (Refresh
Design View): Sayfa kodlamasında yapılan
değişikliğin tasarım görünümüne yansımasını
sağlamakta kullanılır.
Seçenekleri Görüntüle(View Options) Kod
görünümü ve tasarım görünü için gerekli
özelliklerin ayarlanmasını sağlar.
Görsel Yardımcılar (Visual Aids) Web
sayfası geliştirilirken kullanılabilecek görsel
yardımcıları gösterir.
2
Durum Çubuğu (Status bar )
Tag Seçici (The tag selector): Seçili tag için
tag hiyerarşisini göstermektedir.
El Aracı (The Hand tool): Bir dokümanı
seçilip, dokuman penceresine atılmasında
kullanılır.
Yaklaşma Aracı(The Zoom tool):
Dokümanın yaklaştırma seçeneklerini belirler.
Pencere Boyutu (The Window Size popup): Web sayfasını istediğiniz şekilde
boyutlandırmakta kullanılmaktadır.
Ekleme Çubuğu (Insert bar )
HTML Kategorisi (The HTML category): hr,
Genel Kategori (The Common category) Çok
kullanılan elemanların sayfaya eklenmesinde
kullanılmaktadır.
Yerleşim Kategorisi (The Layout category):
Sayfaya tablo, div tagı, katman ve çerçeve
eklemekte kullanılmaktadır.
Form Kategorisi (The Forms category): form
oluşturmada kullanılacak elemanları içermektedir.
Yazı Kategorisi (The Text category): Yazının
şekillendirilmesinde kullanılacak tagleri içermektedir.
head, tablolar, frameler ve scriptlerin
eklenmesi için kullanılmaktadır.
Sunucu Kodu Kategorisi (Server-code
categories): ASP, ASP.NET, CFML Basic,
CFML Flow, CFML Advanced, JSP, and PHP
gibi benzer dillerin kodlarının eklenmesinde
kullanılmaktadır.
Uygulama Kategorisi (The Application
category): Dinamik sayfa elemanlarının
eklenmesinde kullanılmaktadır.
3
Kodlama Araç çubuğu (Coding Toolbar)
Flash Elemanları Kategorisi (The Flash
elements category) Sayfaya flash elemanı
eklemekte kullanılmaktadır.
En Çok Kullanılanlar Kategorisi (The
Favorites category) Ekleme çubuğunda
sizin en çok kullandığınız elemanları
seçebildiğiniz bir seçenek sunar.
Kodlama yaparken kullanabileceğiniz
kısayolları içeren bir araç çubuğudur. Kod
görünümünü kullandığınızda ortaya çıkar.
Özellik Penceresi (Property inspector)
Dreamweaver siteleri
Seçili tag için genel özelliklerin incelenmesi,
Dreamweaver’da, site terimi bir web sitesini
görsel olarak değiştirilmesi için kullanılan bir
penceredir.
Örneğin bir resim seçildiğinde özellikler
penceresinde o resimle ilgili genel özellikler
gösterilmektedir.
ya da o web sitesi ile ilgili yerel bir klasörü
anlatmakta kullanılmaktadır.
Bir site üç bileşenden oluşmaktadır. Yerel
klasör, uzak klasör ve dinamik sayfalar için
klasör.
4
Proje dosyalarının hazırlanması
Yerel Klasör (Local folder): Çalışılan
klasöre yerel klasör denmektedir. Genellikle
bilgisayarınızdaki HDD bulunan klasördür.
Uzak Klasör (Remote folder): Dosyalarınızı,
test, üretim ve yayınlama için sakladığınız
klasördür. Bu klasör web sunucusu üzerinde
bulunmaktadır.
Dinamik Sayfalar için Klasör(Folder for
dynamic pages): Dreamweaver bu klasörü
dinamik sayları test etmekte kullanır.
Genellikle uzak klasör ile aynı klasördür.
1. Hard diskinizde local_sites isimli bir klasör
yaratın.
2. C:\Program Files\Macromedia\Dreamweaver
8\Tutorial_assets\cafe_townsend klasörünü
bulun.
3. cafe_townsend klasörünü, hard diskinizde
yarattığınız local_sites klasörünün içine
kopyalayın. Bu klasörü kök klasör olarak
kullanacağız.
Yerel Klasörün Tanımlanması
Her web sayfası için bir yerel klasör
tanımlanması gerekmektedir.
Bu klasörde çalışan sayfanın birer kopyası
saklanmaktadır. Eğer yerel klasör
tanımlanmazsa bazı özellikler kullanılamaz
hale gelir.
1. Dreamweaver’ı çalıştırın. Site menüsünden
Manage Sites (Siteleri Yönet) komutunu
çalıştırın. Manage Sites diyalog kutusu
açılacaktır.
2. Yeni butonuna tıklayın ve Site seçin. Site
Definition (site tanımlama) diyalog kutusu
açılacaktır.
3. Açılan sihirbazda, Advanced tabını seçiniz.
Category listesinden Local infoyu tıklayınız.
4. Site ismi text kutusuna (Site Name)Cafe
Townsend yazınız.
5
Local Root Folder (Yerel Kök Klasör) metin
kutusunda, local_sites klasörü içine kopyaladığınız
cafe_townsend klasörünü gösteriniz.
6. Varsayılan resimler klasörü (Default Images Folder)
metin kutusuna cafe_townsend klasörü içindeki
images klasörü olarak gösteriniz.
7. OK’yi tıklayınız.
8. Siteleri yönet (Manage Sites) diyalog kutusunu
kapatmak için Done butonuna tıklayınız.
5.
Böylece web sayfası için yerel kök klasör
tanımlanmış oldu.
Web sitemizde yayınlanan dosyaların çalışan
bir kopyaları bu klasör içinde saklanacaktır.
Daha sonrasında bu sayfaları yayınlamaya
karar verirseniz, bir uzak klasör tanımlanması
gerekmektedir. Bu uzak klasör ise bir web
sunucusu üzerinde bulunmalıdır.
6
Examine the design comp
Genellikle, web sayfası tasarımına
Dreamweaveri açığ doğrudan başlanmaz.
Web tasarımının ilk adımı bir kağıt üzerinde
ya da photoshop gibi bir grafik uygulaması ile
sayfa tasarımının yapılmasıdır.
Dreamweaver’da, File > New seçilir.
Genel tabının yeni doküman (New Document)
diyalog kutusundan, kategori listesinden temel sayfa
(Basic Page) seçilir. Ardından temel sayfa
listesinden de HTML seçilir ve oluştur (Create)
butonuna tıklanır.
3. File > Save As komutu verilir.
4. Farklı kaydet (Save As) diyalog kutusunda, yerel
kök klasörde tanımlanan cafe_townsend klasörü
seçilir.
5. Dosya ismi yerine index.html yazınız ve
kaydediniz.
1.
2.
6. Doküman başlığı kısmına Cafe Townsend
metinini girin.
7. File > Save komutu ile yaptığınız değişikliği
kaydedin.
7
Insert tables
1. Web sayfası üzerinde sol üst köşeye
tıklayarak bir ekleme noktası oluşturun.
2. Ekle menüsünden tabloyu seçin. Insert >
Table.
3.
Açılan tablo ekle (Insert Table) diyalog kutusuna
aşağıda değerleri giriniz.
Satır (Rows) metin kutusuna 3 girin.
Sütun (Columns) metin kutusuna 1 girin.
Tablo genişliği (Table Width) metin kutusuna 700
girin.
Tablo genişliği pop-up menüsünden pixel’i seçin.
Kenarlık kalınlığı (Border Thickness) metin kutusuna
0 girin.
Cell Padding metin kutusuna 0 girin.
Cell Spacing metin kutusuna 0 girin.
4. Tamamı tıklayın.
Aşağıda verilen şekle benzer bir görünüm elde
edeceksiniz.
8
5.
6.
7.
3.
Tablo seçimini bırakmak için tablonun sağında bir yere
tıklayınız.
Insert > Table komutu ile yeni bir tablo daha ekleyin.
In the Insert Table dialog box, do the following for the second
table:
Açılan tablo ekle (Insert Table) diyalog kutusuna aşağıda
değerleri giriniz.
Satır (Rows) metin kutusuna 1 girin.
Sütun (Columns) metin kutusuna 3 girin.
Tablo genişliği (Table Width) metin kutusuna 700 girin.
Tablo genişliği pop-up menüsünden pixel’i seçin.
Kenarlık kalınlığı (Border Thickness) metin kutusuna 0
girin.
Cell Padding metin kutusuna 0 girin.
Cell Spacing metin kutusuna 0 girin.
10. Üçüncü bir tablo ekleyin ve aşağıdaki değerleri girin.
Satır (Rows) metin kutusuna 1 girin.
Sütun (Columns) metin kutusuna 1 girin.
Tablo genişliği (Table Width) metin kutusuna 700
girin.
Tablo genişliği pop-up menüsünden pixel’i seçin.
Kenarlık kalınlığı (Border Thickness) metin kutusuna
0 girin.
Cell Padding metin kutusuna 0 girin.
Cell Spacing metin kutusuna 0 girin.
8. Tamama tıklayın.
Bu kez bir satır üç sütundan oluşan yeni bir
tablo oluşacaktır.
9. Tablonun sağına tıklayarak seçimi bırakın.
11. Tamama tıklayın.
Bir satır, bir sütundan oluşan üçüncü bir tablo
daha eklenecektir. Tabloların son hali
aşağıda gösterilmiştir.
9
Tablo özelliklerinin ayarlanması
1. Görünüm menüsü Tablo modunundan
genişletilmiş tablo modunu seçin. View >
Table Mode > Expanded Table Mode.
2. Birinci tablonun birinci satırının içerisine
tıklayın.
3. Özellik penceresinde (Window > Properties),
hücre yüksekliğini (Cell Height) (H) 90 olarak
ayarlayın ve entere basın.
4. Birinci tablonun ikinci satırına tıklayın.
5. Özellikler penceresinden hücre yüksekliğini
166 olarak ayarlayın.
6. Birinci tablonun üçüncü satırına tıklayın.
7. Özellikler penceresinden hücre yüksekliğini
24 olarak ayarlayın.
10
8. İkinci tablonun birinci sütununu seçin.
9. Özellikler penceresinden, hücre genişliğini
Cell Width (W) 140 olarak yazın ve entere
basın.
10. İkinci tablonun ikinci sütununu seçin.
11. Özellikler penceresinden, hücre genişliğini
Cell Width (W) 230 olarak yazın ve entere
basın.
12. Üçüncü sütunun genişliğini 330 pixel olarak
ayarlayın.
13. Son olarak, son tablonun içine tıklayın.
14. Özellikler penceresinden, hücre yüksekliğini
24 pixeI olarak ayarlayın.
15. Doküman penceresinden (Document
Window) genişetilmiş tablo modundan çık (
Exit Expanded Tables Mode) linkine
tıklayarak normal moda dönün.
16. Sayfanızı kaydedin.
11
Bir resim yer gösterisici (image placeholder)
ekleyin
Resim yer tutucusu, sayfa tasarımı
tamamlanıncaya kadar resimler için ayrılan
yerleri göstermek için kullanılmaktadır.
Böylece gerçek resimler olmasa bile
resimlerin yerleri belirli olduğu için sayfa
tasarımı tamamlanabilmektedir.
Doküman penceresinden (Document window),
birinci tablonun birinci satırını seçiniz.
2. Ekle menüsünden Insert > Image Objects > Image
Placeholder seçiniz.
3. Resim yer tutucusu (Image Placeholder) diyalog
kutusunda aşağıda verilen değerleri girin.
1.
4.
İsim kutusuna banner_graphic yazın.
Genişlik (Width) kutusuna 700 girin.
Yükseklik (Height) kutusuna 90 girin.
Renk (color) kutusuna tıklayın ve reddish brown
rengini seçin (#993300).
Alternatif metin (alternate text) kutusunu boş bırakın.
OK’yi tıklayın.
Sayfaya renk verin
1. Üç sütunlu tablonun ilk sütununa tıklayın.
2. Tag seçiciden <td> tag (cell tag) seçin.
3. Özellikler penceresinde (Window >
Properties), arkaplan rengi (Background
Color) metin kutusuna tıklayın.
4. Bu kutuya #993300 değerini girin ve entera
basın.
12
5. Tablonun ikinci sütununu seçin.
6. Tag seçiciden <td> tag (cell tag) seçin.
7. Özellikler penceresinde (Window >
Properties), arkaplan rengi (Background
Color) metin kutusuna tıklayın ve #F7EEDF
değerini girin.
8. 5, 6 ve 7 adımları tekrarlayarak üçüncü
sutun arkaplan rengini light tan olarak
ayarlayın.
Sayfa arkaplanını değiştirin.
1. Modify > Page Properties tıklayın
2. Görünüm kategorisinde (Appearance
category), arkaplan rengini (Background
Color) seçip rengi siyah olarak ayarlayın.
(#000000)
3. Tamamı tıklayın.
4. Çalışmanızı kaydedin.
13
Sayfaya içerik eklemek
Resim tutucuyu değiştirmek
1.
2.
3.
4.
5.
6.
İndex.html dosyasını açın.
Sayfanın üstündeki banner_graphic isimli resim
tutucuya (image placeholder) çift tıklayın.
Resim kaynağı seçin (Select Image Source) diyalog
kutusunda, cafe_townsend klasörü altındaki images
klasörüne gidin.
banner_graphic.jpg dosyasını seçin ve OK basın.
Tablonun dışında bir yere tıklayıp seçimi kaldırın.
Sayfanızı kaydedin.
14
Insert menüsünü kullanarak resim
ekleyin
Sürükleyerek resim ekleyin
1. Birinci tablonun üçüncü satırını seçim.
1. Son tablonun son satırını seçin.
2. Insert > Image komutunu verin.
2. Dosya panelinden (Window > Files),
3. Resim kaynağı seçin (Select Image Source)
body_main_footer.gif dosyasını bulun ve
tablonun içine sürükleyin.
3. Tablo dışına tıkladıktan sonra sayfanızı
kaydedin.
diyalog kutusunda, cafe_townsend klasörü
altındaki images klasörüne gidin.
4. body_main_header.gif dosyasını seçin ve
OK tıklayın.
Varlık panelini (Assets panel)
kullanarak resim ekleme
1. Üç sütunlu tablonun orta sütununa tıklayın.
2. Özellikler penceresinden, Horz pop-up
menüsünden ortalayı (Center) seçin. Vert
pop up menüsünden üstü (top) seçim.
3. Dosya panelinde varlıklar (Assets) tabına
tıklayın.
15
1. Window > Assets
3. Varlıklar panelinden street_sign.jpg
seçin.
2. Resim görünü seçili
değişle resimdeki
gibi seçin.
dosyasını seçin.
4. Aşağıdakilerden birini yapın:
Orta sütuna dosyayı sürükleyip bırakın.
Ya da varlık panelinin altından ekle butonuna
tıklayın.
Flash dosyası ekleme ve çalma
1. Birinci tablonun ikinci satırını seçin.
2. Özellikler penceresi, Vert’da orta (middle)
Horz’da center seçiniz.
3. Insert > Media > Flash komutunu veriniz.
4. Dosya seçin (Select File) diyalog
kutusundan, flash_fma.swf dosyasını seçin.
5. Özellikler penceresinden, oynatı tıklayın.
16
Flash Video ekleme
1. Üç sütunlu tablonun orta sütununu seçin.
4. URL metin kutusunda, Browse tuşuna
2. Insert > Media > Flash Video komutunu
tıklayarak cafe_townsend_home.flv
dosyasını gösoteriniz.
5. Halo Skin 2’i seçiniz.
6. Genişlik ve yükseklik olarak;
verin.
3. Flash video ekleme (Insert Flash Video)
diyalog kutusunda, Progressive Download
Video video tipini seçiniz.
Genişlik (Width) metin kutusuna 180. girin
Yükseklik (Height) metin kutusuna,135 girin.
Gövde metnini ekleyin.
1. Dosya panelinden,sample_text.txt dosyasını
2. Control-A’ya basarak tüm metni seçin ve
bulun ve çift tıklayarak açın.
3.
4.
5.
6.
7.
kopyalayın.
sample_text.txt dosyasını kapatın.
index.html dosyasında, üç sütunlu tablonun
üçüncü sütununu seçin.
Kopyaladığınız metni yapıştırın.
Özellikler penceresinde, Vert pop-up
menüsünü top olarak ayarlayın.
Sayfanızı kaydedin.
17
Yönlendirme (Navigation) barına
metin ekleme
Üç sütunlu tablonun birinci sutunu seçin.
Cuisine yazın
Boşluk tuşuna basın ve Chef Ipsum yazın.
Aynı şekilde Articles, Special Events,
Location, Menu, Contact Us ifadelerini de
ekleyin.
5. Tag selectorden <td>’yi seçin.
6. Özellikler penceresinden Vert pop-up
menüsünden top seçin.
7. Sayfanızı kaydedin.
1.
2.
3.
4.
Link oluşturun
1.
2.
3.
4.
5.
6.
Cuisine kelimesini seçin.
Özellikler penceresinden link metin kutusunun
yanındaki klasör simgesine tıklayın.
Dosya seçin diyalog kutusundan, menu.html
dosyasını bulun.
Sayfanın başka bir yerine tıklayarak Cuisine
seçimini bırakın.
Bu işlemi diğer menü elemanları içinde tekrarlayın.
Sayfanızı kaydedin.
18