跳至主內容區

桃園市學校共構網站管理平臺

依學校
:::

主內容區域

選擇後會自動跳轉頁面

2-5-10 跑馬燈區塊

跑馬燈區塊基本功能介紹與建議值

本區塊為「符合無障礙網頁規範要求」的專用跑馬燈,一般廣泛應用於學校前台的榮譽榜表揚,或者是針對全校親師生發布較新、較具時效性的訊息提醒通知。

♿ 網頁無障礙友善提醒:

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

📋 系統官方建議設定值:

🔹 預設狀態: 關閉 🔹 區塊位置: 中間區域(橫幅主視覺黃金地帶) 🔹 顯示頁面: 僅首頁
跑馬燈資料來源、數量、方向設定
🔍 點擊圖片可放大檢視後台參數配置一

⚙️ 後台參數配置指南 (項目 1 - 5)

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

📌 1. 資料來源(支援多選、跨頁面與跨處室):

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

🔹 頁面總覽: 包含全校的所有校園公告、所有榮譽榜、所有常用連結、所有檔案下載、所有公開資訊、以及所有電子書。

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

📌 2. 顯示數量:

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


📌 3. 運行方向:

⬇️ 由上往下 ⬆️ 由下往上 ⬅️ 由右往左 ➡️ 由左往右

📌 4 & 5. 高度與速度建議:

📐 高度單位為 rem:
🔸 橫向(左右)運行: 高度建議設定為 3 ,移動速度數值一般建議落在 40 ~ 100 之間。
🔸 垂直(上下)運行: 高度建議設定在 12 以上,同時速度強烈建議直接減半以利閱讀。

跑馬燈外觀樣式與無障礙暫停按鈕位置設定
🔍 點擊圖片可放大檢視後台參數配置二

📌 6 & 7. 文字與容器外觀樣式(進階視覺美化):

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

📌 8. 暫停按鈕位置(無障礙操作的核心關鍵):

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

✅ 設定為「左邊」: 當運行方向為橫向(左右)時,建議設定為左邊,最符合無障礙檢測規範。
✅ 設定為「右下」: 當運行方向為垂直(上下)時,建議設定為右下,視覺配置上最為美觀舒服。

🖥️ 前台垂直運行模式與色彩對比度實體外觀

色彩對比度規範與常態色彩配置

▶️ 垂直跑馬燈配置實務

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

滑鼠移過時的對比度色彩設定

💡 垂直模式最佳化設定心法:

🟢 方向與速度: 建議使用「由下往上」,且移動速度務必減半,避免跑太快導致親師生看不清楚內文。

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

選擇後會自動跳轉頁面

:::

左邊區域內容

書籍目錄

展開 | 闔起

頁尾區域