網頁設計的專業首選

      隨著主流瀏覽器不斷地更新與進步，CSS搭配js所形成的網頁動畫效果，能用CSS3的語法直接呈現，在圖片的設計上更能減少圖片效果，避免檔案容量過大造成存取困難。 到底有哪些CSS3語法在前台網頁設計中是最常被使用的呢?   1. RGBA設定元素顏色 可設定元素的顏色，主要利用顏色的RGB值，以及設定元素的透明度。 範例： background:rgba(0,0,0,0.5); background:rgba(0,0,0,1); background:rgba(red,green,blue,alpha); 其中alpha值 0為透明 1為不透明，0~1區間可選擇透明度的強弱。            2.Border radius設定元素圓角 可設定元素圓角，預設為0 範例： border-radius: 10px; -webkit-border-radius: 10px; (針對chrome瀏覽器) -moz-border-radius: 10px; (針對firefox瀏覽器)   3. Text Shadow文字陰影 可設定文字陰影 範例： text-shadow: 1px 2px 3px #000;   4. box Shadow區塊陰影 可設定區塊陰影 範例： box-shadow: 1px 2px 3px #000; -webkit-box-shadow: 1px 2px 3px #000; (針對chrome瀏覽器) -moz-box-shadow: 1px 2px 3px #000; (針對firefox瀏覽器)   5. transition過渡動畫 可設定動畫效果 transition-property：對哪個屬性 transition-duration：動畫時間，預設為0 transition-timing-function：動畫效果，如淡入、淡出等 設定值： linear:以相同速度開始至結束的效果 ease:慢速開始，然後加快，之後慢速結束的效果 ease-in：以慢速開始的效果 ease-out：以慢速結束的效果 ease-in-out：以慢速開始和結束的效果 cubic-bezier：在cubic-bezier函數中定義值，是0~1之間的數值 通常在設定動畫速度時，大多使用ease-in或ease-out來取代，但藉由cubic-bezier，可以得到更多種速度控制的動畫效果。 transition-delay：規定動畫效果的延遲時間 範例： div{ width:100px;height:100px; transition-property:width; transition-duration:1s;} div:hover{width:200px;} 以上會造成寬度改變的滑動效果   6. Gradient Background設定背景漸層 上下漸層：GradientType=0 左右漸層：GradientType=1 漸層起始顏色：startcolorstr=#  漸層結束顏色：endcolorstr=#  範例： 預設的背景色 background: #278092; background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));  (針對chrome瀏覽器) background: -moz-linear-gradient(top, #00475E, #007276); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');  (針對firebox瀏覽器) background: -o-linear-gradient(top, #00475E, #007276);  (針對opera瀏覽器)         目前這些都是在網頁設計中最常使用的CSS3語法，一般網路上也有免費的產生器可供使用。CSS3的出現影響了使用者使用網頁的讀取速度，在目前較流行的RWD網頁(響應式網頁)更有特別的用法，且較不受拘束，未來CSS3的發展指日可待。  

　　早期瀏覽網頁主要是以一般家用電腦或筆記型電腦為主，在製作網頁時會以固定寬度來設計頁面的大小，然而隨著平板電腦與智慧型手機的普及，以及新裝置的出現，響應式網頁設計的觀念被引進，讓網站能夠針對不同裝置的螢幕顯示適合其尺寸的網站內容。 　　由於新裝置的出現改變了上網的習慣，根據調查顯示，現今約有80%的網路使用者都使用智慧型手機上網，此數據證明行動搜尋超過桌上型搜尋了！   　　目前Google有近半數的搜尋是透過行動裝置進行，Google宣布改變全球手機版搜尋結果的排序方式－若網站所提供的介面是能夠針對裝置的螢幕作出回應，並且以適合於該螢幕尺寸的方式顯示其網站內容，其被搜尋到的機率將比非行動版的傳統網站更高、排名更前面。在這樣的調整之下，無法針對裝置作出回應的網站曝光率與訪客流量將受到大幅影響，其網站在搜尋結果的排名將大幅下跌。    而為什麼搜尋引擎會對響應式網站(RWD)給予較高的分數？   1.使用單一網址，集中流量，提升排名 響應式網頁設計的好處在於不管是手機還是平板都是使用一樣的網址，集中網站流量，提升搜尋引擎的排名，與手機版網站不同。以Google來說，網址不同但內容相同的情況下，雖不會將該網站列為惡意連結，但仍會影響評價(Page Ranking)。   2.絕佳的瀏覽動線，降低網頁跳出率 若是用手機看一般網站的話，必須放大縮小才能看到自己想要的資訊，很容易造成使用者跳出率增高，進而被認為該網站不是最佳的搜尋效果，排名也會跟著降低。而RWD對於SEO的優勢除了增加流量以外，還降低了網頁的跳出率，不論是哪種螢幕尺寸皆有最佳的瀏覽動線，不會因為瀏覽畫面的不方便而直接跳出。   3.電腦和手機資料同步更新 由於RWD使用的是同一個後台，因此更新時亦會同步更新，而手機版與電腦版因為是不同的後台，因此更新時須更新兩次。若只更新其中一方，如此一來電腦版用戶與手機版用戶所看到的資訊是不同的，也會造成消費者的困擾。    

什麼是SASS？ 為了減短開發網頁設計CSS的所需時間，因此Ruby（一種程式語言）開發出了CSS程式化框架SCSS、SASS。兩者皆屬於SASS，差別在副檔名與撰寫方式的不同。SASS是原生的SASS語法，最大的特徵是以縮排取代了CSS的大括弧，SCSS則是後來衍生出來的，在結構上與CSS十分相似，因此對於本來就習慣寫CSS的人來說，SCSS會比較容易上手。   安裝SASS 1.到Ruby官網下載最新的Ruby程式。http://rubyinstaller.org/downloads/ 開啟「Start Command Prompt with Ruby」視窗並執行。 2.按「開始」－＞「執行」輸入「cmd」開啟命令提示字元。 3. 輸入「gem install sass」安裝SASS。 安裝之後可輸入sass-v 確認是否安裝成功。   SASS的特色 1.變數(Varibles) 在SASS中新增變數前需加符號＂＄＂ 可以整合網站最常使用的寬、高、顏色、字型等等，預先設好，需要時就能拿出來使用。 SASS： CSS原碼：   2.巢狀(Nesting) 透過巢狀式結構，父子元素的命名關係一目了然，易讀性增高，減少CSS的編輯時間。  SASS： CSS原碼：   3.函式{Mixins) 可以省去許多重複的CSS文字，新增函式前需加"="做為宣告，函式使用前則需加"+"號即可取用。 SASS： CSS原碼：   4.繼承(Extend) SASS裡的繼承與CSS的繼承差距不大，也就是能沿用之前所撰寫的CSS，標籤前加"@extend"便可沿用。 SASS： CSS原碼：   5.運算符(Operators) 在SASS裡可直接做加減乘除的計算(注意單位需相同)  SASS： CSS原碼：   6.導入(Import) 當需要使用其他SASS文件時，只要將文件導入"@import"進來即可。 需注意的是導入的文件前需加下底線"_"。 如例子master.sass需寫成_master.sass SASS： CSS原碼：   若能靈活應用SASS的話，將會大幅度降低網頁設計CSS的撰寫時間，並由於CSS行數減少的關係，使得後續的維護與修改更加容易，也能夠使網頁讀取速度更快。缺點在於一開始繁複的安裝過程，並需要先開啟編輯器生成CSS才能看到撰寫的網頁內容，且需花時間學習新的語法，但若是習慣之後，確實能減少許多不必要的時間。想提升工作效率嗎？學習SASS會是你的好選擇。  

GA分析是什麼? (Google Analytics- Google分析)                托智慧型手機與行動網路快速發展所賜，現今的我們能不受「時間」及「地點」限制上網瀏覽龐大的資訊，延續文章為什麼要做網站?我們瞭解到一個好網站不僅能表現出企業形象，甚至更能將資訊推廣至全世界創造無限量的廣告經濟效益，在這波趨勢中各家企業都認為應該製作屬於自己的網站，不過在這波洪流中，曾幾何時大家是否質疑或思考過製作了網站，又該怎麼看見、瞭解網站真正帶給了我們什麼正向獲利與成效呢?          面對這樣一個跨時代的改變以及因應人們的需求，各家行銷公司不僅都推出了屬於自己的網頁統計的工具，更針對網站行銷職缺逐日漸增推出了流量分析師認證，其中又以Google分析最多人使用； Google 併購了原本需付費的網站流量統計服務公司並將原本需要付費的服務開放免費使用。(基本版是免費使用，高階版需要額外付費)              GA使用方式主要是以Google帳號並登入Google Analytics (分析) 按下「註冊」填寫相關資料後，新增追蹤所需要的追蹤程式碼將想觀察的頁面中放入Google Analytics所提供的追中程式碼，每當執行這個網頁時，GA伺服器就會透過瀏覽者使用的相關訊息來統計、整合成易讀的資訊報告傳送給網站管理員，並可在其資訊中瞭解到:網站搜尋排名、網頁瀏覽人次、經由什麼關鍵字進入該頁、用戶有什麼使用習慣、訪客來自於何處等十分的詳細的相關資料。          透過GA的分析報告，我們能分析出網站目前的使用狀況是否足以貼近目標使用客群的需求，進一步能針對使用者的習慣及相關主題來調整設定網站營運方向，達到網站最高的知名度與廣告效益，就是Google Analytics分析的最大優點。                

初識搜尋引擎最佳化（SEO）          在現今大多搜尋引擎當中，我們使用關鍵字搜尋時，都幾乎會看見搜尋列表列出2種排序。第一種為PPC-關鍵字廣告(Pay Per Click，簡稱PPC)主要透過與搜尋引擎的廠商提出想要購買的關鍵字廣告。第二種為自然搜尋排序，是根據使用習慣與關鍵內容等等複雜演算法的比對找出最貼近搜尋者的排序，因此搜尋者比起廣告更願意相信自然搜尋的結果，搜尋引擎最佳化（Search Engine Optimization，簡稱SEO）就是一種透過了解搜尋引擎的演算運作規則來調整網站，以提高目的網站在有關搜尋引擎內排名的方式，又以它是自然搜尋的結果，相比較PPC-關鍵字主要以廣告目的為宣傳，點閱率明顯就會比廣告來的高許多。         網路資訊中包含大量的網站資料，「針對搜尋引擎作最佳化的處理」，就是通過搜尋引擎各項複雜的運算規則進行優化，主要是為了要讓網站更容易被搜尋引擎接受，透過關鍵字相關性的資料比對，如:較多的關鍵字相關名詞內容、網站的高瀏覽率、大量關鍵對外連結等條件，以最快速、內容接近最完整且較多人使用的方式，呈現給搜尋者，最終的目的就是做好貼近使用者的搜尋需求。          以往早期人們把網站中關鍵字的基本定義標籤與連結大量應用、濫用標籤，甚至網頁內容大量重複關鍵字名詞時，造成該網頁排名與內容連結無關，進而搜尋引擎開始發展更複雜的排名演算法，使自然搜尋排序的條件更加嚴苛。面對如雨後春筍般大量竄出的眾多網站，現今的搜尋引擎將依據:網站的內容、使用者的搜尋習慣、手機與行動裝置的影響等等眾多條件作為演算篩選機制，因此一個網站的競爭力、長期經營與自然搜尋排名更顯得需要搜尋引擎作最佳化的幫助。         圖片中，黃色框選處為PPC-關鍵字廣告，藍色框選處為自然搜尋排序，針對搜尋引擎作最佳化(SEO)的處理後，網站能從原本默默無名的排序中躍身進入使用者常點閱的首要幾名，將會為網站達到最大的曝光與搜尋者的最佳選擇。            

HTML5網頁設計，相較於傳統的HTML的網頁設計來說，主要是在網頁內容呈現的強化。 因應行動裝置普及的時代，先前的HTML+Flash在行動裝置上，有著效能上的問題，加上Apple的iPhone全面不支援Flash的關係，使得光靠HTML來製作的規範已無法滿足時代的需求。   而在HTML5網頁設計的規劃中，有以下幾個方向:  擴展原有的HTML標籤定義，增加許多可在行動裝置上更為方便使用的標籤，如＜video＞＜/video＞，讓製作者可以更快速的開發支援性作的影片播放器。 HTML5網頁設計的精髓在於HTML5 + javascript + CSS3，藉由前面三者的結合，提供網頁設計應該更多的可能，如拖拉上傳、全動畫設計網站(以HTML5為基礎)、3D動畫設計、行動網頁設計等等。 對於網頁的效能與應用做更進一步的強化，如離線瀏覽功能、資料庫儲存技術、SVG影像格式的使用。 以上幾點都是未來在這個領域上發展的重要方向，也因此若要成為這領域的筊筊者，必然要對於這個方面非常熟悉與理解才行。   接下來列出幾個在HTML5網頁設計的方向上的網站: 1. HTML5Rocks  2. w3schools-HTML5  3. html5up    資深工程師 Chen 延伸閱讀 什麼是RWD (自適應網頁設計、響應式網頁設計、回應式網頁設計)?

RWD(Responsive Web Design)可稱為自適應網頁設計、響應式網頁設計、回應式網頁設計等等，是一種可以讓網頁的內容可以隨著不同的裝置的寬度來調整畫面呈現的技術，讓使用者可以不需要透過縮放的方式來瀏覽網頁，大大的提昇畫面的可瀏覽性及使用介面的親和度；然而這對於行動商務越來越受到重視的現今來說，隨之也越來越倍受重視。        近幾年，隨著行動裝置(智慧型手機、平板)的普及，以及行動上網服務的使用率越來越高，傳統網頁的標準已經無法符合這些裝置的需求來呈現了，尤其是以flash製作的動畫，受限於行動裝置運算力不足的限制之下，已經沒有行動裝置可以直接瀏覽flash製作的網頁了。雖然可透過一些特殊的瀏器APP軟體來觀看，但方便性卻大大的降低。        而RWD又是如何達到的呢? 主要是以HTML5的標準及CSS3中的media queries來達到的。      在HTML5的標準中，我們可以指定頁面的寬度可以依照裝置的檢視寬度來呈現，再利用CSS3的media queries 來設定不同寬度下使用不同的CSS來呈現頁面。因此設計師在設計網頁時，就必須要針對不同的寬度下的畫面編寫不同的CSS檔案供瀏覽器來讀取。        RWD的優點:      1. 可使用同一套原始碼來撰寫CSS，可以減少版面重新製作的時間。      2. 可同時針對不同的解析度來設定，增加頁面的可用性。      3. 對於搜尋引擎的收錄不會造成影響，不影響SEO的結果。      4. 開發時間較APP來說可以快速很多。      5. 學習門檻較低，對於已經從事網頁設計的人員來說，此技術只是建構在原本的DIV+CSS之上的一門技術，因此學習起來相對容易。        RWD的缺點:      1. 因為在同一頁面會置入多種解析度的CSS檔案會增加頁面傳輸量，載入的時間也會加長。      2. 若在各種解析度下的畫面都需校槁的話，在製作版面的時間會大大的增加。      3. 無法提供像APP般功能強大的功能，或是各種酷炫的拖拉效果。      4. 開發時程較傳統網頁需相對多的時間。        以上提供RWD的各項優缺點分析。      最後，想要可以體驗RWD的功能前，還有一項最重要的基本要素，那就是瀏覽的支援度。由於RWD是建立在CSS3的基礎之下，因此要支援RWD也必須要支援CSS3的瀏覽器才行，以下列出各大瀏覽器支援的版本:      ‧ Internet Explore 9以上      ‧ Chrome、Firefox、Opera 使用自動更新至最新版本即可      雖然還有些人撰寫了JS來讓IE8以下的版本來支援CSS3等語法，但目前還是支援度不佳，且IE8的使用者還在不斷的減少中，因此使用新的瀏覽器才是真正體驗RWD的最好辦法。        本篇文章簡單的介紹了RWD的基本觀念，並分析其優缺點，讓有意使用RWD的人們對於此技術有更多的了解。        一化網頁提供專業的客制化的RWD網頁設計，若您對於我們的作品有請興趣，請參考「RWD網頁設計作品」，或直接與我們聯絡。   Posted by 資深工程師 / Chen

建構一個成功的網站只需要三項簡單的能力，或稱為要素。其實這三項大家都知道：內容、設計、技術；雖然這三項要素都很簡單，但是真的要將這三個要素緊密的結合在一起，卻比想像中的要來的困難 │什麼是內容│ 傳統觀念下，這就是你想要呈現給讀者看的東西。 依比較新的管理學而言，內容是讀者想要從你的網站看到的東西。內容可以是文字、圖片、聲音、影像……等，只要可以透過數位傳輸，都可能是網站的內容。現在這篇文章，就是內容。 │什麼是技術│ 技術是「適當」運用科技的能力。 網路既然是科技媒體，所有內容當然也必需透過技術方能呈現。技術從最簡單的HTML到複雜的互動資料庫都是。 │什麼是設計│ 設計就是內容被使用者感官接受的表象。 從文字的選擇、版面的規劃、動線的安排、網站架構、用色到多媒體的構成，這都是設計。就算只有純文字（ex: E-mail的Newsletter），也需要設計。記住：沒有內容，就沒有設計。雖然麥可魯漢說──媒體本身就是訊息，但是設計本身卻不是內容。 只有整合才能讓三項能力發揮，一個網站要如何擁有這三項能力呢？招募：這三項的人才，分開來找其實都不難。 工作：要讓這三組團隊分別運作，也很簡單。 管理：想要領導這三個團隊分別做各自的專長，還算容易。 但是這樣就夠了嗎？當然是不夠的。目前台灣幾乎百分之百的大型商業網站都具備了這三項能力，但為什麼網站始終不勝理想呢？原因在於：所有的網站都將這三項能力分別運作，而沒有任何職務能夠讓內容與設計、設計與技術、技術與內容，甚至這三項能力整合在一起。除了無法在網站上發揮網路媒體的特效，同時也浪費寶貴的人力資源與投資人的錢！有的網站花了很多錢，但看起來還是很像報紙！想想看是為什麼！

縱觀這幾年下來，台灣對於設計力的重視的確逐漸升高，政府亦開始有相關的輔導政策以提升台灣在國際上的設計競爭力，但這僅僅是政府單方面對外的作為，但在對內來說，台灣產業界業主的觀念普遍仍對設計這門專業是毫無概念的。 雖然國內教育體系亦致力於培養許多設計人才，如工業設計、建築設計、視覺設計、空間設計等許多設計專業，但仍忽略在教學及產業上的實際連結面， 學生需要受教育以作出好的設計，產業業主亦需要受教育才能尊重、支持設計師們的想法，達到相輔相成的作用，而並非把設計一詞認為是勞工的同義詞。 以台灣僅僅網頁設計環境來說，這樣一塊現代網路化的資訊趨勢，便需要更多業主的了解及尊重，當業主能將想法及構思放心交予設計師們著手實現，設計才能發揮到該有的水準，將產業特色及網頁設計相結合，達到宣傳媒體管道的作用。以過去一化接觸過的許多案子為例，尊重網頁設計專業的案主有之，而僅將網頁設計這門專業視為附屬品、認為在視覺及程式設計上的專業考量可有可無的案主亦不在少數，在案主們兩種相異的思維下，想當然爾是放心交由有專業而週到考量的網頁設計所製作而成的網站，能有更到位、實質效益更大的專業網站。 網頁設計並非全盤否定業主的想法及考量，而是在相互尊重及幫助下，共同將網站案件做到既符合產業特色、卻又比同業更出色、設計更精采的專業網站，這是現今台灣的網頁設計環境與產業之間，最需要的連結點。 Posted by 視覺設計師 / One

在著手進行一個網頁設計之前，首先要明確以下幾項設計原則：   1. │內容與形式相統一　這篇文章，就是內容│ 內容是指你要通過網頁向瀏覽者傳達的有效資訊及文字；形式指的是網頁的排版佈局、色彩、圖形的運用等外在的視覺效果。無論採取何種表現形式都不能單純追求網頁美觀而忽視內容的建設，沒有充實內容的網站，即使設計再精美，也不會對用戶有長久的吸引力。   2. │主題鮮明│ 一個網站必須要主題鮮明，突出重點，特別是個人網站，不可能像綜合網站一樣內容大而全，包羅萬象，因此必須要確定一個明確的主題，突出自己的個性和特色，一個主題鮮明、內容豐富極具特色的網站往往比一個“大雜燴”式的網站更能吸引人。   3. │風格統一│ 整個網站設計要採取統一的風格，這樣使網站看起來更專業，不要一個頁面採用一種風格，另外一個頁面又換一種風格，給人一種很散亂的印象。風格要突出自己的個性，無論是文字、色彩的運用，還是版式的設計都要給人一種鮮明的印象，使人看到這個頁面，就會想到這是你的網站。   4.│兼顧下載速度與美觀│　 由於目前的網路狀況較差，不能片面追求頁面的美觀而忽視頁面的下載速度，這樣會失去一大批瀏覽者，大家不會為了看一幅美麗的圖片而等上半天。網頁中的圖片應當是起到畫龍點睛的作用，除非特殊需要，一般不要在網頁中大量使用圖片，在網頁中的圖片要經過適當的壓縮處理，使它在保證質量的前提下儘量小。一些用Java程式設計的頁面也非常美觀，但下載速度慢，一般要慎重使用。   5.│導航清晰│ 網站要給瀏覽者提供一個清晰的導航系統，以便於瀏覽者能夠清楚目前所處的位置，同時能夠方便地轉到其他頁面。導航系統要出現在每一個頁面上，標誌要明顯，便於用戶使用，對於不同欄目結構可以設計不同的導航系統。   6.│欄目設置合理│ 對於一個網站，尤其是內容較多的網站，其欄目設置是否清晰、合理、科學，往往在很大程度上影響網站的訪問量。一個欄目設置合理的網站，用戶會很容易地找到需要的東西，這樣的網站才能讓用戶喜歡。對於初學者來說，常犯的錯誤就是網站結構設計不合理，內容編排雜而亂。因此，在設計網站之前，一定要規劃好欄目的設置。   7.│良好的相容性│ 對於網頁來說，它不同於其他印刷品，製作完成後就一成不變了，它隨著用戶瀏覽器的不同而出現變化，因此設計者一定要考慮到網頁的相容性，使它適用於大多數主流的瀏覽器或目標用戶所用的瀏覽器，不致於出現差別很大的瀏覽效果。   8.│經常更新│ 經常維護更新，給用戶提供最新的資訊，才是一個網站具有吸引力的重要手段。因此，要想保持網站的訪問量，吸引更多的“回頭客”，你必須要定期更新網站內容。