TP02列表、表格、框架

列表、表格與框架第二章2/40回顧與作業(yè)點(diǎn)評(píng)如果一個(gè)網(wǎng)頁(yè)中的文字出現(xiàn)亂碼可能是什么原因造成的？在網(wǎng)頁(yè)中打開(kāi)超鏈接頁(yè)面在目標(biāo)窗口中打開(kāi)的常用兩種方式是什么？找出下面代碼的錯(cuò)誤之處提問(wèn)<h1>北京是中國(guó)的<p>首都<p>香山的<strong>紅葉</strong>在秋季非常漂亮</p>

</h1></p>3/40本章任務(wù)制作樹(shù)形菜單制作模擬考試試卷制作易趣商品列表制作淘寶店鋪列表頁(yè)面制作新浪微博頁(yè)面引用Google主頁(yè)使用<iframe>實(shí)現(xiàn)頁(yè)面重用4/40本章目標(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ì)使用<iframe>進(jìn)行頁(yè)面設(shè)計(jì)5/40列表什么是列表列表的分類(lèi)無(wú)序列表有序列表定義列表有序列表無(wú)序列表定義列表6/40列表的應(yīng)用5-1無(wú)序列表<ul><li>桔子</li><li>香蕉</li><li>蘋(píng)果</li></ul>聲明無(wú)序列表聲明列表項(xiàng)演示示例1：無(wú)序列表6/407/40列表的應(yīng)用5-2無(wú)序列表的類(lèi)型type取值演示示例2：無(wú)序列表的類(lèi)型取值說(shuō)明disc項(xiàng)目符號(hào)顯示為實(shí)體圓心,默認(rèn)值square項(xiàng)目符號(hào)顯示為實(shí)體方心circle項(xiàng)目符號(hào)顯示為空心圓8/40列表的應(yīng)用5-2有序列表演示示例3：有序列表<ol><li>桔子</li><li>香蕉</li><li>蘋(píng)果</li></ol>聲明列表項(xiàng)聲明有序列表9/40列表的應(yīng)用5-4有序列表的類(lèi)型type取值演示示例4：有序列表的類(lèi)型取值說(shuō)明1使用數(shù)字作為項(xiàng)目符號(hào)A/a使用大寫(xiě)/小寫(xiě)字母作為項(xiàng)目符號(hào)I/i使用大寫(xiě)/小寫(xiě)羅馬數(shù)字作為項(xiàng)目符號(hào)10/40列表的應(yīng)用5-5定義列表演示示例5：定義列表<dl><dt>所屬學(xué)院</dt><dd>計(jì)算機(jī)應(yīng)用</dd><dt>所屬專業(yè)</dt><dd>計(jì)算機(jī)軟件工程</dd></dl>聲明定義列表聲明列表項(xiàng)定義列表項(xiàng)內(nèi)容11/40小結(jié)列表對(duì)比類(lèi)型說(shuō)明項(xiàng)目符號(hào)無(wú)序列表以<ul>標(biāo)簽來(lái)實(shí)現(xiàn)以<li>標(biāo)簽表示列表項(xiàng)通過(guò)type屬性設(shè)置項(xiàng)目符號(hào)disc（默認(rèn)）、square和circle有序列表以<ol>標(biāo)簽來(lái)實(shí)現(xiàn)以<li>標(biāo)簽表示列表項(xiàng)通過(guò)type屬性設(shè)置項(xiàng)目順序1(數(shù)字，默認(rèn))、A（大寫(xiě)字母）、a（小寫(xiě)字母）、I（大寫(xiě)羅馬數(shù)字）和i（小寫(xiě)羅馬數(shù)字）定義類(lèi)表以<dl>標(biāo)簽是實(shí)現(xiàn)以<dt>標(biāo)簽定義列表項(xiàng)以<dd>標(biāo)簽定義內(nèi)容無(wú)項(xiàng)目符號(hào)和顯示順序預(yù)格式文本<PRE>標(biāo)簽

如何實(shí)現(xiàn)如下圖所示的頁(yè)面中的文字效果？使用<PRE>標(biāo)簽可以實(shí)現(xiàn)如何使用預(yù)格式文本<PRE>標(biāo)簽<PRE><IMGsrc="images/QQ.JPG"width="159"height="133"align="LEFT">

騰訊-QQ幣/QQ幻想-30元卡

一口價(jià)：26.45元

運(yùn)費(fèi)：賣(mài)家承擔(dān)運(yùn)費(fèi)

剩余時(shí)間：5天

寶貝類(lèi)型：全新

賣(mài)主聲明：貨到付款，可試用10天！

</PRE>HTML中代碼格式與瀏覽器中顯示效果一樣14/40學(xué)員操作——制作樹(shù)形菜單需求說(shuō)明模擬我的電腦中的磁盤(pán)文件管理，顯示磁盤(pán)與文件夾之間的關(guān)系完成時(shí)間：10分鐘練習(xí)15/40學(xué)員操作——制作模擬考試試卷需求說(shuō)明模擬考試試卷的選擇題的題型格式，使用有序列表完成模擬試卷完成時(shí)間：10分鐘練習(xí)16/40學(xué)員操作——制作易趣商品列表需求說(shuō)明使用定義列表制作易趣商品列表頁(yè)面完成時(shí)間：10分鐘練習(xí)17/40共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解為什么使用表格表格應(yīng)用場(chǎng)合論壇門(mén)戶網(wǎng)站購(gòu)物網(wǎng)站論壇中應(yīng)用表格門(mén)戶網(wǎng)站應(yīng)用表格購(gòu)物網(wǎng)站應(yīng)用表格表格的基本結(jié)構(gòu)行列單元格在HTML文檔中，廣泛使用表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像表格的基本語(yǔ)法<TABLEborder="1"><TR><TD>

單元格內(nèi)容

</TD> ……</TR>……</TABLE><TABLE>...</TABLE

>定義表格<TD>…</TD>

定義列

<TR>…</TR>

定義行

border用來(lái)設(shè)置表格邊框尺寸大小如何創(chuàng)建表格<TABLEborder="2"><TR><TD>移動(dòng)</TD>

<TD>聯(lián)通</TD>

<TD>鐵通</TD>

</TR>

<TR>

<TD>IBM</TD>

<TD>惠普</TD>

<TD>華碩</TD>

</TR></TABLE>查看源代碼什么是跨行跨列的表格跨3列跨3行下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列?跨多列的表格<TABLEborder="2"><TR><TDcolspan="3">學(xué)生成績(jī)表</TD>

</TR>

<TR>

<TD>英語(yǔ)</TD>

<TD>數(shù)學(xué)</TD>

<TD>語(yǔ)文</TD>

</TR>

<TR>

<TD>95</TD>

<TD>98</TD>

<TD>89</TD>

</TR></TABLE>COLSPAN=“n”屬性表示跨多少列？查看源代碼跨多行的表格<TABLEborder="1"><TR><TDrowspan=“3”>早上菜譜</TD>

<TD>食物</TD>

<TD>雞蛋</TD>

</TR>

<TR>

<TD>飲料</TD>

<TD>牛奶</TD>

</TR>

<TR>

<TD>甜點(diǎn)</TD>

<TD>開(kāi)心粉</TD>

</TR></TABLE>rowspan=“n”屬性表示跨多少行？查看源代碼<TABLEborder="1"><TR><TD>手機(jī)充值、IP卡</TD>

<TDcolspan="2">辦公設(shè)備、文具</TD>

</TR>

<TR>

<TDrowspan="2">各種卡的總匯</TD>

<TD>鉛筆</TD>

<TD>彩筆</TD>

</TR>

<TR>

<TD>打印</TD>

<TD>刻錄</TD>

</TR></TABLE>如何創(chuàng)建跨行跨列的表格查看源代碼小結(jié)1編寫(xiě)如下圖所示效果對(duì)應(yīng)的html代碼第一行第一個(gè)格子跨了2行此格子跨了3列什么是表格的美化修飾背景圖片背景色表格的高度表格的寬度文字對(duì)齊方式根據(jù)理解,下面表格應(yīng)該從哪些方面進(jìn)行美化修飾？如何設(shè)置表格的尺寸和邊框<TABLEwidth=“400”height=“200”border=“15”bordercolor="red"><TR><TDcolspan="4">品牌商城</TD></TR><TR><TDcolspan="2">筆記本電腦</TD><TDcolspan="2">辦公設(shè)備、文具、耗材</TD></TR><TR><TD>惠普</TD><TD>華碩</TD><TD>打印機(jī)</TD><TD>刻錄盤(pán)</TD></TR></TABLE>width用來(lái)設(shè)置表格的寬度height用來(lái)設(shè)置表格的高度border用來(lái)設(shè)置表格邊框尺寸大小bordercolor用來(lái)設(shè)置表格邊框顏色查看源代碼如何設(shè)置背景<TABLEbackground=“images/type_back.jpg”width=“360"height="120"border="2"><TR><TDcolspan="6"> </TD></TR><TRbgcolor="#EBEFFF"><TDcolspan="3">筆記本電腦</TD><TDcolspan=“3”bgcolor="yellow">辦公設(shè)備、文具、耗材</TD></TR>……</TABLE>background屬性用來(lái)設(shè)置表格的背景圖片bgcolor屬性用來(lái)設(shè)置表格、行、列的背景色?！?EBEFFF”是用RGB表示的一種顏色值，RGB指的是紅綠藍(lán)，下圖就是RGB顏色對(duì)照表。查看源代碼如何設(shè)置對(duì)其方式<TABLEwidth="350"height="100"border="2"background="images/type_back.jpg"><TR><TDcolspan="4"> </TD></TR><TRbgcolor="#EBEFFF"><TDcolspan="2"align="center">筆記本電腦</TD><TDcolspan="2"align="center">辦公設(shè)備、文具、耗材</TD></TR><TRbgcolor="#EBEFFF"><TD>惠普</TD><TD>華碩</TD><TD>打印機(jī)</TD><TD>刻錄盤(pán)</TD></TR></TABLE>align屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式查看源代碼為什么要使用填充屬性單元格里的內(nèi)容太靠近邊線，怎么辦？未填充的效果，字與單元格邊框之間的距離靠得太近什么是填充屬性和間距屬性border(邊框的厚度)內(nèi)容內(nèi)容內(nèi)容內(nèi)容cellpadding(單元格填充)cellspacing(單元格間距)如何使用填充、間距屬性border(邊框的厚度)cellpadding(單元格填充)cellspacing(單元格間距)查看源代碼<TABLEborder="20"cellpadding="30"cellspacing="40"bordercolor="red">……</TABLE>如何設(shè)置表格的填充屬性<TABLEcellspacing=“5”cellpadding=“10”border=“1"background="images/type_back.jpg"><TR><TDcolspan="6"> </TD></TR>

<TRbgcolor="#EBEFFF"><TDcolspan="3"align="center">筆記本電腦</TD><TDcolspan="3"align="center">辦公設(shè)備、文具、耗材</TD></TR>….</TABLE>cellspacing屬性用來(lái)設(shè)置表格內(nèi)框?qū)挾萩ellpadding屬性用來(lái)設(shè)置表格內(nèi)填充距離查看源代碼填充之后的效果小結(jié)2編寫(xiě)如下圖所示效果對(duì)應(yīng)的HTML代碼表格的高度、寬度、背景圖像、邊框和填充屬性行的背景色單元格居中對(duì)齊練習(xí)答案練習(xí)代碼如何實(shí)現(xiàn)圖文內(nèi)容的布局，達(dá)到如左圖所示頁(yè)面的效果？分析上圖所示頁(yè)面，應(yīng)該用什么進(jìn)行布局？

什么是表格布局使用表格進(jìn)行布局用表格對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行整體控制如何使用表格進(jìn)行布局使用表格布局下圖，需要幾行幾列？需要7行2列小結(jié)1、ul(ol)-li：常用于分類(lèi)導(dǎo)航或菜單等2、dl-dt-dd：常用于圖文混編的場(chǎng)合3、table-tr-td：常用于圖文布局或顯示數(shù)據(jù)4、form-table-tr-td：常用于布局表單請(qǐng)說(shuō)出實(shí)際開(kāi)發(fā)常用的4種塊狀結(jié)構(gòu)是什么？39/40框架為什么使用框架常用框架技術(shù)<frameset>框架<iframe>內(nèi)聯(lián)框架重用網(wǎng)站頂部重用網(wǎng)站底部左側(cè)導(dǎo)航目錄單擊左側(cè)導(dǎo)航，改變右側(cè)內(nèi)容，頂部和底部不需要再次加載40/40<frameset>框架5-1<framesetcols="25%,50%,*"rows="50%,*"border="5"><framesrc="the_first.html"><framesrc="the_second.html">……</frameset>語(yǔ)法表示橫向分割表示縱向分割表示引用頁(yè)面的地址41/40<frameset>框架5-2縱向分割窗口使用

“rows”屬性演示示例10：縱向分割41/4042/40<frameset>框架5-3橫向分割窗口使用

“cols”屬性演示示例11：橫向分割42/4043/40<frameset>框架5-4橫向和縱向同時(shí)分割窗口上下分割左右分割44/40<frameset>框架5-5窗口間的關(guān)聯(lián)<framesrc="subframe/right.html"name="rightframe"/><ahref="right.html"target="rightFrame">……</a>在框架窗口中打開(kāi)鏈接框架窗口名稱演示示例13：窗口間的連接位置44/4045/40<iframe>內(nèi)聯(lián)框架2-1<iframesrc="path"name="mainFrame"frameborder="x"scrolling="yes/no"width="x"height="y"></iframe>語(yǔ)法引用頁(yè)面地址