Dreamweaver

ADOBE DREAMWEAVER CS3
AdobeDreamweaverCS3|I
NDEKLER
ADOBE DREAMWEAVER CS3 .............................................................................................. 1
NDEKLER............................................................................................................................ I
DREAMWEAVER CS3E GR ............................................................................................. 1
1. ALIMA ALANI VE PANELLER ................................................................................. 2
1.1. alma Alann Dzenlemek ...................................................................................... 3
1.2. Karlama Ekran ......................................................................................................... 3
1.3. Insert Ara ubuunu Kullanmak ............................................................................... 4
1.4. Properties Paneli .......................................................................................................... 5
1.5. alma Penceresi Ara ubuunu Kullanmak........................................................... 5
1.6. alma Penceresinin zellikleri................................................................................. 6
1.7. Panelleri Kullanmak .................................................................................................... 7
1.8. Kiisel alma Alan Oluturmak .............................................................................. 7
2. WEB STES YNETM .................................................................................................. 9
2.1. Yeni Bir Site Oluturmak .......................................................................................... 10
2.2. Siteye Yeni Bir Klasr Eklemek ............................................................................... 12
2.3. Siteye Yeni Bir Sayfa Eklemek ................................................................................. 12
2.4. Sayfaya Trke Dil Tanmlamas .............................................................................. 14
2.5. Yeni Alan Sayfann Kaydedilmesi ......................................................................... 14
2.6. Sayfa zellikleri ........................................................................................................ 15
2.7. Resim Eklemek .......................................................................................................... 16
2.8. Image Placeholder ..................................................................................................... 18
2.9. Metinlerle almak ................................................................................................. 20
2.10. Linkler (Balantlar) .............................................................................................. 20
3. TABLOLARLA ALIMAK .......................................................................................... 28
3.1. Tablo Eklemek ........................................................................................................... 29
3.2. Tablo zellikleri ........................................................................................................ 30
3.3. Tablo Hcrelerinin Blnmesi : ................................................................................ 31
3.4. Tabloya Satr Ekleme: ............................................................................................... 31
3.5. Tabloya Stun Ekleme : ............................................................................................ 32
3.6. Satrlarn, Stunlarn ya da Tablonun Silinmesi ........................................................ 33
4. DREAMWEAVER CS3DE CSS KULLANIMI ............................................................. 34
4.1. CSS nedir? ................................................................................................................. 35
4.2. CSS Trleri (Stil ablonlar) ..................................................................................... 35
4.3. Dreamweaver CS3de CSS Yapma ........................................................................... 37
4.4. rnek Stil Dosyalarn Kullanma .............................................................................. 39
5. CANLI MEN EKLEME ................................................................................................ 40
6. ROLLOVER IMAGE ....................................................................................................... 43
7. NAVGATON BAR ........................................................................................................ 46
8. (CANLI) SEKMEL PANEL ........................................................................................... 51
9. AKORDON PANEL ...................................................................................................... 54
10. CANLI KATLANABLR 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
BilgilemDairesiBakanlEitimubeMdrlYaynlar
AdobeDreamweaverCS3|II
12. FOTORAF ALBM OLUTURMA...................................................................... 65
12.1. Fotoraf Albm Oluturma .................................................................................. 66
13. DNAMK NESNE OLUTURMA ............................................................................. 68
14. ABLON HAZIRLAMAK ........................................................................................... 71
14.1. Make Template : .................................................................................................... 72
14.2. Sayfaya Template Eklemek ................................................................................... 73
14.3. Editable Region ...................................................................................................... 74
(Dzenlenebilir Alan) ........................................................................................................... 74
14.4. Optional Region ..................................................................................................... 75
(Seimli Alan) ...................................................................................................................... 75
15. FORMLARLA ALIMAK ........................................................................................ 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
AdobeDreamweaverCS3|1
DREAMWEAVER CS3E GR
HEDEFLER
Kursiyer eitim sreci sonunda;
Dreamweaver CS3te web klasr tanmlamas yapabilmeli, web aralarn
kullanabilmeli, Style ablonlar (css) ve sayfa ablonlar (template) hazrlayarak web
sayfalarn biimlendirebilmelidir. Kursiyer web sitesi yapma mantn kavramal ve
eitim sreci sonunda kendisine ait bir web sitesi hazrlamaldr.
DAVRANILAR
Web sitesinde kullanlan nesnelerin (resim, dme, vb.) tek bir klasr ierisinde
arivlenmesi ve bu arivleme ileminin Adobe Dreamweaver CS3 tarafndan
otomatik olarak yaplabilmesi iin web klasr tanmlamas yaplmaldr. Web klasr
tanmlamas tasarmcya site yapm srecinde kolaylk salayacaktr.
Web sayfalarnda sklkla kullanlan ve web tasarmnn vazgeilmez aralar; tablo,
menu, linkleri vb. sayfa iinde en iyi ekilde kullanabilmek sayfann grselliini
arttracaktr.
Site tasarmnda her sayfann tek tek tasarlanmas ve biimlendirilmesi yerine style
ve sayfa ablonlarn kullanmak sayfalarn standart hale getirilmesinde ve sitenin
gncellenmesinde etkinlik salayacaktr.
renme sreci sonunda bir web sitesi hazrlamak nihai hedef olmaldr.
ARA GERELER
letim sistemi zerinde Adobe Dreamweaver CS3 altran bir bilgisayar.
Bilgisayarn internete bal olmas renme srecinde ok ynl aratrma yapmanz
salayacaktr.
RENME RETME STRATEJLER
Baarl bir eitim sreci yaamak ve istenilen hedeflere ulamak iin kursiyerin kursa
devamll esastr.
Kurs sresince dzenli not tutulmal, anlatlanlar Adobe Dreamweaver CS3 program
zerinde uygulanmaldr.
Kursiyer problem yaad anlarda eitici ile paylamal
1. ALIMA ALANI VE PANELLER
1.1. alma Alann Dzenlemek
Dreamweaverda aralarn grnmn ve aralarn yerleimini iki ekilde

dzenleyebilirsiniz. Bunlar coder ve designer dzenleridir. Coder kaynak kod grntleme
dzenini, desicner ise grsel grntleme grnmn ifade eder.
Windows / workspace layout mens iinde

yer alan alma dzenlerinden birini
seebilirsiniz.
1.2. Karlama Ekran

Dreamweaver ilk kez balatldnda karlama ekran kacaktr. Karlama ekran bir ok
ilemi kolaylatracaktr.
Open a Recent Item blmnde son kullanlan
dosyalar listelenir. Bu listenin iindeki open
klasrn
kullanarak
bilgisayardaki
dier
dosyalara da eriilir. Ayn ilem File / File Open
mensnden de yaplabilir.
Create new blmn kullanarak hangi uzantya
ait dosya oluturmak istenilirse buradan seilebilir.
Daha farkl dillerde dosya oluturulmak istenirse
more dmesini tklayarak istenilen dosya
seilebilir. Dreamweaver Site dmesi tklanarak
Dreamweaverda yine bir Site alabilir. Ayn
seeneklere File / New mensnden de ulalr.
Create from Samples blmnde ise Dreamweaver ierisinde bulunan rnek tasarmlardan
faydalanarak sayfa alabilir.
Karlama ekran tekrar grlmek istenmez ise, karlama ekrannn sol alt ksmnda bulunan
Dont show again check iaretlenir.
1.3. Insert Ara ubuunu Kullanmak

nsert ara ubuu alma sayfasnn st blmnde bulunur. Sayfann tasarm elerini
eklemek iin gerekli ksayollar barndrr.
Varsaylan
olarak
sekmeler
halinde
grntlenir. Menu halinde grntlemek iin
zerinde sa tklanarak show as menu
seenei seilir. Artk sol tarafta menu
halinde grnecektir.
menu halinde iken en altta bulunan show as

Tabs seenei ile tekrar sekme grnmne
getirilir.
nsert ara ubuu bir web sayfasna eklenecek tm bileenleri ierir. Favorites sekmesine
sk kullandnz bileenleri aktararak kullanm kolayl salayabilirsiniz. Favorite sekmesi
varsaylan olarak hibir ksayol iermez.
Bu sekmeyi dzenlemek iin Favorites sekmesine
tkladktan sonra Right-click to customize your
favorite object yazsnn stnde sa tklayarak
Customize Favorites balantsna tklayn.
Alan Customize Favorite Objects penceresinde

Available Objects blmnden eklenmek istenen
nesneler seilerek Favorite Objects blmne
aktarlr. Favorite Object blmne eklenen
nesneler arasna kullanm amalarna gre Add
Sparator eklenebilir, sras deitirilebilir.
Bu
pencere onaylanarak kapatlr.
Artk sk kullanlan nesneler Favorites sekmesinde

grnr.
1.4. Properties Paneli

Tasarm aamasnda en ok kullanlan panellerden biridir. Varsaylan olarak bu panelde
sayfann zellikleri gsterilse de, Properties panelinin ierii o an yaplmakta olan ileme
veya seili olan nesneye gre deiir. rnein sayfaya bir tablo eklenirse properties paneli
sayfa zelliklerinin stnde tablonun zelliklerini gsterir ve bu zelliklerin deitirilmesini
salar. Yine sayfaya metin eklenirse bu seferde properties penceresi metin zelliklerini
barndrr ve deitirilmesini salar.
Page Properties dmesini kullanarak sayfann zellikleri deitirilir. Panelin altta bulunan
blm sa alt kede bulunan ok iaretinden kapatlr.
Paneli tamamen kapatmak iin panelin sa st kesinde bulunan dmeden Close panel
group seenei kullanlr. Buradan kapatlan panel, Windows / properties mensden
alr.
1.5. alma Penceresi Ara ubuunu Kullanmak
alma penceresi ara ubuunda bulunan Design dmesi alma alannn grsel olarak
grnmesini salar. Code blm design blmnde grsel olarak yaplan ilemlerin XHTML
grntsdr. Split blm ise, ekranda hem design hemde code blmnn grnmesini
salar.
XHTML (html-htm) bilen kullanclar design blmnde yaplan deiiklikleri code
blmnden de yapabilir. Ancak code blmnde yaplan deiiklikler annda Design
ekranna yansmayacaktr. Bunun iin
Reresh dmesine baslarak code blmnde
yaplan deiiklikler design blmne de yansyacaktr.
Title blm zerinde almakta olduunuz sayfann taraycda gsterilecek pencere ismidir.
Previev dmesi sayfann bilgisayarnzda ykl bulunan browserlarda nasl grndn
test etmenizi salar.
View Option sayfann Code, Design ve Split grnmne gre ierii deiir. Core, Design
ve Split pencerelerinin ieriine gre View Option dmesi farkllklar gsterir. rnein
Design ve Split pencerelerinin ortak zellikleri olan Rules (cetvel) ve Grid (zgara, klavuz
izgileri) Code penceresinin zellii deildir. nk Code penceresinde cetvel ve klavuz
izgileri bulunmaz. Design, Code ve Split grnmlerinde istenmeyen zellikler View Option
dmesinden kaldrlabilir.
Sadece tasarm srasnda grnen nesnelerin zelliklerini kullanmak iin kullanlr. rnein
Table Borders kaldrlrsa sayfada kullanlan tablolarn ereveleri gizlenecektir.
Check up dmesi ile sayfann tarayc uyumluluu denetlenir.
1.6. alma Penceresinin zellikleri
Dreamweaverda alma sayfasnn ismi sayfann hemen st tarafnda yer alr. Yeni alan
sayfalar ilk sayfadan itibaren sola doru (kullancya gre saa) kayar.
alma sayfasnn sol alt blmnde sayfann baz blmlerine hzl ulaabilmek iin ksa
yol dmeleri bulunur. rnein sayfaya bir tablo eklendiinde sol alt tarafta yer alan table
dmesi yardm ile tablo nesnesi daha hzl seilir.
alma sayasnn sa alt kesinde bulunan Select Tool varsaylan olarak seili haldedir.
Hand Tool arac sayfa iinde kaydrma ubuklarn kullanmadan rahatlkla gezinebilmenizi
salar.
Zoom Tool ise sayfanzda titiz alma yapmanz gereken yerleri byterek daha rahat bir
alma imkan yaratr. Alt tuu ile kullanldnda alma alann kltecektir.
Set magnification arac ile istenilen bytme orann seebilirsiniz. burada bulunan
Fit Width zelliini kullanarak sayfa boyutunu ve geniliini ekrana sacak eklide
bytebilirsiniz.
Fit all zellii yaknlatrma ilemini sayfa genilii ve yksekliine gre yapar.
Width Selection sadece seilen alan ekrana sacak ekilde bytr.
Web tasarmnda ok nemli bir nokta pencere boyutudur. Sayfa her taraycda farkl
pencere boyutlarnda grnecektir. Bunun nne gemek iin ala sayfasnn sa alt
blmnde zoom arac yanndaki Window Size dmesini kullanabilirsiniz.
1.7. Panelleri Kullanmak

Dreamweaver aldnda paneller otomatik olarak
alr ve Designer ekrannda sa tarafta bulunurlar.
Btn paneller farkl ierik ve seenekler ierirler.
Panel isimlerinin solunda bulunan gen ekline
tklanarak panelleri aabilir ayn yere tklayarak
ieriini gizleyebilirsiniz. Files Paneli varsaylan
olarak ak ekilde grlmektedir.
Baz panellerin iinde bu panele bal farkl
sekmeler yer almaktadr. Panelleri ekrann
sandan karmak ve ekranda isteiniz yere
tamak iin panel balnn en solundaki
srkleme dmesini basl tutarak ekranda
istediiniz yere taynz.
Ekranda farkl yerlere tadnz panelleri eski
haline getirebilmek iin Windows / workspace
Layout / Designer mensn izleyiniz.
alma alann daha fazla geniletmek ve paneleri kaldrmak iin F4 tuuna basnz. Tm
panellerin ekrandan temizlendi grlecektir. Panelleri geri getirmek iin tekrar F4 tuuna
basnz.
1.8. Kiisel alma Alan Oluturmak

alma alann her seferinde kendinize gre yeniden dzenlemek yerine yaptnz
dzenlemeyi kaydederek kiisel alma alannz oluturmak size kolaylk salayacaktr.
Bunun iin ekrann sanda bulunan Files

panelini srkleyerek ekrann soluna
alnz.
Windows / workspace Layout
Save Current mensn seiniz.
Alan
Save
Workspace
Layout
penceresine kiisel alma alannzn
ismini yazn. Pencereden kn.
Kiisel alma Alannz verdiiniz isimle kaydedilecek ve Windows /Workspace Layout

mensnde grnecektir. Her seferinde yeniden dzenleme yapmaktansa bu meny
kullanarak zaman kazanabilirsiniz.
Kiisel alma alannz silmek ya da ismini
deitirmek iin Windows / Workspace
Layout / Manage mensnden alan Save
Workspace Layout penceresini kullannz.
2. WEB STES YNETM
2.1. Yeni Bir Site Oluturmak

Bir site oluturmak ve tasarlamak iin ilk aama site iin kullanlacak dosya, resim, video, vb.
nesnelerin depolanaca bir klasr oluturulmal ve bu klasr Dreamweavera site sayfas
olarak tantlmas gerekir.
ncelikle siteye ait tm nesnelerin depolanaca
bir klasr oluturalm. Yandaki resimde de
grld gibi D srcs ierisine ilk_sitem isimli
bir klasr oluturulmutur.
Karlama ekrannn Create New blmnden

Dreamweaver Site dmesine tklanr.
Alan Site Definition for Unnamedisimli

pencerede Basic ve Advanted isimli iki sekme yer
alr. Basic sekmesinde sihirbaz yardm ile bu
ilemi adm adm yapabilirsiniz. Advanted
sekmesinde ise daha fazla seenek mevcuttur.
Advanted sekmesini tklayarak bu sekmenin
ieriine geiniz.
Bu sekmenin sol tarafnda sitemizin hangi kategoriye ait olduu sorulmaktadr. Siteniz
bilgisayarda local olarak alacandan varsaylan olarak local info bilgisi yer alacaktr.
Buray deitirmeden Local nfo bilgilerini giriniz.
Site name blmne sitenin adn giriniz. Bu ad sitenizin klasr ismi deildir. Sitenize sanal
ortamda verilen genel bir isimdir. Site adn Benim_Sitem olarak yazdk.
Local root folder blmnde ise Benim_Sitem isimli

sitenin klasrnn girilmesi istenmektedir.
B
blmn sonundaki klasr yardm ile biraz nce
atmz ilk_sitem isimli klasr seilir.
Default images folder blmnde ilk_sitem klasr

ierisinde bir resim klasrnn belirlenmesi
istenmektedir. Yani ilk_sitem klasr haricinde
bilgisayarn baka blmlerinden sitede resim
kullanlmas halinde Dreamweaver bu resmin bir
kopyasn alarak burada belirlenecek olan klasrn
ierisine atacaktr. Bu blmnde sonunda bulunan
klasr yardm ile ilk_sitem isimli klasrn ierisine
resimler klasr aarak varsaylan resim klasr
olarak belirlenir.
Site klasrn ve bu klasr ierisinde yer alacak varsaylan resim klasrn belirledikten
sonra Ok tuuna basarak Site defination penceresi kapatlr.
Bylelikle oluturacamz sitenin zeliklerini yazacak olursak.
Site ismi
Sitenin bulunduu klasr
Varsaylan Resim Klasr
: Benim Sitem
: ilk_sitem
: resimler
Yukardaki zellikleri yazl sitemiz Files Paneli iinde grnecektir.

2.2. Siteye Yeni Bir Klasr Eklemek

Yeni bir klasr amak ;
Sitedeki tm dosyalar ilk_sitem klasr ierisinde yer almakta ve
bu klasrn ierii Files Palelinde grntlenmektedir. Files
panelinden bu klasr ierisini yeni bir klasr amak iin Files
paneli zerinde sa tklanarak alan listeden New folder seilir.
Klasr ismi varsaylan olarak untitled ismi verilecektir. Untitled
yerine yeni bir isim (video) belirlenerek web klasr ierisine yeni
bir klasr alm olur.
Bu ekranda eer resimler klasrnn ierisine yeni bir klasr
amak isteniyorsa bu ilem resimler klasr seili iken
yaplmaldr.
2.3. Siteye Yeni Bir Sayfa Eklemek

Dreamweaverda yeni bir sayfa amann birka yolu vardr.
2.3.1
Files paneli zerinde sa tklanr ve alan

listeden New Files seilir. Yeni alan dosyann
ismi varsaylan olarak untitled olarak gelecektir.
Bunun yerine de yeni sayfann ismi yazlarak
yeni bir dosya alm ve kaydedilmi olur.
Files dosyas zerinde sayfay amak istediiniz klasr seili deil ise New Folder ve New
File sekmesi pasif olarak grnecektir.
2.3.2
Karlama ekrannn Create New sekmesinde

hangi tr sayfa almak isteniyorsa seilir. Ancak
burada alan sayfa henz kaydedilmedii iin
Files Panelinde grnmeyecektir.
2.3.3
File / new mensnden alacak olan New document penceresinde Blank

Page sekmesinden istenilen trde sayfa seilerek alr.
Yeni alan bir sayfann varsaylan ayarlarn deitirmek iin yukardaki ekranda (New
Document penceresi) Preferences dmesine tklanr. Alan pencerede Category
blmnde varsaylan olarak gelen new document sekmesinde Default document kutusuna
ilk alan sayfalarn varsaylan olarak hangi trde (php, aspx, jsp vb.) almas isteniyorsa
buradan seilebilir. Sayfa ilk aldnda istenilen trde alm olacaktr.
2.3.4
Yeni sayfa amann bir baka yntemi ise; Standart ara ubuunda
bulunan yeni sayfa ama dmesi kullanlarak ta yeni bir sayfa alabilir.
Buradan alan sayfalar yukarda yaplan varsaylan ayarlarnz
dorultusunda alacaktr.
2.4. Sayfaya Trke Dil Tanmlamas

Dreamweavern nceki srmlerinde Trke karakter sknts yaanmakta idi. Bu sorunu
aabilmek iin ek bir dil paketi tanmlanmas gerekiyordu. Dreamweaver CS3 ile sayfann dil
ayarlamas yaplabilmektedir.
Sayfann Page Properties penceresinde Title/Encoding kategorisini sein ve Encoding
blmnde Trke dil desteini seiniz.
2.5. Yeni Alan Sayfann Kaydedilmesi

Yeni alan sayfa File / Save mensnden kaydedilir. Tm programlarda olduu gibi
Dreamweaverda da Save ksayol dmesi
bulunmaktadr. Ancak Dreamweaver ilk
aldnda Standart ara ubuu ak olmad iin nce standart ara ubuu almaldr.
nsert panelinde bo bir yere sa tklayarak

Dreamweavern
ara
ubuklarn
grebilirsiniz. Buradan standart ara
ubuunun sol tarafna check atarak
ekranda grnmesi salanr.
Standart ara ubuunda sadece kaydet dmesi deil bunun yannda ileri, geri, yeni sayfa
ama, a, ak sayfalarn hepsini kaydet dmeleri yeralmaktadr.
Eer sayfanz daha nce kaydedilmemi ise sayfanza isim vermeniz gerekir. Dreamweaver
kaytl olmayan sayfa iin sizden bir konum belirlemenizi ve sayfanza bir isim vermenizi
isteyecektir. Alan Save As penceresinde File Name (Dosya ad) blmnde varsaylan
olarak untitle yazacaktr. Untitle yerine sayfann ismi yazlr. Konum olarak ise site klasr
Dreamweavera tantld iin varsaylan olarak site klasrnn ismi (ilk_sitem) konum
kutucuunda yer alacaktr. Konum kutucuu farkl klasrlerde ise Save As penceresinin sol
alt tarafnda bulunan Site Root dmesine tklanr ve site klasrnn (ilk_sitem) ieriinin
grnmesi salanr ve kayt ilemi yaplr.
2.6. Sayfa zellikleri

Bir web sayfasnn zelliklerine sayfa zerinde sa tklayarak Page Properties
seeneinden ya da sayfa altnda bulunan Properties Panelinin altndaki Page Properties
dmesinden ulalr.
Bu pencere yardm ile sayfa zemin rengini deitirebilir, sayfa boluklarn

dzenleyebilir, sayfa arkasna resim yerletirilebilir.
Sayfa Yaz Tipinin
belirlenmesi
Yaz renginin belirlenmesi
Sayfa renginin belirlenmesi
Sayfaya arkaplan resmi belirlenmesi

Title/Encoding sekmesinin Encoding alanndan Trke seeneini iaretleyerek
Sayfann dilini Trke yapabilirsiniz.
2.7. Resim Eklemek

Web sayfalar resimleri iinde barndran deil resimleri
grntleyen dosyalardr. Bu nedenle sayfaya eklenecek
olan resmin site klasrnde bulunmas gerekir. Site
klasrnn ierisinde kullanlan tm resimleri barndran
bir klasr tanmlamak dosyalarn
daha dzenli
ynetilmesini salayacaktr.
Eklenecek olan resim tanml resim klasrnn iinde ise
Files Panelinde grnecektir. Biz bu web sitesini
yaplandrrken
Site
Definition
For
penceresinde Default mage Folder blmnde

Resimler isimli klasr varsaylan klasr olarak belirledik.
Eer resimlerinizi barndracak tanml bir klasrnz
yoksa;
sitenizin
ayarlarn
yeniden
yaplandrabileceiniz
Site
Definition
for
penceresini yeniden kullanmalsnz. site klasrnzn
(ilk_sitem) iine yeni bir klasr (resimler) atktan sonra
Files panelinin en st ksmnda sitenizin isminin yazd
kutucuu anz.
Alan listenin en altnda Manege Site esine
tklaynz.
Manege Sites penceresinde sol tarafta Dreamweaverda

tanml sitelerin listesi kacaktr. zerinde allan site
(Benim_Sitem) seili iken Edit dmesine tklayn.
Site defination for Benim_Sitem isimli pencerenin Default images folder kutucuunun
sandaki klasr resmine tklayarak resimlerinizi barndrmak iin site (ilk_sitem klasr)
ierisine am olduunuz yeni klasr (resimler klasrn) seiniz. Onaylayarak
pencereden knz.
Artk sitede kullanlacak resimlerin barnaca bir resim klasr mevcuttur. Byle bir klasr
yaps olmadan da resimlerinizi site ierisinde herhangi bir yerde de barndrabilirsiniz. Fakat
site dndan herhangi bir klasrden sayfanza direct olarak resim eklendiinde eitli
sorunlarla karlaabilirsiniz.
Tanml resim klasrnzn varl halinde ise; site dndan baka klasrlerden sayfanza
direct olarak bir resim eklenirse Dreamweaver bu resmin bir kopyasn tanml resimler
klasrne alacaktr. Resmi tanml klasr zerinden sayfanzda gsterecektir.
Dreamweaverda resim eklemenin farkl yntemleri vardr.
Tanml
resim
klasrnn
ierisinde bulunan resimler Files
Panelinde
grnmektedir.
Sayfaya eklenmek istenen resim
dosyas srklenerek sayfada
gsterilmek
istenen
blme
braklr. mage Tag Accessbility
Atributes
iletiim
penceresi
alacaktr.
Bu
pencerede
herhangi bir nedenle resim grntlenmedii taktirde yerine grntlenecek olan
yaznn Alternate text blmne girilmesi istenmektedir. Long description blmne
ise resmin yolunun yada daha fazla bilginin girilmesi istenmektedir. Bu blmn
doldurulmas ise art deildir. Ancak Alternate text blmnn doldurulmas nerilir.
nsert panelinin command sekmesinde mages/image

dmesine tklanr. Alan pencereden tanml resim
klasr (resimler) alr ve ierisinden ilgili resim dosyas
seilerek onaylanr.
Files Panelinin ierisinde bulunan Assets sekmesine

tklanr bu ksmda tanml resim klasrnn ierisinde
bulunan tm resimler mevcuttur. Seilen resmin n
izlemesi grlecektir. lgili resim seilir ve srkleme
yntemi ile sayfann ilgili yerine tanr.
2.8. Image Placeholder

Sayfada kullanlacak olan resmin yerine rezerve etmek iin
kullanlr. Sayfaya eklemek istediiniz resim dosyas
materyalleriniz
arasnda
bulunmamaktadr.
Sayfay
dzenlerken ilgili resmin yerini rezerve ederek sayfanzn
tasarm tamamlanr. lgili resim tedarik edildikten sonra
rezerve edildii yere eklenir.
Sayfann belirlenen yerine imle yerletirilir.

nsert panelinden images / Image Placeholder seilir.
Alan Image Placeholder penceresinde rezerve
yaplacak olan yerin boyutlar ve alternatif yaznn
girilmesi istenir. Bu bilgileri girilerek onaylanr.
Sayfanzn belirtilen blmnde artk resminize yer

ayrlmtr.
lgili resmi tedarik edip tanml resim klasr ierisine

eklendiinde bu resmi rezerve edilen blm eklemek
iin. nce ilgili rezerve resim (Image Placeholder)
seilir/tklanr.
Web sayfas altnda bulunan properties panelinin Src kutucununun sanda bulunan
Point to File dmesini (dosya iaretleyici) srkleyerek Files panelindeki ilgli resmin
zerine braklr.
Rezerve edilen yere ilgili resim yerlemi olacaktr.
2.9. Metinlerle almak

Alan bo bir sayfada imle yanp snmeye balayacaktr. Buraya dorudan metin
eklenebilir. Sayfaya resim eklenir ve sonra metin yazlmak istenir ise, nce resim iaretlenir
ve sonra klavyeden sa ok tuuna baslarak imlecin metnin yan tarafna dmesi salanr.
Sonra yazm ilemine devam edilir. Dreamweaver CS3 te yaz yazlrken satr sonuna
gelindiinde otomatik olarak yaz bir alt satrdan devam edecektir. Enter tuuna baslarak bir
alt satra geilmek istendiinde steki satr ile yeni alan satr arasnda iki satrlk bir boluk
oluacaktr. Her ne kadar iki paragraf aral olarak grnse de baz durumlarda bu zelliin
kullanlmas istenmez. Enter tuuna basldnda oluan fazla boluu nlemek iin Shift
tuuna basl tutularak Enter tuuna baslr. mlecin hi aralk vermeden bir alt satra getii
grlecektir.
mle metin zerinde oluu mddete properties panelinde metin zellikleri grnecektir. Bir
paragraf ya da satr sola, saa ve ikiyana yaslamak iin o paragrafn veya satrn tamamnn
seili olmas gerekmez. mlecin dzenlenmek istenen satrn veya paragrafn ierisinde
bulunmas yeterlidir.
Properties panelinden faydalanarak metinleri dzenleyebilirsiniz.
2.10. Linkler (Balantlar)

Linkler, web sayfalar arasndaki balantnn kurulmasn salayan ksa kodlardr. Bir web
sitesinde 6 eit balant yaplr.
1. Site ii balantlar : Ayn site iindeki sayfalarn birbirine balanmasdr.
2. Site d balantlar : Dier sitelere yaplan balantlardr.
3. E_Posta adresine yaplan balantlar.
4. Sayfa ii balantlar. (apa balantlar)
5. Dosya Balantlar
6. Map Balantlar
Birde balantlarn Target zellii vardr. Yani link verilen sayfann (almas istenen
sayfann) nasl alacan dzenleyen kodlardr.
2.10.1. Site ii Balantlar
Site ierisindeki sayfalarn birbirlerine balanmas iin kullanlan balant trdr.
Sitemizde arabalar.html ve cicekler.html isimli iki sayfamz vardr. Bunlardan arabalar.html
sayfasn anz sayfa ierisine iekler metnini giriniz ve bu metni sein. nsert panelinde
command sekmesinde Hyperlink ( ) ksayol dmesiya da nsert /Hyperlink mensn
tklayn. Alacak olan Hyperlink penceresinin text kutucuunda iekler metni yer alacaktr.
Link kutucuunun sandaki klasrden faydalanarak cicekler.html sayfasn sein ve ok
tuuna basarak Hyperlik penceresine geri dnn.
Hyperlik penceresinde link kutucuunun dolu olduu grlecektir. Target kutucuunda

_blank, Parent, Self, top seenekleri mevcuttur. Bunlar hedef sayfann (almas istenen
sayfann,
_blank ; Yeni bir tarayc penceresinde,
Parent ; Yeni erevede
Self ; Ayn tarayc penceresinde,
Top ; Dier ereveleri kapatarak balanty
tek erevede aar.
Bunlardan Parent ve Top seenekleri
ereveler konusunda aklanacaktr.
_blank seeneini iaretleyerek pencereden knz. zerinde altnz arabalar.html
sayfasnda bulunan iekler metninin mavi renkte ve altnn izili olduu grlecektir. Bu
ilemin taraycda nasl grndn kontrol etmek iin klavyeden F12 tuuna basnz.
Sayfann kaydedilmesi gerektiine dair alan mesaj penceresini onaylayarak (ok/evet)
kapatn. Taraycda alan sayfada iekler metnine bir kez tklandnda cicekler.html
sayfas yeni bir pencerede alacaktr. nceki sayfa araclar.html sayfas arka planda
kalmtr.
Ayn ilemi tekrar ederek Hyperlink penceresinde Target kutucuunu self olarak
iaretleyerek yapn ve deneyin. Yeni alan sayfann ayn pencerede olduu grlecek ve
araclar.html sayfasnn yerini alacaktr.
Site ii balanty yapmann ksa yolu;
iekler metni seilir (araclar.html). properties panelinde bulunan Link kutucuunun sanda
bulunan Point to File arac srklenerek Files panalinde bulunan cicekler.html sayfasnn
zerine braklr. Bylece link tamamlanm olur.
2.10.2. Site D Balantlar

Site alan dnda bir URL adresine tanmlanan balantlardr. Bu tr balantlar
gerekletirilirken balant yaplacak sitenin tam adresi yazlmaldr. Yeni bir sayfa aarak
linkler.html adn verin. Sayfaya Emniyet Genel Mdrl metnini girin ve sein. Metin seili
durumda iken properties penceresinin Link kutucuuna http://www.egm.gov.tr yazn. Sayfay
kaydedin ve taraycda izleyin(F12). Taraycda mavi renkli ve alt izili Emniyet Genel
Mdrl metnine tklandnda Emniyet Genel Mdrl web sayfas alacaktr. Link
kutucuuna tam adres girmeniz gerekmektedir. Link kutucuuna www.egm.gov.tr olarak
yazmanz Dreamweaver CS3 tarafndan hatal link olarak kabul edilecektir.
Not : site d balantlarn gereklemesi iin bilgisayarnzn internete bal olmas gerekir.
2.10.3. E-Posta Adresine Yaplan Balantlar.
Bu tr balantlar elektronik posta adresine tanmlanan balantlardr. Tanmlanan balant
tklandnda ziyaretinin e-posta program alr ve tanmladnz e-posta adresi otomatik
olarak yazlr. Properties panelinde Link kutucuuna mailto:e-posta yazlmas yeterli
olacaktr. Bo bir sayfa aarak Eitim ube Mdrl metnini yazn ve sein Properties
penceresinden Link kutucuuna mailto:egitim@egm.gov.tr adresini girin. Yaptnz ilemi
taraycnzda test edin.
E-Posta balantsn Insert /Email Link mensnden alacak olan Email Link Penceresinden
de yapabilirsiniz.
Not : E-Posta balantlarnn gereklemesi iin bilgisayarnzn internete bal olmas
gerekir.
2.10.4. Sayfa i Balantlar (apa Balantlar)

Uzun metin bilgilerinden oluan web sayfalarnda hzl konumlanmay salayan
balantlardr. rnein bu kitabn balantlar blmn web sayfasna yazdk. Sayfamz
capa.html olarak kaydettik.
Tarayc grnm ise aadaki gibi olacaktr.
Her maddenin aklamas capa.html sayfasnn aasnda bulunmaktadr. Kullanc istedii

bilgiye daha hzl ulaabilmesi ve sitenin daha anlalr olmas asndan madde
aklamalarnn bulundu blmlere konumlandrma yaplmaldr.
Capa.html sayfasnda E-Posta Adresine Yaplan Balantlar isimli aklamann sonuna (sayfa
altnda bulunan) imle yerletirilir. nsert panelinin aasnda bulunan Named Anchor
(apa) dmesine tklanr alan Named Anchor penceresine konum ismi yazlr. Onaylanr.
mlecin bulunmas
gereken yer
Yandaki grnt elde edilecektir. Bylelikle apa

imlecin bulunduu yere konumlandrlr.
imdide konumlandrlan bu apaya link verelim.

Sayfa banda bulunan (capa.html) 3. E-Posta Adresine Yaplan Balantlar maddesini
seiniz. Properties panelinde bulunan Link kutucuuna #e_posta yaznz. Kutudan knz.
E-Posta Adresine Yaplan Balantlar maddesi mavi renkte ve alt izili hale gelecektir.
Sayfanz kaydederek taraycda izleyebilirsiniz (F12). Sayfada bulunan dier maddelerde bu
yntemle birbirlerine balanr.
2.10.5. Dosya Balantlar

Web Sayfas haricinde yaplan balantlardr. Sktrlm bir dosya (rar.zip formatl
dosyalar.) tarayc tarafndan tannmad iin tarayc bu dosyay Download yapmak
isteyecektir. Ziyaretiye klasr gnderilmek isteniyorsa ierik sktrlarak yeni oluan
sktrlm dosyaya link verilir.
Tarayclar jpg, gif gibi resim formatlarn tanr. rnein arabalar.html sayfasn an.
Sayfada bulunan ara resmini silin. Sayfann uygun bir yerine Arabam metnini yazn. Bu
metni sein sonrada Properties panelindeki Link kutucuunun yanndaki Point To File
aracn srkleyerek Files Panelinde bulunan araba.jpg isimli resim dosyasnn zerine
brakn. Arabam metni link halini aldktan sonra sayfay taraycda izleyiniz.
Arabam metnine tklaynca araba.jpg resim dosyasnn taraycda ald grlecektir.
2.10.6. Map Balantlar

Web sayfalarnda bir balant sadece bir
sayfaya veya bir hedefe konumlandrlr. Fakat Map
Balantlar ile bir resim zerinde birden fazla
hedefe
(sayfaya)
ynlendirilen
balantlar
oluturulur. Genellikle harita resimlerinde kullanlr.
rnein Trkiye iller haritasn dnelim. Her ilin
zerine tklandnda o ile ait sayfann almas
istenilirse;
kullanlacak
olan
yntem
Map
Balantlardr. Properties penceresinin sol alt
ksmnda bulunan aralar Map Balants aralardr.
Aadaki rnekte grld zere sitede yeni bir sayfa an (harita.html) ve Trkiye iller
haritas resmini (harita.jpg) bu sayfaya yerletiriniz. Sayfay kaydedin. Resmin zerine
tklandnda (resim seili halde iken) Properties penceresinin sol altnda Map aralar yer
alacaktr. Kare eklindeki ara, dikdrtgen ve kare tipi seimler iin kullanlr. Dier ara ise
bamsz/serbest izimler iin kullanlr. ekilde grld gibi bu arac kullanarak Trkiye
haritasndan Ankara ilini seiniz. Properties penceresinin Link kutucuuna ise ankara.html
yazn.
Trkiye haritasnn bulunduu (harita.html) sayfadan Ankara iline tkland zaman Ankara
ilinin ayrntl haritasnn almas planlanmaktadr. Yeni bir sayfa daha an Ankara
haritasnn resmini (ankara.jpg) sayfaya yerletirin. Sayfay ankara.html olarak kaydedin.
imdi de Trkiye haritasnn bulunduu sayfay taraycda izleyin. Haritada Ankara ilinin
zerine gelindiinde el resmi kacaktr. Bu blm tklandnda ise Ankara iline ait harita
alacaktr.
3. TABLOLARLA ALIMAK
3.1. Tablo Eklemek

Bir sayfaya tablo eklemenin en ksa yolu Insert
Paneli/Common sekmesinde bulunan tablo
ekleme dmesidir.
Tablo ekleme ilemi
zerinden de yaplabilir.
nsert/Table
mens
Alan Table Penceresi ierisinde Table Size

blmnde
Rows : Yeni alacak olan tablonun ka satr
olacan,
Columns : Alacak olan tablonun ka sutun
olacan.
Table Width : Tablonun yksekliini
Border Thickness : Tablo izgi kalnln
Cell Padding : Hcre ii boluklar
Cell Spacing : Hcre ereveleri arasndaki
uzakl ifade eder.
Header
blmnde
alternatiflerini ierir.
tablo
balklarnn
Caption : Tablonun ismi

Align Caption : Tablonun isminin konumunu dzenler.
Summary : Tablo hakknda zet bilgilerin yazld kutucuktur.
Yukardaki tablo ekleme penceresine gre

satrl ve stunlu bir tablo olutu. Balk
blmn st olarak setiimiz iin birinci satr
hcrelerine yazlan yazlar kaln olacaktr.
3.2. Tablo zellikleri

Tabloya ait properties penceresinin grlebilmesi iin tablonun seili olmas gerekir. Tablo
ekleme penceresinin zellikleri properties panelinde de mevcuttur. Bu paneli kullanarak ta
tablo zerinde bir ok ilemi gerekletirebilirsiniz. Rows ve Cols kutucuklarn kullanarak
satr veya stun saysn yeniden belirleyebilir, tablo geniliini deitirebilir, tablonun sayfa
ierisinde konumunu (Align) belirleyebilirsiniz. Burada yaptnz deiiklikler ezamanl
olarak tabloda da grlecektir. Hatta daha nceden hazrlanm olan bir tablo modelini
mevcut tablonuza uygulayabilirsiniz (Class). Ancak farkl tablo modellerinin uygulanmas iin
nce CSS blmnn renilmesi gerekmektedir.
Tablo arkasna bir resim

ekleme.
Tablonun sayfa ierisinde

ortalanmas, saa, sola
yaslanmas
Border: Kenarlk kalnl

Bg color: blmnden tablo rengini belirleyebilir,
Brdr Color: blmnden tablo kenarlk rengini belirleyebilirsiniz.
Bg Image: Bu blmde tablo arkasna bir resim yerletirebilirsiniz. Bu resim tablonun boyutu
ile ayn olmaldr. Tablo ile ayn boyutta olmayan resimler tablodan tama problemi
yaratacaktr.
Hcreleri Birletirmek :
Tasarmda sk sk kullanlan tablo hcrelerinin birletirilmesi
iin birletirilmesi gereken hcreler seilir. Properties
penceresinin sa tarafnda bulunan Merges Selected Cells
(seili hcreleri birletir) dmesini tklayarak seilmi olan
hreler birletirilir.
Ayn ilemi seili hcreler zerinde sa tklayarak table
sekmesinden Merge Cells seilerek yaplr.
3.3. Tablo Hcrelerinin Blnmesi :

Tasarm srasnda bir hcreyi ikiye ya da daha fazla hcreye
ayrmanz gerekebilir. Bu durumda blnmesi gereken hcre
seilerek (zerine tklanr) Properties penceresinin sa altnda
bulunan Split Cell into row and Column (Hcreleri satr veya stunlara
bl) dmesine tklanr.
Alan Split Cell penceresinde Rows radio butonu, hcrenin satrlara ayrlacan, Columns
radio butonu hcrenin stunlara ayrlacan ifade eder. Number of Coumns kutucuu ise
hcre satrlara blnecekse ka satra blneceini, hcre stunlara blnecekse ka
stuna blneceini ifade eder. Bu kutucuu kullanarak satr saysn veya stun saysn
belirleyin.
Hcreyi Satrlara bl
Hcreyi Sutunlara bl
Hcre ya da satr saysn belirleyin
3.4. Tabloya Satr Ekleme:

3.4.1
Tabloya satr eklemenin en hzl

yolu tablonun son hcresine
gelerek klavyeden tab tuuna
basmaktr.
3.4.2
Tab tuu ile alan satrlar

tablonun sonuna eklenir. Eer
araya satr eklenmek istenirse
tablo zerinde sa tklanarak
Table / nsert Row seilerek
imlecin bulunduu satrn zerine
yeni bir satr eklenecektir.
3.4.3
Tabloya Satr Ekleme ilemini dier seenekleri kullanarak yapabilmek iin,

nsert / Table Objects mens kullanlr. Burada Insert Row Above, imlecin
bulunduu satrn stne, Insert Row Below, imlecin bulunduu satrn altna
yeni bir satr ekler.
3.4.4
Properties penceresinde Rows blmne

satr saysn eklenmek istenilen satr kadar
arttrarak yeni satrlar oluturabilirsiniz. Bu
ilem iin mevcut tablonun seili halde
olmas gerekir.
3.5. Tabloya Stun Ekleme :

Tabloya stun eklemenin de birden fazla yolu vardr.
3.5.1. Tablo zerinde sa tklayarak Table /
Insert Column mensnden yeni bir stun
oluacaktr.
3.5.2. Insert / Table / Insert Column to The Left

mensnden imlecin bulunduu stunun
soluna ya da Insert /Table /Insert Column to
The Right ile imlecin bulunduu stunun
sana yeni bir kolon ekleyebilirsiniz.
3.5.3. Properties panelinden Column bln

kullanarakta mevcut tablonun stunlarn
oaltabilirsiniz.
Columns
blmnde
bulunan stun saysn istenildii kadar
attrabilirsiniz.
3.6. Satrlarn, Stunlarn ya da Tablonun Silinmesi

3.6.1. Silinmek istenen satr, stun ya da Tablo seilerek klavyeden Delete tuuna
baslr.
3.6.2. Silinmek istenen satr ya da stun zerinde sa tklayarak Table / Delete

Row, Delete Column sekmesinden satr ya da stun silinir.
3.6.3. Properties panelinde Satr ya da stun eklemek iin kullanlan Rows ve

Columns blmnden satr yada stun saylar azaltlarak satr ya da stunlar
silinir.
4. DREAMWEAVER CS3DE CSS

KULLANIMI
4.1. CSS nedir?

CSS; Basamakl Stil Sayfas ( Cascading Style Sheets)
Web sayfalarnda kullanlan metin, resim, link, table, vb. nesnelerin her sayfada tek tek
yeniden dzenlenmesi yerine bu nesnelere ait tanmlama sayfas (css) oluturularak
nesnelerin kullanmn standart hale getirmektir.
CSSin en belirgin zellii tarayclara standart imlerini nasl grntleyeceini sylemesidir.
4.2. CSS Trleri (Stil ablonlar)

1. Yerel CSS
2. Genel CSS
3. Harici CSS
4.2.1. Yerel Stil ablonlar
Yerel stil ablonlar XHTML belgesinin body blmne yazlrlar. Sadece bir kereliine
yazldklar yerde etkili olurlar.
<body>
CSS Trleri
</body>
CSS olmadan yazlan balk yazs
<body>
<h1 style="color:#000000; font:Tahoma; font-size:16px">CSS Trleri</h1>
</body>
Yerel Stil ablonu (CSS) uygulanm yaz
4.2.2. Genel Stil ablonlar

Yerel stil ablonlarnn aksine genel ablonlar HTML belgesinin head blmne yazlr ve
tm 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 Trleri</span>
</body>
Genel Stil ablonu Uygulanm Sayfa
4.2.3. Harici Stil ablonlar
CSS in sizi byk bir ykten, yani her sayfa iin ayr ayr kod yazmaktan kurtaran tr, harici
stil ablonlardr. CSS in bu trnde site ierisine *.css isminde bir dosya alr. Metin, resim,
link, table vb. nesnelere ait zellikler bu dosyada tanmlanr. Css dosyas her sayfann
banda head blmnden arlarak kullanlr.
Harici bir CSS sayfas
<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
sayfasn web sayfasna aran html kodu
</head>
<body>
<h1 class="yeni">CSS Trleri</h1>
</body>
</html>
Harici CSS uygulanm bir web sayfas
4.3. Dreamweaver CS3de CSS Yapma

Dreamweaver CS3 ile kod yazmadan CSS uygulamalar yaplabilir.
CSS oluturmak iin sa taraftan CSS panelinden CSS Styles
sekmesini sein. Bu sekmeden All seeneini sein. Eer bu sekme
grnmyor ise window mensnden CSS Styles seenei ile bu
sekme grnr hale gelecektir.
Yeni CSS oluturmak iin bu pencerinin en altnda bulunan New
CSS Rule simgesi
seilir. Karmza New CSS Rule Penceresi
gelecektir.
Selector Type : Oluturulacak seicinin tipi buradan belirlenir.
Class (can apply to any tag) : Bu seenek iaretlenirse yeni bir class
(snf)oluturulur. name blmne de isim girilerek classa isim verilir.
Tag (redefines the look of a specific tag) : Bu seenek ile mevcut html taglarna
biimlendirmeler uygulanabilir. Html tag kendi biimlendirmesinin yan sra
belirtilecek biimlendirmeleri de kullanr. Bu seenein seili olmas durumunda
resimde grnen name blm tag olarak deiecek ve bu blmde html taglar
listelenecektir. Bu taglardan istenilen seilerek biimlendirmeler yaplabilir.
Advanced (IDs, pseudo-class selectors) : Bu seenek ile link biimlendirmeleri
yaplabilir. Bu blm seili olduu zaman name blm Selector olarak deiecektir.
Name : Bu blm seilecek seici tipine (selector type) gre deiir.
Name : Eer class seili ise bu blm name olacaktr. Buradan yeni oluturulacak
class (snf) iin isim belirtilir.
Tag : Eer tag seili ise bu blmn ad tag olur ve html taglar listelenir. stenilen
html tag seilerek bu taga biimlendirmeler uygulanr.
Selector : Eer Advanced seili ise bu blmde direk isim girilebilir ve link
biimlendirmeleri yaplabilir.
o a : link : Linkin normal durumda biimi.
o a:visited : Daha nceden ziyeret edilmi link biimi.
o a:hover : Fare linkin zerinden geerken.
o a:active : Fare ile linke tkland an linkin biimi.
Define in : Oluturulacak CSS nerede oluturlaca buradan belirlenir.
New Style Sheet File : Yeni bir stil dosyas oluturmak anlamna gelir. Yani css
uzantl farkl bir sayfa oluturmak. Buna harici css sayfas denir. Oluturulan harici
css dosyasn sayfada kullanabilmek iin New CSS Rule simgesinin solundaki
Attach Style Sheet simgesi kullanlr.
This document only : Bu seenek seili durumda ise css ayn sayfa ierisinde
oluturulacak demektir. Bu css html kodlarnda taglar arasnda oluur ve body
taglar arasndan arlarak sayfaya uygulanr. Buna genel CSS denir.
Oluturulan CSSin Uygulanmas :

Eer genel css oluturduysanz zaten sayfann head taglar arasnda tanml olduu iin direk
uygulamas vardr. Harici css oluturduysanz bu cssi sayfa ile ilikilendirmeniz gerekir.
Bunun iin New CSS Rule simgesinin solundaki Attach Style Sheet simgesi kullanlarak
harici css dosyas seilir.
Herhangi bir yaz veya resim seilir ve properties (zellikler) blmnden style seenei
altnda oluturulmu css lerin listesi listelenir. Buradan istenen biimlendirme seilir ve
nesneye uygulanr.
4.4. rnek Stil Dosyalarn Kullanma

Dreamweaver CS3de bulunan rnek CSS dosyalarn kendi sayfanzda kullanabilirsiniz.
Bunun iin ;
CSS panelinin CSS Style / all sekmesinde Attach Style Sheet
dmesine tklayn.
Alan Attach External Style Sheet penceresinin altnda bulunan Sample Style Sheets
balantsna tklayn.
5. CANLI MEN EKLEME
5.1. Spry Menu Bar

Dreamweaver CS3 ile gelen zellik ile sayfaya dikey ya da yatay ekilde menler
ekleyebiliriz. Menleri sayfa iinde baka bir sayfaya ulamak ya da baka bir siteye
balanmak iin menleri kullanabilir.
Bir web sayfasna men ekleyebilmek iin;
Insert / Spry / Spry Menu Bar seeneini tklayn. Spry Menu Bar penceresinden Horizontal
(yatay) ya da vertical (dikey) seeneklerinden birini sein.
mlecin bulunduu blmde seiminize uygun bir men bar oluacaktr. Men barda
varsaylan olarak 4 ana men bulunacaktr. Menu bar seili halde iken Properties
penceresinde menye ait zellikler yer almaktadr.
Ana Men
Men alt balklar
Men balklarnn ismini

deitirmek iin Text
kutucuundan faydalann
Menye ait balk isimlerini men bal seili halde iken text kutucuundan deitirin.
ablon olarak hazrlanm bu meny kendinize uyarlayn. Men balklar silmek veya yeni
bir men bal eklemek iin
yapmak iin
dmelerini kullann. Men balklar arasnda sralama
dmelerini kullann.
Meny farkl bir grnmde grmek iin properties penceresinde bulunan Turn Styl Off
dmesini tklayn.
Men balklarn bu grnmde daha rahat dzenleyebilirsiniz.
Dzenlenmi bir men bar taraycda aadaki gibi yaynlanacaktr.
6. ROLLOVER IMAGE
6.1. Rollover Grnt Oluturmak

Web sayfasnda duraan resimler sayfann basit olarak tasarland hissini yaratacaktr.
Rollover, imlecin (farenin) bir obje zerine gtrldnde objede meydana gelen durum
deiikliidir.
Basit bir rollover uygulamas iin iki ayr resmi ihtiya duyulmaktadr. Bu resimleri Photoshop
veya Fireworks vb. programlar yardm ile yapabilirsiniz.
Rollover yapabilmek iin;
Yeni bir sayfa aarak kaydedin.
Bu konuda iki ayr resim kullandk. Bunlar (a1.jpg) ve (a2.jpg) olarak isimlendirdik.
Sayfada normal olarak grnecek buton (a1.jpg)
Mause zerine gelince grnecek buton (a2.jpg)
Atmz yeni sayfada insert panelinin Commond

sekmesinde bulunan Rollever dmesini sein
nsert Rollover Image isimli pencerede rollover seenekleri yeralmaktadr.

Image Name : Rollover imalge objesine bir isim vermek zorundayz. Fakat ok ta nemli
deil. Dreamweaver CS3 bizim iin otomatik isimlendirme yapacaktr. Sayfanzda rollover
zellii fazla kullanlrsa anlaml isimler vermeniz nerilir.
Orginal Image : Adndan da anlalaca zere orijinal resim dosyasn seiyoruz. Bu resim
(buton) sayfa ilk aldnda grnmesi gereken dosyadr (a1.jpg).
Rollover Image : Bu ise fare linkin (butonun) zerine geldiinde grnecek resmi ifade eder
(a2.jpg)
Preload Rollover Image : Rollover resimlerinin yklenmesi uzun srebilir. Bu sre zarfnda
ziyareti linkin zerinde fare ile gittiinde henz yklenmemi resim gsterilmeye
allacaktr. Bu ise ho olmayan bir grntye yol aacaktr. Bu seenei kullanarak
rollover image arka planda ykleninceye kadar orginal imagenin (a1.jpg) arka planda sabit
kalmasn salayabiliriz. Bylece bu sorunda ortadan kalm olur.
Altermate Text : Baz durumlarda rollover almadnda grlecek olan yazdr. Baz
tarayclar rollover ilemini tanmamaktadr. Her trl olasla kar alternatif bir yaznn
bulunmas gerekir. Bu zellik ayn zamanda fare ile resmin (butonun) zerine gelindiinde bir
aklama metni olarak grlecektir.
When Clicked Go to URL : Butona tklandnda (a1.jpg) almas gereken balant (link )
adresidir.
Insert Rollover Image penceresinin seeneklerini uyguladktan sonra sayfay kaydederek
taraycda yaynlayn.
Sayfa aldnda grnen buton
Fare zerine geldiinde grnen buton
7. NAVGATON BAR
nceki konumuzda rollover image nesnesinin zelliklerini anlattk. Rollover zelliini ksaca;
imlecin (farenin) bir obje zerine gtrldnde objede meydana gelen durum deiiklii
olarak tanmladk.
Dikkat edilirse sadece farenin obje zerine getirilmesinden sz edilmekte. Oysa farenin obje
zerinde birden fazla ilemi vardr. Normal hal (up), zerine gelme (over), tklama (down),
ayrlma (out) gibi.
Farenin hareketine gre objenin alaca duruma navigation denir. Yani navigation, rollover
zelliine gre daha kapsamldr.
Farinin obje zerinde alaca grntleri daha nceden resim tasarlama programlar ile
dzenledik. Bu konuda Photoshop veya Fireworks programlarndan faydalanabilirsiniz.
Bir dmenin 4 farkl durumu olabilir. Bunlar ayr ayr resimlerdirdik.
Sayfa aldnda grlecek obje
(up image)
(a1.gif)
Mause zerine geldiinde grlecek obje
(over image)
(a2.gif)
Tklandnda grlecek obje
(Down image)
(a3.gif)
Mause ayrldnda grlecek obje
(over down image)
(a4.gif)
Navigation Barda kullanlacak resimler
Yeni bir sayfa aarak navigation.html adnda kaydedin.

Insert Paneli/Commond/Navigation Bar sekmesini sein.
Alan Insert Navigation Bar penceresinde objelerin dzenlemesini yapabileceiniz blmler
mevcuttur.
Nav Bar Elements kutucuu ve Element Name kutucuklar daha nce rollover
yapmadnz iin Unnamed1 olarak gelecektir. Aadaki kutucuklar doldurduka buradaki
isim otomatik olarak deiecektir. Bu kutucuklara kendinizde farkl bir isim verebilirsiniz.
Up Image
: Dmenin ilk hali
Over Image
: mle (fare) dmenin zerine geldiinde grntlenecek resim.
Down Image
: Dmeye tklandnda grntlenecek resim.
Over While Down : Dme baslyken, fare dmenin zerinden ekildiinde

grntlenecek resim.
Preload Images : Oluturduunuz dngl resmin sayfa yklenirken arlmasn salar.
Sayfa ilk yklendinide Navigation Bar ierisinden arlacak dier resimler tarayc ara
belleine alnr. Bu ekilde resimlerin yklenmesi esnasnda oluacak gecikmelerin nne
geilmi olur.
Show Down Image Initially : Down image seeneinde tanmlanan resmin dokman
penceresinde ncelikli olarak gsterilmesini salar. Bu seenein iaretli olmad durumda,
Up mage alannda tanml resim gsterilir.
In : Dngl resme oluturulan balantnn nerede alacan ifade eder. Normal bir sayfada
oluturulan bir balant, yeni pencerede alr. Sayfa erevelerden oluuyorsa balantnn
hangi erevede almas gerektii belirtilmelidir.
Insert : Oluturulacak olan Navigation Barn sayfada yatay ya da dikey olarak gsterilmesini
salar.
Use Tablo (Tablo Kullan) : Navigation Barn bir tablo iinde olumasn salar.
Insert Navigation Bar penceresinde dzenlemeler tamamlandktan sonra onaylayarak

pencereyi kapatn.
Sayfay taraycda izleyin (F12).
Up image
Over image
Down image
Over While Down
Farenin hareketlerine gre resmin ald durumlar.

Bu ilemi sayfanzda kullanacanz tm butonlar iin tek tek uygulayn.
Bu ilemi tek tek uygulamak skc olabilir. Fakat yeni balayanlar iin en iyi yntemdir.
Insert Navigation Bar penceresinde bir defada tm butonlara navigation zellii
uygulayabilirsiniz.
Nav Bar Elements kutucuunda sadece bir resim iin (Ana Sayfa) ilem yaptk. Bu nedenle
bir dme ismi yeralmaktadr.
dmelerini kullanarak yeni bir dme ekleyip
karabilirsiniz. Yeni dme eklenince dier kutucuklar boalacaktr. Tm kutucuklar yeni
resim iin tekrar doldurunuz. Nav Bar Elements kutusundaki resimlerin (botonlarn,
elementlerin) srasn aa ve yukar dmelerini kullanarak deitirebilirsiniz.
8. (CANLI) SEKMEL PANEL

Spry Tabbed Panel
8.1. Spry Tabbed Panel

Adobe DreamWeaver CS3 ile gelen sekmeli paneli kullanarak grsellii ve kullanm
arttrabilirsiniz.
Insert / Spry / Spry Tabbed Panel mensn sein . ki sekmeden oluan bir panel sayfaya
eklenecektir. Panel baln tklayarak Properties paneli yardm ile panel ierisindeki sekme
saysn, sekme metnini ve sekmelerin ierdii metinleri dzenleyebilirsiniz.
Insert panelinde Common sekmesinden Spry Tabbed Menu dmesini kullanarak daha
pratik olarak sekmeli panel ekleyebilirsiniz.
Sekme
Sekme ierii
Yeni Sekme
Ekle / Sil
Sekme srasn
Deitirme
Sayfa
aldnda ilk
olarak hangi
sekme gelsin
Properties panelini kullanarak yeni sekme ekleyebilirsiniz. Sekmelerin srasn belirleyebilir,

ieriklerini deitirebilirsiniz. Sekme ierisini tklayarak Page Properties (sayfa zellikleri
penceresi) zelliklerinden normal sayfada kullanlan tm zellikleri sekme sayfasnda da
kullanabilirsiniz.
9. AKORDON PANEL
Spry Accordion
Yeni bir sayfa aarak accordion.html olarak kaydediniz.

Insert Panelinden spry panelini tklayn. Spry sekmesinden Spry Accordion dmesini
tklayn.
Sayfaya iki etiketli spry accordion eklenecektir.
Accordion
ierii
Accordion
Etiket ismi
Accordion
Etiketleri
Accordion
Ekle
Accordion
Sras
Accordion etiketlerinin zerine tklayarak isimlerini deitirebilirsiniz. Accordion baln

tklayarak Properties panelinden yeni bir accordion ekleyebilir, srasn deitirebilirsiniz.
Accordion ieriinde Content yazan kelimeye tklayarak accordion ieriini deitirebilirsiniz.
Dzenlenen Accordion panelinde gezinti yapabilmek izin hangi etiketin zerine gelirseniz o
etiketin sa tarafnda bir gz iareti oluacaktr. Buraya tkayarak etiketin ieriini
grebilirsiniz.
Accordion Paneli sayfaya eklendiinde Dreamweaver CS3 arka planda accordion.css ve

accordion.js sayfalar oluturur. Bunlar accodionun almas iin gerekli olan style ve jawa
script kodlarn ierir.
Css dosyas ak iken (accordion.css) CSS Styles panelinin All Rules blmnden
accordion ile ilgili kod gruplarna ulaabilirsiniz. Burada kodlar farenin hareketine gre
nesnelerin alaca durumu gsterir. Dolays ile kodlar gruplandrlmtr. All Rules
blmnn altnda Properties For .. blmnde her grubun zelliklerini
deitirebileceiniz bir blm vardr. biraz css kod bilgisi olan kullanclar bu kodlar zerinde
deiiklik yaparak Accordion renklerini deitirebilirler.
10. CANLI KATLANABLR PANEL

Spry Collabsible Panel
Spry Collabsible Panel Dreamweaver CS3 ile gelen yeniliklerden birisidir. Accordion Panel
yapsna ok benzemektedir. Fakat tek blmden oluur. Spry Collabsible Panelden birden
fazla ekleyerek accordion gibi altrabilirsiniz. Accordiondan farkl olarak paneller
birbirlerinden bamszdrlar. Dolaysyla panelin biri akken dieride ak olabilir. Tm
zellikleri accordionun zelliklerine benzer.
Yeni bir sayfa aarak kaydedin.
nsert Paneli / spry sekmesinden spry collabsible ekleyeyin. Ayn ilemi insert / spry
mensnden de yapabilirsiniz. Eer kaytl bir sayfa zerinde spry collabsible eklemeye
alrsanz Dreamweaver CS3 sizi sayfann kaydedilmesi gerektii konusunda ikaz
edecektir.
Spry Collabsibleye ait zellikler ise;

Display : Dreamweaver CS3 de panelin kapal ya da ak kullanlacan ifade eder.
Default State : blm sayfa yklendiinde ierik katnn ak ya da kapal olma durumunu
gsterir.
Enable animation : ieriin kayarak almas iin kullanlr.
Dier tm zellikleri accordion ile ayndr.
11. FLASH NESNELER EKLEME
Oluturduunuz web sayfas ierisine eitli nesneler ekleyerek sayfann zengin bir
ierik kazanmasn salayabilirsiniz.
Dreamweaver CS3de sayfa ierisine flash nesneleri eklemek iin insert paneli /
media dmesi kullanlr.
11.1. Flash Filmleri Ekleme :

Flash filmlerinin uzants SWF dir.
Adobe Flash vektrel tabanl web animasyon programdr. Bu nedenle flash ile
hazrlanan filmlerin boyutu kktr. Web sayfalarnda olduka fazla kullanlmaktadr.
flash filmleri swf formatndadr. Sayfanza swf filmi eklemeden nce ilgili filmi site
klasrnze tamalsnz.
nsert panelinden Flash dmesini tklayn ve alan pencereden site klasrnz
ierisinden bir swf filmi sein.
Seim ilemi tamamlandktan sonra Object Tag Accessibility Attributes penceresi
alacaktr. Bu pencereyi iptal diyerek geebileceiniz gibi filme bir balk yazabilirsiniz.
Eklediiniz flash filmi Dreamweaver CS3 dokman penceresinde grnmez. Bunun yerine
dokman penceresinde flash simgesinin bulunduu resim gsterilir. Flash filmini tam olarak
izleyebilmek iin sayfay taraycda amanz gerekir.
Dreamweaver CS3e eklenen tm nesnelerin
blmnde bu nesneyle ilgili zellikler yeralr.
zelliklerinin
dzenlendii properties
Name (isim) : Sayfada flash filminin addr.

W (width), H (Height) ; flash filminin genilik ve ykseklii belirlenir.
V Space : Flash filminin sayfa ierisindeki dikey konumunu belirler.
H Space : Filmin yatay konumunu belirler.
File (Dosya) : Filmin yklendii yolu (klasr) gsterir. Buray kullanarak sayfaya etkin
filmden farkl bir film ekleyebilirsiniz.
Quality : Kalite : filmin kalitesinden dn vererek sayfa ierisinde daha hzl almasn
salayabilirsini.
Low : Dk
High Yksek
Auto Low : otomatik dk
Auto High : otomatik yksek
Scale (leklendirme) : Flash player ile ilgili bir seenektir. Filmler bir men yardm ile
yaknlatrlp uzaklatrlabilir. Varsaylan deer olarak Default (show all- tmn gster)
seenei seili durumdadr. Bylelikle sayfa ilk aldnda filmin tamam gsterime hazrdr.
Align : sayfann yatay eksende hizalanmasnda kullanlr.
Bg : Film alanna ait zemin rengini belirtir. Eer Flash filmi iin effaf bir zemin kullanlmsa,
filmin tabannda bu renk gsterilir. Tabanda effaf olmayan bir renk varsa tanmlanlan renk
filmin yklenme esnasnda gsterilecektir.
Auto Play : Tarayc ekrannda baz komutlarla film oynatlp durdurulabilir. Sayfa aldnda
filmin otomatik olarak balamasn istiyorsak bu seenek seili olmaldr. AutoPlay seili
olmazsa tasarm aamasnda filmi oynatmak iin eitli kodlar yazlmaldr.
Loop : Filmi sonsuz bir dngye sokar. Yani film bittiinde batan tekrar oynatlr.
Play : bu zellik ile filmleri taraycda oynatmadan nce Dreamweaver CS3 tasarmnda
izleyebilirsiniz.
Reset Size : Web sayfasna eklenen filmin boyutlar ile oynanm ise bu boyutlar orijinal
hale getirmek iin kullanlr.
Parameters: Sayfada filmin balamas iin eitli parametrelerin yerine getirilmi olmas
istenirse bu parametreleri karlayan kodlarn yazld blmdr. Bu zellik iin baz script
dillerine hakim olmak gerekir.
11.2. Flash Butonu Ekleme :

Flash butonlarnn uzants SWF dir.
Kaytl bir sayfaya Insert /Common sekmesini kullanarak sayfaya bir buton ekleyin. Insert
Flash Button penceresinden buton ile ilgili zellikleri girin.
Button Text : Buton zerinde grlecek isim.

Font / Size : Yaz tipi ve bykl
Link : butonun amas gerektii sayfa belirtilir.
Target : Verilen linkte sayfann yeni bir sayfadam yoksa mevcut sayfann kapanp yerine link
verilen sayfann almas gerektii belirlenir. ereveli sayfalarda ise alacak sayfann hangi
erevede alacann belirlendii blmdr. Target blm hakknda daha fazla bilgi
edinmek iin balantlar blmn inceleyiniz.
Bg Color : dme zemininde gsterilecek renktir. Varsaylan olarak sayfann rengidir.
Save as : Tasarladnz dme flash nesnesi olduu iin dme site ierisinde swf uzantl
bir flash dosyas olarak saklanr. Sienizde butonu hangi isimde saklamak istiyorsanz bu
alana yaznz. Bu alan bo brakrsanz Dreamweaver CS3 butonlar otomatik olarak
isimlendirecektir.
Get More Style : Daha fazla buton iin Adobe sayfasna ynlendirilmenizi salar.
Sayfa yklendikten sonraki properties panelinde bulunan tm zellikler Flash filmi nesnesinin
zellikleri ile ayndr.
11.3. Flash Metni Ekleme :

Sayfaya sade grnml balant yazlar eklemek iin Flash metinlerini kullanabilirsiniz.
Kaytl bir sayfada Common sekmesinden Flash Text dmesine tklayn.
Insert Flash Text penceresi alacaktr.
Flash text penceresinin zellikleri dier flash nesnelerin zellikleri ile ayn yapdadr.
Yazlarnz bu zellikler dorultusunda hazrlayabilirsiniz.
11.4. Flash Paper Ekleme :

Flash Paper, Adobenin tarayc zerinden belgeleri sunmak iin gelitirdii bir formattr.
Vektrel ierikli ve kalitelidir. Uzants SWF dir.
nsert / common panelinden FlashPaper dmesine tklandnda Insert FlashPaper
penceresi alacaktr.
Source (kaynak) kutucuundan sitenizde bulunan swf uzantl bir dosya sein.
11.5. Flash Video Ekleme :

Sayfaya Flash video (FLV uzantl video dosyas) eklemek iin insert /common dan Flash
video dmesine tklayn.
Insert Flash Video penceresinden ;
Video tipi : Bu blmde video tipini sein.

URL : Filmi site klasrnden sein
Skin : Filmin gsterimini salayacak player iin bir grnm sein
Message : Filmin gsterimini salayacak Adobe Flash Playern ykl olmad durumlar iin
mesaj yazn.
Flash videonun altn grebilmek iin tarayc ekrannda altrmanz gerekir.
11.6. Shockwave Filmi Ekleme :

Shockwave, sktrlm bir zellik olduu iin web ortamnda olduka hzldr. Flash filmi
seenekleri ile ayn zelliklere sahiptir. Shockwave SWF uzantl flash dosyalarnda alr.
nsert /common sekmesinden kaydedilmi bir sayfaya Shockwave filmi ekleyebilirsiniz.
12. FOTORAF ALBM OLUTURMA

Create Web Photo Album
12.1. Fotoraf Albm Oluturma

Hazrladnz sitede bir fotoraf albm oluturabilirsiniz. Dreamweaver CS3 setiiniz
fotoraflar albm haline getirecektir.
Dreamweaver CS3de bir fotoraf albm oluturmadan nce konu ile ilgili resimleri
hazrlayarak siteniz ierisinde bir klasrde toplamanz neririz. Birde albmn sayfalarnn
ve dier materyallerinin toplanaca yeni bir klasr oluturmalsnz.
Biz sitemizde albmde kullanacamz resimlerin bulunduu resimler/manzara ve albm
sayfalarnn ve dier materyallerin toplanaca resimler/photo isimli iki yeni klasr
oluturduk.
Dreamweaver CS3 ile bir fotoraf albm oluturmak iin Commands (komutlar)
blmnden Create Web Photo Album seeneini tklayn. Alan pencerede albm iin
gerekli olan bilgileri yazn.
Photo album title : Albm bal

Subheading info : Alt balk bilgisi
Other info : Albm ile ilgili dier bilgiler. Daha zel balklar kullanlabilir.
Source images folder : Site ierisinde resimlerin bulunduu klasr. Browse (gzat)
dmesini kullanarak resimlerinizin bulunduu klasr sein. (resimler/manzara klasr)
Destination folder : Albm oluturulduunda setiiniz resimlerin kklerinden oluan bir
sayfa kacaktr. Bu kk resimlere tkladnzda resmin byk hali alacaktr.
Bu kk resimlerin her birine Thumbnail denir. Tm bu materyallerin toplanaca klasr
sein (resimler/photo). Yani albmn oluturulaca klasr.
Thumbnail size : Kk resimlerin boyutlarnn belirlenmesi
Columns : kk resimler albm sayfasnda ka kolon halinde sralanmal.
Thumbnail format : kk resimler iin bir format seimidir. Seeneklerden faydalanarak
istediiniz kalite ve format seebilirsiniz. Ya da varsaylan olan (better quality /olduka iyi)
kullanabilirsiniz.
Photo format : Kaynak klasr iindeki resimler, hedef klasre kopyalanr (manzaradan photo
klasrne) bu kopyalama ilemi direkt bir kopyalama ilemi deildir. Standartlatrma ve baz
kalite formatlarndan geirilir. Setiiniz format albm ierisindeki resimlere ait format
olacaktr.
Show File Names : Albmde resimlerin altnda dosya adlarnn gsterilmesi.
Scala : leklendirme normal deer %100 dr.
Create Navigation page for each photo : Fotoraf albmnde yer alan kk resimleri
tkladnzda orijinal resim yeni bir sayfada alr. Bunun yan sra, resimlerin gsterildii
sayfalara resimler arasnda gei salamak iin seyahat barlar ekleyebilirsiniz. Bylelikle
resimler aras gei salayabilirsiniz.
Creat Web Photo Album penceresinde tm aklamalar yaptktan sonra onaylayarak
pencereyi kapatn. index.html adnda yeni bir
sayfa oluacaktr. Bu sayfa kk resimlerin
bulunduu yani albmn n yzdr.
Bu ilem sonunda hedef klasrde (photo)
index.html sayfas, kk resimlerin topland
Thumbnail klasr, sayfalarn bulunduu
pages klasr, byk resimlerin bulunduu images klasr oluacaktr.
13. DNAMK NESNE OLUTURMA

(TimeLine Kullanm)
Dreamweaver CS3de Div Tag ve Draw Ap Div olarak
iki adet katman etiketi vardr. Div taglar sayfa zerinde
istenilen yerde durmazlar. Div Ap Tag etiketleri ise
sayfada sabitlenir ve tablo yerine kullanlabilirler. Ancak
hibir zaman tablonun alternatifi olamazlar.
Dreamweaver CS3de bir nesneye hareket
kazandrabilmek iin
1. lgili nesne Draw Ap Div iine alnmal.
2. Dreamweaver CS3n TimeLine zellii kullanlmaldr.
Yeni bir sayfa aarak nsert/layout panelinden Draw Ap
Div etiketini seiniz. Sayfaya ekleyin.
Eklediiniz Div etiketinin iine nesnenizi yerletiriniz.
Windows mensnden TimeLine seeneini

iaretleyerek sayfann altna TimeLine panelinin
gelmesini salayn.
Katman (Draw Ap Div) siili iken sa tklayarak Add to TimeLine seeneini seiniz. Bu
ilemler objeniz TimeLine izgisine eklenmitir.
TimeLine panelinde balang ve biti karelerinin birer anahtar kare olduuna dikkat edin.
TimeLine Panelinde biti karesini (15.kare) sein.
Katman sayfa ierisinde baka bir konuma srkleyin. Bu

ilem srasnda ilk konumdan son konuma doru bir izgi
oluacaktr.
Belirtilen nesne konumlarna gre yaplan hareketin sayfa

aldnda otomatik olarak almas iin AutoPlay
seeneini iaretleyin.
Sayfa ak kald srece

tekrarlanmasn
istiyorsanz
iaretleyiniz.
hareketin srekli olarak

Loop
seeneini
de
Playback dmeleri
Oluan hareketi, Dreamweaver CS3 dokman sayfasnda

izlemek iin, Playback dmelerini kullann. Bu dmeler
yardm ile hareketi, kare kare (adm adm) izleyebilirsiniz.
Fps alanna girdiiniz say, kareler arasndaki gei hzn
belirtir Dreamweaver CS3 nerdii kare hz 15 kare/sn dir. Kareler aras hz azaltarak
hareketi yavalatabilirsiniz.
Dreamweaver CS3, bir kare dizisini kullanarak yalnzca bir nesnenin hareketini salar. Eer
birden fazla nesneye ayn zaman dilimi ierisinde dinamik zellik kazandrmak istiyorsanz,
birden fazla kare dizini kullanmanz gerekir.
14. ABLON HAZIRLAMAK

Normal bir site olduka fazla sayfadan oluur. Sitenin ierik blm haricinde kalan blmler
standart olmaldr. Yani sitenin balk ksm (banner),
men ksm vb. her sayfada
ounlukla standarttr. Sitede bu standard Save as yntemiyle ya da copyala-yaptr
mant ile yakalayabilirsiniz. Fakat standart blmlerde yapacanz deiikliklerde tm
sayfalar tek tek aarak ayn deiiklii her sayfaya yapmanz gerekir. Bu da ok zahmetli ve
bir o kadarda yorucudur.
Bu blme kadar rendiklerimizden faydalanarak bir ablon sayfa oluturabilirsiniz. Bu
ablondan oaltma yaparak tm sayfalarmzda standard yakalarz. ablonda yaptmz
bir deiiklik tm sayfalar da etkileyeceinden gncelleme problemi olmayacaktr.
14.1. Make Template :

(Template Yapmak)
Make Template zellii tek bana hi bir anlam ifade etmez. Sadece template oluturur. Bu
haliyle sayfaya alndnda sayfada hibir ilem yaplamaz. nce bunu bir rnekle
inceleyelim.
Yeni bir sayfa an. Aadaki gibi tm sitede standart olarak kullanmay dndmz bir
sayfa oluturun. Deimesi gereken ierik ksmn bo brakn. Sayfay kaydedin.
erik alan
Oluturulan bu sayfay ablon haline getirmek iin;
File / Save as Template mensnden ya da insert /

template object/Make Template mensnden Save As
Template penceresini an.
Bu pencerede:
Site : Templatenin hangi site ierisinde oluturulacan
ifade eder.
Existing templates : zerinde altnz site ierisinde daha nceden kaytl template
dosyalarn gsterir.
Description : template iin aklama yaplmas gerekiyorsa bu alana yazlr. Site iirisinde
birden fazla template kullanlacaksa bu aklamalar faydal olacaktr.
Save as : template dosyasnn ismidir. Bu alana oluturmak istediiniz templatenin ismini
yazn.
Yukardaki blmleri doldurduktan sonra Save dmesi ile templatenin kaydn yapn.
Template dosyas site ierisine kaydedilirken Dreamweaver CS3 tarafndan bir template
klasr oluturulur ve template dosyas dw uzants ile bu klasrn iinde saklanr.
Artk site ierisinde GenelSablon.dw isminde bir template dosyas mevcuttur. Oluturulan
template dosyas hibir zaman html sayfas olarak kullanlamaz. Taraycda yaynlanmaz.
Template dosyasn kullanabilmek iin yeni bir sayfa aarak, yeni sayfaya template sayfas
dahil edilmelidir.
14.2. Sayfaya Template

Eklemek
Yeni bir sayfa an ve kaydedin.
Modify / Templates / Apply Template to Page
mensn
kullanarak
Select
Template
Penceresini an.
Select Template penceresinde;
Site : hangi site ierisinde allaca
Templates : Site ierisinde kaytl bulunan template dosyalarn
Update page when template changes : template dosyasnn gncellenmesi (deimesi)
halinde template dosyasna bal dier dosyalarn (html dosyalrnn) deitirilip
deitirilmeyeceini ifade eder.
Yaptmz deiikliklerin otamatik olarak tm sitede uygulanmas iin Update page when
template changes iaretli olmaldr.
Templates blmnden yatmz template dosyasn seerek select dmesi ile yeni
sayfaya bir template yerletirin. Bu ilemlerden sonra Dreamweaver CS3 sayfada ilem
yapmanza izin vermeyecektir. Sebebi; template dosyasnda ieriklerin deitirilmesi iin bir
blm oluturmadk.
14.3. Editable Region

(Dzenlenebilir Alan)
Yukarda oluturulan template dosyas zerinde her
sayfann kendisine ait
olan dzenlemeleri
yapabilmek iin template ierisine Editable Region
yerletirmek gerekir. Template dosyas ak iken
(GenelSablon.dw) , Editable Region eklemek
istediiniz yere (ierik alanna) imleci tklayarak
Insert /Template Objects / Editable Regionu
sein.
New Editable Region penceresi alacaktr. Bu
pencerede bir isim yazarak Regionu kaydedin.
Editable
R i
Temlate sayfasnda dier sayfalarda kullanlmas

iin dzenlenebilir alan oluturuldu. Bu alan kk
grlse de ierisinde dzenleme yapldka bir sayfa
boyutu kadar geniler.
Template Sayfasna dzenlenebilir alan ekledikten

sonra sayfay kaydedin. Karnza Update
Templates Files penceresi kacaktr. Bu pencerede
template dosyasndan (GenelSablon.dw) tretilmi
(oaltlm) sayfalar listelenir. Template de yaplan
bu deiikliklerin listelenen sayfalar zerinde de
geerli olup olmayacan sorar. Bu ablondan
treyen sayfalarn bu deiiklikten etkilenmesi iin
Update dmesine basn.
Update Pages penceresinde Close diyerek kabilirsiniz. Show log alann seerseniz, ilem
yaplan dosyalar gsterecektir. Start diyerekte tm dosyalar gncelleyebilirsiniz.
Bu ablondan treyen sayfalarn otomatik olarak deitii grlecektir. Bu yntemi kullanarak
sitenizi standart hale getirebilirsiniz.
14.4. Optional Region

(Seimli Alan)
Template dosyasnda bulunan baz blmlerin

istemeyebilirsiniz. Bunu bir rnekte uygulayalm.
baz
sayfalarnzda
grnmesini
Template sayfamzda (GenelSablon.dw)

ilemler blmnn sayfada grnmesini
engelleyelim.
GenelSablon.dw dosyas ak iken imleci
sa taraftaki ilemler mensnn altna
getirin ve buraya Insert / Template Objects /
Optional Region ekleyin.
New Optional Region penceresinde isim
vererek (varsaylan ismi de kullanabilirsiniz)
onaylayn.
Optional
Region
lemler blmnn altnda Optional Region oluacaktr. Sonra ilemler blmn Optional
Region ierisine tayn.
Optional
Region
lemler mensn Optional Region ierisine aldktan sonra eski yerine tayn.
GenelSablon.dw template sayfasn kaydedin.
Update Template Files

penceresinden
Update yapn. Bu pencerede yaplan
deiikliin iletisim.html sayfasnda yaplp
yaplmayaca sorulmakta.
Update Pages penceresini Close diyerek

kapatn.
letisim.html sayfasn an. Bu sayfada

halen bir deiiklik grlmemektedir.
Modify / Template Properties mensnden

Template Properties penceresini an. Bu
pencerede Name blmnde, template
dosyasnda
(GenelSablon.dw)
bulunan
Region (alan) nesneleri yer alr. Value
blmnde ise bu nesnelerin sayfada
grnp grnmeyecei belirtilir. True
deerler
bu
nesnenin
sayfada
grntlendiini, false deeri ise nesnenin
sayfada grnmediini ifade eder. Yani
iletisim.html sayfasnda OptilonalRegion1
nesnesi grlmektedir. Pencere altnda
bulunan
Show
OptionelRegion1
nesnesinin check iaretini kaldrn. Value
blmndeki deer false olacaktr. Bu da iletisim.html sayfasnda OptionalRegion1
nesnesinin sayfada grntlenmeyecei anlamndadr. Ok dmesi ile pencereden kn.
Artk sayfanzda ilemler blm bulunmayacaktr. Optional Region zellii ile sayfanzda
gizlemek istediiniz blmleri gizleyebilirsiniz.
15. FORMLARLA ALIMAK
Formlar internet ortamnda kullancdan bilgi toplamak iin kullanlan nesnelerdir.

Formlarla almadan nce form Insert panelinde bulunan insert sekmesini inceleyelim.
Form Alan ekle
Form Aralar
leri Seviye
Form Aralar
Web sayfasnda oluturacanz formu en ideal ekilde tasarlamak iin form nesnelerini ve
zelliklerini iyi bilmek gerekir.
Yeni bir form eklemeden nce oluturacamz form sayfasn nceki blmde rendiimiz
template kullanarak oluturalm.
Yeni bir sayfa aalm.
Atmz yeni sayfaya template dosyasn
uygulayn. Bu ilemi yaparken Sayfaya
Template Eklemek konusuna gz atabilirsiniz.
Modify / Templates / Appy Template to
pageden sitemizde bulunan template dosyasn
ekleyin.
15.1. Sayfaya Form Alan Ekleme

EditRegion blmne form alan ekleyerek form oluturmaya balayn. Form alan
eklemeden dier form nesneleri eklenirse form alan eklemeniz konusunda size bir mesaj
verilir. Dolaysyla form nesnelerini kullanmak iin nce form alan oluturmak gerekir.
Form panelinden form alan ekleme dmesinden sayfaya bir form ekleyin.
Eklenen forma ait zellikler sayfa altndaki properties panelinde yeralr.

Form name : Formun addr. Belli bir isim deeri ierir. Bu isim asp, php, js, vb, gibi
yazlmlarla kullanlabilir.
Action : Form bilgilerinin veri tabanna kaydedilmesi iin asp, php, aspx gibi script dilleri ile
hazrlanm bir sayfann ismini ierir. Yani veritaban balantsn salayacak dosyaya
ynlendirme ilemini gerekletirir.
Method : Genel olarak form verileri iki tr metot ile gnderilir.
POST : Snrsz sayda bilgi gnderilebilir.
GET : Bu metod ile snrl sayda bilgi gnderilebilir. Bu yntemde bilgilerin baz
zellikleri tarayc penceresinin alt ksmnda grnr.
15.2. Text Field

(Metin Alan / Metin Kutusu)
Form panelinden TextField dmesini (

ekleyin.
) kullanarak form alanna bir metin alan
Karnza kan Input Tag Accessibility Attributes penceresinde;

ID : Text kutusunun ad. Metin kutusu ierisine yazlan bilgilinin veritabanna aktarlmas iin
bu isim kullanlr.
Form alannda oluturulan nesnelerin her birinin ismi farkl olmaldr.
Label : Metin kutusunun yanna yazlan isimdir. Metin kutusuna yazlmas gereken bilginin
tanmdr.
Wrap With Label Tag : Bu seenek form nesnelerini bir not etiketi ile ereveler.
seenei kullandnzda form nesnesi her zaman metin notunun yannda kalacaktr.
Bu
<label>Ad
<input type="text" name="txtad" id="txtad" />
</label>
Attach Label Tag Using for attiribute

Bu seenekle form nesnesini kendini aklayan metinden ayrabilirsiniz. Bu metin alan iin
(metin kutusuna bal kalmakszn) ayr zellikler uygulayabilirsiniz. Byle bir ileme
yerleim dzenini ayarlamak amac ile gerek duyulabilir.
<label for="txtad">Ad</label>
No Label Tag :
Bu seenei kullanrsanz XHTML de metin kutusu iin label tag oluturulmaz.
Ad
Before From Item : Bu seenek Form nesnesini aklayan metnin formun solunda (formdan
nce) olacan ifade eder.
After From Item : Form nesnesini aklayan metnin

formun sanda (formdan sonra) olacan ifade
eder.
Access key : Bu seenekte lgili metin kutusuna

daha hzl ulaabilmek iin klavyeden ksayol tuu atanabilir.
Tab Index : Formu doldurmak isteyen kullanc klavyeden tab tuunu kullanrsa tab tuuna
her basldnda sras ile kutulara ulaabilmeli.
Wrap With Label Tag seeneini kullanarak Access key ve tab index seeneklerini
bo brakarak tek satrdan oluan bir metin alan oluturun.
Form alanna eklenen metin kutusunu setiinizde properties panelinde metin kutusuna ait
zellikler yeralr. Bunlar ;
TextField : Metin kutusunun alan (id)

Char Width : Metin kutusunun geniliini karakter saysna gre ayarlar. Kutunun ka
karakter byklnde olacan ifade eder.
Max Chars : Metin kutusu ierisine girilecek maksimum karakter saysn ifade eder.
Type :
Single Line : Tek Satrdan oluan bir metin kutusu
Multi Line
: ok satrl bir metin kutusu
Password : ierisine ifre yazlan metin kutusu zellii tar. Bu seenek aretli
iken taraycda bu metin kutusu ierisine yazlan yazlar yldz iareti
ile grnr.
Init val : (Initial Value-ilk deer) Sayfa taraycda aldnda metin kutusu ierisinde
grlecek ilk yazdr. Varsaylan yaz olarak da tabir edilir.
Yandaki ekilden de anlalaca zere personele ait bilgilerin girilmesi iin Ad, Soyad ve
Sicilinden oluan bir form oluturduk. Formlarla ilgili konular ilerledike bu form yapsn da
gelitireceiz.
15.3. List /Menu

(Liste/ Men)
Seenekleri bir liste halinde sunan tiptir. Bu seenein nemli bir zellii birden fazla
seenek ierisinden birini listeden semenize yardmc olur. Kullanclardan gelen bilgileri
standart hale getirmek iin kullanlr. Bir rnek vermek gerekirse tekilatmzda rtbeler iin
kullanmak yerinde olacaktr.
Mevcut forma insert panelinden ListMenu ekleyin. Input Tag Accessibility Attribute
penceresini yukarda anlatld gibi doldurunuz.
Forma eklenen List/Menu seili halde iken bu seenee ait zellikler properties panelinde
belirir.
List/Menu : Nesnenin ismi (id)

List Values : Bu dme ile Listeye ye ekleyebilir, listeden ye silebilirsiniz.
Liste yesi
ekle/sil
Liste yelerini
srala
Type : List/Menu form nesnesi iki tipte kullanlr.

1. Menu (Alr Kutu) : lk ye kutuda gsterilir. Dier yeler kutu alnca
grlr.
2. Liste : Bu seenekte ise List/Menu ye ait tm yeler liste halinde grlr. Bu

seenein nemli bir zellii, birden fazla seenein listeden seilmesini
salar. List seenei iaretlendiinde Height zellii ile selections zellii aktif
hale gelecektir. Height Liste boyutunu gsterir. Selections zellii ye says
liste boyutunu aar ise liste ierisinde gezinmenizi salayacak aa ve yukar
dmeler oluturur.
Initially Selected (Seili ilk deer) : Listede ya da mende yer alan deerlerden birini seili
olarak kabul eden seenektir. Varsaylan deer de denilebilir.
15.4. Check Box

(Kontrol Kutusu)
Seim yapmak koulu ile veriler toplayan aralardr. Bir formda birden fazla kontrol kutusu
iaretlenebilir. Bu ekilde oklu tercihin yaplmas salanr.
Mevcut formumuzda personelin ald kurslar dzenlemek iin check box kutularn
kullanabiliriz.
Insert panelinden Check Box ekleyin. Forma eklediiniz check box nesnesine ait zellikleri
nesne seili iken properties panelinden grebilirsiniz.
Checkbox name : Checkbox nesnesinin ad. Dreamweaver CS3 otomatik olarak bir isim
verir. Bu ismi silerek yeniden isimlendirme yapabilirsiniz. Checkbox nesnesine verilen isimler
yazlmclar tarafndan kullanlarak veritabanna gnderilir. Bu nedenle form nesnelerinin
isimleri nemlidir.
Checked Value : Buraya yazlacak olan deer direkt
veritabanna gnderilecektir.
Yazlmclar tarafndan kullanlan baz Value deerleri ise; on/ off, True/False gibi deerlerdir.
Bunlardan baka deerlerde kullanlabilir.
Initial State (ilk durum): Sayfa tarayc tarafndan aldnda checkbox nesnesi varsaylan
olarak iaretlimi yoksa iaretsiz olarak m geleceini ifade eder. ki seenek vardr. Checked
iaretli, Unchecked iaretsiz.
15.5. Radio Button

(Radyo Dmesi)
Ziyaretiye eitli seenekler sunularak bu seeneklerden yalnzca bir tanesini seme ans
veren nesnedir. rnein ziyaretinin cinsiyetini renmek iin Radio Button nesnesi
kullanlr. nk ayn anda sadece bir cinsiyet deerinin seilmesi gerekir. Aksi halde form
anlamsz olur.
Dreamweaver CS3de Radio Button ve Radio Group adl iki form nesnesi vardr. Radio
Button nesnesini CheckBox olarak kullanabilirsiniz. Radio Group isimli form nesnesini
kullanarak tek seimli gruplar oluturabilirsiniz.
15.6. Radio Group

(Radyo Gruplar)
Tek seimlik veri nesneleri oluturmak iin kullanlr. Insert panelinden mevcut forma radio
group ekleyin.
Radio Group penceresinde;

Name : Radio Group nesnesinin ad
Radio buttons : ye ekleme ya da ye silme yeler arasndaki sralama ilemlerinin
gerekletirildii blm.
Label : Sayfada grnen isim
Value : Veritabanna gnderilen deer
Line breaks : Radyo butonlarnn satr satr yazlaca.
Table : Radyo butonlarnn bir tablo iine yerletirileceini ifade eder.
15.7. File Field :

(Dosya Kutusu)
Ziyaretinin dosya gnderme ilemini yapabildii nesnedir. Sayfalarnda Browse (Gzat)

dmesi yardm ile bilgisayardaki bir dosya seilerek servera gnderilir.
Yine mevcut forma File Field ekleyin.
Yeni eklenen File Field alan seili iken bu nesneye ait zellikler properties penceresinde
grlecektir.
FileField name : Nesnenin ad

Char Width : Dosya konumunun belirtilecei metin kutusunun geniliini belirler. Bu alana
girilen karakter says kadar genilik oluur.
Max Chars : File Field nesnesi ierisine girilecek maksimum karakter saysn belirtir.
Tanmlanan karakter says geildiinde giri yaplmaz. Sadece belirtilen miktardaki karakter
girdi olarak alnr.
15.8. Button :
(Dme)
Formun en nemli nesnesidir. Form bilgilerinin veritabanna gnderilmesi iin ya da form
bilgilerinin temizlenmesi iin kullanlr.
Forma button eklendiinde button nesnesi seili iken properties panelinden buttona ait
zellikleri grebilirsiniz.
Button Name : nesnenin ismi

Value : Butonun zerinde grlecek olan isim.
Action : Dmenin gerekletirecei eylemi belirler.
Submit form : Form nesneleri zerindeki bilgileri veritabanna ya da e-posta adresine
gnderir.
Reset Form : Tm form elemanlarnn ieriini temizler varsaylan hale getirir.
None : Butonun form elemanlar zerinde etkisiz kalmasn salar.
15.9. Jump Menu :

(Srayan Men)
Jump Menu nesnesi ile oluturduunuz liste seeneklerinden faydalanarak belli bir URL
adresine ynlendirme yapabilirsiniz.
ye Ekle /
Kaldr
ye Sralamas
Karnza kacak Insert Jump Menu penceresinde;

Menu Items : ye Listesi
Text : ilgili URL iin verilecek isim
When Selected go to URL : Bu blmde menu items blmnde seilen URL balantsdr.
Bilgisayarnz sunucu olarak kullanyorsanz ve bilgisayar iinden bir sayfaya link vermek
istiyorsanz Browse butonunu kullannz.
Open URLs in : Alacak olan URLin (link balants) hangi pencerede alacan ifade
eder. Bu blmde Main Windows varsaylann kullann.
Menu ID : Nesnenin ad
Option :
Insert go button after menu : Mennn sana Go (git) dmesi eklenir.
Firs item after URL Change : URL komutu deitiinde birinci men yesini seili
duruma getirir.
15.10. Image Field:

(Grnt Nesnesi)
Dreamweaver CS3 n standartlar dna karak kiisel image kullanmak isteyenler iin
uygun bir alandr.
Dreamweaver CS3 ait gri butonlarn haricinde Image Field alan ile yeni image (resim)
ekleyip bu nesneyi buton olarak kullanabilirsiniz. Ancak standart d oluturulan bu butona
Dreamweaver CS3 otomatik olarak Submit ve Reset zellii vermez. Jawa Script kodlar
gibi dilleri kullanlarak bu dmelere ilev kazandrlabilir. Bu nesneyi forma sadece resim
eklemek amacylada kullanabilirsiniz.
15.11. Hidden Field:

Gizli Kutu
Kod yaps olarak text field (metin kutusu) nesnesine benzer. Fakat form ierisinde
gsterilmeyen gizli bir alan oluturur. Ziyareti farkna varmadan baz bilgilerin veritabanna
kaydedilmesi iin kullanlr.
Form ierisine gizli alan yerletirdiinizde gizli alanlar iin kullanlan simgeyi (
properties blmnden nesneye ait dier zellikleri grebilirsiniz.
)seerek
Gizli alanlar iin kullanlan simge Design (dizayn) sayfasnda grnmyorsa

Edit/Preferences mensnden Invisible Elements katogorisini seerek Hidden Form Field
seeneini iaretleyin.
Hidden Field nesnesinin iki zellii vardr.
HiddenField : Nesnenin ad
Vaue : Gizli alan ierisinde veritabanna gnderilecek olana bilgi
15.12. Spry Validation Text Field :

(Canl Dorulama Metin Kutusu)
Bu nesne ile ziyaretilerin text kutularna belli bir tipte veri girmeleri salanr. Verinin
doruluu kontrol edilir ve belirtilen tipe uymayan bilgi kabul edilmez.
Spry Validation Text Field nesnesi forma eklendiinde nesne bal seili halde iken
properties penceresinde nesneye ait zellikler grlr.
Spry Textfield : Nesnesin ad
Type : Text Kutusuna yazlacak olan bilginin tipi.
Required : (Gerekli) Kullancnn bu alan bo gememesi iin kullanlr.
15.13. Spry Validation Text Area :

(Canl Dorulamal Metin Alan)
Form ierisine canl metin alan ekler. Kullanclarn grlerinin alnaca daha geni bir alan
yaratlabilir. Bu alana girilecek bilgiler denetime tabi tutulabilir, belirli bir karakter snr
konabilir. Bo geilmesi nlenebilir.
Tm nesneleri kullanarak bir form oluturulduu kansndaym. Aada grld gibi form
alan iinde bulunan form nesnelerini form iinde oluturacanz bir tablo ile tm nesneleri
dzenleyebilir daha iyi bir sayfa tasarm oluturabilirsiniz.
16. SWAM IMAGE
SWAP IMAGE
Resim Deitirme
zellikle baz haber sitelerinde benzerlerini grdmz resim deitirme effecti
Dreamweaver CS3 ile de yaplabilmektedir. Yani herhangi bir resim ya da yaznn zerine
gelindiinde yaznn konusu ile ilgili resmin yan tarafta grnmesi Dreamweaver CS3 te
Swap Image effectidir.
Effectin tamamlanm hali aadaki resimde gsterilmitir.
Grld gibi butonun zerine gelindiinde ilgili resim grnr ve mause butondan
ayrldnda resim kaybolur.
nce konu ile ilgili meteryallerin hazrlanmas gerekmektedir. lgili butonlar photoshop
program ile hazrlayabilirsiniz. Konu ile ilgili tm metaryel, web klasrnz ierisinde bir
klasrde toparlaynz.
1. Dreamweaver CS3te yeni bir sayfa an ve kaydedin.

2. ki sutunlu bir tablo oluturun ve border deerini 0 yapn.
3. Sol hcreye butonlar sras ile yerletirin. Butonlar yerletirirken sol sutunun
butonlarn genilii kadar olmasna dikkat edin.
4. Sa taraftaki hcreyede srekli grnmesini istediiniz bir resim yerletirin. Bu resim

bo beyaz bir resimde olabilir.
5. En steki butonu sein ve properties panelinin en solunda bulunan bolua bu

butonun ID adn yazn. Bu ilemi tm butonlar iin ve sa hcreye yerletirdiiniz
resim iin tekrarlayn. ID isimleri karmamas iin anlaml isimler yaznz ve isimlerde
zel karakterler (?/_-, vb.) ile trke karakterler kullanmaynz. Bu rnekte butonlarn
zerinde yazan metni ID ismi olarak kullandk. Bu durumda butonlarn ID ismi
muzik, video, bilgisayar, resimler, dunya oldu. dunya, sa hcredeki resmin
ismidir. Farkl isimlendirmede yaplabilir.
6. ID isimlerini tamamladktan sonra

7. En steki butonu(Mzik) sein.
8. Dreamweaver CS3n sa tarafnda Behaviors Panelinin Add Behaviors
isimli dmesine tklayn. (Eer ekranda Behaviors Paneli yok ise windows
penceresini kullanarak paneli ekrana getirebilirsiniz.)
9. Add Behavior dmesinde alan listeden Swap Imageyi sein.
10. Karnza swap Image isimli pencere alacaktr. Bu pencerenin Images blmnde
resimler listelenmektedir. Set source to blmnde ise bu resimlerin yerine
kullanlacak resimleri bulacamz Browse yeralr. Preload images seenei
dokman yklenirken resimlerin arka fonda yklenmesini ve butonlarn zerine
gidildiinde yklenmemi resim olmamasn, dolays ile effectin hatasz almasn
salayan bir seenektir. Restore images onMouseOut seenei ise farenin resmin
zerinden ekilmesi durumunda tekrar eski resmin yerine gelmesini belirtir. Her iki
seeneide iaretli olacaktr.
11. Swap Image penceresinde Image muzik seili halde iken Browse dmesinden
mzik butonunun zerine gelindiinde yerine gelecek olan resmi sein ve onaylayn.
12. Muzik butonunun zerine gelince yan tarafta bu butona ait resmin grnmesi iin
imdide Image dunya y sein.
13. Browse dmesini kullanarak Mzik butonuna basldnda yan tarafta (dunya
resminin yerine gelecek resim) grnecek resmi sein ve onaylayn.
14. Swap Image penceresinide ok dmesini kullanarak kapatn.

15. Aadaki resimde grld gibi Behavior panelinde muzik dmesine ait iki olay
grnecektir.
Bylelikle birinci butonun (muzik) effectini tamamlam olduk. Bu butona (muzik

butonu) effectin alp almadn teyit edmek iin sayfay kaydederek Browserda
deneyiniz.
Kalan dier butonlara da 8 ile 15 arasndaki maddeleri uygulayn.

Dreamweaver

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver

Uploaded by

Copyright:

Available Formats

ADOBE DREAMWEAVER CS3

1. ALIMA ALANI VE PANELLER

1.1. alma Alann Dzenlemek

Dreamweaverda aralarn grnmn ve aralarn yerleimini iki ekilde

Windows / workspace layout mens iinde

1.2. Karlama Ekran

1.3. Insert Ara ubuunu Kullanmak

menu halinde iken en altta bulunan show as

Alan Customize Favorite Objects penceresinde

Artk sk kullanlan nesneler Favorites sekmesinde

1.4. Properties Paneli

1.5. alma Penceresi Ara ubuunu Kullanmak

1.6. alma Penceresinin zellikleri

1.7. Panelleri Kullanmak

1.8. Kiisel alma Alan Oluturmak

Bunun iin ekrann sanda bulunan Files

Kiisel alma Alannz verdiiniz isimle kaydedilecek ve Windows /Workspace Layout

2. WEB STES YNETM

2.1. Yeni Bir Site Oluturmak

Karlama ekrannn Create New blmnden

Alan Site Definition for Unnamedisimli

Local root folder blmnde ise Benim_Sitem isimli

Default images folder blmnde ilk_sitem klasr

Yukardaki zellikleri yazl sitemiz Files Paneli iinde grnecektir.

2.2. Siteye Yeni Bir Klasr Eklemek

2.3. Siteye Yeni Bir Sayfa Eklemek

Files paneli zerinde sa tklanr ve alan

Karlama ekrannn Create New sekmesinde

File / new mensnden alacak olan New document penceresinde Blank

2.4. Sayfaya Trke Dil Tanmlamas

2.5. Yeni Alan Sayfann Kaydedilmesi

nsert panelinde bo bir yere sa tklayarak

2.6. Sayfa zellikleri

Bu pencere yardm ile sayfa zemin rengini deitirebilir, sayfa boluklarn

Yaz renginin belirlenmesi

Sayfa renginin belirlenmesi

Sayfaya arkaplan resmi belirlenmesi

2.7. Resim Eklemek

penceresinde Default mage Folder blmnde

Manege Sites penceresinde sol tarafta Dreamweaverda

nsert panelinin command sekmesinde mages/image

Files Panelinin ierisinde bulunan Assets sekmesine

2.8. Image Placeholder

Sayfann belirlenen yerine imle yerletirilir.

Sayfanzn belirtilen blmnde artk resminize yer

lgili resmi tedarik edip tanml resim klasr ierisine

Rezerve edilen yere ilgili resim yerlemi olacaktr.

2.9. Metinlerle almak

2.10. Linkler (Balantlar)

Hyperlik penceresinde link kutucuunun dolu olduu grlecektir. Target kutucuunda

2.10.2. Site D Balantlar

2.10.4. Sayfa i Balantlar (apa Balantlar)

Her maddenin aklamas capa.html sayfasnn aasnda bulunmaktadr. Kullanc istedii

Yandaki grnt elde edilecektir. Bylelikle apa

imdide konumlandrlan bu apaya link verelim.

2.10.5. Dosya Balantlar

Arabam metnine tklaynca araba.jpg resim dosyasnn taraycda ald grlecektir.

2.10.6. Map Balantlar

3.1. Tablo Eklemek

Alan Table Penceresi ierisinde Table Size

Caption : Tablonun ismi

Yukardaki tablo ekleme penceresine gre

3.2. Tablo zellikleri

Tablo arkasna bir resim