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 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<tête>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Nom de l'entreprise - Nom de la page</title>
<meta http-equiv="Content-Language" content="en-us" />
<méta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</tête>
<corps>
</corps>
</html>
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 <div id="page-container"> entre <body> et </body> dans le fichier html
Bonjour le monde.
</div>
Créez un fichier CSS, nommez-le master.css et enregistrez-le dans le dossier /css/. Écrire:
#page-conteneur {
largeur : 760 px ;
fond : rouge ;
}
La largeur de la boîte dont l'identifiant est page-conteneur est contrôlée pour être HTML est de 760 pixels et l'arrière-plan est rouge. Les performances sont les suivantes.
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 :
<div id="page-conteneur">
<div id="main-nav">Navigation principale</div>
<div id="header">En-tête</div>
<div id="sidebar-a">Barre latérale A</div>
<div id="content">Contenu</div>
<div id="footer">Pied de page</div>
</div>
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 :
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec in sapien in nibh rutrum gravida. Sed ut mauris.
euismod vulputé. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede Nam augue lorem, sempre at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula.
</div>
Les performances sont les suivantes :
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 :
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec in sapien in nibh rutrum gravida. Sed ut mauris.
euismod vulputé. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede Nam augue lorem, sempre at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula.
</div>
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, <h1> à <h6> sont nos codes de titre HTML couramment utilisés. Par exemple, nous utilisons généralement le <h1>nom du site Web</h1>, le <h2>sous-titre du site Web</h2>, le <h3>titre principal du contenu</h3>, etc. Nous ajoutons ce qui suit à la couche d'en-tête (Div) du fichier html :
<div id="en-tête">
<h1>Éclairer les conceptions</h1>
</div>
Actualisez la page et vous pouvez voir le titre énorme et l'espace blanc autour du titre. Cela est dû à la taille et à la marge par défaut de la balise <h1>>. Pour éliminer ces espaces blancs, vous devez d'abord ajouter :
h1 {
marge : 0 ;
remplissage : 0 ;
}
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 :
<div id="main-nav">
<ul>
<li id="à propos"> <a href=" http://css.jorux.com/wp-admin/post.php #" > À propos</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Services</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portefeuille</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contactez-nous</a></li>
</ul>
</div>
(Remarque : le didacticiel original utilisait dl et dt, jorux utilise ici les balises ul et li les plus couramment utilisées)
À l'heure actuelle, les performances de la barre de navigation sont relativement médiocres, mais ses performances particulières seront introduites dans les prochains tutoriels, il est donc nécessaire de masquer temporairement la barre de navigation, j'ai donc ajouté :
<div id="main-nav">
<dl class="caché">
<dt id="à propos"> <a href=" http://css.jorux.com/wp-admin/post.php #" > À propos</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Services</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portefeuille</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contactez-nous</a></dt>
</dl>
</div>