《《网页设计工具》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计工具》PPT课件.ppt（49页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第6章章 网页设计工具网页设计工具 主讲：本章要点n n网页制作工具Dreamweaver 8 n n图形图像处理工具Fireworks 8 n n动画制作工具Flash 8 6.1 网页制作工具网页制作工具 n n6.1.1 Dreamweaver 86.1.1 Dreamweaver 8的工作环境的工作环境的工作环境的工作环境 n n6.1.2 6.1.2 建立网站建立网站 n n6.1.3 6.1.3 新建网页新建网页 n n6.1.4 6.1.4 输入文本输入文本 n n6.1.5 6.1.5 插入图像插入图像 n n6.1.6 6.1.6 创建表格创建表格 n n6.1.7 6.1
2、.7 层的操作层的操作 6.26.3n n Dreamweaver 8的工作环境的工作环境 打开打开“开始开始”菜单，选择菜单，选择“程序程序”“Macromedia”“Macromedia”“Macromedia“Macromedia Dreamweaver 8”Dreamweaver 8”命令，即可打开命令，即可打开Dreamweaver 8Dreamweaver 8。第一次启动时会弹出一个对话框，在该对话框中有两种工作界面供选择，分别为“设计器”和“编码器”。Dreamweaver 8工作窗口示意图n n标题栏位于标题栏位于Dreamweaver 8Dreamweaver 8的最顶端，用
3、来的最顶端，用来显示显示Dreamweaver Dreamweaver 的标志和网页名称，其功能的标志和网页名称，其功能类似于类似于WindowsWindows操作系统的标题栏。操作系统的标题栏。n n菜单栏位于标题栏的下方，提供了全面的菜单栏位于标题栏的下方，提供了全面的Dreamweaver Dreamweaver 命令，包括命令，包括“文件文件”、“编辑编辑”、“查看查看”、“插入插入”、“修改修改”、“文本文本”、“命令命令”、“站点站点”、“窗口窗口”和和“帮助帮助”等等1010组组不同功能的菜单。不同功能的菜单。n n“插入插入”面板组包括面板组包括8 8个子面板，分别为个子面板，
4、分别为“常用常用”、“布局布局”、“表单表单”、“文本文本”、HTMLHTML、“应用程序应用程序”、“Flash“Flash元素元素”和和“收藏夹收藏夹”。n n“属性属性”面板用来设置页面上内容的属性，内面板用来设置页面上内容的属性，内容不同，容不同，“属性属性”面板上显示的属性也不同。面板上显示的属性也不同。n n面板组默认包含面板组默认包含4 4个面板：个面板：CSSCSS、“应用程序应用程序”、“标签检查器标签检查器”和和“文件文件”。n n6.1.2 建立网站建立网站 使用站点向导建立网站的步骤使用站点向导建立网站的步骤 （1 1）在）在DreamweaverDreamweaver
5、窗口中选择窗口中选择“站站点点”“新建站点新建站点”命令，弹出新建站点对命令，弹出新建站点对话框，在对话框中输入要建立的站点的名称。话框，在对话框中输入要建立的站点的名称。（2 2）单击）单击“下一步下一步”按钮，在打开的对按钮，在打开的对话框中选择是否使用服务器技术，这里保持话框中选择是否使用服务器技术，这里保持默认设置，即不使用服务器技术。默认设置，即不使用服务器技术。n n使用站点向导建立网站使用站点向导建立网站使用站点向导建立网站使用站点向导建立网站 （3）单击“下一步”按钮，在打开的对话框中选择文件存储的位置。（4）单击“下一步”按钮，在打开的对话框中选择连接到服务器的方式为“本地/
6、网络”，然后设置将文件存储在服务器上的地址。（5）单击“下一步”按钮，再单击“完成”按钮，即完成站点的新建。n n管理站点管理站点 使用Dreamweaver中自带的站点管理器管理站点非常方便，它很像Windows操作系统中的资源管理器，一方面它具有管理本地站点的能力，如建立文件、文件夹等操作；另一方面，它可以管理远程站点，如文件上传和更新等。n n6.1.3 新建网页新建网页 在Dreamweaver窗口中选择“文件”“新建”命令，打开“新建文档”对话框，即可创建新文档。n n创建新文档创建新文档 n n设置页面属性设置页面属性在Dreamweaver窗口中选择“修改”“页面属性”命令，或者
7、在文档页面中右击，在弹出的快捷菜单中选择“页面属性”命令，即可打开“页面属性”对话框。n n6.1.4 输入文本输入文本 要在网页中添加文本，有以下两种方法：（1）直接在文档中输入文本。（2）从其他位置复制文本后，在文档窗口的“设计”视图中选择插入点后右击，在弹出的快捷菜单中选择“粘贴”命令。n n添加文本添加文本 n n设置文本格式设置文本格式 在Dreamweaver 8中，可以通过“文本”菜单中的命令和文本的“属性”面板来设置文本的属性。（1）设置字体：首先选中要改变字体的文本，然后在“属性”面板中的“字体”下拉列表框中选择所需的字体。（2）设置字体大小：首先选中要改变尺寸的文本，然后在
8、“属性”面板中的“大小”下拉列表框中选择所需的大小，或者直接在“大小”文本框中输入数值。（3）设置文字颜色：首先选中要设置颜色的文本，然后选择“文本”“颜色”命令，打开“颜色”对话框。在该对话框中设置颜色，设置完成后单击“确定”按钮即可。（4）设置文本对齐方式Dreamweaver 8中提供的文本对齐方式有左对齐、居中对齐、右对齐和两端对齐。设置对齐方式的方法如下：首先在要设置对齐方式的段落中单击，然后选择“文本”“对齐”子菜单中的对齐方式的命令即可。n n6.1.5 插入图像 在要插入图像的位置单击，然后选择“插入”“图像”命令（快捷键为Ctrl+Alt+I），弹出“选择图像源文件”对话框，
9、选择要插入的图像后单击“确定”按钮。n n插入图片插入图片 n n设置图像属性设置图像属性 可以在图像的“属性”面板中对图像的属性进行设置。n n6.1.6 创建表格 在要插入表格的位置单击，然后选择“插入”“表格”命令，弹出“表格”对话框。在该对话框中设置表格属性，完成设置后，单击“确定”按钮。n n插入表格插入表格 n n设置表格属性设置表格属性 选中表格后，可以在表格的“属性”面板中来设置表格的相应属性。n n6.1.7 层的操作 选择“插入”“布局对象”“层”命令，即可创建一个普通层。n n创建层创建层 可以在层的“属性”面板中对层的基本属性进行设置。n n设置层的属性 n n层的基本
10、操作层的基本操作 层的基本操作包括选择层、在层中添加内容、调整层的大小、移动层、更改层等。（1）选择层在对层进行操作之前，第一步是要先选择层，单击层的选择柄，就可以选中该层。（2）在层中添加内容可以在层中添加如文字、图像、表格、Flash动画、多媒体对象等内容。在层中插入内容的具体方法是：首先在层内单击，然后单击“插入”面板组上的相应按钮，就可以在层中插入不同的内容。（3 3）调整层的大小在层的）调整层的大小在层的“属性属性”面板中输面板中输入高度和宽度的数值可以调整层的大小。入高度和宽度的数值可以调整层的大小。（4 4）移动层随意在文档窗口中调整位置是层）移动层随意在文档窗口中调整位置是层的
11、一个很显著的特点。在层的的一个很显著的特点。在层的“属性属性”面板中面板中的的“左左”和和“上上”文本框中输入相应的数值，文本框中输入相应的数值，即可改变层在文档页面中的位置。即可改变层在文档页面中的位置。（5 5）更改层在一个页面中可以创建多个层，）更改层在一个页面中可以创建多个层，每个层都是以每个层都是以Layer1Layer1，Layer2Layer2为它的默为它的默认名称，可以对层的名称进行修改，使得每个认名称，可以对层的名称进行修改，使得每个层的内容更加明确，更改层的名称也是在层的内容更加明确，更改层的名称也是在“属属性性”面板上实现的，方法是在面板上实现的，方法是在“层编号层编号”
12、文本文本框中输入新的名称即可。框中输入新的名称即可。6.2 图形图像处理工具图形图像处理工具 n n6.2.1 Fireworks 8的工作环境的工作环境 n n6.2.2 文档的基本操作文档的基本操作 n n6.2.3 矢量图形的操作矢量图形的操作 n n6.2.4 位图的操作位图的操作6.16.3n n6.2.1 Fireworks 8的工作环境的工作环境 打开“开始”菜单，选择“程序”“Macromedia”“Macromedia Fireworks 8”命令，即可打开Fireworks 8。n n标题栏位于Fireworks 8的最顶端，用来显示Fireworks的标志和网页名称。n
13、n菜单栏包括“文件”、“编辑”、“视图”、“选择”、“修改”、“文本”、“命令”、“滤镜”、“窗口”和“帮助”等10组不同功能的菜单。n n编辑窗口Fireworks 8文档对象都是在编辑窗口进行编辑操作的。编辑窗口位于程序界面的正中间，在文档编辑窗口的顶部有4个按钮，分别是原始、预览、2幅预览视图、4幅预览视图。n n工具箱默认情况下，Fireworks 8的工具箱位于编辑窗口的左侧，共分成6个部分：“选择”、“位图”、“矢量”、Web、“颜色”和“视图”。n n面板组Fireworks 8中有很多种浮动面板，它们通常停靠在一个浮动面板框架中，并以选项卡的形式存在。这种机制能够在有限的桌面空
14、间中放置大量的浮动面板。工具箱示意图n n6.2.2 文档的基本操作文档的基本操作 选择“文件”“新建”命令或单击工具栏中的“新建”按钮可以打开“新建文档”对话框。n n创建文档创建文档 文档建立完毕之后，需要对文档进行保存。可以保存为PNG文档，也可以以导出的方式保存为JPG或GIF等格式。n n保存文档保存文档（1）选择“文件”“保存”命令，如果文档未被保存过，则会打开“另存为”对话框，选择保存路径并输入文件名后单击“保存”按钮即可保存为PNG格式。（2）打开要保存的文档，然后选择“窗口”“优化”命令，打开“优化”面板，进行设置即可导出并保存为其他格式。n n6.2.3 矢量图形的操作矢量
15、图形的操作 位图图像是通过像素来显示图像，每个像素都有其特定的位置和颜色值，因此在处理位图图像时，处理的对象是像素而不是形状。矢量图形是通过图形的几何形状来描述图形，主要由直线和曲线组成，一般来说矢量图形不会受到分辨率的影响，所以矢量图形的应用更为广泛。n n矢量图形与位图图像矢量图形与位图图像 n n绘制矢量图形 矢量图形是以路径定义形状的计算机图形。矢量路径的形状由路径上绘制的点确定。矢量图形的笔触颜色与路径一致，矢量图形在路径内的区域填充。使用工具箱中的矢量对象绘制工具可以通过逐点绘制来绘制基本形状、自由变形路径和复杂形状。（1 1）绘制直线）绘制直线 绘制直线的方法很简单，首先在工具箱
16、中选中绘制直线的方法很简单，首先在工具箱中选中“直线直线”工具，然后拖动鼠标即可绘制直线。当工具，然后拖动鼠标即可绘制直线。当要绘制水平或垂直直线的时候，在拖动鼠标的同要绘制水平或垂直直线的时候，在拖动鼠标的同时按住时按住ShiftShift键。键。（2 2）绘制矩形）绘制矩形 和绘制直线一样，要绘制矩形等矢量图形，在和绘制直线一样，要绘制矩形等矢量图形，在工具箱中选中工具箱中选中“矩形矩形”工具后，拖动鼠标绘制即工具后，拖动鼠标绘制即可。如果要得到标准的正方形或圆，则在拖动鼠可。如果要得到标准的正方形或圆，则在拖动鼠标的同时按住标的同时按住ShiftShift键。当然，也可以在选定工键。当然
17、，也可以在选定工具后，在具后，在“属性属性”面板中进行设置。面板中进行设置。n n6.2.4 位图的操作位图的操作“亮度/对比度”功能可以修改像素的对比度或亮度。n n调整亮度和对比度调整亮度和对比度“色相/饱和度”功能可以调整图像中颜色的颜色阴影、色相、强度、颜色饱和度以及亮度。n n调整色相和饱和度调整色相和饱和度 n n对图像进行模糊处理对图像进行模糊处理 模糊处理可以柔化位图图像的外观，在模糊处理可以柔化位图图像的外观，在Fireworks 8Fireworks 8中中“模糊模糊”命令包括以下命令包括以下6 6个子命令。个子命令。（1 1）放射状模糊：产生图像正在旋转的视觉效果。）放射
18、状模糊：产生图像正在旋转的视觉效果。（2 2）模糊：柔化所选像素的焦点。）模糊：柔化所选像素的焦点。（3 3）缩放模糊：产生图像正在朝向观察者或原理观）缩放模糊：产生图像正在朝向观察者或原理观察者移动的视觉效果。察者移动的视觉效果。（4 4）运动模糊：产生图像正在运动的视觉效果。）运动模糊：产生图像正在运动的视觉效果。（5 5）进一步模糊：其模糊处理效果大约是）进一步模糊：其模糊处理效果大约是“模糊模糊”的三倍。的三倍。（6 6）高斯模糊：对每个像素应用加权平均模糊处理）高斯模糊：对每个像素应用加权平均模糊处理以产生朦胧效果。以产生朦胧效果。n n对图像进行锐化处理 “锐化”用来校正模糊的图像
19、，它提供了三种命令。（1）锐化:通过增大邻近像素的对比度，对模糊图像的焦点进行调整。（2）进一步锐化:将邻近像素的对比度增大到“锐化”的三倍。（3）钝化蒙版：通过调整像素边缘的对比度来锐化图像，它通常是锐化图像的最佳选择。6.3 动画制作工具动画制作工具 n n6.3.1 Flash 8的工作环境的工作环境 n n6.3.2 Flash中的基本概念中的基本概念 n n6.3.3 实例实例n n6.3.4 作品的测试与发布作品的测试与发布 6.26.1n n6.3.1 Flash 8的工作环境的工作环境 打打 开开“开开 始始”菜菜 单单，选选 择择“程程 序序”“Macromedia”“Mac
20、romedia”“Macromedia“Macromedia Flash 8”Flash 8”命令，打开命令，打开Flash 8Flash 8主界面。主界面。n n6.3.2 Flash中的基本概念中的基本概念Flash文档将时间的长度分为帧。帧是Flash中的一个时间单位，是Flash动画中最重要的一项功能，帧位于“时间轴”面板中，在每帧画面中放着动画的播放内容。n n帧和关键帧帧和关键帧（1）插入一个普通帧：插入普通帧可以增加影片的长度。操作方法是选择“插入”“时间轴”“帧”命令，也可以通过快捷键F5来实现。（2）插入一个关键帧：使用关键帧可以存放不同的对象和控制代码，快捷键为F6。可以将
21、普通帧转换为关键帧，也可以直接创建关键帧。（3）插入一个空帧：插入空帧相当于插入一个关键帧，再把关键帧中的内容清除掉。其操作的快捷键为F7。n n元件 元件就是在元件库中存放的各种图形、动画、按钮或者从外部导入的声音和外部电影文件。此处的图形可以是内部创建的矢量图，也可以是从外部导入的位图文件等多种Flash 8支持的图形格式文件。可以先制作或导入一些元件，然后将其存在库中。元件是制作动画过程中不可缺少的部分，可以重复使用。n n图层图层 图层技术是在图形处理软件中较常见的一个图层技术是在图形处理软件中较常见的一个名词。由于在名词。由于在FlashFlash动画中也有多个对象需要动画中也有多个
22、对象需要处理编辑，为了便于控制各个对象出场顺序处理编辑，为了便于控制各个对象出场顺序以及在时间轴上的停留时间，以及在时间轴上的停留时间，FlashFlash引用了图引用了图层技术。在层技术。在FlashFlash中可以将图层看成是叠放在中可以将图层看成是叠放在一起的透明胶片，当该图层上没有任何对象一起的透明胶片，当该图层上没有任何对象时，就可以透过它看到下一图层中的对象。时，就可以透过它看到下一图层中的对象。所以，可以根据需要在不同层上编辑不同的所以，可以根据需要在不同层上编辑不同的动画而互不影响，并在放映时得到合成的效动画而互不影响，并在放映时得到合成的效果。果。n n库 库分为“库”和“公
23、用库”两种。库中存放的是用户制作的元件，公用库中存放的是系统提供的元件，其中包括多种格式的按钮等。打开库面板的方法是：选择“窗口”“其他面板”“库”/“公用库”命令。n n时间轴 时间轴是Flash中进行动画制作和编辑的重要工具，用来表示动画中各帧的排列顺序和各层的覆盖关系的主线，它决定了动画的播放顺序。n n6.3.3 实例实例 n n运动的文字运动的文字运动的文字运动的文字 主要应用插入关键帧、延长动画播放时间、主要应用插入关键帧、延长动画播放时间、主要应用插入关键帧、延长动画播放时间、主要应用插入关键帧、延长动画播放时间、将舞台存在的对象创建为元件等知识来创将舞台存在的对象创建为元件等知
24、识来创将舞台存在的对象创建为元件等知识来创将舞台存在的对象创建为元件等知识来创作出文字的运动效果。作出文字的运动效果。作出文字的运动效果。作出文字的运动效果。n n具体步骤具体步骤具体步骤具体步骤（1 1）选择）选择）选择）选择“文件文件文件文件”“新建新建新建新建”命令，创建命令，创建命令，创建命令，创建一个场景文件。一个场景文件。一个场景文件。一个场景文件。（2 2）选择）选择）选择）选择“修改修改修改修改”“文档文档文档文档”命令，在弹命令，在弹命令，在弹命令，在弹出的出的出的出的“文档属性文档属性文档属性文档属性”对话框中将页面的背景对话框中将页面的背景对话框中将页面的背景对话框中将页
25、面的背景颜色改成黑色。颜色改成黑色。颜色改成黑色。颜色改成黑色。（3）选中工具箱中的“文本”工具，然后在页面中输入文字，并将文字的颜色设置成白色。（4）使用工具箱中的“选择”工具，将舞台中的文字选中，然后选择“修改”“转换为元件”命令，在弹出的对话框中进行设置。（5）选择图层中的第25帧，然后右击，在弹出的快捷菜单中选择“插入关键帧”命令，添加一个关键帧。（6）选择图层中的第1帧，然后选择“窗口”“变形”命令，在弹出的转换面板中选中“变形”复选框，然后进行修改。（7）确保被缩小的文字仍然处于选中状态，选择“窗口”“属性”命令，在弹出的“属性”面板中的“颜色”下拉列表框中选择Alpha选项，并将
26、Alpha值设置为0%。（8）选中图层中的第1帧，然后选择“窗口”“属性”命令，在弹出的“属性”面板中进行相应设置。（9）选中图层中的第35帧，然后右击，在弹出的快捷菜单中选择“插入帧”命令，将帧的播放时间延长。（10）按Ctrl+Enter组合键，就可以看到文字的运动效果了。n n6.3.4 作品的测试与发布作品的测试与发布 n n作品的测试作品的测试（1 1）测试动画的播放效果）测试动画的播放效果）测试动画的播放效果）测试动画的播放效果 按按按按Ctrl+EnterCtrl+Enter组合键，即可以看到动画的组合键，即可以看到动画的组合键，即可以看到动画的组合键，即可以看到动画的播放情况播
27、放情况播放情况播放情况（2 2）测试动画的下载速度）测试动画的下载速度）测试动画的下载速度）测试动画的下载速度 选择选择选择选择“控制控制控制控制”“测试影片测试影片测试影片测试影片”命令，命令，命令，命令，FlashFlash会导出一个会导出一个会导出一个会导出一个.swf.swf的文件。在这个的文件。在这个的文件。在这个的文件。在这个.swf.swf文件的文件的文件的文件的菜单栏中选择菜单栏中选择菜单栏中选择菜单栏中选择“视图视图视图视图”“下载设置下载设置下载设置下载设置”命令，命令，命令，命令，在弹出的子菜单中会列出一些常见的下载速在弹出的子菜单中会列出一些常见的下载速在弹出的子菜单中会列出一些常见的下载速在弹出的子菜单中会列出一些常见的下载速度。度。度。度。n n作品的发布 在发布作品之前，应该对作品进行发布设置。具体操作方法是：选择“文件”“发布设置”命令，打开“发布设置”对话框，主要设置对话框中的“格式”、Flash和HTML选项。设置完毕后，单击“确定”按钮即可。为了保证作品的质量，可以对作品进行预览。具体操作方法是：选择“文件”“发布预览”命令，在弹出的子菜单中选择要预览的作品格式，就可以看到动画发布之后的实际效果了。