1、1网页制作复习题第 1 章 网页制作概况网页的概念网页是用 HTML 语言语言编写，通过 WWW 传播，并被 WEB 浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的页面文件。首页和主页的异同点网页制作的常用工具软件有哪些 9网页正文区和文件头的位置关系，文件头内的惟一一个必须出现的标记是哪一个标记？单标记和双标记的概念，HTML 标记中哪些是单标记，哪些是双标记？注释语句的含义，其正确书写格式HTML 标记的常用属性的含义，例如大小尺寸、对齐方式、颜色值属性的书写方式在 HTML 文件中实现换段和强制换行的不同，及分别使用哪个标记HTML 中的常用标记的对
2、应名称 插入多媒体对象的 HTML 语句的正确格式无序列表的相关知识有序列表的相关知识表格标记的相关知识超链接语句的相关知识第 2 章 DW 网页制作基础如果想更改工作区，可以使用“编辑”菜单中的什么命令切换到一种不同的工作区？首选参数Dreamweaver 站点的概念和特点一种组织所有与 Web 站点关联的文档的方法通过在站点中组织文件，可以与 FTP 一起利用 Dreamweaver 将站点上传到 Web 服务器、自动跟踪和维护链接、管理文件以及共享文件。除非定义站点，否则不能充分利用 Dreamweaver 的功能。 设置 Dreamweaver 站点的方法不止一种在文件面板中进行管理的
3、功能有：新建网页更改文件名删除文件等关于【远端站点】和【本地文件】的特点和概念所有制作完成的网页最后要放置在 Web Server 上。制作者可以在服务器上制作网页。制作网页时常把本地计算机的文件夹模拟成远程服务器的文件夹，因此本地文件夹也称为本地文件。完成作品后再将本地文件夹里完成的作品上传到服务器中成为真正的网站，服务器即远端站点。哪些是 HTML 文档的基本属性？页面标题2背景图像文本如何插入图像的一些基本常识？为了管理方便，一般设计习惯把图片放在“images”文件夹内以便于管理网站里的网页和图片等资源的文件名最好用中文，以便于管理。插入图像可以选择“插入” 菜单中的“ 图像”命令进行
4、插入。插入图像可以选择使用面板组“资源”面板进行插入。URL 的全称是？网页中添加换行符的快捷键？Dreamweaver 工作区是一个使用什么 (多文档界面)的集成工作区？书中出现的选择题层叠样式表（CSS）是一系列格式规则，它们控制网页内容的外观。 CSS 样式规则由什么组成？层叠样式表（CSS）的选择器类型有哪些？CSS 选择器针对超级链接进行设置的状态有哪些？插入音乐的方法有哪些？Dreamweaver MX 2004 提供的工作区布局,分别是什么？“文档”窗口用于显示当前文档。有哪些 dreamweave 的文档视图。第 3 章 DW 网页设计应用在 Dreamweaver 中插入表格
5、的实现方法。1）选择“插入”“ 表格” ；2）在常用类之插入工具栏中单击“表格”按钮；3）在布局类之插入工具栏中单击“表格”按钮。表格的三种查看模式。标准、扩展和布局表格的组成元素。单元格、行/列、表格如何选取表格元素？单击标签选择器中的标签可选取光标所在单元格；单击标签选择器中的标签可选取光标所在行；让鼠标指向表格的顶边，当鼠标变成黑色实心下向单箭头形状时单击，便可选取箭头所指向的列；单击标签选择器中的标签可选取光标所在表格。如何设置表格宽度？方法可有：1）新建表格时，在“表格”设置框的“宽度”框中输入值，再指定其相应的宽度单位。2）选取表格后，在其属性面板的“宽度”框中输入值，再指定其相应
6、的宽度单位；3）当宽度单位为像素时，在选取表格后，用鼠标拖拽右边框的黑色控点。 如何设置表格高度？方法可有：1）选取表格后，在其属性面板的“高度”框中输入值，再指定其相应的宽度单位；2）当宽度单位为像素时，在选取表格后，用鼠标拖拽下边框的黑色控点。 可用哪些单位来度量表格的宽度或高度？3百分比或像素你为什么把表格的宽度或高度设置为 100%的？希望表格会随着浏览器窗口大小的变化而自动调整其宽度或高度。你是怎么理解表格的边框粗细的？在浏览器窗口中浏览网页时，是否可见到表格线。0 则见不到，0 则见得到。你是怎么理解表格的单元格边距的？单元格边距指的是单元格内容到单元格左/右边框之间的距离。你是怎
7、么理解表格的单元格间距的？单元格间距指的是相邻两个单元格之间的距离。嵌套表格的实现。在一个单元格中插入另一个表格。布局表格与布局单元格？标准表格与布局表格。在布局查看模式下所制作的表格称为布局表格。布局单元格是布局表格的组成成分。即一个布局表格是由布局单元格组成的。在标准查看模式下所查看到的表格称为标准表格。布局表格最终都要被转换成标准表格，才能在网页中得以使用。一个标准表格由布局单元格和非布局单元格所组成。换句话说，一个布局表格是一个标准表格的子集。有哪些创建网页模板的常用方法？最基本的方法是哪一种？方法可有：1）基于现有网页文档创建；2）基于 Dreamweaver 设计文件创建；3）在“
8、资源”面板中创建。最基本的方法是基本现有网页文档来加以创建。制作网页的常用方法方法可有：1）在代码视图下输入 HTML 代码；2）在设计视图下直接加入网页元素；3）基于表格来安排网页元素布局；4）基于框架集来制作网页；5）基于模板来设计网页。何谓框架集？框架集指的是包含有多个框架的网页文档。何谓框架？框架是浏览器窗口中的一个区域，用它来显示出一个网页。框架是框架集的组成成分。一个 Dreamweaver 模板文档的文件扩展名是什么？.dwt。意即：dreamweaver templates。在 Dreamweaver 中，模板与站点的关系。1）模板一定存在于站点中；2）模板可使站点的网页风格保
9、持一致性，站点不一定非得包含有模板不可。套用已建成模板来设计网页的实现方法。在 Dreamweaver 中调出要套用模板的网页文档，然后使资源面板显示于 Dreamweaver 窗口右侧的面板组中（按 F11 键） ，单击该面板左侧的“模板”按钮，使当前站点中所有模板都显示出来，然后从中挑选所要模板，最后单击面板左下角的“应用”按钮。合并表格中单元格的实现。4在表格中选取了要合并的单元格后，执行“修改”“ 表格”“ 合并单元格”菜单操作。对表格中拆分某个单元格。把光标移入到拆分的单元格中，然后执行“修改”“ 表格”“ 合并单元格”菜单操作。第 4 章 FW 网页制作基础位图与矢量图的特点及常用
10、格式是什么？数码图像常选择什么格式？网页上常见的图像的格式及特点？Fireworks 默认的存储格式是？Fireworks 生成动画时，帧延时设置默认为多少秒？各种工具的使用，例如“放大”工具、 “锐化”工具、 “模糊”工具、 “减淡”工具、 “橡皮图章”工具、 “矩形”工具、椭圆”工具、 “替换颜色”工具等等选区的操作：加选、减选、全选、取消选择图像优化第 5 章 FW 网页设计应用第 5 章 FW 网页高级应用第 5 章 Fireworks MX 2004 网页设计应用 复习提纲资源面板包括什么？样式的概念及相关操作元件、实例的概念及相关操作切片的优点相关操作热点工具按钮的状态及按钮的相关
11、操作弹出菜单的创建与浏览如何创建动画？动画的有关概念、帧面板的使用5网页制作基础课程复习指南第 1 章 网页制作概况 1.1 网页制作基础知识1.2 Dreamweaver MX 2004 及 Fireworks MX 2004 简介1.3 HTML 基础知识1.1 网页制作基础知识网页（web page): 用 HTML 语言编写，通过 WWW 传播，并被 WEB 浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的页面文件。网站（web site)：一个文件夹，其中包括：通过超链接的形式关联起来的一系列网页、及其他作为网站所需的文件或文件夹。1.1 网页制作
12、基础知识首页与主页的区别浏览网站时最先访问的页为首页，一般为欢迎信息，通过链接再进入主页，主页是整个网站的导航中心。有些网站首页即主页（例如：163 QQ 等网站）1.2 网页制作工具简介入门级软件-FrontPage提高级软件- Dreamweaver Dreamweaver 与 Flash、Fireworks 并称为 Macromedia 的网页制作三剑客 。 （已为 Adobe收购） Dreamweaver 对于 DHTML（动态网页）的特别支持，可以让用户轻而易举地做出很多互动页面特效。插件式的程序设计使得其功能可以无限的扩展。网页设计的辅助美化工具Fireworks以处理网页图片为特
13、长。在绘图方面结合了位图以及矢量图处理的特点，还能轻松地把图形输出到 Flash、Dreamweaver 以及第三方的应用程序。在网页制作方面 Fireworks 能快速地为图形创建各种交互式动感效果，制作 GIF 动画、自如切图、生成鼠标感应 Javascript,不论在图象制作或是在网页支持上都有着出色的表现。PhotoShopFlash1.3 HTML 基础知识透过浏览器所看到的网页，是由 HTML（HyperText Markup Language）语言所构成的。HTML（超文本标记语言）是一种建立网页文本的语言，透过标记式的指令（Tag） ，将影像、声音、图片、文字等链接显示出来。H
14、TML 网页文件可以由任何文本编辑器或专用网页编辑器编辑，编辑完毕后，HTML 文件6将以.htm 或.html 作为文件后缀保存。1.3.1 基本架构用户在地址栏发出访问某个页面的请求后，浏览器把该请求送到页面所在的服务器，服务器把用户要访问的页面所对应的 HTML 文件通过 HTTP 协议传送给客户的浏览器，浏览器对该 HTML 文件进行解释执行，把整个页面显示在浏览器窗口中。 HTML 文件的基本架构HTML 的基本概念文本标记表格标记多媒体标记超链接标记HTML 文件的基本架构如下：HTML 文件开始文件头开始. 网页标题区文件头开始结束网页正文区开始网页正文区内容网页正文区结束HTM
15、L 文件文件结束1.3.2 HTML 的基本概念标记HTML 标记是由“” 所括住的指令。主要分为： 单标记指令（由构成 ） ，如： 。 双标记指令（由 构成） ， 如： 标记属性 例：注释语句 例：1.3.3 常用文本标记1. 标题（Title ）Title 标记是文件头中惟一一个必须出现的标记，它也只能出现在文件头中。Title 标记的格式为：文件标题2. 标题号（Hn）标题标记有 6 种，分别为 h1,h2,h6，用于表示文章中的各种标题。标题号越小，字体越大。3. 字体大小标记（）普通的字体也可以改变，使用字体大小标记能够改变包含的字符、单词、短语或指定范围文本的字号大小。语法格式：文
16、字7#1=1，2，3，4，5，6，7 or +#，-#，缺省时为 3 号字体。#2=颜色的 16 进制数或英文名称1.3.3 常用文本标记4. 段落标记（ ）与换行标记（ ）是 HTML 格式中特有的段落元素。在原始文件中的，指出在这儿告一段落，下面的文字另起一段。 另外一个类似的标记元素是。这个标记用来标识一个换行动作，相当于字处理文件中的按回车键的功能。在 HTML 文件中可以用它来调整行间距。在处理类似诗歌式的语句时常常用到。语法格式：文本文本5.水平线标记（Hr）1.3.5 多媒体标记图像标记HTML 语言中的基本图像标记： 。背景音乐标记通过这个标记可以嵌入多种格式的音乐文件。其基本
17、语法为：1.3.6 超链接标记链接标记链接标记的属性1.3.4 列表标记在 HTML 文件中同样可以使用列表的形式来显示数据的显示。1. 无序列表（Ul）无序列表用开始，每一个列表条目用引导，最后以结束。注意列表条目不需要结尾标注 。输出时每一列表条目缩进，并且以黑点标示。1.3.4 列表标记2. 有序列表（Ol）有序列表与无序列表相比，只是在输出时列表条目用数字标示。默认情况下，有序列表的列表项是阿拉伯数字，通过 TYPE 属性也可以修改有序列表的序号类型，如右表所示。1.3.4 表格标记表格标记主要包括如下几种：81. . 创建一个表格。2. . 定义表格一行的单元格。3. . 定义一个单
18、元格的内容。4. 定义表格页眉单元格的内容。5. 显示表格的标题。上述标记中后两个可省略，前三个不可省。第 2 章 Dreamweaver MX 2004 网页制作基础学习内容2.1 Dreamweaver MX 2004 工作区2.2 规划和设置站点 2.3 建立 HTML 文档 2.4 图文混排 2.5 样式与 CSS 样式2.6 插入多种媒体元素2.7 插入超链接2.1 Dreamweaver MX 2004 工作区2.1.1 选择工作区布局Dreamweaver MX 2004 提供了两种可供选择的工作区布局：设计者布局和代码编写者布局。在 Windows 中首次启动 Dreamwea
19、ver MX 2004 时，会出现一个对话框让用户选择一种工作区布局。1. 设计者工作区2. 代码编写者工作区可以从中选择一种工作区布局。如果不熟悉编写代码选择“设计者”。如果想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。 “编辑”菜单“ 首选参数”对话框如下图： 2.1.2 使用 Dreamweaver 窗口和面板 “插入”栏“属性检查器”用于查看和更改所选对象或文本的各种属性。“面板组”小技巧 如何设置默认的编码方式选择编辑首选参数 ，打开首选参数 对话框2.2 规划和设置站点结构选择站点管理站点 对话框。选择新建 站点进入定义网站的流程。进入基本 选项卡，使用网
20、站定义向导，可以轻松完成所有设置。在站点定义对话框的编辑文件 中输入想要的网站名称。在此范例中，输入网站名称为“巴黎文化之旅”，单击下一步 按钮。在站点定义 对话框的 编辑文件，第 2 部分 ，请选择否，我不想使用服务器技术，然后9单击下一步 按钮。在站点定义 对话框的 编辑文件，第 3 部分 ，请选择编辑我的计算机上的本地副本，完成后再上传到服务器（推荐），然后在 您将把文件存储在计算机上的什么地方 中设置为“e:paris”（可任意设置文件夹所在位置，但路径中不能有中文）中，然后单击 下一步按钮。在站点定义 对话框的 共享文件 中，请单击菜单按钮，选择 无暂不设置远程服务器的连线，然后单击
21、下一步按钮。最后，在此对话框中，会将前面的设置做一个总结，当确认无误后，请单击完成 按钮。回到 dreamweaver 工作环境中，将会在右侧 文件面板组的文件 面板中，发现一个“巴黎文化之旅”的新网站。站点文件的管理在文件面板中进行管理站点名称新建网页：在根目录下建立 default.htm 页（内文首页）更改文件名 删除文件新建/更改/删除文件夹在网站根目录下需要建 images 和 media 文件夹，方便统一放置以后加入站点的各种媒体文件。扩展/折叠注意：新建网页文件和新建子文件夹将出现在当前选中的文件夹下。区分清你是要在网站根目录下建还是在某个文件夹下建开启网页在编辑窗口：在文件面板
22、中，可以选取要开启的网页后按enter键或双击鼠标左键即可。按快速键F12在浏览器中预览网页。在 Dreamweaver 中，可打开现有 HTML 文档或任何动态文档类型，也可以打开非 HTML文本文件，如 JavaScript 文件、XML 文件、CSS 样式表或用字处理程序或文本编辑器保存的文本文件。建立第一个图文混排的 HTML 页文字的排版(在属性栏设置)文字可从其他格式的文档中复制过来文字格式化建议使用文字样式Dreamweaver 软件第一次使用时，字体列表要自己添加设置文字样式的建立和修改对齐与缩进首行缩进可用全角状态下的空格10换行（非回车）shift+Enter【插入图像】常
23、用方法：（1）使用插入菜单：在“插入”菜单选“ 图像”，弹出“选择图像源文件”对话框，选中某图像文件，单击确定。（2）使用插入栏（如下图）：单击插入栏对象按钮，选图像按钮，弹出“选择图像源文件”对话框。 网页上的多媒体FLASH 动画FLASH 文字FLASH 按钮插入音频插入视频在页面中使用 FLASH插入 FLASH 动画光标放在 index.htm 页面表格的第一格内“插入”菜单/FLASH 或“ 常用”工具栏/媒体/FLASH在页面中使用 FLASH插入 FLASH 文字 (适用于浏览器不支持的特殊字体)在 index.htm 页面表格的第二格/ 常用工具栏/媒体/FLASH 文本修改
24、 FLASH 文字的设置参数可在属性面板修改文字本身可直接双击修改在页面中使用 FLASHFLASH 按钮的使用(DREAMWEAVER 中也可以编辑多种按钮效果)常用工具栏/媒体/FLASH 按钮修改 FLASH 按钮的设置参数可在属性面板修改,文字本身可直接双击修改音频与影片的播放可用音频类型：wav midi mp3 wma 浏览器插件相容性较好插入方法：在 parisinfo.htm 的文字前,常用工具栏/媒体/ 插件 属性改宽 280 高 45 可全部显示播放器 修改参数表(选中媒体对象后 ,在属性栏上可设置参数) 音频与影片的播放推荐视频类型：mov asf wmv 浏览器插件相容
25、性较好插入方法：在 parismoveie.htm 的适当位置,常用工具栏/媒体 /插件修改参数方法与音频文件相同插入多种超链接11文字、图像、按钮链接 例：viewpoint.htm目标页面的设置图片的替代文字网页锚点链接常用工具栏中找到锚点工具,将锚点插入至需要的地方,在属性栏为锚点命名选中链接处对象,在属性栏用“#锚点名”,如需要回到页首不用定锚点,直接用“#top”文件下载链接邮件链接mailto:?subject=我有话要说CSS 层叠（级联）样式表层叠样式表（CSS）是一系列格式规则。使用 CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。CS
26、S 可以控制许多仅使用 HTML 无法控制的属性。例如，可以为所选文本指定不同的字体大小和单位(像素、磅值等 ),可以调整段落间的距离，超链接文字的颜色等等。新建 CSS 样式CSS 样式规则由两部分组成：选择器和声明。选择器是样式名称 （如 head1 或 P） ，而声明则用于定义样式元素。声明由两部分组成：属性（如 font-size ）和值（如 16px ） 。.head1 font-size: 16px;font-weight: bold;color: #990000;CSS 样式表的类别内部样式表：即将 CSS 语法直接写在文件头内，仅供该网页使用。其他网页要使用需通过【文件】 【导
27、出】 【 CSS 样式】命令导出 CSS 文件后方可使用外部样式表：直接将 CSS 语法单独保存成一个 CSS 文件。其他网页文件需要共享 CSS 文件时：在属性栏样式中利用管理样式的附加功能添加外部样式表文件。什么是选择器?类？标签？高级？即设置 CSS 样式要套用在什么网页元件上的分类。类样式：自定义 CSS 规则，可以将样式属性应用到任何文本范围。所有类样式均以句点 (.)开头。例如：head1.cssHTML 标签:重定义特定标签(如 p 或 h1) 的格式。高级：较复杂。12CSS 选择器针对超级链接进行设置的四种状态a:Active 选中超级链接状态a:Hover 光标移上超级链接
28、状态a:Link 超级链接的正常状态，没有任何动作的时候a:Visited 访问过的超级链接状态 Css 样式文件的应用打开站点内的其他页面，例如 viewpoint.htm 在 css 样式面板上按下附加样式按钮，则可将yangshi.css 文件链接进 viewpoint.htm 页中。样式的删除1、直接在样式面板中选中样式。2、单击面板中的垃圾桶按钮即可。样式的编辑 1、单击样式面板中右上角按钮。2、在下拉菜单中选择编辑命令。 第 3 章 Dreamweaver MX 2004 网页设计应用3.1 使用表格显示内容3.2 利用布局制作复杂表格页 3.3 使用框架3.4 模板表格是目前在网
29、页中进行布局配置的最主要的结构之一.表格的查看模式 标准视图模式扩展视图模式布局视图模式一般设置为标准查看模式。在“布局”类别的工具栏中有对应的视图模式按钮。3.1 使用表格显示内容3.1.1 新建一个简单表格插入表格的操作步骤如下： （1）在文档窗口的设计视图中，将插入点放在需要表格出现的位置。（2）执行以下操作之一： 在类别为“常用” 时，单击插入工具栏中的“ 表格”按钮。 选择“插入表格” 命令。 3.1 使用表格显示内容3.1.2 在表格的单元格间移动 用鼠标单击可方便地移光标到表格中的某个单元格。若要使用键盘从一个单元格移动到另一个单元格，可执行以下操作之一： （1）按 Tab 键移
30、动到下一个单元格。注意：在表格的最后一个单元格中按 Tab 键会自动为表格添加一行。 （2）按 Shift+Tab 键移动到上一个单元格。13（3）按方向键上下左右移动。3.1 使用表格显示内容3.1.3 选择表格元素 表格元素包括单元格、行、列以及整个表格。（1）选择单元格：移光标到单元格后单击标签选择器中的标签。 （2）选择行：移光标到该行的任一个单元格，然后单击标签选择器中最右边的标签。（3）选择列：让鼠标指向列顶部，变成下向黑色箭头时单击。或右击列顶部的下向箭头后选“选择列”项。（4）选择整个表格：移光标到表格内的任一单元格，然后单击标签选择器中最右边的的标签。 3.1 使用表格显示内
31、容3.1.4 查看或设置表格格式 在选择了表格元素后，可在属性面板中查看到其对应的格式设置。这时，可在属性面板中对格式进行修改，以重置表格元素的格式。若想让表格套用某个系统预设的格式，则可在“命令”菜单中选择“格式化表格”项，然后选中某种格式，最后单击“确定”按钮。当单元格、行/列、表格的格式设置冲突时，单元格格式设置优先，其次为行/ 列，最后才为表格。3.1 使用表格显示内容3.1.5 修改表格 1、调整表格的大小：拖曳控制点。2、更改列宽和行高：拖曳框线或在属性面板中输入新的值。 3、添加及删除行和列：选择“修改 表格” 级联菜单中的相应命令项。 4、合并/拆分单元格：选择“修改 表格”级
32、联菜单中的相应命令项。5、嵌套表格：在一个单元格中插入新的表格6、剪切、复制和粘贴单元格3.2 在布局视图中对页进行布局在 Dreamweaver 中，可以有多种方法来对网页元素进行布局设计。其中的一种方法，就是在布局视图下对网页元素进行布局。在布局视图下，使用表格对元素进行定位，以表格作为基础结构来设计网页。虽然如此，对表格的处理多数还是在标准视图方式下进行的。3.2 在布局视图中对页进行布局3.2.1 关于布局表格和单元格在布局视图模式下，一个表格仅由布局单元格所组成。在“布局”类别的插入工具栏中，单击“ 布局”按钮可进入布局视图。此后，单击“ 布局表格”按钮后在文档中拖曳鼠标可画出一个布
33、局表格，单击“布局单元格”按钮后在布局表格中拖曳鼠标可插入布局单元格。 3.2 在布局视图中对页进行布局3.2.2 标准表格与布局表格的区别在这里，标准表格指的是在标准视图模式下所见到的表格。一个标准表格由布局单元格和非布局单元格所组成。布局表格是在布局视图模式下所见到的表格。它仅由布局单元格所组成。表格的应用-网站相册 14 将要用到的相片先整理到同一文件夹内(该文件夹可以不在网站根目录下) 图片扩展名可为 gif jpg jpeg png psd tif tiff 文件名不可为中文 要先编号 先设置相册每列数目，横的放同一行，竖的放同一行 在站点内建立一个 album 文件夹 命令/创建网
34、站相册(需要先打开站点内任意一个 html 文件) 指定源文件夹(原图)/目标文件夹 (album) 为每张相片建导览页面 完成后,album 文件夹内的 index.htm 即为相册首页 美化相册 index.htm 版面：设置标题 表格样式背景图片3.3 模板模板是用来快速构建统一风格的站点的有力工具之一用表格制作模板的两种常用途径：方法一 （不推荐）模板大图切片导出成嵌套表格 HTML 文件，在 Dreamweaver 中整理嵌套表格，制成模板，对网站中其他已有页面套用模板。优点:速度较快，适合简单的上下型水平导航栏模板缺点:需要调整复杂的嵌套表格。方法二（推荐） 根据大图设计的尺寸在
35、Dreamweaver 中自绘无框线表格作为页面排版，将大图切片等元素自行添加到各个单元格中，然后制模板，对网站中其他已有页面套用模板。优点:方法直观，适合各种形式的模板大图转模板，也可以自由添加各类动画等多媒体元素。注意:一旦修改模板文件，则用模板套用的页面都会自动修改。如果想编辑内文区里的内容，可将模板从页面上分离出来，使用“修改”/”模板”/” 从模板分离”，否则内文不可编辑。3.4 使用框架框架的作用就是把浏览器窗口分割为若干个区域，每个区域可以显示出各自的网页。3.3.1 框架和框架集框架是浏览器窗口中的某一个区域，用它来显示出一个网页。该网页的内容可以跟浏览器窗口中其它部分所显示的
36、内容无关。框架集指的是包含有多个框架部分的网页文档。3.4 使用框架3.3.2 常用框架3.4 使用框架顶部框架：以固定大小的上框架水平分割框架组。15右侧和嵌套的上方框架：含固定大小的右框架和上嵌套框架上方和嵌套的右侧框架：含固定大小的上框架和右嵌套框架右侧和嵌套的下方框架：含固定大小的右框架和下嵌套框架固定上框架，固定下框架：含固定大小的上、下框架左侧框架：以固定大小的左框架垂直分割框架组3.4 使用框架顶部和嵌套的左侧框架：含固定大小的上框架和左嵌套框架左侧和嵌套的上方框架：含固定大小的左框架和上嵌套框架底部框架：以固定大小的下框架水平分割框架组。左侧和嵌套的下方框架：含固定大小的左框架
37、和下嵌套框架垂直框架：垂直对半分割框架组3.4 使用框架下方和嵌套的右侧框架：含固定大小的下框架和右嵌套框架下方和嵌套的左侧框架：含固定大小的下框架和左嵌套框架水下分割：水平对半分割框架组右侧框架：以固定大小的右框架垂直分割框架组左侧和嵌套的上方框架：含固定大小的左框架和上嵌套框架第 4 章 Fireworks MX 2004网页制作基础本章主要内容4.1 数码图像基础知识 4.2 Fireworks MX 2004 工作环境 4.3 更改画布 4.4 选择和变形对象 4.5 层的操作4.6 位图的操作4.7 文本的操作 4.8 应用颜色、笔触和填充 4.9 图像优化与导出4.10 Firew
38、orks 的批处理操作4.1 数码图像基础知识像素（pixel ）：记录图像的基本单位 2592*1944=5038848=500 万像素3872*2592=1000 万像素图像分辨率：每英寸内的像素数量分辨率越高，图像品质越佳4.1 数码图像的基本概念位图与矢量图16位图：由像素点组成，记录每个像素点的颜色值，再拼成整图。常用格式有.jpg、.gif、.bmp 等颜色值可有 256，216，232图像大小计算方法：一张 800*600 大小的颜色值为 232 数码图片大小 800*600*32 bit数码摄影设备扫描设备得到的是位图放大后会产生马赛克 4.1 数码图像的基本概念矢量图矢量图由
39、矢量轮廓线和矢量色块组成，文件的大小由图像的复杂程度决定，与图形的大小无关，并且矢量图可以无限放大而不会模糊。适用于网络标志或动画。常用格式有.ai、.cdr、.fh. 、 swf 等。 4.1 数码图像的基本概念常用颜色模式RGB 颜色 色加法：红+ 绿+蓝电视显示器使用的颜色模式CMYK 颜色 色减法：青 洋红 黄 黑印刷打印使用的颜色模式4.1 数码图像的基本概念数码图像的文件格式JPEGJPEG 文件格式是 Joint Photographic Experts Group（联合图像专家组）的缩写，文件的后缀名是.JPG，这也是最常见的一种文件格式，几乎所有的图像软件都可以打开它。 TI
40、FFTIFF 是 Tagged Image File Format（标记图像文件格式）的缩写，文件的后缀名是.TIF，这是现阶段印刷行业使用最广泛的文件格式。 4.1 数码图像的基本概念数码图像的文件格式GIFGIF 是 Graphics Interchange Fotmat（图像交换格式）的缩写，文件的后缀名是.GIF。 BMPBMP 是 Bitmap 的缩写，后缀名是.BMP。 4.2 Fireworks MX 2004 工作环境 使用“工具”面板 “工具” 面板分成六个类别：选择、位图、矢量、网页、颜色和视图。 4.2 Fireworks MX 2004 工作环境 17使用“属性”面板“
41、属性” 面板是一个上下文关联面板，它显示当前选区的属性、当前工具选项或文档属性。默认情况下， “属性”面板停放在工作区的底部。 4.2 Fireworks MX 2004 工作环境各面板的作用“混色器”和“样本 ”面板管理当前文档的调色板。 “层”和“帧”面板组织文档的结构，并且包含用于创建、删除和操作层和帧的选项。 “帧”面板包括创建动画的选项。 “信息”面板提供所选对象的尺寸和在画布上移动指针时指针的精确坐标。 4.2 Fireworks MX 2004 工作环境各面板的作用“行为”面板管理行为，而行为决定热点和切片对鼠标移动所做出的响应。 “历史记录”面板列出最近使用过的命令，以便能够快
42、速撤消和重复命令。另外，可以选择多个动作，然后将其作为命令保存和重新使用。 “库”面板包含图形元件、按钮元件和动画元件。可以很容易地将这些元件的实例如从“库”面板拖到文档中。可以通过仅修改该元件对全部实例进行全局更改。4.2 Fireworks MX 2004 工作环境各面板的作用“优化”面板可以管理用于控制对象大小和文件类型的设置，以及处理要导出的文件或切片的调色板。 “样式”面板可以储存和重新使用对象的组合特性或者选择一个常用样式。 “url”面板可以创建包含经常使用的 url 的库。 4.2 Fireworks MX 2004 工作环境各面板的作用“查找和替换”面板可以在一个或多个文档中
43、查找和替换元素，如文本、url、字体和颜色等。“工程记录”面板在使用“ 查找和替换 ”或进行批处理时帮助跟踪和控制在多个文件中所做的更改。 “答案”面板是一个新资源，它能够从 Macromedia 网站上动态下载内容丰富而且很有帮助的信息。该面板具有关键字搜索功能，用于从各种来源中查找基于网页的信息。 4.2 Fireworks MX 2004 工作环境使用面板1. 组织面板组和面板 (“窗口”菜单)2. 设置面板选项3. 使用面板组或面板“选项” 菜单(右上角)4.2 Fireworks MX 2004 工作环境关于“快速导出” 按钮 用“快速导出” 按钮导出Fireworks 文档或所选图
44、形： （1）单击“快速导出” 按钮并从显示的弹出菜单中选择一个导出选项。适当的选项将在“导出”对话框中自动设置。如果需要可以更改选项。 18（2）选择储存导出文件的位置，键入文件名并单击“保存”按钮。4.2 Fireworks MX 2004 工作环境关于“快速导出” 按钮 用“快速导出” 按钮启动其他 Macromedia 应用程序：单击 “快速导出” 按钮并从应用程序子菜单中选择“启动” 选项。 4.2 Fireworks MX 2004 工作环境浏览和查看文档 可以控制文档的缩放比率、视图个数和显示模式。另外，可以很容易地移动文档视图，这在放大后不再能看到整个画布时很有用。4.2 Fir
45、eworks MX 2004 工作环境浏览和查看文档缩放和移动使用视图模式管理工作区显示多个文档视图 (“窗口”)4.3 更改画布 更改画布属性 更改画布大小更改画布颜色调整文档内容 旋转画布 4.3 更改画布关于重新取样 Fireworks 中的重新取样与大多数图像编辑应用程序中的重新取样功能不同。Fireworks 包含基于像素的位图图像对象和基于路径的矢量对象。 在对位图对象重新取样时，将在图像中添加或去除像素，使图像变得更大或更小。在对矢量对象重新取样时，由于通过数学方式以更大或更小的尺寸对路径进行重绘，所以几乎不会有品质损失。4.3 更改画布修剪、符合画布、修剪文档如果文档在画布内容
46、周围有多余的空间，则可以修剪画布。 “修改”“画布”“修剪画布”也可以通过修剪文档来删除空的画布空间， “编辑”“修剪文档”画布将调整大小以适合定义的区域4.3 更改画布如何自由修剪文档 从“工具” 面板中选择“裁剪”工具画布上拖动边框。调整修剪手柄，直到边框包围要保留的文档区域为止。边框中双击或者按下 Enter 键以修剪文档。画布将调整为定义的区域大小，画布边缘外的对象将被删除。 4.3 更改画布19使用标尺、引导线和网格使用标尺标尺能够帮助测量、组织和计划作品的布局。因为 Fireworks 图形是旨在用于网页，而网页中的图形以像素为单位进行度量，所以不管创建文档时所用的度量单位是什么，
47、Fireworks 中的标尺总是以像素为单位进行度量。 选择“视图” “ 标尺”命令，可显示和隐藏标尺。4.3 更改画布使用标尺、引导线和网格 使用引导线 引导线是从标尺拖到文档画布上的线条。它们可作为帮助放置和对齐对象的辅助绘制工具。 4.3 更改画布使用标尺、引导线和网格 使用引导线 创建水平或垂直引导线（单击并从相应的标尺拖动） 将引导线移动到特定位置( 双击引导线 ) 显示或隐藏引导线(“ 视图” ) 4.3 更改画布使用标尺、引导线和网格 使用引导线 更改引导线颜色（“ 视图” “ 辅助线” “ 编辑辅助线” ） 锁定或解锁全部引导线（“ 视图”“ 辅助线”“ 锁定辅助线” ） 删除
48、引导线（将引导线从画布拖走） 4.3 更改画布使用标尺、引导线和网格 使用网格显示和隐藏网格（“ 视图” “ 网格”“ 显示网格” ） 更改网格颜色和更改网格单元格的大小（“ 视图”“ 网格 ”“ 编辑网格” ） 绘制基本矢量图形直线工具画出线段，用指针工具选中调整颜色、笔尖描边种类笔尖大小边缘柔化笔刷颜色描边种类纹理绘制基本矢量图形钢笔工具20绘制线段与多边形 拖拽出曲线 绘制基本矢量图形矢量路径工具重绘路径工具（重绘或延伸选取的线段）绘制基本矢量图形矩形工具椭圆工具多边形工具自动图形工具绘制基本矢量图形操作实例：绘制自动图形工具，制作箭头自动图形工具除有 4 个蓝色控点外还拥有数个黄色的菱
49、形控点。4.4 选择和变形对象 选择对象 “指针”工具：当单击对象或者在全部或部分对象周围拖动选区时， “指针”工具会选择这些对象。 若要通过单击选择对象，可执行下列操作之一： 将“指针” 工具移到对象的路径或定界框上，然后单击。单击对象的边缘或填充。在“层”面板中选择对象。4.4 选择和变形对象 选择对象 “选择后方对象” 工具当处理包含多个对象的图形时，可以使用“ 选择后方对象” 工具选择被其他对象隐藏或遮挡的对象。 4.4 选择和变形对象 选择对象 使用“部分选定” 工具使用“ 部分选定” 工具可以选择、移动或修改矢量路径上的点或者属于组的对象。 4.4 选择和变形对象变形和扭曲所选对象和选区“缩放”放大、缩小、旋转对象。 “倾斜”将对象沿指定轴倾斜 “扭曲” 拖动选择手柄的方向移动对象的边或角。这有助于创建三维外观。翻转对象（修改 变形） 214.5 关于图层什么是图层:多种绘图软件的多对象操作的处理利器.以“自行车”为例说明对图层的各种操作/新建/复制/删除/重命名调位置隐藏/锁定4.5 层的操作层的
