不需任何基礎就能輕鬆學會網頁特效，你也做得到！就算您沒有學過 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）與前端網頁特效結合在一起。讓您在本課程中一併學會前、後端整合的基礎能力！

• 以實作優先：減少理論說明，大量練習範例，講求從做中學。
• 錯誤學習法：透過錯誤的範例從中學習，並找出自己的盲點。

• 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 頁籤)

• 下載與安裝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）

• 介紹 CKeditor。安裝與設定。
• 以ASP.NET MVC為例。
• 以 ASP.NET (Web Form)為例。
• 「HTML輸入」可能的危害，如何驗證？ 介紹XSS攻擊與防範
• 「以ASP.NET MVC為例。
• 「以ASP.NET (Web Form)為例。

• 介紹 fancyBox（v2.1.7版、v3.x版）
• 以ASP.NET MVC為例。
• 以ASP.NET (Web Form)為例。

• 介紹 Google Chart（v2.1.7版、v3.x版）
• 以ASP.NET MVC為例。
• 以ASP.NET (Web Form)為例。

• 介紹 Google Chart（v2.1.7版、v3.x版）
• 以ASP.NET MVC為例，介紹四種寫法與JavaScriptResult。
• 以ASP.NET (Web Form)為例。