台灣數位學習數位教學平台 RSS feed provider zh-tw http://sites.xms.com.tw/board.php?courseID=191&f=doclist&folderID= http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=9273 演講、活動、研習...不受場地、人數的限制，只要在公告的時間連上 PMS，就可以在任何地方，無時差地觀賞這些精彩的內容，並且透過文字互動的機制參與討論。活動結束後，來不及參加的人，也可以隨時連上 PMS 觀看錄好的影音，不用擔心錯過任何重要的片段。直播建立的步驟如下:1. 新增線上直播    進入 [管理 / 線上直播] 新增節目表，　 同時在首頁會建立線上直播的區塊，方便使用者進入觀看。2. 錄影    點選 [錄影]，並依網頁上的步驟進行錄製。3. 觀看直播    連上 PMS 首頁，點選活動的主題即可進入觀看。4. 結束錄影    系統將自動進行影片的轉檔與上線，方便活動結束後留存或是讓未參加的人觀看。 Mon, 15 Oct 2012 16:44:03 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=8650 Thu, 07 Jun 2012 16:58:47 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7716 透過系統節目表功能，我們可以將站內影片與直播影片 (mms 串流格式) 加入節目表，並能自訂播放時間，以便單位舉辦重要活動時，讓相關影片能直接在網站首頁中播放。步驟如下：1. 進入 [頻道 / 新增節目表]    2. 點選右上方編輯3. 節目表管理    a. 選擇播放日期    b. 於節目表點擊 [新增節目]     c. 選擇影片 (如欲直播請輸入 mms 網址)    4. 回到頻道，節目將於預設時間播放。 Thu, 15 Dec 2011 18:53:09 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7710 Wed, 14 Dec 2011 08:42:47 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7706 管理者可以在網站上直接更換 Logo 與 Banner 圖，讓您不需要編輯 CSS 語法即可更換整個網站頭部的背景。步驟如下：1. 進入 [首頁設定 / 首頁設定]2. 在 Logo 欄位按 [瀏覽] 並選擇圖檔 (註)3. 在 banner 欄位按 [瀏覽] 並選擇圖檔4. 按 [確定]，更換完成 Tue, 13 Dec 2011 17:15:37 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7705 PMS 提供多個預設的版面樣式，且將不定時釋出新版面，讓管理者將可以輕鬆地更換網站的樣貌。操作步驟如下：A. 套用既有版面樣式1. 透過網頁右上角進入 [首頁設定 / 套用版面樣式]2. 按各樣式下的 [套用] 即更換完成B. 套用新樣式1. 進入 [系統管理 / 版面樣式 / 電腦版]2. 右下角點選 [取得更多]3. 在要套用樣式的下方按 [套用] 即可若要調整樣式，您可以在各樣式下方按 [下載]並編輯樣式後，再透過 [樣式上傳] 來新增樣式。註：您也可以透過編輯 CSS 的方式來設計版面樣式，      詳細說明請參考 [版面設計教學]。 Tue, 13 Dec 2011 17:15:12 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7693 安裝 PMS 的步驟如下：1. 執行 [pms.exe]，進入安裝程序，步驟如下：    a. 選擇PMS安裝的路徑，如下圖所示：        b. 擇 PMS 備分資料夾的路徑，並選擇是否開啟自動備份機制，如下圖所示：       c. 按 [install]，開始安裝 2. 安裝完成後，會跳出瀏覽器視窗以進行系統的初始設定，步驟與圖示如下：    a. 輸入網址或 IP (註)    b. 輸入網站名稱    c. 設定系統管理者 (帳號為 sysop) 的密碼註：1. 安裝時，需確認最後的 Domain Name    若修改 Domain Name，會造成部份功能或連結無法正常運作，需重新安裝系統及上傳影音2. 若僅是測試用途，則不需要固定 IP，使用 localhost 即可3. 顯示 PMS 安裝成功，按 [完成] 即可進入網站。    首次登入請輸入系統管理者帳號 (sysop) 與步驟 3 中所設定的密碼登入即可。 Tue, 13 Dec 2011 14:55:21 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7629 使用 podcast 訂閱，可以透過 iTunes 軟體，將頻道中最新的媒體自動下載至 PC、iPhone、iPad、iPod 等行動裝置進行閱讀，操作步驟如下: 1. 進入頻道頁面 2. 點選 [podcast]，即會自動下載並更新至 iTunes 註: 訂閱前請先安裝 iTunes 軟體，下載網址 http://www.apple.com/tw/itunes/download/ Tue, 29 Nov 2011 09:30:29 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7627 訂閱 RSS 可將您有興趣的頻道內容，透過 RSS 閱讀器、支援 RSS 功能的瀏覽器或是網站，以便隨時接收與閱讀新增的頻道媒體，以 IE7 為例說明如下: 1. 進入頻道頁面 2. 點選 [訂閱 RSS] 3. 點選 [訂閱此摘要] 4. 選擇名稱和資料夾，按下 [訂閱] 5. 訂閱完成後，即可透過 [IE 我的最愛中心 / 摘要] 進行閱讀 Mon, 28 Nov 2011 21:38:03 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7616 Fri, 25 Nov 2011 16:12:49 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7615 Fri, 25 Nov 2011 16:04:20 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7605 PMS 提供嵌入語法，方便使用者分享至其他網站，步驟說明如下： 1. 點選媒體下方的 [分享] 2. 視需求調整影片大小，並複製語法的內容 (註)3. 進入欲分享的網站 4. 依各網站的操作步驟將語法貼入適當位置 註: 嵌入的影片如需支援 iPhone、iPad 閱讀，     則需使用 iframe 語法，且嵌入的網站需支援 iframe 語法 Thu, 24 Nov 2011 09:27:26 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7604 分享至社群網站的步驟相當簡單，操作步驟如下：1. 進入媒體頁面 2. 依需求點選播放工具下方的圖示3. 輸入社群網站的帳密即可 Thu, 24 Nov 2011 09:24:17 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7603 PMS 提供了專屬的行動首頁 (點選網頁右上方的 [手機版] 即可存取)，讓手持行動裝置的使用者能更加容易地瀏覽網站。管理者可修改行動首頁的基本設定與樣式，說明如下:A. 首頁設定系統管理者可以修改行動首頁的網站名稱、搜尋關鍵字、網站描述以及 Logo 等基本設定，操作步驟如下：1. 進入 [系統管理 / 版面樣式 / 行動首頁]2. 點選 [首頁設定]3. 編輯網站名稱、關鍵字與描述4. 按 [瀏覽] 上傳代表圖5. 按 [確定]，完成設定B. 選單管理用來更換最新影音、熱門影音、精選...等功能的名稱、縮圖，亦可自行新增其他的連結，操作步驟如下:1. 進入 [系統管理 / 版面樣式 / 行動首頁]2. 按 [選單管理]3. 按 [編輯] 更換縮圖、順序、名稱4. 按 [新增連結] 加入其他的連結網址C. 修改 CSS 樣式除了預設的樣式外，您也能透過編輯 CSS 樣式來設計新版面，步驟如下：1. 進入 [系統管理 / 版面樣式 / 行動首頁]2. 點選 [編輯樣式] 進行編輯3. 按 [確定]，編輯完成註：1. 建議您可以將語法複製並貼上到本機的編輯器後 (如 notepad++)     再行編輯。2. CSS 樣式設計說明可以參考 [版面設計教學]。 Thu, 24 Nov 2011 09:19:12 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7600 Wed, 23 Nov 2011 17:44:48 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7599 Wed, 23 Nov 2011 17:25:18 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7598 Wed, 23 Nov 2011 17:11:38 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7586 Wed, 23 Nov 2011 11:52:53 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7596 Wed, 23 Nov 2011 11:23:17 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7595 Wed, 23 Nov 2011 11:12:02 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7591 提供電子書製作功能，透過直覺的操作，就可以將頻道內的影片轉成通用的電子書格式，讓手持裝置的使用者於閱讀操作上更方便。建立步驟如下：1. 以系統管理者身份登入 2. 進入電子書 3. 新增電子書     a. 點選 [新增電子書]     b. 選擇欲轉為電子書的頻道     c. 確認名稱 (預設為頻道標題)、輸入作者     d. 點選 [確定]4. 安裝電子書閱讀軟體即可觀看註：電子書建立時所需的時間可能會較長 (依頻道的內容量決定)       請於建立時耐心等待。 Tue, 22 Nov 2011 22:29:28 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7587 Mon, 21 Nov 2011 18:33:54 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7585 Mon, 21 Nov 2011 18:30:17 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7554 Thu, 17 Nov 2011 15:34:23 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7538 系統管理者能依需求設定各分站、頻道與上傳單一影片的容量設定，並提供容量使用報表以供檢視。步驟與說明如下：A. 設定網站容量1. 以母站系統管理者身分登入母站2. 進入要設定的分站3. 點選分站名稱旁的 [設定]，在容量限制內輸入數值4. 按 [確定]，設定完成註：您也能在新增分站時直接設定容量限制。B. 設定頻道容量1. 以系統管理者身分登入分站2. 進入要設定的頻道3. 點選頻道資訊旁的 [設定]，在容量限制內輸入數值4. 按 [確定]，設定完成C. 設定影片上傳容量1. 以系統管理者身分進入分站2. 進入 [系統管理 / 系統]3. 在容量限制內輸入數值4. 按 [確定]，設定完成註：影片上傳容量限制在網頁上傳與 VideoUpload 上傳的規則不同，      網頁上傳所限制的是原始的檔案大小，      而使用 VideoUplaod 上傳時則是指經預估轉檔後的檔案大小。 Wed, 16 Nov 2011 18:37:06 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7537 在密碼政策部分，PMS 不但能整合 SSL 加密通道傳輸機制，更提供了密碼安全性設定頁面，讓管理者能依需求設定密碼的長度、複雜度與有效期限。步驟與說明如下：1. 進入 [系統管理 / 密碼政策]2. 依需求進行設定，各項功能的說明如下：    密碼鎖定：密碼輸入錯誤超過所設定的次數後，                    系統將會關閉登入功能，                    待設定的時間過後才能再次登入。                    有效期限：當密碼過了有效期限，系統將會提醒使用者在登入後更換密碼。    密碼強度：分為弱、中、強三個等級，使用者在註冊或變更密碼時，                    需遵循密碼強度設定才能成功設定密碼。3. 按 [確定]，設定完成    Wed, 16 Nov 2011 18:32:14 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7535 在子母式網站架構中，分站可以開放特定頻道，讓其他分站能分享媒體到該頻道中，且開放時可選擇是否媒體是否需經審核才能分享。步驟與說明如下：A. 開放頻道分享1. 進入要設為開放的頻道2. 點選頻道資訊旁的 [設定]3. 在屬性欄位中勾選 [開放分享]4. 選擇審核方式 (需審核 / 不需審核)5. 按 [確定]，設定完成B. 分享媒體1. 進入要分享的媒體頁面2. 點選 [動作 / 進階 / 分享至其他站]3. 勾選要分享的頻道4. 按 [確定] 完成分享註：標示為 "需審核" 頻道需經該分站的管理者審核過後才會完成分享。C. 審核媒體1. 進入開放分享的頻道2. 在頻道資訊下方點選 "待審核" 旁的數字3. 勾選允許分享的媒體4. 按 [通過] or [不通過]，完成審核 Wed, 16 Nov 2011 17:07:34 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7533 透過 PMS 的子母式網站架構，我們可以從母站中新增子 (分) 站，且各個子站不但能擁有專屬的網域名稱，更可以獨立管理，讓單位只要透過一套 PMS 便能滿足校內 or 企業內所有單位的影音網需求。步驟與說明如下：1. 以系統管理者身分登入母站2. 進入分站頁面 (註)3. 點選 [新增單位] 來增加單位4. 在各單位下點選 [新增分站]     - 輸入分站名稱與網址    - 輸入分站系統管理者的帳號、密碼    - 按 [瀏覽] 選擇分站的代表圖    - 按 [確定] 完成新增5. 新增完成後，點選分站名稱即可進入該分站的總覽頁面，    點選網址即可進入該分站註：您也可以透過 [系統管理] 中的 [分站] 與 [單位] 來新增。 Wed, 16 Nov 2011 16:24:16 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7530 透過系統節目表功能，我們可以將站內影片與直播影片 (mms 串流格式) 加入節目表，並能自訂播放時間，以便單位舉辦重要活動時，讓相關影片能直接在網站首頁中播放。步驟如下：1. 進入 [首頁設定 / 版面配置]2. 點選主欄內的 [新增功能 / 節目表]3. 回到首頁，點選節目表下方的 [編輯]    4. 節目表管理    a. 選擇播放日期    b. 於節目表點擊 [新增節目]    c. 選擇影片 (如欲直播請輸入 mms 網址)    5. 回到首頁，節目將於預設時間播放。 Wed, 16 Nov 2011 15:23:49 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7464 在 PMS 中，我們可以透過 [首頁設定 / 版面配置] 來自行調整首頁所要呈現的方式與內容。進入版面配置頁面後，可以看到主欄 (xbox1) 和側欄 (mbox1) 兩個區塊，按 [新增功能] 即可在各區塊下新增各項目。其中主欄的「分頁」以及側欄的「常用連結」在功能上的設定較為細部，因此以下僅針對此兩項功能進行說明：A. 主欄分頁功能在主欄中我們可以使用分頁標籤，並在各分頁下新增項目，讓首頁的呈現能更加彈性。步驟如下：1. 網頁右上角進入 [首頁設定 / 版面配置]2. 點選 xbox1 區塊內的 [新增功能 / 分頁] 3. 點選 [新增分頁] 來增加分頁4. 在所選分頁下按 [新增功能] 即可新增其他內容項目B. 側欄常用連結功能透過常用連結功能，我們可以在側欄中建立圖示化選單，讓首頁看起來能更加美觀。步驟如下：1. 網站右上角進入 [首頁設定 / 版面配置]2. 點選 mbox1 區塊內的 [新增功能 / 常用連結]3. 點選常用連結旁的 [編輯]    a. 點選 [文字] 或 [圖片] 加入連結    b. 輸入連結標題或選擇圖片     c. 輸入連結的網址4. 按 [確定] 完成新增註：1. 若套用的版型為三欄式架構，則會在左側新增 mbox2 的側欄，功能與 mbox1 相同2. 按 [分頁編輯] 即可修改各分頁的名稱與排序。 Tue, 15 Nov 2011 09:32:55 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7463 除了能在線上直接編修既有的樣式外，我們也可以下載範例樣式的檔案，並在本機上將樣式編輯完成後，再上傳至 PMS 進行套用。步驟如下：A. 下載 CSS 範例檔1. 進入 [系統管理 / 樣式管理]2. 點選 [樣式上傳]3. 在下方說明內點選 [基本樣式] 以下載檔案B. 編輯 CSS下載後的檔案為 Zip 壓縮檔，解壓縮後可以看到四個檔案，以下針對各個檔案進行說明：style.css CSS 樣式的檔案，透過編輯器 (如 Notepad ++) 即可開啟並編輯語法CSS 樣式編輯教學請參考 [版面設計教學]preview.jpg樣式上傳後的預覽圖，如要更換，請以相同名稱的圖片取代即可index.html樣式版型的檔案 (不需要修改)images 資料夾請在裡面放網頁設計會用到的圖片，圖片名稱僅能用英文或數字命名，且在 CSS 語法中請使用相對路徑的方式來插入圖片 (如 background:url(images/banner.jpg))C. 上傳樣式1. 編輯完成後，將上述四個檔案壓縮為一個 Zip 檔2. 進入 [系統管理 / 樣式管理] 3. 點選 [樣式上傳]- 輸入樣式名稱並按 [瀏覽] 並選擇 Zip 檔- 按 [確定] 上傳檔案4. 點選 [發佈] 後即可套用樣式 Tue, 15 Nov 2011 08:53:30 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7438 PMS 可以整合 YouTube、TED …等影音平台的影片，只要透過簡單的步驟，就可以將影片嵌入至頻道中，讓您輕鬆蒐集與分享網路上公開的影音資源。相關的說明如下： A. YouTube 影片 YouTube 網站上的精彩內容，可以透過嵌入網址的方式，將影片及資訊說明整合到影音網站中，步驟如下： 1. 複製 YouTube 影音的網址 (點選影片下方的分享) 2. 進入欲嵌入影片的頻道 3. 點選 [訂閱 / YouTube] 4. 貼上網址 5. 按 [確定] B. 其他影音平台的影片 除了能透過網址直接嵌入 YouTube 的影片外，其他網站 (如 TED、Vimeo...等) 的影片，也可以透過自訂的編輯頁面來嵌入，步驟如下： 1. 複製影片的嵌入語法 (依各平台的步驟執行)2. 進入頻道 3. 貼上語法     a. 點選 [訂閱 / 影片]     b. 貼上影音的嵌入語法與來源     c. 輸入標題、作者與簡介     d. 點選 [確定] Fri, 11 Nov 2011 15:46:21 +0800 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=7415 透過文件可以讓網站的應用更彈性與多元，例如將專題演講的內容，編輯成有文字、影片、圖片的精彩報導。新增文件的步驟如下：1. 進入頻道2. 點選 [新增 / 媒體 / 文件] (如右圖)3. 輸入標題、作者、內容4. 按 [確定] 註: 透過文件頁面的 [動作 / 編輯] 可以修改文件內容。 Tue, 08 Nov 2011 17:36:46 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7411 整個頻道的主要內容分成二個部份分別是主頁面(#main)的媒體列表以及側欄(#vmenu)的頻道資訊，詳細的結構請參考下圖: 以 PMS 預設版型的側欄設計為例， 由於側欄的背景長度需依頻道資訊的內容延伸，為了讓整個設計更為完整，我們將沒有漸層的背景圖片放在#vmenu .box 的區塊，再透過組合的技巧，將漸層的圖分別放在 #vmenu .box2 及 #vmemu .box3。 Mon, 07 Nov 2011 18:22:38 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7410 這個頁面的內容主要分為分類標題(#title)、頻道資訊(.items)，詳細的結構請參考下圖:其中這一頁的分類標題圖示，可以透過 #category_title #title 中的 background 屬性進行設定，CSS 文稿說明如下:註: 更多的文字樣式說明，請參考[文字樣式] Mon, 07 Nov 2011 18:11:59 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7407 這個頁面的主要內容呈現在頻道清單(#channel_list)中，而每個分類與頻道的區塊(.cbox)則是由分類名稱(.category)、頻道資訊(.items)以及編輯工具(.catTools)組成的。詳細的內容結構請參考下圖:如果希望修改此網站所有頻道代表圖的邊框顏色、背景、樣式等，則可以透過 .image 來進行調整，請參考下圖:但若需修改此頁的頻道代表圖的呈現樣式，則需在 #channel_list .cbox .image 的樣式名稱中進行設計才有效，關於 CSS 的繼承方式，請參考 [套用樣式]註:1. 更多的框線設計，請參考 [區塊模型(box model)]2. 其他的樣式設定，請參考 [Firebug 基礎教學] 來觀察與調整 Sun, 06 Nov 2011 21:00:05 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7408 選擇好元素後，我們可以在 CSS 的區塊上，直接點選 "屬性" 或 "設定值" 進行編輯，並能在網頁上直接預覽編輯後的樣式 (如下圖)。調整前：調整後：而除了能編輯外，我們也可以在 CSS 區塊上按滑鼠右鍵 / 新特性自行加入新的屬性，或是將屬性停用。加入新屬性：停用屬性：因此當我們要設計 PMS 版面時，只要先使用 Firebug 調整出想要的版面，接著回到 [首頁設定 / 編輯樣式] 中用 [Ctrl+F] 找到要替換的區塊後，將 Firebug 調整後的 CSS 樣式用複製 / 貼上的方式替換掉原始樣式即可。而除了觀察網頁外，Firebug 其實也有提供網頁偵錯、偵查網頁執行速度等實用的功能，想進一步了解 Firebug，請參考下方的延伸閱讀內容。延伸閱讀：1. Firebug 官方網站2. 初識 Firebug 全文─ 某人的棲息地 (簡中網站)3. 如何使用 firebug 即時預覽 css4. 聰明的生活 2 - 網頁除錯觀察的 Browser 工具 Sun, 06 Nov 2011 19:48:40 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7406 執行 Firebug 並開啟要觀察的網頁後，我們需先將 Firebug 的左欄切換為 HTML 觀察器 (註)。切換後，可以看到左側是網頁的 HTML 架構，而右側預設呈現的是 CSS 樣式區塊。如下圖所示：設定好介面之後，接著我們可以用以下三種方式來觀察網頁：1. 點選 即可直接在網頁上選擇元素，選擇後，下方的 HTML 觀察器與右側的 CSS 區塊    會顯示相對應的位置與內容 (如下圖)。   2. 當游標移到 HTML 觀察器的各行上 (按各行前方的 + 號可以展開下一層)，    網頁會以反藍的方式呈現相對應的位置 (如下圖)。   3. 將右側的 CSS 區塊切換為 "排版"，則將以圖示呈現出所觀察區塊的長度、寬度以及 padding、border     和 margin 屬性與設定值，而網頁上也會顯示尺規，讓我們能更清楚地了解該區塊下的 CSS 設計架構。   註：左側區塊中也提供了 CSS 觀察器 ，與右側區塊不同的是，右側區塊僅呈現所選擇元素或區塊的樣式，      而左側區塊則是會呈現整個網站的 CSS 的架構。 Sun, 06 Nov 2011 19:46:52 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7401 主要的內容呈現在媒體清單中(#media_list)，並以頻道為區塊(#mbox)依序排列，每個頻道區塊則有頻道名稱(.channel)及媒體資訊(.thumb)，詳細的結構請參考下圖:如果希望修改每個頻道區塊的樣式，可以透過 #media_list #mbox 進行屬性的設定，CSS 文稿說明如下: Sun, 06 Nov 2011 19:00:03 +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=7389 側欄以及主欄的區塊皆可依不同的資訊設計不同的樣式，下圖為 PMS 預設樣式的設計範例，其中側欄包括:   a. 區塊共用相同的樣式，如 #menu .box   b. 特殊區塊樣式，如 #menu .menuLink   c. 標題前的圖示，如 #menu .search .boxHeader 中的 background 屬性   A. 修改共同樣式的背景(如搜尋、最新媒體等) 以 PMS 預設版型的共同樣式為例，我們將側欄的設計圖切成上、中、下三個部份，並分別在 #menu .box、#menu .boxBody 以及 #menu .boxFooter 等區塊，透過 background 屬性將這些圖片重新組合起來，以呈現完整的側欄設計，下圖為實際套用的圖解。B. 更換標題圖示 以最新媒體的圖示為例，我們可以透過 #menu .mediaNew .boxHeader 中的 background 屬性進行設定，CSS 文稿說明如下:C. 設計特殊區塊的樣式如果希望針對某一資訊區塊設計不同的樣式，則需在 #menu .classname 的名稱下進行屬性的設定，以最新媒體的樣式名稱為為例: Sat, 05 Nov 2011 22:39:19 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7388 網站上每個主要連結的圖示都可依需求透過 #navi .classname 中的 background 屬性進行替換，下圖是預設網站版面各圖示的 .classname 對照圖。  CSS 文稿說明以下是關於主要連結圖示的 css 完整文稿，說明如下:  如果希望滑鼠移到連結時要變換圖示，則可以加 hover 的 css，例如:#navi .homepage a:hover {background:url(圖片網址) ...}更多的超連結 CSS，請參考 [超連結設計] Sat, 05 Nov 2011 22:38:57 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7387 設定網站的 Logo 與 Banner 最簡單的方式就是透過系統提供的「首頁設定」介面來上傳圖檔，但如果需要進階的設定(如調整位置)，就可以透過 css 中的 #bannerBox 區塊來設定。CSS 文稿說明以下是關於網站 Logo 設計的 css 完整文稿，說明如下: 編修小技巧1. 更換 Logo 及 Banner 的方式，請參考[更換 Logo、Banner]2. 若使用文字標題，可以透過 #bannerBox #bannerTitle 修改呈現的樣子，例如:    font-size(文字大小)、font-weight(粗體)、color(顏色)，更詳細的資料請參考[文字樣式] Sat, 05 Nov 2011 22:38:24 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7385 首頁的版型分成三個區塊: 系統功能(#sysbar)、網站主體(#mainBody)以及頁尾的版權說明(#copyright)其中「網站主體」是整個網站內容呈現的區域，包括:1. 首頁橫幅(#banner)，包含標題(#bannerTitle)和主要連結(#navi)2. 內容區塊(#content)，分為主欄(#main)與側欄(#menu) 而其中的內容可透過[首頁設定/版面配置]建立不同的資訊。 詳細的 PMS 首頁版型結構請參考下圖:了解了整個首頁的版型結構後，我們就可以透過[首頁設定/編輯樣式]修改首頁樣式，包含版面的背景、標題文字、側欄區塊設計等。 Sat, 05 Nov 2011 22:36:31 +0800 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7381 一般我們會將完整的設計圖切成上、中、下三個區塊，並使用重新組合的技巧，分別將背景圖放在body、#base、#content 等區塊，以呈現完整的網站背景，下圖是 PMS 預設的網站版面實際套用的圖解。CSS 文稿說明以下是關於網站背景設計的 css 完整文稿，說明如下: 補充: 除了上述的 css 外，在 body 有額外設定漸層的背景圖片，讓置中時有更佳的呈現效果。css 編修小技巧1. 編輯位置:[首頁設定/編輯樣式]2. 使用 Firebug 來觀察與調整 (所見即所得)，請參考[Firebug 簡介]3. 使用輔助的編輯器，將樣式的內容複製到 notepad++ 等更方便使用的編輯軟體修改，完成後再複製回來。4. 更多的 css 請參考[css 基礎教學] Fri, 04 Nov 2011 18:28:16 +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 http://sites.xms.com.tw/board.php?courseID=191&f=doc&cid=7367 1. 下載 Firefox 瀏覽器 (網址 http://moztw.org)2. 安裝 Firebug 套件使用 Firefox 進入以下連結，安裝 Firebug (按 "新增至 Firefox")https://addons.mozilla.org/zh-TW/firefox/addon/firebug/3. 執行 Firebug安裝完成後，重新啟動 Firefox 瀏覽器就可以看到網頁右上角出現 Firebug 圖示 (註)，點選圖示或按熱鍵 F12 即可執行 Firebug，操作頁面會出現在網頁的下方，如下圖所示：註1：若是使用 Firefox 4 以下的版本，則 Firebug 會出現在瀏覽器的右下角。註2：若介面顯示在下方會造成網頁的可視範圍過小，可以點選介面右上角的 將 Firebug 另開為新視窗。 Thu, 03 Nov 2011 22:28:39 +0800