1、网页设计与制作教案设计教 案2012 2013 学年第 二 学期学部工程技术学部教研室(实验室)动漫课 程 名 称网页设计与制作授 课 班 级11动漫主 讲 教 师职 称讲师使 用 教 材网页设计与制作案例教程主编：九州书源清华大学 教 案（首页） 至 12-13 学年第 二 学期课程名称网页设计与制作课程编码总计：72 学时讲课：36 学时实训：36 学时学 分4类别必修课（ ） 选修课（ ） 理论课（ ） 实践课（ ）任课教师奋职称 讲师授课对象专业班级：11动漫、 共 个班基本教材和主要参考资料教材：网页设计与制作案例教程主编：九州书源清华大学参考资料：网页设计与制作案例教程 主编:承欢
2、教学目的要求 教学目的：本课程是动漫专业的一门职业技术必修课，目的是使学生掌握有关建设的基本概念、创建的方法和步骤、重点掌握利用Dreamweaver软件来设计布局静态网页以及一些简单的JavaScript脚本语言、熟练掌握网页编写语言html，能够利用Dreamweaver来创建和设计一个，为以后学习Web动态网页的开发奠定基础。 教学要求：通过本课程的学习，要求学生掌握的相关概念，创建的方法和步骤，掌握网页编写语言html，DW软件的使用。教学重点难点教学重点：网页编写语言html，如何利用DW来布局网页，层，行为，模板，库。教学难点：如何利用表格的布局模式以及框架进行布局，CSS样式，行
3、为，模板。 网页设计与制作课程教案编制日期：2013 年 3 月 3 日授课时间第 一、二 周 课次2授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排8教学单元（教学章、节或主题）： Photoshop基本操作、网页与的概念。目的、要求（分了解、熟悉、掌握三个层次）：了解网页的基本概念、静态网页、动态网页、使用数据库的动态网页。了解的概念、主题、名称、风格、结构、发布。掌握网页语言html。 知识要点： 网页和的基本概念，网页的分类，网页语言html技能要点： 要能够从网络上找出每一种类型的网页，能够利用html来编写简单网页教学步骤： 举例-讲解-课堂练习-讲评教具及教学手段：（
4、如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 多媒体讲解、举例讲解、Internet网络。作业和思考题： 初步构想一个个人，包括名称、的栏目板块、的目录结构、结构，并预设的色彩搭配、的标准字体等。课后分析与小结： 通过学习，介绍了和相关的几个概念，从的整体规划出发，综合的主题、结构、风格、布局等多个方面阐述的制作构思，以及如何使用DW发布网页，使学生基本上了解了构建的流程及有关的基础知识，为以下各章打基础。第 页教 学 容（含时间分配）板书或旁注 PS概述 PS面板的基本操作 PS选区、图层的操作 建立之前的一些准备工作 与有关的一些概念 网页的概念与分类 的概念、主题
5、、风格、名称、结构 建立的过程 的整体规划 定位的主题和风格 构建出一个的目录框架和框架 发布网页 网页语言html授课时间第 三、四 周课次2授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排8教学单元（教学章、节或主题）： PS路径、通道、蒙版、DW基础。目的、要求（分了解、熟悉、掌握三个层次）：掌握建立本地站点的过程，DW的集成环境，熟练使用对象面板与属性面板，掌握简单界面元素的编辑。通过实验，能够利用DW创建本地站点，制作几含有简单界面元素的网页，并进行相关的。知识要点： 熟悉DW的集成环境，简单界面元素的编辑，网页的。技能要点： 能够利用DW创建本地站点，制作几含有简单界面
6、元素的网页，并进行相关的。教学步骤： 举例展示-讲解-小结-实验-讲评教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 多媒体讲解、举例讲解。作业和思考题： 教材P30P34课后分析与小结： 通过学习，学生掌握了建立本地站点的过程，DW的工作界面的组成，熟练使用对象面板与属性面板，简单的界面元素：文字、图像、Flash动画的编辑方法，区分了文件路径的三种表示方法，会懂得使用各种超级。第 页教 学 容（含时间分配）板书或旁注 PS路径、通道和蒙版的使用 建立本地站点并管理站点 制作简单的静态网页 使用对象面板在网页中插入文字、水平线、图像、Flash文件等简
7、单的元素 熟练使用属性面板设置对象的属性 多种超的设置方法 利用页面属性设置页面的属性值实验1： 创建本地站点、整体控制页面 文本操作与图像操作授课时间第 五、六 周课次2授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排8教学单元（教学章、节或主题）： 表格、框架和表单。目的、要求（分了解、熟悉、掌握三个层次）： 能够熟练利用表格、框架进行网页的布局，掌握表单的制作和验证。知识要点： 熟练掌握利用表格的布局模式进行网页的布局，表单的操作。技能要点： 表格布局模式的使用，表单的制作。教学步骤： 举例展示-讲解-小结-实验-讲评教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物
8、讲解、挂图讲解、音像讲解等） 多媒体讲解、举例讲解。作业和思考题： 教材P131P135课后分析与小结：表格对于容的定位是非常重要的。既可以利用表格来进行各种数据的设定，也可以进行文字区域及图像的定位，并利用布局视图来改变表格的布局。应用框架来进行页面的优化，方便用户的浏览。通过制作表单来进行调查、订单、搜索界面等，完成数据的采集，同时要了解表单的处理。第 页教 学 容（含时间分配）板书或旁注1 表格a) 创建表格b) 选择表格c) 设置表格、单元格属性d) 创建相册2 布局表格a) 绘制布局表格b) 设置布局表格、单元格属性c) 布局表格实例分析讲解3 框架a) 创建框架b) 保存框架c)
9、框架的选择、属性、的设置d) 框架实例分析讲解4 表单a) 创建表单b) 向表单添加对象c) 表单属性的设置与后台程序的d) 表单实例分析讲解实验2： 利用表格布局模式进行包含表单等网页元素的布局设计 利用框架进行网页的布局设计授课时间第 七、八 周课次2授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排8教学单元（教学章、节或主题）： 层、div布局目的、要求（分了解、熟悉、掌握三个层次）： 通过学习，学生要熟练掌握层的概念，层的常用具体的操作，包括层的创建、属性的设置、层的移动、排列、拖动、显示、隐藏，div布局。知识要点： 层的概念，层的创建、属性的设置、层的移动、排列、拖动、
10、显示、隐藏，div布局。技能要点： 层的创建、属性的设置、层的移动、排列、拖动、显示、隐藏,层的精确定位，div布局。教学步骤：举例展示-讲解-小结-实验-讲评教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 多媒体讲解、个别辅导。作业和思考题： 教材P166P168课后分析与小结：层和div布局技术是DW的优势所在，一方面应该熟练地使用层技术来完成页面元素的精确定位，另一方面通过设置与层有关的行为来制作具有动态效果的网页，不但能增加制作网页的兴趣，还会增加做好网页的自信心。第 页教 学 容（含时间分配）板书或旁注1 层的创建a) 创建新层b) 创建嵌套层
11、c) 熟悉层面板与属性面板2 层的基本操作a) 层的移动b) 调整层的大小c) 层的对齐、排列3 层的应用a) 拖动层b) 显示、隐藏层c) 层具体实例的分析讲解4 Div标签的使用实验3： 利用层制作拼图游戏 利用层制作动态显示的菜单 利用div技术来布局网页授课时间第 九、十 周课次2授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排8教学单元（教学章、节或主题）： 行为与时间轴目的、要求（分了解、熟悉、掌握三个层次）： 熟练掌握行为面板的使用方法，基本的行为操作，能利用时间轴创建沿路径运动的动画，利用行为与时间轴和层的结合来制作动态交互网页。知识要点： 行为与时间轴的概念。技能
12、要点： 基本行为的操作，行为与时间轴和层的结合来制作动态交互网页。教学步骤：举例展示-讲解-小结-实验-讲评教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 多媒体讲解、举例讲解、个别辅导。作业和思考题： 教材P211P212课后分析与小结：本章主要讲述了使用DW自带的行为来建立动态交互网页的方法，时间轴动画的制作，以及把时间轴和行为、层结合起来制作更为复杂的动画，这部分知识对制作富有动感的网页很有帮助。第 页教 学 容（含时间分配）板书或旁注1 行为a) 熟悉行为面板b) 添加行为c) 修改行为d) 行为常用的事件e) 应用行为i. 打开浏览器窗口ii.
13、 播放声音iii. 弹出信息iv. 设置文本v. 转到URLvi. 检查插件vii. 控制多媒体动画viii. 显示弹出式菜单2 时间轴a) 熟悉时间轴面板b) 利用时间轴进行层的移动i. 直线移动的动画ii. 拖动路径制作曲线移动动画iii. 记录路径制作曲线移动动画c) 利用时间轴改变图像d) 添加时间轴行为实验4： 利用行为与时间轴制作富有动态的网页授课时间第 十一周课次1授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排4教学单元（教学章、节或主题）： 多媒体对象目的、要求（分了解、熟悉、掌握三个层次）： 熟悉插入Flash和修改其属性的方法，了解插入和设置Flash视频、F
14、lashPaper文档、文字和按钮方法。知识要点： 熟悉插入Flash等多媒体对象和修改其属性的方法。技能要点： 熟悉插入Flash等多媒体对象和修改其属性的方法教学步骤：举例展示-讲解-小结-实验-讲评教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 多媒体讲解、举例讲解、个别辅导。作业和思考题： 教材P261-264课后分析与小结：本章介绍如何在网页中插入多媒体对象，因为这类文件可以把声音、图像结合在一起，其界面动感十足，所以在网上非常流行。在网页上不仅是插入这些对象，而且要保证相应的文件能够正常播放，学会安装各种各样的插件能丰富网页的容。第 页教 学
15、 容（含时间分配）板书或旁注1 Flash的使用a) 插入Flash对象的方法b) 设置属性、参数2 播放视频3 播放声音授课时间第 十二、十三 周课次2授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排8教学单元（教学章、节或主题）： 模板和库目的、要求（分了解、熟悉、掌握三个层次）： 掌握创建模板的方法，在模板中如何定义可编辑区域，如何应用模板建立具有统一风格的网页并更新当前站点，学会编辑库项目并应用库项目提高工作效率。知识要点： 模板和库。技能要点： 模板和库的使用教学步骤：举例展示-讲解-小结-实验-讲评教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解
16、、音像讲解等） 多媒体讲解、举例讲解、个别辅导。作业和思考题： 教材P278-279课后分析与小结：建设时，可以在网页中综合应用模板和库的相关知识，即把库放到模板中，让模板和库项目联合来更新。使用这种方法可以更好地维护网页，有利于减轻设计中的重复工作量。第 页教 学 容（含时间分配）板书或旁注1 模板a) 熟悉资源面板b) 创建模板c) 编辑模板d) 创建可编辑区域e) 重复区域f) 模板的应用g) 模板应用实例分析与讲解2 库a) 创建库b) 在文档中插入库项目c) 编辑库项目d) 库项目应用实例分析与讲解实验5： 利用模板和库制作授课时间第 十四、十五 周课次2授课方式（请打）理论课 讨论
17、课 实践课 习题课 其他课时安排8教学单元（教学章、节或主题）： CSS样式、div+css布局目的、要求（分了解、熟悉、掌握三个层次）： 掌握创建CSS样式表，熟练掌握CSS样式的属性项目设置方法，在文档中如何应用样式表，会管理样式表，div+css布局模式。知识要点： 熟练掌握CSS样式的属性项目设置方法，在文档中如何应用样式表，div+css布局模式。技能要点： 熟练掌握CSS样式的属性项目设置方法，在文档中如何应用样式表，div+css布局模式。教学步骤：举例展示-讲解-小结-实验-讲评教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 多媒体讲解、
18、举例讲解、个别辅导。作业和思考题： 教材P187-190课后分析与小结：样式表最大的一个优点就在于可以在多个页面甚至整个站点上应用它。尤其是修改了外部样式表时，它将自动更新所有使用它的网页，从而完成大量的页面修改工作。第 页教 学 容（含时间分配）板书或旁注1 创建CSS样式a) 熟悉CSS样式面板b) 新建CSS样式c) CSS样式规则对话框d) 熟练操作规则定义对话框e) 编辑样式f) 导入导出样式实验6： 利用DIV+CSS样式来统一整个授课时间第 十六十八 周课次3授课方式（请打）理论课 讨论课 实践课 习题课 其他课时安排12教学单元（教学章、节或主题）： 综合练习目的、要求（分了解、熟悉、掌握三个层次）： 利用所学过的知识制作一个自选的。知识要点： CSS的使用，div布局模式的使用，模板和库的使用，行为的使用等。技能要点： CSS的使用，div布局模式的使用，模板和库的使用，行为的使用等。教学步骤： 举例展示-讲解-辅导教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 多媒体讲解、个别辅导。作业和思考题： 课后分析与小结： 主要是训练如何利用CSS的使用，div布局模式的使用，模板和库的使用，行为的使用等来制作一个完整的，并进行发布。第 页教 学 容（含时间分配）板书或旁注
