全书配套课件：网页设计与制作-第一套

1、第1章 网页设计基础第1章 网页设计基础1.1 网页的简介 1.2 网站的简介 1.3 Dreamweaver 8简介 1.4 本章小结 通过本章的学习，用户将了解到关于网页和网站的基础知识、掌握Dreamweaver 8的基本知识和界面构成等内容。为后续的章节的学习做好铺垫工作。 1网页是用超文本标记语言（Hypertext Markup Language HTML）编写的。2Web空间是互联网上存放网站页面内容的计算机的存储空间。3网页中包括的元素：文本、图像和动画、声音和视频、超链接、表格、表单、导航栏以及其他特殊效果。1.1.1 网页概述 1.1 网页的简介 网页中的文字 文字是网页中

2、的主要内容，一个网页向外界传递信息，介绍网站的内容，主要通过文字来实现。 网页中的图片 一个比较成功的网页，文字信息固然不可少，但是加入图片后能使网页更为增色。 网页中的超链接 超链接，通过已定义好的关键字和图形，由当前页的标题或内容索引信息指向别的页面的连接点。 1.1.2 网页的基本元素 1.1 网页的简介 1.2.1 网站的目录结构 站点是用于存储Web站点中所有文件的场所。站点的目录结构是一个容易忽略的问题，大多数网站的制作人员都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。一般建议站点采用如下

3、的方式建立目录结构，按栏目内容建立子目录。 1.2 网站的简介 1.2.2 网站的风格确定 “风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素。 网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。 1.2 网站的简介 1.3.1 Dreamweaver 8的工作界面 Dreamweaver 8 是 Macromedia 公司开发的新一代可视化的专业级网页编辑器。它集网页制作和

4、动态网站管理功能于一身。 Dreamweaver 8的编辑环境非常灵活， 提供了2种可供选择的工作区布局，满足不同风格和技术方式的用户使用。1.3 Dreamweaver 8简介 1. 选择工作区布局 在窗口中首次启动Dreamweaver时，会出现一个对话框，可以从中选择一种工作区布局。如果以后改变了主意，可以使用“参数选择”对话框切换到另一种不同的工作区中。2. 窗口和面板概述 “插入”面板 “文档”工具栏 “文档”窗口 “属性”检查器 面板组 “历史”面板1.3 Dreamweaver 8简介 1.3.2 基本菜单简介 【文件】菜单 【编辑】菜单 【查看】菜单 【插入】菜单 【文本】菜单

5、 【命令】菜单 【站点】菜单 【窗口】菜单 【帮助】菜单 1.3 Dreamweaver 8简介 1.4 本章小结 本章主要介绍网页的基本内容和工作原理，初步认识网页，这将成为我们今后制作网页的前提和基础。 然后介绍Dreamweaver 8的窗口组成、菜单组成、工具栏的组成、面板的基本操作等，这为我们在后续章节中利用Dreamweaver 8完成网页的各种制作功能和技巧做了必要的铺垫。 第2章 站点的建立第2章 站点的建立2.1 站点规划和设计 2.2 创建本地站点 2.3 创建页面文档 2.4 设置页面文档属性2.5 本章小结 在开始制作网页之前,需要首先创建页面所在的站点,只有所有的网页

6、有机结合起来才能形成一个网站。通过本章的学习，应掌握如何创建和管理本地站点，如何创建HTML文档等知识。 确定目标 选择目标用户 组织站点结构 确定资源文件 创建设计外观 设计导航方案 规划和收集资源 2.1 站点规划和设计创建本地站点可以通过以下步骤进行：（1）选择【站点】|【管理站点】菜单命令（2）单击“新建”按钮 ，按要求设置站点属性（3）单击下面的“完成”按钮，完成站点的定义。 2.2.1 创建一个新站点 2.2 创建本地站点 2.2.2 编辑一个现存站点 如果对刚刚创建的本地站点并不满意，想对它再进行修改；或者想删除、复制站点等操作都可以在“管理站点”对话框中完成。 2.3.1 创建

7、新页面 选择【文件】|【新建】菜单命令2.3.2 打开页面文件 选择【文件】|【打开】菜单命令 2.3.3 保存页面选择【文件】|【保存】菜单命令 2.3 创建页面文档 2.4.1 设置页面标题 HTML 页面的标题帮助站点访问者在浏览时跟踪所查看的内容，并在访问者的历史记录和书签列表中标识页面。如果不给页面加标题，页面会在浏览器窗口、书签列表和历史记录列表中显示为无标题文档。 打开页面文档，选择【修改】|【页面属性】菜单命令，选择分类中的“标题/编码” 。2.4.2 设置页面背景图像和背景色 2.4 设置页面文档属性 2.5 本章小结 本章讲解了如何规划、建立和管理站点的内容。可以了解到在创

8、建站点之前，不仅要设计好站点的风格，还要规划好站点内部的结构。在使用Dreamweaver 8设计网页前要对站点进行定义。通过Dreamweaver 8可以很方便地对站点进行各种管理操作。以及如何创建页面和设置页面属性。 第3章 基本页面元素第3章 基本页面元素3.1 页面文本的处理 3.2 页面图片的处理 3.3 页面链接的处理 3.4 本章小结 文本和图像是网页的核心内容，学习网页设计也应从最基本的文本和图像处理开始。链接是网页的灵魂，也是网络的魅力所在。通过点击网页上的链接，我们才能在网络信息的海洋中尽情遨游。 Dreamweaver 允许直接将文本键入页面中或从其他文档复制和粘贴文本，

9、这是在编辑页面时最常用的方法。 在Dreamweaver中不仅可以输入文字，而且还提供了特殊字符的输入方式，选择【插入】|【HTML】|【特殊字符】子菜单。 3.1.1 页面文本的添加 3.1 页面文本的处理 设置字体 选择字号 色彩设置 样式设置 文本对齐和缩进 设置文本标题 设置段落和换行 3.1.2 页面文本的格式设置 3.1 页面文本的处理 3.1.3 页面文本列表的设置 在网页处理文本时，对于需要逐条列出的文本项目，我们一般将其设置为列表的形式，这样可以便读者一目了然地了解到所要展示的文本内容。 在Dreamweaver中为我们提供了常用的两种类型的列表：项目列表和编号列表 。3.1

10、 页面文本的处理 3.2.1 页面图片简介 虽然存在很多种图形文件格式，但 Web 页中通常使用的只有三种，即 GIF、JPEG 和 PNG。 3.2.2页面图片的基本操作 图像的插入 背景图像的插入 设置图像属性 加入图像的文字说明 3.2 页面图片的处理 3.2.3 页面图片的其他操作1. 使用交替图像 在浏览网页时，经常会看到这种效果：当鼠标指针移动到某图像上时，图像就会发生变化，即变为大小和原图像一样但图案发生变化的另一幅图像；而当鼠标指针离开此图像时，图像又变为原来的图像,这就是交替图像。 3.2 页面图片的处理 3.2 页面图片的处理 3.2.3 页面图片的其他操作2. 图像的拼接

11、技术 如果根据需要确实要在网页中使用较大的图像，则浏览器通常是在将图像文件的内容全部下载完后，才在网页中显示该图像。这样会使网页的浏览者等待较长的时间，造成用户的不方便。为此，可采用拼接图像的方法，来解决长时间等待的问题。 3.2 页面图片的处理 3.2.3 页面图片的其他操作3. 建立Web相册 Web相册是将许多图片保存在一起，并且缩小显示在网页中，浏览者单击其中的一幅图片时，便弹出该图片的原图。制作时有一个小小的限制，就是在安装Dreamweaver的同时还要安装Fireworks这一网页图像处理软件。Dreamweaver使用 Fireworks 来为每个图像创建一个缩略图和一个较大尺

12、寸的图像。3.3 页面链接的处理 3.3.1 页面链接简介 Dreamweaver提供多种创建超链接的方法，可创建到文档、图像、多媒体文件的链接。可以建立链接到文档内任意位置的超链接。 绝对路径 文档相对路径 站点根目录相对路径 3.3.2 链接的基本操作 建立链接 设置链接打开放式 检查链接 链接自动更新 3.3.3 其他的链接操作 设置锚记链接 设置热点链接 创建导航条 3.3 页面链接的处理 3.4 本章小结 本章主要介绍了页面中文本的使用方法，包括插入文本，段落格式设置，设置标题，设置列表等。介绍了图像在网页制作中的运用，包括怎样在网页中插入图像、设置图像的各个属性、制作Web相册、插

13、入交替图像、图像的拼接制作等。介绍了网页中超链接的使用，包括在网页中制作文件链接、锚记链接、热点链接、相对路径和绝对链接，以及如何对超链接进行管理。 第4章 HTML基本标记第4章 HTML基本标记4.1 HTML概述 4.2 顶级标记 4.3 文本处理标记 4.4 图像处理标记 4.5 链接处理标记4.6 表格处理标记 4.7 表单处理标记 4.8 框架处理标记4.9 其他常用标记 4.10 本章小结 绚丽多彩的网页，本质是由标记语言所组成的。了解HTML的基本标记的使用，对于用户进一步走入网页设计的世界是非常必要的。在本章中，将介绍顶级标记、文本标记、图片标记、链接标记等基本标记的使用。

14、HTML是（Hyper Text Markup Language）超文本标记语言的缩写，是网页主要的组成部分 。 HTML语言是由一系列标记组成的，每一种标记向浏览器说明了一种页面元素。 标记是由起始标记和结束标记组成的。起始标记表示一种功能的开始，结束标记表示一种功能的结束。 4.1 HTML概述 头标记用于包含页面文件的基本信息。这些信息是供浏览器阅读和使用的，或是页面制作者用于保留信息的，并不在浏览器的页面区显示。 TITLE标题标记 META元数据标记 4.2.1 HEAD头标记 4.2 顶级标记 4.2.2 Body体标记 这个标记组中除了、头部标记和框架标记外，其他所有标记都可以在

15、其中。 4.3.1 格式标记 1. 标题标记 标题标记格式：（n=1，2，6），这个标记组可以设置各种大小不同标题。 2. 段落标记 段落标记格式为：，里面包含文本和一些可以放置于内的标记。标记的结尾标记是可以省略的。4.3 文本处理标记 4.3 文本处理标记 4.3.2 列表标记 1. 有序列表 内容内容2. 无序列表 4.3 文本处理标记 4.3.3 文本格式化标记1. 字体设置标记 字体设置标记格式为：2. 字符修饰元素4.3.4 其他格式标记 1. 置中标记 置中标记格式为：页面元素 2. 预定义格式标记 预定义格式标记格式为：文本内容 3. 段内换行标记 段内换行标记格式为： 图像标

16、记的格式：，结尾标记可以省略。 基本属性包括： Src 通过URL给出图像来源的位置，不可缺省 Width 设置图像宽度 Height 设置图像高度 Alt 设置在图像未载入前图片位置显示的文字 Border 设置图像边框，缺省为04.4 图像处理标记 链接标记的格式为：页面元素，页面元素一般为文本和图片。常用的属性为： Href 链接目标的位置，一般是页面也可以是某一个文件 Name 锚点名 Target 设置显示链接的目标位置。值可以为：框窗名称，_blank、_parent、_self、_top4.5 链接处理标记 4.6 表格处理标记 表格是由（定义表格）、（定义行）、（定义表头）和（

17、定义单元格）标记构成的 4.6.1 Table表格标记 表格标记的格式为：行标记。使用只是定义了空表格，还需要定义行和单元格。 4.6.2 TR行标记 行标记的格式为：单元格标记。使用只是定义了空行，还需要定义单元格。 4.6 表格处理标记 4.6.3 TD单元格标记 单元格标记的格式为：页面元素。单元格中可以放置任何中能够放置的内容。 基本属性为：Bgcolor设置单元格背景颜色Rowspan设置单元格所占的行数Colspan设置单元格所占的列数Align设置对齐方式Width设置单元格宽度Height设置单元格高度4.7 表单处理标记 4.7.1 Form表单标记 表单标记的格式为：表单元

18、素，其余的表单控件标记都要放在标记组之中。 常用的基本属性： Action设置表单的处理程序，一般为服务器端脚本语言所编写的程序 Method设置发送表单的HTTP方法，一种是get，另一种是post Name设置发送表单的名称4.7 表单处理标记 4.7.2 Input输入域标记 输入域标记的格式为：，只有开始标记，没有结尾标记。常用的属性为： Type输入域类型 Value输入域的值 Size输入域的显示字符数 Maxlength能输入的最大字符数 Name输入域的名称4.7.3 其他标记 1. 多行输入域标记 利用文本来产生一个可以输入大量文字的输入区域。 2. 选择域标记选择域标记的格

19、式为： 选项一 选项二 4.7 表单处理标记 4.8 框架处理标记 框架的作用是使多个页面可以同时显示在一个浏览器窗口中，这样用户就可以浏览到更多的信息内容。 4.8.1 FrameSet框架集标记 框架集标记的格式为：框架标记。框架集标记定义了一个框架的容器，可以包含很多的框架，每个框架用标记来表明。 4.8.2 Frame框架标记 框架标记的格式为：，用于说明每一个框架集中的框架。4.9 其他常用标记 1. 注释标记 注释标记的格式为：。注释标记不被浏览器所解释，用于页面设计者记录制作的信息。 2. 水平线标记 水平线标记的格式为：，只有开始标记，没有结束标记。用于修饰页面。 3. 脚本容

20、器标记 脚本容器标记的格式为：脚本。在页面中加入脚本程序，扩展页面的功能。 4. Java小程序容器标记 Java小程序标记的格式为：。可以在页面中嵌入Java小程序。 4.10 本章小结 HTML语言是页面制作的基础环节。本章主要介绍了顶级标记的使用、格式标记的使用、文本标记的使用、图片标记的使用、链接标记的使用、表格标记的使用、表单标记的使用和框架标记的使用等。大家通过对这些内容的学习，可以更深刻地体会到网页制作中本质内容。 第5章 表格 第5章 表格5.1 表格的基本操作 5.2 表格的高级操作 5.3 布局表格的应用 5.4 本章小结 表格在网页设计中占据着重要的地位。它是处理数据时最

21、常用的一种形式。同时，表格还是Dreamweaver对文本和图形进行页面布局时强有力的工具。 一个表格包括三部分：行：表格的横向部分列：表格的纵向部分单元格：表格的行列交叉部分 操作方法如下：（1）选择【插入】|【表格】菜单命令 （2）此对话框保留了最近一次插入的表格的数值，可按需要填写各项参数设置，单击“确定”按钮，完成表格的创建。 5.1.1 创建表格5.1 表格的基本操作 创建表格后，通过选定来完成设置属性、移动、复制及删除等操作。可以一次选定整个表格、一行、一列或几个连续的单元格，还可以选择表格中多个不连续的单元格并修改这些单元格的属性，但不能对它们进行移动、复制或删除等操作。 5.1

22、.2 选定表格对象 5.1 表格的基本操作 5.1.3 设置表格属性 5.1.4 设置行、列与单元格属性 5.2.1 导入表格数据 可以将在其它应用软件（例如 Microsoft Excel）中创建，并以制表符、逗号、冒号、分号或其他分隔符分隔保存的表格式数据，导入到 Dreamweaver 中并重新格式化为表格。 5.2.2 导出表格 可以将表格数据从 Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开。您可以将逗号、冒号、分号或空格用作分隔符。 5.2 表格的高级操作 5.2 表格的高级操作 5.2.3 使用预先设计的格式化表格 在Dreamweaver中已预置了多种表

23、格模式。可以使用“格式化表格”命令将预先设置的设计快速应用到选定的表格。然后，可以选择选项进一步自定义设计样式。 5.2.4 表格排序 在Dreamweaver中，可以根据单个列的内容对表格中的内容进行排序。还可以根据两个列的内容执行更加复杂的表格排序。 5.3.1 页面布局简介 设计布局合理、美观大方的页面是每个网页设计者的目标。要制作出精美的网页，首先需要设计出结构严谨的布局。布局设计是网页制作中一项很重要的工作，它涉及到网页在浏览者的浏览器中所显示的外观，它往往决定着网页设计的成败。5.3.2 布局表格的基本操作 为了简化使用表格进行页面布局设计的过程，Dreamweaver提供了布局视

24、图。5.3 页面布局表格的应用 5.3 页面布局表格的应用 5.3.3 布局表格的基本操作 绘制布局表格 绘制布局单元格 在布局单元格中添加内容 自动调整布局单元格的高度 5.4 本章小结 制作表格是整个网页设计的精华，它具有输入数据和进行分类列表的功能，而且当前许多大型网站几乎都用表格来协助网页的页面布局。 在本章主要介绍了表格的相关操作，从最简单的创建表格到深层次的应用表格。通过本章的学习，可以了解到如何创建表格，如何设置表格属性，如何对表格的单元格进行操作，最后还涉及到了对表格的具体应用。大家通过对这些内容的学习，可以更深刻地体会到表格在网页设计中的重要作用。 第6章 Fireworks

25、 8概述 第6章 Fireworks 8概述6.1 Fireworks 8的工作界面 6.2 绘图工具的使用 6.3 文档的建立 6.4 文档的打开和导入 6.5 文档的保存6.6 文件属性的修改6.7 本章小结 Fireworks 8是制作、处理和发布Web图形图像的重要工具软件。它简化了制作网络图形图像的流程，将Web图形图像处理方面的工作集成到一个统一的环境中，并提供独特的位图和矢量相结合的解决方案，可以随时进行编辑，自动化的处理过程，提高了工作效率。 首次在 Fireworks 8 中打开一个文档时，会激活工作环境，包括“工具”面板、“属性”检查器、菜单和其它面板。“工具”面板位于屏幕

26、的左侧，包含多个带标签的类别，包括位图、矢量和网页工具组等。“属性”检查器默认情况下出现在文档的底部，它最初显示文件的属性，然后，当文档编辑过程中，它将改为显示新近所选工具或当前所选对象的属性。面板最初沿屏幕右侧成组停放。文档窗口出现在应用程序中心。如图6-2所示。 6.1 Fireworks 8的工作界面 6.1 Fireworks 8的工作界面 在默认状态下，“工具”面板放置在窗口的左侧，如图6-3所示。面板上有六组不同种类的工具，分别为选择、位图、矢量、网页、颜色和视图，根据所选工具的不同，会自动识别矢量和位图对象。 当选择一种工具后，“属性” 检查器中将显示工具的设置。“工具”面板中工

27、具右下角的小三角表示它是某个工具组的一部分。例如，“矩形”工具属于基本形状工具组，该工具组还包括“圆角矩形”、“椭圆”和“多边形”等工具。6.1.1“工具”面板 6.1 Fireworks 8的工作界面 6.1.1“工具”面板 6.1 Fireworks 8的工作界面 “属性” 检查器将根据当前所选工具和所选中的对象发生变化，默认情况下，它位于文档窗口的底部，如图6-4所示。“属性”检查器是一个上下文关联面板，它显示当前选区的属性、当前工具选项或文档属性。默认情况下，“属性”检查器停放在工作区的底部。6.1.2“属性”检查器 6.1 Fireworks 8的工作界面 同其它程序一样，状态区位于

28、Fireworks 8视图的最下方，如图6-5所示。状态区不能被拖动，通过执行菜单命令可以显示或隐藏它。 状态区用于显示用户所选取的菜单命令、“工具”面板里的工具或工具栏上的按钮的简介，也可以显示目前所选取的对象的种类。 6.1.3 状态区 6.1 Fireworks 8的工作界面 Fireworks工具栏分为【主要】工具栏和【修改】工具栏两种。 【主要】工具栏如图6-7所示，提供常用功能的快捷按钮，如新建文件、打开文件、保存文件和剪切、复制、粘贴等； 【修改】工具栏如图6-8所示，提供常用功能的快捷按钮，如组合、排列、旋转等，这些按钮可以使用户更快、更方便地进行操作。 6.1.4 工具栏 6

29、.1 Fireworks 8的工作界面 菜单栏位于Fireworks窗口的上方，如图6-9所示 ，Fireworks的所有功能都可以在这里找到。菜单栏中共有10个菜单，包括【文件】、【编辑】、【视图】、【选择】、【修改】、【文本】、【命令】、【滤镜】、【窗口】以及【帮助】等菜单。6.1.5 菜单栏 6.1 Fireworks 8的工作界面具体功能为： 6.1.5 菜单栏 6.1 Fireworks 8的工作界面6.1.5 菜单栏 6.1 Fireworks 8的工作界面6.1.5 菜单栏 6.1 Fireworks 8的工作界面 Fireworks 8中的面板都是可以浮动及自由组合的，在默认情

30、况下，“优化”、“图像编辑”、“层”、“形状”、“自动形状属性”“信息”、“行为”、“查找”和“对齐”面板未与其它面板组合到一起，但如果需要，可以按自己喜欢的排列将面板组合到一起，如图6-20所示。6.1.6 面板 6.1 Fireworks 8的工作界面 在默认状态下绘图“工具”面板位于文档窗口的左方。绘图“工具”面板由六个工具区组成：“选择”工具区、“位图”工具区、“矢量”工具区、“Web”工具区、“颜色”工具区和“视图”工具区。这些工具是绘制对象最基本的工具。 执行【窗口】|【工具】菜单命令，可以打开绘图“工具”面板 。 6.2.1 打开绘图“工具”面板 6.2 绘图工具的使用 6.2.

31、2 “选择”工具区 6.2 绘图工具的使用 “选择”工具区如图6-22所示，提供了指针、部分选定、缩放和剪切工具。在有下三角的按钮上鼠标左键不放，就能看到工具组中的其它工具。其中： 6.2.3 “位图”工具区 6.2 绘图工具的使用 “位图”工具区包含处理位图的16个工具，如图6-23所示。其中： 6.2.3 “位图”工具区 6.2 绘图工具的使用 6.2.4 “矢量”工具区 6.2 绘图工具的使用 “矢量”工具区的工具用于编辑矢量图形、编辑路径和输入文字等。 “矢量”工具区包含处理矢量图的24个工具，如图6-24所示。其中： 6.2.4 “矢量”工具区 6.2 绘图工具的使用 6.2.5 “

32、Web”工具区 6.2 绘图工具的使用 “Web”工具区的工具主要用于超链接的设置，如图6-25所示。其中： 6.2.6 “颜色”工具区 6.2 绘图工具的使用 “颜色”工具区是绘图“工具”面板中最主要的辅助工具区之一。 “颜色”工具区主要用于设定线条色和填充色。单击 按钮，会在右边出现调色板，可随意选择所需的笔触及填充色，还可以进行更多效果的设定。笔触颜色和填充颜色选项基本是一致的。“颜色”工具区下方由3个选项按钮，如图6-26所示。其中：6.2.6 “颜色”工具区 6.2 绘图工具的使用 图6-26 颜色工具区6.3 文档的建立 在Fireworks 8中新建一个文档后，就会创建一个PNG

33、（可移植网络图形）格式的文件，PNG格式是Fireworks 8本身的文件格式。在Fireworks 8中创建和编辑文档以后，可以将其导出为常用的网页图形格式（如JPEG，GIF和GIF动画），还可以将图形导出为非网页图形格式，如TIFF和BMP格式。无论导出为何种格式，原始的PNG格式都将保留，以方便以后进行修改。 6.3 文档的建立 创建新文档的具体步骤为： （1）执行【文件】|【新建】菜单命令，打开“新建文档”对话框； （2）在对话框的“宽度”和“高度”文本框中输入画布的宽度和高度值，其度量单位可以是像素、英寸或厘米； （3）在“分辨率” 文本框中输入分辨率，单位可以是像素/英寸或像素/

34、厘米，默认的分辨率是72像素/英寸，比较适合制作网络图形； （4）在“画布颜色”选项组中可以设置画布的颜色，用户可以选择白色、透明色或单击自定义颜色框选择一种自定义的颜色； （5）单击“确定”按钮建新文件，如图6-28所示。 6.3 文档的建立 6.4.1 打开 Fireworks文档 6.4 文档的打开和导入 （1）执行【文件】|【打开】菜单命令，打开“打开”对话框，如图6-29所示； （2）选择文件，单击“打开”按钮。 6.4.2 打开最近关闭的文档 6.4 文档的打开和导入 【文件】菜单在【打开最近的文件】子菜单中最多列出 10 个最近关闭的文档。“开始”页也会列出最近关闭的文档。1若要

35、打开最近关闭的文件 （1）选择【文件】|【打开最近的文件】菜单命令。 （2）从子菜单中选择一个文件名即可。2若要在还没有打开任何文件的情况下打开最近关闭的文件 在文档窗口的“开始”页上单击该文件名即可。 6.4.3 导入文档 6.4 文档的打开和导入 可以使用如下方法导入文档： 1执行【文件】|【打开】菜单命令，在如图6-29所示的“打开”对话框中选择“文件类型”，确定文件名，然后单击“打开”按钮，即打开所选文档。 2执行【文件】|【导入】菜单命令，在如图6-30所示的“导入”对话框中选择“文件类型”，确定导入的文档，然后单击“打开”按钮，即导入所选文档。 6.4.3 导入文档 6.4 文档的

36、打开和导入6.5.1 保存新建的 Fireworks文档 6.5 文档的保存 新建的Fireworks文档可以在任何时候进行保存，执行如下操作： 1执行【文件】|【保存】菜单命令，打开“另存为”对话框，在如图6-31所示的“另存为”对话框中选择保存路径，在文件名中输入文档名称，然后单击“保存”按钮，即可完成文件的保存。 2创建了该文档后，如果再次执行【文件】|【保存】菜单命令，则将对该文档所做的修改进行保存。 6.5.1 保存新建的 Fireworks文档 6.5 文档的保存6.5 文档的保存 6.5.2 保存现有的Fireworks文档 对于现有的Fireworks文档同样可以在任何时候进行

37、保存，只需执行下列操作之一：选择【文件】|【保存】菜单命令；单击【主要】工具栏上的“保存”按钮。 保存现有文件，并不打开任何对话框。 6.6 文件属性的修改 1使用菜单命令 （1）执行【修改】|【画布】|【画布大小】菜单命令，打开“画布大小”对话框，如图6-33所示，可以修改画布大小。 （2）在“新尺寸”选项组中的“宽度”和“高度”文本框中输入新的尺寸，可以以像素、英寸和厘米为单位。 （3）单击“锚定”按钮以确定将画布摆放在哪一边，“锚定”选项共有9个位置，默认情况下选择中心锚定，这表示对画布大小的更改将在所有边上进行，选择后单击“确定”按钮。 6.6.1 画布大小的修改 6.6 文件属性的修

38、改 6.6.1 画布大小的修改 6.6 文件属性的修改 2使用“属性” 检查器 在“属性”检查器中显示文件属性，如图6-34所示。单击“画布大小”按钮，打开“画布大小”对话框修改画布大小，然后按照上述步骤，对画布大小进行修改。6.6.1 画布大小的修改 6.6 文件属性的修改 1使用菜单命令 （1）执行【修改】|【画布】|【画布颜色】菜单命令，打开“画布颜色”对话框，如图6-35所示修改画布颜色。 （2）可以对 “白色”、“透明”或“自定义”选项进行单项选择。如果选择“自定义”，请在“样本”弹出窗口中单击一种颜色，如图6-36所示。 6.6.2 画布颜色的修改 6.6 文件属性的修改 6.6.

39、2 画布颜色的修改 6.6 文件属性的修改 2使用“属性” 检查器 （1）在“属性”检查器中显示文件属性，如图6-34所示然后单击“画布”颜色框，打开颜色样本。 （2）从“样本”弹出窗口中选取一种颜色，或者在屏幕上任意位置的某种颜色上单击滴管。若要选择透明画布，请单击“样本”弹出窗口中的“颜色透明”按钮。 6.6.2 画布颜色的修改 6.6 文件属性的修改 1首先执行下列操作之一打开“图像大小”对话框 （1）执行【修改】|【画布】|【图像大小】菜单命令，打开“图像大小”对话框，如图6-37所示修改画布颜色。 （2）在“属性”检查器中显示文件属性，然后单击“属性”检查器中的“图像大小”按钮，打开

40、“图像大小”对话框。 6.6.3 图像大小的修改 6.6 文件属性的修改 6.6.3 图像大小的修改 6.6 文件属性的修改 2在“图像大小”对话框中，可以按照如下步骤对图像大小进行修改 （1）在“像素尺寸”文本框中输入新的水平和垂直尺寸。 如果取消选择“图像重新取样”，则可以更改分辨率或打印尺寸，但不能更改像素尺寸。 （2）在“打印尺寸”文本框中输入打印图像的水平和垂直尺寸。 （3）在“分辨率”文本框中为图像输入新的分辨率。 6.6.3 图像大小的修改 6.6 文件属性的修改 3可以选择像素/英寸或像素/厘米作为单位，或者选择“图像重新取样”。更改分辨率还将更改像素的尺寸。执行下列操作之一

41、（1）若要在文档的水平和垂直尺寸之间保持相同的比例，请选择“约束比例”。取消选择“约束比例”可单独调整宽度和高度。 （2）选择“图像重新取样”，以便在调整图像大小时添加或去除像素，使图像在不同大小的情况下具有大致相同的外观。 6.6.3 图像大小的修改 6.6 文件属性的修改 如果导入的图像上下颠倒或者侧放时，可以对画布进行旋转。旋转画布时，文件中的所有对象都将一起旋转。可以选择下列操作之一旋转画布：执行【修改】|【画布】|【旋转 180】菜单命令。 执行【修改】|【画布】|【旋转 90顺时针】菜单命令。 执行【修改】|【画布】|【旋转 90逆时针】菜单命令。 6.6.4 旋转画布 6.7 本

42、章小结 通过本章的学习，要对Fireworks 8有一个基本的认识，熟悉Fireworks 8的工作环境，掌握文档的基本操作。 要求掌握启动和关闭Fireworks 8的方法，了解Fireworks 8工作界面，掌握工具栏和工具箱的使用，Fireworks 8面板及其管理、创建与导入文档和对文件属性的修改等。 第7章 矢量图的绘制与编辑 第7章 矢量图的绘制与编辑 7.1 位图、矢量图和路径的概念 7.2 绘制基本图形 7.3 绘制自动形状 7.4 绘制矢量路径 7.5 编辑矢量路径 7.6 修改矢量路径 7.7 本章小结 Fireworks的一个很大的优势就在于它将位图处理和矢量处理合二为一

43、。它综合了许多图形处理软件的优点。本章将着重介绍Fireworks 8中创建与编辑矢量路径对象的操作技巧，如对象描边、填充等属性设置以及分离对象的操作，以便让网页设计者拥有更多的创作空间。 7.1 位图、矢量图和路径的概念 位图图形由排列在网格中的点组成，这些点被称为“像素”。 编辑位图图形时，修改的是像素，而不是线条和曲线。 位图图形与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。放大位图图形将使这些像素在网格中重新进行分布，这通常会使图像的边缘呈锯齿状。 7.1.1 位图 7.1 位图、矢量图和路径的概念 7.1.1 位图 7.1 位图、矢量图和路径的概念 矢量图形使用称

44、为“矢量”的线条和曲线（包含颜色和位置信息）呈现图像。 编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。 矢量图形与分辨率无关，这意味着除了可以在分辨率不同的输出设备上显示它以外，还可以对其执行移动、调整大小、更改形状或更改颜色等操作，而不会改变其外观品质。 7.1.2 矢量图 7.1 位图、矢量图和路径的概念 7.1.2 矢量图 7.1 位图、矢量图和路径的概念 路径是一条与很多点有关联的线条，表现在图形上就是线条和轮廓。之所以称为矢量路径对象，是因为该对象的形状主要是由路径的形状决定的，并且用户可以对该对象进行自由整形和变形。 在Fireworks中路径分为三种：（1）开放路径：即路

45、径的起点和终点不重合，如直线；（2）闭合路径：即路径是连续的，没有终点和起始点，如圆形；（3）复合路径：即由两个或多个路径组成的路径。 7.1.3 路径 7.2 绘制基本图形 从“工具”面板中选择“直线”工具 。然后在画布上拖动到合适的位置后松开鼠标，屏幕上将会出现一条连接两点的直线，如图7-3所示。 7.2.1 绘制直线 7.2 绘制基本图形 单击“工具”面板中的“矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个矩形，如图7-4所示。 7.2.2 绘制矩形 7.2 绘制基本图形 单击“工具”面板中的“矩形”工具 按钮右下角的小三角

46、形，在弹出的菜单中选择“椭圆” 工具，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个椭圆，如图7-5所示。 7.2.3 绘制椭圆 7.2 绘制基本图形 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择“多边形”工具 ，在当前的“属性”检查器上设置将要绘制图形的边数，在“边”文本框中设置多边形的边数，可以是325的任意一个整数。默认边数为5，即为五边形，如图7-6所示。 7.2.4 绘制三角形及其他多边形 7.2 绘制基本图形 然后在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制

47、了一个多边形，如图7-7所示的三角形和多边形。 7.2.4 绘制三角形及其他多边形 7.2 绘制基本图形 （1）单击“工具”面板中的“矩形”工具按钮右下角的小三角形，在弹出的菜单中选择“多边形”工具， （2）在当前的“属性”检查器的“形状”下拉列表框中选择“星形”选项，如图7-8所示。7.2.5 绘制星形 （3）在“边”文本框中设置星形的顶点数，设置范围为3360。滑杆只能调整到25，要想设置25个以上的顶点，直接在文本框内输入数字即可。7.2 绘制基本图形 （4）在“角度”文本框中设置星形尖角的度数，选择“自动”复选框或输入一个值。接近 0 的值产生的角长而细；接近 100 的值产生的角短而

48、粗。 （5）在画布上拖动鼠标，绘制星形。如图7-9所示为具有不同形状、不同角度的六边形。 7.2.5 绘制星形 7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“箭头”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个任意比例的普通箭头形状。按照此方法可以绘制多个箭头，并使用鼠标拖动箭头上的控制点调整箭头的锥度、尾部的长度和宽度以及箭尖的长度，如图7-12所示。 7.3.1 绘制箭头 7.3 绘制自动形状 7.3.1 绘制箭头 7.3 绘制自动形状 单击“工具”面板中的“矩形”

49、工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“斜切矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个带有切角的矩形形状。按照此方法可以绘制多个斜切矩形，并使用控制点可以同时编辑所有边角的斜切量，或者更改个别边角的斜切量，如图7-13所示。 7.3.2 绘制斜切矩形 7.3 绘制自动形状 7.3.2 绘制斜切矩形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“斜面矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松

50、开鼠标即绘制了一个带有倒角的斜面矩形（边角在矩形内部成圆形）。按照此方法可以绘制多个斜面矩形，可以同时编辑所有边角的倒角半径，或者更改个别边角的倒角半径，如图7-14所示。 7.3.3 绘制斜面矩形 7.3 绘制自动形状 7.3.3 绘制斜面矩形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“连接线形” 工具，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个显示为三段的连接线形。按照此方法可以绘制多个连接线形，使用控制点可以编辑连接线形的第一和第三段的端点，以及编辑用于连接第一和第

51、三段的第二段的位置，如图7-15所示。 7.3.4 绘制连接线形 7.3 绘制自动形状 7.3.4 绘制连接线形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“面圈形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个实心圆环形状。按照此方法可以绘制多个面圈形，使用控制点可以调整内环的周长或将圆环形状拆分为几个部分，如图7-16所示。7.3.5 绘制面圈形 7.3 绘制自动形状 7.3.5 绘制面圈形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形

52、，在弹出的菜单中选择自动形状对象组的“L形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个直边角形状。按照此方法可以绘制多个L形，使用控制点可以编辑水平和垂直部分的长度和宽度以及边角的曲率，如图7-17所示。 7.3.6 绘制L形 7.3 绘制自动形状 7.3.6 绘制L形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“饼形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个饼图形状。按照此方法可以绘制多个饼形，使用控

53、制点可以将饼图形状拆分为几个部分，如图7-18所示。 7.3.7 绘制饼形 7.3 绘制自动形状 7.3.7 绘制饼形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“智能多边形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个具有 3 到 25 条边的正多边形形状。按照此方法可以绘制多个智能多边形，使用控制点可以调整大小和旋转、添加或删除线段、增加或减少边数，或者向图形中添加内侧多边形，如图7-19所示。 7.3.8 绘制智能多边形 7.3 绘制自动形状 7.3.8 绘制智

54、能多边形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“圆角矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个带有圆角的矩形形状。按照此方法可以绘制多个圆角矩形，使用控制点可以同时编辑所有边角的圆度，或者更改个别边角的圆度，如图7-20所示。 7.3.9 绘制圆角矩形 7.3 绘制自动形状 7.3.9 绘制圆角矩形 7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“螺旋形”工具 ，在画布上选择要绘制图形的起

55、点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个开口式螺旋形形状。按照此方法可以绘制多个螺旋形，使用控制点可以编辑螺旋的圈数，并可以决定螺旋形是开口的还是闭合的，如图7-21所示。 7.3.10 绘制螺旋形 7.3 绘制自动形状 7.3.10 绘制螺旋形7.3 绘制自动形状 单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“星形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个星形形状（顶点数在 3 到 25 之间）。按照此方法可以绘制多个星形，。使用控制点可以添加或删除顶点

56、，并可以调整各顶点的内角和外角，如图7-22所示。 7.3.11 绘制星形7.3 绘制自动形状 7.3.11 绘制星形7.4 绘制矢量路径 绘制路径就是使用绘图工具创建贝塞尔曲线。贝塞尔曲线的定义有四个控制点：起始点、终止点（也称锚点）以及两个相互分离的中间点称为方向点，锚定和方向点间通过方向线相连。由锚点、方向点构成的曲线称为贝塞尔曲线，如图7-23所示。 7.4 绘制矢量路径 笔触（描边）附在路径上，突出路径的形状或使对象具有轮廓。而填充则处于路径内部，使其为实心对象。 单击“工具”面板或混色器中的“交换颜色”按钮，可以交换笔触和填充颜色，使“笔触颜色”或“填充颜色”框变为活动状态，如图7

57、-24所示。 7.4.1 设置笔触和填充属性 7.4 绘制矢量路径7.4.1 设置笔触和填充属性 7.4 绘制矢量路径1设置笔触属性 铅笔图标 表示“工具”面板、“属性”检查器和“混色器”面板中的“笔触颜色”框。 （1）设置笔触颜色 （2）设置内置笔触类别 （3）设置笔触纹理 （4）设置笔触选项 7.4.1 设置笔触和填充属性 7.4 绘制矢量路径2设置填充属性 颜料桶图标 表示“工具”面板、“属性”检查器和混色器面板中的“填充颜色”框。 （1）设置实心填充 （2）设置渐变填充 （3）设置填充边缘 （4）设置填充纹理 7.4.1 设置笔触和填充属性 7.4 绘制矢量路径1使用钢笔工具绘制矢量路

58、径 （1）绘制直线 （2）绘制曲线 2使用矢量路径工具绘制矢量路径 3使用重绘路径工具绘制矢量路径 7.4.2 绘制矢量路径 7.5 编辑矢量路径 1选取工具 Fireworks 8提供了两类三种选取工具，它们都位于“工具”面板的上方的“选择”工具区域，如图7-44所示。 7.5.1 选取路径对象 7.5 编辑矢量路径 2. 选取单个路径对象 (1)选择“工具”面板的“指针”工具。 (2)将鼠标移到要选取的路径对象上。此时的路径以红色高亮显示时，同时控制点呈高亮显示。 (3)单击鼠标即可选取该路径对象，被选取对象的路径即呈蓝色高亮显示状态，如图7-45所示。 7.5.1 选取路径对象 7.5

59、编辑矢量路径 7.5.1 选取路径对象 7.5 编辑矢量路径 3. 选取多个路径对象 选取多个路径对象，首先选择“工具”面板“选择”部分的“指针”工具 ，然后可以采用以下两种方法之一进行操作。先选取其中一个对象，然后按住Shift键，连续单击其它多个对象；或者按住Shift键在“层”面板中单击要选取的对象，所有对象便都处于选中状态如图7-46(b)所示。 用“指针”工具拖出一个矩形选框，将所有要选取的对象都框住(不一定要将整个对象围住)，释放鼠标后，选框内的所有对象便都处于选中状态如图7-46(b)所示。 7.5.1 选取路径对象 7.5 编辑矢量路径 7.5.1 选取路径对象 7.5 编辑矢

60、量路径 4. 选取被遮挡的路径对象 要选取某个被遮挡的路径对象，可按如下步骤进行： （1）选择“工具”面板“选择”部分的“选取后方对象”工具 ，此时鼠标变成一个空心箭头，而且右下角有一个“”符号。 （2）将鼠标移动到被遮挡对象的上层对象上，然后单击直到出现想要选择的对象，并将鼠标移动到想要选择的对象上，此时该对象路径上的点高亮显示，默认情况下路径控制点显示为红色。 （3）单击鼠标即可选取被遮挡的路径对象，如图7-47所示。 7.5.1 选取路径对象 7.5 编辑矢量路径 7.5.1 选取路径对象 7.5 编辑矢量路径 1用鼠标拖拽对象 2使用键盘方向键移动对象 3使用“属性”检查器移动对象 4