網頁設計的專業首選

網站瀏覽與社群聯繫的應用佔據了全球大部分的流量，因此社群網站也逐漸跟一般網站進行相容結合，我們介紹過一般網站可以經由 Facebook meta 設定資訊的升級與整合後，分享功能將頁面連結訊息轉載至Facebook中，讓原本是不同領域的網站社群卻能在相互應用後能夠互相豐富彼此的資源。   原先我們所介紹一般網站進行的分享是透過 Facebook meta 資訊的加入，使頁面連結在轉貼至 Facebook 時，能夠提供貼文抓取頁面相關資訊進行呈現，隨著 Facebook 應用的普及與便利，也提供了網站直接鑲嵌按讚與分享的功能，讓使用者不再需要透過額外剪貼頁面連結資訊就能進行相關操作，達到輕鬆、快速分享按讚服務，至於網站該如何取得相關鑲嵌功能， Facebook 也貼心的提供了"讚、分享按鈕編碼產生網站"，讓站台管理人員們能夠快速、方便的設定按鍵資訊，以下也將針對設定做進行簡單的說明。     進入"讚、分享按鈕編碼產生網站"時，我們可以填入指定的頁面網址進行設定的動作，當中能夠選擇按鈕的寬度、版面、動作、大小等資訊來產生連結的程式碼。   在選擇好相關欄位資訊後，我們按下取得程式碼，就能得到我們所需要的程式碼資訊。   在取得按鈕程式碼資訊後，我們可以根據 facebook 所提供的完整範例來進行設定，分別是先前提過的 meta 資訊的加入與按鈕擺放連結設定。   這邊將特別補充，一般站台內容的頁面資訊眾多，不可能透過此產生網站一一產生置入，因次可以透過相同版型的頁面進行第一次的編碼產生，在根據網址帶入欄位來程式判別化帶入不同的頁面資訊，就能一次完成大量的頁面按鈕功能。

以前在網頁裡加上三角形需使用圖片方式加入， 然而現在可以直接用CSS設計出想要的三角形了，而且語法相當簡潔。 主要會用到的就是邊框（border）概念， 一個元素會有四個邊框，每個邊框之間會呈現45度角，   於是利用這項特性，讓其中一個邊框消失，對稱的兩邊用相同的顏色， 如此一來就可以形成三角形了。 See the Pen PBZmWb by Ya (@bok770) on CodePen.   範例： See the Pen oMbWXr by Ya (@bok770) on CodePen.

 在網頁設計上，若是希望圖片或文字呈現在一定的範圍內的話，便可以透過CSS的overflow屬性，讓文字與圖片排在固定的範圍內，若超出設定的範圍，會自動變成捲軸的形式，有助於控制版面的編排。 設定值如下： overflow: auto－自動使用捲軸，當文字超出範圍時才會出現捲軸 See the Pen pZJpbr by Ya (@bok770) on CodePen.      overflow:visible－文字或圖片會直接超出範圍，不使用捲軸。 See the Pen xJGpEy by Ya (@bok770) on CodePen.       overflow:hidden－自動隱藏超出的文字或圖片。 See the Pen yqNpVz by Ya (@bok770) on CodePen.   overflow:scroll－不管文字有無超出範圍都會自動產生捲軸 See the Pen RBPxKw by Ya (@bok770) on CodePen.     overflow:inherit－繼承父元素 See the Pen JBdMEw by Ya (@bok770) on CodePen.

在資訊發達，網路生活化的現今，越來越多的商家與企業都加入了廣大的網路市場，因此同種服務在搜尋引擎上，您可能會看見眾多同業分散各地在提供相關服務，排除規模較大型的企業與連鎖商家能夠提供跨區服務之外，其實許多的公司行號商家偏向服務在地客戶，在之前也介紹過網站在地化經營、行銷的優勢，因此當客戶在選擇消費商家時也會將地區、距離、路程列入考量範圍，甚至先以地區別優先來尋找服務，而搜尋引擎也進步發展得越來越人性化，在地圖資訊上提供了商家的登錄、導航與距離優先推薦來貼近商家和消費者，達到高端的人性化服務。   瞭解了在地化的趨勢後，許多商家製作網站時，雖然有置入地址資訊，但在 Google 地圖 (Google map)當中，並不會全部自動登錄記載，因此就必須由商家自行進行登錄、管理動作，而本次也將針對商家登錄 Google 地圖 資訊進行簡易說明。   透過 Google 地圖所提供「我的商家」我們能進行進行登錄動作。  根據商家行號名稱進行填入 設定商家行號地址提供地圖登錄 告知商家行號的服務類別，此部分輸入部分關鍵字後，會顯示 Google 預設的相關選項來進行歸類 提供商家的網站與電話聯絡方式方便客戶聯繫 在登錄後 Google 也會針對相關應用以信件方式進行建議，此部分可以選擇需要或不要 在填入以上相關資訊後，便是要針對商家行號的管理人真實性進行管理驗證確認，在完成驗證後就能對您所登錄的商家地標資訊進行管理

一個網站設計上使用數個特效是常態，然而要根據不同的特效分別插入不同的插件，可能會稍嫌累贅，而且有時還會發生插件之間衝突的情況。而這次介紹的jQuery .superSlide.js，是將網頁上常見的特效都統一歸到同一支js裡，常見的大圖輪播、頁籤切換、圖片滾動等特效，都可以直接用這支js實現！讓你不用特別為每個特效分別搜尋所需的插件，也不用擔心數個插件有代碼衝突的問題，相當方便管理。 首先到官網下載套件：http://www.superslide2.com/   「基礎效果」頁面有特效的範例和常用參數的設定 http://www.superslide2.com/demo.html 可以直接在該頁面選擇數值，預覽呈現的效果。 如下圖為頁籤切換的特效，右邊列有效果(fade)、觸發方式(trigger)、效果速度(delayTime)等的參數設定，可以依自己的需求做設定   而隨著設定值的不同，下方當前調用代碼的寫法也會不同，可以直接複製到自己的專案裡。   「查看參數」頁面可以一覽Superslide可以設定的參數 http://www.superslide2.com/param.html

 就在今年 2018 年的5月份，Google  在官方網站上正式發布了 HTTPS 的基本安全指標化，明確的說明了將在今年的九月份依照 HTTPS 安全協定實施為基本指標化認定。本站先前分享過 Google 優先收錄 HTTPS 的安全網站特性，其中也提到了 Chrome 瀏覽器針對網站連線的協定分成了：安全、不安全、危險，3種明確標示來提醒使用者應用。   在 Google 官方發布這項公告前，Chrome 瀏覽器都只是額外將有使用 HTTPS 加密連線的網站標示為安全網站，但這次的公告中卻明白的告知了大眾，以往額外標註的 HTTPS 安全標示將會剔除使用!取而代之的是直接認定 HTTPS 為網站連線安全的「基本傳輸協定」，如果不是使用 HTTPS 加密連線技術的網站，將直接標示為「不安全性」來提醒使用者應用，算是很明確認定了 HTTPS 在網站基礎應用的必要性。   從2017年開始 Google 便開始推廣了網連線由原本的 HTTP 升級為 HTTPS ，從這樣的推廣過程中，站台設計、維護技術的應用也持續的提升進步，由 Google 統計在Windows 瀏覽器中 HTTPS 推廣至現今的普及率達到了 80% 以上，從這樣的成效上來看，Google 本次的公告也將帶領網站安全傳輸技術進入新的指標，讓所有的使用者能夠得到跟多安全的使用保障，面對 HTTPS 全面化應用的來臨，您的網站是否準備好了呢? 如果有您 HTTPS 申請、設定、應用上的疑問，歡迎盡速與本站連絡，本站將會誠摯地為您打造全面性的安全服務。  

當滑鼠移到圖片上會有放大的效果，這在網頁設計上是很常見的，而這效果用CSS就可以做出來了唷！ transform可以設定圖片放大的倍率，   transition可以做出圖片緩慢放大的效果， 而滑鼠移入所產生的變化要用:hover來實現。  外面的框設定overflow:hidden是為了隱藏在圖片放大時超出的部分， transform: scale(1.1)為圖片放大的倍率 transition:all 0.5s ease 0s為圖片放大所需的時間和特效 範例： See the Pen gKQjOy by Ya (@bok770) on CodePen.

在網站長期經營的情況中，管理人員們常會遇到網站內容的擴編、新增、重新排列或頁面移除等調整，本站先前針對了更換網址及網站改版等多種情況，簡單歸類出了「永久性轉址」和「暫時性轉址」，當中所包含的技術，如：301轉址(永久)、302轉址(暫時)、IIS轉址(進階)、DNS轉址(網域)。都能夠有效協助頁面達成「一對一」及網站「開發後應用」性質的轉址功能；而本次將為大家再介紹一項較為獨樹一格的轉址功能，就是允許相同頁面內容同時並存在的「多對一」集中性「Canonical 轉址」。    「Canonical 轉址」是在2009年12月Google與其他搜尋引擎共同發表"整合重複的網址"來解決過多重複性內容頁面的判別標籤，也屬於永久性轉址的歸類，其「多對一」及「開發前應用」的轉址特性卻有別於先前所有介紹的多項轉址技術，以往的轉址模式通常用於網站開發完成後，需要協助改版、更換網址、更換協定等應用，但「Canonical 轉址」特別的「開發前應用」則可以解決在網站設計時，透過程式動態產生的網頁，同一個頁面往往會產生許多不同的網址的重複頁面問題，這種因單項產品細部規格或規範差異所以產生的多項網址參數，能方便快速的達到使用者良好瀏覽體驗，但過程所產生的重複性頁面很可能被搜尋引擎判定為過度重複內容，導致頁面遭排除收錄，甚至降低相關頁面權重收錄應用，為此「Canonical 轉址」的導向就能派上用場，將多項相似或相同內容頁面同時指向至指標的頁面來告知搜尋引擎緩解排除動作，甚至達到多個頁面加權累積頁面分數的效果。   Canonical 轉址應用：   將所有相同或近似的頁面標頭內加入canonical標籤，指向到主要的 "指標頁面"達到集中權重轉址的效果。   ＜link rel="canonical" href="指標的頁面(必須是絕對路徑包含hhttp或https的連結)" /＞   範例Ex： 同樣面頁擁有靜態化網址 與動態化網址 當頁面有兩種或以上的網址呈現，我們就能根據 canonical 標籤的應用，將動態化的網址指向靜態化的頁面，告知搜尋引擎累積權重

 在先前「淺談 GDPR 歐盟通用資料保護規則」時，我們瞭解到了由歐盟等地區從2018年5月25日，已經開始啟用實行相關的規範與法則，當中主要目標就是以「個資隱私保護」作為延伸保障，面對這樣全球化的趨勢，本次也將會針對大多數站台首要面臨的 Google Analytics 應用進行相關說明與範例調整。   如同本站原先所介紹 Google Analytics 是現行較為主流且完整的流量統計分析工具，相信大多數有持續經營的站台與站台管理人員對其皆不陌生，在 GDPR 還未宣告以前，Google Analytics 就一直扮演了網站經營分析的重要角色，提供了管理人員有效的站台經營報告，當中也包含了許多使用者的資訊、流量、行為、裝置、位置等數據分析統計，如今 GDPR 的推出，是否將會杜絕全球站台管理人員 Google Analytics 的應用呢? 答案是不會的! 因為 Google Analytics 根據 GDPR 列舉的相關條例提供了相關的改善的辦法，面對廣泛資料的統計進行了簡單卻實際的匿名化的辦法。   由 Google所發布的 IP Anonymization in Analytics 說明當中，能瞭解 IP 匿名化辦法主要是透過既有的資料追蹤編碼進行調整，經由遮蔽用戶IP末端定位碼來進行匿名化保護動作，在廣泛的追蹤項目中能持續統計也能兼備保障用戶的個人行為資訊，相關參考如下。   原先編碼：   <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script> <script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());   gtag('config', 'GA_TRACKING_ID'); </script>     透過 IP Anonymization 的方式將原先指令進行調整：   <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script> <script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());     gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true }); </script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());     gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true });   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());     gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true });

就像CSS的box-shadow可以幫區塊加上陰影一樣，CSS也有能用來幫文字上陰影的屬性－text-shadow。 可設定值如下： text-shadow:  h-shadow v-shadow blur spread color; h-shadow：水平位移距離 v-shadow：垂直位移距離 blur：模糊半徑 spread：擴散距離 color：顏色   範例： See the Pen gKoYLe by Ya (@bok770) on CodePen.    也可以運用此屬性達成以下效果：   光暈效果，只要將前兩個值(h-shadow、v-shadow)設為0即可。若要加強效果可多寫幾次。   See the Pen qKpWmR by Ya (@bok770) on CodePen.   文字輪廓 若有四個陰影，能夠為文字加一層輪廓。不過還可以用CSS另一個屬性text-stroke來呈現。   See the Pen NzXKyJ by Ya (@bok770) on CodePen.