很多客戶其實不是很清楚網站設計其實有很多種的作法 , 也許有的外觀很類似 , 但是有的其實有大大的不同 , 我們就目前常見的網站設計的手法 , 大概說明..
網頁製作方法01 : 傳統Html搭配Table網頁設計排版
一般傳統網頁大多是會以Html4的語言,搭配表格table的排版 , 大多的網頁設計會以這種方式處理 , 因為較舊的瀏覽器對於表格的支援性都很純熟 , 因此在瀏覽上 , 畫面破圖跟破版的出錯率較低 。
網站實例 : http://www.csidea.idv.tw/
網頁製作方法02 : 優化型 CSS+DIV網頁設計排版
越來越多客戶會希望在搜尋引擎的排名可以排的比較好，我們發現如果網站本身結構寫的越好，對於網站的排名是有幫助的。這種優化型的網頁設計方式 , 利用CSS+DIV可以讓網站原始碼機簡乾淨，效能的處理上也會比較好！目前因為瀏覽器種類較多 , 有的CSS設定在不同瀏覽器會略為不同 , 每家瀏覽器對於字距行距都有些微的顯示差距 , 這也是CSS+DIV排版的一大挑戰。
網站實例 : http://www.csidea.net.tw/
網頁製作方法03 : Flash動態網頁設計
使用Flash製作網頁 , 可以極高互動與特效的呈現 , 因為Flash有成熟的actionScript語言 , 可以即為互動的與網站使用者產生共鳴 , 因此大受一些活動網站所青睞 , 也有一些品牌風格較強的人會喜歡這類的網頁設計。不過 , 目前許多ipad 以及Android 的平板電腦使用者 , 或是手機使用者 , 都不支援Flash產生的swf檔案格式 , 會出現空白 , 而喪失了網站設計的意義..因此目前有的網站也捨棄了以Flash為主的設計。
網站實例 : http://www.csidea.com
網頁製作方法04 : JS動態網頁設計
因為考量.ipad 以及Android 的平板電腦使用者 , 或是手機使用者 , 都不支援Flash產生的swf檔案格式,但網站又很需要互動或是動態效果怎麼辦? 因此JavaScript長久以來的互動程式基礎 , 重新被重視 , 利用jQuary的互動效果 , 取代了Flash的動畫技術 , 讓手機與平板都能夠順利看到動態效果 , 成為了目前智慧型手機平板很夯的世代中 , 最好的解決方式 ...但是在較舊的ie瀏覽器, 還是並不是完全支援JS的效果 , 這一點也是無可避免的難處。
網站實例 : http://www.csidea.net
網頁製作方法05 : 手機版網頁設計
智慧型手機的人手一隻 , 促使著手機版網頁設計的必需性 , 針對已經有電腦版網站的客戶 , 會建議獨立設計手機版的網頁設計 , 使用針對手機規範寫出的手機網頁, 可以更具效能更順暢的讓使用者瀏覽 , 並且可以針對繁瑣的PC版網站 , 功能上簡化 , 內容上簡化 , 獨立處理成小而美的行動版網頁設計, 除了要考量手機運作不能太吃效能 , 也要考量在小畫面的使用者習慣介面的UI設計, 要如何在小小的畫面,擁有最大的流暢度 , 決定了一個手機版網站設計的成功與否 .....
網站實例 : http://www.csidea.com.tw/mobile/
網頁製作方法05 : HTML5+CSS3網頁設計
為了讓智慧型手機能夠有更好的效能運作 , Html5+CSS3支援更多的動畫效果以及新增更多的互動與法 , 讓手機也能擁有高互動高效能的網頁設計 , 因此網頁技術使用HTML5+CSS3可以擁有比傳統作法多一些的互動與法 , 很多動態效果不用依賴JS也可以達成 , 因為有新的語法的出現 , 網頁設計也開始用不同的設計方向與變革.....
網站實例 : http://www.ispago.com/
網頁製作方法07 : RWD Responsive Web Design 自適應式網頁設計
考量到目前手機,平板,電腦的多尺寸 , 網站也開始有跨平台的夢想 , 因此開始有RWD (Responsive web design 有人翻譯成自適應式網頁設計,或是響應式網頁設計,也有人翻譯為 移動式網頁設計..)的網頁製作手法出現 , 有的網頁設計師會以Html5搭配CSS3 , 利用其互動的手法 , 在搭配JS的應用 , 讓網頁設計可以配合使用者的螢幕 , 自動顯示其最佳的呈現畫面 , 等同一個網站同時具有電腦版,平板電腦 , 手機版的呈現畫面. 當然 , 因為語法是都寫在同一個頁面中 , 原始碼的量與效能 , 都是搭載著基本的控制內容 , 所以效能上也會比分開處理PC手機版,比較沉重一些 , 但是在流行面上 , 此種方式的網頁設計 , 會以較簡單風格的方式呈現設計 , 是極簡風愛好者的最佳選擇..RWD的網站設計 , 是符合現代也是未來的網頁設計標準...
網站實例 : http://www.ispago.com/
(特別提醒 : IE過舊的版本 , 不完全支援JS,Html5,CSS3 , 因此追求新技術的同時 , 請捨棄您過舊的瀏覽器版本喔.....)
|
