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 véritable diagramme de mise en page 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.