色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(下)

色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(下)
色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(下)

為什麼UI設計師愛用黑色當配色?原來原因有這五個!(下)

本篇為此篇文章的下集

3. 讓你的設計更簡潔、更有記憶點

當初見一項商品、或瀏覽一個網頁,最容易讓大眾留下印象的是什麼呢?是整體的視覺印象,也就是 UI 課程 會強調的介面設計,而視覺印象則是取決於色彩運用。UI設計是透過讓品牌視覺形象中的視覺印象的不斷重複,就能夠加深使用者對品牌的印象。

在品牌經營上,色彩有助於吸引喜好自己品牌的客群,將色彩形象落實在商品、圖像等方面,久而久之客人看到某種顏色時就會聯想到你的品牌。

blackwhite-logos-11211.jpg

4. 能平衡過亮的顏色

假設能夠使用明度較高的亮色,以黑色為基底時能平衡整個畫面,使亮色不至過於刺眼;並且加入些許亮色,就能與黑色對立並形成點綴,讓觀看者能專注於色彩變化,整體畫面層次平衡且又能建立脈絡。

但正是因為黑色容易吸收和稀釋周圍的一切顏色,所以建議慎用黑色作為品牌LOGO的主體色喔!

5. 黑白色搭配永遠不過時

不管是在服裝設計、平面設計、商業設計或多媒體設計,黑白配色永遠有超然的地位。

純粹的黑與白除去多餘的干擾,同時又能展現出迥異多變風格,從古至今黑白色實驗性的創新用法層出不窮,將黑色變成了一種永恆,使創意變得無所不能。

UI 設計 這門專業包羅萬象,除了科學理論、資訊架構技巧,基礎設計美感等等,行銷大師 Neil Patel 曾說:「顏色在你購買特定產品的原因中佔了85%。」可見色彩學也是很重要的知識。

想要進修 UI 課程 的同學們,在挑選課程時也要仔細選擇喔。

 

 

 

 

 

 

推薦文章:
還在尋尋覓覓好的UI課程嗎?先來達內看看吧!!


重新學習UI UX Python課程 打好基礎輕鬆領高薪


讓UI課程等等的電腦課程幫你打造一份完美有實力的超強履歷!!


Python人工智慧是否對人類造成威脅?(上)


前端工程師課程也能自學?來試試吧!!其實沒有想像中的難~


單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺


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


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


這七種職業學會Pyhton不怕未來被取代~

 

 

色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(上)

色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(上)
色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(上)

為什麼UI設計師愛用黑色當配色?原來原因有這五個!(上)

色彩的魔力:黑色在UI設計的運用

▲ 黑色的UI設計範例

你知道嗎? 色彩其實對人造成的影響可說是非常強烈的,色彩心理學的開創者 Carl Jung 曾說過:「色彩是潛意識的母語。」即使沒有自覺,但是我們的各種選擇其實都受到潛意識左右,而潛意識則其實很容易被顏色影響。CCI COLOR的研究顯示,消費者在網路上評估一項商品時平均只花費短短90秒,而對於產品的印象,有62%以上都來自於顏色。

因此「色彩心理學」對於 UI 設計 非常重要,無論是要設計軟體產品的介面、品牌形象網頁的整體視覺風格或提升 使用者體驗(UX) ,都不可或缺,但是並不是每個 UI 課程 都有這方面的教學。

今天將探討「黑色」的色彩意義,以及優秀的 UI 設計 師必須掌握的配色技巧!

黑色:最富有多元意義的顏色

▲ 德國的歌德金屬樂團 Lacrimosa 的專輯封面,一率用黑白且富有歌德元素的素描

說到黑色代表的意象,你可能會想到:侵略、權力、優雅、高貴、恐懼、神秘、邪惡……會有這麼多含意,是因為黑色被色彩學定義為無彩色,但能帶給人心理上的特殊感受,在許多文化中都賦予了黑色不同的哲學意涵,是一種心理色調。

歐美文化中,黑色經常被賦予死亡、恐懼的意義,如稱呼鼠疫為黑死病;同時也是悲傷的象徵,如參加葬禮會著黑色衣服。

在中國文化中,黑色在《易經》裡被認為是天的顏色,同時也是眾色之王,是古中國單色崇拜最長的色系。以黑白表示陰陽合一的「太極圖」,是中國千百年的哲學思想結成的碩果。

正因黑色在文化意義層面上被賦予多種的寓意,當用於設計作品時,也就代表能傳達出各種不同的概念:

1. 只使用黑色,能凸顯空間感和構圖

▲ 黑白常用在建築繪圖中,凸顯空間感和構圖(圖片來源:andrewprokos.com

黑色因沒有色調深淺和亮度,常被認為是嚴肅、正式的顏色,但相對地,黑色當作背景能讓產品凸顯出來,在呈現空間感的同時看起來更具質感。但若是有大量文字的網頁就不建議以黑色作為背景色,因會使閱讀變得吃力。

同時,只使用黑色也能凸顯核心重點,避免被過多的顏色分散焦點。

2. 畫面容易達成一致性

▲ 黑色用在 UI 設計,能讓很多畫面達成一致性

因人類的大腦天生就對井井有序、整齊易懂的設計有所偏愛,無色調的黑色方便透過深淺漸層的配色方式,讓視覺保有一致性,自然地帶給觀者美的感受。

一致性指的是畫面上各個色彩之間的和諧一致。在同一個框架內,配色沒有做到協調一致的話,設計容易變得支離破碎。

本文待續,下集請點此

 

 

 

 

 

 

推薦文章:
色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(下)


讓UI課程等等的電腦課程幫你打造一份完美有實力的超強履歷!!


重新學習UI UX Python課程 打好基礎輕鬆領高薪


Python老師上課啦~第九課:原地運算符


用五個小學問做自己想要的CSS背景好簡單!(1)背景固定模式


前端工程師基礎CSS精選懶人包


Java課程助你擠進IT專業職場大門


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


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

終極解密!!一窺前端工程師/後端工程師/全站工程師的差異!

終極解密!!一窺前端工程師/後端工程師/全站工程師的差異!
終極解密!!一窺前端工程師/後端工程師/全站工程師的差異!

今天就要帶你揭開前端工程師/後端工程師/全站工程師的神秘面紗!

現今的社會,業界對於網站開發工程師的需求,一直都沒有停止過,這同時也吸引很多非本科系出身的同學想轉職到網站開發工程師。但是常常聽到網站開發工程師還有分成「前端工程師」、「後端工程師」,還有綜合上述的「全站(full-stack)工程師」。這三種職位到底差在哪裡?該選哪種學習比較好上手呢?因此本篇文章幫助你先了解網站開發的分工定義、技能需求,才能幫助你找到適合自己的目標、更有效率學習,更快達成轉職網站開發工程師的願望哦。

前端工程師

網站的「前端」是與用戶直接交互的部分,包括你在瀏覽網頁時接觸的所有視覺內容–從字體到顏色,以及下拉菜單和側邊欄。這些視覺內容,都是由瀏覽器解析、處理、渲染相關HTML、CSS、Javascript 文件後呈現而來。

技能與工具

前端開發,就是要創造上面提到的網站面向用戶的部分背後的代碼,並通過建立框架,構建沉浸性的用戶體驗。為了能實現這個目標,開發需要熟練運用下列語言、框架、工具庫——三大語言:HTML,CSS,和Javascript

此外,掌握jQuery 和LESS 等工具庫也很重要,它們能幫助開發者以更高效的方式編碼;很多前端開發崗也要求Ajax 方法的使用經驗,它可以幫助你使用Javascript 在後台從服務器拉取數據,協助實現頁面的動態加載。

打個比方,前端工程師的工作專注於「房屋」裝修,而蓋房子的工作由後端開發者負責。通過一些專門的工具,前端開發者與設計師/用戶體驗分析師密切合作,幫助構建原型或是線框圖,參與產品開發到發布的全過程。

一些前端工程師甚至能準確定位影響用戶體驗的特定問題,並給出建議或是代碼解決方案,對產品設計帶來積極影響。在專業能力外,與其它團隊協作,以理解特定目標、需求、機遇,以及高效的執行力也非常重要。

這聽起來工作內容很多,但相對回報是十分豐厚的。「我是一名技術人員,也是一名設計者,在數字平台上使用標記語言和代碼修改視覺元素並與之互動是很自然而有趣的體驗,」有八年前端開發經驗的Mikey Ilagan 說「這讓我能夠直接影響到用戶體驗,操縱應用和網站裡用戶所見並直接與之交互的元素,這非常棒!」

總之,前端開發者要為後端開發者搭建的「房屋」進行內部設計和裝修工作。裝潢風格由房屋所有者指定。Apptix 的產品市場負責人Greg Matranga 表示:「前端開發者有時更容易為他們的工作感到振奮,因為他們有更廣闊的空間發揮自己的創造力。」

後端工程師

是什麼給網站前端提供支持?數據存放在哪裡?這就涉及後端內容了。網站後端包括服務器、應用還有數據庫。後端開發者構建並維護這些組件,為網站提供多方面支持。

由上圖可以看出,UDN 的讀者來源,大部分來自 Search (搜尋引擎)輸入特定關鍵字後,進到 UDN 的網頁;而東森新聞雲的讀者最多都是從 Facebook 等 Social 社群網站的連結進來。

技能與工具

為了讓服務器、應用、數據庫能夠彼此交互,後端工程師需要具有以下之技能:

用於應用構建的服務器端語言:PHP, Ruby, Python, Java, .Net 等;
數據相關工具:My SQL , Oracle, SQL Server等;
PHP框架:Zend, Symfony, CakePHP等;
版本控制工具:SVN, CVS , Git 等;
還要熟練使用Linux 作為開發和部署環境。

後端開發者使用這些工具編寫乾淨、可移植、具有良好文檔支持的代碼來創建或更新 Web 應用。但在寫代碼之前,他們必須先與客戶溝通,了解其實際需求並轉化為技術目標,制定最有效且精簡的方案來進行實現。

「我熱愛後端開發因為我喜歡操縱數據」,資深後端開發者就職於 Wildbit 的 JP Toto 說。「現在共有和私有 API 已變成移動設備、網站以及其它互聯繫統交換數據的必備通道。創建對大家有用的API 是我工作裡非常鼓舞人心的部分」。

全端工程師

全端工程師,最初是 6 年多以前由 Facebook 帶動的概念。全棧的核心,是指這批開發者能夠承擔包括前端、後端在內的所有功能開發任務,他們擁有一個技能全家桶。

「能夠同時承擔服務器端和客戶端工作會為你帶來更多機會,」 Grovo 的全端工程師 Federico Ulfo 說「當然這也就意味著更多的挑戰。以廚藝作類比,掌握烹飪和烘焙都需要時間與經驗積累,同時掌握兩者要花費更多精力。照著菜譜做誰都可以,我此處所說的是做出真正美味東西的能力。」

技能與工具

全端工程師也通常在服務器端進行編程工作,但他們熟練前端語言,能夠操縱網站面向用戶的部分。基本上可以形容他們是百事通。

全端工程師需要對 Web 架構的每一個層次都有足夠的了解:搭建和配置Linux 服務器,編寫服務器端API,利用客戶端Javascript 代碼驅動應用,將設計層面的東西轉化到實際的CSS 代碼。掌握並使用大量工具的同時,全端工程師需要敏捷地分配服務器端和客戶端任務,提供解決方案並對比不同方案的優劣。

 

 

 

 

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


零基礎也想成為前端工程師?那你一定要知道這”三大”內容!


資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?


網路行銷的7大心法1內容行銷是不可或缺的!


從七個不同的方向來解釋Python和Java的不同之處!!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


SEO優化剖析!隱藏在URL網址下的真實面貌!?

零基礎也想成為前端工程師?那你一定要知道這”三大”內容!

零基礎也想成為前端工程師?那你一定要知道這"三大"內容!
零基礎也想成為前端工程師?那你一定要知道這”三大”內容!

想要當前端工程師,一點也不難,首先要先知道最重要的前端三大內容!

今天小編要跟大家分享的文章是關於零基礎如何自學成前端工程師。目前網路發展迅速,前端也成為很重要的崗位之一,前端開發是屬於很簡單的程式設計,甚至都不能叫做程式設計,因為它真的很簡單,有很多想要轉行進入 IT 行業的新手會選擇當前端工程師。那該怎麼自學?以下就來和小編一起來看一看文章吧~首先我們學習前端,得要知道前端的三個大內容,HTMLCSSJavaScript,其中 HTML5 CSS 是相互結合著學習,掌握了這兩個了以後我們就算真正入門了,然後再深入學習 JavaScript 等等。

一、首先我們要了解 HTMLCSSJavaScript 分別是什麼?

HTML 就相當於一個人,CSS 相當於一個人穿著的衣服,JavaScript相當於讓這個人做什麼動作,這樣一形容呢,我們就很好理解了,這個人就是網站,需要有 header 頭,body 身體,footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的 CSS 樣式,網站裡的動態效果就都是我們的 JavaScript 去實現的。

二、零基礎學前端工程師會很難學嗎?

想知道前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁,相信你就會知道。我們用到的軟件呢,對於入門級來說我們一般推薦大家用 DreamWeaver,新建一個 HTML 後,出現的界面是這樣的,

以下我們開始輸入原始碼,我們可以看到這裡有這樣的原始碼<body></body>,這個就是我們網頁的身體,我們接下來要輸入的內容都是在這中間輸入的,這個括號表示的標籤,標籤都是一前一後的,成對兒出現的,除了一些特殊的標籤,隨後我們再一一給大家講解。現在我們輸入點內容,看看效果。

我們輸入一個標籤<div><div>,點擊右上角的地球瀏覽一下,會發現彈出了一個空網頁,什麼也沒有,那是因為我們現在只書寫了HTML,還沒有寫CSS,簡單來說就是,我們創建了一個東西在頁面裡,但是還沒有設置這個東西長什麼樣子,現在我們在設置它的樣子,

CSS”>
1、我們為了給這個 div 設置樣式,所有先給它起個名字不然,電腦不知道我們要給誰加樣式,class=”aaa” 的意思是起名為aaa

2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS,我們整個網站要加的所有樣式都是寫在這個中間的。

3、我們在style裡寫樣式,電腦首先要知道我們給誰加樣式,所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式,電腦會自動把.(點)後面的名字,跟下面body裡的名字做一個匹配,這樣電腦就知道,哦~原來你是要給這個div加樣式呀,

4、然後我們把要給這個div加的樣式寫在大括號裡,Width:100px; 意思是這個div的寬是100像素,height:100px; 意思是高是100像素,background-color:#FF0000;意思是背景顏色是#FF0000這個顏色,

注意:

(1)這裡我要給大家解釋一下,大家別看這麼多原始碼,這麼多專有名詞,其實軟件有提示,像下面這樣,直接輸入第一個字母後面的專有名詞就出現了,直接選中就行了,連專有名詞都不用背,前端真的很簡單,

輸入 W 和輸入 h,會自動彈出名詞下拉選單

(2)每一個專有名詞都有提示,說到這裡,不會英語的同學就不要給自己找藉口說英語不好,學不會程式設計了。雖然說很簡單,但是要想真真的把前端學好是需要下功夫的,主要就是要堅持。

下面我們繼續設置好了以後,我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面,那恭喜你,你成功了!

 

 

 

 

 

 

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


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


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


連麥當勞也加入了人工智慧的戰場?


Python是什麼?可以吃嗎?


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值

資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值
資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值

身為前端工程師的你,知道如何用Emmet輕鬆設定顯示文字跟自訂屬性值嗎?

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

顯示文字

使用 Emmet 能讓前端工程師快速展開各種 HTML 元素,但如果能在撰寫的時候就能產生內文,不需要等到元素展開後才補上內文那就更棒了!沒想到這個功能 Emmet 也有!真不塊是前端工程師的省時神器!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。

 

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生哦。

假設想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

若想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

如果想要多增加一些屬性值,只要在同一個 [] 中括號中,將每個屬性值用空格隔開就可以了。如在上個例子中,想要設定網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

 

 

 

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


前端工程師的御用愛將CSS,超好用四招搞定HTML!


CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!


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


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


體格標準,妝扮無暇的網站怎麼建立?快來上CSS網頁設計課程!


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

資深前端工程師之Emmet教學(3)快速複製元素與設定編號

資深前端工程師之Emmet教學(3)快速複製元素與設定編號
資深前端工程師之Emmet教學(3)快速複製元素與設定編號

只要是前端工程師,都知道Emmet,但是你知道如何善用Emmet來快速複製元素跟設定編號嗎?

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

複製元素

前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。假設要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花不少時間的。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

再假設我們要在一個 .news 中放置 5 個 .block,然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落,每個 p 段落中又放置兩張圖片,則輸入「.news>(.block>h2+(p>img*2)*2)*5」

編號

有時前端工程師會在HTML輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」

若要在這些流水編號前面加個「零」,例如 01、001,則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例,我們得輸入「li.list-$$*5」以及「li.list-$$$*5」

設定起始編號

$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承接上例,我們要設定起始數字為 5 就輸入「[email protected]*5」

Emmet 預設的編號是由小到大,若是希望編號由大到小,那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤,編號由大到小,就輸入「[email protected]*5」 我們要設定起始數字為 5 ,就輸入「[email protected]*5」。

 

 

 

 

推薦文章:
資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值


那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!


前端工程師CSS實務教學應用-Div標籤(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


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


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


HTML5瀏覽器儲存比cookies更優的來了!

資深前端工程師之Emmet教學(2)階層如何快速區分?

資深前端工程師之Emmet教學(2)階層如何快速區分?
資深前端工程師之Emmet教學(2)階層如何快速區分?

前端工程師常說,只要掌握幾個關於emmet的要點,要區分網頁階層其實超級快!

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

父子兄弟階層、群組、上一層

這一篇有簡略說到父子階層(父元素與子元素)之間的關係。想成為前端工程師的同學們未來在處理網頁時,一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式:

父子元素一次輸入

前端工程師在使用 Emment 在設定HTML的子元素時非常方便,只要在父子元素間加入這個” > “符號即可。如下方的動態圖所示:假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p,並在 p 中在加上孫元素 ol 與 li 等動作,只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可輕鬆地一次寫完!

兄弟階層一次輸入

承接上面「父子元素一次輸入」的範例,若想在 p 的上方放置 h2 標題,但是 h2 標題不屬於 p 的父元素,位階是跟 p 同等的,則 h2 與 p 互為兄弟元素。

上方提到:元素間互為父子關係則用 > 隔開;若為兄弟元素,就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」

將元素設為同一階層的群組

承上面「兄弟階層一次輸入」的範例,若前端工程師想在互為兄弟階層的 h2+p 的階層下,再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做?那就把 h2+p 視為一個群組,用 () 括號的方式包起來,把用括號起來元素視為同一階層來看即可,所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。

上一層

承上面「群組 Grouping」的範例,若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方,新增一個 div 父元素(class name 名為「news_p」以及 id 名為「paragraph2」),就可以在元素間加入 ^ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。


本例的 div 元素使用 ^ 符號來往上爬一個階層,如果想要爬兩層的話,就是 ^^ 符號。

如果你想成為專業的前端工程師,這些快速鍵可要記得多練習幾次,熟練後就能在編寫 HTML 時更有效率啦!

 

 

 

推薦文章:
資深前端工程師之Emmet教學(3)快速複製元素與設定編號


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


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


HTML5瀏覽器儲存不是只有cookies!


今天一起揪出來-那些偷偷藏著Python和Java的電影(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


透過對的Java課程,讓你從茫然的畢業生中脫穎而出!

資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?

資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?
資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?

資深前端工程師都知道Emmet超好用,今天就要教你如何快速產生標籤名稱!

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

身為一個前端工程師,一定要裝一個「省時神器」 Emmet 外掛,這不僅可以大大節省前端工程師在編寫 HTML 及 CSS 的時間,還可以省下的時間可以讓你去體驗人生各種美好的事物,如玩玩喵星人、上上健身房運動等等。

Emmet 支援的網頁編輯器如下圖:

安裝的方式會因個網頁編輯器而異,在網路上皆可以查到,故此省略。以下小編先介紹基本的使用方式:

快速產生標籤名稱 (Tag Name)

前端工程師在寫網頁的第一步,就是在網頁編輯器中開出新的頁面,並產生標準的 HTML 樣板。透過 Emmet,我們可以先在編輯器中輸入「!」或是「html:5」後,再按下 Ctrl+E 鍵即可。

假設我們要產生一個 p 元素,那麼我們只要直接輸入 p 後,再按下 Ctrl+E 鍵,就能自動產生起始元素及結束元素。如下所示:

只要是 HTML 所定義的元素,如 h1-h6、center、title 等等,都能使用上述方示,快速產生出相對應的語法如下

有些元素還會帶入跟該元素有關的屬性,例如:iframe、a 或是 img 等

快速產生 className 與 id

我們也可以在產生元素時,直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤,則輸入「h1.title」後按 Ctrl+E

若是要針對單一元素要加上多個 class name 的話,只要把它們用半形的句號隔開,接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤,則輸入「div.news_p.c1」後按 Ctrl+E

前端工程師省時神器 Emmet 一般預設的元素是 div,所以如果直接輸入英文句號後,寫 class name 的話,就會自動產生一個 div 元素加上指定的 class name。承上例,輸入「.news_p.c1」後按 Ctrl+E

除了 class name,我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 即可。例如今天我們要產生 id 為「news_p」的 div 標籤,則輸入「#news_p」後按 Ctrl+E

class name 和 id 可以同時使用,例如今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤,則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E

以上介紹為常用的 Emmet 標籤快捷縮寫方式,如果你想要知道更多的元素縮寫方式,都可在 Emmet 官方文件中找到:Emmet cheat sheet

 

 

 

推薦文章:
資深前端工程師之Emmet教學(2)階層如何快速區分?


為什麼ID選擇器對前端工程師如此重要?原因是…


那些前端工程師沒教你的CSS,今天一一告訴你!


從七大點告訴你Python和Java有何不同!!


擠進高薪科技大門-Java課程等你來瞭解!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


專業達內教育與 Adobe·ACA 國際認證簽約成功

前進前端工程師之HTML5入門課程-SVG 路徑動畫

前進前端工程師之HTML5入門課程-SVG 路徑動畫
前進前端工程師之HTML5入門課程-SVG 路徑動畫

HTML5中有許多程式碼,只要根據以下步驟,SVG路徑動畫也可以輕鬆做出來!

SVG 路徑動畫

前端工程師建議如果要畫SVG路徑動畫的時候,可以使用HTML5中的 <path> 元素來定義路徑。

SVG Path 基本指令列表如下圖所示

See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.


(圖片取自:iT邦幫忙)
 

  <path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>

 

See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.

    • M
      起始點的 x,y 座標 (move to)
    • L
      從「目前的點」的座標畫直線,到指定點的 x,y 座標 (line to)

    • H
      從「目前的點」的座標畫水平線,到指定的 x 座標 (horizontal line to)

    • V
      從「目前的點」的座標畫垂直線,到指定的 y 軸座標 (vertical line to)

    • C
      從「目前的點」的座標,畫條貝茲曲線,到指定點的 x,y 座標。如下圖的曲線,C 的部分會有三組 x,y 座標:其中第一組以及第二組 x,y 座標為控制曲線的形狀用,最後一組為終點座標。

    • S
      S 可以從「目前的點」之後,再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是,這個貝茲曲線的形狀,就是這個「目前的點」的鏡射線。聽起來很難懂,看下面的例子就知道了。
    • Q
      Q 就是起點和終點的貝茲曲線共用同一個控制點,只需要有貝茲控制點的座標和終點座標即可。

    • T
      T 只有一組參數 x,y ,表示終點的座標,所以 T 的前方要接上 Q 才能畫出對應的座標線。

    • Z
      關閉路徑,將「目前的點」的座標與第一個點的座標連接起來 (closepath)

 

 

 

推薦閱讀:
資深前端工程師淺談Box model(上集)


成為前端工程師必會技能之一-CSS背景顏色設定


前端工程師CSS自學寶典(一)-絕對單位


從達內教育評價事件來看GEEGO(奇科?)IT培訓評論的謬誤


電影告訴你Python和人工智慧如何影響人類!(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

前進前端工程師之HTML5入門課程-SVG基本圖形動畫

前進前端工程師之HTML5入門課程-SVG基本圖形動畫
前進前端工程師之HTML5入門課程-SVG基本圖形動畫

HTML5之於前端工程師,就好像水之魚一樣,密不可分!其中SVG基本圖形動畫可是一定要會的!

 

SVG 基本圖形動畫

前端工程師常常會使用 <animate> 元素來繪製 SVG 動畫。

今天我們先來學如何繪製一個方形,並且將動作設定在三秒鐘內往右移動,然後會重複相同的動作 3 次。HTML5 原始碼與結果呈現如以下所示:

See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.

以上所有的 HTML5 標籤分析如下:

  • <attributeName>
    屬性名稱,就是當你指定了這個屬性,就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移,水平移動的座標為 x,所以該例中 attributeName 為 x。若為垂直移動的話,attributeName 則為 y。
  • <from>
    動畫開始時的屬性值。
  • <to>
    結束動畫時的屬性值。
  • <dur>
    動畫持續時間。
  • <repeatCount>
    動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3;若要動畫無限重複的話, repeatCount 則設為 indefinite。
  • <fill (freeze | remove)>
    這裡的 fill 不代表填色,而是指定動畫結束時的屬性,屬性可選 freeze 或是 remove,remove 是預設值,也就是動畫結束之後,圖形返回原本的狀態,而 freeze 則是在動畫結束後,固定在結束的狀態。

 

 

 

 

 

推薦文章:
前進前端工程師之HTML5入門課程-SVG 路徑動畫


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


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


愛因斯坦也得過這種病? 專屬成功人士的疾病Python學員們知道嗎?


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


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


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~