web tasarim editoru 2

8/9/2019 Web Tasarim Editoru 2

1/68

T.C.

MLL ETM BAKANLII

MEGEP(MESLEK ETM VE RETM SSTEMNN

GLENDRLMES PROJES)

BLM TEKNOLOJLER

WEB TASARIM EDTR 2

ANKARA 2007


2/68


3/68

i

AIKLAMALAR ...........................................................................................................................iiGR ..............................................................................................................................................1RENME FAALYET1 ...........................................................................................................31. TABLOLARLA TASARIM .......................................................................................................3

1.1. Tablo Oluturma................................................................................................................31.2. Harici Dosyalardan Veri Aktarma.....................................................................................71.3. Tablo Hcrelerini Kopyalama / Tama ............................................................................81.4. Tablo Seme ......................................................................................................................91.5. Tablo Hcrelerini Seme ve Biimlendirme ...................................................................101.6. Tablo eriini Sralamak ................................................................................................121.7. Tabloda Deiiklik Yapmak............................................................................................131.8. Tablonun Harici Programlarine Aktarm....................................................................16

1.9. Tablolarda Resim Kullanma............................................................................................171.10. Tablolarie Yerletirme............................................................................................181.11. Bir Tabloya D Hat Ekleme .........................................................................................191.12. Sayfa Dzenini Kontrol Etme........................................................................................211.13. Layout Grnmnde Tablo Oluturma........................................................................211.14. Layout Grnmnde Hcrelerin Biimlendirme zellikleri.......................................241.15. Taslak Resim Kullanma ................................................................................................25UYGULAMA FAALYET ...................................................................................................27LME VE DEERLENDRME.........................................................................................29

RENME FAALYET-2 ..........................................................................................................302. STL SAYFALARI...................................................................................................................30

2.1. Stillerin ncelenmesi........................................................................................................302.2. Dhili Stiller Oluturma ..................................................................................................312.3. Dhili Stilleri Harici Stillere Dntrme.......................................................................332.4. Harici Stil Sayfasn Balama .........................................................................................342.5. Harici Stiller Oluturma ..................................................................................................362.6. Etiket Kombinasyonlar iin Stiller Oluturma ...............................................................392.7. Mevcut Bir Stili Dzenleme............................................................................................402.8. Stil ncelii.....................................................................................................................402.9. CSS ile Arkaplan Ayarlarn Yapma ...............................................................................412.10. Temel CSS Yerleim Alan Hazrlama..........................................................................43UYGULAMA FAALYET ...................................................................................................47LME VE DEERLENDRME.........................................................................................49

RENME FAALYET3 .........................................................................................................503. KTPHANE ELER ........................................................................................................50

3.1. Ktphane esi Oluturma ...........................................................................................503.2. Ktphane esini Sayfaya Yerletirme ........................................................................523.3. Ktphane esini Yeniden Oluturma..........................................................................543.4. Ktphane esinde Deiiklik Yapma .........................................................................543.5. Ktphane Referanslarn Gncelleme............................................................................56UYGULAMA FAALYET ...................................................................................................57LME VE DEERLENDRME.........................................................................................58

MODL DEERLENDRME .....................................................................................................59CEVAP ANAHTARLARI............................................................................................................62

NERLEN KAYNAKLAR.........................................................................................................63KAYNAKA................................................................................................................................64

NDEKLER


4/68

ii

AIKLAMALARKOD 482BK0087

ALAN Biliim Teknolojileri

DAL/MESLEK WEB Programcl

MODLN ADI WEB Tasarm Editr 2

MODLN TANIMIWEB tasarm editrnde tablo, stil ve ktphane

dzenlemelerinin retildii bir renme materyalidir.

SRE 40 / 32

N KOUL WEB Tasarm Editr 1 modln baarm olmak

YETERLKWEB tasarm editrn kullanarak tablo, stil ve ktphaneilemlerini yapmak

MODLN AMACI

Genel AmaBu modl ile; gerekli ortam ve materyaller

salandnda, WEB tasarm editrn kullanarak WEBsayfalar iin tablo, stil ekleme-dzenleme gibi ilemleriyapabileceksiniz.Amalar

1.

WEB tasar

m editr yard

m

yla sayfa iinde tablolaroluturabileceksiniz.2. Editr yardmyla sayfa stilleri oluturabileceksiniz.3. Editr ktphane ilemlerini yapabileceksiniz.

ETM-RETMORTAMLARI VEDONANIMLARI

Bilgisayar, WEB Tasarm Editr

LME VEDEERLENDRME

Her faaliyet sonrasnda o faaliyetle ilgili deerlendirmesorular ile kendi kendinizi deerlendireceksiniz. Modliinde ve sonunda verilen retici sorularla edindiiniz

bilgileri pekitirecek, uygulama rneklerini ve testleri gereklisre iinde tamamlayarak etkili renmeyigerekletireceksiniz. Srasyla aratrma yaparak, grupalmalarna katlarak ve en son aamada alanretmenlerine danarak lme ve deerlendirmeuygulamalarn gerekletiriniz. renci rn Dosyastutulmas tavsiye edilir.

AIKLAMALAR


5/68

1

GR

Sevgili renci,

Internet kullanmnn hzla yaygnlat gnmzde kurum ve kurulular iin WEBortam nemli bir yer tekil etmektedir. Bu durum, Biliim Teknolojileri alan asndanWEB sayfas tasarmnn nemini artrmtr.

WEB sayfas tasarm, kodlar araclyla yaplabildii gibi tasarm editrlerikullanlarak da yaplmaktadr. Dreamweaver da, bu tasarm aralarndan en sk olarakkullanlandr.

Bu modl ile WEB sayfalarnn olmazsa olmaz eleman tablolar ve stillere aituygulamalarn gerekletirilmesi ile editr ktphanesinin kullanm ve dzenlenmesi iingerekli becerilerin kazandrlmas amalanmaktadr.

GR


6/68

2


7/68

3

RENME FAALYET1

Bu faaliyette verilen bilgiler dorultusunda, WEB tasarm editr aralar yardmyla,sayfa iinde tablolar oluturarak bunlara ait dzenlemeleri yapabileceksiniz.

WEB sayfalarnda tablo kullanmnn nedenlerini ve salad kolaylklararatrnz. Yaptnz incelemeleri, rapor haline getirerek snfta sununuz.

1. TABLOLARLA TASARIM

Tablolar, sayfalar satrlara/stunlara blmek ya da metin veya grafiklerin sayfadasabit bir noktada konumlanmasn salamak amalaryla kullanabileceimiz; WEBsayfalarnn en nemli yaptalarndandr.

1.1. Tablo Oluturma

Sayfa iindeki elemanlarn yerleimi zerinde kontrol sahibi olmamz iin

faydalanabileceimiz en etkili aralardan biri tablolardr. Tablolar araclyla bilgilerinsunumu, belli bir dzen iinde gereklemektedir.

Tablo, satr(row) ve stunlardan (column) olumaktadr. Tablo iinde bulunan satr vestunlarn kesiimi sonucunda oluan alan ise Hcre (cell) olarak adlandrlmtr.

Dreamweaver, tablo oluturmak iin kullanabileceimiz eitli seeneklersunmaktadr. Bu seeneklere grnm moduyla eriebiliriz: Standard, Layout ve

Expanded Her mod, tablo oluturma ve dzenlemenin yannda; tablo tasarmyla ilgilifarkl bir grnm sunmaktadr.

ekil 1.1: Grnm modu seenekleri

Grnm modu tercihini, View mens altnda bulunan Table Mode seeneinikullanarak da yapabiliriz.

RENME FAALYET1

AMA

ARATIRMA


8/68

4

Dreamweavergrnm modlarnn zelliklerini yaznz.

Standard :

Expanded :

Layout :

Modlmzde tablo oluturma ilemi, Standart grnm modundagerekletirilmitir.

Tablo oluturmak iin;

WEB Tasarm Editr1 modlnde tanmladmz oba_bilisim sitesi iindeyeni bir sayfa oluturalm. (Sayfamza products_table.htm adn verelim)

Sayfa ak iken Insert ara ubuunda bulunan Layout men grubunu aktif halegetirerekStandard dmesine tklanr. (ekil 1.1).

mle, sayfa iinde tablo ekleyeceimiz noktaya getirildikten sonra Layout mengrubu iinde yer alan Table ( )dmesine tklanr. Karmza Table penceresigelecektir (ekil 1.2).

ekil 1.2: Tablo ekleme penceresi

Tablo zeti

Tablo Aklamas

Stun SaysSatr Says

Balk


9/68

5

Table penceresi; Table Size, Header ve Accessibility olmak zere blmeayrlmtr.

Table Size blmnde; tablo iine bulunacak satr ve stn says, tablo genilii(piksel veya % cinsinden), tablo kenarlk genilii, hcre ii ve hcreler aras bolukdzenlenmektedir.

Table Size blm seeneklerinin ilevlerini yaznz.

Rows : Columns : Table Width : ......Border thickness : ...Cell padding : ..Cell spacing : .......

Header blmnde; stbilgi balk satr veya stunlarna yerletirilen bilgi, her hcre

iin tanmlayc hale getirilir. Bylelikle, standart WEB tarayclar dnda bir taraycnn(grme engelliler tarafndan kullanlan tarayclar) kullanlmas durumunda; tablo iindekiherhangi bir satr veya stunun zerine gelindiinde, o alana ait baln satr veya stuniindeki ifadeden nce okunmas salanmaktadr.

Accessibility blmnde; tablo iinde grntlenecek aklamaya ait bilgi girii vehizalama (Align) ilemi ile tablo zetinin girii ve dzenlenmesi yaplabilir.

Accessibility blm seeneklerinin ilevlerini yaznz.

Caption :

Align Caption :

Summary : ......

Table dmesi, Common men grubu iinde de yer almaktadr.


10/68

6

Oluturaca

m

z tablo iin;Rows : 4 Columns : 4Table width : 95 percent Border thickness : 1 pixelsHeader : Top Caption : rnlerimizdeerleri girilmitir.

Pencere iindeki OK dmesine tkladmzda, tanmlam olduumuz tablosayfamza yerletirilecektir (ekil 1.3).

ekil 1.3: Tablo zelikleri

Oluturduumuz tablonun iine veri girii yapmak iin; ilgili hcre iinde fare ile bir

defa tkladktan sonra metnimizi yazmamz yeterlidir (ekil 1.4).

ekil 1.4: Veri girii yaplm tablo

Table widths klavuzunun tablo etrafnda grnmemesi iin tablo seildikten sonrafarenin sa tuu ile alan listeden Table / Table Widths seenei tklanmaldr.

Header

Cell padding

Table Widths

Cell spacing Border

Hcre


11/68

7

1.2. Harici Dosyalardan Veri Aktarma

Farkl formattaki bir programda (MS Excel, MS Word) hazrlanm olan tablo veyametinleri Dreamweaver editrnde dzenlediimiz sayfalar iine aktarabiliriz. Bu ilem iinen nemli art; alnacak dosya iindeki verilerin sekmeyle veya virglle ayrlm olarakkaytl bulunmasdr.

Dreamweaver editr iindeki sayfaya tablo eklinde dosya aktarmn balatmak iin;Insert ara ubuunda bulunan Layout men grubu iindeki Tabular Data dmesinetklanmaldr.

ekil 1.5: Veri aktarmn balatma

Bu dmeye tklanmasyla, Import Tabular Data penceresi alacaktr (ekil 1.6).

Import Tabular Data penceresini amak iin; Insert mens altnda bulunan TableObjects seenei altndaki Import Tabular Data komutu da tklanabilir.

ekil 1.6: Tablo eklinde dosya ekleme

Import Tabular Data penceresi iinde bulunan Data file: alannda, WEB sayfamzniine aktaracamz tablo verilerinin bulunduu dosya belirtilmelidir. Bu dosyay, Browsedmesine tklayarak seebiliriz.


12/68

8

Delimiter listesinden, aktarm yaplacak dosya iinde kullanlan ayrc tr seilir.

Table width seenekleri ile oluturulacak tablonun geniliinin otomatik olarakayarlanmas (Fit to data) veya kullanc tarafndan girilmesi (Set) gerekir.Format to row listesinden, en stteki satrda bulunan verilerin biimi dzenlenebilir.

ekil 1.7: Harici dosya verilerinden oluturulmu tablo

Delimiter listesinde bulunan seeneklerin ilevlerini yaznz.

Tab : Comma : Semicolon : ........

Colon : ........Other : ........

1.3. Tablo Hcrelerini Kopyalama / Tama

Tablo iinde bulunan hcreler, Dreamweaver aralaryla farkl noktalara tanabilir vekopyalanabilir.

Bu ilemler iin ncelikle ilgili hcrenin seilmi olmas gerekmektedir.

Hcreyi semek iin; fare, ilgili hcrenin iine getirilir. Ardndan sol tuu basltutularak seilmek istenen yne doru srklenir.

ekil 1.8: Seilmi hcreler

ekil 1.8de grlen rnekte; tablo iindeki 2. satrn 2. ve 3. stunlarnda bulunan

hcreler (Islemcive Windows verilerinin bulunduu hcreler) seilmitir.

Seili Hcre


13/68

9

Hcre seiminin ardndan yaplacak ilemin zelliine gre (kopyalama / tama)

ilgili men seenei iaretlenir. Kopyalama ilemi iin, Edit mens alt

nda bulunan Copy;tama ilemi iin ise Edit mens altnda bulunan Cut seenei kullanlabilir. Bylelikleseili olan hcreler bellee alnm olur.

Ardndan, seili hcre veya hcreleri kopyalayacamz / tayacamz nokta zerinegelinir. Edit mens altnda bulunan Paste seeneine tklayarak seili hcrelerin ilgilinokta zerine aktarldn grebiliriz (ekil 1.9 ve ekil 1.10).

ekil 1.9: Hcre kopyalama

ekil 1.10: Hcre tama

1.4. Tablo Seme

Dreamweaver editrnde, tablolar ile ilgili yapacamz tm ilemler iin, ilgilitablonun seilmesi gerekmektedir.

Tablo semek iin fare, seilecek tablonun dnda bulunan bir noktaya getirilir.Ardndan sol tuu basl tutularak tabloya doru srklenir. Bu durumda, tablonun seiliolduunu greceksiniz.

ekil 1.11: Seilmi tablo


14/68

10

1.5. Tablo Hcrelerini Seme ve Biimlendirme

Tablo iinde bitiik halde bulunan hcreleri seme ilemi,1.3. Tablo Hcrelerini Kopyalama / Tamakonusu iinde anlatlmtr.

Tablo iinde birbirinden ayrolan hcreleri, Ctrl tuu yardmyla kolayca seebiliriz.Bu ilem iin; Ctrl tuunu basl iken fare ile seilecek hcrelerin zerine tklamamzyeterlidir (ekil 1.12).

ekil 1.12: Ayr hcreleri seme

Tablo iinde bulunan belli bir alan iindeki hcreleri ayn anda semek iin ise Shifttuundan faydalanlr. Bu ilem iin Shift tuu basl iken, fare ile seilecek hcre grubunun

balang ve bitim noktalar tklanmaldr (ekil 1.13).

ekil 1.13: Belli bir alan iindeki hcreleri seme

Hcrelerle ilgili biimlendirme ilemleri iin ilgili hcre seili iken Propertiespenceresinden yararlanlr.

ekil 1.14: Seili hcre iin zellikler

Balang Noktas Biti Noktas

Hcre zellikleri

Metin zellikleri


15/68

11

Properties penceresi aralarn kullanarak hcre ile ilgili dzenlemeleri (hizalama,

arka plan rengi atama, kenarl

k ekleme vb.) yapabileceimiz gibi hcre iinde bulunanmetinlere ait dzenlemeleri de gerekletirebiliriz (ekil 1.14).

Properties penceresi iinde bulunan hcre zelliklerine ait dzenlemelerin yapldksmda (Cell) bulunan aralarn ilevlerini yle sralayabiliriz:

Merges selected cells using spans : Seili durumda olan iki veya daha fazlahcrenin birletirilip tek hcre halini almasn salar.

Splits cell into rows or columns : Seili olan tek hcreyi, birden fazla hcreyebler.

Horz / Vert : Hcre ieriinin yatay (Horz) ve dikey (Vert) hizalamasnayarlar.

W / H : Seili durumda olan hcrelerin genilik (W) ve ykseklik (H)boyutlarn ayarlar.

No wrap : Hcre iinde bulunan metinlerin tek satra yerletirilmesini salar. Header : Seili hcreyi, tablo stbilgisi olarak biimlendirir. Bg : Seili hcreye arka plan rengi atar. Bu renk, URL adresinden de atanabilir. Brdr : Seili hcreye kenarlk rengi atar.

ekil 1.15: Hcre arka plan rengi ve hizalamas dzeltilmi tablo

Dreamweaver editr ile oluturduunuz tablo iindeki herhangibir hcreye ait zellikleri Properties penceresi aralarndan

faydalanarak dei t iriniz.


16/68

12

1.6. Tablo eriini Sralamak

Tablo iindeki hcrelere yerletirdiimiz verileri alfabetik veya saysal olarakartan/azalanekilde sralayabiliriz.

Sralama iin imlecin, tablo iindeki herhangi bir hcre iinde olmas gerekmektedir.Ardndan Commands mens altnda bulunan Sort Table seenei tklanmaldr. KarmzaSort Table penceresi gelecektir (ekil 1.16).

Sort Table penceresi iinde bulunan Sort by: alanndan sralamada esas alnacakstun, Order alanndan ise sralama tr (saysal / alfabetik; artan / azalan) seilir.

ekil 1.16: Sort Table penceresi

Sralama ayarlarn yaptktan sonra OKdmesine tklanarak ilem tamamlanr.

ekil 1.17: Sralanm tablo

Sralama ilemi bittiinde tablodaki verilerin, yaptmz ayarlar dorultusundasralandn grebiliriz. ekil 1.16 ve ekil 1.17de grlen rnekte, ADI stununa gresralama yaptrlmtr.


17/68

13

Sort Table penceresi iindeki Optionsblmnde bulunan seeneklerin

ilevlerini yaz

n

z.

Sort includes the first now:

Sort header rows : .

Sort footer rows : ....

Keep all row colors the same after the sort has been completed :...............................

1.7. Tabloda Deiiklik Yapmak

Sayfamz iinde oluturduumuz tablolar iinde satr veya stun dzenlemeleriyapabiliriz. Bu ilem iin Properties penceresinde bulunan dmelerden faydalanlr.

Tablo iinde bulunan hcreleri birletirebilir veya satr/stunlara ayrabiliriz.

Hcreleri birletirmek iin ilgili hcreler seildikten sonra Properties penceresindebulunan Cell blm altndaki Merged selected cells using spans dmesine tklamakyeterlidir (ekil 1.18).

ekil 1.18: Hcre birletirme

Bu durumda, seili olan hcrelerin birletii ve tek bir hcre eklini ald grlecektir(ekil 1.19).

ekil 1.19: Birletirilmi hcre

1

2


18/68

14

Tablo iindeki bir hcreyi satr veya stunlara ayrmak (blmek) iin ilgili hcre

seildikten sonra Properties penceresinde bulunan Cell blm alt

ndaki Split cells intorows or columns dmesine tklamak yeterlidir (ekil 1.20).

ekil 1.20: Hcreleri blme

Bu durumda, hcre blme ilemi ile ilgili dzenlemeleri yapacamz Split Cellpenceresi karmza gelecektir (ekil 1.21).

ekil 1.21: Split Cell penceresi

Bu pencere iinde bulunan Split cell into: alannda hcrenin blnme ekli(satr-Rows-, stun Columns-), Number of alannda ise hcrenin blnmesiyleoluturulacak satr/stun says tanmlanr. Tanmlama ileminin tamamlamak iin OKdmesine tklanr.

ekil 1.22: Blnm hcre

1

2


19/68

15

Split Cell penceresinde yaptmz dzenlemeler dorultusunda; hcre blnm

olarak sayfa grlecektir (ekil 1.22). rnekte; tablo iinde seilmi olan hcre, 3 sat

rablnmtr.

Tablo iinde hcre birletirme/blme ilemlerini yapabileceimiz gibi satr veyastunlar da ekleyebiliriz. Bu ilem iin tabloda herhangi bir hcre iinde iken farkl yollarkullanabiliriz:

Modify mens altnda bulunan Table seenekleri iinden Insert Rows (satrekleme) veya Insert Column seenekleri iaretlenir.

Insert mens altndaki Table Objects seenekleri iinde bulunan Insertseeneklerinden uygun olan iaretlenir.

Tablo iinde farenin sa tuu tklandnda alan men listesinde karmzagelen Insert seeneklerinden uygun olan tklanr.

ekil 1.23: Tablo iine satr ekleme

Tablo iine satr / stun ekleme ilemleri srasnda kullanlanmenlerde bulunan Insert seeneklerini, oluturduunuz tablolarauygulaynz.


20/68

16

1.8. Tablonun Harici Programlar ine Aktarm

Dreamweaver editrnde oluturduumuz tablolar, farkl programlar iineaktarabiliriz. Bu ilem iin File mens altnda bulunan Export seenei iindeki Tabletklanmaldr.

Bu durumda, Export Table penceresi karmza gelecektir (ekil 1.24).

ekil 1.24: Export Table penceresi

Export Table penceresi iinde ayrc tr (Delimiter) ve iletim sistemine gre satr

dura (Line breaks) seilir. stenen dzenlemeler yapldktan sonra Export dmesinetkladmzda, Export Table as penceresi karmza gelecektir.

Burada sayfa iindeki tablonun aktarlaca konum (Save in:) ve oluacak yeni dosyaad (File name:)tanmlanr. Bu ilemlerin ardndan Save dmesine tkladmzda, ilgilikonuma istediimiz dosyann kaydedildiini grebiliriz.

ekil 1.25: MS Excele aktarlm tablo

Aktarm ilemi sonucunda oluturulan dosya aldnda, baz karakterlerin ekildeitirdiini grebiliriz (ekil 1.25). Bu durum, yazlmlar arasndaki dil uyumsuzluundankaynaklanmaktadr.


21/68

17

1.9. Tablolarda Resim Kullanma

Tablolarn kullanm amalarndan biri de, sayfann yapsn birden fazla resimledesteklemek veya bir resmi yeniden birletirmektir.

Tablo iine resimler eklenmeden nce, kullanacamz tablonun sayfa tasarmnauygun ekilde biimlendirilmesi yararl olacaktr.

ekil 1.26: Biimlendirilmi bo tablo (Standard grnm modu)

Standard grnm modunda tablo oluturma ve biimlendirme ilemitamamlandktan sonra Insert ara ubuundaki Layout dme grubu iinde bulunanExpanded dmesine tklayarak tablolarmz geniletilmi biimde grebiliriz.

Expanded grnm modunda almamz, tablo iindeki hareketlerimizikolaylatracaktr.

ekil 1.27: Expanded grnm modua gei

Oluturduumuz tablo, Expanded grnm trnde ekil 1.28deki gibi grnecektir.

ekil 1.28: Tablonun Expanded grnm modundaki durumu


22/68

18

Grnm trleri arasnda gei yaptktan sonra imlecimizi, tablo iinde uygun noktaya

getirerek resmimizi ekleyebiliriz.

ekil 1.29: Tablo iine eklenmi resimler (Expanded grnm modu)

Tablo iine resim ekleme ilemini tamamladktan sonra Standard grnm modunagei yapabiliriz (ekil 1.30).

ekil 1.30: Tablo iine eklenmi resimler (Standard grnm modu)

1.10. Tablolarie Yerletirme

Tablolarn iie yerleimi, ok kark tek tablo kullanlmas gerektii durumlardatercih edilmektedir. Dreamweaver, tablolar iie yerletirmemize olanak tanmaktadr.

Baka bir tablonun iine yerletirilecek tabloyu, ana tablonun dndaoluturmak daha kolaydr.


23/68

19

ekil 1.31: Ana tablo ve kk tablonun konumu

Kk tablo, yerletirilecei ana tablonun dnda hazrlandktan sonra fare ileseilerek ana tablo iindeki uygun noktaya tanmaldr (ekil 1.32).

ekil 1.32: ie yerletirilmi tablolar

1.11. Bir Tabloya D Hat Ekleme

WEB sayfas tasarm yaplrken tablo iindeki hcreler iin oluturulan kenarlklaraait grnt, farkl grntleme ortamlarnda (WEB tarayclar) deiik durularsergilemektedir. Dreamweaver, tm grntleme ortamlar iin uyumlu kenarlk ya da tablod hatt oluturmamza olanak vermektedir.

Tabloya d hat eklemek iin ana tablo dnda, eklenecek hat tablosu oluturulmaldr(ekil 1.33).


24/68

20

ekil 1.33: Ana tablo ve hat tablosunun konumu

Oluturulan hat tablosu, tasarma uygun olmas asndan dzenlenebilir (ekil 1.34)

ekil 1.34: Seilmi hcreler

Dzenleme ileminin bitmesiyle, ana tabloya eklenecek olan hat tablosu fareyardmyla uygun konuma tanr (ekil 1.35).

ekil 1.35: Ana tabloya hat eklenmesi


25/68

21

1.12. Sayfa Dzenini Kontrol Etme

Dreamweaver editr ile oluturduumuz sayfalarn farkl znrle sahipekranlarda nasl grneceini belirlemek iin belge penceresinin alt kesinde bulunanWindow Size men seenekleri kullanlmaktadr.

ekil 1.36: Sayfa dzenini kontrol etme

Window Size mens, Design ve Split grnm trleri iinde yer almaktadr.

1.13. Layout Grnmnde Tablo Oluturma

Layout grnm modunda, sayfa dzenleme programlarnda yaplanlara benzer

ilemler gerekletirilir. Bu modda, katmanlar (layers) al

mamaktad

r.Layout grnm moduna gei iin Insert ara ubuundaki Layout men grubu

iinde bulunan Layout dmesine tklanmaldr (ekil 1.37).

ekil 1.37: Layout grnm moduna gei

Layout grnm modunda Table dmesi aktif deildir. Tablo oluturmaya balamak

iin Insert ara ubuunda bulunan Layout men grubu iindeki Draw Layout Cell ( )dmesine tklanmaldr.

Geerli Pencere Bykl

Window Size


26/68

22

Bu admdan sonra imle, sayfa iine getirildiinde (+) eklini alacaktr. Ardndan

istenilen boyutlarda hcreler izilebilir.

ekil 1.38: Layout grnm modunda tablo oluturma

Layout grnm modunda eklenmi olan tablo zerinde deiiklik yapmak iin ilgilihcrenin seilmesi gerekmektedir. Hcreyi semek iin fare imleci hcre kenarl zerine

getirilir. Bu durumda kenarlk, krmz renge dnecektir. O anda fare tklandnda hcrekenarl maviye dnecek ve seim tutamalar belirecektir. Bu tutamalardanfaydalanarak hcre boyutlarn deitirebiliriz (ekil 1.39).

ekil 1.39: Layout grnm modunda hcre seme

Hcreyi tamak iin ise fare, hcre kenarl zerinde iken tklanmal ve sol tuubraklmadan hcrenin istenen blgeye tanmas salanmaldr (ekil 1.40).

1

2

3


27/68

23

ekil 1.40: Layout grnm modunda hcre tama


28/68

24

1.14. Layout Grnmnde Hcrelerin Biimlendirme zellikleri

Layout grnm modunda, hcrelere ait dzenleme ilemlerini yapmak iin ilgilihcre seildikten sonra Properties penceresinden faydalanlr.

ekil 1.41: Layout grnm modunda hcre dzenleme seenekleri

Hcre dzenleme seenekleri, Layout ve Standard grnm modlar arasnda

farkllklar gstermesine ramen temel yap ayndr.

Hcre genilii iin Width alanndan Autostretch seenei aktif hale getirilirse, seilihcrenin genilii tarayc geniliine bal olarak deiecektir.

ekil 1.42: Autostretch genilik dzenlemesi


29/68

25

Bu seenei aktif hale getirdiimizde, site ile boluk resmi (spacer) arasnda bir

ilikilendirme yap

lmad

ysa Choose Spacer Image penceresi kar

m

za gelecektir(ekil 1.42). Bu pencerede uygun alan seildikten sonra OK dmesine tklanr. Bylecegenilik dzenleme ilemi tamamlanm olur.

ekil 1.43: Autostrecth ilemi uygulanm tablo

lem bittiinde, Autostretch dzenlemesi yaplan hcrenin altnda ekil 1.43tegsterilmi bir simge oluacaktr.

Autostretch dzenlemesi srasnda alan Choose Spacer Imagepenceresinde bulunan seeneklerin ilevlerini yaznz.

Create a spacer image file : ......Use an existing spacer image file : ...Dont use spacer images for autostretch tables : ........

1.15. Taslak Resim KullanmaSadece grnts olan sayfalar ile almak zorunda kaldmzda, bu sayfalar,

HTML ortamnda yeniden oluturmak zere taslak resim olarak kullanabiliriz.

Taslak resim, sadece Dreamweaver editr iinde grnr durumdadr; sayfa, WEBtaraycdan izlendiinde grnmez.

Taslak resim oluturma ilemi iin View mens altnda bulunan Tracing Imageseenei iindeki Load komutu iaretlenmelidir.

Bu durumda alacak Select Image Source penceresinden eklenecek taslak resimseilir ve OKdmesine tklanr.


30/68

26

Karmza Page Properties penceresi gelecektir. Bu pencere iindeki Category

listesinde Tracing Image seenei aktiftir.

ekil 1.44: Taslak resim ekleme

Page Properties penceresine, Properties penceresi iindeki Page Propertiesdmesine tklayarak da ulaabiliriz. Burada bulunan Category listesinden Tracing Imageseenei aktif hale getirilerek Browse ile eklenecek resim, Transparency ile resmineffafl ayarlanabilir (ekil 1.44).


31/68

27

UYGULAMA FAALYET

Aada verilen ilem basamaklarn takip ederek konuyu daha da pekitirelim.neriler ksm, uygulama faaliyeti iin ynlendirici olacaktr.

Herhangi bir ilem basamanda geemediiniz adm olursarenme Faaliyeti-1 iindeki anlatmlardan yardm alabilirsiniz.

lem Basamaklar neriler

WEB tasarm editrn altrnz. nceden tanmlam olduunuz yerel site

iinde yeni bir sayfa oluturunuz. Create New

Sayfa iinde yeni bir tablo oluturunuz. Layout men grubu

Bilgisayarnzdaki bir Excel (xls)dosyasndan sayfanzdaki tabloya veriaktarnz.

Import

Tablo iindeki hcreleri tablo dnataynz / kopyalaynz.

Kes Yaptr Ctrl+C Ctrl+V

Tablo iinde bulunan birbirinden ayrhcreleri seiniz.

Tablo iinde bulunan grup halindekihcreleri seiniz.

Ctrl Shift

Tablo iindeki verileri, istediiniz stunagre alfabetik olarak sralaynz.

Sort Table

Tablo iindeki hcreleri birletiriniz. Merge Cells

Birletirmi olduunuz hcreyi, stunlarablnz.

Split Cell

UYGULAMA FAALYET


32/68

28

Tablo iine sat

r ve stun ekleyiniz.

Insert Row / Columns

Tablo iine satr ve stun ekleyiniz. Insert Row / Columns

Tablo iindeki verileri, bo bir Worddosyasna aktarnz.

Export

Tablo iine resim ekleyiniz. Expanded grnm modu

Birbirinden bamsz tablolar, ayn tabloiine ekleyiniz.

Layout grnmnde tablo oluturunuz.

Layout grnm modunda oluturduunuztablo iindeki hcrelerin konum ve

boyutlarn deitiriniz.

Hcre geniliinin, kullanlan WEBtaraycya gre otomatik olarakdzenlenmesi iin gereken ilemi yapnz.

Autostretch

Tablonuza taslak resim ekleyiniz. Tracing Imge


33/68

29

LME VE DEERLENDRME

A- OBJEKTF TESTLER (LME SORULARI)

Aadaki ifadeleri okuyunuz, doru olan ifadelerin nndeki bolua D harfini,yanl olan ifadelerin nndeki bolua ise Y harfini koyunuz.

1. ( ) Hcre, bir satr ve bir stunun kesimesinden oluan alandr.

2. ( ) Sayfa iindeki tabloda bulunan verileri kopyala-yaptr yoluyla, veri taban

dosyasna aktarabiliriz.

3. ( ) Hcre birletirme iin Split, blme iin ise Merge dmesi tklanmaldr.

4. ( ) Layout grnm modunda alrken sayfa iine tablo eklenemez.

5. ( ) Tablo iine resim aktarlrken Expanded grnm modunda allmas dahauygundur.

6. ( ) Hcreye eklenen kenarlklara ait renk deiimi yaplamaz

7. ( ) Sayfaya eklenmi olan tablo zerinde; satr/stun ekleme/silme gibi ilemleryaplamaz.

DEERLENDRME

Cevaplarnz cevap anahtar ile karlatrnz. Doru cevap saynz belirleyerekkendinizi deerlendiriniz. Yanl cevap verdiiniz ya da cevap verirken tereddt yaadnzsorularla ilgili konular renme faaliyete geri dnerek tekrar inceleyiniz.

LME VE DEERLENDRME


34/68

30

RENME FAALYET-2

Bu faaliyette verilen bilgiler dorultusunda, WEB tasarm editr aralarn kullanaraksayfa iinde stiller oluturacak ve bunlara ait biimlendirme ilemlerini yapabileceksiniz.

Stillerin kullanmnn nedenlerini ve salad kolaylklar aratrnz. Yaptnz

incelemeleri, rapor haline getirerek snfta sununuz.

2. STL SAYFALARI

2.1. Stillerin ncelenmesi

Stil, tek bir isim verilerek tanmlanan ve birden fazla dzenlemeyi ieren birbiimlendirme tekniidir. Bir stile ait niteliklerden herhangi birinde deiiklik yapldndabu stil tarafndan kontrol edilen btn eler otomatik olarak gncellenir.

ekil 2. 1: Uygulanan stillerin kod karlklar

Seili metin zerinde Properties penceresi kullanlarak yaplan dzenlemeler,Dreamweaver tarafndan CSS (Cascading Style Sheets Basamakl Stil Sayfalar) stilleriolarakstyle listesine dhil edilir.

CSS stilleri, sayfa iinde Code grnmnde etiketleri arasna

yerletirilir.

RENME FAALYET2

AMA

ARATIRMA


35/68

31

2.2. Dhili Stiller Oluturma

Dhili stiller, sadece o an allan (geerli) sayfada kullanlmaktadr. Genellikle teksayfal dzenlemelerde dhili stil oluturulmaktadr.

Stil ilemlerini CSS Styles panelini kullanarak gerekletirebiliriz.

Sayfa iinde yeni bir stil oluturmak iin CSS Styles paneli iindeki New CSS Styledmesine tklanmaldr (ekil 2.2).

ekil 2. 2: CSS Styles paneli

Bu admn hemen ardndan New CSS Style penceresi alacaktr (ekil 2.3). Bu pencere iinde stile ait isim (Name), seici tip (Selector Type) ve tanmlama noktas(Define in) dzenlemesi yapldktan sonra OKdmesine tklanr.

ekil 2. 3: New CSS Style penceresi


36/68

32

Yeni stil eklerken iaretlenen Selector Type (seici tip) trlerinin ilevlerini

yaz

n

z.Class :

Tag :

Advanced :

New CSS Style penceresinden sonra CSS Style Definition for .* penceresi

a

lacakt

r. Bu pencere iinde, oluturaca

m

z stile ait biim zellikleri seilip OKdmesine tklanr (ekil 2.4).

ekil 2. 4: Stil zelliklerini tanmlama

Bu pencerenin kapanmasyla, CSS Styles paneline, oluturduumuz stil eklenecektir(ekil 2.5).


37/68

33

CSS Style Definition penceresi iindeki Type alanndaki seenekleri,

oluturaca

n

z stiller iin deitirerek uygulay

n

z.

ekil 2. 5: Eklenen stili uygulama

Sayfa iinde istenen metin seildikten sonra CSS Styles panelinde grnen yeni stilzerinde farenin sa tuu ile tklanr ve alan menden Apply seenei iaretlendiinde,seili metne yeni stil uygulanacaktr (ekil 2.6).

ekil 2. 6: Metne uygulanm stil

2.3. Dhili Stilleri Harici Stillere Dntrme

Harici stiller, sadece CSS zellikleri ieren stillerdir. Bu tr stil sayfalarn birdenfazla WEB sayfasnda kullanabiliriz. Bu da metin dzenlemesinin sayfalar arasnda tutarllkgstermesine yardmc olur.

Dreamweaver araclyla dhili stilleri, harici stil olarak dzenleyebiliriz.

Bu ilem iin sayfa iinde iken File men altnda bulunan Export seenei iindekiCSS Styles komutu iaretlenmelidir. Karmza Export Styles As CSS File penceresi

gelecektir (ekil 2.7).


38/68

34

ekil 2. 7: Export Styles As CSS File penceresi

Bu pencere iinde, nceden oluturulan dhili stil iaretlenir ve Save dmesinetklanr. Bylece dhili stil kaynandan harici stil oluturma ilemi tamamlanm olur.

2.4. Harici Stil Sayfasn Balama

Harici stilleri, Dreamweaver editr ile alrken kullandmz tm sayfalardakullanabiliriz. Bu kullanm iin oluturulan harici stil sayfasnn, allan WEB sayfas iine

balanmas

gerekmektedir.


39/68

35

ekil 2. 8: Harici stil sayfasn balama

Harici stil sayfalarn balamak iin ncelikle CSS Styles panelinde bulunanAttach Style Sheet dmesine tklanmaldr. Bu tklamayla birlikte Attach External styleSheet penceresi alacaktr. Bu pencerede, balanacak stil sayfasnn konumu (File/URL)Browse dmesine tklanarak alan Select Style Sheet File penceresi iinde tanmlanr(ekil 2.8).

Bu ilemin ardndan CSS Styles paneline baktmzda, altmz sayfa iinebaladmz harici stili grebiliriz (ekil 2.9).


40/68

36

ekil 2. 9: Balanan stil sayfasnn panel iindeki grnm

Eer balantsn gerekletirdiimiz stili, sayfa iinde kullanmak istersek; CSS Styles

paneli iinde grnen harici stil dosyas

n

n zerine t

klayarak grnen stil ayr

nt

lar

ndanana stil (rnekte; .hitabe verilmitir) zerinde farenin sa tuunu tklayp Apply komutuiaretlenmelidir.

2.5. Harici Stiller Oluturma

Harici ve dhili stil sayfalarnn oluumu birbirine benzemektedir.

Harici stil sayfas oluturmak iin CSS Styles panelinde bulunan New CSS Styledmesine tklanarakNew CSS Style penceresinin almas salanmaldr (ekil 2.10).

ekil 2. 10: New CSS Style penceresi


41/68

37

Alan pencerede Selector Type (seici tip) alannda Tag (etiket) seenei aktive

edilmelidir. Bu pencere iinde gerekli dzenlemeleri yaparakOKdmesine t

klad

m

zdaCSS Style Definition for * in CSS Style Sheet penceresi karmza gelecektir (ekil 2.11).Bu pencere iinde uygun stil tanmlamalarn yapabiliriz (rneimizde; p-paragraf etiketidzenlenmitir).

ekil 2. 11: Stil zelliklerini tanmlama

CSS Style Definition penceresi iin gerekli olan tanmlamalar yaptktan sonra OKdmesine tkladmzda oluturduumuz etikete ait dzenlemenin CSS Styles paneline

aktar

ld

n

grebiliriz.


42/68

38

ekil 2. 12: Harici stil ekleme


43/68

39

2.6. Etiket Kombinasyonlar iin Stiller Oluturma

Etiket kombinasyonlar iin stil oluturma ilemi, daha nceden oluturulmu etiketstillerinin iinde yeni stiller oluturmak anlamna gelmektedir. Bu ilem iin CSS Styles

paneli iindeki New Style Sheet dmesi tklanmaldr. Alan New Style Sheet penceresiiinde Selector Type alannda Advanced seenei iaretlenmelidir. (rneimizde; ncekiuygulamada oluturduumuz paragraf stili dzenlenmitir.)

ekil 2.13: Etiket kombinasyonlar iin stil tanmlama

Bu pencere iinde gerekli tanmlamalar yaparakOKdmesine tkladmzda CSSDefinition penceresi karmza gelecektir. Bu pencere iinde de oluturulacak stile aittanmlamalar yaplr.

ekil 2.14: Stil dzenlemesi yaplm paragraf

rneimizde, stile ait yaz tipi olarak Lucida Handwriting (24 pt.), renk olarak ise#000099 seilmitir (ekil 2.14)


44/68

40

2.7. Mevcut Bir Stili Dzenleme

Oluturulan stili dzenlemek iin CSS Styles panelinde bulunan Edit Style ( )dmesine tklanmaldr.

Alan pencere iinde stil zellikleri dzenlenebildii gibi yeni stiller deoluturulabilir.

2.8. Stil ncelii

Sayfa iinde bulunan ayn metne birden fazla stil uygulanm ise sayfann WEBtaraycda grntlenmesi srasnda uyumazlklar yaanabilir. Bu durumu nlemek iin

tarayc iinde dzenleme yapmamz gerekmektedir.

ekil 2.15: Tarayc stil grntleme nceliklerini dzenleme

Stil nceliini dzenlemek iin tarayc araclyla Internet Options (InternetSeenekleri) penceresi alarak General (Genel) sekmesine geilmelidir. Bu sekme iinde

bulunan Accessibility (Eriilebilirlik) dmesine tklanarak istenen ncelik ayarlaryaplabilir.


45/68

41

Accesibility penceresi iindeki Formatting seeneklerinin ilevleriniyaznz.

Ignore colors specified on WEB pages :...Ignore font styles specified on WEB pages :....Ignore font sizes specified on WEB pages :...

...

2.9. CSS ile Arkaplan Ayarlarn Yapma

Stil araclyla arka plan oluturmak iin CSS Styles paneli iinde bulunan New StyleSheet dmesine tklanarakNew Style Sheet penceresinin almas salanr (ekil 2.16).

ekil 2.16: Gvde iin stil tanmlama

New Style Sheet penceresindeki gerekli tanmlamalardan sonra OK dmesine

tkladmzda CSS Style Definition penceresi ile stil zelliklerine ait tanmlamalaryapabiliriz (ekil 2.17).


46/68

42

ekil 2.17: Arkaplan iin stil zelliklerini tanmlama

CSS Style Definition penceresi ile arka plan dzenlemelerini gerekletirip OKdmesine tkladmzda sayfamzn arka plan renginin deitiini grebiliriz (ekil 2.18)

CSS Style Definition penceresi iindeki Background alanndakiseenekleri, oluturacanz stiller iin deitirerek uygulaynz.


47/68

43

ekil 2.18: Arka plan rengi deien sayfa

2.10. Temel CSS Yerleim Alan Hazrlama

WEB sayfalar iinde yerleim alan, tasarm iin nemli noktalardandr. CSS stillerinikullanarak sayfa iinde yerleim alan hazrlamak, kolay ve salkl bir yoldur.

CSS yerleim alan oluturmak iin CSS Styles paneli iindeki New Style Sheetdmesine tklanr. New Style Sheet penceresi karmza gelecektir (ekil 2.19).

ekil 2.19: Yerleim alan iin yeni stil oluturma

Bu pencere iinde, stile ait temel tanmlamalar yapldktan sonra OK dmesinetklanr. Karmza gelecek olan CSS Style Definition penceresi iindeki Box alanndayerleim alanna ait llendirme ayarlar (ekil 2.20); Border ile yerleim alan kenarlna

ait dzenlemeleri (ekil 2.21) yapabiliriz.


48/68


49/68

45

ekil 2.21: Yerleim alan kenarlk biimlendirmesi

Stil biimlendirme ayarlarnn tamamlanmas ile OKdmesine tklanr. Oluturulanyerleim alan stili, CSS Styles panelinde grnecektir. Sayfa iinde iken bu stil zerindefarenin sa tuu ile tklay p alan menden Apply seeneini iaretlediimizde,tanmladmz yerleim dzeni, sayfa iine yerletirilecektir (ekil 2.22).

ekil 2.22: Sayfa iine eklenmi yerleim dzeni


50/68

46

Yerleim alan iinde aklayc bir ifade yer almasn istersek, Layout men grubu

iinde bulunan Insert Div Tag ( ) dmesine tklamamz gerekmektedir.

Bu durumda Insert Div Tag penceresi alacaktr. Bu pencere iinde, sayfa iineekleyeceimiz stil tr (Class) seilerekID alanna aklayc ifade yazlabilir (ekil 2.23).

ekil 2.23: Insert Div Tag penceresi

Insert Div Tag penceresi araclyla eklediimiz yerleim alan ekil 2.24tegrlmektedir.

ekil 2.24: Insert Div Tag ile eklenmi yerleim dzeni


51/68


52/68

48

Stiller yardmyla sayfa arka plan ayarlarnyapnz.

Background

Sayfa iinde yerleim dzeni stilioluturunuz.

Oluturulan yerleim dzenini, sayfa iineekleyiniz

Insert Div Tag Uygulama srasnda oluturduunuz

sayfalar kaydediniz. Save

WEB tasarm editrn kapatnz. File / Exit


53/68

49

LME VE DEERLENDRME


Aadaki ifadeleri okuyunuz doru olan ifadelerin nndeki bolua D harfini,yanl olan ifadelerin nndeki bolua ise Y harfini koyunuz.

1. ( ) Properties penceresi araclyla sayfa iindeki metin zellikleri deitirilebilir.Dreamweaver bu niteliklerini CSS stilleri araclyla tanmlar.

2. ( ) Sayfa arka plan rengi, sadece stiller araclyla deitirilebilir.

3. ( ) WEB taraycnn, birden fazla stil uygulanm elemana ait biimlendirmeyisorunsuz birekilde grntleyebilmesi iin ncelik ayar yaplmaldr.

4. ( ) Stiller, sadece allan sayfa iin kullanlr.

DEERLENDRME


LME VE DEERLENDRME


54/68

50

RENME FAALYET3

Bu faaliyette verilen bilgiler dorultusunda, WEB tasarm editr aralarn kullanarakktphane eleri ile ilgili ilemleri yapabileceksiniz.

3. KTPHANE ELERWEB sitemiz iinde bulunan birden fazla sayfada kullanmamz veya oluturmamz

gerekebilecek pek ok e ve e grubu (gezinti eleri, telif hakk bilgileri st bilgiler vealt bilgiler vb.)vardr.

Dreamweaver, sk kullanlan bu ierik blmlerini ktphane eleri olaraksaklamamza imkn salar. Bu sayede, ayn ierii birden fazla belgeye kolayca ekleyebiliriz

3.1. Ktphane esi Oluturma

Ktphane esi, birden fazla sayfada kullanlabilen bir ierik parasdr.Sayfalardan ayrlm durumda ktphanede yer alan bir dosyada bulunan bu eler, ilgili

ierie ait koddan ibarettir.

Ktphane eleri; sadece .. etiketleri arasnda grnen ieriiihtiva edebilir.

Ktphane ilemleri iin Assets paneli iinde yer alan Library blmkullanlmaktadr (ekil 3.1).

RENME FAALYET3

AMA


55/68

51

ekil 3.1: Assets paneli Library blm

Ktphane esi oluturmak iin ncelikle sayfa iinde ktphaneye eklenecek blmseilmelidir (ekil 3.2).

ekil 3.2: Ktphaneye eklenecek alan seme

Refresh Site Edit

Delete

New LibraryItem


56/68

52

Bir sonraki admda Assets paneli altnda Library blm iinde bulunan New

Library Item dmesi t

klanmal

d

r. Bu durumda, Library blmnde yeni bir e(Untitled) belirecektir (ekil 3.3). Eklenmi olan bu eye, istediimiz ismi verebiliriz.

ekil 3.3: Ktphane esi ekleme

3.2. Ktphane esini Sayfaya Yerletirme

Eklemi olduumuz ktphane esini, istediimiz sayfalarn iine kolaylkla

yerletirebiliriz.

Bu ilem iin imle, sayfa iinde ktphane esinin eklenecei konuma getirildiktensonra Assets paneli altnda bulunan Library blmnden eklenecek e seilerek Insertdmesine tklanmaldr (ekil 3.4).


57/68

53

ekil 3.4: Sayfa iine ktphane esi ekleme


58/68

54

3.3. Ktphane esini Yeniden Oluturma

Ktphaneden silinmi olan eleri yeniden oluturmak iin ilgili enin bulunduu bir sayfa almaldr. Ardndan bu e seilip Properties penceresinde bulunan Recreatedmene tklanmaldr (ekil 3.5). e, Untitled ismi ile yeniden oluturulacaktr.

ekil 3.5: Ktphane esini yeniden oluturma

3.4. Ktphane esinde Deiiklik Yapma

Var olan bir ktphane esi zerinde deiiklik yapmak iin ilgili e sayfa iindenveya Assets panelinden seilmelidir. Ardndan Assets paneli altnda bulunan Library

blm iindeki Edit dmesi bir defa veya ktphane esi ift tklanarak dzenleme

sayfasna gei yaplabilir (3.6).

ekil 3.6: Ktphane esini dzenleme


59/68

55

Ayn ilemi ktphane esi seili iken Properties penceresinde bulunan Open

dmesine t

klayarak da yapabiliriz.Dzenleme ilemini tamamladktan sonra kayt ilemi iin Save dmesine

tkladmzda karmza Update Library Items penceresi gelecektir (ekil 3.7). Burada,dzenlenen eyi kullanan dier sayfalar iinde otomatik olarak gncellenipgncellenmeyecei belirlenir.

ekil 3.7: Ktphane esini dier sayfalar iin de gncelleme

Gncelleme (Update) yaplmasn istersek, ilem sonunda Update Pages penceresialacak ve gncelleme ilemine dair aklamalar grlecektir (ekil 3.8).

ekil 3.8: Gncelleme raporu


60/68

56

3.5. Ktphane Referanslarn Gncelleme

Dreamweaver, sayfalar iinde bulunan ktphane elerinin tmnn ayn andagncellenmesine olanak vermektedir.

Bu ilem iin Modify mens altnda bulunan Library seenei iindekiUpdate Pages komutu iaretlenmelidir. Karmza Update Pages penceresi gelecektir(ekil 3.9).

ekil 3.9: Update Pages penceresi

Bu pencere iinde site iindeki tm sayfalarda bulunan ktphane elerigncellenebilecei gibi sadece belirtilen eyi bulunduran sayfalar da gncellenebilir.


61/68

57

UYGULAMA FAALYET

Aada verilen ilem basamaklarn takip ederek konuyu daha da pekitirelim.neriler ksm, uygulama faaliyeti iin ynlendirici olacaktr.

Herhangi bir ilem basamanda geemediiniz adm olursarenme Faaliyeti-3 iindeki anlatmlardan yardm alabilirsiniz.

lem Basamaklar neriler

WEB tasarm editrn altrnz. Tanmladnz site iinde nceden

oluturulmu bir sayfa anz. Open

Sayfa iinde bir alan seerek bunuktphane esi haline getiriniz.

Assets LibraryNew Library Item

Yeni bir sayfa oluturunuz. Create New Oluturduunuz ktphane esini, yeni

sayfa iine yerletiriniz. Insert

Ktphane esini siliniz. Sayfa iindeki eyi, ktphaneye yeniden

ekleyiniz. Recreate

Ktphane esi zerinde deiiklikyapnz.

Edit Yaptnz deiikliin site iindeki tm

elere yerletirilmesi iin gerekli ilemiyapnz. Update

WEB tasarm editrn kapatnz. Alt + F4

UYGULAMA FAALYET


62/68

58

LME VE DEERLENDRME


Aadaki ifadeleri okuyunuz, doru olan ifadelerin nndeki bolua D harfini,yanl olan ifadelerin nndeki bolua ise Y harfini koyunuz.

1. ( ) Ktphane eleri, sayfa iinde bulunan .. alanlar iineeklenir.

2. ( ) Ktphane eleri ile ilgili ilemler iin Assets panelinden faydalanlr.

3. ( ) Ktphane eleri dzenlendiinde; dzenlenen e, nceden oluturulmusayfalar iinde eski halini korur.

DEERLENDRME


LME VE DEERLENDRME


63/68

59

MODL DEERLENDRME

Bu blmde, modlde anlatlan renme faaliyetleri ile elde edilmek istenenyeterlikleri kazanp kazanamadmz llecektir.

A- YETERLK LME

Modl yeterliimizin belirlenmesi iin, aadaki uygulama rneklerine benzeruygulamalar yapmamz istenebilir. Bylece, hedef davranlar ne lde kazandmzgrebiliriz.

UYGULAMA 1 : renim grdnz alan/dal tantan bir site hazrlaynz. Siteiinde; alan/dal tantan bilgiler, ders ierikleri, retmenlerinizin ve alan/dal rencilerininresimlerinin bulunmas ve bu almay yaparken tablo, stil ve ktphane elerindenfaydalanmanz tavsiye edilir.

UYGULAMA 2 : Ailenizi tantan bir site hazrlaynz. Site iinde; ailenizi tantan bilgiler, aile bireylerinin resimlerinin bulunmas ve bu almay yaparken tablo, stil vektphane elerinden faydalanmanz tavsiye edilir.

MODL DEERLENDRME


64/68

60

B - PERFORMANS TEST

rencinin

Ad Soyad :

Numaras :

Balama saati :.

Bitirme saati :.

Sre :.... dk.

AIKLAMA: Aada listelenen ilem basamaklarndaki davranlar rencidegzlemlediyseniz EVET stununa, gzlemleyemediyseniz HAYIR stununa X iaretikoyunuz

DEERLENDRME LTLER Evet Hayr

WEB tasarm editrn altrabildiniz mi?

Tanmlanan site iinde yeni bir sayfa oluturabildiniz mi?

Sayfa grnm modlarn deitirebildiniz mi?

Sayfa iine tablo ekleyebildiniz mi?

Harici dosyalardan tablo iine veri aktarabildiniz mi?

Tablo hcrelerini seebildiniz mi?

Tablo hcrelerini tayabildiniz mi?

Tablo hcrelerini kopyalayabildiniz mi?

Tablo hcrelerini biimlendirebildiniz mi?

Tablo iine satr / stun ekleyebildiniz mi?

Tablo iindeki verileri alfabetik / saysal olarak sralayabildinizmi?

Oluturulan tabloyu harici bir program iine aktarabildiniz mi?

Tablo iine resim ekleyebildiniz mi?

Tabloya d kenarlk (hat) ekleyebildiniz mi?

Farkl grnm modlarnda tablo oluturma ve dzenleyebildiniz

mi?Sayfa iinde taslak resim kullanabildiniz mi?

Sayfa iinde dhili stil oluturabildiniz mi?

Dhili stilleri harici stile dntrebildiniz mi?

Sayfa iinde harici stiller oluturabildiniz mi?

Etiket kombinasyonlar iin stiller oluturabildiniz mi?

Mevcut bir stili dzenleyebildiniz mi?

Stil ile arkaplan ayarlar

n

dzenleyebildiniz mi?


65/68

61

Ktphane esi oluturabildiniz mi?

Ktphane esini sayfa iine aktarabildiniz mi?

Ktphane esini silebildiniz mi?

Silinen ktphane esini, daha nceden enin kullanldsayfalar araclyla yeniden oluturabildiniz mi?

Ktphane esinin ieriini deitirebildiniz mi?

Ktphane esini referans alan sayfalar iin gncellemeyapabildiniz mi?

WEB tasarm editrn kapatabildiniz mi?

DEERLENDRME

retmenimiz, yukardaki performans testine benzer bir lme arac ile modlyeterliine ula p ulaamadmz lecektir. Bu deerlendirme iin retmenimize

bavurmalyz.


66/68

62

CEVAP ANAHTARLARI

RENME FAALYET 1 CEVAP ANAHTARI

1 D2 Y3 Y4 Y5 D6 Y7 Y


1 D

2 Y3 D4 Y


1 Y2 D3 Y

CEVAP ANAHTARLARI


67/68

63

NERLEN KAYNAKLAR GMTEPE Yavuz, Dreamweaver le WEB Tasarm, Trkmen Kitabevi,

2002.

NAN Yksek, DEMRL Nihat, Macromedia Dreamwaver MX 2004,SekinYaynclk, 2005.

TARHAN Cenk, Dreamweaver, Pusula Yaynclk, 2006. http://www.bilgisayardershanesi.com http://www.bilgisayardershanesi.com http://www.macromediaturk.com http://www.WEBdersleri.com

NERLEN KAYNAKLAR


68/68

KAYNAKA

BABA Hakan. WEB Tasarm Ders Notlar, Bursa 2006. GMTEPE Yavuz, Dreamweaver le WEB Tasarm, Trkmen Kitabevi,

2002.

OVASEVEN Melih, WEB Tasarm Ders Notlar, Bursa 2006. PAGE K. Annwm, Dreamwaver MX 2004 Kaynandan Eitim, stanbul

2005.

TARHAN Cenk, Dreamweaver, Pusula Yaynclk, 2006.

KAYNAKA

web tasarim editoru 2

Documents