CSS-tranning_1000713

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

similar documents