Microsoft Expression Web - Mise en page de la page Web

Dans ce chapitre, nous couvrirons la mise en page de base de vos pages Web. Avant de créer la mise en page de notre page Web, nous devons réfléchir à notre contenu, puis concevoir la façon dont nous voulons présenter ce contenu, car c'est le contenu qui sera visible sur notre site Web.

C'est à nous comment nous présentons notre contenu afin que nos téléspectateurs trouvent notre site et restent ensuite pour le vérifier. La mise en page comprendra probablement le logo ou la bannière de l'entreprise en haut, le menu de navigation, une zone de contenu pouvant inclure plusieurs colonnes et un pied de page en bas de la page.

Auparavant, les développeurs utilisaient des tableaux pour obtenir ce look. Les tables ont créé un groupe de boîtes qui ont été utilisées pour créer des lignes et des colonnes. Désormais, les concepteurs Web utilisent<div>s pour former les boîtes et CSS pour placer ces boîtes sur la page.

Balise <div>

Voici quelques-unes des fonctionnalités de la balise <div>.

La balise <div> définit une division ou une section dans un document HTML et facilite la gestion, le style et la manipulation de ces divisions ou sections.
Il est utilisé pour regrouper des éléments de bloc pour les formater avec CSS.
Les navigateurs placent généralement un saut de ligne avant et après l'élément div.
La balise <div> est un élément de niveau bloc.
La balise <div> peut contenir presque n'importe quel autre élément.
La balise <div> ne peut pas être à l'intérieur d'une balise <p>.

Exemple

Jetons un coup d'œil à un exemple simple dans lequel nous utiliserons les balises <div> </div> pour créer les différentes boîtes et règles de style.

Step 1 - Ouvrez Expression Web puis le index.html page que nous avons créée dans le chapitre précédent.

Step 2- Comme le montre la capture d'écran ci-dessus, la vue Code est mise en surbrillance par défaut. Vous pouvez travailler dansCode View ou Design View, mais vous pouvez également voir la vue fractionnée qui ouvrira à la fois la vue Code et la vue Création. Alors sélectionnons leSplit View option.

Step 3 - Le bodyelement définit le corps du document. Pour styliser la balise <body>, nous devons créer un nouveau style. Sélectionnez d'abord l'étiquette de corps en mode Création, puis cliquez sur le boutonNew Style…dans le panneau Appliquer les styles, qui ouvrira la boîte de dialogue Nouveau style. Ici, vous pouvez définir les différentes options pour votre style.

Step 4 - La première étape consiste à sélectionner le body du Selectorliste déroulante, puis sélectionnez la feuille de style existante dans «Définir dans» la liste déroulante. Depuis l'URL, sélectionnez le fichier CSS que nous avons créé dans le chapitre précédent.

Sur le côté gauche, il y a un Categoryliste telle que Police, Arrière-plan, etc. et la police actuelle est mise en surbrillance. Définissez les informations relatives à la police selon vos besoins, comme indiqué dans la capture d'écran ci-dessus.

Step 5 - Sélectionnez le Background colortu veux. Vous pouvez également sélectionner l'image de votre arrière-plan en utilisant le bouton du navigateur. Une fois que vous avez terminé avec l'arrière-plan, définissez vos bordures si vous le souhaitez.

Step 6 - Choisissons le double lineoption pour la bordure et choisissez la largeur et la couleur également dans les listes déroulantes. Une fois que vous avez terminé avec le style, cliquez sur OK.

Step 7- Vous pouvez maintenant voir dans la vue de conception que la couleur d'arrière-plan est modifiée pour ce que nous avons sélectionné. Si vous ouvrez le fichier sample.css, vous verrez que toutes les informations sont automatiquement stockées dans le fichier CSS.

Step 8 - Allez au index.html à nouveau et faites glisser le <div> dans le panneau "Boîte à outils" et déposez-le sur votre page ouverte.

Step 9 - Au-dessus du code view, tu verras <body> et <div> balises, cliquez sur <div>puis dans le panneau Appliquer les styles, cliquez sur Nouveau style…. qui ouvrira la boîte de dialogue Nouveau style.

Tapez «#container» dans le champ Sélecteur. La marque dièse # est un sélecteur d'ID. Dans la liste déroulante «Définir dans», sélectionnez la feuille de style existante et cochez l'option «Appliquer un nouveau style à la sélection de document». Accédez à la catégorie Arrière-plan.

Step 10 - Sélectionnez la couleur d'arrière-plan, sélectionnons la couleur blanche, puis allons dans la catégorie Boîte.

Step 11 - Définir padding et margin puis allez au Position Catégorie

Step 12- Réglez la largeur sur 90%. Cependant, ne spécifiez pas la hauteur car ici nous voulons que le conteneur se développe lorsque nous entrons dans le contenu. Cliquez sur le bouton OK.

De même, ajoutons des styles pour l'en-tête, la navigation du haut, la navigation de gauche, le contenu principal et le pied de page.

sample.css

Voici le code dans sample.css feuille de style après avoir ajouté tous les styles mentionnés ci-dessus.

body { 
   font-family: Calibri; 
   font-size: medium; 
   font-weight: normal; 
   font-style: normal; 
   font-variant: normal; 
   text-transform: none; 
   color: #0000FF; 
   background-color: #CCFFFF; 
   background-image: none; 
   border: medium double #FF0000; 
} 

#container { 
   background-color: #FFFFFF; 
   padding: 8px; 
   margin: 8px; 
   width: 90%; 
} 

#header {  
   background-color: #54B431;   
   background-repeat: no-repeat;  
   background-position: right center;  
   height: 170px;  
} 

#top-nav {  
   height: 50px;  
   border-top: solid medium #006600;  
   border-bottom: solid medium #006600;  
   background-color: #FFFFFF;  
}  

#left-nav {  
   margin: 20px 0px 10px 0px;  
   width: 180px;  
   float: left;  
   border: thin dashed #006600;  
} 

#main-content {  
   margin: 20px 10px 10px 200px;  
   background-color: #CCFFCC; 
} 

#footer {  
   border-top: 2px solid #006600;  
   clear: both;  
   padding: 10px 0px;  
   text-align: center;  
}

index.html

Voici le code dans le fichier index.html après avoir ajouté toutes les balises <div>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"></div> 
         <div id = "left-nav"></div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body> 
</html>

Production

Votre mise en page dans la vue de conception ressemblera à celle illustrée dans la capture d'écran suivante.

↰ Previous page Next page ↱