Como adicionar imagens e backgrounds no Dreamweaver CC

Tabela de Conteúdos

1. Introdução
2. Como adicionar imagens em Adobe Dreamweaver CC
3. Distinguir entre imagens e backgrounds em Dreamweaver
4. Importar imagens no modo Design View
5. Propriedades da imagem no Property Inspector
6. Adicionar texto alternativo a uma imagem
7. Adicionar uma imagem como banner
8. Configurar propriedades de layout da imagem
9. Adicionar um background sólido
10. Adicionar um background com uma imagem
11. Adicionar um gradiente como background
12. Adicionar backgrounds a parágrafos e cabeçalhos
13. Decidir entre usar uma imagem ou um background
14. Importar imagens e adaptar layouts
15. Conclusão

🖼️ Como adicionar imagens e backgrounds com Adobe Dreamweaver CC

Neste artigo, vamos aprender como adicionar imagens e backgrounds usando o Adobe Dreamweaver CC. O Dreamweaver é uma ferramenta poderosa para a criação de sites, e entender como adicionar elementos visuais é essencial para criar um design atraente e visualmente apelativo para o seu site.

1. Introdução

Antes de adentrarmos nas instruções detalhadas sobre como adicionar imagens e backgrounds no Dreamweaver, é importante compreender a diferença entre esses dois elementos. As imagens são consideradas arquivos contidos dentro de uma tag Div. Isso significa que, se a caixa da tag Div tiver seu tamanho alterado, a imagem manterá o seu tamanho original. Por outro lado, um background é uma imagem que sempre ocupa a tag Div por completo. Portanto, se a tag Div mudar de tamanho, o background acompanhará essa mudança.

2. Como adicionar imagens em Adobe Dreamweaver CC

No modo Design View do Dreamweaver, é possível importar uma imagem de diferentes formas. Você pode copiar e colar a imagem, ou arrastar e soltar o arquivo diretamente. Importante ressaltar que o texto não pode ficar sobre a imagem, a não ser que sejam usadas quebras de linha para separá-los.

A imagem importada é indicada pelo comando "img src=..." e os valores de largura e altura em pixels podem ser editados arrastando os pequenos quadrados da imagem. Para mover a imagem, basta selecioná-la e arrastá-la. Para excluí-la, basta selecioná-la e pressionar CTRL+X. No Property Inspector, você pode visualizar todas as propriedades da imagem, como o src (que define qual imagem será utilizada), o link (que adiciona um endereço de destino ao clicar na imagem) e as opções de edição.

3. Distinguir entre imagens e backgrounds em Dreamweaver

É importante diferenciar entre imagens e backgrounds no Dreamweaver para utilizá-los corretamente. As imagens são arquivos contidos dentro de uma tag Div, enquanto os backgrounds são imagens que ocupam por completo a tag Div. Isso significa que, se uma tag Div mudar de tamanho, a imagem mantém seu tamanho original, enquanto o background acompanha essa mudança.

4. Importar imagens no modo Design View

No modo Design View do Dreamweaver, é possível importar imagens de diferentes maneiras. Você pode copiar e colar a imagem, ou arrastar o arquivo para a tela de design. É importante lembrar que o texto não pode ser colocado diretamente sobre uma imagem, a menos que sejam utilizadas quebras de linha para separá-los. A imagem importada é indicada pelo comando "img src=..." e os valores de largura e altura em pixels podem ser ajustados arrastando os pequenos quadrados presentes na imagem. Para mover a imagem, basta selecioná-la e arrastá-la. Para excluí-la, utilize a combinação de teclas CTRL+X.

5. Propriedades da imagem no Property Inspector

No Property Inspector do Dreamweaver, você pode visualizar e editar todas as propriedades da imagem. Quando o modo Live View está desativado, basta selecionar a imagem para acessar as configurações. O atributo "src" define qual imagem será utilizada. O atributo "link" permite adicionar um link que será aberto ao clicar na imagem. Os valores "W" e "H" representam a largura e altura da imagem, respectivamente. É possível manter a proporção da imagem constante ao fechar o cadeado localizado ao lado desses valores. Ao lado do botão "Editar", você pode realizar edições simples na imagem. Para edições mais avançadas, é possível utilizar o Adobe Photoshop, clicando no ícone do Photoshop, caso esteja instalado. É importante lembrar que todas essas edições são permanentes, por isso é recomendado utilizar o comando "Editar > Desfazer" para desfazer alterações indesejadas. O atributo "Alt" permite adicionar um texto alternativo à imagem, que será exibido caso a imagem não possa ser carregada por algum motivo.

6. Adicionar texto alternativo a uma imagem

É uma boa prática adicionar texto alternativo a uma imagem. O texto alternativo, ou atributo "Alt", é um pequeno texto que substitui a imagem caso ela não possa ser exibida por algum motivo. Isso é especialmente útil para usuários com deficiências visuais ou quando a imagem não pode ser carregada corretamente. Para adicionar texto alternativo a uma imagem no Dreamweaver, basta selecionar a imagem, acessar o Property Inspector e preencher o campo "Alt" com o texto desejado.

7. Adicionar uma imagem como banner

Uma das aplicações comuns de adicionar imagens no Dreamweaver é criar um banner. Para isso, basta importar uma imagem adequada e ajustar as propriedades de layout para que ela se encaixe corretamente no espaço destinado ao banner. É importante lembrar de definir corretamente as propriedades de layout da imagem para garantir um design coerente e agradável.

8. Configurar propriedades de layout da imagem

Ao adicionar uma imagem no Dreamweaver, é possível configurar diversas propriedades de layout para garantir que ela se ajuste corretamente ao design do site. Para isso, basta selecionar a imagem e ir até a seção de "Seletores" na barra de ferramentas. Lá, é possível ajustar as propriedades de layout da imagem, como largura, altura, margens e posicionamento.

9. Adicionar um background sólido

No Dreamweaver, é possível adicionar backgrounds sólidos a elementos HTML, como as tags Div. Para isso, basta selecionar a Div desejada, acessar a seção de "Seletores" na barra de ferramentas e clicar no ícone de "Background" (quarto ícone). Por padrão, o Background está configurado como uma cor sólida. É possível selecionar uma cor desejada na paleta de cores para aplicá-la ao background. Vale ressaltar que essa cor de background afetará todas as Divs que não possuam backgrounds e estiverem dentro da Div selecionada.

10. Adicionar um background com uma imagem

Além de backgrounds sólidos, é possível adicionar backgrounds com imagens no Dreamweaver. Para isso, vá até a seção de "Background" na barra de ferramentas, clique em "background-image" e, em seguida, clique no botão de seleção de arquivo para buscar uma imagem no seu computador. Essa imagem substituirá a cor de background sólida. É importante observar o tamanho da imagem utilizada, pois pode ser necessário ajustá-la. Para tanto, vá até a seção "background-size" e escolha a opção "pixels", especificando o tamanho desejado. Lembre-se de sempre verificar o resultado no modo Live View.

11. Adicionar um gradiente como background

O Dreamweaver também permite adicionar gradientes como backgrounds. É possível criar gradientes personalizados selecionando a opção "background-image" na seção de "Background" e, em seguida, escolher a opção de gradiente. Nessa opção, é possível definir as cores e a direção do gradiente. Lembre-se de verificar o tamanho da imagem gerada pelo gradiente e ajustá-la, se necessário, na seção de "background-size".

12. Adicionar backgrounds a parágrafos e cabeçalhos

Além de aplicar backgrounds a elementos como Divs, você também pode adicionar backgrounds a parágrafos e cabeçalhos no Dreamweaver. No entanto, é importante lembrar que o background irá cobrir toda a linha de texto, sem nenhuma opção de controle sobre o comprimento do background. Para adicionar um background a um parágrafo ou cabeçalho, basta selecionar o elemento desejado e seguir os mesmos passos mencionados anteriormente para definir a cor de background ou importar uma imagem.

13. Decidir entre usar uma imagem ou um background

Ao adicionar elementos visuais em seu site, como imagens ou backgrounds, é importante tomar a decisão correta sobre qual elemento utilizar. No caso de imagens, elas são mais adequadas quando não há texto dentro delas ou quando não é necessário adaptar o tamanho da imagem conforme a tag Div muda de tamanho. Por exemplo, as imagens podem ser usadas como legendas de algum conteúdo. Já os backgrounds são mais indicados quando é necessário criar um site flexível, que se adapta a diferentes tamanhos de tela. Portanto, é recomendado utilizar backgrounds na maioria dos casos, para garantir um design responsivo e adaptável.

14. Importar imagens e adaptar layouts

Ao importar imagens para o Dreamweaver, é importante levar em consideração a adaptação dos layouts. Dependendo das imagens que forem utilizadas, pode ser necessário ajustar os layouts para garantir a harmonia visual e a melhor experiência do usuário. Portanto, é recomendado realizar testes e ajustes necessários para garantir um website com layouts consistentes e atrativos.

15. Conclusão

Adicionar imagens e backgrounds é uma parte essencial do processo de criação de um site no Adobe Dreamweaver CC. Com as informações e instruções fornecidas neste artigo, você está preparado para adicionar elementos visuais de forma eficiente e profissional ao seu website. Explore as diversas opções oferecidas pelo Dreamweaver e crie designs incríveis que se destacam. Experimente diferentes combinações de imagens, backgrounds e layouts para encontrar a melhor solução para o seu site.

Destaques

• Aprenda como adicionar imagens e backgrounds no Adobe Dreamweaver CC.
• Distinga entre imagens (contidas dentro de uma Div Tag) e backgrounds (que cobrem completamente uma Div Tag).
• Importe imagens no modo Design View.
• Personalize as propriedades da imagem no Property Inspector.
• Adicione texto alternativo a uma imagem.
• Crie um banner utilizando uma imagem.
• Ajuste as propriedades de layout da imagem.
• Adicione backgrounds sólidos ou com imagens.
• Utilize gradientes como backgrounds.
• Adicione backgrounds a parágrafos e cabeçalhos.
• Decida entre usar uma imagem ou um background.
• Importe imagens e adapte layouts para obter um design responsivo.

Perguntas Frequentes

P: O Dreamweaver permite adicionar vários backgrounds a uma única tag Div? R: Não, o Dreamweaver permite adicionar apenas um background por vez a uma tag Div.

P: Posso alterar a cor de fundo de um parágrafo ou cabeçalho sem afetar o texto? R: Não, ao adicionar um background a um parágrafo ou cabeçalho, o background irá cobrir toda a linha de texto.

P: É possível adicionar um link a uma imagem no Dreamweaver? R: Sim, é possível adicionar um link a uma imagem no Dreamweaver. Basta utilizar o atributo "link" no Property Inspector e definir o endereço de destino.

P: Como posso desfazer uma edição feita em uma imagem no Dreamweaver? R: Para desfazer uma edição feita em uma imagem no Dreamweaver, basta utilizar o comando "Editar > Desfazer" ou utilizar o atalho CTRL+Z.

P: O que é texto alternativo e por que devo utilizá-lo em uma imagem? R: O texto alternativo, ou atributo "Alt", é um pequeno texto que substitui a imagem caso ela não possa ser exibida por algum motivo. O texto alternativo é importante para acessibilidade e permite que usuários com deficiências visuais compreendam o conteúdo da imagem.

P: É possível ajustar o tamanho de uma imagem importada no Dreamweaver? R: Sim, é possível ajustar o tamanho de uma imagem importada no Dreamweaver. Basta selecionar a imagem e arrastar os pequenos quadrados presentes na imagem para redimensioná-la.