Dans la production de pages Web, il existe de nombreux termes, tels que : CSS, HTML, DHTML, XHTML, etc. Dans l'article suivant, nous utiliserons quelques connaissances de base sur HTML. Avant d'étudier ce didacticiel d'introduction, assurez-vous que vous possédez déjà certaines connaissances de base en HTML. Commençons par utiliser DIV+CSS étape par étape pour concevoir la mise en page de pages Web.
La première étape de toute conception consiste à concevoir. Après la conception, vous devez généralement utiliser PhotoShop ou FireWorks (ci-après dénommé PS ou FW) et d'autres logiciels de traitement d'image pour dessiner simplement la disposition de l'interface à réaliser. Voici ce que j'ai conçu.
Ensuite, nous devons planifier la mise en page de la page sur la base du diagramme conceptuel. Après avoir soigneusement analysé le diagramme, nous pouvons facilement constater que l'image est grossièrement divisée en les parties suivantes :
1. La partie supérieure, qui comprend également le LOGO, le MENU et une image de bannière ;
2. La partie contenu peut être divisée en barre latérale et contenu principal ;
3. Le bas comprend des informations sur les droits d'auteur.
Avec l'analyse ci-dessus, nous pouvons facilement disposer notre couche de conception comme indiqué ci-dessous :
Sur la base de l'image ci-dessus, j'ai dessiné un autre diagramme de mise en page réel pour illustrer la relation d'imbrication des calques, afin qu'il soit plus facile à comprendre.
La structure du DIV est la suivante :
│body {} /*Ceci est un élément HTML, je n'expliquerai pas les détails*/
└#Container {} /*Conteneur de couche de page*/
├#En-tête {} /*En-tête de page*/
├#PageBody {} /*Corps de la page*/
│ ├#Barre latérale {} /*Barre latérale*/
│ └#MainBody {} /*Contenu principal*/
└#Footer {} /*Bas de page*/
À ce stade, la mise en page et la planification sont terminées, et la prochaine chose que nous devons faire est de commencer à écrire du code HTML et CSS.
Ensuite, nous créons un nouveau dossier sur le bureau et le nommons « DIV+CSS Layout Exercise ». Créez deux documents de bloc-notes vides sous le dossier et saisissons le contenu suivant :
Il s'agit de la structure de base de XHTML, nommez-la index.htm et nommez l'autre document du Bloc-notes css.css.
Ensuite, nous écrivons la structure de base de DIV dans la paire de balises <body></body>, le code est le suivant :
<div id=container><!--Conteneur de couche de page-->
<div id=En-tête><!--En-tête de page-->
</div>
<div id=PageBody><!--Corps de la page-->
<div id=Barre latérale><!--Barre latérale-->
</div>
<div id=MainBody><!--Contenu principal-->
</div>
</div>
<div id=Footer><!--Bas de page-->
</div>
</div>
Afin de faciliter la lecture du code à l'avenir, nous devrions ajouter des commentaires pertinents. Ensuite, ouvrez le fichier css.css et écrivez les informations CSS. Le code est le suivant :