Usando imagens no Dreamweaver

 

Objetivos:

 

Ensinar como usar imagens em seu Dreamweaver, criar mapas de imagens e álbuns de imagens.

 

Autor: Carlos Vitor de Castro

 

Para inserir uma imagem no Dreamweaver, clique no menu Insert/Image. Vale lembrar que a iamgem deve estar na mesma pasta, dos arquivos .HTM ou numa sub-pasta dos seus arquivos .HTM.

 

 

Ou use o botão Images da barra Common.

 

 

Depois de inserida a imagem, podemos usar a Barra de propriedades para alterar seus atributos.

 

Modificando a largura e a altura da imagem

 

Altere a largura e a altura da imagem, no local apontado na imagem abaixo.

 

 

Depois de alterar largura e altura, os valores ficam em negrito para avisá-lo que aquele não é o tamanho original da imagem.

 

 

Clique no lugar indicado pela seta para restaurar os valores de largura e altura, ou em cima da letra “W” para restaurar só a largura e em cima da letra “H” para restaurar só a altura.

 

Alterando o texto alternativo da imagem

 

Texto alternativo é aquela descrição que aparece em cima de algumas imagens na web quando posicionamos o mouse sobre elas.

 

Selecione a imagem e altere seu texto alternativo no local indicado abaixo.

 

 

Quando sua página estiver no ar, o texto alternativo aparecerá assim:

 

 

Inserindo uma borda na imagem

 

Para inserir uma borda na imagem, digite a espessura da borda em píxels no local descrito abaixo.

 

 

Resultado

 

 

Fazendo um texto contornar a imagem

 

Vamos usar recursos de alinhamento de imagem para fazer com que um texto a envolva, vamos alinhar a imagem à direita e à esquerda do texto.

 

Com a imagem inserida digite ou cole um texto com pelo menos 10 linhas ao lado da imagem.

 

Selecione a imagem e altere seu Align para Left.

 

 

Resultado

 

 

Experimente o alinhamento Right também.

 

Se você achar que o texto ficou muito próximo da imagem, podemos aumentar esta distância modificando os atributos HSPACE e VSPACE na barra de Propriedades.

 

 

Resultado

 

 

Usando uma imagem como link

 

Para fazer com que uma imagem se torne um link, selecione-a e digite o nome da página a ser aberta na caixa Link.

 

 

Depois que transformamos uma imagem em link, automaticamente aparece uma borda na imagem, por padrão, esta borda terá a cor azul se o link ainda não tiver sido visitado e púrpura se já tiver sido visitado, se você quiser remover esta borda, altere o valor de Border para 0 (zero) na barra de propriedades.

 

 

Criando um mapa de imagens

 

Um mapa de imagens é um recurso que permite fazer com que apenas um trecho da imagem seja transformada em link.

 

Selecionando sua imagem no Dreamweaver aparecerá em baixo à esquerda de sua barra de propriedades os botões com as formas de mapas de imagem, como mostra a figura abaixo.

 

 

Onde:

 

 

Selecione o mapa retangular e desenhe um retângulo em cima de sua imagem, um pequeno retângulo.

 

 

Com o mapa selecionado, digite a página ou o site que abrirão a partir do link mapeado.

 

 

Criando um álbum de imagens

 

Um álbum de imagens é uma daquelas páginas com miniaturas de imagens que quando clicadas exibem a imagem em outra página em tamanho grande.

 

Para testar este exercício, crie uma nova pasta e coloque pelo menos 10 imagens dentro dela, esta página só pode conter arquivos de imagem e todas as imagens que ai estiverem aparecerão no álbum.

 

1. No seu Dreamweaver crie um novo arquivo.

 

2. Clique no menu Commands/Create web photo álbum.

 

 

3. Quando clicar em OK, o Fireworks será aberto para fazer o trabalho de criação dos arquivos miniatura das imagens, no término do trabalho aparecerá a caixa de diálogo abaixo:

 

 

Resultado:

 

 

Salve seu arquivo e pressione F12 para ver o resultado.

 

O Dreamweaver criou uma página chamada index.htm dentro da pasta principal, e uma página .HTM para cada imagem grande dentro da sub-pasta Pages, é importante que você dê uma olhada na estrutura das pastas criadas e o seu conteúdo para ter uma idéia melhor do trabalho que seu programa fez para você.

 

FRONTPAGE - BÁSICO Criação de Páginas para Internet - Introdução Criando o Primeiro Arquivo HTML DREAMWEAVER - BÁSICO Introdução ao Dreamweaver MX 2004 Projeto Web – Parte 01 Projeto Web – Parte 04 Projeto Web – Parte 03 Criação de Tabelas no Dreamweaver Dreamweaver Basico - Começando a usar o DreamWeaver Dreamweaver Basico - Configurações de Definição de Sites Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 2 Dreamweaver Basico - Definição Básica do Design e Inserção de Conteúdo Dreamweaver Basico - Criação de Links Dreamweaver Basico - Configuração de Links Usando Tabelas no DreamWeaver Usando Imagens no Dreamweaver Usando Modelos no Dreamweaver Conhecendo o Dreamweaver 8 Usando comportamentos para criar um menu pop up no Dreamweaver Usando a paleta Behaviors do Dreamweaver - Parte 1 Usando Camadas Para Exibir Dicas de Formulários Fazendo um Site com Templates Prontos no Dreamweaver HTML BÁSICO HTML Básico - Introdução à Internet HTML Básico - Alinhamento de Texto HTML Básico - Cabeçalhos e Formatação de Texto HTML Básico - Formatação de Texto HTML Básico - Criação e configuração de links HTML Básico - Criando Listas Ordenadas e Listas de Definição HTML Básico - Criação de Links Internos e Externos HTML Básico - Criação de Links Externos E Links de E-mail HTML Básico - Inserindo Imagens na Página HTML Básico - Introdução à Tabelas HTML Básico - Criação de Formulários - Parte 1 HTML Básico - Criação de Formulários - Parte 2 DREAMWEAVER - PROGRAMAÇÃO PHP Galeria de Fotos com Efeito Lightbox Dinâmica Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 1) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 2) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte Final) Alternando Cores da Tabela no Resultado de uma Consulta Como Criar um Contador de Visitas (Acessos) Criando Galeria de Fotos (Tiny SlideShow) Criando Ícone para URL Criando Recurso Imprimir Criando Sites Auto-Ajustáveis de Acordo com a Resolução Formulário de Contato com Envio de Dados por Email Galeria de Fotos com Efeito Lightbox e Upload Múltiplo de Imagens

CRIANDO UM APLICATIVO PARA UMA ACADEMIA Criando Aplicativo Para Academia - Parte 1 Criando Aplicativo Para Academia - Parte 2 Criando Aplicativo Para Academia - Parte 3 Criando Aplicativo Para Academia - Parte 4 Criando Aplicativo Para Academia - Parte 5 Criando Aplicativo Para Academia - Parte 6 Criando Aplicativo Para Academia - Parte Final WEBSPHERE Apresentando o WebSphere Application Server da IBM Instalação do WebSphere Application Server Configurando uma aplicação no WAS Configurando a segurança no WAS SISTEMA DE SALÃO DE BELEZA Sistema Salão de Beleza - Parte 1 Sistema Salão de Beleza - Parte 2 Sistema Salão de Beleza - Parte 3 Sistema Salão de Beleza - Parte 4 Sistema Salão de Beleza - Parte 5 Sistema Salão de Beleza - Parte 6 Sistema Salão de Beleza - Parte 7 Sistema Salão de Beleza - Parte 8 Sistema Salão de Beleza - Parte 9 Sistema Salão de Beleza - Parte 10 Sistema Salão de Beleza - Parte 11 Sistema Salão de Beleza - Parte 12 Sistema Salão de Beleza - Parte 13 Sistema Salão de Beleza - Parte 14 SISTEMA PARA GERENCIAMENTO DE IMÓVEIS Sistema Para Gerenciamento de Imóveis - Parte 01 Sistema Para Gerenciamento de Imóveis - Parte 02 Sistema Para Gerenciamento de Imóveis - Parte 03 Sistema Para Gerenciamento de Imóveis - Parte 04 Sistema Para Gerenciamento de Imóveis - Parte 05 Sistema Para Gerenciamento de Imóveis - Parte 06 Sistema Para Gerenciamento de Imóveis - Parte 07 Sistema Para Gerenciamento de Imóveis - Parte 08 Sistema Para Gerenciamento de Imóveis - Parte 09 Sistema Para Gerenciamento de Imóveis - Parte 10 Sistema Para Gerenciamento de Imóveis - Parte 11