第3章--行级标签.pptVIP

机械工业出版社同名教材 配套电子教案 3.1 超链接 3.2 图像 3.3 表单元素 3.4 范围标签span 3.5 换行标签br/ 3.6 实训——制作什锦果园联系信息表单 第3章 行级标签 3.1.1 超链接的基本概念 超链接（hyperlink）是网页互相联系的桥梁，超链接可以看作一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置，以及Internet、本地硬盘或局域网上的其他文件，甚至跳转到声音、图像等多媒体文件。 1．超链接的分类 根据超链接目标文件的不同，链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射。 2．路径 创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。 3.1 超链接 3.1.2 超链接的应用 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 3.1 超链接 3.1.2 超链接的应用 【演练3-1】制作网络鞋城页面之间的链接，当前页3-1.html中包含两个链接分别指向注册页和登录页，如图3-1所示。 3.1 超链接 3.1.2 超链接的应用 3．指向书签的链接 a name=记号名 目标文本附近的字符串 /a （1）指向页面内书签的链接 a href=#记号名 热点文本 /a 【【演练3-2】制作指向页面内书签的链接。 （2）指向其他页面书签的链接 a href=目标文件名.html #记号名 热点文本 /a 即单击“热点文本”，将跳转到目标页面“记号名”开始的网页元素。 【演练3-3】制作指向其他页面书签的链接。 3.1 超链接 3.1.2 超链接的应用 4．指向下载文件的链接 如果链接到的文件不是HTML文件，则该文件将作为下载文件。指向下载文件的链接格式为： a href=下载文件名 热点文本 /a 5．指向电子邮件的链接 单击指向电子邮件的链接，将打开默认的电子邮件程序，如FoxMail、Outlook Express等，并自动填写邮件地址。指向电子邮件链接的格式为： a href=mailto:E-mail地址 热点文本 /a 3.1 超链接 3.1.3 案例——制作网络鞋城购物向导 【演练3-4】制作网络鞋城购物向导及下载的页面，本例文件包括3-4.html、2-5.html两个展示网页和guide.rar下载文件。在浏览器中显示的效果如图3-4和图3-5所示。 3.1 超链接 3.2.1 Web上常用的图像格式 1．GIF GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标或其他具有统一色彩和色调的图像。 2．JPEG JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。 3．PNG PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式。 3.2 图像 3.2.2 图像标签img 图像标签的格式为： img src=图像文件名 alt=替代文字 title=鼠标悬停提示文字 width=图像宽度 height=图像高度 border=边框宽度 hspace=水平方向空白 vspace=垂直方向空白 align=环绕方式|对齐方式 / 【演练3-5】图像的基本用法，本例文件3-5.html在浏览器中正常显示的效果如图3-6所示；当显示的图像路径错误时，效果如图3-7所示。 3.2 图像 3.2.3 用图像作为超链接热点 图像也可作为起链接热点，单击图像则跳转到被链接的文本或其他文件。格式为： a href=URL img src=图像文件名 / /a 3.2.4 案例——制作网络鞋城图文简介 【演练3-6】使用图文混排技术制作网络鞋城简介页面。 3.2 图像 3.3.1 input元素 input元素