南市校網申請平台

無障礙校網建置
=======

<div class="p-3 bg-white border-start border-4 border-success shadow-sm rounded mb-3">♿ 網頁無障礙友善提醒：

此跑馬燈在設計上提供了**可隨時暫停與控制的無障礙互動機制**，打破傳統網頁動態元件對螢幕閱讀器不友善的盲點，完美符合最新的數位 accessibility 規範。

</div><div class="card bg-light border-0 shadow-sm p-3">? 系統官方建議設定值：

<div class="d-flex flex-column gap-2"><span class="fs-5">? **預設狀態：** <span class="text-danger fw-bold">關閉</span></span> <span class="fs-5">? **區塊位置：** <span class="text-primary fw-bold">中間區域</span>（橫幅主視覺黃金地帶）</span> <span class="fs-5">? **顯示頁面：** <span class="text-primary fw-bold">僅首頁</span></span></div> </div> </div> </div> </div> <div class="container-fluid my-5 border-bottom pb-4"><div class="row g-4 align-items-center mb-4"><div class="col-12 col-lg-6 text-center"><div class="ck-img-block-n">![跑馬燈資料來源、數量、方向設定](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/267.png)</div> <small class="text-muted d-block mt-2">? 點擊圖片可放大檢視後台參數配置一</small></div><div class="col-12 col-lg-6"><div class="p-4 bg-white border-start border-4 border-dark shadow-sm rounded">### ⚙️ 後台參數配置指南 (項目 1 - 5)

管理員可於後台調整跑馬燈的核心運作設定。

</div> </div> </div> <div class="row g-4 mb-5"><div class="col-12 col-lg-6"><div class="card card-equal-height bg-white border-0 shadow-sm border-start border-4 border-primary p-3">? 1. 資料來源（支援多選、跨頁面與跨處室）：

⚠️ 系統防呆提示：清單中僅會主動列出目前「已有實體內容」的頁面，若該頁面尚無內容則會暫時隱藏不列出。

<div class="fs-6 text-muted">? **頁面總覽：** 包含全校的所有校園公告、所有榮譽榜、所有常用連結、所有檔案下載、所有公開資訊、以及所有電子書。

? **處室/專區頁面：** 可單獨精準勾選指定某處室或某專區的特定頁面（項目後方括號內數字代表目前該頁面擁有的內容篇數）。

</div> </div> </div> <div class="col-12 col-md-6 col-lg-3"><div class="card card-equal-height bg-white border-0 shadow-sm border-start border-4 border-success p-3">? 2. 顯示數量：

系統限制在前台輪播的總項目上限，預設值為 `10 ` 筆，可依實際公告量調整。

---

? 3. 運行方向：

<div class="d-flex flex-wrap gap-1"><span class="badge bg-light text-dark border p-1">⬇️ 由上往下</span> <span class="badge bg-light text-dark border p-1">⬆️ 由下往上</span> <span class="badge bg-light text-dark border p-1">⬅️ 由右往左</span> <span class="badge bg-light text-dark border p-1">➡️ 由左往右</span></div> </div> </div> <div class="col-12 col-md-6 col-lg-3"><div class="card card-equal-height bg-white border-0 shadow-sm border-start border-4 border-info p-3">? 4 & 5. 高度與速度建議：

<div class="fs-6 text-muted">? **高度單位為 rem：**  
 ? **橫向（左右）運行：** 高度建議設定為 `3 `，移動速度數值一般建議落在 `40 ~ 100 ` 之間。  
 ? **垂直（上下）運行：** 高度建議設定在 `12 ` 以上，同時速度強烈建議直接**減半**以利閱讀。

</div> </div> </div> </div> <div class="row g-4 align-items-center mb-4"><div class="col-12 col-lg-4 text-center order-lg-1"><div class="ck-img-block-n">![跑馬燈外觀樣式與無障礙暫停按鈕位置設定](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/268.png)</div> <small class="text-muted d-block mt-2">? 點擊圖片可放大檢視後台參數配置二</small></div><div class="col-12 col-lg-8"><div class="row g-4"><div class="col-12"><div class="p-3 bg-light border-start border-4 border-secondary rounded">? 6 & 7. 文字與容器外觀樣式（進階視覺美化）：

這兩個項目屬於「**非必填**」欄位。若學校管理人員有特殊的排版美化需求，可於此處直接輸入標準的 **CSS 語法**（如改變字型顏色、背景漸層等）進行細緻控制。

</div> </div> <div class="col-12"><div class="p-3 bg-white border-start border-4 border-primary shadow-sm rounded">? 8. 暫停按鈕位置（無障礙操作的核心關鍵）：

此按鈕能讓有需要的訪客隨時暫停畫面。設定位置時請務必配合跑馬燈的運行方向，以達到最佳檢測體驗：

<div class="row g-2 text-dark"><div class="col-12 col-md-6 bg-light p-2 rounded border-start border-3 border-success">**✅ 設定為「左邊」：** 當運行方向為**橫向（左右）**時，建議設定為左邊，最符合無障礙檢測規範。</div><div class="col-12 col-md-6 bg-light p-2 rounded border-start border-3 border-success">**✅ 設定為「右下」：** 當運行方向為**垂直（上下）**時，建議設定為右下，視覺配置上最為美觀舒服。</div> </div> </div> </div> </div> </div> </div> </div> <div class="container-fluid my-5 pb-4"><div class="p-3 bg-light rounded shadow-sm mb-4 text-center">### ?️ 前台垂直運行模式與色彩對比度實體外觀

</div><div class="row g-4"><div class="col-12 col-md-6"><div class="card card-equal-height bg-white border-0 shadow-sm p-3 text-center"><div class="ck-img-block-n mb-3">![色彩對比度規範與常態色彩配置](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/269.png)</div><div class="text-start px-2">▶️ 垂直跑馬燈配置實務

當網頁版面中間區域需要呈現大方、沉穩的公告氣氛時，可採用垂直樣式。系統提供清晰明瞭的對比度，即使文字在常態滾動下，亦能保持清晰易讀的色彩架構。

</div> </div> </div> <div class="col-12 col-md-6"><div class="card card-equal-height bg-white border-0 shadow-sm p-3 text-center"><div class="ck-img-block-n mb-3">![滑鼠移過時的對比度色彩設定](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/270.png)</div><div class="text-start px-2">? 垂直模式最佳化設定心法：

<div class="fs-6 text-muted">? **方向與速度：** 建議使用「**由下往上**」，且移動速度務必**減半**，避免跑太快導致親師生看不清楚內文。

? **暫停鈕按鈕位置：** 強烈建議設定為「**右下**」，這樣的視覺配置最協調，能有效避免暫停按鈕過大而突兀地阻擋主要內容。

</div> </div> </div> </div> </div> </div> <div aria-hidden="true" class="modal fade" id="imgNModal266" 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>![放大圖片266](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/266.png)</div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgNModal267" 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>![放大圖片267](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/267.png)</div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgNModal268" 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>![放大圖片268](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/268.png)</div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgNModal269" 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>![放大圖片269](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/269.png)</div> </div> </div> </div><div aria-hidden="true" class="modal fade" id="imgNModal270" 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>![放大圖片270](https://schoolweb.tn.edu.tw/uploads/tad_book3/image/270.png)</div> </div> </div> </div>

若帳密正確卻無法登入，Chrome 請按 Ctrl + Shift + N 用「無痕視窗」試試。

請點此觀看解決辦法。

對每個網站都有用喔！

登入後始可申請（僅限台南市資訊組長）。
申請網站數量不拘，方案空間總和不超過50G即可。
特色：
- 一套程式共用，每個站至少節省200M空間
- 一鍵安裝，省卻繁雜安裝流程
- 支援 IPv6
- 支援 HTTP/2
- 一鍵套用Let's Encrypt SSL安全憑證，瞬間提昇網站安全性
- 自動更新，不用擔心升級
- 支援客製模組、佈景，可自行安裝模組、佈景
- 每六小時備份一次，可追朔三天資料，資料不流失！並可提供備份報表下載。
- 享有比釋出版還要新的模組，第一步搶先使用新功能。
- 若遇到使用問題，亦可於第一時間排除

南市校網申請平台

主內容區域

MarkDown

左邊區域內容

右邊區域內容

頁尾區域