web網頁設計工具

此專案系統提供網頁開發的圖形化設計介面，以視覺化的圖像操作取代程式碼編寫，簡化設計網頁的工作流程，本系統為設計師及工程師封裝了網頁設計的相關基本操作功能，提供簡單、直覺、彈性的圖形操作介面，讓使用者能夠快速上手，並且無需自己編寫程式也能利用視覺化操作快速地設計出網頁應用。

專題老師 : 郭家旭 教授      專題學生 : 廖儒均、梁家銘、黃崇哲

動機

在繪製圖片的時候，探討的是用色、技法；在設計投影片的時候，決定的是配色、排版；而製作網頁的時候，則是以理性的程式碼去構造感性的美術編排，這個矛盾的想法便成為了專案動機。

目的

開發一個簡單、視覺、直覺且彈性的系統，提供網頁開發的圖形化設計介面，以視覺化的圖像操作取代程式碼編寫，簡化設計網頁的工作流程。

功能

本系統提供視覺化的圖像操作，像是可以透過滑鼠拖拉的方式編輯物件外觀；鼠標連續點擊搭配浮動視窗編輯物件屬性；快捷鍵配合滑鼠進行動態事件綁定。

視覺化的圖像操作經過上層的解析後送至中層運算結果並儲存，下層負責將網頁物件編譯至各個檔案中並輸出程式碼。這樣設計的好處是層與層之間不互相依賴，可以根據不同的使用介面(Web、APP) 與框架配置（React、Vue) 去實作。

系統採用邊緣運算架構設計，將系統邏輯運算集中於客戶端，考量平台的通用性選擇以瀏覽器為載體開發系統。採用能輕鬆編寫程式(JSX 語法）的前端框架 React；簡潔輕快的測試框架 Jest； 更有規範的 TypeScript。

希望在系統中加入協助使用者開發的輔助功能，包含自動調節版面符合 RWD；將編譯的程式碼更貼近使用者的撰寫偏好且檔案拆分明確，以利後續維護；提升反編譯的效率與精確度，進而提供程式碼重構的功能；在不同的框架與使用介面之間切換自如。提高系統自動化測試覆蓋率，以利開發維運。