要做RWD網頁切版——你知道,最重要的是結構(HTML)嗎?

2022/01/26閱讀時間約 1 分鐘
身為一個前端工程師&設計師,不管你屬於前者或後者,我們都相信,你一定都曾經尋找過更快速的方法,去將手中的設計稿,編輯成擁有多種程式碼的RWD響應式網站(Responsive Web Design)。
而這一篇文中,就將對此分享我們所設計的一個全新編輯工具——pxCode
透過Figma/Sketch將檔案直接輸出,並導入pxCode之後,pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手——(這句話是真的喔)
這篇文中,將會重點介紹網頁切版與編輯過程中,最重要的【結構】(Structure)。
如果你熟悉程式碼的操作,就會知道網頁的結構所對應的,就是HTML。在pxCode裡,和其他編輯工具的共同點就是,所有的編輯調整都建立在結構之上。所以要進入各種細節的調整,都必須先把結構(既HTML)的基礎打好。
.

➤ 從設計檔到RWD響應式網頁:Figma, Sketch 免費轉換成 HTML, CSS, React(不用寫程式)

這樣一來,網頁才能更活躍地,做出流動狀態!
以上這支教學影片,就特別全面地介紹了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
為什麼會看到廣告
pxCode Team
pxCode Team
pxCode 是一個響應式網頁(RWD)開發工具,並由台灣團隊創建的。致力於提供一個最快速、最簡單的平台,讓每個人輕鬆地將設計稿轉換成響應式網頁。
留言0
查看全部
發表第一個留言支持創作者!