多学员在学习的过程中都遇到过这样的问题：为什么老师讲的我都能听懂，然而做起来却总是诸多问题？千锋重庆校区老师告诉你，其实这是正常现象，谁也不能几天就成为大师，你的实践还太少了！练习多了，经验多了，静态网页自然也就手到擒来。

静态的网页其实就是由两部分组成，一个是底层结构HTML，另外一个就是负责修饰结构的CSS。其实书写静态网页就像小时候过家家，首先得把需要的家庭成员找齐了，即首先考虑要做一个什么样的网站，例如一个综合类网站包括：搜索框、导航、文章类别模块、文章标题以及一部分广告板块；一个博客主页包括：导航、文章缩略、文章搜索、文章导航以及没有显示但可能会有的评论区。

写页面的时候是有剧本的，这个剧本指网页设计图，或者某个现有网页，建议大家在模仿网上现有网页的时候利用浏览器自带的截图功能，把整个完整的页面截取下来，QQ浏览器，360浏览器都可以做到。这样的优点在于可以利用PS自己一步步测量数据、切图都做到亲力亲为，并且做到了页面数据的精准度，而不是随意的给数据，或者是利用浏览器的F12功能查看原网页的数据。

按照设计好的剧本接着就可以找对应的成员了，例如百度网页从上往下分为导航头部、中间logo和表单、尾部二维码和文字，相对来说页面的整体布局是比较简单的，当然还有很多不同类型的页面，布局要复杂一些。

当看到一个网页时，需要在脑海当中对页面进行一个简单的扫描，如果把页面当成一张纸，要怎么样从大到小一点点分割。当有了初步的认识之后，就可以把这些东西转化成HTML结构，所有不同颜色的框框在写的时候用的都是DIV。

从上往下，从大到小一点点先把某个模块以不同的颜色色块利用代码堆积出来。保证大的模块布局没问题之后，在往里面放一些小的东西，比如图片img、表单form input、文字、超链接a、列表ul li，这时候简单的页面结构就出来了。

接下来要把写好的结构进行美化，不然页面就会一团乱麻，没有美感，而网页当中润色部分是用CSS来做的。这个环节需要更加细心，例如百度首页导航红色框整体在绿色框的右边，需要给红色框添加float：right；红色框里面文字的字号大小，字体，字体颜色，水平间距，垂直间距都需要一点点写。如果在写的过程中遇见了问题，可以借助Chrome浏览器的调试功能，哪里错了用箭头点哪里，结构看左边，CSS看右边，看看CSS属性有没有显示，有没有划掉，有没有黄色报错等等。

在做页面时，需要大量的练习，才可以熟能生巧。一个页面写完之后，总结一下这个页面在书写过程中遇到了哪些问题，是怎么解决的，为什么这样解决，深入思考这个模块的这个效果可不可以用其他的方法来实现，以做到举一反三。

千锋重庆HTML5大前端培训，配合实战项目讲解网站页面布局，让你从容应对HTML、CSS的学习，基础打好了，才能更有信心面对之后的挑战。

的页面静态化分为两种，一种是伪静态，即url 重写，一种是真静态化。我们以真静态化为主来讲讲。

什么是PHP静态化

PHP静态化的简单理解就是使网站生成页面以静态HTML的形式展现在访客面前，PHP静态化分纯静态化和伪静态化，两者的区别在于PHP生成静态页面的处理机制不同。

为什么要让网页静态化

一、加快页面打开浏览速度，静态页面无需连接数据库打开速度较动态页面有明显提高;

二、有利于搜索引擎优化SEO，Baidu、Google都会优先收录静态页面，不仅被收录的快还收录的全;

三、减轻服务器负担，浏览网页无需调用系统数据库;

四、网站更安全，HTML页面不会受php相关漏洞的影响; 观看一下大一点的网站基本全是静态页面，而且可以减少攻击，防sql注入。

数据库出错时，不影响网站正常访问。

生成html文章虽操作上麻烦些，程序上繁杂些，但为了更利于搜索，为了速度更快些，更安全，这些牺牲还是值得的。

PHP生成静态HTML页面的方法

利用PHP模板生成静态页面

PHP模板实现静态化非常方便，比如安装和使用PHP Smarty实现网站静态化，也可以自己写一套模板解析规则，常见的可以模仿各类cms的模板规则。

1.使用PHP文件读写功能与ob缓存机制生成静态页面

比如某个商品的动态详情页地址是： http： // xxx. com ？xxxxxx. php？ gid =112 xxxxx

那么这里我们根据这个地址读取一次这个详情页的内容，然后保存为静态页，下次有人访问这个商品详情页动态地址时，我们可以

直接把已生成好的对应静态内容文件输出出来。