广播电视学专业——《网页设计与制作》实验课程教学大纲

《网页设计与制作》实验课程教学大纲

一、课程简介

课程中文名

网页设计与制作

课程英文名

WebsiteDesignandConstruction

双语授课

£是R否

课程代码

27122077

课程学分

2

总学时数

32

课程类别

□专业基础课程

R专业核心课程

□专业选修课程

□其他

课程性质

£必修

R选修

£其他

课程形态

□线上

R线下

□线上线下混合式

□社会实践

□虚拟仿真实验教学

考核方式

□闭卷□开卷□课程论文R课程作品□汇报展示£报告

R课堂表现□阶段性测试R平时作业□其他(可多选)

开课学院

传媒学院

开课

系(教研室)

网络与新媒体

面向专业

广播电视学

开课学期

第5学期

课程负责人

李舒迪

审核人

贾森

先修课程

数字图像处理

后续课程

选用教材

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:拓展技能【M】

2.1具备开拓创新精神,具备在信息更新迭代中不断拓展新领域的能力。

1

毕业要求3:终身学习能力【M】

3

3.2不断提高自己的创造力和创新性,更好地适应市场变化和需求。

三、课程教学内容与方法

表3课程目标、教学内容和方法对应关系

项目名称

教学目标(观测点、重难点)

学时数

项目类型

要求

每组人数

教学方法

实验一:前端基础认识

实验教材

观测点:学生能够正确描述HTML、CSS、JavaScript的基本作用与关系。

演示性

必做

课堂讲授

1,2,3

重难点:理解HTML结构、CSS样式与JavaScript交互的协同工作念、移动端特点以及H5交互设计要点。

实验二:iVX平台基本操作与工具结构

观测点:学生能够熟练使用iVX平台的基本操作,并能准确指出编辑器各部分的名称与功能。

4

重难点:掌握编辑器界面的布局与功能划分,熟悉平台的基本操作流程。

实验三:定位环境与事件处理

观测点:学生能够正确应用绝对定位与相对定位环境,并熟练处理事件触发与响应。

重难点:理解相对定位与绝对定位环境的区别,并掌握UI搭建规则。

实验四:数据组件与数据绑定

观测点:学生能够利用数据组件存储和绑定数据,并能实现复杂数据的操作。

重难点:分清数据组件类型,掌握数据绑定的基本方法与复杂数据的操作技巧。

5

实验五:循环创建与条件容器应用

观测点:学生能够利用循环创建与条件容器实现动态内容的展示与控制。

重难点:理解循环创建的原理与用法,掌握条件容器的逻辑控制与三元表达式的应用。

6

实验六:数据库应用与基础服务

观测点:学生能够了解并调用数据库基础服务。

重难点:掌握服务的定义、调用原则与操作规范。

7

实验七:实战训练:问答系统

观测点:学生能够独立完成问答系统的设计与实现。

1,3

重难点:掌握条件控制与全文搜索的应用技巧。

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级开始执行。

THE END
1.web网页设计作业/web期末作业设计网页/网页设计期末作业带演示这个“大学生web网页制作设计期末大作业【6个页面+多元素组合】”项目,旨在检验学生的网页设计与开发能力,同时也体现了他们对网页布局、交互设计以及多媒体整合的理解。 首先,我们关注的是网页设计的基本组成 【Web网页设计制作-毕业设计期末大作业源码】灰色简洁清爽bootstrap后台演示模板5235.zip https://download.csdn.net/download/dhyuan_88/90002783
2.网页设计期末作业网页定做网,提供简单大学生HTML静态网页成品下载,网页作业,网页毕业设计,网页作业下载,网页设计作业,Dreamweaver/DW网页网页设计,原创网页毕业设计制作课程设计大作业免费下载,给您专业的网页作业制作服务。网页设计制作作业成品下载尽在网页定做网。http://www.ylcp.online/
3.学生html静态网页模板,学生简单html静态网页模板html网页模板在当今数字化时代,教育领域对于高质量的网站设计需求日益增长。本文将探讨学生HTML静态网页模板的重要性,以及如何通过创新设计提升教育网站的整体效果。 精品网站模板:https://www.91084.com/ (已发布1000+款) 学生网页模板的重要性 学生HTML静态网页模板是教育网站的基础,它们为学生提供了一个展示学习成果和交流思想的https://m.163.com/dy/article/JJORHP4105568SD1.html
4.大学生网页设计成品个人网页制作HTML网页作业大学生HTML静态网页设计成品网提供PHP网页毕业设计作品、html css网页设计制作代码、DW网页设计与制作成品下载、网页定制代做,简单个人网页制作等。https://stu.iyuance.com/
5.200套web前端期末大作业HTML+CSS+JavaScript网页设计实例企业19.HTML学生网页设计作业成品~化妆品官方网站设计与实现(HTML+CSS+JS)共8个页面 20.HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript) 21.一套完整仿拉勾网HTML静态网页模板(含38个独立HTML) 22.HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS) https://blog.51cto.com/14890362/3317960
6.班级网页设计HTML模板源码,学生校园静态网页设计作业制作【公司企业】企业公司学生网站制作 DW大学生网页设计 【餐饮美食】川菜水煮鱼静态网页设计作业成品下载,大一 【个人博客】大学生个人网页成品 简单个人网站作业模板 【个人博客】个人主页网页设计 DW简单个人网页制作代 【人物明星】学生乐队网页设计成品 期末大作业网页设计个人https://www.stu-works.com/html/xiaoyuan/282.html
7.学生网页设计制作作业网页制作作业成品网页设计作业帮我作业网为有作业需求的大学生和代做作业的个人或商家提供信息交流平台,主要针对计算机方面:网页设计作业,网页制作作业,网页制作成品,计算机毕业设计代做,asp php asp.net c# java jsp动态网页作业,毕业设计论文等专业的课程作业, 期末作业和毕业设计。qq:182681http://www.85work.com/
8.HTML网页设计期末大作业展示 欢迎来到我的网页!这里是展示我多元才华的绝佳平台。 我的首页 - 这里是访问所有其他页面的起点。 我的简历 - 详细介绍我的教育背景和工作经验。 我的爱好 - 探索我在音乐、旅游和艺术等方面的兴趣。 ? 我的作品 - 展示我创作的艺术作品和设计作品。 https://mbd.baidu.com/newspage/data/dtlandingsuper?nid=dt_4623465826245073619
9.学生网页作业成品展示静态HTML网页设计制作技巧dreamweaver作以下为近期网页设计作业版面展示,每套均有多个页面相互超链接,在此只展示首页,更多网页作业设计内容可参考我的专栏 《网页作业设计与源码共享》 有用记得点赞△ 更多网页作业设计内容可参考我的专栏 《网页作业设计与源码共享》,如有网页设计问题也可在评论区咨询。https://zhuanlan.zhihu.com/p/417214629
10.web期末网页设计大作业(中华传统文化主题学生网页设计源码)HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 二、作品效果 视频演示 https://live.csdn.net/v/embed/240525 https://www.jianshu.com/p/76f0cb097b7e
11.网页设计与制作期末作业成品周末简设/ 01 / 前话 《周末·念奴娇》采用Dreamweaver软件制作,代码结构简单,DIV+CSS布局,目录结构为index.html页面和images文件夹。 / 02 / 图摘https://www.cnblogs.com/youtiy/p/15685103.html
12.网页制作教学设计(通用10篇)作为一名教学工作者,通常需要准备好一份教学设计,教学设计以计划和布局安排的形式,对怎样才能达到教学目标进行创造性的决策,以解决怎样教的问题。那么应当如何写教学设计呢?下面是小编为大家收集的网页制作教学设计(通用10篇),仅供参考,希望能够帮助到大家。 网https://xiaoxue.ruiwen.com/jiaoxuesheji/319726.html
13.山东省济南商贸学校计算机平面设计专业人才培养方案了解平面设计创意与制作相关知识,掌握海报、标志、VI、包装、书籍、网页、界面、字体、插画等视觉传达设计相关技能。 5.网页设计制作(72学时,4学分) 了解网页设计与制作的基础知识和规范要求,熟悉HTML和脚本语言相关知识,掌握站点创建、网页元素编辑、表格应用、层和框架布局、网页行为添加、样式与模板应用、表单元素使用https://smxx.jndjg.cn/index.php?r=space/school/portal/content/view&id=1368541&cid=1298279
14.HTML5+CSS3网页设计本课程主要讲述HTML5、CSS3、JQuery相关的知识和技术,通过对典型商业网站分析、模仿设计活动明析网站设计的流程与方法,通过制作各类型网页的实践活动,掌握网页结构搭建、页面布局与美化、页面特效制作的方法与技术,培养学生独立完成小型商业静态网站的设计与制作的能力。 http://spoc.abc.edu.cn/explore/courses/1353181787139710978