基于DIV+CSS技術的網頁設計研究

2015-12-28 10:58鄒壽春閩西職業技術學院計算機系福建龍巖364021

綏化學院學報 2015年9期

鄒壽春（閩西職業技術學院計算機系福建龍巖 364021）

基于DIV+CSS技術的網頁設計研究

鄒壽春
（閩西職業技術學院計算機系福建龍巖 364021）

DIV+CSS技術日趨成熟，它已經廣泛應用于網頁設計中，并成為網頁布局的主流技術。文章介紹了DIV+CSS技術基礎及特點，并通過實例研究其使用規則和應用技巧。實踐證明，DIV+CSS技術在網頁布局中靈活實用，為提高網頁設計效率奠定堅實技術基礎。

DIV；CSS；網頁設計；布局

一、DIV+CSS技術基礎

傳統的html標簽中，既有結構標簽，也有表現標簽。用DIV+CSS技術設計網頁，是一次設計思維方式的轉變，其能使頁面的結構與表現相分離，這樣，同樣的內容與結構，就可以使用不同的CSS樣式實現不同的表現形式。通過定義CSS樣式的方法，可以在不更改頁面內容和結構的前提下，更換頁面的布局和表現效果［1］。

（一）DIV技術。DIV全稱為division，即“區分/劃分”的意思?！碊IV〉標簽是塊級元素，用來為HTML文檔內大塊的內容提供結構和背景。HTML文檔中的塊由對應的一組起始標簽〈DIV〉和結束標簽〈/DIV〉構成，其定位一般由〈DIV〉標簽屬性或引用CSS樣式實現。

DIV標簽定義的塊是可以被嵌套的，用于布局復雜的網頁。因此，這為網頁布局提供了有利技術支持。另外，在所構成的塊中，可以放置文字、圖像和表格等各種網頁元素，方便對網頁進行設計。

（二）CSS技術。

1.CSS基礎。CSS是Cascading Style Sheets的英文縮寫，中文翻譯為層疊樣式表，簡稱樣式表，它是W3C組織制定的，用于控制（加強）網頁內容顯示效果的一種標記性語言。樣式就是格式，用于設置顯示內容的樣式；層疊是指當在HTML文檔中引用多個定義樣式的樣式文件（CSS文件）時，若多個樣式文件間所定義的樣式發生沖突，將依據層次順序進行處理［2］。

CSS語法為：選擇器{屬性1：屬性值1；屬性2：屬性值2；……}

2.CSS選擇器類型。選擇器是用來定義CSS樣式的名稱，根據其構成形式不同，可分為基本型選擇器、特殊型選擇器兩類。其中，基本型選擇器有標簽選擇器、類選擇器和ID選擇器三種；特殊型選擇器主要由三類基本選擇器演變生成，主要有組合選擇器、群組選擇器、后代選擇器、子選擇器、相鄰選擇器、屬性選擇器、偽類選擇器和通配符選擇器。

（1）基本型選擇器介紹：

標簽選擇器：以HTML文檔標簽作為選擇器，文檔中對應標簽自動應用所定義屬性效果。例，p{color：blue；font-size：14px；…}

類選擇器：以“.”開頭，緊接一個由用戶自定義字符串，合在一起組成類選擇器。類選擇器使用極靈活，引用時只要設置對應標簽class屬性值即可。例，top{width：100％；height：26px；…}

ID選擇器：以“#”開頭，緊接一個由用戶自定義字符串，合在一起組成ID選擇器。由于id屬性的值在文檔中是唯一的，所以ID選擇器只能在文檔中被引用一次。例，#contain {width：780px；text-align：left；…}

（2）特殊型選擇器介紹：

組合選擇器：由兩個選擇器構成，第一個必須為標簽選擇器，第二個必須是類選擇器或者ID選擇器，兩個選擇器中間不能有空格。形如p.special{…}

群組選擇器：是CSS的一種簡化寫法，將定義了具有相同樣式的多個選擇器合并為一個樣式，選擇器間用“，”隔開。形如div，span，img{…}

后代選擇器：父代選擇器與后代選擇器間用空格分開，只有當標簽發生嵌套時，內層的標簽才能適用此樣式定義。形如pspan{…}

子選擇器：父代選擇器與子選擇器間用“〉”號分開，子選擇器只能控制最近的子元素。形如#main〉span{…}

相鄰選擇器：用“+”號分開，相鄰兩選擇器在文檔目錄結構樹中處同一層次，有共同的父元素。形如div+p{…}

屬性選擇器：可根據元素的屬性及屬性值來選擇元素。形如img［alt］{…}

偽類選擇器：主要有動態偽類、UI元素狀態偽類、Nth結構偽類三種［3］。形如a：active{…}

通配符選擇器：用于定義文檔中各種標簽的共同屬性。形如*{…}

3.CSS的引用方法。CSS樣式表按相對于文檔位置分為內部樣式與外部樣式，其被引用方法多樣，歸納起來有以下四種：行內式、內嵌式、鏈接式和導入式［4］。其中行內式及內嵌式引用的為內部樣式，鏈接式和導入式引用的為外部樣式。外部樣式是一單獨的文本文件（擴展名為.css），內容為定義好的所有CSS代碼。

方法一，行內式。作為標簽style屬性值的方式，直接定義在標簽行內。其使用方法簡單，但由于需要為各個標簽設置style屬性值，后期維護效率低，文檔篇幅大，因此行內式樣式表使用較少。例如，〈pstyle="color：#FF00FF；"〉…〈/p〉

方法二，內嵌式。將所有CSS樣式代碼集中在〈style〉和〈/style〉標簽內進行聲明，置于文檔頭部〈head〉與〈/head〉之間。此法僅適用于特殊頁面設置單獨的樣式風格，如用于定義整個網站風格，則操作及維護依然麻煩。例如，〈style type="text/css"〉#top1{font-weight：bold； }…〈/style〉

方法三，鏈接式。在文檔頭部〈head〉與〈/head〉之間，用〈link〉鏈接外部樣式文件。這種方法實現html文檔與CSS代碼完全分離，且外部樣式文件可以被多個頁面引用，后期維護容易實現、效率高，因此這種方法使用頻率最高。例如，〈linkhref="外部樣式表文件名.css"rel="stylesheet" type="text/css"〉。其中，href用于定義CSS文件的URL［5］，指明外部樣式相對路徑；rel="stylesheet"定義在網頁中使用外部樣式表；type="text/css"定義文件的類型為樣式表文件。

方法四，導入式。在文檔頭部采用@import方式導入外部樣式表，當html文檔初始化時，才導入外部樣式表到html文檔內，作為文件的一部分，此時類似內嵌樣式表的效果。例如，@import url（“外部樣式表文件名.css”）。

4.CSS的優先級別。在一個網頁文檔中，可能會用到多種樣式表引用方法，瀏覽器在執行樣式效果時，按樣式表的優先級及樣式疊加原則實現。一般原則是：最接近目標的樣式優先級最高；高優先級樣式將繼承低優先級樣式未重疊定義，但覆蓋重疊的定義。優先級如圖1所示：

圖1 CSS的優先級別

（三）DIV+CSS布局方法。

1.DIV+CSS盒模型。盒模型將頁面中的每個元素看做一個矩形框，這個框由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。網頁就是由許多個盒子通過不同的排列方式（縱向排列、橫向排列和嵌套排列）堆積而成［6］。

圖2 CSS盒子模型

2.DIV+CSS定位。定位是網頁布局的最重要的技術，CSS定位通過position屬性的值實現，屬性值有以下4種，分別為：static、relative、absolute、fixed。

static：靜態定位；為默認值，為無特殊定位，對象遵循HTML定位規則，此時盒子按照普通布局在頁面上顯示。

relative：相對定位；使用該屬性值時盒子仍然是普通布局，占據它所在的位置，在計算定位的時候，才通過left，right，top，bottom等屬性，讓這個盒子相對于它的原始起點進行移動后顯示。

absolute：絕對定位；絕對定位的盒子的位置相對于最接近的一個具有定位屬性的父塊進行的，如果沒有已定位的父塊，則相對于body對象，即瀏覽器窗口。絕對定位的元素拋開了文檔排列布局，相當于游離于文檔頁面之上，所以各對象會相互覆蓋，而其層疊順序可由z-index屬性改變。

fixed：固定定位；與absolute相似，但它僅相對于瀏覽器窗口進行定位，固定在瀏覽器的某個位置，不隨滾動條的滾動而滾動。

3.盒子浮動。采用上述定位方式，盒子并未脫離文檔流的控制，排列仍受很大限制。而用用盒子浮動技術，能使盒子脫離文檔流向左或向右移動，排列方式多樣，布局靈活方便。浮動的元素會生成一個塊級框，它可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。盒子浮動通過設置float屬性值實現，屬性值有以下3種：none、left、right。其中none表示不浮動；left表示浮在左邊；right表示浮在右邊。

有時，浮動使用不當會導致頁面出現錯位的情況，這時可以使用清除浮動的方法。清除浮動不僅能夠解決頁面錯位的問題，還能解決子級元素浮動導致父級元素背景無法自適應子級元素高度的問題。清除浮動通過設置clear屬性值實現，屬性值有以下4種：none、left、right、both。其中none表示允許兩邊都可以有浮動對象；left表示不允許左邊有浮動對象；right表示不允許右邊有浮動對象；both表示不允許有浮動對象。

（四）DIV+CSS技術優勢。與傳統網頁設計技術相比，DIV+CSS技術有明顯優勢。

1.頁面瀏覽速度更快。由于將大部分頁面代碼寫在了CSS當中，使得頁面體積容量大大縮減。

2.保持站點風格一致性。使用DIV+CSS的技術，將所有頁面用同一CSS文件控制，避免了不同區域或不同頁面體現出的效果偏差。

3.網站改版與維護更方便。維護人員只需修改外部樣式文件內容即可，提高了工作效率。

4.更好地被搜索引擎收錄。由于樣式表寫入了獨立CSS文件中，這就使得網頁中正文部分更為突出明顯，便于被搜索引擎采集收錄。

5.更利于團隊分工合作。采用DIV+CSS技術，使內容和表現分離，在團隊開發中更容易分工合作而減少相互關聯性。

二、頁面布局設計與實現

在網頁設計制作中，對頁面進行布局非常重要，這是合理安排頁面內容，突出重點信息的前提。此處通過實例研究用DIV+CSS技術進行頁面布局與實現的過程。下圖為某網頁布局結構圖：

圖3 CSS頁面布局結構

網頁布局采用上中下型結構，將頁面分成頭部（header）、主體（mainer）和底部（footer）三大內容塊，然后對每塊再分小塊。在設計時，首先生成兩個文件：index.htm l和sty.css，采用鏈接式方法將引外部樣式表sty.css引用到index.htm l文檔中。以下是實現此布局代碼。

（一）網頁文件index.html內代碼。