In web page production, there are many terms, such as: CSS, HTML, DHTML, XHTML and so on. In the following article we will use some basic knowledge about HTML. Before you study this introductory tutorial, please make sure that you already have a certain basic knowledge of HTML. Let’s start using DIV+CSS step by step to design web page layout.
The first step in all designs is to conceive. After conceiving, generally speaking, you need to use PhotoShop or FireWorks (hereinafter referred to as PS or FW) and other image processing software to simply draw the interface layout that needs to be made. The following is what I have conceived. interface layout diagram.
Next, we need to plan the layout of the page based on the conceptual diagram. After carefully analyzing the diagram, we can easily find that the picture is roughly divided into the following parts:
1. The top part, which also includes LOGO, MENU and a Banner picture;
2. The content part can be divided into sidebar and main content;
3. The bottom includes some copyright information.
With the above analysis, we can easily lay out our design layer as shown below:
Based on the picture above, I drew another actual page layout diagram to illustrate the nesting relationship of the layers, so that it will be easier to understand.
The DIV structure is as follows:
│body {} /*This is an HTML element, I won’t explain the details*/
└#Container {} /*Page layer container*/
├#Header {} /*Page header*/
├#PageBody {} /*Page body*/
│ ├#Sidebar {} /*Sidebar*/
│ └#MainBody {} /*Main content*/
└#Footer {} /*Bottom of page*/
At this point, the page layout and planning have been completed, and the next thing we have to do is start writing HTML code and CSS.
Next, we create a new folder on the desktop and name it "DIV+CSS Layout Exercise". Create two empty notepad documents under the folder and enter the following content:
This is the basic structure of XHTML, name it index.htm, and name the other Notepad document css.css.
Next, we write the basic structure of DIV in the <body></body> tag pair, the code is as follows:
<div id=container><!--Page layer container-->
<div id=Header><!--Page header-->
</div>
<div id=PageBody><!--Page body-->
<div id=Sidebar><!--Sidebar-->
</div>
<div id=MainBody><!--Main content-->
</div>
</div>
<div id=Footer><!--Bottom of page-->
</div>
</div>
In order to make it easier to read the code in the future, we should add relevant comments. Next, open the css.css file and write the CSS information. The code is as follows: