ASP.NET 教學 — 前端特效輕鬆學 — 只要「複製＋貼上」就能學 (9.9小時)

課程介紹

(RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)

零基礎輕鬆上手

不需任何基礎就能輕鬆學會網頁特效，你也做得到！就算您沒有學過 JavaScript、jQuery、CSS，只要會「複製、貼上」就能套用各種網頁特效，讓初學者從零開始無痛入門。

課程中老師也會分享他的「自學」密技，教您知道如何閱讀原廠網站的說明，就能套用這些網頁特效。只要學會這個方法，往後自學也能直接上手！

同時學習後端程式

本課程的所有特效，均提供 ASP.NET 兩種後端程式（Web Form 與 MVC）搭配解說。讓您在學習「前端網頁特效」的同時，也順便學會了 ASP.NET 兩種後端程式！

課程內容

ASP.NET 教學 — 前端特效輕鬆學 (9.9小時)

優惠連結 https://9vs1.com/go/?i=323a87a3f716

Bootstrap

最熱門的 RWD 網頁特效，可以讓網頁瞬間偵測觀賞者的螢幕大小，自動排版並提供最佳解析度與瀏覽體驗。包含：Carousel、旋轉木馬、輪播（動態投影片）、三段式圖文呈現的樣版等等。

jQueryUI

針對撰寫 HTML 表單（Form）的前端網頁提供各種變化，例如：日曆（datepick）以挑選日期取代文字輸入，避免日期格式錯誤。手風琴特效（Accordion）最適合手機螢幕的觀賞與點選。頁籤（Tabs）在各大網站的首頁。這些皆是必備特效，不得不學！

fancyBox

以圖層（Layout）、燈箱的特效來展示多媒體圖片、影片。是如今每個網站必備且不可缺少的效果。

CKeditor

讓您的網頁在輸入長篇文章時，就能直接套用 HTML 效果，如同在網頁上安裝了 DreamWeaver 網頁編輯器一樣，而且是直接在瀏覽器上面執行。

Google Chart

無所不能的網頁圖表產生器，除了基本的長條圖、圓餅圖、折線圖之外，Google Map 的地圖呈現更是一絕，使用 Google Chart 來繪製網頁圖表，不僅能提升自己網站的效能，繁多的圖表種類更是可以讓人挑到手軟！

ASP.NET 教學 — 前端特效輕鬆學 (9.9小時)

優惠連結 https://9vs1.com/go/?i=323a87a3f716

學員上課後會學到什麼或能做什麼 了解「直接套用」特效以後，跟原本的網頁有何不同。 後續可以銜接前端技術或是CSS課程。 UI畫面走「後端」技術搭配資料庫。 有別於其他課程，需要學會CSS與前端技術，才能寫出作品。 「無須基礎、直接套用」也能做出各種網頁效果。 學員上課前需具備哪些軟、硬體設備或常識 會使用瀏覽器觀看網頁、會複製程式碼並貼上。直接「套用」就能學起，立即看見成果。 基礎的 HTML網頁能力。 Visual Studio 2015、2017 或後續新版，請下載社群版（Community版）。 建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有許多差異。 課程適合對象 需要撰寫網頁系統（網頁的前端設計師）、或對於網頁開發有興趣者。 對網頁前端有興趣，卻無任何基礎者。 最後也提供範例，讓您把 ASP.NET 後端程式（Web Form 與 MVC）與前端網頁特效結合在一起。讓您在本課程中一併學會前、後端整合的基礎能力！ 課程特色 以實作優先：減少理論說明，大量練習範例，講求從做中學。 錯誤學習法：透過錯誤的範例從中學習，並找出自己的盲點。 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 優惠連結 https://9vs1.com/go/?i=323a87a3f716 學員見證 課程綱要 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 優惠連結 https://9vs1.com/go/?i=323a87a3f716 *** 前端特效 與 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)為例。 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 優惠連結 https://9vs1.com/go/?i=323a87a3f716 我將思想傳授他人， 他人之所得，亦無損於我之所有； 猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。 — — Thomas Jefferson 寫信給我 — mis2000lab (at) yahoo.com.台灣 或是 school (at) mis2000lab.net ……………. facebook社團 https://www.facebook.com/mis2000lab ……………. YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ ******************************************* *** 第一天 的 ASP.NET MVC線上課程 免費看（5.5小時）*** ****************（歡迎索取，免費申請）*****