前端工程師偷吃步小技巧-CSS的浮動屬性

前端工程師偷吃步小技巧-CSS的浮動屬性
前端工程師偷吃步小技巧-CSS的浮動屬性

怎樣才能在前端工程師表現更得心應手?首先你應該要先認識CSS的浮動屬性!

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時,絕對會用到的基本語法之一。使用 CSS float 浮動屬性,可以將一個元素往左移或是往右移,並同時允許其他元素圍繞它(例如文繞圖、圖繞文等)。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時,預設的排列方式都是由左至右、由上至下。但如果想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時,就需要使用 float 屬性。

如下方例子,若我們使用一般的 div 區塊元素時,則所有的區塊就整齊的由左上出來,一個 <div> 區塊就佔用了一行。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.

承上例,如果在 CSS 中加一個「float: left;」,則結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法):

See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.

這是因為「float」屬性使 div 區塊元素「漂浮」起來,不再形成 div 區塊占滿整行的情況

承上例,假設把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」,則所有的區塊就會由右側開始「飄」出來,結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法):

See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.

CSS 浮動屬性有三個參數:left、right 與 none。left 與 right 顧名思義,就是控制區塊由左側還是右側浮出用的,如上方兩個例子所示。而 none 就是不使用浮動參數的意思。

下方是另一個文繞圖排版的例子,就是文字的部分「不」設定 float 屬性,但是在 logo 圖片的部分使用浮動屬性「float:right;」,文字的部分則不使用浮動屬性。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.

前端工程師想要做出兩欄或多欄的網頁,則可以善用 float 屬性搭配寬度需要進行初步的排版。

以下範例為兩欄的排版示例。兩個欄位視為兩個區塊, float 屬性都設定為「left」,左欄寬度為 20%;右欄為 80%:

See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.

網路上常常有人說:前端工程師的網頁 layout 基石除了本章介紹的浮動(float) 屬性之外,還有下一張會介紹的清除浮動(clear)。想當前端工程師的各位同學們請先把本章再複習一次,並親自使用 codepen 自己練習一次程式,才能達到最佳的學習效果哦!

 

 

 

 

 

 

 

 

推薦文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍


用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!


CSS教學-display與visible屬性介紹


AI機器狗Aibo成最新愛寵 真狗會被取代嗎?


掌握這些小技巧,網頁前端輕鬆學!


前端工程師之Javascript入門第二十二課-數學物件


網頁前端偷吃步小技巧-display與visible屬性介紹

前端工程師偷吃步小技巧-CSS的定位元素

前端工程師偷吃步小技巧-CSS的定位元素
前端工程師偷吃步小技巧-CSS的定位元素

怎樣才能在前端工程師表現更得心應手?首先你應該要先認識CSS的定位元素!


為了要設計出更複雜的網頁前端版面,前端工程師都必須先知道 CSS 的所有「position 屬性」。如下所示,它有一大堆屬性值,這些屬性值不好理解同時也不好記憶,只要稍一設定不好,就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下,也十分建議各位想當前端工程師的學員們把這頁加入網頁書籤中,以便日後隨時複習查詢。

See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.

CSS:Positioning Elements 定位元素

CSS 定位屬性(positioning properties)是用來定位元素使用。它可將一個元素置於另一個元素之後,還可以指定當某個元素的內容太大時該如何做。

所有的元素都可用 top(上)、bottom(下)、left(左) 與 right(右) 屬性來定位。但如果沒事先將「定位屬性」設置好的話,以上四種屬性(top、bottom、left 與 right)皆不起作用。它們亦會依照定位方法的不同,而以不同的方式呈現。

靜態定位(position: fixed)

「靜態定位(position: fixed)」是所有 HTML 元素的預設值。當元素為「靜態定位(position: fixed)」時,會遵循「Normal flow (指從左到右、上到下的常態佈局)」來排列。

靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例,儘管我們 CSS 設定為「top: 30px;right: 5px;」(上方距離30px、右側距離50px),被靜態定位的 HTML 元素,排版仍不受這些 CSS 影響。

See the Pen position_static by Tedutw (@Tedutw) on CodePen.

固定定位(position:fixed)

固定定位(position: fixed)的元素會相對於瀏覽器視窗來定位,這意味著即便頁面捲動,它還是會固定在相同的位置。

不同於靜態定位,固定定位(position: fixed)的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位(position: fixed)」的範例,其中的 CSS 「position:static」改為「position:fixed」,則排版受到「top: 30px;right: 5px;」(上方距離30px、右側距離50px)的屬性影響,如下所示:

See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.

固定定位(position: fixed)的元素會從「Normal flow (從左到右、上到下的排列)」的常態佈局中移除。所以其他未設定為「固定定位(position: fixed)」的元素,仍然依照「左到右、上到下」的排列,彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。

相對定位(position:relative)

所謂的「相對」,是以原本正常的位置為中心點,依照元素偏移原本位置多少而定數值。相對定位(position:relative)的元素可以結合 top、bottom、left、right 等屬性,使其元素「相對地」偏移原本該出現的位置。

如以下的例子,我們在原本的位置安插粉紅色背景的文字(文字為「相對定位」)區塊,並且設定該區塊相對於原本該出現的區塊「上方留空間 5px(top: 5px;)、 左方留空間 5px(left: 5px;)」。

See the Pen position_relative by Tedutw (@Tedutw) on CodePen.

相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置,會被保留而不會消失。

相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。

絕對定位(position:absolute)

不得不說,絕對定位(position:absolute)是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像,不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。

當元素的 position 設定為 absolute 後,它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed,若有,則以父元素為定位的基準點;若無,則以該網頁頁面(“body”)的左上角為定位點置,看起來就是這張網頁的絕對位置一樣。

以下的範例為兩個絕對定位(position:absolute)元素的範例,右上方的元素的父元素 position 沒有設定,因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個,因此該元素會以整個網頁區域為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px;而另一個元素的父元素 position 是 relative,因此會以父元素為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px。

See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.

同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。

其實所有的 CSS 版面配置:Positioning Elements 定位元素介紹到此結束。光看以上的解釋,會容易搞混。此時,不妨回到此章節的最前面的範例,點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼,並且親自練習一次這些 CSS 碼,試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話,就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動(float)屬性

 

 

 

 

 

 

 

 

 

 

推薦文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍


用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!


CSS教學-display與visible屬性介紹


AI機器狗Aibo成最新愛寵 真狗會被取代嗎?


輕鬆轉行不卡卡!零基礎也能輕鬆學網頁前端!


只要5分鐘!讓你了解前端工程師跟後端工程師差別!


自學網頁前端筆記分享-display與visible屬性差異

自學網頁前端筆記分享-display與visible屬性差異

自學網頁前端筆記分享-display與visible屬性差異
自學網頁前端筆記分享-display與visible屬性差異

想要自學網頁前端嗎?本篇的分享就是要帶你認識display與visible屬性差異哦!

 本篇將會介紹網頁前端排版的兩個 CSS 屬性:display 屬性與 visibility 屬性。

CSS:display 屬性

display:block

對於 CSS 語法來說,網頁前端的每個元素都是一個矩形盒(rectangular box)模型。使用「display」屬性可以決定「盒(box)」的呈現方式。

又「區塊元素(block element)」則會佔用可用寬度的最大值,前後有換行符

以下的範例分別顯示了是否有將<span>元素顯示為區塊元素(block element)的結果。在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的網頁前端 CSS 語法設定如下:

span.block{
  display:block;
}

display:inline

inline 元素只佔用可用寬度的最大值,並不強制換行。

將上一段範例的<span>元素,CSS 換成「display: inline」的結果如下。跟上一個範例一樣,在下方的顯示視窗中,按「CSS」可以看出 CSS 的語法是如何設定的。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的 CSS 語法設定如下:

span{
  display:inline;
}

display:none

「display:none」用來將元素隱藏使用,元素隱藏後就不佔用任何空間,在網頁前端頁面顯示時不會展現出來,就好像該元素不存在一樣。

以下範例中,我們將第 2、4 段設為「display:none」,其他設為「display:block」。

See the Pen display: none by Tedutw (@Tedutw) on CodePen.

上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值,如 list-item、table、table-cell、table-column、grid 等,會在往後的章節中一一介紹

visibility 屬性

visibility 屬性一般用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden

當我們想要隱藏園素食,有兩個方法可以執行:一是上一段介紹的,將「display」屬性設為「 none」參數;二是將「visibility」屬性設置為「hidden」來隱藏元素。

注意:以上兩個方法雖然都能將元素隱藏,但都呈現出不同的結果:

被「display:none」隱藏後的元素,就不會佔用任何的空間,就好像它從來都不存在一樣;而被「visibility:hidden」隱藏後的元素,雖然在網頁前端不會顯示,但仍佔用了對應的空間(就是被隱藏的元素有多大,網頁上空出來的空間就有多大),所以仍會影響排版。範例如下:

我們準備要將以下的例子,第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。

See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.

將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下:

See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.

由以上例子我們可知,同樣都是將元素隱藏,第一個<p>元素雖然被「visibility:hidden」隱藏了,但是仍遺留下空間;第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」,連原本的位置都不見了。

排版的另一個 CSS 屬性:Positioning Elements。網頁前端下一章我們將會一一介紹。

 

 

 

 

 

 

推薦文章:
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?


用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!


你是我的眼!Google AI 眼鏡助視障朋友「看見」世界


今年10月即將入手的新身分證,它的UI設計有啥亮點?


搞不懂Javascript變量命名?問前端工程師就對了!


網頁前端要成功關鍵,就是JavaScript!!


Javascript入門第十九課-方法

最感性的達內教育評價!她因為它有更美好的人生!

最感性的達內教育評價!她因為它有更美好的人生!
最感性的達內教育評價!她因為它有更美好的人生!

這是達內教育評價中最感性的一個了!一位44歲的媽咪因為有達內創造他更幸福的人生!


▲ 家庭事業兩相顧,是許多職業婦女的心願

「現在的我,擁有更多時間陪伴我的三個孩子以及老公,比起以前創業沒日沒夜的日子,真的是幸福太多了!」追求夢想並非年輕人的專利,不論年齡多大,只要擁有年輕的心態,一樣可以翻轉庸碌人生,成為人人稱羨的職場勝利組。這就是我第一次見到洪O惠小姐的心得,讓我知道年齡並不可怕,可怕的是衰老的心態。

現年44歲的洪小姐,在十年沒日沒夜的設計生涯告終後,驚覺錯過了三個可愛孩子的成長歷程,更讓與先生的感情出現裂痕。這樣的發現讓她重新考慮自己的職涯方向:「重新開始,我想找個工作就是朝九晚五,可以陪伴家人的職位。」而下定決心的她幸運的找到了適合自己的課程,讓她能無縫結合自己15年的設計專業,用於目前蓬勃發展的網頁設計課程中,帶給她與眾不同的職涯體驗。


▲ 擺脫負債、成功轉職網頁設計師的洪小姐現在有更多時間陪家人

為什麼認為達內的課程適合自己呢?

「就是那位親切的線上專員呀!她真的很細心介紹你們的網頁設計課程!」詳盡的諮詢內容讓她對達內的專業以及用心毫不遲疑。「她甚至沒有跟我面對面,以線上文字的方式就完整且清楚的了解了我的需求以及擔心。」為了第一時間了解學員的課程需求,達內教育在學員進入課程網站的第一時間,就會有線上諮詢人員隨時解答學員的所有疑惑,這樣的貼心也讓洪小姐給了達內教育貼心專業的評價。

本來以為達內教育像是一般坊間的電腦教學機構「老師示範一次,畫面切換,依樣畫葫蘆!」洪小姐提及以往的電腦學習經驗,眉頭甚至皺了一下:「這樣的學習根本沒有思考吧!」對於面授課程的評價都已如此負面了,意興闌珊的洪小姐卻在貼心的線上客服人員鉅細靡遺的解說下,更清楚了解達內教育與業界緊密結合的課程規劃,並決定親身試試達內的線上網頁設計課程。

讓你學會思考,更點亮職涯的電腦課程

聽一遍,不懂?那就再聽一遍!線上課程的好處就是你可以一看再看,如果還是不懂就問輔導老師。對於洪小姐這樣擔心麻煩別人的貼心學生,線上課程不僅減輕了她在理解學習上的壓力,同時也讓她更能掌握自己學習進度。這是她從來沒有想過的線上課程優點,也是她對於達內教育評價給予極高的原因之一。但是線上課程機構百百間,能讓洪小姐鍾情於達內教育的最主要原因,當然還是優質的課程編排以及實力堅強的師資群。

「他總是說:就說你們很厲害吧!你們寫的語法很多工程師都不會寫呢!」洪小姐笑著說著那位對學生滿滿鼓勵的段惠勇老師。達內教育的老師們,不但具備業界實戰的經驗,還非常親切幽默,這也是為什麼達內教育評價一直都這麼高的原因。因為老師的專業和幽默風趣,讓本該死氣沉沉的線上網頁設計課程,都更加的活潑快樂了起來。轉職期的迷惘與壓力,也因為段老師的妙語如珠而顯得輕鬆了些。

年齡不是設限,被設限的是你的心

「我44歲,是兩個孩子的媽,我跨出來了,我相信你們也可以!」信心滿滿的洪小姐笑著說,志得意滿的稱自己做到了許多年輕人可能也不敢輕易嘗試的事情。所以,如果你自認寶刀已老,不妨看看洪小姐的勇氣與決心。如果你還年輕,又有什麼理由不去試一試呢?

 

 

 

 

 

 

推薦文章:
本科硬體工程師華麗轉職高薪Java工程師,而他對達內教育評價是….?


還只是在上網搜尋達內教育評價嗎? 別再誤信謠言了!! 直接親自試試吧!!


程式語言百百種,最好最實用的在達內教育通通找得到!!


馬斯克認為人工智慧恐帶來末日,祖克伯公開嗆聲


人工智慧-Suphx,強勢竄升到麻將專業平台天鳳十級?(1)


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


從無到有 挑戰14小時取得Google證照


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


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


2天考取Google Ads證照!新手廣告投放攻略


44歲媽咪順利轉職網頁設計師, 家庭事業都得意

工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!

工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!
工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!

想轉行當前端工程師其實沒那麼難?遵照以下步驟以下步驟照著做,讓你夢想不再是空想!

今天要跟大家分享的文章是2019年教你正確的網頁前端學習路線! 很多人想要轉職成為網頁前端工程師,但是尚未找到適合自己的學習方法。為此達內教育前端工程師課程的老師就和大家分享了這篇正確的網頁前端學習路線,一起來一看究竟!

第一步:把握HTML/CSS

這是前端工程師要會的基本的網站的構建元素,是所有網頁設計/開發者都必須要學會的語言。並且HTML/CSS也很簡單易學,沒得挑!

第二步:學會使用基本工具

文本編輯器:例如 Sublime Text、Dreamweaver、Visual Studio Code 等
圖像編輯器:Photoshop、Illustrator 等
FTP/SSH 工具:Filezilla、PuTTY 等
網頁瀏覽器:Chrome、Firefox 等
雲端硬碟:Dropbox、Google Drive 等

第三步:進修 JavaScript

JavaScript (現階段先忽略Node.js 和任何框架)
理解數據類型:String、Number、Arrays、Objects等
JSON(JavaScript Object Notation)
jQuery框架

第四步:搭建基本網站

使用如 Hostgator、Hostmonster 等虛擬主機建置網站
學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師前端工程師

現階段的你可以:
1. 建立簡單的網站
2. 搭建網頁應用的界面
3. 可以把一張 PSD 檔轉化為基於 HTML/CSS 的靜態網頁
4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合,無法獨立架站)

接下來你還需要進修的有:
1. HTML/CSS框架:如 Bootstrap 
2. 熟悉網頁後端的程式語言:PHP (建議初學者用)、Ruby 等
3. JavaScript 框架:如 React、Angular 等
4. 數據庫:如 MySQL

第六步:HTML/CSS框架

Bootstrap (強烈推薦)、Zurb、MUI 等

第七步:網頁後端程式語言 (專注再一個就好)

PHP (不是最好的語言,可是目前用於後段較普及且適合初學者學習)
Node.js (一款新型、強大的後台語言)
Ruby on Rails (最好的框架語言,但是對程式語言初學者較難入手)
Python (簡單易學,但是尚未如 PHP 般普及,不過隨著 AI 的爆紅 Python 也越來越普及。

第八步:數據庫(專注於一個!)

關係型數據庫:如 MySQL 
非機構化數據庫:如 MongoDB 和 CouchDB
建議選擇以下其中一個組合:
1. PHP 搭配 MySQL
2. Node.js 搭配 Mongolian

第九步:有必要時,精進一些進階的前端技能:

SSH & Basic Command Line
CSS 預編譯器:如 Sass、Less、Stylus
APIS / REST 服務
HTTPS / SSL

第十步:應用

VPS 虛擬專用伺服器 
應用雲端平台:如 AWS、Digital Ocean、
Linux 呼籲行
維護和進級

第十一步:恭喜你,成為一名全端工程師/後端工程師/網頁開發者了!

可以架設網站/網頁開發
能建置後端 API
能連接 Server
可以處理數據庫
你可以選擇受雇為全端工程師/後端工程師,或是成為可以獨當一面的 soho 族、創業等。

第十二步 (選修技能):精進程式語言

JavaScript 框架: React、Angular 2、Vue.js、Express (後端)
PHP 框架: Laravel、Codeigniter、Symfony
Ruby on rails
MVC框架:路由、數據庫映射、幫助程序、數據綁定、模板和 UI

第十三步 (選修技能):基於 PHP 的 CMS 網站

WordPress (最多人用的 CMS 網站)、Joomla、Drupal
以上 CMS 網站架站快速、有豐富的 plug-in 模組,不過功能有限,適合需要快速架站的場合。

第十四步 (選修技能):行動 App 開發

其實你不需要進修 Java 和 C 語言,只要把握 JavaScript!我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App

以上就是前端工程師課程老師為大家分享的前端學習路線的文章,希望本篇文章能夠對想要學習網頁前端技術的初學者們有所幫助。想要了解更多Web學習方法記得關注達內教育評價。最後祝大家都能夠順利學成,成為一名優秀的網頁前端工程師。

 

 

推薦文章:
如何成為前端工程師?首先你要先具備…


前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


SEO無痛該怎麼做?資深前端工程師教你對的方法!


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


厭世代正風行?來上Java課程可以幫你扭轉困境!


Python課程搭配產業知識,科技不再冰冷無趣


沒有那麼難!網頁設計課程中的CSS,它到底是什麼呢?

前端工程師暑假先修班(三)-行動優先設計考量

前端工程師暑假先修班(三)-行動優先設計考量
前端工程師暑假先修班(三)-行動優先設計考量

連前端工程師也要順應手機世代!設計網頁必須考量”行動裝置優先”!

行動載具特性

what-is-Mobile1st.png
圖上方為傳統以桌機為主設計模式;下方為「行動裝置優先 (Mobile First)」模式

在這個人手一機的時代,對前端工程師而言,手機、平板等行動設備在操作上與電腦差異很大,因為電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此,兩者的網頁設計開發在互動設計上也有所不同。

行動載具的基本特徵有:可單指或多指操控的多點觸控、多種手勢(如搖一搖、滑動等)以及文字虛擬鍵盤。

除了上述與電腦差異很大的特徵外,在視覺呈現上也與電腦差異也很大,前端工程師設計師需注意的事項如下:

按鈕大小:
電腦因為是用滑鼠操控,所以無論按鈕多小,滑鼠一樣點的到。但是行動裝置是以觸控為主,按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者,任何需要被觸控的 UI (使用者介面) 元件,都不能小於 44*44px。

超連結大小:
除了上述的按鈕之外,也會有文字的超連結內容。同理,也不能讓帶有超連結的文字太小,以利於手指點擊。

UI 設計:
UI 設計必須考量到行動載具的畫面尺寸,因此像按鈕等需要被觸控的 UI (使用者介面) 元件,都需要在畫面中容易被點擊的地方。

點擊效果:
在按鈕效果的開發上,有時滑鼠除了點擊與放開的指令外,還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的,所以就不需要此種特效強調。

互動效果:
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計 RWD 網頁時,要考量到不同設備的效能。

行動裝置優先 (Mobile First) 概念

行動裝置優先 (Mobile First) 是由知名的設計師與 UI規劃師 Luke Wroblewski 提出的,他曾當過美國 yahoo 架構設計負責人,他在2010年的時候進行了一次簡報,標題就是 Mobile First(原始簡報與影片),是指設計網站時,應該以行動裝置的介面、互動、顯示等為主要考量,其他的裝置次之,有別於過去設計網站時「以桌上型電腦為主,再將電腦網站上的內容移植到行動裝置上」的模式。

現在越來越多的人使用行動裝置上網,根據美國最大電信業者 AT&T 的數據,手機流量在 3 年內成長了 50 倍,目前行動裝置上網的使用率仍在激增,而且還有更多的功能持續被開發出來。

相較於傳統的電腦,行動裝置的使用時較不受到時間空間限制,無論是在捷運、廁所等都可使用,人們也花了不少零碎時間使用手機上網,因此瀏覽網頁的頻率跟電腦比起來有過之無不及,所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。

那「行動優先」要如何套用在網頁設計上?一開始會先針對行動裝置的小畫面來設計版面、填入最重要的內容,然後再以這些基本內容都存在的狀況下,針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來,網頁在行動裝置呈現的介面會非常好瀏覽且美觀,該有的功能、內容都有,並且由小畫面擴大至大畫面,內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強(Progressive Enhancement)」)。但是如果是從大畫面開始設計,當要轉換成小畫面時,其內容的擺放就會越來越困難,常常需要透過刪減內容,才能「塞」入較小的版面當中。這樣一來,有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容,而無法給使用者完整的內容 (參見「優雅降級(Graceful Degradation)」)。

若要建立良好的行動裝置使用者體驗 (UX),應考慮以下幾點:

  • 使用者使用行動載具的習慣、方式及思考模式
  • 提供明確精要的內容,比完整的導覽功能更重要
  • 提供清楚且好觸控的導覽選單
  • 簡潔明確的頁面內容
  • 符合行動載具操作特性

現在大多數的 RWD 響應式網站,都是採用行動裝置優先 (Mobile First) 概念來設計,範例如下:

Youtube網站

 

就算是在手機上,也可以很方便的點閱影片、撥放、暫停,甚至對影片作評論、按讚!

 

Airbnb網站

 
 

選單的按鈕設計的大小適中,使用者用手機就可以輕易地透過選單找到目標住處,並且藉由滑動的行為瀏覽屋況,並按下預訂按鍵!

 

本篇為「前端工程師必懂RWD概念」三部曲第三篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 網頁設計的「優雅降級」與「漸進增強」
  3. 行動設備的設計考量

 

 

 

推薦文章:
前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機


頂尖前端工程師必備技能之一-掌握RWD基礎概念


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


Python課程相關應用—-AI門診你聽過嗎? 以後看病確診只花2秒鐘!!


AI人工智慧產業日新月異,兩年前最新的機器人,如今變成老古董?


人工智慧真的一直為貓奴帶來娛樂!快看這些被合成的貓長什麼樣子!

 

前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

 

前端工程師暑假先修班(二)-"優雅降級"與"漸進增強"使用時機
前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

 

前端工程師在設計RWD網頁有兩種思維模式可以套用,以下針對這兩部分進行介紹!


標準的RWD網站範例

一般而言,現在的前端工程師網頁設計師在開發網站時都選擇 RWD 網站,在規劃其 Media Query 的尺寸斷點時,有兩種布局斷點的依據:「根據設備」以及「以內容為主」,介紹如下:

1.根據時下的主流設備來佈局斷點 (設備優先)

透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點,而在網頁設計中有多套樣式,再應用UI分別對應到各種設備上,如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便,又能精準對應到時下最普及的設備,但是隨著設備不斷汰舊換新,未來總會有無法合適對應到的設備。


「設備優先」示意圖(圖片來源:http://static.codeceo.com)

2.根據網頁內容作為佈局斷點的標準 (內容優先)

這種方式不是以設備為主;而是依據網頁內容的布局、段落等來下斷點,是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易,但是斷點會依據設備的不同而落在不同的地方,這樣就沒有標準、精準的設計模式。


「內容優先」示意圖(圖片來源:http://static.codeceo.com)

儘管如此,現今大多前端工程師網頁設計師會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新,若採用此種方式,雖然無法精準的對應到特定的設備,但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變,重點依然是網頁內容的本身。

在內容優先的策略中,前端工程師與設計師要讓網站盡可能兼容所有設備:因為我們不知道用戶會用什麼樣的設備來訪問網站,因此,我們必須盡可能地把所有狀況都考慮進來;所有的佈局、元件、區塊等都能兼容不同類型的設備和平台。有「優雅降級(Graceful Degradation)」以及「漸進增強(Progressive Enhancement)」兩種思維模式,可以套在「內容優先」為主的 RWD 響應式網站 設計的過程:

「優雅降級」還是「漸進增強」?


圖上方為「優雅降級(Graceful Degradation)」的網頁設計模式;下方為「漸進增強(Progressive Enhancement)」模式

1. 優雅降級(Graceful Degradation)

一開始就針對「功能最完整」的平台來設計、開發網站,完成所有的功能和體驗後,再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案,以確保網站能在最新、最完整的平台上完美呈現,擁有「最好的使用者體驗」;而在較舊的或是功能限制較多的的平台上,仍然可使用最重要的功能,整體介面「簡陋卻可用 (poor but passable)」,而不是無法使用。

2. 漸進增強(Progressive Enhancement)

這個方式與「優雅降級(Graceful Degradation)」的方式相反,是先針對最不完整或是限制最多的平台上創建最重要的基本內容,用最精簡的方式呈現;然後以這些基本內容都存在的狀況下,開始慢慢擴展其佈局,隨著平台的限制越來越少,內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。

本篇為「前端工程師必懂RWD概念」三部曲第二篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 網頁設計的「優雅降級」與「漸進增強」
  3. 行動設備的設計考量

 

 

 

推薦文章:
前端工程師暑假先修班(三)-行動優先設計考量


CSS中空格逗號區別為何?跟著前端工程師做一次就知道!


SEO無痛該怎麼做?資深前端工程師教你對的方法!


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


達內教育評價-故事背後事實的真相甚麼是這樣?!


AI”改編”我最愛的哈利波特!Python課程根本就是萬能的!


“之前提到的SEO優化的結構化資料,這次直接教你如何快速上手! “

前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性
前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

想趁暑假結束前成為一名前端工程師嗎?一起來認真來了解RWD網頁跟傳統網頁的差別吧!

在智慧型手機等行動上網的裝置普及以前,早期的前端工程師網頁設計師在做網站時都比較輕鬆。因為網站只需適應一種規格,在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下:

從上圖可以得知,前端工程師在開發 RWD 網站時,假設要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求,就需要開發出 4-5 種版面,無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段,必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、應用UI程式撰寫,再根據不同的尺寸斷點進行反覆測試、調整與修正。

(相關文章:Media Query使用方法Media Query中的視窗與頁面尺寸媒體特性一覽表)。

在著手各種載具版面的網頁設計前,應先根據與客戶討論後的結果,粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型,是在除去所有視覺設計細節 (如色彩、字型等) 之下,進行頁面架構、功能與內容的規劃,藉此更能集中地檢視整個介面流程和架構,方便與客戶溝通想法。

(相關文章:與前端溝通更順利!從了解整體網站的規劃流程開始)。

網頁框架規劃 (Wireframe) 是運用文字線條、方塊,把每個區塊所要呈現的內容表現出來。盡可能減少設計元素,藉以突顯網頁所呈現的介面、動線流程與階層,確認使用者體驗如何。有時為了在視覺上清除區隔不同區域,可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。

本篇為「前端工程師必懂RWD概念」三部曲第一篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 內容優先的「優雅降級」與「漸進增強」
  3. 行動載具的設計考量

 

 

 

推薦文章:
前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機


SEO無痛該怎麼做?資深前端工程師教你對的方法!


還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!


達內教育海外合作企業


達內教育評價-故事背後事實的真相甚麼是這樣?!


網路行銷課程幫你解析3D虛擬人偶APP—-Zepeto爆紅原因!!


想跟上主流進修Python課程,現在是絕佳時刻!

頂尖前端工程師必備技能之八-媒體類型區別

頂尖前端工程師必備技能之八-媒體類型區別
頂尖前端工程師必備技能之八-媒體類型區別

身為前端工程師你,夠了解Media Media Query嗎?最終章要教你最後一個部分-媒體類型~

 

【前文提要】RWD 網頁設計必備語法:Media Query
前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 視為 CSS 的擴充元件(這樣會比較好理解)。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type),再針對這些類型 (Media Type) 定義其樣式 (Media Features,中文譯作「媒體樣式」或是「媒體特徵」)。

參考文章:如何在RWD網頁中套用Media Query語法

Media Query 的語法包含了三個部分:媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。and/not/only 判斷條件本篇文章做說明,而媒體特徵 (Media Feature) 的各式屬性也於此篇(頁面尺寸與顯示品質的屬性)此篇(「顏色類」和「互動類」的屬性)列出。本篇就針對媒體類型 (Media Type) 說明如下:

一般而言,前端工程師網頁設計時,經常會運用 Media Query ,其中要先指定媒體類型 (media type) 。目前常用的有多種分別介紹如下:

媒體類型(media type) 簡介
all 所有裝置
screen 螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小
print 印表機裝置 (包含使用列印預覽所產生的畫面,如列印為 pdf)
projection 投影機裝置
speech 朗讀裝置 (針對可「讀出」網頁的設備)
前端工程師的基礎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教學」系列文章第四篇,全系列文章如下:

 

 
 
 

推薦文章:
頂尖前端工程師必備技能之一-掌握RWD基礎概念


想當頂尖前端工程師?以下必備技能可不能少!


成為專業前端工程師前,先搞定CSS背景位置設定!


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


神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?


URL網址怎麼設定攸關SEO優化表現


OpenAI創辦人馬克思要離開自己的人工智慧團隊!發生什麼事?

頂尖前端工程師必備技能之七-判斷條件使用技巧教學

頂尖前端工程師必備技能之七-判斷條件使用技巧教學
頂尖前端工程師必備技能之七-判斷條件使用技巧教學

前端工程師在設計RWD網頁時,常會用到Media Query,沒想到這個語法還包含三部分呢~一起來認識一下吧!

【前文提要】RWD 網頁設計必備語法:Media Query

前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 視為 CSS 的擴充元件(這樣會比較好理解)。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type),再針對這些類型 (Media Type) 定義其樣式 (Media Features,中文譯作「媒體樣式」或是「媒體特徵」)。

而 Media Query 的語法包含了三個部分:媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。「媒體類型 (Media Type)」已在本系列的前篇文章做說明,而媒體特徵 (Media Feature) 的各式屬性也於此篇(頁面尺寸與顯示品質的屬性)此篇(「顏色類」和「互動類」的屬性)列出。本篇就針對「and/not/only 等 Media Query 的判斷條件做說明如下:

Media Query 語法可加入 :and、or、not 和 only,做相關條件的判斷。分別介紹如下:

Media Query 之 and 使用方法

1. 當單一條件成立時

範例:前端工程師建議如果螢幕寬度超過 600px 以上時,就套用此份 css 設定

@media screen and (min-width:600px) { 
  CSS設定
}

2. 同時符合兩種條件

範例:如果螢幕寬度介於 600 px ~ 800 px 時,就套用此份 css 設定

@media screen and (min-width:600px) and (max-width:800px) { 
  CSS設定
}

3. 兩者條件擇一即可 (與「or」連用)

網頁設計而言,假設兩種條件當中,符合其中一種,即可套用此份 css 設定。這種兩者條件擇一即可的「or」條件式,需配合「,」使用:

範例:如果螢幕裝置寬度小於 700px「或」是直立的話,即可套用此份 css 設定:

@media screen and (max-width: 700px), (orientation: portrait) { 
  CSS設定
}

Media Query 之 not 使用方法

not 是用來排除某些設備的樣式,假設你希望這個樣式只在裝置 A 有作用,裝置 B 完全沒用,就可以使用 not。

範例:「除了」螢幕裝置寬度小於 300px 「之外」,橫向印刷時都套用此份 css 設定:

@media not screen and (max-width:300px), print and (orientation: landscape){
  CSS設定
}

Media Query 之 only 使用方法

only 可以指定「只有」某種裝置才能套用某些樣式,本身會寫在 media query 的字首。但目前因為使用舊版裝置的人越來越少,所以使用 only 的寫法越來越少見,反而直接採用 and 或 or 的寫法就能夠符合大多數的狀況。

下面的範例代表只有在「彩色螢幕」時才會套用 sample.css:

<link rel="stylesheet" media="only screen and (color)" href="sample.css" />

其實以上的範例也可以換成用「and」的寫法如下:

<link rel="stylesheet" media="screen and (color)" href="sample.css" />

Media Query 之 or 使用方法

or(或)就是在「多種條件當中只要符合一項就成立」的場合使用,在語法中,or 的寫法不直接寫「or」而是以逗號「,」呈現。

範例:螢幕裝置若為直立「或」是寬度小於 380px 時,字體會變成藍色的 60px。

 p{
      font-size:30px;
  }
  @media (orientation: portrait), (max-width:380px){
      p{
          font-size:60px;
          color:blue;
      }
  }

本篇為「前端工程師的基礎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

 

 

 

推薦文章:
頂尖前端工程師必備技能之八-媒體類型區別


想當頂尖前端工程師?以下必備技能可不能少!


CSS中空格逗號區別為何?跟著前端工程師做一次就知道!


Java課程、UI課程、程式課程、網路行銷課程推薦


全球最大賣場人員自從有了這款人工智慧玩具,每個人都笑顏逐開了?!


網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?


在網路上人氣紅不讓的達內教育,到底有多威?點進來就知道!