发新话题
打印

[精彩实例] Fireworks图片分割图解教程

Fireworks图片分割图解教程

 【教程将利用FWMX2004做一个分割图片以及在DW中如何排版的示范,希望能帮到一些对分割图片还存有疑问的人。教程中如有什么不妥之处,请各位指证。
  图片的分割主要用在两个方面,第一是把较大的图像分割成小图,意在减少浏览者下载图片的时间,第二是把图像分割后要在其中的某一部分录入文字,或者是之前做了整页设计现在要分割开来填入具体的内容。对于第一种分割比较简单,而第二种分割除了要考虑第一种分割时将大图化小的要求之外,还要注意分割要填内容的部分并且要保证在网页中输入预想的内容时不会变形。由于第一种包含在第二种之中了,今天我就以第二种分割为例举个例子。
  大家首先看这一幅底稿,这就是要分割的图片,目标是要把这幅图片分割之后在虚线框内能输入文字内容,而且无论文字有多少行、一行有多少字都保持虚线框完整不变形:
520)this.width=520; src=http://www.027538.cn/069/upfiles/20050523/20050523203631_1.gif onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>
  ①在FWMX2004中打开图片,选择工具,将图片分割如下:
520)this.width=520; src=http://www.027538.cn/825/upfiles/20050523/20050523203657_2.jpg onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>
  注意图中的ABCD四个部分,分割时必须将图片的四个角分开,在网页中我们将把ABCD四个部分作为背景图片,以保持虚线框不变形。
  ②分割好之后,就是导出图片了。选择文件>导出,或者导出按钮,弹出导出对话框,选择保存的位置和名称(这里为topic.htm),其它请按图中设置:
520)this.width=520; src=http://www.027538.cn/321/upfiles/20050523/20050523203718_3.jpg onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>
  ③在HTML后面点击选项,常规中选择Dreamweaver
HTML,在表格一项中,分别设置为嵌套表格,无间格符和无。文档特定信息中可以指定图片的命名规则和Alt信息:
520)this.width=520; src=http://www.027538.cn/409/upfiles/20050523/20050523203738_4.jpg onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>
  ④设置完成后确定,再在导出对话框中点击保存。在FW中的工作已经完成了。下面我们进入Dreamweaver,看看怎么利用导出的图片。在DW中,在要插入刚才的图片的表格中点击520)this.width=520; src=http://www.027538.cn/053/upfiles/20050523/20050523203756_5.jpg onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>按钮,在弹出的对话框中浏览选择刚才导出的topic.htm文件,点击确定:
520)this.width=520; src=http://www.027538.cn/103/upfiles/20050523/20050523203823_6.jpg onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>
  ⑤现在先切换到代码视图,按下Ctrl+F,将代码中的 border=undefined
cellpadding=undefined cellspacing=undefined全部替换为 border=0 cellpadding=0
cellspacing=0,这个代码是FWMX2004生成的表格代码,如果不改这里,在网页预览的时候将会产生变形。(在FWMX中都没有出现这种情况,不知道为何2004中会出现,目前为止除了在DW中修改之外我还没有发现在FW2004中的设置方法,如果哪位仁兄发现了还请告诉小弟):
520)this.width=520; src=http://www.027538.cn/147/upfiles/20050523/20050523203849_7.jpg onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>
(如果只是第一种分割,也就是只需要把大图割小的,到这一步已经完成了。)
  ⑥先选择中间作文字背景的图片,记下它的宽和高,这里是283、191:
520)this.width=520; src=http://www.027538.cn/318/upfiles/20050523/20050523203913_8.jpg onload=javascript:if(this.width>520)this.width=520; align=absmiddle border=0>
  点击标签选择器中前面的标签,将属性中的宽和高修改为283、191,这样把这个图片换作背景之后表格也不会变形。然后将这个图片删除并在单元格的背景中添加这个图片的地址:
520)this.width=520; src=http://w

加入论坛VIP,下尽您想要的素材,点击进入!

如果您在做图或者看教程(PHOTOSHOP方面),遇到任何问题请到问题交流区提问,地址:http://www.027538.cn/forum-41-1.html;我们会在第一时间帮助您解决问题,如果在教程后面跟帖,一律不给予解决!~

TOP

re:谢谢楼主指教

提示: 作者被禁止或删除 内容自动屏蔽

TOP

感谢楼主

终于找到了,楼主辛苦!

TOP

说得很详细 感谢楼主

TOP

非常好的学习资料,谢谢分享

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

工信部备案:沪ICP备09005587号 苏州市公安局备案编号:32058302001042

Powered by Discuz Copyright © 2005-2015 www.MissYuan.com All rights reserved.

广东快乐十分赚钱技巧 广东快乐十分玩法-上皇巢网 广东快乐十分q群 广东快乐十分坑 广东快乐十分出号走势图彩乐乐
广东快乐十分今天开奖结果 @广东快乐十分开奖 广东快乐十分助手软件 广东快乐十分有官网吗 彩票广东快乐十分开奖结果查询
广东快乐十分放假 广东快乐十分交流群 广东快乐十分技巧攻略 广东快乐十分智能追号 广东快乐十分包十个号多少钱
广东快乐十分开奖记录走势图解 破解广东快乐十分开奖 广东快乐十分高手群 广东快乐十分开奖查 广东快乐十分20选8走
安徽十一选五开奖查询 吉林11选5助手 梭哈游戏 山西11选5号码定位走势图 乐彩网排列三
大象彩票 甘肃十一选五规则 江苏快三号码 新甘肃十一选五最大遗 篮球彩票
青海11选5杀号算法 快乐12推荐号码技巧 时时乐西餐厅能加盟吗 重庆时时彩手机APP 韩国时时彩助赢计划
北京快三的走势图 免费香港六合彩 河北十一选五任四遗漏 第一足球比分网 黑龙江36选7中奖