Transcript CSS-tranning_1000713

專案部
政府執行單位 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
3
2
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進行觀察！