TP02 列表、表格、框架

1、列表、表格與框架第二章2/40回顧與作業(yè)點評回顧與作業(yè)點評如果一個網(wǎng)頁中的文字出現(xiàn)亂碼可能是什么原因造成的？在網(wǎng)頁中打開超鏈接頁面在目標窗口中打開的常用兩種方式是什么？找出下面代碼的錯誤之處提問提問北京是中國的北京是中國的首都首都香山的香山的紅葉紅葉在秋季非常漂亮在秋季非常漂亮 3/40本章任務本章任務制作樹形菜單制作模擬考試試卷制作易趣商品列表制作淘寶店鋪列表頁面制作新浪微博頁面引用Google主頁使用實現(xiàn)頁面重用4/40本章目標本章目標會使用有序列表實現(xiàn)數(shù)據(jù)展示會使用無序列表實現(xiàn)數(shù)據(jù)展示會使用定義列表實現(xiàn)數(shù)據(jù)展示會使用表格實現(xiàn)數(shù)據(jù)展示會使用進行頁面設計5/40列表列表什么是列表列表的分類無

2、序列表有序列表定義列表有序列表有序列表無序列表無序列表定義列表定義列表6/40列表的應用列表的應用5-1無序列表 桔子桔子 香蕉香蕉 蘋果蘋果聲明無序列表聲明無序列表聲明列表項聲明列表項演示示例演示示例1：無序列表：無序列表7/40列表的應用列表的應用5-2無序列表的類型type取值演示示例演示示例2：無序列表的類型：無序列表的類型取值說明disc項目符號顯示為實體圓心,默認值square項目符號顯示為實體方心circle項目符號顯示為空心圓8/40列表的應用列表的應用5-2有序列表演示示例演示示例3：有序列表：有序列表 桔子桔子 香蕉香蕉 蘋果蘋果聲明列表項聲明列表項聲明有序列表聲明有序列表

3、9/40列表的應用列表的應用5-4有序列表的類型type取值演示示例演示示例4：有序列表的類型：有序列表的類型取值說明1使用數(shù)字作為項目符號A/a使用大寫/小寫字母作為項目符號I/i使用大寫/小寫羅馬數(shù)字作為項目符號10/40列表的應用列表的應用5-5定義列表演示示例演示示例5：定義列表：定義列表 所屬學院所屬學院 計算機應用計算機應用 所屬專業(yè)所屬專業(yè) 計算機軟件工程計算機軟件工程聲明定義列表聲明定義列表聲明列表項聲明列表項定義列表項內(nèi)容定義列表項內(nèi)容11/40小結(jié)小結(jié)列表對比類型說明項目符號無序列表以標簽來實現(xiàn)以標簽表示列表項通過type屬性設置項目符號disc（默認）、square和ci

4、rcle有序列表以標簽來實現(xiàn)以標簽表示列表項通過type屬性設置項目順序1(數(shù)字，默認)、A（大寫字母）、a（小寫字母）、I（大寫羅馬數(shù)字）和i（小寫羅馬數(shù)字）定義類表以標簽是實現(xiàn)以標簽定義列表項以標簽定義內(nèi)容無項目符號和顯示順序預格式文本標簽 如何實現(xiàn)如下圖所示的頁面中的文字效果？使用使用 標簽可以實現(xiàn)標簽可以實現(xiàn)如何使用預格式文本標簽 騰訊騰訊-QQ幣幣/QQ幻想幻想-30元卡元卡 一一 口口 價：價：26.45元元 運費：賣家承擔運費運費：賣家承擔運費 剩余時間：剩余時間：5天天 寶貝類型：寶貝類型： 全新全新 賣主聲明：貨到付款，可試用賣主聲明：貨到付款，可試用10天！天！HTML中代

5、碼格式與瀏中代碼格式與瀏覽器中顯示效果一樣覽器中顯示效果一樣14/40學員操作學員操作制作樹形菜單制作樹形菜單需求說明模擬我的電腦中的磁盤文件管理，顯示磁盤與文件夾之間的關系完成時間：完成時間：10分鐘分鐘練習練習15/40學員操作學員操作制作模擬考試試卷制作模擬考試試卷需求說明模擬考試試卷的選擇題的題型格式，使用有序列表完成模擬試卷完成時間：完成時間：10分鐘分鐘練習練習16/40學員操作學員操作制作易趣商品列表制作易趣商品列表需求說明使用定義列表制作易趣商品列表頁面完成時間：完成時間：10分鐘分鐘練習練習17/40共性問題集中講解共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講

6、解共性問題集中講解為什么使用表格為什么使用表格n 表格應用場合 論壇 門戶網(wǎng)站 購物網(wǎng)站論壇中應用論壇中應用表格表格門戶網(wǎng)站應門戶網(wǎng)站應用表格用表格購物網(wǎng)站購物網(wǎng)站應用表格應用表格表格的基本結(jié)構(gòu)表格的基本結(jié)構(gòu)行行列列單元格單元格在在 HTML 文檔中，廣泛使用文檔中，廣泛使用表格表格來存放網(wǎng)頁上的文本和圖像來存放網(wǎng)頁上的文本和圖像表格的基本語法 單元格內(nèi)容單元格內(nèi)容 .定義表格定義表格 定義列定義列 定義行定義行 border用來設置表用來設置表格邊框尺寸大小格邊框尺寸大小如何創(chuàng)建表格如何創(chuàng)建表格 移動移動 聯(lián)通聯(lián)通 鐵通鐵通 IBM 惠普惠普 華碩華碩 查看源代碼查看源代碼什么是跨行跨列的表

7、格什么是跨行跨列的表格跨跨3列列跨跨3行行下圖中的表格哪里用了跨行？哪里用了跨列？下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列跨了幾行幾列? ?跨多列的表格 學生成績表學生成績表 英語英語 數(shù)學數(shù)學 語文語文 95 98 89 COLSPAN=“n” 屬性表示跨多少列？屬性表示跨多少列？查看源代碼查看源代碼跨多行的表格 早上菜譜早上菜譜 食物食物 雞蛋雞蛋 飲料飲料 牛奶牛奶 甜點甜點 開心粉開心粉 rowspan =“n” 屬性表示跨多少行？屬性表示跨多少行？查看源代碼查看源代碼 手機充值、手機充值、IP卡卡 辦公設備、文具辦公設備、文具 各種卡的總匯各種卡的總匯 鉛筆鉛筆 彩筆彩筆

8、 打印打印 刻錄刻錄 如何創(chuàng)建跨行跨列的表格查看源代碼查看源代碼小結(jié)小結(jié)1 1編寫如下圖所示效果對應的編寫如下圖所示效果對應的html代碼代碼第一行第一個第一行第一個格子跨了格子跨了2行行此格子此格子跨了跨了3列列什么是表格的美化修飾什么是表格的美化修飾背景圖片背景圖片背景色背景色表格的高度表格的高度表格的寬度表格的寬度文字對文字對齊方式齊方式根據(jù)理解根據(jù)理解,下面表格應該從哪些方面進行美化修飾？下面表格應該從哪些方面進行美化修飾？如何設置表格的尺寸和邊框 品牌商城品牌商城 筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 惠普惠普 華碩華碩 打印機打印機 刻錄盤刻錄盤 widt

9、h用來設置表格的寬度用來設置表格的寬度height用來設置表格的高度用來設置表格的高度border用來設置表用來設置表格邊框尺寸大小格邊框尺寸大小bordercolor用來設用來設置表格邊框顏色置表格邊框顏色查看源代碼查看源代碼如何設置背景   筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 background屬性用來設置表格的背景圖片屬性用來設置表格的背景圖片bgcolor屬性用來設置表格、行、列屬性用來設置表格、行、列的背景色。的背景色?！?EBEFFF”是用是用RGB表示的一種顏色值，表示的一種顏色值，RGB指的是紅指的是紅綠藍綠藍 ，下圖就是，下圖就是RGB

10、顏色對照表顏色對照表 。查看源代碼查看源代碼如何設置對其方式   筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 惠普惠普 華碩華碩 打印機打印機 刻錄盤刻錄盤 align屬性用來設置表屬性用來設置表格、行、列的對齊方式格、行、列的對齊方式查看源代碼查看源代碼為什么要使用填充屬性單元格里的內(nèi)容太靠近邊線，怎么辦？單元格里的內(nèi)容太靠近邊線，怎么辦？未填充的效果，字與單元格邊未填充的效果，字與單元格邊框之間的距離靠得太近框之間的距離靠得太近什么是填充屬性和間距屬性border(邊框的厚度邊框的厚度) 內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容cellpadding(單元格填充單元格

11、填充)cellspacing(單元格間距單元格間距)如何使用填充、間距屬性border(邊框的厚度邊框的厚度) cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)查看源代碼查看源代碼如何設置表格的填充屬性   筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 .cellspacing屬性用來設屬性用來設置表格內(nèi)框?qū)挾戎帽砀駜?nèi)框?qū)挾?cellpadding屬性用來屬性用來設置表格內(nèi)填充距離設置表格內(nèi)填充距離查看源代碼查看源代碼填充之后填充之后的效果的效果小結(jié)2編寫如下圖所示效果對應的編寫如下圖所示效果對應的HTML代碼代碼表格的高

12、度、寬表格的高度、寬度、背景圖像、度、背景圖像、邊框和填充屬性邊框和填充屬性行的背景色行的背景色單元格居單元格居中對齊中對齊練習答案練習答案練習代碼練習代碼如何實現(xiàn)圖文內(nèi)容的布局，達到如左圖所示頁面的效果？分析上圖所示頁面，應該用什么進行布局？ 什么是表格布局使用使用表格表格進行布局進行布局用表格對網(wǎng)頁的內(nèi)用表格對網(wǎng)頁的內(nèi)容進行整體控制容進行整體控制如何使用表格進行布局使用表格布局下圖，需要幾行幾列？使用表格布局下圖，需要幾行幾列？需要需要7行行2列列 小結(jié)1、ul(ol)-li ：常用于分類導航或菜單等：常用于分類導航或菜單等 2、dl-dt-dd ：常用于圖文混編的場合：常用于圖文混編的場

13、合 3、table-tr-td ：常用于圖文布局或顯示數(shù)據(jù)：常用于圖文布局或顯示數(shù)據(jù) 4、form-table-tr-td：常用于布局表單：常用于布局表單 請說出實際開發(fā)常用的請說出實際開發(fā)常用的4種塊狀結(jié)構(gòu)是什么？種塊狀結(jié)構(gòu)是什么？39/40框架框架為什么使用框架常用框架技術框架內(nèi)聯(lián)框架重用網(wǎng)站頂部重用網(wǎng)站頂部重用網(wǎng)站底部重用網(wǎng)站底部左側(cè)導航目錄左側(cè)導航目錄單擊左側(cè)導航，改變右單擊左側(cè)導航，改變右側(cè)內(nèi)容，頂部和底部不側(cè)內(nèi)容，頂部和底部不需要再次加載需要再次加載40/40框架框架5-1 語法語法表示橫向分割表示橫向分割表示縱向分割表示縱向分割表示引用頁面的地址表示引用頁面的地址41/40框架框

14、架5-2縱向分割窗口使用 “rows” 屬性演示示例演示示例10：縱向分割：縱向分割42/40框架框架5-3橫向分割窗口使用 “cols” 屬性演示示例演示示例11：橫向分割：橫向分割42/4043/40框架框架5-4橫向和縱向同時分割窗口上下分割上下分割左右分割左右分割44/40框架框架5-5窗口間的關聯(lián)在框架窗口中打開鏈接在框架窗口中打開鏈接框架窗口名稱框架窗口名稱演示示例演示示例13：窗口間的連接位置：窗口間的連接位置45/40內(nèi)聯(lián)框架內(nèi)聯(lián)框架2-1語法語法引用頁面地址引用頁面地址框架標識名框架標識名邊框邊框是否出現(xiàn)滾動條是否出現(xiàn)滾動條框架寬度框架寬度框架高度框架高度演示示例演示示例14： iframe框架框架46/40內(nèi)聯(lián)框架內(nèi)聯(lián)框架2-2在內(nèi)聯(lián)框架中打開頁面演示示例演示示例15：iframe常用屬性常用屬性47/40學員操作學員操作引用引用Google主頁主頁需求說明引用Google主頁。單擊章節(jié)名稱在下方顯示章節(jié)內(nèi)容完成時間：完成時間：10分鐘分鐘練習練習48/40學員操作學員操作公共模板復用及鏈接公共模板復用及鏈接需求說明在給出的登錄和注冊頁中重用貴美頁面頂部和底部。找到login.htm和register.htm頁面中的代碼行，增加相關屬性完成時間：完成時間：5分鐘分鐘練習練習49/40共性問題集中講解共性問題集中講解常見問題及解決辦法代