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.