Técnicas de reconstrução da Web e soluções para problemas comuns
1. Habilidades xhtml + CSS
●Trabalho preparatório a ser feito antes da refatoração:
1. Obtenha uma renderização PSD, deve ser PSD, para que você possa cortá-la mais livremente;
2. Primeiro gere uma página da web sem fatiar o PSD e nomeie-a como index_psd.html (esta página é para referência);
3. Prepare várias pastas necessárias: imagens (para imagens), css (para arquivos de estilo css) e js (para arquivos js);
●Após a conclusão dos preparativos, primeiro analise a estrutura de toda a página. Para analisar a estrutura da página, primeiro observe o todo e depois as partes. Primeiro observe como as seções maiores da página estão relacionadas, se estão justapostas para cima e para baixo ou lado a lado à esquerda e à direita. Depois de ver claramente a grande estrutura da seção da página, você pode construir os blocos mais básicos da página. Por exemplo, se nossa página tiver uma estrutura superior, intermediária e inferior, podemos escrever:
<div id=”header”></div>//Colocar cabeçalho e navegação, etc.
<div id="content"></div>//Conteúdo do tema da página
<div id=”footer”></div>//Declaração de direitos autorais do rodapé da página, etc.
●Ao escrever CSS, você precisa usar o arquivo index_psd.html. Abra este arquivo com DW e selecione o modo de visualização. Você pode medir o comprimento e a largura de cada bloco puxando as linhas auxiliares para fornecer uma referência para definir o CSS. A vantagem disso é que a página reconstruída pode ter precisão de 1 pixel.
●Cada vez que você escreve um bloco, você precisa usar o IE e ff para testar o efeito, para que os problemas possam ser descobertos e resolvidos imediatamente. Quando cada bloco não tiver conteúdo, é melhor adicionar uma cor de fundo a eles.
●Depois de escrever a seção grande, analise o conteúdo da seção grande. O mesmo princípio é começar com o todo e depois com as partes. Por exemplo, a página de conteúdo parece ter duas seções à esquerda e à direita. tempo, podemos escrever o código como:
<div id=”header”></div>//Colocar cabeçalho e navegação, etc.
<div id="content">//Conteúdo do tema da página
<div class="content-2-1"></div>//Esquerda
<div class="content-2-2"></div>//direita
</div>
<div id=”footer”></div>//Declaração de direitos autorais do rodapé da página, etc.
A Tabela 2 no conteúdo-2-1 é dividida em duas colunas, 2-1 representa a coluna da esquerda e 2-2 representa a coluna da direita. Este método de divisão de colunas pode torná-lo mais intuitivo ao visualizar o código da página. colunas, isso As vantagens são mais óbvias.
●Listas de notícias, listas de artigos, etc. são mais bem utilizadas:
<ul>
<li>Título da notícia 1< >
<li>Título da notícia 2< >
…………
<li>Título de notícias< >
</ul>
●A lista de colunas mais a descrição é melhor usada:
<dl>
<dt>Coluna 1</dt>
<dl>Descrição da coluna 1</dl>
<dt>Coluna 2</dt>
<dl>Descrição da coluna 2</dl>
</dl>
●É melhor adicionar a seguinte declaração no início da definição do arquivo CSS
corpo,html{altura:100%};
*{ margem:0px; preenchimento:0px;
●É melhor definir overflow::hidden para blocos grandes, para garantir que o contêiner não seja esticado, destruindo assim o layout de toda a página.
2. Problemas de DIV+CSS
1. Problema inesperado em branco do IE6:
Quando vários blocos pequenos são colocados lado a lado em um bloco grande, a soma das larguras dos blocos pequenos é igual à largura do bloco grande. Isso não é problema em outros navegadores como o FF, mas no IE6 existe apenas. um bloco Se não puder ser exibido, ele será empurrado para baixo. Neste momento, você pode definir o CSS do pequeno bloco para exibir: inline. Se isso não funcionar, reduza a largura de cada bloco em 1 ou 2 pixels.
2. Problema de fantasma do IE6:
Às vezes, no IE6, alguns caracteres no final do conteúdo div aparecem repetidos na parte inferior de um DIV grande, o que não aparece em outros navegadores como o FF. Existem duas maneiras de resolver este problema: 1) Exclua o comentário; 2) Adicione <div class="clear"></div> após este DIV Defina o estilo CSS de clear como:
.claro {
tamanho da fonte: 1px;
claro: ambos;
visibilidade: oculta;
largura: 1px;
}
Recomenda-se usar o segundo método. Se os comentários forem removidos, a legibilidade do código será afetada.
3. Problema com o IE6 não conseguindo centralizar:
De modo geral, contanto que você defina o estilo css para um div (defina seu id como 1): margin:0px auto;, você pode centralizar o div no contêiner que o contém (defina seu id como 0). do seguinte modo:
<divid="0">
<div id="1">… </div>
</div>
Mas o IE6 não funciona. Neste momento, você pode definir o css de div0: text-align: center;
4. Bordas inesperadas aparecem nas imagens vinculadas no IE6
No IE6, às vezes as imagens vinculadas terão uma borda feia, que é causada por <a>. Isso pode ser eliminado definindo um { border:0px;} em CSS.
5. O conteúdo dentro do DIV em FF descarrilou
Às vezes, o conteúdo que parece normal no IE pode ser visto no FF, mas o conteúdo dentro do DIV saiu. Essa situação é especialmente óbvia quando o div tem uma borda. Isso ocorre porque após a altura do div ser definida no IE, se o conteúdo dentro do div for maior que o div, o div aumentará automaticamente em altura. Mas o FF não é tão flexível. Enquanto a altura for limitada, ela não mudará por si só. Neste momento, você pode resolver esse problema redefinindo a altura ou pode definir a altura como automática.
6． Área desaparece inesperadamente em FF
Um layout normal no IE desapareceu no FF. Esse problema geralmente ocorre no bloco de direitos autorais no canto inferior da página. Isso pode ser resolvido adicionando: clear:both a esta área.
Não consigo pensar em outros problemas no momento. Sempre haverá alguns problemas inexplicáveis durante o processo de reconstrução. Contanto que você seja bom em pensar, se dê ao trabalho de testar ou pesquisar online, você sempre encontrará uma solução. A solução de cada problema é um grande ganho.