基于MVC模式的網站設計模塊教學方法改革研究與實踐

劉旭　闞媛　鄭貴省　田家遠

摘? 要：文章對“大學計算機基礎”課程中網站設計模塊存在的問題進行了闡述分析，借鑒MVC設計模式的模塊化程度很高、可定制性等優點，將其應用到網站設計制作中。基于MVC的講授方法是框架式精講，能夠讓學員邏輯清晰地抓住核心內容。結合教學內容的特點設計案例項目，以項目為驅動，以問題為先導，以應用為目標，激發學員的好奇心和興趣，更有助于自主性和創造性的提升。

關鍵詞：網站設計；MVC 模式；HTML；CSS

中圖分類號：TP39；G434? 文獻標識碼：A? 文章編號：2096-4706（2023）11-0194-05

Research and Practice on Teaching Method Reform of Website Design Module Based on MVC Mode

—Taking “College Computer Foundation” Course as an Example

LIU Xu， KAN Yuan， ZHENG Guixing， TIAN Jiayuan

（Army Military Transportation University， Tianjin? 300161， China）

Abstract： This paper expounds and analyzes the problems existing in the website design module for the course of “College Computer Foundation”， and uses MVC design mode for reference， which has the advantages of high modularization level and customization， then applies it to website design and production. The teaching method based on MVC is framework intensive teaching， which enables students to grasp the core content logically and clearly. It combines the characteristics of the teaching content to design case projects， and it is driven by projects， guided by problems， and targeted at application， so as to stimulate the curiosity and interest of students， which is more conducive to the improvement of autonomy and creativity.

Keywords： website design; MVC mode; HTML; CSS

0? 引? 言

網站設計模塊的主要任務是學習網站首頁的制作，主要涵蓋HTML5和CSS兩個方面的知識，但目前的授課方法，教員在教學中只單純地傳授知識或單純地訓練學員的某種技能，而忽略了培養學員的綜合應用能力及創造能力。課后學員反饋，知識點零散，存在跟著老師會，一旦自己做就不好上手的情況，其根本就是知識點講授過于集中，缺乏鞏固環節，使用方法掌握不牢。傳統的教學方法把學員的注意力聚焦在課程的理論知識上，導致學員的知識體系無法完整建立，對實際項目缺少必要的分析和開發/編程能力。

1? MVC模式

通過教學現狀和存在的問題分析，教學方式變革勢在必行，本文提出了基于MVC模式的網站設計模塊教學方法，此種設計模式將業務邏輯、數據、界面顯示分開，使程序維護簡單、移植便捷，高效實現功能擴展與重用，極大程度提升了程序開發效率。

這種經典MVC模式的模塊化程度很高，各部分負責完成不同的邏輯處理。借鑒MVC的設計模式，不再被網頁版塊內容牽著走，基于MVC模式重新設計教學內容，其中Model為網頁內容，View為網頁樣式，Control為網頁超鏈接，實現了將Model內容和View樣式代碼分離的目的，從而使同一個內容可以使用不同的表現形式，使得代碼大大減少，頁面加載速度更快且易于維護，如果要進行全局更改，則只需更改樣式，頁面樣式更加靈活，通過Control控制的設置使得頁面控制更加清晰。

MVC三者之間關聯如圖1所示。

2? 基于MVC模式的教學方法實踐

2.1? 項目引入

在案例項目設計的過程中，著重將思政教育、信息素養等嵌入到網站設計模塊的課程教學中，因此提出將黨史（時政）學習教育作為網站主題。

項目要求參照“中國黨政干部學習網”首頁，如圖2所示，制作黨史（時政）教育學習網站首頁，要求頁面結構簡單明了，在色彩搭配上要突出主題，可以采用表格排版或者框架結構。網站頁面制作要求涵蓋多種標記，應包括：表格、表單、文本、圖像、超鏈接、導航欄，等等；網站內容應包括：導航菜單欄設計、圖片展示設計、圖文混排設計、網頁風格樣式統一化設計，等等。

2.2? 項目分析

2.2.1? 項目教學目標及涉及的教學內容

學習案例項目，能夠掌握如下所示的教學目標：

1）識記網絡應用相關的基礎知識。

2）熟識訪問網頁的流程、URL的格式及相關協議、網頁文檔的分類。

3）熟識當前網頁的基本框架，并具備網頁架構、內容、美觀等的鑒賞力，并且能夠獨立設計網頁框架。

4）能夠獨立創建、發布HTML網頁文檔。

5）能夠利用HTML常用標記實現網頁內容的制作。

6）能夠利用CSS實現網頁樣式風格的統一。

7）能夠利用學習的知識，獨立完成“黨史（時政）學習教育”網站首頁的制作。

本案例項目對應院校教學大綱本科教育通用基礎課程“大學計算機基礎”中設定的教學內容要點，如表1所示。

2.2.2? 項目分析

通過上述分析，結合本門課程的課時安排，設定用6個學時來完成項目的理論教學與實踐環節，具體如表2所示。

其中，表1中的教學內容1、2要求學員作為課前預備知識自學完成，以便在課上教學過程中能理解老師所用的術語含義、了解理論背景，并且在此基礎上對教學內容5、6提前預習。其知識點及對應的任務如圖3所示。在此基礎之上將講授式課堂與研討式課堂的優點相結合，在縮短授課時間的同時，通過框架式精講又讓學員邏輯清晰地抓住核心內容（學以致用）。每一次課堂討論，學員都會有備而來，學習氛圍濃厚，既加深了學員對知識的理解，又培養了學員的學習能力和表達能力。

2.3? 項目設計

具體設計方案如下。

第一課講授網頁框架及頁面布局，比較用表格table與框架集Frameset的優劣勢，并通過經典框架集的展示，介紹不同主題網頁的特色、配色等，以及讓學員以小組為單位討論美觀的網頁都具備什么特點，從鑒賞的角度來導入項目設計的講授。學員針對項目需求進行文字、圖片、音視頻等素材的采集，在此基礎上完成頁面布局。

第二課介紹HTML常用標記（表格、文字、圖片、表單），要求學員完成Model網頁內容的編排設計及錄入。

第三課介紹CSS層疊樣式表，要求學員利用CSS完成頁面樣式View的改版；再介紹超鏈接，利用超鏈接Control來控制首頁與各子頁面之間的跳轉。

最后，給學員兩周時間完成各組作品，兩周后讓學員進行作品展示，教員與其他組成員共同打分，從作品中選出優秀作品，從中進行教學反饋，改進教學設計。

2.4? 項目實施

項目實施過程中，注重以學員為中心，倡導探究發現、交流合作，通過教學方法引導，促進學員知識建構的逐步完善，避免知識點死記硬背、機械訓練等現象出現。項目實施步驟分為布局設計、內容編排、頁面美化、頁面控制，共四步。

2.4.1? 布局設計

借鑒優秀網站設計案例，分析優秀網站首頁元素，體會不同主題風格的網頁之間的區別，為制作首頁奠定基礎，比如針對黨政網站，應給人朝氣蓬勃的感受，顏色上主要采用紅黃搭配，圖片上無論是背景圖片還是配圖，都常選用與黨政有關的，比如黨旗、黨徽、天安門、華表（象征著中華民族）、長城、紅色絲帶、山脈大川，等等。此外，網站頁面中的整體性也十分重要，應該做到“三統一”，即設計風格統一、色彩統一和布局統一，使頁面的各個部分協調、融洽。采用主與次、動與靜、聚與散等對比手法，突出網站頁面主題鮮明而富有生氣的特點。同時顏色不宜過多，否則整個頁面就會缺少整體統一的感覺。

首先讓學員開始進行首頁的第一步制作——頁面布局，頁面的結構可采用表格布局，使得網頁整體效果看起來清晰、整齊，如圖4所示。

2.4.2? 內容編排

在布局設計完成的基礎上，下一步進行各版塊內容主題的編排，要求學員列出頁面各個欄目的具體主題，如圖5所示。

根據圖5對各個分區欄目內容進行編排，如圖6所示。

利用百分比的形式給width、height賦值，使得頁面能適應窗口大小變化，關鍵代碼如下：

頭部

導航欄

精神標語

……

第一課學員應完成上述界面的制作。根據圖6將收集的文字、圖片、音視頻等素材輸入到對應的頁面分區中，圖7是只有文字部分的頁面效果，圖8是在此基礎上添加了圖片、視頻、表單等之后的頁面效果，到此完成網頁內容Model部分的編排設計及錄入。

圖8界面是第二課學員應完成的。但是通過觀察發現，圖中文字、圖片格式與位置都存在問題，如矩形框中所示。背景只采用了最簡單的白背景，網頁元素的對齊位置、圖文混排的樣式都還需要進一步調整。下面要利用CSS層疊樣式表對這些有問題的網頁元素進行改進與完善，完成View的改版。

2.4.3? 頁面美化

利用CSS層疊樣式表，改版前面的文字、圖片、表格、表單等，這樣就得到了如圖9所示的CSS美化首頁的界面。通過CSS的美化，原來圖中文字、圖片格式與位置的問題都得到了解決。

2.4.4? 頁面控制

最后利用超鏈接Control來控制導航欄、首頁與各子頁面之間的跳轉，并對超鏈接進行樣式美化，例如鼠標滑過導航欄顏色變為紅色黃色，文本超鏈接顏色變為藍色，單擊時顏色又變為紫色，等等。

最后得到的由表格作為網頁框架的網頁都是沒有邊框的，要將屬性border設置為0無邊框即可，最終效果如圖10所示。

對于初學者，一般常利用內嵌樣式完成的首頁的美化。但內嵌樣式存在缺點，對于多頁面開發來說，無法實現頁面間代碼的共享復用和日常維護，不能徹底將內容與樣式的分離。因此可以利用外部樣式表進一步將網頁內容與格式分離，這種方法在CSS中使用的頻率最高。在頁面頭部區域，使用標記鏈接一個外部的CSS文件，將“頁面內容”和“樣式風格代碼”分離成兩個、甚至多個文件，達到了頁面框架HTML代碼和CSS代碼的完全分離的效果，使得前期制作和后期維護變得容易。因此，網站所有樣式代碼都必須統一寫在外部CSS文件中，通過鏈入外部樣式表的方式插入在HTML頁面的頭部。代碼格式如下：

至此，整個網站的首頁制作完成。

3? 結? 論

本篇以“大學計算機基礎”課程為例，提出MVC設計模式在網站設計模塊中的應用，并以黨史（時政）學習教育網站項目為牽引，通過項目分析對該模塊教學內容進行了設計和實施，效果表明該教學方法具有一定的參考和實踐價值。

參考文獻：

[1] 賈順賀，陳建飛，陳古運，等.基于MVC架構的個人健康信息管理系統設計與實現 [J].計算機應用與軟件，2018，35（3）：43-48.

[2] 王玉英.基于JSP的MySQL數據庫訪問技術 [J].現代計算機：專業版，2010（14）：67-70.

[3] 王志剛，江友華.MySQL高效編程 [M].北京：人民郵電出版社，2012.

[4] 潘杰，周傳生.基于jQuery框架的Web研究與實現 [J].沈陽師范大學學報：自然科學版，2015，33（1）：96-99.

[5] 戴宏明，戴宏亮.基于CDIO理念的《HTML5網站設計》課程教學模式構建 [J].現代計算機，2019（28）：52-56.

作者簡介：劉旭（1981.02—），女，漢族，天津人，講師，碩士研究生，研究方向：網站設計、軟件工程等。

收稿日期：2023-01-04