荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: gary (～心静自然凉～), 信区: Homepage
标 题: 使网页随浏览器伸展
发信站: 荔园晨风BBS站 (Sat Jun 2 21:06:19 2001), 转信
http://www.5dmedia.com/5dmedia/web/dreamweaver/tips/20010529/00001035.
asp
使网页随浏览器伸展
（文：5D多媒体 小六）
过去我们常被dreamweaver的表格的自动伸缩搞的头痛不已，对Fontpage能够随意
的画表格而感到羡慕。但现在在dreamweaver4中，这一切都变的非常的简单。
dreamweaver4提供了两种视图，布局视图和标准视图。如果你认为你已经能够控制
dreamweaver的表格，那么你可以在你熟悉的标准视图中工作，如果你很喜欢
Fontpage的画表格功能，那么在布局视图中你可以随心所欲的做到这一点。而且在
这个视图中你还能让你的网页某一部份固定，而另一部份自动伸展，这样无论你的
浏览器窗口多大，都能使你的网页适合浏览器的窗口，而不发生变形。
如果你用过macromedia公司的另一个产品fireworks，你一定知道fireworks也能生
成html文件，但它也总会产生1个像素的gif图片，这个图片是用以填充你表格的空
白区域，使你的表格不会变形。现在dreamweaver4也有了这项功能，它能自动生成
一个名为spacer的gif图片来填充你的表格，使你的表格不会发生自动伸缩的现象
。
实现上面的两个功能，在dreamweaver4中是非常的简单。让我们先建立一个新站点
，然后我们用熟悉的表格工具画一个1*3的表格，不要管它的宽度。因为，我们可
以让它自动伸展适合浏览器窗口（当然你也可以直接在布局视图中画表格）然后，
单击对象面板最底下的布局视图按钮，这时出现一个对话框，你不用担心，这只是
简单的介绍布局视图中两个工具的使用等，按ok。我们切换到了布局视图。
现在看我们的表格左上角有一个绿色的layout table标签，它代表着你这个表格。
标签中有三个空白部份且每一个都标明了宽度且有一个小三角形。在这个表格中，
我希望我的表格最左边的列固定，而整个表格适合浏览器的宽度。在
dreamweaver4之前，这是非常困难的。我们能将表格设为100%来使它适合浏览器的
宽度，但我们要想要固定某个单元格却相当困难。但是现在你只需要决定表格中哪
一部份是你想固定的，哪一部份是你想伸展的就行了。唯一要记住的是，我们只能
让一列自动伸展！！。在这里，我决定将我的蓝色表格作为伸展列。
选择最后一列，单击它上面的三角形按钮，在出现在菜单中选择make column
autostretch。
由于是一个新站点，这时将出现一个对话框,提示你为了能够使行伸展，
dreamweaver需要放置一些spacer图片在另一些行里。下面有三个选项：
Create a spacer image:创建一个spacer图片，这个图片在浏览器窗口是不会显示
出来的，它只是起着固定表格的作用。
Use an existing spacer image:利用存在的spacer图片。
Don't use spacer images for autostretch:不利用spacer图片来做伸展，这样其
它的行将会变形。
对于已经定义的站点，不会出现这个对话框，但你仍可以利用Add Spacer Image增
加spacer图片，现在我们选择第一个。在弹出的窗口中选择spacer图片的存放目录
，好了。我们定义的自动伸展的列已经填充了我们的整个文档窗口，在浏览器中，
它同样会自动伸展以适应整个浏览器的宽度。而我们剩下的两行被spacer图片的填
充并固定，在浏览器中它们也将保持同样的宽度。
你可以看见一个波浪线在这个行上，它代表了伸展的列。这个表格原来做时的宽度
是400，但现在由于设置了自动伸展列，蓝色的那一列自动放大，填满了整个文档
窗口。
--
Ｉ Ｂelieve Ｉ Ｃan ...
_____________________________________________________
欢迎光临我的主页 Ｎｅｔｄｒｅａｍｓ!
Http://netdreams.yeah.net
※ 来源:·荔园晨风BBS站 bbs.szu.edu.cn·[FROM: 192.168.28.85]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店