<table> table tr 04th td <table> width height border cellspacing cellpadding (px) (%) (px) (%) (px) (px) (px) 4-01.htm <table border="1" width="80%" c

Size: px

Start display at page:

Download "<table> table tr 04th td <table> width height border cellspacing cellpadding (px) (%) (px) (%) (px) (px) (px) 4-01.htm <table border="1" width="80%" c"

瞒邰
6 years ago
Views:

1 HTML5 4.1 表格 CSS3 在網頁中可以使用表格利用欄列的佈置的狀態將資訊整理的更清楚更有條理 JavaScript 基礎的表格結構在 HTML 中是利用 <table> 元素來建構表格的內容下圖可清楚了解組成表格的元與 jquery 素及重要屬性有哪些 width 超完美特訓班 Bootstrap <table> <tr> <th> height <td> <td> border cellpadding cellspacing 加入表格 <table> <table> 是建構表格的主要元素並語法格式如下 <table width=" 表格寬度 " height=" 表格高度 " border=" 框線寬度 " cellspacing=" 儲存格間距 " cellpadding=" 儲存格內距 " > <tr> <th> 表頭標題 </th> </tr> <tr> <td> 儲存格內容 </td> </tr> </table> 4-2

2 <table> table tr 04th td <table> width height border cellspacing cellpadding (px) (%) (px) (%) (px) (px) (px) 4-01.htm <table border="1" width="80%" cellspacing="5" cellpadding="5"> <tr> <th> A</th> <th> B</th> </tr> <tr> <td>a1</td> <td>b1</td> </tr> 4-3

HTML5CSS3JavaScriptjQuery Bootstrap <tr> <td>a2</td> <td>b2</td> </tr> </table> 2 2 <table> 4.1.

3 HTML5CSS3JavaScriptjQuery Bootstrap <tr> <td>a2</td> <td>b2</td> </tr> </table> 2 2 <table> <td> <th> colspan <td colspan=" "> rowspan <td rowspan=" "> 4-02.htm <table border="1" width="80%" cellspacing="5" cellpadding="5"> <tr> <td colspan="2">a</td> </tr> <tr> <td>a1</td> <td>a2</td> 4-4

4 HTML5 4.2 表單 CSS3 在 HTML 中的表單是利用欄位讓網站訪客在填入資訊後送出集中到指定的頁面或是程式進行處理 JavaScript 表單的功能您可能沒有發覺在生活中到處充斥著表單例如填寫每日出勤表申請補助或獎與 jquery 助學金加入社團填寫個人資料等表單都能將所需要的資料整理在紙本中讓使用者依欄位填寫而 HTML 就是利用這樣的概念讓網站訪客在填寫完資料之後超完美特訓班 Bootstrap 收集到指定的程式進行處理 Google 首頁上的搜尋欄就是表單最經典的演繹只要使用者輸入關鍵字後按下送出鈕程式處理後即可將搜尋結果送回頁面呈現表單輸入關鍵字送到指定程式處理將搜尋結果回送建立表單區域在網頁裡的表單必須要建立在 <form> </form> 標籤之中其中包含了說明文字輸入欄位與其他的表單元件當按下送出按鈕時會將表單中所填寫的資料一併送出到指定的目的地進行處理在同一個頁面中可以包含多個表單但是表單中不能再包含另一個表單表單基本的語法格式如下 <form action=" 表單資料處理目的地 " method=" 傳送方式 "> 4-6

5 action method GETPOST 1. GET action? & 2. POST action HTTP <input> <input type=" " name=" " value=" "> type name value 1. text 2. password 3. radio 4. checkbox 5. buttonsubmitreset 6. hidden = username <input type="text" name="username"> size maxlength <input type="text" name="username" size="20" maxlength="12"> 4-7

HTML5 密碼欄位 password 若是輸入欄位的資料是密碼即可使用例如想要加入一個名稱為 passwd 的密碼欄位 CSS3 密碼 <input type="password" name="passwd"> JavaScript 送出及重置按鈕欄位 submitreset 完成了表單的資料填寫

htm <form> <p> 帳號 <input type="text" name="username"></p> <p> 密碼 <input type="password" name="passwd"></p> <p><input type="submit" value=" 登入 "> <input type="reset"

6 HTML5 密碼欄位 password 若是輸入欄位的資料是密碼即可使用例如想要加入一個名稱為 passwd 的密碼欄位 CSS3 密碼 <input type="password" name="passwd"> JavaScript 送出及重置按鈕欄位 submitreset 完成了表單的資料填寫即可按下送出按鈕欄位將表單中的資料送往指定的處理程式若是資料填寫錯誤可以按下重置按鈕欄位將表單中的資料清空例如與 jquery <input type="submit" value=" 送出資料 "> <input type="reset" value=" 重置資料 "> 超完美特訓班 Bootstrap 程式碼 4-03.htm <form> <p> 帳號 <input type="text" name="username"></p> <p> 密碼 <input type="password" name="passwd"></p> <p><input type="submit" value=" 登入 "> <input type="reset" value=" 重置 "></p> </form> 執行結果由結果可以看到在 <form> 標籤中並沒有設定 action 及 method 預設表單資料送出時會以 GET 的方式將資料傳送到目前頁面如上圖在輸入帳號及密碼時會以設定的方式顯示按下登入鈕即會將資料送出資料會傳送到目前的頁面在網址與資料之間用? 問號進行分隔每個欄位名稱與資料會用 & 符號進行串接 4-8

7 CSS HTML (Box Model) HTML (border) (padding) (margin) padding height margin border width width height width border padding height border padding 9-3

8 HTML5 可視寬度 CSS3 height 內容顯示區域可視高度 JavaScript width 與 jquery 內容顯示區域尺寸 widthheight 在盒子模型下可以使用 widthheight 二個屬性來設定內容顯示區域的尺寸超完美特訓班 Bootstrap 一般尺寸的設定其語法格式如下 width: 數值 height: 數值用來指定尺寸的方法常是使用 pxem 或是百分比若使用的是 px 像素可以很精確的控制內容顯示區域的大小若使用的是百分比則寬或高就要視該區塊元素所在的父層容器大小依比例顯示程式碼 9-01.htm <style>.box1 { width: 300px; height: 300px; color: #FFFFFFF; background-color: #FF0000; } </style> <div class="box1"> 9-4 width: 50%; height: 300px;

min-height: 數值 ; 在預設的狀況下內容顯示區域會隨著瀏覽器大小來改變顯示的範圍 max-width 是用來設定最大可以顯示到哪個寬度再大就是以設定值來顯示 min-width 是用來設定最小可以顯示到哪個寬度

9 文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試 09 盒子模型與版面定位 </div> 執行結果 width: 300px width: 50% 由結果可以看到寬度使用 px 來設定時區域的寬度會固定不會隨瀏覽器視窗大小變化寬度使用百分比來設定時即會隨瀏覽器大小而變化限制寬度及高度其語法格式如下 max-width: 數值 ; min-width: 數值 ; max-height: 數值 ; min-height: 數值 ; 在預設的狀況下內容顯示區域會隨著瀏覽器大小來改變顯示的範圍 max-width 是用來設定最大可以顯示到哪個寬度再大就是以設定值來顯示 min-width 是用來設定最小可以顯示到哪個寬度再小就是以設定值來顯示而高度也是一樣 maxheight 是用來設定最大可以顯示到哪個高度再大就是以設定值來顯示 min-height 是用來設定最小可以顯示到哪個高度再小就是以設定值來顯示但要注意這個區域的大小並無法限制內容的顯示內容太多時會超過區域來顯示 9-5

10 了解 DOM 對於使用 JavaScript 控制網頁上的內容製作網頁上的特效有很大的幫助 DOM (Document Object Model) 為文件物件模型它是 W3C 聯合各瀏覽器廠商制訂的標準物件模型以解決各瀏覽器間物件模型不一致的問題認識 DOM JavaScript Javascript 與 DOM 函式陣列與物件簡單來說在 DOM 的標準下文件中所有的標籤定義都是一個物件這些物件以文件定義的結構形成了一個樹狀結構例如 <html> <head> <title> 首頁 </title> </head> <body> <h1>hello,world</h1> <p> 歡迎來到我的網站 </p> </body> </html> 這份 HTML 文件會形成以下樹狀的物件結構 Document document root( 根節點 ) html head Parent Node ( 父節點 ) title 頁首 HtmlElement body Child Node ( 子節點 ) h1 p Hello,World 歡迎來到我的網站 Text 12-17

11 HTML5 在這個 HTML 的結構當中每一個標籤及內容都可以視為一個節點 (Node) 各個 CSS3 的在任一節點的上層稱為父節點 (Parent Node) 下層稱為子節點 (Child JavaScript 為一個節點節點相連出一個樹狀結構 document 代表整個文件所有節點的起點為 html 一般稱為根節點 (Root Node) 由 html 以下的每一層節點之間都有相對應的關係 Node) 而每一個 HTML 標籤內可能都還有屬性文字等內容這些都會被各自視利用 JavaScript 存取元素節點與 jquery 因為 DOM 將文件中的內容物件化只要善用 DOM 就能快速的在文件中找到要處理的部分進而能存取甚至更新文件的內容結構與樣式完美特訓班 Bootstrap 在 JavaScript 中可以使用 getelementbyid() 和 getelementsbytagname() 二個方法找到 HTML 中指定的元素以下就這二個方法進行說明 getelementbyid()的使用在 HTML 網頁中設定 id 屬性是為 HTML 標籤的設定唯一識別碼也就是如果在 HTML 標籤中設定了 id 屬性其他的元素就不能使用相同的名稱來當作 id 也因為這樣的特性 id 屬性就成為在網頁上找尋元素的一大利器 JavaScript 提供了 getelementbyid() 這個方法來找到指定 id 屬性的元素語法如下 document.getelementbyid("id 名稱 ") 例如想找尋頁面中找尋 id 值是 myhomepage 的超連結標籤接著取出它的連結網址與顯示文字顯示在訊息視窗上程式碼 htm 8 <body> 9 <a id="myhomepage" 文淵閣工作室 </a> href=" 10 <script> var findurl = document.getelementbyid("myhomepage"); alert(findurl.innerhtml + " 的網址是 \n" +findurl.href); 13 </script> </body>

執行結果 12 JavaScript 程式說明 9 函式陣列與物件使用 <a> 的 HTML 標籤設定超連結其 id 屬性為 myhomepage 11 使用 getelementbyid()方法找到 id 為 myhomepage 的物件並儲存在 findurl 變數中 12 使用findUrl.href 可以取得連結網址 findurl.

12 執行結果 12 JavaScript 程式說明 9 函式陣列與物件使用 <a> 的 HTML 標籤設定超連結其 id 屬性為 myhomepage 11 使用 getelementbyid()方法找到 id 為 myhomepage 的物件並儲存在 findurl 變數中 12 使用findUrl.href 可以取得連結網址 findurl.innerhtml可以取得標籤內的文字內容最後使用 alert() 的方式顯示在訊息視窗上 getelementsbytagname()的使用使用 getelementbytagname() 方法可以在 HTML 網頁中取回指定的標籤名稱因為網頁上相同的標籤可能不只一個所以回傳的值是一個陣列它的語法如下 document.getelementsbytagname("tag 名稱 ") 例如想要選取頁面中圖片並取得它 alt 屬性的內容然後顯示在訊息視窗上程式碼 htm 8 9 <body> <img src="acl png" alt="ai2 零基礎入門班 "> 10 <img src="acl png" alt="ai2 初學特訓班 "> 11 <img src="acl png" alt="ai2 專題特訓班 "> 12 <script> 13 var findimg = document.getelementsbytagname("img"); 14 var msg=""; 15 for(var i=0; i<findimg.length; i++){ 12-19

$alt+"\n"; alert(msg); CSS3 19 </script> 20 </body> JavaScript 執行結果與 jquery 完美特訓班 Bootstrap 程式說明 9-11 13 15-17 18 12-20 使用 <img> 的 HTML 標籤設定圖片顯示其 alt 屬性內容為說明文字使用$

13 HTML } msg += " 第 "+(i+1)+" 本書為 "+findimg[i].alt+"\n"; alert(msg); CSS3 19 </script> 20 </body> JavaScript 執行結果與 jquery 完美特訓班 Bootstrap 程式說明使用 <img> 的 HTML 標籤設定圖片顯示其 alt 屬性內容為說明文字使用 getelementsbytagname()方法找到 <img> 標籤並將回傳的陣列資料儲存在 findimg 變數中使用 for 迴圈將 findimg 中的 alt 的說明文字分別讀出並儲存在 msg 變數中最後使用 alert() 的方式將 msg 變數顯示在訊息視窗上

14 HTML jquery 的特效 CSS3 jquery 提供了許多簡單設定但效果驚人的特效只要善用這些功能就能讓您的頁面更加吸引人 JavaScript jquery特效的基本語法 jquery 提供了許多特效的方法設定上十分簡單它的基本語法如下與 jquery $( 選擇器 ). 特效方法 ( 持續時間 [, 移動方式 ][, 完成函式 ]) 1. 持續時間這個參數是必須的選項可以填入時間數字單位是毫秒也可以填完美特訓班 Bootstrap 入文字 slow 與 fast 來代表 2. 移動方式與完成函式這二個參數並不是必填的其中移動方式預設是 easing 而完成函式可以填入當特效完成後要執行的函式或是程式內容 jquery特效的分類 jquery 常用的特效方法有幾個分類基本特效方法名稱說明 show() 顯示元素 hide() 隱藏元素 toggle() 每次執行就會切換顯示與隱藏元素例如以下的範例中有三個按鈕按顯示鈕下方的方塊會顯示按隱藏鈕下方的方塊會隱藏按切換鈕下方的方塊會在顯示隱藏間切換程式碼 htm <script> 13 $(document).ready(function(){

15 14 $('#btnshow').click(function(){ 15 $('#box').show(500); 16 }); 17 $('#btnhide').click(function(){ 18 $('#box').hide(500); 19 }); 20 $('#btntoggle').click(function(){ 21 $('#box').toggle(500); 22 }); 23 }); 24 </script> 28 <p> 29 <input type="button" id="btnshow" value=" "> 30 <input type="button" id="btnhide" value=" "> 31 <input type="button" id="btntoggle" value=" "> 32 </p> 33 <p> </p> 34 <div id="box">box</div> 14 jquery btnshow box show() btnhide box hide() btntoggle box toggle() 14-17

16 jquery Mobile 的頁面連結 jquery Mobile 可以在單檔中置入多頁的結構並利用 Ajax 的效果達到切換的效果 jquery Mobile 超連結的方式 15 jquery Mobile 15.3 入門其實 jquery Mobile 的頁面跟一般的網頁一樣可以使用 HTML 的 <a> 標籤來設定超連結除了連往同網站中的其他頁面或著是其他網站的頁面還有特殊的單檔多頁的切換在 jquery Mobile 頁面中可以使用連結的方式有以下幾種 1. 同網站的其他頁面連結同一個資料夾之下或相對位址的網頁例如 <a href="about.htm"> 關於我們 </a> 2. 其他網頁的頁面連結其他網站的網址例如 <a href=" 文淵閣工作室 </a> 3. jquery Mobile 檔案中的頁面在 jquery Mobile 的單一檔案中可以建立多個頁面可以利用每個頁面設定的 id 值進行連結例如 <a href="#about"> 關於我們 </a> 關於單檔多頁的結構與切換方式我們將在以下進行詳細的說明單檔多頁面的結構在 jquery Mobile 中可以在同一個 HTML 文件中建立多個頁面並使用連結按鈕或導覽列進行頁面的切換它的方式是在同一檔案中設定多個 div 區域設定 data-role="page" 屬性將該區域定義為一個頁面接著設定 id 值命名例如以下我們要在同一個 HTML 檔案中設定 3 個頁面分別命名為 Page1Page2 與 Page3 <div data-role="page" id="page1"> </div> <div data-role="page" id="page2"> </div> <div data-role="page" id="page3"> </div> 15-13

17 HTML5CSS3JavaScriptjQuery Bootstrap HTML #Page1 Back #Page2 #Page3 #Page2 #Page1 Other jquery Mobile 1 Page1 Page2 Page1 Page2 2 Page2 Page3 Page2 Page3 3 Page2 Page1 Page2 Page

18 #Page1 Back #Page2 #Page #Page1 #Page2 1 #Page3 2 jquery Mobile Page1 #Page2 Page2 Page2 #Page1 Page1 <div data-role="page" id="page1"> <a href="#page2">page2</a> </div> <div data-role="page" id="page2"> <a href="#page1">page1</a> </div> #Page1 #Page1 Back #Page2 #Page3 #Page2 #Page3 #Page2 #Page1 Other #Page2 #Page1 Other 15-15

19 HTML5CSS3JavaScriptjQuery Bootstrap 18.3 Bootstrap Bootstrap (Grid System) Bootstrap grid system ( 960px Col 6 Col 6 Col 3 Col 4 Col 9 Col 8 Col 4 Col 4 Col 18-8

20 18 Bootstrap 註 Bootstrap Grid Systemhttp://960.gs 2. Blueprinthttp:// 3. Golden Grid Systemhttp://goldengridsystem.com/ 18-9

HTML5CSS3JavaScriptjQuery Bootstrap 18.3.2 Bootstrap Bootstrap row column basic_grid.

21 HTML5CSS3JavaScriptjQuery Bootstrap Bootstrap Bootstrap row column basic_grid.htm <div class="container"> <div class="row"> <div class="col-md-1">01</div> <div class="col-md-1">02</div> <div class="col-md-1">03</div> <div class="col-md-1">04</div> <div class="col-md-1">05</div> <div class="col-md-1">06</div> <div class="col-md-1">07</div> <div class="col-md-1">08</div> <div class="col-md-1">09</div> <div class="col-md-1">10</div> <div class="col-md-1">11</div> <div class="col-md-1">12</div> </div> </div> 18-10

22 Bootstrap row column 1. row.container( ).container-fluid( ) <div class="container"> </div> 18 Bootstrap 2. row column column column row row.row column <div class="row"> </div> 3..col- -column Bootstrap 4 (1) xs (2) sm (3) md (4) lg Bootstrap row 12 1 column column 3 4 column row 12 column row 12 <div class="col-md-1"> </div>md 1 1 column 12 註 row column 18-11

23 HTML5CSS3JavaScriptjQuery Bootstrap Bootstrap 750px 970px 1170px.col-xs-.col-sm-.col-md-.col-lgcolumn 12 column ~62px ~81px ~97px 30pxcolumn 15px 768px 992px 1200px Bootstrap 768px992px 1200px 1. < 768px ( ).col-xs-1 ~.col-xs px >= < 992px ( ).col-sm-1 ~.col-sm-12 (.container) 750px px >= < 1200px ( ).col-md-1 ~.col-md-12 (.container) 970px 4. >= 1200px ( ).col-lg-1 ~.col-lg-12 (.container) 1170px 18-12

24 Bootstrap column 2 2 column 9 : 3 grid-01.htm <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-9">01</div> <div class="col-xs-12 col-sm-3">02</div> </div> </div> 18 Bootstrap 3 column 4 : 4 : 4 3 : 4 : 5 grid-02.htm <div class="container"> 18-13

bootstrap - 2

RITA TEACHING Bootstra p ENTER bootstrap - 2 bootstrap - 3 bootstrap 101 Template