求创意找品牌创意企业 推荐: 网站建设 北京网站建设 
 
搜索 竞赛 产业 文案 论吧 论坛 酷站 矢量库 图片库 设计网址 作品集> 注册 - 登陆
首 页设计资讯大赛征集平面设计UI设计CG/动画工业设计建筑环境数码影像教程区设计访谈 精品欣赏会员作品集
>> 论坛发布优秀教程申请个人教程专区
推荐:经典素材资源
滚动新闻:[6-10]融于意,形于展!---52design作品集、设计师网上联展!
当前位置: 首页 >> 教程 >> Dreamweaver教程 >>正文
用 Dreamweaver 4 制作的网页随浏览器伸展
资讯/教程/作品在线投稿  - 进入素材基地 - 论坛讨论 - 查看更多相关内容
时 间:2007-8-20 17:08:55   作者:   来 源:   浏览:
    过去我们常被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,但现在由于设置了自动伸展列,蓝色的那一列自动放大,填满了整个文档窗口。
本文链接:


52design素材资源库52design图片库52design酷站营

我爱设计网www.52design.com
(在线编辑:morion) 】【打印】【关闭】【设计论坛】【设计师作品集
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站地址,且不准打上各自站点的水印。

经典设计欣赏 设计关键字:VI 新锐 包装 装帧 海报 地产广告 画册 名片 标志 软件界面 ICO 网页
SPORTSLIST 平面广告
SPORTSLI
Puma 平面广告
Puma 平面广
Wataniya 平面广告欣赏
Wataniya
Penalty 平面广告
Penalty
HSBC平面广告
HSBC平面广告
Michaels Arts 平面广告
Michaels
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
当日文章推荐 查看更多相关内容
Dreamweaver| 用 Dreamweaver 4 制作 [8-20]HTML/CSS| 给网页文字加上即时提示 [8-20]
印前技术| 从印制谈降低图书成本 [8-20]CoreaDreaw| Excel表格导入Coreldraw [8-20]
Maya| 改变Sprites型粒子的方向 [8-20]Flash| Flash制作动漫中常用的眨眼效果动 [8-20]
Flash| Flash轻松实现五彩变换多边形鼠标 [8-20]3D MAX| 3D MAX教程:Loft建鼠标模型 [8-20]
Photoshop| Photoshop教程:打造月亮之下 [8-20]Photoshop| Photoshop教程:滤镜特效制作 [8-20]
理论文献| 网络时代图片银行的作用与摄影师的新课 [8-20]理论文献| 从艺术摄影到摄影的艺术 [8-20]
会员作品集推荐 查看更多推荐会员作品
平面作品 | 插画作品 | 网页作品 | 包装作品 | 软件UI | 室内设计 | 数码摄影作品 | 建筑环境 | 工业设计 | 其他
LogoIDEAL玩具汇森玩具群英会萃手术
老鼠动力阳光屋顶卡卡走-迷卡卡走-迷卡卡走-迷

数据载入中...
视觉焦点
优秀作品在线投稿
·
Michaels Arts 平面广告
Michae
生活境界楼书
生活境界楼书
港澳花园广告欣赏
港澳花园广告
茶包装欣赏
茶包装欣赏

站点新入
MAYA简单金属材质的制作
MAYA简单
Flash制作动漫中常用的眨眼效果动画
Flash制
展区
·翰海博网诚聘资深网页设计师 (2-29止)
·招聘全职美工 (8-30止)
·儒林设计工作室_招聘 (6-30止)
·WEB/GUI界面设计师 (1-10止)
·高薪诚聘网页美工 (1-28止)
·招聘资深平面设计师 (1-31止)
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:botaniquebvba
网站地址:http://www.botaniquebvba.be/
加入时间:2008-7-21 12:55:15
网站名称:freshfisheveryday
网站地址:http://www.freshfisheveryday.com/
加入时间:2008-7-21 12:54:37
网站名称:kastenstudio
网站地址:http://www.kastenstudio.be/
加入时间:2008-7-21 12:53:54
网站名称:bandinlunis
网站地址:http://www.bandinlunis.com/
加入时间:2008-7-21 12:52:49
网站名称:moofe
网站地址:http://www.moofe.com/
加入时间:2008-7-21 12:52:07
网站名称:mission-farbe
网站地址:http://mission-farbe.de/
加入时间:2008-7-19 15:02:58
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿