跳至主內容區
桃園市學校共構網站管理平臺
導覽列
:::
回首頁
無障礙校網手冊
登入
登入
帳號
密碼
登入
重取設定
依學校
篩選
:::
主內容區域
所有書籍
「無障礙校網建置」目錄
MarkDown
2-5-9 顯示某頁面連結
選擇後會自動跳轉頁面
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-3-4 行政職務換人
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-5-11 今日午餐資訊
無障礙校網建置 ======= <style type="text/css">.ck-img-block-n { overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 限制小圖最大寬度，避免在大螢幕上拉大失真 */ margin: 0 auto; } .ck-img-block-n img { transition: transform 0.3s ease; cursor: pointer; } .ck-img-block-n img:hover { transform: scale(1.04); } .card-equal-height { height: 100%; /* 確保網格內各卡片高度水平對齊一致 */ } </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-12"><div class="ck-img-block-n"></div> </div><div class="col-12 col-md-12">本區塊為「**符合無障礙網頁規範要求**」的專用跑馬燈，一般廣泛應用於學校前台的榮譽榜表揚，或者是針對全校親師生發布較新、較具時效性的訊息提醒通知。 <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"></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"></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"></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"></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></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></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></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></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></div> </div> </div> </div>
:::
左邊區域內容
書籍目錄
展開
|
闔起
頁尾區域
2-5-9 顯示某頁面連結