Treinamento Dreamweaver Básico

Dreamweaver MX Bsico
Diviso de Servios Comunidade - Centro de Computao - Unicamp

2

Licenciamento de Uso

Este documento propriedade intelectual 2002 do Centro de Computao da Unicamp
e distribudo sob os seguintes termos:

1. As apostilas publicadas pelo Centro de Computao da Unicamp podem ser
reproduzidas e distribudas no todo ou em parte, em qualquer meio fsico ou
eletrnico, desde que os termos desta licena sejam obedecidos, e que esta
licena ou referncia a ela seja exibida na reproduo.

2. Qualquer publicao na forma impressa deve obrigatoriamente citar, nas pginas
externas, sua origem e atribuies de direito autoral (o Centro de Computao da
Unicamp e seu(s) autor(es)).

3. Todas as tradues e trabalhos derivados ou agregados incorporando qualquer
informao contida neste documento devem ser regidas por estas mesmas
normas de distribuio e direitos autorais. Ou seja, no permitido produzir um
trabalho derivado desta obra e impor restries sua distribuio. O Centro de
Computao da Unicamp deve obrigatoriamente ser notificado
(treinamentos@ccuec.unicamp.br) de tais trabalhos com vista ao aperfeioamento
e incorporao de melhorias aos originais.

Adicionalmente, devem ser observadas as seguintes restries:
A verso modificada deve ser identificada como tal
O responsvel pelas modificaes deve ser identificado e as modificaes
datadas
Reconhecimento da fonte original do documento
A localizao do documento original deve ser citada
Verses modificadas no contam com o endosso dos autores originais a
menos que autorizao para tal seja fornecida por escrito.

A licena de uso e redistribuio deste material oferecida sem nenhuma garantia de
qualquer tipo, expressa ou implcita, quanto a sua adequao a qualquer finalidade. O
Centro de Computao da Unicamp no assume qualquer responsabilidade sobre o uso
das informaes contidas neste material.

3
ndi ce

I nter net 4
HT ML Pr i nci pai s T ags 6
Di cas par a a cons tr uo de um s i te 10
Vi s o ger al do Dr eamweaver MX 15
Pr oj eto S i te Bi oder m 18
V ncul os (Li nks ) 19
Cr i ando um novo s i te 20
Cr i ando uma nova pgi na em br anco 23
T abel as 25
Mapeamento de i magens 28
Model os 30
Cr i ando pgi nas a par ti r de model os 31
Cr i ando a pgi na i ni ci al do s i te 32
Cr i ando a pgi na empr es a 34
Es ti l os HT ML 36
Cr i ando a pgi na pr odutos 38
Es ti l os CS S 41
Cr i ando a pgi na atendi mento 44
For mul r i o 45
Cr i ando a pgi na di cas _bel eza 48
ncor as 49

l ti ma atual i zao: 12/08/2003
4
I nt er net
A I nter net no no s e cons ti tui apenas numa r ede de computador es , mas numa r ede
de r edes , conectadas umas as outr as . Um computador l i gado a I nter net pode
compar ti l har r ecur s os e i nfor maes a n vel mundi al .
Exi s tem vr i os s er vi os que uti l i zam es s a es tr utur a e um dos mai s conheci dos a
Wor l d Wi de Web, ou s i mpl es mente Web. for mada por mi l hes de l ugar es chamados
s i tes , que s o l ocal i zados atr avs de s eus ender eos . Es s e s i s tema de ender eos
tambm chamado de URL (Uni for m Res our ce Locator , l ocal i zador uni for me de
r ecur s os ).
A Web r evol uci onou a I nter net por r euni r i nter face gr fi ca, r ecur s os de mul ti m di a e
hi per texto. Pos s i bi l i tou a cons tr uo de pgi nas gr fi cas , que podem conter fotos ,
ani maes , tr echos de v deo e s ons .

As pgi nas Web s o es cr i tas na l i nguagem HT ML (Hyper tex Mar kup Language), ou
s ej a, Li nguagem de Mar cao de Hi per texto.
Nas pgi nas , a i nfor mao es t or gani zada de for ma hi per textual , ou s ej a, as pgi nas
es to l i gadas entr e s i , atr avs de l i nks . I s s o per mi te uma l ei tur a no l i near do texto.
Hi per t ext o o concei to que pos s i bi l i ta a " navegao" entr e s egmentos de texto
i ndependentemente de s ua s eqnci a l i near ou de s ua l ocal i zao, o l ei tor s al ta de
uma i nfor mao a outr a, no neces s ar i amente numa or dem s eqenci al .
Um s i te um conj unto de pgi nas Web es tr utur adas s obr e um deter mi nado contedo,
es te contedo pode conter : i nfor maes , textos , i magens , i l us tr aes , pr ogr amas ,
textos hi s tr i cos , di agr amas , j ogos , etc. A pgi na de entr ada de um s i te chamada de
" Home Page" .

O Navegador
Par a que o contedo de um documento HT ML pos s a s er for matado e exi bi do devemos
us ar um pr ogr ama chamado br ows er , ou navegador . Os mai s conheci dos s o o
I nter net Expl or er e Nets cape Navi gator .
O navegador funci ona i ndependentemente de s e es tar conectado a I nter net. A mel hor
for ma de s e tr abal har des envol vendo uma pgi na HT ML off- l i ne, des conectado.
Pr i mei r o voc cr i a as pgi nas em s eu computador e as tes ta por mei o do navegador .
Depoi s , deve col oc- l as em um s er vi dor Web par a que outr as pes s oas tambm pos s am
vi s ual i z- l as .

S er vi dor Web
S o computador es equi pados com s oftwar e que per mi te " s er vi r " a uma r ede de
computador es . Quanto mai s potente o s er vi dor mai or e mel hor poder s er a r ede por
el e atendi da. S o mqui nas de al ta capaci dade, com gr ande poder de pr oces s amento e
conexes vel ozes . Podemos us ar como exempl o a mqui na Obel i x, que atende a
Uni camp.
5
F er r ament as neces s r i as par a a cr i ao de pgi nas
r ecomendvel pos s ui r al guns conheci mentos bs i cos da l i nguagem HT ML, embor a
atual mente s ej a pos s vel cr i ar um s i te uti l i zando uni camente os edi tor es de pgi nas ,
que ger am todo o cdi go. Exi s tem vr i os s oftwar es par a edi o de pgi nas html no
mer cado, os mai s conheci dos s o: Nets cape Compos er (gr atui to), Fr ontPage da
Mi cr os oft, Dr eamweaver da Macr omedi a e GoLi ve da Adobe.
pr eci s o tambm ter um navegador i ns tal ado, par a poder mos tes tar as pgi nas .

6
HT ML - P r i nci pai s T ags
Como j di s s emos , o Dr eamweaver MX di s poni bi l i za vr i as fer r amentas que faci l i tam a
confeco de pgi nas Web, no entanto, des ej vel que s e conhea pel o menos as tags
bs i cas da l i nguagem HT ML par a o cas o de ter que fazer uma manuteno no s i te.

A s egui r , as tags bs i cas da l i nguagem html :
Quebr as de L i nha
 
Exempl o: Res ul tado:
 Pr i mei r a l i nha. S egunda
l i nha. 
Pr i mei r a l i nha.
S egunda l i nha.

Pr i mei r a l i nha. S egunda l i nha. Pr i mei r a l i nha.
S egunda l i nha.

t ext o em negr i t o
 
Cur s o de Confeco de Web - bs i co Cur s o de Cof eco de Web - bs i co

t ext o em i t l i co
 
Centr o de Computao - CCUEC Centr o de Computao - CCUEC

cent r al i z ar t ext o
< cent er > < / cent er >
7
t ext o di r ei t a
< r i ght > < / r i ght >
t ext o es quer da
< l ef t > < / l ef t >
< center > Centr o de Computao< /center > Centr o de Computao
< r i ght> Centr o de Computao< /r i ght> Centr o de Computao
< l eft> Centr o de Computao< /l eft> Centr o de Computao

F or mat ao do t ext o
 Centr o
de Computao
Centro de Computao

L i s t as No Numer adas
< UL>
< LI > UNI CAMP
< LI > UNES P
< /UL>
UNI CAMP
UNES P

L i s t as Numer adas
< OL>
< LI > UNI CAMP
< LI > UNES P
< /OL>
1. UNI CAMP
2. UNES P

B ar r as hor i z ont ai s

< HR > = mar cao de l i nha
S I Z E = es pes s ur a
8
Wi dt h = l ar gur a
< HR S I Z E= 2 wi dth= 100% >

I ns er i r i magens


L i nks

< A> < / A>
HR E F = r efer nci a a pgi na a s er aber ta
T AR GE T = _ B L ANK : abr e a pgi na em uma nova j anel a do br ows er
Chamando uma pgi na: (ar qui vos com extens o . htm ou . html )
< A HREF= " /exempl os /Pagi na. html " T ARGET = _BLANK> Cl i que
aqui ! ! ! < /A>
Cl i que aqui ! ! !

E xi bi ndo uma i magem: ( ar qui vos com ext ens o .gi f ou .j pg)
< A HREF= " /exempl os /I magem. j pg" T ARGET = _BLANK> Cl i que
aqui ! ! ! < /A>
Cl i que aqui ! ! !

F az endo downl oad de um ar qui vo: ( ar qui vos com ext ens o .DOC, .T XT , .Z I P )
< A HREF= " /exempl os /texto. txt" T ARGET = _BLANK> Cl i que
aqui ! ! ! < /A>
Cl i que aqui ! ! !

9
R ecebendo e-mai l s :
< A HREF= " mai l to: xxxx@uni camp. br " > Cl i que aqui < /A> par a envi ar
s ua opi ni o! !
Cl i que aqui par a envi ar
s ua opni o! !

Chamando uma pgi na em out r o s er vi dor :

pr ot ocol o: / / s er vi dor / di r et or i o/ ar qui vo
Os pr otocol os mai s us ados s o (fi l e ou http):
F i l e = ar qui vo no s er vi dor de ftp
ht t p = ar qui vo no s er vi dor Wor l d Wi de Web
< A HREF= http: //www. uni camp. br T ARGET = _BLANK> Cl i que
aqui ! ! ! < /A>
Cl i que aqui ! ! !

T r abal hando com t abel a de cor es

Os val or es par a as cor es devem s er es cr i tos no padr o Hexadeci mal . Par a obter uma
l i s ta de cor es Hexadeci mai s , aqui es t :

Cores Hexadecimais
Paleta com 216 cores hexadecimais.

10
Di cas par a a cons t r uo de um s i t e
1 Fas e: Or gani zao da i nfor mao
2 Fas e: Concei tuao do s i te e defi ni o da es tr utur a de navegao

3 Fas e: Montagem do S i te

4 Fas e: T es tar l ocal mente

5 Fas e: Di s poni bi l i zar o s i te

Di ca de como or gani z ar e es t r ut ur ar a navegao de um s i t e

01- Defi ni r o contedo, o que s er di vul gado no s i te
exempl o:
I nfor maes pes s oai s : i nfor maes s obr e voc;
Publ i caes como j or nai s , r evi s tas ;
Per fi s da empr es a; s egmento da empr es a; cl i entes , par cei r os , etc. . .
02- Es tabel ecer obj eti vos :
Voc deve per guntar - s e o que os l ei tor es vo es tar pr ocur ando no s i te.
Qual o obj eti vo do s i te.
Antes de comear entr ar com cdi gos ou i magens voc deve pens ar o que voc
quer col ocar em s ua pgi na
Como s er es tr utur ada? El a es t adequada ou no ao meu pbl i co al vo?
Ao des envol ver um s i te par a uma empr es a ou pes s oas i mpor tante que voc
col ha j unto ao s eu cl i ente s eus obj eti vos , i di as , a for ma que i magi na s ua
pgi na, etc. As s i m, fi car bem mai s fci l de comear s eu tr abal ho.
03- Di vi da o s eu contedo em tpi cos :
Cr i e uma l i s ta com os pr i nci pai s tpi cos , a pr i nc pi o no i mpor ta a
or dem. Es ta uma for ma de comear a s e or gani zar .

S ua l i s ta poder ter quantos tpi cos des ej ar , mas cui dado, o s eu l ei tor
poder s e cans ar e s e per der em mei o a tantas opes .
04- Quai s as quetes que devo l evantar com r el ao a or gani zao e a navegao de
um s i te?
S er que os l ei tor es cons eguem navegar pel o contedo de cada ti po de
es tr utur a par a encontr ar as i nfor maes de que pr eci s am.
Como ter cer teza de que os l ei tor es cons eguem s e l ocal i zar nos meus
documentos (contexto) e achar o cami nho de vol ta at uma pos i o conheci da.
11

T i pos de s i t es :
S i t e es t t i co - S omente cdi go HT ML
S i t e di nmi co
Pode conter Java S cr i pts , que s o pr ogr amas embuti dos detr o do
cdi go HT ML.
Nor mal mente r odam l ocal mente, do l ado do cl i ente, ou s ej a, no
computador do us ur i o.
Exempl o: Java S cr i pt
Pr ogr amao PHP, AS P
Pode conter pr ogr amao (PHP, AS P) que s o executados pel o
s er vi dor Web, pr oduzi ndo di nami camente pgi nas HT ML, que
ento s o envi adas ao cl i ente par a vi zual i zao

E xempl os de navegao
1. Hi er r qui ca

fci l par a os l ei tor es des cobr i r a pos i o em
que s e encontr am na es tr utur a. Nas hi er ar qui as ,
a home page for nece uma vi s o ger al do
contedo que es t s ubor di nado a el a e ai nda
defi ne os pr i nci pai s v ncul os s pgi nas dos
n vei s i nfer i or es da hi er ar qui a.

E XE MP L O: Mapa do s i t e mos t r a a es t r ut ur a hi er r qui ca
das pgi nas do s i t e.

12

Nes te ti po de es tr utur a Li near a home page o
t tul o, ou i ntr oduo, e todas as outr as pgi nas
acompanham em s eqnci a com v ncul os que
l evam de uma pgi na a outr a, nor mal mente
com opes de avanar e r etr oceder .

E XE MP L O: i ns t r ues pas s o-a-pas s o.
2. L i near

3. E s t r ut ur a L i near com al t er nat i vas

A es tr utur a l i near menos r gi da per mi ti ndo que o
l ei tor s e des vi e do cami nho pr i nci pal . Pode ter ,
por exempl o, uma es tr utur a l i near com
r ami fi caes al ter nati vas que par tam de um
ni co tr onco.

As r ami fi caes podem s e r euni r ao tr onco
pr i nci pal em al gum ponto mai s adi ante, em um
n vel mai s bai xo da es tr utur a, ou conti nuar s e
r ami fi cando em n vei s i nfer i or es s egui ndo
cami nhos pr pr i os at chegar a um " fi m" .

Al m de r ami fi car a es tr utur a l i near , voc pode
tambm ofer ecer v ncul os que per mi tam aos
l ei tor es avanar ou r etr oceder na cadei a, cas o
pr eci s em r ever al guma etapa ou j conheam
al guma par te do contedo.

Es tr utur a l i near e hi er r qui ca, em cada pgi na
do r otei r o voc deve ofer ecer v ncul os par a o
l ei tor avanar , r etr oceder , r etor nar ao i n ci o e
s ubi r um n vel
3. Combi nao E s t r ut ur a L i near com
Hi er r qui ca
13

P r xi ma et apa do pl anej ament o
S ua apr es entao da Web cons i s te em deter mi nar o contedo que s er apr es entado
em cada uma das pgi nas e cr i ar al guns v ncul os (l i nks ) s i mpl es que pos s i bi l i tem a
navegao por es s as pgi nas .
1. Col oque cada tpi co em uma pgi na, mas s e ti ver um gr ande nmer o
de tpi cos , a manuteno e
. . . vi ncul ao pode s e tor nar maante.

2. Defi na bem a for ma de navegao entr e as pgi nas . S e houver
for mas al ter nati vas , tor ne a
. . . navegao par a os l ei tor es a mai s i ntui ti va pos s vel .

3. T ome cui dado com o que s er i ncl ui ndo na home page, l embr e- s e, el a
s er a por ta da s ua
. . . apr es entao.

4. T enha s empr e em mente s eus obj eti vos . Pr ocur e no s e di s tanci ar
del es .

Di ca i mpor t ant e:

A di s pos i o de i magens , textos , v deos , etc. T udo que voc des ej a
col ocar em s ua pgi na pr eci s a s er col ocado de for ma agr advel ao l ei tor .
Da abor dar mos , de for ma ger al , a di agr amao. Es ta pal avr a vm do
mundo dos i mpr es s os . T r ata- s e da di s pos i o de el ementos que
compem uma pgi na. Deve s er obs er vado o tamanho das fontes ,
di s pos i o das i magens , for ma como o texto s er apr es entado, etc. Uma
boa di agr amao tambm gar ante o r etor no do i nter nauta.

Compos i o da equi pe
a) Anal i s tas de s i s temas (com exper i nci a em ger nci a de I nfor mao),
r es pons vel pel a or gani zao . . . . da i nfor mao;
14

b) Des i gn Gr fi co, r es pons vel pel o pr oj eto gr fi co;

c) Pr ogr amador es , que, dependendo do ti po de s i te, podem s er
pr ogr amador es HT ML, Java, JavaS cr i pt, . . . . CGI , PHP, AS P, etc;

A equi pe dever ter um coor denador , r es pons vel em fazer o tr abal ho
fl ui r de for ma efi ci ente, dentr o de um cr onogr ama apr ovei tando o
mxi mo de cada pr ofi s s i onal . Depoi s do s i te cons tr u do s ur gi r uma
outr a pes s oa: o WebMas t er , que s er r es pons vel pel a admi ni s tr ao
do s i te. mui to haver o acmul o de funes por membr os da equi pe.
Mas i mpor tante defi ni r o papel de cada na cons tr uo do s i te.

15
Vi s o Ger al do Dr eamweaver MX

r ea de T r abal ho:

P ai nel I ns er i r

O Pai nel I ns er i r per mi te tr abal har com vr i os ti pos de obj etos como tabel as , i magens ,
for mul r i os , etc. As opes es to or gani zadas em gui as : Comuns , Layout, T exto,
T abel as , Mol dur as , For mul r i os , Model os , Car acter es , M di a, Cabeal ho, S cr i pt e
Apl i cati vo.

Par a mos tr ar ou ocul tar o pai nel I ns er i r : es col ha wi ndow/ i ns er t

Par a expandi r ou r eduzi r o pai nel I ns er i r : cl i que na s et a de expans o, no cant o
es quer do da bar r a de t t ul o da B ar r a I ns er i r .

B ar r as de f er r ament as

Contm botes que pos s i bi l i tam di fer entes vi s ual i zaes da j anel a do documento
(vi s ual i zao do des enho e/ou do cdi go da pgi na)
16
Janel a do document o

Exi be o documento que es t s endo cr i ado e edi tado.
Ao cl i car com o boto di r ei to do mous e s obr e es s a r ea s o ati vados menus
contextuai s . Uti l i zados par a faci l i tar o aces s o aos comandos e pr opr i edades mai s
uti l i zados , r el ati vos ao obj eto ou j anel a que es ta s endo tr abal hada. Os menus
contextuai s contm apenas a l i s ta dos comandos que per tencem a s el eo atual .

I ns pet or de P r opr i edades

Na ver s o anter i or do Dr eamweaver , o i ns petor de pr opr i edades er a fl utuante, agor a
fi xo e fi ca al ocado na par te i nfer i or da r ea de tr abal ho. S ua funo edi tar ou i ns er i r
pr opr i edades em um el emento pr evi amente s el eci onado.

Par a mos tr ar ou ocul tar o i ns petor de pr opr i edades , bas ta s el eci onar na bar r a de
menus as opes Wi ndow/ P r oper t i es .

A mai or i a das al ter aes fei tas nas pr opr i edades i medi atamente apl i cada j anel a do
documento.

P ai ni s e gr upos de pai ni s

Os pai ni s e gr upos de pai ni s podem s er encai xados e combi nados confor me a s ua
neces s i dade.

P ar a expandi r e r eduz i r o gr upo de pai ni s :
Cl i que na s eta de expans o.
P ar a s epar ar o gr upo de pai ni s :
Ar r as te o gr upo atr avs da pi na.

P ar a agr upar a um pai nel
em out r o gr upo de pai ni s :
Cl i que n cone de
opes que fi ca
di r ei ta da j anel a

17

apr es entado um menu onde pos s vel mudar o gr upo, r enomear e fechar o gr upo de
pai ni s .

R edi menci onar j anel a

Ao cl i car no tamanho da j anel a
exi be o meu popup.
Par a faci l i tar o des enho de
pgi nas com boa apar nci a em
um deter mi nado tamanho, a
j anel a do documento poder s er
aj us tada a qual quer um dos
tamanhos l i s tados no menu.

Menu j anel a

Es te menu pr opor ci ona aces s o fci l a
todas as
j anel as , i ns pet or es e pal et as do
Dr eamweaver .

18
P r oj et o: S i t e B i oder m
Vamos cons tr ui r um s i te de uma empr es a fi ct ci a chamada " Bi oder m" . Atr avs des s e
s i te di s poni bi l i zar emos dados s obr e a empr es a (i ns ti tuci onal ), por ti fl i o dos pr odutos e
contato. Dur ante a confeco do s i te apr ender emos a uti l i zar mel hor as fer r amentas do
Dr eamweaver MX.

E s t r ut ur ando o s i t e
A or gani zao do s i te faci l i ta o entendi mento e economi za tempo. Par a confi gur ar um
s i te comece cr i ando uma es tr utur a de pas tas l ocai s em di s co. i mpor tante que es ta
es tr utur a fi que bem defi ni da, poi s el a s er a mes ma publ i cada no s er vi dor .
Cr i e uma pas ta chamada " bi oder m" e dentr o del a as s ub- pas tas :
document acao: ar mazenar a documentao do s i te (ar qui vos do wor d, etc)
i magens : ar mazenar as i magem uti l i zadas no s i te
empr es a: ar mazenar as pgi nas r efer entes ao as s unto empr es a
pr odut os : ar mazenar as pgi nas r efer entes ao as s unto pr odutos
at endi ment o: ar mazenar as pgi nas r efer entes ao as s unto atendi mento
di cas _ bel ez a: ar mazenar as pgi nas r efer entes ao as s unto di cas de bel eza
A es tr utur a das pas tas fi car as s i m:

19
V ncul os ( L i nks )

No hi per texto, as pgi nas s e l i gam umas as outr as atr avs de l i nks .
Exi s tem vr i os ti pos de l i nks :
I nt er nos - par a documentos de um mes mo s i te
E xt er nos - par a documentos de um outr o s i te
Cor r ei o E l et r ni co - par a envi ar mens agens atr avs do ger enci ador de e- mai l s
ncor as - par a s ees es pec fi cas de uma pgi na
Quando s e cr i a um l i nk pr eci s o defi ni r o cami nho entr e o documento de onde par te o
l i nk at o que es t s endo chamado. Es s e cami nho pode s er abs ol uto ou r el ati vo:
Cami nho abs ol ut o - us ado par a es tabel ecer um l i nk a um documento em
outr o s er vi dor , pr eci s o for necer a URL (ender eo) compl eta do documento
que es t s endo chamado. Por exempl o
ht t p: / / www.ccuec.uni camp.br / t r ei nament os / i ndex_ t r ei nament os .ht ml
.
Cami nho r el at i vo - us ado par a cr i ar v ncul os l ocai s na mai or i a dos s i tes .
ti l par a es tabel ecer v ncul os com documentos s i tuados na mes ma pas ta ou em
outr a pas ta do mes mo s i te, atr avs de cami nhos de es tr utur a das pas tas . Nes s e
cas o, col oca- s e s omente o s egmento do cami nho, no neces s r i o es peci fi car a
URL.
T omando como exempl o a es tr utur a do s i te bi oder m:
o Par a cr i ar um l i nk entr e o documento i ndex. html e um documento
(documento. html ) que es t na mes ma pas ta r a z - l i nk:
document o.ht ml (col oca apenas o nome do ar qui vo)
o Par a cr i ar um l i nk entr e o documento i ndex. html e um documento
(documento. html ) que es t dentr o da s ub- pas ta empr es a - l i nk:
empr es a/ document o.ht ml (col oca a pas ta e o nome do ar qui vo,
s epar ados pel o car acter / )
o Par a cr i ar um l i nk entr e o documento i ndex. html e uma i magem
(i magem. gi f) que es t dentr o da s ub- pas ta i magens - l i nk:
i magens / i magem.gi f (col oca a pas ta e o nome do ar qui vo, s epar ados
pel o car acter / )
o Par a cr i ar um l i nk entr e um documento que es t na s ub- pas ta empr es a
e uma i magem (i magem. gi f) que es t dentr o da s ub- pas ta i magens -
l i nk: ../ i magens / i magem.gi f
(s obe um n vel na es tr utur a de pas tas com .. e em s egui da col oca a
pas ta e o nome do ar qui vo, s epar ados pel o car acter / )
o S upondo que ti ves s emos um documento dentr o de uma s ub- pas ta
per tencente a s ub- pas ta empr es a, com um l i nk par a uma i magem
(i magem. gi f) que es t dentr o da s ub- pas ta i magens - l i nk:
../ ../ i magens / i magem.gi f (s obe doi s n vei s na es tr utur a de pas tas
com ../ .. e em s egui da col oca a pas ta e o nome do ar qui vo, s epar ados
pel o car acter / )
Par a defi ni r um l i nk de cor r ei o el etr ni co: col oque a expr es s o " mai l t o: " e em
s egui da o e- mai l do des ti natr i o, exempl o - mai l t o: f ul ano@ uol .com.br .
Com r el ao as ncor as , ver emos num dos pr xi mos tpi cos da apos ti l a.

20
Cr i ando um novo s i t e
Defi na um novo s i te, na bar r a de menus l ocal i zada na par te s uper i or da tel a cl i que em
S i t e/ Novo s i t e (s er apr es entado um as s i s tente par a a cr i ao do s i te).
Em Nome do s i t e di gi te o nome do s i te (BI ODERM) e em P as t a r ai z l ocal s el eci one a
pas ta onde fi car ar mazenado o s i te, nes s e cas o deve s er s el eci onada a pas ta
bi oder m.
A opo HT T P Addr es s per mi te a checagem dos l i nks do s i te. Deve- s e di gi tar o
ender eo fi nal (URL) que o s i te ter na Web.
Cl i que no boto OK.
Es s a a manei r a us ual de s e cr i ar um s i te, outr a al ter nati va o mtodo bs i co com a
aj uda de um as s i s tente do Dr eamweaver .

O pai nel ao l ado exi be todos os ar qui vos e pas tas do s i te atuando como um
ger enci ador de ar qui vos , per mi ti ndo copi ar , col ar , excl ui r , mover e abr i r ar qui vos da
mes ma manei r a que o Wi ndows Expl or er .
21

S el eci onando as i magens

Aces s e o ender eo
www. ccuec. uni camp. br /tr ei namentos /dr eamweaver /pagi na8_cr i ando_novo_s i te. html
Copi e as i magens abai xo par a a pas ta i magens . Cl i que com o boto di r ei to do mous e
s obr e as i magens e es col ha a opo s al var i magem como.

t opo.gi f

f ot o1_ home.gi f

22

f ot o2_ home.gi f

f ot o3_ home.gi f

f ot o4_ home.gi f

r odap.gi f

23
Cr i ando uma nova pgi na em br anco
Na bar r a de menus s el eci one Ar qui vo > Novo
apr es entada uma cai xa de di l ogo em que o us ur i o poder es col her o ti po de
documento.
Na gui a Ger al , es col ha a categor i a P gi na bs i ca e HT ML
Em s egui da, cl i que no boto Cr i ar

Def i ni ndo as pr opr i edades da pgi na

Na bar r a de menus , s el eci one Modi f i car > P r opr i edades da P gi na e confi gur e as
s egui ntes pr opr i edades :
T tul o (t tul o da pgi na): model o
Fundo (cor de fundo): # F F F F F F (br anco)
T exto (cor do texto): # 000000 (pr eto)
Li nks (cor dos l i nks ): # 333399 (azul )
Li nks vi s i tados (cor dos l i nks vi s i tados ): # CC0000 (l i l s )
Li nks ati vos (cor do l i nk no momento em que el e ati vado): # 663399 (ver mel ho)
Mar gem s uper i or : 1
Cl i que no boto OK.

24

Obs : Ao abr i r a pal eta de cor es , o pontei r o do mous e s e tr ans for ma em um conta-
gotas que pode " car r egar " qual quer cor de obj etos das j anel as aber tas do
Dr eamweaver . Movi mente o mous e e per ceba que el e s e al ter a. Cl i que na cor
des ej ada.

25
T abel as
A manei r a mai s comum de di s por os el ementos numa pgi na tr abal hando com
tabel as . Uma tabel a for mada de tr s el ementos :
L i nha: es paamento hor i zontal entr e uma bor da e outr a;
Col una: es paamento ver ti cal entr e uma bor da e outr a;
Cl ul a: es pao r es ul tante da i nter s eo de uma l i nha com uma col una.

Exi s tem duas manei r as de cr i ar tabel as : pel o Pai nel I ns er i r Comuns > I ns er i r t abel a,
ou pel a bar r a de menus I ns er i r > T abel a.
Vamos cr i ar uma tabel a com 3 l i nhas e 1 col una, 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.
Cl i que em OK.

P r opr i edades de t abel a

Quando a tabel a es ti ver s el eci onada, s uas car acter s ti ca apar ecer o no I ns petor de
Pr opr i edades . No campo Al i nhar s el eci one a opo Ao cent r o.

26
I ns er i ndo mai s l i nhas ou col unas na t abel a

S el eci one uma l i nha da tabel a e cl i que com o boto di r ei to do mous e s obr e a r ea
s el eci onada, no menu de opes que s er exi bi do s el eci one as opes T abel a >
I ns er i r L i nhas ou Col unas . Na outr a j anel a que s e abr e s el eci one o n de l i nhas ou
col unas que des ej a i ns er i r e a pos i o em que el as s er o i ncl u das .

Di vi di ndo ou mes cl ando cl ul as , l i nhas ou col unas

Par a di vi di r : S el eci one a cl ul a, l i nha ou col una que pr etende di vi di r e no I ns petor de
pr opr i edades s el eci one as opes Cl ul a > Di vi de as cl ul as em l i nha ou col unas

Par a mes cl ar : S el eci one as cl ul as , l i nhas ou col unas que pr etende mes cl ar e no
I ns petor de pr opr i edades s el eci one as opes Cl ul a/ L i nha > Mes cl ar as cl ul as
s el eci onadas ut i l i z ando ext ens es

27

E xcl ui ndo l i nhas e col unas
Pos i ci one o cur s or s obr e a l i nha ou col una a s er excl u da, cl i que s obr e a r ea
s el eci onada com o boto di r ei to do mous e e no menu de opes que s er exi bi do
es col ha as opes T abel a > Del et ar L i nha/Del et ar Col una

Obs .: Aps fazer os tes tes com a tabel a, dei xe- a com o for mato i ni ci al , ou s ej a, com 3
l i nhas e 1 col una.

I ns er i ndo i magens

Par a i ns er i r uma i magem: pel o Pai nel I ns er i r Comuns > I magem ou pel a bar r a de
menus I ns er i r > I magem.

Na pr i mei r a l i nha da tabel a i ns i r a a i magem t opo.gi f (s el eci one a i magem topo. gi f no
di r etr i o " i magens " ).

Na ter cei r a l i nha da tabel a i ns i r a a i magem r odape.gi f (tambm ar mazenada no
di r etr i o " i magens " ).

I mpor t ant e: Na opo UR L : R el at i va a: es col ha a opo document o. Par a que s ej a
cr i ado cor r etamente o cami nho r el ati vo at as i magens .

28
Mapeament o de i magens
O mapeamento de i magens uti l i zado quando h neces s i dade de col ocar v ncul o em
apenas uma par te de uma i magem, e no na i magem toda.
S el eci one a i magem topo. gi f (na pr i mei r a l i nha da tabel a). Vamos mapear a r ea da
i magem onde apar ece a pal avr a " Home" , col ocando um l i nk par a a pgi na i ndex. html .
Com a i magem topo. gi f s el eci onada, vej a que o i ns petor de pr opr i edades di s poni bi l i za
tr s ti pos de mapas : r etangul ar , oval e pol i gonal . S el eci one a opo r etangul ar , como
mos tr a a fi gur a abai xo.

Aps s el eci onar a opo mapa r etangul ar , mova o cur s or novamente s obr e a i magem
topo. gi f, o cur s or as s umi r a for ma de cr uz. Des enhe um r etngul o em vol ta da
pal avr a Home ( 1) e no campo Li nk do i ns petor de pr opr i edades di gi te o ender eo da
pgi na que s er aces s ada: i ndex. html ( 2) . Vej a a fi gur a abai xo:

Repi ta o mes mo pr ocedi mento par a os tens do menu. Com a i magem topo. gi f
s el eci onada, es col ha a opo mapa r etangul ar :
Des enhe um r etngul o em vol ta da pal avr a E mpr es a e no campo Li nk do
i ns petor de pr opr i edades di gi te o ender eo da pgi na que s er aces s ada:
. . /empr es a/empr es a. html
29
Des enhe um r etngul o em vol ta da pal avr a P r odut os e no campo Li nk do
. . /pr odutos /pr odutos . html
Des enhe um r etngul o em vol ta da pal avr a At endi ment o e no campo Li nk do
. . /atendi mento/atendi mento. html
Des enhe um r etngul o em vol ta das pal avr as Di cas de B el ez a e no campo
Li nk do i ns petor de pr opr i edades di gi te o ender eo da pgi na que s er
aces s ada: . . /di cas _bel eza/di cas _bel eza. html
Obs . : O mapeamento vl i do apenas par a uma pgi na, nor mal mente s er i a neces s r i o
r epeti r es s e pr ocedi mento par a as demai s pgi nas do s i te. No entanto, s e qui s er
mapear a i magem uma ni ca vez, e fazer i s s o val er par a todas as pgi nas , ter que
uti l i zar o r ecur s o de Model os , como ver emos a s egui r .

30
Model os
Os model os s o mui to uti l i zados par a faci l i tar o tr abal ho r epeti ti vo. Quando s e tem um
l ayout de pgi na que s er apr ovei tado vr i as vezes .
Poder amos uti l i zar o pr ocedi mento de copi ar a pgi na ou s al var como, mas s e
houves s em mudanas no l ayout das pgi nas , ter amos que al ter - l as uma por uma. A
vantagem de s e uti l i zar model o que em cas o de mudana, todas as pgi nas s o
al ter adas de uma vez. Per mi te tambm cr i ar r egi es bl oqueadas e r egi es edi tvei s ,
mantendo as s i m a i ntegr i dade da pgi na or i gi nal .

As r egi es edi tvei s s o as r eas da pgi na que poder o s er al ter adas . Quando s e cr i a
um model o todas as r eas es to bl oqueadas , par a edi tar es s as r eas neces s r i o cr i ar
r egi es edi tvei s .

Def i ni do r egi es edi t vei s

S el eci one o texto ou a cl ul a que des ej a tor nar edi tvel , nes s e cas o es col ha a s egunda
l i nha da tabel a na qual es tamos tr abal hando.

Na bar r a de menus es col ha I ns er i r > Obj et os de Model os > R egi o E di t vel ou
atr avs do Pai nel I ns er i r es col ha a gui a Model os , cl i que no ter cei r o boto R egi o
E di t vel . Ao apar ecer uma mens agem avi s ando que o documento s er conver ti do em
model o, cl i que em OK.
Em s egui da pr eencha o nome da r egi o: cont eudo.
Cl i que no boto OK, note que es s a r ea fi car contor nada por um r etngul o, com o
nome da r ea em ci ma.
S al var emos es s a pgi na como um model o que s er uti l i zado par a as demai s pgi nas
do s i te. Na bar r a de menus s el eci one Ar qui vo / S al var como Model o, s al ve com o
nome de bi oder m_ model o. O ar qui vo de model o um ar qui vo com extens o . DWT e
fi car ar mazenado na pas ta T empl ates , que s er cr i ada automati camente na r ai z do
s i te.
Feche o model o.

31
Cr i ando pgi nas a par t i r de model os
O model o que cr i amos s er a bas e par a as demai s pgi nas do s i te, onde s er al ter ada
apenas a r egi o edi tvel que denomi namos de cont eudo. Ao cr i ar uma nova pgi na a
par ti r de um model o pos s vel defi ni r s e el a per manecer anexada ao model o.
Defi ni ndo es s a opo, quando o model o for al ter ado, todas as pgi nas anexadas a el e
s er o atual i zadas .

A pr i mei r a pgi na que cr i ar emos a par ti r do model o s er a pgi na i ni ci al do nos s o s i te
denomi nada i ndex.ht ml . Na bar r a de menus es col ha Ar qui vo > Novo, es col ha a gui a
Model os ( 1) , 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
( 2) e o model o bi oder m_ model o ( 3) .
Mantenha a opo atual i zar a pgi na quando o model o for al ter ado ( 4) , des s a for ma,
ao atual i zar o model o, todos os documentos cr i ados a par ti r del e s er o atual i zados .
Cl i que no boto Cr i ar .

S al ve o documento com o nome de i ndex.ht ml , na pas ta r a z do s i te.

32
Cr i ando a pgi na i ni ci al do s i t e
Na pgi na i ndex. html temos ento uma tabel a com 3 l i nhas e uma col una. A 1 e 3
l i nhas da tabel a es to bl oqueadas poi s s er o el ementos fi xos em todas as pgi nas do
s i te, vamos tr abal har na s egunda l i nha da tabel a, que uma r egi o edi tvel .
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 : 2 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 350, 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 410.
Na pr i mei r a cl ul a da tabel a i ns i r a a i magem foto1_home. gi f (ar mazenada na
pas ta i magens )

Na s egunda cl ul a da tabel a i ns i r a a i magem foto2_home. gi f (ar mazenada na
pas ta i magens )

Na ter cei r a cl ul a da tabel a i ns i r a a i magem foto3_home. gi f (ar mazenada na
pas ta i magens )
33

Na quar ta cl ul a da tabel a i ns i r a a i magem foto4_home. gi f (ar mazenada na
pas ta i magens )

S al ve novamente es s a pgi na como i ndex.ht ml e em s egui da feche- a.

Na bar r a de menus , s el eci one Ar qui vo > S al var como. S al ve com o nome de
i ndex.ht ml na pas ta r a z do s i te. Feche o documento.

T ecl e F 12 par a vi s ual i zar a pgi na no navegador .

Obs . : Cl i cando na Bar r a de menus : Ar qui vo > Ver i f i car a pgi na > Ver i f i car L i nks ,
pos s vel tes tar s e os l i nks es to Ok.

34
Cr i ando a pgi na empr es a.ht ml
Aps ter mos cr i ado a pgi na i ni ci al do s i te, cr i ar emos as pgi nas s ecundr i as de
acor do com o menu pr i nci pal : empr es a. html , pr odutos . html , atendi mento. html e
di cas _bel eza. html .

Cr i ar emos agor a a pgi na empr es 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 ( 1) ,
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 ( 2) e o
model o bi oder m_ model o ( 3) .
Mantenha a opo atual i zar a pgi na quando o model o for al ter ado ( 4) , 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 empr es a.ht ml , na pas ta empr es a.
I ns er i r > T abel a. A nova tabel a ter as s egui ntes pr opr i edades : 1 l i nha, 2
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
35
(# CCCCCC).

Defi na o pos i ci onamento ver ti cal des s a col una par a No Al t o. Faa o mes mo
par a a outr a col una. No I ns petor de pr opr i edades , campo Ver t es col ha No al t o.

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.

Dentr o des s a tabel a, i ns i r a o texto r efer ente a empr es a. O texto pode s er
copi ado do model o texto_empr es a que es t na pas ta documentacao, s copi ar
e col ar . O texto deve fi car pos i ci onado na par te s uper i or da tabel a, par a i s s o
pos i ci one o cur s or em qual quer l ugar dentr o da tabel a, e no I ns petor de
Pr opr i edades , no campo Ver t, es col ha No Al t o.

36
E s t i l os HT ML
Os es ti l os HT ML s o uti l i zados par a s al var for mataes de texto e par gr afos e per mi ti r
s ua r euti l i zao. Os es ti l os HT ML afetar o apenas os textos aos quai s for em apl i cados .
Abr a a pal eta Des i gn que fi ca do l ado di r ei to da tel a e es col ha a gui a E s t i l os HT ML :

L i mpando a f or mat ao do t ext o
S el eci one o texto des ej ado
Cl i que em L i mpar o es t i l o da s el eo par a r eti r ar a for matao do texto
s el eci onado. Ou
Cl i que em L i mpar o es t i l o do par gr af o par a r eti r ar a for matao do
par gr afo i ntei r o
Faa um tes te: s el eci one o texto que acabamos de copi ar e cl i que em L i mpar o es t i l o
da s el eo.

Def i ni ndo um es t i l o HT ML
Na gui a E s t i l os HT ML cl i que no cone novo es ti l o (fol hi nha com s i nal de + )
Na cai xa de di l ogo que exi bi da, d um nome ao es ti l o que s er cr i ado, por
exempl o T ext o, em s egui da es col ha as opes S el eo e L i mpar o es t i l o
exi s t ent e. Nos atr i butos da fonte es col ha Ver dana, tamanho 2 e cor pr eta,
cl i que no boto OK.
37
S er cr i ado um novo es ti l o, que poder s er apl i cado a qual quer texto.

Faa um tes te: s el eci one novamente o texto que acabamos de copi ar e apl i que o es ti l o
HT ML T ext o. s dar um dupl o cl i que no es ti l o t ext o que es t no pai nel Des i gn.

Par a r emover um es ti l o HT ML cr i ado: abr a a pal eta Des i gn e es col ha a gui a E s t i l os
HT ML , cl i que com o boto di r ei to do mous e s obr e o es ti l o des ej ado e es col ha E xcl ui r .

Par a al ter ar as pr opr i edades de um es ti l o HT ML exi s tente : abr a a pal eta Des i gn e
es col ha a gui a E s t i l os HT ML , cl i que com o boto di r ei to do mous e s obr e o es ti l o
des ej ado e es col ha E di t ar .

S al ve novamente es s a pgi na como empr es a.html .

38
Cr i ando a pgi na pr odut os .ht ml
Cr i ar emos agor a a pgi na pr odut os .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, es s e documento tambm s er atual i zado.

S al ve o documento com o nome de pr odut os .ht ml , na pas ta pr odut os .

Aces s e www.ccuec.uni camp.br / t r ei nament os / dr eamweaver / pagi na16_ pr odut os .ht ml e
s al ve as i magens batom. gi f, cr eme. gi f e per fume. gi f na pas ta i magens .

(# CCCCCC).

l ar gur a de 580 pi xel s , centr al i ze es s a tabel a. Dentr o del a i ns i r a o texto
r efer ente aos pr odutos , que pode s er copi ado do model o texto_pr odutos
(ar mazenado na pas ta documentacao), s copi ar e col ar . O texto deve fi car
pos i ci onado na par te s uper i or da tabel a, par a i s s o pos i ci one o cur s or em
qual quer l ugar dentr o da tabel a, e no I ns petor de Pr opr i edades , no campo Ver t,
es col ha No al t o. O ti mo par gr afo do texto ter mi na com a fr as e " Par a s aber
mai s cl i que aqui " , tr ans for me a pal avr a " aqui " num l i nk, s el eci one a pal avr a e
no campo L i nk do I ns petor de pr opr i edades di gi te ../ i ndex.ht ml

39
Aps copi ar a des cr i o, pul e 1 l i nha e i ns i r a uma tabel a com 3 l i nhas e 2
col unas , l ar gur a de 540 pi xel s e bor da = 0. Dei xe- a centr al i zada.

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

S el eci one toda a tabel a e no campo Cor de f undo do I ns petor de pr opr i edades
defi na a cor ci nza (cdi go # CCCCCC)
Ai nda com toda a tabel a s el eci onada al ter e o campo E s pao ent r e as cl ul as
par a o val or 2.

S el eci one s omente as cl ul as da tabel a e al ter e a cor de fundo par a br anco
(cdi go # FFFFFF). Par a s el eci onar s omente as cl ul as da tabel a, s el eci one as
cl ul as da pr i mei r a l i nha e com o boto es quer do do moude pr es s i onado
s el eci one as demai s

Como r es ul tado di s s o s er cr i ada uma es pci e de bor da s epar ando as cl ul as da
tabel a

Agor a i ns i r a as i magens batom. gi f, cr eme. gi f e per fume. gi f (que s e encontr am
na pas ta i magens ) r es pecti vamente na 1 col una da 1 l i nha, na 1 col una da
2 l i nha e na 1 col una da 3 l i nha

Na 2 col una da 1 l i nha i ns i r a o s egui nte texto:
" Os batons Bi oder m fi xam por mai s tempo, di s pens ando aquel es r etoques
fr equentes na maqui agem. Es to di s pon vei s em uma gr ande var i edade de
cor es . "

Na 2 col una da 2 l i nha i ns i r a o texto:
" O cr eme hi dr atante Bi oder m i ndi cado par a o r os to, pos s ui fi l tr o s ol ar FPS 20
que pr otege contr a os r ai os ul tr avi ol eta do s ol UV- A e UV- B. Al m di s s o dei xa a
pel e maci a e no engor dur a. "

Na 2 col una da 3 l i nha i ns i r a o texto:
" O per fume Bi oder m pos s ui uma fr agr nci a di s cr eta e agr advel que d uma
s ens ao r efr es cante. T em ao pr ol ongada. "

40

A tabel a fi car as s i m:

S al ve novamente es s a pgi na e dei xe- a aber ta.

41
E s t i l os CS S
Os es ti l os CS S s o mai s abr andentes que os es ti l os HT ML. uma tecnol ogi a que no
faz par te do HT ML padr o, um conj unto de tags que aj udam a contr ol ar a apar nci a
e a for matao de textos .

Cr i ando um E s t i l o CS S per s onal i z ado

Vamos cr i ar um es ti l o que for mate o texto/contedo das pgi nas (ti po e tamanho da
fonte e texto j us ti fi cado). Es s e es ti l o s er apl i cado ao texto da pgi na pr odutos . html
Cr i e uma pas ta chamada cs s dentr o da pas ta bi oder m (Com o pai nel
Ar qui vos aber to, cl i que com o boto di r ei to do mous e s obr e a pas ta
S i t e-B I ODE R M e no menu que s e abr e s el eci one Nova pas t a e nomei e a
pas ta como cs s
Abr a a pal eta Des i gn que fi ca do l ado di r ei to da tel a e es col ha a gui a E s t i l os
CS S
Na gui a E s t i l os CS S cl i que no cone Novo es t i l o CS S (fol hi nha com s i nal de + )
Na cai xa de di l ogo que exi bi da, d um nome ao es ti l o que s er cr i ado, por
exempl o cor po
No campo T i po: s el eci one Cr i ar es t i l o per s onal i z ado ( cl as s e)
No campo Def i ni r em: s el eci one ( Novo ar qui vo de f ol ha de es t i l os ) e cl i que
em OK
Na cai xa de di l ogo que exi bi da, no campo S al var s el eci one a pas ta cs s e no
campo Nome do ar qui vo: di gi te es t i l os .cs s (es s e s er o ar qui vo que vai
ar mazenar os es ti l os ). Em s egui da cl i que no boto S al var
S er exi bi do o pai nel de es ti l os par a que voc defi na as pr opr i edades do es ti l o:
Na categor i a T i po defi na fonte = ver dana, tamanho = 12 pi xel s , es ti l o =
nor mal , cor = pr eto (# 000000)

Na categor i a B l oco defi na al i nhamento do texto = j us ti fi car

42

Cl i que em OK.

S er cr i ado o ar qui vo es t i l os .cs s na pas ta bi oder m/ cs s , contendo o es ti l o cor po.
Podemos i ns er i r outr os es ti l os dentr o des s e ar qui vo, como por exempl o um es ti l o que
per s onal i ze os l i nks , fazendo com que o l i nk s fi que s ubl i nhado no momento em que o
cur s or es ti ver s obr e el e. Par a i s s o, edi te o ar qui vo es ti l os . cs s e i ns i r a o s egui nte es ti l o
(l ogo depoi s do es ti l o cor po):

a. l i nkdes taq: l i nk { col or : bl ack; font- s i ze: 7. 5pt; font- fami l y: Ver dana, Ar i al , s ans -
s er i f; text- decor ati on: none }
a. l i nkdes taq: acti ve { col or : bl ack; font- s i ze: 7. 5pt; font- fami l y: ver dana, ar i al , s ans -
a. l i nkdes taq: vi s i ted { col or : bl ack; font- s i ze: 7. 5pt; font- fami l y: ver dana, ar i al , s ans -
a. l i nkdes taq: hover { col or : bl ack; font- s i ze: 7. 5pt; font- fami l y: ver dana, ar i al , s ans -
s er i f; text- decor ati on: under l i ne }

S alve o arquivo estilos.css.

Os es ti l os cr i ados , cor po e l i nkdes t aq, devem apar ecer no pai nel Des i gn/Es ti l os
HT ML. Apl i que os es ti l os na pgi na pr odutos . html :
S el eci one o texto da des cr i o que fi ca antes da tabel a dos pr odutos e apl i que
nel e o es ti l o cor po.
S el eci one a pal avr a/l i nk " aqui " e apl i que nel a o es ti l o l i nkdes t aq
Apl i que tambm o es ti l o cor po nos textos que es to dentr o da tabel a de
pr odutos
T ecl e F12 par a vi s ual i zar a pgi na no navegador . Na des cr i o a fonte s er
al ter ada e o texto fi car j us ti fi cado, quanto ao l i nk " aqui " , s fi car s ubl i nhado
quando o cur s or es ti ver s obr e el e.

S al ve novamente a pgi na.
43
Quando um es ti l o CS S apl i cado, o Dr eamweaver cr i a uma l i nha de cdi go dentr o da
tag head, que s i nal i za o ar qui vo de es ti l os que es t s endo uti l i zado. De acor do com o
exempl o abai xo, bas eado na es tr utur a do s i te Bi oder m, par a aces s ar o ar qui vo
es ti l os . cs s a par ti r de uma pgi na do s i te, deve- s e s ubi r um n vel na es tr utur a de
pas tas e ento aces s ar a pas ta cs s :
< head>
< ti tl e> < /ti tl e>
< meta>
< l i nk hr ef = " ../ cs s / es t i l os .cs s " r el = " s t yl es heet " t ype= " t ext / cs s " >
< /head>

A s egui r podemos ver como fi cou o cdi go html ao r eceber um es ti l o CS S :
 P ar a s aber mai s cl i que < a hr ef = " i ndex.ht ml "
cl as s = " l i nkdes t aq" > aqui < / a> 

O texto " Par a s aber mai s cl i que aqui " r ecebeu o es ti l o cor po e a pal avr a " aqui " , que
um l i nk, r ecebeu tambm o es ti l o l i nkdes t aq.

Como car r egar os es t i l os par a uma nova pgi na
Abr a a pal eta Des i gn e es col ha a gui a E s t i l os CS S
Na gui a E s t i l os CS S cl i que no cone Anexar a f ol ha de es t i l os (o 1 cone
com uma cor r ente)
Em s egui da s el eci one o ar qui vo de es ti l os des ej ado

44
Cr i ando a pgi na at endi ment o.ht ml
O Dr eamweaver di s poni bi l i za vr i os r ecur s os par a a cr i ao de for mul r i os . O S i te
Bi oder m ter uma pgi na de atendi mento ao cons umi dor , onde s er di s poni bi l i zado um
for mul r i o cuj a funo s er obter dados do cons umi dor e envi - l os por e- mai l r ea
de atendi mento da empr es a.
Cr i ar emos agor a a pgi na at endi ment o.ht ml , tambm a par ti r do model o.
bi oder m_ model o.

S al ve o documento com o nome de at endi ment o.ht ml , na pas ta
at endi ment o.
I ns er i r > T abel a. A nova tabel a ter as s egui ntes pr opr i edades : 1 l i nha, 2

(# CCCCCC).

l ar gur a de 580 pi xel s , centr al i ze es s a tabel a. Dentr o des s a tabel a, i ns i r a o
for mul r i o, como ver emos a s egui r .

45
F or mul r i o

1) No cor po da pgi na, dentr o da tabel a, di gi te o t tul o " Atendi mento ao Cons umi dor "
em negr i to. No I ns petor de pr opr i edades es col ha fonte ver dana, tamanho 2.

2) Pul e 1 l i nha e di gi te " Contato" e em s egui da os dados da empr es a (e- mai l , tel efone,
fax)

3) Em s egui da di gi te: " S e voc tem al guma dvi da ou s uges to s obr e os nos s os
pr odutos , pr eencha o for mul r i o abai xo: "

4) Na bar r a I ns er i r , s el eci one o tem F or mul r i o

5) S el eci one a pr i mei r a opo F or mul r i o, par a que el e cr i e a tag for m (como s e
fos s e a mol dur a do for mul r i o)

6) Dentr o da tag for m, pul e 1 l i nha e di gi te " Nome: "
Na fr ente do nome cr i e um campo de for mul r i o, s er um campo texto:
cr i e um campo texto cl i cando na 2 opo Campo 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 do
campo:
Campo de texto (nome do campo): nome
Lar g. do car acter e (tamanho da mol dur a do campo): 50
No max. de car act. (nmer o mxi mo de car acter es que poder o s er di gi tados ): 50
T i po (ti po de l i nha): L i nha s i mpl es
Val or i ni ci al (val or i ni ci al ): dei xar em br anco

7) pul e 1 l i nha e di gi te " E- mai l : "
Na fr ente do e- mai l cr i e um campo de for mul r i o, s er um campo texto:
cr i e um campo texto cl i cando na 2 opo T ext F i el d

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): emai l
No max. de car act. (nmer o mxi mo de car acter es que poder o s er di gi tados ): 40
T i po (ti po de campo): L i nha s i mpl es
Val or i ni ci al (val or i ni ci al ): dei xar em br anco

8) pul e 1 l i nha e di gi te " Fai xa Etr i a: "
pul e 1 l i nha e cl i que na 6 opo B ot o de r di o, em s egui da di gi te " at 20 anos "
pul e 1 l i nha e cl i que na 6 opo B ot o de r di o, em s egui da di gi te " de 20 a 40 anos "
pul e 1 l i nha e cl i que na 6 opo B ot o de r di o, em s egui da di gi te " aci ma de 40
anos "

Fai xa Etr i a:
at 20 anos
de 20 a 40 anos
aci ma de 40 anos

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 :
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 :
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:

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

Campo de texto (nome do campo): s uges toes
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

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).
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.

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.
bi oder m_ model o.

S al ve o documento com o nome de di cas _ bel ez a.ht ml , na pas ta
di cas _ bel ez a.

(# CCCCCC).

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.
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.

Treinamento Dreamweaver Básico

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Treinamento Dreamweaver Básico

Enviado por

Direitos autorais:

Formatos disponíveis

Dreamweaver MX Bsico

Diviso de Servios Comunidade - Centro de Computao - Unicamp

Você também pode gostar