前端工程師常用到的流動布局是由這兩項技術組成的!! 還不知道是什麼技術嗎? 那一定要讀一下我們為你準備的這篇~
前端工程師或網頁設計師在撰寫RWD網站時，所使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」）是兩種技術的組合：「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」，介紹如下：Grid Design (網格式設計)在設定相對尺寸 - 百分比 (%) 的同時，也要制定寬度的最大值和最小值。當寬度超過或低於某限制的時後，版面依然可以固定。這樣一來，如果螢幕寬度大於其最大值時，元素的兩側就會留白，如此就可以確保網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。前端工程師或網頁設計師在設計過程中，會使用<div>進行排版，寫法有兩種：「float (浮動) 」與「display-inline-block」1.float (浮動)下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示，但是在行動裝置上，4 個 div 則會依序自動調整排列位置：後方的 div 會自動移至前一個 div 下方。See the Pen float-right-n-left by Tedutw (@Tedutw) on CodePen.過就算位置重新調整，這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊2.display: inline-block跟上面所說的的「float (浮動) 」一樣都可以將元素做到靠左或式靠右對齊，差異是 float (浮動) 會與其他的元素重疊。display-inline-block 就沒有這個缺點。兩者差異的例子如下：See the Pen float vs inline:block by Tedutw (@Tedutw) on CodePen.<
Liquid Layout (液態排版)另一個能達成「流動布局 Fluid Grid」的技術是「Liquid Layout (液態排版)」，主要原理就是把尺寸單位改成百分比來製作版面，使每一個區塊的尺寸都能根據瀏覽器的大小自動做調整，而非以固定的尺寸呈現。參考語法如下：div｛
width: 36%
｝
但是一開始寫網頁時，就使用百分比 (%) 這類的相對尺寸來制定元素的大小是有難度的。這時就可以先以固定尺寸 (px) 來製作，等網頁完成後再轉換成相對尺寸 (%) 。轉換公式參考：子元素的百分比 =｛欲變更元素的固定尺寸 / 父元素的固定尺寸｝*百分比。舉例來說：假設整個網頁版面是用 1024px 固定寬度來設計，而要變更的 div 區塊寬度為 360px，則整個網頁版面可視為父元素；欲變更的 div 區塊則視為它的子元素，此例套用公式則為：｛360px (欲變更元素的固定值) / 1024px (父元素的固定尺寸)｝*百分比 = 35.15625%。除了各子元素可以這樣換算之外，padding 跟 margin 也可以用這個方法來換算，範例如下 :padding: 8px，換算成百分比的公式為：
｛8px / 1024px (網頁版面的固定尺寸，視為父元素)｝*百分比 = 0.78125% 這時 padding: 0.78125%。本篇為「前端工程師的基礎RWD教學」系列文章第二篇，全系列文章如下:
前端工程師的基礎RWD教學系列文章目錄
- 前端工程師的基礎RWD教學(一)RWD基礎概念
- 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
- 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
- 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
- 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
- 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
- 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
- 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image
|
其他閱讀前端工程師RWD教學:Media Type種類表格前端工程師RWD教學:何謂RWD?前端工程師RWD教學:and/not/only各代表什麼?著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
前端工程師一定要會的RWD你們都會了嗎? 在一開始要先來和大家說說何謂RWD~
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
今天要來和各位前端工程師談的是Media Query!! 還不清楚的同學一定要看這篇喔~RWD 網頁設計必備語法：Media Query前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 看成為 CSS 的擴充元件（這樣也會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇文章要講解重點)，再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。Media Query 使用方法如果前端工程師要在HTML5或CSS中使用 Media Query ，則使用方式有下列三種：1. 在 HTML5 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：當螢幕小於 400 px 時，套用指定的 CSS 檔案「Screen.css」：<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">
2. 上面的功能，如果使用 CSS 中使用，則為：＠media screen and (max-device-width: 400px){...}
3. 你也可使用 @import@import "screen.css" screen and (max-device-width: 400px)
看了上面的 Media Query 的使用方法之後，你會發現以上三種的範例中包含了「screen」、「and」和「max-device-width: 400px」。這三者分別為「媒體類型(media type)」、「判斷條件 (and/not/only)」和「媒體特徵 (media feature)」。媒體類型(media type)於此篇文章做說明、and/not/only 判斷條件於本篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。本篇為「前端工程師的基礎RWD教學」系列文章第三篇，全系列文章如下:
前端工程師的基礎RWD教學系列文章目錄
- 前端工程師的基礎RWD教學(一)RWD基礎概念
- 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
- 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
- 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
- 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
- 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
- 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
- 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image
|
其他閱讀前端工程師基礎RWD 1 : RWD的核心概念前端工程師基礎RWD 2 : 何謂流動布局?前端工程師基礎RWD 4 :簡單介紹Media Type著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
不管你是前端工程師還是網頁設計師!! 常常需要用到的流動布局你不能不懂他!! 這篇整理好了請服用~前端工程師或網頁設計師在撰寫RWD網站時，所使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」）是兩種技術的組合：「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」，介紹如下：Grid Design (網格式設計)在設定相對尺寸 - 百分比 (%) 的同時，也要制定寬度的最大值和最小值。當寬度超過或低於某限制的時後，版面依然可以固定。這樣一來，如果螢幕寬度大於其最大值時，元素的兩側就會留白，如此就可以確保網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。前端工程師或網頁設計師在設計過程中，會使用<div>進行排版，寫法有兩種：「float (浮動) 」與「display-inline-block」1.float (浮動)下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示，但是在行動裝置上，4 個 div 則會依序自動調整排列位置：後方的 div 會自動移至前一個 div 下方。See the Pen float-right-n-left by Tedutw (@Tedutw) on CodePen.過就算位置重新調整，這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊2.display: inline-block跟上面所說的的「float (浮動) 」一樣都可以將元素做到靠左或式靠右對齊，差異是 float (浮動) 會與其他的元素重疊。display-inline-block 就沒有這個缺點。兩者差異的例子如下：See the Pen float vs inline:block by Tedutw (@Tedutw) on CodePen.<
Liquid Layout (液態排版)另一個能達成「流動布局 Fluid Grid」的技術是「Liquid Layout (液態排版)」，主要原理就是把尺寸單位改成百分比來製作版面，使每一個區塊的尺寸都能根據瀏覽器的大小自動做調整，而非以固定的尺寸呈現。參考語法如下：div｛
width: 36%
｝
但是一開始寫網頁時，就使用百分比 (%) 這類的相對尺寸來制定元素的大小是有難度的。這時就可以先以固定尺寸 (px) 來製作，等網頁完成後再轉換成相對尺寸 (%) 。轉換公式參考：子元素的百分比 =｛欲變更元素的固定尺寸 / 父元素的固定尺寸｝*百分比。舉例來說：假設整個網頁版面是用 1024px 固定寬度來設計，而要變更的 div 區塊寬度為 360px，則整個網頁版面可視為父元素；欲變更的 div 區塊則視為它的子元素，此例套用公式則為：｛360px (欲變更元素的固定值) / 1024px (父元素的固定尺寸)｝*百分比 = 35.15625%。除了各子元素可以這樣換算之外，padding 跟 margin 也可以用這個方法來換算，範例如下 :padding: 8px，換算成百分比的公式為：
｛8px / 1024px (網頁版面的固定尺寸，視為父元素)｝*百分比 = 0.78125% 這時 padding: 0.78125%。本篇為「前端工程師的基礎RWD教學」系列文章第二篇，全系列文章如下:
前端工程師的基礎RWD教學系列文章目錄
- 前端工程師的基礎RWD教學(一)RWD基礎概念
- 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
- 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
- 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
- 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
- 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
- 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
- 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image
|
其他閱讀前端工程師基礎RWD 1 : RWD的核心概念前端工程師基礎RWD 3 :淺談Media Query前端工程師基礎RWD 4 :簡單介紹Media Type著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
身為前端工程師的你跟Media Query很不熟嗎? 看完這篇包準你會用!!RWD 網頁設計必備語法：Media Query前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 看成為 CSS 的擴充元件（這樣也會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇文章要講解重點)，再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。Media Query 使用方法如果前端工程師要在HTML5或CSS中使用 Media Query ，則使用方式有下列三種：1. 在 HTML5 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：當螢幕小於 400 px 時，套用指定的 CSS 檔案「Screen.css」：<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">
2. 上面的功能，如果使用 CSS 中使用，則為：＠media screen and (max-device-width: 400px){...}
3. 你也可使用 @import@import "screen.css" screen and (max-device-width: 400px)
看了上面的 Media Query 的使用方法之後，你會發現以上三種的範例中包含了「screen」、「and」和「max-device-width: 400px」。這三者分別為「媒體類型(media type)」、「判斷條件 (and/not/only)」和「媒體特徵 (media feature)」。媒體類型(media type)於此篇文章做說明、and/not/only 判斷條件於本篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。本篇為「前端工程師的基礎RWD教學」系列文章第三篇，全系列文章如下:
前端工程師的基礎RWD教學系列文章目錄
- 前端工程師的基礎RWD教學(一)RWD基礎概念
- 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
- 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
- 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
- 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
- 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
- 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
- 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image
|
其他閱讀前端工程師RWD教學:Media Type種類表格前端工程師RWD教學:何謂RWD?前端工程師RWD教學:流動布局原來是由這兩項技術組成的!!著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
前端工程師們在學習RWD之前先來了解一下他的核心概念是什麼吧!!為何會寫 RWD 響應式網站成為當代前端工程師和網頁設計的必備技能？因為 RWD 響應式網站的元素 (圖片、影片等) 可以跟著螢幕大小而變動。響應式網站 (RWD) 是基於流動布局（Fluid Grid）、流動圖片 (Fluid Images) 以及媒體查詢（Media Queries）等核心三個概念的技術的組合，而呈現出非固定尺寸的網頁狀態，有別於以往固定寬度的網頁布局。這在網頁設計中也是非常重要的。簡介如下：流動布局（Fluid Grid）流動布局（Fluid Grid，又稱「液態布局」或「液態網格」）的原理，是將網頁的各種元素，以可以縮放、浮動的區塊來做配置，讓網頁中的各種元素，能隨著不同的瀏覽介面，而自動縮放大小以及調整排版。例如，A 網頁中有兩個區塊可在電腦螢幕上並排展示，但在手機上因螢幕寬度太小而無法並排顯示時，後面的區塊就會自動排到前一個區塊的下方，所以不會產生水平卷軸 (Scrollbar)。在流動布局中，寬度也常以百分比 (%) 為單位 (傳統的網頁常以像素 px 作為唯一單位)，因此可讓網頁能依照裝置的螢幕尺寸，自動依照比例進行調整，就如同液體會依照裝填容器不同而隨其變化形狀。媒體查詢（Media Queries）媒體查詢（Media Queries）如字義所示，就是網頁會先「查詢（query)」「媒體 ( media )」的屬性，再針對這些屬性值而決定要給網頁什麼樣的樣式。簡單的說，就是針對你的裝置，給你不同的樣式設定。在這些屬性包含設備類型、解析度、螢幕的尺寸等。在網頁上常用媒體類型 (media-type) 的為 all (所有裝置)、screen (螢幕裝置)、print (印刷裝置) 等。而常見媒體特徵 (Media Features) 有 min-width (最小寬度)、 max-width (最大寬度) 、resolution (解析度)、color (顏色) 等。流動圖片 (Fluid Images)因應 RWD 流動布局的特性，其圖片的尺寸也必須更靈活的隨著裝置螢幕大小而伸縮自如，是為「流動圖片 (Fluid Images)」。流動圖片 (Fluid Images)的尺寸也同流動布局以百分比 (%) 為單位。關於 Viewport在建構 RWD 網站的第一步，就是在網站開始的地方加入「Viewport」語法。語法如下：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=0.5, user-scalable=no">以上語法可以分成「initial-scale」、「maximum-scale」、「initial-scale」、「minimum-scale」、「user-scalable」與 device-width 五個部分來解釋，說明如下：width=device-width使用 device-width (裝置寬度) 作為可視域的寬度initial-scale=1.0「initial-scale」意思是「初始的比例」，「1.0」的意思是 100%，其數值範圍從 0.1 (意思是10%) 到 1.0 (意思是100%) 可任填。maximum-scale=1.5「maximum-scale」意思是「最大的縮放尺寸」，在此例中，最大的縮放尺寸為 1.5 比例。minimum-scale=0.5「minimum-scale」意思是「最小的縮放尺寸」，在此例中，最小的縮放尺寸為 0.5 比例。user-scalable=no「user-scalable」意思是「是否允許使用者自行縮放」，no 為不允許、yes 為允許。在此例中為 no。本篇為「前端工程師的基礎RWD教學」系列文章第一篇，全系列文章如下:
前端工程師的基礎RWD教學系列文章目錄
- 前端工程師的基礎RWD教學(一)RWD基礎概念
- 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
- 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
- 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
- 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
- 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
- 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
- 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image
|
其他閱讀前端工程師基礎RWD 2 : 何謂流動布局?前端工程師基礎RWD 3 :淺談Media Query前端工程師基礎RWD 4 :簡單介紹Media Type著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
偷偷告訴你圖片SEO小祕密最終一回!! 圖片格式挑選和圖片sitemap生成一定要搞懂!! 更要好好學起來!!
目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
2-1. 使用合適的圖片檔名
2-2. 優化 alt 文字
2-3. 能不用圖片就不要用圖片
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
2-5. 圖片寬度別超過網頁的內容
2-6. 圖片 Exif 資訊 - 視狀況而刪除
2-7. 選擇適當格式的圖片檔
2-8. 創建圖片的 sitemap (進階) |
7.選擇適當格式的圖片檔大多數網頁上呈現的圖檔，不外乎這三種：jpeg、png、gif。這三種圖檔都有不同的壓縮方式。而如同前篇所述：越小的尺寸，對網頁載入的速度就越快。而網頁載入的速度對 SEO 品質有關鍵性的影響。同一張圖片，以何種形式為檔案，才是最小的呢? 我們拿一張圖片分別存成 GIF、JPEG (JPG) 與 PNG 檔來試試：
由以上結果可知，jpg 檔的尺寸是相對較小的。那網頁圖片選擇 jpg 檔是最好的囉？有時未必！ 一般來說，若圖片的類型是照片的話，通常存成 jpeg(jpg) 檔是最合適的、線條圖畫與文字則是 PNG 檔、動畫則是 GIF 檔。 GIF、JPEG (JPG) 與 PNG...我該存成哪種檔案？ GIF 格式雖然算是一種無失真的圖像壓縮標準 (無失真不等於高清解析度)，但是顯示的顏色被限制成只有 256 種，因此適用於不需太高解析度的動態圖。 JPEG (JPG) 格式是具有破壞性的圖片壓縮格式，所以可壓縮的尺寸相對也較小。適用於照片。 PNG 格式也是一種無失真的圖像壓縮標準 (無失真不等於高清解析度)，且顯示的顏色也不像 GIF 般被限制，因此 PNG 檔案尺寸比前兩者大。PNG 格式適用於圖片中的線條與文字必須要很清楚地顯現的場合、或是小尺寸的 LOGO、ICON 等。去過背的 PNG 圖可在網頁上以去背的方式呈現，不會遮住後面。因此常被用於 LOGO 圖、ICON 等。 若前端工程師們想轉換圖片的格式，但是電腦沒有安裝 Photoshop 等影像處理軟體，可以試試線上的免費圖檔轉換工具。 8.創建圖片的 sitemap (進階) 相信許多創建網站 sitemap 對許多 SEO 優化師來說是非常基本的，而且現在已經有許多線上工具可以自動幫你生成網站的 sitemap，但是至於圖片的 sitemap 來說，這些工具多只有生成最基本的 <image:image> 與 <image:loc> 標籤。 而根據 Google 官方對於圖片 sitemap 的說明如下： 圖片 Sitemap 資訊有助於 Google 發掘原本可能找不到的圖片 (例如您的網站使用 JavaScript 程式碼連結圖片)，並可讓您為 Google 指出要對網站上的哪些圖片進行檢索及建立索引。您可以使用另一個 Sitemap 來列舉圖片，也可以將圖片資訊加入現有的 Sitemap。以下範例說明的是 「http://example.com/sample.html」這個網頁的 Sitemap 項目，該網頁包含兩張圖片。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset> 使用上述範例中的語法架構時，每個網頁最多可以列出 1,000 張圖片！ 此外，根據 Google 官方說法，適用於圖片的標記如下所示：
標記 |
是否必要 |
說明 |
|---|
<image:image> |
是 |
包含單一圖片的所有資訊。每個 <url> 標記最多可包含 1,000 個 <image:image> 標記。 |
<image:loc> |
是 |
圖片的網址。
在某些情況下，圖片網址和您的主網站可能不會位於相同的網域中。
Search Console 會同時驗證圖片和網站所在的網域，所以您無需擔心。
舉例來說，如果您使用內容傳遞網路 (例如 Google 協作平台) 代管圖片，請確認代管網站已經過 Search Console 驗證。
此外，請確認 robots.txt 檔案允許 Google 檢索您要建立索引的任何內容。
|
<image:caption> |
選用 |
圖片的說明文字。 |
<image:geo_location> |
選用 |
圖片所顯示的地理位置。例如：<image:geo_location>Limerick, Ireland</image:geo_location>。 |
<image:title> |
選用 |
圖片的標題。 |
<image:license> |
選用 |
圖片授權的網址。 |
部落格裡還有許多關於SEO和HTML5的文章!! 正在學習SEO和HTML5的準前端工程師們有需要可以多看看喔~ 其他閱讀偷偷告訴你圖片SEO小秘密(一): SEO圖檔命名技巧與alt文字密技偷偷告訴你圖片SEO小秘密(二): SEO能不用圖片就不要用圖片?偷偷告訴你圖片SEO小秘密(三): 為什麼不要用width和height來縮小圖檔?不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!想學世界五大熱門程式語言,那你一定不能錯過Java課程!!報名對的UI課程讓你上天堂!! 高薪就業就這行!!美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
你一定想不到整體網站規劃流程跟前端工程師也有關係吧!這不只是網頁設計師要關心的事而已~下面馬上告訴你為麼!!AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。在規劃網站時，相信有不少的 PM 在與前端工程師或是網頁設計師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。讀完本系列文章後，你將會了解：
(目錄)
- RWD 和 AWD 的差異與優缺點
- 我該選擇 RWD 還是 AWD ?
- AWD 要怎麼做才能對 SEO 無痛?
- 了解整體網站的規劃流程-PM與前端溝通更順利
|
與前端溝通更順利！從了解整體網站的規劃流程開始無論是設計網站或是 APP 開發，合理的設計四流程為：Sketch、 Wireframe、 Mockup、 Prototype。#1 Sketch (草圖)這個是大家一起腦力激盪的階段，只需要用筆和紙將腦中的想法粗略的勾勒出來-這也是最快得到靈感的方法。就算是粗糙不堪的草圖，也比文字更能夠表達、整合、具象化大家的想法，是在進入到 Wireframe (線框稿)之前的必備步驟。需要工具：筆與紙擬真度：最低階段目標：溝通、整合大家的想法與創意#2 Wireframe (線框稿)Wireframe (線框稿)階段的重點在於釐清需求與確認網頁上一定會出現的功能。因此必須先排除視覺元素的討論，單單專注在功能的規劃，避免失焦。線框稿會以簡單的草稿圖，以低擬真度的方式呈現網頁上的主要資訊、排版與架構，和如何與使用者互動等。通常設計師會使用 Balsamiq 提供的 Wireframe 工具、或是 powerpoint 、手繪等方式，以黑白的方格、線和圖來呈現不同的層級，其元素必須要非常精簡，是為了避免討論時失焦，加速效率和速度。某些還未確定的內容，就先利用方框或假文字來表示，像是圖片、影片與文字等等。所以，在 Wireframe 階段不能出現過度的細節，像是說網頁的字型選用、 Button 的陰影、首頁輪播圖的大小等等。需要工具：可以用 Balsamiq、Powerpoint、Photoshop、Illustrator...依照個人習慣而定擬真度：低階段目標：功能導向設計，整合產品團隊中的成員意見達到共識#3 Mockup (視覺稿)UI 設計師會依據 PM 確定好的 Wireframe 介面，使用 Axure 等網站視覺模擬軟體進行網站視覺設計上的配色、排版、配色等，以增強使用者體驗網站的效果。在製作 Mockup 的途中，UI 設計師必須數度與 PM 討論網站的功能、呈現的效果，還有與前端工程師溝通特效製作和開發成本與可行度以進行取捨。此時設計出來的 Mockup 圖經過客戶確認後，下一步就是直接交由前端工程師根據 Mockup 稿進行開發，所以在 Mockup 階段和最終網頁的外觀會完全一致，但是尚未無真正能操作的功能-不能操作、不會動、靜態。(如同手機無功能的模型機的概念)。 推薦工具：Axure擬真度：中階段目標：確認網頁的視覺呈現，而這個視覺是以達成網頁的各項功能為前提而制定。#4 Prototype (原形)Prototype (原形) 可將網站以高擬真的方式呈現，是幾乎將真正要上線的網頁的各項功能模擬出來。上一階段的 Mockup (視覺稿) 是無功能的靜態樣板，那在這一個階段則是加入各項互動的功能：如下拉選單、動態內容、狀況邏輯設定、計算、動態 Hide/Show Layer 效果等許多互動的物件與功能，並允許使用者可以設定點擊、Mouse over 或手指滑動觸發互動，可任意加入註解與超連結，幾乎是完全模擬真實網站的意像。推薦工具：Axure擬真度：高階段目標：Debug 問題、確保網站的所有功能達都能到業主的設定目標。 本系列文章前三篇:1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?
3.AWD 要怎麼做才能對 SEO 無痛? 其他閱讀CSS語法格式第一要點!! 前端工程師們快學起來~前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼前端工程師專欄:CSS套入HTML中的四種方法~最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!中國IT教育領導品牌 達內教育集團第一家海外授權中心
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
今天的偷偷告訴你圖片SEO系列文章要來說的是設定寬度和Exif對SEO有沒有幫助~還不會的要快學起來喔!!
目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
2-1. 使用合適的圖片檔名
2-2. 優化 alt 文字
2-3. 能不用圖片就不要用圖片
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
2-5. 圖片寬度別超過網頁的內容
2-6. 圖片 Exif 資訊 - 視狀況而刪除
2-7. 選擇適當格式的圖片檔
2-8. 創建圖片的 sitemap (進階) |
5.圖片寬度別超過網頁的內容圖片的寬度應該要和網頁內容的寬度一致。如以下的部落格在 27 吋螢幕上的顯現，看看左右兩邊是否有許多留白?
紅色框起來的部分為左右的留白。那是因為這個部落格為了要與行動裝置相容，他們 RWD 的做法限制內容的寬度最大為 720px。其實現在很多 RWD 網站也是使用類似的法 - 限制內容的寬度。 因此你上傳的圖片，寬度就不要大過 720px。雖然你可以透過 CSS 設定，將寬度過大的圖片自動縮小來顯示，但是這樣做的話，網頁圖片的尺寸還是沒有變，而且過大的圖片會拖累網頁載入的速度。對 SEO 來說，網頁載入的時間是分秒必爭的。所以還是不要偷懶，花個一分鐘，將圖片拉到 Smart Resize 工具將圖片的寬度縮小吧！(高度也要同步以等比例的方式來縮小) 不是從HTML5的width與heigh上下手喔!! 6.圖片 Exif 資訊 - 視狀況而刪除 圖片檔案內除了有與圖片相關的資訊外，還可能有許多對 SEO 沒有用處的資訊 (如 Exif、Exchangeable image file format) 等。這些資訊不但對搜尋引擎判斷圖片資訊沒有幫助，還會增加圖片檔案的大小，因此要適度地來去除這些額外資料。Google 官方推薦的圖片尺寸最佳化工具Imageoptim 的預設為：壓縮你圖片的同時，也刪減了 Exif 資訊。 但若你的圖片用途是作為 Local SEO 的話，也許就要保留 Exif 的資訊了。雖然 Google 官方到目前為止並未表明他們的搜尋引擎會抓取 Exif 中的 GPS 經緯度座標，來影響地區性的 Google 搜尋引擎排名，但是大多數的 SEO 專家都認為 Exif 中的地點資訊對於該地區的搜尋引擎排名有一定的影響。 如果想知道更多關於圖片SEO的文章或是更多HTML5的文章,歡迎瀏覽我的部落格其他文章喔~ 其他閱讀偷偷告訴你圖片SEO小秘密(二): SEO能不用圖片就不要用圖片?偷偷告訴你圖片SEO小秘密(三): 為什麼不要用width和height來縮小圖檔?偷偷告訴你圖片SEO小秘密(五): 圖片格式挑選和圖片sitemap生成不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!想學世界五大熱門程式語言,那你一定不能錯過Java課程!!報名對的UI課程讓你上天堂!! 高薪就業就這行!!美國NASDAQ上市公司、外商IT教育培訓企業
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
網頁設計內容千千萬萬種!每一種妳都學會了嗎?今天要來和大家談談如何讓AWD對SEO沒有殺傷力!快學起來吧!!AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。在規劃網站時，相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。讀完本系列文章後，你將會了解：
(目錄)
- RWD 和 AWD 的差異與優缺點
- 我該選擇 RWD 還是 AWD ?
- AWD 要怎麼做才能對 SEO 無痛?
- 了解整體網站的規劃流程-PM與前端溝通更順利
|
AWD 要怎麼做才能對 SEO 無痛?很多人都說 AWD 對 SEO優化 不利。那是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程，索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址，所以流量自然會分流，對 SEO 當然有負面影響！觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ，會發現行動版的網址前面多會有個 「m.」 的開頭，就是這樣的情況。但我們先回到原點，弄懂 AWD 的基本原理，其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下，判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟，才可以集中流量在同一個網址中，對 SEO 或品牌辨識度都比較好，就不會有前面提到 「分流」 的問題，也不會影響到 SEO。也有利於UI/UX所以不要再說 AWD 對 SEO 不利了！不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址」 的作法。你所需要的，是要把行動版與桌機板使用同一個 URL。 繼續看本系列文章下篇:4.了解整體網站的規劃流程-PM與前端溝通更順利 本系列文章前二篇:1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ? 其他閱讀CSS語法格式第一要點!! 前端工程師們快學起來~前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼前端工程師專欄:CSS套入HTML中的四種方法~最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!中國IT教育領導品牌 達內教育集團第一家海外授權中心
Java瑪奇朵 發表在
痞客邦
留言(0)
人氣()
