Microsoft Expression Web - HTML Layout

Advertisements

Previous Page
Next Page  

In this chapter, we will learn another way of designing the layout of a page. In the last chapter, we have used style sheet to apply the styles to header, footer, etc. but you can also specify the styles in HTML page itself without using an additional style-sheet.

This is not the recommended way to design a layout, however just for understanding purpose, we will cover this technique here. Try to follow the steps given below.

Step 1 − Let’s add an HTML page and call it layoutdemo.html

Layoutdemo

Step 2 − Now add the <div> tag from the Toolbox.

<div> tag

Step 3 − In the Apply Styles panel, click on the New Style…

Applystyles

Step 4 − When you select the Current page option from “Define in” dropdown then the style will be saved in the same HTML page. Set the Font for your page and then go to the Background category.

Define in

Step 5 − Set the color for your Background. You can also set the Border, Box, and Position categories and then click OK.

Position Categories

layoutdemo.html

You can see that the style is added in the same HTML file.

<!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>

Similarly, you can add other styles like header, footer, main content, etc. as shown above.

Advertisements