顯示具有 CKeditor 標籤的文章。 顯示所有文章
顯示具有 CKeditor 標籤的文章。 顯示所有文章

2019年8月13日 星期二

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


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


零基礎輕鬆上手

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

同時學習後端程式

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


課程內容    

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 來繪製網頁圖表,不僅能提升自己網站的效能,繁多的圖表種類更是可以讓人挑到手軟!


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

  • 了解「直接套用」特效以後,跟原本的網頁有何不同。
  • 後續可以銜接前端技術或是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)與前端網頁特效結合在一起。讓您在本課程中一併學會前、後端整合的基礎能力!

課程特色

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

學員見證

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/mis2000lab_MVC_onlineLearning2023

[ASP.NET Core MVC]第一天 免費課程 3小時完整試聽

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/AspNetCore_MVC_First_Day_Free_20230130

從最早的 75小時MVC課程,目前已經延伸到 115小時,也包含了 .NET Core

.NET Core 6 MVC線上教學 - MIS2000Lab 課程大綱 與 試聽

https://dotblogs.com.tw/mis2000lab/2021/07/18/NET_MVC_Online_Free_Learning_mis2000lab 

購買完整MVC課程(一百小時),限時六折優惠並免費加贈兩萬元「.NET Core升級課程」,請直接來信洽詢

(太便宜!太划算,不能公開) mis2000lab (at) yahoo.com.tw ; school (at) mis2000lab.net


課程綱要


前端特效 與 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


2018年7月26日 星期四

CKeditor 5 搭配 ASP.NET MVC 或 Web Form

CKeditor 5 搭配 ASP.NET MVC 或 Web Form

CKeditor來到了第五版,好久沒注意,進步很快
https://ckeditor.com/ckeditor-5/


花樣更多,也更漂亮了
但在設定上也有些改變


CKeditor 5 搭配 ASP.NET MVC 或 Web Form
只要簡單的 "複製"  "貼上"就能完成


原廠說明,快速設定  https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html


(1) 您要先下載他的套件,裡面大多是CSS與JS檔


(2) ASP.NET MVC

不管您使用 @Html.TextBox、@Html.TextBoxFor 或是 @Html.EiditorFor ....
作法都一樣。


@Html.EditorFor(model => model.輸入方塊的ID)

<script src="https://cdn.ckeditor.com/ckeditor5/11.0.1/classic/ckeditor.js">
</script>

<script>
    ClassicEditor
        .create( document.querySelector( '#輸入方塊的ID' ) )
        .catch( error => {
            console.error( error );
        } );
</script>



============================================

(3) ASP.NET (Web Form)

以前有專屬的DLL檔 for .NET可以下載,並且「加入參考」
我也找不到地方下載了(幸好我手邊還留有v 3.6.6.2版)



新版本似乎改了
所以沒有以前的寫法
<
CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"
                BasePath="~\ckeditor專屬的目錄\" Width="720" Height="450">


但是,改版以後.................

好處就是跟 MVC的作法一模一樣
作法統一了!


<asp:TextBox ID="輸入方塊的ID" runat="server" TextMode="MultiLine">
</asp:TextBox>

<script src="https://cdn.ckeditor.com/ckeditor5/11.0.1/classic/ckeditor.js">
</script>

<script>
    ClassicEditor
        .create( document.querySelector( '#輸入方塊的ID' ) )
        .catch( error => {
            console.error( error );
        } );
</script>



記得,要啟用 ValidateRequestMode="Enabled"

不然的話,為了安全起見,較新版本的Web Form會阻擋
(預設狀況下,不讓您填寫HTML標籤,防止 XSS攻擊)


============================================


針對常用的前端套件、前端特效
例如 jQueryUI / CKeditor / RWD(Bootstrap) / fancyBox / Google Chart這幾個主題


我設計了一份入門課程(線上影片教學)
只要您會「複製、貼上」,就能立即「套用」這些特效到您的網頁裡面。



我相信:從 動手實作 開始,這是最快的學習方式

一旦您 "看得懂" 哪些段落是您需要的,
"複製、貼上" 就能使用


就會做出興趣!

後續您可以買書、上課,更深入的探索這些前端技術

走出第一步,最難。我來陪著您走!
我讓初學者、從零開始 的 「第一步」  極 簡 化!


第一段的課程,大約兩個小時,免費讓您觀賞
歡迎來信跟我登記  mis2000lab (at) yahoo.com.tw; school (at) mis2000lab.net

錄製完成、影片上架後,我會主動跟您通報影片網址,
謝謝您   :-)



********************************************
這份課程,也收錄在 ASP.NET MVC課程裡面,當成「第八天」的教材

    所以,參與 MVC /  Web Form線上教學的朋友門,
    可以免費獲得完整的課程(四小時以上的教學)

ASP.NET MVC 線上課程 -- http://mis2000lab.pixnet.net/blog/post/35141956

ASP.NET Web Form 線上課程 -- http://mis2000lab.pixnet.net/blog/post/34657405

~~隨時來信,都有驚人優惠~~
********************************************