文章專區

最新網頁設計文章

我們在網頁設計時,會需要使用表格來做排版,而說到表格最基本和常見的就是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 公測,讓廣大的管理人員們也能從新舊版本互相切換適應使用,其中也有些區塊涵蓋了舊功能畫面的連結或顯示著即將推出的標示,等於賣了一個關子給所以管理人員們,就讓我們一起期待更棒的新功能一一解放吧。  

ARTICLE

3

CSS的列表屬性

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來轉換標籤格式。  產生完相對的結構化原始碼之後,將產生出來的原始碼,視網站類別屬於靜態還是動態類型,加入網頁編碼就能大功告成。 
關於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 &lt;a href='https://codepen.io/bok770/pen/OQmeeQ/' _fcksavedurl='https://codepen.io/bok770/pen/OQmeeQ/'&gt;OQmeeQ&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;.
   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 便會導向至網站管理介面,管理工具會自行先對網站掃瞄並瞭解,並將目前狀態顯示告知在介面中。  確認完網站狀態的正確後,便能透過左方工具選項欄位對網站做更精細的檢測與調整,使網站能更貼近、符合搜尋引擎最佳化規則。