网页设计与制作项目3 常用网页元素的添加.ppt

7.鼠标经过图像 鼠标经过图像是指当鼠标指针移动到图像上时会显示预先设置好的另一副图像，当鼠标指针移开时，又会恢复为第一幅图像。在制作网页中的按钮、广告时，经常会用到这种效果，使网页变得生动有趣。它实际上是由两幅图像组成，即原始图像和替换图像，在制作鼠标经过图像时，应保证两幅图像大小一致。 设置鼠标经过图像的具体操作步骤如下。 （1）在“编辑区”中单击选中要插入图像的区域。 （2）选择菜单栏“插入 > 图像对象 > 鼠标经过图像”。 3.1.4 网页图像 （3）在弹出的“插入鼠标经过图像”对话框中，输入图像名称，选择原始图像，再选择鼠标经过图像时显示的图像，如果用户需要在鼠标经过图像时显示图片说明或者在点击图片时链接到其他网址，还可在“替换文本”中输入说明用的文字以及设置链接的URL地址，单击“确定”按钮，如图3.68所示。 3.1.4 网页图像 图3.68 “插入鼠标经过图像”对话框 （4）插入鼠标经过图像后，保存文档并在浏览器中浏览。鼠标经过前图像如图3.69所示，鼠标经过后图像如图3.70所示。 3.1.4 网页图像 图3.69 鼠标经过前图像 图3.70 鼠标经过后图像 由上面的操作可知，鼠标经过图像有以下两种状态。 ?原始状态：在网页中的正常显示状态。 ?变换图像状态：当鼠标经过或者单击图像时显示变化图像。 在设置鼠标经过图像时，两幅图像的尺寸大小必须是一样的。Dreamweaver将以第1幅图像的尺寸大小作为标准，在显示第2幅图像时，将按照第1幅图像的尺寸大小来显示。如果第2幅图像比第1幅图像大，那么将缩小显示；反之，则放大显示。为避免第2幅图像可能出现的失真现象，在制作和选择两幅图像时，尺寸应保持一致。 一般要先在图像处理软件中将两种状态的图像文件制作好，分别保存到网站的图像文件夹内，然后才能创建鼠标经过图像。当包含“鼠标经过图像”的网页被浏览器下载时，会将这两种状态的图像一起下载。暂时不显示的图像被存放在浏览器的缓存中，当鼠标经过图像时，再从缓存中将变化的图像调出来，这样图像的变化就没有停滞的感觉，也节省了用户的等待时间。 3.1.4 网页图像 【项目描述】 个人网站主页大体上包括以下内容：我的圈子、我的相册、我的音乐、最新动态、项目互动和资源下载等6大模块，这六大模块部分简介如下。 1.介绍我的班级和我班级里的同学，把我班的同学加载到我的网页中并对每个人做详细的介绍，形成一个像同学录一样的页面，在这里，每个人可以尽量书写个人的兴趣爱好。 2.个人简历。首先是个人详细的自我介绍，然后加上个人的求职信和个人简历，以便企业更深的了解。 3.我的相册简介：（1）设计个人的相册（2）朋友的相册 4.贴图。如果发现好的图片我收集起来可以和广大朋友共同分享。 5.我的音乐简介。该模块主要包括：国内最新的流行音乐、日韩最新的流行音乐、欧美最新的流行音乐。 实践1、制作个人网站主页 【项目实训】 谢 谢！ （2）建立锚点链接 前面我们创建了8个锚点，下面来学习为文本建立锚点链接，具体步骤如下： ①选中文本“办理商品房认购手续 ”，在“属性”栏中的“链接”文本框中输入“#”符号，然后输入链接的锚记名称。输入之前的锚记名称“#a1”，表示链接到名称为“a1”的锚点，如图3.43所示。 3.1.3 超链接 图3.43 建立锚链接 ②用上述方法，分别将文本“签署正式商品房买卖合同 ”、“付款及领取收据或发票 ”、“银行按揭 ”、“办理入伙（现房） ”、“土地房屋权证办理 ”、“客户投诉 ”、“购房指南索引”链接到锚点“a2”、“a3”、“a4”、“a5”、“a6”、“a7”、“a0”如图3.44所示。 3.1.3 超链接 图3.44 完成多个锚链接 ③完成锚点链接制作，保存文件，并在浏览器预览，单击某链接，相对应的内容就会出现在页面顶部，如图3.45所示。 3.1.3 超链接 图3.45 锚链接效果 6.其他特殊链接 在网页制作过程中，除了上面介绍的几种超级链接之外，还有FTP链接、下载链接、空链接及图像地图链接等，下面分别介绍这几种链接。 （1）FTP链接 FTP链接所指向的目标地址是FTP服务器的地址，在在选中插入下载链接的文本或图像的“属性”栏中的“链接”文本框中输入FTP服务器的地址即可，如图3.46所示。通常开放出来的FTP服务器都允许匿名登录，因此，单击FTP链接，即可访问该FTP服务器中的文件。 3.1.3 超链接 图3.46 插入FTP链接地址 （2）下载链接 下载链接是指链接的目标文件不是网页地址、图片，而是zip、rar、iso、mp3、doc等类型的文件，在选中插入下载链接的文本或图