您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教材>>>Dreamweaver教程>>>网页制作——第四课:链接与媒体
网页制作——第四课:链接与媒体
发表日期:2007/3/31 7:59:00 出处:闪客启航 作者:未知 发布人:aypy1020 已被访问 4319

录音下载(一)    录音下载(二)

 

第一节:基本超链

本小节素材下载

网络中的一个个网页是通过超级链接的形式关联在一起的。超级链接是网页中最重要也是最根本的元素之一,没有它的存在,网页之间失去了关联,也就不成为网了。

    网页中的超级连接分为以下三种形式:

  • 绝对路径 如:http://www.flasher123.com/index.htm
  • 文档相对路径 如:web/work/my.htm
  • 站点根目录相对路径 如:/web/work/my.htm

文本超级链接

    浏览网页时,鼠标经过某些(带有下划线的)文字的时候,鼠标指针的形状会发生变化,根据网页设计的不同,可能文本也会发生一些变化,比如出现下划线或下划线消失、文本颜色字型改变等。这就是提示浏览者“这里是一个超级链接”此时用鼠标点击这个超级链接,就会打开所链接的网页。

    在 Dreamweaver MX 2004 中为文本加入超级链接十分简单,以本小节素材为例,我们一起来动手建立一下文本超级链接。

1、首先请各位下载本小节素材,然后将“test”文件夹放入我们建立的站点“myweb”目录中。

2、用 Dreamweaver MX 2004 打开“test”文件夹中的“index.htm”

3、用鼠标选中“启航简介”:

4、来到属性面板,在【链接】文本框后点击文件夹图标:

5、打开【选择文件】对话框:

在这里我们引入相对路径的概念
    选中文档之后,在上图中我们选择【相对于】下拉选项的“文档”或“站点根目录”【URL】文本框的内容也随之改变。

    如果在【相对于】选择【文档】则使用文档的相对路径,省略了与当前文档链接相同的URL部分,只指明不同部分。一般相对于文档用于以下几种情况:

  • 要链接的文档与当前文档在同一文件夹中,这是只需要输入文件名。
  • 要链接的文件位于当前文件所在文件夹的子文件夹中,URL会自动加上子文件夹名。

    如果在【相对于】选择【站点根目录】则使用从站点根目录到文档所在文件夹所经过的全部路径,本选项一般适合在使用多台服务器的大型网站。如果不是很熟悉路径的概念,建议大家采用相对于文档

    上面所例出的都是相对文档与文件夹而言的,以此建立的链接叫做“相对路径

    为文本添加链接之后,属性面板中的【目标】文本框就变成了可选状态:

重复上面的步骤为“课程介绍”以及后面的页面中的文本设置超级链接。

为“启航论坛”设置超级链接,这里【链接】文本框中填写的是启航论坛的URL
   (http://bbs.flasher123.com/index.asp)

它的URL带有通信协议、主机名,文件名等,是一个完整的统一资源定位,因此这就是“绝对路径

    绝对路径一般在所要链接的内容在其他网站的时候。

 

设置文本链接的不同状态

    大家上网浏览会发现有些文本链接颜色会发生变化,有的有下划线,而有的没有下划线,那些文字有的点击后颜色发生了改变,有些并不改变,这些是怎么做到的呢?

    原来,默认加入超级连接之后的文本带有下划线,点击后文本也会改变颜色。根据设计者的喜好以及页面总体视觉效果的需要,我们可能会为了保持页面文本字型字号字色的一致而采用只有鼠标移动到带有超链的文本时文本才变色,提示用户此处是一个超级链接。过去这样的效果需要填写大量代码才能实现,现在Dreamweaver MX 2004 给大家提供了方便的设置方法,只需要点击几次鼠标,就能制作出与众不同的网页来。

1、在【属性】面板点击【页面属性】打开其对话框,对话框中的【分类】选择【链接】

图像链接

    图像链接与文本链接大体相同,不同的首先要选中图像,然后在链接文本框中设置。更多的内容,在前面图像属性中已经介绍,不再赘述。

电子邮件链接

    在“常用”中点击“电子邮件”按钮(点击“常用”处下拉三角可以选择各种布局方式)

    弹出对话框:

    按下“确定”按钮,一个电子邮件的超级链接就建立完毕。

    依次填写文本和正确的邮件地址,网页中文本的内容就会变成一个电子邮件超级链接,用户点击它时,就能启动Outlook或Foxmail等软件给您发送邮件了。

 

下载链接

    建立下载链接与建立文本链接基本相同,不同的是在【链接】文本框中最后的文件的扩展名是“rar、zip”等。

建立锚点

    当一个页面中如果内容过多,就会使页面变的很长,用户要通过拉动浏览器的滚动条才能在页面中浏览相关的内容。这样就很不方便,建立锚点,就可以在本页面中快速的查找相关的主题和信息,本教程第一课第一小节就在页面中大量使用了锚点。

 

    打开本小节素材中的“test3.htm”如果我们想点击术语列表中的“域名”就能直接跳转到相关的术语解释,而不需要拖动浏览器的滚动条。

1、选择“常用布局”将光标移动到属于解释的“域名”,然后按下【命名锚记】按钮

    弹出【命名锚记】对话框,在铭记名称文本框填写一个名称,如“1”

    按下确定按钮后,相应位置插入了一个锚点:

 2、回到“术语列表”用鼠标选中文本“域名”,并在属性面板的【链接】的拖动【指向文件】图标,直接指向刚才建立的锚点:

    松开鼠标后【链接】的文本框中出现“#1”此时,保存文档,在浏览器中打开该文档,点击术语列表的“域名”超级链接时,就会快速跳转到“术语解释”的“域名”。

    请各位在“回到术语列表”的文本和“术语列表”文本之间做建立锚点和链接,来体会一下。

 

第二节:特殊链接

本小节素材下载

 

空链接

    空链接是一个没有指派目标的链接,Dreamweaver MX 2004 的【行为】中所罗列的行为相当于用JavaScript编写的程序或函数。要想使用行为,首先必须为链接对象建立空链接。详细内容将在《行为与特效》中详细介绍。

    建立空链接的方法十分简单,首先选中文本,然后在【属性】面板的【链接】文本框中输入一个“#”即可。空链接是为了应用行为,除此之外不用建立。

鼠标经过图像

鼠标指针经过图像属于动态网页中的一部分。当鼠标经过或者按下按钮的时候,图像,按钮的形状或颜色就会发生变化,如图像变换,发光,或者阴影出现等等。是网页变的生动活泼起来。

请看演示:鼠标移动到图片上的时候,图片变成了另外一幅,当点击后会打开本教程的主页。

这里是启航的图片

1、光标移动到欲插入的位置,点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框:

【图像名称】鼠标经过图像的名称,名称是自定义的,只要不与同页面另一个鼠标经过图像名称相同即可。
【原始图像】页面开始显示的图像
【鼠标经过图像】鼠标经过的时候显示的图像。
【替换文本】图像无法正常显示的时候出现的文本注释,也是图像正常显示时鼠标指向链接时的说明。
【前往的URL】点击鼠标后链接的目标。
【预载鼠标经过图像】浏览网页时两个图片都同时被下载,当鼠标经过时无需从网上下载,而是调用预先下载的图像,减少延迟,使效果平滑流畅。

创建导航条

    导航条由一组按钮或者图像组成,由它们链接到各个分支页面,起到导航作用,这些图片应该包括四种状态,如图:

状态图像
按下图像
鼠标经过图像
按下时鼠标经过图像

1、在菜单栏选择【插入】【图像对象】【导航条】打开对话框:

【导航条元件】可以自命名也可以在后面内容设置完毕后系统自动分配。
【项目】同上
【状态图像】页面起始显示的图像
【鼠标经过图像】当鼠标指针移动到图片上时显示的图像。
【按下图像】按下鼠标时显示的图像。
【按下鼠标经过图像】按钮被单击后呈现的图像,提示用户这个部分的按钮已经被点击过。
【替换文本】图像不能正常显示或者鼠标移动在链接上时出现的文本注释。
【按下时,前往的URL】超级连接的目标。
【预先载入图像】浏览时同时下载所有图像,显示效果时直接读取电脑缓存中的图像,使效果平滑。
【使用表格】复选框选中时以表格的形式插入导航条。(默认选择)
【插入】水平或垂直,当添加其他按钮导航条的时候在该按钮的水平位置或垂直位置排列。

最顶端的“+”“-”按钮用于添加其他导航按钮。“上”“下”按钮用于调整导航按钮位置。

请看演示如下:

按钮导航

第三节:插入媒体

插入Flash文本

    在 Dreamweaver MX 2004 中直接插入Flash文本即可制作具有动画效果的文本,而不用在Flash软件中制作。

1、在文档窗口中将光标移动到要插入Flash文本的位置。

2、选择菜单栏【插入】/【媒体】/【Flash文本】打开对话框。

【字体】【大小】选择所需要的字体和字号。
【颜色】选择页面起始时显示的文本的颜色。
【转滚颜色】鼠标经过时的颜色。
【文本】需要显示的文本。
【链接】鼠标点击后链接的URL。
【目标】在新窗口还是在本窗口打开等的选项。
【背景色】Flash的背景颜色。
【另存为】保存的路径和文件名。
设置完毕,点击【确定】:

插入Flash按钮

    同插入Flash文本一样,无需在Flash软件中制作,即可直接在Dreamweaver MX 2004中制作出Flash按钮。

【样式】内置了各种按钮的样式。
【范例】显示内置按钮样式。
【按钮文本】按钮上的文字,设定后取代内置按钮上的文字。
【另存为】保存Flash按钮的的路径和文件名。(这里不知道是笔者理解错误还是软件自身的BUG如果不是按照默认路径保存文件,网页中不能正常显示,除非修改代码。)
设置完毕,按下【确定按钮】

 

插入Flash

1、在文档窗口的设计视图中,把光标移动到需要插入Flash的位置。

2、在菜单栏中选择【插入】/【媒体】/【Flash】打开对话框:

    选择路径,文件之后按下【确定】按钮,即可在文档中插入Flash,但是在编辑窗口中显示如下图,只有在保存文档之后,在浏览器中才能正常显示Flash。

    保存文件后在浏览器中显示的效果:

插入插件

1、打开一个需要添加音乐的文档。

2、在菜单栏选择【插入】/【媒体】/【插件】打开对话框:

    选择路径和文件之后点击【确定】按钮,文档中出现插件图标:

    鼠标选中插件图标,【属性面板】中可以设置其属性:

    【宽高】设置为零的时候,网页中不出现播放器外观,这种做法可以使音乐作为网页的背景音乐。默认音乐播放一次后停止,如果想要循环播放则需要在代码中设定;当宽高设置为300X40的时候,出现下图所示大小的播放器外观,可以对音乐进行控制。

    【插件URL】设置站点中播放音乐媒体的插件路径和文件名,如果不设置,则会使用服务器端的插件播放该文件。

其他

    Dreamweaver MX 2004 是一款功能十分强大的软件,很多功能无法一一叙述,学习软件最好的方法是亲自动手,相信更多的功能,只要大家动手来试试看,就能很好的体会出使用方法。

 

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

兰幽空间 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:心梦、劳拉