基于DIV+CSS技術的網頁設計優化方法

當今時代的網頁設計主流方向大致趨向于“內容”與“形式”分離的靜態設計，在網站重構的熱潮中前進的DIV+CSS技術的網頁設計優化為許多的網頁設計者帶來了更為方便的享受，DIV+CSS是以DIV來控制網站模塊布局、CSS控制頁面內容表現形式的的新型網頁設計技術。但在實際操作中，DIV+CSS技術還存在著一些較為棘手的問題。因此，設計者在運用DIV+CSS技術進行網頁設計時，要充分考慮到其可行性，對其進行最大程度的優化，使其在網頁設計中能夠發揮最大化功效。

1 DIV+CSS的不足

1.1 瀏覽器兼容問題

DIV+CSS技術的不成熟，導致設計者在網頁設計中常常出現自己電腦顯示的網頁效果與其他機器上的網頁效果有差異的情況，造成這種差異的原因往往是由于不同的電腦瀏覽器的兼容效果不一樣，如IE6、Firefox、Mozilla等瀏覽器對、CSS（級聯樣式表）的解析程度不一致，很容易造成網頁頁面效果的差異。

1.2 操作難度大

DIV+CSS的技術復雜度相比table而言要更難操作，特別是對于網頁設計代碼的初學者來說，設計思維已經固定后很難接受CSS先定義后使用的操作樣式，在這種情況下如果讓其使用DIV+CSS操作技術反而只能取得相反效果。

2 基于DIV+CSS技術的網頁設計優化方法

2.1 慎用DIV塊

在進行布局時，無需在對象中重復使用同一個DIV模塊。列表本身為完整對象的話就可以直接使用樣式，如圖1中的兩段代碼。顯然其最終顯示效果是完全一致的，但右邊代碼看起來要比左邊更為簡潔明了。

除了直接使用樣式之外，還要盡可能減少DIV的嵌入與套用，多層嵌套的DIV布局會破壞DIV+CSS優越性，還容易造成瀏覽器不兼容問題。因此，設計者在進行DIV+CSS技術的網頁設計時，要充分使用簡單TABLE設計來讓網頁代碼變得更為整潔。

2.2 盡量使用外部CSS樣式

CSS樣式表主要特點體現在頁面的美化與風格的統一上，但設計者在對網頁代碼進行美化時要注意代碼的結構性，不能采用一個DIV用一個樣式或者采用獨立的樣式表來增加代碼復雜度，應盡量使用外部CSS樣式，將效果一樣的樣式定義為多次使用，并且在頁面存在差異的地方進行適當的獨立樣式代碼編寫。

2.3 使用子選擇器

在簡化CSS選擇器時，利用子選擇器的樣式定義能夠有效簡化代碼，如：

以上這段代碼的CSS定義為：

利用子選擇器來設計和簡化代碼，則可以用下面的代碼替代：

CSS樣式定義為：

將“#nav{}”設為主選擇器使用，后面的子選擇器則會自動尋找相對應的樣式，無需重復定義新樣式。

2.4 id與class靈活搭配

很多設計者在提高CSS選擇器的利用率通常會采用class來取代id。盡管class用途要比id靈活和廣泛，但id由于具備強制唯一性特征，更能夠讓使用者快速簡便的通過id檢索到所需模塊，其網頁結構構建顯然要高于class。因此在進行CSS選擇器使用時，要做到id與class靈活搭配，將id運用在網頁的布局和設計元素中方便使用者檢索和翻閱，同時將class運用在文字排版中降低樣式復雜度。

3 結語

隨著網絡信息技術的發展，現如今的網頁設計所采用的“內容”與“樣式”分離設計方法式網頁代碼的設計變得更為簡潔，使用DIV在HTML中編寫內容和結構，再采用CSS建立代碼樣式的設計方法既能夠有效節省網頁空間，對其進行重復利用，還能夠減少代碼的設計難度，給設計者帶來更為便捷的操作體驗。在技術的不斷優化下，基于DIV+CSS技術之下的網頁設計一定能夠實現更好的發展。

[參考文獻]

[1]吳建華.淺談DIV+CSS技術[J].福建電腦，2011，27（11）：74-75.

[2]楊米娜.DIV+CSS技術在網頁布局中的應用研究[J].電腦開發與應用，2012，25（4）：64-66，69.