《网页设计与制作》教案

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