邮件订阅
5ucms仿站,Fw与Dw结合:看实例学切片(2)
作者: 来源: 日期:2017/10/26 20:59:30 浏览量:48(滞后) 人气:LOADING...(实时) 【

5ucms仿站,Fw与Dw结合:看实例学切片(2)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.dedecms.com/web-art/pingmianshejiruanjian/FireWorks/20060528/engine_top_left.gif" width="13" height="13"></td>
<td background="engine_top.gif">& n b s p;</td>
<td><img src="http://www.dedecms.com/web-art/pingmianshejiruanjian/FireWorks/20060528/engine_top_right.gif" width="13" height="13"></td>
</tr>
<tr>
<td background="engine_left.gif">& n b s p;</td>
<td><img src="http://www.dedecms.com/web-art/pingmianshejiruanjian/FireWorks/20060528/engin_mid.jpg" width="480" height="99"></td>
<td background="engine_right.gif"> </td>
</tr>
<tr>
<td><img src="http://www.dedecms.com/web-art/pingmianshejiruanjian/FireWorks/20060528/engine_bottom_left.gif" width="13" height="13"></td>
<td background="engine_bottom.gif">& n b s p</td>
<td><img src="http://www.dedecms.com/web-art/pingmianshejiruanjian/FireWorks/20060528/engine_bottom_right.gif" width="13" height="13"></td>
</tr>
</table>
  那些我们只设了背景图而并没插入任何东西的格子里都有一个:& n b s p;用DW画表格如果不插入任何东西就会有这样的一串代码,反映到浏览器上就会是一个空格,因为有了空格,就把表格撑开了,我们只需手动在源代码里把这些东西删掉就行了.
再预览一下,OK了!
  另外,你也会发现,中间那个图可以是任何尺寸的图片,不仅仅是480*99.


无忧站长学院,建站自然无忧www.5ucms.org

本站推荐: 5ucms模板下载 5ucms插件下载 仿站联系Q3876307       [复制给好友] [打印] [关闭] [返回] [顶部]
上一篇:5ucms教程,Fw与Dw结合:看实例学切片(1)
下一篇:5ucms模版,透明立体网格效果制作教程(1)
本站声明:本网站所载文章等内容,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题,请在30日内与本网联系(Email:3876307#qq.com),我们将在第一时间删除内容。若原创内容转载请注明出处。
5ucms仿站,Fw与Dw结合:看实例学切片(2)的关键词:
评论信息
相关分类
本周热门
本月热门
关于我们 - 版权/免责 申明 - 建站服务 - 网站地图 - 稿件投递 - 联系我们 - 5ucms
Copyright © 2008-2015 www.5ucms.org