2023年5月最新網站設計作品,由桃園市英語教學資源中心委託Neil網站設計工坊進行本案的網站設計及模組功能開發系統升級工作。
使用程式:PHP8.0.23,jquery,javascript、Smarty,AJAX
Xoops版本:Xoops2.5.11
MySQL 版本:10.4.25-MariaDB
使用框架:html5+bootstrap3+自行撰寫css3樣式
網站語系:繁體中文 / 英文
最佳瀏覽:Edge, 相容瀏覽器:Google、Firefox、Vivaldi、Opera
瀏覽器最佳解析度:1440px兼容1024*768包含以上
瀏覽相容:行動裝置/平板電腦/桌上型電腦
網站具有隨USER電腦解析度自動等比例放大縮小功能。
網站具有中英文切換功能,使用xlanguage模組進行語言轉換,管理者可透過語言標籤輸入中英文後,自動產生中英文組合標籤,複製貼上到內容即可。
※網站首頁採用佈景開發工法,管理員能調整首頁區塊順序,可以自行開啟或關閉模組區塊,區塊CSS樣式一體化產生不跑版,增加網站管理的自由靈活度,可自訂區塊ICON圖標等功能。
1. 手機版專用介面開發,使用PSD手機版設計稿裁切製作,使用Neil多功能佈景框架做為網站底板架構。
2. 行動瀏覽採用的與YAHOO,FB及MSN相同技術,以PHP判斷使用者瀏覽裝置後讀取對應佈景,非RWD框架採用WebApp技術,手機版內容配置可以跟電腦版不相同,但資料卻是使用相同後台管理,便於維護及兼顧設計美觀。
3. 手機版網站符合行動瀏覽並通過Google行動裝置相容測試。
桃園市英語教學資源中心:https://tycenglish.spps.tyc.edu.tw/
網站設計工作內容
1、全新客製化一欄式網站PSD模板設計( 電腦 and 手機)。
2、Xoops佈景設計/開發(電腦 and 手機),一欄式專用布局架構(上下橫列區塊),英文版另外撰寫css樣式表及樣板修改。
3、桃園市英語教學資源中心伺服器主機lampp建置設定,Xoops網站建置,htaccess加入PHP.INI參數設定。
4、桃園英資網升級項目
->升級XAMPP到最新版,匯出舊資料完成升級後再次匯入。
->替換網站模組,改為可支援xlanguage模組語言轉換的Neil系列模組,並做程式兼容開發
->Xoops系統升級為Xoops2.5.11
5、建立Let's Encrypt免費SSL憑證,並建立自動更新腳本,無須手動更新。
6、網站首頁開發成果展示頁籤功能,分為【國小成果】及【國中成果】兩區塊,每個區塊都有成果相簿,成果影音,成果檔案可頁籤切換內容
7、中英文版模組修改項目
->布景,全部Neil模組包括成果展示模組建立英文語言檔。
->英文版布景(電腦版及手機版)介面最適化開發,切換英文瀏覽時不會因寬度,高度導致版面破版或文字跑位的問題。
->完整測試全部Neil模組語言轉換功能,進行bug排除兼容開發工作。
->建立中英文內容,包含分類標題,簡介內容,操作教學,選單內容
->開發中英文標籤產生器,輸入中英文後自動產生中英文組合標籤,複製貼上到內容即可,全體模組表單部分引入標籤產生器。
8、使用neilmfdcms內容管理模組->faq功能建立【英資成果展示】模組使用操作說明(中英文版)
9、首頁區塊配置,JS動畫製作,JS播放器建置,浮動css三層雙樣式下拉選單按鈕建置隨捲軸對應滑動出現,區塊前後台AJAX應用,內容頁面編輯,收納式jQuery搜尋區塊製作。
10、首頁區塊樣式採用JS視差設計,隨捲軸顯示區塊內容,底區塊CSS動畫製作。
11、首頁區塊設計採佈景開發工法,管理員可自行調整區塊順序與新增區塊,可自訂區塊ICON圖標,更換模組區塊樣式(不破版不變形)。
12、配置Neil網站設計工坊開發的neilalbum電子相簿模組正式版,並做功能升級。
->增加可設定js鎖滑鼠右鍵功能
neilalbum電子相簿模組:->前往觀看
13、配置Neil網站設計工坊開發的neilmfdcms多功能內容管理模組正式版,並做功能升級。
neilmfdcms多功能內容管理模組:->前往觀看
14、配置Neil網站設計工坊開發的neilfilefolder檔案管理模組正式版,並做功能升級。
neilfilefolder檔案管理模組:->前往觀看
15、配置Neil網站設計工坊開發的neilenglishresults英資成果展示模組正式版,並做功能升級。
->模組結構升級為php8.0,底層架構優化升級,優化結構合併function,UI動線強化功能擴充開發
->增加國中/國小資料分流及動線UI介面開發工作
->成果檔案改為多檔上傳,可以批次管理上傳檔案(新增/刪除)
->成果相簿增加可設定js鎖滑鼠右鍵功能
->管理總表功能擴充,增加AJAX常輪詢功能,重構js優化效能。
->成果相簿,成果展示檔案上傳增加檔案格式驗證功能(前後台驗證)
neilenglishresults英資成果模組:->前往觀看
16、配置Neil網站設計工坊商用smtp郵件發信帳號一組。
17、代客安裝Xoops2.5.11主程式及配置所需之Xoops模組,Xoops模組程式開發與樣版修改調整,PHP-smarty與AJAX及CSS3應用。
18、Neodw後台管理系統建置,admin能透過後台更新網站中JS播放器圖片,新增與刪除網站按鈕,設定跑馬燈及區塊選單管理等功能。
19、支援手機、平板電腦與桌上型電腦瀏覽。,中英文版介面最適化開發。
20、手機瀏覽介面開發製作,通過Google行動裝置瀏覽驗證工作。
21、Edge、Google、Firefox、Vivaldi、Opera瀏覽器兼容修正。
22、網站SEO關鍵字優化,網址提交各大搜尋引擎。
23、配置Neil表單防機器人垃圾留言2.0程式,新增自動清除caches功能,自動清理temp程式。
總計製作工時120天完成,網站目前正常運作中,歡迎大家前往參觀。