HTML5 CSS3 Web前端设计课时授课计划.docx
《HTML5 CSS3 Web前端设计课时授课计划.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 Web前端设计课时授课计划.docx（17页珍藏版）》请在冰豆网上搜索。
HTML5CSS3Web前端设计课时授课计划
课时教学计划
教师姓名
时数
2
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第1章Web前端职业前景与重要理念
单元主要教学内容
认识网页与网站
教学目标
能力（技能）目标
知识目标
素质目标
1．认识网页与网站基础
2．了解网络设计行业前景与发展方向
3、熟悉工作界面
对软件有基本认识，对本学期学习内容有初步了解
网页设计是一门基础软件应用、艺术欣赏的课程。
学好本门课程需要学生有综合能力。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.网站建设的基本流程。
2.“结构与表现相分离”的重要思想。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第1章Web前端职业前景与重要理念
1.1了解Web前端工程师
1.1.1HTML5前端开发的前景与必要认知
1.1.2认识网页的构成元素
1.1.3了解专业术语
1.2重要理念——表现和结构相分离
1.2.1体验“表现和结构相分离”
1.2.2认识Web标准
1.3Web前端开发基本流程
1.3.1开发流程
1.3.2常用开发软件介绍
1.4使用记事本创建HTML5页面
1.5课堂动手实践
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第2章HTML5页面的构建与简单控制
单元主要教学内容
文档结构、列表、表格、多媒体、新增结构元素
教学目标
能力（技能）目标
知识目标
素质目标
能够使用记事本完成简单的页面效果。
掌握HTML和XHTML的基本概念、掌握HTML的语法、各种标签含义
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.HTML5的文档结构和编写规范。
2.认知HTML5主体结构类元素的含义。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第2章HTML5页面的构建与简单控制
2.1Dreamweaver的工作环境概述
2.1.1界面介绍
2.1.2常用工具栏和面板
2.2创建和管理站点
2.2.1创建站点
2.2.2“文件”面板的使用方法
2.2.3管理站点
2.3HTML5入门
2.3.1使用Dreamweaver构建“H5标准页面”
2.3.2DOCTYPE文档类型与基本结构元素
2.3.3HTML5常见元素
2.3.4HTML5新增结构元素
2.4课堂动手实践
课时教学计划
教师姓名
时数
6
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第3章CSS3基础入门
单元主要教学内容
站点、DIV元素、CSS入门、选择器
教学目标
能力（技能）目标
知识目标
素质目标
能够Dreamweaver和CSS制作简单页面。
1.熟悉Dreamweaver的工作环境；
2.了解站点及其相关知识，能够使用DW创建和管理站点,掌握CSS的基本语法；；
3.熟练掌握常用的CSS选择器，能够通过选择器修改指定对象的CSS规则。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.创建站点。
2.CSS语法与链接方法。
3.CSS选择器。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第3章CSS3基础入门
3.1CSS3的基础知识
3.1.1CSS介绍
3.1.2CSS的语法与注释
3.1.3CSS的引入方式
3.2盒模型
3.2.1盒模型的基本概念
3.2.2计算盒模型中的宽与高
3.3CSS3初级选择器
3.3.1通配符选择器
3.3.2类型选择器
3.3.3类选择器
3.3.4ID选择器
3.3.5后代选择器
3.3.6群组选择器
3.4CSS3高级选择器
3.4.1子元素选择器和相邻兄弟选择器
3.4.2属性选择器
3.4.3关于优先级
3.5使用CSS3基础知识完成页面简易美化——404页面的制作
3.6课堂动手实践
课时教学计划
教师姓名
时数
6
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第4章实现Web前端排版的基本美化
单元主要教学内容
文本、超链接、图像、各类CSS属性
教学目标
能力（技能）目标
知识目标
素质目标
能够熟练使用CSS控制文本和图像的尺寸、样式、颜色等。
1.掌握编辑文本和超链接的基本操作；
2.认知并熟练应用CSS控制文本的外观;
3.掌握插入图像的基本操作，以及与图像相关的CSS属性；
4.能够熟练运用CSS的内容实现图文混排效果。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.首行缩进、文本阴影。
2.文本溢出、伪类在超链接方面的应用。
3.图文混排。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第4章实现Web前端排版的基本美化
4.1控制文本
4.1.1CSS中字体属性与文本属性介绍
4.1.2WebFont与@font-face
4.1.3文本的首行缩进、行高和阴影
4.1.4文本溢出处理
4.2控制超链接
4.2.1文本链接、邮件链接与锚链接
4.2.2CSS伪类与超链接
4.3控制图像和颜色
4.3.1CSS中控制图像和颜色的基本属性
4.3.2仿“凤凰网”的图文混排
4.4课堂动手实践
课时教学计划
教师姓名
时数
6
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第5章浮动、定位和列表
单元主要教学内容
浮动、定位和列表
教学目标
能力（技能）目标
知识目标
素质目标
能够使用浮动属性创建横向导航。
掌握浮动、列表的使用方法、掌握CSS控制列表元素的相关属性知识。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.浮动与清除浮动。
2.纵向、横向导航。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第5章浮动、定位与列表
5.1浮动与清除浮动
5.1.1浮动
5.1.2清除浮动的3种方法
5.2CSS定位
5.2.1静态定位和固定定位
5.2.2相对定位和绝对定位
5.2.3相对于某一容器的绝对定位
5.3列表
5.3.1有关列表的CSS样式
5.3.2仿“天猫”首页的纵向导航
5.3.3仿“凤凰网”首页的横向导航
5.4仿“天猫电器城（手机馆）”的图文信息列表
5.5课堂动手实践
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第6章HTML5增强型表单与简易表格
单元主要教学内容
表格与表单
教学目标
能力（技能）目标
知识目标
素质目标
能够利CSS美化表单域。
掌握插入表格的方法、掌握与表格相关的CSS知识。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.细线表格
2.CSS在表单中的应用
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第6章HTML5增强型表单与简易表格
6.1表单的创建与编辑
6.1.1表单的基本知识
6.1.2常见的表单对象
6.2CSS控制表单
6.2.1搜索栏
6.2.2用户登录页面
6.2.3传统按钮、CSS3按钮与开源样式库按钮
6.3表格
6.3.1表格的基本概念及其简易操作
6.3.2细线表格
6.3.3隔行换色表格
6.4课堂动手实践
课时教学计划
教师姓名
时数
6
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第7章CSS3与HTML5的高级应用
单元主要教学内容
CSSSprite技术、CSS3渐变、动画
教学目标
能力（技能）目标
知识目标
素质目标
提升独立分析能力。
1.CSSSprite技术的原理;
2.CSS3有关渐变的实现方法；
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.CSSSprite技术。
2.CSS3动画的应用。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第7章CSS3与HTML5的高级应用
7.1CSSSprite技术
7.1.1CSSSprite技术分解
7.1.2CSSSprite技术的应用
7.2CSS3渐变
7.3CSS3动画
7.3.1变形——transform属性
7.3.2过渡——transition属性
7.3.3CSS3动画的应用——“幽灵按钮”
7.4CSS3选项卡
7.5HTML5Canvas
7.5.1创建画布并绘制简单图形
7.5.2Canvas坐标、线条与圆
7.6课堂动手实践
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第8章PC端典型页面的设计与实现
单元主要教学内容
Photoshop切片、从效果图到Web页面的整个工作过程
教学目标
能力（技能）目标
知识目标
素质目标
提升独立分析能力。
1.掌握Photoshop切片并输出的操作方法。
2.熟悉从效果图到Web页面的整个工作过程。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
Photoshop切片、从效果图到Web页面的整个工作过程
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第8章PC端典型页面的设计与实现
8.1Photoshop在Web前端的常见操作
8.1.1基础操作
8.1.2切片并输出
8.2页面布局规划与实现
8.2.1首页的实现
8.2.2列表页的实现
8.2.3内容页的实现
8.3课堂动手实践
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第9章多设备响应式页面的实现
单元主要教学内容
响应式Web设计
教学目标
能力（技能）目标
知识目标
素质目标
提升独立分析能力。
掌握mediaquery的基本语法和使用方法。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.响应式Web设计。
2.mediaquery。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第9章多设备响应式页面的实现
9.1响应式页面开发
9.1.1了解“响应式Web设计”
9.1.2viewport网页可视区域
9.1.3媒体查询详解
9.2“响应式”页面的设计与实现
9.2.1页面分析
9.2.2详细实施过程
9.3“响应式”框架介绍
9.4课堂动手实践
课时教学计划
教师姓名
时数
6
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第10章使用Bootstrap框架创建页面
单元主要教学内容
Bootstrap框架、Bootstrap栅格系统、Bootstrap框架中表单、图片、导航栏等组件的使用方法
教学目标
能力（技能）目标
知识目标
素质目标
提升独立分析能力。
了解Bootstrap框架的基础概念；能够使用Bootstrap框架搭建简单页面。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
Bootstrap框架
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第10章使用Bootstrap框架创建页面
10.1Bootstrap框架
10.1.1Bootstrap的环境配置
10.1.2Bootstrap栅格系统
10.1.3Bootstrap表格
10.1.4Bootstrap表单
10.1.5Bootstrap图片
10.1.6Bootstrap导航栏
10.2使用Bootstrap框架搭建简单页面
10.2.1页面结构分析
10.2.2页面搭建过程
10.3课堂动手实践
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程（学习领域）名称
《网页设计与制作》/《Web前端》/《HTML5》
章节
第11章WebApp类页面的设计与实现
单元主要教学内容
Bootstrap框架、Swiper插件、WebApp分析、设计与实现
教学目标
能力（技能）目标
知识目标
素质目标
提升独立分析能力。
熟悉WebApp类型网站的制作流程。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材“课堂动手实践”
教学重点
教学难点
1.Bootstrap框架。
2.WebApp的设计与实现。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第11章WebApp类页面的设计与实现
11.1WebApp开发基础知识
11.1.1开发模式概述
11.1.2手机屏幕基本知识
11.2Swiper插件
11.3“宇泽鲜风商城”WebApp页面分析与环境准备
11.3.1页面分析
11.3.2环境准备
11.4页面实现的详细过程
11.4.1首页的实现
11.4.2列表页的实现
11.4.3详细内容页的实现
11.5课堂动手实践
升级会员 