文章專區

最新網頁設計文章

 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網站作品,使用介面乾淨明瞭。
SQL Injection 是網站系統中經常遇到的安全問題之一,利用SQL指令插入到表單並藉由特殊字元改變SQL語法結構,當這樣的命令被執行時攻擊者就可以直接對資料庫進行任何的動作。   假設現在有一個會員登入功能的網站,使用者登入時必須要驗證帳號、密碼,CommandText為「"select  *  from  member  where  account = '"  +  Request.Form["account"]  +  "'  and  password  =  '"  +  Request.Form["password"]  +  "'"」,帳號輸入「' or 1 = 1 --」,密碼隨意輸入,此時的指令就變成了「"select  *  from  member  where  account  =  ''  or  1=1 -- and  password = ''  "」,因為「--」為註解意思所以後半部的判斷式將不會被執行,而 1 = 1恆成立故駭客也就可以輕鬆登入。   SQL 攻擊就是如此簡單,僅需短短的指令就整個資料庫有極大的威脅,透過底下的防範方式可減少資料庫的傷害。     1.存取資料庫時給予帳號不同的權限   不應使用sa或是含有db_owner權限的帳號,如非必要不要賦予Create、Drop、Truncate table權限,可將成員資格限定為「db_datareader」、「db_datawriter」,   甚至可單獨對每個物件限定使用權限,但此種作法也比較累人就是。     2.過濾輸入的內容 在還沒有進行查詢前先把傳入的特殊符號如單引號(‘)、註解符號(--)、分號(;)過濾掉,亦可針對HTML或<script>標籤做些防範。 3.使用參數化查詢 存取資料時輸入的資料不是動態結合到SQL指令,而是透過參數來給值,資料庫在編譯SQL指令後才會套用參數。 SqlCommand cmd = new SqlCommand("select * from member where Account = @Account and Password = @Password", conn); cmd.Parameters.AddWithValue("Account", "admin"); cmd.Parameters.AddWithValue("Password", "admin"); conn.Open(); cmd.ExecuteNonQuery(); conn.Close(); 4.不要將錯誤訊息顯示於頁面上 如將 customErrors設定為off,頁面出錯時會直接把錯誤訊息顯示出來,那麼駭客就能利用這些漏洞攻擊。應建立錯誤頁面,並在網站發生錯誤時導向至該頁面 <customErrors mode="RemoteOnly" defaultRedirect="~/ErrorPages/ Error.aspx"/>    
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和種類讓搜尋上更便利。  
      ASP為撰寫網頁程式的一種語言,使用環境需要架設IIS來模擬所需要的環境,為早期發網頁的主要語言,在日新月異的科技時代,眾多其他語言如雨後出筍般的出現,一來是為了能讓開發者能夠更快速或是更容易的撰寫出網頁,而有好的一面也會反映出不好的一面,當兩個不同的程式語言要呼相溝通時,這時候就會有困難,這時後你可能會知道有網路服務、Web Service等這些字眼。        什麼是Web Service?說實在可能每個工程師的解釋都不同,Web service算是一個軟體的服務元件,它透過標準的Web通訊協定及資料格式的共同標準來顯示,如像是HTTP或是SOAP等的應用服務提供溝、傳遞資料。說得有些模糊簡單講就是它是一個提供服務元件,它是以Web的資料開放標準。         以Web資料開放標準來制訂好處,能夠被廣泛的其他Web服務來使用,相對上具有良好的溝通性及支援性,能在不同平台上的語言能夠互相的傳遞、接收及回傳訊息,假設我們是製作一個旅行社的旅遊網站,網站本身除了自己的一些行程之外,有時候會包含了一些機場航班查詢、異地時間查詢及當地天氣等查詢服務,透過Web Service服務使用,不需要擔心上面提到的服務是使用什麼平台,對程式設計師而言,能夠輕易的將服務串接起來,可以快速輕鬆的將系統建置起來。Web Service基本架構是HTTP和XML,而核心元件是XML、SOAP、WSDL和UDDI,每個元件的詳細介紹及應用就不在此敘述。   以下範例由ASP簡單傳遞資料給Web Service及接收回傳資料:  '透過物件將參數宣告SOAP格式 Set oClient = Server.CreateObject("MSSOAP.SoapClient30") oClient.ClientProperty("ServerHTTPRequest") = True   '服務位置 ASPNetWebServiceUrl = "http://127.0.0.1/WebService.asmx" oClient.MSSoapInit ASPNetWebServiceUrl   '使用Web Service中的某個服務名稱及填入要傳遞的資料 '回傳訊息將會回給invoicenumber invoicenumber = oClient.function_name(data_xml)  
 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、線上金流、報表輸出等功能的網站之後,網站管理員不用在使用傳統的方法一頁一頁編輯網頁內容這種沒有效率的作法,而是撰寫出一套後台管理系統給網站管理員維護,算是一個網站成型的前置作業,而操作上也必須很好上手,能夠快速有效的管理整個網站。  
 在現今以行動裝置為主的世代中,傳統的網頁已漸漸無法滿足行動裝置對於網站瀏覽的特殊需求了 。 行動裝置包含:智慧型手機、平版電腦、簡易型電腦、隨身型影音播放器等等。 在行動裝置瀏覽時會有以下限制: 頻寬的限制:行動裝置所使用的行動網路並不像傳統使用的有線/寬頻網路一樣,可提供可靠且穩定的網路傳輸。在行動網路的條件下,頻寬的變動是非常大的。 運算效能的限制:行動裝置通常在有限的電力環境下,無法提供高效能且長時間的運算效能。因此,傳統網頁設計出來的頁面往往會因特效的關係,耗用大量的運算, 造成裝置電力的過度耗損、溫度過高、效能下降等可能的情形。 儲存空間的限制:行動裝置目前提供的硬體儲存空間相對於個人電腦來說都是相對小的,且行動裝置的瀏置的瀏覽器可用的資源相較於個人電腦來說,也是相較不足的, 因此要在行動裝置中展現良好的使用者經驗的話,對於網頁設計上存取的資源也比需相對的管控。 瀏覽範圍的限制:行動裝置相對於個人電腦來說,可瀏覽的大小以目前來說為5吋~7吋左右的大小,如何在此限制下讓使用者有良好的瀏覽網頁的體驗也是相當重要的。   而Google對於此議題也有進行相當的研究,為了改善上面的問題,進而提出了AMP網頁的格式。   這樣的格式有其相較於傳統網頁設計上不同的格式規定。主要是站在加速網頁瀏覽器在生成(Render)頁面的速度,讓使用者有良好的瀏覽體驗。 主要的設計要領有下面幾個方向,自訂的HTML標籤、自訂的JS功能、禁止CSS外部載入,其他的細節可參考Google AMP網頁指南(https://support.google.com/webmasters/answer/6340290?hl=zh-Hant)。   如果我們在原本的網站中加入了AMP網頁,對我們會有什麼好處? 由於Google本身是搜尋引擎的提供者,對於有製作AMP網頁的網站會進行收錄的動作,接著由於AMP網頁在行動裝置的瀏覽體驗會比傳統網頁設計的頁面來的高, 因此對於行動版的搜尋引擎的效果會有相當的幫助。   一化網頁設計,身為專業的客制化網頁設計廠商。目前提供AMP網頁設計的專業規劃,若您對此有興趣的話,歡迎使用下方的聯絡我們與我們詳談。
 隨著科技越來越進步,各個瀏覽器不斷的更新及多元,各種設計花樣也越來越多,利用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的發展指日可待。  
  早期瀏覽網頁主要是以一般家用電腦或筆記型電腦為主,在製作網頁時會以固定寬度來設計頁面的大小,然而隨著平板電腦與智慧型手機的普及,以及新裝置的出現,響應式網頁設計的觀念被引進,讓網站能夠針對不同裝置的螢幕顯示適合其尺寸的網站內容。   由於新裝置的出現改變了上網的習慣,根據調查顯示,現今約有80%的網路使用者都使用智慧型手機上網,此數據證明行動搜尋超過桌上型搜尋了!     目前Google有近半數的搜尋是透過行動裝置進行,Google宣布改變全球手機版搜尋結果的排序方式-若網站所提供的介面是能夠針對裝置的螢幕作出回應,並且以適合於該螢幕尺寸的方式顯示其網站內容,其被搜尋到的機率將比非行動版的傳統網站更高、排名更前面。在這樣的調整之下,無法針對裝置作出回應的網站曝光率與訪客流量將受到大幅影響,其網站在搜尋結果的排名將大幅下跌。    而為什麼搜尋引擎會對響應式網站(RWD)給予較高的分數?   1.使用單一網址,集中流量,提升排名 響應式網頁設計的好處在於不管是手機還是平板都是使用一樣的網址,集中網站流量,提升搜尋引擎的排名,與手機版網站不同。以Google來說,網址不同但內容相同的情況下,雖不會將該網站列為惡意連結,但仍會影響評價(Page Ranking)。   2.絕佳的瀏覽動線,降低網頁跳出率 若是用手機看一般網站的話,必須放大縮小才能看到自己想要的資訊,很容易造成使用者跳出率增高,進而被認為該網站不是最佳的搜尋效果,排名也會跟著降低。而RWD對於SEO的優勢除了增加流量以外,還降低了網頁的跳出率,不論是哪種螢幕尺寸皆有最佳的瀏覽動線,不會因為瀏覽畫面的不方便而直接跳出。   3.電腦和手機資料同步更新 由於RWD使用的是同一個後台,因此更新時亦會同步更新,而手機版與電腦版因為是不同的後台,因此更新時須更新兩次。若只更新其中一方,如此一來電腦版用戶與手機版用戶所看到的資訊是不同的,也會造成消費者的困擾。