中文總教學 2:pxCode 編輯概念

2021/09/24閱讀時間約 3 分鐘
切版前 先決定最終「結構 + 適配」的答案,才開始切版。
對於前端工程師而言,一般在進行網頁開發或程式撰寫的時候,必須先透過潛意識去思考網頁的結構和適配行為,有了雛形的認知後,才會開始撰寫 HTML。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
這一篇文章裡,我們來一起看看 pxCode 基本編輯概念,讓我們在執行切版前,知道必須思考什麼事情?
-

【3種基本的群組分類】

在 pxCode,一共有三種基本群組分類。從上圖可見,由左上至下分別是【直的】(FlexGroup Column)、【橫的】(FlexGroup Row)、以及【絕對定位】(Normal Group)。
一般的設計稿上,都是以 CSS 程式碼去拼湊出整個網頁的結構。不過在 pxCode 裡,切版的概念是反過來的。也就是說,我們需要構想內容元件的佈局,再去編輯成一個完整的 HTML 程式碼
而只需要掌握這三種群組概念,基本上就可以排列相當多樣性的網頁內容。而當我們將設計稿導入 pxCode 之後,就可以開始思考左邊三種群組類別的 CSS 程式碼結構應該是什麼樣子,接著再透過切版工具,去完成響應式動作。
以 pxCode 的使用經驗來看,超過 95% 的網頁都是可以解決的。
-

【不同群組分類的 CSS 概念】

我們來總結一次 pxCode 的模型類別。左邊兩個,分別是直排與橫排的內容元件,即【FlexGroup Column】和【FlexGroup Row】,佔了一般網頁切版中的 80%。而【Group】的絕對定位關係發生的機率則佔了剩下的 20%。
我們這裡就來看看 CSS 的程式碼,可以怎麼去詮釋以上這三種群組類別。
-

【詳細的群組解釋】

除了直排與橫排,還有一個相當重要的群組類別。雖然這一部分之佔了平均 20%,不過卻也是相對比較難以理解的。
以下這張圖,我們可以看得出它相對值和橫,是以前和後的概念所組成。因此,我們在動手切版之前,必須思考清楚知道這幾個重疊的內容元件,應該怎麼前後排列。
其中,在【一般群組】(Group)裡面,也細分了三種內容狀態,分別是【主要子內容】(Main Child)、佔空間和群組內定位的【字內容】(Absolute)、以及不佔空間且自動定位的【附屬子內容】(Attach)。
這三種內容狀態,都有各自的特性和調整模式。為了達到一個最有效的響應式狀態,就需要掌握他們的特性,來執行更完整的思考切版。以下影片,將提供解說:
-
這樣一來,我們就可以更清楚知道這些內容元件在設計稿裡的位置,以方便我們進行導入設計稿之後的思考切版。
下一篇,就讓我們一起來認識如何透過【思考切版】,除了掌握設計稿的內容以外,也大幅度地加速切版時的概念和效率!
-
為什麼會看到廣告
pxCode Team
pxCode Team
pxCode 是一個響應式網頁(RWD)開發工具,並由台灣團隊創建的。致力於提供一個最快速、最簡單的平台,讓每個人輕鬆地將設計稿轉換成響應式網頁。
留言0
查看全部
發表第一個留言支持創作者!