相信有使用過WORD的朋友應該都知道 , WORD2007之後的版本 , 在表格設計方面有非常多高質感的樣式可以選擇 , 如果今天要在網站上製作同等效果的表格樣式 , 必須要對HTML以及CSS語法具備一定程度的知識與了解 。今天要教大家的方式就是在不懂語法的情況下製作WORD表格的方法 , 讓你不需要了解網頁語法也可以製作出高質感效果的表格 ~
首先必要準備的工具當然就是 2007以上版本的WORD
另外也推薦各位先下載一款很好用的編輯器 EditPlus , 等會兒製作的時候會用到
WORD表格轉換網頁製作步驟
首先當然是要先用WORD製作出一個基本的表格
接著套用WORD內建的表格設計樣式 (點擊一下表格右上角就會出現「設計」選項,即可進入選擇樣式)
看!! 簡單的套用一下WORD表格樣式 , 一個高質感的表格就出來囉~
(注意：套用字型的時候請使用"微軟正黑體,新細明體,標楷體"三種類型,使用其它字型若瀏覽者電腦沒有該字型,則無法正確顯示你設定的字型樣式)
接下來到了最重要的部分了 , 要將WORD轉換成網頁樣式, 其實很簡單 , 請在另存新檔的時候選擇存檔類型為 「已篩選的網頁」, 就可以將表格快速轉換成網頁語法。
轉換完成後會發現 , 那是一整個網頁頁面 , 而我只需要"表格" 的部分並且應用在我自己的網頁上 , 因此我們要手動將表格語法給抽取出來：
1. 打開剛剛下載的EditPlus , 安裝完畢後 , 使用EditPlus開啟剛剛的word轉換完成的htm檔案
2. 建議開啟程式碼資料夾管理選項(view>code folding > 勾上use code folding), 方便等下複製程式碼
3. 勾選後會發現一些程式碼旁有出現 "-" 的符號 (見下圖) , 這時候我們來找尋一下頁面中 <table 的文字 , 並且點擊<table旁的"-" 符號 , 將整串程式碼收合起來。
《點擊前》
《點擊後》
收合後會發現下一行直接出現</table> 的標籤 , 這時候我們就將上圖收合後的程式碼反白複製起來 ( 包含</table>見下圖 ), 因為這一段就是我們要的表格網頁語法。將它自由貼到您的網站或是部落格上就可以使用囉 !
《轉換成網頁的樣式》
其實轉換完成後大家應該多少會發現在行距上可能和你WORD看到有些許不同 , 若再不懂CSS語法的情況下 , 可以透過WORD本身在行高的設定上建議設定2 , 整體顯示的樣式會比較好看 (見下圖)
補充說明：
以上的方法僅是推薦給不會使用HTML與CSS語法的朋友快速使用的一個解套方式 , 若今天您對於HTML+CSS有一定功力的朋友 , 建議自己使用CSS去美化網頁 , 因為WORD本身畢竟不是網頁設計工具 , 轉換成表格後它會產生非常多重覆且不必要的程式碼 !
從這邊也可以順便分享給各位朋友一個正確觀念 , 網頁設計絕對不是只看呈現在頁面上的樣貌 , 要去看它背後使用的程式碼 , 好的程式碼就是簡單、清潔、高效率 , 並且高度利於SEO優化 ; 壞的程式碼則是冗長、低效、肥大，非標準化當然也就不利於SEO優化 , 一個標準化網頁的價值 , 絕對不是非標準化頁面所能比擬的 , 最後筆者提醒大家請小心「純圖片網頁」以及「純表格網頁」 |
喜歡
Facebook Like Box 寬度控制失效解決辦法 !
利用Google表單進階製作線上測驗 !! (flubaroo線上測驗外掛)
