《HTML網(wǎng)頁設(shè)計》PPT課件.ppt

《《HTML網(wǎng)頁設(shè)計》PPT課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《《HTML網(wǎng)頁設(shè)計》PPT課件.ppt（185頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、,,HTML,,第,2,章,框架布局,總結(jié)與習(xí)題,,HTML標簽(Tag)是影響網(wǎng)頁內(nèi)容顯示格式的標記符集合，瀏覽器根據(jù)標簽決定網(wǎng)頁的顯示效果。 在HTML中，所有的標簽都用尖括號括起來絕大多數(shù)標記符都是成對出現(xiàn)的，包括開始標記符和結(jié)束標記符。 HTML標簽是不區(qū)分大小寫的，但通常約定用大寫字母，這有利于HTML文檔的維護。,,HTML屬性(Attribute)是標簽的功能選項，用來修飾、擴展或補充標簽指令的功能。多數(shù)標簽都包含自己專有的一些屬性。 屬性要放置在起始標簽中，一般放置于標簽關(guān)鍵字之后。 屬性的順序無關(guān)緊要，但標簽關(guān)鍵字與屬性、屬性與屬性之間必須包含至少一個空格 屬性和標記一樣，也

2、不區(qū)分大小寫。,帶有兩個屬性的標簽結(jié)構(gòu),帶有屬性的標簽的語法格式如下： 控制的網(wǎng)頁內(nèi)容 ,HTML文檔的基本框架,,,,,,,,,HTML 標簽,處于文檔的最前端，表示文檔的開始 位于文檔最后一行 標簽間的內(nèi)容都是HTML語法的文檔,文件頭標記符，用來描述HTML首部內(nèi)容，說明文檔的整體信息 首部信息并不出現(xiàn)在瀏覽器窗體中 通常與某些標簽一起使用,文檔標題標簽描述文檔的特色或主題 標題所在的位置可依照瀏覽器的不同而不同，但通常位于瀏覽器的最上方,定義文檔的體部，位于HTML首部下面 BODY標簽內(nèi)的文字、圖像、鏈接、表格、音頻、視頻等對象，都可顯示在瀏覽器窗體中,BODY 標簽,HEAD 標簽

3、,TITLE 標簽,1,注釋標簽 為網(wǎng)頁文檔添加注釋 注釋的內(nèi)容不會被瀏覽器所解析，也不會顯示在網(wǎng)頁中,2,標題標簽與 用來指定網(wǎng)頁的標題,3,樣式標簽與 用來定義文檔的內(nèi)置樣式表或定義某個元素的內(nèi)聯(lián)樣式,一個網(wǎng)頁文件在結(jié)構(gòu)上實際上由兩部分組成的，頭部分和主體部分。主體內(nèi)容是文檔的主要部分，也是包含文本和圖像等的可見部分。頭部內(nèi)容是除文檔標題外的不可見部分，包含文檔類型、語言編碼、搜索引擎的關(guān)鍵字和內(nèi)容指示器以及樣式定義等重要信息，這些元素并不是每個頁面都需要的。以下就是一個簡單網(wǎng)頁的代碼： 頭內(nèi)容部分 主體內(nèi)容部分 選擇菜單欄中的“插入”中“HTML”的“文件頭標簽”，如圖2.1所示

4、，在彈出的下拉菜單中的選項便是作為網(wǎng)頁頭信息插入的內(nèi)容。,圖2.1 網(wǎng)頁頭中可以插入的信息,1. META 標簽是記錄有關(guān)當前頁面信息（如字符編碼、作者、版權(quán)信息或關(guān)鍵字）的head元素。這些標簽也可以用來向服務(wù)器提供信息，如頁面的失效日期、刷新間隔和PICS等級（PICS是Internet內(nèi)容選擇平臺，它提供了向Web頁分配等級（如電影等級）的方法）。選擇圖2.1中文件頭標簽內(nèi)容的“META”命令，會彈出“META”對話框，META標簽記錄有關(guān)當前頁面的信息，在屬性項中選擇“名稱”，“值”項中輸入“author”，“內(nèi)容”項中輸入“姜楠”，這樣作者的信息就設(shè)定好了。如圖2.2所示。,圖2.

5、2 插入作者信息,“屬性”：指定Meta標簽是否包含有關(guān)頁面的描述性信息（name）或HTTP標題信息（http-equiv）。 “值”：指定在該標簽中提供的信息類型。有些值（如說明、關(guān)鍵字和刷新）是已經(jīng)定義好的，而且在Dreamweaver中有它們各自的屬性檢查器，但是可以根據(jù)實際情況指定任何值，例如 creationdate、documentID或level等。 “內(nèi)容”：是實際的信息。例如，如果為“值”指定了等級，則可以為“內(nèi)容”指定初級、中級或高級。,2. 關(guān)鍵字 許多搜索引擎裝置（自動瀏覽Web頁為搜索引擎收集信息以編入索引的程序）讀取關(guān)鍵字META標簽的內(nèi)容，并使用該信息在它們的

6、數(shù)據(jù)庫中將您的頁面編入索引。因為有些搜索引擎限制索引的關(guān)鍵字或字符的數(shù)目，或者當超過了限制的數(shù)目時，它將忽略所有的關(guān)鍵字，所以最好只使用幾個精選的關(guān)鍵字。 選擇圖2.1中文件頭標簽內(nèi)容的“關(guān)鍵字”命令，彈出“關(guān)鍵字”對話框，輸入文字，并以逗號隔開，如在該網(wǎng)絡(luò)書店的網(wǎng)頁頭中輸入“書店，電子商務(wù)，教學(xué)，圖書，出版社，作者”等。如圖2.3所示，當發(fā)布到Internet后，用戶在一些搜索引擎網(wǎng)站只要鍵入這些關(guān)鍵字就會鏈接到此網(wǎng)站。,圖2.3 插入關(guān)建字信息,3. 描述 許多搜索引擎裝置讀取描述META標簽的內(nèi)容時，將頁面編入索引，而有些還在搜索結(jié)果頁面中顯示該信息（而不只是顯示文檔的前幾行）。有

7、些搜索引擎限制索引字符的數(shù)目，所以最好將描述限制為幾個字。選擇圖2.1中文件頭標簽內(nèi)容的第三項時，會彈出“描述”對話框，輸入文字“這是一個圖書類別最多的網(wǎng)絡(luò)書店！”，如圖2.4所示。,圖2.4 插入描述信息,4. 刷新 使用刷新功能可以指定瀏覽器在一定時間后自動刷新的頁面，即重新載入頁面或跳轉(zhuǎn)到不同的頁面，如登陸論壇后稍微等一會就會轉(zhuǎn)向別的頁面就是這種辦法。選擇圖2.1中文件頭標簽內(nèi)容的第四項時，會彈出“刷新”對話框，如圖2.5所示。則該網(wǎng)絡(luò)書店的主頁（index.html）會在延遲8秒后自動跳轉(zhuǎn)到該網(wǎng)絡(luò)書店的添加新書頁面（allshow.html）進行顯示。該文件在本章實例下。,圖2.5

8、刷新對話框,5. 基礎(chǔ) 基礎(chǔ)定義了文檔的基本URL地址，在文檔中，所有相對地址形式的URL都是相對于這個URL地址而言的，例如相對地址為“image/pic.jpg”，那么真實地址應(yīng)該是“基本URL地址/image.pic.jpg”。在“本章實例”文件夾下有一個down.html文件，打開這個文件，以這個文件為例。 選擇圖2.1中文件頭標簽內(nèi)容的第五項時，會彈出“基礎(chǔ)”對話框，如圖2.6所示。在“Herf”文本框中輸入基本URL地址，如“網(wǎng)絡(luò)書店”的網(wǎng)址、在“目標”下拉列表框中，選擇鏈接頁面在哪個框架集中打開。在這里選擇“空白（_B）”，則down.html文件則會打開一個新的瀏覽器窗

9、口進行顯示。,圖2.6 基礎(chǔ)對話框,空白（_B）：表示在新窗口中打開。 父（_P）：表示在當前文檔的父級框架集中打開。 自身（_S）：表示在當前文檔的框架中打開。 頂部（_T）：表示在鏈接所在的最高級窗口中打開。 6. 鏈接 鏈接定義了網(wǎng)頁之間的鏈接關(guān)系，在HTML文檔的頭部可以包含任意多個“鏈接”標記。 選擇圖2.1中文件頭標簽內(nèi)容的“鏈接”選項時，會彈出“鏈接”對話框，如圖2.7所示。在HREF文本框中，輸入鏈接資源所在的URL地址。在ID文本框中輸入“鏈接”標記的ID值，如book，在“標題”文本框中輸入對該鏈接關(guān)系的描述，即“鏈接”標記的標題屬性，如bookshop。在Rel和

10、Rev文本框中，分別輸入文檔同鏈接資源的鏈接關(guān)系，即“鏈接”標記有Rel和Rev的屬性，如alt。,圖2.7 鏈接對話框,,由與標簽界定的部分稱為body元素，此元素定義了HTML的文檔體，是整個網(wǎng)頁內(nèi)容的核心。 標簽支持一些重要屬性，這些屬性用來設(shè)置網(wǎng)頁內(nèi)容要素的顏色、背景圖案等項目，以美化網(wǎng)頁的外觀效果，被稱為修飾屬性 。,body元素常用的修飾屬性,1,顏色標識符法 以顏色名稱的英文單詞來代表對應(yīng)的顏色值 如以red標識符代表紅色， blue藍、green綠、black黑等,2,RGB(r,g,b)函數(shù)法 r、g、b參數(shù)代表紅、綠、藍三元色的比例值 可為0,255范圍內(nèi)的整數(shù)值 也可為0

11、%,100%范圍內(nèi)的百分比值,3,16進制顏色值法 用#rrggbb形式表示顏色值 rr、gg與bb分別是兩位16進制數(shù)值，代表紅、綠、藍三原色的取值,在網(wǎng)頁中常用的幾種顏色值如下： 黑色：#000000 橄欖色：#808000 紅色：#FF0000 藍色：#0000FF 粟色：#800000 藏青色：#000080 灰色：#808080 白色：#FFFFFF 綠色：#00FF00 紫紅色：#800080 銀色：#C0C0C0 黃色：#FFFF00 設(shè)置背景色，顏色值也可以用顏色名稱來表示。 例如：和都是將網(wǎng)頁背景設(shè)置為藍色。,,body標簽中可以包含、、、等眾多版面格式標簽，用來定義在瀏覽

12、器窗口中顯示的文本信息格式。,,基準字體標簽,基準字體標簽為網(wǎng)頁的文本指定默認的字體、字號與顏色特性 重要屬性包括：face、size、color,basefont元素常用的屬性,,字體 標簽,字體標簽為網(wǎng)頁的文本指定字體、字號與顏色特性。 該標簽的重要屬性同標簽 不同的是font元素的size屬性除取1到7標準字號外，還可以取相對字號-6到6，表示在默認字號基礎(chǔ)上的偏移值。 默認字號由標簽設(shè)置 。,例：字體標記 字體標記的使用 文字大小的設(shè)置： 這是size=6時的字體 這是size=2時的字體 文字顏色的設(shè)置： 這是黑色字體 文字字體的設(shè)置： 字體設(shè)置（楷體） 字體設(shè)置（宋體） 字體設(shè)置（

13、黑體） 文字字體、大小、顏色同時使用： 這是size=5,顏色為紅色的隸書體文字 ,字體標記的使用,,文本樣式控制與修飾標簽組,HTML設(shè)置了許多文本樣式控制與修飾的標簽，這類標簽?zāi)軌蛟诓桓淖冏煮w與字號的前提下，對文本的字型、樣式與效果進行修改。 這些標簽一般不支持屬性 。,文本樣式控制與修飾標簽集合表,文本樣式控制與修飾標簽集合表(續(xù)),,居中 標簽,居中標簽 控制網(wǎng)頁文本、圖片、表格等內(nèi)容在瀏覽器窗口中居中顯示 。,例： 字符格式設(shè)置 我是標記！ ,字符格式設(shè)置標記的使用,,標題 標簽,標題標簽包含六個級別：從到。 中，n值越小，標題的字體越大，n值越大，標題的字體越小。 標題標簽自動控制

14、標題文本占用一行顯示，不須使用換行標簽 。,例： 標題示例！ hello world! hello world! hello world! hello world! hello world! hello world! ,標題的效果,,分塊 標簽,分塊標簽用來整合HTML文檔中的代碼段，并將其做為一個整體的部分進行格式的設(shè)置。 塊標簽支持align屬性 。,,分段 標簽,分段標簽將標簽之間的文本做為一個獨立的段落顯示在瀏覽器中 HTML文檔不支持網(wǎng)頁文本的自動分段與換行，需要使用分段標簽與換行標簽來達到目的 分段標簽支持align屬性,,換行 標簽,換行標簽 換行標簽為單標簽，其功能是為當前行

15、插入分行符，將后續(xù)內(nèi)容移至下一行顯示 。,,原樣顯 示標簽,預(yù)定義格式標簽：，它的功能是在瀏覽器中瀏覽時，按照文檔中預(yù)先排好的形式顯示內(nèi)容。 文本中可以包含空格、回車等特殊符號 預(yù)定義格式標簽對文本進行預(yù)處理操作,例： 顯示的區(qū)別 春曉 春眠不覺曉，處處聞啼鳥。 夜來風(fēng)雨聲，花落知多少。 春曉 春眠不覺曉，處處聞啼鳥。 夜來風(fēng)雨聲，花落知多少。 ,圖2-3 與的區(qū)別,,水平線 標簽,水平線標簽為單標簽 功能是為當前網(wǎng)頁添加一條水平分隔線 水平線標簽支持多種屬性,標簽常用的屬性,例： 標記的使用 三種標記的使用！ 我在中間！中間 我在左邊！左邊 我在右邊！右邊 ,圖2-4 三種標記的使用,特

16、殊符號、轉(zhuǎn)義字符及數(shù)字編碼對照表,,圖像 標簽,圖像標簽為單一標簽，用來在網(wǎng)頁中插入圖像或視頻 該標簽支持gif、jpg、png等圖像文件格式，及avi、rm等視頻文件格式,標簽常用的屬性表,【例】圖像標記符的使用： 圖像標記符 顯示在D盤下photo文件夾中名為flower.jpg的圖片 ,顯示效果如下圖所示：,,嵌入 標簽,嵌入標簽 用來在網(wǎng)頁中插入音頻、視頻、flash等多媒體文件 支持的媒體文件格式包括mp3、mid、wma、wav、avi、rm、swf等多種 有時需要安裝相應(yīng)的插件,標簽常用的屬性表,Pluginspage屬性：標識 Flash Player 插件的位置， 以便在尚未

17、安裝該插件時，用戶可以下載它。 輸入的值必須與上面的顯示完全一致。 僅適用于 embed 。如： pluginspage=,,背景音 樂標簽,背景音樂標簽為單一標簽 用來插入背景音樂，由微軟擴展而來，適用于IE瀏覽器 支持mid、mp3、wma等音頻文件格式,標簽常用的屬性表,,移動字 幕標簽,移動字幕標簽用來顯示循環(huán)移動的文本(移動字幕),標簽常用的屬性表,,超鏈接 標簽,超鏈接為用戶提供了通過點擊文字標識、圖片、URL地址等Web元素，便可在不同的網(wǎng)頁之間或不同類型的數(shù)據(jù)之間進行跳轉(zhuǎn)或轉(zhuǎn)換的功能 超鏈接是HTML最重要的特色之一,超鏈接的基本格式如下： 鏈接文本 語法說明 標簽表示一個超鏈

18、接的開始，表示鏈接的結(jié)束 屬性“HREF”定義了超鏈接所指的地點 通過點擊“鏈接文字”可以到達指定的文件,,錨點 標簽,錨點標簽用來定義一種稱為錨點的對象 錨點是網(wǎng)頁中被命名的一個特定位置，通過訪問指向超鏈接的錨點，能夠?qū)崿F(xiàn)不同位置間的快速轉(zhuǎn)移,標簽的主要屬性,,圖像 超鏈接,圖像超鏈接是指設(shè)定整個圖像為超鏈接的標識，當點擊圖像的任一區(qū)域時，瀏覽器將自動打開超鏈接指向的目標對象 實現(xiàn)圖像超鏈接的方法：只須將標簽鑲嵌到帶有href屬性的標簽內(nèi)即可,,圖像超鏈接的方法為 ： ,有時為使網(wǎng)頁的某些結(jié)構(gòu)化的信息更有條理性，需使用列表方式來顯示它們 列表命令可以起到提綱挈領(lǐng)的作用,,,表格是由行列交叉

19、而成的單元格組成的二維網(wǎng)格 用于組織與表達結(jié)構(gòu)化的信息 或用于規(guī)劃網(wǎng)頁布局,,,有序列 表定義, 表項1 表項2 表項n ,有序列表的type屬性值,當位于OL標記符內(nèi)時，LI標記符具有兩個常用的屬性：type和value。type屬性用于設(shè)置數(shù)字樣式，取值與OL的type屬性相同；value屬性用于指定一個新的數(shù)字序列起始值，以獲得非連續(xù)性的數(shù)字序列。,【例】創(chuàng)建不同的有序列表： 有序列表示例 用大寫羅馬字母表示的有序列表： 列表項1列表項2列表項3 編號不連續(xù)的有序列表 列表項1 列表項2列表項3 變換了數(shù)字樣式的有序列表 列表項1列表項2列表項3 ,創(chuàng)建不同的有序列表，效果如下圖

20、所示：,【例】嵌套的有序列表： 嵌套的有序列表 嵌套的有序列表 列表項1 子列表項 1 子列表項 2 子列表項 3 列表項 2 列表項 3 ,效果如下圖所示：,,無序列 表定義, 表項1 表項2 表項n ,以標記開始，以標記結(jié)束。在每一個標記處另起一行，并在列表文本前顯示加重符號，全部列表會縮排。與Word中的“項目符號”很相似。 無序列表中type屬性的取值有三種：dics表示實心圓，為默認值；circle表示為空心圓；square表示實心或空心的方塊（取決于瀏覽器）。 在 Internet Explorer中，type的值是區(qū)分大小寫的，也就是說將type指定為Circle是無法

21、獲得空心圓項目符號的，必須指定為circle才可以。,【例】 無序列表的使用：, 無序列表示例 默認的無序列表標記： 默認列表項標記一 默認列表項標記二 默認列表項標記三 ,使用方塊作為無序列表項標記： 方塊列表項標記一 方塊列表項標記二 方塊列表項標記三 ,顯示效果如下圖所示：,例有序與無序比較： 列表示例 計算機新書 ASP程序設(shè)計 HTML網(wǎng)頁設(shè)計 FrontPage使用指南 英語新書 外經(jīng)貿(mào)英語 實用英語翻譯 朗文英語語法 ,有序列表與無序列表的區(qū)別,,自定義 列表 定義, 表項1 表項1的描述 表項1的描述2 表項 ,【例】定義型列表標記的使用： 定義型列表示例 定義型列表標記

22、： 軟件說明 簡單介紹軟件的功能及基本應(yīng)用 軟件界面 用于選擇軟件外觀 ,顯示效果如下圖所示：,列表制作應(yīng)遵循的準則： （1）項目不要太多。 （2）項目要簡短易懂，能抓住重點。 （3）需要時，可以混合使用各種列表。 （4）創(chuàng)建嵌套列表時，應(yīng)遵循由內(nèi)到外，或由外到內(nèi)的思路。,,表格 標簽,表格標簽 為定義表格的引導(dǎo)標簽,,表格標 題標簽,表格標題標簽通常位于表格上方的居中位置，由標簽定義 該標簽必須緊跟在標簽之后 每個表格最多只能定義一個標題,,表格題 頭標簽,表格題頭標簽用以將表頭的一行或多行內(nèi)容組合在一起，形成表格題頭 當在瀏覽器中卷動表格時，題頭的內(nèi)容將不動，始終保持在表格頂部,,表格主

23、體標簽,表格主體標簽用以定義多行表格數(shù)據(jù)的組合體 一般位于標簽與標簽之間 若表格定義中僅包含一個tbody元素，而無thead元素與tfoot元素，則可省略與標簽,,表格腳 注標簽,表格腳注標簽用以將表尾的一行或多行內(nèi)容組合在一起，形成表格腳注 當在瀏覽器中卷動表格時，腳注的內(nèi)容將保持在表格底部不動,,表格行 標簽,表格行標簽用來定義一個表格行的完整信息 由一列或多列表頭字段或表格數(shù)據(jù)項信息構(gòu)成,,表頭 標簽,表頭標簽用來定義表頭的各個單元格內(nèi)容,,單元 格標簽,表格單元格標簽用來定義表格的一個數(shù)據(jù)單元格內(nèi)容,定義表格單元格標記和的屬性,合并單元格 如果在網(wǎng)頁中需要創(chuàng)建不規(guī)則的表格，那么就需要

24、進行單元格的合并。有時需要將兩個或更多個單元格合并為一個，這就需要應(yīng)用rowspan及colspan屬性。 （1）行合并 在和標記內(nèi)使用rowspan屬性可以進行行合并，rowspan的取值表示向下延伸合并垂直單元格的行數(shù)，實際上，rowspan這個單詞本身的含義就是跨越的行數(shù)。 （2）列合并 在和標記內(nèi)使用colspan屬性可以進行列合并，colspan的取值表示向右延伸合并水平單元格的列數(shù)。實際上，colspan這個單詞本身的含義就是跨越的列數(shù)。 如： 合并3個水平單元格 合并2個垂直單元格, 合并單元格示例 學(xué)生成績表 學(xué)號 個人信息 期末成績 姓名 班級 入學(xué)時間 數(shù)學(xué) 語文, 000

25、8 郭靖 一年級二班 2006年9月 29 80 0009 黃蓉 五年級一班 2006年9月 100 80 ,【例 】制作不規(guī)則表格：,顯示效果如下圖所示：,表格的尺寸設(shè)置,表格的尺寸設(shè)置可以通過border、width、cellspacing、cellpaddinc屬性實現(xiàn)，其中border和width屬性在前面的基本屬性中已經(jīng)介紹，這里主要介紹cellspacing和cellpaddinc屬性。 1、cellspacing屬性 該屬性的功能是表格間隙設(shè)置。在TABLE標記符中使用cellspacing屬性可以控制單元格之間的空白，屬性的取值通常都采用像素數(shù)。其基本格式為： 例如：，表

26、示表格單元之間的距離是8個像素點。,2、cellpaddinc屬性 該屬性的功能是表格內(nèi)部空白設(shè)置。在TABLE標記符中使用cellpadding屬性可以控制表格分隔線和數(shù)據(jù)之間的距離，屬性的取值通常都采用像素數(shù)。其基本格式為： 例如：，表示表格單元邊緣與單元內(nèi)容之間的距離是8個像素點。, 表格尺寸設(shè)置 表格1 此表格寬為400像素，邊框?qū)挒?像素，高50像素 表格2 中國韓國朝鮮 印度新加坡馬來西亞, 緬甸越南菲律賓 表格3 中國 韓國朝鮮 印度新加坡馬來西亞 緬甸越南菲律賓 ,【例】演示表格寬度及單元格內(nèi)和單元格間的空白,顯示效果如下圖所示：,邊框與分隔線,在TAB

27、LE標記內(nèi)使用frame、rules、border屬性可以設(shè)置表格的邊框和單元格分隔線。 1、frame屬性 格式： 表格邊框表示表格最外層的四條框線，可以用frame屬性進行控制。,frame屬性的取值可以是： （1）void 表示無邊框。Void是默認值，即默認時不顯示邊框。 （2）above 表示僅有項部邊框。 （3）below 表示僅有底部邊框。 （4）hsides 表示僅有項部邊框和底部邊框。 （5）vsides 表示僅有左、右側(cè)邊框。 （6）lhs 表示僅有左側(cè)邊框。 （7）rhs表示僅有右側(cè)邊框。 （8）box表示包含全部四個邊框。 （9）border表示包含全部四個邊框。,2、

28、 rules屬性 格式： Rules屬性用于控制是否顯示以及如何顯示單元格之間的分隔線，取值可以是以下幾種： (1) none 表示無分隔線。None是默認值，即默認時不顯示單元格間的分隔線。 (2) all:表示包括所有分隔線。 (3) rows:表示僅有行分隔線。 (4) cols:表示僅有列分隔線。 (5) groups:表示僅在行組和列組間有分隔線。,【例】用HTML代碼實現(xiàn)表格設(shè)置邊框和分隔線時的顯示效果。 表格分隔線示例 我的日程表 星期一 星期二 星期三,星期四 星期五 北京 北京 黑龍江 黑龍江 吉林 吉林 吉林 廣東 廣東 廣東 ,, 內(nèi)蒙古

29、 內(nèi)蒙古 內(nèi)蒙古 江蘇 江蘇 ,顯示效果如下圖所示：,【例】表格的嵌套： 多層表格嵌套實例！ 跟我學(xué)網(wǎng)頁制作 ,基礎(chǔ)知識簡介 第一講 HTML簡介 第二講 HTML標記 第三講 CSS基礎(chǔ) , HTML最新課堂 高級應(yīng)用技術(shù) 多層表格嵌套示例 ,表格的嵌套,,應(yīng)用范例的示范運行效果,,應(yīng)用 范例,用表格列出你最喜愛的三部電影的名字、導(dǎo)演及上映時間信

30、息，表格要求帶有表格框線，并用不同的背景顏色顯示表頭與表格數(shù)據(jù),,表單 定義,表單(form)是HTML語法的重要成分，是HTML實現(xiàn)人機交互的主要手段，用于采集用戶輸入的信息并提交給服務(wù)器，從而賦予網(wǎng)站以互動能力。 表單是實現(xiàn)動態(tài)網(wǎng)頁的主要外在形式，網(wǎng)站無論使用哪種語言來實現(xiàn)，表單都是其實現(xiàn)互動功能的統(tǒng)一外在形式。,,HTML表單作為網(wǎng)頁上的一個特定區(qū)域，由標簽對限定其作用范圍，其它的表單控件必須插入在表單區(qū)域內(nèi) 。,表單常用的控件對象,,表單 標簽,表單標簽的主要內(nèi)容為可選的各類表單控件定義 標簽的事件包括onsubmit與onreset兩類 標簽的常用屬性如下表所示 ：,標簽的常用屬性,

31、注：get將表單數(shù)據(jù)附加到請求URL中發(fā)送；post把表單數(shù)據(jù)嵌入到HTTP請求中發(fā)送。,,輸入控 件標簽,,輸入控件標簽為單一標簽 該標簽僅包含屬性，內(nèi)容一般為空 該標簽通過對type屬性賦以不同的值來創(chuàng)建命令按鈕、文本框、單選按鈕等多種輸入型表單控件，向用戶提供輸入數(shù)據(jù)的手段 。,,input 元素的定義格式為： ,type屬性、控件類型及響應(yīng)事件對照表,,標注 標簽,,標注標簽用來為表單控件添加文字說明，描述控件的類型與功能，指導(dǎo)用戶如何正確使用這些控件 該標簽常常與輸入控件標簽結(jié)合使用 該標簽之間的內(nèi)容為瀏覽器顯示的文字提示,標注元素的重要屬性,,單行 文本框,,單行文本框允許用戶輸入

32、一行信息，是Input元素的默認類型，也是使用頻率最高的一種表單控件,,單行文本框創(chuàng)建方法為： ,,密碼 文本框,,密碼文本框是一種特殊的單行文本框，主要用于保密信息(如個人登錄密碼)的輸入與顯示 當在密碼文本框中輸入字符時，瀏覽器將以屏蔽字符(一般為星號或圓點)來替換用戶輸入的內(nèi)容，從而達到保密的效果,,創(chuàng)建密碼文本框的方法為： ,,隱藏域,隱藏域是表單的特殊輸入控件，隱藏域在頁面中對用戶是不可見的，瀏覽器中無法看到隱藏域的信息 隱藏域主要用于程序設(shè)計，程序員用它來保存數(shù)據(jù)，傳遞參數(shù)，向服務(wù)器提交不允許公開的重要信息 當瀏覽者提交表單時，隱藏域的內(nèi)容會隨著一起提交給服務(wù)器上的處理程序,,創(chuàng)建

33、隱藏域的方法為： ,,命令 按鈕,表單命令按鈕控件有相似的屬性：都具有name與value屬性 表單命令按鈕控件有相似的行為：都能夠響應(yīng)鼠標單擊事件(onclick),命令按鈕控件,,,自定義按鈕 自定義按鈕為標準的windows風(fēng)格的按鈕,,,,,重置按鈕 單擊重置按鈕時，將刪除任何已經(jīng)輸入到文本框中的信息并清除所做的任何選擇，并自動恢復(fù)表單各控件的默認內(nèi)容,,,,,提交按鈕 用以將表單中的信息(包括name與value屬性值)以ASCII編碼方式提交給服務(wù)器相應(yīng)的表單處理程序,各類命令按鈕的示例,,創(chuàng)建自定義按鈕的方法為： ,,提交按鈕的創(chuàng)建方法為： ,,重置按鈕的創(chuàng)建方法為： ,,圖像

34、按鈕,,圖像按鈕以一幅圖片作為表單的提交按鈕 圖像按鈕能夠響應(yīng)單擊事件，自動提交表單信息，功能與提交按鈕十分相似 圖像按鈕用圖像來代替提交按鈕上的文本標題，因此又被稱為圖像提交按鈕,,創(chuàng)建圖像按鈕的方法為： ,圖像按鈕的示例,,單選 按鈕,,單選按鈕是一個小的空心圓環(huán)，用以提供在一組相互排斥的選項列表中一次只能選擇一項的機制,,創(chuàng)建單選按鈕的方法為： ,,復(fù)選框,,復(fù)選框允許用戶在一組選項列表中同時選擇多個選項,,創(chuàng)建復(fù)選框的方法為： ,單選按鈕、復(fù)選框的示例,,文件域,,文件域主要用于通過表單選擇并上傳文件 文件域由一個文本框和一個【瀏覽】按鈕組成，用戶既可將上傳文件的路徑與文件名直接輸入到

35、文本框中，也可通過點擊【瀏覽】按鈕，打開選擇文件對話框并從系統(tǒng)資源中查找要上傳的文件 在Email中上傳附件、上傳圖片、發(fā)送文件等應(yīng)用中，經(jīng)常會見到文件域控件,,創(chuàng)建文件域的方法為： ,文件域的示例,,文本域控件定義格式如下： ,文本域的常用屬性,文本域應(yīng)的示例,,選擇列表的通用定義格式如下： 選項標題1 選項標題n ,標簽的常用屬性,標簽的常用屬性,選擇列表示例,帶有選項分組功能的選擇列表示例,,分組 標簽,,標簽與標簽共同用來對表單中的信息進行歸類分組。,表單分組示例,例： 選擇域! 請選擇喜歡的顏色: 紅色 藍色 綠色 黑色 白色 紫色

36、 ,表單選擇示例,,框架 定義,框架(Frame)是用來分割瀏覽器窗口空間的工具，可以將一個瀏覽器窗口劃分為若干個小窗口，每個小窗口內(nèi)單獨打開一個網(wǎng)頁，各個框架中的網(wǎng)頁相互獨立，從而獲得在同一個瀏覽器窗口中同時顯示不同網(wǎng)頁的效果 框架還可以非常方便的完成導(dǎo)航工作,,,框架集 定義,框架集(Frameset)就是分布在瀏覽器窗口中的一組框架的集合 框架集一般直接定義在標簽后 框架集可以嵌套使用,,,框架 文檔,一般將定義框架集與框架的代碼放在一個獨立的HTML文檔內(nèi)，稱為框架文檔 框架文檔不再包含標簽，而以frameset標簽取代之，用來包含框架的結(jié)構(gòu)劃分信息，指示在每個框架中引用哪類網(wǎng)頁文檔。

37、, HTML文檔標題 ,框架文檔的通用格式,,,框架集 標簽組,框架集標簽組用來描述如何組織各個框架的信息 框架是框架集的基本組成元素，框架依照框架集的行與列的設(shè)置來組織自身,,標簽的重要屬性,,,框架 標簽,框架標簽為單一標簽 用來設(shè)置框架的各種特性，如框架名稱、網(wǎng)頁文檔、滾動特性等 標簽最重要的屬性為src，用來指定要在該框架中打開的網(wǎng)頁文檔的URL 框架必須定義在框架集內(nèi)，一個框架集可以包含多個框架元素,,標簽的重要屬性,【例】框架的嵌套： FRAMESET示例 ,框架結(jié)構(gòu)的使用,【例】 框架與框架中文本的間距設(shè)置： 框架的初始化 ,顯示效果如下圖所示：,,,

38、內(nèi)嵌 框架,內(nèi)嵌框架(Inline Frame)又稱為浮動框架，用來將一個框架置于HTML網(wǎng)頁內(nèi)的任何地方，其做法類似于將一幅圖像插入到網(wǎng)頁中 內(nèi)嵌框架實現(xiàn)標簽組為與。,標簽專有的三類屬性,散文網(wǎng)頁中包含圖像內(nèi)嵌框架的示例,,本章對設(shè)計網(wǎng)頁所使用的語言HTML進行了詳盡的介紹。HTML的語法、各類標簽、文檔結(jié)構(gòu)、列表、表格、超鏈接、表單、框架等內(nèi)容都是本章的重點。深入掌握HTML知識有助于制作出優(yōu)秀的網(wǎng)頁。,,,,,在HTML文檔中不必包含頭部。 ( ),一個框架集包含一組框架，框架集可以嵌套使用。 ( ),為密碼型文本框輸入數(shù)據(jù)時，回顯字符全是星號。 ( ),表單的method屬性值有兩種：get和post。( ),,,,,,,,,問答題1,舉例說明一個HTML文檔的基本結(jié)構(gòu)。,如何在網(wǎng)頁中插入圖像與背景音樂？,常用的表單有哪些？常用的控件有哪些？,表格與框架在構(gòu)建網(wǎng)頁局面中有何作用？,問答題4,問答題2,問答題3,謝謝！,