文章專區

最新網頁設計文章

 在網頁設計上,若是希望圖片或文字呈現在一定的範圍內的話,便可以透過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.
 GDPR( General Data Protection Regulation,歐盟通用資料保護規則),即將在2018年5月25日生效,面對全球化行銷的市場趨勢,網頁站台技術,帶領人們打破了時間、空間、距離的限制,在這樣無遠弗屆的全球化資訊技術當中,網頁站台們勢必是無法避免需要正視 GDPR 的,除了歐盟28個成員國對全球資訊網舉足輕重的規章,個資隱私保護同時也是全球網際網路發展長年以來備受重視的議題,因此瞭解其中定義與規則也成了網站營運、設計、管理的重要方針。    GDPR 詳細定義了資料保護規則的細節,由主要的目標「個資隱私保護」作為延伸立法,在此我們也將對網站營運較為直接關係的其中幾項進行舉例,如:   1.企業必須保障獲取的資料安全且須負起法律責任。   2.徵求使用者的同意才能對其個資行進行蒐集或應用。   3.個資外洩必須在 72 小時內通報相關保護主管機關。   4.增加被遺忘、刪除、調閱權權利,將不相關或過期的資訊移除相關連結應用。   5.個資保護系統預設隱私保護,如網站 https 加密連線。   6.提高相關保護罰則金額,警惕企業遵守法規。   從以上與站台較為直接的規定來看,或許現行許多網站未能達到相關標章,但永續經營、持續進步便是網站營運的準則,對於相關改善方法與實際應用,本站也將會持續分享提供給大家參考,若有針對相關議題需要說明與協助的地方,也歡迎透過語音通話或聯絡我們與本站聯繫協助。        
 之前的文章Flexslider--方便好用的圖片輪播、滑動切換套件介紹了Flexslider此套件,主要是以一張張圖片作輪播,而這次我們介紹另一套可以多組圖片輪播切換的套件,可應用於更多張圖片的展示。 此套件必須包含slick.js、jquery.min.js、slick.css、slick-theme.css這些檔案 可於slick官網下載,官網上更是陳列了許多項不同的輪播樣式,附上原始碼可以複製貼上。 詳細使用步驟如下: 首先到官網,點擊上方的「get it now」   頁面會滑到該對應位置,點擊「Download Now」即可下載壓縮檔,或是選擇直接複製外連網站的連結。   官網上展示了許多樣式,提供下方的原始碼複製貼上。   解壓後的檔案,只要點進名稱為「slick」的資料夾即可找到需要的js和css檔了唷!放進自己的專案裡,依據自身需求修改檔案路徑和設定即可套用了。