文章專區

最新網頁設計文章

 在網站SEO優化時,相信大家都會盡所能遵照自然搜尋的規則來優化網站項目,而網站優化的目的是希望提升網站在關鍵字搜尋結果中的排名,在這樣的前提之下,其實更加需要在意的部份是網站頁面是否正確的被搜尋引擎收錄應用,如果頁面未能被正確收入,那更不會有排名的機會,因此網站在製作完成上線後,雖然搜尋引擎會有自動收錄的步驟,但是許多時候網站的頁面總數量與實際收錄情況並不截然相同,此時瞭解網站頁面收錄情況便是必須注意的重點。   瞭解了收錄的重要性之後,我們將以簡單的方式來大家如何瞭解網站到底被搜尋引擎收入了多少頁面(這邊以 Google為例),在 Google 搜尋欄位中,我們可以輸入 site:(要查詢的網址) 來瞭解網站實際總共被搜尋引擎收錄的頁面數,進而確認網站收錄的情況並決定是否著手調整。   由搜尋結果頁面中可以瞭解網站實際總共被搜尋引擎收錄的頁面數    
 先前介紹過"淺談瀏覽器推播功能",當中有分享讓大家瞭解,網站可以應用推播功能主動將站內最新資訊發布通知給有加入接收通知的使用者,此項功能主要是希望讓使用者在未查看站台的情況下,一樣能夠輕鬆方便優先取得最新動態資訊,但在隨著使用者在多個網站中,同意接收通知時,可能造成過多通知影響平時電腦上的工作應用,因此,在這樣的考量之下瀏覽器也貼心的建立了關閉較無興趣的推播通知功能,當您發現有過多或是不想在接收推播通知時,您便可以進入瀏覽器進行設定,關閉相關通知功能,以便工作應用。   以下將為大家分享如何關閉瀏覽器推播功能,由先前所介紹通知的運作方式是透過瀏覽器的儲存建立,所以在需要移除的時候,需要開啟瀏覽器,這邊以 Google Chrome 為例:   在電腦上開啟 Chrome 瀏覽器,在右上角的"自訂及管理Google Chrone"當中選擇「設定」項目,   進入設定畫面後,按下底部的「進階」功能,會看見「內容設定」選項。   由內容設定中,細分了「通知」項目,   選定通知設定內容,將會看見「傳送前詢問我(建議)」、「封鎖」、「允許」三種設定項目。 因此在這您能選擇封鎖或允許通知:   全部封鎖:關閉「傳送前詢問我」   允許特定網站:透過「新增允許」,然後輸入網站所在的網址,就能接收特定網站的推播。   封鎖特定網站:透過「新增封鎖」,然後輸入網站所在的網址,就能封鎖特定網站的推播。  
 placeholder為input輸入框的預設文字,默認樣式為灰色字,但可以透過css來美化, 不過若只寫以下的css會發現沒有作用 input[placeholder], [placeholder], *[placeholder] {    color:blue; } 必須針對不同的瀏覽器做不同的設定。一些基本的樣式都可以套用在placeholder上,例如:字型、顏色、大小等等。 Webkit瀏覽器(如:chrome、Safari等等) ::-webkit-input-placeholder Firefox 4-18瀏覽器 :-moz-placeholder Firefox 19+瀏覽器 ::-moz-placeholder IE10瀏覽器 要注意的是IE9以下不支援   範例: See the Pen KBRqvN by Ya (@bok770) on CodePen.  
  (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));  在網頁設計上,可能需要將Facebook粉絲專頁的貼文內嵌至網頁內,而Facebook官方本身就有提供這方面的嵌入設定,就算對網頁不熟悉也可以輕鬆操作。 Facebook 嵌入粉絲團的設定頁:https://developers.facebook.com/docs/plugins/page-plugin 在頁面上可以看到許多的設定項目,而且可以隨時預覽呈現的方式。   首先貼上粉絲專頁的網址,寬度與高度的單位為像素,只要填入數字即可,下方的勾選項目可依據自身需求勾選。 確定好沒問題之後點選「取得原始碼」,會跳出兩種原始碼,分別為JavaScript SDK和iframe   其中iframe頁籤較為單純直接,只要複製貼上於網頁中要顯示的位置即可。缺點是必須設定寬度和高度,無法自動適應寬度變化,不支援RWD    而JavaScript SDK插入方式有兩段原始碼,第一段需插在<body>之後,第二段原始碼之前。而第二段則是跟iframe一樣,插入在要實際顯示的位置。 一般較推薦使用JavaScript SDK,只要設定時不指定寬度,且勾選「搭配外掛程式容器寬度」,插入的粉絲專頁即可在180~500pixel的範圍內自動縮放。 範例:   一化網頁設計
由網際網路起始至今的發展來說,即時傳遞、接收訊息一直都是網際網路的重要特色,隨著在行動裝置與 APP 應用普及的現今,軟體功能也越來越貼近使用者便利性,從行動裝置上能發現,許多APP都能夠在背景待機狀態下,主動為使用者接收所需的最新動態消息,達到資訊傳播推廣的即時效果,而因應動態訊息傳播的即時性,大部分的瀏覽器也開始建立了這樣的推播功能。   以普遍大眾所使用的瀏覽器,如:Chrome、Firefox、Safari 等來說,都已經針對網站推播功能進行支援了,其中網站又該如何應用這樣的支援效果呢?以下將為大家進行運行概述上的說明。   由行動 APP 來看,大部分的軟體推播資訊都是由各家廠商獨立開發的程式,針對本身相關訊息的發送和推廣,但網站瀏覽器推播功能較不同的地方卻是在於各家廠商共同透過瀏覽器進行推廣通知,其作用原理主要是經過使用者在造訪網站的同時,網站應用推播通知的詢問,來取得推播權限,在網站取得使用者同意的推播權限後,瀏覽器也將會同時存取該網站的推播支援功能進行合作。   取得使用者的推播權限後,網站則必須在需要推播的資訊當中加入標籤(Tag)告知功能,瀏覽器將會在固定的時間中主動進行造訪瞭解所有存取的站台是否有需要推播的資訊,達到網站即時訊息推播的功能。  
 在網頁設計上,為了讓版面更整齊,時常需要讓文字限制在固定尺寸的區塊內, 當文字超過設定的框架時會自動顯示「…」的刪節號。而使用CSS便可以達到這個效果。 方法便是在文字區塊內加上text-overflow: ellipsis; 、white-space: nowrap; 及 overflow:hidden;   如下範例: See the Pen pZRmMy by Ya (@bok770) on CodePen.   然而可以發現的是,如此一來僅能顯示單行文字,若是需要顯示多行文字的話便不實用了。 不過CSS還有另一項新的屬性:-webkit-line-clamp,不僅可顯示多行文字,還可以控制要顯示的行數,超出的部分一樣會顯示「…」的符號。用法為設定要顯示的行數,例如要顯示三行便設定-webkit-line-clamp: 3   要配合的屬性包含: display: -webkit-box;以及 -webkit-box-orient: vertical;  text-overflow:hidden;   範例: See the Pen pZRXJb by Ya (@bok770) on CodePen.    缺點是此項屬性兼容性不佳,目前僅支援有webkit的瀏覽器,如:chrome、Safari、Opera,並不支援IE和firefox。    
網站瀏覽與社群聯繫的應用佔據了全球大部分的流量,因此社群網站也逐漸跟一般網站進行相容結合,我們介紹過一般網站可以經由 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 也會針對相關應用以信件方式進行建議,此部分可以選擇需要或不要 在填入以上相關資訊後,便是要針對商家行號的管理人真實性進行管理驗證確認,在完成驗證後就能對您所登錄的商家地標資訊進行管理