Escolar Documentos
Profissional Documentos
Cultura Documentos
Dreamweaver
Dreamweaver
at 20 anos
de 20 a 40 anos
aci ma de 40 anos
Dreamweaver MX Bsico
Diviso de Servios Comunidade - Centro de Computao - Unicamp
46
s el eci one o pr i mei r o Boto de r di o e no I ns petor de pr opr i edades confi gur e s uas
pr opr i edades :
Boto de opo (nome da var i vel ): fai xa- etar i a
Val or s el eci onado (val or da var i vel ): 20
Es tado i ni ci al (es tado i ni ci al do campo: s el eci onado ou no): S el eci onado
s el eci one o s egundo Boto de r di o e confi gur e s uas pr opr i edades :
Boto de opo (nome da var i vel ): fai xa- etar i a
Val or s el eci onado (val or da var i vel ): 20- 40
Es tado i ni ci al (es tado i ni ci al do campo: s el eci onado ou no): No s el eci onado
s el eci one o ter cei r o Boto de r di o e confi gur e s uas pr opr i edades :
Boto de opo (nome da var i vel ): fai xa- etar i a
Val or s el eci onado (val or da var i vel ): 40
Es tado i ni ci al (es tado i ni ci al do campo: s el eci onado ou no): No s el eci onado
9) pul e 1 l i nha e di gi te " S exo: "
cr i e um campo texto cl i cando na 8 opo Menu de L i s t a
S exo:
S el eci one es s e campo e no I ns petor de Pr opr i edades pr eencha as pr opr i edades :
Li s ta/Menu (nome do campo): s exo
T i po (ti po de l i s ta, as opes tem a mes ma funo, s muda a for ma de exi bi o)
Cl i que no boto Val or es da l i s ta: adi ci one os val or es " mas cul i no" e " femi ni no" (par a
adi ci onar um novo val or cl i que no s i nal + )
Cl i que em OK.
10) pul e 1 l i nha e di gi te " Dvi das ou s uges tes : "
cr i e um campo texto cl i cando na 4 opo r ea de t ext o
S el eci one es s e campo e no I ns petor de Pr opr i edades pr eencha as pr opr i edades :
Campo de texto (nome do campo): s uges toes
Lar g. do car acter e (tamanho da mol dur a do campo): 50
No max. de car act. (nmer o de l i nhas do campo): 5
T i po (ti po de campo): Mul ti - l i nha
Val or i ni ci al : dei xar em br anco
11) pul e 1 l i nha e cr i e um boto cl i cando na opo 12 opo B ot o
Submit
S el eci one es s e campo e no I ns petor de Pr opr i edades pr eencha as pr opr i edades :
Boto (nome do boto): S ubmi t
Denomi nao (texto que s er exi bi do no boto): " Envi ar "
Acti on (ao): Envi ar for mul r i o
Obs . : a aco r es et f or m s er ve par a l i mpar os campos do for mul r i o.
12) Edi te o cdi go HT ML e no act i on da tag for m col oque o e- mai l par a onde s er o
encami nhados os dados (mai l to: xxxxxxxxxxx).
Dreamweaver MX Bsico
Diviso de Servios Comunidade - Centro de Computao - Unicamp
47
O for mul r i o s er exi bi do des s a for ma:
Nome:
E- mai l :
Fai xa Etr i a:
at 20 anos
de 20 a 40 anos
aci ma de 40 anos
S exo:
masculino
Dvi das ou s uges tes :
S ubmit
S al ve novamente es s a pgi na e feche- a.
Dreamweaver MX Bsico
Diviso de Servios Comunidade - Centro de Computao - Unicamp
48
Cr i ando a pgi na di cas _ bel ez a.ht ml
Cr i ar emos agor a a pgi na di cas _ bel ez a.ht ml , tambm a par ti r do model o.
Na bar r a de menus es col ha Ar qui vo > Novo, es col ha a gui a Model os , s er o
exi bi dos os s i tes e model os exi s tentes , es col ha o s i te B i oder m e o model o
bi oder m_ model o.
Mantenha a opo atual i zar a pgi na quando o model o for al ter ado, des s a
for ma, ao atual i zar o model o, todos os documentos s er o atual i zados .
S al ve o documento com o nome de di cas _ bel ez a.ht ml , na pas ta
di cas _ bel ez a.
Pos i ci one o cur s or na s egunda l i nha da tabel a e cr i e uma nova tabel a dentr o
des s a l i nha: Pai nel I ns er i r Comuns > I ns er i r t abel a, ou bar r a de menus
I ns er i r > T abel a. A nova tabel a ter as s egui ntes pr opr i edades : 1 l i nhas , 2
col unas , l ar gur a de 760 pi xel s , pr eenchi mento da cl ul a = 0, es paamento
entr e as cl ul as = 0 e bor da = 0. Defi na a l ar gur a de cada col una da tabel a,
s el eci one a pr i mei r a col una e no campo L do I ns petor de pr opr i edades di gi te
130, agor a s el eci one a s egunda col una da tabel a e no campo L do I ns petor de
pr opr i edades di gi te 630.
Na pr i mei r a col una da tabel a i ns i r a uma cor de fundo, pos i ci one o cur s or nes s a
col una, e na opo F undo do I ns petor de pr opr i edades es col ha a cor ci nza cl ar o
(# CCCCCC).
Na s egunda col una da tabel a i ns i r a uma outr a tabel a de 1 l i nha/1 col una e
l ar gur a de 580 pi xel s , centr al i ze es s a tabel a.
Pos i ci one o cur s or dentr o des s a tabel a e no I ns petor de pr opr i edades s el eci one
No al t o. Em s egui da, i ns i r a o texto com as di cas de s ade e bel eza (copi e o
texto do ar qui vo texto_di cas _bel eza. doc que es t ar mazenado na pas ta
documentacao.
S el eci one todo o texto e no I ns petor de pr opr i edades al ter e a fonte par a
ver dana, tamanho 2.
S al ve es s a pgi na.
Dreamweaver MX Bsico
Diviso de Servios Comunidade - Centro de Computao - Unicamp
49
ncor as
As ncor as s o uti l i zadas em pgi nas que pos s uem contedo mui to extens o. Atr i bui - s e
um ncor a par a cada par gr afo ou par a cada tpi co da pgi na, e depoi s cr i a- s e um
menu no i n ci o da mes ma com l i nks par a es s as ncor as . Es s e r ecur s o agi l i za a
navegao pel o contedo da pgi na, di s pens ando o us o da bar r a de r ol agem, que
nor mal mente s e for ma nes s es documentos mui tos extens os .
Par a i ns er i r uma ncor a, na bar r a de menus s el eci one I ns er i r / ncor a com nome,
ou no Pai nel I ns er i r : Comuns / ncor a com nome.
Vamos uti l i zar como exempl o a pgi na do s i te di cas de bel eza. Nes s a pgi na
di s poni bi l i zamos um gr ande nmer o de di cas , o que tor nou o s eu contedo extens o.
1) O contedo es t di vi di do nos s egui ntes tpi cos : cui dados com a pel e, cui dados com
os cabel os , como ter uma al i mentao equi l i br ada, tr atamento da cel ul i te, beba mui ta
gua, como gas tar cal or i as mes mo s em tempo par a s e exer ci tar , como ti r ar o mxi mo
de pr ovei to do baton.
2) No i n ci o de cada tpi co (di ca) i ns i r a uma ncor a, da s egui nte for ma:
Col oque o cur s or no i n ci o do tpi co " Cui dados com a pel e" .
Na bar r a de menus s el eci one I ns er i r / ncor a com Nome, ou no Pai nel I ns er i r :
Comuns / ncor a com Nome.
Na j anel a que s e abr e, di gi te o nome da ncor a: pel e, e cl i que em OK.
Faa o mes mo pr ocedi mento par a os demai s tpi cos , as pr xi mas ncor as s e
chamar o: cabel os , al i ment acao, cel ul i t e, agua, cal or i as , bat on)
3) Cr i e um menu no i n ci o da pgi na, contendo apenas os t tul os dos tpi cos , como
s egue: (us e fonte ver dana, tamanho 2)
- Cui dados com a pel e
- Cui dados com os cabel os
- Como ter uma al i mentao equi l i br ada
- T r atamento da cel ul i te
- Beba mui ta gua
- Como gas tar cal or i as mes mo s em tempo par a s e exer ci tar
- Como ti r ar o mxi mo de pr ovei to do baton
4) Vi ncul e cada tem do menu a s ua r es pecti va ncor a. S el eci one o tem do menu, e no
campo Li nk do I ns petor de Pr opr i edades di gi te o nome da ncor a pr ecedi do pel o
s mbol o # . Exempl o # pel e.
5) i mpor tante tambm di s poni bi l i zar uma for ma do us ur i o vol tar par a o menu no
topo da pgi na aps ter aces s ado um deter mi nado tpi co. Par a i s s o, i ns i r a uma ncor a
no i n ci o da pgi na, antes do menu. Es s a ncor a ter o nome de " topo" . Em s egui da
di gi te a pal avr a " T opo" no fi nal de cada tpi co e faa um l i nk par a a ncor a topo
(# topo).
Obs : S e a ncor a fos s e chamada de uma outr a pgi na, o l i nk fi car i a as s i m:
pagi na. html # ancor a
S al ve a pgi na e tecl e F12 par a vi s ual i z- l a no navegador . Em s egui da feche a pgi na.
T es te o s i te l ocal mente.