零基礎輕鬆上手
不需任何基礎就能輕鬆學會網頁特效,你也做得到!就算您沒有學過 JavaScript、jQuery、CSS,只要會「複製、貼上」就能套用各種網頁特效,讓初學者從零開始無痛入門。
課程中老師也會分享他的「自學」密技,教您知道如何閱讀原廠網站的說明,就能套用這些網頁特效。只要學會這個方法,往後自學也能直接上手!
同時學習後端程式
本課程的所有特效,均提供 ASP.NET 兩種後端程式(Web Form 與 MVC)搭配解說。讓您在學習「前端網頁特效」的同時,也順便學會了 ASP.NET 兩種後端程式!
課程內容
最熱門的 RWD 網頁特效,可以讓網頁瞬間偵測觀賞者的螢幕大小,自動排版並提供最佳解析度與瀏覽體驗。包含:Carousel、旋轉木馬、輪播(動態投影片)、三段式圖文呈現的樣版等等。
針對撰寫 HTML 表單(Form)的前端網頁提供各種變化,例如:日曆(datepick)以挑選日期取代文字輸入,避免日期格式錯誤。手風琴特效(Accordion)最適合手機螢幕的觀賞與點選。頁籤(Tabs)在各大網站的首頁。這些皆是必備特效,不得不學!
以圖層(Layout)、燈箱的特效來展示多媒體圖片、影片。是如今每個網站必備且不可缺少的效果。
讓您的網頁在輸入長篇文章時,就能直接套用 HTML 效果,如同在網頁上安裝了 DreamWeaver 網頁編輯器一樣,而且是直接在瀏覽器上面執行。
無所不能的網頁圖表產生器,除了基本的長條圖、圓餅圖、折線圖之外,Google Map 的地圖呈現更是一絕,使用 Google Chart 來繪製網頁圖表,不僅能提升自己網站的效能,繁多的圖表種類更是可以讓人挑到手軟!
最後也提供範例,讓您把 ASP.NET 後端程式(Web Form 與 MVC)與前端網頁特效結合在一起。讓您在本課程中一併學會前、後端整合的基礎能力!
課程特色
- 以實作優先:減少理論說明,大量練習範例,講求從做中學。
- 錯誤學習法:透過錯誤的範例從中學習,並找出自己的盲點。
學員見證
課程綱要
前端特效 與 ASP.NET (MVC & Web Form) [上集]
1-1 jQuery UI
- jQuery UI介紹與成果展示
- ASP.NET MVC入門,產生一個新增的(輸入)表單
- MVC搭配 jQuery UI ( 1. DatePicker 日曆)。引用jQuery的錯誤與排除。
- jQuery UI搭配CSS自訂樣式(Themes、配色與外觀)
- 搭配 jQuery UI ( 2. Accordion 手風琴)
- 搭配 jQuery UI ( 3. Tabs 頁籤)
- Web Form快速入門,前端與後端的區別。
- 搭配 jQuery UI ( 1. DatePicker 日曆)
- 搭配 jQuery UI ( 2. Accordion 手風琴)
- 搭配 jQuery UI ( 3. Tabs 頁籤)
1-2 RWD & Bootstrap
- 下載與安裝Bootstrap
- 從官方網站的「Example」學起
- Start-Template,初學者樣版(Index_RWD_Template動作與檢視)
- Zero-Template,基本款,Bootstrap共用樣版(Index_RWD_ZeroTemplate動作與檢視)
- 使用ASP.NET MVC內建的範本,做成RWD效果。
- 簡介MVC內建的Layout Page -共用 _Layout.cshtml。(Index_RWD_MvcDefault動作與檢視)
- Carousel,旋轉木馬,輪播(動態投影片)#1(Index_RWD_Carousel動作與檢視)
- 原廠提供的Carousel效果,不太滿意。如何修正?(Index_RWD_Carousel2動作與檢視)
- 三段式圖文相框(圖片的圓形外框)(Index_RWD_Carousel3動作與檢視)
- 50-50%圖文排版(Index_RWD_Carousel3動作與檢視)
- RWD(自適應、響應式網頁設計)說明與示範
- 下載與安裝Bootstrap (4.1.2版)
- Start-Template,初學者樣版
- Zero-Template,基本款,Bootstrap共用樣版
- Carousel,旋轉木馬,輪播(動態投影片)#1(檔名WebForm_RWD_Carousel)
- 原廠提供的Carousel效果,不太滿意。如何修正?(檔名WebForm_RWD_Carousel2)
- 三段式圖文相框(圖片的圓形外框)(檔名WebForm_RWD_Carousel3)
- 50-50%圖文排版(檔名WebForm_RWD_Carousel3)
前端特效 與 ASP.NET (MVC & Web Form) [下集]
1-3 CKeditor(線上的網頁編輯器)
- 介紹 CKeditor。安裝與設定。
- 以ASP.NET MVC為例。
- 以 ASP.NET (Web Form)為例。
- 「HTML輸入」可能的危害,如何驗證? 介紹XSS攻擊與防範
- 「以ASP.NET MVC為例。
- 「以ASP.NET (Web Form)為例。
1-4 fancyBox,燈箱、圖層效果
- 介紹 fancyBox(v2.1.7版、v3.x版)
- 以ASP.NET MVC為例。
- 以ASP.NET (Web Form)為例。
1-5 Google Chart,網頁圖表之王
- 介紹 Google Chart(v2.1.7版、v3.x版)
- 以ASP.NET MVC為例。
- 以ASP.NET (Web Form)為例。
1-6 ASP.NET(後端)如何與前端(JavaScript)結合?
- 介紹 Google Chart(v2.1.7版、v3.x版)
- 以ASP.NET MVC為例,介紹四種寫法與JavaScriptResult。
- 以ASP.NET (Web Form)為例。