要做RWD網頁切版——你知道，最重要的是結構（HTML）嗎？

身為一個前端工程師&設計師，不管你屬於前者或後者，我們都相信，你一定都曾經尋找過更快速的方法，去將手中的設計稿，編輯成擁有多種程式碼的RWD響應式網站（Responsive Web Design）。

而這一篇文中，就將對此分享我們所設計的一個全新編輯工具——pxCode。

透過Figma/Sketch將檔案直接輸出，並導入pxCode之後，pxCode就會提供許多獨創的視覺編輯方式，讓甚至沒有任何資訊或設計背景的用戶，都可以輕易上手——（這句話是真的喔）

這篇文中，將會重點介紹網頁切版與編輯過程中，最重要的【結構】（Structure）。

如果你熟悉程式碼的操作，就會知道網頁的結構所對應的，就是HTML。在pxCode裡，和其他編輯工具的共同點就是，所有的編輯調整都建立在結構之上。所以要進入各種細節的調整，都必須先把結構（既HTML）的基礎打好。

.

這樣一來，網頁才能更活躍地，做出流動狀態！

以上這支教學影片，就特別全面地介紹了pxCode的結構介紹。歡迎收看，並提出任何疑惑，我們都會為你解決 ;)

⏱ Timeline:

🔵 0:05 : 結構 Structure . 🔵 0:07 : 內容介紹 Main content & Attach content 🔵 1:04 : 思考切版 Decide the Layout Answer 🔵 1:19 : 簡化內容 Simplify 🔵 2: 01 : 處理附屬內容 Append 🔵 2: 38 : 結構主要內容 Layout 🔵 3: 18 : 移入附屬內容 Append Back

.

📲 歡迎任何問題與合作邀約： pxCode官方網站, Facebook, YouTube