跳至主內容區
南市校網申請平台
導覽列
:::
回首頁
相關服務
十秒鐘轉為負載平衡版！（2023起已非負載平衡）
網站套用 SSL 方法
升級PHP8+XOOPS2.5.11學校需注意事項
升級PHP8+XOOPS2.5.11常見問題
建置無障礙校網步驟及常見問題
WCAG 2.3 AA 無障礙網站編輯注意事項
提供學校主網站搬移至集中式服務
如何搬移網站到集中式？
集中式校網使用常見問題
討論區
重新取得佈景設定
:::
主內容區域
所有書籍
「無障礙校網建置」目錄
MarkDown
3-9 檔案（等同 tad_uploader 檔案上傳模組）
選擇後會自動跳轉頁面
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. 申請無障礙標章
3-11 公告（等同 tadnews 的一般公告）
無障礙校網建置 ======= <style type="text/css">.ck-img-block-l { overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .ck-img-block-l img { transition: transform 0.3s ease; cursor: pointer; } .ck-img-block-l 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-l"></div> </div><div class="col-12 col-md-7">「**連結**」功能等同 `tad_link` 好站連結模組，可新增多個網站連結，並支援滑鼠拉動調整排序。 在行政處室分頁設定啟用「常用連結」功能後，即可在該處室的管理頁面點擊「**新增連結**」。 </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-l"></div> </div><div class="col-12 col-md-7"><div class="p-3 bg-light rounded border-start border-4 border-primary mb-3">? 實用技巧一：網頁原始碼批次搬移法 想從舊網站快速搬移大量連結嗎？如果想把舊站導覽列上某個主選項下「所有子選單連結」通通搬過來，請先用滑鼠移到該導覽選項上。 </div> </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-l"></div> </div><div class="col-12 col-md-7">在該導覽選項上按滑鼠右鍵，選擇「**檢查**」或「**檢測**」（Firefox、Chrome 或是 Edge 瀏覽器均支援此步驟），開啟網頁開發者工具。 </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-l"></div> </div><div class="col-12 col-md-7">在開啟的 F12 檢測視窗中，向下尋找對應子選單的 `<ul>` 標籤結構。在該標籤上點擊右鍵，選擇「**複製 → 內部 HTML (Inner HTML)**」或「**外部 HTML (Outer HTML)**」。 </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-l"></div> </div><div class="col-12 col-md-7">回到新網站的「新增連結」網頁，切換到「**批次新增**」頁籤。 點擊編輯器左上方的「**原始碼**」按鈕，將剛才複製的 HTML 原始碼直接貼入，然後點擊下方的「**開始分析連結**」按鈕。 </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-l"></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-l"></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-l"></div> </div><div class="col-12 col-md-7"><div class="p-3 bg-light rounded border-start border-4 border-warning">⚠️ 連結狀態安全機制： 在系統批次分析檢查過程中，若遇到該網站**無法連線或偵測超時 (Timeout)** 的項目，新系統預設會自動將其設為「**關閉（隱藏）**」狀態，避免前台出現死連結。 </div> </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-l"></div> </div><div class="col-12 col-md-7">您可以自行檢查該目標網站是否依然正常維運，或者確認網址是否異動（例如未升級 `https` 安全協定等）。 點擊該項目進入「編輯」修正網址，或是確認網頁可正常開啟後，直接手動改勾選為「**啟用**」即可前台展示。 </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-l"></div> </div><div class="col-12 col-md-7"><div class="p-3 bg-light rounded border-start border-4 border-info">? 實用技巧二：純文字與範圍直接複製法 另外一種更直覺的批次新增方式，是在舊網站頁面上，直接用滑鼠反白全選您想搬移的所有連結文字區域，並直接進行複製（Ctrl+C）。 </div> </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-l"></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-l"></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-l"></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-l"></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-l"></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-l"></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-l"></div> </div><div class="col-12 col-md-7">如果您希望前台視覺更活潑，可以將區塊樣式改選用「**圖示顯示**」。 在進階欄位中設定好顯示總數量，並設定「**使用圖示顯示時，一行出現幾個**」（例如設定為一行 4 個，當有 8 個常用連結時，就會非常完美地自動排成兩行）。 </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-l"></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-l"></div> </div><div class="col-12 col-md-7">**? 圖示完美生成小撇步：** 想為每個外部連結配上精緻的 icon 封面嗎？請點入編輯該連結，點擊右側的「**擷取網站圖片**」按鈕，系統會自動嘗試抓取該網站的縮圖。 若是因為目標網站阻擋或各種原因無法自動擷取，亦可點擊「**上傳圖檔**」自行上傳客製化的精美小圖示。 </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-l"></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-l"></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-l"></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-l"></div> </div><div class="col-12 col-md-7">第三種可套用的區塊類型則是常見的「**跑馬燈區塊**」。 </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-l"></div> </div><div class="col-12 col-md-7">同樣地，**常用連結功能非常不推薦採用跑馬燈型態**。畢竟前台親師生瀏覽網站時，很少有耐性坐在電腦前等待特定連結慢慢滾動出來，建議還是優先選用圖示或頁面連結選單為佳！ </div> </div> </div> <div aria-hidden="true" class="modal fade" id="imgLModal1" 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="imgLModal2" 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="imgLModal3" 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="imgLModal4" 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="imgLModal5" 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="imgLModal6" 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="imgLModal7" 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="imgLModal8" 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="imgLModal9" 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="imgLModal10" 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="imgLModal11" 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="imgLModal12" 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="imgLModal13" 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="imgLModal14" 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="imgLModal15" 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="imgLModal16" 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="imgLModal17" 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="imgLModal18" 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="imgLModal19" 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="imgLModal20" 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="imgLModal21" 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="imgLModal22" 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="imgLModal23" 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="imgLModal24" 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安全憑證，瞬間提昇網站安全性
自動更新，不用擔心升級
支援客製模組、佈景，可自行安裝模組、佈景
每六小時備份一次，可追朔三天資料，資料不流失！並可提供備份報表下載。
享有比釋出版還要新的模組，第一步搶先使用新功能。
若遇到使用問題，亦可於第一時間排除
頁尾區域
3-9 檔案（等同 tad_uploader 檔案上傳模組）
