1 / 12

專案部 政府執行單位 Tilla

專案部 政府執行單位 Tilla. 課程大綱. 課前 準備 模組標題套用 圖片 自訂模組外觀實 作 頁籤模組 認識與實 作 QA 解答 注意事項. 課前準備. 準備一測試網站 備 妥 html 、 CSS 練習檔、需自行上傳套用之所有圖片 -ex: 模組 tittle 圖片 、 內頁 tittle 圖片 安裝兩種以上瀏覽器以備查驗 -ex: IE6 、 IE7 、 IE8 、 FireFox 安裝 firebug ，並使用 firefox 開啟前後台，以便隨時查驗問題. 模組標題套用圖片.

yardley
Download Presentation

專案部 政府執行單位 Tilla

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. 專案部 政府執行單位 Tilla

  2. 課程大綱 • 課前準備 • 模組標題套用圖片 • 自訂模組外觀實作 • 頁籤模組認識與實作 • QA解答 • 注意事項

  3. 課前準備 • 準備一測試網站 • 備妥html、CSS練習檔、需自行上傳套用之所有圖片 • -ex: 模組tittle圖片、內頁tittle圖片 • 安裝兩種以上瀏覽器以備查驗 • -ex: IE6、IE7、IE8、FireFox • 安裝firebug，並使用firefox開啟前後台，以便隨時查驗問題

  4. 模組標題套用圖片 • 當想讓模組標題跟預設樣式長得不一樣時該怎麼辦？ • 如何知道標題圖檔寬度該設定為多少？ • 使用Photoshop製作一個標題icon(EX :頭條新聞icon->套用至公告模組標題) • 登入後台->頁面樣式->首頁畫面設定->公告模組-> • 模組外觀->模組樣式->標題格式->使用圖檔->儲存並返回 • 方法一：使用Calipers小工具 • 方法二：截取瀏覽器畫面，再作裁切 • 注意：圖片兩邊不需留白，以避免因圖片過寬，而使欄位撐大造成頁面變形。 請使用【模組標題套圖練習】資料夾進行實作

  5. 自訂模組外觀實作 • 複製語法－後台->頁面樣式->自訂模組外觀->任選一款系統模組作複製 • 貼上－新增記事本->將代碼貼上 • 模組裁切－使用photoshop，將模組原始檔打開，切分為 • 上(左、中、右)td_le、td_bg、td_ri • 中(左、中、右) md_le、md_bg、md_ri • 下(左、中、右) bd_le、bd_bg、bd_ri • 上傳－後台->文檔系統->新增資料夾->將zip檔上傳 • 修改語法－參考語法解說圖檔，依續將模組背景圖尺寸、路徑作更換 • 複製－複製記事本全部語法 • 新增－後台->頁面樣式->自訂模組外觀->新增自訂模組外觀 • 貼上－後台->頁面樣式->自訂模組外觀->於外觀代碼欄位中貼上 請使用【自訂模組外觀練習】資料夾進行實作

  6. 頁籤模組認識與實作 一個版型只能有一個預設頁籤樣式， 不可於後台模組外觀作替換。 • module-complex為頁籤模組名稱 • .submenu設定頁籤tab項目下方左邊背景圖 • .submenu-inner設定頁籤tab項目下方右邊背景圖 • .submenu li a div設定tab未點選狀態下左邊背景圖 • .submenu li a divdiv設定tab未點選狀態下右邊背景圖及文字樣式 • .submenu lia.activediv設定tab已點選狀態下左邊背景圖 • .submenu lia.activedivdiv設定tab已點選狀態下右邊背景圖及文字樣式 • 如何於同一版型中套用不同頁籤樣式？ • 使用模組編號個別設定 請使用【頁簽模組練習】資料夾進行實作

  7. QA解答 Q：網頁IE標題（會計資訊系）會跟網頁內的大標題一模一樣，如果修改內站網 頁大標題，連上面的IE標題也會跟著變動。 A：step1-於頁尾設定.sitename為display: none step2-製作一張美美的webname圖片，於後台->系統設定->公司資料->logo上傳套用 Q：能將首頁連結置中嗎？ A：頁首連結為使用絕對定位方式作設定，故僅需於.headnav，設定靠右位置即可。 Q：對於CCS樣式設定，該如何製作出左圖背景的語法（固定左右邊界以及背景漸層的感 覺），以及右圖上面四個小連結的語法？ A：於.outer設定整體頁面寬度，於.container設定左邊漸層背景，於.container-inner設定右邊 漸層背景，且需設定為repeat-y，右圖連結是針對每一個.li a設定不同的class，再依據不 同的class，設定不同的icon。

  8. QA解答 Q：首頁的頁頭如何呈現下圖的模式。 A：於自訂義頁首中，新增一<div><ul><li><a></a></li></ul></div>，並設定此div樣式。 Q：此整體的頁頭、框架是以一套模組套用還是以圖檔方式呈現？ A：1－logo+自訂義頭部背景，2－模組頭部套圖，3－使用自訂模組放置圖片 1 3 2

  9. QA解答 Q：如何製作呈現下圖顯示。 A：於.item-title設定背景圖片，查看範例 Q：如何在公告的內文以拉連式的閱讀? A：僅能於嵌入iframe方式製作。 iframe簡易教學

  10. QA解答 Q：內文如何表格是怎麼修改(顏色)，因為用WORD貼上的功能，設計的內容會跑掉。 A：一般直接使用word貼上時，會因為word其他夾帶的語法而使表格樣式無法完整貼上， 建議表格製作方式－ 1.請使用Dreamweaver製作表格，再將語法複製後，貼於epage後台編輯器中(貼上時樣式 請直接寫於html中)。 2.直接於後台編輯器中製作。 Q：公告內容是否可以建立背景? A：可以，如模組樣式中間部份為空白，可設定於.mm層級中，但如此文字不易閱讀，故 不建議製作。 公告模組背景範例

  11. 注意事項 • 製作epage CSS樣式最重要的是－ • 　 請善用firebug進行觀察！

  12. Thank You !

More Related