网页设计与制作第三章网页基本元素实现.ppt

1．插入“鼠标经过图像” 图3-25 参数设置完成后的“插入鼠标经过图像”对话框 图3-27 “插入导航条”对话框 图3-29 “图像占位符”对话框 超级链接（Hyperlink）是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。超级链接就是从一个网页指向一个目标的连接关系，目标可以是另外一个网页，也可以是相同的网页中的不同的位置，还可以是一幅图片、一个文件或是一个应用程序。 一个网站中通常包含有许多内容，这些内容不可能全部显示在一个网页上，这时就可以制作超级链接，通过超级链接可以方便的访问其他的网页。通常情况下，超级链接可以是文字、图像，通过这些文字或者图像即可链接到相关的内容上。在一个网站中，链接路径通常有三种路径方法：绝对路径、文档目录相对路径、根目录相对路径 图3-30 绘制AP Div和设置链接属性 超链接的打开方式 链接网页的打开的窗口或位置 _blank 在一个新的未命名的浏览器中打开链接的网页 _parent 如果是嵌套的框架，则在父框架或窗口中打开；如果不是嵌套的框架，则等同于_top，链接的网页在浏览器中打开 _self 在当前网页所在的窗口或框架中链接的网页，该选项是浏览器的默认值 _top 在浏览器窗口打开链接的网页 创建图片超链接的步骤如下： （1）选中所需建立超链接的图片，此时属性面板为图片的属性面板； （2）在图片属性面板中，为图片“链接”添加链接，具体方法可参考为文本添加超链接的操作； （3）按“F12”预览网页。 图像连接不像文本链接那样，会发生许多提示，图像本身不会发生改变，只是在预览网页时，当鼠标指针经过带链接的图像时，指针的形状变为“手”的形状。点击图像就会打开所链接的文档。 图片上的超级链接也可以实现一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热点。 操作步骤： （1）首先选中图片，在“属性”面板上的绘图工具在画面上绘制热点。在“地图”文本框下的有三种热点工具 ：矩形、圆形、多边形，根据热区选择合适的热点工具，进入热点绘制状态。 （2）绘制热点。当鼠标指针变成“＋”字形状时，在需要设置热点的位置拖动形成一个热点。 （3）在绘制好热点后，设置热点的“属性”面板中的“链接”属性， 1．建立文本电子邮件超链接 （1） 在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。 （2）执行下列操作之一，插入该链接： ? 选择“插入”→“电子邮件链接” ? 在“插入”面板的“常用” 类别中，单击“电子邮件链接”按钮。 （3）在“文本” 框中，键入或编辑电子邮件的正文。 （4）在“E-mail”框中，键入电子邮件地址，然后单击“确定”。 2 建立图片文本电子邮件超链接 在图片的“链接”属性中，输入： “mailto：邮件地址 图3-35 设置图片“6.jpeg”的链接属性 创建空链接如下： 在“文档”窗口的“设计”视图中选择文本、图像或对象。 在属性面板中，在“链接” 框中键入 javascript:; （javascript 一词后依次接一个冒号和一个分号）。 脚本链接执行 JavaScript 代码或调用 JavaScript 函数。它非常有用，能够在不离开当前 Web 页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其它处理任务 如果想让网站提供文件下载的功能，就必须建立下载文件超链接。如果超级链接指向的不是一个网页文件，而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。实现文件下载的功能很简单，只需在属性面板的“链接”框中加入下载的文件就可以了。 超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。 图3-36“链接检查器”选项卡 典型的导航栏有： 横向导航栏 纵向导航栏 浮动导航栏 下拉菜单式导航栏 下拉菜单导航栏和浮动导航栏都是比较新颖的导航方式，可以使用行为、JavaScript脚本、Spry等技术实现，后面的章节将介绍。下拉菜单也可以使用Flash设计 3.4.1 参数设置 图3-40 “首选参数”对话框 图3-41设置“新建文档”的参数 图3-43 “页面属性”对话框 * 图3-11 正方形的项目符号 * 图3-20“选择图像源文件”对话框 * * * 第三章网页基本元素实现 文本操作 在网页插入图像 设置超级链接 页面的整体控制