7 Como adicionar conteudo

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

Página 1 de 113Como adicionar conteúdo

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

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.

3. Escolha uma das seguintes opções: ¡ 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. 2. Escolha uma das seguintes opções:

¡ 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.

2. Siga um dos procedimentos abaixo: ¡ 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.

2. Siga um dos procedimentos abaixo: ¡ 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 pelo estilo h1de tag de HTML.Exceto pelo fato de esta sentença ser controlada pelo estilo .Red.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"



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.

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



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:

1. Escolha uma das seguintes opções: ¡ 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 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.

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 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 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. 2. Abra a caixa de di álogo Definição de estilos CSS, seguindo um dos procedimentos abaixo:

¡ Adicione 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, 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 esquerdo do painel para definir atributos de estilo adicionais ou clique em OK.

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:



¡ Clique duas vezes em um estilo existente para abri-lo para edição. 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:



¡ Clique duas vezes em um estilo existente para abri-lo para edição. 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:



¡ Clique duas vezes em um estilo existente para abri-lo para edição. 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:



¡ Clique duas vezes em um estilo existente para abri-lo para edição. 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 esquerdo do painel para definir atributos de estilo adicionais ou clique em OK.

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:



¡ Clique duas vezes em um estilo existente para abri-lo para edição. 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:



¡ Clique duas vezes em um estilo existente para abri-lo para edição. 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.

2. Siga um dos procedimentos abaixo: ¡ 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 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.


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.


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:

¡ Escolha Inserir > Imagem. ¡ 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.

2. Siga um dos procedimentos abaixo: ¡ 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.



Atualização de links em um arquivo SWF


É 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 seguir um dos procedimentos abaixo:

¡ 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

janela do documento. ¡ 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


¡ 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 seguir um dos procedimentos abaixo:

¡ 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


¡ Escolha Inserir > Mídia > ActiveX.

Um ícone marca o local onde o controle ActiveX será exibido na página no Internet Explorer.

Para obter informações sobre as propriedades disponíveis, consulte Definição de propriedades 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


¡ 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.

Para obter informações sobre as propriedades disponíveis, consulte Definição de propriedades 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.

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 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 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 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.

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 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 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 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. 2. Siga um dos procedimentos abaixo:

¡ Escolha Inserir > 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. 2. Siga um dos procedimentos abaixo:

¡ 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.


Para obter mais informações, veja Definição das op ções da caixa de diálogo Atributos de 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. 2. Siga um dos procedimentos abaixo:

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

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.



Para obter mais informações, veja Definição das op ções da caixa de diálogo Atributos de 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 Dreamweaver não associa tags de acessibilidade a ele.

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.

4. Siga um dos procedimentos abaixo: ¡ Edite o código na visualização do código ¡ Clique com o botão direito do mouse e escolha Editar o código da tag.

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.

2. Siga um dos procedimentos abaixo: ¡ 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.




Para obter mais informações, veja Definição das op ções da caixa de diálogo Atributos de 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. 2. Siga um dos procedimentos abaixo:

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

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.

2. Siga um dos procedimentos abaixo: ¡ 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. 2. Siga um dos procedimentos abaixo:

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

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.

Os resultados do relatório são exibidos no painel Relatórios do site (no grupo de painel 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.

Os resultados do relatório são exibidos no painel Relatórios do site (no grupo de painel 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



janela do documento.

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 dependendo do navegador. 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 Dreamweaver não associa tags de acessibilidade a ele.

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 Dreamweaver não associa tags de acessibilidade a ele.

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



de 113Como adicionar conteúdo


7 Como adicionar conteudo

Documents

Transcript of 7 Como adicionar conteudo