• 丰搜首页
• 文档中心
• 视频中心
• 丰搜贴吧
• 问题集锦
• 更多功能

选择显示字体大小

• 最大
• 较大
• 标准

fireworks图片分割图解教程

　　本教程将利用fwmx2004做一个分割图片以及在dw中如何排版的示范，希望能帮到一些对分割图片还存有疑问的人。教程中如有什么不妥之处，请各位指证。 

          图片的分割主要用在两个方面，第一是把较大的图像分割成小图，意在减少浏览者下载图片的时间，第二是把图像分割后要在其中的某一部分录入文字，或者是之前做了整页设计现在要分割开来填入具体的内容。对于第一种分割比较简单，而第二种分割除了要考虑第一种分割时将大图化小的要求之外，还要注意分割要填内容的部分并且要保证在网页中输入预想的内容时不会变形。由于第一种包含在第二种之中了，今天我就以第二种分割为例举个例子。

大家首先看这一幅底稿，这就是要分割的图片，目标是要把这幅图片分割之后在虚线框内能输入文字内容，而且无论文字有多少行、一行有多少字都保持虚线框完整不变形：



①在fwmx2004中打开图片，选择工具，将图片分割如下：


注意图中的abcd四个部分，分割时必须将图片的四个角分开，在网页中我们将把abcd四个部分作为背景图片，以保持虚线框不变形。

②分割好之后，就是导出图片了。选择“文件”>“导出”，或者按钮，弹出“导出”对话框，选择保存的位置和名称(这里为topic.htm)，其它请按图中设置：



③在html后面点击“选项”，“常规”中选择“dreamweaver html”，在“表格”一项中，分别设置为“嵌套表格，无间格符”和“无”。“文档特定信息”中可以指定图片的命名规则和alt信息：



④设置完成后确定，再在“导出”对话框中点击“保存”。在fw中的工作已经完成了。下面我们进入dreamweaver，看看怎么利用导出的图片。在dw中，在要插入刚才的图片的表格中点击按钮，在弹出的对话框中“浏览”选择刚才导出的topic.htm文件，点击确定：


(图片较大，请拉动滚动条观看)

⑤现在先切换到代码视图，按下ctrl+f，将代码中的 border="undefined" cellpadding="undefined" cellspacing="undefined"全部替换为 border="0" cellpadding="0" cellspacing="0"，这个代码是fwmx2004生成的表格代码，如果不改这里，在网页预览的时候将会产生变形。（在fwmx中都没有出现这种情况，不知道为何2004中会出现，目前为止除了在dw中修改之外我还没有发现在fw2004中的设置方法，如果哪位仁兄发现了还请告诉小弟）：


(图片较大，请拉动滚动条观看)

（如果只是第一种分割，也就是只需要把大图割小的，到这一步已经完成了。）

⑥先选择中间作文字背景的图片，记下它的宽和高，这里是283、191：


点击标签选择器中<img>前面的<td>标签，将属性中的宽和高修改为283、191，这样把这个图片换作背景之后表格也不会变形。然后将这个图片删除并在单元格的背景中添加这个图片的地址：



⑦然后将之前图中abcd四个部分都重复第⑥步的步骤，不过a和d两个地方的图片删除了之后，背景要加在<tr>中。这里有一点要注意，要将表格的右上和右下两个角上的单元格的对齐方式改为右对齐，这样右上角和右下角的图片才会一直靠右。

⑧现在，你可以在中间的单元格中输入文字测试一下，看看是不是表格就算被撑大了虚线框仍然没有变形？


(图片较大，请拉动滚动条观看)

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范