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