Sobre imagens

Há vários tipos diferentes de formatos de arquivos gráficos, mas três formatos são geralmente usados nas páginas da Web: GIF, JPEG e PNG. Os formatos de arquivo GIF e JPEG são os mais aceitos e podem ser exibidos pela maioria dos navegadores.

GIF (Graphic Interchange Format)

Os arquivos GIF usam um máximo de 256 cores e são mais adequados para a exibição de imagens em tom não contínuo ou imagens grandes de cores simples, como barras de navegação, botões, ícones, logotipos ou outras imagens com cores e tons uniformes.

JPEG (Joint Photographic Experts Group)

O formato de arquivo JPEG é o formato preferido para imagens fotográficas ou em tom contínuo, pois os arquivos JPEG podem conter milhões de cores. À medida que a qualidade de um arquivo JPEG aumenta, também aumentam o tamanho e o tempo de download do arquivo. Você geralmente consegue um bom equilíbrio entre a qualidade da imagem e o tamanho do arquivo compactando um arquivo JPEG.

PNG (Portable Network Group)

O formato de arquivo PNG é um substituto sem patentes para GIFs que inclui suporte a imagens true-color, em tons de cinza e de cores indexadas, além de suporte a canal alfa para transparência. PNG é o formato de arquivo nativo do Adobe® Fireworks®. Os arquivos PNG retêm todas as informações originais de camada, vetor, cor e efeitos (como sombras), e todos os elementos são completamente editáveis, continuamente. Os arquivos devem ter a extensão .png para serem reconhecidos como arquivos PNG pelo Dreamweaver.

Inserção de uma imagem

Quando você insere uma imagem em um documento do Dreamweaver, uma referência ao arquivo de imagem é gerada no código-fonte HTML. Para garantir que essa referência está correta, o arquivo de imagem deve estar no site atual. Caso contrário, o Dreamweaver perguntará se você deseja copiar o arquivo para o site.

Você também pode inserir imagens dinamicamente. As imagens dinâmicas são aquelas que mudam frequentemente. Por exemplo, os sistemas de rotação de banners de propaganda precisam selecionar aleatoriamente um banner em uma lista de banners possíveis e exibir dinamicamente a imagem do banner selecionada quando uma página é solicitada.

Após inserir uma imagem, você poderá definir os atributos de acessibilidade de tag de imagem que podem ser lidos pelos leitores de tela para usuários com deficiências visuais. Esses atributos podem ser editados no código HTML.

Para obter um tutorial sobre inserção de imagens, veja Adição de imagens.

  1. Coloque o ponto de inserção no local da janela Documento em que a imagem deve aparecer e siga um destes procedimentos:

    • Na categoria Comum do painel Inserir, clique no ícone Imagens .
    • Na categoria Comum do painel Inserir, clique no botão Imagens e selecione o ícone Imagem. Com o ícone Imagem exibido no painel Inserir, arraste-o para a janela Documento (ou a janela Visualização de código, caso você esteja trabalhando no código).
    • Selecione Inserir > Imagem.
    • Arraste uma imagem do painel Ativos (Janela > Ativos) para o local desejado na janela Documento e vá para a etapa 3.
    • Arraste uma imagem do painel Arquivos para o local desejado na janela Documento e vá para a etapa 3.
    • Arraste uma imagem da área de trabalho para o local desejado na janela Documento e vá para a etapa 3.
  2. Na caixa de diálogo exibida, siga um destes procedimentos:
    • Selecione Sistema de arquivos para escolher um arquivo de imagem.
    • Selecione Fonte de dados para escolher uma origem de imagem dinâmica.
    • Clique no botão Sites e servidores para escolher um arquivo de imagem em uma pasta remota de um dos sites do Dreamweaver.
  3. Navegue para selecionar a origem da imagem ou do conteúdo que deseja inserir.

    Se você estiver trabalhando em um documento não salvo, o Dreamweaver gerará uma referência file:// para o arquivo de imagem. Quando você salva o documento em qualquer lugar do site, o Dreamweaver converte a referência em um caminho relativo a documento.

    Observação:

    durante a inserção de imagens, é possível usar um caminho absoluto para uma imagem que reside em um servidor remoto (ou seja, uma imagem que não esteja disponível no disco rígido local). No entanto, se você tiver problemas de desempenho enquanto estiver trabalhando, talvez seja necessário desativar a exibição da imagem na Visualização de design, desmarcando Comandos > Exibir arquivos externos.

  4. Clique em OK. A caixa de diálogo Atributos de acesso à tag de imagem aparecerá se você tiver ativado a caixa de diálogo em Preferências (Editar > Preferências).

  5. Digite valores nas caixas de texto Texto alternativo e Descrição longa, e clique em OK.
    • Na caixa Texto alternativo, digite um nome ou uma breve descrição para a imagem. O leitor de tela lê as informações que você digita aqui. Você deve limitar a entrada a aproximadamente 50 caracteres. Em descrições mais longas, é recomendável fornecer um link, na caixa de texto Descrição longa, para um arquivo que forneça mais informações sobre a imagem.
    • Na caixa Descrição longa, digite o local de um arquivo que será exibido quando o usuário clicar na imagem ou clique no ícone de pasta para navegar até o arquivo. Esta caixa de texto fornece um link para um arquivo relacionado à imagem ou fornece mais informações sobre a imagem.

    Observação:

    você pode digitar informações em uma ou em ambas as caixas de texto, se necessário. O leitor de tela lê o atributo Alt da imagem.

    Observação:

    se você clicar em Cancelar, a imagem aparecerá no documento, mas o Dreamweaver não associará tags ou atributos de acessibilidade à imagem.

  6. No Inspetor de propriedades (Janela > Propriedades), defina as propriedades da imagem.

Definição das propriedades da imagem

O Inspetor de propriedades de imagens permite que você defina as propriedades de uma imagem. Se você não consegue ver todas as propriedades de imagem, clique na seta de expansão no canto inferior direito.

Propriedades de imagens no Inspetor de propriedades.
  1. Selecione Janela > Propriedades para exibir o Inspetor de propriedades de uma imagem selecionada.

  2. Na caixa de texto abaixo da imagem em miniatura, digite um nome com o qual você se referirá à imagem ao usar um comportamento do Dreamweaver (como Trocar imagem) ou ao usar uma linguagem de script como JavaScript ou VBScript.
  3. Defina qualquer uma das opções de imagem.

    L e A

    A largura e a altura da imagem, em pixels. O Dreamweaver atualiza automaticamente essas caixas de texto com as dimensões originais da imagem quando você insere uma imagem em uma página.

    Se você definir valores L e A que não correspondam à largura e altura reais da imagem, esta pode não ser exibida corretamente em um navegador. (Para restaurar os valores originais, clique nos rótulos de caixa de texto L e A ou no botão Redefinir tamanho da imagem exibido à direita das caixas de texto L e A quando você digita um novo valor.)

    Observação:

    você pode alterar esses valores para dimensionar o tamanho de exibição desta ocorrência da imagem, mas isso não reduz o tempo de download, pois o navegador baixa todos os dados da imagem antes do seu dimensionamento. Para reduzir o tempo de download e garantir que todas as ocorrências de uma imagem aparecerão do mesmo tamanho, use o aplicativo de edição de imagens para dimensionar as imagens.

    Origem

    Especifica o arquivo de origem da imagem. Clique no ícone de pasta para navegar até o arquivo de origem ou digite o caminho.

    Link

    Especifica um hiperlink para a imagem. Arraste o ícone Apontar para arquivo para um arquivo do painel Arquivos, clique no ícone de pasta para ir até um documento no site ou digite manualmente o URL.

    Alt

    Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram definidos para baixar as imagens manualmente. Para os usuários com deficiências visuais que usam sintetizadores de fala com navegadores somente texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também aparece quando o ponteiro está sobre a imagem.

    Ferramentas Nome do mapa e Ponto ativo

    Permite que você identifique e crie um mapa de imagens do cliente.

    Alvo

    Especifica o quadro ou a janela em que a página vinculada será carregada. (Esta opção não está disponível quando a imagem não está vinculada a outro arquivo.) Os nomes de todos os quadros do conjunto de quadros atuais aparecem na lista Destino. Você também pode escolher entre os nomes de destino reservados:

    • _blank carrega o arquivo vinculado em uma nova janela do navegador não nomeada.

    • _parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contém o link. Se o quadro que contém o link não estiver aninhado, o arquivo vinculado será carregado na janela de navegador em tamanho integral.

    • _self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário especificá-lo.

    • _top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.

    Editar

    Inicia o editor de imagens especificado nas preferências de editores externos e abre a imagem selecionada.

    Atualizar do original

    Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto Inteligente em vermelho. Quando você seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de propriedades, a imagem é atualizada automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop.

    Editar configurações da imagem

     Abre a caixa de diálogo Visualização de imagem e possibilita que você otimize a imagem.

    Cortar

     Apara o tamanho de uma imagem, removendo áreas indesejadas da imagem selecionada.

    Nova amostra

     Faz uma nova amostra de uma imagem redimensionada, aprimorando sua qualidade no seu novo tamanho e forma.

    Brilho e contraste

     Ajusta as configurações de brilho e contraste de uma imagem.

    Nitidez

     Ajusta a nitidez de uma imagem.

Edição dos atributos de acessibilidade da imagem no código

Se você inseriu os atributos de acessibilidade de uma imagem, poderá editar esses valores no código HTML.

  1. Na janela Documento, selecione a imagem.
  2. Siga um destes procedimentos:
    • Edite os atributos de imagem apropriados na Visualização de código.
    • Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh), e selecione Editar tag.
    • Edite o valor Alt no Inspetor de propriedades.

Redimensionamento visual de uma imagem

Você pode redimensionar visualmente elementos como imagens, plug-ins, arquivos Shockwave ou SWF, applets e controles ActiveX no Dreamweaver.

O redimensionamento visual de uma imagem ajuda você a ver como a imagem afeta o layout em diferentes dimensões, mas não dimensiona o arquivo de imagem nas proporções especificadas. Se você redimensionar visualmente uma imagem no Dreamweaver sem usar um aplicativo de edição de imagens (como o Adobe Fireworks) para dimensionar o arquivo de imagem para o tamanho desejado, o navegador do usuário dimensionará a imagem quando a página for carregada. Isso pode ocasionar um atraso no tempo de download da página e a exibição inadequada da imagem no navegador do usuário. Para reduzir o tempo de download e garantir que todas as ocorrências de uma imagem aparecerão do mesmo tamanho, use o aplicativo de edição de imagens para dimensionar as imagens.

Ao redimensionar uma imagem no Dreamweaver, você poderá fazer uma nova amostra para acomodar suas novas dimensões. A nova amostra adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles correspondam ao máximo à aparência da imagem original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download.

Redimensionamento visual de um elemento

  1. Selecione o elemento (por exemplo, uma imagem ou arquivo SWF) na janela Documento.

    As alças de redimensionamento aparecem nos lados inferior e direito do elemento no canto inferior direito. Se as alças de redimensionamento não aparecerem, clique em qualquer lugar que não seja o elemento que você deseja redimensionar e selecione-o novamente, ou clique na tag apropriada no seletor de tags para selecionar o elemento.

  2. Redimensione o elemento executando um dos procedimentos a seguir:
    • Para ajustar a largura do elemento, arraste a alça de seleção à direita.
    • Para ajustar a altura do elemento, arraste a alça de seleção inferior.
    • Para ajustar a largura e a altura do elemento ao mesmo tempo, arraste a alça de seleção de canto.
    • Para preservar as proporções do elemento (sua proporção de largura para altura) enquanto ajusta suas dimensões, pressione Shift enquanto arrasta a alça de seleção de canto.
    • Para ajustar a largura e a altura de um elemento para um tamanho específico (por exemplo, 1 x 1 pixel), use o Inspetor de propriedades para digitar um valor numérico. Os elementos podem ser visualmente redimensionados em, no mínimo, 8 x 8 pixels.
  3. Para retornar um elemento redimensionado às suas dimensões originais, no Inspetor de propriedades, exclua os valores nas caixas de texto L e A ou clique no botão Redefinir tamanho no Inspetor de propriedades de imagem.

Reversão de uma imagem ao seu tamanho original

  1. Clique no botão Redefinir tamanho  no Inspetor de propriedades de imagem.

Criação de amostra de uma imagem redimensionada

  1. Redimensione a imagem conforme descrito anteriormente.
  2. Clique no botão Nova amostra  no Inspetor de propriedades de imagem.

    Observação:

    você não pode fazer uma nova amostra de alocadores de espaço de imagem ou elementos que não sejam imagens de bitmap.

Inserção de 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. Você pode definir o tamanho e a cor do alocador de espaço, bem como fornecer um rótulo de texto a ele.

  1. Na janela Documento, coloque o ponto de inserção no local em que deseja inserir um gráfico de alocador de espaço.
  2. Selecione Inserir > Objetos de imagem > Alocador de espaço de imagem..

  3. Em Nome (opcional), digite o texto que deve aparecer como rótulo no alocador de espaço de imagem. Deixe a caixa de texto em branco caso não deseje que o rótulo apareça. O nome deve começar com uma letra e pode conter apenas letras e números. Não são permitidos espaços e caracteres ASCII maiúsculos.
  4. Em Largura e Altura (obrigatório), digite um número para definir o tamanho da imagem em pixels.
  5. Em Cor (opcional), siga um destes procedimentos para aplicar uma cor:
    • Use o seletor de cores para selecionar uma cor.
    • Digite o valor hexadecimal da cor (por exemplo, #FF0000).
    • Digite um nome de cor aceita pela Web (por exemplo, vermelho).
  6. Em Texto alternativo (opcional), digite um texto que descreva a imagem para os visualizadores que usam um navegador somente texto.

    Observação:

    Uma tag de imagem é inserida automaticamente no código HTML que contém um atributo src vazio.

  7. Clique em OK.

    A cor, os atributos de tamanho e o rótulo do alocador de espaço de imagem aparecem da seguinte maneira:

    Alocador de espaço de imagem com atributos.

    Quando visualizados em um navegador, o rótulo e o texto de tamanho não aparecem.

Substituição de um alocador de espaço de imagem

Um alocador de espaço de imagem não exibe uma imagem em um navegador. Antes de publicar o site, você deve substituir qualquer alocador de espaço de imagem adicionado com arquivos de imagem para Web, como GIFs ou JPEGs.

Se você tiver o Fireworks, poderá criar um novo gráfico no alocador de espaço de imagem do Dreamweaver. A nova imagem é definida para o mesmo tamanho da imagem do alocador de espaço. Você pode editar a imagem e substituí-la no Dreamweaver.

  1. Na janela Documento, siga um destes procedimentos:
    • Clique duas vezes no alocador de espaço de imagem.
    • Clique no alocador de espaço de imagem para selecioná-lo. Em seguida, no Inspetor de propriedades (Janela > Propriedades), clique no ícone de pasta ao lado da caixa de texto Origem.
  2. Na caixa de diálogo Origem da imagem, navegue até a imagem que substituirá o alocador de espaço de imagem e clique em OK.

Definição das propriedades do alocador de espaço de imagem

Para definir as propriedades de um alocador de espaço de imagem, selecione o alocador de espaço na janela Documento. Em seguida, selecione Janela > Propriedades para exibir o Inspetor de propriedades. Para ver todas as propriedades, clique na seta de expansão no canto inferior direito.

Use o Inspetor de propriedades para definir um nome, uma largura, uma altura, uma origem de imagem, uma descrição de texto alternativo, um alinhamento e uma cor para uma imagem de alocador de espaço.

Inspetor de propriedades do alocador de espaço de imagem.

No Inspetor de propriedades do alocador de espaço, a caixa de texto cinza e a caixa de texto Alinhar estão desativadas. Você pode definir essas propriedades no Inspetor de propriedades de imagem ao substituir o alocador de espaço por uma imagem.

  1. Defina uma das seguintes opções:

    L e A

    Define a largura e a altura do alocador de espaço de imagem, em pixels.

    Origem

    Especifica o arquivo de origem da imagem. Em uma imagem de alocador de espaço, esta caixa de texto aparece vazia. Clique no botão Procurar para selecionar uma imagem substituta para o gráfico de alocador de espaço.

    Link

    Especifica um hiperlink para o alocador de espaço de imagem. Arraste o ícone Apontar para arquivo para um arquivo do painel Arquivos, clique no ícone de pasta para ir até um documento no site ou digite manualmente o URL.

    Alt

    Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram definidos para baixar as imagens manualmente. Para os usuários com deficiências visuais que usam sintetizadores de fala com navegadores somente texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também aparece quando o ponteiro está sobre a imagem.

    Criar

    Inicia o Fireworks para criar uma imagem substituta. O botão Criar estará desativado, a menos que o Fireworks também esteja instalado no seu computador.

    Atualizar do original

    Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto Inteligente em vermelho. Quando você seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de propriedades, a imagem é atualizada automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop.

    Cor

    Especifica uma cor para o alocador de espaço de imagem.

Edição de imagens no Dreamweaver

Você pode fazer uma nova amostra, cortar, otimizar e ajustar a nitidez de imagens no Dreamweaver. Você também pode ajustar o brilho e o contraste.

Recursos de edição de imagens

O Dreamweaver fornece recursos básicos de edição de imagens que permitem a você modificar imagens sem precisar utilizar um aplicativo externo de edição de imagens, como o Fireworks ou o Photoshop. As ferramentas de edição de imagens do Dreamweaver foram projetadas para facilitar o trabalho com os designers de conteúdo responsáveis pela criação de arquivos de imagem para uso no site da Web.

Observação:

você não precisa ter o Fireworks ou outros aplicativos de edição de imagens instalados no computador para usar os recursos de edição de imagens do Dreamweaver.

  1. Selecione Modificar > Imagem. Defina qualquer um destes recursos de edição de imagens do Dreamweaver:

    Nova amostra

    Adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles correspondam ao máximo à aparência da imagem original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download.

    Ao redimensionar uma imagem no Dreamweaver, você poderá fazer uma nova amostra para acomodar suas novas dimensões. Quando um objeto de bitmap é submetido a uma nova amostra, os pixels são adicionados ou removidos da imagem para torná-la maior ou menor. A nova amostra de uma imagem para uma resolução mais alta geralmente prejudica um pouco a qualidade. No entanto, a nova amostra para uma resolução mais baixa, sempre ocasiona perda de dados e geralmente uma diminuição da qualidade.

    Cortar

    Edita imagens reduzindo a área da imagem. Geralmente, você precisará cortar uma imagem para dar mais ênfase ao assunto e remover aspectos indesejados referentes ao ponto de interesse da imagem.

    Brilho e contraste

    Modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma imagem. Você geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras.

    Nitidez

    Ajusta o enfoque de uma imagem aumentando o contraste das bordas localizadas na imagem. Quando você digitaliza uma imagem ou tira uma foto digital, a ação padrão da maioria dos softwares de captura de imagem é suavizar as bordas dos objetos na imagem. Isso impede que os detalhes extremamente finos se percam nos pixels em que as imagens digitais são compostas. No entanto, para ressaltar os detalhes nos arquivos de imagem digital, geralmente é necessário ajustar a nitidez da imagem, aumentando o contraste da borda e tornando a imagem mais nítida.

    Observação:

    os recursos de edição de imagens do Dreamweaver aplicam-se somente a formatos de arquivo de imagem JPEG, GIF e PNG. Os outros formatos de arquivo de imagem bitmap não podem ser editados através desses recursos de edição de imagens.

Corte de uma imagem

O Dreamweaver permite cortar (ou aparar) imagens de arquivo de bitmap.

Observação:

quando você corta uma imagem, o arquivo de imagem de origem é alterado no disco. Por essa razão, talvez seja necessário guardar uma cópia de backup do arquivo de imagem caso você precise reverter a imagem original.

  1. Abra a página que contém a imagem a ser cortada, selecione a imagem e siga um destes procedimentos:
    • Clique no ícone da ferramenta Cortar no Inspetor de propriedades de imagem.
    • Selecione Modificar > Imagem > Cortar.
    • As alças de corte aparecem ao redor da imagem selecionada.
  2. Ajuste as alças de corte até que a caixa delimitadora envolva a área da imagem que você deseja manter.
  3. Clique duas vezes na caixa delimitadora ou pressione Enter para cortar a seleção.
  4. Uma caixa de diálogo informa que o arquivo de imagem que você está cortando será alterado no disco. Clique em OK. Cada pixel do bitmap selecionado fora da caixa delimitadora será removido, mas os outros objetos da imagem permanecerão.
  5. Visualize a imagem e verifique se ela atende às suas expectativas. Se a resposta for negativa, selecione Editar > Desfazer corte para reverter a imagem ao estado original.

    Observação:

    enquanto não fechar o Dreamweaver, você poderá desfazer o efeito do comando Cortar (e reverter o arquivo de imagem para o estado original). Também é possível editar o arquivo em um aplicativo externo de edição de imagens.

Otimização de uma imagem

Você pode otimizar imagens nas páginas da Web no Dreamweaver.

  1. Abra a página que contém a imagem a ser otimizada, selecione a imagem e siga um destes procedimentos:
    • Clique no botão  Editar configurações de imagem no Inspetor de propriedades de imagem.
    • Selecione Modificar > Imagem > Otimizar.
  2. Faça suas edições na caixa de diálogo Visualização da imagem e clique em OK.

Ajuste da nitidez de uma imagem

A nitidez aumenta o contraste dos pixels em torno das bordas dos objetos, a fim de aumentar a definição ou nitidez da imagem.

  1. Abra a página que contém a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos:
    • Clique no botão  Nitidez no Inspetor de propriedades de imagem.
    • Selecione Modificar > Imagem > Nitidez.
  2. Você pode especificar o grau de nitidez que o Dreamweaver aplicará à imagem arrastando o controle deslizante ou digitando um valor entre 0 e 10 na caixa de texto. Ao ajustar a nitidez da imagem usando a caixa de diálogo Nitidez, você poderá visualizar a alteração efetuada.
  3. Clique em OK quando estiver satisfeito com a imagem.
  4. Salve as alterações selecionando Arquivo > Salvar ou reverta para a imagem original selecionando Editar > Desfazer nitidez.

    Observação:

    você só pode desfazer o efeito do comando Nitidez (e reverter para o arquivo de imagem original) antes de salvar a página que contém a imagem. Depois que a página é salva, as alterações efetuadas na imagem são salvas definitivamente.

Ajuste do brilho e contraste de uma imagem

Brilho/contraste modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma imagem. Você geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras.

  1. Abra a página que contém a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos:
    • Clique no botão  Brilho/contraste  no Inspetor de propriedades de imagem.
    • Selecione Modificar > Imagem > Brilho/contraste.
  2. Arraste os controles deslizantes de brilho e contraste para ajustar as configurações. A faixa de valores varia de -100 a 100.
  3. Clique em OK.

Criação de uma imagem de sobreposição

Você pode inserir imagens de sobreposição na página. Uma sobreposição é uma imagem que, quando visualizada em um navegador, é alterada quando o ponteiro se move sobre ela.

Você deve ter duas imagens para criar a sobreposição: uma imagem primária (a imagem exibida quando a página é carregada pela primeira vez) e uma imagem secundária (a imagem que aparece quando o ponteiro se move sobre a imagem primária). As duas imagens em uma sobreposição devem ter o mesmo tamanho. Caso contrário, o Dreamweaver redimensiona a segunda imagem de modo que corresponda às propriedades da primeira imagem.

As imagens de sobreposição são automaticamente definidas para responder ao evento onMouseOver. Você pode definir uma imagem para responder a um evento diferente (por exemplo, um clique de mouse) ou alterar uma imagem de sobreposição.

  1. Na janela Documento, coloque o ponto de inserção no local em que a sobreposição deve aparecer.
  2. Insira a sobreposição usando um destes métodos:
    • Na categoria Comum do painel Inserir, clique no botão Imagens e selecione o ícone Imagem de sobreposição. Com o ícone Imagem de sobreposição exibido no painel Inserir, você pode arrastar o ícone para a janela Documento.
    • Selecione Inserir > Objetos de imagem > Imagem de sobreposição.
  3. Defina as opções e clique em OK.

    Nome da imagem

    O nome da imagem de sobreposição.

    Imagem original

    A imagem a ser exibida quando a página for carregada. Digite o caminho na caixa de texto ou clique em Procurar e selecione a imagem.

    Imagem de sobreposição

    A imagem a ser exibida quando o ponteiro é movido sobre a imagem original. Digite o caminho ou clique em Procurar para selecionar a imagem.

    Pré-carregar imagem de sobreposição

    Pré-carrega as imagens no cache do navegador para que não ocorra nenhum atraso quando o usuário mover o ponteiro sobre a imagem.

    Texto alternativo

    (Opcional) Texto que descreve a imagem dos visualizadores usando um navegador somente texto.

    Ao clicar, Ir para URL

    O arquivo que você deseja abrir quando um usuário clica na imagem de sobreposição. Digite o caminho ou clique em Procurar e selecione o arquivo.

    Observação:

    se você não definir um link para a imagem, o Dreamweaver inserirá um link nulo (#) no código-fonte HTML ao qual o comportamento de sobreposição é anexado. Se você remover o link nulo, a imagem de sobreposição não funcionará mais.

  4. Selecione Arquivo > Visualizar no navegador ou pressione F12.

  5. No navegador, mova o ponteiro sobre a imagem original para ver a imagem de sobreposição.

    Observação:

    não é possível ver o efeito de uma imagem de sobreposição na Visualização de design.

Uso de um editor de imagens externas

Enquanto estiver no Dreamweaver, você poderá abrir uma imagem selecionada em um editor externo de imagens. Ao retornar ao Dreamweaver após salvar o arquivo de imagens editado, qualquer alteração feita na imagem estará visível na janela Documento.

Você pode configurar o Fireworks como seu editor externo principal. Também é possível definir quais tipos de arquivo um editor abrirá e selecionar vários editores de imagem. Por exemplo, você pode definir preferências para iniciar o Fireworks quando precisar editar um GIF e iniciar outro editor de imagens quando precisar editar um JPG ou JPEG.

Inicialização do editor externo de imagens

  1. Siga um destes procedimentos:
    • Clique duas vezes na imagem que deseja editar.
    • Clique com o botão direito (Windows) ou mantenha a tecla Control pressionada ao clicar (Macintosh) na imagem que será editada, selecione Editar com > Procurar e, em seguida, selecione um editor.
    • Selecione a imagem que deseja editar e clique em Editar no Inspetor de propriedades.
    • Clique duas vezes no arquivo de imagem no painel Arquivos para iniciar o editor de imagens principal. Se você não tiver especificado um editor de imagens, o Dreamweaver iniciará o editor padrão do tipo de arquivo.

    Observação:

    quando você abrir uma imagem no painel Arquivos, os recursos de integração do Fireworks não estarão em vigor. O Fireworks não abre o arquivo PNG original. Para usar os recursos de integração do Fireworks, abra as imagens na janela Documento.

    Se você não vir uma imagem atualizada após retornar à janela Dreamweaver, selecione a imagem e clique no botão Atualizar no Inspetor de propriedades.

Definição de um editor externo de imagens para um tipo de arquivo existente

Você pode selecionar um editor de imagens para abrir e editar arquivos gráficos.

  1. Abra a caixa de diálogo Preferências de tipos/editores de arquivos seguindo um destes procedimentos:
    • Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Tipos/editores de arquivos na lista Categoria à esquerda.
    • Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos/editores de arquivos.
  2. Na lista Extensões, selecione a extensão de arquivo para a qual você deseja definir um editor externo.
  3. Clique no botão Adicionar (+) acima da lista Editores.
  4. Na caixa de diálogo Selecionar editor externo, navegue até o aplicativo que deseja iniciar como editor desse tipo de arquivo.

  5. Na caixa de diálogo Preferências, clique em Tornar primário caso deseje que esse editor seja o editor principal desse tipo de arquivo.

  6. Para configurar um editor adicional para esse tipo de arquivo, repita as etapas 3 e 4.

    O Dreamweaver usará automaticamente o editor principal quando você editar esse tipo de imagem. É possível selecionar os outros editores listados no menu de contexto da imagem na janela Documento.

Adição de um novo tipo de arquivo à lista Extensões

  1. Abra a caixa de diálogo Preferências de tipos/editores de arquivos seguindo um destes procedimentos:

    • Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Tipos/editores de arquivos na lista Categoria à esquerda.
    • Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos/editores de arquivos.
  2. Na caixa de diálogo Preferências de tipos/editores de arquivos, clique no botão Adicionar (+) acima da lista Extensões.

    Uma caixa de texto aparece na lista Extensões.

  3. Digite a extensão do tipo de arquivo para o qual um editor será iniciado.
  4. Para selecionar um editor externo para o tipo de arquivo, clique em Adicionar (+) acima da lista Editores.
  5. Na caixa de diálogo exibida, selecione o aplicativo que você deseja usar para editar esse tipo de imagem.
  6. Clique em Tornar primário caso deseje que este editor seja o editor principal para o tipo de imagem.

Alteração de uma preferência de editor existente

  1. Abra a caixa de diálogo Preferências de tipos/editores de arquivos seguindo um destes procedimentos:

    • Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Tipos/editores de arquivos na lista Categoria à esquerda.
    • Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos/editores de arquivos.
  2. Na caixa de diálogo Preferências de tipos/editores de arquivos, na lista Extensões, selecione o tipo de arquivo que você está alterando para visualizar os editores existentes.

  3. Na lista Editores, selecione o editor que você deseja alterar e siga um destes procedimentos:
    • Clique nos botões Adicionar (+) ou Excluir (–) acima da lista Editores para adicionar ou remover um editor.
    • Clique no botão Tornar primário para alterar qual editor será iniciado por padrão na edição.

Aplicação de comportamentos às imagens

Você pode aplicar qualquer comportamento disponível a uma imagem ou ponto ativo de imagem. Quando você aplica um comportamento a um ponto ativo, o Dreamweaver insere o código-fonte HTML na tag area. Os três comportamentos se aplicam especificamente a imagens: Pré-carregar imagens, Trocar imagens e Restaurar imagem trocada.

Pré-carregar imagens

Carrega imagens que não aparecem na página imediatamente (como aquelas que serão trocadas por comportamentos, elementos PA ou JavaScript) no cache de navegador. Isso evita atrasos ocasionados por download quando as imagens devem aparecer.

Trocar imagem

Troca uma imagem por outra alterando o atributo SRC da tag img. Use esta ação para criar sobreposições de botão e outros efeitos de imagem (incluindo a troca de mais de uma imagem simultaneamente).

Restaurar imagem trocada

Restaura o último conjunto de imagens trocadas para os arquivos de origem anteriores. Esta ação é adicionada automaticamente sempre que você anexa a ação Trocar imagem a um objeto por padrão. Você nunca precisará selecioná-la manualmente.

Você também pode usar comportamentos para criar sistemas de navegação mais sofisticados, como menus de salto.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online