《《HTML網(wǎng)頁設(shè)計(jì)》PPT課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《《HTML網(wǎng)頁設(shè)計(jì)》PPT課件.ppt（185頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。
1、,,HTML,,第,2,章,框架布局,總結(jié)與習(xí)題,,HTML標(biāo)簽(Tag)是影響網(wǎng)頁內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器根據(jù)標(biāo)簽決定網(wǎng)頁的顯示效果。 在HTML中，所有的標(biāo)簽都用尖括號括起來絕大多數(shù)標(biāo)記符都是成對出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符。 HTML標(biāo)簽是不區(qū)分大小寫的，但通常約定用大寫字母，這有利于HTML文檔的維護(hù)。,,HTML屬性(Attribute)是標(biāo)簽的功能選項(xiàng)，用來修飾、擴(kuò)展或補(bǔ)充標(biāo)簽指令的功能。多數(shù)標(biāo)簽都包含自己專有的一些屬性。 屬性要放置在起始標(biāo)簽中，一般放置于標(biāo)簽關(guān)鍵字之后。 屬性的順序無關(guān)緊要，但標(biāo)簽關(guān)鍵字與屬性、屬性與屬性之間必須包含至少一個(gè)空格 屬性和標(biāo)記一樣，也
2、不區(qū)分大小寫。,帶有兩個(gè)屬性的標(biāo)簽結(jié)構(gòu),帶有屬性的標(biāo)簽的語法格式如下： 控制的網(wǎng)頁內(nèi)容 ,HTML文檔的基本框架,,,,,,,,,HTML 標(biāo)簽,處于文檔的最前端，表示文檔的開始 位于文檔最后一行 標(biāo)簽間的內(nèi)容都是HTML語法的文檔,文件頭標(biāo)記符，用來描述HTML首部內(nèi)容，說明文檔的整體信息 首部信息并不出現(xiàn)在瀏覽器窗體中 通常與某些標(biāo)簽一起使用,文檔標(biāo)題標(biāo)簽描述文檔的特色或主題 標(biāo)題所在的位置可依照瀏覽器的不同而不同，但通常位于瀏覽器的最上方,定義文檔的體部，位于HTML首部下面 BODY標(biāo)簽內(nèi)的文字、圖像、鏈接、表格、音頻、視頻等對象，都可顯示在瀏覽器窗體中,BODY 標(biāo)簽,HEAD 標(biāo)簽
3、,TITLE 標(biāo)簽,1,注釋標(biāo)簽 為網(wǎng)頁文檔添加注釋 注釋的內(nèi)容不會被瀏覽器所解析，也不會顯示在網(wǎng)頁中,2,標(biāo)題標(biāo)簽與 用來指定網(wǎng)頁的標(biāo)題,3,樣式標(biāo)簽與 用來定義文檔的內(nèi)置樣式表或定義某個(gè)元素的內(nèi)聯(lián)樣式,一個(gè)網(wǎng)頁文件在結(jié)構(gòu)上實(shí)際上由兩部分組成的，頭部分和主體部分。主體內(nèi)容是文檔的主要部分，也是包含文本和圖像等的可見部分。頭部內(nèi)容是除文檔標(biāo)題外的不可見部分，包含文檔類型、語言編碼、搜索引擎的關(guān)鍵字和內(nèi)容指示器以及樣式定義等重要信息，這些元素并不是每個(gè)頁面都需要的。以下就是一個(gè)簡單網(wǎng)頁的代碼： 頭內(nèi)容部分 主體內(nèi)容部分 選擇菜單欄中的“插入”中“HTML”的“文件頭標(biāo)簽”，如圖2.1所示
4、，在彈出的下拉菜單中的選項(xiàng)便是作為網(wǎng)頁頭信息插入的內(nèi)容。,圖2.1 網(wǎng)頁頭中可以插入的信息,1. META 標(biāo)簽是記錄有關(guān)當(dāng)前頁面信息（如字符編碼、作者、版權(quán)信息或關(guān)鍵字）的head元素。這些標(biāo)簽也可以用來向服務(wù)器提供信息，如頁面的失效日期、刷新間隔和PICS等級（PICS是Internet內(nèi)容選擇平臺，它提供了向Web頁分配等級（如電影等級）的方法）。選擇圖2.1中文件頭標(biāo)簽內(nèi)容的“META”命令，會彈出“META”對話框，META標(biāo)簽記錄有關(guān)當(dāng)前頁面的信息，在屬性項(xiàng)中選擇“名稱”，“值”項(xiàng)中輸入“author”，“內(nèi)容”項(xiàng)中輸入“姜楠”，這樣作者的信息就設(shè)定好了。如圖2.2所示。,圖2.
5、2 插入作者信息,“屬性”：指定Meta標(biāo)簽是否包含有關(guān)頁面的描述性信息（name）或HTTP標(biāo)題信息（http-equiv）。 “值”：指定在該標(biāo)簽中提供的信息類型。有些值（如說明、關(guān)鍵字和刷新）是已經(jīng)定義好的，而且在Dreamweaver中有它們各自的屬性檢查器，但是可以根據(jù)實(shí)際情況指定任何值，例如 creationdate、documentID或level等。 “內(nèi)容”：是實(shí)際的信息。例如，如果為“值”指定了等級，則可以為“內(nèi)容”指定初級、中級或高級。,2. 關(guān)鍵字 許多搜索引擎裝置（自動瀏覽Web頁為搜索引擎收集信息以編入索引的程序）讀取關(guān)鍵字META標(biāo)簽的內(nèi)容，并使用該信息在它們的
6、數(shù)據(jù)庫中將您的頁面編入索引。因?yàn)橛行┧阉饕嫦拗扑饕年P(guān)鍵字或字符的數(shù)目，或者當(dāng)超過了限制的數(shù)目時(shí)，它將忽略所有的關(guān)鍵字，所以最好只使用幾個(gè)精選的關(guān)鍵字。 選擇圖2.1中文件頭標(biāo)簽內(nèi)容的“關(guān)鍵字”命令，彈出“關(guān)鍵字”對話框，輸入文字，并以逗號隔開，如在該網(wǎng)絡(luò)書店的網(wǎng)頁頭中輸入“書店，電子商務(wù)，教學(xué)，圖書，出版社，作者”等。如圖2.3所示，當(dāng)發(fā)布到Internet后，用戶在一些搜索引擎網(wǎng)站只要鍵入這些關(guān)鍵字就會鏈接到此網(wǎng)站。,圖2.3 插入關(guān)建字信息,3. 描述 許多搜索引擎裝置讀取描述META標(biāo)簽的內(nèi)容時(shí)，將頁面編入索引，而有些還在搜索結(jié)果頁面中顯示該信息（而不只是顯示文檔的前幾行）。有
7、些搜索引擎限制索引字符的數(shù)目，所以最好將描述限制為幾個(gè)字。選擇圖2.1中文件頭標(biāo)簽內(nèi)容的第三項(xiàng)時(shí)，會彈出“描述”對話框，輸入文字“這是一個(gè)圖書類別最多的網(wǎng)絡(luò)書店！”，如圖2.4所示。,圖2.4 插入描述信息,4. 刷新 使用刷新功能可以指定瀏覽器在一定時(shí)間后自動刷新的頁面，即重新載入頁面或跳轉(zhuǎn)到不同的頁面，如登陸論壇后稍微等一會就會轉(zhuǎn)向別的頁面就是這種辦法。選擇圖2.1中文件頭標(biāo)簽內(nèi)容的第四項(xiàng)時(shí)，會彈出“刷新”對話框，如圖2.5所示。則該網(wǎng)絡(luò)書店的主頁（index.html）會在延遲8秒后自動跳轉(zhuǎn)到該網(wǎng)絡(luò)書店的添加新書頁面（allshow.html）進(jìn)行顯示。該文件在本章實(shí)例下。,圖2.5
8、刷新對話框,5. 基礎(chǔ) 基礎(chǔ)定義了文檔的基本URL地址，在文檔中，所有相對地址形式的URL都是相對于這個(gè)URL地址而言的，例如相對地址為“image/pic.jpg”，那么真實(shí)地址應(yīng)該是“基本URL地址/image.pic.jpg”。在“本章實(shí)例”文件夾下有一個(gè)down.html文件，打開這個(gè)文件，以這個(gè)文件為例。 選擇圖2.1中文件頭標(biāo)簽內(nèi)容的第五項(xiàng)時(shí)，會彈出“基礎(chǔ)”對話框，如圖2.6所示。在“Herf”文本框中輸入基本URL地址，如“網(wǎng)絡(luò)書店”的網(wǎng)址、在“目標(biāo)”下拉列表框中，選擇鏈接頁面在哪個(gè)框架集中打開。在這里選擇“空白（_B）”，則down.html文件則會打開一個(gè)新的瀏覽器窗
9、口進(jìn)行顯示。,圖2.6 基礎(chǔ)對話框,空白（_B）：表示在新窗口中打開。 父（_P）：表示在當(dāng)前文檔的父級框架集中打開。 自身（_S）：表示在當(dāng)前文檔的框架中打開。 頂部（_T）：表示在鏈接所在的最高級窗口中打開。 6. 鏈接 鏈接定義了網(wǎng)頁之間的鏈接關(guān)系，在HTML文檔的頭部可以包含任意多個(gè)“鏈接”標(biāo)記。 選擇圖2.1中文件頭標(biāo)簽內(nèi)容的“鏈接”選項(xiàng)時(shí)，會彈出“鏈接”對話框，如圖2.7所示。在HREF文本框中，輸入鏈接資源所在的URL地址。在ID文本框中輸入“鏈接”標(biāo)記的ID值，如book，在“標(biāo)題”文本框中輸入對該鏈接關(guān)系的描述，即“鏈接”標(biāo)記的標(biāo)題屬性，如bookshop。在Rel和
10、Rev文本框中，分別輸入文檔同鏈接資源的鏈接關(guān)系，即“鏈接”標(biāo)記有Rel和Rev的屬性，如alt。,圖2.7 鏈接對話框,,由與標(biāo)簽界定的部分稱為body元素，此元素定義了HTML的文檔體，是整個(gè)網(wǎng)頁內(nèi)容的核心。 標(biāo)簽支持一些重要屬性，這些屬性用來設(shè)置網(wǎng)頁內(nèi)容要素的顏色、背景圖案等項(xiàng)目，以美化網(wǎng)頁的外觀效果，被稱為修飾屬性 。,body元素常用的修飾屬性,1,顏色標(biāo)識符法 以顏色名稱的英文單詞來代表對應(yīng)的顏色值 如以red標(biāo)識符代表紅色， blue藍(lán)、green綠、black黑等,2,RGB(r,g,b)函數(shù)法 r、g、b參數(shù)代表紅、綠、藍(lán)三元色的比例值 可為0,255范圍內(nèi)的整數(shù)值 也可為0
11、%,100%范圍內(nèi)的百分比值,3,16進(jìn)制顏色值法 用#rrggbb形式表示顏色值 rr、gg與bb分別是兩位16進(jìn)制數(shù)值，代表紅、綠、藍(lán)三原色的取值,在網(wǎng)頁中常用的幾種顏色值如下： 黑色：#000000 橄欖色：#808000 紅色：#FF0000 藍(lán)色：#0000FF 粟色：#800000 藏青色：#000080 灰色：#808080 白色：#FFFFFF 綠色：#00FF00 紫紅色：#800080 銀色：#C0C0C0 黃色：#FFFF00 設(shè)置背景色，顏色值也可以用顏色名稱來表示。 例如：和都是將網(wǎng)頁背景設(shè)置為藍(lán)色。,,body標(biāo)簽中可以包含、、、等眾多版面格式標(biāo)簽，用來定義在瀏覽
12、器窗口中顯示的文本信息格式。,,基準(zhǔn)字體標(biāo)簽,基準(zhǔn)字體標(biāo)簽為網(wǎng)頁的文本指定默認(rèn)的字體、字號與顏色特性 重要屬性包括：face、size、color,basefont元素常用的屬性,,字體 標(biāo)簽,字體標(biāo)簽為網(wǎng)頁的文本指定字體、字號與顏色特性。 該標(biāo)簽的重要屬性同標(biāo)簽 不同的是font元素的size屬性除取1到7標(biāo)準(zhǔn)字號外，還可以取相對字號-6到6，表示在默認(rèn)字號基礎(chǔ)上的偏移值。 默認(rèn)字號由標(biāo)簽設(shè)置 。,例：字體標(biāo)記 字體標(biāo)記的使用 文字大小的設(shè)置： 這是size=6時(shí)的字體 這是size=2時(shí)的字體 文字顏色的設(shè)置： 這是黑色字體 文字字體的設(shè)置： 字體設(shè)置（楷體） 字體設(shè)置（宋體） 字體設(shè)置（
13、黑體） 文字字體、大小、顏色同時(shí)使用： 這是size=5,顏色為紅色的隸書體文字 ,字體標(biāo)記的使用,,文本樣式控制與修飾標(biāo)簽組,HTML設(shè)置了許多文本樣式控制與修飾的標(biāo)簽，這類標(biāo)簽?zāi)軌蛟诓桓淖冏煮w與字號的前提下，對文本的字型、樣式與效果進(jìn)行修改。 這些標(biāo)簽一般不支持屬性 。,文本樣式控制與修飾標(biāo)簽集合表,文本樣式控制與修飾標(biāo)簽集合表(續(xù)),,居中 標(biāo)簽,居中標(biāo)簽 控制網(wǎng)頁文本、圖片、表格等內(nèi)容在瀏覽器窗口中居中顯示 。,例： 字符格式設(shè)置 我是標(biāo)記！ ,字符格式設(shè)置標(biāo)記的使用,,標(biāo)題 標(biāo)簽,標(biāo)題標(biāo)簽包含六個(gè)級別：從到。 中，n值越小，標(biāo)題的字體越大，n值越大，標(biāo)題的字體越小。 標(biāo)題標(biāo)簽自動控制
14、標(biāo)題文本占用一行顯示，不須使用換行標(biāo)簽 。,例： 標(biāo)題示例！ hello world! hello world! hello world! hello world! hello world! hello world! ,標(biāo)題的效果,,分塊 標(biāo)簽,分塊標(biāo)簽用來整合HTML文檔中的代碼段，并將其做為一個(gè)整體的部分進(jìn)行格式的設(shè)置。 塊標(biāo)簽支持align屬性 。,,分段 標(biāo)簽,分段標(biāo)簽將標(biāo)簽之間的文本做為一個(gè)獨(dú)立的段落顯示在瀏覽器中 HTML文檔不支持網(wǎng)頁文本的自動分段與換行，需要使用分段標(biāo)簽與換行標(biāo)簽來達(dá)到目的 分段標(biāo)簽支持align屬性,,換行 標(biāo)簽,換行標(biāo)簽 換行標(biāo)簽為單標(biāo)簽，其功能是為當(dāng)前行
15、插入分行符，將后續(xù)內(nèi)容移至下一行顯示 。,,原樣顯 示標(biāo)簽,預(yù)定義格式標(biāo)簽：，它的功能是在瀏覽器中瀏覽時(shí)，按照文檔中預(yù)先排好的形式顯示內(nèi)容。 文本中可以包含空格、回車等特殊符號 預(yù)定義格式標(biāo)簽對文本進(jìn)行預(yù)處理操作,例： 顯示的區(qū)別 春曉 春眠不覺曉，處處聞啼鳥。 夜來風(fēng)雨聲，花落知多少。 春曉 春眠不覺曉，處處聞啼鳥。 夜來風(fēng)雨聲，花落知多少。 ,圖2-3 與的區(qū)別,,水平線 標(biāo)簽,水平線標(biāo)簽為單標(biāo)簽 功能是為當(dāng)前網(wǎng)頁添加一條水平分隔線 水平線標(biāo)簽支持多種屬性,標(biāo)簽常用的屬性,例： 標(biāo)記的使用 三種標(biāo)記的使用！ 我在中間！中間 我在左邊！左邊 我在右邊！右邊 ,圖2-4 三種標(biāo)記的使用,特
16、殊符號、轉(zhuǎn)義字符及數(shù)字編碼對照表,,圖像 標(biāo)簽,圖像標(biāo)簽為單一標(biāo)簽，用來在網(wǎng)頁中插入圖像或視頻 該標(biāo)簽支持gif、jpg、png等圖像文件格式，及avi、rm等視頻文件格式,標(biāo)簽常用的屬性表,【例】圖像標(biāo)記符的使用： 圖像標(biāo)記符 顯示在D盤下photo文件夾中名為flower.jpg的圖片 ,顯示效果如下圖所示：,,嵌入 標(biāo)簽,嵌入標(biāo)簽 用來在網(wǎng)頁中插入音頻、視頻、flash等多媒體文件 支持的媒體文件格式包括mp3、mid、wma、wav、avi、rm、swf等多種 有時(shí)需要安裝相應(yīng)的插件,標(biāo)簽常用的屬性表,Pluginspage屬性：標(biāo)識 Flash Player 插件的位置， 以便在尚未
17、安裝該插件時(shí)，用戶可以下載它。 輸入的值必須與上面的顯示完全一致。 僅適用于 embed 。如： pluginspage=,,背景音 樂標(biāo)簽,背景音樂標(biāo)簽為單一標(biāo)簽 用來插入背景音樂，由微軟擴(kuò)展而來，適用于IE瀏覽器 支持mid、mp3、wma等音頻文件格式,標(biāo)簽常用的屬性表,,移動字 幕標(biāo)簽,移動字幕標(biāo)簽用來顯示循環(huán)移動的文本(移動字幕),標(biāo)簽常用的屬性表,,超鏈接 標(biāo)簽,超鏈接為用戶提供了通過點(diǎn)擊文字標(biāo)識、圖片、URL地址等Web元素，便可在不同的網(wǎng)頁之間或不同類型的數(shù)據(jù)之間進(jìn)行跳轉(zhuǎn)或轉(zhuǎn)換的功能 超鏈接是HTML最重要的特色之一,超鏈接的基本格式如下： 鏈接文本 語法說明 標(biāo)簽表示一個(gè)超鏈
18、接的開始，表示鏈接的結(jié)束 屬性“HREF”定義了超鏈接所指的地點(diǎn) 通過點(diǎn)擊“鏈接文字”可以到達(dá)指定的文件,,錨點(diǎn) 標(biāo)簽,錨點(diǎn)標(biāo)簽用來定義一種稱為錨點(diǎn)的對象 錨點(diǎn)是網(wǎng)頁中被命名的一個(gè)特定位置，通過訪問指向超鏈接的錨點(diǎn)，能夠?qū)崿F(xiàn)不同位置間的快速轉(zhuǎn)移,標(biāo)簽的主要屬性,,圖像 超鏈接,圖像超鏈接是指設(shè)定整個(gè)圖像為超鏈接的標(biāo)識，當(dāng)點(diǎn)擊圖像的任一區(qū)域時(shí)，瀏覽器將自動打開超鏈接指向的目標(biāo)對象 實(shí)現(xiàn)圖像超鏈接的方法：只須將標(biāo)簽鑲嵌到帶有href屬性的標(biāo)簽內(nèi)即可,,圖像超鏈接的方法為 ： ,有時(shí)為使網(wǎng)頁的某些結(jié)構(gòu)化的信息更有條理性，需使用列表方式來顯示它們 列表命令可以起到提綱挈領(lǐng)的作用,,,表格是由行列交叉
19、而成的單元格組成的二維網(wǎng)格 用于組織與表達(dá)結(jié)構(gòu)化的信息 或用于規(guī)劃網(wǎng)頁布局,,,有序列 表定義, 表項(xiàng)1 表項(xiàng)2 表項(xiàng)n ,有序列表的type屬性值,當(dāng)位于OL標(biāo)記符內(nèi)時(shí)，LI標(biāo)記符具有兩個(gè)常用的屬性：type和value。type屬性用于設(shè)置數(shù)字樣式，取值與OL的type屬性相同；value屬性用于指定一個(gè)新的數(shù)字序列起始值，以獲得非連續(xù)性的數(shù)字序列。,【例】創(chuàng)建不同的有序列表： 有序列表示例 用大寫羅馬字母表示的有序列表： 列表項(xiàng)1列表項(xiàng)2列表項(xiàng)3 編號不連續(xù)的有序列表 列表項(xiàng)1 列表項(xiàng)2列表項(xiàng)3 變換了數(shù)字樣式的有序列表 列表項(xiàng)1列表項(xiàng)2列表項(xiàng)3 ,創(chuàng)建不同的有序列表，效果如下圖
20、所示：,【例】嵌套的有序列表： 嵌套的有序列表 嵌套的有序列表 列表項(xiàng)1 子列表項(xiàng) 1 子列表項(xiàng) 2 子列表項(xiàng) 3 列表項(xiàng) 2 列表項(xiàng) 3 ,效果如下圖所示：,,無序列 表定義, 表項(xiàng)1 表項(xiàng)2 表項(xiàng)n ,以標(biāo)記開始，以標(biāo)記結(jié)束。在每一個(gè)標(biāo)記處另起一行，并在列表文本前顯示加重符號，全部列表會縮排。與Word中的“項(xiàng)目符號”很相似。 無序列表中type屬性的取值有三種：dics表示實(shí)心圓，為默認(rèn)值；circle表示為空心圓；square表示實(shí)心或空心的方塊（取決于瀏覽器）。 在 Internet Explorer中，type的值是區(qū)分大小寫的，也就是說將type指定為Circle是無法
21、獲得空心圓項(xiàng)目符號的，必須指定為circle才可以。,【例】 無序列表的使用：, 無序列表示例 默認(rèn)的無序列表標(biāo)記： 默認(rèn)列表項(xiàng)標(biāo)記一 默認(rèn)列表項(xiàng)標(biāo)記二 默認(rèn)列表項(xiàng)標(biāo)記三 ,使用方塊作為無序列表項(xiàng)標(biāo)記： 方塊列表項(xiàng)標(biāo)記一 方塊列表項(xiàng)標(biāo)記二 方塊列表項(xiàng)標(biāo)記三 ,顯示效果如下圖所示：,例有序與無序比較： 列表示例 計(jì)算機(jī)新書 ASP程序設(shè)計(jì) HTML網(wǎng)頁設(shè)計(jì) FrontPage使用指南 英語新書 外經(jīng)貿(mào)英語 實(shí)用英語翻譯 朗文英語語法 ,有序列表與無序列表的區(qū)別,,自定義 列表 定義, 表項(xiàng)1 表項(xiàng)1的描述 表項(xiàng)1的描述2 表項(xiàng) ,【例】定義型列表標(biāo)記的使用： 定義型列表示例 定義型列表標(biāo)記
22、： 軟件說明 簡單介紹軟件的功能及基本應(yīng)用 軟件界面 用于選擇軟件外觀 ,顯示效果如下圖所示：,列表制作應(yīng)遵循的準(zhǔn)則： （1）項(xiàng)目不要太多。 （2）項(xiàng)目要簡短易懂，能抓住重點(diǎn)。 （3）需要時(shí)，可以混合使用各種列表。 （4）創(chuàng)建嵌套列表時(shí)，應(yīng)遵循由內(nèi)到外，或由外到內(nèi)的思路。,,表格 標(biāo)簽,表格標(biāo)簽 為定義表格的引導(dǎo)標(biāo)簽,,表格標(biāo) 題標(biāo)簽,表格標(biāo)題標(biāo)簽通常位于表格上方的居中位置，由標(biāo)簽定義 該標(biāo)簽必須緊跟在標(biāo)簽之后 每個(gè)表格最多只能定義一個(gè)標(biāo)題,,表格題 頭標(biāo)簽,表格題頭標(biāo)簽用以將表頭的一行或多行內(nèi)容組合在一起，形成表格題頭 當(dāng)在瀏覽器中卷動表格時(shí)，題頭的內(nèi)容將不動，始終保持在表格頂部,,表格主
23、體標(biāo)簽,表格主體標(biāo)簽用以定義多行表格數(shù)據(jù)的組合體 一般位于標(biāo)簽與標(biāo)簽之間 若表格定義中僅包含一個(gè)tbody元素，而無thead元素與tfoot元素，則可省略與標(biāo)簽,,表格腳 注標(biāo)簽,表格腳注標(biāo)簽用以將表尾的一行或多行內(nèi)容組合在一起，形成表格腳注 當(dāng)在瀏覽器中卷動表格時(shí)，腳注的內(nèi)容將保持在表格底部不動,,表格行 標(biāo)簽,表格行標(biāo)簽用來定義一個(gè)表格行的完整信息 由一列或多列表頭字段或表格數(shù)據(jù)項(xiàng)信息構(gòu)成,,表頭 標(biāo)簽,表頭標(biāo)簽用來定義表頭的各個(gè)單元格內(nèi)容,,單元 格標(biāo)簽,表格單元格標(biāo)簽用來定義表格的一個(gè)數(shù)據(jù)單元格內(nèi)容,定義表格單元格標(biāo)記和的屬性,合并單元格 如果在網(wǎng)頁中需要創(chuàng)建不規(guī)則的表格，那么就需要
24、進(jìn)行單元格的合并。有時(shí)需要將兩個(gè)或更多個(gè)單元格合并為一個(gè)，這就需要應(yīng)用rowspan及colspan屬性。 （1）行合并 在和標(biāo)記內(nèi)使用rowspan屬性可以進(jìn)行行合并，rowspan的取值表示向下延伸合并垂直單元格的行數(shù)，實(shí)際上，rowspan這個(gè)單詞本身的含義就是跨越的行數(shù)。 （2）列合并 在和標(biāo)記內(nèi)使用colspan屬性可以進(jìn)行列合并，colspan的取值表示向右延伸合并水平單元格的列數(shù)。實(shí)際上，colspan這個(gè)單詞本身的含義就是跨越的列數(shù)。 如： 合并3個(gè)水平單元格 合并2個(gè)垂直單元格, 合并單元格示例 學(xué)生成績表 學(xué)號 個(gè)人信息 期末成績 姓名 班級 入學(xué)時(shí)間 數(shù)學(xué) 語文, 000
25、8 郭靖 一年級二班 2006年9月 29 80 0009 黃蓉 五年級一班 2006年9月 100 80 ,【例 】制作不規(guī)則表格：,顯示效果如下圖所示：,表格的尺寸設(shè)置,表格的尺寸設(shè)置可以通過border、width、cellspacing、cellpaddinc屬性實(shí)現(xiàn)，其中border和width屬性在前面的基本屬性中已經(jīng)介紹，這里主要介紹cellspacing和cellpaddinc屬性。 1、cellspacing屬性 該屬性的功能是表格間隙設(shè)置。在TABLE標(biāo)記符中使用cellspacing屬性可以控制單元格之間的空白，屬性的取值通常都采用像素?cái)?shù)。其基本格式為： 例如：，表
26、示表格單元之間的距離是8個(gè)像素點(diǎn)。,2、cellpaddinc屬性 該屬性的功能是表格內(nèi)部空白設(shè)置。在TABLE標(biāo)記符中使用cellpadding屬性可以控制表格分隔線和數(shù)據(jù)之間的距離，屬性的取值通常都采用像素?cái)?shù)。其基本格式為： 例如：，表示表格單元邊緣與單元內(nèi)容之間的距離是8個(gè)像素點(diǎn)。, 表格尺寸設(shè)置 表格1 此表格寬為400像素，邊框?qū)挒?像素，高50像素 表格2 中國韓國朝鮮 印度新加坡馬來西亞, 緬甸越南菲律賓 表格3 中國 韓國朝鮮 印度新加坡馬來西亞 緬甸越南菲律賓 ,【例】演示表格寬度及單元格內(nèi)和單元格間的空白,顯示效果如下圖所示：,邊框與分隔線,在TAB
27、LE標(biāo)記內(nèi)使用frame、rules、border屬性可以設(shè)置表格的邊框和單元格分隔線。 1、frame屬性 格式： 表格邊框表示表格最外層的四條框線，可以用frame屬性進(jìn)行控制。,frame屬性的取值可以是： （1）void 表示無邊框。Void是默認(rèn)值，即默認(rèn)時(shí)不顯示邊框。 （2）above 表示僅有項(xiàng)部邊框。 （3）below 表示僅有底部邊框。 （4）hsides 表示僅有項(xiàng)部邊框和底部邊框。 （5）vsides 表示僅有左、右側(cè)邊框。 （6）lhs 表示僅有左側(cè)邊框。 （7）rhs表示僅有右側(cè)邊框。 （8）box表示包含全部四個(gè)邊框。 （9）border表示包含全部四個(gè)邊框。,2、
28、 rules屬性 格式： Rules屬性用于控制是否顯示以及如何顯示單元格之間的分隔線，取值可以是以下幾種： (1) none 表示無分隔線。None是默認(rèn)值，即默認(rèn)時(shí)不顯示單元格間的分隔線。 (2) all:表示包括所有分隔線。 (3) rows:表示僅有行分隔線。 (4) cols:表示僅有列分隔線。 (5) groups:表示僅在行組和列組間有分隔線。,【例】用HTML代碼實(shí)現(xiàn)表格設(shè)置邊框和分隔線時(shí)的顯示效果。 表格分隔線示例 我的日程表 星期一 星期二 星期三,星期四 星期五 北京 北京 黑龍江 黑龍江 吉林 吉林 吉林 廣東 廣東 廣東 ,, 內(nèi)蒙古
29、 內(nèi)蒙古 內(nèi)蒙古 江蘇 江蘇 ,顯示效果如下圖所示：,【例】表格的嵌套： 多層表格嵌套實(shí)例！ 跟我學(xué)網(wǎng)頁制作 ,基礎(chǔ)知識簡介 第一講 HTML簡介 第二講 HTML標(biāo)記 第三講 CSS基礎(chǔ) , HTML最新課堂 高級應(yīng)用技術(shù) 多層表格嵌套示例 ,表格的嵌套,,應(yīng)用范例的示范運(yùn)行效果,,應(yīng)用 范例,用表格列出你最喜愛的三部電影的名字、導(dǎo)演及上映時(shí)間信
30、息，表格要求帶有表格框線，并用不同的背景顏色顯示表頭與表格數(shù)據(jù),,表單 定義,表單(form)是HTML語法的重要成分，是HTML實(shí)現(xiàn)人機(jī)交互的主要手段，用于采集用戶輸入的信息并提交給服務(wù)器，從而賦予網(wǎng)站以互動能力。 表單是實(shí)現(xiàn)動態(tài)網(wǎng)頁的主要外在形式，網(wǎng)站無論使用哪種語言來實(shí)現(xiàn)，表單都是其實(shí)現(xiàn)互動功能的統(tǒng)一外在形式。,,HTML表單作為網(wǎng)頁上的一個(gè)特定區(qū)域，由標(biāo)簽對限定其作用范圍，其它的表單控件必須插入在表單區(qū)域內(nèi) 。,表單常用的控件對象,,表單 標(biāo)簽,表單標(biāo)簽的主要內(nèi)容為可選的各類表單控件定義 標(biāo)簽的事件包括onsubmit與onreset兩類 標(biāo)簽的常用屬性如下表所示 ：,標(biāo)簽的常用屬性,
31、注：get將表單數(shù)據(jù)附加到請求URL中發(fā)送；post把表單數(shù)據(jù)嵌入到HTTP請求中發(fā)送。,,輸入控 件標(biāo)簽,,輸入控件標(biāo)簽為單一標(biāo)簽 該標(biāo)簽僅包含屬性，內(nèi)容一般為空 該標(biāo)簽通過對type屬性賦以不同的值來創(chuàng)建命令按鈕、文本框、單選按鈕等多種輸入型表單控件，向用戶提供輸入數(shù)據(jù)的手段 。,,input 元素的定義格式為： ,type屬性、控件類型及響應(yīng)事件對照表,,標(biāo)注 標(biāo)簽,,標(biāo)注標(biāo)簽用來為表單控件添加文字說明，描述控件的類型與功能，指導(dǎo)用戶如何正確使用這些控件 該標(biāo)簽常常與輸入控件標(biāo)簽結(jié)合使用 該標(biāo)簽之間的內(nèi)容為瀏覽器顯示的文字提示,標(biāo)注元素的重要屬性,,單行 文本框,,單行文本框允許用戶輸入
32、一行信息，是Input元素的默認(rèn)類型，也是使用頻率最高的一種表單控件,,單行文本框創(chuàng)建方法為： ,,密碼 文本框,,密碼文本框是一種特殊的單行文本框，主要用于保密信息(如個(gè)人登錄密碼)的輸入與顯示 當(dāng)在密碼文本框中輸入字符時(shí)，瀏覽器將以屏蔽字符(一般為星號或圓點(diǎn))來替換用戶輸入的內(nèi)容，從而達(dá)到保密的效果,,創(chuàng)建密碼文本框的方法為： ,,隱藏域,隱藏域是表單的特殊輸入控件，隱藏域在頁面中對用戶是不可見的，瀏覽器中無法看到隱藏域的信息 隱藏域主要用于程序設(shè)計(jì)，程序員用它來保存數(shù)據(jù)，傳遞參數(shù)，向服務(wù)器提交不允許公開的重要信息 當(dāng)瀏覽者提交表單時(shí)，隱藏域的內(nèi)容會隨著一起提交給服務(wù)器上的處理程序,,創(chuàng)建
33、隱藏域的方法為： ,,命令 按鈕,表單命令按鈕控件有相似的屬性：都具有name與value屬性 表單命令按鈕控件有相似的行為：都能夠響應(yīng)鼠標(biāo)單擊事件(onclick),命令按鈕控件,,,自定義按鈕 自定義按鈕為標(biāo)準(zhǔn)的windows風(fēng)格的按鈕,,,,,重置按鈕 單擊重置按鈕時(shí)，將刪除任何已經(jīng)輸入到文本框中的信息并清除所做的任何選擇，并自動恢復(fù)表單各控件的默認(rèn)內(nèi)容,,,,,提交按鈕 用以將表單中的信息(包括name與value屬性值)以ASCII編碼方式提交給服務(wù)器相應(yīng)的表單處理程序,各類命令按鈕的示例,,創(chuàng)建自定義按鈕的方法為： ,,提交按鈕的創(chuàng)建方法為： ,,重置按鈕的創(chuàng)建方法為： ,,圖像
34、按鈕,,圖像按鈕以一幅圖片作為表單的提交按鈕 圖像按鈕能夠響應(yīng)單擊事件，自動提交表單信息，功能與提交按鈕十分相似 圖像按鈕用圖像來代替提交按鈕上的文本標(biāo)題，因此又被稱為圖像提交按鈕,,創(chuàng)建圖像按鈕的方法為： ,圖像按鈕的示例,,單選 按鈕,,單選按鈕是一個(gè)小的空心圓環(huán)，用以提供在一組相互排斥的選項(xiàng)列表中一次只能選擇一項(xiàng)的機(jī)制,,創(chuàng)建單選按鈕的方法為： ,,復(fù)選框,,復(fù)選框允許用戶在一組選項(xiàng)列表中同時(shí)選擇多個(gè)選項(xiàng),,創(chuàng)建復(fù)選框的方法為： ,單選按鈕、復(fù)選框的示例,,文件域,,文件域主要用于通過表單選擇并上傳文件 文件域由一個(gè)文本框和一個(gè)【瀏覽】按鈕組成，用戶既可將上傳文件的路徑與文件名直接輸入到
35、文本框中，也可通過點(diǎn)擊【瀏覽】按鈕，打開選擇文件對話框并從系統(tǒng)資源中查找要上傳的文件 在Email中上傳附件、上傳圖片、發(fā)送文件等應(yīng)用中，經(jīng)常會見到文件域控件,,創(chuàng)建文件域的方法為： ,文件域的示例,,文本域控件定義格式如下： ,文本域的常用屬性,文本域應(yīng)的示例,,選擇列表的通用定義格式如下： 選項(xiàng)標(biāo)題1 選項(xiàng)標(biāo)題n ,標(biāo)簽的常用屬性,標(biāo)簽的常用屬性,選擇列表示例,帶有選項(xiàng)分組功能的選擇列表示例,,分組 標(biāo)簽,,標(biāo)簽與標(biāo)簽共同用來對表單中的信息進(jìn)行歸類分組。,表單分組示例,例： 選擇域! 請選擇喜歡的顏色: 紅色 藍(lán)色 綠色 黑色 白色 紫色
36、 ,表單選擇示例,,框架 定義,框架(Frame)是用來分割瀏覽器窗口空間的工具，可以將一個(gè)瀏覽器窗口劃分為若干個(gè)小窗口，每個(gè)小窗口內(nèi)單獨(dú)打開一個(gè)網(wǎng)頁，各個(gè)框架中的網(wǎng)頁相互獨(dú)立，從而獲得在同一個(gè)瀏覽器窗口中同時(shí)顯示不同網(wǎng)頁的效果 框架還可以非常方便的完成導(dǎo)航工作,,,框架集 定義,框架集(Frameset)就是分布在瀏覽器窗口中的一組框架的集合 框架集一般直接定義在標(biāo)簽后 框架集可以嵌套使用,,,框架 文檔,一般將定義框架集與框架的代碼放在一個(gè)獨(dú)立的HTML文檔內(nèi)，稱為框架文檔 框架文檔不再包含標(biāo)簽，而以frameset標(biāo)簽取代之，用來包含框架的結(jié)構(gòu)劃分信息，指示在每個(gè)框架中引用哪類網(wǎng)頁文檔。
37、, HTML文檔標(biāo)題 ,框架文檔的通用格式,,,框架集 標(biāo)簽組,框架集標(biāo)簽組用來描述如何組織各個(gè)框架的信息 框架是框架集的基本組成元素，框架依照框架集的行與列的設(shè)置來組織自身,,標(biāo)簽的重要屬性,,,框架 標(biāo)簽,框架標(biāo)簽為單一標(biāo)簽 用來設(shè)置框架的各種特性，如框架名稱、網(wǎng)頁文檔、滾動特性等 標(biāo)簽最重要的屬性為src，用來指定要在該框架中打開的網(wǎng)頁文檔的URL 框架必須定義在框架集內(nèi)，一個(gè)框架集可以包含多個(gè)框架元素,,標(biāo)簽的重要屬性,【例】框架的嵌套： FRAMESET示例 ,框架結(jié)構(gòu)的使用,【例】 框架與框架中文本的間距設(shè)置： 框架的初始化 ,顯示效果如下圖所示：,,,
38、內(nèi)嵌 框架,內(nèi)嵌框架(Inline Frame)又稱為浮動框架，用來將一個(gè)框架置于HTML網(wǎng)頁內(nèi)的任何地方，其做法類似于將一幅圖像插入到網(wǎng)頁中 內(nèi)嵌框架實(shí)現(xiàn)標(biāo)簽組為與。,標(biāo)簽專有的三類屬性,散文網(wǎng)頁中包含圖像內(nèi)嵌框架的示例,,本章對設(shè)計(jì)網(wǎng)頁所使用的語言HTML進(jìn)行了詳盡的介紹。HTML的語法、各類標(biāo)簽、文檔結(jié)構(gòu)、列表、表格、超鏈接、表單、框架等內(nèi)容都是本章的重點(diǎn)。深入掌握HTML知識有助于制作出優(yōu)秀的網(wǎng)頁。,,,,,在HTML文檔中不必包含頭部。 ( ),一個(gè)框架集包含一組框架，框架集可以嵌套使用。 ( ),為密碼型文本框輸入數(shù)據(jù)時(shí)，回顯字符全是星號。 ( ),表單的method屬性值有兩種：get和post。( ),,,,,,,,,問答題1,舉例說明一個(gè)HTML文檔的基本結(jié)構(gòu)。,如何在網(wǎng)頁中插入圖像與背景音樂？,常用的表單有哪些？常用的控件有哪些？,表格與框架在構(gòu)建網(wǎng)頁局面中有何作用？,問答題4,問答題2,問答題3,謝謝！,
《HTML網(wǎng)頁設(shè)計(jì)》PPT課件.ppt
