第2章 塊級標簽2課件_第1頁
第2章 塊級標簽2課件_第2頁
第2章 塊級標簽2課件_第3頁
第2章 塊級標簽2課件_第4頁
第2章 塊級標簽2課件_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

2.1

基本塊級標簽2.2

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

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

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

用于布局的塊級標簽【演練2-9】在頁面中添加一個3行3列的表格。表格標簽符的屬性<Table></Table>標簽符的屬性WidthBorderFrameRulesAlign……Border：邊線寬度Frame：控制是否顯示以及如何顯示表格的邊框Rules：控制是否顯示以及如何顯示單元格之間的分隔線<Table></Table>標簽符Width屬性——表格寬度可以為像素點值或百分比Border屬性——邊線寬度具體數(shù)值，0表示不顯示邊線,表格默認沒有邊線Frame屬性——控制表格邊框表示表格最外層的四條框線，該屬性的取值可以是：Void——無邊框。void是默認值，即默認時不顯示邊框Above——僅有頂框Below——僅有底框Hsides——僅有頂框和底框（水平方向）vsides——僅有左、右側(cè)框（垂直方向）lhs——僅有左側(cè)框rhs——僅有右側(cè)框box——包含全部四個邊框border——包含全部四個邊框表格標簽符的屬性其它值——2、3、4rules屬性——控制是否顯示以及如何顯示單元格之間的分隔線，取值可以是：none——無分隔線。none是默認值，即默認時不顯示單元格間的分隔線rows——僅有行分隔線cols——僅有列分隔線all——包括所有分隔線Align屬性——控制表格與頁面其它內(nèi)容的對齊方式，取值可以是：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>升級<TD>MUD<TR><TD>MUD<TD>睡覺<TD>學(xué)習<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>標簽符定義表格的標題align屬性——表格標題在網(wǎng)頁中的對齊方式取值為：left、center、right<Captionalign=“center”>成績單<Caption><TR></TR>標簽符定義表格的一行align屬性——行中數(shù)據(jù)的水平對齊方式取值為：left、center、rightvalign屬性——行中數(shù)據(jù)的垂直對齊方式取值為：top、middle、bottomBgcolor屬性——整行單元格的背景顏色<HTML><HEAD><TITLE>表格數(shù)據(jù)的水平對齊</TITLE></HEAD><BODY><TABLEborder><CAPTION><H3>表格數(shù)據(jù)的水平對齊</H3></CAPTION><TRalign="right"><TD>本行數(shù)據(jù)右對齊<TD>右<TD>右<TR><TD>左<TD>本行數(shù)據(jù)為默認左對齊<TD>左<TRalign="center"><TD>中<TD>中<TD>本行數(shù)據(jù)居中對齊</TABLE></BODY></HTML><HTML><HEAD><TITLE>表格數(shù)據(jù)的垂直對齊</TITLE></HEAD><BODY><TABLEborderalign="center"><CAPTION><H3>表格數(shù)據(jù)的垂直對齊</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>標簽符定義行中的具體單元格align屬性——單元格內(nèi)數(shù)據(jù)的水平對齊方式取值為：left、center、rightvalign屬性——單元格內(nèi)數(shù)據(jù)的垂直對齊方式取值為：top、middle、bottombgcolor屬性——單元格的背景顏色width屬性、height屬性——單元格寬度、高度具體數(shù)據(jù)值或百分比rowspan屬性—合并單元格，單元格所占的行數(shù)colspan屬性使用html語句，在網(wǎng)頁中插入如下形式的表格作業(yè)13.跨行跨列的表格若碰到跨行或跨列的單元格，則需合并單元格。在<TD></TD>標簽符中，用rowspan或colspan屬性進行標記。并且只在首次出現(xiàn)的行中包括。rowspan屬性—合并單元格，單元格所占的行數(shù)<TDrowspan=“3”>表示該單元格高度為三行colspan屬性—合并單元格，單元格所占的列數(shù)2.2

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

其中，rowspan表示跨行的意思?！狙菥?-10】制作一個跨行展示的不同鞋類的庫存表格。2.2

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

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

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

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

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

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

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

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

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

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

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

2.2

用于布局的塊級標簽2.表單標簽

溫馨提示

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

評論

0/150

提交評論