hxzdw第章超链接.ppt
第5课 创建超级链接,课堂讲解,超级链接概念 超级链接分类 创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建图像超级链接 创建导航条,超级链接概念,超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。,建立超链接（补充内容）,超链接按照链接指向位置一般可分为外部链接(External Link)与内部链接(Internal Link)。另外，HTML还可以创建指向邮件地址的链接，单击该链接之后便可通过电子邮件软件给指定的地址发送邮件。创建内部链接 先用为标签命名 创建邮件链接 邮件链接文本创建外部链接,网址、绝对地址、相对地址,字体例4,超链接 的 Target属性与用途,超级链接按照链接路径分类,绝对超级链接 文档相对路径 站点根目录相对路径,绝对超级链接,绝对超级链接就是形如“http:/www.china/zh_cn”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“http:/”。一般用于创建站外具有固定地址的超级链接。,文档相对路径,使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。,站点根目录相对路径,站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站点根目录，在同一个站点中网页的超级链接也可采用这种方法。,链接载体分类,超级链接的链接载体和链接目标,创建文本超级链接,文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。,创建锚链接,创建命名锚记 链接命名锚记,创建命名锚记,在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。,也可以通过“指向文件”来建立链接,链接命名锚记,创建好锚记之后，必须创建对应的超级链接源端点。,若要链接到同一文件夹内其他文档中的名为“top”的锚记，则输入“index.html#top”形式的锚记引用。,创建空链接,要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。,创建电子邮件超级链接,电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。例题 5-11,创建图像超级链接,为一般图像创建超级链接 创建图像热点超级链接,为一般图像创建超级链接,创建图像热点超级链接,要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver 8的图像热点超级链接功能就能避免这个问题。,图片地图,设置图片地图时，要在图片上添加一系列的“热点”，这些热点可以具有各自不同的形状，而且可以为它们分别设置超链接。矩形热点工具：创建一个矩形热点。椭圆形热点工具：创建一个圆形热点。多边形热点工具：创建一个不规则形状的热点。1绘制矩形热点2绘制椭圆形热点3绘制多边形热点,创建导航条,插入导航条 编辑导航条,插入导航条,导航条一般由图像或图像组组成，这些图像的显示内容随用户的操作不同而进行相应的变化。导航条为访问者浏览不同网页提供了一条捷径。,编辑导航条,插入导航条,练习1 纵向文字导航条,制作一个纵向文字导航条，效果如图5-53所示。在制作这个实例时，需要先用表格布局并设置表格属性，然后输入纵向的导航文字，最好添加超级链接。,图5-53 纵向文字导航条,练习2纵向动态导航条,利用Dreamweaver预设的插入导航条功能，制作一个动态的纵向导航条，效果如图5-54所示。,图5-54 纵向动态导航条,练习3,在本课上机实战中，将练习网站相册的创建方法。在Dreamweaver中内置了创建网站相册的命令，但此命令实际是调用了Fireworks的图片处理功能，因此，如要创建网站相册，必须先安装Fireworks软件。另外，为了创建网站相册，还需收集建立相册的图片。在开始创建相册之前，将相册的所有图像放置在一个文件夹中（该文件夹不必位于站点中）。另外，确保图像文件名是以.gif、.jpg、.jpeg、.png、.psd、.tif或.tiff为扩展名。,首先创建一个名为“电子相册”的站点，设置本地文件夹为E:photo，并在该文件夹下新建两个文件夹，分别取名为Source和Object，然后在Source文件夹中放入收藏的图片。做好上述的准备工作之后，接下来开始创建网站相册，具体操作如下。（1）选择命令创建网站相册菜单命令，打开“创建网站相册”对话框。,（2）在“创建网站相册”对话框中进行设置，设置完成后的对话框如下图所示。,图6-36,目标文件夹不应该已包含相册，如果已包含相册，并且如果任何新图像与先前使用的图像同名，则可能会覆盖现有的缩略图和图像文件。,（3）单击 按钮，Fireworks自动启动并创建缩略图和大尺寸图像。当处理完成后，Dreamweaver将再次处于活动状态并创建包含缩略图的Web页。（4）当出现指示“相册已经建立”的对话框时，单击 按钮。（5）等待几秒钟，相册页即可出现，如下页图所示。各缩略图根据文件名按字母顺序显示。（6）按【F12】键在浏览器中预览。,图6-37,图6-38,（7）在浏览器中单击一幅图片，则会打开如所示的放大显示图像窗口。,图6-39,
