1 / 56

Ch.13 HTML 網頁實作

Ch.13 HTML 網頁實作. 源流與發展. 全名為 Hyper Text Markup Language 。 西元 1991 年提出。 主要 為 方便分享資料所設計。 主要顯示文字與 超連結。 網頁內的內容皆可以透過不同的標籤定義。 最新的 HTML 標準稱為 HTML5 。. 源流與發展. HTML 瀏覽器. 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。 目前主流的瀏覽器 有 Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera.

corazon-soria
Download Presentation

Ch.13 HTML 網頁實作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ch.13 HTML網頁實作

  2. 源流與發展 • 全名為 Hyper Text Markup Language。 • 西元 1991 年提出。 • 主要為方便分享資料所設計。 • 主要顯示文字與超連結。 • 網頁內的內容皆可以透過不同的標籤定義。 • 最新的 HTML 標準稱為 HTML5。

  3. 源流與發展

  4. HTML瀏覽器 • 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。 • 目前主流的瀏覽器有 Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera

  5. HTML 標籤 • 大部分的標籤都是成雙成對的，有開始標籤，就會有結尾標籤。如： <html>…..</html> <body>….</body> • 網頁瀏覽器會將 HTML 轉譯成我們平常所看到的網頁效果、排版與顏色等。

  6. HTML 網頁架構 • 基本 HTML 網頁架構： <!DOCTYPE HTML PUBLIC … > <html> <head> … </head> <body> … </body> </html>

  7. HTML 網頁內容與標籤 • 一般網頁起始於 <html>，結尾於</html>。 • 網頁的主要內容，如表格、圖片、文字、影片與超連結多媒體內容等，皆必須置於<body>...</body>之中 • <head>…</head> 用來定義網頁文件等訊息，如網頁的標題等。

  8. HTML 標籤與屬性 • 每個標籤內可能定義了多個屬性。 <body background=“bg.jpg”>….</body> • Background 為 <body> 的屬性之一，代表的是網頁所使用的背景圖片，而 bg.jpg 為其背景圖片之檔案名稱。

  9. HTML 基本標籤

  10. HTML 格式化標籤

  11. HTML 超連結及圖片標籤

  12. HTML 表格標籤

  13. HTML表單標籤

  14. HTML 頁框標籤

  15. HTML 樣式及Meta標籤 樣式標籤 Meta 標籤

  16. HTML 程式標籤

  17. HTML 編輯軟體-1 • 純文字編輯。如直接透過任何純文字編輯器，如 Windows 記事本。 • 透過 W3School TryIt Editor 編輯，並可即時預覽。

  18. HTML 編輯軟體-2 • 利用文書編輯軟體，如大家常用的 Word 編寫網頁內容與繪製表格等。 • 編輯完畢後儲存成 html 或 htm的檔案格式。 • 由於該類文書編輯軟體並非針對專業網頁製作所設計，因此若要網頁動態化，或是各種精緻化功能都會有問題。

  19. HTML 編輯軟體-3 • 透過專業網頁編輯軟體，方便設計者撰寫 HTML 以及 Javascript等語法。 • 較著名的網頁編輯軟體： Microsoft FrontPage NamoWebEditor Adobe Dreamweaver Microsoft Expression Web • Kompozer為免費的網頁開發工具。

  20. HTMLKompozer

  21. 15-2 HTML 網頁實作 以 2010 年 4 月 21 日所擷取的淡江大學首頁為例

  22. TKU網頁結構設計分析

  23. 網頁結構分析(1) – table標籤

  24. 網頁結構分析(1) – HTML 碼 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TKU Website Structure</title> </head> <body> <table cellspacing=0 cellpadding=0> <tr> <td rowspan=3> <imgsrc="t1-11.jpg"></td> <td colspan=2> <imgsrc="t1-12.jpg"></td> </tr> <tr> <td> <imgsrc="t1-21.jpg"> </td> <td> <imgsrc="t1-22.jpg"> </td> </tr> <tr> <td colspan=2> <imgsrc="t1-31.jpg"></td> </tr> </table>

  25. 網頁結構分析(2) – td 含 table

  26. 網頁結構分析(2) – HTML 碼 • <table> • <tr> • <td valign="top"> • <table> • <tr> <td> <imgsrc="t2-11-1.jpg"> </td> </tr> • <tr> <td> <imgsrc="t2-11-2.jpg"> </td> </tr> • </table> • </td> • <td> • <table> • <tr> • <td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td> • </tr> • <tr> <td> <imgsrc="t2-12-2.jpg"></td> </tr> • </table> • </td> • <td> <imgsrc="t2-13.jpg"> </td> </tr> • <tr> <td colspan=3> <imgsrc="t2-21.jpg"> </td> </tr> • </table>

  27. 網頁結構分析(3) – td 插入影片

  28. 網頁結構分析(3) – 找到td 原 HTML 語法 <tr> <td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td> </tr>

  29. 網頁結構分析(3) – HTML 碼 <tr> <td valign="top" align="center"> <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/RechrtUxfQc" frameborder="0" allowfullscreen></iframe> </td> </tr> <tr> <td style="color:#0000ff;background-color:#ffccff"><center><h3> 淡江大戲 Part <a href= "http://www.youtube.com/watch?v=RechrtUxfQc&playnext=1&list=PLA134F7F5E4A537D2" >[1]</a> <a href= "http://www.youtube.com/watch?v=MRWX49Furew&feature=related">[2]</a> <a href= "http://www.youtube.com/watch?v=METhdbL_iMw&feature=related">[3]</a> <a href= "http://www.youtube.com/watch?v=ZyDbq-lEKTo&feature=related">[4]</a> <a href= "http://www.youtube.com/watch?v=NlsrJbVvjaA&feature=related">[5]</a></h3><center> </td> </tr> 替換為新的 HTML 語法

  30. 取得YouTube影片之內嵌碼

  31. 網頁 -- 顏色表示法 <td style="color:#0000FF;background-color:#FFCCFF"> 顯示在 <td> 格中背景是粉紅底(FFCCFF)，前景顏色是藍色(0000FF)。這裡顏色是用RGB色彩三原色表示，R是紅色(Red)，G是綠色(Green)，B是藍色(Blue)，RGB每種顏色各有256種組合，十進位數字為00~255，十六進位數字為00~FF。

  32. 網頁 – 顏色及RGB值

  33. 淡江大學網頁空間 • 學校針對 100 學年度新生提供的伺服器如下 Web 伺服器：s00.tku.edu.tw FTP 伺服器：ftp.s00.tku.edu.tw • 學生上傳網頁成功後，瀏覽自己網頁的 URL 為http://s00.tku.edu.tw/~ID ID 為學生於淡江大學之學號。

  34. FTP 軟體下載與安裝 • 至 Google 搜尋 FileZilla，下載後安裝。

  35. FTP 軟體 -- Filezilla設定 • 啟動Filezilla，並做好連線設定後，連線登入。 • 請從選單「檔案」中選「站台管理員」，先輸入站名名稱(如ftp.s00) • 主機名稱100年度大一新生請填寫 ftp.s00.tku.edu.tw，99年度學生請填寫 ftp.s99.tku.edu.tw，依此類推。 • 使用者請輸入學號，密碼請輸入學校提供的密碼，按確認就可以將ftp.s00站台儲存起起來，下一次就不必再輸入。 • 設定好了按「連線」登入ftp.s00.tku.edu.tw

  36. FTP 軟體– Filezilla畫面

  37. Filezilla連線TKU 提供之ftp 空間

  38. 瀏覽放在TKU網頁空間之網頁 啟動瀏覽器，輸入網址 http://s00.tku.edu.tw/~ID，看看是否能夠看到你寫的網頁。如果可以就是成功了。 之後如果網頁檔案更新，只要將有更動的檔案傳入ftp.s00.tku.edu.tw即可。

  39. 15-3 動態 HTML

  40. CSS 簡介 • HTML主要是用標籤來定義文件的結構。 • CSS (Cascading Style Sheets) 主要是用來定義HTML文件要如何顯示。 • 同一個網頁內容，因為不同的CSS而造成顯示產生差異。

  41. CSS 簡介 <body> <h1>淡江大學</h1> <hr> <h2>World Wide Web</h2> <table border="1" width="100%"> <tbody> <tr> <th align="left">Chapter</th> <th align="left">Title</th> </tr> <tr> <td width="10%">13</td> <td width="50%">雲端服務</td> </tr> <tr> <td width="10%">14</td> <td width="50%">智慧型手機</td> </tr> </tbody> </table><br> <hr> </body>

  42. CSS 範例 於 <head>…</head> 中加入下列語法 <style type="text/css"> body { font-family:"lucida calligraphy",arial,'sans serif'; background-color:#DCDCDC; color:#8A2BE2; margin:10px; } h1 {font-size:250%;} h2 {font-size:150%;} th {background-color:#D3D3D3;} td {background-color:#FFFAF0A;} </style>

  43. CSS 免費資源 • http://www.w3school.com.cn/css/ • 無名小站有針對CSS提供畫面美化的服務，有興趣者可以去試試看，不僅可以藉此更深入了解CSS的用法，還可以做出個人風格的網頁來。

  44. 動態 HTML 免費資源 • DynamicDrive (http://www.dynamicdrive.com/)

  45. 15-4 HTML 學以致用

  46. HTML 編輯器- CKEditor • ckEditor(http://ckeditor.com/demo)

  47. CKEditor編輯畫面

  48. CKEditor顯示網頁

  49. HTML 編輯器- Blogger

  50. HTML 編輯器- Blogger

More Related