1 / 68

Ch.13 HTML 網頁實作

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

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

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

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

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

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

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

  8. HTML 標籤 格式化標籤 超連結及圖片標籤 表格標籤 列表標籤 表單標籤 頁框標籤 樣式標籤 Meta標籤 程式標籤

  9. HTML 基本標籤

  10. HTML 格式化標籤

  11. HTML 超連結及圖片標籤

  12. HTML 表格標籤

  13. HTML 列表標籤

  14. HTML表單標籤

  15. HTML 頁框標籤

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

  17. HTML 程式標籤

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

  19. HTML好站推薦 標籤與屬性查詢: (英文網站): http://www.w3schools.com/tags/ (中文網站): http://www.w3school.com.cn/tags/ 這兩個網站都有HTML的教程

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

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

  22. HTMLKompozer

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

  24. TKU網頁結構設計分析

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

  26. 網頁結構分析(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>

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

  28. 網頁結構分析(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>

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

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

  31. 網頁結構分析(3) – HTML 碼 替換為新的 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>

  32. 取得YouTube影片之內嵌碼

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

  34. 網頁 – 顏色及RGB值

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

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

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

  38. FTP 軟體– Filezilla畫面

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

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

  41. 13-3 動態 HTML

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

  43. CSS的基本寫法 每一條 CSS 規則分為選擇器(Selector) 和宣告(Declaration) 兩個部分, 其中宣告(Declaration) 則是由屬性(Property) 和值(Value) 所組成的, 例如：

  44. CSS的基本寫法 所謂的選擇器是用來選擇這條規則要套用的對象, 例如我們要設定 <h1> 標籤的字型大小為12點, 顏色為紅色時, 寫法如下：

  45. CSS的基本寫法 上例中, <h1> 標籤是我們套用的對象, 因此選擇器就是h1。font-size及color是我們要設定的字型屬性；12pt 及 red 是分別指定給font-size及color 屬性的值。 當選擇器包含多個宣告時, 請務必使用分號"；" 來區隔宣告。

  46. CSS的基本寫法 我們也可以同時讓多個選擇器共用相同的宣告, 例如要把 <h1>、<h2>、<h3>標籤的字型大小都設為12 點： 當有多個選擇器要共用相同的宣告時, 可以合併寫在一起, 但選擇器要使用逗號"," 做區隔。

  47. 常見定義CSS的三種方式 Inline Styles (行內樣式，在個別標籤中使用style 屬性) <p style=“color:sienna;margin-left:20px”>這裡是一段文字</p>

  48. 常見定義CSS的三種方式 Internal Style Sheet (內嵌樣式表，在 < head > 中用 <style > 標籤定義 CSS) <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("imagesmypic.gif");} </style> </head>

  49. 常見定義CSS的三種方式 External Style Sheet (外部樣式表，用 <link > 標籤連結 CSS 檔) <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

  50. 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>

More Related