使用fireworks切割图片实验报告

Fireworks实验三［实验目的］1、掌握动态滤镜的应用2、了解GIF动画的制作3、熟悉切片工具的使用［实验内容］题目１、制作凹凸文字效果本题应用“文本”工具、“纯色阴影”特效和“凸起浮雕”特效制作如图所示的字体效果操作，具体步骤如下。

1.打开图像文件“Z:\fireworks实验3\素材\atwz.jpg”。

2.选择工具箱中的“文本”工具，在“属性”面板中将“字体”设置为“华文新魏”，“大小”设置为48，“颜色”设置为白色（#FFFFFF）。

3.在工作区中单击并输入文本：广州医学院。

4.选中文本对象，单击“属性”面板中“滤镜”右边的“+”按钮，在弹出的菜单中选择“阴影和光晕→纯色阴影”选项，如图所示。

5.在弹出的“纯色阴影”对话框中将“角度”设置为20，“距离”设置为3，勾选“纯色”复选框，“颜色”设置为#FF99CC，如图所示。

单击[确定]按钮。

6.选中文本对象，单击“属性”面板中“滤镜”右边的“+”按钮，在弹出的菜单中选择“阴影和光晕→纯色阴影”选项。

7.在弹出的“纯色阴影”对话框中将“角度”设置为236，“距离”设置为4，勾选“纯色”复选框，“颜色”设置为#00CCFF。

单击[确定]按钮。

8.选中文本对象，单击“属性”面板中“滤镜”右边的“+”按钮，在弹出的菜单中选择“斜角和浮雕→凸起浮雕”选项，如图所示。

9.在弹出的效果设定框中，将“宽度”设置为2，如图所示。

10.设置完毕，把文件另存为“Z:\fireworks实验3\sy3-1.png”。

题目2、修改大雁动画本题应用“状态”和“图层”面板、“魔棒”工具，配合网格显示，对大雁动画加以背景和方位移动修改，制作如下图所示的效果，具体操作步骤如下：1．打开“Z:\fireworks实验3\素材\大雁”文件夹下的四张图片：在打开对话框中，按住shift 键同时选中4张图片，勾选对话框下面的“以动画打开”。

2．修改画布大小：宽度为800像素，高度150像素不变。

长春大学2015—2016学年第二学期Web前端开发技术课程实验报告学院：计算机科学技术专业：软件工程班级：软件15401学号：01姓名：任课教师：车娜实验九网页综合设计（一）一、实验目的1.掌握站点的建立，能够建立规范的站点；2.了解切图工具，能够运用切片裁切效果图；3.完成首页面的制作，并能够实现简单的JavaScript特效；二、内容及要求1.建立一个站点，完成网站的初始化设置；2.利用Fireworks工具，对效果图进行裁切；3.完成主页的布局，以及对css公共样式进行初始化设置。

4.完成头部区域、导航菜单、banner焦点图以及通知公告区域的制作；5.使用滑动门技术，实现导航菜单在鼠标进过时显示特殊背景效果。

图9-1效果图三、实验原理1.建立站点：打开Dreamweaver工具，在菜单栏中选择【站点】→【新建站点】选项，在弹出的窗口中输入站点名称。

然后，浏览并选择站点根目录的存储位置，如下图所示。

图9-2建立站点2.切片：打开Fireworks工具，选择工具箱中的切片工具，拖动鼠标左键，根据网页需要在图像上绘制切片区域。

绘制完成后，在菜单栏上选择【文件】→【导出】选项，导出后的图片存储在站点根目录的images文件夹内，切图后的素材如下图所示。

图9-3切片图像3.HTML结构：整个页面大致可以分为头部、导航、banner焦点图、通知公告、主体内容、版权信息等六个模块，具体结构如下图所示。

图9-4HTML结构图4.CSS样式：页面导航和版权信息模块通栏显示，其他模块均宽1000px且居中显示，即页面的版心为1000px。

除了banner部分的文字为微软雅黑和黑体外，其余文字均为宋体。

主体内容中链接文字均显示为#222222、宋体、12px。

这些共同的样式可以提前定义，以减少代码冗余。

5.JavaScript特效在该页面中，分别在头部、banner焦点图和主体内容部分添加了JavaScript 特效。

课程名称:html网页设计实验室名称:软件实验室实验项目:CSS综合实例预习时间:4.2-4.6 实验时间:4.9(软件12班4.11)实验内容及步骤:内容:根据给定的网页效果图,使用firework和dreamweaver做出网页。

步骤:(以下内容在预习报告中填写)1.分析效果图2.使用fireworks中的切片工具把效果图中网页所需的图片切出。

3.通过分析效果图使用表格规划网页的布局。

4.根据效果图内文字及图片等元素编写相应的CSS样式。

5.在网页中添加内容,并进行适当的调整。

步骤:(以下内容在实验报告中填写)1.使用firework打开网页效果图,分析网页的结构,并使用选择工具选取每一部分,获得每一部分的实际尺寸。

2.使用dreamweaver中布局工具条中的布局工作模式,在网页中绘制布局表格,表格尺寸由上一步得到。

3.根据第一步中分析的网页效果图的各个部分中内容的在布局表格中添加相应数量的布局单元格,完成网页的布局。

4.使用firework中的切片工具把网页中的图片提取出来,统一放置到images 文件夹中。

5.根据效果图中各网页元素的样式编写CSS样式,CSS样式内容全部保存在样式表文件中。

6.把编写好的CSS文件应用到相应的布局表格或布局单元格中。

7.在布局单元格中添加内容,在添加过程中经常在浏览器中预览,根据浏览器中的实际效果进行调整。

实验结果:1.使用表格进行网页的布局,在网页完成后若某一部分因内容增加或减少会导致网页变形,会导致对部分或所有的表格进行调整。

2.把CSS样式单独放置在样式表文件中,可以使多个网页进行样式共享,让修改网页样式变得容易。

3.图片放置在单独的文件夹中便于网页中图片的管理以及更换。

实验项目:DIV+CSS网页布局预习时间:5.7-5.11实验时间:5.11(软件12班5.13)实验内容及步骤:内容:使用CSS和DIV完成上中下三栏,中间栏左右两列的网页布局。

Fireworks网页切片应用详解Fireworks网页切片应用详解我们这里所说之切片（Slice）就是将一幅大图像分割为一些小之图像切片，然后在网页中通过没有间距和宽度之表格重新将这些小之图像没有缝隙之拼接起来，成为一幅完整之图像。

这样做可以减低图像之大小，减少网页之下载时间，并且能创造交互之效果，如翻转图像等，还能将图像之一些区域用html 来代替。

Fireworks在网页切片制作方面有很强之优势，今天我们就来仔细看看Fireworks网页切片全攻略。

一、切片在网页制作中之作用在网页上之图片较大之时候，浏览器下载整个图片之话需要花很长之时间，切片之使用使得整个图片分为多个不同之小图片分开下载，这样下载之时间就大大之缩短了，能够节约很多时间。

在目前互联网带宽还受到条件限制之情况下，运用切片来减少网页下载时间而又不影响图片之效果，这不能不说是一个两全其美之办法了。

除了减少下载时间之外，切片也还有其他一些优点：* 制作动态效果：利用切片可以制作出各种交互效果。

例如前面将之按钮之这种状态其实最后导出之文件实质上就是不同状态之切片。

* 优化图像：完整之图像只能使用一种文件格式，应用一种优化方式，而对于作为切片之各幅小图片我们就可以分别对其优化，并根据各幅切片之情况还可以存为不同之文件格式。

这样既能够保证图片质量，有能够使得图片变小。

* 创建链接：切片制作好了之后，就可以对不同之切片制作不同之链接了，而不需要在大之图片上创建热区了。

二、创建切片使用Fireworks工具箱上之切片工具可以为已经制作好之图片创建切片。

如图1所示，切片工具有两类，分别为“矩形切片”工具（Slice tool）和“多边形切片”工具（Polygon Slice tool）。

下面我们分别就这两类热区工具之使用作介绍。

图1 两类切片工具1. 创建矩形切片首先打开图像，选择工具箱上之之切片工具，在图像之适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个切片，如图2所示。

Fireworks 实验一【实验目的】1、掌握Fireworks 文档基本操作2、掌握Fireworks 选区和图像变形【实验内容】题目1、练习旋转画布与网格的使用。

1. 打开“Z:\fireworks 实验1\素材\Bird.jpg ”文件，导出文件为bird1.jpg （执行菜单命令：“文件→导出”）。

2. 将图像Bird.jpg 顺时针旋转90度（选择“修改→变形→顺时针旋转90度”），然后导出文件为bird2.jpg 。

3. 继续将图像Bird.jpg 水平翻转（选择“修改→变形→水平翻转”），将文件导出为bird3.jpg 。

4. 继续将图像Bird.jpg 垂直翻转（选择“修改→变形→垂直翻转”），将文件导出为bird4.jpg 。

5. 再新建一画布，大小为400*400，画布颜白色，分辨率为96。

选择“视图→网格→编辑网格”，在“编辑网格”对话框中作如下设置：6. 选择“视图→网格→显示网格”，在图像中显示网格。

7. 执行菜单命令：“文件→导入”，分别在由4个区域中依次导入bird1.jpg ～bird4.jpg 四个文件。

8. 执行“修改→画布→图像大小”，设置图像大小为宽600像素，高600像素，分辨率72像素/英寸，选择“约束比例”，“图像重新取样” 为双立方。

9.保存图像为“Z:\fireworks实验1\sy1-1.png”。

效果如下题目2、练习如何创建不规则选区。

1.新建一个新图像文档，画布大小为宽700像素，高600像素，分辨率为72像素/英寸，画布为白色，保存文件名为“Z:\fireworks实验1\sy1-2.png”。

2.打开“Z:\fireworks实验1\素材\套索原图.jpg”，点击工具箱的“多边形套索”工具，把左边的铅笔选中，如下图，执行“编辑→复制”（或CTRL+C）复制选区，选择“sy1-2.png”为当前文档，按“编辑→粘贴”（或CTRL+V）将其粘贴到该文档中。

界面切图软件介绍与其他的常用应用软件类似，有标题栏、菜单栏和快捷栏，标题栏用于显示目前正在处理的文件，菜单栏显示当前软件的可操作功能，快捷栏将常用的设置功能以功能图标的方式显示，除此之外，还有每个软件独特的面板组。

（1）Photoshop图像图层处理软件这是选择psd文件之后，Photoshop的显示效果，其中图片区域左侧为工具箱，显示各种常见的图片图层处理工具，右侧最下方为图层面板组（如图2 所示），显示当前所有图层，以及每个图层上增加的特殊效果。

工具箱中我们在此次应用中常用的是最上方的（移动工具），点击此工具可以在图片中点击欲处理图层任意位置，右击后将弹出的快捷菜单，列出与当前点相关图层，从中选择当前位置的图层，如果已知图层名称也可直接在图层面板组中单击选择，选中之后，图层名称项将以蓝色背景显示，表示当前处于可处理状态。

图2 图层面板组选中图层后，即可对该图层进行操作，如可在任意位置拖动鼠标，图像中图层将根据鼠标拖动方向进行移动；或直接按Del键删除；或按图层面板组下方的按钮，从中选择某项功能，对当前图层进行样式设置，即改变图层显示效果，尤其是“颜色叠加”，可以改变当前的图层的显示颜色；如果打开了两个图片，甚至可以将其中一个图片的图层拖动至另一个图片增加图层。

而图片是可以点击的，有此图片，表示此图层或此效果将在图片中显示，单击后消失，表示此图层或此效果将取消。

除了快捷方式Ctrl+“+”和Ctrl+“-”可缩放图片之外，还可以利用右侧面板组上方的导航器面板组（如图3所示），下方的显示控制，或直接输入百分比，或右侧滑块进行调整。

放大显示后，如果当前软件界面中图片可视区域不能盛放当前图片，除了可以通过默认出现在图片旁边的滚动条进行图片编辑区域定位外，也可利用默认出现在导航器面板中图片缩略图的红色框（表示当前可视区域）进行拖动找到指定位置。

图3 导航器面板组除此之外，在此应用中，菜单中常用的功能，除了【文件】菜单的存储命令外，另外一个常用菜单就是【图像】|【调整】|【色相/饱和度】命令（快捷方式Ctrl+“u”），选中某个图层后，可以利用该命令转变图层中当前显示颜色，与样式设置中的颜色叠加不同，颜色叠加是相当于在图层上方蒙了一层同种颜色的布，而该命令是按照某种规律直接改变当前图层中的每种颜色，并且不同颜色的改变结果不同。

总结一学期的时光就在我们的不经意间流逝了，静下心来回想这学期里所发生的事，觉得自己又长大了不少。

今天的9月，初入大学的门槛，新的一切也就是新的起点和新的开始；如今是12月份了，也就意味着大一上学期的生活快要接近尾声了。

再过2个月就是大一下学期了，站在大一上学期的尾巴上，心里感慨是蛮多的。

我觉得在学习方式上也是一个很大的改变。

大学的学习是靠自觉的，除了自己，没人可以帮助你的。

我觉得这样也是挺好的。

学习有了自主权，自己愿意学什么就学什么，想怎么学就怎么学，不想学也没有逼你学。

而且在大学里已经度过了半年，感觉好像没有学习到太多的东西。

大一这半年，我还算是比较积极投身于社团的活动中。

通过这些讲座和活动，我真的受益匪浅。

参加的这些社团，丰富了我的社会经验以及与人交往的能力，使我的业余生活变得丰富起来了。

做fireworks就是多看一些别人的作品，借签一些别人的作品。

最后就是找一些比较适合自己的网站Logo背景素质。

这是我做的第一个网站。

当时对网页制作几乎一无所知。

是直接下载网上整站模板，使用PS修改模板，并且简单地用了下DW。

这是我自己创造的作品，但意义重大。

让我对Html有了初步了解。

这算是自己真正设计的第一个站点了。

现在想起来，做这个网站的时候，连网页的Table+CSS的布局方式都没学会。

很多东西处理上走了不少弯路。

在做这个页面的时候就尝试了不少JS特效，收获颇多，为后来学习提供了一条途径。

通过这次制作网页，我学到了不少东西，而且学到了不少思考问题的方法。

计算机会在以后的学习生活中充当越来越重要的角色，相信我也会学习到更多关于计算机和网络的知识。

这次制作网页收获确实不小。

让我简单的了解了一些编程，同时也学会了一些编程技术。

比如：如何制作表单，如何制作弹出式对话框等。

尽管自己在做这个的技术上还存在许多问题，但是每次遇到问题总是积极的询问老师，尽快的解决自己所遇到的问题。

这次网页的制作，我对计算机有了更深层次得到了解，也有了更浓厚的兴趣。

FIREWORKS案例：案例1：环绕文字效果。

（1）运行Firework cs3 新建一个200×200像素大小的文档，背景色为白色。

（2）在编辑区绘制一个直径为160像素的圆形路径对象，填充色为无，描边设为黑色1像素铅笔描边。

（3）选中路径对象，选择“刀子”工具，水平切割位于水平方向的两个路径节点，如图1所示。

图1（4）切割完毕，再次选中圆形路径对象，就可以发现闭合的圆形路径已经被切割成上下分开的两个弧形了。

在编辑区输入文字，字号为12像素，字体为Arial Black,颜色为红色如图2所示。

同时选定文本对象和上方的弧形对象，选择“文本”|“附加到路径”命令。

选择文本对齐为两端对齐，，如图3所示。

图2 图3 图4图5 图6 图7（5）在编辑区输入文字“清华大学出版社”，颜色为红色，字号为28，字体为“华文彩云”，如图4所示。

同时选择该文本对象和下方的弧形对象，选择“文本”|“附加到路径”命令，对齐方式也设为两端对齐，如图5所示。

（6）选中“清华出版社”文字对象，选择“文本”|“倒转方向”命令，将文本向附加路径方向翻转，如图6所示。

（7）选中“清华大学出版社”文本对象，选择“文本”|“编辑器”命令，在弹出的“文字编辑器”对话框中，设置“基线调整”为-11。

这样就成为最终的效果，如图7所示。

练习：案例2：制作与路径相关效果的文字。

文本对象本身是一个组合对象，不可能直接与路径对象进行组合路径的操作，因此，需要将文本对象转换为路径对象。

（1）运行Firework cs3 新建一个200×200像素大小的文档，背景色为白色。

（2）在编辑区绘制一个矩形对象，并输入一些文字，如图1所示。

（3）选中文本对象，选择“文本”|“转换为路径”命令，即可将文本对象转换成路径对象，但是在“层”面板中，本对象的状态却是组合对象，如图2所示。

（4）选择“修改”|“取消组合”命令，即可取消文本的组合状态，“层”面板中也会显示编辑区所有的操作对象。

Fireworks网页切片应用详解我们这里所说之切片（Slice）就是将一幅大图像分割为一些小之图像切片，然后在网页中通过没有间距和宽度之表格重新将这些小之图像没有缝隙之拼接起来，成为一幅完整之图像。

这样做可以减低图像之大小，减少网页之下载时间，并且能创造交互之效果，如翻转图像等，还能将图像之一些区域用html来代替。

Fireworks在网页切片制作方面有很强之优势，今天我们就来仔细看看Fireworks网页切片全攻略。

一、切片在网页制作中之作用在网页上之图片较大之时候，浏览器下载整个图片之话需要花很长之时间，切片之使用使得整个图片分为多个不同之小图片分开下载，这样下载之时间就大大之缩短了，能够节约很多时间。

在目前互联网带宽还受到条件限制之情况下，运用切片来减少网页下载时间而又不影响图片之效果，这不能不说是一个两全其美之办法了。

除了减少下载时间之外，切片也还有其他一些优点：* 制作动态效果：利用切片可以制作出各种交互效果。

例如前面将之按钮之这种状态其实最后导出之文件实质上就是不同状态之切片。

* 优化图像：完整之图像只能使用一种文件格式，应用一种优化方式，而对于作为切片之各幅小图片我们就可以分别对其优化，并根据各幅切片之情况还可以存为不同之文件格式。

这样既能够保证图片质量，有能够使得图片变小。

* 创建链接：切片制作好了之后，就可以对不同之切片制作不同之链接了，而不需要在大之图片上创建热区了。

二、创建切片使用Fireworks工具箱上之切片工具可以为已经制作好之图片创建切片。

如图1所示，切片工具有两类，分别为“矩形切片”工具（Slice tool）和“多边形切片”工具（Polygon Slice tool）。

下面我们分别就这两类热区工具之使用作介绍。

图1 两类切片工具1. 创建矩形切片首先打开图像，选择工具箱上之之切片工具，在图像之适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个切片，如图2所示。

Fireworks教程1.操作步骤：1.启动Fireworks MX，新建一个文件，文件宽和高都设为200象素，也可以是任意大小，背景为白色。

2.单击“工具”面板“矢量”部分的“线条”工具，并且按住键盘上的“Shift”键，在编辑区任意绘制一条直线。

3.在“工具”面板的“选择”部分中选择“指针”工具，选中这条直线。

4.单击“属性检查器”中的“描边种类”下拉框。

5.选中“笔触选项”。

6。

选择“铅笔”。

7.选择“彩色铅笔”。

8。

在纹理中设置纹理为“0％”。

9。

单击“高级”按钮。

10.在“间距”项输入“200%”，注意这里是手工输入，这个步骤是产生虚线效果的关键。

在网页设计中，也常采用“300％”这个值。

其实到这一步，虚线已经做好了。

11.在“形状”选项卡，如果不选中“正方形”，并且“大小”大于8，刷子尖端就显示为圆形。

制作细虚线时需要选中“正方形”。

刷子尖端也被称作笔触。

12。

“大小”是用来设定刷子尖端的大小。

网页制作中常选择“大小”为1来制作细虚线。

13。

“方向”设置刷子尖端宽度。

正圆或者正方形，选择“100”或者“0”。

14。

“角度”只对正方形有影响。

15。

为了方便以后使用这种自定义的虚线笔触，需要把这些步骤保存为命令。

选中“历史记录”面板中的描边。

16。

点击将“步骤保存为命令”。

17.在“保存命令”对话框中，输入名称。

实例中输入“虚线”。

18。

当需要应用虚线的时候，选择“命令”菜单下的“虚线”即可。

Fireworks MX教程（二）制作环绕文字1. 新建宽和高都是300像素的文件，背景设为白色。

2.点选“工具”面板中的“文本”工具，在工作区输入文本“ ，字体选择“Arial Black”，字号为20像素大小，颜色为黑色。

3.点选“工具”面板“矢量”部分的“椭圆”工具。

4.按住“Shift”键，在工作区画一个圆。

5.在“属性”检查器中输入新的宽度 (w) 或高度 (h) 值，这里都是130。

6.单击“填充颜色框”图标。

网页制作实验总结(一)网页设计实验报告（一）网页制作实验总结(二)《网页设计与制作》实验报告院系名称管理学院专业班级电子商务11级3班学生姓名许世谦学号2011170503082013年 6 月4 日实验一HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力；2、掌握利用HTML语言编写表格的能力；3、掌握利用HTML语言编写表单的能力。

二、实验课时2学时三、实验内容1、表格实验的结果<html><head><title>实验一</title></head> <body><table border align="center" height="80" width="600"><caption><h2>试验1</h2></caption> <tr><td rowspan="2" colspan="2" align="left" bgcolor="red">A <td align="left" >B <td align="center">C <tr><td colspan="2" align=center>D <tr><td rowspan="2" align="right">E<td width="80" rowspan="2" align="right">F <td rowspan="2" align="left">G <td>H <tr> <td>I </table> </body> </html>2、表单实验的结果<html><head><title>试验第一题</title></head> <body><h2 align="center">试验2</h2> <form><table border align="center" height="80" width="600"><tr><td align="center" width="200">姓名<td><input> <tr> <td align="center" width="200">密码<td><input> <tr> <td align="center" width="200">性别<td><input type="radio" name="gender" value="1" checked>女<input type="radio" name="gender" value="2">男<tr><td align="center" width="200">爱好<td><input type="checkbox" name="check1" value="yes">篮球<input type="checkbox" name="check2" value="yes" checked>足球<input type="checkbox" name="check3" value="yes">乒乓球<tr><td align="center" width="200">籍贯<td><selectname="jiguan"><option>开封<option>郑州<option>洛阳</select> <tr><td colspan="2" align="center"><input type="submit" name="submit_button" value="提交"><input type="reset" name="reset_button" value="重置"> </table></form> </body> </html> 四、实验小结通过这次试验，我掌握了许许多多以前不知道的代码细节，让我对网页设计与制作有了更深层次的了解，同时我对编写代码也渐渐的熟悉了。

fireworks剪切图片的方法步骤
扩展：使用Photoshop对图片素材裁剪
Fireworks对图片进行裁剪的步骤1、在软件Photoshop(简称PS)打开一张图片，然后选择PS工具栏的裁剪工具
用Fireworks对图片进行裁剪的步骤图3Fireworks对图片进行裁剪的步骤2、同样的道理用鼠标在图片中按住左键不放，然后拖动鼠标，以此来截取自己想要的图片部分
用Fireworks对图片进行裁剪的步骤图4Fireworks对图片进行裁剪的步骤3、然后在截取的下来的图中用鼠标点击右键，选择裁剪
用Fireworks对图片进行裁剪的步骤图5Fireworks对图片进行裁剪的步骤4、点击裁剪之后，图片就只剩下你想要的部分了，也就完成了图片的裁剪工作，保存图片即可。