姬小光前端興趣班【第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!