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. Résumé 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 avec flexibilité 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, puis ouvrez un sous-répertoire media 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, les menus. et les 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 ; flash, avi, temps rapide, etc. 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 existe souvent de nombreux fichiers dans le répertoire temporaire. Il est recommandé d'ouvrir un répertoire nommé par 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. Comme nom de répertoire, l'expérience a prouvé que les répertoires nommés avec du pinyin sont souvent difficiles à comprendre, même un mois plus tard. Script Nous devons avoir une conception cohérente du style général du script, ce qui signifie que le style du script que vous avez écrit un mois plus tard est cohérent avec le style du script que vous avez écrit il y a un mois, et que le style du script écrit par différents développeurs dans le même groupe de travail sont cohérents, car nous ne pouvons pas développer éternellement de manière isolée, vous pouvez collaborer avec vous-même il y a trois mois à tout moment (votre client a besoin d'une révision), vous devez souvent développer un projet avec différents collègues du groupe de travail. studio, et il peut également vous être demandé de modifier les personnes qui ont démissionné. Les scripts développés, bien sûr, vous pouvez également confier 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] Autres balises méta div css xhtml xml Exemple de code source Exemple de code source [www.52css.com] La feuille de style définit la définition de la fonction Javascript côté client et l'opération d'initialisation div css xhtml xml Exemple de code source Exemple de code source [www.52css.com] Remplir: 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] 3. Exemple de code au format de fichier CSS : div css xhtml xml Exemple de code source Exemple de code source [www.52css.com] Ce qui nécessite une attention particulière 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. pauses. Comme nous le notons, 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] Au lieu de cela, cela devrait ressembler à ceci : div css xhtml xml Exemple de code source Exemple de code source [www.52css.com] En effet, le navigateur pense qu'une nouvelle ligne équivaut à un espace demi-largeur. La méthode d'écriture irrégulière ci-dessus équivaut à ajouter involontairement un espace demi-largeur. S'il est vraiment nécessaire d'ajouter un espace demi-largeur, cela devrait l'être. écrit ainsi : div css xhtml xml Exemple de code source Exemple de code source [www.52css.com] <table> appartenant au même niveau doit être aligné à gauche. De plus, les cellules vides sans aucun contenu ne sont pas autorisées. Les cellules d'une hauteur de 12 pixels ou plus doivent être écrites entre <td> et </td>. la hauteur est inférieure à 12px, une image gif transparente 1*1 doit être insérée entre <td> et </td> 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 de disposer le tableau, 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> <rowspan> L'expérience montre que ces deux marques A peuvent provoquer un problème. 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 la largeur et la hauteur dans la balise <img>. Deux attributs : au cours du processus de production, les images doivent souvent être modifiées à plusieurs reprises. Cela peut éviter une intervention humaine sur la taille de l'affichage de l'image et maximiser les fonctions propres du navigateur. Cependant, cela a un effet secondaire lorsque le Web. La page n'a pas chargé l'image. Lorsque l'image est ajoutée, la taille du site de l'image ne sera pas laissée de côté, ce qui peut entraîner un problème de page Web. Gigue pendant le 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, ce phénomène sera évident, donc quand on s'attend à ce que cela soit évident Quand Si la situation provoque l'instabilité de la page Web, assurez-vous d'attacher la largeur à <img> à la fin. et l'attribut de hauteur. 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é de définir l'espacement des lignes en pourcentage. 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. Généralement, le chemin du lien vers le fichier par défaut dans un certain répertoire n'a pas besoin d'être écrit dans le nom complet. Par exemple, nous n'avons pas besoin de faire ceci : <a href=. ”aboutus/index.htm”> mais devrait ressembler à ceci :<a href="aboutus/”> 12. Utilisez des polices plus grandes lors de l'intégration de texte dans des graphiques. Il est recommandé de ne pas inclure 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. Règles 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. Le nom du fichier doit utiliser 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 : 5. Les principes de dénomination des images suivent les normes suivantes : ☆La partie queue est utilisée pour exprimer la signification spécifique de l'image. ☆ Voici quelques exemples. Vous devriez pouvoir 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]
<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="auteur" content="eastline">
<link rel="stylesheet" type="text/css" href="style/style.css">
</tête>
<body bgcolor="#ffffff">
… …
</corps>
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 < un href=url >.
<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 l'information sur l'automobile chinoise"/>
<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>
<td><img src=”../images/sample.gif”>
</td>
<td><img src="../images/sample.gif"></td>
<td><img src=”../images/sample.gif”> </td>
☆ 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.
☆ 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.
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