仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 770|回复: 7
打印 上一主题 下一主题

[学习教程] 来看看:网页部分的结构技能:多栏自顺应结构成绩-Flash actionscript

[复制链接]
老尸 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 20:34:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
与位图图形相比,矢量图形需要的内存和存储空间小很多,因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大,是因为图像中的每个像素都需要一组单独的数据来表示。
poluoluo中心提醒:在网页部分的结构上,必要接纳大批的自顺应,来满意分歧长度数据、内容的公道出现。以此包管页面不至于由于内容过量等缘故原由,招致堆叠、溢出、撑开等损坏全体视觉效果的情形。这里就复杂谈谈几个本人碰着过的自顺应成绩。
在网页部分的结构上,必要接纳大批的自顺应,来满意分歧长度数据、内容的公道出现。以此包管页面不至于由于内容过量等缘故原由,招致堆叠、溢出、撑开等损坏全体视觉效果的情形。这里就复杂谈谈几个本人碰着过的自顺应成绩。
1、两栏自顺应结构

在实践项目中,经常碰到如白色线框部分的两栏自顺应成绩。其关头点是,摆布两栏均不定宽,右边栏条目数目不定。

针对这类场景,能够接纳两栏均浮动的办法。参考Object-orientedCSS中使用到的结构计划,则必要套用两层标签完成,两栏中一栏浮动,另外一栏宽度自顺应:
  1. .wrap{background:gray;}.left{float:left;background:orange;}.right{display:table-cell;_display:block;zoom:1;background:lime;}<divclass="wrap"><divclass="left">左边栏</div><divclass="right">右边栏</div></div>
复制代码
点此检察该代码示例:two_column_layout.html
因为IE6其实不撑持display:table-cell属性,必需经由过程CSShack来填补这个缺点。这里能够稍作改善,右边栏间接设定overflow:auto;zoom:1大概overflow:hidden;zoom:1的款式。
2、三栏自顺应结构

谈到三栏自顺应结构,这应当是最为基础的网页排版情势了。以Amazon首页来讲,其自顺应结构接纳的是与Object-orientedCSS相相似的计划:
  1. .wrap{background:gray;}.left{float:left;width:250px;background:red;}.right{float:right;width:300px;background:orange;}.main{overflow:hidden;zoom:1;background:lime;}<divclass="wrap"><divclass="left">左边栏</div><divclass="right">右边栏</div><divclass="main">主体部分</div></div>
复制代码
点此检察该代码示例:three_column_layout.html
该案例中,摆布侧栏分离浮动,主体部分(两头栏)溢出埋没。这类结构的优点在于,不管外框宽度怎样变更,主体部分总能自顺应。但从页面布局下去说,节点物理按次和视觉逻辑按次纷歧致,最关头的主体部份内容被排在全部文档的前面,主次散布分歧理,总以为有一些遗憾。别的也会存在一些潜伏的风险:假如右边栏包括大批剧本资本,大概会影响乃至堵塞全部页面的载进(假如选择利用iframe大概ajax来加载就另当别论)。

尽人皆知,HTML文档是按次剖析的。在这张利用WebPageTest对Amazon首页衬着历程的某一时候截图中,能够发明摆布两侧的内容领先予以出现,而主体部分会形成必定工夫的空缺。因而这类计划其实不宜用于整站页面框架的搭建。
思索到页面布局的庞大水平和体积巨细,年夜型站点的结构计划,团体偏向于接纳诸如负边距之类自顺应结构。完成道理能够参考《CreatingLiquidLayoutswithNegativeMargins》这篇文章。使用负边距能够构建出良多庞大的流体结构情势。这里以YUI框架供应的栅格计划为例来讲明:
  1. .wrap{}.section{float:left;margin-right:-40em;width:100%;}.g1{margin-right:310px;float:none;width:auto;position:static;}.g2{float:right;margin-left:-40em;width:100%;}.main{margin-left:210px;float:none;width:auto;position:static;overflow:auto;background:red;}.left{float:left;width:200px;position:relative;background:orange;}.aside{float:right;width:300px;position:relative;background:lime;}<divclass="wrap"><divclass="section"><divclass="g1"><divclass="g2"><divclass="main">主体部分</div></div><divclass="left">左边栏</div></div></div><divclass="aside">右边栏</div></div>
复制代码
点此检察该代码示例:negative_margin_layout.html
固然完成上要比其他计划更加庞大,必要嵌套多层标签,在必定水平上有掉HTML文档的简便性。但一个主要的优点是,其各个区块(左边栏、主体部分、右边栏)文档布局按次能够随便互换,而在视觉出现上却没有任何差别。今朝口碑网的前端结构体系恰是使用了这类办理计划,并有公用工具完成结构框架的主动化天生。
3、自顺应栅格化结构

Object-orientedCSS提出了一种布局化的多栏自顺应结构,使用栅格把持容器宽度,内容把持容器高度。使很多层嵌套的自顺应栅格化结构明晰了然。假如使用到相似表格的页面排版,这类办法卓有成效。具体参考自顺应栅格化结构代码示例:grid_layout.html
而今朝大批的网站正在利用950px/960px宽度的栅格体系,流动最小栅格单位的宽度,包管全体布局的公道、不乱和分歧。与其比拟,在部分页面结构中,倡议利用Object-orientedCSS这类简便的、基于百分比的栅格计划。假如能够包管外部一切区块自顺应,就只必要对最外层容器设定宽度,显得更加天真。

Flash又被称之为闪客,是由macromedia公司推出的交互式矢量图和Web动画的标准,由Adobe公司收购。
admin 该用户已被删除
沙发
发表于 2015-1-17 13:14:12 | 只看该作者
flash制作的动画文件比较小,可以在网络上快速传播!
飘飘悠悠 该用户已被删除
板凳
发表于 2015-1-25 15:32:59 来自手机 | 只看该作者
假设一个Web设计者需要让一页上的不同元素之间相互作用。如果其中的一些元素出现在Box内,而另一些在Box之外,那么设计者就很不幸。
愤怒的大鸟 该用户已被删除
地板
发表于 2015-2-3 07:53:18 | 只看该作者
它包含了下列常见的形式之一或者几种的组合:流媒体、声音、Flash、以及Java、Javascript、DHTML等程序设计语言。  
老尸 该用户已被删除
5#
 楼主| 发表于 2015-2-8 20:33:55 | 只看该作者
祯率越高,动画中可包容的信息越多,动画看起来越光滑和流畅。当然,当祯率增加时,计算机的CPU的重绘工作越多,运行得就越慢。
变相怪杰 该用户已被删除
6#
发表于 2015-3-8 13:21:59 | 只看该作者
flash的优缺点可以如何运用呢?
灵魂腐蚀 该用户已被删除
7#
发表于 2015-3-16 05:25:15 | 只看该作者
各种性能才能运用的得心应手,制作出优秀的动画。
若天明 该用户已被删除
8#
发表于 2015-3-22 20:49:16 | 只看该作者
都着重在优点方面,请尽量答的详细、深入一些,谢谢!拿了我全部的爱问分了已经
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-29 19:19

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表