專題文章模組化網頁設計系統CADCH CMS模組介紹

18748
次閱讀
專題文章 網站架設時通常需要考慮到未來是否可以升級與更新,具有後台管理的網站系統是目前大部分公司採用的模式,可是後臺管理的網站在前端網頁設計部分,需要在最初架設網站時規畫好,管理時再針對個別的後台欄位進行資料上傳,這時候版面配置往往無法隨意更動,或是像wordpress文章型後台可以隨意排版,但是完全空白的文章網頁後台等於自己在設計網頁,排版好一個網頁可能要花大半天的時間。
網站系統設計有一個大家都無法突破的問題,就是後台欄位限制越多,管理越快速,可變性卻會越差;欄位限制越少,可變性很大,管理起來卻非常花時間。
文網股份有限公司開發這套模組化網頁設計系統,名稱叫做cadch,開發目標以操作簡單、好管理、可變性大為基礎,並具有升級性強的優點,進階前端開發人員可以自行打造出許多動態效果,每種效果於資料庫中定義為一個選項,後台管理人員的工作就是:選效果、填內容,兩項工作,大大顛覆目前市面上所有開放原始碼系統以及網站租用平台。

模組化網頁設計系統CADCH CMS模組介紹

動畫中藍色排列的區塊叫【列】。【列】由上而下排列。

在我們使用的響應式框架中,【列】的高度為依據裡面所包覆的資料而有不同。

具有權限的管理員可以建立最多99列。

列示意圖
iPad

動畫中綠色排列的區塊叫【欄】。【欄】被包在【列】中,由左至右排列。

在我們使用的響應式框架中,採用12等份的方式配置【欄】的寬度。

動畫中第一列裡面一共有4欄,在我們的後台介面中每一欄的設定參數為【3/12】,【4*(3/12)=1】所以4欄就可以佔滿一列的寬度。

動畫中第二列裡面一共有3欄,在我們的後台介面中每一欄的設定參數為【4/12】,【3*(4/12)=1】所以3欄就可以佔滿一列的寬度。

動畫中第三列裡面一共有2欄,在我們的後台介面中每一欄的設定參數為【6/12】,【2*(6/12)=1】所以2欄就可以佔滿一列的寬度。

動畫中第四列裡面只有1欄,在我們的後台介面中該欄的設定參數為【12/12】,【1*(12/12)=1】所以1欄就可以佔滿一列的寬度。

我們也可以利用12分法,設定不同寬度比例的【欄】,下面示範不同比例的兩欄計算方式,左邊第一欄寬度為【4/12】,第二欄寬度為【8/12】:

123456789101112

寬度為4/12

寬度為8/12

欄示意圖
iPad

針對不同上網裝置設定【欄寬】

我們使用的響應式框架可以針對螢幕寬度不同,分別設定欄寬。

  • 預設螢幕寬度(手機版)
  • 768像素以上螢幕寬度(平板電腦直式或手機橫式)
  • 992像素以上螢幕寬度(平板電腦橫式)
  • 1200像素以上螢幕寬度(一般桌上型電腦)

段落內容

動畫中橘色排列的內容叫【段落內容】。【段落內容】的排列方式千變萬化,由【段落內容】所位於的【欄】控制要呈現的方式。

段落內容示意圖
iPad