淺談網(wǎng)頁設(shè)計中頁面布局的教學(xué)

楊明學(xué)

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

【關(guān)鍵詞】網(wǎng)頁設(shè)計 頁面布局 CSS+DIV

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

一、網(wǎng)頁布局在網(wǎng)頁設(shè)計中的重要性

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

二、網(wǎng)頁布局的教學(xué)方法

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

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

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

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

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

三、總結(jié)

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

參考文獻：

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

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

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

[3]翁敏峰.《網(wǎng)頁設(shè)計技術(shù)》教學(xué)方法探討[J].福建電腦，

2015（10）：159

[4]邢玉鳳，張曉燕.基于 DIV + CSS 網(wǎng)頁布局的教學(xué)難點

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