本小节基本要求：

• 了解css文件，html文件

要点：

1. 弃用的frameset，可以用div+frame替代；
2. frameset标签书写的位置

目前样式

前面所写的html文件是分开的，比如：header.html与body.html是分开的，本文将它们结合，放在一个html中。

以下是目前的状态：

目标样式

Step1：新建一个html文件，取名index(名字可以随便取)

Step2：frameset标签介绍

这里需要用到一个标签：frameset。接下来看看它的作用是什么。

frameset标签不要写在body标签里面，因为frameset标签本身就可以看作是一个body标签，你可以把它理解为与body标签是同级别的。

frameset翻译成汉语就是框架建立。建立什么框架？当然是网站的框架，这个标签在过去那就是无敌的存在，不过现在已经被抛弃了。具体原因可以百度，即使它被抛弃了，但是不妨碍我们使用它！

运行一下，看结果：

神马都没有！

Step3：在frameset中引入header.html与body.html

注意我引入它们的时候用的标签是frame。

还有一个关键的点：就是文件引入的路径问题。看左侧，我的header.html,body.html,index.html三个html文件是在一个目录下的，然后看右边我的引入方式是:src="header.html".

如果你放的不是在一个目录下，你需要跳到那个目录下去引入，具体怎么跳目录可以百度一下。

不过我建议最好和我一样，因为我们的关注点不是怎么引入文件，而是这个网页该怎么搭建起来，最好专注起来！

查看效果：

可以发现，header.html中的头部内容是出来了，但是body.html没有出来啊？我明明引入body.html文件了呀！

Step4：frameset标签起决定性的参数

• rows参数：将网页以上下方式进行分割
• cols参数：将网页以左右方式进行分割

我用的是rows，翻译过来就是行的意思，也可以理解为以一行一行的形式将网页分割掉。

看第一行我给它分了5%的面积，第二行给它分了95%的面积。(整个网页是100%的面积)也就是说，本网页共计两行。

ps:两行就足够了！想分多少行，自己修改参数，不过不能超过整个网页的面积：100%。

• 5%对应是header.html；是第一行
• 95%对应的是body.html；是第二行

看结果：

哈哈，body.html出来了吧。

思考一个问题，为什么header.html对应的是5%，而不是95%呢？

这个与引入文件的顺序和参数顺序有关，它们是对应的。

Step5：稍微让整个框架好看一点，比如加个背景图

我新建了一个名叫 img 的文件夹，放了一张壁纸进去。

看我写css的方式哦，我之前用过一次。直接在html文件定义选择器了。

不过不建议这样写，最好能够让css文件与html文件分离开，但是初学者可以这样。

ps:注意在这里定义选择器，需要用到一个标签来包住，<style></style>

再看两个参数：

frameborder设置为no ：

就是取消框架的边框显示！不让它显示边框了，要不然太难看。

scrolling设置为no：

就是取消框架的滚动条，网页本身是有滚动条的，我们把frame框架自带的取消掉，要不然太难看。

marginheight：40px

我之前说过，margin是外边距。也就是说，body.html与header.html要间隔40px的高度

注意：

图片的引入路径是这样的：

../img/back.jpg;

只有和我的文件目录一致，按我的方式引入是没有问题的。

运行一下看效果：

到此就结束了，接下来我会继续写文章。

文章是存入mysql数据库的，需要借助Java从mysql数据库拿出文章，然后放到这个页面上。

这里涉及到了很多很多东西，但是都很简单。

现在对于网站开发这块，Java这套编程语言还是比较流行的。

对于普通的数据存储，mysql数据库就够了。以后可能会引入redis和elasticsearch+zabbix监控JVM，不过都是后话。

学一点，是一点！