ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)教程課件(完整版)

1、ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)教程 1內(nèi) 容 簡(jiǎn) 介 本書從實(shí)用的角度介紹了網(wǎng)站架設(shè)與網(wǎng)頁(yè)制作的相關(guān)技術(shù)。全書共分11章：第1章介紹了互聯(lián)網(wǎng)的基礎(chǔ)知識(shí)；第2章介紹了IIS網(wǎng)站規(guī)劃與管理；第3章是對(duì)HTML的簡(jiǎn)介；第4章介紹了VBScript的用法；第5章介紹了ASP的基礎(chǔ)知識(shí)及簡(jiǎn)單應(yīng)用；第6章介紹了HTML表單與ASP的應(yīng)用；第7章介紹了ASP中的對(duì)象；第8章介紹了ASP與SQL Server的結(jié)合；第9章介紹了數(shù)據(jù)庫(kù)查詢的技巧；第10章介紹了如何訪問文本文件；第11章是一個(gè)綜合的設(shè)計(jì)實(shí)例。書2內(nèi) 容 簡(jiǎn) 介 中每一章的例題幾乎都與網(wǎng)站常用的功能有關(guān)，例如計(jì)數(shù)器、在線交易、動(dòng)態(tài)切換網(wǎng)頁(yè)、密碼修改、聊天室等

2、，方便讀者學(xué)以致用。 本書適合作為高職高專相關(guān)網(wǎng)站架設(shè)和網(wǎng)頁(yè)制作課程的教材。也可作為對(duì)網(wǎng)站架設(shè)和網(wǎng)頁(yè)制作感興趣的初、中級(jí)讀者的參考書籍。3目錄第1章 認(rèn)識(shí)互聯(lián)網(wǎng)第2章 IIS網(wǎng)站規(guī)劃與管理第3章 HTML簡(jiǎn)介第4章 VBScript第5章 ASP的第一次接觸第6章 HTML表單與ASP第7章 ASP對(duì)象4目錄第8章 ASP與SQL Server第9章 數(shù)據(jù)庫(kù)查詢的技巧第10章 文本文件的訪問第11章 設(shè)計(jì)實(shí)例5參考文獻(xiàn)1志凌團(tuán)隊(duì)，陳世明，江高舉編著. ASP從入門到精通. 北京：中國(guó)鐵道出版社，20012榮欽科技主筆室編著. ASP入門與應(yīng)用. 北京：中國(guó)鐵道出版社，20013黃剛等編著. M

3、acromedia Studio MX網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)教程. 北京：清華大學(xué)出版社，20034林義證等編著. HTML與ASP網(wǎng)頁(yè)制作教程. 北京：中國(guó)鐵道出版社，20006第1章 認(rèn)識(shí)互聯(lián)網(wǎng)ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)教程第1章 認(rèn)識(shí)互聯(lián)網(wǎng) 國(guó)際互聯(lián)網(wǎng)自1996年開始蓬勃地發(fā)展，發(fā)展初期都是以靜態(tài)網(wǎng) 站為主，主要提供公司基本信息、產(chǎn)品的介紹等，這種純粹以提供 信息為主的網(wǎng)站，是第一代互聯(lián)網(wǎng)的基本特點(diǎn)。后來(lái)在美國(guó)由華人 楊智遠(yuǎn)領(lǐng)軍的 Yahoo 網(wǎng)站，在網(wǎng)絡(luò)上提供網(wǎng)站黃頁(yè)簿分類檢索的服 務(wù)(類似電信局的電話簿)，讓網(wǎng)友通過 Yahoo 的搜索引擎(Search Engine)快速地在茫茫網(wǎng)海中找到所要的信息

4、，而逐漸在網(wǎng)絡(luò)上嶄 露頭角，并得到全球上網(wǎng)人士的青睞，成為第二代網(wǎng)絡(luò)應(yīng)用的主流。到了最后，由于網(wǎng)站具有全球可用及全球統(tǒng)一的用戶界面，因此許多的企業(yè)將原本在局域網(wǎng)使用的數(shù)據(jù)庫(kù)，移植到互聯(lián)網(wǎng)上，并與電子商務(wù)結(jié)合而成為第三代網(wǎng)站的主要應(yīng)用。 本章主要以介紹Windows XP架設(shè)IIS(Internet Information Server)網(wǎng)站為基礎(chǔ)，針對(duì)架設(shè)Web網(wǎng)站所需的相關(guān)知識(shí)做一個(gè)基本的介紹，讓讀者可以輕松及快速地進(jìn)入網(wǎng)絡(luò)世界的實(shí)際應(yīng)用層次。 8第1章 認(rèn)識(shí)互聯(lián)網(wǎng)1.1 什么是互聯(lián)網(wǎng)1.2 架站所需配置1.3 網(wǎng)站服務(wù)器1.4 完整的運(yùn)行流程91.1 什么是互聯(lián)網(wǎng) 互聯(lián)網(wǎng)(Internet

5、)是以標(biāo)準(zhǔn)的TCP/IP通訊協(xié)議為基礎(chǔ)，將分布在全球各地的局域網(wǎng)串聯(lián)在一起，完成資源共享的網(wǎng)絡(luò)世界。目前全世界約有千萬(wàn)個(gè)主機(jī)串聯(lián)在互聯(lián)網(wǎng)上，形成一個(gè)相連的Internet世界，這些主機(jī)是由個(gè)人、教育機(jī)構(gòu)及企業(yè)用戶等相關(guān)單位所設(shè)立，通過Internet可以達(dá)到資源共享的目的。 101.1 什么是互聯(lián)網(wǎng) 1.1.1 互聯(lián)網(wǎng)的架構(gòu)1.1.2 客戶端上網(wǎng)所需的配置111.1 什么是互聯(lián)網(wǎng)1.1.1 互聯(lián)網(wǎng)的架構(gòu) 互聯(lián)網(wǎng)的硬件架構(gòu)如下圖所示: 121.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置 下面是個(gè)人撥號(hào)上網(wǎng)所需準(zhǔn)備的軟、硬件設(shè)備：（1）個(gè)人計(jì)算機(jī)（2）調(diào)制解調(diào)器（3）電話線（4）操作系統(tǒng)（5

6、）瀏覽器（6）向ISP公司申請(qǐng)一個(gè)上網(wǎng)的賬號(hào)（7）設(shè)置撥號(hào)上網(wǎng)的參數(shù) 131.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置1. 個(gè)人計(jì)算機(jī)個(gè)人計(jì)算機(jī)上網(wǎng)所需的基本配置建議如下：Pentium II以上的CPU； 64 MB以上的內(nèi)存；3.5英寸軟驅(qū)；4.3 GB以上的硬盤；32倍速以上的光驅(qū)；一個(gè)鼠標(biāo)； 101鍵的標(biāo)準(zhǔn)鍵盤； 56K調(diào)制解調(diào)器；Windows操作系統(tǒng)；Internet Explorer瀏覽器(已內(nèi)置于操作系統(tǒng)中)141.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置2. 調(diào)制解調(diào)器 調(diào)制解調(diào)器是一種數(shù)字與模擬信息轉(zhuǎn)換的設(shè)備，個(gè)人計(jì)算機(jī)可以處理的是數(shù)字信息，而數(shù)據(jù)通過電話線

7、傳輸至遠(yuǎn)程時(shí)必須轉(zhuǎn)換為模擬信號(hào)，當(dāng)另一端收到模擬信號(hào)時(shí)，必須通過調(diào)制解調(diào)器再將模擬信號(hào)轉(zhuǎn)為數(shù)字信號(hào)后，交給計(jì)算機(jī)處理。 151.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置3. Windows操作系統(tǒng) 操作系統(tǒng)是個(gè)人計(jì)算機(jī)必備的軟件，通常個(gè)人計(jì)算機(jī)的硬件廠商均會(huì)隨機(jī)附贈(zèng)Windows操作系統(tǒng)，例如Windows 98，Windows 2000或Windows XP等。 另外，由于互聯(lián)網(wǎng)采用TCP/IP通訊協(xié)議，因此您的操作系統(tǒng)一定要安裝TCP/IP通訊協(xié)議，才可以連接上網(wǎng)。 161.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置4. 瀏覽器 Microsoft網(wǎng)絡(luò)探險(xiǎn)家瀏覽器的用戶界面如

8、下圖所示。 171.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置5. ISP ISP即為互聯(lián)網(wǎng)服務(wù)提供者(Internet Service Provider)，它主要是提供企業(yè)及個(gè)人用戶撥號(hào)上網(wǎng)的服務(wù)，當(dāng)您準(zhǔn)備好個(gè)人計(jì)算機(jī)等相關(guān)配置后，必須向ISP申請(qǐng)一個(gè)賬號(hào)，方能利用Modem撥號(hào)上網(wǎng)。當(dāng)然，也可以直接申請(qǐng)ADSL或其它專線服務(wù)，國(guó)內(nèi)的ISP企業(yè)如163、236等。 181.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置6. IP 地址 在TCP/IP通訊協(xié)議的Internet環(huán)境上，每一部計(jì)算機(jī)主機(jī)均有一個(gè)地址（用以代表該主機(jī)），此地址是由四段0255的數(shù)字所組成，例如29，這組數(shù)字

9、稱為IP 地址。 說(shuō)明：撥號(hào)上網(wǎng)時(shí)，個(gè)人計(jì)算機(jī)的IP是由ISP主機(jī)動(dòng)態(tài)指定，因此每次上網(wǎng)的地址均不相同，只有固定式的用戶才有固定的IP地址。 191.2 架站所需配置 個(gè)人利用個(gè)人計(jì)算機(jī)及ADSL線路架設(shè)Web網(wǎng)站，其架構(gòu)最為簡(jiǎn)單，如下圖所示。 201.2 架站所需配置 若是小型公司架站的話，目前有一種利用ADSL架站的服務(wù)，它同時(shí)可讓公司的多部個(gè)人計(jì)算機(jī)同時(shí)上網(wǎng)(ISP會(huì)提供5個(gè)IP地址)，利用該方案提供的路由器或集線器，即可立即連接到Internet。其系統(tǒng)架構(gòu)如下圖所示。 211.2 架站所需配置 若是企業(yè)用戶架站，則系統(tǒng)的需求較為復(fù)雜，僅有Web 網(wǎng)站需求的企業(yè)，可參考的網(wǎng)站架構(gòu)如下圖

10、所示。 221.3 網(wǎng)站服務(wù)器 1.3.1 瀏覽器與網(wǎng)站服務(wù)器的關(guān)系1.3.2 Web Server與數(shù)據(jù)庫(kù)服務(wù)器 231.3 網(wǎng)站服務(wù)器1.3.1 瀏覽器與網(wǎng)站服務(wù)器的關(guān)系 Web技術(shù)架構(gòu)在主從 (Client/Server) 架構(gòu)的環(huán)境下，Client 端用戶接口的標(biāo)準(zhǔn)為瀏覽器，Server 端則是網(wǎng)站服務(wù)器(Web Server)。Client 端與 Server端通過HTML語(yǔ)言溝通，達(dá)到信息共享的目的，如下圖所示。瀏覽器與 Web Server間的通訊是采用標(biāo)準(zhǔn)的HTTP通訊協(xié)議。241.3 網(wǎng)站服務(wù)器1.3.2 Web Server與數(shù)據(jù)庫(kù)服務(wù)器 在電子商務(wù)網(wǎng)站中，數(shù)據(jù)庫(kù)與 Web

11、 Server 均為獨(dú)立 的主機(jī)，當(dāng)客戶通過瀏覽器進(jìn)行下載時(shí)，系統(tǒng)的運(yùn)作流 程如下圖所示。 251.4 完整的運(yùn)行流程 Web的詳細(xì)運(yùn)行流程整理如下：（1）客戶撥號(hào)上網(wǎng)。（2）打開瀏覽器，輸入網(wǎng)址，如 （此為新浪網(wǎng)的網(wǎng)址）。（3）瀏覽器發(fā)出Request信息，向“新浪”網(wǎng)站要求提供主頁(yè) 的HTML文件。（4）“新浪”的 Web Server 讀取主頁(yè)(Home Page)，并返 回信息給瀏覽器。（5）瀏覽器解析 Web Server 送來(lái)的主頁(yè)(HTML文件)， 根據(jù)主頁(yè)的 HTML文件的內(nèi)容，編排輸出格式后顯示 在瀏覽器的畫面上，完成整個(gè)流程。 26第1章 認(rèn)識(shí)互聯(lián)網(wǎng) 相信讀者看完本章，對(duì)互

12、聯(lián)網(wǎng)的運(yùn)作已有初步的了解，對(duì)于閱讀后續(xù)的章節(jié)將有相當(dāng)大的幫助，您若對(duì)互聯(lián)網(wǎng)有興趣的話，可以到W3C的網(wǎng)站查詢相關(guān)技術(shù)數(shù)據(jù)。27第2章 IIS網(wǎng)站規(guī)劃與管理 ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)教程第2章 IIS網(wǎng)站規(guī)劃與管理 Web Server是網(wǎng)絡(luò)系統(tǒng)平臺(tái)上最重要的組件之一，由于Windows XP與Unix操作系統(tǒng)上的差異，IIS除提供標(biāo)準(zhǔn)的CGI接口以外，還為利用Windows操作系統(tǒng)特有的DLL模塊，提供了特別量身訂做的ISAPI接口，以提高整個(gè)IIS的運(yùn)行效率。 本章我們將針對(duì) IIS 的基本硬件需求、網(wǎng)站的規(guī)劃管理，為讀者介紹 Internet 服務(wù)管理器等相關(guān)工具的使用說(shuō)明，讓您在管理Web S

13、erver時(shí)，更得心應(yīng)手。29第2章 IIS網(wǎng)站規(guī)劃與管理 2.1 什么是IIS2.2 Internet服務(wù)管理器302.1 什么是IIS IIS全名為Internet Information Server，它是為微軟針對(duì)Windows NT操作系統(tǒng)所設(shè)計(jì)的Web Server，其最大特色是可與Windows NT做緊密的結(jié)合。 312.1 什么是IIS 2.1.1 軟硬件需求 2.1.2 IP地址的查詢及設(shè)置 322.1 什么是IIS2.1.1 軟硬件需求 1. 硬件需求 CPU：Pentium II以上，速度越快越好(也要考慮成本)。 內(nèi)存：基本需求為128 MB，建議安裝256 MB以上

14、。 硬盤：建議采用SCSI硬盤，例如UltraSCSI-3的硬盤。 2. 軟件需求 操作系統(tǒng)：Windows XP Professional。 網(wǎng)站服務(wù)器：IIS 5.1。 安裝SMTP服務(wù)。 安裝FTP服務(wù)。 332.1 什么是IIS2.1.2 IP地址的查詢及設(shè)置 有關(guān)TCP/IP中IP的設(shè)置步驟，請(qǐng)參考如下: 1.342.1 什么是IIS2.1.2 IP地址的查詢及設(shè)置2.352.1 什么是IIS2.1.2 IP地址的查詢及設(shè)置3.362.2 Internet服務(wù)管理器 Internet服務(wù)管理器是Microsoft針對(duì)互聯(lián)網(wǎng)相關(guān)的服務(wù)，例如WWW、FTP、SMTP等服務(wù)所提出的管理工具

15、，通過它我們可以管理各種Internet的服務(wù)。本節(jié)要介紹的Internet服務(wù)管理器內(nèi)容如下：372.2 Internet服務(wù)管理器 2.2.1 監(jiān)視系統(tǒng)運(yùn)行狀態(tài) 2.2.2 設(shè)置主目錄2.2.3 調(diào)整默認(rèn)的Web文檔2.2.4 停止Web Server服務(wù)2.2.5 重新啟動(dòng)Web Server服務(wù)2.2.6 新建虛擬目錄 2.2.7 Web的日志 382.2 Internet服務(wù)管理器2.2.1 監(jiān)視系統(tǒng)運(yùn)行狀態(tài) 操作步驟如下： 1.392.2 Internet服務(wù)管理器2.2.1 監(jiān)視系統(tǒng)運(yùn)行狀態(tài)2.402.2 Internet服務(wù)管理器2.2.1 監(jiān)視系統(tǒng)運(yùn)行狀態(tài)3.412.2 In

16、ternet服務(wù)管理器2.2.1 監(jiān)視系統(tǒng)運(yùn)行狀態(tài)4.WWW服務(wù)的狀態(tài)為運(yùn)行中 422.2 Internet服務(wù)管理器2.2.1 監(jiān)視系統(tǒng)運(yùn)行狀態(tài)5.可以看到“默認(rèn)網(wǎng)站”中所有的目錄信息 432.2 Internet服務(wù)管理器2.2.2 設(shè)置主目錄 操作步驟如下： 1.442.2 Internet服務(wù)管理器2.2.2 設(shè)置主目錄2.452.2 Internet服務(wù)管理器2.2.3 調(diào)整默認(rèn)的Web文檔 操作步驟如下： 1.462.2 Internet服務(wù)管理器2.2.3 調(diào)整默認(rèn)的Web文檔2.472.2 Internet服務(wù)管理器2.2.4 停止Web Server服務(wù)482.2 Inter

17、net服務(wù)管理器2.2.5 重新啟動(dòng)Web Server服務(wù)492.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 虛擬目錄是采用“別名(Alias)”的方式創(chuàng)建目錄的對(duì)應(yīng)關(guān)系。創(chuàng)建虛擬目錄的操作步驟如下： 1.502.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 2.512.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 3.522.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 4.532.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 5.542.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 6.552.2 Internet服務(wù)管理器2

18、.2.6 新建虛擬目錄 7.562.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 8.572.2 Internet服務(wù)管理器2.2.6 新建虛擬目錄 9.新建的別名 vba 所對(duì)應(yīng)的目錄下，所有的文件已出現(xiàn)在畫面上 582.2 Internet服務(wù)管理器2.2.7 Web的日志 IIS會(huì)將網(wǎng)絡(luò)訪問的記錄存放在日志中，此日志的格式可以為下列3種： NCSA 公用日志文件格式 ODBC 日志 W3C 擴(kuò)充日志文件格式 其中ODBC 日志是將Web的日志存放在ODBC數(shù)據(jù)庫(kù)中，其余的是放在傳統(tǒng)的順序文件，默認(rèn)值為W3C 擴(kuò)充日志文件格式。 592.2 Internet服務(wù)管理器2.2.7

19、Web的日志 設(shè)置步驟如下： 1.602.2 Internet服務(wù)管理器2.2.7 Web的日志2.612.2 Internet服務(wù)管理器2.2.7 Web的日志3.“日志文件目錄”的默認(rèn)位置為C:WINDOWSsystem32LogFiles 62第2章 IIS網(wǎng)站規(guī)劃與管理 本章針對(duì)IIS的基本硬件需求、網(wǎng)站的規(guī)劃管理，為讀者介紹了 Internet 服務(wù)管理器等相關(guān)工具的使用說(shuō)明，使您在管理 Web Server 時(shí)，更得心應(yīng)手。63第3章 HTML簡(jiǎn)介ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)教程第3章 HTML簡(jiǎn)介 3.1 什么是HTML3.2 背景設(shè)置3.3 文字屬性的變化3.4 圖文并茂的文件3.5 超

20、級(jí)鏈接3.6 表格3.7 段落3.8 水平線3.9 什么是CSS653.1 什么是HTML HTML全名為Hyper Text Markup Language，中文譯為超文本標(biāo)記語(yǔ)言，這是創(chuàng)建網(wǎng)頁(yè)的腳本語(yǔ)言，它提供了精簡(jiǎn)而有力的文件定義，使我們可以設(shè)計(jì)出多姿多彩的超媒體文件(Hypermedia Document)，通過HTTP(Hyper Text Transfer Protocol)通訊協(xié)議，使得HTML文件可以在全球互聯(lián)網(wǎng)(World Wide Web，WWW)上進(jìn)行跨平臺(tái)的文件交換。 HTML文件為純文本的文件格式，可以用任何的文本編輯器來(lái)編輯，HTML是以標(biāo)記來(lái)描述文件中的多媒體信息

21、。 663.1 什么是HTML 3.1.1 HTML文件 3.1.2 HTML組成的基本組件 673.1 什么是HTML3.1.1 HTML文件 HTML文件的結(jié)構(gòu)是由 HEAD 及 BODY 兩大部分所組成，如下圖所示。 683.1 什么是HTML3.1.2 HTML組成的基本組件 此標(biāo)記必須分別置于HTML文件的開頭和結(jié)尾，其主要的功能是告訴瀏覽器(Browser)這是HTML文件，且文件是由起始標(biāo)記開始，至結(jié)束標(biāo)記結(jié)束。 此標(biāo)記為文件的表頭區(qū)，主要作用是用來(lái)描述關(guān)于網(wǎng)頁(yè)的相關(guān)信息，例如編碼方式、網(wǎng)頁(yè)的標(biāo)題等。 網(wǎng)頁(yè)輸出編排的重頭戲幾乎全部放在與之間，凡在網(wǎng)頁(yè)上顯示的各種文字或圖片等，均必

22、須置于這一標(biāo)記的范圍內(nèi)。 693.1 什么是HTMLHTML文件范例 (page3_1.htm) HTML第一步 How do you do! 執(zhí)行結(jié)果如圖所示。703.2 背景設(shè)置 在HTML中，可以自行定義網(wǎng)頁(yè)的背景顏色或以某張圖片填滿網(wǎng)頁(yè)的背景，而這些設(shè)置必須在 的屬性里進(jìn)行，其用法如下： Body的相關(guān)屬性說(shuō)明請(qǐng)見下頁(yè)表所示。 713.2 背景設(shè)置 屬 性說(shuō) 明Text =“顏色值” 設(shè)置網(wǎng)頁(yè)默認(rèn)的字體顏色，對(duì)于沒有特別指定顏色的文字，都以此設(shè)置為準(zhǔn)。顏色值有兩種表示方式，第一種為常數(shù)表示方式，例如red代表紅色，yellow代表黃色等。另一種表示方式為RGB三原色的表示，顏色值是以三

23、組十六進(jìn)制的RGB數(shù)值來(lái)表示（十六進(jìn)制的前導(dǎo)字符為“#”），顏色值的格式如下“#RRGGBB”，例如紅色的值為“#FF0000”，綠色的值為“#00FF00”，藍(lán)色的值為“#0000FF”Link =“顏色值” 超級(jí)鏈接文字的字體顏色，默認(rèn)值為藍(lán)色加下劃線的字，顏色的指定方法同上Vlink =“顏色值” 已點(diǎn)擊（Click）過的超級(jí)鏈接文字的字體顏色Bgcolor =“顏色值” 指定網(wǎng)頁(yè)的背景顏色，僅能指定單一顏色（無(wú)法指定漸變的顏色）Background =“圖形名” 指定背景圖將使圖片充滿整個(gè)瀏覽器的顯示區(qū)，背景圖片的格式以瀏覽器支持的圖形格式為主，通常為.jpg或.gif的圖形，目前有許

24、多瀏覽器已支持Kodak所發(fā)表的.png文件格式。若bgcolor與background同時(shí)指定，瀏覽器以background的設(shè)置為主723.2 背景設(shè)置 說(shuō)明：瀏覽器對(duì)于每一個(gè)標(biāo)記均有默認(rèn)值，因此，上述的參數(shù)如果都不設(shè)置，也不會(huì)影響網(wǎng)頁(yè)正常的顯示。理論上不設(shè)置背景及字體顏色，反而會(huì)加速網(wǎng)頁(yè)的下載速度，像鼎鼎大名的Yahoo，其網(wǎng)頁(yè)都是不設(shè)置背景顏色。如下圖所示： 733.3 文字屬性的變化 HTML允許我們對(duì)文件中的文字做各種的變化，這些變化就如同使用Word設(shè)置文字的屬性一樣，可以設(shè)置文字的大小、顏色、使用的字體名稱及字體樣式等，詳細(xì)的使用說(shuō)明分述如下。743.3 文字屬性的變化 3.3

25、.1 設(shè)置文字的字體、大小及顏色 3.3.2 文字的樣式 3.3.3 空格符 3.3.4 換行 3.3.5 預(yù)先編排好的文字 3.3.6 編號(hào)及項(xiàng)目符號(hào) 753.3 文字屬性的變化3.3.1 設(shè)置文字的字體、大小及顏色 在HTML中我們可以使用標(biāo)記設(shè)置文字屬性，它的語(yǔ)法如下： 顯示的文字 HTML當(dāng)初定義時(shí)，將字體由小到大排列，分為17個(gè)等級(jí)(字體的大小視瀏覽器的定義而異)，若不設(shè)置字體大小，其默認(rèn)值為3。此外，字體大小也可以以3為基準(zhǔn)用相對(duì)大小來(lái)表示，例如：+1代表4；-2代表1；以此類推。 763.3 文字屬性的變化3.3.1 設(shè)置文字的字體、大小及顏色 設(shè)置文字屬性范例(page3_2.

26、htm)如下： 設(shè)置文字屬性 文字之美 773.3 文字屬性的變化3.3.1 設(shè)置文字的字體、大小及顏色 上述范例在Microsoft Internet Explorer瀏覽器中輸出的畫面如下圖所示。 783.3 文字屬性的變化3.3.2 文字的樣式 HTML 文件提供的文字樣式有粗體字、斜體字、及加下劃線等3種樣式，且樣式可混合指定使用，其使用方法如下： 粗體字： 粗體字 斜體字： 斜體字 加下劃線：加下劃線 粗體字+斜體字： 粗體字+斜體字 粗體字+加下劃線： 粗體字+加下劃線 文字的樣式范例(page3_3.htm)見下頁(yè)：793.3 文字屬性的變化3.3.2 文字的樣式 文字的樣式 粗

27、體字 斜體字 加下劃線 粗體字+斜體字 粗體字+加下劃線 斜體字+加下劃線 803.3 文字屬性的變化3.3.2 文字的樣式 在Microsoft Internet Explorer瀏覽器中，輸出的畫面如下圖所示。 813.3 文字屬性的變化3.3.3 空格符 在HTML中，空格符并不具有調(diào)整間距的功能(連續(xù)出現(xiàn)多個(gè)空格符時(shí)，僅第一個(gè)空格符有效)，若要正確的使用空格符，請(qǐng)改用HTML空格符的編碼值()，這樣才能完成空格符的功效，例如(page3_4.htm)： 空格符 第一行 前面按了三次空格符改用三個(gè) 編碼值  823.3 文字屬性的變化3.3.3 空格符 執(zhí)行結(jié)果如下圖所示 :這里

28、按了3 次空格符，結(jié)果只出現(xiàn)一個(gè)空格 改用 3 個(gè)編碼值 則在結(jié)果中出現(xiàn)了3個(gè)空格。 833.3 文字屬性的變化3.3.4 換行 在HTML文件中，換行必須使用標(biāo)記，范例如下： page3_5.htm 換行 第一行 第二行 我不換行 執(zhí)行結(jié)果如圖所示。 843.3 文字屬性的變化3.3.5 預(yù)先編排好的文字 可以使用標(biāo)記，將已編輯好的文件置于此標(biāo)記之中，它就可以按照您所想要的格式輸出。 范例page3_6.htm: 預(yù)先編排好的文字 現(xiàn)在我想換行就換行， 再也不用看HTML的臉色了。 就算沒有標(biāo)記也沒關(guān)系 853.3 文字屬性的變化3.3.5 預(yù)先編排好的文字 執(zhí)行結(jié)果如下圖所示: 863.3

29、 文字屬性的變化3.3.6 編號(hào)及項(xiàng)目符號(hào) 1. 編號(hào) 在HTML文件中項(xiàng)目編號(hào)是以標(biāo)記并搭配標(biāo)記表示。項(xiàng)目編號(hào)的用法如下： 范例page3_7.htm: 雄壯 編號(hào) 威武 男生要 873.3 文字屬性的變化3.3.6 編號(hào)及項(xiàng)目符號(hào) 執(zhí)行結(jié)果如下圖所示。 883.3 文字屬性的變化3.3.6 編號(hào)及項(xiàng)目符號(hào) 標(biāo)記還可以 TYPE 屬性設(shè)置不同的項(xiàng)目編號(hào)，可用的TYPE屬性值如下表所示。 屬性值說(shuō) 明“A”項(xiàng)目符號(hào)為A, B, C,“a”項(xiàng)目符號(hào)為a, b, c, “I”項(xiàng)目符號(hào)為I, II, III, “i”項(xiàng)目符號(hào)為i, ii, iii, “1”項(xiàng)目符號(hào)為1, 2, 3, (默認(rèn)值)893

30、.3 文字屬性的變化3.3.6 編號(hào)及項(xiàng)目符號(hào) 范例page3_8.htm: 女生要 不同的項(xiàng)目編號(hào) 溫柔 賢淑 男生要 雄壯 威武903.3 文字屬性的變化3.3.6 編號(hào)及項(xiàng)目符號(hào) 執(zhí)行結(jié)果如下圖所示。 913.3 文字屬性的變化3.3.6 編號(hào)及項(xiàng)目符號(hào) 2. 項(xiàng)目符號(hào) 項(xiàng)目符號(hào)是以特定的字符為編號(hào)，在HTML文件中是以標(biāo)記表示，并須搭配.標(biāo)記使用。項(xiàng)目符號(hào)的用法(范例page3_9.htm)如下： 女生要 項(xiàng)目符號(hào) 溫柔 賢淑 男生要 雄壯 威武923.3 文字屬性的變化3.3.6 編號(hào)及項(xiàng)目符號(hào) 執(zhí)行結(jié)果如下圖所示。 933.4 圖文并茂的文件 在HTML文件中，圖形文件與HTML文

31、件是分開存放的，通過HTML的 標(biāo)記，描述欲顯示的圖形文件名稱，即可在瀏覽器中顯示圖片。 標(biāo)記的語(yǔ)法如下： 943.4 圖文并茂的文件 3.4.1 指定文件來(lái)源 3.4.2 指定圖形的寬度及高度 3.4.3 圖片邊框 3.4.4 圖形或文字 3.4.5 對(duì)象居中 953.4 圖文并茂的文件3.4.1 指定文件來(lái)源 在 src=“文件名”中，文件的名稱有兩種表示方式， 一種是明確的指出圖形文件的完整路徑，稱為絕對(duì)路徑；另一種是以目前網(wǎng)頁(yè)所在的目錄為基準(zhǔn)(作為參考路徑) ，稱為相對(duì)路徑。 1. 絕對(duì)路徑 使用絕對(duì)路徑顯示圖片實(shí)例的HTML源代碼(page3_10.htm)如下： img src=/

32、fansjczs _d/upload10/226/1045269490/5302.jpg 顯示圖片 963.4 圖文并茂的文件3.4.1 指定文件來(lái)源 執(zhí)行結(jié)果如下圖所示。 973.4 圖文并茂的文件3.4.1 指定文件來(lái)源 2. 相對(duì)路徑 相對(duì)路徑的使用時(shí)機(jī)，是圖形與目前的網(wǎng)頁(yè)在同一個(gè)網(wǎng)站的目錄下時(shí)使用，例如海河攝影藝術(shù)會(huì)的首頁(yè)為index.htm，若首頁(yè)顯示LOGO圖形的指定為 表示logo.gif這個(gè)圖形與index.htm的首頁(yè)在同一目錄下，若則代表logo.gif是放在index.htm所在目錄下的子目錄images中，至于則是將logo.gif圖形置于主文件(Document Ro

33、ot)下的Images子目錄中。 983.4 圖文并茂的文件3.4.2 指定圖形的寬度及高度 在 標(biāo)記中，也可以指定圖形的寬度和高度。通常來(lái)說(shuō)，我們并不用特別設(shè)置這兩個(gè)屬性，因?yàn)闉g覽器會(huì)以圖形的寬度和高度自動(dòng)顯示，除非為了版面編排的問題，才會(huì)利用寬、高兩個(gè)屬性來(lái)調(diào)整圖形顯示的大小。另外，圖片的寬度和高度也可用百分比%來(lái)表示，例如：width=50%，height=50%等。 說(shuō)明：在Internet Explorer 6.0中寬度及高度，是指瀏覽器的寬度及高度的百分比。因此，width=50%在800600分辨率中，寬度相當(dāng)于是400 pixel。993.4 圖文并茂的文件3.4.3 圖片邊框

34、 在IE中所顯示圖形文件。其默認(rèn)值是沒有邊框的，若為了美觀或顯眼起見，您可以利用Border屬性為圖形加上邊框，并可指定邊框的大小(粗細(xì))。圖形文件邊框設(shè)置為默認(rèn)值的HTML源代碼(page3_11.htm)如下： 圖片邊框 !- body background-color: #C8E9FF; - 1003.4 圖文并茂的文件3.4.3 圖片邊框 畫面的顯示效果如下圖所示。1013.4 圖文并茂的文件3.4.3 圖片邊框 將該圖形文件邊框設(shè)置為border=1，則該范例的HTML源代碼變?yōu)?page3_12.htm) ： 圖片邊框 !- body background-color: #C8E9

35、FF; - 1023.4 圖文并茂的文件3.4.3 圖片邊框 畫面的顯示效果如下圖所示。加了邊框之后，可突顯Banner范圍的視覺效果 1033.4 圖文并茂的文件3.4.4 圖形或文字 圖形是網(wǎng)絡(luò)帶寬的殺手之一，為了節(jié)省網(wǎng)絡(luò)的帶寬，HTML的 標(biāo)記也可以設(shè)置為圖形代替文字。當(dāng)用戶設(shè)置瀏覽器只顯示文字時(shí)，圖形的部分即會(huì)以這些文字來(lái)展現(xiàn)。設(shè)置文字的屬性為 alt，其用法見范例(page3_13.htm) 。 img src=Windows xp.gif alt=Windows xp border=1 顯示圖形或文字 1043.4 圖文并茂的文件3.4.4 圖形或文字 當(dāng)瀏覽器取消顯示圖片時(shí)，畫面

36、會(huì)自動(dòng)以 alt 指定的文字輸出，如下圖所示。 1053.4 圖文并茂的文件3.4.4 圖形或文字 1. 如何取消顯示圖形 點(diǎn)選IE瀏覽器窗口中的“工具/Internet選項(xiàng)”命令，選擇“高級(jí)”選項(xiàng)卡，取消“顯示圖片”復(fù)選框，如下圖所示。 取消“顯示圖片”復(fù)選框 1063.4 圖文并茂的文件3.4.4 圖形或文字 2. 顯示圖形或文字 在HTML中，標(biāo)記還提供圖形與文字如何對(duì)齊的屬性 Align。Align屬性的用法見范例(page3_14.htm) 。 顯示圖形或文字 歡迎攝影愛好者參觀 歡迎攝影愛好者參觀 歡迎攝影愛好者參觀 歡迎攝影愛好者參觀 1073.4 圖文并茂的文件3.4.4 圖形

37、或文字 說(shuō)明：標(biāo)記在HTML中是一個(gè)非常特殊的標(biāo)記，因?yàn)樗挥衅鹗紭?biāo)記而沒有結(jié)束標(biāo)記。所以，請(qǐng)注意！在HTML文件中不要加入這個(gè)標(biāo)記。 執(zhí)行結(jié)果 如圖所示1083.4 圖文并茂的文件3.4.5 對(duì)象居中 不論是文字對(duì)象或是圖形對(duì)象，默認(rèn)值都是靠左顯示，但是HTML也提供對(duì)象居中的顯示方式，其標(biāo)記為，在與之間的任何對(duì)象均會(huì)被居中編排輸出。例如： 文字居中 或 1093.5 超級(jí)鏈接 超級(jí)鏈接的概念: 所謂超級(jí)鏈接 (Hyperlink) ，就是當(dāng)用鼠標(biāo)點(diǎn)選文字、圖片時(shí)，可以鏈接文字或圖片到其他網(wǎng)頁(yè)的功能(可跨網(wǎng)站鏈接) ，而超級(jí)鏈接又可分為文字超級(jí)鏈接和圖片超級(jí)鏈接。1103.5 超級(jí)鏈接 3.

38、5.1 文字超級(jí)鏈接 3.5.2 圖片超級(jí)鏈接 3.5.3 頁(yè)內(nèi)超級(jí)鏈接 3.5.4 超級(jí)鏈接電子郵件賬號(hào) 1113.5 超級(jí)鏈接3.5.1 文字超級(jí)鏈接 如果要讓網(wǎng)頁(yè)中的某一段文字成為超級(jí)鏈接，只要在鏈接標(biāo)題前后分別加入及 兩個(gè)標(biāo)記就可以了。范例(page3_15.htm)如下 ： 超鏈接 找工作、找人才，請(qǐng)單擊 hlfjob人才求職網(wǎng) 1123.5 超級(jí)鏈接3.5.1 文字超級(jí)鏈接 結(jié)果顯示如圖所示。 當(dāng)用戶點(diǎn)選“hlfjob人才求職網(wǎng)”的超級(jí)鏈接時(shí)，將超級(jí)鏈接至。 1133.5 超級(jí)鏈接3.5.2 圖片超級(jí)鏈接 圖片超級(jí)鏈接的語(yǔ)法，大致上與文字超級(jí)鏈接相同，只是鏈接標(biāo)題的部分改為圖片。插

39、入圖片的方式是在與之間加入 ，范例(page3_16.htm)如下 ： 圖片超鏈接 hlfjob人才求 職網(wǎng) 1143.5 超級(jí)鏈接3.5.2 圖片超級(jí)鏈接 Internet Explorer瀏覽器中的顯示效果如下圖所示。 當(dāng)用戶點(diǎn)選“02. bmp”圖片或“hlfjob人才求職網(wǎng)”文字的超級(jí)鏈接時(shí)，將超級(jí)鏈接至。 1153.5 超級(jí)鏈接3.5.3 頁(yè)內(nèi)超級(jí)鏈接 除了文字與圖形的鏈接以外，超級(jí)鏈接也可以發(fā)生在同一個(gè)網(wǎng)頁(yè)之中，也就是文件內(nèi)部的自我鏈接，此種鏈接方式比較適合長(zhǎng)篇幅的網(wǎng)頁(yè)。通常網(wǎng)頁(yè)設(shè)計(jì)師會(huì)在頁(yè)首標(biāo)明網(wǎng)頁(yè)的主題(Subject)，通過點(diǎn)選主題的方式，讓光標(biāo)直接移到主題所指的內(nèi)容部分，減

40、少用戶拖動(dòng)滾動(dòng)條或點(diǎn)擊滾動(dòng)條的次數(shù)。 下面是一篇HTML電子圖書的網(wǎng)頁(yè)，在“USB 接口應(yīng)用指南”題目下方為同一網(wǎng)頁(yè)內(nèi)容中的所有主題，見下頁(yè)圖示。 說(shuō)明：該范例(page3_17.htm) HTML源代碼內(nèi)容太多，在此略去。1163.5 超級(jí)鏈接3.5.3 頁(yè)內(nèi)超級(jí)鏈接 網(wǎng)頁(yè)內(nèi)超級(jí)鏈接的HTML語(yǔ)法，與外部超級(jí)鏈接的用法是相同的，惟一不同的是鏈接的標(biāo)題若為同一網(wǎng)頁(yè)，則必須使用頁(yè)內(nèi)鏈接的方式來(lái)處理，其頁(yè)內(nèi)鏈接的表示方式，是使用“#” 字符加上標(biāo)記名稱，例如： 一、讓電腦支持 USB 當(dāng)我們點(diǎn)選“一、讓電腦支持 USB”的主題后，畫面自動(dòng)移至該主題上，如下頁(yè)圖所示。1173.5 超級(jí)鏈接3.5.3

41、 頁(yè)內(nèi)超級(jí)鏈接 為了配合上述的頁(yè)內(nèi)鏈接，此主題須加上頁(yè)內(nèi)標(biāo)記名稱。如此，當(dāng)用戶點(diǎn)選該主題時(shí)，瀏覽器才能識(shí)別要將頁(yè)面移往何處。頁(yè)內(nèi)標(biāo)記的用法如下： 一、讓 電腦支持 USB1183.5 超級(jí)鏈接3.5.4 超級(jí)鏈接電子郵件賬號(hào) 超級(jí)鏈接也可指定與用戶計(jì)算機(jī)默認(rèn)的電子郵件軟件進(jìn)行鏈接，以利于與電子郵件集成。例如在網(wǎng)頁(yè)的頁(yè)尾通常會(huì)擺放網(wǎng)站的服務(wù)信箱，如下圖所示。 網(wǎng)站服務(wù)信箱1193.5 超級(jí)鏈接3.5.4 超級(jí)鏈接電子郵件賬號(hào) 當(dāng)用戶點(diǎn)選該信箱時(shí)，會(huì)自動(dòng)啟動(dòng)用戶計(jì)算機(jī)內(nèi)部默認(rèn)的電子郵件軟件(例如Outlook、Outlook Express等)，并將其E-mail地址放在收件人位置，如下圖所示。

42、E-mail地址1203.5 超級(jí)鏈接3.5.4 超級(jí)鏈接電子郵件賬號(hào) 鏈接電子郵件是使用“mailto:”，后面加上電子郵件賬號(hào)而成；要鏈接電子郵件軟件時(shí)，若有參數(shù)要自動(dòng)帶至電子郵件軟件時(shí) (如電子郵件主題)，則可由URL帶參數(shù)來(lái)完成。范例(page3_19.htm)如下 ： 超級(jí)鏈接電子郵件 tjhldgz 1213.5 超級(jí)鏈接3.5.4 超級(jí)鏈接電子郵件賬號(hào) 在Internet Explorer中瀏覽的效果如下圖所示。 當(dāng)點(diǎn)選郵件賬號(hào)后，Outlook Express將自動(dòng)被啟動(dòng)，且“主題”已自動(dòng)填入“建議”等文字，如下頁(yè)圖所示。 1223.5 超級(jí)鏈接3.5.4 超級(jí)鏈接電子郵件賬號(hào)

43、自動(dòng)填入“建議”等文字 1233.5 超級(jí)鏈接3.5.4 超級(jí)鏈接電子郵件賬號(hào) 電子郵件軟件的相關(guān)參數(shù)很多，例如：抄送(CC)、主題(Subject)及信件內(nèi)容等，都可以使用URL指定，要注意的是參數(shù)與參數(shù)之間須以“&”符號(hào)隔開，范例的HTML源代碼(page3_20.htm)如下： 超級(jí)鏈接電子郵件 tjhldgz 1243.5 超級(jí)鏈接3.5.4 超級(jí)鏈接電子郵件賬號(hào) 范例 (page3_20.htm)在Internet Explorer中運(yùn)行效果如下圖所示。 當(dāng)用戶點(diǎn)選后，在Outlook Express自動(dòng)被啟動(dòng)時(shí)，相關(guān)的字段已自動(dòng)填入適當(dāng)?shù)闹?，如下?yè)圖所示。1253.5 超級(jí)鏈接3.

44、5.4 超級(jí)鏈接電子郵件賬號(hào)相關(guān)的字段已自動(dòng)填入適當(dāng)?shù)闹?263.6 表格 在HTML輸出編排的標(biāo)記當(dāng)中，并沒有指定顯示位置的功能(例如文字要顯示在x坐標(biāo)等于5，y坐標(biāo)等于100處)，因此對(duì)于復(fù)雜的版面就無(wú)法精確地編輯，此時(shí)只好通過表格來(lái)定位。 在HTML中表格可以用來(lái)定位。在HTML中表格的起始標(biāo)記為，結(jié)束標(biāo)記為，完整的標(biāo)記語(yǔ)法如下： ： 實(shí)際上，表格又可分為列(Column)和行(Row)。豎的稱為Column，橫的我們稱為Row。1273.6 表格 3.6.1 行與列 3.6.2 行與列的背景顏色 3.6.3 表格邊框的顏色 3.6.4 表格間距 3.6.5 合并單元格 1283.6 表

45、格3.6.1 行與列 行的標(biāo)記.必須配合表格使用，與之間代表一行。一般在編寫表格時(shí)，必須先寫行，然后再寫列于其中，范例 (page3_21.htm)如下： 第二行，第一列 第二行，第二列 HTML的表格 第二行，第三列 第三行，第一列 第三行，第二列 第一行，第一列 第三行，第三列 第一行，第二列 第一行，第三列 這是一個(gè)3行3列(33)的表格 1293.6 表格3.6.1 行與列 利用Internet Explorer來(lái)觀看的結(jié)果如下圖所示。 說(shuō)明：tr 是table row的意思，td 是table data的意思。1303.6 表格3.6.2 行與列的背景顏色 在IE瀏覽器中， 及 標(biāo)記

46、均可以指定背景顏色，使用的原則是同一行的背景相同則在 中指定。例如： . . 若每一列的顏色均不相同，則可以在中指定顏色。例如： . . 1313.6 表格3.6.3 表格邊框的顏色 HTML表格的邊框(Border)若未指定，其默認(rèn)值為0，也即無(wú)邊框。要顯示出表格，Border 的值必須大于0，至于邊框的顏色可以使用 BorderColor 屬性來(lái)指定，其用法范例 (page3_22.htm)如下： 第二行，第一列 第二行，第二列 表格邊框的顏色 第二行，第三列 第三行，第一列 第三行，第二列 第一行，第一列 第三行，第三列 第一行，第二列 第一行，第三列 1323.6 表格3.6.3 表格

47、邊框的顏色 利用瀏覽器Internet Explorer觀看時(shí)，其顯示的效果如下圖所示。 1333.6 表格3.6.4 表格間距 在HTML中，表格間距有兩個(gè)選項(xiàng)，一個(gè)是定義表格間的距離(CellSpacing)，默認(rèn)值為2；另一個(gè)是定義表格內(nèi)的字符與表格邊界本身的距離(CellPadding)，默認(rèn)值為1，未設(shè)置CellSpacing和CellPadding時(shí)的效果如圖所示。 1343.6 表格3.6.4 表格間距 當(dāng)設(shè)置cellspacing=“5”和cellpadding=“10”時(shí)的效果如下頁(yè)圖所示。1353.6 表格3.6.4 表格間距 若我們將上述兩個(gè)屬性都改為“0”，則其顯示效果

48、如下圖所示。1363.6 表格3.6.5 合并單元格 雖然表格是由列 (Column) 和行(Row) 所組成的，但卻不一定是固定的個(gè)數(shù)，有時(shí)候我們必須使用合并表格的功能，合并表格又可分為：行合并與列合并兩種，合并的原則為由上到下、由左到右。 1. 合并列 假如某一列橫跨3個(gè)列 (占3個(gè)列的空間)，則可以在 標(biāo)記的屬性 colspan=n，指定占用的列數(shù)，范例 (page3_25.htm) HTML代碼見下頁(yè)： 1373.6 表格3.6.5 合并單元格 合并列 第一行，第一列 第一行，第二列 第一行，第三列 第一行，第四列 第二行，本列占3列 第二行，第四列 1383.6 表格3.6.5 合并

49、單元格 利用Internet Explorer來(lái)觀看的結(jié)果如下圖所示。 colspan=3 ,本列占3列 1393.6 表格3.6.5 合并單元格 2. 合并行 可以在 標(biāo)記的屬性rowspan=n，指定占用的行數(shù)，范例 (page3_26.htm) HTML代碼如下： 合并行 第三行，第二列 第三行，第三列 第三行，第四列 第一行，本列縱跨3行 第四行，第一列 第一行，第二列 第四行，第二列 第一行，第三列 第四行，第三列 第一行，第四列 第四行，第四列 第二行，第二列 第二行，第三列 第二行，第四列1403.6 表格3.6.5 合并單元格 執(zhí)行結(jié)果如圖3.32所示。rowspan=3 ,本

50、列縱跨3行1413.7 段落 HTML是當(dāng)初科學(xué)家們用來(lái)在網(wǎng)絡(luò)上發(fā)表研究成果的工具，而研究成果不外乎是一些技術(shù)性的文件，因此HTML在設(shè)計(jì)之初即有段落標(biāo)記的定義，段落標(biāo)記是以 開始，而以 為結(jié)束標(biāo)記。 1423.7 段落 范例(page3_27.htm)如下 ： html段落 讓電腦支持 USB 現(xiàn)在的大部分電腦帶有 USB 端口。一些老式主板和機(jī)箱中也有 USB 連接器，但可能不起作用。所以一定要檢查主板或電腦操作手冊(cè)，以便查出怎樣使 USB 工作。在老式電腦上，可以在啟動(dòng)時(shí)查看電腦的 BIOS，以確定它是否支持 USB。為了使 USB 鍵盤或鼠標(biāo)在DOS 狀態(tài)下工作，應(yīng)該選擇 USB Le

51、gacy 支持選項(xiàng)(如果有該選項(xiàng)的話)。如果該主板不能接入 USB 設(shè)備，你就應(yīng)該買一塊 PCI 卡，以便將 USB 插槽添加到老式電腦中。 讓 Windows 系統(tǒng)支持 USB 并非所有的 Windows 版本都支持 USB。Windows98 對(duì)很多外設(shè)都提供了全面的 USB支持。Windows95 的零售版則不支持 USB，只有后來(lái)與 PC 捆綁銷售的 Windows95 版本才支持 USB。你可以看看你的 Windows95 版本信息(可右擊“我的電腦”圖標(biāo)并選擇“屬性”)，如果版本號(hào)是以 B 或者 C 結(jié)尾，則你的這個(gè)Windows 95 只對(duì)有限范圍的設(shè)備提供 USB 支持。 14

52、33.7 段落 顯示的效果如下圖所示。 在段落中也可以指定段落對(duì)齊方式，如靠左(Left)、靠右(Right)以及居中(Center)等，其用法如下： 段落文字 說(shuō)明：使用段落標(biāo)記，瀏覽器會(huì)自動(dòng)在段落后面插入一空白行(這就是段落的定義)。 1443.8 水平線 標(biāo)記是提供HTML畫水平線的功能，并可指定水平線的寬度、大小等。其語(yǔ)法如下： 其中“寬度”可指定水平線的點(diǎn)數(shù)，也可指定顯示屏幕寬度的百分比。例如： 顯示Size為1，寬度為瀏覽 器畫面80%的水平線 顯示Size為1，寬度為480 pixel的水平線 1453.8 水平線 標(biāo)記的用法范例 (page3_28.htm) HTML代碼如下：

53、 水平線 1463.8 水平線 利用Internet Explorer來(lái)觀看結(jié)果如下圖所示。 說(shuō)明：寬度若用屏幕寬度的百分比顯示，將隨屏幕寬度的變化而變化。1473.8 水平線 在實(shí)際應(yīng)用上，通常是用水平線將文本與頁(yè)尾分隔開，并在水平線下方顯示版權(quán)聲明或服務(wù)信箱等，請(qǐng)參考下圖。 1483.9 什么是CSS CSS 是Cascading Style Sheet的縮寫，中文譯為“層疊樣式表”。CSS樣式表可以定義網(wǎng)頁(yè)相關(guān)組件的各種屬性變化，例如文字背景、字體、字體大小、對(duì)齊方式等，它也可以創(chuàng)建一個(gè)共同的樣式表，讓網(wǎng)站的相關(guān)網(wǎng)頁(yè)直接套用，完全跳脫HTML語(yǔ)法及輸出編排上的束縛。讓網(wǎng)頁(yè)更具視覺效果，并

54、可大幅度節(jié)省維護(hù)的時(shí)間。 在HTML4.0版以后，每一個(gè)HTML的標(biāo)記(Tag)都有一個(gè)Class屬性，Class的值須套用CSS的定義，方可做出各種精確的排版及樣式指定的功能，令HTML輸出的畫面變得非常的精美及細(xì)致。 1493.9 什么是CSS 3.9.1 CSS類型 3.9.2 CSS在超級(jí)鏈接中的運(yùn)用 3.9.3 實(shí)際范例 1503.9 什么是CSS3.9.1 CSS類型 在HTML網(wǎng)頁(yè)中，CSS有下列3種不同的使用類型： 內(nèi)嵌CSS 將CSS的定義寫在HTML源代碼標(biāo)記之間，樣式表的有效范圍僅為此份HTML文件。 局部套用CSS 此類型的CSS與特定的HTML標(biāo)記合并使用，它與內(nèi)嵌C

55、SS最大的不同是局部套用僅會(huì)影響套用該段的樣式，而不會(huì)影響其他非套用的部分。 外部鏈接CSS 外部鏈接CSS是將樣式表以單獨(dú)的文件存放，令網(wǎng)站的所有網(wǎng)頁(yè)均可套用此樣式，以降低維護(hù)的人力成本，并可讓網(wǎng)站擁有一致性的風(fēng)格。 1513.9 什么是CSS3.9.1 CSS類型 1. 內(nèi)嵌CSS 范例 (page3_30.htm) HTML代碼如下： CSS范例-01 CSS讓網(wǎng)頁(yè)美麗、大方、又好維護(hù)！ 1523.9 什么是CSS3.9.1 CSS類型 在瀏覽器的顯示效果如下圖所示。 修改樣式表style1，將字體大小改為9點(diǎn)，并將顏色改為藍(lán)色，顯示效果如下圖所示。 1533.9 什么是CSS3.9.1

56、 CSS類型 2. 局部套用CSS 不同的瀏覽器對(duì)HTML標(biāo)記的輸出編排格式均不相同，通過局部套用CSS 的功能，可以重新定義HTML標(biāo)記的輸出樣式。例如HTML的段落標(biāo)記，利用“局部套用CSS”的定義，可以讓標(biāo)記按照CSS的定義輸出。 范例 (page3_32.htm) HTML代碼請(qǐng)見下頁(yè)。1543.9 什么是CSS3.9.1 CSS類型 CSS范例-03 CSS讓網(wǎng)頁(yè)美麗、大方、又好維護(hù)！ 1553.9 什么是CSS3.9.1 CSS類型 執(zhí)行結(jié)果如下圖所示。 若要同時(shí)定義多個(gè)HTML標(biāo)記的樣式，例如與標(biāo)記，則可以使用范例 (page3_33.htm) 的語(yǔ)法。其HTML代碼請(qǐng)見下頁(yè)。

57、1563.9 什么是CSS3.9.1 CSS類型 CSS范例-04 CSS讓網(wǎng)頁(yè)美麗、大方、又好維護(hù)！ 預(yù)先編排的輸出格式，也可以套用CSS 套用的方法請(qǐng)見源代碼(css-04.htm)。 1573.9 什么是CSS3.9.1 CSS類型 執(zhí)行結(jié)果如下圖所示。 說(shuō)明：樣式名稱若是HTML的標(biāo)記，請(qǐng)勿在樣式名稱前加上“.”。1583.9 什么是CSS3.9.1 CSS類型 3. 外部鏈接CSS 也可以使用記事本等編輯樣式表，并另外以一個(gè)新的文件存放 (例如common.css) ，則使用到此樣式表的HTML 文件均可以外部鏈接的方式引用。外部鏈接的HTML語(yǔ)法如下： 其中標(biāo)記為外部鏈接，rel參

58、數(shù)必須指定鏈接的文件類型，此處為樣式表“stylesheet”，樣式表的文件由href屬性中指定(此例為common.css)。引用方式請(qǐng)參考范例 (page3_34.htm) ，其HTML代碼請(qǐng)見下頁(yè)。1593.9 什么是CSS3.9.1 CSS類型 CSS范例-05 CSS讓網(wǎng)頁(yè)美麗、大方、又好維護(hù)！ 預(yù)先編排的輸出格式，也可以套用外部的CSS文件， 套用的方法請(qǐng)見源代碼(css-05.htm)。 1603.9 什么是CSS3.9.1 CSS類型 執(zhí)行結(jié)果如下圖所示。1613.9 什么是CSS3.9.2 CSS在超級(jí)鏈接中的運(yùn)用 CSS除可重新定義HTML標(biāo)記以外，對(duì)于HTML的超級(jí)鏈接標(biāo)

59、記提供更多的選項(xiàng)。 ：1623.9 什么是CSS3.9.2 CSS在超級(jí)鏈接的運(yùn)用 上述的語(yǔ)法中，link為指定超級(jí)鏈接的樣式；visited定義已點(diǎn)選過的超級(jí)鏈接樣式；active則代表動(dòng)作中的超級(jí)鏈接樣式，hover則為鼠標(biāo)光標(biāo)移至超級(jí)鏈接時(shí)的樣式。請(qǐng)參考下面的寫法： a:link color:#0000ff; font-style:normal; cursor:hand; text-decoration:normal a:visited color:#ff0000; font-style:normal; text-decoration:normal a:active color:#000

60、0ff; font-style:normal; text-decoration:normal a:hover color:#cc0000; font-style:bold; text-decoration:none CSS范例-06 超級(jí)鏈接測(cè)試 1633.9 什么是CSS3.9.3 實(shí)際范例 1. CSS入門范例 下面是鐵道出版社出書的HTML網(wǎng)頁(yè)界面。1643.9 什么是CSS3.9.3 實(shí)際范例 該網(wǎng)頁(yè)HTML源代碼(page3_35.htm)如下(部分) ： ：1653.9 什么是CSS3.9.3 實(shí)際范例 其中.small代表定義一個(gè)稱為small的樣式，此樣式的字體(font-fa