第1章 網(wǎng)頁基礎(chǔ)知識 1.ppt

1、網(wǎng)頁設(shè)計(jì)與制作教程,中國水利水電出版社 網(wǎng)頁設(shè)計(jì)與制作教材 配套電子教案 2007.6,1.1網(wǎng)頁概述 1.2 網(wǎng)頁制作工具簡介 1.3 HTML基礎(chǔ) 1.4 實(shí)踐技能訓(xùn)練,第1章 網(wǎng)頁基礎(chǔ)知識,1.1.1什么是網(wǎng)頁 Web直譯過來就是“網(wǎng)”，可以理解為通過超級連接將各種文檔連接起來的一個大規(guī)模的信息集合。 網(wǎng)頁（Web頁）實(shí)際上就是HTML文件，是一種可以在WWW網(wǎng)上傳輸，并能被瀏覽器認(rèn)識和翻譯成頁面的文件。 WWW是“World wide web”的縮寫；HTML則是“HyperText Markup Language”的縮寫，意為“超文本標(biāo)記語言”，它是一種規(guī)范，一種標(biāo)準(zhǔn)。超文本就是指頁

2、面可以包含圖片、鏈接、音樂等非文字的元素。 制作網(wǎng)頁所需要的硬件和軟件： 硬件：計(jì)算機(jī)主頻最好的P以上，內(nèi)存最好在128MB以上，必須有足夠大的空間來存放網(wǎng)頁素材。 軟件：Dreamweaver 8.0是目前制作網(wǎng)頁的最新版本，F(xiàn)rontpage也是一個不錯的產(chǎn)品。處理網(wǎng)頁圖像和文字可以選擇Fireworks，若要制作網(wǎng)頁動畫，可以選擇 Flash。,1.1 網(wǎng)頁概述,1.1.2 網(wǎng)頁中的基本元素 網(wǎng)頁包括的主要元素有： 文本、圖像、動畫、聲音、視頻、表格、表單等。,1.1 網(wǎng)頁概述,1.1.2 網(wǎng)頁中的基本元素 1.文本 文本是人類最重要的信息載體和交流的工具，網(wǎng)頁的主體一般以文本為主。在制

3、作網(wǎng)頁時(shí)，可以根據(jù)需要設(shè)置文本的字體、字號、顏色以及所需要的其他格式。 文本在網(wǎng)頁中的主要功能是顯示信息和超級鏈接，文本通過文字的具體內(nèi)容與不同的格式來顯示信息的重要內(nèi)容，這是文本的直接功能。此外，文本作為一個對象，往往又是超級鏈接的觸發(fā)體，通過文本表達(dá)的鏈接目標(biāo)指向相關(guān)內(nèi)容。 2.圖像 圖像在網(wǎng)頁中可以起到提供信息、展示作品、美化網(wǎng)頁以及體現(xiàn)風(fēng)格等效果。圖像可以用作標(biāo)題、網(wǎng)站標(biāo)志、網(wǎng)頁背景、鏈接按紐、導(dǎo)航條、網(wǎng)頁主圖等，網(wǎng)頁中使用圖像的格式主要有：GIF、JPEG、PNG等格式。,1.1 網(wǎng)頁概述,1.1.2 網(wǎng)頁中的基本元素 -圖像 GIF圖像。GIF(graphics interchan

4、ge format)由Compu-Serve公司1987年6月制訂。GIF通常對于卡通、圖像、Logo、以及帶有透明區(qū)域的圖像、動化很有作用。 GIF文件格式的擴(kuò)展名是“.gif”. JPEG圖像。JPEG（joint photographic experts group 聯(lián)合照片專家組）是一種特別為照片圖像設(shè)計(jì)的圖片壓縮處理格式。JPEG文件采用先進(jìn)的壓縮算法，可以保持較好的圖像保真度和較高的壓縮比。JPEG文件格式的擴(kuò)展名為 “.jpg”. PNG圖像。PNG（portable network graphic）即可移植網(wǎng)絡(luò)圖形。PNG圖像是專門針對Web開發(fā)的一種無損壓縮圖像，它的壓縮比要

5、大大超過許多傳統(tǒng)的圖像無損壓縮算法，同時(shí)還支持透明背景和動態(tài)效果。PNG文件格式的擴(kuò)展名是“.png”,1.1 網(wǎng)頁概述,1.1.2 網(wǎng)頁中的基本元素 3.動畫 動畫實(shí)質(zhì)上就是動態(tài)的圖像。在網(wǎng)頁中使用動畫可以有效地吸引瀏覽者的注意。由于活動的對象比靜止的對象更具有吸引力，因而，網(wǎng)頁上通常有大量的動畫。網(wǎng)頁中使用較多的動畫是GIF動畫和Flash動畫。 4.聲音 聲音是多媒體網(wǎng)頁的一個重要組成部分。用于網(wǎng)絡(luò)聲音文件格式非常多，常用的是MIDI、MAV、MP3和AIF等。 一般來講，不要使用聲音文件作為網(wǎng)頁的背景音樂，那樣會影響網(wǎng)頁的下載速度?？梢栽诰W(wǎng)頁中添加一個鏈接來打開聲音文件作為背景音樂，讓

6、播放音樂變得可以控制。 瀏覽器的不同，處理聲音文件的方式也會有很大的差異和不一致的地方，最好將聲音文件添加到Flash影片中，然后嵌入SWF文件以改善一致性。,1.1 網(wǎng)頁概述,1.1.2 網(wǎng)頁中的基本元素 視頻 在網(wǎng)頁中視頻文件格式也非常多，常見的有RealPlayer、MPEG、AVI和DivX、flash等。 表格 表格是一種用來控制網(wǎng)頁中頁面布局的有效方式。為了達(dá)到理想的視覺效果，通常都不顯示邊框，我們所看到的網(wǎng)頁如果具有橫豎分明的風(fēng)格，一般都是用表格來輔助布局的。 許多設(shè)計(jì)人員使用表格對網(wǎng)頁進(jìn)行布局。Dreamweaver提供兩種方式來查看和操作表格：標(biāo)準(zhǔn)視圖和布局視圖。在標(biāo)準(zhǔn)視圖中

7、，表格顯示為行和列的網(wǎng)格，而布局視圖允許創(chuàng)建者在將表格用做基礎(chǔ)結(jié)構(gòu)的同時(shí)在網(wǎng)頁上繪制、移動方框以及調(diào)整方框的大小。,1.1 網(wǎng)頁概述,1.1.2 網(wǎng)頁中的基本元素 表單 表單是一種特殊的網(wǎng)頁元素。表單的主要用途是：收集聯(lián)系信息、接受用戶要求、獲得反饋意見、設(shè)置訪問者簽名、讓瀏覽者輸入關(guān)鍵字去搜索相關(guān)網(wǎng)頁、讓瀏覽者注冊會員或以會員身份登錄。登錄的用戶名、密碼、搜索引擎等都是表單。 表單由不同功能的表單元素組成，最簡單的表單也要包含一個輸入?yún)^(qū)域和一個提交按鈕。站點(diǎn)瀏覽者填寫表單的方式通常是輸入文本、選中單選按鈕和復(fù)選框，以及從下拉列表框中選擇選項(xiàng)。根據(jù)表單功能和處理方式的不同，通?？梢詫⒈韱畏譃橛?/p>

8、戶反饋表單、流言簿表單、搜索表單和用戶注冊表單等類型。,1.1 網(wǎng)頁概述,1.1.3網(wǎng)頁的類型： 有3種不同的類型：基本網(wǎng)頁、動態(tài)網(wǎng)頁和模板網(wǎng)頁。 1.基本網(wǎng)頁 基本網(wǎng)頁又稱靜態(tài)網(wǎng)頁，是相對動態(tài)網(wǎng)頁而言的。工作原理如下。 客戶端請求 服務(wù)器 接受響應(yīng) 客戶端瀏覽器 網(wǎng)頁,1.1 網(wǎng)頁概述,動態(tài)網(wǎng)頁 動態(tài)網(wǎng)頁中除了基本網(wǎng)頁中的元素外，還包括一些程序，這些應(yīng)用程序需要瀏覽器與服務(wù)器之間發(fā)生交互行為，而且應(yīng)用程序的執(zhí)行需要應(yīng)用程序服務(wù)器才能完成。 應(yīng)用程序服務(wù)器的作用是讀取動態(tài)網(wǎng)頁上的代碼，根據(jù)代碼中的指令完成網(wǎng)頁，然后將代碼從網(wǎng)頁上去掉，所得的結(jié)果將是一個靜態(tài)網(wǎng)頁；應(yīng)用程序服務(wù)器將該網(wǎng)頁傳送回網(wǎng)頁

9、服務(wù)器，網(wǎng)頁服務(wù)器將網(wǎng)頁發(fā)送到瀏覽器，瀏覽器得到的仍然是一個純HTML的靜態(tài)網(wǎng)頁。 動態(tài)網(wǎng)頁是經(jīng)過人與服務(wù)器對話的結(jié)果。如圖網(wǎng)頁上的登錄、注冊、網(wǎng)上購物等都屬于此類網(wǎng)站。,1.1 網(wǎng)頁概述,動態(tài)網(wǎng)頁有兩種：一種是普通動態(tài)網(wǎng)頁，它不包含數(shù)據(jù)庫；一種是包含數(shù)據(jù)庫的動態(tài)網(wǎng)頁。 普通動態(tài)網(wǎng)頁，其工作的過程如圖所示,1.1 網(wǎng)頁概述,.包含數(shù)據(jù)庫的動態(tài)網(wǎng)頁，如Access、SQL、MYSQL等，其工作過程如圖所示：,1.1 網(wǎng)頁概述,1.1 網(wǎng)頁概述,3.模板網(wǎng)頁 模板是提供一個標(biāo)準(zhǔn)頁面，它的模式固定，例如頁面布局、字體排列等固定不變，只需要改變頁面的內(nèi)容，這有助于讀者成批地建立頁面風(fēng)格相同的頁面，從而

10、使網(wǎng)站風(fēng)格得到統(tǒng)一。模板能夠帶給你對網(wǎng)頁功能和布局更為完整的概念，并且模板文件能夠讓你更容易的瀏覽頁面代碼。,1.2 網(wǎng)頁制作工具簡介,1.2.1網(wǎng)頁編輯工具 1.FrontPage 2.Dreamweaver,1.2 網(wǎng)頁制作工具簡介,1.2.2網(wǎng)頁動畫制作軟件 Flash也是Macromedia公司推出的產(chǎn)品。Flash8.0可以更好的為網(wǎng)頁設(shè)計(jì)師和開發(fā)人員服務(wù)，幫助他們提高工作效率，創(chuàng)造豐富的、極具誘惑力個感染力的動畫作品。 Flash的主要功能是制作動畫，這種動畫不能是純粹的動畫，還應(yīng)該具有交互的特點(diǎn)，制作出來的作品應(yīng)該達(dá)到令人目眩的感覺。 Flash8.0兼容了以前的版本，凡是以前使

11、用過Flash5.0、Flash MX以及Flash MX 2004的用戶都可以立即上手，應(yīng)用起來更方便、更快捷。Flash8.0的功能得到了極大的擴(kuò)展，用它可以創(chuàng)造完整的動態(tài)站點(diǎn)，從內(nèi)容顯示到數(shù)據(jù)庫的連通，以及視頻的調(diào)整，給用戶帶來的驚喜是空前的。 憑借Flash8.0的開發(fā)環(huán)境及新的服務(wù)器技術(shù)優(yōu)勢，網(wǎng)頁的開發(fā)者可以通過它建立新一帶的網(wǎng)絡(luò)動畫，帶來更具視覺震撼力的Web產(chǎn)品。,1.2 網(wǎng)頁制作工具簡介,1.2.3網(wǎng)絡(luò)圖像處理軟件 Fireworks是Macromedia公司專門為網(wǎng)頁設(shè)計(jì)的Web圖形工具軟件，它可以用最少的步驟生成最小但質(zhì)量很高的JPEG和GIF圖像，這些圖像可以直接用于網(wǎng)頁

12、上。Fireworks是Web圖形工具的首選軟件。 Photoshop是由Adobe公司出品的著名的圖形圖像處理軟件。它能夠?qū)崿F(xiàn)各種專業(yè)化的圖像處理，是專門圖像創(chuàng)作的首選軟件。,1.3 HTML基礎(chǔ)-概念,HTML則是“HyperText Markup Language超文本標(biāo)記語言”的縮寫，它是構(gòu)成Web頁面的主要工具，是用來表示網(wǎng)上信息的符號標(biāo)記語言。 在Internet上，如果要想全球范圍內(nèi)發(fā)布信息，需要一個能夠被廣泛理解的語言，也就是說所有的計(jì)算機(jī)都能夠理解的用語出版的“母語”。WWW （World wide web）所使用的出版語言就是HTML語言。 通過HTML，將所需要表達(dá)的信息

13、按某種規(guī)則HTML文件，通過專用的瀏覽器來識別，并將這些HTML“翻譯”成可以識別的信息，就是我們所見到的網(wǎng)頁。,1.3 HTML基礎(chǔ)-功能,HTML的功能如下： 出版在線的文檔，其中包含了標(biāo)題、文本、表格、列表以及照片等內(nèi)容。 通過超鏈接檢索在線的信息。 為獲取遠(yuǎn)程服務(wù)而設(shè)計(jì)表單，可用于檢索信息、訂購產(chǎn)品。 在文檔中直接包含了電子表格、視頻剪輯、聲音剪輯以及其他的一些功能。,1.3 HTML基礎(chǔ),1.3.1 HTML語言結(jié)構(gòu)的基本標(biāo)志 文檔標(biāo)志 。標(biāo)志用于HTML文檔的最前面，用來標(biāo)識HTML文檔的開始。而標(biāo)志恰恰相反，它放在HTML文檔的最后邊，又來標(biāo)識HTML文檔的結(jié)束，兩個標(biāo)志必須成對

14、使用。 文件頭標(biāo)志 。和構(gòu)成HTML文檔的開頭部分，在此標(biāo)志之間可以使用、等標(biāo)志對。標(biāo)志對之間的內(nèi)容是不會在瀏覽器的框內(nèi)顯示出來。兩個標(biāo)志必須成對使用。,1.3 HTML基礎(chǔ),1.3.1 HTML語言結(jié)構(gòu)的基本標(biāo)志 文件主體標(biāo)志 . 是HTML文檔的主體部分，在此標(biāo)志對之間可以包含、等眾多標(biāo)志。它們所定義的文本、圖像等將會在瀏覽器的框內(nèi)顯示出來。兩個標(biāo)志必須成對使用。標(biāo)志中還可以有如表1-1所示的屬性。,1.3 HTML基礎(chǔ),1.3.1 HTML語言結(jié)構(gòu)的基本標(biāo)志 文件標(biāo)題標(biāo)志 。使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊的藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁的“主題”。要將網(wǎng)頁的主

15、題顯示到瀏覽器的頂部其實(shí)很簡單，只要在標(biāo)志對之間加如顯示的文本即可。 注意：標(biāo)志對只能放在標(biāo)志對之間。 下面是一個綜合的例子，說明了HTML文檔中最基本標(biāo)志的使用。 顯示在瀏覽器最上邊藍(lán)色條中的文本 紅色背景、藍(lán)色的文本 ,1.3 HTML基礎(chǔ),1.3.2頁面格式標(biāo)志 段落標(biāo)志 . 標(biāo)志對是用來創(chuàng)建一個段落,在此標(biāo)志對之間加入的文本將按照段落的格式顯示在瀏覽器上。另外，標(biāo)志還可以使用align屬性，它用來說明對齊方式，語法是。align可以是Left （左對齊）、Center（居中）和 Right（右對齊）三個值中間的一個。 如：表示標(biāo)志對中的文本使用居中對齊方式。 . 標(biāo)志隊(duì)有來對文本進(jìn)行預(yù)

16、處理操作。,1.3 HTML基礎(chǔ),1.3.2頁面格式標(biāo)志 2.換行標(biāo)志 是一個很簡單的標(biāo)志，它沒有結(jié)束標(biāo)志，因?yàn)樗怯脕韯?chuàng)建一個回車換行的。在的使用上面還有一定的技巧，如果把加在標(biāo)志對的外邊,將創(chuàng)建一個很大的回車換行,即前面和后面的文本的行與行之間的距離很大,若放在的里面,則前面和后面的文本行與行之間的距離比較小.,1.3 HTML基礎(chǔ),1.3.2頁面格式標(biāo)志 3.列表標(biāo)志 、 用來創(chuàng)建一個普通的列表,用來創(chuàng)建列表中的上層項(xiàng)目,用來創(chuàng)建列表中最下層項(xiàng)目, 和都必須放在標(biāo)志對之間。 下面是一個創(chuàng)建普通列表的例子 一個普通的列表 中國城市 北京 上海 廣州,美國城市 華盛頓 芝加哥dd 紐約 ,1

17、.3 HTML基礎(chǔ),1.3.2頁面格式標(biāo)志 3.列表標(biāo)志 、 標(biāo)志對用來創(chuàng)建一個表有數(shù)字的列表；標(biāo)志對用來創(chuàng)建一個標(biāo)有圓點(diǎn)的列表；標(biāo)志對只能在或標(biāo)志對之間使用，此標(biāo)志對用來創(chuàng)建一個列表項(xiàng)，若放在之間則每個列表項(xiàng)加上一個數(shù)字，若放在之間則每個列表項(xiàng)加上一個圓點(diǎn)。 中國城市 北京 上海 廣州, 美國城市 華盛頓 芝加哥 紐約 ,1.3 HTML基礎(chǔ),1.3.2頁面格式標(biāo)志 標(biāo)志對用來排版大塊HTML段落，也用于格式化表，此標(biāo)志對的用法與標(biāo)志對非常相似，同樣有align對齊方式屬性。 標(biāo)題格式標(biāo)志 HTML語言提供了一系列對文本中的標(biāo)題進(jìn)行操作的標(biāo)志對：，一共有6對標(biāo)題的標(biāo)志對。是最大的標(biāo)題，而則是

18、最小的標(biāo)題，也就是說標(biāo)志中h后面的數(shù)字越大標(biāo)題文本就越小。如果HTML文檔需要輸出標(biāo)題文本，就可以使用這6對標(biāo)題中的任何一對。,1.3 HTML基礎(chǔ),1.3.3文本標(biāo)志 1.黑體字、斜體字、下劃線標(biāo)志對 用來使文本以黑體字的形式輸出。 用來使文本以斜體字的形式輸出。 用來使文本以下加一劃線的形式輸出。 2.文字字型標(biāo)志 文字字型標(biāo)志還有、。這些標(biāo)志對的用法和上面講的一樣，差別只是輸出文本是字體不一樣而已。 用來輸出打字機(jī)風(fēng)格字體的文本。 用來輸出引用方式的字體，通常是斜體。 用來輸出需要強(qiáng)調(diào)的文本（通常是斜體加黑體）。 則用來輸出加重文本（通常是斜體加黑體）。,1.3 HTML基礎(chǔ),1.3.3

19、文本標(biāo)志 3.文字大小、字體、顏色標(biāo)志 是一對很有用的標(biāo)志對，它可以對輸出文本的字體大小、顏色進(jìn)行隨意地改變，這些改變主要是通過對它的兩個屬性size和color的控制來實(shí)現(xiàn)的。Size屬性用來改變字體的大小，它可以取值：-N、N和+N；而color屬性則用來改變文本的顏色。顏色的取值可以是基本標(biāo)志中講過的十六進(jìn)制RGB顏色碼或HTML語言給定的顏色常量名。,1.3 HTML基礎(chǔ),1.3.3文本標(biāo)志 文本標(biāo)志的綜合應(yīng)用 文本標(biāo)志的綜合示例 最大的標(biāo)題 使用h3的標(biāo)題 最大的標(biāo)題 黑體字文本 斜體字文本 下加一劃線文本 打字機(jī)風(fēng)格的文本 引用方式的文本 強(qiáng)調(diào)文本 加重文本 size取值+1col

20、or取值為紅色時(shí)的文本 ,1.3 HTML基礎(chǔ),1.3.4 圖像標(biāo)志 圖像屬性賦值標(biāo)志 標(biāo)志并不是真正地將圖像加入到HTML文檔中，而是將標(biāo)志對的SRC屬性賦值。這個值是圖像文件的文件名，包括路徑，這個路徑可以是相對路徑，也可以是網(wǎng)址。實(shí)際上就是通過路徑將圖形文件嵌入到文檔中。 所謂相對路徑是指所要鏈接或嵌入到當(dāng)前HTML文檔的文件與當(dāng)前文件的相對位置所形成的路徑。 通常有如下情況： 假如HTML文件與圖形文件（假設(shè)文件名為logo.gif）在同一個目錄下，則可以將代碼寫成。 .假如圖形文件放在當(dāng)前的HTML文檔所在的目錄的一個子目錄（子目錄名假設(shè)是images）下，則代碼應(yīng)該為。 .假設(shè)圖形

21、文件放在當(dāng)前的HTML文檔所在的目錄的上層目錄（目錄名假設(shè)是home）下，則相對路徑就必須是準(zhǔn)網(wǎng)址了。即用“./”表示網(wǎng)站，然后在后面緊跟文件在網(wǎng)站中的路徑。假設(shè)home是網(wǎng)站下的一個目錄，則代碼應(yīng)為，若home是網(wǎng)站下的目錄king下面的一個子目錄，則代碼應(yīng)該為了。,1.3 HTML基礎(chǔ),1.3.4 圖像標(biāo)志 必須強(qiáng)調(diào)，src屬性在標(biāo)志中是必須賦值的，是標(biāo)志中不可缺少的一部分。除此之外，標(biāo)志還有alt 、align、 border、 width和height屬性： alt屬于是當(dāng)鼠標(biāo)移動到圖像上時(shí)顯示的文本。 align是圖形的對齊方式。 border屬性是圖形的邊框，可以取大于或者等于0的

22、整數(shù)，默認(rèn)單位是像素。 width和height屬性是圖形的寬和高，默認(rèn)單位是像素。 水平線標(biāo)志 標(biāo)志是在HTML文檔中假如一條水平線，它可以直接使用，具有size、color、width 和noshade屬性。 size是設(shè)置水平的厚度。 width是設(shè)置水平線的寬度、默認(rèn)單位為像素。 noshade屬性不需要賦值，而是直接加入標(biāo)志即可使用，它是用來假如一條沒有陰影的水平線（不假如此屬性，水平線將有陰影）。,1.3 HTML基礎(chǔ),1.3.5表格標(biāo)志 創(chuàng)建表格標(biāo)志 標(biāo)志對用來創(chuàng)建一個表格，下表所示的是屬性。,1.3 HTML基礎(chǔ),1.3.5表格標(biāo)志 行、單元格和表格頭標(biāo)志 .、 標(biāo)志對用來創(chuàng)建

23、表格的每一行。此標(biāo)志對只能放在標(biāo)志對之間使用，而在此標(biāo)志對之間加入文本是無用的，因?yàn)橹g只能緊跟標(biāo)志對才是有效的語法。 標(biāo)志對用來創(chuàng)建表格中每一行中的每一個單元格，此標(biāo)志對只有放在標(biāo)志對之間才識有效的，輸入的文本也只有放在標(biāo)志對之間才有效（即才能被顯示出來）。,1.3 HTML基礎(chǔ),、和標(biāo)志對之間的關(guān)系,1.3 HTML基礎(chǔ),1.3.5表格標(biāo)志 此外，還有align和 valign屬性， align是水平對齊方式，取值為left(左對齊)、center（居中對齊）、right（右對齊）。 valign是垂直對齊方式，取值為top(靠頂端對齊)、 middle(居中間對齊)、bottom(靠底部

24、對齊)。 具有width、colspan、rowspan和nowrap屬性。 width是單元格的寬度，單位用絕對像素值或總寬度的百分比。 colspan設(shè)置一個表格單元格跨占的列數(shù)（缺省值為1）。 rowspan設(shè)置一個表格單元格跨占的行數(shù)（缺省值為1）。 nowrap禁止對表格單元格內(nèi)的內(nèi)容自動斷行。 標(biāo)志對用來設(shè)置表格頭，文字通常是黑體、居中。,1.3 HTML基礎(chǔ),1.3.5表格標(biāo)志 標(biāo)志對用來設(shè)置表格頭，文字通常是黑體、居中。,1.3 HTML基礎(chǔ),1.3.5表格標(biāo)志 表格標(biāo)志的綜合應(yīng)用 表格標(biāo)志的綜合示例 意大利 英格蘭 西班牙 AC米蘭 拂羅倫莎 曼聯(lián) 紐卡斯?fàn)?巴塞羅那 皇家社

25、會,1.3 HTML基礎(chǔ),1.3.5表格標(biāo)志 尤文圖斯 桑普多利亞 利物普 阿申納 皇家馬德里 . 拉奇奧 國際米蘭 切爾西 米德爾斯堡 馬德里競技 . ,1.3 HTML基礎(chǔ),1.3.6鏈接標(biāo)志 1.創(chuàng)建連接頁面標(biāo)志 創(chuàng)建頁面的標(biāo)志對的href屬性無論如何是不可缺少的，標(biāo)志對之間假如需要鏈接的文本和圖像（鏈接圖像即加入標(biāo)志）。Href的值可以是網(wǎng)址或相對路徑，也可以mailto:形式。 對于第一種情況，語法為,這樣就可以創(chuàng)建一個超文本鏈接了，例如： 這是我的網(wǎng)站 對于第二種情況，語法為 ，這就創(chuàng)建了一個自動發(fā)送電子郵件的連接，mailto：后邊緊跟著要自動發(fā)送的電子郵件的地址（即E-mail

26、地址），例如： 這是我的電子郵箱（E-mail）,1.3 HTML基礎(chǔ),1.3.7 標(biāo)志幀 幀可以用來向?yàn)g覽器窗口中裝載多個HTML文件。也就是說每個HTML文件占據(jù)一個幀，而多個幀可以同時(shí)顯示在同一瀏覽器窗口中，它們組成了一個最大的幀，也就是一個包含多個HTML文檔的HTML文件（我們稱它為主文檔）。幀通常的使用方法是在一個幀中放置目錄（即可以供選擇的鏈接），然后將HTML文件顯示在另一個幀中。 幀屬性標(biāo)志 標(biāo)志對放在幀的主文檔的標(biāo)志對的外邊，也可以嵌套在其他幀的文檔中，并且可以嵌套使用。此標(biāo)志對用來定義主文檔中有幾個幀并且各個幀是如何排列的。它具有rows和cols屬性，使用標(biāo)志時(shí)這兩個屬

27、性至少必須選擇一個，否則瀏覽器窗口只顯示第一個定義的幀，剩下的一概不管，標(biāo)志對也就沒有祈禱任何作用了。 rows是用來規(guī)定主文檔中各個幀的行定位,而cols用來規(guī)定主文檔中的各個幀 的列定位。這兩個屬性的取值可以是百分?jǐn)?shù)、絕對像素值或者“*”，其中“*”代表那些未被說明的空間，如果同一個屬性中出現(xiàn)多個“*”則將剩下的未被說明的空間平均分配。同時(shí)，所有的幀按照rows和cols的值從左到右，然后從上到下排列，,1.3 HTML基礎(chǔ),1.3.7 標(biāo)志幀,1.3 HTML基礎(chǔ),1.3.7 標(biāo)志幀 幀內(nèi)容標(biāo)志 . 標(biāo)志放在之間，用來定義某一個具體的幀。標(biāo)志具有src、name、scrolling和no

28、resize屬性，其中src 和name屬性都是必須賦值的。 src是此幀的源HTML文件名（包括網(wǎng)絡(luò)路徑、相對路徑或網(wǎng)址），瀏覽器將會在此幀中顯示src指定的HTML文件。 name是此幀的名字，這個名字是用來供超文本鏈接標(biāo)志中的target屬性，用來指定鏈接的HTML文件將顯示在哪一個幀中。例如定義一個幀，名字是main,在幀中顯示的HTML文件名是jc.htm，則代碼為：。當(dāng)有一個鏈接，在單擊了這個鏈接后，文件new.htm將要顯示在名為main的幀中，則代碼為需要鏈接的文本。這樣一來，就可以在一個幀中建立網(wǎng)站的目錄，加入一系列鏈接，當(dāng)單擊鏈接以后在另一幀中顯示被鏈接的HTML文件。 s

29、crolling用來指定是否顯示滾動軸，取值可以是“yes”（顯示）、“no”（不顯示）、“auto”（若需要則會自動顯示，不需要則自動不顯示）。 noresize屬性值直接加入標(biāo)志中就可以使用，不需要賦值，它用來禁止用戶調(diào)整一個幀的大小。,1.3 HTML基礎(chǔ),1.3.7 標(biāo)志幀 . 標(biāo)志對也是放在標(biāo)志對之間，用來在那些不支持幀的瀏覽器中顯示文本或圖像信息。 幀標(biāo)志的綜合應(yīng)用 下面是一個有關(guān)幀的綜合應(yīng)用的例子。 主文檔 ： 幀標(biāo)志綜合示例 對不起,您的瀏覽器不支持幀! ,1.3 HTML基礎(chǔ),1.3.7 標(biāo)志幀 目錄頁 meun.htm: 目錄 目錄 鏈接到第一頁 鏈接到第二頁 第一頁 pa

30、gel.htm 第一頁 這是第一頁! 第二頁 page2.htm 第二頁 這是第二頁! ,1.3 HTML基礎(chǔ),1.3.8 表單標(biāo)志 創(chuàng)建表單標(biāo)志 標(biāo)志對用來創(chuàng)建一個表單，也就是定義表單的開始和結(jié)束位置，在標(biāo)志對之間的一切都屬于表單內(nèi)容。標(biāo)志還有action、method和terget屬性。 action的值是處理程序的程序名（包含絕對路徑和相對路徑），如：當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行網(wǎng)址 method屬性用來定義處理程序從表單中獲得信息的方式，可以取GET和POST中間的任何一個。GET方式是處理程序從當(dāng)前HTML文檔中獲取數(shù)據(jù)，然而這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。

31、POST方式與GET方式正好相反，它是當(dāng)前的HTML文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式大得多。 terget屬性用來指定目標(biāo)窗口或目標(biāo)幀。,1.3 HTML基礎(chǔ),1.3.8 表單標(biāo)志 定義輸入?yún)^(qū)標(biāo)志 標(biāo)志用來定義一個用戶輸入?yún)^(qū)，用戶可以在其中輸入信息。此標(biāo)志必須放在標(biāo)志對之間。 標(biāo)志中共提供了八種類型的輸入?yún)^(qū)域，具體是哪一種類型由type屬性來決定，這八種類型的具體內(nèi)容見表1-5。,1.3 HTML基礎(chǔ),1.3.8 表單標(biāo)志 3.創(chuàng)建列表框標(biāo)志 標(biāo)志對用來創(chuàng)建一個下拉列表框或可以復(fù)選的列表框。此標(biāo)志對用于標(biāo)志對之間。具有multiple、name和size屬性。 name

32、是此列表的名字，它與上面介紹的name屬性作用是一樣的。 size屬性用來設(shè)置用來設(shè)置列表的高度，缺省時(shí)值為1，若沒有設(shè)置（加入）multiple屬性，顯示的將是一個彈出式的列表框。 . 標(biāo)志是用來指定列表框的一個選項(xiàng)，它放在標(biāo)志對之間。此標(biāo)志具有selected和value屬性。Selected屬性用來指定默認(rèn)的選項(xiàng)。Value屬性用來給指定的那一個選項(xiàng)賦值，這個值是要傳送到服務(wù)器上的，服務(wù)器正是通過調(diào)用區(qū)域的名字的value屬性來獲得該區(qū)域選中的數(shù)據(jù)項(xiàng)。,1.3 HTML基礎(chǔ),1.3.8 表單標(biāo)志,1.3 HTML基礎(chǔ),1.3.8 表單標(biāo)志 4.創(chuàng)建文本框標(biāo)志 用來創(chuàng)建一個可以輸入多行的文

33、本框,此標(biāo)志對用于標(biāo)志對之間。具有name、cols和rows屬性。cols和rows屬性分別用來設(shè)置文本框的列數(shù)和行數(shù)，這里的行和列是以字符為 單位的，如表1-7例子所示。,1.3 HTML基礎(chǔ),1.3.9 多媒體標(biāo)志 多媒體標(biāo)志用于插入音樂和各種多媒體插件。 插入背景音樂標(biāo)志 用來插入背景音樂，但只適用于IE，其參數(shù)設(shè)定不多。 例如： src=your.mid 設(shè)定midi檔案及路徑，可以是相對路徑，也可以是絕對路徑。 autostart=true 是否在音樂文件傳完之后，就自動播放音樂。true表示是，false表示否（內(nèi)定值）。 loop=infinite 是否自動反復(fù)播放。loop=

34、2表示重復(fù)2次， infinite表示重復(fù)多次。 輸入各種多媒體標(biāo)志 用以插入各種多媒體，格式可以是MIDI、MAV、AIFF、AU等等，netscape及新版的IE都支持。其參數(shù)設(shè)定較多。,1.3 HTML基礎(chǔ),1.3.9 多媒體標(biāo)志 輸入各種多媒體標(biāo)志 用以插入各種多媒體，格式可以是MIDI、MAV、AIFF、AU等等，netscape及新版的IE都支持。其參數(shù)設(shè)定較多。 例如： src=your.mid 設(shè)定midi檔案及路徑，可以是相對路徑，也可以是絕對路徑。 autostart=true 是否在音樂文件傳完之后，就自動播放音樂。true表示是，false表示否（內(nèi)定值）。 loop=

35、true 是否自動反復(fù)播放。loop=2表示重復(fù)2次， infinite表示重復(fù)多次。 hidden=true 是否完全隱藏控制畫面，true為是,no為否（內(nèi)定）。 Starttime=分：秒 設(shè)定歌曲開始播放的時(shí)間。如Starttime=00：30表示從第30秒處開始播放。 Volume=0-100 設(shè)定音量的大小，數(shù)量是0到100之間。內(nèi)定值為使用者系統(tǒng)本身設(shè)定。 Width=整數(shù)和high=整數(shù),1.3 HTML基礎(chǔ),1.3.9 多媒體標(biāo)志 設(shè)定控制畫面的寬度和高度（若hidden=no）。 Align=center 設(shè)定控制畫面和旁邊文字的對齊方式，其值可以是top、bottom、c

36、enter、baseline、left right texttop、middle、absmiddle、absbottom。 Controls=smallconsole 設(shè)定控制畫面的外貌。預(yù)設(shè)值是console.其中console一般正常的面板；smallconsole較小的面板；piaybutton只顯示播放按鈕；pausebutton只顯示暫停按鈕；stopbutton只顯示停止按鈕；volumelever只顯示音量調(diào)整按鈕。,1.3 HTML基礎(chǔ),1.3.10 其他標(biāo)志 適用于IE,譯為“跑馬燈”。例如status Bar，其意思是指走動或卷動的文字，其參數(shù)設(shè)定較多。例如： hello b