我们今天就以下面的例题来学习一下。
请建立一个目录框架网页，并按照要求将此文件保存名为page2.html。
要求:在目录框架网页建立一个4行1列的表格（高300像素、宽100像素），表格居中，边框为黄色、背景为绿色；表格中的文字为华文楷体、14磅、加粗、黑色；单元格内容水平方向居右对齐，垂直方向相对底边对齐；在主框架网页中新建网页并插入素材包内的图片8139.jpg；设置"美食介绍"与素材包内sc7.htm 文件的链接，设置"相关新闻"与网站www.sina.com.cn链接，设置"相关图片"与素材包内bg7.jpg文件的链接，设置"网络高手"与邮箱[email protected]链接
第一步：新建网页
首先我们打开软件，选择菜单栏下“修改”——“框架集”——“拆分为左右框架”。进行三个网页的保存。
1.整个框架网页。
选中框架最中间的竖线，当我们看到代码栏中有“<frameset cols="597,598">”代表我们选取成功。
2.框架网页的左侧
选中左侧空白区域即可
3.是框架网页的右侧。
选中右侧空白区域即可
如图：
第二步：制作左边的框架网页
首先插入表格并设置基本属性
1.选择主菜单下的“插入”——“表格”如图。
2.接着设置表格的属性
（4行1列的表格“高300像素、宽100像素”，表格边框为黄色、背景为绿色。）其中的高，边框颜色都是使用代码输入的。如图：
3.至于背景和居中我们可以到属性面板的页面布局进行设计就可以了。如图：
第三步：设置css样式
1.首先打开css面板，选择该面板的下面的“+”号，出现下图所示的效果。
2.设置样式。选择“id”类型，取名为“stlye1”,保存了“仅存为该文档”。如图：
3.设置样式属性。“华文楷体、14磅、加粗、黑色”。如图：
第四步：使用css样式
1.在表格中书写相应的文字。如图：
2.使用样式。选中所有的文字，然后来到属性面板。选择“类”——“stlye1”,我们就设置好css样式了。如图：
第五步：设置文字的位置。
选中文字，来到属性面板，设置“水平”，“垂直”的属性。如图：
第六步：设置文字链接。
选中“美食介绍”，来到属性面板，选择“链接”，将我们要链接的地址输入进去就可以了。接下来依次选中其他文字就可以了。效果如下：
（注意：我们先前选中的网页文件，图片文件是可以直接填写的。而网址我们要在前面加上“http://”,邮箱地址要加上"mail to:"）
第七步：设置右侧网页
选中右侧网页，选择“插入”——“图片”，选择我们想要插入的图片我们就完成了。如图：
此时我们就可以打开htm文件，在浏览器中浏览效果了，如图：
很多Web小白在学习、在选择适合自己的Web语言时，比较纠结。其实有很多流行的、强大的前端开源框架，帮助你轻松构建漂亮的网站前端。
1、Pure
Bootstrap，Patternfly和MDC Web是功能非常强大的CSS框架，但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架，可以尝试Pure.css，它本身更接近于CSS编程，但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架，它由Yahoo开发，根据BSD许可是开源的。
2、Foundation
Foundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司，组织都使用该框架，并且该框架具有大量可用的文档。
3、Skeleton
如果说还有什么框架比Pure更加轻量级，那一定是Skeleton。Skeleton库只有大约400行，并且该框架仅提供一些基本的CSS框架组件。尽管如此，Skeleton还是提供了详细的文档来帮助你快速上手。
4、Materialize
Materialize是一个基于Material Design风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合你的自定义组件，为你提供默认的样式。Materialize的文档页面非常全面，并且很容易遵循。其组件页面包括按钮，卡片，导航等。
5、Bootstrap
Bootstrap无疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。使用Bootstrap，你可以将不同的组件和布局组合在一起，从而创建有趣的页面设计。它还提供了大量详细的文档。目前在Github上已经有1100多个贡献者，19000多个提交。
精致的 CSS UI 框架：1、Bootstrap – 最流行的Web前端UI框架
2、jQuery UI - 基于jQuery的开源Javascript框架
3、jQuery UI Bootstrap
4、BootMetro - Metro风格的CSS框架
5、Flat UI - 扁平风格 UI 工具包
6、网易CSS框架 NEC
7、Alloy UI – 功能强大的CSS UI框架
8、Cardinal – 移动端的CSS UI框架
9、快速开发CSS的框架 CSScaffold
10、后台UI开发框架 MuseUI
