跳至主內容區
南市校網申請平台
導覽列
:::
回首頁
相關服務
十秒鐘轉為負載平衡版！（2023起已非負載平衡）
網站套用 SSL 方法
升級PHP8+XOOPS2.5.11學校需注意事項
升級PHP8+XOOPS2.5.11常見問題
建置無障礙校網步驟及常見問題
WCAG 2.3 AA 無障礙網站編輯注意事項
提供學校主網站搬移至集中式服務
如何搬移網站到集中式？
集中式校網使用常見問題
討論區
重新取得佈景設定
:::
主內容區域
所有書籍
「無障礙校網建置」目錄
MarkDown
2-1 網站初始化設定
選擇後會自動跳轉頁面
1. 集中式校網平台
1-1 無障礙學校網站建置說明
1-2 我可以隨意裝模組嗎？
1-3 我可以把原本學校佈景匯出拿來這裡匯入用嗎？
1-4 常見的無障礙要求（坑）
2. 初始化設定
2-1 網站初始化設定
2-1-1 在Chrome加入個人用無障礙的 skill
2-2 處室設定
2-2-1 基本資訊
2-2-2 頁面設定
2-2-2-1 「行政處室」選單區塊
2-2-2-2 自由編輯頁面
2-2-3 成員設定
2-2-3-1 成員完整設定
2-2-3-2 成員排序
2-2-3-3 行政職務換人
2-2-4 群組帳號設定
2-2-4-1 行政人員登入
2-3 學校簡介
2-3-1 轉移有包含圖片的文章
2-3-2 主要內容為圖片以及附檔注意事項
2-3-3 學校簡介排序與區塊設定
2-4 導覽列選單設定
2-4-1 選單設定
2-5 區塊管理
2-5-1 行政處室
2-5-2 學校簡介
2-5-3 內容列表
2-5-4 顯示單一內容
2-5-5 頁籤區塊
2-5-6 標籤公告區塊
2-5-7 資訊輪播(有圖片的輪播)
2-5-8 標籤連結
2-5-9 顯示某頁面連結
2-5-10 跑馬燈區塊
2-5-11 今日午餐資訊
2-5-12 請由此登入
2-5-13 下載區塊
2-5-14 標籤雲
2-5-15 大型行事曆
2-5-16 小行事曆
2-5-17 工具列
2-5-18 無障礙標章
2-5-19 AQI空氣品質
2-5-20 天氣預報
2-6 佈景套用
3. 頁面（功能）
3-1 自由編輯
3-2 外連
3-3 父選項
3-4 文章（等同 tadnews 的自訂頁面）
3-5 報導（等同 tadnews 的含封面的公告）
3-6 相簿（等同 tadgallery 電子相簿或 tad_gphoto Google相簿）
3-7 榮譽榜（等同 tad_honor 榮譽榜）
3-8 影片（等同 tad_player 影音播放）
3-9 檔案（等同 tad_uploader 檔案上傳模組）
3-10 連結（等同 tad_link 好站連結）
3-11 公告（等同 tadnews 的一般公告）
3-12 處室成員
3-13 行事曆（等同 tad_cal 行事曆）
3-14 電子書
4. 教職員管理
5. 標籤管理
6. 專區管理
7. 申請無障礙標章
2-2 處室設定
無障礙校網建置 ======= <style type="text/css">.ck-img-block-i { overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .ck-img-block-i img { transition: transform 0.3s ease; cursor: pointer; } .ck-img-block-i img:hover { transform: scale(1.04); } </style><div class="container-fluid my-5 border-bottom pb-4"><div class="row align-items-center g-4"><div class="col-12 col-md-5"><div class="ck-img-block-i"></div> </div><div class="col-12 col-md-7">我們可以在 Chrome 瀏覽器加入無障礙的技能，如此可以很方便的把某一篇文章轉換為符合無障礙規格的原始碼。 請開啟 Chrome 並確定已經升級到最新版，目前需要 147 版以上才可以使用這個功能（在網址列中輸入 `chrome://version ` 可查詢版本）。 請在網址列輸入 `chrome://flags ` 然後再按 <kbd class="bg-dark text-white p-1 rounded">Enter </kbd>，接著在下方的搜尋欄輸入 `skills `，然後選用 **Enable** 後，重新啟動 Chrome 就可以了。 </div> </div> </div><div class="container-fluid my-5 border-bottom pb-4"><div class="row align-items-center g-4"><div class="col-12 col-md-5"><div class="ck-img-block-i"></div> </div><div class="col-12 col-md-7">開啟 AI 功能後，在瀏覽器的右上方會有個「問問 Gemini」的圖示，請點選它，並且按下方的「開始對話」，以叫呼叫出對話框。 </div> </div> </div><div class="container-fluid my-5 border-bottom pb-4"><div class="row align-items-center g-4"><div class="col-12 col-md-5"><div class="ck-img-block-i"></div> </div><div class="col-12 col-md-7">呼叫出對話框之後，請輸入斜線「**/**」，然後它就會出現一個加入技能的小視窗，點擊「**+加入技能**」。 </div> </div> </div><div class="container-fluid my-5 border-bottom pb-4"><div class="row align-items-center g-4"><div class="col-12 col-md-5"><div class="ck-img-block-i"></div> </div><div class="col-12 col-md-7">接著會出現「新增技能」的對話框，請輸入名稱「**XOPS文章無障礙處理**」，貼上以下內容，然後儲存即可。 </div> </div> </div> ```markdown # Role 你是一位資深 Web 開發工程師，專精於 WCAG 2.2 AAA 無障礙網頁規範與 NVDA 螢幕閱讀器報讀優化。 # Task 找出本頁面的主要文章或原始碼，轉換為完全符合無障礙規範的 HTML 片段，確保能直接貼入 XOOPS 系統的 CKEditor 中使用。 # Execution Rules ## 1. 結構與標題層級 (無障礙核心) - **保留原意**：若原始內容無標題結構，【嚴禁】自行無中生有添加標題。 - **層級限制**：若原始內容包含標題，【一律從 <h3> 開始】向下遞增。絕對【禁用】`<h1>` 與 `<h2>`。 - **語意 vs 視覺**：只有具備「文件大綱語意」的標題才能使用 `<h3>`-`<h6>`。若純粹為視覺上的美化或強調，請改用 Bootstrap 5 的字級與粗細類別（例如：`<span class="fs-4 fw-bold">`），禁止濫用標題標籤。 ## 2. 連結處理 (NVDA 友善) - **隱藏網址**：【嚴禁】直接將網址字串作為超連結文字（例如 <a>https://...</a> 是違規的）。必須將網址整合進具備描述性的文字中。 - **Title 屬性限制**：`title` 屬性【僅限】用於提示特殊行為或格式（例如：`title="另開新視窗"` 或 `title="PDF文件"`）。【嚴禁】寫入與連結文字重複或冗餘的描述。`target`屬性不存在或不是_blank時，`title` 屬性【嚴禁】寫入"另開新視窗"。 - **內容忠實**：不得自行增減原始內容中的連結或檔案數量，遇到Email【嚴禁】加上連結。 ## 3. 圖片與表格處理 - **自適應圖片**：所有 <img> 標籤必須加入 Bootstrap 5 類別 `.img-fluid`。【嚴禁】在 style 中寫死 width 與 `height`。 - **替代文字 (Alt)**：依據圖片意義提供精確的 alt 描述；若為純裝飾性圖片，必須加上 `alt=""`。 - **圖轉文/表**：若圖片內容包含「表格」、「大量文字」或「平面圖等複雜圖表」，【必須】在圖片下方直接產生對應的 HTML 表格或語意化文字摘要（平面圖需轉為口語化描述）。 - **表格**：表格中若有使用 caption 標籤，【必須】用`style="caption-side: top;"`使之顯示在表格上方。 ## 4. 色彩與樣式 (AAA 級標準) - **高對比度**：任何自訂的文字與背景色彩搭配，文字對比度【必須】符合 WCAG 2.2 AAA 級的 7:1 標準。 - **優先使用框架**：樣式請優先使用 Bootstrap 5 內建類別，盡最大可能減少自定義的 Inline CSS (`style="..."`)。 - **附件處理**：若內文提到「檢附文件」等字眼，保留原文字樣即可，不需虛構或預留連結位置。 # Output Format (嚴格遵守) 1. **純程式碼**：僅輸出適用於 CKEditor 的 HTML 片段。 2. **零廢話**：【禁止】任何問候、自我介紹、思考過程、解釋說明或結語。 3. **單一區塊**：將最終結果包裝在單一個 ` html ` 與 ` ` 的程式碼區塊中，以便使用者一鍵複製。 ``` <div class="container-fluid my-5 border-bottom pb-4"><div class="row align-items-center g-4"><div class="col-12 col-md-5"><div class="ck-img-block-i"></div> </div><div class="col-12 col-md-7">儲存後，我們先連到想要進行無障礙處理的頁面（一般就是舊校網文章或者其他網站的文章頁面），然後一樣在對話框的畫面，輸入斜線，然後選擇剛剛新增的 「**XOOPS 文章無障礙處理**」即可。 </div> </div> </div><div class="container-fluid my-5 pb-4"><div class="row align-items-center g-4"><div class="col-12 col-md-5"><div class="ck-img-block-i"></div> </div><div class="col-12 col-md-7">如此 Gemini 就會針對該頁面找出主要內容文章，並套用 skill 將文章處理為無障礙模式，最後轉換成原始碼供我們後續複製貼上使用。 </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgIModal1" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content bg-transparent border-0"><div class="modal-body p-0 text-center position-relative"><button aria-label="Close" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" type="button"></button></div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgIModal2" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content bg-transparent border-0"><div class="modal-body p-0 text-center position-relative"><button aria-label="Close" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" type="button"></button></div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgIModal3" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content bg-transparent border-0"><div class="modal-body p-0 text-center position-relative"><button aria-label="Close" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" type="button"></button></div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgIModal4" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content bg-transparent border-0"><div class="modal-body p-0 text-center position-relative"><button aria-label="Close" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" type="button"></button></div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgIModal5" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content bg-transparent border-0"><div class="modal-body p-0 text-center position-relative"><button aria-label="Close" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" type="button"></button></div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgIModal6" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content bg-transparent border-0"><div class="modal-body p-0 text-center position-relative"><button aria-label="Close" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" type="button"></button></div> </div> </div> </div>
:::
左邊區域內容
依學校
篩選
若帳密正確卻無法登入，Chrome 請按 Ctrl + Shift + N 用「無痕視窗」試試。
請點此觀看解決辦法
。
對每個網站都有用喔！
右邊區域內容
登入後始可申請（僅限
台南市資訊組長
）。
申請網站數量不拘，方案空間總和不超過50G即可。
特色：
一套程式共用，每個站至少節省200M空間
一鍵安裝，省卻繁雜安裝流程
支援 IPv6
支援 HTTP/2
一鍵套用Let's Encrypt SSL安全憑證，瞬間提昇網站安全性
自動更新，不用擔心升級
支援客製模組、佈景，可自行安裝模組、佈景
每六小時備份一次，可追朔三天資料，資料不流失！並可提供備份報表下載。
享有比釋出版還要新的模組，第一步搶先使用新功能。
若遇到使用問題，亦可於第一時間排除
頁尾區域
2-1 網站初始化設定
