今天還是網站範例解說，還是同一個站…的中文版。 http://asia.swarovski.com/taiwan 昨天就提到該站的中文版是獨立製作的，所以和原站在設計風格、技術上都不同，馬上就來比較一下兩者的差異。 首先是landing page，英文國際站採用了 RWD 做了滿版的設計，配上jQuery的silder控制，讓不同的event都能用海報式的全版模式做露出及切換，中文版是採用flash，包括LOGO都用flash制作，Flash不是不好，不過在這裡的使用因為設計不再是滿版，氣勢上就弱了，拉動視窗可以看到flash被擠壓時人臉的變化及色差，色差這種事很憑感覺啊… 圖片的DEMO方式會讓人心理上的感覺差很多。 另外就是底下雖然一樣有類似的 fixed footer的設計，但是因為上方是flash的關係，所以當高度小於上方元素時，當做導航功能的footer就不見啦!
寫了這麼多天的技術還有概念，今天就來看看案例分享吧，我選了一個國際知名的水晶玻璃品牌- 施洛華士奇 http://www.swarovski.com/ 就來分析看看這個站在設計上做了什麼考量吧~ http://www.swarovski.com/ 點進去就會發現，網站判斷你的IP，提供不同語系的選項，可能只有中文有特別做吧 主要的考量是線上購物的平台不同。 進入英文網站後，可以發現網站有做RWD，Responsive web design 視窗回饋式的設計，除了底圖的大小會隨著視窗變動之外，底下banner的數量也會隨著改變。至於台灣版的…是flash，而且在Firefox裡悲劇的整塊flash不會出現，而且在IE裡大陸版的首頁字型大小也出現錯誤(不過我不懂flash不知道怎麼修 =..=+)，可見得他們沒測firefox而且台灣會做RWD的人可能還不多吧… 一個網站三樣情 =..=+
前幾天的分享裡有聊到，前端的工作並不僅僅是切版而已，整個web的呈現部分都可以廣意的算在前端頭上，今天就來縮小範圍拉深主題，聊聊切版需要注意些什麼地方，不過因為我是新手嘛，有可能是錯的，如果發現我觀念有錯什麼的，要早點和我說啊!! 首先，拿到版面後第一個要確認的就是各個區塊的功能，一般拿到的版都是PSD的附上簡報或文件說明內容，開始動工之前有可能可以開個會，在拿到版開始做以前，務必要先把整個版的UI及功能從頭到尾模擬一次，對怎麼做大概有個底，不確定的地方一定要詢問，免得江水一去不復返，時程用光還是要重來的慘劇。
HTML5 其實還是HTML，只是像軟體有更新一樣，HTML也更新到HTML5而且有更多的功能，具體的呈現就是出現許多新的 tag標籤。 HTML5裡主要的更新之一就是用語義化的tag取代不具意義的<div>，另一部分是針對新的裝置，像手機觸控、螢幕滑動控制等tag、增進客戶端及驗證表單、影音、多媒體還有最炫的Canvas繪圖區功能等等。 又因為HTML是一種讓瀏覧器看的語言，在舊版瀏覽器裡HTML5有可能沒有被支援，而有些新的HTML5功能又還在討論中，所以本篇就先來談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。
網頁設計 ≠ 平面設計，有些”眉角”還是要了解一下 前端網頁設計的技巧很雜，不過有很多問題其實在企劃或視覺設計版面的階段就要先溝通好，否則等到定稿了再來調整就肯定「痛苦太多收獲太少」不然就是牽一髮動全身叫人不想死也難…. 癈話不多說，直接寫心得： 1. HTML元素都是矩型： 首先建立一個我之前也提過的概念，HTML裡的元素其實不管造型如何，都是「正矩形」，先有盒模型的概念，在設計時就比較不會出現天馬行空的「視覺饗宴」了。 2.網頁是活的： 網頁設計和平面設計最大的差異是「網頁是活的」，和平面不同，平面設計時你的元素是固定的，字型設什麼樣子就是那樣，不會隨著印刷品放置的時間和看的人不同字型忽大忽小，或是圖片有時大有時小。 但是很不幸的，網頁會。
現在的網頁設計比較重視語義化的結構，也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品，如果是「是內容」就使用 html的元素來表示，如果單純只是造型，就使用CSS 的元素背景來呈現。 所以目前比較流行的選單做法之就是將文字隱藏後用背景圖取代，雖然有一派是主張連字都不要藏，使用所謂的icon-font或是載入字型來美化，不過在英語系國家這麼做問題不太，一個字型檔不會有多大，中文就… 常用字至少要3000個，所以，實用性不高，我們中文使用者還是乖乖的用文字取代吧…淚目。 使用的方法很簡單，一般都是用無順序列表 ul 及例表項目 li 裡面放 錨點 a的方式來做選單 li 浮動後就能做出水平選單 a 設定 block就能採用寬度，設定背景，最後用 text-indent:-9999px 將文字推出可視區域
今天來講 CSS 如何控制HTML內的文字 font-style 字型 首先在文字設定時最基本的- 表示為 font-style: “新細明體” ,helvetica ,serif; 可以指定多組不同的字型在同一個元素上，因為字型會因為每個使用者電腦的狀態不同而出現缺少這個字型的情況，所以CSS裡可以用兩種指定方式來設定字型，如果使用者電腦裡沒有這個字型，就會用下一種，所以第一種就是字型的名字像是”新細明體”、”華康中黑體”，使用時要用”” 把字型名稱包起來。 另一種就是 serif sans-serif cursive fantasy monospace 這幾個是字型的基本樣式，學過設計的都知道，字體有幾種基本的差別，襯線有無、粗細、圓字、黑體、等寬，另一種就是單純指定形式，然後電腦就會去系統裡找最類似的來使用，就是傳說fallback啊!!
今天來講最常用的背景色及背景吧~ color:#fff | rgb(255,0,0) | red 顏色可以用三種方法指定，不過在CSS裡直接用color是指定字的顏色 要用background-color: #333; 才是指定背景顏色。 background 背景：預設是透明的,可以放顏色及影像 background-color: green; background-image: url(image/img.jpg); 背景比較有趣的是可以決定要不要重覆及放置的位置 background-repeat: 背景重覆：有四個參數 no-repeat; repeat; repeat-x; repeat-y 即，不重覆、重覆、重覆X、重覆Y
繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。 上篇介紹了 display 屬性，可以針對元素的盒模型有不同的設定，display 設定了元素的顯示方式以及和其他元素的互動關係，今天來談談 position 位置。 HTML元素出現在頁面什麼位置可以依據三種主要的規則： 1. 普通 DOM樹 隨著HTML 的DOM元素順序 display是塊級還是行內不同，元素由上至下，由左而右依序排列。 2. 浮動 float 元素從普通的 DOM樹順序中浮到上方圖層，然後依元素被設定的float方向延著母元素邊界排列，display:block 的元素會被蓋住，如果左右的浮動元素堆到需要換行時，會依原本DOM 樹裡的順序，如果float:left 的元素寫在比較前面就會有優先權，空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時，table會無視float，從設為tabl置開始，做出類似block的行為。 見下圖：
上篇解釋了CSS的盒模型，介紹HTML元素在設計時就像一個個的盒子各自佔用了一個矩形的空間，今天就來接著介紹同樣也是針對元素空間定位的相關屬性。 顯示：塊級，行內、行內塊級 display:block; inline; inline-block; position: absolute, relative, fixed z-index:-1 0 1 ; reset 及預設樣式： W3C在制定共通的瀏覽器解讀方式時，針對不同的HTML元素有一些預設的樣式，一個單純的HTML檔案在完全沒有設計師指定樣式時，會呈現一種像大網模式般由上往下排例的內容，還是可以看出標題、連結、段落的差別，這就是預設樣式。 比如: <h1>預設是粗體，字級較大， 預設是普通粗細、14px… 因為這些元素有預設樣式，所以設計師在編寫樣式時有可能會被預設的寬高或間距影响到，例如 table 會有預設的padding 如果沒注意到就會一直無法順利把元素排版，因此多收設計師都喜歡先載入一段有人先寫好的CSS 叫reset.css，把所有預設的樣式都重置，這樣在設計時就比較不會被影响到。
