E-Page 教育訓練美工

Style 內容介紹• 上傳樣式步驟

① 「頁面樣式」 > 「頁面樣式變更」 >「新增自訂版型」

② 輸入版型名稱，選擇 Style.zip 上傳，新增自訂版型

③ 選取該版型，按修改

• Style.zip 解壓縮後，內包含① Image② large.png、 small.png③ Style.css④ File.psd

版面設計

• 版面基本設定① 寬度： 1200px 高度： 1276px 背景內容：透

明② 做好圖層分類③ 切割對齊小工具：參考線

• 儲存方式① 「另存新檔」為 ****.psd② 「存儲為網頁與裝置用」 > 格式選擇 png-24>

儲存成 large.png③ 開啟 large.png ，將其版面縮小 (180*185) ，儲

存為 small.png

• 切圖方式① 選好圖層分類按右鍵「合

併群組」② 點選 ，框選欲切圖的區

塊，複製③ 「開新檔案」 > 貼上④ 「存儲為網頁與裝置

用」 > 格式 png-24> 儲存到 image 資料夾

切割版面

修改 CSS 樣式• 將圖檔放入 CSS

① 使用「尋找工具」，可快速找出語法② 換置圖檔名稱及設定細項規格③ 儲存 >Style 資料夾加壓縮成 zip> 上傳

1

2

3

套板後修改

• 找出語法問題所在① 使用 Firebug 選取欲修改的版面區塊② 找到相對應語法進行修改③ 確認欲修改的語法後，將其放入 style.css 上傳④ 重複 1~3 動作直到網頁內容符合所願