網頁設計的專業首選

 7.Shopify https://themes.shopify.com/?price=&sortby=date+desc Shopify是相當著名的電子商務平台網站，操作容易且快速的開店系統，加上提供了千變萬化的網頁設計範本，為賣家打造具有完整功能且設計美觀的電子商店，設計師可從中學習到購物網站的視覺設計元素與編排，例如高質感照片的使用與適當的排版留白等等。   8. W-Finder http://w-finder.com/ 日本的網頁設計網站，右欄排滿各式各樣的作品截圖，只要一點擊便可直接進入該網站，截圖右下角置有愛心圖示，若喜歡該作品的話可點擊收藏，收藏的作品會集中於左欄的「favorite」中。搜尋分有「種類」、「產業」、「風格」、「顏色」四大類。   9. 品網 http://bbs.blueidea.com/pages.php   中國大陸的網頁設計網站，由於該網站使用的是簡體中文，相較於其他眾多外國網站，對我們而言，在閱讀和搜尋方面親切易懂許多。搜尋類別以內容、技術、顏色、國家為主。  

為何需要驗證碼? 現在網路上有許多功能必須要使用表單填入，因此網際網路上也越來越多暴力破解等其他網路機器人方式進行不斷的登陸嘗試，要如何避免防止被有心人士或網路機器人工具惡意註冊或者惡意填入大量垃圾資料，此時必須在加一道安全防護來避免，才能確保網站順利運作。 CAPTCHA 全名為「全自動區分電腦和人類的圖靈測試(Completely Automated Public Turing test to tell Computers and Humans Apart)」。在 CAPTCHA 測試中，作為伺服器的電腦會自動生成一個問題由用戶來解答。這個問題可以由電腦生成並評判，但是必須只有人類才能解答。由於電腦無法解答 CAPTCHA 的問題，所以回答出問題的用戶就可以被認為是人類。簡單的定義：「此問題必須只有人類才能解答，由於電腦無法回答出來，所以回答出正確答案的使用者就被認為是人類。」   驗證碼是在阻擋惡意機器人，還是增加使用者的麻煩 驗證碼技術是一種電腦技術發展下的矛盾產物，人類渴望電腦能夠通過自動化的過程完成更多的任務，卻同樣要防止電腦被利用在破壞與惡意的用途當中，從各方面來說驗證碼是為了防衛惡意機器人的入侵，但某種程度上對使用者來說仍造成不小的困擾，像是驗證碼常出現的「0（零）」跟「o（歐）」或是「1」跟「l」常常讓人無從分辨。在科技日新月異的現在，驗證碼漸漸以另一種更友善的形式存在，有如Siri等人工智慧領域的研究成果越來越先進，電腦將變得越來越通情達。   No CAPTCHA 在科技日新月異下，機器人也慢慢看得懂驗證碼了，根據Google研究，現在最高科技的人工智慧技術，可以讓機器辨識出 CAPTCHA 驗證碼內容，而且準確率可以到達99.8%，已經比真正的人類還更能看懂驗證碼了。 Google推出的No CAPTCHA不需要經過難解的扭曲文字照片，就能讓網站辨識出目前的使用者是真正的人，而非機器人。對於使用者來說，看到驗證碼時，只要「勾選」我不是機器人， Google就能判斷你是否為真人。     驗證碼的必要性 驗證碼已經漸漸融入各種網頁中，阻擋壞人進入，只讓好人通行的驗證碼漸漸的開始有被破解的危機，各大網站也開始慢慢研發不同樣式的驗證碼，但是驗證碼最初的用意是防止被惡意機器人的入侵，隨者人工智慧領域的研究成果越來越先進、驗證碼的升級，對使用者來說驗證碼漸漸以另一種更友善的形式存在，我們利用比較簡易的方式實現了這個功能。不再是麻煩的操作，對網際網路來說這個功能是具有有必要性，也很重要的安全指標。

 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 type="text/javascript"＞標籤做些防範。 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"＞＜/customerrors＞    

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的使用，對網頁設計師來說絕對是一絕佳利器。