給高中生的Web Programming教材
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

給高中生的Web Programming教材

  • 745 views
Uploaded on

給高中生的Web programming教材,包含HTML、CSS以及JavaScript。

給高中生的Web programming教材,包含HTML、CSS以及JavaScript。

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
745
On Slideshare
745
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 臺灣海洋大學 資訊工程系 馬尚彬 Web程式設計簡介 (Web Programming Introduction) HTML+CSS+JavaScript
  • 2. 是否(大概)聽過以下名詞? 2 Internet WWW (World Wide Web) Web Page Web Site Youtube Google Map Facebook HTML JavaScript
  • 3. 你瀏覽網頁嗎? 3  是否試過[另存網頁]?  點擊儲存的網頁會看到甚麼?  是否觀看過網頁原始碼?  [檢視網頁原始碼]功能;或  直接用文字編輯器看儲存的網頁檔案
  • 4. 網頁原始碼 4 所有網頁都是遠端Server來的,瀏覽 器再將網頁透過URL下載到本地端電 腦(或手機或平版)
  • 5. 網頁包含甚麼? 5  文字  其實網頁本來就是網際網路上的文件  非文字內容  圖片、圖形、聲音、影片、應用程式
  • 6. 網頁的核心: 標籤(Tag) 6  網頁的語法遵循HTML (HyperText Markup Language)  成對標籤:  <h1>最大標題</h1>  <p>字型與大小設定</p>  單一標籤:  換行<br>  標籤屬性(Attribute):  <img src = "tabletennis.jpg" width = "400" height = "271" alt = "世桌賽金牌">
  • 7. 有哪一些標籤可以使用? 7  目前的標準已轉移到HTML5  https://developer.mozilla.org/en- US/docs/Web/HTML/Element
  • 8. 第一個HTML5程式 8 標頭 (head) 主體(body) 註解(comment)
  • 9. 編輯與執行 9  編輯  使用一般記事本即可編輯HTML5  建議使用Notepad++  亦可使用其他更豐富之編輯器,如Dreamweaver、Aptana  要將附檔名存成.html或.htm  執行  用瀏覽器即可開啟執行網頁  開發期間建議用Chrome或Firefox,測試期間要確保IE、 Chrome、 Firefox、Opera四種主流瀏覽器均可支援  若要能想一般網站一樣讓所有人連結,需架設Web Server。
  • 10. 超連結(Hyperlink) 10  範例:  <a href="http://www.google.com.tw">Google</a>  <a href="mailto:albert@ntou.edu.tw">寄信給馬老師</a>  <a href="浪費.mp3">音樂</a>  <a href="動畫.ogg">影片</a>  <a href="#menu">主選單</a>  <a>是錨(anchor)的意思,href是指超連結(hyper reference)  href可放相對路徑或絕對路徑
  • 11. 圖片(Image) 11  範例:  <img src = "tabletennis.jpg" alt = "世桌賽金牌" />  <img src = "tabletennis.jpg" width = "400" height = "271" alt = "世桌賽金牌" />  <img src = "tabletennis.jpg" width = "200" height = "135" alt = "世桌賽金牌" />  透過width和height屬性設定,可以做到放大縮小 圖片的效果,也可以讓圖片載入更快。
  • 12. 表格(Table)1 12  如何產生以下的功課表網頁?
  • 13. 表格(Table)2 13  範例:
  • 14. 表格(Table)3 14  範例 (續):
  • 15. 表格(Table)4 15  一個table分為三區: 頭(thead)、腳(tfoot)、身體 (tbody)  每一區都可加入表格行(table row, tr),每個表格行可加 入表格資料(table data, td)  rowspan屬性: 將一個td往橫的方向擴展幾格  colspan 屬性: 將一個td往縱的方向擴展幾格
  • 16. 表單(Form)1 16  如何產生以下的輸入選單?
  • 17. 表單(Form)2 17  範例:
  • 18. 表單(Form)3 18  Input標籤可允許的type屬性: • button • checkbox • color • date • datetime • datetime-local • email • file • hidden • image • month • number • password • radio • range • reset • search • submit • tel • text • time • url • week https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
  • 19. 其他標籤列表1 19  <p></p>: 段落  <br >: break 斷行  <hr >: horizontal line 水平橫線  <ol></ol>: ordered list 有順序編號之清單  <ul></ul>: unordered list 無順序之項目清單  <li></li>: list item 清單項目  <frameset></frameset>: 框架集  <frame></frame>: 框架  <iframe></ifame>: 內部框架
  • 20. 其他標籤列表2 20  <b>: 粗體字  <i>: 斜體字  <big>: 加大字體  <small>: 縮小字體  <sub>:下標  <sup>:上標  <tt>: 單行間距字型  <u>: 加底線
  • 21. 練習1 21  目前已有一個HTML檔: example-html-partial.html,其內容 為條列商品名稱之表格,請將其改寫為包含商品價格與 「聯絡經理」連結(可自動開啟e-mail程式)之表格。 習題下載網址:http://goo.gl/RaR10
  • 22. CSS (Cascading Style Sheets)1 22  Why CSS?  是否發現自己編寫的HTML與一般網站中的網頁有很大 的差異?
  • 23. CSS (Cascading Style Sheets)2 23  HTML v.s CSS  HTML 只用來設定網頁結構與內容  CSS則負責裝飾網頁  CSS Demo  https://developer.mozilla.org/en-US/demos/tag/tech:css3
  • 24. CSS規則1 24  CSS 可以適用於特定的HTML tag、特定類別(class) 的HTML元素(element)或特定ID的HTML元素 (element)  多個適用對象之間以逗點(,)分隔  CSS屬性  屬性定義以大括弧({ })括住  屬性定義的寫法:屬性名稱:屬性值  多個屬性定義間以分號(;)分隔
  • 25. CSS規則2 25 選擇器(Selector)可挑選出特定的HTML tag、特定類別 (class)的HTML元素(.class形式)、或特定ID的HTML元素(#id 形式),然後套用後面宣告中的CSS屬性。 (資料來源:W3School)
  • 26. CSS規則3 26  標籤選擇器(Type Selector)  p { font-size: 12pt; font-family: calibri, helvetica, sans-serif;}  把<p>元素內的文字之字型設定為calibri; 若calibri不支援,則設 定為helvetica; 若helvetica再不支援,則設定為sans-serif。  類別選擇器(Class Selector)  .special { color: purple; }  把class屬性設定為special之HTML元素之顏色設定為紫色。 設定顏色的好用工具: http://www.w3schools.com/tags/ref_colorpicker.asp
  • 27. CSS規則4 27  ID選擇器(ID selector)  #intro { font-family: 微軟正黑體, 標楷體; }  將id為intro之HTML元素之字型設定為微軟正黑體; 若微軟正黑體 不支援,則設定為標楷體。  假類別選擇器(pseudo-class selector)  針對預設的行為觸發CSS規則的套用  a:hover { background-color: yellow; }  滑鼠游標移至超連結時,背景色改為黃色。
  • 28. 如何在HTML中加入CSS? 28 在HTML標頭中加入<style>標籤, 設定CSS規則!
  • 29. 在HTML中加入了CSS 29 CSS使用前: CSS使用後:
  • 30. 背景(Background) 30  可設定背景顏色與圖片  範例:  背景色: 淺灰色  背景圖片: ntoulogo.gif  固定放置於右下角、不重複顯示。
  • 31. 邊框(Border)1 31  CSS可以細部設定HTML元素之留白、邊框、邊界 等細節。 Margin: 邊界 Border: 邊框 Padding: 留白 Content: 主內容
  • 32. 邊框(Border)2 32  範例
  • 33. CSS規則-後代(descendant)選擇器 33  後代選擇器  利用Tag之間的階層關係來做選擇  範例  只有<table>底下的<td>會套用這兩個規則
  • 34. 如何使用外部CSS? 34  在HTML的<head>部分使用<link>標籤  因此,我們可以將CSS設定獨立一份檔案,並命名 為xxx.css,讓多個HTML網頁連結使用。 <link rel = "stylesheet" type = "text/css" href = "table.css">
  • 35. 練習2 35  目前已有一個HTML檔: example-html+css-partial.html,請 將其改寫,增加三個CSS規則:  (1) 字型改為微軟正黑體  (2) 表格標頭之背景色改為#C8C8C8 (灰色)  (3) 新增滑鼠移至<td>會將<td>背景改為#FFFFCC (淡黃色)
  • 36. JavaScript1 36  到目前我們開發的網頁(HTML+CSS)只是文件,無 法完全根據使用者互動產生變化。  JavaScript是讓網頁可以動起來的方法!
  • 37. JavaScript2 37  JavaScript is NOT Java!  Java是編譯式(compiled)語言。  JavaScript是直譯式(interpreted)語言,不需要編譯 (compile)  只要有瀏覽器,就可以執行JavaScript  JavaScript可以讓網頁動起來  可以回應使用者的要求  使用者點擊button、使用者移動滑鼠、使用者按下鍵盤  可以抓取目前網頁的內容、執行運算程式、再修改目前 網頁的內容
  • 38. 第一個JavaScript程式 38
  • 39. 基本JavaScript指令 39  window.alert("透過跳出式視窗顯示的訊息");  window.prompt("要求使用者輸入一些資料:");  document.write("<h1>你想直接印在網頁的文字內 容(Tag可以派上用場了)</h1>");
  • 40. 變數(Variable)宣告與型態  變數宣告方式:  一般變數宣告: [var] 變數名稱[=變數值];  範例: var count = 10;  基本資料型態:  number 數字(有小數點)  如20.46  string 文字(用雙引號或單引號括住)  如“周杰倫”、'Nexus 7'  boolean 布林值  true/false 40
  • 41. 函式(Function)呼叫與宣告 41  函式呼叫範例:  var count = parseInt("10");  將字串“10”轉換成數字10  函式宣告範例:  計算球體體積
  • 42. 物件(Object)操作 42  利用「.」來連接 「物件」與其所擁有的屬性 (Property)以及具備的功能(Method)  物件名稱.屬性名稱  範例: Math.Pi  物件名稱.方法名稱()  範例: Math.random()
  • 43. 透過JavaScript在網頁上輸入資料 43  方法一: 透過window.prompt()取得資料  var name = window.prompt("請輸入姓名:“)  方法二: 透過HTML Form取得資料  HTML:  JavaScript: 點擊事件(event)
  • 44. 透過JavaScript在網頁上輸出資料 44  方法一: 透過document.write()寫HTML code  方法二: 修改HTML元素的內容  HTML:  JavaScript:
  • 45. 其他程式邏輯 45  判斷式(condition)  迴圈(loop)
  • 46. HTML + CSS + JavaScript 46  HTML: 網頁結構與內容  CSS: 網頁的呈現與美觀  JavaScript: 網頁的功能
  • 47. 練習3 47  目前已有一個HTML檔: example-html+css+form+javascript- partial ,其可透過點擊[銷售分析]按鈕計算一位銷售員銷 售產品後可得到的佣金,請將其改寫,判斷當佣金高於 30000元時,額外顯示圖片“congratulations.jpg ” 。
  • 48. 何謂完整的Web Application? 48  必須有「前端」與「後端」  前端:網頁的外觀與使用者介面  技術:HTML, CSS, JavaScript (jQuery), Flash  執行環境:瀏覽器  後端:接受前端的請求(request)、進行運算與資料處理  技術:PHP、.Net、JavaEE  執行環境:伺服器(Server)
  • 49. 其他Web技術 49  Facebook  Google Map  Youtube  Google Calendar  Flicker / Picasa
  • 50. 練習4 50  目前已有一個美食筆記(slideshow/index.html)的網 頁,請將其從展示圖片的功能改為展示Youtube影 片的功能。
  • 51. 學習資源 51  MDN  https://developer.mozilla.org/en/HTML/Element  w3schools  http://www.w3schools.com/tags/default.asp  CSS菜鳥救星  http://www.slideshare.net/clayliao/css101-for-beginner  接案我最行!JavaScript & Ajax 商業範例必殺技
  • 52. Any Question? 52