淺談網頁頁面設計技巧

許佳南

(揭陽職業技術學院，廣東 揭陽 522000)

淺談網頁頁面設計技巧

許佳南

(揭陽職業技術學院，廣東 揭陽 522000)

DIV+CSS網頁布局越來越多的被廣泛應用于網頁設計中，文章通過使用DIV+CSS技術制作一個網頁頁面詳細說明DIV+CSS的使用方法。

DIV+CSS；網頁設計

隨著互聯網與WEB技術的發展，利用DIV+CSS設計網站的設計方式正逐步成為制作網站的主力軍之一，DIV+CSS技術作為制作網頁的重要組成部分，已經成為網頁設計中必不可少的要素。本文將詳細介紹如何使用DIV+CSS制作一個網頁。

1 布局設計

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

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

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

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

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

2 主要設計部分

在VS.NET開發環境中，新建index.htm，并創建css文件，命名為main.css，將樣式表寫在一個獨立的文件中。

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

3 在main的DIV中的各個DIV中插入相應的內容

在導航的DIV中插入相應的內容

〈div id="nav"＞

〈ul＞

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

〈li＞〈a href=”#”＞實驗系統〈/a＞ 〈/li＞

〈li＞〈a href=”#”＞實驗實訓室〈/a＞ 〈/li＞

〈li＞〈a href=”#”＞實訓基地〈/a＞ 〈/li＞

〈li＞〈a href=”#”＞實訓與實習〈/a＞〈/li＞

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

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

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

〈/ul＞

〈/div＞

同時我們在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中插入相應的內容

〈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" /＞ 省教育廳巡視員李小魯同志蒞臨我院指導工作〈/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;" /＞指導工作〈/span＞  10月27日，省教育廳巡視員李小魯同志蒞臨我院檢查指導工作。李小魯巡視員一到學院就詳細了解我院新征規劃用地的進展情況，親臨實訓中心視察，并召開調研會。...〈/div＞

〈div class="ltb1_mr"＞

〈ul＞

〈li class="ltb1_mr_f"＞〈span＞揭陽職業技術學院參加省職業院校技能大賽〈/span＞ 〈/li＞

〈li＞〈span＞關于參加 2012年度全國職業院校技能大賽〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關于開展實訓室檢查通知〈/span＞〈/li＞

〈li＞〈span＞ 實 訓 中 心 2011-2012 下 學 期 課 表〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關于做好 2011-2012 學年度第一學期實驗...〈/span＞〈/li＞

〈li＞〈span＞關于做好 2011-2012學年度第二學期實驗...〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關于做好 2011-2012 學年度第一學期實驗...〈/span＞〈/li＞

〈li＞〈span＞關于開展實訓室期末檢查通知〈/span＞〈/li＞

〈li class="ltb1_mr_f"＞〈span＞關于開展實訓室期中檢查通知〈/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"＞實訓實驗室〈/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＞藥學綜合實訓實驗室〈/li＞

〈li＞動物房實驗實訓室〈/li＞

〈li＞化工原理實訓室〈/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＞天平實驗實訓室〈/li＞

〈li＞食品檢測實驗實訓室〈/li＞

〈li＞化學實驗實訓室〈/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; }

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

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

4 上傳測試

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

5 結束語

本文運用了 DIV+CSS技術設計的網頁使用方便，兼容性好。但是DIV+CSS布局的網頁由于需要兼容各種瀏覽器，也有其不足的地方，主要表現在開發技術高，開發時間長，開發成本高。

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

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

[3] 鄭寧寧.淺析 DIV+CSS網頁設計技術[J].山東省農業管理干部學院學報,2008.

[4] 車元媛.CSS技術在網頁設計中的應用研究[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

許佳南，揭陽職業技術學院教師。