軟件工程專業網頁設計課程教學改革實踐
——以使用DIV+CSS布局網頁為例

肖淑蘋 西安翻譯學院工程技術學院

1 引言

一場突如其來的疫情，讓2020的春季課堂變得不同尋常。新冠狀病毒疫情發生以來，各個學校堅決貫徹習近平總書記關于疫情防控工作的重要指示，按照黨中央、國務院、教育部、省教育廳的決策部署，一手抓疫情防控，一手抓線上教學，千方百計做好“停課不停教、停課不停學”工作。

在新型冠狀病毒感染的疫情形勢下，作為當代青年，應該堅定信心，樹立正確意識形態，切實為防控疫情做出貢獻。網頁設計是一門實踐性特別強的專業基礎課程，通過該課程的學習，能夠開啟學生的內在潛力和動力，提升健康的審美能力，培養有情懷、有責任、有擔當的人才。

傳統的教學主要采用演示法，教師提供素材，為學生演示操作步驟，然后讓學生實踐，這種教學方式在一定程度上激發了學生的學習興趣，但是學生自己規劃網站，自己搜集素材然后制作網頁更能開啟學生的內在潛力和動力。

疫情期間軟件工程專業網頁設計課程開展了不同形式的教學改革，同學們熱情高漲，積極參與，而且做出了一個個十分優秀的網頁設計作品。

2 線上授課

2.1 國家精品課程在線學習平臺——中國大學mooc（慕課）

網頁設計課程選用了中國大學mooc平臺北京語言大學趙慧周老師主講的網頁設計基礎，課程中每個章節中提供章節測驗和討論，整門課程還提供了3次大作業，幫助學習者突破基本概念學習瓶頸、理清網頁設計學習思路、掌握相關技術學習方法，指導學習者使用互聯網資料支持學習，為持續學習奠定基礎。

2.2 QQ群

建立班級QQ群，課前使用中國大學mooc平臺或QQ群分享課程資源，布置課前學習任務，課堂中使用分享屏幕講解重點難點知識。對于中國大學mooc平臺外的課后作業，使用QQ接收學生作業。

2.3 騰訊課堂

由于騰訊課堂有回放功能，且畫面清晰流暢，學習者遇到不懂的地方還可以觀看教師直播內容的回放，這樣不但可以加深學生的理解，還可以提高學生的學習積極性。所以將QQ分享屏幕改為騰訊課堂直播，學生反映效果良好。

3 線下教學

2020年5月，我省高校迎來了學生返校高峰，寂靜了數月的校園再次迎來歡聲笑語。操場上晨練的身影，圖書館內久違的燈光，餐廳里的美味……開學了，在常態化防疫的情況下，我省高校防疫、教學兩手抓，確保教學質量不下降。

返校后，網頁設計課程采用線下授課為主，線上學習為輔，實際操作，當面解決疑難問題，直接且高效。

4 知識的靈活應用——以使用DIV+CSS布局網頁為例

學習了DIV+CSS基本知識后，學生會用DIV+CSS布局網頁的基本結構，會用提供的素材制作導航欄，會用提供的素材制作信息展示部分，但學生沒有自己搜集素材、規劃完整的網頁、制作完整的網頁。

我們的偉大領袖毛澤東同志曾經說過：“獲得知識的途徑就是要努力學習”?！白钪匾?，是善于將這些知識應用到生活和實踐中去”。

無論是線上教學還是線下教學，網頁設計的教學目的都是希望學生們都夠靈活應用所學知識做出滿足需求的靜態網站。圍繞這個教學宗旨，網頁設計課程一學期開展了3次大作業，激發學生應用所學知識解決實際問題的能力。

4.1 教學過程

4.1.1 教師布置任務

(1）確定網站主題——網站主題以圍繞疫情防控知識、社會主義核心價值觀為主。

選擇理由：有國才有家，培養有情懷、有責任、有擔當的人才。

(2）規劃網站

網站規劃包含的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字、圖片的運用等。

(3）搜集素材并對素材進行相應的處理

(4）制作網頁——按照先大后小、先簡單后復雜來進行制作。

這里要注意以下兩個問題：

色彩搭配

margin和padding的靈活應用

(5）設置超鏈接

(6）測試網站（重點測試圖片和超鏈接

4.1.2 學生動手實踐

(1）在動手實踐的過程中，學生成為課堂的主體，學生將自己規劃的網站用所學知識去具體實現，遇到具體問題就會想辦法去解決。

(2）解決問題的方法和具體操作盡量由學生自己來完成，教師只是在學生遇到困難時加以引導、點撥，起到為學生“導航”的作用。

4.2 教學重點和難點

4.2.1 教學重點

規劃網站，制作網頁。

4.2.2 教學難點

margin和padding的靈活應用。

4.3 教學效果

傳統的教學大多是教師提供素材，給出網頁效果圖，讓學生用所學知識做出效果圖來，這種教學方式也可以在一定程度上激發學生的學習興趣，但是學生自己規劃網站，自己找素材處理素材然后制作網頁更能開啟學生的內在潛力和動力。

4.3.1 通過本次教學改革實踐，學生在以下3方面得到了很大的提升。

(1）知識方面——掌握DIV+CSS布局網頁的基本方法。

(2）能力方面——培養學生的知識遷移能力；促進學生的實際應用能力；提高審美能力與鑒賞能力。

(3）情感方面——激勵學生珍惜當下的學習時光；增強自學意識和自律能力；不畏困難、勇于創新；培養有情懷、有責任、有擔當的人才。

4.3.2 學生作品展示

5 教學評價

經過DIV+CSS的綜合應用，學生們做出來的作品大部分都很好，個別同學的效果超乎老師的想象，因為有些效果是課堂上沒有教過，學生想要這個效果，然后自學做出來的，針對這些案例在課堂上給其他同學進行了分享，希望同學們能夠不斷學習，不斷提高！

但是也有個別同學做出來的效果不是特別好，有些同學的色彩搭配的不是很好，有些同學的結構布局的不是很好等等，針對這些問題老師對其指出并進行有效溝通，希望他們今后多欣賞網上已有的經典網站，多學習有關色彩搭配的知識、布局網頁的時候多注意細節。

6 總結

通過網頁設計課程的學習，學生們能夠靈活應用所學知識，將自己的想法用網頁的形式表現出來，能夠制作出滿足需求的個性化網頁。