Exemplo do Dreamweaver MX: habilidades de aplicação de imagens

Acelere downloads de imagens

Se houver muitas imagens na página da web, isso afetará a velocidade de navegação. O Dreamweaver pode configurar facilmente imagens pré-carregadas para acelerar o download de imagens, permitindo que o site apareça para os usuários o mais rápido possível.

A descrição do efeito é criar um arquivo e pré-carregar a imagem primeiro, para que a imagem seja baixada no cache com antecedência para acelerar a velocidade de download da imagem. Para obter o efeito real, procure o arquivo "Exemplo 36 - Acelerando a velocidade de download de imagens" no diretório "Dreamweaver MX 2004 100 Exemplos" no CD que acompanha o livro.

Pensamentos criativos Abra a nova página do software Dreamweaver MX 2004, abra o painel de rótulos e selecione a opção [Pré-carregar imagem] em [Comportamento] para acelerar o download da imagem.

Etapas da operação

(1) Crie um novo arquivo, a operação é mostrada na Figura 36-1.



(2) Salve a página e insira a imagem. Para não solicitar caminhos relativos ao inserir imagens, primeiro salve a página como "36.htm". Em seguida insira a imagem a ser pré-carregada, conforme mostrado na Figura 36-2.


Figura 36-2 Inserir imagem

(3) Adicione a função "pré-carregar imagem". Use o painel de comportamento do Dreamweaver para adicionar a função “pré-carregar imagem”, conforme mostrado na Figura 36-3.

(4) Selecione a imagem a ser pré-carregada e a operação será mostrada na Figura 36-4.

Dica: Se houver várias imagens grandes no site, você pode clicar no ícone [+] acima de [Imagem pré-carregada] para adicionar várias imagens pré-carregadas. A operação específica é a mesma mostrada na Figura 36-4.

(5) Salve o arquivo para concluir a operação. Desta forma, a velocidade de download das imagens pode ser acelerada, para que os usuários não esperem muito ao navegar na web, o que é de grande importância para melhorar o desempenho do site.

Imagens publicitárias aleatórias

Ao navegar em uma página da web, os visualizadores podem descobrir que as imagens publicitárias atualizadas dinamicamente na página da web são mais dinâmicas e atraentes do que imagens estáticas e fixas. Como criar imagens publicitárias aleatórias em páginas web é a questão a ser estudada neste exemplo.

Descrição do efeito Ao navegar em uma página da web, uma imagem publicitária aparecerá na área do banner da página da web, conforme mostrado na Figura 38-1. Posteriormente, a imagem publicitária é atualizada a cada dois segundos, e a imagem publicitária aparece de forma aleatória, conforme mostrado na Figura 38-2.

Idéias criativas Usando o plug-in de extensão Advance_Random_Images da Macromedia, você pode criar facilmente imagens publicitárias aleatórias em páginas da web.

Etapas da operação

(1) Instale o plug-in. Use o comando [Command] | [Extension Management] na barra de menu para abrir a caixa de diálogo [Macromedia Extension Manager] e instale a extensão Advance_Random_Images, conforme mostrado na Figura 38-3.

(2) Chame o comando. Abra o arquivo banner.htm na pasta fonte deste exemplo, coloque o cursor no local onde deseja inserir o anúncio e chame o comando [AdvancedRandomImages], conforme mostrado na Figura 38-4.

(3) Defina a imagem. Defina as propriedades de transformação da imagem na caixa de diálogo [RandomImages] que aparece, conforme mostrado na Figura 38-5.

(4) Adicione fotos. Adicione a primeira imagem publicitária, conforme mostrado na Figura 38-6.

Dica: As imagens utilizadas neste exemplo são colocadas na pasta banner na pasta material deste exemplo.

(5) Em seguida, use o mesmo método para adicionar outras imagens. Após a conclusão da adição, clique no botão [OK] para confirmar a operação, conforme mostrado na Figura 38-7.

(6) Em seguida, salve o arquivo da página e visualize-o, e o efeito da imagem publicitária aleatória será criado. Os leitores podem consultar o arquivo de efeito bannerok.htm na pasta de material deste exemplo para ver se o resultado da produção está correto. Neste ponto, este exemplo está concluído.

A tecnologia descrita neste exemplo é comumente usada em vários sites. Por exemplo, em vários grandes portais domésticos, esses anúncios de transformação podem ser vistos em quase todas as páginas.