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