|
: s8 Z4 d3 |% v, G9 ]
如何在Dreamweaver中加入CSS图层" D7 P, D1 T0 B) J) s, u: T+ x6 U2 y
3 x4 K! n7 I) \3 G# S) z$ Z" f1 X
Fireworks能直接导出图片到Cascading Style Sheet(CSS)图层。CSS图层是一个自由浮点结构,可以在任何版本4以上的浏览器中显示。CSS图层中几个值得注意的特性: 1、位置:图层以及它们包含的内容是可以精确放置的,这使得分层远比用传统的HTML方法更容易。 2、深度:图层可以彼此堆叠,它们的深度可以动态地改变。 3、可视性:图层可以根据意愿隐藏或显示。 4、图层可以动态放置,并且可以在屏幕上移动。 这里简要介绍一下这个技术。
: a: K# k g. p: [) U0 y8 r! m/ |! K: f0 e* y1 b
- [1 A2 S5 u( m1、在FW中,打开背景图象,并在layers面板上将其锁定。2、在layers面板上单击新图层NEW LAYER按钮。3、选择insert->image打开一个图片。也可以从一个打开的文件中剪切并粘贴一个对象或图片。4、相对于背景放置图片。5、重复2-4步,为每个对象创建一个新的图层。尽管每个对象在自己的图层中,但看上去它们好象是一个挨一个的。如图所示
* J4 `# |7 x6 I2 ~2 P+ Z; z. x4 k# v5 I# i; M8 c
& B/ f& l( M; B) }& j* M$ E$ a( N0 J- }; V# a
?
Y7 G1 M _. F5 V. e
9 O+ {& B4 u) I& d4 g& c: S- I! A
/ h, A8 s4 D. x1 c _# J6 y9 ]6、当所有图片都正确放置后,选择file->export special->CSS layer,出现对话框。7、选择layer from the files from选项列表,作为fw部件类型导出
4 b. `# g4 B, k
* @$ {# K! D% R* I- V5 b
- ^! S' Q" {0 c% A* G" w7 k4 u& U
% I2 t! h) R. P3 j$ l?4 I* J& k( j {; ?+ S/ D) m: G
7 Z2 T) N( c& U5 C& y
8、Trim lmage选项如果选中trim lmage,FW的图层作为一个单独的图片保存如果没有选中trim image,fw会把背景和当前图层合并为一个图象进行导出。) P1 ]7 s5 J4 V( Z$ H$ m
6 g% p" K$ }% K. N. N- x# p9、在HTML style设为CSS图层。10、在Location选项列表中选择一个选项,以确定HTML文件保存在什么位置:同一目录same Directory,上一级one level up,还是自定义custom。11、完成后单击保存save.
/ D9 C( t5 F" |2 `
9 a0 W W9 ?2 C, [0 a g% u
7 R+ Z& w) o- G5 h; C2 T, c在Dreamweaver打开后的情形,每个图片占单独的一层。CSS图层的深度由FW中图层的顺序决定。& Y2 d7 v5 C0 U# S: n4 ~7 U
1 Y9 `" B$ Q# q' B
; r# J$ A a3 B; i6 p- X/ w
1 i; `; L9 |6 [+ p
[color=red'][1] |
|