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

楊明學(xué)

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

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

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

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

網(wǎng)頁布局是指以一定形式或標(biāo)準(zhǔn)對(duì)頁面中的信息進(jìn)行加工組織，從而使網(wǎng)頁易于閱讀并達(dá)到一定的審美標(biāo)準(zhǔn)，使之符合大多數(shù)瀏覽者的習(xí)慣[1]。網(wǎng)頁由文本、各種類型的圖像、動(dòng)畫、列表、超級(jí)鏈接、表單等網(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)布局、“口”型布局、“三”型布局、對(duì)稱對(duì)比布局、“同”字型布局、“國(guó)”字型、“匡”字型、海報(bào)型和Flash型網(wǎng)頁等各種布局方式。使用Dreamweaver CS5作為網(wǎng)頁編輯的工具，實(shí)現(xiàn)網(wǎng)頁布局主要有表格、框架及CSS+DIV三種方法。

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

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

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

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

三、總結(jié)

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

參考文獻(xiàn)：

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

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

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

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

2015（10）：159

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

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