网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.

Presentation on theme: "网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案."— Presentation transcript:

1 网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案

2 第2章 块级标签 2.1 基本块级标签 2.2 用于布局的块级标签 2.3 实训——制作什锦果园关于页面

3 2.1 基本块级标签 基本块级标签包括标题标签、段落标签和水平线标签。 2.1.1 标题标签<h#>…</h#>
2.1 基本块级标签 基本块级标签包括标题标签、段落标签和水平线标签。 标题标签<h#>…</h#> 在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，增加文章的条理性。标题文字标签的格式为： <h# align="left|center|right"> 标题文字 </h#> 【演练2-1】列出HTML中的各级标题。

4 2.1 基本块级标签 2.1.2 段落标签<p>…</p>
2.1 基本块级标签 段落标签<p>…</p> 段落标签放在段落的头部和尾部，用于定义一个段落。<p>…</p>标签不但能使后面的文字换到下一行，还可以使两段之间多加一空行，相当于<br/><br/>标签。段落标签的格式为： <p align="left|center|right"> 文字 </p> 其中，属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。 【演练2-2】列出包含<p>标签的多种属性。

5 2.1 基本块级标签 2.1.3 水平线标签<hr/>
2.1 基本块级标签 水平线标签<hr/> 在页面中插入一条水平标尺线（horizontal rules），可以将不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的<hr />标签时，会在此处换行，并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为： <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade= "noshade" /> 其中，属性size设定线条粗细，以像素为单位，默认值为2。 【演练2-3】<hr/>标签的基本用法。

6 2.1 基本块级标签 2.1.4 案例——制作网络鞋城常见问题解答页面
2.1 基本块级标签 案例——制作网络鞋城常见问题解答页面 【演练2-5】使用文字与段落的基本排版知识制作网络鞋城常见问题解答页面，本例文件2-6.html在浏览器中显示的效果如图2-6所示。

7 2.2 用于布局的块级标签 常用于布局的块级标签包括无序列表、有序列表、表格、表单、分区<div>。 2.2.1 无序列表
2.2 用于布局的块级标签 常用于布局的块级标签包括无序列表、有序列表、表格、表单、分区<div>。 无序列表 无序列表中每一个表项的前面是项目符号（如●、■等符号）。建立无序列表可使用<ul>标签和<li>表项标签。格式为： <ul type="符号类型"> <li type="符号类型1"> 第一个列表项 <li type="符号类型2"> 第二个列表项 … </ul> 【演练2-6】制作网络鞋城支付方式的无序列表。

8 2.2 用于布局的块级标签 有序列表 有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为<li>。 格式为： <ol type="符号类型"> <li type="符号类型1"> 表项1 <li type="符号类型2"> 表项2 … </ol> 【例2-7】制作网络鞋城网银在线支付步骤的有序列表。

9 2.2 用于布局的块级标签 表格 1．使用表格的优点 表格是由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示如图所示。 行 列 单元格

10 2.2 用于布局的块级标签 2.表格的基本语法 表格主要通过3个标签来构成：<table>、<tr>和<td>。 表格的语法格式为： <table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j"> <caption align="left|right|top|bottom valign=top|bottom>标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th></tr> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td></tr> … </table> 【演练2-9】在页面中添加一个3行2列的表格。

11 2.2 用于布局的块级标签 3. 跨行跨列的表格 （1）跨行 跨行是指单元格在垂直方向上合并，语法如下：
2.2 用于布局的块级标签 3. 跨行跨列的表格 （1）跨行 跨行是指单元格在垂直方向上合并，语法如下： <table> <tr> <td rowspan="所跨的行数">单元格内容</td> </tr> </table> 其中，rowspan表示跨行的意思。 【演练2-10】制作一个跨行展示的不同鞋类的库存表格。

12 2.2 用于布局的块级标签 （2）跨列 跨列是指单元格在水平方向上合并，语法如下： 其中，colspan表示跨列的意思。
2.2 用于布局的块级标签 （2）跨列 跨列是指单元格在水平方向上合并，语法如下： <table> <tr> <td colspan="所跨的行数">单元格内容</td> </tr> </table> 其中，colspan表示跨列的意思。 【演练2-11】制作一个跨列展示的不同鞋类的库存表格。

13 2.2 用于布局的块级标签 （3）跨行、跨列 【演练2-12】制作一个跨行跨列展示的不同鞋类的库存表格。

14 2.2 用于布局的块级标签 4．表格数据的分组标签 表格数据的分组标签包括<thead>、<tbody>和<tfooter>，主要用于对报表数据进行逻辑分组。其中，<thead>标签定义表格的头部；<tbody>标签定义表格主体，即报表详细的数据描述；<tfoot>标签定义表格的脚部，即对各分组数据进行汇总的部分。 【演练2-13】制作一个鞋城季度销量数据报表。

15 2.2 用于布局的块级标签 5．表格内文字的对齐方式 （1）水平对齐
2.2 用于布局的块级标签 5．表格内文字的对齐方式 （1）水平对齐 align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。 （2）垂直对齐 valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。 6.表格在页面中的对齐方式 设置表格在页面中的位置，格式为： <table align="left|center|right">

16 2.2 用于布局的块级标签 7.表格的应用 （1）使用表格显示数据 【演练2-14】制作鞋城季度销量一览表。

17 2.2 用于布局的块级标签 7.表格的应用 （2）使用表格实现页面局部布局 【演练2-15】制作网络鞋城商品分类页面。

18 2.2 用于布局的块级标签 表单 1．表单的工作原理 表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作，表单的工作原理如图2-18所示。

19 2.2 用于布局的块级标签 2.表单标签 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单。表单的基本语法及格式为： <form name="表单名" action="URL" method="get|post"> … </form> name属性：表单的名字，在一个网页中用于唯一识别一个表单。 action属性：表单处理的方式，往往是 地址或网址。 method属性：表单数据的传送方向，是获得（GET）表单还是送出（POST）表单。

20 2.2 用于布局的块级标签 2.2.5 分区标签<div>
2.2 用于布局的块级标签 分区标签<div> 分区标签<div>常用于页面布局时对区块的划分，它相当于一个大“容器”，可以容纳无序列表、有序列表、表格、表单等块级标签，同时也可以容纳普通的标题、段落、文字、图片等内容。由于<div>标签没有明显的外观效果，所以需要为其添加CSS样式属性，才能看到区块的外观效果。 分区标签的格式为： <div align="left|center|right"> 文本、图像或表格 </div>

21 2.3 实训——制作什锦果园关于页面 【实训】本实训练习通过<div>标签组织网页内容，制作什锦果园关于页面。本例文件2-17.html在浏览器中显示的效果如图2-20所示。

22 习题2 1．使用嵌套的列表制作如图2-21所示的鞋类商品分类列表。 2．使用跨行跨列的表格制作网络鞋城促销活动分类信息，如图2-22所示。
3．使用表格布局网络鞋城支付选择页面，如图2-23所示。 4．使用<div>标签组织段落、列表等网页内容，制作网络鞋城经营模式页面，如图2-24所示。