Como fazer uma light box no Dreamweaver

Escrito por chad buleen | Traduzido por camila rodrigues
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

Uma light box oferece aos desenvolvedores de web flexibilidade para inserir imagens em uma página da web. As imagens usadas em uma light box essencialmente aparecem acima da página web, não dentro dela. A light box é eficaz porque permite que uma pessoa usando sua página web possa clicar em uma imagem pequena e depois ter essa imagem aumentada em uma caixa sombreada na parte superior da página aberta. Isso mantém o usuário da web em sua página, mas permite que você coloque imagens em uma página sem usar tanto espaço. Você pode fazer uma light box no Dreamweaver inserindo os códigos corretos no lugar apropriado na página.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

O que você precisa?

  • Adobe Dreamweaver
  • Computador

Lista completaMinimizar

Instruções

  1. 1

    Abra o Dreamweaver. Aperte "Ctrl + N" e selecione "documento HTML em branco" para abrir uma nova página em branco. Clique na guia "Código" para chegar ao lugar certo para trabalhar com o código da light box.

  2. 2

    Recorte e cole o seguinte código para a seção "Head" do documento do Dreamweaver:

    <script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

  3. 3

    Depois de inserir o código, você deve colocar os links para as imagens em miniatura na página. Estas são as fotos que a light box aumentará. Use este código para cada imagem:

    <a href="images/suaprimeiraimagem.jpg" rel="lightbox" title="ponha sua legenda aqui">nome da imagem aqui</a>

    Este código deve ser colocado logo abaixo do código anterior.

  4. 4

    Clique no botão "Visualizar" no topo da janela do Dreamweaver para ver como esta página funciona em um navegador da web. Se você está satisfeito com o resultado, vá para a próxima etapa. Se você não estiver satisfeito, faça modificações e verifique novamente.

  5. 5

    Use as teclas "Ctrl + A", "Ctrl + C" e "Ctrl + V" para selecionar, copiar e colar o código completo que foi criado no Dreamweaver. Este código pode ser colado na caixa de edição de HTML no back-end de qualquer servidor web que você usar para publicar sua página web. Quando isso for concluído, as imagens serão publicadas e podem ser abertas em sua light box.

Dicas & Advertências

  • Certifique-se de carregar todas as imagens individuais para o servidor.
  • As imagens devem ser grandes o suficiente - geralmente pelo menos 500k - para ficarem com uma qualidade decente quando forem abertas pelo código da light box.
  • Certifique-se de incluir todas as aspas no código da light box. Uma aspa faltando pode desativar todo o código.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível