ASP.NET專題實務 WebForm + MVC教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學

2014-10-01

MIS2000Lab.的「HTML5 認證考試，從零開始」#6~#9 -- CSS樣式、Box Model與HTML5 / JavaScript入門

摘要:MIS2000Lab.的「HTML5 認證考試， 從零開始」#6~#9-- CSS樣式、Box Model與HTML5 / JavaScript入門





 

 

上一篇文章  MIS2000Lab.的「HTML5 認證考試，從零開始」#4 / #5 -- CSS 與selector、HTML5超簡易入門

 
 
本文內容，將會在2014年底，碁峰出版社推出的HTML5新書裡面
 
CSS樣式、Box Model與HTML5
 
 
我們將融合前面兩章的內容，為HTML5網頁搭配CSS設計樣式。
本章的結果可能因為您的瀏覽器（廠商）或是版本新舊而有差異，建議您使用新版瀏覽器來觀賞，
 
本文撰寫時的瀏覽器為IE 11與Chrome 32.0.x版。
 
 
 
==== 字 體 ====
 
針對字體的「字型（font-family）」、「大小（font-size）」、「樣式（font-style）」、「寬度（font-weight）」這些屬性（Property）進行設計。
 
字體大小有多種表示方法，
 
像素（pixel）通常以「px」為單位，用來表示螢幕上的字體大小。
 
也可以使用「百分比（%）」或是「em」為單位。
 
也可以搭配「xx-large（特大字）」、「x-large」、「large」、「medium（一般大小）」、「small」、「x-small」和「xx-small（特小字）」
 
請您注意「絕對單位」與「相對單位」兩者的差異。
 

 

行列高度（line-height）：段落之間的高度，寫法如下。
line-height : normal;
line-height : 250%;
line-height : 80px;

 

 
 
====色彩（color）與透明度（opacity）====
 
色彩的寫法有三種：
 
color : olive; /* 橄欖綠 */
color : #808000; /* 十六進位，前面請加上 # 符號 */
color : rgb(128, 128, 0); /* 十進位的表示法 */

 

 
這個網址寫的最清楚，建議您看看：http://www.w3.org/TR/css3-color/
 
透明度（opacity），數值從0.0（顏色很淡，幾乎看不到）~1.0（正常顏色）。

 

==== CSS排版觀念與Box Model ====
 
 
我覺得這個網站寫的很清楚，範例也很多，請參考 http://www.w3schools.com/css/css_boxmodel.asp
 
 
有兩張圖片，很清楚地說明了 Box Model，
請您過去看看
 
 
 
第一種寫法：
padding: 10px 11px 12 px 13px;
/* 如果寫四個值，順序是「上、右、下、左」四個位置 */

 

 
第二種寫法：
padding-top: 10px; /* 順序是「上、右、下、左」*/
padding-right : 11px;
padding-bottom : 12px;
padding-left : 13px;

 

 
「上、右、下、左」這四個屬性不難記，
 
請記住關鍵字「TRouBLe（英文單字，麻煩）」就能想起Top（上）、Right（右）、Bottom（下）與Left（左）四個關鍵字，
是不是很簡單呢？
或是請您以「順時針」的方向來記憶也行。
 
CSS Box Model除了左右兩側的「寬度」也包含上下的「高度」。
 
這裡有張圖片很清楚
 
 
下圖說明的是Collapsing margins，
 
上下兩個Box，<div class=”ex”>其間的margin有重疊，
共用10px的間距（取兩者margin最大值）而非20px（10px X 2）。
 

 

提醒您，margin可以設定「負值」，讓多個Box的邊界可以彼此重疊在一起。但是padding就不允許負值。
 
 
關於CSS的Box Model要講清楚，需要不少範例
 
如果您有興趣的話，我自己的網站上有另一篇完整的內容
 
 
 
以HTML5 / CSS3這兩個主軸來說，每一個主題都可以寫一本厚厚的書
加上JavaScript / jQuery這些程式，那就更不得了了
 
如果您沒有多買幾本書來把這些基礎搞懂
就算上上課、背背考古題，給您考上了什麼認證？
 
實力還是 0 ~~
 
而沒有實力的人，就算身上認證再多，也是一場空！
 
 
做IT、軟體或是程式，參考書是少不了的
越多書本、越多人的智慧，可以幫我們越走越好（節省自我摸索、撞牆的時間）
 
 

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

 

JavaScript入門
 
JavaScript可以使用文字編輯器撰寫，並且直接在用戶端（Client）的「瀏覽器」裡面運作並觀看結果（故稱為前端技術），
一直以來都是互動式網頁程式的重點。
 
JavaScript”並非”JAVA語言，也”不是”Java平台的一部分，兩者差異很大！
 
根據Wiki維基百科的介紹：JavaScript是一種直譯式程式語言，它的直譯器被稱為「JavaScript引擎」為瀏覽器的一部份，
廣泛用於客戶端（前端）的腳本語言，JavaScript是甲骨文公司的註冊商標。然而現在JavaScript也可被用於網路伺服器，如Node.js。
 
JavaScript與XMLHttpRequest API的組合稱為AJAX（全名Asynchronous JavaScript And XML），
可讓網頁執行非同步（asynchronous）的要求（Requests）返回Web伺服器，
不需要讓整個頁面的資料更新（reload），只更新某部分的內容即可。
 
提醒您，如果一列程式碼無法正常執行，那麼後續的程式也無法執行下去（因為JavaScript是直譯式的語言）。
 
 
先看看第一個簡單的範例
 
document.write(“字串”)可以把字串寫在網頁裡面（視同網頁內的文字）。
 
而window.alert(“字串”)則是出現一個Pop-up視窗來提醒使用者。

 
==== 變數（Variables）====
 
不想給變數一個”初始值”的話，請用var來宣告變數。不然的話可能會遇見「undefined（未定義）」錯誤訊息。
例如 var mystery;
 
JavaScript變數的命名規則：
1. 必須是「英文字」或是「底線（就是 _符號）」作為開頭字元。
2. 變數名稱的英文大小寫有差別（case sensitive），不要混用。
 
 
==== 資料型態（Data Types） ====
 
不像C#或是VB語法有那麼多資料型態，JavaScript比較簡單，除了var之外只有三種資料型態。
 
 String（字串）
 Number（數值）
 Boolean（布林）
 
 
==== 運算子（Operators） ====
 
第一，算術運算子就是我們常見的數學運算符號，加減乘除之類的。
 + （加）
 - （減）
 * （乘）
 / （除）
 % （餘數）
 ++ （累加）
 -- （累減）
 
第二，指定運算子，您看得懂下面的這些運算子嗎？
 x = y
 x += y （寫法等同於x = x + y）
 x -= y （寫法等同於x = x - y）
 x *= y （寫法等同於x = x * y）
 x /= y （寫法等同於x = x / y）
 x %= y （寫法等同於x= x % y，得到相除以後的”餘數”）
 
第三，字串運算子。
提醒您，除了數值可以相加（+符號）以外，「字串」相加會把兩個字串連結在一起。
 
第四，（三元）條件運算子
寫成「? :」。其實是簡寫的if判別式。
 
第五，比較運算子
 ==
 != （不等於）
 >
 <
 >= （大於等於）
 <= （小於等於）
 
第六，布林運算子，兩者比較後的成果是true或false。
 


 
 
理論上，我應該每個說明都要放一個簡單的範例上去
 
有了範例（程式碼），好過文字說明幾百字
 
 
 
這三十天的鐵人賽，要講HTML5與相關的技術，範圍實在太大
 
但因為篇幅有限，只好稍微打住，實在抱歉
（但出版的書本裡面，一定有附上完整的範例，不會偷工減料！）
 
 
 
完整內容（書本章節試讀），請看：
 
 
本文內容，將會在2014年底，碁峰出版社推出的HTML5新書裡面
 
 
不要走開，馬上回來
 

 

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期：2015-04-09
  • 台幣定價:
    • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • ISBN:9863475750
  • ISBN-13:9789863475750

 

 

 

 

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

我要買書：

PChome  http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI

博客來  http://www.books.com.tw/products/0010671214

天瓏書局  https://www.tenlong.com.tw/items/9863475750?item_id=1003110

 

 

 

 

我將思想傳授他人， 他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

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

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

ASP.NET MVC線上課程 第一天 免費看 (5.5小時) 

寫信給我，不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net


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 (Web Form) 課程 上線了！MIS2000Lab.主講

事先錄製好的影片，並非上課時側錄！   觀看影片時，有如我「一對一」跟您面對面講課。

 

ASP.NET MVC 5 線上教學

累積時數約 75小時...... 第一天（5.5小時）完整內容，"免費"讓您評估

 

贊助商連結

BloggerAds

贊助商連結