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

[复制链接]
查看: 261|回复: 0
gggds 发表于 2009-12-27 12:18:56 | 显示全部楼层 |阅读模式
 Dreamweaver部分  1.在DW里插入表格.3行3列,506象素宽(图片的宽度),其余参数为0( G/ a/ D- Z; T6 I2 @3 Z9 }

6 y6 C4 I& H6 x+ h2 n% z& C. [0 g1 B0 K! d1 o7 W
  2.插入图片,在上下左右四个角和中间插入图片,这样,九个格子就有五个是满的了  3.设置背景图
9 [# G; g# c' N% l: b
2 d& L/ `2 Z& `* D4 Z  H' N& j6 E0 \- L' N  H# @2 _) M
  给剩下的四个格子设置背景图.因为表格的背景图是平铺的,所以作为设置作为背景的图片(如图中的engine_top)只需要3*13或13*3的尺寸.
5 Q* |& ?! Y+ ~- E
8 u/ j; Q8 v" R% \7 ~) O; z1 H1 f7 }
  在DW里看来,似乎就这样好了.那按F12预览一下看看:
$ u/ W7 _5 c, @% t
! P, g; E4 @, z. G+ _: g$ ~7 F! y. r3 ~* r0 Y

+ p4 F7 j0 ?# t- X% z2 h# i  为什么在DW里看是好的预览时却是这样呢?  4.查看源代码.  把视图切换到\\\"Code and Design(源码和设计?)\\\"模式,看到表格对应的代码如下:[tr]& n b s p;

9 E- |6 r8 l9 b# K  l: h9 M1 g4 p! f; B% d* Y7 Z. p* P; b
[/td]& n b s p;

2 m+ X6 S1 |, b% X  F. i! R; A. b+ \! ?( P( X
( z$ |. Z1 K( o5 H" {, D5 l- i/ V

% j& E+ ]0 W/ ]8 E: Y' m[/td]
# d) w# W7 \; z" @9 `. f: }, O
$ Q  ]/ n/ b5 X7 N. O: n
[/td]& n b s p

, e: M# D  o% W2 |4 T
, w6 C0 k, C9 e! z
  那些我们只设了背景图而并没插入任何东西的格子里都有一个:& n b s p;用DW画表格如果不插入任何东西就会有这样的一串代码,反映到浏览器上就会是一个空格,因为有了空格,就把表格撑开了,我们只需手动在源代码里把这些东西删掉就行了.再预览一下,OK了!  另外,你也会发现,中间那个图可以是任何尺寸的图片,不仅仅是480*99.

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )