MIS2000 Lab. - ASP.NET專題實務 & WebForm +MVC 遠距教學: RWD

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

2023年6月18日星期日

[ASP.NET Core 8.0 + RWD] Bootstrap 5.0 前端特效搭配MVC

ASP .NET MVC 完整課程，適用.NET 6.0/7.0/8.0。超過 120小時"(外面買不到) 已開始販售，請來信詢問（一定有優惠！） mis2000lab (at) yahoo.com.tw; school (at) mis2000lab.net。謝謝您

課程列表與大綱，請看 mis2000lab.pixnet.net/blog/post/35172535

學員感言與推薦 - www.dotblogs.com.tw/mis2000lab/2023/01/30/mis2000lab_MVC_onlineLearning2023

9vs1 . com網站的三天入門課程 9vs1.com/go/?i=192277ff2276

第一天 ASP.NET MVC 完整影片（5.5小時 / .NET 4.x版）免費試聽。詳見 mis2000lab.pixnet.net/blog/post/35141956 。

這位學員學了半年，公司幫他加薪150%（真人真事） www.dotblogs.com.tw/mis2000lab/2020/09/23/ASPnet_MVC_online_20200923

初學者第一天的MVC入門課程。一般的網站（購物商城、新聞媒體）有哪些必備功能，我們學習MVC也能做到嗎？MVC又是什麼？能否讓我一個範例就懂？

這是一門程式設計的課，會講解程式碼，建議使用「大螢幕」觀賞。謝謝。

看完一次之後，第二次觀賞時，請看一段（就暫停），親手做一段！

務必親自動手做！不要只是看！

2019年8月13日星期二

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

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

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

課程介紹 (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
Unity 2D Tang course

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

jQueryUI
Unity 2D Tang course

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

fancyBox
Unity 2D Tang course

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

CKeditor
Unity 2D Tang course

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

Google Chart
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 與教學畫面仍有許多差異。

課程適合對象

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

最後也提供範例，讓您把 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) [上集]

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

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

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) [下集]

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

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

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

2015年5月29日星期五

[RWD] GridView搭配 FooTable (jQuery) 的表格效果 -- 自動折疊

此為我的文章備份，原文請看 http://www.dotblogs.com.tw/mis2000lab/archive/2015/05/29/gridview_footable_jquery_rwd.aspx

[RWD] GridView搭配 FooTable (jQuery) 的表格效果 -- 電腦、平板、智慧手機觀賞時，表格會進行自動折疊

一位學員提供的RWD效果，名為 FooTable。但做不出來。

完成後的效果，如下圖（點選圖片可以連到原網站）

首先，一開始就埋頭苦幹，死讀文件，太累，也沒成品可模仿

我先找出原廠的Demo網頁看看效果

然後將網頁部分複製下來。

原廠範例下載：

https://github.com/bradvin/FooTable/archive/master.zip

裡面有很多 Demo開頭的HTML檔，看您喜歡哪個效果？

比照上圖的效果：

phone代表小畫面的效果（手機看的畫面）

tablet代表大畫面的效果（平板看的畫面）

class="footable"

data-filter="#filter">

First Name

Last Name

data-hide="phone,tablet"
>

Job Title

data-hide="phone,tablet"
data-type="numeric">

DOB

data-hide="phone"
data-type="numeric">

Status

...

這兩個網頁的說明很仔細，特此感謝：

https://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

http://responsivedesign.is/resources/data-tables/footable

**********************************************************************

*** 如何套用到 ASP.NET GridView ???

**********************************************************************

感謝這個網頁的說明： http://techbrij.com/asp-net-gridview-responsive-jquery-footable

（點選圖片可以連到原網站）

HTML網頁裡面，除了網頁表頭要加入 jQuery與 FooTable的CSS與JS檔以外

(1). GridView控制項的CssClass屬性也得設定 FooTable。

對應HTML表格的設定 -- class="footable" >

(2). 後置程式碼 Page_Load事件，添加如下

GridView1.UseAccessibleHeader = true;

GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

cells[0].Attributes.Add("data-class", "expand");

cells[1].Attributes.Add("data-hide", "phone,tablet");

cells[2].Attributes.Add("data-hide", "phone,tablet");

cells[3].Attributes.Add("data-hide", "phone,tablet");

cells[4].Attributes.Add("data-hide", "phone");

我簡單整合後的範例下載：RWD_GridView_FooTable.rar

原廠範例下載：

https://github.com/bradvin/FooTable/archive/master.zip

ASP.NET課程 / ASP.NET教學，請看

http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx

[台北] ASP.NET入門實戰 + ADO.NET進階【二合一】49 hr

ASP.NET影片、遠距教學，請看：

http://www.dotblogs.com.tw/mis2000lab/archive/2015/03/09/aspnet-online-learning-distance-education-2015.aspx

[遠距教學、教學影片] ASP.NET (Web Form) 六週課程上線了！

2014年1月28日星期二

[RWD]黯然銷魂之 HTML KickStart套件，太好用了，以後用不到怎麼辦？ --響應式網頁 / 自適應網頁(Responsive Web)設計

http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/15/super_easy_responsive_web_design_html_kickstart.aspx

[RWD]黯然銷魂之 HTML KickStart套件，太好用了，以後用不到怎麼辦？ --響應式網頁 / 自適應網頁(Responsive Web)設計

之前介紹的 Boostrap也很棒，

但我學習它的時間，稍微長了一點

裡面的CSS設定，字眼也長了些

Bootstrap的網頁，已經被微軟MVP-- 陳傳興老師（KingKong Bruce）翻譯成正體中文了
簡單的Bootstrap(v 2.3.2版)效果與入門教學 -- 響應式網頁 / 自適應網頁(Responsive Web)設計

今天在社群上面看見一篇介紹文：http://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/

驚為天人啊！！

http://www.99lime.com/elements/

教學？ HOW-TO？

都免啦！

直接看，喜歡的......立刻COPY就能用啦！

好簡單啊！

學習時間，10分鐘搞定

下面是我整理出來的範例，照著作（自己動手）

一定學得會。

簡單、直覺、立即上手......不可思議的 HTML KickStart

1. 官方網站，下載一個檔案。解開後放入您的網站

2. 網頁最上方，務必使用 HTML5 DocType

3. 加入HTML表頭的 .js與 .css檔。

開始了，請慢用（太好學了，不用十分鐘。慢不下來啊~）

==== 以下是 ASP.NET檔案（.aspx）===========================

按鈕（Button）#1 Sizes

class="button" href="你的超連結網址">A.button（超連結的按鈕）

範例下載：WebSite2013_HTML_KickStart.rar

HTML KickStart套件，太好用了，以後用不到怎麼辦？

太黯然了~~~

太銷魂了

圖片來源：http://www.ipeen.com.tw/comment/413694

............................. 寫信給我，mis2000lab (at) yahoo.com.台灣........................................................

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

............................. Google+ https://plus.google.com/100202398389206570368/posts ..............

訂閱：文章 (Atom)

2023年6月18日 星期日

2019年8月13日 星期二

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

零基礎輕鬆上手

同時學習後端程式

課程內容

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

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

課程適合對象

課程特色

學員見證

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

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

（太便宜！太划算，不能公開） mis2000lab (at) yahoo.com.tw ; school (at) mis2000lab.net

課程綱要

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

2015年5月29日 星期五

2014年1月28日 星期二

按鈕（Button）#1 Sizes

2023年6月18日星期日

2019年8月13日星期二

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

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

2015年5月29日星期五

2014年1月28日星期二