《网页设计与制作》 课程标准 网 页 设 计 与 制 作 课 程 标 准 《网页设计与制作》 课程标准 目 录 一、课程基本信息................................... 1 二、课程性质与任务 ..............................1 三、课程目标与要求 ..............................1 四、课程结构与内容 ..............................2 （一）课程结构................................. 2 （二）课程内容................................. 3 五、学生考核与评价 ..............................8 （一）学生考核................................. 8 （二）学生评价................................. 8 六、 教学实施与保障 ............................ 9 （一）教学实施................................. 9 （二）教学保障................................. 10 七、授课进程与安排 ............................11 八、附录 ................................... 14 《网页设计与制作》 课程标准 一、课程基本信息 【课程名称】 网页设计与制作 【适用专业】 计算机网络技术专业 【总课时】 72 课时 二、课程性质与任务 《网页设计与制作》是中等职业学校计算机网络技术专业的一门专业技能 课程，其功能是使学生掌握网页制作工具软件使用技能，培养具有良好的网页 设计与制作基本知识与技能，能够从事网页设计与制作(Web 前端开发)等工作 的技术人员。 课程内容的选取紧紧围绕网页设计与制作所需的职业能力培养需求，同时 融入了“1+X”Web 前端开发职业技能等级证书（初级）对网页设计与制作的 考核要求。 课程内容组织以 Web 前端工作岗位中的典型页面设计与制作任务为线索， 从静态到交互，从专项技能训练到综合技能实训，设计有五个项目，每个项目 又细分为多个任务，以项目为引领，通过学习任务整合工作岗位需要的知识与 技能。 本课程的建议课时数为 72 课时。 三、课程目标与要求 通过本课程的学习，学生了解国家标准有关网页设计与制作的基本规定与 基本要素，能创建本地站点并能制作合理布局的静态和交互式页面，能制作多 媒体网页以及移动终端网页，具备网页设计与制作(Web 前端开发)工作岗位需 要的基本职业技能和素养，养成认真负责和严谨细致的工作态度，最终通过 “1+X”Web 前端开发职业技能等级证书（初级）认证考核,并达成以下职业 能力目标： 1.素养目标 （1）逐渐养成认真负责、严谨细致、静心专注、精益求精的工作态度。 （2）具有较强创新精神、和创新能力。 （3）具有较强的自学意思和能力，不断更新知识。 （4）具备岗位快速适应能力和可持续性发展能力。 1 《网页设计与制作》 课程标准 （5）有较强的人际沟通能力，具有团队协作精神。 2.知识目标 （1）说出 Web 网页设计与制作开发环境搭建方法。 （2）说出常用的 HTML 标签的使用方法和注意事项。 （3）归纳说明使用 CSS 进行网页显示样式和布局的流程和方法。 （4）简述使用 JavaScript 基础语法和事件机制开发交互式页面的流程和 方法。 （5）简述使用 jQuery 框架常用 Api 开发交互式页面的流程和方法。 3.能力目标 （1）能熟练搭建 Web 前端开发环境。 （2）能根据应用需求熟练编写 HTML 静态 Web 网页。 （3）能根据应用需求熟练使用 CSS 进行 Web 页面布局样式设计。 （4）能根据应用需求熟练使用 JavaScript 原生语言开发交互式 Web 页面。 （5）能根据应用需求熟练使用 jQuery 框架开发交互式 Web 页面。 （6）能对简单网站页面开发进行需求分析。 （7）能使用 axure 等原型设计工具进行页面的简单原型设计。 四、课程结构与内容 （一）课程结构 本课程选用的教材是《“1+X”Web 前端开发（初级）》。基于岗位职业 能力需求，对接“网站设计与开发”星光杯市赛和国赛前端部分赛项要求，融 入“1+X”考证要求，将原有课程内容整合为五个教学项目。 2 《网页设计与制作》 课程标准 （二）课程内容 参考 项目 学习任务 技能与学习要求 知识与学习要求 学时 ● 能 下 载 与 安 装 正 确 版 本 的 ●归纳说明 HBuilder 和 Chrome HBuilder 和 Chrome 浏 览 的下载和安装方法。 器。 ●说出使用 HBuilder 创建并编写 ●能使用 HBuilder 创建并编写 简单的 html 文件的方法。 任务一：安 简单的 html 文件。 ●说出创建 web 前端项目的目录结 装网页开发 2 ●能正确创建 web 前端项目的 构的方法和目的。 工具 目录结构。 ●说出使用 HBuilder 运行 Web 页 ● 能 使 用 HBuilder 关 联 面的方法。 Chrome 浏览器运行 Web 页 面。 项目一：“生 ● 能 正 确 使 用 HTML 主 体 元 ●归纳说明使用 HTML 主体元素， 任务二：开 态保护”网站 素，段落元素，框架元素等构 段落元素，框架元素等构建静态 发网站静态 静态主页制作 建静态 Web 页面主体结构。 Web 页面主体结构的方法。 主页框架 4 与优化 ● 能 根 据 应 用 需 求 正 确 使 用 ●说出 HTML 文本标签、图片标 (10 学时) HTML 文本标签、图片标签、 签、超链接标签、列表等元素的使 超链接标签、列表等元素。 用方法。 任务三：使 ● 能 根 据 应 用 需 求 正 确 使 用 ● 说 出 根 据 应 用 需 求 正 确 使 用 用 HTML5 HTML5 新增的语义相关元素 HTML5 新增的语义相关元素创建 2 优化网站主 创建 H5 页面。 H5 页面的方法。 页 任务四：使 ● 能 根 据 应 用 需 求 正 确 使 用 ● 说 出 根 据 应 用 需 求 正 确 使 用 用 HTML5 HTML5 表单标签元素创建功 HTML5 表单标签元素创建功能更 表单标签为 能更加完备的页面表单控件。 加完备的页面表单控件的方法。 2 页面添加表 单 ● 能 正 确 使 用 CSS 元 素 选 择 ●归纳说明使用 CSS 元素选择器、 器、通配符选择器、属性选择 通配符选择器、属性选择器、id 选 器、id 选择器、类选择器、伪 择器、类选择器、伪类选择器、伪 项目二：“出 任务一：使 类选择器、伪元素选择器定位 元素选择器定位 HTML 页面元素 彩冬奥”网站 用 CSS 选择 HTML 页面元素。 的方法。 2 主页布局与优 器定位页面 ● 能 根 据 应 用 需 求 正 确 使 用 ●说出 CSS3 新增的兄弟选择器、 化(12 学时) 元素 CSS3 新增的兄弟选择器、属 属性选择器、伪类选择器、伪元素 性选择器、伪类选择器、伪元 选择器使用方法。 素选择器定位 HTML 页面元 3 《网页设计与制作》 课程标准 素。 任务二：使 ●能正确使用 CSS 背景属性、 ●说出使用 CSS 背景属性、字体属 用常见 CSS 字体属性、文本属性、尺寸属 性、文本属性、尺寸属性、列表属 2 属性控制页 性、列表属性、表格属性等控 性、表格属性等控制 HTML 页面 面显示样式 制 HTML 页面的显示样式。 显示样式的方法。 任务三：使 ● 能 根 据 应 用 需 求 正 确 使 用 ● 说 出 CSS3 新 增 的 背 景 相 关 属 用 CSS3 新 CSS3 新增的背景相关属性、 性、字体文本相关属性、变形动画 增属性控制 字体文本相关属性、变形动画 属性的使用方法。 2 页面显示样 属性控制页面显示样式。 式 ● 能 根 据 应 用 需 求 正 确 使 用 ●说出使用 CSS 盒模型的上下左 CSS 盒模型：上下左右、内外 右、内外边距、边框和轮廓等属性 任务四：使 边距、边框和轮廓等属性进行 进行 Web 网页布局设计的方法。 用 CSS 盒模 Web 网页布局设计。 ●归纳说明使用 CSS3 新增盒模型 2 型控制页面 ● 能 根 据 应 用 需 求 正 确 使 用 属性：圆角边框、outline-offset 布局 CSS3 新增盒模型属性：圆角 等 进 行 Web 页 面 布 局 设 计 的 方 边框、outline-offset 等进行 法。 Web 页面布局设计。 任务五：使 ● 能 根 据 应 用 需 求 正 确 使 用 ●说出使用 CSS 浮动属性、CSS 定 用 CSS 浮动 CSS 浮动属性、CSS 定位属性 位属性进行 Web 网页布局设计的 与定位属性 进行 Web 网页布局设计。 方法。 2 优化页面布 局 任务六：使 ● 能 根 据 应 用 需 求 正 确 使 用 ●归纳说明使用 CSS3 新增盒模型 用 CSS3 新 CSS3 新增盒模型属性：弹性 属性：弹性盒模型、圆角边框、 增盒模型属 盒模型、圆角边框、outline- outline-offset 等进行 Web 页面 2 性控制页面 offset 等进行 Web 页面布局 布局设计的方法。 布局 设计。 ● 能 根 据 应 用 需 求 正 确 使 用 ●归纳说明使用 JavaScript 基本语 任务一： JavaScript 基本语法编程：变 法：变量定义、分支循环等编写简 JavaScript 项目三：“传 量 定义 、 分支 循 环等 编 写程 单交互式 Web 页面 js 程序的方 2 基本语法学 统美食”网站 序。 法。 习与应用 页面特效开发 (使用 任务二：应 ● 能 根 据 应 用 需 求 正 确 使 用 ●归纳说明使用 JavaScript 数组操 JavaScript)(16 用 JavaScript 数组操作、对象机 作、对象机制、函数编写程序的方 学时) JavaScript 制、函数编写程序。 法。 2 数组、函数 与对象机制 4 《网页设计与制作》 课程标准 编程 任务三： ● 能 根 据 应 用 需 求 正 确 使 用 ●归纳说明使用 JavaScript 字符串 使用 JavaScript 字符串操作处理字 操作处理字符型数据的方法。 JavaScript 符串。 ●说出使用 JavaScript 正则表达式 2 正则表达 ● 能 根 据 应 用 需 求 正 确 使 用 处理字符串的方法。 式、字符串 JavaScript 正则表达式处理字 方法编程 符串。