布萊恩的創業小窩的部落格

作為前端工程師,你該不會還不知道RWD網頁和傳統網頁設計的差別吧!!?
在智慧型手機等行動上網的裝置普及之前，早期的前端工程師與網頁設計師在做網站時較輕鬆。因為網站只需適應一種規格，在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下：
從上圖可以看出，在開發 RWD 網站時，若要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求，就要開發出 4-5 種版面，無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段，必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、程式撰寫，再根據不同的尺寸斷點進行反覆測試、調整與修正。
(相關文章：Media Query使用方法、Media Query中的視窗與頁面尺寸媒體特性一覽表)。
在著手各種載具版面的設計前，應先根據與客戶討論後的結果，粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型，是在除去所有視覺設計細節 (如色彩、字型等) 之下，進行頁面架構、功能與內容的規劃，藉此更能集中地檢視整個介面流程和架構，方便與客戶溝通想法。
(相關文章：與前端溝通更順利！從了解整體網站的規劃流程開始)。
網頁框架規劃 (Wireframe) 是運用方塊、文字線條，把每個區塊要呈現的內容表現出來。盡可能地減少設計元素，這樣才能突顯網頁所呈現的介面、動線流程與階層，確認使用者體驗如何。有時為了在視覺上清除區分不同的區域，可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。
 
本篇為「前端工程師必懂RWD概念」三部曲第一篇，全系列目錄如下:


(目錄)

1. RWD網頁與傳統網頁設計的差異


2. 內容優先的「優雅降級」與「漸進增強」


3. 行動載具的設計考量

 
相關連結來啦~





前端工程師和網頁設計師必學-你該選擇RWD還是AWD?



前端工程師必備RWD基本概念(中)網頁設計的優雅降級和漸進增強
  前端工程師必備RWD基本概念(下)行動設備優先的設計考量


在家也喝的到冠軍級手沖咖啡?原來是靠Python課程辦到的!
達內教育攜手惠普,打造引領數位化職業教育解決方案
從七個不同的方向來解釋Python和Java的不同之處!!
達內教育開幕　培養台灣IT人才進入全球企業


 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

▲ 人工智慧先驅-史丹佛大學名譽教授 Nils Nilsson

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

要成為專業又內行的前端工程師,學習Media Query怎能虎頭蛇尾?現在快來畫下完美的句點!
許多前端工程師在面對網頁設計時，都要處理 RWD網頁。這些 RWD網頁中的圖片如下圖所示，能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。
 
在RWD網頁中圖片的顯示方式有兩種，一種是傳統的「<img>」標籤，另一種就是直接使用 CSS 的背景圖。在網頁中插入一般的圖片，也就是使用「<img>」標籤的場合時，只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，另一個則設為 auto 則可以達到 RWD 的效果，範例如下：
#banner {
max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/
height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/
}
 
上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。
相信大家已經看過夠多美美的滿版圖片的網頁了吧？這是因為在背景圖的設定上，CSS3 的新屬性「background-size」可以指定背景圖片的大小是否可填滿整個容器。未指定「background-size」屬性的話就是 auto 原圖的大小；如果有指定為 cover 的話，那就可以使背景填滿容器。
快來看看以下背景圖片的 Fluid Image 設定為填滿容器的語法：
#banner {
background-size: cover;
}
 
上過網頁設計課程的前端工程師應該可以一目了然：
下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。

本篇為「前端工程師必備的RWD基礎」系列文章最後一篇，全系列目錄如下:



(目錄)

1. 前端工程師必備的RWD基礎(一)RWD基礎概念


2. 前端工程師必備的RWD基礎(二)流動布局Fluid Grid


3. 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用方法


4. 前端工程師必備的RWD基礎(四)Media Query基礎之Media Type媒體類型


5. 前端工程師必備的RWD基礎(五)Media Query基礎之and/not/only判斷條件


6. 前端工程師必備的RWD基礎(六)Media Query基礎之Media Features-上


7. 前端工程師必備的RWD基礎(七)Media Query基礎之Media Features-下


8. 前端工程師必備的RWD基礎-(八)流動圖片Fluid Image

 
 
 相關連結來啦~



關於RWD,前端工程師必備的三點(中)-Media Query



前端工程師之路不停歇~Media Query的CSS插入字條件
前端工程師之路不停歇~Media Query的媒體類型 

   Python 課程+醫療=幸福方程式



UI 課程等語言幫你看你的鄰里長什麼樣子呢


AI也可產出文章了!記者要被人工智慧取代了嗎!?
中國IT教育領導品牌　達內教育集團第一家海外授權中心


  
  
  

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
在這篇有關前端工程師的media query知識裡,整理好了有關於它的媒體類型,讓你不再當無頭蒼蠅!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
前端工程師們別以為Media Query的媒體特性看完上篇就夠了~加碼知識現在就報你知~~

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
前端工程師走過路過不要錯過!快來學Media Query特性,你絕對不能不會啊!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

前端工程師來說應該都要知道media query的CSS在不同情況會插入以下不同的字,快緊接著看介紹!
 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

前端工程師要認識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教學系列文章目錄

 

1. 前端工程師的基礎RWD教學(一)RWD基礎概念


2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid


3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法


4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型


5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件


6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上


7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下


8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 
 
  HERE！延伸閱讀看過來：




 關於RWD,前端工程師必備的三點(上)基礎概念





關於RWD,前端工程師必備的三點(中)-Media Query
前端工程師之路不停歇~Media Query之媒體特性(上)



人工智慧進化!大量產出可信度極高的假新聞與文章,你能辨真假嗎?


我僅上半年達內教育評價極高的Java課程之後,便立馬辭職了...
用上大數據!美妝產業用科技行銷術接軌新客群
達內課程先就業再付款- 中時電子報


 
 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
對前端工程師最重要的CSS之一,就是Media Query,詳細的分析請繼續往下看~
 
RWD 網頁設計必備語法：Media Query
前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇前端工程師課程文章的講解重點)，再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。
 
Media Query 使用方法
如果要使用 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. 上面的功能，若不使用HTML5，而是在 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教學系列文章目錄

 

1. 前端工程師的基礎RWD教學(一)RWD基礎概念


2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid


3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法


4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型


5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件


6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上


7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下


8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 
 
  HERE！延伸閱讀看過來：
關於RWD,前端工程師必備的三點(上)基礎概念
關於RWD,前端工程師必備的三點(下)-流動布局


前端工程師之路不停歇~Media Query之媒體特性(上)  


 

Python課程讓你跟AI漫畫不脫節!現在連電影都加入陣營!
AI人工智慧撰寫科技恐被濫用,將因此有大量假新聞出現?!
哪個程式語言能像瑞士刀一樣百變實用?讓Python課程告訴你答案!
中國IT教育領導品牌　達內教育集團第一家海外授權中心
 
 
 



  
 
 
`:

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

前端工程師課程幫你打好基礎!今天開啟RWD的門讓你更深入剖析它!
 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

人工智慧的發展大家有目共睹,今天就來介紹google百百款的辨識功能和發展!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()