SlideShare a Scribd company logo

高雄前端社群 #4 psdtohtml workshop

高雄前端社群 #4 psdtohtml workshop

1 of 56
Download to read offline
PSDTOHTML WORKSHOP
講者:廖洧杰(三木)
高雄前端社群#4
社群創立緣起
在高雄
沒有管道交流..Orz
讓南部的網頁設計師
有一個交流的場所與
管道
2013/3 RWD課程
#1 -如何逐步提升CSS的可模組化
#2 - 現代化網頁基礎排版技術

Recommended

如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化洧杰 廖
 
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop洧杰 廖
 
Vertical rhythm
Vertical rhythmVertical rhythm
Vertical rhythm洧杰 廖
 
現代化網頁基礎排版技術
現代化網頁基礎排版技術現代化網頁基礎排版技術
現代化網頁基礎排版技術洧杰 廖
 
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例Kuro Hsu
 
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!洧杰 廖
 
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013Adam Wang
 

More Related Content

What's hot

CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享wantingj
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630Yeh Yung-Hsin
 
老成的Sass&Compass
老成的Sass&Compass老成的Sass&Compass
老成的Sass&Compass智遠 成
 
史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node jsFrank Cheung
 
付振华 前端开发环境优化
付振华 前端开发环境优化付振华 前端开发环境优化
付振华 前端开发环境优化czbad
 
Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)Jeff Chu
 
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)Adam Wang
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日twMVC
 
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計Marie Chang
 
老成之CreateJS與Flash
老成之CreateJS與Flash老成之CreateJS與Flash
老成之CreateJS與Flash智遠 成
 
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS綠茶 奶
 
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔Chih-cheng Wang
 
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析Chih-cheng Wang
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考greengnn
 
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 悠識學院
 
Muki word press
Muki word pressMuki word press
Muki word pressMuki Wu
 
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?如何運用Bootstrap 切版?
如何運用Bootstrap 切版?shiang huang
 
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門Yi-Feng Xie
 

What's hot (20)

CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630
 
老成的Sass&Compass
老成的Sass&Compass老成的Sass&Compass
老成的Sass&Compass
 
史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js
 
付振华 前端开发环境优化
付振华 前端开发环境优化付振华 前端开发环境优化
付振华 前端开发环境优化
 
Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)Asp.net on windows azure cloud service (updated)
Asp.net on windows azure cloud service (updated)
 
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
 
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
 
老成之CreateJS與Flash
老成之CreateJS與Flash老成之CreateJS與Flash
老成之CreateJS與Flash
 
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
 
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
 
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
 
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
 
CSS 分享 (5) Ending
CSS 分享 (5) EndingCSS 分享 (5) Ending
CSS 分享 (5) Ending
 
Muki word press
Muki word pressMuki word press
Muki word press
 
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
 
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
 

Viewers also liked

Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程洧杰 廖
 
一拳前端考題
一拳前端考題一拳前端考題
一拳前端考題洧杰 廖
 
響應式網頁實作坊
響應式網頁實作坊響應式網頁實作坊
響應式網頁實作坊Chih-cheng Wang
 
那些年網頁Ps切板的小事
那些年網頁Ps切板的小事那些年網頁Ps切板的小事
那些年網頁Ps切板的小事Aaron King
 
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]ilovejoomla
 
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃洧杰 廖
 
Back to the future: Isomorphic javascript applications
Back to the future:  Isomorphic javascript applicationsBack to the future:  Isomorphic javascript applications
Back to the future: Isomorphic javascript applicationsLuciano Colosio
 
Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了Adam Wang
 
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Tim (文昌)
 
Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Will Huang
 

Viewers also liked (10)

Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
 
一拳前端考題
一拳前端考題一拳前端考題
一拳前端考題
 
響應式網頁實作坊
響應式網頁實作坊響應式網頁實作坊
響應式網頁實作坊
 
那些年網頁Ps切板的小事
那些年網頁Ps切板的小事那些年網頁Ps切板的小事
那些年網頁Ps切板的小事
 
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
 
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
 
Back to the future: Isomorphic javascript applications
Back to the future:  Isomorphic javascript applicationsBack to the future:  Isomorphic javascript applications
Back to the future: Isomorphic javascript applications
 
Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了
 
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
 
Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)
 

Similar to 高雄前端社群 #4 psdtohtml workshop

[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗Drupal Taiwan
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)百範 陳
 
[DDD] 快快樂樂學DDD
[DDD] 快快樂樂學DDD[DDD] 快快樂樂學DDD
[DDD] 快快樂樂學DDDClark
 
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹Ying-Chun Cheng
 
當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德
當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德
當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德悠識學院
 
Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?
Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?
Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?Arden Wang
 
前端样式开发演变之路
前端样式开发演变之路前端样式开发演变之路
前端样式开发演变之路Zhao Lei
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪小 米猪
 
960Grid 实践
960Grid 实践960Grid 实践
960Grid 实践cloud chen
 
网页制作基础
网页制作基础网页制作基础
网页制作基础loo2k
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克jay li
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题 Lumend
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
OpenSCAD Workshop
OpenSCAD WorkshopOpenSCAD Workshop
OpenSCAD WorkshopJustin Lin
 
網頁三本柱之Html與css
網頁三本柱之Html與css網頁三本柱之Html與css
網頁三本柱之Html與cssAaron King
 
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architectureDdd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture國昭 張
 
DDD x Architecture
DDD x ArchitectureDDD x Architecture
DDD x ArchitectureClark
 
Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]Benny Chak
 

Similar to 高雄前端社群 #4 psdtohtml workshop (20)

[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
 
[DDD] 快快樂樂學DDD
[DDD] 快快樂樂學DDD[DDD] 快快樂樂學DDD
[DDD] 快快樂樂學DDD
 
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
 
Ria lqj
Ria lqjRia lqj
Ria lqj
 
當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德
當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德
當UCD碰上BCD時,該怎麼辦? by Arden Wang 王哲德
 
Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?
Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?
Axure RP 使用者經驗交流會議簡報:當 UCD 碰上 BCD 該怎麼辦?
 
前端样式开发演变之路
前端样式开发演变之路前端样式开发演变之路
前端样式开发演变之路
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 
960Grid 实践
960Grid 实践960Grid 实践
960Grid 实践
 
网页制作基础
网页制作基础网页制作基础
网页制作基础
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
日新培训
日新培训日新培训
日新培训
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
OpenSCAD Workshop
OpenSCAD WorkshopOpenSCAD Workshop
OpenSCAD Workshop
 
網頁三本柱之Html與css
網頁三本柱之Html與css網頁三本柱之Html與css
網頁三本柱之Html與css
 
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architectureDdd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture
 
DDD x Architecture
DDD x ArchitectureDDD x Architecture
DDD x Architecture
 
Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]
 

高雄前端社群 #4 psdtohtml workshop