網頁設計的專業首選

  網站嵌入Google map技術，在行動裝置的進步之下，使用者依靠行動裝置進行查詢、定位、導航已經是習以為常的動作了，因此不論是銷售據點、辦公地點等以地圖形式呈現連結也是現行十分重要的網站資訊，以下將針對大眾普遍通用的 Google map 嵌入技術進行介紹。     在開始嵌入網站地圖之前，我們需要先透過 Google map ：https://maps.google.com.tw/maps 來先進行地點的搜尋與定位，這個動作可以確保地點的正確性也是幫助我們產生地圖連結的重要步驟。     透過地圖的定位與確認後，Google map 貼心的設計了地圖外連分享功能，在分享的功能中選擇"嵌入地圖"，當中將會產生定位地點的相關程式應用編碼，這編碼其中包含了定位資訊與圖示資訊，是非常完善的對應連結。     由 Google map 所產生的定位編碼加入在網頁的資訊內容中，並加以調整顯示特效及大小比例，將能清楚地讓使用者快速清楚明白相關地點資訊，也有助使用者能更方便快速地找尋到相關地點的定位及導航資訊。 

   SiteMap 是意指"網站導覽"又稱為"網站地圖"，用途為顯示網站內所有的頁面連結資訊架構，在 SiteMap 的形式當中又分為( html、asp、aspx、php )及 XML 兩大主要格式，在兩種主要形式當中( html、asp、aspx、php )多用於製作呈現給一般訪客在瀏覽網頁內容時查看使用(似書本摘要目錄)，而 XML 是針對搜尋引擎所制定的導覽格式，主要用於列表整體連結協助搜尋引擎針對網站的所有頁面進行審查和收錄。     站在 SEO 網站優化的角度上， SiteMap 的建置又以 XML 蔚為重要，在新網站建置完成上線後，雖然搜尋引擎會透過爬蟲程式收錄網站資訊，但在面對架構複雜、連結較多的網站需要有較長的查詢時間且容易有收錄不完整的情況，因此透過 SiteMap 的建立與提交，能夠協助搜尋引擎較快速的得到網站完整資訊，也能幫助網站可以更快速的讓一般使用者查詢觀看。     XML 格式的 SiteMap內容較為簡單，撰寫上可以自行製作，但連結資訊較為豐富多元的網站也有相關工具能夠協助自動產生SiteMap檔案，如：https://www.xml-sitemaps.com/     在製作產生完sitemap檔案資訊後，可以透過先前介紹過得的 Google Search Console 網站管理工具進行提交及驗證     從以上提交與驗證後便能發現網站的資訊是不是能完整被搜尋引擎給收錄編列，在一個好的網站規劃中，如果能同時擁有以上兩種 SiteMap 呈現型式也將會對於網站優化(SEO)有著極大的幫助喔!  

我們在網頁設計時，會需要使用表格來做排版，而說到表格最基本和常見的就是table了。 一個基本的表格是由 和一或多個定義表格的row(行)、colspan(列)、和組合而成的。 定義表格的表頭（文字預設為粗體）、定義表格的資料。 寫法： See the Pen <a href='https://codepen.io/bok770/pen/xWRVdd/' _fcksavedurl='https://codepen.io/bok770/pen/xWRVdd/' _fcksavedurl='https://codepen.io/bok770/pen/xWRVdd/'>xWRVdd</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>.     colspan屬性 表示表格欄位跨越的columns（行）數，為橫向跨越。 範例： See the Pen <a href='https://codepen.io/bok770/pen/PRbNQV/' _fcksavedurl='https://codepen.io/bok770/pen/PRbNQV/' _fcksavedurl='https://codepen.io/bok770/pen/PRbNQV/'>PRbNQV</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>.   rowspan 屬性 表示表格欄位跨越的rows（列）數，為縱向跨越。 範例： See the Pen <a href='https://codepen.io/bok770/pen/ZxBWvO/' _fcksavedurl='https://codepen.io/bok770/pen/ZxBWvO/' _fcksavedurl='https://codepen.io/bok770/pen/ZxBWvO/'>ZxBWvO</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>.

   Google Search Console Beta 來囉！先前介紹過 Search Console 網站管理工具，是由 Google 所開發的一套免費網站管理工具，在接觸網站行銷 與 SEO (收尋引擎最佳化) 時，是大多數管理人員必定使用的網站管理工具，在 Webmaster Tools 經歷更改名稱為Search Console 之後，就很少有重大的變更， Google 在2018年1月新的一年開始，也發布了新的改版介面，相信許多網站管理人員都收到了"歡迎使用新版 Search Console 管理資訊"的連結通知信件，就讓我們一探這次有什麼改變之處吧。   另外在舊版畫面當中也會看見切換新版介面的相關連結     在改版後的功能當中，主要還是延續了先前網站經營的"成效"與"索引"兩大指標，在畫面的呈現上維持了摺線圖數據，從功能選擇上有了比較自由的數據比對方式，當中比較特別的是，以往只有保留三個月的數據，本次更改為16個月的保留數據，在數據量化下的比較後，更能讓管理人員掌握網站的長期營運動態，是一項值得研究參考的功能。         索引指標部分，算是本次較多的改變重點，以往的索引介面只有較為基礎的索引狀態和封鎖的資源，而改版後以索引涵蓋範圍來呈現，細分了錯誤、有效但出現警告的網頁數、有效頁數、排除頁數，也針對更細部的資訊進行分析顯示，是較為增加內容的功能。     在本次更新中，Google Search Console是打著 Beta 公測，讓廣大的管理人員們也能從新舊版本互相切換適應使用，其中也有些區塊涵蓋了舊功能畫面的連結或顯示著即將推出的標示，等於賣了一個關子給所以管理人員們，就讓我們一起期待更棒的新功能一一解放吧。  

CSS的列表(list)算是網頁設計中時常使用的屬性，在內容中添加列表來陳列資訊，一般有ul li、ol li，預設值為由上而下排列。 ul li為無序列表，也是最常見的列表，預設開頭為一圓點「．」。 ol li為有序列表，開頭會自動產生數字排序，初始數字從一開始。  範例： See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/YaXWKr/' _fcksavedurl='https://codepen.io/bok770/pen/YaXWKr/'&amp;gt;YaXWKr&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;.     若是不想要預設的黑點符號，可用list-style-type屬性加以修改，最常見的設定值為： none (沒有) disc (全黑圓圈) circle (空心圓圈) square (正方形) 範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/ZxGOEE/' _fcksavedurl='https://codepen.io/bok770/pen/ZxGOEE/'&gt;ZxGOEE&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   另外，網頁的導覽列也時常使用到ul li，可善用css即可表現。 See the Pen <a href='https://codepen.io/bok770/pen/bvdeGQ/' _fcksavedurl='https://codepen.io/bok770/pen/bvdeGQ/' _fcksavedurl='https://codepen.io/bok770/pen/bvdeGQ/'>bvdeGQ</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>.

   Google Search Console 與 網頁結構化資料的應用，先前在分享網頁結構化資料是什麼?時，說明過網頁結構化資料主要是協助搜尋引擎在收錄網站時能將進階資訊設定到正確對應的收錄位置，而本次將結合先前介紹過的網站管理工具 Search Console 來針對網頁結構化資料一起進行標記、追蹤、統計管理。     Google Search Console 透過驗證與追蹤的方式，會自動針對網站內已經設定好的網頁結構化資料進行掃描並偵錯，讓網站管理人員們能夠清楚的看見網站在搜尋引擎上的收錄狀態，其中所收集的資訊也包含了網頁結構化資料的狀態性：   透過結構化資料的追蹤，網站管理人員能夠隨時簡單又清楚的瞭解網頁結構化資料狀態，好確保網站運行的正確性。      另外先前介紹過的結構化標記-協助產生工具，也在 Google Search Console 以資料螢光筆功能中提供協助標記 以上透過 Search Console來標記、追蹤、統計，也省去了額外結構化標記測試的步驟，能使網站管理人員能輕鬆且快速的對整體網站結構化資料進行統整，是非常便利的整合功能。  

網頁的文字單位大致上分成四種，px、%、em、rem px為最常見的，屬於絕對單位；%、em、rem則為相對單位。 %單位的算法： 預設網頁上的文字大小為16px， 假如設定font-size: 75%，意思就是將預設文字大小改成：16 X 0.75=12px   那麼em、rem看起來很像的兩者，又有什麼差異呢？ em是以父元素為基準的文字單位，適合使用在限制區塊的內容，例如：ul li、p、div等等，em可以快速地從父元素改變內容文字的大小。 範例： See the Pen &amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/NymyOv/' _fcksavedurl='https://codepen.io/bok770/pen/NymyOv/'&amp;amp;amp;gt;NymyOv&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Ya (&amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;gt;@bok770&amp;amp;amp;lt;/a&amp;amp;amp;gt;) on &amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;gt;CodePen&amp;amp;amp;lt;/a&amp;amp;amp;gt;.   rem的文字則是以根元素為基準，而根元素就是指標籤。適合用在整體網頁的尺寸切換，可以依據不同的螢幕尺寸，統一改變網頁全部的文字大小。而要注意的是，rem不支援IE8之前的瀏覽器唷！ 範例： See the Pen &amp;amp;lt;a href='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/'&amp;amp;gt;PQgQvp&amp;amp;lt;/a&amp;amp;gt; by Ya (&amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;gt;@bok770&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

  在上篇結構化標記-協助產生工具的介紹中，我們分享了實際操作時，能協助網頁結構化標記的 Google 結構化資料標記協助工具，使您就算是第一次進行標記的網站管理人員也能根據步驟快速上手，但在設定結構化標記時我們分享過結構化標籤的常見種類並不是只有單一的形式，標記的架構可能會隨著不同網頁的性質與功能和格式在設定的結構層面上會使用不同的標籤種類標示，因此，我們在使用了標記協助工具後，仍然有可能在層級上有些誤差，為了對於較為陌生的設定人員可能沒辦法立刻察覺，而本次將針對網頁結構化設定後得檢測進行介紹。     Google 在設計結構化資料標記協助工具的同時也貼心的設計了，結構化資料測試工具(https://search.google.com/structured-data/testing-tool/u/0/)，其中可以選擇貼入網站網址或網站需要標記的程式碼進行驗證，提供網站管理人員在標記網站結構化資料後，能夠有進一步的確認。    

 如果想控制float元素的排版，了解clear屬性是十分重要的，兩者可謂息息相關。 可能的值有： left：消除左邊的浮動 right：消除右邊的浮動 both：消除左右兩邊的浮動 none：預設值，不消除任何一邊的浮動 inherit：繼承浮動，IE未支持此屬性值 其中尤以both最常被使用，因為當我們使用float元素時，由於區塊是浮動的，所以若下一個區塊未使用float屬性的話，可能在排版上會往上跑，造成跑版的現象，而使用clear:both可以適當地解決這個問題。   請先看以下範例： See the Pen &amp;amp;lt;a href='https://codepen.io/bok770/pen/gvZQBy/' _fcksavedurl='https://codepen.io/bok770/pen/gvZQBy/'&amp;amp;gt;gvZQBy&amp;amp;lt;/a&amp;amp;gt; by Ya (&amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;gt;@bok770&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.  前兩個區塊都使用了float:left，然而第三塊(紫色)未使用浮動，因此區塊往上跑被擋在第一塊的下方。   再看以下範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/yvGQVN/' _fcksavedurl='https://codepen.io/bok770/pen/yvGQVN/'&gt;yvGQVN&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.  在兩個float區塊後面加上clear:both，如此一來便清除了上面的浮動，下面的內容就不會因為float屬性而受到影響。  

 先前曾分享過網頁結構化資料是什麼?的原理與用意也介紹過網頁結構化資料常見的格式種類，相信大家對於網站結構化資料有了基本的認識，同時在本站中，也有較詳細針對 JSON-LD-結構化標籤、 Microdata-結構化標籤和網頁結構化資料-實際應用範例，有使用上的說明，但相信在初試網頁結構化時，會有許多人在實際應用上，不知道該如何對應使用標籤格式或 Schema.org 的分類選擇，因此本次將分享協助網頁結構化的快速產生工具。    在看完後本站網頁結構化資料解說後，如果還是不知該如何將網頁結構化資料導入到網頁中時，本站將為大家介紹能協助快速產生結構化標籤功能的小工具，網頁結構化算是協助搜尋引擎更精準判讀收錄網站的一種良性互動設定，因此 GOOGLE 也貼心的設計出了協助工程人員的快速標籤工具，結構化資料標記協助工具：https://www.google.com/webmasters/markup-helper/u/0/?hl=zh-TW 。  從結構化資料標記協助工具的畫面中，我們可以直接透過選擇類型來定義網站的標籤分類，再填入將要進行標記的網址，就可以開始進行結構化的定義標籤。  在標記完標籤資訊後，透過建立HTML，協助工具便會自行產生出相對應的程式編碼，在初始畫面中看到的 HTML原始碼，是根據 Microdata 標籤格式進行編譯的，Google 響應推廣 JSON-LD 標籤格式，所以也可以使用"微資料"當中的JSON-LD來轉換標籤格式。  產生完相對的結構化原始碼之後，將產生出來的原始碼，視網站類別屬於靜態還是動態類型，加入網頁編碼就能大功告成。