项目05制作导航网页要素.ppt

主讲： 网页设计与制作——Dreamweaver CS3 项目五 制作导航网页 任务一 设置页眉 任务二 设置网页主体 项目五： 制作导航网页 网页设计与制作Dreamweaver CS3 任务一 任务二 任务三 设置页脚 任务三 小 结 实 训 任务一 设置页眉 本任务是对网页页眉部分的超级链接进行设置，包括文本超级链接和图像超级链接，它们是比较常用的超级链接形式。 Dreamweaver CS3 网页设计与制作 项目五： 制作导航网页 任务一 任务二 任务三 小 结 实 训 操作一 设置文本链接 Dreamweaver CS3 网页设计与制作 项目五： 制作导航网页 本操作主要介绍设置页眉中的文本链接的方法。通过本操作的学习，应该掌握的内容主要有： 1.超级链接的类型 （1）绝对路径：就是某个文件在网络上的完整地址。 （2）相对路径，又分文档相对路径和站点根目录相对路径，文档相对地址就是指以当前文档所在位置为起点到被链接文档经由的路径，站点根目录相对地址就是指所有路径都开始于当前站点的根目录，以“/”开始。 任务一 任务二 任务三 小 结 实 训 Dreamweaver CS3 网页设计与制作 操作一 设置文本链接 项目五： 制作导航网页 2.设置文本链接的方法 超级链接根据使用对象可分为文本超级链接、图像超级链接、电子邮件链接、锚记超级链接、图像地图链接、下载超级链接、空链接等。 任务一 任务二 任务三 小 结 实 训 （1）通过【超级链接】对话框 在主菜单中选择【插入记录】／【超级链接】命令或在【插入】／【常用】面板中单击 （超级链接）按钮，打开【超级链接】对话框进行设置即可。 Dreamweaver CS3 网页设计与制作 操作一 设置文本链接 项目五： 制作导航网页 （2）通过【属性】面板 用鼠标选中文本，然后在【属性】面板的【链接】文本框中定义链接地址，在【目标】下拉列表中选择窗口打开方式。 ? 任务一 任务二 任务三 小 结 实 训 （3）通过拖曳图标到文件上 如果链接目标是网站内的某个文件，也可以将【链接】下拉列表右侧的 图标拖曳到【文件】面板中的该文件上，即可建立到该文件的链接。 Dreamweaver CS3 网页设计与制作 操作一 设置文本链接 项目五： 制作导航网页 2.超级链接目标窗口的打开方式 任务一 任务二 任务三 小 结 实 训 【属性】面板的【目标】下拉列表中共有4个选项： （1）【_blank】表示打开一个新的浏览器窗口，在其中显示链接所指向的网页文档内容。 （2）【_parent】表示回到上一级的浏览器窗口，显示链接所指向的网页文档内容。 （3）【_self】表示在当前的浏览器窗口中显示链接所指向的网页文档内容。 （4）【_top】回到最顶端的浏览器窗口中显示链接所指向的网页文档内容。 Dreamweaver CS3 网页设计与制作 操作一 设置文本链接 项目五： 制作导航网页 3.设置文本超级链接状态 任务一 任务二 任务三 小 结 实 训 打开【页面属性】对话框，切换至【链接】分类， 分别设置【链接颜色】、【已访问链接】、【变换图像链接】和【活动链接】的颜色， 在【下划线样式】下拉列表中选择其中一项，如“仅在变换图像时显示下划线”， 在【链接】分类中，也可以设置超级链接的字体和大小。 操作二 设置图像链接 Dreamweaver CS3 网页设计与制作 项目五： 制作导航网页 本操作将通过图像【属性】面板来设置页眉中的图像超级链接。通过本操作的学习，应该掌握的内容主要有： 1.设置图像超级链接的方法 首先选中图像，然后在图像【属性】面板的【链接】文本框中输入图像的链接地址，在【目标】下拉列表中选择目标窗口的打开方式。 任务一 任务二 任务三 小 结 实 训 操作二 设置图像链接 Dreamweaver CS3 网页设计与制作 项目五： 制作导航网页 2.设置图像替换文本的方法 在【属性】面板的【替换】文本框中输入文本即可。 任务一 任务二 任务三 小 结 实 训 本任务主要是对网页主体部分的超级链接进行设置，主要包括： 图像热点（图像地图） 鼠标经过图像 导航条 下载超级链接 Dreamweaver CS3 网页设计与