網際網路應用 - 網頁設計與製作 1

1

網際網路應用 - 網頁設計與製作 1

教師 : 陳明瑤電郵 :[email protected]

2

本節內容提要

1. HTML 初步2. 圖文並茂3. 千變萬化的文字效果4. 跑馬燈5. 嵌入視窗

3

靜態文件

4

動態文件

5

主動式文件

6

HTML 文件結構在 HTML 文件中由小於 "<" 及大於 ">" 符號所組成的記號稱為標籤 (tag) 。

原來 HTML 文件不過就是和一般文字檔一樣 , 只是文字中夾雜一些特定的 HTML 標籤。當瀏覽程式在讀取我們的 HTML 文件時 , 就會依照各標籤所代表的意義 , 將其後的文字做出不同的特殊效果。

例如： <TITLE> 樹德科技大學 </TITLE>

7

HTML 文件基本架構

<HTML>

<HEAD> 文件資訊<TITLE> 標題 </TITLE>

</HEAD>

<BODY> 文件內容</BODY>

</HTML>

8

HTML 標籤概述標籤名稱都是英文且無大小寫之分。標籤分類：前後包夾型－這種標籤必須成對出現，例如：

<BODY>…</BODY> ，在兩個標籤間的文字就會被加上此標籤所定義的效果。

單槍匹馬型－這種標籤只需出現一次，例如：<BR> 、 <HR> 等。

9

HTML 基本標籤

1. <HTML></HTML> 文件的開始與結束

2. <HEAD></HEAD> 標示文件資訊

3. <BODY></BODY> 標示本文

4. <TITLE></TITLE> 文件標題

10

範例練習

11

範例結果顯示存檔後 , 用 IE 開啟該檔案：

12

簡單的格式變化在瀏覽器中，不管文句、段落的換行與空格一律依 HTML 標籤來安排文件的段落格式：

13

控制文章段落 -- <BR> 換行

14

不使用 <BR> 的換行

15

控制文章段落 -- <P> 分段

16

控制文章段落 -- <PRE> 保持原先的排列

17

控制文章段落 -- <HR> 分隔線

18

設定標題文字 -- <H1>..<H6>

設定標題的標籤共有 6 個 , 分別是 <H1> 、 <H2> 、…至 <H6> ，數字愈大 , 所顯示的文字愈小：

19

HTML 標籤屬性概述前面在介紹標籤時 , 只是在 “ <>” 中加入元素的名稱 , 其實很多元素還有屬性 (attribute)可供設定。加入屬性時的標籤格式如下：

屬性不一定只一個 , 有多個屬性時的寫法如下：

20

對齊文字— <P ALIGN> 設定對齊方向

21

對齊文字— <CENTER> 向中對齊

22

分格線 <HR> 標籤的變化

23

範例練習

24

範例結果顯示

25

連到其他網頁— <A> 建立超連結在 HTML 文件中要建立超文字連結的標籤為 <A> 標籤 (Anchor), 其使用方式如下：

26

連到其他網頁— <A> 建立超連結 (1/2)

例如要建立一個連向”樹德科技大學”首頁的連結 , 其做法如下：

<HTML><TITLE> 歡迎光臨 </TITLE><BODY><A HREF=http://www.stu.edu.tw> 樹德科技大學 </A></BODY></HTML>

http://www.stu.edu.tw/

27

連到其他網頁— <A> 建立超連結 (2/2)

在 <A> 和 </A> 標籤之間的”樹德科技大學”就會被瀏覽器以藍色的文字加上底線顯示 , 同時只需在這幾個字上按一下 , 便可直接上該網站：

28

連到其他網頁— <A> 建立本機檔案連結

如果要連結到本機中 , 位於同一個資料夾的其他檔案 , 則只須指定檔案名稱即可 ( 不需要加上 http) ：

如果檔案是在子資料夾內 , 再加上子資料夾名稱即可：

29

連到其他網頁— <A> 建立 E-mail 連結

常常可看到一種按了之後可寫信給該網站作者的連結 , 此種 URL 是用 mailto ：來指定 , 例如：

<A HREF=mailto:[email protected]>陳明瑤老師的信箱 </A>

30

大小寫的問題在使用 <A> 標籤建立與其它檔案的連結時 , 要特別注意檔案名稱的大小寫問題。因為目前多數的 WWW 主機都是使用 UNIX 系統 , 在 UNIX 系統中檔案名稱的大小寫是有區別的 , 所以在建立連結時 , 需特別注意 <A HREF="…"> 中所指的檔案名稱與主機上的檔案名稱大小寫要符合。

31

段落控制小結 HTML 文件製作基本標籤： <HTML>, <HEAD>, <BODY>, 和 <TITLE>

文章段落標籤： <BR>, <P>, <PRE>, <CENTER>, 和 <HR>

超連結標籤： <A>

32

圖文並茂— <IMG> 的基本用法

33

<IMG SRC=" 圖片檔的 URL“ …>

34

加邊框的超連結圖片 (1/2)

35

加邊框的超連結圖片 (2/2)

36

不加框的超連結圖片

37

調整圖片的大小— <IMG WIDTH=“寬度” HEIGHT=“高度” … >

38

設定圖片邊界寬– <IMG VSPACE=“ 上下間隔” …

>

VSPACE 屬性—設定圖片與文字間的上下間隔：

39

圖片加註解— <IMG ALT=“註解文字” … >

ALT 屬性的妙用是：如果圖片加上 <A> 標籤成為一個超連結 , 此時用 ALT 為它設個替代顯示的說明文字 , 說明這個圖片所指的是什麼樣的連結 , 就能讓沒有載入圖片的人知道按圖片可連到何處。

40

調整圖片位置小結 ALIGN=LEFT—靠左 ALIGN=RIGHT—靠右 ALIGN=BASELINE 或 ALIGN=BOTTOM— 對齊

文字底線排列 ALIGN=ABSBOTTOM— 對齊整行 (區塊 ) 最底端

排列 ALIGN=TOP— 對齊整行最頂端排列 ALIGN=TEXTTOP— 對齊文字部份最頂端排列 ALIGN=MIDDLE— 圖片中間線對齊文字中間線 ALIGN=ABSMIDDLE— 圖片中間線對準整列中間線

41

改變文件中的字體大小– <SMALL> 和 <BIG>

<SMALL> — 顯示小字體

<BIG> — 顯示大字體

42

設定文件中的字體大小– <FONT SIZE=“ 字體大小” … >

43

相對字型變更法使用加減數值的方式來指定：

44

<font> － color 屬性（文字顏色設定）

color 屬性可以用來設定文字的顏色，它同樣可以使用 16進制顏色表示法及關鍵字顏色表示法來設定屬性值。標籤屬性： <font> － color 屬性。功能：設定文字的顏色。格式：

<font color="關鍵字顏色表示法 ">…………………………</font>

<font color="#16進制顏色表示法 ">………………………… </font>

範例 <html> <head> <title><font> 字型顏色設定 </title> </head> <body> <center> <h1>相思 </h1> <font size="5" color="#0000FF">紅豆生南國， </font><br/> <font size="4" color="green">春來發幾枝， </font><br/> <font size="3" color="#FF0000">願君多采擷， </font><br/> <font color="#FF00CC" size="2"> 此物最相思。 </font> </center> </body> </html>

45

46

<H1>..<H6> 與 <FONT …> 的不同

Headings FONT

字體的尺寸H1, H2, H3, H4, H5, H6

Size=7, 6, 5, 4, 3, 2, 1

字體的加粗會將顯示字體做加粗效果

不將顯示字體做加粗效果

分行的效果視為獨立段落 , 會換行

不會換行

47

字型樣式— <B> 粗體字

48

字型樣式— <I> 斜體字

49

字型樣式— <U> 文字加底線， <STRIKE> 文字加橫線

50

字型樣式— <SUB> 下標字， <SUP> — 上標字

51

具有特殊含意的標籤

52

在 HTML 文件中顯示保留符號

符號語法

＜ &lt

＞ &gt

＆ &amp

” &quot

53

在文件中顯示特殊字元 (1/2)

54

在文件中顯示特殊字元 (2/2)

55

文字小結加入圖片的標籤： <IMG> <IMG> 處理圖片的屬性： SRC, LOWSRC,

BORDER, HEIGHT, WIDTH, VSPACE, HSPACE, ALT, 和 ALIGN

改變字型及字體大小的標籤： <BIG>, <SMALL>, <BASEFONT>, 和 <FONT>

<FONT> 處理字型的屬性： SIZE, 和 FACE改變字型樣式的標籤： <B>, <I>, <TT>, <U>,

<STRIKE>, <SUB>, 和 <SUP>

5656

標籤 <MARQUEE>

跑馬燈是一種動態的文字效果，可使文字隨時間依一定的規則變化移動。利用<MARQUEE> 標籤，並加上一些文字即可。

範例：<MARQUEE DIRECTION=LEFT >這段跑馬燈會反覆不停地由右至左捲動</MARQUEE><P>

5757

BEHAVIOR 屬性標記 <MARQUEE> 的 BEHAVIOR 屬性可以控制跑

馬燈的捲動效果。 SCROLL 的效果使文字由最右方一個接一個字的出現，然後

再逐一消失，它是預定的顯示方式。 SLIDE 效果使文字捲進來後碰到邊界就停住不再移動。

<MARQUEE BEHAVIOR=SLIDE> 我是滑動的方式，你只能看一次喔 !</MARQUEE><P>

ALTERNATE 效果使文字在限定的範圍內左右交替移動。 <MARQUEE BEHAVIOR=ALTERNATE> 我會“反彈”喔！

</MARQUEE><P> LOOP 則可控制跑馬燈捲動的次數。範例：

<MARQUEE BEHAVIOR=SCROLL LOOP=3> 我只重覆 3次喔 !</MARQUEE><P>

5858

DIRECTION 屬性標記 <MARQUEE> 的 DIRECTION 屬性控制跑馬燈捲動方向。

LEFT 代表向左捲動 RIGHT 代表向右捲動

BGCOLOR 屬性可改變跑馬燈的背景顏色。文字顏色以 <FONT COLOR=#rrggbb> 設定範例

<MARQUEE DIRECTION=LEFT> 我往左跑 </MARQUEE><P> <MARQUEE DIRECTION=RIGHT> 我往右跑 </MARQUEE><P> <MARQUEE

BGCOLOR=YELLOW> 我有黃色的背景 </MARQUEE><P> <FONT COLOR=#ffff00><MARQUEE BGCOLOR=#0000ff> 我有

藍色的背景，黃色的字 </MARQUEE><P></FONT>

5959

WIDTH 屬性標記 <MARQUEE> 的 WIDTH 屬性可以改變跑馬燈

的寬度，而 HEIGHT 則可以改變高度。 SCROLLAMOUNT 代表跑馬燈中文字每次移動的距

離 ( 單位是像素 ) ，而 SCROLLDELAY 則代每次移動間相隔的時間 ( 單位是千分之一秒 ) 。

範例 <MARQUEE BGCOLOR=#FFFF00 HEIGHT=40

WIDTH=50%> 這是一段背景為黃色的文字跑馬燈 </MARQUEE><P>

<MARQUEE SCROLLAMOUNT=100> 我跑很快喔 !</MARQUEE><P>

<MARQUEE SCROLLDELAY=500> 我走很慢耶 !</MARQUEE><P>

6060

標籤 <IFrame>

<Frame> 標籤無法和 <BODY> 標籤共用，針對此一缺點， IE 提出了 Inline Frame 的概念。IE 可以讓您在 <BODY> 標籤中加入分割視窗(Frame) ，此時的分割視窗就好像 <IMG> 標籤所加入的圖片一般，稱為 Inline Frame

範例： <IFRAME SRC=“http://www.hinet.net”> 請使用

Internet Explorer 或 Firefox 否則您看不到 inline frame 的效果 </IFRAME>

6161

<IFRAME> 的屬性 ALIGN 嵌入視窗與文字的對齊方式，有 Left, Right, Top, Middle,

Bottom 範例 <IFRAME SRC="http://www.hinet.net" ALIGN=right></IFRAME>

FRAMEBORDER 設定嵌入視窗是否顯示邊框，預設值為１；設定為０則不顯示邊框範例 <IFRAME SRC="http://www.hinet.net" frameborder=0></IFRAME>

HEIGHT 設定嵌入視窗的高度範例 <IFRAME SRC="http://www.hinet.net" height=300 width=400></IFRAME>

WIDTH 設定嵌入視窗的寬度 SCROLLING 設定嵌入視窗是否顯示捲軸，有 YES, NO, AUTU

(預設值 )三種範例 <IFRAME SRC="http://www.hinet.net" scrolling=no></IFRAME>

6262

<IFRAME> 的屬性 NAME 設定嵌入視窗的名稱，加上超連結時可以和

TARGET 配合使用，範例： <a href="http://www.hinet.net"

target="SMALLWINDOW"> 中華電信 </a>　 <a href="http://www.kimo.com.tw"

target="SMALLWINDOW">奇摩站 </a>　 <a href="http://www.yam.com.tw"

target="SMALLWINDOW">蕃著藤 </a> <P>

<IFRAME SRC=“http://www.hinet.net” name=“SMALLWINDOW” ALIGN=CENTER WIDTH=400 HEIGHT=300> 要用 ie才看得到喔 </IFRAME> <P>

6363

範例 main.htm<html> <head> <title> </title> </head> <frameset cols=30%,70%> <frame src="left.htm"name="left”> <frame src="right.htm"name="right”> </frameset> </html>

6464

範例 left.htm<html> <body background=face.jpg> < marquee > 我是跑馬燈 ! </marquee ><P> < marquee behavior=slide> 我走一次就靠在左邊休息了 </marquee > <p> </body></html>

6565

範例 right.htm<html> <body bgcolor=yellow> <marquee direction=left behavior=scroll loop=3> 我走 3 次喔

</marquee><P> <marquee behavior=alternate> 我會反彈喔 </marquee><p><hr> <font color=#FF00FF><marquee direction=left bgcolor=pink

fontcolor> 我會往左 </marquee></font><P> <font color=#FF0000><marquee direction=right

bgcolor=gray HEIGHT=40 WIDTH=50%> 我會往右 </marquee></font><P><hr>

</body></html>

6666

範例 right.htm續<iframe src="http://www.yam.com.tw"

height=200 width=300> </iframe><P>

<iframe src="http://www.yahoo.com.tw" height=200 width=300> </iframe><P>

67

實作練習1. 請展示你所做的網頁，並向老師說明你學習

的心得或困難點。

Documents

網際網路應用 - 網頁設計與製作 1