DIV+CSS網頁布局“教與學”方式探究

王仲滿

【摘要】《網頁設計》是技工院校計算機應用專業的必修課，隨著網頁設計前端技術的不斷更新，DIV+CSS布局在該課程中的重要性越來越突出。本文介紹DIV+CSS網頁布局的優勢，闡述教學現狀，提出新的教學方式和學習方式。

【關鍵詞】DIV+CSS 網頁設計 教學方式 學習方式

【中圖分類號】G71 【文獻標識碼】A 【文章編號】2095-3089（2018）20-0252-01

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

1.DIV+CSS網頁布局優勢

采用DIV+CSS網頁布局與傳統的表格布局相比，有許多的優勢：

（1）頁面加載速度快

傳統的表格布局必須等表格加載完才顯示相應的網頁內容，而DIV+CSS網頁布局是由一個個松散的DIV盒子組成，它可以實現邊加載邊顯示內容。

（2）內容與外觀相分離

該布局方式實現了內容和外觀相分離，不僅提高了網頁設計的效率，而且使網頁的維護變得更加容易。

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

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

2.DIV+CSS網頁布局的教學現狀

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

另外，網頁設計軟件大大提高了網頁設計的效率，正是因為快速、便捷，很多學生更依賴于此類軟件，導致不注重代碼編寫能力的提升。而作為網頁設計師，編寫代碼是必備的技能要求，因此，在教學中我們更應該注重代碼編寫能力的培養。

3.教學方式轉變

在教學過程中，很多老師比較注重教學方法的改革，實訓課比較提倡任務驅動、項目教學法等等。針對DIV+CSS網頁布局的教學，我們可以在這些教學方法的基礎上對教學方式做進一步的改革和創新。

（1）由設計視圖向代碼視圖轉變

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

（2）課程結構的轉變

往往我們在教學中受教材的影響，形成固有的課程結構：從單一的知識點的講解，再到最后綜合應用。一般在了解HTML的基礎上，從CSS基礎到盒子模型，再介紹各種樣式類型。在前期的教學中，過多的時間用于講解單一的知識點，不利于學生形成綜合應用的意識，并會降低學生學習的興趣。我們可以嘗試對一個完整的案例進行任務分解，再通過子任務的技能要求對知識點進行講解。這不僅使學生有明確的學習目標，更重要的是理解新知識點的應用。在掌握各知識點的基礎上，最終又回歸到綜合案例的應用上，提高學生的綜合應用能力。

（3）從單一課程到綜合課程轉變

在傳統的教學計劃中，我們都以課程為單位進行設計，或者針對一個工作崗位開設幾門相關的課程。往往一門課程的獨立教學無法達到我們預想的與工作崗位相匹配的效果。DIV+CSS網頁布局，可以借助前期所學的Photoshop或者Fireworks相關技能，做好頁面設計、切圖、取色等等。這不僅能讓學生了解DIV+CSS網頁布局在真正網頁設計流程中的作用，同時能將該課程與其它課程做好實際應用的銜接。

4.學習方式轉變

在教學過程中，我們更加注重學習能力的培養，良好的學習習慣和恰當的學習方式可以達到事半功倍的效果。隨著互聯網的普及，新型的學習方式可以輔助課堂教學，同時，學生可以根據自己的基礎進行選擇性的學習。

（1）課堂學習向網絡學習轉變

隨著互聯網的發展和廣泛的應用，網絡學習成為新的學習平臺。目前，較多網絡課堂對外開放，尤其是計算機應用技術的迅速更新，相關的教學視頻也不斷地出現。通過網絡平臺的學習，可以補充課堂學習的內容，拓展學生的知識面。很多平臺也提供了某個課程或者是完整的崗位技能培訓視頻，通過該途徑的學習，不僅可以打破課堂教學的約束，而且可以讓學生養成主動學習的習慣，激發學生的求知欲望。

（2）課本學習向工具學習轉變

一直以來，我們的學習都借助于課本，課本的學習是有限，更多的是理論的學習。作為操作性強的實訓課，我們必須借助實際的案例進行講解。DIV+CSS網頁布局的教學，我們可以利用網絡上現成的網頁，再結合瀏覽器的調試功能（如：Firefox瀏覽器的Firebug插件）開展學習。該插件可以對Web頁面的內部細節進行剖析，是一個好的調試工具，我們可以借助此插件查看某一個區塊的CSS樣式。一方面我們可以通過網絡找到實際的案例，另外一方面，我們通過該插件學習或模仿優秀的DIV+CSS網頁布局，提升學生對Web頁面的分析能力。通過該方式，我們的學習就不受時間和場所的限制。

5.結束語

DIV+CSS網頁布局已成為網頁設計的核心技術，這也是計算機相關專業學生的必備技能。在互聯網的快速發展和新的教育環境下，我們的教學方式和學習方式，應結合實際情況做適當的改革和創新，進一步提升教學和學習效果。在后續的教學中，我們更應探索不同的教學方式，指導學生學習，使“教與學”有效的結合。

參考文獻：

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

[2]溫謙，周建國，練源.網頁設計與布局項目化教程（HTML+CSS+DIV）[M].北京：人民郵電出版社， 2013.