Como adicionar imagens para o seu site no dreamweaver

Adicionar uma imagem a sua página web pode parecer quase mágico em primeiro lugar, porque o processo é tão simples com o Dreamweaver. O desafio com gráficos web não é adicioná-los a suas páginas, mas a criação de boa aparência imagens que carregam rapidamente no navegador do seu espectador.

Video: FAVICON - Como colocar ícone na aba do navegador

Você precisa de outro programa, como o Photoshop, Photoshop Elements, ou Fireworks, para criar, converter, editar e otimizar imagens. otimizando imagens faz tamanhos de arquivo menor para que suas imagens download mais rápido. Dreamweaver fornece algumas ferramentas básicas de edição de imagem, mas principalmente você usar o Dreamweaver para inserir e posicionar imagens em sua página.

Dreamweaver torna as imagens colocam em suas páginas web fáceis e fornece várias maneiras de fazer isso:

  • Clique no ícone de imagens no painel Common Inserir e, em seguida, selecionar 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.

  • Utilize o menu Inserir.

Se você não tiver um web otimizado JPEG, PNG imagem GIF, ou à mão, você pode download de imagens gratuitos que já são otimizados.

Video: Colocando imagem de fundo na tabela Dreamweaver CS4/CS5

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

Abra uma página existente ou criar e salvar uma nova página.

  • Coloque o cursor onde você quer 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 web, mas você não pode simplesmente colocar uma imagem no meio de uma página sem usar tags HTML adicionais ou CSS formatação para posicioná-la.

  • Escolha Inserir → Imagem → Imagem.

    A caixa de diálogo Select Image Source aparece.



  • Procure para localizar a imagem que você deseja inserir.

    Dependendo do seu sistema de computador, você pode visualizar as imagens como você inseri-los de diferentes maneiras. Aqui estão três opções comuns:

  • Em um PC com o Windows XP, escolha Miniaturas na lista drop-down Ver menu à 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 no lado direito da caixa de diálogo.

  • Em um PC com o Windows Vista ou Windows 7, escolha uma opção ícone (ícones pequenos, Ícones médios, ícones grandes ou ícones grandes extra) a partir da lista drop-down Ver menu à 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 para a extrema direita da caixa de diálogo.

  • Em um Mac, escolher a opção Ver Colunas do canto superior esquerdo da caixa de diálogo como. Você pode ver uma única visualização de qualquer imagem selecionada no lado direito da caixa de diálogo.

    Video: Dreamweaver CS6 Site Dinamico Inserir Imagem nas DIVs Prof J C.Feitosa - Aula 8

    [Fotos por Casey Stoll]
  • Para inserir a imagem, clique duas vezes no nome da imagem ou clique uma vez e, em seguida, clique em OK.

    Se você inserir uma imagem em uma página ea imagem não é guardada na pasta do site local, o Dreamweaver solicita que você com uma caixa de diálogo de aviso e se oferece para copiar a imagem para a pasta de site local. Muitos designers criar uma subpasta chamada imagens dentro da pasta do site local onde armazenar todas as imagens no seu site, mas você pode organizar imagens em várias subpastas, se preferir.

  • Selecione a imagem na sua página web para visualizar e propriedades de edição de imagem.

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

    [Foto por Casey Stoll]
  • Quando você insere um arquivo de imagem em uma página, na verdade você não adicionar uma cópia da imagem ao page- você criar uma referência para a imagem. O código subjacente parece muito com o código para um link de uma página para outra.

    Ambas as referências de imagens e links incluir o nome do arquivo e o caminho da página para esse arquivo. Essencialmente, você está criando uma instrução para um navegador web para encontrar a imagem quando ele exibe a página.

    Para exibir uma imagem na sua página web, você precisa fazer o upload a página e a imagem quando você publicar seu site. Se os seus arquivos de imagem e as páginas que fazem referência a esses arquivos não estão na mesma posição relativa no seu disco rígido como eles estão no seu servidor web, você quebra a referência a suas imagens, e um ícone de imagem quebrada feio aparece na sua página .

    A melhor maneira de certificar-se de que suas imagens e arquivos de ficar onde eles deveriam em relação ao outro é deixar Dreamweaver acompanhá-los para você. É por isso que é tão importante para completar o processo de configuração do site e para se certificar de que você nunca mover ou renomear uma imagem, exceto no painel Arquivos.


    Publicações relacionadas