ASP.NET 教學 — 前端特效輕鬆學 — 只要「複製＋貼上」就能學 (9.9小時)
更新於 2022/03/15閱讀時間約 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 教學 — 前端特效輕鬆學 (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小時)
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。 — — 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
查看全部
你可能也想看
Google News 追蹤
本文探討了複利效應的重要性，並藉由巴菲特的投資理念，說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式，不僅能減少情緒影響，還能持續參與全球股市的發展。此外，文中介紹了使用國泰 Cube App 的便利性及低手續費，幫助投資者簡化投資流程，達成長期穩定增長的財務目標。
《名校的階梯》為Netflix於2024年6月7日上線公開的原創韓國劇集，導演是由共同執導《Start-Up》《黑話律師》《還魂：光與影》的導演裴賢鎮，編劇則是《想停止的瞬間：About Time》的秋惠美，在宣傳上很多媒體都將這部劇比喻成暗黑版的【繼承者們】，也因此吸引了我的目光。
在這個變化莫測的時代，我們經常面臨著未知的挑戰和恐懼。不論是生活中的小事，如首次嘗試新菜式的猶豫，還是重大的生命決策，如職業轉換或遷移至陌生城市，未知總是帶來一絲不安。然而，面對未知的勇氣，往往源自於深層的信任與接納。在這篇文章中，我們將探討巴赫花精之中的火燒楊（Aspen）
麴菌症是一種常見於鸚鵡類寵物的真菌性呼吸道疾病，主要由煙麴菌這類真菌引起。這些真菌在自然環境中隨處可見，甚至健康的野生和寵物鳥類的呼吸系統中也能找到它們的蹤影。
Alyson’s 4/20 Tarot：抱負 Aspriration (22-57)
問題：我4/19的未來日記主題
抽牌：抱負 Aspriration
經過將近兩週的煎熬與不停的練習，今天，總算沒有上週五的擔憂與恐懼。
有幾次都有跟上了老師教導的節奏，只是需要完全專注，稍微恍神
2024 0222 今日塔羅：抱負 Aspiration
https://dcalyson0110.pixnet.net/blog/post/140804077
對於愛情的崇高理想。
對於財富的崇高渴望。
對於權勢的崇高想要。
對於成長的崇高認定。
心中的抱負，該如何成真？
占星解盤可用星盤型式加以分析,星盤型式依兩型式加以分類:
1.行星沿著星盤圓周盤列的形狀歸納出的【星列型式 Chart Shape 】。
2.星盤上行星間的相位呈現出幾何形狀的【相位型式Chart / Aspect Pattern 】。
【星列型式 Chart Shape】
輸入資料
如果你沒有$3,100，又害怕會變胖或是變瘦(這個好難)，那你可以考慮UNIQ Aspen Apple Watch 防潑水高彈力編織錶帶。
一樣採取彈力編織材質設計，但是可以調整大小及價格不超過$1,000這不就是魚與熊掌都可以兼得嗎？
我每天早上跟睡前的行程就是把臉洗好然後使用化妝水，如果有帶妝就記得要把妝洗卸乾淨，不然保養品就白用了XD
我只有前兩週比較認真有敷面膜，之後都是化妝水拍拍就完成了!
關貿，服務近七萬家公部門與企業的 ASP 服務領導者
深根的核心業務，包含通關貿易、流通服務、創新保險、資安服務等
常用到的報稅軟體就是他們家開發的！
股利政策，根據 goodinfo 資料，是連續23年配發股利
代表上市之後是年年都有配發股利
近十年，盈餘分配率，平均為86.02%
實例參考
另記:
在controller內加入 [Authorize] 會強制先去登入。
ex:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.We
本文探討了複利效應的重要性，並藉由巴菲特的投資理念，說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式，不僅能減少情緒影響，還能持續參與全球股市的發展。此外，文中介紹了使用國泰 Cube App 的便利性及低手續費，幫助投資者簡化投資流程，達成長期穩定增長的財務目標。
《名校的階梯》為Netflix於2024年6月7日上線公開的原創韓國劇集，導演是由共同執導《Start-Up》《黑話律師》《還魂：光與影》的導演裴賢鎮，編劇則是《想停止的瞬間：About Time》的秋惠美，在宣傳上很多媒體都將這部劇比喻成暗黑版的【繼承者們】，也因此吸引了我的目光。
在這個變化莫測的時代，我們經常面臨著未知的挑戰和恐懼。不論是生活中的小事，如首次嘗試新菜式的猶豫，還是重大的生命決策，如職業轉換或遷移至陌生城市，未知總是帶來一絲不安。然而，面對未知的勇氣，往往源自於深層的信任與接納。在這篇文章中，我們將探討巴赫花精之中的火燒楊（Aspen）
麴菌症是一種常見於鸚鵡類寵物的真菌性呼吸道疾病，主要由煙麴菌這類真菌引起。這些真菌在自然環境中隨處可見，甚至健康的野生和寵物鳥類的呼吸系統中也能找到它們的蹤影。
Alyson’s 4/20 Tarot：抱負 Aspriration (22-57)
問題：我4/19的未來日記主題
抽牌：抱負 Aspriration
經過將近兩週的煎熬與不停的練習，今天，總算沒有上週五的擔憂與恐懼。
有幾次都有跟上了老師教導的節奏，只是需要完全專注，稍微恍神
2024 0222 今日塔羅：抱負 Aspiration
https://dcalyson0110.pixnet.net/blog/post/140804077
對於愛情的崇高理想。
對於財富的崇高渴望。
對於權勢的崇高想要。
對於成長的崇高認定。
心中的抱負，該如何成真？
占星解盤可用星盤型式加以分析,星盤型式依兩型式加以分類:
1.行星沿著星盤圓周盤列的形狀歸納出的【星列型式 Chart Shape 】。
2.星盤上行星間的相位呈現出幾何形狀的【相位型式Chart / Aspect Pattern 】。
【星列型式 Chart Shape】
輸入資料
如果你沒有$3,100，又害怕會變胖或是變瘦(這個好難)，那你可以考慮UNIQ Aspen Apple Watch 防潑水高彈力編織錶帶。
一樣採取彈力編織材質設計，但是可以調整大小及價格不超過$1,000這不就是魚與熊掌都可以兼得嗎？
我每天早上跟睡前的行程就是把臉洗好然後使用化妝水，如果有帶妝就記得要把妝洗卸乾淨，不然保養品就白用了XD
我只有前兩週比較認真有敷面膜，之後都是化妝水拍拍就完成了!
關貿，服務近七萬家公部門與企業的 ASP 服務領導者
深根的核心業務，包含通關貿易、流通服務、創新保險、資安服務等
常用到的報稅軟體就是他們家開發的！
股利政策，根據 goodinfo 資料，是連續23年配發股利
代表上市之後是年年都有配發股利
近十年，盈餘分配率，平均為86.02%
實例參考
另記:
在controller內加入 [Authorize] 會強制先去登入。
ex:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.We