La plupart de nos concepteurs utilisent encore la disposition, la présentation et la structure traditionnelles des tableaux pour créer des sites Web. Apprendre à utiliser XHTML+CSS nécessite un processus, et rendre un site Web existant conforme aux normes des sites Web ne peut pas se faire en une seule étape. La meilleure approche consiste à procéder étape par étape et par étapes pour atteindre l’objectif de conformité totale aux normes des sites Web. Si vous êtes novice ou peu familier avec le code, vous pouvez également utiliser des outils d'édition conformes aux standards, tels que Dreamweaver MX 2004, qui est actuellement l'outil le plus complet prenant en charge les standards CSS.
1． amélioration primaire
Ajoutez le bon DOCTYPE à la page
De nombreux concepteurs et développeurs ne savent pas ce qu'est DOCTYPE et à quoi il sert. DOCTYPE est l'abréviation de type de document. Principalement utilisé pour indiquer la version de XHTML ou HTML que vous utilisez. Le navigateur interprète le code de la page selon la DTD (Document Type Definition) définie par votre DOCTYPE. Ainsi, si vous définissez accidentellement le mauvais DOCTYPE, les résultats vous surprendront. XHTML1.0 propose trois options DOCTYPE :
(1) Transitionnel
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) Stricte
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3)Type de cadre (Frameset)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Pour notre principale amélioration, nous devons uniquement utiliser une instruction de transition. Il peut toujours être compatible avec la disposition de votre table, les logos de performances, etc., afin que vous n'ayez pas l'impression que les changements sont trop importants et difficiles à maîtriser.
Astuce : si vous êtes trop paresseux pour saisir le code de transition ci-dessus, vous pouvez visiter la page d'accueil du site Web http://www.macromedia.com/, puis afficher le code source, puis copier et coller le même code dans la zone d'en-tête. .
Définir un espace de noms (Namespace)
Ajoutez le code suivant directement après la déclaration DOCTYPE :
<html XMLns=http://www.w3.org/1999/xhtml >
Un espace de noms est une DTD détaillée qui collecte les types d'éléments et les noms d'attributs. La déclaration d'espace de noms vous permet d'identifier votre espace de noms via un pointeur d'adresse en ligne. Entrez simplement le code comme d'habitude.
Déclarez votre langage de codage
Afin d'être correctement interprétés par les navigateurs et de passer la validation du balisage, tous les documents XHTML doivent déclarer le langage de codage qu'ils utilisent. Le code est le suivant :
<méta http-equiv=Content-Type content=text/html; charset=GB2312 />
Le langage de codage déclaré ici est le chinois simplifié GB2312. Si vous devez produire du contenu en chinois traditionnel, vous pouvez le définir comme BIG5.
Écrivez toutes les étiquettes en lettres minuscules
XML est sensible à la casse, donc XHTML est également sensible à la casse. Tous les noms d’éléments et d’attributs XHTML doivent être en minuscules. Dans le cas contraire, votre document sera considéré comme invalide par validation W3C. Par exemple, le code suivant est incorrect :
<TITLE>Profil de l'entreprise</TITLE>
La bonne façon de l’écrire est :
<title>Profil de l'entreprise</title> De même, remplacez <P> par <p>, <B> par <b>, etc. Cette étape de conversion est très simple.
Ajouter l'attribut alt à l'image
Ajoutez l'attribut alt à toutes les images. L'attribut alt spécifie que le texte de remplacement est affiché lorsque l'image ne peut pas être affichée. Ceci est inutile pour les utilisateurs normaux, mais c'est crucial pour les navigateurs texte uniquement et les utilisateurs utilisant des lecteurs d'écran. Ce n'est que lorsque l'attribut alt est ajouté que le code passera le contrôle d'exactitude du W3C. Notez que nous devons ajouter des attributs alt significatifs, écrire comme suit n'a aucun sens :
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
Façon correcte d'écrire :
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=Logo de l'entreprise UNC, cliquez pour revenir à la page d'accueil>
Citer toutes les valeurs d'attribut
En HTML, vous n'avez pas besoin de citer les valeurs d'attribut, mais en XHTML, elles doivent être citées.
Exemple : hauteur=100, et non hauteur=100.
Fermez tous les onglets
En XHTML, chaque balise ouverte doit être fermée. Comme ça:
<p>Chaque onglet ouvert doit être fermé. </p> <b>Le HTML peut accepter les balises non fermées, mais pas le XHTML. </b>
Cette règle peut éviter la confusion et les problèmes HTML. Par exemple : si vous ne fermez pas la balise d'image, vous pouvez rencontrer des problèmes d'affichage CSS dans certains navigateurs. Utilisez cette méthode pour vous assurer que la page apparaît telle que vous l'avez conçue. Il est à noter que les balises vides doivent également être fermées. Utilisez une barre oblique / à la fin de la balise pour se fermer. Par exemple:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
Après avoir été traitée selon les sept règles ci-dessus, la page répond essentiellement aux exigences de XHTML1.0. Mais il reste encore à vérifier s’il répond réellement aux normes. Nous pouvons utiliser le W3C pour fournir des services de validation gratuits (http://validator.w3.org/). Corrigez les erreurs une par une après les avoir découvertes. Dans la liste de ressources suivante, nous fournissons également d'autres services de vérification et URL qui fournissent des conseils sur la vérification, qui peuvent être utilisés en complément de la vérification du W3C. Lorsque vous réussissez enfin la validation XHTML, félicitations, vous avez fait un grand pas vers les standards des sites Web. Ce n'est pas aussi difficile que vous le pensez !
2. Amélioration intermédiaire
Notre prochaine amélioration réside principalement dans la séparation de la structure et des performances. Cette étape n'est pas aussi facile à réaliser que la première étape. Nous avons besoin d'un changement de concept, ainsi que de l'apprentissage et de l'application de la technologie CSS2. Mais apprendre quelque chose de nouveau prend du temps, n'est-ce pas ? L’astuce est d’apprendre en faisant. Si vous avez toujours utilisé la disposition des tableaux et n'avez jamais utilisé CSS, vous n'avez pas besoin de vous précipiter pour dire adieu à la disposition des tableaux. Vous pouvez d'abord remplacer la balise font par une feuille de style. Au fur et à mesure que vous en apprenez davantage, vous pouvez en faire plus. Bon, regardons ce que nous devons faire :
Définir l'apparence des éléments avec CSS
Nous avons développé une habitude lors de l'écriture de logos. Lorsque nous voulons que la police soit plus grande, nous utilisons <h1>, et lorsque nous voulons ajouter un symbole de point devant, nous utilisons <li>. Nous considérons toujours <h1> comme étant grand, <li> comme des points et <b> comme du « texte en gras ». En fait, <h1> peut devenir tout ce que vous voulez. Grâce au CSS, <h1> peut devenir une petite police, le texte <p> peut devenir énorme et gras, et <li> peut devenir une image, etc. Nous ne pouvons pas forcer les éléments structurels à obtenir une présentation, nous devons utiliser CSS pour déterminer l'apparence de ces éléments. Par exemple, nous pouvons donner aux en-têtes de niveau 6 par défaut d'origine la même taille :
h1, h2, h3, h4, h5, h6{ famille de polices : 宋体, serif ;
Remplacez les déchets inutiles par des éléments structurés
Beaucoup de gens n’ont peut-être jamais su que les éléments HTML et XHTML étaient conçus pour exprimer une structure. Beaucoup d’entre nous se sont habitués à utiliser des éléments pour contrôler la présentation plutôt que la structure. Par exemple, une liste pourrait être marquée comme ceci :
Phrase 1<br /> Phrase 2<br /> Phrase 3<br />
Il vaudrait mieux utiliser une liste non ordonnée :
<ul> <li>Phrase 1</li> <li>Phrase 2</li> <li>Phrase 3</li> </ul>
Vous pourriez dire : « Mais <li> affiche un point et je ne souhaite pas utiliser de point. » En fait, CSS ne précise pas à quoi ressemble un élément. Vous pouvez désactiver les points en utilisant CSS.
Ajouter un identifiant à chaque table et formulaire
Donnez un tableau ou formez un balisage structurel unique, par ex.
<identifiant de table=menu>
Ensuite, lors de la rédaction de la feuille de style, vous pouvez créer un sélecteur de « menu » et l'associer à une règle CSS qui indique aux cellules du tableau, aux étiquettes de texte et à tous les autres éléments comment s'afficher. De cette manière, il n'est pas nécessaire d'attacher des attributs de couche de présentation redondants et gourmands en bande passante, tels que la hauteur, la largeur, l'alignement et la couleur d'arrière-plan, à chaque balise <td>. Avec juste une balise attachée (la balise id qui balise « menu »), vous pouvez effectuer un traitement de présentation ad hoc pour un balisage de code propre et compact dans une feuille de style distincte.
Pour les améliorations intermédiaires, nous énumérerons ici d'abord les trois points principaux, mais il contient beaucoup de contenu et de points de connaissances, que nous devons apprendre et maîtriser étape par étape jusqu'à ce que nous obtenions enfin la mise en page en utilisant complètement CSS sans utiliser de tableaux.