本类共有 630 篇文章，今日更新 0 篇
您的位置: 首页 >> 文章首页 >> 图像处理 >> Fireworks教程 >>

Fireworks and Dreamweaver指南介绍

[ 来源：http://www.91now.com/down/ | 作者： | 时间：2007-5-21 16:56:52 | 浏览： 人次 ]

 

版权信息：本文翻译自Macromedia官方文档 and Tutorial
原始文档：fw_dw_tutorial（PDF，1.37M zipped）
所需文件：xtutorial_dwfw4（568k zipped）
全文翻译：spikal

指南介绍

Macromedia ，可视化建立和管理网页及站点的工具软件，Macromedia ，设计和处理网上图形的专业工具，2者均提供了创建专业的丰富图象网站的解决方案。除了他们各自独立的能力，和同时提供了让你将他们综合使用来编辑网页和图形的可能性。

通过以上2者完美的结合你能把的图形和表格放置到中，并使用的工具来修改这些HTML代码。你能够在中直接启动并使用的工具对图片进行深层次的修改，而且不会丢失在中的修改。当你回到中时，页面中的图形就被自动更新了。

这篇向导将向你展示如何结合使用和来准备、放置和编辑一个HTML页面中的图形。本向导可以在一个小时内完成，只要求你的系统中同时安装有4.0和4.0。

你将会学习到的

当你完成向导时，你会创建出一幅带有图象和表格元素的Web页面。沿着这条路，你将会学习到以下的这些典型的工作流程：
  • 为设置外部图形编辑器
  • 在里启动编辑图片
  • 在里启动压缩图片
  • 输出 HTML表格代码到站点
  • 插入 HTML表格代码到页面
  • 在里启动编辑表格

你应该知道的

虽然这篇指南是专为和的初学者所写的，但是你依然应该对这2个软件有所了解。和各自有一份指南介绍，含盖了使用这2个软件的基本技能。

要阅读指南，请查看使用（Using ），要阅读指南，请查看使用（Using ）。你能够分别在这2个软件的帮助文件中找到他们。

找到所需要的文件

用来完成这篇指南所需要的文件请到这里下载。

设置指南网站的结构

现在你将利用下载的文件设置网站结构。

定义一个本地网站

设置指南网站结构的第一步是要定义一个本地网站。本地网站就是一个位于你的硬盘上的文件夹，将在这个文件夹里储存所有网站的文件。你在里创建的每个网站都需要有一个本地网站与之对应。

你需要将xtutorial_dwfw4文件夹定义为你的本地网站

  1. 启动。
  2. 选择Site->New Site。
  3. 在Site Definition对话框里，确定在Category列表中Local Info处于被选中的状态。
  4. 在Site Name栏中填写xtutorial。
  5. 点击Local Root栏右面的文件夹图标。
  6. 在出现的对话框中，找到你放置xtutorial_dwfw4的位置。


  7. 选择Enable Cache来为网站创建一个缓存文件夹。 缓存能够为已经存在的文件做记录，以此来帮助当你移动、重命名、删除文件时以更快的速度更新 链接。
  8. 点击ok关闭Site Definition对话框。

Site窗口会在列表中显示所有本地xtutorial网站中的文件和文件夹。

打开开始文件

现在打开相关的网页文件。

  1. 在的Site窗口，双击start.htm文件的图标来打开它。


    在start.htm文件中有一个使用HTML排版的表格包含了数张从中输出的图象文件。
  2. 选择File->Save As。
  3. 在出现的对话框中将文件保存为my_xtutorial.htm，并放置在xtutorial_dwfw4目录下。

将设置为外部图片编辑器

在体验和跨产品的综合能力之前，你需要确定已经被设置成Dreameaver的第一外部编辑器。

  1. 在中，选择Edit->Preference并且在Category列表中选择File Types/Editors。
    这项设置可以让你指定在编辑某种特定类型的文件时的外部程序。你需要将指定为Web图形的外部编辑器。
  2. 在Extensions列表里，选择.gif文件类型。
    会默认将指定为.gif文件的外部编辑器。如果默认设置改变了，那么你需要自己手工进行设置。
  3. 如果需要，在Editors列表里选择4并且点击Make Primary。
  4. 在Extensions列表里，选择.gif文件类型。如果需要，在Editors列表里选择4并且点击Make Primary。
  5. 点击ok关闭Preferences对话框。

启动编辑一张图片

通过刚才的设置你将可以在使用编辑页面时体会跨产品的综合能力。你将会直接用编辑那张Featured Destination图片并看见它在里自动更新。

在里启动编辑图片

Featured Destination已经使用设计、压缩、输出，并且就放在页面上右面的单元格中。如果你想知道更多关于将文件输入到的知识，请在或的帮助文档中查看一起使用和（Using and Together）。

接下来，你需要启动对Featured Destination的标题字做一些修改。

  1. 在中，单击选中位于Travel Detail页面右面的Featured Destination图片。
  2. 如果属性工具条（Property inspector）没有打开，选择Window->Properties打开它。你需要点击属性工具条右下角的小三角使得扩展部分变得可见。


    属性工具条用一个小图标来表示被选择的图片是来源于。顶部的Src文本框中显示的是目前在页面中的GIF图片的确切的名字，而底部的 Src文本框显示的是源文件（PNG）。 虽然仅包含Featured Destination图片的GIF版本，但是它依然与PNG格式的原始文件有所关联，因为这张图片被保存在创建的站点之中。在下一步你将会看到这种关联是多么的重要。
  3. 点击属性工具条上的Edit按钮来启动4.0。

启动后会自动出现一个特殊的编辑窗口。窗口上方的图标显示你正在编辑Featured Destination图片的PNG版本，并且是从中启动的。

不论何时你从中启动来编辑图片，都会自动寻找当前图片的PNG格式源文件。如果找不到源文件（例如，源文件被存放在创建的网站之外），那么就会显示一条信息询问你是否需要指定一个文件来打开。较好的习惯是，一直将PNG格式的源文件存放在创建的网站之中，那样就能被在启动和编辑图片时找到。

在中编辑图片

现在你要准备用的工具来编辑Featured Destination。你将需要改变图片顶部标题文字的颜色，并为它添加阴影的效果。

  1. 在中，如果需要，选择Window->Tools使工具条显示出来。
  2. 在工具条中，选择Pointer Tool，并且单击选中“Featured Destination”的文字。


  3. 在工具条中，点击填充色叫出调色版，并且把填充色改为深蓝色。


    这样，Featured Destination文字的填充色就改变了，接下来要为文字添加阴影效果。
  4. 确定“Featured Destination”的文字依然处于被选中的状态。如果需要，选择Window->Effect显示出Effect面版。
  5. 在Effect面版的菜单中选择Shadow and Glow->Drop Shadow。按照希望的效果调整Drop Shadow的参数，完成后点击其他地方关闭对话框。
    我们使用以下的设置：


  6. 当你完成后，点击编辑窗口上方的Done按钮将你所做的修改保存并回到中。

PNG格式的源文件已经根据你所做的修改更新了，并且重新输出了GIF格式的图片到中。在中的页面也已经用新的GIF图片更新，你在中做的修改马上能够反映出来。

启动压缩一张图片

除了可以在里启动对图片做编辑，你还可以用对图片的压缩设置做快速修改。当你需要在中启动压缩图片时，会出现一个对话窗口让你一面预览图片一面调整压缩设置。

设置的启动和编辑选项

在你对Web页面做修改之前，你需要检查的启动和编辑选项。这些选项指定了当不能找到PNG源文件时会做一些什么。

  1. 切换到。
  2. 在中，选择Edit->Preference，选中Launch and Edit标签。
    默认的设置是，当从外部程序中编辑（When Editing from External Application）和当从外部程序中压缩（When Optimizing from External Application）都设置为启动时询问（Ask When Launching）。
    你无需担心从外部程序中编辑的设置，这项设置对于你从中启动编辑图片是不起作用的。然而，如果从外部程序中压缩的设置被改变过，你需要重新设置它。
  3. 如果需要，将从外部程序中压缩设置为启动时询问。
    当设置成为启动时询问时，在找不到PNG源文件时会显示一个对话框。这个对话框会让你选择一个PNG文件来作为源文件。
    点击ok来关闭对话框。

启动压缩图片

现在你将要调整网页左面的飞机图片的压缩设置来减小文件尺寸。

  1. 切换到。
  2. 选中Travel Detail页面左面的飞机图片。
  3. 选择Commands->Optimize Image in 。
  4. 在Find Source窗口中点击“No”直接在中编辑JPEG格式的文件，而不是源文件。
    Optimize Images对话窗口会启动并带有图片的预览。注意图片当前的尺寸是40k左右，这个数值就显示在图片预览的上方。
    你将会始终对JPEG格式的图片进行压缩操作，并更深一步的调整图片的质量。
  5. 在Quality中，输入75以减小文件的尺寸。
    新的压缩设置在视觉上对图片所起的作用是非常轻微的。然而，文件的尺寸已经被减小到10k。


  6. 点击Optimize Images对话窗口右下角的的Update按钮完成更新并回到中。

插入一个表格

到目前为止，你已经体验了跨产品的交互，从到再回到。现在你将会进一步体验这种循环，将一个表格放置到中，并在和中编辑它，最后回到中看到已经更新的文件。

你将从在Travel Detail页面中央空白区域放置一个表格开始。

在中输出带表格的图片

首先，你要打开PNG格式的源文件。

  1. 切换到。
  2. 在中，选择File->Open。
  3. 在弹出的对话框中，找到硬盘上存放xtutorial_dwfw4的目录，找到content.png文件，并打开它。


    content.png文件是一张大图片，但是已经被切割为很多个小矩形。如果想要了解更多关于创建切割的信息，请查看帮助（ Help）中的使用热区和切割（Using Hotspots and Slices）。
  4. 点击工具条底部的显示切割（Show Slice）按钮显示出切割的边缘。


    当你输出这张图片后，每个切割都会成为一个HTML表格的单元格。
  5. 选择File->Export。在Export对话框中做如下修改：
    • 将文件保存的目录修改为xtutorial_dwfw4/images下的table目录。
    • 将文件命名为content.htm
    • 在Save As的弹出菜单中，选择HTML and Images。
    • 在HTML弹出菜单中，选择Export HTML File。
    • 在Slices弹出菜单中，选择Export Slices。
    • 选择Include Areas Without Slices。


  6. 点击Save完成输出并保存相关文件。
  7. 在中，关闭content.png文件，但不要保存，同时不要关闭。

将表格插入

现在，你已经将表格输出到网站中，接下来就可以把它放置到Travel Detail页面中了。

  1. 切换到，并确认当前窗口中是Travel Detail页面。
  2. 点击表格中间空白单元格的左上角设置一个插入点。


    你将会通过插入content.html的方法来添加表格。当你添加 HTML代码的时候，所有相关的图片都会包含在内。
  3. 在中，点击Object面版上的插入 HTML按钮（Insert HTML）。


  4. 在出现的对话框中，点击浏览（Browse），找到你硬盘上的xtutorial_dwfw4目录并在它下面的images/table目录中找到content.htm文件。
  5. 点击ok来插入表格。


  6. 选择File->Save保存到Travel Detail页面完成修改。
 

上一篇：用Fireworks做出苹果的晶亮透明

下一篇：如何修改Fireworks弹出菜单的位置

>> 相关文章

分类导航
本类阅读排行本类推荐排行
  1. Fireworks多边形切片的妙用
  2. Fireworks MX之旅:耳目一新的界面
  3. Fireworks制作GIF动画Banner
  4. 用Fireworks做出苹果的晶亮透明
  5. FW MX 2004教程:链接设置(2)
  6. Fireworks网页切片应用详解
  7. Fireworks 制作翡翠字教程
  8. FWMX系列：数据驱动图形向导 [3]
  9. FW MX 2004教程(7):图像输出
  10. 译：FWMX2004移除相片红眼(组图)
  11. 用Fireworks“铸造”古钱币
  12. Fireworks 2004：远古兽皮卷轴
  13. 学用Fireworks中的特效 [4]
  14. 制作一款打字效果的LOGO
  15. 国色天香！Fireworks绘制国画牡丹
  16. Fireworks MX 2004特效字系列教程——水粉文字特效制作
  17. 铬金图形效果制作
  18. 圆形文字的环绕制作
  19. 空间环绕
  20. Fireworks卡通头像：搞怪宝宝(4)
随机推荐文章

广告位

最近更新  |  关于我们  |  广告联系  |  版权声明  |  帮助中心  |  交流论坛
Copyright 2001-2008 91Now.com All Rights Reserved. Email: admin#91now.com. 沪ICP备07015673号