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

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

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

4、ge format)由Compu-Serve公司1987年6月制訂。GIF通常對(duì)于卡通、圖像、Logo、以及帶有透明區(qū)域的圖像、動(dòng)化很有作用。 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圖像是專門針對(duì)Web開發(fā)的一種無損壓縮圖像，它的壓縮比要

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19、文本標(biāo)志 3.文字大小、字體、顏色標(biāo)志 是一對(duì)很有用的標(biāo)志對(duì)，它可以對(duì)輸出文本的字體大小、顏色進(jìn)行隨意地改變，這些改變主要是通過對(duì)它的兩個(gè)屬性size和color的控制來實(shí)現(xiàn)的。Size屬性用來改變字體的大小，它可以取值：-N、N和+N；而color屬性則用來改變文本的顏色。顏色的取值可以是基本標(biāo)志中講過的十六進(jìn)制RGB顏色碼或HTML語(yǔ)言給定的顏色常量名。,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)志對(duì)的SRC屬性賦值。這個(gè)值是圖像文件的文件名，包括路徑，這個(gè)路徑可以是相對(duì)路徑，也可以是網(wǎng)址。實(shí)際上就是通過路徑將圖形文件嵌入到文檔中。 所謂相對(duì)路徑是指所要鏈接或嵌入到當(dāng)前HTML文檔的文件與當(dāng)前文件的相對(duì)位置所形成的路徑。 通常有如下情況： 假如HTML文件與圖形文件（假設(shè)文件名為logo.gif）在同一個(gè)目錄下，則可以將代碼寫成。 .假如圖形文件放在當(dāng)前的HTML文檔所在的目錄的一個(gè)子目錄（子目錄名假設(shè)是images）下，則代碼應(yīng)該為。 .假設(shè)圖形

21、文件放在當(dāng)前的HTML文檔所在的目錄的上層目錄（目錄名假設(shè)是home）下，則相對(duì)路徑就必須是準(zhǔn)網(wǎng)址了。即用“./”表示網(wǎng)站，然后在后面緊跟文件在網(wǎng)站中的路徑。假設(shè)home是網(wǎng)站下的一個(gè)目錄，則代碼應(yīng)為，若home是網(wǎng)站下的目錄king下面的一個(gè)子目錄，則代碼應(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)移動(dòng)到圖像上時(shí)顯示的文本。 align是圖形的對(duì)齊方式。 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)志對(duì)用來創(chuàng)建一個(gè)表格，下表所示的是屬性。,1.3 HTML基礎(chǔ),1.3.5表格標(biāo)志 行、單元格和表格頭標(biāo)志 .、 標(biāo)志對(duì)用來創(chuàng)建

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

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

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

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

27、性至少必須選擇一個(gè)，否則瀏覽器窗口只顯示第一個(gè)定義的幀，剩下的一概不管，標(biāo)志對(duì)也就沒有祈禱任何作用了。 rows是用來規(guī)定主文檔中各個(gè)幀的行定位,而cols用來規(guī)定主文檔中的各個(gè)幀 的列定位。這兩個(gè)屬性的取值可以是百分?jǐn)?shù)、絕對(duì)像素值或者“*”，其中“*”代表那些未被說明的空間，如果同一個(gè)屬性中出現(xiàn)多個(gè)“*”則將剩下的未被說明的空間平均分配。同時(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)志放在之間，用來定義某一個(gè)具體的幀。標(biāo)志具有src、name、scrolling和no

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

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

30、gel.htm 第一頁(yè) 這是第一頁(yè)! 第二頁(yè) page2.htm 第二頁(yè) 這是第二頁(yè)! ,1.3 HTML基礎(chǔ),1.3.8 表單標(biāo)志 創(chuàng)建表單標(biāo)志 標(biāo)志對(duì)用來創(chuàng)建一個(gè)表單，也就是定義表單的開始和結(jié)束位置，在標(biāo)志對(duì)之間的一切都屬于表單內(nèi)容。標(biāo)志還有action、method和terget屬性。 action的值是處理程序的程序名（包含絕對(duì)路徑和相對(duì)路徑），如：當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行網(wǎng)址 method屬性用來定義處理程序從表單中獲得信息的方式，可以取GET和POST中間的任何一個(gè)。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)志用來定義一個(gè)用戶輸入?yún)^(qū)，用戶可以在其中輸入信息。此標(biāo)志必須放在標(biāo)志對(duì)之間。 標(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)志對(duì)用來創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框。此標(biāo)志對(duì)用于標(biāo)志對(duì)之間。具有multiple、name和size屬性。 name

32、是此列表的名字，它與上面介紹的name屬性作用是一樣的。 size屬性用來設(shè)置用來設(shè)置列表的高度，缺省時(shí)值為1，若沒有設(shè)置（加入）multiple屬性，顯示的將是一個(gè)彈出式的列表框。 . 標(biāo)志是用來指定列表框的一個(gè)選項(xiàng)，它放在標(biāo)志對(duì)之間。此標(biāo)志具有selected和value屬性。Selected屬性用來指定默認(rèn)的選項(xiàng)。Value屬性用來給指定的那一個(gè)選項(xiàng)賦值，這個(gè)值是要傳送到服務(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)建一個(gè)可以輸入多行的文

33、本框,此標(biāo)志對(duì)用于標(biāo)志對(duì)之間。具有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檔案及路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。 autostart=true 是否在音樂文件傳完之后，就自動(dòng)播放音樂。true表示是，false表示否（內(nèi)定值）。 loop=infinite 是否自動(dòng)反復(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檔案及路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。 autostart=true 是否在音樂文件傳完之后，就自動(dòng)播放音樂。true表示是，false表示否（內(nèi)定值）。 loop=

35、true 是否自動(dòng)反復(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è)定控制畫面和旁邊文字的對(duì)齊方式，其值可以是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，其意思是指走動(dòng)或卷動(dòng)的文字，其參數(shù)設(shè)定較多。例如： hello b