Fireworks 4功能指南之四
打开Demo_11.png或者继续在你的演示文件中工作 输出到Dreamweaver[*]在本地输出成Dreamweaver HTML文件来完成图象翻转效果之前,再让我们增加一些切图来控制页面如何被切割和优化
[*]打开Web图层的眼睛图标来察看切片和热区
[*]在白色区域上画一个切片到\"The Latest in Adventure Traveheadline\"的右边。这个切片应该会自动和文字标题/罗盘图象的切片吸附在一条线上
[*]当切片被选择时,在Object面板上,选择\"Type\":在弹出菜单中选择\"Text\"
[*]输入一些虚假的大字标题和文字(它将会在随后的DW中被格式化),按下回车键
http://www.blue1000.com/upload/2005_01/050115201770381.gif
[*]在鱼的图象上拖出一个切片
[*]在Optimize面板中,选择Jpeg 100%
http://www.blue1000.com/upload/2005_01/050115201770382.gif
[*]在三个按钮下面拖出三个紧密相连的切片在文字部分(看到现在的右边的文字被按钮分成几个部分)
http://www.blue1000.com/upload/2005_01/050115201770383.gif
[*]在优化面板中,所以没有被使用切片的会自动变成切变并使用缺省的设置。看这些,确信没有任何被选择,然后看你的Optimize面板。这个缺省的设置为Gif,Web Adaptive 128种颜色
[*]让我们准备输出这个页面
[*]选择File菜单下的HTML Setup ·在General标签中
[*]确定在HTML style选项中Dreamweaver被选择
[*]在Table标签中
[*]在\"Space from\"中选择Nested Tables(嵌套表格)
[*]在Empty Cell区域,在弹出菜单中选择\"non-breaking space\"
http://www.blue1000.com/upload/2005_01/050115201770384.gif
[*]在Document Specific标签中:什么都不用改变,只需要显示一下选项
[*]点击OK,保存你的演示文件 往返的表格编辑...... 往返的表格编辑
[*]启动Dreamweaver
[*]在exported HTML文件夹中打开demo.htm ·在中间的表格单元中选择文本,并改变其中的内容,然后格式化文本
[*]接下来,在中心的表格单元格中的按钮上选择大的白色图形
[*]在那里增些一些文字进行替换\"?2000,All rights reserved.\"
http://www.blue1000.com/upload/2005_01/050115201770385.gif
[*]选择整个表格(用文档窗口底部的快速标签选择器)
[*]在属性栏里,注意Fireworks标签,点击Fireworks编辑按钮
http://www.blue1000.com/upload/2005_01/050115201770386.gif
[*]在对话框里选择\"Use Original\"并且在第四个文件夹里点选Demo_12.png
[*]Fireworks打开此文件
[*]双击\"The Latest in Adventure Travel\"将它改变为\"The Best in Adventure Travel\"
http://www.blue1000.com/upload/2005_01/050115201770387.gif
[*]双击\"Great Barrier Reef\"文字
[*]选择大标题下面的文本内容并剪切它
[*]点击文档窗口顶部的\"Done\"按钮
[*]返回DW,你将看到图片被更新了,但被转换成两个单元格的内容并未覆盖
[*]在DW中,在\"Great Barrier Reef\"下面画一个层,然后将文字粘贴进去 在Fireworks中快速优化图像...... 在Fireworks中快速优化图像
[*]打开\"Adventure.htm\"
[*]选择左面的罗盘图案,注意此图片现在是55K(在属性面版)
[*]选择Commands>Optimze Image 在Fireworks中进行图象优化
[*]在优化窗口,改变设置为Gif,Web Adaptive,128色,单击更新
http://www.blue1000.com/upload/2005_01/050115201770388.gif
在Dreamweaver中自动插入Fireworks的HTML代码
[*]打开Fireworks
[*]打开Demo_12.png文件,选择顶部所有的6个按钮的切片。
http://www.blue1000.com/upload/2005_01/050115201770389.gif
[*](选择文件)输出
[*]*勾选\"select slice\"前面的复选框
[*]*选择 Images and HTML
[*]命名为\"nav.htm\" 单击Save
[*]切换到Dreamweaver
[*]打开Adventure.htm页面,拖出一个新层,在Object面板里点击\"Insert Fireworks HTML\",找到Nav.htm文件,则将这个导航按钮放置在这个层里
[*]按F12键预览
http://www.blue1000.com/upload/2005_01/0501152017703810.gif
页:
[1]