• 1. 主讲:网页设计与制作——Dreamweaver 8
  • 2. 项目五 制作教育导航网页任务一 设置页眉任务二 设置网页主体项目五: 制作教育导航网页网页设计与制作Dreamweaver 8任务一任务二任务三 设置页脚任务四 设置锚记超级链接任务三小 结任务四实 训
  • 3. 任务一 设置页眉 本任务主要是对网页页眉部分的超级链接进行设置,主要使用鼠标经过图像和导航条技术,它们是基于图像的比较特殊的链接形式,属于图像对象的范畴。Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务一任务二任务三小 结任务四实 训
  • 4. 操作一 设置鼠标经过图像对象Dreamweaver 8网页设计与制作项目五: 制作教育导航网页 本操作主要介绍设置页眉中的鼠标经过图像对象的方法。通过本操作的学习,应该掌握的内容主要有: 1.鼠标经过图像对象的涵义及状态 鼠标经过图像是指在网页中,当鼠标经过或者按下按钮时,按钮的形状、颜色等属性会随之发生变化,如发光、变形或者出现阴影,使网页变得生动有趣。 鼠标经过图像有两种状态: (1)原始状态:在网页中的正常显示状态。 (2)变换图像:当鼠标经过或者按下按钮时显示的变化图像。 设置鼠标经过图像对象操作动画任务一任务二任务三小 结任务四实 训
  • 5. Dreamweaver 8网页设计与制作操作一 设置鼠标经过图像对象项目五: 制作教育导航网页2.设置鼠标经过图像对象的方法 在主菜单中选择【插入】/【图像对像】/【鼠标经过图像】命令或者在【插入】/【常用】面板中单击 (鼠标经过图像)按钮,打开【插入鼠标经过图像】对话框进行设置即可。 任务一任务二任务三小 结任务四实 训
  • 6. Dreamweaver 8网页设计与制作操作一 设置鼠标经过图像对象项目五: 制作教育导航网页3.设置鼠标经过图像对象应该注意的问题 两幅图像的尺寸大小必须是一样的。网页将第1幅图像的尺寸大小作为标准,在显示第2幅图像时,将按照第1幅的尺寸大小来显示。如果第2幅图像比第1幅图像大,那么将缩小显示;反之,则放大显示。第2幅图像有可能会发生失真现象,因此,在制作和选择两幅图像时,尺寸应保持一致。  一般要先在图像处理软件中将两种状态的图像文件制作好,分别保存到网站的图像文件夹内,然后才能创建鼠标经过图像。当包含“鼠标经过图像”的网页被浏览器下载时,会将这两种状态图像一起下载。暂时不显示的图像被存放在浏览器的缓存中,当鼠标经过图像时,再从缓存中将变化的图像调出来,这样图像的变化就没有停滞的感觉,也节省了用户的等待时间。任务一任务二任务三小 结任务四实 训
  • 7. 操作二 设置导航条图像对像Dreamweaver 8网页设计与制作项目五: 制作教育导航网页 本操作主要介绍设置页眉中的导航条的方法。通过本操作的学习,应该掌握的内容主要有: 1.导航条的涵义及状态 导航条是由一组按钮或者图像组成的,这些按钮或者图像链接各分支页面,起到导航的作用。导航条包括以下4种状态: (1)状态图像:用户还未单击按钮或按钮未交互时显现的状态。 (2)鼠标经过图像:当鼠标指针移动到按钮上时,元素发生变换而显现的状态。例如,按钮可能变亮、变色、变形,从而让用户知道可以与之交互。设置导航条图像对象操作动画任务一任务二任务三小 结任务四实 训
  • 8. 操作二 设置导航条图像对像Dreamweaver 8网页设计与制作项目五: 制作教育导航网页 (3)按下图像:按钮被单击后显现的状态。例如,当用户单击按钮时,新页面被载入且导航条仍是显示的;但被单击过的按钮会变暗或者凹陷,以表明此按钮已被按下。 (4)按下时鼠标经过图像:按钮被单击后,鼠标指针移动到被按下元素上时显现的图像。例如,按钮可能变暗或变灰,可以用这个状态暗示用户:在站点的这个部分该按钮已不能被再次单击。 制作导航条不一定要包括所有4种状态的导航条图像。即使只有一般状态图像和鼠标经过图像,也可以创建一个导航条,不过最好还是将4种状态的图像都包括,这样会使导航条看起来更生动一些。 任务一任务二任务三小 结任务四实 训
  • 9. 操作二 设置导航条图像对像Dreamweaver 8网页设计与制作项目五: 制作教育导航网页2.设置导航条图像对像的方法 在主菜单中选择【插入】/【图像对像】/【导航条】命令或者在【插入】/【常用】面板中单击 (导航条)按钮,打开【插入导航条】对话框进行设置即可。 任务一任务二任务三小 结任务四实 训
  • 10. 操作二 设置导航条图像对像Dreamweaver 8网页设计与制作项目五: 制作教育导航网页3.修改导航条的方法 如果要对导航条进行修改,可以通过【设置导航栏图像】行为进行。方法是: 在导航条中选中其中一个按钮,打开【行为】面板,在【行为】面板的动作栏中,双击事件下方的名称,打开【设置导航栏图像】对话框,在该对话框中可以重新设置图像的源文件及所指向的URL。 这个对话框和当初插入导航条的对话框是一样的,但又多了一个【高级】选项卡。如果焦点在当前的按钮,而其他的按钮同时也发生变化,那么就必须设置【变成图像文件】和【按下时,变成图像文件】这两项。由此看来,【设置导航栏图像】动作是导航条功能的一个补充和延伸,是为方便导航条创建后的修改而设立的。 任务一任务二任务三小 结任务四实 训
  • 11. 本任务主要是对网页主体部分的超级链接进行设置,主要包括: 图像超级链接 文本超级链接 下载超级链接 图像地图(热点)Dreamweaver 8网页设计与制作任务二 设置网页主体项目五: 制作教育导航网页任务一任务二任务三小 结任务四实 训
  • 12. 操作一 设置门户教育栏目Dreamweaver 8网页设计与制作项目五: 制作教育导航网页 给图像添加链接,使其可以指向其他的网页或者文档,这就是图像超级链接。本操作将通过图像【属性】面板来设置门户教育栏目中的图像超级链接。通过本操作的学习,应该掌握的内容主要有: 1.设置图像超级链接的方法首先选中图像,然后在图像【属性】面板的【链接】文本框中输入图像的链接地址,在【目标】下拉列表中选择目标窗口的打开方式,如“_blank”。 设置门户教育栏目操作动画任务一任务二任务三小 结任务四实 训
  • 13. 操作一 设置门户教育栏目Dreamweaver 8网页设计与制作项目五: 制作教育导航网页2. 超级链接目标窗口的打开方式 【属性】面板的【目标】下拉列表中共有4个选项: (1)【_blank】表示打开一个新的浏览器窗口,在其中显示链接所指向的网页文档内容。 (2)【_parent】表示回到上一级的浏览器窗口,显示链接所指向的网页文档内容。 (3)【_self】表示在当前的浏览器窗口中显示链接所指向的网页文档内容。 (4)【_top】回到最顶端的浏览器窗口中显示链接所指向的网页文档内容。 任务一任务二任务三小 结任务四实 训
  • 14. Dreamweaver 8网页设计与制作操作二 设置教育网站栏目项目五: 制作教育导航网页 本操作将设置教育网站栏目中的文本超级链接。通过本操作的学习,应该掌握的内容主要有: 1.设置文本超级链接的方法 (1)通过【超级链接】对话框设置超级链接 在主菜单中选择【插入】/【超级链接】命令或在【插入】/【常用】面板中单击 (超级链接)按钮,打开【超级链接】对话框进行设置即可。 其中,可以通过【访问键】选项设置链接的快捷键,也就是按下【 Alt 】 + 【 26个字母键其中1个】将焦点切换至文本链接,还可以通过【Tab键索引】选项设置【 Tab 】键切换顺序。 设置教育网站栏目操作动画任务一任务二任务三小 结任务四实 训
  • 15. Dreamweaver 8网页设计与制作操作二 设置教育网站栏目项目五: 制作教育导航网页 当单击【链接】下拉列表右边的 按钮时将打开【选择文件】对话框。【相对于】下拉列表中有“文档”和“站点根目录”两个选项:【文档】 和【站点根目录】 。 任务一任务二任务三小 结任务四实 训
  • 16. Dreamweaver 8网页设计与制作操作二 设置教育网站栏目项目五: 制作教育导航网页 ①【文档】选项 如果选择【文档】选项,将使用文档相对路径来链接,省略与当前文档URL相同的部分。文档相对路径的链接标志是以“../”开头或者直接是文档名称、文件夹名称,参照物为当前使用的文档。 如果在还没有命名保存的新文档中使用文档相对路径,那么Dreamweaver 8将临时使用一个以“file://”开头的绝对路径。当文件保存后,Dreamweaver 8再将“file://”路径转换为一个相对路径。 通常,当网页是静态网页,不包含应用程序,且文档中不包含多重参照路径时,建议选择文档相对路径。因为这些网页可能在光盘或者不同的计算机中直接被浏览,文档之间需要保持紧密的联系,只有文档相对路径能做到这一点。任务一任务二任务三小 结任务四实 训
  • 17. Dreamweaver 8网页设计与制作操作二 设置教育网站栏目项目五: 制作教育导航网页 ② 【站点根目录】选项  如果选择【站点根目录】选项,那么此时使用站点根目录相对路径来链接,即从站点根文件夹到文档所经过的路径。站点根目录相对路径的链接标志是首字符为“/”,它以站点的根目录为参照物,与当前的文档无关。 当网站的根目录发生改变,如网站被定义为虚拟目录,相对站点根目录路径就会发生错误,这时使用相对文档路径就有一定的优势。通常当网页包含应用程序,文档中包含复杂链接及使用多重的路径参照时,需要使用站点根目录相对路径。任务一任务二任务三小 结任务四实 训
  • 18. Dreamweaver 8网页设计与制作操作二 设置教育网站栏目项目五: 制作教育导航网页 (2)通过【属性】面板设置超级链接 用鼠标选中文本,然后在【属性】面板的【链接】文本框中定义链接地址,在【目标】下拉列表中选择窗口打开方式。 (3)通过将 图标拖曳到文件上创建超级链接 如果链接目标是网站内的某个文件,也可以将【链接】下拉列表右侧的 图标拖曳到【文件】/【文件】面板中的该文件上,即可建立到该文件的链接。 任务一任务二任务三小 结任务四实 训
  • 19. Dreamweaver 8网页设计与制作操作二 设置教育网站栏目项目五: 制作教育导航网页2.通过【页面属性】对话框设置文本超级链接状态的方法(1) 打开【页面属性】对话框,切换至【链接】分类。 (2) 分别设置【链接颜色】、 【已访问链接】、【变换图像链接】和【活动链接】的颜色。 (3) 在【下划线样式】下拉列表中选择其中一项,如“仅在变换图像时显示下划线”。 (4) 在【链接】分类中,也可以设置超级链接的字体和大小。任务一任务二任务三小 结任务四实 训
  • 20. Dreamweaver 8网页设计与制作操作三 设置优秀教案下载栏目项目五: 制作教育导航网页 本操作将设置下载超级链接。通过本操作的学习,应该掌握的内容主要有: 1.创建下载超级链接的方法 用鼠标选择相应的文本或图像,然后在【属性】面板的【链接】文本框中定义要链接的文件。 设置优秀教案下载栏目操作动画任务一任务二任务三小 结任务四实 训
  • 21. Dreamweaver 8网页设计与制作操作三 设置优秀教案下载栏目项目五: 制作教育导航网页2.应该注意的问题 (1)下载超级链接并不是一种特殊的链接,它可以是文本超级链接也可以是图像超级链接,而且添加链接的方法也一样,只是下载超级链接所指向的文件是特殊的。一般指向压缩文件(文件的扩展名是“.zip”、“.rar”等)、可执行文件(文件的扩展名是“.exe”或者“.com”)等文件。  (2)网站中每一个下载的文件必须对应一个下载超级链接,不能为多个文件或者一个文件夹建立下载超级链接。如果需要对多个文件或者文件夹提供下载,只能利用压缩软件将这些文件或者文件夹压缩为一个文件。任务一任务二任务三小 结任务四实 训
  • 22. Dreamweaver 8网页设计与制作操作四 设置中国同学录栏目项目五: 制作教育导航网页 本操作将设置中国同学录栏目中的图像地图及其链接。通过本操作的学习,应该掌握的内容主要有: 1.设置图像地图及超级链接的方法 (1)首先插入图像文件,然后在其【属性】面板中,用鼠标单击【地图】下面的相应按钮,最后将光标移到图像上,按住鼠标左键绘制一个矩形、圆形或多边形区域。 设置中国同学录栏目操作动画任务一任务二任务三小 结任务四实 训
  • 23. Dreamweaver 8网页设计与制作操作四 设置中国同学录栏目项目五: 制作教育导航网页 (2)接着选定设置的图像地图,并在【属性】面板中设置包括链接地址在内的各项属性参数。 2.编辑图像地图的方法 要编辑图像地图,可以选择【属性】面板中的 (指针热点工具)按钮。该工具可以对已经创建好的图像地图进行移动、调整大小或层之间的向上向下向左向右移动等操作。还可以将含有地图的图像从一个文档复制到其他文档或者复制图像中的一个或几个地图,然后将其粘贴到其他图像上,这样就将与该图像关联的地图也复制到了新文档中。 任务一任务二任务三小 结任务四实 训
  • 24. Dreamweaver 8网页设计与制作操作四 设置中国同学录栏目项目五: 制作教育导航网页2.超级链接的类型 超级链接根据路径可分为两种类型。 (1)绝对路径 如“http://www.dowebs.org/dobbs/index.aspx”。 (2)相对路径,又分文档相对路径和站点根目录相对路径 前者如“../dobbs/index.aspx”,后者如“/dobbs/index.aspx”。 超级链接根据使用对象可分为文本超级链接、图像超级链接、电子邮件链接、锚记超级链接、图像地图链接、下载超级链接和空链接等。空链接是一个未指派目标的链接,在【属性】面板【链接】文本框中输入“#”即可。 任务一任务二任务三小 结任务四实 训
  • 25. Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务三 设置页脚 创建电子邮件超级链接与一般的文本链接不同,因为电子邮件链接是将浏览者的本地电子邮件管理软件打开,而不是向服务器发出请求。本任务主要是设置页脚中的电子邮件超级链接。通过本操作的学习,应该掌握的内容主要有: 1.设置电子邮件超级链接的方法 在主菜单中选择【插入】/【电子邮件】命令或在【插入】/【常用】面板中单击 (电子邮件)按钮,打开【电子邮件链接】对话框。在【文本】文本框内输入在文档中显示的信息,在【E-Mail】文本框内输入电子邮箱的完整地址。 设置页脚操作动画任务一任务二任务三小 结任务四实 训
  • 26. Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务三 设置页脚2.编辑电子邮件超级链接的方法 选中电子邮件超级链接,然后在【属性】面板中编辑电子邮件链接即可。其中,“mailto:”、“@”和“.”这3个元素在电子邮件链接中是必不可少的。有了它们,才能构成一个正确的电子邮件链接。 任务一任务二任务三小 结任务四实 训
  • 27. Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务四 设置锚记超级链接 有时网页的内容很长,需要上下拖动滚动条来查看文档的内容,极不方便,利用锚记超级链接就可以准确快速地查找到文档中的信息。本任务通过“小蝌蚪找妈妈”页面的设置介绍创建锚记和设置锚记超级链接的方法。通过本操作的学习,应该掌握的内容主要有: 1.创建锚记的方法 将光标置于要创建锚记的文本处,在主菜单中选择【插入】/【命名锚记】命令或者在【插入】/【常用】面板中单击 (命名锚记)按钮,打开【命名锚记】对话框。在【锚记名称】文本框中输入锚记名称,单击【确定】按钮,在文档光标位置便插入了一个锚记。 任务一任务二任务三小 结任务四实 训
  • 28. Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务四 设置锚记超级链接锚记【命名锚记】对话框任务一任务二任务三小 结任务四实 训
  • 29. Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务四 设置锚记超级链接2.设置锚记超级链接的方法 用鼠标选中文本,在主菜单中选择【插入】/【超级链接】命令,打开【超级链接】对话框,这时选择的文本自动出现在【文本】文本框中,然后在【链接】下拉列表中选择锚记名称,单击【确定】按钮即可。 任务一任务二任务三小 结任务四实 训
  • 30. Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务四 设置锚记超级链接 也可在【属性】面板的【链接】下拉列表中直接输入锚记名称,如“#a”,或者直接将【链接】下拉列表后面的 图标拖曳到锚记名称上。 如果链接的目标锚记位于其他网页中,则需要先输入该网页的地址,然后再输入“#”符号和锚记名称,如“index.htm#a”。 任务一任务二任务三小 结任务四实 训
  • 31. 实训 设置超级链接本项目着重介绍了超级链接在网页制作中的应用。实训将在网页“xueqian.htm”中对如图所示中的不同类型的超级链接进行设置,以进一步巩固超级链接的设置方法。Dreamweaver 8网页设计与制作项目五: 制作教育导航网页实训结果文件见“项目结果”文件夹中的“xueqian.htm”。【实训目的】 进一步巩固设置文本超级链接状态的方法。 进一步巩固设置文本超级链接的方法。 进一步巩固设置图像超级链接的方法。 进一步巩固设置图像地图的方法。 任务一任务二任务三小 结任务四实 训
  • 32. 实训 设置超级链接Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务一任务二任务三小 结任务四实 训
  • 33. 小结 本项目主要介绍了超级链接在网页中的应用,概括起来主要有以下几点。  (1)设置鼠标经过图像的方法。  (2)设置导航条的方法。  (3)设置图像超级链接和图像地图的方法。  (4)设置文本超级链接和下载超级链接的方法。  (5)设置电子邮件超级链接的方法。  (6)创建锚记和设置锚记超级链接的方法。 通过对这些内容的学习,希望读者能够掌握在网页中设置各种超级链接的基本方法并能够熟练应用。Dreamweaver 8网页设计与制作项目五: 制作教育导航网页任务一任务二任务三小 结任务四实 训