WEB前端开发经验总结
作者：海啸 来源：Yaohaixiao博客 发布时间：2009-07-20 18:01:00
不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。
我这里先把代码写给大家看看（省略了部分代码）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<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=”js/common.js”></script>
</head>
<body>
<div id=”container”>
<div id=”topbar”>
<h1><a href=”http://www.yaohaixiao.com/” target=”_blank” title=”海啸的地盘–享受生活，享受每一天！”>海啸的地盘–享受生活，享受每一天！</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=”mailto:haixiao_yao@yahoo.com.cn”>yaohaixiao</a> 来源：<a href=”http://www.yaohaixiao.com” target=”_blank”>yaohaixiao.com</a> 发布时间：2008年4月28日</div>
<h3>代码篇</h3>
<p>
之前整理发表了<a href=”http://www.yaohaixiao.com/article.asp?id=44” target=”_blank”>《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!
</p>
<p>
演示地址：<a href=”http://www.yaohaixiao.com/code/ajaxtab/index.htm” target=”_blank”>http://www.yaohaixiao.com/code/ajaxtab/index.htm</a>
</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 />
…
//–>
</div>
<p>
id=”news” - news就是我们的导航标签的ID；<br />
id=”newsCnt” - newsCnt就是我们要写入信息的目标DOM节点；<br />
class=”first” - first当前(第一个)标签的样式；<br />
id=”news-0″ - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签[li]在导航标签中的索引值）<br />
<a href=”news/news0.htm”>网站重构</a> - 超链接<br />
<span></span> - 标签间的分割线<br />
</p>
<p>
我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。
</p>
<p>
本来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V,都贴出来吧！呵呵！！！
</p>
<p>
不过还没有完，最后要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来改变指定DOM内的HTML字符串的，而不用刷新页面。详细的信息大家还是google一下吧，我也要休息下啊！！喝口茶先！！^-^！
</p>
<p>
以上讲了这么多，我们最后来看看，我们这个ajax标签导航都用到了那些技术吧：
</p>
<ol>
<li>XHTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>DOM</li>
<li>XMLHttpRequest对象</li>
<li>innerHTML</li>
</ol>
<p>
还有XML，我们这个例子没有涉及到。东西虽小，包含的（web前端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！
</p>
<p>
当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈CSS的HACKS技巧，Javascript DOM编程等等的，今天就收工了，谢谢捧场先！！！
</p>
</div>
<p id=”copyright”>
Copyright © 2007-2008 <strong><a href=”http://www.yaohaixiao.com”>yaohaixiao.com</a></strong>, All rights reserved. Powered By: <a href=”mailto:haixiao_yao@yahoo.com.cn”>Yaohaixiao</a>
</p>
</body>
</html>
看出来什么没有？（代码是很多，呵呵！）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？
[b]结构清晰[/b]–也就是我们常说的，XHTML标签要结构化（语意化）。
[u]什么叫结构化？[/u]
由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。
0
投稿猜你喜欢
- 在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页
- W3C终于发布了第一个HTML5草案，大家还沉溺在HTML2XHTML转换的快乐和痛苦中时，却又突然发现，HTML5和XHTML2，到底谁是
学习目的： 学习ADO.NET用法，并如何用DataRearder读取数据 今天练习数据库的最基本用法，如何打开数据库。首先在网站设置文件w- 网页兼容测试，除了做不同浏览器的兼容测试，还要观察网页在不同分辨率下的表现情况。在页面中使用了CSS绝对定位，发现在宽屏下错位。随后测试非1
- 内容摘要：您是否想让您的网站有多种显示风格呢，本文介绍了如何使用CSS结合js实现动态更换页面皮肤风格。看了下面的介绍您就明白了如何实现了这
- 在html里的每一个标签都有其自身的意义，而H标签作为标题标签，它的意义更是至关重要。对于H标签的用法特别是h1的用法一直是个争议的问题，也
- Microsoft SQL Server 2000的会话上下文信息使应用程序得以设置二进制值，以便在同一会话或连接上运行的多个批处理、存储过
- 图形由json格式加载，可以灵活配置。下一步是完善用户的操作，做这个感觉还是蛮有意思的。呵呵。截图：部分源码：<script type
- 所有数据库和状态文件都包含在其中。但是，在确定数据目录内容的布局中管理员有某些职责。本文讨论为什么要移动数据目录的各个部分(甚至是字典本身)
- 很久以前做的东西，发出来大家玩玩！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
- ASP实现即时显示当前页面浏览人数online.asp文件 <!--#include file="dbconn.a
- 在软件开发的初始阶段，开发商们总是想把整个系统的最小的细节设计好了，然后再去单线程的编写代码。这样软件开发完成需要很长时间，但开发商们一直都
- 功能：实现网页内容的即时编辑，增加页面的可用性、交互性。方法1：直接通过textarea标签实现，请运行下边代码：<!DOCTYPE
- asp 在线备份 恢复 sql server 数据库，对于远程没有提供sql server远程连接或打包下载的朋友是个临时解决方法，对于大数
- MySQL提供标准的SQL模式匹配，以及一种基于象Unix实用程序如vi、grep和sed的扩展正则表达式模式匹配的格式。标准的SQL模式匹
- 先看下面例子的效果：<INPUT TYPE="text" NAME=""&
- 说明：本文内容都是从Google上搜索来的，本想上http://www.alexa.com/查官方数据，访问非常慢暂且没查。使用本接口将返回
- 四、XML应用分类 总的说来的XML的应用可分为四类： （1）应用于客户需要与不同的数据源进行交互时。数据可能来自不同的数据库，他们都有各自
- asp之家注：asp中FSO组件的功能很强大，如果没有FSO很难想象ASP会变成什么样。对于学习asp编程的朋友一定会接触到FSO相关的操作
- 如果你是个赛车手，并且按一下按钮就能够立即更换引擎而不需要把车开到车库里去换，那会是什么感觉呢?MySQL数据库为开发人员所做的就好像是按按
