ch 13 html
Download
Skip this Video
Download Presentation
Ch.13 HTML 網頁實作

Loading in 2 Seconds...

play fullscreen
1 / 56

Ch.13 HTML 網頁實作 - PowerPoint PPT Presentation


  • 43 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Ch.13 HTML 網頁實作' - corazon-soria


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
源流與發展
  • 全名為 Hyper Text Markup Language。
  • 西元 1991 年提出。
  • 主要為方便分享資料所設計。
  • 主要顯示文字與超連結。
  • 網頁內的內容皆可以透過不同的標籤定義。
  • 最新的 HTML 標準稱為 HTML5。
slide4
HTML瀏覽器
  • 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。
  • 目前主流的瀏覽器有

Microsoft Internet Explorer

Mozilla Firefox

Google Chrome

Apple Safari

Opera

slide5
HTML 標籤
  • 大部分的標籤都是成雙成對的,有開始標籤,就會有結尾標籤。如:

<html>…..</html>

<body>….</body>

  • 網頁瀏覽器會將 HTML 轉譯成我們平常所看到的網頁效果、排版與顏色等。
slide6
HTML 網頁架構
  • 基本 HTML 網頁架構:

<!DOCTYPE HTML PUBLIC … >

<html>

<head> … </head>

<body> … </body>

</html>

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

<body background=“bg.jpg”>….</body>

  • Background 為 <body> 的屬性之一,代表的是網頁所使用的背景圖片,而 bg.jpg 為其背景圖片之檔案名稱。
html meta
HTML 樣式及Meta標籤

樣式標籤

Meta 標籤

html 1
HTML 編輯軟體-1
  • 純文字編輯。如直接透過任何純文字編輯器,如 Windows 記事本。
  • 透過 W3School TryIt Editor 編輯,並可即時預覽。
html 2
HTML 編輯軟體-2
  • 利用文書編輯軟體,如大家常用的 Word 編寫網頁內容與繪製表格等。
  • 編輯完畢後儲存成 html 或 htm的檔案格式。
  • 由於該類文書編輯軟體並非針對專業網頁製作所設計,因此若要網頁動態化,或是各種精緻化功能都會有問題。
html 3
HTML 編輯軟體-3
  • 透過專業網頁編輯軟體,方便設計者撰寫 HTML 以及 Javascript等語法。
  • 較著名的網頁編輯軟體:

Microsoft FrontPage

NamoWebEditor

Adobe Dreamweaver

Microsoft Expression Web

  • Kompozer為免費的網頁開發工具。
15 2 html

15-2 HTML 網頁實作

以 2010 年 4 月 21 日所擷取的淡江大學首頁為例

1 html
網頁結構分析(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>

2 html
網頁結構分析(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>
slide28
網頁結構分析(3) – 找到td

原 HTML 語法

<tr>

<td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td>

</tr>

3 html
網頁結構分析(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 語法

slide31
網頁 -- 顏色表示法

<td style="color:#0000FF;background-color:#FFCCFF">

顯示在 <td> 格中背景是粉紅底(FFCCFF),前景顏色是藍色(0000FF)。這裡顏色是用RGB色彩三原色表示,R是紅色(Red),G是綠色(Green),B是藍色(Blue),RGB每種顏色各有256種組合,十進位數字為00~255,十六進位數字為00~FF。

slide33
淡江大學網頁空間
  • 學校針對 100 學年度新生提供的伺服器如下 Web 伺服器:s00.tku.edu.tw

FTP 伺服器:ftp.s00.tku.edu.tw

  • 學生上傳網頁成功後,瀏覽自己網頁的 URL 為http://s00.tku.edu.tw/~ID

ID 為學生於淡江大學之學號。

slide34
FTP 軟體下載與安裝
  • 至 Google 搜尋 FileZilla,下載後安裝。
ftp filezilla
FTP 軟體 -- Filezilla設定
  • 啟動Filezilla,並做好連線設定後,連線登入。
  • 請從選單「檔案」中選「站台管理員」,先輸入站名名稱(如ftp.s00)
  • 主機名稱100年度大一新生請填寫 ftp.s00.tku.edu.tw,99年度學生請填寫 ftp.s99.tku.edu.tw,依此類推。
  • 使用者請輸入學號,密碼請輸入學校提供的密碼,按確認就可以將ftp.s00站台儲存起起來,下一次就不必再輸入。
  • 設定好了按「連線」登入ftp.s00.tku.edu.tw
slide38
瀏覽放在TKU網頁空間之網頁

啟動瀏覽器,輸入網址 http://s00.tku.edu.tw/~ID,看看是否能夠看到你寫的網頁。如果可以就是成功了。

之後如果網頁檔案更新,只要將有更動的檔案傳入ftp.s00.tku.edu.tw即可。

slide40
CSS 簡介
  • HTML主要是用標籤來定義文件的結構。
  • CSS (Cascading Style Sheets) 主要是用來定義HTML文件要如何顯示。
  • 同一個網頁內容,因為不同的CSS而造成顯示產生差異。
slide41
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>

slide42
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>

slide43
CSS 免費資源
  • http://www.w3school.com.cn/css/
  • 無名小站有針對CSS提供畫面美化的服務,有興趣者可以去試試看,不僅可以藉此更深入了解CSS的用法,還可以做出個人風格的網頁來。
slide44
動態 HTML 免費資源
  • DynamicDrive (http://www.dynamicdrive.com/)
html ckeditor
HTML 編輯器- CKEditor
  • ckEditor(http://ckeditor.com/demo)
ad