TETRABYTE

TETRABYTE

http://www.tetrabyte.com/

前一陣子都一直尋求商業網站的部份
今天找個IT附有科技感的版面來試試新的感觀的寫法
欸欸...你知道嗎？你肯定不知道
版很像
但意外看到科技版的網站很多都使用大地色系
一般既定印象都是屬於比較金屬的冷色系，像是藍色，銀灰色等
這次介紹的是商業科技等最基本的配色暗紅色為主的TETRABYTE
使科技和商業結合滿不錯的。

讓我們繼續看下去。


特色之一CSS3
由於現今網站多半都已是CSS3為主了，故多半IE都不太支援，半數以上都會跑版，包括這次要介紹的TETRABYTE，則平常在做UI Design(使用者介面設計)時是否要特別針對IE去做設定和調整，是每個UI Designer(使用者介面設計師)很苦手的地方，通常會去特別調整半數以上是因為使用者他們並未更新瀏覽器而導致的，但我們又不能因為不管他們直接做自己的，所以有需要的時候還是會去調整，最厭惡的是IE的瀏覽器相容性工具，使用者會不知原因的點到而破版，然而他們也不知為何破版，變成我們又要特別去一一做細部修正。

但CSS3的美，我還是一定要介紹一下，希望人們可以放棄舊有的瀏覽器甚至不使用IE改用FireFox或是Google的Chrome。

快速又方便的圓角出現在Menu的下拉和右邊的功能區塊

現今圓角只需在CSS上打上幾行圓角的CSS3就會呈現了，在過去，還要切個三張甚至八張圖等等，且在CSS上編寫方面也略顯麻煩。

首頁Header and Banner特色

大大的Logo，利用漸層框包起來，在Header還加上大大文字，一目瞭然的廣告，Menu利用jQuery做出華麗的下拉動態效果，是比較加分的部份，可惜在IE看Menu反而是最扣分的部份。

Banner部份也是動態jQurey輪播，利用左右按鈕做切換 Banner的動作。

首頁內容特色
在首頁特色處，把主要資的三大資訊做成水晶按鈕，是附有科技感的，加上按鈕後的灰色背景和陰影加上內容的淡灰背景，是附有質感的，且在Title部份，看似沒什麼，但其實都特別利用背景的logoT和紅色小logo組成的，且通常比較像項目符號的圖多半都會放置左邊，在此是靠右對齊。圓角區塊部份的清單內容，只需滑入即會變成。

首頁註腳特色

Footer部份，在內容的最尾處，也利用了CSS3做成圓角部份，在下面還有一些該公司的支援連結，當然最重要的Logo也不可忘了，總不能看了這麼久看到底還不知道什麼公司吧，所以都會加上一個logo，然後附加網站的大功能連結，最下面則是一些版權宣告和公司簡介。

內頁特色

剛好接合首頁下方的圓角，所以在這邊的內容處的上方也是以圓角來處理，剛好包成一個方形圓角框。

Sharing is caring!部份是內頁最有趣的小工具，設計成像抽拉式卡片那樣，滑過去分享圖示會向上跑出來還外加註明是要怎麼做分享的，是個很可愛的分享小工具。