vocus logo

方格子 vocus

中文總教學 1:pxCode 是什麼?

更新 發佈閱讀 3 分鐘
總的來說,pxCode 的目標,以及想要解決的問題就是切版。
raw-image

為什麼使用 pxCode?

1. 【優化生產力與溝通效率 Efficiency】

目前在市面上,並沒有什麼有效的切版工具,幾乎都必須經歷耗時的「手動切版」。這是非常煎熬、也消耗時間的,並且需要大量的溝通。pxCode 提供了有效的切版介面,讓我們可以在短時間內產出完善的響應式網頁(RWD)。

2. 【像素精準品質 不會跑版 Pixel Perfect】

pxCode 的誕生,幫助你的切版效率,提高生產力。我們甚至可以直接在編輯器上編輯 RWD、甚至預覽 RWD,提供多種快速完成切版的功能。因此可以說,在 pxCode 進行切版,就是可以達到精準的象素,且不會跑版。

3. 【產出易理解可維護的程式碼 Clean Code】

另外,pxCode 也堅持所生產出來的程式碼是清楚且可以維護的。我們也知道,AI(人工技術) 所生產的程式碼是並不是完全精確的,而且 RD(網頁開發師)接手之後也不能改,這對切版並沒有幫助。

因此為了達到產出可以維護使用的程式碼,我們提供簡單的方法讓使用者去自行編輯。

raw-image

【編輯流程簡介】

在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。

【切版概念】

一個 Figma 或 Sketch 設計稿原本是定稿的,而我們在 pxCode 裡就必須讓他變成彈性變化的狀態,也就是所謂的 RWD。因此,當產出的網頁在不同解析度的裝置上時,都可以讓內容進行配合,呈現一個舒服的網頁視覺狀態。

**其中,當我們將設計稿導入 pxCode 後,所有內容元件的結構都會自動被攤平。這個原因是,雖然設計稿在設計軟體裡已有本身的結構,不過為了產生最好的結構(HTML程式碼),我們決定讓使用者在 pxCode 進行一個結構整理,來達到最完好的程式碼狀態。


因此簡單而言,就是將【絕對定位的設計稿】轉化成【有結構且適配的網頁程式】。

-

【關注 pxCode】
FB:https://www.facebook.com/pxCode
Medium:https://medium.com/pxcode
官網:https://www.pxcode.io/




留言
avatar-img
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
你可能也想看
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
Thumbnail
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
Step1. 開啟範例練習檔,為文字圖層加上斜角浮雕效果,設定樣式:內斜角、技術:雕鑿硬邊、尺寸:43像素、光澤輪廓選擇如圖、亮部模式不透明:52%。 Step2. 新增圖層1,按住Ctrl、滑鼠點取文字圖層建立文字選取區,執行 [ 選取> 修改> 擴張]選取區擴張2像素,同樣在選取區內填入#8
Thumbnail
Step1. 開啟範例練習檔,為文字圖層加上斜角浮雕效果,設定樣式:內斜角、技術:雕鑿硬邊、尺寸:43像素、光澤輪廓選擇如圖、亮部模式不透明:52%。 Step2. 新增圖層1,按住Ctrl、滑鼠點取文字圖層建立文字選取區,執行 [ 選取> 修改> 擴張]選取區擴張2像素,同樣在選取區內填入#8
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
約莫是大二最後一個課題開始,拋棄了手上的工程筆,嘗試利用數位軟體輔助設計的進行,如今無倫是應付學業,實習工作,玩攝影畫插圖,都離不開電腦,製圖桌也就此被封印。
Thumbnail
約莫是大二最後一個課題開始,拋棄了手上的工程筆,嘗試利用數位軟體輔助設計的進行,如今無倫是應付學業,實習工作,玩攝影畫插圖,都離不開電腦,製圖桌也就此被封印。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News