七夕节快乐:可通过标准验证的Flash嵌入方法
Google.cn的IG页面,添加富有中国山水画风格元素:“金鱼戏荷花”的七夕节日气氛的Flash作品,相对于百度来说,还是相当用心的Search。
先就google中国的Flash金鱼戏荷花而言,金鱼,乃吉祥之物。鱼通“裕”,富裕之意。另“鱼”同“余”同音,正如年画中所祈望的年年有余。从远古至今,鱼就在人们心目中代表财富。金鱼,更是喻意不凡。
本节课从google中国的Flash入手,介绍如何嵌入标准规范的Flash文件。
先看Demo:七夕(Tanabata festival)Flash
提示:你可以先修改部分代码再运行。
在这里,使用flash.js来构造flash文件在嵌入时所使用的三个参数,使用
swf('flashUrl','width','height');
这三个参数来对应Flash文件的地址,宽度,高度。
如果需要多次插入flash文件,仅需要修改对应的参数即可,避免嵌入flash文件时候的大量冗余代码,适合HTML的代码结构简明清晰。
在这个例子中,顺便解决了一个垂直居中的问题。设置:
html,body{
margin:0;
padding:0;
border:0;
height:100%;/* 设置高度百分百,解决不同浏览器下的高度不统一问题 */
overflow:hidden;/* 隐藏滚动条,一般滚动条是由html引起的 */
}
借用table中的td可设置垂直居中(td中任何元素都可以设置垂直属性),所以,借用一个table来解决网页中遇到的垂直问题。
注意:这样的方法仅适用于简单的页面布局,不适合复杂的网页布局。
.tables{
width:100%;/* 设置table宽度百分百 */
}
.tables td{
height:100%;/* 设置单元格高度百分百 撑满整个屏幕 */
text-align:center;/* 设置td中元素水平居中 */
vertical-align: middle;/* 设置td中元素垂直居中 */
}
八月 26th, 2009 at 1:39 上午
何谓标准化?
八月 26th, 2009 at 1:52 上午
回复Wei386的提问:
WEB标准不是某一个标准,而是一系列标准的集合。
网页主要由三部分组成:
结构(Structure)、表现(Presentation)和行为(Behavior)。
对应的标准也分三方面:
结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准:
1.结构标准语言
(1)XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(http://www.w3.org/TR/2000/REC-XML-20001006)。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。
(2)XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0(参考http://www.w3.org/TR/xhtml1)。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2(参考http://www.w3.org/TR/CSS2/)。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。
3.行为标准
(1)DOM
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范(http://www.w3.org/DOM/),DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。
八月 26th, 2009 at 1:55 上午
这貌似是copy的啊,我不理解的地方时,为什么你这种嵌入flash的方式,被称为标准化?
八月 26th, 2009 at 2:00 上午
我修改了名字了,可以通过标准化验证的Flash嵌入方法
八月 26th, 2009 at 2:01 上午
还有一点,这样的添加flash方式减少了传统添加flash方式的代码冗余情况。一定程度上增加了代码的可读性。
八月 26th, 2009 at 2:09 上午
那我还想问问,啥事可通过标准验证?
你这样做看起来可读性是好的,没有问题,但是我如果想修改flash的其他参数呢?比如透明,比如质量,这个可通过参数的扩展性来解决。
但是,现在这么做,我看到会有一个这样的问题,就是浏览器在何时加载flash的问题,根据浏览器的渲染不同,加载的方式也是不同的,你这样做其实是在dom还没有完全加载完成之前,就针对dom进行操作,如果网速慢,会有一些问题