Fw与Dw结合:看实例学切片(2)

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

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="engine_top_left.gif" width="13" height="13"></td>

<td background="engine_top.gif">& n b s p;</td>

<td><img src="engine_top_right.gif" width="13" height="13"></td>

</tr>

<tr>

<td background="engine_left.gif">& n b s p;</td>

<td><img src="engin_mid.jpg" width="480" height="99"></td>

<td background="engine_right.gif"> </td>

</tr>

<tr>

<td><img src="engine_bottom_left.gif" width="13" height="13"></td>

<td background="engine_bottom.gif">& n b s p</td>

<td><img src="engine_bottom_right.gif" width="13" height="13"></td>

</tr>

</table>

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

再预览一下,OK了!

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航