點擊LOGO返回首頁-尼爾網站設計工坊

2026年3月最新網站設計作品，由「桃園市觀音區育仁國民小學」委託尼爾網站設計工坊進行本案之校園網站設計、無障礙網站建置與 Xoops 模組開發作業。本案以「教育網站 × 無障礙 AA × 客製化視覺設計」為核心方向，整合 Xoops 佈景設計、安全套件配置、內容頁創意編排與網站功能擴充，打造兼具校園特色、美感與實用性的現代化學校網站。
本次專案內容包含網站系統升級、模組功能開發、客製化佈景設計與網站內容視覺整合。簡介頁面導入 SeaArt 視覺輔助插圖設計，透過圖像化方式呈現校園氛圍與教育特色，不僅能有效降低人物肖像識別需求、避免肖像權爭議，也讓使用者能快速融入網站情境，提升整體閱讀沉浸感與資訊傳達效果。
整體網站視覺以「不規則幾何構圖」作為主軸，透過幾何切割與色塊流動強化校園活潑感與現代感，同時保留教育網站應有的穩定性與閱讀性。版型設計搭配尼爾自研發 aa-flow 無障礙流動技術，使網站在 100% 至 400% 放大倍率下，仍可於 8 段變體中維持版面流動、內容可讀與視覺平衡，兼顧設計感與 WCAG 2.1 AA 無障礙規範需求。
本案網站正式通過數位發展部無障礙 AA 級審核，符合最新 WCAG 2.1 AA 標準與政府法規，打造所有族群皆能順利操作與閱讀的友善校園網站環境。

技術規格與系統架構

• 使用程式：PHP 8.3.30、jQuery、JavaScript、Smarty3、AJAX
• Apache版本：2.4.66（Ubuntu）
• Xoops版本：Xoops 2.5.11
• MySQL版本：MySQL 8.0.45（嚴謹模式）
• 使用框架：HTML5 + Bootstrap 4.6 + 自行撰寫 CSS3 樣式
• 網站語系：繁體中文
• 最佳瀏覽：Edge
• 相容瀏覽器：Google Chrome、Firefox、Vivaldi、Opera
• 瀏覽器最佳解析度：1440px，相容 1024×768 以上解析度
• 瀏覽相容：行動裝置／平板電腦／桌上型電腦
• 網站具備隨 USER 電腦解析度自動等比例縮放功能，CTRL + 放大至 400% 時版面仍可自動流動（RWD）
• 佈景開發：客製化設計本案專用 neilyrestyc的Xoops 佈景，為專案唯一版本，不重複使用
• SSL 憑證申請建置（Certbot），網站 SSL 安全協定採用 TLS 1.3，並通過 ssllabs.com A+ 級驗證
• 網站提交 search.google、xsitemap，建立搜尋引擎索引與 SEO 關鍵字架構

無障礙與安全強化

• 網站符合無障礙 2.1 規範（WCAG 2.1），建置網頁導盲磚（:::）、網站導覽（Site Navigator）、鍵盤快速鍵（Access Key），使用鍵盤 Tab 可完整遍歷網站全部內容與操作功能。
• 網站正式通過數位發展部無障礙 2.1 AA 級審查，取得無障礙 AA 級標章。
• 配置尼爾網站設計自研發【分散式爬蟲攻擊智能防禦安全套件】Neil_ISP v2.1，可有效阻斷分散式爬蟲攻擊與異常代理連線（已完成壓力測試）。
• 手機版 Google PageSpeed 首頁無障礙檢測評分 100 分。

行動裝置AWD自適應設計

• 手機版專用介面開發，使用 PSD 手機版設計稿裁切製作，並以 Neil 多功能佈景框架作為網站底板架構。
• 行動瀏覽採用與 YAHOO、FB、MOMO 相同之 AWD（Adaptive Web Design）技術開發，由 PHP 判斷使用者裝置後讀取對應佈景。手機版內容配置可獨立於電腦版呈現，但資料共用相同後台管理機制，兼顧美觀性與維護效率。
• 手機版網站符合行動瀏覽規範，並通過 Google 行動裝置相容性測試。

• 全新客製化校園網站 PSD 視覺模板設計（電腦版／手機版），採左中式版型架構規劃，強化教育網站資訊層次與閱讀動線。
• Xoops 佈景客製化設計與開發（電腦版／手機版），採用 AWD（Adaptive Web Design）自適應網站技術開發，依裝置自動切換對應版型。
• 私有雲伺服器建置與設定，完成 Apache／PHP／MySQL／phpMyAdmin 環境部署、Xoops 網站建置與 php.ini 參數最佳化調整。
• 建立 Let's Encrypt 免費 SSL 憑證，並建置自動續期更新腳本，降低網站維運成本並提升 HTTPS 連線安全性。
• 配置尼爾網站設計自研發【分散式爬蟲攻擊智能防禦安全套件】Neil_ISP v2.1，可有效阻擋分散式爬蟲、惡意代理與異常連線攻擊，降低伺服器負載與網站資安風險。
• 首頁區塊與互動功能開發，包含：
  • 網站 LOGO CSS＋JavaScript 動畫製作
  • JS 輪播播放器建置
  • 浮動式 CSS 三層下拉選單
  • 左側滑動式選單系統
  • 前後台 AJAX 區塊應用
  • 收納式 jQuery 搜尋區塊設計
  • 內容頁面編輯與模組化配置
• 首頁區塊採用捲軸觸發式動畫設計，內容可隨捲動動態顯示，底部區塊搭配 CSS 動畫效果，並整合 SeaArt 視覺輔助插圖設計，提升整體網站設計一致性與沉浸式閱讀體驗。
• 首頁採用尼爾自研「佈景開發工法」，管理者可自行調整首頁區塊順序、新增區塊、自訂 ICON 圖示與切換模組區塊樣式，維持版面不變形、不跑版。
• 手動整理與編修網站內容頁面，補強圖片長文字說明、ARIA 標籤與 HTML 語意結構，以符合無障礙網站規範與 SEO 搜尋最佳化需求。
• 網站全面符合 WCAG 2.1 無障礙規範，建置：
  • 網頁導盲磚（:::）
  • 網站導覽（Site Navigator）
  • Access Key 鍵盤快速鍵
  • 完整 TAB 鍵遍歷操作流程
  • CTRL＋放大至 400% 時版面自動流動（RWD）功能
• 正式通過數位發展部無障礙 2.1（WCAG 2.1）AA 級審查，取得無障礙 AA 級標章。
• 尼爾網站設計自研 Neil 系列 Xoops 模組配置與功能升級：
  • 配置「班級處室簡介」模組正式版，並進行功能升級。
  • 配置「網路影音」模組正式版，並進行功能升級。
  • 配置「電子相簿」模組正式版，並進行功能升級。
  • 配置「多功能內容管理」模組正式版，並進行功能升級。
    • 新增內容附件拖曳排序功能。
  • 配置「檔案管理」模組正式版，並進行功能升級。
  • 配置「線上活動報名」模組正式版，並進行功能升級。
  • 配置「榮譽事項」模組正式版，並進行功能升級。
  • 配置「班級課表」模組正式版，並進行功能升級。
  • 配置「電子校刊」模組正式版，並進行功能升級。
• 災害示警區塊 API 串接建置與 CSS 樣式設計。
• 配置 Neil 網站設計工坊商用 SMTP 郵件發信帳號一組。
• 代客安裝 Xoops 2.5.11 主程式與相關 Xoops 模組，進行 PHP、Smarty、AJAX 與 CSS3 整合應用及樣板客製化調整。
• Neodw 後台管理系統建置，管理者可透過後台更新 JS 輪播圖片、增減網站按鈕、設定跑馬燈與管理首頁區塊選單。
• 網站支援手機、平板與桌上型電腦瀏覽，具備完整跨裝置相容性。
• 手機版介面獨立開發製作，並通過 Google 行動裝置相容性檢測。
• 完成 Edge、Google Chrome、Firefox、Vivaldi、Opera 等主流瀏覽器兼容性修正。
• 網站 SEO 關鍵字優化與搜尋引擎索引建置，完成網址提交與搜尋收錄設定。
• 配置 Neil 表單防機器人垃圾留言 2.0 程式，新增自動清除 caches 與 temp 暫存清理功能。
• 提供 .htaccess 惡意機器人與代理伺服器 IP 阻擋清單，並定期更新網站安全防護規則。
• 網站首頁完成無障礙功能優化設計，Google 行動裝置相容測試之無障礙功能評分達 100 分。

總計製作工時約 30 天（不含無障礙送審缺失改善時間），目前網站已正式上線並穩定運作中。

位於海濱地區的「桃園市觀音區育仁國民小學」，屬於典型偏鄉小校，校內教師人力有限，許多行政與校務工作皆需多職兼任，甚至連校長也需協助校園庶務工作。在如此有限的人力條件下，學校難以投入大量時間進行網站內容整理與視覺規劃，因此本次網站設計專案，從整體創意發想、版面配置、內容規劃到簡介文案與插圖整合，大多由尼爾網站設計工坊協助統籌與執行。
在網站架構規劃階段，尼爾重新檢視並整理舊站各節點內容，將原本零散且缺乏層次的資訊重新編排為具有邏輯性的「樹狀內容結構」，使網站資訊更容易被搜尋與檢索，同時提升使用者瀏覽流暢度與 UX 體驗，讓校園網站不再只是資訊堆疊，而是真正具備導覽性與閱讀性的教育網站。
由於學校缺乏完整的簡介文案與歷史資料整理時間，尼爾先透過 Gemini 協助蒐集與分析校園沿革、地理環境、辦學特色與歷年榮譽紀錄，再由 GPT 進行文案重組、語意延伸與頁面敘事編排，將原本僅有數行的簡短介紹，整理成內容完整且具有溫度的校園簡介頁面。
在視覺呈現方面，簡介頁面另導入 SeaArt 視覺輔助插圖設計，使文字內容能搭配符合校園特色的圖像氛圍，降低真實人物肖像辨識需求，也避免肖像權相關疑慮，讓網站內容更具沉浸感與閱讀吸引力。
至於學校願景頁面，校方原僅提供數張概念圖片，後續則由尼爾透過創意企劃與 GPT 協作，重新整理願景核心、延伸文字脈絡，並編排成一頁具備主題一致性、圖文呼應且符合校園風格的願景內容頁面，使抽象理念得以清楚呈現。
本次專案不只是單純的校園網站設計與模組開發，更實際協助偏鄉小校解決人力不足與內容整理困境。在專案過程中，尼爾網站設計工坊持續提供內容規劃、視覺建議與網站架構引導，降低學校行政端的勞動成本與時間壓力，讓學校能更專注於教育本質，而將繁瑣的網站建置與整合工作交由專業處理。
這也是尼爾網站設計一路以來始終堅持的核心理念：「替客戶解決問題，讓原本繁瑣交錯的絲線，重新整理成清晰而有秩序的模樣。」

本案「桃園市觀音區育仁國民小學」網站設計，整體視覺以「自然、人文、海濱校園」為核心概念，融合觀音區在地意象與校園教育精神，打造兼具溫暖感與生命力的校園網站風格。版型採用左中式佈局設計，透過清晰的資訊層次與柔和色彩配置，使網站在資訊量較多的情況下，仍能維持舒適且易閱讀的視覺節奏。
整體配色以天空藍、草地綠與蓮葉綠為主軸，呼應育仁國小位於觀音海濱地區的自然環境，並透過大面積留白與曲線線條，營造如海風吹拂般的輕盈感。首頁上方主視覺以「松樹」作為核心設計語彙，蓮花則作為點綴陪襯，突顯校園松樹與觀音地區蓮花的地方特色，使整體畫面更具在地辨識度與文化意象。
網站背景與裝飾元素加入自然植物、松樹、白鷺鷥與柔性幾何線條等視覺元素，象徵校園中的成長、純淨與生命力，也呼應學校「感恩、創意、科技、人文、活力」五大教育願景。頁尾則以五大願景圖像搭配動畫方式呈現，使整體網站在穩定中保有活潑感，增加校園品牌特色與記憶點。
內容區塊設計則以高辨識色塊搭配圓角卡片呈現，透過綠、藍、粉、紅等區塊色彩進行資訊分類，使使用者能快速辨識不同功能與資訊類型。整體風格融合「自然系校園美感 × 現代教育網站 × 親和感介面設計」，打造出兼具教育氣息、地方文化與數位現代感的校園官方網站。