Web page structure layout for CSS Basics Tutorials

Starting from this article on how to use CSS to achieve the layout of the Web page, that is, how to use CSS to control the location of the various elements of the page. If you're a beginner, it's likely that the first step in making a Web page is the layout. In fact, the design process of CSS Web pages can be referred to the following steps:

Graphic Design-> page cutting-> layout-> detail control

1. Graphic design is the essence of a Web page, the reader directly facing the interface, in the future of this site will cover this aspect of the article. Perhaps you would think that the idea of forming a Web site in your head would be all right, and then it would give you an amateur label. Recommended tools: Photoshop;
2. Page cutting can actually be divided into the layout, because your page cutting way directly affected the layout of the way, but also reflects whether you belong to the table layout camp or CSS layout camp. It is a key step in the layout (front). will be highlighted in this chapter. Recommended tools: Photoshop;
3. If you make the layout simple, you have to simplify your Web page first. Simple enough to divide your site into header,content,sidebar,footer four parts.
4. Detail control, will header,content,sidebar,footer the performance of detail.

This chapter will cover some of the Jorux private perspectives and techniques for page cutting.

First of all, we need to have a cut object, which takes the original Photoshop graphic design diagram of jorux.com as an example. as follows (fig.01):

Click to view larger image

If you use a table layout, you may want to cut the page in Photoshop into countless fixed-width squares. But with CSS layout, the first thing you need to be clear about is this:

1. Do you want to cut horizontally or vertically?
2. The first time cutting, only need to cut out the background picture of the webpage (because the background picture is declared in the CSS);
3. Chet pictures to be as small as possible, and then let the CSS to do more things;
4. Design more complex parts, you can not split, so as to reduce the difficulty of CSS coding;
5. Readers should be based on their ability to find out what effects CSS can be easily implemented, and which effects with the picture is simpler and small size, carefully weigh the pros and cons between 3.4;

Now we look at fig.01, the most on the part is a black ruler, covering the "Jorux Notepad", even worse it has a black projection. When it was time to cut, I regretted how the design was so complicated. But it doesn't matter, everything is going to be all right. Now come and relive my cutting thoughts:

1. The entire page background color Everybody should be very clear, is the dark gray #444, this does not need the picture, in the CSS inside body selector declares is good;

2. This step is the most critical step, please be careful to understand the reader. For CSS layout pages, Jorux recommends that you first give your original graphic design two horizontal knives (red) and then a vertical knife (blue). Achieve the following effects (fig.02):

Click to view larger image

Must first cross again, that is, your page is divided into top,mid,bottom three parts, and then the mid into content and sidebar two parts. For a single column style, you need only two horizontal knives, and for the three-column style, you may need two horizontal two vertical knives.

So you get header,content,sidebar,footer four parts. Now to analyze these four parts of the background picture needs how to cut.

3. The header part of the picture is very complex, but it is almost impossible to separate the ruler, and is not necessary. Because we also need this ruler to achieve the back page hyperlink, so it can only be in the HTML file pictures, not the background, in order to reduce the difficulty of CSS coding, we can have a projection of the rounded corners and the ruler cut down to spare, as shown (fig.03):

Click to view larger image

Then the remaining slightly pale gray, is the need for the header background, we only need to come to two vertical knives (width in 4-6px around the appropriate), get the following figure (fig.04):

I believe you know how to use repeat-x in CSS to achieve header background effect;

4. Then there is the background of the content, and it is easy to see the white background with the projection. Immediately to the two horizontal knife, the height of the same in 4-6px, as shown below (fig.05), in CSS with REPEAT-Y can achieve content background;

Click to view larger image

5. Fortunately, in this design sidebar no background, directly inherit the body of the gray background is good;

6. Footer background is relatively simple, that is, two rounded corners, I in order to map the convenience, the logo also cut down, as follows (fig.06):

Click to view larger image

This completes the first cut and cuts down all the background pictures that are involved in the layout. And then how to use CSS layout, our goal is to achieve the following effect diagram (fig.07):

Click to view larger image

So start writing HTML code now. Now that we have a clear layout effect chart, writing HTML code should be a very simple thing. But the simpler it is, the more things people overlook. The following Jorux points must be carefully considered:
For the use of Div, please be from big to small, the elements can be grouped together into a Div, and then continue to divide the Div div. So for the implementation (fig.07) of the effect diagram, you need to do the following steps:

1. We first classify the header,content,sidebar,footer as a div,id= "allwrap" and float it to the left.
2. The header is then used as a div,id= "header";
3. Dividing the content and sidebar into a div,id= "Midwrap", and then continuing to divide the contents into two Div,id respectively as content and sidebar;
4. Finally, the Footer as a div,id= "Footer";

Finally get the HTML code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<title>my layout</title>
</HEAD>
<BODY>
<div id= "Allwrap" >
<div id= "Header" >Header</div>
<div id= "Midwrap" >
<div id= "Content" >Content</div>
<div id= "Sidebar" >Sidebar</div>
</div>
<div id= "Footer" >Footer</div>
</div>
</BODY>
</HTML>

To leave a question to the reader, please have the ability of friends in the message to the implementation of the effect chart style CSS code. The following requirements are:

1. float to the left;
2. Allwrap width of 760px;content width to 560px, high 400px;sidebar width of 200px, high 400px;footer high for 80px, wide 760px;
3. In 800x600,1024x768, or widescreen display can be normal display;
4. In Ie6/7, Opera, Firefox can show normal;

The end of this text (the answer will be discussed in the message, the next article will explain how to achieve the final layout with CSS and background display)

The above is about the business interests of some people, for some reason people are not good at the content can be translated into the benefits of the disclosure, so those tutorials are always feel slicker.
One of my clients once told me that in their field (PR), people would not tell their customers anything valuable, or public. In fact, in any field is the same, most people would rather let his knowledge in the brain decay, will not reveal the slightest.
I know few things, but it happens to be what my readers crave. So, I decided to write out the most valuable knowledge of mine, even though some of you will be competing against me. In other terms, if you can become a partner, that's best. If this tutorial does not disappoint you, please continue to support it.

Apology: To say sorry to my readers, this tutorial is 10 days late. If a post is not updated for two weeks, there is the feeling of putting the 80 readers pigeons, with a part of the good students saying that it's like running a whole day class with a heavy sense of heaviness. One important reason for the delay is that I am in:

Moving to Ubuntu:

1. Ubuntu is a free system that I can't let go, since the discovery of the hacked ISO-free installation method, its advantages are so obvious: free, no piracy, no installation, can read/write Windows partition files, no partition format, 1-minute reload, Without an Android drive, I identified my ASUS laptop all hardware except the modem.
2. It has an excellent alternative to editplus programming tools –bluefish, I call it fat mouth blue fish. When coding, there is a fat fish to accompany, the atmosphere can alleviate a lot.
3. To be honest, Ubuntu is a system that relies heavily on the Internet, and if you have a bad Internet connection, don't try. But once it's on the net, it's going to be great, and the following message is cool:
4. Firefox is not so much a browser as it is a software library, FTP upload, offline write bo, gmail hard disk, screenshot, take color, Debug, Web collection, multithreading download, Feed Reader (Sage), screen word translation, gmail email reminders;
5. ubuntu+firefox+bluefish+mplayer+ broadband = realized like I do not play games, do not chat, to design/coding for fun, boring the rational and perceptual needs.