Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Fireworks教程 >> 正文

Fireworks与Dreamweaver结合:看实例学切片

文章来源:互联网

Fireworks部分

  1.在FW里处理好图片.图片大小为506*125


2.切割图片.先不忙着一顿乱切,我们先来看一下规律.
图片四周是色彩简单而且没有什么变化的边框,上下左右都是一些重复的渐变和灰色点.把视图放大来切.先切四个角大小均是13*13


再切上下左右四边.其中上\下两个切片的大小为13*3,左/右两个切片的大小为3*13.



有人也许会奇怪,为什么要这么切成这样,不是13*4,4*13而偏要把大小定得这么死.再仔细瞧瞧__发现了吧,上面和下面的边框每隔3个像素宽就重复一次,而左边和右边的边框则是每隔3个像素高就重复一次.这样一来就可以在DW的表格里把它们作为一格的背景图了(如果还是不大清楚,请暂时照着做,继续往下面看就自然明白了)

最后切中间的大图,把整个图包在里面,大小就是整个图片的大小减去边框所占的大小,宽为506-2*13=480;高为125-2*13=99.


3.设置各个切片的输出格式和质量并命名

这一步最好把FW切换到2-UP模式(左边为原图,右边为输出的预览效果),同时结合Optimize(优化)面板.最终目的是让图片的输出质量最佳,容量最小.有的人也许会说,干脆都设成JPEG格式的,质量为100岂不是又方便又好?如果是有一个无限大的空间给你,这当然无所谓,但是如果是给别人或公司做,别人一定会要图片的所占容量越小越好.并且,如果图片质量没多大区别的话,让图片容量最小又何乐而不为呢!而给每个图片命名,这是本人喜欢的一种方式,这样便于在DW里导入图片时辨认.如果不想自己命名,FW也会自动生成一个名字.

边框颜色少,虽有发光效果形成的阴影渐变,但仍没多大变化,所以选择输出GIF格式的图片,并在Project(属性)面板中给切片命名.(如果渐变很复杂,那还是得输出为JPEG,否则看起来就是一块一块的了)


下图就是我设置的图片大小\名字\格式


4.输出

返回Original(原始?)模式,一一选中切片,右击,选择第一项Expert Selected Slice...(输出所选择热区...)进入导出


Dreamweaver部分

1.在DW里插入表格.3行3列,506象素宽(图片的宽度),其余参数为0


2.插入图片,在上下左右四个角和中间插入图片,这样,九个格子就有五个是满的了

3.设置背景图


给剩下的四个格子设置背景图.因为表格的背景图是平铺的,所以作为设置作为背景的图片(如图中的engine_top)只需要3*13或13*3的尺寸.


在DW里看来,似乎就这样好了.那按F12预览一下看看:


为什么在DW里看是好的预览时却是这样呢?
4.查看源代码.

把视图切换到"Code and Design(源码和设计?)"模式,看到表格对应的代码如下:

<table width="506" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://www.sj00.com/Files/DownLoad/gaoshou/2005-12/16/0512160212538554.gif" width="13" height="13"></td>
    <td background="engine_top.gif">& n b s p;</td>
    <td><img src="http://www.sj00.com/Files/DownLoad/gaoshou/2005-12/16/05121602125327105.gif" width="13" height="13"></td>
  </tr>
  <tr>
    <td background="engine_left.gif">&nbsp;</td>
    <td><img src="http://www.sj00.com/Files/DownLoad/gaoshou/2005-12/16/05121602125361006.jpg" width="480" height="99"></td>
    <td background="engine_right.gif"> </td>
  </tr>
  <tr>
    <td><img src="http://www.sj00.com/Files/DownLoad/gaoshou/2005-12/16/05121602125341905.gif" width="13" height="13"></td>
    <td background="engine_bottom.gif">& n b s p</td>
    <td><img src="http://www.sj00.com/Files/DownLoad/gaoshou/2005-12/16/05121602125352197.gif" width="13" height="13"></td>
  </tr>
</table>

那些我们只设了背景图而并没插入任何东西的格子里都有一个:& n b s p;用DW画表格如果不插入任何东西就会有这样的一串代码,反映到浏览器上就会是一个空格,因为有了空格,就把表格撑开了,我们只需手动在源代码里把这些东西删掉就行了.
再预览一下,OK了!

另外,你也会发现,中间那个图可以是任何尺寸的图片,不仅仅是480*99.   

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有