ASP動態(tài)網(wǎng)頁設計教程課件(完整版)

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

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

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

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

5、)是以標準的TCP/IP通訊協(xié)議為基礎，將分布在全球各地的局域網(wǎng)串聯(lián)在一起，完成資源共享的網(wǎng)絡世界。目前全世界約有千萬個主機串聯(lián)在互聯(lián)網(wǎng)上，形成一個相連的Internet世界，這些主機是由個人、教育機構(gòu)及企業(yè)用戶等相關單位所設立，通過Internet可以達到資源共享的目的。 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)所需的配置 下面是個人撥號上網(wǎng)所需準備的軟、硬件設備：（1）個人計算機（2）調(diào)制解調(diào)器（3）電話線（4）操作系統(tǒng)（5

6、）瀏覽器（6）向ISP公司申請一個上網(wǎng)的賬號（7）設置撥號上網(wǎng)的參數(shù) 131.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置1. 個人計算機個人計算機上網(wǎng)所需的基本配置建議如下：Pentium II以上的CPU； 64 MB以上的內(nèi)存；3.5英寸軟驅(qū)；4.3 GB以上的硬盤；32倍速以上的光驅(qū)；一個鼠標； 101鍵的標準鍵盤； 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ù)字信息，而數(shù)據(jù)通過電話線

7、傳輸至遠程時必須轉(zhuǎn)換為模擬信號，當另一端收到模擬信號時，必須通過調(diào)制解調(diào)器再將模擬信號轉(zhuǎn)為數(shù)字信號后，交給計算機處理。 151.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置3. Windows操作系統(tǒng) 操作系統(tǒ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)絡探險家瀏覽器的用戶界面如

8、下圖所示。 171.1 什么是互聯(lián)網(wǎng)1.1.2 客戶端上網(wǎng)所需的配置5. ISP ISP即為互聯(lián)網(wǎng)服務提供者(Internet Service Provider)，它主要是提供企業(yè)及個人用戶撥號上網(wǎng)的服務，當您準備好個人計算機等相關配置后，必須向ISP申請一個賬號，方能利用Modem撥號上網(wǎng)。當然，也可以直接申請ADSL或其它專線服務，國內(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)境上，每一部計算機主機均有一個地址（用以代表該主機），此地址是由四段0255的數(shù)字所組成，例如29，這組數(shù)字

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

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

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

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

13、erver時，更得心應手。29第2章 IIS網(wǎng)站規(guī)劃與管理 2.1 什么是IIS2.2 Internet服務管理器302.1 什么是IIS IIS全名為Internet Information Server，它是為微軟針對Windows NT操作系統(tǒng)所設計的Web Server，其最大特色是可與Windows NT做緊密的結(jié)合。 312.1 什么是IIS 2.1.1 軟硬件需求 2.1.2 IP地址的查詢及設置 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)站服務器：IIS 5.1。 安裝SMTP服務。 安裝FTP服務。 332.1 什么是IIS2.1.2 IP地址的查詢及設置 有關TCP/IP中IP的設置步驟，請參考如下: 1.342.1 什么是IIS2.1.2 IP地址的查詢及設置2.352.1 什么是IIS2.1.2 IP地址的查詢及設置3.362.2 Internet服務管理器 Internet服務管理器是Microsoft針對互聯(lián)網(wǎng)相關的服務，例如WWW、FTP、SMTP等服務所提出的管理工具

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

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

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

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

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

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

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組成的基本組件 此標記必須分別置于HTML文件的開頭和結(jié)尾，其主要的功能是告訴瀏覽器(Browser)這是HTML文件，且文件是由起始標記開始，至結(jié)束標記結(jié)束。 此標記為文件的表頭區(qū)，主要作用是用來描述關于網(wǎng)頁的相關信息，例如編碼方式、網(wǎng)頁的標題等。 網(wǎng)頁輸出編排的重頭戲幾乎全部放在與之間，凡在網(wǎng)頁上顯示的各種文字或圖片等，均必

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

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

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

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

26、htm)如下： 設置文字屬性 文字之美 773.3 文字屬性的變化3.3.1 設置文字的字體、大小及顏色 上述范例在Microsoft Internet Explorer瀏覽器中輸出的畫面如下圖所示。 783.3 文字屬性的變化3.3.2 文字的樣式 HTML 文件提供的文字樣式有粗體字、斜體字、及加下劃線等3種樣式，且樣式可混合指定使用，其使用方法如下： 粗體字： 粗體字 斜體字： 斜體字 加下劃線：加下劃線 粗體字+斜體字： 粗體字+斜體字 粗體字+加下劃線： 粗體字+加下劃線 文字的樣式范例(page3_3.htm)見下頁：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)多個空格符時，僅第一個空格符有效)，若要正確的使用空格符，請改用HTML空格符的編碼值()，這樣才能完成空格符的功效，例如(page3_4.htm)： 空格符 第一行 前面按了三次空格符改用三個 編碼值  823.3 文字屬性的變化3.3.3 空格符 執(zhí)行結(jié)果如下圖所示 :這里

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

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

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

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

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

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

34、 在IE中所顯示圖形文件。其默認值是沒有邊框的，若為了美觀或顯眼起見，您可以利用Border屬性為圖形加上邊框，并可指定邊框的大小(粗細)。圖形文件邊框設置為默認值的HTML源代碼(page3_11.htm)如下： 圖片邊框 !- body background-color: #C8E9FF; - 1003.4 圖文并茂的文件3.4.3 圖片邊框 畫面的顯示效果如下圖所示。1013.4 圖文并茂的文件3.4.3 圖片邊框 將該圖形文件邊框設置為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)絡帶寬的殺手之一，為了節(jié)省網(wǎng)絡的帶寬，HTML的 標記也可以設置為圖形代替文字。當用戶設置瀏覽器只顯示文字時，圖形的部分即會以這些文字來展現(xiàn)。設置文字的屬性為 alt，其用法見范例(page3_13.htm) 。 img src=Windows xp.gif alt=Windows xp border=1 顯示圖形或文字 1043.4 圖文并茂的文件3.4.4 圖形或文字 當瀏覽器取消顯示圖片時，畫面

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

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

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

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

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

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

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

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

44、5.4 超級鏈接電子郵件賬號相關的字段已自動填入適當?shù)闹?263.6 表格 在HTML輸出編排的標記當中，并沒有指定顯示位置的功能(例如文字要顯示在x坐標等于5，y坐標等于100處)，因此對于復雜的版面就無法精確地編輯，此時只好通過表格來定位。 在HTML中表格可以用來定位。在HTML中表格的起始標記為，結(jié)束標記為，完整的標記語法如下： ： 實際上，表格又可分為列(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 行與列 行的標記.必須配合表格使用，與之間代表一行。一般在編寫表格時，必須先寫行，然后再寫列于其中，范例 (page3_21.htm)如下： 第二行，第一列 第二行，第二列 HTML的表格 第二行，第三列 第三行，第一列 第三行，第二列 第一行，第一列 第三行，第三列 第一行，第二列 第一行，第三列 這是一個3行3列(33)的表格 1293.6 表格3.6.1 行與列 利用Internet Explorer來觀看的結(jié)果如下圖所示。 說明：tr 是table row的意思，td 是table data的意思。1303.6 表格3.6.2 行與列的背景顏色 在IE瀏覽器中， 及 標記

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

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

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

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

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

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

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

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

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

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

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

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

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

59、記提供更多的選項。 ：1623.9 什么是CSS3.9.2 CSS在超級鏈接的運用 上述的語法中，link為指定超級鏈接的樣式；visited定義已點選過的超級鏈接樣式；active則代表動作中的超級鏈接樣式，hover則為鼠標光標移至超級鏈接時的樣式。請參考下面的寫法： 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 超級鏈接測試 1633.9 什么是CSS3.9.3 實際范例 1. CSS入門范例 下面是鐵道出版社出書的HTML網(wǎng)頁界面。1643.9 什么是CSS3.9.3 實際范例 該網(wǎng)頁HTML源代碼(page3_35.htm)如下(部分) ： ：1653.9 什么是CSS3.9.3 實際范例 其中.small代表定義一個稱為small的樣式，此樣式的字體(font-fa