第2章 塊級(jí)標(biāo)簽2課件_第1頁
第2章 塊級(jí)標(biāo)簽2課件_第2頁
第2章 塊級(jí)標(biāo)簽2課件_第3頁
第2章 塊級(jí)標(biāo)簽2課件_第4頁
第2章 塊級(jí)標(biāo)簽2課件_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

2.1

基本塊級(jí)標(biāo)簽2.2

用于布局的塊級(jí)標(biāo)簽2.3實(shí)訓(xùn)——制作什錦果園關(guān)于頁面第2章塊級(jí)標(biāo)簽2.2

用于布局的塊級(jí)標(biāo)簽表格的定義表格的作用表格的構(gòu)建步驟表格標(biāo)記符網(wǎng)頁布局一、表格的定義：

將按特定的行、列規(guī)則對(duì)內(nèi)容進(jìn)行排列<Caption></Caption>表格標(biāo)題<Tr></Tr>表格的行<Th></Th>行列標(biāo)題數(shù)據(jù)<Td></Td>普通數(shù)據(jù)<Table></Table>表格二、表格的作用：HTML表格模型使用戶可以將各種數(shù)據(jù)排成行和列，從而獲得特定的表格效果用于設(shè)計(jì)網(wǎng)頁的布局使用TABLE標(biāo)記符包括所有表格內(nèi)容使用CAPTION標(biāo)記符定義表格的標(biāo)題從第一行開始，使用TR標(biāo)記符分隔每一行表格有多少行，就應(yīng)該有多少個(gè)TR標(biāo)記符表格的行數(shù)應(yīng)該是垂直方向上單元格的最大數(shù)三、表格的構(gòu)造步驟：從第一行開始，使用TR標(biāo)記符分隔每一行在每一行(即TR標(biāo)記符后)內(nèi)，依次用TH或TD標(biāo)記符標(biāo)記每個(gè)單元格的內(nèi)容按照步驟2的做法，順次一行一行處理，直到表格結(jié)束如果遇到空單元格，只需使用空的TH或TD標(biāo)記符即可注意：表格的創(chuàng)建，一般要對(duì)每行設(shè)置行高，對(duì)第一行的每個(gè)單元格設(shè)置寬度。預(yù)覽后，再次對(duì)需要設(shè)置的地方進(jìn)行調(diào)整。2.表格的基本語法表格主要通過3個(gè)標(biāo)簽來構(gòu)成：<table>、<tr>和<td>。表格的語法格式為：<table><caption>標(biāo)題</caption><tr><th>表頭1</th><th>表頭2</th><th>…</th><th>表頭n</th></tr><tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr>…<tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr></table>2.2

用于布局的塊級(jí)標(biāo)簽【演練2-9】在頁面中添加一個(gè)3行3列的表格。表格標(biāo)簽符的屬性<Table></Table>標(biāo)簽符的屬性WidthBorderFrameRulesAlign……Border：邊線寬度Frame：控制是否顯示以及如何顯示表格的邊框Rules：控制是否顯示以及如何顯示單元格之間的分隔線<Table></Table>標(biāo)簽符Width屬性——表格寬度可以為像素點(diǎn)值或百分比Border屬性——邊線寬度具體數(shù)值，0表示不顯示邊線,表格默認(rèn)沒有邊線Frame屬性——控制表格邊框表示表格最外層的四條框線，該屬性的取值可以是：Void——無邊框。void是默認(rèn)值，即默認(rèn)時(shí)不顯示邊框Above——僅有頂框Below——僅有底框Hsides——僅有頂框和底框（水平方向）vsides——僅有左、右側(cè)框（垂直方向）lhs——僅有左側(cè)框rhs——僅有右側(cè)框box——包含全部四個(gè)邊框border——包含全部四個(gè)邊框表格標(biāo)簽符的屬性其它值——2、3、4rules屬性——控制是否顯示以及如何顯示單元格之間的分隔線，取值可以是：none——無分隔線。none是默認(rèn)值，即默認(rèn)時(shí)不顯示單元格間的分隔線rows——僅有行分隔線cols——僅有列分隔線all——包括所有分隔線Align屬性——控制表格與頁面其它內(nèi)容的對(duì)齊方式，取值可以是：Left、center、rightBgcolor屬性——設(shè)置表格的背景顏色background屬性——設(shè)置表格的背景圖案Cellspacing屬性——單元格之間的距離cellpadding屬性——分割線與數(shù)據(jù)之間的距離cellspacing屬性單元格之間的空白cellpadding屬性表格分隔線和數(shù)據(jù)之間的距離<HTML><HEAD><TITLE>表格的邊框和分隔線示例</TITLE></HEAD><BODY><TABLEborder="4"frame="hsides"rules="rows"><!--邊框?qū)挾葹?像素，僅顯示上下邊框和橫向分隔線--><CAPTION><H3>我的日程表<H3></CAPTION><TR><TH>星期一<TH>星期二<TH>星期三<TH>星期四<TH>星期五<TR><TD>MUD<TD>NBA2001<TD>聯(lián)眾軍棋<TD>聯(lián)眾軍棋<TD>笑傲江湖<TR><TD>DiabloII<TD>DiabloII<TD>聯(lián)眾軍棋<TD>升級(jí)<TD>MUD<TR><TD>MUD<TD>睡覺<TD>學(xué)習(xí)<TD>打籃球<TD>打籃球</TABLE></BODY></HTML>cellspacing屬性單元格之間的空白cellpadding屬性表格分隔線和數(shù)據(jù)之間的距離<HTML><HEAD><TITLE>表格單元格空白示例</TITLE></HEAD><BODY>表格1<HRalign="left"width="50%"><TABLEbordercellspacing=10><TR><TD>大話西游<TD>大內(nèi)密探008<TD>少林足球<TR><TD>鹿鼎記<TD>喜劇之王<TD>九品芝麻官<TR><TD>逃學(xué)威龍<TD>食神<TD>百變金剛</TABLE><P>表格2<HRalign="left"width="50%"><TABLEbordercellpadding="10"><TR><TD>大話西游<TD>大內(nèi)密探008<TD>少林足球<TR><TD>鹿鼎記<TD>喜劇之王<TD>九品芝麻官<TR><TD>逃學(xué)威龍<TD>食神<TD>百變金剛</TABLE></BODY></HTML><Caption></Caption>標(biāo)簽符定義表格的標(biāo)題align屬性——表格標(biāo)題在網(wǎng)頁中的對(duì)齊方式取值為：left、center、right<Captionalign=“center”>成績單<Caption><TR></TR>標(biāo)簽符定義表格的一行align屬性——行中數(shù)據(jù)的水平對(duì)齊方式取值為：left、center、rightvalign屬性——行中數(shù)據(jù)的垂直對(duì)齊方式取值為：top、middle、bottomBgcolor屬性——整行單元格的背景顏色<HTML><HEAD><TITLE>表格數(shù)據(jù)的水平對(duì)齊</TITLE></HEAD><BODY><TABLEborder><CAPTION><H3>表格數(shù)據(jù)的水平對(duì)齊</H3></CAPTION><TRalign="right"><TD>本行數(shù)據(jù)右對(duì)齊<TD>右<TD>右<TR><TD>左<TD>本行數(shù)據(jù)為默認(rèn)左對(duì)齊<TD>左<TRalign="center"><TD>中<TD>中<TD>本行數(shù)據(jù)居中對(duì)齊</TABLE></BODY></HTML><HTML><HEAD><TITLE>表格數(shù)據(jù)的垂直對(duì)齊</TITLE></HEAD><BODY><TABLEborderalign="center"><CAPTION><H3>表格數(shù)據(jù)的垂直對(duì)齊</H3></CAPTION><TRvalign="top"><TD><IMGsrc="barbarian.jpg"><TD>野蠻人<TD>barbarian<TR><TD><IMGsrc="sorceress.jpg"><TD>女巫<TD>sorceress<TRvalign="bottom"><TD><IMGsrc="necromancer.jpg"><TD>巫師<TD>necromancer</TABLE></BODY></HTML><TD></TD>標(biāo)簽符定義行中的具體單元格align屬性——單元格內(nèi)數(shù)據(jù)的水平對(duì)齊方式取值為：left、center、rightvalign屬性——單元格內(nèi)數(shù)據(jù)的垂直對(duì)齊方式取值為：top、middle、bottombgcolor屬性——單元格的背景顏色width屬性、height屬性——單元格寬度、高度具體數(shù)據(jù)值或百分比rowspan屬性—合并單元格，單元格所占的行數(shù)colspan屬性使用html語句，在網(wǎng)頁中插入如下形式的表格作業(yè)13.跨行跨列的表格若碰到跨行或跨列的單元格，則需合并單元格。在<TD></TD>標(biāo)簽符中，用rowspan或colspan屬性進(jìn)行標(biāo)記。并且只在首次出現(xiàn)的行中包括。rowspan屬性—合并單元格，單元格所占的行數(shù)<TDrowspan=“3”>表示該單元格高度為三行colspan屬性—合并單元格，單元格所占的列數(shù)2.2

用于布局的塊級(jí)標(biāo)簽3.跨行跨列的表格（1）跨行跨行是指單元格在垂直方向上合并，語法如下：<table><tr><tdrowspan="所跨的行數(shù)">單元格內(nèi)容</td></tr></table>

其中，rowspan表示跨行的意思。【演練2-10】制作一個(gè)跨行展示的不同鞋類的庫存表格。2.2

用于布局的塊級(jí)標(biāo)簽（2）跨列跨列是指單元格在水平方向上合并，語法如下：<table><tr><tdcolspan="所跨的行數(shù)">單元格內(nèi)容</td></tr></table>其中，colspan表示跨列的意思。【演練2-11】制作一個(gè)跨列展示的不同鞋類的庫存表格。2.2

用于布局的塊級(jí)標(biāo)簽（3）跨行、跨列【演練2-12】制作一個(gè)跨行跨列展示的不同鞋類的庫存表格。2.2

用于布局的塊級(jí)標(biāo)簽使用html語句，在網(wǎng)頁中插入如下形式的表格作業(yè)2作業(yè)3習(xí)題2-2、使用跨行跨列的表格制作網(wǎng)絡(luò)鞋城促銷活動(dòng)分類信息，如圖所示。提示：

插入圖片的標(biāo)記符<IMGsrc=“圖片路徑”width=”圖片寬度值”height=“圖片高度值">4．表格數(shù)據(jù)的分組標(biāo)簽表格數(shù)據(jù)的分組標(biāo)簽包括<thead>、<tbody>和<tfooter>，主要用于對(duì)報(bào)表數(shù)據(jù)進(jìn)行邏輯分組。其中，<thead>標(biāo)簽定義表格的頭部；<tbody>標(biāo)簽定義表格主體，即報(bào)表詳細(xì)的數(shù)據(jù)描述；<tfoot>標(biāo)簽定義表格的腳部，即對(duì)各分組數(shù)據(jù)進(jìn)行匯總的部分。【演練2-13】制作一個(gè)鞋城季度銷量數(shù)據(jù)報(bào)表。2.2

用于布局的塊級(jí)標(biāo)簽7.表格的應(yīng)用（1）使用表格顯示數(shù)據(jù)【演練2-14】制作鞋城季度銷量一覽表。2.2

用于布局的塊級(jí)標(biāo)簽7.表格的應(yīng)用（2）使用表格實(shí)現(xiàn)頁面局部布局【演練2-15】制作網(wǎng)絡(luò)鞋城商品分類頁面。2.2

用于布局的塊級(jí)標(biāo)簽作業(yè)4習(xí)題2-3、使用表格布局網(wǎng)絡(luò)鞋城支付選擇頁面，如圖所示。提示：

插入圖片的標(biāo)記符<IMGsrc=“圖片路徑“width=”圖片寬度值”height=“圖片高度值">圖形化表格作業(yè)6提示：

插入圖片的標(biāo)記符<IMGsrc=“圖片路徑“width=”圖片寬度值”height=“圖片高度值">圖形化表格作業(yè)7提示：

插入圖片的標(biāo)記符<IMGsrc=“圖片路徑“width=”圖片寬度值”height=“圖片高度值">表格細(xì)線??!<tableborder="1"cellspacing="0"bordercolor="#FF0000">表格細(xì)線方法一：將表格的背景顏色設(shè)置為要顯示的線的顏色。表格的cellspacing屬性設(shè)置為細(xì)線的粗細(xì)。將單元格或表格行的背景顏色設(shè)置為不同于表格的背景顏色。作業(yè)8表格細(xì)線方法二：把細(xì)線擴(kuò)展成單元格，背景顏色設(shè)置為細(xì)線的顏色。寬度或者高度設(shè)置為細(xì)線的粗細(xì)。表格的cellspacing和cellpadding屬性值設(shè)置為0.作業(yè)9在網(wǎng)頁中插入如下形式的表格作業(yè)10在網(wǎng)頁中插入如下形式的表格作業(yè)102.2.4表單1．表單的工作原理

表單的作用是從客戶端收集信息。當(dāng)訪問者在表單中輸入信息，單擊提交按鈕后，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端腳本或應(yīng)用程序?qū)?duì)這些信息進(jìn)行處理。服務(wù)器進(jìn)行響應(yīng)時(shí)，會(huì)將被請(qǐng)求信息發(fā)送回用戶（或客戶端），或者基于該表單內(nèi)容執(zhí)行一些操作，表單的工作原理如圖2-18所示。

2.2

用于布局的塊級(jí)標(biāo)簽2.表單標(biāo)簽

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論