人机交互界面设计(第四章).ppt

03 网页图片的显示 小贴士： 什么时候插入图片，什么时候用背景图片？ 当图片作为页面主体内容，如新闻图片时，使用插入图片。作为页面整体背景或者点缀美化功能的时候可以作为背景图片引入。 相对路径与绝对路径 （1）绝对路径 绝对路径表示一个完整的路径。 可以来源于本机中的物理地址，例如src=D:/mysite/image/pic.jpg； 也可以来源于internet的网络路径，例如src=/img/pic.jpg。 （2）相对路径 相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后，产生找不到图片或其他文件等的现象。 04 超链接 文字超链接 超链接指的是一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序等。 HTML 超链接主要由标签对a/a和属性href 构成。要实现链接的跳转，必须要使用属性href 用法： ?a href=将要链接到的地址 target=窗口打开方式链接的文字或图片/a 通过点击链接的文字，具体的语法为：a href=跳转文件的地址链接文字/a 图片超链接 通过点击图片进行跳转，具体的语法为：a href=跳转文件的地址img src=1.jpg/a 04 超链接 锚点超链接 1、确定链接跳转的位置，设置锚点：a name=”锚点名称”目标位置/a（锚点的名字可以是任意的英文名） 2、创建链接源，a href=”#锚点名称”链接文字或者图片/a 注意：锚点名称需要必须要与链接的href内的锚点名称匹配（相同）。 邮件超链接 需要建立邮件超链接时，点击内容会启动电子邮件程序。 具体用法为：a herf=mailto:邮箱名发邮件/a 04 超链接 案例 以下是关于超链接的一个知识巩固案例。根据如图所示的网页效果图及文档路径，在Dreamweaver中写出源代码。（文档路径在书上有缺失，下图为准） 创建一个名为test.html页面 分别设置5个字段：link，百度图标图片，锚点链接，发邮件，这里是一段话 为link字段增加链接到与test.html同级文件下的1.html 为百度图片图片增加链接到百度官网 为锚点链接字段增加锚点链接到“这里是一段话” 为发邮件字段增加邮件超链接到hello@163.com 05 列表标签 列表标签是HTML中常用的一种标签。 具体分为 无序 有序列表 定义列表。 列表标签的主要用途为：网页导航、网页列表页、网页图文排列部分等 05 列表标签 ----无序列表 无序列表（Unordered lists）是一个项目的列表，在列表中每个项目前面加上列表符号。这种列表也可称为项目列表。此项目列表使用粗体圆点（典型的小黑圆圈，属于默认设置）、方块、圆圈进行标记。 ul li第一项/li li第二项/li li第三项/li /ul 值 示例 disc（默认） 圆点 square 小方块 circle 圆环 创建一个无序列表要用方块来标记他的项目符合，可以使用列表的type属性值“square”，即ul type=”square” 05 列表标签 ----无序列表 案例 在Dreamweaver中写出标题与无序列表的源代码 05 列表标签 ----有序列表 有序列表（Unordered lists）有序就是有顺序。有序列表可以使用数字（默认）、大写字母、小写字母、大写罗马数字、和小写罗马数字进行编号。 ol li第一项/li li第二项/li li第三项/li /ol 创建一个大写字母ol type=”A” 值 示例 1 数字（默认） A 大写字母 a 小写字母 I 大写罗马数字 i 小写罗马数字 05 列表标签 ----有序列表 案例 在Dreamweaver中写出标题与有序列表的源代码 05 列表标签 ----定义列表 定义列表（Unordered lists）用于常见问题及答案；或者一个列表包含多个术语及不同的解释，就可以使用定义列表进行布局。 如： dl dl名词/dt dd解释的内容/dd /dl 05 列表标签 ----定义列表 案例 在Dreamweaver中写出标题与定义列表的源代码 06 html5媒体元素 在网页上插入音频、视频可以使其显得更生动。如 object对象标签、 embed嵌入对象。 Html5增加了一些多媒体和交互元素，帮助我们更好的显示音频或视频，如video视频播放 audio声音播放 source媒体元素等 06 html5