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

閱讀時間約 1 分鐘
身為一個前端工程師&設計師,不管你屬於前者或後者,我們都相信,你一定都曾經尋找過更快速的方法,去將手中的設計稿,編輯成擁有多種程式碼的RWD響應式網站(Responsive Web Design)。
而這一篇文中,就將對此分享我們所設計的一個全新編輯工具——pxCode
透過Figma/Sketch將檔案直接輸出,並導入pxCode之後,pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手——(這句話是真的喔)
然而,我們都知道,要在最有效率的時間下完成切版,有兩個方式:
一、技術強大
二、掌握工具
而pxCode作為一個致力於提供最快速切版方法的工具,裡頭也設計了最有效率的功能介面。因此只要在掌握了pxCode所設計的功能,基本上就可以很大幅度地提升切版速度。
在這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
.

➤ pxCode 使用者介面:只要個編輯工具,你就可以完成 RWD

如此一來,掌握了功能細項,不只是讓你免去寫程式的困擾,還用視覺編輯的方式,讓你比其他人快個10倍!
歡迎收看以上這支教學影片,並提出任何疑惑,我們都會為你解決。 ;)
⏱ Timeline:
🔵 0:06:編輯介面
.
🔵 0:21:導覽列 Navigator
🔵 0:39:屬性 Inspector
🔵 0:47:排版類屬性
🔵 1:01:樣式類屬性
🔵 1:16:工具列 Toolbar
🔵 2:13:編輯區 Editing Canvas
.
🔵 2:54:總結
.
📲 歡迎任何問題與合作邀約: pxCode官方網站, Facebook, YouTube
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
留言0
查看全部
發表第一個留言支持創作者!
pxCode Team的沙龍 的其他內容
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
才能也可以叫天賦 它不是技能, 它是某種平常你會自動自發的行為。 你會覺得「這個很簡單,每個人都會,沒什麼。」 就像我認識的一些語言能力很好的女生,她覺得會講多種語言是件很容易。她說:「這不是有嘴就會了嗎。」 天賦也可能會用缺點的方式展現出來。 或像我在工作時,我就會自動自發
這陣子在網路上看到一句話 當一個人在追求什麼的時候,更需要去覺察背後的動機來自何處。 現在身處的世界混亂,讓我們時刻都感受到很多不是很舒服的狀態 工作環境的壓力、家庭氛圍的緊繃、人際關係的競爭 生活要面臨的挑戰太多了,也消耗不少精神狀態 這種不舒服的感覺也讓人說不上到底哪裡不對勁 去
上週六傍晚,還在工作著。 下課後,發現有訊息。 她拍兩張照片給我,說 量不到脈博。 那照片,就像是以前在警局偵查隊相機會出現的畫面,有血跡,然後人躺在地上。 後來,聽說,送到醫院急救,醫生叮嚀 當晚一定要轉到加護病房。 過程中,其實,我不知道真實的狀況是什麼。 傍晚四點多一直到晚
Thumbnail
邀請日本人一起合照,卻不知道怎麼開口說出來嗎?看完這篇,馬上能現學現賣。
Thumbnail
我的公轉365 @ 冬|小寒|2023 傍晚,在回新竹的國道上,遇見了2023第一個滿月。 滿月每個月都會有,看到,有什麼了不起呢? 我也說不出個所以然來,但是只要抬頭看天空,不管看到的是白天的雲,還是晚上的月亮、星星,總能立即、馬上、瞬間與宇宙產生連結,是我覺得最容易進行的「自然觀察」,永遠永遠
Thumbnail
只要那人此刻的對講機是朝著內在單向投放,外在的聲音應該暫時都進不來。洗刷、沐浴、清潔時,所有的溝通都流往內裡,另一片探不見底的汪洋。
Thumbnail
只要你有接觸一點網路行銷相關的東西非常可能都聽過「內容行銷」這個詞,大家都要做內容行銷,內容行銷講到爛掉,阿到底是什麼要怎麼做? 什麼是內容行銷? 簡單來說就是你產出內容,內容就是對於你的潛在學生有價值的東西。例如我是英文老師,我的學生是想學好英文的人,如果我寫一篇文章叫10個輕鬆學好英文的方法,對
在星欣大學時因為住在宿舍,三餐只能外食,因此買了悶燒罐,可以做一些簡單的料理,今天就跟大家分享如何用悶燒罐煮水煮蛋!
Thumbnail
不跑,走也可以~ 我曾參加過2015年富邦馬拉松的的10公里組,之後因為上班路上小跑步左踝骨折後,就沒有再挑戰任何跑步運動。 記得第一次早起參加路跑,緊張的不敢停下來,怕停下來就再也跑不動。70分鐘的慢慢跑,衝過終點後從跑到走的
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
才能也可以叫天賦 它不是技能, 它是某種平常你會自動自發的行為。 你會覺得「這個很簡單,每個人都會,沒什麼。」 就像我認識的一些語言能力很好的女生,她覺得會講多種語言是件很容易。她說:「這不是有嘴就會了嗎。」 天賦也可能會用缺點的方式展現出來。 或像我在工作時,我就會自動自發
這陣子在網路上看到一句話 當一個人在追求什麼的時候,更需要去覺察背後的動機來自何處。 現在身處的世界混亂,讓我們時刻都感受到很多不是很舒服的狀態 工作環境的壓力、家庭氛圍的緊繃、人際關係的競爭 生活要面臨的挑戰太多了,也消耗不少精神狀態 這種不舒服的感覺也讓人說不上到底哪裡不對勁 去
上週六傍晚,還在工作著。 下課後,發現有訊息。 她拍兩張照片給我,說 量不到脈博。 那照片,就像是以前在警局偵查隊相機會出現的畫面,有血跡,然後人躺在地上。 後來,聽說,送到醫院急救,醫生叮嚀 當晚一定要轉到加護病房。 過程中,其實,我不知道真實的狀況是什麼。 傍晚四點多一直到晚
Thumbnail
邀請日本人一起合照,卻不知道怎麼開口說出來嗎?看完這篇,馬上能現學現賣。
Thumbnail
我的公轉365 @ 冬|小寒|2023 傍晚,在回新竹的國道上,遇見了2023第一個滿月。 滿月每個月都會有,看到,有什麼了不起呢? 我也說不出個所以然來,但是只要抬頭看天空,不管看到的是白天的雲,還是晚上的月亮、星星,總能立即、馬上、瞬間與宇宙產生連結,是我覺得最容易進行的「自然觀察」,永遠永遠
Thumbnail
只要那人此刻的對講機是朝著內在單向投放,外在的聲音應該暫時都進不來。洗刷、沐浴、清潔時,所有的溝通都流往內裡,另一片探不見底的汪洋。
Thumbnail
只要你有接觸一點網路行銷相關的東西非常可能都聽過「內容行銷」這個詞,大家都要做內容行銷,內容行銷講到爛掉,阿到底是什麼要怎麼做? 什麼是內容行銷? 簡單來說就是你產出內容,內容就是對於你的潛在學生有價值的東西。例如我是英文老師,我的學生是想學好英文的人,如果我寫一篇文章叫10個輕鬆學好英文的方法,對
在星欣大學時因為住在宿舍,三餐只能外食,因此買了悶燒罐,可以做一些簡單的料理,今天就跟大家分享如何用悶燒罐煮水煮蛋!
Thumbnail
不跑,走也可以~ 我曾參加過2015年富邦馬拉松的的10公里組,之後因為上班路上小跑步左踝骨折後,就沒有再挑戰任何跑步運動。 記得第一次早起參加路跑,緊張的不敢停下來,怕停下來就再也跑不動。70分鐘的慢慢跑,衝過終點後從跑到走的