網頁設計的專業首選

Elastislide是一款精美的響應式jquery圖片循環展示套件，類似底片的排列方式，水平垂直皆可，只要點其中一張圖片即可觀看大圖，實用而常見。 首先到https://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/下載壓縮檔，解壓縮後便會有此特效所需要的CSS和JS。 而此網站也提供了相關範例可以參考唷。https://tympanus.net/Development/Elastislide/   以下以Example 4 ( https://tympanus.net/Development/Elastislide/index4.html )為例。   HTML 前面放大的原圖，後面放排列的小圖。     CSS 直接放入elastislide.css、custom.css、demo.css的連結，別忘了修改檔案的路徑唷！ 若想修改樣式可更改demo.css內容的設定   JS 同css一樣放入以下連結：      

  根據資策會及全球許多具有公信力的網路平台、廣告公司等，都發表了關於行動裝置在網際網路中實際使用流量的佔有例已經超越了傳統桌上型或筆記型電腦裝置，根據多家網站線上品牌管理服務提供商，公佈2017全球網路使用裝置趨勢調查報告中指出，全球約有二分之一的人口擁有智慧型手機，超過一半以上網路流量是來自行動裝置，其中又以"網站瀏覽、社群聯繫、APP資訊應用"為主。    從使用者習慣與行動流量的分系報告中能瞭解，網站瀏覽與社群聯繫的應用佔據了全球大部分的流量，因此社群網站也逐漸跟一般網站進行相容結合，由最常見的例子：一般網站透過資訊的升級與整合後能透過分享功能將訊息轉載至Facebook中，可以從這樣的跨領域合作中發現，原本是不同領域的網站類型卻能在相互應用後能夠互相豐富彼此的資源，因此本次本站將簡單說明網站如何透過資訊升級與整合後能分享至Facebook的方法。    Facebook應用了傳統網站的meta資訊進行延伸讀取應用並分享至大眾社群，而傳統網站只需要在原有的meta資訊中加入對應 Facebook需要讀取的 Open Graph protocol 標記語言，相關資訊便能透過分享功能將自己的網站推廣至社群網站中，以下將示範說明需要加入的meta資訊：        <meta property="og:url"                content="https://原網站連結(ex：webdesigns).com" />     <meta property="og:type"               content="website" />     <meta property="og:locale"             content="zh_TW" />     <meta property="og:title"              content="網站標題" />     <meta property="og:description"        content="網站簡短文字說明。" />     <meta property="og:image"              content="縮圖的連結位置" />

在網頁設計上時常需要放許多內容，但是如果照實排列會使得版面顯得冗長，因此為了節省空間，許多網頁會使用Tab頁籤的展示方式，使用者點擊想看的標題(頁籤)，其下的內容就會展開，反之其他內容則會隱藏起來，因此可以自由選擇想看的內容來點擊進行切換，相當方便且常見。而這功能用jQuery再加上CSS美化便可以直接實現了！   1. 首先在最外圍設個div   2. 將要做的頁籤內容(即點擊後展開之內容)設個共用的class，並以id命名，以便之後製作頁籤可以各自對應其內容。 例如：   3. 之後用ul、li 製作頁籤，設a連結至該對應內容。 例如：   整體html   jQuery設定 裡面的class名稱換上自己的命名。   之後寫一些CSS加以美化，就是最基本的Tab頁籤切換效果囉！ 範例： See the Pen <a href='https://codepen.io/bok770/pen/qVYyvx/' _fcksavedurl='https://codepen.io/bok770/pen/qVYyvx/'>qVYyvx</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.

  Google 重視的 HTTPS ，Google在2017年的一月開始，針對網站是否加入 SSL安全憑證 的態度逐漸強勢影響 SEO 的發展趨勢，由本站先前分享過的"淺談網址 HTTP 與 HTTPS 的差別、SSL 與 HTTPS 的相關性"，當中介紹了 HTTPS 透過了 SSL安全憑證，能夠有效保障了網站與使用者在連線上的資訊安全。    因此全球最大的搜尋引擎企業 Google 為了保障使用者的資訊安全，對 HTTPS 協定技術也有著高度的重視性，由瀏覽器Chrome網址列上，針對網站是否使用 SSL 安全協定，明顯的標示了：安全、不安全、危險，3種不同資訊安全狀態，讓使用者們能由此直覺的瞭解決定是否停留觀看網站內容，透過 HTTPS 這項技術指標分類後，讓網際網路上，數以萬計的網站瞬間被明確歸類。    Google 除了透過瀏覽器顯示區分網站之外，更令 SEO優化必須要注意的重點在，搜尋引擎收錄程式將會針對有使用 HTTPS 協定的網站進行優先收錄排序得動作，簡單來說就是有SSL憑證的網站將很有機會比沒有憑證的網站搜尋排名來的好；除此之外，如果在收錄程式偵測完後發現網站內有需要使用會員帳號密碼做登入，卻沒有使用SSL安全憑證技術的網站，甚至可能會被搜尋排名剔除之外，從以上這些方面能夠瞭解，網站加入 SSL 安全憑證，是未來 SEO優化的重要趨勢，若要保持網站優良的呈現，也趕緊加入HTTPS的行列吧，若以上有相關疑問或 SSL安全平憑證的需求也歡迎聯絡我們，本站將會竭盡服務。

若在網頁製作時，預期頁面在載入時必須花較長時間時，通常會在等待網頁載入的期間加入一個loading的動畫圖示來表示，避免用戶誤以為網頁無回應而離開，若是圖示美觀有趣的話，甚至會吸引瀏覽者的注意力。   我們來介紹一個方便製作圖示的網站是loading.io( https://loading.io/)，是線上loading動畫圖示產生器，支援gif、SVG、CSS、APNG，尤其是SVG相較於gif檔案更小，圖案也較不失真，是很好的選擇，而APNG跟gif差在支援的色彩較多在表現上更豐富(24bit)，gif則只有8bit。   loading.io目前提供了許多圖示可以使用，快速又便利，有免費的跟付費的。   在設定上可以依自身需求調整右方的選項，依圖示的不同，可以調整的部分也有些許差異，除了最基本的色彩、尺寸、背景色和動畫速度之外，若一個圖示內含有好幾個物件，有的還可以調整各自的顏色，甚至是輪廓的設定也可以很自由，比如例子中的圖示，不僅可以調整方塊長寬的數量(Block Count)，還有方塊間的間隔(margin)、方塊的寬度(block width)，非常有彈性。   下載步驟如下：   首先選擇一個想要的圖示，依調整顏色、尺寸、動畫速度等等。 設定好之後按「download」即可下載，如前面所說有四種格式可挑選，之後就可以拿來自由使用了唷！   分別選擇四種格式下載後的檔案，十分快速方便！

   本站在先前的文章"DNS是什麼?"、"DNS基本資訊"中介紹過，在架設專屬的網站時，須要透過DNS網域名稱系統來進行網域名稱和網站地址及內容與電郵的設定，因此DNS資訊在網站架設環節中佔了十分重要的地位，也因為DNS有著對網站運作的舉足輕重性，所以DNS的安全性也成為了網路有心人士作為利用與攻擊的目標，本次將要分享的資訊便是近期"全球網域名稱管理機構(ICANN)"大為推管部署的 DNSSEC (網域名稱系統安全擴充)協定。     DNSSEC (Domain Name System Security Extensions 網域名稱系統安全擴充)協定，主要的設計目與原理是在原有的DNS資訊中，加入數位簽章的機制，網站連線發送端透過簽章所產生的加密金鑰來保障傳遞訊息的正確性，在接收端收到傳遞的訊息時，需要經由解析器來驗證還原資訊的完整性，進而確認了收發端雙方的資訊傳遞安全性，所以可以杜絕有心人士竄改DNS紀錄或冒用DNS紀錄發送錯誤資訊的風險，因此經由DNSSEC協定的技術，便能保障強化DNS的安全性。     由於 DNSSEC 運用的是"非對稱式密碼演算法"，對於資料的加解密作業將耗費更多的DNS主機資源，所以在原有的DNS系統上仍有許多瓶頸必須克服，因此尚未完全佈署，不過毋庸質疑的是 DNSSEC 協定技術能夠有效保障網站 DNS 的安全性，也受到各領域的支持，全球網域名稱管理機構(ICANN)也致力推廣，未來 DNSSEC 協定勢必將會普及，相信也將會帶領網站安全機制更邁向成功的一步。

通常我們在設計網頁切版時，很少會切不規則的形狀，但現在可以透過CSS設定來給圖片作多種形狀的繪製了唷！但是在數值的設定上太過複雜而難以上手怎麼辦呢？別擔心，有個線上繪製器可以直接使用喔！只要利用CSS clip-path maker設定clip-path屬性，就可輕鬆產出自己想要的形狀了唷！   首先我們到CSS clip-path maker網站：http://bennettfeely.com/clippy/   右邊有許多現成的幾何形狀可以選擇。   下方有尺寸的設定並提供了一些背景圖片做參考。   可以先在右邊填上尺寸，再選好想要的形狀後，依自己需求調整錨點以改變輪廓。   調整好了之後複製最下方的原始碼，加上尺寸(width和 height)的數值，就可以使用了。   範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/pdeoxb/' _fcksavedurl='https://codepen.io/bok770/pen/pdeoxb/'&gt;pdeoxb&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   利用此項線上工具可以對背景圖片快速地進行裁切，增添網頁設計上排版的趣味度和豐富性，不妨嘗試使用看看喔！  

   先前本站介紹了"代理/Proxy快取伺服器"技術，其中簡單的說明了代理快取伺服器的技術中大致分類為"正向代理(Proxy)快取"與"反向代理(Reverse Proxy)快取"兩種快取技術，而在先前的介紹中有提到了現行較為主流的反向代理技術逐漸取代了正向代理技術，主要原因就是反向代理技術由網站方加設，便能提供大眾使用者的便利，而其所主要應用的技術為 "內容傳遞網路-CDN(Content delivery network)"。     內容傳遞網路 - CDN (Content delivery network)，是一種在網路上的快取/暫存機制，主要由網站端進行設置；原本的連線模式為使用者直接對存放網站內容伺服器進行讀取，看似為正常的動作，但若是遇到網站伺服器存放在不同地區或是其他國境，使用者連線時將面臨多次網路中的橋接與交換，就會有網路壅塞與延遲和浪費流量的問題產生；因此 CDN 技術透過設置多台快取/暫存伺服器分散駐點在各國家與地區，將原本存放網站內容伺服器的靜態畫面資訊進行壓縮與暫存在各地的伺服器上，再根據使用者所連線的地區距離進行優先配對連線，進而達到短程高速且不浪費流量的快取/暫存連線技術。     由 CDN 技術的加入，各地快取/暫存的伺服器分散、減少了原本單一主機重複多次的讀取流量，也因為預先壓縮暫存，所以主要的網站伺服器短暫的當機，也不至於所有的用戶都不能連線，再加上多台快取伺服器分散各地，如同防護牆一般保護著原本存放網站內容的伺服器不至於遭駭客直接性的攻擊，是項保障使用者與站方的雙向友善性技術。  

在網頁設計時，有時會需要製作圖片互換的效果，只要用CSS就可以實現，還可以加入淺入淺出的動畫效果唷。 首先將兩張圖片透過定位(position)疊在一起，然後將原本顯示的圖片透明度數值設定成0，這樣滑入時就能看見疊在底下的圖片，如此一來，只需要少少程式碼，也無須寫JS，就可以達成簡單的圖片切換了。是不是很簡單呢？ HTML   CSS   成果如下 原本顯示如圖   滑入後切換第二張圖    例子： See the Pen &lt;a href='https://codepen.io/bok770/pen/yPejPN/' _fcksavedurl='https://codepen.io/bok770/pen/yPejPN/'&gt;yPejPN&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.

  先前透過快取我們瞭解了許多加速網站的方法，如："初識網站快取加速"、"代理/Proxy快取伺服器"、"瀏覽器快取/緩存技術-HTTP Cache"。本次希望介紹更進階的技術分享給大家，透過Google與中華電信的 DNS 主機IP 進行快取來加速網站讀取。由先前文章"DNS是什麼?"中我們能瞭解" DNS 網域名稱系統"是透過全球連線伺服器不斷的在進行擴散式的同步更新連線資訊的，因此在系統更新連線之前，便是使用快取緩存技術來確保原有的網站資訊來維持用戶的連線。     這邊提到Google與中華電信的 DNS 主機IP 與快取又有何關係呢?主要原因是在 DNS 同步資訊時會因為不同等級領域的主機有不同的更新等待時間，因此Google與中華電信友善的提供了他們較高權限更新的 DNS 主機 IP ，讓一般使用者在連線時能更快速掌握正確的網站位址，減少發生網站更動 DNS，卻因為 DNS 同步速度較慢的關係，出現找不到網站的情況，或是，使用距離比較近的 DNS 主機，更新就能得到比較快的回應，所以理解其原理了之後，已下將為大家介紹該如何設定，這部分相關資訊。   Google    DNS 主機IP為： 主要的慣用 8.8.8.8    與備援的 8.8.4.4   中華電信  DNS 主機IP為：  主要的慣用 168.95.1.1 與備援的 168.95.192.1     進入系統的"控制台"後，選擇"網路和網際網路"當中的"網路和共用中心"，將會發現"變更介面卡設定"，選擇真正上網使用的網路硬體，點選滑鼠右鍵，打開內容選單便能看見網路連線內容，針對 "網際網路通訊協定第4版(TCP/IPv4)"進行內容的調整，由原本的"自動取得DNS伺服器位置" 改變為"使用下列的 "DNS 伺服器位置，在針對慣用和備援的 IP 鍵入 便能生效。