Atom前端編輯-網頁設計教學

網頁前端設計師最常用的編輯器會有Sublime Text, Atom, Visual Studio Code,
因為Atom是一套免費的編輯器軟體，對於剛開始接觸的使用者是一個很好的選擇，
而且筆者目前使用Atom頻率最高，所以特別介紹Atom給大家。

這個教學影片將介紹如何安裝Atom編輯前端網頁時常用的套件。

Sublime Text 3 教學-使用Emmet 快速建立CSS文字樣式-網頁設計教學

因為工作的關係，常常會需要用到Emmet快速建構HTML的結構與CSS標籤，所以分享一下
Emmet 常用的快速語法，這快捷用法在Sublime text, Atom, Visual Studio Code 都通用，應該說只要有安裝Emmet的編輯器都可以使用。

*2017-08-19 更新
前陣子因為在MacBook Pro上的Atom軟體不穩的因素，後來改用Visual Studio Code跟 Sublime text，實際執行後發現簡碼會有一點差別，例如在Atom上輸入mra[按下Tab鍵]後會出現 margin-right: auto 但是在Visual Studio Code就無法出現，所以這篇文章的簡碼會比較適合Atom。

另外標題也有變更，因為這篇文章主要在介紹Emmet建立CSS樣式，所以把標題修改成為比較貼近的敘述。

CSS3 column文字欄位設定-網頁設計教學

這是CSS3文字欄位設定的方式，但是在不同的瀏覽是會有不同的標示，例如建立一個類別為content的DIV元素，在Style中加入以下的語法就可以有兩欄的文字區隔方式。

Adobe Illustrator cc 2017 軟體入門

自從Adobe公司改為CC版本之後，軟體的介面開始有一些不同的改變，如果稍微不注意更新的內容，軟體的介面可能就會有點生疏了，但還好只有一些部分不一樣，以下的影片是關於Adobe Illustrator cc 2017 軟體入門教學，非常適合剛入門的新手或想了解軟體基本操作的使用者，歡迎觀賞以下的影片。

Illustrator 變形小標籤製作

Illustrator 變形小標籤製作，利用簡易的工具先製作基本形狀，
再搭配編輯的方式進行修改與調整，最後就可以製作出變形的小標簽。
做法很簡單，有興趣的朋友可以試看看。

Illustrator 製作咖啡杯

使用Illustrator 製作咖啡杯的教學，因為製作的時間比較長的緣故，所以分為兩段進行。
影片共分為上與下，請點擊下方的影片，或直接連結到以下的網址收看，謝謝！

Illustrator-貝茲曲線教學

學習Illustrator或許可以練習一下鋼筆工具，
鋼筆工具建立路徑的方式是以左鍵單響的方式建立，
若是需要由曲轉直線，可以在轉折錨點上按下左鍵，
可將線段轉成直線。

詳細的內容可以參考這段教學影片喔！

Sublime Text 3 教學-使用Emmet快速建立HTML標簽2-網頁設計教學

這篇文章是接續 Sublime Text 3 使用 Emmet 快速建立HTML標簽1的內容，

這此的說明將補充超連結、影像標籤、DIV標籤這三種類型的建立方式。

step1.超連結建立方式

a[page1.html]{連結}

Illustrator基本概念 形狀模式的操作方式

這是Illustrator圖形組合的概念，透過圖形加減造型的組合，

使用『視窗 / 路徑管理員』的功能視窗，

透過這個功能可以讓我們隨心所欲製作想要的造型！

這個教學影片可以給有興趣學習Illustrator的初學者，

簡單的瞭解圖形的製作概念。

建立HTML表格

表格是網頁設計課程中一門很重要的技巧之一，

因為表格可以收錄網頁的文字與資料內容，

所以部分的網頁資料會以表格為主軸，但是因為這幾年來表格逐漸不被採用，

網頁設計師開始採用項目清單進行編輯，也就是<ul><li>的標籤。

其中的原因我們就不多作敘述，本單元中將會介紹表格的使用方式。