《互聯(lián)網(wǎng)html》PPT課件.ppt

《《互聯(lián)網(wǎng)html》PPT課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《《互聯(lián)網(wǎng)html》PPT課件.ppt（168頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、HTML頁面與表格,,相關(guān)的術(shù)語,網(wǎng)站 當我們在瀏覽器中輸入一個已知網(wǎng)址后，即可打開一個頁面，讓我們了解有關(guān)這個網(wǎng)址的一些信息和內(nèi)容，這個網(wǎng)址就是我們常說的網(wǎng)站。 網(wǎng)站實際上對應(yīng)的是物理的磁盤目錄，同時對應(yīng)一個 IP 地址。 常說的虛擬主機實際上是一個網(wǎng)站及其它功能的組合（郵件、數(shù)據(jù)庫等）。,相關(guān)的術(shù)語,網(wǎng)頁 又稱Web頁面，是可以被瀏覽器訪問的單個HTML超文本文件,它由文字、表格、圖片、聲音、視頻以及各種功能按鈕等組成。 而打開網(wǎng)絡(luò)由網(wǎng)址進入時第一個看到的頁面，我們通常把它稱為首頁（home page）或主頁。 由首頁所延伸下去的頁面，就是一個個網(wǎng)頁。,打個比方,網(wǎng)頁如同 word 一樣，

2、是一種文件形式，有自己的格式： Word 的文件格式是微軟定義的，很復(fù)雜，office 2007 則是 xml 格式了。 網(wǎng)頁的格式是國際標準組織定義的，叫做 w3c，具體標準是 html 標記語言格式。 網(wǎng)頁設(shè)計就是按照 html 語言格式來編寫文本文件而已。,相關(guān)的術(shù)語,服務(wù)器（Server） 服務(wù)器是局域網(wǎng)的核心設(shè)備,它管理著局域網(wǎng)中的各種資源,它的基本功能是網(wǎng)絡(luò)通信服務(wù)、管理和提供網(wǎng)絡(luò)共享資源，以及進行網(wǎng)絡(luò)管理。服務(wù)器實質(zhì)是一臺配置較高的計算機。不同的電腦操作系統(tǒng)，有不同的適用服務(wù)器軟件，如：微軟視窗windows XP Professional操作系統(tǒng)適用的服務(wù)器軟件IIS5.1 瀏

3、覽器（Browser） 用于查看Web站點的軟件被稱作瀏覽器。它是WWW的窗口,用戶可以利用瀏覽器從一個文檔跳轉(zhuǎn)到另一個文檔實現(xiàn)對整個網(wǎng)站的瀏覽,也可以下載并解釋HTML文檔中所描述的動畫、聲音、文本、圖形、圖像，并能實現(xiàn)電子郵件查看、下載文件、FTD等功能。,遠程站點(Remote Site) 遠程站點是指服務(wù)器上組成的Web站點。本地站點是指與遠程站點上的文件對應(yīng)的本地磁盤上的文件。 本地站點（Local Site） 在制作網(wǎng)頁時，首先要定義一個本地站點。作為一個網(wǎng)站，里面有很多網(wǎng)頁文件、圖片、Flash動畫等，如果不進行管理歸檔，分散在硬盤的各個地方,就無法方便地進行網(wǎng)頁發(fā)布。 定義本地

4、站點，就是在硬盤上建立一個目錄，將所有的網(wǎng)頁和相關(guān)的文件都放在里面，以便進行網(wǎng)頁的制作和管理。,相關(guān)的術(shù)語,統(tǒng)一資源定位器URL URL即Uniform Resource Locator（統(tǒng)一資源定位器）的縮寫。 用來指明主機或文件在Internet上的位置，一個URL就是一個資源在Internet上的具體位置，URL由Internet資源類型、服務(wù)器地址、端口及路徑組成，如： 無論是單一的頁面，還是龐大復(fù)雜的網(wǎng)站，甚至是一個小小的圖片，所有的網(wǎng)絡(luò)資源都能通過URL系統(tǒng)訪問到。,相關(guān)的術(shù)語,文字 文字是網(wǎng)頁最基本的構(gòu)成要素，一個網(wǎng)頁上大部分是由文字構(gòu)成的，由于文字所表達內(nèi)容比較清楚、直接,而且

5、相對占用網(wǎng)頁版面面積較小，使網(wǎng)頁所表達的信息量加大，所以網(wǎng)上用來表達內(nèi)容或鏈接的大部分是文字。 文字也稱文本，網(wǎng)頁有90左右是由文本組成。首頁上的文本基本上都是用來鏈接用的。,網(wǎng)頁界面的構(gòu)成要素,,圖形圖像 圖形和圖像也是網(wǎng)頁主要的構(gòu)成要素，它有動態(tài)和靜態(tài)之分，和文字的功能一樣，也是基本上用來鏈接用的，它比文字看上去更加直觀，更讓人容易理解內(nèi)容。 Web圖形的文件標準格式是JPG、GIF和PNG，對顏色具有平滑漸變的圖像使用JPG格式，如大多數(shù)照片；對于以單一顏色為主的圖像，使用GIF格式。,網(wǎng)頁界面的構(gòu)成要素,網(wǎng)頁界面的構(gòu)成要素,超（級）鏈接 超鏈接由兩個端點及一個方向構(gòu)成。通常開始的位置稱

6、為源端點，目標位置稱作目標端點。 鏈接就是由源端點指向目標端點的一種跳轉(zhuǎn)。目標端點可以是一個頁面、一幅圖像、一段聲音、或者是頁面中的某個位置。利用超鏈接可以實現(xiàn)文檔間或文檔中的跳轉(zhuǎn)。 根據(jù)源端點的不同，可以將超鏈接分為兩種： 超文本（Hypertext）和超鏈接（Hyperlink）。超文本就是源端點的文本的鏈接。而超鏈接是利用文本以外的對象作為源端點所創(chuàng)建的鏈接，如圖像、表單等。 超級鏈接是網(wǎng)頁之間相互調(diào)用的主要方式之一。,超級鏈接,網(wǎng)頁界面的構(gòu)成要素,交互功能 交互功能，即網(wǎng)上提供的聊天、論壇、留言本、郵件發(fā)送及接收的互動功能。 這也是互連網(wǎng)的一大優(yōu)勢所在，它給人提供了一個快捷交流的平臺，

7、給人的生活帶來了許多便利。 交互功能常常是通過表單（form）標記實現(xiàn)的。,網(wǎng)頁界面的構(gòu)成要素,多媒體（Multimedia） 多媒體就是指各種各樣的信息載體在計算機中的應(yīng)用，是一種文字、聲音、圖像、動畫和視頻影像成分的交互組合。 網(wǎng)頁中的多媒體主要指采用音頻和視頻功能的軟硬件技術(shù)，包括數(shù)字音響、全動態(tài)圖像、超媒體連接等，主要是對聲音、圖像具有編輯處理的功能，即網(wǎng)頁上提供的音頻和視頻下載及播放功能，包括Flash動畫、聲音與影片文件的播放。 它必須通過網(wǎng)絡(luò)媒體播放器來實現(xiàn)，有多種網(wǎng)絡(luò)媒體播放器。如常用的有Windows Media Player和 Realone Player等播放器。,超文本

8、標記語言HTML,是網(wǎng)頁設(shè)計的核心語言，是一切網(wǎng)頁的基礎(chǔ)描述語言 任何網(wǎng)頁都是基于這種語言描述出來的,,Html 語言描述的內(nèi)容,瀏覽器解釋顯示后的網(wǎng)頁,超文本標記語言HTML,為了全世界有一個統(tǒng)一的“世界語”，出現(xiàn)了 HTML 語言，從而統(tǒng)一了網(wǎng)頁的格式 HTML標記 基本格式：文件內(nèi)容 基本屬性：,如同 word 一樣，也有自己的文件格式，只不過比較復(fù)雜，沒有人去編寫，而是通過使用 word 來編寫 word 文件是一個意思。最常見的、最簡單的文件格式就是文本文件了！,HTML文檔,用 HTML 語言編寫的文檔就是 HTML 文檔，也常被稱為“靜態(tài)網(wǎng)頁”文件 HTML頁面的基本結(jié)構(gòu) 起始標

9、記 (html) 文件頭 (head) 文件體（body） HTML 文檔的 HTML 標記大多是“成對兒”的，即： 開始， 結(jié)束 HTML 標記大多是英文單詞或其縮寫，如： Table，表示表格 Tr（table row）,表示表的一行 HTML 的國際規(guī)范標準見：www.w3.org,HTML頁面的基本結(jié)構(gòu),,,起始標記 網(wǎng)頁標題 文件主體, 網(wǎng)頁的標題和屬性 文件主體 ,,基本結(jié)構(gòu),起始標記,,,,標記符號,標記用于HTML文檔的最前面，用來標記HTML文檔的開始,則是放在HTML文檔的最后面，用來表示HTML文檔的結(jié)束,兩個標記必須一起使用,,,文件頭,,,,結(jié)構(gòu),文件頭標記對構(gòu)成HT

10、ML文檔的開頭部分,用來描述HTML文檔相關(guān)信息,文件頭,標記對構(gòu)成HTML文檔的開頭部分,,1Title標記 ,2Base標記 ,3Link標記 ,4Meta標記 ,頁面主體格式和頁面效果,標記對之間的內(nèi)容是HTML文檔的主要部分，在此標記對之間可包含眾多的標記和信息 標記中還可以設(shè)置一些屬性,,兩個標記必須一起使用,頁面鏈接,頁面鏈接的基本概念 外部鏈接 內(nèi)部鏈接 郵件鏈接,,,了解路徑,,絕對路徑,相對路徑,絕對路徑是指完整的描述文件位置的路徑,所謂相對路徑，顧名思義就是自己相對與目標位置,外部鏈接,鏈接到外面網(wǎng)頁去，可以擴充您網(wǎng)站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的

11、世界。 一個超鏈接通常由以下3個部分構(gòu)成：,,,超鏈接標記,屬性href及其值,超鏈接中顯示頁面上顯示鏈接的文字,新浪網(wǎng),內(nèi)部鏈接,有時候，當某頁的內(nèi)容很多時，我們可以利用網(wǎng)頁的內(nèi)部鏈接，以便使用者快速的找到資料 原理：,在欲鏈接處做個記號,,鏈接時就尋找個這記號,內(nèi)部鏈接就是網(wǎng)頁中的書簽,格式,書簽內(nèi)容,內(nèi)部鏈接實例,,例如，先定義一個標簽a，然后找到“標簽名”這個標簽，就可編寫如下代碼：,書簽內(nèi)容 單擊此處監(jiān)視瀏覽器調(diào)到“標簽a”處,,郵件鏈接,郵件鏈接可使訪問者在瀏覽頁面時，只需單擊電子郵件鏈接就能打開默認的郵件編輯軟件，向指定的地址發(fā)送郵件 格式,宋老師的郵箱,訪問者單擊電子郵件鏈接時

12、，將打開默認的電子郵件編輯軟件,表格,表格的基本形式 有通欄的表格 表的大小，邊框?qū)挾?，表格間距 表格中文本的輸出 表格在文件中的位置定義 表格顏色,表格的基本形式,表格，一般用于對網(wǎng)頁的內(nèi)容進行排版 一個表格由標記開始，結(jié)束 表的內(nèi)容由,和定義,單元行,單元格,標記所標記的單元格的文字以粗體出現(xiàn)，通常用于表格的標題欄,表格的例子,, 編號 名稱 價格(元) 001 語文教材 20.00 ,有通欄的表格,1有橫向通欄的表格用屬性說明 2有縱向通欄的表格用屬性說明,#代表通欄占據(jù)的網(wǎng)格數(shù),以像素為單位,橫向通欄示例,, 圖書信息 編號 名稱 價格(元) ,表的大小，邊框?qū)挾?，表格間距,1表的大

13、小用width=#和height=#屬性說明 2邊框?qū)挾扔蒪order=#說明 3表格間距即劃分表格的線的粗細用cellspacing=#表示,寬,高,#是以像素為單位的整數(shù),表格的粗細,, 編號 名稱 價格(元) 001 語文教材 20.00 ,表格中文本的輸出,1文本與表框的距離用cellpadding=#設(shè)置 2表格的寬度大于其中的文本寬度時，文本在其中的輸出位置用“align=#”定義 3表格的高度大于其中文本的高度時，可以用valign=#說明文本在其中的位置。,#是left，center和right三者之一，分別表示左對齊，居中和右對齊,#是top，middle，bottom，ba

14、seline四者之一。分別表示頂端對齊、居中對齊、底部對齊、基線對齊,#是以像素為單位的整數(shù),001,文本與表框的距離,, 表格中文本的輸出 編號名稱價格(元) 001語文教材20.00 ,表格的高度大于其中文本的高度,, 編號 名稱 價格(元) 001 語文教材 20.00 ,表格在文件中的位置定義,表格與文件中內(nèi)容對齊時，若在現(xiàn)在位置上不能滿足其對齊方式，可定義其位置，以滿足對齊要求 屬性一般由align=left、right或center指定, 編號 名稱 價格(元) 001 語文教材 20.00 ,表格顏色,表格的顏色用bgcolor=#指定,#是16進制的6位數(shù)，格式為rrg

15、gbb,紅,綠,藍, 編號 名稱 價格(元) 001 語文教材 20.00 ,動手實踐,創(chuàng)建使用超鏈接和表格的HTML頁面 本章我們首先創(chuàng)建一個HTML頁面。在頁面中創(chuàng)建一個超鏈接，使超鏈接指向另一個顯示信息的頁面。在顯示信息的頁面中，以表格的形式顯示信息。如圖1-1、1-2所示：,HTML頁面的文字布局與文字效果,,輸入標題,一般文章都有標題、副標題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標題標記，其中n為標題的等級。 HTML提供6個等級的標題，n越小，標題的字號就越大。 一般情況下，瀏覽器對標題作如下解釋： h1 黑體，特大字體，居中，上下各有兩行空行。 h2 黑體，大字體，上下各有一到

16、兩行空行。 h3 黑體，大字體，左端微縮進，上下空行 。 h4 黑體，普通字體，比h3更多縮進，上邊空一行。 h5 黑體，與h4相同縮進，上邊空一行。 h6 黑體，與正文有相同縮進，上邊空一行 。,標題屬性,表示： left 標題居左； center 標題居中； right 標題居右 另外可以有對齊屬性，align#,居中,標題大小,劃分段落,標記對用來創(chuàng)建一個段落，在此標記對之間的文本按照段落的格式顯示在瀏覽器上。 HTML將多個空格以及回車等效為一個空格，HTML的分段完全依賴于分段標記。 也可以有多種屬性，比較常用的屬性是： align# ，#可以是：left,、center,、righ

17、t 標記用來創(chuàng)建一個回車換行。,HTML頁的文字效果,在HTML文件里，一般都有大量的文本信息。如要主次分明、重點突出的顯示這些信息，則需要在格式設(shè)定方面使用更多的標記和更詳細的設(shè)置。主要包括： 字體大小 字體風格,字體大小,html有七種字號，1號最小，7號最大。默認字號為3 。 設(shè)置文本的字號有兩種辦法： 一種是設(shè)置絕對字號， 另一種是設(shè)置文本的相對字號；,用第二種方法時“”號表示字體變大，“”號表示字體變小,字體風格,,字體風格,,物理風格,邏輯風格,直接指定字體,指定文本的作用,物理風格VS邏輯風格,物理風格 黑體，斜體，下劃線，打字機體 邏輯風格 強調(diào)、特別強調(diào)、源代碼、例子、鍵盤輸

18、入、變量、定義、引用、較小、較大 、上標、下標,幾種字體風格, 設(shè)置字體風格 黑體 斜體 下劃線 打字機風格 強調(diào) 加重 ,例子,字體顏色,字體的顏色 用指定 #可以是6位16進數(shù)，分別指定紅、綠、藍的值 也可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua之一,閃爍, 標記對可使文本閃爍，閃爍頻率為秒鐘一次。 例如： 設(shè)置字體大小 訴衷情 當年萬里覓封候，匹馬戍梁州。關(guān)河夢斷何處？塵暗舊貂裘 胡未滅，鬢先秋，淚空流。此生誰料，心在天山，身老滄洲！

19、 （在Mozilla Firefox 2.0中通過）,水平線 (hr),水平線 一般用于分隔同一文體的不同部分起到美觀的作用 在窗口中劃一條水平線非常簡單，只要寫一個即可,滾動字符,滾動字符，也稱為滾動看板、滾動字幕 活動字幕的使用使得整個網(wǎng)頁更有動感，顯得很有生氣。 現(xiàn)在的網(wǎng)站中也越來越多地使用活動字幕來加強網(wǎng)頁的互動性。 在HTML頁中可以用標記對實現(xiàn)文字的滾動,默認值為從右至左不停移動,滾動字符的屬性,標記對中的各種屬性來改變滾動字符的效果?？蛇x的參數(shù)有： align：是設(shè)定活動字幕的位置：居左、居中、居右、靠上（align=top）和靠下（align=bottom）。 Bgcol

20、or：設(shè)定活動字幕的背景顏色，一般是十六進制數(shù)。 Direction：設(shè)定活動字幕的滾動方向是向左、向右、向上、向下。 Behavior：設(shè)定滾動的方式，主要由三種方式：behavior=“scroll”表示由一端滾動到另一端；behavior=“slide”:表示由一端快速滑動到另一端，且不再重復(fù)； behavior=“alternate”表示在兩端之間來回滾動。 Height：設(shè)定滾動字幕的高度。 Width：設(shè)定滾動字幕的寬度。 Hspace和vspace：設(shè)定滾動字幕的左右邊框和上下邊框的寬度。 Scrollamount：設(shè)定活動字幕的滾動距離。 scrolldelay：設(shè)定滾動兩次之

21、間的延遲時間。 Loop：用于設(shè)定滾動的次數(shù)，當loop=-1表示一直滾動下去，直到頁面更新,示例, ... 啦啦啦，我會移動耶！ #=scroll, slide, alternate 啦啦啦，我一圈一圈繞著走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我來回走耶！ 循環(huán) #=次數(shù)；若未指定則循環(huán)不止(infinite) 啦啦啦，我只走 3 趟喲！ 啦啦啦，我只走 3 趟喲！ 啦啦啦，我只走 3 趟喲！ 速度 啦啦啦，我走得好快喲！,清單（列表）,清單用于列舉信息，常用的清單有3種格式： 無序清單（unordered List） 有序清單（ordered list） 定義清單（definition

22、 list） 作用類似 word 中的項目編號和符號。,無序清單,無序清單用開始，每一個清單條目用引導(dǎo)，最后是 輸出時每一清單條目縮進，并且以黑點標示,注意清單條目不需要結(jié)尾鏈接簽,有序清單,有序清單與無序清單相比，只是在輸出時清單條目用數(shù)字標示，以開始結(jié)束 有序清單 ,有序清單條目標記,有序清單條目標記的缺省值是阿拉伯數(shù)字，可以用type屬性修改。方法為： “#”的取值有如下幾種類型： “#”取值為“A”，顯示大寫字母。 “#”取值為“a”，顯示小寫字母。 “#”取值為“I ”，顯示大寫羅馬數(shù)字。 “#”取值為“i”，顯示小寫羅馬數(shù)字。 “#”取值為“l(fā) ”，缺省值，顯示阿拉伯數(shù)字。,有序清

23、單的幾種條目標記,定義清單,定義清單用于對清單條目進行簡短說明。 用開始，清單條目用引導(dǎo)，它的說明用引導(dǎo) ： 第一條： 定義清單 ,動手實踐,創(chuàng)建一個包含多種文字的頁面,頁面中“曾經(jīng)年少有為，而今天卻碌碌無為，失敗中的失敗?！币痪錇樵陧撁鎯啥酥g來回滾動的字幕。而“殘.孤雁個人網(wǎng)站”一句則為由右至左循環(huán)滾動的字幕。,圖像、熱點、CSS樣式定義與應(yīng)用,,插入圖像,制作頁面時，常需要在頁面上添加一些圖片，使我們的頁面更加生動。HTML提供了標記來處理圖像輸出,在網(wǎng)頁中插入圖像,HTML采用的圖像格式有g(shù)if、jpg、png 3種 在網(wǎng)頁中插入圖像時，必須使用HTML的標記 格式為： ,這個圖形文

24、件可以是本地機上的圖形，也可以是位于遠程主機上的圖形,設(shè)置圖像布局,圖像的“width=# 、height=# ”屬性。此屬性用來設(shè)定圖片大小，此寬度及高度一般采用像素作單位 ,通常只設(shè)為圖片的真實大小，以免失真，若需要改圖片大小最好使用圖像編輯工具,圖片邊框厚度,“border=# ” 屬性用來設(shè)定圖片邊框厚度 ,align=# 屬性,此屬性用來調(diào)整圖片旁邊文字的位置，你可以控制文字出現(xiàn)在圖片的偏上方、中間、底部、 左右等，可選值：top, middle, bottom, left, right，內(nèi)定為bottom 定風波-蘇軾 莫聽穿林打葉聲，何妨吟嘯且徐行。竹杖芒鞋輕勝馬，誰怕？一蓑煙雨

25、任平生。料峭春風吹酒醒，微冷，山頭斜照卻相迎?；厥紫騺硎捝?，歸去，也無風雨也無晴。 ,alt=屬性,此屬性是用以描述該圖形的文字，若用戶使用文字瀏覽器，由于不支持圖片，這些文字會代替圖片而被顯示。 若在支持圖片顯示的瀏覽器，當鼠標移至圖片上該些文字亦會顯示 ： ,熱點,標記主要用于圖像地圖，通過該標記可以在圖像地圖中設(shè)定作用區(qū)域（又稱為熱點），這樣當用戶的鼠標移到指定的作用區(qū)域點擊時，會自動鏈接到預(yù)先設(shè)定好的頁面 其基本語法結(jié)構(gòu)如下： ,CSS 樣式,豐富網(wǎng)頁標記的表現(xiàn)形式,本節(jié)內(nèi)容,認識CSS 如何在HTML中應(yīng)用CSS CSS的基本語法 字體屬性 顏色和背景屬性 定義文本間距 裝飾超鏈接

26、,什么是 CSS,CSS就是Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡稱樣式表，它是一種制作網(wǎng)頁的新技術(shù) ，例如：,H1 font: 16pt;text-align:center; color: red /*設(shè)定字體大小為16pt,居中顯示,紅色前景色*/ P font-weight: bold; color: green /*設(shè)定字體粗細為bold,綠色前景*/,打個比方,Word 中就有樣式設(shè)置，其作用于 css 類似 樣式的好處就是，可以一次設(shè)置，多次使用，類似模板的作用,,如何在HTML中應(yīng)用CSS,我們可以利用下列3種方式將CSS指定的格式加入到HTM

27、L中： 1外部連結(jié) CSS ：在HTML文件里加一個超級鏈接，連接到外部的CSS文檔。 2內(nèi)定義CSS，在HTML文件內(nèi)的.......標簽之間，加一段CSS的描述內(nèi)容。 3文本間CSS:在 HTML 文件的文本內(nèi)容中,隨時有需要，隨時加一小段 CSS 的描述指定風格。,外部連結(jié) CSS,在HTML文件里加一個超級鏈接，連接到外部的CSS文檔。 方便管理整個網(wǎng)站的網(wǎng)頁風格，讓網(wǎng)頁的文字內(nèi)容與版面設(shè)計分開 外部連結(jié) CSS /HTML,注意：style.css 文件的位置,使用外部的CSS, 卜算子.詠梅 驛外斷橋邊，寂寞開無主。 已是黃昏獨自愁，更著風和雨。 無意苦爭春，一任群芳妒。 零落

28、成泥碾作塵，只有香如故。 ,內(nèi)定義CSS,在HTML文件內(nèi)的.......標簽之間，加一段CSS的描述內(nèi)容 這個方法適用于指定某個網(wǎng)頁，除了表現(xiàn)外部的 CSS 文檔定義好的網(wǎng)頁風格外，同時還要表現(xiàn)本身HTML文檔內(nèi)指定的CSS,注意：如果內(nèi)在添加的CSS描述與外部連接的CSS描述相沖突的話，網(wǎng)頁的表現(xiàn)將以內(nèi)在添加的CSS描述為主,也就是外部的描述就不再起作用了。,使用內(nèi)部CSS, 內(nèi)定義CSS l1 卜算子.詠梅 驛外斷橋邊，寂寞開無主。 已是黃昏獨自愁，更著風和雨。 無意苦爭春，一任群芳妒。 零落成泥碾作塵，只有香如故。 ,值得注意的是,為了防止不支持CSS的瀏覽器誤將標簽間的CSS

29、風格描述當成普通字串而表現(xiàn)于網(wǎng)頁上,您最好將CSS的敘述文字插入在之間。,文本間CSS,在 HTML 文件的文本內(nèi)容中,隨時有需要，隨時加一小段 CSS 的描述指定風格 這個方法適用于指定網(wǎng)頁內(nèi)的某一小段文字的呈現(xiàn)風格, 文本間CSS 驛外斷橋邊，寂寞開無主。 已是黃昏獨自愁，更著風和雨。 無意苦爭春，一任群芳妒。 零落成泥碾作塵，只有香如故。 ,CSS的基本語法,CSS的定義是由三個部分構(gòu)成: 選擇符（selector） 屬性（properties） 屬性的取值（value） body color: black,基本格式 ：selector property: value （選擇符

30、屬性：值）,,,設(shè)置頁面顏色,P text-align: center; color: black; font-family: arial ,段落排列居中 段落中文字為黑色 字體是arial,,,,示例,字體屬性,這是最基本的屬性，您經(jīng)常都會用到。它主要包括以下這些屬性,,示例, 字體 斜體 字體大小 hongen ,顏色和背景屬性,CSS下的顏色和背景屬性,,示例, 紅色前景色 ,示例,, 設(shè)置背景圖 ,定義文本間距,CSS下文本屬性,定義文本間距,,,,字間距為1em 對齊方式為兩端對齊 縮進格為2em 行高為30pt,,我們可以從表中看到在這里可以定義文本的文字間距、字母間距、裝飾、對齊

31、方式、縮進方式和行高等屬性, 莫聽穿林打葉聲，何妨吟嘯且徐行。 竹杖芒鞋輕勝馬，誰怕？一蓑煙雨任平生。料峭春風吹酒醒，微冷，山頭斜照卻相迎。回首向來蕭瑟處， 歸去，也無風雨也無晴。 ,動手實踐,創(chuàng)建一個使用熱點做超鏈接的圖像頁面 本章我們來創(chuàng)建一個圖像頁面，在頁面中設(shè)置不同的熱點。當點擊這些熱點時使其鏈接到不同的頁面。其效果如圖3-1所示：,框架與浮動窗口,,課程目標,通過本章學習，可以掌握： HTML頁面的框架框架標記 各窗口尺寸設(shè)置 各窗口間相互操作(Frame Target) Frame的外觀 浮動窗口的使用,什么是框架,框架（frame）頁面把瀏覽器窗口切割成幾個獨立的部分。 框架頁面

32、的出現(xiàn)，使得訪問者在瀏覽器窗口中可同時觀察多個頁面。 框架也可以理解為是一種窗口，有些文章把它翻譯為“窗口”,框架，其中含2個網(wǎng)頁,框架標記,設(shè)計框架頁面時，標記和標記用于定義框架網(wǎng)頁的結(jié)構(gòu) 由于框架網(wǎng)頁的出現(xiàn)，從根本上改變了HTML文檔的傳統(tǒng)結(jié)構(gòu),因此在出現(xiàn)標記的文檔中，將不再使用標記 是用來劃分框窗，每一窗框由一個標記所標示，必須在范圍中使用,基本結(jié)構(gòu) ,框架尺寸設(shè)置,可以將窗口分割為幾塊，橫向分用ROWS屬性，縱向分用COLS屬性，每一塊的大小可以由這兩個屬性的值來實現(xiàn),例如： ,其中的任何一個數(shù)字也可以由“*”來代替,如： 將100像素以外的窗口平均分配 將窗口分為三等份 s,,C

33、olumn（列） Row（行）,示例,首先我們先創(chuàng)建3個html文件，其文件名分別為“a.html、b.html、c.html”,a.html A A ,橫向排列多個窗口,, 橫向排列多個窗口 ,縱向排列多個窗口,, 縱向排列多個窗口 ,混合排列多個窗口,, 混合排列多個窗口 ,各窗口間相互操作,由Frames分出來的幾個窗口的內(nèi)容并不是靜止不變的，往往一個窗口的內(nèi)容隨著另一個窗口的要求而不斷變化 必須為每一個窗口起一個名字，這個名字用屬性Name來定義 通過 name 屬性，可以在編程中調(diào)用并處理框架對象，比如在 javascript 中 通過 name 屬性，也可以在

34、網(wǎng)頁中引用這個框架，比如指定鏈接目標：target=,窗口標識(Frame Name),格式：,,例如：,Target屬性,,定義了窗口名稱，還應(yīng)該有Target來配合使用，Target屬性指定了所鏈接的文件出現(xiàn)在哪一窗口。 Target的值可以是name定義的名稱，也可以是以下四類值:, 顯示一個新窗口 顯示在同一個窗口 顯示在Frameset的前一份文件的窗口 顯示在整個瀏覽器窗口,Frame的外觀,1各窗口邊框的設(shè)置 2邊框色彩 3設(shè)置各窗口的上下左右邊界寬度 4各窗口間空白區(qū)域的設(shè)置 5卷滾條設(shè)置 6不可變動的框邊,來設(shè)置不可變動的框邊,各窗口邊框的設(shè)置,,Frameborder屬性用

35、來設(shè)定各窗口邊框的設(shè)置，yes表示有邊框，no表示沒有邊框, 窗口邊框的設(shè)置 ,邊框色彩,,bordercolor=#屬性用來設(shè)定邊框色彩,例 , 邊框色彩 ,設(shè)置各窗口的上下左右邊界寬度,,用來設(shè)定各窗口的上下左右邊界寬度,#的值為像素點, 設(shè)置各窗口的上下左右邊界寬度 ,各窗口間空白區(qū)域的設(shè)置,,framespacing=#屬性用來設(shè)定各窗口間空白區(qū)域，其中#為空白區(qū)域的大小, ,卷滾條設(shè)置,,用來設(shè)定滾動條 yes 表示有，no表示沒有 auto表示由瀏覽器自動設(shè)置 #缺省值是auto, 卷滾條設(shè)置 ,浮動窗口,Iframe標記，又叫浮動幀標記，可以用它將一個H

36、TML文檔嵌入在一個HTML中顯示,如同“畫中畫“電視,Iframe標記的使用,格式 :, ,文件的路徑，既可是HTML文件，也可以是文本、ASP等,畫中畫區(qū)域的寬與高,是否出現(xiàn)滾動條,區(qū)域邊框的寬度,另外， 在中還可以添加name=#屬性，屬性后面的文字將出現(xiàn)在不支持FRAMES的瀏覽器中,浮動窗口實例,我們先創(chuàng)建一個文件名叫a.html文件，其代碼如下：, 登鸛雀樓 登鸛雀樓 白日依山盡，黃河入海流。 欲窮千里目，更上一層樓。 ,主頁面代碼, 浮動窗口 ,設(shè)置浮動窗口區(qū)域的寬與高, 浮動窗口 ,效果如圖所示,設(shè)置浮動窗口區(qū)域邊框, 浮動窗口 ,動手實踐,帶有框架和浮動窗口的綜

37、合頁面,這樣的頁面是不是很漂亮？我們還可以為其添加一些浮動窗口，實現(xiàn)“畫中畫”的功能。,頁面版式控制與多媒體效果,,頁面版式控制,排版標記分為 、、、、、、、、 名稱依次為： 注釋標記 分段標記 換行標記 水平線標記 居中標記 預(yù)排版標記 定位標記,注釋標記,像很多計算機語言一樣，HTML 也提供注釋功能 用法 ： 注釋的功能：,（結(jié)束標記）,為文中不同的部分加上說明，方便日后修改,用作版權(quán)聲明,,注意: 注釋標記中沒有任何屬性。 開始標記和結(jié)束標記必須同時存在。 注解內(nèi)容允許為空。 其內(nèi)容長度不用被限制在一行內(nèi)，可以為任意長度。結(jié)束標識和開始標識可以不在一行上。,分段標記,分段標記用來定義一

38、個段落，在此標記對之間的文本按照段落的格式顯示在瀏覽器上 也可以有多種屬性，比較常用的屬性是：aligh#,HTML將多個空格以及回車等效為一個空格， HTML的分段完全依賴于分段標記,left,center,right,分段實例, 訴衷情 當年萬里覓封候，匹馬戍梁州。關(guān)河夢斷何處？塵暗舊貂裘。 胡未滅，鬢先秋，淚空流。此生誰料，心在天山，身老滄洲！ ,換行標記 ,標記用來創(chuàng)建一個回車換行 如果標記處在標記對外面，將創(chuàng)建一個大的回車換行 若處在標記對之間，標記前面和后面文本的行與行之間的距離將比較小,注意：標記只有開始標記，沒有結(jié)束標記,換行標記實例, 訴衷情 當年萬里覓封候，匹馬戍梁州。關(guān)河

39、夢斷何處？塵暗舊貂 胡未滅，鬢先秋，淚空流。此生誰料，心在天山，身老滄洲！ 訴衷情 當 年萬里覓封候，匹馬戍梁州。關(guān)河夢斷何處？塵暗舊貂裘。 胡未滅，鬢先秋，淚空流。此生誰料，心在天山，身老滄洲！ ,水平線標記,水平線標記用來把頁面分成幾個部分 標記擁有以下屬性,,1align=# 設(shè)定線條擺放位置,2size=#屬性,3width=#屬性設(shè)定線條長度,4color=#屬性,left；right；center,以像素作單位，內(nèi)定為2,以像素作單位，可以是絕對或相對值，內(nèi)定為100%,設(shè)定線條顏色，內(nèi)定為黑色,水平線實例, ,居中標記,稱為居中標記, 編號 名稱 價格(元) 001 語文教材

40、20.00 ,預(yù)排版標記,標記被稱為預(yù)排版標記。 該標記允許保留你在原代碼中輸入的空白和回車 編號 名稱 價格(元) 001 語文教材 20.00 ,很實用,,定位標記,稱為定位標記。它的作用是設(shè)定文字表格等擺放位置。 我們可以通過align屬性設(shè)定文字表格的位置 訴衷情 當年萬里覓封候，匹馬戍梁州。關(guān)河夢斷何處？塵暗舊貂裘。 胡未滅，鬢先秋，淚空流。此生誰料，心在天山，身老滄洲！ ,多媒體效果,插入背景音樂 插入多媒體,插入背景音樂, 標記是用來插入背景音樂。 ,設(shè)定背景音樂的檔案及路徑，可以是相對路徑或絕對路徑,是否在音樂檔下載完之后就自動播放。true 是，false 否

41、(默認值),是否自動反復(fù)播放。 LOOP=2 表示重復(fù)兩次， Infinite 表示重復(fù)多次,插入多媒體, 是用來插入各種多媒體 格式可以是 Midi、Wav、AIFF、AU 等等,1src=# 2autostart=# 3loop=# 4. hidden=# 5starttime=分:秒 6volume=0-100 7width=整數(shù) 和 high=整數(shù),屬性,,src=#,屬性用來設(shè)定多媒體檔案及路徑，可以是相對或絕對 ,autostart=#,autostart=# 屬性設(shè)定是否在音樂檔下載完之后就自動播放。true 是，false 否 (默認值) ,loop=#,用來設(shè)定播放次數(shù)。

42、 loop=2表示重復(fù)兩次 loop= true表示持續(xù)反復(fù)播放 loop=false表示只播放一次 ,hidden=#,是否完全隱藏控制畫面 true為是，no為否(默認) ,starttime=分:秒,設(shè)定多媒體開始播放的時間 ,設(shè)定多媒體從網(wǎng)頁打開30秒后開始播放,volume=0-100,設(shè)定音量的大小，數(shù)值是0到100之間。 內(nèi)定則為使用系統(tǒng)本身的設(shè)定 ,width=整數(shù) 和 high=整數(shù),設(shè)定控制面板的高度和寬度。 ,用標簽插入多媒體文件,其基本格式為： ,,標簽的屬性表,,表單與頁面控件,重要的編程界面接口元素,DOM文檔對象模型,從編程角度，可以將網(wǎng)頁各層次分解成

43、不同對象 瀏覽器窗口： window 網(wǎng)頁所在層面：document 網(wǎng)頁內(nèi)部層面：frame,form,button, 在編程的時候，比如 javascript，本質(zhì)上就是操作這些對象，并調(diào)用它們的屬性和方法 這些元素也是構(gòu)成與用戶交互的重要構(gòu)件,DOMdocument 文檔對象模型,DOMwindow 文檔對象模型,表單與頁面控件,表單標記 寫入標記 下拉列表框 可以輸入多行的文本框,表單標記,表單在Web網(wǎng)頁中用來給訪問者填寫信息，從而能采集客戶端信息，使網(wǎng)頁具有交互的功能 表單是由窗體和控件組成的 格式： ,處理程序的程序名(包括 網(wǎng)絡(luò)路徑:網(wǎng)址或相對路徑),從表單中獲得信息的方式,寫

44、入標記,在html語言中,標記具有重要的地位，它能夠?qū)g覽器中的控件加載到html文檔中 標志用來定義一個用戶輸入?yún)^(qū)，用戶可在其中輸入信息 標志中共提供了九種類型的輸入?yún)^(qū)域，具體是哪一種類型由type屬性來決定,該標記是單標記，沒有結(jié)束標記,必須放在標志對之間, 的屬性,,,1單行的文本輸入?yún)^(qū)域,2按鈕,3復(fù)選框,4隱藏區(qū)域,5密碼輸入?yún)^(qū),6單選按鈕類型,7使用圖像來代替Submit按鈕,,,,,,,,單行的文本輸入?yún)^(qū)域,,,(1)name定義控件名稱,(2)value指定控件初始值,,屬性及說明,(3)size指定控件寬度,(4)maxlength表示該文本輸入框允許輸入的最大字符數(shù),(5)

45、onchang 當文本改變時要執(zhí)行的函數(shù),(6)onselect 當控件被選中時要執(zhí)行的函數(shù),(7)onfocus 當文本接受焦點時要執(zhí)行的函數(shù),單行的文本輸入?yún)^(qū)域?qū)嵗?, ,標記單獨使用,必須放在之間,按鈕,,分類,,普通按鈕,提交到服務(wù)器的按鈕,重置按鈕,,,,可將表單內(nèi)容全部清除,當這個按鈕被點擊時，就會連接到表單form屬性action指定的url地址,按鈕共同的屬性,,共同的屬性,name 指定按鈕名稱。 value 指定按鈕表面顯示的文字。 onclick 指定單擊按鈕后要調(diào)用的函數(shù)。 onfocus 指定按鈕接受焦點時要調(diào)用的函數(shù),,普通按鈕,當這個按鈕被點擊時，就會調(diào)用屬性on

46、click指定的函數(shù)； 在使用這個按鈕時，一般配合使用value指定在它上面顯示的文字； 用onclick指定一個函數(shù)，一般為JavaScript的一個事件,按鈕實例,, 點擊按鈕 function msg() alert(我被點擊了.); ,復(fù)選框,checkbox用于多選,有以下屬性,name 定義控件名稱。 value 定義控件的值。 checked 設(shè)定控件初始狀態(tài)是被選中的。 onclick 定義控件被選中時要執(zhí)行的函數(shù)。 onfocus 定義控件為焦點時要執(zhí)行的函數(shù)。,,復(fù)選框?qū)嵗? 復(fù)選框 你喜歡江山還是美人？ a.江山 b.美人 c.愛江山也愛美人 ,隱藏區(qū)

47、域,用戶不能在其中輸入，用來預(yù)設(shè)某些要傳送的信息,對用戶來說是不可見的,屬性,,name 控件名稱。 value 控件默認值。 hidden隱藏控件的默認值會隨表單一起發(fā)送給服務(wù)器,例如,,,輸入密碼的區(qū)域,當用戶輸入密碼時，區(qū)域內(nèi)將會顯示“*”號,屬性,name 定義控件名稱。 value 指定控件初始值,該值就是瀏覽器被打開時在文本框中的內(nèi)容。 size 指定控件寬度,表示該文本輸入框所能顯示的最大字符數(shù)。 maxlegnth 表示該文本輸入框允許用戶輸入的最大字符數(shù)。,,密碼框?qū)嵗?, ,,,兩者的唯一區(qū)別,單選按鈕類型,radio用于單選，有以下屬性,,(1) name 定義控件

48、名稱 (2) value 定義控件的值 (3) checked 設(shè)定控件初始狀態(tài)是被選中的 (4) onclick 定義控件被選中時要執(zhí)行的函數(shù) (5) onfocus 定義控件為焦點時要執(zhí)行的函數(shù),當為單選項時，所有按鈕name屬性必需相同。如：都設(shè)置為abc,單選按鈕實例,, 你的休閑愛好是什么： 音樂 體育 旅游 ,使用圖像來代替Submit按鈕,圖像的源文件名由src屬性指定，用戶點擊后，表單中的信息和點擊位置的X、Y坐標一起傳送給服務(wù)器,屬性,,name 指定圖像按鈕名稱。 src 指定圖像的url地址,圖像按鈕實例,, ,下拉列表框,標志對用來創(chuàng)建一個菜單下拉列表框 此標志對用

49、于標志對之間,屬性,,multiple name size,設(shè)置列表的高度，缺省時值為1,,,,可多選,控件名稱,下拉列表框?qū)嵗?, 請選擇最喜歡的女歌星: 張曼玉 王菲 田震 那英 ,可以輸入多行的文本框,用來創(chuàng)建一個可以輸入多行的文本框 此標志對用于標志對之間,屬性,,(1)onchange指定控件改變時要調(diào)用的函數(shù) (2)onfocus當控件接受焦點時要執(zhí)行的函數(shù) (3)onblur當控件失去焦點時要執(zhí)行的函數(shù) (4)onselect當控件內(nèi)容被選中時要執(zhí)行的函數(shù) (5)name文字區(qū)塊的名稱，作識別之用，將會傳至CGI (6)cols文字區(qū)塊的寬度 (7)rows文字區(qū)塊的列數(shù)，即其高度 (8)wrap屬性 定義輸入內(nèi)容大于文本域時顯示的方式,, 您的意見對我很重要: 請將意見輸入此區(qū)域 ,使用必須以Post為提交方式,動手實踐,創(chuàng)建具有交互性的HTML頁面 本章我們要為HTML頁面添加一些表單控件，使頁面更加具有交互性。如圖所示：,