Dreamweaver 8. Çalışma alanı yerleşimi. Doküman Penceresi (Document window)

Transkript

1 Ç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

2 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

3 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 ) 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. HTML Kategorisi (The HTML category): hr, 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

4 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) Seçili tag için genel özelliklerin incelenmesi, 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. Dreamweaver siteleri Dreamweaver da, site terimi bir web sitesini 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

5 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

6 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. 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

7 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. 1. Dreamweaver da, File > New seçilir. 2. 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. 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

8 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

9 5. Tablo seçimini bırakmak için tablonun sağında bir yere tıklayınız. 6. Insert > Table komutu ile yeni bir tablo daha ekleyin. 7. In the Insert Table dialog box, do the following for the second table: 3. 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. 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. 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. 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

10 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

11 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

12 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. 1. 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. İ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. 4. 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 # değerini girin ve entera basın. 12

13 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

14 Sayfaya içerik eklemek Resim tutucuyu değiştirmek 1. İndex.html dosyasını açın. 2. Sayfanın üstündeki banner_graphic isimli resim tutucuya (image placeholder) çift tıklayın. 3. Resim kaynağı seçin (Select Image Source) diyalog kutusunda, cafe_townsend klasörü altındaki images klasörüne gidin. 4. banner_graphic.jpg dosyasını seçin ve OK basın. 5. Tablonun dışında bir yere tıklayıp seçimi kaldırın. 6. Sayfanızı kaydedin. 14

15 Insert menüsünü kullanarak resim ekleyin 1. Birinci tablonun üçüncü satırını seçim. 2. Insert > Image komutunu verin. 3. Resim kaynağı seçin (Select Image Source) 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. Sürükleyerek resim ekleyin 1. Son tablonun son satırını seçin. 2. Dosya panelinden (Window > Files), 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. 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

16 1. Window > Assets seçin. 2. Resim görünü seçili değişle resimdeki gibi seçin. 3. Varlıklar panelinden street_sign.jpg 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

17 Flash Video ekleme 1. Üç sütunlu tablonun orta sütununu seçin. 2. Insert > Media > Flash Video komutunu verin. 3. Flash video ekleme (Insert Flash Video) diyalog kutusunda, Progressive Download Video video tipini seçiniz. 4. URL metin kutusunda, Browse tuşuna tıklayarak cafe_townsend_home.flv dosyasını gösoteriniz. 5. Halo Skin 2 i seçiniz. 6. Genişlik ve yükseklik olarak; 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ı bulun ve çift tıklayarak açın. 2. Control-A ya basarak tüm metni seçin ve kopyalayın. 3. sample_text.txt dosyasını kapatın. 4. index.html dosyasında, üç sütunlu tablonun üçüncü sütununu seçin. 5. Kopyaladığınız metni yapıştırın. 6. Özellikler penceresinde, Vert pop-up menüsünü top olarak ayarlayın. 7. Sayfanızı kaydedin. 17

18 Yönlendirme (Navigation) barına metin ekleme 1. Üç sütunlu tablonun birinci sutunu seçin. 2. Cuisine yazın 3. Boşluk tuşuna basın ve Chef Ipsum yazın. 4. 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. Link oluşturun 1. Cuisine kelimesini seçin. 2. Özellikler penceresinden link metin kutusunun yanındaki klasör simgesine tıklayın. 3. Dosya seçin diyalog kutusundan, menu.html dosyasını bulun. 4. Sayfanın başka bir yerine tıklayarak Cuisine seçimini bırakın. 5. Bu işlemi diğer menü elemanları içinde tekrarlayın. 6. Sayfanızı kaydedin. 18