HTML

HTML

HTML – MANUAL PRÁTICO

CARLA
 HTML

Índice
1. Introdução ............................................................................................................................. 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 declaração <!DOCTYPE>..................................................................................................... 8
8. charset=utf-8 ......................................................................................................................... 8
9. Comentário............................................................................................................................ 9
10. HTML Headings.................................................................................................................. 9
11. Parágrafos e Quebras de Linha.......................................................................................... 9
12. Formatação 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. Introdução

A linguagem HTML (Hyper Text Markup Language) tem como objetivo formatar textos através
de marcações especiais denominadas tags, para que possam ser mostrados pelos clientes Web,
também chamados navegadores ou browsers. Esta linguagem possibilita também a interligação
entre páginas Web, criando assim documentos com o conceito de hipertexto.

2. Como funciona

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

Quando o endereço de uma página é colocado num Browser de uma estação cliente, para ser
aberta, o Browser envia um pedido com o protocolo http ao servidor (Request).

Se a página estiver disponível, o Servidor Web envia a página para o cliente (Response).

Se a página precisa da informação de uma BD, é uma página dinâmica, senão é uma página
estática.

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 programação (lado servidor) ASP.NET e uma base
de dados em SQL Server.

Um servidor web Apache utiliza uma linguagem de programação (lado servidor) PHP e uma base
de dados em MySql.

Formador Carla Coelho 2

 HTML

No lado do cliente, apenas é visto a estrutura da página em HTML, as formatações

(apresentação) da página em CSS e a funcionalidade da página em JavaScript.

3. HTML – CSS – JavaScript

Toda a estrutura da página (esqueleto) é construído em HTML, com tabelas, frames ou DIVs.

As formatações, decoração, apresentação é construída em CSS, por exemplo a cor do texto ou

a imagem de fundo da página.

A funcionalidade da página é construída em Javascript, por exemplo o código de um botão

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

Formador Carla Coelho 3

 HTML

4. Estudo de Cores

Uma página web deve ser construída e decorada com um número reduzido de cores. É frequente
utilizarmos apenas 6 a 8 cores na decoração da página.

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

indicação da quantidade de vermelho, verde e azul que
contém.

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
informações diferentes. Os números da escala de 0
a 255 perfazem 256. Então cada um dos números
Red, Green ou Blue, apenas pode ter dígitos 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), são 216 no total e podem ser utilizadas para não
haver um incorreta interpretação dos tons pelos Browsers (opera, IE, Firefox..etc)

As cores web safe são construídas com pares iguais de dígitos hexadecimais do conjunto: 00, 33,
66, 99, CC, FF (Exemplo: 3366CC).

É uma boa prática utilizar apenas cores web safe, mas no entanto, as páginas podem ser
construídas com qualquer combinação de cores.

Formador Carla Coelho 4

 HTML

O Site www.visibone.com, mostra a palete de cores web safe com os códigos 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 botões e contrastes.

Exercício 1 – Construa num documento de PowerPoint um esquema com 8 cores à sua escolha,
como mostra a figura em baixo. O preto e o branco são obrigatórios. Poderá utilizar uma
calculadora para converter números hexadecimais para decimais, porque o PowerPoint apenas
trabalha com RGB decimal e na web trabalhamos com RGB hexadecimal.

Exercício

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 códigos da nossa cor e, depois podemos escolher uma regra
de cores e ver, quais cores combinam com a nossa.

Exercício 2 – Altere duas das cores no documento de cores que criou.

Introduza o código da primeira cor do documento neste Site da Adobe,
selecione uma regra e escolha duas cores para o documento.
Exercício

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 próprio 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 variáveis
da programação: utilizar minúsculas, começar com letras, sem espaços ou acentos ou
cedilhados.

Estrutura mínima de um documento HTML:

Exercício 3:

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

página com o nome index.html no bloco de notas, onde mostra as frases
“Hello World” e o seu nome. Visualize a página num Browser.
Exercício

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

 Tables (tabelas)
 Divs (Retângulos)
 Frames (Zonas)

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

Formador Carla Coelho 7

 HTML

7. A declaração <!DOCTYPE>

A declaração <!DOCTYPE> ajuda o Browser a mostrar a página web corretamente.

O Doctype deve ser a primeira linha de código do documento antes da tag HTML.

De acordo com as especificações do W3C, um DOCTYPE informa ao validador qual é a versão

do HTML, ou XHTML, que está a ser utilizada, e deve constar no topo de cada página. São
elementos essenciais na construção de uma página dentro dos padrões. O (x)HTML e o CSS do
site não serão válidos sem eles. Também são essenciais para uma correta renderização da
página.

Se omitir o DOCTYPE, ou usar um inválido, o Browser vai renderizá-lo em “Quirks Mode”, onde
o Browser pensa que escreveu o HTML de forma antiquada e inválida. Mas se escolher um
DOCTYPE válido, ele ira funcionar em “Standards Compliance Mode”, ou seja, modo de
concordância com os padrões.

Uma declaração 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 não haver problemas quando tentamos utilizar alguns caracteres especiais, como os de
acentuação da língua 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. Comentário

<!- - Isto é um comentário em HTML - - >

10. HTML Headings

Headings são títulos em HTML, existem 6 níveis de headings (h1, h2, h3, h4, h5, h6): (títulos,
subtítulos, sub-subtitulos, etc..)

11. Parágrafos e Quebras de Linha

<p> parágrafo </p> : define a zona de um parágrafo.

<br/> : Insere uma quebra de linha.

Formador Carla Coelho 9

 HTML

12. Formatação de texto

Tag Descrição
<b> Texto em Bold
<em> Texto enfatizado
<i> Texto em Itálico
<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

Exercício 4

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

nome index2.html, na mesma pasta do exercício anterior.

Formate o título “Os Lusíadas” com a tag h1.

Formate o subtítulo “Canto 1” com a tag h2. Exercício
Formate os subtítulos “Estrofe 1” e “Estrofe 2” e “Estrofe 3” com a tag h3.
Cada uma das estrofes estará dentro de um parágrafo.

Os Lusíadas
Canto 1
Estrofe 1
As armas e os barões assinalados,
Que da ocidental praia Lusitana,
Por mares nunca de antes navegados,
Passaram ainda além da Taprobana,
Em perigos e guerras esforçados,
Mais do que prometia a força humana,
E entre gente remota edificaram
Novo Reino, que tanto sublimaram;

Estrofe 2
E também as memórias gloriosas
Daqueles Reis, que foram dilatando
A Fé, o Império, e as terras viciosas
De África e de Ásia andaram devastando;
E aqueles, que por obras valerosas
Se vão da lei da morte libertando;
Cantando espalharei por toda parte,
Se a tanto me ajudar o engenho e arte.

Estrofe 3
Cessem do sábio Grego e do Troiano
As navegações grandes que fizeram;
Cale-se de Alexandro e de Trajano
A fama das vitórias que tiveram;
Que eu canto o peito ilustre Lusitano,
A quem Neptuno e Marte obedeceram:
Cesse tudo o que a Musa antígua canta,
Que outro valor mais alto se alevanta.
Invocação às Ninfas do Tejo

Formador Carla Coelho 11

 HTML

Exercício 5

Amor é fogo que arde sem se ver

Amor é fogo que arde sem se ver; Exercício

É ferida que dói e não se sente;
É um contentamento descontente;
É dor que desatina sem doer;

É um não querer mais que bem querer;

É solitário 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 corações humanos amizade,
Se tão contrário a si é o mesmo Amor?
Luís de Camões

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

Exercício 6

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

páginas: www.sapo.pt, www.iol.pt, www.msn.com/pt-pt/

E para 3 outras páginas de conteúdos generalistas à sua escolha. Exercício

Formador Carla Coelho 13

 HTML

14. Imagens

Todas as imagens em bruto, enquanto estão a ser tratadas, são guardadas na pasta imagesAux.

As imagens que vão entrar no site, são guardadas na pasta images.

As imagens GIF permitem transparências e permitem poucas cores (256). Útil para botões e
logos.

As imagens JPG permitem milhões de cores mas não permitem transparências. Útil para fotos.

As imagens PNG permitem milhões de cores e transparências. Apresentam melhor qualidade,

mas são 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 não 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>

Exercício 7

Construa uma página html com 4 imagens e 4 links. As imagens sobre cada
uma das estações do ano, escolhidas na Internet têm as dimensões
(300x200). Cada um dos links, remete para uma página da Wikipedia sobre
a estação. Exercício

Formador Carla Coelho 15

 HTML

Exercício 8

Construa uma página com 8 imagens (200x200), como descrito. Cada

uma das imagens deverá ter um link para a página da Internet, de
Exercício
onde foi retirada.

Formador Carla Coelho 16

 HTML

16. HTML Lists

Lista não ordenadas – Unordered list

Lista ordenadas – Ordered list

Unordered List <ul>

List Item <li>

O símbolo da lista pode ser alterado em CSS. No módulo 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 módulo de CSS

Exercício 9

Construa a seguinte Nested list em html, tenha em atenção o tópico a

baixo referido com alterações:

Exercício

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

Formador Carla Coelho 19

 HTML

17. Table <td>

<tr> inicio linha </tr> fim linha

<td> inicio tabela </td> fim tabela

Quando não escrevemos nada nas células, inserimos um espaço 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 página fica sempre a 0px.

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

Formador Carla Coelho 20

 HTML

Exercício 10

Constrói a estrutura (layout) de uma página em html, com a seguinte

tabela:

Exercício

Tabela com 4 linhas e 1 coluna. As dimensões da tabela são as medidas de uma resolução dos
monitores. 1024x768 é uma das resoluções mais utilizadas para a construção da estrutura de
uma página. A soma das dimensões de todas as linhas e todas as colunas da tabela tem que dar
1024x768.

Exercício 11

Constrói a estrutura (layout) de uma página em html, com a seguinte

tabela (4 linhas x 1 coluna):

Exercício

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
Resolução: 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. Não 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 páginas web devem ter pouco peso, a não ser que um dos
principais requisitos seja a qualidade da imagem. Assim sendo as imagens que vão estar nas
páginas deverão ser GIFs ou JPGs, em vez das PNG.

Como o formato de edição do Fireworks é o PNG, no fim da construção da imagem, além de

termos que guarda-la no formato residente (PNG), teremos também que exporta-la para GIF
ou JPG e numa destas formas inseri-la na página web.

Formador Carla Coelho 24

 HTML

B. Construir uma imagem nova

Criar um novo documento com

as dimensões 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 transparência.

Vou inverter a orientação 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

Posição 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 dimensões 1024x68

Cor do canvas: #C09A6B

3 caixas de texto com o seu

Nome, número e Curso.

toolBox – seta do retângulo –

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 ralação ao X
(lado esquerdo da folha) e em
relação ao Y (topo da folha).

Para trazer objetos para a frente

ou envia-los para trás… 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. Botões

Porque os botões vão ser imagens roollOver, teremos que construir 2 imagens para cada
botão. Uma para o estado normal (UP), outra para o estado OVER (Quando o rato passa por
cima do botão). Os botões de um site deverão ser todos iguais, mesma dimensão e mesma
decoração. Apenas muda o texto dos botões.

No FireWorks um novo documento

100x50

Cor de canvas: #735735

Com o rectangle tool, Inserir

um retângulo de qq.
Tamanho e cor na folha

Formador Carla Coelho 30

 HTML

Selecionar retângulo, com

seta preta.

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

Selecionar retângulo, 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.

Atenção ao tamanho da
letra. Todos os botões
devem ter o mesmo tipo,
cor e tamanho da letra.
Teremos que adaptar o
tamanho da letra à maior
palavra existente nos
botões.

Guardar o botão com o nome bHome1.png (imagesAux)

Menu file – image preview – GIF – bHome1.gif (images)

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

Alterar a cor do botão para:

#6BA4C0

Alterar a cor do texto para

preto

Nota: Neste caso vamos

mudar ambos, a cor do
botão e cor do texto.

Guardar o botão com o nome bHome2.png (imagesAux)

Menu file – image preview – GIF – bHome2.gif (images)

Para construir os outros botões da página, basta editar os ficheiros png e alterar o texto.

Formador Carla Coelho 32

 HTML

19. Anexo 2 – Adobe Dreamweaver

O Dreamweaver é um construtor de páginas web.

A – Barra de menus

B – Barra de ferramentas

C – Área de trabalho

D – Painel de propriedades

E – Grupo de painéis

F – Botões de visualização (Code, Split, Design)

Formador Carla Coelho 33

 HTML

Vamos construir um site em Dreamweaver como mostrado na imagem:

Com o seguinte código de cores:

Formador Carla Coelho 34

 HTML

Formas de visualização do documento html:

Para trabalhar o
código.

Para ver ambas as

vistas.

Para trabalhar em
modo de design.

Quando iniciamos um novo documento em Dreamweaver, o código inicial já vem feito. Quando
inserimos elementos em modo gráfico (tabelas, imagens, …), o Dreamweaver insere
automaticamente o código 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 célula: 0
Cell spacing – distancia entre células:0
Header – cabeçalho da tabela: None

Formador Carla Coelho 36

 HTML

Atenção: 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 código html necessário para a
construção da tabela:

Formador Carla Coelho 37

 HTML

No código na tag Table, vamos colocar a altura da Table (propriedade height=”768”):

Cada uma das células tem uma dimensão específica:

No modo de design vamos dar as dimensões de cada uma das células. Colocar o cursor dentro
de cada uma das células e modificar as propriedades W (Width – comprimento) e H ( Height –
altura):

Formador Carla Coelho 38

 HTML

Estrutura feita.

Porque ainda não estamos a trabalhar com CSS, todas as zonas na nossa página vão ter imagens
ou imagens com texto. Não vamos ainda introduzir texto nas zonas, porque teria que ser sempre
formatado com CSS.

Vamos então construir uma imagem no Fireworks para a zona do header (1024x150)

A construção da imagem foi explicada no capítulo do Fireworks.

No DreamWeaver, colocar o cursor na célula 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 não 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 então construir uma imagem no Fireworks para a zona do footer (1024x68)

A construção da imagem foi explicada no capítulo do Fireworks.

No DreamWeaver, colocar o cursor na célula 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 página web com imagens nesta altura,
porque ainda não estamos a trabalhar com CSS.

Nota: a zona do main poderia ser dividida em várias zonas, com a utilização de uma nova tabela.

Vamos então construir uma imagem para a zona do main (1024x500).

No DreamWeaver, colocar o cursor na célula do main e, menu Insert – image – main01.jpg

AlternateText: imgMain01

Title: main01

no browser…

Formador Carla Coelho 42

 HTML

Num site a estrutura e decoração deve ser igual em todas as páginas. Assim, as zonas do head,
menu e footer devem ser sempre iguais. Apenas muda de página para página a zona do main,
zona de informação.

Porque vamos ter duas páginas, vamos construir uma nova imagem para a zona do main da
futura nova página, chamada main02:

Esta nova imagem apenas vai ser utilizada na página2, quando esta for construída.

Botões:

A zona do menu vai ter dois botões: Home e Imagens. Porque os botões vão ser roolOver, cada
botão precisa de duas imagens (A construção dos botões foi explicada no capítulo do Fireworks).

Cada botão vai ter as dimensões 100x50, logo temos que construir uma nova tabela com 1 linha
e 3 colunas na zona do menu (três colunas, porque precisamos de duas para os botões e de mais
uma para o resto do espaço):

Menu Insert – table

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

Formador Carla Coelho 43

 HTML

Dimensionar cada uma das

células:

100x50
100x50
824x50

Posicionar o cursor na célula

do botão 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 botão

Formador Carla Coelho 44

 HTML

Construir no fireworks uma imagem com as dimensões 824x50, com a cor de fundo #735735,
para por na célula 3 do menu:

Fica assim a página:

Na zona do código, foi

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

Se por algum motivo for

necessário apagar os botões, o
script deve também ser
manualmente apagado.

Quando inserirmos
novamente os botões, o
código é inserido novamente.

No browser:

Quando passamos o rato por cima dos botões,

eles mudam de aspeto.

No IE é preciso permitir a execução de scripts,

numa caixa de diálogo que aparece.

Formador Carla Coelho 45

 HTML

Links:

Selecionar o botão Home e,

nas properties – campo
Link:

Campo Link: apagar o # que

lá está e inserir o nome da
página, no caso:
index12.html

Selecionar o botão Images

e, nas properties – campo
Link:

Campo Link: apagar o # que

lá está e inserir o nome da
página que ainda não
existe, mas vai se chamar
imagens.html

Nesta altura a página index12.html está concluída. Tem toda a estrutura feita, tem botões com
links e zona de informação no main. Guardar o documento.

Todas as outras páginas do site terão uma estrutura, botões e links iguais. Apenas muda a zona
da informação – main.

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

Atenção – o nome do
documento tem que ser
igual ao nome dado no link
do botão.

Todos os nomes dos

documentos html têm que
ser iguais aos nomes dados
nos links dos botões.

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:

Exercício 12

Construa um site com 5 página. Tema flores ou frutos ou árvores.

Esquema de cores – à escolha

Layout – à escolha
Exercício

Formador Carla Coelho 47