基于AJAX技术提高搜索引擎排名(2)

　　二、 设计你的Web页面

　　实现分离内容和导航的第一步是，在web页面上创建将插入可导航元素的占位符。对于每一个可导航元素的连续区域，你应该创建一个具有唯一id的独立DIV元素；这样以来，以后你可以在你的JavaScript代码中标识它。为了防止过度晃动，在创作页面期间，目录上方或右边的DIV元素的尺寸应该调整到非常接近你的可导航元素的实际大小；这样，当你使用希望的HTML代码来代替它们时内容就不会移动位置。为此，一种最巧妙的方法是把一个空的适当大小的DIV元素插入到该占位符处。

　　对于Informit网站来说，其页面结构已经是良好设计的，且DIV元素已经非常到位，如图1所示。

图1一篇Informit文章的页面结构

　　你仅需要从可导航DIV元素中删除内容并且插入一个空框，页眉将会出现在这里(为了简短起见，我们将忽略把公司标识和版权信息嵌入到每一个页面中的讨论)。下面是相应的代码：

＜div id="header"＞ ＜div style="height: 100px; width: 100%"＞＜/div＞ ＜/div＞ ＜div id="contentArticle"＞ ＜div id="firstCol"＞ ... article content .... ＜/div＞ ＜div id="secondCol" ＞＜/div＞ ＜/div＞ ＜div id="footer"＞＜/div＞

　　注意

　　如果你的web页面使用表格来实现所希望的页面布局，那么请不要把表格单元格重用作占位符；而把DIV元素放到表格单元格内比较好一些。

　　已经被从web页面中删除的可导航的元素必须被重新创建为独立的页面。你应该使用静态HTML文件来表达静态内容(这将允许缓冲内容，不管你使用什么样的web服务器)和在加载它们的web页面上创建显示基于动态元素的服务器端脚本。对于Informit来说，每一个web页面都有唯一一个文章标识符(在URL中的"p="参数)；因此，你需要创建一个能够接受文章标识符并创建右边的栏目的服务器端脚本。在大多数情况中，你可以重用创建嵌入的可导航元素的服务器端代码。

　　在重新设计这些web页面后，接下来，你就可以实现本方案中的AJAX部分了。与通常一样，你可以使用嵌入式框架(IFRAME元素)工作，也可以选用一个XmlHttpRequest对象。