王仲滿

【摘要】《網(wǎng)頁設(shè)計(jì)》是技工院校計(jì)算機(jī)應(yīng)用專業(yè)的必修課，隨著網(wǎng)頁設(shè)計(jì)前端技術(shù)的不斷更新，DIV+CSS布局在該課程中的重要性越來越突出。本文介紹DIV+CSS網(wǎng)頁布局的優(yōu)勢，闡述教學(xué)現(xiàn)狀，提出新的教學(xué)方式和學(xué)習(xí)方式。

【關(guān)鍵詞】DIV+CSS 網(wǎng)頁設(shè)計(jì) 教學(xué)方式 學(xué)習(xí)方式

【中圖分類號(hào)】G71 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】2095-3089（2018）20-0252-01

一直以來，《網(wǎng)頁設(shè)計(jì)》是技工院校計(jì)算機(jī)應(yīng)用、數(shù)字媒體等專業(yè)的必修課。在計(jì)算機(jī)相關(guān)專業(yè)畢業(yè)生的就業(yè)方向中，網(wǎng)頁設(shè)計(jì)師是一個(gè)熱門的就業(yè)崗位。在提倡工學(xué)結(jié)合的技工教育的背景下，我們可以結(jié)合網(wǎng)頁設(shè)計(jì)師崗位的實(shí)際要求開展該課程的教學(xué)。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)頁設(shè)計(jì)的前端技術(shù)在不斷地更新，DIV+CSS網(wǎng)頁布局成為網(wǎng)頁設(shè)計(jì)的主流方向，因此，它已成為《網(wǎng)頁設(shè)計(jì)》課程的核心技能要求。在多元化的教育環(huán)境下，新的教學(xué)方式和學(xué)習(xí)方式是值得我們研究的課題。

1.DIV+CSS網(wǎng)頁布局優(yōu)勢

采用DIV+CSS網(wǎng)頁布局與傳統(tǒng)的表格布局相比，有許多的優(yōu)勢：

（1）頁面加載速度快

傳統(tǒng)的表格布局必須等表格加載完才顯示相應(yīng)的網(wǎng)頁內(nèi)容，而DIV+CSS網(wǎng)頁布局是由一個(gè)個(gè)松散的DIV盒子組成，它可以實(shí)現(xiàn)邊加載邊顯示內(nèi)容。

（2）內(nèi)容與外觀相分離

該布局方式實(shí)現(xiàn)了內(nèi)容和外觀相分離，不僅提高了網(wǎng)頁設(shè)計(jì)的效率，而且使網(wǎng)頁的維護(hù)變得更加容易。

（3）有利于搜索引擎搜索

由于該布局方式內(nèi)容與外觀相互獨(dú)立，搜索引擎在檢索的時(shí)候可以避開外觀部分的干擾，做好內(nèi)容部分的檢索。

2.DIV+CSS網(wǎng)頁布局的教學(xué)現(xiàn)狀

目前，很多教材把DIV+CSS網(wǎng)頁布局作為《網(wǎng)頁設(shè)計(jì)》課程中的一個(gè)章節(jié)，再加上技工院校的學(xué)生基礎(chǔ)相對(duì)薄弱，對(duì)英文代碼產(chǎn)生畏懼心理。因此，在教學(xué)中不是特別重視代碼編寫能力的培養(yǎng)。更多的是停留在利用網(wǎng)頁設(shè)計(jì)軟件（如：Dreamweaver）快速地使用表格布局進(jìn)行網(wǎng)頁設(shè)計(jì)。由于DIV+CSS網(wǎng)頁布局的特殊性，這一章節(jié)并沒有作為重點(diǎn)來處理，而在企業(yè)中該布局已成為主流，因此，我們所培養(yǎng)的學(xué)生與實(shí)際就業(yè)市場的需求存在較大的差距。如果我們繼續(xù)把教學(xué)重點(diǎn)放在表格布局上，必然會(huì)導(dǎo)致教學(xué)案例無法做到與企業(yè)項(xiàng)目一致。因此，我們要做的第一步就是要走進(jìn)企業(yè)，調(diào)查目前市場的需求，對(duì)教學(xué)內(nèi)容進(jìn)行改革。

另外，網(wǎng)頁設(shè)計(jì)軟件大大提高了網(wǎng)頁設(shè)計(jì)的效率，正是因?yàn)榭焖佟⒈憬?，很多學(xué)生更依賴于此類軟件，導(dǎo)致不注重代碼編寫能力的提升。而作為網(wǎng)頁設(shè)計(jì)師，編寫代碼是必備的技能要求，因此，在教學(xué)中我們更應(yīng)該注重代碼編寫能力的培養(yǎng)。

3.教學(xué)方式轉(zhuǎn)變

在教學(xué)過程中，很多老師比較注重教學(xué)方法的改革，實(shí)訓(xùn)課比較提倡任務(wù)驅(qū)動(dòng)、項(xiàng)目教學(xué)法等等。針對(duì)DIV+CSS網(wǎng)頁布局的教學(xué)，我們可以在這些教學(xué)方法的基礎(chǔ)上對(duì)教學(xué)方式做進(jìn)一步的改革和創(chuàng)新。

（1）由設(shè)計(jì)視圖向代碼視圖轉(zhuǎn)變

傳統(tǒng)軟件的簡便操作已無法滿足工作的實(shí)際需要，向編寫代碼轉(zhuǎn)變已成為必然的趨勢。為了避免學(xué)生的產(chǎn)生抵觸心理，我們可以借助Dreamweaver中的拆分視圖，做好從設(shè)計(jì)視圖到代碼視圖轉(zhuǎn)變的過渡。在真正實(shí)施代碼教學(xué)的過程中，讓學(xué)生遇到問題可以借助拆分視圖來解決，避免學(xué)生對(duì)代碼的學(xué)習(xí)失去信心。另外，該軟件編寫代碼具有智能提醒功能，大大降低了學(xué)習(xí)的難度。通過代碼的編寫，更有利于學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)原理的理解，尤其是CSS樣式的構(gòu)成。

（2）課程結(jié)構(gòu)的轉(zhuǎn)變

往往我們?cè)诮虒W(xué)中受教材的影響，形成固有的課程結(jié)構(gòu)：從單一的知識(shí)點(diǎn)的講解，再到最后綜合應(yīng)用。一般在了解HTML的基礎(chǔ)上，從CSS基礎(chǔ)到盒子模型，再介紹各種樣式類型。在前期的教學(xué)中，過多的時(shí)間用于講解單一的知識(shí)點(diǎn)，不利于學(xué)生形成綜合應(yīng)用的意識(shí)，并會(huì)降低學(xué)生學(xué)習(xí)的興趣。我們可以嘗試對(duì)一個(gè)完整的案例進(jìn)行任務(wù)分解，再通過子任務(wù)的技能要求對(duì)知識(shí)點(diǎn)進(jìn)行講解。這不僅使學(xué)生有明確的學(xué)習(xí)目標(biāo)，更重要的是理解新知識(shí)點(diǎn)的應(yīng)用。在掌握各知識(shí)點(diǎn)的基礎(chǔ)上，最終又回歸到綜合案例的應(yīng)用上，提高學(xué)生的綜合應(yīng)用能力。

（3）從單一課程到綜合課程轉(zhuǎn)變

在傳統(tǒng)的教學(xué)計(jì)劃中，我們都以課程為單位進(jìn)行設(shè)計(jì)，或者針對(duì)一個(gè)工作崗位開設(shè)幾門相關(guān)的課程。往往一門課程的獨(dú)立教學(xué)無法達(dá)到我們預(yù)想的與工作崗位相匹配的效果。DIV+CSS網(wǎng)頁布局，可以借助前期所學(xué)的Photoshop或者Fireworks相關(guān)技能，做好頁面設(shè)計(jì)、切圖、取色等等。這不僅能讓學(xué)生了解DIV+CSS網(wǎng)頁布局在真正網(wǎng)頁設(shè)計(jì)流程中的作用，同時(shí)能將該課程與其它課程做好實(shí)際應(yīng)用的銜接。

4.學(xué)習(xí)方式轉(zhuǎn)變

在教學(xué)過程中，我們更加注重學(xué)習(xí)能力的培養(yǎng)，良好的學(xué)習(xí)習(xí)慣和恰當(dāng)?shù)膶W(xué)習(xí)方式可以達(dá)到事半功倍的效果。隨著互聯(lián)網(wǎng)的普及，新型的學(xué)習(xí)方式可以輔助課堂教學(xué)，同時(shí)，學(xué)生可以根據(jù)自己的基礎(chǔ)進(jìn)行選擇性的學(xué)習(xí)。

（1）課堂學(xué)習(xí)向網(wǎng)絡(luò)學(xué)習(xí)轉(zhuǎn)變

隨著互聯(lián)網(wǎng)的發(fā)展和廣泛的應(yīng)用，網(wǎng)絡(luò)學(xué)習(xí)成為新的學(xué)習(xí)平臺(tái)。目前，較多網(wǎng)絡(luò)課堂對(duì)外開放，尤其是計(jì)算機(jī)應(yīng)用技術(shù)的迅速更新，相關(guān)的教學(xué)視頻也不斷地出現(xiàn)。通過網(wǎng)絡(luò)平臺(tái)的學(xué)習(xí)，可以補(bǔ)充課堂學(xué)習(xí)的內(nèi)容，拓展學(xué)生的知識(shí)面。很多平臺(tái)也提供了某個(gè)課程或者是完整的崗位技能培訓(xùn)視頻，通過該途徑的學(xué)習(xí)，不僅可以打破課堂教學(xué)的約束，而且可以讓學(xué)生養(yǎng)成主動(dòng)學(xué)習(xí)的習(xí)慣，激發(fā)學(xué)生的求知欲望。

（2）課本學(xué)習(xí)向工具學(xué)習(xí)轉(zhuǎn)變

一直以來，我們的學(xué)習(xí)都借助于課本，課本的學(xué)習(xí)是有限，更多的是理論的學(xué)習(xí)。作為操作性強(qiáng)的實(shí)訓(xùn)課，我們必須借助實(shí)際的案例進(jìn)行講解。DIV+CSS網(wǎng)頁布局的教學(xué)，我們可以利用網(wǎng)絡(luò)上現(xiàn)成的網(wǎng)頁，再結(jié)合瀏覽器的調(diào)試功能（如：Firefox瀏覽器的Firebug插件）開展學(xué)習(xí)。該插件可以對(duì)Web頁面的內(nèi)部細(xì)節(jié)進(jìn)行剖析，是一個(gè)好的調(diào)試工具，我們可以借助此插件查看某一個(gè)區(qū)塊的CSS樣式。一方面我們可以通過網(wǎng)絡(luò)找到實(shí)際的案例，另外一方面，我們通過該插件學(xué)習(xí)或模仿優(yōu)秀的DIV+CSS網(wǎng)頁布局，提升學(xué)生對(duì)Web頁面的分析能力。通過該方式，我們的學(xué)習(xí)就不受時(shí)間和場所的限制。

5.結(jié)束語

DIV+CSS網(wǎng)頁布局已成為網(wǎng)頁設(shè)計(jì)的核心技術(shù)，這也是計(jì)算機(jī)相關(guān)專業(yè)學(xué)生的必備技能。在互聯(lián)網(wǎng)的快速發(fā)展和新的教育環(huán)境下，我們的教學(xué)方式和學(xué)習(xí)方式，應(yīng)結(jié)合實(shí)際情況做適當(dāng)?shù)母母锖蛣?chuàng)新，進(jìn)一步提升教學(xué)和學(xué)習(xí)效果。在后續(xù)的教學(xué)中，我們更應(yīng)探索不同的教學(xué)方式，指導(dǎo)學(xué)生學(xué)習(xí)，使“教與學(xué)”有效的結(jié)合。

參考文獻(xiàn)：

[1]王愛菊， 楊金川. DIV+CSS布局在《網(wǎng)頁制作》課程中的教學(xué)改革探究[J]. 無線互聯(lián)科技， 2015， （9）： 116-117.

[2]溫謙，周建國，練源.網(wǎng)頁設(shè)計(jì)與布局項(xiàng)目化教程（HTML+CSS+DIV）[M].北京：人民郵電出版社， 2013.