過敏的孩子們看過來囉…..宏醫生技銀行-健康購物網設計
不是說今年冬天暖冬嗎?怎麼冷氣團、寒流一直猛來，尤其又夾帶下雨真是冷的要命，天氣變化這麼大，過敏的人可就要瘋掉了，不是猛打噴嚏就是皮膚癢到不行……
台灣的過敏人口越來越多，所以再生物科技這塊在台灣也越來越熱門，這次客戶宏醫國際集團成立於1993年，至今已超過16年，致力於專研健康醫學生物科技領域，提升免疫相關醫學、抗病毒醫學、抗過敏預防醫學、抗敏防蟎寢具、生醫美容保養、降低控制環境病毒感染醫學…等
這次執行的是宏醫生技銀行-健康購物網的網頁設計，當初提案有分為兩個方向，專業穩重與清新舒適這兩個方向，客戶選擇的是目前所PO上來的清新舒適這款，這網站還包含了購物車功能，所以結合了另外兩位人士的力量才能完成，因為是購物網的關係除了在視覺美感之外在功能上的考量就格外重要，不僅要讓消費者使用清楚簡單，也需要在後台的部分讓客戶以後可以自行更新產品與資訊，所以這都仰賴不鳥町(網頁設計師)的功力囉！
整個網站的製作比起平面的設計物，更需要與客戶更詳細的溝通與討論，在資料的取得也更需要較長的時間，這網站算是corAusir功能比較多的成品。以下就是請網頁師不鳥町的專業解說囉。
不鳥町:
宏醫是我第一個使用CSS+JOOMLA平台切版的專案。
因為是第一次接觸的關係，花了好大的力氣調整，但也帶給我很多的經驗，對CSS有更深層的體會。
特別需要注意的地方是，它的背景是呈不規則型的，又加上廣告區的背景與BANNER是連接在一起的，就必須要在CSS的layout下z-index，而且還要搭配不同瀏覽器的間距以及位置，尤其是碰IE6、IE7、IE8、Firefox、Google Chrome的時候，還要分別下不同的指令。
因為我自己也是剛接觸CSS沒有多久，而宏醫這個專案，也幾乎等於完全客製化的專案，每一個內容都有它自己專屬的背景，寫CSS的網站，所需要花的精神、時間，通常是一般HTML(表格製作的網頁)的二倍。
邏輯不僅要清楚，CSS的指令名稱就算記不起來，也要知道它的功用，否則會因為瀏覽器的不同，而影響到版面的配置，以及背景、文字位子，就會看到版型裡的內容飛來飛去，或是消失在某個角落。
還有最重要最重要的，就是PNG在IE6底下的問題囉！一般都會用pngfix，或將javascript語法寫進CSS，在宏醫的例子裡，我將這二種語法都加入，一種是針對背景，一種是針對有連結的圖片，如果單純只用pngfix，會遇到連結因為blank.gif的關係，而蓋在有連結的圖片上面，導致連結失去作用，所以，解決辦法，就是將pngfix針對背景做png透明化處理，然後再用javascript語法解決有連結的圖片，就可以解決這個問題了。(這是在找了很多種pngfix，都試過之後，才決定使用這個方式。
Random Posts
Loading…
目前並無相關文章
看起來相當清爽，也很簡潔耶 !
@大鐵
好久不見了ㄟ
感謝你囉
哇!!這個好喔!!
透明化處理~~
若在CSS中使用png透明，
常會出現問題~~
IE6就算了吧!!
@梅干扣肉
IE6 = = 真是可惡的瀏覽器~
可是仍然佔 1/6 嗚嗚~~
「所以再生物科技這塊」
「再生物」？？
所以這家公司主要經營是回收業囉？(大誤)
@拆組達人
ㄏ 錯字啦
joomla 這東西我只有摸過幾次沒再深入研究，所以我講的若有技術層面可能設汲 joomla 版型不得做此決定，那是我的錯誤，再請指正。
http://www.picscrazy.com/view/safari4
http://www.picscrazy.com/view/IE6D
Safari 4 Windows 版，左邊表單會造成上移現象，IETester v0.4.0.3 版下開啟 IE6 觀看，部分 FLASH 會造成左移現象。
如果這個現象在 XP SP3 IE6 下(抱歉，我沒用 IE6)＆ Mac Safari 下也是同樣現象，則我有 2 個看法：
1. 基本上你選擇的 solution 可能就需要替換。
每個專案都有它的時間壓力，我不知道你花費的時間與報酬是否取得平衡、專案是否 delay 或如期交搞。但是同樣的效果，我會選擇使用 javascript mootool(因是joomla 目前預設的framework)或是 jQuery 來達到同樣的 flash 效果，因為 flash 內的字沒有變化、圖片只有最基本的淡入淡出效果，這種效果用上面這 2 個 javascript framework 可以很簡單的就達成，對於瀏覽器的包容性更高。接下來對於你做左側的圖片式選單要做定位更方便。flash 對於 HTML 4 的 elements 相容性上會有一些技術細節&問題。PNG 透明背景等類似須 hack 手法的問題，能不碰就不要去碰，因為時機不成熟，過個幾年IE6市佔率非常低時，你可能完全不須去考慮這個問題。今天幹麻拿磚塊去砸自己的腳？這類過渡時期的 hack 技術，不需要去學，你只要去了解有這種問題，然後去避開它。
除非業主特別要求，否則同樣的效果，別人花你一半時間就完成，你的效率何在？你講出你的技術細節，但是別人的 solution 比你更好，光是瀏覽器包容性就比你更高，這要真有人願意聽你說，聽完後可能就把你的評價扣分。
2. 你可能對我講的很不以為然，但是這是我以前的切身之痛。
當年 IE 5.5&IE6 問世時，對於它與標準的兼榮性也很困擾我，尤其是 javascript 這部分，可是當我接觸到 JavaSscipt framework 時，我才發現當年我走了很多冤枉路，因為它的 solution 比我的更好，你花30小時去寫、debug，不如花 10 小時研究原始碼。
你今天硬是要用 PNG 蓋過 FLASH 花 3 倍力氣，不如找 solution 去替代，用方塊式 flash + png 不蓋 flash，或 JS 換圖 + PNG 圖片選單。
我就不懂，為什麼要使用一個比較差的 solution 還造成版面錯移現象？如果一個專案的 solution 要花你太多時間去 debug，你為什麼不選另一個 solution？
@jocosn
DEAR 首先要先謝謝您的回應
謝謝你願意花這麼長的時間留言給我們
首先關於您說的問題我分成兩個問題來討論
1. 關於是否要使用 joomla 的問題
這個問題要用或是不用取決於專案建構時間以及專案成本
以及你能夠做到的功能
如果試想客戶只有做靜態網頁的費用，會有能力製作動態網頁嘛？
如果使用 joomla 製作人員只需要使用美術設計與html＋css人員
但是如果你需要管理內容就還有可能要在增加程式設計師一名，但是要製作到joomla 的管理介面
我不知道需要花多少成本
至於版面跑掉的問題，因為 div 包覆在各瀏覽器會有些許不同這也是這個世界上所有的痛
至於能夠花多少時間 debug 測試到全部版本也要看業主的接受範圍
我相信你在製作無障礙 a＋＋＋ 與製作普通網頁的費用不會相同
2.關於 png 與 js 以及 flash
這個問題本來就是無解
ie6 不支援 png ，大多數的作法就是使用 pngfix 或是 動態轉換為 gif
或是因噎廢食 完全不用 png
至於各種作法都有
但是唯一目的就是要達到美術設計的提案
至於呢 這個案子是否可以用 jquery 去做這個換圖的效果
當然是可以 但是這只是使用技術上的問題
但是用 jq 會不會遇到 png 的問題？
不過這個案子在處理技巧上仍有改進空間
你的建議都可以為下次製作專案有更好的發展
謝謝哩 ^_^
我是覺得 cms 這類系統，像是 drupal, ,joomla，它的功能是很強，站在巨人的肩膀上是很好的。當你的專案時間很短，你的網頁功能要很多，你的業主給的錢也不低，你很想接這個案子時，cms 就好用了。如果你的時間充裕，目前有些PHP framework 很適合用來寫 cms 系統(之前我有看過，它有 blog、album 這些類別)，適用情況可能是對 cms 的掌握度、靈活度比較好。
但是完全不用 png，我倒是不覺得是因噎廢食。我的做法要是需要 png 就做偵測，ie6 、早期不支援 png 的，就轉到 no PNG 頁面，不去管它的死活，只 debug ie7+ 、firefox、SaSfari 這類後來支援 png 透明背景的，當年 ie 5.5 & 6 讓我吃了一點’小’苦頭，但是現在這種過度時期，我會完全去放棄 ie6，叫使用者去升級它的 ie，除非你的客戶端用 ie6 佔了絕大多數。
因為我突然領悟，為了目前這種過渡時期去做這類事，debug 時間就可以讓我去做其它更多的事，時間不應該花在 debug 上，要把 debug 的時間壓縮到最短。因為曾經發生一件事讓我發現：debug 在業主的眼裡沒有產值，業主要看到的是網頁進度，是你功力不夠才花太多時間debug。
「debug 測試到全部版本也要看業主的接受範圍」這個我是不知道你們是否有跟業主說明，像是我都不會主動去說明，我的心得是：懂的業主自然會去要求，沒提的就表示他極可能不懂，業主也不想懂，甚至很可能把一句話放在心理面：「奇怪別人的網頁我看都沒這個問題，是不是你技術太差找藉口，我要砍你的價」、「糟糕，找到一個技術差的，趕快找個理由換別人做、or 下次換別人做」。可能不自覺中就少一個 case 接。老實講，debug 確實也是自己的問題，所以現在我更認為，選對 solution、壓縮bebug很重要。
(除非業主特別要求 png + IE6。像是這個專案，我會選擇png 圖像選單直接匯進 flash。不過可能是因為你當初美術設計提案有說要用 png + flash，對方又很懂網頁技術，堅持要看你的功力，或其它原因，那也是可以的。)
是你功力不夠才花太多時間debug→我是說業主主觀認為是你功力不夠才花太多時間debug。但實際情況很複雜不見得是這樣。
關於我們討論的這個問題阿
我遇過一個最好笑的案例~ 你可以參考看看
某公司發了一個案子要求製作網站，並無說明要求 IE 6 ok
所以呢用了 PNG 也沒有裝 FIX PNG 並且用了一些 IE6 不支援的 CSS
結果
客戶在驗收的時候
我們在 DEMO 沒有問題
但事隔天打電話說
請問一下
為什麼我的電腦看的畫面是跟昨天不同
還附帶一句
我公司每一個人的電腦都一樣耶~
我的想法是
這家公司的 MIS 應該拿去吊起來打
但是結論是
替客戶修改 IE6 版本 = =
我仔細一看，有點霧颯颯：
你是說他公司用的是 ie8，但卻要求 ie6 ok 嗎？
還是要求 ie8 ok，公司卻用 ie6 ？
如果是前者，那你要反潮流，偵測到xp2 ie 7&8，叫他反安裝新版ie，用 IE6 以體驗更好的網路瀏覽環境。本網站限用 ie6 瀏覽，不能使用 ie7 & 8。
這個搞笑。
@jocosn
我的意思是說
報價時客戶並沒提及 IE 6 的問題 ( 只有少數人 IE 7 )
結果結案的那天
才發現原來全公司的其他人都是 IE 6