设为首页
收藏本站
3D模型素材下载
开启辅助访问
素材下载
展览专用单个3D模型下载
展位展览
在线看展
论坛
展示行业交流平台
关于
本版
文章
帖子
日志
相册
用户
QQ登录
微信登录
忘记密码?
注册
登录
展示网
»
论坛
›
中国展示培训学习/Demonstrate professional
›
展示设计教程,学习/Display design tutorial
›
Fireworks 4 完全教程 使用热区和 ...
返回列表
发布主题
Fireworks 4 完全教程 使用热区和切割(上)
[复制链接]
查看:
721
|
回复:
0
gggds
当前离线
积分
22530
IP卡
狗仔卡
gggds
发表于 2009-12-27 14:03:11
|
显示全部楼层
|
阅读模式
每个PNG文件都有一个特殊的层—Web Layer,Web Layer就是专门用来记录热区和切割信息的,这些信息包含了HTML语言的特性,因此被称作网络层(Web Layer)。
. E! L* O0 P+ Z/ a6 t
热区(Hotspots)就是当一张图片包含数个超链接时用于指定哪部分区域指向哪个超链接地址的对象,在标准的HTML语言中用标签表示。
, W. q/ x- v' J+ G; [' F
切割(Slices)是Fireworks最先提出来的概念,以前当网络速度不很理想而图片又稍大时,设计师通常把一张大图片分成小图片放在表格中,使得图片的显示速度加快,但是这项工作费时费力,于是Fireworks提供了可视化进行切割图片的工具,大大减少了设计师们重复劳动的工作。
' s( n K! Q1 [' d$ q
热区和切割最后会被输出成标准的HTML代码,你只要将这些代码插入到页面相应的位置就可以了。我们应该很容易找到热区和切割在工具栏中的位置,并且看到他们的扩展工具,入图:
# A, X' Y* J& Q @2 A* L) H3 k% q
% i: U5 U3 y7 X; d5 V; Y D
- y x5 J" t: c, h0 q/ |! a8 F' a
6 w9 |1 K; D+ h8 S
我们先来看热区工具,热区工具中包含3个工具,分别用来建立矩形、圆形和不规则形状的热区,就象使用其他绘图工具一样使用他们就可以建立任何形状的热区。
$ v4 I1 H2 ~8 U7 \" n
+ E% P/ d& ]# ]% G5 _* u
" _8 V5 M+ F! b- n S& o
) E2 [+ }$ A6 V2 U0 N
如果这些工具不能满足你对热区形状精确控制的要求,那么我们还有其他的方法。例如我们要建立一个星型的热区,我们可以这样做:首先,在画板上绘制一个预想中的星型,使用多边型工具(Polygon Tool)应该非常容易做到这一点,然后选择Insert->Hotspot,Fireworks就会根据这个多边形的路径创建一个形状和大小相同的热区(注意:Fireworks是新创建了一个热区对象,而不是转换这个路径,因此原来的多边形仍旧存在),完成之后就可以把一开始的那个多边形删除掉了。
! O% [8 `) h: O% ?. K
. p# `6 z8 {/ \& I) e9 B( H' Y* e
# r! h8 D$ W' ^/ S* ^( w0 x
$ c/ u# O/ a6 h3 Y8 h! T
如果现在我们用节点工具(Subselection Tool)拖动热区上的某个节点,可以看到热区依然保持着很好的可编辑性!!!
/ c- C0 n7 _5 c/ C" Z2 `
现在我们要为热区添加和超链接有关的HTML特性。打开Object面版(Window->Object),可以看到相关的参数。其中包括链接的URL地址,alt的文字,以及打开链接的方式(Target),在最后的shape菜单里我们还可以将热区在最基本的3种形状之间互相转换。
5 V( q+ L) ~8 ?1 X7 o
; q8 a' @2 t- S+ Q4 V+ y3 m) Q9 P
8 }# w8 r, }4 m; |4 ^# g' F+ J* m( L
0 b+ }+ q) g* y- b! \3 [9 F3 _
完成了这些之后就可以用File->Export输出HTML格式的代码了。下面就是输出后的结果,试着用右键单击矩形框的内部就会看到一个星型的形状,同时我还在这个热区上增加了一个onMouseOver时,在浏览器状态栏内显示文字的Behavior,有兴趣的话可以自己试试。
回复
使用道具
举报
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册中国展示论坛
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
精彩图文
快速回复
返回顶部
返回列表