TP02 列表、表格、框架

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

2、序列表有序列表定義列表有序列表有序列表無(wú)序列表無(wú)序列表定義列表定義列表6/40列表的應(yīng)用列表的應(yīng)用5-1無(wú)序列表 桔子桔子 香蕉香蕉 蘋果蘋果聲明無(wú)序列表聲明無(wú)序列表聲明列表項(xiàng)聲明列表項(xiàng)演示示例演示示例1：無(wú)序列表：無(wú)序列表7/40列表的應(yīng)用列表的應(yīng)用5-2無(wú)序列表的類型type取值演示示例演示示例2：無(wú)序列表的類型：無(wú)序列表的類型取值說(shuō)明disc項(xiàng)目符號(hào)顯示為實(shí)體圓心,默認(rèn)值square項(xiàng)目符號(hào)顯示為實(shí)體方心circle項(xiàng)目符號(hào)顯示為空心圓8/40列表的應(yīng)用列表的應(yīng)用5-2有序列表演示示例演示示例3：有序列表：有序列表 桔子桔子 香蕉香蕉 蘋果蘋果聲明列表項(xiàng)聲明列表項(xiàng)聲明有序列表聲明有序列表

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

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

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

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

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

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

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

10、顏色對(duì)照表顏色對(duì)照表 。查看源代碼查看源代碼如何設(shè)置對(duì)其方式   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤刻錄盤 align屬性用來(lái)設(shè)置表屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式格、行、列的對(duì)齊方式查看源代碼查看源代碼為什么要使用填充屬性單元格里的內(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(單元格間距單元格間距)查看源代碼查看源代碼如何設(shè)置表格的填充屬性   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 .cellspacing屬性用來(lái)設(shè)屬性用來(lái)設(shè)置表格內(nèi)框?qū)挾戎帽砀駜?nèi)框?qū)挾?cellpadding屬性用來(lái)屬性用來(lái)設(shè)置表格內(nèi)填充距離設(shè)置表格內(nèi)填充距離查看源代碼查看源代碼填充之后填充之后的效果的效果小結(jié)2編寫如下圖所示效果對(duì)應(yīng)的編寫如下圖所示效果對(duì)應(yīng)的HTML代碼代碼表格的高

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

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

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