搜索
SR數位設計 ECSHOP RWD響應式技術開發 HTML/CSS 語法 將WORD表格轉換成網頁語法教學
byadmin 發表於 2013-6-17 23:42:01 , 10824人已閱讀 , 0人回應
相信有使用過WORD的朋友應該都知道 , WORD2007之後的版本 , 在表格設計方面有非常多高質感的樣式可以選擇 , 如果今天要在網站上製作同等效果的表格樣式 , 必須要對HTML以及CSS語法具備一定程度的知識與了解 。今天要教大家的方式就是在不懂語法的情況下製作WORD表格的方法 , 讓你不需要了解網頁語法也可以製作出高質感效果的表格 ~

首先必要準備的工具當然就是 2007以上版本的WORD
另外也推薦各位先下載一款很好用的編輯器 EditPlus , 等會兒製作的時候會用到

WORD表格轉換網頁製作步驟


首先當然是要先用WORD製作出一個基本的表格
01.jpg

接著套用WORD內建的表格設計樣式 (點擊一下表格右上角就會出現「設計」選項,即可進入選擇樣式)
02.jpg


看!! 簡單的套用一下WORD表格樣式 , 一個高質感的表格就出來囉~
(注意:套用字型的時候請使用"微軟正黑體,新細明體,標楷體"三種類型,使用其它字型若瀏覽者電腦沒有該字型,則無法正確顯示你設定的字型樣式)
03.jpg


接下來到了最重要的部分了 , 要將WORD轉換成網頁樣式, 其實很簡單 , 請在另存新檔的時候選擇存檔類型為 「已篩選的網頁」, 就可以將表格快速轉換成網頁語法。

轉換完成後會發現 , 那是一整個網頁頁面 , 而我只需要"表格" 的部分並且應用在我自己的網頁上 , 因此我們要手動將表格語法給抽取出來:
1. 打開剛剛下載的EditPlus , 安裝完畢後 , 使用EditPlus開啟剛剛的word轉換完成的htm檔案

2. 建議開啟程式碼資料夾管理選項(view>code folding > 勾上use code folding), 方便等下複製程式碼
05.jpg


3. 勾選後會發現一些程式碼旁有出現 "-" 的符號 (見下圖) , 這時候我們來找尋一下頁面中 <table 的文字 , 並且點擊<table旁的"-" 符號 , 將整串程式碼收合起來。
《點擊前》
06.jpg


《點擊後》
07.jpg

收合後會發現下一行直接出現</table> 的標籤 , 這時候我們就將上圖收合後的程式碼反白複製起來 ( 包含</table>見下圖 ), 因為這一段就是我們要的表格網頁語法。將它自由貼到您的網站或是部落格上就可以使用囉  !

2013-07-13_170102.jpg


《轉換成網頁的樣式》
09.jpg


其實轉換完成後大家應該多少會發現在行距上可能和你WORD看到有些許不同 , 若再不懂CSS語法的情況下 , 可以透過WORD本身在行高的設定上建議設定2 , 整體顯示的樣式會比較好看 (見下圖)
2013-07-13_165920.jpg



補充說明:
以上的方法僅是推薦給不會使用HTML與CSS語法的朋友快速使用的一個解套方式 , 若今天您對於HTML+CSS有一定功力的朋友 , 建議自己使用CSS去美化網頁 , 因為WORD本身畢竟不是網頁設計工具 , 轉換成表格後它會產生非常多重覆且不必要的程式碼 !

從這邊也可以順便分享給各位朋友一個正確觀念 , 網頁設計絕對不是只看呈現在頁面上的樣貌 , 要去看它背後使用的程式碼 , 好的程式碼就是簡單、清潔、高效率 , 並且高度利於SEO優化 ; 壞的程式碼則是冗長、低效、肥大,非標準化當然也就不利於SEO優化 , 一個標準化網頁的價值 , 絕對不是非標準化頁面所能比擬的 , 最後筆者提醒大家請小心「純圖片網頁」以及「純表格網頁」
Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.124914 second(s), 39 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2017-11-24 04:37

回頂部