A maioria de nossos designers ainda usa o tradicional layout de mesa, apresentação e estrutura misturados para construir sites. Aprender como usar XHTML+CSS requer um processo, e fazer com que um site existente esteja em conformidade com os padrões de site não pode ser feito em uma única etapa. A melhor abordagem é proceder passo a passo e em etapas para atingir o objetivo de cumprir integralmente os padrões do site. Se você é iniciante ou não está muito familiarizado com código, também pode usar ferramentas de edição compatíveis com os padrões, como o Dreamweaver MX 2004, que atualmente é a ferramenta mais completa que suporta padrões CSS.
1. melhoria primária
Adicione o DOCTYPE correto à página
Muitos designers e desenvolvedores não sabem o que é DOCTYPE e para que é utilizado. DOCTYPE é a abreviatura de tipo de documento. Usado principalmente para indicar qual versão de XHTML ou HTML você está usando. O navegador interpreta o código da página de acordo com o DTD (Document Type Definition) definido pelo seu DOCTYPE. Portanto, se você acidentalmente definir o DOCTYPE errado, os resultados irão surpreendê-lo. XHTML1.0 oferece três opções DOCTYPE:
(1) Transicional
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) Estrito
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3) Tipo de quadro (conjunto de quadros)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Para nossa melhoria primária, precisamos apenas usar uma declaração transitória. Ele ainda pode ser compatível com o layout da sua mesa, logotipos de desempenho, etc., para que você não sinta que as mudanças são muito grandes e difíceis de dominar.
Dica: Se você tiver preguiça de inserir o código de transição acima, pode visitar a página inicial do site http://www.macromedia.com/, visualizar o código-fonte e copiar e colar o mesmo código na área principal .
Definir um namespace (Namespace)
Adicione o seguinte código diretamente após a declaração DOCTYPE:
<html XMLns=http://www.w3.org/1999/xhtml >
Um namespace é um DTD detalhado que coleta tipos de elementos e nomes de atributos. A declaração de namespace permite identificar seu namespace por meio de um ponteiro de endereço online. Basta inserir o código normalmente.
Declare sua linguagem de codificação
Para serem corretamente interpretados pelos navegadores e passarem na validação de marcação, todos os documentos XHTML devem declarar a linguagem de codificação que utilizam. O código é o seguinte:
<meta http-equiv=Content-Type content=text/html; charset=GB2312 />
A linguagem de codificação declarada aqui é Chinês Simplificado GB2312. Se precisar produzir conteúdo em Chinês Tradicional, você pode defini-la como BIG5.
Escreva todos os rótulos em letras minúsculas
XML diferencia maiúsculas de minúsculas, então XHTML também diferencia maiúsculas de minúsculas. Todos os nomes de elementos e atributos XHTML devem estar em letras minúsculas. Caso contrário o seu documento será considerado inválido pela validação do W3C. Por exemplo, o código a seguir está incorreto:
<TITLE>Perfil da empresa</TITLE>
A maneira correta de escrever é:
<title>Perfil da Empresa</title> Da mesma forma, altere <P> para <p>, <B> para <b>, etc. Esta etapa de conversão é simples.
Adicionar atributo alt à imagem
Adicione o atributo alt a todas as imagens. O atributo alt especifica que o texto de substituição é exibido quando a imagem não pode ser exibida. Isso é dispensável para usuários normais, mas é crucial para navegadores somente de texto e usuários que usam leitores de tela. Somente quando o atributo alt for adicionado o código passará na verificação de correção do W3C. Observe que precisamos adicionar um atributo alt significativo. Não faz sentido escrevê-lo assim:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
Maneira correta de escrever:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=Logotipo da empresa UNC, clique para retornar à página inicial>
Citar todos os valores de atributos
Em HTML, você não precisa citar valores de atributos, mas em XHTML, eles devem estar entre aspas.
Exemplo: altura=100, não altura=100.
Feche todas as guias
Em XHTML, toda tag aberta deve ser fechada. Assim:
<p>Toda aba aberta deve ser fechada. </p> <b>HTML pode aceitar tags não fechadas, mas XHTML não. </b>
Esta regra pode evitar confusão e problemas com HTML. Por exemplo: se você não fechar a tag da imagem, poderá ter problemas de exibição de CSS em alguns navegadores. Use este método para garantir que a página apareça conforme você a projetou. Deve-se observar que tags vazias também devem ser fechadas. Use uma barra / no final da tag para se fecharem. Por exemplo:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
Após ser processada pelas sete regras acima, a página atende basicamente aos requisitos do XHTML1.0. Mas ainda precisamos verificar se realmente atende aos padrões. Podemos usar o W3C para fornecer serviços de validação gratuitos (http://validator.w3.org/). Corrija os erros um por um depois de descobri-los. Na lista de recursos a seguir, também fornecemos outros serviços de verificação e URLs que fornecem orientação sobre verificação, que podem ser usados como complemento à verificação W3C. Quando você finalmente passar na validação XHTML, parabéns, você deu um grande passo em direção aos padrões do site. Não é tão difícil quanto você pensa!
2. Melhoria intermediária
Nossa próxima melhoria está principalmente na separação entre estrutura e desempenho. Esta etapa não é tão fácil de alcançar quanto a primeira etapa. Precisamos de uma mudança de conceito, bem como do aprendizado e aplicação da tecnologia CSS2. Mas aprender algo novo leva tempo, certo? O truque é aprender fazendo. Se você sempre usou layout de tabela e nunca usou CSS, não há necessidade de pressa para dizer adeus ao layout de tabela. Você pode primeiro substituir a tag de fonte por uma folha de estilo. À medida que você aprende mais, você pode fazer mais. Ok, vamos dar uma olhada no que precisamos fazer:
Defina a aparência dos elementos com CSS
Desenvolvemos um hábito ao escrever logotipos. Quando queremos que a fonte seja maior, usamos <h1>, e quando queremos adicionar um símbolo de ponto na frente, usamos <li>. Sempre pensamos em <h1> como grande, <li> como pontos e <b> como "texto em negrito". Na verdade, <h1> pode se tornar o que você quiser através do CSS, <h1> pode se tornar uma fonte pequena, <p> o texto pode se tornar enorme e em negrito e <li> pode se tornar uma imagem e assim por diante. Não podemos forçar a apresentação de elementos estruturais, devemos usar CSS para determinar a aparência desses elementos. Por exemplo, podemos fazer com que os títulos padrão originais de nível 6 tenham o mesmo tamanho:
h1, h2, h3, h4, h5, h6{ família de fontes: 宋体, tamanho da fonte: 12px;
Substitua lixo sem sentido por elementos estruturados
Muitas pessoas talvez nunca tenham sabido que os elementos HTML e XHTML foram projetados para expressar estrutura. Muitos de nós nos acostumamos a usar elementos para controlar a apresentação, em vez da estrutura. Por exemplo, uma lista pode ser marcada assim:
Frase 1<br /> Frase 2<br /> Frase 3<br />
Seria melhor se usássemos uma lista não ordenada:
<ul> <li>Frase 1</li> <li>Frase 2</li> <li>Frase 3</li> </ul>
Você pode dizer: "Mas <li> exibe um ponto e não quero usar um ponto." Na verdade, CSS não especifica a aparência de um elemento. Você pode desligar os pontos usando CSS.
Adicione id a cada tabela e formulário
Forneça uma tabela ou forme uma marcação estrutural exclusiva, por ex.
<id da tabela=menu>
A seguir, ao escrever a folha de estilo, você pode criar um seletor de “menu” e associá-lo a uma regra CSS que informa às células da tabela, rótulos de texto e todos os outros elementos como exibir. Dessa forma, não há necessidade de anexar alguns atributos da camada de apresentação redundantes e que consomem largura de banda, como altura, largura, alinhamento e cor de fundo a cada tag <td>. Com apenas uma tag anexada (o "menu" de marcação de tag de identificação), você pode executar o processamento de apresentação ad-hoc para marcação de código limpa e compacta em uma folha de estilo separada.
Para melhorias intermediárias, listaremos aqui primeiro os três pontos principais, mas contém muito conteúdo e pontos de conhecimento, que precisamos aprender e dominar passo a passo até finalmente conseguirmos o layout usando CSS completamente sem usar nenhuma tabela.