La mise en page Web CSS peut également être considérée comme un travail systématique. Le développement du site Web DIVCSS peut être réalisé par plusieurs personnes en collaboration et par une équipe. Cela implique de nombreux problèmes de fonctionnement normatif. Des connaissances sont nécessaires. Organisé et standardisé, il s'agit d'un article réimprimé de Blue, qui est très efficace. L'auteur a résumé beaucoup d'expériences pratiques, et chacun peut s'y référer et en tirer des leçons.
Présentation
Cette spécification est à la fois une spécification de développement et une référence de langage de script. Cette spécification n'est pas une disposition immuable qui doit être strictement respectée. Elle doit être utilisée de manière flexible et certaines modifications doivent être apportées dans des circonstances particulières. Cependant, veuillez ne pas modifier les spécifications à volonté. Si vous avez des questions, veuillez me contacter à temps et je modifierai rapidement les exemples de code et les documents pertinents de cette spécification.
Exigences de base
1. Ouvrez trois sous-répertoires d'images common temp dans le répertoire racine du site Web et ouvrez un sous-répertoire multimédia si nécessaire. Le répertoire images contient des images publiques utilisées par les pages dans différentes colonnes, telles que les logos de l'entreprise, les bannières et les images. menus. , boutons, etc. ; le sous-répertoire commun contient des fichiers publics tels que css, js, php, include, etc. ; le sous-répertoire temp contient divers textes, images et autres documents originaux fournis par les clients ; avi, quick time, etc. Fichiers multimédia.
2. En principe, un répertoire doit être ouvert pour chaque colonne du répertoire racine en fonction de la structure des colonnes de la page d'accueil. Si nécessaire, un sous-répertoire d'images et de médias doit être ouvert dans le répertoire de chaque colonne pour placer les images et les médias. exclusif à cette colonne. Pour les fichiers multimédias, si cette colonne a beaucoup de contenu et est divisée en plusieurs colonnes subordonnées, d'autres répertoires peuvent être ouverts en conséquence.
3. Il y a souvent de nombreux fichiers dans le répertoire temporaire. Il est recommandé d'ouvrir un répertoire avec le nom de l'heure pour classer et organiser les informations fournies par les clients les unes après les autres.
4. Sauf circonstances particulières, les noms des répertoires et des fichiers doivent tous utiliser une combinaison de lettres anglaises minuscules, de chiffres et de traits de soulignement, d'espaces et de caractères spéciaux. Veuillez utiliser l'anglais comme guide lors de la dénomination. n'utilisez le pinyin que si cela est absolument nécessaire. En tant que nom de répertoire, l'expérience a prouvé que les répertoires nommés avec du pinyin vous sont souvent incompréhensibles un mois plus tard.
Lors de l'écriture de scripts
,nous devons avoir une idée cohérente du style général du script. ce qui signifie que vous l'avez écrit un mois plus tard et il y a un mois. Le style de script reste cohérent, ainsi que le style de script écrit par différents développeurs dans le même groupe de travail, car nous ne pouvons pas développer éternellement de manière isolée et vous pouvez toujours travailler. avec vous-même il y a trois mois (votre client a demandé une révision), vous devez souvent co-développer un projet avec différents collègues du studio, et il peut vous être demandé de modifier des scripts développés par des personnes démissionnaires. Bien sûr, vous pouvez aussi vous demander. laisser un projet à des collègues ultérieurs.
1. Modèle universel pour les fichiers HTML :
div css xhtml xml Exemple de code source Exemple de code source [www.52css.com]
<html>
<!–
Générateur : Sub Design Studio ( www.eastline.net.cn )
Données de création : 2000-8-1
Auteur original: ligne est
->
<tête>
<title>Titre du document</title>
<méta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
Autres balises méta
div css xhtml xml Exemple de code source Exemple de code source [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
Client de définition de feuille de style Définition de fonction Javascript et opération d'initialisation
div css xhtml xml Exemple de code source Exemple de code source [www.52css com. ]
</tête>
<body bgcolor="#ffffff">
… …
</body>
Ajouté :
Afin de garantir que le site Web est compatible avec la prochaine génération de normes XML de langage Web, tous les attributs des balises HTML doivent être placés entre guillemets simples ou doubles, c'est-à-dire que nous devons écrire <a href="url"> au lieu de < a href=url >.
2. Pour les pages qui permettent la récupération de texte intégral, afin de permettre une récupération efficace par les moteurs de recherche sur Internet, les balises méta Keywords et Description doivent être ajoutées entre le <head></head> du code HTML. sur la page d'accueil de la chaîne, par exemple :
div css xhtml xml Exemple de code source Exemple de code source [www.52css.com]
<meta name=”keywords” content=”Oriental Shinkansen, voitures, acheter des voitures”/>
<meta name="description" content="Oriental New Kanjin Line, le premier arrêt au monde pour les informations sur les voitures chinoises"/>
3. Exemple de code au format de fichier CSS :
div css xhtml xml Exemple de code source Exemple de code source [www.52css com. ]
<style type="text/css">
<!—
p { retrait de texte : 2em ;
corps { famille de polices : "宋体" ; taille de police : 9 pt ; couleur : #000000 ; marge-droite : 0px marge-bas : 0px ;
table { famille de polices : "宋体" ; taille de police : 9 pt ; hauteur de ligne : 20 px ; couleur : #000000}
a:lien { taille de police : 9 pt ; couleur : #FFFFFF ; décoration de texte : aucune}
a: visité { taille de police : 9 pt ; couleur : #99FFFF ; décoration de texte : aucune}
a:hover { taille de police : 9 pt ; couleur : #FF9900 ; décoration de texte : aucune}
a:active { taille de police : 9 pt ; couleur : #FF9900 ; décoration de texte : aucune}
a.1 : lien { taille de police : 9 pt ; couleur : #3366cc ; décoration de texte : aucune}
a.1 : visité { taille de police : 9 pt ; couleur : #3366cc ; décoration de texte : aucune}
a.1 : survol { taille de police : 9 pt ; couleur : #FF9900 ; décoration de texte : aucune}
a.1 : actif { taille de police : 9 pt ; couleur : #FF9922 ; décoration de texte : aucune}
.blue { font-family : "宋体" ; taille de police : 10,5 pt ; hauteur de ligne : 20 px ; couleur : #0099FF ;
->
</style>
Ce qu'il convient de noter ici, c'est que l'ordre de a:link a:visited a:hover a:actived doit être strictement conforme à l'exemple de code ci-dessus, sinon plus ou moins de problèmes surviendront. De plus, nous stipulons que la redéfinition vient en premier, les pseudo-classes en second et la personnalisation en dernier, ce qui facilite la lecture pour vous-même et pour les autres !
Afin de garantir que la taille de la police est cohérente sur les différents navigateurs, il est recommandé de définir la taille de la police en points pt et pixels. px utilise généralement 9 pt et 11 pt dans la dynastie des Song chinois, et px utilise généralement 12 px et 14,7 px en chinois. Songti Il s'agit d'une taille de police optimisée, en gras ou en gras. Lors de la mise en gras des polices Song, les tailles de police de 11 pt et 14,7 px sont généralement plus appropriées.
Lors de l'écriture de <table> pour s'imbriquer, suivez strictement la norme. Pour un seul <table>, <table><tr> doit être aligné, <td> doit être indenté de deux espaces demi-largeur, et s'il y en a. other Pour les tableaux imbriqués, <table> est également indenté de deux espaces demi-largeur. S'il n'y a pas de tableau imbriqué dans <td>, la balise fermante de </td> doit être sur la même ligne que <td>, sans ligne. Comme
nous le notons dans Il ne devrait pas y avoir de code de ce type dans le code source :
div css xhtml xml Exemple de code source Exemple de code source [www.52css.com]
<td><img src=”../images/sample.gif”>
</td>
Cela devrait ressembler à ceci :
div css xhtml xml Exemple de code source Exemple de code source [www.52css.com]
<td><img src="../images/sample.gif"></td>
C'est parce que le navigateur pense qu'une nouvelle ligne équivaut à un espace demi-largeur. La méthode d'écriture irrégulière ci-dessus équivaut à un ajout involontaire. un espace demi-largeur. S'il est effectivement nécessaire d'ajouter un espace demi-largeur, il doit être écrit ainsi :
div css xhtml xml Exemple de code source Exemple de code source [www.52css.com]
<td><img src="../images/sample.gif”> </td>
<table> appartenant au même niveau doit être aligné à gauche et les cellules vides sans aucun contenu ne sont pas autorisées à exister. une hauteur supérieure ou égale à 12px doit être écrite entre <td> et </td> Si la hauteur est inférieure à 12px, un gif transparent de taille 1*1 doit être inséré entre <td> et </td> Image, en effet, certains navigateurs considèrent les cellules vides comme illégales et ne les interpréteront pas. Si l'ordre du code est chaotique, vous pouvez le réorganiser via commande->appliquer le formatage source dans DW3 !
5. Il existe également des normes unifiées sur la façon d'écrire la largeur et la hauteur. Généralement, pour les tableaux avec une seule colonne, la largeur est écrite dans la balise <table> ; pour les tableaux avec une seule ligne, la hauteur est écrite dans la balise <table>. ; pour les tableaux comportant plusieurs lignes et plusieurs colonnes. Le tableau, la largeur et la hauteur sont écrits dans la balise <td> de la première ligne ou colonne. En bref, suivez un principe : il ne doit pas y avoir plus d'une hauteur et d'une largeur qui contrôlent la taille de la même cellule. Assurez-vous que toutes les largeurs et hauteurs sont valides, c'est-à-dire si vous modifiez la valeur d'une largeur et d'une hauteur dans le champ. code, il devrait être dans Les modifications sont visibles dans le navigateur. Ce n’est pas facile à faire, cela demande beaucoup de temps de pratique et de réflexion.
Principes généraux
1. Avant d'organiser les tableaux, réfléchissez bien à la meilleure solution. Essayez de contrôler l'imbrication des tableaux sur trois niveaux et essayez d'éviter les deux balises <colspan> et <rowspan>. L'expérience montre que ces deux marques peuvent provoquer. beaucoup de problèmes.
2. Une page Web doit essayer d'éviter d'utiliser un grand tableau entier. Tout le contenu est imbriqué dans ce grand tableau, car lorsque le navigateur interprète les éléments de la page, il les affiche un par un en unités de tableaux si une page Web est intégrée. S'il est placé dans un grand tableau, la conséquence probable est que lorsque le visiteur tape l'URL, il sera d'abord confronté à un espace vide pendant une longue période, puis tout le contenu Web apparaîtra en même temps. Si vous devez le faire, utilisez la balise <tbody> pour que le grand tableau puisse être affiché en morceaux.
3. Lors de la composition, nous rencontrons souvent le besoin de mettre en retrait la première ligne. N'utilisez pas d'espaces sur toute la largeur pour obtenir l'effet. L'approche standard consiste à définir p { text-indent: 2em; ajoutez chaque balise <p> de paragraphe, veuillez noter que dans des circonstances normales, veuillez ne pas omettre la balise de fermeture </p>.
4. En principe, nous interdisons d'utiliser <img width=? height=?> pour interférer artificiellement avec la taille de l'affichage de l'image, et il est recommandé de ne pas inclure les attributs width et height dans la balise <img>. pendant le processus de production, l'image nécessite souvent des modifications répétées, ce qui peut éviter une intervention humaine dans la taille de l'affichage de l'image et maximiser les fonctions propres du navigateur, cependant, un effet secondaire est que lorsque la page Web n'a pas chargé l'image ; , la taille du site de l'image ne sera pas réservée. Cela peut provoquer une instabilité de la page Web lors du chargement (si l'image est insérée dans un tableau de taille fixe, ce phénomène ne se produira pas), surtout lorsque la taille de l'image est grande. grand, ce phénomène sera évident, donc lorsque vous vous y attendez, lorsque cette situation se produit et entraînera évidemment un jitter de la page Web, assurez-vous d'attacher les attributs width et height à <img> à la fin.
5. Afin de maximiser la fonction de composition automatique du navigateur, essayez de ne pas utiliser <br> pour intervenir manuellement dans la segmentation d'un texte complet.
6. Il doit y avoir un espace d'une demi-largeur entre les mots dans différentes langues, sauf avant le symbole d'en-tête et après le symbole de queue. La ponctuation entre les caractères chinois doit être une ponctuation sur toute la largeur, et les parenthèses autour des lettres et des chiffres anglais doivent être en demi-largeur. -parenthèses de largeur.
7. Toutes les tailles de police doivent être implémentées à l'aide de feuilles de style et il est interdit aux balises <font size=?> d'apparaître sur la page.
8. Veuillez ne pas avoir plus d'un espace consécutif dans la page Web et utiliser le moins possible les espaces pleine largeur (avec le jeu de caractères anglais, les espaces pleine largeur deviendront des caractères tronqués). Utilisez l'indentation, le remplissage et la marge du texte. , hspace, vspace et transparence pour les images gif d'espace blanc à réaliser.
9. Lorsque nous mélangeons le chinois et l'anglais, nous faisons de notre mieux pour définir l'anglais et les chiffres comme des polices verdana et arial.
10. Il est recommandé d'utiliser un pourcentage pour définir l'espacement des lignes. Les deux valeurs d'espacement des lignes couramment utilisées sont la hauteur de ligne : 120 %/150 %.
11. Tous les chemins du site Web utilisent des chemins relatifs et renvoient généralement au site Web. fichier par défaut dans un certain répertoire. Le chemin du lien ne doit pas nécessairement être le nom complet. Par exemple, nous n'avons pas besoin de faire ceci : <a href="aboutus/index.htm"> mais devrait être comme ceci : <a. href="aboutus/">
12. Il est recommandé d'utiliser des polices plus grandes lors de l'intégration de texte graphique. N'incluez pas de texte dans les graphiques.
13. La « taille de la page Web » est définie comme la somme des tailles de fichier de toutes les pages Web, y compris les fichiers HTML et tous les objets intégrés. Les utilisateurs préfèrent les sites rapides plutôt que nouveaux. Pour les utilisateurs de modem, il convient de maintenir la taille de la page en dessous de 34 Ko.
Principes de dénomination des fichiers
1. Chaque répertoire doit contenir un fichier HTML par défaut et le nom du fichier doit être index.htm
2. Les noms de fichiers doivent être une combinaison de lettres anglaises minuscules, de chiffres et de traits de soulignement.
3. L'idéologie directrice du principe de dénomination est de permettre à vous-même et à chaque membre du groupe de travail de comprendre facilement la signification de chaque fichier. La seconde est que lorsque nous utilisons la commande « trier par nom » dans un dossier, le même grand. les catégories de fichiers peuvent être organisées ensemble afin que nous puissions rechercher, modifier, remplacer, calculer la charge, etc.
4. Ce qui suit utilise la colonne « Actualités » (y compris « Actualités nationales » et « Actualités internationales ») pour expliquer le principe de dénomination des fichiers html :
☆ Créez un répertoire d'actualités dans le répertoire racine ☆ Le premier élément d'actualité par défaut est nommé index.htm
☆ Toutes les actualités appartenant aux « actualités nationales » sont nommées dans l'ordre : china_1.htm, china_2.htm, …
☆ Toutes les actualités appartenant à "International News" sont nommées dans l'ordre : internation_1.htm, internation_2.htm, …
☆ Si le nombre de fichiers est composé de deux chiffres, veuillez nommer les neuf premiers fichiers : china_01.htm, china_02.htm pour vous assurer que tous les fichiers peuvent être triés correctement dans le dossier.
5. Les principes de dénomination des images suivent les normes suivantes :
☆ Le nom est divisé en deux parties, la première et la dernière parties, séparées par des traits de soulignement.
☆ La partie en-tête indique la nature générale de l'image, telle que la publicité, le logo, le menu, le bouton, etc.
☆ De manière générale :
On nomme les images rectangulaires telles que les publicités et les motifs décoratifs placés en haut de la page : bannière
Nous avons nommé l'image emblématique : logo
Nous nommons la petite image avec un lien qui n'est pas fixé sur le bouton de la page
Nous nommons les images de colonnes de liens qui apparaissent continuellement à une certaine position sur la page et ont la même nature : menu
Nous avons nommé la photo pour la décoration : pic
On nomme l'image sans lien pour indiquer le titre : titre
Suivez ce principe et ainsi de suite.
☆La partie queue est utilisée pour exprimer la signification spécifique de l'image.
☆ Voici quelques exemples. Vous devriez être capable de comprendre la signification des images en un coup d'œil :
div css xhtml xml Exemple de code source Exemple de code source [www.52css.com]
bannière_sohu.gif
bannière_sina.gif
menu_aboutus.gif
menu_job.gif
titre_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg