基于MVC模式的網(wǎng)站設(shè)計(jì)模塊教學(xué)方法改革研究與實(shí)踐

劉旭　闞媛　鄭貴省　田家遠(yuǎn)

摘? 要：文章對(duì)“大學(xué)計(jì)算機(jī)基礎(chǔ)”課程中網(wǎng)站設(shè)計(jì)模塊存在的問(wèn)題進(jìn)行了闡述分析，借鑒MVC設(shè)計(jì)模式的模塊化程度很高、可定制性等優(yōu)點(diǎn)，將其應(yīng)用到網(wǎng)站設(shè)計(jì)制作中。基于MVC的講授方法是框架式精講，能夠讓學(xué)員邏輯清晰地抓住核心內(nèi)容。結(jié)合教學(xué)內(nèi)容的特點(diǎn)設(shè)計(jì)案例項(xiàng)目，以項(xiàng)目為驅(qū)動(dòng)，以問(wèn)題為先導(dǎo)，以應(yīng)用為目標(biāo)，激發(fā)學(xué)員的好奇心和興趣，更有助于自主性和創(chuàng)造性的提升。

關(guān)鍵詞：網(wǎng)站設(shè)計(jì)；MVC 模式；HTML；CSS

中圖分類(lèi)號(hào)：TP39；G434? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：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? 引? 言

網(wǎng)站設(shè)計(jì)模塊的主要任務(wù)是學(xué)習(xí)網(wǎng)站首頁(yè)的制作，主要涵蓋HTML5和CSS兩個(gè)方面的知識(shí)，但目前的授課方法，教員在教學(xué)中只單純地傳授知識(shí)或單純地訓(xùn)練學(xué)員的某種技能，而忽略了培養(yǎng)學(xué)員的綜合應(yīng)用能力及創(chuàng)造能力。課后學(xué)員反饋，知識(shí)點(diǎn)零散，存在跟著老師會(huì)，一旦自己做就不好上手的情況，其根本就是知識(shí)點(diǎn)講授過(guò)于集中，缺乏鞏固環(huán)節(jié)，使用方法掌握不牢。傳統(tǒng)的教學(xué)方法把學(xué)員的注意力聚焦在課程的理論知識(shí)上，導(dǎo)致學(xué)員的知識(shí)體系無(wú)法完整建立，對(duì)實(shí)際項(xiàng)目缺少必要的分析和開(kāi)發(fā)/編程能力。

1? MVC模式

通過(guò)教學(xué)現(xiàn)狀和存在的問(wèn)題分析，教學(xué)方式變革勢(shì)在必行，本文提出了基于MVC模式的網(wǎng)站設(shè)計(jì)模塊教學(xué)方法，此種設(shè)計(jì)模式將業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分開(kāi)，使程序維護(hù)簡(jiǎn)單、移植便捷，高效實(shí)現(xiàn)功能擴(kuò)展與重用，極大程度提升了程序開(kāi)發(fā)效率。

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

MVC三者之間關(guān)聯(lián)如圖1所示。

2? 基于MVC模式的教學(xué)方法實(shí)踐

2.1? 項(xiàng)目引入

在案例項(xiàng)目設(shè)計(jì)的過(guò)程中，著重將思政教育、信息素養(yǎng)等嵌入到網(wǎng)站設(shè)計(jì)模塊的課程教學(xué)中，因此提出將黨史（時(shí)政）學(xué)習(xí)教育作為網(wǎng)站主題。

項(xiàng)目要求參照“中國(guó)黨政干部學(xué)習(xí)網(wǎng)”首頁(yè)，如圖2所示，制作黨史（時(shí)政）教育學(xué)習(xí)網(wǎng)站首頁(yè)，要求頁(yè)面結(jié)構(gòu)簡(jiǎn)單明了，在色彩搭配上要突出主題，可以采用表格排版或者框架結(jié)構(gòu)。網(wǎng)站頁(yè)面制作要求涵蓋多種標(biāo)記，應(yīng)包括：表格、表單、文本、圖像、超鏈接、導(dǎo)航欄，等等；網(wǎng)站內(nèi)容應(yīng)包括：導(dǎo)航菜單欄設(shè)計(jì)、圖片展示設(shè)計(jì)、圖文混排設(shè)計(jì)、網(wǎng)頁(yè)風(fēng)格樣式統(tǒng)一化設(shè)計(jì)，等等。

2.2? 項(xiàng)目分析

2.2.1? 項(xiàng)目教學(xué)目標(biāo)及涉及的教學(xué)內(nèi)容

學(xué)習(xí)案例項(xiàng)目，能夠掌握如下所示的教學(xué)目標(biāo)：

1）識(shí)記網(wǎng)絡(luò)應(yīng)用相關(guān)的基礎(chǔ)知識(shí)。

2）熟識(shí)訪(fǎng)問(wèn)網(wǎng)頁(yè)的流程、URL的格式及相關(guān)協(xié)議、網(wǎng)頁(yè)文檔的分類(lèi)。

3）熟識(shí)當(dāng)前網(wǎng)頁(yè)的基本框架，并具備網(wǎng)頁(yè)架構(gòu)、內(nèi)容、美觀等的鑒賞力，并且能夠獨(dú)立設(shè)計(jì)網(wǎng)頁(yè)框架。

4）能夠獨(dú)立創(chuàng)建、發(fā)布HTML網(wǎng)頁(yè)文檔。

5）能夠利用HTML常用標(biāo)記實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的制作。

6）能夠利用CSS實(shí)現(xiàn)網(wǎng)頁(yè)樣式風(fēng)格的統(tǒng)一。

7）能夠利用學(xué)習(xí)的知識(shí)，獨(dú)立完成“黨史（時(shí)政）學(xué)習(xí)教育”網(wǎng)站首頁(yè)的制作。

本案例項(xiàng)目對(duì)應(yīng)院校教學(xué)大綱本科教育通用基礎(chǔ)課程“大學(xué)計(jì)算機(jī)基礎(chǔ)”中設(shè)定的教學(xué)內(nèi)容要點(diǎn)，如表1所示。

2.2.2? 項(xiàng)目分析

通過(guò)上述分析，結(jié)合本門(mén)課程的課時(shí)安排，設(shè)定用6個(gè)學(xué)時(shí)來(lái)完成項(xiàng)目的理論教學(xué)與實(shí)踐環(huán)節(jié)，具體如表2所示。

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

2.3? 項(xiàng)目設(shè)計(jì)

具體設(shè)計(jì)方案如下。

第一課講授網(wǎng)頁(yè)框架及頁(yè)面布局，比較用表格table與框架集Frameset的優(yōu)劣勢(shì)，并通過(guò)經(jīng)典框架集的展示，介紹不同主題網(wǎng)頁(yè)的特色、配色等，以及讓學(xué)員以小組為單位討論美觀的網(wǎng)頁(yè)都具備什么特點(diǎn)，從鑒賞的角度來(lái)導(dǎo)入項(xiàng)目設(shè)計(jì)的講授。學(xué)員針對(duì)項(xiàng)目需求進(jìn)行文字、圖片、音視頻等素材的采集，在此基礎(chǔ)上完成頁(yè)面布局。

第二課介紹HTML常用標(biāo)記（表格、文字、圖片、表單），要求學(xué)員完成Model網(wǎng)頁(yè)內(nèi)容的編排設(shè)計(jì)及錄入。

第三課介紹CSS層疊樣式表，要求學(xué)員利用CSS完成頁(yè)面樣式View的改版；再介紹超鏈接，利用超鏈接Control來(lái)控制首頁(yè)與各子頁(yè)面之間的跳轉(zhuǎn)。

最后，給學(xué)員兩周時(shí)間完成各組作品，兩周后讓學(xué)員進(jìn)行作品展示，教員與其他組成員共同打分，從作品中選出優(yōu)秀作品，從中進(jìn)行教學(xué)反饋，改進(jìn)教學(xué)設(shè)計(jì)。

2.4? 項(xiàng)目實(shí)施

項(xiàng)目實(shí)施過(guò)程中，注重以學(xué)員為中心，倡導(dǎo)探究發(fā)現(xiàn)、交流合作，通過(guò)教學(xué)方法引導(dǎo)，促進(jìn)學(xué)員知識(shí)建構(gòu)的逐步完善，避免知識(shí)點(diǎn)死記硬背、機(jī)械訓(xùn)練等現(xiàn)象出現(xiàn)。項(xiàng)目實(shí)施步驟分為布局設(shè)計(jì)、內(nèi)容編排、頁(yè)面美化、頁(yè)面控制，共四步。

2.4.1? 布局設(shè)計(jì)

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

首先讓學(xué)員開(kāi)始進(jìn)行首頁(yè)的第一步制作——頁(yè)面布局，頁(yè)面的結(jié)構(gòu)可采用表格布局，使得網(wǎng)頁(yè)整體效果看起來(lái)清晰、整齊，如圖4所示。

2.4.2? 內(nèi)容編排

在布局設(shè)計(jì)完成的基礎(chǔ)上，下一步進(jìn)行各版塊內(nèi)容主題的編排，要求學(xué)員列出頁(yè)面各個(gè)欄目的具體主題，如圖5所示。

根據(jù)圖5對(duì)各個(gè)分區(qū)欄目?jī)?nèi)容進(jìn)行編排，如圖6所示。

利用百分比的形式給width、height賦值，使得頁(yè)面能適應(yīng)窗口大小變化，關(guān)鍵代碼如下：

頭部

導(dǎo)航欄

精神標(biāo)語(yǔ)

……

第一課學(xué)員應(yīng)完成上述界面的制作。根據(jù)圖6將收集的文字、圖片、音視頻等素材輸入到對(duì)應(yīng)的頁(yè)面分區(qū)中，圖7是只有文字部分的頁(yè)面效果，圖8是在此基礎(chǔ)上添加了圖片、視頻、表單等之后的頁(yè)面效果，到此完成網(wǎng)頁(yè)內(nèi)容Model部分的編排設(shè)計(jì)及錄入。

圖8界面是第二課學(xué)員應(yīng)完成的。但是通過(guò)觀察發(fā)現(xiàn)，圖中文字、圖片格式與位置都存在問(wèn)題，如矩形框中所示。背景只采用了最簡(jiǎn)單的白背景，網(wǎng)頁(yè)元素的對(duì)齊位置、圖文混排的樣式都還需要進(jìn)一步調(diào)整。下面要利用CSS層疊樣式表對(duì)這些有問(wèn)題的網(wǎng)頁(yè)元素進(jìn)行改進(jìn)與完善，完成View的改版。

2.4.3? 頁(yè)面美化

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

2.4.4? 頁(yè)面控制

最后利用超鏈接Control來(lái)控制導(dǎo)航欄、首頁(yè)與各子頁(yè)面之間的跳轉(zhuǎn)，并對(duì)超鏈接進(jìn)行樣式美化，例如鼠標(biāo)滑過(guò)導(dǎo)航欄顏色變?yōu)榧t色黃色，文本超鏈接顏色變?yōu)樗{(lán)色，單擊時(shí)顏色又變?yōu)樽仙?，等等?/p>

最后得到的由表格作為網(wǎng)頁(yè)框架的網(wǎng)頁(yè)都是沒(méi)有邊框的，要將屬性border設(shè)置為0無(wú)邊框即可，最終效果如圖10所示。

對(duì)于初學(xué)者，一般常利用內(nèi)嵌樣式完成的首頁(yè)的美化。但內(nèi)嵌樣式存在缺點(diǎn)，對(duì)于多頁(yè)面開(kāi)發(fā)來(lái)說(shuō)，無(wú)法實(shí)現(xiàn)頁(yè)面間代碼的共享復(fù)用和日常維護(hù)，不能徹底將內(nèi)容與樣式的分離。因此可以利用外部樣式表進(jìn)一步將網(wǎng)頁(yè)內(nèi)容與格式分離，這種方法在CSS中使用的頻率最高。在頁(yè)面頭部區(qū)域，使用標(biāo)記鏈接一個(gè)外部的CSS文件，將“頁(yè)面內(nèi)容”和“樣式風(fēng)格代碼”分離成兩個(gè)、甚至多個(gè)文件，達(dá)到了頁(yè)面框架HTML代碼和CSS代碼的完全分離的效果，使得前期制作和后期維護(hù)變得容易。因此，網(wǎng)站所有樣式代碼都必須統(tǒng)一寫(xiě)在外部CSS文件中，通過(guò)鏈入外部樣式表的方式插入在HTML頁(yè)面的頭部。代碼格式如下：

至此，整個(gè)網(wǎng)站的首頁(yè)制作完成。

3? 結(jié)? 論

本篇以“大學(xué)計(jì)算機(jī)基礎(chǔ)”課程為例，提出MVC設(shè)計(jì)模式在網(wǎng)站設(shè)計(jì)模塊中的應(yīng)用，并以黨史（時(shí)政）學(xué)習(xí)教育網(wǎng)站項(xiàng)目為牽引，通過(guò)項(xiàng)目分析對(duì)該模塊教學(xué)內(nèi)容進(jìn)行了設(shè)計(jì)和實(shí)施，效果表明該教學(xué)方法具有一定的參考和實(shí)踐價(jià)值。

參考文獻(xiàn)：

[1] 賈順賀，陳建飛，陳古運(yùn)，等.基于MVC架構(gòu)的個(gè)人健康信息管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)應(yīng)用與軟件，2018，35（3）：43-48.

[2] 王玉英.基于JSP的MySQL數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)技術(shù) [J].現(xiàn)代計(jì)算機(jī)：專(zhuān)業(yè)版，2010（14）：67-70.

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

[4] 潘杰，周傳生.基于jQuery框架的Web研究與實(shí)現(xiàn) [J].沈陽(yáng)師范大學(xué)學(xué)報(bào)：自然科學(xué)版，2015，33（1）：96-99.

[5] 戴宏明，戴宏亮.基于CDIO理念的《HTML5網(wǎng)站設(shè)計(jì)》課程教學(xué)模式構(gòu)建 [J].現(xiàn)代計(jì)算機(jī)，2019（28）：52-56.

作者簡(jiǎn)介：劉旭（1981.02—），女，漢族，天津人，講師，碩士研究生，研究方向：網(wǎng)站設(shè)計(jì)、軟件工程等。

收稿日期：2023-01-04