Web Page Layout #8
How to Design a Web Page Template
You should design our web page template using division tags and CSS (style sheets).
Layout #8 uses 4 main divisions. The first single column division (nav element) is used for our links. The second division (header element) is divided into 2 columns and forms our heading. The third division is divided into 3 columns and is used for our body content. The columns are created using nested divisions followed by another single division (footer element) for the footer.
The template and basic HTML5 code are shown below.
Preview The template
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="layout8.css" type="text/css">
</head>
<body>
<nav></nav>
<header>
<div class="header-left"></div>
<div class="header-right"></div>
</header>
<div class="main">
<div class="main-left"></div>
<div class="main-middle"></div>
<div class="main-right"></div>
</div>
<footer></footer>
</body>
</html>
Kit and More Information
You can download the web page code , style sheet and images in a zip file for further study.
Download Layout8.zip
Use these lessons in our HTML5 tutorial to get a better understanding of building web pages with divisions and CSS.
Division Element
Class Attribute