台灣數位學習數位教學平台 RSS feed provider zh-tw http://sites.xms.com.tw/board.php?courseID=191&f=doclist&folderID=1466 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7430 在側欄內區塊(#vmenu .box)的部分，我們可以修改區塊的背景與標題的文字樣式，說明如下：A. 修改文字樣式我們可以找到 #vmenu .boxHeader 來修改文字樣式B. 修改背景以 PMS 的預設版型為例，我們將側欄內區塊的背景切為上、中、下三層，且分別對應到三個區塊 (#vmemu .box2、#menu .box 和 #menu .box3)(註)，因此我們只要設計好各區塊的圖片後，分別將圖片的連結位置放入三個區塊中，即可將側欄的背景組合起來，如下圖所示：在這裡要注意的是，由於頻道頁面中的側欄 (頻道資訊) 也是採用相同的 id(#vmenu)，因此直接修改 #vmenu 下的樣式，也將會同步修改頻道頁面的側欄樣式。若僅要修改媒體頁面的側欄背景，我們可以在另外新增 CSS 語法，並在 #vmenu 前加上 #media_content (如下圖所示)，這樣我們就能不影響頻道頁面的側欄區塊背景。註：由於預設樣式有漸層的設計，因此在這個範例中是將圖片放在 #vmenu .box 下       (為了讓 body 的圖片覆蓋過 header 和 footer)，其他版型中的側欄區塊背景圖大多是依序 (上、中、下)       放在 #vmenu .boxHeader、#vmenu .boxBody 和 #vmenu .boxFooter 中。 Wed, 09 Nov 2011 18:48:21 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7394 在主欄中包含了媒體播放區(#media)、左欄(#main_left)與右欄(#main_right)三個區塊。由於 #media 區塊是媒體播放的位置，因此不建議修改此區塊；而在 #main_left 與 #main_ right 中包含了 5 個 box ，包含簡介、回應、授權、媒體資訊與 QR code。在這裡，我們可以針對左右欄本身和左右欄內區塊的標題樣式進行修改。A. 左右欄透過 float 屬性,我們可以將左欄和右欄的位置對調，只要將 #main_left 中 float:內的值 "left" 更改為 "right"，並將 #main_right 中 float 內的值 "right" 改為 "left" 即可。而透過 width 屬性則可調整欄位的寬度。 B. 左、右欄內區塊(.box)的標題樣式1. 修改標題區塊樣式透過 #vmain .boxHeader 即可修改所有 box 中標題區塊的樣式，包含文字大小、顏色與區塊的底線等。2. 加入標題背景我們可以一次加入所有的 box 標題背景，只要在 #vmain .boxHeader 中加入background 屬性即可，如 #vmain .boxHeader {background:url(圖片位置)}。而如果是想讓每個 box 的標題前面都有不同的圖示(目前只有回應的 box 有)只要找到各 box 的元素名稱，並在後方加上 .boxHeader ，即可針對各個元素進行背景的設定，如 #vmain #comment .boxHeader {background:url(圖片位置)}各 box 的元素名稱如下：簡介： 討論：授權： 媒體資訊： QR code： #vmain #note#vmain #comment#vmain #authType#vmain #mediaInfo#vmain #qrcode Sun, 06 Nov 2011 00:19:58 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7392 在媒體標題的部分，我們可以更換標題的代表圖示與文字樣式，說明如下圖：A. 更換標題圖示若要讓標題區塊能同時擁有有代表圖與背景圖，可以先透過繪圖軟體將兩者結合為一張圖示後，再將該張圖的位置替換入 url 中即可。B. 變更文字樣式若要變更字型，在 #titleBox .mediaTitle 中加入 font 屬性即可，如 #titleBox .mediaTitle {font:courier new}。 Sun, 06 Nov 2011 00:18:34 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7391 我們可以設定路徑(.infoPath)的文字樣式，包含文字的大小、字型、連結與滑鼠移過去的顏色。 下圖是預設版面的路徑樣式名稱說明:CSS 文稿說明如下:若要在路徑的位置加上背景顏色或圖片，在 .infoPath 下加入 background 屬性即可，如 .infoPath {background:#aaa} Sun, 06 Nov 2011 00:18:12 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7373 在媒體播放頁面的部分，我們可以針對內容(#content)中的各區塊，包含媒體路徑(.infoPath)、媒體標題(#titleBox)、主欄(#vmain)和側欄(#vmenu)中的背景、代表圖示和文字樣式進行調整。詳細的媒體播放頁面版型請參考下圖:css 編修小技巧1. 編輯位置:[首頁設定/編輯樣式]2. 使用 Firebug 來觀察與調整 (所見即所得)，請參考[Firebug 簡介]3. 使用輔助的編輯器，將樣式的內容複製到 notepad++ 等更方便使用的編輯軟體修改，完成後再複製回來4. 可以利用使用[Ctrl+F]開啟搜尋工具，即可快速找到要修改的名稱5. 更多的 css 請參考[css 基礎教學] Fri, 04 Nov 2011 09:28:43 +0800