使网页随浏览器伸展

Wj泛泛

Wj泛泛

2016-02-19 19:55

下面图老师小编要跟大家分享使网页随浏览器伸展,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

过去我们常被dreamweaver的表格的自动伸缩搞的头痛不已,对Fontpage能够随意的画表格而感到羡慕。但现在在dreamweaver4中,这一切都变的非常的简单。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

dreamweaver4提供了两种视图,布局视图和标准视图。如果你认为你已经能够控制dreamweaver的表格,那么你可以在你熟悉的标准视图中工作,如果你很喜欢Fontpage的画表格功能,那么在布局视图中你可以随心所欲的做到这一点。而且在这个视图中你还能让你的网页某一部份固定,而另一部份自动伸展,这样无论你的浏览器窗口多大,都能使你的网页适合浏览器的窗口,而不发生变形。

如果你用过macromedia公司的另一个产品fireworks,你一定知道fireworks也能生成html文件,但它也总会产生1个像素的gif图片,这个图片是用以填充你表格的空白区域,使你的表格不会变形。现在dreamweaver4也有了这项功能,它能自动生成一个名为spacer的gif图片来填充你的表格,使你的表格不会发生自动伸缩的现象。

实现上面的两个功能,在dreamweaver4中是非常的简单。让我们先建立一个新站点,然后我们用熟悉的表格工具画一个1*3的表格,不要管它的宽度。因为,我们可以让它自动伸展适合浏览器窗口(当然你也可以直接在布局视图中画表格)然后,单击对象面板最底下的布局视图按钮,这时出现一个对话框,你不用担心,这只是简单的介绍布局视图中两个工具的使用等,按ok。我们切换到了布局视图。

现在看我们的表格左上角有一个绿色的layout table标签,它代表着你这个表格。标签中有三个空白部份且每一个都标明了宽度且有一个小三角形。在这个表格中,我希望我的表格最左边的列固定,而整个表格适合浏览器的宽度。在dreamweaver4之前,这是非常困难的。我们能将表格设为100%来使它适合浏览器的宽度,但我们要想要固定某个单元格却相当困难。但是现在你只需要决定表格中哪一部份是你想固定的,哪一部份是你想伸展的就行了。唯一要记住的是,我们只能让一列自动伸展!!。在这里,我决定将我的蓝色表格作为伸展列。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

选择最后一列,单击它上面的三角形按钮,在出现在菜单中选择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,但现在由于设置了自动伸展列,蓝色的那一列自动放大,填满了整个文档窗口。

展开更多 50%)
分享

猜你喜欢

使网页随浏览器伸展

Web开发
使网页随浏览器伸展

浏览器如何使网页收藏时只显示图标

浏览器
浏览器如何使网页收藏时只显示图标

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

使ASP程序跨浏览器

ASP
使ASP程序跨浏览器

IE浏览器脱机浏览网页教程

浏览器
IE浏览器脱机浏览网页教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

火狐浏览器怎么收藏网页 火狐浏览器收藏网页方法

软件教程
火狐浏览器怎么收藏网页  火狐浏览器收藏网页方法

360安全浏览器了解网页浏览模式

浏览器
360安全浏览器了解网页浏览模式

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Dreamweaver8技巧:查找和替换的应用

Dreamweaver8技巧:查找和替换的应用

新手入门:制作网站必须了解的技术 (1)

新手入门:制作网站必须了解的技术 (1)
下拉加载更多内容 ↓