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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

給高中生的Web Programming教材

823
views

Published on

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

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

Published in: Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
823
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
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