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

DrupalCamp Taipei 2012

迷人的有「型」網站

Harry

內容( 文字、聲音、影像 )

資訊架構

視覺設計

人為因素

瀏覽器 /裝置IE, Chrome, Firefox...

Iphone, Android...

網頁標準

交互設計

版型大哉問？體驗設計

網站穿上美麗新衣的抉擇

● 常見的設計流程模式1.從寫好的 HTML, CSS 套入 Drupal 。

2.有計劃性的團隊協作。

VS1 2

找現成的版型來用 ?

● 很快樂馬上可以變裝● 有現成風格● 有 Starter, Functional 之類的版型

但是，有些功能設定一大堆，設不出來就不行 ...有些看起來沒樣式 ...風格不符合所要 ?

總之，我要像這樣 ...

你需要知道一些基礎知識

● 資源– How the Drupal theme system works

http://drupal.org/theme-guide/6-7

– 學習如何製造網站 (HTML, CSS, JavaScript)https://developer.mozilla.org/zh-TW/learn

– PHP?

http://drupal.org/theme-guide/6-7

https://developer.mozilla.org/zh-TW/learn

版型檔案組織

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.

版型註冊 - 我在這裡

name = Vigorcore = 7.xengine = phptemplate

vigor.info ( 檔案位置 sites/themes/vigor/vigor.info)

達成第一步，信不信可以開始用呢？

產生網頁

<body onload="window.defaultStatus='css Zen Garden: The Beauty in CSS Design';" id="css-zen-garden">

<div id="container"> <div id="intro"> … … … </div>

  <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>

page.tpl.php ( 檔案位置 sites/themes/vigor/page.tpl.php)

HTML Source code: http://www.csszengarden.com/zengarden-sample.html

看起來像這樣

如何變成這樣 ?

穿衣服

name = Vigorcore = 7.xengine = phptemplate

stylesheets[all][] = 124.css

vigor.info ( 檔案位置 sites/themes/vigor/vigor.info)

CSS source: http://www.csszengarden.com/?cssfile=124/124.css

( 檔案位置 sites/themes/vigor/124.css)

但，這網頁是釘死的需要注入活力

● 在 .tpl.php 檔案中，加一些 php– <?php print $title; ?>

– <?php print render($page['content']); ?>

– … …

● 總之，利用 php 和內容管理系統銜接

思考 ?

● 版型可以竄改內容？● 切圖、套版，怎麼協作較好？● 同時進行網站建構和美術設計？● 不同單元，不同風格？

● 你問我答 ...

Harry @ 網絡行動http://netivism.com.tw/

Technology

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