基于SEO的XHTML_CSS网页布局与美化.docVIP

随着WEB2.0标准化设计理念的普及，业界越来越多的关注XHTML+CSS（也称DIV+CSS）的标准化设计，国内很多大型门户 站已经纷纷采用XHTML+CSS制作方法。从目前实际应用情况来看，XHTML+CSS布局的网站会使得页面载入更快、降低流量费 网站改版相对简单、快速等。特别是XHTML+CSS的网站结构对SEO网站优化起到的作用越来越明显，因为这种结构的HTML页 里基本只有文字或图片信息，样式放在CSS里面，这样搜索爬虫就不会管CSS，只要采集HTML里的内容就可以了，大大提高爬 的效率，这种结构往往还能让关键词更集中、密度更高，符合W3C标准的网页在SEO优化方面本身就有优势，更得搜索引擎蜘蛛 喜爱。本文作者就XHTML+CSS网页布局模式谈一下个人使用的一些心得体会，本文以“手机商务网站”为例来进行说明。 1做好网页的架构分析工作，是设计好网页的前提 一个拥有高访问量的网站是成功网站的一个衡量因素，我们在设计网页时要根据主题的不同进行合理的板式选择和色彩 配，将网站要达到的宣传效应通过合理搭配而构成的美丽页面来吸引客户的兴趣，促使他们来访问我们的网站。 1.1分析页面板式架构 “手机商务网站”主要以网上宣传新款手机和销售为主，这种类型网站的特点就是主要让人感觉到商品丰富而又美丽大方 此在选择色彩是主要以蓝色、绿色为主，小图标、小按钮、边框线等点缀小图形以 红、橙为主，显得页面绚丽多彩、活泼、大方，视觉冲击力较强；另外，“手机商务网 站”主页面主要包括网站BANNER、导航栏、站内搜索、新产品图片宣传、最新新 闻、网站服务、产品信息、版权信息等。本页面的板式草图如图1所示。 1.2分析页面排版架构 整个网页的框架比较简单，包括 Banner图片、导航条、搜索栏、页面主体 及版权信息等。因此，采用了基本的网页 框架结构，如图2所示。清晰准确的架构 设计是下一步布局的基础和关键。 1.3依据XHTML+CSS布局网页的模 式特点实现页面各模块的制作，凸显布 局优势 后，对各个模块进行分别的处理，最后再统一整合，这是设计制作网站的通常 步骤，养成良好的设计习惯便可熟能生巧。 1.3.1利用DIV标记对页面进行分块，确定好各块以及子块之间的关系 依据前边分析的排版结构对页面进行分块，如图3所示，另外制作过程 注意利用注释语句，以便让页面代码清晰、易读。 1.3.2定义CSS样式实现对各块效果的设计与美化 页面各模块划分好之后，接下来就是定义CSS样式对其进行定位和美化 工作了，具体操作之前先做好整个网站的样式分析与规划工作，这是有效使 用CSS样式表的前提。 1）对整个网站中要用到的CSS样式表进行统一规划。从网站效果一致性 原则出发，对整个网站的样式进行系统的分析和规划，详细罗列各样式的名 称和样式内容。特别要善用属性简写，尽可能地减少冗余代码，例如： margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px;可以 写成这样的格式：margin:0 10px。 2）统一规划CSS样式的应用范围。对网站中各个页面都要使用的样式效果（例：各页面中的普通文本信息采用统一的大小、字 体、行高、颜色等）统一定义在外部样式表文件中，方便各页面的调用，而对某个页面中要单独使用的效果则以内嵌式样式表的形式 直接在相应页面中进行定义。 3）基于SEO的样式命名规范 搜索引擎是通过抓取网站源代码来进行亲密接触的，如何才能更好地让搜索引擎的爬虫更快更准确地觉察到网站内容的相关 性，增强网站的搜索优化？可能从最基本的命名规则入手会有意想不到的收获，下面从前端设计的角度整理了一些常用的命名规 则，就很好地考虑到了搜索引擎的喜好，在页面设计的过 3）基于SEO的样式命名规范 搜索引擎是通过抓取网站源代码来进行亲密接触的，如何才能更好地让搜索引擎的爬虫更快更准确地觉察到网站内容的相关 性，增强网站的搜索优化？可能从最基本的命名规则入手会有意想不到的收获，下面从前端设计的角度整理了一些常用的命名规 则，就很好地考虑到了搜索引擎的喜好，在页面设计的过 程中，尽量做到让搜索引擎明白，从而达到我们的设计目 标，如表1所示。 1.3.3对页面效果进行整体调整，保证页面的协调和美观 经过上边的步骤页面已经基本成形，在制作完成的 最后，往往还需要对页面根据效果做一些细节上的调整。 例如各个块之间的Padding和Margin的值是否与整体页 面协调，各个子块之间是否协调统一等等。另外对于固定 宽度且居中的板式，需要考虑给页面添加背景，以适合大 显示器的用户使用等。 2考虑浏览器兼容处理，保障不同的用户查看到最好的页面效果 在设计网页时，经常碰到在IE中制作的页面换到Firefox预览时