您在這裡

首頁 » Forums » 綜合討論 » Drupal 網站秀

Drupal 專案分享：Cirque

drakeguan's 的頭像
由 drakeguan 在 2007-09-22 (週六) 21:47 發表

幾個月前，使用 Drupal 替朋友架設了一個網站，這幾天寫了篇簡單的文章，和大家分享 :)

cirque.com.tw by Drupal
http://drakeguan.org/drupal_case_study_cirque.com.tw

Drupal 真是可以用在小到大型的網站設計，花樣還滿多的。

這個案例的內容以及功能上，雖然不是很豐富，極簡風有時卻是很難做的視覺表現。

整個看下來除了 Drake 分享的內容秘辛之外，我覺得有幾個地方怪怪的 (3 & 4 除外)：

  1. TinyMCE - 除了它的可視即得的好處之外，似乎用在此案的內容編輯，有些大材小用；站內的內容看不出應用的地方。或許，改用 bueditor 會比較精簡。
  2. News 版面設計 - 條列和內容這二個區塊，分得太開聚焦不易，有點鬆散，改了你的設計如後。
  3. Shop 到各大購物網的專區，也是通路的一環。
  4. image_cache 也是我的最愛。

:: 原設計 ::

原設計:: 修改後 ::

修改後

不曉得這樣的改法，你認為如何？

Hipfox 你實在太客氣了，我寫的東西，與其說是分享，倒比較像是「條列式的筆記」，沒有什麼深入的介紹 :) 就你說的四點，我的看法是

  1. 你說的似乎沒錯，TinyMCE 在這有點「殺雞焉用牛刀」貌，就看顧主（朋友）他用了後有什麼看法了。不過他完全不懂（也不打算懂） html，所以呢，也許 TinyMCE 還是有它的貢獻的 :)
  2. 你的設計感覺挺不賴的
  3. 這部分就看他想放什麼囉
  4. 我也真的很愛 imagecache，哈。

題外話，剛剛想到在使用 imagecache 時發生過一個問題。當上傳的圖的解析度很大時（忘了多大了，好像是 3k * 2k 的樣子），圖雖然上傳成功了，但 imagecache 卻無法生出相對應的 cache 來，我一開始以為是檔名的關係，而來才發覺是解析度的關係。不過在我看了 imagecache 的程式碼後，還是沒找出原因來 :p

討論的這麼熱烈，細看了一下整體的風格滿好的，而且CSS的實做上功力很強
總體而言已比我做的很多站棒很多了！

不過這兒有幾個關於親和力建議
1. 進內頁後（node/nid），導覽的區塊盡量在同側，以免混淆觀眾
2. 首頁的幾個圖片（news, aboutus...等），可以有連結，我看了會很想點但怎樣都沒辦法點

CSS上的小建議：
1. 內文的字顏色可以用#55555試看看？
2. 導覽列的line-height或是height好像有點問題？

--
from open mind to open source~

--
from open mind to open source~

1. 導覽區塊的位置這一點，對方很喜愛這樣的設計，我們聊了後，就決定繼續使用了 :)
2. 我也很想讓首頁的那些圖片可以有聯結，但不曉得有什麼比較好的作法，讓「block title 可以有聯結」這件事變得很很容調整。大家有什麼好方法，讓 Views 產生的 block 可以做到這件事咧?
3. 顏色改成 #555555 變得更柔合了，相當有意思。
4. 你說的有問題是指??

charlesc 提的這方法好呀，真的可行也 :o
不過某種程度上，還不夠完美

假設為來是 title 輸入 ooxx
產生的 html 就可能是

ooxx

....

現在把 title 改為 < a href="ooxx">ooxx< /a >
產生的 html 就可能是

ooxx

....

但其實比較簡單且好處理的情況是如下


ooxx
....

1. 一張圖來表示這整個 h1+a 的內容，而且在 browser 下看到長寬要夠，不會隨著 ... 所包的內容長短而有影響。
2. ... 包起來的文字不見。
3. 聯結是套用到整張圖上頭。

要做到上述三點要求，得讓 h1 與 a 的 display mode 都是 block，這樣就可以指定它們在 browser 下看到的大小，同時聯結的形式會「充斥」整個 block。至於怎麼讓包起來的文字不見，不應該使用 display: none; 或 visibility: hidden; 而是使用如下的方式

h1 {
position: absolute;
left: -9999px;
}

讓它移出 browser 可見範圍之外的一個作法 :) 這是我目前的作法啦，我印象中還有別的方法可以達到上述的三點要求，只是忘了 XD

至於誰包誰比較合乎 (x)html 的話，我就不曉得了也，有人要跳出來講解一下的嗎?

用空白來包&nbsp;，或是全形空白
然後設定寬度a的寬度，我記得ie和ff都可以針對A做padding的寬度
h1包a應該是比較正確的xhtml

--
from open mind to open source~

--
from open mind to open source~

應該說因應你的h1的圖是背景圖，以空白鍵來當下策
a有包文字也可以啊，a包img也可以
親和力來說，應該是要圖片加上alt

--
from open mind to open source~

--
from open mind to open source~