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

2025年11月最新網站設計作品，由桃園市立富岡國民中學委託尼爾網站設計工坊進行本案的網站設計與模組開發工作，內容包含「Neil獎學金申請模組開發」、「tad_users 批次會員匯入功能優化與資料匯入」、以及「改寫 Xoops 會員機制並加入初次登入強制變更密碼流程」。透過上述功能開發，讓學校承辦人員能更順暢地完成獎學金名冊提交作業，大幅提升行政效率。同時經由 UX/UI 優化，使資料操作動線更加明確不混亂。網站已通過數位部無障礙 AA 審核，全面符合 WCAG 2.1 AA 標準與最新政府法規，提供全體使用者友善、安全且易操作的網站環境。

• 使用程式：PHP8.3.26，jquery，javascript、Smarty3，AJAX
• Apache版本：2.4.65
• Xoops版本：Xoops2.5.11
• MySQL 版本：Mysql8.0.4
• 使用框架：html5+bootstrap4.6+自行撰寫css樣式
• 網站語系：繁體中文
• 最佳瀏覽：Edge，相容瀏覽器：Google、Firefox、Vivaldi、Opera
• 瀏覽器最佳解析度：1440px 兼容 1024×768 以上
• 瀏覽相容：行動裝置 / 平板電腦 / 桌上型電腦
• 網站具有隨 USER 電腦解析度自動等比例放大縮小功能，CTRL+放大 200% 版面會自動流動 (RWD)。
• SSL 憑證建置（Certbot），網站 SSL 安全協定為 TLS 1.3，通過 ssllabs.com A+ 級驗證。
• 網站提交 search.google、提交 xsitemap，建立搜尋關鍵字。

※網站符合無障礙 2.1 規範 (WCAG 2.1)，建置網頁導盲磚 (:::)、網站導覽 (Site Navigator)、鍵盤快速鍵 (Access Key)，使用鍵盤 Tab 能夠完整操作網站內容與功能。

※網站提交 search.google、提交 xsitemap，完整建立搜尋索引。

※通過數位發展部無障礙 2.1 審查 (WCAG 2.1)，網站獲得無障礙 AA 級標章。

※配置尼爾網站設計自研發【分散式爬蟲攻擊智能防禦安全套件】Neil_ISP v2.0，可有效阻斷分散式爬蟲與惡意代理攻擊。

※完成「Neil獎學金申請模組開發」、「tad_users 批次會員匯入功能調整與資料匯入」、以及「改寫 Xoops 會員機制並加入初次登入強制變更密碼流程」等核心開發任務。

※手機版 Google PageSpeed 首頁無障礙檢測評分 100 分。

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

桃園市獎學金申請系統網站設計專案工作說明

• 全新客製化左中布局網站 PSD 模板設計（電腦版與手機版）。
• Xoops 佈景設計與前後台開發（電腦版與手機版）。
• 私有雲伺服器建置：Apache / PHP / MySQL / phpMyAdmin 安裝設定，Xoops 主程式部署與 php.ini 參數調整。
• 建立 Let's Encrypt 免費 SSL 憑證並配置自動更新腳本，無需人工手動續期。
• 配置尼爾網站設計自研發【分散式爬蟲攻擊智能防禦安全套件】Neil_ISP v2.0，可有效阻擋分散式爬蟲攻擊行為。
• 首頁區塊配置：網站 LOGO 以 CSS＋JS 客製動態效果呈現，建置 JS 播放器、CSS 三層式下拉選單隨捲軸浮動顯示、左側三層滑動選單、前後台 AJAX 區塊應用、內容頁排版調整，以及可收納式 jQuery 搜尋區塊。
• 首頁區塊樣式採用 JS 視差效果，隨捲軸觸發顯示內容，底部區塊搭配 CSS 動畫提升視覺動態性。
• 首頁採佈景開發工法，管理員可自由調整區塊順序、增減區塊內容、自訂 ICON 圖示，並能切換各模組區塊樣式（不變形、不跑版）。
• 手動修訂網站 FAQ 內容以符合無障礙規範（補強圖片長敘述文字、ARIA 標籤、語意化 HTML 結構等項目）。
• 網站符合無障礙 2.1（WCAG 2.1）規範，包含導盲磚 (:::)、網站導覽（Site Navigator）、鍵盤快速鍵（Access Key），整站 TAB 可遍歷所有內容，並支援 CTRL＋放大 200% 自動流動排版（RWD）。
• 通過數位發展部無障礙 2.1 檢測（WCAG 2.1），獲得無障礙 AA 級標章。
• Neil 開發模組配置：
  • 配置尼爾網站設計工坊開發的 neilmfdcms 多功能內容管理模組正式版，並進行相關功能優化。
• Tad 模組二次開發與批次會員資料匯入：
  • 安裝 tad_users 大量會員管理模組。
  • 依本案需求調整 tad_users 匯入欄位名稱與資料型態。
  • 批次匯入全國（國小／國中／高中／專科／大學／研究所）學校帳號約一千多筆。
  • 匯入帳號自動加入指定群組，做為後續操作權限依據。
• 改寫 Xoops 會員機制並加入初次登入強制變更密碼流程：
  • 會員首次登入時必須變更密碼。
  • 完成密碼變更後，系統自動將會員狀態切換為「啟用」。
  • 未完成變更密碼的會員將無任何操作權限並維持未啟用狀態。
• Neil 獎學金申請模組客製化開發：
  • 依專案需求全新開發獎學金申請模組。
  • 承辦老師可上傳申請學生的獎學金清冊。
  • 管理員可於後台下載全部或個別清冊資料。
  • 模組以「專案／年度」劃分資料來源，可同時多年度併行使用，並支援會員初始化機制供年度交接使用。
• 災害示警區塊 API 串接建置與 CSS 樣式設計。
• 配置 Neil 商用 SMTP 郵件發信帳號一組。
• 代客安裝 Xoops2.5.11 主程式、套件配置、模組開發、樣版調整、PHP-Smarty 與 AJAX 整合應用。
• Neodw 後台管理系統建置：管理員可更新 JS 播放器圖片、增刪網站按鈕、設定跑馬燈、管理區塊選單等功能。
• 支援手機、平板與桌上型電腦瀏覽。
• 手機瀏覽介面開發完成並通過 Google 行動裝置相容性檢測。
• 調整相容性以支援 Edge、Google Chrome、Firefox、Vivaldi、Opera 等瀏覽器。
• 網站 SEO 關鍵字優化，並提交至各大搜尋引擎建立索引。
• 配置 Neil 表單防機器人垃圾留言 2.0 程式，新增自動清除 caches 功能與 temp 清理程序。
• 網站首頁無障礙功能完成設計，Google 行動裝置相容測試無障礙評分 100 分。

總計製作工時 30 天（不含無障礙送審與缺失改善時間）。目前網站運作正常，歡迎大家前往參觀。

「桃園市獎學金申請系統」以溫暖、親切且易於親近的視覺風格為核心設計方向，整體色彩採用柔和的粉橘、校園藍與中性色調，營造出兼具教育氣息與現代質感的友善介面。首頁的大幅插畫以畢業典禮為主題，結合動漫風格呈現學生獲獎的喜悅與努力成果，象徵著「以獎學金鼓勵學習、支持每一位孩子的未來」的核心精神。
版面以左側主功能選單搭配中央內容展示區構成，視覺層次清楚，使用者能迅速掌握網站的操作重點。按鈕、圖示與消息列表皆採高識別度設計，讓畫面在資訊密集的情況下仍保持整齊、輕鬆與不壓迫。首頁的最新消息區塊、外部連結區、災害警示與統計資訊則透過柔化框線與一致色系呈現，整體視覺語彙一致且具穩定性。
整體風格結合「教育感 × 公務系統的信任感 × 現代校園的輕盈氛圍」，打造出一個讓師生、家長與承辦人都能直覺使用、視覺友善且具親和力的獎學金服務入口網站。