計算機概論

計算機概論

第 11 章　 HTML 網頁設計

大綱 11-1 　建置網站的流程 11-2 　從事網頁設計所需的軟、硬體 11-3 　從事網頁設計相關的程式語言 11-4 　認識 HTML 語法 11-5 　編輯 HTML 網頁 11-6 　 HTML 網頁的整體架構 11-7 　事件處理程式 11-8 　資料編輯與格式化 11-9 　超連結 11-10 　圖片 11-11 　表格

11-1 　建置網站的流程

一、蒐集資料與規劃網站架構二、網頁製作與測試三、將網站上傳至 Web 伺服器並加以推廣四、網站的更新與維護

11-2 　從事網頁設計所需的軟、硬體硬體網頁編輯軟體影像動畫軟體瀏覽器網頁空間

11-3 　從事網頁設計相關的程式語言 HTML 是一種用來撰寫網頁的程式語言，由

W3C 所制定。

網頁的 HTML 原始檔網頁的實際瀏覽結果

XML 是由 W3C 贊助的組織 XML Working Group 所制定， 1998 年 2 月正式推出 1.0 版，主要的用途是在 Internet 傳送或處理資料。

CSS 是由 W3C 所制定，主要的用途是定義網頁資料的編排、顯示、格式化及特殊效果。

11-3 　從事網頁設計相關的程式語言

DHTML 技術能夠在網頁下載完畢後插入、刪除或取代網頁的某些 HTML 原始碼，而瀏覽器會自動根據更新過的 HTML 原始碼顯示新的網頁內容，而不必從伺服器重新下載整個網頁。

XHTML 是由 W3C 所制定，主要的用途和 HTML 一樣是撰寫網頁，語法比 HTML 嚴謹。

Java Applets 是使用 Java 程式語言所撰寫的小程式，可以用來製造動態效果。


VRML 主要的用途是描述物體的三度空間資訊，讓網頁的瀏覽者可以看到 3D 的物體。

使用 VRML 製作

虛擬旅遊網頁


ActiveX Control ：這是 Microsoft 為了迎戰 Java Applet 所推出，功能強大。

Windows Media Player 控制項月曆控制項


瀏覽器端 Script 是一段散佈在 HTML 原始碼內的小程式，由瀏覽器負責執行，有 Netscape 公司的 JavaScript 和 Microsoft 公司的 VBScript 。

雖然瀏覽器端 Scripts 已經可以完成許多工作，但有些工作還是得在伺服器端執行 Scripts 才可以完成，常見的伺服器端 Scripts 有下列幾種： CGI (Common Gateway Interface) JSP (JavaServer Pages) PHP (PHP:Hypertext Preprocessor) ASP (Active Server Pages)


11-4 　認識 HTML 語法標籤 (tag) ： HTML 標籤可以分成兩種，第一種

用來識別網頁上的元件或描述元件的樣式，第二種用來指向其它資源。

屬性 (attribute) ：除了 HTML 標籤本身所能描述的特性之外，大部分標籤還會搭配屬性，以提供更多資訊。<H1 COLOR="#FF0000" ALIGN="CENTER"> 快樂頌 </H1>

空白字元

起始標籤

屬性

值空白字元

屬性

值內容

結束標籤

值 (value) ：通常屬性會有一個值，而且這個值必須從預先定義好的範圍內選取。

巢狀標籤<H1>Happy<I>Birthday</I></H1>

<H1>Happy<I>Birthday</H1></I> 空白字元： HTML 瀏覽器會忽略標籤之間多餘

的空白字元或 Enter 鍵。特殊字元： HTML 文件中有一些特殊字元，例

如小於 (<) 、大於 (>) 、雙引號 (“) 、 & 和空白字元，必須要分別輸入 < 、 &gt ；、 " 、 & 、。

順序正確

順序不正確

11-4 　認識 HTML 語法

11-5 　編輯 HTML 網頁使用記事本編輯 HTML 網頁，但必須將副檔

名改為 .htm 。

HTML 網頁編輯完畢後，可以使用 Internet Explorer 進行瀏覽，也就是在網址列輸入 HTML 網頁的路徑，然後按 [Enter] 鍵。

11-6 　 HTML 網頁的整體架構 HTML 文件的整體架構可以分成三個部分－ HTML 版本宣告、標題宣告、文件主體，下面是一個例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd"><HTML> <HEAD> <TITLE> 我的第一個網頁 </TITLE> </HEAD> <BODY> Hello World! </BODY></HTML>

版本宣告

標題宣告

文件主體

<BODY>...</BODY> 標籤的重要屬性： ALINK = "#RRGGBB" 或 "...“ BACKGROUND = "URL“ BGCOLOR = "#RRGGBB" 或 "...“ LINK = "#RRGGBB" 或 "...“ SCROLL = "{YES,NO}“ TEXT = "#RRGGBB" 或 "...“ TITLE = "...“ VLINK = "#RRGGBB" 或 "..."

11-6 　 HTML 網頁的整體架構

11-7 　事件處理程式事件處理程序 (event handler) 指的是將瀏覽者的動作 ( 例如按下滑鼠或按鍵 ) 和 Script 程式連結，例如：

onLoad = "...“ onUnload = "...“ onClick = "...“ onDblClick = "...“ onMouseDown = "...“ onMouseUp = "...“ onMouseOver = "...“ onMouseMove = "...“ onMouseOut = "..."

onFocus = "...“ onBlur = "...“ onKeyPress = "...“ onKeyDown = "...“ onkeyUp = "...“ onSubmit = "...“ onReset = "...“ onSelect = "...“ onChange = "..."

11-7 　事件處理程式

11-8 　資料編輯與格式化 11-8-1 　設定標題格式

<HTML> <HEAD> <TITLE> 示範標題格式網頁 </TITLE> </HEAD> <BODY> <H1 ALIGN="LEFT"> 這是向左對齊的標題 1</H1> <H2 ALIGN="CENTER"> 這是置中的標題 2</H2> <H3 ALIGN="RIGHT"> 這是向右對齊的標題 3</H3> <H4>這是標題 4 (Heading 4)</H4> <H5>這是標題 5 (Heading 5)</H5> <H6>這是標題 6 (Heading 6)</H6> </BODY></HTML>

11-8-2 　設定段落格式 <HTML> <HEAD> <TITLE> 使用段落標籤的網頁 </TITLE> </HEAD> <BODY> <P> 天命之謂性，率性之謂道，修道之謂教。 </P> <P> 道也者，不可須臾離也；可離，非道也。 </P> <P> 是故，君子戒慎乎其所不賭，恐懼乎其所不聞。 </P> <P>莫見乎隱，莫顯乎微，故君子慎其獨也。 </P> </BODY></HTML>

11-8　資料編輯與格式化

11-8-3 　預先格式化段落 <HTML> <HEAD><TITLE> 示範預先格式化網頁 </TITLE></HEAD> <BODY> <PRE> #include <studio.h> void main() { printf("Hello World!\n") } </PRE> </BODY></HTML>


11-8-4 　註解

<HTML> <BODY>  </BODY></HTML>


11-8-5 　常見的文字格式 HTML 提供的文字格式標籤 <B> 粗體文字 <I> 斜體文字 <U> 加底線文字 <BIG> 大字型 <SUB> 下標文字 <SUP> 上標文字 <SMALL> 小字型 <EM> 強調斜體文字 <STRONG> 強調粗體文字 <DFN> 定義文字 <CODE> 程式碼文字


<SAMP> 範例文字 <KBD> 鍵盤文字 <VAR> 變數文字 <CITE> 引用文字 <ABBR> 縮寫文字 <ACRONYM> 頭字語 <STRIKE> 刪除字 <S> 刪除字 <TT> 打字機字體 <Q> 引用語

11-8-5 　常見的文字格式 11-8　資料編輯與格式化

11-8-6 　水平線

<HR> 標籤的重要屬性有： ALIGN = "{LEFT, CENTER, RIGHT}" ( 水平線

向左對齊、置中或向右對齊 ) COLOR = "#RRGGBB" 或 "..." ( 水平線顏色 ) SIZE = "n" ( 水平線高度 ) WIDTH = "n" ( 水平線寬度 ) 範例<HR COLOR="Green" ALIGN="LEFT" WIDTH="50%" SIZE

="5">


11-8-7 　文字字型、色彩與大小 <HTML> <BODY> <P>聽風在唱 </P> <P><FONT SIZE="1" COLOR="Green" FACE="華康細圓體 ">聽風在唱 </FONT></P> <P><FONT SIZE="2" COLOR="Purple" FACE="華康行書體 ">聽風在唱 </FONT></P> <P><FONT SIZE="3" COLOR="Red" FACE="華康流線體 ">聽風在唱 </FONT></P> <P><FONT SIZE="4" COLOR="Navy" FACE="華康娃娃體 ">聽風在唱 </FONT></P> <P><FONT SIZE="5" COLOR="Teal" FACE="華康彩帶體 ">聽風在唱 </FONT></P> <P><FONT SIZE="6" COLOR="Blue" FACE="華康布丁體 ">聽風在唱 </FONT></P> <P><FONT SIZE="7" COLOR="Olive" FACE="華康古印體 ">聽風在唱 </FONT></P> </BODY></HTML>


11-8-8 　項目符號與編號清單 <HTML> <BODY> <UL TYPE="CIRCLE"> <LI><FONT COLOR="#800000" FACE="華康行書體 ">射雕英雄傳 </FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體 ">神雕俠侶 </FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體 ">倚天屠龍記 </FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體 ">碧血劍 </FONT></LI> </UL> </HTML></BODY>


<HTML> <HEAD> <TITLE> 示範編號清單的網頁 </TITLE> </HEAD> <BODY> <OL TYPE="A"> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體 ">玩具總動員 </FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體 ">蟲蟲危機 </FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體 ">花木蘭 </FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體 ">泰山 </FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體 "> 小美人魚 </FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體 ">鐘樓怪人 </FONT></LI> </OL> </BODY></HTML>

11-8-8 　項目符號與編號清單 11-8　資料編輯與格式化

11-9 　超連結 11-9-1 　建立超連結

連結位於相同資料夾的文件例如 <A HREF="question.htm"> 常見問題集 </A>

連結位於不同資料夾的文件例如 <A HREF="Support\staff.htm">員工 </A>

連結 Web 上的文件例如 <A HREF="http://tw.yahoo.com/">雅虎奇摩 </A>

Supportabout.htm

staff.htm question.htm

My Web

11-9-2 　設定連結至 E-mail 地址的超連結當您設定連結至 E-mail地址的超連結時，除了要使

用 <A>…</A> 標籤的 HREF 屬性設定收件人的電子郵件地址，還要在電子郵件地址前面加上 mailto: 通訊協定，例如：

<A HREF="mailto:[email protected]">歡迎寫信給我們 </A>

11-9　超連結

11-10 　圖片 11-10-1 　插入圖片我們可以使用 <IMG> 標籤在網頁上插入圖片，其屬性如下： ALIGN = "{LEFT, RIGHT, TOP, MIDDLE, BOTTOM}" ALT = "..." BORDER = "n" 。 CONTROLS ： DYNSRC = "URL“ HEIGHT = "n" HSPACE = "n" ISMAP LONGDESC = "..." LOWSRC = "URL"

LOOP = "{n, INFINITE}" NAME = "..." SRC = "URL" 。 START = "{FILEOPEN, MOUSEOVER}" USEMAP = "URL" VRML = "..." VSPACE = "n" WIDTH = "n" 這個標籤亦接受 CLASS 、 ID 、 STYLE 、 TITLE 、 LANG 、 DI

R 、 onClick 、 onDblClick 、 onMouseDown 、 onMouseUp 、 onMouseOver 、 onMouseMove 、 onMouseOut 、 onKeyUp 、 onKeyPress等屬性。

11-10 　圖片 11-10-1 　插入圖片

11-10-2 　設定圖片的高度、寬度與框線 <HTML> <HEAD> <TITLE> 設定圖片的高度、寬度及框線 </TITLE> </HEAD> <BODY> <IMG SRC="mulan4.gif"> <IMG SRC="mulan4.gif" HEIGHT="136" WIDTH="120"> <IMG SRC="mulan4.gif" BORDER="3"> </BODY></HTML>

11-10　圖片

11-10-3 　設定圖片的對齊方式 <BODY> <P><IMG SRC="mulan1.jpg"> <FONT COLOR="Maroon" FACE="華康古印體 " SIZE="5">迪士尼最新動畫鉅獻 <IMG SRC="mulan2.jpg"></FONT></P> <P><FONT FACE="華康行書體 " SIZE="5" COLOR="Maroon">Mulan－花木蘭 </FONT></P> <P><FONT FACE="華康楷書體 W3">唧唧復唧唧，木蘭當戶織，不聞機杼聲，唯聞女嘆息。問女何所思？問女何所憶？女亦無所思，女亦無所憶 ......” 這首耳熟能響的木蘭詩，相信您我都背頌過，而今迪士尼將這個中國民間故事搬上動畫的舞台，就讓我們一起來回味一下吧！ </FONT></P></BODY>

11-10　圖片

在插入第一張圖片的敘述中加上 ALIGN = “LEFT” 屬性

在插入第一張圖片的敘述中加上 ALIGN = "RIGHT" 屬性

11-10-3 　設定圖片的對齊方式 11-10　圖片

在插入第一張圖片的敘述中加上 ALIGN = “TOP” 屬性

在插入第一張圖片的敘述中加上 ALIGN = "MIDDLE" 屬性


在插入第一張圖片的敘述中加上 ALIGN = "BOTTOM" 屬性


11-11 　表格 11-11-1 　插入表格

<TABLE>...</TABLE> 標籤：在 HTML 文件中標示一個表格

<TR>...</TR> 標籤：在表格中標示一列 (Row) <TD>...</TD> 標籤：在一列中標示一儲存格 <TH>...</TH> 標籤：在一列中標示一標題儲存格

11-11-2 　設定表格的對齊方式 <TABLE> 標籤的 ALIGN 屬性提供了 LEFT ( 靠左 ) 、 CENTER ( 置中 ) 、 RIGHT ( 靠右 ) 三種對齊方式。

11-11　表格

11-11-3 　設定表格的背景色彩與背景圖片

我們可以使用 <TABLE> 標籤的 BGCOLOR 、 BACKGROUND 屬性設定表格的背景色彩與背景圖片，例如 <TABLE BORDER=“1” BGCOLOR=“#FFEED2”> 是將表格的背景色彩設定為 #FFEED2 ， <TABLE BORDER=“1” BACKGROUND=“bg.gif”> 是將表格的背景圖片設定為 bg.gif 。

11-11　表格

11-11-4 　設定儲存格的對齊方式 <TABLE BORDER="1" WIDTH="100%"> <TR> <TD><IMG SRC="03.gif"></TD> <TD ALIGN="LEFT">向左對齊 </TD> <TD ALIGN="CENTER">水平置中 </TD> <TD ALIGN="RIGHT">向右對齊 </TD> </TR> <TR> <TD><IMG SRC="04.gif"></TD> <TD VALIGN="TOP">靠上對齊 </TD> <TD VALIGN="MIDDLE">垂直置中 </TD> <TD VALIGN="BOTTOM">靠下對齊 </TD> 　　　　　 </TR> <TR> <TD><IMG SRC="05.gif"></TD> <TD ALIGN="RIGHT" VALIGN="TOP">靠右上對齊 </TD> <TD ALIGN="CENTER" VALIGN="MIDDLE">水平垂直置中 </TD> <TD ALIGN="RIGHT" VALIGN="BOTTOM">靠右下對齊 </TD> </TR></TABLE>

11-11　表格

11-11-5 　設定儲存格的背景圖片與背景色彩如果要設定某一列儲存格、某一個儲存格或標題

儲存格的背景圖片與背景色彩，可以分別使用 <TR> 、 <TD> 、 <TH> 標籤的 BACKGROUND和 BGCOLOR 屬性，例如：

11-11　表格

Documents

計算機概論