DHTML 程式設計 HTML & CSS & JavaScript http://140.122.66.100:7001/HtmlPage/HTML%20JS%20CSS/index.html HTML & CSS & JavaScript
HTML簡介 HTML（Hyper Text Markup Language） HTML網頁檔案，必須是用 .htm 或 .html 為副檔名。 結構範例： <html> -----標示HTML文件的開始 <head> -----標示HTML文件表頭 <title>標題</title> -----標示HTML文件主題 </head> -----標示HTML文件表頭結束 <body> -----標示HTML文件主體內容開始 主要HTML文件的內容（在瀏覽器視窗上的主要網頁內容） </body> -----標示HTML文件主體內容結束 </html> -----標示HTML文件的結束
HTML的基本架構及指令 基本上 HTML 的標註是成對出現的，格式如下： <指令名稱 [屬性名稱 = 參數]> 內容 </指令名稱> 範例： <HR [ALIGN= left | center | right] [SIZE = n] [WIDTH = n [%] [NOSHADE]> 超連結 <A HREF="http://www.9w2u.com"> 簡介 </A> 文字字型 <font size="4" color="orange">簡介</font> ※標註中使用大寫或小寫的英文字母均可。 ※標註中若有超過一個以上的屬性，其順序可以任意對調。 ※程式註記：<!-- 暫時不使用的標註內容或程式註解 -->
表格(Table)的結構 表格 欄位 合併欄、列 範例 <TABLE bgcolor="color" width="#" border="#" cellspacing="#" cellpadding="#"> 欄位 <TH ALIGN=left | right | center VALIGN=top | middle | bottom | baseline> <TD ALIGN=left | right | center VALIGN=top | middle | bottom | baseline> 合併欄、列 ROWSPAN=x（x視你要跨幾列 COLSPAN=y（y視你要跨幾欄而定） 範例 <TABLE BORDER=3 CELLSPACING=10 CELLSPADDING=10> <CAPTION>表格標題</CAPTION> <TR> <TH COLSPAN=3>我是項目標題我跨三欄</TH> </TR> <TD ROWSPAN=3 VALIGN=TOP>我跨三列並靠上</TD> <TD ALIGN=CENTER COLSPAN=2>我跨兩欄並靠中</TD> <TD ROWSPAN=2 VALIGN=BOTTOM>我跨二列並靠下</TD> <TD>項目內容</TD> </TABLE>
表單(Form)的結構 FORM是為了與伺服器交流而設計，基本語法如下： INPUT是讓我們輸入資料的標籤，格式如下： TEXT <FORM METHOD="SUBMIT_METHOD" ACTION="URL"> FORM敘述區 </FORM> ACTION：指明在WWW伺服器端程式所在的URL位址。 METHOD：設定將FORM的資料項傳遞到伺服器的方式，有“GET”及“POST”兩種。 INPUT是讓我們輸入資料的標籤，格式如下： <INPUT TYPE="輸入欄位的種類" NAME="欄位名稱" VALUE="欄位初始值"> TEXT PASSWORD SUBMIT RESET BUTTON RADIO CHECKBOX TEXTAREA
練習題 使用編輯器製作如下圖結構之HTML 練習目標： 了解HTML的基本規則與架構。 可不依賴（特定）工具完成作業。 http://140.122.66.100:7001/HtmlPage/template/computer.html
CSS簡介 CSS (CASCADING STYLE SHEET) 特點： 譯為【樣式表】，是一種在既有的HTML中，加上一些輔助語法，以控制網頁外觀的語言。 特點： 自訂網頁風格 不因瀏覽者的瀏覽器設定而改變，可表現出整體風格。 網頁維護方便 只要參照同一個樣式表檔案，即可展現相同風格，不需維護個別網頁。 瀏覽器支援度佳 許多常見的瀏覽器已提供對 CSS 的支援。 優異的排版能力 類似於一般的桌面排版軟體，易於學習及上手。
定義CSS的語法 語法： 呼叫定義好的CSS檔案 slector {property1:value1; property2:value2; ....} Selector 以指定 HTML 元素樣式的方式定義 以 CLASS 元素樣式的方式定義＊ 以 ID 樣式的方式定義 以 inline 樣式的方式定義 以 Contextual 樣式的方式定義 Property 修改selector的性質 Value 設定property的值 呼叫定義好的CSS檔案 <head> <link rel=stylesheet type=“text/css” href=“CSS檔案.css”> </head>
使用範例 建立一個.css檔（style1.css） 將css檔匯入html 呼叫已設定的css table.pannal {background-color:#999999; margin: 0px; padding: 1px} .pannal td, th {font-size: 9pt; color: #FFFFFF} <head> <link href="style1.css" rel="stylesheet" type="text/css" /> </head> <table class="pannal" width="249" height="30">
CSS常用的Property 字型類 背景類 版面配置類 框線類 font-family font-size font-style color 背景類 background-color background 版面配置類 margin padding text-align vertical-align 框線類 border
練習題 將上一節完成的HTML套上CSS（請自行發揮創意） 練習目標： 了解CSS的原理與使用方式。 學習查詢CSS工具書，解決問題。 http://140.122.66.100:7001/HtmlPage/template/computer.html
JavaScript簡介 JavaScript是一種描述語言，不需編譯即可執行。 JavaScript特性： 符合物件導向的精神 可直接編寫在網頁檔案內(嵌入HTML碼中) 可利用記事本等文書編輯軟體來開發完成 瀏覽器在開啟網頁檔案時，便會直譯 (Interpret) JavaScript程式碼後執行 程式碼中大小寫有別 為寬鬆型態語言 (Loosely Typed Language)，變數的型態是可變的。
編寫JavaScript 內嵌式 匯入式 嵌入JavaScript的位置： 程式註解的方式： <script language=“JavaScript”> <!– 程式碼 --> </script> 匯入式 <SCRIPT LANGAGE=“JavaScript” SRC=“匯入檔.js"></SCRIPT> 嵌入JavaScript的位置： 寫在<head></head>之間 寫在<body></body>範圍間 第三：寫在 </html>之後式 程式註解的方式： 使用雙斜線 // 使用/*和*/來作註解
變數宣告 宣告變數 命名法則： 區域變數(Local Variable)與全域變數(Global Variable) 英文大小寫有別，應避免混用。 必須用英數字型（亦即英文與數字）與『_』（底線符號）來命名。 第一個字母必須是英文字母。 全長應少於 255 個字母。 不能是空白鍵或 JavaScript 的保留字。 區域變數(Local Variable)與全域變數(Global Variable)
流程控制(Flow Control) if if ... else for while if (condition) { //如果 condition 是 true就進入執行(只有一句敘述，可以不用大括號) statements } if (condition) { //如果 condition 是 true就進入執行(只有一句敘述，可以不用大括號) statements1 } else { statements2 } for (init_expr ; condition ; increment_expr) { //如果 condition 是 true就進入執行，否則跳出迴圈範圍 statements } while (condition) { //如果 condition 是 true就進入執行，否則跳出迴圈範圍 statements }
事件(Event) 事件是由使用者或系統的動作而來。如：按下滑鼠鍵、送出表單...。 JavaScript常用的事件處理器： 程式範例： onBlur 使用者離開某一欄，失去焦點時 onChange 使用者改變某一欄的內容時 onClick 使用者按下某個按鈕，點選某一個物件時 onFocus 使用者的輸入焦點進入某一欄，得到焦點時 onLoad 某一頁完全載入，瀏覽器載入網頁時 onMouseOver 滑鼠游標在某個物件之上 onMouseOut 滑鼠游標離開某個物件 onMouseup 鬆開滑鼠按鈕時 onMouseDown 按下滑鼠按鈕時 onSelect 使用者選擇某一欄的內容 onSubmit 使用者確定送出某表單 onUnload 瀏覽器離開網頁時 程式範例： <script> function terminate() { document.write("Before <b>return false;</b>"); return false; document.write("After <b>return false;</b>"); } </script> <form> <input type="button" value="hello" onClick="terminate()"> </form>
練習題 使用JavaScript為計算機加上功能 練習目標： 使用基本的流程控制。 使用事件（Event）。 http://140.122.66.100:7001/HtmlPage/template/computer.html
進階練習 使用JavaScript動態控制網頁的CSS 已完成前三章練習題的學員可以嘗試實做上述功能，若能完成此練習，恭喜！ 已完成前三章練習題的學員可以嘗試實做上述功能，若能完成此練習，恭喜！ 你已經「出師」囉！！ 練習目標： 學習分析問題。 上網尋找範例。 靠自己解決問題。