Comment améliorer votre site Web existant_CSS/HTML

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, comme Dreamweaver MX 2004, qui est actuellement l'outil le plus complet prenant en charge les standards CSS.

1． Améliorations principales
Ajoutez le DOCTYPE correct à 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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Strict

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Frameset

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Pour notre amélioration principale, nous avons seulement besoin d'utiliser une déclaration 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 et copier et coller le même code dans la zone de tête.

Définissez un espace de noms (Namespace)
Ajoutez le code suivant directement après la déclaration DOCTYPE :


Un espace de noms est une collection détaillée de types d'éléments et de noms d'attributs DTD , la déclaration d'espace de noms vous permet d'identifier votre espace de noms en pointant vers une adresse en ligne. Entrez simplement le code comme d'habitude.

Déclarez votre langage d'encodage
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 d'encodage qu'ils utilisent. Le code est le suivant :


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 balises 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 :

La façon correcte de l'écrire est :

De même,

est remplacé par

, est remplacé par , etc. Cette étape de conversion est simple.
Ajouter un attribut alt aux images
Ajouter un 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 :


Écriture correcte :


Donner 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 : style="max-width:90%", et non height=100.

Fermer toutes les balises
En XHTML, chaque balise ouverte doit être fermée. Comme ceci :

Chaque onglet ouvert doit être fermé.

HTML peut accepter les balises non fermées, mais pas XHTML.
Cette règle peut éviter la confusion et les problèmes du 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 convient de noter que les balises vides doivent également être fermées. Utilisez une barre oblique "/" à la fin de la balise pour se fermer. Par exemple :



Après avoir été traitée selon les sept règles ci-dessus, la page sera fondamentalement conforme 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
La prochaine amélioration que nous apporterons concerne principalement 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 CSS2. technologie. 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 :

Utiliser CSS pour définir l'apparence des éléments
Nous avons développé une habitude lors de l'écriture des logos. Lorsque nous voulons que la police soit plus grande, nous l'utilisons.

, en espérant qu'il soit devant. Pour ajouter un symbole de point, utilisez

. Nous pensons toujours à signifiant grand,

signifiant point et signifiant « texte en gras ». En fait,

peut être transformé en tout ce que vous voulez. Grâce au CSS,

peut être transformé en une petite police, le texte

peut être transformé en un texte énorme et gras, et

peut être transformé en Une photo et ainsi de suite. 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 titres d'origine par défaut à 6 niveaux la même taille :

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; }
Remplacez les déchets dénués de sens par des éléments structurés
Beaucoup de gens ne sauront peut-être jamais que les éléments HTML et XHTML sont 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, le contenu d'une liste peut utiliser les balises suivantes :

Phrase un
Phrase deux
Phrase trois

Il serait préférable d'utiliser plutôt une liste non ordonnée :

• Phrase 1
• Phrase 2
• Phrase 3

Vous pouvez dire "Mais

montre un point, je je ne veux 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.

Ajoutez un identifiant à chaque table et formulaire
Donnez au tableau ou au formulaire une balise structurelle unique, telle que


Ensuite, dans le style d'écriture Lors de la création un tableau, 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 façon, 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, la couleur d'arrière-plan, etc. à chaque balise %lt;td>. Avec juste une balise attachée (la balise id de la 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.

Amélioration intermédiaire Nous allons d'abord énumérer ici 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 n'importe quel tableau.