///pc/img/blank.gif" width="12" height="8">当前位置:///default.htm" class="under">亿度网络 -> ///pc/index.htm" class="under">网页制作教程 -> Fireworks

///pc/homepage/fwjch/img/000.gif" width="100" height="20">
///pc/homepage/fwjch/img/title_00.gif" width="13" height="20">  

///pc/homepage/fwjch/img/002.gif" width="18" height="16" align="absmiddle">新手上路
///pc/homepage/fwjch/img/002.gif" width="18" height="16" align="absmiddle">网页基本功
///pc/homepage/fwjch/img/002.gif" width="18" height="16" align="absmiddle">网页进阶处理
///pc/homepage/fwjch/img/003.gif" width="18" height="16" align="absmiddle">网页强化
///pc/homepage/fwjch/img/009.gif" width="17" height="16" align="absmiddle">设置网页超连接
///pc/homepage/fwjch/img/009.gif" width="17" height="16" align="absmiddle">大图的切割
///pc/homepage/fwjch/img/009.gif" width="17" height="16" align="absmiddle">文件内容设定和转存
///pc/homepage/fwjch/img/009.gif" width="17" height="16" align="absmiddle">与编辑器的紧密结合
///pc/homepage/fwjch/img/002.gif" width="18" height="16" align="absmiddle">网页高手
///pc/homepage/fwjch/img/008.gif" width="18" height="16" align="absmiddle">自动化处理


/pc/bin/msg.pl?file_id=k_Fireworks04 target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

///pc/img/blank.gif" width="1" height="1">

 


第三节:文件内容的设定和转存

  在前两节所介绍的热区链接和大图切割,其最终的目的还是要将它们转存为指定的格式,从而应用于网页中,而在转存前,我们需要设定一下转存的模式。

  选取菜单指令“File\HTML Properties”,打开“HTML Properties”对话框,进行如下设置: (如图1)

///pc/homepage/fwjch/img/fire4022.gif" width="420" height="332" alt="HTML Properties对话框">

图1 HTML Properties对话框

一、 分割选项(Slice Options)

  分割选项栏主要用于设置分割图片在转存时的命名方式,以及分割图片间隙的处理方式等

  1. Auto-Naming(自动命名):用于设定分割图片的命名方式,我们一般选择为“Basename_Row#_Col#”,就是HTML文件名称+所在行+所在列,例如:HTML文件名称为:llt.htm,那么第一行、第一列的分割图片名称就是llt_r1_c1.gif;但是我们必须钩选“Object”面板中的“Auto-Name Slices”,这样才能自动命名。

  2. Table(分割图片的间隙):当图片被分割转存后,Fireworks 3会自动产生一个文件名为Shim的填空图片,我们选择间隙模式为“1-Pixel Transparent Shim”,表示1Pixel宽度的透明图片。

  3. Export Undefined Slice:选中此项后,才会转存所有分割的区域。

  4. Multiple Nav Bar HTML Pages(转存为可变换的图片):我们暂且不用理会。

二、 图片对应(Image Map)

  1. Map Type(对应类型):图片对应的方式可分为Client-side(客户端)和Server-side(服务端)两种,我们一般选择Client-side(客户端),Client-side设定方便,而且执行时反应较快,而Server-side必须配合服务器的支持。

  2. Background URL:用于设定背景图片的链接URL,如:http://www.shanghaigongsi.com.cn/edu/dgkt/index1.htm。

  3. Alternate Image Description:设置图片的说明文字,如:每日诗词。

  为了能够让其它网页编辑器使用,我们需要将它转换成HTML格式文件。 首先选取菜单指令“File\Export”,打开“Export”对话框;然后指定图片保存路径和输入HTML文件名称,在Style(HTML文件类型)选项中选择我们常用的Dreamweaver 3,这样转存后的HTML文件就可以在Dreamweaver 3中被顺利地打开了。 (如图2)

///pc/homepage/fwjch/img/fire4023.gif" width="495" height="383" alt="输出切割图片">

图2 输出切割图片

  单击“保存”按钮,图片就被转存成了一个HTML文件和八个GIF图片,还有一个shim.gif图片,它就是我们在前面提到的分割间隙图片(如图3)

///pc/homepage/fwjch/img/fire4024.gif" width="299" height="175" alt="输出的图片文件">

图3 输出的图片文件

上一节 下一节   

 

/pc/bin/msg.pl?file_id=k_Fireworks04 target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

 

网页制作 网页设计 网站建设 网站设计 网站制作 做网站 做网页