基于web标准的网站设计的核心在于如何使用众多web标准中的各项技术来达到表现与内容的分离，即网站的结构、表现、行为三者分离。只有真正实现了结构分离的网页设计，才是真正意义符合web标准的网页设计。不排除为了达到表现与内容分离，以后将诞生更多新的技术与结构，但从目前的web标准来看最理想的技术结构是使用HTML或XHTML来设计网页结构，推荐使用XHTML以更严谨的语言编写结构，并使用CSS（目前最新版本为2.0）来完成网页的布局表现。
 
1、CSS2.0的优势
        CSS（Cascading Style Sheets）层叠样式表目前最新版本是2.0版，是控制网页布局样式的基础，并真正能够做到网页表现与内容分离的一种样式设计语言。但相对于传统HTML的简单样式控制而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，以及拥有对网页对像盒模型样式控制能力，并能够进行初步页面交互设计，是目前基于文本展示的最优秀的表现设计语言。
 
        浏览器支持完善
        目前CSS2.0版本是众多浏览器支持最完善的版本，最新的浏览器均以20为CSS支持原型进行设计，使用CSS2.0样式设计的网页在众多平台及浏览器下样式表现最为接近。
        表现与结构分离
        CSS2.0真正意义上实现了设计代码与内容分离，而在CSS的设计代码中通过CSS的内部导入（Import）特性，又可以使设计代码根据设计需求进行二次分离。如为字体专门设计一套样式表，为版式、为各个频道等设计一套样式表，根据页面显示的需要重新组织，使得设计代码本身也便于维护与修改。
        样式设计控制功能强大
        对网页对象的位置排版能够进行像素级的精确控制，支持所有字体字号样式，优秀的盒模型控制能力，简单的交互设计能力。
        继承性能优越
        CSS2.0的语言在浏览器的解析顺序上，具有类似OOP面向对象的基本功能，浏览器能够根据CSS的级别先后应用多个样式定义，良好的CSS代码设计可以使得代码之间产生继承及重载关系，能够达到最大限度的代码重用，降低代码量及维护成本。
 
2、传统的table布局 VS css布局
        传统table布局方式实际上是利用了HTML table表格元素具有无边框特性，由于table元素可以在显示时使得单元格的边框和间距设置为0，即不显示边框，因此可以将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。
        table布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及定格则通过gif进行占位来实现，最终的结构是一个复杂的表格，不利于设计与修改。
        表格布局代码最常见的是在HTML标签<>之间嵌入一些设计代码，如width=“100%”，border=“0”等，表格布局的混合式代码就是这样编写的，大量样式设计代码混合在表格，单元格之间，使得可读性大大降低，维护起来成本也相当高，尽管现在有像Dreamweaver这样优秀的软件能帮我们可视化的进行这些代码的编写，而又经验的网页设计师都知道，Dreamweaver永远不会智能地帮你缩减代码或是重用代码，只有你需要什么，它帮你写入什么样式，最终结果是表格中到处留下设计的足迹，混合代码也由此而成。
        复杂表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多无意义的透明gif占位图及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。
        而使用CSS 布局则可以从根本上改变这种情况。CSS布局的重点不再放在table元素的设计中，取而代之的是HTML中的另一个元素div，div可以理解为图层或是一个“块”，div是一种比表格简单的元素，从语法上只有<div>开始以及</div>结束这样一个简单的定义，div的功能仅仅是用于将一段信息给标记出来用于后期的样式定义，这里将信息标记，就是我们前面所提到的网页的“结构”部分，通过div的使用，我们可以将网页中的各个元素划分到各个div中，成为网页中的结构体，而样式表现则由CSS来完成。
        div在使用时不需要像表格一样通过其内部的单元格来组织版式，通过CSS强大的样式定义功能可以比表格更简单更自由的来控制页面版式及样式。
        代码示例：
        XHTML部分：
        <div id ="content">[……内容……]</div>
        表示页面中定义了一个div并使用content这个class名称：
        CSS部分：
        #content {
                float:right   /*表示div在页面中出现在右侧，右对齐；*/
                margin-top:10px;      /*表示div居上有10像素的上边距；*/
                margin-right:20px;   /*同上，表示外边距；*/
                margin-bottom:10px;    /*同上，表示下外边距；*/
                margin-left:10px;         /*同上，表示左外边距；*/
                background-color:blue;   /*表示对象里的文字居中显示；*/
                text-align:center;         /*表示对象里的文字居中显示；*/
                line-height:160%;         /*表示对象中的文字行高为原高的160%；*/
                width:50%;                /*表示这个对象的宽度为页面的50%；*/
        }
 
        .content {}区域表示在CSS中定义了一个名为content的样式，用于对页面中所有class为content的对象（此处应用content的元素是div）进行样式控制。
        HTML中止保留了div标签机器中的内容，所有的样式设计代码均在CSS文件编写，这也就实现了CSS布局的第一个目标——表现与内容分离。
        从样式设计角度来看，CSS对当前名为content的div定义了许多属性，如上边距（margin-top）、浮动方式（float）、背景色（background-color）、文本对齐方式（text-align）等样式，这些样式有些在HTML标签中可以直接实现，而类似上边距（margin-top）等设计形式则是HTML本身不具备。不仅如此，这套代码可以应用到所有使用class=“content”的div或其他对象使用，充分提高代码利用率，效率大大提高。