《HTML表格框架》PPT課件.ppt

,靜態(tài)網(wǎng)站設(shè)計,網(wǎng)絡(luò)技術(shù)系：李毓麗,使用表格,制作表格 添加或刪除行和列 格式化表格 為表格添加題注 嵌套表格,表格在網(wǎng)頁中除了作為一個顯示對象以外，還有一個重要的作用就是用于排版頁面內(nèi)容,制作表格,表格標記,基本語法, ,與標記不同的地方是之間的內(nèi)容會加粗且默認居中顯示，而之間的內(nèi)容則不加粗且默認居左顯示,表格示例,表格中每一行使用一個表示；行中的每一列使用一個或表示 添加或刪除行和列可以分別通過添加或刪除行和列標記來實現(xiàn),添加或刪除行和列,添加或刪除行和列實現(xiàn)方法,添加新行 可以通過插入額外的 和 標記來添加新的一行 在表內(nèi)創(chuàng)建新列 可以通過對每一行添加 或 標記在表格中創(chuàng)建新的列 刪除表中的行和列 可以通過刪除包圍指定行和列的 標記和 標記來刪除表格中的列和行,表格的格式化包括以下一些內(nèi)容： 為表格添加邊框及設(shè)置邊框粗細及邊框顏色 為表格添加背景圖像或背景顏色 指定表格的對齊方式 設(shè)置表格的寬度、高度 設(shè)置表格單元格內(nèi)容與邊框的間距及單元格之間的間距 指定行、列的背景圖像或背景顏色 指定行、列內(nèi)容的對齊方式 設(shè)置行、列的邊框顏色 設(shè)置行、列的寬度和高度 單元格的跨行和跨列設(shè)置,格式化表格,表格屬性,表格標記屬性設(shè)置語法,表格標記屬性示例,示例代碼,行標記屬性,行標記屬性設(shè)置語法,行標記屬性示例,、標記屬性,單元格寬度屬性解釋,如果沒有設(shè)置單元格寬度，則瀏覽器將會根據(jù)單元格中的內(nèi)容來自動調(diào)整單元格的寬度 如果設(shè)置了單元格寬度，但沒有設(shè)置nowarp屬性，則單元格中的內(nèi)容在超出了單元格寬度設(shè)置允許的情況下自動對文本進行換行顯示 如果設(shè)置了單元格寬度，但同時又設(shè)置了nowarp屬性，則此時，單元格寬度設(shè)置不起作用，所有文本將在一行內(nèi)顯示,單元格標記屬性設(shè)置語法,單元格標記屬性示例,表格各標記屬性設(shè)置的注意事項,表格標記中的bordercolorlight、bordercolordark顏色顯示的位置正好跟行標記及單元格標記中的這兩個屬性相反 內(nèi)層的邊框顏色設(shè)置會和外層的邊框顏色混合成另一種顏色 同時設(shè)置背景顏色和背景圖像時，背景顏色將被背景圖像覆蓋掉 只有較新版的瀏覽器才支持背景顏色和背景圖像的設(shè)置，不支持背景圖像的設(shè)置的瀏覽器會顯示瀏覽器的默認背景顏色來代替圖像,背景圖像屬性設(shè)置的規(guī)則,選擇基本上不傳達信息的小巧而精致的圖像 選擇帶有較少形狀、模式或顏色的簡單圖像 選擇能夠突出文檔意圖的圖像 在盡可能多的瀏覽器中查看帶有表格背景圖像的HTML文檔，確?？鐬g覽器的兼容性,背景顏色屬性設(shè)置的規(guī)則,如果文本顏色是深色的，應(yīng)該選擇淺色作為背景顏色 如果文本顏色是淺色的，應(yīng)該選擇深色作為背景顏色 選擇在美學(xué)角度來看令人愉快的顏色 如果表述的主題是快節(jié)奏或激動人心的，應(yīng)該選擇明快的顏色 如果表述的是慢節(jié)奏和基調(diào)憂郁的內(nèi)容，應(yīng)該選擇暗淡的顏色 始終選擇216 種無抖動顏色之一,表格題注作用： 概括表格的內(nèi)容 提供關(guān)于表格內(nèi)容的一些信息 基本語法 語法解釋 標記之間的就是表格的標題，這個標記必須在標記對之內(nèi)使用,為表格添加題注,標記對齊屬性,表格題注設(shè)置示例,在網(wǎng)頁中，排版通常需要通過表格的嵌套來完成 表格的嵌套是指在一個表格的單元格中插入另一個表格,嵌套表格,表格嵌套設(shè)置示例,在網(wǎng)頁排版中使用嵌套表格的原因有二： 一是利于簡化表格制作：網(wǎng)頁的排版有時會很復(fù)雜，在外部需要有一個表格控制總體布局，如果這時一些內(nèi)部排版的細節(jié)也通過總表格來實現(xiàn)，容易引起行高列寬等的沖突，給表格制作帶來困難 二是提高瀏覽器響應(yīng)速度：瀏覽器在解析網(wǎng)頁的時候，是將整個表格的結(jié)構(gòu)下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，表格下載耗時相對長，瀏覽者要等很長時間才能看到網(wǎng)頁的內(nèi)容,小 結(jié),制作表格時需要同時使用或標記對 表格的內(nèi)容必須放置在或之間 每一行必須使用一個標記對 行中的所有列都必須放置在標記對之間 通過表格、行及單元格標記的屬性，可以對表格進行格式化，如設(shè)置顯示邊框、邊框?qū)挾?、邊框顏色?在排版網(wǎng)頁時通常需要嵌套表格，所謂表格的嵌套，是指在一個表格的單元格中插入另一個表格,小 結(jié),思考題,1. 在顯示表格邊框，應(yīng)如何設(shè)置？ 2. 如何設(shè)置表格的寬度、高度、對齊方式、邊框顏色、單元格間距及單元格邊距？ 3. 如何設(shè)置單元格的對齊方式、背景顏色、背景圖像? 4. 在網(wǎng)頁排版時，應(yīng)如何嵌套表格?,使用框架結(jié)構(gòu),框架概述 框架結(jié)構(gòu)組成標記 框架集標記 框架標記 不支持框架標記 浮動框架 框架與鏈接,框架概述,HTML 框架允許在瀏覽器中同時顯示多個HTML文檔 多個頁面能夠同時在同一瀏覽器可獨立滾動的窗口中顯示 用來把瀏覽器窗口分成幾個獨立的部分 每一部分可以分別包含一個單獨的HTML 文檔 借助于框架分割瀏覽器窗口可以顯著改進外觀和可用性,框架的特征,可以水平或垂直分割 垂直框架具有垂直邊框 水平框架具有水平邊框 也可以在框架中嵌套框架 在定義框架間的交互之前必須先設(shè)定布局,使用框架的優(yōu)點,使網(wǎng)頁內(nèi)容看起來更美觀 減少了網(wǎng)站的下載時間 提高了網(wǎng)站的可用性 導(dǎo)航部分仍然可見，因為內(nèi)容在單獨的框架中改變 框架允許開發(fā)者將內(nèi)容與導(dǎo)航和結(jié)構(gòu)元素分離 有助于輕松、快速地更新內(nèi)容,使用框架的缺點,老版本的瀏覽器不支持框架 開發(fā)者需要創(chuàng)建并組織多個文件來充實頁面，使站點創(chuàng)建更復(fù)雜 框架結(jié)構(gòu)的Web 站點不允許訪問者在一個框架結(jié)構(gòu)的文檔中為頁面加入書簽 框架結(jié)構(gòu)的Web 站點會增加服務(wù)器負載，導(dǎo)致過多的文檔請求 框架結(jié)構(gòu)的Web 站點會使搜索引擎產(chǎn)生問題 在框架結(jié)構(gòu)的Web 站點中很難跟蹤一個頁面,創(chuàng)建框架,確定要創(chuàng)建的框架大小 創(chuàng)建框架集文檔，確定各框架的位置和特性 指定框架和其中的內(nèi)容 格式化框架 預(yù)先為在非框架結(jié)構(gòu)的瀏覽器中顯示框架做好準備, 注意：使用框架結(jié)構(gòu)時，HTML文檔中不能出現(xiàn)標記對，此時需要由代替,框架結(jié)構(gòu)組成標記,框架集標記：主要是定義瀏覽器窗口的分割方式，以及各分割窗口（框架）的大小 框架標記：定義各分割窗口中顯示的內(nèi)容，并能對各分割窗口進行格式化,框架集標記,框架分割窗口方式： 左右（水平）分割 上下（垂直）分割 嵌套分割：瀏覽器窗口既存在左右分割，又存在上下分割,左右分割,基本語法 . ,語法解釋 cols屬性決定了窗口的分割方式為左右分割；“value”定義各個框架的大小，單位可以是像素，也可以是百分比；value的個數(shù)決定了標記的個數(shù)，即窗口的個數(shù)，而value的值則決定了相應(yīng)窗口的大小,左右分割示例,上下分割,基本語法: . ,語法解釋 rows屬性決定了窗口的分割方式為上下分割；“value”定義各個框架的大小，單位可以是像素，也可以是百分比；value的個數(shù)決定了標記的個數(shù)，即窗口的個數(shù)，而value的值則決定了相應(yīng)窗口的大小,上下分割示例,嵌套分割,基本語法 . ,嵌套分割示例,嵌套分割示例結(jié)果,對框架邊框的格式化,框架標記,基本語法 . ,語法解釋 src屬性用于設(shè)置在框架窗口中顯示的內(nèi)容來自的文件；name屬性用于標記框架名稱，以便于其他對象對它的引用，如作為鏈接的一個目標窗口,框架標記,標記屬性設(shè)置示例,標記屬性,框架屬性說明 使用框架的屬性，可設(shè)置框架顯示的內(nèi)容以及對框架進行格式化 對框架的格式化包括更改邊框、調(diào)整頁邊距和指定顏色以及由訪問者對它的使用實行控制,標記屬性,框架綜合示例 框架綜合示例代碼,浮動框架,浮動框架是一種特殊的框架頁面，其作為HTML文檔的一部分，就象圖像一樣出現(xiàn)在HTML文檔中。浮動框架允許將一個HTML文檔插入到另一個HTML文檔內(nèi)部的某個區(qū)域。 使用浮動框架時必須設(shè)置該框架的大小，即框架的高度和寬度,基本語法 ,浮動框架,語法解釋參見下表,浮動框示例,框架與鏈接,框架的一個重要目的是在不同的框架中顯示不同的頁面，通過鏈接目標窗口的設(shè)置可實現(xiàn)這一目的 具體實現(xiàn)方法：將框架的框架名屬性值作為超鏈接的target的屬性值,普通框架與鏈接示例,示例,浮動框架與鏈接示例效果,浮動框架與鏈接示例,小 結(jié),框架的作用是將瀏覽器窗口分割成若干個區(qū)域，每個區(qū)域可分別顯示不同的頁面 框架對瀏覽器窗口的分割方式有：左右分割、上下分割和嵌套分割 框架的組成標記有和 使用框架結(jié)構(gòu)時，HTML文檔中不能出現(xiàn)。需要由代替,窗口分割方式以及和框架窗口的大小需要由標記的rows或cols屬性來確定，左右分割時使用cols屬性，上下分割時使用rows屬性 框架的顯示內(nèi)容以及框架的格式化由標記來完成 通過命名框架，使用框架可作為