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

37267
次閱讀
專題文章 網站架設時通常需要考慮到未來是否可以升級與更新，具有後台管理的網站系統是目前大部分公司採用的模式，可是後臺管理的網站在前端網頁設計部分，需要在最初架設網站時規畫好，管理時再針對個別的後台欄位進行資料上傳，這時候版面配置往往無法隨意更動，或是像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