歡迎參觀:尼爾網站設計工坊網站 跳到主要內容 網站導覽

會員登入

忘記密碼? 現在註冊!

流量統計

今天: 109
昨天: 508
本週: 617
本月: 13671
總計: 50045
平均: 283

網站QRcode

尼爾網站設計工坊-網站QRcode
關閉網站選單
:::

作品展示:桃園市大園國民中學-Xoops無障礙網站設計(包含手機介面)-網站設計

:::
作品項目
選擇後頁面內容會更新
桃園市大園區大園國民中學-PSD設計稿(電腦版)
桃園市大園國民中學-Xoops無障礙網站設計(包含手機介面)_1-點擊將開啟燈箱效果 桃園市大園國民中學-Xoops無障礙網站設計(包含手機介面)_2-點擊將開啟燈箱效果 桃園市大園國民中學-Xoops無障礙網站設計(包含手機介面)_3-點擊將開啟燈箱效果 桃園市大園國民中學-Xoops無障礙網站設計(包含手機介面)_4-點擊將開啟燈箱效果 桃園市大園國民中學-Xoops無障礙網站設計(包含手機介面)_5-點擊將開啟燈箱效果
  • 學校網站設計:桃園市大園國民中學-Xoops無障礙網站設計(包含手機介面)
    作品類型:展示作品 作品編號:PTN-0184

    桃園市大園區大園國民中學網站原建立於2024年3月,為符合教育部頒布113年各級校園WCAG 2.1 AA規範,於2025年10月委託尼爾網站設計工坊,進行既有網站之伺服器系統升級與模組、佈景全面優化作業並通過無障礙AA級審核作業。 

  • 作品項目:
    設計方案:
    Xoops網站設計E方案+手機介面設計
    CMS版本:
    Xoops2.5.11
    網站語言:
    • 繁體中文
:::

桃園市大園區大園國民中學於 2025 年 10 月委託尼爾網站設計工坊,進行既有網站之伺服器系統升級與模組、佈景全面優化作業。 本次升級除完成後端環境更新與系統穩定度強化外,亦同步針對網站結構與操作流程進行無障礙調整,最終順利通過數位發展部無障礙 AA 級審核,全面符合 WCAG 2.1 AA 標準與最新政府相關法規,打造所有族群皆能安心使用的友善校園網站環境。
本次升級與調整之詳細內容,請參閱右方(手機為下方)頁籤「更新紀錄」說明;以下則保留本案原始專案之開發說明內容,作為完整專案歷程紀錄。

2024年3月最新網站設計作品,由桃園市大園區大園國民中學委託Neil網站設計工坊進行本案的網站設計工作。

  • 使用程式:PHP8.1.25,jquery,javascript、Smarty3,AJAX
  • Xoops版本:Xoops2.5.11
  • MySQL 版本:10.4.32-MariaDB
  • 使用框架:html5+bootstrap3+自行撰寫css3樣式
  • 網站語系:繁體中文
  • 最佳瀏覽:Edge, 相容瀏覽器:Google、Firefox、Vivaldi、Opera
  • 瀏覽器最佳解析度:1440px兼容1024*768包含以上
  • 瀏覽相容:行動裝置/平板電腦/桌上型電腦
  • 網站具有隨USER電腦解析度自動等比例放大縮小功能。
  • SSL憑證申請建置(Certbot)憑證,網站SSL憑證安全協定為 TLS 1.3,通過 ssllabs.com A+級驗證。

※網站首頁採用佈景開發工法,管理員能調整首頁區塊順序,可以自行開啟或關閉模組區塊,區塊CSS樣式一體化產生不跑版,增加網站管理的自由靈活度,可自訂區塊ICON圖標等功能。  

  • 手機版專用介面開發,使用PSD手機版設計稿裁切製作,使用Neil多功能佈景框架做為網站底板架構。
  • 行動瀏覽採用的與YAHOO,FB及MOMO相同技術,以PHP判斷使用者瀏覽裝置後讀取對應佈景,非RWD框架採用WebApp技術,手機版內容配置可以跟電腦版不相同,但資料卻是使用相同後台管理,便於維護及兼顧設計美觀。
  • 手機版網站符合行動瀏覽並通過Google行動裝置相容測試。

網站設計工作內容

  • 全新客製化一欄式網站PSD模板設計( 電腦 and 手機)。
  • Xoops佈景設計/開發(電腦 and 手機),一欄式專用布局架構(上下橫列區塊)。
  • 私有雲伺服器主機lampp建置設定,Xoops網站建置,htaccess加入PHP.INI參數設定。
  • 建立Let's Encrypt免費SSL憑證,並建立自動更新腳本,無須手動更新。
  • 首頁區塊配置,JS動畫製作,JS播放器建置,浮動css三層雙樣式下拉選單按鈕建置隨捲軸對應滑動出現,區塊前後台AJAX應用,內容頁面編輯,收納式jQuery搜尋區塊製作。
  • 首頁區塊樣式採用JS視差設計,隨捲軸顯示區塊內容,底區塊CSS動畫製作。
  • 首頁區塊設計採佈景開發工法,管理員可自行調整區塊順序與新增區塊,可自訂區塊ICON圖標,更換模組區塊樣式(不破版不變形)。
  • Neil開發模組配置
    • 配置Neil網站設計工坊開發的neilofficebriefing班級處室簡介正式版,並做功能升級。
    • 配置Neil網站設計工坊開發的neilonlinevideo網路影音模組正式版,並做功能升級。
    • 配置Neil網站設計工坊開發的neilalbum電子相簿模組正式版,並做功能升級。
    • 配置Neil網站設計工坊開發的neilmfdcms多功能內容管理模組正式版,並做功能升級。
    • 配置Neil網站設計工坊開發的neilfilefolder檔案管理模組正式版,並做功能升級。
    • 配置Neil網站設計工坊開發的neilsignedup_a線上活動報名模組正式版,並做功能升級。
    • 配置Neil網站設計工坊開發的neilperiodical電子校刊模組正式版,並做功能升級。
    • 配置Neil網站設計工坊開發的neilcurriculum班級課表正式版,並做功能升級。
  • 災害示警區塊API橋接建置與CSS樣式設計。
  • 配置Neil網站設計工坊商用smtp郵件發信帳號一組。
  • 代客安裝Xoops2.5.11主程式及配置所需之Xoops模組,Xoops模組程式開發與樣版修改調整,PHP-smarty與AJAX及CSS3應用。
  • Neodw後台管理系統建置,admin能透過後台更新網站中JS播放器圖片,新增與刪除網站按鈕,設定跑馬燈及區塊選單管理等功能。
  • 支援手機、平板電腦與桌上型電腦瀏覽。,中英文版介面最適化開發。
  • 手機瀏覽介面開發製作,通過Google行動裝置瀏覽驗證工作。
  • Edge、Google、Firefox、Vivaldi、Opera瀏覽器兼容修正。
  • 網站SEO關鍵字優化,網址提交各大搜尋引擎。
  • 配置Neil表單防機器人垃圾留言2.0程式,新增自動清除caches功能,自動清理temp程式。

總計製作工時30天完成,網站目前正常運作中,歡迎大家前往參觀。

嶄新航空校園意象網站設計

2025年11月15日 桃園市大園區大園國民中學網站升級工作說明

伺服器建置-安全性強化
  • 於 Ubuntu 私有雲主機建置並部署 Apache 2.4.65 / PHP 8.3.26 / MySQL 8.0.4 / phpMyAdmin 等伺服器套件,作為新版網站正式運作環境。
  • 調整 Apache 設定,新增 Options -Indexes 限制,避免目錄瀏覽行為,以符合資安通報與校園資安規範。
  • 重新設定 SSL 憑證路徑與加密協議參數,確保 HTTPS 連線安全性並符合最新加密標準。
  • 執行 Ubuntu 與 Perl 套件安全性更新與漏洞修補,降低系統潛在風險。
  • 將 phpMyAdmin 管理介面調整為 404 隱藏存取方式,避免遭受自動化掃描與暴力登入測試。
模組部分-Neil 系列模組升級
  • 已將網站中所有 Neil 系列模組升級至目前穩定最新版,並完成相容性與功能測試,確保系統運作正常。
  • 新增配置 Neil_ISP v2.0 分散式爬蟲攻擊智慧防禦安全套件,可有效阻擋異常爬蟲與代理攻擊行為,降低伺服器 I/O 負載,提升網站穩定度與瀏覽效能。
  • 完成網站程式與資料表重新上傳與匯回作業,使網站於新伺服器環境中無縫接軌、無痛完成升級。
佈景部分-手動升級與無障礙調整
  • 使用符合無障礙 AA 規範之公版佈景 neilambilight 為底板,將學校原有網站之 CSS 樣式與 JavaScript 程式碼以手動方式移植並調整,使整體介面在符合無障礙規範下,維持原官網視覺風格與使用習慣不變。
  • 移除舊站中使用的 createjs 圖像動畫效果,改以 CSS 與 JavaScript 動態呈現方式實作,避免造成無障礙檢測與輔助科技使用上的障礙。
  • 新增「版面自動流動」功能(含 CSS 樣式調整):當使用者於電腦版使用 Ctrl 放大至 200% 時,版面可自動重排為單欄顯示,內容自動換行、不變形、不破版,且不產生橫向捲軸。
  • 新增文字大小調整功能(大/中/小),提升不同使用者閱讀與操作的便利性。
WCAG 2.1 無障礙 AA 審查作業
  • 協助整理並清洗既有網站內容(包含新聞、榮譽榜、相簿檔案等),補齊 ARIA 標籤並移除 Word 貼上格式,以符合 Freego 無障礙檢測工具之 AA 檢測標準。
  • 調整網站簡介頁面結構,將圖片中所包含之重要文字資訊,另行以可閱讀文字條列呈現,以符合無障礙「可感知」原則。
  • 完成 Freego 軟體檢測通過後,協助進行無障礙審查正式送件作業。
  • 協助向數位發展部申請無障礙 AA 級審查。
  • 針對審查回饋缺失項目進行改善,並協助完成複審程序。
  • 協助桃園市大園區大園國民中學正式取得數位發展部無障礙 AA 級標章。
:::
作品展示