Basics of Web Design: An introductory tutorial on div+css layouts

css| Tutorials | Getting Started | designing | Web page Design

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, and before you learn this introductory tutorial, make sure you have a certain HTML base. Let's start with a step-by-step use of DIV+CSS for Web layout design.

All the design first step is the idea, the idea is good, in general also need to use Photoshop or fireworks (hereinafter referred to as PS or FW), such as image processing software will need to make the interface layout simple structure, the following is my idea of the interface layout diagram.

Below, we need to plan the layout of the page according to the idea map, analyze the diagram carefully, we can not find that the picture is roughly divided into the following parts:

1, the top part, including the logo, menu and a picture of banner;
2, the content can be divided into side columns, the main content;
3, the bottom, including some copyright information.
With the above analysis, we can easily layout the design layer as follows:

According to the diagram above, I have drawn an actual page layout diagram to illustrate the nesting relationship of the layer, so it will be easier to understand.

The div structure is as follows:
│body {}/* This is an HTML element, specifically I do not explain the * *
└ #Container {}/* page Layer Container * *
├ #Header {} * * page head * *
├ #PageBody {}/* page body * *
│ #Sidebar {}/* side bar/*
│└ #MainBody {}/* Principal content * *
└ #Footer {}/* Bottom of page * * *

Now that the page layout and planning are complete, all we have to do is start writing HTML code and CSS.

Next we create a new folder on the desktop named "Div+css layout Exercise", create a new two blank Notepad document under the folder, and enter the following:

Untitled Document

This is the basic structure of XHTML, named Index.htm, and another Notepad document named Css.css.

Below, we write the basic structure of the div in the tag pair, and the code is as follows:

In order to make it easier to read the code later, we should add the relevant comments, then open the Css.css file and write the CSS information, the code reads as follows:

/* Basic INFORMATION * *
Body {font:12px tahoma;margin:0px;text-align:center;background: #FFF;}

/* Page Layer Container * *
#container {width:100%}

/* Page Head * *
#Header {width:800px;margin:0 auto;height:100px;background: #FFCC99}

/* Page Main body * *
#PageBody {width:800px;margin:0 auto;height:400px;background: #CCFF00}

/* Bottom of page * *
#Footer {width:800px;margin:0 auto;height:50px;background: #00FFFF}

Save the above file and open it in a browser, we can already see the infrastructure, this is the frame of the page.

About the above CSS description (please refer to the CSS2.0 Chinese manual, download online):

1, please form good annotation habit, this is very important;

2, the body is an HTML element, all the contents of the page should be written in this label right, I will not say more;

3, to explain some common meaning of CSS code:

font:12px Tahoma;
Here the abbreviation is used, the complete code should be: Font-size:12px;font-family:tahoma; description font is 12 pixel size, font is Tahoma format;

margin:0px;
Also uses the abbreviation, the complete should be:

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
Or
margin:0px 0px 0px 0px

The order is up/right/down/left, and you can also write as margin:0 (abbreviated);
The above style shows that the body section is 0 pixels above the left margin of the upper right, and automatically adjusts the margins if you use Auto.

There are several other ways to do this:
margin:0px Auto;
The description of the bottom margin is 0px, the automatic adjustment is left and right;
There are many similarities between the padding attributes we will use in the future and the margin, their parameters are the same,
But the meaning is not the same, margin is the external distance, and padding is the internal distance.

Text-align:center
Text alignment, which can be set to left, right, and middle, where I set it to center alignment.

Background: #FFF
Set the background color to white, where the color uses the abbreviation, the complete should be background: #FFFFFF.
Background can be used to fill the specified layer with background color, background picture, later we will use the following format:
Background: #ccc url (' bg.gif ') top left no-repeat;
To use #ccc (grayscale) to fill the entire layer, using bg.gif as a background image,
Top left
Indicates that the picture is at the top left of the current layer, and no-repeat indicates that only the picture size is displayed and not filled with the entire layer.
Top/right/left/bottom/center
Used to locate the background picture, representing the top/right/Bottom/left/middle, and also to use
Background:url (' bg.gif ') 20px 100px;
An accurate positioning of the x coordinates of 20 pixels and the y-coordinates of 100 pixels;
Repeat/no-repeat/repeat-x/repeat-y
Fill the entire layer/not fill/fill with the x-axis/fill the y-axis along the y axis, respectively.

Height/width/color
Represents height (px), Width (px), font color (HTML shades).

4, how to center the page?

We will save the code after you can see that the whole page is centered, so what is the reason why the page is centered?
This is because we used the following properties in #container:
margin:0 Auto;
As you can see from the previous instructions, the top and bottom margin is 0, the left or right is automatic, so the layer is centered automatically.
If you want to leave the page on the left, then cancel the auto value is OK, because the default is the left display.
By Margin:auto we can easily center the layer automatically.

5, here I only introduce these commonly used CSS properties, other please refer to CSS2.0 Chinese manual.

When we have written the general DIV structure of the page, we can start to make each part in detail.

In the previous chapter we wrote some styles that were written to preview the structure, and we cleaned out all the styles in Css.css and rewritten the following style codes:

/* Basic INFORMATION * *
Body {font:12px tahoma;margin:0px;text-align:center;background: #FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/* Page Layer Container * *
#container {width:800px;margin:10px Auto}

Style Description:

a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}

These two are the control page of the hyperlink style, specifically I do not explain, please refer to the manual.

#container {width:800px;margin:10px Auto}

Specifies the display area of the entire page.
The width:800px specifies a width of 800 pixels, which is set according to the actual requirements.
margin:10px Auto, is the page, the bottom margin is 10 pixels, and the center is displayed.
As we have said in the previous chapter, setting the left and right margins of the margin property of a layer to auto allows the layer to be centered .

Next, we start to make the top section, which includes logos, menus, and Banner, first of all we have to do is to slice the design of the picture, the following is done under the FW of the slices:

I slice the top part into two parts, the first part including the logo and a horizontal line. Because the logo picture does not have too many colors, here I will save this part as GIF format, palette selection for accurate, select alpha transparency, color version of white (here should be the same color as background), exported to logo.gif, image width of 800px.

Here, some friends say , * Why do you use the GIF format? Isn't it better to use JPEG?
Because the picture files in GIF format are smaller, this will allow the page to load faster, of course, before using this format must be determined that the picture does not use too much color, when we use the GIF format, from the naked eye can not see how much the picture changes, so this is feasible.

* Can the next Banner section also use GIF format?
The answer is no, because the banner part is a meticulous picture, if you use the GIF format color will be too much damage, so you must use the JPEG format, the file exported to banner.jpg.

* Reasonable slicing is very important because the method of slicing correctly determines the simplicity of the CSS writing and the page load speed.

After cutting the slices, we also need to analyze the top section and write the div structure to the header code as follows:

• Home




• Blog




• Design




• Album




• Forum




• About

Why to write this, because the menu use List

form, you can easily customize the menu in the future style.

And why do you want to add the following code?

Inserting this piece of code makes it easy to insert some separate styles between menu options, such as vertical bar separation in a preview chart.

Then we write the following style in Css.css:

/* Page Head * *
#header {background:url (logo.gif) No-repeat}

Style Description:
#header {background:url (logo.gif) No-repeat}
Add a background picture logo to the header of the page and do not fill it.

Here, we do not specify the height of the header layer, why not specify it?

Because the header layer also has a menu and banner items, so the height of the layer is temporarily unknown, and the layer's properties can let the layer according to the content automatically set adjustment, so we do not need to specify the height.

Working with lists

making menus

Before starting this section, make sure that you have written to the Div, CSS to index.htm and css.css files with reference to the previous sections.

In this section I'll tell you how to make a menu with a list

.

  

   

     
• Home

   

   
• Blog

   

   
• Design

   

   
• Albums

   

   
• Forum

   

   
• About

   

  

The above is the structure of this part, there are about

,

> These two HTML elements to refer to the relevant content, Their main function is to display some information in the form of a list in HTML.

There is also a need for everyone to be clear, when defined in HTML as id= "divID", the CSS corresponding to the SET syntax is #divID {} , if the HTML is defined as class= "divID" , the corresponding setting syntax in CSS is. divID.

If a is included in the id= "divID" layer, then this IMG's corresponding setting syntax in CSS should be #divID img {}, similarly, if it is contained in the class= "divID" is in this layer, the syntax should be set. divid img {}, I hope you will be clear about this point.

In addition, all elements of HTML can be defined, such as table, TR, TD, Th, Form, img, input ... And so on, if you want to set them in CSS, write directly to the name of the element plus a pair of braces {} . All CSS code should be written in curly braces {} .

As described above, we first write the following code in the CSS.CSS:

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}

Explain:

#menu ul {list-style:none;margin:0px;}
List-style:none, this is the point before canceling the list, because we don't need these points.
margin:0px, this sentence is to remove the indentation of UL, so that all the list content is not indented.

#menu ul li {float:left;}
The float:left here is where the content is displayed on the same line, so floating properties (float) are used.

To this step, we recommend that you first save the preview effect, we add the following content, the effect is as follows:

At this point, the list content is lined up in one line, we #menu ul li {} and then add code margin:0 10px

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

margin:0 The role of 10px is to create a 20 pixel distance between the contents of the list (left: 10px, right: 10px), the effect of the preview is as follows:

Now that the prototype is out, we'll fix the location of the menu and change the code as follows:

#menu {padding:20px 20px 0 0}
* * Use padding:20px 20px 0 0来 Fixed menu location * *
#menu ul {float:right;list-style:none;margin:0px;}
/* Added float:right so that menu is on the right side of the page * *
#menu ul li {float:left;margin:0 10px}

At this point, the location has been determined, but in the mind map, there is a vertical line between the menu options, how to do?
Don't forget, we've already left an empty

, and use it if you want to add a vertical bar.
In the way described above, we add the following code:

. menudiv {width:1px;height:28px;background: #999}

Save Preview, is the vertical bar already out? About this code is not much to say, it should be very easy to understand.

However, the text of the menu option is at the top, and we modify it to the following code:

#menu ul li {float:left;margin:0 10PX;DISPLAY:BLOCK;LINE-HEIGHT:28PX}

About display:block;line-height:28px Everyone can go to see the manual, I will not say more.

The effect has basically been achieved, the remaining is to modify the menu hyperlink style, add the following code in the CSS.CSS:

#menu ul Li A:link, #menu ul li a:visited {font-weight:bold;color: #666}
#menu ul Li a:hover{}

This is not much said, there is nothing to say, the final effect is as follows:

This section is finished here, by the way to provide you with the material:
Idea Map: click to download
HTML and CSS source files: click to download

In this section, the main thing is to tell you how to use the good border and clear these two properties.

First of all, if you've ever used a table to make a Web page, you should know that if you're going to draw a dotted line in a table, you need to make a small picture to fill it, but there's a simpler way to do that, as long as you're adding a paragraph to the , You can try:

You can refer to the manual again, then you can understand dashed, solid, dotted ... And so on, using them you can make a lot of effects, solid lines, dashed lines, double lines, shadow line and so on.

The code above can implement the banner in the design sketch and add the following style to the CSS.CSS:

#banner {
Background:url (banner.jpg) 0 30px no-repeat; * * Add background picture/
width:730px; /* Set the width of the layer * *
Margin:auto; /* Layer Center * *
height:240px; /* Set Height * *
border-bottom:5px solid #EFEFEF; * * Draw a light gray solid line * *
Clear:both/* Clear FLOAT * *
}

By border it is easy to draw a solid line, and reduce the image download the network resources used to make the page load faster.

Another thing to say is clear:both, which means clearing all the floats on the left and right, and we'll use this attribute in the next layout: Clear:left/right. Add Clear:both here is because before the UL, Li element set float, if not clear will affect the setting of banner layer position.

Above is the main part of the page, we add the following style to the CSS.CSS:

#pagebody {
width:730px; /* Set Width * *
MARGIN:8PX Auto; /* Center *
}
#sidebar {
width:160px; /* Set Width * *
Text-align:left; /* Text Left alignment * *
Float:left; /* Floating Living Left/*
Clear:left; /* Do not allow floating on the left side * *
Overflow:hidden; /* Out of width part hidden * *
}
#mainbody {
width:570px;
Text-align:left;
Float:right; * * Floating habitat Right/*
Clear:right; /* Do not allow floating on the right side * *
Overflow:hidden
}

In order to be able to see the effect, it is recommended that you add the following code to #sidebar and #mainbody, and you can delete the code after the preview is complete:

border:1px solid #E00;
height:200px

Save the preview effect, you can find that the two layers of perfect float, in order to meet our layout requirements, and the actual width of two layers should be 160+2 (border) +570+2=734px, has exceeded the width of the parent layer, because clear reason, these two layers will not appear dislocation, This allows us to layout the page not because the content is too long (such as pictures) caused by dislocation.

The Overflow:hidden added later can automatically hide portions of content that are too long, such as pictures . Usually we will see some pages in the load, because the picture is too large, resulting in the layout is stretched, until the page is finished downloading to restore normal, by adding overflow:hidden can solve this problem.

Each attribute in CSS can be used properly to solve many problems, perhaps they are not much related to the page you are layout, but you must know the role of these attributes, in the face of difficulties, you can try to use these properties to solve the problem.