基于SEO的XHTML+CSS网页布局与美化.docVIP

基于SEO的XHTML+CSS网页布局与美化 　　摘要：XHTML+CSS布局模式因其自身的特点和优势正在广泛地被人们所接受和运用，它是未来网页布局的发展趋势。初学者刚开始使用这种模式时经常处于懵懂状态，文章以分析、设计、制作、调试页面为主线详细阐述了使用这种模式制作网页的过程，并对各个环节容易出现的问题建议了解决方法，特别提出在设计网页时要充分考虑到SEO优化工作，希望能给网页爱好者一些帮助。 　　关键词：SEO；XHTML+CSS；网页布局 　　中图分类号：TP393 文献标识码：A文章编号：1009-3044(2011)13-3023-02 　　Based on SEO XHTML+CSS Web Page Layout and Beautification 　　LI Shu-xiao 　　(Guangzhou Baiyun Industrial Commercial Technician Institute, Guangzhou 510450, China) 　　Abstract: XHTML + CSS layout model for its own characteristics and advantages are widely accepted and used by people, It is the page layout of the development trend of the future. Beginners just getting started with this model is ignorant of the state often，In this paper, analysis, design, production, testing the main line of the page using this model described in detail the process of making web pages,and for each link prone to problem solving methods suggested,specifically in designing web pages is to fully consider SEO optimization work,Hope this paper can give web enthusiasts some help. 　　Key words: SEO; XHTML+CSS; page layout 　　随着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布局网页的模式特点实现页面各模块的制作，凸显布局优势 　　页面的整体框架有了大体设计之后，对各个模块进行分别的处理，最后再统一