專案部 政府執行單位 Tilla

課程大綱課前準備

模組標題套用圖片

自訂模組外觀實作

頁籤模組認識與實作

QA 解答

注意事項

課前準備準備一測試網站

備妥 html 、 CSS 練習檔、需自行上傳套用之所有圖片 -ex: 模組 tittle 圖片、內頁 tittle 圖片

安裝兩種以上瀏覽器以備查驗 -ex: IE6 、 IE7 、 IE8 、 FireFox

安裝 firebug ，並使用 firefox 開啟前後台，以便隨時查驗問題

使用 Photoshop 製作一個標題 icon(EX : 頭條新聞 icon-> 套用至公告模組標題 )

登入後台 -> 頁面樣式 -> 首頁畫面設定 -> 公告模組 -> 模組外觀 -> 模組樣式 -> 標題格式 -> 使用圖檔 -> 儲存並返回

方法一：使用 Calipers 小工具

方法二：截取瀏覽器畫面，再作裁切

注意：圖片兩邊不需留白，以避免因圖片過寬，而使欄位撐大造成頁面變形。

模組標題套用圖片當想讓模組標題跟預設樣式長得不一樣時該怎麼辦？

如何知道標題圖檔寬度該設定為多少？

請使用【模組標題套圖練習】資料夾進行實作

自訂模組外觀實作複製語法－後台 -> 頁面樣式 -> 自訂模組外觀 -> 任選一款系統模組作複製

貼上－新增記事本 -> 將代碼貼上

模組裁切－使用 photoshop ，將模組原始檔打開，切分為 上 ( 左、中、右 )td_le 、 td_bg 、 td_ri 中 ( 左、中、右 ) md_le 、 md_bg 、 md_ri 下 ( 左、中、右 ) bd_le 、 bd_bg 、 bd_ri

上傳－後台 -> 文檔系統 -> 新增資料夾 -> 將 zip 檔上傳

修改語法－參考語法解說圖檔，依續將模組背景圖尺寸、路徑作更換

複製－複製記事本全部語法

新增－後台 -> 頁面樣式 -> 自訂模組外觀 -> 新增自訂模組外觀

貼上－後台 -> 頁面樣式 -> 自訂模組外觀 -> 於外觀代碼欄位中貼上

請使用【自訂模組外觀練習】資料夾進行實作

頁籤模組認識與實作module-complex 為頁籤模組名稱

.submenu設定頁籤 tab項目下方左邊背景圖

.submenu-inner 設定頁籤 tab項目下方右邊背景圖

.submenu li a div 設定 tab 未點選狀態下左邊背景圖

.submenu li a div div 設定 tab 未點選狀態下右邊背景圖及文字樣式

.submenu li a.active div 設定 tab 已點選狀態下左邊背景圖

.submenu li a.active div div 設定 tab 已點選狀態下右邊背景圖及文字樣式

如何於同一版型中套用不同頁籤樣式？

使用模組編號個別設定

一個版型只能有一個預設頁籤樣式，不可於後台模組外觀作替換。

請使用【頁簽模組練習】資料夾進行實作

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 。

QA解答

Q ：首頁的頁頭如何呈現下圖的模式。 A ：於自訂義頁首中，新增一 <div><ul><li><a></a></li></ul></div> ，並設定此 div 樣式。

Q ：此整體的頁頭、框架是以一套模組套用還是以圖檔方式呈現？A ： 1 － logo+ 自訂義頭部背景， 2 －模組頭部套圖， 3 －使用自訂模組放置圖片

1

23

QA解答

Q ：如何製作呈現下圖顯示。A ：於 .item-title 設定背景圖片，查看範例

Q ：如何在公告的內文以拉連式的閱讀 ?A ：僅能於嵌入 iframe 方式製作。　 iframe簡易教學

QA解答

Q ：內文如何表格是怎麼修改 (顏色 ) ，因為用 WORD 貼上的功能，設計的內容會跑掉。A ：一般直接使用 word 貼上時，會因為 word其他夾帶的語法而使表格樣式無法完整貼上， 建議表格製作方式－ 1. 請使用 Dreamweaver 製作表格，再將語法複製後，貼於 epage 後台編輯器中 ( 貼上時樣式 請直接寫於 html 中 ) 。 2.直接於後台編輯器中製作。

Q ：公告內容是否可以建立背景 ?A ：可以，如模組樣式中間部份為空白，可設定於 .mm 層級中，但如此文字不易閱讀，故 不建議製作。　 公告模組背景範例

注意事項

製作 epage CSS 樣式最重要的是－

　 請善用 firebug 進行觀察！