網頁設計的專業首選

 在網頁設計上icon的使用是不可或缺的，一般是切成圖片，然而若是以文字形式呈現的話，不僅縮放都不會失真，還可以任意更換顏色，比svg檔更便利！而有個網站便是專門將svg轉換成文字檔， IcoMoon ：https://icomoon.io/app/#/select 不僅提供許多的現成圖示可以使用，還可以將自己繪製的icon放進來做轉換。   可以直接選擇想要使用的icon，選取到的會框起來   也可以直接將自己繪製的圖示放進來，點選左上方的「import Icons」，即可匯入   點選最右下角的「generate Font」轉成文字檔   將下載的檔案解壓縮後，只要將style.css和 fonts的資料夾放進自己寫的專案裡即可   點開demo.html會顯示你所下載的每個圖示的class名稱，實際套用時只要加進class裡即可   比如要套用上圖的icon-file-text的圖示，便可將 icon-file-text的class放進來，若要修改樣式可以新增class，如下圖的icon01、icon02、icon03，便是修改圖示的大小和顏色，因為是文字所以需用 font-size

 在瞭解了"SiteMap是什麼?"時，相信大家都能清楚的知道網站地圖的用途為顯示網站內所有的頁面連結資訊架構，雖然 SiteMap 可以使用多種形式呈現列表( html、asp、aspx、php、RSS、mRSS、Atom 1.0) ，但主要使於連結協助搜尋引擎針對網站的所有頁面進行審查和收錄的應用格式為 XML，所以在建置 XML 格式 sitemap 的時候，又該注意什麼細節呢?我們將在本次進行分享。   可延伸標記式語言 XML（Extensible Markup Language），是一種標記式語言。用於電腦、站台與搜尋引擎之間可以溝通傳遞處理各種資訊的通訊格式。Sitemap.xml主要是將網站內所有的網頁目錄和檔案，提供給搜尋引擎的爬蟲程式閱讀檢索應用，方便搜尋引擎進行正確的網站頁面收錄留存動作，在 xml 的格式下，Sitemap 中的所有資料值都必須是實體逸出。 ‧檔案本身必須使用 UTF-8 進行編碼。 ‧由開始的標記便是以 ＜urlset＞開頭，並同樣以 ＜/urlset＞ 標記做為結尾 ‧指定 ＜urlset＞ 內的名稱領域 (通訊協定標準)。 ‧讓每個 URL 中包含一個連結的＜url＞ 項目做為母層 XML 標記。 ‧在每個 ＜url＞ 母層標記包含一個 ＜loc＞ 子層項目。   以下為實際應用範例：

 如何確認網站是否被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。