HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加會(huì)員功能表格_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加會(huì)員功能表格_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加會(huì)員功能表格_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加會(huì)員功能表格_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加會(huì)員功能表格_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作添加會(huì)員功能表格項(xiàng)目將通過“制作一個(gè)D清單網(wǎng)頁廣告單頁”項(xiàng)目，即通過制作一個(gè)HTML頁面來承載網(wǎng)頁制作知識(shí)，完成網(wǎng)頁開發(fā)環(huán)境搭建、HTML5標(biāo)簽、CSS3疊層樣式和響應(yīng)式布局等的學(xué)習(xí)。項(xiàng)目目標(biāo)D清單是某公司推出的一款跨平臺(tái)同步的待辦事項(xiàng)和任務(wù)提醒軟件,旨在協(xié)助您完成待辦事務(wù)比如生日提醒,旅行安排,會(huì)議準(zhǔn)備等以便更好的進(jìn)行時(shí)間和事項(xiàng)管理。為了方便D清單應(yīng)用的推廣，其公司需要制作一個(gè)該應(yīng)用產(chǎn)品的介紹網(wǎng)頁。該頁面主要用于手機(jī)端進(jìn)行分享推廣，同時(shí)也要求能夠在電腦端進(jìn)行訪問。前端工程師小王所在的科技公司已經(jīng)拿到了設(shè)計(jì)稿，如圖1所示。主管希望他擔(dān)任本次項(xiàng)目的前端工作，開發(fā)完成后將成果交付給程序員完成邏輯制作、測(cè)試和發(fā)布。項(xiàng)目情境圖1-1-1項(xiàng)目移動(dòng)端和電腦端頁面截圖網(wǎng)頁制作的一般流程如下：項(xiàng)目分析項(xiàng)目發(fā)布需求分析規(guī)劃設(shè)計(jì)實(shí)施測(cè)試交付根據(jù)“移動(dòng)優(yōu)先”原則，我們需要制定項(xiàng)目完成的計(jì)劃：項(xiàng)目分析時(shí)間段1時(shí)間段2時(shí)間段3時(shí)間段4時(shí)間段5分析規(guī)劃實(shí)施階段1移動(dòng)端內(nèi)容制作階段2移動(dòng)端格式制作階段3響應(yīng)式制作測(cè)試與交付D清單前端開發(fā)甘特圖時(shí)間進(jìn)度任務(wù)制作網(wǎng)頁內(nèi)容能夠表述表格的三個(gè)基本元素。能夠根據(jù)需要運(yùn)用表格各個(gè)基本元素的屬性。能夠綜合運(yùn)用HTML表格標(biāo)簽和屬性完成D清單網(wǎng)頁會(huì)員功能表格內(nèi)容。任務(wù)目標(biāo)

添加會(huì)員功能表格本次任務(wù)要求在的基礎(chǔ)上添加D清單網(wǎng)頁會(huì)員功能表格內(nèi)容。完成后的表格內(nèi)容效果圖如圖1-6所示。任務(wù)描述圖1-6D清單網(wǎng)頁的表格內(nèi)容效果圖

添加會(huì)員功能表格要完成D清單網(wǎng)頁表格內(nèi)容的制作，需要：學(xué)習(xí)HTML表格的三個(gè)基本元素；學(xué)習(xí)HTML表格的語法及表格各個(gè)元素的屬性；分析D清單網(wǎng)頁會(huì)員功能效果圖的表格內(nèi)容，正確選擇和使用表格標(biāo)簽完成D清單網(wǎng)頁中的表格內(nèi)容制作。D清單網(wǎng)頁會(huì)員功能表格效果如圖1-6-1所示?？梢钥闯?，表格有4列11行，表格結(jié)構(gòu)包含了描述文字“可以在手機(jī)端使用”，以及加粗的表格表頭、表格正文等常規(guī)內(nèi)容。任務(wù)分析

添加會(huì)員功能表格任務(wù)分析圖1-6-1D清單網(wǎng)頁會(huì)員功能的表格效果

添加會(huì)員功能表格知識(shí)與技能準(zhǔn)備表格通過使用table、tr、th或td標(biāo)簽構(gòu)成網(wǎng)頁中數(shù)據(jù)的表示方式。（1）table標(biāo)簽：表格元素都是以<table>標(biāo)記開始，</table>標(biāo)記結(jié)束，用來定義表格外框。（2）tr標(biāo)簽：定義表格行，表格的每一行都以<tr>標(biāo)記開始，</tr>標(biāo)記結(jié)束。（3）th標(biāo)簽：定義表格的表頭。（4）td標(biāo)簽：定義單元格，即表格的具體數(shù)據(jù)存儲(chǔ)單元，每個(gè)單元格都以<td>標(biāo)記開始，</td>標(biāo)記結(jié)束。1、表格的元素表格是網(wǎng)頁中最常用的元素，網(wǎng)頁中經(jīng)常使用表格進(jìn)行顯示或者統(tǒng)計(jì)數(shù)據(jù)，表格不僅可以在網(wǎng)頁上顯示數(shù)據(jù)，還可以將相互關(guān)聯(lián)的一些信息元素集中定位，從而實(shí)現(xiàn)頁面布局使頁面更加簡(jiǎn)潔。像Excel數(shù)字表格，可以看出表格都是由行和列構(gòu)成的，而行和列的交匯可以形成一個(gè)個(gè)單元格。知識(shí)與技能準(zhǔn)備在一個(gè)表格中，可以插入多對(duì)tr標(biāo)簽表示多行，一對(duì)tr代表一行，每對(duì)tr標(biāo)簽之間可以插入多對(duì)td標(biāo)簽，每一對(duì)td標(biāo)簽代表一個(gè)單元格，單元格里的內(nèi)容可以是文字、數(shù)據(jù)、圖像、超鏈接、表單等元素。其語法形式如下：2、表格的語法<table><tr><th>表頭1</th><th>表頭2</th></tr><tr><td>單元格1_1</td>

<td>單元格1_2</td> </tr><tr><td>單元格2_1</td> <td>單元格2_2</td>

</tr></table>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-6-1創(chuàng)建一個(gè)兩行三列表格12345678910111213<!--創(chuàng)建兩行三列的表格--><table><tr><td>姓名</td><td>性別</td><td>年齡</td></tr><tr><td>張三</td><td>男</td><td>20</td></tr></table> 顯示效果如下：課堂練習(xí)1-6-1創(chuàng)建一個(gè)兩行三列表格圖1-6-3簡(jiǎn)單的兩行兩列表格知識(shí)與技能準(zhǔn)備表格中可以用標(biāo)題來對(duì)表格做一個(gè)簡(jiǎn)單的說明，caption表格標(biāo)題就是用來描述表格的特征，但caption元素必須緊跟table元素開始標(biāo)簽才有效，而且一個(gè)表格只能包含一個(gè)表格標(biāo)題。其語法形式如下：1、caption元素：表格的標(biāo)題<table><caption>表格標(biāo)題文字說明</caption></table>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-6-2添加表格標(biāo)題1234567891011121314<!--創(chuàng)建兩行四列的表格--><table><caption>早餐單</caption><tr><td>周一</td>

<td>周二</td> <td>周三</td></tr><tr><td>皮蛋粥</td>

<td>炒粉</td>

<td>湯粉</td></tr></table>顯示效果如下：課堂練習(xí)1-6-2添加表格標(biāo)題圖1-6-3添加表格標(biāo)題知識(shí)與技能準(zhǔn)備表格經(jīng)常會(huì)有行、列合并進(jìn)行數(shù)據(jù)輸入的，網(wǎng)頁中的表格行、列合并都是對(duì)單元格進(jìn)行設(shè)置的。（1）rowspan：行合并，指單元格所占的行數(shù)。其語法形式如下：（2）colspan：列合并，指單元格所占的列數(shù)。其語法形式如下：2、表格的行、列合并<tdrowspan=“跨的行數(shù)”><tdcolspan=”跨的列數(shù)”>在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-6-3設(shè)置單元格行合并1234567891011121314151617181920<!--創(chuàng)建四行六列的表格--><table>

<caption>課程表</caption> <tr> <td></td>

<td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td>

</tr>

<tr>

<tdrowspan="2">上午</td><!--合并單元格--> <td>網(wǎng)頁布局</td> <td>Photoshop</td> <td>Axure</td> <td>網(wǎng)頁UI設(shè)計(jì)</td> <td>AI設(shè)計(jì)</td>

</tr>21222324252627282930313233343536<tr> <td>英語</td> <td>高數(shù)</td> <td>C語言</td> <td>網(wǎng)絡(luò)基礎(chǔ)</td> <td>網(wǎng)頁布局</td>

</tr> <tr> <td>下午</td> <td>體育</td> <td>德育</td> <td>Photoshop</td> <td>C語言</td> <td>網(wǎng)絡(luò)基礎(chǔ)</td> </tr></table>顯示效果如下：課堂練習(xí)1-6-3設(shè)置單元格行合并圖1-6-4設(shè)置單元格行合并在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-6-4設(shè)置單元格列合并1234567891011121314<!--創(chuàng)建五行三列的表格--><table><caption>成績(jī)登記表</caption><tr><thcolspan="3">第一學(xué)期</th><!--合并單元格--></tr><tr><td>姓名</td> <td>網(wǎng)頁布局</td> <td>Photoshop</td></tr><tr><td>張三</td>1516171819202122232425262728<td>90</td><td>92</td></tr><tr><td>李四</td> <td>80</td> <td>72</td></tr><tr><td>王五</td> <td>84</td> <td>78</td></tr></table>顯示效果如下：課堂練習(xí)1-6-4設(shè)置單元格列合并圖1-6-5設(shè)置單元格列合并知識(shí)與技能準(zhǔn)備3、table標(biāo)簽的常用屬性屬性說明width定義表格的總寬度。height定義表格的總高度。border定義表格邊框的寬度，默認(rèn)值為0，值為0時(shí)邊框線隱藏，值越大邊框線越粗。bordercolor定義表格邊框的顏色。cellpadding定義單元格的補(bǔ)白，即單元格內(nèi)容與單元格邊框線之間的距離。cellspacing定義單元格的邊界，即單元格與單元格之間的間距。align定義整個(gè)表格的水平對(duì)齊方式，參數(shù)有l(wèi)eft、center、right。bgcolor定義表格整體的背景顏色。表1-6-1table元素的常用屬性在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-6-5設(shè)置表格table的各個(gè)屬性1234567891011121314<!--創(chuàng)建五行三列的表格--><table><caption>成績(jī)登記表</caption><tr><thcolspan="3">第一學(xué)期</th><!--合并單元格--></tr><tr><td>姓名</td> <td>網(wǎng)頁布局</td> <td>Photoshop</td></tr><tr><td>張三</td>1516171819202122232425262728<td>90</td><td>92</td></tr><tr><td>李四</td> <td>80</td> <td>72</td></tr><tr><td>王五</td> <td>84</td> <td>78</td></tr></table>打開課堂練習(xí)1-6-4的代碼，對(duì)<table>標(biāo)簽中的代碼進(jìn)行修改：課堂練習(xí)1-6-5設(shè)置表格table的各個(gè)屬性12<tableborder="1"width="300"height="100"bordercolor="#FFF"cellpadding="5"cellspacing="5"align="center"bgcolor="#CCC">顯示效果如下：圖1-6-6table標(biāo)簽的屬性設(shè)置效果知識(shí)與技能準(zhǔn)備4、tr標(biāo)簽的常用屬性屬性說明height定義表格行的高度。bgcolor定義表格行的背景顏色。align定義行內(nèi)文字的水平對(duì)齊方式，參數(shù)有l(wèi)eft、center、right。valign定義行內(nèi)文字的垂直對(duì)齊方式，參數(shù)有top、middle、bottom。表1-6-2tr元素的常用屬性知識(shí)與技能準(zhǔn)備5、td標(biāo)簽的常用屬性屬性說明width定義單元格的寬度，設(shè)置后對(duì)當(dāng)前一列的單元格都有效。height定義單元格的高度，設(shè)置后對(duì)當(dāng)前一行的單元格都有效。bgcolor定義單元格的背景顏色。align定義單元格的文字水平對(duì)齊方式，參數(shù)有l(wèi)eft、center、right。valign定義單元格的文字垂直對(duì)齊方式，參數(shù)有top、middle、bottom。colspan合并水平方向的單元格，即列合并。rowspan合并垂直方向的單元格，即行合并。表1-6-3td元素的常用屬性打開課堂練習(xí)1-6-56的代碼，對(duì)單元格<td>標(biāo)簽中的代碼進(jìn)行修改：課堂練習(xí)1-6-6設(shè)置表格行tr的各個(gè)屬性123456789<trbgcolor="#FFCCFF"height="50"valign="bottom"><thcolspan="3">第一學(xué)期</th><!--合并單元格--></tr><tralign="center"><tdwidth="80"height="30"bgcolor="#aa00ff"align="left"valign="top">姓名</td> <td>網(wǎng)頁布局</td> <td>Photoshop</td></t

溫馨提示

  • 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. 人人文庫(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)論