文章專區

網頁設計相關文章

 4.Best Web Gallery http://bestwebgallery.com/ 網站以黑底白字作搭配,讓觀者可以很舒服地瀏覽,精緻的花紋壓底加上簡單大方的排版,使得整體的視覺設計上相當有質感,選單種類除了「TOP10」與「Best of」以外,另有UI設計等等。   5. IEESAI http://www.ikesai.com/  收集日本最新網頁設計作品的網站,分類主要是以產業、配色等作依據,每個網頁會用小型縮圖的形式以方便瀏覽,風格十分多元化。   6. Css Winner http://www.csswinner.com/ 此網站是評選全球最佳網頁設計作品的競賽平台,每個作品右邊都有各項目的評分,分為「DESIGN」、「FUNCTIONALITY」、「USABILITY」、「CONTENT」等項目,每個月都會評選出優秀的CSS網站作品,使用介面乾淨明瞭。
1.Free Template http://www.freewebsitetemplates.com/  此網站提供超過百種的免費網站設計,也有許多版型可以下載,還貼心地提供PSD原始檔,適合初學者練習切版等基本功。排版偏簡潔俐落,並使用豐富照片搭配為主。   2.WIX http://www.wix.com/website/templates/html/most-popular  WIX提供上百種免費模版和圖庫可供使用,就算不會網站設計也可輕鬆架設網站,風格已分類好可供選擇,使用上十分方便,風格相當多樣化,設計師也可多做參考。   3.WEBデザインリンク集 http://gooddesignweb.com/  介紹許多日本當地優秀的網頁設計作品,特別的是選單上包括網站主顏色、子顏色、排版版型等等,豐富並清楚明瞭的Tag和種類讓搜尋上更便利。  
 1.什麼是網頁設計         網頁就像是一個傳達訊息的頁面,裡面有眾多的連結組合而成變成了一個網站,而一個好的網站除了內容傳達之外,首頁是是給瀏覽者的第一印象,這時候就需要網頁設計師,利用CSS(Cascading Style Sheets,稱階層樣式表)語法加上JavaScript(直譯式語言,幫助HTML增加網頁動態效果)特效,或是當紅的CSS3技術,目的不外乎就是為了吸引使用者的目光。     隨著智慧型手機的普及以及近年來Google越來越重視手持式手機上的視覺效果,都會提到這個回應式網頁(Responsive Web Design),又稱響應式網頁設計,簡稱RWD,這是一項2014的網頁開發技術,利用CSS3技術,將畫面分割為百分比及有彈性的畫面縮放,可在不同解析度的瀏覽下呈現不一樣的排版效果,能讓不同的手機系統(Android、IOS)可以正常的瀏覽網站,提供最佳化的視覺效果。   2.什麼是資料庫 想像一下,如果書是資料,那麼存放書的圖書館就是資料庫,透過索引、排序、計算、查詢等方法來有效的管理,將數據轉成有用的資料。而維護它的就是資料庫管理系統,是使用者與資料庫之間的操作介面,而SQL指令就是用來處理關連式資料表的標準程式語言,與市面上的MySQL、Access和Oracel的資料有著類似的共通語法,主要幫助使用者更有效的操作資料庫,維護資料庫完整性與安全。     3.程式與設計的結合         一個好的網站上線之後,也必須要維護它,而如何更有效的維護這就是程式設計師的工作,利用程式語言(ASP、PHP、JSP、ASP.NET)與資料庫(MSSQL、MYSQL、Oracle)的結合做出電子商務、購物車、會員管理、ERP、線上金流、報表輸出等功能的網站之後,網站管理員不用在使用傳統的方法一頁一頁編輯網頁內容這種沒有效率的作法,而是撰寫出一套後台管理系統給網站管理員維護,算是一個網站成型的前置作業,而操作上也必須很好上手,能夠快速有效的管理整個網站。  
 隨著科技越來越進步,各個瀏覽器不斷的更新及多元,各種設計花樣也越來越多,利用css3以及javascript讓使用者與平台達到互動的效果,故在頁面的設計便會有幾種做法來達到視覺上的呈現。   一、RWD響應式網頁取代一般傳統手機版網頁 RWD網頁開發成本較低,做一個版型可適用任何寬度的瀏覽裝置,在設計視覺上也較容易保持原網站的形象完整性,在後台的維護以及管理上也較為方便,SEO上RWD網站也比一般網站更能被搜尋到,在google 搜尋規則中已被證實。   二、使用大圖片取代過多的文字內容 手機越來越發達的情況,讓人們在使用手機時,是一種視覺上的享受,而不是過多的文字內容,使用一張好看的圖片勝過滿滿的文字,網頁設計師更能在圖片與文字做調整,而不是只有單純的文案排版。     三、字體的大小使用 一般網頁所使用字體大小最小可以到12px,但近幾年來網路發達,各個年齡層皆具有使用者,為了讓各個使用者都能舒服的瀏覽網頁,在字體上就會較為大些,但在標題以及內文上,還是需要以圖示及顏色做區隔。     四、google web  font使用 在還沒安裝任何字體時,網頁文字都是使用基本的系統文字,近幾年google提供了許多遠端字體的服務,網頁設計師們也能透過此服務將設計的網頁更具美感又不受限,目前英文字體已經是相當多選擇的,相信在未來中文的選擇上也能夠佔一席之地。  五、滾動代替點擊 隨著智慧型手機越來越發達,人們的習慣已不是傳統點擊而是用手指平滑的方式瀏覽網頁,故在頁面的設計上已開始朝一頁式網頁發展,而不是過多的按鈕點擊進入,手機版網頁不像桌機版網頁容易找到連結的地方,因此容易造成觀看手機版網頁迷路的情況,進而關閉網頁造成網站跳出率高的情況,如何設計方便瀏覽的網頁需要設計師們深思熟慮過。   六、適當的留白空間 在設計網頁時常常遇到客戶覺得空白處太空,須將版面放得滿滿才不會浪費,有時空白處能將網頁的定位更為清楚,客戶們也能從中找到他們想要的東西,之後在維護上也好做調整較彈性。     設計師在針對每個客戶網站做設計時,須將自己扮演成客戶,當需要某件產品時,自己會希望該公司網頁是怎樣呈現才能方便瀏覽,這是在做好任何網頁時所必須面臨的重要課題。  
在以往的網頁設計過程中,字型的選擇並不多,即便設計師選擇了特定的字體,若使用者沒有安裝,仍然無法順利觀看。若在必須使用更美觀的字體的情況下,就得製成圖片,但這不僅會造成檔案變大,對於SEO的搜尋更是不利。而Web Fonts的出現便替廣大網頁設計師解決這個問題,不必再擔心因使用者沒有安裝該字體而導致與預期不一的效果。 以英文的Web Fonts來說,最有名絕對非Google Fonts莫屬,Google Fonts是一套開放且免費的資源網站。   第一步:進入Google Fonts網站,點選想用的字型,並可依需求選擇想要的字型樣式、大小變化等。     第二步:點選右上角「select this font」   第三步:會滑出新視窗,複製原始碼及CSS即可,也可下載至個人電腦。   另外,Google Fonts也提供中文字體,目前有五款可選擇:圓體、楷體、仿宋體、黑體、明體。 https://fonts.google.com/earlyaccess 進入網站後按ctrl+F搜尋「Chinese Traditional」即可找到這些字體。   Google Fonts目前已擁有809種字型,提供線上預覽讓您即時瀏覽任何想輸入的文字,並可自由選擇字體大小與粗斜體等變化的預覽效果,也可下載於私人電腦觀看,這讓網頁設計師能不再侷限於系統內建字型,使用者也不必再安裝該字型檔案,便可享受最原始的設計,所以瞭解Google fonts的使用,對網頁設計師來說絕對是一絕佳利器。
      隨著主流瀏覽器不斷地更新與進步,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的發展指日可待。  
什麼是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會是你的好選擇。  
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),也需要設計。記住:沒有內容,就沒有設計。雖然麥可魯漢說──媒體本身就是訊息,但是設計本身卻不是內容。 只有整合才能讓三項能力發揮,一個網站要如何擁有這三項能力呢?招募:這三項的人才,分開來找其實都不難。 工作:要讓這三組團隊分別運作,也很簡單。 管理:想要領導這三個團隊分別做各自的專長,還算容易。 但是這樣就夠了嗎?當然是不夠的。目前台灣幾乎百分之百的大型商業網站都具備了這三項能力,但為什麼網站始終不勝理想呢?原因在於:所有的網站都將這三項能力分別運作,而沒有任何職務能夠讓內容與設計、設計與技術、技術與內容,甚至這三項能力整合在一起。除了無法在網站上發揮網路媒體的特效,同時也浪費寶貴的人力資源與投資人的錢!有的網站花了很多錢,但看起來還是很像報紙!想想看是為什麼!