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

DrupalCamp Taipei 2012

迷人的有「型」網站

Harry

版型大哉問？
體驗設計

構
架
訊
內容資
( 文字、聲音、影像 ) 人為因素

視覺設計

交互設計
網頁
標準

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

網站穿上美麗新衣的抉擇
●
常見的設計流程模式
1. 從寫好的 HTML, CSS 套入 Drupal 。
2. 有計劃性的團隊協作。

1 VS 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?

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.

版型註冊 - 我在這裡

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

name = Vigor
core = 7.x
engine = phptemplate

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

產生網頁

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>



<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

穿衣服
vigor.info ( 檔案位置 sites/themes/vigor/vigor.info)
( 檔案位置 sites/themes/vigor/124.css)

name = Vigor
core = 7.x
engine = phptemplate

stylesheets[all][] = 124.css

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

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

●
在 .tpl.php 檔案中，加一些 php
– <?php print $title; ?>
– <?php print render($page['content']); ?>
– ……
●
總之，利用 php 和內容管理系統銜接

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

●
你問我答 ...

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

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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (19)

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

Similar a DrupalCamp Taipei 2012 迷人的有「型」網站 (20)

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