论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

使用热区和切割(Hotspots and Slices)(上)

文章类别:Fireworks | 发表日期:2008-9-20 19:30:52

使用热区和切割(Hotspots and Slices)(上)


每个PNG文件都有一个非凡的层—Web Layer,Web Layer就是专门用来记录热区和切割信息的,这些信息包含了HTML语言的特性,因此被称作网络层(Web Layer)。

热区(Hotspots)就是当一张图片包含数个超链接时用于指定哪部分区域指向哪个超链接地址的对象,在标准的HTML语言中用<map>标签表示。

切割(Slices)是Fireworks最先提出来的概念,以前当网络速度不很理想而图片又稍大时,设计师通常把一张大图片分成小图片放在表格中,使得图片的显示速度加快,但是这项工作费时费力,于是Fireworks提供了可视化进行切割图片的工具,大大减少了设计师们重复劳动的工作。

热区和切割最后会被输出成标准的HTML代码,你只要将这些代码插入到页面相应的位置就可以了。我们应该很轻易找到热区和切割在工具栏中的位置,并且看到他们的扩展工具,入图:


我们先来看热区工具,热区工具中包含3个工具,分别用来建立矩形、圆形和不规则外形的热区,就象使用其他绘图工具一样使用他们就可以建立任何外形的热区。


假如这些工具不能满足你对热区外形精确控制的要求,那么我们还有其他的方法。例如我们要建立一个星型的热区,我们可以这样做:首先,在画板上绘制一个预想中的星型,使用多边型工具(Polygon Tool)应该非常轻易做到这一点,然后选择Insert->Hotspot,Fireworks就会根据这个多边形的路径创建一个外形和大小相同的热区(注重:Fireworks是新创建了一个热区对象,而不是转换这个路径,因此原来的多边形仍然存在),完成之后就可以把一开始的那个多边形删除掉了。


假如现在我们用节点工具(Subselection Tool)拖动热区上的某个节点,可以看到热区依然保持着很好的可编辑性!!!

现在我们要为热区添加和超链接有关的HTML特性。打开Object面版(Window->Object),可以看到相关的参数。其中包括链接的URL地址,alt的文字,以及打开链接的方式(Target),在最后的shape菜单里我们还可以将热区在最基本的3种外形之间互相转换。


完成了这些之后就可以用File->Export输出HTML格式的代码了。下面就是输出后的结果,试着用右键单击矩形框的内部就会看到一个星型的外形,同时我还在这个热区上增加了一个OnMouseOver时,在浏览器状态栏内显示文字的Behavior,有爱好的话可以自己试试。

上一篇:使用热区和切割(Hotspots and Slices)<下> 人气:2158
下一篇:创建按钮(Buttons)和导航条(Navigation Bars)<下> 人气:1862
Fireworks视频教程

Fireworks视频教程
Windows视频教程
Windows操作
[文]
WORD教程
Word教程
[文]
Excel教程
Excel教程
[文]
PowerPoint教程
PowerPoint
[文]
Dreamweaver
Dreamweaver
[文]
FIREWORKS
Fireworks
[文]
FLASH教程
Flash教程
[文]
photoshop平面设计
PhotoShop
[文]
CorelDraw
CorelDraw
[文]
C语言教程
C语言教程
[文]
html
Html教程
[文]
DivCss布局
Div+Css布局
[文]
Javascript
Javascript
[文]
ACCESS数据库
ACCESS数据库
[文]
ASP教程
ASP教程
[文]
SQLServer数据库
SQLServer
[文]
ASP.NET教程
ASP.NET教程
[文]
FlashAS
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化: 网页制作开发视频教程: 平面广告设计视频教程 初级程序设计及ASP动态网站开发 Asp.net动态网站开发视频教程 Flash 动画角本编程视频教程
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058