Techniques de reconstruction Web et solutions aux problèmes courants
1. Compétences xhtml+CSS
●Travaux préparatoires à effectuer avant le refactoring :
1. Obtenez un rendu PSD, il doit être PSD, afin que vous puissiez le découper plus librement par vous-même ;
2. Générez d'abord une page Web sans découper le PSD et nommez-la index_psd.html (cette page est pour référence) ;
3. Préparez plusieurs dossiers nécessaires images (pour les images), css (pour les fichiers de style CSS) et js (pour les fichiers js) ;
●Une fois les préparatifs terminés, analysez d'abord la structure de la page entière. Pour analyser la structure de la page, regardez d'abord l'ensemble, puis les parties. Regardez d'abord comment les plus grandes sections de la page sont liées, qu'elles soient juxtaposées de haut en bas ou carrelées à gauche et à droite. Après avoir vu clairement la structure des grandes sections de la page, vous pouvez créer les blocs les plus élémentaires de la page. Par exemple, si notre page a une structure haut, milieu et bas, nous pouvons écrire :
<div id="header"></div>//Placer l'en-tête et la navigation, etc.
<div id="content"></div>//Contenu du thème de la page
<div id="footer"></div>//Déclaration de droits d'auteur en pied de page, etc.
●Lors de l'écriture de CSS, vous devez utiliser le fichier index_psd.html. Ouvrez ce fichier avec DW et sélectionnez le mode d'affichage. Vous pouvez mesurer la longueur et la largeur de chaque bloc en tirant les lignes auxiliaires pour fournir une référence pour définir le CSS. L'avantage de ceci est que la page reconstruite peut être précise à 1 pixel près.
●Chaque fois que vous écrivez un bloc, vous devez utiliser IE et ff pour tester l'effet afin que les problèmes puissent être découverts et résolus rapidement. Lorsque chaque bloc n'a pas de contenu, il est préférable de leur ajouter une couleur d'arrière-plan.
●Après avoir écrit la grande section, analysez le contenu dans la grande section. Le même principe est de commencer par l'ensemble puis par les parties. Par exemple, la page de contenu ressemble à deux sections à gauche et à droite. temps, nous pouvons écrire le code comme suit :
<div id="header"></div>//Placer l'en-tête et la navigation, etc.
<div id="content">//Contenu du thème de la page
<div class="content-2-1"></div>//Gauche
<div class="content-2-2"></div>//droite
</div>
<div id="footer"></div>//Déclaration de droits d'auteur en pied de page, etc.
Le tableau 2 du contenu-2-1 est divisé en deux colonnes, 2-1 représente la colonne de gauche et 2-2 représente la colonne de droite. Cette méthode de division en colonnes peut vous rendre plus intuitive lors de la visualisation du code de la page lorsqu'elle est divisée en plusieurs. colonnes, ceci Les avantages sont plus évidents.
●Les listes d'actualités, les listes d'articles, etc. sont mieux utilisées :
<ul>
<li>Titre 1 de l'actualité< >
<li>Actualités Titre 2< >
…………
<li>Titre des actualités< >
</ul>
●Il est préférable d'utiliser la liste des colonnes et la description :
<dl>
<dt>Colonne 1</dt>
<dl>Description de la colonne 1</dl>
<dt>Colonne 2</dt>
<dl>Description de la colonne 2</dl>
</dl>
●Il est préférable d'ajouter l'instruction suivante au début de la définition du fichier CSS
corps,html{ hauteur:100% }
*{ marge :0px ; remplissage :0px ;
●Il est préférable de définir overflow::hidden pour les gros blocs, afin de garantir que le conteneur ne soit pas étiré, détruisant ainsi la mise en page de la page entière.
2. Problèmes DIV+CSS
1. Problème de vide inattendu dans IE6 :
Lorsque plusieurs petits blocs sont posés côte à côte dans un grand bloc, la somme des largeurs des petits blocs est égale à la largeur du grand bloc. Cela ne pose pas de problème dans d'autres navigateurs comme FF, mais dans IE6 il n'y en a que. un bloc s’il ne peut pas être affiché, il sera poussé en dessous. A ce moment, vous pouvez définir le CSS du petit bloc pour qu'il affiche : inline. Si cela ne fonctionne pas, réduisez la largeur de chaque bloc de 1 ou 2 pixels.
2. Problème de fantôme IE6 :
Parfois, dans IE6, quelques caractères à la fin du contenu div apparaissent répétés au bas d'un grand DIV, ce qui n'apparaît pas dans d'autres navigateurs tels que FF. Il existe deux manières de résoudre ce problème : 1) Supprimez le commentaire ; 2) Ajoutez <div class="clear"></div> après ce DIV. Définissez le style CSS de clear comme :
.clair {
taille de police : 1 px ;
clair : les deux ;
visibilité : cachée ;
largeur : 1px ;
}
Il est recommandé d'utiliser la deuxième méthode. Si les commentaires sont supprimés, la lisibilité du code sera affectée.
3. Problème avec IE6 qui ne parvient pas à centrer :
De manière générale, tant que vous définissez le style CSS d'un div (définissez son identifiant sur 1) : margin:0px auto;, vous pouvez centrer le div dans le conteneur qui le contient (définissez son identifiant sur 0). comme suit:
<identifiant div="0">
<div id="1"> … </div>
</div>
Mais IE6 ne fonctionne pas. À ce stade, vous pouvez définir le CSS de div0 : text-align: center ;
4. Des bordures inattendues apparaissent sur les images liées dans IE6
Dans IE6, les images liées auront parfois une bordure laide, causée par <a>. Cela peut être éliminé en définissant un { border:0px;} dans CSS.
5. Le contenu à l'intérieur du DIV dans FF a déraillé
Parfois, un contenu qui semble normal dans IE peut être vu dans FF mais le contenu à l'intérieur du DIV est sorti. Cette situation est particulièrement évidente lorsque le div a une bordure. En effet, une fois la hauteur du div définie dans IE, si le contenu à l'intérieur du div est supérieur au div, la hauteur du div augmentera automatiquement. Mais FF n'est pas si flexible tant que la hauteur est limitée, elle ne changera pas d'elle-même. À ce stade, vous pouvez résoudre ce problème en réinitialisant la hauteur ou en réglant la hauteur sur automatique.
6. La zone disparaît de manière inattendue dans FF
Une mise en page normale dans IE a disparu dans FF. Ce problème se produit souvent dans le bloc de droits d'auteur situé dans le coin inférieur de la page. Cela peut être résolu en ajoutant : clear:both;
Je ne peux pas penser à d'autres problèmes pour le moment. Il y aura toujours des problèmes inexplicables pendant le processus de reconstruction. Tant que vous êtes doué pour réfléchir, prenez la peine de tester ou de rechercher en ligne, vous trouverez toujours une solution. La solution de chaque problème est un grand gain.