《网页设计与制作》实验课程教学大纲
一、课程简介
课程中文名 | 网页设计与制作 | ||||||||
课程英文名 | Website Design and Construction | 双语授课 | £是 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】 | 3.1关注行业的发展趋势和动态，保持开放和与时俱进的心态，积极适应行业的变化和挑战。 | 1，2，3 |
3.2具有较强的自主学习能力和视野拓展能力，并具备通过自主学习主动获取新知识、学习新方法、了解新技术发展动向的能力，具备一定的网络（含移动互联网）应用、内容产品研发能力和自主创业能力。 |
三、课程教学内容与方法
表3课程目标、教学内容和方法对应关系
序号 | 项目名称 | 项目来源 | 教学目标（观测点、重难点） | 学时数 | 项目类型 | 要求 | 每组人数 | 教学方法 | 课程目标 |
1 | 实验一：前端基础认识 | 实验教材 | 观测点：学生能够正确描述HTML、CSS、JavaScript的基本作用与关系。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，3 |
重难点：理解HTML结构、CSS样式与JavaScript交互的协同工作念、移动端特点以及H5交互设计要点。 | |||||||||
2 | 实验二：iVX平台基本操作与工具结构 | 实验教材 | 观测点：学生能够熟练使用iVX平台的基本操作，并能准确指出编辑器各部分的名称与功能。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2 |
重难点：掌握编辑器界面的布局与功能划分，熟悉平台的基本操作流程。 | |||||||||
3 | 实验三：定位环境与事件处理 | 实验教材 | 观测点：学生能够正确应用绝对定位与相对定位环境，并熟练处理事件触发与响应。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 2 |
重难点：理解相对定位与绝对定位环境的区别，并掌握UI搭建规则。 | |||||||||
4 | 实验四：数据组件与数据绑定 | 实验教材 | 观测点：学生能够利用数据组件存储和绑定数据，并能实现复杂数据的操作。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
重难点：分清数据组件类型，掌握数据绑定的基本方法与复杂数据的操作技巧。 | |||||||||
5 | 实验五：循环创建与条件容器应用 | 实验教材 | 观测点：学生能够利用循环创建与条件容器实现动态内容的展示与控制。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2 |
重难点：理解循环创建的原理与用法，掌握条件容器的逻辑控制与三元表达式的应用。 | |||||||||
6 | 实验六：数据库应用与基础服务 | 实验教材 | 观测点：学生能够了解并调用数据库基础服务。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
重难点：掌握服务的定义、调用原则与操作规范。 | |||||||||
7 | 实验七：实战训练：问答系统 | 实验教材 | 观测点：学生能够独立完成问答系统的设计与实现。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1 |
重难点：掌握条件控制与全文搜索的应用技巧。 | |||||||||
8 | 实验八：网站/app/小程序设计 | 教师开发 | 观测点：学生能够根据需求完成网站/app/小程序的整体设计，包括布局、配色、内容等。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 2 |
重难点：网站/app/小程序设计的可用性与易用性。 | |||||||||
9 | 实验九：实战训练：手机注册登录 | 实验教材 | 观测点：学生能够利用demo组件实现手机注册登录功能。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，3 |
重难点：熟练使用现成模块。 | |||||||||
10 | 实验十：个人作品制作与展示 | 教师开发 | 观测点：学生能够根据自己设计的原型，完整制作并实现一个个人网站/app/小程序作品，并展示其功能逻辑。 | 3 | 演示性 | 必做 | 1 | 课堂讲授 | 1，2，3 |
重难点：UI搭建技巧与API的应用。作品的完整性与功能实现的质量。 |
四、课程考核
（一）考核内容与考核方式
表4-1 课程目标、考核内容与考核方式对应关系
课程目标 | 考核内容 | 所属 学习项目 | 考核占比 | 考核方式 |
课程目标 1 |
| 授课与练习 | 42% | 平时成绩、期中成绩、期末成绩 |
| ||||
| ||||
课程目标 2 |
| 个人网页/APP/小程序的设计 | 34% | 平时成绩、期中成绩、期末成绩 |
| ||||
| ||||
| ||||
课程目标 3 |
| 个人网页/APP/小程序的实现 | 24% | 平时成绩、期中成绩、期末成绩 |
| ||||
| ||||
|
表4-2 课程目标与考核方式矩阵关系
课程目标 | 考核方式 | 考核占比 | ||
期末成绩比例60% | 期中成绩比例20% | 平时成绩比例20% | ||
课程目标1 | 40% | 40% | 50% | 42% |
课程目标2 | 30% | 40% | 40% | 34% |
课程目标3 | 30% | 20% | 10% | 24% |
（二）成绩评定
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级开始执行。
