AGRUPAMENTO
DE
ESCOLAS
DE
PORTO
DE
MÓS




ESCOLA
SECUNDÁRIA
DE
PORTO
DE
MÓS


 Ano
Lectivo
2010/2011





CURSO
PROFISSIONAL
DE
TÉCNICO
DE
MULTIMÉDIA


 TÉCNICAS
DE
MULTIMÉDIA
–
MÓDULO
QUATRO
–
EDIÇÃO
WEB






INTERFACE
DO
MACROMEDIA
DREAMWEAVER
CS5






Introdução

Adobe®
 Dreamweaver®
 CS5
 permite
 que
 designers
 e
 programadores
 criem
 sites
 baseados
 em

padrões
com
confiança.
Crie
visual
ou
directamente
no
código,
desenvolva
páginas
com
sistemas
de

gestão
 de
 conteúdo
 e
 realize
 testes
 de
 compatibilidade
 de
 navegador
 com
 precisão
 graças
 à

integração
com
o
Adobe
BrowserLab,
um
novo
serviço
on‐line
Adobe
CS
Live.



Interface

A
área
de
trabalho
do
Dreamweaver
permite
visualizar
documentos
e
propriedades
de
objeto.
A
área

de
trabalho
também
coloca
muitas
operações
comuns
em
barras
de
ferramentas
para
que
se
possam

fazer
alterações
rapidamente
em
documentos.

O
 Dreamweaver
 tem
 um
 layout
 integrado
 numa
 janela.
 Na
 área
 de
 trabalho
 integrada,
 todos
 os

painéis
e
janelas
são
integrados
numa
única
janela
maior
do
aplicativo.



Visão
geral
dos
elementos
da
área
de
trabalho
|
A
área
de
trabalho




O
 Dreamweaver
 fornece
 muitos
 outros
 painéis,
 inspectores
 e
 janelas.
 Para
 abrir
 os
 painéis,
 os

inspectores
e
as
janelas,
usa‐se
o
menu
Janela.

A
tela
de
boas‐vindas
permite
abrir
um
documento
recente
ou
criar
um
novo
documento.
Na
tela
de

boas‐vindas,
também
se
pode
saber
mais
sobre
o
Dreamweaver,
fazendo
uma
visita
pelo
produto
ou

assistindo
a
um
tutorial.

A
 barra
 de
 aplicativos
 na
 parte
 superior
 da
 janela
 do
 aplicativo
 contém
 o
 alternador
 da
 área
 de

trabalho,
os
menus
(apenas
no
Windows)
e
outros
controles
do
aplicativo.

Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

1

A
 barra
 de
 ferramentas
 de
 documento
 contém
 botões
 que
 fornecem
 opções
 para
 diferentes

visualizações
da
janela
Documento
(como
as
visualizações
de
design
e
de
código),
várias
opções
de

visualização
e
algumas
operações
comuns,
como
a
visualização
num
navegador.

A
barra
de
ferramentas
Padrão
(Não
exibida
no
layout
padrão
da
área
de
trabalho.)
Contém
botões

para
operações
comuns
nos
menus
Arquivo
e
Editar:
Novo,
Abrir,
Navegar
no
Bridge,
Salvar,
Salvar

tudo,
Imprimir
código,
Recortar,
Copiar,
Colar,
Desfazer
e
Refazer.


Para
exibir
a
barra
de
ferramentas
Padrão,
seleciona
Exibir
>
Barras
de
ferramentas
>
Padrão.

A
 barra
 de
 ferramentas
 de
 codificação
 (exibida
 apenas
 na
 Visualização
 de
 código)
 contém
 botões

que
permitem
executar
muitas
operações
padrão
de
codificação.

A
barra
de
ferramentas
Processamento
do
estilo
(Oculta
por
padrão)
contém
botões
que
permitem

ver
 qual
 será
 a
 aparência
 do
 projecto
 em
 tipos
 de
 média
 diferentes
 se
 se
 usarem
 folhas
 de
 estilos

dependentes
 de
 média.
 Também
 contém
 um
 botão
 que
 permite
 activar
 ou
 desactivar
 a
 Folha
 de

estilos
em
cascata
(CSS).

A
janela
do
documento
exibe
o
documento
actual
à
medida
que
é
criado
e
editado.

O
Inspector
de
propriedades
permite
visualizar
e
alterar
diversas
propriedades
do
objecto
ou
texto

selecionado.
 Cada
 objecto
 tem
 propriedades
 diferentes.
 O
 Inspector
 de
 propriedades
 não
 é

expandido
por
padrão
no
layout
Codificador
da
área
de
trabalho.

O
 selector
 de
 tags
 localizado
 na
 barra
 de
 status,
 na
 parte
 inferior
 da
 janela
 Documento.
 Mostra
 a

hierarquia
 de
 tags
 em
 torno
 da
 selecção
 actual.
 Clicando
 em
 qualquer
 tag
 da
 hierarquia
 para

selecionar
a
tag
e
todo
o
seu
conteúdo.

Painéis
|
Apresentados
do
lado
direito
da
Área
de
Trabalho

Servem
 para
 ajudar
 a
 monitorizar
 e
 modificar
 o
 trabalho.
 Os
 exemplos
 incluem
 o
 painel
 Inserir,
 o

painel
 Estilos
 de
 CSS
 e
 o
 painel
 Arquivos.
 Para
 expandir
 um
 painel,
 clicasse
 duas
 vezes
 na
 aba

correspondente.

O
painel
Inserir
contém
botões
para
inserir
vários
tipos
de
objectos
num
documento,
como
imagens,

tabelas
e
elementos
de
média.
Cada
objecto
é
uma
parte
do
código
HTML
que
permite
definir
vários

atributos
 à
 medida
 que
 são
 inseridos.
 Por
 exemplo,
 pode‐se
 inserir
 uma
 tabela
 clicando
 no
 botão

Tabela
 do
 painel
 Inserir.
 Ou
 podem‐se
 inserir
 objectos
 usando
 o
 menu
 Inserir
 em
 vez
 do
 painel

Inserir.

O
 painel
 Arquivos
 Permite
 gerenciar
 arquivos
 e
 pastas,
 que
 podem
 fazer
 parte
 de
 um
 site
 do

Dreamweaver
ou
estar
num
servidor
remoto.
O
painel
Arquivos
também
permite
aceder
a
todos
os

arquivos
do
disco
local,
assim
como
do
Windows
Explorer
(Windows).

O
painel
Estilos
CSS
Permite
rastrear
as
regras
e
propriedades
CSS
que
afectam
o
elemento
de
página

selecionado
 actualmente
 (modo
 Actual)
 ou
 as
 regras
 e
 propriedades
 que
 afectam
 o
 documento

inteiro
(modo
Tudo).









Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

2

Interface
|
Nota
de
Boas‐vindas










Este
 é
 o
 primeiro
 quadro
 que
 surge
 quando
 o
 programa
 é
 aberto.
 Neste
 quadro
 pode
 ser

seleccionado
Abrir
(Open)
ou
Novo
(New),
visualizar
Vídeos
explicativos
e
ainda
assistir
a
Tutoriais.


Após
 seleccionado
 o
 tipo
 de
 documento
 a
 abrir
 ou
 criar
 surge
 um
 documento
 no
 programa.
 Por

defeito
 o
 programa
 abre
 com
 a
 opção
 de
 Layout
 Designer
 (posteriormente
 podes
 personalizar
 o

aspecto
do
programa
de
acordo
com
a
tua
metodologia
de
trabalho).







Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

3

Visão
geral
do
layout
da
área
de
trabalho
|
Inclui
diferentes
formas
de
trabalhar


Code
(Código)
|
Visualização
de
código



Um
 ambiente
 de
 codificação
 manual
 para
 gravação
 e
 edição
 de
 código
 HTML,
 JavaScript,
 de

linguagem
 de
 servidor
 (como
 linguagem
 PHP
 ou
 linguagem
 de
 markup
 do
 ColdFusion
 (CFML))
 e

qualquer
outro
tipo
de
código.


Split
(Dividido)
|
Visualização
Dividir
código



Uma
 versão
 dividida
 da
 Visualização
 de
 código
 que
 possibilita
 rolar
 pelo
 trabalho
 em
 diferentes

seções
do
documento
ao
mesmo
tempo.







Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

4

Design
|
Visualização
de
design



Um
ambiente
de
design
para
o
layout
visual
da
página,
a
edição
visual
e
o
desenvolvimento
rápido
do

aplicativo.
 Nessa
 visualização,
 o
 Dreamweaver
 exibe
 uma
 representação
 visual
 completamente

editável
do
documento,
semelhante
à
visualização
da
página
em
um
navegador.







Visualização
de
código
e
de
design



Permite
ver
as
visualizações
de
código
e
de
design
para
o
mesmo
documento
numa
única
janela.


Visualização
dinâmica



De
 modo
 semelhante
 à
 Visualização
 de
 design,
 a
 Visualização
 dinâmica
 exibe
 uma
 representação

realista
 de
 como
 o
 documento
 será
 exibido
 num
 navegador,
 e
 permite
 que
 se
 interaja
 com
 o

documento
exatamente

como
se
faria
num
navegador.
A
Visualização
dinâmica
não
é
editável.
No

entanto,
pode‐se
editar
na
Visualização
de
código
e
actualizar
a
Visualização
dinâmica
para
exibir
as

alterações.


Visualização
dinâmica
de
código



Disponível
 apenas
 durante
 a
 exibição
 de
 documento
 na
 Visualização
 dinâmica.
 A
 Visualização

dinâmica
de
código
exibe
o
código
real
que
o
navegador
usa
para
executar
a
página,
e
pode
alterar

dinamicamente
a
maneira
como
se
interage
com
a
página
na
Visualização
dinâmica.
A
Visualização

dinâmica
de
código
não
é
editável.


Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

5

Menus

C


 A
 B
 E
 F

D



 G
 H
 I


A.
Barra
de
aplicativos

 B.
Barra
de
ferramentas
de
documento

 C.
Janela
do
documento



D.
Alternador
da
área
de
trabalho

 E.
Grupos
de
painéis




 F.
CS
Live

 

G.
Selector
de
tags

 
 H.
Inspector
de
propriedades

 I.
Painel
Arquivos



Processamento
do
estilo
|
Visão
geral
da
barra
de
ferramentas




A
barra
de
ferramentas
Processamento
do
estilo
(oculta
por
padrão)
contém
botões
que
permitem

ver
 qual
 seria
 a
 aparência
 do
 projecto
 em
 tipos
 de
 média
 diferentes
 se
 se
 usarem
 folhas
 de
 estilo

dependentes
de
média.
Contém
um
botão
que
permite
activar
ou
desactivar
estilos
CSS.
Para
exibir
a

barra
de
ferramentas,
seleciona
Exibir
‐>
Barras
de
ferramentas
‐>
Processamento
do
estilo.
A
barra

de
ferramentas
funciona
apenas
se
os
documentos
usarem
folhas
de
estilo
dependentes
de
média.

Por
padrão,
o
Dreamweaver
exibe
o
projecto
para
o
tipo
de
média
de
tela
(que
mostra
como
uma

página
é
processada
numa
tela
de
computador).
Podem‐se
visualizar
os
seguintes
processamentos
de

média
clicando
nos
botões
correspondentes
da
barra
de
ferramentas
Processamento
do
estilo.


Processar
tipo
de
mídia
de
tela

|
Mostra
como
a
página
aparece
numa
tela
de
computador.

Processar
tipo
de
mídia
print

|
Mostra
como
a
página
aparece
numa
folha
de
papel
impresso.

Processar
tipo
de
mídia
handheld
|
Mostra
como
a
página
aparece
em
um
dispositivo
handheld,
como
um
telemóvel.

Processar
tipo
de
mídia
projection
|
Mostra
como
a
página
aparece
em
um
dispositivo
de
projecção.

Processar
tipo
de
mídia
TTY
|
Mostra
como
a
página
aparece
num
dispositivo
de
telétipo.

Processar
tipo
de
mídia
TV
|
Mostra
como
a
página
aparece
num
ecrã
de
televisão.

Alternar
exibição
de
estilos
CSS
|
Permite
activar
ou
desactivar
estilos
CSS.


Folhas
de
estilos
em
tempo
de
design
|
Permite
que
se
especifique
uma
folha
de
estilos.




Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

6

Navegação
do
Navegador
|
Visão
geral
da
barra
de
ferramentas


A
barra
de
ferramentas
de
navegação
no
navegador
torna‐se
activa
na
visualização
Activa
e
mostra
o

endereço
da
página
que
se
está
a
visualizar
na
janela
Documento.
A
partir
do
Dreamweaver
CS5,
a

visualização
 Activa
 age
 como
 um
 navegador
 regular,
 portanto,
 mesmo
 se
 se
 navegar
 para
 um
 site

fora
 do
 site
 local
 (por
 exemplo,
 http://www.adobe.com),
 o
 Dreamweaver
 carregará
 a
 página
 na

janela
Documento.




 A
 B
 C


A.
Controles
do
navegador
B.
Caixa
de
endereço
C.
Opções
de
visualização
dinâmica


Por
padrão,
os
links
não
são
activos
na
Visualização
activa.
Ter
links
não
ativos
permite
selecionar
ou

clicar
no
texto
do
link
na
janela
Documento
sem
ser
levado
para
outra
página.


Codificação
|
Visão
geral
da
barra
de
ferramentas


A
Barra
de
ferramentas
de
codificação
contém
botões
que
permitem
realizar
muitas
operações

padrão
de
codificação,
como
a
redução
e
a
expansão
de
selecções
de
código,
o
realce
do
código

inválido,
a
aplicação
e
a
remoção
de
comentários,
o
recuo
do
código
e
a
inserção
de
snippets
de

código
 usados
 recentemente.
 A
 barra
 de
 ferramentas
 Codificação
 aparece
 verticalmente
 no

lado
 esquerdo
 da
 janela
 Documento
 e
 é
 visível
 somente
 quando
 a
 Visualização
 de
 código
 é

exibida.


Não
se
pode
desencaixar
ou
mover
a
barra
de
ferramentas
Codificação,
mas
é
possível
ocultá‐la

(Exibir
>
Barras
de
ferramentas
>
Codificação).


Também
se
pode
editar
a
Barra
de
ferramentas
de
codificação
para
exibir
mais
botões
(como

Quebra
 automática
 de
 palavra,
 Mostrar
 caracteres
 ocultos
 e
 Recuar
 automaticamente)
 ou

ocultar
botões
que
não
deseja
usar.
No
entanto,
para
fazer
isso,
deve‐se
evitar
o
arquivo
XML

que
gera
a
barra
de
ferramentas.




Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

7




Barra
de
status

|
Visão
geral


A
 barra
 de
 status,
 na
 parte
 inferior
 da
 janela
 Documento,
 fornece
 informações
 adicionais
 sobre
 o

documento
que
está
sendo
criado.




C
 E
 G


A
 
 B
 D
 F
 H



A.
Selector
de
tags

 B.
Ferramenta
Selecionar

 
 C.
Ferramenta
Mão

 

D.
Ferramenta
Zoom

 E.
Definir
ampliação

 F.
Menu
(pop‐up)
Tamanho
da
janela

 

G.
Tamanho
do
documento
e
tempo
de
download
estimado

 
 H.
Indicador
de
codificação



Selector
 de
 tags
 |
 Mostra
 a
 hierarquia
 de
 tags
 em
 torno
 da
 selecção
 atual.
 Clicando
 em
 qualquer
 tag
 da
 hierarquia

selecciona‐se
a
tag
e
todo
o
seu
conteúdo.
Clica‐se
em
<body>
para
selecionar
o
corpo
inteiro
do
documento.
Para
definir

os
atributos
class
ou
ID
de
uma
tag
no
selector
de
tags,
clica‐se
com
o
botão
direito
do
rato
(Windows)
na
tag
e
seleciona‐
se
uma
classe
ou
ID
no
menu
de
contexto.

Ferramenta
Seleccionar
|
Activa
e
desactiva
a
ferramenta
Mão.

Ferramenta
Mão
|
Permite
clicar
no
documento
e
arrastá‐lo
na
janela
Documento.

Ferramenta
Zoom
e
menu
Definir
ampliação
|
Permite
definir
um
nível
de
ampliação
para
o
documento.

Menu
 Tamanho
 da
 janela
 (Não
 disponível
 na
 Visualização
 de
 código.)
 |
 
 Permite
 redimensionar
 a
 janela
 Documento

para
dimensões
predefinidas
ou
personalizadas.

Tamanho
do
documento
e
tempo
de
download
|
Mostra
o
tamanho
aproximado
do
documento
e
o
tempo
de
download

estimado
da
página,
incluindo
todos
os
arquivos
dependentes,
como
imagens
e
outros
arquivos
de
média.

Indicador
de
codificação
|
Mostra
a
codificação
de
texto
do
documento
actual.




Inspector
de
propriedades
|
Visão
Geral


O
Inspector
de
propriedades
permite
examinar
e
editar
as
propriedades
mais
comuns
do
elemento

de
página
seleccionado
actualmente,
como
texto
ou
um
objecto
inserido.
O
conteúdo
do
Inspetor
de

propriedades
 varia
 de
 acordo
 com
 o
 elemento
 seleccionado.
 Por
 exemplo,
 se
 se
 seleccionar
 uma

imagem
 da
 página,
 o
 Inspector
 de
 propriedades
 mudará
 para
 mostrar
 as
 propriedades
 da
 imagem

(como
 o
 caminho
 do
 arquivo
 até
 a
 imagem,
 a
 largura
 e
 a
 altura
 da
 imagem,
 a
 borda
 em
 torno
 da

imagem,
se
houver,
e
assim
por
diante).







Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

8




Estilos
CSS
|
Visão
geral


O
painel
Estilos
CSS
permite
rastrear
as
regras
e
propriedades
CSS

que
 afectam
 o
 elemento
 de
 página
 seleccionado
 actualmente

(modo
 Actual)
 ou
 as
 regras
 e
 propriedades
 que
 afectam
 o

documento
 inteiro
 (modo
 Tudo).
 Um
 botão
 de
 alternância
 na

parte
superior
do
painel
Estilos
CSS
permite
alternar
entre
os
dois

modos.
 O
 painel
 Estilos
 CSS
 também
 permite
 modificar

propriedades
CSS
no
modo
Tudo
e
no
modo
Actual.


No
 modo
 Actual,
 o
 painel
 Estilos
 CSS
 exibe
 três
 painéis:
 o
 painel

Resumo
para
selecção
que
exibe
as
propriedades
CSS
da
selecção

actual
 do
 documento,
 o
 painel
 Regras
 que
 exibe
 o
 local
 das

propriedades
 seleccionadas
 (ou
 regras
 em
 cascata
 para
 a
 tag

seleccionada,
 dependendo
 da
 selecção)
 e
 o
 painel
 Propriedades

que
 permite
 editar
 propriedades
 CSS
 para
 a
 regra
 que
 define
 a

selecção.


No
 modo
 Tudo,
 o
 painel
 Estilos
 CSS
 exibe
 dois
 painéis:
 o
 painel

Todas
 as
 regras
 (na
 parte
 superior)
 e
 o
 painel
 Propriedades
 (na

parte
inferior).
O
painel
Todas
as
regras
exibe
uma
lista
de
regras

definidas
no
documento
actual,
bem
como
as
regras
definidas
nas

folhas
de
estilo
anexadas
ao
documento
actual.
O
painel
Propriedades
permite
editar
propriedades

CSS
para
todas
as
regras
seleccionadas
no
painel
Todas
as
regras.
Qualquer
alteração
efectuada
no

painel
Propriedades
é
aplicada
imediatamente,
permitindo
que
se
visualize
enquanto
se
trabalha.


Arquivos
|
Visão
geral


Ao
visualizar
sites,
arquivos
ou
pastas
no
painel
Arquivos,
pode‐se

alterar
o
tamanho
da
área
de
visualização
e
expandir
ou
reduzir
o

painel
Arquivos.
Quando
está
reduzido,
o
painel
Arquivos
exibe
o

conteúdo
 do
 site
 local,
 o
 site
 remoto,
 o
 servidor
 de
 teste
 ou
 o

repositório
SVN
como
uma
lista
de
arquivos.
Quando
expandido,

exibe
 o
 site
 local
 e
 o
 site
 remoto,
 o
 servidor
 de
 teste
 ou
 o

repositório
SVN.


Para
 os
 sites
 do
 Dreamweaver,
 pode‐se
 personalizar
 o
 painel


Arquivos
 alterando
 a
 visualização
 (site
 local
 ou
 remoto)
 que

aparece
por
padrão
no
painel
reduzido.


Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

9




Guias
visuais
|
Visão
geral


O
Dreamweaver
fornece
vários
tipos
de
guias
visuais
para
ajudar
a
projectar
documentos
e
a
prever

sua
aparência
nos
navegadores,
pode‐se
executar
qualquer
um
dos
seguintes
procedimentos:


•
Encaixar
instantaneamente
a
janela
Documento
no
tamanho
de
janela
desejado
para
ver
como
os

elementos
se
ajustam
na
página.


•
Usar
uma
imagem
como
fundo
da
página
para
ajudar
a
duplicar
um
projecto
criado
num
programa

de
ilustração
ou
edição
de
imagens.


•
 Usar
 réguas
 e
 guias
 para
 fornecer
 uma
 pista
 visual
 do
 posicionamento
 preciso
 e
 do

redimensionamento
dos
elementos
de
página.


•
Usar
a
grade
para
posicionar
com
precisão
e
redimensionar
os
elementos
absolutamente.


As
guias
e
grade
podem
ser
activadas
a
partir
do
menu
Visualizar.



Existe
 muito
 mais
 a
 explorar
 no
 Dreamweaver
 CS5,
 que
 dependerá
 em
 muito
 da
 vontade
 de

experimentar.


Sempre
que
necessário
serão
realizados
e
entregues
manuais
específicos
sobre
as
funcionalidades
e

modos
de
trabalhar
no
programa.


Este
Manual
de
Ferramentas
foi
criado
com
o
objectivo

de
 introduzir
 as
 diferentes
 Ferramentas
 e

Funcionalidades
 do
 Programa
 mas
 também
 facilitar
 a

compreensão
das
funções
de
cada
uma
delas.

É
material
obrigatório
para
todas
as
aulas
minimizando

o
tempo
de
procura
de
ferramentas,
do
seu
significado
e

das
suas
funções.




Bom
trabalho!

As
Professoras,


Aline
Mendes
e
Cláudia
Casaleiro


Técnicas
de
Multimédia
–
Módulo
4:
Edição
Web
‐
Adobe
Dreamweaver
CS5

10