Microsoft Expression Web - HTML Layout

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

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

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

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.

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

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: capitapze; 
            color: #800000; 
            background-color: #C0C0C0; 
            padding: 8px; 
            margin: 8px; 
            width: 90%; 
         } 
      </style> 
   </head>  

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

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

Microsoft Expression Web - HTML Layout

layoutdemo.html

友情链接