《网设计与制作》教案

ll页脚内容页脚内容PAGE34教 案2012～2013学年第二学期学 部 工程技术学部教研室(实验室) 动漫课 程 名 称 网页设计与制授 课 班 级 11动漫主 讲 教 师职 称 讲师使 用 教

网页设计与制作案例教程主编：九州书源清华大学出版社教 案（首页）课程课程编码网页设计与制作名称学分4课程课程编码网页设计与制作名称学分4学时类学别（）（）（）（）时学任时课陈奋职称讲师教师授授课专业班级：11动漫Ａ、Ｂ共２个班对象基本教材教材：网页设计与制作案例教程和主主编：九州书源要清华大学出版社参参考资料：网页设计与制作案例教程主编:陈承欢考资料学学教学目的：本课程是动漫专业的一门职业技术必修课，目的是使学生掌握有关网站建设的基本概念、创建网站的方法和步骤、重点掌握利用DreamweaverJavaScript脚本语言、熟练掌握网页编写DreamweaverWeb动态网页的开发奠定基础。目的教学要求：通过本课程的学习，要求学生掌握网站的相关概念，创建网站的方法和步骤，掌握网页编写语言html，DW软件的使用。要求教学htmlDW来布局网页，层，行为，模板，库。教学难点：如何利用表格的布局模式以及框架进行布局，CSS样式，行为，模板。重点难点《网页设计与制作》课程教编制日期：2013年3 月3 日授课 第一、二周 课2时间 次方式（打√）

课时理论课√□讨论课□实践课□习题课□其他□ 8安排教学单元（教学章、节或主题：Photoshop基本操作、网页与网站的概念。目的、要求（分了解、熟悉、掌握三个层次：了解网页的基本概念、静态网页、动态网页、使用数据库的动态网页。了解网站的概念、主题、名称、风格、结构、发布。掌握网页语言html。知识要点：网页和网站的基本概念，网页的分类，网页语言html技能要点：要能够从网络上找出每一种类型的网页，能够利用html来编写简单网页教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注PS概述教学步骤：举例->讲解->课堂练习->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、举例讲解、Internet网络。作业和思考题：初步构想一个个人网站，包括网站名称、网站的栏目板块、网站的目录结构、链接结构，并预设网站的色彩搭配、网站的标准字体等。课后分析与小结：通过学习，介绍了和网站相关的几个概念，从网站的整体规划出发，综合网站的主题、结构、风格、布局等多个方面阐述网站的制作构思，以及如何使用DW发布网第 页PS面板的基本操作PS选区、图层的操作建立网站之前的一些准备工作与网站有关的一些概念网页的概念与分类网站的概念、主题、风格、名称、结构建立网站的过程网站的整体规划定位网站的主题和风格构建出一个网站的目录框架和链接框架发布网页网页语言html授课 第三、四周 课2时间 次方式（打√）

课理论课√□讨论课□实践课√□习题课√□其 时8他□ 安排教学单元（教学章、节或主题：PS路径、通道、蒙版、DW基础。目的、要求（分了解、熟悉、掌握三个层次：掌握建立本地站点的过程，DW的集成环境，熟练使用对象面板与属性面板，掌握简单界面元素的编辑。通过实验，能够利用DW行相关的链接。知识要点：熟悉DW的集成环境，简单界面元素的编辑，网页的链接。技能要点：能够利用DW创建本地站点，制作几张含有简单界面元素的网页，并进行相关的链接。教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注PS路径、通道和蒙版的使用建立本地站点并管理站点制教学步骤：举例展示->讲解->小结->实验->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、举例讲解。作业和思考题：P30~P34课后分析与小结：DW的工作界面的组成，熟练使用对象面板与属性面板，简单的界面元素：文字、图像、Flash动画的编辑方法，区分了文件路径的三种表示方法，会懂得使用各种超级链接。第 页作简单的静态网页作简单的静态网页使用对象面板在网页中插入文字、水平线、图像、Flash文件等简单的元素熟练使用属性面板设置对象的属性多种超链接的设置方法利用页面属性设置页面的属性值1：创建本地站点、整体控制页面文本操作与图像操作授课 第五、六周 课2时间 次方式（打√）

课理论课√□讨论课□实践课□习题课√□其他 时8□ 安排教学单元（教学章、节或主题表格、框架和表单。目的、要求（分了解、熟悉、掌握三个层次：能够熟练利用表格、框架进行网页的布局，掌握表单的制作和验证。知识要点：熟练掌握利用表格的布局模式进行网页的布局，表单的操作。技能要点：表格布局模式的使用，表单的制作。教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注1．表教学步骤：举例展示->讲解->小结->实验->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、举例讲解。作业和思考题：P131~P135课后分析与小结：表格对于网站内容的定位是非常重要的。既可以利用表格来进行各种数据的设定，也可以进行文字区域及图像的定位，并利用布局视图来改变表格的布局。应用框架来进行页面的优化，方便用户的浏览。通过制作表单来进行调查、订单、搜索界面等，完成数据的采集，同时要了解表单的处理。第 页格创建表格选择表格设置表格、单元格属性创建网站相册布局表格绘制布局表格设置布局表格、单元格属性布局表格实例分析讲解框架创建框架保存框架框架的选择、属性、链接的设置架的选择、属性、链接的设置d)架实例分析讲解框4．表单a)建表单创b)表单添加对象向c)单属性的设置与后台程序的链接表d)单实例分析讲解表2：利用表格布局模式进行包含表单等网页元素的布局设计利用框架进行网页的布局设计授课 第七、八周 课2时间 次方式（打√）

课理论课□讨论课□实践课√□习题课√□其他 时8□ 安排教学单元（教学章、节或主题层、div布局目的、要求（分了解、熟悉、掌握三个层次：通过学习，学生要熟练掌握层的概念，层的常用具体的操作，包括层的创建、属性的设置、层的移动、排列、拖动、显示、隐藏，div布局。知识要点：布局。

层的概念，层的创建、属性的设置、层的移动、排列、拖动、显示、隐藏，div技能要点：层的创建、属性的设置、层的移动、排列、拖动、显示、隐藏,层的精确定位，div布局。教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注1．层教学步骤：举例展示->讲解->小结->实验->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、个别辅导。作业和思考题：P166~P168课后分析与小结：divDW的优势所在，一方面应该熟练地使用层技术来完成页面元素的精确定位，另一方面通过设置与层有关的行为来制作具有动态效果的网页，不但能增加制作网页的兴趣，还会增加做好网页的自信心。第 页的创建创建新层创建嵌套层熟悉层面板与属性面板层的基本操作层的移动调整层的大小层的对齐、排列层的应用拖动层显示、隐藏层层具体实例的分析讲解Diviv标签的使用3：利用层制作拼图游戏利用层制作动态显示的菜单利div技术来布局网页授课 第九、十周 课2时间 次方式（打√）

课理论课√□讨论课□实践课□习题课√□其他 时8□ 安排教学单元（教学章、节或主题行为与时间轴目的、要求（分了解、熟悉、掌握三个层次：熟练掌握行为面板的使用方法，基本的行为操作，能利用时间轴创建沿路径运动的动画，利用行为与时间轴和层的结合来制作动态交互网页。知识要点：行为与时间轴的概念。技能要点：基本行为的操作，行为与时间轴和层的结合来制作动态交互网页。教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注1．行教学步骤：举例展示->讲解->小结->实验->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、举例讲解、个别辅导。作业和思考题：P211~P212课后分析与小结：DW作，以及把时间轴和行为、层结合起来制作更为复杂的动画，这部分知识对制作富有动感的网页很有帮助。第 页为熟悉行为面板添加行为修改行为行为常用的事件应用行为打开浏览器窗口播放声音弹出信息设置文本转URL检查插件控制多媒体动画显示弹出式菜单时间轴熟悉时间轴面板利用时间轴进行层的移动直线移动的动画拖动路径制作曲线移动动画记录路径制作曲线移动动画利用时间轴改变图像添加时间轴行为实验4：利用行为与时间轴制作富有动态的网页授课 第十一周 课1时间 次方式（打√）

课理论课√□讨论课□实践课√□习题课√□其 时4他□ 安排教学单元（教学章、节或主题多媒体对象目的、要求（分了解、熟悉、掌握三个层次：熟悉插入Flash和修改其属性的方法，了解插入和设置Flash视频、FlashPaper文档、文字和按钮方法。知识要点：熟悉插入Flash等多媒体对象和修改其属性的方法。技能要点：熟悉插入Flash等多媒体对象和修改其属性的方法教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注1．F教学步骤：举例展示->讲解->小结->实验->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、举例讲解、个别辅导。作业和思考题：P261-264课后分析与小结：本章介绍如何在网页中插入多媒体对象，因为这类文件可以把声音、图像结合在一起，其界面动感十足，所以在网上非常流行。在网页上不仅是插入这些对象，而且要保证相应的文件能够正常播放，学会安装各种各样的插件能丰富网页的内容。第 页lashlash的使用a)Flash对象的方法插b)置属性、参数设2．放视频播3．放声音播授课 第十二、十三周 课2时间 次方式（打√）

课理论课√□讨论课□实践课√□习题课√□其 时8他□ 安排教学单元（教学章、节或主题模板和库目的、要求（分了解、熟悉、掌握三个层次：掌握创建模板的方法，在模板中如何定义可编辑区域，如何应用模板建立具有统一风格的网页并更新当前站点，学会编辑库项目并应用库项目提高工作效率。知识要点：技能要点：模板和库的使用教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注1．模教学步骤：举例展示->讲解->小结->实验->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、举例讲解、个别辅导。作业和思考题：P278-279课后分析与小结：建设网站时，可以在网页中综合应用模板和库的相关知识，即把库放到模板中，让模板和库项目联合来更新网站。使用这种方法可以更好地维护网页，有利于减轻网站设计中的重复工作量。第 页板熟悉资源面板创建模板编辑模板创建可编辑区域重复区域模板的应用模板应用实例分析与讲解库创建库在文档中插入库项目编辑库项目库项目应用实例分析与讲解5：利用模板和库制作网站授课 第十四、十五周 课2时间 次方式（打√）

课理论课√□讨论课□实践课√□习题课□其他 时8□ 安排教学单元（教学章、节或主题：CSS样式、div+css布局目的、要求（分了解、熟悉、掌握三个层次：CSSCSS布局模式。知识要点：模式。

熟练掌握CSS样式的属性项目设置方法，在文档中如何应用样式表，div+css布局技能要点：模式。

熟练掌握CSS样式的属性项目设置方法，在文档中如何应用样式表，div+css布局教学内容（含时间分配）板书或旁注教学内容（含时间分配）板书或旁注1．CSS样式创教学步骤：举例展示->讲解->小结->实验->讲评教具及教学手段（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）多媒体讲解、举例讲解、个别辅导。作业和思考题：P187-190课后分析与小结：样式表最大的一个优点就在于可以在多个页面甚至整个站点上应用它。尤其是修改了外部样式表时，它将自动更新所有使用它的网页，从而完成大量的页面修改工作。第 页a)a)CSS样式面板熟b)CSS新c)SS样式规则对话框Cd)练操作规则定义对话框熟e)辑样式编f)入导出样式导6：利DIV+CSS样式来统一整个网站授课 第十六－十八周 课3时间 次方式（打√）

课理论课√□讨论课□实践课√□习题课□其他 时 1□ 安 2排教学单元（教学章、节或主题综合练习目的、要求（分了解、熟悉、掌