Como colocar bordas em uma imagem no Dreamweaver?

Às vezes, é necessário definir uma imagem separada do plano de fundo ou do conteúdo ao redor para destacar o Dreamweaver. Uma maneira de criar esse efeito é colocar uma borda ao redor da imagem.

Uma borda pode chamar a atenção para uma imagem e pode fazer parte de uma aparência estilística em todo o site. Às vezes, uma aresta também pode indicar um link.

Existem duas maneiras de definir uma borda neste exercício: você usará CSS para criar a borda, mas também aprenderá sobre o segundo método para aplicar o atributo border à tag da imagem.

Método agregado do Quick Edge

O painel Dreamweaver Edge define a aparência das bordas em torno de imagens, tabelas, tags <div> e outros elementos. Você pode especificar a configuração da borda em um, dois, três ou quatro lados de um item.

  1. Selecione a regra studioPhoto na lista Todas as regras no Painel de estilos CSS.
  2. Clique no botão Editar estilo na parte inferior do painel.
  3. As regras aparecem na ordem em que você as criou.
  4. Com o mais antigo no topo da lista e o mais recente no final.
  5. Na caixa de diálogo Definição de regra de CSS, selecione a categoria Borda.
  6. Escolha sólido nas opções de estilo.
  7. Digite 1 no campo de texto superior da seção Largura e escolha # 747E3F.
  8. Clique em OK para fechar a caixa de diálogo e aplicar a alteração.
  9. O Dreamweaver adiciona uma borda de pixel ao redor da imagem.
  10. A configuração de borda usa uma medida baseada em pixel.
  11. O padrão na caixa de diálogo Definição de regra.
  12. Você pode definir a largura da borda para qualquer número que desejar.

Opções do painel Edge Apresentando o Dreamweaver

Você pode usar as configurações de borda para criar linhas divisórias entre as tags <div> que criam colunas ou adicionam linhas separadoras acima ou abaixo dos elementos.

Relacionado:  Como ativar e desativar as notificações pop-up do WhatsApp Messenger? Guia passo a passo
  • Recolher borda : especifique se as bordas da tabela são mescladas em uma única borda ou separadas como aparecem no HTML padrão ao usar a tag <table>. As opções são Recolher, Separar (o padrão) e Herdar.
  • Espaço entre bordas : defina o espaço entre as bordas das células na tabela adjacente quando a opção Recolher borda estiver definida como Separar.
  • Cor da borda : especifique a cor da borda para todos os quatro lados de um elemento digitando uma cor hexadecimal ou clicando na cor e usando o seletor de cores.
  • Cor da borda superior, direita, esquerda e inferior : especifique cores diferentes para uma ou todas as arestas de um item.
  • Largura da borda : especifique a largura ou espessura da borda. Você pode escolher fino, médio ou grosso, ou pode especificar o tamanho em pixels, ems ou qualquer outra opção de tamanho.
  • Largura superior, direita, esquerda e inferior : especifique larguras diferentes para uma ou todas as arestas de um item.
  • Estilo da borda : escolha uma das opções de estilo da borda, incluindo Sólido, Pontilhado ou Duplo.
    Estilo de borda superior, direita, esquerda e inferior: especifique diferentes estilos de borda para uma ou todas as bordas de um item.
  • Raio da aresta : crie cantos arredondados nas suas arestas. Clique para colocar o cursor em qualquer um dos quatro campos localizados perto dos cantos da caixa de visualização da borda e insira um número para especificar a quantidade do raio. Você pode escolher qualquer uma das opções de tamanho CSS usando a lista suspensa.

Recomendações

Você também pode aplicar uma borda a uma imagem usando o atributo border da marca <img>. Para fazer isso, selecione a imagem e insira um valor para a espessura desejada no campo de texto Borda , no Inspetor de propriedades.

Relacionado:  Como fazer e restaurar um backup do WhatsApp Messenger? Guia passo a passo

Se você atribuir um link a uma imagem , a cor da borda será a mesma da cor Padrão do link especificada em Propriedades da página, a menos que um estilo CSS seja aplicado. Nesse caso, um link não causará nenhuma alteração na cor da borda. .

A cor da borda será igual à cor de texto padrão especificada na caixa de diálogo Propriedades da página. O exemplo a seguir mostra uma imagem que possui um atributo de borda aplicado por meio do Inspetor de propriedades.

Evitar o atributo border em favor do uso de CSS para definir as bordas da imagem, como você fez neste exercício, é um processo de codificação melhor.

 

Você pode estar interessado:

Deixe um comentário