HTML structured design in CSS page layouts

Are you learning the Web standard CSS page layout? Are you still unable to fully master the pure CSS layout? There are usually two types of special attention you need to be aware of:

The first possibility is that you have not yet understood the CSS Process page principle.

Before you consider the overall performance of your page, you should consider the semantics and structure of the content before adding CSS to the semantics and structure. This article will show you how to structure HTML.

Another reason is that you have no problem with the very familiar performance layer attributes.

For example: cellpadding, hspace, align= "left" and so on, do not know what to convert to the corresponding CSS statements. When you solve the first problem, know how to structure your HTML, and then give a list detailing the original performance attributes with what CSS instead.

Structured HTML

When we first study the Web page, we always think about how to design, consider the pictures, fonts, colors, and layout options. Then we use Photoshop or fireworks to draw and cut into small pictures. Finally, all the design restores are displayed on the page by editing the HTML.

If you want your HTML page to be in CSS layout (css-friendly), you need to go back and think about the semantics and structure of your page's content first, regardless of the appearance.

Appearance is not the most important. A well-formed HTML page can appear with any appearance, CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.

HTML is not only read on the computer screen. The images you have carefully designed with Photoshop may not be visible on PDAs, mobile phones and screen readers. But a well-formed HTML page can be defined by different CSS definitions, displayed anywhere, on any network device.

Start thinking

The first thing to learn is what is "structure", also called "Semantics". The term means that you need to analyze your content block and the purpose of each piece of content service, and then build the corresponding HTML structure based on these content objectives.

If you sit down to analyze and plan your page structure carefully, you may get a few blocks like this:

Flag and Site name

Home Page Content

Site navigation (Main menu)

Sub Menu

Search box

Ribbon (e.g. shopping cart, cashier)

Footer (copyright and related legal notices)

We usually use DIV elements to define these structures, like this:

＜div id="header"＞＜/div＞
＜div id="main"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="nav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="footer"＞＜/div＞

This is not a layout, it is a structure. This is a semantic description of the content block. When you understand your structure, you can add the corresponding ID to the div. The div container can contain any content blocks, or it can nest another div. A content block can contain arbitrary HTML elements---headings, paragraphs, pictures, tables, lists, and so on.

According to the above, you already know how to structure HTML, now you can make layout and style definitions. Each block of content can be placed anywhere on the page, specifying the color, font, border, background, and alignment properties of the block, and so on.

Practice the structure of

The above is just the most basic structure, in practical applications, you can adjust the content block as needed. There are always instances of div nesting, and you'll see that there are other layers in the "container" layer, similar in structure:

＜div id="header"＞
＜div id="logo"＞
＜h3＞http://www./＜/h3＞
＜ul＞a list＜/ul＞
＜/div＞
＜div id="nav"＞
＜ul＞nav list＜/ul＞
＜form＞search＜/form＞
＜/div＞
＜/div＞

Nested div elements allow you to define more CSS rules to control performance, for example: You can give #header a rule to get them all right, or centered, and give #logo a rule to leave it, and give #nav a completely different representation of the list and form.