Home Tutoriais Desenvolvimento DREAMWEAVER – O problema da borda automática em imagens com links


Pensando no que escrever, me lembrei de algo que eu sempre abordo nos meus treinamentos na Impacta, e por incrível que pareça, o Dreamweaver CS4 (e nem seus antecessores) não faz automaticamente: tratar a borda gerada pela inserção de um link em uma imagem como um estilo CSS.

Então… vamos fazer com que ele trate! Vamos lá:

– Insira uma imagem do seu site no seu arquivo (salvei o arquivo como demo.html).

– Clique nela e vá no painel Properties (Ctrl + F3). Lá coloque um link qualquer na sua imagem e coloque na opção border o valor 0.

– Verifique o código-fonte (modo Code). Você perceberá que o código border=”0? foi inserido no HTML. Até aí tudo bem… mas se tivéssemos 483 imagens na nossa página seriam 483 border=”0? pelo documento… além de border=”0? ser atributo visual, não considerado pelo XHTML 1.0 Strict!!

– Volte para o modo Design, e retire o valor de border. Aproveite e tire os valores de largura e altura da imagem, sob o mesmo conceito de repetição desnecessária de código. Largura e Altura somente devem ser usados em caso de imagens com tamanho que não seja real, o que não é muito comum…

OBS: Nesse momento, ao clicar em algum outro ponto da página, você perceberá que a imagem ficou com a costumeira borda azulada.

– Acesse o painel CSS (Shift + F11) e crie uma nova regra (New CSS Rule).

– Crie uma regra que será aplicada a todas as imagens da sua página, conforme a figura abaixo.

OBS: Recomendável criar a regra em arquivo css externo, para que você possa controlar todas as imagens do site com uma única regra em um único arquivo.

– Na janela de configuração do CSS, vá à opção Border, e preencha sua largura como zero.

– Clique em Ok, volte ao arquivo. Repare que a borda da imagem sumiu. Vamos ao código:

– Dá para otimizá-lo com uma pequena regra, que pode ser aplicada assim:

– A linguagem CSS entende 0 como sendo valor absoluto. Você tem 0 pixels, 0 centímetros, 0 reais, 0 moedas… você não tem nada. É tudo 0, portanto a unidade de medida pode ser retirada. E também que podemos generalizar, querendo que TODAS AS BORDAS tenham valor zero.

E assim fica corrigido o problema. Anulamos todos os border=”0″ que poderiam aparecer em virtude da inseração de links em imagens, e implantamos o que deveria ser praxe para o Dreamweaver.

Fonte: http://www.mxstudio.com.br/desenvolvimento/dreamweaver/o-problema-da-borda-automatica-em-imagens-com-links/

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.