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

無須基礎,只要「複製 + 貼上」就能學會

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

每個特效均為您示範  WebFomr + MVC 雙重範例

 

 

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

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

 

課程介紹   (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)

 

零基礎輕鬆上手

Unity 2D Tang course

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

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

 

同時學習後端程式

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

 

課程內容    

     ASP.NET 教學 - 前端特效輕鬆學 (9.9小時)  優惠連結 https://9vs1.com/go/?i=323a87a3f716

 

Bootstrap

Unity 2D Tang course

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

 

jQueryUI

Unity 2D Tang course

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

 

fancyBox

Unity 2D Tang course

Unity 2D Tang course

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

 

CKeditor

Unity 2D Tang course

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

 

Google Chart

Unity 2D Tang course

Unity 2D Tang course

無所不能的網頁圖表產生器,除了基本的長條圖、圓餅圖、折線圖之外,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 與教學畫面仍有許多差異。

課程適合對象

  • 需要撰寫網頁系統(網頁的前端設計師)、或對於網頁開發有興趣者。
  • 對網頁前端有興趣,卻無任何基礎者。

 

 

Unity 2D Tang course

最後也提供範例,讓您把 ASP.NET 後端程式(Web Form 與 MVC)與前端網頁特效結合在一起。讓您在本課程中一併學會前、後端整合的基礎能力!

 

課程特色

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

學員見證

ASP NET MVC basic MIS2000Lab

 

課程綱要

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

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 140hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課