第四章 Fireworks(修改)

第四章 图像处理的基本操作
4.1.2 Fireworks 8的工作界面 的工作界面
Fireworks 8 工作面板
第四章 图像处理的基本操作
4.1.2 Fireworks 8的工作界面 的工作界面
4."属性"面板 当选择对象或选取工具的时候,其相关信息就会在"属性"面板中显 示出来.同时也可以通过修改"属性"面板中的数据或内容来调整图 像的相关属性.例如图像的大小,位置及色彩等等. 5. 其他面板组 面板组是Fireworks中常用的资源面板,也是浮动的控件,能够帮助 用户编辑所选对象的各个方面或文档的元素.Fireworks的组合面板 共有14个,分别为"信息","层","混色器","颜色样本", "样式","URL","库","形状","帧","历史记录", "行为","查找","优化"和"对齐"面板".每个面板即可相 互独立进行排列又可与其它面板组合成一个新面板.但各面板的功能 依然相互独立.点击面板上的名称可展开或折叠该面板. 6. 状态栏 状态栏显示已创建文档的其他相关信息.
1.创建文档
要创建新图像,可以使用"开始页"创建文档,也可以通过选择 【文件】→【新建】菜单命令,打开如下图所示的"新建文档"对 话框.
设置好参数后,单击"确定"按钮,即可创建一个默认名称为"未 命名-1.png"的空白普通图像文档. 第四章 图像处理的基本操作
4.2.1 制作页面图像
2.导入图像
第四章 图像处理的基本操作
【任务4-1-3】 制作按钮
【操作要求】
在"未命名-1.png"文档的左列插入宽度为112像素,高度为28像素的 按钮.按钮类型为4-state Button中的一种,设置文本字体为隶书,粗 体,大小为25.放置位置从上到下依次为(3,20),(3,70)和(3, 120).
第四章 图像处理的基本操作
【任务4-1-2】 绘制页面图像
【操作步骤】
(2)选中文本,在"属性"面板中设置文本的x为18,y为248,宽度 的值为320,高度的值为30,字号为35,设置后的"属性"面板如下图所 示.
第四章 图像处理的基本操作
【任务4-1-2】 绘制页面图像
【操作步骤】
(3)选择"窗口"→"样式"命令,打开"样式"面板,选择样式 23,如下图所示.
第4章 图像处理的基本操作
第四章 图像处理的基本操作
本章教学目的
①了解Fireworks的工作环境 ②掌握Fireworks 中页面图像的制作 ③掌握Fireworks 中页面图像的优化
第四章 图像处理的基本操作
目 录
第一讲 Fireworks概述 第二讲 Fireworks的基本操作
第四章 图像处理的基本操作
第四章 图像处理的基本操作
【任务4-1-4】设置交互图像
【操作步骤】
(1)选择"文件"→"导入"命令,导入D:\素材\第4章\Y4-01\Y401A.gif图片,放置在(350,130)位置,宽度为150像素,高度为150像素, 如下图所示.
第四章 图像处理的基本操作
【任务4-1-4】设置交互图像
第四章 图像处理的基本操作
4.2.1 制作页面图像
3. 创建文本效果
文本在Web图形中占据特殊的地位,常常起到画龙点睛的作用.基 于图形的文本通常用于创建徽标,特殊标题以及其他的装饰性内容, 另外图形化文本也常常用作导航信息.
第四章 图像处理的基本操作
【任务4-1-2】 绘制页面图像
【操作要求】
第四章 图像处理的基本操作
【任务4-1-4】设置交互图像
【操作步骤】
(4)同样的操作方法,在"帧"面板中新增加一帧,导入交互图像Y401C.gif. (5)单击"帧1",回到初始界面,设置交互.选中"专栏"按钮并单 击,在下拉菜单中选择"添加交换图像行为"命令,如图4-19所示.在弹 出的"交换图像"对话框中,选择待交换图像所在的切片,然后在"交换 图像显示自"区域中选择"帧1",如下图所示.
第四章 图像处理的基本操作
4.1.2 Fireworks 8的工作界面 的工作界面
第四章 图像处理的基本操作
4.1.2 Fireworks 8的工作界面 的工作界面
1. 标题栏 和其他程序相同,界面最上部即是蓝色的标题栏,其中显示了应用程 序的名称,最小化和还原之间的切换按钮以及"关闭"按钮. 2. 菜单栏 菜单栏包含"文件","编辑","视图","选择,""修改", "文本,""命令","滤镜,""窗口","帮助"10个菜单项, 几乎所有的功能都可以通过这些菜单来实现. 3. 工具面板 默认状态下,工具面板位于工作界面左侧,其中的工具被编排为6个 类型:选择,位图,矢量,Web,颜色和视图.
参照样图完成页面图像框架.在样图文档的(18,248)处输入文本 "http://www.Fireworks ",样式为"Style23",字号为35,文本 宽度为320,高度为30.
第四章 图像处理的基本操作
【任务4-1-2】 绘制页面图像
【操作步骤】
(1)打开"未命名-1.png"文档,单击工具栏中的文本工具,然后在 画布上单击并输入文本,如下图所示.
4.1.1 Fireworks的启动与关闭 的启动与关闭
1.启动Fireworks的方法 1.启动Fireworks的方法 启动Fireworks
(1)使用【开始】菜单启动:选择【开始】 【程序】→ 【Macromedia】 →【Macromedia Fireworks 8】命令. (2)使用快速启动工具栏启动:在快速启动工具栏中,单击 Macromedia Fireworks 8按钮. (3)使用快捷方式图标启动:在桌面上,双击"Macromedia Fireworks 8"图标.
第四章 图像处理的基本操作
第二讲 Fireworks的基本操作
[教学内容 教学内容] 教学内容
4.2.1 制作页面图像 4.2.2 图像的优化与导出
[教学重点和难点 教学重点和难点] 教学重点和难点
掌握页面图像制作的方面,掌握图像的优化 与导出.
第四章 图像处理的基本操作
4.2.1 制作页面图像
第四章 图像处理的基本操作
【任务4-1-3】 制作按钮
【操作步骤】
(1)选择"窗口"→"库"命令,打开"库"面板,单击 按钮,新建 一个名称为"专栏"的按钮元件,如下图所示.
第四章 图像处理的基本操作
【任务4-1-3】 制作按钮
【操作步骤】
(2)在打开的按钮编辑器里,可以创建和编辑 JavaScript 按钮元件. 按钮编辑器顶部的选项卡对应于4种按钮状态和活动区域.按钮编辑器中 有关每个选项的提示有助于用户决定如何设计所有这4种按钮状态. 通过按钮编辑器的"导入按钮"按钮选择4-state Button中的一种, 然后设置按钮文本"专栏"字体为隶书,粗体,大小为25,如下图所示.
第四章 图像处理的基本操作
4.1.2 Fireworks 8的工作界面 的工作界面
7. 文档编辑区 在文档编辑区上不仅可以绘制矢量图形,也可以直接处理位图图像.
(1)原始:当前是"原始"选项窗,也就是工作区,只有在此窗口中 才能编辑图像文件. (2)预览:在"预览"选项窗中,可以模拟浏览器预览制作好的图像. (3)2幅,4幅:2幅默认是左右分割窗口,左边显示的是原始图像,右 边显示的是经过特定格式优化处理后图像文件的预览.4幅是以十字 形分割窗口,可以显示更多种预览,原始图像位于右上角的位置.
第四章 图像处理的基本操作
【任务4-1-3】 制作按钮
【操作步骤】
(3)用同样的方法制作"教程"和"论坛"按钮,修改3个按钮的宽度为 112像素,高度为28像素,然后把3个按钮依次放置在(3,20),(3,70), (3,120)位置,制作好的页面图像如下图所示.
第四章 图像处理的基本操作
4.2.1 制作页面图像
第四章 图像处理的基本操作
【任务4-1-4】设置交互图像
第四章 图像处理的基本操作
4.2.1 制作页面图像
4. 按钮与特效的使用
在Fireworks中,按钮就是一个包含了按钮所有可能外观的翻转图 片,分别代表了各种使用状态.每一个按钮都有最多4种外观或状态, 每个状态又对应了一种鼠标动作. (1)释放状态:一般状态,是按钮的默认外观,指当指针不在该按钮位 置时显示的状态. (2)滑过状态:在Web浏览器中光标经过此按钮时的显示外观. (3)按下状态:单击按钮时所显示的状态. (4)按下时滑过状态:当光标经过处于"按下"状态时按钮的显示外观. 大部分按钮都至少有两种状态,既释放与滑过状态.由于"滑过状 态"通常用于提示用户单击此按钮时将执行的动作,因此该状态使用 最为频繁.
选择【文件】→【导入】菜单命令,弹出"导入"对话框.利用该 对话框,可以导入PNG,BMP,WMF,TIFF,JPEG和GIF等格式的图像文 件,以及HTML,ASCII文本,RTF文本等格式的文件.
第四章 图像处理的基本操作
【任务4-1-1】 导入图像
【操作要求】
在D:\root\unit4文件夹中新建文件夹,名称为X4-01,启动Fireworks 8,导入D:\素材\第四章\Y4-01\Y4-01.png.
第四章 图像处理的基本操作
本讲小结
4.1.1 Fireworks的启动与关闭 4.1.2 Fireworks 8的工作界面
第四章 图像处理的基本操作
上机作业
1. 2. 3. 4.
【实战训练一】第1步骤:设置文档或导入图像 【实战训练二】第1步骤:设置文档或导入图像 【拓展实战一】第1步骤:设置文档或导入图像 【拓展实战二】第1步骤:设置文档或导入图像
【操作要求】
创建鼠标移动到3个按钮(技巧,教程和论坛)上交互图像的效果,交 互图像宽度为150像素,高度为150像素,在(350,130)的区域中显示. 3个按钮的交互图像从上到下依次与"素材\第四章\Y4-01\Y401A.gif~Y4-01C.gif"图像对应,初始状态显示Y4-01A.gif图像.
【操作步骤】
(1)在D:\root\unit4文件夹中新建文件夹,名称为X4-01. (2)启动Fireworks 8程序,程序会启动"开始页",单击"新建 Fireworks 文件"按钮,弹出"新建文档"对话框,设置好参数后即可创 建一个Fireworks文档. (3)选择"文件"→"导入"命令,通过弹出的"导入"对话框导入D:\ 素材\第4章\Y4-01\Y4-01.png.
【操作步骤】
(2)选中导入的Y4-01A.gif图片并右击,从弹出的快捷菜单中选择 "插入切片"命令,如下图所示.
第四章 图像处理的基本操作
【任务4-1-4】设置交互图像
【操作步骤】
(3)选择"窗口"→"帧"命令,打开"帧"面板,在其中新增加 一帧,并在此帧上引入交互图像Y4-01B.gif,如下图所示.
第一讲 Fireworks概述
[教学内容 教学内容] 教学内容 4.1.1 Fireworks的启动与关闭 4.1.2 Fireworks 8的工作界面
[教学重点和难点 教学重点和难点] 教学重点和难点 了解Fireworks的启动与关闭,掌握 Fireworks 8的工作界面
第四章 图像处理的基本操作
5. 设定交互图像或文本
图像变换技术在网页中经常被用到,即当鼠标移动到某图像或按钮 上时,会触发另一个图形的显示.在Fireworks中,图像变换的制作原 理就是使"帧"面板中某帧中的图形对象与来自任何帧的图像进行交 换,从而达到在网页浏览时产生图形变换的效果.
第四章 图像处理的基本操作
【任务4-1-4】设置交互图像
第四章 图像处理的基本操作
4.1.1 Fireworks的启动与关闭 的启动与关闭
2.退出Fireworks 8的方法 2.退出Fireworks 8的方法 退出
(1)单击标题栏右端的"关闭"按钮 . (2)右击标题栏左端的Macromedia Fireworks 8图标,在弹出的快捷 菜单中选择"关闭"命令. (3)双击标题栏左端的Macromedia Fireworks 8图标. (4)在菜单栏上,选择【文件】→【退出】菜单命令. 按Alt+F4 组合键也可退出Fireworks 8. 在退出Fireworks 8时,如果文件没有保存,会出现下面的提示对话 框.