《網(wǎng)頁(yè)設(shè)計(jì)與制作》第3章_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第3章_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第3章_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第3章_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第3章_第5頁(yè)
已閱讀5頁(yè)，還剩26頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第三章表格應(yīng)用和布局超鏈接的基本語(yǔ)法？如何創(chuàng)建錨鏈接？表單的基本語(yǔ)法？表單元素包括哪些？語(yǔ)法分別是什么？表單中只讀和禁用對(duì)應(yīng)的屬性是什么？回顧與作業(yè)點(diǎn)評(píng)制作表格圖文布局--公告欄頁(yè)面制作表格布局表單頁(yè)面--登錄頁(yè)面本章任務(wù)使用表格顯示數(shù)據(jù)使用表格實(shí)現(xiàn)頁(yè)面布局本章目標(biāo)表格應(yīng)用場(chǎng)合論壇中應(yīng)用表格購(gòu)物網(wǎng)站應(yīng)用表格為什么使用表格門戶網(wǎng)站應(yīng)用表格行列單元格表格的基本結(jié)構(gòu)特點(diǎn)：通常情況下，同行的高度一致、同列的寬度一致<table><tr><td>第1個(gè)單元格的內(nèi)容</td><td>第2個(gè)單元格的內(nèi)容</td> ......</tr><tr><td>第1個(gè)單元格的內(nèi)容</td><td>第2個(gè)單元格的內(nèi)容</td> ......</tr></table><table>...</table>定義表格<tr>…</tr>

定義行

基本語(yǔ)法<td>…</td>

定義列……<body><tableborder="2">

<tr><td>1行1列的單元格</td><td>1行2列的單元格</td><td>1行3列的單元格</td></tr>

<tr><td>2行1列的單元格</td><td>2行2列的單元格</td><td>2行3列的單元格</td></tr></table></body>……如何創(chuàng)建表格<table>代表表格的開始，border="2"表示邊框?qū)挾葹?表格的第1行，有3條數(shù)據(jù)，<tr>…</tr>代表行表格的第2行，有3條數(shù)據(jù)，<tr>…</tr>代表行操作演示1：表格的基本結(jié)構(gòu)下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列?表格的跨行跨列跨3列跨3行……<tablewidth="200"border="1"><tr><tdcolspan="3">學(xué)生成績(jī)</td></tr><tr><td>語(yǔ)文</td><td>98</td></tr><tr><td>數(shù)學(xué)</td><td>95</td></tr></table>……如何跨列1、colspan屬性表示跨多少列2、該行其他單元格的內(nèi)容就省略不寫了操作演示2：跨列的表格……<tablewidth="500"border="1"><tr><tdrowspan="2">張三</td><td>語(yǔ)文</td><td>98</td></tr><tr><td>數(shù)學(xué)</td><td>95</td></tr>

......代碼同上.兩行內(nèi)容..</table>……如何跨行1、rowspan

屬性表示跨多少行2、該列單元格的內(nèi)容就省略不寫了操作演示3：跨行的表格……<tablewidth="200"border="1"><tr><tdcolspan="3">學(xué)生成績(jī)</td></tr><tr><tdrowspan="2">張三</td><td>語(yǔ)文</td><td>98</td></tr><tr><td>數(shù)學(xué)</td><td>95</td></tr>

....代碼同上兩行....</table>……如何跨行、跨列colspan

跨3列colspan

跨2行操作演示4：跨行跨列的表格需求說明制作頁(yè)面練習(xí)——簡(jiǎn)單表格完成時(shí)間：15分鐘用2行3列的表格顯示商品數(shù)據(jù)需求說明練習(xí)——跨行跨列表格完成時(shí)間：20分鐘實(shí)現(xiàn)一個(gè)跨行跨列的商品類目表格h2標(biāo)題如何實(shí)現(xiàn)年終數(shù)據(jù)報(bào)表？表格高級(jí)標(biāo)簽2-1表格標(biāo)題<caption>數(shù)據(jù)主體<tbody>頁(yè)眉<thead>頁(yè)腳<thfoot表頭<th>表格數(shù)據(jù)的分組標(biāo)簽<thead>、<tbody>、<tfooter>配合使用，對(duì)報(bào)表數(shù)據(jù)進(jìn)行邏輯分組表格高級(jí)標(biāo)簽2-2……<tablewidth="100%"><caption>年終數(shù)據(jù)報(bào)表</caption><thead

style="background:#0FF"><tr><th>月份</th><th>收入（RMB）</th></tr>

</thead><tbody

style="background:#9CC"><tr><td>1月</td><td>100</td></tr><tr><td>2月</td><td>80</td></tr><!--省略3-6月的類似HTML代碼-->

</tbody><tfoot

style="background:#FF0"><tr><td>平均月收入</td><td>196.67</td></tr><tr><td>總計(jì)</td><td>1180</td></tr>

</tfoot></table>……<thead>標(biāo)簽對(duì)應(yīng)報(bào)表的頁(yè)眉

<tbody>對(duì)應(yīng)報(bào)表的數(shù)據(jù)主體

<tfooter>對(duì)應(yīng)報(bào)表的頁(yè)腳

操作演示5：thead標(biāo)簽練習(xí)——表格分組標(biāo)簽的使用需求說明實(shí)現(xiàn)一個(gè)按地點(diǎn)和時(shí)間匯總的年終報(bào)表

完成時(shí)間：20分鐘數(shù)據(jù)分組的表格

表格布局的應(yīng)用場(chǎng)合表格布局圖文布局，數(shù)據(jù)規(guī)則整齊表單布局，同樣要求數(shù)據(jù)規(guī)則整齊如何實(shí)現(xiàn)圖文布局2-1實(shí)現(xiàn)步驟如何實(shí)現(xiàn)圖文布局2-2實(shí)現(xiàn)步驟……<tableborder="1px"><tr><tdcolspan="2"><imgsrc=“…"alt="公告欄"/></td></tr><tr><tdrowspan="4"><imgsrc=“…"alt="公告左側(cè)圖"/></td><td>大學(xué)要求老師開網(wǎng)店</td></tr><tr><td>安全錘網(wǎng)上大熱銷</td></tr>……</tr></table>……整個(gè)是5行2列的表格,實(shí)際布局時(shí)border=“0”隱藏邊框公告欄：跨2列圖片：跨4行操作演示6：圖文布局需求說明根據(jù)提供的素材實(shí)現(xiàn)練習(xí)——貴美商品分類頁(yè)完成時(shí)間：25分鐘使用表格實(shí)現(xiàn)圖文布局如何實(shí)現(xiàn)頁(yè)面中登錄表單的布局？如何實(shí)現(xiàn)表單布局3-1問題：結(jié)構(gòu)簡(jiǎn)單，但不美觀實(shí)際頁(yè)面中的登錄表單布局如何實(shí)現(xiàn)表單布局3-2實(shí)際應(yīng)用，需要幾行幾列的表格布局？如何實(shí)現(xiàn)表單布局3-3<formmethod="post"action="login_success.htm"><table><tr><td><imgsrc="images/title_login_2.png"alt="alt"/></td><tdcolspan="2"> </td></tr><tr><td></td><td>會(huì)員名:</td><td><inputname=“sname”…（可包含….）</td>…代碼同“會(huì)員名”…<tdcolspan="2"><inputtype="image"…src=“…"/></td></tr> </table></form>整體布局：4行3列的表格圖片后的內(nèi)容跨2列，內(nèi)容用“空格”填充圖片按鈕跨2列操作演示7：貴美登錄表單使用表格進(jìn)行布局對(duì)顯示數(shù)據(jù)有什么要求？實(shí)現(xiàn)思路是什么？小結(jié)2-1使用場(chǎng)合：數(shù)據(jù)顯示要求較為規(guī)整，符合表格布局的特點(diǎn)布局的實(shí)現(xiàn)思路：需要幾行幾列的表格？哪些單元格有跨行或跨列？編寫表格代碼實(shí)現(xiàn)注意：1、同列單元格寬度由該列寬度最大的單元格決定2、同行單元格寬度由該行高度最高的單元格決定小結(jié)2-2同列單元格寬度由該列寬度最大的單元格決定，要防止內(nèi)容過長(zhǎng)撐開單元格同行單元格同理，注意換行帶來的高度影響如何用表格實(shí)現(xiàn)下圖布局？嵌套布局2-1對(duì)于復(fù)雜的頁(yè)面，如使用表格則必須采用多層嵌套嵌套表格布局的缺點(diǎn)：代碼量大層次結(jié)構(gòu)也相對(duì)復(fù)雜不利于Goole等搜索引擎搜索查找數(shù)據(jù)表格布局僅適用于：規(guī)則的數(shù)據(jù)顯示表單頁(yè)面嵌套布局2-2表格布局不適合不規(guī)則的復(fù)雜頁(yè)面，這種場(chǎng)合需使用DIV+CSS布局（后續(xù)學(xué)習(xí)）操作演示8：嵌套布局需求說明制作貴美注冊(cè)頁(yè)面練習(xí)——制作貴美注冊(cè)頁(yè)完成時(shí)間：25分鐘1、先考慮使用幾行幾列的表格2、單元

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論