前端網頁設計師養成

BE A BETTER WEB DESIGNER

前端網頁設計師養成方案詳細資訊

前端網頁設計師養成方案專為前端網頁設計需求者所制定,相關課程排定以職場常見要求為主,並以設計排版課程為輔。協助有相關需求者,於有限的時間內達成既定的目標。本方案一期 52500元整,共有45次上課權限,一次上課1至3小時(必要時以學習進度為主),使用期限為期6個月,期間內未使用之權限視同放棄。

BIJUTSU衷心提醒您,縮時學習必須更加穩健踏實地配合課程安排,有效的方法與提升學習專注力,是達成目標的不二法門。

課程特色

  • 時間選擇彈性
  • 個別指導教學
  • 紮實構成訓練
  • 完整成果呈現

關鍵字搜尋: 跨領域、轉換跑道、程式設計

課程資訊

適用對象:‧前端網頁設計職場需求者‧短期專業規劃者
所需材料:ADOBE PHOTOSHOP CS5 , ADOBE ILLUSTRATOR CS5 , Adobe Experience Design , SUBLIME TEXT

本方案課程為本單位建議所制定,如需量身規劃可與老師討論後定案,如需學科指導請另行告知。

No. 項目 內容
1. 基礎前端規劃與本機環境架設 網頁前端與後端運作、網站開發流程介紹,以及sublime操作說明與codepen平台介紹、伺服器瀏覽與原理講解。
2. 初識HTML標籤 使用Sublime快速鍵介紹、認識HTML文件結構與階層概念、最基本的HTML標籤、安排文字段落與版面結構、文字樣式變化、使用Lists、Divs 和Spans。
3. 初識HTML標籤與基礎CSS 透過範例練習學習如何使用HTML標籤,並認識CSS美化網頁原理,以及CSS基本語法(class與id概念、 顯示方式display、padding/margin)。
4. 基礎CSS CSS基本語法(調整外觀與框線、變更文字相關樣式、超連結效果等)。
5. 探索HTML5、CSS3基礎 HTML5、CSS3語法基礎,多種樣式按鈕設計與製作。
6. CSS之色彩與特效運用 瞭解網頁色彩、調整網頁背景、圖文排版效果、超連結與頁面特效等,並運用製作電子名片。
7. 建立互動式表單 建立表單、表單的各種輸入欄位、列表欄的變化、區塊文字輸入欄位,以及組織表單內容與驗證輸入值。
8. CSS綜合技巧應用 圖片套用濾鏡特效,實作電子履歷元件。
9. 網頁佈局與電子履歷實作(上) 多樣式版面設計、網頁布局解析與框架架設、元素定位。
10. 網頁佈局與電子履歷實作(下) 綜合運用實作電子履歷與檢討。
11. CSS編寫技巧與各式邊框 CSS編寫技巧說明,以及如何使用CSS編寫多種樣式邊框,實做並解析各種範例,例如:半透明邊框、多邊框、內圓角邊框、連續的圖片邊框等。
12. 背景 使用CSS編寫豐富有趣的背景,例如:條紋背景、網格背景、圓點背景等複雜的背景圖案,並自由運用在網頁之中。
13. 形狀 使用CSS編寫各種形狀,例如:有彈性的橢圓形、平行四邊形、菱形圖片、剪角、簡單的圓餅圖等,並自由運用在網頁之中。
14. 陰影與濾鏡 使用CSS編寫單邊陰影、特殊的陰影、圖片濾鏡效果,並自由運用在網頁之中。
15. 文字效果 使用CSS編寫各種文字效果,例如:凸版印刷文字、外框文字、光暈文字、浮凸文字等,並自由運用在網頁之中。
16. 定位方式 使用CSS編寫各種定位方式,例如:position定位方式與z-index等,並自由運用在網頁之中。
17. 系統性管理開發 介紹縮寫模組、HTML樣板語言pug(jade)、css樣板語言sass與變數概念。
18. 系統性管理開發 使用sass 動態變數,以及動態產生模組mixin概念。
19. 系統性管理開發實作 使用pug(jade)和sass製作品牌視覺套色網頁。
20. 前端基礎動畫 CSS加入基礎滑鼠互動(:hover / :active)、動畫基礎transition-duration/delay。
21. 前端基礎動畫 製作影格動畫animation、@keyframes,以及調整速度。
22. 前端基礎動畫互動 學習使用SVG讓圖像動起來。
23. 前端基礎動畫互動實作 藉由案例實作,熟習運用基礎動畫。
24. 前端基礎動畫互動實作 藉由案例實作,熟習運用基礎動畫。
25. 響應式網頁設計概念 說明讓網站適用於各種裝置的必要性,解說響應式網頁設計的內容流與概念說明、Media Queries的使用方法。
26. 響應式網頁設計運用 透過範例實作,模擬並瞭解電腦版、平板、手機板的變化。
27. 響應式網站實作(上) 透過範例實作,熟悉響應式網站的製作思維與方式。
28. 響應式網站實作(下) 綜合運用實作與檢討。
29. Bootstrap基礎與原理(上) Bootstrap原理與結構解說。
30. Bootstrap基礎與原理(中) 熟悉Bootstrap格線系統原理,以及相關運用技巧。
31. Bootstrap基礎與原理(下) 透過實作範例,結合skrollr製作捲動式網頁。
32. Adobe Experience Design(XD)教學:軟體設計工具與介面運用 瞭解基本介面與功能,明白如何利用相關選項,設定適當的作業環境。
33. Adobe Experience Design(XD)教學 透過設計網站案例熟悉軟體工具使用。
34. Adobe Experience Design(XD)教學 透過設計網站案例熟悉軟體工具使用。
35. Adobe Experience Design(XD)教學 透過設計網站案例熟悉軟體工具使用。
36. Adobe Experience Design(XD)教學 透過設計網站案例熟悉軟體工具使用。
37. Adobe Experience Design(XD)教學 透過設計網站案例熟悉軟體工具使用。
38. 平面設計與UI設計 介面設計的觀念:從需求中找到洞見,並瞭解平面設計與UI設計的思考差異。
39. 網站視覺設計與規劃(上) 版面規劃概念、網格系統。
40. 網站視覺設計與規劃(下) 製作與輸出icon/圖像、管理網頁樣式與色彩規劃。
41. Adobe Illustrator – Logo製作 了解如何使用Illustrator製作個人Logo,為個人網站作前期準備。
42. 個人創作:響應式網站實戰(上) 運用所學設計出屬於自己風格的響應式網站,從尋找主題、規劃架構、製作設計稿,到製作素材、網頁佈局、線上測試等。
43. 個人創作:響應式網站實戰(中) 運用所學設計出屬於自己風格的響應式網站,依據學員實作情形予以調整課程內容。
44. 個人創作:響應式網站實戰(下) 運用所學設計出屬於自己風格的響應式網站,依據學員實作情形予以調整課程內容。
45. 作品發表 驗收成果與檢討。
報名影片介紹

Notice

本公司秉持使用者付費與公平原則,無論您的差異,所有學員皆一視同仁,恕不接受任何議價、更動規定或延長期限的要求。如不認同,請斟酌選用。
BIJUTSU 是以各方案的規則下及雙方的互信架構上,盡可能的去滿足學員視覺藝術上 " 知 " 的需求,以及盡可能的配合各學員時間上的 " 突發性 ",我們至始至終提供的僅止於 " 方便 "。

套裝課程注意事項

• 學費於當期上課前繳清,最遲不得超過上課當日,學費中不包含材料費,如有所需可與本單位訂購或自行準備。
• 每位學員皆享有一對一教學品質,上課時間須事先與老師安排,如因故無法到課,最晚於上課當日的前一日電話告知,如違反相互約定,該日堂數照常計算。
• 軟體課程嚴禁一日預約兩堂課(含以上),課程可預約時間依公司規定(營業時間、行事曆)和老師時間為主。
• BIJUTSU 保留規則修改權利,有任何變動即會主動告知並公佈於官網。且任何方案課程皆不可轉讓。

補課須知:
套裝課程方案為無補課制,如有疑慮,請斟酌選用。

退費須知:
套裝課程方案為無退費制,如有疑慮,請斟酌選用。