Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


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所示。


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

Similar presentations


Ads by Google