Planification d'un site Web
Vous devez d'abord planifier un site Web. Ce didacticiel prendra la figure suivante comme exemple pour créer un site Web.
la figure 1
est présentée ci-dessous :
La figure 2
se compose principalement de cinq parties :
1. Barre de navigation principale, avec effets de boutons.
Largeur : 760px Hauteur : 50px
2. En-tête L'icône d'en-tête du site Web contient le logo et le nom du site Web.
Largeur : 760px Hauteur : 150px
3. Contenu Le contenu principal du site Web.
Largeur : 480px Hauteur : Modifications en fonction du contenu
4. Bordure de la barre latérale, quelques informations supplémentaires.
Largeur : 280px Hauteur : Modifie en fonction
5. La colonne inférieure du site Web de pied de page contient des informations sur les droits d'auteur, etc.
Largeur : 760px Hauteur : 66px
1. Créez des modèles HTML et des répertoires de fichiers, etc.
Le code est le suivant :
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Enregistrez-le sous index.html et créez des dossiers css et images. La structure du site Web est la suivante :
Figure 3
2. Créez une grande boîte pour le site Web :
Créez une boîte de 760px de large qui contiendra tous les éléments du site Web.
Écrivez
Figure 4
Maintenant, pour centrer la boîte, écrivez margin: auto;, pour que le fichier css soit :
#page-conteneur {
largeur : 760 px ;
marge : auto ;
fond : rouge ;
}
Vous pouvez maintenant voir qu'il y a un espace de 8 px de large entre le haut de la boîte et le navigateur. Cela est dû au remplissage et aux bordures par défaut du navigateur. Pour éliminer cette lacune, vous devez écrire dans le fichier CSS :
html, corps {
marge : 0 ;
remplissage : 0 ;
}
Divisez le site Web en cinq divs
1. Mettez les cinq parties mentionnées dans « Étape 1 » dans des cases et écrivez dans le fichier html :
se comporte comme suit :
Figure 5
2. Afin de distinguer les cinq parties, nous marquons ces cinq parties avec des couleurs de fond différentes et écrivons dans le fichier CSS :
#main-nav {
fond : rouge ;
hauteur : 50px ;
}
#en-tête {
fond : bleu ;
hauteur : 150px ;
}
#sidebar-a {
fond : vert foncé ;
}
#contenu {
fond : vert ;
}
#pied de page {
fond : orange ;
hauteur : 66 px ;
}
Les performances sont les suivantes :
Figure 6
Disposition de la page Web et div flottant, etc.
1. Flottant : Tout d'abord, laissez la bordure flotter à droite du contenu principal. Utilisez CSS pour contrôler le flottement.
#sidebar-a {
flotteur : à droite ;
largeur : 280 px ;
fond : vert foncé ;
}
Les performances sont les suivantes :
Figure 7
2. Écrivez du texte dans la zone de contenu principale. Écrivez dans le fichier html :
Figure 8
Mais vous pouvez voir que la zone de contenu principale occupe toute la largeur du conteneur de page et que nous devons définir la bordure droite de #content sur 280 px. afin qu'il n'entre pas en conflit avec la frontière.
Le code CSS est le suivant :
#contenu {
marge droite : 280 px ;
fond : vert ;
}
En même temps, écrivez du texte dans la bordure. Écrivez dans le fichier html :
se comporte comme suit :
Figure 9
Ce n'est pas ce que nous souhaitons. Le cadre inférieur du site Web est passé en dessous de la bordure. En effet, nous faisons flotter la bordure vers la droite. Puisqu'elle flotte, on peut comprendre qu'elle se trouve sur un autre calque au-dessus de la boîte entière. Par conséquent, la zone inférieure et la zone de contenu sont alignées.
On écrit donc en CSS :
#pied de page {
clair : les deux ;
fond : orange ;
hauteur : 66 px ;
}
Les performances sont les suivantes :
Figure 10
La mise en page et la présentation de structures supplémentaires en dehors du cadre principal de la page Web. La présentation (Mise en page) de structures supplémentaires en dehors du cadre principal de la page Web, y compris les éléments suivants :
1. Barre de navigation principale ;
2. Titre, y compris le nom du site Web et le titre du contenu ;
3. Contenu ;
4. Informations de pied de page, y compris les droits d'auteur, la certification et la barre de sous-navigation (facultatif).
Lors de l'ajout de ces structures, afin de ne pas détruire le framework d'origine, il faut ajouter sous la balise "body" (TAG) du fichier css :
.caché {
affichage : aucun ;
}
".hidden" est la classe que nous avons ajoutée. Cette classe peut empêcher l'affichage de tout élément de la page appartenant à la classe masquée. Ceux-ci seront utilisés plus tard, alors oubliez ça pour le moment.
Maintenant, nous ajoutons le titre :
Revenons d'abord au code HTML,
Vient ensuite la barre de navigation :
Le code CSS qui contrôle les performances de la barre de navigation est relativement compliqué. Nous le présenterons en détail dans la neuvième ou la dixième étape. Ajoutez maintenant le code de navigation au fichier html :