HTML Structured: A Beginner's Guide to Practicing DIV+CSS Web Page Layout_CSS/HTML

Are you learning CSS layout? Are you still unable to fully master pure CSS layout? There are usually two situations that hinder your learning:

The first possibility is that you have not yet understood the principle of CSS processing pages. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content, and then add CSS for the semantics and structure. This article will tell you how to structure HTML.

Another reason is that you are at a loss for those very familiar presentation layer attributes (such as cellpadding, hspace, align="left", etc.) and don't know what CSS statements to convert them into. Once you have solved the first problem and know how to structure your HTML, I will give you a list detailing what CSS to use to replace the original presentation attributes.

Structured HTML

When we first learn to make web pages, we always consider how to design them first, considering the pictures, fonts, colors, and layout plans. Then we use Photoshop or Fireworks to draw it and cut it into small pictures. Finally, edit the HTML to restore all the designs to the page.

If you want your HTML page to be laid out with CSS (it is CSS-friendly), you need to go back and start over. Don't think about "appearance" first, but first think about the semantics and structure of your page content.

Appearance is not the most important thing. A well-structured HTML page can be presented in any appearance, and CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.

HTML is not just for reading on a computer screen. Your carefully designed images in Photoshop may not be displayed on PDAs, mobile phones, and screen readers. But a well-structured HTML page can be displayed anywhere and on any network device through different definitions of CSS.

Start thinking

First of all, you must learn what "structure" is, which some writers also call "semantics". What this term means is that you need to analyze your content blocks and the purpose each piece of content serves, and then build the corresponding HTML structure based on these content purposes.

If you sit down and carefully analyze and plan your page structure, you might end up with a few pieces like this:

Logo and site name

Main page content

Site navigation (main menu)

Submenu

Search box

Functional area (such as shopping cart, checkout)

Footer ( Copyright and related legal statements)

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

＜div id="header"＞＜/div＞

＜div id="content"＞＜/div＞

＜div id="globalnav"＞＜/div＞

＜div id="subnav"＞＜/div＞

＜div id="search"＞＜/div＞

＜div id="shop"＞＜/div＞

＜div id="footer"＞＜ /div＞

This is not a layout, but a structure. This is a semantic description of content blocks. When you understand your structure, you can add the corresponding ID to the DIV. Any content block can be contained within a DIV container, and another DIV can be nested within it. Content blocks can contain any HTML element---titles, paragraphs, images, tables, lists, etc.

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

Using selectors is a wonderful thing

The name of the id is a means of controlling a certain content block. By surrounding this content block with a DIV and adding a unique id, you can Use CSS selectors to precisely define the appearance of each page element, including titles, lists, pictures, links, paragraphs, etc. For example, if you write a CSS rule for #header, it can be completely different from the image rule in #content.

Another example is: you can define link styles in different content blocks through different rules. Something like this: #globalnav a:link or #subnav a:link or #content a:link. You can also define different styles for the same element in different content blocks. For example, define the styles of p in #content and #footer respectively through #content p and #footer p. Structurally speaking, your page is composed of pictures, links, lists, paragraphs, etc. These elements themselves do not affect what network device they are displayed on (PDA, mobile phone or Internet TV). They can be defined as Any performance appearance.

A carefully structured HTML page is very simple, and every element is used for structural purposes. When you want to indent a paragraph, you don't need to use the blockquote tag. Just use the p tag and add a CSS margin rule to p to achieve the indentation purpose. p is a structured tag and margin is a presentation attribute. The former belongs to HTML and the latter belongs to CSS. (This is the separation of structure and presentation.)

There are almost no presentation attribute tags in a well-structured HTML page. The code is very clean and concise.例如，原先的程式碼＜table width="80%" cellpadding="3" border="2" align="left"＞，現在可以只在HTML中寫＜table＞，所有控製表現的東西都寫到CSS中去，在結構化的HTML中， table就是表格，而不是其他什麼(例如被用來佈局和定位)。 

親自實踐結構化 

上面說的只是最基本的結構，實際應用中，你可以根據需要來調整內容塊。常常會出現DIV嵌套的情況，你會看到"container"層中又有其它層，結構類似這樣： 

＜div id="navcontainer"＞ 

＜div id ="globalnav"＞ 

＜ul＞a list＜/ul＞ 

＜/div＞ 

＜divdiv ＜ul＞another list＜/ul＞ 

＜/div＞ 

＜/div＞ 

嵌套的div元素允許你定義更多規則的規則來控制表現，例如：你可以給#navcontainer一個規則讓列表居右，再給#globalnav一個規則讓列表居左，而給#subnav的list另一個完全不同的表現。

用CSS取代傳統方法 

下面的列表將幫助你用CSS取代傳統方法： 

HTML屬性以及相對應的CSS方法 

HTML屬性 

CSS方法說明 

align="left" 

align="right" float: left;  rightfloat:任何元素:圖片、段落、div、標題、表格、列表等等 

當你使用float屬性，就必須為這個浮動元素定義一個寬度。

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以設定在任何元素上, 不僅僅是body元素.更重要的，你可以分別指定元素的top, right, bottom和left的margin值。

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; 

a:visited: #3ff; 

a:visited: #339; 

a:visited: #339; :hover: #999; 

a:active: #00f; 

在HTML中，連結的顏色作為body的一個屬性值定義。整個頁面的連結風格都一樣。使用CSS的選擇器，頁面不同部分的連結樣式可以不一樣。 

bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定義背景顏色，不僅限於body和table元素。

bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設定邊框(boeder)，你可以分別定義top, right, bottom和left 

border="3 "cellspacing="3" border-width: 3px; 用CSS，你可以定義table的邊框為統一樣式，也可以分別定義top, right, bottom and left邊框的顏色、尺寸和樣式。

你可以使用 table, td or th 這些選擇器. 

如果需要設定無邊框效果，可以使用CSS定義： border-collapse: collapse; 
br clear="left"＞ 

＜br clear="right"＞ 

＜br clear="all"＞ 
clear: right; 

clear: both; 

許多2欄位或3列版面都使用 float屬性來定位。如果你在浮動層中定義了背景顏色或背景圖片，你可以使用clear屬性. 

cellpadding="3" 

vspace="3" 

hspace= "3" padding: 3px; 用CSS，任何元素都可以設定padding屬性，同樣，padding可以分別設定top, right, bottom and left。 padding是透明的。

align="center" text-align: center; 

margin-right: auto; margin-left: auto; 

Text-align 🎜>
象div，p這樣的塊級可以透過margin-right: auto; 和margin-left: auto;來水平居中 

一些令人遺憾的技巧和工作環境 

由於瀏覽器對CSS支援的不完善，我們有時候不得不採取一些技巧(hacks)或建立一種環境(Workarounds)來讓CSS實現傳統方法同樣的效 果。例如塊級元素有時侯需要使用水平居中的技巧，盒子模型bug的技巧等等。所有這些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中詳細說明。