Você está na página 1de 12

Grupo Unicenter Instituto de Formao

2


Exerccio I- Tags

Quais so as tags HTML para as listas ordenadas e para as listas no ordenadas?
Listas ordenadas

<OL> </OL>
Limita lista numerada

<OL TYPE=A>
Limita lista ordenada alfabeticamente

<OL TYPE=I>
Limita lista ordenada com I, II, III

<LI>
Nveis da lista

Listas no ordenadas, com bullet

<UL> </UL>
limita a lista

<LI>
nveis da lista


Grupo Unicenter Instituto de Formao


3


Exerccio II- A minha primeira pgina
Para comear vamos abrir um novo documento em branco e seleccionar uma nova
pgina HTML.
Como foi abordado nas aulas o Adobe

Dreamweaver

CS3 permite criar diferentes
tipo de pginas, o HTML o formato mais comum na construo de pginas web.


Grave a pgina atravs do meu File > Save As > index.html.
Caso se carregue no link More (assinalo a azul na imagem acima), ou se aceder ao
menu File > New surge um interface mais completo, onde podemos j definir algumas
pr-formataes das pginas em branco.
Grupo Unicenter Instituto de Formao


4


Na coluna do Layout podemos escolher quantas colunas queremos, se queremos
cabealho e roda p, se so fixas ou ajustveis.
Vamos escolher uma pgina de uma coluna fixa, centrada e com cabealho e rodap.
Temos a nossa primeira pgina rapidamente criada!
Grupo Unicenter Instituto de Formao


5


Para edit-la melhor necessrio compreender o cdigo htlm. Os estilos e as css
tambm so muito importantes, j que com elas podemos criar blocos de formao e
elas so essenciais no que diz respeito acessibilidade das pginas web.
Vamos gravar o ficheiro com o nome exercicio1.htlm. mantenha na vista de design e
para editar o texto basta carregar nele e substituir.
Criou uma pgina semelhante seguinte apresentada:

O nmero 1 3 e 4 correspondem a tambm a cabealhos, tags que o html j contm
pr-definidas, o nmero 2 ao cabealho e o n 5 ao rodap da pgina.

Quais so as tags correspondentes ao nmero 1, 3 e 4?

5
4
3
2
1
Grupo Unicenter Instituto de Formao


6


1.2: Faz a correspondncia entre as duas colunas:
<p> </p> Titulo da pgina
</br> Coluna
<tr> </tr> Delimita um ficheiro html
<td> </td> Hiperligao
<Body> </Body> Pargrafo
<title> </title> Linha
<html> </html> Quebra de linha
<A HREF=FICHEIRO.HTML> </A> Corpo da pgina

Inserir imagens
Inserir imagens bastante simples, para tal coloca-se o cursor no sitio onde se quer
colocar a imagem e acede-se ao menu Insert > Image, e escolhe a imagem escolhida.
As imagens devem de ter uma pasta especifica e irem devidamente tratadas e com os
tamanhos correctos para o Dreamweaver, para tal faa uso de uma ferramenta de
tratamento e edio de imagens como por exemplo o Abode Photoshop.

Grupo Unicenter Instituto de Formao


7



Aps escolhermos o ficheiro pretendido surge uma caixa de dialogo na qual podemos
introduzir o Alt da imagem, que surgir quando o rato passar por cima da mesma ou
em caso da imagem n poder ser disponibilizada. Este parmetro muito importante no
que diz respeito a questes de acessibilidade.

Na caixa de propriedades da imagem podemos definir alguns parmetros,
nomeadamente o seu alinhamento, estilo, tamanho, hiperligao, ou redefinir a sua
localizao.

Qual a tag HTML correspondente insero de uma imagem?

Grave novamente o ficheiro.
Criar uma hiperligao
Neste ponto vamos criar uma hiperligao para uma pgina existe na Internet. Para tal
seleccionamos o campo de texto pretendido, e na caixa das propriedades, no campo
link digitamos o url pretendido, ou ento vamos buscar o ficheiro para o qual
queremos criar a ligao. Vamos ento seleccionar a palavra Unicenter no rodap da
pgina e colocar no link o url para a pgina da Unicenter: http://www.unicenter.pt


Grupo Unicenter Instituto de Formao


8



Vamos pr-visualizar a nossa pgina, como ela iria ficar se estivesse
on-line, para tal clicamos no boto de pr-visualizao ou na tecla
F12.
Como foi dito no incio do exerccio, esta pgina tem j formataes
pr-definidas atravs de CSS. Para alterar as mesmas vamos abrir o
painel das CSS, e podemos escolher uma por uma e ditar os
diversos componentes.
So vrios os parmetros que podemos definir atravs das css: a cor
de fundo, do texto, o tipo de letra, alinhamento, tamanho da rea
Para melhor entender este ponto consultar o mdulo das CSS
presente no manual.
Ter em ateno os botes all e current, o primeiro mostra todos os
estilos presentes nas pginas, o segundo diz respeito ao estilo
seleccionado no momento.

Formate vontade a sua pgina, mude a cor de fundo do cabealho
e rodap, coloque o texto com um aspecto que considere agradvel,
vamos puxar pela imaginao!

Grupo Unicenter Instituto de Formao


9


Para inserir uma imagem de fundo basta seleccionar no painel das css a rea qual
quer associar a imagem e adicionar a propriedade background image e escolher a
imagem pretendida. Como se pode analisar na imagem ao lado.
A imagem poder ou no repetir-se, Vamos adicionar uma imagem de fundo ao body,
para tal carregamos na css body e na propriedade background-image vamos buscar a
imagem fundo.gif, na pasta das imagens.
Tambm utilizando este painel, podemos formatar a rea que quisermos, o mesmo
acontece com o tipo de letra e cores, basta seleccionar a rea pretendida e alterar as
propriedades ou adicionar alguma nova propriedade.
Aps configurar alguns parmetros a pgina ficou com o seguinte aspecto.



1.6. O que entende por uma css e enumere algumas vantagens?


Grupo Unicenter Instituto de Formao


10


Exerccio III- Elementos
Este exerccio pretende solidificar os conceitos relativos disposio dos elementos
no ambiente de trabalho. Como foi abordado temos os vrios tipos de vistas code,
design e ambos, acessveis na barra de ferramentas do documento.


2.1. Explique a diferena entre estes tipos de vistas?
2.2. Faa a legenda da imagem?


2.3. Enumere os diferentes separadores existentes na barra insert.

6
1
2



3




4
5
Grupo Unicenter Instituto de Formao


11


2.4. Que cuidados deve de ter na gesto de um site?


2.5. Porque que se diz que o Dreamweaver um programa WYSIWYG?



2.6. Qual funcionalidade da janela Files?









Porto: Rua Nossa Senhora de Ftima, 432
4050 426 Porto

Penafiel: Av. Zeferino de Oliveira, 11
4560 494 Penafiel

Coimbra: Praa da Repblica, 17 2
3000 343 Coimbra

Lisboa: Campo Grande, 82 Lj A-B
1700-094 Lisboa

Faro: Avenida Jlio Carrapato, Lote-B Fraco A
8000 081 Faro


Copyright Joviform Consultoria Empresarial, Lda
Ficha Tcnica:
Autoria e Reviso Tcnica: Corpo Docente Unicenter
Execuo Grfica:
Joviform Consultoria Empresarial, Lda