À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.
- Selecione a regra studioPhoto na lista Todas as regras no Painel de estilos CSS.
- Clique no botão Editar estilo na parte inferior do painel.
- As regras aparecem na ordem em que você as criou.
- Com o mais antigo no topo da lista e o mais recente no final.
- Na caixa de diálogo Definição de regra de CSS, selecione a categoria Borda.
- Escolha sólido nas opções de estilo.
- Digite 1 no campo de texto superior da seção Largura e escolha # 747E3F.
- Clique em OK para fechar a caixa de diálogo e aplicar a alteração.
- O Dreamweaver adiciona uma borda de pixel ao redor da imagem.
- A configuração de borda usa uma medida baseada em pixel.
- O padrão na caixa de diálogo Definição de regra.
- 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.
- 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.
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.
