姬小光前端小讲堂【第007期】- 切图大法之表格布局

前面几期中，我们已经了解到了前端开发的三板斧，即 HTML，CSS，Javascript。熟练掌握这三个基本技能，基本上就可以混口饭吃了。

在接下来的3期中，我会教给大家一个更实用的技能，切图大法！即从图片变为网页的技能，请大家持续关注。

切图大法之表格布局

“切图”一词是从美工时代遗留下来的，大概在2000年左右的时候，那时候的网页大部分都是使用表格布局，真的是把图片“切”成一块一块的，再堆砌成一个页面的。

所谓表格布局，就是利用 HTML 里面的表格元素（table）来控制页面的整体结构，在表格的单元格中填充内容，来实现页面效果的。

为了帮助大家理解表格布局，我们在桌面上新建一个word文档：

双击打开这个文档，选择插入表格：

选择 2X4 表格，并合并右下方的3个单元格，随便填写一些文字，得到如下的一个 word 文档：

接下来的过程就与第一期（回复 001）的操作类似了，选择“文件”->“另存为”，保存类型选择“网页”，比如 haha.htm，选择保存文件到桌面：

bingo~这样我们就又得到了一个网页：

左侧的砸X下就相当于一般页面的左侧导航，右侧的“姬小光砸缸”是页面的标题，而“缸漏了”就是页面的正文内容。

这样的网页，就是传说的 table 布局实现的。当我们稍微加一点样式，把表格的边框隐藏起来的时候，就看不出来这些布局的表格了。

当然，这样的网页一般不会直接使用，它还有很多冗余的代码，不过在制作一些文档型的网页时候， word 转存网页还是很有用的，比如一些产品的说明书，合同等要转换成网页的时候。

Word 转存大法还有一个用处，就是当你想批量保存 word 文档中的图片时，使用另存为网页的方法，在得到的 files 文件夹中，就有文章中的所有图片了。

如果想去掉这些冗余的代码，可以使用我之前写的一个小工具 http://jiguang.github.io/code-cleaner/ 来清理代码，然后再附加一些简单的样式，就可以交差啦，效率杠杠滴。

好，今天的表格布局就讲完了，下一期我们继续讲解从图片切片到网页，请大家预先安装 PhotoShop，即传说中的 PS，then, let's cut some images!