目前分類：前端工程師就是我! (74)

瀏覽方式： 標題列表 簡短摘要

輕鬆入門前端工程師的HTML5課程(11上)SVG基本圖形動畫

 

好久不見的HTML5課程又重出江湖啦!先前提到的SVG,今天就要教你它的圖形動畫該怎麼畫!

 

前端工程師必備技能：SVG 基本圖形動畫

我們可以使用 <animate> 元素來繪製 SVG 動畫。

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

前端工程師的必備品Emmet(一)快速產生標籤名稱

前端工程師的課程又回來啦!這次要教給你的是前端工程師的必備外掛程式-Emmet!快來看看它有哪些功能!

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(10)SVG介紹

HTML5早就沒在用點陣圖了!今天介紹它的SVG向量圖給你認識~~

 

何謂 SVG?

因為以往網頁設計常使用的圖片檔如 jpg、png、gif 等都是點陣圖模式，但是時下流行的 RWD 響應式網頁可隨著螢幕調整網頁布局，點陣圖隨著螢幕大小縮放，就會有模糊失真的疑慮，因此，HTML5的向量的 SVG 確實是不錯的解決方法。

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

 

輕鬆入門前端工程師的HTML5課程(9)地理位置定位

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(8)拖曳元素-下

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(8)拖曳元素-上

想做出可拖曳的HTML5元素?看完上下兩篇的介紹文,了解基礎不是難事!

 

HTML5 Drag & Drop API-讓元素變得可拖曳

你可能不知道，過去在網頁裡面實現 Drag & Drop 是很麻煩的！一定要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。但！現在各位有福啦！HTML5 有直接的 Drag & Drop 機制，讓前端工程師可直接使用 drag and drop 的功能，讓使用者直接透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(7)瀏覽器儲存簡介

 

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(6)進度顯示條

關於這系列的HTML5文章,最後一回介紹"進度顯示條"給你認識認識~

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(5)嵌入影片教學

HTML5嵌入影片的功能也太強了!還附贈一堆指令可以應用,快來瞧瞧!

 

更簡單、更有利於 SEO - HTML5新增的語意元素

在前一篇提過： HTML4 的時代，網頁排版只有兩種元素：<div>和<span>，但早已無法應付近十年來越來越複雜多元的網頁排版。前端工程師只好將這些元素「延伸」以便排版，因此常常看到有<div id="header">這樣子冗長的標籤。也因此，HTML5 提供了一系列語意元素（Semantic Elements）來取代上述的「延伸」用法，像上述的例子在 HTML5 就可以用 <header> 來取代，既精簡又更利於 Google 的搜尋引擎爬蟲理解，因此對 SEO 有例。

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(4)元素排版-下

在前一篇介紹HTML5元素的文章提到:在HTML4的時代,網頁排版有兩種元素:<div>和<span>

 

 更簡單、更有利於 SEO - HTML5新增的語意元素

 

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(3)元素排版-上

 

HTML5的語意元素比上一代要多出哪些?那些又該怎麼使用?看好上下篇,六個語意元素學好學滿!

 

為何 HTML5 需要增加這些語意元素?

讓我們回想一下，在HTML4 的時代，前端工程師只能使用<div>和<span> 兩個元素進行網頁排版的工作。但是因為網頁排版本身又分成標題、導覽列、選單、側欄等區塊，不只兩種元素。因此常常看到有 <div id="header">、 <div class="nav">等元素搭配 id 和 class 的「延伸」用法，既冗長又麻煩。

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(2)嵌入音訊的元素

 

HTML5真的充滿驚喜!現在我們要繼續為你介紹它五花八門的元素!上緊發條囉!

HTML5新稱audio元素-終於可以撥放音樂了!

在 HTML5 版本出現之前，用 HTML4在網頁中聽音樂或看到影片時，只能透過像是 Flash 之類的外掛。 而 HTML5 新增的 <audio> 元素提供了可直接在網頁中嵌入影音檔的方式！

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top

輕鬆入門前端工程師的HTML5課程(1)7個內容模組

HTML5重新定義的七個內容模組,你知道他們分別要用在哪嗎?繼續往下看就知道啦!

(繼續閱讀...)
文章標籤
前端工程師 html5 前端 工程師 CSS

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

▲top
今天又蹦一個關於前端工程師小捷徑!想轉職?進來就對了!

 

(繼續閱讀...)
文章標籤
前端工程師 前端 RWD CSS 語法 程式 AWD 網頁設計 網頁設計師 SEO

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

▲top

前端工程師必備RWD基本概念(下)行動設備優先的設計考量

前端工程師對於目前令人眼花撩亂的行動設備,其實也是很有一套的!今天的重點整理,讓你理解:他們為何有這麼有一套!

 

行動載具特性

 

(繼續閱讀...)
文章標籤
前端工程師 前端 RWD 網頁設計 UI UX 響應式網頁 網頁設計師 行動裝置優先 行動優先

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

▲top

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

標準的RWD網站範例

前端工程師在開發網站十在用的RWD網頁,其實它網頁設計的各種概念,在整理出來後,一點也不難理解!

(繼續閱讀...)
文章標籤
前端工程師 前端 RWD 網頁設計 UI UX 響應式網頁 網頁設計師 優雅降級 漸進增強

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

▲top

前端工程師必備RWD基本概念(上)-RWD網頁與傳統網頁設計

作為前端工程師,你該不會還不知道RWD網頁和傳統網頁設計的差別吧!!?

(繼續閱讀...)
文章標籤
前端工程師 前端 RWD 網頁設計 UI UX 響應式網頁 網頁設計師

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

▲top

前端工程師之路不停歇~Media Query的流動圖片

要成為專業又內行的前端工程師,學習Media Query怎能虎頭蛇尾?現在快來畫下完美的句點!

(繼續閱讀...)
文章標籤
前端工程師 前端 RWD CSS 語法 程式 AWD 網頁設計 網頁設計師 SEO

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

▲top

前端工程師之路不停歇~Media Query的媒體類型

 

(繼續閱讀...)
文章標籤
前端工程師 前端 RWD CSS 語法 程式 AWD 網頁設計 網頁設計師 SEO

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

▲top

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

 

(繼續閱讀...)
文章標籤
前端工程師 前端 RWD CSS 語法 程式 AWD 網頁設計 網頁設計師 SEO

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

▲top
«12 34