一、頁(yè)面布局與規(guī)劃

　　好久沒有認(rèn)真寫點(diǎn)東西了，想起最近這些時(shí)間經(jīng)常有朋友問(wèn)到我有關(guān)于DIV+CSS布局的問(wèn)題，其實(shí)歸根結(jié)底還是由于沒有入門造成的。那么接下來(lái)的這篇文章就帶領(lǐng)大家入門吧...

　　在網(wǎng)頁(yè)制作中，有許多的術(shù)語(yǔ)，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會(huì)用到一些有關(guān)于HTML的基本知識(shí)，而在你學(xué)習(xí)這篇入門教程之前，請(qǐng)確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開始一步一步使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)吧。

所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，一般來(lái)說(shuō)還需要用PhotoShop或FireWorks(以下簡(jiǎn)稱PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫出來(lái)，以下是我構(gòu)思好的界面布局圖。

??????? 下面，我們需要根據(jù)構(gòu)思圖來(lái)規(guī)劃一下頁(yè)面的布局，仔細(xì)分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個(gè)部分：
　　1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；
　　2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；
　　3、底部，包括一些版權(quán)信息。
　　有了以上的分析，我們就可以很容易的布局了，我們?cè)O(shè)計(jì)層如下圖：?

??????? 根據(jù)上圖，我再畫了一個(gè)實(shí)際的頁(yè)面布局圖，說(shuō)明一下層的嵌套關(guān)系，這樣理解起來(lái)就會(huì)更簡(jiǎn)單了。?

??????? DIV結(jié)構(gòu)如下：
　　│body {}　/*這是一個(gè)HTML元素，具體我就不說(shuō)明了*/
　　└#Container {}　/*頁(yè)面層容器*/
　　　　　├#Header {}　/*頁(yè)面頭部*/
　　　　　├#PageBody {}　/*頁(yè)面主體*/
　　　　　│　├#Sidebar {}　/*側(cè)邊欄*/
　　　　　│　└#MainBody {}　/*主體內(nèi)容*/
　　　　　└#Footer {}　/*頁(yè)面底部*/
　　至此，頁(yè)面布局與規(guī)劃已經(jīng)完成，下一節(jié)我們要做的就是開始書寫HTML代碼和CSS。?

二、寫入整體層結(jié)構(gòu)與CSS

　　接下來(lái)我們?cè)谧烂嫘陆ㄒ粋€(gè)文件夾，命名為“DIV+CSS布局練習(xí)”，在文件夾下新建兩個(gè)空的記事本文檔，輸入以下內(nèi)容：

　　這是XHTML的基本結(jié)構(gòu)，將其命名為index.htm，另一個(gè)記事本文檔則命名為css.css。

　　下面，我們?cè)?body>標(biāo)簽對(duì)中寫入DIV的基本結(jié)構(gòu)，代碼如下：

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:
/*Basic information*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*Page layer container*/
#container {width:100%}

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

/*Page 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 with a browser. At this time we can already see the basic structure. This is the frame of the page.
Instructions on the above CSS (for details, please refer to the CSS2.0 Chinese manual, available for download online):

1. Please develop good comment habits, this is very important;

2. Body is an HTML element. All content on the page should be written within this tag pair, so I won’t say more;

3. Explain the meaning of some commonly used CSS codes:
font:12px Tahoma;
Abbreviations are used here, the complete code should be: font-size:12px; font-family:Tahoma; indicating that the font is 12 pixels in size and the font is in Tahoma format;

margin:0px;
Abbreviations are also used, the full version should be:
margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px
or
margin:0px 0px 0px 0px
The order is top/right/bottom/left. You can also write it as margin:0 (abbreviation);

The above style description indicates that the top, right, bottom and left margins of the body part are 0 Pixels, if you use auto, the margins will be automatically adjusted,
? There are also the following writing methods:
? margin:0px auto;
? It means that the top and bottom margins are 0px, and the left and right margins are automatically adjusted;
We The padding attribute that will be used in the future has many similarities with margin. Their parameters are the same,
, but they have different meanings. Margin is the outer distance, and padding is the inner distance.

Text-align:center
Text alignment can be set to left, right, or center. Here I set it to center alignment.

　　background:#FFF
　　Set the background color to white. The color is abbreviated here. The complete color should be background:#FFFFFF.
Background can be used to fill the specified layer with background color and background image. We will use the following format in the future:
background:#ccc url('bg.gif') top left no-repeat;
Representation: Use #CCC (grayscale color) to fill the entire layer, use bg.gif as the background image,
　　 Top left
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ] ]??? of the current layer. Fill the entire layer.
Top/right/left/bottom/center
Used to position the background image, indicating top/right/bottom/left/center respectively; you can also use
background:url('bg.gif') 20px 100px;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? can be filled in/out Fill / Fill along the X axis / Fill along the Y axis.

Height / width / color

Represents height (px), width (px), and font color (HTML color system table) respectively.

4. How to center the page?

After you save the code, you can see that the entire page is displayed in the center. So what is the reason why the page is displayed in the center?

It’s because we used the following attributes in #container:
margin:0 auto;
According to the previous explanation, you can know that the top and bottom margins are 0, and the left and right margins are automatic, so this layer will Automatically centered.
If you want the page to be on the left, just cancel the auto value, because it is displayed on the left by default.
With margin:auto we can easily center the layer automatically.

5. Here I only introduce these commonly used CSS properties. For others, please refer to the CSS2.0 Chinese manual.

三、頁(yè)面頂部制作(1)

　　當(dāng)我們寫好了頁(yè)面大致的DIV結(jié)構(gòu)后，我們就可以開始細(xì)致地對(duì)每一個(gè)部分進(jìn)行制作了。

　　在上一章中我們寫入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的，我們把css.css中的樣式全部清除掉，重新寫入以下樣式代碼：
程序代碼
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*頁(yè)面層容器*/
#container {width:800px;margin:10px auto}
　　樣式說(shuō)明：

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

　　這兩項(xiàng)分別是控制頁(yè)面中超鏈接的樣式，具體我就不說(shuō)明了，請(qǐng)大家參閱手冊(cè)。

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

　　指定整個(gè)頁(yè)面的顯示區(qū)域。
　　width:800px指定寬度為800像素，這里根據(jù)實(shí)際所需設(shè)定。
　　margin:10px auto，則是頁(yè)面上、下邊距為10個(gè)像素，并且居中顯示。
　　上一章中我們講過(guò)，對(duì)層的margin屬性的左右邊距設(shè)置為auto可以讓層居中顯示。

　　接下來(lái)，我們開始制作TOP部分，TOP部分包括了LOGO、菜單和Banner，首先我們要做的就是對(duì)設(shè)計(jì)好的圖片進(jìn)行切片，以下是在FW下完成的切片：

????????我將TOP部分切片為兩部分，第一部分包括了LOGO和一條橫線。由于LOGO圖片并沒有太多的顏色，這里我于是將這一部分保存為GIF格式，調(diào)色板選擇為精確，選擇Alpha透明度，色版為白色(此處顏色應(yīng)與背景色相同)，導(dǎo)出為logo.gif，圖像寬度為800px。

　　到這里，有的朋友就說(shuō)了，* 為什么要使用GIF格式？使用JPEG不是更好嗎？
　　因?yàn)镚IF格式的圖片文件更小，這樣能使頁(yè)面載入的速度更快，當(dāng)然使用此格式之前必須確定圖片并沒有使用太多的顏色，當(dāng)我們使用了GIF格式時(shí)，從肉眼上并不能看出圖片有什么太大的變化，因此這是可行的。

　　* 接下來(lái)的Banner部分還能使用GIF格式嗎？
　　答案是不能，因?yàn)锽anner部分是一個(gè)細(xì)致的圖片，如果使用GIF格式顏色會(huì)有太大的損失，所以必須使用JPEG格式，將文件導(dǎo)出為banner.jpg。

　　* 合理的切片是非常之重要的，因?yàn)榍衅姆椒ㄕ_與否決定了CSS書寫的簡(jiǎn)易程度以及頁(yè)面載入速度。

　　切好片后，我們還需要對(duì)TOP部分進(jìn)行分析并將DIV結(jié)構(gòu)寫入Header中代碼如下：

　　為什么要這么寫呢，因?yàn)閷?duì)菜單使用列表

形式，可以在以后方便對(duì)菜單定制樣式。

　　而為什么要添加以下代碼呢？
　　

　　插入這一段代碼是可以方便地對(duì)菜單選項(xiàng)之間插入一些分隔樣式，例如預(yù)覽圖中的豎線分隔。

　　然后我們?cè)赾ss.css中再寫入以下樣式：
/*頁(yè)面頭部*/
#header {background:url(logo.gif) no-repeat}

　　樣式說(shuō)明：
　　#header {background:url(logo.gif) no-repeat}
　　給頁(yè)面頭部分加入一個(gè)背景圖片LOGO，并且不作填充。

　　這里，我們沒有指定header層的高度，為什么不指定呢？

　　因?yàn)閔eader層中還有菜單和banner項(xiàng)，所以層的高度暫時(shí)是未知的，而層的屬性又可以讓層根據(jù)內(nèi)容自動(dòng)設(shè)定調(diào)整，因此我們并不需要指定高度。

　　* 接下來(lái)，我們開始制作菜單，留到下一章，教程中相關(guān)文件請(qǐng)到下一章下載！

三、頁(yè)面頂部制作(2)----使用列表

制作菜單

　　開始此節(jié)的學(xué)習(xí)前，請(qǐng)確認(rèn)你已經(jīng)參照之前的幾節(jié)內(nèi)容寫入了DIV、CSS到index.htm和css.css文件中。
　　這一節(jié)我將告訴大家如何用列表

來(lái)制作菜單。

• 首頁(yè)




• 博客




• 設(shè)計(jì)




• 相冊(cè)




• 論壇




• 關(guān)于

The above is the structure of this part. Regarding the two HTML elements

and

, please refer to the relevant content yourself. They The main function is to display some information in the form of a list in HTML.

There is another point that everyone must understand clearly. When it is defined as id="divID" in HTML, the corresponding setting syntax in CSS is #divID{}. If it is defined as class in HTML ="divID", the corresponding setting syntax in CSS is .divID.
If the layer with id="divID" includes an , the corresponding setting syntax of this img in CSS should be #divID img {}. Similarly, if it is included in class When ="divID" is in this layer, the setting syntax should be .divID img {}. I hope everyone can understand this clearly.
In addition, all elements in HTML can be defined, such as table, tr, td, th, form, img, input... etc. If you want to set them in CSS, write the elements directly Just add a pair of braces {} to the name. All CSS code should be written within curly brackets {}.

According to the above introduction, we first write the following code in css.css:
? ? ? ? ? #menu ul {list-style:none; margin:0px;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?:left;}

Explain:
#menu ul {list-style:none;margin:0px;}
list-style:none, this sentence is the point before canceling the list, because we These points are not needed.
Margin:0px, this sentence is to delete the indentation of UL. This can make all list contents unindented.

#menu ul li {float:left;}
The left and right of float:left here are to display the content on the same line, so the float attribute (float) is used.

At this point, it is recommended that you save the preview effect first, and then add the following content. The effect is as follows:

At this time, the list content is arranged in one line, and we are # Menu ul li {} adds code Margin: 0 10px:

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

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

Now, the prototype has come out, Let’s fix the position of the menu again and change the code to the following:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{float:right;list-style:none;margin:0px;}
? ? ? ? ? ? ? ? /*Added float:right to make the menu on the right side of the page*/ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #menu ul li {float: left; margin: 0 10px }

At this time, the location has been determined, but in the conceptual diagram, there is a vertical line between the menu options. What should I do?
Don’t forget, we have already left an empty

, just use it if you want to add a vertical line.
According to the method mentioned above, we add the following code:
.menuDiv {width:1px;height:28px;background:#999}

Save and preview to see if the vertical line has come out ? I won’t say much about this code, it should be easy to understand.

However, the text of the menu options is at the top, so 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, you can refer to the manual, I won’t go into details.

The effect has basically been achieved. All that remains is to modify the hyperlink style of the menu and add the following code to css.css: #menu ul li a:link,#menu ul li a:visited {font -weight:bold;color:#666}
#menu ul li a:hover{}
There is no more to say about this. There is nothing more to say. The final effect is as follows:

This The festival is over here, by the way, I will provide you with the materials: