網頁設計的專業首選

關於CSS的一個重要概念就是盒子模型(box model)，它控制著頁面各元素的寬與高，比如當我們設定了一個元素的寬高時，所設定的數值還要再加上padding和border，最後才會是這個元素的實際尺寸。 所以若要準確控制版面不破版，原本所設定的尺寸還需要再扣掉border/padding，但是這樣每次設尺寸都要做計算，顯得太麻煩了，這時可以使用box-sizing此屬性，方便我們在設定width、height上更直觀。   box-sizing的設定值 content-box：預設值，實際寬高＝所設定的數值＋border＋padding border-box：實際寬高＝所設定的數值(已包含border和padding)   若要確保各瀏覽器皆可套用的話可直接加上以下前綴，此屬性從IE8後便開始支援：  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;   範例： See the Pen <a href='https://codepen.io/bok770/pen/OQmeeQ/' _fcksavedurl='https://codepen.io/bok770/pen/OQmeeQ/'>OQmeeQ</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>.

   Google Search Console 是在接觸網站行銷 與 SEO(收尋引擎最佳化) 時，大多數人會使用的網站管理工具，相信對熟悉網站行銷的專業管理人員是絕不陌生的，因為 Search Console 主要是由 Google 所開發的一套免費管理工具，也是Google 主動對外釋出貼近管理人員的互動功能，透過相關的應用與追蹤，網站管理人員可以有效的瞭解與設定網站和搜尋引擎建立友善互動性，達到網站行銷與搜尋引擎最佳化的功能。     Search Console 是網頁型的管理工具，Search Console 網址：https://www.google.com/webmasters/tools/home?hl=zh-TW ；透過 Google 會員帳號便能申請加入網站的管理與應用，在初次使用時，可以由新增內容輸入將要進行管理的網站地址來進行加入，  在加入要管理後的網址後，管理員工具會要求您進行網站擁有權的驗證，來瞭解您是否正確的擁有網站的管理權限，驗證的方式是經由下載管理員工具所提供的驗證檔案來置入網站空間根目錄，並回到驗證畫面進行驗證確認就算成功安裝(驗證檔由 Search Console 提供，因此無須太擔心安全性)，    在成功置入後，Search Console 便會導向至網站管理介面，管理工具會自行先對網站掃瞄並瞭解，並將目前狀態顯示告知在介面中。  確認完網站狀態的正確後，便能透過左方工具選項欄位對網站做更精細的檢測與調整，使網站能更貼近、符合搜尋引擎最佳化規則。  

CSS的連結樣式可以針對網頁中的連結，依據使用狀態提供不一樣的效果，能夠讓原本單純的連結有更多視覺上的變化，可以設定的屬性像是文字顏色、字型、粗細等等。   連結狀態共有四種： a:link – 一般的、未被點擊過的連結 a:visited -已被點擊的連結 a:hover - 滑鼠指標移到連結上方時的狀態 a:active - 連結被點擊時的狀態   而若這四種狀態皆要設定的話，必須依照以下順序規則： a:hover 必須位於a:link 和a:visited 之後 a:active 必須位於a:hover 之後   另外，text-decoration 屬性大多用於去除掉連結的下劃線 範例： a:link { text-decoration:none; } 範例： See the Pen payRKr by Ya (@bok770) on CodePen.

Pixeden是一個提供免費資源的網站，提供的資源相當多元，最上面有五大分類－Print、Webs、Icons、Vectors、Graphics，也就是包括網頁、名片、圖示、背景素材等等，相當多元，而且都滿有質感的，就算不下載素材也可以在這裡找到不少靈感唷！ 除了少部分需要註冊才可下載或是付費才能使用的功能以外，其他大部分的素材都可以自由下載。 Pixeden：https://www.pixeden.com/ 點進網頁後，在上方選擇想要的類別後，會有許多子分類，相當詳細。   如果只想找免費素材的話，可以直接點選上面的「free」類別。   滑到素材圖面上時會顯示該素材的下載和加進喜歡的次數   點進素材介紹頁面，點擊「Download」即可下載。   解壓縮後，可以看到有供預覽的jpg圖片檔和psd原檔。   點開psd檔，就有完整的包括電腦、平版、手機的模板可以使用囉。

  先前在介紹"結構化標籤的常見種類"時，我們提到了標籤種類分為：行內撰寫 與 外嵌引入兩種型式，大多數的標籤種類都是屬於行內撰寫，現行當中只有 JSON LD 為外嵌引入，是以 JavaScript 語法為基礎，可由原有的 JSON 格式解析外嵌型的標記方式，結構較為簡易好維護，可與 MicroData 共通 Schema.org 格式，逐漸有許多主流搜尋企業推從，是未來可能取代其他格式的趨勢標籤格式。      由 MicroData 的介紹中，我們能瞭解主流搜尋引擎需要詳細的資訊來貼近符合呈現使用者所搜尋的目標，只使用 HTML 5 原有語意標籤顯得較為薄弱，但相較於 Microdata 而言，新型態外嵌 JSON-LD 透過 < script type="application/ld+json" > 的包覆, 將資料與頁面結構抽離, 讓使用上更加的便利，只需要在頁面上的 head 內插入一段 script 資訊就能完成!   在應用JSON-LD時，先在 ＜script type="text/javascript"＞ 內填入 type="application/ld+json" ，由 @context  定義 JSON-LD 使用的各種類別，@type 宣告應用的屬性，如同 Microdata 般選擇schema.org中有提到的種類，例如: WebSite, Organization, Product等，後續再根據後續屬性，如："name","url"， 進行對應標記填入描述的格式即可。     ＜script type="application/ld+json"＞   {       "@context": "http://schema.org",       "@type": "WebSite",       "name": "一化網頁設計",       "url": "https://www.webdesigns.com.tw/"   }   ＜/script＞     對於需要使用 JSON-LD 的架構來標記時，必須要先釐清瞭解 json 的階層關係，再如同 Microdata 般使用上面提到的 schema.org 找到網站適合的種類後跟選擇屬性來進行使用。 

  前篇介紹"結構化標籤的常見種類"時，我們提到了 MicroData - 是應用在 HTML5 的常見技術，雖然 HTML5 新規格中提出了許多語意標籤，如：      aside：網頁的側欄、附加內容。      article：單篇文章內容。      section：自訂的區塊，如多篇摘要組成的空間。      mark：強調小區塊內容。    來提供搜尋引擎或是其他軟體工具，可以更清楚的了解網頁中每個區塊的設計目的。     但針對不斷創新的主流搜尋引擎來說，它們將需求更多詳細的資訊來貼近符合呈現使用者所搜尋的目標，因此語意標籤原有的資訊就顯得較為薄弱，也為此 Yahoo、Google、Bing 等公司，一同合作規範 MicroData 的標準格式 Schema.org ，主要希望能引進幫助機器更精細判讀的共同格式。   以下是 Microdata 主要使用屬性 :     itemscope : 將html內的attribute定義為item，指定這個項目是代表什麼的時候就是加入itemscope 這個屬性，此屬性是用來告知這個標籤的內容是跟某個項目有關的。     itemtype : 定義item的種類(在schema.org中有各種類的介紹)，在設定完itemscope 項目後，必須再加上 itemtype 這個屬性，並且將值指定為 schema.org 網站上關於這個類型的 URL 。     itemprop : 描述item的屬性，完成前兩項定義與連結動作後，便可以開始針對要標記項目的相關屬性加上標記。使用方法為，在標籤上加上 itemprop 屬性，而其值則指定為「屬性的名稱」，例如 itemprop="name" 便是用來告知項目的「名稱」。                 本站在"網頁結構化資料-實際應用範例說明"中也提出了相關使用例子提供參考。   瞭解了 Microdata 主要使用屬性後，該如何使用對應類型的屬性，應該是較多人的疑問，在 schema.org 中文站當中，也詳細的說明了對應資訊，如：   常用的類型：      創造性工作：創意工作，書書，電影電影，音樂錄音，食譜食譜，電視劇TVSeries ...      嵌入式非文本對象：音頻AudioObject，圖像ImageObject，視頻VideoObject      事件 Event      醫藥和健康類型：MedicalEntity 詞彙。      組織機構      人物      地點Place，本地商戶LocalBusiness，餐館Restaurant ...      產品Product，售價Offer，均價AggregateOffer      評論評論，綜合評論AggregateRating  等資訊，也定義了一系列原始數據類型，比如數字，文本等等。    在建置網站時，先根據對應的類別進行結構化標籤設定，資料設定的愈加詳細, 搜尋引擎可以查證、解析、收錄出來的「基因關係圖」就會愈加完整, 自然也能有效提升SEO的效益。  

WINDOW RESIZER為chrome瀏覽器的擴充外掛套件，可以模擬各種螢幕的寬度及高度，而如今的手機螢幕長寬比琳瑯滿目，除了提供幾款常見的尺寸(1080X768、640X480等等)以外，若要特地針對某個機型做數值設定的話，WINDOW RESIZER也可以自己設定尺寸幫助設計師調整畫面。   首先到chrome套件安裝畫面，加到CHROME     之後便可在右邊看到外掛安裝的圖示，點開會看到預設的一些基本尺寸。     點選上面想要預覽的尺寸，視窗即可跟著縮放到指定的長寬。     若要自定義螢幕大小，首先點擊右邊齒輪圖示(setting)     接著便會跳到設定畫面，點選presets     會列出目前可以選擇的尺寸，按右上角的加號圖示即可新增   如此便可以使用新增的尺寸了唷！ 

  由網頁結構化資料-實際應用範例說明中，我們能明白一個網站中可能同時存在著不同種類的結構化標籤，而不同種類的結構化標籤所代表的功能性也不進盡相同，本次也將針對於常見的結構化標籤種類及應用進行簡單的說明。   結構化標籤種類主要可分為"行內撰寫"與"外嵌引入"兩種形式，   常見行內撰寫的標籤種類為：   MicroFormat - 主要應用在(X)HTML中的 class(CSS) 名稱設定，逐漸少人使用。   MicroData - 可以應用在 HTML5 的常見技術，主要提供搜尋引擎查證、解析、收錄，因為受到各家搜尋引擎公司認同，因此Yahoo、Google、Bing等公司，一同合作規範 MicroData 的標準格式 Schema.org ，是較為主流的標籤格式。   RDFa - 是由 W3C 所制訂推薦的標籤格式，同樣支援 HTML5，可以擴充(X)HTML的屬性，也是較為主流的標籤格式。   Open Graph Protocol - 是 Facebook 制定的 HTML Meta 標籤格式，主要提供網頁的標題、縮圖、描述等資訊，Facebook 也藉由讀取其中的資訊將網頁內容摘要的型態轉載應用，也陸續有許多網路平台將其加入支援，因此是近年來較為重要必須的標籤格式。     外嵌引入：    JSON LD - 是以 JavaScript 語法為基礎，可由原有的 JSON 格式解析外嵌型的標記方式，結構較為簡易好維護，可與 MicroData 共通 Schema.or 格式，逐漸有許多主流搜尋企業推從，是未來可能取代其他格式的趨勢標籤格式。  

在上篇"網頁結構化資料是什麼"中，我們說明了設定網頁結構化資料主要是為了提供搜尋引擎正確歸類收錄、顯示資訊為用途，瞭解了網頁結構化資料主要的用途後，本次將以實際範例作為說明希望讓大家能更簡單且清楚的方式來理解。   由網頁原始碼中可以先瞭解，基礎的頁面設定，在基礎設定中 Og meta tag 是由現今主流的Facebook 所制定解析專用的結構化標記，用途便是有利於Facebook 搜尋引擎收錄及插件(分享、轉貼)時能自動對應格式應用的結構化標記。    在基礎頁面 meta 之外，現今較常應用的 Microdata 結構化標記，主要應用在頁面與網站的階層結構上，有利於搜尋引擎對網站整體的階層瞭解與收錄。  

 我們在作視覺設計時，在字型的選用上，若想要嘗試平常不用的字型，可能會需要一個個試，相當麻煩，尤其如果安裝的字型一多，會顯得浪費時間和心力，如果可以一次看到所有字型顯示的樣子，就方便許多了，而現在線上就有提供預覽字型的網站唷！只要打上文字，按下Enter，網站就會直接顯示你電腦裡所安裝的所有字型，十分快速！ 以下介紹兩個：MyFontbook 與 wordmark   MyFontbook是線上字型檢視器，不僅可以預覽字型，而且可以根據個人的使用習慣分類和加標籤，甚至能夠替字型評分！不過加標籤和評分等這些功能，都必須註冊帳號才可以使用，註冊步驟很簡單，只要有電子信箱與密碼即可唷。   進入首頁後按「Launch Viewer」     網站會請你登入或註冊，如果還不想註冊的話可以按右邊的「Demo」，但要注意的是Demo版有些功能無法使用唷。      wordmark (https://wordmark.it/) 比起MyFontbook更加直覺方便，但功能方面跟MyFontbook相較之下，就較簡陋了，只提供預覽字型，而沒有加標籤等功能。 而字型又分成個人電腦擁有的以及Google Fonts。 到首頁，輸入你想檢視的文字，按下「Enter」，即可顯示唷！