HTML表格、框架 使用大全.ppt

1、,靜態(tài)網(wǎng)站設(shè)計(jì),網(wǎng)絡(luò)技術(shù)系：李毓麗,使用表格,制作表格 添加或刪除行和列 格式化表格 為表格添加題注 嵌套表格,表格在網(wǎng)頁中除了作為一個(gè)顯示對(duì)象以外，還有一個(gè)重要的作用就是用于排版頁面內(nèi)容,制作表格,表格標(biāo)記,基本語法, ,與標(biāo)記不同的地方是之間的內(nèi)容會(huì)加粗且默認(rèn)居中顯示，而之間的內(nèi)容則不加粗且默認(rèn)居左顯示,表格示例,表格中每一行使用一個(gè)表示；行中的每一列使用一個(gè)或表示 添加或刪除行和列可以分別通過添加或刪除行和列標(biāo)記來實(shí)現(xiàn),添加或刪除行和列,添加或刪除行和列實(shí)現(xiàn)方法,添加新行 可以通過插入額外的 和 標(biāo)記來添加新的一行 在表內(nèi)創(chuàng)建新列 可以通過對(duì)每一行添加 或 標(biāo)記在表格中創(chuàng)建新的列 刪除表

2、中的行和列 可以通過刪除包圍指定行和列的 標(biāo)記和 標(biāo)記來刪除表格中的列和行,表格的格式化包括以下一些內(nèi)容： 為表格添加邊框及設(shè)置邊框粗細(xì)及邊框顏色 為表格添加背景圖像或背景顏色 指定表格的對(duì)齊方式 設(shè)置表格的寬度、高度 設(shè)置表格單元格內(nèi)容與邊框的間距及單元格之間的間距 指定行、列的背景圖像或背景顏色 指定行、列內(nèi)容的對(duì)齊方式 設(shè)置行、列的邊框顏色 設(shè)置行、列的寬度和高度 單元格的跨行和跨列設(shè)置,格式化表格,表格屬性,表格標(biāo)記屬性設(shè)置語法,表格標(biāo)記屬性示例,示例代碼,行標(biāo)記屬性,行標(biāo)記屬性設(shè)置語法,行標(biāo)記屬性示例,、標(biāo)記屬性,單元格寬度屬性解釋,如果沒有設(shè)置單元格寬度，則瀏覽器將會(huì)根據(jù)單元格中的

3、內(nèi)容來自動(dòng)調(diào)整單元格的寬度 如果設(shè)置了單元格寬度，但沒有設(shè)置nowarp屬性，則單元格中的內(nèi)容在超出了單元格寬度設(shè)置允許的情況下自動(dòng)對(duì)文本進(jìn)行換行顯示 如果設(shè)置了單元格寬度，但同時(shí)又設(shè)置了nowarp屬性，則此時(shí)，單元格寬度設(shè)置不起作用，所有文本將在一行內(nèi)顯示,單元格標(biāo)記屬性設(shè)置語法,單元格標(biāo)記屬性示例,表格各標(biāo)記屬性設(shè)置的注意事項(xiàng),表格標(biāo)記中的bordercolorlight、bordercolordark顏色顯示的位置正好跟行標(biāo)記及單元格標(biāo)記中的這兩個(gè)屬性相反 內(nèi)層的邊框顏色設(shè)置會(huì)和外層的邊框顏色混合成另一種顏色 同時(shí)設(shè)置背景顏色和背景圖像時(shí)，背景顏色將被背景圖像覆蓋掉 只有較新版的瀏覽器

4、才支持背景顏色和背景圖像的設(shè)置，不支持背景圖像的設(shè)置的瀏覽器會(huì)顯示瀏覽器的默認(rèn)背景顏色來代替圖像,背景圖像屬性設(shè)置的規(guī)則,選擇基本上不傳達(dá)信息的小巧而精致的圖像 選擇帶有較少形狀、模式或顏色的簡單圖像 選擇能夠突出文檔意圖的圖像 在盡可能多的瀏覽器中查看帶有表格背景圖像的HTML文檔，確?？鐬g覽器的兼容性,背景顏色屬性設(shè)置的規(guī)則,如果文本顏色是深色的，應(yīng)該選擇淺色作為背景顏色 如果文本顏色是淺色的，應(yīng)該選擇深色作為背景顏色 選擇在美學(xué)角度來看令人愉快的顏色 如果表述的主題是快節(jié)奏或激動(dòng)人心的，應(yīng)該選擇明快的顏色 如果表述的是慢節(jié)奏和基調(diào)憂郁的內(nèi)容，應(yīng)該選擇暗淡的顏色 始終選擇216 種無抖動(dòng)顏

5、色之一,表格題注作用： 概括表格的內(nèi)容 提供關(guān)于表格內(nèi)容的一些信息 基本語法 語法解釋 標(biāo)記之間的就是表格的標(biāo)題，這個(gè)標(biāo)記必須在標(biāo)記對(duì)之內(nèi)使用,為表格添加題注,標(biāo)記對(duì)齊屬性,表格題注設(shè)置示例,在網(wǎng)頁中，排版通常需要通過表格的嵌套來完成 表格的嵌套是指在一個(gè)表格的單元格中插入另一個(gè)表格,嵌套表格,表格嵌套設(shè)置示例,在網(wǎng)頁排版中使用嵌套表格的原因有二： 一是利于簡化表格制作：網(wǎng)頁的排版有時(shí)會(huì)很復(fù)雜，在外部需要有一個(gè)表格控制總體布局，如果這時(shí)一些內(nèi)部排版的細(xì)節(jié)也通過總表格來實(shí)現(xiàn)，容易引起行高列寬等的沖突，給表格制作帶來困難 二是提高瀏覽器響應(yīng)速度：瀏覽器在解析網(wǎng)頁的時(shí)候，是將整個(gè)表格的結(jié)構(gòu)下載完畢之

6、后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，表格下載耗時(shí)相對(duì)長，瀏覽者要等很長時(shí)間才能看到網(wǎng)頁的內(nèi)容,小 結(jié),制作表格時(shí)需要同時(shí)使用或標(biāo)記對(duì) 表格的內(nèi)容必須放置在或之間 每一行必須使用一個(gè)標(biāo)記對(duì) 行中的所有列都必須放置在標(biāo)記對(duì)之間 通過表格、行及單元格標(biāo)記的屬性，可以對(duì)表格進(jìn)行格式化，如設(shè)置顯示邊框、邊框?qū)挾取⑦吙蝾伾?在排版網(wǎng)頁時(shí)通常需要嵌套表格，所謂表格的嵌套，是指在一個(gè)表格的單元格中插入另一個(gè)表格,小 結(jié),思考題,1. 在顯示表格邊框，應(yīng)如何設(shè)置？ 2. 如何設(shè)置表格的寬度、高度、對(duì)齊方式、邊框顏色、單元格間距及單元格邊距？ 3. 如何設(shè)置單元格的對(duì)齊方式、背景顏色、背景圖像? 4.

7、在網(wǎng)頁排版時(shí)，應(yīng)如何嵌套表格?,使用框架結(jié)構(gòu),框架概述 框架結(jié)構(gòu)組成標(biāo)記 框架集標(biāo)記 框架標(biāo)記 不支持框架標(biāo)記 浮動(dòng)框架 框架與鏈接,框架概述,HTML 框架允許在瀏覽器中同時(shí)顯示多個(gè)HTML文檔 多個(gè)頁面能夠同時(shí)在同一瀏覽器可獨(dú)立滾動(dòng)的窗口中顯示 用來把瀏覽器窗口分成幾個(gè)獨(dú)立的部分 每一部分可以分別包含一個(gè)單獨(dú)的HTML 文檔 借助于框架分割瀏覽器窗口可以顯著改進(jìn)外觀和可用性,框架的特征,可以水平或垂直分割 垂直框架具有垂直邊框 水平框架具有水平邊框 也可以在框架中嵌套框架 在定義框架間的交互之前必須先設(shè)定布局,使用框架的優(yōu)點(diǎn),使網(wǎng)頁內(nèi)容看起來更美觀 減少了網(wǎng)站的下載時(shí)間 提高了網(wǎng)站的可用性

8、 導(dǎo)航部分仍然可見，因?yàn)閮?nèi)容在單獨(dú)的框架中改變 框架允許開發(fā)者將內(nèi)容與導(dǎo)航和結(jié)構(gòu)元素分離 有助于輕松、快速地更新內(nèi)容,使用框架的缺點(diǎn),老版本的瀏覽器不支持框架 開發(fā)者需要?jiǎng)?chuàng)建并組織多個(gè)文件來充實(shí)頁面，使站點(diǎn)創(chuàng)建更復(fù)雜 框架結(jié)構(gòu)的Web 站點(diǎn)不允許訪問者在一個(gè)框架結(jié)構(gòu)的文檔中為頁面加入書簽 框架結(jié)構(gòu)的Web 站點(diǎn)會(huì)增加服務(wù)器負(fù)載，導(dǎo)致過多的文檔請(qǐng)求 框架結(jié)構(gòu)的Web 站點(diǎn)會(huì)使搜索引擎產(chǎn)生問題 在框架結(jié)構(gòu)的Web 站點(diǎn)中很難跟蹤一個(gè)頁面,創(chuàng)建框架,確定要?jiǎng)?chuàng)建的框架大小 創(chuàng)建框架集文檔，確定各框架的位置和特性 指定框架和其中的內(nèi)容 格式化框架 預(yù)先為在非框架結(jié)構(gòu)的瀏覽器中顯示框架做好準(zhǔn)備, 注意：使

9、用框架結(jié)構(gòu)時(shí)，HTML文檔中不能出現(xiàn)標(biāo)記對(duì)，此時(shí)需要由代替,框架結(jié)構(gòu)組成標(biāo)記,框架集標(biāo)記：主要是定義瀏覽器窗口的分割方式，以及各分割窗口（框架）的大小 框架標(biāo)記：定義各分割窗口中顯示的內(nèi)容，并能對(duì)各分割窗口進(jìn)行格式化,框架集標(biāo)記,框架分割窗口方式： 左右（水平）分割 上下（垂直）分割 嵌套分割：瀏覽器窗口既存在左右分割，又存在上下分割,左右分割,基本語法 . ,語法解釋 cols屬性決定了窗口的分割方式為左右分割；“value”定義各個(gè)框架的大小，單位可以是像素，也可以是百分比；value的個(gè)數(shù)決定了標(biāo)記的個(gè)數(shù)，即窗口的個(gè)數(shù)，而value的值則決定了相應(yīng)窗口的大小,左右分割示例, ,上下分割,

10、基本語法: . ,語法解釋 rows屬性決定了窗口的分割方式為上下分割；“value”定義各個(gè)框架的大小，單位可以是像素，也可以是百分比；value的個(gè)數(shù)決定了標(biāo)記的個(gè)數(shù)，即窗口的個(gè)數(shù)，而value的值則決定了相應(yīng)窗口的大小,上下分割示例, ,嵌套分割,基本語法 . ,嵌套分割示例, ,嵌套分割示例結(jié)果,對(duì)框架邊框的格式化,框架標(biāo)記,基本語法 . ,語法解釋 src屬性用于設(shè)置在框架窗口中顯示的內(nèi)容來自的文件；name屬性用于標(biāo)記框架名稱，以便于其他對(duì)象對(duì)它的引用，如作為鏈接的一個(gè)目標(biāo)窗口,框架標(biāo)記,標(biāo)記屬性設(shè)置示例, ,標(biāo)記屬性,框架屬性說明 使用框架的屬性，可設(shè)置框架顯示的內(nèi)容以及對(duì)框架進(jìn)

11、行格式化 對(duì)框架的格式化包括更改邊框、調(diào)整頁邊距和指定顏色以及由訪問者對(duì)它的使用實(shí)行控制,標(biāo)記屬性,框架綜合示例 框架綜合示例代碼,浮動(dòng)框架,浮動(dòng)框架是一種特殊的框架頁面，其作為HTML文檔的一部分，就象圖像一樣出現(xiàn)在HTML文檔中。浮動(dòng)框架允許將一個(gè)HTML文檔插入到另一個(gè)HTML文檔內(nèi)部的某個(gè)區(qū)域。 使用浮動(dòng)框架時(shí)必須設(shè)置該框架的大小，即框架的高度和寬度,基本語法 ,浮動(dòng)框架,語法解釋參見下表,浮動(dòng)框示例,框架與鏈接,框架的一個(gè)重要目的是在不同的框架中顯示不同的頁面，通過鏈接目標(biāo)窗口的設(shè)置可實(shí)現(xiàn)這一目的 具體實(shí)現(xiàn)方法：將框架的框架名屬性值作為超鏈接的target的屬性值,普通框架與鏈接示例,示例,浮動(dòng)框架與鏈接示例效果,浮動(dòng)框架與鏈接示例,小 結(jié),框架的作用是將瀏覽器窗口分割成若干個(gè)區(qū)域，每個(gè)區(qū)域可分別顯示不同的頁面 框架對(duì)瀏覽器窗口的分割方式有：左右分割、上下分割和嵌套分割 框架的組成標(biāo)記有和 使用框架結(jié)構(gòu)時(shí)，HTML文檔中不能出現(xiàn)。需要由代替,窗口分割方式以及和框架窗口的大小需要由標(biāo)記的rows或cols屬性來確定，左右分割時(shí)使用cols屬性，上下分割時(shí)使用rows屬性 框架的顯示內(nèi)容以及框架的格式化由標(biāo)記來完成 通過命名框架，使用框架可作為