动态网页设计与制作实用教程

《动态网页设计计与制作实用用教程》电子教案制作：程伟伟渊任俊俊杰目录录网页设计概述述FlashMX基础知知识动画角色的绘绘制与编辑动画的基本形形式洋葱皮、图层层及声音的应应用动画技术的综综合应用FireworksMX基础知识识位图编辑与动动画制作图像的优化与与导出DreamweaverMX基础础知识设计页面布局局网页元素的添添加与编辑链接、库与模模板浏览器动态网网页的制作服务器动态网网页知识基础础服务器动态网网页的制作动态网页设计计实例站点管理1.1网网页设计的的基本方式1.2网网页中的常常见元素1.3网网页元素的的创作与编辑辑工具1.4HTML基基础知识1.5动动态网页的的支持技术第1章网页设计概述述第2章FlashMX基础知知识2.1认认识FlashMX2.2FlashMX的工工作界面2.3创创建与保存动动画第3章动动画角色的绘绘制与编辑3.1图图形角色的绘绘制与填充3.2编编辑图形角色色3.3角色色创作实例第4章动动画的基本形形式4.1动动画制作的有有关概念4.2三三种基本动画画形式第5章洋洋葱皮、图层层及声音的应应用5.1洋洋葱皮效果的的应用5.2图图层的应用5.3声音音效果的应用用第6章动动画技术的综综合应用6.1交交互动画的制制作6.2动动画的输出与与优化6.3动动画制作综合合实例第7章FireworksMX基础知识识7.1网网页图像概述述7.2认认识FireworksMX7.3矢矢量图像的绘绘制与编辑7.4修修改对像第8章位图图编辑与动画画制作8.1位位图的编辑8.2在在FireworksMX中建立立动画实例第9章图图像的优化与与导出9.1图图像的优化9.2图图像的导出第10章DreamweaverMX基础础知识10.1认认识DreamweaverMX10.2本本地站点的的建立10.3网网页的建立立与保存第11章设设计页面面布局11.1使用表格对页页面进行布局局11.2在在布局视图图中对页面进进行布局11.3使使用框架对对页面进行布布局11.4使使用层对页页面进行布局局第12章网网页元素素的添加与编编辑12.1添添加文本和和设置文本格格式12.2图图像的的添加与编编辑12.3媒媒体的的添加与编编辑12.4表表单的的添加与编编辑第13章链链接接、库与模模板13.1链链接接13.2库库项项目13.3模模板板第14章浏浏览器器动态网页页的制作14.1行行为与与行为面板板14.2应应用用行为制作作动态网页页第15章服服务器动动态网页知知识基础15.1ASP技术基基础15.2脚脚本语语言简介15.3数数据库库基础知识识15.4测测试服服务器的建建立15.5ASP应用程序举举例第16章服服务器动动态网页的的制作16.1动动态站站点的建立立16.2后台数据库库的设计16.3数数据提交功功能的实现现16.4数数据显显示功能的的实现16.5数数据查查询功能的的实现16.6数数据维护护功能的实实现16.7成成绩管管理系统主主页的建立立第17章服服务器动动态网页的的制作17.1网上新闻发发布17．2网上投票系系统的设计计第18章站站点管管理18.1测试本地站站点18.2站站点点文件的上上传18.3站站点的维护护与管理18.4宣宣传传自己的网网站附录：经典典网页赏析析经典网页赏赏析1经典网页赏赏析2经典网页赏赏析3经典网页赏赏析4经典网页赏赏析5经典网页赏赏析61.1网网页设设计的基本本方式1.1.1手工编编码方式1.1.2利用可可视化工具具1.1.3手工编编码与可视视化工具结结合1.2网网页中中的常见元元素1.2.1文本1.2.2图象与与动画1.2.3音频与与视频1.2.4超级链链接1.2.5表格1.2.6表单1.2.7导导航栏1.2.8其其他元素素1.3网网页元素素的创作作与编辑辑工具1.3.1网网页图像像制作工工具1.3.2动动画制作作工具1.3.3网网页编辑辑工具1.4HTML基础知知识1.4.1HTML的基基本概念念1.4.2HTML的基基本语法法结构1.5动动态网页页的支持持技术1.5.1ASP技技术1.5.2PHP技技术1.5.3JSP技技术2.1认认识识FlashMX2.1.1FlashMX的的发展2.1.2FlashMX的的新增功功能2.2FlashMX的工工作界面面2.2.1菜菜单栏栏2.2.2工工具栏栏和绘图图工具箱箱2.2.3时时间轴轴面板2.2.4属属性面板板2.2.5其其他面板板2.3创创建与保存动动画2.3.1创创建与保保存动画2.3.2文文档属性性设置3.1图图形角色的绘绘制与填充3.1.1图图形角色色的绘制3.1.2颜颜色的填填充3.2编编辑图形角色色3.2.1选选取角色色3.2.2复复制和删删除3.2.3擦擦除角色色工具3.2.4变变形工具具3.3角色色创作实例3.3.1笑笑脸/哭脸的绘制3.3.2花花朵的的制作3.3.3放放大镜绘制制3.3.4水水晕的的制作3.3.5放放射齿轮的的绘制3.3.6弯弯月的的制作4.1动动画制作的有有关概念4.1.1场场景4.1.2时时间轴4.1.3帧帧4.1.4元元件4.2三三种基本动画画形式4.2.1逐逐帧动画画的制作4.2.2位位移动画画的制作4.2.3变变形动画画5.1洋洋葱皮效果的应应用FlashMX中有种专门的的多帧编辑与与对齐模式，，叫作"洋葱皮效果"(OnionSkin)，它们位于时时间轴下面。。把"洋葱皮"视图模式打开开，点按时间间轴下面的图图标，时间轴轴会变成时间间轴上出现了了两个圆圈，，它们分别代代表洋葱皮的的起始帧与终终止帧，凡是是在这个范围围内的帧都可可在同时间进进行显示。现现在我们把右右边的圆圈拉拉到第30帧帧工作区区中的的内容容也会会有所所变化化，从从第1帧到到第30帧帧的内内容全全显示示出来来了。。洋葱葱皮模模式的的作用用主要要是用用来进进行多多帧编编辑，，在进进行起起始帧帧与终终止帧帧的元元素精精确定定位时时，它它常常常是必必不可可少的的工具具。元件有有个中中心点点，它它是缩缩放与与旋转转操作作的参参照点点，因因此在在进行行多帧帧编辑辑时有有必要要先改改变元元件的的中心心点再再进行行编辑辑。改改变元元件中中心点点的操操作是是在元元件的的编辑辑窗口口中进进行的的。5.2图图层层的应应用5.2.1图图层层的状状态5.2.2图图层层的基基本操操作5.2.3图图层层的属属性5.2.4引引导导层5.2.5遮遮罩罩层5.3声声音效效果的的应用用5.3.1影影响响声音音质量量的因因素5.3.2音音频频文件件的导导入5.3.3给给动动画加加上声声音6.1交交互互动画画的制制作6.1.1交交互互动画画的原原理6.1.2简简单单交互互动画画的制制作6.1.3交交互互动画画实例例6.1.4交交互互性性的的检检测测6.2动动画画的的输输出出与与优优化化6.2.1Flash动动画画的的输输出出6.2.2Flash动动画画的的优优化化6.3动动画画制制作作综综合合实实例例6.3.1下落落的的弹弹性性小小球球6.3.2放大大镜镜6.3.3水中中倒倒影影6.3.4光笔笔写写字字6.3.5书本本翻翻页页6.3.6电子子琴琴6.3.7鼠标标跟跟随随效效果果的的制制作作6.3.8秋雨雨连连绵绵7.1网网页页图图像像概概述述7.1.1图图像像的的格格式式7.1.2矢矢量量图图像像和和位位图图图图像像7.2认认识识FireworksMX7.2.1FireworksMX的的特特点点7.2.2FireworksMX的的工工作作界界面面7.2.3文文档档的的基基本本操操作作7.3矢矢量量图图像像的的绘绘制制与与编编辑辑7.3.1图图像像的的绘绘制制模模式式7.3.2矢矢量量图图像像的的绘绘制制7.3.3布布局局工工具具的的使使用用7.3.4标标题文文字的制制作7.4修修改改对像7.4.1选选择对对像7.4.2组组织和和管理对对像7.4.3整整形路路径8.1位位图图的编辑辑8.1.1位位图编编辑工具具8.1.2位位图编编辑实例例8.2在在FireworksMX中中建立动动画实例例8.2.1建建立动动画对象象8.2.2动动画的的设定8.2.3动动画预预览8.2.4动动画的的编辑8.2.5.编编辑运运动路径径8.2.6输输出gif动动画9.1图图像像的优化化9.1.1优优化图图像应考考虑的因因素9.1.2图图像优优化的途途径9.2图图像像的导出出9.2.1常常规输输出9.2.2输输出出一个个图像像的区区域9.2.3输输出出切片片9.2.4输输出出Flash格格式9.2.5使用““导出出向导导”10.1认认识DreamweaverMX10.1.1DreamweaverMX的的新增增功能能10.1.2DreamweaverMx的工作作区10.1.3常常规参参数的的设置置10.1.4在在多用用户系系统中中自定定义DreamweaverMX10.2本本地站站点的的建立立10.2.1关关于站站点规规划和和设计计10.2.2本本地站站点的的建立立与编编辑10.3网网页的的建立立与保保存在完成成了本本地站站点的的定义义之后后，现现在开开始建建立我我们的的第一一个网网页，，操作作步骤骤如下下：1.选择网网页格格式选择““文件件/新新建””菜单单或使使用““标准准工具具栏””的新新建按按钮，，则打打开一一个对对话窗窗口。。选择择“基基本页页”中中的““HTML”模模式。。点击击右下下角的的“创创建””按钮钮，打打开一一个新新的文文件窗窗口。。2.设置网页属性性在编辑新网页页前应该先设设置页面属性性，也就是对对页面进行整整体规划。页页面属性的设设置操作为：：选择“修改改/页面属性”或或在工作区按按鼠标右键选选择弹出菜单单中的“页面面属性”选项项激活属性设设置面板。设置完毕点击击右上角的““确定”按钮钮。3.编辑网页元素素在网页上添加加文本、图片片、表格等网网页元素。4.在网页中加注注释（1）选中插入注注释的位置。。（2）选择“插入入/文本对象/注释”菜单，，在窗口中输输入注释内容容。（3）编辑注释：：双击页面中中的注释图标标即可进入编编辑界面。5．保存网页选择“文件/保存”菜单，，给网页命名名并存入相应应文件夹。11.1使用表格对页页面进行布局局11.1.1创建表表格11.1.2表格的的编辑11.1.3对表格格进行排序11.2在在布局视图图中对页面进进行布局11.2.1布局视视图简介11.2.2布局视视图的切换11.2.3绘制布布局单元格和和表格11.2.4向布局局单元格中添添加内容11.2.5布局单单元格的调整整11.2.6设置布布局单元格的的格式11.2.7设置布布局视图参数数11.3使使用框架对对页面进行布布局11.3.1框架（（集）概述11.3.2创建框框架和框架集集11.3.3选择框框架和框架集集11.3.4在框架架中打开文档档11.3.5保存框框架和框架集集文件11.3.6设置框框架（集）属属性11.4使用用层对页面进进行布局11.4.1层的创创建11.4.2层的基基本操作11.4.3向层添添加内容11.4.4修改现现有层的属性性11.4.5层和表表的转换12.1添添加文本和和设置文本格格式12.1.1文本元元素的添加和和编辑12.1.2HTML样式的应用12.1.3层叠样样式（CSS）的应用12.2图图像的添加加与编辑12.2.1添加图图像12.2.2编辑图图像12.3媒媒体的添加加与编辑12.3.1添加Flash影片12.3.2添加Shockwave影片12.3.3向页面面添加视频12.3.4向页面面添加声音12.4表表单的添加加与编辑12.4.1表单及表单对对象13.1链链接13.1.1链接的的创建与管理理13.1.2链接的的应用13.2库库项目13.2.1认识““库“项目13.2.2创建和和编辑库项目目13.2.3.使用库库项目13.3模模板13.3.1创建编编辑模板13.3.2应用模模板13.3.3更新模模板14.1行行为与行为为面板14.1.1行为的的工作原理14.1.2行为面面板的应用14.2应应用行为为制作动态网网页14.2.1与层有有关的行为14.2.2打开浏浏览器窗口14.2.3播放声声音14.2.4弹出消消息14.2.5设置文文本14.2.6显示弹弹出式菜单14.2.7检查表表单14.2.8制作时时间线动画14.2.9检查浏浏览器14.2.10检查插插件15.1ASP技技术基础15.1.1ASP的概念与工工作流程15.1.2ASP应用程序15.1.3ASP的内建对象象15.2脚脚本语言简简介15.2.1VBscript基础知识15.2.2VBScript控制结构15.3数数据库基础础知识15.3.1数据库库简介15.3.2ACCESS数数据库基本操操作15.3.3数据源源的建立15.4测测试服务器器的建立ASP应用程序的脚脚本代码必须须用脚本引擎擎来解释执行行。因此运行行Asp程序序前前应应该该先先安安装装包包含含脚脚本本引引擎擎的的服服务务器器管管理理程程序序IIS或PWS，也就是建建立一个个测试服服务器。。任何一台台具有IP地址的计计算机（（没有联联网的计计算机管管理程序序默认一一个IP地址），安装装上服务务器管理理程序后后就构成成了一台台服务器器。常见的Web服务器管管理软件件包括IIS（MicrosoftInternetInformationServer）、PWS（MicrosoftPersonalWebServer）、ApacheHTTPServer、NetscapeEnterpriseServer和iPlanetWebServer等。安装装哪一种种Web服务软件件根据所所用操作作系统而而定，在在WindowsNT及Windows2000以上中中安装装IIS最为常常用，，在Windows95/98安装服服务器器软件件一般般只能能使用用PWS。这里里主要要讲述述服务务器管管理软软的安安装与与服务务器站站点的的发布布过程程。说明：：与真真正的的INTERNET服务器器相比比，测测试服服务器器不需需要申申请外外部IP地址，，不需需要域域名解解析，，主要要用来来测试试本地地机上上的ASP应用程序序。测试试服务器器可以是是局域网网上的计计算机，，也可以以是未连连网的单单机。如如果是局局域网内内的计算算机设成成了服务务器，则则它上面面的站点点可通过过内部IP地址进行行访问。。如：在在局域网网上建立立了内部部IP地址为““1”的测测试服务务器，则则在浏览览器地址址栏中输输入“1/站点虚虚拟目录录名/主主页名””即可访访问测试试服务器器上的站站点。15.5ASP应用程序序举例15.5.1数数据据提交入入库的程程序设计计15.5.2查查询询功能的的实现15.5.2ASP程序序的调试试与纠错错16.1动动态站点点的建立立16.1.1工工作作流程和和程序结结构16.1.2建建立立、发布布站点16.1.3在DreamweaverMX中中定义本本地站点点16.2后台数据据库的设设计16.2.1设设计计库结构构，创建建数据源源16.2.2在DreamweaverMX中建立数数据库连连接16.3数据提提交功能能的实现现16.3.1表表单单网页的的建立16.3.2记记录录集的建建立16.3.3记记录录集与表表单的绑绑定16.4数数据显示功功能的实现16.4.1记录的的显示16.4.2动态显显示多条记录录16.4.3记录的的计数和统计计16.4.4记录集集导航条的建建立16.5数数据查询功功能的实现16.5.1创建查查询页面16.5.2构建结结果页面16.5.3建立查查询显示详细细面页16.6数数据维护功能能的实现16.6.1创建登登录页面16.6.2数据维维护16.7成成绩管理系系统主页的建建立通过上面的操操作，我们已已经实现了成成绩管理的数数据录入、查查询显示、数数据护等功能能。为了便于于用户操作使使用，下面建建立管理主页页，将各功能能集成起来。。17.1网上新闻发布布17.1.1工作流流程图17.1.2数据表表的结构17.1.3建立数数据库连接17.1.4新闻提提交功能的实实现17.1.5创建显示页面面17.1.6在网页页上实现对数数据库的维护护17.2网上投票系统统的设计17.2.1工作流程图17.2.2站点结结构图17.2.3后台数数据库设计17.2.4建立数数据库连接17.2.5投票页页面的设计17.2.6投票结结果的柱状显显示18.1测试本地站点点18.1.1测试站点网页页与目标浏览览器的兼容性性18.1.2预览自自己的网页18.1.3检验文文件的大小及及下在载时间间18.2站站点文件件的上传18.2.1文件传传输的基础知知识18.2.2在DreamweaverMX中传输输站点18.2.3存回/取出功能简简介18.2.4设计备备注功能介绍绍18.2.5上传网网页文件到局局域网18.3站站点的维维护与管理18.3.1站点文文件管理18.3.2远程与与本地站点同同步18.3.3检查与与修正超级链链接18.4宣宣传自自己的网站18.4.1注册好好记的域名18.4.2在各大大搜索引擎上上登陆注册站站点18.4.3在电子子邮件签名中中添加站点地地址18.4.4到BBS上公布站站点信息18.4.5与相关关站点彼此链链接1.1.1手手工编码方方式1.1.2可视化工具方方式随着网页制作作技术的不断断发展，出现现了诸如FrontPage、Dreamweaver等等可视化的网网页编辑工具具。利用这些些工具人们在在可视环境下下编辑制作网网页元素，由由编辑工具自自动生成对应应的网页代码码。如要在网网页上显示图图1-1中的表格，就就可以直接在在工作区中绘绘制表格而不不用考虑编码码的规则和语语法。利用可可视化工具编编辑网页操作作简单直观，，调试方便，，是大众化的的网页编辑方方式。但利用用可视化工具具在制作一些些特殊网页效效果上有一定定的局限性。。1.1.3编码和可视化化工具结合方方式编码和可视化化工具结合是是一种比较成成熟的网页制制作方式。具具体过程为：：一般的网页页元素通过可可视化工具编编辑制作，一一些特殊的网网页效果通过过插入代码生生成。这种方方式效率高、、调试方便而而且可以实现现丰富的网页页效果，但要要求设计人员员既要熟悉Html语言又能运用用可视化工具具。除了上面面三种基本的的网页设计制制作方式外，，我们还可以以通过修改已已有的网页代代码生成自己己的网页。在在网页编辑制制作过程中具具体采用何种种方式要根据据个人的具体体情况而定，，每必要拘泥泥于某种固定定的模式。1.2.1文本文本一直是人人类最重要的的信息载体与与交流工具，，网页中的信信息也以文本本为主。与图图象相比，文文字虽然不如如图象那样能能够很快引起起浏览者的注注意，但却能能准确地表达达信息的内容容和含义。为为了克服文字字固有的缺点点，人们赋予予了网页中文文本更多的属属性，如字体体，字号，颜颜色，底纹和和边框等，通通过不同格式式的区别，突突出显示重要要的内容。此此外，用户还还可以在网页页中设计各种种各样的文字字列表，来清清晰表达一系系列项目。这这些功能都给给网页中的文文本赋予了新新的生命力。。1.2.2图像和动画图像在网页中中具有提供信信息，展示作作品，装饰网网页，表达个个人情调和风风格的作用。。用户可以在在网页中使用用GIF,JPEG(JPG),PNG三种图象格式式，其中使用用最广广泛的是GIF和JPEG两种格式。说明：当用户户使用所见即即所得的网页页设计软件在在网页上添加加其他非GIF,JPEG,或或PNG格式式的图片并保保存时，这些些软件通常会会自动将少于于8位颜色的的图片转化为为GIF格式式，或将多于于8位颜色的的图片转化为为JPEG.在网页页中为为了更更有效效地吸吸引浏浏览者者的注注意，，许多多网站站的广广告都都做成成了动动画形形式。。图1-2中的““无限限情缘缘”，，就是是一个个动画画广告告。1.2.3声音音和和视视频频声音音是是多多媒媒体体网网页页的的一一个个重重要要组组成成部部分分。。当当前前存存在在着着一一些些不不同同类类型型的的声声音音文文件件和和格格式式，，也也有有不不同同的的方方法法将将这这些些声声音音添添加加到到Web页中中。。在在决决定定添添加加声声音音之之前前，，需需要要考考虑虑的的因因素素包包括括其其用用途途，，格格式式，，文文件件大大小小，，声声音音品品质质和和浏浏览览器器差差别别等等。。不不同同浏浏览览器器对对于于声声音音文文件件的的处处理理方方法法是是非非常常不不同同的的，，彼彼此此之之间间很很可可能能不不兼兼容容。。用于网络的声声音文件的格格式非常多，，常用的有MIDI、WAV、MP3和AIF等。设计者在在使用这些格格式的文件时时，需要加以以区别。很多多浏览器不要要插件也可以以支持MIDI,WAV和AIF格式的文件，，而MP3和RM格式的声音文文件则需要专专门的浏览器器播放。一般来说，不不要使用声音音文件作为背背景音乐，那那样会影响网网页下载的速速度。可以在在网页中添加加一个打开声声音文件的链链接，让音乐乐播放变得可可以控制。视频文件的格格式也非常多多，常见的有有Realplay,MPEG,AVI和和DivX等等。视频文件件的采用让网网页变得精彩彩而有动感。。1.2.4超级链接超级链接技术术可以说是万万维网流行起起来的最主要要的原因。它它是从一个网网页指向另一一个目的端的的链接，例如如指向另一个个网页或者相相同网页上的的不同位置。。这个目的端端通常是另一一个网页，但但也可以是一一幅图片，一一个电子邮件件地址，一个个文件，一个个程序或者是是本网页中的的其他位置。。其热点通常常是文本，图图片或图片中中的区域，也也可以是一些些不可见的程程序脚本。当浏览者单击击超级链接热热点时，其目目的端将显示示在Web浏览器上，并并根据目的端端的类型以不不同方式打开开。例如，当当指向一个AVI文件的超级链链接被单击后后，该文件将将在媒体播放放软件中打开开；如果单击击的是指向一一个网页的超超级链接，则则该网页将显显示在Web浏览器上。加加下划线的文文字，就是已已经建立了超超链接的文本本。1.2.5表格在网网页页中中表表格格用用来来控控制制网网页页中中信信息息的的布布局局方方式式。。这这包包括括两两方方面面：：一一是是使使用用行行和和列列的的形形式式来来布布局局文文本本和和图图像像以以及及其其他他的的列列表表化化数数据据；；二二是是可可以以使使用用表表格格来来精精确确控控制制各各种种网网页页元元素素在在网网页页中中出出现现的的位位置置。。图图1-2中““特特色色栏栏目目””，，就就运运用用了了表表格格进进行行布布局局定定位位。。1.2.6表单单使用超级链接接，浏览者和和Web站点便建立起起了一种简单单的交互关系系。网页中的的表单通常用用来接受用户户在浏览器端端的输入，然然后将这些信信息发送到用用户设置的目目标端。这个个目标可以是是文本文件，，Web页，电子邮件件，也可以是是服务器端的的应用程序。。表单一般用用来收集联系系信息、接受受用户要求、、获得反馈意意见、设置来来宾签名簿、、让浏览者注注册为会员并并以会员的身身份登陆站点点等。表单由不同功功能的表单域域组成，最简简单的表单也也要包含一个个输入区域和和一个提交按按钮。站点浏浏览者填写表表单的方式通通常是输入文文本，选中单单选按钮或复复选框，以及及从下拉列表表框中选择选选项等。根据表表单功功能与与处理理方式式的不不同，，通常常可以以将表表单分分为用用户反反馈表表单，，留言言簿表表单，，搜索索表单单和用用户注注册表表单等等类型型。中右上上角的的“手手机参参与””就是是一个个手机机号的的提交交表单单。1.2.7导航栏栏导航栏栏是用用户在在规划划好站站点结结构，，开始始设计计主页页时必必须考考虑的的一项项内容容。导导航栏栏的作作用就就是引引导浏浏览者者游历历站点点。事事实上上，导导航栏栏就是是一组组超级级链接接，这这组超超级链链接的的目标标就是是本站站点的的主页页以及及其他他重要要网页页。在在设计计站点点中的的诸网网页时时，可可以在在站点点的每每个网网页上上显示示一个个导航航栏，，这样样，浏浏览者者就可可以既既快又又容易易的转转向站站点的的其他他网页页。一般情情况下下，导导航栏栏应放放在网网页中中较引引人注注目的的位置置，通通常是是在网网页的的顶部部或一一侧。。导航航栏既既可以以是文文本链链接，，也可可以是是一些些图形形按钮钮。图图1-2中的导导航栏栏就是是一组组文本本链接接。1.2.8其他常见见元素网页中除除了以上上几种最最基本的的元素之之外，还还有一些些其它的的常用元元素，包包括悬停停按钮，，Java特效效，ActiveX等等各种特特效。它它们不仅仅能点缀缀网页，，使网页页更活泼泼有趣，，而且在在网上娱娱乐，电电子商务务等方面面也有着着不可忽忽视的作作用。1.3.1网页图像像制作工工具1.FireworksMXFireworkMX是Macromedia公司的的产品，，是目前前最流行行的网页页图像制制作软件件。只有有将Dreamweaver的默认认图像编编辑器设设为Fireworks，，那么在在Fireworks中制制作完成成网页图图像后将将其输出出就会立立即在Dreamweaver中更更新。Fireworks还还可以安安装使用用所有的的Photoshop滤镜，，并且可可以直接接导入PSD格格式图像像。更方方便的是是它不仅仅结合了了Photoshop位图功功能以及及CorelDRAW矢量图图的功能能，而且且提供了了大量的的网页图图像模板板供用户户使用。。。其最最方便之之处是，，它可以以将图像像切割，，图像映映射，悬悬停按钮钮，图像像翻转等等效果直直接生成成HTML代码码，或者者嵌入到到现有的的网页中中，或者者作为单单独的网网页出现现。2.PhotoImpactPhotoImpact是一个功功能强大大，有趣趣且好用用的基于于对象的的图像编编辑软件件。在这这个软件件中，所所有要编编辑的图图像都会会向以独独立的对对象形式式存在，，用户可可以一直直对独立立的对象象进行编编辑，直直到满意意后再将将它合并并到图像像上。1.3.2动画制作作工具1.FlashMXFlashMX也是Macromedia公公司的产产品，是是目前最最流行的的矢量动动画制作作软件。。与其它它的动和和软件相相比，它它具有一一些优点点：制作的是是矢量图图像。只只有用少少量矢量量数据就就可以描描述一个个复杂的的对象，，而占有有的存储储空间只只是位图图的几千千分之一一，非常常适合在在网络上上使用。。同时，，矢量图图像不会会随浏览览器窗口口大小的的改变而而改变画画面质量量。使用插件方方式工作。。提供了一些些增强功能能。例如，，支持位图图，声音，，渐变色和和Alpha透明等等。拥有了了这些功能能，用户就就完全可以以建立一个个全部由Flash制作的站站点。Flash影片也是是一种流式式文件。这这就是说，，浏览者在在观看一个个大动画时时，可以不不必等到影影片全部下下做到本地地在观看，，而是可以以随时观看看，即使后后面的内容容还没有完完全下载，，也可以开开始欣赏动动画。2.DirectorDirector是是Macromedia公司司推出的多多媒体开发发工具，它它为广大多多媒体制作作人员提供供了建立交交互式应用用的强大功功能。用户户可以在友友好的界面面下通过使使用Director制作出出令人满意意的多媒体体作品。Director是是一个简单单且直观的的软件，即即使是首次次使用该软软件的用户户也能编出出优秀的程程序。而且且，Director又是一一个高度面面向对象的的工具，非非常适合图图像设计者者使用。1.3.3网页编辑工工具1.FrontPage2000FrontPage2000是MicrosoftOffice2000家家族中的一一员，FrontPage2000的界面，，功能与Word2000都非常常相似。FrontPage2000提供了相相当数量的的模版和向向导，使初初学者能够够非常容易易的设计出出美观实用用的网页。。FrontPage2000最强强大之处，，是其站点点管理与远远程发布功功能。用户户只需在本本地对网页页进行编辑辑，FrontPage2000便便会跟踪用用户编辑过过的文件，，在发布时时，自动将将修改过的的网页进行行发布，未未编辑过的的网页可由由用户决定定是否再次次向服务器器发送。2.DreamweaverMXDreamweaverMX和和FireworksMX、、FlashMX一一起起，，被被人人们们喻喻为为““网网页页制制作作三三剑剑客客””。。同同FrontPage一一样样，，Dreamweaver也也是是““所所见见即即所所得得””的的网网页页编编辑辑软软件件。。它它能能够够很很好好的的支支持持ActiveX,JavaScript,Java,Flash和和Shockwave等等，，而而且且还还能能通通过过鼠鼠标标拖拖动动的的方方式式从从头头到到尾尾制制作作动动态态的的HTML效效果果。。Dreamweaver还还采采用用了了RoundtripHTML技技术术，，使使用用这这些些技技术术，，网网页页可可以以在在Dreamweaver和和HTML代代码码编编辑辑器器之之间间进进行行自自由由转转化化，，而而HTML语语法法及及结结构构不不变变。。这这样样，，专专业业设设计计者者可可以以在在不不改改变变原原有有编编辑辑习习惯惯的的同同时时，，充充分分享享受受到到““所所见见即即所所得得””带带来来的的方方便便。。Dreamweaver3.HotDogHotDog是较早基于代代码的网页设设计工具，其其最具特色的的地方是提供供了许多向导导工具，能帮帮助设计者制制作页面中的的复杂部分。。HotDog的高级HTML支持插入marquee（动态文本标标记），并能能在预览模式式中以正常速速度观看。这这点非常难得得，因为即使使首创这种标标签的Microsoft在FrontPage98中也未提供这这样的功能。。HotDog对plug－in的支持也远远远超过其他产产品，它提供供的对话框允允许你以手动动方式为不同同格式的文件件选择不同的的选项。但对对中文的处理理不很方便。。HotDog是个功能强大大的软件，对对于那些希望望在网页中加加入CSS、Java、RealVideo等复杂技术的的高级设计者者，是个很好好的选择。1.4.1HTML基本概念1.HTML的概念HTML是一种描述语语言，对WEB页面中显示内内容的属性以以标签的形式式进行描述。。客户机上的的浏览器（browser）对这些描述述进行解释将将相应页面内内容正确显示示在显示器上上。一个WEB页面就就是一一个HTML文档。2.HTML文档档的构构成HTML文档由由三大大元素素构成成：HTML元素、、HEAD元素和和BODY元素。。每个个元素素又包包含各各自相相应的的标记记（属属性））。HTML元素是是最外外层的的元素素，里里面包包含HEAD元素和和BODY元素。。HEAD元素中中包含含对文文档基基本信信息（（文档档标题题，文文档搜搜索关关键字字、文文档生生成器器等））描述述的标标记。。BODY元素是是文档档的主主体部部分，，包含含有对对网页页元素素（文文本、、表格格、图图片、、动画画、链链接等等）描描述的的标记记。HTML中标记记一般般成对对，如如：<P><／P><HTML><／HTML>等，但但也有有一些些不成成对。。HTML文档的的结构构形式式如下下：<HTMLVERSION=“-//W3C//DTDHTML3.2FINAL//EN””><HEAD>页面信信息的的描述述</HEAD><BODY>页面面元元素素的的描描述述</BODY></HTML>3.HTML文文档档的的编编辑辑HTML文档档是普通通文本(ASCII)文文件,它可可以用任任意编缉缉器(如如windows中的的记事本本、写字字板,Macintosh中的的BBEdit等)生生成。你你也可可以使用用字处理理软件,不过过要记住住存文件件时要存存成“带带回车的的纯文本本”。早早期网页页制作的的过程就就是直接接书写HTML代码来来定义页页面元素素的过程程。1.4.2HTML的基本语语法结构构1.HTML元素的的标记HTML标记HTML标记是对对整个文文档属性性的描述述，即告告诉浏览览器HTML文档的开开始与结结束。2.HEAD元素（1）HEAD标记该标记用用来表示示HEAD元素的开开始和结结束。（2）BASE标记(不成对标标记)。（3）META标记（（不成对对标记））（4）TITLE标记（5）SCRIPT标标记记用来表表示HEAD元素的开开始和结结束，其其格式为为：<HEAD></HEAD>。3．BODY元元素(可可见对象象的描述述)（1）BODY标记该标记是是BODY元素素开始和和结束的的标志。（2）DIV层层标记（3）文文本标记记（4）段段落标记记（5）表表格标记记（6）图图象标记记（7）下下拉表单单标记（8）链链接（（Linking）标标记（9）多多媒体标标记（10））移动文文字标记记1.5.1asp技术ASP（MicrosoftActiveServerPages）是一套套微软开开发的服服务器端端脚本环环境，ASP内含于IIS3.0和4.0之中,通过ASP我们可以以结合HTML网页、ASP指令和ActiveX元件建立立动态、、交互且且高效的的WEB服务器应应用程序序。有了了ASP你就不必必担心客客户的浏浏览器是是否能运运行你所所编写的的代码，，因为所所有的程程序都将将在服务务器端执执行，包包括所有有嵌在普普通HTML中的脚本本程序。。当程序序执行完完毕后，，服务器器仅将执执行的结结果返回回给客户户浏览器器，这样样也就减减轻了客客户端浏浏览器的的负担，，大大提提高了交交互的速速度。ASP应用程序序可以手手工编码码制作，，也可以以通过DreamweaverMX等可可视化工工具创作作生成。。ASP的具体内内容将在在后面的的动态网网页设计计中讲解解。1.5.2PHP技术1.5.3JSP技术JSP与Microsoft的ASP技术非常常相似。。两者都都提供在在HTML代码中混混合某种种程序代代码、由由语言引引擎解释释执行程程序代码码的功能能。与ASP一样，JSP中的Java代码均在在服务器器端执行行。因此此，在浏浏览器中中使用"查看源文文件"菜单是无无法看到到JSP源代码的的，只能能看到结结果HTML代码。JSP与与ASP虽然有有很多相相识之处处，但两两者也有有重要区区别：第第一，ASP的的编程语语言是VBScript之类类的脚本本语言，，JSP使用的的是Java；；第二，，两种语语言引擎擎用完全全不同的的方式处处理页面面中嵌入入的程序序代码。。在ASP下，，VBScript代代码被ASP引引擎解释释执行；；在JSP下，，代码被被编译成成Servlet并由由Java虚拟拟机执行行处理代代码。2.1.1FlashMX的发展2.1.2FlashMX的新增功功能1.增强型颜颜色管理理2.属属性检查查器3.扩展的视视频功能能4.像像素级控控制5.创作时间间共享库库6.Flash组件7.增强型开开发环境境8.增强型时时间轴2.2.1菜单栏菜单栏包包括文件、编编辑、查查看、插插入、修修改、文文本、控控制、窗窗口、帮帮助等菜菜单。通通过菜单单栏可完完成动画画制作的的全部操操作。单单击每个个菜单选选项，可可以看到到相应的的下拉菜菜单选项项，其具具体功能能将在后后面应用用中讲解解。2.2.2工具栏和和绘图工工具箱1.工具栏工具栏是是由主要要栏、状状态栏、、控制器器等三部部分组成成，可以以在菜单单栏的“窗口/工具栏””选项中中进行启启动。（1）主要栏栏（2）状态栏栏用来显示示相关命命令、按按钮、大大小写，，以及Num锁定情况况，位于于工作区区底端。。（3）控制器器用来控制动画画播放的动作作，它们分别别是停止、倒倒回最前、倒倒退、播放、、快进、进到到最后，2.绘图工具箱绘图工具通过过“窗口/工具”菜单启启动，默认位位置在启动界界面的左侧，，可以用来绘绘画、选取、、喷涂及修改改动画作品中中每一帧的内内容。在FlashMX中，绘图工具具栏由工具、、查看、颜色色和选项4个部分组成。。绘图工具的使使用在后面详详细讲解。2.2.3““时间轴”面板一个动画可以以看作是静态态图片按照一一定的时间顺顺序先后播放放的结果，而而播放时间和和顺序的控制制是通过时间间轴来进行的的。由于牵扯扯到帧与图层层的概念，因因此在这里，，我们不做详详细解说，在在后面我们将将会结合帧与与图层进行综综合的讲解，，大家只需了了解时间轴窗窗口在哪里就就行了。时间间轴面板在““窗口/时间间轴”菜单中中启动。2.2.4““属属性””面板板属性面面板是是FlashMX的的新增增功能能，在在工作作区中中选中中不同同对象象，在在属性性面板板上将将动态态显示示对象象的属属性参参数。。。。2.2.5其他面面板在FlashMX中，还还有几几类设设置面面板，，它们们往往往是进进行元元件设设置的的关键键，因因此我我们必必须熟熟练地地掌握握它们们。这这些设设置面面板在在“窗窗口””菜单单中启启动。。1．“信信息””面板板2．混混色器器3．“变变形””面板板4．“对对齐””面板板5．“场景””面板6．“动作””面板7．库窗口2.3.1创建与保存存动画双击桌面上上或开始菜菜单中的FlashMX图标，程序序打开工作作界面。运运用工具栏栏上的绘图图工具创建建和绘制图图形，制作作完成后。。单击“文文件”菜单单中的“保保存”菜单单项就可以以将你创建建的动画保保存。2.3.2文档属性设设置文档属性包包括动画尺尺寸等内容容。动画的的尺寸就是是动画在播播放时画面面的大小，，在设置动动画之前，，必须根据据需求首先先设置动画画的尺寸，，同时还可可以设置动动画的播放放速度和背背景色等属属性。操作作如下：选选择“修改改/文档””菜单，打打开文档属属性对话框框。3.1.1图形角色的的绘制图形绘制主主要通过绘绘图工具箱箱来完成，，本节主要要讲述绘图图工具箱的的使用。绘绘图工具箱箱。在图形形绘制过程程中，可通通过属性面面板调整绘绘制工具和和绘制图形形的属性。。有些绘图图工具选中中后，在工工具箱的选选项栏中会会出现其模模式选项。。模式选项项使绘图更更加灵活、、准确。1.直线工具2.方形工具3.钢笔工具4.铅笔工具5.笔刷工具6．文本工工具3.1.2颜色的填充充1．墨水瓶工具具：本工具具用来给图图形对象的的线条或几几何图形的的笔画边框框上色。2．颜料桶工工具：对图图像进行填填色，根据据选项的不不同可以采采取多种填填充方式。。3、滴管工工具：本工工具用来进进行颜色取取样，将一一个图形或或线条的颜颜色复制到到其他图形形或线条上上。3.2.1选取角色1．箭头选选择工具：：用于选择择对象。对对任何对象象进行处理理时，首先先得选中它它，然后才才能对其进进行操作。。2.套索工工具：主要要用来选择择具有复杂杂轮廓的对对象，使用用方法是先先用此工具具定下起始始点，然后后大致沿轮轮廓画线，，最后与起起始点重合合形成封闭闭路径从而而选中此范范围内的对对象。3.2.2复制和删除除先选中要复复制或删除除的对象，，然后在对对象上按右右键，选择复制或或删除功能能菜单。（（也可通过过编辑菜单单进行）3.2.3擦除角色工工具本工具用来来擦除一些些不需要的的线条或区区域。标准擦除：：凡橡皮经经过的地方方都被清除除；当然，，不是当前前层的内容容不能清除除。擦除填色：：只擦除填填色区域内内的信息，，非填色区区域，如边边框不能擦擦除。擦除线条：：专门用来来擦除对象象的边框与与轮廓。擦除所选填填色：清除除选定区域域内的填充充色。内部擦除：：擦除情况况跟开始点点相关，如如果起始点点在檫除模式某个物体外外，如空白白区域，那那么这个"内部"则则是空白区区域内部，，这时进行行擦除不能能抹掉物体体信息；如如果起始点点在物体内内，那么这这个“内部部”则是物物体内部，，这时可以以擦除该物物体的相关关信息，而而不能作用用于外部区区域。3.2.4变形工具1．任意变形形工具：本本工具可实实现对动画画角色的大大小和旋转转变形。2．填充变变形工具：：本工具可可实现对填填充内容的的缩放和旋旋转变形，，象前面讲讲过的位图图填充的变变形。3.3.1笑脸/哭脸的绘制制1、制作思路路：利用箭箭头选取工工具拉弯线线条，组成成简笔画。。2、制作步骤骤（1）建立一个个新文件。。(以后实例的的第一步都都是这个操操作，就不不再一一指指明)。（2）用画圆工工具画出空空心圆，在在眼睛和嘴嘴巴部位画画出线段。。（3）选取“黑黑色箭头””工具，让让鼠标逐渐渐靠近线段段，当鼠标标箭头末端端虚线框变变为圆弧时时，按住左左键拉弯线线段，构成成简笔画。。3.3.2花朵的制作作1．制作思路路：利用五五个圆形进进行叠加，，组合出花花朵图案。。2．制作步骤骤：（1）利用画圆圆工具画出出一个填充充色为黄色色无边框的的圆（无边边框显得边边界柔和））和四个填填充色为紫紫色无边框框的圆（复复制）。（2）利用“修修改/组合”菜单单分别把五五个圆组合合起来，并并把他们叠叠加成图案案。必要时时可通过““修改/排列”菜单单调整圆的的排列层次次，使黄色色的圆在其其他圆的上上面。（3）利用矩形形工具、圆圆工具和箭箭头的拖曳曳功能作出出花托。然然后，把花花朵和花托托组合起来来，形成花花朵图案。。3.3.3放大镜绘绘制1.制作思路路：此物物件可由由一个圆圆与一个个弧角方方形构成成，弧角角方形应应用褐色色的实心心填充，，圆则应应用由白白到灰的的放射状状填充。。2．制作步步骤：（1）用方形形工具绘绘制一个个30度的圆角角方形，，并用褐褐色进行行填充。。用箭头头工具拖拖拉弧角角方形的的两条长长边，使使其稍具具弧形。。说明：给方形形设置弧度，，只需通过设设置绘图工具具栏选项下的的属性就行了了。Flash在处处理矢量图形形时，可以任任意改变图像像的大小与外外观，其处理理方法就是用用箭头工具进进行拉扯。（2）绘制一个轮廓为黑色，填充为白色的圆，并将其移动到弧角方形上。（3）在混色器中将填充方式设为“放射状”填充，设置颜料桶。然后用颜料桶工具进行填充。3.3.4水晕的制作1.制作思路：利利用混色器面面板制作透明明的奇特效果果。2.制作步骤：（1）建立Flash文件，背景设为灰黑色。启动混色器面板，选择“放射状”填充模式。设置三个颜料桶。两端桶的颜色为灰色（或淡紫色），中间桶的颜色为白色。选中左端的颜料桶，调整Alpha值为0，即将颜色设为透明。同样将右端的颜料桶设为透明色。中间颜色的Alpha值不变。（2）利用圆形绘图工具（不要边框），绘出正圆，并将其变形。圆圈中间为白色，向两边颜色逐渐过度为透明，显示出背景色。3.3.5放射齿轮的绘绘制1．制作思路：：本物件由三圈圈齿轮构成，，只要做好了了第一个齿轮轮，第二个、、第三个齿轮轮只需通过复复制再变小就就行了。因此此，关键是第第一个齿轮的的制作。要绘绘制一个齿轮轮，只需画一一个齿轮状轮轮廓的圆就行行了。2．制作步骤(1)选定画圆工具具，然后在属属性面板中将将轮廓线形改改成齿轮状。。为了让齿轮轮清楚一些，，我们将轮廓廓高度变得最最大，即10，颜色继续用用默认的黑色色。(2)设定后在工作作区绘出圆形形。(3)选中绘制好的的齿轮，用““编辑/拷贝贝””菜菜单单，，复复制制出出两两个个齿齿轮轮。。调调整整他他们们的的大大小小和和位位置置即即可可制制作作出出效效果果。。3.3.5弯月月的的制制作作1．制制作作思思路路：：本图图形形可可由由两两个个圆圆圆圆叠叠合合而而成成。。具体体制制作作过过程程由由读读者者练练习习完完成成。。4.1.1场景景在Flash动动画画中中，，场场景景犹犹如如一一个个舞舞台台，，所所有有的的演演员员与与所所有有的的情情节节，，都都在在这这个个舞舞台台上上进进行行。。舞舞台台由由大大小小、、音音响响、、灯灯光光等等条条件件组组成成，，场场景景也也有有大大小小、、色色彩彩等等的的设设置置；；跟跟多多幕幕剧剧一一样样，，场场景景也也可可以以不不止止一一个个，，多多个个场场景景可可以以集集合合在在一一起起并并按按它它们们在在场场景景面面板板上上排排列列的的先先后后顺顺序序进进行行播播放放。。1．改改变场场景属属性2．添加一个新场景有两种方法，第一种方法是通过场景面板中的“添加”按钮来完成；第二种方法是调用菜单上“插入/场景”命令进行添加。通过选择“窗口/场景”菜单可启动场景面板,如图4-1。在场景面板右下角的3个按钮功能依次为：复制场景、添加场景、删除场景。3．清除某个场景有两种办法：一种是通过场景面板中的“清除”按钮完成，另一种办法是调用菜单上“插入/清除场景”来清除。4．为场景改名：选择“修改/场景”菜单，然后在弹出的“场景面板”中双击该场景，并进行修改。

4.1.2时间轴轴一个演演出，，光有有舞台台还不不行，，还必必须要要求演演员按按时间间顺序序进行行表演演，应应用到到Flash动动画制制作中中，这这种时时间安安排则则由时时间轴轴来完完成4.1.3帧前面我我们讲讲到了了时间间轴，，随着着时间间的推推进，，动画画会按按照时时间轴轴的横横轴方方向播播放，，而时时间轴轴正是是对帧帧进行行操作作的场场所。。在时时间轴轴上，，每一一个小小方格格就是1.关键帧的定义与操作（1）定义：关键帧定义了一个过程的起始和终结，又可以是另外一个过程的开始，当帧内容发生变化时应当插入关键帧。关键帧具有延续功能，只要定义好了开始关键帧并加入了对象，那么在定义结束关键帧时就不需再添加该对象了，因为起始关键帧中的对象也延续到结束关键帧了。（2）插入关键帧