Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DrupalCamp Taipei 2012迷人的有「型」網站 Harry
版型大哉問?                                                    體驗設計                  構                 架                訊    內容...
網站穿上美麗新衣的抉擇●    常見的設計流程模式    1. 從寫好的 HTML, CSS 套入 Drupal 。    2. 有計劃性的團隊協作。       1            VS              2
找現成的版型來用 ?●    很快樂馬上可以變裝●    有現成風格●    有 Starter, Functional 之類的版型    但是,    有些功能設定一大堆,設不出來就不行 ...    有些看起來沒樣式 ...    風格不符...
總之,我要像這樣 ...
你需要知道一些基礎知識●    資源    –   How the Drupal theme system works        http://drupal.org/theme-guide/6-7    –   學習如何製造網站 (HTML...
版型檔案組織
Vigor theme 誕生http://drupal.org/sandbox/Hipfox/1671832      ● Easy to modify architecture.      ● A little bit of simple d...
版型註冊 - 我在這裡vigor.info   ( 檔案位置 sites/themes/vigor/vigor.info)       name = Vigor       core = 7.x       engine = phptempla...
產生網頁    page.tpl.php                            ( 檔案位置 sites/themes/vigor/page.tpl.php)<body onload="window.defaultStatus=...
看起來像這樣
如何變成這樣 ?
穿衣服vigor.info             ( 檔案位置 sites/themes/vigor/vigor.info)                       ( 檔案位置 sites/themes/vigor/124.css)  ...
但,這網頁是釘死的                 需要注入活力●    在 .tpl.php 檔案中,加一些 php    –   <?php print $title; ?>    –   <?php print render($page[...
思考 ?●    版型可以竄改內容?●    切圖、套版,怎麼協作較好?●    同時進行網站建構和美術設計?●    不同單元,不同風格?●    你問我答 ...
Harry @ 網絡行動http://netivism.com.tw/
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
Upcoming SlideShare
Loading in …5
×

DrupalCamp Taipei 2012 迷人的有「型」網站

5,063 views

Published on

Published in: Technology, Design
  • Be the first to comment

DrupalCamp Taipei 2012 迷人的有「型」網站

  1. 1. DrupalCamp Taipei 2012迷人的有「型」網站 Harry
  2. 2. 版型大哉問? 體驗設計 構 架 訊 內容 資( 文字、聲音、影像 ) 人為因素 視覺設計 交互設計 網頁 標 準 瀏覽器 / 裝置 IE, Chrome, Firefox... Iphone, Android...
  3. 3. 網站穿上美麗新衣的抉擇● 常見的設計流程模式 1. 從寫好的 HTML, CSS 套入 Drupal 。 2. 有計劃性的團隊協作。 1 VS 2
  4. 4. 找現成的版型來用 ?● 很快樂馬上可以變裝● 有現成風格● 有 Starter, Functional 之類的版型 但是, 有些功能設定一大堆,設不出來就不行 ... 有些看起來沒樣式 ... 風格不符合所要 ?
  5. 5. 總之,我要像這樣 ...
  6. 6. 你需要知道一些基礎知識● 資源 – How the Drupal theme system works http://drupal.org/theme-guide/6-7 – 學習如何製造網站 (HTML, CSS, JavaScript) https://developer.mozilla.org/zh-TW/learn – PHP?
  7. 7. 版型檔案組織
  8. 8. Vigor theme 誕生http://drupal.org/sandbox/Hipfox/1671832 ● Easy to modify architecture. ● A little bit of simple design. ● Optional enabled Formalize. ● Theme Registry Rebuild. ● There is no complex functions.
  9. 9. 版型註冊 - 我在這裡vigor.info ( 檔案位置 sites/themes/vigor/vigor.info) name = Vigor core = 7.x engine = phptemplate 達成第一步,信不信可以開始用呢?
  10. 10. 產生網頁 page.tpl.php ( 檔案位置 sites/themes/vigor/page.tpl.php)<body onload="window.defaultStatus=css Zen Garden: The Beauty in CSS Design;" id="css-zen-garden"><div id="container"> <div id="intro"> ……… </div> <!-- These extra divs/spans may be used as catch-alls to add extra imagery. --> <!-- Add a background image to each and use width and height to control sizing, place with absolute positioning --> <div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div> <div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div></body>HTML Source code: http://www.csszengarden.com/zengarden-sample.html
  11. 11. 看起來像這樣
  12. 12. 如何變成這樣 ?
  13. 13. 穿衣服vigor.info ( 檔案位置 sites/themes/vigor/vigor.info) ( 檔案位置 sites/themes/vigor/124.css) name = Vigor core = 7.x engine = phptemplate stylesheets[all][] = 124.cssCSS source: http://www.csszengarden.com/?cssfile=124/124.css
  14. 14. 但,這網頁是釘死的 需要注入活力● 在 .tpl.php 檔案中,加一些 php – <?php print $title; ?> – <?php print render($page[content]); ?> – ……● 總之,利用 php 和內容管理系統銜接
  15. 15. 思考 ?● 版型可以竄改內容?● 切圖、套版,怎麼協作較好?● 同時進行網站建構和美術設計?● 不同單元,不同風格?● 你問我答 ...
  16. 16. Harry @ 網絡行動http://netivism.com.tw/

×