enter image description here

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

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

切图大法之表格布局

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

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

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

enter image description here

双击打开这个文档,选择插入表格:

enter image description here

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

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

enter image description here

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

enter image description here

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

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

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

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

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

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

enter image description here