許佳南

(揭陽職業(yè)技術(shù)學(xué)院，廣東 揭陽 522000)

淺談網(wǎng)頁頁面設(shè)計(jì)技巧

許佳南

(揭陽職業(yè)技術(shù)學(xué)院，廣東 揭陽 522000)

DIV+CSS網(wǎng)頁布局越來越多的被廣泛應(yīng)用于網(wǎng)頁設(shè)計(jì)中，文章通過使用DIV+CSS技術(shù)制作一個(gè)網(wǎng)頁頁面詳細(xì)說明DIV+CSS的使用方法。

DIV+CSS；網(wǎng)頁設(shè)計(jì)

隨著互聯(lián)網(wǎng)與WEB技術(shù)的發(fā)展，利用DIV+CSS設(shè)計(jì)網(wǎng)站的設(shè)計(jì)方式正逐步成為制作網(wǎng)站的主力軍之一，DIV+CSS技術(shù)作為制作網(wǎng)頁的重要組成部分，已經(jīng)成為網(wǎng)頁設(shè)計(jì)中必不可少的要素。本文將詳細(xì)介紹如何使用DIV+CSS制作一個(gè)網(wǎng)頁。

1 布局設(shè)計(jì)

網(wǎng)頁中的布局是整個(gè)網(wǎng)頁制作中最開始的步驟，也是最為關(guān)鍵的一步。網(wǎng)頁中的布局決定網(wǎng)頁的整體效果，合理的布局可以完美、清晰地組織網(wǎng)頁中的文字、圖形，給人以緊湊、整潔、美觀的感覺。

在本例中，我們首先使用Photoshop設(shè)置網(wǎng)頁頁面的效果圖，接著再切圖并使用DIV+CSS語言將其做成HTML形式。接下來我們詳細(xì)說明使用DIV+CSS語言的布局方法。

（1）網(wǎng)頁頁面的每個(gè)區(qū)域，如頁頭區(qū)、主體區(qū)、法律和版權(quán)聲明等，我們都插入相應(yīng)的DIV元素，然后，用CSS控制DIV使網(wǎng)頁居中顯示。在本例中，我們將分為bn，main，cr三個(gè)DIV。

（2）對于頁面中所有的 DIV元素，利用 CSS控制 DIV的位置，我們可以將頁面中的DIV視為一個(gè)個(gè)塊狀元素。在此應(yīng)用了“盒模型”的工作原理，“盒模型”是CSS的基礎(chǔ)，“盒模型”理論認(rèn)為：頁面上的每個(gè)元素都被看做—個(gè)矩形，這個(gè)矩形由內(nèi)容、填充(padding)、邊框(border)、和邊距(margin)構(gòu)成。對于每部分的間距，以及文字、圖片空隙的調(diào)整，我們用“盒模型”的工作原理來調(diào)整。在網(wǎng)頁默認(rèn)的情況下，元素由上到下依次疊放，當(dāng)這樣的疊放順序不能滿足布局的需要時(shí)，就要使用“float(浮動(dòng))”屬性來改變元素的疊放順序。元素應(yīng)用了“float(浮動(dòng))”屬性，它周圍的元素就會(huì)靠近、包圍元素，這樣的影響在有的布局中是多余的，這時(shí)，可以用“clear(清除)”屬性來阻止這種浮動(dòng)對后面元素的影響。再復(fù)雜的布局也是重復(fù)利用這樣的技術(shù)，大到網(wǎng)頁每—部分的疊放，小到文字、圖片的排版。

（3）在DIV中添加各種網(wǎng)頁元素，把文字、圖片、動(dòng)畫安排到合適的位置，再把每部分合理地疊放到網(wǎng)頁中，這樣就完成了網(wǎng)頁的布局。

2 主要設(shè)計(jì)部分

在VS.NET開發(fā)環(huán)境中，新建index.htm，并創(chuàng)建css文件，命名為main.css，將樣式表寫在一個(gè)獨(dú)立的文件中。

在 index.htm 中 寫 入 〈!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN" ＞ 用來聲明將會(huì)把 Internet Explorer 6及以后版本切換到標(biāo)準(zhǔn)兼容模式。

3 在main的DIV中的各個(gè)DIV中插入相應(yīng)的內(nèi)容

在導(dǎo)航的DIV中插入相應(yīng)的內(nèi)容

〈div id="nav"＞

〈ul＞

〈li＞〈span style="color: #215B0A;" a href=”#”＞學(xué)院首頁〈/span＞〈/li＞

〈li＞〈a href=”#”＞實(shí)驗(yàn)系統(tǒng)〈/a＞ 〈/li＞

〈li＞〈a href=”#”＞實(shí)驗(yàn)實(shí)訓(xùn)室〈/a＞ 〈/li＞

〈li＞〈a href=”#”＞實(shí)訓(xùn)基地〈/a＞ 〈/li＞

〈li＞〈a href=”#”＞實(shí)訓(xùn)與實(shí)習(xí)〈/a＞〈/li＞

〈li＞〈a href=”#”＞管理制度〈/a＞ 〈/li＞

〈li＞〈a href=”#”＞技能鑒定所 〈/a＞〈/li＞

〈li＞〈a href=”#”＞高新技術(shù)考試站〈/a＞ 〈/li＞

〈/ul＞

〈/div＞

同時(shí)我們在main.css文件中加入如下代碼：

#main{width:950px; border:1px solid #979494;border-bottom:0px; border-top:0px; height:920px; }

#nav{ width:946px;background-image:url(nav_mg.gif); height:37px;background-repeat:repeat

x;margin:0px; }

#nav ul{ width:946px; margin:0px;list-style-type:none; height:37px;margin:0px;}

#nav ul li{ background-image:url(nav_f.gif);float:left; width:91px; height:37px; color:#FFF;

font-weight:bold; padding-top:10px; }

在左邊的DIV中插入相應(yīng)的內(nèi)容

〈div id="ltb" ＞

〈div id="ltb1"＞

〈h2＞ 最新公告〈/h2＞

〈div class="ltb1_m"＞

〈div class="ltb1_ml"＞ 〈span class="ltb1_ml_b"＞〈img src="themes/ltb1_pic1.gif" /＞ 省教育廳巡視員李小魯同志蒞臨我院指導(dǎo)工作〈/span＞ 〈/div＞

〈div class="ltb1_mm"＞ 〈span style="color: #4B4B4B;font-weight: bold; margin-bottom: 3px;"＞ 〈img src="themes/ltb1_pic2.gif" style="margin-top: 3px;margin-bottom: -3px;" /＞指導(dǎo)工作〈/span＞  10月27日，省教育廳巡視員李小魯同志蒞臨我院檢查指導(dǎo)工作。李小魯巡視員一到學(xué)院就詳細(xì)了解我院新征規(guī)劃用地的進(jìn)展情況，親臨實(shí)訓(xùn)中心視察，并召開調(diào)研會(huì)。...〈/div＞

〈div class="ltb1_mr"＞

〈ul＞

〈li class="ltb1_mr_f"＞〈span＞揭陽職業(yè)技術(shù)學(xué)院參加省職業(yè)院校技能大賽〈/span＞ 〈/li＞

〈li＞〈span＞關(guān)于參加 2012年度全國職業(yè)院校技能大賽〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關(guān)于開展實(shí)訓(xùn)室檢查通知〈/span＞〈/li＞

〈li＞〈span＞ 實(shí) 訓(xùn) 中 心 2011-2012 下 學(xué) 期 課 表〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關(guān)于做好 2011-2012 學(xué)年度第一學(xué)期實(shí)驗(yàn)...〈/span＞〈/li＞

〈li＞〈span＞關(guān)于做好 2011-2012學(xué)年度第二學(xué)期實(shí)驗(yàn)...〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關(guān)于做好 2011-2012 學(xué)年度第一學(xué)期實(shí)驗(yàn)...〈/span＞〈/li＞

〈li＞〈span＞關(guān)于開展實(shí)訓(xùn)室期末檢查通知〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關(guān)于開展實(shí)訓(xùn)室期中檢查通知〈/span＞〈/li＞

〈/ul＞〈/div＞

〈/div＞

〈div class="ltb1_b"＞ 〈/div＞

〈/div＞

在mian.css文件中加入如下代碼：

#ltb{ float:left; width:662px; }

#ltb1{ text-align:left; width:662px;height:312px;}

#ltb1

h2{background-image:url(ltb1_t.gif);color:#F76900;fo nt-size:14px; font-weight:bold;padding-left:60px;padding-top:20px; height:47px;background-repeat:no-repeat; margin-bottom:0px;}

在右邊的DIV中加入代碼：

〈div id="rtb" ＞

〈div class="rtb1"＞

〈div class="rtb1_t"＞〈span class="rtb1_f1"＞實(shí)訓(xùn)實(shí)驗(yàn)室〈/span＞〈span class="rtb1_f"＞更多〈/span＞〈/div＞

〈div class="rtb1_m" ＞

〈ul＞

〈li＞〈img src="themes/rtb_pic1.gif"/＞〈/li＞

〈li＞〈img src="themes/rtb_pic2.gif"/＞〈/li＞

〈li＞〈img src="themes/rtb_pic3.gif"/＞〈/li＞〈/ul＞

〈ul＞

〈li＞藥學(xué)綜合實(shí)訓(xùn)實(shí)驗(yàn)室〈/li＞

〈li＞動(dòng)物房實(shí)驗(yàn)實(shí)訓(xùn)室〈/li＞

〈li＞化工原理實(shí)訓(xùn)室〈/li＞〈/ul＞

〈ul＞

〈li＞〈img src="themes/rtb_pic4.gif"/＞〈/li＞〈li＞〈img src="themes/rtb_pic5.gif"/＞〈/li＞

〈li＞〈img src="themes/rtb_pic3.gif"/＞〈/li＞〈/ul＞

〈ul＞

〈li＞天平實(shí)驗(yàn)實(shí)訓(xùn)室〈/li＞

〈li＞食品檢測實(shí)驗(yàn)實(shí)訓(xùn)室〈/li＞

〈li＞化學(xué)實(shí)驗(yàn)實(shí)訓(xùn)室〈/li＞〈/ul＞

〈/div＞

〈div class="rtb1_b"＞ 〈/div＞

〈/div＞

〈/div＞

在右邊的main.css中加入代碼：

#rtb{ float:right; width:280px; margin:0px;}

.rtb1{ width:282px;}

.rtb1_t{ background-image:url(rtb1_t.gif);font-size:12px; width:281px; height:26px;margin-bottom:0px; text-align:left;}

.rtb1_f1{ width:200px;padding-top:5px;font-weigh t:bold;color:#705c8c;

padding-left:17px; }

.rtb1_f{ color:#359bc6; font-weight:nomal;width:70px;padding-top:5px;padding-left:40px;}

.rtb1_m{ background-repeat:repeat-y;

background-image:url(rtb_m.gif); width:282px;margin-top:0px; padding:0px; }

.rtb1_m ul{width:250px; list-style-type:none;float:left; margin:0px; padding-left:8px;line-height:24px; }

.rtb1_m ul li{float:left; padding-left:5px;color:#989898; text-align:center; width:79px;padding-top:6px; }

圖文混搭之后的效果圖如下所示：

在這里，只給出“最新公告”和“實(shí)訓(xùn)實(shí)驗(yàn)室”這兩塊內(nèi)容。還可以在左邊的DIV中加入“管理制度”“實(shí)訓(xùn)基地”“技能鑒定”三個(gè)DIV，在右邊的DIV中加入“資料下載”“實(shí)訓(xùn)與實(shí)習(xí)”“高新技術(shù)考試”三個(gè)DIV。

4 上傳測試

本文中的網(wǎng)頁已通過測試運(yùn)行并發(fā)布到WEB服務(wù)器上測試。上傳后運(yùn)行正常；并在不同分辨率下都能夠正常顯示。

5 結(jié)束語

本文運(yùn)用了 DIV+CSS技術(shù)設(shè)計(jì)的網(wǎng)頁使用方便，兼容性好。但是DIV+CSS布局的網(wǎng)頁由于需要兼容各種瀏覽器，也有其不足的地方，主要表現(xiàn)在開發(fā)技術(shù)高，開發(fā)時(shí)間長，開發(fā)成本高。

[1] (美)Kynn Bartle．CSS入門經(jīng)典[M].北京:人民郵電出版社,2007.

[2] (加)Zoe Mickley Gillenwate.靈活 Web 設(shè)計(jì)[專著][M].北京:機(jī)械工業(yè)出版社,2009.

[3] 鄭寧寧.淺析 DIV+CSS網(wǎng)頁設(shè)計(jì)技術(shù)[J].山東省農(nóng)業(yè)管理干部學(xué)院學(xué)報(bào),2008.

[4] 車元媛.CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].科技信息,2011.

Discussion of Web Page Design Skills

DIV + CSS web page layout more and more widely used in web design, in this paper, DIV + CSS using method were detailed descripted through using of DIV + CSS technology to make a web pages.

DIV+CSS;Web design

TP393

A

1008-1151(2012)05-0015-03

2012-04-06

許佳南，揭陽職業(yè)技術(shù)學(xué)院教師。