您在這裡

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 就可能是

....

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

....

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~