HTML

HTML

HTML MANUAL PRTICO

CARLA
 HTML

ndice
1. Introduo ............................................................................................................................. 2
2. Como funciona ...................................................................................................................... 2
3. HTML CSS JavaScript........................................................................................................ 3
4. Estudo de Cores..................................................................................................................... 4
5. Estrutura de pastas de um Site.............................................................................................. 6
6. Estrutura de um documento HTML....................................................................................... 7
7. A declarao <!DOCTYPE>..................................................................................................... 8
8. charset=utf-8 ......................................................................................................................... 8
9. Comentrio............................................................................................................................ 9
10. HTML Headings.................................................................................................................. 9
11. Pargrafos e Quebras de Linha.......................................................................................... 9
12. Formatao de texto ....................................................................................................... 10
13. HTML Links Hyperlinks.................................................................................................. 13
14. Imagens ........................................................................................................................... 14
15. Imagem como link ........................................................................................................... 15
16. HTML Lists ....................................................................................................................... 17
17. Table ................................................................................................................................ 20
18. Anexo 1 Adobe FireWorks Editor de imagens ........................................................... 22
19. Anexo 2 Adobe Dreamweaver...................................................................................... 33

Formador Carla Coelho 1

 HTML

1. Introduo

A linguagem HTML (Hyper Text Markup Language) tem como objetivo formatar textos atravs
de marcaes especiais denominadas tags, para que possam ser mostrados pelos clientes Web,
tambm chamados navegadores ou browsers. Esta linguagem possibilita tambm a interligao
entre pginas Web, criando assim documentos com o conceito de hipertexto.

2. Como funciona

Um Site alojado num servidor Web (IIS, Apache ou outro)

Quando o endereo de uma pgina colocado num Browser de uma estao cliente, para ser
aberta, o Browser envia um pedido com o protocolo http ao servidor (Request).

Se a pgina estiver disponvel, o Servidor Web envia a pgina para o cliente (Response).

Se a pgina precisa da informao de uma BD, uma pgina dinmica, seno uma pgina
esttica.

Existem dois tipos de servidores mais utilizados: IIS da Microsoft e Apache, com origem Linux.
Ambos funcionam num Sistema Windows.

Um servidor web IIS, utiliza uma linguagem de programao (lado servidor) ASP.NET e uma base
de dados em SQL Server.

Um servidor web Apache utiliza uma linguagem de programao (lado servidor) PHP e uma base
de dados em MySql.

Formador Carla Coelho 2

 HTML

No lado do cliente, apenas visto a estrutura da pgina em HTML, as formataes

(apresentao) da pgina em CSS e a funcionalidade da pgina em JavaScript.

3. HTML CSS JavaScript

Toda a estrutura da pgina (esqueleto) construdo em HTML, com tabelas, frames ou DIVs.

As formataes, decorao, apresentao construda em CSS, por exemplo a cor do texto ou

a imagem de fundo da pgina.

A funcionalidade da pgina construda em Javascript, por exemplo o cdigo de um boto

RollOver (muda de cor quando passamos com o rato por cima).

Formador Carla Coelho 3

 HTML

4. Estudo de Cores

Uma pgina web deve ser construda e decorada com um nmero reduzido de cores. frequente
utilizarmos apenas 6 a 8 cores na decorao da pgina.

O sistema de cores utilizado o RGB.

RGB a abreviatura do sistema de cores aditivas formado por

Vermelho (Red), Verde (Green) e Azul (Blue).

Uma cor no modelo de cores RGB pode ser descrita pela

indicao da quantidade de vermelho, verde e azul que
contm.

O sistema RGB pode ser apresentado no formato

decimal ou hexadecimal.

No formato decimal, cada um dos pesos tem 8

bits. Com 8 bits, podemos representar 2^8=256
informaes diferentes. Os nmeros da escala de 0
a 255 perfazem 256. Ento cada um dos nmeros
Red, Green ou Blue, apenas pode ter dgitos de 0 a
255.

No formato hexadecimal, cada uma das cores

apenas pode ter 2 digitos hexadecimais (0, 1, 2, 3, 4,
5, 6, 7, 8, 9, A, B, C, D, E, F).

Cores web safe

As cores web safe (cores seguras para a web), so 216 no total e podem ser utilizadas para no
haver um incorreta interpretao dos tons pelos Browsers (opera, IE, Firefox..etc)

As cores web safe so construdas com pares iguais de dgitos hexadecimais do conjunto: 00, 33,
66, 99, CC, FF (Exemplo: 3366CC).

uma boa prtica utilizar apenas cores web safe, mas no entanto, as pginas podem ser
construdas com qualquer combinao de cores.

Formador Carla Coelho 4

 HTML

O Site www.visibone.com, mostra a palete de cores web safe com os cdigos RGB decimal e
hexadecimal.

As cores de dentro (pasteis suaves) devem ser utilizados para fundos e as cores de fora (cores
fortes) para objetos tipo botes e contrastes.

Exerccio 1 Construa num documento de PowerPoint um esquema com 8 cores sua escolha,
como mostra a figura em baixo. O preto e o branco so obrigatrios. Poder utilizar uma
calculadora para converter nmeros hexadecimais para decimais, porque o PowerPoint apenas
trabalha com RGB decimal e na web trabalhamos com RGB hexadecimal.

Exerccio

Formador Carla Coelho 5

 HTML

O Site https://color.adobe.com/pt/create/color-wheel/, tem uma ferramenta muito til da

Adobe, que nos ajuda a combinar cores.

No quadrado do meio, inserimos os cdigos da nossa cor e, depois podemos escolher uma regra
de cores e ver, quais cores combinam com a nossa.

Exerccio 2 Altere duas das cores no documento de cores que criou.

Introduza o cdigo da primeira cor do documento neste Site da Adobe,
selecione uma regra e escolha duas cores para o documento.
Exerccio

5. Estrutura de pastas de um Site

Um projeto HTML dever ter a seguinte estrutura

de pastas:

Formador Carla Coelho 6

 HTML

6. Estrutura de um documento HTML

Um documento HTML pode ser escrito num bloco de notas ou num editor prprio como o Adobe
Dreamweaver.

No bloco de notas o ficheiro deve ser guardado com o nome: nome.html e do tipo: todos os
ficheiros.

Os nomes de ficheiros e pastas e objetos no HTML deve obedecer regra de nomes de variveis
da programao: utilizar minsculas, comear com letras, sem espaos ou acentos ou
cedilhados.

Estrutura mnima de um documento HTML:

Exerccio 3:

Crie uma estrutura de pastas para o projeto00 em HTML, construa uma

pgina com o nome index.html no bloco de notas, onde mostra as frases
Hello World e o seu nome. Visualize a pgina num Browser.
Exerccio

A estrutura de um documento HTML mais composto pode ser feita com:

Tables (tabelas)
Divs (Retngulos)
Frames (Zonas)

Mais frente iremos utilizar Tables. Com CSS iremos ainda utilizar Divs.

Formador Carla Coelho 7

 HTML

7. A declarao <!DOCTYPE>

A declarao <!DOCTYPE> ajuda o Browser a mostrar a pgina web corretamente.

O Doctype deve ser a primeira linha de cdigo do documento antes da tag HTML.

De acordo com as especificaes do W3C, um DOCTYPE informa ao validador qual a verso

do HTML, ou XHTML, que est a ser utilizada, e deve constar no topo de cada pgina. So
elementos essenciais na construo de uma pgina dentro dos padres. O (x)HTML e o CSS do
site no sero vlidos sem eles. Tambm so essenciais para uma correta renderizao da
pgina.

Se omitir o DOCTYPE, ou usar um invlido, o Browser vai renderiz-lo em Quirks Mode, onde
o Browser pensa que escreveu o HTML de forma antiquada e invlida. Mas se escolher um
DOCTYPE vlido, ele ira funcionar em Standards Compliance Mode, ou seja, modo de
concordncia com os padres.

Uma declarao normal do <!DOCTYPE> a seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

8. charset=utf-8

Para no haver problemas quando tentamos utilizar alguns caracteres especiais, como os de
acentuao da lngua portuguesa, Utilizamos a meta tag charset, na zona do HEAD:

<meta http-equiv="content-type" content="text/html;

charset=utf-8">

Formador Carla Coelho 8

 HTML

9. Comentrio

<!- - Isto um comentrio em HTML - - >

10. HTML Headings

Headings so ttulos em HTML, existem 6 nveis de headings (h1, h2, h3, h4, h5, h6): (ttulos,
subttulos, sub-subtitulos, etc..)

11. Pargrafos e Quebras de Linha

<p> pargrafo </p> : define a zona de um pargrafo.

<br/> : Insere uma quebra de linha.

Formador Carla Coelho 9

 HTML

12. Formatao de texto

Tag Descrio
<b> Texto em Bold
<em> Texto enfatizado
<i> Texto em Itlico
<small> Texto mais pequeno
<strong> Texto importante
<sub> Texto inferior linha
<sup> Texto Superior linha
<ins>ou<u> Texto inserido
<del> Texto apagado
<mark> Texto com cor de realce

Formador Carla Coelho 10

 HTML

Exerccio 4

Construa um documento em HTML com o texto mostrado em baixo e com o

nome index2.html, na mesma pasta do exerccio anterior.

Formate o ttulo Os Lusadas com a tag h1.

Formate o subttulo Canto 1 com a tag h2. Exerccio
Formate os subttulos Estrofe 1 e Estrofe 2 e Estrofe 3 com a tag h3.
Cada uma das estrofes estar dentro de um pargrafo.

Os Lusadas
Canto 1
Estrofe 1
As armas e os bares assinalados,
Que da ocidental praia Lusitana,
Por mares nunca de antes navegados,
Passaram ainda alm da Taprobana,
Em perigos e guerras esforados,
Mais do que prometia a fora humana,
E entre gente remota edificaram
Novo Reino, que tanto sublimaram;

Estrofe 2
E tambm as memrias gloriosas
Daqueles Reis, que foram dilatando
A F, o Imprio, e as terras viciosas
De frica e de sia andaram devastando;
E aqueles, que por obras valerosas
Se vo da lei da morte libertando;
Cantando espalharei por toda parte,
Se a tanto me ajudar o engenho e arte.

Estrofe 3
Cessem do sbio Grego e do Troiano
As navegaes grandes que fizeram;
Cale-se de Alexandro e de Trajano
A fama das vitrias que tiveram;
Que eu canto o peito ilustre Lusitano,
A quem Neptuno e Marte obedeceram:
Cesse tudo o que a Musa antgua canta,
Que outro valor mais alto se alevanta.
Invocao s Ninfas do Tejo

Formador Carla Coelho 11

 HTML

Exerccio 5

Amor fogo que arde sem se ver

Amor fogo que arde sem se ver; Exerccio

ferida que di e no se sente;
um contentamento descontente;
dor que desatina sem doer;

um no querer mais que bem querer;

solitrio andar por entre a gente;
nunca contentar-se de contente;
cuidar que se ganha em se perder;

querer estar preso por vontade;

servir a quem vence, o vencedor;
ter com quem nos mata lealdade.

Mas como causar pode seu favor

Nos coraes humanos amizade,
Se to contrrio a si o mesmo Amor?
Lus de Cames

Formador Carla Coelho 12

 HTML

13. HTML Links Hyperlinks

Um Link um texto ou imagem, que quando sofre um clique, salta para um outro documento.

<a href="url">link text</a>

A tag (a) tem um atributo href = direcionada para uma url que um link

href um atributo da tag <a>.

As tags podem ter muitos atributos (propriedades).

Exerccio 6

Construa um documento em html, com o nome index4.html, com links para as

pginas: www.sapo.pt, www.iol.pt, www.msn.com/pt-pt/

E para 3 outras pginas de contedos generalistas sua escolha. Exerccio

Formador Carla Coelho 13

 HTML

14. Imagens

Todas as imagens em bruto, enquanto esto a ser tratadas, so guardadas na pasta imagesAux.

As imagens que vo entrar no site, so guardadas na pasta images.

As imagens GIF permitem transparncias e permitem poucas cores (256). til para botes e
logos.

As imagens JPG permitem milhes de cores mas no permitem transparncias. til para fotos.

As imagens PNG permitem milhes de cores e transparncias. Apresentam melhor qualidade,

mas so muito mais pesadas do que as GIF e JPG.

<img src="url" alt="some_text">

O atributo alt especifica um texto alternativo para a imagem, caso esta no possa ser mostrada.

Os atributos width (comprimento) e height (altura) de uma imagem devem sempre ser
inseridos.

Formador Carla Coelho 14

 HTML

15. Imagem como link

Para utilizar uma imagem como link, basta colocar a tag <img> dentro de uma tag <a>

Exerccio 7

Construa uma pgina html com 4 imagens e 4 links. As imagens sobre cada
uma das estaes do ano, escolhidas na Internet tm as dimenses
(300x200). Cada um dos links, remete para uma pgina da Wikipedia sobre
a estao. Exerccio

Formador Carla Coelho 15

 HTML

Exerccio 8

Construa uma pgina com 8 imagens (200x200), como descrito. Cada

uma das imagens dever ter um link para a pgina da Internet, de
Exerccio
onde foi retirada.

Formador Carla Coelho 16

 HTML

16. HTML Lists

Lista no ordenadas Unordered list

Lista ordenadas Ordered list

Unordered List <ul>

List Item <li>

O smbolo da lista pode ser alterado em CSS. No mdulo de CSS.

<ul style="list-style-type:square">

Ordered List <ol>

List Item <li>

Formador Carla Coelho 17

 HTML

Ordered HTML Lists O atributo Type

Nested HTML Lists

Formador Carla Coelho 18

 HTML

Listas horizontais

No mdulo de CSS

Exerccio 9

Construa a seguinte Nested list em html, tenha em ateno o tpico a

baixo referido com alteraes:

Exerccio

Nos pontos A. e B. da lista do Software insira um novo nvel na nested list .

Formador Carla Coelho 19

 HTML

17. Table <td>

<tr> inicio linha </tr> fim linha

<td> inicio tabela </td> fim tabela

Quando no escrevemos nada nas clulas, inserimos um espao em HTML: <td>&nbsp;</td>

O border (grossura linha) s fica definido a 1px, para podermos ver as linhas da tabela.

Num produto final, o border do layout de uma pgina fica sempre a 0px.

As tags <td> tambm podem ter propriedades width (comprimento) e height (altura).

Formador Carla Coelho 20

 HTML

Exerccio 10

Constri a estrutura (layout) de uma pgina em html, com a seguinte

tabela:

Exerccio

Tabela com 4 linhas e 1 coluna. As dimenses da tabela so as medidas de uma resoluo dos
monitores. 1024x768 uma das resolues mais utilizadas para a construo da estrutura de
uma pgina. A soma das dimenses de todas as linhas e todas as colunas da tabela tem que dar
1024x768.

Exerccio 11

Constri a estrutura (layout) de uma pgina em html, com a seguinte

tabela (4 linhas x 1 coluna):

Exerccio

Insira tabelas dentro de tabelas, para completar o Layout.

Formador Carla Coelho 21

 HTML

18. Anexo 1 Adobe FireWorks Editor de imagens

Novo documento

Comprimento
altura
Resoluo: sempre 72

Formador Carla Coelho 22

 HTML

A. Copiar imagens para um documento png

Criar um novo documento (300x200)

Nasceu este documento.

Abrir (open) a imagem.

(uma imagem guardada
no disco).
A imagem aberta num
novo documento.

Copiar a imagem

Formador Carla Coelho 23

 HTML

Colar a imagem no nosso documento.

Redimensionar a imagem nos cantos

com a tecla Shift. No importa que fique
um pouco maior do que a folha. S ir
aparecer o que estiver dentro da folha.

Guardar a imagem na pasta imagesAux

Converter a imagem para JPG:

menu File Image Preview

Escolher o formato JPG e exportar para

a pasta das images.

Como j referido, as imagens nas pginas web devem ter pouco peso, a no ser que um dos
principais requisitos seja a qualidade da imagem. Assim sendo as imagens que vo estar nas
pginas devero ser GIFs ou JPGs, em vez das PNG.

Como o formato de edio do Fireworks o PNG, no fim da construo da imagem, alm de

termos que guarda-la no formato residente (PNG), teremos tambm que exporta-la para GIF
ou JPG e numa destas formas inseri-la na pgina web.

Formador Carla Coelho 24

 HTML

B. Construir uma imagem nova

Criar um novo documento com

as dimenses 1024x150

Nasceu este canvas (folha nova)

Vamos mudar a cor do canvas

(cor da folha) para: #C09A6B

Formador Carla Coelho 25

 HTML

Inserir a imagem de um camelo

na folha.

Pesquisei por: camel png nas

imagens do Google e guardei nas
imagesAux uma imagem de um
camelo com transparncia.

Vou inverter a orientao do

camelo.

Selecionar o camelo Pointer

tool Seta preta

Menu Modify Transform Flip

Horizontal

Fica assim

Com a ferramenta Text Tool

inserir uma caixa de texto.

Escrever o texto: O Areias um

camelo

Selecionar a caixa de texto com a

seta preta

No menu Properties, formatar o

texto para:
Letra: Arial, Bold
Tamanho: 40
cor: Branco

Posio do texto como na

imagem.

Formador Carla Coelho 26

 HTML

Guardar a imagem: imgHeader.png na pasta imagesAux

Menu File Image Preview JPG imgHeader.jpg na pasta images

Formador Carla Coelho 27

 HTML

B1. Construir outra imagem

Criar um novo documento com

as dimenses 1024x68

Cor do canvas: #C09A6B

3 caixas de texto com o seu

Nome, nmero e Curso.

toolBox seta do retngulo

menu de formas desenhar
outras formas

Cor da forma: #735735

Cor da linha: branco

espessura da linha: 1px

Formador Carla Coelho 28

 HTML

Com a ferramenta scaleTool,

podemos redimensionar ou
rodar os objetos.

No painel properties podemos

redimensionar os objetos e
posiciona-los em ralao ao X
(lado esquerdo da folha) e em
relao ao Y (topo da folha).

Para trazer objetos para a frente

ou envia-los para trs painel
Layers e modificar a ordem,
arrastando o objeto para cima ou
para baixo.

Guardar a imagem: imgFooter.png na pasta imagesAux

Menu File Image Preview GIF imgFooter.gif na pasta images

Formador Carla Coelho 29

 HTML

C. Botes

Porque os botes vo ser imagens roollOver, teremos que construir 2 imagens para cada
boto. Uma para o estado normal (UP), outra para o estado OVER (Quando o rato passa por
cima do boto). Os botes de um site devero ser todos iguais, mesma dimenso e mesma
decorao. Apenas muda o texto dos botes.

No FireWorks um novo documento

100x50

Cor de canvas: #735735

Com o rectangle tool, Inserir

um retngulo de qq.
Tamanho e cor na folha

Formador Carla Coelho 30

 HTML

Selecionar retngulo, com

seta preta.

W:100
H:100
X:0
Y:0
color: #295B73
Roundness: 50%
sem cor de linha

Selecionar retngulo, com

seta preta.

Filters sinal + - Bevel and

Emboss Inner Bevel -

Mudar de Flat para smooth.

Formador Carla Coelho 31

 HTML

Com a texto tool, escrever

Home, a Arial, Bold, 16,
Branco.

Ateno ao tamanho da
letra. Todos os botes
devem ter o mesmo tipo,
cor e tamanho da letra.
Teremos que adaptar o
tamanho da letra maior
palavra existente nos
botes.

Guardar o boto com o nome bHome1.png (imagesAux)

Menu file image preview GIF bHome1.gif (images)

Para construir a segunda imagem do boto (estado over) basta mudar a cor do boto ou a cor
do texto e gravar o boto com outro nome:

Alterar a cor do boto para:

#6BA4C0

Alterar a cor do texto para

preto

Nota: Neste caso vamos

mudar ambos, a cor do
boto e cor do texto.

Guardar o boto com o nome bHome2.png (imagesAux)

Menu file image preview GIF bHome2.gif (images)

Para construir os outros botes da pgina, basta editar os ficheiros png e alterar o texto.

Formador Carla Coelho 32

 HTML

19. Anexo 2 Adobe Dreamweaver

O Dreamweaver um construtor de pginas web.

A Barra de menus

B Barra de ferramentas

C rea de trabalho

D Painel de propriedades

E Grupo de painis

F Botes de visualizao (Code, Split, Design)

Formador Carla Coelho 33

 HTML

Vamos construir um site em Dreamweaver como mostrado na imagem:

Com o seguinte cdigo de cores:

Formador Carla Coelho 34

 HTML

Formas de visualizao do documento html:

Para trabalhar o
cdigo.

Para ver ambas as

vistas.

Para trabalhar em
modo de design.

Quando iniciamos um novo documento em Dreamweaver, o cdigo inicial j vem feito. Quando
inserimos elementos em modo grfico (tabelas, imagens, ), o Dreamweaver insere
automaticamente o cdigo html, na vista Code.

Formador Carla Coelho 35

 HTML

Passo 1 Construir a estrutura do site com uma tabela.

Em modo de design menu insert table

Rows linhas:4
Columns Colunas:1
Table Width Comprimento da tabela:1024 px
Border thickness espessura da linha: 0 px
Cell Padding distancia dos objetos dentro da clula: 0
Cell spacing distancia entre clulas:0
Header cabealho da tabela: None

Formador Carla Coelho 36

 HTML

Ateno: colocar sempre a o border, cell padding e cell spacing a zero.

Nasce assim a tabela em modo de design:

Vamos para modo de code, vemos que j foi inserido todo o cdigo html necessrio para a
construo da tabela:

Formador Carla Coelho 37

 HTML

No cdigo na tag Table, vamos colocar a altura da Table (propriedade height=768):

Cada uma das clulas tem uma dimenso especfica:

No modo de design vamos dar as dimenses de cada uma das clulas. Colocar o cursor dentro
de cada uma das clulas e modificar as propriedades W (Width comprimento) e H ( Height
altura):

Formador Carla Coelho 38

 HTML

Estrutura feita.

Porque ainda no estamos a trabalhar com CSS, todas as zonas na nossa pgina vo ter imagens
ou imagens com texto. No vamos ainda introduzir texto nas zonas, porque teria que ser sempre
formatado com CSS.

Vamos ento construir uma imagem no Fireworks para a zona do header (1024x150)

A construo da imagem foi explicada no captulo do Fireworks.

No DreamWeaver, colocar o cursor na clula do Header e, menu Insert image imgHeader.jpg

Formador Carla Coelho 39

 HTML

Fica assim:

O Alternate text, serve para deixar um texto, quando a imagem no aparece por algum
motivo download por exemplo.

Podemos ainda acrescentar uma propertie title na tag img, como mostra a imagem:

<img src="images/imgHeader.jpg" width="1024" height="150" alt="imgHeader"

title="header" />

O title serve para mostrar um label, quando num browser passamos o rato por cima da
imagem.

No browser

Formador Carla Coelho 40

 HTML

Vamos ento construir uma imagem no Fireworks para a zona do footer (1024x68)

A construo da imagem foi explicada no captulo do Fireworks.

No DreamWeaver, colocar o cursor na clula do footer e, menu Insert image imgFooter.gif

vista design

AlternateText: imgFooter

Title: footer

vista code

No browser

Formador Carla Coelho 41

 HTML

Como dito anteriormente, apenas estamos a construir a pgina web com imagens nesta altura,
porque ainda no estamos a trabalhar com CSS.

Nota: a zona do main poderia ser dividida em vrias zonas, com a utilizao de uma nova tabela.

Vamos ento construir uma imagem para a zona do main (1024x500).

No DreamWeaver, colocar o cursor na clula do main e, menu Insert image main01.jpg

AlternateText: imgMain01

Title: main01

no browser

Formador Carla Coelho 42

 HTML

Num site a estrutura e decorao deve ser igual em todas as pginas. Assim, as zonas do head,
menu e footer devem ser sempre iguais. Apenas muda de pgina para pgina a zona do main,
zona de informao.

Porque vamos ter duas pginas, vamos construir uma nova imagem para a zona do main da
futura nova pgina, chamada main02:

Esta nova imagem apenas vai ser utilizada na pgina2, quando esta for construda.

Botes:

A zona do menu vai ter dois botes: Home e Imagens. Porque os botes vo ser roolOver, cada
boto precisa de duas imagens (A construo dos botes foi explicada no captulo do Fireworks).

Cada boto vai ter as dimenses 100x50, logo temos que construir uma nova tabela com 1 linha
e 3 colunas na zona do menu (trs colunas, porque precisamos de duas para os botes e de mais
uma para o resto do espao):

Menu Insert table

Row:1
column:3
border:0
cell padding:0
cell spacing:3

Formador Carla Coelho 43

 HTML

Dimensionar cada uma das

clulas:

100x50
100x50
824x50

Posicionar o cursor na clula

do boto home:

Menu insert image objects

rollover image

Original Image: imagem UP bHome1.gif

Rollover Image: imagem OVER bHome2.gif

Repetir o processo para o Segundo boto

Formador Carla Coelho 44

 HTML

Construir no fireworks uma imagem com as dimenses 824x50, com a cor de fundo #735735,
para por na clula 3 do menu:

Fica assim a pgina:

Na zona do cdigo, foi

automaticamente inserido um
<script> em javascript no
<head>.

Se por algum motivo for

necessrio apagar os botes, o
script deve tambm ser
manualmente apagado.

Quando inserirmos
novamente os botes, o
cdigo inserido novamente.

No browser:

Quando passamos o rato por cima dos botes,

eles mudam de aspeto.

No IE preciso permitir a execuo de scripts,

numa caixa de dilogo que aparece.

Formador Carla Coelho 45

 HTML

Links:

Selecionar o boto Home e,

nas properties campo
Link:

Campo Link: apagar o # que

l est e inserir o nome da
pgina, no caso:
index12.html

Selecionar o boto Images

e, nas properties campo
Link:

Campo Link: apagar o # que

l est e inserir o nome da
pgina que ainda no
existe, mas vai se chamar
imagens.html

Nesta altura a pgina index12.html est concluda. Tem toda a estrutura feita, tem botes com
links e zona de informao no main. Guardar o documento.

Todas as outras pginas do site tero uma estrutura, botes e links iguais. Apenas muda a zona
da informao main.

No explorador do windows,
copiar e colar o documento
index12 e mudar o nome
para imagens.

Ateno o nome do
documento tem que ser
igual ao nome dado no link
do boto.

Todos os nomes dos

documentos html tm que
ser iguais aos nomes dados
nos links dos botes.

Formador Carla Coelho 46

 HTML

Abrir o documento imagens.html no Dreamweaver, apagar a imagem da zona main e inserir a

nova imagem: main02.jpg

Guardar o documento e testar no browser:

Exerccio 12

Construa um site com 5 pgina. Tema flores ou frutos ou rvores.

Esquema de cores escolha

Layout escolha
Exerccio

Formador Carla Coelho 47