精通HTML+CSS网页开发与制作.docVIP

第 章 列表、表格和框架 本章简介 列表在网页设计、制作中占有比较大的比重。每个网页都有大量的信息，而列表使这些信息排列有序、条理清晰，大量精美、漂亮的网页中都使用了列表。本章将向大家介绍列表的概念及相关的使用方法，通过练习掌握列表应用的技巧，从而可以制作出精美的网页。同时，在制作网页时，表格是一种不可或缺的数据展示工具，使用表格可以灵活地实现数据展示，表格在很多页面中还发挥着页面排版的作用。对于页面的排版和设计，框架也是网页制作过程中一种普遍采用的方式，使用框架可以极大地提高页面的复用程度，减少重复开发，因此掌握框架技术也是网页制作人员应该具备的基本技能。 本章工作任务 使用列表展示数据 使用表格展示数据 使用框架设计页面 本章技能目标 会使用有序列表实现数据展示 会使用无序列表实现数据展示 会使用表格实现数据展示 背诵英文单词 请在预习时找出下列单词在本章中的用法，了解它们的含义和发音，并填写于横线处。 table type frame row column caption 预习并回答以下问题 1. 列表分为几种类型？分别是什么？ 2. 表格的作用是什么？表格的用法？ 3. 制作网页过程中用到的框架有什么？ 3.1 列 表 顾名思义，列表就是按顺序显示内容，以便使网页更易读。例如京东商城首页的商品分类，条理清晰、井然有序，是列表应用的一个很好的例子。文字列表可以有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应的信息。HTML中的文字列表如同文字编辑软件Word中的项目符号列表和自动编号列表。HTML提供了3种常用的列表：无序列表、有序列表和自定义列表。下面分别对这3种列表详细讲解。 3.1.1 建立无序列表ul 无序列表相当于Word中的项目符号列表，其项目排列没有先后顺序，大部分网页列表都采用无序列表。通常无序列表只以符号或图标作为分项标识。无序列表的列表标签采用ul/ul标签，其中每一个列表项使用li/li标签，代码如示例3.1所示。 示例3.1： !DOCTYPE html html head meta charset=UTF-8 title无标题文档/title /head body ul li无序列表项/li li无序列表项/li li无序列表项/li li无序列表项/li li无序列表项/li /ul /body /html 无序列表结构中，使用ul/ul标签表示一个无序列表的开始和结束，li标签则表示一个列表项的开始。 在一个无序列表中可以包含多个列表项，以下示例3.2使用无序列表实现文本的排列显示。 示例3.2： !DOCTYPE html html head meta charset=UTF-8 title嵌套无序列表/title /head body h1网站建设流程/h1 ul li项目需求/li li系统分析 ul li网站的定位/li li内容收集/li li栏目规划/li li网站内容设计/li /ul /li li网页草图 ul li制作网页草图/li li将网页草图转换为网页/li /ul /li li站点建设/li li网页布局/li li网站测试/li li站点的发布与站点管理/li /ul /body /html 在浏览器中效果如图3.1所示，在无序列表项中，可以嵌套一个列表。如代码中的“系