文章專區

最新網頁設計文章

 CSS的border屬性可以設定區塊的邊框,預設值為none,常見的有以下: border-style:邊框樣式 border-top: 上框線 border-bottom: 下框線 border-left: 左框線 border-right: 右框線 border: 四邊框線 border-width: 邊線的寬度 border-color:邊線的顏色   範例: border-top:1px solid #000 border-bottom:4px dotted #009FCC border-left:2px dashed  #FF8800 border-right:1px solid  #7A0099   我們可以分別為四邊設定不同的數值,如果說四邊的屬性都一樣時, 可以直接寫border統一描述,而不用四邊都各寫一次。 範例: border: 1px solid #4d4d4d   border-width 屬性是用來設定邊框的寬度。 可用的值除了數字以外,也可以用 thin (薄)、medium (中等)、thick (厚)。 範例: border-width: thin     border-style則可以設定邊框的樣式 設定值如下: border-style:solid 實線  border-style:dotted  點線  border-style:dashed  虛線  border-style:double  雙線  border-style:groove  凹線  border-style:ridge 凸線  border-style:inset 嵌入線  border-style:outset 浮出線   範例: See the Pen <a href='https://codepen.io/bok770/pen/RyrgRe/' _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/' _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/'>RyrgRe</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 在 2018 年新年一月份就發佈了 Mobile-friendly websites 這項消息,從訊息的開頭就提到了:"行動科技正在改變世界。如果您尚未建立適合透過行動裝置瀏覽的網站,我們極力推薦您這麼做,因為大部分造訪您網站的人很可能都是使用行動裝置。",由此開宗明義的讓所有人能明白,網站經營的趨勢已經正在行動化! Google 考量了除了近年建置的新網站之外,以往至今,大多數網頁站台都是從電腦版網站為基礎建構,面對來勢洶洶的行動化,如果您不知道自己的網站是否適合透過行動裝置瀏覽,Google 也貼心的推出了"行動裝置相容性測試"提供以往內容的檢測與改善建議。   行動裝置相容性測試這項服務有效的提供了客觀與專業的檢測和建議,不論對於有經營一定時日的傳統網站還是即將上線的新網站都提供了實質的剖析。   在檢測中主軸便以簡單明確的顯示告知當前的網站是否合適透過行動裝置瀏覽     從不適合透過行動裝置的分析可以大約瞭解,行動裝置的設計主要針對了:文字大小、閱讀方便性、內容寬度是否超出螢幕顯示範圍、設定檢視點、可點選的元素之間距離是否太近。這幾個項目進行審核,並提供改善建議。   根據建議修正的部分,將網站調整至正確的方向,便能有效改善頁面在行動裝至上的友善使用性,在進行改善檢測後,Google 也提供優先索引的提交功能,讓您的網站在行動裝置優化後能夠有效馬上受到搜尋引擎的重視與收納。
 本站先前也介紹過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)的連線測試。    在包含了行動連線之外,更考量了行動裝置視窗大小不一的問題,真對網站內容在行動視窗上呈現的友善、易讀性進行瞭解、評估。   還加入了其他相似網站的相關評比動作,讓網站的檢測不再只是閉門造車,讓網站的成長格局更加廣闊。   比較得特別的地方在於,此項測試功能將分析的成果分為簡易的連線速度測量、客戶流失率原因,和需要經由"信箱"取得的詳細報告。       透過信箱取得的詳細報告內容包含了:看來沒問題、建議修正、應該修正 評比與建議。網站便能針對這些行動體驗項目更加精進。  
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 &lt;a href='https://codepen.io/bok770/pen/GxbGXW/' _fcksavedurl='https://codepen.io/bok770/pen/GxbGXW/'&gt;GxbGXW&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;.  也可以自設定圖片作為鼠標,寫法: { cursor: url(圖片的檔案路徑); }  

ARTICLE

5

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 的這個過程需要較為注意,站內連結與需要連同更換。
 本站先前介紹過,什麼是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 相容廣告單元資訊。  
在網頁設計上對圖片進行透明度處理是相當常見的, 而定義透明效果的屬性是opacity,能夠設定的數值從 0.0 到 1.0。 數值越小,透明度越高。 而IE8及更早的版本使用filter:alpha(opacity=x)。 x 的值從 0 到 100。 數值越小,越透明。 讓我們看以下範例,左為原圖,右圖將透明度調高: See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/NYzNry/' _fcksavedurl='https://codepen.io/bok770/pen/NYzNry/'&amp;gt;NYzNry&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;.   常見的圖片透明度切換效果, 用hover即可做到, 只要將鼠標移到圖片上即可改變透明度。 範例: See the Pen &amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/xWzVwv/' _fcksavedurl='https://codepen.io/bok770/pen/xWzVwv/'&amp;amp;amp;gt;xWzVwv&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;.
在網頁的文字內容上有時需要劃線以標示重點等等, 可以使用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

10

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)有著極大的幫助喔!