如何順利和有效做好網頁布局和網頁編程的課程銜接

李夏君

摘要：網頁布局（Div/Css）和網頁編程（C#）作為計算機兩門專業課，分別面對前端和后臺，側重有所不同，而且一個是過程性語言，一個是面向對象語言，按時間先后開設。筆者在教學前采取合適戰略，教學過程中承前啟后，用項目教學實現順利和有效做好網頁布局和網頁編程的課程銜接。

關鍵詞：網頁布局；網頁編程；課程銜接

中圖分類號：G712文獻標識碼：A文章編號：1005-1422（2015）12-0073-02

國家近年來大力發展職業教育，習近平總書記強調：職業教育是國民教育體系和人力資源開發的重要組成部分，是廣大青年打開通往成功成才大門的重要途徑，肩負著培養多樣化人才、傳承技術技能、促進就業創業的重要職責，必須高度重視、加快發展。在珠三角洲，IT行業（互聯網）的發展需要大批低端工作人員，而中職學校設立計算機專業，目的是為IT行業輸入預備和基層人員。網頁布局（Div/Css）和網頁編程（C#）作為計算機兩門專業課，分別在第二第三學期展開教學，但兩門課程分別面對前端和后臺，側重有所不同，而且一個是過程性語言，一個是面向對象語言，如何做好課程之間的銜接，讓學生從前端走向后臺，完成一個網站工作人員的轉變，筆者身為計算機專業一線老師，為兩門課程之間順利和有效銜接做出一番研究。

一、按照學習環境和中職學生特征設置課程

中職學生是研究對象，特征是思想未成熟，理論基礎不扎實，抽象思維差，學習方法效率低，學習自主性差，但身體和心理處于年輕態，對新生事物敢于嘗試，敢于接受，接受老師鼓勵和表揚等正能量，有興趣的科目可以堅持學下去，大多數理科學生心理素質好。學習環境是經過第一學期學習之后，已經完全熟習中職學習環境和規律，從應試教育轉變為技能教育，掌握計算機基本使用技能，培育了一定計算機素養，在第二個學期可以展開網頁布局的學習。

網頁布局，從網頁基本操作入手，利用工具Dreamweaver，掌握網頁各要素（html標簽、表單各要素、模板頁）到可以獨立完成靜態網頁的制作，熟習Div/Css的基本概念，并能被用來完成網頁布局，期間涉及到網站前端知識。課程要求是：學生可以掌握布局的技能，在給出的頁面設計圖的前提，可以獨立完成切圖，并用Div/Css作出具體布局，可以實現二級菜單，并在頁面加入flash或JavaScript等廣告banner。

當學生熟練前端知識之后，有了理論和實踐基礎，進入第三個學期的加深學習，正式進入有關后臺的學習。針對目前最流行的開發平臺Visual Studio和開發語言C#，本校采用了上述環境和語言，要求是掌握Webform的開發，內置對象、表單和控件、SQL server數據庫以及一個小型后臺開發。制作后臺一般有登陸、注冊、發布新聞、增加修改刪除新聞的功能。在學習過程中，讓學生在學習編程基本理論和思路，培育面向對象編程的素養，提高學習的興趣和自主能動性。為第四學期小組合作完成一個有前端和后臺的網站而打下基礎。

二、如何做好銜接工作的具體舉措

Div/Css屬于網頁前端知識，Asp.Net屬于后臺開發語言，如何做好兩者之間的銜接，讓學生可以從網頁前端世界從容進入后臺開發，這就是筆者在實際工作中遇到的問題，經過一番研究，特將研究結果列出如下：

1.課前要做好戰略上的準備

在所有的網頁課程展開之前，做好戰略準備。要跟學生陳述清楚本課程的最終目標：無論是前端Div/Css，還是后臺的Asp.Net，它們都是為網站而服務的，也是一個完善的網站要包括前端的與客戶視覺交互，還包括后臺各項核心功能的實現。舉個例子，人要有外表和內心才是一個真正的人。按照Web標準提倡的表現、結構和行為分離原則，前端主要體現在表現和行為，后臺可以體現在結構和行為。兩者要既相互獨立，又互相聯系。思想在前行動在后，戰略目標一旦提出，一切有根有據，有章可循，有理可依。

2.講授Div/Css要做好啟后工作

Div/Css和包含它本身的html是過程性語言，對于初學語言的中職生來說，由于學習者自身有抽象思維不強，邏輯分析能力不夠的弱點，Html和Div/Css不失為比較好學的入門語言。學生可以在可視即可得的視圖中接觸語言編程過程，既可以學習編程的基礎知識，又可以培養編程的長期興趣。不過，Div/Css不過是中期目標，也是中介和過渡手段。因為就根本而言，過程性語言有其簡單易用的優點，也有提煉不夠，封裝不夠好的缺點，面對復雜多變的編程世界，還是需要面對對象語言來提煉，才有更好的可讀性和可擴展性。好比一個人光有學會數數和算數其實不夠，還需要更多數學知識才能對現實進行歸納。光有前端而無后臺網站，很難吸引瀏覽者長期的興趣，生命力不強。

3.講授Asp.Net要做好承前工作

C#是一個語言，.net是一個平臺，上面支持用C#語言。C#不但可以開發基于.net的應用程序，也可以開發基于WinForm的程序。C#是事件驅動的，完全面向對象的可視化編程語言。前面說了，一個網頁光有繽紛絢爛的前端效果是不夠的，還需要功能強大的后臺作為持續發展。舉個例子，正如人不但要一個美麗的外表，更需要一個強大的內心，才能在人世間走得更高更遠。在進入C#學習之前，可以先復習一到兩周的Div/Css和JavaScript，做一些簡單的復習，才正式進入。復習可以是盒子模型，div頁面居中，一級菜單，插入圖像，圖片列表等。這種承前工作是必須的，才令到C#的學習不顯得突兀和生硬。

4.可以用一個網站作為項目教學實習兩門課程的銜接

對于職業教育，理論不是最終目標，技能的掌握才是目的，所謂紙上得來終覺淺，百講不如一練。在講授中，有個網站可以實現前端到后臺的銜接，是最好的教材和最合適的展示。筆者親自制作了一個網站，可以實現前臺的Div/Css布局，JavaScript的動態效果，還有后臺的登陸和注冊，后臺管理頁面的展示，密碼的修改等功能。在講授Div/Css的實訓階段，可以將網站界面設計圖交給學生進行切圖后進行布局，作為項目教學的一部分，增強學生的布局能力，提高學生布局熟練程度；在Asp.Net的實訓階段，將靜態網頁交給學生之后，再將靜態頁面轉換為動態頁面，而且可以將后臺分模塊：登陸模塊、注冊模塊、后臺管理頁面模塊、密碼修改模塊、新聞編輯模塊和新聞發布模塊，完成靜態到動態的銜接。在網站不斷完善過程中，完成知識講解和技能訓練， 達到以面帶點的效果。

5.行動研究證明：銜接帶來的效果

筆者從計網13級到14級，通過兩個年級6個班的網頁布局和編程教學，經過兩輪行動研究表明：順利和有效做好網頁布局和網站編程的銜接，有助于提高學生網站前端效果制作能力，增強后臺建設能力，為第四學期學生小組合作完成網站打好基礎。以下是學生最后網站作品之一。

三、總結

教學無小事。筆者在中職學校已經有15年的一線教學經驗，感受到過程比結果更重要。只要能留心日常教學的一絲一毫，發出疑問，經過思考，是可以幫助到學生更好地學習，從而改變思考習慣，改變人生。順利和有效做好課程銜接，是促進學生學習，提高學習效率的途徑之一。本著初衷，筆者繼續投入職業教育工作，為國家職業教育事業盡一份力量。

參考文獻：

[1]韓琦，張建軍.中、高職課程體系的銜接設計[J].長沙鐵道學院學報（社會科學版），2014（08）.

[2]周仕德.課程銜接：亟待研究的課程視域[J].教育理論與實踐，2010（25）.

[3]胡春光.課程銜接：含義分析、學理基礎及主要問題[J].武漢商業服務學院學報，2010（04）.

責任編輯何麗華