2014年10月CSS_JavaScript第六次上課

2014年10月CSS_JavaScript第六次上課範例，希望六次課程下來能提供大家相關資訊！

連結與框架的說明

以下為連結與框架的說明，希望藉由影片說明，讓您了解HTML5愈來愈完善的功能。

關於HTML5的文字相關標籤元素

關於HTML5的文字相關標籤元素，我整理後可分為三類。
第一類為 定義文字語意類型的標籤元素。

標籤元素    意義
cite    定義這一串文字為一個作品的標題（例如一本書、一首歌、一部電影等等），請留意人的姓名並不可以使用這個標籤元素。
small    定義這一串文字為聲明、警告和版權。
address    定義這一串文字的作者/擁有者的聯繫方式。
time    定義這一串文字為日期時間。
dfn    定義這一串文字為一個項目或一個術語。
code    定義這一串文字為程式碼。
samp    定義這一串文字為樣本資料，代表為程式輸出結果範本。
kbd    定義這一串文字是由鍵盤輸入而來。
var    定義這一串文字為變數，通常會搭配code使用。


第二類為 文字強化表達類型的標籤元素

標籤元素    意義
em    定義這一串文字為被強調的資料。
strong    定義這一串文字為重要的資料。
mark    定義這一串文字為反白選取，突出顯示這一串文字。
ins    定義這一串文字是插入的字串。
del    定義這一串文字是刪除的字串。
br    定義這一串文字至此換行。
wbr    定義這一串文字於適當的位置進行換行。
sub        定義這一串文字為下標文字。
sup    定義這一串文字為上標文字。
bdo    定義這一串文字的方向。
ruby    定義這一串文字的東亞區文字發音符號，與rt 標籤元素一起使用。rt 標籤元素內提供這一串文字的發音符號，若瀏覽器不支援時，可提供rp標籤元素顯示其他內容。

第三類為 引用與縮寫字串的標籤元素

標籤元素    意義
blockquote    定義這一串文字是長的引用文字，將與原本的文字分離。
q    定義這一串文字是短的引用文字。
addr    定義這一串文字是某段文字的縮寫

Code::Blocks debug

1.請在您想要中斷執行的語法旁邊點兩下程式產生中斷點

2請按debug工具列最左邊的那一個按鈕開始執行除錯
 

3請選取變數 再按下右鍵 選擇Watch 選項 監看這個變數
 
4 程式執行過程 可點選左邊數來第三個項目逐行執行 也可以點選左邊數來第四個項目進入函數

 

z-index內的css範例

#redblock {
  z-index: 1;
  position:
  absolute;
  width:80px;
  height:100px;
  top:20px;
  left:20px;
  border: 1px solid #FFF;
  background-color: red;
}

#yellowblock {
  z-index: 3;
  position: absolute;
  width:100px;
  height:80px;
  top:50px;
  left:50px;
  border: 1px solid #FFF;
  background-color: yellow;
}
#blueblock {
  z-index: 2;
  position: absolute;
  width:120px;
  height:180px;
  top:80px;
  left:90px;
  border: 1px solid #FFF;
  background-color: blue;
}

position:static

#div-1 {
 width:400px;
 background-color:#000;
 color:#fff;
 position:static;
}
#div-2 {
 width:300px;
 background-color:red;
 color:#fff;
 position:static;
}

#css3demo

#css3demo {
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(PIE.htc);
}

CSS-SCript新莊分校第一天上課範例檔案

CSS-SCript新莊分校第一天上課範例檔案
範例

XCode編輯C語言

XCode可由Apple Store下載 於編輯Ｃ語言其實蠻方便的，建議大家可以使用

mac環境的codeblocks13安裝使用

解壓縮後直接拖拉到應用程式就可以使用
程式執行已經不會當機 算是進步很多
唯一的缺點就是 中文資料無法輸出 所以你必須輸出英文資料

C語言書籍決定暫緩

因為PHP這個領域還有很多事情需要我投入，
而且我也準備從後台走到前台，開始關注CSS、jQuery，
並且也要多花些心思在APP上，在時間有限的情況下，在此決定C語言書籍暫緩...
至於何時可以回來寫C語言書籍...我其實比較希望國內多一些作者投入..
若有朋友願意投入..是可以合作把它完成

Code::Blocks專案執行注意事項

課程之中可用Code::Blocks或者Dev-C++進行專案設計，在此介紹 Code::Blocks專案執行注意事項。

1.執行A專案時時無法執行B專案。請留意Code::Blocks的編譯工具列或除錯工具列是否呈現灰色，代表有一個專案正在執行。

請留意圖示旁是否多了一個終端機圖示，請關閉這個終端機程式才能執行別的專案。

2.必須是活動中的專案才能執行。執行前請在專案名稱上Double Click，使這個專案成為活動中的專案。

Code::Blocks開啟新專案的方式

課程之中可用Code::Blocks或者Dev-C++進行專案設計，在此介紹 Code::Blocks開啟新專案的方式。

1.請點選最左邊的按鈕後選擇「Project」建立新的專案。

2.請選擇「Console application」後按下「Go」。

3.歡迎畫面，請按下「Next」繼續。

4.請選擇「C」之後，請按下「Next」繼續。

5.選擇儲存的路徑以及輸入專案名稱。為了避免專案編譯或除錯時出現狀況，路徑以及專案名稱內不要有中文或者空白。

6.選擇編譯器。若無特殊選擇請按「Finish」完成專案的建立。

Dev-C++於Windows8環境

課程之中可用Code::Blocks或者Dev-C++進行專案設計，在此介紹 Dev-C++於Windows8環境祝意事項。
國內書籍贈送的Dev-C++於Windows8環境無法執行，請下載新的版本。
官方網頁如下：
http://orwelldevcpp.blogspot.tw/
建議下載版本為：
下載

XAMPP與NetBeans安裝

這裡共有兩段影片，說明於Win7 64位元環境內可以進行XAMPP與NetBeans安裝。

Win8環境與Win7安裝方式相同。

Windows 8/8.1環境裡開啟終端機模式

有六種方式可以在Windows 8/8.1環境裡開啟終端機模式