资源简介

(共57张PPT)
02html 结构标签的使用任务 1 制作计算机树形列表网页任务 2 制作 3C 电子商务网站首页制作计算机树形列表网页任务 1● 1. 掌握 ul 无序列表标签、ol 有序列表标签和 dl 定义列表标签的用法。● 2. 掌握列表标签的嵌套用法。本任务主要通过嵌套使用ul 无序列表标签来完成树形列表网页的制作，网页完成效果如图所示。树形列表网页效果步骤一：新建 html 文件，在 body 标签中加入 <h4></h4>，并在 h4 标签中加入标题内容“我的电脑文件列表”，代码和网页效果如图所示。加入标题标签网页步骤二：在标题标签下方加入无序列表标签 ul，这里注意，只需要一个列表项，所以只用写一组“<li></li>”，如图所示。加入无序列表网页步骤三：在“ <li></li>”里“我的电脑”文字下方加入一组新的无序列表标签 ul，这里注意，需要写两个盘符列表项，所以写两组“<li></li>”，如图所示。加入嵌套 ul 标签网页 1步骤四：在“本地磁盘（C:）”和“本地磁盘（D:）”文字的下方重复步骤三中的操作，这里注意，在“本地磁盘（C:）”下方的 ul 标签中加入两组“ <li></li>”，在“本地磁盘（D:）”下方的 ul标签中加入三组“<li></li>”，列表项中文字信息添加如图所示。加入嵌套 ul 标签网页 2步骤五：保存文件后使用浏览器打开网页文件，网页效果如图所示。树形列表网页效果一、无序列表无序列表是网页中最常见的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常以并列的形式呈现。定义无序列表的基本语法格式如下。下面通过一个案例来演示无序列表的应用，如图所示。无序列表的应用无序列表的 type 属性可以取不同的值，用于指定不同的列表项符号，见表。无序列表的 type 属性值二、有序列表有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列，例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下。下面通过一个案例来演示有序列表的应用，如图所示。有序列表的应用从上图中可以看出，有序列表默认的列表项为阿拉伯数字，并且按照 1、2、3…的顺序排列。有序列表的 type 属性可以取不同的值，用于指定不同的排序编号，见表。有序列表的 type 属性举例及说明三、定义列表定义列表常用于对术语或名词进行解释和描述，与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下。下面通过一个案例来演示定义列表的应用，如图所示。定义列表的应用上图中定义了一个定义列表，其中 <dt></dt> 内为列表项标题“物联网”，其后紧跟着三对 <dd></dd>，为“物联网”列表项的具体内容。运行上图中的代码，效果如图所示。定义列表网页效果制作 3C 电子商务网站首页任务2● 1. 掌握表格的创建方法。● 2. 掌握 table 标签、tr 标签、td 标签、th 标签的用法。● 3. 熟练使用表格相关标签制作网页。本任务主要通过使用表格相关标签的嵌套，来完成 3C 电子商务网站首页的制作，最终网页效果如图所示。3C 电子商务网站首页效果步骤一：新建一个 html 文件，在 body 标签中创建一个宽度为 1 300 像素、边框为 1、单元格之间没有间距且内容居中的表格，表格 3 行 1 列，代码如图所示。创建表格的基本结构步骤二：设置表格第一行 tr 标签的高度为 50 像素，背景颜色为蓝色，然后在表格中写入 5 组超链接 <a></a>，中间的空隙用空格标签“ &nbsp;”来填充，每组 a 标签中加入文字信息，文字信息统一通过 font 标签的 color 属性设置为白色“ white”，第一个文字信息“首页”通过size 属性值设置为“5”，使它的字体变大。代码如图所示，网页效果如图所示。表格写入第一行代码后的网页效果表格的第一行代码步骤二：设置表格的第二行即第二个 tr 标签，通过分析网页设计图可知需要在这一行的唯一列中嵌套一个 3 行 7 列的子表格，且子表格第一行需要跨 7 列，设置子表格第一行的高度为 50像素；第二行的第 1 列需要跨 2 行，设置高度为 250 个像素；第三行的高度也设置为 250 像素。代码如图 2-2-5 所示，网页效果如图所示。表格的第二行代码表格的第二行代码表格写入第二行代码后的网页效果步骤四：表格的第三行即第三个 tr 标签，在其唯一列中放上一张图片，代码如图 所示。表格的第三行代码一、表格的创建表格的开始是 <table>，结束是 </table>，即所有的表格内容都位于 <table></table> 之间。要想创建一个完整的表格，除了要有表格标签外，还需要有行标签 tr 和单元格标签 td。创建表格的具体语法格式如下对上述语法的具体解释如下。1. <table></table> 用于定义一个表格。下面来举例创建一个表格，如图所示。创建表格创建表格二、table 标签的属性html 语言为 table 标签提供了一系列属性，用于控制表格的显示样式，见表。table 标签的属性、含义及常用属性值1. border 属性在 table 标签中，border 属性会为每个单元格应用边框。如果 border 的属性值改变，那么单元格的边框就会改变。默认情况下 border 的属性值为 1，如果想去掉边框，则需设置border 的属性值为 0。为了更好地理解 border 属性的用法，现将上图中 table 标签的 border 属性值设置为10，即将代码 <table border="1"> 更改为 <table border="10">。保存 html 文件，刷新页面，效果如图所示。从图可以看出，表格的外边框变宽了，内边框没有发生变化。其实，在出现的双线边框中，外边框为表格 table 的边框，内边框为单元格 td 的边框。也就是说，table 标签的border 属性值改变的是外边框宽度，内边框宽度仍然为 1 像素。设置 border="10" 后的网页效果2. cellspacing 属性cellspacing 属性用于设置单元格与单元格之间的空白间距，默认值为 2 像素。现将上图中 table 标签的 cellspacing 属性值设置为 20，即将代码 <table border="1"> 更改为<table border="10" cellspacing="20">。保存 html 文件，刷新页面，效果如图所示。设置 cellspacing="20" 后的网页效果3. cellpadding 属性cellpadding 属性用于设置单元格内容与单元格边框之间的空白间距，默认为 1 像素。现将上图中的 table 标签应用 cellpadding="10"，即将代码 <table border="1"> 更改为 <table border="10" cellspacing="20" cellpadding="10">。保存 html 文件，刷新页面，效果如图所示。设置 cellpadding="10" 后的网页4. width 与 height 属性默认情况下，表格的宽度和高度都是靠其自身的内容来撑开的，如果想要更改表格的尺寸，就需要设置其宽度和高度的属性。下面对图中的表格设置宽度和高度，即将代码<table border="1"> 更改为：设置表格的宽、高后网页效果5. align 属性align 属性用于设置表格在网页中的水平对齐方式，其可选属性值为 left、center、right。当对 table 标签应用 align 属性时，可以控制表格在页面中的水平对齐方式，但单元格中的内容不受 align 属性的影响。6. bgcolor 属性通过 table 标签中的 bgcolor 属性，可以为表格指定一个背景颜色。7. background 属性通过 table 标签中的 background 属性，可以为表格指定一个背景图像。保存 html 文件，刷新页面，效果如图所示。为表格添加背景图像后的网页效果三、tr 标签的属性前面已经介绍过了 table 标签的相关属性，通过对 table 标签应用各种属性，可以控制表格的整体显示样式。如果想单独设置表格中某一行的样式，就需要对 tr 标签应用属性，其属性、含义及属性值见表。tr 标签的属性、含义及属性值上表中列出了 tr 标签的常用属性，其中大部分属性与 table 标签的属性用法相同。下面通过图所示案例来演示 tr 标签的常用属性效果。行标签 tr 的应用行标签 tr 的应用行标签 tr 的应用作为初学者，学习 tr 标签的属性时需要注意以下几点。1. tr 标签无宽度属性 width，其宽度取决于表格标签 table 的宽度。2. 可以对 tr 标签应用 valign 属性，用于设置行中内容的垂直对齐方式。3. 虽然可以对 tr 标签应用 background 属性，但是在 tr 标签中此属性存在兼容问题，建议不要使用此属性。四、td 标签的属性在网页制作过程中，通过为单元格标签 td 定义属性，可以单独对某一个单元格设置样式，具体见表。td 标签的属性、含义及属性值下面对 td 标签 colspan 属性和 rowspan 属性的用法做具体演示，如图所示。td 标签 colspan 属性和 rowspan 属性的应用td 标签 colspan 属性和 rowspan 属性的应用td 标签 colspan 属性和 rowspan 属性的应用五、th 标签及其属性th 是 table heading 的简写，意为表格标题（也称表格表头）。th 标签与 td 标签的区别在于：th 标签的表头一般位于表格的第一行，且 th 标签控制的文本默认显示为粗体。下面在上图的基础上对代码进行修改，用于演示 th 标签的使用方法，将第 10 ～ 15行代码更改如下。保存 html 文件，刷新页面，效果如图所示。从图中可看出，通过 th 标签定义的表头文本默认显示为粗体。设置了表头的表格网页六、font 标签的属性html 语言为 font 标签提供了一系列属性，用于规定文本的字体、字体大小、字体颜色等，具体见表。font 标签的属性、含义及属性值上表中列出了 font 标签的常用属性，为了加深对这些属性的理解，下面通过一个案例来演示 tr 标签的常用属性效果，如图所示。font 标签的常用属性保存 html 文件，刷新页面，效果如图所示。font 标签的常用属性效果

展开更多......

收起↑