網頁設計的專業首選

   HTML本身是一個網頁頁面的架構，是超文件標示語言(HyperText Markup Language，簡稱為HTML)，它具有超文字(HyperText)、超連結(HyperLink)、超媒體(HyperMedia)的特性。  隨著網路環境的快速發展及行動裝置的出現，因此網站的結構也不斷的演進，Html5與html最大的差異在於寫法的改變，新增許多元素加強文章結構的明確性，例如以往版本的HTML4有 這樣的表示方式，主要是利用 區分文件各個部分，然而HTML5中，許多常用的功能有了自己的標籤，例如＜audio＞＜/audio＞和＜video＞＜/video＞標記，使插入聲音和影片變得更簡單，使用的語意標籤取代不具意義的 所構成的HTML文件，來協助我們做到更好的語義架構，讓開發者更容易閱讀，也更容易讓搜尋引擎能快速了解網頁的重點。     HTML4標籤 HTML5標籤 說明     ＜header＞ ＜/header＞ 位於網頁頁面頂部，放置網站的LOGO、大標題或主要資訊     ＜nav＞＜/nav＞ 放置網站的連結或選單     ＜section id="”main”"＞＜/section＞ 文章內容可以有很多個＜section＞＜/section＞，用於章節或標題的段落區分     ＜aside＞＜/aside＞ 放置側邊攔     ＜footer＞＜/footer＞ 位於網頁頁面的底部，大多用於顯示著作權、作者或相關資訊等    

    SSL 與 HTTPS 的相關性，本站先前針對 HTTP 與 HTTPS 的差異討論過淺談網址 HTTP 與 HTTPS 的差別，其實 HTTPS 就是在原本的 HTTP 協定中延伸加入 SSL 憑證的安全連線技術，隨著網路的發達，資訊技術越來越透明，HTTP 的開放明文顯得在網際網路中，不再是這麼安全的傳送協定，知名企業網站及全球級大型網站 Google、Facebook 等皆採用 HTTPS 加密，作為預設連線方式，因此也針對在有使用者登入系統或或存取到機密敏感資料頁面等有建立會員、購物車、金流、刷卡機制服務的網站選擇使用HTTPS的傳送協定。          HTTPS 網站傳輸安全協定，主要是由網景公司( Netscape )開發並內建於其瀏覽器中，之後廣泛發展於網際網路上，用於對資料進行壓縮傳輸及傳輸後解壓縮回正確資訊的操作。HTTPS 是以安全為目的得 HTTP 通道，經由網站傳輸協定進行通訊和利用 SSL/TLS 憑證來加密封包，簡單來說就是 HTTP 的進階安全版，由 HTTP 下加入 SSL/TLS 層作為安全基礎。          SSL/TLS  (安全通訊端層) 憑證是網頁伺服器和瀏覽器之間以加解密方式溝通的安全技術標準，透過憑證內的公開金鑰加密資料傳輸至伺服器端，伺服器端用私密金鑰解密來證明自己的身份，取得有效憑證後在網際網路上傳輸加密過的資料以達到資安的目的。          透過 HTTP 下加入 SSL/TLS 層作為安全基礎的 HTTPS ，是網頁伺服器和瀏覽器之間以加解密方式溝通的安全技術標準，通信任務內含網路瀏覽、電子信件、際網路傳真、即時訊息、VoIP和等等其它資料傳輸，這個溝通過程能有效確保了所有在伺服器與瀏覽器之間通過資料的私密性與完整性，而 SSL 是一個企業級標準，用來保護網站與客戶的線上交易資訊，所以為了使用 SSL/TLS 安全連結，一個網頁伺服器便需要一個具有公信力的有效的憑證。  

   19.Template Monster http://www.templatemonster.com/    Template Monster是全球知名的版型套用網站，版型應有盡有，分類也相當詳細，每個範本內容提供完整，包括PSD、字型等原始檔案。也可以對每件作品評分並加入收藏。   20.Duda https://www.dudamobile.com/responsive-website/templates   Duda是一款為專家與小企業服務的網站建立平台，網頁設計簡單明亮，提供的版型有企業、餐廳、一頁式等多項類別，也能以顏色作搜尋。       21.Jimdo http://www.jimdo.com/templates/   Jimdo是自助建站服務，讓不懂網頁的人也能輕鬆建立屬於他的個人網站，高品質的作品對於設計師來說也是啟發靈感的優良來源。網站上方以醒目的精美大圖搭配，類別有商店、企業、個人網頁等等。

 現今網際網路技術發展快速，許多資訊越來越透明，相對駭客破解密碼的技術也越來越高明，面對這樣的情況，密碼的安全編制與加密就不能像以往早期的這麼簡易，跟著安全技術的演進，我們可以大約瞭解大多數的密碼儲存有底下幾種方式 １.  明文儲存 明文就是沒有加密的文字，密碼採用明文傳輸或存放，駭客只要有監聽或入侵伺服器的動作，那麼駭客就能輕易的取走了所有人的密碼。將會有很多安全風險。 ２.  對稱式加密演算法加密後儲存 對稱式加密是透過相同的金鑰來加、解密，如：DES、Triple DES、Rijndael（AES）等，即便是已加密過後的字串，但只要有人拿到加密的金鑰並依其可逆之特性還是能讓這些加密後的字串還原回來。 ３.  雜湊（Hash）加密後儲存 雜湊式加密為以往較多人使用的加密方法，如：MD5、SHA1、SHA256等為不可逆之演算法，不像對稱演算法可以靠程式運算還原內容，但經過多方研究後，如果透過對照表（Rainbow Table）還是有機會對照出原始密碼。 ４.  雜湊（Hash）並加鹽（Salt）加密後儲存 透過雜湊儲存密碼依然不夠安全，所以我們要再多加些鹽（Salt）來提升安全性，可以利用隨機函數產生Salt，這也是為了避免相同資料產生相同雜湊值。 加「鹽」（Salt）指的是，在密碼以雜湊（Hash）加密前，先在密碼的前面或後面或以特定規則於密碼中加入一些字元，而且這些被加入的字元以亂數產生，一方面增加密碼的長度，一方面因為這些字元是亂數產生，可大幅增加駭客破解的難度! 我們將原始密碼與鹽字元放在一起，明碼123456 + 鹽字元915430BB-165D-49A3-BAE3-329984CC47D3經過MD5雜湊後的結果是8775387801BDEE3123554D4EAE697C30，因密碼有用Salt且隨著鹽的複雜度增加，想利用Rainbow Table或自行撰寫程式等方式進行破解就更加有難度。                隨著網路平台日益發達，駭客攻擊手法也越來越多，如果可以一定要透過加密方式來保存機密資料以便保障使用者個資安全。  

 16.Squarespace http://www.squarespace.com/templates/   Squarespace是熱門的自助建站系統，版型設計都相當漂亮有質感，若有喜歡的可以點作品名前的愛心圖樣，會收集於左側欄的My Favorites裡，每個作品都有提供在不同的尺寸下的展示效果可供預覽。除了網頁版型以外，還提供許多樣式的平面圖樣讓你可以線上快速設計LOGO。   17.One Page Love https://onepagelove.com/templates/free-templates 作品以大量豐富的一頁式網頁設計為主，網站以灰為底色，各版型會標明免費跟需付費的價格，分類多樣化。   18.SF http://www.strangefruits.nl/   SF art&design portal是阿姆斯特丹一家網站工作室創立的網頁設計網站，整體版面乾淨俐落，可以用樣式、顏色、國家等類別來搜尋。

交易的基礎 網頁設計開發交易平台作業時，會將多項工作連繫在一起。如同應用程式正在執行兩項工作，一開始會在資料庫中建立新的表格，之後呼叫特定物件來收集與格式化資料，然後將資料插入新的表格中。這兩項工作都是相關的，在單一交易範圍內執行這兩項工作，會將這兩項工作強制串聯在一起。如果其中一項工作失敗，另一項工作就會復原至建立新表格之前的時間點，簡單來說，確保一組相關工作會全部成功或失敗。   資料庫系統最主要的操作就是存取資料庫中的資料，如果有多個存取操作要執行，且這些操作視無法分割的單位，則整個操作過程，對於資料庫系統是一個「交易」(Transaction)。   基本資料庫單元操作(Atomic Database Actions) 交易是將資料庫單元操作的集合，視為一個不可分割的邏輯單位(Logical Unit)。並且使用並行控制(Concurrency Control)和回復處理(Recovery)機制來保障交易能夠成功的執行。資料庫單元操作只有兩種：讀取和寫入。   交易狀態 交易是將多個資料庫單元操作視為同一個不可分割的邏輯單元，這些資料庫單元的操作，只有兩種結果：一種是全部執行完成；另一種就是通通不執行，不可能有執行一半的情形發生。  交易狀態的種類 ◎啟動狀態：當交易開始執行，就是進入啟動狀態的初始狀態，依序執行交易的讀取或寫入。 ◎部分確認交易狀態：當交易的最後一個單元操作執行完後，也就是交易結束，就進入部分確認交易狀態。 ◎確認交易狀態：在成功完成交易進入部分確認交易狀態後，還需要確認系統沒有錯誤，可以真正交資料寫入資料庫。 ◎失敗狀態：當發現交易不能繼續執行下去時，交易就進入失敗狀態，準備執行回復交易。 ◎放棄或中止狀態：交易需要回復到交易前的狀態，在取消所有寫入資料庫操作單元操作影響的資料後，就進入此狀態。 交易停止執行的原因 ◎交易成功：就是正常結束交易的執行，指交易的資料庫單元操作全部執行完成。 ◎交易失敗：交易失敗是放出放棄指令(Abort或Rollback)來結束交易的執行。 ◎放棄交易：交意本身因為條件錯誤，輸入錯誤資料或使用者操作而送出放棄指令來放棄交易的執行。 ◎中止交易：因為系統負載問題或死結情況，由資料庫管理系統送出放棄指令，讓交易進入中止狀態。 ◎交易未完成：交易可能因為系統錯誤、硬體錯誤或當機而停止交易執行，因為沒有送出放棄指令，此時交易是未完成的中斷狀態。  

13.Creative　Market https://creativemarket.com/templates/websites/popular Creative Market是一個提供設計資源的線上販售平台，每周會提供六個素材免費下載，除了網頁版型以外，還有其他如icon、照片、字型、筆刷、圖樣等素材，分類多元而豐富，不管是參考設計樣式還是付費使用素材都很方便。   14.CSS Clip http://cssclip.com/  CSS Clip網站的版面相比其他網站較為陽春，較特別的是網頁設計作品排版是以直排為主，有點類似pinterest，以彩度低的藍為底色，給予人沉穩印象，左方的色環可以自由選擇欲搜尋的網頁色調，相當便利。   15.Css Design Awards http://www.cssdesignawards.com/wotd-award-winners  Css Design Awards是網頁設計競賽平台，網站導覽列以黃紫強烈對比色作搭配，整體搶眼有力，評分項目有「創意與設計」、「程式與功能」、「可用性與內容」三大類。

1.InProc：預設儲存方式，所有的session都會被儲存進iis processs裡面，當更新web.config、bin目錄下的dll或iis 重啟時都會造成所有session被清除。 2.StateServer：將session儲存於ASP.NET 狀態服務裡面，使用此模式可以確保應用程式重啟時得以讓資訊保留下來。使用此模式時需確保ASP.NET 狀態服務（ASP.NET State Server）為啟用狀態。  並設定web.config <configuration>     <system.web>         <sessionState mode="StateServer" stateConnectionString="tcpip=localhost:42424"           timeout="20"/>     </system.web> </configuration> 3.SQLServer：儲存於SQL Server中，可以使用 Aspnet_regsql.exe 工具安裝資料庫（預設資料庫為ASPState），web.config設定如下 <configuration>     <system.web>         <sessionState mode="SQLServer" timeout="20" sqlConnectionString="Data Source=Server;Integrated-Security=SSPI;" />     </system.web> </configuration> 4.Custom：自訂一個儲存方式並使用此方式來存放session ※使用StateServer或SQLServer模式時，物件必須可序列化，只需要在類別前加上 [Serializable] 即可。  

10.Awwwards http://www.awwwards.com/websites/responsive-design/ Awwwards是一個內容豐富且十分知名的網頁設計線上評分平台，會邀請來自世界各地專業的設計師們組成評審團，對網站作品進行共同評分，因此經過評分的網站設計是相當具有參考價值的。   11.Web Design Clip http://www.webdesignclip.com/ 日本的網頁設計網站，以淺灰為底色，搜尋種類繁多，特別的是有以主色調、副色調、layout為主的類別，點進該網站截圖即可前往該網站或可選擇看詳細資料。右欄另有以各主題蒐集的網頁設計作品，以及介紹設計上好用的CSS等資料，非常方便。   12.CSS Drive http://www.cssdrive.com/ CSS Drive是一個色版產生器的網站，會分析各網站或圖片並製作出一個調色板，只要一滑到該網站截圖便會出現用色表，設計師可以藉由這些網站的用色啟發配色靈感。另外還提供了壓縮CSS的功能，使得寫出來的CSS更簡潔，是相當好用的工具。

 一般人並不會太注意網址開頭的http與https差異，甚至您會發現在Google瀏覽器Chrome上，網址連結為http開頭的網址還會將您自動縮寫，直接顯示http//後的連結網址。   但在網址連結上HTTP與HTTPS的差別不單單只是1個英文字S的差異，這僅一個字母S的差別卻代表了網站使用編碼協定的安全性(secure)，http://跟https://之間的不同在於網路文字傳送協定中標準的不同，您可以在Google瀏覽器Chrome上瞭解，在網址欄位上連結為https開始的網址會多顯示"安全"標示，讓您簡單的瞭解網站對於使用者的友善性。    http是網頁與您的電腦瀏覽器直接透過明文進行傳輸，以一般(非安全)模式下進行互動交談，所以在網際網路上內容有可能遭攔有心人士截竊聽的，HTTP協定不使用加密協定，其中原因包含：加密會多消耗許多運算資源，也會佔用更多的傳輸頻寬，而緩存機制跟著會失效。 反觀HTTPS協定，以保密為前提為研發，可以算是HTTP的進階安全版。是以加入SSL協定作為 安全憑證，因此網站透過協定上的加密機制後能夠防止資料竊取者就算攔截到了傳輸資訊卻也無法直接看到傳輸中的資料，也因此較大型有串聯金融信用機制會使用到較敏感度資料的企業網站多會選擇使用HTTPS協定，提供保障客戶在網站上的使用資訊。   現今隨著網路資訊的發達，技術資訊越來越透明，反觀卻增進了許多有心人士的好奇心，因此http的開放明文顯得在網際網路中，不再是這麼安全的傳送協定，所以也建議有建立會員、購物車、金流、刷卡機制服務的網站選擇使用HTTPS的傳送協定，如果對於這方面有興趣與疑問的情況下，歡迎大家可以更近一步瞭解SSL與HTTPS的相關性或使用聯絡我們與我們聯繫，將再詳細進解說。