Manual Exercicios Dreamweaver

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


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.

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!

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

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.


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


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!


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?


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

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

Manual Exercicios Dreamweaver

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Exercicios Dreamweaver

Uploaded by

Copyright:

Available Formats

Grupo Unicenter Instituto de Formao

You might also like