這篇文中，將會重點介紹網pxCode裡，使用者介面的四大功能項目，分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas

學習

職場產業

最簡單的前端切版工具！——只要掌握這四個編輯功能，就可以輕鬆RWD

📢 完整的 pxCode 編輯介面介紹

透過這支影片，就可以了解 pxCode 裡清晰簡單的使用者介面。

pxCode 的使用者介面主要分成 #導覽列、#屬性、#工具列、#編輯區 四個項目。而這樣簡單清楚的分類，直接幫助了使用者可以清楚地進行編輯，達到更快速的切版作業。此外，導覽列的編輯，對應了 #HTML 的產出；而屬性的編輯，則影響了 #CSS 的結果。

透過直覺式，卻又具有邏輯性的編輯模式，不用花錢也不用寫程式，就讓你省下十倍之多的編輯時間。

👉 pxCode 到底怎麼辦到？

0:06  編輯介面
0:21  導覽列 Navigator
0:39  屬性 Inspector
0:47  排版類屬性 
1:01  樣式類屬性
1:16  工具列 Toolbar
2:13  編輯區 Editing Canva
2:54  總結

____________________

📲 有任何疑問，歡迎留言，也可以私訊我們！

pxCode: https://www.pxcode.io/​
Facebook: https://www.facebook.com/pxCode​
Medium: https://pxcode.medium.com/

最簡單的前端切版工具！【pxCode 教學 3-5】使用者介面：這四個編輯工具，你就可以完成 RWD

📢 從設計到響應式，全都自己來！

在這支影片，可以了解如何從 #Figma 或 #Sketch 的設計檔，透過 #pxCode 三大步驟的視覺化編輯，達到原本需要繁複程序才能完成的響應式網頁，並獲得 #HTML, #CSS, #React 的程式碼。

透過直覺式，卻又邏輯性的編輯模式，不用花錢也不用寫程式，就讓你省下十倍之多的編輯時間。

👉 到底怎麼辦到？
____________________

⏱ Timeline:

🔵  0:18 : pxCode 3 steps
============================
🔵  0:48 : a. Split to Sections 
🔵  0:57 : b. Analyze Group
🔵  1:12 :  b1. Suggestion
🔵  1:24 :  b2. Clean Up
🔵  1:45 :  b3. Boundary 
🔵  1:53 :  b4. Layout
🔵  2:28 : c. Smart Responsive
============================
🔵  2:59 : Preview 
🔵  3:12 : Export Code
🔵  3:22 : Recap 
 
____________________

📲 有任何疑問，歡迎留言，也可以私訊我們！

pxCode: https://www.pxcode.io/​
Facebook: https://www.facebook.com/pxCode​
Medium: https://pxcode.medium.com/

設計稿轉程式碼