Dreamweaver
Content
ADOBE DREAMWEAVER CS3
Adobe Dreamweaver CS3 | I
İÇİNDEKİLER
ADOBE DREAMWEAVER CS3 .............................................................................................. 1
İÇİNDEKİLER............................................................................................................................ I
DREAMWEAVER CS3’E GİRİŞ ............................................................................................. 1
1. ÇALIŞMA ALANI VE PANELLER ................................................................................. 2
1.1. Çalışma Alanını Düzenlemek ...................................................................................... 3
1.2. Karşılama Ekranı ......................................................................................................... 3
1.3. Insert Araç Çubuğunu Kullanmak ............................................................................... 4
1.4. Properties Paneli .......................................................................................................... 5
1.5. Çalışma Penceresi Araç Çubuğunu Kullanmak........................................................... 5
1.6. Çalışma Penceresinin Özellikleri................................................................................. 6
1.7. Panelleri Kullanmak .................................................................................................... 7
1.8. Kişisel Çalışma Alanı Oluşturmak .............................................................................. 7
2. WEB SİTESİ YÖNETİMİ .................................................................................................. 9
2.1. Yeni Bir Site Oluşturmak .......................................................................................... 10
2.2. Siteye Yeni Bir Klasör Eklemek ............................................................................... 12
2.3. Siteye Yeni Bir Sayfa Eklemek ................................................................................. 12
2.4. Sayfaya Türkçe Dil Tanımlaması .............................................................................. 14
2.5. Yeni Açılan Sayfanın Kaydedilmesi ......................................................................... 14
2.6. Sayfa Özellikleri ........................................................................................................ 15
2.7. Resim Eklemek .......................................................................................................... 16
2.8. Image Placeholder ..................................................................................................... 18
2.9. Metinlerle Çalışmak ................................................................................................. 20
2.10. Linkler (Bağlantılar) .............................................................................................. 20
3. TABLOLARLA ÇALIŞMAK .......................................................................................... 28
3.1. Tablo Eklemek ........................................................................................................... 29
3.2. Tablo Özellikleri ........................................................................................................ 30
3.3. Tablo Hücrelerinin Bölünmesi : ................................................................................ 31
3.4. Tabloya Satır Ekleme: ............................................................................................... 31
3.5. Tabloya Sütun Ekleme : ............................................................................................ 32
3.6. Satırların, Sütunların ya da Tablonun Silinmesi ........................................................ 33
4. DREAMWEAVER CS3’DE CSS KULLANIMI ............................................................. 34
4.1. CSS nedir? ................................................................................................................. 35
4.2. CSS Türleri (Stil Şablonları) ..................................................................................... 35
4.3. Dreamweaver CS3’de CSS Yapma ........................................................................... 37
4.4. Örnek Stil Dosyalarını Kullanma .............................................................................. 39
5. CANLI MENÜ EKLEME ................................................................................................ 40
6. ROLLOVER IMAGE ....................................................................................................... 43
7. NAVİGATİON BAR ........................................................................................................ 46
8. (CANLI) SEKMELİ PANEL ........................................................................................... 51
9. AKORDİON PANELİ ...................................................................................................... 54
10. CANLI KATLANABİLİR PANEL .............................................................................. 57
11. FLASH NESNELERİ EKLEME .................................................................................. 59
11.1. Flash Filmleri Ekleme : .......................................................................................... 60
11.2. Flash Butonu Ekleme : .......................................................................................... 62
11.3. Flash Metni Ekleme : ............................................................................................. 63
11.4. Flash Paper Ekleme : ............................................................................................ 63
11.5. Flash Video Ekleme : ............................................................................................ 64
11.6. Shockwave Filmi Ekleme : ................................................................................... 64
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | II
12. FOTOĞRAF ALBÜMÜ OLUŞTURMA...................................................................... 65
12.1. Fotoğraf Albümü Oluşturma .................................................................................. 66
13. DİNAMİK NESNE OLUŞTURMA ............................................................................. 68
14. ŞABLON HAZIRLAMAK ........................................................................................... 71
14.1. Make Template : .................................................................................................... 72
14.2. Sayfaya Template Eklemek ................................................................................... 73
14.3. Editable Region ...................................................................................................... 74
(Düzenlenebilir Alan) ........................................................................................................... 74
14.4. Optional Region ..................................................................................................... 75
(Seçimli Alan) ...................................................................................................................... 75
15. FORMLARLA ÇALIŞMAK ........................................................................................ 77
15.1. Sayfaya Form Alanı Ekleme ................................................................................. 79
15.2. Text Field .............................................................................................................. 80
15.3. List /Menu ............................................................................................................. 82
15.4. Check Box .............................................................................................................. 83
15.5. Radio Button ......................................................................................................... 84
15.6. Radio Group .......................................................................................................... 84
15.7. File Field : ............................................................................................................. 85
15.8. Button : ................................................................................................................. 86
15.9. Jump Menu : ......................................................................................................... 87
15.10. Image Field: ........................................................................................................... 88
15.11. Hidden Field: ........................................................................................................ 88
15.12. Spry Validation Text Field : ................................................................................. 88
15.13. Spry Validation Text Area : .................................................................................. 89
16. SWAM IMAGE ............................................................................................................ 90
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 1
DREAMWEAVER CS3’E GİRİŞ
HEDEFLER
Kursiyer eğitim süreci sonunda;
Dreamweaver CS3’te web klasörü tanımlaması yapabilmeli, web araçlarını
kullanabilmeli, Style şablonları (css) ve sayfa şablonları (template) hazırlayarak web
sayfalarını biçimlendirebilmelidir. Kursiyer web sitesi yapma mantığını kavramalı ve
eğitim süreci sonunda kendisine ait bir web sitesi hazırlamalıdır.
DAVRANIŞLAR
Web sitesinde kullanılan nesnelerin (resim, düğme, vb.) tek bir klasör içerisinde
arşivlenmesi ve bu arşivleme işleminin Adobe Dreamweaver CS3 tarafından
otomatik olarak yapılabilmesi için web klasörü tanımlaması yapılmalıdır. Web klasörü
tanımlaması tasarımcıya site yapımı sürecinde kolaylık sağlayacaktır.
Web sayfalarında sıklıkla kullanılan ve web tasarımının vazgeçilmez araçları; tablo,
menu, linkleri vb. sayfa içinde en iyi şekilde kullanabilmek sayfanın görselliğini
arttıracaktır.
Site tasarımında her sayfanın tek tek tasarlanması ve biçimlendirilmesi yerine style
ve sayfa şablonlarını kullanmak sayfaların standart hale getirilmesinde ve sitenin
güncellenmesinde etkinlik sağlayacaktır.
Öğrenme süreci sonunda bir web sitesi hazırlamak nihai hedef olmalıdır.
ARAÇ GEREÇLER
İşletim sistemi üzerinde Adobe Dreamweaver CS3’ü çalıştıran bir bilgisayar.
Bilgisayarın internete bağlı olması öğrenme sürecinde çok yönlü araştırma yapmanızı
sağlayacaktır.
ÖĞRENME – ÖĞRETME STRATEJİLERİ
Başarılı bir eğitim süreci yaşamak ve istenilen hedeflere ulaşmak için kursiyerin kursa
devamlılığı esastır.
Kurs süresince düzenli not tutulmalı, anlatılanlar Adobe Dreamweaver CS3 programı
üzerinde uygulanmalıdır.
Kursiyer problem yaşadığı anlarda eğitici ile paylaşmalı
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 2
1. ÇALIŞMA ALANI VE PANELLER
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 3
1.1. Çalışma Alanını Düzenlemek
Dreamweaver’da araçların görünümünü ve araçların yerleşimini iki şekilde
düzenleyebilirsiniz. Bunlar coder ve designer düzenleridir. Coder kaynak kod görüntüleme
düzenini, desicner ise görsel görüntüleme görünümünü ifade eder.
Windows / workspace layout menüsü içinde
yer alan çalışma düzenlerinden birini
seçebilirsiniz.
1.2. Karşılama Ekranı
Dreamweaver ilk kez başlatıldığında karşılama ekranı çıkacaktır. Karşılama ekranı bir çok
işlemi kolaylaştıracaktır.
Open a Recent Item bölümünde son kullanılan
dosyalar listelenir. Bu listenin içindeki open
klasörünü
kullanarak
bilgisayardaki
diğer
dosyalara da erişilir. Aynı işlem File / File Open
menüsünden de yapılabilir.
Create new bölümünü kullanarak hangi uzantıya
ait dosya oluşturmak istenilirse buradan seçilebilir.
Daha farklı dillerde dosya oluşturulmak istenirse
more düğmesini tıklayarak istenilen dosya
seçilebilir. Dreamweaver Site düğmesi tıklanarak
Dreamweaver’da yine bir Site açılabilir. Aynı
seçeneklere File / New menüsünden de ulaşılır.
Create from Samples bölümünde ise Dreamweaver içerisinde bulunan örnek tasarımlardan
faydalanarak sayfa açılabilir.
Karşılama ekranı tekrar görülmek istenmez ise, karşılama ekranının sol alt kısmında bulunan
Don’t show again check işaretlenir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 4
1.3. Insert Araç Çubuğunu Kullanmak
İnsert araç çubuğu çalışma sayfasının üst bölümünde bulunur. Sayfanın tasarım öğelerini
eklemek için gerekli kısayolları barındırır.
Varsayılan
olarak
sekmeler
halinde
görüntülenir. Menu halinde görüntülemek için
üzerinde sağ tıklanarak show as menu
seçeneği seçilir. Artık sol tarafta menu
halinde görünecektir.
menu halinde iken en altta bulunan show as
Tabs seçeneği ile tekrar sekme görünümüne
getirilir.
İnsert araç çubuğu bir web sayfasına eklenecek tüm bileşenleri içerir. Favorites sekmesine
sık kullandığınız bileşenleri aktararak kullanım kolaylığı sağlayabilirsiniz. Favorite sekmesi
varsayılan olarak hiçbir kısayol içermez.
Bu sekmeyi düzenlemek için Favorites sekmesine
tıkladıktan sonra Right-click to customize your
favorite object yazısının üstünde sağ tıklayarak
Customize Favorites bağlantısına tıklayın.
Açılan Customize Favorite Objects penceresinde
Available Objects bölümünden eklenmek istenen
nesneler seçilerek Favorite Objects bölümüne
aktarılır. Favorite Object bölümüne eklenen
nesneler arasına kullanım amaçlarına göre Add
Sparator eklenebilir, sırası değiştirilebilir.
Bu
pencere onaylanarak kapatılır.
Artık sık kullanılan nesneler Favorites sekmesinde
görünür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 5
1.4. Properties Paneli
Tasarım aşamasında en çok kullanılan panellerden biridir. Varsayılan olarak bu panelde
sayfanın özellikleri gösterilse de, Properties panelinin içeriği o an yapılmakta olan işleme
veya seçili olan nesneye göre değişir. Örneğin sayfaya bir tablo eklenirse properties paneli
sayfa özelliklerinin üstünde tablonun özelliklerini gösterir ve bu özelliklerin değiştirilmesini
sağlar. Yine sayfaya metin eklenirse bu seferde properties penceresi metin özelliklerini
barındırır ve değiştirilmesini sağlar.
Page Properties düğmesini kullanarak sayfanın özellikleri değiştirilir. Panelin altta bulunan
bölümü sağ alt köşede bulunan ok işaretinden kapatılır.
Paneli tamamen kapatmak için panelin sağ üst köşesinde bulunan düğmeden Close panel
group seçeneği kullanılır. Buradan kapatılan panel, Windows / properties menüsüden
açılır.
1.5. Çalışma Penceresi Araç Çubuğunu Kullanmak
Çalışma penceresi araç çubuğunda bulunan Design düğmesi çalışma alanının görsel olarak
görünmesini sağlar. Code bölümü design bölümünde görsel olarak yapılan işlemlerin XHTML
görüntüsüdür. Split bölümü ise, ekranda hem design hemde code bölümünün görünmesini
sağlar.
XHTML (html-htm) bilen kullanıcılar design bölümünde yapılan değişiklikleri code
bölümünden de yapabilir. Ancak code bölümünde yapılan değişiklikler anında Design
ekranına yansımayacaktır. Bunun için
Reresh düğmesine basılarak code bölümünde
yapılan değişiklikler design bölümüne de yansıyacaktır.
Title bölümü üzerinde çalışmakta olduğunuz sayfanın tarayıcıda gösterilecek pencere ismidir.
Previev düğmesi sayfanın bilgisayarınızda yüklü bulunan browser’larda nasıl göründüğünü
test etmenizi sağlar.
View Option sayfanın Code, Design ve Split görünümüne göre içeriği değişir. Core, Design
ve Split pencerelerinin içeriğine göre View Option düğmesi farklılıklar gösterir. Örneğin
Design ve Split pencerelerinin ortak özellikleri olan Rules (cetvel) ve Grid (ızgara, klavuz
çizgileri) Code penceresinin özelliği değildir. Çünkü Code penceresinde cetvel ve klavuz
çizgileri bulunmaz. Design, Code ve Split görünümlerinde istenmeyen özellikler View Option
düğmesinden kaldırılabilir.
Sadece tasarım sırasında görünen nesnelerin özelliklerini kullanmak için kullanılır. Örneğin
Table Borders kaldırılırsa sayfada kullanılan tabloların çerçeveleri gizlenecektir.
Check up düğmesi ile sayfanın tarayıcı uyumluluğu denetlenir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 6
1.6. Çalışma Penceresinin Özellikleri
Dreamweaver’da çalışma sayfasının ismi sayfanın hemen üst tarafında yer alır. Yeni açılan
sayfalar ilk sayfadan itibaren sola doğru (kullanıcıya göre sağa) kayar.
Çalışma sayfasının sol alt bölümünde sayfanın bazı bölümlerine hızlı ulaşabilmek için kısa
yol düğmeleri bulunur. Örneğin sayfaya bir tablo eklendiğinde sol alt tarafta yer alan table
düğmesi yardımı ile tablo nesnesi daha hızlı seçilir.
Çalışma sayasının sağ alt köşesinde bulunan Select Tool varsayılan olarak seçili haldedir.
Hand Tool aracı sayfa içinde kaydırma çubuklarını kullanmadan rahatlıkla gezinebilmenizi
sağlar.
Zoom Tool ise sayfanızda titiz çalışma yapmanız gereken yerleri büyüterek daha rahat bir
çalışma imkanı yaratır. Alt tuşu ile kullanıldığında çalışma alanını küçültecektir.
Set magnification aracı ile istenilen büyütme oranını seçebilirsiniz. burada bulunan
Fit Width özelliğini kullanarak sayfa boyutunu ve genişliğini ekrana sığacak şeklide
büyütebilirsiniz.
Fit all özelliği yakınlaştırma işlemini sayfa genişliği ve yüksekliğine göre yapar.
Width Selection sadece seçilen alanı ekrana sığacak şekilde büyütür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 7
Web tasarımında çok önemli bir nokta pencere boyutudur. Sayfa her tarayıcıda farklı
pencere boyutlarında görünecektir. Bunun önüne geçmek için çalışa sayfasının sağ alt
bölümünde zoom aracı yanındaki Window Size düğmesini kullanabilirsiniz.
1.7. Panelleri Kullanmak
Dreamweaver açıldığında paneller otomatik olarak
açılır ve Designer ekranında sağ tarafta bulunurlar.
Bütün paneller farklı içerik ve seçenekler içerirler.
Panel isimlerinin solunda bulunan üçgen şekline
tıklanarak panelleri açabilir aynı yere tıklayarak
içeriğini gizleyebilirsiniz. Files Paneli varsayılan
olarak açık şekilde görülmektedir.
Bazı panellerin içinde bu panele bağlı farklı
sekmeler yer almaktadır. Panelleri ekranın
sağından çıkarmak ve ekranda isteğiniz yere
taşımak için panel başlığının en solundaki
sürükleme düğmesini basılı tutarak ekranda
istediğiniz yere taşıyınız.
Ekranda farklı yerlere taşıdığınız panelleri eski
haline getirebilmek için Windows / workspace
Layout / Designer menüsünü izleyiniz.
Çalışma alanını daha fazla genişletmek ve paneleri kaldırmak için F4 tuşuna basınız. Tüm
panellerin ekrandan temizlendi görülecektir. Panelleri geri getirmek için tekrar F4 tuşuna
basınız.
1.8. Kişisel Çalışma Alanı Oluşturmak
Çalışma alanını her seferinde kendinize göre yeniden düzenlemek yerine yaptığınız
düzenlemeyi kaydederek kişisel çalışma alanınızı oluşturmak size kolaylık sağlayacaktır.
Bunun için ekranın sağında bulunan Files
panelini sürükleyerek ekranın soluna
alınız.
Windows / workspace Layout
Save Current menüsünü seçiniz.
/
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 8
Açılan
Save
Workspace
Layout
penceresine kişisel çalışma alanınızın
ismini yazın. Pencereden çıkın.
Kişisel Çalışma Alanınız verdiğiniz isimle kaydedilecek ve Windows /Workspace Layout
menüsünde görünecektir. Her seferinde yeniden düzenleme yapmaktansa bu menüyü
kullanarak zaman kazanabilirsiniz.
Kişisel çalışma alanınızı silmek ya da ismini
değiştirmek için Windows / Workspace
Layout / Manage menüsünden açılan Save
Workspace Layout penceresini kullanınız.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 9
2. WEB SİTESİ YÖNETİMİ
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 10
2.1. Yeni Bir Site Oluşturmak
Bir site oluşturmak ve tasarlamak için ilk aşama site için kullanılacak dosya, resim, video, vb.
nesnelerin depolanacağı bir klasör oluşturulmalı ve bu klasör Dreamweaver’a site sayfası
olarak tanıtılması gerekir.
Öncelikle siteye ait tüm nesnelerin depolanacağı
bir klasör oluşturalım. Yandaki resimde de
görüldüğü gibi D sürücüsü içerisine ilk_sitem isimli
bir klasör oluşturulmuştur.
Karşılama ekranının Create New bölümünden
Dreamweaver Site düğmesine tıklanır.
Açılan Site Definition for Unnamed…isimli
pencerede Basic ve Advanted isimli iki sekme yer
alır. Basic sekmesinde sihirbaz yardımı ile bu
işlemi adım adım yapabilirsiniz. Advanted
sekmesinde ise daha fazla seçenek mevcuttur.
Advanted sekmesini tıklayarak bu sekmenin
içeriğine geçiniz.
Bu sekmenin sol tarafında sitemizin hangi kategoriye ait olduğu sorulmaktadır. Siteniz
bilgisayarda local olarak çalışacağından varsayılan olarak local info bilgisi yer alacaktır.
Burayı değiştirmeden Local İnfo bilgilerini giriniz.
Site name bölümüne sitenin adını giriniz. Bu ad sitenizin klasör ismi değildir. Sitenize sanal
ortamda verilen genel bir isimdir. Site adını Benim_Sitem olarak yazdık.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 11
Local root folder bölümünde ise Benim_Sitem isimli
sitenin klasörünün girilmesi istenmektedir.
Bö
bölümün sonundaki klasör yardımı ile biraz önce
açtığımız ilk_sitem isimli klasör seçilir.
Default images folder bölümünde ilk_sitem klasörü
içerisinde bir resim klasörünün belirlenmesi
istenmektedir. Yani ilk_sitem klasörü haricinde
bilgisayarın başka bölümlerinden sitede resim
kullanılması halinde Dreamweaver bu resmin bir
kopyasını alarak burada belirlenecek olan klasörün
içerisine atacaktır. Bu bölümünde sonunda bulunan
klasör yardımı ile ilk_sitem isimli klasörün içerisine
resimler klasörü açarak varsayılan resim klasörü
olarak belirlenir.
Site klasörünü ve bu klasör içerisinde yer alacak varsayılan resim klasörünü belirledikten
sonra Ok tuşuna basarak Site defination penceresi kapatılır.
Böylelikle oluşturacağımız sitenin özeliklerini yazacak olursak.
Site ismi
Sitenin bulunduğu klasör
Varsayılan Resim Klasörü
: Benim Sitem
: ilk_sitem
: resimler
Yukarıdaki özellikleri yazılı sitemiz Files Paneli içinde görünecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 12
2.2. Siteye Yeni Bir Klasör Eklemek
Yeni bir klasör açmak ;
Sitedeki tüm dosyalar ilk_sitem klasörü içerisinde yer almakta ve
bu klasörün içeriği Files Palelinde görüntülenmektedir. Files
panelinden bu klasör içerisini yeni bir klasör açmak için Files
paneli üzerinde sağ tıklanarak açılan listeden New folder seçilir.
Klasör ismi varsayılan olarak untitled ismi verilecektir. Untitled
yerine yeni bir isim (video) belirlenerek web klasörü içerisine yeni
bir klasör açılmış olur.
Bu ekranda eğer resimler klasörünün içerisine yeni bir klasör
açmak isteniyorsa bu işlem resimler klasörü seçili iken
yapılmalıdır.
2.3. Siteye Yeni Bir Sayfa Eklemek
Dreamweaver’da yeni bir sayfa açmanın birkaç yolu vardır.
2.3.1
Files paneli üzerinde sağ tıklanır ve açılan
listeden New Files seçilir. Yeni açılan dosyanın
ismi varsayılan olarak untitled olarak gelecektir.
Bunun yerine de yeni sayfanın ismi yazılarak
yeni bir dosya açılmış ve kaydedilmiş olur.
Files dosyası üzerinde sayfayı açmak istediğiniz klasör seçili değil ise New Folder ve New
File sekmesi pasif olarak görünecektir.
2.3.2
Karşılama ekranının Create New sekmesinde
hangi tür sayfa açılmak isteniyorsa seçilir. Ancak
burada açılan sayfa henüz kaydedilmediği için
Files Panelinde görünmeyecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 13
2.3.3
File / new menüsünden açılacak olan New document penceresinde Blank
Page sekmesinden istenilen türde sayfa seçilerek açılır.
Yeni açılan bir sayfanın varsayılan ayarlarını değiştirmek için yukarıdaki ekranda (New
Document penceresi) Preferences düğmesine tıklanır. Açılan pencerede Category
bölümünde varsayılan olarak gelen new document sekmesinde Default document kutusuna
ilk açılan sayfaların varsayılan olarak hangi türde (php, aspx, jsp vb.) açılması isteniyorsa
buradan seçilebilir. Sayfa ilk açıldığında istenilen türde açılmış olacaktır.
2.3.4
Yeni sayfa açmanın bir başka yöntemi ise; Standart araç çubuğunda
bulunan yeni sayfa açma düğmesi kullanılarak ta yeni bir sayfa açılabilir.
Buradan açılan sayfalar yukarıda yapılan varsayılan ayarlarınız
doğrultusunda açılacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 14
2.4. Sayfaya Türkçe Dil Tanımlaması
Dreamweaver’ın önceki sürümlerinde Türkçe karakter sıkıntısı yaşanmakta idi. Bu sorunu
aşabilmek için ek bir dil paketi tanımlanması gerekiyordu. Dreamweaver CS3 ile sayfanın dil
ayarlaması yapılabilmektedir.
Sayfanın Page Properties penceresinde Title/Encoding kategorisini seçin ve Encoding
bölümünde Türkçe dil desteğini seçiniz.
2.5. Yeni Açılan Sayfanın Kaydedilmesi
Yeni açılan sayfa File / Save menüsünden kaydedilir. Tüm programlarda olduğu gibi
Dreamweaver’da da Save kısayol düğmesi
bulunmaktadır. Ancak Dreamweaver ilk
açıldığında Standart araç çubuğu açık olmadığı için önce standart araç çubuğu açılmalıdır.
İnsert panelinde boş bir yere sağ tıklayarak
Dreamweaver’ın
araç
çubuklarını
görebilirsiniz. Buradan standart araç
çubuğunun sol tarafına check atarak
ekranda görünmesi sağlanır.
Standart araç çubuğunda sadece kaydet düğmesi değil bunun yanında ileri, geri, yeni sayfa
açma, aç, açık sayfaların hepsini kaydet düğmeleri yeralmaktadır.
Eğer sayfanız daha önce kaydedilmemiş ise sayfanıza isim vermeniz gerekir. Dreamweaver
kayıtlı olmayan sayfa için sizden bir konum belirlemenizi ve sayfanıza bir isim vermenizi
isteyecektir. Açılan Save As penceresinde File Name (Dosya adı) bölümünde varsayılan
olarak untitle yazacaktır. Untitle yerine sayfanın ismi yazılır. Konum olarak ise site klasörü
Dreamweaver’a tanıtıldığı için varsayılan olarak site klasörünün ismi (ilk_sitem) konum
kutucuğunda yer alacaktır. Konum kutucuğu farklı klasörlerde ise Save As penceresinin sol
alt tarafında bulunan Site Root düğmesine tıklanır ve site klasörünün (ilk_sitem) içeriğinin
görünmesi sağlanır ve kayıt işlemi yapılır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 15
2.6. Sayfa Özellikleri
Bir web sayfasının özelliklerine sayfa üzerinde sağ tıklayarak Page Properties
seçeneğinden ya da sayfa altında bulunan Properties Panelinin altındaki Page Properties
düğmesinden ulaşılır.
Bu pencere yardımı ile sayfa zemin rengini değiştirebilir, sayfa boşluklarını
düzenleyebilir, sayfa arkasına resim yerleştirilebilir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 16
Sayfa Yazı Tipinin
belirlenmesi
Yazı renginin belirlenmesi
Sayfa renginin belirlenmesi
Sayfaya arkaplan resmi belirlenmesi
Title/Encoding sekmesinin Encoding alanından Türkçe seçeneğini işaretleyerek
Sayfanın dilini Türkçe yapabilirsiniz.
2.7. Resim Eklemek
Web sayfaları resimleri içinde barındıran değil resimleri
görüntüleyen dosyalardır. Bu nedenle sayfaya eklenecek
olan resmin site klasöründe bulunması gerekir. Site
klasörünün içerisinde kullanılan tüm resimleri barındıran
bir klasör tanımlamak dosyaların
daha düzenli
yönetilmesini sağlayacaktır.
Eklenecek olan resim tanımlı resim klasörünün içinde ise
Files Panelinde görünecektir. Biz bu web sitesini
yapılandırırken
Site
Definition
For
………
penceresinde Default İmage Folder bölümünde
Resimler isimli klasörü varsayılan klasör olarak belirledik.
Eğer resimlerinizi barındıracak tanımlı bir klasörünüz
yoksa;
sitenizin
ayarlarını
yeniden
yapılandırabileceğiniz
Site
Definition
for……
penceresini yeniden kullanmalısınız. site klasörünüzün
(ilk_sitem) içine yeni bir klasör (resimler) açtıktan sonra
Files panelinin en üst kısmında sitenizin isminin yazdığı
kutucuğu açınız.
Açılan listenin en altında Manege Site öğesine
tıklayınız.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 17
Manege Sites penceresinde sol tarafta Dreamweaver’da
tanımlı sitelerin listesi çıkacaktır. Üzerinde çalışılan site
(Benim_Sitem) seçili iken Edit düğmesine tıklayın.
Site defination for Benim_Sitem isimli pencerenin Default images folder kutucuğunun
sağındaki klasör resmine tıklayarak resimlerinizi barındırmak için site (ilk_sitem klasörü)
içerisine açmış olduğunuz yeni klasörü (resimler klasörünü) seçiniz. Onaylayarak
pencereden çıkınız.
Artık sitede kullanılacak resimlerin barınacağı bir resim klasörü mevcuttur. Böyle bir klasör
yapısı olmadan da resimlerinizi site içerisinde herhangi bir yerde de barındırabilirsiniz. Fakat
site dışından herhangi bir klasörden sayfanıza direct olarak resim eklendiğinde çeşitli
sorunlarla karşılaşabilirsiniz.
Tanımlı resim klasörünüzün varlığı halinde ise; site dışından başka klasörlerden sayfanıza
direct olarak bir resim eklenirse Dreamweaver bu resmin bir kopyasını tanımlı resimler
klasörüne alacaktır. Resmi tanımlı klasör üzerinden sayfanızda gösterecektir.
Dreamweaver’da resim eklemenin farklı yöntemleri vardır.
•
Tanımlı
resim
klasörünün
içerisinde bulunan resimler Files
Panelinde
görünmektedir.
Sayfaya eklenmek istenen resim
dosyası sürüklenerek sayfada
gösterilmek
istenen
bölüme
bırakılır. İmage Tag Accessbility
Atributes
iletişim
penceresi
açılacaktır.
Bu
pencerede
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 18
herhangi bir nedenle resim görüntülenmediği taktirde yerine görüntülenecek olan
yazının Alternate text bölümüne girilmesi istenmektedir. Long description bölümüne
ise resmin yolunun yada daha fazla bilginin girilmesi istenmektedir. Bu bölümün
doldurulması ise şart değildir. Ancak Alternate text bölümünün doldurulması önerilir.
•
İnsert panelinin command sekmesinde İmages/image
düğmesine tıklanır. Açılan pencereden tanımlı resim
klasörü (resimler) açılır ve içerisinden ilgili resim dosyası
seçilerek onaylanır.
•
Files Panelinin içerisinde bulunan Assets sekmesine
tıklanır bu kısımda tanımlı resim klasörünün içerisinde
bulunan tüm resimler mevcuttur. Seçilen resmin ön
izlemesi görülecektir. İlgili resim seçilir ve sürükleme
yöntemi ile sayfanın ilgili yerine taşınır.
2.8. Image Placeholder
Sayfada kullanılacak olan resmin yerine rezerve etmek için
kullanılır. Sayfaya eklemek istediğiniz resim dosyası
materyalleriniz
arasında
bulunmamaktadır.
Sayfayı
düzenlerken ilgili resmin yerini rezerve ederek sayfanızın
tasarımı tamamlanır. İlgili resim tedarik edildikten sonra
rezerve edildiği yere eklenir.
•
•
•
Sayfanın belirlenen yerine imleç yerleştirilir.
İnsert panelinden images / Image Placeholder seçilir.
Açılan Image Placeholder penceresinde rezerve
yapılacak olan yerin boyutları ve alternatif yazının
girilmesi istenir. Bu bilgileri girilerek onaylanır.
•
Sayfanızın belirtilen bölümünde artık resminize yer
ayrılmıştır.
•
İlgili resmi tedarik edip tanımlı resim klasörü içerisine
eklendiğinde bu resmi rezerve edilen bölümü eklemek
için. Önce ilgili rezerve resim (Image Placeholder)
seçilir/tıklanır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 19
•
Web sayfası altında bulunan properties panelinin Src kutucunğunun sağında bulunan
Point to File düğmesini (dosya işaretleyici) sürükleyerek Files panelindeki ilgli resmin
üzerine bırakılır.
Rezerve edilen yere ilgili resim yerleşmiş olacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 20
2.9. Metinlerle Çalışmak
Açılan boş bir sayfada imleç yanıp sönmeye başlayacaktır. Buraya doğrudan metin
eklenebilir. Sayfaya resim eklenir ve sonra metin yazılmak istenir ise, önce resim işaretlenir
ve sonra klavyeden sağ ok tuşuna basılarak imlecin metnin yan tarafına düşmesi sağlanır.
Sonra yazım işlemine devam edilir. Dreamweaver CS3 te yazı yazılırken satır sonuna
gelindiğinde otomatik olarak yazı bir alt satırdan devam edecektir. Enter tuşuna basılarak bir
alt satıra geçilmek istendiğinde üsteki satır ile yeni açılan satır arasında iki satırlık bir boşluk
oluşacaktır. Her ne kadar iki paragraf aralığı olarak görünse de bazı durumlarda bu özelliğin
kullanılması istenmez. Enter tuşuna basıldığında oluşan fazla boşluğu önlemek için Shift
tuşuna basılı tutularak Enter tuşuna basılır. İmlecin hiç aralık vermeden bir alt satıra geçtiği
görülecektir.
İmleç metin üzerinde oluğu müddetçe properties panelinde metin özellikleri görünecektir. Bir
paragrafı ya da satırı sola, sağa ve ikiyana yaslamak için o paragrafın veya satırın tamamının
seçili olması gerekmez. İmlecin düzenlenmek istenen satırın veya paragrafın içerisinde
bulunması yeterlidir.
Properties panelinden faydalanarak metinleri düzenleyebilirsiniz.
2.10. Linkler (Bağlantılar)
Linkler, web sayfaları arasındaki bağlantının kurulmasını sağlayan kısa kodlardır. Bir web
sitesinde 6 çeşit bağlantı yapılır.
1. Site içi bağlantılar : Aynı site içindeki sayfaların birbirine bağlanmasıdır.
2. Site dışı bağlantılar : Diğer sitelere yapılan bağlantılardır.
3. E_Posta adresine yapılan bağlantılar.
4. Sayfa içi bağlantılar. (Çapa bağlantıları)
5. Dosya Bağlantıları
6. Map Bağlantıları
Birde bağlantıların Target özelliği vardır. Yani link verilen sayfanın (açılması istenen
sayfanın) nasıl açılacağını düzenleyen kodlardır.
2.10.1. Site içi Bağlantılar
Site içerisindeki sayfaların birbirlerine bağlanması için kullanılan bağlantı türüdür.
Sitemizde arabalar.html ve cicekler.html isimli iki sayfamız vardır. Bunlardan arabalar.html
sayfasını açınız sayfa içerisine Çiçekler metnini giriniz ve bu metni seçin. İnsert panelinde
command sekmesinde Hyperlink ( ) kısayol düğmesiya da İnsert /Hyperlink menüsünü
tıklayın. Açılacak olan Hyperlink penceresinin text kutucuğunda Çiçekler metni yer alacaktır.
Link kutucuğunun sağındaki klasörden faydalanarak cicekler.html sayfasını seçin ve ok
tuşuna basarak Hyperlik penceresine geri dönün.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 21
Hyperlik penceresinde link kutucuğunun dolu olduğu görülecektir. Target kutucuğunda
_blank, Parent, Self, top seçenekleri mevcuttur. Bunlar hedef sayfanın (açılması istenen
sayfanın,
_blank ; Yeni bir tarayıcı penceresinde,
Parent ; Yeni çerçevede
Self ; Aynı tarayıcı penceresinde,
Top ; Diğer çerçeveleri kapatarak bağlantıyı
tek çerçevede açar.
Bunlardan Parent ve Top seçenekleri
çerçeveler konusunda açıklanacaktır.
_blank seçeneğini işaretleyerek pencereden çıkınız. Üzerinde çalıştığınız arabalar.html
sayfasında bulunan Çiçekler metninin mavi renkte ve altının çizili olduğu görülecektir. Bu
işlemin tarayıcıda nasıl göründüğünü kontrol etmek için klavyeden F12 tuşuna basınız.
Sayfanın kaydedilmesi gerektiğine dair açılan mesaj penceresini onaylayarak (ok/evet)
kapatın. Tarayıcıda açılan sayfada Çiçekler metnine bir kez tıklandığında cicekler.html
sayfası yeni bir pencerede açılacaktır. Önceki sayfa araclar.html sayfası arka planda
kalmıştır.
Aynı işlemi tekrar ederek Hyperlink penceresinde Target kutucuğunu self olarak
işaretleyerek yapın ve deneyin. Yeni açılan sayfanın aynı pencerede olduğu görülecek ve
araclar.html sayfasının yerini alacaktır.
Site içi bağlantıyı yapmanın kısa yolu;
Çiçekler metni seçilir (araclar.html). properties panelinde bulunan Link kutucuğunun sağında
bulunan Point to File aracı sürüklenerek Files panalinde bulunan cicekler.html sayfasının
üzerine bırakılır. Böylece link tamamlanmış olur.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 22
2.10.2. Site Dışı Bağlantılar
Site alanı dışında bir URL adresine tanımlanan bağlantılardır. Bu tür bağlantılar
gerçekleştirilirken bağlantı yapılacak sitenin tam adresi yazılmalıdır. Yeni bir sayfa açarak
linkler.html adını verin. Sayfaya Emniyet Genel Müdürlüğü metnini girin ve seçin. Metin seçili
durumda iken properties penceresinin Link kutucuğuna http://www.egm.gov.tr yazın. Sayfayı
kaydedin ve tarayıcıda izleyin(F12). Tarayıcıda mavi renkli ve altı çizili Emniyet Genel
Müdürlüğü metnine tıklandığında Emniyet Genel Müdürlüğü web sayfası açılacaktır. Link
kutucuğuna tam adres girmeniz gerekmektedir. Link kutucuğuna www.egm.gov.tr olarak
yazmanız Dreamweaver CS3 tarafından hatalı link olarak kabul edilecektir.
Not : site dışı bağlantıların gerçekleşmesi için bilgisayarınızın internete bağlı olması gerekir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 23
2.10.3. E-Posta Adresine Yapılan Bağlantılar.
Bu tür bağlantılar elektronik posta adresine tanımlanan bağlantılardır. Tanımlanan bağlantı
tıklandığında ziyaretçinin e-posta programı açılır ve tanımladığınız e-posta adresi otomatik
olarak yazılır. Properties panelinde Link kutucuğuna mailto:e-posta yazılması yeterli
olacaktır. Boş bir sayfa açarak Eğitim Şube Müdürlüğü metnini yazın ve seçin Properties
penceresinden Link kutucuğuna mailto:[email protected] adresini girin. Yaptığınız işlemi
tarayıcınızda test edin.
E-Posta bağlantısını Insert /Email Link menüsünden açılacak olan Email Link Penceresinden
de yapabilirsiniz.
Not : E-Posta bağlantılarının gerçekleşmesi için bilgisayarınızın internete bağlı olması
gerekir.
2.10.4. Sayfa İçi Bağlantılar (Çapa Bağlantıları)
Uzun metin bilgilerinden oluşan web sayfalarında hızlı konumlanmayı sağlayan
bağlantılardır. Örneğin bu kitabın bağlantılar bölümünü web sayfasına yazdık. Sayfamızı
capa.html olarak kaydettik.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 24
Tarayıcı görünümü ise aşağıdaki gibi olacaktır.
Her maddenin açıklaması capa.html sayfasının aşağısında bulunmaktadır. Kullanıcı istediği
bilgiye daha hızlı ulaşabilmesi ve sitenin daha anlaşılır olması açısından madde
açıklamalarının bulundu bölümlere konumlandırma yapılmalıdır.
Capa.html sayfasında E-Posta Adresine Yapılan Bağlantılar isimli açıklamanın sonuna (sayfa
altında bulunan) imleç yerleştirilir. İnsert panelinin aşağısında bulunan Named Anchor
(çapa) düğmesine tıklanır açılan Named Anchor penceresine konum ismi yazılır. Onaylanır.
İmlecin bulunması
gereken yer
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 25
Yandaki görüntü elde edilecektir. Böylelikle çapa
imlecin bulunduğu yere konumlandırılır.
Şimdide konumlandırılan bu çapaya link verelim.
Sayfa başında bulunan (capa.html) 3. E-Posta Adresine Yapılan Bağlantılar maddesini
seçiniz. Properties panelinde bulunan Link kutucuğuna #e_posta yazınız. Kutudan çıkınız.
E-Posta Adresine Yapılan Bağlantılar maddesi mavi renkte ve altı çizili hale gelecektir.
Sayfanızı kaydederek tarayıcıda izleyebilirsiniz (F12). Sayfada bulunan diğer maddelerde bu
yöntemle birbirlerine bağlanır.
2.10.5. Dosya Bağlantıları
Web Sayfası haricinde yapılan bağlantılardır. Sıkıştırılmış bir dosya (rar.zip formatlı
dosyalar.) tarayıcı tarafından tanınmadığı için tarayıcı bu dosyayı Download yapmak
isteyecektir. Ziyaretçiye klasör gönderilmek isteniyorsa içerik sıkıştırılarak yeni oluşan
sıkıştırılmış dosyaya link verilir.
Tarayıcılar jpg, gif gibi resim formatlarını tanır. Örneğin arabalar.html sayfasını açın.
Sayfada bulunan araç resmini silin. Sayfanın uygun bir yerine “Arabam” metnini yazın. Bu
metni seçin sonrada Properties panelindeki Link kutucuğunun yanındaki Point To File
aracını sürükleyerek Files Panelinde bulunan araba.jpg isimli resim dosyasının üzerine
bırakın. Arabam metni link halini aldıktan sonra sayfayı tarayıcıda izleyiniz.
Arabam metnine tıklayınca araba.jpg resim dosyasının tarayıcıda açıldığı görülecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 26
2.10.6. Map Bağlantıları
Web sayfalarında bir bağlantı sadece bir
sayfaya veya bir hedefe konumlandırılır. Fakat Map
Bağlantıları ile bir resim üzerinde birden fazla
hedefe
(sayfaya)
yönlendirilen
bağlantılar
oluşturulur. Genellikle harita resimlerinde kullanılır.
Örneğin Türkiye iller haritasını düşünelim. Her ilin
üzerine tıklandığında o ile ait sayfanın açılması
istenilirse;
kullanılacak
olan
yöntem
Map
Bağlantılarıdır. Properties penceresinin sol alt
kısmında bulunan araçlar Map Bağlantısı araçlarıdır.
Aşağıdaki örnekte görüldüğü üzere sitede yeni bir sayfa açın (harita.html) ve Türkiye iller
haritası resmini (harita.jpg) bu sayfaya yerleştiriniz. Sayfayı kaydedin. Resmin üzerine
tıklandığında (resim seçili halde iken) Properties penceresinin sol altında Map araçları yer
alacaktır. Kare şeklindeki araç, dikdörtgen ve kare tipi seçimler için kullanılır. Diğer araç ise
bağımsız/serbest çizimler için kullanılır. Şekilde görüldüğü gibi bu aracı kullanarak Türkiye
haritasından Ankara ilini seçiniz. Properties penceresinin Link kutucuğuna ise ankara.html
yazın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 27
Türkiye haritasının bulunduğu (harita.html) sayfadan Ankara iline tıklandığı zaman Ankara
ilinin ayrıntılı haritasının açılması planlanmaktadır. Yeni bir sayfa daha açın Ankara
haritasının resmini (ankara.jpg) sayfaya yerleştirin. Sayfayı ankara.html olarak kaydedin.
Şimdi de Türkiye haritasının bulunduğu sayfayı tarayıcıda izleyin. Haritada Ankara ilinin
üzerine gelindiğinde el resmi çıkacaktır. Bu bölüm tıklandığında ise Ankara iline ait harita
açılacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 28
3. TABLOLARLA ÇALIŞMAK
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 29
3.1. Tablo Eklemek
Bir sayfaya tablo eklemenin en kısa yolu Insert
Paneli/Common sekmesinde bulunan tablo
ekleme düğmesidir.
Tablo ekleme işlemi
üzerinden de yapılabilir.
İnsert/Table
menüsü
Açılan Table Penceresi içerisinde Table Size
bölümünde
Rows : Yeni açılacak olan tablonun kaç satır
olacağını,
Columns : Açılacak olan tablonun kaç sutun
olacağını.
Table Width : Tablonun yüksekliğini
Border Thickness : Tablo çizgi kalınlığını
Cell Padding : Hücre içi boşlukları
Cell Spacing : Hücre çerçeveleri arasındaki
uzaklığı ifade eder.
Header
bölümünde
alternatiflerini içerir.
tablo
başlıklarının
Caption : Tablonun ismi
Align Caption : Tablonun isminin konumunu düzenler.
Summary : Tablo hakkında özet bilgilerin yazıldığı kutucuktur.
Yukarıdaki tablo ekleme penceresine göre üç
satırlı ve üç sütunlu bir tablo oluştu. Başlık
bölümünü üst olarak seçtiğimiz için birinci satır
hücrelerine yazılan yazılar kalın olacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 30
3.2. Tablo Özellikleri
Tabloya ait properties penceresinin görülebilmesi için tablonun seçili olması gerekir. Tablo
ekleme penceresinin özellikleri properties panelinde de mevcuttur. Bu paneli kullanarak ta
tablo üzerinde bir çok işlemi gerçekleştirebilirsiniz. Rows ve Cols kutucuklarını kullanarak
satır veya sütun sayısını yeniden belirleyebilir, tablo genişliğini değiştirebilir, tablonun sayfa
içerisinde konumunu (Align) belirleyebilirsiniz. Burada yaptığınız değişiklikler eşzamanlı
olarak tabloda da görülecektir. Hatta daha önceden hazırlanmış olan bir tablo modelini
mevcut tablonuza uygulayabilirsiniz (Class). Ancak farklı tablo modellerinin uygulanması için
önce CSS bölümünün öğrenilmesi gerekmektedir.
Tablo arkasına bir resim
ekleme.
Tablonun sayfa içerisinde
ortalanması, sağa, sola
yaslanması
Border: Kenarlık kalınlığı
Bg color: bölümünden tablo rengini belirleyebilir,
Brdr Color: bölümünden tablo kenarlık rengini belirleyebilirsiniz.
Bg Image: Bu bölümde tablo arkasına bir resim yerleştirebilirsiniz. Bu resim tablonun boyutu
ile aynı olmalıdır. Tablo ile aynı boyutta olmayan resimler tablodan taşma problemi
yaratacaktır.
Hücreleri Birleştirmek :
Tasarımda sık sık kullanılan tablo hücrelerinin birleştirilmesi
için birleştirilmesi gereken hücreler seçilir. Properties
penceresinin sağ tarafında bulunan Merges Selected Cells
(seçili hücreleri birleştir) düğmesini tıklayarak seçilmiş olan
hüçreler birleştirilir.
Aynı işlemi seçili hücreler üzerinde sağ tıklayarak table
sekmesinden Merge Cells seçilerek yapılır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 31
3.3. Tablo Hücrelerinin Bölünmesi :
Tasarım sırasında bir hücreyi ikiye ya da daha fazla hücreye
ayırmanız gerekebilir. Bu durumda bölünmesi gereken hücre
seçilerek (üzerine tıklanır) Properties penceresinin sağ altında
bulunan Split Cell into row and Column (Hücreleri satır veya sütunlara
böl) düğmesine tıklanır.
Açılan Split Cell penceresinde Rows radio butonu, hücrenin satırlara ayrılacağını, Columns
radio butonu hücrenin sütunlara ayrılacağını ifade eder. Number of Coumns kutucuğu ise
hücre satırlara bölünecekse kaç satıra bölüneceğini, hücre sütunlara bölünecekse kaç
sütuna bölüneceğini ifade eder. Bu kutucuğu kullanarak satır sayısını veya sütun sayısını
belirleyin.
Hücreyi Satırlara böl
Hücreyi Sutunlara böl
Hücre ya da satır sayısını belirleyin
3.4. Tabloya Satır Ekleme:
3.4.1
Tabloya satır eklemenin en hızlı
yolu tablonun son hücresine
gelerek klavyeden tab tuşuna
basmaktır.
3.4.2
Tab tuşu ile açılan satırlar
tablonun sonuna eklenir. Eğer
araya satır eklenmek istenirse
tablo üzerinde sağ tıklanarak
Table / İnsert Row seçilerek
imlecin bulunduğu satırın üzerine
yeni bir satır eklenecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 32
3.4.3
Tabloya Satır Ekleme işlemini diğer seçenekleri kullanarak yapabilmek için,
İnsert / Table Objects menüsü kullanılır. Burada Insert Row Above, imlecin
bulunduğu satırın üstüne, Insert Row Below, imlecin bulunduğu satırın altına
yeni bir satır ekler.
3.4.4
Properties penceresinde Rows bölümüne
satır sayısını eklenmek istenilen satır kadar
arttırarak yeni satırlar oluşturabilirsiniz. Bu
işlem için mevcut tablonun seçili halde
olması gerekir.
3.5. Tabloya Sütun Ekleme :
Tabloya sütun eklemenin de birden fazla yolu vardır.
3.5.1. Tablo üzerinde sağ tıklayarak Table /
Insert Column menüsünden yeni bir sütun
oluşacaktır.
3.5.2. Insert / Table / Insert Column to The Left
menüsünden imlecin bulunduğu sütunun
soluna ya da Insert /Table /Insert Column to
The Right ile imlecin bulunduğu sütunun
sağına yeni bir kolon ekleyebilirsiniz.
3.5.3. Properties panelinden Column bölünü
kullanarakta mevcut tablonun sütunlarını
çoğaltabilirsiniz.
Columns
bölümünde
bulunan sütun sayısını istenildiği kadar
attırabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 33
3.6. Satırların, Sütunların ya da Tablonun Silinmesi
3.6.1. Silinmek istenen satır, sütun ya da Tablo seçilerek klavyeden Delete tuşuna
basılır.
3.6.2. Silinmek istenen satır ya da sütun üzerinde sağ tıklayarak Table / Delete
Row, Delete Column sekmesinden satır ya da sütun silinir.
3.6.3. Properties panelinde Satır ya da sütun eklemek için kullanılan Rows ve
Columns bölümünden satır yada sütun sayıları azaltılarak satır ya da sütunlar
silinir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 34
4. DREAMWEAVER CS3’DE CSS
KULLANIMI
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 35
4.1. CSS nedir?
CSS; Basamaklı Stil Sayfası ( Cascading Style Sheets)
Web sayfalarında kullanılan metin, resim, link, table, vb. nesnelerin her sayfada tek tek
yeniden düzenlenmesi yerine bu nesnelere ait tanımlama sayfası (css) oluşturularak
nesnelerin kullanımını standart hale getirmektir.
CSS’in en belirgin özelliği tarayıcılara standart imlerini nasıl görüntüleyeceğini söylemesidir.
4.2. CSS Türleri (Stil Şablonları)
1. Yerel CSS
2. Genel CSS
3. Harici CSS
4.2.1. Yerel Stil Şablonları
Yerel stil şablonları XHTML belgesinin body bölümüne yazılırlar. Sadece bir kereliğine
yazıldıkları yerde etkili olurlar.
<body>
CSS Türleri
</body>
CSS olmadan yazılan başlık yazısı
<body>
<h1 style="color:#000000; font:Tahoma; font-size:16px">CSS Türleri</h1>
</body>
Yerel Stil Şablonu (CSS) uygulanmış yazı
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 36
4.2.2. Genel Stil Şablonları
Yerel stil şablonlarının aksine genel şablonlar HTML belgesinin head bölümüne yazılır ve
tüm belgeyi etkilerler.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style type="text/css">
<!-.style1 {
font-family: Tahoma;
font-size: 16px;
}
-->
</style>
</head>
<body>
<span class="style1">CSS Türleri</span>
</body>
Genel Stil Şablonu Uygulanmış Sayfa
4.2.3. Harici Stil Şablonları
CSS in sizi büyük bir yükten, yani her sayfa için ayrı ayrı kod yazmaktan kurtaran türü, harici
stil şablonlarıdır. CSS in bu türünde site içerisine *.css isminde bir dosya açılır. Metin, resim,
link, table vb. nesnelere ait özellikler bu dosyada tanımlanır. Css dosyası her sayfanın
başında head bölümünden çağrılarak kullanılır.
Harici bir CSS sayfası
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 37
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />//Harici CSS
sayfasını web sayfasına çağıran html kodu
</head>
<body>
<h1 class="yeni">CSS Türleri</h1>
</body>
</html>
Harici CSS uygulanmış bir web sayfası
4.3. Dreamweaver CS3’de CSS Yapma
Dreamweaver CS3 ile kod yazmadan CSS uygulamaları yapılabilir.
CSS oluşturmak için sağ taraftan CSS panelinden CSS Styles
sekmesini seçin. Bu sekmeden All seçeneğini seçin. Eğer bu sekme
görünmüyor ise window menüsünden CSS Styles seçeneği ile bu
sekme görünür hale gelecektir.
Yeni CSS oluşturmak için bu pencerinin en altında bulunan “New
CSS Rule” simgesi
seçilir. Karşımıza New CSS Rule Penceresi
gelecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 38
Selector Type : Oluşturulacak seçicinin tipi buradan belirlenir.
•
•
•
Class (can apply to any tag) : Bu seçenek işaretlenirse yeni bir class
(sınıf)oluşturulur. name bölümüne de isim girilerek class’a isim verilir.
Tag (redefines the look of a specific tag) : Bu seçenek ile mevcut html taglarına
biçimlendirmeler uygulanabilir. Html tagı kendi biçimlendirmesinin yanı sıra
belirtilecek biçimlendirmeleri de kullanır. Bu seçeneğin seçili olması durumunda
resimde görünen name bölümü tag olarak değişecek ve bu bölümde html tagları
listelenecektir. Bu taglardan istenilen seçilerek biçimlendirmeler yapılabilir.
Advanced (IDs, pseudo-class selectors) : Bu seçenek ile link biçimlendirmeleri
yapılabilir. Bu bölüm seçili olduğu zaman name bölümü Selector olarak değişecektir.
Name : Bu bölüm seçilecek seçici tipine (selector type) göre değişir.
•
•
•
Name : Eğer class seçili ise bu bölüm name olacaktır. Buradan yeni oluşturulacak
class (sınıf) için isim belirtilir.
Tag : Eğer tag seçili ise bu bölümün adı tag olur ve html tagları listelenir. İstenilen
html tagı seçilerek bu taga biçimlendirmeler uygulanır.
Selector : Eğer Advanced seçili ise bu bölümde direk isim girilebilir ve link
biçimlendirmeleri yapılabilir.
o a : link : Linkin normal durumda biçimi.
o a:visited : Daha önceden ziyeret edilmiş link biçimi.
o a:hover : Fare linkin üzerinden geçerken.
o a:active : Fare ile linke tıklandığı an linkin biçimi.
Define in : Oluşturulacak CSS nerede oluşturlacağı buradan belirlenir.
•
•
New Style Sheet File : Yeni bir stil dosyası oluşturmak anlamına gelir. Yani css
uzantılı farklı bir sayfa oluşturmak. Buna harici css sayfası denir. Oluşturulan harici
css dosyasını sayfada kullanabilmek için “New CSS Rule” simgesinin solundaki
“Attach Style Sheet” simgesi kullanılır.
This document only : Bu seçenek seçili durumda ise css aynı sayfa içerisinde
oluşturulacak demektir. Bu css html kodlarında tagları arasında oluşur ve body
tagları arasından çağrılarak sayfaya uygulanır. Buna genel CSS denir.
Oluşturulan CSS’in Uygulanması :
Eğer genel css oluşturduysanız zaten sayfanın head tagları arasında tanımlı olduğu için direk
uygulaması vardır. Harici css oluşturduysanız bu css’i sayfa ile ilişkilendirmeniz gerekir.
Bunun için “New CSS Rule” simgesinin solundaki “Attach Style Sheet” simgesi kullanılarak
harici css dosyası seçilir.
Herhangi bir yazı veya resim seçilir ve properties (özellikler) bölümünden style seçeneği
altında oluşturulmuş css lerin listesi listelenir. Buradan istenen biçimlendirme seçilir ve
nesneye uygulanır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 39
4.4. Örnek Stil Dosyalarını Kullanma
Dreamweaver CS3’de bulunan örnek CSS dosyalarını kendi sayfanızda kullanabilirsiniz.
Bunun için ;
CSS panelinin CSS Style / all sekmesinde Attach Style Sheet
düğmesine tıklayın.
Açılan Attach External Style Sheet penceresinin altında bulunan Sample Style Sheets
bağlantısına tıklayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 40
5. CANLI MENÜ EKLEME
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 41
5.1. Spry Menu Bar
Dreamweaver CS3 ile gelen özellik ile sayfaya dikey ya da yatay şekilde menüler
ekleyebiliriz. Menüleri sayfa içinde başka bir sayfaya ulaşmak ya da başka bir siteye
bağlanmak için menüleri kullanabilir.
Bir web sayfasına menü ekleyebilmek için;
Insert / Spry / Spry Menu Bar seçeneğini tıklayın. Spry Menu Bar penceresinden Horizontal
(yatay) ya da vertical (dikey) seçeneklerinden birini seçin.
İmlecin bulunduğu bölümde seçiminize uygun bir menü bar oluşacaktır. Menü barda
varsayılan olarak 4 ana menü bulunacaktır. Menu bar seçili halde iken Properties
penceresinde menüye ait özellikler yer almaktadır.
Ana Menü
Menü alt başlıkları
Menü başlıklarının ismini
değiştirmek için Text
kutucuğundan faydalanın
Menüye ait başlık isimlerini menü başlığı seçili halde iken text kutucuğundan değiştirin.
Şablon olarak hazırlanmış bu menüyü kendinize uyarlayın. Menü başlıkları silmek veya yeni
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 42
bir menü başlığı eklemek için
yapmak için
düğmelerini kullanın. Menü başlıkları arasında sıralama
düğmelerini kullanın.
Menüyü farklı bir görünümde görmek için properties penceresinde bulunan Turn Styl Off
düğmesini tıklayın.
Menü başlıklarını bu görünümde daha rahat düzenleyebilirsiniz.
Düzenlenmiş bir menü bar tarayıcıda aşağıdaki gibi yayınlanacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 43
6. ROLLOVER IMAGE
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 44
6.1. Rollover Görüntü Oluşturmak
Web sayfasında durağan resimler sayfanın basit olarak tasarlandığı hissini yaratacaktır.
Rollover, imlecin (farenin) bir obje üzerine götürüldüğünde objede meydana gelen durum
değişikliğidir.
Basit bir rollover uygulaması için iki ayrı resmi ihtiyaç duyulmaktadır. Bu resimleri Photoshop
veya Fireworks vb. programlar yardımı ile yapabilirsiniz.
Rollover yapabilmek için;
Yeni bir sayfa açarak kaydedin.
Bu konuda iki ayrı resim kullandık. Bunları (a1.jpg) ve (a2.jpg) olarak isimlendirdik.
Sayfada normal olarak görünecek buton (a1.jpg)
Mause üzerine gelince görünecek buton (a2.jpg)
Açtığımız yeni sayfada insert panelinin Commond
sekmesinde bulunan Rollever düğmesini seçin
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 45
İnsert Rollover Image isimli pencerede rollover seçenekleri yeralmaktadır.
Image Name : Rollover imalge objesine bir isim vermek zorundayız. Fakat çok ta önemli
değil. Dreamweaver CS3 bizim için otomatik isimlendirme yapacaktır. Sayfanızda rollover
özelliği fazla kullanılırsa anlamlı isimler vermeniz önerilir.
Orginal Image : Adından da anlaşılacağı üzere orijinal resim dosyasını seçiyoruz. Bu resim
(buton) sayfa ilk açıldığında görünmesi gereken dosyadır (a1.jpg).
Rollover Image : Bu ise fare linkin (butonun) üzerine geldiğinde görünecek resmi ifade eder
(a2.jpg)
Preload Rollover Image : Rollover resimlerinin yüklenmesi uzun sürebilir. Bu süre zarfında
ziyaretçi linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye
çalışılacaktır. Bu ise hoş olmayan bir görüntüye yol açacaktır. Bu seçeneği kullanarak
rollover image arka planda yükleninceye kadar orginal image’nin (a1.jpg) arka planda sabit
kalmasını sağlayabiliriz. Böylece bu sorunda ortadan kalmış olur.
Altermate Text : Bazı durumlarda rollover çalışmadığında görülecek olan yazıdır. Bazı
tarayıcılar rollover işlemini tanımamaktadır. Her türlü olasılığa karşı alternatif bir yazının
bulunması gerekir. Bu özellik aynı zamanda fare ile resmin (butonun) üzerine gelindiğinde bir
açıklama metni olarak görülecektir.
When Clicked Go to URL : Butona tıklandığında (a1.jpg) çalışması gereken bağlantı (link )
adresidir.
Insert Rollover Image penceresinin seçeneklerini uyguladıktan sonra sayfayı kaydederek
tarayıcıda yayınlayın.
Sayfa açıldığında görünen buton
Fare üzerine geldiğinde görünen buton
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 46
7. NAVİGATİON BAR
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 47
Önceki konumuzda rollover image nesnesinin özelliklerini anlattık. Rollover özelliğini kısaca;
imlecin (farenin) bir obje üzerine götürüldüğünde objede meydana gelen durum değişikliği
olarak tanımladık.
Dikkat edilirse sadece farenin obje üzerine getirilmesinden söz edilmekte. Oysa farenin obje
üzerinde birden fazla işlemi vardır. Normal hal (up), üzerine gelme (over), tıklama (down),
ayrılma (out) gibi.
Farenin hareketine göre objenin alacağı duruma navigation denir. Yani navigation, rollover
özelliğine göre daha kapsamlıdır.
Farinin obje üzerinde alacağı görüntüleri daha önceden resim tasarlama programları ile
düzenledik. Bu konuda Photoshop veya Fireworks programlarından faydalanabilirsiniz.
Bir düğmenin 4 farklı durumu olabilir. Bunları ayrı ayrı resimlerdirdik.
Sayfa açıldığında görülecek obje
(up image)
(a1.gif)
Mause üzerine geldiğinde görülecek obje
(over image)
(a2.gif)
Tıklandığında görülecek obje
(Down image)
(a3.gif)
Mause ayrıldığında görülecek obje
(over down image)
(a4.gif)
Navigation Bar’da kullanılacak resimler
Yeni bir sayfa açarak navigation.html adında kaydedin.
Insert Paneli/Commond/Navigation Bar sekmesini seçin.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 48
Açılan Insert Navigation Bar penceresinde objelerin düzenlemesini yapabileceğiniz bölümler
mevcuttur.
Nav Bar Elements kutucuğu ve Element Name kutucukları daha önce rollover
yapmadığınız için Unnamed1 olarak gelecektir. Aşağıdaki kutucukları doldurdukça buradaki
isim otomatik olarak değişecektir. Bu kutucuklara kendinizde farklı bir isim verebilirsiniz.
Up Image
: Düğmenin ilk hali
Over Image
: İmleç (fare) düğmenin üzerine geldiğinde görüntülenecek resim.
Down Image
: Düğmeye tıklandığında görüntülenecek resim.
Over While Down : Düğme basılıyken, fare düğmenin üzerinden çekildiğinde
görüntülenecek resim.
Preload Images : Oluşturduğunuz döngülü resmin sayfa yüklenirken çağrılmasını sağlar.
Sayfa ilk yüklendiğnide Navigation Bar içerisinden çağrılacak diğer resimler tarayıcı ara
belleğine alınır. Bu şekilde resimlerin yüklenmesi esnasında oluşacak gecikmelerin önüne
geçilmiş olur.
Show Down Image Initially : Down image seçeneğinde tanımlanan resmin doküman
penceresinde öncelikli olarak gösterilmesini sağlar. Bu seçeneğin işaretli olmadığı durumda,
Up İmage alanında tanımlı resim gösterilir.
In : Döngülü resme oluşturulan bağlantının nerede açılacağını ifade eder. Normal bir sayfada
oluşturulan bir bağlantı, yeni pencerede açılır. Sayfa çerçevelerden oluşuyorsa bağlantının
hangi çerçevede açılması gerektiği belirtilmelidir.
Insert : Oluşturulacak olan Navigation Bar’ın sayfada yatay ya da dikey olarak gösterilmesini
sağlar.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 49
Use Tablo (Tablo Kullan) : Navigation Bar’ın bir tablo içinde oluşmasını sağlar.
Insert Navigation Bar penceresinde düzenlemeler tamamlandıktan sonra onaylayarak
pencereyi kapatın.
Sayfayı tarayıcıda izleyin (F12).
Up image
Over image
Down image
Over While Down
Farenin hareketlerine göre resmin aldığı durumlar.
Bu işlemi sayfanızda kullanacağınız tüm butonlar için tek tek uygulayın.
Bu işlemi tek tek uygulamak sıkıcı olabilir. Fakat yeni başlayanlar için en iyi yöntemdir.
Insert Navigation Bar penceresinde bir defada tüm butonlara navigation özelliği
uygulayabilirsiniz.
Nav Bar Elements kutucuğunda sadece bir resim için (Ana Sayfa) işlem yaptık. Bu nedenle
bir düğme ismi yeralmaktadır.
düğmelerini kullanarak yeni bir düğme ekleyip
çıkarabilirsiniz. Yeni düğme eklenince diğer kutucuklar boşalacaktır. Tüm kutucukları yeni
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 50
resim için tekrar doldurunuz. Nav Bar Elements kutusundaki resimlerin (botonların,
elementlerin) sırasını aşağı ve yukarı düğmelerini kullanarak değiştirebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 51
8. (CANLI) SEKMELİ PANEL
Spry Tabbed Panel
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 52
8.1. Spry Tabbed Panel
Adobe DreamWeaver CS3 ile gelen sekmeli paneli kullanarak görselliği ve kullanımı
arttırabilirsiniz.
Insert / Spry / Spry Tabbed Panel menüsünü seçin . İki sekmeden oluşan bir panel sayfaya
eklenecektir. Panel başlığını tıklayarak Properties paneli yardımı ile panel içerisindeki sekme
sayısını, sekme metnini ve sekmelerin içerdiği metinleri düzenleyebilirsiniz.
Insert panelinde Common sekmesinden Spry Tabbed Menu düğmesini kullanarak daha
pratik olarak sekmeli panel ekleyebilirsiniz.
Sekme
Sekme içeriği
Yeni Sekme
Ekle / Sil
Sekme sırasını
Değiştirme
Sayfa
açıldığında ilk
olarak hangi
sekme gelsin
Properties panelini kullanarak yeni sekme ekleyebilirsiniz. Sekmelerin sırasını belirleyebilir,
içeriklerini değiştirebilirsiniz. Sekme içerisini tıklayarak Page Properties (sayfa özellikleri
penceresi) özelliklerinden normal sayfada kullanılan tüm özellikleri sekme sayfasında da
kullanabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 53
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 54
9. AKORDİON PANELİ
Spry Accordion
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 55
Yeni bir sayfa açarak accordion.html olarak kaydediniz.
Insert Panelinden spry panelini tıklayın. Spry sekmesinden Spry Accordion düğmesini
tıklayın.
Sayfaya iki etiketli spry accordion eklenecektir.
Accordion
içeriği
Accordion
Etiket ismi
Accordion
Etiketleri
Accordion
Ekle
Accordion
Sırası
Accordion etiketlerinin üzerine tıklayarak isimlerini değiştirebilirsiniz. Accordion başlığını
tıklayarak Properties panelinden yeni bir accordion ekleyebilir, sırasını değiştirebilirsiniz.
Accordion içeriğinde Content yazan kelimeye tıklayarak accordion içeriğini değiştirebilirsiniz.
Düzenlenen Accordion panelinde gezinti yapabilmek izin hangi etiketin üzerine gelirseniz o
etiketin sağ tarafında bir göz işareti oluşacaktır. Buraya tıkayarak etiketin içeriğini
görebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 56
Accordion Paneli sayfaya eklendiğinde Dreamweaver CS3 arka planda accordion.css ve
accordion.js sayfaları oluşturur. Bunlar accodion’un çalışması için gerekli olan style ve jawa
script kodlarını içerir.
Css dosyası açık iken (accordion.css) CSS Styles panelinin All Rules bölümünden
accordion ile ilgili kod gruplarına ulaşabilirsiniz. Burada kodlar farenin hareketine göre
nesnelerin alacağı durumu gösterir. Dolayısı ile kodlar gruplandırılmıştır. All Rules
bölümünün altında “Properties For …….. “ bölümünde her grubun özelliklerini
değiştirebileceğiniz bir bölüm vardır. biraz css kod bilgisi olan kullanıcılar bu kodlar üzerinde
değişiklik yaparak Accordion renklerini değiştirebilirler.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 57
10. CANLI KATLANABİLİR PANEL
Spry Collabsible Panel
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 58
Spry Collabsible Panel Dreamweaver CS3 ile gelen yeniliklerden birisidir. Accordion Panel
yapısına çok benzemektedir. Fakat tek bölümden oluşur. Spry Collabsible Panel’den birden
fazla ekleyerek accordion gibi çalıştırabilirsiniz. Accordion’dan farklı olarak paneller
birbirlerinden bağımsızdırlar. Dolayısıyla panelin biri açıkken diğeride açık olabilir. Tüm
özellikleri accordionun özelliklerine benzer.
Yeni bir sayfa açarak kaydedin.
İnsert Paneli / spry sekmesinden spry collabsible ekleyeyin. Aynı işlemi insert / spry
menüsünden de yapabilirsiniz. Eğer kayıtlı bir sayfa üzerinde spry collabsible eklemeye
çalışırsanız Dreamweaver CS3 sizi sayfanın kaydedilmesi gerektiği konusunda ikaz
edecektir.
Spry Collabsibleye ait özellikler ise;
Display : Dreamweaver CS3 de panelin kapalı ya da açık kullanılacağını ifade eder.
Default State : bölümü sayfa yüklendiğinde içerik katının açık ya da kapalı olma durumunu
gösterir.
Enable animation : içeriğin kayarak açılması için kullanılır.
Diğer tüm özellikleri accordion ile aynıdır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 59
11. FLASH NESNELERİ EKLEME
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 60
Oluşturduğunuz web sayfası içerisine çeşitli nesneler ekleyerek sayfanın zengin bir
içerik kazanmasını sağlayabilirsiniz.
Dreamweaver CS3’de sayfa içerisine flash nesneleri eklemek için insert paneli /
media düğmesi kullanılır.
11.1. Flash Filmleri Ekleme :
Flash filmlerinin uzantısı SWF dir.
Adobe Flash vektörel tabanlı web animasyon programıdır. Bu nedenle flash ile
hazırlanan filmlerin boyutu küçüktür. Web sayfalarında oldukça fazla kullanılmaktadır.
flash filmleri swf formatındadır. Sayfanıza swf filmi eklemeden önce ilgili filmi site
klasörünüze taşımalısınız.
İnsert panelinden Flash düğmesini tıklayın ve açılan pencereden site klasörünüz
içerisinden bir swf filmi seçin.
Seçim işlemi tamamlandıktan sonra Object Tag Accessibility Attributes penceresi
açılacaktır. Bu pencereyi iptal diyerek geçebileceğiniz gibi filme bir başlık yazabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 61
Eklediğiniz flash filmi Dreamweaver CS3 doküman penceresinde görünmez. Bunun yerine
doküman penceresinde flash simgesinin bulunduğu resim gösterilir. Flash filmini tam olarak
izleyebilmek için sayfayı tarayıcıda açmanız gerekir.
Dreamweaver CS3’e eklenen tüm nesnelerin
bölümünde bu nesneyle ilgili özellikler yeralır.
özelliklerinin
düzenlendiği properties
Name (isim) : Sayfada flash filminin adıdır.
W (width), H (Height) ; flash filminin genişlik ve yüksekliği belirlenir.
V Space : Flash filminin sayfa içerisindeki dikey konumunu belirler.
H Space : Filmin yatay konumunu belirler.
File (Dosya) : Filmin yüklendiği yolu (klasörü) gösterir. Burayı kullanarak sayfaya etkin
filmden farklı bir film ekleyebilirsiniz.
Quality : Kalite : filmin kalitesinden ödün vererek sayfa içerisinde daha hızlı çalışmasını
sağlayabilirsini.
Low : Düşük
High Yüksek
Auto Low : otomatik düşük
Auto High : otomatik yüksek
Scale (ölçeklendirme) : Flash player ile ilgili bir seçenektir. Filmler bir menü yardımı ile
yakınlaştırılıp uzaklaştırılabilir. Varsayılan değer olarak Default (show all- tümünü göster)
seçeneği seçili durumdadır. Böylelikle sayfa ilk açıldığında filmin tamamı gösterime hazırdır.
Align : sayfanın yatay eksende hizalanmasında kullanılır.
Bg : Film alanına ait zemin rengini belirtir. Eğer Flash filmi için şeffaf bir zemin kullanılmışsa,
filmin tabanında bu renk gösterilir. Tabanda şeffaf olmayan bir renk varsa tanımlanılan renk
filmin yüklenme esnasında gösterilecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 62
Auto Play : Tarayıcı ekranında bazı komutlarla film oynatılıp durdurulabilir. Sayfa açıldığında
filmin otomatik olarak başlamasını istiyorsak bu seçenek seçili olmalıdır. AutoPlay seçili
olmazsa tasarım aşamasında filmi oynatmak için çeşitli kodlar yazılmaldır.
Loop : Filmi sonsuz bir döngüye sokar. Yani film bittiğinde baştan tekrar oynatılır.
Play : bu özellik ile filmleri tarayıcıda oynatmadan önce Dreamweaver CS3 tasarımında
izleyebilirsiniz.
Reset Size : Web sayfasına eklenen filmin boyutları ile oynanmış ise bu boyutları orijinal
hale getirmek için kullanılır.
Parameters: Sayfada filmin başlaması için çeşitli parametrelerin yerine getirilmiş olması
istenirse bu parametreleri karşılayan kodların yazıldığı bölümdür. Bu özellik için bazı script
dillerine hakim olmak gerekir.
11.2. Flash Butonu Ekleme :
Flash butonlarının uzantısı SWF dir.
Kayıtlı bir sayfaya Insert /Common sekmesini kullanarak sayfaya bir buton ekleyin. Insert
Flash Button penceresinden buton ile ilgili özellikleri girin.
Button Text : Buton üzerinde görülecek isim.
Font / Size : Yazı tipi ve büyüklüğü
Link : butonun açması gerektiği sayfa belirtilir.
Target : Verilen linkte sayfanın yeni bir sayfadamı yoksa mevcut sayfanın kapanıp yerine link
verilen sayfanın açılması gerektiği belirlenir. Çerçeveli sayfalarda ise açılacak sayfanın hangi
çerçevede açılacağının belirlendiği bölümdür. Target bölümü hakkında daha fazla bilgi
edinmek için bağlantılar bölümünü inceleyiniz.
Bg Color : düğme zemininde gösterilecek renktir. Varsayılan olarak sayfanın rengidir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 63
Save as : Tasarladığınız düğme flash nesnesi olduğu için düğme site içerisinde swf uzantılı
bir flash dosyası olarak saklanır. Sienizde butonu hangi isimde saklamak istiyorsanız bu
alana yazınız. Bu alanı boş bırakırsanız Dreamweaver CS3 butonları otomatik olarak
isimlendirecektir.
Get More Style : Daha fazla buton için Adobe sayfasına yönlendirilmenizi sağlar.
Sayfa yüklendikten sonraki properties panelinde bulunan tüm özellikler Flash filmi nesnesinin
özellikleri ile aynıdır.
11.3. Flash Metni Ekleme :
Sayfaya sade görünümlü bağlantı yazıları eklemek için Flash metinlerini kullanabilirsiniz.
Kayıtlı bir sayfada Common sekmesinden Flash Text düğmesine tıklayın.
Insert Flash Text penceresi açılacaktır.
Flash text penceresinin özellikleri diğer flash nesnelerin özellikleri ile aynı yapıdadır.
Yazılarınızı bu özellikler doğrultusunda hazırlayabilirsiniz.
11.4. Flash Paper Ekleme :
Flash Paper, Adobe’nin tarayıcı üzerinden belgeleri sunmak için geliştirdiği bir formattır.
Vektörel içerikli ve kalitelidir. Uzantısı SWF dir.
İnsert / common panelinden FlashPaper düğmesine tıklandığında Insert FlashPaper
penceresi açılacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 64
Source (kaynak) kutucuğundan sitenizde bulunan swf uzantılı bir dosya seçin.
11.5. Flash Video Ekleme :
Sayfaya Flash video (FLV uzantılı video dosyası) eklemek için insert /common dan Flash
video düğmesine tıklayın.
Insert Flash Video penceresinden ;
Video tipi : Bu bölümde video tipini seçin.
URL : Filmi site klasöründen seçin
Skin : Filmin gösterimini sağlayacak player için bir görünüm seçin
Message : Filmin gösterimini sağlayacak Adobe Flash Player’ın yüklü olmadığı durumlar için
mesaj yazın.
Flash video’nun çalıştığını görebilmek için tarayıcı ekranında çalıştırmanız gerekir.
11.6. Shockwave Filmi Ekleme :
Shockwave, sıkıştırılmış bir özellik olduğu için web ortamında oldukça hızlıdır. Flash filmi
seçenekleri ile aynı özelliklere sahiptir. Shockwave SWF uzantılı flash dosyalarında çalışır.
İnsert /common sekmesinden kaydedilmiş bir sayfaya Shockwave filmi ekleyebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 65
12. FOTOĞRAF ALBÜMÜ OLUŞTURMA
Create Web Photo Album
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 66
12.1. Fotoğraf Albümü Oluşturma
Hazırladığınız sitede bir fotoğraf albümü oluşturabilirsiniz. Dreamweaver CS3 seçtiğiniz
fotoğrafları albüm haline getirecektir.
Dreamweaver CS3’de bir fotoğraf albümü oluşturmadan önce konu ile ilgili resimleri
hazırlayarak siteniz içerisinde bir klasörde toplamanızı öneririz. Birde albümün sayfalarının
ve diğer materyallerinin toplanacağı yeni bir klasör oluşturmalısınız.
Biz sitemizde albümde kullanacağımız resimlerin bulunduğu resimler/manzara ve albüm
sayfalarının ve diğer materyallerin toplanacağı resimler/photo isimli iki yeni klasör
oluşturduk.
Dreamweaver CS3 ile bir fotoğraf albümü oluşturmak için Commands (komutlar)
bölümünden Create Web Photo Album seçeneğini tıklayın. Açılan pencerede albüm için
gerekli olan bilgileri yazın.
Photo album title : Albüm başlığı
Subheading info : Alt başlık bilgisi
Other info : Albüm ile ilgili diğer bilgiler. Daha özel başlıklar kullanılabilir.
Source images folder : Site içerisinde resimlerin bulunduğu klasör. Browse (gözat)
düğmesini kullanarak resimlerinizin bulunduğu klasörü seçin. (resimler/manzara klasörü)
Destination folder : Albüm oluşturulduğunda seçtiğiniz resimlerin küçüklerinden oluşan bir
sayfa çıkacaktır. Bu küçük resimlere tıkladığınızda resmin büyük hali açılacaktır.
Bu küçük resimlerin her birine Thumbnail denir. Tüm bu materyallerin toplanacağı klasörü
seçin (resimler/photo). Yani albümün oluşturulacağı klasör.
Thumbnail size : Küçük resimlerin boyutlarının belirlenmesi
Columns : küçük resimler albüm sayfasında kaç kolon halinde sıralanmalı.
Thumbnail format : küçük resimler için bir format seçimidir. Seçeneklerden faydalanarak
istediğiniz kalite ve formatı seçebilirsiniz. Ya da varsayılan olanı (better quality /oldukça iyi)
kullanabilirsiniz.
Photo format : Kaynak klasör içindeki resimler, hedef klasöre kopyalanır (manzara’dan photo
klasörüne) bu kopyalama işlemi direkt bir kopyalama işlemi değildir. Standartlaştırma ve bazı
kalite formatlarından geçirilir. Seçtiğiniz format albüm içerisindeki resimlere ait format
olacaktır.
Show File Names : Albümde resimlerin altında dosya adlarının gösterilmesi.
Scala : ölçeklendirme normal değer %100 dür.
Create Navigation page for each photo : Fotoğraf albümünde yer alan küçük resimleri
tıkladığınızda orijinal resim yeni bir sayfada açılır. Bunun yanı sıra, resimlerin gösterildiği
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 67
sayfalara resimler arasında geçiş sağlamak için seyahat barları ekleyebilirsiniz. Böylelikle
resimler arası geçiş sağlayabilirsiniz.
Creat Web Photo Album penceresinde tüm açıklamaları yaptıktan sonra onaylayarak
pencereyi kapatın. index.html adında yeni bir
sayfa oluşacaktır. Bu sayfa küçük resimlerin
bulunduğu yani albümün ön yüzüdür.
Bu işlem sonunda hedef klasörde (photo)
index.html sayfası, küçük resimlerin toplandığı
Thumbnail klasörü, sayfaların bulunduğu
pages klasörü, büyük resimlerin bulunduğu images klasörü oluşacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 68
13. DİNAMİK NESNE OLUŞTURMA
(TimeLine Kullanımı)
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 69
Dreamweaver CS3’de Div Tag ve Draw Ap Div olarak
iki adet katman etiketi vardır. Div taglar sayfa üzerinde
istenilen yerde durmazlar. Div Ap Tag etiketleri ise
sayfada sabitlenir ve tablo yerine kullanılabilirler. Ancak
hiçbir zaman tablonun alternatifi olamazlar.
Dreamweaver CS3’de bir nesneye hareket
kazandırabilmek için
1. İlgili nesne Draw Ap Div içine alınmalı.
2. Dreamweaver CS3’ün TimeLine özelliği kullanılmalıdır.
Yeni bir sayfa açarak İnsert/layout panelinden Draw Ap
Div etiketini seçiniz. Sayfaya ekleyin.
Eklediğiniz Div etiketinin içine nesnenizi yerleştiriniz.
Windows menüsünden TimeLine seçeneğini
işaretleyerek sayfanın altına TimeLine panelinin
gelmesini sağlayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 70
Katman (Draw Ap Div) siçili iken sağ tıklayarak Add to TimeLine seçeneğini seçiniz. Bu
işlemler objeniz TimeLine çizgisine eklenmiştir.
TimeLine panelinde başlangıç ve bitiş karelerinin birer anahtar kare olduğuna dikkat edin.
TimeLine Panelinde bitiş karesini (15.kare) seçin.
Katmanı sayfa içerisinde başka bir konuma sürükleyin. Bu
işlem sırasında ilk konumdan son konuma doğru bir çizgi
oluşacaktır.
Belirtilen nesne konumlarına göre yapılan hareketin sayfa
açıldığında otomatik olarak çalışması için AutoPlay
seçeneğini işaretleyin.
Sayfa açık kaldığı sürece
tekrarlanmasını
istiyorsanız
işaretleyiniz.
hareketin sürekli olarak
Loop
seçeneğini
de
Playback düğmeleri
Oluşan hareketi, Dreamweaver CS3 doküman sayfasında
izlemek için, Playback düğmelerini kullanın. Bu düğmeler
yardımı ile hareketi, kare kare (adım adım) izleyebilirsiniz.
Fps alanına girdiğiniz sayı, kareler arasındaki geçiş hızını
belirtir Dreamweaver CS3’ önerdiği kare hızı 15 kare/sn dir. Kareler arası hızı azaltarak
hareketi yavaşlatabilirsiniz.
Dreamweaver CS3, bir kare dizisini kullanarak yalnızca bir nesnenin hareketini sağlar. Eğer
birden fazla nesneye aynı zaman dilimi içerisinde dinamik özellik kazandırmak istiyorsanız,
birden fazla kare dizini kullanmanız gerekir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 71
14. ŞABLON HAZIRLAMAK
Normal bir site oldukça fazla sayfadan oluşur. Sitenin içerik bölümü haricinde kalan bölümler
standart olmalıdır. Yani sitenin başlık kısmı (banner),
menü kısmı vb. her sayfada
çoğunlukla standarttır. Sitede bu standardı “Save as” yöntemiyle ya da copyala-yapıştır
mantığı ile yakalayabilirsiniz. Fakat standart bölümlerde yapacağınız değişikliklerde tüm
sayfaları tek tek açarak aynı değişikliği her sayfaya yapmanız gerekir. Bu da çok zahmetli ve
bir o kadarda yorucudur.
Bu bölüme kadar öğrendiklerimizden faydalanarak bir şablon sayfa oluşturabilirsiniz. Bu
şablondan çoğaltma yaparak tüm sayfalarımızda standardı yakalarız. Şablonda yaptığımız
bir değişiklik tüm sayfaları da etkileyeceğinden güncelleme problemi olmayacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 72
14.1. Make Template :
(Template Yapmak)
Make Template özelliği tek başına hiç bir anlam ifade etmez. Sadece template oluşturur. Bu
haliyle sayfaya alındığında sayfada hiçbir işlem yapılamaz. Önce bunu bir örnekle
inceleyelim.
Yeni bir sayfa açın. Aşağıdaki gibi tüm sitede standart olarak kullanmayı düşündüğümüz bir
sayfa oluşturun. Değişmesi gereken içerik kısmını boş bırakın. Sayfayı kaydedin.
İçerik alanı
Oluşturulan bu sayfayı şablon haline getirmek için;
File / Save as Template menüsünden ya da insert /
template object/Make Template menüsünden Save As
Template penceresini açın.
Bu pencerede:
Site : Template’nin hangi site içerisinde oluşturulacağını
ifade eder.
Existing templates : üzerinde çalıştığınız site içerisinde daha önceden kayıtlı template
dosyalarını gösterir.
Description : template için açıklama yapılması gerekiyorsa bu alana yazılır. Site içirisinde
birden fazla template kullanılacaksa bu açıklamalar faydalı olacaktır.
Save as : template dosyasının ismidir. Bu alana oluşturmak istediğiniz template’nin ismini
yazın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 73
Yukarıdaki bölümleri doldurduktan sonra Save düğmesi ile templatenin kaydını yapın.
Template dosyası site içerisine kaydedilirken Dreamweaver CS3 tarafından bir template
klasörü oluşturulur ve template dosyası dw uzantısı ile bu klasörün içinde saklanır.
Artık site içerisinde GenelSablon.dw isminde bir template dosyası mevcuttur. Oluşturulan
template dosyası hiçbir zaman html sayfası olarak kullanılamaz. Tarayıcıda yayınlanmaz.
Template dosyasını kullanabilmek için yeni bir sayfa açarak, yeni sayfaya template sayfası
dahil edilmelidir.
14.2. Sayfaya Template
Eklemek
Yeni bir sayfa açın ve kaydedin.
Modify / Templates / Apply Template to Page
menüsünü
kullanarak
Select
Template
Penceresini açın.
Select Template penceresinde;
Site : hangi site içerisinde çalışılacağı
Templates : Site içerisinde kayıtlı bulunan template dosyalarını
Update page when template changes : template dosyasının güncellenmesi (değişmesi)
halinde template dosyasına bağlı diğer dosyaların (html dosyalırının) değiştirilip
değiştirilmeyeceğini ifade eder.
Yaptığımız değişikliklerin otamatik olarak tüm sitede uygulanması için Update page when
template changes işaretli olmalıdır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 74
Templates bölümünden yatığımız template dosyasını seçerek select düğmesi ile yeni
sayfaya bir template yerleştirin. Bu işlemlerden sonra Dreamweaver CS3 sayfada işlem
yapmanıza izin vermeyecektir. Sebebi; template dosyasında içeriklerin değiştirilmesi için bir
bölüm oluşturmadık.
14.3. Editable Region
(Düzenlenebilir Alan)
Yukarıda oluşturulan template dosyası üzerinde her
sayfanın kendisine ait
olan düzenlemeleri
yapabilmek için template içerisine Editable Region
yerleştirmek gerekir. Template dosyası açık iken
(GenelSablon.dw) , Editable Region eklemek
istediğiniz yere (içerik alanına) imleci tıklayarak
Insert /Template Objects / Editable Region’u
seçin.
New Editable Region penceresi açılacaktır. Bu
pencerede bir isim yazarak Region’u kaydedin.
Editable
R i
Temlate sayfasında diğer sayfalarda kullanılması
için düzenlenebilir alan oluşturuldu. Bu alan küçük
görülse de içerisinde düzenleme yapıldıkça bir sayfa
boyutu kadar genişler.
Template Sayfasına düzenlenebilir alan ekledikten
sonra sayfayı kaydedin. Karşınıza Update
Templates Files penceresi çıkacaktır. Bu pencerede
template dosyasından (GenelSablon.dw) türetilmiş
(çoğaltılmış) sayfalar listelenir. Template de yapılan
bu değişikliklerin listelenen sayfalar üzerinde de
geçerli olup olmayacağını sorar. Bu şablondan
türeyen sayfaların bu değişiklikten etkilenmesi için
Update düğmesine basın.
Update Pages penceresinde Close diyerek çıkabilirsiniz. Show log alanını seçerseniz, işlem
yapılan dosyaları gösterecektir. Start diyerekte tüm dosyaları güncelleyebilirsiniz.
Bu şablondan türeyen sayfaların otomatik olarak değiştiği görülecektir. Bu yöntemi kullanarak
sitenizi standart hale getirebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 75
14.4. Optional Region
(Seçimli Alan)
Template dosyasında bulunan bazı bölümlerin
istemeyebilirsiniz. Bunu bir örnekte uygulayalım.
bazı
sayfalarınızda
görünmesini
Template sayfamızda (GenelSablon.dw)
işlemler bölümünün sayfada görünmesini
engelleyelim.
GenelSablon.dw dosyası açık iken imleci
sağ taraftaki işlemler menüsünün altına
getirin ve buraya Insert / Template Objects /
Optional Region ekleyin.
New Optional Region penceresinde isim
vererek (varsayılan ismi de kullanabilirsiniz)
onaylayın.
Optional
Region
İşlemler bölümünün altında Optional Region oluşacaktır. Sonra işlemler bölümünü Optional
Region içerisine taşıyın.
Optional
Region
İşlemler menüsünü Optional Region içerisine aldıktan sonra eski yerine taşıyın.
GenelSablon.dw template sayfasını kaydedin.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 76
Update Template Files
penceresinden
Update yapın. Bu pencerede yapılan
değişikliğin iletisim.html sayfasında yapılıp
yapılmayacağı sorulmakta.
Update Pages penceresini Close diyerek
kapatın.
İletisim.html sayfasını açın. Bu sayfada
halen bir değişiklik görülmemektedir.
Modify / Template Properties menüsünden
Template Properties penceresini açın. Bu
pencerede Name bölümünde, template
dosyasında
(GenelSablon.dw)
bulunan
Region (alan) nesneleri yer alır. Value
bölümünde ise bu nesnelerin sayfada
görünüp görünmeyeceği belirtilir. True
değerler
bu
nesnenin
sayfada
görüntülendiğini, false değeri ise nesnenin
sayfada görünmediğini ifade eder. Yani
iletisim.html sayfasında OptilonalRegion1
nesnesi görülmektedir. Pencere altında
bulunan
Show
OptionelRegion1
nesnesinin check işaretini kaldırın. Value
bölümündeki değer false olacaktır. Bu da iletisim.html sayfasında OptionalRegion1
nesnesinin sayfada görüntülenmeyeceği anlamındadır. Ok düğmesi ile pencereden çıkın.
Artık sayfanızda işlemler bölümü bulunmayacaktır. Optional Region özelliği ile sayfanızda
gizlemek istediğiniz bölümleri gizleyebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 77
15. FORMLARLA ÇALIŞMAK
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 78
Formlar internet ortamında kullanıcıdan bilgi toplamak için kullanılan nesnelerdir.
Formlarla çalışmadan önce form Insert panelinde bulunan insert sekmesini inceleyelim.
Form Alanı ekle
Form Araçları
İleri Seviye
Form Araçları
Web sayfasında oluşturacağınız formu en ideal şekilde tasarlamak için form nesnelerini ve
özelliklerini iyi bilmek gerekir.
Yeni bir form eklemeden önce oluşturacağımız form sayfasını önceki bölümde öğrendiğimiz
template kullanarak oluşturalım.
Yeni bir sayfa açalım.
Açtığımız yeni sayfaya template dosyasını
uygulayın. Bu işlemi yaparken “Sayfaya
Template Eklemek” konusuna göz atabilirsiniz.
Modify / Templates / Appy Template to
page’den sitemizde bulunan template dosyasını
ekleyin.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 79
15.1. Sayfaya Form Alanı Ekleme
EditRegion bölümüne form alanı ekleyerek form oluşturmaya başlayın. Form alanı
eklemeden diğer form nesneleri eklenirse form alanı eklemeniz konusunda size bir mesaj
verilir. Dolayısıyla form nesnelerini kullanmak için önce form alanı oluşturmak gerekir.
Form panelinden form alanı ekleme düğmesinden sayfaya bir form ekleyin.
Eklenen forma ait özellikler sayfa altındaki properties panelinde yeralır.
Form name : Formun adıdır. Belli bir isim değeri içerir. Bu isim asp, php, js, vb, gibi
yazılımlarla kullanılabilir.
Action : Form bilgilerinin veri tabanına kaydedilmesi için asp, php, aspx gibi script dilleri ile
hazırlanmış bir sayfanın ismini içerir. Yani veritabanı bağlantısını sağlayacak dosyaya
yönlendirme işlemini gerçekleştirir.
Method : Genel olarak form verileri iki tür metot ile gönderilir.
POST : Sınırsız sayıda bilgi gönderilebilir.
GET : Bu metod ile sınırlı sayıda bilgi gönderilebilir. Bu yöntemde bilgilerin bazı
özellikleri tarayıcı penceresinin alt kısmında görünür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 80
15.2. Text Field
(Metin Alanı / Metin Kutusu)
•
Form panelinden TextField düğmesini (
ekleyin.
) kullanarak form alanına bir metin alanı
Karşınıza çıkan Input Tag Accessibility Attributes penceresinde;
ID : Text kutusunun adı. Metin kutusu içerisine yazılan bilgilinin veritabanına aktarılması için
bu isim kullanılır.
Form alanında oluşturulan nesnelerin her birinin ismi farklı olmalıdır.
Label : Metin kutusunun yanına yazılan isimdir. Metin kutusuna yazılması gereken bilginin
tanımıdır.
Wrap With Label Tag : Bu seçenek form nesnelerini bir not etiketi ile çerçeveler.
seçeneği kullandığınızda form nesnesi her zaman metin notunun yanında kalacaktır.
Bu
<label>Adı
<input type="text" name="txtad" id="txtad" />
</label>
Attach Label Tag Using ‘for’ attiribute
Bu seçenekle form nesnesini kendini açıklayan metinden ayırabilirsiniz. Bu metin alanı için
(metin kutusuna bağlı kalmaksızın) ayrı özellikler uygulayabilirsiniz. Böyle bir işleme
yerleşim düzenini ayarlamak amacı ile gerek duyulabilir.
<label for="txtad">Adı</label>
<input type="text" name="txtad" id="txtad" />
No Label Tag :
Bu seçeneği kullanırsanız XHTML de metin kutusu için label tag’ı oluşturulmaz.
Adı
<input type="text" name="txtad" id="txtad" />
Before From Item : Bu seçenek Form nesnesini açıklayan metnin formun solunda (formdan
önce) olacağını ifade eder.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 81
After From Item : Form nesnesini açıklayan metnin
formun sağında (formdan sonra) olacağını ifade
eder.
Access key : Bu seçenekte İlgili metin kutusuna
daha hızlı ulaşabilmek için klavyeden kısayol tuşu atanabilir.
Tab Index : Formu doldurmak isteyen kullanıcı klavyeden tab tuşunu kullanırsa tab tuşuna
her basıldığında sırası ile kutulara ulaşabilmeli.
•
Wrap With Label Tag seçeneğini kullanarak Access key ve tab index seçeneklerini
boş bırakarak tek satırdan oluşan bir metin alanı oluşturun.
Form alanına eklenen metin kutusunu seçtiğinizde properties panelinde metin kutusuna ait
özellikler yeralır. Bunlar ;
TextField : Metin kutusunun alanı (id)
Char Width : Metin kutusunun genişliğini karakter sayısına göre ayarlar. Kutunun kaç
karakter büyüklüğünde olacağını ifade eder.
Max Chars : Metin kutusu içerisine girilecek maksimum karakter sayısını ifade eder.
Type :
Single Line : Tek Satırdan oluşan bir metin kutusu
Multi Line
: Çok satırlı bir metin kutusu
Password : içerisine şifre yazılan metin kutusu özelliği taşır. Bu seçenek şaretli
iken tarayıcıda bu metin kutusu içerisine yazılan yazılar yıldız işareti
ile görünür.
Init val : (Initial Value-ilk değer) Sayfa tarayıcıda açıldığında metin kutusu içerisinde
görülecek ilk yazıdır. Varsayılan yazı olarak da tabir edilir.
Yandaki şekilden de anlaşılacağı üzere personele ait bilgilerin girilmesi için Adı, Soyadı ve
Sicilinden oluşan bir form oluşturduk. Formlarla ilgili konular ilerledikçe bu form yapısını da
geliştireceğiz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 82
15.3. List /Menu
(Liste/ Menü)
Seçenekleri bir liste halinde sunan tiptir. Bu seçeneğin önemli bir özelliği birden fazla
seçenek içerisinden birini listeden seçmenize yardımcı olur. Kullanıcılardan gelen bilgileri
standart hale getirmek için kullanılır. Bir örnek vermek gerekirse teşkilatımızda rütbeler için
kullanmak yerinde olacaktır.
Mevcut forma insert panelinden ListMenu ekleyin. Input Tag Accessibility Attribute
penceresini yukarıda anlatıldığı gibi doldurunuz.
Forma eklenen List/Menu seçili halde iken bu seçeneğe ait özellikler properties panelinde
belirir.
List/Menu : Nesnenin ismi (id)
List Values … : Bu düğme ile Listeye üye ekleyebilir, listeden üye silebilirsiniz.
Liste üyesi
ekle/sil
Liste üyelerini
sırala
Type : List/Menu form nesnesi iki tipte kullanılır.
1. Menu (Açılır Kutu) : İlk üye kutuda gösterilir. Diğer üyeler kutu açılınca
görülür.
2. Liste : Bu seçenekte ise List/Menu ye ait tüm üyeler liste halinde görülür. Bu
seçeneğin önemli bir özelliği, birden fazla seçeneğin listeden seçilmesini
sağlar. List seçeneği işaretlendiğinde Height özelliği ile selections özelliği aktif
hale gelecektir. Height Liste boyutunu gösterir. Selections özelliği üye sayısı
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 83
liste boyutunu aşar ise liste içerisinde gezinmenizi sağlayacak aşağı ve yukarı
düğmeler oluşturur.
Initially Selected (Seçili ilk değer) : Listede ya da menüde yer alan değerlerden birini seçili
olarak kabul eden seçenektir. Varsayılan değer de denilebilir.
15.4. Check Box
(Kontrol Kutusu)
Seçim yapmak koşulu ile veriler toplayan araçlardır. Bir formda birden fazla kontrol kutusu
işaretlenebilir. Bu şekilde çoklu tercihin yapılması sağlanır.
Mevcut formumuzda personelin aldığı kursları düzenlemek için check box kutularını
kullanabiliriz.
Insert panelinden Check Box ekleyin. Forma eklediğiniz check box nesnesine ait özellikleri
nesne seçili iken properties panelinden görebilirsiniz.
Checkbox name : Checkbox nesnesinin adı. Dreamweaver CS3 otomatik olarak bir isim
verir. Bu ismi silerek yeniden isimlendirme yapabilirsiniz. Checkbox nesnesine verilen isimler
yazılımcılar tarafından kullanılarak veritabanına gönderilir. Bu nedenle form nesnelerinin
isimleri önemlidir.
Checked Value : Buraya yazılacak olan değer direkt
veritabanına gönderilecektir.
Yazılımcılar tarafından kullanılan bazı Value değerleri ise; on/ off, True/False gibi değerlerdir.
Bunlardan başka değerlerde kullanılabilir.
Initial State (ilk durum): Sayfa tarayıcı tarafından açıldığında checkbox nesnesi varsayılan
olarak işaretlimi yoksa işaretsiz olarak mı geleceğini ifade eder. İki seçenek vardır. Checked
işaretli, Unchecked işaretsiz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 84
15.5. Radio Button
(Radyo Düğmesi)
Ziyaretçiye çeşitli seçenekler sunularak bu seçeneklerden yalnızca bir tanesini seçme şansı
veren nesnedir. Örneğin ziyaretçinin cinsiyetini öğrenmek için Radio Button nesnesi
kullanılır. Çünkü aynı anda sadece bir cinsiyet değerinin seçilmesi gerekir. Aksi halde form
anlamsız olur.
Dreamweaver CS3’de Radio Button ve Radio Group adlı iki form nesnesi vardır. Radio
Button nesnesini CheckBox olarak kullanabilirsiniz. Radio Group isimli form nesnesini
kullanarak tek seçimli gruplar oluşturabilirsiniz.
15.6. Radio Group
(Radyo Grupları)
Tek seçimlik veri nesneleri oluşturmak için kullanılır. Insert panelinden mevcut forma radio
group ekleyin.
Radio Group penceresinde;
Name : Radio Group nesnesinin adı
Radio buttons : üye ekleme ya da üye silme üyeler arasındaki sıralama işlemlerinin
gerçekleştirildiği bölüm.
Label : Sayfada görünen isim
Value : Veritabanına gönderilen değer
Line breaks : Radyo butonlarının satır satır yazılacağı.
Table : Radyo butonlarının bir tablo içine yerleştirileceğini ifade eder.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 85
15.7. File Field :
(Dosya Kutusu)
Ziyaretçinin dosya gönderme işlemini yapabildiği nesnedir. Sayfalarında Browse (Gözat)
düğmesi yardımı ile bilgisayardaki bir dosya seçilerek servera gönderilir.
Yine mevcut forma File Field ekleyin.
Yeni eklenen File Field alanı seçili iken bu nesneye ait özellikler properties penceresinde
görülecektir.
FileField name : Nesnenin adı
Char Width : Dosya konumunun belirtileceği metin kutusunun genişliğini belirler. Bu alana
girilen karakter sayısı kadar genişlik oluşur.
Max Chars : File Field nesnesi içerisine girilecek maksimum karakter sayısını belirtir.
Tanımlanan karakter sayısı geçildiğinde giriş yapılmaz. Sadece belirtilen miktardaki karakter
girdi olarak alınır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 86
15.8. Button :
(Düğme)
Formun en önemli nesnesidir. Form bilgilerinin veritabanına gönderilmesi için ya da form
bilgilerinin temizlenmesi için kullanılır.
Forma button eklendiğinde button nesnesi seçili iken properties panelinden buttona ait
özellikleri görebilirsiniz.
Button Name : nesnenin ismi
Value : Butonun üzerinde görülecek olan isim.
Action : Düğmenin gerçekleştireceği eylemi belirler.
Submit form : Form nesneleri üzerindeki bilgileri veritabanına ya da e-posta adresine
gönderir.
Reset Form : Tüm form elemanlarının içeriğini temizler varsayılan hale getirir.
None : Butonun form elemanları üzerinde etkisiz kalmasını sağlar.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 87
15.9. Jump Menu :
(Sıçrayan Menü)
Jump Menu nesnesi ile oluşturduğunuz liste seçeneklerinden faydalanarak belli bir URL
adresine yönlendirme yapabilirsiniz.
Üye Ekle /
Kaldır
Üye Sıralaması
Karşınıza çıkacak Insert Jump Menu penceresinde;
Menu Items : Üye Listesi
Text : ilgili URL için verilecek isim
When Selected go to URL : Bu bölümde menu items bölümünde seçilen URL bağlantısıdır.
Bilgisayarınızı sunucu olarak kullanıyorsanız ve bilgisayar içinden bir sayfaya link vermek
istiyorsanız Browse butonunu kullanınız.
Open URLs in : Açılacak olan URL’in (link bağlantısı) hangi pencerede açılacağını ifade
eder. Bu bölümde Main Windows varsayılanını kullanın.
Menu ID : Nesnenin adı
Option :
Insert go button after menu : Menünün sağına Go (git) düğmesi eklenir.
Firs item after URL Change : URL komutu değiştiğinde birinci menü üyesini seçili
duruma getirir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 88
15.10. Image Field:
(Görüntü Nesnesi)
Dreamweaver CS3 ün standartları dışına çıkarak kişisel image kullanmak isteyenler için
uygun bir alandır.
Dreamweaver CS3 ait gri butonların haricinde Image Field alanı ile yeni image (resim)
ekleyip bu nesneyi buton olarak kullanabilirsiniz. Ancak standart dışı oluşturulan bu butona
Dreamweaver CS3 otomatik olarak Submit ve Reset özelliği vermez. Jawa Script kodları
gibi dilleri kullanılarak bu düğmelere işlev kazandırılabilir. Bu nesneyi forma sadece resim
eklemek amacıylada kullanabilirsiniz.
15.11. Hidden Field:
Gizli Kutu
Kod yapısı olarak text field (metin kutusu) nesnesine benzer. Fakat form içerisinde
gösterilmeyen gizli bir alan oluşturur. Ziyaretçi farkına varmadan bazı bilgilerin veritabanına
kaydedilmesi için kullanılır.
Form içerisine gizli alan yerleştirdiğinizde gizli alanlar için kullanılan simgeyi (
properties bölümünden nesneye ait diğer özellikleri görebilirsiniz.
)seçerek
Gizli alanlar için kullanılan simge Design (dizayn) sayfasında görünmüyorsa
Edit/Preferences menüsünden Invisible Elements katogorisini seçerek Hidden Form Field
seçeneğini işaretleyin.
Hidden Field nesnesinin iki özelliği vardır.
HiddenField : Nesnenin adı
Vaue : Gizli alan içerisinde veritabanına gönderilecek olana bilgi
15.12. Spry Validation Text Field :
(Canlı Doğrulama Metin Kutusu)
Bu nesne ile ziyaretçilerin text kutularına belli bir tipte veri girmeleri sağlanır. Verinin
doğruluğu kontrol edilir ve belirtilen tipe uymayan bilgi kabul edilmez.
Spry Validation Text Field nesnesi forma eklendiğinde nesne başlığı seçili halde iken
properties penceresinde nesneye ait özellikler görülür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 89
Spry Textfield : Nesnesin adı
Type : Text Kutusuna yazılacak olan bilginin tipi.
Required : (Gerekli) Kullanıcının bu alanı boş geçmemesi için kullanılır.
15.13. Spry Validation Text Area :
(Canlı Doğrulamalı Metin Alanı)
Form içerisine canlı metin alanı ekler. Kullanıcıların görüşlerinin alınacağı daha geniş bir alan
yaratılabilir. Bu alana girilecek bilgiler denetime tabi tutulabilir, belirli bir karakter sınırı
konabilir. Boş geçilmesi önlenebilir.
Tüm nesneleri kullanarak bir form oluşturulduğu kanısındayım. Aşağıda görüldüğü gibi form
alanı içinde bulunan form nesnelerini form içinde oluşturacağınız bir tablo ile tüm nesneleri
düzenleyebilir daha iyi bir sayfa tasarımı oluşturabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 90
16. SWAM IMAGE
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 91
SWAP IMAGE
Resim Değiştirme
Özellikle bazı haber sitelerinde benzerlerini gördüğümüz resim değiştirme effecti
Dreamweaver CS3 ile de yapılabilmektedir. Yani herhangi bir resim ya da yazının üzerine
gelindiğinde yazının konusu ile ilgili resmin yan tarafta görünmesi Dreamweaver CS3 te
Swap Image effectidir.
Effectin tamamlanmış hali aşağıdaki resimde gösterilmiştir.
Görüldüğü gibi butonun üzerine gelindiğinde ilgili resim görünür ve mause butondan
ayrıldığında resim kaybolur.
Önce konu ile ilgili meteryallerin hazırlanması gerekmektedir. İlgili butonları photoshop
programı ile hazırlayabilirsiniz. Konu ile ilgili tüm metaryel, web klasörünüz içerisinde bir
klasörde toparlayınız.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 92
1. Dreamweaver CS3’te yeni bir sayfa açın ve kaydedin.
2. İki sutunlu bir tablo oluşturun ve border değerini 0 yapın.
3. Sol hücreye butonları sırası ile yerleştirin. Butonları yerleştirirken sol sutunun
butonların genişliği kadar olmasına dikkat edin.
4. Sağ taraftaki hücreyede sürekli görünmesini istediğiniz bir resim yerleştirin. Bu resim
boş beyaz bir resimde olabilir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 93
5. En üsteki butonu seçin ve properties panelinin en solunda bulunan boşluğa bu
butonun ID adını yazın. Bu işlemi tüm butonlar için ve sağ hücreye yerleştirdiğiniz
resim için tekrarlayın. ID isimleri karışmaması için anlamlı isimler yazınız ve isimlerde
özel karakterler (?/_-, vb.) ile türkçe karakterler kullanmayınız. Bu örnekte butonların
üzerinde yazan metni ID ismi olarak kullandık. Bu durumda butonların ID ismi
muzik, video, bilgisayar, resimler, dunya oldu. “dunya”, sağ hücredeki resmin
ismidir. Farklı isimlendirmede yapılabilir.
6. ID isimlerini tamamladıktan sonra
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 94
7. En üsteki butonu(Müzik) seçin.
8. Dreamweaver CS3’ün sağ tarafında Behaviors Panelinin Add Behaviors
isimli düğmesine tıklayın. (Eğer ekranda Behaviors Paneli yok ise windows
penceresini kullanarak paneli ekrana getirebilirsiniz.)
9. Add Behavior düğmesinde açılan listeden Swap Image’yi seçin.
10. Karşınıza swap Image isimli pencere açılacaktır. Bu pencerenin Images bölümünde
resimler listelenmektedir. Set source to bölümünde ise bu resimlerin yerine
kullanılacak resimleri bulacağımız Browse yeralır. Preload images seçeneği
doküman yüklenirken resimlerin arka fonda yüklenmesini ve butonların üzerine
gidildiğinde yüklenmemiş resim olmamasını, dolayısı ile effectin hatasız çalışmasını
sağlayan bir seçenektir. Restore images onMouseOut seçeneği ise farenin resmin
üzerinden çekilmesi durumunda tekrar eski resmin yerine gelmesini belirtir. Her iki
seçeneğide işaretli olacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 95
11. Swap Image penceresinde Image “muzik” seçili halde iken Browse düğmesinden
müzik butonunun üzerine gelindiğinde yerine gelecek olan resmi seçin ve onaylayın.
12. Muzik butonunun üzerine gelince yan tarafta bu butona ait resmin görünmesi için
şimdide Image “dunya” yı seçin.
13. Browse düğmesini kullanarak Müzik butonuna basıldığında yan tarafta (dunya
resminin yerine gelecek resim) görünecek resmi seçin ve onaylayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 96
14. Swap Image penceresinide “ok” düğmesini kullanarak kapatın.
15. Aşağıdaki resimde görüldüğü gibi Behavior panelinde muzik düğmesine ait iki olay
görünecektir.
Böylelikle birinci butonun (muzik) effectini tamamlamış olduk. Bu butona (muzik
butonu) effectin çalışıp çalışmadığını teyit edmek için sayfayı kaydederek Browserda
deneyiniz.
Kalan diğer butonlara da 8 ile 15 arasındaki maddeleri uygulayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | I
İÇİNDEKİLER
ADOBE DREAMWEAVER CS3 .............................................................................................. 1
İÇİNDEKİLER............................................................................................................................ I
DREAMWEAVER CS3’E GİRİŞ ............................................................................................. 1
1. ÇALIŞMA ALANI VE PANELLER ................................................................................. 2
1.1. Çalışma Alanını Düzenlemek ...................................................................................... 3
1.2. Karşılama Ekranı ......................................................................................................... 3
1.3. Insert Araç Çubuğunu Kullanmak ............................................................................... 4
1.4. Properties Paneli .......................................................................................................... 5
1.5. Çalışma Penceresi Araç Çubuğunu Kullanmak........................................................... 5
1.6. Çalışma Penceresinin Özellikleri................................................................................. 6
1.7. Panelleri Kullanmak .................................................................................................... 7
1.8. Kişisel Çalışma Alanı Oluşturmak .............................................................................. 7
2. WEB SİTESİ YÖNETİMİ .................................................................................................. 9
2.1. Yeni Bir Site Oluşturmak .......................................................................................... 10
2.2. Siteye Yeni Bir Klasör Eklemek ............................................................................... 12
2.3. Siteye Yeni Bir Sayfa Eklemek ................................................................................. 12
2.4. Sayfaya Türkçe Dil Tanımlaması .............................................................................. 14
2.5. Yeni Açılan Sayfanın Kaydedilmesi ......................................................................... 14
2.6. Sayfa Özellikleri ........................................................................................................ 15
2.7. Resim Eklemek .......................................................................................................... 16
2.8. Image Placeholder ..................................................................................................... 18
2.9. Metinlerle Çalışmak ................................................................................................. 20
2.10. Linkler (Bağlantılar) .............................................................................................. 20
3. TABLOLARLA ÇALIŞMAK .......................................................................................... 28
3.1. Tablo Eklemek ........................................................................................................... 29
3.2. Tablo Özellikleri ........................................................................................................ 30
3.3. Tablo Hücrelerinin Bölünmesi : ................................................................................ 31
3.4. Tabloya Satır Ekleme: ............................................................................................... 31
3.5. Tabloya Sütun Ekleme : ............................................................................................ 32
3.6. Satırların, Sütunların ya da Tablonun Silinmesi ........................................................ 33
4. DREAMWEAVER CS3’DE CSS KULLANIMI ............................................................. 34
4.1. CSS nedir? ................................................................................................................. 35
4.2. CSS Türleri (Stil Şablonları) ..................................................................................... 35
4.3. Dreamweaver CS3’de CSS Yapma ........................................................................... 37
4.4. Örnek Stil Dosyalarını Kullanma .............................................................................. 39
5. CANLI MENÜ EKLEME ................................................................................................ 40
6. ROLLOVER IMAGE ....................................................................................................... 43
7. NAVİGATİON BAR ........................................................................................................ 46
8. (CANLI) SEKMELİ PANEL ........................................................................................... 51
9. AKORDİON PANELİ ...................................................................................................... 54
10. CANLI KATLANABİLİR PANEL .............................................................................. 57
11. FLASH NESNELERİ EKLEME .................................................................................. 59
11.1. Flash Filmleri Ekleme : .......................................................................................... 60
11.2. Flash Butonu Ekleme : .......................................................................................... 62
11.3. Flash Metni Ekleme : ............................................................................................. 63
11.4. Flash Paper Ekleme : ............................................................................................ 63
11.5. Flash Video Ekleme : ............................................................................................ 64
11.6. Shockwave Filmi Ekleme : ................................................................................... 64
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | II
12. FOTOĞRAF ALBÜMÜ OLUŞTURMA...................................................................... 65
12.1. Fotoğraf Albümü Oluşturma .................................................................................. 66
13. DİNAMİK NESNE OLUŞTURMA ............................................................................. 68
14. ŞABLON HAZIRLAMAK ........................................................................................... 71
14.1. Make Template : .................................................................................................... 72
14.2. Sayfaya Template Eklemek ................................................................................... 73
14.3. Editable Region ...................................................................................................... 74
(Düzenlenebilir Alan) ........................................................................................................... 74
14.4. Optional Region ..................................................................................................... 75
(Seçimli Alan) ...................................................................................................................... 75
15. FORMLARLA ÇALIŞMAK ........................................................................................ 77
15.1. Sayfaya Form Alanı Ekleme ................................................................................. 79
15.2. Text Field .............................................................................................................. 80
15.3. List /Menu ............................................................................................................. 82
15.4. Check Box .............................................................................................................. 83
15.5. Radio Button ......................................................................................................... 84
15.6. Radio Group .......................................................................................................... 84
15.7. File Field : ............................................................................................................. 85
15.8. Button : ................................................................................................................. 86
15.9. Jump Menu : ......................................................................................................... 87
15.10. Image Field: ........................................................................................................... 88
15.11. Hidden Field: ........................................................................................................ 88
15.12. Spry Validation Text Field : ................................................................................. 88
15.13. Spry Validation Text Area : .................................................................................. 89
16. SWAM IMAGE ............................................................................................................ 90
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 1
DREAMWEAVER CS3’E GİRİŞ
HEDEFLER
Kursiyer eğitim süreci sonunda;
Dreamweaver CS3’te web klasörü tanımlaması yapabilmeli, web araçlarını
kullanabilmeli, Style şablonları (css) ve sayfa şablonları (template) hazırlayarak web
sayfalarını biçimlendirebilmelidir. Kursiyer web sitesi yapma mantığını kavramalı ve
eğitim süreci sonunda kendisine ait bir web sitesi hazırlamalıdır.
DAVRANIŞLAR
Web sitesinde kullanılan nesnelerin (resim, düğme, vb.) tek bir klasör içerisinde
arşivlenmesi ve bu arşivleme işleminin Adobe Dreamweaver CS3 tarafından
otomatik olarak yapılabilmesi için web klasörü tanımlaması yapılmalıdır. Web klasörü
tanımlaması tasarımcıya site yapımı sürecinde kolaylık sağlayacaktır.
Web sayfalarında sıklıkla kullanılan ve web tasarımının vazgeçilmez araçları; tablo,
menu, linkleri vb. sayfa içinde en iyi şekilde kullanabilmek sayfanın görselliğini
arttıracaktır.
Site tasarımında her sayfanın tek tek tasarlanması ve biçimlendirilmesi yerine style
ve sayfa şablonlarını kullanmak sayfaların standart hale getirilmesinde ve sitenin
güncellenmesinde etkinlik sağlayacaktır.
Öğrenme süreci sonunda bir web sitesi hazırlamak nihai hedef olmalıdır.
ARAÇ GEREÇLER
İşletim sistemi üzerinde Adobe Dreamweaver CS3’ü çalıştıran bir bilgisayar.
Bilgisayarın internete bağlı olması öğrenme sürecinde çok yönlü araştırma yapmanızı
sağlayacaktır.
ÖĞRENME – ÖĞRETME STRATEJİLERİ
Başarılı bir eğitim süreci yaşamak ve istenilen hedeflere ulaşmak için kursiyerin kursa
devamlılığı esastır.
Kurs süresince düzenli not tutulmalı, anlatılanlar Adobe Dreamweaver CS3 programı
üzerinde uygulanmalıdır.
Kursiyer problem yaşadığı anlarda eğitici ile paylaşmalı
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 2
1. ÇALIŞMA ALANI VE PANELLER
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 3
1.1. Çalışma Alanını Düzenlemek
Dreamweaver’da araçların görünümünü ve araçların yerleşimini iki şekilde
düzenleyebilirsiniz. Bunlar coder ve designer düzenleridir. Coder kaynak kod görüntüleme
düzenini, desicner ise görsel görüntüleme görünümünü ifade eder.
Windows / workspace layout menüsü içinde
yer alan çalışma düzenlerinden birini
seçebilirsiniz.
1.2. Karşılama Ekranı
Dreamweaver ilk kez başlatıldığında karşılama ekranı çıkacaktır. Karşılama ekranı bir çok
işlemi kolaylaştıracaktır.
Open a Recent Item bölümünde son kullanılan
dosyalar listelenir. Bu listenin içindeki open
klasörünü
kullanarak
bilgisayardaki
diğer
dosyalara da erişilir. Aynı işlem File / File Open
menüsünden de yapılabilir.
Create new bölümünü kullanarak hangi uzantıya
ait dosya oluşturmak istenilirse buradan seçilebilir.
Daha farklı dillerde dosya oluşturulmak istenirse
more düğmesini tıklayarak istenilen dosya
seçilebilir. Dreamweaver Site düğmesi tıklanarak
Dreamweaver’da yine bir Site açılabilir. Aynı
seçeneklere File / New menüsünden de ulaşılır.
Create from Samples bölümünde ise Dreamweaver içerisinde bulunan örnek tasarımlardan
faydalanarak sayfa açılabilir.
Karşılama ekranı tekrar görülmek istenmez ise, karşılama ekranının sol alt kısmında bulunan
Don’t show again check işaretlenir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 4
1.3. Insert Araç Çubuğunu Kullanmak
İnsert araç çubuğu çalışma sayfasının üst bölümünde bulunur. Sayfanın tasarım öğelerini
eklemek için gerekli kısayolları barındırır.
Varsayılan
olarak
sekmeler
halinde
görüntülenir. Menu halinde görüntülemek için
üzerinde sağ tıklanarak show as menu
seçeneği seçilir. Artık sol tarafta menu
halinde görünecektir.
menu halinde iken en altta bulunan show as
Tabs seçeneği ile tekrar sekme görünümüne
getirilir.
İnsert araç çubuğu bir web sayfasına eklenecek tüm bileşenleri içerir. Favorites sekmesine
sık kullandığınız bileşenleri aktararak kullanım kolaylığı sağlayabilirsiniz. Favorite sekmesi
varsayılan olarak hiçbir kısayol içermez.
Bu sekmeyi düzenlemek için Favorites sekmesine
tıkladıktan sonra Right-click to customize your
favorite object yazısının üstünde sağ tıklayarak
Customize Favorites bağlantısına tıklayın.
Açılan Customize Favorite Objects penceresinde
Available Objects bölümünden eklenmek istenen
nesneler seçilerek Favorite Objects bölümüne
aktarılır. Favorite Object bölümüne eklenen
nesneler arasına kullanım amaçlarına göre Add
Sparator eklenebilir, sırası değiştirilebilir.
Bu
pencere onaylanarak kapatılır.
Artık sık kullanılan nesneler Favorites sekmesinde
görünür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 5
1.4. Properties Paneli
Tasarım aşamasında en çok kullanılan panellerden biridir. Varsayılan olarak bu panelde
sayfanın özellikleri gösterilse de, Properties panelinin içeriği o an yapılmakta olan işleme
veya seçili olan nesneye göre değişir. Örneğin sayfaya bir tablo eklenirse properties paneli
sayfa özelliklerinin üstünde tablonun özelliklerini gösterir ve bu özelliklerin değiştirilmesini
sağlar. Yine sayfaya metin eklenirse bu seferde properties penceresi metin özelliklerini
barındırır ve değiştirilmesini sağlar.
Page Properties düğmesini kullanarak sayfanın özellikleri değiştirilir. Panelin altta bulunan
bölümü sağ alt köşede bulunan ok işaretinden kapatılır.
Paneli tamamen kapatmak için panelin sağ üst köşesinde bulunan düğmeden Close panel
group seçeneği kullanılır. Buradan kapatılan panel, Windows / properties menüsüden
açılır.
1.5. Çalışma Penceresi Araç Çubuğunu Kullanmak
Çalışma penceresi araç çubuğunda bulunan Design düğmesi çalışma alanının görsel olarak
görünmesini sağlar. Code bölümü design bölümünde görsel olarak yapılan işlemlerin XHTML
görüntüsüdür. Split bölümü ise, ekranda hem design hemde code bölümünün görünmesini
sağlar.
XHTML (html-htm) bilen kullanıcılar design bölümünde yapılan değişiklikleri code
bölümünden de yapabilir. Ancak code bölümünde yapılan değişiklikler anında Design
ekranına yansımayacaktır. Bunun için
Reresh düğmesine basılarak code bölümünde
yapılan değişiklikler design bölümüne de yansıyacaktır.
Title bölümü üzerinde çalışmakta olduğunuz sayfanın tarayıcıda gösterilecek pencere ismidir.
Previev düğmesi sayfanın bilgisayarınızda yüklü bulunan browser’larda nasıl göründüğünü
test etmenizi sağlar.
View Option sayfanın Code, Design ve Split görünümüne göre içeriği değişir. Core, Design
ve Split pencerelerinin içeriğine göre View Option düğmesi farklılıklar gösterir. Örneğin
Design ve Split pencerelerinin ortak özellikleri olan Rules (cetvel) ve Grid (ızgara, klavuz
çizgileri) Code penceresinin özelliği değildir. Çünkü Code penceresinde cetvel ve klavuz
çizgileri bulunmaz. Design, Code ve Split görünümlerinde istenmeyen özellikler View Option
düğmesinden kaldırılabilir.
Sadece tasarım sırasında görünen nesnelerin özelliklerini kullanmak için kullanılır. Örneğin
Table Borders kaldırılırsa sayfada kullanılan tabloların çerçeveleri gizlenecektir.
Check up düğmesi ile sayfanın tarayıcı uyumluluğu denetlenir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 6
1.6. Çalışma Penceresinin Özellikleri
Dreamweaver’da çalışma sayfasının ismi sayfanın hemen üst tarafında yer alır. Yeni açılan
sayfalar ilk sayfadan itibaren sola doğru (kullanıcıya göre sağa) kayar.
Çalışma sayfasının sol alt bölümünde sayfanın bazı bölümlerine hızlı ulaşabilmek için kısa
yol düğmeleri bulunur. Örneğin sayfaya bir tablo eklendiğinde sol alt tarafta yer alan table
düğmesi yardımı ile tablo nesnesi daha hızlı seçilir.
Çalışma sayasının sağ alt köşesinde bulunan Select Tool varsayılan olarak seçili haldedir.
Hand Tool aracı sayfa içinde kaydırma çubuklarını kullanmadan rahatlıkla gezinebilmenizi
sağlar.
Zoom Tool ise sayfanızda titiz çalışma yapmanız gereken yerleri büyüterek daha rahat bir
çalışma imkanı yaratır. Alt tuşu ile kullanıldığında çalışma alanını küçültecektir.
Set magnification aracı ile istenilen büyütme oranını seçebilirsiniz. burada bulunan
Fit Width özelliğini kullanarak sayfa boyutunu ve genişliğini ekrana sığacak şeklide
büyütebilirsiniz.
Fit all özelliği yakınlaştırma işlemini sayfa genişliği ve yüksekliğine göre yapar.
Width Selection sadece seçilen alanı ekrana sığacak şekilde büyütür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 7
Web tasarımında çok önemli bir nokta pencere boyutudur. Sayfa her tarayıcıda farklı
pencere boyutlarında görünecektir. Bunun önüne geçmek için çalışa sayfasının sağ alt
bölümünde zoom aracı yanındaki Window Size düğmesini kullanabilirsiniz.
1.7. Panelleri Kullanmak
Dreamweaver açıldığında paneller otomatik olarak
açılır ve Designer ekranında sağ tarafta bulunurlar.
Bütün paneller farklı içerik ve seçenekler içerirler.
Panel isimlerinin solunda bulunan üçgen şekline
tıklanarak panelleri açabilir aynı yere tıklayarak
içeriğini gizleyebilirsiniz. Files Paneli varsayılan
olarak açık şekilde görülmektedir.
Bazı panellerin içinde bu panele bağlı farklı
sekmeler yer almaktadır. Panelleri ekranın
sağından çıkarmak ve ekranda isteğiniz yere
taşımak için panel başlığının en solundaki
sürükleme düğmesini basılı tutarak ekranda
istediğiniz yere taşıyınız.
Ekranda farklı yerlere taşıdığınız panelleri eski
haline getirebilmek için Windows / workspace
Layout / Designer menüsünü izleyiniz.
Çalışma alanını daha fazla genişletmek ve paneleri kaldırmak için F4 tuşuna basınız. Tüm
panellerin ekrandan temizlendi görülecektir. Panelleri geri getirmek için tekrar F4 tuşuna
basınız.
1.8. Kişisel Çalışma Alanı Oluşturmak
Çalışma alanını her seferinde kendinize göre yeniden düzenlemek yerine yaptığınız
düzenlemeyi kaydederek kişisel çalışma alanınızı oluşturmak size kolaylık sağlayacaktır.
Bunun için ekranın sağında bulunan Files
panelini sürükleyerek ekranın soluna
alınız.
Windows / workspace Layout
Save Current menüsünü seçiniz.
/
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 8
Açılan
Save
Workspace
Layout
penceresine kişisel çalışma alanınızın
ismini yazın. Pencereden çıkın.
Kişisel Çalışma Alanınız verdiğiniz isimle kaydedilecek ve Windows /Workspace Layout
menüsünde görünecektir. Her seferinde yeniden düzenleme yapmaktansa bu menüyü
kullanarak zaman kazanabilirsiniz.
Kişisel çalışma alanınızı silmek ya da ismini
değiştirmek için Windows / Workspace
Layout / Manage menüsünden açılan Save
Workspace Layout penceresini kullanınız.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 9
2. WEB SİTESİ YÖNETİMİ
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 10
2.1. Yeni Bir Site Oluşturmak
Bir site oluşturmak ve tasarlamak için ilk aşama site için kullanılacak dosya, resim, video, vb.
nesnelerin depolanacağı bir klasör oluşturulmalı ve bu klasör Dreamweaver’a site sayfası
olarak tanıtılması gerekir.
Öncelikle siteye ait tüm nesnelerin depolanacağı
bir klasör oluşturalım. Yandaki resimde de
görüldüğü gibi D sürücüsü içerisine ilk_sitem isimli
bir klasör oluşturulmuştur.
Karşılama ekranının Create New bölümünden
Dreamweaver Site düğmesine tıklanır.
Açılan Site Definition for Unnamed…isimli
pencerede Basic ve Advanted isimli iki sekme yer
alır. Basic sekmesinde sihirbaz yardımı ile bu
işlemi adım adım yapabilirsiniz. Advanted
sekmesinde ise daha fazla seçenek mevcuttur.
Advanted sekmesini tıklayarak bu sekmenin
içeriğine geçiniz.
Bu sekmenin sol tarafında sitemizin hangi kategoriye ait olduğu sorulmaktadır. Siteniz
bilgisayarda local olarak çalışacağından varsayılan olarak local info bilgisi yer alacaktır.
Burayı değiştirmeden Local İnfo bilgilerini giriniz.
Site name bölümüne sitenin adını giriniz. Bu ad sitenizin klasör ismi değildir. Sitenize sanal
ortamda verilen genel bir isimdir. Site adını Benim_Sitem olarak yazdık.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 11
Local root folder bölümünde ise Benim_Sitem isimli
sitenin klasörünün girilmesi istenmektedir.
Bö
bölümün sonundaki klasör yardımı ile biraz önce
açtığımız ilk_sitem isimli klasör seçilir.
Default images folder bölümünde ilk_sitem klasörü
içerisinde bir resim klasörünün belirlenmesi
istenmektedir. Yani ilk_sitem klasörü haricinde
bilgisayarın başka bölümlerinden sitede resim
kullanılması halinde Dreamweaver bu resmin bir
kopyasını alarak burada belirlenecek olan klasörün
içerisine atacaktır. Bu bölümünde sonunda bulunan
klasör yardımı ile ilk_sitem isimli klasörün içerisine
resimler klasörü açarak varsayılan resim klasörü
olarak belirlenir.
Site klasörünü ve bu klasör içerisinde yer alacak varsayılan resim klasörünü belirledikten
sonra Ok tuşuna basarak Site defination penceresi kapatılır.
Böylelikle oluşturacağımız sitenin özeliklerini yazacak olursak.
Site ismi
Sitenin bulunduğu klasör
Varsayılan Resim Klasörü
: Benim Sitem
: ilk_sitem
: resimler
Yukarıdaki özellikleri yazılı sitemiz Files Paneli içinde görünecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 12
2.2. Siteye Yeni Bir Klasör Eklemek
Yeni bir klasör açmak ;
Sitedeki tüm dosyalar ilk_sitem klasörü içerisinde yer almakta ve
bu klasörün içeriği Files Palelinde görüntülenmektedir. Files
panelinden bu klasör içerisini yeni bir klasör açmak için Files
paneli üzerinde sağ tıklanarak açılan listeden New folder seçilir.
Klasör ismi varsayılan olarak untitled ismi verilecektir. Untitled
yerine yeni bir isim (video) belirlenerek web klasörü içerisine yeni
bir klasör açılmış olur.
Bu ekranda eğer resimler klasörünün içerisine yeni bir klasör
açmak isteniyorsa bu işlem resimler klasörü seçili iken
yapılmalıdır.
2.3. Siteye Yeni Bir Sayfa Eklemek
Dreamweaver’da yeni bir sayfa açmanın birkaç yolu vardır.
2.3.1
Files paneli üzerinde sağ tıklanır ve açılan
listeden New Files seçilir. Yeni açılan dosyanın
ismi varsayılan olarak untitled olarak gelecektir.
Bunun yerine de yeni sayfanın ismi yazılarak
yeni bir dosya açılmış ve kaydedilmiş olur.
Files dosyası üzerinde sayfayı açmak istediğiniz klasör seçili değil ise New Folder ve New
File sekmesi pasif olarak görünecektir.
2.3.2
Karşılama ekranının Create New sekmesinde
hangi tür sayfa açılmak isteniyorsa seçilir. Ancak
burada açılan sayfa henüz kaydedilmediği için
Files Panelinde görünmeyecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 13
2.3.3
File / new menüsünden açılacak olan New document penceresinde Blank
Page sekmesinden istenilen türde sayfa seçilerek açılır.
Yeni açılan bir sayfanın varsayılan ayarlarını değiştirmek için yukarıdaki ekranda (New
Document penceresi) Preferences düğmesine tıklanır. Açılan pencerede Category
bölümünde varsayılan olarak gelen new document sekmesinde Default document kutusuna
ilk açılan sayfaların varsayılan olarak hangi türde (php, aspx, jsp vb.) açılması isteniyorsa
buradan seçilebilir. Sayfa ilk açıldığında istenilen türde açılmış olacaktır.
2.3.4
Yeni sayfa açmanın bir başka yöntemi ise; Standart araç çubuğunda
bulunan yeni sayfa açma düğmesi kullanılarak ta yeni bir sayfa açılabilir.
Buradan açılan sayfalar yukarıda yapılan varsayılan ayarlarınız
doğrultusunda açılacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 14
2.4. Sayfaya Türkçe Dil Tanımlaması
Dreamweaver’ın önceki sürümlerinde Türkçe karakter sıkıntısı yaşanmakta idi. Bu sorunu
aşabilmek için ek bir dil paketi tanımlanması gerekiyordu. Dreamweaver CS3 ile sayfanın dil
ayarlaması yapılabilmektedir.
Sayfanın Page Properties penceresinde Title/Encoding kategorisini seçin ve Encoding
bölümünde Türkçe dil desteğini seçiniz.
2.5. Yeni Açılan Sayfanın Kaydedilmesi
Yeni açılan sayfa File / Save menüsünden kaydedilir. Tüm programlarda olduğu gibi
Dreamweaver’da da Save kısayol düğmesi
bulunmaktadır. Ancak Dreamweaver ilk
açıldığında Standart araç çubuğu açık olmadığı için önce standart araç çubuğu açılmalıdır.
İnsert panelinde boş bir yere sağ tıklayarak
Dreamweaver’ın
araç
çubuklarını
görebilirsiniz. Buradan standart araç
çubuğunun sol tarafına check atarak
ekranda görünmesi sağlanır.
Standart araç çubuğunda sadece kaydet düğmesi değil bunun yanında ileri, geri, yeni sayfa
açma, aç, açık sayfaların hepsini kaydet düğmeleri yeralmaktadır.
Eğer sayfanız daha önce kaydedilmemiş ise sayfanıza isim vermeniz gerekir. Dreamweaver
kayıtlı olmayan sayfa için sizden bir konum belirlemenizi ve sayfanıza bir isim vermenizi
isteyecektir. Açılan Save As penceresinde File Name (Dosya adı) bölümünde varsayılan
olarak untitle yazacaktır. Untitle yerine sayfanın ismi yazılır. Konum olarak ise site klasörü
Dreamweaver’a tanıtıldığı için varsayılan olarak site klasörünün ismi (ilk_sitem) konum
kutucuğunda yer alacaktır. Konum kutucuğu farklı klasörlerde ise Save As penceresinin sol
alt tarafında bulunan Site Root düğmesine tıklanır ve site klasörünün (ilk_sitem) içeriğinin
görünmesi sağlanır ve kayıt işlemi yapılır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 15
2.6. Sayfa Özellikleri
Bir web sayfasının özelliklerine sayfa üzerinde sağ tıklayarak Page Properties
seçeneğinden ya da sayfa altında bulunan Properties Panelinin altındaki Page Properties
düğmesinden ulaşılır.
Bu pencere yardımı ile sayfa zemin rengini değiştirebilir, sayfa boşluklarını
düzenleyebilir, sayfa arkasına resim yerleştirilebilir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 16
Sayfa Yazı Tipinin
belirlenmesi
Yazı renginin belirlenmesi
Sayfa renginin belirlenmesi
Sayfaya arkaplan resmi belirlenmesi
Title/Encoding sekmesinin Encoding alanından Türkçe seçeneğini işaretleyerek
Sayfanın dilini Türkçe yapabilirsiniz.
2.7. Resim Eklemek
Web sayfaları resimleri içinde barındıran değil resimleri
görüntüleyen dosyalardır. Bu nedenle sayfaya eklenecek
olan resmin site klasöründe bulunması gerekir. Site
klasörünün içerisinde kullanılan tüm resimleri barındıran
bir klasör tanımlamak dosyaların
daha düzenli
yönetilmesini sağlayacaktır.
Eklenecek olan resim tanımlı resim klasörünün içinde ise
Files Panelinde görünecektir. Biz bu web sitesini
yapılandırırken
Site
Definition
For
………
penceresinde Default İmage Folder bölümünde
Resimler isimli klasörü varsayılan klasör olarak belirledik.
Eğer resimlerinizi barındıracak tanımlı bir klasörünüz
yoksa;
sitenizin
ayarlarını
yeniden
yapılandırabileceğiniz
Site
Definition
for……
penceresini yeniden kullanmalısınız. site klasörünüzün
(ilk_sitem) içine yeni bir klasör (resimler) açtıktan sonra
Files panelinin en üst kısmında sitenizin isminin yazdığı
kutucuğu açınız.
Açılan listenin en altında Manege Site öğesine
tıklayınız.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 17
Manege Sites penceresinde sol tarafta Dreamweaver’da
tanımlı sitelerin listesi çıkacaktır. Üzerinde çalışılan site
(Benim_Sitem) seçili iken Edit düğmesine tıklayın.
Site defination for Benim_Sitem isimli pencerenin Default images folder kutucuğunun
sağındaki klasör resmine tıklayarak resimlerinizi barındırmak için site (ilk_sitem klasörü)
içerisine açmış olduğunuz yeni klasörü (resimler klasörünü) seçiniz. Onaylayarak
pencereden çıkınız.
Artık sitede kullanılacak resimlerin barınacağı bir resim klasörü mevcuttur. Böyle bir klasör
yapısı olmadan da resimlerinizi site içerisinde herhangi bir yerde de barındırabilirsiniz. Fakat
site dışından herhangi bir klasörden sayfanıza direct olarak resim eklendiğinde çeşitli
sorunlarla karşılaşabilirsiniz.
Tanımlı resim klasörünüzün varlığı halinde ise; site dışından başka klasörlerden sayfanıza
direct olarak bir resim eklenirse Dreamweaver bu resmin bir kopyasını tanımlı resimler
klasörüne alacaktır. Resmi tanımlı klasör üzerinden sayfanızda gösterecektir.
Dreamweaver’da resim eklemenin farklı yöntemleri vardır.
•
Tanımlı
resim
klasörünün
içerisinde bulunan resimler Files
Panelinde
görünmektedir.
Sayfaya eklenmek istenen resim
dosyası sürüklenerek sayfada
gösterilmek
istenen
bölüme
bırakılır. İmage Tag Accessbility
Atributes
iletişim
penceresi
açılacaktır.
Bu
pencerede
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 18
herhangi bir nedenle resim görüntülenmediği taktirde yerine görüntülenecek olan
yazının Alternate text bölümüne girilmesi istenmektedir. Long description bölümüne
ise resmin yolunun yada daha fazla bilginin girilmesi istenmektedir. Bu bölümün
doldurulması ise şart değildir. Ancak Alternate text bölümünün doldurulması önerilir.
•
İnsert panelinin command sekmesinde İmages/image
düğmesine tıklanır. Açılan pencereden tanımlı resim
klasörü (resimler) açılır ve içerisinden ilgili resim dosyası
seçilerek onaylanır.
•
Files Panelinin içerisinde bulunan Assets sekmesine
tıklanır bu kısımda tanımlı resim klasörünün içerisinde
bulunan tüm resimler mevcuttur. Seçilen resmin ön
izlemesi görülecektir. İlgili resim seçilir ve sürükleme
yöntemi ile sayfanın ilgili yerine taşınır.
2.8. Image Placeholder
Sayfada kullanılacak olan resmin yerine rezerve etmek için
kullanılır. Sayfaya eklemek istediğiniz resim dosyası
materyalleriniz
arasında
bulunmamaktadır.
Sayfayı
düzenlerken ilgili resmin yerini rezerve ederek sayfanızın
tasarımı tamamlanır. İlgili resim tedarik edildikten sonra
rezerve edildiği yere eklenir.
•
•
•
Sayfanın belirlenen yerine imleç yerleştirilir.
İnsert panelinden images / Image Placeholder seçilir.
Açılan Image Placeholder penceresinde rezerve
yapılacak olan yerin boyutları ve alternatif yazının
girilmesi istenir. Bu bilgileri girilerek onaylanır.
•
Sayfanızın belirtilen bölümünde artık resminize yer
ayrılmıştır.
•
İlgili resmi tedarik edip tanımlı resim klasörü içerisine
eklendiğinde bu resmi rezerve edilen bölümü eklemek
için. Önce ilgili rezerve resim (Image Placeholder)
seçilir/tıklanır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 19
•
Web sayfası altında bulunan properties panelinin Src kutucunğunun sağında bulunan
Point to File düğmesini (dosya işaretleyici) sürükleyerek Files panelindeki ilgli resmin
üzerine bırakılır.
Rezerve edilen yere ilgili resim yerleşmiş olacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 20
2.9. Metinlerle Çalışmak
Açılan boş bir sayfada imleç yanıp sönmeye başlayacaktır. Buraya doğrudan metin
eklenebilir. Sayfaya resim eklenir ve sonra metin yazılmak istenir ise, önce resim işaretlenir
ve sonra klavyeden sağ ok tuşuna basılarak imlecin metnin yan tarafına düşmesi sağlanır.
Sonra yazım işlemine devam edilir. Dreamweaver CS3 te yazı yazılırken satır sonuna
gelindiğinde otomatik olarak yazı bir alt satırdan devam edecektir. Enter tuşuna basılarak bir
alt satıra geçilmek istendiğinde üsteki satır ile yeni açılan satır arasında iki satırlık bir boşluk
oluşacaktır. Her ne kadar iki paragraf aralığı olarak görünse de bazı durumlarda bu özelliğin
kullanılması istenmez. Enter tuşuna basıldığında oluşan fazla boşluğu önlemek için Shift
tuşuna basılı tutularak Enter tuşuna basılır. İmlecin hiç aralık vermeden bir alt satıra geçtiği
görülecektir.
İmleç metin üzerinde oluğu müddetçe properties panelinde metin özellikleri görünecektir. Bir
paragrafı ya da satırı sola, sağa ve ikiyana yaslamak için o paragrafın veya satırın tamamının
seçili olması gerekmez. İmlecin düzenlenmek istenen satırın veya paragrafın içerisinde
bulunması yeterlidir.
Properties panelinden faydalanarak metinleri düzenleyebilirsiniz.
2.10. Linkler (Bağlantılar)
Linkler, web sayfaları arasındaki bağlantının kurulmasını sağlayan kısa kodlardır. Bir web
sitesinde 6 çeşit bağlantı yapılır.
1. Site içi bağlantılar : Aynı site içindeki sayfaların birbirine bağlanmasıdır.
2. Site dışı bağlantılar : Diğer sitelere yapılan bağlantılardır.
3. E_Posta adresine yapılan bağlantılar.
4. Sayfa içi bağlantılar. (Çapa bağlantıları)
5. Dosya Bağlantıları
6. Map Bağlantıları
Birde bağlantıların Target özelliği vardır. Yani link verilen sayfanın (açılması istenen
sayfanın) nasıl açılacağını düzenleyen kodlardır.
2.10.1. Site içi Bağlantılar
Site içerisindeki sayfaların birbirlerine bağlanması için kullanılan bağlantı türüdür.
Sitemizde arabalar.html ve cicekler.html isimli iki sayfamız vardır. Bunlardan arabalar.html
sayfasını açınız sayfa içerisine Çiçekler metnini giriniz ve bu metni seçin. İnsert panelinde
command sekmesinde Hyperlink ( ) kısayol düğmesiya da İnsert /Hyperlink menüsünü
tıklayın. Açılacak olan Hyperlink penceresinin text kutucuğunda Çiçekler metni yer alacaktır.
Link kutucuğunun sağındaki klasörden faydalanarak cicekler.html sayfasını seçin ve ok
tuşuna basarak Hyperlik penceresine geri dönün.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 21
Hyperlik penceresinde link kutucuğunun dolu olduğu görülecektir. Target kutucuğunda
_blank, Parent, Self, top seçenekleri mevcuttur. Bunlar hedef sayfanın (açılması istenen
sayfanın,
_blank ; Yeni bir tarayıcı penceresinde,
Parent ; Yeni çerçevede
Self ; Aynı tarayıcı penceresinde,
Top ; Diğer çerçeveleri kapatarak bağlantıyı
tek çerçevede açar.
Bunlardan Parent ve Top seçenekleri
çerçeveler konusunda açıklanacaktır.
_blank seçeneğini işaretleyerek pencereden çıkınız. Üzerinde çalıştığınız arabalar.html
sayfasında bulunan Çiçekler metninin mavi renkte ve altının çizili olduğu görülecektir. Bu
işlemin tarayıcıda nasıl göründüğünü kontrol etmek için klavyeden F12 tuşuna basınız.
Sayfanın kaydedilmesi gerektiğine dair açılan mesaj penceresini onaylayarak (ok/evet)
kapatın. Tarayıcıda açılan sayfada Çiçekler metnine bir kez tıklandığında cicekler.html
sayfası yeni bir pencerede açılacaktır. Önceki sayfa araclar.html sayfası arka planda
kalmıştır.
Aynı işlemi tekrar ederek Hyperlink penceresinde Target kutucuğunu self olarak
işaretleyerek yapın ve deneyin. Yeni açılan sayfanın aynı pencerede olduğu görülecek ve
araclar.html sayfasının yerini alacaktır.
Site içi bağlantıyı yapmanın kısa yolu;
Çiçekler metni seçilir (araclar.html). properties panelinde bulunan Link kutucuğunun sağında
bulunan Point to File aracı sürüklenerek Files panalinde bulunan cicekler.html sayfasının
üzerine bırakılır. Böylece link tamamlanmış olur.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 22
2.10.2. Site Dışı Bağlantılar
Site alanı dışında bir URL adresine tanımlanan bağlantılardır. Bu tür bağlantılar
gerçekleştirilirken bağlantı yapılacak sitenin tam adresi yazılmalıdır. Yeni bir sayfa açarak
linkler.html adını verin. Sayfaya Emniyet Genel Müdürlüğü metnini girin ve seçin. Metin seçili
durumda iken properties penceresinin Link kutucuğuna http://www.egm.gov.tr yazın. Sayfayı
kaydedin ve tarayıcıda izleyin(F12). Tarayıcıda mavi renkli ve altı çizili Emniyet Genel
Müdürlüğü metnine tıklandığında Emniyet Genel Müdürlüğü web sayfası açılacaktır. Link
kutucuğuna tam adres girmeniz gerekmektedir. Link kutucuğuna www.egm.gov.tr olarak
yazmanız Dreamweaver CS3 tarafından hatalı link olarak kabul edilecektir.
Not : site dışı bağlantıların gerçekleşmesi için bilgisayarınızın internete bağlı olması gerekir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 23
2.10.3. E-Posta Adresine Yapılan Bağlantılar.
Bu tür bağlantılar elektronik posta adresine tanımlanan bağlantılardır. Tanımlanan bağlantı
tıklandığında ziyaretçinin e-posta programı açılır ve tanımladığınız e-posta adresi otomatik
olarak yazılır. Properties panelinde Link kutucuğuna mailto:e-posta yazılması yeterli
olacaktır. Boş bir sayfa açarak Eğitim Şube Müdürlüğü metnini yazın ve seçin Properties
penceresinden Link kutucuğuna mailto:[email protected] adresini girin. Yaptığınız işlemi
tarayıcınızda test edin.
E-Posta bağlantısını Insert /Email Link menüsünden açılacak olan Email Link Penceresinden
de yapabilirsiniz.
Not : E-Posta bağlantılarının gerçekleşmesi için bilgisayarınızın internete bağlı olması
gerekir.
2.10.4. Sayfa İçi Bağlantılar (Çapa Bağlantıları)
Uzun metin bilgilerinden oluşan web sayfalarında hızlı konumlanmayı sağlayan
bağlantılardır. Örneğin bu kitabın bağlantılar bölümünü web sayfasına yazdık. Sayfamızı
capa.html olarak kaydettik.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 24
Tarayıcı görünümü ise aşağıdaki gibi olacaktır.
Her maddenin açıklaması capa.html sayfasının aşağısında bulunmaktadır. Kullanıcı istediği
bilgiye daha hızlı ulaşabilmesi ve sitenin daha anlaşılır olması açısından madde
açıklamalarının bulundu bölümlere konumlandırma yapılmalıdır.
Capa.html sayfasında E-Posta Adresine Yapılan Bağlantılar isimli açıklamanın sonuna (sayfa
altında bulunan) imleç yerleştirilir. İnsert panelinin aşağısında bulunan Named Anchor
(çapa) düğmesine tıklanır açılan Named Anchor penceresine konum ismi yazılır. Onaylanır.
İmlecin bulunması
gereken yer
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 25
Yandaki görüntü elde edilecektir. Böylelikle çapa
imlecin bulunduğu yere konumlandırılır.
Şimdide konumlandırılan bu çapaya link verelim.
Sayfa başında bulunan (capa.html) 3. E-Posta Adresine Yapılan Bağlantılar maddesini
seçiniz. Properties panelinde bulunan Link kutucuğuna #e_posta yazınız. Kutudan çıkınız.
E-Posta Adresine Yapılan Bağlantılar maddesi mavi renkte ve altı çizili hale gelecektir.
Sayfanızı kaydederek tarayıcıda izleyebilirsiniz (F12). Sayfada bulunan diğer maddelerde bu
yöntemle birbirlerine bağlanır.
2.10.5. Dosya Bağlantıları
Web Sayfası haricinde yapılan bağlantılardır. Sıkıştırılmış bir dosya (rar.zip formatlı
dosyalar.) tarayıcı tarafından tanınmadığı için tarayıcı bu dosyayı Download yapmak
isteyecektir. Ziyaretçiye klasör gönderilmek isteniyorsa içerik sıkıştırılarak yeni oluşan
sıkıştırılmış dosyaya link verilir.
Tarayıcılar jpg, gif gibi resim formatlarını tanır. Örneğin arabalar.html sayfasını açın.
Sayfada bulunan araç resmini silin. Sayfanın uygun bir yerine “Arabam” metnini yazın. Bu
metni seçin sonrada Properties panelindeki Link kutucuğunun yanındaki Point To File
aracını sürükleyerek Files Panelinde bulunan araba.jpg isimli resim dosyasının üzerine
bırakın. Arabam metni link halini aldıktan sonra sayfayı tarayıcıda izleyiniz.
Arabam metnine tıklayınca araba.jpg resim dosyasının tarayıcıda açıldığı görülecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 26
2.10.6. Map Bağlantıları
Web sayfalarında bir bağlantı sadece bir
sayfaya veya bir hedefe konumlandırılır. Fakat Map
Bağlantıları ile bir resim üzerinde birden fazla
hedefe
(sayfaya)
yönlendirilen
bağlantılar
oluşturulur. Genellikle harita resimlerinde kullanılır.
Örneğin Türkiye iller haritasını düşünelim. Her ilin
üzerine tıklandığında o ile ait sayfanın açılması
istenilirse;
kullanılacak
olan
yöntem
Map
Bağlantılarıdır. Properties penceresinin sol alt
kısmında bulunan araçlar Map Bağlantısı araçlarıdır.
Aşağıdaki örnekte görüldüğü üzere sitede yeni bir sayfa açın (harita.html) ve Türkiye iller
haritası resmini (harita.jpg) bu sayfaya yerleştiriniz. Sayfayı kaydedin. Resmin üzerine
tıklandığında (resim seçili halde iken) Properties penceresinin sol altında Map araçları yer
alacaktır. Kare şeklindeki araç, dikdörtgen ve kare tipi seçimler için kullanılır. Diğer araç ise
bağımsız/serbest çizimler için kullanılır. Şekilde görüldüğü gibi bu aracı kullanarak Türkiye
haritasından Ankara ilini seçiniz. Properties penceresinin Link kutucuğuna ise ankara.html
yazın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 27
Türkiye haritasının bulunduğu (harita.html) sayfadan Ankara iline tıklandığı zaman Ankara
ilinin ayrıntılı haritasının açılması planlanmaktadır. Yeni bir sayfa daha açın Ankara
haritasının resmini (ankara.jpg) sayfaya yerleştirin. Sayfayı ankara.html olarak kaydedin.
Şimdi de Türkiye haritasının bulunduğu sayfayı tarayıcıda izleyin. Haritada Ankara ilinin
üzerine gelindiğinde el resmi çıkacaktır. Bu bölüm tıklandığında ise Ankara iline ait harita
açılacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 28
3. TABLOLARLA ÇALIŞMAK
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 29
3.1. Tablo Eklemek
Bir sayfaya tablo eklemenin en kısa yolu Insert
Paneli/Common sekmesinde bulunan tablo
ekleme düğmesidir.
Tablo ekleme işlemi
üzerinden de yapılabilir.
İnsert/Table
menüsü
Açılan Table Penceresi içerisinde Table Size
bölümünde
Rows : Yeni açılacak olan tablonun kaç satır
olacağını,
Columns : Açılacak olan tablonun kaç sutun
olacağını.
Table Width : Tablonun yüksekliğini
Border Thickness : Tablo çizgi kalınlığını
Cell Padding : Hücre içi boşlukları
Cell Spacing : Hücre çerçeveleri arasındaki
uzaklığı ifade eder.
Header
bölümünde
alternatiflerini içerir.
tablo
başlıklarının
Caption : Tablonun ismi
Align Caption : Tablonun isminin konumunu düzenler.
Summary : Tablo hakkında özet bilgilerin yazıldığı kutucuktur.
Yukarıdaki tablo ekleme penceresine göre üç
satırlı ve üç sütunlu bir tablo oluştu. Başlık
bölümünü üst olarak seçtiğimiz için birinci satır
hücrelerine yazılan yazılar kalın olacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 30
3.2. Tablo Özellikleri
Tabloya ait properties penceresinin görülebilmesi için tablonun seçili olması gerekir. Tablo
ekleme penceresinin özellikleri properties panelinde de mevcuttur. Bu paneli kullanarak ta
tablo üzerinde bir çok işlemi gerçekleştirebilirsiniz. Rows ve Cols kutucuklarını kullanarak
satır veya sütun sayısını yeniden belirleyebilir, tablo genişliğini değiştirebilir, tablonun sayfa
içerisinde konumunu (Align) belirleyebilirsiniz. Burada yaptığınız değişiklikler eşzamanlı
olarak tabloda da görülecektir. Hatta daha önceden hazırlanmış olan bir tablo modelini
mevcut tablonuza uygulayabilirsiniz (Class). Ancak farklı tablo modellerinin uygulanması için
önce CSS bölümünün öğrenilmesi gerekmektedir.
Tablo arkasına bir resim
ekleme.
Tablonun sayfa içerisinde
ortalanması, sağa, sola
yaslanması
Border: Kenarlık kalınlığı
Bg color: bölümünden tablo rengini belirleyebilir,
Brdr Color: bölümünden tablo kenarlık rengini belirleyebilirsiniz.
Bg Image: Bu bölümde tablo arkasına bir resim yerleştirebilirsiniz. Bu resim tablonun boyutu
ile aynı olmalıdır. Tablo ile aynı boyutta olmayan resimler tablodan taşma problemi
yaratacaktır.
Hücreleri Birleştirmek :
Tasarımda sık sık kullanılan tablo hücrelerinin birleştirilmesi
için birleştirilmesi gereken hücreler seçilir. Properties
penceresinin sağ tarafında bulunan Merges Selected Cells
(seçili hücreleri birleştir) düğmesini tıklayarak seçilmiş olan
hüçreler birleştirilir.
Aynı işlemi seçili hücreler üzerinde sağ tıklayarak table
sekmesinden Merge Cells seçilerek yapılır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 31
3.3. Tablo Hücrelerinin Bölünmesi :
Tasarım sırasında bir hücreyi ikiye ya da daha fazla hücreye
ayırmanız gerekebilir. Bu durumda bölünmesi gereken hücre
seçilerek (üzerine tıklanır) Properties penceresinin sağ altında
bulunan Split Cell into row and Column (Hücreleri satır veya sütunlara
böl) düğmesine tıklanır.
Açılan Split Cell penceresinde Rows radio butonu, hücrenin satırlara ayrılacağını, Columns
radio butonu hücrenin sütunlara ayrılacağını ifade eder. Number of Coumns kutucuğu ise
hücre satırlara bölünecekse kaç satıra bölüneceğini, hücre sütunlara bölünecekse kaç
sütuna bölüneceğini ifade eder. Bu kutucuğu kullanarak satır sayısını veya sütun sayısını
belirleyin.
Hücreyi Satırlara böl
Hücreyi Sutunlara böl
Hücre ya da satır sayısını belirleyin
3.4. Tabloya Satır Ekleme:
3.4.1
Tabloya satır eklemenin en hızlı
yolu tablonun son hücresine
gelerek klavyeden tab tuşuna
basmaktır.
3.4.2
Tab tuşu ile açılan satırlar
tablonun sonuna eklenir. Eğer
araya satır eklenmek istenirse
tablo üzerinde sağ tıklanarak
Table / İnsert Row seçilerek
imlecin bulunduğu satırın üzerine
yeni bir satır eklenecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 32
3.4.3
Tabloya Satır Ekleme işlemini diğer seçenekleri kullanarak yapabilmek için,
İnsert / Table Objects menüsü kullanılır. Burada Insert Row Above, imlecin
bulunduğu satırın üstüne, Insert Row Below, imlecin bulunduğu satırın altına
yeni bir satır ekler.
3.4.4
Properties penceresinde Rows bölümüne
satır sayısını eklenmek istenilen satır kadar
arttırarak yeni satırlar oluşturabilirsiniz. Bu
işlem için mevcut tablonun seçili halde
olması gerekir.
3.5. Tabloya Sütun Ekleme :
Tabloya sütun eklemenin de birden fazla yolu vardır.
3.5.1. Tablo üzerinde sağ tıklayarak Table /
Insert Column menüsünden yeni bir sütun
oluşacaktır.
3.5.2. Insert / Table / Insert Column to The Left
menüsünden imlecin bulunduğu sütunun
soluna ya da Insert /Table /Insert Column to
The Right ile imlecin bulunduğu sütunun
sağına yeni bir kolon ekleyebilirsiniz.
3.5.3. Properties panelinden Column bölünü
kullanarakta mevcut tablonun sütunlarını
çoğaltabilirsiniz.
Columns
bölümünde
bulunan sütun sayısını istenildiği kadar
attırabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 33
3.6. Satırların, Sütunların ya da Tablonun Silinmesi
3.6.1. Silinmek istenen satır, sütun ya da Tablo seçilerek klavyeden Delete tuşuna
basılır.
3.6.2. Silinmek istenen satır ya da sütun üzerinde sağ tıklayarak Table / Delete
Row, Delete Column sekmesinden satır ya da sütun silinir.
3.6.3. Properties panelinde Satır ya da sütun eklemek için kullanılan Rows ve
Columns bölümünden satır yada sütun sayıları azaltılarak satır ya da sütunlar
silinir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 34
4. DREAMWEAVER CS3’DE CSS
KULLANIMI
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 35
4.1. CSS nedir?
CSS; Basamaklı Stil Sayfası ( Cascading Style Sheets)
Web sayfalarında kullanılan metin, resim, link, table, vb. nesnelerin her sayfada tek tek
yeniden düzenlenmesi yerine bu nesnelere ait tanımlama sayfası (css) oluşturularak
nesnelerin kullanımını standart hale getirmektir.
CSS’in en belirgin özelliği tarayıcılara standart imlerini nasıl görüntüleyeceğini söylemesidir.
4.2. CSS Türleri (Stil Şablonları)
1. Yerel CSS
2. Genel CSS
3. Harici CSS
4.2.1. Yerel Stil Şablonları
Yerel stil şablonları XHTML belgesinin body bölümüne yazılırlar. Sadece bir kereliğine
yazıldıkları yerde etkili olurlar.
<body>
CSS Türleri
</body>
CSS olmadan yazılan başlık yazısı
<body>
<h1 style="color:#000000; font:Tahoma; font-size:16px">CSS Türleri</h1>
</body>
Yerel Stil Şablonu (CSS) uygulanmış yazı
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 36
4.2.2. Genel Stil Şablonları
Yerel stil şablonlarının aksine genel şablonlar HTML belgesinin head bölümüne yazılır ve
tüm belgeyi etkilerler.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<style type="text/css">
<!-.style1 {
font-family: Tahoma;
font-size: 16px;
}
-->
</style>
</head>
<body>
<span class="style1">CSS Türleri</span>
</body>
Genel Stil Şablonu Uygulanmış Sayfa
4.2.3. Harici Stil Şablonları
CSS in sizi büyük bir yükten, yani her sayfa için ayrı ayrı kod yazmaktan kurtaran türü, harici
stil şablonlarıdır. CSS in bu türünde site içerisine *.css isminde bir dosya açılır. Metin, resim,
link, table vb. nesnelere ait özellikler bu dosyada tanımlanır. Css dosyası her sayfanın
başında head bölümünden çağrılarak kullanılır.
Harici bir CSS sayfası
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 37
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />//Harici CSS
sayfasını web sayfasına çağıran html kodu
</head>
<body>
<h1 class="yeni">CSS Türleri</h1>
</body>
</html>
Harici CSS uygulanmış bir web sayfası
4.3. Dreamweaver CS3’de CSS Yapma
Dreamweaver CS3 ile kod yazmadan CSS uygulamaları yapılabilir.
CSS oluşturmak için sağ taraftan CSS panelinden CSS Styles
sekmesini seçin. Bu sekmeden All seçeneğini seçin. Eğer bu sekme
görünmüyor ise window menüsünden CSS Styles seçeneği ile bu
sekme görünür hale gelecektir.
Yeni CSS oluşturmak için bu pencerinin en altında bulunan “New
CSS Rule” simgesi
seçilir. Karşımıza New CSS Rule Penceresi
gelecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 38
Selector Type : Oluşturulacak seçicinin tipi buradan belirlenir.
•
•
•
Class (can apply to any tag) : Bu seçenek işaretlenirse yeni bir class
(sınıf)oluşturulur. name bölümüne de isim girilerek class’a isim verilir.
Tag (redefines the look of a specific tag) : Bu seçenek ile mevcut html taglarına
biçimlendirmeler uygulanabilir. Html tagı kendi biçimlendirmesinin yanı sıra
belirtilecek biçimlendirmeleri de kullanır. Bu seçeneğin seçili olması durumunda
resimde görünen name bölümü tag olarak değişecek ve bu bölümde html tagları
listelenecektir. Bu taglardan istenilen seçilerek biçimlendirmeler yapılabilir.
Advanced (IDs, pseudo-class selectors) : Bu seçenek ile link biçimlendirmeleri
yapılabilir. Bu bölüm seçili olduğu zaman name bölümü Selector olarak değişecektir.
Name : Bu bölüm seçilecek seçici tipine (selector type) göre değişir.
•
•
•
Name : Eğer class seçili ise bu bölüm name olacaktır. Buradan yeni oluşturulacak
class (sınıf) için isim belirtilir.
Tag : Eğer tag seçili ise bu bölümün adı tag olur ve html tagları listelenir. İstenilen
html tagı seçilerek bu taga biçimlendirmeler uygulanır.
Selector : Eğer Advanced seçili ise bu bölümde direk isim girilebilir ve link
biçimlendirmeleri yapılabilir.
o a : link : Linkin normal durumda biçimi.
o a:visited : Daha önceden ziyeret edilmiş link biçimi.
o a:hover : Fare linkin üzerinden geçerken.
o a:active : Fare ile linke tıklandığı an linkin biçimi.
Define in : Oluşturulacak CSS nerede oluşturlacağı buradan belirlenir.
•
•
New Style Sheet File : Yeni bir stil dosyası oluşturmak anlamına gelir. Yani css
uzantılı farklı bir sayfa oluşturmak. Buna harici css sayfası denir. Oluşturulan harici
css dosyasını sayfada kullanabilmek için “New CSS Rule” simgesinin solundaki
“Attach Style Sheet” simgesi kullanılır.
This document only : Bu seçenek seçili durumda ise css aynı sayfa içerisinde
oluşturulacak demektir. Bu css html kodlarında tagları arasında oluşur ve body
tagları arasından çağrılarak sayfaya uygulanır. Buna genel CSS denir.
Oluşturulan CSS’in Uygulanması :
Eğer genel css oluşturduysanız zaten sayfanın head tagları arasında tanımlı olduğu için direk
uygulaması vardır. Harici css oluşturduysanız bu css’i sayfa ile ilişkilendirmeniz gerekir.
Bunun için “New CSS Rule” simgesinin solundaki “Attach Style Sheet” simgesi kullanılarak
harici css dosyası seçilir.
Herhangi bir yazı veya resim seçilir ve properties (özellikler) bölümünden style seçeneği
altında oluşturulmuş css lerin listesi listelenir. Buradan istenen biçimlendirme seçilir ve
nesneye uygulanır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 39
4.4. Örnek Stil Dosyalarını Kullanma
Dreamweaver CS3’de bulunan örnek CSS dosyalarını kendi sayfanızda kullanabilirsiniz.
Bunun için ;
CSS panelinin CSS Style / all sekmesinde Attach Style Sheet
düğmesine tıklayın.
Açılan Attach External Style Sheet penceresinin altında bulunan Sample Style Sheets
bağlantısına tıklayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 40
5. CANLI MENÜ EKLEME
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 41
5.1. Spry Menu Bar
Dreamweaver CS3 ile gelen özellik ile sayfaya dikey ya da yatay şekilde menüler
ekleyebiliriz. Menüleri sayfa içinde başka bir sayfaya ulaşmak ya da başka bir siteye
bağlanmak için menüleri kullanabilir.
Bir web sayfasına menü ekleyebilmek için;
Insert / Spry / Spry Menu Bar seçeneğini tıklayın. Spry Menu Bar penceresinden Horizontal
(yatay) ya da vertical (dikey) seçeneklerinden birini seçin.
İmlecin bulunduğu bölümde seçiminize uygun bir menü bar oluşacaktır. Menü barda
varsayılan olarak 4 ana menü bulunacaktır. Menu bar seçili halde iken Properties
penceresinde menüye ait özellikler yer almaktadır.
Ana Menü
Menü alt başlıkları
Menü başlıklarının ismini
değiştirmek için Text
kutucuğundan faydalanın
Menüye ait başlık isimlerini menü başlığı seçili halde iken text kutucuğundan değiştirin.
Şablon olarak hazırlanmış bu menüyü kendinize uyarlayın. Menü başlıkları silmek veya yeni
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 42
bir menü başlığı eklemek için
yapmak için
düğmelerini kullanın. Menü başlıkları arasında sıralama
düğmelerini kullanın.
Menüyü farklı bir görünümde görmek için properties penceresinde bulunan Turn Styl Off
düğmesini tıklayın.
Menü başlıklarını bu görünümde daha rahat düzenleyebilirsiniz.
Düzenlenmiş bir menü bar tarayıcıda aşağıdaki gibi yayınlanacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 43
6. ROLLOVER IMAGE
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 44
6.1. Rollover Görüntü Oluşturmak
Web sayfasında durağan resimler sayfanın basit olarak tasarlandığı hissini yaratacaktır.
Rollover, imlecin (farenin) bir obje üzerine götürüldüğünde objede meydana gelen durum
değişikliğidir.
Basit bir rollover uygulaması için iki ayrı resmi ihtiyaç duyulmaktadır. Bu resimleri Photoshop
veya Fireworks vb. programlar yardımı ile yapabilirsiniz.
Rollover yapabilmek için;
Yeni bir sayfa açarak kaydedin.
Bu konuda iki ayrı resim kullandık. Bunları (a1.jpg) ve (a2.jpg) olarak isimlendirdik.
Sayfada normal olarak görünecek buton (a1.jpg)
Mause üzerine gelince görünecek buton (a2.jpg)
Açtığımız yeni sayfada insert panelinin Commond
sekmesinde bulunan Rollever düğmesini seçin
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 45
İnsert Rollover Image isimli pencerede rollover seçenekleri yeralmaktadır.
Image Name : Rollover imalge objesine bir isim vermek zorundayız. Fakat çok ta önemli
değil. Dreamweaver CS3 bizim için otomatik isimlendirme yapacaktır. Sayfanızda rollover
özelliği fazla kullanılırsa anlamlı isimler vermeniz önerilir.
Orginal Image : Adından da anlaşılacağı üzere orijinal resim dosyasını seçiyoruz. Bu resim
(buton) sayfa ilk açıldığında görünmesi gereken dosyadır (a1.jpg).
Rollover Image : Bu ise fare linkin (butonun) üzerine geldiğinde görünecek resmi ifade eder
(a2.jpg)
Preload Rollover Image : Rollover resimlerinin yüklenmesi uzun sürebilir. Bu süre zarfında
ziyaretçi linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye
çalışılacaktır. Bu ise hoş olmayan bir görüntüye yol açacaktır. Bu seçeneği kullanarak
rollover image arka planda yükleninceye kadar orginal image’nin (a1.jpg) arka planda sabit
kalmasını sağlayabiliriz. Böylece bu sorunda ortadan kalmış olur.
Altermate Text : Bazı durumlarda rollover çalışmadığında görülecek olan yazıdır. Bazı
tarayıcılar rollover işlemini tanımamaktadır. Her türlü olasılığa karşı alternatif bir yazının
bulunması gerekir. Bu özellik aynı zamanda fare ile resmin (butonun) üzerine gelindiğinde bir
açıklama metni olarak görülecektir.
When Clicked Go to URL : Butona tıklandığında (a1.jpg) çalışması gereken bağlantı (link )
adresidir.
Insert Rollover Image penceresinin seçeneklerini uyguladıktan sonra sayfayı kaydederek
tarayıcıda yayınlayın.
Sayfa açıldığında görünen buton
Fare üzerine geldiğinde görünen buton
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 46
7. NAVİGATİON BAR
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 47
Önceki konumuzda rollover image nesnesinin özelliklerini anlattık. Rollover özelliğini kısaca;
imlecin (farenin) bir obje üzerine götürüldüğünde objede meydana gelen durum değişikliği
olarak tanımladık.
Dikkat edilirse sadece farenin obje üzerine getirilmesinden söz edilmekte. Oysa farenin obje
üzerinde birden fazla işlemi vardır. Normal hal (up), üzerine gelme (over), tıklama (down),
ayrılma (out) gibi.
Farenin hareketine göre objenin alacağı duruma navigation denir. Yani navigation, rollover
özelliğine göre daha kapsamlıdır.
Farinin obje üzerinde alacağı görüntüleri daha önceden resim tasarlama programları ile
düzenledik. Bu konuda Photoshop veya Fireworks programlarından faydalanabilirsiniz.
Bir düğmenin 4 farklı durumu olabilir. Bunları ayrı ayrı resimlerdirdik.
Sayfa açıldığında görülecek obje
(up image)
(a1.gif)
Mause üzerine geldiğinde görülecek obje
(over image)
(a2.gif)
Tıklandığında görülecek obje
(Down image)
(a3.gif)
Mause ayrıldığında görülecek obje
(over down image)
(a4.gif)
Navigation Bar’da kullanılacak resimler
Yeni bir sayfa açarak navigation.html adında kaydedin.
Insert Paneli/Commond/Navigation Bar sekmesini seçin.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 48
Açılan Insert Navigation Bar penceresinde objelerin düzenlemesini yapabileceğiniz bölümler
mevcuttur.
Nav Bar Elements kutucuğu ve Element Name kutucukları daha önce rollover
yapmadığınız için Unnamed1 olarak gelecektir. Aşağıdaki kutucukları doldurdukça buradaki
isim otomatik olarak değişecektir. Bu kutucuklara kendinizde farklı bir isim verebilirsiniz.
Up Image
: Düğmenin ilk hali
Over Image
: İmleç (fare) düğmenin üzerine geldiğinde görüntülenecek resim.
Down Image
: Düğmeye tıklandığında görüntülenecek resim.
Over While Down : Düğme basılıyken, fare düğmenin üzerinden çekildiğinde
görüntülenecek resim.
Preload Images : Oluşturduğunuz döngülü resmin sayfa yüklenirken çağrılmasını sağlar.
Sayfa ilk yüklendiğnide Navigation Bar içerisinden çağrılacak diğer resimler tarayıcı ara
belleğine alınır. Bu şekilde resimlerin yüklenmesi esnasında oluşacak gecikmelerin önüne
geçilmiş olur.
Show Down Image Initially : Down image seçeneğinde tanımlanan resmin doküman
penceresinde öncelikli olarak gösterilmesini sağlar. Bu seçeneğin işaretli olmadığı durumda,
Up İmage alanında tanımlı resim gösterilir.
In : Döngülü resme oluşturulan bağlantının nerede açılacağını ifade eder. Normal bir sayfada
oluşturulan bir bağlantı, yeni pencerede açılır. Sayfa çerçevelerden oluşuyorsa bağlantının
hangi çerçevede açılması gerektiği belirtilmelidir.
Insert : Oluşturulacak olan Navigation Bar’ın sayfada yatay ya da dikey olarak gösterilmesini
sağlar.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 49
Use Tablo (Tablo Kullan) : Navigation Bar’ın bir tablo içinde oluşmasını sağlar.
Insert Navigation Bar penceresinde düzenlemeler tamamlandıktan sonra onaylayarak
pencereyi kapatın.
Sayfayı tarayıcıda izleyin (F12).
Up image
Over image
Down image
Over While Down
Farenin hareketlerine göre resmin aldığı durumlar.
Bu işlemi sayfanızda kullanacağınız tüm butonlar için tek tek uygulayın.
Bu işlemi tek tek uygulamak sıkıcı olabilir. Fakat yeni başlayanlar için en iyi yöntemdir.
Insert Navigation Bar penceresinde bir defada tüm butonlara navigation özelliği
uygulayabilirsiniz.
Nav Bar Elements kutucuğunda sadece bir resim için (Ana Sayfa) işlem yaptık. Bu nedenle
bir düğme ismi yeralmaktadır.
düğmelerini kullanarak yeni bir düğme ekleyip
çıkarabilirsiniz. Yeni düğme eklenince diğer kutucuklar boşalacaktır. Tüm kutucukları yeni
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 50
resim için tekrar doldurunuz. Nav Bar Elements kutusundaki resimlerin (botonların,
elementlerin) sırasını aşağı ve yukarı düğmelerini kullanarak değiştirebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 51
8. (CANLI) SEKMELİ PANEL
Spry Tabbed Panel
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 52
8.1. Spry Tabbed Panel
Adobe DreamWeaver CS3 ile gelen sekmeli paneli kullanarak görselliği ve kullanımı
arttırabilirsiniz.
Insert / Spry / Spry Tabbed Panel menüsünü seçin . İki sekmeden oluşan bir panel sayfaya
eklenecektir. Panel başlığını tıklayarak Properties paneli yardımı ile panel içerisindeki sekme
sayısını, sekme metnini ve sekmelerin içerdiği metinleri düzenleyebilirsiniz.
Insert panelinde Common sekmesinden Spry Tabbed Menu düğmesini kullanarak daha
pratik olarak sekmeli panel ekleyebilirsiniz.
Sekme
Sekme içeriği
Yeni Sekme
Ekle / Sil
Sekme sırasını
Değiştirme
Sayfa
açıldığında ilk
olarak hangi
sekme gelsin
Properties panelini kullanarak yeni sekme ekleyebilirsiniz. Sekmelerin sırasını belirleyebilir,
içeriklerini değiştirebilirsiniz. Sekme içerisini tıklayarak Page Properties (sayfa özellikleri
penceresi) özelliklerinden normal sayfada kullanılan tüm özellikleri sekme sayfasında da
kullanabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 53
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 54
9. AKORDİON PANELİ
Spry Accordion
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 55
Yeni bir sayfa açarak accordion.html olarak kaydediniz.
Insert Panelinden spry panelini tıklayın. Spry sekmesinden Spry Accordion düğmesini
tıklayın.
Sayfaya iki etiketli spry accordion eklenecektir.
Accordion
içeriği
Accordion
Etiket ismi
Accordion
Etiketleri
Accordion
Ekle
Accordion
Sırası
Accordion etiketlerinin üzerine tıklayarak isimlerini değiştirebilirsiniz. Accordion başlığını
tıklayarak Properties panelinden yeni bir accordion ekleyebilir, sırasını değiştirebilirsiniz.
Accordion içeriğinde Content yazan kelimeye tıklayarak accordion içeriğini değiştirebilirsiniz.
Düzenlenen Accordion panelinde gezinti yapabilmek izin hangi etiketin üzerine gelirseniz o
etiketin sağ tarafında bir göz işareti oluşacaktır. Buraya tıkayarak etiketin içeriğini
görebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 56
Accordion Paneli sayfaya eklendiğinde Dreamweaver CS3 arka planda accordion.css ve
accordion.js sayfaları oluşturur. Bunlar accodion’un çalışması için gerekli olan style ve jawa
script kodlarını içerir.
Css dosyası açık iken (accordion.css) CSS Styles panelinin All Rules bölümünden
accordion ile ilgili kod gruplarına ulaşabilirsiniz. Burada kodlar farenin hareketine göre
nesnelerin alacağı durumu gösterir. Dolayısı ile kodlar gruplandırılmıştır. All Rules
bölümünün altında “Properties For …….. “ bölümünde her grubun özelliklerini
değiştirebileceğiniz bir bölüm vardır. biraz css kod bilgisi olan kullanıcılar bu kodlar üzerinde
değişiklik yaparak Accordion renklerini değiştirebilirler.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 57
10. CANLI KATLANABİLİR PANEL
Spry Collabsible Panel
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 58
Spry Collabsible Panel Dreamweaver CS3 ile gelen yeniliklerden birisidir. Accordion Panel
yapısına çok benzemektedir. Fakat tek bölümden oluşur. Spry Collabsible Panel’den birden
fazla ekleyerek accordion gibi çalıştırabilirsiniz. Accordion’dan farklı olarak paneller
birbirlerinden bağımsızdırlar. Dolayısıyla panelin biri açıkken diğeride açık olabilir. Tüm
özellikleri accordionun özelliklerine benzer.
Yeni bir sayfa açarak kaydedin.
İnsert Paneli / spry sekmesinden spry collabsible ekleyeyin. Aynı işlemi insert / spry
menüsünden de yapabilirsiniz. Eğer kayıtlı bir sayfa üzerinde spry collabsible eklemeye
çalışırsanız Dreamweaver CS3 sizi sayfanın kaydedilmesi gerektiği konusunda ikaz
edecektir.
Spry Collabsibleye ait özellikler ise;
Display : Dreamweaver CS3 de panelin kapalı ya da açık kullanılacağını ifade eder.
Default State : bölümü sayfa yüklendiğinde içerik katının açık ya da kapalı olma durumunu
gösterir.
Enable animation : içeriğin kayarak açılması için kullanılır.
Diğer tüm özellikleri accordion ile aynıdır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 59
11. FLASH NESNELERİ EKLEME
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 60
Oluşturduğunuz web sayfası içerisine çeşitli nesneler ekleyerek sayfanın zengin bir
içerik kazanmasını sağlayabilirsiniz.
Dreamweaver CS3’de sayfa içerisine flash nesneleri eklemek için insert paneli /
media düğmesi kullanılır.
11.1. Flash Filmleri Ekleme :
Flash filmlerinin uzantısı SWF dir.
Adobe Flash vektörel tabanlı web animasyon programıdır. Bu nedenle flash ile
hazırlanan filmlerin boyutu küçüktür. Web sayfalarında oldukça fazla kullanılmaktadır.
flash filmleri swf formatındadır. Sayfanıza swf filmi eklemeden önce ilgili filmi site
klasörünüze taşımalısınız.
İnsert panelinden Flash düğmesini tıklayın ve açılan pencereden site klasörünüz
içerisinden bir swf filmi seçin.
Seçim işlemi tamamlandıktan sonra Object Tag Accessibility Attributes penceresi
açılacaktır. Bu pencereyi iptal diyerek geçebileceğiniz gibi filme bir başlık yazabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 61
Eklediğiniz flash filmi Dreamweaver CS3 doküman penceresinde görünmez. Bunun yerine
doküman penceresinde flash simgesinin bulunduğu resim gösterilir. Flash filmini tam olarak
izleyebilmek için sayfayı tarayıcıda açmanız gerekir.
Dreamweaver CS3’e eklenen tüm nesnelerin
bölümünde bu nesneyle ilgili özellikler yeralır.
özelliklerinin
düzenlendiği properties
Name (isim) : Sayfada flash filminin adıdır.
W (width), H (Height) ; flash filminin genişlik ve yüksekliği belirlenir.
V Space : Flash filminin sayfa içerisindeki dikey konumunu belirler.
H Space : Filmin yatay konumunu belirler.
File (Dosya) : Filmin yüklendiği yolu (klasörü) gösterir. Burayı kullanarak sayfaya etkin
filmden farklı bir film ekleyebilirsiniz.
Quality : Kalite : filmin kalitesinden ödün vererek sayfa içerisinde daha hızlı çalışmasını
sağlayabilirsini.
Low : Düşük
High Yüksek
Auto Low : otomatik düşük
Auto High : otomatik yüksek
Scale (ölçeklendirme) : Flash player ile ilgili bir seçenektir. Filmler bir menü yardımı ile
yakınlaştırılıp uzaklaştırılabilir. Varsayılan değer olarak Default (show all- tümünü göster)
seçeneği seçili durumdadır. Böylelikle sayfa ilk açıldığında filmin tamamı gösterime hazırdır.
Align : sayfanın yatay eksende hizalanmasında kullanılır.
Bg : Film alanına ait zemin rengini belirtir. Eğer Flash filmi için şeffaf bir zemin kullanılmışsa,
filmin tabanında bu renk gösterilir. Tabanda şeffaf olmayan bir renk varsa tanımlanılan renk
filmin yüklenme esnasında gösterilecektir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 62
Auto Play : Tarayıcı ekranında bazı komutlarla film oynatılıp durdurulabilir. Sayfa açıldığında
filmin otomatik olarak başlamasını istiyorsak bu seçenek seçili olmalıdır. AutoPlay seçili
olmazsa tasarım aşamasında filmi oynatmak için çeşitli kodlar yazılmaldır.
Loop : Filmi sonsuz bir döngüye sokar. Yani film bittiğinde baştan tekrar oynatılır.
Play : bu özellik ile filmleri tarayıcıda oynatmadan önce Dreamweaver CS3 tasarımında
izleyebilirsiniz.
Reset Size : Web sayfasına eklenen filmin boyutları ile oynanmış ise bu boyutları orijinal
hale getirmek için kullanılır.
Parameters: Sayfada filmin başlaması için çeşitli parametrelerin yerine getirilmiş olması
istenirse bu parametreleri karşılayan kodların yazıldığı bölümdür. Bu özellik için bazı script
dillerine hakim olmak gerekir.
11.2. Flash Butonu Ekleme :
Flash butonlarının uzantısı SWF dir.
Kayıtlı bir sayfaya Insert /Common sekmesini kullanarak sayfaya bir buton ekleyin. Insert
Flash Button penceresinden buton ile ilgili özellikleri girin.
Button Text : Buton üzerinde görülecek isim.
Font / Size : Yazı tipi ve büyüklüğü
Link : butonun açması gerektiği sayfa belirtilir.
Target : Verilen linkte sayfanın yeni bir sayfadamı yoksa mevcut sayfanın kapanıp yerine link
verilen sayfanın açılması gerektiği belirlenir. Çerçeveli sayfalarda ise açılacak sayfanın hangi
çerçevede açılacağının belirlendiği bölümdür. Target bölümü hakkında daha fazla bilgi
edinmek için bağlantılar bölümünü inceleyiniz.
Bg Color : düğme zemininde gösterilecek renktir. Varsayılan olarak sayfanın rengidir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 63
Save as : Tasarladığınız düğme flash nesnesi olduğu için düğme site içerisinde swf uzantılı
bir flash dosyası olarak saklanır. Sienizde butonu hangi isimde saklamak istiyorsanız bu
alana yazınız. Bu alanı boş bırakırsanız Dreamweaver CS3 butonları otomatik olarak
isimlendirecektir.
Get More Style : Daha fazla buton için Adobe sayfasına yönlendirilmenizi sağlar.
Sayfa yüklendikten sonraki properties panelinde bulunan tüm özellikler Flash filmi nesnesinin
özellikleri ile aynıdır.
11.3. Flash Metni Ekleme :
Sayfaya sade görünümlü bağlantı yazıları eklemek için Flash metinlerini kullanabilirsiniz.
Kayıtlı bir sayfada Common sekmesinden Flash Text düğmesine tıklayın.
Insert Flash Text penceresi açılacaktır.
Flash text penceresinin özellikleri diğer flash nesnelerin özellikleri ile aynı yapıdadır.
Yazılarınızı bu özellikler doğrultusunda hazırlayabilirsiniz.
11.4. Flash Paper Ekleme :
Flash Paper, Adobe’nin tarayıcı üzerinden belgeleri sunmak için geliştirdiği bir formattır.
Vektörel içerikli ve kalitelidir. Uzantısı SWF dir.
İnsert / common panelinden FlashPaper düğmesine tıklandığında Insert FlashPaper
penceresi açılacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 64
Source (kaynak) kutucuğundan sitenizde bulunan swf uzantılı bir dosya seçin.
11.5. Flash Video Ekleme :
Sayfaya Flash video (FLV uzantılı video dosyası) eklemek için insert /common dan Flash
video düğmesine tıklayın.
Insert Flash Video penceresinden ;
Video tipi : Bu bölümde video tipini seçin.
URL : Filmi site klasöründen seçin
Skin : Filmin gösterimini sağlayacak player için bir görünüm seçin
Message : Filmin gösterimini sağlayacak Adobe Flash Player’ın yüklü olmadığı durumlar için
mesaj yazın.
Flash video’nun çalıştığını görebilmek için tarayıcı ekranında çalıştırmanız gerekir.
11.6. Shockwave Filmi Ekleme :
Shockwave, sıkıştırılmış bir özellik olduğu için web ortamında oldukça hızlıdır. Flash filmi
seçenekleri ile aynı özelliklere sahiptir. Shockwave SWF uzantılı flash dosyalarında çalışır.
İnsert /common sekmesinden kaydedilmiş bir sayfaya Shockwave filmi ekleyebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 65
12. FOTOĞRAF ALBÜMÜ OLUŞTURMA
Create Web Photo Album
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 66
12.1. Fotoğraf Albümü Oluşturma
Hazırladığınız sitede bir fotoğraf albümü oluşturabilirsiniz. Dreamweaver CS3 seçtiğiniz
fotoğrafları albüm haline getirecektir.
Dreamweaver CS3’de bir fotoğraf albümü oluşturmadan önce konu ile ilgili resimleri
hazırlayarak siteniz içerisinde bir klasörde toplamanızı öneririz. Birde albümün sayfalarının
ve diğer materyallerinin toplanacağı yeni bir klasör oluşturmalısınız.
Biz sitemizde albümde kullanacağımız resimlerin bulunduğu resimler/manzara ve albüm
sayfalarının ve diğer materyallerin toplanacağı resimler/photo isimli iki yeni klasör
oluşturduk.
Dreamweaver CS3 ile bir fotoğraf albümü oluşturmak için Commands (komutlar)
bölümünden Create Web Photo Album seçeneğini tıklayın. Açılan pencerede albüm için
gerekli olan bilgileri yazın.
Photo album title : Albüm başlığı
Subheading info : Alt başlık bilgisi
Other info : Albüm ile ilgili diğer bilgiler. Daha özel başlıklar kullanılabilir.
Source images folder : Site içerisinde resimlerin bulunduğu klasör. Browse (gözat)
düğmesini kullanarak resimlerinizin bulunduğu klasörü seçin. (resimler/manzara klasörü)
Destination folder : Albüm oluşturulduğunda seçtiğiniz resimlerin küçüklerinden oluşan bir
sayfa çıkacaktır. Bu küçük resimlere tıkladığınızda resmin büyük hali açılacaktır.
Bu küçük resimlerin her birine Thumbnail denir. Tüm bu materyallerin toplanacağı klasörü
seçin (resimler/photo). Yani albümün oluşturulacağı klasör.
Thumbnail size : Küçük resimlerin boyutlarının belirlenmesi
Columns : küçük resimler albüm sayfasında kaç kolon halinde sıralanmalı.
Thumbnail format : küçük resimler için bir format seçimidir. Seçeneklerden faydalanarak
istediğiniz kalite ve formatı seçebilirsiniz. Ya da varsayılan olanı (better quality /oldukça iyi)
kullanabilirsiniz.
Photo format : Kaynak klasör içindeki resimler, hedef klasöre kopyalanır (manzara’dan photo
klasörüne) bu kopyalama işlemi direkt bir kopyalama işlemi değildir. Standartlaştırma ve bazı
kalite formatlarından geçirilir. Seçtiğiniz format albüm içerisindeki resimlere ait format
olacaktır.
Show File Names : Albümde resimlerin altında dosya adlarının gösterilmesi.
Scala : ölçeklendirme normal değer %100 dür.
Create Navigation page for each photo : Fotoğraf albümünde yer alan küçük resimleri
tıkladığınızda orijinal resim yeni bir sayfada açılır. Bunun yanı sıra, resimlerin gösterildiği
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 67
sayfalara resimler arasında geçiş sağlamak için seyahat barları ekleyebilirsiniz. Böylelikle
resimler arası geçiş sağlayabilirsiniz.
Creat Web Photo Album penceresinde tüm açıklamaları yaptıktan sonra onaylayarak
pencereyi kapatın. index.html adında yeni bir
sayfa oluşacaktır. Bu sayfa küçük resimlerin
bulunduğu yani albümün ön yüzüdür.
Bu işlem sonunda hedef klasörde (photo)
index.html sayfası, küçük resimlerin toplandığı
Thumbnail klasörü, sayfaların bulunduğu
pages klasörü, büyük resimlerin bulunduğu images klasörü oluşacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 68
13. DİNAMİK NESNE OLUŞTURMA
(TimeLine Kullanımı)
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 69
Dreamweaver CS3’de Div Tag ve Draw Ap Div olarak
iki adet katman etiketi vardır. Div taglar sayfa üzerinde
istenilen yerde durmazlar. Div Ap Tag etiketleri ise
sayfada sabitlenir ve tablo yerine kullanılabilirler. Ancak
hiçbir zaman tablonun alternatifi olamazlar.
Dreamweaver CS3’de bir nesneye hareket
kazandırabilmek için
1. İlgili nesne Draw Ap Div içine alınmalı.
2. Dreamweaver CS3’ün TimeLine özelliği kullanılmalıdır.
Yeni bir sayfa açarak İnsert/layout panelinden Draw Ap
Div etiketini seçiniz. Sayfaya ekleyin.
Eklediğiniz Div etiketinin içine nesnenizi yerleştiriniz.
Windows menüsünden TimeLine seçeneğini
işaretleyerek sayfanın altına TimeLine panelinin
gelmesini sağlayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 70
Katman (Draw Ap Div) siçili iken sağ tıklayarak Add to TimeLine seçeneğini seçiniz. Bu
işlemler objeniz TimeLine çizgisine eklenmiştir.
TimeLine panelinde başlangıç ve bitiş karelerinin birer anahtar kare olduğuna dikkat edin.
TimeLine Panelinde bitiş karesini (15.kare) seçin.
Katmanı sayfa içerisinde başka bir konuma sürükleyin. Bu
işlem sırasında ilk konumdan son konuma doğru bir çizgi
oluşacaktır.
Belirtilen nesne konumlarına göre yapılan hareketin sayfa
açıldığında otomatik olarak çalışması için AutoPlay
seçeneğini işaretleyin.
Sayfa açık kaldığı sürece
tekrarlanmasını
istiyorsanız
işaretleyiniz.
hareketin sürekli olarak
Loop
seçeneğini
de
Playback düğmeleri
Oluşan hareketi, Dreamweaver CS3 doküman sayfasında
izlemek için, Playback düğmelerini kullanın. Bu düğmeler
yardımı ile hareketi, kare kare (adım adım) izleyebilirsiniz.
Fps alanına girdiğiniz sayı, kareler arasındaki geçiş hızını
belirtir Dreamweaver CS3’ önerdiği kare hızı 15 kare/sn dir. Kareler arası hızı azaltarak
hareketi yavaşlatabilirsiniz.
Dreamweaver CS3, bir kare dizisini kullanarak yalnızca bir nesnenin hareketini sağlar. Eğer
birden fazla nesneye aynı zaman dilimi içerisinde dinamik özellik kazandırmak istiyorsanız,
birden fazla kare dizini kullanmanız gerekir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 71
14. ŞABLON HAZIRLAMAK
Normal bir site oldukça fazla sayfadan oluşur. Sitenin içerik bölümü haricinde kalan bölümler
standart olmalıdır. Yani sitenin başlık kısmı (banner),
menü kısmı vb. her sayfada
çoğunlukla standarttır. Sitede bu standardı “Save as” yöntemiyle ya da copyala-yapıştır
mantığı ile yakalayabilirsiniz. Fakat standart bölümlerde yapacağınız değişikliklerde tüm
sayfaları tek tek açarak aynı değişikliği her sayfaya yapmanız gerekir. Bu da çok zahmetli ve
bir o kadarda yorucudur.
Bu bölüme kadar öğrendiklerimizden faydalanarak bir şablon sayfa oluşturabilirsiniz. Bu
şablondan çoğaltma yaparak tüm sayfalarımızda standardı yakalarız. Şablonda yaptığımız
bir değişiklik tüm sayfaları da etkileyeceğinden güncelleme problemi olmayacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 72
14.1. Make Template :
(Template Yapmak)
Make Template özelliği tek başına hiç bir anlam ifade etmez. Sadece template oluşturur. Bu
haliyle sayfaya alındığında sayfada hiçbir işlem yapılamaz. Önce bunu bir örnekle
inceleyelim.
Yeni bir sayfa açın. Aşağıdaki gibi tüm sitede standart olarak kullanmayı düşündüğümüz bir
sayfa oluşturun. Değişmesi gereken içerik kısmını boş bırakın. Sayfayı kaydedin.
İçerik alanı
Oluşturulan bu sayfayı şablon haline getirmek için;
File / Save as Template menüsünden ya da insert /
template object/Make Template menüsünden Save As
Template penceresini açın.
Bu pencerede:
Site : Template’nin hangi site içerisinde oluşturulacağını
ifade eder.
Existing templates : üzerinde çalıştığınız site içerisinde daha önceden kayıtlı template
dosyalarını gösterir.
Description : template için açıklama yapılması gerekiyorsa bu alana yazılır. Site içirisinde
birden fazla template kullanılacaksa bu açıklamalar faydalı olacaktır.
Save as : template dosyasının ismidir. Bu alana oluşturmak istediğiniz template’nin ismini
yazın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 73
Yukarıdaki bölümleri doldurduktan sonra Save düğmesi ile templatenin kaydını yapın.
Template dosyası site içerisine kaydedilirken Dreamweaver CS3 tarafından bir template
klasörü oluşturulur ve template dosyası dw uzantısı ile bu klasörün içinde saklanır.
Artık site içerisinde GenelSablon.dw isminde bir template dosyası mevcuttur. Oluşturulan
template dosyası hiçbir zaman html sayfası olarak kullanılamaz. Tarayıcıda yayınlanmaz.
Template dosyasını kullanabilmek için yeni bir sayfa açarak, yeni sayfaya template sayfası
dahil edilmelidir.
14.2. Sayfaya Template
Eklemek
Yeni bir sayfa açın ve kaydedin.
Modify / Templates / Apply Template to Page
menüsünü
kullanarak
Select
Template
Penceresini açın.
Select Template penceresinde;
Site : hangi site içerisinde çalışılacağı
Templates : Site içerisinde kayıtlı bulunan template dosyalarını
Update page when template changes : template dosyasının güncellenmesi (değişmesi)
halinde template dosyasına bağlı diğer dosyaların (html dosyalırının) değiştirilip
değiştirilmeyeceğini ifade eder.
Yaptığımız değişikliklerin otamatik olarak tüm sitede uygulanması için Update page when
template changes işaretli olmalıdır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 74
Templates bölümünden yatığımız template dosyasını seçerek select düğmesi ile yeni
sayfaya bir template yerleştirin. Bu işlemlerden sonra Dreamweaver CS3 sayfada işlem
yapmanıza izin vermeyecektir. Sebebi; template dosyasında içeriklerin değiştirilmesi için bir
bölüm oluşturmadık.
14.3. Editable Region
(Düzenlenebilir Alan)
Yukarıda oluşturulan template dosyası üzerinde her
sayfanın kendisine ait
olan düzenlemeleri
yapabilmek için template içerisine Editable Region
yerleştirmek gerekir. Template dosyası açık iken
(GenelSablon.dw) , Editable Region eklemek
istediğiniz yere (içerik alanına) imleci tıklayarak
Insert /Template Objects / Editable Region’u
seçin.
New Editable Region penceresi açılacaktır. Bu
pencerede bir isim yazarak Region’u kaydedin.
Editable
R i
Temlate sayfasında diğer sayfalarda kullanılması
için düzenlenebilir alan oluşturuldu. Bu alan küçük
görülse de içerisinde düzenleme yapıldıkça bir sayfa
boyutu kadar genişler.
Template Sayfasına düzenlenebilir alan ekledikten
sonra sayfayı kaydedin. Karşınıza Update
Templates Files penceresi çıkacaktır. Bu pencerede
template dosyasından (GenelSablon.dw) türetilmiş
(çoğaltılmış) sayfalar listelenir. Template de yapılan
bu değişikliklerin listelenen sayfalar üzerinde de
geçerli olup olmayacağını sorar. Bu şablondan
türeyen sayfaların bu değişiklikten etkilenmesi için
Update düğmesine basın.
Update Pages penceresinde Close diyerek çıkabilirsiniz. Show log alanını seçerseniz, işlem
yapılan dosyaları gösterecektir. Start diyerekte tüm dosyaları güncelleyebilirsiniz.
Bu şablondan türeyen sayfaların otomatik olarak değiştiği görülecektir. Bu yöntemi kullanarak
sitenizi standart hale getirebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 75
14.4. Optional Region
(Seçimli Alan)
Template dosyasında bulunan bazı bölümlerin
istemeyebilirsiniz. Bunu bir örnekte uygulayalım.
bazı
sayfalarınızda
görünmesini
Template sayfamızda (GenelSablon.dw)
işlemler bölümünün sayfada görünmesini
engelleyelim.
GenelSablon.dw dosyası açık iken imleci
sağ taraftaki işlemler menüsünün altına
getirin ve buraya Insert / Template Objects /
Optional Region ekleyin.
New Optional Region penceresinde isim
vererek (varsayılan ismi de kullanabilirsiniz)
onaylayın.
Optional
Region
İşlemler bölümünün altında Optional Region oluşacaktır. Sonra işlemler bölümünü Optional
Region içerisine taşıyın.
Optional
Region
İşlemler menüsünü Optional Region içerisine aldıktan sonra eski yerine taşıyın.
GenelSablon.dw template sayfasını kaydedin.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 76
Update Template Files
penceresinden
Update yapın. Bu pencerede yapılan
değişikliğin iletisim.html sayfasında yapılıp
yapılmayacağı sorulmakta.
Update Pages penceresini Close diyerek
kapatın.
İletisim.html sayfasını açın. Bu sayfada
halen bir değişiklik görülmemektedir.
Modify / Template Properties menüsünden
Template Properties penceresini açın. Bu
pencerede Name bölümünde, template
dosyasında
(GenelSablon.dw)
bulunan
Region (alan) nesneleri yer alır. Value
bölümünde ise bu nesnelerin sayfada
görünüp görünmeyeceği belirtilir. True
değerler
bu
nesnenin
sayfada
görüntülendiğini, false değeri ise nesnenin
sayfada görünmediğini ifade eder. Yani
iletisim.html sayfasında OptilonalRegion1
nesnesi görülmektedir. Pencere altında
bulunan
Show
OptionelRegion1
nesnesinin check işaretini kaldırın. Value
bölümündeki değer false olacaktır. Bu da iletisim.html sayfasında OptionalRegion1
nesnesinin sayfada görüntülenmeyeceği anlamındadır. Ok düğmesi ile pencereden çıkın.
Artık sayfanızda işlemler bölümü bulunmayacaktır. Optional Region özelliği ile sayfanızda
gizlemek istediğiniz bölümleri gizleyebilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 77
15. FORMLARLA ÇALIŞMAK
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 78
Formlar internet ortamında kullanıcıdan bilgi toplamak için kullanılan nesnelerdir.
Formlarla çalışmadan önce form Insert panelinde bulunan insert sekmesini inceleyelim.
Form Alanı ekle
Form Araçları
İleri Seviye
Form Araçları
Web sayfasında oluşturacağınız formu en ideal şekilde tasarlamak için form nesnelerini ve
özelliklerini iyi bilmek gerekir.
Yeni bir form eklemeden önce oluşturacağımız form sayfasını önceki bölümde öğrendiğimiz
template kullanarak oluşturalım.
Yeni bir sayfa açalım.
Açtığımız yeni sayfaya template dosyasını
uygulayın. Bu işlemi yaparken “Sayfaya
Template Eklemek” konusuna göz atabilirsiniz.
Modify / Templates / Appy Template to
page’den sitemizde bulunan template dosyasını
ekleyin.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 79
15.1. Sayfaya Form Alanı Ekleme
EditRegion bölümüne form alanı ekleyerek form oluşturmaya başlayın. Form alanı
eklemeden diğer form nesneleri eklenirse form alanı eklemeniz konusunda size bir mesaj
verilir. Dolayısıyla form nesnelerini kullanmak için önce form alanı oluşturmak gerekir.
Form panelinden form alanı ekleme düğmesinden sayfaya bir form ekleyin.
Eklenen forma ait özellikler sayfa altındaki properties panelinde yeralır.
Form name : Formun adıdır. Belli bir isim değeri içerir. Bu isim asp, php, js, vb, gibi
yazılımlarla kullanılabilir.
Action : Form bilgilerinin veri tabanına kaydedilmesi için asp, php, aspx gibi script dilleri ile
hazırlanmış bir sayfanın ismini içerir. Yani veritabanı bağlantısını sağlayacak dosyaya
yönlendirme işlemini gerçekleştirir.
Method : Genel olarak form verileri iki tür metot ile gönderilir.
POST : Sınırsız sayıda bilgi gönderilebilir.
GET : Bu metod ile sınırlı sayıda bilgi gönderilebilir. Bu yöntemde bilgilerin bazı
özellikleri tarayıcı penceresinin alt kısmında görünür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 80
15.2. Text Field
(Metin Alanı / Metin Kutusu)
•
Form panelinden TextField düğmesini (
ekleyin.
) kullanarak form alanına bir metin alanı
Karşınıza çıkan Input Tag Accessibility Attributes penceresinde;
ID : Text kutusunun adı. Metin kutusu içerisine yazılan bilgilinin veritabanına aktarılması için
bu isim kullanılır.
Form alanında oluşturulan nesnelerin her birinin ismi farklı olmalıdır.
Label : Metin kutusunun yanına yazılan isimdir. Metin kutusuna yazılması gereken bilginin
tanımıdır.
Wrap With Label Tag : Bu seçenek form nesnelerini bir not etiketi ile çerçeveler.
seçeneği kullandığınızda form nesnesi her zaman metin notunun yanında kalacaktır.
Bu
<label>Adı
<input type="text" name="txtad" id="txtad" />
</label>
Attach Label Tag Using ‘for’ attiribute
Bu seçenekle form nesnesini kendini açıklayan metinden ayırabilirsiniz. Bu metin alanı için
(metin kutusuna bağlı kalmaksızın) ayrı özellikler uygulayabilirsiniz. Böyle bir işleme
yerleşim düzenini ayarlamak amacı ile gerek duyulabilir.
<label for="txtad">Adı</label>
<input type="text" name="txtad" id="txtad" />
No Label Tag :
Bu seçeneği kullanırsanız XHTML de metin kutusu için label tag’ı oluşturulmaz.
Adı
<input type="text" name="txtad" id="txtad" />
Before From Item : Bu seçenek Form nesnesini açıklayan metnin formun solunda (formdan
önce) olacağını ifade eder.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 81
After From Item : Form nesnesini açıklayan metnin
formun sağında (formdan sonra) olacağını ifade
eder.
Access key : Bu seçenekte İlgili metin kutusuna
daha hızlı ulaşabilmek için klavyeden kısayol tuşu atanabilir.
Tab Index : Formu doldurmak isteyen kullanıcı klavyeden tab tuşunu kullanırsa tab tuşuna
her basıldığında sırası ile kutulara ulaşabilmeli.
•
Wrap With Label Tag seçeneğini kullanarak Access key ve tab index seçeneklerini
boş bırakarak tek satırdan oluşan bir metin alanı oluşturun.
Form alanına eklenen metin kutusunu seçtiğinizde properties panelinde metin kutusuna ait
özellikler yeralır. Bunlar ;
TextField : Metin kutusunun alanı (id)
Char Width : Metin kutusunun genişliğini karakter sayısına göre ayarlar. Kutunun kaç
karakter büyüklüğünde olacağını ifade eder.
Max Chars : Metin kutusu içerisine girilecek maksimum karakter sayısını ifade eder.
Type :
Single Line : Tek Satırdan oluşan bir metin kutusu
Multi Line
: Çok satırlı bir metin kutusu
Password : içerisine şifre yazılan metin kutusu özelliği taşır. Bu seçenek şaretli
iken tarayıcıda bu metin kutusu içerisine yazılan yazılar yıldız işareti
ile görünür.
Init val : (Initial Value-ilk değer) Sayfa tarayıcıda açıldığında metin kutusu içerisinde
görülecek ilk yazıdır. Varsayılan yazı olarak da tabir edilir.
Yandaki şekilden de anlaşılacağı üzere personele ait bilgilerin girilmesi için Adı, Soyadı ve
Sicilinden oluşan bir form oluşturduk. Formlarla ilgili konular ilerledikçe bu form yapısını da
geliştireceğiz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 82
15.3. List /Menu
(Liste/ Menü)
Seçenekleri bir liste halinde sunan tiptir. Bu seçeneğin önemli bir özelliği birden fazla
seçenek içerisinden birini listeden seçmenize yardımcı olur. Kullanıcılardan gelen bilgileri
standart hale getirmek için kullanılır. Bir örnek vermek gerekirse teşkilatımızda rütbeler için
kullanmak yerinde olacaktır.
Mevcut forma insert panelinden ListMenu ekleyin. Input Tag Accessibility Attribute
penceresini yukarıda anlatıldığı gibi doldurunuz.
Forma eklenen List/Menu seçili halde iken bu seçeneğe ait özellikler properties panelinde
belirir.
List/Menu : Nesnenin ismi (id)
List Values … : Bu düğme ile Listeye üye ekleyebilir, listeden üye silebilirsiniz.
Liste üyesi
ekle/sil
Liste üyelerini
sırala
Type : List/Menu form nesnesi iki tipte kullanılır.
1. Menu (Açılır Kutu) : İlk üye kutuda gösterilir. Diğer üyeler kutu açılınca
görülür.
2. Liste : Bu seçenekte ise List/Menu ye ait tüm üyeler liste halinde görülür. Bu
seçeneğin önemli bir özelliği, birden fazla seçeneğin listeden seçilmesini
sağlar. List seçeneği işaretlendiğinde Height özelliği ile selections özelliği aktif
hale gelecektir. Height Liste boyutunu gösterir. Selections özelliği üye sayısı
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 83
liste boyutunu aşar ise liste içerisinde gezinmenizi sağlayacak aşağı ve yukarı
düğmeler oluşturur.
Initially Selected (Seçili ilk değer) : Listede ya da menüde yer alan değerlerden birini seçili
olarak kabul eden seçenektir. Varsayılan değer de denilebilir.
15.4. Check Box
(Kontrol Kutusu)
Seçim yapmak koşulu ile veriler toplayan araçlardır. Bir formda birden fazla kontrol kutusu
işaretlenebilir. Bu şekilde çoklu tercihin yapılması sağlanır.
Mevcut formumuzda personelin aldığı kursları düzenlemek için check box kutularını
kullanabiliriz.
Insert panelinden Check Box ekleyin. Forma eklediğiniz check box nesnesine ait özellikleri
nesne seçili iken properties panelinden görebilirsiniz.
Checkbox name : Checkbox nesnesinin adı. Dreamweaver CS3 otomatik olarak bir isim
verir. Bu ismi silerek yeniden isimlendirme yapabilirsiniz. Checkbox nesnesine verilen isimler
yazılımcılar tarafından kullanılarak veritabanına gönderilir. Bu nedenle form nesnelerinin
isimleri önemlidir.
Checked Value : Buraya yazılacak olan değer direkt
veritabanına gönderilecektir.
Yazılımcılar tarafından kullanılan bazı Value değerleri ise; on/ off, True/False gibi değerlerdir.
Bunlardan başka değerlerde kullanılabilir.
Initial State (ilk durum): Sayfa tarayıcı tarafından açıldığında checkbox nesnesi varsayılan
olarak işaretlimi yoksa işaretsiz olarak mı geleceğini ifade eder. İki seçenek vardır. Checked
işaretli, Unchecked işaretsiz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 84
15.5. Radio Button
(Radyo Düğmesi)
Ziyaretçiye çeşitli seçenekler sunularak bu seçeneklerden yalnızca bir tanesini seçme şansı
veren nesnedir. Örneğin ziyaretçinin cinsiyetini öğrenmek için Radio Button nesnesi
kullanılır. Çünkü aynı anda sadece bir cinsiyet değerinin seçilmesi gerekir. Aksi halde form
anlamsız olur.
Dreamweaver CS3’de Radio Button ve Radio Group adlı iki form nesnesi vardır. Radio
Button nesnesini CheckBox olarak kullanabilirsiniz. Radio Group isimli form nesnesini
kullanarak tek seçimli gruplar oluşturabilirsiniz.
15.6. Radio Group
(Radyo Grupları)
Tek seçimlik veri nesneleri oluşturmak için kullanılır. Insert panelinden mevcut forma radio
group ekleyin.
Radio Group penceresinde;
Name : Radio Group nesnesinin adı
Radio buttons : üye ekleme ya da üye silme üyeler arasındaki sıralama işlemlerinin
gerçekleştirildiği bölüm.
Label : Sayfada görünen isim
Value : Veritabanına gönderilen değer
Line breaks : Radyo butonlarının satır satır yazılacağı.
Table : Radyo butonlarının bir tablo içine yerleştirileceğini ifade eder.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 85
15.7. File Field :
(Dosya Kutusu)
Ziyaretçinin dosya gönderme işlemini yapabildiği nesnedir. Sayfalarında Browse (Gözat)
düğmesi yardımı ile bilgisayardaki bir dosya seçilerek servera gönderilir.
Yine mevcut forma File Field ekleyin.
Yeni eklenen File Field alanı seçili iken bu nesneye ait özellikler properties penceresinde
görülecektir.
FileField name : Nesnenin adı
Char Width : Dosya konumunun belirtileceği metin kutusunun genişliğini belirler. Bu alana
girilen karakter sayısı kadar genişlik oluşur.
Max Chars : File Field nesnesi içerisine girilecek maksimum karakter sayısını belirtir.
Tanımlanan karakter sayısı geçildiğinde giriş yapılmaz. Sadece belirtilen miktardaki karakter
girdi olarak alınır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 86
15.8. Button :
(Düğme)
Formun en önemli nesnesidir. Form bilgilerinin veritabanına gönderilmesi için ya da form
bilgilerinin temizlenmesi için kullanılır.
Forma button eklendiğinde button nesnesi seçili iken properties panelinden buttona ait
özellikleri görebilirsiniz.
Button Name : nesnenin ismi
Value : Butonun üzerinde görülecek olan isim.
Action : Düğmenin gerçekleştireceği eylemi belirler.
Submit form : Form nesneleri üzerindeki bilgileri veritabanına ya da e-posta adresine
gönderir.
Reset Form : Tüm form elemanlarının içeriğini temizler varsayılan hale getirir.
None : Butonun form elemanları üzerinde etkisiz kalmasını sağlar.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 87
15.9. Jump Menu :
(Sıçrayan Menü)
Jump Menu nesnesi ile oluşturduğunuz liste seçeneklerinden faydalanarak belli bir URL
adresine yönlendirme yapabilirsiniz.
Üye Ekle /
Kaldır
Üye Sıralaması
Karşınıza çıkacak Insert Jump Menu penceresinde;
Menu Items : Üye Listesi
Text : ilgili URL için verilecek isim
When Selected go to URL : Bu bölümde menu items bölümünde seçilen URL bağlantısıdır.
Bilgisayarınızı sunucu olarak kullanıyorsanız ve bilgisayar içinden bir sayfaya link vermek
istiyorsanız Browse butonunu kullanınız.
Open URLs in : Açılacak olan URL’in (link bağlantısı) hangi pencerede açılacağını ifade
eder. Bu bölümde Main Windows varsayılanını kullanın.
Menu ID : Nesnenin adı
Option :
Insert go button after menu : Menünün sağına Go (git) düğmesi eklenir.
Firs item after URL Change : URL komutu değiştiğinde birinci menü üyesini seçili
duruma getirir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 88
15.10. Image Field:
(Görüntü Nesnesi)
Dreamweaver CS3 ün standartları dışına çıkarak kişisel image kullanmak isteyenler için
uygun bir alandır.
Dreamweaver CS3 ait gri butonların haricinde Image Field alanı ile yeni image (resim)
ekleyip bu nesneyi buton olarak kullanabilirsiniz. Ancak standart dışı oluşturulan bu butona
Dreamweaver CS3 otomatik olarak Submit ve Reset özelliği vermez. Jawa Script kodları
gibi dilleri kullanılarak bu düğmelere işlev kazandırılabilir. Bu nesneyi forma sadece resim
eklemek amacıylada kullanabilirsiniz.
15.11. Hidden Field:
Gizli Kutu
Kod yapısı olarak text field (metin kutusu) nesnesine benzer. Fakat form içerisinde
gösterilmeyen gizli bir alan oluşturur. Ziyaretçi farkına varmadan bazı bilgilerin veritabanına
kaydedilmesi için kullanılır.
Form içerisine gizli alan yerleştirdiğinizde gizli alanlar için kullanılan simgeyi (
properties bölümünden nesneye ait diğer özellikleri görebilirsiniz.
)seçerek
Gizli alanlar için kullanılan simge Design (dizayn) sayfasında görünmüyorsa
Edit/Preferences menüsünden Invisible Elements katogorisini seçerek Hidden Form Field
seçeneğini işaretleyin.
Hidden Field nesnesinin iki özelliği vardır.
HiddenField : Nesnenin adı
Vaue : Gizli alan içerisinde veritabanına gönderilecek olana bilgi
15.12. Spry Validation Text Field :
(Canlı Doğrulama Metin Kutusu)
Bu nesne ile ziyaretçilerin text kutularına belli bir tipte veri girmeleri sağlanır. Verinin
doğruluğu kontrol edilir ve belirtilen tipe uymayan bilgi kabul edilmez.
Spry Validation Text Field nesnesi forma eklendiğinde nesne başlığı seçili halde iken
properties penceresinde nesneye ait özellikler görülür.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 89
Spry Textfield : Nesnesin adı
Type : Text Kutusuna yazılacak olan bilginin tipi.
Required : (Gerekli) Kullanıcının bu alanı boş geçmemesi için kullanılır.
15.13. Spry Validation Text Area :
(Canlı Doğrulamalı Metin Alanı)
Form içerisine canlı metin alanı ekler. Kullanıcıların görüşlerinin alınacağı daha geniş bir alan
yaratılabilir. Bu alana girilecek bilgiler denetime tabi tutulabilir, belirli bir karakter sınırı
konabilir. Boş geçilmesi önlenebilir.
Tüm nesneleri kullanarak bir form oluşturulduğu kanısındayım. Aşağıda görüldüğü gibi form
alanı içinde bulunan form nesnelerini form içinde oluşturacağınız bir tablo ile tüm nesneleri
düzenleyebilir daha iyi bir sayfa tasarımı oluşturabilirsiniz.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 90
16. SWAM IMAGE
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 91
SWAP IMAGE
Resim Değiştirme
Özellikle bazı haber sitelerinde benzerlerini gördüğümüz resim değiştirme effecti
Dreamweaver CS3 ile de yapılabilmektedir. Yani herhangi bir resim ya da yazının üzerine
gelindiğinde yazının konusu ile ilgili resmin yan tarafta görünmesi Dreamweaver CS3 te
Swap Image effectidir.
Effectin tamamlanmış hali aşağıdaki resimde gösterilmiştir.
Görüldüğü gibi butonun üzerine gelindiğinde ilgili resim görünür ve mause butondan
ayrıldığında resim kaybolur.
Önce konu ile ilgili meteryallerin hazırlanması gerekmektedir. İlgili butonları photoshop
programı ile hazırlayabilirsiniz. Konu ile ilgili tüm metaryel, web klasörünüz içerisinde bir
klasörde toparlayınız.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 92
1. Dreamweaver CS3’te yeni bir sayfa açın ve kaydedin.
2. İki sutunlu bir tablo oluşturun ve border değerini 0 yapın.
3. Sol hücreye butonları sırası ile yerleştirin. Butonları yerleştirirken sol sutunun
butonların genişliği kadar olmasına dikkat edin.
4. Sağ taraftaki hücreyede sürekli görünmesini istediğiniz bir resim yerleştirin. Bu resim
boş beyaz bir resimde olabilir.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 93
5. En üsteki butonu seçin ve properties panelinin en solunda bulunan boşluğa bu
butonun ID adını yazın. Bu işlemi tüm butonlar için ve sağ hücreye yerleştirdiğiniz
resim için tekrarlayın. ID isimleri karışmaması için anlamlı isimler yazınız ve isimlerde
özel karakterler (?/_-, vb.) ile türkçe karakterler kullanmayınız. Bu örnekte butonların
üzerinde yazan metni ID ismi olarak kullandık. Bu durumda butonların ID ismi
muzik, video, bilgisayar, resimler, dunya oldu. “dunya”, sağ hücredeki resmin
ismidir. Farklı isimlendirmede yapılabilir.
6. ID isimlerini tamamladıktan sonra
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 94
7. En üsteki butonu(Müzik) seçin.
8. Dreamweaver CS3’ün sağ tarafında Behaviors Panelinin Add Behaviors
isimli düğmesine tıklayın. (Eğer ekranda Behaviors Paneli yok ise windows
penceresini kullanarak paneli ekrana getirebilirsiniz.)
9. Add Behavior düğmesinde açılan listeden Swap Image’yi seçin.
10. Karşınıza swap Image isimli pencere açılacaktır. Bu pencerenin Images bölümünde
resimler listelenmektedir. Set source to bölümünde ise bu resimlerin yerine
kullanılacak resimleri bulacağımız Browse yeralır. Preload images seçeneği
doküman yüklenirken resimlerin arka fonda yüklenmesini ve butonların üzerine
gidildiğinde yüklenmemiş resim olmamasını, dolayısı ile effectin hatasız çalışmasını
sağlayan bir seçenektir. Restore images onMouseOut seçeneği ise farenin resmin
üzerinden çekilmesi durumunda tekrar eski resmin yerine gelmesini belirtir. Her iki
seçeneğide işaretli olacaktır.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 95
11. Swap Image penceresinde Image “muzik” seçili halde iken Browse düğmesinden
müzik butonunun üzerine gelindiğinde yerine gelecek olan resmi seçin ve onaylayın.
12. Muzik butonunun üzerine gelince yan tarafta bu butona ait resmin görünmesi için
şimdide Image “dunya” yı seçin.
13. Browse düğmesini kullanarak Müzik butonuna basıldığında yan tarafta (dunya
resminin yerine gelecek resim) görünecek resmi seçin ve onaylayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
Adobe Dreamweaver CS3 | 96
14. Swap Image penceresinide “ok” düğmesini kullanarak kapatın.
15. Aşağıdaki resimde görüldüğü gibi Behavior panelinde muzik düğmesine ait iki olay
görünecektir.
Böylelikle birinci butonun (muzik) effectini tamamlamış olduk. Bu butona (muzik
butonu) effectin çalışıp çalışmadığını teyit edmek için sayfayı kaydederek Browserda
deneyiniz.
Kalan diğer butonlara da 8 ile 15 arasındaki maddeleri uygulayın.
Bilgi İşlem Dairesi Başkanlığı Eğitim Şube Müdürlüğü Yayınları
