大前端 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Pages: 40/43 First page Previous page 31 32 33 34 35 36 37 38 39 40 41 42 43 Next page Final page [ View by Articles | List ]
Sep 16
符合w3c标准flash插入代码

结合我们的vcastr3的例子,介绍一下符合w3c标准的flash代码的插入方法,并说明各个参数的设置

<object type="application/x-shockwave-flash" data="vcastr3.swf" width="650" height="500" id="vcastr3" bgColor="#ff0000">
        <param name="movie" value="vcastr3.swf"/>
        <param name="allowFullScreen" value="true" />
        <param name="FlashVars" value="xml=vcastr.xml" />
</object>

以上是vcastr3 flash的插入代码,通过了w3c的验证,也经过了IE6,7,firefox2,3,safari的测试,并且代码避免了参数的重复。

<object type="application/x-shockwave-flash" data="vcastr3.swf" width="650" height="500" id="vcastr3">
        <param name="movie" value="vcastr3.swf"/>
</object>

必须部分,设置的flash的大小,地址,如果需要脚本使用,还可以设置id的名称
Sep 11
flash利用as动态画柱状图

     1、新建4个空的电影剪辑

     2、把4个电影剪辑放到第一帧场景上,命名为mc0、mc1、mc2、mc3

     3、在第一帧贴上如下as源代码


System.useCodepage = true;//除乱码
var xl = new LoadVars();//创建 LoadVars 对象的实例
xl.load("xl.txt");//引导外部文本中的变量
xl.onLoad = function(suc) {
if (suc) {
  nums = [xl.num0, xl.num1, xl.num2, xl.num3];//外部文本中的变量存入数组中
}
};
for (var i = 0; i<=3; i++) {
_root["mc"+i]._yscale = -20;//初始缩放比例
_root["mx"+i] = _root["mc"+i]._x;//存贮初始坐标值
_root["my"+i] = _root["mc"+i]._yscale;//存贮初始缩放值
}
this.onEnterFrame = function() {
for (var i = 0; i<=3; i++) {
  _root["mc"+i]._yscale = _root["my"+i]*nums[i];//显示缩放变化
  _root.createEmptyMovieClip("mytxt"+i, i*2);//创建电影实例四个用于下句中绑定库中的动态文本
  _root["mytxt"+i].attachMovie("txtmc", "txt"+i, 1000, {_x:_root["mx"+i], _y:(Math.round(Number(_root["mc"+i]._y-nums[i]*(0.3))))});//
  _root["mytxt"+i]["txt"+i].t.text = nums[i];//显示动态数值
}
};


 4、运行测试
源文件下载
Download ( 20 downloads)
Only registered users can download this file. Please Register or Login

另外  tommyhu.cn鼠标FLASH画画效果.rar

Sep 10
    在网页布局时常会用到 DIV 来显示一些边角背景,需要设置较小的高度,默认情况下,IE6 中设置 DIV 较小高度会不起作用,在 IE7、FF 等浏览器不存在这个问题。
    IE6 下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 DIV 的时候, IE6 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:5px; 来定义了一个 DIV 的高度,实际在 IE6 下显示的仍然是一个 12px 左右高度的层。
方法一:定义overflow属性。比如想定义一个高度为2px 的线条。
<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

方法二:将div 的字体大小属性fontsize 设置为跟高度相同。
<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>

Sep 10
为了获得最佳的兼容性,IE6,IE7,IE8,FIREFOX,兼容主流标准浏览器
为了获得更美丽的代码,架构清晰,易于维护
为了获得良好的SEO效果
为了获得更好的用户体验
利用web标准(W3C),采用XHTML+CSS(DIV+CSS是错误的)对网站进行重构已经显得很迫切!


什么是网站重构
  把"未采用CSS,大量使用HTML进行定位、布局,或者虽然已经采用CSS,但是未遵循HTML结构化标准的站点"变成"让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现,使页面的实际内容与它们呈现的格式相分离的站点。"的过程就是网站重构(Website Reconstruction)




为什么要网站重构
     您的网站也符合Web标准吗?
     您的网站在不同浏览器之间兼容吗?
     您的网站访问速度是否过慢?
     在访问您的网站时,浏览器的左下角是否经常提示“脚本错误”?
      ... ...
     从易用性来说:最早的网站可能存在每当主流浏览器升级时,刚刚建立的网站就可能过时,我们就需要升级或重新建造一遍网站;
     为了使网站兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码;
     每当新的网络技术和交互设备的出现,我们也需要制作新版本来支持这种新技术或设备,如支持手机上网的WAP技术;
     网站代码臃肿浪费了大量带宽;不易用的代码,残障人士无法浏览网站等等的问题,这是一种恶性循环,是一种巨大的浪费。
    
     经过重构的网站文件下载与页面显示速度更快;
     内容能够被更多的用户所访问(包括残障人士等);
     当浏览器版本更新,或者出现新的网络交互设备时,确保所有应用能够继续正确执行。
     从可维护性和搜索引擎优化的角度来说:简洁的代码,大大降低了带宽的要求,加快了页面加载速度,使得网站更容易维护;
     有利于搜索引擎机器人的抓取,使得网站对于搜索引擎更加友好,有利于提高网站的排名等等。
    
     网站是一种零耗损的产品,一个链接绝对不会因为点击次数太多而产生接触不良。那么对于这种零耗损的产品为什么会有生命周期,为什么要重构?
     简单说,网站标准的目的就是:
     1、使页面加载得更快速;
     2、降低带宽带来的费用:节约成本;
     3、让你在修改设计时更有效率而代价更低
     4、帮助你的整个站点保持视觉的一致性;
     5、更利于搜索引擎的检索(符合SEO的规范);
     6、令站点更容易被各种浏览器和用户访问(包括手机、PDA和残障人士使用的文字浏览器);
     7、兼容不容忽视的Mozilla 系浏览器(Firefox 份额);
     8、提高你的职场竞争实力(事实上也就是降低失业的风险)。
     对于网站设计和开发人员来说,遵循网站标准就是使用标准;对于你的网站用户来说,网站标准就是最佳体验。
     随着XHTML+CSS标准制定、多浏览器的兼容、Web2.0概念的流行、用户体验的提出、搜索引擎变得重要,现在大多数网站都要面临整体重构的问题,为了兼容性、为了用户体验、为了对搜索引擎友好、为了可持续发展,网站和企业一样也面临重构、升级、可持续发展的问题。
     市场在不断变动、用户需求也在不断变化,网站必须作相应的改变以适应这些变化,但在不断修改、升级的过程中您没有发现网站的维护成本变得越来越高?用户体验变得越来越差?
     这是因为最初的设计不够有效,我们只能通过不断在最初设计的基础上进行修补、升级来适应这些变化。但最终的结果就是把一个原本有序的系统变得越来越糟糕,维护成本日益增大、用户体验不如从前、数据库就像迷宫、文件命名、路径一团糟、大量无效链接等等问题。如果这时您的技术团队再有一些人员变动,单说项目交接就是一个大工程。
     糟糕的用户体验、糟糕的兼容性,如果没有竞争对手,您不必过分担心这些问题,但我们正处于疯狂竞争的年代,几乎任何行业都有竞争,您的劣势,就是竞争对手的优势。您还不准备进行重构吗?
     当用户体验变得比以前更糟糕、维护网站的费用变得比重新开发还要大的时候,就是这个网站生命周期快要结束的时候。
     聪明的管理者会在这个时候选择重构,以拯救维护成本日益加大、用户体验日益糟糕的网站。


Sep 9
分离的结构和表现的一个作用就是可以用语义化的标签来标识文档的内容。在半结构化的xhtml代码里每个标签都有他代表的独特意义。在现实生活中人脑可以轻易的分辨出网页上文章标题和小节标题的区别,但是当下搜索引擎技术还不成。如果网页上所有文字都是用<p>做标签的话,搜索引擎可能真的很难分辨不出来文章真实的主题内容是那段文字。

关于标签的语义化的理解有方面。
第一面是面向浏览者方便阅读的语义化,这个主要是在使用浏览器阅读网页的时候给予文字以特殊标识,使浏览者更容易分辨出那些是网页文字的重点内容,以便于更方便的阅读。
第二方面是面向搜索引擎分析所用的语义化处理,友好的语义化标签能使搜索引擎更好的抓取和分析网页上的内容。如果说让网页能够跟搜索引擎尽可能深入交流的话,那么对网页标签进行语义化处理是再好不过了。

下面我们来讨论关于语义化的内容。
Sep 9
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

具体的语义和用途在,XHTML1.0 TAG 参考中都已经说明,这里将一些容易遗忘或者混淆的TAGS和属性予以补充。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。
例如:<h1>文档标题</h1>
<h2>次级标题</h2>
而不要使用
<div class="title">文档标题</div>,或者<span class="title">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。

<p>

段落标记,知道了<p>作为段落,你就不会再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距,再定义首字下沉等效果,那就挺完美了。
例如:<p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初,蓝色理想就以建设网站设计与开发人员之家为宗旨,以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,每天都会有会员精心制作的教程发布,无私地对网友进行帮助,而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为国内最大的设计类站点之一。
</p>
<p>多年来,蓝色理想的内容不断充实,先后被国内一些知名网站、传统媒体重点推介过,并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏,并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一,现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p>
<ul>、<ol>、<li>

<ul>无序列表,很常见的到了大家广泛的使用,<ol>有序列表也挺常用。在web标准化过程中,<ul>还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持CSS的时候,导航链接仍然很好使,就是美观方面差了一点。
例如:<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul><ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<dl>、<dt>、<dd>

dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
例如:<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl> <dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后,产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样,周润发印证了一个时代,一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑,都封存胶片之中,当我们回首寻望的时候,发哥已被刻为一个时代的坐标。</dd>
</dl>
<cite>、cite 、<q>、 <blockquote>

论坛和blog经常会用到引用别人的话,用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是,IE不能识别,并且有些时候, <q>会引起一些可访问性(Accessibility)的问题。正因为如此,一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容,那么就可以用CSS来给引用设计样式了,但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag )关于处理<q>相关问题的看法。
对于那些一段或者好几段的长篇引用,就应当使用 <blockquote>了。CSS可以用来定义引用的样式。注意,一段文章是不可以直接放在<blockquote>中的,引用的内容还必须包含在一个元素中,通常是<p>。属性cite既可以与<q> 一起用,也可以与<blockquote>一起用,用来提供引用内容的来源地址。需要注意的是,如果你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。

例如: <cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.<p> <cite>孔子</cite>曰:<q>学而不思则罔,思而不学则殆</q>.</p><p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p> <blockquote cite="http://www.w3cn.org/">
<p>&#8220;我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,
   我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",
   为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,
   每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,
   例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;
   针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。
   这是一种恶性循环,是一种巨大的浪费。&#8221;</p>
</blockquote>
<em>、 <strong>

<em> 是用作强调的,<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。
例如:<p><em>强调</em> 的文本通常用斜体显示,
然而, <strong>特别强调</strong> 的文本通常以粗体显示。</p>
<table>、<td>、<th>、< caption >、 summary

XHTML中的表格不应用来布局。然而如果是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性summar为摘要,<caption>标签为首部说明,<thead>标签为表格头部,<tbody>标签为表格主体内容,<tfoot>标签为表格尾部。
其中还可以使用scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
 row 指示当前单元格,为包含当前单元格的行提供相关的表头信息。
 col 指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
 rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
 colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。
例如:<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
   <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">Model</th>
<td>M9454LL/A</td>

<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>

</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>

</table>效果察看:http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

<dfn>
<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>

<ins>, <del>

知道del,就不要再用<s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。
例如:
<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>
<code>

表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。
例如:<code>p{margin:2px 0;}</code>
<abbr>、<acronym>

<abbr>标签是表示web页面上的简称,<acronym>标签为取首字母缩写。(注:这里把简称和缩写分开而论,简称范围比缩写大,取首字母的缩
写用<acronym>标签)Windows的IE6.0以下的浏览器暂不支持<abbr>标签。 在IE里,你可以应用CSS给<acronym>但是不能应用给<abbr>标签,
IE会为<acronym>标签的title属性显示提示,但是会忽略<abbr>标签。
解决方法见: http://www.w3cn.org/article/translate/2005/115.html
例如:<abbr title="Cascading Style Sheets">CSS</abbr><acronym title="Cascading Style Sheets">CSS</acronym >
alt属性和title属性

title属性用来为元素提供额外说明信息title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。
alt属性为不能显示图像、窗体或applets的用户代理(UA),指定替换文字。替换文字的语言由lang属性指定。<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com"><a href="http://www.jluvip.com/blog/article.asp?id=260" title="js获取单选按钮的数据">js获取单选按钮的数据</a>
Sep 9
前端开发始终是在不断发展其技术,告别了TABLE TR TD的布局,让DIV谦卑乖巧的迎合主流的标准浏览器,我们疲惫于浏览器的兼容性测试HACK,为了高效能与代码之美,我们一直都在努力,请保持对前端发展方向的关注……
最近看“标签语义化”相关的文档,博客里面会做相关收集,以后也在W3C板块有体现

首先说明的一点是,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。 以前我真的没有怎么重视过搜索引擎,现在开始比较在意了,因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。

以前以我对web开发的粗浅理解,觉得写一个好的符合标准的页面只需要把结构和表现分离,然后不要使用table,font等标签就行了,至于通篇都是div我也不会觉得有什么问题,因为CSS很强大。但是,所有的标签都是有自己的语义的,下面给出一部分标签的语义:

div 语义:Division(分隔)
span 语义:Span(范围)
ol 语义:Ordered List(排序列表)
ul 语义:Unordered List(不排序列表)
li 语义:List Item(列表项目)
…………


如果无视标签语义和默认样式,所有标签都用div,其实也是可以写出来视觉效果很好的页面,只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求,但是整个页面一点语义都没有,搜索引擎还是看不懂。所以,要记住:

结构(html)才是重点,样式(css)是用来修饰结构的。所以,要先确定html,确定标签,再来选用合适的css。

一般来说,所有的标签都会有一个默认的样式,所以一个简单的判断网页标签语义是否良好的方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。

另外,值得重点提及的是h标签,h标签的语意是标题,搜索引擎对这个标签比较敏感,特别是h1,和h2。一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。

Sep 8

.clearfix:after {content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */注: 该方案测试于两栏悬浮布局,兼容各大主流浏览器,包括Google Chrome。
Pages: 40/43 First page Previous page 31 32 33 34 35 36 37 38 39 40 41 42 43 Next page Final page [ View by Articles | List ]