Doç. Dr. İsmail Rakıp Karaş Hazırlayan: İdris Kahraman

Transkript

1 7. Doç. Dr. İsmail Rakıp Karaş Hazırlayan: İdris Kahraman

2 Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver html ve javascript kodları üretebilir.

3 Dreamweaver Görünüm Dreamweaver da üç tane görünüm modu mevcuttur: Design(Tasarım), Code(Kod) ve Split(Böl). Böl modunda hem Tasarım görünümü, hem de Kod görünümü yer alır. Bu modlara ait düğmeler Belge araç çubuğunun sol tarafında yer almaktadır. Siz çalışmaya devam ederken belge penceresi sayfanızın bir Web sayfasında nasıl görüneceği hakkında yaklaşık olarak size bir fikir verir. Burada yaklaşık olarak bir fikir edinirsiniz, çünkü tarayıcıların Web sayfalarını yorumlama şekilleri arasında bazı farklar vardır.

4 Araç Çubuğu Ekle araç çubuğunda Ortak sekmesini seçin. Burada genel olarak kullanacağınız araçlar bulunmaktadır. Ekle araç çubuğu; resimler, tablolar, özel karakterler, formlar ve HTML gibi sayfanıza ekleyebileceğiniz pek çok nesne ya da elemanı içerir. Bunlar tiplerine göre yedi gruba ayrılmıştır: Ortak, Mizanpaj, Formlar, Data, Spry, Metin, Sık Kullanılanlar. Etkin grubun ismi menüde görüntülenir. Varsayılan durumda Ortak grubu etkindir.

5 Özellikler Kısmı Sayfanızın altında, kullandığınız nesneler ve metinlerle ilgili özellikleri değiştirebileceğiniz Özellikler panelini görebilirsiniz.

6 Sayfaya Başlık Atamak Oluşturduğunuz her HTML belgesinin bir başlığı olmalıdır. Bu başlık öncelikle belgenin tanınması için kullanılır. Başlık bölümünde Başlıksız Belge olarak görünür. Bu başlığı sayfanızı uygun bir başlıkla değiştirin. Bu değişikliği yaptıktan sonra dosyayı kaydedin.

7 Link Oluşturmak HTML de bağlantılar iki parçadan oluşur: Kendisine bağlanılacak olan dosyanın adı ve yolu (ya da URL i - Uniform Resource Locator) ile tıklanabilir alan olarak görev yapan metin ya da resim. Linklere Farklı Renk Atamak: Sayfanızdaki metin tabanlı bağlantıların varsayılan rengini belirleyebilirsiniz. Bunu yapmak için : Sayfa içindeki metinlerinizin renklerini değiştirmek için Değiştir > Sayfa Özelliklerini seçin. Açılan Page Properties penceresinden Bağlar (Links) sekmesine tıklayın.

8 Link Özellikleri Kullanıcının davranışına göre değişen dört farklı bağlantı durumu için renk tanımlayabilirsiniz. Bağ Rengi: Bağlantının, üzerine tıklanmadan önceki yani başlangıçtaki rengidir. Ziyaret Edilen Bağlar: Kullanıcı bir bağlantıya tıkladığında bağlantının aldığı renktir. Rollover Bağlar: Kullanıcı, imleci bir bağlantının üzerinde bir süre tuttuğunda bağlantının aldığı renktir. Etkin Bağlar: İmleç üzerindeyken farenin düğmesine basıldığında bağlantının aldığı renktir.

9 Link Özellikleri Bu alana eğer baska bir siteye link verecekseniz bu sitenin adresini basında http bulunarak yazmalısınız. (Ör: Eğer sayfanızın yeni bir pencerede açılmasını istiyorsanız Hedef menüsünden_blank seçeneğini seçmelisiniz.

10 Resimlerle Çalışmak Sayfalarınıza Arkaplan Resmi Eklemek Sayfalarınıza arkaplan resmi eklemek için Dreamweaver menüsünden Modify > Page Properties seçeneklerini seçin. Açılan iletişim kutusunda background görüntüsü seçeneğinden uygun bir resmi seçebilirsiniz.

11 Resimlerle Çalışmak Sayfalarınıza Resim Eklemek Sayfalarınıza resim eklemek için imlecinizi sayfa içinde resmi eklemek istediğiniz yere yerleştirdikten sonra Insert panelinden Image düğmesine tıklamalısınız. Resmi ekledikten sonra Properties kısmından gerekli düzenlemeler yapılabilir.

12 Resimlerle Çalışmak Image properties Sayfalarınıza eklediğiniz resimlerin özelliklerini özellik panelini kullanarak düzeltebilirsiniz. W: Resmin genişliği H: Resmin yüksekliği SRC: Resmin sabit diskiniz üzerindeki yeri Link: Resmin linki Alt: Resmin üzerine gelindiğinde çıkacak yazı V Space: Resmin altında ve üstündeki boşluğu H Space: Resmin solunda ve sağındaki boşluğu Target: Resmin linkinin hangi pencerede açılacağı Low Src: Resim yüklenene kadar gösterilecek düşük boyutlu versiyonu Border: Resmin çerçeve kalınlığını ifade etmektedir.

13 Tablo Oluşturmak Tablo iletişim kutusu üç bölüme ayrılmıştır. Table Size, Header ve Accessibility.

14 Tablo Oluşturmak Table Size bölümünde şu seçenekler yer alır: Rows: Satır sayısı Columns: Sütun sayısı Table width: Tablo genişliği Header kısmında şu seçenekler yer alır: None, Left, Top, Both Border thickness: Tablo kenar genişliği Cell padding: Hücre dolgusu Cell spacing: Hücre boşluğu Accessibility kısmında şu seçenekler yer alır: Caption: Resim yazısı Align caption: Resim hizalama Summary: Resim özeti

15 Tablo Özellikleri Herhangi bir tabloyu seçtiğinizde özellik denetçisi içinde bu tablo ile ilgili özellikler belirecektir. Bu özellikler aşağıdaki gibidir. Table ID: Tablonun baslığını girebileceğiniz alandır. Bu alan sizin tablonuzu sayfa içinde essiz bir şekilde tanımlayabileceğiniz alanı belirler. Rowc: Tablolarınızın satır sayısını ayarlayabileceğiniz alan. Cols: Tablolarınızın sütun sayısını ayarlayabileceğiniz alan. W: Tablolarınızın genişliğini ayarlayabileceğiniz alan. Buradan tablo genişliğinizi piksel yada yüzde olarak ayarlayabilirsiniz. Cellpad:Hücrelerinizin içindeki nesnelerle duvarları arasındaki uzaklığın piksel olarak değeri. CellSpace: Hücre arası boşluklarınızın piksel olarak değeri. Align: Tablonuzun sayfanız içindeki yatay hizalaması Border: Tablolarınızın kenar kalınlığı. Bu kalınlık değeri, eğer tablolarınızı tasarım elemanı olarak kullanıyorsanız 0 olarak ayarlanmalıdır. Bg Color: Tablonuzun arkaplan rengi Bg Image: Tablonuzun arkaplan resmi. Brdr Color: Tablolarınızın kenarlık rengi.

16 Hücre Özellikleri Değiştirmek istediğiniz hücreye tıklamalı veya birden fazla hücre için bu isi yapacaksanız o hücreleri CTRL tuşuna basarak seçmelisiniz. Horizantal: Hücre içindeki yatay hizalamayı belirler. Vertical: Hücre içindeki dikey hizalamayı belirler. W: Sütunun genişliğini belirler. H: Satırın yüksekliğini belirler. Bg: Hücre arkaplan renginizi belirler. Burada vermiş olduğunuz değer tabloya vermiş olduğunuz arkaplan değerinin üzerinde gözükür. Bg: Hücrenizin arkaplan resmini belirler. Burada vermiş olduğunuz resim değeri hücrenizin arkaplan resmini belirler ve tablonuzun arkaplan resminin üzerinde gözükür. No Warp: Yazılarınızın tablo küçüldüğünde bir alt satıra inmesini engeller. Header: İşaretlendiği hücrenin baslık formatında gözükmesini sağlar. B: Kenarlık değeri ise sadece bu hücreye kenarlık genişliği vermenizi sağlar.

17 Satır ve Sütun İşlemleri Tabloda Satır yada Sütünları Silmek Tablonuzdan satır yada sütunu seçtikten sonra klavyenizden sil butonuna basarak yada menüden Modify > Table > Delete Row yada Delete Column seçeneğini seçerek silme işlemini gerçekleştirebilirsiniz. Tablolara Satır yada Sütün Eklemek Tablolarınıza satır yada sütun eklemek isterseniz yapmanız gereken eklemek istediğiniz satır yada sütun içinde bir hücreye tıkladıktan sonra Modify >Table > Insert Row yada Insert Column seçeneğine tıklamaktır.

18 Etiketler Bütünü Insert araç çubuğu sekmesindeki Tag seçeneğine tıklarsak aşağıdaki pencere açılır. Buradan sınıflara bölünmüş html etiketlerini görebiliriz ve istediğimizi seçebiliriz. Örnek olarak Forms a tıkladığmızda formlarla alakalı bütün etiketleri görebilmekteyiz.

19 Sol Menü Çubuğu Açılı olan sayfalar arasındaki geçiş Seçtiğiniz etiketin açılışı ile kapanışı arasındakileri kapatır. Seçtiğiniz kısımları kapatır. Kapalı olan bütün etiketleri kapatır. Eş etiketleri seçer. Satır numaralarını açar/kapatır. Geçersiz etiketleri renkli olarak gösterir. Yorum ekleme Yorum silme Satırı içeri doğru girinti vermek. Satırı dışarı doğru girinti vermek.

20 Panel Panel kısmında özelliklere kullanılan kısımlar CSS ve Dosyalar kısmıdır. CSS kısmından sayfaların stilleri kontrol edilebilmektedir. Dosyalar kısmında ise lokal olarak çalıştığınız dosyaların hepsi gözükmektedir ve kısa yoldan dosyalara ulaşmanızı sağlar.