1. Problemas de validação de CSS
Em primeiro lugar, de acordo com os requisitos da competição, as inscrições devem cumprir os padrões XHTML e o CSS enviado deve passar pela verificação do W3C. A situação de verificação CSS é ideal. Apenas 8 entradas entre as entradas falharam na verificação CSS2.0. Os principais erros de verificação são: "Linha: 0 família de fontes: é 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" é usado para 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
Por se tratar de uma competição de folhas de estilo, todos prestaram mais atenção à verificação de CSS, mas foram um pouco negligenciados em termos de conformidade com XHTML e ocorreram 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 a folha de estilos. É mais fácil manter o arquivo da folha de estilos de forma independente. 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.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />Obviamente há uma aspa extra no valor do atributo content.
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): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">
<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high"
pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
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. Mais instruções: consulte http://www.blueidea.com/tech/site/2004/1920.asp
Códigos como id=header class=title devem ser escritos como id="header" class="title". Citar valores de atributos é a regra de sintaxe XHTML mais básica.
4. Problemas de compatibilidade
Existem 12 obras que ficam deformadas e desalinhadas quando visualizadas no IE6.0, Mozilla Firefox1.0 e Opera 7.12. (Não testei com o IE5.0, fui preguiçoso :) O IE5.0 é um desafio para todos os designers de layout CSS).
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".
De modo geral, a maioria das inscrições são qualificadas em geral, e o objetivo desta competição foi basicamente alcançado. Os padrões da Web e o layout CSS foram compreendidos e dominados por cada vez mais designers. Quanto à arte pobre de alguns trabalhos, acho que este é um processo. Todos os designers seniores deveriam lembrar que quando o layout da Tabela apareceu pela primeira vez, a maioria das páginas da web eram muito simples. Após um período de digestão, compreensão e aplicação do layout CSS, haverá mais páginas da web que levam em consideração a tecnologia e a estética, como o primeiro prêmio.