致 遠 管 理 學 院 - tsu.edu.t ·...
TRANSCRIPT
致 遠 管 理 學 院無障礙網站管理系統
使用者網站操作管理手冊
系統建置日期:2010-03
手冊初版日期:2010-03
手冊製作單位:電算中心
黃漢麟
內容目錄1. 為什麼需要『無障礙網頁』?..............................5
2. 無障礙網頁規範內容......................................6
3. 關於本管理系統..........................................8
4. 網頁製作前的規劃作業...................................10
5. 如何申請致遠無障礙網站帳號?...........................11
6. 網站基本管理...........................................13
7. 帳號管理...............................................15
8. 網站設定:網站的名稱‧主要外觀‧網站地圖...............16
9. 區塊管理:建構頁面的基礎...............................18
10. 區塊管理:如何變更網站的橫幅(Banner)?................19
11. 區塊管理:導覽列管理..................................21
12. 區塊管理:底部區塊....................................22
13. 區塊管理:計數器......................................23
14. 區塊管理:最新公告....................................24
15. 區塊管理:系統模組的內容展示..........................25
16. 內容管理:建立自訂網頁內容............................26
17. 呈現敘述性網頁內容:內容管理結合區塊管理..............31
18. 區塊管理:一列一連結模組..............................34
19. 區塊管理:文繞圖模組..................................37
20. 網站儲藏櫃............................................38
21. 圖示連結..............................................39
22. 最新公告:網站訊息發佈與管理..........................42
23. 行事曆管理............................................47
24. 檔案櫃管理............................................50
25. 相簿館管理............................................54
26. 好站報報..............................................62
27. 影音櫃................................................68
28. 計數器................................................70
29. 模組分權..............................................71
30. 網頁內容編輯工具操作說明..............................73
31. 透過編輯工具上傳檔案至網站管理系統....................98
.
致遠管理學院‧無障礙網站管理系統
為什麼需要『無障礙網頁』?
因為先天‧後天等各種因素,所造成的肢體、視覺、聽覺...等
障礙的人口,在網路科技的發展過程中,已漸漸受到重視,如何
讓每個人都能順利的使用接收網站上的資訊,已經是必須面對的
重要課題。
也許您並不能很深刻的感受,為什麼需要建置無障礙網頁?建議
您閱讀一下『在 30 天內打造更具親和力的網站』這本電子書(
網址:http://dia.z6i.org/),這本書有很多的實例說明,除了
讓您感受各式各樣的不方便,也提供說明了無障礙網頁的製作規
範。
2003/07行政院研考會,頒布了『無障礙網頁開發規範』宣示了
政府落實資訊平權的政策方針。致遠在遵循這個開發規範的原則
下,建置開發無障礙管理系統,落實我們在無障礙網頁上的執行。
參考資料:
1.Dive Into Accessibility /在 30 天內打造更具親和力的網站
網址:http://dia.z6i.org/
2.無障礙全球資訊網 / 淡江大學盲生資源中心
網址:http://www.batol.net/
3.行政院研究發展考核委員會政府網站營運交流平台
網址:http://www.webguide.nat.gov.tw/wSite/mp
4.行政院研究發展考核委員會政府網站營運交流平台:認識無障
礙網路空間
網址:http://www.webguide.nat.gov.tw/wSite/lp?
ctNode=241&mp=1
~ 5 ~
致遠管理學院‧無障礙網站管理系統
無障礙網頁規範內容
四個原則:
1.多媒體相關資訊的可及性
2.網頁結構和呈現處理的可及性
3.網頁和輸出入裝置相關技術處理的可及性
4.網站瀏覽機制的可及性
三個優先等級:
1.第一優先等級:A標章
通過第一優先等級,且符合以下條件,可通過 A+標章等級
A.導盲磚搭配鍵盤快速鍵(Accesskey)
B.網站導覽功能(Sitemap)
C.網頁瀏覽工具應有使用鍵盤的設計,勿只設計僅能使用滑鼠
點選。
2.第二優先等級:AA標章
3.第三優先等級:AAA標章
十四條規範:
1.對於聽覺及視覺的內容要提供相等的替代文字內容
2.不要單獨靠色彩來提供特殊資訊
3.適當地使用標記語言和樣式表單
4.闡明自然語言的使用
5.建立編排良好的表格
6.確保網頁能在新科技下良好地呈現
7.確保使用者能處理時間敏感內容的改變
~ 6 ~
致遠管理學院‧無障礙網站管理系統
8.確保嵌入式使用者介面具有直接可及性
9.設計裝置獨立網頁
10.使用過渡的解決方案
11.使用國際與國內官方訂定的技術和規範
12.提供內容導引資訊
13.提供清楚的瀏覽網站機制
14.確保簡單清楚的網頁內容
九十條檢測碼:
標準檢測碼格式為1個字母和6位數: X999999 這 7個字符共可
分為5欄,如后所示:
起始字母:網頁語言 (H:HTML語言相關的檢測碼)
第 1位數碼:優先等級 (其可能值為1|2|3)
第 2、3位數碼:14條規範(Guideline) (其可能值為01|02|03|
04|05|06|07|08|09|10|11|12|13|14)
第 4位數碼:檢測狀態(Status)
0:機器辨識/機器檢測(Machine Identify/Machine Check)
1:機器辨識/人工檢測(Machine Identify/Human Check)
2:人工辨識/人工檢測(Human Identify/Human Check)
(其可能值為0|1|2)
第 5、6位數碼:規範內的流水號碼 (由 00開始,其可能值為
00|01|02|03| . . .)
~ 7 ~
致遠管理學院‧無障礙網站管理系統
關於本管理系統
本系統根據『動態網頁模組系統』(http://dyna.hcc.edu.tw),
進行調整修改開發,使更貼近需求,更能達成符合無障礙網頁檢
測標準的要求。
原系統強調能做到符合 A+等級的標準,但經實際測試,如要藉原
系統編輯製作符合無障礙檢測標準的網頁內容,仍會有許多困難
點。因此,根據此系統重新調整開發設計,在這個開發的歷程,
克服了許多的Bug、更換了預設的線上編輯工具、開發的一些編
輯的樣版、開發了三個模組、修改了幾個可能潛在的風險...,
經過了諸多的努力,終於推出本系統!
系統目標:
1.提供一個共同的作業平台,建置一個快速簡易的網頁管理系統。
2.在共同平台‧同一管理系統的基礎上,達成成功經驗的有效傳
承,有效加速使用經驗的流通與傳播。
3.透過『系統快速建構手冊』‧『系統使用說明書』‧『教育訓
練』...,協助快速建構單位的網頁空間。
4.在遵循系統設定條件下,至少可以達到 A+等級的無障礙網站的
檢測標準。
系統主要功能:
1.提供多個預設模組,快速簡易建置各項網頁需求的功能:
最新公告‧行事曆‧檔案下載‧電子相簿‧網站連結‧影音櫃
‧區塊管理‧內容管理‧導覽列管理‧圖示連結‧計數器...
2.提供分權管理的功能,每個單位網站的主管理者,可以自行建
立分權帳號,授權給不同的管理者,管理不同的模組。
3.使用區塊組成網頁,方便使用者自行配置排列網頁內容。
~ 8 ~
致遠管理學院‧無障礙網站管理系統
4.提供六種網站基本風格樣式(CSS)。
5.網站中所使用的橫幅Banner、基本圖式、背景圖片...等樣版圖
形,除了提供多組的預設的圖檔供選擇變換外,也可以讓使用
者上傳自製的圖檔。
6.提供線上編輯工具,使用與 Dreamweaver/FrontPage相同的所
見即得網頁內容編輯功能。
7.與線上編輯工具緊密結合的檔案上傳與管理功能,方便使用者
一邊編輯一邊上傳‧取用圖檔‧影像...。
關於本系統的著作權,詳細可以參閱:
http://csc.pro.edu.tw/a09.asp (...著作財產權歸屬於教育部,
教育部並得無償行使著作權法第 22至第 29條之權利。...,教育
部認可之全國各級學校及教育行政機關並得於非營利目的無償推
廣使用。...)
~ 9 ~
致遠管理學院‧無障礙網站管理系統
網頁製作前的規劃作業
如前面章節介紹,在既定的檢測標準下,我們約略已知道,網頁
內容至少要符合哪些檢測碼的規範,才能通過檢測。
但除了透過軟體的機器檢測外,有一些內容還必須同時通過機器
檢測與人工檢測,有一些內容則是只進行人工檢測。因此,在製
作網頁內容時,不僅僅要注意所編輯的內容、所使用的 HTML語
法元素的屬性,是否按規定正確符合內容的輸入資料,更要注意
所輸入的內容,是否與主題切合?
除了資料的正確性,也要注意是否提供了必要的資料內容,協助
閱覽者獲取完整的資料訊息。
本系統主要用來作為學校網頁、系所教學單位網頁、行政單位網
頁,在這個前提下,網站的內容應該包含:
1.單位部門介紹。
2.人員組織介紹。
3.網站導覽。(利用本系統提供的功能)
4.最新公告。(這個模組一定要用)
~ 10 ~
致遠管理學院‧無障礙網站管理系統
如何申請致遠無障礙網站帳號?
本系統開放給符合以下條件的單位部門、個人使用者...等,申
請使用:
1.校內各教學部門單位。
2.校內各一級二級行政單位。
如何申請?
1.使用以下網址:
http://www.dwu.edu.tw/a/webs/index.php?account=admin,
在『註冊網站』區塊,點選『立刻註冊』連結。
2.請同意『網站申請注意事項』的約定,並按下『我同意並接受
以上條款』按鈕。(請確實仔細閱讀各注意約定事項之詳細內
容)
3.輸入申請單位(個人)的帳號‧密碼‧部門名稱(或個人姓名)‧
電子郵件‧首頁名稱...等基本資料。(以上資料,在網站帳號
開通審核時,會和所提出的資訊服務申請表的內容,一併審核
處理)
4.如果已關閉線上申請,請直接以資訊服務申請表,提出申請。
~ 11 ~
致遠管理學院‧無障礙網站管理系統
5.填寫『資訊服務申請表』,依照核准權責簽核後,送電算中心
進行網站帳號開通的後續處理。
6.電算中心開通後,原申請者,即可使用申請時所輸入的帳號‧
密碼,登入系統,進行網站內容的建立。
~ 12 ~
致遠管理學院‧無障礙網站管理系統
網站基本管理
1.請在瀏覽器的網址列輸入網站管理的網址:
http://www.dwu.edu.tw/a/manage/manage.php
或:在網頁的導覽列中,點選: 登入管理
2.請先確認所申請的網站已核准開通。輸入註冊申請時所建立的
帳號‧密碼,檢核碼部分,如不易辨識,請重新整理(F5)網頁。
3.成功登入後,會顯示所有可以使用的功能,被授權可以使用的
功能,如下圖所示:
~ 13 ~
致遠管理學院‧無障礙網站管理系統
~ 14 ~
致遠管理學院‧無障礙網站管理系統
帳號管理
本資料的主要內容為網站註冊申請時所輸入的資料,可以在這個
畫面做必要的修改。
使用空間:是指該網站所被允許的檔案儲存空間,如不夠用,可
以向電算中心提出申請。
權限:列出該網站可以使用的各模組,ˇ表示具有使用權限,ㄨ
表示該網站未開放使用該模組的功能。
~ 15 ~
致遠管理學院‧無障礙網站管理系統
網站設定:網站的名稱‧主要外觀‧網站地圖
網站的名稱‧主要外觀‧網站地圖(網站導覽)等基本資料,都在
這個設定選項進行設定。
1.網站框架:在無障礙網站的需求整體考量下,本網站管理系統,
不提供具有框架網頁的功能選項。
2.背景圖‧背景色:主要呈現在網頁四周的空白位置。
3.CSS種類:網頁內容標題、文字、表格...等的預設格式,一共
提供六種風格,近藍‧近青‧近黃‧近紅‧近綠‧近銀。
4.欄位種類:一共提供四種欄位的配置風格。各欄位中網頁資料
的配置管理,可以參考『區塊管理』這個部份的說明。
~ 16 ~
致遠管理學院‧無障礙網站管理系統
A.一欄:中間。
B.二欄:中間‧右邊。
C.二欄:左邊‧中間。
D.三欄:左邊‧中間‧右邊。
5.總寬度‧左邊寬度‧右邊寬度‧中間寬度‧修正底框間隙,建
議在網站建構前先規劃,網站建置後,就不宜變動。
6.網站導覽:
A.網站導覽是無障礙網站檢測的主要項目之ㄧ,當網頁資料新
增或變動時,一定要更新這裡的資料。
B.網站導覽下方的編輯工具,為本管理系統所提供的一個內容
編輯工具(類似 FrontPage/Dreamweaver的線上編輯工具),
詳細操作請參閱第 73頁『網頁內容編輯工具操作說明』。
~ 17 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:建構頁面的基礎
本網站管理系統,六大類區塊,
透過這六大類區塊的選用組合,
來達成頁面建構的目的。
1.上方區塊:可以用來放置網站
的Banner橫幅圖檔、Logo圖
檔...等資料。
2.上方連結區塊:被用來當作網
站導覽列的放置位置,關於導覽列的管理操作,參閱:第頁。
3.左方區塊‧右方區塊:可以單獨存在、同時存在,也可以不使
用這兩個區塊。通常被用來當作左右兩側的詳細資料導覽用。
4.中間區塊:這是顯示網頁資料的區域。
5.底部區塊:本系統預設將這個區塊作為學校地址‧通訊資料...
等資料使用。
~ 18 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:如何變更網站的橫幅(Banner)?
本網站管理系統,網頁頁面的預設寬度為940像素,建議沿用這
個寬度設定,製作所屬網站的橫幅。
變更為自製橫幅的步驟如下:
1.橫幅建立在『上方區塊』的位置,預設的區塊名稱是『抬頭
LOGO』,點選『編』按鈕,修改橫幅的圖片。
2.進入區塊的編輯頁面後,點一下『自行編輯』前面的圓形按鈕,
『顯示內容』這個按鈕,會由不可選取的狀態,變為可以選取
的狀態。按一下『顯示內容』按鈕。
3.橫幅(Banner)區塊內容的編輯:
A.幅橫的圖檔是以背景圖的方式,顯示在『上方區塊』這個區
塊的範圍內。
B.在區塊內容的背景圖,點選『瀏覽...』鈕,選取已製作完成
的橫幅圖檔。
C.依照所製作橫幅的高度,設定區塊的高度,讓橫幅的圖片可
以正常顯示。
D.可以在區塊的內容編輯方塊內,輸入想要顯示在橫幅上的文
~ 19 ~
致遠管理學院‧無障礙網站管理系統
字。
E.按『確定送出』按鈕,儲存變更。
~ 20 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:導覽列管理
本網站管理系統,提供一個『導覽列管理』的功能,讓網站管理
者將主要的功能選項,建立在『上方連結區塊』這個區塊位置的
『上方導覽列』。
導覽列這個長條區塊,分為左右兩個區塊,並於新增時指定位置。
~ 21 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:底部區塊
底部區塊,在網站初始化時,預設所給的資料是:學校的中英文
地址、版權宣告...等。
底部區塊的內容,可以根據網站的需求,搭配編輯工具加以調整,
使符合網站的需求。
~ 22 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:計數器
『計數器』在網站初始化時,會預設建立在中間區塊的最下方,
如不需使用計數器的功能,可從區塊管理的區塊列表中,選擇將
計數器這個區塊刪除。
關於計數器模組的相關設定,可以參考第 70頁『計數器』這個
章節的說明。
計數器是系統預設的模組,藉由區塊來顯示計數的內容。
計數器系統模組的區塊設定,步驟如下:
1.指定『區塊位置』:這裡選擇的是中間區塊。
2.設定『排序位置』。
3.設定模組屬性:選擇『計數器』。
4.輸入『標題文字』:就是這個區塊的名稱,即使選擇不顯示標
題,也必須輸入。
5.其餘的項目可以視需求輸入。
~ 23 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:最新公告
『最新公告』是系統預設的模組之ㄧ,預設是在中間區塊的上方
顯示最新公告的列表。
如需調整區塊的顯示,可以從區塊管理的區塊列表中,選擇『最
新公告』進入修改區塊相關屬性。
關於最新公告的使用與管理細節,可以參考第 42頁『最新公
告:網站訊息發佈與管理』的說明。
~ 24 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:系統模組的內容展示
除了上述介紹的計數器‧最新公告這兩個模組,藉由透過建立區
塊的方式,來顯示內容外,還有一些模組,也可以透過建立區塊
的方式,來呈現內容資料,像是:行事曆‧檔案櫃‧相簿館‧好
站報報‧影音櫃...等。
新增區塊的步驟:
1.在區塊管理的區塊列表右上角,點選『ˇ新增』。
2.選擇所屬的區塊位置:如左方區塊‧中間區塊...。
3.從『模組屬性』中,選擇模組。
4.輸入『位置排序』,數字越小,排列越前面。
5.輸入『標題文字』,這是必須輸入的項目。
6.其餘區塊屬性資料,可以根據需求輸入。可以參考計數器‧最
新公告的相關設定。
~ 25 ~
致遠管理學院‧無障礙網站管理系統
內容管理:建立自訂網頁內容
在建置網站的過程中,常會因為所要發佈的內容需求,而需
要新增一些自訂內容的網頁資料,例如:部門單位介紹、部門組
織介紹、單位主管介紹、部門沿革...等,這些資料並不容易整
理出一套規則來將資料模組化,因此本系統有提供一個簡易好用
的 HTML編輯工具,方便使用者透過這個工具來編輯網頁資料。
詳細的編輯工具說明,可以參考:
1.第 73頁『網頁內容編輯工具操作說明』
2.第 98頁『透過編輯工具上傳檔案至網站管理系統』
本網站管理系統的主要訴求,除了要方便的協助使用者來建
構網站外,還有一個更重要的管理目標,就是要幫助使用者建構
一個符合行政院研考會所頒佈的無障礙網頁標準的網站。目前的
無障礙網頁認證標準,主要有 AAA, AA, A+, A這幾種,如果使
用者依照本系統的規範操作建置網站,通常您的網站已可以達到
A+的無障礙標準。
在正式編輯建構網站前,建議先做好規劃的工作,再將規劃
的內容,使用既有的功能模組,或『內容管理』來產生網頁內容,
並將功能模組的內容,或內容管理的內容,在『區塊管理』中將
資料發佈在網站上。
以下將透過一個實例,來介紹如何利用內容管理、區塊管理,
來建構網站內容。
假設要在左方區塊,建立一個『教學資源設備』的區塊,區塊內
包含以下三個連結:醫療資訊電腦教室‧實習專案輔導教室‧個
案專題輔導教室,當點選連結後,對應的內容會開啟在中間區塊。
製作上述的網頁的步驟:
1.在內容管理,建立一個『教學資源設備』的目錄分類。不一定
要建立目錄分類,但為使內容管理更方便進行,建議適度的使
用目錄,對檔案內容做分類管理。
~ 26 ~
致遠管理學院‧無障礙網站管理系統
2.在內容管理的列表中,點選
進入剛才建立的『教學資源
設備』,接著點選『ˇ新增
目錄(檔案)』,準備新增這
個目錄下的第一個檔案:醫
資教室。
3.建立『教學資源設
備』的基本資料:
A.可選擇抬頭文字
的顏色。
B.可選擇抬頭背景
的顏色。
C.可選擇抬頭外框
線條的顏色。
D.抬頭的項目符號,
可以從樣版中選
取,可以匯入自
製的圖檔,如不
選用或匯入,就
直接以系統預設
的圖示帶入。
E.內容的背景影像,
可以從樣版中選取,可以匯入自製的圖檔,或不選用不匯入。
~ 27 ~
致遠管理學院‧無障礙網站管理系統
F.可以選用內容的背景顏色。
4.從樣版中選取『抬頭
項目圖示』‧『背景
影像』的方法:
A.點一下 開
啟對應的樣版檔案
列表視窗。
B.選取所要的圖檔的
檔名,複製檔名;關閉樣版檔案列表視窗。
C.將游標停駐在
圖檔名稱欄位
上,執行『貼上』。如果您已經很熟悉所要用的圖檔名稱,
也可以不透過樣版選取,直接輸入圖示檔名。
D.選擇使用樣版圖示,或自訂圖檔,其中之ㄧ即可,如果兩個
都有輸入資料,最後存檔以自訂圖檔為準。
E.自定圖檔製作的注意事項:
a.標題小圖示,建議使用gif或 png的圖檔格式。圖示圖檔
製作時,請設定背景為透明。
b.標題小圖示的大小建議:20x20~15x15像素。
c.背景圖檔,建議使用gif或 png或jpg的圖檔格式。
d.H207103:避免使用動態GIF圖片。
5.備妥『教學資源設備』的文字資料‧圖檔資料...,準備開始編
輯內容。以『醫療資訊電腦教室』的編輯,說明符合無障礙網
頁檢測標準的注意事項:
A.有四個標題:醫療資訊教室空間規劃‧成立目的‧儀器設備
介紹及管理‧管理方法。標題的使用要領:
a.H203005:適當使用巢狀標題呈現文件結構。
b.H203106:避免使用header標籤來產生粗體字。
~ 28 ~
致遠管理學院‧無障礙網站管理系統
c.簡單的說:要建立為標題的文字,就使用編輯工具中的格
式下拉方塊,選擇標題1(H1字體最大)‧標題2‧標題3‧
標題4‧標題5‧標題6(H6自體最小)。但千萬不要用標題
格式來建立粗體字效果。
B.有兩張圖片,網
頁呈現時,以較
小的圖片顯示,
並建立一個連結,
點擊小圖片,另
開視窗顯示大圖
片。
a.H101000:圖
片需要加上
替代文字。
b.H210100:除
非使用者知
道將會開啟
一個新視窗,
否則不要隨
便開啟一個
新視窗。
C.建立排版良好的
表格:
a.H105100:對
於每一個存
放資料的表
格(不是用來排版),標示出行和列的標題。
b.H105101:表格中超過二行/列以上的標題,須以結構化的
標記確認彼此間的結構關係。
→很重要:如果不很熟悉 HTML的 TABLE語法,也不懂如何
用axis建立表格標題與內容的從屬關係,就不要這麼用表
~ 29 ~
致遠管理學院‧無障礙網站管理系統
格來呈現資料!!!
有這樣的資料要呈現,怎麼辦?
c.H205102:在網頁內容呈現設計時,避免以表格做多欄文字
的設計。
d.H205103:若表格只做為版面配置時,勿使用表格之結構標
記(如 th標籤)作為網頁格式視覺效果。
e.H305004:表格須提供表格摘要說明(如 summary屬性)。
f.H205105:資料表格須提供標題說明。
g.H305106:表格行列過長的標題,須提供縮寫或簡稱。
h.H203004:要使用相對尺寸(如%)而非絕對尺寸(如像素)。
D.文字內容的編輯:
a.H207001:避免使用 blink標籤閃爍螢幕。
b.H207002:避免使用 marquee(走馬燈)標籤移動文字。
~ 30 ~
致遠管理學院‧無障礙網站管理系統
呈現敘述性網頁內容:內容管理結合區塊管理
接下要說明,如何將上一章節所建立的『教學資源設備』的三個
網頁內容: 醫療資訊電腦教室‧實習專案輔導教室‧個案專題
輔導教室
1.建立一個位於左方區塊的選單區塊
A.區塊位置:左方區塊
B.這個區塊要緊接在主選單區塊的後面。(先查看主選單排序,
決定教學資源設備的排序)
C.模組屬性:不使用,就是自訂內容的區塊。
D.顯示視窗:點選區塊中的連結,在原視窗開啟連結內容。
2.建立區塊標題的基本資料:
A.標題文字: 教學資源設備,這是必須輸入的項目。
B.標題圖示:可不輸入,就使用系統預設的圖示。
~ 31 ~
致遠管理學院‧無障礙網站管理系統
C.更多資訊‧更多資訊連結:當區塊的內容,較多且無法一一
列出時,可以使用這個功能,做更完整的表達。
3.選單內容是這三個網頁內容的主題
A.區塊類別:選單的內容是屬於『自行編輯』,先按一下自行
編輯的圓形按鈕,再按一下『顯示內容』這一個按鈕,進入
選單內容編輯。
B.連結項目前的小圖示,可以使用『插入/編輯影像』圖示來建
立。
C.開啟另一個分頁或視窗,選擇:內容管理→教學資源設備分
~ 32 ~
致遠管理學院‧無障礙網站管理系統
類,點選內容列表的『詳細』這個連結。
D.選取連結點的『醫療資訊電腦教室』連結的文字範圍,執行
複製。
4.選取連結內容選擇複製後,切回區塊管理的區塊內容編輯畫面,
執行貼上。
5.完成區塊內容的編輯後,檢視一下以上設定內容的效果:
~ 33 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:一列一連結模組
在考量資料資料能符合無障礙檢測標準的需求考量下,『一列一
連結』這個模組,提供一個三欄多列的表格資料,建檔模組,可
以建立圖示‧連結‧說明,這三個欄位,表格標題的欄位名稱可
以自訂,但在無障礙的需求下,這個模組並沒有很大的運用彈性。
建立一列一連結的步驟:
1.在區塊管理,新增一個區塊,依照實際的狀況輸入:區塊屬性
‧區塊標題...等,區塊的基本資料。
2.區塊類別:點選『一列一連結』。點選後會開啟一列一連結的
專屬對應程式畫面。
3.進入一列一連結的新增畫面後,首先的建立這個表格的屬性基
本資料‧欄位標題資料等。必需輸入資料的欄位,沒輸入就沒
~ 34 ~
致遠管理學院‧無障礙網站管理系統
辦法進入下一步驟。
4.接著,依照所準備的資料,逐筆輸入,建立一列一連結的各明
細資料。
第一次資料新增建檔後,如需修改‧刪除‧再次新增資料,可以
從區塊管理的列表中,找到對應的區塊,點選直接進入對應的程
式中,進行編輯。
因資料較一般狀況複雜一些,所以程式畫面中有設計許多按鈕,
可以將還不會用到的畫面隱藏起來,必須編輯調整資料時,再使
用按鈕將資料顯示出來,以降低資料畫面呈現的複雜度。
~ 35 ~
致遠管理學院‧無障礙網站管理系統
一列一連結這個模組的缺點:只能在既定的模式下,建立格式一
致的資料,因此資料的呈現較不活潑。
~ 36 ~
致遠管理學院‧無障礙網站管理系統
區塊管理:文繞圖模組
文繞圖模組,與一列一連結模組相同,都是在無障礙檢測標準的
需求下所衍生製作的模組,操作的要領相近,不另仔細詳述說明。
~ 37 ~
致遠管理學院‧無障礙網站管理系統
網站儲藏櫃
在編輯網頁內容的過程中,常會用到一些圖片、影像...等,在
編輯前可以先將會用到的圖片、影像...,上傳到網站儲藏櫃。
編輯內容時,再將圖片影像對應的網址,貼到網頁內容上。
這樣的用法,因為操作過程的連結效果不佳,所以使用上並不方
便,因此建議不要使用『網站儲藏櫃』的功能。本系統所提供的
網頁內容編輯工具,可以提供一邊編輯內容一邊上傳資料的功能,
提供上傳內容的管理,詳細的使用方式,可以參考以下章節段落
的說明:
3.第 80頁『插入/編輯超連結』
4.第 83頁『插入/編輯影像』
5.第 88頁『插入/編輯 Flash』
6.第 98頁『透過編輯工具上傳檔案至網站管理系統』
~ 38 ~
致遠管理學院‧無障礙網站管理系統
圖示連結
圖示連結,
這是一個比
較簡單的模
組,主要提
供網站管理
者,在頁面
上建立一個
點選圖片就
可以連結到
對應網址的
功能。
圖示連結主要有三個操作功能,新增、編輯、刪除。
新增圖示連結時,圖檔上傳後,會以最大寬 150或最大高 100,
作為等比例縮放圖示的依據,因此圖檔小於150x100的尺寸,會
影響圖示的顯示效果。
~ 39 ~
致遠管理學院‧無障礙網站管理系統
編輯圖示連結資料時,系統對圖檔的處理方式:
1.點選『瀏覽...』,選擇準備上傳的圖檔,系統會自動將『保
留』取消,不勾選保留原圖檔,修改 OK後,原上傳的圖檔會被
刪除。
2.不點選『瀏覽...』,但自行取消『保留』,修改 OK後,原上
傳的圖檔會被刪除。(所以應該避免這樣的操作方式)
3.不點選『瀏覽...』,『保留』也保持勾選的狀態,修改 OK後,
圖檔不會有改變。
刪除圖示連結時,除了刪除輸
入的文字資料外,原上傳的圖
檔,也會一併刪除。
該網站所允許使用的儲存空間
配額,也會重新計算。
~ 40 ~
致遠管理學院‧無障礙網站管理系統
如何將圖示連結加入頁面?
在管理畫面的區塊管理,選擇『ˇ新增』連結,新增一個區塊,
主要的輸入內容如下:
1.區塊位置:一般會將圖示連結,放在左方區塊。
2.模組屬性:選擇→圖示連結。
3.標題文字:一定要輸入。
4.區塊類別:使用預設的『自行編輯』,但不要輸入任何內容。
~ 41 ~
致遠管理學院‧無障礙網站管理系統
最新公告:網站訊息發佈與管理
最新公告模組,可以讓個別網站的管理者,授權(分權)給所屬進
行消息的發佈與管理,達到分權授予使用管理模組內容的管理效
果。關於如何建立分權管理,請參閱第 71頁『模組分權』。
最新公告主管理畫面
您的網站中可能會有
一個以上的公告模組
(原生、衍生),所以
管理設定公告模組前,
請先選擇:目前選定
模組,在進行各項的
管理設定。
1.編修模組(模組設
定)
A.新增一個衍生的公告模組:網站管理者可以根據不同的公告
目的需求、限定特定人員使用...,建立各種不同的公告衍生
模組。
~ 42 ~
致遠管理學院‧無障礙網站管理系統
注意:衍生公告模組,不會和原生的公告模組合併在一起顯
示公告列表。建立衍生模組後,請建立對應的區塊,以便顯
示該衍生公告模組的內容。
B.如何將衍生公告模組,發佈在網頁上?
a.建立一個區塊:區塊管理→新增。
b.模組屬性:這是衍生模組,選擇『不使用』。
c.更多資訊連結的輸入規則:../pub/index.php?type=web&account=網站管理帳號&dup=衍生模組代號
本範例:網站管理代號=healthcare,衍生模組代號=1
d.區塊類別:請選擇『自行編輯』,但不需輸入任何資料。
e.RSS網址:本範例是使用 RSS的方式萊顯示資料,輸入的規
則如下:
~ 43 ~
致遠管理學院‧無障礙網站管理系統
http://學校網址/pub/rss.php?account=網站管理帳號&dup=衍生模組代號
學校網址:視實際情況而定,可能是 www.dwu.edu.tw或
www.dwu.edu.tw/w99或其他...。
網站管理代號=healthcare,衍生模組代號=1
f.顯示筆數,建議5。
2.重置擁有權:重新設定各原生、衍生公告模組的使用權限。
3.網站最新公告設定:設定所選擇的公告模組的基本資料。
4.編修所選定的公告模組,新增‧編輯或刪除公告。
~ 44 ~
致遠管理學院‧無障礙網站管理系統
相關連結:必要時輸入發布公告所參考的網址來源。
可以上傳四個附加檔案。
內容編輯的編輯方式,請參閱第 73頁『網頁內容編輯工具操作說
明』的說明。
5.檢視最新公告。
~ 45 ~
致遠管理學院‧無障礙網站管理系統
圖片中的網址,就是建立衍生公告區塊的更多資訊連結所輸入
的網址。
~ 46 ~
致遠管理學院‧無障礙網站管理系統
行事曆管理
行事曆管理,與最新公
告模組一樣,可以建立
分權管理者、衍生模組,
相關的應用方式,可以
參閱『最新公告』模組
的說明。
編修模組‧重置擁有權
‧編修行事曆設定‧檢
視行事曆,操作方式與
『最新公告』相似,不
再另作說明。
如何新增行事曆?
在『目前選定模組』選擇要編修的行事曆模組(原生或衍生),再
選擇:編修「...」所發布的行事曆。
在對應的日期列上,點選『新增』,進入當入的行程編輯新增。
範例說明一:
新增模式:連續。
開始日期:2010-01-05。結束日期:2010-01-08
行事摘要:網站管理研討會
設定結果:1/5-1/8這四天都會出現網站管理研討會。
~ 47 ~
致遠管理學院‧無障礙網站管理系統
範例說明二:
新增模式:每週一。
開始日期:2010-03-01。結束日期:2010-12-31
行事摘要:週會
設定結果:2010/03-2010/12這 10個月每逢週一都會出現週會。
範例說明三:
新增模式:每月 15號。
開始日期:2010-01-01。結束日期:2010-12-31
行事摘要:發薪日
設定結果:2010年每月 15日都會出現發薪日。
~ 48 ~
致遠管理學院‧無障礙網站管理系統
如何修改或刪除行事曆?
在『目前選定模組』選擇要
編修的行事曆模組(原生或衍
生),再選擇:編修「...」
所發布的行事曆。
使用『<<上月』‧『下月>
>』的連結,快速到達所要編
修的月份,在日期對應的
『預定行事』欄中,點選行
事曆摘要的連結,進入該型
式力事件的編輯畫面。
接著選擇『編
輯』或『刪
除』,進行相
關修改。
編輯只能針對
單一選取的事
件進行修改。
沒有整個週期
事件一起修改
的功能。
如果是週期性事件,
可以選擇單筆刪除,
或整個週期事件一起
刪除。
~ 49 ~
致遠管理學院‧無障礙網站管理系統
檔案櫃管理
檔案櫃管理,相當於一
般常見的『檔案下載』
功能,可以將要讓使用
者下載的檔案,透過這
個檔案櫃模組來管理。
檔案櫃管理,與最新公
告模組一樣,可以建立
分權管理者、衍生模組,
相關的應用方式,可以
參閱『最新公告』模組
的說明。
編修模組‧重置擁有權
‧檢視檔案館,操作方
式與『最新公告』相似,不再另作說明。
檔案櫃的管理,可以先建立類別資料夾,然後在指定的類別上傳
檔案,有效的分類管理,可以讓您的檔案櫃下載功能,更易於使
用。
在這個範例說明裡,假設這個網頁有三個檔案櫃的資料類別,因
~ 50 ~
致遠管理學院‧無障礙網站管理系統
此會先新增三個類別名稱分別為:法令規章‧OfficeHours時間
表‧系友會資料的類別。因為是類別性質,因此不需上傳檔案。
當網站使用
者點選檔案
櫃時,所呈
現的樣式,
如右。
再根據需求
進入對應的
類別下載所需的資料。
選擇要放置檔案的類別資料夾,在這個類別下,在點選『ˇ新
增』連結,準備新增檔案。每一個檔案櫃中的檔案,代表一個上
傳內容,每一個上傳內容,最多可以包含四個實體檔案。
例如:
有一個組織章程的辦法,分別以四個檔案,來分割四個章節,在
這個組織章程的檔案新增作業時,類別要選擇;檔案,然後分別
~ 51 ~
致遠管理學院‧無障礙網站管理系統
點選要上傳的這四個檔案,並分別給予這四個檔案,一個名稱,
作為下載的連結名稱。
標題:就輸入這個組織章程的名稱。
說明:輸入這個下載的必要說明,幫助使用者來了解這個下載內
容的主題。
當網站使用者點
選這個下載內容
時,所顯示的下
載呈現方式,如
下:
有四個連結,可
以供下載。
~ 52 ~
致遠管理學院‧無障礙網站管理系統
資料列表的排序方式,有:按建立的日期(降冪)‧按設定的排序
值(升冪),可以在編修『...』檔案館的設定連結,點選進入設
定。
~ 53 ~
致遠管理學院‧無障礙網站管理系統
相簿館管理
相簿館管理,相當於
一般常見的『電子相
簿』功能,可以將活
動相片‧圖檔掃描...
等,上傳讓使用者瀏
覽。
相簿館管理,與最新
公告模組一樣,可以
建立分權管理者、衍
生模組,相關的應用方式,可以參閱『最新公告』模組的說明。
編修模組‧重置擁有權‧檢視相簿館,操作方式與『最新公告』
相似,不再另作說明。
相簿館設定
選擇『目前選定模組』(原生模組‧或衍生模組),再點選編修『.
..』的相簿館設定連結,進入該選定的相簿模組,進行相關的設
定,幾個較常用的設定值,如下:
1.相簿模組的『頁面』基本資料:標題‧標題圖‧背景圖‧背景
色...。
2.相簿模組的『相簿』展示基本資料:圖示‧欄數‧每頁筆數‧
路徑底色‧條列底色‧相簿主題底色‧表格主題底色‧使用外
框否...。
3.幻燈片播放方式的時間間隔‧是否隨機播放。
4.相簿/目錄排序方式:按建立的日期(降冪)‧按設定的排序值(
升冪)。
5.相片的排序方式:按建立的日期(降冪)‧按設定的排序值(升冪
)。
~ 54 ~
致遠管理學院‧無障礙網站管理系統
6.是否保留相片原始檔。
建立相簿模組下的相簿類別‧或建立相簿:
可以透過建立相簿類別的方式,來建立相簿的分類管理,協助使
用者快速‧簡易的找到想要的電子相簿。
以下的範例中,建立了三個相簿的類別:畢業典禮‧迎新活動‧
其他活動。在選擇相簿模組(原生或衍生相簿模組)後,點選:編
修『...』所發佈的相簿館的連結,進入新增類別、相簿,或編
修已存在的相簿。
~ 55 ~
致遠管理學院‧無障礙網站管理系統
新增相簿
點選進入要建立相簿類別,按下『ˇ新增相簿』的連結,進入新
增的頁面:
1.輸入『新相簿的名稱』。
2.上傳『相簿的封面圖』,或『上傳zip壓縮檔』:這兩個選項,
一次只能執行其中的一個。
建議:直接將要上傳的所有相片壓縮成一個zip格式的資料檔,
上傳這個壓縮檔。
3.檔案上傳後,會自動解壓縮,並調整相片顯示的大小:長
580px,寬 435px,相片縮小圖的大小為:長 120px,寬 90px。
~ 56 ~
致遠管理學院‧無障礙網站管理系統
這裡的圖片大小、縮圖大小,是整體系統預設值,不開放個別
相簿或個別網站的修改調整。
4.多張相片上傳,會預設第一張為相簿的封面圖。
5.如選擇:先上傳相簿的封面圖,可以接著再增加加入相簿的照
片。
上傳相片壓縮檔後的相簿基本資料調整
選擇相簿,右邊的『編』連結,進入相簿的封面基本資料修改。
相簿的封面圖,不一定要是相簿中的圖片,可以自行上傳圖片,
但這張封面圖,只有120x90的大小,不會出現在相片播放的相
片範圍內。
關於相簿的名稱‧內容說明,也是在這裡修改。
~ 57 ~
致遠管理學院‧無障礙網站管理系統
上傳相片壓縮檔後的相片個別資料修改調整
選擇相簿,左邊的相簿名稱連結,開啟個別相片的基本資料修改
畫面。
因為是壓縮匯整相片檔案上傳,所以相片上傳後,必須再補上每
一張相片的主題‧說明。
點選個別相片右邊的『編』連結,進入各別相片的內容編輯,適
當的輸入:相片名稱‧相片說明,使符合無障礙網站檢測標準的
~ 58 ~
致遠管理學院‧無障礙網站管理系統
規範要求。
除了可以調整排序的排序值來調整相片的顯示順序外,也可以使
用相片列表,個別相片左側的︽連結,或︾連結,來調整顯示的
順序。
可以選擇個別相片的『刪』連結,來一張一張的刪除相片。也可
以勾選個別相片左側的□,選取多張後,點選列表上方的『刪除
選擇』連結,一次刪除多張相片。
~ 59 ~
致遠管理學院‧無障礙網站管理系統
再增加相簿中的相片
在相簿的相片列表下方,有一個『ˇ新增相片』的連結,點選這
個連結,可以進入新增相片的畫面。
這裡提供兩種新增相片的方式:單張相片上傳‧ZIP壓縮檔上傳,
在符合無障礙網頁檢測的規範下,請確實輸入主題及說明。
~ 60 ~
致遠管理學院‧無障礙網站管理系統
如果採用先壓縮在上傳的方式,請確認相片檔在壓縮的根目錄上,
且不使用子目錄,存放相片檔。
~ 61 ~
致遠管理學院‧無障礙網站管理系統
好站報報
好站報報管理,提供了
收集網站連結的功能,
各網站可以根據網站的
特性,將其連結建立統
一有效的管理。
好站報報管理,與最新
公告模組一樣,可以建
立分權管理者、衍生模
組,相關的應用方式,
可以參閱『最新公告』
模組的說明。
編修模組‧重置擁有權
‧檢視好站報報...等,
操作方式與『最新公
告』相似,不再另作說
明。
建立分類
好站報報的管理,
可以先建立類別
資料夾,然後在
指定的類別上建
立連結資料。
在這個範例裡,
準備建立六個分
類:鄰近學校‧
大專院校‧研究
所‧交通工具‧地方資訊‧考試資訊。
~ 62 ~
致遠管理學院‧無障礙網站管理系統
選擇『目前選定模組』(
原生模組‧或衍生模組),
再點選編修『...』所發
布的好站報報。
選擇好站報報列表右上角
的『ˇ新增』連結,進
入新增作業。
新增連結資料
選擇進入要存放連結資料
的分類。
以下的範例,要在研究所
的分類下,建立一個新的
連結,作法:
選擇『目前選定的模組』,
再點選編修『...』所發
布的好站報報。
接著選擇『研究
所』分類,選擇
研究所分類下現
有連結列表右上
角的『ˇ新增』
連結,進入新增
作業。
新連結發佈的畫
面與分類新增的畫面相同,差別在於網址或類別要選擇:網址。
匯出好站報報資料的功能
本管理系統提供將好站報報的資料,使用 Excel的檔案格式匯出
~ 63 ~
致遠管理學院‧無障礙網站管理系統
的功能,方便個別網站管理者將網站連結的資料,從資料庫中匯
出。
作法:選擇『目前選定
的模組』,在選擇:匯
出『...』的好站報報,
儲存或開啟這個 Excel
檔案。
下載資料中,各欄位所
代表的意義,併以下介
紹匯入資料時一併說明。
匯入好站報報資料的功能:匯入資料的格式
匯入的資料格式,如下:ID編號‧帳號識別‧重複‧父 ID‧排
序‧種類‧標題‧超連結‧說明‧人氣‧日期‧擁有者
不知道『帳號識別‧重複‧父 ID‧擁有者』等基本資料的情況下,
先建立一些基本資料,再匯出這些資料,並比對本說明書的說明,
可以快速的掌握這些資料的意義。
1.Id編號:
~ 64 ~
致遠管理學院‧無障礙網站管理系統
紀錄該分類或網址的唯一編號,系統會自動產生編號,可以空
白不填入。(要自己編也可以,但系統不會照您所編的數字寫入
資料庫)
2.帳號識別:
網站的唯一識別編號,本範例的帳號識別是3。
如果不知道所屬的帳號識別,可以先建立幾筆簡單的資料,再
匯出,根據匯出的資料來判定。
這個資料欄位不輸入也可以,輸入錯誤也沒關係(正確的建立資
料,可以有效的幫助建檔者做資料追溯),系統在考量上傳資料
的正確性下,會自動由登入者的登入資料中,取得帳號的識別
碼。
3.重複:
紀錄原生好站報報模組或衍生好站報報模組的識別碼。
如果是要匯入到原生模組,一律輸入 0。
衍生模組的狀況,可以先建立幾筆簡單的資料,再匯出,根據
匯出的資料來判定。
4.父 ID:
0代表放在模組的主目錄(最外層),
其餘數字代表該分類或網址的所屬分類的 ID編號。
例一:鄰近學校‧大專院校‧研究所‧交通工具‧地方資訊‧
考試資訊,是在主目錄下的分類,所以他們的父 ID都是0。
例二:台灣大學醫療機構管理研究所‧陽明大學醫務管理研究
所,建立在研究所分類下,研究所的 ID編號是3,所以這兩筆
資料的父 ID是3。
例三:考選部是建立在考試資訊的分類下,考試資訊的 ID編號
是6,所以這一筆資料的父 ID是6。
5.種類:
1代表分類的類別,
2代表網站的網址。
6.標題‧超連結‧說明:請依實際狀況輸入。
~ 65 ~
致遠管理學院‧無障礙網站管理系統
7.人氣:已瀏覽的次數。
8.日期:
該筆資料的建立日期時間。
Excel資料格式,使用文字格式即可。
樣式:yyyy-mm-dd HH:MM:SS(日期‧時間之間有一空白)。
9.擁有者:
如果是網站的原管理帳號,擁有者為0。
如果是網站的分權管理者,就是該分權管理者的 ID(不是分權者
的帳號),如果不知道自己的分權 ID,可以先建立幾筆簡單的資
料,再匯出,根據匯
出的資料來判定。
如何匯入資料?
根據規定的資料格式(如
果不知道需要哪些資料
欄位,可以從匯入的連
結畫面下載格式檔案,
或匯出現有的資料來參
考),準備好要上傳的
Excel資料檔。
資料上傳後,記得回到網頁正常瀏覽的頁面,看一下資料上傳後
的正確性。
必要時再予適當的調整‧修改。
~ 66 ~
致遠管理學院‧無障礙網站管理系統
~ 67 ~
致遠管理學院‧無障礙網站管理系統
影音櫃
影音櫃管理,提供了上傳
影音檔案‧使用外部影音
連結的功能。
影音櫃管理,與最新公告
模組一樣,可以建立分權
管理者、衍生模組,相關
的應用方式,可以參閱
『最新公告』模組的說明。
編修模組‧重置擁有權‧
檢視影音櫃...等,操作
方式與『最新公告』相似,
不再另作說明。
選擇:目前選定
的模組,再選擇:
編修...所發佈
的影音櫃。
在影音櫃主題列
表的表格右上方,
點選『新增』連
結。
本範例擬在『客
家新聞雜誌』的
分類下,建立一
個來自 YouTube
的影音連結,進
行的步驟,如下:
~ 68 ~
致遠管理學院‧無障礙網站管理系統
在 youTube網站搜尋,取得要連
結的相關資訊。
在影片內容介紹的方塊上,可以
取得這個影片的網址及一些說明
資料。
點一下網址下方的方塊,可以快
速選取這個影片的連結網址。
新增影音檔的各項輸入內容,如
附圖內容。
目前允許上傳的
影音格式檔有:
avi, mpg, mwv,
asf, rm, mp3,
wav, mid, ra,
flv。
上傳的檔案格式,
儘量採用串流影
音格式的檔案,
如:mwv, asf,
rm, flv...等,
採用串流影音格
是撣,有助於線
上瀏覽欣賞影音
檔的流暢度,降
低伺服器的負擔。
~ 69 ~
致遠管理學院‧無障礙網站管理系統
計數器
1.具有防灌水
的功能。啟
用此功能時,
如果使用者
一直按
F5(重新整
理),計數
器不會增加
累計的次數。
2.可以自訂計
數器的位數。
預設是五位
數。
3.提供累計次
數歸零的功
能。
4.本系統提供 50種計數圖示供選用。
5.提供計數器的連結語法,供COPY使用。
6.每個網站的計數器,預設放在『中間區塊』的最下方,實際顯
示的位置,可能會因所增加的區塊,而有所變動,必要時請作
『位置排序』的調整。
~ 70 ~
致遠管理學院‧無障礙網站管理系統
模組分權
本網站管理系統的部份模組,依照該網站所授與的模組權限,網
站的管理者,可以建立所屬網站下的內容維護管理者,這個功能
稱為『分權』。
建立所屬網站下的分權管理步驟如下:
1.建立分權帳號:
2.授予模組使用權限:
新增的分權管理者,不具有任何管理權限。
所列的管理模組中模組名稱為灰色字者,代表不具使用權,顯
示為黑色字者,表示該分權管理者具有該組模的使用權限。
按下『編』這個連結,進行該分權使用者的權限授予。
~ 71 ~
致遠管理學院‧無障礙網站管理系統
點選要授與該分權管理者的模組,『可』表示授權使用,
『否』表示不售予該模組的管理權。
~ 72 ~
致遠管理學院‧無障礙網站管理系統
網頁內容編輯工具操作說明
這個內容編輯工具,可能會因您所使用瀏覽器不同、版本不同,
而有操作上的差異,目前已確認可以正常運作或可能會有問題的
版本列舉如下:
1.Microsoft IE 6.0 ---> OK。
2.Microsoft IE 7.0 ---> OK。
3.Mozilla FireFox 3.5.x --> OK。(上傳檔案管理的功能,可能
會不完整)
4.Google Chrome Portable 4.0.x --> 會有狀況。
本網站管理系統提供一個類似 Dreamweaver / FrontPage的線上
內容編輯工具,協助使用者在管理網站內容時,可以輕易的編輯
具有 HTML格式的內容,幫您製造出 Rich Text Format格式效果
的內容。
圖示/功能 說明
原始碼 可以切換到原始碼的狀態,直接編輯 HTML碼,
或貼上 HTML程式碼。不熟悉 HTML語法者,不
建議使用。
儲存 相當於網頁表單上的『確定送出』等同性質按
鈕。
開啟新檔 清除現有的編輯中的內容,重開新的編輯內容。
預覽 另開新視窗,預覽目前的編輯內容。
樣版 選取本系統提供的樣版,插入至游標所在位置。
~ 73 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
剪下 剪下已選取的內容。
複製 複製已選取的內容。
貼上 貼上已剪下或已複製的內容。
貼為純文字格式 將已剪下,或已複製的內容,去除所有的屬性
資料,紙貼上文字內容。
自 word貼上 貼上來源的 word格式的資料。可以選取是否移
除 word的字型設定或樣式設定。
執行貼上時,可能會遇到的問題?
因使用的瀏覽器不同,在使用本系統的編輯工
具時,可能會遇上各種操作上的疑惑?
例如:使用 IE7時,要執行貼上 ‧ 時,可
能會出現如下要求確認的對話方塊:
如果確認資料來源沒問題,可以選擇『允許存
取(A)』,同意將資料貼上。
如果一直需要重複的確認,可以考慮調整IE7
的設定,設定操作的步驟如下:
1.工具(T)
2.網際網路選項(O)
3.『安全性』分頁
4.『自訂等級』按鈕
5.允許程式設計剪貼簿存取→啟用。
~ 74 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
~ 75 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
列印 列印目前的編輯內容。
拼字檢查 拼字檢查。
復原 回復到未執行最近一次動作的編輯狀態。
重複 回復到上一個『復原』動作未執行前的狀態。
尋找 提供尋找‧取代的功能,預設為尋找。可以使
用的選項:大小寫須符合、全字相符。
取代 提供尋找‧取代的功能,預設為取代。可以使
用的選項:大小寫須符合、全字相符。
全選 選取全部的內容。
清除格式 清除選取內容的格式。主要是清除文字的大小、
顏色、粗體、斜體、底線、刪除線...等,不包
含清除超連結的設定...等。
粗體 將選取的文字變更為粗體。
或將選取的粗體文字,取消粗體設定。
或將游標停駐位置的前後粗體字串,取消粗體
設定。
斜體 將選取的文字變更為斜體。
或將選取的斜體文字,取消斜體設定。
或將游標停駐位置的前後斜體字串,取消斜體
設定。
底線 將選取的文字加入底線。
或將選取有加底線文字,去除底線。
或將游標停駐位置前後有加底線的字串,去除
底線。
刪除線 將選取的文字加入刪除線。
或將選取有加刪除線文字,去除刪除線。
~ 76 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
或將游標停駐位置前後有加刪除線的字串,去
除刪除線。
下標 將選取的 ASCII字元變更為下標文字。
(經測試,中文字無法製造下標效果)
或將選取的下標文字,取消下標設定。
或將游標停駐位置前後已變更為下標的字串,
取消下標設定。
上標 將選取的 ASCII字元變更為上標文字。
(經測試,中文字無法製造上標效果)
或將選取的上標文字,取消上標設定。
或將游標停駐位置前後已變更為上標的字串,
取消上標設定。
編號清單 如何加入或移除清單編號?
1.將游標停駐在要編號的起始段落,點選邊
號清單小圖示。
2.在已編號的行,要接續一行沒有編號的行
內容,可以使用 shift+enter換行。
3.如何結束清單編號,恢復正常的段落編輯?
以 enter鍵產生新的編號行,在未輸入內
容前,再按一次 enter鍵,剛才已編號未
輸入內容的這一行會自動取消編號,並跳
到另一個新的段落的開始。
4.第一個清單項目,不提供增加縮排的功能。
第二個項目起可以使用縮排。
5.要建立一個次編號系統時,可以搭配增加
縮排的方式,來達成需求。
6.編號清單的編號方式(123...,ABC...),
可能會因瀏覽器的不同而有差異。
7.建議不要做過於複雜的縮排、編號,而影
響了網頁內容的架構。
8.如果真的需要變化編號系統的使用,可以
~ 77 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
用 CSS達成大部份的需求,但要謹慎的使
用。
項目清單 將游標所在位置的行,加入或移除項目符號。
項目清單的操作基本要領,與上述編號清單相
似。
增加縮排 相當於在 Word或一些文書處理軟體中,使用
Tab鍵,來增加段落前的空白位置。
在網頁中,Tab鍵通常都被用來當作跳至下一個
控制項目的用途。
減少縮排 增加縮排的相反作用。
引用文字 設定或取消引用其他來源的標示,被設定的段
落會自動左右縮排,加大與前後段落的距離,
明顯的標示出引用的段落。
設定或取消引用文字的作法:將游標停駐在要
標示的段落上,選點引用文字的小圖示。
新增 DIV標籤 DIV用來建立編輯內容中的『區塊』,本系統已
預設:每次按下enter鍵,就是建立一個div
區塊,在輸入的過程中,只要不按下enter鍵,
這個輸入過程中的內容,都會在同一個 DIV區
塊中。
靠左對齊 游標停駐所在的段落,對自動顯示該段落的對
其狀態,例如: 。
切換對齊方式的作法:在游標停駐所在的段落,
直接點選另一個對齊方式。
左右對齊:這個對齊方式,在英文內容段落,
才會有明顯的效果表現出來。例如:一個英文
內容段落,共自動切換成五行,原設定的對齊
方式是靠左對齊,大部分的情況下,前四行的
左邊切齊左緣,是靠左對齊的效果,但右邊常
置中
靠右對齊
左右對齊
~ 78 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
會因英文單字長度不一,而造成每一行的右邊
凹凸不平,左右對齊就是再製造這五行中前四
行的切齊左緣且切齊右緣的效果;第五行則一
律按原來的編排,切齊左緣。
插入/編輯錨點 『錨點』就是網頁中要被參照使用的一個定點。
例如:在一篇內容很長的網頁中,通常每隔一
個螢幕頁面的長度,都會被加入一個類似『回
到頁首』的超連結,這就是錨點最被常應用的
情況之ㄧ。
如何插入一個錨點?
1.選取要製造錨點的文字‧圖片...等。
2.點選錨點小圖示,準備設定錨點。
3.輸入錨點名稱,完成錨點設定。
4.已完成錨點設定的錨點範圍四周
會有虛線外框;外框的前面會多
出一個黃色的錨圖示(這個圖示
在使用者瀏覽網頁時不會出現,這只是一
個編輯時的辨識符號)。
5.錨點名稱,請使用英文字母或數字,使用
中文字,在要使用超連結插入錨點時,無
法正常顯示所輸入的中文錨點名稱。
如何取消一個瞄點,或編輯錨點名稱?
1.將游標停駐在已設定錨點的範圍上,或選
取已設定錨點的資料範圍。
2.點選錨點小圖示,準備編輯或刪除錨點名
稱。
3.重新輸入您想要的錨點名稱。
4.或將已設定的錨點名稱清除,這樣就算取
消錨點設定。
如何應用已設定的錨點:請參閱超連結的設定
相關說明。
~ 79 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
插入/編輯超連結 如何設定超連結?
1.選取要輸入超連結的
文字範圍‧圖形...。
2.點一下『插入/編輯
超連結』的小圖示。
3.在超連結的『超連結
資訊』分頁上,有三
種超連結類型:
URL‧本頁錨點‧電子郵件,請先選擇您
要使用的超連結類型。
4.確定超連結類型後,不同的類型有不同的
設定方式。以下再分別說明。
設定一般網頁(http/https)的超連結
1.超連結類型:URL
2.從瀏覽器網址列,或在已知來源的連結上,
完整的複製來源網址(包含 http:// ...
等,通訊協定),把它貼到 URL下方的文
字方塊內。
3.如果系統可以辨識所貼上的內容,就會自
行轉換到通訊協定下方的方塊中,並自原
URL下方的方塊中移除已顯示在通訊協定
下方的通訊協定字串。
4.如果系統無法辨識所貼上的內容,通訊協
定下方會顯示為:<其他>,並保留原先貼
至 URL下方方塊的內容。
5.一般網頁的超連結,很多情況下,都是去
連結非自己網站的網址,因此會希望開啟
網頁後,不要佔用了自己的網頁頁面,而
是新開啟一個瀏覽頁面,可以使用『目
標』分頁上的設定功能。
網頁開啟目標視窗的使用
1. <框架>:本網站管理系統,沒有採用框架
~ 80 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
的網頁架構,可忽略這個選項。
2. <快顯視窗>:使用彈出視窗(pop_up) ,
使用這個選項,可
能會因使用者的瀏
覽器設定,而無法
正常顯示。
3.新視窗(_blank):
將連結目標顯示在
新開啟的視窗內。
4.最上層視窗
(_top):解除頁框,將連結的目標顯示在
整個視窗。
5.本視窗(_self):將連結目標顯示在原頁
框內。
6.父視窗(_parent):將連結目標顯示在連
結所在的母頁框。如果沒有母頁框,顯示
的方式與「_self」相同。
不特別指定的情況下(<尚未設定>),就在原視
窗開啟。如果要指定為新視窗(_blank),在內
容編輯時請在要做為連結文字的後面,再加上
『(連結會另開新視窗)』,如果有好幾個連結
在一起,都會另開新視窗,可以連結文字前統
一宣告:(以下連結會另開新視窗)。這是無障
礙網站檢測碼H210100檢測標準的規定。
設定檔案下載的超連結
使用已上傳的檔案,或在建立下載
連結時,再上傳檔案,都可以建立
檔案下載的連結。
選取要建立檔案超連結的文字,點
選超連結的小圖示 ,後續的步驟
如下:
~ 81 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
1.超連結類型:URL
2.點選『瀏覽伺服器端』按鈕,準備上傳檔
案,或選擇已存在網站的檔案。
使用『瀏覽...』鈕,選擇在本機的檔案,
再按『Upload』鈕執行上傳。
3.點選所上傳的檔案名稱,或已存在的檔案
名稱,頁面會自動關閉,並返回原畫面。
4.檔案下載連結的相關資料,就會被自動帶
入通訊協定、URL下方的方塊中,這樣就
算完成建立連結。
建立錨點的超連結
建立錨點的作法,前已說明
假設有一篇很長的網頁內容,
已經建立三個錨點:Home,
Section1, Section2,其中
Home 是建立再頁首的 一個
錨點,在這個網頁上要在適
當的位置建立『回到頁首』
的超連結,做法如下:
1.選取文字『回到頁首』。
2.點擊超連結小圖示 ,進入超連結設定。
3.超連結類型:本頁錨點。
4.之前已設定的錨點會出現在錨點選擇的列
表中。選擇Home。
5.按『確定』完成超連結設定。
~ 82 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
建立電子郵件的超連結
這個電子郵件超連結的功能:當網頁瀏覽點選
這個連結時,會啟動本機的郵件收發軟體,如:
outlook, outlook express, thunderbird等。
並自動載入網頁編輯時所輸入的預設資料:收
件者、主旨、內容。
1.選取要建立發送電子郵件的
超連結文字。例:網站問題
回報。
2.點擊超連結小圖示 ,進入
超連結設定。
3.超連結類型:電子郵件。
4.電子郵件:請輸入預設的郵
件收件人郵件帳號。例如:
網站管理員的郵件帳號。
5.郵件主旨:這個範例是『網頁問題回報』。
6.郵件內容:這個範例是『1.網頁網址:
2.問題描述:』。
如何編輯已存在的超連結設定內容?
將游標停駐在已建立超連結的文字、圖形、或
物件...上,點擊一下『超連結』小圖示 ,即
可進入該超連結的設定。
移除超連結(觀察
一下插入跟移除,這
兩個圖示的差異?)
將游標停駐在已建立超連結的文字、圖形、或
物件...上,點擊一下『移除超連結』小圖示 ,
即可移除之前所建立的各式超連結。
插入/編輯影像 在編輯網頁內容時,可以使用已上傳的圖檔,
或在要插入影像時,再上傳圖檔,都可以在網
頁內容插入影像。
~ 83 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
如何插入影像
1.點選影像
小圖示 ,
開啟影像
屬性的小
視窗。
2.使用『瀏
覽伺服
器』按鈕,選取現有的圖檔,或上傳圖檔。
點選圖檔名稱,將圖檔資料代入。
3.如果是外部圖片,可以將圖片的網址,直
接複製貼到 URL下方的文字方塊。
4.替代文字:是必須輸入的資料項目。替代
文字是無障礙網頁檢測標準H101000的檢
測規範:圖片需要加上替代文字說明。
5.圖片顯示的寬度‧高度設定:可以設定為
等比例‧或自訂比例變動。
6.可以將圖片設回使用原圖尺寸大小顯示。
7.水平‧垂直距離:圖片與相鄰文字‧邊框
~ 84 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
...的像素距離。
8.對齊:設定圖片位置與相鄰網頁內容文字
間的關係。以下圖片範例基於→邊框=1,
水平距離=0,垂直距離=0。
A.預設值(空白,
未指定)。未
指定的狀況,
是以基準線為
位置關係的預設值(baseline)。
B.靠左對齊
(left):這
是一般常見
的文繞圖方
式。推薦您使用這個選項。
C.絕對下方
(absBottom)
:圖片下緣與
網頁內容第一
行英文字母的最下緣切齊,如:qypgj
這些小寫字母的最下緣。
D.絕對中間
(absMiddle)
:圖片水平中
線與網頁內容
第一行英文字母中線切齊。字母中線:
大寫英文字母的水平中線。
E.基準線
(baseline):
圖片下緣與網
頁內容第一行
英文字母的基準線切齊。基準線:大寫
英文字母下緣這一條線。
~ 85 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
F.靠下對齊
(bottom):就
大部分的瀏覽
器而言,靠下
對齊就是基準線對齊。
G.置中對齊
(middle):圖
片水平中線與
網頁內容第一
行英文字母基準線切齊。
H.靠右對齊
(right):這
是一般常見的
文繞圖方式。
推薦您使用這個選項。
I.文字上方
(textTop):
圖片上緣與網
頁內容第一行
英文字母的最上緣切齊。實際的效果會
因瀏覽器不同而有差異。
J.靠上對齊
(top):圖片
上緣與網頁內
容第一行整行
內容的最上緣切齊。實際的效果會因瀏
覽器不同而有差異。
建立影像的超連結
很多情況下,都會有點擊圖片後,開啟超連結
的需求。例如:
1.開啟一個新的網頁。
2.開啟上傳圖片的原尺寸影像。
~ 86 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
3.下載一個檔案。...
以下範例,點擊縮圖的超
連結,開啟這個縮圖的原
尺寸圖檔。
1.假設縮圖的顯示配
置已完成。
2.點選編輯內容上的圖片,再點選編輯影像
的小圖示 。
3.切換至影
像屬性的
『超連
結』分頁,
點選『瀏
覽伺服器端』按鈕。
4.在影像瀏覽的視窗,Resource Type 選擇
Image,會列出現有的圖檔。點選『蓮潭
會館.jpg』這個檔案,會將連結資料帶入
影像屬性這個畫面。
5.選擇點擊縮圖連結後,所要開啟的目標視
窗,這裡是在新視窗(_blank)開啟。
6.這樣就可以在點擊縮圖連結後,在新的視
窗以原尺寸大小,開啟顯示這個圖檔的影
像。
~ 87 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
插入/編輯 Flash 一般的情況下,Flash可以展現很棒影像效果,
而且是一種相當受歡迎的影像動畫格式,但是
在無障礙網頁的設計考量‧規範下,為了符合
無障礙的原則,在使用本系統時,請依照說明
書的作法編輯資料。
在編輯網頁內容時,可以使用已上傳的 Flash
檔,或在要插入Flash影像時,再上傳 Flash
檔,都可以在網頁內容插入Flash影像。
如何插入Flash
1.點選Flash小
圖示 ,開啟
Flash屬性的
小視窗。
2.使用『瀏覽伺
服器』按鈕,
選取現有的 Flash檔,或上傳 Flash檔。
點選Flash檔名稱,將 Flash檔資料代入。
3.如果是外部 Flash檔,可以將 Flash的網
址,直接複製貼到 URL下方的文字方塊。
例:http://www.dwu.edu.tw/web96/bg-images/top2.swf
4.寬度‧高度:指定要顯示的寬度高度。預
~ 88 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
覽效果的尺寸大小,不是原圖的尺寸大小,
也不是原圖的比例,請字行輸入,或在編
輯頁面,點選這 Flash物件,以滑鼠拖曳
調整大小。
5. Flash顯示的縮放原則:
A.全部顯示(showAll):不指定的狀況下,
這是預設值。在指定的寬高範圍內等比
例縮放,但可能會因指定的寬高比與原
Flash寬高比不符,而有兩側或上下邊
框出現。
B.無邊框(noBorder):直接等比例縮放原
Flash檔,但可能因指定顯示的寬高比
與原Flash檔的寬高比不符,而裁減一
部分的內容來顯示。
C.精確符合(exactFit):依照指定的寬高
比,來縮放原Flash檔,因使顯示結果
可能會有變形的情況發生。
6.指定是否自動播
放‧重複播放。
7.開啟選單:如果
不勾選這個選項,
在網頁上以滑鼠
右鍵點擊這個
Flash影像,出現
的功能選項表,就沒有紅色虛線這部份。
~ 89 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
8.標題:預設值是『這是一個 Flash檔』,
可以針對實際狀況輸入更貼近現況的標題
名稱,但不可以清為空白。如自行清為空
白,存檔時,還是會自動把『這是一個
Flash檔』存入標題。
插入/編輯表格 在網頁內容的編輯過程中,表格時常被用來當
作內容排版的配置應用。但無障礙網頁對於表
格有不少的使用規範,所以在使用表格時,應
該要特別小心,本說明書會提供相關的說明。
如何插入表格?
1.點選表格小圖示 ,開啟表格屬性的小視
窗。
2.輸入所要建立表格的列數‧欄數。
3.輸入表格佔編輯範圍寬度的百分比。可選
擇的寬度單位有百分比、像素,為符合無
障礙檢測標準H203004檢測碼的規定:要
使用相對尺寸(如%)而非絕對尺寸(如像
素)。已將寬度單位預設為百分比。
4.表格標題。無障礙檢測標準,對於表格標
題的使用,有非常明確的規定,H105100
檢測碼:對於每一個存放資料的表格(不
是用來排版),需標出行和列的標題。
A.沒有標題:除非表格的用途是排版,否
則不要用這個選項。即使是排版用的表
格,也可以適當的選取表格標題的所在。
~ 90 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
B.在第一列:選擇這個選項後,系統會自
動用 HTML碼建立適當的標識。請在第
一列建立每一欄的適當標題。
C.在第一欄:選擇這個選項後,系統會自
動用 HTML碼建立適當的標識。請在第
一欄建立每一列的適當標題。
D.第一列和第一欄:選擇這個選項後,系
統會自動用 HTML碼建立適當的標識。
請在第一列及第一欄建立每一儲存格的
適當標題。
從其他來源貼上表格的注意事項
基本上不建議這樣做,建議您直接從本系
統的編輯器上,直接編輯。如果要從外部
編輯器,如:Dreamweave/FrontPage,請
先確認所使用的版本由提供表格標題的指
定功能,且已經指定了表格的標題。這樣
才可以更確保內容符合無障礙的規範要求
5.邊框(border):
表格外框線條的
粗細。不需要儲
存格框線時,可
將邊框設為0。
當表格邊框設為0時,在編輯的狀態下仍
會有灰線,以便編輯過程的位置辨識。
~ 91 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
6.間距(Cellspacing):儲存格間的間距。
7.內距(Cellpadding):儲存格的框與內容
間的間距。
8.對齊(align):
A.置中(center):在新版的 HTML標準規
格,置中屬性已無法使用,所以不建議
使用。如有表格置中的需求,請使用樣
式表。
B.靠左對齊
(left):
文字圍繞
表格,表
格靠左對
齊。
C.靠右對齊(right):文字圍繞表格,表
格靠右對齊。
9.標題‧摘要:視表格的編輯用途來決定標
題‧摘要,要如何輸入?摘要視資料性質
輸入,未輸入會有錯誤訊息的提示。
A.表格是排版用途:摘要請輸入『表格排
版』,標題可以不用輸入。
B.表格是資料統計彙整用途:標題為必需
輸入的要求項目,摘要請依照實際的資
料內容擇要輸入。
~ 92 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
如何選取表格?將游標停駐在表格的
邊框上,當游標轉換為十字四箭頭的
符號時,按一下滑鼠左鍵,表格的四
周會出現八個小正方形,該表格就算
是被選取的狀態。
如何編輯表格?
編輯表格前,先選取表格,或將游標
停駐在表格的任一儲存格內。
1.直接點選表格的小圖示 。
2.按一下滑鼠右鍵,彈出編輯功能的選單,
點選『表格屬性』。
列‧欄的編輯
將游標停駐要編輯的列或
欄的儲存格上,按一下滑
鼠右鍵,彈出編輯功能選
單,移動滑鼠指標至
『列』或『欄』上,接著
可以選擇列或欄的插入或
刪除。
如何編輯修改儲存格的屬性?
1.將游標停駐要編輯
的儲存格上,按一
下滑鼠右鍵,彈出
編輯功能選單,移
動滑鼠指標至『儲
存格』,接著可以
選擇儲存格的插入
或刪除或分割。
2.需要一次編輯多個儲存格,請先選取多個
儲存格,再按滑鼠右鍵,開啟編輯功能選
單。
~ 93 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
3.因為這裡提供的儲存格合併功能,是『向
右』或『向下』,所以游標的停駐位置,
決定合併儲存格的功能,是否可以選取?
4.合併的作法:每次只合併向右或向下的一
格,需要多儲存格的合併,請多次執行這
個功能。
5.要編輯儲存格的內容屬性,請選擇『儲存
格屬性』。
一次選取多個儲存格的方法?
1.直接以滑鼠拖曳選取。
2.或:將游標停駐在要選取儲存格範圍的起
點,按住 Shift鍵,移動上(↑)下(↓)左
(→)右(→)鍵,選取所要的範圍。
儲存格的屬性
1.要編輯‧修改調整儲存格的屬性前,請先
將游標停駐在要編輯的儲存格上,或選取
多個儲存格。
2.按一下滑鼠右鍵,彈出編輯功能選單,移
動滑鼠指標至『儲存格』,再移動至『儲
存格屬性』。
3.寬度:如前表格寬度所述,儲存格寬度的
單位,請使用百分比。在沒有特別需求的
狀況下,就不用特別指定多少百分比,表
格會依照實際的內容多寡自動調整各欄的
寬度。
~ 94 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
4.儲存格類型:依照實際的狀況,區分為資
料‧標題兩類型,不需要特別調整。
5.合併列數‧合併欄數:建議不要使用這裡
的功能來進行合併。建議使用彈出功能表
的『向又合併儲存格』或『向下合併儲存
格』來進行合併。
6.自動換行:預設值為是,建議使用這個選
項。
7.水平對齊:資料儲
存格的預設值為
『靠左對齊』,標
題儲存格的預設值
為『置中』。
8.垂直對齊:預設值為『置中』。
9.背景顏色‧邊框顏色:在新版的 HTML中,
已不支援這屬性,建議少用或不要用,如
有這個需求可以改用樣式表來替代。
插入水平線 在游標停駐所在位置,點一下『插入水平線』
的小圖示,就可以插入一條水平線。
插入表情符號 在游標停駐所
在位置,點一
下『插入表情
符號』的小圖
示,會出現一
個表情符號列
表,點擊要使
用的表情,即
可將該表情插入至編輯的內容。
系統會自動給這個表情符號圖形一個替代文字:
表情符號小圖示。您可以修改這些替代文字的
內容,使更貼近這個表情的說明,但請不要刪
~ 95 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
除這些替代文字的說明,使符合無障礙檢測碼
H101000檢測規範:圖片需要加上替代文字說明。
插入特殊符號 在游標停駐所在位置,點一下『插入特殊符
號』的小圖示,會出現一個特殊符號列表,點
擊要使用的符號,即可將該符號插入至編輯的
內容。
插入分頁符號 在游標停駐所在位置,點一下『插入分頁符
號』的小圖示,即可將分頁符號插入至編輯的
內容中。在編輯狀態下的顯示,如下:
分頁符號,只有在列印時才有作用,在網頁顯
示時是沒有作用的。
文字顏色 1.調整所選取範圍的文字的顏色。
2.在游標停駐位置所在,選取文字顏色,選
取後,在該停駐位置後所輸入的文字,即
為選取的顏色。
背景顏色 這裡指的是設定範圍(span)內的背景顏色,一
個 span設定範圍內可能會有:文字‧影像...。
1.調整所選取範圍的背景顏色。
2.在游標停駐位置所在,選取背景顏色,選
~ 96 ~
致遠管理學院‧無障礙網站管理系統
圖示/功能 說明
取後,在該停駐位置後所輸入的編輯內容
的背景,即為選取的顏色。
編輯器最大化 在網頁內容的編輯頁面中,通常除了這個內嵌
的編輯器外,還會有其他的表單輸入元件。編
輯器最大化,就是暫時隱藏其他的表單輸入元
件,在網頁編輯視窗上,只看到這個編輯區域
範圍。
顯示區塊
在編輯區域內,顯示區塊、段落的 HTML標籤,
協助了解區塊配置的情形。
~ 97 ~
致遠管理學院‧無障礙網站管理系統
透過編輯工具上傳檔案至網站管理系統
在編輯工具的小圖示中,可以透過以下幾個視窗的『瀏覽伺服器
端』按鈕 ,來上傳檔案至網站中所對應的資料夾,或
選擇已上傳的檔案
來使用。
1.超連結( )的
「超連結資訊」
分頁。
2.影像屬性( )的
「影像資訊」分
頁。
3.影像屬性( )的
「超連結」分頁。
4.Flash屬性( )
的「資訊」分頁。
不建議使用的上傳方式:在以上所列的分頁旁邊,會有一個『上
傳』的分頁,請不要用這個分頁的功能來進行上傳檔案的作業,
以免檔案上傳後,卻找不到所上傳的檔案,讓您的網頁空間配額,
莫名奇妙被佔用。
目前已將『上傳』
這個分頁的按鈕...
等,設定為不可操
作的狀態。
瀏覽伺服器端操作畫面說明
~ 98 ~
致遠管理學院‧無障礙網站管理系統
1.上傳的檔案或建立的目錄,建議使用英文命名,而且要用有意
義的命名規則,方便再次使用時的辨識,不要使用中文當作檔
名。
2.依照所點選的編輯工具小圖示,進入對應的分類位置:File,
Image, Flash, Media。
3.如上傳的檔案較多,必要時可以在每個分類下建立次目錄,方
便分類管理。第一次建立目錄,可能會出現再確認的訊息,可
以選擇『暫時允許執行指令的視窗(T)』,或設定為允許執行指
令。以IE7.0為例,工具(T)→網際網路選項(O)→『安全性』
分頁→『自訂等級』按鈕→允許網站使用指令視窗要求輸入提
示資訊:啟用。
4.先點選決定上傳檔案要存放的目錄位置,再使用『瀏覽...』鈕
選擇檔案,使用『Upload』鈕上傳檔案。
5.對於以上傳的檔案,提供以下的管理功能:預覽、更改檔名(不
要用中文命名)、刪除檔案。
~ 99 ~
致遠管理學院‧無障礙網站管理系統
如何確認已成功透過『瀏覽伺服器端』上傳檔案至網站管理系統?
網站管理有作業逾時的設定,如果要長時間離開,請登出。需要
恢復作業時再登入。
可以在『瀏覽伺服器端』畫面上看到所上傳的檔案,圖檔點選後
可以正常預覽,就算是上傳成功!
您的磁碟配額,可能已經超過上限了!
當點選『瀏覽伺服器端』按鈕 ,但出現以下訊息視窗
時,表示該網站所使用的磁碟空間,以超出所給的配額大小,請
聯絡電算中心網站管理人員確認這個錯誤訊息!
《IE瀏覽器的錯誤訊息》
~ 100 ~
致遠管理學院‧無障礙網站管理系統
《Firefox瀏覽器的錯誤訊息》
(這裡的訊息較不明確,請聯絡電算中心做再次的確認)
~ 101 ~