如何順利和有效做好網(wǎng)頁(yè)布局和網(wǎng)頁(yè)編程的課程銜接

李夏君

摘要：網(wǎng)頁(yè)布局（Div/Css）和網(wǎng)頁(yè)編程（C#）作為計(jì)算機(jī)兩門專業(yè)課，分別面對(duì)前端和后臺(tái)，側(cè)重有所不同，而且一個(gè)是過程性語(yǔ)言，一個(gè)是面向?qū)ο笳Z(yǔ)言，按時(shí)間先后開設(shè)。筆者在教學(xué)前采取合適戰(zhàn)略，教學(xué)過程中承前啟后，用項(xiàng)目教學(xué)實(shí)現(xiàn)順利和有效做好網(wǎng)頁(yè)布局和網(wǎng)頁(yè)編程的課程銜接。

關(guān)鍵詞：網(wǎng)頁(yè)布局；網(wǎng)頁(yè)編程；課程銜接

中圖分類號(hào)：G712文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1005-1422（2015）12-0073-02

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

一、按照學(xué)習(xí)環(huán)境和中職學(xué)生特征設(shè)置課程

中職學(xué)生是研究對(duì)象，特征是思想未成熟，理論基礎(chǔ)不扎實(shí)，抽象思維差，學(xué)習(xí)方法效率低，學(xué)習(xí)自主性差，但身體和心理處于年輕態(tài)，對(duì)新生事物敢于嘗試，敢于接受，接受老師鼓勵(lì)和表?yè)P(yáng)等正能量，有興趣的科目可以堅(jiān)持學(xué)下去，大多數(shù)理科學(xué)生心理素質(zhì)好。學(xué)習(xí)環(huán)境是經(jīng)過第一學(xué)期學(xué)習(xí)之后，已經(jīng)完全熟習(xí)中職學(xué)習(xí)環(huán)境和規(guī)律，從應(yīng)試教育轉(zhuǎn)變?yōu)榧寄芙逃?，掌握?jì)算機(jī)基本使用技能，培育了一定計(jì)算機(jī)素養(yǎng)，在第二個(gè)學(xué)期可以展開網(wǎng)頁(yè)布局的學(xué)習(xí)。

網(wǎng)頁(yè)布局，從網(wǎng)頁(yè)基本操作入手，利用工具Dreamweaver，掌握網(wǎng)頁(yè)各要素（html標(biāo)簽、表單各要素、模板頁(yè)）到可以獨(dú)立完成靜態(tài)網(wǎng)頁(yè)的制作，熟習(xí)Div/Css的基本概念，并能被用來完成網(wǎng)頁(yè)布局，期間涉及到網(wǎng)站前端知識(shí)。課程要求是：學(xué)生可以掌握布局的技能，在給出的頁(yè)面設(shè)計(jì)圖的前提，可以獨(dú)立完成切圖，并用Div/Css作出具體布局，可以實(shí)現(xiàn)二級(jí)菜單，并在頁(yè)面加入flash或JavaScript等廣告banner。

當(dāng)學(xué)生熟練前端知識(shí)之后，有了理論和實(shí)踐基礎(chǔ)，進(jìn)入第三個(gè)學(xué)期的加深學(xué)習(xí)，正式進(jìn)入有關(guān)后臺(tái)的學(xué)習(xí)。針對(duì)目前最流行的開發(fā)平臺(tái)Visual Studio和開發(fā)語(yǔ)言C#，本校采用了上述環(huán)境和語(yǔ)言，要求是掌握Webform的開發(fā)，內(nèi)置對(duì)象、表單和控件、SQL server數(shù)據(jù)庫(kù)以及一個(gè)小型后臺(tái)開發(fā)。制作后臺(tái)一般有登陸、注冊(cè)、發(fā)布新聞、增加修改刪除新聞的功能。在學(xué)習(xí)過程中，讓學(xué)生在學(xué)習(xí)編程基本理論和思路，培育面向?qū)ο缶幊痰乃仞B(yǎng)，提高學(xué)習(xí)的興趣和自主能動(dòng)性。為第四學(xué)期小組合作完成一個(gè)有前端和后臺(tái)的網(wǎng)站而打下基礎(chǔ)。

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

Div/Css屬于網(wǎng)頁(yè)前端知識(shí)，Asp.Net屬于后臺(tái)開發(fā)語(yǔ)言，如何做好兩者之間的銜接，讓學(xué)生可以從網(wǎng)頁(yè)前端世界從容進(jìn)入后臺(tái)開發(fā)，這就是筆者在實(shí)際工作中遇到的問題，經(jīng)過一番研究，特將研究結(jié)果列出如下：

1.課前要做好戰(zhàn)略上的準(zhǔn)備

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

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

Div/Css和包含它本身的html是過程性語(yǔ)言，對(duì)于初學(xué)語(yǔ)言的中職生來說，由于學(xué)習(xí)者自身有抽象思維不強(qiáng)，邏輯分析能力不夠的弱點(diǎn)，Html和Div/Css不失為比較好學(xué)的入門語(yǔ)言。學(xué)生可以在可視即可得的視圖中接觸語(yǔ)言編程過程，既可以學(xué)習(xí)編程的基礎(chǔ)知識(shí)，又可以培養(yǎng)編程的長(zhǎng)期興趣。不過，Div/Css不過是中期目標(biāo)，也是中介和過渡手段。因?yàn)榫透径裕^程性語(yǔ)言有其簡(jiǎn)單易用的優(yōu)點(diǎn)，也有提煉不夠，封裝不夠好的缺點(diǎn)，面對(duì)復(fù)雜多變的編程世界，還是需要面對(duì)對(duì)象語(yǔ)言來提煉，才有更好的可讀性和可擴(kuò)展性。好比一個(gè)人光有學(xué)會(huì)數(shù)數(shù)和算數(shù)其實(shí)不夠，還需要更多數(shù)學(xué)知識(shí)才能對(duì)現(xiàn)實(shí)進(jìn)行歸納。光有前端而無(wú)后臺(tái)網(wǎng)站，很難吸引瀏覽者長(zhǎng)期的興趣，生命力不強(qiáng)。

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

C#是一個(gè)語(yǔ)言，.net是一個(gè)平臺(tái)，上面支持用C#語(yǔ)言。C#不但可以開發(fā)基于.net的應(yīng)用程序，也可以開發(fā)基于WinForm的程序。C#是事件驅(qū)動(dòng)的，完全面向?qū)ο蟮目梢暬幊陶Z(yǔ)言。前面說了，一個(gè)網(wǎng)頁(yè)光有繽紛絢爛的前端效果是不夠的，還需要功能強(qiáng)大的后臺(tái)作為持續(xù)發(fā)展。舉個(gè)例子，正如人不但要一個(gè)美麗的外表，更需要一個(gè)強(qiáng)大的內(nèi)心，才能在人世間走得更高更遠(yuǎn)。在進(jìn)入C#學(xué)習(xí)之前，可以先復(fù)習(xí)一到兩周的Div/Css和JavaScript，做一些簡(jiǎn)單的復(fù)習(xí)，才正式進(jìn)入。復(fù)習(xí)可以是盒子模型，div頁(yè)面居中，一級(jí)菜單，插入圖像，圖片列表等。這種承前工作是必須的，才令到C#的學(xué)習(xí)不顯得突兀和生硬。

4.可以用一個(gè)網(wǎng)站作為項(xiàng)目教學(xué)實(shí)習(xí)兩門課程的銜接

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

5.行動(dòng)研究證明：銜接帶來的效果

筆者從計(jì)網(wǎng)13級(jí)到14級(jí)，通過兩個(gè)年級(jí)6個(gè)班的網(wǎng)頁(yè)布局和編程教學(xué)，經(jīng)過兩輪行動(dòng)研究表明：順利和有效做好網(wǎng)頁(yè)布局和網(wǎng)站編程的銜接，有助于提高學(xué)生網(wǎng)站前端效果制作能力，增強(qiáng)后臺(tái)建設(shè)能力，為第四學(xué)期學(xué)生小組合作完成網(wǎng)站打好基礎(chǔ)。以下是學(xué)生最后網(wǎng)站作品之一。

三、總結(jié)

教學(xué)無(wú)小事。筆者在中職學(xué)校已經(jīng)有15年的一線教學(xué)經(jīng)驗(yàn)，感受到過程比結(jié)果更重要。只要能留心日常教學(xué)的一絲一毫，發(fā)出疑問，經(jīng)過思考，是可以幫助到學(xué)生更好地學(xué)習(xí)，從而改變思考習(xí)慣，改變?nèi)松?。順利和有效做好課程銜接，是促進(jìn)學(xué)生學(xué)習(xí)，提高學(xué)習(xí)效率的途徑之一。本著初衷，筆者繼續(xù)投入職業(yè)教育工作，為國(guó)家職業(yè)教育事業(yè)盡一份力量。

參考文獻(xiàn)：

[1]韓琦，張建軍.中、高職課程體系的銜接設(shè)計(jì)[J].長(zhǎng)沙鐵道學(xué)院學(xué)報(bào)（社會(huì)科學(xué)版），2014（08）.

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

[3]胡春光.課程銜接：含義分析、學(xué)理基礎(chǔ)及主要問題[J].武漢商業(yè)服務(wù)學(xué)院學(xué)報(bào)，2010（04）.

責(zé)任編輯何麗華