跟着WEB2.0规范化设计理念的普遍，业界愈来愈多的关注XHTML+CSS（也称DIV+CSS）的尺度化设计，国内良多年夜型家数web曾经纷繁采纳XHTML+CSS建造体例。从今朝现实使用状况来看，XHTML+CSS结构的站点会使得页面载入更快、降低流量费用、web改版相对简单、极快等。出格是XHTML+CSS的web机关对SEO站点优化起到的传染打动越来越显然，因为这种结构的HTML页面里根基只有翰墨或图片信息，样式放在CSS内中，何等搜索爬虫就不会管CSS，只要采集HTML里的内容就能了，大猛前进爬虫的服从，这类结构往往还能让关头词更斥逐、密度更高，契合W3C尺度的上网页在引擎优化SEO方面自身就有优势，更得seo搜索引擎蜘蛛的喜爱。本文作者就XHTML+CSS网页组织内容谈一下整体使用的一些心得体味，本文以“商务web”为例来成长声名。 
    1 做好网页的架构解析工作，是设计好网页的前提 
    一个领有高接见会面量的web是获胜站点的一个掂量要素，咱们在设计网页时要按照主题的差距进行合理的板式抉择和颜色装扮，将web要抵达的鼓吹效应经由过程合理服装服装而组成的时髦页面来吸引客户的兴味，促使他们来会晤咱们的站点。 
    1.1 分解页面板式架构 
    “商务网站”首要以网上传扬新款和销售为主，这品种型web的共性即是首要让人感受到商品丰厚而又标致细腻，是以在抉择色调是主要以蓝色、绿色为主，小图标、小按钮、边框线等点缀小图形以红、橙为主，显得页面都丽多彩、沉闷、鄙陋，视觉袭击力较强；此外，“手机商务网站”主页面主要涵概webBANNER、导航栏、站内搜索、新产物图片鼓吹、最新信息、站点效劳、产品信息、版权信息等。本页面的板式草图如图1所示。 
    1.2 剖析页面排版架构 
    整个网页的框架对照简单，搜聚Banner图片、导航条、搜寻栏、页面主体及版权信息等。因此，采用了基本的网页框架结构，如图2所示。了了切确的架构设计是下一步机关的根柢与症结。 
    1.3 依据XHTML+CSS组织网页的形式个性实现页面各模块的产，凸显构造优势 
    页面的整体框架也有大致设计往后，对各个模块发展分其它措置，收尾再匹敌整合，这是设计制造web的一样泛泛轨范，养成精采的设计习气即可熟能生巧。 
    1.3.1 操作DIV标识表记标帜对页面发展分块，必定好各块以及子块之间的关系 
    依据前边解析的排版结构对页面发展分块，如图3所示，另外打造过程留心哄骗批注语句，以便让页面代码清楚、易读。 
    1.3.2 界说CSS样式完成对各块功能的设计与美化 
    页面各模块划分好以后，此后就是定义CSS样式对其发展定位与美化工作了，具体独霸之前先做好整个站点的样式赏析与规划使命，这是有用使用CSS样式表的前提。 
    1）对整个web中要用到的CSS样式表发展抗衡规划。从站点功效一致性准则登程，对整个网站的样式发展琐细的综合和规划，详细列举各式式的称说与样式内容。额外要善用属性简写，尽可能地削减冗余代码，好比 
    margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px;可以写成多么的花式margin:0 10px。 
    2）统一规划CSS样式的应用畛域。对站点中各个页面都要使用的样式功效（例各页面中的平平文本信息接纳对立的巨细、字体、行高、颜色等）统纷歧定义在外部样式表文件中，利便各页面的挪用，而对某个页面中要零丁使用的成果则之内嵌神情式表的形式直接在响应页面中发展定义。
    3）基于SEO的样式命名规范 
    搜索引擎是通过抓取web源代码来进行亲近交兵的，如何手法更好地让搜寻引擎的爬虫更快更粗略地觉察到web内容的相关性，增强web的征采优化？可能从最基本的定名划定例矩着手会成心想不到的播种，下面以前端设计的角度整顿了一些常用的定名划定端方，就很好地考虑到了搜寻引擎的偏好，在页面设计的历程中，尽可能做到让搜索引擎大白，从而抵达我们的设计指标，如表1所示。 
    1.3.3 对页面下场发展整体调整，担保页面的协协调悦目 
    经由上边的法度页面也曾基本成形，在出产完成的收尾，往往还需要对页面遵循成就做一些细节上的斡旋。譬喻各个块之间的Padding和Margin的值能否与整体页面协调，各个子块之间是否协调统一等等。另外对于固定宽度且居中的板式，紧要思考给页面增进靠山，以适当大浮现器的用户使用等。 
    2 思索浏览器兼容处置赏罚，保障不合的用户搜检到最好的页面成就 

    在设计网页时，不时碰着在IE中产的页面换到Firefox预览时，缔造页面成就转变很大。针对何等的问题，我们在设计网页时就要进行响应的处理。经常使用的方法有从空白页面劈脸，每做一小步，就同时在各类阅读器中查看，一旦发现闪现效果分歧，即时查找原由，谈判规画法子；也能够通过软件器械模拟网页在各种差距的涉猎器中的功效，譬喻当前巨匠用的IETer v0.2.3，这样可以边做边改削；另外，人人在制造进程中要长于总结一些屡屡出标题问题的符号的处置门径。比如边境重当令行使padding或border来提防。您可能会为了一点不应该呈现的空间而焦头烂额，笼统您需要一点点空间时，怎么样都挤不进去，若是您有效到margin，那末很轻易爆发边境的重合。又如无心候某些谬曲解使50%+50%成为100.1%，使网页泛起标题问题，这时辰请考试测验将这些值改为49%，致使49.9%，往往这样的做法才规画了标题等等。