网页设计与制作HTML+CSS授课计划教案教学进度.docx
- 文档编号:11775314
- 上传时间:2023-04-01
- 格式:DOCX
- 页数:33
- 大小:20.45KB
网页设计与制作HTML+CSS授课计划教案教学进度.docx
《网页设计与制作HTML+CSS授课计划教案教学进度.docx》由会员分享,可在线阅读,更多相关《网页设计与制作HTML+CSS授课计划教案教学进度.docx(33页珍藏版)》请在冰豆网上搜索。
网页设计与制作HTML+CSS授课计划教案教学进度
编号:
教学进度表
教学周别
教学内容
时数
执行情况
1
单元一网页赏析、创建站点与浏览网页
4
2
单元二网站项目开发环境搭建
4
3
单元三图文混排网页的制作
4
4
单元四表格与表格布局网页的制作
4
5
单元四表格与表格布局网页的制作
4
6
单元五包含flash元素和超级链接的网页制作
4
7
单元六表单网页的制作
4
8
单元六表单网页的制作
4
9
单元七CSS布局与网页美化
4
10
单元七CSS布局与网页美化
4
11
单元七CSS布局与网页美化
4
12
单元八网站首页的设计与制作
4
13
单元八网站首页的设计与制作
4
14
单元八网站首页的设计与制作
4
15
单元九网站列表页的设计与制作
4
16
单元九网站列表页的设计与制作
4
17
单元十网站详情页的设计与制作
4
18
单元十网站详情页的设计与制作
4
编号:
HTZY-P13-R17-02
2018∽2019学年度第二学期
教案
课程名称:
网页设计与制作(HTML+CSS)
教研室:
广告教研室
使用教材:
网页设计与制作项目教程
20年月
教案(首页)
课程名称
网页设计与制作(HTML+CSS)
总计:
64学时
课程类别
专业基础课
学分
4学分
理实一体化
任课教师
授课对象
教材信息和主要参考资料
《网页设计与制作项目教程》
教
学
目
的
和
要
求
本课程要求采用W3C国际标准,采用手写代码的方式,设计一个网站项目的三个页面(首页、列表页、详情页),从而积累网页设计与制作的经验,提高综合应用所学知识的能力,提高团队协作的能力,具体目标如下:
●培养网页设计与制作的整体思想;
●培养网页布局的综合能力;
●提高手写代码的能力;
●培养独立学习、吸取他人的经验、探讨技术的习惯;
●培养创意、团队协作能力。
教
学
重
点
及
难
点
教学重点:
网站首页的设计与制作
网站列表页的设计与制作
网站详情页的设计与制作
教学难点:
网站首页的设计与制作
网站列表页的设计与制作
网站详情页的设计与制作
注:
课程类别:
必选、限选、任选、实验课
教学单元1 网页赏析、创建站点与浏览网页
网页赏析、创建站点与浏览网页学时:
4学时
教学目标
1.学会创建本地站点和管理本地站点
2.熟悉Dreamweaver的工作界面
3.熟悉浏览器窗口的基本组成和网页的基本组成元素
4.了解网站与网页的相关概念
5.认识网页的基本布局结构
6.了解一些制作网页、处理图像、制作动画的工具
7.能分析优秀网页的布局结构、颜色搭配、视觉效果等
任务描述
1.站点的创建与管理
2.认识网页、网站和浏览器窗口的基本组成
3.认识网页的基本组成元素和网页的布局结构
4.了解制作网页的常用软件
5.了解网页的相关概念和术语
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课程分析与操作准备
∙启动浏览器(例如IE浏览器),然后在地址栏中输入相应的地址并回车就能浏览该网页
引导教学法
2
网页效果浏览
∙创建“北京大学”站点并浏览网页
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙站点的创建与管理
∙网页的相关概念、术语与网页的主要构成元素
∙Dreamweaver的界面布局与工作环境
案例教学法
4
模仿训练
∙学生分组浏览指定的网站,分析网页的结构、色彩和组成元素
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙赏析“绿色食品”网的首页
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳网页的相关概念、术语与网页的主要构成元素
∙指出学生操作过程中容易出现的错误
讲授法
9
新课提示
∙预习网站项目开发环境搭建的相关知识
讲授法
教学单元2 网站项目开发环境搭建
网站项目开发环境搭建学时:
4学时
教学目标
1.熟悉手册的基本界面,能灵活使用手册查询相关内容和自我学习
2.熟悉编辑器(SublimeText)的工作界面
3.熟悉Html的文档结构
4.能定义Html的文件信息
5.能熟练地使用创建好的HTML骨架
6.了解网页文件头内容的设置方法
7.掌握谷歌浏览器审查元素的方法
任务描述
1.手册(w3school完整版.chm)的使用
2.编辑器(SublimeText)的使用
3.创建HTML骨架
4.使用谷歌浏览器(GoogleChrome)审查元素
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
引导教学法
2
方法引导与操作示范
∙手册(w3school完整版.chm)的使用
∙编辑器(SublimeText)的使用
∙创建HTML骨架
∙使用谷歌浏览器(GoogleChrome)审查元素
案例教学法
3
模仿训练
∙学生模仿完成“网站项目开发环境搭建”项目
∙教师巡视答疑
案例教学法
4
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
5
课堂小结
∙归纳“网站项目开发环境搭建”项目的相关知识
∙指出学生操作过程中容易出现的错误
讲授法
6
新课提示
∙预习制作图文混排网页的相关知识
讲授法
教学单元3 图文混排网页的制作
图文混排网页的制作学时:
4学时
教学目标
1.掌握对网页文档的基本操作
2.掌握设置网页整体属性的操作方法
3.掌握在网页中输入文字、编辑文本、设置文本属性、设置项目列表、输入空格、文本换行的操作方法
4.掌握在网页中插入特殊字符、插入水平线和插入日期的操作方法
5.掌握在网页中插入图像、鼠标经过图像、的方法
6.掌握设置页面背景图像和图像属性的方法
7.能创建与管理站点
8.能进行页面控制
9.能进行文本操作
10.能在网页中进行图文混排
11.熟悉HTML的基本结构
任务描述
1.站点的创建与管理
2.在网页中进行页面控制
3.制作文本网页
4.制作图文混排的网页
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
引导教学法
2
网页效果浏览
∙“北京大学”2013年开学典礼的图文混排网页的制作
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙编辑器的使用
∙站点的创建与管理
∙设置段落格式和文档结构
∙创建项目列表和编号列表
∙插入特殊字符、水平线、日期对象
∙在页面中插入图像
∙设置图像属性
案例教学法
4
模仿训练
∙学生模仿完成介绍“北京大学”2013年开学典礼的图文混排网页项目的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙“绿色食品”的图文混排网页的制作
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳制作图文混排网页的相关知识
∙指出学生操作过程中容易出现的错误
讲授法
9
新课提示
∙预习表格与表格布局网页制作的相关知识
讲授法
教学单元4 表格与表格布局网页的制作
表格与表格布局网页的制作学时:
8学时
教学目标
1.能正确地插入表格,并合理地设置表格的属性
2.能正确地在表格中插入嵌套表格,并合理地设置嵌套表格的属性
3.掌握单元格的合并、拆分、插入和删除的操作方法
4.能正确地设置表格中行和列的属性
5.能正确设置表格、单元格的背景图像和背景颜色
6.能正确地在表格中输入文字并定位
任务描述
1.在网页中插入表格
2.设置表格和单元格属性
3.在表格中插入网页元素
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
引导教学法
2
网页效果浏览
∙“北京大学”搜索情况统计表的制作
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙插入表格
∙设置表格属性
∙插入嵌套表格
∙单元格属性设置
∙在表格中插入网页元素
案例教学法
4
模仿训练
∙学生模仿完成“北京大学”搜索情况统计表的项目的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙“绿色食品”销售情况统计表的制作
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳制作表格布局的网页的相关知识
∙指出学生操作过程中容易出现的错误
讲授法
9
新课提示
∙预习包含flash元素与超级链接的网页的相关知识
讲授法
教学单元5 包含flash元素和超级链接的网页制作
包含flash元素和超级链接的网页制作学时:
4学时
教学目标
1.能创建网页的内部链接和外部链接2、能在图像中设置热点区域,并创建图像热点链接
3.能创建命名锚记和到该命名锚记的链接4、能创建电子邮件链接
5.能更改链接颜色、设置链接的打开方式、设置空链接
6.能测试链接的有效性7、能正确地插入flash动画
8.进一步熟悉使用表格进行网页布局,灵活设置表格及单元格的属性
9.掌握滚动图片的方法10、掌握绝对路径和相对路径以及链接的类型
任务描述
1.在网页中插入Flash动画或图像
2.在网页中创建多个超级链接
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
引导教学法
2
网页效果浏览
∙“北京大学”包含flash元素和超级链接的网页制作
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙创建外部链接
∙创建内部链接
∙创建电子邮件链接
∙创建锚点链接
∙创建图像热点链接
∙创建文件下载链接
∙创建空地址链接
∙检查链接
∙创建文字形式的导航栏
∙实现滚动图片功能
案例教学法
4
模仿训练
∙学生模仿完成“北京大学”包含flash元素和超级链接的网页项目的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙“绿色食品”包含flash元素和超级链接的网页制作
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳制作包含flash元素和超级链接网页的相关知识
∙指出学生操作过程中容易出现的错误
讲授法
9
新课提示
∙预习表单网页制作的相关知识
讲授法
教学单元6 表单网页的制作
表单网页的制作学时:
8学时
教学目标
1.能在网页中正确插入表单域
2.能在表单域中正确插入各项表单控件
任务描述
1.在网页中插入表单域
2.设置表单域的属性
3.在表单域中插入表单控件
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
引导教学法
2
网页效果浏览
∙北京大学新生注册表单网页的制作
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙插入表单域
∙插入表单控件
∙设置表单域属性
∙设置表单控件属性
案例教学法
4
模仿训练
∙学生模仿完成北京大学新生注册表单网页项目的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙绿色食品表单网页的制作
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳制作表单网页的相关知识
∙指出学生操作过程中容易出现的错误
讲授法
9
新课提示
∙预习使用DIV+CSS布局网页的相关知识
讲授法
教学单元7 CSS布局与网页美化
CSS布局与网页美化学时:
12学时
教学目标
1.能创建美化页面元素的样式
2.能在使用DIV+CSS布局的网页中输入文字和插入各种页面元素
3.能应用美化页面元素样式美化网页
任务描述
1.创建美化页面元素的样式
2.输入文字和插入各种页面元素
3.应用美化页面元素样式美化网页
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
引导教学法
2
网页效果浏览
∙使用CSS布局与美化“北京大学”网页
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙创建美化页面元素的样式
∙美化页面元素样式属性的设置
∙在页面各个区块中输入文字或插入页面元素
∙应用美化页面元素样式美化网页
案例教学法
4
模仿训练
∙学生模仿完成使用CSS布局与美化“北京大学”网页项目的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙使用CSS布局与美化“绿色食品”网页
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳使用CSS美化网页的相关知识
∙指出学生操作过程中容易出现的错误
讲授法
9
新课提示
∙预习制作网站首页的相关知识
讲授法
教学单元8 网站首页的设计与制作
网站首页的设计与制作学时:
12学时
教学目标
1.能应用CSS样式设计网站首页的主体布局结构
2.能应用CSS样式设计网站首页的局部布局结构
3.能设计与制作导航栏
4.会插入SWF动画
5.会创建包含底部导航栏和版权信息的脚本文件
6.会设计用户登录表单
任务描述
1.设计首页的主体布局结构和局部布局结构
2.设计与制作包含导航栏的网页
3.设计包含底部导航栏和版权信息的脚本文件
4.制作首页。
5.在首页中插入SWF动画
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
∙创建名称为“北京大学”的本地站点
引导教学法
2
网页效果浏览
∙制作“北京大学”网站的首页
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙主页的主体布局结构和局部布局结构
∙CSS样式的创建与属性设置
∙导航栏的设计与制作
∙插入网页元素
∙超级链接的设置
案例教学法
4
模仿训练
∙学生模仿完成“北京大学”网站的首页的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙制作“绿色食品”网站的首页
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳制作一个网站的首页的相关知识
∙指出学生操作过程中出现的错误
讲授法
9
新课提示
∙预习制作网站列表页的相关知识
讲授法
教学单元9 网站列表页的设计与制作
网站列表页的设计与制作学时:
8学时
教学目标
1.能应用CSS样式设计网站列表页的主体布局结构
2.能应用CSS样式设计网站列表页的局部布局结构
3.能设计与制作导航栏
4.会插入SWF动画
5.会创建包含底部导航栏和版权信息的脚本文件
6.会设计用户登录表单
任务描述
1.设计列表页的主体布局结构和局部布局结构
2.设计与制作包含导航栏的网页
3.设计包含底部导航栏和版权信息的脚本文件
4.制作列表页
5.在列表页中插入SWF动画
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
∙创建名称为“北京大学”的本地站点
引导教学法
2
网页效果浏览
∙制作“北京大学”网站的列表页
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙列表页的主体布局结构和局部布局结构
∙CSS样式的创建与属性设置
∙导航栏的设计与制作
∙插入网页元素
∙超级链接的设置
案例教学法
4
模仿训练
∙学生模仿完成“北京大学”网站的列表页的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙制作“绿色食品”网站的列表页
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳制作一个网站的列表页的相关知识
∙指出学生操作过程中出现的错误
讲授法
9
新课提示
∙预习制作网站详情页的相关知识
讲授法
教学单元10 网站详情页的设计与制作
网站详情页的设计与制作学时:
8学时
教学目标
1.能应用CSS样式设计网站详情页的主体布局结构
2.能应用CSS样式设计网站详情页的局部布局结构
3.能设计与制作导航栏
4.会插入SWF动画
5.会创建包含底部导航栏和版权信息的脚本文件
6.会设计用户登录表单
任务描述
1.设计详情页的主体布局结构和局部布局结构
2.设计与制作包含导航栏的网页
3.设计包含底部导航栏和版权信息的脚本文件
5.制作详情页
6.在详情页中插入SWF动画
步骤
教学过程或教学环节
教学内容
教学方法建议
学时
(分钟)
1
课前操作准备与拓展训练评价
∙创建所需的文件夹,拷贝所需的资源
∙拷贝HTML骨架
∙创建名称为“北京大学”的本地站点
引导教学法
2
网页效果浏览
∙制作“北京大学”网站的详情页
项目教学法
任务驱动教学法
3
方法引导与操作示范
∙详情页的主体布局结构和局部布局结构
∙CSS样式的创建与属性设置
∙导航栏的设计与制作
∙插入网页元素
∙超级链接的设置
案例教学法
4
模仿训练
∙学生模仿完成“北京大学”网站的详情页的制作,允许一定的自由发挥
∙教师巡视答疑
案例教学法
5
模仿训练考核评价
∙教师指出学生模仿过程中可能出错和已经出错的知识点,并进行重点评析,加深印象,强化记忆
讲授法
6
拓展训练
∙制作“绿色食品”网站的详情页
分组教学法
案例教学法
7
拓展训练训练考核评价
∙组长:
根据考核标准对本组学生完成的项目进行评价
∙教师:
抽评学生完成的项目,并对错误操作给予及时纠正和提示
分组教学法
8
课堂小结
∙归纳制作一个网站的主页的相关知识
∙指出学生操作过程中出现的错误
讲授法
9
新课提示
∙预习网站的整合与发布的相关知识
讲授法
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 HTML CSS 授课 计划 教案 教学 进度