HTML5+CSS3網頁設計與制作課件：添加會員功能表格_第1頁
HTML5+CSS3網頁設計與制作課件：添加會員功能表格_第2頁
HTML5+CSS3網頁設計與制作課件：添加會員功能表格_第3頁
HTML5+CSS3網頁設計與制作課件：添加會員功能表格_第4頁
HTML5+CSS3網頁設計與制作課件：添加會員功能表格_第5頁
已閱讀5頁，還剩27頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

添加會員功能表格本次任務要求在的基礎上添加D清單網頁會員功能表格內容。完成后的表格內容效果圖如圖1-6所示。任務描述圖1-6D清單網頁的表格內容效果圖

添加會員功能表格要完成D清單網頁表格內容的制作，需要：學習HTML表格的三個基本元素；學習HTML表格的語法及表格各個元素的屬性；分析D清單網頁會員功能效果圖的表格內容，正確選擇和使用表格標簽完成D清單網頁中的表格內容制作。D清單網頁會員功能表格效果如圖1-6-1所示。可以看出，表格有4列11行，表格結構包含了描述文字“可以在手機端使用”，以及加粗的表格表頭、表格正文等常規內容。任務分析

添加會員功能表格任務分析圖1-6-1D清單網頁會員功能的表格效果

添加會員功能表格知識與技能準備表格通過使用table、tr、th或td標簽構成網頁中數據的表示方式。（1）table標簽：表格元素都是以<table>標記開始，</table>標記結束，用來定義表格外框。（2）tr標簽：定義表格行，表格的每一行都以<tr>標記開始，</tr>標記結束。（3）th標簽：定義表格的表頭。（4）td標簽：定義單元格，即表格的具體數據存儲單元，每個單元格都以<td>標記開始，</td>標記結束。1、表格的元素表格是網頁中最常用的元素，網頁中經常使用表格進行顯示或者統計數據，表格不僅可以在網頁上顯示數據，還可以將相互關聯的一些信息元素集中定位，從而實現頁面布局使頁面更加簡潔。像Excel數字表格，可以看出表格都是由行和列構成的，而行和列的交匯可以形成一個個單元格。知識與技能準備在一個表格中，可以插入多對tr標簽表示多行，一對tr代表一行，每對tr標簽之間可以插入多對td標簽，每一對td標簽代表一個單元格，單元格里的內容可以是文字、數據、圖像、超鏈接、表單等元素。其語法形式如下：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>標簽中輸入如下代碼：課堂練習1-6-1創建一個兩行三列表格12345678910111213<!--創建兩行三列的表格--><table><tr><td>姓名</td><td>性別</td><td>年齡</td></tr><tr><td>張三</td><td>男</td><td>20</td></tr></table> 顯示效果如下：課堂練習1-6-1創建一個兩行三列表格圖1-6-3簡單的兩行兩列表格知識與技能準備表格中可以用標題來對表格做一個簡單的說明，caption表格標題就是用來描述表格的特征，但caption元素必須緊跟table元素開始標簽才有效，而且一個表格只能包含一個表格標題。其語法形式如下：1、caption元素：表格的標題<table><caption>表格標題文字說明</caption></table>打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-6-2添加表格標題1234567891011121314<!--創建兩行四列的表格--><table><caption>早餐單</caption><tr><td>周一</td>

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

<td>炒粉</td>

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

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

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

</tr>

<tr>

<tdrowspan="2">上午</td><!--合并單元格--> <td>網頁布局</td> <td>Photoshop</td> <td>Axure</td> <td>網頁UI設計</td> <td>AI設計</td>

</tr>21222324252627282930313233343536<tr> <td>英語</td> <td>高數</td> <td>C語言</td> <td>網絡基礎</td> <td>網頁布局</td>

</tr> <tr> <td>下午</td> <td>體育</td> <td>德育</td> <td>Photoshop</td> <td>C語言</td> <td>網絡基礎</td> </tr></table>顯示效果如下：課堂練習1-6-3設置單元格行合并圖1-6-4設置單元格行合并在<body>標簽中輸入如下代碼：課堂練習1-6-4設置單元格列合并1234567891011121314<!--創建五行三列的表格--><table><caption>成績登記表</caption><tr><thcolspan="3">第一學期</th><!--合并單元格--></tr><tr><td>姓名</td> <td>網頁布局</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>顯示效果如下：課堂練習1-6-4設置單元格列合并圖1-6-5設置單元格列合并知識與技能準備3、table標簽的常用屬性屬性說明width定義表格的總寬度。height定義表格的總高度。border定義表格邊框的寬度，默認值為0，值為0時邊框線隱藏，值越大邊框線越粗。bordercolor定義表格邊框的顏色。cellpadding定義單元格的補白，即單元格內容與單元格邊框線之間的距離。cellspacing定義單元格的邊界，即單元格與單元格之間的間距。align定義整個表格的水平對齊方式，參數有left、center、right。bgcolor定義表格整體的背景顏色。表1-6-1table元素的常用屬性在<body>標簽中輸入如下代碼：課堂練習1-6-5設置表格table的各個屬性1234567891011121314<!--創建五行三列的表格--><table><caption>成績登記表</caption><tr><thcolspan="3">第一學期</th><!--合并單元格--></tr><tr><td>姓名</td> <td>網頁布局</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>打開課堂練習1-6-4的代碼，對<table>標簽中的代碼進行修改：課堂練習1-6-5設置表格table的各個屬性12<tableborder="1"width="300"height="100"bordercolor="#FFF"cellpadding="5"cellspacing="5"align="center"bgcolor="#CCC">顯示效果如下：圖1-6-6table標簽的屬性設置效果知識與技能準備4、tr標簽的常用屬性屬性說明height定義表格行的高度。bgcolor定義表格行的背景顏色。align定義行內文字的水平對齊方式，參數有left、center、right。valign定義行內文字的垂直對齊方式，參數有top、middle、bottom。表1-6-2tr元素的常用屬性知識與技能準備5、td標簽的常用屬性屬性說明width定義單元格的寬度，設置后對當前一列的單元格都有效。height定義單元格的高度，設置后對當前一行的單元格都有效。bgcolor定義單元格的背景顏色。align定義單元格的文字水平對齊方式，參數有left、center、right。valign定義單元格的文字垂直對齊方式，參數有top、middle、bottom。colspan合并水平方向的單元格，即列合并。rowspan合并垂直方向的單元格，即行合并。表1-6-3td元素的常用屬性打開課堂練習1-6-56的代碼，對單元格<td>標簽中的代碼進行修改：課堂練習1-6-6設置表格行tr的各個屬性123456789<trbgcolor="#FFCCFF"height="50"valign="bottom"><thcolspan="3">第一學期</th><!--合并單元格--></tr><tralign="center"><tdwidth="80"height="30"bgcolor="#aa00ff"align="left"valign="top">姓名</td> <td>網頁布局</td> <td>Photoshop</td></t

溫馨提示

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

評論

0/150

提交評論