发布时间:20xx-04-20 09:05:33 来源: 作者:shengman 点击:21015
这里跟大家谈谈个人对WEB前端开发的一些经验(当然都是个人的一些理解,有什么地方说的欠妥或不对的地方还请包含和指正),这里我就从WEB标准开始吧。
WEB标准是什么?
说是WEB标准,不过我这里主要是对XHTML1.1 和 CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了,“WEB标准”是一系列标准的总称,包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下,WEB标准不是我们所说的DIV+CSS。 刚刚上面提到了――DIV+CSS,这里要说明下,这样说其实是不正确的。DIV+CSS准确的说法(个人的理解)应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法,DIV应该指的是XHTML标签,而CSS显示是指的CSS样式表了。
采用WEB标准开发的好处
那么W3C为什么会推荐这样的页面制作方法呢?下面我们就简单的看看采用WEB标准开发(个人理解的)相对以前TABLE布局的优势有哪些?
1、节约运营成本
看看我们的WEB标准制作方法是如何做到的?
采用WEB标准制作,我们可以做到表现很形式的分离,我们用XHTML来表现(数据),用CSS来控制(页面元素呈现的)形式。写的好的页面,XHTML代码中基本上都是用户要看的数据,还其他修饰性的东西,全部由我们的CSS来控制。这样一来我们的(XHTML)页面的体积就大大减小了,这样你在带宽上的费用就会大家降低了,这个怎么降低的,你可以想象一下,YAHOO的首页小1K,100W个人一起访问,那么带宽节约了多少?而且可以更充分的利用带宽。
而我们的CSS控制了,所有的页面元素的样式,现在想改网站的整体风格,你只需要花几分钟修改一下一个CSS文件,就可以轻松搞定了。维护的成本也下来了,省了不少钱了吧?还有,你开这个页面的速度会快很多啊,一个让你等半分钟的页面,除非里面的信息对你很有用,不然我们大家基本都没有太多的时间去用来等待的。
2、对用户友好更友好,且有机会获得更多的用户
现在来说说用户友好。首先我想把我们的用户来分下类。
第一类:普通用户(每个访问我们网站的人);
第二类:搜索引擎;
采用WEB标准开发的页面,结构清晰,页面体积小,浏览器兼容性好。普通用户访问的时候,页面打开速度快,而且不管用户使用那种浏览器,都能够正常访问(显示)页面,且页面的结构清晰,要找的数据可以很方便的浏览到。
而对搜索引擎来说,一个好的采用WEB标准开发的页面,都是做过SEO优化的,它访问起来很友好,很容易理解你的页面中哪里是标题(H1~H6标签),哪里是段落(p标签),哪里是段落里要强调的内容(strong标签) 等,它可以很容易的分析出来。而一个SEO好的站点,大家都知道,被搜索引擎收录的机会更多,这个也意味着您的网站会被更多的普通用户访问到,给你的站点带来更多的用户。
一个能帮我们省下大笔费用,提高工作效率。同时又能够提高页面浏览速度,对用户友好,甚至能够不花钱宣传,就能给你带来更多用户的技术。你说你会不会去使用它?这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可,所以您现在需要学习WEB标准啊。 温习完了基础课程,现在正式开始讲XHTML和CSS的技巧了。
合理的布局
有朋友会开始问了,怎么一开始就开始讲合理的布局了呢?前面我们提到了一些知识点――“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西,都是我们做了合理布局的结果。而且我个人觉得,我们采用WEB标准制作的一切都是从这个知识点开始的,所以我这里就先来说这个话题。
那么大家又会开始问,怎样的一个页面,才算是合理的布局的呢?这个问题问题问得好,也是我们大家刚开始学用WEB标准的问得最多的问题之一,我也曾经常被这个问题所困扰,这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前,我们还是用个实例来讲解会更直观些。先来看看这个图片: 不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局,在稍后的文章中我会详细的介绍浮动元素。好,回到刚才的话题,大家看到了这个页面了。
我这里先把代码写给大家看看(省略了部分代码):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax标签导航实例详解</title>
<link href="css/article.css" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="/upload/1/0/8/8/10881/fileName"></script> </head>
<body>
<div id="container">
<div id="topbar"> 海啸的地盘--享受生活,享受每一天!">海啸的地盘--享受生活,享受每一天!</a></h1>
<div id="search-bar">
<form name="frmsearch" id="frmsearch" action="" method="post">
<label for="keyword">站内搜索:</label>
<select id="topics">
<option value="0">全部主题</option>
<option value="1">(X)HTML</option>
<option value="2">CSS</option>
<option value="3">Javascript</option>
<option value="4">XML</option>
<option value="5">ASP/ASP.NET</option>
</select>
<input type="text" name="keyword" id="keyword" value="请输入搜索关键字" maxlength="60" /> <input type="reset" name="btnsearch" id="btnsearch" value="开始搜索" />
</form>
</div>
</div>
<ul id="nav">
<li><a href="#2">ARTICLES</a></li>
<li><a href="#2">TOPICS</a></li>
<li><a href="#2">ABOUT</a></li>
<li><a href="#2">CONTACT</a></li>
<li><a href="#2">GESTBOOK</a></li>
<li><a href="#2">FEED</a></li>
</ul>
<h2>Ajax标签导航实例详解</h2>
<div id="article-info">作者/程序设计:<a
href="domainmailto:haixiao_yao@yahoo.com.cn">domain</a> 来源:<a href="http://www.domain.com" target="_blank">domain.com</a> 发布时间:20xx年x月x日</div>
<h3>代码篇</h3>
<p>
之前整理发表了《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,是我很久前就写的一个脚本,很实用的(还被很多网站收录了哦),现在拿它来做实例讲解吧!当然个人能力有限,有什么不对的地方还请多包含!
</p>
<p>
效果大家看到了,核心功能有:<br />
1、将当前选中标签以特殊的样式显示<br />
2、将异步加载的页面信息显示到指定的DOM节点中
</p>
<p>
我们来看看处理脚本的代码吧:
</p>
<div class="code-title">程序代码:ajaxtab.js</div>
<div class="js code" name="code" id="js-code">
<!--<br />
// 判断是否支持ActiveX<br />
var useActiveX=(typeof ActiveXObject != "undefined"); <br />
// 判断是否支持DOM<br />
var useDom=document.implementation && document.implementation.createDocument;<br />
// 判断是否支持XMLHttpRequest对象<br />
var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />
// XMLHttpRequest对象版本<br />
var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];<br />
// DOM对象版本 <br />
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"]; <br /> /* ===========================================================<br />
* 函数名称:$(i)<br />
* 参数说明:i - 目标节点名称<br />
* 函数功能:获取指定的目标DOM节点<br />
* 返 回 值:返回要搜索的目标DOM节点<br />
* 使用方法:$("frmSearch")<br />
============================================================ */<br />
function $(i){<br />
if(!document.getElementById)return false;<br />
if(typeof i==="string"){<br />
if(document.getElementById && document.getElementById(i)) {<br />
// W3C DOM<br />
return document.getElementById(i);<br />
}<br />
else if (document.all && document.all(i)) {<br />
// MSIE 4 DOM<br />
return document.all(i);<br />
}<br />
else if (document.layers && document.layers[i]) {<br />
// NN 4 DOM.. note: this won't find nested layers<br />