《网页设计与制作》实验课程教学大纲
一、课程简介
课程中文名
网页设计与制作
课程英文名
WebsiteDesignandConstruction
双语授课
￡是R否
课程代码
27112061
课程学分
3
总学时数
48（含实践32）
课程类别
□专业基础课程
R专业核心课程
□专业选修课程
□其他
课程性质
R必修
□选修
￡其他
课程形态
□线上
R线下
□线上线下混合式
□社会实践
□虚拟仿真实验教学
考核方式
□闭卷□开卷□课程论文R课程作品□汇报展示￡报告
R课堂表现□阶段性测试R平时作业□其他（可多选）
开课学院
传媒学院
开课
系(教研室)
网络与新媒体
面向专业
开课学期
第4学期
课程负责人
李舒迪
审核人
张建雄
先修课程
数字图像处理
后续课程
无
选用教材
1.刘瑞新.网页设计与制作教程:Web前端开发[M].机械工业出版社,2021.
参考书目
1.张兵义.Web前端开发实例教程:HTML5+CSS3+JavaScript+jQuery[M].电子工业出版社,2022.
2.祝彬.新媒体创意设计[M].清华大学出版社,2022.
课程资源
课程简介
《网页设计与制作》课程旨在培养学生掌握前端设计与开发的核心技能。通过本课程的学习，学生将了解HTML、CSS和JavaScript等前端基础知识，熟悉iVX平台的基本操作与工具结构。同时，课程将引导学生掌握定位环境与事件处理、数据组件与数据绑定、循环创建与条件容器应用等关键技术。学生还将学习数据库应用与基础服务，设计并实现网站、app或小程序。
二、课程目标
表1课程目标
序号
具体课程目标
课程目标1
学生能够利用低代码编程平台进行网站/app/小程序的制作，能掌握定位环境与事件处理、数据组件与数据绑定、循环创建与条件容器应用等关键技术。运用服务组件实现所需功能，如从API接口获取数据，实现前后端数据的交互与处理。
课程目标2
学生能分析优秀网页设计的案例，理解并应用色彩、排版等美学元素，提升网页的视觉吸引力，美学素养得到提升。能结合用户需求与品牌定位，提出创意的网页设计方案，确定并执行设计计划。
课程目标3
学生能在团队项目中担任角色，与团队成员有效沟通，共同完成任务确保团队协作的顺利进行。能根据市场变化对产品内容进行不断改进与创新，能够进行项目展示与汇报，接受反馈并进行改进。
表2课程目标与毕业要求对应关系
毕业要求
指标点
课程目标
毕业要求1：艺术素养【H】
1.1具备高品质视觉文化传播理念、修养和能力。
2
毕业要求2：拓展技能【M】
2.1具备开拓创新精神，具备在信息更新迭代中不断拓展新领域的能力。
1，3
毕业要求3：终身学习【M】
1，2，3
3.2具有较强的自主学习能力和视野拓展能力，并具备通过自主学习主动获取新知识、学习新方法、了解新技术发展动向的能力，具备一定的网络（含移动互联网）应用、内容产品研发能力和自主创业能力。
三、课程教学内容与方法
表3课程目标、教学内容和方法对应关系
项目名称
教学目标（观测点、重难点）
学时数
项目类型
要求
每组人数
教学方法
1
实验一：前端基础认识
实验教材
观测点：学生能够正确描述HTML、CSS、JavaScript的基本作用与关系。
演示性
必做
课堂讲授
重难点：理解HTML结构、CSS样式与JavaScript交互的协同工作念、移动端特点以及H5交互设计要点。
实验二：iVX平台基本操作与工具结构
观测点：学生能够熟练使用iVX平台的基本操作，并能准确指出编辑器各部分的名称与功能。
1，2
重难点：掌握编辑器界面的布局与功能划分，熟悉平台的基本操作流程。
实验三：定位环境与事件处理
观测点：学生能够正确应用绝对定位与相对定位环境，并熟练处理事件触发与响应。
重难点：理解相对定位与绝对定位环境的区别，并掌握UI搭建规则。
4
实验四：数据组件与数据绑定
观测点：学生能够利用数据组件存储和绑定数据，并能实现复杂数据的操作。
重难点：分清数据组件类型，掌握数据绑定的基本方法与复杂数据的操作技巧。
5
实验五：循环创建与条件容器应用
观测点：学生能够利用循环创建与条件容器实现动态内容的展示与控制。
重难点：理解循环创建的原理与用法，掌握条件容器的逻辑控制与三元表达式的应用。
6
实验六：数据库应用与基础服务
观测点：学生能够了解并调用数据库基础服务。
重难点：掌握服务的定义、调用原则与操作规范。
7
实验七：实战训练：问答系统
观测点：学生能够独立完成问答系统的设计与实现。
重难点：掌握条件控制与全文搜索的应用技巧。
8
实验八：网站/app/小程序设计
教师开发
观测点：学生能够根据需求完成网站/app/小程序的整体设计，包括布局、配色、内容等。
重难点：网站/app/小程序设计的可用性与易用性。
9
重难点：熟练使用现成模块。
10
实验十：个人作品制作与展示
观测点：学生能够根据自己设计的原型，完整制作并实现一个个人网站/app/小程序作品，并展示其功能逻辑。
重难点：UI搭建技巧与API的应用。作品的完整性与功能实现的质量。
（一）考核内容与考核方式
表4-1课程目标、考核内容与考核方式对应关系
考核内容
所属
学习项目
考核占比
授课与练习
42%
平时成绩、期中成绩、期末成绩
个人网页/APP/小程序的设计
34%
个人网页/APP/小程序的实现
24%
表4-2课程目标与考核方式矩阵关系
期末成绩比例60%
期中成绩比例20%
平时成绩比例20%
40%
50%
30%
20%
10%
（二）成绩评定
1.平时成绩评定
出勤率：学生每堂课按时出勤。
课堂参与度：积极回答问题、参与讨论。
课堂作业：分析解读各式网页/APP/小程序设计案例，复刻网页/APP/小程序的UI。
平时成绩（100%）=出勤率（60%）+课堂参与度（20%）+课堂作业完成度（20%）
期中作业为分析解读网页/APP/小程序设计案例、并进行个人网页/APP/小程序的设计。设计是否有较强的实用性，符合UI设计基本准则，是否美观大方，是否有创意想法，内容结构、配色等设计是否具有美感，都是影响平时作业成绩的因素。
期中成绩（100%）=实用性（20%）+美观度（20%）+内容结构（20%）+创意（20%）+配色（10%）+符合UI设计基本准则（10%）
3.期末成绩评定
期末成绩通过考察学生完成的个人作品，来评判学生网页/APP/小程序设计与制作的综合能力。期末大作业是否基本实现规划设计的功能，实用性，是否有一定工作量，是否有创意想法，是否符合UI设计基本准则，系统结构是否清晰等因素，都在期末成绩的评定范围内。
期末成绩（100%）=基本实现规划设计的功能（30%）+工作量（20%）+创意想法（20%）+符合UI设计基本准则（10%）+系统结构清晰度（10%）+实用性（10%）
（三）评分标准
表5评分标准（非试卷考核项目）
考核项目
评分标准
优秀
(100>x≥90)
良好
(90>x≥80)
中等
(80>x≥70)
及格
(70>x≥60)
不及格
(x<60)
基本实现规划设计的功能
学生完全按照规划设计要求实现了所有功能，且功能运行稳定、无误。
学生大部分实现了规划设计的功能，仅有个别小功能未能实现或存在细微瑕疵。
学生实现了规划设计的主要功能，但部分功能存在缺陷或未能完全实现。
学生实现了规划设计的基本功能，但存在较多功能缺失或运行不稳定。
学生未能按照规划设计要求实现功能，或实现的功能严重不符合要求。
工作量
作品内容丰富，工作量饱满，设计元素多样，制作精细。
作品内容较为丰富，工作量适中，设计元素较为齐全。
作品内容基本符合要求，工作量一般，设计元素有限。
作品内容较为简单，工作量不足，设计元素较少。
作品内容简单，工作量严重不足，缺乏设计元素。
创意想法
作品设计新颖独特，具有较高的创新性和吸引力，能够体现学生的独立思考和创意能力。
作品设计具有一定的创意，能够体现学生的思考和尝试，但创新性有限。
作品设计较为常规，缺乏明显的创新性和吸引力。
作品设计较为平庸，缺乏创意和新意。
作品设计缺乏创意，内容陈旧，未能体现学生的独立思考能力。
符合UI设计基本准则
作品完全符合UI设计基本准则，布局合理，色彩搭配和谐，视觉效果出色。
作品基本符合UI设计基本准则，布局较为合理，色彩搭配尚可，视觉效果良好。
作品在UI设计方面存在一定问题，布局或色彩搭配不够合理，视觉效果一般。
作品在UI设计方面存在较多问题，布局混乱，色彩搭配突兀，视觉效果较差。
作品严重违反UI设计基本准则，布局混乱无序，色彩搭配不合理，视觉效果极差。
系统结构清晰度
系统结构清晰，逻辑性强，用户能够轻松理解和使用作品。
系统结构较为清晰，逻辑基本合理，用户能够较容易地理解和使用作品。
系统结构基本合理，但存在一些逻辑不够清晰的地方，用户理解和使用作品有一定难度。
系统结构较为混乱，逻辑性不强，用户使用作品时感到困惑。
系统结构混乱无序，逻辑性差，用户难以理解和使用作品。
实用性
作品实用性强，功能完善，操作便捷，能够满足用户的实际需求。
作品实用性较好，功能基本完善，操作较为便捷。
作品实用性一般，部分功能或操作不够便捷，用户体验有待提升。
作品实用性较差，很多功能或操作不够实用，用户体验不佳。
作品缺乏实用性，无法满足用户的实际需求，操作体验极差。
本课程大纲依据2023年网络与新媒体专业培养方案，由传媒学院网络与新媒体系讨论制定，传媒学院教学工作委员会审定，教务处审核批准，自2023级开始执行。