Ao aplicar o layout de página da web Div + CSS para criar um site que esteja em conformidade com os padrões da web, alguns problemas podem surgir facilmente.
Vamos resumir agora para que todos possam ver onde está o problema.
1. Problemas de validação de CSS
Todas as páginas da web que criamos esperam estar em conformidade com os padrões XHTML e CSS para passar na verificação W3C. Algumas falhas na verificação CSS2.0 Os principais erros de verificação são: "Linha: 0 font-family: É recomendado que você especifique uma família de tipos como a última escolha."
O W3C recomenda que, ao definir fontes, termine com uma categoria de fontes em vez de uma única fonte. Por exemplo, "sans-serif" pode garantir que as fontes da web possam ser exibidas em diferentes sistemas operacionais.
Embora a maioria das pessoas defina "sans-serif" na tag body, se o sans-serif for omitido ao definir a fonte novamente em outros IDs ou classes, considera-se que a verificação falhou. Esse erro não é muito grave e pode ser evitado com um pouco de atenção.
2. Sugestões de escrita CSS
Adicione comentários aos arquivos CSS. Os comentários trarão comodidade para sua manutenção futura. Recomenda-se adicionar comentários aos arquivos CSS tanto quanto possível e não se preocupe em adicionar um pequeno número de bytes. Tente encurtar a sintaxe CSS tanto quanto possível. Por exemplo, o valor da cor "#FFFFFF" pode ser abreviado como "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" pode ser abreviado como " preenchimento:30px 0 10px" 20px;". Existem mais técnicas de salvamento na definição de técnicas e, à medida que você se torna mais proficiente em aplicativos CSS, continuará descobrindo métodos melhores.
3. Problemas de validação de XHTML
As pessoas geralmente prestam mais atenção à verificação de CSS, mas negligenciam a conformidade com os padrões XHTML e ocorrem muitos erros de baixo nível. Os principais problemas estão listados abaixo:
◎target="_blank", esta sintaxe está correta em HTML4.0, mas não é permitida em XHTML1.0. Uma solução é escrever target="new" e outra solução é usar js para processar todos os alvos;
◎É melhor não incorporar folhas de estilo. Arquivos de folhas de estilo separados são mais fáceis de manter. Se <style> estiver incorporado, ele deve ser escrito como <style type="text/css"> e o tipo não pode ser ignorado, caso contrário, o XHTML não poderá determinar para que seu estilo é usado.
◎<br> deve ser escrito como <br />. XHTML exige que todas as tags sejam fechadas e sejam seguidas diretamente por "/".
◎Reutilize o mesmo ID. Um ID só pode ser usado uma vez em XHTML. Se você precisar referenciar o estilo várias vezes, deverá usar class.
◎O método de incorporação do Flash está errado. <embed> era originalmente uma tag privada do Netscape Embora posteriormente tenha sido suportada pelo IE, nunca foi reconhecida pelo W3C. Não existe tag <embed> no HTML4.0. O W3C defende o uso da tag <object>. Para resolver o problema de compatibilidade entre diferentes navegadores, uma solução alternativa é usar ambas as tags.
O código de exemplo completo é o seguinte (o fundo do flash é transparente):
| A seguir está o conteúdo citado: <objeto classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" base de código= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" largura="300" altura="100"> <param name="qualidade" valor="alta"> <param name="wmode" value="transparent"> <param name="SRC" valor="test.swf"> <embed src="test.swf" wmode="transparent" qualidade="alta" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="aplicativo/x-shockwave-flash" largura="300" altura="100"> </embed> </objeto> |
Mas ainda não é possível escrevê-lo diretamente em XHTML. Agora só podemos enganar a verificação escrevendo o código acima no arquivo flash.js e depois chamando-o.
<script type="text/javascript" src="flash.js"></script>
Se o flash atende aos padrões é uma questão controversa.
◎Código semelhante a id=header class=title deve ser escrito como id="header" class="title". Citar valores de atributos é a regra de sintaxe XHTML mais básica.
4. Problemas de compatibilidade
Alguns sites ficam deformados e desalinhados quando visualizados no IE6.0, Mozilla Firefox1.0 e Opera 7.12.
Está centrado no IE, mas não no Mozilla. Definir o corpo {TEXT-ALIGN: center;} no IE já pode centralizá-lo, mas no Mozilla você deve adicionar as seguintes configurações de estilo à camada que precisa ser centralizada: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
Excede a largura. A página parece normal no Mozilla, mas no IE ela fica deformada porque ultrapassa a largura e as camadas lado a lado são movidas para baixo. Esta situação é causada pelas diferentes interpretações do modelo de caixa entre o IE e o Mozilla. Existem muitas soluções, como o método "!important".
Os padrões da Web e o layout CSS têm sido compreendidos e dominados por cada vez mais designers. Após um período de digestão, compreensão e aplicação do layout CSS, surgirão mais páginas da web com considerações técnicas e estéticas.