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

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

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

2 第3章 行级标签 3.1 超链接 3.2 图像 3.3 表单元素 3.4 范围标签<span>
第3章 行级标签 3.1 超链接 3.2 图像 3.3 表单元素 3.4 范围标签<span> 3.5 换行标签<br/> 3.6 实训——制作什锦果园联系信息表单

3 3.1 超链接 超链接的基本概念 超链接（hyperlink）是网页互相联系的桥梁，超链接可以看作一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置，以及Internet、本地硬盘或局域网上的其他文件，甚至跳转到声音、图像等多媒体文件。 1．超链接的分类 根据超链接目标文件的不同，链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射。 2．路径 创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。

4 3.1 超链接 3.1.2 超链接的应用 1．锚点标签<a>…</a> 2．指向其他页面的链接
3.1 超链接 超链接的应用 1．锚点标签<a>…</a> <a href="URL" target="打开窗口方式"> 热点 </a> 2．指向其他页面的链接 ① 链接到同一目录内的网页文件，格式为： <a href="目标文件名.htm"> 热点文本 </a> ② 链接到下一级目录中的网页文件，格式为： <a href="子目录名/目标文件名.htm"> 热点文本 </a> ③ 链接到上一级目录中的网页文件，格式为： <a href="../目标文件名.htm"> 热点文本 </a> ④ 链接到同级目录中的网页文件，格式为： <a href="../子目录名/目标文件名.htm"> 热点文本 </a>

5 3.1 超链接 超链接的应用 【演练3-1】制作网络鞋城页面之间的链接，当前页3-1.html中包含两个链接分别指向注册页和登录页，如图3-1所示。

6 3.1 超链接 3.1.2 超链接的应用 3．指向书签的链接 （1）指向页面内书签的链接 【【演练3-2】制作指向页面内书签的链接。
3.1 超链接 超链接的应用 3．指向书签的链接 <a name="记号名"> 目标文本附近的字符串 </a> （1）指向页面内书签的链接 <a href="#记号名"> 热点文本 </a> 【【演练3-2】制作指向页面内书签的链接。 （2）指向其他页面书签的链接 <a href="目标文件名.html #记号名"> 热点文本 </a> 即单击“热点文本”，将跳转到目标页面“记号名”开始的网页元素。 【演练3-3】制作指向其他页面书签的链接。

7 3.1 超链接 超链接的应用 4．指向下载文件的链接 如果链接到的文件不是HTML文件，则该文件将作为下载文件。指向下载文件的链接格式为： <a href="下载文件名"> 热点文本 </a> 5．指向电子邮件的链接 单击指向电子邮件的链接，将打开默认的电子邮件程序，如FoxMail、Outlook Express等，并自动填写邮件地址。指向电子邮件链接的格式为： <a href="mailto: 地址"> 热点文本 </a>

8 3.1 超链接 案例——制作网络鞋城购物向导 【演练3-4】制作网络鞋城购物向导及下载的页面，本例文件包括3-4.html、2-5.html两个展示网页和guide.rar下载文件。在浏览器中显示的效果如图3-4和图3-5所示。

9 3.2 图像 Web上常用的图像格式 1．GIF GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标或其他具有统一色彩和色调的图像。 2．JPEG JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。 3．PNG PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式。

10 3.2 图像 3.2.2 图像标签<img> 图像标签的格式为：
3.2 图像 图像标签<img> 图像标签的格式为： <img src="图像文件名" alt="替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式" /> 【演练3-5】图像的基本用法，本例文件3-5.html在浏览器中正常显示的效果如图3-6所示；当显示的图像路径错误时，效果如图3-7所示。

11 3.2 图像 3.2.3 用图像作为超链接热点 图像也可作为起链接热点，单击图像则跳转到被链接的文本或其他文件。格式为：
3.2 图像 用图像作为超链接热点 图像也可作为起链接热点，单击图像则跳转到被链接的文本或其他文件。格式为： <a href="URL"> <img src="图像文件名" /> </a> 案例——制作网络鞋城图文简介 【演练3-6】使用图文混排技术制作网络鞋城简介页面。

12 3.3 表单元素 <input>元素 <input>元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、图像、文件等。<input>元素的基本语法及格式为： <input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y" />

13 3.3 表单元素 1.文字框 文本框的格式为： 2.密码框 密码框的格式为：
3.3 表单元素 1.文字框 文本框的格式为： <input type="text" name="文本框名"> 2.密码框 密码框的格式为： <input type="password" name="密码框名">

14 3.3 表单元素 3.按钮 ① 重置按钮 ② 提交按钮 ③ 普通按钮 ④ 图片按钮 【演练3-7】制作不同类型的表单按钮。
3.3 表单元素 3.按钮 ① 重置按钮 <input type="reset" value="按钮名"> ② 提交按钮 <input type="submit" value="按钮名"> ③ 普通按钮 <input type="button" value="按钮名"> ④ 图片按钮 <input type=“image” src=“图片来源”> 【演练3-7】制作不同类型的表单按钮。

15 3.3 表单元素 4.复选框 将<input>元素的type属性设置为“checkbox”，则定义的表单元素为复选框。复选框的格式为： <input type="checkbox" name="复选框名" value="提交值" checked="checked"> 5.单选按钮 单选按钮用于一组相互排斥的选项，组中的每个选项应具有相同的名称，以确保浏览者只能选择一个选项。单选按钮的格式为： <input type="radio" name="单选钮名" value="提交值" checked="checked">

16 3.3 表单元素 6.隐藏域 网站服务器发送到客户端的信息，除用户直观看到的页面内容之外，可能还包含一些“隐藏”信息。将<input>元素的type属性设置为hidden类型即可创建一个隐藏域。<input type="hidden" name="隐藏域名" value="提交值"> 7.文件域 文件域用于上传文件，将<input>元素的type属性设置为file类型即可创建一个文件域。文件域会在页面中创建一个不能输入内容的地址文本框和一个“浏览”按钮。格式为： <input type="file" name="文件域名">

17 3.3 表单元素 3.3.2 选择栏<select> 如果一个列表选项过长，可以考虑使用选择栏。
3.3 表单元素 选择栏<select> 如果一个列表选项过长，可以考虑使用选择栏。 <select>标签的格式为： <select size="x" name="控制操作名" multiple= "multiple"> <option …> … </option> … </select> <option>标签的格式为： <option value="可选择的内容" selected ="selected"> … </option> 【演练3-9】制作“调查者年龄”问卷调查的下拉菜单。

18 3.3 表单元素 3.3.3 多行文本域<textarea>…</textarea>
3.3 表单元素 多行文本域<textarea>…</textarea> 在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。使用<textarea>标签可以设置允许成段文字的输入，格式为： <textarea name="文本域名" rows="行数" cols="列数"> 初始文本内容 </textarea>

19 3.3 表单元素 3.3.4 表单的高级用法 在某些情况下，用户需要对表单元素进行限制，设置表单元素为只读或禁用，常应用于以下场景：
3.3 表单元素 表单的高级用法 在某些情况下，用户需要对表单元素进行限制，设置表单元素为只读或禁用，常应用于以下场景： 只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。 禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮。 只读和禁用效果分别通过设置“readonly”和“disabled”属性来实现。 【演练3-10】制作网络鞋城服务协议页面。

20 3.3 表单元素 3.3.5 案例——制作网络鞋城会员注册表单
3.3 表单元素 案例——制作网络鞋城会员注册表单 【演练3-11】制作网络鞋城会员注册表单，收集会员的个人资料。本例文件3-11.html在浏览器中显示的效果如图3-23所示。

21 3.3 表单元素 表单布局 【演练3-12】使用表格布局的方法制作网络鞋城会员登录表单，表格布局示意图如图3-24所示，最外围的虚线表示表单，表单内部包含一个4行3列的表格，其中的第1行和第4行分别使用了跨2列的设置。页面在浏览器中显示的效果如图3-25所示。

22 3.4 范围标签<span> <div>标签主要用来定义网页上的区域，通常用于较大范围的设置，而<span>标签被用来组合文档中的行级元素。 基本语法 范围标签<span>用于标识行内的某个范围，以实现行内某个部分的特殊设置以区分其他内容。其语法格式为： <span>内容</span>

23 3.4 范围标签<span> 3.4.2 span与div的区别
span与div的区别在于，span仅仅是个行级元素，不会换行，而div是一个块级元素，它包围的元素会自动换行。块级元素相当于内联元素在前后各加了一个<br />标签。用容器这一词更容易理解它们的区别，块级元素<div>相当于一个大容器，而内联元素<span>相当一个小容器，大容器当然可以盛放小容器。 另外，span本身没有任何属性，没有结构上的意义，当其他元素都不合适的时候可以换上它，同时div可以包含span，反之则不行。 【演练3-13】演示span标签与div标签的区别。

24 3.5 换行标签<br/> 在HTML文档中，无法用多个〈Enter〉、空格、〈Tab〉键来调整文档段落的格式，要用HTML的标签来强制换行、分段。 <br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。与<hr/>标签一样，<br/>标签也强制执行一个换行，但与<hr/>不同的是，<br/>标签实现换行后不会影响段落的对齐方式。换行标签的格式为： 文字 <br /> 【演练3-14】制作网络鞋城联系方式的页面。

25 3.6 实训——制作什锦果园联系信息表单 【实训】本实训练习通过表格布局制作什锦果园联系信息表单，表格布局示意图如图3-29所示，本例文件3-15.html在浏览器中显示的效果如图3-30所示。

26 习题3 1．使用表格和超链接技术制作如图3-31所示的网页。 2．制作如图3-32所示的用户注册表单。
3．使用图文混排技术制作如图3-33所示的网络鞋城货到付款简介页面。 4．使用表格布局表单技术制作网络鞋城联系我们表单，如图3-34所示。