淺談網(wǎng)頁布局技術(shù)的教學實踐

2　網(wǎng)頁布局課程的教學

在第二學期開設的“Div+CSS布局”的課程中，要求學生掌握HTML和CSS的基本語法，能夠熟練地使用Div進行頁面整體布局，并添加網(wǎng)頁對象；能夠使用CSS樣式技術(shù)美化頁面。Div+CSS布局技術(shù)相對于表格布局而言，存在布局方法不直觀，不容易掌握的缺點，學生會因此在學習的過程中困難重重［1］。

HTML代碼再加上CSS樣式中多樣的屬性設置，內(nèi)容繁多，不易記憶。在“Div+CSS布局”的教學中，教師需要對HTML代碼的常用標簽進行復習再練習，同時還需要讓學生充分認識到，并不是只有DIV標簽能作為容器來安排布局。其實在XHTML頁面中，所用的標簽大部分是容器，可被當作容器使用。頁面上的每個容器都占有一定的位置，有一定的大小。頁面上的每個容器都會影響其他容器的排布，它們相互作用，形成一個頁面的布局。如 標簽，對頁面元素的布局會起到很大作用［2］。針對CSS樣式，教師會利用Dreamweaver中設置CSS樣式時，各種屬性的英文顯示界面，在不斷練習中，強化學生對margin，padding這些屬性的英文書寫的印象，并且鼓勵學生直接在代碼視圖直接編寫HTML代碼。

通過兩門課程的學習，學生應該能夠在利用現(xiàn)有圖像素材和頁面效果圖，使用DIV標簽采用盒模型在網(wǎng)頁中排版定位；再使用CSS樣式控制DIV標簽和其他網(wǎng)頁元素的樣式。但是，大部分學生學習主動性不強，往往是在一個假期過后，就把50%的知識“還”給老師。培養(yǎng)學生網(wǎng)頁前端開發(fā)的能力，應該加強實戰(zhàn)練習，在練習中發(fā)現(xiàn)問題解決問題，進而考慮將Div+CSS布局的內(nèi)容融入各學期的相關(guān)課程中。

3　網(wǎng)頁布局技術(shù)在后續(xù)課程的使用

第三個學期開設專業(yè)課程“網(wǎng)頁界面設計”。主要是通過學習網(wǎng)頁色彩搭配，網(wǎng)頁元素的設計、排版與布局，形象設計，廣告?zhèn)髅降榷鄠€方面的理論知識并結(jié)合實例練習，最終進行常見網(wǎng)站類型頁面效果圖的設計與制作。如何在課程中加入Div+CSS布局的內(nèi)容呢？

前期的課程主要要求學生掌握Dreamweaver軟件以及Div+CSS布局的技術(shù)，學生缺乏網(wǎng)頁布局、色彩美學、美工設計等專業(yè)知識，導致制作的網(wǎng)頁布局和版面不佳，缺乏設計美感。

而通過“網(wǎng)頁界面設計”課程的深入學習，逐步讓學生掌握所缺的專業(yè)知識，又已具備了一定的布局技術(shù)水平，需要充分地結(jié)合起來。通過實例練習，學生制作出網(wǎng)頁效果圖；教師講授切片、圖像導出等相關(guān)知識；通過導出的圖像，在Dreamweaver中進行Div的布局，CSS樣式美化，并最終完成網(wǎng)頁。在Div布局的授課中，教師要求學生對各類標簽的使用和CSS樣式的設置等做到更規(guī)范、更有效。例如，在命名ID和類名時，要定義有意義的名稱；不要過度地使用Div標簽；將CSS樣式存放成不同的*.css文件，以便各級頁面、樣式的統(tǒng)一管理等。

學生通過一系列操作的完成，了解到各環(huán)節(jié)都是相互影響或是相輔相成的。例如，網(wǎng)頁效果圖細節(jié)不注意，切圖后導出圖像，尺寸不一，容易產(chǎn)生混亂的布局效果；圖像格式使用哪一種導出格式，會影響到圖像在瀏覽器的瀏覽效果甚至顯示；CSS樣式可以實現(xiàn)水平填充的漸變背景，因而在效果圖只需要切一張細長的、有漸變效果的圖片即可，有效地控制網(wǎng)頁文件量。通過這樣一系列的練習，能將“Dreamweaver網(wǎng)頁制作”“Div+CSS布局”和“網(wǎng)頁界面設計”3門課程，所要求掌握的技能付諸實踐。從學生的反應來看，實踐效果較好，有效地避免學生“學一門忘一門”的情況。

第四和第五學期開設專業(yè)課程“專業(yè)項目Ⅰ”和“專業(yè)項目Ⅱ”。這兩門課程綜合性強、實用性強。主要是通過綜合如網(wǎng)頁三劍客、Photoshop，Javascript等課程所學，重點培養(yǎng)學生Web前端網(wǎng)頁制作的技能。在實際教學中，以案例為主線，以項目網(wǎng)站建設為目標，以工作過程進行課程內(nèi)容整合［3］。每個項目網(wǎng)站都體現(xiàn)了一個完整網(wǎng)站的建設過程，在網(wǎng)站建設的過程中把靜態(tài)網(wǎng)頁開發(fā)的知識和技能融入教學中，將學習目標和工作目標有機地結(jié)合在一起［4］。隨著行業(yè)對制作HTML5和CSS3技術(shù)人才的需求增多，在課程中會添加使用HTML5和CSS3布局以及JavaScript和jQuery特效的制作，瀏覽器bug（電腦系統(tǒng)中未被發(fā)現(xiàn)的缺陷或問題）和bug修復，解決瀏覽器兼容性及優(yōu)化等實用技巧。并且要求學生完全使用WebStorm進行HTML5的編輯。

以課程其中一個項目網(wǎng)站為例。將廣西金沛教育的官方網(wǎng)站（http：//www.gxjpjy.com/）進行頁面改版。網(wǎng)站各級頁面存在版式過長，插圖變形，使用表格布局等問題。按照網(wǎng)頁設計的基本流程，只要求學生完成首頁和二級頁面。將課程分解為7個子項目：重新規(guī)劃網(wǎng)站，整理素材，分析并重新設計，制作效果圖，布局美化各級網(wǎng)頁并鏈接，添加特效，測試?？傆?2課時。

將HTML5和CSS3的新知識融入項目中。要求學生整合原網(wǎng)站所有素材，重新規(guī)劃并設計制作效果圖。然后在布局網(wǎng)頁部分，要求所有網(wǎng)頁使用HTML5布局，并在WebStorm中編寫代碼。教師指導學生在網(wǎng)頁中添加多種CSS3新增的效果。比如將網(wǎng)頁元素制作為圓角，制作多重頁面背景、下拉菜單，給相關(guān)圖片添加鼠標懸停的過渡效果，給標題添加陰影等。經(jīng)過整個流程的實踐操作，學生基本上都解決了原網(wǎng)站頁面存在的問題，且較原網(wǎng)站，頁面效果、動態(tài)效果、交互效果要優(yōu)。

網(wǎng)頁布局仍然是實踐項目網(wǎng)站的重要部分。隨著5個學期網(wǎng)頁布局知識的持續(xù)學習和不斷地練習，學生不再是看著網(wǎng)頁效果圖無從下手的狀態(tài)，基本上都能獨立完成各級頁面的整體布局。但是，學生對細節(jié)往往容易忽略或者缺乏對細節(jié)的處理技巧。例如，表單對象文本框、菜單和按鈕的美化；項目列表符號設置為圖像后，與列表項中文字的垂直方向?qū)R效果；多種鏈接對象的定位和美化效果設置，等等。對于市面上的網(wǎng)站中典型的頁面效果、樣式效果，在課堂上也向?qū)W生介紹其制作技巧。

通過對教學內(nèi)容及教學方法的改革，學生的網(wǎng)頁布局技能得到了循序漸進地訓練。布局由一張網(wǎng)頁到整個網(wǎng)站，網(wǎng)站項目由簡單到復雜，HTML，CSS代碼由陌生到熟悉，技能由生疏到熟練。網(wǎng)頁布局知識在各個學期的滲透，使學生既掌握了堅實的理論知識，又增強了實際動手能力，從而在今后的工作中能夠?qū)W以致用，解決實際問題。

［1］孟慶軒.“網(wǎng)頁設計”課程中DIV+CSS布局技術(shù)的教學［J］.計算機時代，2013（9）：59-60.

［2］聞立鷗.基于DIV+CSS的技能實訓教學實踐［J］.中國現(xiàn)代教育裝備，2014（15）：84-86.

［3］張學林，段珊，胡波，等.案例教學法在網(wǎng)頁設計與制作教學中的應用［J］.改革開放，2009（6）：17.

［4］馮燕.“網(wǎng)頁前端開發(fā)”課程整體教學設計研究［J］.高教學刊，2015（15）：83-84.

Analysis on the teaching practice of Web page layout technology

Li Min
（Guangxi Technological College of Machinery and Electricity， Nanning 530007， China）

With the dedicating promotion ofW3C（World Wide Web Consortium）to the Internet standard， Div + CSS layout techniques has become an important part of technology in processes of web design and development. In the process of teaching， we need solve the problem of how to make students deeply understand the diffculties of web page layout and being able to apply their knowledge. In this paper， Div + CSS layout techniques of teaching methods and contents were discussed.

web page layout； CSS HTML； teaching

李敏（1980— ），女，廣西陸川，講師；研究方向：HTML5，UI設計。