Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour la mise en page Web
Avant-propos
Bonjour à tous ! Cette série d'articles est écrite selon le propre processus d'Ajie de création du site Web w3cn.org. Ajie n’a jamais produit de site Web réellement conforme aux normes du Web auparavant. Maintenant, je fais référence à des documents étrangers et j'enregistre mes pensées et mes expériences dans le processus, j'espère que cela sera utile à tout le monde. Bon, commençons.
Le premier jour
Commencer à créer un site aux normes La première chose à faire est de déclarer un DOCTYPE qui répond à vos besoins.
Regardez le code original de la page d'accueil de ce site, vous pouvez voir que la première ligne est :
Ouvrez certains sites répondant aux standards, comme le célèbre logiciel de conception web développeur Macromedia et le site Web du maître du design personnel Zeldman, vous trouverez le même code. Le code des autres sites conformes aux standards (tels que k10k.net) est le suivant :
Alors, que signifient ces codes ? Est-ce qu'il faut le placer ?
Qu'est-ce que DOCTYPE
Nous appelons le code ci-dessus une instruction DOCTYPE. DOCTYPE est l'abréviation de type de document et est utilisée pour indiquer la version de XHTML ou HTML que vous utilisez.
La DTD (telle que xhtml1-transitional.dtd dans l'exemple ci-dessus) est appelée la définition du type de document, qui contient les règles du document. Le navigateur interprétera l'identité de votre page en fonction de la DTD que vous avez utilisée. défini et affichez-le.
Pour créer des pages Web conformes aux standards, la déclaration DOCTYPE est un composant essentiel et critique ; à moins que votre XHTML ne détermine un DOCTYPE correct, ni votre logo ni votre CSS ne prendront effet.
XHTML 1.0 propose trois déclarations DTD au choix :
Transitionnelle : Une DTD aux exigences très souples, qui permet de continuer à utiliser la marque HTML4.01 (mais doit se conformer à l'écriture xhtml méthode). Le code complet est le suivant :
Strict : pour une DTD stricte, vous ne pouvez pas utiliser d'identifiants et d'attributs de couche de présentation, tels que
. Le code complet est le suivant :
Frameset : Une DTD spécialement conçue pour les pages de cadre. Si votre page contient un cadre, vous devez utiliser cette DTD. Le code complet est le suivant :
Quel DOCTYPE choisissons-nous
La situation idéale est bien sûr une DTD stricte, mais pour la plupart d'entre nous, les concepteurs qui débutent dans le Web standards, Transitional DTD (XHTML 1.0 Transitional) est actuellement le choix idéal (y compris ce site, qui utilise également la DTD transitionnelle). Étant donné que cette DTD nous permet également d'utiliser des identifiants, des éléments et des attributs de la couche de présentation, il est également plus facile de passer la vérification du code W3C.
Remarque : les "identification et attributs de la couche de présentation" mentionnés ci-dessus font référence aux balises qui sont uniquement utilisées pour contrôler les performances, telles que les tableaux de composition, l'identification des couleurs d'arrière-plan, etc. En XHTML, les balises sont utilisées pour représenter des structures, et non pour réaliser une présentation. Le but de notre transition est de séparer à terme les données et la présentation.
Par exemple : un mannequin change de vêtements. Les modèles sont comme des données et les vêtements sont des expressions. Les modèles et les vêtements sont séparés, vous pouvez donc changer de vêtements à volonté. Dans le HTML4 original, les données et la présentation étaient mélangées, et il était très difficile de modifier la forme de la présentation en même temps. Haha, c'est un peu abstrait. Ce concept doit être compris progressivement au cours du processus de candidature.
Supplémentaire
La déclaration DOCTYPE doit être placée en haut de chaque document XHTML, avant tout le code et le balisage.
Pour plus de détails, veuillez visiter le site Web du W3C
Une fois le DOCTYPE déclaré, le code suivant est :
Habituellement, notre code HTML4.0 est simplement , qu'est-ce que "xmlns" ici ?
Ce "xmlns" est l'abréviation de l'espace de noms XHTML, appelé déclaration "namespace". Quel est le rôle de l’espace de noms ? La propre compréhension d'Ajie est la suivante :
Puisque XML vous permet de définir votre propre logo, le logo que vous définissez peut être le même que le logo défini par d'autres, mais avoir des significations différentes. Des erreurs peuvent facilement se produire lorsque des fichiers sont échangés ou partagés. Pour éviter cette erreur, XML utilise des déclarations d'espace de noms, qui permettent d'identifier votre identité grâce à une URL pointant vers elle. Par exemple :
Xiao Wang et Xiao Li définissent un identifiant
Une explication plus populaire est la suivante : un espace de noms consiste à marquer un document pour indiquer aux autres à qui appartient ce document. C'est juste que ce "qui" est remplacé par une URL.
XHTML est un langage de balisage qui passe du HTML au XML. Il doit se conformer aux règles des documents XML, il doit donc également définir un espace de noms. Et comme XHTML1.0 ne peut pas personnaliser le logo, son espace de noms est le même, à savoir "http://www.w3.org/1999/xhtml". Peu importe si vous ne le comprenez pas encore très bien, à ce stade, il nous suffit de copier le code. Le lang="gb2312" après
précise que votre document doit être en chinois simplifié.
La troisième étape consiste à définir votre encodage de la langue, quelque chose comme ceci :
Afin d'être correctement interprétés par les navigateurs et de passer la vérification du code W3C, tous les documents XHTML doivent déclarer le langage d'encodage qu'ils utilisent. utilisez généralement gb2312 (chinois simplifié) Lors de la création de pages multilingues, nous pouvons également utiliser Unicode, ISO-8859-1, etc., qui peuvent être définis en fonction de vos besoins.
Habituellement, cette définition est suffisante. Cependant, il convient d'ajouter que les documents XML ne définissent pas le codage du langage de cette manière. XML est défini comme suit :
Vous pouvez voir des déclarations similaires dans la première ligne de code sur la page d'accueil de Macromedia.com. C'est également la méthode de définition recommandée par le W3C. Alors pourquoi ne pas adopter cette approche ? La raison en est que certains navigateurs n'ont pas une prise en charge complète des normes et ne peuvent pas comprendre correctement ces méthodes de définition, telles que IE6/windows. Par conséquent, dans le cadre du plan de transition actuel, nous recommandons toujours d’utiliser la méthode méta. Bien sûr, vous pouvez écrire dans les deux sens.
En regardant le code source de ce site Web, vous constaterez qu'il y a une phrase supplémentaire où le codage de la langue est défini :
Ceci est écrit pour les anciens navigateurs afin de garantir que les différents navigateurs peuvent interpréter correctement la page.
Remarque : à la fin de l'instruction de déclaration ci-dessus, vous voyez une barre oblique "/", qui est différente de notre précédente écriture de code HTML4.0. La raison en est que les règles de syntaxe XHTML exigent que toutes les balises aient un début et une fin. Par exemple,
et
, etc. Pour les identifiants non appariés, il est nécessaire d'ajouter un espace à la fin de l'identifiant, suivi d'un "/ ". Par exemple, Utiliser les standards du Web pour concevoir des sites Web. La méthode de transition consiste principalement à utiliser les feuilles de style XHTML+CSS. Cela nécessite que tous les concepteurs de sites Web maîtrisent CSS. Si vous ne l'avez jamais utilisé auparavant, commencez à apprendre dès maintenant. Pour créer un site Web conforme aux standards du Web, vous ne pouvez pas concevoir de belles pages sans connaître CSS.
En fait, tous les aspects de la performance doivent être implémentés avec CSS. Nous avions l'habitude d'utiliser table pour le positionnement et la disposition, mais maintenant nous devons utiliser p pour le positionnement et la disposition. Il s’agit d’un changement de façon de penser, qui est un peu inconfortable au début. Haha, tout changement suscitera des résistances. Afin de profiter des « avantages » apportés par les normes, il vaut la peine d'abandonner certaines vieilles pratiques traditionnelles.
Appel de feuilles de style en externe
Dans le passé, nous utilisions généralement les feuilles de style de deux manières :
Méthode en ligne sur la page : c'est-à-dire, insertion de la feuille de style Écrivez directement dans la zone d'en-tête du code de la page. Similaire à ceci : : Écrivez la feuille de style dans un fichier .css séparé, puis appelez-la avec un code similaire au suivant dans la zone d'en-tête de la page.
Dans une conception conforme au web standards , nous utilisons la méthode d'appel externe, et les avantages sont évidents. Vous pouvez changer le style de la page sans modifier la page, en modifiant uniquement le fichier .css. Si toutes les pages appellent le même fichier de feuille de style, la modification d'un fichier de feuille de style peut modifier les styles de tous les fichiers.
Méthode double table pour appeler la feuille de style
Regardez le code original de certains sites conformes aux normes. Vous verrez peut-être qu'il y a les 2 phrases suivantes où. la feuille de style s'appelle :
;style type="text /css" media="all">@import url( css/style01.css );
Pourquoi devez-vous l'écrire deux fois ?
En fait, dans des circonstances normales, il suffit d'utiliser la méthode du lien externe (c'est-à-dire la première phrase). L'appel à double table que j'utilise ici n'est qu'un exemple. La commande "@import" permet de saisir la feuille de style. La commande "@import" n'est pas valide dans les navigateurs Netscape 4.0. En d'autres termes, lorsque vous souhaitez que certains effets soient masqués dans le navigateur Netscape 4.0 et affichés dans la version 4.0 ou supérieure ou dans d'autres navigateurs, vous pouvez utiliser la méthode de commande "@import" pour appeler la feuille de style.
Jour 5 : Autres paramètres dans la zone de tête
Icône Favoris
Si vous ajoutez ce site à vos favoris, vous pouvez voir que l'icône IE avant l'URL des favoris devient une icône spéciale pour ce site. Pour obtenir cet effet, c'est très simple, créez d'abord une icône 16x16, nommez-la favicon.ico et placez-la dans le répertoire racine. Intégrez ensuite le code suivant dans la zone d'en-tête :
< ;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Contenu pour les moteurs de recherche
Le code est le suivant, remplacez-le simplement par le contenu de votre propre site :
Autoriser les robots de recherche à rechercher tous les liens du site. Si vous souhaitez que certaines pages ne soient pas recherchées, il est recommandé d'utiliser la méthode robots.txt
Définir les informations sur l'auteur du site
< meta name="author" content="ajie@netease.com, ajie" />
Définir les informations de droits d'auteur du site
Une brève introduction au site (recommandé)
Mots clés du site (recommandé)
Permettez-moi de vous présenter ceci en premier. Explication supplémentaire, les 5 sections précédentes concernaient toutes le code de la zone d'en-tête, et le contenu réel de la page n'a pas été mentionné du tout Haha, ne vous inquiétez pas, en fait, la zone d'en-tête est très importante. designer en regardant le code d'en-tête d'une page. Est-ce assez professionnel ?
Avant de commencer la production formelle de contenu, nous devons d'abord comprendre les spécifications du code des standards du Web. Comprendre ces spécifications peut vous aider à éviter les détours et à vérifier le code d'accès dès que possible.
1. Toutes les balises doivent avoir une balise de fermeture correspondante
Dans le passé, en HTML, vous pouviez ouvrir de nombreuses balises, telles que
li> au lieu d'écrire nécessairement les champs
et Mais ce n'est pas légal en XHTML. XHTML nécessite une structure stricte et toutes les balises doivent être fermées. S'il s'agit d'une balise distincte non appariée, ajoutez un "/" à la fin de la balise pour la fermer. Par exemple :/b> doit être modifié en :
/p> c'est-à-dire que l'imbrication couche par couche doit être strictement symétrique. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
4. Tous les attributs doivent être mis entre guillemets ""
En HTML, vous n'avez pas besoin de mettre des guillemets autour des valeurs d'attribut, mais en XHTML, ils Doit être cité. Par exemple :
Dans des cas particuliers, vous devez utiliser des guillemets doubles dans la valeur de l'attribut, vous pouvez utiliser " , les guillemets simples peuvent utiliser ', par exemple :
5. Utilisez l'encodage pour représenter tous les symboles < et & spéciaux
Tout signe inférieur à (<), qui ne fait pas partie de la balise, doit être codé comme & l t; Tout signe supérieur à (>), qui ne fait pas partie de la balise, doit être codé comme >
Toute esperluette (&) qui ne fait pas partie d'une entité doit être codée comme & a m p;
Remarque : il n'y a pas d'espace entre ce qui précède. caractères. >6. Attribuez une valeur à tous les attributs
XHTML stipule que tous les attributs doivent avoir une valeur, et s'il n'y a pas de valeur, il se répétera. > < input type="checkbox" name="shirt" value="medium" coché> doit être modifié en : ="shirt" value="medium" vérifié="checked">
7. N'utilisez pas "--" dans le contenu du commentaire
"-- " ne peut apparaître qu'au début et à la fin de la fin des commentaires XHTML, c'est-à-dire qu'ils ne sont plus valides dans le contenu. Par exemple, le code suivant n'est pas valide :
Remplacez les lignes pointillées internes par des signes égaux ou des espaces Articles Liés
Voir plus