前端網頁設計師養成
BE A BETTER WEB DESIGNER
前端網頁設計師養成方案詳細資訊
前端網頁設計師養成方案專為前端網頁設計需求者所制定,相關課程排定以職場常見要求為主,並以設計排版課程為輔。協助有相關需求者,於有限的時間內達成既定的目標。本方案一期 52500元整,共有45次上課權限,一次上課1至2小時(必要時以學習進度為主),使用期限為期6個月,期間內未使用之權限視同放棄。
BIJUTSU衷心提醒您,縮時學習必須更加穩健踏實地配合課程安排,有效的方法與提升學習專注力,是達成目標的不二法門。
課程特色
- 時間選擇彈性
- 個別指導教學
- 紮實構成訓練
- 完整成果呈現
關鍵字搜尋: 跨領域、轉換跑道、程式設計
課程資訊
適用對象:‧前端網頁設計職場需求者‧短期專業規劃者
所需材料:ADOBE PHOTOSHOP CC , ADOBE ILLUSTRATOR CC , 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 保留規則修改權利,有任何變動即會主動告知並公佈於官網。且任何方案課程皆不可轉讓。
補課須知:
套裝課程方案為無補課制,如有疑慮,請斟酌選用。
退費須知:
套裝課程方案為無退費制,如有疑慮,請斟酌選用。