7 Como Adicionar Conteudo

Como adicionar conteúdo Página 1 de 113
Como adicionar conteúdo
Beneficie-se das ferramentas visuais do Dreamweaver para adicionar uma variedade de

conteúdo às páginas da Web. Com elas você pode adicionar e formatar elementos como texto,
imagens, cores, filmes, som e outras formas de m ídia. Você pode tornar o conteúdo de suas
páginas acessível a visitantes com deficiência f ísica.
Esta seção contém os seguintes capítulos:
l Como inserir e formatar texto

l Como inserir imagens
l Integração do Dreamweaver com outros aplicativos
l Como inserir m ídia
l Dreamweaver e Acessibilidade
Como inserir e formatar texto
O Macromedia Dreamweaver MX oferece diversas formas de adicionar e formatar texto em um

documento. Este capítulo descreve como inserir texto, definir tipo de fonte, tamanho, cor e
atributos de alinhamento, além de como criar e aplicar seus próprios estilos personalizados
usando estilos HTML e CSS (Folhas de estilos em cascata, Cascading Style Sheet).
Este capítulo aborda os tópicos a seguir:
l Como inserir e formatar texto HTML

l Formatação do texto
l Utilização dos estilos HTML para formatar o texto
l Sobre CSSs (Cascading Style Sheets)
l Conversão de estilos CSS em tags de HTML
l Busca e substituição de texto
l Referência
Como inserir e formatar texto HTML
A formatação no Dreamweaver é semelhante à utilização de um processador de texto padrão.

No inspetor de propriedades, utilizar o submenu Texto > Formato do parágrafo ou o menu pop-
up Formato para definir o estilo de formatação padrão (Parágrafo, Pré-formatado, Cabeçalho 1,
Cabeçalho 2, etc.) para um bloco de texto. Para alterar a fonte, o tamanho, a cor e o
alinhamento do texto selecionado, use o menu Texto ou o inspetor de propriedades. Para
aplicar formatação de texto como negrito, itálico, c ódigo, sublinhado, etc., utilizar o submenu
file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Texto > Estilo.
É possível também combinar várias tags HTML padrão para formar um único estilo, denominado
estilo HTML. Por exemplo: é possível aplicar a formatação HTML manualmente utilizando uma
combinação de tags e atributos e salvar essa formatação como um estilo HTML; isso é salvo no
painel Estilos HTML. Sempre que o usuário desejar formatar texto utilizando essa combinação
de tags HTML, basta selecionar o estilo salvo no painel Estilos HTML. Os estilos HTML contam
com suporte de quase todos os navegadores da Web e economizam tempo em rela ção à
formatação manual de texto.
Outro tipo de estilo, denominado folhas de estilos em cascata (Cascading Style Sheets – CSS),
permite formatar as páginas e o texto, com a vantagem da atualização automática. Os estilos
CSS podem ser armazenados diretamente no documento ou, para se obter mais capacidade e
flexibilidade, em uma folha de estilos externa. Se uma folha de estilos externa for anexada a
várias páginas da Web, todas as p áginas refletirão automaticamente quaisquer alterações feitas
na folha de estilos. Para acessar estilos CSS, utilizar o painel Estilos CSS ou o modo CSS do
inspetor de propriedades do texto. Para obter mais informações sobre a utilização do inspetor
de propriedades do texto para aplicar estilos HTML ou CSS, veja Opções de propriedades
Definição do texto.
A formatação HTML manual e os estilos HTML aplicam a formatação usando as tags HTML
padrão (tais como b, i, font e code) que contam com suporte de todos os navegadores da Web
conhecidos. Os estilos CSS definem a formatação para o texto inteiro em uma determinada
classe ou redefinem a formatação para uma tag HTML específica (como h1, h2, p ou li). Os
estilos CSS contam com suporte apenas dos navegadores da Web Netscape Navigator 4.0 e
Microsoft Internet Explorer 4.0, e de suas versões mais avan çadas.
Em uma mesma página, podem ser utilizados os estilos CSS e HTML, bem como a formatação
HTML manual. A formatação é aplicada de uma forma hierárquica, a formatação HTML manual
anula a formatação aplicada por um estilo HTML ou CSS, e estilos CSS incorporados em um
documento anulam estilos CSS externos. Veja Sobre CSSs (Cascading Style Sheets).
Adiçã o de texto a um documento
Há várias formas de adicionar texto a um documento do Dreamweaver. É possível digitar texto

diretamente na janela do documento do Dreamweaver ou recortar e colar ou importar texto de
outros documentos.
Para adicionar texto a um documento, seguir um dos procedimentos abaixo:
l Digite o texto diretamente na janela do documento.

l Copie o texto de outro aplicativo, alternar para o Dreamweaver, posicionar o ponto de
inser ção na visualização do projeto da janela do documento e escolher Editar > Colar. O
Dreamweaver não manterá a formatação de texto que foi aplicada no outro programa,
mas preservará as quebras de linha.
Como importar texto de outros documentos
É possível importar dados tabulares para um documento através da salva inicial dos arquivos
(tais como arquivos do Microsoft Excel ou de um banco de dados) como arquivos de texto
delimitados. Para obter informações adicionais sobre como importar e formatar dados de tabela,
veja Como importar dados tabulares no Como inserir e formatar texto.
Também é possível importar texto de documentos HTML do Microsoft Word. Para obter
informações sobre como importar documentos HTML do Word, veja Como abrir documentos
existentes.
Para importar dados tabulares:
1. Escolha Arquivo > Importar > Importar os dados tabulares ou selecione Inserir > Dados
tabulares.
A caixa de diálogo Importar os dados da tabela é exibida.
Procure o arquivo desejado ou digite o seu nome na caixa de texto.
2. Selecione o delimitador utilizado quando o arquivo foi salvo como texto delimitado. As
opções dispon íveis são Tabulação, Vírgula, Ponto-e-vírgula, Dois pontos e Outro.
Se for selecionado Outro, aparecerá um campo em branco ao lado da opção. Digite o

caractere que foi utilizado como um delimitador.
3. Utilize as demais opções para formatar ou definir a tabela para a qual os dados
serão importados.
4. Clique em OK quando terminar.
Adiçã o de espaço entre caracteres
O HTML s ó permite um espaço entre caracteres. Para adicionar espaço adicional em um

documento, é necessário inserir um espaço não-separável.
É possível definir uma prefer ência para adicionar automaticamente espaços não-separáveis em
um documento. Para definir esta preferência, escolha Editar > Preferências e, na categoria
Geral, certificar-se de que Permitir múltiplos espaços consecutivos esteja marcada.
Para inserir um espaço não-separável, seguir um dos procedimentos abaixo:
l Na barra Inserir, selecione Caractere e, em seguida, clique no ícone Inserir espaço não-
separável.
l Escolha Inserir > Caracteres especiais > Espaço não-separável.
l Pressione Control+Shift+Barra de espaço.
Adiçã o de espaços entre parágrafos
O Dreamweaver funciona de forma semelhante a vários aplicativos de processamento de texto:

o usuário pressiona Enter para criar um novo parágrafo. Navegadores da Web inserem
automaticamente um espaço de linha em branco entre os parágrafos. É possível adicionar um
espaço de uma única linha entre parágrafos inserindo uma quebra de linha.
Para adicionar um retorno de parágrafo:
l Pressione a tecla Enter.
Para adicionar uma quebra de linha, seguir um dos procedimentos abaixo:
l Pressione Shift+Enter.
l Na barra Inserir, selecione Caractere e, em seguida, clique no ícone Quebra de linha.
l Escolha Inserir > Caracteres especiais > Quebra de linha.
Formataçã o do texto
Pode-se aplicar formatação de texto HTML a uma letra ou criar um site inteiro, utilizando os
comandos Texto > Formato do parágrafo ou as opçõ es no inspetor de propriedades. Esse tipo
de formatação manual substitui ou anula a formatação definida por um estilo HTML ou CSS.
Para aplicar a formatação de texto HTML, utilizar o inspetor de propriedades e os comandos no

menu Texto. Por exemplo: Texto > Formato do parágrafo, e Texto > Estilo.
Tópicos relacionados
Utilização dos estilos HTML para formatar o texto
Cria ção de um estilo HTML
Cria ção de um novo estilo CSS
Definiçã o e alteraçã o de fontes e estilos
Utilize opções do inspetor de propriedades ou do menu Texto para definir ou alterar

características da fonte de um texto selecionado. É possível definir o tipo de fonte, o estilo
(como negrito ou itálico) e o tamanho.
Quando é utilizado o inspetor de propriedades para aplicar o estilo negrito ou itálico, o
Dreamweaver aplica a tag ou , respectivamente, de modo automático. Se

estiverem sendo criadas páginas para visitantes que possuem navegadores vers ão 3.0 ou mais
antigas, alterar essa preferência na categoria Geral da caixa de diálogo Preferências (Editar >
Preferências).
Os tamanhos de fontes HTML são pontos de tamanho relativo e não específico. Os usuários
definem o tamanho do ponto da fonte padrão para os seus navegadores; esse tamanho de fonte
será visto quando for selecionado Padrão ou 3, no inspetor de propriedades ou no submenu
Texto > Tamanho. Os tamanhos 1 e 2 aparecerão menores do que o tamanho padrão de fonte;
os tamanhos 4 a 7 aparecerão maiores. Além disso, as fontes costumam parecer maiores no
Windows do que no Macintosh, apesar de o Internet Explorer 5 no Macintosh utilizar o mesmo
tamanho de fonte padrão que o Windows.
Dica: Um modo de garantir a consistência com o tamanho da fonte é utilizar os estilos CSS com
o tamanho da sua fonte definido em pixels. Para obter mais informaçõ es sobre as CSS, veja
Sobre CSSs (Cascading Style Sheets).
Tópico relacionado
Modificação de combinações de fontes
Para definir ou alterar características da fonte:
1. Selecione o texto. Se nenhum texto for selecionado, a alteração será aplicada ao texto
subseqüente que for digitado.
2. Escolha uma das seguintes opções:
¡ Para alterar a fonte, escolha uma combinação de fontes no inspetor de propriedades
ou no submenu Texto > Fonte.
Escolha Padrão para remover as fontes aplicadas anteriormente. A opção Padrão

aplica a fonte padrão ao texto selecionado (a fonte padr ão do navegador ou aquela
designada para essa tag na folha de estilos CSS).
¡ Para alterar o estilo da fonte, clique em Negrito ou Itálico, no inspetor de

propriedades, ou escolher um estilo de fonte (negrito, itálico, sublinhado, etc.) no
submenu Texto > Estilo.
¡ Para alterar o tamanho da fonte, escolha um tamanho (1 a 7), no inspetor de
propriedades ou no submenu Texto > Tamanho.
¡ Para aumentar ou diminuir o tamanho do texto selecionado, escolha um tamanho
relativo (+1 a + 4 ou –1 a –3) no inspetor de propriedades ou no submenu Texto >
Alterar o tamanho.
Nota: Esses n úmeros indicam uma diferença relativa do tamanho da fonte básica. O
valor da fonte básica padr ão é 3. Então, um valor +4 resulta em um tamanho de
fonte de 3 + 4 ou 7. O total máximo dos valores de tamanho de fonte é 7. Se
tentar-se definir um valor superior, ele será exibido como 7. O Dreamweaver não
exibe a tag basefont (que aparece na seção head), embora o tamanho da fonte
deva ser exibido corretamente em um navegador. Para testar esse procedimento,
compare textos definidos para 3 e +3.
Modificação de combina ções de fontes
Utilize o comando Editar a lista de fontes para definir as combinações de fontes que aparecem
no inspetor de propriedades e no submenu Texto > Fonte.
As combinações de fontes determinam como um navegador exibe o texto na sua página da

Web. O navegador utiliza a primeira fonte na combinação que estiver instalada no sistema do
usuário; se nenhuma das fontes na combinação estiver instalada, ele exibirá o texto conforme a
especificação das preferências do navegador do usuário.
Para modificar as combina ções de fontes:
1. Escolha Texto > Fonte > Editar a lista de fontes.

2. Selecione a combinação de fontes na lista situada no alto da caixa de di álogo.
As fontes na combinação selecionada estão relacionadas na lista Fontes escolhidas, no

canto inferior esquerdo da caixa de diálogo. À direita, há uma lista com todas as fontes
disponíveis, instaladas no seu sistema.

¡ Para adicionar ou remover fontes de uma combinação de fontes, clique no botão de
seta (<< ou >>) entre as listas Fontes escolhidas e Fontes disponíveis.
¡ Para adicionar ou remover uma combinação de fontes, clique nos botões com sinal
de adição (+) e de subtra ção (–), no alto da caixa de di álogo.
¡ Para adicionar uma fonte não instalada no sistema, digite o nome da fonte
no campo de texto abaixo da lista Fontes disponíveis e clique no botão << para
adicioná-la na combinação. A adição de uma fonte não instalada no sistema é útil,
por exemplo, para designar uma fonte específica do Windows quando o usuário está
desenvolvendo páginas em um Macintosh.
¡ Para mover a combinação de fontes para cima ou para baixo na lista, clique nos
botões de seta, na parte superior da caixa de di álogo.
Para adicionar uma nova combina çã o a uma lista de fontes:
1. Escolha Texto > Fonte > Editar a lista de fontes.

2. Selecione uma fonte na lista Fontes disponíveis e clique no botão << para mover a fonte
para a lista Fontes escolhidas.
3. Repita a etapa 2 para cada fonte subseqüente na combinação.
Para adicionar uma fonte não instalada no sistema, digite o nome da fonte no campo de
texto abaixo da lista Fontes disponíveis e clique no botão << para adicioná-la na
combinação de fontes. A adi ção de uma fonte n ão instalada no sistema é útil, por
exemplo: para designar uma fonte específica do Windows quando o usuário está
desenvolvendo páginas em um Macintosh.
4. Ao terminar a seleção das fontes específicas, selecione uma família de fontes gen érica no
menu Fontes disponíveis e clique no botão <<, para mover a família genérica para a lista
Fontes escolhidas.
As famílias de fontes genéricas incluem cursivas, fantasia, monoespaçadas, sans-serif e

serif. Se nenhuma das fontes na lista Fontes escolhidas estiver disponível no sistema do
usuário, o texto aparecerá na fonte padr ão associada à família de fontes genérica. Por
exemplo: a fonte monoespaçada padrão na maioria dos sistemas é Courier.
Formataçã o de parágrafos
Utilize o menu pop-up Formato, no inspetor de propriedades, ou o submenu Texto > Formato
do parágrafo para aplicar as tags de cabeçalho e parágrafo padrão.
Quando uma tag de cabeçalho é aplicada a um parágrafo, o Dreamweaver adiciona

automaticamente a pr óxima linha de texto como um parágrafo padrão. Para alterar esta
definição, escolha Editar > Preferências e, em seguida, na categoria Geral, em Opções de
edição, certificar-se de que a opção Alternar para o parágrafo simples depois do cabeçalho
esteja desmarcada.
Opções de propriedades Definição do texto
Definição de propriedades do tipo CSS
Para aplicar uma tag de cabeçalho ou parágrafo:
1. Coloque o ponto de inserção no parágrafo ou selecionar uma parte do texto no parágrafo.

2. No submenu Texto > Formato do parágrafo ou no menu pop-up Formato, no inspetor de
propriedades, escolha uma opção:
¡ Selecione um formato de parágrafo (por exemplo: Cabeçalho 1, Cabeçalho 2, Texto
pré-formatado, etc.). A tag HTML associada ao estilo selecionado (por exemplo: h1
para Cabeçalho 1, h2 para Cabeçalho 2, pre para Texto pré-formatado, etc.) será
aplicada ao parágrafo inteiro.
¡ Escolha Nenhum, para remover um formato de parágrafo.
Alinhamento de texto
Alinhar o texto na página usando o inspetor de propriedades ou o submenu Texto > Alinhar. É
possível centralizar qualquer elemento em uma página utilizando o comando Texto > Alinhar >
No centro.
Para alinhar o texto:
1. Selecione o texto a ser alinhado ou simplesmente inserir o indicador no início do texto.

2. Clique em uma opção de alinhamento (À esquerda, À direita, No centro), no inspetor de
propriedades, ou escolha Texto > Alinhar e selecionar um comando de alinhamento.
Para centralizar os elementos:
1. Selecione o elemento (imagem, plug-in, tabela ou um outro elemento da página) a

ser centralizado.
2. Escolha Texto > Alinhar > No centro.
Nota: É possível alinhar e centralizar blocos inteiros de texto; é imposs ível alinhar ou
centralizar parte de um cabeçalho ou de um parágrafo.
Recuo de texto
O uso do comando Recuo aplica a tag de HTML blockquote a um parágrafo de texto, recuando
o texto nos dois lados da página.
Para recuar o texto e remover o recuo:
1. Coloque o ponto de inserção no parágrafo a ser recuado.

2. Clique no botão Recuo ou Remover o recuo, no inspetor de propriedades, escolha
Texto >Recuo ou Remover o recuo ou selecionar Lista > Recuo ou Remover o recuo no
menu contextual.
Nota: É possível aplicar vários recuos a um parágrafo. Cada vez que este comando é escolhido,
o texto recua mais nos dois lados do documento.
Alteraçã o da cor do texto
É possível alterar a cor do texto selecionado, para que a nova cor anule a cor do texto definida
em Propriedades da página (se nenhuma cor tiver sido definida em Propriedades da página, a
cor de texto padrão será preto).
Para alterar a cor do texto:
1. Selecione o texto.
¡ Escolha uma cor na paleta de cores aceitas pelo navegador clicando no seletor de
cores, no inspetor de propriedades.
¡ Escolha Texto > Cor. A caixa de diálogo Seletor de cores do sistema é exibida.
Selecione uma cor e clique em OK.
¡ Digite o nome da cor ou um número hexadecimal diretamente no campo do inspetor
de propriedades.
¡ Para definir a cor padrão do texto, utilizar o comando Modificar > Propriedades da
página. Veja Definição das cores padr ão do texto.
Para retornar o texto à cor padrão:
1. No inspetor de propriedades, clique na caixa de cores para abrir a paleta de cores aceitas
pela -Web.
2. Clique no botão Riscado (o botão quadrado branco com uma linha vermelha cortando-o,
situado no canto superior direito).
Cria ção de listas com marcadores e numeradas
À medida que digita na janela do documento, podem ser criadas listas numeradas (ordenadas),
listas com marcadores (não-ordenadas) e listas de defini ções com base em um texto existente
ou em um novo texto. As listas de defini ções não utilizam caracteres à esquerda, como
marcadores ou números, porém estes são utilizados freqüentemente em glossários ou
descri ções. As listas também podem ser aninhadas. Listas aninhadas s ão listas que contêm
outras listas. Por exemplo: o usu ário poderá querer aninhar uma lista ordenada ou com
marcadores em uma outra lista numerada ou ordenada.
Para obter informações sobre a defini ção de um tipo de lista específico e outras op ções de lista
para uma lista inteira ou um item de lista específico (por exemplo: redefinir a numeração,
utilizar numerais romanos em uma lista ordenada ou definir marcadores quadrados), veja
Definição de opções de propriedade de lista.
Para criar uma nova lista:
1. No documento do Dreamweaver, colocar o ponto de inserção onde será adicionada uma

lista e, em seguida, seguir um dos procedimentos abaixo:
¡ Clique no botão Lista com marcadores ou Lista numerada no inspetor de
propriedades
¡ Escolha Texto > Lista e selecionar o tipo de lista desejado - Lista n ão-ordenada
(com marcadores), Lista ordenada (numerada) ou Lista de definições.
O caractere à esquerda do item de lista especificado é exibido na janela do

documento.
2. Digite o texto do item de lista e, em seguida, pressionar Enter para criar um outro item
de lista.
3. Para concluir a lista, pressionar duas vezes Enter.
Para criar uma lista usando texto já existente:
1. Escolha uma série de parágrafos para transform á-los em uma lista.

2. Clique nos botões Lista com marcadores ou Lista numerada, no inspetor de propriedades,
ou escolha Texto > Lista e selecionar o tipo de lista desejado: Lista n ão-ordenada, Lista
ordenada ou Lista de definições.
Para criar uma lista aninhada:
1. Selecione os itens da lista a serem aninhados.

2. Clique no botão Recuo, no inspetor de propriedades, ou escolha Texto > Recuo.
O Dreamweaver recuará o texto e criará uma lista separada com os atributos HTML da
lista original.
3. Aplicar um novo estilo ou tipo de lista ao texto recuado, seguindo o mesmo procedimento
utilizado acima.
Como inserir datas
O Dreamweaver fornece um objeto Data conveniente, que insere a data atual em qualquer
formato preferido (com ou sem a hora) e dá ao usuário a opção de atualizar a data sempre que
o arquivo for salvo.
Nota: As datas e horas mostradas na caixa de di álogo Inserir data não representam a data
atual nem refletem as datas/horas vistas por um visitante quando ele exibe o seu site. Estes
são apenas exemplos da maneira de mostrar essas informações.
Para inserir a data atual em um documento:
1. Na janela do documento, colocar o ponto de inserção onde a data deverá ser inserida.
2. Siga um dos procedimentos abaixo:
¡ Escolha Inserir > Data.
¡ Na barra Inserir, selecione Comuns e, em seguida, clique no botão Data.

3. Na caixa de diálogo que aparecer, selecionar os formatos para o nome do dia da semana,
a data e a hora.
4. Para que a hora inserida seja atualizada sempre que o documento for salvo, selecione
Atualizar automaticamente ao salvar. Para transformar a data em texto simples, quando
for inserida, e nunca atualiz á-la automaticamente, desmarque esta op ção.
5. Clique em OK, para inserir a data.
Dica: Se for escolhida a opção Atualizar automaticamente ao salvar, é possível editar o formato
da data após ter sido inserida no documento, através do clique no texto formatado e da sele ção
de Editar o formato da data, no inspetor de propriedades.
Como inserir caracteres especiais
Alguns caracteres especiais s ão representados em HTML por um nome ou n úmero, referenciado

como uma entidade. O HTML inclui nomes de entidades para caracteres como s ímbolo de
copyright (©), o "e" comercial ( &) e o símbolo de marca registrada ( ®). Cada
entidade contém um nome (por exemplo: —) e um equivalente numérico (por exemplo:
).
Dica: O HTML utiliza chaves <> no seu c ódigo, mas talvez seja necessário expressar os
caracteres especiais correspondentes a maior ou menor do que, sem que o Dreamweaver os
interprete como código. Nesse caso, utilizar > para maior do que (>) e ⁢ para menor do
que (<).
Infelizmente, muitos navegadores (especialmente, os mais antigos e aqueles diferentes do

Navigator e Internet Explorer) não exibem corretamente muitas das entidades denominadas.
É possível inserir v ários caracteres especiais (como entidades HTML) escolhendo a categoria
Caracteres na barra Inserir.
Para inserir um caractere especial em um documento:
1. Na janela do documento, colocar o ponto de inserção onde o caractere especial deverá ser
inserido.
¡ Escolha o nome do caractere no submenu Inserir > Caracteres.
¡ Na barra Inserir, escolha a categoria Caracteres e selecionar o caractere desejado.
Dica: Há vários outros caracteres especiais disponíveis. Para selecionar um deles, escolha
Inserir > Caracteres > Mais ou selecionar o ícone Inserir mais caracteres, na barra Inserir,
selecione um caractere e clique em OK.
Utilizaçã o de réguas horizontais
As réguas horizontais (linhas) são úteis para organizar informações. Em uma página, o texto e
os objetos podem ser separados visualmente por meio de uma ou mais réguas.
Para criar uma r égua horizontal:
1. Na janela do documento, colocar o ponto de inserção onde será inserida uma régua
horizontal.
¡ Escolha Inserir > Régua horizontal.
¡ Na barra Inserir, selecione Comuns e, em seguida, clique no botão R égua

horizontal.
Para modificar uma r égua horizontal:
1. Na janela do documento, selecione uma régua horizontal.

2. Escolha Janela > Propriedades, para abrir o inspetor de propriedades, e modifique as
propriedades conforme desejar.
L e U especificam a largura e a altura da r égua em pixels ou como uma percentagem do

tamanho da página.
Alinhar especifica o alinhamento da régua (Padrão, À esquerda, No centro ou À direita).

Esta definição será aplicada apenas quando a largura da régua for menor do que a da
janela do navegador.
Sombreado especifica se a régua será desenhada com sombreado. Desmarcar esta

opção para desenhar a régua com uma cor sólida.
Utilizaçã o dos estilos HTML para formatar o texto
Ao configurar estilos HTML, é possível aplicar com rapidez e consistência formatação de fonte ao
texto de documentos. Os estilos HTML podem consistir em um único ou em vários atributos de
tag de fonte HTML, como cor, tamanho da fonte, tamanho, bem como outros atributos de
formatação como negrito ou itálico. Por exemplo: é possível criar um estilo HTML para texto que
é Arial, tamanho 4+, verde e itálico. Depois, é possível aplicar rapidamente o estilo
selecionando o texto em que deseja aplicá-lo e, em seguida, selecionando o estilo HTML do
painel Estilos HTML.
Como os estilos HTML consistem apenas em tags de fonte, eles podem ser exibidos por
navegadores que não dão suporte a CSSs, como o 3.0 e navegadores anteriores.
Uma desvantagem de estilos HTML é que as alterações feitas em um estilo HTML não s ão
automaticamente atualizadas no documento. Caso tenha aplicado um estilo e posteriormente o
alterado, será necessário aplicar novamente o estilo ao texto para atualizar a formatação.
Diferentemente dos estilos CSS, a formatação com o estilo HTML afeta apenas o texto ao qual
foi aplicada ou o texto que tiver sido criado com um estilo HTML selecionado. Para poder alterar
a formatação e, automaticamente, atualizar todas as ocorrências dessa formatação, utilizar os
estilos CSS; veja Sobre CSSs (Cascading Style Sheets).
É possível utilizar o painel Estilos HTML para configurar os estilos HTML utilizados no site e, em
seguida, compartilhá-los com outros usuários, sites locais ou remotos. Para obter informações,
veja Utilização dos seus estilos HTML em outros sites.
Para exibir o painel Estilos HTML, seguir um dos procedimentos abaixo:
l Escolha Janela > Estilos HTML.

l Pressione Control + F11.
l Clique no ícone Estilos HTML no Iniciador.
Utilizaçã o do painel Estilos HTML
O painel Estilos HTML exibe os estilos HTML que estão disponíveis para o site local atual.
Há dois tipos de Estilos HTML: Estilos de parágrafo e Estilos de seleção. Eles podem ser
identificados pelo símbolo na primeira coluna do painel Estilos HTML:
Estilos de parágrafo são precedidos por uma marca de parágrafo e permitem formatar
parágrafos.
Estilos de sele çã o são precedidos por um a e permitem formatar texto já selecionado. Os dois
primeiros estilos do painel Estilos HTML, Limpar o estilo da seleção e Limpar o estilo do
parágrafo, permitem remover todas as tags de formato do texto selecionado e no qual elas são
aplicadas.
No painel Estilos HTML anterior, observar o estilo em Negrito. Um sinal de adição (+)
precedendo um estilo indica que o estilo adiciona formatação ao texto ao qual ele é aplicado. Se
um estilo não possuir um sinal de adição, qualquer estilo existente será limpado antes de o
estilo selecionado ser aplicado. Por exemplo: a utilização do Estilo HTML "a+ Vermelho"
simplesmente adiciona vermelho a qualquer formatação que já tenha sido aplicada ao texto
selecionado. Já a utilização do estilo HTML " Ênfase" limpa qualquer formatação existente antes
da aplicação desse estilo.
Para exibir os atributos de estilo de um estilo HTML existente:
1. No painel Estilos HTML, selecione um estilo.

2. No painel Estilos HTML, clique com o botão direito do mouse e escolha Editar, no menu
contextual, ou clique duas vezes no estilo HTML e selecionar Editar, no menu contextual.
3. Na caixa de diálogo Definir o estilo HTML, especifique as definições para o estilo.
As opções Aplicar a determinam se o estilo será aplicado ao texto selecionado (Seleção)

ou ao bloco de texto atual (Parágrafo). As opções Ao aplicar determinam se as defini ções
para o estilo serão adicionadas à formatação original do texto (Adicionar ao estilo
existente) ou removidas da formatação existente e substituídas pelas novas configura ções
(Limpar o estilo existente).
Para aplicar um estilo HTML existente:
No painel Estilos HTML, selecione um estilo.
l Se a caixa de seleção Aplicação automática, na parte inferior do painel, estiver

selecionada, clique uma vez no estilo.
l Se a caixa de seleção Aplicação automática não estiver selecionada, clique no estilo e,
depois, em Aplicar.
Para limpar a formataçã o de texto do documento:
1. Selecione o texto formatado.

2. No painel Estilos HTML, clique em Limpar o estilo do parágrafo ou Limpar o estilo da
seleção.
Limpar o estilo do parágrafo remove a formatação do bloco de texto atual no documento.

Limpar o estilo da seleção remove a formatação do texto selecionado.
Nota: As op ções Limpar o estilo do parágrafo e Limpar o estilo da seleção podem ser utilizadas
para remover qualquer formatação (exceto CSS), independentemente de como a formatação
original tenha sido aplicada (por exemplo: através do painel Estilos HTML ou do inspetor de
propriedades).
Para remover um estilo do painel Estilos HTML:
1. No painel Estilos HTML, desmarque a caixa de seleção para desativar a opção Aplicação
automática.
2. Selecione um estilo HTML.
3. Clique no ícone de Excluir o estilo (lixeira), na parte inferior direita do painel.
É possível criar estilos de duas formas: é possível formatar o texto no documento e, em

seguida, criar um estilo com base no texto selecionado ou pode -se criar um estilo no painel
Estilos HTML selecionando os atributos de formatação a serem aplicados.
Para criar um novo estilo HTML:
1. No painel Estilos HTML, clique no ícone de Novo estilo. É possível também escolher
Texto> Estilos HTML > Novo estilo.
A caixa de diálogo Definir o estilo HTML é exibida.
2. Na caixa de texto Nome, digite um nome para o estilo.

3. Em Aplicar a, seguir um dos procedimentos abaixo para escolher como este estilo será
aplicado:
¡ Para definir um estilo de seleção, escolha Seleção.
¡ Para definir um estilo de parágrafo, escolha Parágrafo.
Nota: Um estilo de parágrafo se aplica ao bloco inteiro de texto, no qual está

localizado o ponto de inserção, independente do texto que está realmente
selecionado.
4. Em Ao aplicar, escolher se o estilo HTML será aplicado além do estilo já existente do texto
ou parágrafo selecionado, ou para limpar a formatação da seleção ou do parágrafo e
aplicar o novo estilo HTML.
Nota: A hierarquia para aplicar estilos é esta: os estilos HTML precedem os estilos CSS,
que prevalecem sobre os estilos CSS externos. Para obter mais informações, veja Sobre
CSSs (Cascading Style Sheets).
5. Em Atributos da fonte, utilizar os menus pop-up para selecionar as opções de formatação

a serem aplicadas.
6. Se estiver criando um estilo de parágrafo, em Atributos de parágrafo, no menu pop-up
Formatar, escolha uma tag de parágrafo (por exemplo: parágrafo, Cabeçalho1, Pré-
formatado).
7. Em Alinhamento, clique no botão de alinhamento esquerdo, central ou direito para definir
o alinhamento de parágrafo desejado.
8. Clique em OK.
O estilo é adicionado à lista Estilos HTML.
Para criar um novo estilo HTML com base em um texto existente:
1. No documento, selecionar ou criar o texto que contém a formatação a ser utilizada no

novo estilo HTML.
Dica: É possível utilizar o inspetor de propriedades para exibir e aplicar formatação e, em

seguida, salvar a formatação como um estilo HTML.
2. No painel Estilos HTML, clique no ícone de Novo estilo (+), localizado no canto inferior
direito.
3. Na caixa de texto Nome, digite um nome para o estilo.

4. Em Aplicar a, seguir um dos procedimentos abaixo para escolher como este estilo será
aplicado:
¡ Para definir um estilo de seleção, escolha Seleção.
¡ Para definir um estilo de parágrafo, escolha Parágrafo.
Nota: Um estilo de parágrafo se aplica ao bloco inteiro de texto, no qual está

localizado o ponto de inserção, independente do texto que está realmente
selecionado.
5. Em Ao aplicar, escolher se o estilo HTML será aplicado além do estilo já existente do texto
ou parágrafo selecionado, ou para limpar a formatação da seleção ou do parágrafo e
aplicar o novo estilo HTML.
Nota: A hierarquia para aplicar estilos é esta: os estilos HTML precedem os estilos CSS,
que prevalecem sobre os estilos CSS externos. Para obter mais informações, veja Sobre
CSSs (Cascading Style Sheets).
6. Se estiver criando um estilo de parágrafo, em Atributos de parágrafo, no menu pop-up

Formatar, escolha uma tag de parágrafo (por exemplo: parágrafo, Cabeçalho1, Pré-
formatado).
7. Em Alinhamento, clique no botão de alinhamento esquerdo, central ou direito para definir
o alinhamento de parágrafo desejado.
8. Clique em OK.
Aplicação de um estilo HTML
Aplicar um estilo é tão f ácil quanto selecionar o texto ou o parágrafo ao qual o estilo será
aplicado e, em seguida, selecione o estilo no painel Estilos HTML.
Para aplicar um Estilo HTML:
1. No canto inferior esquerdo do painel Estilos HTML, certifique-se de que a opção Aplicar
esteja selecionada, para aplicar automaticamente o estilo selecionado.
2. Na janela do documento, seguir um dos procedimentos abaixo para selecionar o texto ao
qual o estilo será aplicado:
¡ Coloque o ponto de inserção em qualquer local em um parágrafo para aplicar um
estilo de parágrafo.
¡ Utilize o cursor para selecionar o texto ao qual um estilo de seleção ser á aplicado.
3. No painel Estilos HTML, clique no estilo HTML a ser aplicado ao texto.
O texto é atualizado automaticamente na janela do documento.
Ediçã o de um estilo HTML
Quando um estilo HTML é editado, o Dreamweaver não atualiza automaticamente o texto que
tenha sido formatado previamente utilizando este estilo. Para atualizar o estilo para o texto
formatado previamente, é necessário aplicar novamente o estilo manualmente.
Para editar um estilo HTML existente:
1. Certifique-se de que não haja texto selecionado na janela do documento.

2. No painel Estilos HTML, certifique-se de que a caixa de seleção Aplicação automática
esteja desmarcada.
Se a opção Aplicação automática estiver ativada, o estilo HTML será aplicado quando este
for escolhido no painel Estilos HTML.
3. No painel Estilos HTML, seguir um dos procedimentos abaixo:

¡ Clique com o botão direito do mouse e, em seguida, escolha Editar no menu
contextual.
¡ Clique duas vezes no estilo.
4. Na caixa de diálogo, definir opções de atributo de estilo para o estilo.

5. Para redefini-lo com as opções padrão, clique em Limpar.
Utilizaçã o dos seus estilos HTML em outros sites
O painel Estilos HTML pode servir para registrar os estilos HTML utilizados em um site, a fim de
poderem ser compartilhados com outros usuários, sites locais ou remotos.
Os estilos HTML s ão automaticamente armazenados na pasta Biblioteca do site local em um

arquivo chamado Styles.xml. É possível copiar o arquivo Styles.xml da pasta Biblioteca de um
site local para a pasta Biblioteca de um outro site local e reutilizar estilos criados.
Nota: Cada site s ó pode conter um arquivo Styles.xml; então, se tiverem sido criados novos
estilos HTML no site para o qual um arquivo Styles.xml esteja sendo copiado, o arquivo copiado
substituir á o arquivo existente. As altera ções de formatação j á aplicadas não serão perdidas. É
possível recriar os estilos selecionando texto no documento e definindo um novo estilo HTML.
Para compartilhar os seus estilos HTML com outros sites ou usuários:
1. Escolha Janela > Site ou Site > Arquivos do site para abrir o painel Site na visualização
Arquivos do site.
2. No painel Site, localizar e abrir a pasta Biblioteca.
Há um arquivo chamado styles.xml. Esse arquivo contém todos os estilos HTML do site.
Ele pode ser colocado, obtido, devolvido, retirado e copiado como qualquer outro no site.
Também é possível criar Design Notes para o arquivo styles.xml. Para criar ou editar um
estilo para um site remoto, é necessário retirar primeiro o arquivo styles.xml.
Para obter mais informações sobre o uso dessas opções, veja Como configurar uma pasta
remota.
Sobre CSSs (Cascading Style Sheets)
CSS (Cascading Style Sheets) s ão um conjunto de regras de formatação que controlam a

aparência do conteúdo em uma página da Web. Estilos CSS oferecem grande flexibilidade e
controle da aparência exata da página, desde o posicionamento preciso do layout até fontes e
estilos específicos.
Os estilos CSS permitem controlar muitas propriedades que não podem ser controladas apenas
através do HTML. Por exemplo: é possível atribuir marcadores de listas personalizados e
especificar diferentes tamanhos de fontes e unidades (pixels, pontos, etc.). É possível garantir
um tratamento mais consistente do layout e da aparência da página em v ários navegadores,
utilizando estilos CSS e definindo tamanhos de fontes em pixels. Além da formatação do texto,
é possível controlar o formato e o posicionamento de elementos em nível de bloco em uma
página da Web. Por exemplo: é possível definir margens, bordas, texto flutuante em torno de
outro texto, e assim por diante.
Uma regra de estilo CSS consiste em duas partes - o seletor e a declaração. O seletor é o nome
do estilo (como TR ou P) e a declaração define os elementos do estilo. A declaração consiste em
duas partes, a propriedade (como font-family) e o valor (como Helvetica). O termo em
cascata se refere à sua habilidade para aplicar várias folhas de estilo à mesma página da Web.
Por exemplo: é possível criar uma folha de estilo para aplicar cor e outra para aplicar margens,
e aplicá-los à mesma página para criar o projeto desejado.
Uma grande vantagem de estilos CSS é que eles oferecem a capacidade de fácil atualização.
Quando um estilo CSS é atualizado, a formatação de todos os documentos que utilizam esse
estilo é atualizada automaticamente par ao novo estilo.
No Dreamweaver, é possível utilizar o painel Estilos CSS para criar, exibir e anexar atributos de
estilo a documentos. Para obter informações sobre a utilização do painel Estilos CSS, veja Como
utilizar o painel Estilos CSS. Além dos estilos e das folhas de estilos criadas, é possível utilizar
folhas de estilo que acompanham o Dreamweaver para aplicar estilos aos documentos. Veja
Como criar um documento a partir de um arquivo de projeto do Dreamweaver.
É possível definir os tipos de folhas de estilos CSS a seguir no Dreamweaver:
l Estilos CSS personalizados, também chamados de estilos de classe, permitem definir

atributos de estilo a qualquer faixa ou bloco de texto. Veja Aplicação de um estilo (classe)
CSS personalizado.
l Os estilos de tags HTML redefinem a formatação de uma tag específica, como h1. Quando
for criado ou alterado um estilo CSS para a tag h1, todos os textos formatados com a tag
h1 serão imediatamente atualizados.
l Os estilos do seletor CSS redefinem a formatação de uma determinada combinação de
tags (por exemplo: td h2 será aplicado sempre que um cabeçalho h2 aparecer em uma
célula de tabela) ou de todas as tags que contiverem um atributo id (por exemplo:
#myStyle será aplicado a todas as tags que contiverem o par atributo-valor
ID="myStyle").
As folhas de estilos CSS residem na área head de um documento. Estilos CSS podem definir os
atributos de formatação para tags HTML, faixas de texto identificadas por um atributo class. O
Dreamweaver MX reconhece os estilos definidos em documentos existentes, contanto que eles
estejam em conformidade com as instruções CSS.
Dica: Para exibir o guia O’Reilly de referência de CSS, distribuído com o Dreamweaver, clique
no botão Referência, localizado na barra de ferramentas, e escolha Referência de HTML O'Reilly,
no menu pop-up.
A formatação HTML manual anula a formatação aplicada com os estilos CSS (ou HTML). Para
que os estilos CSS controlem a formatação de um parágrafo, remover toda a formatação HTML
manual ou os estilos HTML.
A maioria dos atributos de estilo aplicados podem ser exibidos na janela do documento.
Também é possível visualizar o documento em uma janela do navegador para v ê-lo aplicado.
Alguns dos atributos de estilo CSS têm uma aparência diferente no Microsoft Internet Explorer
4.0 e no Netscape Navigator 4.0, e alguns não contam atualmente com suporte de nenhum
navegador.
Durante o trabalho no painel Estilos CSS, é possível utilizar o recurso Folhas de estilo para
design do Dreamweaver. Este recurso permite ocultar ou mostrar atributos de folha de estilo
durante o projeto de uma página no Dreamweaver (por exemplo: para exibir um documento
com uma folha de estilo projetada para o Navigator ou o Internet Explorer). Para obter
informações sobre a utilização de Folhas de estilo para design, veja Utilização de folhas de
estilos para design.
Como utilizar o painel Estilos CSS
O painel Estilos CSS é utilizado para criar, exibir propriedades de e aplicar estilos CSS a
elementos de um documento.
Para abrir o painel Estilos CSS, seguir um dos procedimentos abaixo:
l Escolha Janela > Estilos CSS.

l Pressione Shift+F11.
Os botões de opção Aplicar estilos e Editar estilos, localizados na parte superior do painel Estilos
CSS, permitem selecionar diferentes visualizações dos estilos CSS associados ao documento
atual.
É possível utilizar a visualização Aplicar estilos para selecionar um estilo de classe para aplicar a
um elemento no documento. A visualização Aplicar estilos só exibe estilos (classe)
personalizados. Estilos HTML redefinidos e estilos de seletor não são exibidos neste painel.
Como eles estão associados a uma tag de HTML, seus atributos de estilo são automaticamente
aplicados a quaisquer tags do documento afetadas pelo estilo definido. Por exemplo: se forem
definidos atributos de estilo para a tag de tabela, uma tabela do documento será atualizada
automaticamente com as definições de estilo selecionadas.
A visualização Editar estilos permite verificar a definição de estilo dos estilos associados ao
documento atual. A visualização Editar estilos exibe definição de estilo de estilos (classe) CSS
personalizados, tags HTML redefinidas e estilos de seletor CSS. A visualização Editar estilos
também é utilizada para exibir Folhas de estilo para design que foram aplicadas ao documento.
À medida que uma folha de estilo CSS é criada ou anexada, o nome e os atributos do estilo são
exibidos na visualização Editar estilos do painel Estilos CSS. Editar estilos lista todos os
seletores definidos em todas as tags de estilo e vinculados externamente ou folhas de estilo
importadas. Aplicar estilos permite exibir estilos aplicados no documento atual, bem como
estilos disponíveis em uma folha de estilo externa anexada.
Quando for criado um estilo (classe) personalizado, ele aparecerá no painel Estilos CSS e no
submenu Texto > Estilos CSS.
Os botões a seguir estão localizados na parte inferior do painel Estilos CSS:
O botão Anexar a folha de estilos abre a caixa de diálogo Vincular a folha de estilos externa.
Selecione uma folha de estilos externa para vincular ou importar para o documento atual. Para
obter informações sobre como anexar uma folha de estilos externa, veja Cria ção e vinculação
de uma folha de estilos CSS externa.
O botão Novo estilo CSS abre a caixa de diálogo Novo estilo CSS. Utilize o diálogo Novos
estilos CSS para selecionar o tipo de estilo que est á sendo criado - por exemplo: para criar um
estilo de classe, redefinir uma tag de HTML ou definir um seletor CSS. Para obter informaçõ es
sobre como criar um novo estilo, veja Criação de um novo estilo CSS.
A opção Editar a folha de estilos abre a caixa de diálogo Definição de estilos CSS. Editar
qualquer um dos estilos no documento atual ou em uma folha de estilos externa. Para obter
informações sobre a atualização de uma folha de estilos, veja Edição de um estilo CSS.
A opção Excluir o estilo CSS remove o estilo selecionado do painel Estilos CSS e remove a
formatação de qualquer elemento ao qual o estilo tenha sido aplicado.
Nota: Clique com o bot ão direito do mouse no painel Estilos CSS para abrir um menu
contextual de opções para trabalhar com comandos da Folha de estilos CSS.
Crie um estilo CSS para automatizar a formatação das tags HTML ou uma faixa de texto
identificada por um atributo class.
Para criar um novo estilo CSS:
1. Coloque o ponto de inserção no documento e seguir um dos procedimentos abaixo para

abrir a caixa de diálogo Novo estilo CSS:
¡ No painel Estilos CSS (Janela > Estilos CSS), clique no botão Novo estilo CSS (+),
localizado na área inferior direita do painel.
¡ No inspetor de propriedades do texto, clique no botão Alternar modo CSS/HTML, se
necessário, para alternar para o Modo CSS e, em seguida, no menu pop-up Estilo
CSS, selecione Novo estilo CSS.
¡ Escolha Texto > Estilos CSS > Novo estilo CSS.
A caixa de diálogo Novo estilo CSS é exibida.
2. Defina o tipo de estilo CSS que deseja criar:

¡ Para criar um estilo personalizado que possa ser aplicado como um atributo class a
uma faixa ou bloco de texto, selecione Criar estilo personalizado (Classe) e, em

seguida, no campo Nome, digite um nome para o estilo.
Nota: Os nomes de estilo personalizado (classe) devem iniciar com um ponto e

podem conter qualquer combinação de letras e números. Por exemplo:
.cabeçalhocomercial1 . Caso o ponto não seja inserido, o Dreamweaver o digitará
automaticamente.
¡Para redefinir a formatação padrão de uma HTML específica, selecione Redefinir a

tag de HTML e, em seguida, no campo Tag, digite uma tag de HTML ou escolher
uma no menu pop-up.
¡ Para definir a formatação de uma determinada combinação de tags ou de todas as
tags que contêm um atributo Id específico, selecione Utilizar o seletor de CSS e, em
seguida, no campo Seletor, digite uma ou mais tags de HTML ou escolha uma no
menu pop-up. Os seletores disponíveis no menu pop-up são a:active, a:hover,
a:link e a:visited.
3. Selecione o local onde o estilo será definido:
¡ Para criar uma folha de estilos externa, escolha Novo arquivo de folha de estilos.
¡ Para incorporar o estilo no documento atual, escolha Apenas este documento.

4. Clique em OK.
A caixa de diálogo Definição do estilo é exibida.
5. Escolha as opções de estilo a serem definidas para o novo estilo CSS.

6. Ao concluir a definição de atributos de estilo, clique em OK.
Para obter informações sobre definições de estilo CSS específicas, veja os tópicos a seguir:
l Definição de propriedades do tipo CSS

l Definição de propriedades de fundo do estilo CSS
l Definição de propriedades de bloco do estilo CSS
l Definição de propriedades de caixa do estilo CSS
l A opção Defini ção de propriedades de borda do estilo CSS
l Definição de propriedades de lista do estilo CSS
l Definição de propriedades de posicionamento de estilos CSS
l Definição de propriedades de extensões do estilo CSS
Aplicação de um estilo (classe) CSS personalizado
Os estilos (classes) personalizados são o único tipo de estilo CSS que pode ser aplicado a
qualquer texto em um documento, sem levar em consideração as tags que o controlam. Todos
os estilos (classe) personalizados associados ao documento atual são exibidos na visualização
Aplicar estilo do painel Estilos CSS e no modo CSS do inspetor de propriedades do texto.
A maioria dos estilos atualizados é exibida de imediato, mas é necessário visualizar a página em
um navegador para verificar se um estilo foi aplicado conforme esperado. Quando dois ou mais
estilos CSS forem aplicados ao mesmo texto, estes poderão se tornar conflitantes e produzir
resultados inesperados. Consulte Sobre os estilos conflitantes, para obter mais informações.
Para aplicar um estilo CSS personalizado:
1. No documento, selecione o texto ao qual será aplicado um estilo CSS.
Coloque o ponto de inserção em um parágrafo, para aplicar o estilo ao parágrafo inteiro.
Se for selecionada uma faixa de texto em um único parágrafo, o estilo CSS afetará
apenas a faixa selecionada.
Para especificar a tag exata à qual o estilo CSS deve ser aplicado, selecione a tag no
seletor de tags, localizado na parte inferior esquerda da janela do documento.
2. Para aplicar um estilo de classe, seguir um dos procedimentos abaixo:

¡ No painel Estilos CSS (Janela > Estilos CSS), selecione Aplicar estilos e, em seguida,
na lista Estilos CSS, clique no nome do estilo que deseja aplicar.
¡ No inspetor de propriedades do texto, clique no botão Alternar modo CSS/HTML, se
necessário, para alternar para o Modo CSS e, em seguida, no menu pop-up Estilo
CSS, selecione o estilo de classe que deseja aplicar.
¡ Na janela do documento, clique com o botão direito do mouse no texto selecionado
e, no menu contextual, escolha Estilos CSS e selecionar o estilo que deseja aplicar.
¡ Selecione Texto > Estilos CSS e, no submenu, selecione o estilo que deseja aplicar.
Para remover um estilo personalizado de uma seleçã o:
Selecione o objeto ou texto cujo estilo deseja remover e seguir um dos procedimentos abaixo:
l No inspetor de propriedades do texto, clique no botão Alternar modo CSS/HTML, se

necessário, para alternar para o Modo CSS e, em seguida, no menu pop-up Estilo CSS,
selecione Nenhum estilo CSS.
l No painel Estilos CSS, selecione a visualização Aplicar estilos e escolha Nenhum estilo
CSS.
Cria ção e vincula çã o de uma folha de estilos CSS externa
Uma folha de estilos CSS é um arquivo de texto externo que contém especificações de estilos e
formatação. Quando uma folha de estilos CSS externa for editada, todos os documentos a ela
vinculados ser ão atualizados com essas alterações. É possível exportar os estilos CSS de um
documento para criar uma nova folha de estilos CSS e, em seguida, anexar ou vincular a uma
folha de estilos externa, a fim de aplicar os estilos nela contidos.
Além das folhas de estilos CSS criadas, é possível utilizar as folhas de estilos CSS que
acompanham o Dreamweaver e anexá-las a páginas de um site. Para obter informa ções sobre a
utilização de folhas de estilos de projeto incluídas no Dreamweaver, veja Como criar um
documento a partir de um arquivo de projeto do Dreamweaver.
Para obter informações sobre a aplicação de um estilo, veja Aplicação de um estilo (classe) CSS
personalizado.
Para vincular ou importar uma folha de estilos CSS externa:
1. Abra o painel Estilos CSS seguindo um dos procedimentos abaixo:

¡ Escolha Janela > Estilos CSS
¡ Pressione Shift + F11
¡ Clique no ícone Estilos CSS no Iniciador.

2. No painel Estilos CSS, clique no botão Anexar a folha de estilos.
A caixa Vincular a folha de estilos externa é exibida.
3. Na caixa de diálogo Vincular a folha de estilos externa, seguir um dos procedimentos

abaixo:
¡ Clique em Procurar para procurar uma folha de estilos CSS externa, ou digite o
caminho da folha de estilos na caixa Arquivo/URL.
4. Em Adicionar como, selecionar uma das opções:
¡ Para criar um link entre o documento atual e uma folha de estilos externa, escolha
Link. Isso cria uma tag link href no código HTML e referencia a URL na qual está
localizada a folha de estilos publicada. Esse m étodo conta com suporte do Microsoft
Internet Explorer e do Netscape Navigator.
¡ Para referenciar uma folha de estilos externa, escolha Importar. Isto cria uma tag
@import no código HTML, e referencia a URL na qual a folha de estilos publicada
está localizada. Este método não funciona com o Netscape Navigator.
5. Clique em OK.
O nome da folha de estilos CSS externa é exibido na visualização Editar estilos do painel
Estilos CSS, e estilos (classe) personalizados são exibidos na visualização Aplicar estilos
precedidos do identificador da folha de estilos externa.
Ediçã o de um estilo CSS
É possível editar facilmente os estilos internos e externos aplicados a um documento. Na

visualização Editar estilos, selecionar o estilo a ser alterado e, em seguida, abrir a caixa de
diálogo Definição de estilos CSS e modificar o estilo.
Quando uma folha de estilos CSS que controla o texto no documento for editada, o texto inteiro
controlado por essa folha de estilos CSS será reformatado instantaneamente. As edições em
uma folha de estilos externa afetam todos os documentos vinculados a ela.
É possível definir um editor externo para editar folhas de estilo. Para obter informações sobre a
configuração de um editor externo, veja Como iniciar um editor externo para arquivos de m ídia .
Nota: Caso o TopStyle, um editor CSS da Bradbury Software, tenha sido instalado no seu
computador, o Dreamweaver o detectará automaticamente e o definirá como o editor externo
para arquivos .css. Uma cópia de avalia ção do Topstyle acompanha o Dreamweaver.
Para editar um estilo CSS:
1. No painel Estilos CSS, clique no botão de opção Editar os estilos para visualizar os estilos
no documento atual.
2. Clique no estilo a ser editado para selecioná-lo e, em seguida, seguir um dos
procedimentos abaixo:
¡ Clique duas vezes no estilo selecionado.
¡ Clique com o botão direito do mouse e em seguida, escolha Editar.
¡ Clique no botão Editar folha de estilos, localizado na parte inferior do painel Estilos
CSS.
A caixa de diálogo Definição de estilos CSS é aberta.
3. Modificar o estilo conforme desejado e, em seguida, clique em OK.
Ediçã o de uma folha de estilos CSS
Uma folha de estilos CSS costuma incluir um ou mais estilos. É possível editar um estilo
separado em uma folha de estilos CSS (veja Edição de um estilo CSS), mas às vezes é
necessário editar v ários estilos.
A caixa de diálogo Editar folha de estilos permite trabalhar com folhas de estilos de diversas
formas. Utilize essa caixa para vincular a uma folha de estilos CSS externa, criar uma nova
folha de estilos CSS, editar uma folha de estilos CSS existente ou para duplicar ou remover uma
folha de estilos CSS.
Para editar uma folha de estilos CSS:
1. No painel Estilos CSS, selecione Editar os estilos.

2. Na lista Estilos, clique na folha de estilos a ser editada para selecioná-lo e, em seguida,
seguir um dos procedimentos abaixo:
¡ Clique no botão Editar folhas de estilos, localizado na parte inferior do painel Estilos
CSS.
¡ Clique com o botão direito do mouse na folha de estilos e, em seguida, escolha
Editar folha de estilos. Depois, na caixa de di álogo que for exibida, selecionar a
folha de estilos a ser editada e, em seguida, clique em Editar.
Os estilos da folha de estilos CSS selecionada s ão exibidos na caixa de diálogo.
3. Na caixa de diálogo, selecionar o estilo a ser editado e, em seguida, clique em Editar.
A caixa de diálogo Definição de estilos CSS é exibida.
4. Modificar os estilos conforme desejado e, em seguida, clique em OK.
Utilizaçã o de folhas de estilos para design
Folhas de estilos para design permitem mostrar ou ocultar design aplicado por uma folha de
estilos CSS, conforme o usuário trabalha em um documento Dreamweaver. Por exemplo: é
possível utilizar esta opção para incluir ou excluir o efeito de uma folha de estilos apenas do
Macintosh ou apenas do Windows, conforme o usuário projeta uma página.
As folhas de estilos para design só se aplicam durante o design utilizando o documento do

Dreamweaver. Quando a página é exibida em uma janela do navegador, apenas os estilos
realmente anexados ou incorporados no documento são exibidos em um navegador.
Para mostrar ou ocultar uma folha de estilos CSS para design:
1. Abra a caixa de di álogo Folhas de estilos para design, seguindo um dos procedimentos
abaixo:
¡ Clique com o botão direito do mouse no painel Estilos CSS. No menu contextual,
selecione Folha de estilos para design.
¡ Escolha Texto > Estilos CSS > Folhas de estilos para design.
2. Na caixa de diálogo, definir opções para mostrar ou ocultar uma folha de estilos
selecionada.
¡ Para exibir uma folha de estilos CSS para design, clique no botão de adição (+)
acima de Mostrar apenas na fase de design. Em seguida, na caixa de diálogo
Selecionar uma folha de estilos, navegar até a folha de estilos CSS a ser mostrada.
¡ Para ocultar uma folha de estilos CSS, clique no botão de adição (+) acima de
Ocultar na fase de design. Em seguida, na caixa de diálogo Selecionar uma folha de
estilos, navegar até a folha de estilos CSS a ser mostrada.
¡ Para remover uma folha de estilos de uma das listas, clique na folha de estilos a ser
removida. Em seguida, clique no botão de subtração ( –) apropriado.
3. Clique em OK para fechar o diálogo.
O painel Estilos CSS é atualizado com o nome da folha de estilos selecionada junto com um
indicador, “oculto” ou “design”, para refletir o status da folha de estilos.
Exportaçã o de estilos para criar uma folha de estilos CSS
Os estilos de um documento podem ser exportados para criar uma nova folha de estilos CSS.
Em seguida, ela pode ser vinculada a outros documentos, para que os estilos sejam aplicados.
Para exportar estilos CSS de um documento e criar uma folha de estilos CSS:
1. Escolha Arquivo > Exportar > Exportar os estilos CSS, ou selecionar Texto > Exportar a
folha de estilos.
A caixa de diálogo Exportar os estilos como um arquivo CSS é exibida.
2. Digite um nome para o estilo e clique em Salvar.
O estilo será salvo como uma folha de estilos CSS.
Sobre os estilos conflitantes
Quando dois ou mais estilos CSS forem aplicados ao mesmo texto, estes poderão se tornar
conflitantes e produzir resultados inesperados. Os navegadores aplicam os atributos de estilo
segundo as regras abaixo:
l Se dois estilos forem aplicados ao mesmo texto, o navegador exibirá todos os atributos de
ambos os estilos, a menos que os atributos específicos sejam conflitantes. Por exemplo:
um estilo pode especificar azul para a cor do texto e outro definir vermelho.
l Se os atributos de dois estilos aplicados ao mesmo texto forem conflitantes, o navegador
exibirá o atributo do estilo mais próximo (àquele do texto).
l Se houver um conflito direto, os atributos dos estilos CSS (aplicados com o atributo
class ) anularão aqueles dos estilos de tags HTML.
No exemplo a seguir, o estilo definido para h1 deve especificar a fonte, o tamanho e a cor para
todos os parágrafos h1, mas o estilo CSS personalizado .Blue aplicado a esse parágrafo anula a
definição de cor no estilo H1. O segundo estilo CSS personalizado .Red anula o .Blue porque ele
está contido no estilo .Blue.
<h1>Este parágrafo está controlado pelo estilo personalizado .Blue e pel
de tag de HTML.Exceto pelo fato de esta sentença ser controlada pelo esti
Agora, estamos de volta ao estilo .Blue.</h1>
Conversão de estilos CSS em tags de HTML
Se os estilos CSS forem utilizados para especificar a formatação do texto (como fam ília,
tamanho, cor e decora ção das fontes) e, posteriormente, o usuário decidir tornar a formatação
visível em um navegador 3.0, será possível utilizar o comando Arquivo > Converter >
compatível com navegador 3.0, para converter o maior número de informações possíveis sobre
os estilos para as tags de HTML.
Nota: Nem todos os estilos CSS podem ser convertidos em HTML, porque as tags HTML não
abrangem ou oferecem suporte a todos os atributos possíveis nas CSS.
Para converter um arquivo que utiliza os estilos CSS em um arquivo compatível com
navegador 3.0:
1. Escolha Arquivo > Converter > Compatível com navegador 3.0.

2. Na caixa de diálogo que aparecer, escolha Estilos CSS em markup de HTML.
Quando a opção Camadas em tabelas for selecionada, o Dreamweaver substituirá todas

as camadas por uma tabela e manterá o posicionamento original.
Os estilos CSS serão substituídos, onde for possível, por tags de HTML, como b e font.
Qualquer markup de CSS que não puder ser convertido em HTML será removido. Veja
Tabela de convers ão de CSS em markup de HTML para obter informações sobre quais
estilos serão convertidos e quais serão removidos.
3. Clique em OK. O Dreamweaver abrirá o arquivo convertido em uma nova janela sem
título.
Nota: É necessário executar este procedimento de conversão sempre que o arquivo original for
alterado, para atualizar o arquivo compatível com a versão-3.0. Por esse motivo,
recomendamos que isto seja efetuado apenas depois que você estiver inteiramente satisfeito
com o arquivo original.
Tabela de conversão de CSS em markup de HTML
Os atributos CSS relacionados na tabela abaixo s ão convertidos em markup de HTML utilizando

o comando Arquivo > Converter > Compatível com navegador 3.0 (veja Conversão de estilos
CSS em tags de HTML). Os atributos não contidos na tabela serão removidos.
Atributo CSS Convertido em
color FONT COLOR
font-family FONT FACE
font-size FONT SIZE="[1-7]"
font-style: oblique I
font-style: italic I
font-weight B
list-style-type: square UL TYPE="square"
list-style-type: circle UL TYPE="circle"
list-style-type: disc UL TYPE="disc"
list-style-type: upper-roman OL TYPE="I"
list-style-type: lower-roman OL TYPE="i"
list-style-type: upper-alpha OL TYPE="A"
list-style-type: lower-alpha OL TYPE="a"
list-style UL ou OL com TYPE, conforme for adequado
text-align P ALIGN ou DIV ALIGN, conforme for adequado
text-decoration: underline U
text-decoration: line-through STRIKE
Verificaçã o ortográfica
Utilize o comando Verificar a ortografia, no menu Texto, para verificar a ortografia no

documento atual. Esse comando ignora as tags HTML e valores de atributos.
Como padrão, a verificação ortográfica utiliza o dicionário ortográfico de inglês dos EUA. Para
alterar o dicionário, escolha Editar > Preferências > Geral. Em seguida, no menu pop-up
Dicionário ortográfico, selecionar o dicionário a ser utilizado. Pode-se fazer o download de
dicionários para idiomas adicionais a partir da Central de suporte do Dreamweaver.
Para verificar e corrigir a ortografia:
1. Escolha Texto > Verificar a ortografia ou pressionar Shift+F7.
Quando o Dreamweaver encontra uma palavra não reconhecida, a caixa de diálogo

Verificar a ortografia é exibida.
2. Na caixa Verificar a ortografia, escolher a opção apropriada com base na forma como a
discrepância será tratada:
Adicionar ao dicionário pessoal adiciona a palavra não-reconhecida ao seu dicionário

pessoal.
Ignorar ignora a ocorrência de uma palavra n ão-reconhecida.
Ignorar todas ignora todas as ocorrências de uma palavra n ão-reconhecida.
A opção Alterar substitui esta instância da palavra n ão-reconhecida pelo texto digitado
na caixa de texto Alterar para, ou pela seleção na lista Sugestões.
Alterar todas substitui todas as ocorrências da palavra não-reconhecida.
Busca e substituição de texto
É possível realizar uma busca de texto, texto circundado por determinadas tags ou tags e
atributos HTML no documento atual, em arquivos específicos, em um diretório ou no site inteiro.
Comandos diferentes são utilizados para procurar arquivos/texto e/ou tags de HTML 1 em
arquivos: Localizar no site local e Localizar no site remoto buscam arquivos, enquanto Editar >
Localizar e substituir procura texto e tags em arquivos.
Para buscar texto e/ou HTML em documentos:

¡ Na visualização do projeto, na janela do documento ou no painel do site, escolha
Editar > Localizar e Substituir.
¡ Na visualização do c ódigo, clique com o botão direito do mouse e escolher Localizar
e substituir no menu contextual.
2. Na caixa de diálogo Localizar e substituir que é exibida, utilizar a opção Localizar em para
especificar os arquivos nos quais a busca deverá ser executada:
¡ Documento atual restringe a busca ao documento ativo. Esta opção estará
disponível apenas quando for escolhida Localizar ou substituir, na janela ativa do
documento ou no menu contextual, no inspetor de c ódigo.
¡ A escolha de Todo o site local expande a busca para todos os documentos HTML,
arquivos de biblioteca e documentos de texto localizados no site. Após a escolha de
Site atual, o nome deste aparecerá à direita do menu pop-up. Se este não for o site
no qual deseja efetuar a busca, escolher um outro site no menu pop-up do site
atual, no painel do site.
¡ Arquivos selecionados do site restringe a busca aos arquivos e pastas que estiverem
selecionados no momento no painel do site. Esta opção estará disponível apenas
quando Localizar ou substituir tiver sido escolhida no painel do site ativo (isto é, na
frente da janela do documento).
¡ A escolha de Pasta restringe a busca a um grupo específico de arquivos. Após
escolher a pasta, clique no ícone correspondente à pasta, para procurar e selecionar
o diretório no qual será efetuada a busca.
3. Utilize a opção Procurar para especificar o tipo de busca a ser efetuada.
¡ A escolha de Código-fonte permite procurar determinadas seqüências de texto no
código-fonte HTML. Veja Como procurar e substituir tags e atributos.
¡ A escolha de Texto permite procurar determinadas seqüências de texto na janela do
documento. Uma busca de texto ignora qualquer HTML que interrompa a seqüência.
Por exemplo: uma busca de o cão preto coincidiria com o cão preto e o cão
preto.
¡ A escolha de Texto avanç. permite procurar determinadas seqüências de texto
dentro ou fora de uma ou mais tags. Por exemplo: em um documento que contém o
código HTML a seguir, a procura de tenta fora da tag i acarretaria a localização
apenas da segunda instância da palavra tenta: João tenta entregar o
trabalho dentro do prazo, mas nem sempre consegue. Ele sempre tenta
cumprir os prazos. Veja Como procurar texto contido em tags específicas.
¡ A escolha de Tag específica permite procurar determinadas tags, atributos e valores
de atributo, como todas as tags td com a definição de valign para top. Veja Como
procurar tags e atributos.
Nota: A ativação através das teclas Control e Enter ou Shift e Enter adiciona
quebras de linha nos campos de busca de texto, permitindo a procura de um
caractere de retorno. Certifique-se de que a opção Ignorar os diferentes espaços em
branco esteja desmarcada ao fazer essa busca, quando não forem utilizadas as
expressões regulares. Observar que esse procedimento localiza um determinado
caractere de retorno, mas não apenas uma quebra de linha; por exemplo: não
localizará uma tag ou . Os caracteres de retorno são exibidos como
espaços na visualização do projeto e n ão como quebras de linha.
4. Utilize uma das opções a seguir para expandir ou limitar a busca:

¡ A opção Coincidir maiúsc./minúsc restringe a busca ao texto que coincidir
exatamente com a caixa do texto a ser localizado. Por exemplo: se você tentar
localizar o chapéu marrom, não encontrará O chapéu marrom.
Nota: A op ção Ignorar os diferentes espaços em branco trata qualquer espaço em

branco como espaço simples, com o intuito de coincidir com a busca. Por exemplo:
com esta opção selecionada, this text coincidiria com this text, porém não com
thistext. Esta opção não estará disponível quando Utilizar expressões regulares
estiver selecionada; neste caso, será necessário escrever textualmente a express ão
normal para ignorar qualquer espaço em branco Observe que as tags e 
não s ão consideradas espaço em branco.
¡ A opção Utilizar expressões regulares acarreta a interpretação de certos caracteres

e cadeias de caracteres pequenas (como ?, *, \w e \b) da seqüência de busca como
operadores comuns de expressões. Por exemplo: a busca de o cão b\w*\b coincidirá
com o cão preto e o cão policial. Veja Sobre expressões comuns.
Nota: Se você estiver trabalhando na visualização de c ódigo, fizer alterações no seu

documento e tentar localizar e substituir qualquer item que não seja c ódigo-fonte,
aparecerá uma caixa de diálogo informando que o Dreamweaver est á sincronizando
as duas visualizações antes de efetuar a busca. Para obter mais informações sobre
a sincronização de visualizações, consultar Exibição do seu c ódigo.
Referência
Esta seção fornece informações sobre as caixas de diálogo, os inspetores de propriedades e os

painéis apresentados neste capítulo.
Opções de propriedades Definiçã o do texto
O inspetor de propriedades do texto exibe os atributos de formatação atuais do texto

selecionado no documento. É possível alterar a formatação definindo novas opções. O estilo é
logo aplicado ao texto.
É possível utilizar o inspetor de propriedades do texto para aplicar a formatação HTML ou a

formatação CCS (Cascading Style Sheet). A formatação HTML permite selecionar opções de
formatação de texto, como fonte, tamanho, negrito e it álico, ao passo que a formatação CSS
permite aplicar um estilo de classe CSS ao texto selecionado.
Quando é utilizado o inspetor de propriedades para aplicar o estilo negrito ou itálico, o

Dreamweaver aplica a tag ou , respectivamente, de modo automático. Se
estiverem sendo criadas páginas para visitantes que possuem navegadores vers ão 3.0 ou mais
antigas, alterar essa preferência na categoria Geral da caixa de diálogo Preferências (Editar >
Preferências).
Para obter informações sobre a criação de um estilo de classe, veja Cria ção de um novo estilo
CSS.
Para alternar os modos de formataçã o de texto:
No inspetor de propriedades, clique no botão Alternar modo CSS/HTML.
Para definir opções de formataçã o CSS:
1. Abra o inspetor de propriedades (Janela > Propriedades) caso não esteja aberto.
2. Selecione o texto a ser formatado.
3. No inspetor de propriedades, se Modo CSS ainda não estiver selecionado, clique no botão
Alternar modo CSS/HTML para alternar para o Modo CSS.
4. Defina as opções de CSS a serem aplicadas ao texto selecionado.
A opção Formatar define o estilo de parágrafo do texto selecionado. A opção Parágrafo

aplica o formato padrão de uma tag , Cabeçalho 1 adiciona uma tag H1, e assim por
diante.
A opção Estilo CSS exibe o estilo de classe que é aplicado atualmente no texto
selecionado. Se nenhum estilo tiver sido aplicado à seleção, o menu pop-up mostrará
Nenhum estilo CSS. Se v ários estilos tiverem sido aplicados à seleção, o menu pop-up
ficará em branco.
Utilize o menu pop-up Estilo CSS para seguir qualquer um dos procedimentos abaixo:
¡ Selecione o estilo de classe a ser aplicado à seleção.

¡ Selecione Nenhum estilo CSS para remover o estilo CSS aplicado no momento.
¡ Selecione Novo estilo CSS para abrir a caixa de diálogo Novo estilo CSS e criar um
novo estilo que será aplicado automaticamente ao texto selecionado. Se nenhum
texto estiver selecionado, o estilo será aplicado à tag de parágrafo ou bloco na qual
está o ponto de inserção.
¡ Selecione Editar estilo CSS para abrir a caixa de di álogo Editar a folha de estilos e
editar um estilo CSS. Para obter mais informações, veja Edição de um estilo CSS.
¡ Selecione Anexar a folha de estilos para anexar uma folha de estilos CSS ao
documento. Para obter mais informações, veja Cria ção e vinculação de uma folha de
estilos CSS externa.
A opção Negrito aplica ou ao texto selecionado, de acordo com a

preferência de estilo definida na categoria Geral da caixa de diálogo Preferências.
A opção Itálico aplica ou ao texto selecionado, de acordo com a

Para obter informações sobre a defini ção das preferências gerais, veja Definição das
preferências gerais.
Para definir opções de formataçã o HTML:
1. Abra o inspetor de propriedades (Janela > Propriedades) caso não esteja aberto.
2. Selecione o texto a ser formatado.
3. No inspetor de propriedades, se Modo HTML ainda não estiver selecionado, clique no
botão Alternar modo CSS/HTML para alternar para o Modo HTML.
4. Defina as opções a serem aplicadas ao texto selecionado.
A opção Formatar define o estilo de parágrafo do texto selecionado. A opção Parágrafo

aplica o formato padrão de uma tag , Cabeçalho 1 adiciona uma tag H1, e assim por
diante.
Combinaçã o de fontes aplica a combinação de fontes selecionada ao texto. Utilize o

menu pop-up para escolher a combinação de fontes a ser aplicada, ou escolher Editar a
lista de fontes para criar ou editar uma combinação de fontes.
Tamanho aplica um tamanho de fonte específico (1 a 7) ou relativo (+ ou –1 a + ou –7)

ao tamanho da fonte básica (o padr ão é 3).
Cor do texto exibe o texto na cor selecionada. Selecione uma cor aceita pela Web,
clicando na caixa de cores, ou digite um valor hexadecimal (por exemplo: #FF0000) no
campo de texto adjacente.
A opção Negrito aplica ou ao texto selecionado, de acordo com a

A opção Itálico aplica ou ao texto selecionado, de acordo com a preferência de
estilo definida na categoria Geral da caixa de diálogo Preferências.
Para obter informações sobre a defini ção das preferências gerais, veja Definição das
preferências gerais.
Alinhamentos À esquerda, No centro e À direita aplicam o respectivo alinhamento.
A opção Link permite criar um link de hipertexto do texto selecionado. Clique no ícone de
pasta para procurar uma página no site, digite a URL, arrastar o ícone do indicador de
arquivos até um arquivo no painel do site, ou arrastar um arquivo do painel do site para a
caixa.
A opção Destino permite especificar a moldura ou a janela na qual o documento

vinculado será carregado:
¡ _blank carrega o arquivo vinculado em uma janela do navegador nova e sem nome.
¡ _parent carrega o arquivo vinculado em um conjunto-pai de molduras ou em uma
janela da moldura que contém o link. Se a moldura que contém o link não estiver
aninhada, o arquivo vinculado será carregado na janela inteira do navegador.
¡ _self carrega o arquivo vinculado na mesma moldura ou janela como um link. Esse
destino é impl ícito, por isso, geralmente, não é preciso especificá-lo.
¡ _top carrega o arquivo vinculado em uma janela inteira do navegador, removendo
todas as molduras.
A opção Lista não-ordenada cria uma lista com marcadores do texto selecionado.
Se nenhum texto for selecionado, será iniciada uma nova lista com marcadores.
A opção Lista ordenada cria uma lista numerada do texto selecionado. Se nenhum
texto for selecionado, será iniciada uma nova lista numerada.
Item da lista abre a caixa de di álogo Propriedades da lista. Veja Definição de

opções de propriedade de lista.
Recuo e Remover o recuo recua ou remove o recuo de um texto selecionado,

aplicando ou removendo a tag blockquote. Em uma lista, o recuo cria uma lista
aninhada e a remoção do recuo desaninha a lista.
Formatação de parágrafos
Definição e altera ção de fontes e estilos
Definição das preferências gerais
Definiçã o de opções de propriedade de lista
A caixa de diálogo Propriedades da lista é utilizada para definir a aparência de uma lista inteira
ou de determinado item da lista. É possível definir o estilo de número, redefinir a contagem ou
definir opçõ es de estilo com marcação para itens separados da lista ou para a lista inteira.
Para obter informações sobre a utilização de folhas de estilo em cascata para definir
propriedades da lista, veja Definição de propriedades de lista do estilo CSS.
Para definir propriedades da lista para uma lista inteira:
1. Na janela do documento, criar pelo menos um item de lista. O novo estilo será aplicado
automaticamente a itens adicionais que foram adicionados à lista.
2. Como o ponto de inserção no texto do item da lista, escolha Texto > Lista > Propriedades
para abrir a caixa de di álogo Listar as propriedades.
3. Na caixa de diálogo que é exibida, defina as opções que definirão a lista:
A opção Tipo de lista especifica propriedades da lista e a opção Listar o item especifica
um item individual em uma lista. Utilize o menu pop-up para selecionar uma lista com
marcadores, numerada, de diretórios ou de menus. Dependendo do Tipo de lista
selecionado, diferentes opções são exibidas na caixa de di álogo.
Estilo determina o estilo dos números ou marcadores utilizados em uma lista ordenada
ou não-ordenada. Todos os itens na lista terão esse estilo, a menos que para eles seja
especificado um novo estilo na lista.
A opção Iniciar a contagem define o valor do primeiro item em uma lista numerada.
4. Clique em OK para definir as opções e feche a caixa de di álogo.
Para definir propriedades da lista par um item da lista:
1. Na janela Documento, colocar um ponto de inserção no texto de um item da lista a ser

afetado.
2. Escolha Texto > Lista> Propriedades.
3. Na caixa de diálogo que é exibida, em Listar o item, defina as opções que definirão o item
da lista:
A opção Novo estilo permite especificar um estilo para o item da lista selecionado. Os
estilos do menu pop-up Novo estilo estão relacionados ao tipo de lista exibido no menu
pop-up Tipo de lista. Por exemplo: se o menu pop-up Listar o item exibir Lista com
marcadores, apenas as op ções com marcadores estarão disponíveis no menu pop-up
Novo estilo.
A opção Redefinir a contagem para permite definir um número específico do qual

entradas de item de lista s ão numeradas.
4. Clique em OK para definir as opções e fechar a caixa de diálogo.
Definiçã o das preferências de estilos CSS
As preferências de estilos CSS controlam a maneira pela qual o Dreamweaver grava o

código que define os estilos CSS. Esses estilos podem ser gravados de forma abreviada, com a
qual algumas pessoas acham mais fácil trabalhar. No entanto, algumas versões mais antigas
dos navegadores não interpretam corretamente o formato abreviado.
Para exibir preferências de formato de folhas de estilos CSS
1. Escolha Editar > Preferências e selecione Estilos CSS na lista Categoria.

2. Defina as opções de Estilo CSS a serem aplicadas:
A opção Utilizar o formato abreviado para permite selecionar os atributos de estilo

CSS que o Dreamweaver grava em formato abreviado.
Ao editar os estilos CSS, utilizar o formato abreviado controla se o Dreamweaver

regravará os estilos existentes no formato abreviado.
Escolha a opção Se o formato original for abreviado, para fazer com que o Dreamweaver
mantenha todos os estilos originais.
Escolha De acordo com as definições acima, para que o Dreamweaver reescreva os estilos
em formato abreviado, segundo os atributos selecionados em Utilizar o formato abreviado
de.
3. Clique em OK.
Definiçã o de propriedades do tipo CSS
Utilize a categoria Tipo da caixa de diálogo Defini ção de estilo CSS, para definir as
configurações de fonte e tipo para um estilo CSS.
Veja também Sobre CSSs (Cascading Style Sheets) e Edição de um estilo CSS.
Para definir definições de tipo para um estilo CSS:
1. Abra o painel Estilos CSS (Shift + F11), caso ele ainda não esteja aberto.
2. Abra a caixa de di álogo Definição de estilos CSS, seguindo um dos procedimentos abaixo:
¡ Adicionar um novo estilo. Para obter informa ções detalhadas, veja Cria ção de um
novo estilo CSS.
¡ Clique duas vezes em um estilo existente para abri-lo para edição.
3. Na caixa de diálogo Definição de estilo CSS, escolher Tipo e, em seguida, definir os
atributos de estilo desejados.
Manter os atributos a seguir em branco se eles não forem importantes para o estilo:
Fonte define a família de fontes (ou séries de famílias) para o estilo. Os navegadores
exibem o texto com a primeira fonte da série que estiver instalada no sistema do usuário.
Para obter compatibilidade com o Internet Explorer 3.0, liste primeiro as fontes do
Windows. O atributo de fonte recebe suporte de ambos os navegadores.
Tamanho define o tamanho do texto. Pode-se escolher um tamanho específico,

selecionando o número e a unidade de medida, ou optar por um tamanho relativo. A
escolha de pixels como unidade de medida é conveniente para evitar que os navegadores
distorçam o texto. O atributo de tamanho recebe suporte de ambos os navegadores.
Estilo especifica Normal, Itálico ou Oblíquo para o estilo de fonte. A definição padrão é
Normal. O atributo de estilo recebe suporte de ambos os navegadores.
Altura da linha define a altura da linha na qual o texto será colocado. Esta definição é
tradicionalmente chamada de entrelinhamento. Selecione Normal, para que a altura da
linha para o tamanho da fonte seja calculada automaticamente, ou digite um valor exato
e selecione uma unidade de medida. O atributo de altura da linha recebe suporte de
ambos os navegadores.
O atributo Decoraçã o adorna o texto com sublinhado, linha sobreposta ou riscado, ou faz
o texto piscar. A defini ção padrão para texto normal é Nenhum. A defini ção padrão para
os links é Sublinhado. Quando a definição do link for Nenhum, o sublinhado dos links
poderá ser removido através da defini ção de uma classe especial. O atributo de decoração
recebe suporte de ambos os navegadores.
Peso aplica uma quantidade específica ou relativa de negrito à fonte. Normal equivale a
400; negrito equivale a 700. O atributo de peso recebe suporte de ambos os
navegadores.
O atributo Variante define a variante de letras minúsculas no texto. O Dreamweaver não

exibirá esse atributo na janela do documento. O atributo de variante conta com suporte
do Internet Explorer, mas não do Navigator.
A opção Coincidir maiúsc./minúsc. coloca em mai úscula a primeira letra de cada
palavra na sele ção ou define todo o texto em maiúscula ou minúscula. O atributo de

coincidência de maiúscula/minúscula recebe suporte de ambos os navegadores.
O atributo Cor define a cor do texto. O atributo de cor recebe suporte de ambos os
navegadores.
4. Ao concluir a definição dessa opção, selecione uma outra categoria do CSS do lado
esquerdo do painel para definir atributos de estilo adicionais ou clique em OK.
Definiçã o de propriedades de fundo do estilo CSS
Utilize a categoria Fundo da caixa de diálogo Definição de estilos CSS para definir as
configurações do fundo para um estilo CSS. É possível aplicar propriedades de fundo a qualquer
elemento em uma página da Web. Por exemplo: crie um estilo que adicione uma cor de fundo
ou uma imagem de fundo a qualquer elemento de página. Por exemplo: atrás de texto, de uma
tabela, da página, e assim por diante. Também é possível definir o posicionamento de uma
imagem de fundo. Veja também Sobre CSSs (Cascading Style Sheets) e Edição de um estilo
CSS.
Para estabelecer definições de fundo:
1. Abra o painel Estilos CSS (Shift+F11), caso ele ainda não esteja aberto.
¡ Adicione um novo estilo. Para obter informações detalhadas, veja Cria ção de um
novo estilo CSS.
3. Na caixa de diálogo Definição de estilo CSS, escolha Fundo e, em seguida, defina os
Mantenha os atributos a seguir em branco se eles não forem importantes para o estilo:
Cor de fundo define a cor de fundo do elemento. O atributo de cor do fundo recebe
suporte de ambos os navegadores.
Imagem de fundo define a imagem de fundo para o elemento. O atributo de imagem de

fundo recebe suporte de ambos os navegadores.
O atributo Repetir determina se e como a imagem de fundo será repetida. O atributo de

repetição recebe suporte de ambos os navegadores.
Sem repeti ção exibe a imagem uma vez no in ício do elemento.
Repetir coloca lado a lado a imagem horizontal e verticalmente atrás do elemento.
Repetir x e Repetir y exibe uma faixa de imagens verticais e horizontais, respectivamente.

As imagens serão recortadas de modo a caber nos limites do elemento.
Nota: Utilize a propriedade Repetir para redefinir a tag body e definir uma imagem de
fundo que não é disposta lado a lado nem se repete.
Anexo determina se a imagem de fundo está fixa na sua posição original ou rola junto
com o conteúdo. Observar que alguns navegadores podem tratar a opção Fixa como
Rolar. Essa opção conta com suporte do Internet Explorer, mas n ão do Netscape
Navigator.
Posiçã o horizontal e Posiçã o vertical especificam a posição inicial da imagem de fundo

em rela ção ao elemento. Esses atributos pode ser utilizados para alinhar uma imagem de
fundo em rela ção ao centro da página, vertical e horizontalmente. Se a propriedade da
anexação for Fixa, esta será relativa à janela do documento e não ao elemento. Esse
atributo conta com suporte do Internet Explorer, mas não do Netscape Navigator.
4. Ao concluir a definição dessas opções, selecione uma outra categoria do CSS do lado
Definiçã o de propriedades de bloco do estilo CSS
Utilize a categoria Bloco da caixa de diálogo Definição de estilos CSS para definir opções de
espaçamento e alinhamento para tags e atributos.
Para estabelecer definições de bloco:
novo estilo CSS.
3. Na caixa de diálogo Definição de estilos CSS, escolha Bloco e, em seguida, defina os
O atributo Espaçamento entre as palavras define o espaçamento entre as palavras.

Para definir um valor específico, no menu pop-up, escolha Valor e, em seguida, digite um
valor num érico. No segundo menu pop-up, escolha uma unidade de medida (por
exemplo: escolher pixel, pontos, etc.).
Nota: Podem ser especificados valores negativos, mas a exibi ção dependerá do
navegador. O Dreamweaver não exibirá esse atributo na janela do documento.
O atributo Espaçamento entre as letras aumenta ou diminui o espaço entre letras ou

caracteres. Para diminuir o espaço entre caracteres, especificar um valor negativo, como
(-4). As defini ções de espaçamento entre as letras anulam as definições de texto
justificado. O atributo Espaçamento entre as letras conta com suporte do Internet
Explorer 4 e vers ões posteriores, além do Netscape Navigator 6.
O atributo Alinhamento vertical especifica o alinhamento vertical do elemento ao qual é

aplicado. O Dreamweaver exibirá esse atributo na janela do documento apenas quando
ele for aplicado à tag <img>.
O atributo Alinhamento do texto define como o texto é alinhado no elemento. O

atributo Alinhamento do texto conta com suporte de ambos os navegadores.
O atributo Recuo do texto especifica a distância do recuo da primeira linha de texto.

Pode ser utilizado um valor negativo para criar uma remoção de recuo, mas a exibição
dependerá do navegador. O Dreamweaver exibirá esse atributo na janela do documento
apenas quando a tag for aplicada a um bloco de elementos. O atributo Recuo do texto
conta com suporte de ambos os navegadores.
O atributo Espaço em branco determina como será tratado o espaço em branco no

elemento. Escolha uma das três opções: normal reduz o espaço em branco; pre trata-o
como se o texto estivesse entre tags pre (isto é, todo o espaço em branco, incluindo
espaços, tabulações e retornos, será mantido); sem quebra autom. de linha especifica
que haverá quebra de texto apenas quando for encontrada uma tag br. O Dreamweaver
não exibirá esse atributo na janela do documento. O atributo Espaço em branco conta
com suporte do Netscape Navigator e do Internet Explorer 5.5.
O atributo Exibir especifica se um elemento é exibido e, em caso afirmativo, como ele é

exibido. Nenhum desativa a exibição de um elemento ao qual ele é designado.
Definiçã o de propriedades de caixa do estilo CSS
Utilize a categoria Caixa, na caixa de di álogo Definição de estilos CSS, para definir as opções de
tags e atributos que controlam a disposi ção de elementos na página.
É possível aplicar definições a lados individuais de um elemento ao aplicar definições de

preenchimento e margem, ou utilizar a defini ção Idêntico para todas para aplicar a mesma
definição a todos os lados de um elemento.
Para definir como elementos são dispostos na página:
novo estilo CSS.
3. Na caixa de diálogo Definição de estilos CSS, escolha Caixa e, em seguida, definir os
Os atributos Largura e Altura determinam o tamanho do elemento.
O atributo Flutuar define o lado em que outros elementos flutuarão em torno de um

elemento, como texto, camadas, tabelas e etc.. Normalmente, os outros elementos se
ajustarão à volta do elemento flutuante. O atributo Flutuar conta com suporte de ambos
os navegadores.
Limpar define os lados que não aceitam camadas. Se aparecer uma camada no lado
limpo, o elemento com a definição de limpeza ser á movido para baixo dela. O atributo
Limpar conta com suporte de ambos os navegadores.
O atributo Preenchimento especifica a quantidade de espaço entre o conteúdo de um

elemento e a sua borda (ou margem, caso não haja borda). Desmarcar a opção Idêntico
para todas para definir o preenchimento para lados individuais do elemento.
O atributo Idêntico para todas define os mesmos atributos de preenchimento para as

partes superior, direita, inferior e esquerda do elemento ao qual ele é aplicado.
O atributo Margem especifica a quantidade de espaço entre a borda de um elemento (ou

o preenchimento, caso não haja borda) e qualquer outro elemento. O Dreamweaver
exibirá esse atributo na janela do documento apenas quando a tag for aplicada em um
bloco de elementos (parágrafos, cabeçalhos, listas, etc.). Desmarcar Idêntico para todas
para definir a margem para lados individuais do elemento.
O atributo Idêntico para todas define os mesmos atributos de margem para as partes
superior, direita, inferior e esquerda do elemento ao qual ele é aplicado.
A opçã o Definiçã o de propriedades de borda do estilo CSS
Utilize a categoria Borda da caixa de diálogo Defini ção de estilos CSS para definir opções, como
largura, cor e estilo, para as bordas em torno de elementos.
Para definir o estilo de borda para elementos:
novo estilo CSS.
3. Na caixa de diálogo Definição de estilos CSS, escolha Borda e, em seguida, defina os
O atributo Estilo define a aparência do estilo da borda. A forma como o estilo é exibido
depende do navegador. O Dreamweaver processa todos os estilos como sólidos na janela
do documento. O atributo de estilo recebe suporte de ambos os navegadores. Desmarcar
Idêntico para todas para definir o estilo de borda para lados individuais do elemento.
O atributo Idêntico para todas define os mesmos atributos de estilo de borda para as
partes superior, direita, inferior e esquerda do elemento ao qual ele é aplicado.
Largura define o tamanho da borda do elemento. O atributo de largura conta com

suporte de ambos os navegadores. Desmarcar Idêntico para todas para definir a largura
de borda para lados individuais do elemento.
O atributo Idêntico para todas define a mesma largura de borda para as partes
superior, direita, inferior e esquerda do elemento ao qual ele é aplicado.
Cor define a cor da borda. A cor de cada lado pode ser definida individualmente, mas a
exibição depender á do navegador. Desmarcar Idêntico para todas para definir a cor de
borda para lados individuais do elemento.
O atributo Idêntico para todas define a mesma cor de borda para as partes superior,
direita, inferior e esquerda do elemento ao qual ele é aplicado.
Definiçã o de propriedades de lista do estilo CSS
A categoria Lista da caixa de di álogo Definição de estilos CSS define opções de lista, como
tamanho e tipo de marcador, para tags da lista.
Para definir um estilo de lista:
novo estilo CSS.
3. Na caixa de diálogo Definição de estilos CSS, escolha Lista e, em seguida, definir os
O atributo Tipo define a aparência dos marcadores ou números. O atributo de tipo não
recebe suporte de ambos os navegadores.
Imagem de marcador permite especificar uma imagem personalizada para os

marcadores. Clique em Procurar para procurar uma imagem, ou digite o caminho da
imagem.
O atributo Posiçã o define se o texto do item da lista possui quebras automáticas e recuos
(fora) ou se o texto possui quebras automáticas para a margem esquerda (dentro).
4. Ao concluir a definição dessas opções, selecione uma outra categoria do CSS do lado
Definiçã o de propriedades de posicionamento de estilos CSS
Os atributos de estilo de posicionamento convertem a tag ou bloco de texto selecionado em

uma nova camada, utilizando a tag padr ão para definir camadas conforme a defini ção nas
Preferências de camada (veja Definição das preferências de camadas).
Para definir os atributos de posicionamento de camadas:
novo estilo CSS.
3. Na caixa de diálogo Definição de estilos CSS, escolha Posicionamento e, em seguida,
definir os atributos de estilo desejados.
Tipo determina como o navegador deve posicionar a camada, como segue:
O atributoAbsoluto posiciona a camada utilizando as coordenadas digitadas nas caixas

Posição em relação ao canto superior esquerdo da página.
O atributoRelativo posiciona a camada utilizando as coordenadas digitadas nas caixas

Posição em relação à posição do objeto no fluxo de texto do documento. Esta opção não
será exibida na janela do documento.
O atributoEstático posiciona a camada em sua localização no fluxo de texto.
Visibilidade determina a condição inicial de exibição da camada. Se não for especificada

uma propriedade de visibilidade, a maioria dos navegadores herdará o valor da camada-
mãe como padrão. Selecione uma das op ções de visibilidade a seguir:
A opçãoHerdar herda a propriedade de visibilidade da camada-mãe. Se a camada não

tiver mãe, ela estará visível.
A opçãoVis ível exibe o conteúdo da camada, independentemente do valor da camada-

mãe.
A opçãoOculto oculta o conteúdo da camada, independentemente do valor da camada-

mãe.
Índice Z determina a ordem de empilhamento da camada. As camadas com números

mais elevados aparecem acima daquelas com números menores. Os valores podem ser
positivos ou negativos. ( É mais fácil alterar a ordem de empilhamento das camadas
utilizando o painel Camadas; veja Alteração da ordem de empilhamento de camadas.
Estouro (apenas nas camadas CSS) determina o que ocorrerá se o conteúdo exceder o
tamanho da camada. Essas propriedades controlam como a expansão será tratada, como
segue:
A propriedadeVis ívelaumenta o tamanho da camada para que todo o seu conteúdo fique
visível. A camada se expandir á para baixo e para a direita.
A propriedadeOculto mantém o tamanho da camada e corta o conteúdo que não caiba na

mesma. Não s ão fornecidas barras de rolagem.
A propriedadePaginaçã o adiciona barras de rolagem à camada, independentemente de o

conteúdo ser ou não maior do que o tamanho da camada. O fornecimento específico das
barras de rolagem evita qualquer confusão resultante do aparecimento e desaparecimento
das mesmas em um ambiente din âmico. Essa opção n ão será exibida na janela do
documento e funciona apenas nos navegadores que oferecem suporte a barras de

rolagem. Conta com suporte do Internet Explorer e do Netscape Navigator 6.
A propriedadeAutom. faz com que sejam exibidas barras de rolagem apenas quando o
conteúdo da camada excede os seus limites. Esta opção não será exibida na janela do
documento.
Posiçã o especifica a localização e o tamanho da camada. A maneira como o navegador

interpreta a localização depende da definição em Tipo. Estes valores serão anulados se o
conteúdo da camada exceder o tamanho especificado.
As unidades padrão para a localização e tamanho são pixels. Para as camadas CSS,
também é possível especificar estas unidades: pc (paicas), pt (pontos), pol (polegadas),
mm (milímetros), cm (centímetros), (espaços 'm'), (espaços 'x') ou % (percentagem do
valor da camada-mãe). As abreviaturas devem se seguir ao valor, sem um espaço: por
exemplo: 3mm.
Corte define a parte da camada que estará visível. Se for especificada uma região de
corte, esta poder á ser acessada com uma linguagem de script, como JavaScript, e as
propriedades manipuladas para criar efeitos especiais, como wipes. Esses wipes podem
ser configurados por meio de linhas de tempo e o comportamento Alterar a propriedade.
Definiçã o de propriedades de extens ões do estilo CSS
Os atributos de estilo de extensões incluem opções de filtros, quebras de p ágina e cursor, a

maioria das quais não conta com suporte em nenhum navegador ou conta com suporte apenas
no Internet Explorer 4.0 e versões posteriores.
Para especificar atributos de extens ão:
novo estilo CSS.
3. Na caixa de diálogo Definição de estilos CSS, escolha Extensões e, em seguida, defina os
Quebra de página força uma quebra de página ao imprimir antes ou depois do objeto
controlado pelo estilo. Escolha a opção a ser definida no menu pop-up. Essa opção não
conta com o suporte dos navegadores 4.0, mas as versões posteriores poderão aceitá-la.
Cursor altera a imagem do ponteiro quando ele for colocado sobre o objeto controlado
pelo estilo. Escolha a opção a ser definida no menu pop-up. Este atributo conta com
suporte do Internet Explorer 4.0 e versões posteriores, e do Netscape Navigator 6.
Filtro aplica efeitos especiais ao objeto controlado pelo estilo, incluindo manchas e
inversão. Escolha um efeito no menu pop-up.
Opções de ediçã o de Definiçã o de folhas de estilo CSS
Utilize a caixa de diálogo Editar a folha de estilos para fazer edições em uma folha de estilos
CSS selecionada.
Veja Edi ção de uma folha de estilos CSS para obter informações sobre a abertura da caixa de
diálogo Editar a folha de estilos.
Para editar uma folha de estilos CSS:
1. Na caixa de diálogo Editar a folha de estilos, selecione o nome da folha de estilos externa
a ser editada e, em seguida, clique em Editar.
O nome da folha de estilos selecionada e os estilos definidos são exibidos na caixa de

diálogo.
2. Na caixa de diálogo, selecione o estilo a ser editado e clique em Editar.
A caixa de diálogo Definição de estilos CSS é exibida.
3. Selecione opções na caixa de diálogo Definição de estilos CSS para editar o estilo.
4. Ao concluir a atualização dos estilos da folha de estilos, clique em Salvar.
Como inserir imagens
As imagens costumam ser utilizadas para adicionar interfaces gráficas (como botões de
navegação), apelo visual (por exemplo: fotografias) ou elementos de design interativos, como
imagens cambiáveis ou um mapa de imagens.
Em Macromedia Dreamweaver MX, é possível trabalhar na visualização do projeto ou do c ódigo

para inserir imagens em um documento. Ao adicionar imagens em um documento
Dreamweaver, é possível definir ou modificar propriedades da imagem e exibir as altera ções
diretamente na janela do documento.
Para configurar um fluxo de trabalho de cria ção da Web eficiente, é possível selecionar uma
preferência do editor de imagens e iniciá-la automaticamente para editar imagens durante o
trabalho no Dreamweaver.
Este capítulo contém as seções a seguir:
l Sobre uma imagem

l Como inserir uma imagem
l Redimensionamento de uma imagem
l Cria ção de uma imagem cambi ável
l Utilização de um editor de imagens externo
l Aplicação de um comportamento a imagens
l Referência
Sobre uma imagem
Existem muitos tipos diferentes de formatos de arquivos gráficos, mas três formatos são
geralmente utilizados nas páginas da Web – GIF, JPEG e PNG. Atualmente, os formatos de
arquivo GIF e JPEG são os que apresentam melhor suporte e podem ser exibidos na maioria dos
navegadores.
Os arquivos PNG adaptam-se melhor a quase todos os tipos de gr áfico da Web devido a sua
flexibilidade e pequeno tamanho de arquivo; entretanto, a exibição de imagens PNG conta com
suporte parcial apenas em Microsoft Internet Explorer (4.0 e navegadores posteriores) e em
Netscape Navigator (4.04 e navegadores posteriores). Portanto, a não ser que seu projeto se
destine a um público-alvo específico que utiliza um navegador com suporte para o formato PNG,
utilizar GIFs ou JPEGs para atingir um público maior.
Os arquivos GIF (Graphic Interchange Format) utilizam um máximo de 256 cores, e são
mais apropriados para exibir imagens em tons descontínuos ou aquelas que contêm grandes
superfícies de cores sólidas, como barras de navegação, botões, ícones, logotipos ou outras
imagens com matizes e cores uniformes, por exemplo).
O formato de arquivo JPEG (Joint Photographic Experts Group) é a opção mais avan çada
para imagens fotográficas ou de tons contínuos, porque os arquivos JPEG podem conter milhões
de cores. À medida que a qualidade do arquivo JPEG aumenta, também aumentam o tamanho
do arquivo e o tempo de download. Geralmente é possível equilibrar a qualidade da imagem e o
tamanho do arquivo, compactando um arquivo JPEG.
O formato de arquivo PNG (Portable Network Group) é um substituto livre de patentes ao

GIF, que inclui suporte para as imagens que tiverem as cores indexadas, escala de cinza e true-
color, além de suporte ao canal alfa de transparência. O formato PNG é o formato de arquivo
nativo de Macromedia Fireworks MX. Os arquivos PNG mantêm todas as informações sobre
camadas, vetores, cores e efeitos originais (por exemplo: aplicação de sombra) e, a qualquer
momento, todos os elementos podem ser editados. Os arquivos devem ter extensão .png, para
serem reconhecidos como PNG por Macromedia Dreamweaver MX.
Nota: O suporte a PNG é inconsistente nos navegadores; portanto, ao trabalhar com arquivos
PNG, também é necessário exportá-los como GIFs ou JPEGs para garantir versões prontas para
Web desses arquivos.
Como inserir uma imagem
Ao inserir uma imagem em um documento de Dreamweaver, o programa gerará

automaticamente uma referência desse arquivo no código-fonte HTML. Para garantir que essa
referência esteja correta, o arquivo de imagem deverá estar no site. Caso não esteja no site
atual, o Dreamweaver perguntará se o arquivo deve ser copiado para o site.
Também é possível adicionar imagens como conteúdo dinâmico. Para obter informações, veja
Como tornar dinâmicas as imagens.
Para inserir uma imagem:
1. Posicione o ponto de inserção onde a imagem deverá ser exibida na janela do documento
e, depois, seguir um dos procedimentos abaixo:
¡ Na categoria Comuns da barra Inserir, clique no ícone Imagem.
¡ Na categoria Comuns da barra Inserir, arraste o ícone Imagem para a janela do

documento (ou para a janela de visualização do c ódigo se estiver trabalhando no
código).
¡ Escolha Inserir > Imagem.
¡ Arraste uma imagem do painel Propriedades (Janela > Propriedades) até a

localização desejada na janela do documento; em seguida, ir para a etapa 3.
¡ Arraste uma imagem do painel Site até a localização desejada na janela do
documento; em seguida, ir para a etapa 3.
¡ Arraste uma imagem da área de trabalho até a localização na janela do documento;
em seguida, ir para a etapa 3.
2. Na caixa de diálogo exibida, seguir um dos procedimentos abaixo:
¡ Escolha Sistema de arquivos para escolher um arquivo gráfico.
¡ Escolha Fonte de dados para escolher uma origem da imagem dinâmica.

3. Procurar para escolher a imagem ou origem do conteúdo a ser inserido.
Se você estiver trabalhando em um documento que não foi salvo, o Dreamweaver irá
gerar uma referência file:// para esse arquivo de imagem. Ao salvar o documento em
algum lugar do site, Dreamweaver converterá a refer ência em um caminho relativo ao
documento.
4. No inspetor de propriedades (Janela > Propriedades), definir propriedades da imagem.
Para obter mais informações, veja Definição das propriedades da imagem.
Definição de uma imagem de fundo ou de uma cor de fundo para a página
Como utilizar imagens espaçadoras
Como inserir um alocador de espaço de imagem
Um alocador de espaço de imagem é um gráfico utilizado até que a arte-final esteja pronta para
ser adicionada a uma página da Web.
É possível definir determinados atributos do alocador de espaço. É possível, também, definir o

tamanho e a cor do alocador de espaço, bem como fornecê-la com um identificador de texto. A
cor de um alocador de espaço de imagem, os atributos de tamanho e identificador são exibidos
quando o alocador de espaço de imagem é exibido na janela do documento de Dreamweaver.
Quando exibido em uma janela do navegador, o texto do identificador e tamanho não é exibido.
Para inserir um alocador de espa ço de imagem:
1. Na janela do documento, colocar o ponto de inserção onde deseja inserir o gr áfico do

alocador de espaço.
¡ Na barra Inserir, selecione Comuns e, em seguida, clique no ícone Alocador de
espaço de imagem.
¡ Na barra Inserir, selecione Comuns e, em seguida, arraste no ícone Alocador de

espaço de imagem para a janela do documento.
¡ Escolha Inserir > Alocador de espaço de imagem.
A caixa de diálogo Alocador de espaço de imagem é exibida.
3. Na caixa de diálogo, selecione opções para o alocador de espaço de imagem.
Para obter informações detalhadas sobre a definição dessas opções, veja Preenchimento
da caixa de di álogo Alocador de espaço de imagem.
4. Clique em OK.
Substituição de um alocador de espaço de imagem
Redimensionamento de uma imagem
Definição das propriedades do alocador de espaço de imagem
Atualização de um alocador de espaço de imagem do Dreamweaver no Fireworks.
Substituiçã o de um alocador de espaço de imagem
Um alocador de espaço de imagem não é uma imagem gr áfica exibida em um navegador. Antes
da publicação no seu site, é necessário substituir quaisquer alocadores de espaços de imagens
que tiver adicionado com arquivos gr áficos amigáveis para Web, como GIFs ou JPEGs.
Com Fireworks MX, será possível criar uma nova imagem no alocador de espaço de imagem de
Dreamweaver. A nova imagem está definida para o mesmo tamanho que a imagem do alocador
de espaço. É possível editar a imagem e depois recolocá-la no Dreamweaver. Para obter
informações sobre a criação de uma imagem de substituição em Fireworks MX, veja Atualização
de um alocador de espaço de imagem do Dreamweaver no Fireworks.
Para atualizar a origem da imagem:
1. Na janela do documento, seguir um dos procedimentos abaixo:

¡ Clique duas vezes no alocador de espaço de imagem.
¡ Clique no alocador de espaço de imagem para selecioná-lo e, em seguida, no

inspetor de propriedades (Janela > Propriedades), depois, clique no ícone
correspondente à pasta pr óximo ao campo Orig.
A caixa de diálogo Fonte da imagem é exibida.
2. Na caixa de diálogo, navegar para a imagem que substituirá o alocador de espaço de

imagem.
3. Clique em OK.
A imagem selecionada é exibida no documento.
Alinhamento de uma imagem
Utilize o inspetor de propriedades para definir o alinhamento de uma imagem em relação a

outros elementos na mesma linha ou parágrafo.
Nota: HTML não fornece um modo de colocar texto ao redor dos limites da imagem, como é
possível fazê-lo com alguns aplicativos de processamento de texto.
É possível alinhar uma imagem a um texto, a outra imagem, a um plug-in ou a outros

elementos na mesma linha. Também é possível utilizar os botões de alinhamento (à esquerda, à
direita e no centro) para definir o alinhamento horizontal de uma imagem.
A opção Padrão geralmente especifica um alinhamento da linha de base. (o padrão pode ser
diferente, dependendo do navegador do visitante do site).
As opções Linha de base e Pela base alinham a parte inferior do objeto selecionado à linha de
base do texto (ou de outro elemento do mesmo parágrafo).
A opção Pelo topo alinha a parte superior de uma imagem à parte superior do item mais alto
(imagem ou texto) na linha atual.
A opção No meio alinha a parte central da imagem à linha de base da linha atual.
A opção Alto do texto alinha a parte superior da imagem à parte superior do caractere mais
alto da linha de texto.
A opção No meio absoluto alinha a parte central da imagem à parte central do texto da linha
atual.
A opção O mais abaixo alinha a parte inferior da imagem à parte inferior da linha de texto
(que inclui descendentes, como na letra g).
A opção À esquerda coloca a imagem selecionada na margem esquerda, quebrando

automaticamente as linhas do texto em volta dele à direita. Se o texto alinhado à esquerda-
preceder o objeto na linha, ele geralmente forçará os objetos alinhados à esquerda a passarem
para a próxima linha.
A opção À direita coloca o objeto na margem direita, quebrando automaticamente as linhas do

texto em volta dele à esquerda. Se o texto alinhado à direita preceder o objeto na linha, ele
geralmente forçará os objetos alinhados à direita a passarem para a próxima linha.
Redimensionamento de uma imagem
É possível redimensionar visualmente elementos, como as imagens, plug-ins, filmes

Macromedia Shockwave ou Flash, applets e controles ActiveX na visualização do projeto na
janela do documento de Dreamweaver. O redimensionamento visual ajuda a determinar como
um elemento afetará o layout em diferentes dimensões.
O redimensionamento altera os atributos width e height do elemento para seus tamanhos

originais. Os campos L e A, no inspetor de propriedades, exibem a largura e altura do elemento
durante o redimensionamento. O tamanho do arquivo do elemento não é alterado.
Os elementos dos mapas de bits, como as imagens GIF, JPEG e PNG, podem tornar-se mal
definidos ou distorcidos, se os atributos width e height forem aumentados ou diminuídos.
Mantenha a tecla Shift pressionada durante o redimensionamento de um mapa de bits, para
manter as mesmas proporções. Contudo, recomendamos que esses elementos sejam
redimensionados visualmente no Dreamweaver apenas para determinar o layout. Após ter
especificado o tamanho da imagem, editar o arquivo em um aplicativo de edição de imagens. A
edição da imagem também poderá reduzir o seu respectivo tamanho de arquivo e, por
conseqüência, o tempo de download.
Para redimensionar um elemento:
1. Selecione o elemento (uma imagem ou filme Shockwave, por exemplo) na janela do

documento.
As alças de redimensionamento são exibidas na parte inferior, no lado direito do elemento

e no canto inferior direito. Se as alças de redimensionamento não forem exibidas, clique
fora do elemento a ser redimensionado e, em seguida, escolh ê-lo novamente ou clique na
tag apropriada no seletor de tags, para selecionar o elemento.
2. Redimensionar o elemento, seguindo um dos procedimentos abaixo:

¡ Para ajustar a largura do elemento, arraste a alça de seleção no lado direito.
¡ Para ajustar a altura do elemento, arraste a alça de seleção da parte inferior.

¡ Para ajustar a largura e altura do elemento simultaneamente, arraste a al ça de
seleção do canto.
¡ Pressione a tecla Shift e arraste a alça de seleção do canto para preservar as
proporções (entre largura e altura) do elemento ao ajustar as suas dimensões.
Os elementos podem ser redimensionados visualmente até um mínimo de 8 pixels por 8. Para
ajustar a largura e a altura de um elemento a um tamanho menor (por exemplo: 1 pixel por 1),
utilizar o inspetor de propriedades para digitar um valor numérico.
Para retornar um elemento redimensionado às suas escalas originais, no inspetor de

propriedades, excluir os valores nos campos L e A, ou clique no bot ão Redefinir o tamanho.
Cria ção de uma imagem cambiável
Uma imagem cambiável é aquela que, quando exibida em um navegador, é alterada quando o
ponteiro é movido sobre a mesma. Esse tipo de imagem consiste, de fato, em duas imagens: a
imagem primária (exibida quando a página for carregada pela primeira vez) e a imagem
secundária (que será exibida quando o cursor for deslizado sobre a imagem primária). As
imagens cambiáveis deverão ter o mesmo tamanho; caso contrário, o Dreamweaver
redimensionará automaticamente a segunda imagem para que coincida com as propriedades da
primeira.
É imposs ível veja o efeito de uma imagem cambiável na janela do documento de Dreamweaver.
Para veja o efeito cambi ável, pressionar F12 para visualizar a página em um navegador e,
depois, rolar o ponteiro sobre a imagem.
As imagens cambi áveis são automaticamente definidas para responder ao evento onMouseOver.
Para obter informações sobre a defini ção de uma imagem que responda a um evento diferente
(um clique do mouse, por exemplo) ou sobre a edição de uma imagem cambiável para que
exiba uma imagem diferente, veja Permutar a imagem.
A barra de navegação é uma forma mais complexa de imagem cambi ável. Para criar uma barra
de navegação, utilizar o comando Inserir > Imagens interativas > Barra de navegação; veja
Inser ção de uma barra de navegação.
Para criar uma imagem cambiável:
1. Na janela do documento, coloque o ponto de inserção no local onde deverá ser exibida a
imagem cambiável.
2. Inserir a imagem cambiável por meio de um destes métodos:
¡ Na barra Inserir, selecione Comuns e depois clicar no ícone Alocador de espaço de
imagem.
¡ Na barra Inserir, selecione Comuns e, em seguida, arraste o ícone de Imagem
cambiável para o local desejado na janela do documento.

¡ Escolha Inserir > Imagens interativas > Imagem cambi ável.
A caixa de diálogo Inserir imagem cambiável é exibida.
3. Na caixa de texto Nome da imagem, digite um nome para a imagem cambi ável.
4. Na caixa de texto Imagem original, clique em Procurar e selecione a imagem a ser exibida
quando a página carregar ou digitar o caminho do arquivo de imagem na caixa de texto.
5. Na caixa de texto Imagem cambiável, clique em Procurar e selecione a imagem a ser
exibida quando o ponteiro passar por cima da imagem original, ou digitar o caminho do
arquivo de imagem na caixa de texto.
6. Se desejar que as imagens sejam pré-carregadas no cache do navegador para não
ocorrerem atrasos quando o usuário passar o ponteiro sobre a imagem, selecione a opção
Pré-carregar as imagens.
7. No Texto alternativo, digite o texto para descrever a imagem para visualizadores com um
browser somente texto. (opcional)
8. Na caixa de texto Quando tiver clicado, v á para a URL, clique em Procurar e selecione o
arquivo ou digitar o caminho do arquivo a ser aberto quando um usuário clicar na imagem
cambiável.
Nota: Se n ão for definido um link para a imagem, Dreamweaver insere um link nulo (#)
no código-fonte HTML ao qual o comportamento de imagem cambiável estiver anexado.
Se o link nulo for removido, a imagem cambiável não funcionará.
9. Clique em OK para fechar a caixa de diálogo Inserir imagem cambiável.

10. Selecione Arquivo > Visualizar no navegador ou pressionar a tecla F12.
11. No navegador, passar o cursor sobre a imagem original.
A exibição pode alternar para a imagem cambi ável.
Utilizaçã o de um editor de imagens externo
No Dreamweaver, é possível abrir uma imagem selecionada em um editor de imagens externo.

Ao retornar para o Dreamweaver, após salvar o arquivo de imagem editado, as alterações feitas
na imagem estarão visíveis na janela do documento.
É possível utilizar Macromedia Fireworks como um editor de imagens externo. Fireworks 3 e

posteriores utilizam Design Notes para controle onde o arquivo PNG original será armazenado
no disco r ígido local. Ao abrir a imagem em Fireworks, ele permitirá a edi ção de PNG original.
Caso qualquer outro aplicativo tenha sido escolhido como editor de imagens externo e iniciado a
partir do Dreamweaver, o aplicativo abrir á a imagem selecionada. Utilize o editor de imagens
para modificar a imagem, salvar as altera ções e, em seguida, exibir a imagem atualizada no
Dreamweaver.
Se o arquivo de imagem tiver sido gerado de um arquivo PNG, será possível abrir manualmente
o arquivo original, fazer alterações e salvar a imagem alterada. Dreamweaver ainda atualizará a
imagem na janela do documento no retorno ao programa.
Caso a imagem não apareça atualizada ap ós voltar à janela de Dreamweaver, selecione a

imagem e, em seguida, clique no botão Atualizar, no inspetor de propriedades.
Definição das preferências do editor de imagens externo
Como iniciar um editor de imagens externo
Como iniciar um editor de imagens externo
Escolha Editar > Preferências > Tipos de arquivos/editores para definir um editor de imagens
externo para os tipos de imagens especificados. Para obter mais informações sobre como
escolher um editor de imagens, veja Definição das preferências do editor de imagens externo.
Para iniciar o editor de imagens externo, seguir um dos procedimentos abaixo:
l Clique duas vezes nas imagens a serem editadas.

l Clique com o botão direito (em Windows) e na imagem a ser editada e, depois, escolha
Editar com >Procurar e selecione um editor.
l Selecione a imagem a ser editada e clique em Editar a imagem, no Inspetor
de propriedades.
l Clique duas vezes no arquivo de imagem, no painel Site, para iniciar o editor de imagens
primário. Se não for especificado um editor de imagens, Dreamweaver iniciará o editor
padrão para o tipo de arquivo.
Nota: Quando uma imagem for aberta no painel Site, os recursos de integração de
Fireworks descritos acima não estarão em vigor e Fireworks não abrirá o arquivo PNG
original. Para poder utilizar os recursos de integração de Fireworks, abrir as imagens na
janela do documento.
Aplicação de um comportamento a imagens
É possível aplicar qualquer comportamento disponível a uma imagem ou ponto ativo de

imagem. Quando um comportamento for aplicado a um ponto ativo, Dreamweaver inserirá o
código-fonte HTML na tag area. Três comportamentos se aplicam especificamente às imagens:
Pré-carregar as imagens, Permutar a imagem e Restaurar as imagens permutadas.
A opção Pré-carregar as imagens carrega as imagens que n ão são exibidas na página

imediatamente (como aquelas que serão permutadas com as linhas de tempo,
comportamentos, camadas ou JavaScript) no cache do navegador. Esse processo evita os
atrasos causados pelo download quando as imagens tiverem de ser exibidas. Veja Pré-carregar
as imagens.
A opção Permutar a imagem permuta uma imagem por outra, alterando o atributo SRC da tag
img. Utilize esta ação para criar botões cambiáveis e outros efeitos em imagens (inclusive a
permuta simultânea de mais de uma imagem). Veja Permutar a imagem.
A opção Restaurar as imagens permutadas restaura o último conjunto de imagens

permutadas aos seus arquivos de origem anteriores. Essa ação será adicionada
automaticamente, sempre que for anexada a a ção Permutar a imagem a um objeto, como
padrão. Não será necessário selecioná-la manualmente. Veja Restaurar a imagem permutada.
Também é possível utilizar comportamentos para criar sistemas de navegação mais

sofisticados, como uma barra de navegação ou um menu de salto. Veja Cria ção das barras de
navegação e Cria ção de menus de salto.
Referência
Esta seção fornece informações sobre painéis, caixas de diálogo e inspetores apresentados
neste capítulo.
Definição das propriedades da imagem
Preenchimento da caixa de di álogo Alocador de espaço de imagem
Definição das propriedades do alocador de espaço de imagem
Definição das preferências do editor de imagens externo
Definiçã o das propriedades da imagem
Esse inspetor de propriedades permite definir as propriedades de uma imagem. Se n ão forem

exibidas todas as propriedades da imagem conforme abaixo, clique na seta de expansão, no
canto inferior direito
Para definir as propriedades da imagem:
1. Defina qualquer uma das opções a seguir:

¡ A opção Utilizar o campo de texto abaixo da imagem em miniatura para definir um
nome que sirva de referência à imagem ao utilizar um comportamento do
Dreamweaver (por exemplo: Permutar a imagem) ou ao utilizar uma linguagem de
script, como JavaScript ou VBScript.
As opções L e A especificam a largura e altura do filme, em pixels. Dreamweaver

automaticamente atualiza esses campos com as dimensões originais da imagem, ao
inserir uma imagem em uma página. Pode-se especificar o tamanho da imagem

nestas unidades: pc (paicas), pt (pontos), pol (polegadas), mm (mil ímetros) e
cm (centímetros), além de suas combinações, como, por exemplo: 2pol+5mm.
Dreamweaver converterá os valores em pixels no código-fonte HTML.
Se forem definidos valores para L e A que não correspondem às reais largura e

altura da imagem, ela poderá não ser exibida corretamente em um navegador (para
restaurar os valores originais, clique nos identificadores dos campos L e A).
Nota: É possível alterar esses valores para redimensionar essa instância da

imagem, mas esse procedimento não reduzir á o tempo de download porque o
navegador efetuará o download de todos os dados da imagem antes de
redimensioná-la. Para reduzir esse tempo e garantir que todas as instâncias de uma
imagem sejam exibidas com o mesmo tamanho, utilizar um aplicativo de edição de
imagens para redimensioná-las.
A opção Orig. especifica o arquivo de origem da imagem. Clique no ícone

correspondente à pasta para procurar o arquivo de origem, ou digitar o caminho.
Para obter informações sobre as origens das imagens dinâmicas, veja Como tornar
dinâmicas as imagens.
A opção Link especifica um hiperlink para a imagem. Arraste o ícone do indicador

de arquivos até um arquivo no painel Site ou clique no ícone correspondente à
pasta, para procurar um documento no seu site, ou digitar a URL. Para obter
informações sobre a cria ção de links, veja Criação de links .
A opção Alinhar coloca uma imagem e o texto na mesma linha. Veja Alinhamento
de uma imagem.
A opção Alt. especifica um texto alternativo que é exibido no lugar da imagem para
os navegadores somente de texto ou para aqueles definidos para download manual
de imagens. Para os usuários com deficiência visual, que utilizam sintetizadores de
fala com navegadores somente de texto, o texto é falado em voz alta. Em alguns
navegadores, esse texto também será exibido quando o ponteiro estiver sobre a
imagem.
A opção Nome do mapa e as ferramentas Ponto ativo permitem identificar e

criar uma mapa de imagens do cliente. Veja Criação dos mapas de imagens.
As opções Espaço V e Espaço H adicionam espaço, em pixels, acima, abaixo e em

ambos os lados da imagem. Espaço V adiciona espaço nas partes superior e inferior
de uma imagem. Espaço H adiciona espaço nos lados esquerdo e direito de uma
imagem.
A opção Destino especifica a moldura ou janela na qual a página vinculada deverá

ser carregada (essa opção não está disponível quando a imagem não está vinculada
a outro arquivo). Os nomes de todas as molduras no conjunto de molduras atual
são exibidos na lista Destino. É possível também escolher entre os nomes de
destino reservados a seguir:
_blank carrega o arquivo vinculado em uma janela do navegador nova e sem nome.
_parent carrega o arquivo vinculado em um conjunto-pai de molduras ou na janela

da moldura que contém o link. Se a moldura que contém o link não estiver
aninhada, o arquivo vinculado será carregado na janela inteira do navegador.
_self carrega o arquivo vinculado na mesma moldura ou janela que o link. Esse
destino é o padrão; portanto, geralmente não é necessário especificá-lo.
_top carrega o arquivo vinculado na janela inteira do navegador, removendo todas

as molduras.
A opção Orig. baixa especifica a imagem que deve ser carregada antes da imagem
principal. Muitos designers utilizam uma versão de 2 bits (em preto e branco) da
imagem principal, porque é carregada rapidamente e fornece aos visitantes uma
idéia do que eles verão.
A opção Borda define a largura, em pixels, da borda da imagem. O padrão é sem

borda.
A opção Editar inicia o editor de imagens especificado nas preferências de editores

externos e abre a imagem selecionada. Para obter informações sobre como definir
um editor de imagem externo, veja Utilização de um editor de imagens externo.
A opção Redefinir o tamanho redefine os valores L e A do tamanho original da

imagem.
Preenchimento da caixa de diálogo Alocador de espaço de imagem
O objetivo dessa caixa de diálogo é criar um gráfico de alocador de espaço de imagem.
Para preencher a caixa de diálogo, definir as opções desejadas:
1. Na caixa de texto Nome, digite o texto que deverá ser exibido como um identificador do
alocador de espaço de imagem. Esse campo é opcional; para que um identificador não
seja exibido, o campo deverá ficar em branco.
O nome deve começar com uma letra e pode conter somente letras e números; espaços e
caracteres ASCII elevados não s ão permitidos.
2. Nas caixas de texto Largura e Altura, digite um número para definir o tamanho da
imagem em pixels. (necessário)
3. Para obter Cor, seguir um dos procedimentos abaixo para aplicar uma cor: (opcional)
¡ Utilize o seletor de cores para selecione uma cor.
¡ Digite o valor hexadecimal da cor (por exemplo: #FF0000).
¡ Digite um nome de cor aceito pela Web (por exemplo: vermelho).

4. No Texto alternativo, digite o texto que descreva a imagem para visualizadores que
utilizam um browser somente texto. (opcional)
5. Clique em OK.
Um alocador de espaço de imagem é exibido no documento.
Nota: Uma tag de imagem é automaticamente inserida no código HTML que contém um
atributo src vazio.
Definiçã o das propriedades do alocador de espaço de imagem
Para definir propriedades de um alocador de espaço de imagem, selecione um alocador de

espaço de imagem na janela do documento e, em seguida, escolha Janela > Propriedades, para
exibir o inspetor de propriedades. Clique na seta de expansão, situada no canto inferior direito,
para examinar todas as propriedades.
Utilize o inspetor de propriedades para definir um nome, largura, altura, origem de imagens,
descri ção de texto alternativo, alinhamento e cor de um alocador de espaço de imagem.
No inspetor de propriedades do alocador de espaço, os campos acinzentados e o campo de

texto Alinhar estão desativados. É possível definir essas propriedades no inspetor de
propriedades de imagens ao substituir o alocador de espaço por uma imagem.
Para definir as propriedades da imagem:
Defina qualquer uma das opções a seguir:
As opções L e A especificam a largura e altura do alocador de espaço de imagem, em pixels.
Nota: Certifique-se de manter juntos o valor e o tipo de unidade, sem espaço entre eles. Por
exemplo: para definir a largura ou a altura como duas polegadas, digitar 5,08cm.
A opção Orig. especifica o arquivo de origem da imagem. Para um alocador de espaço de

imagem, essa caixa de texto está vazia. Clique no botão Procurar para selecionar uma imagem
substituta para o gráfico do alocador de espaço.
A opção Link especifica um hiperlink para o alocador de espaço de imagem. Arraste o ícone do
indicador de arquivos até um arquivo no painel Site ou clique no ícone correspondente à pasta,
para procurar um documento no seu site, ou digitar a URL.
A opção Alt. especifica um texto alternativo que é exibido no lugar da imagem para os
navegadores somente de texto ou para aqueles definidos para download manual de imagens.
Para os usuários com deficiência visual, que utilizam sintetizadores de fala com navegadores
somente de texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também
será exibido quando o ponteiro estiver sobre a imagem.
A opção Criar permite iniciar Fireworks MX para criar uma imagem de substituição. O botão
Criar só não é desativado se Fireworks MX tamb ém estiver instalado no computador. Para obter
informações sobre a cria ção de uma imagem de substituição em Fireworks MX, veja Atualização
de um alocador de espaço de imagem do Dreamweaver no Fireworks.
A opção Redefinir o tamanho redefine os valores L e A do tamanho original da imagem.
A opção Cor permite especificar uma cor para o alocador de espaço de imagem.
Definiçã o das preferências do editor de imagens externo
Utilize a preferência Tipos de arquivos/editores para selecionar um editor de imagem para

iniciar e editar arquivos gr áficos. É possível definir quais tipos de arquivos um editor pode abrir
e selecionar editores de múltiplas imagens. Por exemplo: é possível instruir Dreamweaver para
iniciar Fireworks quando o usu ário quiser editar um arquivo GIF, e para iniciar um editor de
imagens diferente, visando à edição de um arquivo JPG ou JPEG.
Para definir um editor de imagens externo para um tipo específico de arquivo:
1. Abra a caixa de di álogo Tipos de arquivos/editores, seguindo um dos procedimentos

abaixo:
¡ Escolha Editar > Preferências e selecione Tipos de arquivos/editores na lista
Categoria à esquerda.
¡ Escolha Editar > Editar com editor externo e selecione Tipos de arquivos/editores.
2. Na lista de extensões, selecione o tipo de arquivo para o qual será definido o
editor externo.
3. Clique no botão Adicionar (+), acima da lista de editores.
4. Na caixa de diálogo Selecionar o editor externo, procurar o aplicativo a ser iniciado como
editor para esse tipo de arquivo.
5. Na caixa de diálogo Preferências, clique em Tornar primário, se esse editor for o principal
para esse tipo de arquivo.

6. Para configurar um editor adicional para esse tipo de arquivo, repetir as etapas 3 e 4.
Dreamweaver utiliza automaticamente esse editor primário quando esse tipo de imagem é
escolhido para edição. É possível escolher outros editores da lista no menu contextual
para a imagem na janela do documento.
Para adicionar um novo tipo de arquivo à lista de extens ões:
1. Na caixa de diálogo Tipos de arquivos/editores, clique no botão Adicionar (+) acima da

lista de extensões.
É exibida uma caixa de texto na lista de extensões.
2. Digite a extensão do arquivo do tipo de arquivo para o qual um editor será iniciado.
3. Para selecionar um editor externo, clique no botão Adicionar (+), acima da lista de
editores.
4. Na caixa de diálogo que for exibida, escolha o aplicativo a ser utilizado para editar esse
tipo de imagem.
5. Clique em Tornar primário, se desejar que este editor seja o primário para o tipo de
imagem.
Para alterar uma preferência de editor existente:
1. Na caixa de diálogo preferências Tipos de arquivos/editores, na lista de extensões,

selecione o tipo de arquivo a ser alterado para exibir o(s) editor(es) existente(s).
2. Na lista de editores, selecione o editor que será afetado e seguir um dos procedimentos
abaixo:
¡ Clique nos botões Adicionar (+) ou Excluir (–), acima da lista de editores, para
adicionar ou remover um editor.
¡ Clique no botão Tornar primário, para alterar qual editor será iniciado como padrão
para edi ção.
Para obter mais informações sobre as outras opções das preferências de editores externos, veja
Como iniciar um editor externo para arquivos de mídia .
Integra ção do Dreamweaver com outros aplicativos
O Macromedia Fireworks MX e o Macromedia Flash MX são ferramentas de desenvolvimento da

Web poderosas projetadas para criar imagens gráficas e filmes SWF visíveis em páginas da
Web. O Macromedia Dreamweaver MX é rigorosamente integrado a essas ferramentas para
permitir a simplificação do fluxo de trabalho de criação para a Web.
Para configurar uma integração suave entre o Dreamweaver e o Flash ou Fireworks, ative as
Design Notes ao definir os sites Dreamweaver. Por padrão, essa opção é selecionada
previamente na configuração do Site. Para obter mais informações sobre a ativação das Design
Notes, veja Como ativar e desativar as Design Notes.
Ao exportar os arquivos do Fireworks ou Flash diretamente para um site Dreamweaver definido,

as Design Notes que contêm as referências ao arquivo de autoria PNG ou Flash (FLA) são
automaticamente exportadas para o site junto com o arquivo pronto para Web (GIF, JPEG, or
SWF).
É possível inserir facilmente as imagens ou tabelas do Fireworks e os filmes Flash em um

documento do Dreamweaver. Também é possível aproveitar a vantagem dos recursos de
integração entre o Dreamweaver e o Fireworks ou Flash para fazer as alterações em uma
imagem ou filme após a inserção em um documento do Dreamweaver.
Enquanto estiver trabalhando no Dreamweaver, também é possível iniciar o processo de

produção gráfica inserindo e atualizando um gráfico do alocador de espaço da imagem. Para
obter informações sobre os alocadores de espaço de imagens, veja Como inserir um alocador de
espaço de imagem . Depois de inserir um alocador de espaço de imagem no Dreamweaver, é
possível acionar o Fireworks MX para criar uma nova imagem gr áfica. No Fireworks, é possível
projetar a imagem gr áfica, adicionar pontos ativos, comportamentos ou qualquer elemento que
deseje. É possível salvar a imagem gr áfica como PNG e exportá-la como arquivo ou arquivos
gráficos prontos para Web, como GIF, JPEG ou, no caso de uma tabela cortada, exportá-la
como HTML e imagens.
Ao retornar ao Dreamweaver, a imagem ou a tabela substituída do Fireworks é atualizada

no documento.
Especificação das preferências de acionamento e edição para os arquivos de origem do

Fireworks
Como trabalhar com o Dreamweaver e o Fireworks
Edição de uma imagem ou tabela do Fireworks
Cria ção de um álbum de fotografias na Web
Como trabalhar com Dreamweaver e Flash
Edição de um filme Flash do Dreamweaver
Sobre a integraçã o do Fireworks e do Flash
A edição Roundtrip e as Design Notes ativam o Dreamweaver para opera ções de integra ção com
o Fireworks e com o Flash. A edição Roundtrip garante que as atualizações do código são
transferidas corretamente entre o Dreamweaver e esses outros aplicativos, por exemplo: para
preservar os comportamentos cambiáveis ou os links para outros arquivos, enquanto as Design
Notes permitem que o Dreamweaver localize o documento de origem apropriado para uma
imagem exportada ou arquivo de filme. Para obter informações sobre a utilização das Design
Notes no Dreamweaver, veja Como utilizar as Design Notes no Fireworks e no Flash com o
Dreamweaver.
Além das informações de localização, as Design Notes cont êm outras informações pertinentes
sobre os arquivos exportados. Por exemplo: ao exportar uma tabela do Fireworks, o Fireworks
escreve uma Design Note para cada arquivo de imagem exportado na tabela. Se o arquivo
exportado contém pontos ativos ou cambiáveis, o JavaScript dos pontos ativos ou cambiáveis
está contido no documento HTML que o Fireworks exporta.
Para obter melhores resultados, ao desenvolver imagens gráficas e filmes para publicação na
Web, salve a origem do Fireworks e do Flash e os arquivos prontos para Web em um site
definido do Dreamweaver. Esse procedimento garante que qualquer usuário que compartilhe o
site poderá localizar o documento de origem ao editar uma imagem ou tabela do Fireworks, ou
ao editar um filme SWF enquanto trabalha no Dreamweaver.
A chave para desenvolver um fluxo de trabalho suavemente integrado com esses aplicativos é
configurar primeiro o ambiente de trabalho. Para obter informações sobre a configuração do
ambiente de trabalho do Dreamweaver e do Fireworks, veja Como trabalhar com o
Dreamweaver e o Fireworks . Para obter informações sobre a configuração do ambiente de
trabalho do Dreamweaver e do Flash, veja Como trabalhar com Dreamweaver e Flash.
Como trabalhar com o Dreamweaver e o Fireworks
O Dreamweaver e o Fireworks reconhecem e compartilham muitas edi ções de arquivos iguais,

incluindo altera ções em links, mapas de imagens, cortes de tabela, etc. Juntos, os dois
aplicativos fornecem um fluxo de trabalho contínuo para edição, otimização e colocação dos
arquivos gráficos da Web em páginas HTML.
Para configurar um ambiente de trabalho integrado, conclua algumas tarefas preliminares, tais
como definir um site local no Dreamweaver e verificar se as Design Notes estão ativadas para o
site. As Design Notes são automaticamente ativadas, a menos que as definições padrão sejam
alteradas.
É necessário definir também o Fireworks como o editor de imagens externo primário para o
Dreamweaver acionar facilmente o Fireworks para edição. Para obter informações sobre a
definição do Fireworks como editor externo, veja Utilização de um editor de imagens externo.
Para garantir uma integração suave ao processo de acionamento e edi ção, quando estiver
pronto para exportar os arquivos Fireworks HTML e de imagens gr áficas, exporte-os para a
pasta do site do Dreamweaver. Ao exportar uma imagem gráfica GIF ou JPEG do Fireworks para
uma pasta do site do Dreamweaver, o Fireworks cria uma pasta named _notes na mesma
pasta. Essa pasta contém as Design Notes, pequenos arquivos com a extensão de arquivo do
Macromedia Note (.mno).
As Design Notes contêm informações sobre os arquivos gráficos que o Fireworks exporta. Ao
acionar e editar uma imagem do Fireworks ou uma tabela no Dreamweaver, o Dreamweaver
utiliza essas informações para localizar o PNG de origem. Para obter informações sobre a
especificação de o Dreamweaver acionar automaticamente o arquivo PNG quando dispon ível,
veja Especificação das preferências de acionamento e edição para os arquivos de origem do
Fireworks.
Ao selecionar uma imagem em um documento do Dreamweaver que foi exportado do Fireworks

e tem um arquivo .mno correspondente, o inspetor de propriedades exibe o ícone do Fireworks
e o caminho da origem do arquivo.
A defini ção do Fireworks como editor de imagens externo do Dreamweaver possibilita transitar
facilmente entre o Dreamweaver e o Fireworks quando é necessário editar uma imagem. Nas
preferências do Dreamweaver, defina o Fireworks como editor prim ário para os tipos de
arquivos gráficos–GIF, PNG e JPEG. Para obter informações sobre como definir um editor de
imagens, veja Definição das preferências do editor de imagens externo.
Especificação das preferências de acionamento e edi çã o para os arquivos de

origem do Fireworks
As preferências de acionamento e edição do Fireworks permitem a especificação de como tratar

os arquivos de origem PNG ao acionar os arquivos do Fireworks de outro aplicativo, como o
Dreamweaver.
O Dreamweaver reconhece as preferências de acionamento e edição do Fireworks somente em

certos casos onde o usuário aciona e otimiza uma imagem do Fireworks. Especificamente, é
preciso estar acionando e otimizando uma imagem que não é parte de uma tabela do Fireworks
e não contém um caminho correto das Design Notes para um arquivo PNG de origem. Em todos
os outros casos, incluindo todos os casos de acionamento e edi ção das imagens do Fireworks, o
Dreamweaver aciona automaticamente o arquivo PNG de origem, solicitando a localização do
arquivo de origem, caso ele não possa ser encontrado.
Para especificar as preferências de acionamento e edi ção do Fireworks:
1. No Fireworks, escolha Editar > Preferências e clique na guia Acionar e editar.

2. Especifique as opções de preferência que serão utilizadas ao editar ou otimizar as
imagens do Fireworks colocadas em um aplicativo externo:
A opção Usar sempre o PNG de origem aciona automaticamente o arquivo PNG do

Fireworks que é definido na Design Note como a origem da imagem posicionada. As
atualizações são feitas tanto no PNG de origem quanto na imagem posicionada
correspondente.
A opção Nunca usar o PNG de origemaciona automaticamente a imagem posicionada

do Fireworks, caso exista ou não um arquivo PNG de origem. As atualizações são feitas na
imagem posicionada apenas.
A opção Perguntar ao acionar permite a especificação que acionar ou não o arquivo

PNG de origem. Ao editar ou otimizar uma imagem posicionada, o Fireworks exibe uma
mensagem solicitando que ele tome uma decisão de acionamento e edição. Também é
possível especificar as preferências globais de acionamento e edi ção dessa mensagem.
Como inserir uma imagem do Fireworks em um documento Dreamweaver
As imagens gráficas do Fireworks podem ser colocadas em um documento Dreamweaver de

várias maneiras. É possível colocar uma imagem gráfica exportada do Fireworks diretamente
em um documento Dreamweaver, utilizando o comando Inserir imagem, ou criar uma nova
imagem gr áfica do Fireworks de um alocador de espaço de imagem do Dreamweaver.
Para inserir um caractere especial em um documento:
1. No documento Dreamweaver, coloque o ponto de inserção onde deseja que a imagem

seja exibida e, depois, siga um dos procedimentos abaixo:
¡ Na categoria Comuns da barra Inserir, clique no botão Imagem ou arraste-o para o

documento.
2. Navegue para o arquivo exportado do Fireworks desejado e clique em OK.
Nota: Se o arquivo do Fireworks não estiver no site do Dreamweaver atual, será exibida
uma mensagem perguntando se o usuário deseja copiar o arquivo para a pasta raiz.
Clique em Sim.
Atualizaçã o de um alocador de espaço de imagem do Dreamweaver no Fireworks
É possível criar uma imagem do alocador de espaço em um documento Dreamweaver e acionar

o Fireworks para projetar uma imagem gr áfica ou tabela do Fireworks para substituí-lo. Para
obter informações sobre a inserção de um alocador de espaço de imagem, veja Como inserir
um alocador de espaço de imagem.
Para criar uma nova imagem de um alocador de espaço de imagem, o usuário deve ter o
Dreamweaver MX e o Fireworks MX instalados no sistema. O Fireworks reconhece as definições
a seguir do alocador de espaço de imagem, que podem ter sido definidas ao trabalhar com o
alocador de espaço de imagem no Dreamweaver: tamanho da imagem relacionado ao tamanho
da tela do Fireworks, ID da imagem que o Fireworks utiliza como nome de documento padrão
do arquivo de origem e do arquivo de exportação criado, alinhamento de texto e
comportamentos reconhecidos pelo Fireworks (tais como imagem de troca, menu pop-up, barra
de navegação e texto definido). O Fireworks também reconhece os links anexados ao alocador
de espaço de imagem enquanto trabalha no Dreamweaver.
Nota: Apesar de os links adicionados a um alocador de espaço de imagem não poderem ser
vistos no Fireworks, eles s ão preservados. Se o usuário desenhar um ponto ativo e adicionar
um link ao Fireworks MX, ele não excluirá o link adicionado ao alocador de espaço de imagem
no Dreamweaver. Entretanto, se desenhar um corte no Fireworks na nova imagem, ele excluirá
o link no documento Dreamweaver ao substituir o alocador de espaço de imagem.
Essas definições do alocador de espaço de imagem são desativadas no inspetor de propriedades

do alocador de espaço de imagem, já que elas não foram reconhecidas pelo Fireworks:
alinhamento de imagem, cor, Vspace e Hspace e mapas.
No Fireworks MX, crie a nova imagem e clique em Concluído. O Fireworks solicita que o arquivo
seja salvo como um arquivo PNG (documento de origem) e exporte o arquivo em um formato
pronto para Web, tal como GIF, JPEG ou, no caso de imagens cortadas, como HTML e imagens.
A nova imagem ou tabela do Fireworks substitui automaticamente o alocador de espaço de
imagem no documento Dreamweaver.
Para editar uma imagem do alocador de espaço do Dreamweaver no Fireworks:
1. Certifique-se de que o Fireworks já foi definido como editor de imagens para os

arquivos .png. Para obter informações, veja Definição das preferências do editor de
imagens externo.
2. Na janela do documento, clique no alocador de espaço de imagem para selecioná-la.
3. Siga um dos procedimentos abaixo para acionar a edição do Fireworks:
¡ No inspetor de propriedades, clique em Criar.

¡ Pressione a tecla Control e clique duas vezes no alocador de espaço de imagem.
¡ Clique com o botão direito do mouse no alocador de espaço de imagem e escolha
Criar imagem no Fireworks.
O Fireworks é acionado no modo Edição do Dreamweaver
4. Utilize as opções do Fireworks para projetar a imagem.

5. Ao finalizar, clique em Concluído.
A caixa de diálogo Salvar como é exibida. O Fireworks avisa o usuário para salvar o
arquivo PNG.
6. No campo Salvar em, escolha a pasta definida como pasta do site local do Dreamweaver.
Se o usuário denominou o alocador de espaço de imagem quando o inseriu no documento

Dreamweaver, o Fireworks preenche o campo Nome do arquivo com esse nome. É
possível alterar o nome se desejar.
7. Clique em Salvar, para salvar o arquivo PNG.
A caixa de diálogo Exportar é exibida. Utilize essa caixa de diálogo para exportar a
imagem como GIF.
8. Na caixa de diálogo Salvar em, escolha a pasta do site local do Dreamweaver.

9. O campo de texto Nome é atualizado automaticamente com o mesmo nome utilizado para
o arquivo PNG. Digite o texto para alterar o nome, se desejar.
10. Para Salvar como tipo, selecione o tipo de arquivo ou arquivos que deseja exportar, por
exemplo: Somente imagens ou HTML e Imagens.
11. Clique em Salvar, para salvar o arquivo exportado.
O arquivo é salvo, e o foco retorna ao Dreamweaver. No documento Dreamweaver, o

arquivo exportado ou a tabela do Fireworks substitui o alocador de espaço de imagens.
Ediçã o de uma imagem ou tabela do Fireworks
É possível acionar o Fireworks para editar as imagens inseridas em um documento

Dreamweaver. Quando o usuário aciona e edita uma imagem ou corte de imagem que é parte
de uma tabela do Fireworks, o Dreamweaver aciona o Fireworks e o arquivo PNG do qual a

imagem ou tabela foi exportada.
Quando a imagem é parte de uma tabela do Fireworks, é possível acionar a tabela inteira do
Fireworks para edições, enquanto houver o comentário  no código HTML. Se o
PNG de origem foi exportado do Fireworks para um site do Dreamweaver utilizando o HTML do
estilo Dreamweaver e a definição de imagens, o comentário da tabela do Fireworks é
automaticamente inserido no código HTML.
Para acionar e editar uma imagem do Fireworks colocada no Dreamweaver:
1. No Dreamweaver, escolha Janela > Propriedades para abrir o inspetor de propriedades

caso ainda não esteja aberto.
2. Clique na imagem ou corte de imagem para selecioná-la.
O inspetor de propriedades identifica a seleção como uma imagem ou tabela do Fireworks

com base no item selecionado, e exibe o nome do arquivo de origem PNG.
3. Para acionar a edi ção do Fireworks, siga um dos procedimentos abaixo:

¡ No inspetor de propriedades, clique em Editar.
¡ Pressione a tecla Control e clique duas vezes na imagem selecionada.
¡ Clique com o botão direito do mouse na imagem selecionada e escolha Editar com
Fireworks no menu contextual.
O Fireworks aciona e abre o PNG associado para edi ção.
Nota: Se o Fireworks n ão puder localizar o arquivo de origem, ele solicitará a

localização do arquivo de origem PNG. Ao trabalhar com o arquivo de origem do
Fireworks, as alterações são salvas para o arquivo de origem e para o arquivo
exportado; caso contrário, somente o arquivo exportado é atualizado.
4. No Fireworks, edite o PNG de origem.

5. Ao terminar a edição, clique em Concluído.
O Fireworks salva as altera ções no arquivo PNG, exporta a imagem atualizada (ou HTML e
imagens) e volta o foco ao Dreamweaver. No Dreamweaver, a imagem ou tabela
atualizada é exibida.
Abertura de um Menu Pop-up do Fireworks no Dreamweaver
O Fireworks suporta menus pop-up baseados em imagem e em HTML. O Dreamweaver só

suporta menus pop-up baseados em HTML. No Dreamweaver, é possível abrir um menu pop-up
do Fireworks e fazer edições em todas as propriedades de item de menu, exceto para as
imagens de segundo plano dos menus pop-up baseados em imagem.
O comportamento da opção Mostrar menu pop-up, no Dreamweaver, permite a edição ou

atualização do conteúdo de um menu pop-up baseado em HTML do Fireworks. É possível
adicionar, excluir ou alterar os itens de menu, reorganizá-los e definir onde um menu está
posicionado em uma página. Para obter informações sobre a defini ção ou modificação das
opções do menu pop-up no Dreamweaver, veja Mostrar o menu pop-up.
Se o menu pop-up que será editado é um menu pop-up baseado em imagem e é desejado
preservar o segundo plano da c élula baseada em imagem, edite o menu pop-up no Fireworks
em vez do Dreamweaver.
Para editar as imagens de segundo plano em um menu pop-up baseado em imagem, selecione
a imagem que deseja atualizar e clique em Editar. Para obter informações sobre a edição de
uma imagem do Fireworks, veja Edição de uma imagem ou tabela do Fireworks.
Para abrir o menu pop-up do Fireworks:
1. No documento Dreamweaver, selecione o ponto ativo ou a imagem que aciona o menu

pop-up.
2. Abra o painel Comportamentos (Shift+F3), se ele ainda não estiver aberto, e, na lista
Ações, clique-duas vezes em Mostrar o menu pop-up.
A caixa de diálogo Mostrar o menu pop-up é exibida.
3. Fa ça as altera ções que desejar no menu pop-up.

4. Ao finalizar a modificação do menu pop-up, clique em OK.
Acionamento do Fireworks para otimizar uma imagem
É possível acionar o Fireworks do Dreamweaver para fazer alterações de exportação rápidas,

tais como redimensionamento de uma imagem ou alteração do tipo de arquivo, para imagens e
animações posicionadas do Fireworks. O Fireworks permite as altera ções nas definições de
otimização, nas definições de animação, no tamanho e na área da imagem exportada.
Para alterar as defini ções de otimizaçã o de uma imagem do Fireworks colocada no

Dreamweaver:
1. No Dreamweaver, selecione a imagem desejada e escolha Comandos >

Otimizar Imagem no Fireworks.
2. Se solicitado, especifique se é para acionar um arquivo de origem do Fireworks para a
imagem posicionada.
3. No Fireworks, faça as altera ções desejadas na caixa de di álogo Otimização:
¡ Para editar as definições de otimização, clique na guia Opções. Para obter mais
informações, veja Como utilizar o Fireworks.
¡ Para editar o tamanho e a área da imagem exportada, clique na guia Arquivo.
4. Ao terminar a edição da imagem, clique em Atualizar.
Ao clicar em Atualizar, a imagem é exportada utilizando as novas definições de

otimização, o GIF ou JPEG posicionado no Dreamweaver é atualizado, e o arquivo de
origem PNG é salvo, se um arquivo de origem foi selecionado.
Se o usuário alterou o formato da imagem, o verificador do link do Dreamweaver avisa

sobre a atualização das referências à imagem. Por exemplo: se o usuário alterou o
formato de uma imagem chamada my_image de GIF para JPEG, clicando em OK em, este
prompt muda todas as refer ências a my_image.gif no site para my_image.jpg.
Como inserir c ódigo HTML do Fireworks em um documento Dreamweaver
O comando Export no Fireworks permite a exportação e gravação das imagens otimizadas e dos
arquivos HTML em um local na pasta desejada do site do Dreamweaver. É possível inserir o
arquivo no Dreamweaver.
Para obter informações sobre os arquivos de exportação do Fireworks como HTML, veja Como
utilizar o Fireworks.
O Dreamweaver permite a inserção de um c ódigo HTML gerado pelo Fireworks, preenchido com
imagens associadas, cortes e JavaScript, em um documento. Esse recurso de inserção facilita a
criação de elementos de design no Fireworks e a incorporação deles a um documento
Dreamweaver existente.
Para inserir HTML do Fireworks em um documento do Dreamweaver:
1. No Dreamweaver, coloque o ponto de inserção onde deseja que comece o código HTML do
Fireworks.
¡ Escolha Inserir > Imagens interativas > HTML do Fireworks.
¡ Na categoria Comuns da barra Inserir, clique no botão Inserir HTML do Fireworks.
3. Na caixa de diálogo que for exibida, clique em Procurar para escolher o arquivo HTML
desejado do Fireworks.
4. Selecione a opção Excluir arquivo após inserção para mover o arquivo HTML do Fireworks
original para a Lixeira quando a operação estiver concluída.
Utilize essa opção, se não precisar mais do arquivo HTML do Fireworks após inseri-lo. Essa
opção n ão afeta o arquivo PNG de origem associado ao arquivo HTML.
Nota: Se o arquivo HTML estiver em uma unidade de disco da rede, ele será
permanentemente excluído–não movido para a Lixeira.
5. Clique em OK para inserir o código HTML, junto com as imagens associadas, cortes e
JavaScript, no documento Dreamweaver.
Como colar o código HTML do Fireworks no Dreamweaver
Uma maneira r ápida de colocar as imagens e tabelas geradas pelo Fireworks no Dreamweaver é
copiar e colar o c ódigo HTML do Fireworks diretamente no documento do Dreamweaver.
Para copiar e colar o código HTML do Fireworks no Dreamweaver:
1. No Fireworks, escolha Editar > Copiar c ódigo HTML.

2. Siga o assistente pelas definições de exportação de HTML e imagens. Quando solicitado,
especifique a pasta do site do Dreamweaver como destino das imagens exportadas.
O assistente exporta as imagens para o destino especificado e copia o c ódigo HTML para
a área de transferência.
3. No Dreamweaver, posicione o ponto de inser ção no documento onde deseja colar o código
HTML e escolha Editar > Colar.
Todos os códigos HTML e JavaScript associados aos arquivos Fireworks exportados são
copiados para o documento Dreamweaver, e todos os links para as imagens são
atualizados.
Para exportar e colar o código HTML do Fireworks no Dreamweaver:
1. No Fireworks, escolha Arquivo > Exportar.

2. Na caixa de diálogo Exportar, especifique a pasta no site do Dreamweaver como destino
para as imagens exportadas.
3. No menu pop-up Salvar como, escolha HTML e Imagens.
4. No menu pop-up HTML, escolha Copiar para Área de transferência.
5. No Dreamweaver, posicione o ponto de inser ção no documento onde deseja colar o código
HTML exportado e escolha Editar > Colar.
Todos os códigos HTML e JavaScript associados aos arquivos Fireworks exportados são
copiados para o documento Dreamweaver, e todos os links para as imagens são
atualizados.
Como atualizar o HTML do Fireworks posicionado no Dreamweaver
No Fireworks, o comando Arquivo > Atualizar HTML fornece uma alternativa para a técnica
acionar e editar de atualização de arquivos do Fireworks colocados no Dreamweaver. Com a
Atualização de HTML, é possível editar uma imagem do PNG de origem no Fireworks e atualizar
automaticamente qualquer código HTML e arquivo de imagem exportado colocado em um
documento Dreamweaver. Este comando permite a atualização dos arquivos do Dreamweaver
mesmo quando o Dreamweaver não está em execução.
Para atualizar o c ódigo HTML do Fireworks colocado no Dreamweaver:
1. No Fireworks, abra o PNG de origem e fa ça as edições desejadas nele.

2. Escolha Arquivo > Salvar.
3. No Fireworks, escolha Arquivo > Atualizar HTML.
4. Navegue no arquivo do Dreamweaver que contém o código HTML que deseja atualizar e
clique em Abrir.
5. Navegue no destino da pasta em que deseja colocar os arquivos de imagem atualizados e
clique em Selecionar.
O Fireworks atualiza o c ódigo HTML e JavaScript no documento Dreamweaver. O

Fireworks também exporta as imagens atualizadas associadas ao código HTML e coloca as
imagens na pasta de destino especificada.
Se o Fireworks não puder localizar o código HTML correspondente para atualizar, ele
fornece a opção de inserir um novo c ódigo HTML no documento Dreamweaver. O
Fireworks coloca a seção JavaScript do novo código no começo do documento e coloca a
tabela HTML ou o link para a imagem no fim.
Cria ção de um álbum de fotografias na Web
O comando Criar álbum de fotografias na Web do Dreamweaver permite a geração automática

de um site na Web que sirva de vitrine para um álbum de imagens de uma determinada pasta.
Este comando utiliza o JavaScript para chamar o Fireworks, que cria uma miniatura e uma
imagem maior para cada imagem na pasta. O Dreamweaver cria uma página da Web com todas
as miniaturas, bem como os links para as imagens maiores. Para utilizar o comando Criar álbum
de fotografias na Web, é preciso ter o Dreamweaver e o Fireworks 4 ou mais avançado
instalados no sistema.
Antes de começar, coloque todas as imagens do álbum de fotografias em uma única pasta (a
pasta não precisa estar em um site). Além disso, certifique-se de que os nomes de arquivos das
imagens terminam em extensões reconhecidas pelo comando Criar álbum de fotografias na Web
(.gif, .jpg, .jpeg, .png, .psd, .tif ou .tiff). As imagens com extensões de arquivo não
reconhecidas não são incluídas no álbum de fotografias.
Para criar um álbum de fotografias na Web:
1. No Dreamweaver, escolha Comandos > Criar álbum de fotografias na Web.

2. No campo de texto T ítulo do álbum de fotografias, digite um título. O título será exibido
em um retângulo cinza na parte superior da página que contém as miniaturas.
Se desejar, é possível digitar até duas linhas de texto adicional para que sejam exibidas
diretamente abaixo do título, nos campos Informações do sub-cabeçalho e Outras
informações.
3. Escolha a pasta que contém as imagens de origem clicando no botão Procurar junto ao
campo de texto Pasta de imagens de origem. Escolha (ou crie) uma pasta de destino na
qual coloque todas as imagens exportadas e os arquivos HTML clicando no botão Procurar
perto do campo de texto Pasta de destino.
A pasta de destino não deve conter ainda um álbum de fotografias–se contiver, e se

alguma imagem nova tiver os mesmos nomes que as imagens utilizadas anteriormente, é
possível sobregravar a miniatura existente e os arquivos de imagem.
4. Especifique as opções de exibição das imagens miniaturas:

¡ Escolha um tamanho para as imagens miniaturas no menu pop-up Tamanho da
miniatura. As imagens são escaladas proporcionalmente para criar miniaturas que
se ajustem em um quadrado com as dimensões de pixel indicadas.
¡ Para exibir o nome de arquivo de cada imagem original embaixo da miniatura
correspondente, selecione Mostrar os nomes dos arquivos.
¡ Digite o número de colunas da tabela que exibe as miniaturas.
5. Escolha um formato para as imagens miniaturas do menu pop-up Formato da miniatura:
O formato GIF WebSnap 128 cria miniaturas GIF que utilizam uma paleta adaptativa
para Web de até 128 cores.
O formato GIF WebSnap 256 cria miniaturas GIF que utilizam uma paleta adaptativa
para Web de até 256 cores.
O formato JPEG–melhor qualidade cria miniaturas JPEG com qualidade relativamente
mais alta e tamanhos de arquivo maiores.
O formato JPEG–menor arquivo cria miniaturas JPEG com qualidade relativamente mais
baixa e tamanhos de arquivo menores.
6. Escolha um formato para as imagens grandes do menu pop-up Formato da fotografia.

Uma imagem grande do formato especificado é criada para cada imagem original. É
possível especificar um formato das imagens grandes diferente do formato especificado
para as miniaturas.
Nota: O comando Criar álbum de fotografias na Web não permite a utilização dos
arquivos de imagem originais como as imagens grandes, porque os formatos da imagem
original diferentes de GIF e JPEG talvez não sejam exibidos adequadamente em todos os
navegadores. Observe que se as imagens originais s ão arquivos JPEG, as imagens
grandes geradas podem ter tamanhos maiores ou qualidade menor que os arquivos
originais.
7. Escolha um percentual de escala para as imagens grandes.
Ao definir como 100%, o sistema cria imagens grandes com o mesmo tamanho das
originais. Observe que o percentual da escala é aplicado a todas as imagens; se as
imagens originais não forem todas do mesmo tamanho, escalá-las com o mesmo
percentual talvez não produza os resultados desejados.
8. Selecione Criar página de navegação para cada fotografia para criar uma página da Web
individual para cada imagem de origem, contendo os links de navegação Voltar, Inicial e
Avançar.
Caso selecione essa opção, as miniaturas são ligadas às páginas de navegação. Se não
selecionar esta opção, as miniaturas são ligadas diretamente às imagens grandes.
9. Clique em OK para criar o código HTML e os arquivos de imagem do álbum de fotografias

na Web.
O Fireworks é acionado (se ainda não estiver em execução) e cria as miniaturas e as

imagens grandes. Esse procedimento pode durar vários minutos, se o usuário tiver
incluído um grande número de arquivos de imagem. Quando o processamento é
concluído, o Dreamweaver fica ativo novamente e cria a página que contém as
miniaturas.
10. Quando for exibida uma caixa de diálogo “Álbum criado”, clique em OK. Talvez seja
preciso aguardar alguns segundos para que a página do álbum de fotografias seja exibida.
As miniaturas são mostradas em ordem alfabética por nome de arquivo.
Nota: Clique no botão Cancelar da caixa de di álogo Dreamweaver, após o início do

processamento, não interrompe a criação do álbum de fotografias; isso simplesmente impede o
Dreamweaver de exibir a página principal do álbum de fotografias.
Como trabalhar com Dreamweaver e Flash
É possível inserir facilmente um filme Flash (arquivo SWF) em um documento Dreamweaver. É

possível utilizar o inspetor de propriedades para definir as opções de execução e exibição do
arquivo SWF na página da Web. Para obter informações sobre a inser ção de um filme Flash no
Dreamweaver, veja Como inserir filmes Flash.
O verificador de link no Dreamweaver permite a edição fácil de links em arquivos inseridos em

um documento Dreamweaver, incluindo filmes Flash. É possível atualizar o link no filme SWF e
atualizar a altera ção no documento de autoria Flash. Para obter informações, veja Atualização
de links em um arquivo SWF.
Se o usuário tem o Macromedia Flash MX e o Dreamweaver MX, é possível atualizar um filme

colocado em um documento Dreamweaver. Quando os dois aplicativos estão instalados no
computador, e um filme SWF é selecionado no documento Dreamweaver, o inspetor de
propriedades exibe um botão Editar. Caso não tenha o Flash MX, o botão Editar fica desativado.
Quando o usuário clica em Editar, o Dreamweaver aciona o Flash, e o Flash tenta localizar o
arquivo de autoria do Flash (.FLA) para o arquivo SWF selecionado. As informações sobre o
arquivo de origem inicial s ão armazenadas automaticamente em uma Design Note do arquivo
SWF, quando ele é exportado para um site do Dreamweaver (se as Design Notes estiverem
ativadas para o site do Dreamweaver). Se o Flash não puder localizar o arquivo de autoria
Flash, o sistema solicitará a sua localização. É imposs ível atualizar um arquivo SWF
diretamente. Altere o arquivo de origem e o exporte como um arquivo de filme SWF.
Depois de acionar com êxito um documento de origem para edição, é possível trabalhar no
Flash para fazer altera ções em um filme. Ao terminar as alterações, clique em Concluído. O
Flash atualiza o documento de autoria do Flash, exporta novamente o arquivo de filme, fecha e
retorna o foco para o documento Dreamweaver. É possível exibir o SWF atualizado no
documento, clicando em Executar no inspetor de propriedades, ou pressionar F12 para
visualizar a página em uma janela do navegador.
Edição de um filme Flash do Dreamweaver
Atualização de links em um arquivo SWF
Ediçã o de um filme Flash do Dreamweaver
É imposs ível editar diretamente um arquivo SWF, se deseja fazer alterações em um SWF
exportado, selecione o alocador de espaço de filme Flash no documento Dreamweaver e, no
inspetor de propriedades, clique em Editar. A edi ção aciona o Flash e, se o caminho para o
documento de origem (FLA) estiver disponível, aciona também o arquivo FLA. Quando as
edições estiverem concluídas, o Flash salva as alterações no documento de origem FLA e
exporta novamente o arquivo de filme SWF.
Para acionar e editar um filme Flash inserido do Dreamweaver:
1. No Dreamweaver, escolha Janela > Propriedades para abrir o inspetor de propriedades

caso ainda não esteja aberto.
2. No documento Dreamweaver, siga um dos procedimentos abaixo:
¡ Clique no alocador de espaço de filme Flash para selecioná-lo; no inspetor de
propriedades, clique em Editar.
¡ Pressione a tecla Control e clique duas vezes no alocador de espaço do filme que
deseja editar.
¡ Clique com o botão direito do mouse no filme desejado e escolha Editar com Flash
no menu contextual.
O Dreamweaver aciona o Flash e abre o arquivo FLA para edi ção ou avisa o usuário
para abri-lo, caso ele não possa ser localizado.
Nota: Se o arquivo FLA ou SWF estiver bloqueado, o Dreamweaver avisa o usuário

para verificar o arquivo, cancelar a solicitação ou exibir o arquivo.
3. No Flash, edite o filme. A janela do documento indica que um filme do Dreamweaver está
sendo modificado.
4. Ao terminar a edição, clique em Concluído.
Clique em Concluído salva as alterações no arquivo FLA de origem e atualiza o arquivo

SWF.
Atualizaçã o de links em um arquivo SWF
É possível atualizar um link em um arquivo SWF na visualização do mapa do site do

Dreamweaver. Para obter informações sobre a visualização do mapa do site, veja Como utilizar
o mapa do site . Antes de criar um mapa do site, é necessário definir uma página inicial para o
site. Na visualização no mapa do site, é necessário exibir os arquivos dependentes para
atualizar um link em um arquivo SWF. Por padr ão, o mapa do site não exibe os arquivos
dependentes; para obter informações sobre a exibição de arquivos dependentes, veja Como
mostrar e ocultar os arquivos do mapa do site.
Selecione o link que deseja atualizar e selecione umas das opções de links de alteração
dependendo do que deseja fazer–alterar um link individual ou alterar o link no site inteiro.
Qualquer link atualizado pelo Dreamweaver no arquivo SWF é transmitido para o documento de
origem FLA quando um acionamento e uma edição são realizados. O Dreamweaver registra
automaticamente qualquer altera ção de link no arquivo SWF nas Design Notes, e quando o
Flash passa as alterações para o arquivo FLA, ele as remove das Design Notes.
Para atualizar um link de URL em um arquivo SWF:
1. Configure uma página inicial para o site, se ainda não o tiver feito. É necessário configurar
uma página inicial para criar um mapa do site.
2. Abra a visualização do mapa do site

3. Para mostrar os arquivos dependentes, escolha Exibir > Mostrar os arquivos dependentes.
O link é exibido no arquivo SWF.
4. Altere o link seguindo um dos procedimentos abaixo:

¡ Para alterar o link no SWF selecionado, clique com o botão direito do mouse no link,
escolha Alterar o link e, na caixa de di álogo que é exibida no campo URL, digite o
caminho novo da URL.
¡ Para atualizar todas as instâncias do link, escolha Site > Alterar o link no site inteiro
e, na caixa de diálogo que é exibida, no campo Alterar todos os links, procure ou
digite o caminho do link que está sendo alterado e, no campo Em links a, procure
ou digite o caminho da nova URL.
5. Clique em OK.
Como inserir m ídia
Macromedia Dreamweaver permite adicionar som ou filmes aos sites da Web de maneira rápida
e fácil. É possível incorporar ou editar os arquivos e objetos multimídia, como, por exemplo:
filmes Macromedia Flash e Shockwave, applets Java, Quicktime, Active X e arquivos de áudio. É
possível anexar Design Notes a esses objetos, que permitem a comunicação com o grupo.
Agora é possível inserir objetos de botão e texto Flash no próprio Dreamweaver.
l Como inserir e executar um objeto de mídia

l Como iniciar um editor externo para arquivos de mídia
l Utilização das Design Notes com um objeto de mídia
l Sobre o conteúdo Flash
l Como inserir um objeto de botão Flash
l Como inserir um objeto de texto Flash
l Como inserir filmes Flash
l Como inserir filmes Shockwave
l Como adicionar vídeo
l Como adicionar um som a uma página
l Como inserir o conteúdo do plug-in do Netscape Navigator
l Como inserir um controle ActiveX
l Como inserir um applet Java
l Utilização dos comportamentos para controlar os elementos de mídia
l Referência
Como inserir e executar um objeto de m ídia
É possível inserir um filme ou objeto Flash, um filme QuickTime ou Shockwave, applet Java,
controle ActiveX ou outros objetos de áudio ou vídeo em um documento Dreamweaver.
Utilize a categoria M ídia da barra Inserir ou o menu Inserir para selecionar o tipo de objeto que
deseja inserir em um documento. Os filmes e objetos Flash, Shockwave, Applets e ActiveX têm
botões definidos. Utilize o botão plug-in do Netscape Navigator para inserir outros arquivos de
mídia. Para obter mais informações, veja Como inserir o conteúdo do plug-in do Netscape
Navigator.
Para inserir um objeto de mídia em uma página:
1. Posicionar o ponto de inserção na janela do documento onde deseja inserir o objeto e

¡ Na barra Inserir, selecione M ídia e clique no botão para o tipo de objeto que deseja
inserir ou arrastar para a janela do documento.
¡ Escolha o objeto apropriado do submenu Inserir > mídia ou Inserir > imagens
interativas.
Na maioria dos casos, será exibida uma caixa de diálogo que permite escolher um arquivo de
origem e especificar certos parâmetros do objeto de mídia.
Dica: Para evitar a exibição de certas caixas de diálogo, escolha Editar > Preferências > Geral
e, em seguida, desmarcar a op ção Mostrar a caixa de diálogo quando inserir objetos. Para
anular qualquer preferência definida para exibir caixas de diálogo, manter pressionada a tecla
Control enquanto o objeto é inserido (por exemplo: para inserir um alocador de espaço para um
filme Shockwave sem especificar o arquivo, manter pressionada a tecla Control e clique no
botão Shockwave).
Dreamweaver insere automaticamente o c ódigo-fonte HTML necessário à exibi ção do objeto ou

do alocador de espaço na página. Para especificar o arquivo de origem, definir as dimensões e
outros parâmetros e atributos, utilizar o inspetor de propriedades correspondente a cada objeto.
Como iniciar um editor externo para arquivos de m ídia
É possível clicar duas vezes na maioria dos arquivos no painel Site para editá-los diretamente.
Se o arquivo for um arquivo HTML, ele será aberto no Dreamweaver. Se ele for de outro tipo,
como um arquivo de imagem, ele será aberto em um editor externo apropriado, como
Macromedia Fireworks.
Cada tipo de arquivo com que Dreamweaver não lida diretamente pode ser associado a um ou
mais editores externos do sistema. O editor iniciado quando o usuário clica duas vezes no
arquivo no painel Site é denominado editor prim ário. É possível definir qual editor será
associado a que tipo de arquivo nas preferências dos Tipos de arquivos/editores.
Se houver mais de um editor associado ao tipo de arquivo, será possível iniciar um editor
secundário para um determinado arquivo: Clique com o botão direito do mouse (no Windows)
no nome do arquivo no painel Site e escolha um editor no submenu Abrir com, do menu
contextual.
Para especificar explicitamente os editores externos que deverão ser iniciados para um
determinado tipo de arquivo, escolha Editar > Preferências, e, na lista de categorias, selecione
Tipos de arquivos/editores. As extensões dos nomes de arquivos, como .gif, .wav e .mpg,
encontram-se listadas à esquerda, em Extensões. Os editores associados à extensão
selecionada encontram-se listados à direita, abaixo de Editores.
Também é possível procurar um editor externo para editar o arquivo. Clique com o botão direito
do mouse (no Windows) no arquivo na visualização do projeto da janela do documento, e, em
seguida, escolha Editar com > Procurar, ou selecionar o arquivo e escolha > Editar > Editar com
editor externo.
Para adicionar um tipo de arquivo à lista de extensões nas preferências Tipos de

arquivos/editores:
1. Clique no botão de adição (+), situado acima da lista de extensões.

2. Digite a extensão do tipo de arquivo (incluindo o ponto no início da extensão), ou diversas
extensões relacionadas, separadas por espaços.
Por exemplo: é possível digitar .css, .png .jpg .
Para adicionar um editor a um determinado tipo de arquivo:
1. Selecione a extensão do tipo de arquivo na lista Extensões.

2. Clique no botão de adição (+), situado acima da lista de editores.
3. Na caixa de diálogo que for exibida, escolha o aplicativo a ser adicionado à lista Editores.
Por exemplo: escolha o ícone do aplicativo Excel, para adicioná-lo à lista Editores.
Para remover um tipo de arquivo da lista:
1. Selecione o tipo de arquivo na lista Extensões.
Nota: É imposs ível desfazer a ação após remover um tipo de arquivo; portanto é
necessário ter certeza de que deseja removê-lo.
2. Clique no botão de subtração ( -), situado acima da lista de extensões.
Para tornar um editor o editor prim ário de um tipo de arquivo:
1. Selecione o tipo de arquivo.

2. Selecione o editor (ou adicioná-lo, se j á não estiver na lista).
3. Clique em Tornar primário.
Para dissociar um editor de um tipo de arquivo:
1. Selecione o tipo de arquivo na lista Extensões.

2. Selecione o editor na lista Editores.
3. Clique no botão de subtração ( -) acima da lista de editores.
Utilizaçã o das Design Notes com um objeto de mídia
Assim como ocorre com outros objetos no Dreamweaver, é possível adicionar Design Notes a
um objeto de mídia. Para obter mais informações sobre como trabalhar com Design Notes, veja
Como utilizar as Design Notes .
Para adicionar Design Notes a um objeto de m ídia:
1. Clique com o botão direito do mouse (no Windows) no objeto da janela do documento.
Nota: É necessário definir o site antes de adicionar Design Notes a qualquer objeto (veja
Como ativar e desativar as Design Notes).
2. No menu contextual, escolha Design Notes.

3. Digite as informa ções que deseja na Design Note.
Dica: Também é possível adicionar uma Design Note a um objeto de mídia na painel Site:
ao selecionar o arquivo, exibir o menu contextual e selecionar as Design Notes neste
menu.
Sobre o conteúdo Flash
A tecnologia Macromedia Flash constitui a solução mais eficiente para a produção de gráficos e
animações com base em vetores. Flash Player está disponível tanto como um plug-in de
Netscape Navigator quanto um controle ActiveX para Microsoft Internet Explorer no PC, tendo
sido incluído nas versões mais recentes de Netscape Navigator, Microsoft Internet Explorer e
America Online.
Dreamweaver vem com objetos Flash para uso com ou sem Flash. É possível utilizar esses
objetos para criar botões Flash e textos Flash para inserção em um documento Dreamweaver.
Caso Flash esteja no sistema, veja Como trabalhar com Dreamweaver e Flash para obter mais
informações sobre a utilização desses aplicativos de maneira integrada.
Antes de utilizar os comandos Flash disponíveis no Dreamweaver, é necessário revisar os tr ês

tipos diferentes de arquivos Flash.
O arquivo Flash (.fla) é um arquivo-fonte para qualquer projeto e é criado no programa de

mesmo nome. Esse tipo de arquivo pode ser aberto apenas em Flash, mas não no
Dreamweaver ou em navegadores. É possível abrir o arquivo Flash em Flash e,
subseqüentemente, exportá-lo como um arquivo SWF ou SWT para ser utilizado nos
navegadores.
O arquivo de filme Flash (.swf) é uma versão compactada do arquivo Flash (.fla), otimizado
para visualização na Web. Esse arquivo pode ser executado em navegadores e visualizado no
Dreamweaver, mas não pode ser editado no Flash. Esse é o tipo de arquivo criado ao utilizar os
objetos de texto e botão Flash. Para obter mais informações, veja Como inserir um objeto de
botão Flash e Como inserir um objeto de texto Flash e Como inserir filmes Flash.
Os arquivos do modelo Flash (.swt) possibilitam a modificação e substituição de

informações num arquivo de filme Flash. Esses arquivos são utilizados no objeto de botão Flash,
permitindo a modificação do modelo com os seus próprios textos ou links, para criar um SWF
personalizado para inserir no documento. No Dreamweaver, estes arquivos de modelo podem
ser encontrados nas pastas Dreamweaver/Configuration/Flash Objects/Flash Buttons e Flash
Text.
Também é possível efetuar download de novos modelos de botão no site Macromedia Exchange
para o Dreamweaver na Web e colocá-los na pasta Botão Flash. Para obter mais informações
sobre a cria ção de novos modelos de botão, veja o artigo sobre esse tópico encontrado no site
da Macromedia na Web.
Como inserir um objeto de botão Flash
O objeto de botão Flash é um botão atualiz ável baseado em um modelo Flash. É possível
personalizar um objeto de botão Flash, adicionando texto, cor de fundo e links para outros
arquivos. É possível inserir botões Flash durante o trabalho na visualização do projeto ou na
visualização do código.
Nota: É necessário salvar os documentos antes de inserir um objeto de botão ou texto Flash.
Utilize a caixa de diálogo Botão Flash para selecionar a partir de um conjunto de botões Flash
designados. É possível exibir um exemplo de botão no campo Exemplo. Clique nessa exemplo
para verificar como ela funciona no navegador. Durante a definição do botão Flash (por
exemplo: alteração do texto ou op ções de fonte), o campo Exemplo deve ser atualizado
manualmente para refletir as alterações. Essas altera ções serão exibidas quando a caixa de
diálogo for fechada e o botão for exibido na visualização do projeto.
Para inserir um objeto de botão Flash:
1. Na janela do documento, coloque o ponto de inserção onde deseja inserir o botão Flash.
2. Para abrir a caixa de diálogo Inserir objeto Flash, siga um dos procedimentos abaixo:
¡ Na barra Inserir, selecionar Mídia e, em seguida, clique no ícone do Bot ão Flash.
¡ Na barra Inserir, selecionar Mídia e, em seguida, arraste o ícone do botão Flash

para a janela do documento, ou para a visualização do c ódigo se estiver
trabalhando no código.
¡ Escolha Inserir > Imagens interativas > Botão Flash.
A caixa de diálogo Inserir botão Flash é exibida.
3. Na lista de estilos, selecionar o estilo de botão que deseja.

4. No campo Texto do bot ão (opcional), digite o texto que deseja que seja exibido.
Esse campo aceitará alterações apenas se o botão selecionado tiver um parâmetro

{Button Text} definido. Isso será mostrado no campo Exemplo. O texto digitado
substituir á o parâmetro {Button Text} quando o arquivo for visualizado.
5. No menu pop-up Fonte, selecione a fonte que deseja utilizar.
Se a fonte padrão de um botão n ão estiver disponível no sistema, selecione uma outra

fonte no menu pop-up. A fonte selecionada não será vista no campo Exemplo, mas é
possível clicar em Aplicar, para inserir o botão na página, para examinar a aparência do
texto.
6. No campo Tamanho, digite um valor numérico para o tamanho da fonte.

7. No campo Link (opcional), digite um link relativo a documento ou absoluto para o botão.
8. No campo Destino (opcional), especificar a localização na qual o documento com link será
aberto. É possível selecionar uma moldura ou opção de janela no menu pop-up. Nomes de
molduras s ão listados somente se o objeto Flash estiver sendo editado enquanto estiver
em um conjunto de molduras.
9. No campo Cor de fundo (opcional), defina a cor de fundo para o filme Flash. Utilize o
seletor de cores ou digitar um valor hexadecimal da Web (como, por exemplo: #FFFFFF).
10. No campo Salvar como, digite um nome de arquivo para salvar o novo arquivo SWF.
É possível utilizar o nome de arquivo padrão (por exemplo: button1.swf) ou digitar um

novo nome. Se o arquivo contiver um link relativo a documento, será necessário salvar o
arquivo no mesmo diretório que o documento HTML atual, para manter os links relativos a
documento.
11. Clique em Obter mais estilos para ir ao site Macromedia Exchange e efetuar o download
de mais estilos de botões.
Para obter mais informações, veja Como adicionar extensões no Dreamweaver.
12. Clique em Aplicar ou OK para inserir o botão Flash na janela do documento.
Dica: Selecione Aplicar, para examinar as alterações na visualização do projeto enquanto

mantém a caixa de diálogo aberta. É possível prosseguir com as alterações no botão.
Modificação de um objeto de botão Flash
É possível modificar as propriedades e conteúdo de um objeto de botão Flash.
Para modificar um objeto de botão Flash:
1. Na janela do documento, clique no objeto de botão Flash para selecioná-lo.

2. Abra o inspetor de propriedades, se ele ainda não tiver sido aberto.
O inspetor de propriedades exibirá as propriedades do botão Flash. Utilize o inspetor de

propriedades para modificar os atributos HTML do botão, como largura, altura e Cor de
fundo.
3. Para alterar o conteúdo, exibir a caixa de di álogo Inserir botão Flash utilizando um dos
métodos a seguir:
¡ Clique duas vezes no objeto de botão Flash.
¡ No inspetor de propriedades, clique em Editar.
¡ Clique com o botão direito do mouse (no Windows) e escolha Editar no menu
contextual.
4. Na caixa de diálogo Inserir botão Flash, efetuar as edições desejadas nos campos
descritos no procedimento anterior Como inserir um objeto de botão Flash.
Na visualização do projeto, é possível redimensionar o objeto facilmente utilizando as

alças de redimensionamento. Para redimensionar o objeto ao seu tamanho original,
selecione Redefinir o tamanho, no inspetor de propriedades (veja Redimensionamento de
uma imagem).
Execuçã o de um objeto de botão Flash no documento
É possível visualizar um botão Flash na janela do documento de Dreamweaver.
Para visualizar a execuçã o do objeto de botão Flash na janela do documento:
1. Na visualização do projeto, selecione um objeto de botão Flash.

2. No inspetor de propriedades, clique em Executar.
3. Clique em Parar, para terminar a visualização.
Nota: Não é possível editar o objeto de botão Flash enquanto esse estiver em execução.
Também é conveniente visualizar o documento no navegador para verificar a aparência exata

do botão Flash.
Como inserir um objeto de texto Flash
O objeto de texto Flash permite criar e inserir um filme Flash que contém apenas texto. Isso
permite criar um pequeno filme gráfico com base em vetores com as fontes de designer e o
texto escolhido.
Para inserir um objeto de texto Flash:
1. Na janela do documento, colocque o ponto de inserção onde deseja inserir o texto Flash.
2. Para abrir a caixa de diálogo Inserir objeto Flash, siga um dos procedimentos abaixo:
¡ Na barra Inserir, selecionar Mídia e, em seguida, clique no ícone de Texto Flash.
¡ Na barra Inserir, selecionar Mídia e, em seguida, arraste o ícone de texto Flash para
a janela do documento (ou para a visualização do c ódigo, se estiver trabalhando no
código).
¡ Escolha Inserir > Imagens interativas > Texto Flash.
A caixa de diálogo Inserir texto Flash é exibida.
3. No menu pop-up Fontes, selecionar uma fonte.
Esse menu contém uma lista de todas as fontes TrueType contidas no sistema.
4. Digite um tamanho de fonte no campo Tamanho. Esses s ão tamanhos de pontos.

5. Especifique os atributos de estilo, como negrito ou itálico, e o alinhamento do texto
clicando nos botões de estilo apropriados.
6. No campo Cor, definir a cor do texto, com a utilização do seletor de cores ou a digitação
do valor hexadecimal da Web (#FFFFFF, por exemplo).
7. No campo Cor da imagem cambiável, definir a cor que será exibida quando o ponteiro for
passado sobre o objeto de texto Flash. Utilize o seletor de cores ou digitar um valor
hexadecimal da Web (#FFFFFF, por exemplo).
8. Digite o texto desejado no campo Texto.
Para examinar o estilo da fonte que está sendo exibido no campo Texto, selecione Mostrar
a fonte.
9. Se desejar associar um link ao objeto de texto Flash, digite um link absoluto ou relativo a
documento no campo Link.
Os links relativos a site não s ão aceitos porque os navegadores n ão os reconhecem nos

filmes Flash. Se utilizar um link relativo a documento, certifique-se de que o arquivo SWF
foi salvo no mesmo diretório que o arquivo HTML (a interpretação de links relativos a
documento varia nos navegadores. Para garantir que os links funcionarão corretamente,
salvar o arquivo no mesmo diretório).
10. Se tiver digitado um link, pode-se especificar uma moldura ou janela de destino onde
colocar o link no campo Destino.
11. No campo Cor de fundo, escolha uma cor de fundo para o texto. Utilize o seletor de cores
ou digitar um valor hexadecimal da Web (#FFFFFF, por exemplo).
12. No campo Salvar como, digite um nome para o arquivo.
É possível utilizar o nome de arquivo padrão (por exemplo: tex1.swf) ou digite um novo
nome. Se o arquivo contiver um link relativo a documento, será necessário salvar o
arquivo no mesmo diretório que o documento HTML atual, para manter os links relativos a
documento.
13. Clique em Aplicar ou OK para inserir o texto Flash na janela do documento.
Se clicar em Aplicar, a caixa de diálogo permanecerá aberta e será possível visualizar o

texto no documento.
Para modificar ou executar o objeto de texto Flash, utilizar o mesmo procedimento adotado
para o botão Flash (veja Modificação de um objeto de botão Flash).
Como inserir filmes Flash
Ao inserir um filme Flash em um documento, Dreamweaver utilizará as tags object (definida

por Microsoft Internet Explorer para os controles ActiveX) e embed (definida por Netscape
Navigator), para obter os melhores resultados em todos os tipos de navegadores. Ao alterar o
filme no inspetor de propriedades, Dreamweaver mapeará as entradas dos parâmetros
apropriados às tags object e embed.
Para inserir um filme Flash:
1. Na visualização do projeto, na janela do documento, colocar o ponto de inserção onde

deseja inserir o filme.
¡ Na barra Inserir, selecione M ídia e, em seguida, clique no ícone de Inserir Flash.
¡ Na barra Inserir, selecione M ídia e, em seguida, arrastar o ícone Inserir Flash para a
¡ Escolha Inserir > Mídia > Flash.
2. Na caixa de diálogo que será exibida, selecione um arquivo de filme Flash (.swf).
Um alocador de espaço Flash será exibido na janela do documento (diferentemente dos

objetos de botão e texto Flash). Para obter mais informações sobre a definição de
propriedades para um filme Flash, veja Definição de propriedades de filme Flash e
Shockwave.
Para visualizar um filme Flash na janela do documento:
1. Na janela do documento, clique no alocador de espaço Flash para selecionar o filme Flash
que deseja visualizar.
2. No inspetor de propriedades, clique no botão Editar. Clique em Parar, para terminar a
visualização. Também é possível visualizar o filme Flash em um navegador, pressionando
a tecla F12.
Dica: Para visualizar todo o conteúdo Flash numa página, pressionar simultaneamente as teclas
Control+Alt+Shift+P (no Windows). Todos os objetos e filmes Flash estão definidos para
Executar.
Como inserir filmes Shockwave
Shockwave, o padrão da Macromedia para multimídia interativa na Web, é um formato

compactado que permite o download rápido dos arquivos de m ídia criados em Macromedia
Director, para que sejam executados pela maior parte dos navegadores mais comuns.
O software que executa os filmes Shockwave está disponível como um plug-in de Netscape
Navigator e um controle ActiveX. Ao inserir um filme Shockwave, Dreamweaver utilizará as tags
object (para o controle ActiveX) e embed (para o plug-in), para obter os melhores resultados
em todos os navegadores. Ao alterar o filme no inspetor de propriedades, Dreamweaver
mapeará as entradas dos parâmetros apropriados às tags object e embed.
Para inserir um filme Shockwave:
1. Na janela do documento, colocar o ponto de inserção onde deseja inserir o filme

Shockwave e seguir um dos procedimentos abaixo:
¡ Na barra Inserir, selecionar Mídia e, em seguida, clique no ícone Shockwave.
¡ Na barra Inserir, selecionar Mídia e, em seguida, arrastar o ícone Shockwave para a

janela do documento, ou para a visualização do c ódigo no caso de estar trabalhando
no código.
¡ Escolha Inserir > Mídia > Shockwave.
2. Na caixa de diálogo que será exibida, selecionar um arquivo de filme.
3. No inspetor de propriedades, digite a largura e altura do filme, nas caixas L e A.
Para obter informações sobre as outras propriedades, veja Definição de propriedades de

filme Flash e Shockwave .
Como adicionar vídeo
É possível adicionar v ídeo à página da Web de diversas maneiras e utilizando v ários formatos. É
possível efetuar o download de vídeo para o usuário ou ele pode ser transferido gradualmente
para que seja executado durante o download. Os formatos mais comuns de transferência
gradual disponíveis na Web para a transmissão de arquivos de vídeo são RealMedia, QuickTime
e Windows Media. É necessário efetuar o download de um aplicativo auxiliar para exibir esses
formatos. Com esses formatos, é possível transferir gradualmente áudio e v ídeo
simultaneamente.
Se desejar incluir um clipe breve cujo download pode ser efetuado em vez de utilizar a
transfer ência gradual, será possível vincular o clipe, ou incorporá-lo, à página. Esses clipes
estão geralmente no formato de arquivo AVI ou MPEG.
É possível utilizar Director para filmes Shockwave ou Flash para criar apresentações multimídia,
com pouca largura de banda e interativas para a Web. Com Flash, o tamanho do arquivo é
surpreendentemente pequeno e a tecnologia funciona em v árias plataformas (é claro que os
usuários precisam, primeiro, efetuar o download de um plug-in de aparelho de reprodução
gratuito antes de poderem exibir esses arquivos).
Como adicionar um som a uma página
Há vários tipos diferentes de arquivos e formatos de som, assim como diversas maneiras de
adicionar som às páginas da Web. Dentre os fatores a serem considerados antes de decidir qual
formato e método serão utilizados para adicionar o som, estão o objetivo, o público, o tamanho
do arquivo, a qualidade do som e as diferen ças entre os navegadores.
Nota: Os arquivos sonoros s ão tratados de forma diferente e inconsistente pelos diversos

navegadores. Pode-se desejar adicionar um arquivo de som a um filme Flash e, em seguida,
incorporar o arquivo SWF para melhorar a consistência.
Sobre os formatos de arquivos de áudio
A lista a seguir descreve os formatos de arquivos de áudio mais comuns, junto com algumas
das vantagens e desvantagens de cada um para os projetos da Web.
O formato .midi ou .mid (Interface digital de instrumento musical, Musical Instrument

Digital Interface) destina-se à música instrumental. Arquivos MIDI contam com suporte em
diversos navegadores e não requerem um plug-in. Apesar de sua qualidade de som ser muito
boa, ela pode variar dependendo da placa de som de um visitante. Um pequeno arquivo MIDI
pode fornecer um longo clipe de som. Os arquivos MIDI não podem ser gravados e devem ser
sintetizados num computador com hardware e software especiais.
Os arquivos no formato .wav (extensão Waveform) têm boa qualidade de som, contam com
suporte em v ários navegadores e não requerem um plug-in. É possível gravar arquivos WAV
próprios de um CD, fita, microfone e outros dispositivos. No entanto, o grande tamanho dos
arquivos limita seriamente o comprimento dos clipes de som que podem ser utilizados nas
páginas da Web.
O formato .aif (ou AIFF - formato de arquivo de intercâmbio de áudio, Audio

Interchange File Format), assim como o formato WAV, possui uma qualidade de som boa,
pode ser executado pela maioria dos navegadores, e não necessita de plug-ins. É possível
gravar arquivos AIFF de um CD, fita, microfone etc. No entanto, o grande tamanho dos arquivos
limita seriamente o comprimento dos clipes de som que podem ser utilizados nas páginas da
Web.
O formato .mp3 (áudio do Motion Picture Experts Group ou Camada-3 de áudio MPEG)
é um formato compactado que torna os arquivos de som consideravelmente menores. A
qualidade som é muito boa: se um arquivo MP3 tiver sido gravado e compactado corretamente,
a sua qualidade pode competir com a de um CD. Novas tecnologias permitem transferir o
arquivo gradualmente, para que o visitante não precise esperar pelo download do arquivo
inteiro até poder ouvi-lo. No entanto, o tamanho do arquivo é maior do que um arquivo Real
Audio. Por isso, é possível que o download de uma m úsica inteira em uma conexão de linha
telefônica comum ainda demore um pouco. Para executar os arquivos MP3, os visitantes devem
efetuar o download e instalar um aplicativo auxiliar ou plug-in, como QuickTime, Windows
Media Player ou RealPlayer.
O grau de compactação do formato .ra, .ram, .rpm ou Real Audio é muito alto e os tamanhos
de arquivos são menores do que os arquivos no formato MP3. É possível efetuar o download de
arquivos de música completos num período de tempo razoável. Como os arquivos podem ser
transferidos gradualmente de um servidor da Web normal, os visitantes podem começar a ouvir
o som antes que o download do arquivo tenha sido concluído. A qualidade de som é inferior à
dos arquivos MP3, mas novos aparelhos de reprodução e codificadores melhoraram a sua
qualidade consideravelmente. Para poder executar esses arquivos, os visitantes deverão efetuar
o download e instalar o aplicativo auxiliar RealPlayer ou plug-in.
Vinculaçã o a um arquivo de áudio
A vincula ção a um arquivo de áudio é uma maneira simples e efetiva de adicionar som às
páginas da Web. Esse método de incorporar arquivos de som permite aos visitantes escolha se
desejam ouvir o arquivo e coloca o arquivo à disposição de um p úblico maior (alguns
navegadores não oferecem suporte a arquivos de som incorporados). Veja Incorpora ção de um
arquivo de som.
Cria ção de um link a um arquivo de áudio:
1. Selecione o texto ou a imagem que deseja utilizar como link ao arquivo de áudio.
2. No inspetor de propriedades, clique no ícone correspondente à pasta, para procurar o
arquivo de áudio, ou digitar o caminho e o nome do arquivo no campo Link.
Incorporaçã o de um arquivo de som
A incorpora ção de áudio encaixa o aparelho de reprodução de som diretamente na página, mas
o som só será executado se os visitantes do seu site contarem com o plug-in apropriado ao
arquivo escolhido. Incorporar os arquivos, se desejar utilizar o som como m úsica de fundo ou se
desejar mais controle sobre a pr ópria apresentação de som. Por exemplo: é possível ajustar o
volume, a aparência do aparelho de reprodução na página e os pontos de in ício e fim do arquivo
de som.
Para incorporar um arquivo de áudio
1. Na visualização do projeto, colocar o ponto de inserção onde deseja incorporar o arquivo

e seguir um dos procedimentos abaixo:
¡ Na barra Inserir, selecione M ídia e, em seguida, clique no ícone Plug-in.
¡ Na barra Inserir, selecione M ídia e, em seguida, arrastar o ícone Plug-in para a

no código.
¡ Escolha Inserir > Mídia > Plug-in.
Para obter mais informações sobre o objeto de plug-in, veja Como inserir o
conteúdo do plug-in do Netscape Navigator.
2. No inspetor de propriedades, clique no ícone correspondente à pasta, para procurar o

arquivo de áudio, ou digitar o caminho e o nome do arquivo no campo Link.
3. Digite a largura e a altura, através da inserção dos valores nos campos apropriados ou do
redimensionamento do alocador de espaço de plug-in, na janela Documento.
Esses valores determinam o tamanho com o qual os controles de áudio serão exibidos no
navegador. Por exemplo: tentar uma largura de 144 pixels e uma altura de 60 pixels,
para examinar como o aparelho de reprodução de áudio será exibido em Netscape
Navigator e em Internet Explorer.
Como inserir o conteúdo do plug-in do Netscape Navigator
Os plug-ins aprimoram o funcionamento de Netscape Navigator, possibilitando maneiras de

exibir o conteúdo de mídia em diversos formatos. Plug -ins são o meio pelo qual os arquivos de
conteúdo são executados e exibidos no site da Web. Por exemplo: dentre os plug-ins mais
freqüentes estão o RealPlayer e QuickTime, enquanto alguns arquivos de conteúdo incluem
MP3s e filmes QuickTime.
Após criar o conteúdo de um plug-in do Navigator, é possível utilizar Dreamweaver para inserir
esse conteúdo em um documento HTML. O Dreamweaver utiliza a tag embed para marcar a
referência ao arquivo de conteúdo.
Para inserir o conteúdo de plug-in do Navigator:
1. Na visualização do projeto, na janela do documento, colocar o ponto de inserção onde

deseja inserir o filme.
¡ Na barra Inserir, selecione M ídia e, em seguida, clique no ícone Plug-in.
¡ Escolha Inserir > Mídia > Plug-in.

2. Na caixa de diálogo que será exibida, selecione um arquivo de conteúdo para o plug-in do
Navigator.
Para obter informações sobre as propriedades disponíveis, consulte Definição de propriedades

de plug-ins do Netscape Navigator.
Como executar um plug-in na janela do documento
É possível visualizar filmes e animações que dependem dos plug-ins de Navigator (elementos
que utilizam a tag embed) diretamente na visualização do projeto da janela do documento ( é
imposs ível visualizar, na janela do documento, os filmes ou animações que dependem dos
controles ActiveX). É possível executar todos os elementos de plug-in simultaneamente, para
examinar a aparência que a página terá para o usuário, ou executar cada elemento
individualmente, para garantir que tenha sido incorporado o elemento de m ídia correto.
Para executar os filmes, é necessário que os plug-ins adequados tenham sido instalados no
computador. Ao inicializar Dreamweaver, ele procurará automaticamente todos os plug-ins
instalados, inicialmente na pasta Configuration/Plugins e, em seguida, nas pastas de plug-ins de
todos os navegadores que estiverem instalados.
Para executar o conteúdo de plug-ins na janela do documento:
1. Inserir um ou mais elementos de mídia, escolhendo Inserir > Mídia > Shockwave,
Inserir > Media > Flash, ou Inserir > M ídia > Plug-in.
2. Executar o conteúdo do plug-in:
¡ Selecione um dos elementos de mídia que foi inserido e escolha Exibir > Plug-ins >
Executar, ou clique no botão Executar, no inspetor de propriedades.
¡ Escolha Exibir > Plug-ins > Executar todos, para executar todos os elementos de
mídia na página selecionada que dependerem de plug-ins.
Nota: A op ção Executar todos se aplica ao documento atual e não a outros documentos num
conjunto de molduras, por exemplo.
Para interromper a execuçã o do conteúdo de plug-ins:
Selecione um elemento de mídia e escolha Exibir > Plug-ins > Parar, ou clique no botão Parar,
no inspetor de propriedades.
Também é possível selecionar Exibir> Plug-ins > Parar todos, para interromper a execução de
todos os conteúdos de plug-in.
Resoluçã o de problemas relacionados aos plug-ins do Navigator
Se, após ter seguido essas etapas para executar o conteúdo do plug-in na janela do documento,
alguns elementos do conteúdo do plug-in não forem executados, tentar um dos procedimentos
abaixo:
l Certifique-se de que o plug-in associado está instalado no computador e se o conteúdo do

mesmo é compatível com a versão do plug-in existente.
l Abra o arquivo Configuration/Plugins/UnsupportedPlugins.txt em um editor de texto e
procurar, na lista, o plug-in com problemas. Esse arquivo mantém um registro dos plug-
ins que causam problemas no Dreamweaver e, por isso, não contam com suporte. (se
houver problemas com qualquer outro plug-in, adicioná-lo a esse arquivo).
l Verificar se há memória suficiente. Alguns plug-ins exigem entre 2 MB e 5 MB a mais de
memória, para que sejam executados.
Como inserir um controle ActiveX
Os controles ActiveX (anteriormente conhecidos como controles OLE) s ão componentes

reutilizáveis semelhantes a applets que podem funcionar como plug-ins dos navegadores. Eles
são executados em Internet Explorer com Windows. No Dreamweaver, o objeto ActiveX permite
fornecer atributos e parâmetros a um controle ActiveX no navegador do visitante.
Dreamweaver utiliza a tag object para marcar o local na página onde o controle ActiveX será
exibido e para fornecer parâmetros ao controle ActiveX.
Para inserir o conteúdo de controles ActiveX:
1. Na janela do documento, colocar o ponto de inserção onde deseja inserir o conteúdo e

¡ Na barra Inserir, selecione M ídia e, em seguida, clique no ícone ActiveX.
¡ Na barra Inserir, selecione M ídia e, em seguida, arrastar o ícone ActiveX para a

no código.
¡ Escolha Inserir > Mídia > ActiveX.
Um ícone marca o local onde o controle ActiveX será exibido na página no

Internet Explorer.

do ActiveX.
Como inserir um applet Java
Java é uma linguagem de programação que permite o desenvolvimento de aplicativos pequenos
(applets) que podem ser incorporados às páginas da Web.
Após criar o applet Java, é possível inseri-lo em um documento HTML usando Dreamweaver.
Dreamweaver utiliza a tag applet para marcar a referência ao arquivo do applet.
Para inserir um applet Java:
1. Na janela do documento, colocar o ponto de inserção onde deseja inserir o applet e seguir
um dos procedimentos abaixo:
¡ Na barra Inserir, selecionar Mídia e em seguida clicar no ícone Applet.
¡ Na barra Inserir, selecionar Mídia e, em seguida, arrastar o ícone Applet para a

no código.
¡ Escolha Inserir > Mídia > Applet. Também é possível arrastar o ícone do botão Flash
até a janela do documento.
2. Na caixa de diálogo que será exibida, selecionar um arquivo que contenha o applet Java.

de applets Java.
Utilizaçã o dos comportamentos para controlar os elementos de mídia
É possível adicionar comportamentos à página, para iniciar e interromper diversos objetos de

mídia.
A opção Controlar o Shockwave ou Flash permite executar, parar, rebobinar ou ir para um

quadro de um filme Shockwave ou Flash (veja Controlar o Shockwave ou Flash).
A opção Executar o som permite executar um som. Por exemplo: é possível executar um
efeito de som sempre que o usu ário mover o ponteiro do mouse sobre um link (veja Executar o
som).
A opção Verificar o plug-in permite verificar se os visitantes do seu site já possuem o plug-in
necessário instalado e, em seguida, os direcionar para outras URLs, dependendo de eles
contarem com o plug-in correto. Isso se aplica somente aos plug-ins do Netscape, pois o
comportamento Verificar o plug-in n ão verifica os controles ActiveX. Para obter mais
informações, veja Verificar o plug-in.
Referência
Esta seção fornece informações sobre as caixas de diálogo e inspetores de propriedade

apresentados neste capítulo.
Definiçã o de propriedade de um objeto Flash
O inspetor de propriedades de objetos Flash – objetos de botão e texto gerados no

Dreamweaver – inicialmente exibe as propriedades mais comumente utilizadas. Clique na seta
de expansão, situada no canto inferior direito, para examinar outras propriedades.
A opção Nome especifica o nome que identificará o botão para a criação de scripts. Digite um
nome no campo sem título, à extrema esquerda do inspetor de propriedades.
As opções L e A especificam a largura e altura do objeto, em pixels. Também é possível

especificar estas unidades: pc (paicas), pt (pontos), pol (polegadas), mm (mil ímetros), cm
(centímetros) ou % (percentagem da largura ou altura do objeto-pai). As abreviaturas devem
se seguir ao valor, sem um espaço (por exemplo, 3mm).
A opção Arquivo especifica o caminho até o arquivo do objeto Flash. Clique no ícone
correspondente à pasta, para procurar um arquivo, ou digitar um caminho.
A opção Editar abre a caixa de diálogo de objeto Flash para ediçõ es no objeto Flash
selecionado.
A opção Redefinir o tamanho retorna o botão selecionado ao tamanho original do filme.
As opções Espaço V e Espaço H especificam o número de pixels de espaço em branco acima,

abaixo e em ambos os lados do botão.
A opção Qualidade define o parâmetro quality das tags object e embed, que definem o
botão. A aparência do filme é melhor com uma definição elevada, mas necessita um
processador mais r ápido para ser apresentado corretamente na tela. A opção Baixa enfatiza a
velocidade em detrimento da aparência, enquanto Alta favorece a aparência em detrimento da
velocidade. A opção Baixa automática enfatiza a velocidade de início, mas melhora a aparência,
se possível. A opção Alta automática enfatiza ambas as qualidades inicialmente, mas sacrifica a
aparência em função da velocidade, se necessário.
A opção Escala define o parâmetro scale das tags object e embed, que definem o objeto de
botão ou texto. Esse parâmetro define como o filme será exibido dentro da área definida para
ele pelos valores width e height. As opções são Padrão (mostrar todas), Sem bordas e Ajuste
exato. A opção Mostrar todas torna visível o filme inteiro na área especificada, ao manter as
mesmas proporções do filme e evitar a distorção. As bordas da cor de fundo poderão ser
exibidas nos dois lados do filme. A opção Sem bordas é semelhante a Mostrar todas, exceto que
partes do filme podem estar cortadas. Com a opção Ajuste exato, o filme inteiro preencherá a
área especificada, mas não serão mantidas as proporções do filme, podendo ocorrer algumas
distorções.
A opção Alinhar define como o objeto será alinhado na página. Para obter uma descrição de
cada opção, veja Alinhamento de uma imagem.
A opção Fundo especifica a cor de fundo do objeto.
A opção Executar/Parar permite visualizar o objeto Flash na janela do documento. Clique no

botão verde Executar, para examinar o objeto no modo Executar. Clique no botão vermelho
Parar, para finalizar o filme e tornar possível a edição do objeto.
A opção Parâmetros abre uma caixa de diálogo na qual é possível inserir outros parâmetros
(veja Utilização de parâmetros para controlar um objeto de m ídia ).
Utilizaçã o de parâmetros para controlar um objeto de mídia
Utilize a caixa de diálogo Parâmetros para digitar valores relacionados aos parâmetros especiais
definidos para os filmes Shockwave e Flash, controles ActiveX, plug-ins do Navigator e applets
Java. Os parâmetros são utilizados com as tags object, embed e applet. Os parâmetros
definem atributos específicos para o tipo de objeto a ser inserido. Por exemplo: um objeto de
filme Flash pode ter um parâmetro de qualidade<param name=”quality” value=”best”> para
a tag do objeto. A caixa de di álogo Parâmetro está disponível no inspetor de propriedades (veja
a documentação do objeto que estiver em uso, para obter informações sobre os parâmetros que
ele requer).
Nota: Não h á um padr ão universalmente aceito para identificar os arquivos de dados dos
controles ActiveX (consulte a documentação relativa ao controle ActiveX a ser utilizado, para
estabelecer os parâmetros a serem empregados).
Para abrir a caixa de diálogo Parâmetros:
1. Selecione um objeto que possa admitir parâmetros (como um filme Shockwave, um

controle ActiveX, um plug-in de Navigator ou um applet Java) na janela do documento.
2. Abra a caixa de di álogo utilizando um destes métodos:
¡ Clique com o botão direito do mouse (no Windows) no objeto e, no menu
contextual, escolha Parâmetros.
¡ Abra o inspetor de propriedades, se ainda não tiver sido aberto, e clique no botão
Parâmetros, localizado na parte inferior do inspetor de propriedades (certifique-se
de que o inspetor de propriedades está expandido).
Para digitar um valor de um parâmetro na caixa de diálogo Parâmetros:
1. Clique no botão com o sinal de adição (+).

2. Na coluna Parâmetro, digite o nome do parâmetro.
3. Na coluna Valor, digite o valor do parâmetro.
Para remover os parâmetros:
Selecione um parâmetro e pressionar o botão com o sinal de subtração ( -).
Para reordenar os parâmetros:
Selecione um parâmetro e utilizar os botões de seta para cima e para baixo.
Definiçã o de propriedades de filme Flash e Shockwave
Para garantir os melhores resultados, tanto em Internet Explorer como em Netscape Navigator,
Dreamweaver insere os filmes Flash utilizando as tags object e embed (a tag object é definida
por Microsoft para os controles ActiveX, enquanto embedé a tag definida por Navigator para os
plug-ins). Para exibir as propriedades a seguir no inspetor de propriedades, selecionar um filme
Flash ou Shockwave. Veja também Sobre o conteúdo Flash e Como inserir filmes Shockwave.
Clique na seta de expansão, situada no canto inferior direito, para examinar todas as
propriedades de filmes Flash.
A opção Nome especifica um nome que identificará o filme para a criação de scripts. Digite um
nome no campo sem título, à extrema esquerda do inspetor de propriedades.
A opções L e A especificam a largura e altura do filme, em pixels. Também é possível

especificar estas unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milímetros), cm
(centímetros) ou % (percentagem do valor do objeto-pai). As abreviaturas devem se seguir ao
valor, sem um espaço (por exemplo: 3mm).
A opção Arquivo especifica o caminho até o arquivo do filme Flash ou Shockwave. Clique no
ícone correspondente à pasta, para procurar um arquivo, ou digitar um caminho.
A opção Orig. especifica o caminho para um documento de origem Flash (FLA), quando
Dreamweaver MX e Flash MX estão instalados no computador. Para editar um arquivo de filme
Flash (SWF), atualizar o documento de origem do filme.
Editar permite iniciar Macromedia Flash MX para atualizar um arquivo FLA. Esse botão será
desativado se Macromedia Flash MX não estiver carregado no computador. Para obter
informações sobre edição e inserção de filme Flash, veja Edi ção de um filme Flash do
Dreamweaver.
A opção Redefinir o tamanho retorna o filme selecionado ao seu tamanho original.
A opção Loop, quando marcado, faz com que o filme seja executado continuamente; quando
desmarcado, o filme é executado uma vez e pára.
A opção Exec. Autom. executa o filme automaticamente quando a página é carregada.

abaixo e em ambos os lados do filme.
A opção Qualid. controla o efeito sem serrilhado durante a execução do filme. A aparência do
filme é melhor com uma definição elevada, mas necessita um processador mais rápido para ser
apresentado corretamente na tela. A opção Baixa enfatiza a velocidade em detrimento da
aparência, enquanto Alta favorece a aparência em detrimento da velocidade. A op ção Baixa
automática enfatiza a velocidade de início, mas melhora a aparência, se possível. A opção Alta
automática enfatiza ambas as qualidades inicialmente, mas sacrifica a aparência em função da
velocidade, se necessário.
A opção Escala determina como o filme se encaixa nas dimensões definidas nos campos largura
e altura. A definição Padrão exibe o filme inteiro.
A opção Sem bordas encaixa o filme nas dimensões definidas, para que nenhuma borda seja
exibida e mantém as mesmas proporções originais.
A opção Ajuste exato redimensiona o filme para as dimensões definidas, independentemente

das proporções.
A opção Alinhar determina como o filme será alinhado na página. Para obter uma descrição de
cada opção de alinhamento, veja Alinhamento de uma imagem.
A opção Fundo especifica uma cor de fundo para a área do filme. Essa cor também será exibida
enquanto o filme não estiver em execução (durante a carga e após a sua execução).
A opção Parâmetros abre uma caixa de diálogo na qual podem ser digitados parâmetros
adicionais a serem passados ao filme. Para obter mais informações sobre como adicionar ou
excluir parâmetros, veja Utilização de parâmetros para controlar um objeto de m ídia . O filme
deve ser projetado para poder admitir estes parâmetros adicionais.
Definiçã o de propriedades de plug-ins do Netscape Navigator
Após inserir o conteúdo de um plug-in de Netscape Navigator (veja Como inserir o conteúdo do
plug-in do Netscape Navigator), utilizar o inspetor de propriedades para definir os parâmetros
do conteúdo. Para exibir as propriedades a seguir no inspetor de propriedades, selecione um
objeto de plug-in do Netscape Navigator.
Inicialmente, o inspetor de propriedades exibirá as propriedades mais utilizadas. Clique na seta

de expansão, situada no canto inferior direito, para examinar todas as propriedades.
A opção Nome especifica um nome que identificará o plug-in para a criação de scripts. Digite
um nome no campo sem título, à extrema esquerda do inspetor de propriedades.
As opções L e A especificam a largura e altura, em pixels, alocadas ao objeto na página.

Também é possível especificar estas unidades: pc (paicas), pt (pontos), pol (polegadas), mm
(milímetros), cm (centímetros) ou % (percentagem da largura e altura do objeto-pai). As
abreviaturas devem se seguir ao valor, sem um espaço (por exemplo: 3mm).
A opção Orig. especifica o arquivo de origem dos dados. Clique no ícone correspondente à
pasta, para procurar um arquivo, ou digitar um nome de arquivo.
A opção URL do Plg especifica a URL do atributo pluginspage. Digite a URL completa do site
onde os usuários podem efetuar o download do plug-in. Se o usuário que estiver exibindo a
página não tiver o plug-in, o navegador tentará efetuar o download a partir dessa URL.
A opção Alinhar determina como o objeto será alinhado na página. Para obter uma descrição
de cada opção, veja Alinhamento de uma imagem.
As opções Espaço V e Espaço H especificam a quantidade de espaço em branco em pixels

acima, abaixo e em ambos os lados do plug-in.
A opção Borda especifica a largura da borda ao redor do plug-in.
A opção Parâmetros abre uma caixa de diálogo na qual poderão ser digitados parâmetros
adicionais, a serem passados ao plug-in do Netscape Navigator (veja Utilização de parâmetros
para controlar um objeto de mídia ). Muitos plug-ins respondem a parâmetros especiais. O plug-
in Flash, por exemplo: inclui parâmetros relacionados a bgcolor, salign e scale.
Também é possível exibir os atributos designados ao plug-in selecionado ao clicar no botão

Atributo. É possível editar, adicionar e excluir os atributos, como a largura e a altura, nessa
caixa de diálogo.
Definiçã o de propriedades do ActiveX
Após inserir um objeto ActiveX (veja Como inserir um controle ActiveX), utilizar o inspetor de
propriedades para definir os atributos da tag object e parâmetros do controle ActiveX. Clique
em Parâmetros, no inspetor de propriedades, para digitar os nomes e valores relativos às
propriedades que não são exibidos no inspetor de propriedades. Não há um formato padrão
universalmente aceito para os parâmetros dos controles ActiveX. Para estabelecer os
parâmetros a serem empregados, consulte a documentação relativa ao controle ActiveX a ser
utilizado.

A opção Nome especifica um nome que identificará o objeto ActiveX para a criação de scripts.
Digite um nome no campo sem título, à extrema esquerda do inspetor de propriedades.
As opções L e A especificam a largura e a altura do objeto, em pixels. Também é possível

(centímetros) ou % (percentagem da largura e altura do objeto-pai). As abreviaturas devem se
seguir ao valor, sem um espaço (por exemplo: 3mm).
A opção Identificaçã o da classe identifica o controle ActiveX ao navegador. Digite um valor

ou escolha um valor no menu pop-up. Quando a página tiver sido carregada, o navegador
utilizará o identificador de classe para localizar o controle ActiveX necessário ao objeto ActiveX
associado à página. Se o navegador não conseguir localizar o controle ActiveX especificado, ele
tentará efetuar o download a partir do local especificado em Base.
A opção Incorporar adiciona uma tag embed dentro da tag object do controle ActiveX. Se o
controle ActiveX tiver um equivalente do plug-in do Netscape Navigator, a tag embed ativará o
plug-in. O Dreamweaver atribui os valores digitados como propriedades ActiveX equivalentes do
plug-in do Netscape Navigator.
A opção Parâmetros abre uma caixa de diálogo na qual poderão ser digitados parâmetros
adicionais, a serem passados ao objeto ActiveX (veja Utilização de parâmetros para controlar
um objeto de mídia ). Muitos controles ActiveX respondem a parâmetros especiais.
A opção Orig. define o arquivo dos dados a ser utilizado para um plug-in do Netscape
Navigator, se a opção Incorporar estiver ativa. Se um valor não for digitado, Dreamweaver
tentará determinar o valor a partir das propriedades de ActiveX que já tiverem sido digitadas.

abaixo e em ambos os lados do objeto.
A opção Base especifica a URL que contém o controle ActiveX. O Internet Explorer efetuará o
download do controle ActiveX deste local, se ele ainda não tiver sido instalado no sistema do
visitante. Se não for especificado um parâmetro Base e o visitante ainda não tiver o controle
ActiveX necessário instalado, o navegador não poderá exibir o objeto ActiveX.
A opção Imag. alt. especifica uma imagem a ser exibida, se o navegador n ão oferecer suporte
à tag object. Essa opção estará disponível apenas quando a opção Incorporar não estiver
selecionada.
A opção Dados especifica um arquivo de dados a ser carregado pelo controle ActiveX. Muitos
controles ActiveX, como Shockwave e RealPlayer, não utilizam este parâmetro.
Definiçã o de propriedades de applets Java
Após inserir um applet Java (veja Como inserir um applet Java), utilizar o inspetor de
propriedades para definir os parâmetros. Para exibir as propriedades a seguir no inspetor de
propriedades, selecionar um applet Java.

A opção Nome especifica um nome que identificará o applet para a criação de scripts. Digite
um nome no campo sem título, à extrema esquerda do inspetor de propriedades.
As opções L e A especificam a largura e altura do applet, em pixels. Também é possível

(centímetros) ou % (percentagem da largura ou altura do objeto-pai). As abreviaturas devem
se seguir ao valor, sem um espaço (por exemplo, 3mm).
A opção Código especifica o arquivo contendo o código Java do applet. Clique no ícone
correspondente à pasta, para procurar um arquivo, ou digitar um nome de arquivo.
A opção Base identifica a pasta que contém o applet selecionado. Ao escolher um applet, esse
campo será preenchido automaticamente.
A opção Alt especifica um conteúdo alternativo (geralmente uma imagem) que será exibido se
o navegador do usuário não oferecer suporte aos applets Java ou estiver com Java desativado.
Se o texto for digitado, Dreamweaver o interpretará através da utilização do atributo alt da tag
applet. Se uma imagem for escolhida, Dreamweaver inserirá uma tag img entre as tags applet
de abertura e finalização.
Nota: Para especificar um conteúdo alternativo que possa ser exibido tanto em Netscape
Navigator (com Java desativado) como em Lynx (um navegador com base em texto), selecionar
uma imagem e adicionar manualmente um atributo alt à tag img no inspetor de código.
As opções Espaço V e Espaço H especificam a quantidade de espaço em branco, em pixels,

abaixo e em ambos os lados do applet.
A opção Parâmetros abre uma caixa de diálogo na qual podem ser digitados parâmetros
adicionais a serem passados ao applet Veja Utilização de parâmetros para controlar um objeto
de m ídia . Muitos applets respondem a parâmetros especiais.
Dreamweaver e Acessibilidade
A acessibilidade refere -se a projetar sites e produtos da Web úteis para portadores de
deficiência auditiva, visual, motora e outras. O Macromedia Dreamweaver MX fornece as
ferramentas que tornam o produto acessível e ajudam a produzir conteúdo acessível.
Os exemplos de recursos de acessibilidade para produtos de software e sites da Web incluem

suporte à leitora de tela, equivalentes de texto para gráfico, atalhos de teclado, alteração de
cores para alto contraste, etc.
Como o número de pessoas deficientes que acessam a Web continua a crescer, é cada vez mais
importante que os programadores tornem seus produtos e sites da Web acessíveis a todos os
usuários em potencial. Para isso, o governo dos EUA e outras organizações estabeleceram
legislação e diretrizes para garantir que os programadores produzam conteúdo acessível. Para
obter mais informações sobre duas iniciativas significativas, veja World Wide Web Consortium
Web Accessibility Initiative e a seção 508 do Federal Rehabilitation Act.
Para um designer da WebDreamweaver que precisa utilizar os recursos de acessibilidade do

Dreamweaver, este capítulo informa sobre Dreamweaver suporte à leitora de tela, navegação
de teclado e suporte à acessibilidade do sistema operacional.
Para um designer da Web Dreamweaver que precisa criar conteúdo acessível, este capítulo
informa sobre a utilização das caixas de diálogo Acessibilidade Dreamweaver e testa a
acessibilidade do site.
A projeção de um site da Web acessível exige o entendimento das necessidades de

acessibilidade e a tomada de muitas decisões subjetivas. O Dreamweaver auxilia na criação de
sites da Web acessíveis. Por exemplo: o Dreamweaver permite adicionar textos equivalentes
para os gráficos–e igualmente lembrar o usuário a fazer isso, caso esqueça. Entretanto,
nenhuma ferramenta de autoria pode automatizar o processo de desenvolvimento. Os designers
precisam pensar sobre como os usuários com deficiências interagem com as páginas da Web. A
melhor maneira de garantir que um site da Web está acessível é por meio de planejamento
deliberado, desenvolvimento, teste e avaliação.
Este capítulo aborda os tópicos a seguir:
l Utilização dos recursos de acessibilidade do Dreamweaver

l Autoria da acessibilidade
l Teste de acessibilidade do site da Web
Utilizaçã o dos recursos de acessibilidade do Dreamweaver
O Dreamweaver fornece recursos que o tornam acessível aos usuários com deficiências.
Especificamente, o Dreamweaver oferece suporte a leitoras de tela, recursos de acessibilidade
do sistema operacional e navegação pelo teclado.
Nota: Os modos Dreamweaver 4 Workspace e Dreamweaver 5 Workspace suportam os

recursos de acessibilidade do Dreamweaver, mas é recomendável utilizar o Dreamweaver 4
workspace. Para alterar os modos, escolha Editar > Preferências e selecione Geral na lista de
categorias à esquerda. Clique no botão Alterar Workspace, selecione Dreamweaver 4
Workspace e clique em OK.
Utilizaçã o das leitoras de tela com Dreamweaver
Uma leitora de tela relaciona o texto exibido na tela do computador. Ela também lê as
informações não textuais, tais como identificadores de botão ou descrições de imagem no
aplicativo, fornecidas nas guias de acessibilidade ou atributos durante a autoria.
O Dreamweaver suporta as leitoras de tela JAWS for Windows, do Freedom Scientific , e Window
Eyes, do GW Micro . Como usuário do Dreamweaver, é possível utilizar uma leitora de tela para
auxiliá-lo na cria ção de páginas da Web. A leitora de tela inicia a leitura no canto superior
esquerdo da janela do documento.
Utilizaçã o dos recursos de acessibilidade do sistema operacional
O Dreamweaver suporta a definição de alto contraste do sistema operacional Windows. O

usuário ativa esta opção por meio do painel de controle do Windows. Quando o alto contraste
está ativado, ele afeta o Dreamweaver como segue:
l As caixas de diálogo e os painéis utilizam as definições de cor do sistema.
Por exemplo: se definir a cor como Branco ou Preto, todas as caixas de diálogo e painéis
do Dreamweaver ser ão exibidos com uma cor de primeiro plano branca e de segundo
plano preta.
l A sinalização da sintaxe por cores da visualização do c ódigo est á desativada.
A visualização do c ódigo utiliza a janela do sistema e a cor do texto da janela, e ignora as

definições de cor em Preferências. Por exemplo: se definir a cor do sistema como Branco
ou Preto e alterar as cores do texto em Preferências > Codifica ção por cores, o
Dreamweaver ignora a definição de cores em Prefer ências e exibe o texto do c ódigo com
uma cor branca em primeiro plano e preta em segundo plano.
l A visualização do projeto utiliza as cores de segundo plano e texto definidas em

Modificar > Propriedades de página para que o design das páginas processe as cores
como um browser.
Utilizaçã o do teclado para navegar nos painéis
É possível utilizar o teclado para navegar nos painéis flutuantes, no inspetor de propriedades,
nas caixas de diálogo, nas molduras e nas tabelas do Dreamweaver sem um mouse.
Esta seção contém os tópicos a seguir:
l Painéis de navegação
l Como navegar no inspetor de propriedades
l Caixas de diálogo de navegação
l Como navegar em molduras
l Como navegar nas tabelas
Painéis de navegação
É possível utilizar o teclado para navegar nos painéis
Nota: A utilização de tabulação e teclas de setas é suportada somente pelo Windows.
Para navegar nos pain éis:
1. Na janela do documento, pressione Control+Alt+Tab para mudar o foco para um painel.
Um contorno branco em torno da barra de títulos do painel indica que o foco está nesse
painel. A leitora de tela l ê a barra de títulos do painel que está no foco.
2. Pressione Control+Alt+Tab novamente para mudar o foco para o próximo painel.
Continue até ter o foco no painel com o qual deseja trabalhar.
3. Pressione Control+Alt+ Shift+Tab para mudar o foco para o painel anterior, se

necessário.
4. Se o painel desejado não estiver aberto, utilize os atalhos de teclado listados no menu
Windows para exibir o painel apropriado e pressione Control+Alt+Tab para mudar o foco
para esse painel.
Se o painel desejado estiver aberto, mas não expandido, coloque o foco na barra de
títulos do painel e pressione a barra de espaço. Pressione a barra de espaço novamente
para reduzir o painel.
5. Pressione a tecla Tab para percorrer as opções no painel.
Um contorno pontilhado em torno da opção indica que o foco está nessa opção.
6. Utilize as teclas de seta quando apropriado.

¡ Se uma opção contém outras opções, utilize as teclas de setas para percorrer as
opções e pressione a barra de espaço para fazer uma seleção.
¡ Se houver guias no grupo de painel para abrir outros painéis, coloque o foco na guia
aberta e utilize a tecla de seta para a esquerda ou para a direita para abrir outras
guias. Ao abrir uma nova guia, pressione a tecla Tab para percorrer as opções nesse
painel.
Como navegar no inspetor de propriedades
É possível utilizar o teclado para navegar no inspetor de propriedades e fazer altera ções no
documento.
Para navegar no inspetor de propriedades:
1. Pressione Control+F3 para exibir o inspetor de propriedades, se ele ainda não estiver
visível.
2. Pressione Control+Alt+Tab até mudar o foco para o inspetor de propriedades.
3. Pressione a tecla Tab para percorrer as opções do inspetor de propriedades.
4. Utilize as teclas de setas conforme apropriado para percorrer as opções e pressione Enter
para fazer uma seleção.
5. Pressione Control+Tab para abrir e fechar a seção expandida do inspetor de propriedades
quando necessário, ou, com o foco na seta de expansão na parte inferior direita,
pressione a barra de espaço.
Caixas de diálogo de navegação
É possível utilizar o teclado para navegar nas caixas de diálogo.
Nota: A utilização de tabulação e teclas de setas é só é possivel no Windows.
Para navegar em uma caixa de diálogo:
1. Pressione a tecla Tab para percorrer as opções em uma caixa de di álogo.

2. Utilize as teclas de setas para percorrer as opções de uma opção.
Por exemplo: se uma opção tem um menu pop-up, mova o foco para essa opção e utilize
a seta para baixo para percorrer as opções.
3. Se a caixa de di álogo tem uma lista de categorias, pressione Control+Tab para mudar o
foco para a lista de categorias e utilize as teclas de seta para mover-se para cima ou para
baixo na lista.
4. Pressione Control+Tab novamente para mudar as opções de uma categoria.

5. Pressione Enter para sair da caixa de diálogo.
Como navegar em molduras
Se o documento contém molduras, é possível utilizar as teclas de setas para mudar o foco para
uma moldura.
Para selecionar uma moldura:
1. Coloque o ponto de inserção na janela do documento.

2. Pressione Alt+Seta para Cima, para selecionar a moldura que atualmente está no foco.
Uma linha pontilhada indica a moldura que está no foco.
3. Continue pressionando Alt+Seta para Cima para mudar o foco para o conjunto de
molduras e, em seguida, conjuntos de molduras-pai, se houver conjuntos de molduras
aninhados.
4. Pressione Alt+Seta para Baixo, para mudar o foco para um conjunto de molduras filho ou
uma única moldura no conjunto de molduras.
5. Com o foco em uma única moldura, pressione Alt+Seta para a Esquerda ou para a Direita
para percorrer as molduras.
6. Pressione Alt+Seta para a Direita para colocar o ponto de inserção na janela do
documento.
Como navegar nas tabelas
Após selecionar uma tabela, é possível utilizar o teclado para navegar nela.
Para navegar em uma tabela:
1. Na janela do documento, siga um dos procedimentos abaixo para selecionar a tabela:

¡ Se o ponto de inserção estiver à esquerda da célula, pressione Shift+Seta para a
Direita.
¡ Se o ponto de inserção estiver à direita da célula, pressione Shift+ Seta para a
Esquerda.
2. Pressione a seta para baixo para posicionar o cursor na primeira célula.
3. Utilize as teclas de setas ou pressione Tab para percorrer as outras células quando
necessário.
Dica: Quando a tecla de tabulação for pressionada na c élula mais à direita, ser á
adicionada automaticamente outra linha à tabela.
4. Para selecionar uma célula, pressione Control+A enquanto o ponto de inserção está na
célula.
5. Para sair da tabela, utilize o comando Selecionar Tudo (Control+A) duas vezes, e
pressione a tecla de seta para cima, para a esquerda ou para a direita.
Autoria da acessibilidade
O Dreamweaver auxilia o usuário a criar páginas acessíveis com conteúdo útil para as leitoras
de tela e são compatíveis com as diretrizes do governo.
Ao ativar as caixas de diálogo de acessibilidade (veja Ativa ção das caixas de diálogo
Acessibilidade), o Dreamweaver solicita que sejam inseridos atributos de acessibilidade sempre
que forem inseridos elementos de página.
Nota: Para ver as páginas de exemplo projetadas para a acessibilidade, selecione Arquivo >
Novo. Na caixa de diálogo Novo documento, selecione Projeto de página (Acessibilidade) na lista
de categorias e selecione uma página na lista Projeto de página (Acessibilidade). Para obter
mais informações, veja Como trabalhar com a caixa de diálogo Novo documento.
Desenvolvimento de conteúdo para leitoras de tela
Para tornar as informaçõ es acessíveis às leitoras de tela e aos usuários do site da Web, o
Dreamweaver facilita a adição de equivalentes de texto para elementos gr áficos de uma página,
e permite observar as tabelas e formatos em HTML para leitoras de tela e outras tecnologias
auxiliares.
Por exemplo: é possível adicionar uma imagem de produto ao documento e associar uma
descri ção qualquer. Em seguida, quando a imagem for exibida em uma página para um usuário
com deficiência visual, a leitora de tela l ê a descrição, e o usuário sabe qual produto é exibido
na página.
O Dreamweaver solicita adicionar equivalentes de texto para elementos gráficos e marcas

relacionadas à acessibilidade ao ativar as caixas de di álogo Acessibilidade, como descrito em
Ativa ção das caixas de diálogo Acessibilidade.
Ativação das caixas de diálogo Acessibilidade
Ao criar páginas acessíveis, é necessário associar informações, tais como identificadores e

descri ções, aos objetos da página para tornar o conteúdo acessível a todos os usuários. Para
fazer isso, ativar as caixas de di álogo Acessibilidade, de maneira que o Dreamweaver solicite as
informações que o usuário necessita adicionar para obter acessibilidade. Essas caixas de diálogo
são exibidas ao inserir um objeto para o qual o usuário ativou a caixa de di álogo Acessibilidade
correspondente.
Para ativar as caixas de di álogo Acessibilidade:
1. Selecione Editar > Preferências.
A caixa de diálogo Preferências é exibida.
2. Na lista de categorias, à esquerda, selecione Acessibilidade.
A caixa de diálogo Preferências exibe as opções de acessibilidade.
3. Preencha a caixa de diálogo.
Para obter mais informações, veja Definição das op ções de acessibilidade preferidas pelo
usuário.
4. Clique em OK.
Para cada elemento selecionado, uma caixa de diálogo Acessibilidade solicita a digitação das
guias de acessibilidade e os atributos ao inserir esse elemento em um documento.
Para obter mais informações sobre a adição de conte údo acessível ao site da Web, veja as
seções a seguir:
l Como inserir imagens acessíveis

l Como inserir objetos de formulário acessíveis
l Como inserir molduras acessíveis
l Como inserir objetos de m ídia acessíveis
l Como inserir tabelas acessíveis
Como inserir imagens acessíveis
Ao inserir uma imagem, tendo selecionado a opção Imagens nas preferências de Acessibilidade,
o Dreamweaver solicita a digitação das informações para tornar a imagem acessível.
Nota: Para tornar acessíveis os alocadores de espaço da imagem e as imagens interativas, tais
como imagens cambiáveis e barras de navegação, digite o Texto alternativo ao inserir a
imagem. Para obter mais informações, veja Como inserir imagens.
Para inserir uma imagem acessível:
1. Coloque o ponto de inserção na janela do documento em que deseja adicionar a imagem.

¡ Clique no botão Imagem na guia Comuns da barra Inserir.
¡ Arraste o ícone Imagem da barra Inserir para o documento.
A caixa de diálogo Fonte da imagem é exibida.
3. Clique em Procurar, para escolher um arquivo, ou digite o caminho do arquivo de

imagem.
Se estiver trabalhando em um documento que não foi salvo, o Dreamweaver gera uma
referência da localização do arquivo para o arquivo de imagem. Ao salvar o documento
em algum lugar do site, Dreamweaver converterá a refer ência em um caminho relativo ao
documento.
4. Clique em OK.
A caixa de diálogo Atributos de acesso da tag de imagens é exibida.
5. Digite os valores nas caixas de texto Alt e Longdesc.
Para obter mais informações, veja Definição das op ções da caixa de diálogo Atributos de
acesso da tag de imagens.
Nota: É possível inserir uma ou duas caixas de texto, dependendo das necessidades.
6. Clique em OK.
A imagem é exibida no documento.
Nota: Caso pressione Cancelar, a imagem é exibida no documento, mas o Dreamweaver

não associa tags de acessibilidade a ele.
Para editar os valores de acessibilidade de uma imagem:
1. Na janela do documento, selecione a imagem.

¡ Edite os atributos de imagem apropriados na visualização do c ódigo:
¡ Clique com o botão direito do mouse e escolha Editar o código da tag.

¡ Edite o valor Alt no inspetor de propriedades.
Como inserir objetos de formul ário acessíveis
Ao inserir um objeto de formulário, e tendo selecionado a opção Objeto de formul ário nas
preferências de Acessibilidade, o Dreamweaver solicita a digitação das informações para tornar
o objeto de formulário acess ível.
Para adicionar um objeto de formul ário acessível:
1. No documento, coloque o ponto de inserção no local onde deverá ser exibido o formulário.
2. Para inserir um objeto de formulário, siga um dos procedimentos abaixo:
¡ Escolha Inserir > Objeto de formulário, e selecione um objeto de formulário a
inserir.
¡ Na barra Inserir, selecione a guia Formulários e clique em um botão de objeto.
¡ Na barra Inserir, selecione a guia Formulários e arraste o ícone apropriado para o

documento.
A caixa de diálogo Atributos de acesso da tag de entrada é exibida.
acesso da tag de objeto.
4. Clique em OK.
Nota: Caso pressione Cancelar, o objeto de formulário é exibido no documento, mas o

Dreamweaver não associa tags de acessibilidade a ele.
5. Se o Dreamweaver solicitar a inserção de uma tag de formul ário, clique em Sim.
O objeto de formul ário será exibido no documento.
Para editar os valores de acessibilidade de um objeto de formulário:
1. Na janela do documento, selecione o objeto.

¡ Edite os atributos apropriados na visualização do código.
Para tornar din âmico um objeto de formulário acessível:
1. Na janela do documento, selecione o objeto de formul ário que deseja tornar dinâmico.
2. Clique com o botão direito do mouse e escolha Editar o código da tag.
3. Edite os atributos necessários para tornar o objeto dinâmico.
Nota: É imposs ível utilizar o painel de ligações para adicionar um objeto de formulário dinâmico
acessível.
Como inserir molduras acess íveis
Ao inserir um conjunto de molduras, tendo selecionado a opção Imagens nas preferências de

acessibilidade, o Dreamweaver solicita que digite um nome para cada moldura ficar acessível.
Para inserir um conjunto de molduras acessível:
1. Coloque o ponto de inserção no documento.

2. Siga um dos procedimentos abaixo para inserir um conjunto de molduras:
¡ Escolha Inserir > Molduras, e selecione um conjunto de molduras.
¡ Clique na guia Molduras, na barra Inserir, e no botão do conjunto de molduras
apropriado.
¡ Clique na guia Molduras, na barra Inserir, e arraste o ícone do conjunto de molduras
apropriado para o documento.
O conjunto de molduras é exibido no documento e a caixa de diálogo Atributos de

acesso da tag de molduras é exibida.
3. Selecione uma moldura do menu pop-up e digite um nome para a moldura.
acesso da tag de molduras.
Dica: Escolha Janela > Outras > Molduras para exibir um diagrama das molduras que o
usuário está denominando.
4. Repita a etapa anterior até denominar cada moldura.

5. Clique em OK.
Nota: Caso pressione Cancelar, o conjunto de molduras é exibido no documento, mas o

Para editar os valores de acessibilidade de uma moldura:
1. Exiba a visualização do c ódigo ou a visualização dividida do documento, se estiver

visualizando o projeto atualmente.
2. Escolha Janela > Outras> Molduras, para abrir o painel Molduras.
3. Selecione uma moldura colocando o ponto de inserção em uma das molduras:
O Dreamweaver realça a tag da moldura no c ódigo.

¡ Edite o código na visualização do código
Como inserir objetos de m ídia acessíveis
Ao inserir um objeto de mídia, tendo selecionado a opção M ídia nas preferências de

acessibilidade, o Dreamweaver solicita a digitação das informações para tornar o objeto de
mídia acessível.
Para inserir um objeto de mídia acessível:
1. Na janela do documento, coloque o ponto de inserção no local onde deverá ser exibido o
objeto de m ídia.
¡ Escolha Inserir > Mídia e selecione um item.
¡ Clique na guia Mídia na barra Inserir e clique em um botão de objeto.

¡ Clique na guia Mídia na barra Inserir e arraste o ícone apropriado para o
documento.
Uma caixa de di álogo Selecionar arquivo ou Inserir flash é exibida.
Nota: Para objetos Active X, a caixa de di álogo de acessibilidade é exibida. Para

esses objetos, ignore a próxima etapa.
3. Preencha a caixa de diálogo Selecionar arquivo ou Inserir flash, e clique em OK.
A caixa de diálogo Atributos de acesso da tag de objeto é exibida.
acesso da tag de objeto.
5. Clique em OK.
O objeto de mídia é exibido no documento.
Nota: Caso pressione Cancelar, o alocador de espaço do objeto de m ídia será exibido no
documento, mas o Dreamweaver não associa tags de acessibilidade a ele.
Para editar valores de acessibilidade de um objeto de mídia:
1. Na janela do documento, selecione o objeto.

¡ Edite os atributos apropriados na visualização do código.
Como inserir tabelas acessíveis
Ao inserir uma tabela, tendo selecionado a opção Tabelas nas preferências de acessibilidade, o
Dreamweaver solicita que digite um nome para cada tabela para torná-la acessível.
Para inserir uma tabela acessível:
1. Na janela do documento, coloque o ponto de inserção no local onde deverá ser exibida a
tabela.
¡ Selecione Inserir > Tabela.
¡ Clique no botão Tabela na guia Comuns da barra Inserir.
¡ Arraste o ícone Tabela da guia Comuns na barra Inserir para o documento.
A caixa de diálogo Inserir tabela com atributos de acesso é exibida.
Para obter mais informações, veja Definição das op ções da caixa de diálogo Inserir tabela
com atributos de acesso.
4. Clique em OK.
A tabela será exibida no documento.
Nota: Se pressionar Cancelar, a tabela não será exibida no documento.
Para editar os valores de uma tabela:
1. Na janela do documento, selecione a tabela.

¡ Edite os atributos da tabela apropriada na visualização do c ódigo.
Teste de acessibilidade do site da Web
A melhor maneira de garantir que o site est á acessível a todos os usuários é projetar o site de
acordo com as diretrizes de acessibilidade da Seção 508 do Ato de Reabilitação 1998. Em
seguida, utilize o recurso de relatórios do Dreamweaver para verificar se as diretrizes foram
implementadas no site.
É possível executar um relatório de acessibilidade sobre o documento atual, os arquivos

selecionados, uma pasta ou um site inteiro.
Para executar um relatório de acessibilidade sobre o documento atual:
1. Abra o documento que deseja verificar.

2. Escolha Arquivo > Verificar página > Verificar acessibilidade.
Os resultados do relatório são exibidos no painel Relatórios do site (no grupo de painel
Resultados).
Para executar um relatório de acessibilidade sobre o conteúdo selecionado:
1. Siga um dos procedimentos abaixo para selecionar o conteúdo que deseja verificar:
¡ Abra um documento.
¡ Selecione os arquivos no painel Site.
¡ Escolha um site no menu pop-up Site do painel Site.
Nota: Para executar um relatório de acessibilidade sobre uma pasta, não é

necessário selecionar agora; selecione a pasta na caixa de diálogo Relatórios.
2. Escolha Site > Relatórios
A caixa de diálogo Relatórios é exibida.
3. Selecione o conteúdo desejado no menu pop-up Relatório sobre e selecione

Acessibilidade.
Nota: Se selecionar Pasta no menu pop-up Relatório sobre, clique em Procurar para
selecionar uma pasta.
4. Clique em Executar.
Resultados).
Para exibir e editar os problemas informados:
1. Execute um relatório de acessibilidade sobre o conteúdo do site da Web, caso ainda não
tenha feito.
Resultados). Selecione qualquer linha no relatório e clique no botão Mais info, no lado
esquerdo do painel Relatórios do site, para obter uma descrição do problema e sugestões
para resolvê-lo.
As informações aparecerão no painel Refer ência (no grupo de painéis Código).
2. Clique duas vezes em qualquer linha do relatório, para exibir o código correspondente na
Nota: Na visualização do projeto, o Dreamweaver altera a exibição para visualização

dividida para mostrar o problema relatado em c ódigo.
3. Na janela do documento, na visualização do código, edite ou adicione atributos às tags

apropriadas para tornar o conteúdo compatível com as diretrizes de acessibilidade.
Para utilizar o editor de tags para auxiliar na codifica ção, selecione o código, clique com o
botão direito do mouse e escolha o editor de tags. Para obter mais informações sobre tags
e atributos, selecione Referência HTML O’Reilly no painel Referência (no grupo de painel
Código), e selecione uma tag.
Para salvar um relatório de acessibilidade:
Clique no botão Salvar, no lado esquerdo do painel Relatórios do site.
Sobre este recurso
O recurso de validação da acessibilidade no Dreamweaver MX utiliza a tecnologia UsableNet. A

UsableNet é líder na ind ústria de desenvolvimento de software fácil de utilizar para automatizar
a utilização e o processo de reparo e teste de acessibilidade. Para obter auxílio adicional com o
teste de acessibilidade, tente o UsableNet LIFT for Macromedia Dreamweaver, uma solução
completa para desenvolvimento de sites da Web úteis e acess íveis. O UsableNet Lift for
Macromedia Dreamweaver inclui assistentes de reparo para tabelas complexas, formul ários e
imagens; um editor ALT global; relatórios personalizáveis; e um novo modo de monitoramento
ativo que garante a acessibilidade do conteúdo conforme as páginas são construídas. Solicite
uma demonstração do Lift for Macromedia Dreamweaver em http://www.usablenet.com.
Referência
Esta seção contém informações sobre as caixas de diálogo apresentadas neste capítulo.
Definiçã o das opções de acessibilidade preferidas pelo usuário
O objetivo desta caixa de diálogo é ativar as caixas de diálogo de acessibilidade e ativar as

fontes grandes para os painéis.
Procedimento
1. Em Mostrar atributos ao inserir, selecione os elementos para os quais deseja ativar as

caixas de diálogo de acessibilidade.
Para cada elemento selecionado, uma caixa de diálogo de acessibilidade solicita que o
usuário digite as tags de acessibilidade ou os atributos ao inserir esse elemento em um
documento.
2. Selecione a caixa de sele ção Solicitar ao Dreamweaver que utilize fontes grandes, caso
deseje utilizar fontes grandes.
3. Desmarque a caixa de seleção Processamento fora de tela caso tenha problemas com a
leitora de tela.
4. Clique em OK.
Tópico relacionado
Ativa ção das caixas de diálogo Acessibilidade
Definiçã o das opções da caixa de diálogo Atributos de acesso da tag de imagens
O objetivo desta caixa de diálogo é definir as op ções de acessibilidade da tag de imagem. É

possível digitar um atributo ou ambos dependendo das suas necessidades. A leitora de tela lê o
atributo Alt da imagem.
Procedimento
1. Na caixa de texto Alt, digite um nome ou uma breve descrição para a imagem.
A leitora de tela lê as informações digitadas aqui. É necessário limitar a entrada a cerca

de 50 caracteres. Para descriçõ es maiores, considere o fornecimento de um link, na caixa
de texto Longdesc, para um arquivo que fornece mais informações sobre a imagem.
2. Na caixa de texto Longdesc, digite a localização de um arquivo que é exibido quando o

usuário clica na imagem ou no ícone de pasta para procurar o arquivo.
Este campo fornece um link para um arquivo que se refere ou fornece mais informações
sobre a imagem.
3. Clique em OK.
Nota: Caso pressione Cancelar, a imagem é exibida no documento, mas o Dreamweaver

não associa tags de acessibilidade a ele.
Tópico relacionado
Como inserir imagens acessíveis
Definiçã o das opções da caixa de diálogo Atributos de acesso da tag de entrada
O objetivo desta caixa de diálogo é definir as op ções de acessibilidade do objeto de formul ário.
A leitora de tela lê o atributo Identificador do objeto.
Procedimento
1. Digite um nome para o objeto de formulário na caixa de texto Identificador.

2. Selecione um estilo:
O estilo Quebra automática com a tag de identificador insere uma tag de

identificador em torno do item de formulário, como segue:
<identificador>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>
O estilo Anexar a tag de identificador utilizando o atributo 'for' utiliza o atributo “for”
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">

<label for="radiobutton">RadioButton2</label>
Esta opção faz o navegador processar o texto associado a uma caixa de seleção e um botã
Nota: Esta é a opção preferida para obter acessibilidade; entretanto, a funcionalidade pode variar dep
O estilo Nenhuma tag de identificador não utiliza uma tag de identificador, como segue:
<input type="radio" name="radiobutton" value="radiobutton">

RadioButton3
3. Selecione uma Posição para o identificador em relação ao objeto de formulário: Depois do

Item de Formulário ou Antes do Item de Formulário.
4. Digite um equivalente de teclado (uma letra) na caixa de texto Tecla de acesso para
selecionar o objeto de formulário no navegador.
Utilize a tecla Control (no Windows) com a Tecla de acesso para acessar o objeto. Por
exemplo: caso digite B como Tecla de acesso, utilize Control+B para selecionar o objeto
no navegador.
5. Digite um número para a ordem das guias do objeto de formulário na caixa de texto
Índice de guias.
A defini ção de uma ordem de guias é útil quando há outros links e objetos de formulário
na página e o usu ário necessita percorrê-los em uma ordem espec ífica. Caso defina uma
ordem de guias de um objeto, verifique se definiu a ordem de guias para todos eles.
6. Clique em OK.
Nota: Caso pressione Cancelar, o objeto de formulário é exibido no documento, mas o

Tópico relacionado
Como inserir objetos de formulário acess íveis
Definiçã o das opções da caixa de diálogo Atributos de acesso da tag de molduras
O objetivo desta caixa de diálogo é definir as op ções de acessibilidade da moldura. A leitora da

tela lê o nome da moldura.
Procedimento
1. Selecione uma moldura no menu pop-up.

2. Digite um nome significativo para a moldura.
Dica: Escolha Janela > Outras > Molduras para exibir um diagrama das molduras que
estão sendo denominadas.
3. Repita para cada moldura.

4. Clique em OK.
Nota: Caso pressione Cancelar, o conjunto de molduras é exibido no documento, mas o

Se não fizer nenhuma alteração nesta caixa de diálogo e clique em OK, o Dreamweaver fornece
à moldura o mesmo título do nome. O nome da moldura corresponde à sua posição.
Tópico relacionado
Como inserir molduras acessíveis
Definiçã o das opções da caixa de diálogo Atributos de acesso da tag de objeto
O objetivo desta caixa de diálogo é definir as op ções de acessibilidade do objeto de m ídia. A

leitora de tela lê o título do objeto.
Procedimento
1. Digite o título do objeto de mídia na caixa de texto Título.

2. Digite um equivalente de teclado (uma letra) na caixa de texto Tecla de acesso para
selecionar o objeto de formulário no navegador.
Utilize a tecla Control (no Windows) com a Tecla de acesso para acessar o objeto. Por
exemplo: caso digite B como Tecla de acesso, utilize Control+B para selecionar o objeto
no navegador.
3. Digite um número para a ordem das guias do objeto de formulário na caixa de texto
Índice de guias.
A defini ção de uma ordem de guias é útil quando há outros links e objetos de formulário
na página e o usu ário necessita percorrê-los em uma ordem espec ífica. Caso defina uma
ordem de guias de um objeto, verifique se definiu a ordem de guias para todos eles.
4. Clique em OK.
Nota: Caso pressione Cancelar, o alocador de espaço do objeto de m ídia será exibido no
documento, mas o Dreamweaver não associa tags de acessibilidade a ele.
Tópico relacionado
Como inserir objetos de m ídia acessíveis
Definiçã o das opções da caixa de diálogo Inserir tabela com atributos de acesso
O objetivo desta caixa de diálogo é definir as op ções de acessibilidade. A leitora de tela l ê a

Legenda e o Resumo.
Procedimento
1. Preencha os campos da tabela padrão: Linhas, Colunas, Preenchimento da célula,

Espaçamento da célula, Largura e Borda.
Para obter mais informações, veja Como inserir uma tabela.
2. Na caixa de texto Legenda, digite um título para ser exibido fora da tabela.
3. Selecione uma opção Alinhar para a legenda em relação à tabela.
4. Digite uma descrição da tabela na caixa de texto Resumo.
A leitora de tela lê o texto de resumo, mas isso não é exibido no navegador do usuário.
5. Selecione uma opção de cabeçalho, para ajudar os usuários da leitora de tela a

acompanhar as informações da tabela, do menu pop-up Cabe çalho:
¡ A opção Nenhum não ativa os cabeçalhos de coluna e linha da tabela
¡ A opção Coluna transforma a primeira coluna da tabela em uma coluna de
cabeçalhos, para que o usu ário possa digitar um cabeçalho para cada linha da
tabela.
¡ A opção Linha transforma a primeira linha da tabela em uma linha de cabeçalhos,
para que o usuário possa digitar um cabeçalho para cada coluna da tabela.
¡ As duas permitem a digitação de cabeçalhos de linha e coluna na tabela.
6. Clique em OK.
Nota: Caso pressione Cancelar, a tabela n ão será exibida no documento.
Tópico relacionado
Como inserir tabelas acessíveis

7 Como Adicionar Conteudo

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

7 Como Adicionar Conteudo

Enviado por

Direitos autorais:

Formatos disponíveis

Como adicionar conteúdo Página 1 de 113

Como adicionar conteúdo

Beneficie-se das ferramentas visuais do Dreamweaver para adicionar uma variedade de

Esta seção contém os seguintes capítulos:

l Como inserir e formatar texto

Como inserir e formatar texto

O Macromedia Dreamweaver MX oferece diversas formas de adicionar e formatar texto em um

Este capítulo aborda os tópicos a seguir:

l Como inserir e formatar texto HTML

Como inserir e formatar texto HTML

A formatação no Dreamweaver é semelhante à utilização de um processador de texto padrão.

Texto > Estilo.

Adiçã o de texto a um documento

Há várias formas de adicionar texto a um documento do Dreamweaver. É possível digitar texto

Para adicionar texto a um documento, seguir um dos procedimentos abaixo:

l Digite o texto diretamente na janela do documento.

Como importar texto de outros documentos

Para importar dados tabulares:

A caixa de diálogo Importar os dados da tabela é exibida.

Procure o arquivo desejado ou digite o seu nome na caixa de texto.

Se for selecionado Outro, aparecerá um campo em branco ao lado da opção. Digite o

Adiçã o de espaço entre caracteres

O HTML s ó permite um espaço entre caracteres. Para adicionar espaço adicional em um

Para inserir um espaço não-separável, seguir um dos procedimentos abaixo:

Adiçã o de espaços entre parágrafos

O Dreamweaver funciona de forma semelhante a vários aplicativos de processamento de texto:

Para adicionar um retorno de parágrafo:

l Pressione a tecla Enter.

Para adicionar uma quebra de linha, seguir um dos procedimentos abaixo:

Para aplicar a formatação de texto HTML, utilizar o inspetor de propriedades e os comandos no

Utilização dos estilos HTML para formatar o texto

Cria ção de um estilo HTML

Cria ção de um novo estilo CSS

Definiçã o e alteraçã o de fontes e estilos

Utilize opções do inspetor de propriedades ou do menu Texto para definir ou alterar

Quando é utilizado o inspetor de propriedades para aplicar o estilo negrito ou itálico, o

Dreamweaver aplica a tag <strong> ou <em>, respectivamente, de modo automático. Se

Modificação de combinações de fontes

Para definir ou alterar características da fonte:

Escolha Padrão para remover as fontes aplicadas anteriormente. A opção Padrão

¡ Para alterar o estilo da fonte, clique em Negrito ou Itálico, no inspetor de

Modificação de combina ções de fontes

As combinações de fontes determinam como um navegador exibe o texto na sua página da

Para modificar as combina ções de fontes:

1. Escolha Texto > Fonte > Editar a lista de fontes.

As fontes na combinação selecionada estão relacionadas na lista Fontes escolhidas, no

3. Escolha uma das seguintes opções:

Para adicionar uma nova combina çã o a uma lista de fontes:

1. Escolha Texto > Fonte > Editar a lista de fontes.

As famílias de fontes genéricas incluem cursivas, fantasia, monoespaçadas, sans-serif e

Quando uma tag de cabeçalho é aplicada a um parágrafo, o Dreamweaver adiciona

Cria ção de um estilo HTML

Opções de propriedades Definição do texto

Definição de propriedades do tipo CSS

Para aplicar uma tag de cabeçalho ou parágrafo:

1. Coloque o ponto de inserção no parágrafo ou selecionar uma parte do texto no parágrafo.

Para alinhar o texto:

1. Selecione o texto a ser alinhado ou simplesmente inserir o indicador no início do texto.

Para centralizar os elementos:

1. Selecione o elemento (imagem, plug-in, tabela ou um outro elemento da página) a

Para recuar o texto e remover o recuo:

1. Coloque o ponto de inserção no parágrafo a ser recuado.

Alteraçã o da cor do texto