T.C.

MLL ETM BAKANLII

BLM TEKNOLOJLER

WEB TASARIM EDTRNDE LER

UYGULAMALAR
482BK0174

Ankara, 2012

Bu modl, mesleki ve teknik eitim okul/kurumlarnda uygulanan ereve

retim Programlarnda yer alan yeterlikleri kazandrmaya ynelik olarak
rencilere rehberlik etmek amacyla hazrlanm bireysel renme
materyalidir.

Mill Eitim Bakanlnca cretsiz olarak verilmitir.

PARA LE SATILMAZ.

NDEKLER
AIKLAMALAR .................................................................................................................... ii
GR ....................................................................................................................................... 1
RENME FAALYET-1 ..................................................................................................... 3
1. CSS ....................................................................................................................................... 3
1.1. Web Tasarm Editr ile Sayfa inde CSS Kullanm ................................................. 3
1.2. Web Tasarm Editr ve Harici CSS Sayfalar ............................................................. 5
1.3. Davranlar .................................................................................................................... 7
1.3.1.Davran Trleri ...................................................................................................... 7
1.3.2. Ziyareti Taraf Etkileim ...................................................................................... 7
1.3.3. Davranlar Ekleme ve Dzenleme ...................................................................... 9
UYGULAMA FAALYET .............................................................................................. 17
LME VE DEERLENDRME .................................................................................... 19
RENME FAALYET-2 ................................................................................................... 20
2. SPRY .................................................................................................................................. 20
2.1. SPRY Framework ....................................................................................................... 20
2.2. SPRY Nesneleri Ekleme ve Dzenleme ..................................................................... 20
UYGULAMA FAALYET .............................................................................................. 27
LME VE DEERLENDRME .................................................................................... 29
RENME FAALYET-3 ................................................................................................... 30
3. FORMLAR......................................................................................................................... 30
3.1. Formlar ile alma..................................................................................................... 30
3.2. Form Nesneleri............................................................................................................ 31
3.2.1. Form Nesneleri Eklemek ve Biimlendirmek ..................................................... 31
3.2.2. Dorulama Aralar ............................................................................................. 41
UYGULAMA FAALYET .............................................................................................. 46
LME VE DEERLENDRME .................................................................................... 48
RENME FAALYET-4 ................................................................................................... 50
4. STE YNETM VE YAYINI ......................................................................................... 50
4.1. Site Ynetimi .............................................................................................................. 50
4.2. Siteleri Yaynlama....................................................................................................... 51
4.2.1. Yaynlama Seenekleri ........................................................................................ 52
4.2.2. Siteye Dosya Yklemek ve ndirmek .................................................................. 53
UYGULAMA FAALYET .............................................................................................. 54
LME VE DEERLENDRME .................................................................................... 55
MODL DEERLENDRME .............................................................................................. 56
CEVAP ANAHTARLARI ..................................................................................................... 58
KAYNAKA ......................................................................................................................... 59

AIKLAMALAR
AIKLAMALAR
KOD

482BK0174

ALAN

Biliim Teknolojileri

DAL/MESLEK

Web Programcl

MODLN ADI

Web Tasarm Editrndeleri Uygulamalar

Bu modlweb tasarm editr ile sayfa ierisindeki CSS ve
SPRY nesneleri dzenleyip web sitesini internet ortamnda
kullanmnn ve beceri kazandran renme materyalidir.

MODLN TANIMI
SRE

40/32

N KOUL

Web Tasarm Editrne Girimodln tamamlam olmak

YETERLK

Nesne ilemlerini yapmak ve site ynetimini gerekletirmek

Genel Ama
renci bu modl ile gerekli ortam salandnda; Web
tasarm editr ile sayfa ierisindeki CSS ve SPRY nesneleri
dzenleyip
web
sitesini
internet
ortamnda
yaynlayabileceksiniz.

MODLN AMACI

Amalar
1. CSS dosyalar dzenlemek ve sayfamza javascript kodlar
ekleyebileceksiniz.
2. SPRY nesneler kullanabileceksiniz.
3. Form nesneleri kullanabileceksiniz.
4. Web sitesini ynetmek ve internette yaynlayabileceksiniz.

ETM RETM
ORTAMLARI VE
DONANIMLARI

Ortam:Bilgisayar Laboratuar
Donanm:Bilgisayar, internet, projeksiyon

LME VE
DEERLENDRME

Modl iinde yer alan her renme faaliyetinden sonra verilen

lme aralar ile kendinizi deerlendireceksiniz.
retmen modl sonunda lme arac (oktan semeli test,
doru-yanl testi, boluk doldurma, eletirme vb.) kullanarak
modl uygulamalar ile kazandnz bilgi ve becerileri
lerek sizi deerlendirecektir.

ii

GR
GR
Sevgili renci,
Gnmzde nternet kullanmnn hayatmzda ok nemli hale gelmesiyle birlikte
web sayfalarnn ierii kadar grsel zenginlii de byk nem tamaktadr. Bu da web
tasarmnn etkinliini arttrmaktadr.
Stil sayfalarnn web tasarmndaki etkinliinin artmas, web tasarm editrleriyle
entegrasyonu da beraberinde getirmitir.
Bu modlle; web sayfalar iinde faydalanlan CSS kodlarnn web tasarm editrnde
nasl kullanlacan, web tasarm editrnn size sunduu eitli davranlarn sitenizi
ziyaret eden kiilerin etkileimiyle ne tr olaylar gerekletireceini, bir javascript
ktphanesi olan spry erevelerinin sitenizde kullanmnn nasl olacan reneceksiniz.
AyrcaHtml ile Gelimi Web lemleri modlnde renmi olduunuz formlarnweb
tasarm editrnde nasl kullanlacan ve son olarak da hazrlam olduunuz web sitesinin
ynetimi ve yaynlanmasyla ilgili nemli noktalar reneceksiniz.
Her renme faaliyetinin sonunda kendinizi deerlendirebileceiniz lme ve
deerlendirme sorular, renmi olduunuz konuyu pekitirmeniz iin ise uygulama
faaliyetleri yer almaktadr. Modl sonunda da ierik kapsamnda neler rendiinize dair
kendinizi test etmenizi salayacak Modl Deerlendirme sorular bulunmaktadr. Bunlar
baar ile tamamladnz takdirde bu modl tamamlam olacaksnz. Modlle ilgili yardm
almaya ihtiya duyduunuz konularda retmeninize bavurmay ihmal etmeyiniz.

RENME FAALYET1
RENME FAALYET-1
AMA
CSS dosyalar dzenlemek ve sayfamza javascript kodlar eklemek

ARATIRMA

Stil dosyalarnn nemini aratrnz.

nternetten javascript kodlar bularak web tasarm editrnde hazr olarak

bulunan javacsript kodlar arasnda ne tr farklar olduunu snfta tartnz.

1. CSS
nceki modllerden de hatrlayacamz gibi; CSS (Cascading Style Sheets),
hazrlamakta olduunuz sayfalar iin istenildii zaman kullanlmak zere ablonlar
oluturmaya yarar. Bylelikle site ii stillerle ilgili bir deiiklik yapmamz gerektiinde tm
sayfalarda deiiklik yapmak yerine, mevcut CSS zerinde deiiklik yaparak tm sayfalara
etki etmesi salanmaktadr. Bu da programcnn iini olduka kolaylatrmaktadr.
CSS kodlarnn en nemli zelliklerinden birisi farkl trlerde kullanlabilme
zelliidir. stee gre tek bir eye, tm sayfaya veya site ierisinde kullanlan tm HTML
dosyalarna etki edebilme zelliine sahiptir. CSS kodlar sayfa iinde kullanlabildii gibi
harici olarak da tanmlanp istenildii zaman arlarak kullanlabilme zelliine sahiptir.
Stil ablonu(CSS) modlnde stil sayfalarnn nasl oluturulacan renmitik. Bu
blmde web tasarm editr ierisinde CSSnin nasl kullanlacan reneceiz.

1.1. Web Tasarm Editr ile Sayfa inde CSS Kullanm

Web tasarm editrn kullanarak sayfa iinde stiller oluturabilirsiniz. lgili panele
eriebilmek iin Pencere mensnden CSS stilleri veya klavyeden Shift+F11 tular
kullanlr.
Yeni bir sayfa aldnda da sayfann alt tarafnda yer alan zellikler blmndeki
CSS ksmndan CSS paneline eriilebilir.

ekil 1.1: CSS ayarlar zellikler blm

Hedeflenen kural blmnden satr ii stil seilip Kural Dzenle dmesine

tkland zaman karnza ekil1.2deki pencere gelecektir.

ekil 1.2: Yeni CSS kural penceresi

Buradan seici tr ve seici iin bir isim belirlendikten sonra Kural tanm ksmndan
da Yalnzca bu belgede seenei seilerek Tamam dmesine basld zaman sayfanzda
istediiniz stil zelliklerini belirleyeceiniz pencere alacaktr (ekil 1.3).

ekil 1.3: CSS kural tanmlamas penceresi

Buradan sayfanzda olmasn istediiniz zellikleri belirleyerek tamam dmesine

tklanr.
Oluturduunuz stille ilgili zellikleri CSS Stilleri paneline tklayarak grebilirsiniz.

ekil 1.4: CSS stilleri paneli

Kurallar bal altnda yer alan oluturmu olduumuz (deneme) stili zerinde farenin
sa tuuna tklayarak alan menden Dzenle seenei tklanarak yeni zellikler
ekleyebilir var olan zellikleri kaldrabilir ve deitirebilirsiniz.

1.2. Web Tasarm Editr ve Harici CSS Sayfalar

Stiller sayfa iinde kullanlabildii gibi harici olarak da tanmlanp istenildii zaman
arlp kullanlabilme zelliine sahiptirler.
(

Harici stil sayfas oluturmak iin CSS stilleri panelini ap oradan Yeni CSS Kuraln
)seerek Yeni CSS Kural penceresini anz. (ekil 1.2)

ekil 1.5: Yeni CSS kural penceresi kural tanm blm

Seici tr, seici adn belirleyip, Yeni CSS kural penceresinin alt tarafnda yer alan
Kural tanm ksmndan Yeni stil sayfas dosyas seeneini seip tamam dmesine
bastnz zaman karnza ekil 1.6 daki Stil Sayfas dosyasn farkl kaydet penceresi
gelecektir.

ekil 1.6: Stil sayfas dosyasn farkl kaydet penceresi

Dosya ad yazlp kaydet dmesine basld zaman karnza gelen pencereden

istediiniz stilleri belirleyip tamam dmesine basldnda, istediiniz zaman istediiniz
sayfada kullanabileceiniz harici stil tanmlanm olacaktr.
nceden hazrlanm olan harici stil dosyasn sitenizde kullanmak iin; CSS stilleri
panelinin sa alt kesinde bulunan Stil sayfasn ekle( ) dmesine tklanr.

ekil 1.7: Harici stil sayfasn ekle penceresi

Harici stil sayfasn ekle penceresinden eklenmek istenen stil dosyas seilir ve
Tamam dmesine tklandnda stil dosyas sayfaya eklenmi olur.

1.3. Davranlar
Web tasarm editr kod yazmaya gerek kalmadan belgelere Javascript kodlar
yerletirir. Bylelikle ziyaretiler web sayfalar zerinde birtakm grevler balatabilirler.
Bunlar, davranlar sayesinde gereklemektedir. Davran, bir olay veya olay sayesinde
tetiklenen bir eylemin birleimidir. rnein sayfay ziyaret eden bir kiinin sayfada yer alan
bir buton zerine geldii veya tklad zaman gerekleen renk deiiklii bir davrantr.
Web tasarm editrn kullanarak sayfaya davranlar eklemek iin Davranlar
paneli kullanlr.
Davranlar panelinin grntlenmesi iin Pencere mensnden Davranlar veya
klavyeden Shift+F4 tu grubu kullanlr.

ekil 1.8: Etiket denetimi paneli

1.3.1.Davran Trleri
Web tasarm editrnde kullanabileceiniz davran trleri:

1.3.2. Ziyareti Taraf Etkileim

Ziyaretilersayfa iinde gezinirken programc tarafndan daha nceden belirlenmi
noktalarda tarayc bir olay retir ve yant olarak bir JavaScript kodunu arp
armayacan denetler.
Bir davran oluturulduunda bu davranlar tetikleyecek olaylarn neler olacann
seilmesi gerekmektedir. Olaylar, ziyaretilerin sayfanzda bir ilem gerekletirdiini
gsteren mesajlardr.
Davranlar panelinin Eylemler (+) mensnde listelenen eylemlerle ilikilendirilmi
bir takm olaylar mevcuttur.

Bu olaylarn neler olduu ekil 1.9da gsterilmitir.

ekil 1.9: Ziyareti etkileimi srasnda gerekleen olaylar

Web tasarm editrnde kullanlan olaylar ve grevleri aada verilmitir.

onBlur:Odaklanmann kaybedilmesi durumunda meydana gelir.

onClick:Kullanc nesne zerinde fareye tklad zaman olumaktadr.
onDblClick:Kullanc nesne zerine ift tklad zaman meydana gelmektedir.
onError:Sayfann yklenmesi srasndaoluan hatalarda meydana gelen
olaydr.
OnFocus:mlecin odakland durumda meydana gelmektedir.
onKeyDown:Klavyedeki bir tua basld zaman oluan olaydr.
onKeyPress:Bir tua baslp brakld zaman gereklemektedir.
onKeyUp:Bir tuun braklmas durumunda meydana gelen olaydr.
onLoad:Sayfann yklendii durumu gsteren olaydr.
onMouseDown:Kullancnn nesne zerinde farenin herhangi bir tuuna bast
anda gerekleerek tetiklenen olaydr.
onMouseMove:Kullancnn fare iaretisini bir nesne zerinde hareket ettirdii
zaman gerekleen olaydr.
onMouseOut:Farenin odaklanm olduu elemandan uzaklamas durumunda
meydana gelmektedir.
onMouseOver:Fare imlecinin nesne zerine odaklanmas durumunda
gerekleen olaydr.
onMouseUp:Nesne zerinde baslm olan fare dmesi brakld durumda
gerekleen olaydr.

onUnload:Dkmann pencere veya ereveden atldnda gerekleen

olaydr.

lgili nesneye bal olarak Olaylar mensnde farkl olaylar grntlenebilir.

1.3.3. Davranlar Ekleme ve Dzenleme

AP esini srkle

AP eleri (mutlak konumlu eler), kendisine atanm mutlak bir konuma sahip,
zellikle bir div etiketi ya da baka herhangi bir etiket olan bir HTML sayfas eleridir. AP
eleri metin, grnt ya da HTML belgelerinin gvdesine yerletirebileceiniz dier
herhangi bir ierik olabilir.
Sayfanza eklemi olduunuz bir AP esini srkleyerek tama ilemi yapabilirsiniz.
Sayfanza eklemi olduunuz AP esini sabit durumundan karmak iin Davranlar
panelinden
simgesine tklayp alan listeden AP esini srkle seenei ile istediiniz
konuma srkleyebilirsiniz.

Atla mens

Oluturduunuz bir atla mensne(jump men) davran eklemek iin kullanlan

seenektir. Oluturulan Atla mens seilir ve Davranlar panelinden
simgesine
tklayp alan listeden Atla Mens seeneine tklanr. Men zerinde istenilen deiiklik
yapldktan sonra olay tetikleyecek davran seilir.

Atla mens git

Atla mensnn eklenmesi srasnda menden sonra git dmesi ekle seeneinin
seilmi olduu durumlarda aktif olur. Men zerinde istenilen deiiklik yapldktan sonra
olay tetikleyecek davran seilir.

Alr mesaj

Sayfanza alr mesaj eklemek iin Davranlar panelinden

simgesine tklayp
alan listeden Alr Mesaj seilir. Gelen pencere iindeki mesaj alanna mesajnz yazp
Tamamdmesine tklanr (ekil 1.10).

ekil 1.10: Alr mesaj ekleme penceresi

Alr mesaj eylemi OnLoad ksmnda altndan, sayfay taraycda

grntlediimizde sayfa yklendii anda aadaki gibi bir mesajla karlalacaktr.

Efektler

Sayfanza eklemi olduunuz nesnelere efektler ekleyebilir ve web sitenizin daha

zengin bir grnme kavumasn salayabilirsiniz.
Byt/Klt, Ez, Grn/Soldur, Kaydr, Perdele, Salla ve Vurgula eklinde efekt
trleri mevcuttur.
Modl iindeVurgula efekti ve Sallaefekti ayarlarnn nasl yapldn reneceiz.
Vurgula efekti ile nesnelerin arka planlarna renk vererek bir hareket oluturabilirsiniz.
Davranlar panelinden
simgesine tklayp alan listeden Efektler, ardndan da
Vurgula seenei seilir. Hedef e ile hangi nesneye vurgulama yaplaca belirlendikten
sonra dier ayarlar yaplp Tamam dmesine tklanr.

10

ekil 1.11: Vurgula efektiararlar penceresi

Salla Efekti ile nesneleri saa sola sallayabilirsiniz. Bunun iin Davranlar
panelinden
simgesine tklayp alan listeden Efektler, ardndan da Titre seenei seilir.
Hedef e ile hangi nesnenin sallanaca belirlendikten sonra Tamam dmesine tklanr.

ekil 1.12.: Salla efekti ayar penceresi

Eklentiyi denetle

Sayfanza eklemi olduunuz flash filmlerini ziyaretilerin izleyebilmesi iin birtakm

eklentiler gereklidir. Eklentiyi denetle seenei ile gerekli eklentilerin olup olmadn
kontrol edebilirsiniz.
Bunun iin Davranlar panelinden
Denetle seenei seilir.

simgesine tklayp alan listeden Eklentiyi

11

ekil 1.13: Eklentiyi denetle penceresi

Grntleri nceden ykle

Grntleri nceden ykle seenei, sayfann ilk ald anda gsterilmeyen

grntleri nbellee alp grntlenme sresini ksaltmak iin kullanlr.
Grntleri nceden ykle davran eklemek iin Davranlar panelinden
simgesine tklayp alan listeden Grntleri nceden ykle seenei seilir.

ekil 1.14: Grntleri nceden ykle penceresi

nceden yklenmesi istenilen grnty semek iin Gzat dmesine tklayp

grnt dosyalar seilir. + iareti ile ekleme ilemine istee gre devam edilir.

Javascript ar

Javascript ar davran eklemek iin Davranlar panelinden

simgesine tklayp
alan listeden Javascript ar seenei seilir. Alan pencerede Javascript yazan alana
script kodu yazlp tamam dmesine tklanr.

12

ekil 1.15: Javascript ar penceresi

Metni ayarla

Web tasarm editrnde davranlar kullanarak istediiniz bir metnin durum

ubuunda grntlenmesini salayabilirsiniz.
Durum ubuunda bir metni eklemek iin Davranlar panelinden
simgesine
tklayp alan listeden Metni ayarla, ardndan da Durum ubuu Metni Ayarlaseilir. ekil
1.16deki alana mesajnz yazp tamam dmesine tklanr.

ekil 1.16: Durum ubuu metni ayarla penceresi

Sayfann taraycdaki grnts ekil 1.17deki gibi olacaktr.

ekil 1.17: Durum ubuu metni rnei

Metni ayarla davran altnda yer alan dier bir seenek ise Metin Alan Metni
Ayarladr. Bunun iin sayfamza bir form ve metin alan ekleyelim. Metin alann seip
Metin alann ayarla penceresinden yeni metin girilerek bu davran gerekleir.

13

ekil 1.18: Metin alan metni ayarla penceresi

Tarayc penceresini a

Sitenize ait olan veya herhangi bir web sayfasnn belirlediiniz llerde Sayfanz
yklendii zaman harici olarak almasn istediiniz durumlarda veya bir balantya
tkland zaman o balantnn sizin belirleyeceiniz llerdeki bir pencerede almasn
istediiniz durumlarda kullanlr.Bunun iin Davranlar panelinden
simgesine tklayp
alan listeden Tarayc Penceresini A seilir. ekil 1.19deki pencere alacaktr.

ekil 1.19: Tarayc penceresini a penceresi

Nitelikler ksmndan istediiniz ara ubuklarnn tarayc penceresinde grntlenip

grntlenmeyeceini belirleyebilirsiniz.
Tamam dmesine basp taraycy altrdmzda Milli Eitim Bakanlnn
internet sitesi belirlenen pencere l ve zelliklerine gre alacaktr.

14

URLye git

Bir eye (metin, resim, v.s) URLye Git davran ekleyerek istediiniz bir adrese
gitmesini salayabilirsiniz. Bunun iin Davranlar panelinden
simgesine tklayp alan
listeden URLye git seilir. Alan pencereden gitmesini istediiniz URL adresi seilip
tamam dmesine tklanr.

ekil 1.20: URLye git penceresi

zellii verilerek de sayfa yklendii anda istediiniz

URL adresine ynlendirilmesini de salayabilirsiniz.

zellii deitir

Bir enin zelliini deitirmek iin kullanlr. Bir enin zelliini deitirmek iin
Davranlar panelinden

simgesine tklayp alan listeden zellii Deitir seilir.

15

ekil 1.21: zellii Deitir penceresi

e Tr blmnden zellii deitirilecek olan enin tr, e kimlii

blmnden ise zellii deitirilecek olan e seilir. Se ksmndan deitirilecek zellik
ve yeni deer ksmndan ise zelliin yeni deeri girilip Tamam dmesine tklanr.

eleri gster/gizle

Sayfaya eklenmi olan elerin gsterilip gizlenmesini salar. Bir eye gster/gizle
davran eklemek iin Davranlar panelinden
simgesine tklayp alan listeden eleri
Gzter/Gizle seilir. Gizlemek istediiniz enin zerine tklayp Gizle dmesine baslr.

ekil 1.22: eleri Gster/Gizle penceresi

ile

enin

gster/gizle eylemi gerekleir.

16

zerine

gelip

tkland

zaman

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

neriler

Web tasarm editrn altrnz.

stiklal Marmzn ilk drt ktasn
yaznz ve sayfay stiklal.html olarak
kaydediniz.
stiklal.html
sayfasna
aadaki
zelliklerde
sayfa
ii
CSS
oluturunuz.Seici ismini de stiklal
olarak belirleyiniz.
Arka plan rengi #6CC
Font family: Courier New, Courier,
monospace
Font color: #006
Font size: 12
stiklal.html sayfas yklendii zaman
Ne Mutlu Trkm Diyene zdeyiini
alr
mesaj
olarak
ekranda
grntleyiniz.
Sayfaya Trk bayra grnts
ekleyiniz ve bu grntye tkland
zaman
grntnn
bymesini
salaynz.
Durum ubuuna stiklal Mar
mesajn yazdrnz.
Web sayfanz yklendii zaman
meb.gov.tr
adresinin
500x500
ebatlarnda harici olarak almasn
salaynz.

F12 tuu ile taraycdaki halini grnz.

zellikler blmnden
dzenleyiniz.

CSS

kural

Davranlar panelini kullannz.

Efektler Byt/klt seerek

Metni Ayarla Durum ubuu Metni

Ayarla
Tarayc Penceresini A Davrann
Kullannz.

17

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin
Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi
deerlendiriniz.
1.
2.
3.
4.

Deerlendirme ltleri
Web tasarm editrn kullanarak sayfa iinde CSS kullandnz
m?
Harici CSS sayfalar oluturdunuz mu?
Web tasarm editrn kullanarak nesneler zerinde davranlar
oluturdunuz mu?
Ziyareti tarafl etkileimde kullanlan olaylarn neler olduunu
rendiniz mi?

Evet

Hayr

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz.
Kendinizi yeterli grmyorsanz, renme faaliyetini tekrar ediniz. Btn cevaplarnz
Evet ise lme ve Deerlendirmeye geiniz.

18

LME VE DEERLENDRME
LME VE DEERLENDRME
Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen
bilgiler doru ise D, yanl ise Y yaznz.
1.

( ) CSS stilleri paneline klavyeden Ctrl+F1 tular kullanlarak eriilir.

2.

( ) Web tasarm editr kullanlarak harici stil sayfalar oluturulabilir.

3.

( ) mlecin odakland durumda meydana gelen olay OnFocusdur.

4.

( ) Hazrlamakta olduunuz sayfaya alr mesaj eklemek iin Ekle mens kullanlr.

5.

( ) Javascript ar davrann kullanarak istenilen javascript kodunun sayfada

kullanlmas salanr.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap
verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz.
Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

19

RENME FAALYET-2
RENME FAALYET-2
AMA
Spry nesnelerini kullanabileceksiniz.

ARATIRMA

Web sayfalarnda kullanlabilecek grsel efektleri ve men trlerini aratrnz.

2. SPRY
2.1. SPRY Framework
Spry erevesi, ziyaretilere grsel olarak daha gelimi, daha etkili web sayfalar
hazrlayp sunmak amacyla kullanlan bir JavaScript ktphanesidir. Spry kullanarak
hazrlamakta olduunuz belgelerinize basitJavaScriptkodlaryla eitli trlerde efektler
ekleyebilir ve sitenizin daha zengin bir grnme sahip olmasn salayabilirsiniz.
Spry ereveleri kullanlarak hazrlanm olan sayfalar ziyaretilerin yenilemesine
gerek kalmadan kendi kendilerini yenileme zelliine sahiptirler.

2.2. SPRY Nesneleri Ekleme ve Dzenleme

Sayfanza Spry nesnelerini iki farkl yol kullanarak ekleyebilirsiniz.

Ekle mensnden Spry seenei ile

Ekle panelinden(

Spry men ubuu eklemek:

) Spry seenei ile

Spry men ubuu fare ile zerine gelindii zaman alt menlerin almasn salayan
butonlar oluturmak iin kullanlr.
Spry men ubuu eklemek iin imleci editr sayfanzda men ubuunu eklemek
istediiniz yerekonumlandrpEkle mensnn altnda yer alan Spryseenekleri iindenSpry
Men ubuu seenei tklanr. Spry men ubuunun ynn (yatay/dikey)
belirleyeceiniz pencere alacaktr (ekil 2.1).

20

ekil 2.1: Spry men ubuu penceresi

stediiniz mizanpaj eklini seip Tamam dmesine tkladnzda spry men ubuu
ekil 2.2deki gibi sayfanza eklenecektir.

ekil 2.2: Yatay dzende spry men ubuu eklemek

Eklemi olduunuz men ubuunda dzenlemeler yapmak iin men ubuunun sol
st kesinde yer alan mavi eride tklanr ve ekil 2.3deki zellikler blmnn almas
salanr.

ekil 2.3: Men ubuu zelliklerini dzenleme blm

Not:zellikler ksm web tasarm editr ekrannda grntlenmemise Pencere

mensnden zelliklereveya klavyeden Ctrl+F3 tularna basmanz gerekir.
smini deitirmek istediiniz enin metin blmne gelip istediiniz ismi
yazabilirsiniz.

21

Yeni bir men esi eklemek iin( ), varolan bir men esini kaldrmak iin ise
( ) iaretlerine tklamak gerekmektedir.eyi yukar/aa ta(
) iaretleri ise men
elerinin yerlerini deitirmek, altta bulunan eyi yukarya, stte bulunan eyi ise
aaya tamak iin kullanlr.
ksm ile ba kurulacak olan sayfa, dosya
belirlenerek link verilmesi salanr.
Hedef, seenei ile sayfann almasn istediimiz konum belirlenir.(_Blank, _Parent,
_Self, _Top seeneklerinden istenilen bo alana yazlr.)
Spry men ubuunun zellikler blmnde yer alan Stilleri Kapat dmesi ile stiller
kapatlp men daha ayrntl bir ekilde grntlenir.

Stilleri A dmesine tklayarak grnty eski haline getirebilirsiniz.

Eklemi olduunuz yatay men ubuunu dikey men ubuuna dntrmek iin
ncelikle sayfann herhangi bir yerine dikey men ubuu eklemek gerekir.

22

Dikey men ubuunu ekledikten sonra sayfa kaydedilir ve kaydetme ileminden

sonra da eklemi olduunuz dikey men ubuunu silmeniz gerekmektedir.
Dikey men ubuunu sildikten sonra Yatay men ubuu zerindeki mavi eritte sa
tua tklayarak alan menden CSS Stilleri ardndan da MenuBarVertical seeneine
tklanr. Bylece yatay olarak eklemi olduunuz men ubuu dikey men ubuuna
dntrlm olur.

Eklemi olduunuz Spry menlerinin yaz rengi, zemin rengi v.s gibi zelliklerini de
CSS yardm ile deitirip dzenleyebilirsiniz. Bunun iin zellikler blmnde yer alan
CSS ksm veya fare sa tuundan CSS stilleri kullanlr.

Spry sekmeli paneller eklemek

Web tasarm editrn kullanarak sitenize Spry sekmeli paneller ekleyebilirsiniz.

Web sayfanza sekmeli panel eklemek iin Ekle mensnn Spry komutu altnda yer
alan Spry Sekmeli Paneller seeneine tklanr.

ekil 2.4: Spry sekmeli panel eklemek

23

Spry sekmeli panellerle ilgili dzenlemeleri yapacamz zellikler penceresinin

almasn salamak iin spry sekmeli panellerin st ksmnda yer alan mavi erite tklanr ve
ekil 2.5dekizellikler blm grntlenir.

ekil 2.5: Spry sekmeli paneller zellikler blm

Yeni bir sekme eklemek iin( ), varolan bir sekmeyi kaldrmak iin ise ( )
iaretlerine tklamak gerekmektedir.Sekmeyi yukar, aa ta(
) iaretleri ise sekmelerin
yerlerini deitirmek iin kullanlr.
Dzenlemek istediiniz sekmenin zerine gelip gerekli deiiklikleri yapabilir,
istediiniz ierii oluturabilirsiniz.
Sekme balklarnn zerine gelindii zaman beliren ( )simgesine tklayarak
sekmeler aras gei yapabilir, o bala ait ierii etkinletirip dzenleyebilirsiniz.

stediiniz sekme veya yazya link vermek iin, link verilecek blm seilip farenin
sa tuuna tklayarak alan menden Ba olutur seilerek istenilen sayfa, resim veya
dosyaya ynlendirmesinin yaplmasn salayabilirsiniz.

Spry akordeonu eklemek

Akordeon aracn kullanarak alp kapanan paneller oluturabilirsiniz.

almakta olduunuz sayfaya Spry Akordeonu eklemek iin, Ekle mensndeki
Sprykomutuna tklayp alan menden Spry Akordeonu seilir.

24

ekil 2.6: Spry akordeonu eklemek

Spry akordeonunun zellikler blmnden yeni etiketler ekleyebilir, mevcut etiketleri

silebilir ve etiketlerin yerlerini deitirebilirsiniz.
stediiniz etiketin ierii ile ilgili dzenleme yapmak iin fare ile baln zerine
gelindii zaman beliren ( ) simgesine tklayarak etiketler aras gei yapp ierii
dzenleyebilirsiniz.Etiket1,etiket2, erik1, erik2 yazlarn silip istediinizi yazabilirsiniz.

Spry ara ipucu

Kullanclarn, site zerinde herhangi bir nesnenin zerine gittii zaman bir aklama
grmesi istenildii zaman kullanlr.
almakta olduunuz sayfaya Spry Ara ipucu eklemek iin, Ekle mensndeki
Sprykomutuna tklayp alan menden Spry Ara pucu seilir.

25

ekil 2.7: Spry Ara pucu

Ara ipucu ierii buraya gelecek yazsnn olduu ksma tklayp istediiniz
aklamay yazabilirsiniz.
Spry ara ipucu ile ilgili dzenlemeleri yapacamz zellikler penceresinin almasn
saplamak iin spry ara ipucunun st ksmnda yer alan mavi erite tklanr ve ekil
2.8dekizellikler blm grntlenir.

ekil 2.8: Spry Ara ipucu zellikler blm

zellikler blmnde yer alan efekt ksmndan spry ara ipucu grntlenirken
kullanlmak istenilen efekt seilir.
Tetikleyici ksmnda ipucunun grntlenmesini salayacak tetikleyici seilir.
Fareyi izle ksm ile tetikleyici zerine fare ile gidilirken spry ara ipucunun fareyi
takip etmesi salanr.

Spry daraltlabilir panel

Sekme oluturarak sekmeye tkland zaman istenilen bir ieriin gsterilip

gizlenebilmesi iin kullanlr.
almakta olduunuz sayfaya Spry Daraltlabilir panel eklemek iin, Ekle
mensndeki Sprykomutuna tklayp alan menden Spry Daraltlabilir Panel seilir.

ekil 2.9: Spry daraltlabilir panel

Sekme ksmna istenilen balk, ierik ksmna ise sekmeye tkland zaman
grntlenmesi istenen ierik yazlarak oluturulur.

26

UYGULAMA FAALYET
UYGULAMA FAALYET

Resim 2.1.Men

Resim 2.2. Sekmeli Panel

Resim 2.3. Akordeon panel

Resim 2.4. Daraltlabilir men

lem Basamaklar

neriler

Resim 2.1 de grld gibi bir men

hazrlaynz
Resim 2.2 de grld gibi bir sekmeli
panel oluturunuz.
Resim 2.3 de grld gibi bir spry
akordeonu oluturunuz.
Resim 2.4 de grld gibi bir men
hazrlaynz

Spry men ubuu eklenecektir.

Spry sekmeli panel eklenip ierik
oluturulacaktr.
Ekle mensnden- spry akordeon
seilecektir.
Ekle mensnden- spry daraltlabilir
panel seilecektir.

27

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin
Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi
deerlendiriniz.
1.
2.
3.
4.
5.

Deerlendirme ltleri
Spry men ubuu eklediniz mi?
Spry sekmeli paneller eklediniz mi?
Spry akordeonu eklediniz mi?
Spry ara ipucu oluturdunuz mu?
Spry daraltlabilir panel eklediniz mi?

Evet

Hayr

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz.
Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz
Evet ise lme ve Deerlendirmeye geiniz

28

LME VE DEERLENDRME
LME VE DEERLENDRME
Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen
bilgiler doru ise D, yanl ise Y yaznz.
1.

( ) Spry menleri oluturmak iin Ekle mensnden Ortam komutu seilir.

2.

( ) Spry menleri yalnzca yatay ekilde oluturulur.

3.

( ) Spry akordeonu ekleyerek alp kapanan paneller oluturabilirsiniz.

4.

( ) Kullanclarn, site zerinde bir renin zerine fare ile gittii zaman bir aklama
grntlenmesi istendii durumlarda Spry ara ipucu oluturulmas gerekir.

5.

( ) almakta olduunuz sayfaya Spry Daraltlabilir panel eklemek iin, Ekle

mensndeki Spry komutuna tklayp alan menden Sprysekmelin Panelseilir

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap
verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz.
Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

29

RENME FAALYET-3
RENME FAALYET-3
AMA
Form nesnelerini kullanabileceksiniz.

ARATIRMA

Web sayfalarnda formlarn kullanm amalarn ve nasl kullanldn

aratrnz.

3. FORMLAR
HTML ile Gelimi Web lemleri modlnde formlarla ilgili temel bilgileri
renmi, HTML kodlarn kullanarak formlar ve form bileenleri oluturmutuk.
Bu blmde ise web tasarm editrnn bize sunduu aralar kullanarak formlar
oluturacak, form nesnelerinin ve eylem trlerinin neler olduunu hatrlayarak, herhangi bir
kod yazmadan web sayfamza nasl ekleyeceimizi reneceiz.

3.1. Formlar ile alma

Form oluturmak:

Web tasarm editrn kullanarak web sayfalarnza eitli trlerde (bavuru formu,
ziyareti defteri, talep formu v.s) formlar ekleyebilirsiniz.
almakta olduunuz sayfaya form eklemek iin Ekle mensnden Form komutu
seilerek alan menden Form seenei seilir. Form eklemek iin kullanabileceiniz dier
bir yol ise Ekle panelinde yer alan Formlar blmnden
olacaktr.

ekil 3.1: Form eklemek

30

nesnesine tklamak

Formu sayfaya ekledikten sonra form ile ilgili zellikleri ayarlayacanz blm pencerenin alt
tarafnda belirecektir.

Burada Form kimlii yazan ksmda formun isminin de olaca belirlenir.

Yntem ksm, formdan girilecek olan bilgilerin deerlendirici dosyaya hangi yntem
ile gnderileceini belirtmek iin kullanlr. Method, POST ve Getdeerlerini alabilir.
Method blmne GET deeri verildii zaman kontrollere girilen ierik o anda bulunan
adrese eklenip deerlendiriciye gnderilir. POST ise form ieriini direkt olarak
deerlendiriciye gnderir
Eylem ksmna formda bulunan verileri ileyecek sayfa veya komut dosyasnn adresi
yazlr.
ifre tr ksmnda application/x-www-form-urlencoded ve multipart/form-data
olmak zere iki seenek yer alr. Bunlarn grevi ilenmek zere sunucuya gnderilmi olan
verilerin kodlama trn semektir. Eer Post yntemi seilmise application/x-www-formurlencoded seilir. multipart/form-data ise herhangi bir dosya ykleme alan oluturulduu
durumlarda seilir.

3.2. Form Nesneleri

Eklemi olduunuz formun ilevsel hale gelmesini salamak iin hazrlam
olduunuz forma uygun olarak form nesneleri eklemeniz gerekir.
Web tasarm editrn kullanarak Metin alan, Metin Blgesi, Dme, Onay Kutusu,
Radyo Dmesi, Se(Liste/Men), Dosya alan, Grnt Alan, Gizli Alan, Radyo Grubu,
Onay Kutusu Grubu, Atla Mens, Alan Kmesi ve Etiket gibi nesneleri ekleyebilirsiniz.

3.2.1. Form Nesneleri Eklemek ve Biimlendirmek

Form nesneleri eklemek iin izlenen yol form eklemekte izlediiniz yolun aynsdr.
Ekle mens veya Ekle panelini kullanarak istediiniz nesneyi ekleyebilirsiniz.

Metin alan(Textfield):

Ekle mensnden Form komutunu ardndan da Metin alan seeneini setiiniz

zaman karnza ekil 3.2 deki pencere gelecektir.

31

ekil 3.2: Girdi etiketi eriilebilirlik nitelikleri penceresi

Buradaki ID ksm ile daha sonra program kodlarnda kullanlabilecek bir kimlik
belirlenir.Etiket ksmnda bir etiket ismi belirlenir.Konum ksmnda metin kutusuna girilmi
olan etiketin form esinden nce mi sonra m olduu belirlenir.Tamam dmesine
tkladnz zaman metin alan eklenmi olacaktr.
Metin alan kullanarak hazrlamakta olduunuz forma tek satrlk, ifreli veya ok
satrlk metin alanlar ekleyebilirsiniz. Bunun iin eklemi olduunuz metin alan seilir ve
sayfann alt tarafnda bulunan zellikler blmnden yazmn hangi trde olmas istendii
seilir.(

32

Tek satrdan olumu olan bir metin alann, zellikler blmnden ok satrl
seeneini seerek, ok satrl bir metin alanna dntrebilirsiniz.

Metin alann setikten sonrazellikler blmnde yer alan Yazm ksmndanifre

seeneini iaretleyerek ifreli alan oluturabilirsiniz.

Karakter genilii ksm ile metin alannn genilii belirlenir.

Maks karakter ksmnda ise girilebilecek karakter saysnn en fazla ne kadar
olabilecei ile ilgili kstlama getirilir.
Devre d seimi ile metin kutusu devre d braklr.
Salt okunur seimi ile metin alanna herhangi bir giri yaplmasna izin verilmez
sadece okunur durumda olur.

Metin blgesi(Textarea):

Textarea kullanarak hazrlamakta olduunuz forma birden fazla satrdan oluan

alanlar ekleyebiliriz.

Metin blgesinin zellikler blmnde yer alan Satr Say ile metin blgesinin ka
satrdan oluacan belirleyebilirsiniz.
Balang deeri ise ziyaretilerin sayfa yklendii zaman metin blgesinin ierisinde
hangi yaznn grnmesini istiyorsanz onu belirleyeceiniz blmdr.

Dme(Button)submit ve reset dmesi eklemek

Reset, zerine gelinip tkland zaman form ieriini temizleyip kullancnn forma
yeniden bilgi girii salayan bir dme(buton) oluturulmasn salar.Submit(gnder) ise,
form ierisinde yer alan ieriklerin sunucuya gnderilmesini salamak iin kullanlr.
Form zerine Submit veya Reset dmesi eklemek iin web tasarm editrnn Ekle
mensnden Form komutu, ardndan da. Alan listeden Dme seenei seilir.
Sayfaya Reset veya Submit dmelerini ekledikten sonra bu dmeleri seip alt
tarafta yer alan zellikler blmne yer alan Deer ksmndan dmenin isminin ne
olacan belirleyebilirsiniz.

33

Dmeniz eer Submit(Gnder) dmesi ise Formu gnder, Reset(temizle) dmesi

ise Formu sfrla eylem tr seilir.

Onay kutusu(checkbox):

Hazrlamakta olduunuz forma onay kutular eklemek iin kullanlr. Onay kutular,
listelenen seeneklerden istediiniz kadarn seebilmenize veya tmn seilmemi duruma
getirmenize olanak salar.
Form zerine onay kutusu eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Onay Kutusu seenei seilir.
Karnza gelen Girdi Etiketi Eriilebilirlik Nitelikleri penceresinden Etiket ismi
yazldktan sonra Tamam dmesine tklanr.

Denetlenen deer ksmna yazdnz metin, site ziyaretisinin onay kutusunu

iaretledii zaman size gnderilecek olan metinin ne olmas gerektiini belirleyeceiniz
ksmdr.
lk durum ksmnda ise Denetlendi ve Denetlenmedi olmak zere iki seenek bulunur.
Denetlendi seeneini seerseniz sayfa yklendii zaman onay kutusu seili olarak
grntlenecektir.

Radyo dmesi(radiobutton):

Radyo dmeleri, kullancnn verilen seeneklersen sadece bir tanesini seebilecei

durumlar iin kullanlmaktadr. lk durum seeneklerinden birisi seilerek zelliini
kullanarak sayfa yklendii zaman seili olmasn istediiniz deer belirlenir. Radio
dmelerinin alaca deerler Denetlenen deerseeneinde belirlenir.
Form zerine radyo dmesi eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Radyo Dmesi seenei seilir.

34

Se(liste/ men):

Hazrlamakta olduunuz formlara (se) zelliini kullanarak alr menler

ekleyebilirsiniz. Listbox(liste kutusu) ve drop-downlist(aa alr liste) eklinde iki farkl
trde seim kutusu oluturulabilir.
Form zerine alr listeler eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Se(Liste/Men) seenei seilir ve sayfaya
eklenmesi salanr.

Aada
grnmektedir

eklemi

olduunuz

Se(Liste/Men)

ile

ilgili

zellikler

blm

Ekleme ilemini yaptktan sonra Seim kutusunun trn belirlemeniz gerekmektedir.

Kaydrma listesi eklinde olmas iin Liste, alr men eklinde olmas iinse Men
seenei seilir.
Liste Deerleri dmesine tklayarak listede yer alacak olan elemanlarn neler olaca
belirlenir.

ekil 3.3: Liste deerleri belirleme penceresi

Eer tr olarak listeyi semiseniz zellikler blmndeki ykseklik ksmndan

ykseklik iin deer girebilirsiniz. Bu deer listede yer alan elemanlardan ka tanesinin
ekranda grntleneceini gsterir.

35

rnein aada ykseklik deeri 3 olarak belirlenmi bir seim listesi

grntlenmektedir.

ise,Ctrl tuu kullanarak birden fazla seim yapmamza olanak

salamaktadr.
Aada ise tr olarak Men seildii zaman taraycdaki grntnn nasl olaca
gsterilmektedir.

Dosya alan(file field):

Kullancnn sunucuya dosya gndermesi gerektii durumlar iin kullanlr.

Form zerine Dosya alan eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Dosya Alan seenei seilir.

Dosya alannn zellikler blmnde yer alan Karakter genilii ile dosya alannn
genilii belirlenir. Maks. Karakter ise kullanclarn en fazla ka karakter girebilecei
belirlenir.

Grnt alan(magefield):

Form zerine Grnt Alan eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Grnt Alan seenei seilir.
Karnza ekil 3.4dekiGrnt Kaynan Se penceresi gelecektir.

36

ekil 3.4: Grnt kaynan se penceresi

Buradan istediiniz grnty seip Tamam dmesine tkladnz zaman grnt

alan sayfanza eklenmi olacaktr.

Gizli alan(hiddenfield):

Kullanclarn grmesini istemediiniz bir takm bilgilerin yer ald alanlardr.

Form zerine Gizli Alan eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Gizli Alan seenei seilir.
Gizli alan eklediiniz blmler alma sayfanzda(
taraycda grnmez.

) eklinde grnr fakat

Radyo grubu(radiogroup):

Radyo dmelerini radyo dmesi ekleme konusunda grdmz gibi tek tek
ekleyebiliriz ancak tek tek eklemek zaman alacandan radyo grubu kullanlarak bir seferde
ekleme imkan salanm olur.
Form zerine radyo grubu eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Radyo Grubu seenei seilir.

37

ekil 3.5: Radyo grubu ekleme penceresi

Burada + ile yeni dme eklenip, - ile istemediiniz bir dmeyi kaldrabilirsiniz.
ile radyo dmelerinin yerlerini deitirebilirsiniz.
Ad alanna yazacamz isim radyo dmelerinin isimlerini belirlemektedir.Radio
dmelerinin birbirleri ile ilikili olmas ve ad zelliklerinin ayni olmas gerekmektedir.

Onay kutusu grubu(checkboxgroup):

Onay kutularn tek tek eklemek yerine Onay kutusu grubunu kullanarak birden fazla
ekleyebilirsiniz.
Form zerine onay kutusu grubu eklemek iin web tasarm editrnn Ekle
mensnden Form komutu, ardndan da. Alan listeden Onay Kutusu Grubu seenei
seilir

38

ekil 3.6:Onay kutusu grubu oluturma penceresi

Oluturmu olduunuz Onay kutusu grubunun taraycdaki grnts aadaki gibi

olacaktr.

Atla mens(jumpmenu):
Form zerine Jump men eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Atla Mens seenei seilir. Karnza ekil
3.7deki Atla mens ekle penceresi gelecektir.

ekil 3.7: Atla mens ekle penceresi

39

Atla mens ekle penceresinde yer alan Metin blmne mende olmasn istediiniz
elemanlarn isimleri yazlr.
Seildiinde URLye git alanna men esine tkladnz zaman almasn
istediiniz linkin ismi yazlr.
Seenekler ksmnda yer alan Menden sonra git dmesi ekle ile e seildii
zaman direkt olarak URLyi amak yerine bir Git dmesine basnca istenilen linke
gitmesini salar.
URL deiikliinden sonra ilk eyi se iaretlendii zaman varsaylan olarak
mennn ilk esinin grntlenmesi salanr.

Alan kmesi(Fieldset):

Forma eklemi olduunuz form nesnelerinin gruplanmas gerektii durumlarda

kullanlr.
Form zerine Alan Kmesi eklemek iin web tasarm editrnn Ekle mensnden
Form komutu, ardndan da. Alan listeden Alan Kmesi seenei seilir.

ekil 3.8: Alan kmesi ekleme penceresi

Aadaki ekilde Ad, Soyad, Doum Yeri ve Doum Tarihi metin alanlar Kiisel
bilgiler ad altnda bir alan kmesinin iine yerletirilmitir.

Etiket(Label):

Form nesneleri iin etiketler oluturmak iin kullanlr. Form zerine Etiket eklemek
iin web tasarm editrnn Ekle mensnden Form komutu, ardndan da. Alan listeden
Etiket seenei seilir.

40

Etiket seenei seildii zaman web tasarm editrnn kod blm alr ve
<label></label> etiketleri arasna istediiniz etiket metnini yazmanz salar.

3.2.2. Dorulama Aralar

Spry dorulama metin blgesi

Ziyaretilerin metin alanlarna bilgi girii yapt durumlarda, girilen metnin geerli
mi geersiz mi olduunu bildiren metin alandr.
Form zerine Spry Dorulama metin blgesi eklemek iin web tasarm editrnn
Ekle mensnden Form komutu, ardndan da. Alan listeden Spry Dorulama metin
blgesi seenei seilir.
Karmza gelen Girdi Etiketi Eriilebilirlik Nitelikleri Penceresinden(ekil 3.2)
etiket ismi yazlp tamam dmesine tklanr.

Eklemi olduunuz Spry Dorulama metin blgesi dzenlemeler yapmak iin men
ubuunun sol st kesinde yer alan mavi erite tklanr ve sayfann alt ksmnda zellikler
blmnn almas salanr.

Tr ksmndan metin kutusuna girilecek verinin tr seilir. Bunlar aada

gsterilmitir.

41

ekil 3.8: Spry dorulama metin blgesi veri trleri

Tam say ile metin alanna sadece rakam girilir.

E-posta adresi ile metin alanna doru ekilde yazlm bir e-posta adresi
girebilirsiniz.
Tarih ile metin alanna sadece tarih format girilebilir. Formatn ksmndan
istediiniz format seebilirsiniz.
Zaman ile metin alanna saat dakika gibi formatn ksmndan seeceiniz bir zaman
format girilebilir.
Kredi Kart ile Formatn ksmnda belirtilen Visa, MasterCard, American Express,
Discover, Diners Club kartlarndan birisini veya tmn seebilirsiniz.
Posta kodu ile metin alanna formatn ksmnda listelenen posta kodu trlerinden
birisini seebilirsiniz.
Telefon numaras ile belirlenen formatta telefon numaras girii yapabilirsiniz.
Sosyal Gvenlik Numaras ile metin alanna formatn ksmndan format belirleyip
sosyal gvenlik numaras girebilirsiniz.
Para Birimi ile formatn ksmnda belirlenmi para birimi formatn seerek metin
alanna bilgi girii yapabilirsiniz.
Gerek say/Bilimsel gsterim ile metin alanna eitli say trleri ile veri girii
yapabilirsiniz.
IP adresi ile metin alanna formatn ksmnda belirlenen (Yalnzca IPv4, Yalnzca
IPv6, IPv6 ve IPv4) formatlarndan birisini seerek ip adresi girebilirsiniz.
URL ile metin alanna url adresi girebilirsiniz.
zelile kendiniz bir format deseni tanmlayabilirsiniz.

42

Dorula ksmnda yer alan onBlur, onChange ve onSubmit ile dorulamann ne

zaman yaplacan belirleyebilirsiniz.

Spry Dorulama Metin Alan:

Sayfay ziyaret eden kiilerin girecei metinin doruluunu kontrol etmek iin
kullanlr.
Form zerine Spry Dorulama metin alan eklemek iin web tasarm editrnn Ekle
mensnden Form komutu, ardndan da. Alan listeden Spry Dorulama metin alan
seenei seilir.
Eklemi olduunuz Spry Dorulama metin alannda dzenlemeler yapmak iin men
ubuunun sol st kesinde yer alan mavi erite tklanr ve sayfann alt ksmnda zellikler
blmnn almas salanr.
zellikler blmnde yer alan min. Karakter ile spry dorulama metin alanna
girilebilecek minimum karakter says, maks. Karakter ile de en fazla karakter saysnn ka
olaca belirlenir.
Saya ksmnda yer alan karakter saym ile ziyaretinin yazm olduu karakter
says grntlenir.Kalan karakter ile de kalan karakter says belirlenmektedir.
Aadaki rnekte karakter saym seenei seilmi olup tarayc altrldnda
metin alanna yazlan metnin ka karakterden olutuu yan tarafta grntlenmektedir.

pucu ksmna bir yaz yazld zaman tarayc altrldnda metin alannn
ierisinde bir ipucu yazs grntlenecektir.

Spry dorulama onay kutusu

Ziyaretilerin onay kutusunu iaretleyip iaretlemediinin dorulamasn yapmak iin

kullanlr.
Form zerine Spry Dorulama onay kutusu eklemek iin web tasarm editrnn
Ekle mensnden Form komutu, ardndan da. Alan listeden Spry Dorulama
onaykutusu seenei seilir.
Eklemi olduunuz Spry Dorulama onay kutusunda dzenlemeler yapmak iin men
ubuunun sol st kesinde yer alan mavi erite tklanr ve sayfann alt ksmnda zellikler
blmnn almas salanr.

43

zellikler blmnde yer alan Gerekli(tek) ksm ile ziyaretinin tek bir onay kutusu,
Dayatma aral(birden ok) ksm ile de birden ok onay kutusu seebilmesi salanr.

Spry dorulama seimi:

Alr liste oluturup dorulama ilemi yapmak iin kullanlr.

Form zerine Spry Dorulama seimi eklemek iin web tasarm editrnn Ekle
mensnden Form komutu, ardndan da. Alan listeden Spry Dorulama seimi seenei
seilir.
Eklemi olduunuz Spry Dorulama seimi ile ilgili dzenlemeler yapmak iin men
ubuunun sol st kesinde yer alan mavi erite tklanr ve sayfann alt ksmnda zellikler
blmnn almas salanr.
zellikler blmnde yer alan birok seenek ve listeye nasl deer girilecei konusu
daha nce anlatlmt.
iaretlendii zaman kullancnn bo deer semesi engellenmi
olacaktr.

Spry dorulama ifresi

Site ziyaretileri ifre olutururken ifreli alan iin belli kurallar veya kstlamalar
gerekebilir.
Form zerine Spry Dorulama ifresi eklemek iin web tasarm editrnn Ekle
mensnden Form komutu, ardndan da. Alan listeden Spry Dorulama ifresi seenei
seilir.
Eklemi olduunuz Spry Dorulama ifresi ile ilgili dzenlemeler yapmak iin men
ubuunun sol st kesinde yer alan mavi erite tklanr ve sayfann alt ksmnda zellikler
blmnn almas salanr.

ifreli alana girilebilecek minimum ve maksimum harf says, minimum ve

maksimum rakam says, minimum ve maksimum byk harf says ve minimum ve
maksimum zel karakter saylar istee gre belirlenebilir.

44

Sprydorulama onay

Baz web sayfalarnda yelik formlarnda yazm olduunuz ifrenizin veya e-posta
adresinizin tekrar yazlmas (dorulanmas) istenir. Bu tr durumlarda bir spry dorulama
onay oluturmanz gerekir.
Form zerine Spry Dorulama onay eklemek iin web tasarm editrnn Ekle
mensnden Form komutu, ardndan da. Alan listeden Spry Dorulama onay seenei
seilir.
Eklemi olduunuz Spry Dorulama onay ile ilgili dzenlemeler yapmak iin men
ubuunun sol st kesinde yer alan mavi erite tklanr ve sayfann alt ksmnda zellikler
blmnn almas salanr.

Spry dorulama alannn kullanlabilmesi iin nceden dorulanacak bir metin alan
veya ifreli alan eklenmi olmas gerekmektedir.

Yazlan e-posta adresleri farkl olduu zaman bir uyar gelecektir.

Spry dorulama radyo grubu

Spry dorulama radyo grubu, oluturmu olduunuz grupta yer alan seeneklerden
birisinin seilmesi iin zorlamada bulunur.
Form zerine Spry Dorulama radyo grubu eklemek iin web tasarm editrnn
Ekle mensnden Form komutu, ardndan da. Alan listeden Spry Dorulama radyo
grubu seenei seilir.
Spry Dorulama radyo grubu seeneklerinin belirlenmesi Radyo grubu oluturmada
rendiklerimizle ayni ekilde yaplmaktadr.
Eklemi olduunuz Spry Dorulama radyo grubu ile ilgili dzenlemeler yapmak iin
men ubuunun sol st kesinde yer alan mavi erite tklanr ve sayfann alt ksmnda
zellikler blmnn almas salanr.
Dorula ksmnda yer alan onBlur, onChange ve onSubmit ile dorulamann ne
zaman yaplacan belirleyebilirsiniz.

45

UYGULAMA FAALYET
UYGULAMA FAALYET
Aadaki ekilde kiinin Ad, soyad, cinsiyeti, doum yeri ve doum tarihi, e-posta
adresi, kullanc ad ve parolasnn girilmesi istenilen bir yelik formu yer almaktadr.

lem Basamaklar
Web tasarm editrn altrnz ve
bir form ekleyiniz
Oluturmu olduunuz forma Gsterge
ismi yelik Bilgileri olacak ekilde
bir Alan kmesi ekleyiniz
yelik formunu yukardaki ekildeki
gibi dzenleyiniz.Ad, soyad,Kullanc
ad, parola ve e-posta adresi
bilgilerinin giriini zorunlu yapnz.
Girilmi olan parolann, parola tekrar
alannda ayni olmasn salaynz.
Parolann
en
az
6
karakter
uzunluunda ve en az iki harf
iermesini salaynz.
Kaydol
isminde
bir
dme
oluturunuz.

Formun
son
grntleyiniz.

halini

neriler
Ekle Form
Ekle Form Alan kmesi
Spry metin alan olarak ekleyiniz.

Spry dorulama onaynda ifreli alan

seiniz.
Spry
dorulama
ifresi
zelliklerblmnden
gerekli
ayarlamalar yapnz.
Dme zellikleri blmnden deer
olarak kaydol, eylem tr olarak da
formu gnder seeneini seiniz.
taraycda F12

46

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin
Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi
deerlendiriniz.
Deerlendirme ltleri
Form nesnelerini ekleyeceiniz bir form oluturdunuz mu?
Formunuza bir metin alan eklediniz mi?
Formunuza bir metin blgesi eklediniz mi?
Formunuza dme eklediniz mi?
Onay kutusu ekleme ilemini gerekletirdiniz mi?
Formunuza radyo dmesi ekleyip gerekli ayarlamalarn yaptnz
m?
7. Formunuza alr menler ekleyip seeneklerini belirleyebildiniz
mi?
8. Formunuza bir dosya alan eklediniz mi?
9. Formunuza bir grnt alan eklediniz mi?
10. Formunuza gizli alan eklediniz mi?
11. Formunuza radyo grubu eklediniz mi?
12. Formunuza onay kutusu grubu eklediniz mi?
13. Atla mens ekleyip seeneklerini belirlediniz mi?
14. Formunuza bir alan kmesi eklediniz mi?
15. Etiket oluturmay rendiniz mi?
16. Dorulama aralar eklemeyi rendiniz mi?
17. eitli dorulama aralarn kullanarak gerekli dorulamalar
yaptnz m?

Evet

Hayr

1.
2.
3.
4.
5.
6.

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz.
Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz
Evet ise lme ve Deerlendirmeye geiniz

47

LME VE DEERLENDRME
LME VE DEERLENDRME
Aadaki oktan semeli sorularn doru cevaplarn iaretleyiniz.
1.

Hazrlamakta olduunuz web sayfasna bir form eklemek iin web tasarm
editrndeki hangi panel kullanlr?
A) CSS stilleri
B) Dosyalar
C) AP eleri
D) Ekle

2.

Aadakilerden hangisini kullanarak hazrlamakta olduunuz forma tek satrlk,

ifreli veya ok satrlk metin kutusu eklenir?
A) Metin Blgesi
B) Metin Alan
C) Alan Kmesi
D) Grnt Alan

3.

Aadakilerden hangisi ile hazrlamakta olduunuz forma birden fazla satrdan oluan
alanlar ekleyebilirsiniz?
A) Metin Blgesi
B) Metin Alan
C) Alan Kmesi
D) Grnt Alan

4.

Kullancnn verilen seeneklerden sadece bir tanesini semesine izin veren dme
aadakilerden hangisidir?
A) Submit
B) Reset
C) Onay Kutusu
D) Radyo Dmesi

5.

Forma eklenmi olan nesnelerin gruplanmas gerektii durumlarda kullanlan etiket

aadakilerden hangisidir?
A) Metin Blgesi
B) Metin Alan
C) Alan Kmesi
D) Grnt Alan

6.

Aadakilerden hangisi SPRY dorulama metin blgesi veri trlerinden deildir?

A) Kredi Kart
B) Telefon Numaras
C) Posta Kodu
D) Ev Adresi

48

7.

ifreli alanlar iin belli kurallar ve kstlamalar getirmek iin aadakilerden hangisi
kullanlr?
A) Spry Dorulama ifresi
B) Spry Dorulama Seimi
C) Spry Dorulama Onay
D) Spry Dorulama onay kutusu

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap
verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz.
Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

49

RENME FAALYET-4
RENME FAALYET-4
AMA
Web sitesini ynetmek ve nternette yaynlamak.

ARATIRMA

Sitenizi yaynlayabileceiniz ftp hizmeti veren servis salayclar aratrp

snfta arkadalarnzla paylanz.

4. STE YNETM VE YAYINI

Site ynetimi ayarlarn yaparak hazrlam olduunuz web sitesi ile ilgili
dzenlemeleri yapabilir ve sitenin internette kullanclara ulamasn salayacak yaynlama
ilemini yapabilirsiniz.

4.1. Site Ynetimi

Yeni bir site oluturmak, siteleri dzenlemek, oaltmak, kaldrmak, sitenin ayarlarn
da veya ie aktarma ilemleri iinSite mensnden Siteleri Ynet komutu seilir.

ekil4.1: Siteleri ynet penceresi

Yeni:Yenibir site oluturmak iin kullanlr.

Dzenle: Varolanbir siteyi dzenlemek iin kullanlr.

50

oalt: Setiiniz sitenin bir kopyasn oluturur. Kopya, site listesi

penceresinde grnr.
Kaldr: Seili siteyi kaldrmak iin kullanlr.
Da aktar:Sitenin ayarlarn XML dosyas olarak da aktarmaya yarar.
e aktar:Sitenin ie aktarlacak ayarlar dosyasn semeyi salar.

Raporlar
Site ile ilgili raporlar hazrlamak iinSite mensnden Raporlar komutu seilir.
ekil4.2deki Pencere alacaktr.

ekil4.2: Site raporu penceresi

Bildir ksmndan raporun konusunu seebilirsiniz.

Rapor se ksmndan hangi raporlar seeceinizi belirlersiniz.Raporlar seildikten

sonra altr dmesine tklanlr. Ardndan Sonular panelinden Site Raporlar seilerek
raporlarn grntlenmesi salanr.

4.2. Siteleri Yaynlama

Web sitenizin hazrlk ve dzenleme aamas tamamlandktan sonra sra siteyi
yaynlama ilemine gelecektir. Web tasarm editr kullanarak sitelerinizi
yaynlayabilirsiniz.

51

4.2.1. Yaynlama Seenekleri

Sitenizi yaynlamak iin ekil4.1deki site ynet penceresinden Dzenle dmesine
tklanr. Alan penceredeki Sunucular ksmndan
pencereden sunucu ayarlar yaplr.

iaretine tklanr. ekil4.3deki

ekil4.3: Sunucu ararlar blm

unu kullanarak balann blmnden eriim tr seilir.

Sunucu ad ksmndan sunucu ad belirlenir.
Ftp adresi ksmna host ftp sitesinin adresi yazlr.
Kk dizin ksmna kk dizinin ismi yazlr.
Kullanc ad ve ifre ksmna kullanc ad ve ifre yazlr.
Kaydet seenei ile ifre ve kullanc adnn daha sonra hatrlanmas isteniyorsa
iaretlenir.
Kaydet dmesi ile uzak site tanmlama ilemi tamamlanm olur.
Site tanmlama ilemi yapldktan sonra sitenin yaynlanmas aamasna geilir. Site
mensnden Siteleri Ynet komutuna tklanr. Alan pencereden site seilip Bitti
dmesine tklanr.
Dosyalar panelinden(F8) Uzak ana bilgisayara balan(
bilgisayarla balant kurulur.

)dmesine tklanarak uzak

Yine dosyalar panelinden Yerel ve uzak siteleri gstermek iin genilet ( )dmesine
tklanr. Sunucuya transfer edilecek olan dosyalar seilir. Site mensnden Koy komutu

52

seilerek dosyalarn transfer ilemi balatlr. Dosya transfer ilemi bittikten sonra yeniden
dmesine tklanlarak balant kesilir.

4.2.2. Siteye Dosya Yklemek ve ndirmek

Hazrlam olduunuz sitenize yaynlama ilemi tamamlandktan sonra yeni dosyalar
yklemek isteyebilirsiniz. Veya uzak sunucuya gndermi olduunuz birtakm dosyalar
bilgisayarnza indirmek isteyebilirsiniz.
Yerel siteden uzak siteye dosya yklemek iin Site mensnden Koy komutu
kullanlr.
Uzak siteden yerel siteye(bilgisayarnza) dosya indirmek iin ise indirmek istediiniz
dosyay setikten sonra Site mensnden Al komutu kullanlr.

53

UYGULAMA FAALYET
UYGULAMA FAALYET
lem Basamaklar
Deneme isminde yeni bir site
oluturunuz.
Deneme ismindeki siteyi oaltnz.
oaltm olduunuz siteyi(deneme
kopya) kaldrnz.
Sitenizle ilgili Teslim Alan ve Son
deitirilen
bilgilerini
grntleyeceiniz
raporlar
oluturunuz.
Sitenizle ilgili sunucu ayarlarn yapp
siteyi yaynlaynz.

neriler
Site-Siteleri Ynet
Site-Siteleri Ynet
Site-Siteleri Ynet
Site-Raporlar

Siteleri ynet-Dzenle
F8-

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin
Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi
deerlendiriniz.
Deerlendirme ltleri
1. Siteleri dzenlemek iin site ynetimi ayarlarn yaptnz m?
2. Hazrladnz site iin raporlar oluturdunuz mu?
3. Hazrlam olduunuz siteyi yaynlamak iin gerekli ayarlar
yaptnz m?
4. Sitenizi yaynlayacanz uzak bilgisayarla balant kurdunuz mu?
5. Yaynladnz siteye yeni dosyalar ykleyip, istediiniz dosyalar
yerel bilgisayara indirebildiniz mi?

Evet

Hayr

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz.
Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz
Evet ise lme ve Deerlendirmeye geiniz

54

LME VE DEERLENDRME
LME VE DEERLENDRME
Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen
bilgiler doru ise D, yanl ise Y yaznz.
1.

( ) Dosya mensnde yer alan Siteleri Ynet komutu ile yeni site oluturabilir veya
mevcut siteler zerinde dzenlemeler yapabilirsiniz.

2.

( ) Siteleri ynet penceresinde yer alan Kaldr seenei semi olduunuz siteyi
silmek iin kullanlr.

3.

( ) Oluturulmu olan raporlar Sonular panelini kullanarak grntleyebilirsiniz.

4.

( ) Sunucu ayarlarnn yapld blmde yer alan Ftp adresi ksmna kiisel e-posta
adresinin yazlmas gerekir.

5.

( ) Uzak ana bilgisayarla balant kurma ayarlar Dosyalar panelindeki seeneklerle

yaplr.

6.

( ) Uzak sitedeki bilgisayarla gerekli balantlar yaparak istediiniz bir dosyay

bilgisayarnza indirebilirsiniz.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap
verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz.
Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

55

MODL DEERLENDRME
MODL DEERLENDRME
Aadaki oktan semeli sorularn doru cevaplarn iaretleyiniz.
1.

CSS aadakilerden hangisidir?

A) Colorful Style Sheets
B) Computer Style Sheets
C) Cascading Style Sheets
D) Creative Style Sheets

2.

Web tasarm editrnde istediiniz metnin durum ubuunda

grntlenmesini salamak iin aadaki davran trlerinden hangisi
kullanlr?
A) Metni ayarla
B) URLye git
C) Durum ubuuna yaz
D) eleri Gster/Gizle

3.

Fare ile zerine gelindiinde alt menlerin almasn salayan butonlar oluturmak
iin aadakilerden hangisi kullanlr?
A) SprySekmeli Panel
B) Spry Men ubuu
C) Spry Akordeonu
D) Spry Daraltlabilir Panel

4.

Sekme oluturarak sekmeye tkland zaman istenilen bir ieriin gsterilip

gizlenebilmesi iin aadakilerden hangisi kullanlr?
A) Spry Sekmeli Panel
B) Spry Men ubuu
C) Spry Akordeonu
D) Spry Daraltlabilir Panel

5.

Baz formlarnda yazm olduunuz ifrenizin veya e-posta adresinizin tekrar

yazlmas istenmektedir. Bunu oluturabilmek iin aadakilerden hangisi kullanlr?
A) Spry Dorulama Onay
B) Spry Dorulama ifresi
C) Spry Dorulama Seimi
D) Spry Dorulama Onay kutusu

6.

Sitenizi ziyaret eden kiilerin girecei metnin doruluunu kontrol etmek iin
aadakilerden hangisi kullanlr?
A) Spry Dorulama Onay
B) Spry Dorulama Seimi
C) Spry Dorulama Onay kutusu
D) SpryDorulama Metin alan

56

7.

Hazrlam olduunuz site ile ilgili dzenleme, oaltma ie veya da aktarma

ilemlerini gerekletirmek iin hangi men kullanlr?
A) Deitir
B) Format
C) Site
D) Pencere

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz.
Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz
Evet ise bir sonraki modle gemek iin retmeninize bavurunuz.

57

CEVAP ANAHTARLARI
CEVAP ANAHTARLARI
RENME FAALYET-1 N CEVAP ANAHTARI
Yanl
Doru
Doru
Yanl
Doru

1
2
3
4
5

RENME FAALYET-2 NN CEVAP ANAHTARI

Yanl
Yanl
Doru
Doru
Yanl

1
2
3
4
5

RENME FAALYET-3 N CEVAP ANAHTARI

1
2
3
4
5
6
7

D
B
A
D
C
D
A

RENME FAALYET-4 N CEVAP ANAHTARI

Yanl
Doru
Doru
Yanl
Doru
Doru

1
2
3
4
5
6

MODL DEERLENDRMENN CEVAP ANAHTARI

1
2
3
4
5
6
7

C
A
B
D
A
D
C

58

KAYNAKA
KAYNAKA

GRKAN Osman, AdobeDreamweaver CS5, Nirvana Yaynlar, Ankara,

2010.

http://help.adobe.com/tr_TR/dreamweaver/cs/using/dreamweaver_cs5_help.pdf
(11.05.2012, 14:50).

59