首 页 | 精品电影 | 音乐天堂 | 在线游戏 | Flash MTV | 三湘书屋 | 幽默笑话 | 三湘图库 | 美女写真 | IT知识库 | QQ贴图 | 加入书签

网页制作网络编程图形图象操作系统冲浪宝典软件教学网络安全认证考试通信技术电子商务业内动态书籍教程原码

最近更新 文章分类 多媒体类 精品软件

本站搜索:
您的位置:三湘时空 -> IT知识库 -> 文章分类 -> Dreamweaver教程 -> 使网页随浏览器伸展  
使网页随浏览器伸展


文章类别:Dreamweaver教程 来源: 作者: 发表日期:2005-10-4 字体:[ ]

小游戏 | 在线影院 | 幽默笑话 | 源码下载 | Flash MTV | 音乐试听 | 书屋 | 美女写真

  过去我们常被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,但现在由于设置了自动伸展列,蓝色的那一列自动放大,填满了整个文档窗口。

上一篇:用Dreamweaver实现漫天花雨效果 下一篇:为你的站点定做颜色
本栏目热门文章
·Ultradev实例教程:2.2 用ODBC连接数据库 2005-10-4
·DreamweaverMX Ultradev探索(4-1) 2005-10-4
·Ultradev实例教程:2.4 UltraDev与各种数据库的连接 2005-10-4
·Ultradev实例教程:2.1 建立一个简单的access数据库 2005-10-4
·Dreamweaver构建Blog全程实录(6)-用户注册的实现 2005-10-4
·Dreamweaver构建Blog全程实录(11)-站内搜索 2005-10-4
·在Dreamweaver中利用MXP插件插入VRML作品 2005-10-4
·Ultradev实例教程:2.3 创建Web站点 2005-10-4
·Dreamweaver构建Blog全程实录(3)-数据库的设计和连接 2005-10-4
·Dreamweaver构建Blog全程实录(1)-BLOG功能简介 2005-10-4
新近更新文章
·自己动手用Dreamweaver制作活动菜单条 2006-6-20
·在Dreamweaver中精细化你的表格外观 2006-6-15
·在Dreamweaver中如何使用Library 2006-6-4
·Dreamweaver MX 2004功能详解 2006-6-4
·Dreamweaver的行为体验 2006-6-4
·Dreamweaver中层的应用技巧 2006-4-30
·用Dreamweaver MX 2004与SQL数据库相连 2006-4-30
·PHP和ASP在Dreamweaver 8中调用IE预览 2006-4-30
·使用Dreamweaver轻松实现交替图像按钮制作 2006-4-23
·细品Dreamweaver MX内建FW技术 2006-4-19
首 页 | 软件发布 | 广告联系 | 下载帮助 | 意见反馈 | 网站地图
  CopyRight? 2002-2004 WWW.SXSKY.NET? All Rights Reserved
三湘时空 站长QQ:82675303 Email: