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

閱讀時間約 10 分鐘
無須基礎,只要「複製 + 貼上」就能學會
(RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)
每個特效均為您示範 WebFomr + MVC 雙重範例

課程介紹

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

零基礎輕鬆上手

不需任何基礎就能輕鬆學會網頁特效,你也做得到!就算您沒有學過 JavaScript、jQuery、CSS,只要會「複製、貼上」就能套用各種網頁特效,讓初學者從零開始無痛入門。
課程中老師也會分享他的「自學」密技,教您知道如何閱讀原廠網站的說明,就能套用這些網頁特效。只要學會這個方法,往後自學也能直接上手!

同時學習後端程式

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

課程內容

Bootstrap
最熱門的 RWD 網頁特效,可以讓網頁瞬間偵測觀賞者的螢幕大小,自動排版並提供最佳解析度與瀏覽體驗。包含:Carousel、旋轉木馬、輪播(動態投影片)、三段式圖文呈現的樣版等等。
jQueryUI
針對撰寫 HTML 表單(Form)的前端網頁提供各種變化,例如:日曆(datepick)以挑選日期取代文字輸入,避免日期格式錯誤。手風琴特效(Accordion)最適合手機螢幕的觀賞與點選。頁籤(Tabs)在各大網站的首頁。這些皆是必備特效,不得不學!
fancyBox
以圖層(Layout)、燈箱的特效來展示多媒體圖片、影片。是如今每個網站必備且不可缺少的效果。
CKeditor
讓您的網頁在輸入長篇文章時,就能直接套用 HTML 效果,如同在網頁上安裝了 DreamWeaver 網頁編輯器一樣,而且是直接在瀏覽器上面執行。
Google Chart
無所不能的網頁圖表產生器,除了基本的長條圖、圓餅圖、折線圖之外,Google Map 的地圖呈現更是一絕,使用 Google Chart 來繪製網頁圖表,不僅能提升自己網站的效能,繁多的圖表種類更是可以讓人挑到手軟!

學員上課後會學到什麼或能做什麼

  • 了解「直接套用」特效以後,跟原本的網頁有何不同。
  • 後續可以銜接前端技術或是CSS課程。
  • UI畫面走「後端」技術搭配資料庫。
  • 有別於其他課程,需要學會CSS與前端技術,才能寫出作品。
  • 「無須基礎、直接套用」也能做出各種網頁效果。

學員上課前需具備哪些軟、硬體設備或常識

  • 會使用瀏覽器觀看網頁、會複製程式碼並貼上。直接「套用」就能學起,立即看見成果。
  • 基礎的 HTML網頁能力。
  • Visual Studio 2015、2017 或後續新版,請下載社群版(Community版)。
  • 建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有許多差異。

課程適合對象

  • 需要撰寫網頁系統(網頁的前端設計師)、或對於網頁開發有興趣者。
  • 對網頁前端有興趣,卻無任何基礎者。
最後也提供範例,讓您把 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)為例。

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

我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。 — — Thomas Jefferson
寫信給我 — mis2000lab (at) yahoo.com.台灣 或是 school (at) mis2000lab.net
……………. facebook社團 https://www.facebook.com/mis2000lab
……………. YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ
*******************************************
****************(歡迎索取,免費申請)*****
為什麼會看到廣告
    4會員
    120內容數
    留言0
    查看全部
    發表第一個留言支持創作者!
    兩千MIS的沙龍 的其他內容
    影片網址 https://youtu.be/h5lrtdR9XF8 書本「ASP.NET專題實務」的讀者,如果您在下集要用到 LinqDataSource 安裝時不要忘了挑選 LINQ-to-SQL(詳見影片說明) 00:01:11 (1) 下載 Visual Studio …繼續閱讀 »
    建議您先看完這篇文章: 不寫畫面的網頁程式設計,Web API、Web Service、WCF Service https://dotblogs.com.tw/mis2000lab/2015/12/03/web_service_wcf_webapi_2015 課程介紹 同時學習後端程式 ​ ​ ​
    ASP.NET MVC 教學 — 由零開始的三天入門課 課程介紹 MVC 是一種「設計模式」,理論上應該先學好物件導向(OOP)之後,才適合學習「設計模式」。微軟 ASP.NET MVC 提供了完善的開發架構,讓普羅大眾也有能撰寫符合 MVC 規範的網頁程式。 專為初學者設計的課程 系統化教學
    隔壁部門搞了一個案子,三五年了,沒有成果。 今年 “又” 虧損一億多…….為什麼他們沒有被火(fire)? 就像日本的達摩(不倒翁),七倒八起?? 每一年,大家都看著他們(嘿嘿嘿!你們今年一定捲包袱走路) 但很奇怪,人家就是屹立不搖 人家說「債多不愁」 我嚇出一身冷汗 怎麼說呢? 我突然發現:
    以前沒做過,但臨時被要求 ASP.NET Web Service 要傳回 JSON格式 找到網路上兩篇好文章,為自己做筆記。 如果您寫過 Web Service的話 直接看程式碼就會做了,淺顯易懂。只有很細微的修改: 點選圖片可連回原文出處…. 如果您的(Client端)要用 jQuery來接收
    ASP.NET Web Service 與 jQuery AJAX [ 讀書筆記 ] 這裡蒐集了幾個很棒的範例,適合初學者入門 依照難易度(由淺入深) 第一階段,您需要先瞭解 jQuery的AJAX用法(應該說是程式範例、雛形,大概長什麼樣子?) 範例下載(VB & C#都有) — 相關文章:
    影片網址 https://youtu.be/h5lrtdR9XF8 書本「ASP.NET專題實務」的讀者,如果您在下集要用到 LinqDataSource 安裝時不要忘了挑選 LINQ-to-SQL(詳見影片說明) 00:01:11 (1) 下載 Visual Studio …繼續閱讀 »
    建議您先看完這篇文章: 不寫畫面的網頁程式設計,Web API、Web Service、WCF Service https://dotblogs.com.tw/mis2000lab/2015/12/03/web_service_wcf_webapi_2015 課程介紹 同時學習後端程式 ​ ​ ​
    ASP.NET MVC 教學 — 由零開始的三天入門課 課程介紹 MVC 是一種「設計模式」,理論上應該先學好物件導向(OOP)之後,才適合學習「設計模式」。微軟 ASP.NET MVC 提供了完善的開發架構,讓普羅大眾也有能撰寫符合 MVC 規範的網頁程式。 專為初學者設計的課程 系統化教學
    隔壁部門搞了一個案子,三五年了,沒有成果。 今年 “又” 虧損一億多…….為什麼他們沒有被火(fire)? 就像日本的達摩(不倒翁),七倒八起?? 每一年,大家都看著他們(嘿嘿嘿!你們今年一定捲包袱走路) 但很奇怪,人家就是屹立不搖 人家說「債多不愁」 我嚇出一身冷汗 怎麼說呢? 我突然發現:
    以前沒做過,但臨時被要求 ASP.NET Web Service 要傳回 JSON格式 找到網路上兩篇好文章,為自己做筆記。 如果您寫過 Web Service的話 直接看程式碼就會做了,淺顯易懂。只有很細微的修改: 點選圖片可連回原文出處…. 如果您的(Client端)要用 jQuery來接收
    ASP.NET Web Service 與 jQuery AJAX [ 讀書筆記 ] 這裡蒐集了幾個很棒的範例,適合初學者入門 依照難易度(由淺入深) 第一階段,您需要先瞭解 jQuery的AJAX用法(應該說是程式範例、雛形,大概長什麼樣子?) 範例下載(VB & C#都有) — 相關文章:
    你可能也想看
    Google News 追蹤
    Thumbnail
    本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
    Thumbnail
    《名校的階梯》為Netflix於2024年6月7日上線公開的原創韓國劇集,導演是由共同執導《Start-Up》《黑話律師》《還魂:光與影》的導演裴賢鎮,編劇則是《想停止的瞬間:About Time》的秋惠美,在宣傳上很多媒體都將這部劇比喻成暗黑版的【繼承者們】,也因此吸引了我的目光。
    Thumbnail
    在這個變化莫測的時代,我們經常面臨著未知的挑戰和恐懼。不論是生活中的小事,如首次嘗試新菜式的猶豫,還是重大的生命決策,如職業轉換或遷移至陌生城市,未知總是帶來一絲不安。然而,面對未知的勇氣,往往源自於深層的信任與接納。在這篇文章中,我們將探討巴赫花精之中的火燒楊(Aspen)
    Thumbnail
    麴菌症是一種常見於鸚鵡類寵物的真菌性呼吸道疾病,主要由煙麴菌這類真菌引起。這些真菌在自然環境中隨處可見,甚至健康的野生和寵物鳥類的呼吸系統中也能找到它們的蹤影。
    Thumbnail
    Alyson’s 4/20 Tarot:抱負 Aspriration (22-57)   問題:我4/19的未來日記主題 抽牌:抱負 Aspriration   經過將近兩週的煎熬與不停的練習,今天,總算沒有上週五的擔憂與恐懼。 有幾次都有跟上了老師教導的節奏,只是需要完全專注,稍微恍神
    Thumbnail
    2024 0222 今日塔羅:抱負 Aspiration   https://dcalyson0110.pixnet.net/blog/post/140804077   對於愛情的崇高理想。 對於財富的崇高渴望。 對於權勢的崇高想要。 對於成長的崇高認定。 心中的抱負,該如何成真?
    Thumbnail
    占星解盤可用星盤型式加以分析,星盤型式依兩型式加以分類: 1.行星沿著星盤圓周盤列的形狀歸納出的【星列型式 Chart Shape 】。 2.星盤上行星間的相位呈現出幾何形狀的【相位型式Chart / Aspect Pattern 】。 【星列型式 Chart Shape】 輸入資料
    Thumbnail
    如果你沒有$3,100,又害怕會變胖或是變瘦(這個好難),那你可以考慮UNIQ Aspen Apple Watch 防潑水高彈力編織錶帶。 一樣採取彈力編織材質設計,但是可以調整大小及價格不超過$1,000這不就是魚與熊掌都可以兼得嗎?
    Thumbnail
    我每天早上跟睡前的行程就是把臉洗好然後使用化妝水,如果有帶妝就記得要把妝洗卸乾淨,不然保養品就白用了XD 我只有前兩週比較認真有敷面膜,之後都是化妝水拍拍就完成了!
    Thumbnail
    關貿,服務近七萬家公部門與企業的 ASP 服務領導者  深根的核心業務,包含通關貿易、流通服務、創新保險、資安服務等  常用到的報稅軟體就是他們家開發的!   股利政策,根據 goodinfo 資料,是連續23年配發股利  代表上市之後是年年都有配發股利  近十年,盈餘分配率,平均為86.02% 
    實例參考 另記: 在controller內加入 [Authorize] 會強制先去登入。 ex: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We
    Thumbnail
    本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
    Thumbnail
    《名校的階梯》為Netflix於2024年6月7日上線公開的原創韓國劇集,導演是由共同執導《Start-Up》《黑話律師》《還魂:光與影》的導演裴賢鎮,編劇則是《想停止的瞬間:About Time》的秋惠美,在宣傳上很多媒體都將這部劇比喻成暗黑版的【繼承者們】,也因此吸引了我的目光。
    Thumbnail
    在這個變化莫測的時代,我們經常面臨著未知的挑戰和恐懼。不論是生活中的小事,如首次嘗試新菜式的猶豫,還是重大的生命決策,如職業轉換或遷移至陌生城市,未知總是帶來一絲不安。然而,面對未知的勇氣,往往源自於深層的信任與接納。在這篇文章中,我們將探討巴赫花精之中的火燒楊(Aspen)
    Thumbnail
    麴菌症是一種常見於鸚鵡類寵物的真菌性呼吸道疾病,主要由煙麴菌這類真菌引起。這些真菌在自然環境中隨處可見,甚至健康的野生和寵物鳥類的呼吸系統中也能找到它們的蹤影。
    Thumbnail
    Alyson’s 4/20 Tarot:抱負 Aspriration (22-57)   問題:我4/19的未來日記主題 抽牌:抱負 Aspriration   經過將近兩週的煎熬與不停的練習,今天,總算沒有上週五的擔憂與恐懼。 有幾次都有跟上了老師教導的節奏,只是需要完全專注,稍微恍神
    Thumbnail
    2024 0222 今日塔羅:抱負 Aspiration   https://dcalyson0110.pixnet.net/blog/post/140804077   對於愛情的崇高理想。 對於財富的崇高渴望。 對於權勢的崇高想要。 對於成長的崇高認定。 心中的抱負,該如何成真?
    Thumbnail
    占星解盤可用星盤型式加以分析,星盤型式依兩型式加以分類: 1.行星沿著星盤圓周盤列的形狀歸納出的【星列型式 Chart Shape 】。 2.星盤上行星間的相位呈現出幾何形狀的【相位型式Chart / Aspect Pattern 】。 【星列型式 Chart Shape】 輸入資料
    Thumbnail
    如果你沒有$3,100,又害怕會變胖或是變瘦(這個好難),那你可以考慮UNIQ Aspen Apple Watch 防潑水高彈力編織錶帶。 一樣採取彈力編織材質設計,但是可以調整大小及價格不超過$1,000這不就是魚與熊掌都可以兼得嗎?
    Thumbnail
    我每天早上跟睡前的行程就是把臉洗好然後使用化妝水,如果有帶妝就記得要把妝洗卸乾淨,不然保養品就白用了XD 我只有前兩週比較認真有敷面膜,之後都是化妝水拍拍就完成了!
    Thumbnail
    關貿,服務近七萬家公部門與企業的 ASP 服務領導者  深根的核心業務,包含通關貿易、流通服務、創新保險、資安服務等  常用到的報稅軟體就是他們家開發的!   股利政策,根據 goodinfo 資料,是連續23年配發股利  代表上市之後是年年都有配發股利  近十年,盈餘分配率,平均為86.02% 
    實例參考 另記: 在controller內加入 [Authorize] 會強制先去登入。 ex: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We