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

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