当前位置:首页 >> 其它课程 >> 计算机《网页制作》复习提纲

计算机《网页制作》复习提纲


《网页制作》复习题
第 1 章 网页制作概况 网页的概念:网页是用 HTML 语言语言编写,通过 WWW 传播,并被 WEB 浏览器翻 译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为 一体的页面文件。 1. 首页和主页的异同点 2. 网页制作的常用工具软件有哪些 3. 网页正文区<BODY></BODY>和文件头<H

EAD></HEAD>的位置关系,文件头内的 惟一一个必须出现的标记是哪一个标记? 4. 单标记和双标记的概念,HTML 标记中哪些是单标记,哪些是双标记? 5. 注释语句的含义,其正确书写格式 6. HTML 标记的常用属性的含义,例如大小尺寸、对齐方式、颜色值属性的书写 方式 7. 在 HTML 文件中实现换段和强制换行的不同,及分别使用哪个标记 8. HTML 中的常用标记的对应名称 9. 插入多媒体对象的 HTML 语句的正确格式 10. 无序列表的相关知识 11. 有序列表的相关知识 12. 表格标记的相关知识 13. 超链接语句的相关知识

第 2 章 DW 网页制作基础 如果想更改工作区,可以使用“编辑”菜单中的什么命令切换到一种不同的工作 区? 首选参数 Dreamweaver 站点的概念和特点 一种组织所有与 Web 站点关联的文档的方法 通过在站点中组织文件,可以与 FTP 一起利用 Dreamweaver 将站点上传到 Web 服务器、自动跟踪和维护链接、管理文件以及共享文件。

除非定义站点,否则不能充分利用 Dreamweaver 的功能。 设置 Dreamweaver 站点的方法不止一种 在文件面板中进行管理的功能有: 新建网页 更改文件名 删除文件等 关于【远端站点】和【本地文件】的特点和概念 所有制作完成的网页最后要放置在 Web Server 上。 制作者可以在服务器上制作网页。 制作网页时常把本地计算机的文件夹模拟成远程服务器的文件夹, 因此本地文件 夹也称为本地文件。 完成作品后再将本地文件夹里完成的作品上传到服务器中成为真正的网站, 服务 器即远端站点。 哪些是 HTML 文档的基本属性? 页面标题 背景图像 文本 如何插入图像的一些基本常识? 为了管理方便,一般设计习惯把图片放在“images”文件夹内以便于管理 网站里的网页和图片等资源的文件名最好用中文,以便于管理。 插入图像可以选择“插入”菜单中的“图像”命令进行插入。 插入图像可以选择使用面板组“资源”面板进行插入。 URL 的全称是? 网页中添加换行符的快捷键? Dreamweaver 工作区是一个使用什么(多文档界面)的集成工作区? 书中出现的选择题 层叠样式表(CSS)是一系列格式规则,它们控制网页内容的外观。CSS 样式规 则由什么组成? 层叠样式表(CSS)的选择器类型有哪些?

CSS 选择器针对超级链接进行设置的状态有哪些? 插入音乐的方法有哪些? Dreamweaver MX 2004 提供的工作区布局,分别是什么? “文档”窗口用于显示当前文档。有哪些 dreamweave 的文档视图。 第 3 章 DW 网页设计应用 在 Dreamweaver 中插入表格的实现方法。 1)选择“插入”?“表格” ; 2)在常用类之插入工具栏中单击“表格”按钮; 3)在布局类之插入工具栏中单击“表格”按钮。 表格的三种查看模式:标准、扩展和布局 表格的组成元素:单元格、行/列、表格 如何选取表格元素? 单击标签选择器中的<td>标签可选取光标所在单元格; 单击标签选择器中的<tr>标签可选取光标所在行; 让鼠标指向表格的顶边, 当鼠标变成黑色实心下向单箭头形状时单击,便可选取 箭头所指向的列; 单击标签选择器中的<table>标签可选取光标所在表格。 如何设置表格宽度? 方法可有: 1)新建表格时,在“表格”设置框的“宽度”框中输入值,再指定其相应的宽 度单位;2)选取表格后,在其属性面板的“宽度”框中输入值,再指定其相应 的宽度单位;3)当宽度单位为像素时,在选取表格后,用鼠标拖拽右边框的黑 色控点。 如何设置表格高度? 方法可有: 1)选取表格后,在其属性面板的“高度”框中输入值,再指定其相应的宽度单 位; 2)当宽度单位为像素时,在选取表格后,用鼠标拖拽下边框的黑色控点。 可用哪些单位来度量表格的宽度或高度?百分比或像素

你为什么把表格的宽度或高度设置为 100%的?希望表格会随着浏览器窗口大小 的变化而自动调整其宽度或高度。 你是怎么理解表格的边框粗细的?在浏览器窗口中浏览网页时, 是否可见到表格 线。0 则见不到,>0 则见得到。 你是怎么理解表格的单元格边距的?单元格边距指的是单元格内容到单元格左/ 右边框之间的距离。 你是怎么理解表格的单元格间距的?单元格间距指的是相邻两个单元格之间的 距离。 嵌套表格的实现:在一个单元格中插入另一个表格。 布局表格与布局单元格?标准表格与布局表格: 在布局查看模式下所制作的表格 称为布局表格。 布局单元格是布局表格的组成成分。即一个布局表格是由布局单 元格组成的。 在标准查看模式下所查看到的表格称为标准表格。 布局表格最终都要被转换成标 准表格, 才能在网页中得以使用。一个标准表格由布局单元格和非布局单元格所 组成。换句话说,一个布局表格是一个标准表格的子集。 有哪些创建网页模板的常用方法?最基本的方法是哪一种? 方法可有:1)基于现有网页文档创建;2)基于 Dreamweaver 设计文件创建;3) 在“资源”面板中创建。最基本的方法是基本现有网页文档来加以创建。 制作网页的常用方法 方法可有:1)在代码视图下输入 HTML 代码;2)在设计视图下直接加入网页元 素;3)基于表格来安排网页元素布局;4)基于框架集来制作网页;5)基于模 板来设计网页。 何谓框架集?框架集指的是包含有多个框架的网页文档。 何谓框架?框架是浏览器窗口中的一个区域,用它来显示出一个网页。框架是框 架集的组成成分。 一个 Dreamweaver 模板文档的文件扩展名是什么?.dwt。意即:dreamweaver templates。 在 Dreamweaver 中,模板与站点的关系:1)模板一定存在于站点中;2)模板可 使站点的网页风格保持一致性,站点不一定非得包含有模板不可。

套用已建成模板来设计网页的实现方法: Dreamweaver 中调出要套用模板的网 在 页文档, 然后使资源面板显示于 Dreamweaver 窗口右侧的面板组中(按 F11 键) , 单击该面板左侧的“模板”按钮,使当前站点中所有模板都显示出来,然后从中 挑选所要模板,最后单击面板左下角的“应用”按钮。 合并表格中单元格的实现:在表格中选取了要合并的单元格后,执行“修改”? “表格”?“合并单元格”菜单操作。 对表格中拆分某个单元格:把光标移入到拆分的单元格中,然后执行“修改”? “表格”?“合并单元格”菜单操作。 第 4 章 FW 网页制作基础 位图与矢量图的特点及常用格式是什么? 数码图像常选择什么格式? 网页上常见的图像的格式及特点? Fireworks 默认的存储格式是? Fireworks 生成动画时,帧延时设置默认为多少秒? 各种工具的使用,例如“放大”工具、 “锐化”工具、 “模糊”工具、 “减淡”工 具、 “橡皮图章”工具、 “矩形”工具、椭圆”工具、 “替换颜色”工具等等 选区的操作:加选、减选、全选、取消选择 图像优化 第 5 章 FW 网页设计应用 第 5 章 FW 网页高级应用 第5章 Fireworks MX 2004 网页设计应用 复习提纲

资源面板包括什么? 样式的概念及相关操作 元件、实例的概念及相关操作 切片的优点相关操作 热点工具 按钮的状态及按钮的相关操作 弹出菜单的创建与浏览 如何创建动画?动画的有关概念、帧面板的使用

网页制作基础课程复习指南
第1章 网页制作概况 1.1 网页制作基础知识 1.2 1.3 Dreamweaver MX 2004 及 Fireworks MX 2004 简介 HTML 基础知识

1.1 网页制作基础知识 网页(web page): 用 HTML 语言编写,通过 WWW 传播,并被 WEB 浏览器翻译成

为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体 的页面文件。 网站(web site):一个文件夹,其中包括:通过超链接的形式关联起来的一系 列网页、及其他作为网站所需的文件或文件夹。 1.1 网页制作基础知识 首页与主页的区别 浏览网站时最先访问的页为首页,一般为欢迎信息,通过链接再进入主页,主页 是整个网站的导航中心。有些网站首页即主页(例如:163 QQ 等网站) 1.2 网页制作工具简介 入门级软件-FrontPage 提高级软件- Dreamweaver: Dreamweaver 与 Flash、 Fireworks 并称为 Macromedia 的网页制作三剑客 。 (已为 Adobe 收购) :Dreamweaver 对于 DHTML(动态网页) 的特别支持, 可以让用户轻而易举地做出很多互动页面特效。插件式的程序设计 使得其功能可以无限的扩展。 网页设计的辅助美化工具 Fireworks:以处理网页图片为特长。在绘图方面结合了位图以及矢量图处理的 特点,还能轻松地把图形输出到 Flash、Dreamweaver 以及第三方的应用程序。 在网页制作方面 Fireworks 能快速地为图形创建各种交互式动感效果,制作 GIF 动画、自如切图、生成鼠标感应 Javascript,不论在图象制作或是在网页支持上 都有着出色的表现。 PhotoShop;Flash

1.3

HTML 基础知识

透过浏览器所看到的网页,是由 HTML(HyperText Markup Language)语言所构 成的。HTML(超文本标记语言)是一种建立网页文本的语言,透过标记式的指令 (Tag) ,将影像、声音、图片、文字等链接显示出来。 HTML 网页文件可以由任何文本编辑器或专用网页编辑器编辑, 编辑完毕后, HTML 文件将以.htm 或.html 作为文件后缀保存。 1.3.1 基本架构 用户在地址栏发出访问某个页面的请求后, 浏览器把该请求送到页面所在的服务 器, 服务器把用户要访问的页面所对应的 HTML 文件通过 HTTP 协议传送给客户的 浏览器, 浏览器对该 HTML 文件进行解释执行,把整个页面显示在浏览器窗口中。 HTML 文件的基本架构 HTML 的基本概念 文本标记 表格标记 多媒体标记 超链接标记 HTML 文件的基本架构如下: <HTML> HTML 文件开始 <HEAD>文件头开始 <TITLE> ... </TITLE> 网页标题区 </HEAD>文件头开始结束 <BODY>网页正文区开始 网页正文区内容 </BODY>网页正文区结束 </HTML> HTML 文件文件结束 1.3.2 HTML 的基本概念 标记:HTML 标记是由“<” 和“>” 所括住的指令。主要分为: 单标记指令(由<标记指令>构成 ) ,如:<br> 。 双标记指令(由<起始标记></结束标记> 构成) ,

如:< HEAD > </ HEAD > 标记属性 例:<HR size=“3” align=“left” width=“75%”> 注释语句 例:<!-- 网页正文区从这里开始--> 1.3.3 常用文本标记 1.标题(Title) :Title 标记是文件头中惟一一个必须出现的标记,它也只能出 现在文件头中。Title 标记的格式为:<Title>文件标题</Title> 2.标题号(Hn) :标题标记有 6 种,分别为 h1,h2,?h6,用于表示文章中的各种 标题。标题号越小,字体越大。 3.字体大小标记(<font></font>) :普通的字体也可以改变,使用字体大小标记 <font></font>能够改变包含的字符、单词、短语或指定范围文本的字号大小。 语法格式:<font size=#1 color=#2>文字</font> #1=1,2,3,4,5,6,7 or +#,-#,缺省时为 3 号字体。 #2=颜色的 16 进制数或英文名称 1.3.4 常用文本标记 4. 段落标记(<P></P>)与换行标记(<br>) <P>是 HTML 格式中特有的段落元素。在原始文件中的<P>,指出在这儿告一段落, 下面的文字另起一段。 另外一个类似的标记元素是<br>。<br>这个标记用来标识一个换行动作,相当于 字处理文件中的按回车键的功能。在 HTML 文件中可以用它来调整行间距。在处 理类似诗歌式的语句时常常用到。 语法格式: <P align=“left/center/right”>文本 文本<br> 5.水平线标记(Hr) 1.3.5 多媒体标记 图像标记:HTML 语言中的基本图像标记:<img>。 <img src=“图像文件的路径” border=“图片边框宽度”> 背景音乐标记:通过这个标记可以嵌入多种格式的音乐文件。 其基本语法为:<BGSOUND src=“音乐文件的路径">

1.3.6 超链接标记 链接标记<A>:<A href=http://www.sina.com.cn/ Target=“_blank”> 链接标记的属性 1.3.4 列表标记 在 HTML 文件中同样可以使用列表的形式来显示数据的显示。 1. 无序列表(Ul) 无序列表用<Ul>开始,每一个列表条目用<Li>引导,最后以</Ul>结束。注意列 表条目不需要结尾标注</Li>。输出时每一列表条目缩进,并且以黑点标示。 1.3.4 列表标记 2.有序列表(Ol) 有序列表与无序列表相比,只是在输出时列表条目用数字标示。默认情况下,有 序列表的列表项是阿拉伯数字, 通过 TYPE 属性也可以修改有序列表的序号类型, 如右表所示。 1.3.4 表格标记 表格标记主要包括如下几种: 1.<TABLE>...</TABLE> 创建一个表格。 2.<TR>...</TR> 定义表格一行的单元格。 3.<TD>...</TD> 定义一个单元格的内容。 4.<TH> 定义表格页眉单元格的内容。 5.<CAPTION> 显示表格的标题。 上述标记中后两个可省略,前三个不可省。 第2章 学习内容 2.1 Dreamweaver MX 2004 工作区 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 中首次启动 Dreamweaver MX 2004 时,会出现一个对话框 让用户选择一种工作区布局。 1.设计者工作区 2.代码编写者工作区 可以从中选择一种工作区布局。如果不熟悉编写代码选择“设计者” 。如果想更 改工作区, 可以使用编辑菜单 “首选参数” 对话框切换到一种不同的工作区。 “编 辑”菜单“首选参数”对话框如下图: 2.1.2 使用 Dreamweaver 窗口和面板 “插入”栏 “属性检查器” :用于查看和更改所选对象或文本的各种属性。 “面板组” 小技巧:如何设置默认的编码方式:选择[编辑][首选参数],打开[首选参数] 对话框 2.2 规划和设置站点结构 选择[站点][管理站点]对话框。选择[新建][站点]进入定义网站的流程。 进入[基本]选项卡,使用网站定义向导,可以轻松完成所有设置。在[站点定义] 对话框的[编辑文件]中输入想要的网站名称。在此范例中,输入网站名称为“巴 黎文化之旅” ,单击[下一步]按钮。 在[站点定义]对话框的[编辑文件,第 2 部分],请选择[否,我不想使用服务器 技术],然后单击[下一步]按钮。 在[站点定义]对话框的[编辑文件,第 3 部分],请选择[编辑我的计算机上的本 地副本,完成后再上传到服务器(推荐)],然后在[您将把文件存储在计算机上 的什么地方]中设置为“e:\paris” (可任意设置文件夹所在位置,但路径中不能 有中文)中,然后单击[下一步]按钮。 在[站点定义]对话框的[共享文件]中,请单击菜单按钮,选择[无]暂不设置远程

服务器的连线,然后单击[下一步]按钮。 最后,在此对话框中,会将前面的设置做一个总结,当确认无误后,请单击[完 成]按钮。 回到 dreamweaver 工作环境中, 将会在右侧[文件]面板组的[文件]面板中,发现 一个“巴黎文化之旅”的新网站。 站点文件的管理 在文件面板中进行管理 站点名称 新建网页:在根目录下建立 default.htm 页(内文首页) 更改文件名 删除文件 新建/更改/删除文件夹 在网站根目录下需要建 images 和 media 文件夹,方便统一放置以后加入站点的 各种媒体文件。 [扩展/折叠] 注意: 新建网页文件和新建子文件夹将出现在当前选中的文件夹下。区分清你是 要在网站根目录下建还是在某个文件夹下建 开启网页在编辑窗口:在文件面板中,可以选取要开启的网页后按[enter]键或 双击鼠标左键即可。 按快速键[F12]在浏览器中预览网页。 在 Dreamweaver 中,可打开现有 HTML 文档或任何动态文档类型,也可以打开非 HTML 文本文件,如 JavaScript 文件、XML 文件、CSS 样式表或用字处理程序或 文本编辑器保存的文本文件。 建立第一个图文混排的 HTML 页 文字的排版(在属性栏设置) 文字可从其他格式的文档中复制过来 文字格式化建议使用文字样式 Dreamweaver 软件第一次使用时,字体列表要自己添加设置 文字样式的建立和修改

对齐与缩进 首行缩进可用全角状态下的空格 换行(非回车)shift+Enter 【插入图像】常用方法: (1)使用插入菜单:在“插入”菜单选“图像” ,弹出“选择图像源文件”对话 框,选中某图像文件,单击确定。 (2)使用插入栏(如下图) :单击插入栏对象按钮,选图像按钮,弹出“选择图 像源文件”对话框。 网页上的多媒体 FLASH 动画 FLASH 文字 FLASH 按钮 插入音频 插入视频 在页面中使用 FLASH 插入 FLASH 动画 光标放在 index.htm 页面表格的第一格内 “插入”菜单/FLASH 或“常用”工具栏/媒体/FLASH 在页面中使用 FLASH 插入 FLASH 文字 (适用于浏览器不支持的特殊字体) 在 index.htm 页面表格的第二格/常用工具栏/媒体/FLASH 文本 修改 FLASH 文字的设置 参数可在属性面板修改 文字本身可直接双击修改 在页面中使用 FLASH FLASH 按钮的使用(DREAMWEAVER 中也可以编辑多种按钮效果) 常用工具栏/媒体/FLASH 按钮 修改 FLASH 按钮的设置 参数可在属性面板修改,文字本身可直接

双击修改 音频与影片的播放 可用音频类型:wav midi ??mp3 wma 浏览器插件相容性较好 插入方法:在 parisinfo.htm 的文字前,常用工具栏/媒体/插件 属性改宽 280 高 45 可全部显示播放器 修改参数表(选中媒体对象后,在属性栏上可设置参数) 音频与影片的播放 推荐视频类型:mov asf wmv 浏览器插件相容性较好 插入方法:在 parismoveie.htm 的适当位置,常用工具栏/媒体/插件 修改参数方法与音频文件相同 插入多种超链接 文字、图像、按钮链接 例:viewpoint.htm 目标页面的设置 图片的替代文字 网页锚点链接 常用工具栏中找到锚点工具,将锚点插入至需要的地方,在属性栏为锚点命名 选中链接处对象,在属性栏用“#锚点名”,如需要回到页首不用定锚点,直接用 “#top” 文件下载链接 邮件链接:mailto:glscnu@163.com?subject=我有话要说 CSS 层叠(级联)样式表 层叠样式表(CSS)是一系列格式规则。使用 CSS 样式可以非常灵活并更好地控 制确切的网页外观,从精确的布局定位到特定的字体和样式。 CSS 可以控制许多仅使用 HTML 无法控制的属性。例如,可以为所选文本指定不 同的字体大小和单位(像素、磅值等),可以调整段落间的距离,超链接文字的颜 色等等。 新建 CSS 样式 CSS 样式规则由两部分组成: 选择器和声明。 选择器是样式名称 (如 head1 或 P) , 而声明则用于定义样式元素。声明由两部分组成:属性(如 font-size )和值

(如 16px ) 。 .head1 { font-size: 16px; font-weight: bold; color: #990000; } CSS 样式表的类别 内部样式表:即将 CSS 语法直接写在文件头内,仅供该网页使用。其他网页要使 用需通过【文件】 【导出】 CSS 样式】命令导出 CSS 文件后方可使用 【

外部样式表:直接将 CSS 语法单独保存成一个 CSS 文件。 其他网页文件需要共享 CSS 文件时: 在属性栏样式中利用管理样式的附加功能添加外部样式表文件。 <link href="head1.css" rel="stylesheet" type="text/css"> 什么是选择器? 即设置 CSS 样式要套用在什么网页元件上的分类。 类样式:自定义 CSS 规则,可以将样式属性应用到任何文本范围。所有类样式 均以句点 (.) 开头。例如:head1.css HTML 标签:重定义特定标签(如 p 或 h1)的格式。 高级:较复杂。 CSS 选择器针对超级链接进行设置的四种状态 a:Active 选中超级链接状态 a:Hover 光标移上超级链接状态 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 模板 表格是目前在网页中进行布局配置的最主要的结构之一. 表格的查看模式 标准视图模式 扩展视图模式 布局视图模式 一般设置为标准查看模式。在“布局”类别的工具栏中有对应的视图模式按钮。 3.1 使用表格显示内容 3.1.1 新建一个简单表格 插入表格的操作步骤如下: (1)在文档窗口的设计视图中,将插入点放在需要表格出现的位置。 (2)执行以下操作之一: ① 在类别为“常用”时,单击插入工具栏中的“表格”按钮。 ② 选择“插入→表格”命令。 3.1 使用表格显示内容 3.1.2 在表格的单元格间移动:用鼠标单击可方便地移光标到表格中的某个单 元格。若要使用键盘从一个单元格移动到另一个单元格,可执行以下操作之一: (1)按 Tab 键移动到下一个单元格。 注意:在表格的最后一个单元格中按 Tab 键会自动为表格添加一行。 (2)按 Shift+Tab 键移动到上一个单元格。

(3)按方向键上下左右移动。 3.1 使用表格显示内容 3.1.3 选择表格元素 表格元素包括单元格、行、列以及整个表格。 (1)选择单元格:移光标到单元格后单击标签选择器中的<td>标签。 (2)选择行:移光标到该行的任一个单元格,然后单击标签选择器中最右边的 <tr>标签。 (3)选择列:让鼠标指向列顶部,变成下向黑色箭头时单击。或右击列顶部的 下向箭头后选“选择列”项。 (4)选择整个表格:移光标到表格内的任一单元格,然后单击标签选择器中最 右边的的<table>标签。 3.1 使用表格显示内容 3.1.4 查看或设置表格格式:在选择了表格元素后,可在属性面板中查看到其 对应的格式设置。这时,可在属性面板中对格式进行修改,以重置表格元素的格 式。 若想让表格套用某个系统预设的格式,则可在“命令”菜单中选择“格式化 表格”项,然后选中某种格式,最后单击“确定”按钮。 当单元格、行/列、表格的格式设置冲突时,单元格格式设置优先,其次为 行/列,最后才为表格。 3.1 使用表格显示内容 3.1.5 修改表格 1、调整表格的大小:拖曳控制点。 2、更改列宽和行高:拖曳框线或在属性面板中输入新的值。 3、添加及删除行和列:选择“修改 ? 表格”级联菜单中的相应命令项。 4、合并/拆分单元格:选择“修改 ? 表格”级联菜单中的相应命令项。 5、嵌套表格:在一个单元格中插入新的表格 6、剪切、复制和粘贴单元格 3.2 在布局视图中对页进行布局:在 Dreamweaver 中,可以有多种方法来对网 页元素进行布局设计。 其中的一种方法, 就是在布局视图下对网页元素进行布局。

在布局视图下,使用表格对元素进行定位,以表格作为基础结构来设计网页。 虽然如此,对表格的处理多数还是在标准视图方式下进行的。 3.2 在布局视图中对页进行布局 3.2.1 关于布局表格和单元格:在布局视图模式下,一个表格仅由布局单元格 所组成。 在“布局”类别的插入工具栏中,单击“布局”按钮可进入布局视图。此后,单 击“布局表格”按钮后在文档中拖曳鼠标可画出一个布局表格,单击“布局单元 格”按钮后在布局表格中拖曳鼠标可插入布局单元格。 3.2 在布局视图中对页进行布局 3.2.2 标准表格与布局表格的区别:在这里,标准表格指的是在标准视图模式 下所见到的表格。一个标准表格由布局单元格和非布局单元格所组成。 布局表格是在布局视图模式下所见到的表格。它仅由布局单元格所组成。 表格的应用--网站相册:将要用到的相片先整理到同一文件夹内(该文件夹可以 不在网站根目录下) 图片扩展名可为 gif jpg jpeg png psd tif tiff 文件名不可为中文,要先编号 先设置相册每列数目,横的放同一行,竖的放同一行;在站点内建立一个 album 文件夹;命令/创建网站相册(需要先打开站点内任意一个 html 文件);指定源文 件夹(原图)/目标文件夹(album);为每张相片建导览页面;完成后,album 文件 夹内的 index.htm 即为相册首页;美化相册 index.htm 版面:设置标题\表格样 式\背景图片

3.3 模板:模板是用来快速构建统一风格的站点的有力工具之一 用表格制作模板的两种常用途径: 方法一 (不推荐) :模板大图切片导出成嵌套表格 HTML 文件,在 Dreamweaver 中整理嵌套表格,制成模板,对网站中其他已有页面套用模板。 优点:速度较快,适合简单的上下型水平导航栏模板 缺点:需要调整复杂的嵌套表格。 方法二(推荐) :根据大图设计的尺寸在 Dreamweaver 中自绘无框线表格作为页

面排版,将大图切片等元素自行添加到各个单元格中,然后制模板,对网站中其 他已有页面套用模板。 优点:方法直观,适合各种形式的模板大图转模板,也可以自由添加各类动画等 多媒体元素。 注意:一旦修改模板文件,则用模板套用的页面都会自动修改。 如果想编辑内文区里的内容,可将模板从页面上分离出来,使用“修改”/”模 板”/”从模板分离” ,否则内文不可编辑。 3.4 使用框架:框架的作用就是把浏览器窗口分割为若干个区域,每个区域可以 显示出各自的网页。 3.3.1 框架和框架集:框架是浏览器窗口中的某一个区域,用它来显示出一个

网页。该网页的内容可以跟浏览器窗口中其它部分所显示的内容无关。 框架集指的是包含有多个框架部分的网页文档。 3.4 使用框架 3.3.2 常用框架 3.4 使用框架 顶部框架:以固定大小的上框架水平分割框架组。 右侧和嵌套的上方框架:含固定大小的右框架和上嵌套框架 上方和嵌套的右侧框架:含固定大小的上框架和右嵌套框架 右侧和嵌套的下方框架:含固定大小的右框架和下嵌套框架 固定上框架,固定下框架:含固定大小的上、下框架 左侧框架:以固定大小的左框架垂直分割框架组 3.4 使用框架 顶部和嵌套的左侧框架:含固定大小的上框架和左嵌套框架 左侧和嵌套的上方框架:含固定大小的左框架和上嵌套框架 底部框架:以固定大小的下框架水平分割框架组。 左侧和嵌套的下方框架:含固定大小的左框架和下嵌套框架 垂直框架:垂直对半分割框架组 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 Fireworks 的批处理操作

4.1 数码图像基础知识 像 素 ( pixel ) 记 录 图 像 的 基 本 单 位 :2592*1944=5038848=500 万 像 : 素;3872*2592=1000 万像素 图像分辨率:每英寸内的像素数量;分辨率越高,图像品质越佳 4.1 数码图像的基本概念 位图与矢量图 位图:由像素点组成,记录每个像素点的颜色值,再拼成整图。常用格式 有.jpg、.gif、.bmp 等;颜色值可有 256,216,232 图 像 大 小 计 算 方 法 : 一 张 800*600 大 小 的 颜 色 值 为 232 数 码 图 片 ; 大 小 800*600*32 bit;数码摄影设备\扫描设备得到的是位图;放大后会产生马赛克 4.1 数码图像的基本概念 矢量图:矢量图由矢量轮廓线和矢量色块组成,文件的大小由图像的复杂程度决

定,与图形的大小无关,并且矢量图可以无限放大而不会模糊。适用于网络标志 或动画。常用格式有.ai、.cdr、.fh.、swf 等。 4.1 数码图像的基本概念 常用颜色模式:RGB 颜色 l 色加法:红+绿+蓝;电视显示器使用的颜色模式 CMYK 颜色 色减法:青 洋红 黄 黑 印刷打印使用的颜色模式

4.1 数码图像的基本概念 数码图像的文件格式 JPEG:JPEG 文件格式是 Joint Photographic Experts Group(联合图像专家组) 的缩写,文件的后缀名是.JPG,这也是最常见的一种文件格式,几乎所有的图像 软件都可以打开它。 TIFF:TIFF 是 Tagged Image File Format(标记图像文件格式)的缩写,文件的 后缀名是.TIF,这是现阶段印刷行业使用最广泛的文件格式。 4.1 数码图像的基本概念 数码图像的文件格式 GIF:GIF 是 Graphics Interchange Fotmat(图像交换格式)的缩写,文件的后 缀名是.GIF。 BMP:BMP 是 Bitmap 的缩写,后缀名是.BMP。 4.2 Fireworks MX 2004 工作环境

使用“工具”面板:“工具”面板分成六个类别:选择、位图、矢量、网页、颜 色和视图。 4.2 Fireworks MX 2004 工作环境

使用“属性”面板:“属性”面板是一个上下文关联面板,它显示当前选区的属 性、当前工具选项或文档属性。默认情况下, “属性”面板停放在工作区的底部。 4.2 Fireworks MX 2004 工作环境

各面板的作用 “混色器”和“样本”面板管理当前文档的调色板。 “层”和“帧”面板组织文档的结构,并且包含用于创建、删除和操作层和帧的 选项。 “帧”面板包括创建动画的选项。

“信息”面板提供所选对象的尺寸和在画布上移动指针时指针的精确坐标。 4.2 Fireworks MX 2004 工作环境

各面板的作用 L “行为”面板管理行为,而行为决定热点和切片对鼠标移动所做出的响应 l“历史记录”面板列出最近使用过的命令,以便能够快速撤消和重复命令。另 外,可以选择多个动作,然后将其作为命令保存和重新使用。 “库”面板包含图形元件、按钮元件和动画元件。可以很容易地将这些元件的实 例如从 “库” 面板拖到文档中。 可以通过仅修改该元件对全部实例进行全局更改。 4.2 Fireworks MX 2004 工作环境

各面板的作用:“优化”面板可以管理用于控制对象大小和文件类型的设置,以 及处理要导出的文件或切片的调色板。 “样式”面板可以储存和重新使用对象的组合特性或者选择一个常用样式。 “url”面板可以创建包含经常使用的 url 的库。 4.2 Fireworks MX 2004 工作环境

各面板的作用:“查找和替换”面板可以在一个或多个文档中查找和替换元素, 如文本、url、字体和颜色等。 “工程记录”面板在使用“查找和替换”或进行批处理时帮助跟踪和控制在多个 文件中所做的更改。 “答案”面板是一个新资源,它能够从 Macromedia 网站上动态下载内容丰富而 且很有帮助的信息。 该面板具有关键字搜索功能,用于从各种来源中查找基于网 页的信息。 4.2 Fireworks MX 2004 工作环境

使用面板 1. 组织面板组和面板 (“窗口”菜单);2. 设置面板选项;3. 使用面 板组或面板“选项”菜单(右上角) 4.2 Fireworks MX 2004 工作环境

关于“快速导出”按钮 :用“快速导出”按钮导出 Fireworks 文档或所选图形: (1)单击“快速导出”按钮并从显示的弹出菜单中 选择一个导出选项。适当的选项将在“导出”对话框中自动设置。如果需要可以 更改选项;(2)选择储存导出文件的位置,键入文件名并单击“保存”按钮。

4.2

Fireworks MX 2004 工作环境

关于“快速导出”按钮:用“快速导出”按钮启动其他 Macromedia 应用程序: 单击“快速导出”按钮并从应用程序子菜单中选择“启动”选项。 4.2 Fireworks MX 2004 工作环境

浏览和查看文档:可以控制文档的缩放比率、视图个数和显示模式。另外,可以 很容易地移动文档视图,这在放大后不再能看到整个画布时很有用。 4.2 Fireworks MX 2004 工作环境

浏览和查看文档 缩放和移动 使用视图模式管理 工作区 显示多个文档视图 (“窗口”) 4.3 更改画布 更改画布属性 更改画布大小 更改画布颜色 调整文档内容 旋转画布 4.3 更改画布:关于重新取样 :Fireworks 中的重新取样与大多数图像编辑应

用程序中的重新取样功能不同。 Fireworks 包含基于像素的位图图像对象和基于 路径的矢量对象。 ⑴在对位图对象重新取样时, 将在图像中添加或去除像素,使图像变得更大或更 小;⑵在对矢量对象重新取样时,由于通过数学方式以更大或更小的尺寸对路径 进行重绘,所以几乎不会有品质损失。 4.3 更改画布 修剪、符合画布、修剪文档:如果文档在画布内容周围有多余的空间,则可以修 剪画布。 “修改”→“画布”→“修剪画布”;也可以通过修剪文档来删除空的 画布空间, “编辑”→“修剪文档”;画布将调整大小以适合定义的区域

4.3 更改画布:如何自由修剪文档 ⑴从“工具”面板中选择“裁剪”工具;⑵画布上拖动边框。调整修剪手柄,直 到边框包围要保留的文档区域为止;⑶边框中双击或者按下 Enter 键以修剪文 档。 画布将调整为定义的区域大小,画布边缘外的对象将被删除。 4.3 更改画布 使用标尺、引导线和网格 使用标尺:标尺能够帮助测量、组织和计划作品的布局。因为 Fireworks 图形是 旨在用于网页, 而网页中的图形以像素为单位进行度量,所以不管创建文档时所 用的度量单位是什么,Fireworks 中的标尺总是以像素为单位进行度量。 选择“视图”→“标尺”命令,可显示和隐藏标尺。 4.3 更改画布:使用标尺、引导线和网格 使用引导线:引导线是从标尺拖到文档画布上的线条。它们可作为帮助放置和对 齐对象的辅助绘制工具。 4.3 更改画布:使用标尺、引导线和网格 使用引导线:创建水平或垂直引导线(单击并从相应的标尺拖动) ;将引导线移 动到特定位置( 双击引导线) ;显示或隐藏引导线(“ 视图” ) 4.3 更改画布:使用标尺、引导线和网格 使用引导线:更改引导线颜色( 视图” →“ 辅助线” →“ 编辑辅助线” ) “ 锁定或解锁全部引导线( 视图”→“ 辅助线”→“ 锁定辅助线” ) “ 删除引导线(将引导线从画布拖走) 4.3 更改画布:使用标尺、引导线和网格 使用网格:显示和隐藏网格( 视图”→“ 网格”→“ 显示网格” ) “ 更改网格颜色和更改网格单元格的大小 “ 视图” “ 网格” “ 编辑网格” ) ( → → ☆绘制基本矢量图形☆ 直线工具 画出线段,用指针工具选中 调整颜色、笔尖描边种类 笔尖大小

边缘柔化 笔刷颜色 描边种类 纹理 ☆绘制基本矢量图形☆ 钢笔工具 绘制线段与多边形 拖拽出曲线 ☆绘制基本矢量图形☆ 矢量路径工具 重绘路径工具(重绘或延伸选取的线段) ☆绘制基本矢量图形☆ 矩形工具 椭圆工具 多边形工具 自动图形工具 ☆绘制基本矢量图形☆ 操作实例:绘制自动图形工具,制作箭头;自动图形工具除有 4 个蓝色控点外还 拥有数个黄色的菱形控点。 4.4 选择和变形对象 选择对象 “指针”工具:当单击对象或者在全部或部分对象周围拖动选区时, “指针”工 具会选择这些对象。 若要通过单击选择对象,可执行下列操作之一: ⑴将“指针”工具移到对象的路径或定界框上,然后单击;⑵单击对象的边缘或 填充;⑶在“层”面板中选择对象。 4.4 选择和变形对象 选择对象: “选择后方对象” 工具; 当处理包含多个对象的图形时, 可以使用 选 “ 择后方对象” 工具选择被其他对象隐藏或遮挡的对象。 4.4 选择和变形对象

选择对象:使用“部分选定”工具:使用“ 部分选定” 工具可以选择、移动或 修改矢量路径上的点或者属于组的对象。 4.4 选择和变形对象:变形和扭曲所选对象和选区: “缩放”放大、缩小、旋转 对象; “倾斜”将对象沿指定轴倾斜; “扭曲” 拖动选择手柄的方向;移动对象 的边或角。这有助于;创建三维外观;翻转对象([修改][变形]) 4.5 关于图层: 什么是图层:多种绘图软件的多对象操作的处理利器. 以“自行车”为例说明对图层的各种操作/ 新建/复制/删除/重命名;调位置;隐藏/锁定?? 4.5 层的操作 层的概念 Fireworks 的文件,标准有三个基本层: ⑴网页层。处于最上面的、最特殊的层,只用来记录热点、切片等相关信息,网 页层是永远共享层。 ⑵普通的层。处于中间的层,还可分为父层和子层,通过“层”面板上的“新建 图层”按钮建立父层,创建对象自动生成子层,删除对象其子层自动消失。父层 可以容纳多个子层,每个 Fireworks 文件又可容纳多个父层。 ⑶画布。处于最下面的层。在“层”面板中无法看到它,但画布层确实存在且在 绘图中不可缺少。 4.5 层的操作 层的操作 扩展、收缩层 隐藏、显示层 处于编辑状态 锁定、解锁层:只能对父层进行锁定操作,锁定的层不能编辑也无法选中。 4.5 层的操作 “层”面板中有两个重要参数 :透明度:此参数原先在“对象”面板中,现在移 到“层”面板中;混合模式:对象的颜色混合模式。 (留待后面章节) 4.5 层的操作

层的特点: 文档中对象只可驻留在层, 可在绘制对象前创建层, 或直接添加父层, 所有层之下是画布,画布本身不是层。 查看层和对象的堆叠顺序可以使用“层”面板,也就是对象在文档中的顺序, Fireworks 中放在最上面的是最近创建的层,并根据层创建的顺序堆叠层,鼠标 拖动可重新排列层及层内对象的顺序 。 4.5 层的操作 层的特点:绘制动画文档时,文档中当前帧的所有层的当前状态会在“层”面板 显示,从“层”面板底部的“帧”菜单中,可以选择以查看其他帧 。 4.5 层的操作 对层的基本操作:通过对“ 层” 面板的操作,可以添加层、删除层、复制层等。 新建层:重命名、复制[ALT]和删除层 调整层的叠放层次 4.5 层的操作 图层中对象的编辑:使用“层”面板可在层内或层间移动对象,此操作将更改画 布上对象出现的顺序, 层上部的对象会出现在层中其他对象的上方。通常所有图 层均打开,图层中的所有对象都显示在文档中,可直接编辑对象,这称为“多层 编辑模式” 。 4.5 层的操作:图层中对象的编辑:Fireworks 还提供“单层编辑模式” ,就是 只能在当前层进行编辑操作, 无法操作其他未选中的图层内容; “单层编辑模式” 激活或禁止的方法是,选择“层”面板中的“选项”→“单层编辑”命令,可激 活“单层编辑模式” ,再次选中命令后取消选中操作,退出“单层编辑模式” 。 4.5 层的操作 图层属性的设置:在“多层编辑模式”Fireworks 允许设置每个图层的属性,可 设置图层的显示和隐藏、图层的锁定和解锁等几个方面。 显示和隐藏层 锁住层 层的共享 层的激活与合并 设置层的不透明度

如何准确选取位图 选择像素(在位图中选取) “选取框”工具 “椭圆选取框”工具 “套索”工具 “多边形套索”工具 “魔术棒”工具 图像操作的基础-准确的选取 魔术棒选取相似色 选背景色,容差 加减选取区 shift+ altDel 去背或反选粘至新建图 美化式选取 羽化

4.6 对于位图的操作 修饰位图: Fireworks 提供了广泛的工具来帮助修饰图像。 可以改变图像的大小, 减弱或突出其焦点,或者将图像的局部复制和“压印”到另一区域。 “橡皮图章”工具、 “模糊”工具、 “涂抹”工具、 “锐化”工具、 “减淡”工具、 “烙印”工具、等等。 4.6 对于位图的操作 修饰位图: “橡皮图章” 用 工具可以把图像一个区域复制或克隆到另一个区域中。 技巧:按[ALT]可重新选取参照点 4.6 对于位图的操作 修饰位图的工具: “替换颜色”工具:修改图像的用色。 4.6 对于位图的操作 修饰位图的工具: “红眼消除”工具:移除闪光灯产生的红眼。 4.6 对于位图的操作:修饰位图的工具: “模糊”工具减弱图像中所选区域的焦 点。 4.6 对于位图的操作:修饰位图的工具: “锐化”工具锐化图像中的区域。 对于 修复扫描问题或聚焦不准的照片很有用

4.6 对于位图的操作:修饰位图的工具: “减淡”工具加亮图像中的部分区域。 4.6 对于位图的操作:修饰位图的工具: “烙印”工具加深图像中的部分区域。 例:加强雪地上树木的阴影效果 4.6 对于位图的操作:修饰位图的工具: “涂抹”工具拾取颜色并在图像中沿拖 动的方向推移该颜色。 例:令主体呈现滑行的效果 4.7 文本的操作 输入文本:通过使用“属性”面板中的“文本”工具和选项,可以在图形中输入 文本并对其进行格式化和编辑。 编辑文本:在文本块内,可以改变文本的所有特性,包括字号、字体、间距、字 顶距以及基线调整等。笔触、填充可造成特殊效果。 4.7 文本的操作:将文本附加到路径:如果希望文本不受矩形文本块的限制, 可以绘制路径并将文本附加到它。文本将顺着路径的形状排列并且保持可编辑 性。在路径上放置文本的操作步骤如下: (1)按住 Shift 键选中文本块和路径; (2)选择“文本”→“附加到路径”命 令。 欲将文本从所选路径分离出来,可以选择“文本”→“从路径分离”命令。 4.8 将文本转化为单独矢量图形处理 需要将文本转化为路径,再取消文本串的组合, 自由调整每个文本的位置和添加 单独的效果 4.9 图像优化与导出 图像的优化 目的:图像瘦身,网页加速 利用优化面板 例:monkey.png GIF 文件的优化 导出格式 颜色多少 抖动 失真 透明效果 可利用预览 4 幅的功能观看比较不同的设置效果 设置如下内容

4.9 图像优化与导出:JEPG 文件的优化 例:Flower.png: JEPG 为有损压缩;效果随品质而降低;平滑可部分弥补品质的损失 4.10 Fireworks 的批处理

“文件”批处理:可成批修改图像的大小\颜色\重命名 极适于网站中大量图片处理的工作:注意:是否要覆盖原文件;保存脚本 4.11 蒙版的应用:蒙版可以隐藏或显示图形对象或图像的某些部分 使用矢量图形对象做为蒙版 粘贴于内部:使用矢量图形对象做为蒙版操作步骤:粘贴于内部 1、打开图像 [指针工具]选取图像,[CTRL]+[X]先剪下图像 2、绘制一个[圆角矩形]:[宽]:300,[高]:225, 3、调整圆角矩形的转角弧度 4、选取矩形,[编辑]\[粘贴于内部] 4.11 蒙版的应用:使用矢量图形对象做为蒙版;粘贴为蒙版 图像套上一层色彩;若蒙版为渐变填充,还可造成图像渐隐 使用矢量图形对象做为蒙版操作步骤:粘贴为蒙版 1、[指针工具]选取图像,[CTRL]+[X]先剪下图像 2、[椭圆工具]:画出一个有颜色填充但没有边线的圆, 3、选取圆,[编辑]\[粘贴为蒙版] 修改/组合为蒙版 此种方法中:作为蒙版的图形中原为白色的区域组合后成为可见区 4.11 蒙版的应用:可使用上页方法将文字做为蒙版 文字是矢量图形蒙版的一种 4.11 蒙版的应用 蒙版的编辑方法 蒙版的选取 蒙版的移动 蒙版外观的修改 删除蒙版[修改]\[蒙版]\[删除]

第5章

Fireworks MX 2004 网页设计应用

5.1 资源面板 重点:元件 5.2 切片、变换图像和热点 5.3 创建按钮和弹出菜单 5.4 模板大图制作技巧与实例 5.1 使用资源面板 5.1.1 使用样式 5.1.2 使用元件 5.1.3 使用 URL 5.1.4 使用形状 5.1.1 使用样式 1. 应用样式 将样式应用到所选对象或文本块: (1)选择对象或文本块; (2)单击“样式”面 板中的某种样式。 5.1.1 使用样式 2 .创建新样式 基于所选对象的属性来创建样式,该样式将显示在“样式”面板中。 (1)创建或选择具有所需笔触、填充、效果或文本属性的矢量对象或文本。 (2)从“样式”面板的“选项”菜单中选择“新建样式” (3)选择希望该样式所具有的属性。 (4)给出样式名称,然后单击“确定”按钮。 5.1.1 使用样式:下列属性可以保存在样式中: (1)填充类型和颜色,包括图案、纹理以及角度、位置和不透明度等矢量渐变 属性; (2)笔触类型和颜色; (3)效果; (4)文本属性,如字体、字号、样式(粗 体、斜体或下划线) 、对齐方式、消除锯齿、自动字距调整、水平缩放、范围微 调以及字顶距等。 5.1.1 使用样式 3. 删除样式: (1)从“样式”面板中选择一个样式; (2)从“样式”面板的“选 项”菜单中选择“删除样式” (或单击“样式”面板中的“删除样式”按钮) 。

5.1.1 使用样式 4.编辑样式:更改样式包含的属性: (1)用“选择”→“取消选择”命令取消选 择画布上的任何对象。 (否则会把该样式应用到选定对象上)(2)单击“样式” ; 面板中的某个样式,从“样式”面板的“选项”菜单中选择“编辑样式” (或直 接双击“样式”面板中的某个样式)(3)选择或取消选择希望应用的属性; ; (4) 单击“确定” 。 5.1.1 使用样式 5.导出和导入样式: 将样式导出以便在其他计算机上导入并使用, 实现样式共享。 导出样式: (1)从“样式”面板中选择一个样式; (2)从“样式”面板的“选项” 菜单中选择 “导出样式” 命令; (3) 输入将包含所保存样式的文档的名称和位置; (4)单击“保存”按钮。 5.1.1 使用样式 导入样式: (1)从“样式”面板的“选项”菜单中选择“导入样式”命令; (2) 选择要导入的样式文档。 5.1.2 使用元件:三种类型的元件:图形、动画和按钮。 创建“元件”存放于“库”中后,就可以很方便地插入“实例。 当对元件进行编辑时,所有与其相关的实例就会自动更改。 5.1.2 使用元件 1.创建元件:方法 1:将图形对象转换为元件: (1)选择对象(五角星)“修改” , →“元件”→“转换为元件” ; (2)输入元件名称,如“星”(3)选择元件类 ; 型: “图形”(4)单击“确定”按钮。 ; 方法 2:新建元件; (1)从“库”面板的“选项”菜单中选择“新建元件”命令; (2)选择元件类型: “图形”“动画”或“按钮” 、 。然后单击“确定”按钮; (3) 使用“工具”面板中的工具创建元件。 5.1.2 使用元件 2.放置实例:将元件从“库”面板拖到画布中,就可将该元件的实例放在当前文 档中。 3.复制元件(1)在“库”面板中选择元件; (2)在“库”面板的“选项”菜单 中选择“复制” 。

4.删除元件 (1)在“库”面板中选择元件。 (2)从“库”面板的“选项”菜单中选择“删除”命令。该元件及其所有实例 都将被删除。 5.1.2 使用元件 5.编辑元件 (1)选择某个元件,从“库”面板的“选项”菜单中选择“编辑元件“命令。 (2)对该元件进行更改,然后关闭窗口。 该元件及其所有实例都将被修改。 5.1.2 使用元件 6. 导入和导出元件 可将元件“库”分别导入到多个文件中,重复使用。 导出元件: (1)从 “选项”菜单中选择“导出元件”命令。 (2)选择要导出的元件,然后单击“导出”按钮。 (3)为该元件文件(*.PNG)输入一个名称,然后单击“保存”按钮。 导入元件: (1)从“选项”菜单中选择“导入元件”命令。 (2)选择元件文件(*.PNG) ,然后单击“打开”按钮。 (3)选择要导入的元件,然后单击“导入” 。 5.1.3 使用形状 从形状面板中选中图形并将其拖动到画布中,即可向画布中添加形状。 5.2 切片、变换图像和热点区 切片可将较大的图像分割为多幅较小的图像,是 Fireworks 中用于创建交互效 果的基本构造块。 切片的主要优点:加快下载速度 适用于大图 例:飞机

便于优化 分别对每个切片设置优化 交互性 使用切片来创建响应鼠标事件的区域,例如交换图像,按钮?? 5.2.1 创建切片的方法

1.创建切片 方法 1:基于所选对象插入矩形切片 用这种方法所创建的切片是一个矩形,它的区域包括所选对象最外面的边缘。 操作步骤: (1)选择某个对象。 (2)选择“编辑”>“插入”>“切片” (或选择快捷菜单中的“插入切片” ) 方法 2:用"切片"工具创建矩形切片: (1)选择"切片"工具;(2)拖动以绘制切 片对象;切片对象出现在“网页层”上,切片引导线出现在文档中。 引导线可设为:不可见 2.创建非矩形切片:当试图将交互性附加到非矩形图像时,Fireworks 允许您使 用“多边形切片”工具绘制任何多边形形状的切片。 (1)选择"多边形切片"工具;(2)单击以放置多边形的矢量点。若要停止使用" 多边形切片"工具,请从"工具"面板中选择另一个工具。移动切片引导线就可以 编辑切片;单击某切片后,按 DEL 键可删除切片。 5.2.3 导出切片:选中某一块切片,在“属性”面板可设置其的超链接等交互效 果。还可以指定在图像正在载入时浏览器中显示的替换文本。图像切片完成后, 可通过 “文件” -导出 将图片导出成为一个 HTML 文件和一系列图形碎片文件。 变换图像是指当指针滑过一个图形时,该图形将触发另一个图形的显示。触发器 是一个网页对象 如:一个切片、热点或按钮。 动画帧的概念 1、在同一位置的交换图像--制作方法 打开哭.png;在帧面板中新建第 2 帧;在第二帧中利用菜单 “文件” /导入/笑.png ; 利用属性面板的 XY 坐标将第 1 帧和第 2 帧中的两个图片对齐位置;回到第 1 帧, 作切片,一定要完全盖住 哭图像;选中切片点右键,选”添加交换图像行为”,在 窗口中设置交换图像为第 2 帧.;在“预览”中才可观看效果 2、创建不同位置的变换图像 当指针滑过或单击一个触发器图像时,在另一个位置中出现一个图像。 右击对象“笑” ,选择“插入切片” 。

创建一个新帧:在新帧中的另一位置导入一个用作目标的图像 “哭” 右击该对象, 。 选择“插入切片”:返回帧 1,将“哭”的行为手柄拖到目标切片“笑”上:从" 交换图像自"弹出菜单中选择帧 2 ,单击"确定" ;预览。 3、 删除变换图像:单击要删除的蓝色行为线;单击"确定"即可删除交换图像行为。 热点也叫热区。可以创建热点,然后为它们指定 URL 链接、弹出菜单、状态栏 消息和替代文本。创建热点的方法有以下两种: 1、选择一个对象,右击,选择“插入热点” 。 2、 选择“热点”工具,拖动以绘制热区。 5.3 创建动画:第一个简单尝试;基于一组图像文件创建动画 选择"文件">"打开":按住 Shift 键并单击以选择多个文件。选择“以动画打开” Fireworks 将每个文件放在一个单独的帧中。在帧面板中可调整这些帧的顺序 和时间。预览后将文档优化为 GIF 动画格式并导出。 注意:若图像文件太大,可以先使用批处理命令调整其大小后再用来制作动画。 5.3 创建动画:动画的基本运动: 1、直线运动:图像由 A 点直线移动至 B 点; 2、旋转:图像原地进行顺时针或逆时针旋转; 3、不透明度渐变:图像的透明度发生变化; 4、缩放:图像的产生放大或缩小的变化。 (1)创建一个动画元件(可从头开始 创建动画元件或将现有的对象转换为动画元件) 。 (2) “修改”→“动画”→“设置” 。 在“动画”设置对话框中设置移动的 角度和方向、缩放、不透明度(淡入或淡出)以及旋转的角度和方向。 (3)使用“帧”面板中的“帧延时”控件设置动画动作的速度。 (4)播放,将文档优化为 GIF 动画并导出。 5.3.3 用补间创建动画 (1)把对象转换为图形元件,在画布中插入实例。 (2)选择画布上同一图形元件的两个或多个实例。 (3)选择“修改”→“元件”→“补间实例”命令。 (4)在“补间实例”对话框中输入要插入到原始帧之间的补间步骤的数目(插 入帧数) ,选择“分散到帧。

如果想让图像做成动画后产生缩放、不透明度渐变、旋转以及其它效果的话,可 在启动“补间实例”之前对这两个实例进行不同程度的缩放、不透明度设置、旋 转、效果设置后,再进行“补间实例”的操作 5.4 创建按钮、导航栏和弹出菜单 5.3.1 创建按钮 按钮是网页的导航元素。按钮制作方法一般有以下两种 1、自制切片并添加动态交互效果 如前例 多瑙河 2、利用按钮元件(按钮元件本身自带切片) 5.4.1 创建单个按钮(元件法) 按钮元件的 4 个状态:释放: 平时鼠标没有经过按钮时所呈现的状态;滑过:鼠标 滑过按钮时的状态;按下:按钮被按下时的状态;按下时滑过:按钮被按下后,鼠 标又经过按钮时所呈现的状态 5.4.1 创建单个按钮(元件法) 方法 1:将已有对象转换为按钮元件 可在画布上导入按钮图片或自己绘制按钮图片。 1.新建画布,导入事先已绘制好的静态按钮图片 Button.png 2.选中按钮,在快捷菜单中选择“转换为元件” ,类型为“按钮” 。 3.在“库”面板的“选项”菜单中选择“编辑元件“命令(或双击该元 件也可) ,进入按钮元件编辑窗口,依次设置按钮的 4 个状态 释放: Button.png 绘制的即为释放状态,无须改动。 滑过:点击“复制弹起时图形” ,取消投影效果,全选,按→和↓键各一次,让 按钮呈现按下去的状态。 按下:点击“复制滑过时图形” ,选取矩形对象,恢复投影效果,颜色:#CC6600, 填充类别:实心;选取文本对象,颜色:白色;全选所有对象,按←和↑键各一 次,让按钮呈现弹起的状态。 按下时滑过: “复制按下时图形” 选取矩形对象, , 取消投影效果, 全选所有对象, 按→和↓键各一次,让按钮呈现按下去的状态 5.4.1 创建单个按钮(元件法) 4.在“活动区域”处调整按钮切片的面积(此处调整面积必须在属性栏长宽度处

设置) ,务必让 4 个状态的按钮都能被切片完全盖住。单击“完成” ,按钮元件创 建完毕。 5.可将按钮元件的实例拖几个放到文档中,在属性栏修改各个按钮的显示文本。 6.单击预览或按 F12 可查看结果。 5.4.1 创建按钮(元件法) 方法 2:使用按钮编辑器,并引用系统提供的按钮元件 1.编辑\插入\新建按钮。 2.单击”导入按钮” ,选择一种喜欢的按钮,单击”导入 (系统已设置好各种按钮状态,可修改或直接使用。 ) 3.单击“完成” ,按钮元件创建完毕。 (若要修改按钮元件,可从“库”面板的“选项”菜单中选择“编辑元件“命令) 4.将按钮元件的实例插入到文档中,修改各个按钮的显示文本。 5.单击预览或按 F12 可查看结果。 5.4.2 创建导航栏:导航栏是指提供到网站不同区域的链接的一组按钮。 打开巴黎原图.png。建“按钮”层:考虑整体布局与按钮的大小,大致估算出按钮 行的起始位置。导入按钮图片,转为元件 “编辑元件 “: 编辑 4 个状态:复制 6 个按钮,将最上面的一个按钮用键盘上的右 箭头按钮移至全图的最右边, 在层面板上全选所有按钮,利用修改-对齐-均分宽 度将其排列整齐。排列后还可再根据情况调整按钮位置和切片大小。 注意:各个按钮切片间一定要相接,允许稍微重叠,但绝不可有漏缝。 修改各个按钮的显示文本。 5.4.2 创建弹出菜单(选修):弹出菜单是指为响应指针滑过触发网页对象 (如切 片或热点)或单击这些对象而显示的菜单。 5.4.2 创建弹出菜单 (选修):弹出菜单可以在制作模板大图时在 Fireworks 中 制作,也可以在 Dreamweaver 中添加。 在 Fireworks 中制作时,在”按钮元件“上做和在”切片按钮“上做方法是不同 的: 按钮上做使用“行为”面板设置弹出菜单;切片上做使用右击快捷菜单,选择设 置弹出菜单;做好后看不到直接效果, 必须按 F12 在浏览器中才能浏览效果;两者

都是在“弹出菜单编辑器”中进行设置: “内容” :设定下拉菜单的文字。在文字空白栏上双击再输入。单击“+”/“-” 可增加/删除一行。 5.4.2 创建弹出菜单(选修) 2.编辑弹出菜单 在快捷菜单中选择“编辑弹出菜单” ,然后在“弹出菜单编辑器”中进行修改。 5.5 网页模板的制作 模板尺寸的规则 照顾小分辨率用户,800*600,最大空间为 780*420 最大宽度不超过 780,本例模板的画布大小为 780*240


更多相关文档:

网页制作复习大纲

网页制作复习提纲详解 暂无评价 31页 1下载券 计算机《网页制作》复习... 暂无...2、常用网页设计和制作的专门工具 Microsoft Frontpage 和 Adobe Dreamweaver 3、...

网页复习提纲(新)

网页复习提纲(新)_电脑基础知识_IT/计算机_专业资料。《网页设计与制作》复习提纲 第 1 章 网页设计与制作基本知识 1、网页的概念 P1 网页是用 HTML 语言语言...

计算机网页复习提纲

计算机网页复习提纲 隐藏>> 《网页设计与制作》复习提纲 第 1 章 网页设计与制作基本知识 1、网页的概念 P1 网页是用 HTML 语言语言编写,通过 WWW 传播,并被 ...

《网页设计》复习大纲

百度文库 专业资料 IT/计算机 计算机软件及应用...《网页设计》复习大纲第 1 章 网页设计概述 1....(1)网站策划:是在制作网站前对网站进行周密的计划,...

网页制作复习提纲大全(修)

《网页制作》复习题 第 1 章 网页制作概况 网页的概念 网页是用 HTML 语言...制作网页时常把本地计算机的文件夹模拟成远程服务器的文件夹,因此本地文 件夹...

计算机网页制作完整资料

计算机网页制作完整资料_计算机软件及应用_IT/计算机_专业资料。第2章 设计统一风格的网站网站一般是先在自己的电脑内设计好,再复制到互联网上。 一个网站包括多个...

大学计算机基础与网页制作 复习要点

大学计算机基础与网页制作 复习要点_管理学_高等教育_教育专区。今日...《大学计算机基础》-网页... 71页 免费 大学计算机基础知识点总... 30页 1...

网页制作复习资料

网页制作复习资料_互联网_IT/计算机_专业资料。网页制作选修课复习一、单选题 1.创建最小的标题的文本标签是【 〖A〗 】 〖B〗 〖C〗 〖D〗 网页制作...

网页复习提纲答案

《网页制作》复习提纲答案第 1 章 网页制作概况 1.网页的概念 网页是用 HTML...制作网页时常把本地计算机的文件夹模拟成远程服务器的文件夹, 因此本地文件夹...

计算机网页制作题9

IT/计算机 计算机软件及应用计​算​机​网​页​制​作​题​9 暂无评价|0人阅读|0次下载|举报文档单选题 1. 下述关于网站综合制作的说法正确的...
更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com