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

Limita lista numerada

Limita lista ordenada alfabeticamente

Limita lista ordenada com I, II, III

Nveis da lista

Listas no ordenadas, com bullet

limita a lista

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:

Titulo da pgina

Coluna

Delimita um ficheiro html

Hiperligao

Pargrafo

Linha

Quebra de linha

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

Documents

Manual Exercicios Dreamweaver