《网页设计与制作》课程标准
一、课程基本信息
课程名称 | 网页设计与制作 | 课程编码 | xxyd23015 | ||||||
建议学时 | 154学时 | 其中实践学时 | 80学时 | 学时/学分 | 154学时/8学分 | ||||
课程类型 | □公共课专业基础课专业核心课 | 编制人 | 张焕民 | ||||||
课程性质 | 理论课理实一体□整周实训 | 审定人 | |||||||
制定日期 | 2023年12月15日 | 修订日期 | |||||||
先修课程 | 信息技术 | ||||||||
后续课程 | 响应式Web程序开发、移动端跨平台技术 | ||||||||
课程描述 | 本课程是移动应用开发专业必修的一门专业核心课程，是在信息技术基础上开设的一门理论+实践的课程，对接专业人才培养目标，面向Web前端工作岗位，培养学生具备一定的Web前端开发的职业素质，具备Web前端开发、创新能力，为后续响应式Web程序开发、移动端跨平台技术课程学习奠定基础的课程。 | ||||||||
课程目标 | 1.知识目标 A1. 了解本课程内容在Web开发领域的定位与作用； A2. 了解HTML、CSS及JavaScript技术的发展脉络、趋势及应用前景； A3. 熟悉HTML中的基本元素、文字与段落元素、图像元素、列表元素、表格元素、超链接元素、多媒体元素、框架元素及表单元素的语法、属性和参数等基础知识； A4. 掌握CSS中元素的语法、属性和参数等基础知识； A5. 了解网页布局的几种方法，掌握使用CSS进行网页布局、样式设计的基础知识； A6. 掌握JavaScript中的基本语法知识及DOM和BOM操作能力； 2.能力目标 B1. 具备使用HTML制作包含基本内容的网页的能力； B2. 具备使用HTML及CSS等技术来设计网页布局的能力； B3. 具备使用JavaScript技术来提高网页交互性、体验性的能力； B4. 具备综合使用HTML、CSS与JavaScript的相关知识，来丰富、渲染网页的能力； B5. 具备根据具体应用需求，创新性地设计网页的能力。
C1. 培养学生养成严谨认真的科学态度，耐心细致的工作作风； C2. 培养学生具备良好的交流沟通素养和创新精神; C3. 培养学生具备良好的职业道德和职业素养； C4. 培养学生具备在学习和工作中具备良好的职业规范。 | ||||||||
教学方式 | 讲授□讨论或座谈问题导向学习分组合作学习□专题学习 实作学习□发表学习□实习□参观访问□其他（模拟演练） | ||||||||
学习评价 | 评价项目 | 评价方式 （对应教学目标） | 分值 比例 | 评价标准 | |||||
过程性评价 | 平时评价 | 出勤、平时表现 | 20% | 出勤率：10%，平时作业及表现：10% | |||||
单元评价 | 单元知识点 | 10% | 单元知识点掌握情况10% | ||||||
期中评价 | 期中测验 | 10% | 期中测验成绩10% | ||||||
实践评价 | 实操能力 | 10% | 实际操作动手能力10% | ||||||
终结性评价（期末） | 期末考试 | 50% | 期末考试成绩50% | ||||||
指定教材 | 《》（作者，出版社，出版年份，ISBN号) | ||||||||
二、课程教学内容与进度
学时 | 章节（情境）名称与内容 | A知识目标代码 | B能力目标代码 | C素质目标代码 | 对应专业人才培养方案毕业能力要求指标点 |
2 | 第1章HTML、CSS、JavaScript综述 | A1、A2 | B1 | C1 | D1、D2、D3 |
2 | 第2章HTML基础介绍 2.1 HTML文档的结构 2.2 HTML基本语法 2.3 HTML文件的命名 2.4 编写HTML文件的注意事项 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 第3章HTML文件的整体结构 3.1 文件头部内容 3.2 主体内容＜body＞ | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 实验1 制作简单的HTML页面 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 第4章 文字与段落 4.1 编辑内容 4.2 文字效果 4.3 文字修饰 4.5 小实例——文字网页 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 第5章 建立和使用列表 5.1 列表类型 5.2 嵌套列表 5.3 小实例——列表在网页中的使用 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 第6章 超链接 6.1 超链接概述 6.2 超链接的路径 6.3 超链接的建立 6.4 设置图像映射 6.5 小实例——超链接的使用 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第7章 表格的应用 7.1 表格概述 7.2 插入表格＜table＞ 7.3 设置表格标记属性 7.4 设置表格行与单元格 7.5 表格嵌套 7.6 小实例——表格在网页中的应用 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 实验2 练习使用表格和和列表 要求使用表格、列表对数据进行格式化的显示 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第8章 层的应用 8.1 图层的创建——＜div＞ 8.2 创建嵌套图层 8.3 层的属性设置 8.4 小实例——图层的实际应用 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第9章 框架的应用 9.1 框架概述 9.2 框架的基本结构 9.3 设置框架 9.4 设置框架集＜frameset＞ 9.5 浮动框架＜iframe＞ 9.6 在框架上建立链接 9.7 小实例——框架的实际应用 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 实验3 练习使用框架 练习使用框架，来规划、设计页面内容，包括使用<frameset>及<iframe>框架技术 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第10章 表单的应用 10.1 表单概述 10.2 表单标记＜form＞ 10.3 信息输入＜input＞ 10.4 小实例——表单的实际应用 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 实验4 练习使用表单 练习使用表单，包括其action及method属性，并练习使用表单中的元素，包括文本框、列表框、文本域、单选框、复选框和按钮等内容 | A3 | B1 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 第11章 CSS样式表基础 11.1 CSS的概述 11.2 CSS的使用 11.3 插入CSS样式表 11.4 编写CSS文件 | A4 | B2 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第12章 字体的设置 12.1 设置字体——font-family 12.2 设置字号——font-size 12.3 设置字体样式——font-style 12.4 设置字体加粗——font-weight 12.5 设置字体变体——font-variant 12.6 组合设置字体属性——font 12.7 小实例——综合设置字体 | A4 | B2 | C1、C2、C3,、C4 | D1、D2、D3 |
2 | 实验5 练习使用CSS对字体进行设置 练习使用CSS，在HTML文件里进行调用，对字体进行设置，包括了对字体、字号、字体样式、加粗、字体变体、字体属性等的设置 | A4 | B2 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第13章 文本的精细排版 13.1 调整字符间距——letter-spacing 13.2 调整单词间距——word-spacing 13.3 添加文字修饰——text-decoration 13.4 设置文本排列方式——text-align 13.5 设置段落缩进——text-indent 13.6 调整行高——line-height 13.7 转换英文大小写——text-transform 13.8 小实例——综合应用文本属性 | A4 | B2 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 实验6 使用CSS来对文本进行精细排版 要求编写CSS文件，在HTML文件里进行调用，控制DIV显示效果，练习调整字符间距、单词间距、文字修饰、文本排列方式、段落缩进、行高英文大小写等内容 | A4 | B2 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第14章 图片和多媒体文件的使用 14.1 图片 14.2 滚动文字 14.3 插入多媒体文件——＜embed＞ 14.4 添加背景音乐——＜bgsound＞ 14.5 小实例——综合设置图片和多媒体 | A4 | B2 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第15章 CSS样式的高级应用 15.1 列表 15.2 定位 15.3 CSS层 15.4 鼠标指针——cursor 15.5 小实例——综合设置层样式 | A4 | B2 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 实验7 熟练使用CSS+DIV等元素进行网页布局设计 理解网页布局的几种方法，重点使用CSS+DIV进行网页布局设计 | A4 | B2、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第16章 颜色和背景 16.1 设置颜色——color 16.2 设置背景颜色——background-color 16.3 插入背景图片——background-image 16.4 插入背景附件——background-attachment 16.5 设置重复背景图片——background-repeat 16.6 设置背景图片位置——background-position 16.7 小实例——综合设置颜色和背景 | A4 | B2、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第17章 边框和边距 17.1 设计边框样式——border-style 17.2 调整边框宽度——border-width 17.3 设置边框颜色——border-color 17.4 设置边框属性——border 17.5 边距——margin-top/margin-bottom/margin-left/ margin-right/margin 17.6 填充——padding-top/padding-bottom/padding-left/ padding- right/padding 17.7 小实例——综合设置边框和边距 | A4 | B2、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第18章 JavaScript基础 18.1 JavaScript语言概况 18.2 第一个JavaScript程序 | A6 | B3、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第19章 JavaScript基本语法 19.1 基本数据类型 19.2 运算符 19.3 程序结构 19.4 函数 19.5 小实例——修改密码 | A6 | B3、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第20章 JavaScript事件分析 20.1 事件概述 20.2 主要事件分析 20.3 其他常用事件 | A5、A6 | B3、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第21章 JavaScript对象的应用 21.1 对象概述 21.2 浏览器内部对象 21.3 内置对象和方法 | A5、A6 | B3、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 实验8 编写JavaScript程序进行页面验证 要求编写一个JS程序文件，在另一个文件中对属性进行赋值，对方法进行引用，能够进行页面验证等功能 | A5、A6 | B3、B4 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 第22章 DOM操作 22.1 DOM简介 22.2 获取元素 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.3 事件 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.4 修改元素内容 22.5 修改元素属性 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：分时问候 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.6 修改表单属性 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：密码框明文 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.7 修改样式属性 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：二维码隐藏 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：排他思想 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：表单全选 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.8 获取自定义属性 22.9 设置移除自定义属性 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：tab切换 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.10 父子节点 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：下拉菜单 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.11 兄弟节点 22.12 创建和添加元素 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 案例：留言板 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.13 事件冒泡 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.14事件委托 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
4 | 22.15 鼠标事件 | A5、A6 | B3、B4、B5 | C1、C2、C3,、C4 | D1、D2、D3 |
注：本课程标准进度表部分可根据教学需要进行±10%调整。
三、课程实施与保障
1.课程思政
通过系列教学活动设计，将课程思政有效融入教学活动中，活动结束教师点评知识应用同时，对学生在完成任务中的出现的错误进行解析，指出学生需要提升或完善的能力和素质目标。例如分析学生测试结果，逐步提升学生的阅读理解力与观察力、分析判断能力；通过讨论、头脑风暴等活动逐步锻炼学生的逻辑思维能力、语言表达能力；通过实践教学环节强化学生的团队协作能力、安全操作意识、求真务实的工匠精神；通过Web网页的实际制作应用，提升学生解决实际问题的能力。
2.教学模式
采用线上线下混合式教学模式，教学过程中以应用案例教学为主。案例教学为学生提供了一种模仿、借鉴和引伸的范例，师生互动性强，充分体现以学生为中心的教育理念。强调从提出问题入手，激发学生学习的兴趣，让学生有针对性地去探索并运用理论知识，以提高分析和解决问题的能力。
3.教学基本条件
（1）教学团队基本要求
专职教师在10人，其中专职教师7人，来自企业的兼职教师3人。均具备双师素质资格，具有一定的实践经验，教学效果良好，职称和年龄结构合理。
（2）教学硬件环境基本要求
实施课程教学，校内应具备以下实训条件：多媒体专业教室、教学做一体化实训室和相关实训设备。
表 实训室配置与要求
序号 | 实训室名称 | 功能 （实训项目） | 面积、设备名称及台数要求 | 容量 |
1 | 移动应用开发实训室一 | 软件项目实训 | HP电脑（40套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套） | 40 |
2 | 移动应用开发实训室二 | 软件项目实训 | HP电脑（40套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套） | 40 |
3 | Web前端开发实训室 | 软件项目实训 | HP电脑（50套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套） | 50 |
4 | 网络基础实训室 | 软件项目实训 | HP电脑（40套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套） | 40 |
5 | 基础实训室 | 软件项目实训 | HP电脑（40套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套） | 40 |
教学资源基本要求
主要包括能够满足学生专业学习、教师专业教学研究和教学实施需要的教材、图书及数字资源等。
①基本教学资源：
1.教材选用基本要求按照国家规定选用 “十三五”规划优质教材以及校本自主研发教材。建立由专业教师、行业专家和教研人员等参与的教材选用机构，完善教材选用制度，经过规范程序择优选用教材。
2.图书文献配备基本要求图书文献配备能满足人才培养、专业建设、教科研等工作的需要，方便师生查询、借阅。专业类图书文献包括：有关专业理论、技术、方法、思维以及实务操作类图书和文献。
②数字教学资源：
建设、配备与本专业有关的音视频素材、教学课件、数字化教学案例库、虚拟仿真软件、数字教材等专业教学资源库，种类丰富、形式多样、使用便捷、动态更新、满足教学。
线上导学平台：学生通过提供基于教材本身又有扩展的视频、课件等学习资源，课前预习、测评，课后复习、考试、在线交流使用，实现“任何时间、任何地点、任何终端”的高效碎片化学习；供老师（项目经理、QA、项目助理）可以方便快捷准确的统计分析学生所有学习行为数据，极大的提升教学管理效率和效果。
