当前位置:软件学习 > Fireworks >>

Fireworks 4功能指南之四

打开Demo_11.png或者继续在你的演示文件中工作

  输出到Dreamweaver

  • 在本地输出成Dreamweaver HTML文件来完成图象翻转效果之前,再让我们增加一些切图来控制页面如何被切割和优化
  • 打开Web图层的眼睛图标来察看切片和热区
  • 在白色区域上画一个切片到"The Latest in Adventure Traveheadline"的右边。这个切片应该会自动和文字标题/罗盘图象的切片吸附在一条线上
  • 当切片被选择时,在Object面板上,选择"Type":在弹出菜单中选择"Text"
  • 输入一些虚假的大字标题和文字(它将会在随后的DW中被格式化),按下回车键




  • 在鱼的图象上拖出一个切片
  • 在Optimize面板中,选择Jpeg 100%




  • 在三个按钮下面拖出三个紧密相连的切片在文字部分(看到现在的右边的文字被按钮分成几个部分)




  • 在优化面板中,所以没有被使用切片的会自动变成切变并使用缺省的设置。看这些,确信没有任何被选择,然后看你的Optimize面板。这个缺省的设置为Gif,Web Adaptive 128种颜色
  • 让我们准备输出这个页面
  • 选择File菜单下的HTML Setup ·在General标签中
  • 确定在HTML style选项中Dreamweaver被选择
  • 在Table标签中
  • 在"Space from"中选择Nested Tables(嵌套表格)
  • 在Empty Cell区域,在弹出菜单中选择"non-breaking space"




  • 在Document Specific标签中:什么都不用改变,只需要显示一下选项
  • 点击OK,保存你的演示文件


  •   往返的表格编辑......
      往返的表格编辑

  • 启动Dreamweaver
  • 在exported HTML文件夹中打开demo.htm ·在中间的表格单元中选择文本,并改变其中的内容,然后格式化文本
  • 接下来,在中心的表格单元格中的按钮上选择大的白色图形
  • 在那里增些一些文字进行替换"?2000,All rights reserved."




  • 选择整个表格(用文档窗口底部的快速标签选择器)
  • 在属性栏里,注意Fireworks标签,点击Fireworks编辑按钮




  • 在对话框里选择"Use Original"并且在第四个文件夹里点选Demo_12.png
  • Fireworks打开此文件
  • 双击"The Latest in Adventure Travel"将它改变为"The Best in Adventure Travel"




  • 双击"Great Barrier Reef"文字
  • 选择大标题下面的文本内容并剪切它
  • 点击文档窗口顶部的"Done"按钮
  • 返回DW,你将看到图片被更新了,但被转换成两个单元格的内容并未覆盖
  • 在DW中,在"Great Barrier Reef"下面画一个层,然后将文字粘贴进去



  •   在Fireworks中快速优化图像......
      在Fireworks中快速优化图像

  • 打开"Adventure.htm"
  • 选择左面的罗盘图案,注意此图片现在是55K(在属性面版)
  • 选择Commands>Optimze Image 在Fireworks中进行图象优化
  • 在优化窗口,改变设置为Gif,Web Adaptive,128色,单击更新




  •   在Dreamweaver中自动插入Fireworks的html代码

  • 打开Fireworks
  • 打开Demo_12.png文件,选择顶部所有的6个按钮的切片。




  • (选择文件)输出
  • *勾选"select slice"前面的复选框
  • *选择 Images and HTML
  • 命名为"nav.htm" 单击Save
  • 切换到Dreamweaver
  • 打开Adventure.htm页面,拖出一个新层,在Object面板里点击"Insert Fireworks HTML",找到Nav.htm文件,则将这个导航按钮放置在这个层里
  • 按F12键预览




  •     Fireworks 4功能指南之一......


                               本文来源于www.loadSkill.com
    BR>
    CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
    部份技术文章来自网络,