Microsoft Expression Web - Mise en page HTML

Dans ce chapitre, nous allons apprendre une autre façon de concevoir la mise en page d'une page. Dans le dernier chapitre, nous avons utilisé une feuille de style pour appliquer les styles à l'en-tête, au pied de page, etc. mais vous pouvez également spécifier les styles dans la page HTML elle-même sans utiliser de feuille de style supplémentaire.

Ce n'est pas la manière recommandée de concevoir une mise en page, mais juste pour comprendre, nous allons couvrir cette technique ici. Essayez de suivre les étapes ci-dessous.

Step 1 - Ajoutons une page HTML et appelons-la layoutdemo.html

Step 2 - Maintenant, ajoutez le <div> tag à partir de la boîte à outils.

Step 3 - Dans le Apply Styles panneau, cliquez sur le New Style…

Step 4- Lorsque vous sélectionnez l'option Page actuelle dans la liste déroulante «Définir dans», le style sera enregistré dans la même page HTML. Définissez la police de votre page, puis accédez à la catégorie Arrière-plan.

Step 5- Définissez la couleur de votre arrière-plan. Vous pouvez également définir les catégories Bordure, Boîte et Position, puis cliquer sur OK.

layoutdemo.html

Vous pouvez voir que le style est ajouté dans le même fichier HTML.

<!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" /> 
      <title>Untitled 1</title> 
      <style type = "text/css">
         #container { 
            font-family: Arial, Helvetica, sans-serif; 
            font-size: medium; 
            font-weight: normal; 
            font-style: normal; 
            font-variant: normal; 
            text-transform: capitalize; 
            color: #800000; 
            background-color: #C0C0C0; 
            padding: 8px; 
            margin: 8px; 
            width: 90%; 
         } 
      </style> 
   </head>  

   <body> 
      <div id = "container"></div> 
   </body> 
</html>

De même, vous pouvez ajouter d'autres styles comme l'en-tête, le pied de page, le contenu principal, etc. comme indiqué ci-dessus.