Lar Mídia social Como adicionar imagens ao seu site no Dreamweaver - dummies

Como adicionar imagens ao seu site no Dreamweaver - dummies

Vídeo: Tutorial Dreamweaver - aula 4 - inserindo imagem no nosso documento html 2025

Vídeo: Tutorial Dreamweaver - aula 4 - inserindo imagem no nosso documento html 2025
Anonim

A adição de uma imagem à sua página da Web pode parecer quase mágica no início porque o processo é tão simples com o Dreamweaver. O desafio com os gráficos da Web não é adicioná-los às suas páginas, mas criando imagens bonitas que se carregam rapidamente no navegador do seu visualizador.

Você precisa de outro programa, como o Photoshop, Photoshop Elements ou Fireworks, para criar, converter, editar e otimizar imagens. Otimizar imagens torna o tamanho dos arquivos menor para que suas imagens baixem mais rápido. O Dreamweaver fornece algumas ferramentas básicas de edição de imagem, mas principalmente você usa o Dreamweaver para inserir e posicionar imagens em sua página.

O Dreamweaver facilita a colocação de imagens em suas páginas da web e fornece várias maneiras de fazê-lo:

  • Clique no ícone Imagens no painel Inserção comum e selecione uma imagem usando a caixa de diálogo Inserir imagem.

  • No painel Arquivos, clique e arraste um nome de imagem para a página onde deseja que a imagem apareça.

  • Use o menu Inserir.

Se você não possui uma imagem JPEG, GIF ou PNG otimizada na web, você pode baixar imagens gratuitas que já estão otimizadas.

Para colocar uma imagem em uma página da Web usando o menu Inserir, siga estas instruções:

  1. Abra uma página existente ou crie e salve uma nova página.

  2. Coloque o cursor onde deseja inserir a imagem na página.

    Você pode inserir imagens no canto superior esquerdo de um novo arquivo em branco e você pode inserir imagens em tags e elementos em uma página da Web, mas você não pode simplesmente colocar uma imagem no meio de uma página sem usar HTML adicional tags ou formatação CSS para posicioná-lo.

  3. Escolha Inserir → Imagem → Imagem.

    A caixa de diálogo Selecionar origem da imagem é exibida.

  4. Procurar para localizar a imagem que deseja inserir.

    Dependendo do seu sistema de computador, você pode visualizar imagens à medida que as inseriu de maneiras diferentes. Aqui estão três opções comuns:

    • Em um PC com o Windows XP, escolha Miniaturas na lista suspensa do menu Exibir à direita do campo Procurar em para exibir versões em miniatura de todas as imagens em qualquer pasta aberta. Você também pode ver uma única visualização de qualquer imagem selecionada na extremidade direita da caixa de diálogo.

    • Em um PC com Windows Vista ou Windows 7 , escolha uma opção de ícone (ícones pequenos, ícones médios, ícones grandes ou ícones extra grandes) na lista suspensa do menu Exibir à direita do Look In campo para exibir versões em miniatura de todas as imagens em qualquer pasta aberta. Você também pode visualizar uma única visualização de qualquer imagem selecionada na extremidade direita da caixa de diálogo.

    • Em um Mac, escolha a opção Exibir como colunas no canto superior esquerdo da caixa de diálogo. Você pode visualizar uma única visualização de qualquer imagem selecionada na extremidade direita da caixa de diálogo.

      Crédito: Fotos por Casey Stoll
  5. Para inserir a imagem, clique duas vezes no nome da imagem ou clique uma vez e depois clique em OK.

    Se você inserir uma imagem em uma página e a imagem não é salva na sua pasta do site local, o Dreamweaver solicita uma caixa de diálogo de aviso e oferece a cópia da imagem na pasta do site local. Muitos designers criam uma subpasta chamada imagens dentro da pasta do site local onde armazenam todas as imagens em seu site, mas você pode organizar imagens em várias subpastas, se preferir.

  6. Selecione a imagem na sua página da Web para visualizar e editar as propriedades da imagem.

    As opções de imagem são exibidas automaticamente no Inspetor de propriedades na parte inferior da página quando uma imagem é selecionada.

    Crédito: Foto de Casey Stoll

Quando você insere um arquivo de imagem em uma página, você realmente não adiciona uma cópia da imagem à página; você cria uma referência à imagem. O código subjacente se parece muito com o código de um link de uma página para outra.

Tanto as referências e os links da imagem incluem o nome do arquivo e o caminho da página para esse arquivo. Essencialmente, você está criando uma instrução para um navegador da Web para encontrar a imagem quando ela exibe a página.

Para exibir uma imagem em sua página da Web, você precisa fazer o upload da página e da imagem quando você publica seu site. Se seus arquivos de imagem e as páginas que se referem a esses arquivos não estão na mesma localização relativa em seu disco rígido, como estão no seu servidor web, você quebra a referência às suas imagens e aparece um ícone de imagem quebrada feia na sua página.

A melhor maneira de garantir que suas imagens e arquivos permaneçam onde eles deveriam se relacionar um com o outro é deixar o Dreamweaver acompanhá-los por você. É por isso que é tão importante completar o processo de configuração do site e garantir que você nunca mude ou renomeie uma imagem, exceto no painel Arquivos.

Como adicionar imagens ao seu site no Dreamweaver - dummies

Escolha dos editores

Como executar o teste beta para uma aplicação iOS - manequins

Como executar o teste beta para uma aplicação iOS - manequins

Depois de executar o seu aplicativo em alguns dispositivos e está confiante de que está funcionando da maneira que é suposto, considere levá-lo às mãos de alguns testadores beta. O teste beta permite que você receba comentários de usuários reais e repare todos os erros antes que o público em geral os veja. Você pode se surpreender ...

Como publicar no Amazon Appstore para Android - dummies

Como publicar no Amazon Appstore para Android - dummies

Publicação para o Amazon Appstore para Android é semelhante à publicação na Google Play Store: você cria uma conta e, em seguida, talvez seja necessário pagar uma taxa de desenvolvedor. Ao contrário do Google Play Store, os aplicativos devem ser revistos no Amazon Appstore para Android, portanto, planeje alguns dias entre o dia em que você enviar ...

Como preparar ativos gráficos em seu aplicativo Android para publicar na Play Store - Dummies

Como preparar ativos gráficos em seu aplicativo Android para publicar na Play Store - Dummies

Quando você publica um aplicativo Android na Play Store, você interage com o Console do desenvolvedor do Google Play. O passo essencial nesta interação é o passo em que você carrega o arquivo APK do seu aplicativo. É o passo essencial, mas não é o único passo. Você também deve usar a Consola do desenvolvedor da Play Store ...

Escolha dos editores

As Leis de Minecraft Redstone - dummies

As Leis de Minecraft Redstone - dummies

Cada mecanismo Redstone da Minecraft possui um conjunto diferente de propriedades que determinam como ele atua. Você deve entender as relações entre suas propriedades. Depois de trabalhar com Redstone por um tempo, a forma e a função das suas ferramentas podem se tornar bastante intuitivas. Até então, você pode usar essas informações para descobrir quais opções são ...

Minecraft Pocket Edition Guia de Sobrevivência - dummies

Minecraft Pocket Edition Guia de Sobrevivência - dummies

Ao contrário da versão bastante complicada para PC do Minecraft, Pocket Edition (PE) de A Minecraft tem uma série de etapas mais direta para alcançar seu ponto final, o Nether Spire. Para sobreviver ao PE Minecraft, um jogador precisa seguir a série de passos descritos abaixo. Punch madeira e construir um abrigo. Todo o Minecraft ...

Minecraft Para Dummies Cheat Sheet - dummies

Minecraft Para Dummies Cheat Sheet - dummies

Minecraft requer um jogador para reunir recursos para sobreviver, construir, criar, e avance no jogo. Devido aos diferentes ambientes encontrados no Minecraft, um jogador precisa usar diferentes estratégias para reunir recursos eficientemente nas três principais áreas do jogo - Overland, the Mines e the Nether. Uma vez que estes ...

Escolha dos editores

Como criar mensagens de e-mail de impressão em série no Word 2013 - dummies

Como criar mensagens de e-mail de impressão em série no Word 2013 - dummies

Palavra 2013 permite que você expire mensagens de e-mail personalizadas usando a opção E-Mail para mala direta. Esta opção funciona apenas quando você configura o programa Microsoft Outlook no seu computador. Depois disso, você inicia o documento principal para sua fusão de e-mail obedecendo a estas etapas:

Como criar múltiplas colunas em um documento do Word 2007 - dummies

Como criar múltiplas colunas em um documento do Word 2007 - dummies

Para converter seu padrão single- (ou não-) coluna do documento do Word 2007 em um com várias colunas, basta escolher o formato da coluna que deseja no menu Colunas. Instantaneamente, seu documento é transformado em uma maravilha multicolora!

Como criar tabelas rápidas nas tabelas do Word 2008 para Mac - dummies

Como criar tabelas rápidas nas tabelas do Word 2008 para Mac - dummies

Ajudam você a organizar idéias ou dados que seriam aborrecedores e difíceis de compreender em forma de parágrafo regular. Com o Word 2008 para Mac, você pode facilmente criar tabelas - às vezes chamadas de grades - em qualquer lugar em seus documentos. A maneira mais fácil de criar tabelas é com um dos melhores recursos novos ...