Dream Weaver MX - Unicamp

Dreamweaver MX – Básico
Licenciamento de Uso
Este documento é propriedade intelectual © 2002 do Centro de Computação da Unicamp

e distribuído sob os seguintes termos:
1. As apostilas publicadas pelo Centro de Computação da Unicamp podem ser

reproduzidas e distribuídas no todo ou em parte, em qualquer meio físico ou
eletrônico, desde que os termos desta licença sejam obedecidos, e que esta
licença ou referência a ela seja exibida na reprodução.
2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas

externas, sua origem e atribuições de direito autoral (o Centro de Computação da
Unicamp e seu(s) autor(es)).
3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer

informação contida neste documento devem ser regidas por estas mesmas
normas de distribuição e direitos autorais. Ou seja, não é permitido produzir um
trabalho derivado desta obra e impor restrições à sua distribuição. O Centro de
Computação da Unicamp deve obrigatoriamente ser notificado
(treinamentos@ccuec.unicamp.br) de tais trabalhos com vista ao aperfeiçoamento
e incorporação de melhorias aos originais.
Adicionalmente, devem ser observadas as seguintes restrições:

• A versão modificada deve ser identificada como tal
• O responsável pelas modificações deve ser identificado e as modificações
datadas
• Reconhecimento da fonte original do documento
• A localização do documento original deve ser citada
• Versões modificadas não contam com o endosso dos autores originais a
menos que autorização para tal seja fornecida por escrito.
A licença de uso e redistribuição deste material é oferecida sem nenhuma garantia de

qualquer tipo, expressa ou implícita, quanto a sua adequação a qualquer finalidade. O
Centro de Computação da Unicamp não assume qualquer responsabilidade sobre o uso
das informações contidas neste material.
Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 2

Í n dice
I nter net 4
HT ML – Pr incipais T ags 6
Dicas par a a cons tr ução de um s ite 10
Vis ão ger al do Dr eamweaver MX 15
Pr oj eto – S ite B ioder m 18
Vínculos (Links ) 19
Cr iando um novo s ite 20
Cr iando uma nova página em br anco 23
T abelas 25
Mapeamento de imagens 28
Modelos 30
Cr iando páginas a par tir de modelos 31

Cr iando a página inicial do s ite 32
Cr iando a página empr es a 34

Es tilos HT ML 36
Cr iando a página pr odutos 38

Es tilos CS S 41
Cr iando a página atendimento 44
For mulár io 45
Cr iando a página dicas _ belez a 48
Âncor as 49
Última atualiz ação: 12/08/2003

I n t er n et
A I nter net não não s e cons titui apenas numa r ede de computador es , mas numa r ede
de r edes , conectadas umas as outr as . Um computador ligado a I nter net pode
compar tilhar r ecur s os e infor mações a nível mundial.
Ex is tem vár ios s er viços que utiliz am es s a es tr utur a e um dos mais conhecidos é a
Wor ld Wide Web, ou s imples mente Web. É for mada por milhões de lugar es chamados
s ites , que s ão localiz ados atr avés de s eus ender eços . Es s e s is tema de ender eços é
também chamado de URL (Unifor m Res our ce Locator , localiz ador unifor me de
r ecur s os ).
A Web r evolucionou a I nter net por r eunir inter face gr áfica, r ecur s os de multimídia e
hiper tex to. Pos s ibilitou a cons tr ução de páginas gr áficas , que podem conter fotos ,
animações , tr echos de vídeo e s ons .
As páginas Web s ão es cr itas na linguagem H T ML (Hyper tex Mar kup Language), ou

s ej a, Linguagem de Mar cação de Hiper tex to.
Nas páginas , a infor mação es tá or ganiz ada de for ma hiper tex tual, ou s ej a, as páginas
es tão ligadas entr e s i, atr avés de links . I s s o per mite uma leitur a não linear do tex to.
H iper t ex t o é o conceito que pos s ibilita a " navegação" entr e s egmentos de tex to
independentemente de s ua s eqüência linear ou de s ua localiz ação, o leitor s alta de
uma infor mação a outr a, não neces s ar iamente numa or dem s eqüencial.
Um s ite é um conj unto de páginas Web es tr utur adas s obr e um deter minado conteúdo,
es te conteúdo pode conter : infor mações , tex tos , imagens , ilus tr ações , pr ogr amas ,
tex tos his tór icos , diagr amas , j ogos , etc. A página de entr ada de um s ite é chamada de
" Home Page" .
O N avegador
Par a que o conteúdo de um documento HT ML pos s a s er for matado e ex ibido devemos

us ar um pr ogr ama chamado br ows er , ou navegador . Os mais conhecidos s ão o
I nter net Ex plor er e Nets cape Navigator .
O navegador funciona independentemente de s e es tar conectado a I nter net. A melhor

for ma de s e tr abalhar des envolvendo uma página HT ML é off- line, des conectado.
Pr imeir o você cr ia as páginas em s eu computador e as tes ta por meio do navegador .
Depois , deve colocá- las em um s er vidor Web par a que outr as pes s oas também pos s am
vis ualiz á- las .
S er vidor W eb
S ão computador es equipados com s oftwar e que per mite " s er vir " a uma r ede de
computador es . Quanto mais potente o s er vidor maior e melhor poder á s er a r ede por
ele atendida. S ão máquinas de alta capacidade, com gr ande poder de pr oces s amento e
conex ões veloz es . Podemos us ar como ex emplo a máquina Obelix , que atende a
Unicamp.

F er r am en t as n eces s ár ias par a a cr iação de págin as
É r ecomendável pos s uir alguns conhecimentos bás icos da linguagem HT ML, embor a
atualmente s ej a pos s ível cr iar um s ite utiliz ando unicamente os editor es de páginas ,
que ger am todo o código. Ex is tem vár ios s oftwar es par a edição de páginas html no
mer cado, os mais conhecidos s ão: Nets cape Compos er (gr atuito), Fr ontPage da
Micr os oft, Dr eamweaver da Macr omedia e GoLive da Adobe.
É pr ecis o também ter um navegador ins talado, par a poder mos tes tar as páginas .

H T ML - P r in cipais T ags
Como j á dis s emos , o Dr eamweaver MX dis ponibiliz a vár ias fer r amentas que facilitam a
confecção de páginas Web, no entanto, é des ej ável que s e conheça pelo menos as tags
bás icas da linguagem HT ML par a o cas o de ter que faz er uma manutenção no s ite.
A s eguir , as tags bás icas da linguagem html:
Qu ebr as de L in h a
 
Ex emplo: Res ultado:

 Pr imeir a linha. S egunda Pr imeir a linha.
linha.
S egunda linha.
 

Pr imeir a linha. S egunda linha. Pr imeir a linha.
S egunda linha.
t ex t o em n egr it o
 

Cur s o de Confecção de Web - bás ico Cur s o de Cof ecção de W eb - bás ico
t ex t o em it álico


Centr o de Computação - CCUEC Centr o de Computação - CCUEC
cen t r aliz ar t ex t o
< cen t er > < / cen t er >

t ex t o à dir eit a
< r igh t > < / r igh t >
t ex t o à es qu er da
< lef t > < / lef t >

< center > Centr o de Computação< /center > Centr o de Computação
< r ight> Centr o de Computação< /r ight> Centr o de Computação
< left> Centr o de Computação< /left> Centr o de Computação
F or m at ação do t ex t o

 Centr o Centro de Computação
de Computação
L is t as N ão N u m er adas

< UL> • UNI CAMP
< LI > UNI CAMP • UNES P
< LI > UNES P
< /UL>
L is t as N u m er adas

< OL> 1. UNI CAMP
< LI > UNI CAMP
2. UNES P
< LI > UNES P
< /OL>
B ar r as h or iz on t ais
< H R > = mar cação de linha
S I Z E = es pes s ur a

W idt h = lar gur a

< HR S I Z E= 2 width= 100% >
I n s er ir im agen s

< img s r c= " ex emplos /imagem.j pg>
L in ks
< A> < / A>

H R E F = r efer ência a página a s er aber ta
T AR GE T = _ B L AN K : abr e a página em uma nova j anela do br ows er

Chamando uma página: (ar quivos com ex tens ão .htm ou .html)

< A HREF= " /ex emplos /Pagina.html" T ARGET = _ B LANK > Clique Clique aqui! ! !
aqui! ! ! < /A>
E x ibin do u m a im agem : ( ar qu ivos com ex t en s ão .gif ou .j pg)

< A HREF= " /ex emplos /I magem.j pg" T ARGET = _ B LANK > Clique Clique aqui! ! !
aqui! ! ! < /A>
F az en do dow n load de u m ar qu ivo: ( ar qu ivos com ex t en s ão .D OC, .T XT , .Z I P )

< A HREF= " /ex emplos /tex to.tx t" T ARGET = _ B LANK > Clique Clique aqui! ! !
aqui! ! ! < /A>

R eceben do e-m ails :

< A HREF= " mailto: x x x x @ unicamp.br " > Clique aqui < /A> par a enviar Clique aqui par a enviar
s ua opinião! ! s ua opnião! !
Ch am an do u m a págin a em ou t r o s er vidor :
pr ot ocolo: / / s er vidor / dir et or io/ ar qu ivo
Os pr otocolos mais us ados s ão (file ou http):

F ile = ar quivo no s er vidor de ftp
h t t p = ar quivo no s er vidor Wor ld Wide Web

< A HREF= http: //www.unicamp.br T ARGET = _ B LANK > Clique Clique aqui! ! !
aqui! ! ! < /A>
T r abalh an do com t abela de cor es
Os valor es par a as cor es devem s er es cr itos no padr ão Hex adecimal. Par a obter uma
lis ta de cor es Hex adecimais , aqui es tá :
Cores Hexadecimais
Paleta com 216 cores hexadecimais.

D icas par a a con s t r u ção de u m s it e
1ª Fas e: Or ganiz ação da infor mação
2ª Fas e: Conceituação do s ite e definição da es tr utur a de navegação
3ª Fas e: Montagem do S ite
4ª Fas e: T es tar localmente
5ª Fas e: Dis ponibiliz ar o s ite
D ica de com o or gan iz ar e es t r u t u r ar a n avegação de u m s it e
01- Definir o conteúdo, o que s er á divulgado no s ite
ex emplo:
I nfor mações pes s oais : infor mações s obr e você;
Publicações como j or nais , r evis tas ;
Per fis da empr es a; s egmento da empr es a; clientes , par ceir os , etc...
02- Es tabelecer obj etivos :
• Você deve per guntar - s e o que os leitor es vão es tar pr ocur ando no s ite.
• Qual é o obj etivo do s ite.
• Antes de começar entr ar com códigos ou imagens você deve pens ar o que você
quer colocar em s ua página
• Como s er á es tr utur ada? Ela es tá adequada ou não ao meu público alvo?
• Ao des envolver um s ite par a uma empr es a ou pes s oas é impor tante que você
colha j unto ao s eu cliente s eus obj etivos , idéias , a for ma que imagina s ua
página, etc. As s im, ficar á bem mais fácil de começar s eu tr abalho.
03- Divida o s eu conteúdo em tópicos :
Cr ie uma lis ta com os pr incipais tópicos , a pr incípio não impor ta a

or dem. Es ta é uma for ma de começar a s e or ganiz ar .
S ua lis ta poder á ter quantos tópicos des ej ar , mas cuidado, o s eu leitor

poder á s e cans ar e s e per der em meio a tantas opções .
04- Quais as quetões que devo levantar com r elação a or ganiz ação e a navegação de
um s ite?
• S er á que os leitor es cons eguem navegar pelo conteúdo de cada tipo de

es tr utur a par a encontr ar as infor mações de que pr ecis am.
• Como ter cer tez a de que os leitor es cons eguem s e localiz ar nos meus
documentos (contex to) e achar o caminho de volta até uma pos ição conhecida.

T ipos de s it es :
S it e es t át ico - S omente código HT ML
S it e din âm ico
• Pode conter Java S cr ipts , que s ão pr ogr amas embutidos detr o do

código HT ML.
Nor malmente r odam localmente, do lado do cliente, ou s ej a, no
computador do us uár io.
Ex emplo: Java S cr ipt
• Pr ogr amação PHP, AS P

Pode conter pr ogr amação (PHP, AS P) que s ão ex ecutados pelo
s er vidor Web, pr oduz indo dinamicamente páginas HT ML, que
então s ão enviadas ao cliente par a viz ualiz ação
E x em plos de n avegação
1 . H ier ár qu ica
É fácil par a os leitor es des cobr ir a pos ição em
que s e encontr am na es tr utur a. Nas hier ar quias ,
a home page for nece uma vis ão ger al do
conteúdo que es tá s ubor dinado a ela e ainda
define os pr incipais vínculos ás páginas dos
níveis infer ior es da hier ar quia.
E XE MP L O: Mapa do s i t e m os t r a a es t r u t u r a h i er ár qu i ca
das pági n as do s i t e.

Nes te tipo de es tr utur a Linear a home page é o 2 . L in ear

título, ou intr odução, e todas as outr as páginas
acompanham em s eqüência com vínculos que
levam de uma página a outr a, nor malmente
com opções de avançar e r etr oceder .
E XE MP L O: i n s t r u ções pas s o-a-pas s o.
A es tr utur a linear menos r ígida per mitindo que o

3 . E s t r u t u r a L in ear com alt er n at ivas leitor s e des vie do caminho pr incipal. Pode ter ,
por ex emplo, uma es tr utur a linear com
r amificações alter nativas que par tam de um
único tr onco.
As r amificações podem s e r eunir ao tr onco

pr incipal em algum ponto mais adiante, em um
nível mais baix o da es tr utur a, ou continuar s e
r amificando em níveis infer ior es s eguindo
caminhos pr ópr ios até chegar a um " fim" .
Além de r amificar a es tr utur a linear , você pode

também ofer ecer vínculos que per mitam aos
leitor es avançar ou r etr oceder na cadeia, cas o
pr ecis em r ever alguma etapa ou j á conheçam
alguma par te do conteúdo.
Es tr utur a linear e hier ár quica, em cada página 3 . Com bin ação E s t r u t u r a L in ear com
do r oteir o você deve ofer ecer vínculos par a o H ier ár qu ica
leitor avançar , r etr oceder , r etor nar ao início e
s ubir um nível

P r óx im a et apa do plan ej am en t o
S ua apr es entação da Web cons is te em deter minar o conteúdo que s er á apr es entado
em cada uma das páginas e cr iar alguns vínculos (links ) s imples que pos s ibilitem a
navegação por es s as páginas .
1 . Coloque cada tópico em uma página, mas s e tiver um gr ande númer o

de tópicos , a manutenção e
... vinculação pode s e tor nar maçante.
2 . Defina bem a for ma de navegação entr e as páginas . S e houver

for mas alter nativas , tor ne a
... navegação par a os leitor es a mais intuitiva pos s ível.
3 . T ome cuidado com o que s er á incluindo na home page, lembr e- s e, ela

s er á a por ta da s ua
... apr es entação.
4 . T enha s empr e em mente s eus obj etivos . Pr ocur e não s e dis tanciar
deles .
D ica im por t an t e:
A dis pos ição de imagens , tex tos , vídeos , etc. T udo que você des ej a
colocar em s ua página pr ecis a s er colocado de for ma agr adável ao leitor .
Daí abor dar mos , de for ma ger al, a diagr amação. Es ta palavr a vêm do
mundo dos impr es s os . T r ata- s e da dis pos ição de elementos que
compõem uma página. Deve s er obs er vado o tamanho das fontes ,
dis pos ição das imagens , for ma como o tex to s er á apr es entado, etc. Uma
boa diagr amação também gar ante o r etor no do inter nauta.
Com pos ição da equ ipe
a) Analis tas de s is temas (com ex per iência em ger ência de I nfor mação),
r es pons ável pela or ganiz ação ....da infor mação;

b) Des ign Gr áfico, r es pons ável pelo pr oj eto gr áfico;
c) Pr ogr amador es , que, dependendo do tipo de s ite, podem s er

pr ogr amador es HT ML, Java, JavaS cr ipt, ....CGI , PHP, AS P, etc;
A equipe dever á ter um coor denador , r es pons ável em faz er o tr abalho

fluir de for ma eficiente, dentr o de um cr onogr ama apr oveitando o
máx imo de cada pr ofis s ional. Depois do s ite cons tr uído s ur gir á uma
outr a pes s oa: o W ebMas t er , que s er á r es pons ável pela adminis tr ação
do s ite. É muito haver o acúmulo de funções por membr os da equipe.
Mas é impor tante definir o papel de cada na cons tr ução do s ite.

Vis ão Ger al do D r eam w eaver MX
Ár ea de T r abalh o:
P ain el I n s er ir
O Painel I ns er ir per mite tr abalhar com vár ios tipos de obj etos como tabelas , imagens ,
for mulár ios , etc. As opções es tão or ganiz adas em guias : Comuns , Layout, T ex to,
T abelas , Moldur as , For mulár ios , Modelos , Car acter es , Mídia, Cabeçalho, S cr ipt e
Aplicativo.
Par a mos tr ar ou ocultar o painel I ns er ir : es colh a w in dow / in s er t
Par a ex pandir ou r eduz ir o painel I ns er ir : cliqu e n a s et a de ex pan s ão, n o can t o

es qu er do da bar r a de t ít u lo da B ar r a I n s er ir .
B ar r as de f er r am en t as
Contém botões que pos s ibilitam difer entes vis ualiz ações da j anela do documento
(vis ualiz ação do des enho e/ou do código da página)

Jan ela do docu m en t o
Ex ibe o documento que es tá s endo cr iado e editado.

Ao clicar com o botão dir eito do mous e s obr e es s a ár ea s ão ativados menus
contex tuais . Utiliz ados par a facilitar o aces s o aos comandos e pr opr iedades mais
utiliz ados , r elativos ao obj eto ou j anela que es ta s endo tr abalhada. Os menus
contex tuais contêm apenas a lis ta dos comandos que per tencem a s eleção atual.
I n s pet or de P r opr iedades
Na ver s ão anter ior do Dr eamweaver , o ins petor de pr opr iedades er a flutuante, agor a é
fix o e fica alocado na par te infer ior da ár ea de tr abalho. S ua função é editar ou ins er ir
pr opr iedades em um elemento pr eviamente s elecionado.
Par a mos tr ar ou ocultar o ins petor de pr opr iedades , bas ta s elecionar na bar r a de
menus as opções W in dow / P r oper t ies .
A maior ia das alter ações feitas nas pr opr iedades é imediatamente aplicada à j anela do
documento.
P ain éis e gr u pos de pain éis
Os painéis e gr upos de painéis podem s er encaix ados e combinados confor me a s ua

neces s idade.
P ar a ex pan dir e r edu z ir o gr u po de pain éis :
• Clique na s eta de ex pans ão.
P ar a s epar ar o gr u po de pain éis :
• Ar r as te o gr upo atr avés da pinça.
P ar a agr u par a u m pain el

em ou t r o gr u po de pain éis :
• Clique n ícone de
opções que fica á
dir eita da j anela

É apr es entado um menu onde é pos s ível mudar o gr upo, r enomear e fechar o gr upo de
painéis .
R edim en cion ar j an ela
Ao clicar no tamanho da j anela

ex ibe o meu popup.
Par a facilitar o des enho de

páginas com boa apar ência em
um deter minado tamanho, a
j anela do documento poder á s er
aj us tada a qualquer um dos
tamanhos lis tados no menu.
Men u j an ela
Es te menu pr opor ciona aces s o fácil a

todas as
j an elas , in s pet or es e palet as do
Dr eamweaver .

P r oj et o: S it e B ioder m
Vamos cons tr uir um s ite de uma empr es a fictícia chamada " B ioder m" . Atr avés des s e
s ite dis ponibiliz ar emos dados s obr e a empr es a (ins titucional), por tifólio dos pr odutos e
contato. Dur ante a confecção do s ite apr ender emos a utiliz ar melhor as fer r amentas do
Dr eamweaver MX.
E s t r u t u r an do o s it e
A or ganiz ação do s ite facilita o entendimento e economiz a tempo. Par a configur ar um

s ite comece cr iando uma es tr utur a de pas tas locais em dis co. É impor tante que es ta
es tr utur a fique bem definida, pois ela s er á a mes ma publicada no s er vidor .
Cr ie uma pas ta chamada " bioder m " e dentr o dela as s ub- pas tas :
• docu m en t acao: ar maz enar á a documentação do s ite (ar quivos do wor d, etc)
• im agen s : ar maz enar á as imagem utiliz adas no s ite
• em pr es a: ar maz enar á as páginas r efer entes ao as s unto empr es a
• pr odu t os : ar maz enar á as páginas r efer entes ao as s unto pr odutos
• at en dim en t o: ar maz enar á as páginas r efer entes ao as s unto atendimento
• dicas _ belez a: ar maz enar á as páginas r efer entes ao as s unto dicas de belez a
A es tr utur a das pas tas ficar á as s im:

Vín cu los ( L in ks )
No hiper tex to, as páginas s e ligam umas as outr as atr avés de links .
Ex is tem vár ios tipos de links :
• I n t er n os - par a documentos de um mes mo s ite

• E x t er n os - par a documentos de um outr o s ite
• Cor r eio E let r ôn ico - par a enviar mens agens atr avés do ger enciador de e- mails
• Ân cor as - par a s eções es pecíficas de uma página
Quando s e cr ia um link é pr ecis o definir o caminho entr e o documento de onde par te o

link até o que es tá s endo chamado. Es s e caminho pode s er abs oluto ou r elativo:
• Cam in h o abs olu t o - é us ado par a es tabelecer um link a um documento em

outr o s er vidor , é pr ecis o for necer a URL (ender eço) completa do documento
que es tá s endo chamado. Por ex emplo
h t t p: / / w w w .ccu ec.u n icam p.br / t r ein am en t os / in dex _ t r ein am en t os .h t m l
.
• Cam in h o r elat ivo - é us ado par a cr iar vínculos locais na maior ia dos s ites . É
útil par a es tabelecer vínculos com documentos s ituados na mes ma pas ta ou em
outr a pas ta do mes mo s ite, atr avés de caminhos de es tr utur a das pas tas . Nes s e
cas o, coloca- s e s omente o s egmento do caminho, não é neces s ár io es pecificar a
URL.
T omando como ex emplo a es tr utur a do s ite bioder m:
o Par a cr iar um link entr e o documento index .html e um documento
(documento.html) que es tá na mes ma pas ta r aíz - link:
docu m en t o.h t m l (coloca apenas o nome do ar quivo)
o Par a cr iar um link entr e o documento index .html e um documento
(documento.html) que es tá dentr o da s ub- pas ta empr es a - link:
em pr es a/ docu m en t o.h t m l (coloca a pas ta e o nome do ar quivo,
s epar ados pelo car acter / )
o Par a cr iar um link entr e o documento index .html e uma imagem
(imagem.gif) que es tá dentr o da s ub- pas ta imagens - link:
im agen s / im agem .gif (coloca a pas ta e o nome do ar quivo, s epar ados
pelo car acter / )
o Par a cr iar um link entr e um documento que es tá na s ub- pas ta empr es a
e uma imagem (imagem.gif) que es tá dentr o da s ub- pas ta imagens -
link: ../ im agen s / im agem .gif
(s obe um nível na es tr utur a de pas tas com .. e em s eguida coloca a
pas ta e o nome do ar quivo, s epar ados pelo car acter / )
o S upondo que tives s emos um documento dentr o de uma s ub- pas ta
per tencente a s ub- pas ta empr es a, com um link par a uma imagem
(imagem.gif) que es tá dentr o da s ub- pas ta imagens - link:
../ ../ im agen s / im agem .gif (s obe dois níveis na es tr utur a de pas tas
com ../ .. e em s eguida coloca a pas ta e o nome do ar quivo, s epar ados
pelo car acter / )
Par a definir um link de cor r eio eletr ônico: coloque a ex pr es s ão " m ailt o: " e em
s eguida o e- mail do des tinatár io, ex emplo - m ailt o: f u lan o@ u ol.com .br .
Com r elação as âncor as , ver emos num dos pr óx imos tópicos da apos tila.

Cr ian do u m n ovo s it e
Defina um novo s ite, na bar r a de menus localiz ada na par te s uper ior da tela clique em
S it e/ N ovo s it e (s er á apr es entado um as s is tente par a a cr iação do s ite).
Em N om e do s it e digite o nome do s ite (B I ODERM) e em P as t a r aiz local s elecione a
pas ta onde ficar á ar maz enado o s ite, nes s e cas o deve s er s elecionada a pas ta
bioder m.
A opção H T T P Addr es s per mite a checagem dos links do s ite. Deve- s e digitar o
ender eço final (URL) que o s ite ter á na Web.
Clique no botão OK .
Es s a é a maneir a us ual de s e cr iar um s ite, outr a alter nativa é o método bás ico com a
aj uda de um as s is tente do Dr eamweaver .
O painel ao lado ex ibe todos os ar quivos e pas tas do s ite atuando como um
ger enciador de ar quivos , per mitindo copiar , colar , ex cluir , mover e abr ir ar quivos da
mes ma maneir a que o Windows Ex plor er .

S elecion an do as im agen s
Aces s e o ender eço

www.ccuec.unicamp.br /tr einamentos /dr eamweaver /pagina8_ cr iando_ novo_ s ite.html
Copie as imagens abaix o par a a pas ta im agen s . Clique com o botão dir eito do mous e
s obr e as imagens e es colha a opção s alvar im agem com o .
t opo.gif
f ot o1 _ h om e.gif

r odapé.gif

Cr ian do u m a n ova págin a em br an co
Na bar r a de menus s elecione Ar qu ivo > N ovo
É apr es entada uma caix a de diálogo em que o us uár io poder á es colher o tipo de
documento.
Na guia Ger al, es colha a categor ia P ágin a bás ica e H T ML
Em s eguida, clique no botão Cr iar
D ef in in do as pr opr iedades da págin a
Na bar r a de menus , s elecione Modif icar > P r opr iedades da P ágin a e configur e as
s eguintes pr opr iedades :
T ítulo (título da página): m odelo
Fundo (cor de fundo): # F F F F F F (br anco)
T ex to (cor do tex to): # 0 0 0 0 0 0 (pr eto)
Links (cor dos links ): # 3 3 3 3 9 9 (az ul)
Links vis itados (cor dos links vis itados ): # CC0 0 0 0 (lilás )
Links ativos (cor do link no momento em que ele é ativado): # 6 6 3 3 9 9 (ver melho)
Mar gem s uper ior : 1
Clique no botão OK .

Obs : Ao abr ir a paleta de cor es , o ponteir o do mous e s e tr ans for ma em um conta-

gotas que pode " car r egar " qualquer cor de obj etos das j anelas aber tas do
Dr eamweaver . Movimente o mous e e per ceba que ele s e alter a. Clique na cor
des ej ada.

T abelas
A maneir a mais comum de dis por os elementos numa página é tr abalhando com
tabelas . Uma tabela é for mada de tr ês elementos :
• L in h a: es paçamento hor iz ontal entr e uma bor da e outr a;

• Colu n a: es paçamento ver tical entr e uma bor da e outr a;
• Célu la: es paço r es ultante da inter s eção de uma linha com uma coluna.
Ex is tem duas maneir as de cr iar tabelas : pelo Painel I ns er ir Com u n s > I n s er ir t abela,
ou pela bar r a de menus I n s er ir > T abela.
Vamos cr iar uma tabela com 3 linhas e 1 coluna, lar gur a de 760 pix els , pr eenchimento
da célula = 0,
es paçamento entr e as células = 0 e bor da = 0.
Clique em OK .
P r opr iedades de t abela
Quando a tabela es tiver s elecionada, s uas car acter ís tica apar ecer ão no I ns petor de
Pr opr iedades . No campo Alin h ar s elecione a opção Ao cen t r o.

I n s er in do m ais lin h as ou colu n as n a t abela
S elecione uma linha da tabela e clique com o botão dir eito do mous e s obr e a ár ea
s elecionada, no menu de opções que s er á ex ibido s elecione as opções T abela >
I n s er ir L in h as ou Colu n as . Na outr a j anela que s e abr e s elecione o nº de linhas ou
colunas que des ej a ins er ir e a pos ição em que elas s er ão incluídas .
D ividin do ou m es clan do célu las , lin h as ou colu n as
Par a dividir : S elecione a célula, linha ou coluna que pr etende dividir e no I ns petor de
pr opr iedades s elecione as opções Célu la > D ivide as célu las em lin h a ou colu n as
Par a mes clar : S elecione as células , linhas ou colunas que pr etende mes clar e no
I ns petor de pr opr iedades s elecione as opções Célu la/ L in h a > Mes clar as célu las
s elecion adas u t iliz an do ex t en s ões

E x clu in do lin h as e colu n as

Pos icione o cur s or s obr e a linha ou coluna a s er ex cluída, clique s obr e a ár ea
s elecionada com o botão dir eito do mous e e no menu de opções que s er á ex ibido
es colha as opções T abela > D elet ar L in h a/D elet ar Colu n a
Obs .: Após faz er os tes tes com a tabela, deix e- a com o for mato inicial, ou s ej a, com 3
linhas e 1 coluna.
I n s er in do im agen s
Par a ins er ir uma imagem : pelo Painel I ns er ir Com u n s > I m agem ou pela bar r a de
menus I n s er ir > I m agem .
Na pr imeir a linha da tabela ins ir a a imagem t opo.gif (s elecione a imagem topo.gif no

dir etór io " imagens " ).
Na ter ceir a linha da tabela ins ir a a imagem r odape.gif (também ar maz enada no
dir etór io " imagens " ).
I m por t an t e: Na opção U R L : R elat iva a: es colha a opção docu m en t o. Par a que s ej a

cr iado cor r etamente o caminho r elativo até as imagens .

Mapeam en t o de im agen s
O mapeamento de imagens é utiliz ado quando há neces s idade de colocar vínculo em

apenas uma par te de uma imagem, e não na imagem toda.
S elecione a imagem topo.gif (na pr imeir a linha da tabela). Vamos mapear a ár ea da

imagem onde apar ece a palavr a " Home" , colocando um link par a a página index .html.
Com a imagem topo.gif s elecionada, vej a que o ins petor de pr opr iedades dis ponibiliz a
tr ês tipos de mapas : r etangular , oval e poligonal. S elecione a opção r etangular , como
mos tr a a figur a abaix o.
Após s elecionar a opção mapa r etangular , mova o cur s or novamente s obr e a imagem
topo.gif, o cur s or as s umir á a for ma de cr uz . Des enhe um r etângulo em volta da
palavr a Home ( 1 ) e no campo Link do ins petor de pr opr iedades digite o ender eço da
página que s er á aces s ada: index .html ( 2 ) . Vej a a figur a abaix o:
Repita o mes mo pr ocedimento par a os ítens do menu. Com a imagem topo.gif

s elecionada, es colha a opção mapa r etangular :
• Des enhe um r etângulo em volta da palavr a E m pr es a e no campo Link do

ins petor de pr opr iedades digite o ender eço da página que s er á aces s ada:
../empr es a/empr es a.html

• Des enhe um r etângulo em volta da palavr a P r odu t os e no campo Link do

../pr odutos /pr odutos .html
• Des enhe um r etângulo em volta da palavr a At en dim en t o e no campo Link do
../atendimento/atendimento.html
• Des enhe um r etângulo em volta das palavr as D icas de B elez a e no campo
Link do ins petor de pr opr iedades digite o ender eço da página que s er á
aces s ada: ../dicas _ belez a/dicas _ belez a.html
Obs .: O mapeamento é válido apenas par a uma página, nor malmente s er ia neces s ár io
r epetir es s e pr ocedimento par a as demais páginas do s ite. No entanto, s e quis er
mapear a imagem uma única vez , e faz er is s o valer par a todas as páginas , ter á que
utiliz ar o r ecur s o de Modelos , como ver emos a s eguir .

Modelos
Os modelos s ão muito utiliz ados par a facilitar o tr abalho r epetitivo. Quando s e tem um
layout de página que s er á apr oveitado vár ias vez es .
Poder íamos utiliz ar o pr ocedimento de copiar a página ou s alvar com o, mas s e

houves s em mudanças no layout das páginas , ter íamos que alter á- las uma por uma. A
vantagem de s e utiliz ar modelo é que em cas o de mudança, todas as páginas s ão
alter adas de uma vez . Per mite também cr iar r egiões bloqueadas e r egiões editáveis ,
mantendo as s im a integr idade da página or iginal.
As r egiões editáveis s ão as ár eas da página que poder ão s er alter adas . Quando s e cr ia

um modelo todas as ár eas es tão bloqueadas , par a editar es s as ár eas é neces s ár io cr iar
r egiões editáveis .
D ef in ido r egiões edit áveis
S elecione o tex to ou a célula que des ej a tor nar editável, nes s e cas o es colha a s egunda
linha da tabela na qual es tamos tr abalhando.
Na bar r a de menus es colha I n s er ir > Obj et os de Modelos > R egião E dit ável ou
atr avés do Painel I ns er ir es colha a guia Modelos , clique no ter ceir o botão R egião
E dit ável. Ao apar ecer uma mens agem avis ando que o documento s er á conver tido em
modelo, clique em OK .
Em s eguida pr eencha o nome da r egião: con t eu do.
Clique no botão OK , note que es s a ár ea ficar á contor nada por um r etângulo, com o
nome da ár ea em cima.
S alvar emos es s a página como um modelo que s er á utiliz ado par a as demais páginas
do s ite. Na bar r a de menus s elecione Ar qu ivo / S alvar com o Modelo, s alve com o
nome de bioder m _ m odelo. O ar quivo de modelo é um ar quivo com ex tens ão .DWT e
ficar á ar maz enado na pas ta T emplates , que s er á cr iada automaticamente na r aiz do
s ite.
Feche o modelo.

Cr ian do págin as a par t ir de m odelos
O modelo que cr iamos s er á a bas e par a as demais páginas do s ite, onde s er á alter ada
apenas a r egião editável que denominamos de con t eu do. Ao cr iar uma nova página a
par tir de um modelo é pos s ível definir s e ela per manecer á anex ada ao modelo.
Definindo es s a opção, quando o modelo for alter ado, todas as páginas anex adas a ele
s er ão atualiz adas .
A pr imeir a página que cr iar emos a par tir do modelo s er á a página inicial do nos s o s ite
denominada in dex .h t m l. Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia
Modelos ( 1 ) , s er ão ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m
( 2 ) e o modelo bioder m _ m odelo ( 3 ) .
Mantenha a opção atualiz ar a página quando o modelo for alter ado ( 4 ) , des s a for ma,
ao atualiz ar o modelo, todos os documentos cr iados a par tir dele s er ão atualiz ados .
Clique no botão Cr iar .
S alve o documento com o nome de in dex .h t m l, na pas ta r aíz do s ite.

Cr ian do a págin a in icial do s it e
Na página index .html temos então uma tabela com 3 linhas e uma coluna. A 1ª e 3ª
linhas da tabela es tão bloqueadas pois s er ão elementos fix os em todas as páginas do
s ite, vamos tr abalhar na s egunda linha da tabela, que é uma r egião editável.
• Pos icione o cur s or na s egunda linha da tabela e cr ie uma nova tabela dentr o
des s a linha: Painel I ns er ir Com u n s > I n s er ir t abela, ou bar r a de menus
I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 2 linhas , 2
colunas , lar gur a de 760 pix els , pr eenchimento da célula = 0, es paçamento
entr e as células = 0 e bor da = 0.
• Defina a lar gur a de cada coluna da tabela, s elecione a pr imeir a coluna e no
campo L do I ns petor de pr opr iedades digite 350, agor a s elecione a s egunda
coluna da tabela e no campo L do I ns petor de pr opr iedades digite 410.
• Na pr imeir a célula da tabela ins ir a a imagem foto1_ home.gif (ar maz enada na
pas ta imagens )
• Na s egunda célula da tabela ins ir a a imagem foto2_ home.gif (ar maz enada na
pas ta imagens )
• Na ter ceir a célula da tabela ins ir a a imagem foto3_ home.gif (ar maz enada na
pas ta imagens )

• Na quar ta célula da tabela ins ir a a imagem foto4_ home.gif (ar maz enada na
pas ta imagens )
S alve novamente es s a página como in dex .h t m l e em s eguida feche- a.
Na bar r a de menus , s elecione Ar qu ivo > S alvar com o. S alve com o nome de
in dex .h t m l na pas ta r aíz do s ite. Feche o documento.
T ecle F 1 2 par a vis ualiz ar a página no navegador .
Obs .: Clicando na B ar r a de menus : Ar qu ivo > Ver if icar a págin a > Ver if icar L in ks ,
é pos s ível tes tar s e os links es tão Ok.

Cr ian do a págin a em pr es a.h t m l
Após ter mos cr iado a página inicial do s ite, cr iar emos as páginas s ecundár ias de
acor do com o menu pr incipal: empr es a.html, pr odutos .html, atendimento.html e
dicas _ belez a.html.
Cr iar emos agor a a página em pr es a.h t m l, também a par tir do modelo.
• Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia Modelos ( 1 ) ,

s er ão ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m ( 2 ) e o
modelo bioder m _ m odelo ( 3 ) .
Mantenha a opção atualiz ar a página quando o modelo for alter ado ( 4 ) , des s a
for ma, ao atualiz ar o modelo, todos os documentos s er ão atualiz ados .
• S alve o documento com o nome de em pr es a.h t m l, na pas ta em pr es a.
I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 1 linha, 2
entr e as células = 0 e bor da = 0. Defina a lar gur a de cada coluna da tabela,
s elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite
130, agor a s elecione a s egunda coluna da tabela e no campo L do I ns petor de
pr opr iedades digite 630.
• Na pr imeir a coluna da tabela ins ir a uma cor de fundo, pos icione o cur s or nes s a
coluna, e na opção F u n do do I ns petor de pr opr iedades es colha a cor cinz a clar o

(# CCCCCC).
• Defina o pos icionamento ver tical des s a coluna par a N o Alt o. Faça o mes mo
par a a outr a coluna. No I ns petor de pr opr iedades , campo Ver t es colha N o alt o.
• Na s egunda coluna da tabela ins ir a uma outr a tabela de 1 linha/1 coluna e

lar gur a de 580 pix els , centr aliz e es s a tabela.
• Dentr o des s a tabela, ins ir a o tex to r efer ente a empr es a. O tex to pode s er
copiado do modelo tex to_ empr es a que es tá na pas ta documentacao, é s ó copiar
e colar . O tex to deve ficar pos icionado na par te s uper ior da tabela, par a is s o
pos icione o cur s or em qualquer lugar dentr o da tabela, e no I ns petor de
Pr opr iedades , no campo Ver t, es colha N o Alt o.

E s t i los H T ML
Os es tilos HT ML s ão utiliz ados par a s alvar for matações de tex to e par ágr afos e per mitir
s ua r eutiliz ação. Os es tilos HT ML afetar ão apenas os tex tos aos quais for em aplicados .
Abr a a paleta D es ign que fica do lado dir eito da tela e es colha a guia E s t ilos H T ML :
L im pan do a f or m at ação do t ex t o
• S elecione o tex to des ej ado

• Clique em L im par o es t ilo da s eleção par a r etir ar a for matação do tex to
s elecionado. Ou
• Clique em L im par o es t ilo do par ágr af o par a r etir ar a for matação do
par ágr afo inteir o
Faça um tes te: s elecione o tex to que acabamos de copiar e clique em L im par o es t ilo
da s eleção.
D ef in in do u m es t ilo H T ML
• Na guia E s t ilos H T ML clique no ícone novo es tilo (folhinha com s inal de + )

• Na caix a de diálogo que é ex ibida, dê um nome ao es tilo que s er á cr iado, por
ex emplo T ex t o, em s eguida es colha as opções S eleção e L im par o es t ilo
ex is t en t e. Nos atr ibutos da fonte es colha Ver dana, tamanho 2 e cor pr eta,
clique no botão OK .

• S er á cr iado um novo es tilo, que poder á s er aplicado a qualquer tex to.
Faça um tes te: s elecione novamente o tex to que acabamos de copiar e aplique o es tilo
HT ML T ex t o. É s ó dar um duplo clique no es tilo t ex t o que es tá no painel Des ign.
Par a r emover um es tilo HT ML cr iado: abr a a paleta D es ign e es colha a guia E s t ilos
H T ML , clique com o botão dir eito do mous e s obr e o es tilo des ej ado e es colha E x clu ir .
Par a alter ar as pr opr iedades de um es tilo HT ML ex is tente : abr a a paleta D es ign e

es colha a guia E s t ilos H T ML , clique com o botão dir eito do mous e s obr e o es tilo
des ej ado e es colha E dit ar .
S alve novamente es s a página como empr es a.html.

Cr ian do a págin a pr odu t os .h t m l
Cr iar emos agor a a página pr odu t os .h t m l, também a par tir do modelo.
• Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia Modelos , s er ão

ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m e o modelo
bioder m _ m odelo.
Mantenha a opção atualiz ar a página quando o modelo for alter ado, des s a
for ma, ao atualiz ar o modelo, es s e documento também s er á atualiz ado.
• S alve o documento com o nome de pr odu t os .h t m l, na pas ta pr odu t os .
• Aces s e w w w .ccu ec.u n i cam p.br / t r ei n am en t os / dr eam w eaver / pagi n a1 6 _ pr odu t os .h t m l e

s alve as imagens batom.gif, cr eme.gif e per fume.gif na pas ta im agen s .
(# CCCCCC).

lar gur a de 580 pix els , centr aliz e es s a tabela. Dentr o dela ins ir a o tex to
r efer ente aos pr odutos , que pode s er copiado do modelo tex to_ pr odutos
(ar maz enado na pas ta documentacao), é s ó copiar e colar . O tex to deve ficar
pos icionado na par te s uper ior da tabela, par a is s o pos icione o cur s or em
qualquer lugar dentr o da tabela, e no I ns petor de Pr opr iedades , no campo Ver t,
es colha N o alt o. O útimo par ágr afo do tex to ter mina com a fr as e " Par a s aber
mais clique aqui" , tr ans for me a palavr a " aqui" num link, s elecione a palavr a e
no campo L in k do I ns petor de pr opr iedades digite ../ in dex .h t m l

• Após copiar a des cr ição, pule 1 linha e ins ir a uma tabela com 3 linhas e 2
colunas , lar gur a de 540 pix els e bor da = 0. Deix e- a centr aliz ada.
• S elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite

• S elecione toda a tabela e no campo Cor de f u n do do I ns petor de pr opr iedades

defina a cor cinz a (código # CCCCCC)
• Ainda com toda a tabela s elecionada alter e o campo E s paço en t r e as célu las
par a o valor 2 .
• S elecione s omente as células da tabela e alter e a cor de fundo par a br anco

(código # FFFFFF). Par a s elecionar s omente as células da tabela, s elecione as
células da pr imeir a linha e com o botão es quer do do moude pr es s ionado
s elecione as demais
• Como r es ultado dis s o s er á cr iada uma es pécie de bor da s epar ando as células da
tabela
• Agor a ins ir a as imagens batom.gif, cr eme.gif e per fume.gif (que s e encontr am

na pas ta imagens ) r es pectivamente na 1ª coluna da 1ª linha, na 1ª coluna da
2ª linha e na 1ª coluna da 3ª linha
• Na 2ª coluna da 1ª linha ins ir a o s eguinte tex to:

" Os batons B ioder m fix am por mais tempo, dis pens ando aqueles r etoques
fr equentes na maquiagem. Es tão dis poníveis em uma gr ande var iedade de
cor es ."
• Na 2ª coluna da 2ª linha ins ir a o tex to:

" O cr eme hidr atante B ioder m é indicado par a o r os to, pos s ui filtr o s olar FPS 20
que pr otege contr a os r aios ultr avioleta do s ol UV- A e UV- B . Além dis s o deix a a
pele macia e não engor dur a."
• Na 2ª coluna da 3ª linha ins ir a o tex to:

" O per fume B ioder m pos s ui uma fr agr ância dis cr eta e agr adável que dá uma
s ens ação r efr es cante. T em ação pr olongada."

A tabela ficar á as s im:
S alve novamente es s a página e deix e- a aber ta.

E s t i los CS S
Os es tilos CS S s ão mais abr andentes que os es tilos HT ML. É uma tecnologia que não
faz par te do HT ML padr ão, é um conj unto de tags que aj udam a contr olar a apar ência
e a for matação de tex tos .
Cr ian do u m E s t ilo CS S per s on aliz ado
Vamos cr iar um es tilo que for mate o tex to/conteúdo das páginas (tipo e tamanho da
fonte e tex to j us tificado). Es s e es tilo s er á aplicado ao tex to da página pr odutos .html
• Cr ie uma pas ta chamada cs s dentr o da pas ta bioder m (Com o painel

Ar qu ivos aber to, clique com o botão dir eito do mous e s obr e a pas ta
S it e-B I OD E R M e no menu que s e abr e s elecione N ova pas t a e nomeie a
pas ta como cs s
• Abr a a paleta D es ign que fica do lado dir eito da tela e es colha a guia E s t ilos
CS S
• Na guia E s t ilos CS S clique no ícone N ovo es t ilo CS S (folhinha com s inal de + )
• Na caix a de diálogo que é ex ibida, dê um nome ao es tilo que s er á cr iado, por

ex emplo cor po
• No campo T ipo: s elecione Cr iar es t ilo per s on aliz ado ( clas s e)
• No campo D ef in ir em : s elecione ( N ovo ar qu ivo de f olh a de es t ilos ) e clique
em OK
• Na caix a de diálogo que é ex ibida, no campo S alvar s elecione a pas ta cs s e no
campo N om e do ar qu ivo: digite es t ilos .cs s (es s e s er á o ar quivo que vai
ar maz enar os es tilos ). Em s eguida clique no botão S alvar
• S er á ex ibido o painel de es tilos par a que você defina as pr opr iedades do es tilo:
Na categor ia T ipo defina fonte = ver dana, tamanho = 12 pix els , es tilo =
nor mal, cor = pr eto (# 000000)
Na categor ia B loco defina alinhamento do tex to = j us tificar

Clique em OK .
S er á cr iado o ar quivo es t ilos .cs s na pas ta bioder m / cs s , contendo o es tilo cor po.
Podemos ins er ir outr os es tilos dentr o des s e ar quivo, como por ex emplo um es tilo que
per s onaliz e os links , faz endo com que o link s ó fique s ublinhado no momento em que o
cur s or es tiver s obr e ele. Par a is s o, edite o ar quivo es tilos .cs s e ins ir a o s eguinte es tilo
(logo depois do es tilo cor po):
a.linkdes taq: link { color : black; font- s iz e: 7.5pt; font- family: Ver dana, Ar ial, s ans -
s er if; tex t- decor ation: none }
a.linkdes taq: active { color : black; font- s iz e: 7.5pt; font- family: ver dana, ar ial, s ans -
a.linkdes taq: vis ited { color : black; font- s iz e: 7.5pt; font- family: ver dana, ar ial, s ans -
a.linkdes taq: hover { color : black; font- s iz e: 7.5pt; font- family: ver dana, ar ial, s ans -
s er if; tex t- decor ation: under line }
S alve o arquivo es tilos .cs s .
Os es tilos cr iados , cor po e lin kdes t aq, devem apar ecer no painel Des ign/Es tilos
HT ML. Aplique os es tilos na página pr odutos .html:
• S elecione o tex to da des cr ição que fica antes da tabela dos pr odutos e aplique
nele o es tilo cor po .
• S elecione a palavr a/link " aqui" e aplique nela o es tilo lin kdes t aq
• Aplique também o es tilo cor po nos tex tos que es tão dentr o da tabela de
pr odutos
• T ecle F12 par a vis ualiz ar a página no navegador . Na des cr ição a fonte s er á
alter ada e o tex to ficar á j us tificado, quanto ao link " aqui" , s ó ficar á s ublinhado
quando o cur s or es tiver s obr e ele.
S alve novamente a página.

Quando um es tilo CS S é aplicado, o Dr eamweaver cr ia uma linha de código dentr o da

tag h ead, que s inaliz a o ar quivo de es tilos que es tá s endo utiliz ado. De acor do com o
ex emplo abaix o, bas eado na es tr utur a do s ite B ioder m, par a aces s ar o ar quivo
es tilos .cs s a par tir de uma página do s ite, deve- s e s ubir um nível na es tr utur a de
pas tas e então aces s ar a pas ta cs s :
< head>
< title> < /title>
< meta>
< lin k h r ef = " ../ cs s / es t ilos .cs s " r el= " s t yles h eet " t ype= " t ex t / cs s " >
< /head>
A s eguir podemos ver como ficou o código html ao r eceber um es tilo CS S :

 P ar a s aber m ais cliqu e < a h r ef = " in dex .h t m l"
clas s = " lin kdes t aq" > aqu i< / a> 
O tex to " Par a s aber mais clique aqui" r ecebeu o es tilo cor po e a palavr a " aqui" , que é
um link, r ecebeu também o es tilo lin kdes t aq.
Com o car r egar os es t ilos par a u m a n ova págin a
• Abr a a paleta D es ign e es colha a guia E s t ilos CS S

• Na guia E s t ilos CS S clique no ícone An ex ar a f olh a de es t ilos (o 1º ícone
com uma cor r ente)
• Em s eguida s elecione o ar quivo de es tilos des ej ado

Cr ian do a págin a at en dim en t o.h t m l
O Dr eamweaver dis ponibiliz a vár ios r ecur s os par a a cr iação de for mulár ios . O S ite
B ioder m ter á uma página de atendimento ao cons umidor , onde s er á dis ponibiliz ado um
for mulár io cuj a função s er á obter dados do cons umidor e enviá- los por e- mail à ár ea
de atendimento da empr es a.
Cr iar emos agor a a página at en dim en t o.h t m l, também a par tir do modelo.

bioder m _ m odelo.
• S alve o documento com o nome de at en dim en t o.h t m l, na pas ta

at en dim en t o.
I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 1 linha, 2
(# CCCCCC).

lar gur a de 580 pix els , centr aliz e es s a tabela. Dentr o des s a tabela, ins ir a o
for mulár io, como ver emos a s eguir .

F or m u lár io
1) No cor po da página, dentr o da tabela, digite o título " Atendimento ao Cons umidor "
em negr ito. No I ns petor de pr opr iedades es colha fonte ver dana, tamanho 2.
2) Pule 1 linha e digite " Contato" e em s eguida os dados da empr es a (e- mail, telefone,
fax )
3) Em s eguida digite: " S e você tem alguma dúvida ou s uges tão s obr e os nos s os
pr odutos , pr eencha o for mulár io abaix o: "
4) Na bar r a I n s er ir , s elecione o ítem F or m u lár io
5) S elecione a pr imeir a opção F or m u lár io , par a que ele cr ie a tag for m (como s e
fos s e a moldur a do for mulár io)
6) Dentr o da tag for m, pule 1 linha e digite " Nome: "

Na fr ente do nome cr ie um campo de for mulár io, s er á um campo tex to:
cr ie um campo tex to clicando na 2ª opçãoCam po de t ex t o
S elecione es s e campo e no I ns petor de Pr opr iedades pr eencha as pr opr iedades do

campo:
Campo de tex to (nome do campo): n om e
Lar g. do car acter e (tamanho da moldur a do campo): 5 0
No max . de car act. (númer o máx imo de car acter es que poder ão s er digitados ): 5 0
T ipo (tipo de linha): L in h a s im ples
Valor inicial (valor inicial): deix ar em br anco
7) pule 1 linha e digite " E- mail: "

Na fr ente do e- mail cr ie um campo de for mulár io, s er á um campo tex to:
cr ie um campo tex to clicando na 2ª opçãoT ex t F ield
S elecione es s e campo e no I ns petor de Pr opr iedades pr eencha as pr opr iedades :

Campo de tex to (nome do campo): em ail
Lar g. do car acter e (tamanho da moldur a do campo): 4 0
No max . de car act. (númer o máx imo de car acter es que poder ão s er digitados ): 4 0
T ipo (tipo de campo): L in h a s im ples
Valor inicial (valor inicial): deix ar em br anco
8) pule 1 linha e digite " Faix a Etár ia: "

pule 1 linha e clique na 6ª opçãoB ot ão de r ádio, em s eguida digite " até 20 anos "
pule 1 linha e clique na 6ª opçãoB ot ão de r ádio, em s eguida digite " de 20 a 40 anos "
pule 1 linha e clique na 6ª opçãoB ot ão de r ádio, em s eguida digite " acima de 40
anos "
Faix a Etár ia:

εδχ
γφ
até 20 anos
εδχ
γφ
de 20 a 40 anos
εδχ
γφ
acima de 40 anos

s elecione o pr imeir o B otão de r ádio e no I ns petor de pr opr iedades configur e s uas

pr opr iedades :
B otão de opção (nome da var iável): faix a- etar ia
Valor s elecionado (valor da var iável): 20
Es tado inicial (es tado inicial do campo: s elecionado ou não): S elecionado
s elecione o s egundo B otão de r ádio e configur e s uas pr opr iedades :

Valor s elecionado (valor da var iável): 20- 40
Es tado inicial (es tado inicial do campo: s elecionado ou não): Não s elecionado
s elecione o ter ceir o B otão de r ádio e configur e s uas pr opr iedades :

Valor s elecionado (valor da var iável): 40
Es tado inicial (es tado inicial do campo: s elecionado ou não): Não s elecionado
9) pule 1 linha e digite " S ex o: "

cr ie um campo tex to clicando na 8ª opçãoMen u de L is t a
S ex o:

Lis ta/Menu (nome do campo): s ex o
T ipo (tipo de lis ta, as opções tem a mes ma função, s ó muda a for ma de ex ibição)
Clique no botão Valor es da lis ta: adicione os valor es " mas culino" e " feminino" (par a
adicionar um novo valor clique no s inal + )
Clique em OK .
10) pule 1 linha e digite " Dúvidas ou s uges tões : "

cr ie um campo tex to clicando na 4ª opçãoÁr ea de t ex t o

Campo de tex to (nome do campo): s uges toes
Lar g. do car acter e (tamanho da moldur a do campo): 50
No max . de car act. (númer o de linhas do campo): 5
T ipo (tipo de campo): Multi- linha
Valor inicial: deix ar em br anco
11) pule 1 linha e cr ie um botão clicando na opção 12ª opçãoB ot ão

Submit

B otão (nome do botão): S ubmit
Denominação (tex to que s er á ex ibido no botão): " Enviar "
Action (ação): Enviar for mulár io
Obs .: a acão r es et f or m s er ve par a limpar os campos do for mulár io.
12) Edite o código HT ML e no act ion da tag for m coloque o e- mail par a onde s er ão
encaminhados os dados (mailto: x x x x x x x x x x x ).

O for mulár io s er á ex ibido des s a for ma:
Nome:
E- mail:
Faix a Etár ia:

εδχ
γφ
até 20 anos
εδχ
γφ
de 20 a 40 anos
εδχ
γφ
acima de 40 anos
mas culino
S ex o:
Dúvidas ou s uges tões :
S ubmit
S alve novamente es s a página e feche- a.

Cr ian do a págin a dicas _ belez a.h t m l
Cr iar emos agor a a página dicas _ belez a.h t m l, também a par tir do modelo.

bioder m _ m odelo.
• S alve o documento com o nome de dicas _ belez a.h t m l, na pas ta

dicas _ belez a.
(# CCCCCC).

lar gur a de 580 pix els , centr aliz e es s a tabela.
Pos icione o cur s or dentr o des s a tabela e no I ns petor de pr opr iedades s elecione
N o alt o. Em s eguida, ins ir a o tex to com as dicas de s aúde e belez a (copie o
tex to do ar quivo tex to_ dicas _ belez a.doc que es tá ar maz enado na pas ta
documentacao.
• S elecione todo o tex to e no I ns petor de pr opr iedades alter e a fonte par a

ver dana, tamanho 2.
S alve es s a página.

Ân cor as
As âncor as s ão utiliz adas em páginas que pos s uem conteúdo muito ex tens o. Atr ibui- s e
um âncor a par a cada par ágr afo ou par a cada tópico da página, e depois cr ia- s e um
menu no início da mes ma com links par a es s as âncor as . Es s e r ecur s o agiliz a a
navegação pelo conteúdo da página, dis pens ando o us o da bar r a de r olagem, que
nor malmente s e for ma nes s es documentos muitos ex tens os .
Par a ins er ir uma âncor a, na bar r a de menus s elecione I n s er ir / Ân cor a com n om e,
ou no Painel I ns er ir : Com u n s / Ân cor a com n om e.
Vamos utiliz ar como ex emplo a página do s ite dicas de belez a. Nes s a página
dis ponibiliz amos um gr ande númer o de dicas , o que tor nou o s eu conteúdo ex tens o.
1) O conteúdo es tá dividido nos s eguintes tópicos : cuidados com a pele, cuidados com
os cabelos , como ter uma alimentação equilibr ada, tr atamento da celulite, beba muita
água, como gas tar calor ias mes mo s em tempo par a s e ex er citar , como tir ar o máx imo
de pr oveito do baton.
2) No início de cada tópico (dica) ins ir a uma âncor a, da s eguinte for ma:
Coloque o cur s or no início do tópico " Cuidados com a pele" .
Na bar r a de menus s elecione I n s er ir / Ân cor a com N om e, ou no Painel I ns er ir :
Com u n s / Ân cor a com N om e.
Na j anela que s e abr e, digite o nome da âncor a: pele, e clique em OK .
Faça o mes mo pr ocedimento par a os demais tópicos , as pr óx imas âncor as s e
chamar ão: cabelos , alim en t acao, celu lit e, agu a, calor ias , bat on )
3) Cr ie um menu no início da página, contendo apenas os títulos dos tópicos , como

s egue: (us e fonte ver dana, tamanho 2)
- Cuidados com a pele
- Cuidados com os cabelos
- Como ter uma alimentação equilibr ada
- T r atamento da celulite
- B eba muita água
- Como gas tar calor ias mes mo s em tempo par a s e ex er citar
- Como tir ar o máx imo de pr oveito do baton
4) Vincule cada ítem do menu a s ua r es pectiva âncor a. S elecione o ítem do menu, e no

campo Link do I ns petor de Pr opr iedades digite o nome da âncor a pr ecedido pelo
s ímbolo # . Ex emplo # pele.
5) É impor tante também dis ponibiliz ar uma for ma do us uár io voltar par a o menu no
topo da página após ter aces s ado um deter minado tópico. Par a is s o, ins ir a uma âncor a
no início da página, antes do menu. Es s a âncor a ter á o nome de " topo" . Em s eguida
digite a palavr a " T opo" no final de cada tópico e faça um link par a a âncor a topo
(# topo).
Obs : S e a âncor a fos s e chamada de uma outr a página, o link ficar ia as s im:
pagina.html# ancor a
S alve a página e tecle F12 par a vis ualiz á- la no navegador . Em s eguida feche a página.
T es te o s ite localmente.

Dream Weaver MX - Unicamp

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dream Weaver MX - Unicamp

Uploaded by

Copyright:

Available Formats

Dreamweaver MX – Básico

Este documento é propriedade intelectual © 2002 do Centro de Computação da Unicamp

1. As apostilas publicadas pelo Centro de Computação da Unicamp podem ser

2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas

3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer

Adicionalmente, devem ser observadas as seguintes restrições:

A licença de uso e redistribuição deste material é oferecida sem nenhuma garantia de

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 2

Cr iando páginas a par tir de modelos 31

Cr iando a página empr es a 34

Cr iando a página pr odutos 38

Última atualiz ação: 12/08/2003

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 3

As páginas Web s ão es cr itas na linguagem H T ML (Hyper tex Mar kup Language), ou

Par a que o conteúdo de um documento HT ML pos s a s er for matado e ex ibido devemos

O navegador funciona independentemente de s e es tar conectado a I nter net. A melhor

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 4

F er r am en t as n eces s ár ias par a a cr iação de págin as

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 5

A s eguir , as tags bás icas da linguagem html:

Ex emplo: Res ultado:

Ex emplo: Res ultado:

Ex emplo: Res ultado:

Ex emplo: Res ultado:

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 6

Ex emplo: Res ultado:

Ex emplo: Res ultado:

Ex emplo: Res ultado:

Ex emplo: Res ultado:

< H R > = mar cação de linha

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 7

W idt h = lar gur a

Ex emplo: Res ultado:

Ex emplo: Res ultado:

< A> < / A>

T AR GE T = _ B L AN K : abr e a página em uma nova j anela do br ows er

Ex emplo: Res ultado:

E x ibin do u m a im agem : ( ar qu ivos com ex t en s ão .gif ou .j pg)

Ex emplo: Res ultado:

F az en do dow n load de u m ar qu ivo: ( ar qu ivos com ex t en s ão .D OC, .T XT , .Z I P )

Ex emplo: Res ultado:

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 8

R eceben do e-m ails :

Ex emplo: Res ultado:

pr ot ocolo: / / s er vidor / dir et or io/ ar qu ivo

Os pr otocolos mais us ados s ão (file ou http):

Ex emplo: Res ultado:

T r abalh an do com t abela de cor es

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 9

D icas par a a con s t r u ção de u m s it e

1ª Fas e: Or ganiz ação da infor mação

2ª Fas e: Conceituação do s ite e definição da es tr utur a de navegação

3ª Fas e: Montagem do S ite

4ª Fas e: T es tar localmente

5ª Fas e: Dis ponibiliz ar o s ite

D ica de com o or gan iz ar e es t r u t u r ar a n avegação de u m s it e

01- Definir o conteúdo, o que s er á divulgado no s ite

02- Es tabelecer obj etivos :

03- Divida o s eu conteúdo em tópicos :

Cr ie uma lis ta com os pr incipais tópicos , a pr incípio não impor ta a

S ua lis ta poder á ter quantos tópicos des ej ar , mas cuidado, o s eu leitor

• S er á que os leitor es cons eguem navegar pelo conteúdo de cada tipo de

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp 10