文章專區

最新網頁設計文章

CSS的cursor屬性可以改變滑鼠游標的形狀, 當滑鼠移過去時,就會顯示自設定的形狀。 共有以下這些屬性值 Crosshair、pointer、text、move、wait、help、progress、 not-allowed、no-drop、no-vertical-text、all-scroll、col-resize、 row-resize、e-resize、ne-resize、n-resize、nw-resize、w-resize、 sw-resize、s-resize、se-resize   範例一覽表,將滑鼠移上即可顯示該游標的圖案: See the Pen <a href='https://codepen.io/bok770/pen/GxbGXW/' _fcksavedurl='https://codepen.io/bok770/pen/GxbGXW/'>GxbGXW</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>.  也可以自設定圖片作為鼠標,寫法: { cursor: url(圖片的檔案路徑); }  
 本站先前也介紹過PageSpeed網站速度與SEO的重要關係,主要是由 Google 針對網站體驗的載入進行友善評比、測試與建議,從行動裝置日新月異的發展,瀏覽網站的裝置比例由原來單一的桌上型裝置改變成行動裝置成為主流,身為搜尋引擎龍頭廠商及Chrome瀏覽器的高市佔率,Google 更加重視網站在行動裝置上的體驗,因此在 PageSpeed 網站體驗分析之後,更推出了只針對行動裝的體驗測試的專屬功能 Test My Site With Google :https://testmysite.withgoogle.com/intl/zh-tw,由這項功能把網站發展帶領至行動裝置載入速度為優先考量的趨勢。    Test My Site With Google 這項行動裝的體驗測試的專屬功能與 PageSpeed 網站體驗分析同樣都會針對網站的基本元素 CSS\HTML\JavaScript 是否壓縮進行檢測。    除了基礎的元素之外,Test My Site With Google 體驗測試和與 PageSpeed網站體驗分析最大的差異在於,Google考量了現實環境中行動網路技術的發展(一直到2020年,全球各地70%的行動網路只到3G的執行速度),因此Test My Site With Google 體驗測試加入了標準行動網路(3G)的連線測試。    在包含了行動連線之外,更考量了行動裝置視窗大小不一的問題,真對網站內容在行動視窗上呈現的友善、易讀性進行瞭解、評估。   還加入了其他相似網站的相關評比動作,讓網站的檢測不再只是閉門造車,讓網站的成長格局更加廣闊。   比較得特別的地方在於,此項測試功能將分析的成果分為簡易的連線速度測量、客戶流失率原因,和需要經由"信箱"取得的詳細報告。       透過信箱取得的詳細報告內容包含了:看來沒問題、建議修正、應該修正 評比與建議。網站便能針對這些行動體驗項目更加精進。  

ARTICLE

3

HTTP/2 是什麼

   HTTP/2是什麼?在網站伺服器與瀏覽器相互連結工作之間,使用了一項全球資訊網基礎的 HTTP(超文本傳輸協定) 通訊協定,其中最為廣泛應用的版本為1999年發布的 HTTP/1.1,也是網站伺服器與瀏覽器配合使用最久的協定版本,其中相隔經歷了16個年頭,在2015年時才又正式的發佈了最新的協定版本,那就是 HTTP/2(超文字傳輸協定第2版),也是正式的準備取代 HTTP 1.1成為現今 HTTP 的實現標準。     相隔了十六年後的更新,HTTP/2 的釋出帶來了網站瀏覽的全新體驗,不僅讓網站瀏覽速度增加,也提供了更安全的連線資訊,同時更兼容了 HTTP/1.1 原有的GET/POST 操作、HTTP Status Code 和各種 HTTP Headers 都沒有改變,因此在不需要修改 HTML/CSS/JavaScript 網頁和你的後端程式伺服器端的情況下,只需要將網站伺服器軟體進行更新並設定,使用者使用支援 HTTP/2 的瀏覽器,就可以體驗這項優化的通訊協定。       HTTP/2 與 HTTP/1.1 相差別的幾項工作模式,其中包含了:     1.HTTP/2 協定建置在 HTTPS 安全連線之上,因此在更新 HTTP/2之前,網站必須要擁有 TLS/SSL 安全性憑證來保障安全連線。   2.在減少多個連線工作次數的情況下,瀏覽器只需單一網路連線就可以與網站伺服器進行連接。   3.由單一網路連線時達成同時傳輸多個 HTTP Request 和 Response,並擴充增加可以同時請求發送 CSS/JS/Images 等等資源。   4.優先權設計(Prioritization),伺服器可以決定例如 CSS 或 JavaScript 檔案,哪些要優先傳送。   5.Header 壓縮,HTTP/2 處理了絕大部份重複的 Headers ,並在傳送前進型壓縮,有效減少了過多重複的資訊也縮短了冗長得傳輸過程。   6.HTTP/2 使用單一Binary 二進位的封包結構設計,對伺服器和瀏覽器來說,可以更快的解析傳輸資料。   7.伺服器主動推送資源(Server Push),允許伺服器除了 HTML 之外,連同需要的 CSS/JavaScript/Images 檔案,主動推到瀏覽器的快取之中。     透過以上的調整與擴充功能,讓伺服器與瀏覽器在相互連結工作時能省下更多傳輸時間,也減少了原本複雜的資訊,並兼顧了網站傳輸安全,是項多方改善的優化協定,而應用上特別需注意部分為TLS/SSL 安全性憑證,網站原先使用 HTTP 改成 HTTPS 的這個過程需要較為注意,站內連結與需要連同更換。
在網頁設計上對圖片進行透明度處理是相當常見的, 而定義透明效果的屬性是opacity,能夠設定的數值從 0.0 到 1.0。 數值越小,透明度越高。 而IE8及更早的版本使用filter:alpha(opacity=x)。 x 的值從 0 到 100。 數值越小,越透明。 讓我們看以下範例,左為原圖,右圖將透明度調高: See the Pen <a href='https://codepen.io/bok770/pen/NYzNry/' _fcksavedurl='https://codepen.io/bok770/pen/NYzNry/'>NYzNry</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>.   常見的圖片透明度切換效果, 用hover即可做到, 只要將鼠標移到圖片上即可改變透明度。 範例: See the Pen <a href='https://codepen.io/bok770/pen/xWzVwv/' _fcksavedurl='https://codepen.io/bok770/pen/xWzVwv/'>xWzVwv</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>.
 本站先前介紹過,什麼是AMP網頁?主要是由 Google 貼近行動裝置(手機或平板)瀏覽時,所特別釋出的專案,透過規定的網頁格式與對應的內容,可以另外收錄對應的快取伺服器,達到比傳統搜尋快數倍,流量卻能節省,同時也會優先出現於推薦區塊的優化技術。   一般網站要如何加入這項優化方案呢?可以根據 Google 所釋出的 AMP HTML 對應格式來進行修改設定,當中幾項例子,如HTML標籤可以在AMP HTML中保持不變。但某些標籤具有相同的自定義標籤,其他標籤完全禁止使用,如:   IMG 替換為 amp-img 視頻 替換為 amp-video 音頻 替換為 amp-audio IFRAME 替換為 amp-iframe PARAM 禁止 嵌入 禁止 等....   網頁製作人員透過使用AMP格式,將內容調整後,可以使AMP文件中的內容被抓取收錄(受robots.txt限制),便能另外收錄在Google對應的快取伺服器中。   在設定後若未能完全確認格式是否正確的情況下,Google也貼心的提供了對用 AMP HTML的檢測器:AMP測試 另外提醒,在 Google AMP 剛推廣的情況下,有使用 adsense 廣告的網站,皆面臨到一項較大的影響,就是因為網站 AMP 設定後便能另外收錄在Google對應的快取伺服器中,因此相關訪客流量將是紀錄在網址後方有加上「/amp」的伺服器上,將不會算計在原本網站上的流量,關於這個部分將會大大影響 adsense 廣告收錄效益,因此 Google 也針對此部份推出了改善方案,詳請可以參考如何建立 AMP 相容廣告單元資訊。  
在網頁的文字內容上有時需要劃線以標示重點等等, 可以使用html的 < u > 標籤, 或是CSS的text-decoration屬性。 不過用CSS表現的變化會比較多, 以下介紹此兩種範例:   html的< u >標籤   See the Pen &amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/bvMvbZ/' _fcksavedurl='https://codepen.io/bok770/pen/bvMvbZ/'&amp;amp;amp;amp;amp;gt;bvMvbZ&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;.     CSS的text-decoration 常見的設定值有 none:無底線,為預設值 underline:文字下的底線。 overline:文字上的線。 line-through:穿過文字的線,可以看做是刪除線。 範例: See the Pen &amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/MVGVgw/' _fcksavedurl='https://codepen.io/bok770/pen/MVGVgw/' _fcksavedurl='https://codepen.io/bok770/pen/MVGVgw/'&amp;amp;amp;amp;gt;MVGVgw&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;.&amp;amp;amp;amp;lt;br&amp;amp;amp;amp;gt;   若是覺得底線與文字過於接近, 則是可以使用border-bottom或是box-shadow, 搭配padding-bottom來設定文字與底線的距離。 在底線的呈現上兩者並無太大區別。 兩者的差異在於box-shadow生成的底線不會對排版造成影響, 而border-bottom則因為會增加文字的尺寸,可能會影響元素的排列。 範例: See the Pen &lt;a href='https://codepen.io/bok770/pen/JLvLGy/' _fcksavedurl='https://codepen.io/bok770/pen/JLvLGy/' _fcksavedurl='https://codepen.io/bok770/pen/JLvLGy/'&gt;JLvLGy&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='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' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.
  網站嵌入Google map技術,在行動裝置的進步之下,使用者依靠行動裝置進行查詢、定位、導航已經是習以為常的動作了,因此不論是銷售據點、辦公地點等以地圖形式呈現連結也是現行十分重要的網站資訊,以下將針對大眾普遍通用的 Google map 嵌入技術進行介紹。     在開始嵌入網站地圖之前,我們需要先透過 Google map :https://maps.google.com.tw/maps 來先進行地點的搜尋與定位,這個動作可以確保地點的正確性也是幫助我們產生地圖連結的重要步驟。     透過地圖的定位與確認後,Google map 貼心的設計了地圖外連分享功能,在分享的功能中選擇"嵌入地圖",當中將會產生定位地點的相關程式應用編碼,這編碼其中包含了定位資訊與圖示資訊,是非常完善的對應連結。     由 Google map 所產生的定位編碼加入在網頁的資訊內容中,並加以調整顯示特效及大小比例,將能清楚地讓使用者快速清楚明白相關地點資訊,也有助使用者能更方便快速地找尋到相關地點的定位及導航資訊。 

ARTICLE

8

SiteMap是什麼?

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