楊明學

【摘要】網頁布局影響著網頁的可瀏覽性、實用性及下載速度。在網頁設計課程中，網頁布局是課程的重點內容。在教學過程中，從學生的學習情況和課程內容和需求出發(fā)，采用實用的案例講解表格、框架、CSS+DIV三種網頁布局，并對三種方法布局網頁的優(yōu)缺點進行比較。

【關鍵詞】網頁設計 頁面布局 CSS+DIV

隨著互聯(lián)網應用的普及，互聯(lián)網+在各行各業(yè)中得到了廣泛的應用，社會對網站設計人員及網頁美工的需求量也在增加。《網頁設計》是培養(yǎng)網頁設計人員的基礎課程，是計算機網絡專業(yè)和設計類專業(yè)的專業(yè)基礎課。在《網頁設計》課程的教學中，網頁的布局方法是本課程的重點和難點內容，針對網頁布局教學環(huán)節(jié)的特點和學生的學習情況，本人從教學內容、教學手段及教學方法等方面對教學進行了設計和改進。

一、網頁布局在網頁設計中的重要性

網頁布局是指以一定形式或標準對頁面中的信息進行加工組織，從而使網頁易于閱讀并達到一定的審美標準，使之符合大多數(shù)瀏覽者的習慣[1]。網頁由文本、各種類型的圖像、動畫、列表、超級鏈接、表單等網頁元素構成，網頁布局合理，以最適合用戶瀏覽的方式展示圖片和文字等網頁元素，不僅吸引瀏覽者便于瀏覽，還可以加快網頁的下載速度，提升網站的品質。

二、網頁布局的教學方法

根據網站的類型不同以及網頁呈現(xiàn)的內容不同，網頁常用的布局有T型結構布局、“口”型布局、“三”型布局、對稱對比布局、“同”字型布局、“國”字型、“匡”字型、海報型和Flash型網頁等各種布局方式。使用Dreamweaver CS5作為網頁編輯的工具，實現(xiàn)網頁布局主要有表格、框架及CSS+DIV三種方法。

表格是網頁中常用的信息展示方式，是在HTML頁面中排列數(shù)據與圖像的非常有力的工具。表格可以用來布局網頁，也可以在網頁上以一個實際的表格呈現(xiàn)。在教學中采用兩種表格實例，第一種實例是在網頁上顯示一個具有實際意義的表格，如在網頁上設計一個個人簡歷，在簡歷的設計過程中，引導學生著重理解掌握表格的基本操作方法，理解表格的絕對寬度、相對寬度、邊框粗細、單元格間距、單元格邊距以及對齊方式、背景等相關屬性的意義及設置方法，掌握嵌套表格的使用方法；第二種實例是用表格設計網頁布局，設計一個服裝銷售網站的主頁面，在主頁面的設計過程中，講述利用表格對網頁上的文本和圖像進行布局及設計欄目的方法。通過該主頁的設計，使學生理解在實際網頁布局中，如何利用表格控制頁面元素在頁面上的位置，通過設置表格的寬度、高度和彼此之間的比例大小等，把不同的頁面元素分別“框”在不同的單元格之中實現(xiàn)對頁面元素的準確定位，以達到頁面的平衡，合理地布局頁面。在講授過程中將表格和該表格自動生成的HTML代碼進行比較，使學生能更好地理解前面章節(jié)中講述的HTML語言中表格部分的代碼，并能利用修改HTML代碼的方法快速地修改設置表格的屬性。

框架是實現(xiàn)頁面布局的又一種方法，框架網頁是—種特殊的HTML網頁，它可將瀏覽器窗口分成不同的區(qū)域，稱為框架區(qū)域，每個區(qū)域都可以顯示不同的網頁。在這部分的教學中，我們選擇設計電子書的閱讀界面為實例，建立一個上方固定，左側嵌套的框架，在底部增加一個框架，此時瀏覽器窗口被分成了四個框架區(qū)域，上方框架用于顯示書名等相關信息，底部框架用于顯示書的版權信息，左側框架用于書籍的導航設計，右側框架用于顯示具體章節(jié)的內容，當左側框架的導航切換時，右側框架中顯示的章節(jié)內容隨之切換。該實例中融入了框架的建立，修改、保存及框架的應用等相關概念，通過該實例將利用框架布局網頁的方法完整地呈現(xiàn)給學生。

CSS+DIV頁面布局是將DIV標簽放在頁面上作為容器，網頁元素添加到DIV標簽中，DIV可以添加到網頁的任何位置，在添加DIV標簽時，同時設計該標簽的CSS樣式，通過設置CSS樣式，設定DIV在網頁中的精確位置，同時對網頁元素進行排版、修飾、美化。為了和表格布局頁面的方法相比較，在教學案例上，仍然選擇服裝銷售網站的首頁，利用CSS+DIV布局網頁的方法重新設計該頁面。將整個網頁劃分成top、bottom、main1、main2共四個模塊，每個模塊都采用CSS+DIV實現(xiàn)，網頁共需要添加四個DIV標簽，每個DIV標簽都需設置其CSS樣式。DIV的樣式是由CSS來控制的，CSS樣式的語法、選擇器的類型及使用方法是這部分的難點，在網頁上添加DIV標簽時，講述設置該DIV的CSS樣式選擇器的類型，CSS的語法，CSS的分類中的具體項目的設置，便于學生理解掌握如何利用CSS控制頁面中細節(jié)，實現(xiàn)網頁的布局。

表格、框架、CSS+DIV是網頁設計常用的布局方法，三種布局方法各有其優(yōu)缺點。利用表格布局頁面，需要修改表格的屬性對單元格中定位的網頁元素進行修飾，網頁元素和元素的修飾美化是融合在一起的，不能相互獨立，不利于后期對網站的維護；CSS+DIV布局將頁面獨立分成了更多的區(qū)域，當打開頁面時，是逐層加載的，這不像表格嵌套那樣將整個頁面套在一個大表格中，使用了CSS+DIV布局方式，后期的維護和修改變得更加方便，也不會破壞到頁面中其他部分的布局樣式。三種布局方法中，CSS+DIV是目前主流的網頁布局方法，但在網頁布局中，三種方法不是孤立的，是相互融合的，在使用框架或CSS+DIV布局頁面時，整體的方法是利用框架或CSS+DIV，網頁的具體元素的定位還需用表格實現(xiàn)。

三、總結

網頁布局是網頁設計課程的重點和難點內容，在這部分的教學過程中，貫穿使用案例教學的方法，從簡單到復雜，從部分到整體，將教學內容涉及的概念及操作融入到案例中，提出問題、分析問題、解決問題，分解教學難點，使學生既掌握了網頁布局的實現(xiàn)方法，又能舉一反三，提升了學生的網頁設計技能。

參考文獻：

[1]崔利.淺談網頁設計中頁面的布局方式[J].軟件開發(fā)

[2]王愛菊，楊金川. DIV+CSS布局在《網頁制作》課程中的教

學改革探究[J].無線互聯(lián)科技，2015（9）：116-117

[3]翁敏峰.《網頁設計技術》教學方法探討[J].福建電腦，

2015（10）：159

[4]邢玉鳳，張曉燕.基于 DIV + CSS 網頁布局的教學難點

分析[J].科技展望，2016（15）：220