作业1 创建青花瓷表格
一、作业描述
1. 考核知识点
创建表格的基本语法格式
2. 练习目标
- 了解表格的创建原理
- 掌握创建表格的基本语法
- 掌握表格标记及其相关属性
- 复习背景属性
3. 需求分析
制作网页时，为了使网页中的元素有条理地显示，经常需要使用表格对网页中的元素进行规划。同时，为了美化页面，常常会使用背景属性来对表格做修饰。为了让初学者掌握创建表格的基本方法，接下来，通过创建一个两行两列的青花瓷表格的作业做具体演示。
4. 作业分析
(1)最终实现效果，如图6-1所示。
青花瓷表格效果
(2) 分析效果图，具体实现步骤如下：
- 创建一个两行两列的表格。
- 为表格整体设置背景属性。
- 在第一行第一列插入素材图片。
二、作业实现
新建HTML文件，具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML .0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建带背景的表格</title>
</head>
<body>
<table width="400px" height="200px" border="1" align="center" background="images/bg.gif">
<tr>
<td>
<img src="images/elva3.jpg" />
</td>
<td>我是第一行第二列</td>
</tr>
<tr>
<td>我是第二行第一列</td>
<td>我是第二行第二列</td>
</tr>
</table>
</body>
</html>保存后，在火狐浏览器中预览，效果如图6-2所示。
青花瓷表格
注意：
创建表格的基本标记为<table></table>、<tr></tr>、<td></td>，默认情况下，表格的边框为0，宽度和高度靠其自身的内容来支撑。
作业2 NBA总决赛统计表
一、作业描述
1. 考核知识点
<td>标记属性
2. 练习目标
- 掌握合并单元格的方法
- 理解<tr>标记的常用属性
- 理解<td>标记的常用属性
3. 需求分析
当多个单元格中的内容相同时，为了避免内容重复，就需把它们合并为一个单元格。为了让初学者掌握合并单元格的基本方法，接下来，通过创建一个NBA总决赛统计表格的作业做具体演示。
4. 作业分析
(1)最终实现效果，如图6-3所示。
NBA总决赛统计表效果
(2)分析效果图，具体实现步骤如下：
- 创建一个8行3列，边框为5像素的表格。
- 合并竖直方向内容相同的单元格，如：马刺队、热火队、5次、3次。
- 合并水平方向内容相同的单元格，如：比赛解说部分。
- 为马刺队所属单元格添加背景图片、背景颜色。
- 为热火队所属单元格添加背景图片、背景颜色。
二、作业实现
新建HTML文件，具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML .0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NBA总决赛球员统计表</title>
</head>
<body>
<table width="400px" height="150px" border="5" align="center" cellspacing="0" >
<tr align="center">
<td>球队</td>
<td>球员</td>
<td>夺冠次数</td>
</tr>
<tr align="center">
<td rowspan="3" background="images/maci.jpg">马刺队</td>
<td bgcolor="#f6f5f5">邓肯</td>
<td rowspan="3" bgcolor="#f6f5f5">5次</td>
</tr>
<tr align="center">
<!--删除了 <td>马刺队</td>-->
<td bgcolor="#f6f5f5">帕克</td>
<!--删除了 <td>5次</td>-->
</tr>
<tr align="center">
<!--删除了 <td>马刺队</td>-->
<td bgcolor="#f6f5f5">吉诺比利</td>
<!--删除了 <td>5次</td>-->
</tr>
<tr align="center">
<td rowspan="3" background="images/rehuo.jpg">热火队</td>
<td bgcolor="#f4e6e6">詹姆斯</td>
<td rowspan="3" bgcolor="#f4e6e6">3次</td>
</tr>
<tr align="center">
<!--删除了 <td>热火队</td>-->
<td bgcolor="#f4e6e6">韦德</td>
<!--删除了 <td>3次</td>-->
</tr>
<tr align="center">
<!--删除了 <td>热火队</td>-->
<td bgcolor="#f4e6e6">波什</td>
<!--删除了 <td>3次</td>-->
</tr>
<tr align="center">
<td colspan="3">比赛解说：黄健翔、姚明</td>
</tr>
</table>
</body>
</html>保存后，在火狐浏览器中预览，效果如图6-4所示。
NBA总决赛统计表
在本作业中，首先合并竖直相邻单元格，将第16行的<td>标记rowspan属性值设置为“3”，这个单元格就会竖跨3行。同时，由于该单元格将占用其下方两个单元格的位置，所以应该删掉第21行和第26行中的两对<td></td>标记。合并水平相邻单元格与合并竖直相邻单元格类似，只需将“rowspan”换成“colspan”即可。
作业3 今日小说排行榜
一、作业描述
1. 考核知识点
<table>标记的属性
2. 练习目标
- 掌握<th>标记的用法
- 掌握<table>标记、<tr>标记、<td>标记的用法
- 理解<table>标记、<tr>标记、<td>标记的相关属性
- 复习超链接标记
3. 需求分析
应用表格时，为了让表格的格式更加清晰，方便查阅，经常需要为表格设置表头。设置为表头的文本会加粗并居中显示，以区别普通文本。为了让初学者能够掌握<th>标记的用法，接下来，通过一个今日小说排行榜的作业做具体演示。
4. 作业分析
(1)最终实现效果，如图6-5所示。
今日小说排行榜效果图
(2)分析效果图，具体实现步骤如下：
- 设置<h2>标题——今日小说排行榜
- 创建一个7行6列的表格。
- 在表格标记中添加相应文本内容，并用<th>标记为表格设置表头。
- 为水平方向的表头添加背景颜色。
- 为第三列添加趋势走向图标。
- 为第六列添加超链接文本。
二、作业实现
新建HTML页面，具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML .0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="keywords" content="关键字1,关键字2,关键字3" />
<meta name="description" content="你页面的简述" />
<title>今日小说排行榜</title>
</head>
<body>
<h2 align="center">今日小说排行榜</h2>
<table border="0" align="center" width="800" cellpadding="5" bgcolor="#D7D7D7" cellspacing="1" >
<tr align="center" bgcolor="#F1F1F1">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr bgcolor="#FFFFFF" align="center">
<th>1</th>
<td align="left">武动乾坤</td>
<td><img src="images/up.jpg" /></td>
<td>623557</td>
<td>4088311</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr bgcolor="#FFFFFF" align="center">
<th>2</th>
<td align="left">武动乾坤</td>
<td><img src="images/up.jpg" /></td>
<td>623557</td>
<td>4088311</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr bgcolor="#FFFFFF" align="center">
<th>3</th>
<td align="left">武动乾坤</td>
<td><img src="images/up.jpg" /></td>
<td>623557</td>
<td>4088311</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr bgcolor="#FFFFFF" align="center">
<th>4</th>
<td align="left">武动乾坤</td>
<td><img src="images/down.jpg" /></td>
<td>623557</td>
<td>4088311</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr bgcolor="#fff" align="center">
<th>5</th>
<td align="left">武动乾坤</td>
<td><img src="images/up.jpg" /></td>
<td>6235</td>
<td>4088311</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr bgcolor="#FFFFFF" align="center">
<th>6</th>
<td align="left">武动乾坤</td>
<td><img src="images/down.jpg"></td>
<td>623557</td>
<td>4088311</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</table>
</body>
</html> 保存后，在火狐浏览器中预览，效果如图6-6所示。
今日小说排行榜
注意：
<th></th>标记与<td></td>标记的属性、用法完全相同，但是他们具有不同的语义，<th></th>用于定义表头单元格，其文本默认加粗居中显示，而<td></td>定义的为普通单元格，其文本为普通文本且水平左对齐显示。
作业4 土豪金边框员工记录表
一、作业描述
1. 考核知识点
CSS控制表格边框
2. 练习目标
- 掌握CSS设置表格边框样式的方法
- 掌握<th>标记的用法
- 复习盒子模型
3. 需求分析
为了便于代码的维护，更好的实现结构表现相分离，通常需要使用CSS边框样式属性border来控制表格的边框。接下来，通过一个土豪金边框员工记录表的作业，对CSS控制表格边框的方法做具体演示。
4. 作业分析
(1)最终实现效果，如图6-7所示。
土豪金边框员工记录表效果
(2)分析效果图，具体实现步骤如下：
- 创建一个4行5列的表格。
- 设置表格标题——传智播客员工记录表。
- 在表格标记中添加相应文本内容，并用<th>标记为表格设置表头。
- 通过CSS整体控制表格边框样式。
- 通过CSS设置单元格边框样式。
- 通过CSS设置单元格内容居中对齐。
保存后，在火狐浏览器中预览，效果如图6-8所示。
土豪金边框员工记录表
注意：
行标记<tr>无border样式属性，所以通过CSS为其设置边框属性，不会有任何效果。
作业5 CSS控制单元格样式
一、作业描述
1. 考核知识点
CSS控制单元格边距
2. 练习目标
- 掌握CSS控制单元格内边距和外边距样式
- 理解<table>标记和CSS样式在控制单元格边距上的差异
- 掌握CSS控制单元格宽高样式
- 复习盒子模型的内边距和外边距
3. 需求分析
为了便于代码的维护，更好地实现结构表现相分离，通常需要使用CSS对单元格样式进行控制。为了便于初学者的理解和掌握，接下来，通过一个作业演示CSS控制单元格样式的具体方法。
4. 作业分析
(1)最终实现效果，如图6-9所示。
土豪金边框员工记录表
(2)分析效果图，具体实现步骤如下：
- 创建一个2行2列的表格。
- 在第一行的两个单元格中插入图片，第二行两个单元格填充文本。
- 通过CSS控制表格的整体边框样式。
- 通过CSS控制单元格的整体边框样式。
- 为第一行第一列的单元格设置宽高。
- 为第一行第二列的单元格设置内外边距。
- 为第二行第一列单元格设置高度。
二、作业实现
1、制作页面结构
新建HTML页面，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML .0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS控制单元格</title>
</head>
<body>
<table>
<tr>
<td class="one">
<img src="images/QQ.jpg" />
</td>
<td class="two">
<img src="images/QQ.jpg" />
</td>
</tr>
<tr>
<td class="three">Q男</td>
<td>Q女</td>
</tr>
</table>
</body>
</html>2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
<style type="text/css">
table{border:#903 px dotted;}
td{border:#90 1px solid;}
.one{width:200px; height:100px;}
.two{margin:20px; padding:20px;}
.three{height:100px;}
.four{height:50px;}
</style>保存后，在火狐浏览器中预览，效果如图6-9所示。
教程模块效果
注意：
- 对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者。
- <td>标记无外边距属性margin，要想设置相邻单元格边框之间的距离，只能对<table>标记应用HTML标记属性cellspacing。
作业6 简单的交规考试答卷
一、作业描述
1. 考核知识点
input控件
2. 练习目标
- 熟悉表单的构成
- 掌握<form>标记的用法
- 掌握input控件属性中单选框和复选框属性
- 熟悉<label>标记的使用方法
3. 需求分析
浏览网页时，经常会看到带有小图标的列表项，这些小图标不仅可以美化网页，还能提供更好的用户体验。虽然无序列表和有序列表都有自带的列表项目符号，但是，它们在不同浏览器中显示的效果不同。因此，在实际工作中，经常通过给列表项定义背景图像来设置列表项目符号。
4. 作业分析
(1)最终实现效果，如图6-13所示。
交规考试答卷效果
(2)分析效果图，具体实现步骤如下：
- 定义一个名为“交通考试选择题”的<h3>标题。
- 定义表单域
- 使用<p>标记定义单选题的题干。
- 使用<input>标记的单选按钮属性定义选项。
- 使用<p>标记定义多选题的题干。
- 使用<input>标记的复选框属性定义选项。
二、作业实现
新建HTML页面，代码如下：
保存后，在火狐浏览器中预览，效果如图6-14所示。
小图标修饰列表标题
注意：
为了扩大控件的选择范围，常常需要将<input />控件联合<label>标记使用，这样当单击文字时也可以选中选框。
作业7 制作字符批量替换工具界面
一、作业描述
1. 考核知识点
<textarea>控件
2. 练习目标
- 掌握<textarea>控件的使用方法
- 掌握input控件属性中的单行文本输入框、复选框、文件域以及三种按钮属性
3. 需求分析
当需要输入大量的文字信息时，单行文本输入框就不再适用，这时就需要用到表单中的<textarea></textarea>控件，来创建多行文本输入框。 为了便于初学者的理解和掌握，接下来，通过制作一个字符批量替换工具界面的作业做具体演示。
4. 作业分析
(1)最终实现效果，如图6-15所示。
字符批量替换工具界面效果
(2)分析效果图，具体实现步骤如下：
- 定义表单域。
- 通过<p>标记定义标注文本“查找”。
- 通过<textarea>控件定义多行文本框。
- 通过<p>标记定义标注文本“替换为”。
- 通过<textarea>控件定义第二个多行文本框。
- 使用<input>标记的复选框属性定义三个复选框。
- 定义提交按钮、重置按钮和普通按钮。
保存后，在火狐浏览器中预览，效果如图6-16所示。
CSS设置美化表单
注意：
除了cols和rows属性外，<textarea>标记还拥有几个可选属性，分别为disabled、name和readonly，他们的含义和用法同<input />标记中相应的属性相同。
作业8 制作简单的游戏选区界面
一、作业描述
1. 考核知识点
<select>控件
2. 练习目标
- 掌握<select>控件的使用方法
- 掌握下拉菜单分组选项的制作方法
- 掌握input控件属性中的按钮属性
3. 需求分析
在网页制作中，为了节省页面篇幅、美化页面，经常需要将较多的列表项以下拉菜单的形式隐藏起来。为了便于初学者的理解和掌握，接下来，将通过一个制作游戏选区界面的作业，对下拉菜单的用法做具体演示。
4. 作业分析
(1)最终实现效果，如图6-17所示，当点击下拉菜单时，会出现如图6-18、6-19所示的效果。
 |  |  |
|
|
|
(2)分析效果图，具体实现步骤如下：
- 定义表单域
- 定义用于游戏选区的下拉菜单
- 定义用于选择线路的下拉菜单
- 使用<input>标记的按钮属性定义确定和取消按钮
二、作业实现
新建HTML页面，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML .0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<form action="#" method="post" name="example">
请选择大区:<br />
<select>
<option>1区金戈铁马</option>
<option>2区江山如画</option>
<option>3区气吞山河</option>
<option>3区刀光剑影</option>
</select>
<select>
<option>请选择线路</option>
<optgroup label="网通">
<option>网通线路1</option>
<option>网通线路2</option>
</optgroup>
<optgroup label="电信">
<option>电信线路1</option>
<option>电信线路2</option>
</optgroup>
</select><br /><br />
<input type="submit" value="确定" />
<input type="button" value="取消" />
</form>
</body>
</html>保存后，在火狐浏览器中预览，效果如图6-20所示。
简单的邮箱选区界面
作业9 CSS美化表单
一、作业描述
1. 考核知识点
CSS控制表单样式
2. 练习目标
- 熟悉表格布局的基本原理
- 掌握input控件的常用属性
- 熟悉<fieldset>标记的用法
- 复习CSS基本样式属性
3. 需求分析
制作网页时，为了让页面更加美观、便于维护，经常会使用CSS对表单样式进行控制。为了便于初学者的理解和掌握，接下来，通过一个作业演示CSS美化表单的具体方法。
4. 作业分析
(1)最终实现效果，如图6-21所示。
简单的邮箱选区界面
(2)分析效果图，具体实现步骤如下：
- 定义表单域，并填充大的背景图片。
- 定义表单内容分组，并确定分组名称为“个人注册”。
- 定义一个3行2列的表格换份表单结构。
- 在第一行第一列和第二行第一列输入提示信息。
- 在第一行第二列和第二行第二列各定义一个单行文本，用于输入用户信息。
- 在第三行第二列设置按钮，并填充背景图片。
保存后，在火狐浏览器中预览，效果如图6-22所示。
CSS美化表单
在本作业中，通过<filedset></filedset>标记可以将表单内容分组，并且使用其配套标记<legend></legend>为各个表单组定义名称。
扫一扫
1736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
