前端工程師入門RWD教學(二)流動布局

想靠前端工程師想要發大財,首先你要知道什麼是RWD教學裡的流動布局.

前端工程師在撰寫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教學(一)基礎概念

前端工程師入門RWD教學(三)Media Query之使用方法

前端工程師入門RWD教學(四)流動圖片Fluid Image

前端工程師初學者第一課:CSS代碼特性好簡單!

前端工程師初學者第二課:Class選擇器怎麼用?

前端工程師初學者第三課:ID選擇器怎麼用?

達內課程先就業再付款- 中時電子報

前端工程師入門RWD教學(一)基礎概念

前端工程師想要發大財就一定要懂網頁設計的RWD基礎技能!

筆者會決定寫 RWD 響應式網站的基礎教學,是因為認為RWD是當代前端工程師的 網頁設計 必備技能之一. 響應式網站 (RWD) 是基於流動布局（Fluid Grid）、流動圖片 (Fluid Images) 以及媒體查詢（Media Queries）等核心三個概念的技術的組合，RWD 響應式網站的元素 (圖片、影片等) 可以跟著螢幕大小而變動,而呈現出非固定尺寸的網頁狀態。有別於以往固定寬度的網頁布局。簡介如下：

流動布局（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教學(二)流動布局Fluid Grid

前端工程師入門RWD教學(八)Media Query之媒體特性-下

網頁設計時,要如何達到無痛優化呢?

前端工程師要如何將字體單位學得好?看這就對了!-絕對單位篇

前端工程師要如何將字體單位學得好?看這就對了!-相對單位篇

前端工程師之"盒子模型"大解密!(上)-邊界

前端工程師之"盒子模型"大解密!(下)-邊框.留白

從事網頁設計的你,知道什麼是無痛優化嗎?

從事網頁設計的你,如果對無痛優化還不熟,你一定要看看這篇,還能同時學到如何用AWD偷吃步呢!

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。
所以不要再說 AWD 對 SEO優化 不利了！不利 UI 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址」 的作法。你所需要的，是要把行動版與桌機板使用同一個 URL。
繼續看本系列文章下篇:
4.了解整體網站的規劃流程-PM與前端溝通更順利
本系列文章前二篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?



參考連結:

前端工程師必備懶人包:網頁顏色代碼對照表

前端工程師的必備知識:ID選擇器宣告法

中國達內教育與知名科技公司合作,引領數位化職業教育風潮

啥?你還不知道Python有多重要嗎?還不快點進來!

關於前端工程師,這兩個CSS標籤必學-(上)Div標籤

關於前端工程師,這兩個CSS標籤必學-(下)Span標籤

 程式課程選達內，美上市IT課程教育集團

什麼都騙不過它!地表最強人工智慧影像辨識

人工智慧強大到深入你我的生活之中,人工智慧技術隨處可見!

近年 人工智慧 ( AI ) 已經應用到很多專業的產業領域中，如醫療、咖啡、零售、人臉合成、養殖業、無人駕駛、救流浪貓等等。知名科技公司 Google 也展現了將人工智慧技術帶入日常生活的決心，並推出了新一代機器學習產品。正在學習 Python 的你,對於這些資訊應該不陌生.本文要介紹的 Google Vision API 為 Google Cloud 提供的 人工智慧 影像辨識工具，還被聯合利華 Unilever 採用、傢俱大廠 IKEA 也透過 Cloud Vision API 打造一款商品搜尋應用程式，消費者只要對產品拍照，立即就能得知詳細資訊。

目錄 動手玩玩 Google Vision API 標籤偵測（LABEL_DETECTION） 臉部偵測（FACE_DETECTION） 煽情露骨內容偵測（SAFE_SEARCH_DETECTION） 標誌偵測（LOGO_DETECTION） 地標偵測（LANDMARK_DETECTION） OCR 文字辨識（DOCUMENT_TEXT_DETECTION）

 

動手玩玩 Google Vision API

Google Vision API 就像是 Google 的照片搜尋功能，主要能夠讓機器學習圖片中的物件 (如人臉、商標 Logo、圖片中的文字等等)，還可以偵測是否有暴力色羶腥的內容等等。簡單而言，Vision API 會自動辨認照片出現的物品並逐一做標籤。
只要點我打開 Google Cloud Vision API 的網頁，將圖片拖曳進下圖中的紅色區域，就能無痛、無料試玩大多數的 API 功能。

API 功能可簡單分成臉部辨識、標籤偵測、Web、文本辨識等等，下面將會就各個功能分別做說明。

 

標籤偵測

今天我們上傳一張圖片，API 就會回傳一組或多組回應。下圖為我們上傳一張貓咪圖片的範例，API 回傳了多組回應。

每一組回應包含三個值：mid、description 以及 score。上圖中右側顯示有 description 以及 score。

description：這就是對該物件的文字敘述，例如：Cat(貓)、Mammal(哺乳類)等；而 score 就是 Cloud Vision API 對於這個敘述的信心分數。如此例中 Cat 為 100%，代表 API 認為 「貓」 是圖片中的主題，因此給了最高分。 其他敘述還有 Mammal(哺乳類)99%、Felidae(貓科動物)97%、Tabby Cat(虎斑貓) 95% 等。利用這個文字敘述，可以輕易找出照片內容關鍵字，對於大量照片的分類、關鍵資訊的抽取都很有幫助。
而 mid 值則是 Machine-generated identifier(機器合成辨識)的縮寫，要點選 「Show JSON」 才會看的到。如果 API 偵測出的物件或特徵是知識卡裡面的資料，那麼mid 值就會秀出該物件在知識圖譜中的位置 (如下圖紅框內容所示)：

 

臉部偵測

可以偵測輸入圖片中的多個臉孔，並可針對圖片中的每個臉，個別指出臉部的喜怒哀樂、特徵、位置、是否有戴眼鏡、是否模糊等。

點選 「Show JSON」 則可以看到更細部的分析，包含左右眼的位置、眼睛上下緣的位置、人臉的仰角、傾角、可能的情緒狀態等極細微的特徵

 

煽情露骨內容偵測

此功能可偵測 5 種內容：adult(成人)、spoof(詐騙)、medical(藥物)、violence(暴力)、racy(性刺激)，幫助使用者過濾出可能有爭議而不適合顯示的圖片。
下圖為使用裸體假人圖測試 API 的結果。API 則依據假人的裸體判斷此圖 「可能」 含有 adult(成人)及 racy(性刺激)的內容。

 

標誌偵測

此功能可偵測出圖片中是否含有著名商標。以下圖為例，賽車上的 「Red Bull」 就被偵測出來了。

 

地標偵測

此功能可偵測出圖片中是否含有著名地標。以下圖為例，台北 101 的地點、經緯度都被偵測出來了。

 

OCR 文字辨識

這功能很強大，能抓取圖片中出現的文字，可存成文字檔，省去輸入謄稿的時間。

參考連結:

人工智慧淪為網路寫手,真假傻傻搞不清楚

Python小趣知:這種人易患覺得自己是冒牌貨的精神疾病?

想進IT產業,Java和Python這兩種程式語言你不能不知道!

搶救低薪大作戰,再不來上Java課程就來不及了!

不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

達內教育開幕　培養台灣IT人才進入全球企業 

別惹前端工程師不開心!想順利工作你得清楚這件事...

是否常常與前端工程師在溝通上生氣氣呢?先了解網站的規劃流程,是雙方合作的第一步!

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基礎功之逗號.空格的差異

設定CSS背景重複顯示原來這麼簡單?前端工程師看過來!

身為前端工程師的你,還不會將CSS背景固定?快進來學!

程式課程選達內，美上市IT課程教育集團

達內時代科技教育集團簡介

前端工程師發大財手冊:必懂RWD和AWD的差異與優缺點

想當前端工程師的你,一定要知道RWD和AWD的差異與優缺點!不然可能很難發大財!愛租意!

AWD 跟 RWD 的目標相同，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。
在規劃網站時，相信有很多的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸，例如像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。

讀完本系列文章後，你將會了解：

(目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是 AWD ? AWD 要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利

RWD 和 AWD 的差異與優缺點

在網頁上，RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫；而 AWD 則是 「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法，讓網頁設計無論在桌機螢幕上、或是尺寸較小的行動裝置上，都能清楚的呈現，讓使用者能更舒服的瀏覽網頁。

RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套 CSS，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。

RWD 與 AWD 的差異，簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下：

RWD 會把所有裝置的樣式都寫在同一套 CSS 中，因此無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用到 CSS 中的哪一個樣式。

AWD 是針對各種裝置撰寫對應的 CSS，因此就會針對不同的裝置，而有多套的 CSS 樣式碼：例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式，來判斷使用者是使用哪種裝置開啟網頁，再自動匯入相應的 CSS 檔案：如程式判斷出某使用者是使用桌機瀏覽網頁的話，就會自動匯入桌機的 CSS 樣式檔案；若是使用手機開網頁，就匯入手機的 CSS 樣式檔。

RWD、AWD 的優缺點比較

RWD 與 AWD 只是方式不同罷了，沒有所謂的哪個比較好，優缺點比較如下表：

RWD vs AWD 優缺點比較

	RWD	AWD
相同之處	兩種都會判斷裝置而顯示出對應的樣式。
不同之處	無論行動裝置或是桌機，都使用同一套 CSS。 當使用者打開了網頁，就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。	針對各種裝置撰寫對應的 CSS，因此會有多套 CSS，一般來說會有兩套 CSS：桌機專屬的一套 CSS，手機專屬的一套 CSS。 當使用者打開了網頁，程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。
優點	節省網站製作成本 因為無論是桌機、手機的樣式，全都只塞在同一套 CSS 檔案，所以開發成本較低，適合內容較單純的網站、新創公司或是個人工作室使用。 SEO更方便 因為同一個網頁、URL 也只有一個，所以更方便 SEO。	網頁維護更分明，不怕樣式被吃到 雖然成本較 RWD 高，但是由於桌機與手機的 CSS 分別在不同的檔案，因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼，不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。 有利於 UI/UX 若對畫面顯示的要求較高，希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時，就適用 AWD，可針對不同的瀏覽介面而做出對應的 UI/UX，讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。 行動裝置網頁載入更快 可針對行動裝置而做優化，將原本的大圖縮減成最合適的尺寸，減少不必要的大圖，就能加快行動裝置的網頁 loading。
缺點	開發容易、維護耗時： 全部的樣式碼都一窩蜂塞在同一套 CSS 裡面，所以在網頁維護上較不容易，常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況，很可能修改某個樣式碼，卻也影響到了其他不需修改的樣式碼，而導致網站 「跑山」 的窘境。 行動裝置網頁載入恐會更慢 因為所有的裝置都使用同一個 CSS 碼，所以較無法針對行動裝置做圖片顯示的最佳化，加上 RWD 網頁的機制是將資訊先下載後，再根據裝置大小重新排列，所以會較慢。	維護較容易，但開發成本高： 一開始需要針對不同的裝置而寫出好幾套 CSS，耗時耗力，且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求，還需另請工程師將同一網頁的多套 CSS 串在同一個網址內，否則流量會自動被手機與桌機瓜分。

繼續看本系列文章下篇:
2.我該選擇 RWD 還是 AWD ?
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利




參考連結:

前端工程師必學的CSS應用(上):Div篇

前端工程師必學的CSS應用(下):Span篇

前端工程師必學技能:CSS如何替HTML"化妝"

CSS多重名稱之中小小的差別,前端工程師今天教你分辨!

大放送!前端工程師的所需技能就攤在這啦!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

達內教育開幕　培養台灣IT人才進入全球企業

有經驗的前端工程師都知道,想無痛SEO得靠AWD跟RWD

前端工程師新米的你,RWD和AWD的差異是否熟透了呢?這篇很適合剛入門的你!

AWD 跟 RWD 的目標相同，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。
在規劃網站時，相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸，例如像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。

讀完本系列文章後，你將會了解：

(目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是AWD? AWD要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利

該選擇 RWD 還是 AWD ? 先看看自己的需求吧！

當下 RWD 正夯，但並不代表所有的網頁都適用 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力，再視情況決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單整理如下表所示：

RWD vs AWD 簡易比較表

	RWD	AWD
人力需求	較少，因為只有一套 CSS	較多 (因為需要多套 CSS)， 需要網頁人才與尚需前端工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式
維護成本	較少，因為只有一套 CSS	較多，因為有多套 CSS 以及程式
適用內容	網站內容較單純時適用。 如簡單的企業形象網站、一頁式網站等等。	網站內容較多、較複雜時適用。 如博克來、MOMO 購物網、蝦皮拍賣等。
適用排版	較簡潔的畫面與排版	較多元化、複雜的畫面與排版
SEO 支援	SEO 優化、維護較容易	同左，但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址，導致流量分散。 工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS
可支援的裝置	各裝置都適用	各裝置都適用

以上表格建議一行一行仔細看過。 以下再作補充說明：

評估現有的資源人力

只需要寫一套 CSS 的 RWD 所耗的時間與成本一定比 AWD 還快又省，適合小型網頁、新創產業或是各方面資源有限的狀況下。幾近客製化的 AWD 網頁雖然有利於做 UI / UX，但是需要前端工程師來撰寫判斷使用者來配對 CSS 的程式，且若想要做 SEO 的話，也是需要前端工程師把多套 CSS 串在同一個 URL 的。

對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！

若有足夠的預算，且希望使用者無論使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下，就選擇 AWD 吧！往後在網頁維護上，前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改，且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行，但是若 CSS 樣式寫得不夠嚴謹的話，則恐怕不同的裝置會寫到同一種 style，這時就需要花更多時間來修復，反而浪費更多成本。

繼續看本系列文章下篇:
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利
本系列文章前一篇:
1.RWD 和 AWD 的差異與優缺點


參考連結:

前端工程師基礎知識之一:Class選擇器宣告法!

前端工程師人人必備懶人包:網頁顏色代碼對照表

前端工程師的基礎知識:ID選擇器宣告法

前端工程師必學的兩個CSS標籤(上)

前端工程師必學的兩個CSS標籤(下)

NOWnews 今日新聞

中國IT教育領導品牌　達內教育集團第一家海外授權中心

SEO圖片優化攻略(5)-圖片格式與sitemap

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圖片優化八大招式之(1)-圖檔命名與alt文字密技

SEO圖片優化八大招式之(3)-別靠HTML來改變圖片尺寸

SEO圖片優化八大招式之(4)-圖片寬度與Exif資訊

想把網頁用的五顏六色?這篇讓你成為心目中的前端工程師! 

HTML繼承關係是什麼?想成為前端工程師快來看

美國NASDAQ上市公司、外商IT教育培訓企業

達內教育學員見證