网页设计与制作教案.doc

中国人民公安大学教 案 课程： 多媒体技术应用 教师： 王任华 性质： 公共必修课 单位： 信息安全工程系 学时： 52 学生： 07级成教 学期： 07-08学年上 教材：网页设计三合一实用教程教 务 处 制 教案序号：01授课时间第7周 周一3、4节授课学时2教学内容第一部分：网页网站设计基础及开发环境Ch1综述本课程主要从网络和网页制作的基本知识出发，讲解网站概念和网站设计基础知识。并介绍“网页三剑客”Dreamweaver、Fireworks和Flash的MX 2004版软件，它们将是后续章节所讲述的主要软件环境。教学目的与要求学生通过学习本讲内容，从网站及网页设计开发人员的角度了解网站建设的环境要件和基本设计方法，进一步明确该课程要完成的学习任务和能够达到的网页网站设计水平。要求学生在已有的关于网络理论和操作等基础知识（如了解网络协议、Internet中的WWW服务及Web网页浏览功能）的基础之上进行学习。教学重点与难点教学重点：网站建设基本环境及设计。教学难点：网站规划教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. Web网页设计的基本环境有哪些？2. 站点创建的策划流程有哪些内容？3. 网页制作工具有哪些？参考资料：网络教程课后小结讲 授 内 容 与 课 堂 组 织综述n 关于课程描述n 课程涉及内容n 学习目标第1章 网页设计基础及开发环境1.1 Internet与网页1.1.1 什么是Internet1.1.2 Web网页解析1.2 网站的设计与规划1.2.1 网站的设计1.2.2 网站的规划1.2.3 网站信息的收集1.2.4 建设网站所需的工具1.3 HTML语言1.3.1 认识HTML1.3.2 HTML的基本语法1.3.3 HTML的发展1.4 Macromedia Studio MX 2004的安装与启动1.4.1 Macromedia 程序组1.4.2 三剑客的安装与启动1、基本概念1）什么是WEB？w Web的全称是WORLD WIDE Web，是Internet发展的产物。w Web是运行在Internet之上的所有HTTP服务器软件和它们所管理的对象（及其作用）的集合。其中的“对象”实际上包括了Web Page/Web文档和程序，程序可以动态生成Web文档。w 另一种定义：Web是一种体系结构，是一种基于Internet、采用Internet协议的体系结构。它包含如下几层意思： Web 是Internet 提供的一种服务。 Web是存储在全世界Internet计算机中、数量巨大的文档的集合。 Web上的海量信息是由彼此关联的文档组成的。这些文档称为主页（Home Page）或页面（Page）.。 Web的内容保存在Web 服务器中，用户可通过浏览器（Browser）访问Web站点。 2）什么是WEB文档？q Web文档是指可以被Web服务器传递的信息。q Web文档内容包括传统的Text、Image，也可以是Sound、Movie等多种数据类型。q 超链接/锚点是Web文档的一个主要特征。3）. Web中的服务器/客户端模式q Web的B/S结构，其逻辑层次为“客户WEB服务器”结构。q 客户由TCP/IP与WEB浏览器组成，WEB服务器由HTTP加后台数据库组成。q 客户的浏览器和服务器均使用TCP/IP的HTTP协议建立连接。q 客户端和服务器端都是相对的概念。客户的浏览器和服务器均使用TCP/IP的HTTP协议建立连接，利于客户与服务器之间的超媒体传输。所有的客户及WEB服务器统一使用TCP/IP，统一分配IP，使得客户和服务器的逻辑连接变成简单的点对点连接。URL实现了单一文档在因特网主机中的定位。客户请求通过WEB服务器CGI（公用网关接口）可以容易地与后台的各种类型数据接口。 4）. 什么是网站？q Web是众多服务器和客户端通过Internet形成的分布式的信息网络，网站即是众多服务器中的一个来提供信息。q 根据服务内容的各有侧重，不一定是一台机器 。5）. 几种典型的网站n 大众类型： 新浪，网易，搜户等n 媒体站：人民日报，中央电视台n 娱乐站：联众游戏n 搜索引擎 http:/www.google.comn 商业网站 当当书店 http:/www.dangdang.comn 政府网站 海淀区人民政府 http:/www.bjhd.gov.cn2、基本环境n 网络操作系统：n win NT/2000server ，linux ， unix n 支撑工具：即支持不同平台的web 服务器软件， n Windows NT/2000/XP 集成的IIS (Internet Information Server)n Windows 98 下的PWSn Linux 下的Apache web server 1.2 网站建设1. 常用技术： 静态网页，动态网页技术 HTML DHTML java applet javascript ActiveX CGI ASP PHP JSP Flash VRML WAP J2EEHTML(Hypertext Mark-up Language)超文本标记语言DHTML(Dynamic HTML)动态HTMLCGI（Common Gateway Interface）公用网关接口IIS(Internet Information Server)IIS服务管理器ASP（Active Server Page）动态网页技术标准，微软推出PHP（Personal Home Page）跨平台服务器脚本语言，是Unix/Linux服务器首选的技术JSP（Java Server Page）SUN公司提出，多家公司参与制定的动态网页技术标准2. 常见的功能： 留言，论坛，聊天室，计数器，电子邮件，搜索引擎3. 架设虚拟网站： 为什么虚拟。 静态IP 。 申请空间 申请域名 注意事项： 容量，速度，提供的动态方案，相关服务，FTP 维护吗？ 简单方式： 申请主页空间 4.网站策划设计n 主题，名称，服务对象，内容收集，整理，风格创意n 构成布局n 数据库技术 sql server my sql n 制作工具： 三剑客n 发布与维护本讲为教材第1章的部分内容，有扩展。由基本概念和基础知识引入网页及网站设计的总体思想。结合站点网页的实例讲解概念，可以使学生容易接受理解。 教案序号：02授课时间第7周 周三3、4节授课学时2教学内容HTML语言（一）1、 HTML语言初步介绍HTML语言基础知识，包括HTML的基本概念、语法、HTML文档的组成、主要标记及其属性，还包括网页基本元素信息设计。教学目的与要求学生通过学习本讲内容，对网页基本代码HTML知识有比较清楚的认识和掌握，会使用HTML代码实现基本网页的创建，并能够实用标记及属性修改现有的网页内容。要求学生使用Windows系统提供的基本编辑器软件如“记事本”来编写HTML代码，并在IE浏览器中测试页面效果。教学重点与难点教学重点：HTML语言的特点和代码编写方法。教学难点：关于标记及其属性所体现的网页结构特征。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. HTML语言与高级程序设计语言的区别是什么？2. HTML语言中超链接的类型有哪几种？如何实现？3. HTML与XML语言有哪些主要区别？参考资料：HTML参考大全（第三版），清华大学出版社课后小结讲 授 内 容 与 课 堂 组 织HTML语言n 1、 HTML语言初步（1） HTML基本概念Hypertext Markup Language超文本标记语言（2） HTML名词解释超文本文件、网页、网站、浏览器（3） HTML文件构成文件头和文件体（4） HTML语法l 元素是网页的组成部分,元素由起始标记,内容,结束标记构成。l 属性是元素的特征,由属性名和属性值构成 ,每个元素有特定的属性。l “属性名=属性值” 每个属性用空格隔开,写在起结标记里面。l 大部分元素有几个属性,当我们不设置元素的属性时，以属性的默认值显示。（5） 应用HTML创建基本网页1、熟悉标记：、等。2、创建超链接，介绍标记；介绍网页超链接类型3、插入图像、声音等媒体浏览一个网页实例，查看源代码，打开记事本编辑器编写简单网页代码，然后在IE浏览器窗口浏览网页页面效果。在最简单的编辑环境中书写HTML源码文件，可以使学生对HTML语言的应用有更清晰的认识。结合元素的实例分析HTML的语法规则和使用方法。概述HTML语言的发展。使学生了解新的网页代码标准的使用。 教案序号：03授课时间第8周 周一3、4节授课学时2教学内容HTML语言（二）2 、HTML语言进阶介绍使用HTML表格（Table）、列表（OL/UL）和表单（Form）的方法。还补充介绍HTML的一些特殊标记的使用。教学目的与要求学生通过学习本讲内容，进一步掌握HTML标记的应用。了解如何对网页的文件头信息进行加载，以及使用特殊标记来增加网页的功能效果。要求学生在上一堂课已掌握的知识基础上，继续深入了解HTML的内容，并结合HTML相关手册自学，最终全面掌握该语言的应用，这将为后面学习脚本语言打下好的基础。教学重点与难点教学重点：使用HTML设计网页表格、有序列表、无序列表、表单等内容。教学难点：创建HTML文档的文件头信息，实现添加作者信息、关键字信息、网页超时信息、替换网页等功能。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. 标记的主要功能及运用方法是什么？2. 在HTML文档中，标记的输写位置应该在哪里？HTTP-EQUIV= ”Expires” 属性设定的含义是什么？3. 如何设置有序列表与无序列表？4. 标记中哪个属性是用来改变队列移动方向的？参考资料：网络教程课后小结讲 授 内 容 与 课 堂 组 织HTML语言2、 HTML进阶（1） 列表的使用有序列表 This web site uses Active Server Pages.用来定义一个有序列表用来定义有序列表项无序列表的实例分析：望月怀远l 海上生明月，天涯共此时。l 情人怨遥夜，竟夕起相思。l 灭烛怜光满，披衣觉露滋。l 不堪盈手赠，还寝梦佳期。（2） 表格的使用作用：1，显示数据 2，设置页面布局表格的组成与标记的对应关系： table表格；tr行；td 单元格标记：表示一行 表示一个单元格实例分析：上网方式上网时间（小时）上网数量拨号上网300200专线上网6001000（3） 表单的使用标记： . 作用：form 用来定义一个表单 input 用来定义一个表单域（4） 其他标记举例n 滚动字幕n 标记：.n 属性解释：n direction=# 设置滚动方向#的取值有 left,right,up,down bgcolor=# 设置滚动区域的背景色 height=n 设置滚动区域的高度 width=n 设置滚动区域的宽度网页中表单的实际应用需要有动态编程手段作支持，将表单与后台数据库进行数据连接和访问。 教案序号：04授课时间第8周 周三3、4节授课学时2教学内容第2章 Dreamweaver MX 2004 入门知识介绍Dreamweaver主要功能及新增功能、工作界面、文件操作。教学目的与要求学生通过学习本讲内容，了解可视化网页编辑器Dreamweaver的基本环境和主窗口工具的使用方法，文档的创建、保存，使用Dreamweaver创建和管理一个基本站点。要求学生掌握创建基本网页的途径，包括插入文本、图像等基本信息。掌握如何使用Dreamweaver创建并管理站点及站点内文档，以及熟悉几种编辑视图环境。教学重点与难点教学重点：了解Dreamweaver的主界面环境，掌握网页文档的创建、编辑和保存操作。教学难点：浮动面板的主要功能。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. Dreamweaver中文档的视图方式有哪几种？2. 如何实现对Dreamweaver中打开的文档进行测试预览？3. Dreamweaver中“文件”面板的主要功能是什么？课后小结讲 授 内 容 与 课 堂 组 织第二部分：Dreamweaver MX 2004应用n Ch2 Dreamweaver基础知识2.1 主要功能及新增功能介绍Dreamweaver MX 2004 是一个可视化网页编辑软件，具有简洁高效的设计、开发界面；新式的页面布局和设计环境；强大和开放的编码环境。2.2 工作环境介绍用户界面环境选择用户工作布局；Dreamweaver MX 2004 工作界面：l 标题栏、菜单栏、起始页l 工具栏：“插入”栏，“标准”栏，“文档”栏l 文档的“视图”窗口：代码视图、设计视图、代码和设计视图；l 属性面板l 状态栏l 面板和面板组2.3 Dreamweaver 的文件操作 包括文档的创建、打开和保存等操作 关于“Dreamweaver MX 2004应用”所介绍的内容与教材配套进行讲解。 教案序号：05授课时间第9周 周一3、4节授课学时2教学内容第3章 站点的创建与管理3.1 建立站点3.2 站点的编辑与管理3.3 站点地图教学目的与要求学生通过学习本讲内容，了解使用Dreamweaver创建和管理一个基本站点。要求学生掌握如何使用Dreamweaver创建并管理站点及站点内文档，以及熟悉几种编辑视图环境。教学重点与难点教学重点：站点创建。教学难点：站点管理。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. Dreamweaver中文档的视图方式有哪几种？2. 如何实现对Dreamweaver中打开的文档进行测试预览？王宇编著.梦幻劲爆网页中文版Flash MX/Dreamweaver MX/Fireworks MX三合一教程，中国电力出版社课后小结讲 授 内 容 与 课 堂 组 织第二部分：Dreamweaver MX 2004应用n Ch3 建立与管理站点在Dreamweaver MX 2004中不仅可以创建单独的文档，作为一个站点的创建和管理工具，它还可以创建完整的Web站点，以取得链接文档和资源的共享。站点通常包含两部分：本地计算机（本地站点）上的一组文件和远程 Web 服务器上的一个位置（远程站点）。 3.1 实例引导新建一个自己的网站空间3.2 建立站点定义站点站点信息发布3.3 站点的编辑与管理打开本地站点编辑站点内文件夹与文件重新编辑站点删除站点3.4 站点地图3.2 建立站点1、定义站点实现方法有两种，一种是通过定义站点向导来实现，另一种是直接定义站点。2、站点信息的上传与下载1. 将本地站点文件上传到局域网服务器上2. 用FTP将本地站点发送到远程Web服务器上3. 下载（获取）站点文件3.3 编辑与管理站点编辑与管理工作包括：如打开、编辑、删除和复制；设置远程站点；站点文件的上传与下载；站点地图的应用等。3.4 站点地图站点地图用树形结构方式显示站点文件的链接关系。在站点地图中可以添加、修改、删除文件间的链接关系。 Dreamweaver 不仅可以创建单独的文档，作为一个站点的创建和管理工具，它还可以创建完整的Web站点，以取得链接文档和资源的共享。分别演示两种创建站点的方式，注意区分异同。 教案序号：06授课时间第9周 周三3、4节授课学时2教学内容第二部分：Dreamweaver MX 2004应用（二）Ch4 静态页面设置教学目的与要求学生通过学习本讲内容，基本掌握如何对网页进行布局设计，应用表格布局、“布局”模式的设计方法排版页面，还需要掌握插入页面元素的类型和操作等。要求学生会利用页面布局设计不同的页面效果，会使用超链接实现网页间元素的超链接效果。教学重点与难点教学重点：实现页面布局的操作。教学难点：不同类型的超链接实现。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. 使用布局模式设计页面的特点是什么？2. 如何在网页中直接插入背景音乐？图片可以作为超链接对象吗？参考资料：网页制作MX中文版，中国铁道出版社，2003课后小结讲 授 内 容 与 课 堂 组 织第二部分：Dreamweaver MX 2004应用Ch4 Dreamweaver静态页面设置4.1页面的属性设置网页标题信息的设置可以通过使用工具栏设置标题信息。在网页的“页面属性”对话框中，用户可以针对实际需要来设置网页的外观、超链接、标题，及跟踪图像等项目。4.2 表格布局与布局模式页面的布局在网页设计的基本工作中显得尤为重要，页面布局的好坏直接影响到整体的页面效果和页面质量。在Dreamweaver中，可以采用多种方法对页面进行布局，包括：“表格”布局；“布局模式”布局；“框架”布局；“CSS样式”布局4.3 创建超链接1) 文件的路径绝对路径、根目录相对路径、文档相对路径2) 创建超链接的方法3) 超链接的分类4) 创建导航条4.4 插入页面元素使用Dreamweaver MX 2004 中的工具可以向Web页添加各种页面元素，这些元素包括文本、图像、颜色、影片、声音和其它媒体形式等。 教案序号：07授课时间第10周 周一3、4节授课学时2教学内容第二部分：Dreamweaver MX 2004应用（三）Ch5 层与行为的应用 教学目的与要求学生通过学习本讲内容，进一步掌握Dreamweaver提供的其他网页设计功能，包括层的应用和行为的应用。要求学生熟悉使用层进行页面布局；并结合行为面板的操作设计出灵活的页面风格，实现动态页面功能。教学重点与难点教学重点：层与行为的应用。教学难点：评价不同布局方法的优缺点。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. 表格和层之间能够相互转换吗？如何操作？参考资料：光盘资料，电子文档课后小结讲 授 内 容 与 课 堂 组 织Ch5 层与行为的应用5.1 层与嵌套层的创建1. 层的基本操作创建层、创建嵌套层、层的属性面板、层的管理面板。2利用层排版使用层进行页面布局，可以达到丰富页面的效果。对层的基本操作包括选择层、移动层、复制层、删除层、调整层大小和对齐层等。3行为与行为面板Dreamweaver MX 2004中的行为将JavaScript代码放置在文档中，允许访问者与Web页进行交互，从而以多种方式更改页面或引起某些任务的执行。行为是事件和由该事件触发的动作的组合。5.2 系统内嵌行为的具体应用与网页设计实现通过“行为”面板中弹出菜单命令，可以设置实现多种动态网页效果。 关于“框架”布局；“CSS样式”布局两种方法将在下一讲中介绍。演示菜单命令，逐一实现相关动态效果，操作时注意及时保存更新文档，并刷新IE浏览器窗口查看效果。注意提高显示事件的浏览器版本。 教案序号：08授课时间第10周 周三3、4节授课学时2教学内容第二部分：Dreamweaver MX 2004应用（四）Ch6 CSS样式和框架教学目的与要求学生通过学习本讲内容，进一步掌握Dreamweaver提供的其他网页设计功能，包括CSS样式的应用和框架的应用。要求学生熟悉使用CSS样式和样式表来布局页面，对页面元素进行统一的格式化处理，这也是设计网页的一个重要环节。掌握已经介绍的4种页面布局方法，能够评价其各自的优缺点。教学重点与难点教学重点：CSS样式和CSS样式表的应用。教学难点：评价不同布局方法的优缺点。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. 对文档添加样式的方法有哪几种？各有什么优缺点？2. 能够将框架集保存为模板吗？参考资料：电子文档课后小结讲 授 内 容 与 课 堂 组 织第二部分：Dreamweaver MX 2004应用 Ch6 CSS样式的应用1、 概念CSSCascading Style Sheet（层叠样式表）2、 历史：1996年W3C标准化组织推出了CSS1规范目前W3C已经制定了CSS3标准3、 目的意义：网页设计者使用样式表来控制页面的格式。为特定的网页元素或者一系列网页元素创建表现样式。注意：CSS规范的样式表必须和HTML网页结合使用，单独一个样式表没有意义。4、 CSS样式的类型Dreamweaver MX 2004中集成了强大的CSS控制功能，从精确的布局定位到特定的字体、段落、背景、图像，CSS样式可以更加灵活并更好地控制Web页内容的外观。5、 CSS样式表的应用创建与应用CSS样式：创建标签样式、创建CSS选择器、创建自定义样式。CSS外部样式：创建外部样式、导出外部样式、链接外部样式、编辑外部样式表。 教案序号：09授课时间第11周 周一3、4节授课学时2教学内容第二部分：Dreamweaver MX 2004应用（五）Ch7 模板、库和表单教学目的与要求学生通过学习本讲内容，进一步掌握Dreamweaver提供的其他网页设计功能，包括模板、库和表单的应用。要求学生熟悉使用模板使创建的文档继承模板的页面布局；将库中的元素插入到网页中；创建表单，以便向后台服务器提交页面信息。教学重点与难点教学重点：模板和库的应用。教学难点：表单的生成。教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书课后小结讲 授 内 容 与 课 堂 组 织Ch7 模板、库和表单的应用实例引导批量创建网页使用模板3.3.1 创建模板3.3.2 定制模板3.3.3 应用模板使用库文件3.3.4 创建库文件3.3.5 将库文件加入到网页中1、模板的应用（Templates）使用模板创建网页的三个步骤：1）生成模板： 文件另存为模板；2）定义可编辑区域：选中一个单元格后单击插入面板中模板栏中可编辑区域按钮；3）从模板创建网页文件新建模板,选中你要的站点和模板。2、框架与框架集的创建和操作（Frame）有两种创建框架集的方法：可以从若干预定义的框架集中选择，也可以自己设计框架集。创建框架；框架与框架集的基本操作；框架的属性设置。3、表单的应用（Form）在客户端与服务器端的关系中，表单支持客户端界面。它的作用就是收集浏览者输入的信息和数据，然后将其提交到后台服务器上由指定的程序进行处理，最后形成数据库中的数据。表单的创建、编辑、保存操作。后台服务器上由指定的程序（如ASP、PHP、JSP等）表单的应用范围非常广泛，例如常见的调查表、订单、留言簿、论坛、会员注册/登录、在线查询等处理程序。 教案序号：10授课时间第12周 周一3、4节授课学时2教学内容第三部分：Fireworks MX 2004应用（一）第8章 FireworksMX2004入门知识第9章 对象操作与颜色管理教学目的与要求教学重点与难点教学方法与手段思考题与参考书课后小结讲 授 内 容 与 课 堂 组 织 教案序号：11授课时间第13周 周一3、4节授课学时2教学内容第三部分：Fireworks MX 2004应用（二）第10章 对象绘制与编辑教学目的与要求教学重点与难点教学方法与手段思考题与参考书课后小结讲 授 内 容 与 课 堂 组 织 教案序号：12授课时间第14周 周一3、4节授课学时2教学内容第三部分：Fireworks MX 2004应用（三）第12章 使用滤镜与特效处理第13章 动画制作教学目的与要求实验目的：应用滤镜和特效，以掌握增强网页对象动态效果的方法；并应用动画功能创作简单的网页动画特效。实验要求：基本掌握Fireworks中的滤镜好特效功能，以及插入生成逐帧动画的基本方法，完成网页设计中部分特殊对象效果。教学重点与难点重点：滤镜的使用方法难点：动画效果的创建教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书思考题：1. 以菜单命令方式实现滤镜效果和采用属性控制模板中的特效所产生的效果有何异同？2. 如何使网页中需要静态显示的对象出现在动画的各帧中？如不变的背景标题。课后小结讲 授 内 容 与 课 堂 组 织第4章 使用滤镜与特效处理本章要点： 滤镜的应用 特效的应用 将特效保存为Fireworks命令4.1 实例引入制作“火焰泡泡”4.2 滤镜的使用在Fireworks MX 2004中，通过选择【滤镜】菜单上的滤镜命令，可以为图像添加滤镜效果。应用和编辑滤镜效果的操作方法很简单，可以分为如下步骤：1) 选择需要使用滤镜的区域。若不作选择，则是对整幅图像应用滤镜效果。2) 选择【滤镜】菜单中相应的滤镜命令。3) 设置滤镜参数，然后单击“确定”按钮，即可将滤镜作用于图像上。有的滤镜没有需要设定的参数，而直接执行效果。4) 若对实现的效果不满意，使用菜单【编辑】【撤消】命令，或按“Ctrl+Z”键，撤消滤镜操作。4.2.1 调整颜色类滤镜 4.2.2 模糊类滤镜4.2.3 其他类滤镜其他类滤镜包括有转换为Alpha和查找边缘滤镜。4.3 特效多种特效，可以应用到矢量对象、位图和文本上，使之添加各种特殊效果，如人们所熟悉的阴影、浮雕、发光等效果。4.3.1 斜角与浮雕4.3.2 阴影与光晕4.3.3 使用Photoshop滤镜作为特效4.4 本章小结本章详细介绍了Fireworks MX 2004中的滤镜和特效的使用方法。滤镜和特效的应用增强了对象的动态效果。本章主要内容有以下几点：1. 滤镜菜单命令的应用2. 属性面板中的特效设置3. 将自定义特效保存为命令4. 使用“命令”菜单命令制作效果第13章 动画制作本章要点： 创建元件和实例 编辑元件 帧操作 导出动画13.1 实例引导制作简单“标题”动画13.2 动画元件与实例在Fireworks MX 2004中，可以直接创建动画元件，也可以将现有的对象转换为动画元件。1. 直接创建动画元件直接创建动画元件的操作方法为：1) 选择菜单【编辑】【插入】【新建元件】命令，弹出如图13-8所示的“元件属性”对话框。2) 在对话框的“名称”栏内输入新元件的名称，在“类型”栏选择“动画”选项，并单击“确定”按钮。3) 在弹出的元件编辑窗口中，创建并编辑一个新对象作为动画元件，该对象可以是矢量对象或位图对象。4) 绘制完成后，关闭“元件编辑器”窗口。一个新元件即被创建，Fireworks将元件放入库中，并将一个实例放在文档的中间位置。“库”面板可以通过菜单【窗口】【库】来打开，如图13-9所示为“库”中的内容。动画实际上是由帧组成的，要编辑复杂的动画效果，就需要编辑动画的帧。与Flash MX 2004不同，Fireworks MX 2004中的帧不是在时间轴面板编辑和设置，而是通过帧面板来编辑和管理的。创建并优化了动画后就可以导出了。GIF动画可以使剪贴画和卡通图形达到最佳效果。或将动画导出为Flash SWF文件。还可以将动画中的帧或层作为多个文件导出。这在同一对象的不同层上有许多元件时很有用。13.5 本章小结本章介绍了使用Fireworks MX 2004制作动画的方法，与Flash制作动画的不同之处在于：Fireworks是通过“帧”面板来显示和设置各帧动画的，而且生成的是线性动画，其创作过程与Flash不尽相同。下面将本章的主要知识点归纳如下：1. 动画元件的创建和编辑方法2. 通过帧编辑动画3. 插帧动画的制作方法4. 动画的预览、优化和导出提示：使用菜单命令方式实现滤镜效果，其命令是针对于位图图像的。如果要对矢量对象或文本使用滤镜效果，在执行菜单命令时会弹出信息提示窗口，提示用户“此操作将矢量对象转换成位图”，确定后再应用滤镜。转换后的对象将不再具有矢量属性。如图12-9所示的内容为将矢量对象应用“添加杂质”滤镜效果后，矢量对象转换成位图。调整颜色类滤镜主要用于调整位图图像的颜色。模糊类滤镜的作用主要是使图像看起来更朦胧一些，通过降低图像的对比度，降低局部细节的相对反差，使图像更加柔和。 教案序号：13授课时间第15周 周一3、4节授课学时2教学内容第三部分：Fireworks MX 2004应用（四）第14章 Web对象的创建与编辑教学目的与要求教学目的：通过详细介绍使用Fireworks MX 2004制作网络图像的各种方法，包括热点、切片、行为、按钮等相关知识，使同学们掌握创建制作交互性网页元素的基本方法。教学要求：掌握设计网页中的热点、切片、行为、按钮的应用。教学重点与难点重点：创建热点和切片难点：制作行为和按钮教学方法与手段采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书思考题：1. Fireworks中的热点和切片的应用意义和方法分别有哪些？2. 按钮的制作和弹出菜单有何不同？课后小结讲 授 内 容 与 课 堂 组 织第14章 Web对象的创建与编辑本章要点： 图像映射 创建和编辑切片 制作按钮和导航条 行为的应用14.1 实例引导制作“图片网吧”主页14.2 图像映射在网页中不仅文本具有超链接，往往图片也可以实现超链接。如果希望将一幅图像中的不同区域链接到不同的网页，这种情况可以使用图像映射技术来处理。在Fireworks MX 2004中，可以直接在图像上绘制热点，并给热点指定相应的URL链接。有关信息将被保存在PNG文档中。在输出Web页的时候，代码被同时输出，而且可以在HTML编辑器中进行编辑。14.2.1创建热点1. 创建热点的方法有以下两种：使用热点绘制工具和使用插入热点命令14.2.2编辑热点热点同其他许多对象一样，可使用“指针”工具、“部分选定”工具和“变形”工具对其进行形状的调整。还可以使用属性面板，改变热点形状，或以数字方式更改热点的位置和大小。 14.2.3 给热点分配链接14.2.4 导出含热点的图像在所需图形上插入热点之后，必须将该图形导出为图像映射，这样才能真正在浏览器中运行。14.3 切片切片是将Fireworks文档分割成多个较小的部分，并将每部分导出为单独的文件，这在高级网页制作中经常用到。为图像创建切片具有以下三方面优点： 进一步优化图像 指定交互性 更新部分图像14.4 制作按钮和导航栏按钮和导航条在体现网页交互性方面扮演着重要的角色。借助了图形效果的按钮，可以体现更好的艺术性。在Fireworks MX 2004中能够很方便地创建多种按钮。Fireworks的按钮编辑器将引导用户完成按钮的创建过程，并且自动完成许多按钮制作任务。创建了按钮元件后，就可以轻松地创建该元件的实例来制作导航栏了。14.4.1 按钮的特点和状态通常，按钮最多有四种不同的状态，即响应鼠标事件时的外观： “释放”状态：是按钮的默认外观或静止时的状态。 “滑过”状态：是当指针滑过按钮时该按钮的外观，此状态提醒用户单击鼠标时很可能会引发一个动作。 “按下”状态：表示单击后的按钮。按钮的凹下图像通常用于表示按钮已按下。此按钮状态通常在多按钮导航栏上表示当前网页。 “按下时滑过”状态：是在用户将指针滑过处于“按下”状态的按钮时按钮的外观。此按钮状态通常表明指针正位于多按钮导航栏中当前网页的按钮上方。14.4.3 创建导航条14.5 制作弹出菜单弹出菜单（或称下拉菜单）是目前网页中非常流行的一种设计方式，它类似于应用软件的窗口界面中的主菜单功能，当鼠标点击菜单栏的某个菜单时，弹出一组菜单命令或下一级子菜单。14.6 本章小结本章介绍了Fireworks MX 2004中关于Web对象的创建与编辑方法，主要应该掌握的知识点有如下几点：1. 热点的创建和编辑方法2. 切片的创建和编辑方法3. 热点和切片的导出方法4. 按钮和导航条的制作5. 弹出菜单的制作6. 添加和编辑行为 教案序号：14授课时间第16周 周一3、4节授课学时2教学内容第四部分：Flash MX 2004应用（一）第16章 Flash MX 2004 入门知识第17章 元件、实例的创建和使用教学目的与要求学生通过对本讲内容的学习，熟悉Flash软件的应用方法与操作技巧。基本掌握网页动画的创作原理和实现方法。要求学生在学习本讲内容之前，对动画设计知识进行适当的预习，可以参考教材的第16、17章内容。教学重点与难点教学重点：基本动画制作流程。教学难点：帧、层、元件与场景的应用。教学方法与手段本讲内容以自学为主，课堂讲授为辅。采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. Flash动画的特点有哪些？2. 绘制和编辑图形的工具有哪些？如何使用？3. Flash中的图层有何作用？如何创建、移动、删除图层？参考资料：网页制作Flash MX2004中文版实例教程，机械工业出版社，2003课后小结讲 授 内 容 与 课 堂 组 织第四部分：Flash MX 2004应用一、Flash基础知识1、Flash简介Flash的动画特点及应用范围；Flash MX 2004的新增功能2、Flash MX 2004操作基础操作基础主要包括：软件工作环境；Flash文件操作与制作流程；绘图和处理图形对象.；编辑对象；层的应用等。二、Flash基本动画制作1、元件与实例创作主要介绍创建和使用元件的方法和操作技巧。元件是可以重复使用的图形、按钮或者动画（影片剪辑），任何一个创建的元件都将自动成为库的一部分。合理使用元件可以大大提高工作效率。实例是元件在舞台或嵌套在其他元件中的应用。2、逐帧动画和补间动画创作Flash动画可以分为两大类，一种是逐帧动画，另外一种是补间（插帧）动画。补间动画又分为形状补间和运动补间动画。从动画设计原理的知识讲解到逐帧动画和补间动画的创作，完整地介绍动画的完成过程。在Flash MX 2004中，还提供了在文档中制作特定效果的新增功能。利用时间轴特效（如模糊、扩展和爆炸）可以很容易将对象制作为动画。3、制作时间轴特效动画 本讲内容与教材配套的部分为ch16ch19，学生应注意将课堂内容与教材内容结合学习。实例：1“按钮”制作2“卡通人物”3“弹跳娃娃”4“文字变形”实例：5“渐隐”动画效果6“旋转”动画效果 教案序号：15授课时间第17周 周一3、4节授课学时2教学内容第四部分：Flash MX 2004应用(二)第18章 Flash 基本动画的制作教学目的与要求学生通过对本讲内容的学习，进一步掌握Flash动画的创作方法。要求学生在学习本讲内容之前，对动画设计知识进行适当的预习，可以参考教材的第18章内容。教学重点与难点教学重点：引导线动画、。教学难点：遮罩动画制作。教学方法与手段本讲内容以自学为主，课堂讲授为辅。采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书1. 实现交互动画的关键是什么？2.参考资料：网页制作Flash MX2004中文版实例教程，机械工业出版社，2003课后小结讲 授 内 容 与 课 堂 组 织第四部分：Flash MX 2004应用（二）三、Flash高级动画创作3、引导线动画、遮罩动画及交互性动画主要介绍有关高级动画的创作规则和操作方法，如创建引导线动画和遮罩动画。创建交互性动画是Flash作品中最具灵活性的部分体现，使用动作和行为来增加影片的精彩效果。脚本编程动画对于没有编程经验的读者来说是一个难点。这里可以循序渐进，先从一些非常简单的命令入手，无需编程即可创建简单动作，然后逐步掌握更复杂的功能。快捷菜单 这部分内容应根据实际授课进度情况灵活安排。时间允许，可以适当扩展这部分内容的讲解。实例：1“地球自转与公转”2“开卷有益” 教案序号：16授课时间第18周 周一3、4节授课学时2教学内容第四部分：Flash MX 2004应用(三)第19章 创建高级动画教学目的与要求教学重点与难点教学方法与手段思考题与参考书课后小结讲 授 内 容 与 课 堂 组 织 教案序号：17授课时间第19周 周一3、4节授课学时2教学内容第五部分：综合网站设计完整策划与实现一个自己的网站教学目的与要求学生通过创建这个网络站点的过程将掌握两件事：首先介绍只有在创建一个完全的网点时才会碰到的编程问题。教学重点与难点教学重点：策划与实现网站。教学难点：完整站点创建的关键问题。教学方法与手段本讲内容以自学为主，课堂讲授为辅。采用课堂讲授与学生课下上机练习相结合的方法进行教与学，利用多媒体课件和多媒体设备辅助教学。思考题与参考书参考资料：网上实例课后小结讲 授 内 容 与 课 堂 组 织第六部分：综合网站设计1、 ASP JOB站点简介1)在你硬盘上一个名为ASP Job目录。2)将CD上的文件拷贝此目录，当你这样做的时候，确保复制其下的全部文件及目录。3)使用IIS管理器事为ASP Job目录创建一个映射目录。4)使用IIS管理者为这个目录创建一个应用。5)使用任何的文本编辑器从ASP Job目录中打开Global.asa。2、 网站设计设计主题、内容、风格等。策划包括内容的组织，还包括实质性的页面设计的总方针，比如页面的目录结构、链接结构、页面组成、布局结构等。制定站点目录结构。3、 主页设计主页结构都包括：页面标题，网站标志Logo，页眉区，导航区，登录区，搜索区，推荐热点区，主内容区，页脚区。设计网页不仅仅是把相关的内容放入网页就行了,还要求把它们合理安排,给浏览者美的感受。排版布局是决定网站美观与否的一个重要方面。4、 各模块功能实现计数器、留言板、新闻发布、电子邮件、搜索引擎等。5、 站点的维护和发布