Dreamweaver

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.


Dreamweaver

Mais conteúdo relacionado

Semelhante a Dreamweaver

Mais de webphotoshop

Dreamweaver