认识网页的基本概念Word格式文档下载.docx

认识网页的基本概念Word格式文档下载.docx

《认识网页的基本概念Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《认识网页的基本概念Word格式文档下载.docx（10页珍藏版）》请在冰豆网上搜索。

body>

…………………..

/body>

/html>

●設定格式的標籤

⏹<

P>

br>

pre>

<

/pre>

●用16進位法改變字體的顏色

⏹Ex:

fontcolor=”#AABBCC”>

test<

/font>

◆以3個bytes分別代表Red,Green,Blue之色碼，

在上例中，AA-->

forRed,BB-->

forGreen,CC-->

forBlue

Ch.2美化網頁

●設定文字編排方式的tag

center>

/center>

可以針對任何物件將其置中

palign=center>

/p>

palign=right>

●設定背景顏色的tag

bodybgcolor=某個顏色之名稱>

Ch.3網頁間的橋樑—超連結標籤

●相對連結（檔名或路徑）

index.htm

gif\sample.jpg

●絕對連結（網址）

http:

//www2.tku.edu.tw/~tmbx

●設定連結的標籤

ahref=”欲連結網頁的檔名或路徑”>

………<

/a>

ahref=”index.htm”>

企管系首頁<

ahref=”gif\sample.jpg>

企二A全家福<

ahref=”網址”>

………..<

ahref=http:

//www2.tku.edu.tw/~tmbx>

淡大企管系<

●設定超連結顏色的標籤

bodylink=某種顏色>

定義未開啟的連結為某種顏色

bodyvlink=某種顏色>

定義已經開啟過的連結為某種顏色

◆上述兩種tag，關於顏色可以下列兩種方式表示

●1.各種顏色之英文字

⏹諸如：

green,blue,red,pink,yellow,…….

●2.顏色代碼（3個bytes,分別代表RGB三原色）

●Ex:

bodylink=greenvlink=red>

Ch.4網頁中的圖片應用

●匯入圖檔的tag

imgsrc=”圖片路徑或網址”alt=”說明文字”>

imgsrc=”圖片路徑或網址”width=xx>

定義圖片顯示之寬度

imgsrc=”圖片路徑或網址”height=xx>

定義圖片顯示之高度

◆ex:

imgsrc=”http:

//www.tku.edu.tw/images/logo3.jpg”>

//www.tku.edu.tw/images/logo1.jpg”width=400height=300>

●設定圖片靠左或靠右的tag

imgsrc=”圖片路徑或網址”align=left>

設定圖片靠左

●設定圖片與文字間隔的tag

imgsrc=”圖片路徑或網址”hspace=xx>

設定圖片與文字的間隔

●替圖片設定連結屬性

ahref=”相對連結或絕對連結之網址”>

imgsrc=”圖片路徑或網址”>

讓圖片能被click而開啟另一超連結文件

●設定圖片邊框的tag

imgsrc=”圖片路徑或網址”border=xx>

◆<

imgsrc=”sample.jpg”border=0>

●將圖片設為網頁背景的tag

bodybackground=”圖片路徑或網址”>

Ch.5CSS—讓網頁中之文字與版面更有創意

●CSS：

CascadingStyleSheets，用來改善HTML在文字樣式與版面編排方面的限制，

使原本單調的文字能變化多端，讓網頁中即使沒有圖片，也有炫麗的效果，

而且所需要的網頁空間遠比加入圖片的網頁還來得少。

CSS能夠讓文字活起來的主要原因是，其可以將文字以圖層的方式做出重疊

的效果，而且可擺在任何妳（你）想擺的位置。

●宣告CSS開始的標籤

styletype=”text/css”>

●CSS的基本語法有有兩種：

⏹.定義名稱{屬性名稱：

屬性設定}

⏹定義名稱{屬性名稱：

●宣告套用CSS定義的開始及結束之標籤：

divclass=”欲套用的CSS定義”>

內容<

/div>

●CSS的用法

⏹font-family:

定義文字字型

⏹font-weight:

定義字體寬度

⏹font-size:

定義文字大小

⏹color:

定義文字顏色

⏹position:

absolute定義物件出現在指定位置

⏹top:

npx表示物件要在距離網頁上方起第n個像素的位置開始出現

⏹left:

npx表示物件要在距離網頁左方起第n個像素的位置開始出現

⏹z-index:

n表示將該物件設為第n層

⏹body{background:

顏色代碼}定義背景顏色

⏹A:

Link表示要建立對超連結的定義

實例：

html>

ThisisaCSStestpage<

body{background:

#6B8E23}

.title{font-family:

verdana,arial,Helvetica;

font-weight:

bold;

font-size:

48pt;

color:

#FFFFFF;

position:

absolute;

top:

30px;

left:

120px;

z-index=1}

.titlefore{font-family:

font-size=14pt;

color=black;

position=absolute;

top=80px;

left=190px;

z-index=2

}

A:

Link{font-family:

arial,Helvetica;

text-decoration:

none;

color=#B0B0B0}

/style>

divclass="

titlefore"

>

WanttoHaveAHomepage<

title"

IDo<

ahref="

http:

//www.tku.edu.tw"

TamkangUniversity<

Ch.6讓網頁內容更整理俐落

●製作「條列式」選項的標籤

ul>

….<

/ul>

-->

標示出全部「條列式」選項的範圍

li>

/li>

標示每一選項的的範圍

ol>

…<

/ol>

標示出要自動編號的範圍

lh>

/lh>

定義出條列式選項的標題

ex:

義大利麵的種類：

蝴蝶麵

寬麵

千層麵

通心粉

長條形義大利麵

●製作表格的標籤

table>

/table>

-->

宣報表格的開始與結束

tr>

表示要畫出一表格列

td>

表示要在表格列中畫出儲存格

●定義表格的外貌（在table標籤為之）

⏹定義表格格線的粗細

◆border=x

⏹定義表格寬度

◆width=xxx

⏹定義表格高度

◆height=xxx

⏹定義Cell與Cll之間的寬度

◆cellspacing=xxx

⏹定義內容距離Cell邊界之間隔

◆cellpadding=xxx

⏹Ex1:

tableborder=1width=400height=300>

Ex2:

週一

週二

週三

週四

週五

週六

第11節

管科

資處

品管

第12節

資管

人管

第13節

體育

第14節

Ch.8分割視窗的技巧

●分割（framing）視窗是由一個主頁面與若干個副頁面所組成

⏹主頁面：

負責規劃空間

⏹副頁面：

負責提供內容

●設定框架（frame）的標籤：

frameset>

：

宣告框架（frame）開始及結束

/frameset>

宣告框架（frame）結束

⏹定義框架

相關可設定之框架屬性如下

◆frameborder=no：

將框架設定為無框線

●若yes，則設定為有框線

⏹此時，可以用border=n來控制框線的寬度，n>

1

◆framespacing=0：

表示框架間的距離為0

◆cols=n：

表示要將視窗作直向分隔，可為絕對數值或視窗比例

◆rows=n：

表示要將視窗作橫向分隔，可為絕對數值或視窗比例

◆name=任何英文名：

表示要替框架命名

◆scrolling=yesorno：

設定框架是否需要捲軸

◆scrolling=auto：

由browser自行判斷是否加入捲軸

⏹設定連結目標的方法

◆target=任何網頁名稱設定這個連結所指向的網頁內容要放在那個框架中

●ex:

ahref=target=frame_name>

Google<

//www.ibm.tku.edu.tw/indexup.htm

Ch.9申請免費的網頁空間

●.tw/free.htm

●

Ch.10讓網站更豐富的小東西

●自動換頁

<

metahttp-equiv="

refresh"

content="

20;

url=main.php"

●申請免費「訪客計數器」（counter）

●教學網站之網上參考資料有相關連結

●亦可用搜尋引擎找尋提供免費計數器之網站

●推薦中山大學所提供之計數器（簡明好用）

imgsrc="

//counter.nsysu.edu.tw/Count.cgi?

dd=12"

⏹詳細可瀏覽http:

//counter.nsysu.edu.tw

●申請免費「留言版/討論區」

●http:

//www.don-.tw/

《表單幕後的推手》

●CGI（CommonGatewayInterface）

Ø

表單在Client與Server互動過程中，負責扮演收集使用者輸入的資料的角色

⏹ex:

計算稅額、心理測驗、留言版、討論區、搜尋表單、顧客意見回覆…..

而真正在背後作接收、傳遞、處理、回應工作的，就是一種叫做CGI（CommonGateInterface）的通訊協定。

一般情況，如果想要在網頁中加入表單，就必須自己撰寫或使用現成的CGI程式

要撰寫CGI程式大都使用C、C++、Perl……等程式語言限制一

一般而言，伺服器的管理者並不見得會允許user將一些CGI程式放上去限制二

⏹因為CGI程式是在server端執行，但是一些設計不良的CGI程式，在執行時，可能會造成整個WWW伺服器主機的運作發生問題，甚至當機

CGI程式對不同的WebServer並不相容限制三

●ASP（ActiveServerPages）PHP（）

ASP技術的運作和CGI類似，當user透過browser將表單資料送到伺服器，伺服器就會開始處理該ASP網頁中對應的Script程式，然後將處理結果轉成HTML格式再傳回user端的瀏覽器。

⏹ASP網頁可以在一般的文書編輯軟體中使用

⏹由於ASP程式是在Server端執行Script程式，再將結果以標準的HTML格式送到user端的browser，因此，比較不用擔心瀏覽器的相容問題。

⏹但是，ASP程式的執行仍會加重server的負擔，因此，有些伺服器的管理者可能會限制ASP程式的使用。

●FrontPageserverextension

使用FrontPage來設計網頁，只要server端有安裝FrontPageserverextension，即使不會撰寫CGI或ASP程式，也能設計出功能完整的表單，以及：

⏹計數器

⏹便利的上傳功能

⏹直接編輯網站上的網頁

●JavaScript

Netscape為要補HTML的不足，使網頁能有動態的效果，因此開發JavaScript這種ScriptingLanguage（描述語言）

其結構不像正統的程式語言那麼嚴謹，因此一般大眾，很容易上手

不過它還是有限制的，例如不能作寫入檔案、開啟新檔（cookie除外）等動作

⏹所以user可以不用擔心電腦病毒會經由JavaScript進到電腦中

●Java

Java是製作「動態網頁」的另一項選擇

使用Java可產生所謂的Applet程式

Applet可以加到網頁中以製作特殊效果

Applet也可以用來連接資料庫，提供原來HTML標籤所無法辦到的功能