文章專區

最新網頁設計文章

  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 <a href='https://codepen.io/bok770/pen/pdeoxb/' _fcksavedurl='https://codepen.io/bok770/pen/pdeoxb/'>pdeoxb</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>.   利用此項線上工具可以對背景圖片快速地進行裁切,增添網頁設計上排版的趣味度和豐富性,不妨嘗試使用看看喔!  
   先前本站介紹了"代理/Proxy快取伺服器"技術,其中簡單的說明了代理快取伺服器的技術中大致分類為"正向代理(Proxy)快取"與"反向代理(Reverse Proxy)快取"兩種快取技術,而在先前的介紹中有提到了現行較為主流的反向代理技術逐漸取代了正向代理技術,主要原因就是反向代理技術由網站方加設,便能提供大眾使用者的便利,而其所主要應用的技術為 "內容傳遞網路-CDN(Content delivery network)"。     內容傳遞網路 - CDN (Content delivery network),是一種在網路上的快取/暫存機制,主要由網站端進行設置;原本的連線模式為使用者直接對存放網站內容伺服器進行讀取,看似為正常的動作,但若是遇到網站伺服器存放在不同地區或是其他國境,使用者連線時將面臨多次網路中的橋接與交換,就會有網路壅塞與延遲和浪費流量的問題產生;因此 CDN 技術透過設置多台快取/暫存伺服器分散駐點在各國家與地區,將原本存放網站內容伺服器的靜態畫面資訊進行壓縮與暫存在各地的伺服器上,再根據使用者所連線的地區距離進行優先配對連線,進而達到短程高速且不浪費流量的快取/暫存連線技術。     由 CDN 技術的加入,各地快取/暫存的伺服器分散、減少了原本單一主機重複多次的讀取流量,也因為預先壓縮暫存,所以主要的網站伺服器短暫的當機,也不至於所有的用戶都不能連線,再加上多台快取伺服器分散各地,如同防護牆一般保護著原本存放網站內容的伺服器不至於遭駭客直接性的攻擊,是項保障使用者與站方的雙向友善性技術。  
在網頁設計時,有時會需要製作圖片互換的效果,只要用CSS就可以實現,還可以加入淺入淺出的動畫效果唷。 首先將兩張圖片透過定位(position)疊在一起,然後將原本顯示的圖片透明度數值設定成0,這樣滑入時就能看見疊在底下的圖片,如此一來,只需要少少程式碼,也無須寫JS,就可以達成簡單的圖片切換了。是不是很簡單呢? HTML   CSS   成果如下 原本顯示如圖   滑入後切換第二張圖    例子: See the Pen <a href='https://codepen.io/bok770/pen/yPejPN/' _fcksavedurl='https://codepen.io/bok770/pen/yPejPN/'>yPejPN</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>.
  先前透過快取我們瞭解了許多加速網站的方法,如:"初識網站快取加速"、"代理/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 鍵入 便能生效。  
在設計網頁時,有時需要調整圖片的透明度,如我們所知用CSS調整透明度的作法就是設定opacity屬性,然而設置此屬性的元素都會受到其影響,也就是說,若只是單純想調整圖片的透明度,設定opacity屬性之後,卻會連帶地使得置於其上的文字也一起具有透明性,然而又不希望文字也跟著透明化,這樣的情況該如何解決呢? 一般在設定opacity時可能會如以下情況,以設60%不透明度為例,我們可能會設opacity:0.6,但是如此一來,文字的透明度也跟圖片一起變化了(如最下方範例的第一塊div),此時我們可以將顏色的設定改以CSS3的rgba(red, green, blue, alpha)來表示,rgba最後的a代表alpha,是指透明度,設定的數值從0到1,例如60%不透明度要設成0.6,rgba(red, green, blue, 0.5),如最下方範例的第二塊div。 但是這屬性IE6、7、8不支持,IE9及以上版本和其他瀏覽器都支持。   因此若是要只針對IE6、7、8的兼容性的話,還有一個方法便是使用filter:Alpha(opacity=x),x 的取值從 0 到 100,例如60%不透明度便是filter:Alpha(opacity=60) ,範例如最下方的第三塊div。 因為此範例僅是針對IE6、7、8、9,所以對IE10及以上版本和其他瀏覽器不會起作用。 範例: See the Pen <a href='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/'>vWBrOm</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.  
   由先前本站介紹過"瀏覽器快取/緩存技術-HTTP Cache",瀏覽器運用快取技術的原理後,能夠有效的節省頻寬流量與網站再造訪時的快速呈現,但使用者在瀏覽較為大量的網站頁面後,將會有累積過多的快取/緩存檔案和未能即時對應網站更新的同步資訊問題,便可能影響長時間後的效率跟使用者操作的及時落差問題。     在瞭解了瀏覽器應用快取技術的優點與長期使用後可能會面臨的問題後,本次針對累積過多快取/緩存檔案跟未能即時更新同步問題,整理了改善對應的辦法,讓使用者能有效改善瀏覽器快取/緩存大量使用後的盲點。針對現今各家瀏覽器開發技術中大多皆加入了快取/緩存技術,也因為瞭解其應用原理將會有後續的盲點,因此各家瀏覽器也衍生了清理快取/緩存的功能,已下將針對現今常用的幾項瀏覽器進行清理快取/緩存的步驟說明。     Google Chrome  61.0.3163.100(正式版本)   1.點選在瀏覽器右上方 自訂及管理Google Chrome的圖示選項  2.選擇 自訂及管理Google Chrome 中的"設定"選項 3.進入設定頁面後,將最下方"進階"選項展開 4.從隱私權和安全性的功能中選擇"清除瀏覽資料" 5.其中有各項提供選擇的清除項目及可以選擇將要刪除的時機點,在此建議選擇"不限時間"和"瀏覽紀錄、快取圖片和檔案紀錄" 6.確定選擇完要刪除的項目後點擊"清除瀏覽資料"便能完成清理快取/緩存的功能     Microsoft Internet Explorer 11   1.點選在瀏覽器右上方 ,點選"工具"的圖示選項  2.選擇"安全性"中的"刪除瀏覽歷程紀錄" 3.其中有各項提供選擇的清除項目,在此建議選擇"網際網路暫存檔與網站檔案、cookie與網站資料、歷程記錄" 4.確定選擇完要刪除的項目後點擊"刪除",此時尚未完成,請稍待 5.待瀏覽器下方出現"Internet Explorer 已完成刪除選項的瀏覽歷程記錄"便能完成清理快取/緩存的功能     Mozilla Firefox 56.0.1   1.點選在瀏覽器右上方 ,點選"開啟選單"的圖示選項 2.選擇"歷史"中的"清除最近的歷史紀錄" 3.其中有"清除時間範圍"和"詳細資訊"展開後能提供選擇各項的清除項目 4.在此建議選擇"所有歷史紀錄"和"瀏覽與下載紀錄、已存表單及搜尋紀錄、cookie、快取" 5.確定選擇完要刪除的項目後點擊"立刻清除"便能完成清理快取/緩存的功能       在透過定期清除快取/緩存的功能後,便能有效提升瀏覽器快取的功能,以上若有相關疑問可以參考本站"初識網站快取加速、代理/Proxy快取伺服器"相關文章或歡迎至聯絡我們進行洽詢。
fancybox是乾淨美觀的jQuery燈箱套件,在相片的展示上呈現簡潔漂亮的視覺效果,在網頁設計上泛用性高。  fancybox官網(http://fancyapps.com/fancybox/)有幾項描寫詳盡的範例,可以依據自己需求選擇適合的demo來做。 首先到官網下載有全部檔案的壓縮檔,以自己所設的連結放進裡面 href裡放的圖片連結是點擊後放大的圖,img src裡的則是小圖,class部分為自己命名。   範例:https://codepen.io/bok770/pen/yoEVvm  See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/yoEVvm/' _fcksavedurl='https://codepen.io/bok770/pen/yoEVvm/'&amp;gt;yoEVvm&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.