HTML表格、框架-使用大全(ppt 65頁)

1、1靜態(tài)網(wǎng)站設(shè)計(jì)網(wǎng)絡(luò)技術(shù)系：李毓麗2 添加或刪除行和列添加或刪除行和列 格式化表格格式化表格 為表格添加題注為表格添加題注 嵌套表格嵌套表格3456789101112131415161718192021 選擇基本上不傳達(dá)信息的小選擇基本上不傳達(dá)信息的小巧而精致的圖像巧而精致的圖像 選擇帶有較少形狀、模式或選擇帶有較少形狀、模式或顏色的簡(jiǎn)單圖像顏色的簡(jiǎn)單圖像 選擇能夠突出文檔意圖的選擇能夠突出文檔意圖的圖像圖像 在盡可能多的瀏覽器中查看在盡可能多的瀏覽器中查看帶有表格背景圖像的帶有表格背景圖像的HTMLHTML文文檔，確保跨瀏覽器的兼容性檔，確保跨瀏覽器的兼容性222324252627282930

2、3132 框架概述框架概述 框架結(jié)構(gòu)組成標(biāo)記框架結(jié)構(gòu)組成標(biāo)記 框架集標(biāo)記框架集標(biāo)記 框架標(biāo)記框架標(biāo)記 不支持框架標(biāo)記不支持框架標(biāo)記 浮動(dòng)框架浮動(dòng)框架 框架與鏈接框架與鏈接33HTML HTML 框架允許在瀏覽器中同時(shí)顯框架允許在瀏覽器中同時(shí)顯示多個(gè)示多個(gè)HTMLHTML文檔文檔 多個(gè)頁面能夠同時(shí)在同一瀏覽器多個(gè)頁面能夠同時(shí)在同一瀏覽器可獨(dú)立滾動(dòng)的窗口中顯示可獨(dú)立滾動(dòng)的窗口中顯示 用來把瀏覽器窗口分成幾個(gè)獨(dú)立用來把瀏覽器窗口分成幾個(gè)獨(dú)立的部分的部分 每一部分可以分別包含一個(gè)單獨(dú)每一部分可以分別包含一個(gè)單獨(dú)的的HTML HTML 文檔文檔借助于框架分割瀏覽器窗口可以顯借助于框架分割瀏覽器窗口可以顯

3、著改進(jìn)外觀和可用性著改進(jìn)外觀和可用性34可以水平或垂直分割可以水平或垂直分割垂直框架具有垂直邊框垂直框架具有垂直邊框水平框架具有水平邊框水平框架具有水平邊框也可以在框架中嵌套框架也可以在框架中嵌套框架在定義框架間的交互之前在定義框架間的交互之前必須先設(shè)定布局必須先設(shè)定布局35使網(wǎng)頁內(nèi)容看起來更美觀使網(wǎng)頁內(nèi)容看起來更美觀減少了網(wǎng)站的下載時(shí)間減少了網(wǎng)站的下載時(shí)間提高了網(wǎng)站的可用性提高了網(wǎng)站的可用性導(dǎo)航部分仍然可見，因?yàn)閮?nèi)容在導(dǎo)航部分仍然可見，因?yàn)閮?nèi)容在單獨(dú)的框架中改變單獨(dú)的框架中改變框架允許開發(fā)者將內(nèi)容與導(dǎo)航和框架允許開發(fā)者將內(nèi)容與導(dǎo)航和結(jié)構(gòu)元素分離結(jié)構(gòu)元素分離有助于輕松、快速地更新內(nèi)容有助于輕松

4、、快速地更新內(nèi)容36老版本的瀏覽器不支持框架老版本的瀏覽器不支持框架開發(fā)者需要?jiǎng)?chuàng)建并組織多個(gè)文件來充開發(fā)者需要?jiǎng)?chuàng)建并組織多個(gè)文件來充實(shí)頁面，使站點(diǎn)創(chuàng)建更復(fù)雜實(shí)頁面，使站點(diǎn)創(chuàng)建更復(fù)雜框架結(jié)構(gòu)的框架結(jié)構(gòu)的Web Web 站點(diǎn)不允許訪問者在站點(diǎn)不允許訪問者在一個(gè)框架結(jié)構(gòu)的文檔中為頁面加入書一個(gè)框架結(jié)構(gòu)的文檔中為頁面加入書簽簽框架結(jié)構(gòu)的框架結(jié)構(gòu)的Web Web 站點(diǎn)會(huì)增加服務(wù)器負(fù)站點(diǎn)會(huì)增加服務(wù)器負(fù)載，導(dǎo)致過多的文檔請(qǐng)求載，導(dǎo)致過多的文檔請(qǐng)求框架結(jié)構(gòu)的框架結(jié)構(gòu)的Web Web 站點(diǎn)會(huì)使搜索引擎產(chǎn)站點(diǎn)會(huì)使搜索引擎產(chǎn)生問題生問題在框架結(jié)構(gòu)的在框架結(jié)構(gòu)的Web Web 站點(diǎn)中很難跟蹤一站點(diǎn)中很難跟蹤一個(gè)頁面?zhèn)€

5、頁面37確定要?jiǎng)?chuàng)建的框架大小確定要?jiǎng)?chuàng)建的框架大小創(chuàng)建框架集文檔，確定各框架創(chuàng)建框架集文檔，確定各框架的位置和特性的位置和特性指定框架和其中的內(nèi)容指定框架和其中的內(nèi)容格式化框架格式化框架預(yù)先為在非框架結(jié)構(gòu)的瀏覽器預(yù)先為在非框架結(jié)構(gòu)的瀏覽器中顯示框架做好準(zhǔn)備中顯示框架做好準(zhǔn)備38框架集標(biāo)記框架集標(biāo)記：主主要是定義瀏覽器窗口的分割要是定義瀏覽器窗口的分割方式，以及各分割窗口（框方式，以及各分割窗口（框架）的大小架）的大小框架標(biāo)記框架標(biāo)記：定義各定義各分割窗口中顯示的內(nèi)容，并分割窗口中顯示的內(nèi)容，并能對(duì)各分割窗口進(jìn)行格式化能對(duì)各分割窗口進(jìn)行格式化39 框架分割窗口方式框架分割窗口方式：左右（水平）分割

6、左右（水平）分割上下（垂直）分割上下（垂直）分割嵌套分割：瀏覽器窗口既嵌套分割：瀏覽器窗口既存在左右分割，又存在上存在左右分割，又存在上下分割下分割 40 基本語法基本語法 frameset . .41 語法解釋語法解釋 colscols屬性決定了窗口的分割方屬性決定了窗口的分割方式為左右分割；式為左右分割；“value”value”定義定義各個(gè)框架的大小，單位可以是各個(gè)框架的大小，單位可以是像素，也可以是百分比；像素，也可以是百分比；valuevalue的個(gè)數(shù)決定了的個(gè)數(shù)決定了標(biāo)記的個(gè)標(biāo)記的個(gè)數(shù)，即窗口的個(gè)數(shù)，而數(shù)，即窗口的個(gè)數(shù)，而valuevalue的的值則決定了相應(yīng)窗口的大小值則決定了相

7、應(yīng)窗口的大小42 43 基本語法基本語法: . 44 rowsrows屬性決定了窗口的分割方式為屬性決定了窗口的分割方式為上下分割；上下分割；“value”value”定義各個(gè)框架定義各個(gè)框架的大小，單位可以是像素，也可以的大小，單位可以是像素，也可以是百分比；是百分比；valuevalue的個(gè)數(shù)決定了的個(gè)數(shù)決定了標(biāo)記的個(gè)數(shù)，即窗口的個(gè)數(shù)，標(biāo)記的個(gè)數(shù)，即窗口的個(gè)數(shù)，而而valuevalue的值則決定了相應(yīng)窗口的大的值則決定了相應(yīng)窗口的大小小45 46 基本語法基本語法 .47 484950 基本語法基本語法 frameset cols=“value,value,” frame src=url

8、name=“frame_name” frame src=url name=“frame_name” . . 51 語法解釋語法解釋 srcsrc屬性用于設(shè)置在框架窗屬性用于設(shè)置在框架窗口中顯示的內(nèi)容來自的文件；口中顯示的內(nèi)容來自的文件；namename屬性用于標(biāo)記框架名稱，屬性用于標(biāo)記框架名稱，以便于其他對(duì)象對(duì)它的引用，以便于其他對(duì)象對(duì)它的引用，如作為鏈接的一個(gè)目標(biāo)窗口如作為鏈接的一個(gè)目標(biāo)窗口52 5354 框架屬性說明框架屬性說明使用框架的屬性，可設(shè)置框使用框架的屬性，可設(shè)置框架顯示的內(nèi)容以及對(duì)框架進(jìn)架顯示的內(nèi)容以及對(duì)框架進(jìn)行格式化行格式化對(duì)框架的格式化包括更改邊對(duì)框架的格式化包括更改邊框、

9、調(diào)整頁邊距和指定顏色框、調(diào)整頁邊距和指定顏色以及由訪問者對(duì)它的使用實(shí)以及由訪問者對(duì)它的使用實(shí)行控制行控制55 code/frame_tol.htmlcode/frame_tol.html 框架綜合示例代碼框架綜合示例代碼56浮動(dòng)框架是一種特殊的框架頁浮動(dòng)框架是一種特殊的框架頁面，其作為面，其作為HTMLHTML文檔的文檔的一部分一部分，就象圖像一樣出現(xiàn)在就象圖像一樣出現(xiàn)在HTMLHTML文檔文檔中。浮動(dòng)框架允許將一個(gè)中。浮動(dòng)框架允許將一個(gè)HTMLHTML文檔插入到另一個(gè)文檔插入到另一個(gè)HTMLHTML文檔內(nèi)文檔內(nèi)部的部的某個(gè)區(qū)域某個(gè)區(qū)域。使用浮動(dòng)框架時(shí)必須設(shè)置該框使用浮動(dòng)框架時(shí)必須設(shè)置該框架的

10、大小，即框架的高度和寬架的大小，即框架的高度和寬度度57 基本語法基本語法 iframeset src=“” 58 59 60框架的一個(gè)重要目的是在框架的一個(gè)重要目的是在不同的框架中顯示不同的不同的框架中顯示不同的頁面，通過鏈接目標(biāo)窗口頁面，通過鏈接目標(biāo)窗口的設(shè)置可實(shí)現(xiàn)這一目的的設(shè)置可實(shí)現(xiàn)這一目的具體實(shí)現(xiàn)方法：將框架的具體實(shí)現(xiàn)方法：將框架的框架名屬性值作為超鏈接框架名屬性值作為超鏈接的的targettarget的屬性值的屬性值6162浮動(dòng)框架與鏈接示例浮動(dòng)框架與鏈接示例63 框架的作用是將瀏覽器窗口分割成若框架的作用是將瀏覽器窗口分割成若干個(gè)區(qū)域，每個(gè)區(qū)域可分別顯示不同干個(gè)區(qū)域，每個(gè)區(qū)域可分別

11、顯示不同的頁面的頁面 框架對(duì)瀏覽器窗口的分割方式有：左框架對(duì)瀏覽器窗口的分割方式有：左右分割、上下分割和嵌套分割右分割、上下分割和嵌套分割 框架的組成標(biāo)記有框架的組成標(biāo)記有和和 使用框架結(jié)構(gòu)時(shí)，使用框架結(jié)構(gòu)時(shí)，HTMLHTML文檔中不能出文檔中不能出現(xiàn)現(xiàn)。需需要由要由代替代替64 窗口分割方式以及和框架窗口的大小需要由窗口分割方式以及和框架窗口的大小需要由標(biāo)記的標(biāo)記的rowsrows或或colscols屬性來確定，屬性來確定，左右分割時(shí)使用左右分割時(shí)使用colscols屬性，上下分割時(shí)使用屬性，上下分割時(shí)使用rowsrows屬性屬性 框架的顯示內(nèi)容以及框架的格式化由框架的顯示內(nèi)容以及框架的格式化由標(biāo)記來完成標(biāo)記來完成 通過命名框架，使用框架可作為超鏈接的目通過命名框架，使用框架可作為超鏈接的目標(biāo)窗口標(biāo)窗口 浮動(dòng)框架是一種特殊的框架，它是某個(gè)浮動(dòng)框架是一種特殊的框架，它是某個(gè)HTMLHTML文檔的一部分，設(shè)置浮動(dòng)框架需要設(shè)置它的文檔的一部分，設(shè)置浮動(dòng)框架需要設(shè)置它的大小大小 浮動(dòng)框架的許多屬性與普通框架的相同浮動(dòng)框架的許多屬性與普通框架的相同651. 1. 框架的具有什么作用？框架的具有什