1 / 6

E-Page 教育訓練

E-Page 教育訓練. 美工. Style 內容介紹. 上傳樣式步驟 「頁面樣式」 > 「頁面樣式變更」 > 「新增自訂版型」 輸入版型名稱，選擇 Style.zip 上傳，新增自訂版型 選取該版型，按修改 Style.zip 解壓縮後，內包含 Image large.png 、 small.png Style.css File.psd. 版面設計. 版面基本設定 寬度： 1200px 高度： 1276px 背景內容：透明 做好圖層分類 切割對齊小工具：參考線 儲存方式 「另存新檔」為**** .psd

zachery-andrews
Download Presentation

E-Page 教育訓練

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. E-Page教育訓練 美工

  2. Style內容介紹 • 上傳樣式步驟 • 「頁面樣式」>「頁面樣式變更」>「新增自訂版型」 • 輸入版型名稱，選擇Style.zip上傳，新增自訂版型 • 選取該版型，按修改 • Style.zip解壓縮後，內包含 • Image • large.png、small.png • Style.css • File.psd

  3. 版面設計 • 版面基本設定 • 寬度：1200px 高度：1276px 背景內容：透明 • 做好圖層分類 • 切割對齊小工具：參考線 • 儲存方式 • 「另存新檔」為****.psd • 「存儲為網頁與裝置用」>格式選擇png-24>儲存成large.png • 開啟large.png，將其版面縮小(180*185)，儲存為small.png

  4. 切割版面 • 切圖方式 • 選好圖層分類按右鍵「合併群組」 • 點選 ，框選欲切圖的區塊，複製 • 「開新檔案」>貼上 • 「存儲為網頁與裝置用」>格式png-24>儲存到image資料夾

  5. 修改CSS樣式 • 將圖檔放入CSS • 使用「尋找工具」，可快速找出語法 • 換置圖檔名稱及設定細項規格 • 儲存>Style資料夾加壓縮成zip>上傳 2 1 3

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

More Related