網頁設計的專業首選

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="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」，即可顯示唷！          

在網頁上的區塊是依照html的書寫順序排列，但如果換成設計RWD自適應網頁時，有時為了閱覽方便或其他需求，會需要將原本的區塊順序作更動，雖然可以用float浮動或是position定位來設定，在調整上較為麻煩，這時我們可以使用flexbox(詳細介紹請看: CSS3的flexbox版面配置－flex container(容器)可用的屬性和CSS3的flexbox版面配置－flex items(子項目)可用的屬性) 裡的order屬性，此屬性可以直接以數字設定區塊的前後順序，非常快速！   首先寫一個html框架，內有四個div區塊，為方便區分設定order的前後差異，依照html裡的順序分別設001、002、003、004。 將最外圍的div的class命名為container，設display:flex   顯示出的如下圖   然後設order屬性，此範例設定四個div的順序為反過來，在html碼裡排列第一的div(001)設為order:4，以此類推。   為方便看出差異，另外加上每個div的order數值   可以清楚地發現，div的排列會跟著order的數值作更動。

  網頁結構化資料是什麼?相信大多數人都有使用過搜尋引擎尋找過資料，搜尋結果列表出來的資訊會盡量貼近符合搜尋的關鍵字，而搜尋引擎又是靠什麼資訊去歸類排序網際網路廣大多元的資訊呢?其中最主要的歸類方向便是"網頁結構化資料"，網頁結構化資料簡單來說就是網頁最基礎的編輯資訊，也是我們在搜尋排名常看見的網站說明資訊，這些說明資訊不僅提供了搜尋者閱讀查證資料是否符合之外，更提供了搜尋引擎進行歸類排序等用途。    一般人可能會認為大多數搜尋引擎都會自動收錄基礎閱讀資訊，又為什麼需要額外在結構化資料著墨呢?原因在於大多數搜尋引擎在收錄時只會針對簡單的基礎資訊進行收錄，而大部分網站若沒有將進階資訊設定到正確對應的收錄位置時，就少掉許多貼近關鍵字訊息的資料，自然在歸類與排名上會顯得較為模糊薄弱。      從圖片資訊中能發現，搜尋較為明確方向的關鍵字時，搜尋引擎也會把結構化資料顯示得更加符合貼近，因此"網頁結構化資料"在 SEO 上算是最基礎的頁面資訊，卻也是極為重要的關鍵資訊。