2，替换表格布局
基于CSS的页面比基于表格的页面更小更简单。
a)编写和编辑更容易，下载更快，
b)通过转向CSS，可以节省带宽。同时外联的css文件可以缓存和重用，不必随每次页面的下载又重下一次。
取代滥用本用于呈现表格数据的table元素而使用表格布局，可以考虑频繁使用的分栏式布局：
1）两栏，左侧固定宽度的侧栏，右边是弹性宽度的内容栏
2）三栏，左右各固定宽度的侧栏，中间是内容。
根据以往项目开发经验：
栏目的高度是由它们所包含的内容量决定。对于内容比重大的网站来说，因为不能保证单个内容栏跟其他栏等高，栏会固定高度，保证各栏高度相同；而对于内容简单短小页面，不固定高度问题不大。另外，主体内容的div应该在侧栏，页头或页脚之前，这样屏幕阅读器可以从页面最重要的内容开始线性读取页面。搜索引擎机器人也可以对排在页面前面的内容予以更高的优先级。
就两栏布局而言，有三种可能的宽度：
（1）两栏宽度固定。最普遍，固定宽度对于一部分用户来所可能过大，过大的宽度用户必须滚动水平内容来查看内容，降低文本的可读性
（2）左栏固定，内容栏是百分比宽度
（3）两栏都是百分比
从更好的用户体验考虑，主体内容应该能调整大小，以便适应不同窗口宽度。
3，内容与样式分离
当然我们的页面也需要漂亮的外观，以帮助我们在竞争中脱颖而出。这可以通过在独立的CSS样式中放置有关表现的信息来实现。CSS用来描述网页的外观，而浏览器可以自由选择不同的样式表或是修改过的样式表。实际上，你可以为不同的浏览器随意发送不同的样式表，也可以为它们独特的能力量身定制。这是响应式设计的基本实现方法。
“响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。”
出于方便或者是自身的编码习惯，在修改某种被更改的需求的样式代码时候，我们很容易在html代码中直接镶嵌样式代码。这样的做法除了更快的完成你暂时的任务之外没有任何好处。
4，使用CSS定位替代框架
网站使用框架的理由实际上就两种：
（1）为所有页面引入相同的静态内容，而不用单独编辑每个页面。例如导航，网页头部尾部。也就是说，单独的非框架页面可能比相应的框架页面更耗带宽，因为框架内容每次都要给客户端重新发送内容。
（2）显示多栏外观。例如Java API，包含包和类的列表，主体内容
然而，过多使用框架将降低可用性：
（1）难以标记数千或返回指定页面
（2）难以保存和打印页面
（3）过多的滚动条占据屏幕的宝贵空间
在每一个页面上都有导航和其他相同或几乎相同的内容，对网站来说是非常普遍的，使用CSS取代框架，关键在于设立对应每个框架的div，每个div内容是对应框架里的文档内容。然而，这样做的问题在于，它违反了DRY原则（Don't Repeat Youself,别重复你自己），对于相同的内同，虽然有时候只是很小的变化，但还是需要不断在这一页那一页重复出现。重复内容通常也是代码的坏味道。框架在静态页面上避免恶劣不必要的重复，我提倡清晰，可维护的代码，在不损害用户界面的前提下，我更远一选择难看的代码而不是难看的用户界面。日常中原始的HTML是重复的，但不是我们必须编辑的，很多时候我们可以通过后台自动生成重复内容。
Apache服务器端包含：
通常，拥有服务器端包含的以.shtml结尾的文件会在发送到客户端之前，告诉服务器需要解析自身以及包含的内容
几乎所有的Web服务器都支持某些形式的服务器端包含功能，使用服务器端包含各种非静态文件，性能有所降低，但影响不大。
<!DOCTYPE html> <html> <meta charset = "utf-8"> <body> <!--#include virtual = "/header.html" --> <!---这里嵌套主内容--> <!--#include virtual = "/footer.html"--> <!--#include virtual = "/siderbar.html"--> </body> </html>
尽管Apache默认的编译会包含mod_include，但可能不会在所有目录上启用，你需要子啊Apache主配置文件或是.htacess文件中添加一下三行配置，以指向每一个使用服务器包含的目录：
AddType text/html .shtml AddOutputFilter INCLUDES .shtml Options +Includes
<!DOCTYPE html>
<html>
<meta charset = "utf-8">
<body>
<!--主内容-->
<?php
include("footer.html");
include("sidebar.html");
?>
</body>
</html>