设为首页
收藏本站
3D模型素材下载
开启辅助访问
素材下载
展览专用单个3D模型下载
展位展览
在线看展
论坛
展示行业交流平台
关于
本版
文章
帖子
日志
相册
用户
QQ登录
微信登录
忘记密码?
注册
登录
展示网
»
论坛
›
中国展示培训学习/Demonstrate professional
›
展示设计教程,学习/Display design tutorial
›
Dreamweaver 4 与 Fireworks 4 完美结合(二)
返回列表
发布主题
Dreamweaver 4 与 Fireworks 4 完美结合(二)
[复制链接]
查看:
322
|
回复:
0
gggds
当前离线
积分
22692
IP卡
狗仔卡
gggds
发表于 2009-12-27 13:09:10
|
显示全部楼层
|
阅读模式
在Dreamweaver4中插入Fireworks4图像文件
如果您稍微有一点Dreamweaver知识的话,您就会知道Dreamweaver4的Object(对象)面板的Common(常用)对象集合中有一个Insert Image(插入图像)按钮,可以让您非常方便地插入由Fireworks4生成的GIF、JPEG或是PNG格式的图像。(注:当然也可以插入不是由Fireworks4生成的图像文件,这个按钮的作用是在Dreamweaver中插入图像文件。) 在Dreamweaver4的页面文件中插入Fireworks4的图像文件可以按如下步骤进行操作: 1、 当前的Dreamweaver页面文件中,将光标移动到需要插入图像的位置单击。 2、 使用菜单命令Insert->Image(插入->图像)或是打开Object(对象)面板,点击Common(常用)类型中的Insert Image (插入图像)按钮。 3、 在弹出的查找范围对话框中选择您想插入的图片,对话框右边的Image Preview中您可以对进行图片进行预览。点击Select按钮打开图片。 如果您选择的Fireworks4的图像文件不在当前的Dreamweaver4站点中,Dreamweaver4将弹出信息框,询问是否将文件复制到当前站点下。
在Dreamweaver4中插入Fireworks4的HTML文件
在Dreamweaver4中,Object(对象)面板的Common(常用)对象集合中有一个Fireworks4徽标
- o* L* ]8 C* A1 n3 O" i
. D8 r5 E. s/ {- I4 P3 O; v5 V' ]
点击这个按钮您就可以在Dreamweaver4中插入Fireworks4生成的HTML文件。Fireworks4的HTML文件中包括了与此相关联图像的链接、图像的切片信息及JavaScript脚本语言。该命令可以让您在Dreamweaver4页面中非常方便地加入由Fireworks4生成的图像和网页特效及HTML代码。在Dreamweaver4的页面文件中插入Fireworks4的HTML文件可以按如下步骤进行操作: 1、 在Dreamweaver4中,首先在您的站点中保存当前文件。 2、 将光标放置在你需要插入Fireworks HTML文件的地方。 3、 用菜单命令Insert>Interactive Image>Fireworks HTML(插入->交互式的图像-> Fireworks HTML)或是打开Object(对象)面板,点击Common(常用)类型中的Insert Fireworks HTML (插入Fireworks HTML)按钮。 4、 在弹出的对话框,单击Browse按钮,选择需要插入的Fireworks HTML文件。
/ t7 t- q8 q7 s# E) h
$ d" r2 K7 l" e: U* x' _8 g
对话框的下面有一个Delete File After Insertion复选框,如果选中了这个复选框,当前HTML文件被插入到页面后,源HTML文件将会被放入回收站中。使用该选项前您需要确认是否不再需要使用这个源HTML文件。该选项不会影响到图像文件,仅仅只是删除单独的HTML文件。如果该源HTML文件位于网络驱动器(Network Drive),该文件将会被永久地删除,不会放入回收中,因此请小心使用。
Dreamweaver4中复制和粘贴Fireworks HTML文件
想要在Dreamweaver4中插入Fireworks HTML文件,最快速方便的一个方法就是通过直接复制和粘贴Fireworks HTML文件。这种方法和以前通过在Dreamweaver中插入图像和HTML代码的方法有很大的不同,因为它是通过拷贝粘贴来完成的。 在Dreamweaver4中复制和粘贴Fireworks HTML文件您可以按如下步骤进行操作: 1、 在Fireworks4中,对已经完成准备输出到Dreamweaver4的文件使用菜单命令 Edit -> Copy HTML Code,快捷方式为Ctrl+Alt+C。2、 此时会显示Copy HTML Code(拷贝HTML代码)向导,该向导将会输入您的图像文件和拷贝与此相关链的HTML文件和JavaScript到剪贴板中,您可以把它们粘贴到您的HTML编辑器中。首先您需要选择HTML编辑器,在下拉列表中选择Dreamweaver。点击Next按钮。
& t+ }& P5 J( i9 ^% V5 X2 o: C) g# P5 d
1 W7 g) K) C" T; ]) C% D
7 q% q) X }0 r& ^; B/ b
: H: R3 d: n2 ]" s* o
3、 在切片基础文件名称输入框中输入切片的基础文件名。这个基础文件名将会应用到每个切片中,文件的扩展名是自动生成的。您可以点击HTML Setup按钮对HTML属性进行高级的设定。完成设置后点击Next按钮。如上右图。 4、 点击Browse按钮,在你当前的Web站点中选择输出图像的文件夹,当你的图像被输出后,HTML代码将会被拷贝到剪贴板。点击Finish按钮。 5、 打开Dreamweaver文件,将光标放置到需要插入Fireworks HTML文件的地方,使用菜单命令Edit>
aste。此时所有的与该HTML源文件相关联的图像及JavaScript脚本语言都默认的输入到Dreamweaver文件中,图像的链接自动完成更新。 与此相似的,在Fireworks4中您可以通过Export命令来复制和粘贴Fireworks HTML文件,方法如下: 1、 在Fireworks4中,对已经完成准备输出到Dreamweaver4的文件使用菜单命令File->Export(文件->输出)。 2、 在Export输出对话框中,确定您输出文件和图像的Dreamweaver站点下的相关文件夹中。 3、 在保存类型下拉列表中选择HTML and Images方法。 4、 然后在HTML的下拉列表中选择Copy to Clipboard 方式。 5、 打开Dreamweaver文件,将光标放置到需要插入Fireworks HTML文件的地方,使用菜单命令Edit>
aste。此时所有的与该HTML源文件相关联的图像及JavaScript脚本语言都默认的输入到Dreamweaver文件中,图像的链接自动完成更新。
输出Fireworks图像和HTML文件
通常来说在Fireworks4中输出文件很容易,而且可以输出很多种格式的图像或是网页文件。菜单命令File -> Export(文件->输出)让您可以输出和保存优化后的图像以及HTML文件到您希望的Dreamweaver站点相关文件夹下,这样您就可以在Dreamweaver中打开该网页文件进行必要的编辑了。 在Fireworks4中输入图像和HTML文件您可以按如下步骤进行操作: 1、 在Fireworks4中对将要进行输出的文档文件使用菜单命令File->Export(文件->输出)默认的键盘快捷方式为Ctrl+Shift+R。
5 W* E8 D' a( A# L2 C
1 t$ `! H, H) D' P3 @0 a
2、 在文件名输入框中输入该HTML文件的名字。 3、 在保存类型的下拉列表中选择HTML and Image方式。 4、 在HTML下拉列表中选择Export HTML File方式。 5、 Slices选项里有三个选择,分别为: a) None(无切分):将文档输出为只有一个图片组成的HTML文档,而不管文档中是否包含切片对象。 b) Export Slices(输出切片对象):根据文档中的切片设置输出包含切片的HTML文档。 c) Slice Alone Guide(沿辅助线切分):根据辅助线设置切分图片。 一般情况下我们若将文档输出为HTML文件,Export Slices是较好的选择;Slice Along Guides的作用是根据文档中的辅助线设置,将图片划分成许多小图片,但并不会加入任何行为,而且在使用Slice Along Guide选项前必须先设置辅助线。 6、 在进行输出设置时还有一些复选项选项,也一并介绍: a、Selected Slices Only:仅仅只导出当前被选定的切片。 b、Current Frames Only:仅仅只导出当前帧。 c、Include Areas without Slices:导出时也包含无切片区域。 d、Put Images In Subfolder:将导出的图像文件放在站点中的子文件夹中,点击下面的browse按钮可以选择当前站点中的子文件夹,允许设置HTML文件在上一级目录。7、点击保存按钮输出文件。
回复
使用道具
举报
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册中国展示论坛
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
精彩图文
快速回复
返回顶部
返回列表