基于MVC模式的网站设计模...“大学计算机基础”课程为例_刘旭.pdf

2023 年 6 月 10 日第 7 卷 第 11 期现代信息科技Modern Information TechnologyJun.2023 Vol.7 No.111941942023.062023.06收稿日期：2023-01-04基于 MVC 模式的网站设计模块教学方法改革研究与实践以“大学计算机基础”课程为例刘旭，阚媛，郑贵省，田家远（陆军军事交通学院，天津 300161）摘 要：文章对“大学计算机基础”课程中网站设计模块存在的问题进行了阐述分析，借鉴 MVC 设计模式的模块化程度很高、可定制性等优点，将其应用到网站设计制作中。基于 MVC 的讲授方法是框架式精讲，能够让学员逻辑清晰地抓住核心内容。结合教学内容的特点设计案例项目，以项目为驱动，以问题为先导，以应用为目标，激发学员的好奇心和兴趣，更有助于自主性和创造性的提升。关键词：网站设计；MVC 模式；HTML；CSS中图分类号：TP39；G434 文献标识码：A 文章编号：2096-4706（2023）11-0194-05Research and Practice on Teaching Method Reform of Website Design Module Based on MVC ModeTaking“College Computer Foundation”Course as an ExampleLIU 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;CSS0 引 言网站设计模块的主要任务是学习网站首页的制作，主要涵盖 HTML5 和 CSS 两个方面的知识，但目前的授课方法，教员在教学中只单纯地传授知识或单纯地训练学员的某种技能，而忽略了培养学员的综合应用能力及创造能力。课后学员反馈，知识点零散，存在跟着老师会，一旦自己做就不好上手的情况，其根本就是知识点讲授过于集中，缺乏巩固环节，使用方法掌握不牢。传统的教学方法把学员的注意力聚焦在课程的理论知识上，导致学员的知识体系无法完整建立，对实际项目缺少必要的分析和开发/编程能力。1 MVC 模式通过教学现状和存在的问题分析，教学方式变革势在必行，本文提出了基于 MVC 模式的网站设计模块教学方法，此种设计模式将业务逻辑、数据、界面显示分开，使程序维护简单、移植便捷，高效实现功能扩展与重用，极大程度提升了程序开发效率。这种经典 MVC 模式的模块化程度很高，各部分负责DOI:10.19850/ki.2096-4706.2023.11.045完成不同的逻辑处理。借鉴 MVC 的设计模式，不再被网页版块内容牵着走，基于 MVC 模式重新设计教学内容，其中Model 为网页内容，View 为网页样式，Control 为网页超链接，实现了将 Model 内容和 View 样式代码分离的目的，从而使同一个内容可以使用不同的表现形式，使得代码大大减少，页面加载速度更快且易于维护，如果要进行全局更改，则只需更改样式，页面样式更加灵活，通过 Control 控制的设置使得页面控制更加清晰。MVC 三者之间关联如图 1 所示。模型Model用户界面View控制器Controlller图 1 MVC 模式三者关联图2 基于 MVC 模式的教学方法实践2.1 项目引入在案例项目设计的过程中，着重将思政教育、信息素养等嵌入到网站设计模块的课程教学中，因此提出将党史（时1951952023.062023.06第 11期政）学习教育作为网站主题。项目要求参照“中国党政干部学习网”首页，如图 2 所示，制作党史（时政）教育学习网站首页，要求页面结构简单明了，在色彩搭配上要突出主题，可以采用表格排版或者框架结构。网站页面制作要求涵盖多种标记，应包括：表格、表单、文本、图像、超链接、导航栏，等等；网站内容应包括：导航菜单栏设计、图片展示设计、图文混排设计、网页风格样式统一化设计，等等。图 2 中国党政干部学习网站首页界面2.2 项目分析2.2.1 项目教学目标及涉及的教学内容学习案例项目，能够掌握如下所示的教学目标：1）识记网络应用相关的基础知识。2）熟识访问网页的流程、URL 的格式及相关协议、网页文档的分类。3）熟识当前网页的基本框架，并具备网页架构、内容、美观等的鉴赏力，并且能够独立设计网页框架。4）能够独立创建、发布 HTML 网页文档。5）能够利用 HTML 常用标记实现网页内容的制作。6）能够利用 CSS 实现网页样式风格的统一。7）能够利用学习的知识，独立完成“党史（时政）学习教育”网站首页的制作。本案例项目对应院校教学大纲本科教育通用基础课程“大学计算机基础”中设定的教学内容要点，如表 1 所示。表 1 案例中涉及的教学内容、目标层次和重难点信息项目名称教学内容学习目标层次重点难点编号内容要点记忆理解运用分析综合评价党史（时政）学习教育网站首页制作1 网络应用相关的基础知识 2网页访问的流程、URL的格式及相关协议、网页文档的分类3 网页基本框架 4创建、发布 HTML 网页文档，相关网页编辑器5 HTML 常用标记的用法 6CSS 的引用方式和属性的用法2.2.2 项目分析通过上述分析，结合本门课程的课时安排，设定用 6 个学时来完成项目的理论教学与实践环节，具体如表 2 所示。表 2 项目学时划分项目名称理论教学实践教学学时合计研讨实操小计党史（时政）网站首页制作40226其中，表 1 中的教学内容 1、2 要求学员作为课前预备知识自学完成，以便在课上教学过程中能理解老师所用的术语含义、了解理论背景，并且在此基础上对教学内容 5、6提前预习。其知识点及对应的任务如图 3 所示。在此基础之上将讲授式课堂与研讨式课堂的优点相结合，在缩短授课时间的同时，通过框架式精讲又让学员逻辑清晰地抓住核心内容（学以致用）。每一次课堂讨论，学员都会有备而来，学习氛围浓厚，既加深了学员对知识的理解，又培养了学员的学习能力和表达能力。2.3 项目设计具体设计方案如下。第一课讲授网页框架及页面布局，比较用表格 table 与框架集 Frameset 的优劣势，并通过经典框架集的展示，介绍不同主题网页的特色、配色等，以及让学员以小组为单位讨论美观的网页都具备什么特点，从鉴赏的角度来导入项目设党史（时政）学习教育网站首页制作超文本标记语言HTML层叠样式表CSS1.表格标记的应用2.文本标记的应用3.图像标记的应用4.表单标记的应用5.超链接标记的应用6.CSS样式表美化文本格式7.CSS样式表美化图像格式8.CSS样式表美化表单格式9.CSS样式表美化超链接格式任务二：多行文本排版任务三：多图片排版任务一：表结构排版任务四：多元素注册页面设计任务五：锚点内容链接任务七：图文混排页面设计任务八：个性化按钮页面设计任务六：多行段落文本页面设计任务九：导航栏页面设计知识点知识点支撑性任务图 3 知识点及任务关联图刘旭，等：基于 MVC 模式的网站设计模块教学方法改革研究与实践1961962023.062023.06第 11期现代信息科技计的讲授。学员针对项目需求进行文字、图片、音视频等素材的采集，在此基础上完成页面布局。第二课介绍HTML常用标记（表格、文字、图片、表单），要求学员完成 Model 网页内容的编排设计及录入。第三课介绍 CSS 层叠样式表，要求学员利用 CSS 完成页面样式 View 的改版；再介绍超链接，利用超链接 Control来控制首页与各子页面之间的跳转。最后，给学员两周时间完成各组作品，两周后让学员进行作品展示，教员与其他组成员共同打分，从作品中选出优秀作品，从中进行教学反馈，改进教学设计。2.4 项目实施项目实施过程中，注重以学员为中心，倡导探究发现、交流合作，通过教学方法引导，促进学员知识建构的逐步完善，避免知识点死记硬背、机械训练等现象出现。项目实施步骤分为布局设计、内容编排、页面美化、页面控制，共四步。2.4.1 布局设计借鉴优秀网站设计案例，分析优秀网站首页元素，体会不同主题风格的网页之间的区别，为制作首页奠定基础，比如针对党政网站，应给人朝气蓬勃的感受，颜色上主要采用红黄搭配，图片上无论是背景图片还是配图，都常选用与党政有关的，比如党旗、党徽、天安门、华表（象征着中华民族）、长城、红色丝带、山脉大川，等等。此外，网站页面中的整体性也十分重要，应该做到“三统一”，即设计风格统一、色彩统一和布局统一，使页面的各个部分协调、融洽。采用主与次、动与静、聚与散等对比手法，突出网站页面主题鲜明而富有生气的特点。同时颜色不宜过多，否则整个页面就会缺少整体统一的感觉。首先让学员开始进行首页的第一步制作页面布局，页面的结构可采用表格布局，使得网页整体效果看起来清晰、整齐，如图 4 所示。图 4 网站首页布局界面2.4.2 内容编排在布局设计完成的基础上，下一步进行各版块内容主题的编排，要求学员列出页面各个栏目的具体主题，如图5所示。“党史学习教育”网站首页联系我们页面标题导航栏精神标语新闻动态学习资料互动论坛知识自测基层党建图文回顾友情链接版权信息图 5 网站首页各栏目内容图根据图 5 对各个分区栏目内容进行编排，如图 6 所示。图 6 网站首页栏目分区图利用百分比的形式给 width、height 赋值，使得页面能适应窗口大小变化，关键代码如下：1971972023.062023.06第 11期图 7 首页文字内容界面图图 8 首页全内容界面图 头部 导航栏 精神标语 第一课学员应完成上述界面的制作。根据图 6 将收集的文字、图片、音视频等素材输入到对应的页面分区中，图 7是只有文字部分的页面效果，图8是在此基础上添加了图片、视频、表单等之后的页面效果，到此完成网页内容 Model 部分的编排设计及录入。图 8 界面是第二课学员应完成的。但是通过观察发现，图中文字、图片格式与位置都存在问题，如矩形框中所示。背景只采用了最简单的白背景，网页元素的对齐位置、图文混排的样式都还需要进一步调整。下面要利用 CSS 层叠样式表对这些有问题的网页元素进行改进与完善，完成 View 的改版。2.4