文章專區

最新網頁設計文章

 如何確認網站是否被Google 收錄,之前我們介紹過使用搜尋引擎的查詢指令,能夠簡單的針對特定網站進行收錄確認,在瞭解收錄情形後,能夠明確的讓網站管理人員知道站台的最佳化情況是否符合搜尋引擎的應用規則,並進行調整改善、優化,但使用搜尋引擎的查詢指令較符合非網站管理員或單次性簡易察看,並不適合作為長期性的優化追蹤管理應用,因此本次將分享站台管理員較適合使用的收錄追蹤方式。   先前介紹過 Search Console 網站管理工具,是由 Google 所開發的一套免費網站管理工具,在接觸網站行銷 與 SEO (收尋引擎最佳化) 時,是大多數管理人員必定使用的網站管理工具,在這套工具估能中,也包含了主動追蹤網站接受 Google 搜尋引擎收錄頁面的時間數量紀錄,可以讓管理人員們更一目了然的觀察、管理收錄情況: 在 Search Console 網站管理工具中,收錄形況被歸類為"索引狀態",主要是以 Google 搜尋引擎對網站進行造訪或管理人員主動提交申請分析所建立的索引數量為依據,同時包含了時間、數量的曲線圖提供下載留存應用。
在網頁排版上,要讓div垂直置中是經常遇到的問題,這裡介紹幾個常見的解決方式。 1.line-height 這是初學者一開始會學到的方法,雖然相當簡單,但僅適用於單行文字排版,兩行以上的話行距會變大。 範例: See the Pen wEwqWb by Ya (@bok770) on CodePen.   2.偽元素(before,after)+ display:inline-block 此方法可適用於單行或多行文字,以及區塊置中 缺點是需多寫一行css(偽元素) 範例: See the Pen dqbzpe by Ya (@bok770) on CodePen.   3.display:table+table-cell 在最外層寫一個偽table,也就是display:table,然後在要垂直置中的區塊,加上display:table-cell以及vertical-align: middle 範例: See the Pen bxbrgX by Ya (@bok770) on CodePen.   4.Flexbox 最方便彈性的方法,可以讓區塊內容自適應外面的容器,只要在最外層寫上 display:flex、align-items:center;(垂直置中) 、justify-content:center;(水平置中)即可 關於Flexbox的排版詳細可見CSS3的flexbox版面配置-flex container(容器)可用的屬性 範例: See the Pen OoLjmY by Ya (@bok770) on CodePen.  
 在網站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.