网页设计与制作项目七-超级链接与导航栏课件.ppt

1、项目活动七项目活动七 超级链接与导航栏超级链接与导航栏 复习回顾复习回顾:如何新建框架？1.创建一个站点，按ctrl+n 新建命令，弹出新建文档的对话框，在左侧的列表中选择“示例中的页”选项，然后选择框架集，在右侧的“示例页”中选择“上方固定，下方固定”的选项，点击创建。2.保存框架集。3.设置页面属性。4.插入图片主要教学环节主要教学环节项目活动七项目活动七 超级链接与导航栏超级链接与导航栏项目背景项目背景1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业 7反思感悟反思感悟 8主要教学环节主要教学环节项目活动七项目活动七 超级链接与

2、导航栏超级链接与导航栏项目背景项目背景1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业 7反思感悟反思感悟 8主要教学环节主要教学环节项目活动七项目活动七 超级链接与导航栏超级链接与导航栏项目背景项目背景）1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业 7反思感悟反思感悟 8主要教学环节主要教学环节项目活动七项目活动七 超级链接与导航栏超级链接与导航栏项目背景项目背景1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业

3、 7反思感悟反思感悟 8主要教学环节主要教学环节项目背景项目背景）1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业 7反思感悟反思感悟 8项目活动七项目活动七 超级链接与导航栏超级链接与导航栏主要教学环节主要教学环节项目背景项目背景1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业 7反思感悟反思感悟 8项目活动七项目活动七 超级链接与导航栏超级链接与导航栏主要教学环节主要教学环节项目背景项目背景1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结

4、项目小结6布置作业布置作业 7反思感悟反思感悟 8项目活动七项目活动七 超级链接与导航栏超级链接与导航栏主要教学环节主要教学环节项目背景项目背景1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业 7反思感悟反思感悟 8项目活动七项目活动七 超级链接与导航栏超级链接与导航栏主要教学环节主要教学环节项目背景项目背景1项目分析项目分析2任务实施任务实施3任务拓展任务拓展4作品展评作品展评5项目小结项目小结6布置作业布置作业 7反思感悟反思感悟 8项目活动七项目活动七 超级链接与导航栏超级链接与导航栏（一）项目背景 返回 网络中的每个网页都是通

5、过超链接的形式关联在一起的，超链接是网页中最重要、最根本的元素之一。浏览者可以通过鼠标单击网页中的某个元素，轻松地实现网页之间的转换或下载文件、收发邮件等。通过学习本案例，能够学会超链接的设置，特别是学会文本的设置、电子邮件的设置、导航栏的设置及创建超链接的多种方法。（二）项目分析项目活动目标项目活动目标：网页各种超链接的设置方法，能够独立根据操作要求完成。返回重点重点：1.理解超链接的概念 2.掌握几种超链接的设置 3.熟练掌握水平导航条的设置及超链接的设置难点难点：多种方法的设置（三）任务实施 根据DREAMWEAVER 为“欢迎您来信赐教！”创建电子邮件超链接，效果如图所示。电子邮件超链

6、接的设置电子邮件超链接的设置【操作步骤操作步骤】1.选择“文件”-“打开”命令，打开网页“index.asp”文件，单击“打开”按钮打开文件。在编辑状态下，先选定要链接的文字“欢迎您来信赐教！”。2.单击“插入”菜单选择“电子邮件链接”弹出如下图7-1-1对话框，填入E-Mail地址即可 还可以选中图片或者文字，直接在属性面板链接框中填写还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件：邮件地址地址”，如下图所示，如下图所示3.创建完成后，保存页面，按创建完成后，保存页面，按F12预览网页效果预览网页效果。页面之间的超级链接页面之间的超级链接【操作步骤操作步骤】4按F12

7、预览网页，在浏览器里光标移到超级链接的地方就会变成手型。1选择“文件”-“打开”命令，打开网页“index.asp”文件，单击“打开”按钮打开文件。2在网页中选中要做超级链接的文字或者图片。3在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示，如下图所示图片超级链接的设置图片超级链接的设置1选择“文件”中“打开”命令，打开网页“index.asp”文件，单击“打开”按钮打开文件。3属性面板改换为热点面板如图7-1-5链接输入框：填入相应的链接。2在网页中插入图片，单击图片，用展开的属性面板上的绘图工具在画面上绘制热区，如图 替代框：

8、填入你的提示的文字说明。目标框：不作选择则默认在新浏览器窗口打开。4.保存页面，按F12预览，用鼠标在设置的热区检验效果。1.超级链接的概念与路径知识：超级链接的概念与路径知识：超链接的主要作用是将物理上无序的内容组成一个有机的统一体。超链接对象上存放某个网页文件的地址，以便用户打开相应的网页文件。在浏览网页时，当用户将鼠标指针移到文字或图像上时，鼠标指针会改变形状或颜色，这就是在提示用户：此对象为链接对象。单击这些链接对象，就可完成打开链接的网页下载文件、打开邮件工具收发邮件等操作。2.超级链接属性面板中的目标选项超级链接属性面板中的目标选项:“目标”我们称它为目标区。也就是超级链接指向的页

9、面出现在什么目标区域。默认的情况下域中总有四个选项。_blank：单击链接以后，指向页面出现在新窗口中。_parent：用指向页面替换他外面所在的框架结构。_self：将连接页面显示在当前框架中。_top：跳出所有框架，页面直接出现在浏览器中。为脸谱艺术页面添加导航条，并设置超链接，效果如图所示。为脸谱艺术页面添加导航条，并设置超链接，效果如图所示。水平导航条超链接的设置水平导航条超链接的设置【操作步骤操作步骤】1.打开dreamweaver CS3，设置上IIS并建好站点。插入脸谱素材，然后将光标放在第二行的表格中，如图7-2-1所示图7-2-1 导入素材1.单击常用菜单栏中的图像按钮右侧的

10、下拉按钮，右键单击在下拉菜选中导航条，然后弹出对话框如图7-2-2所示图7-2-2 插入导航条 图7-2-3 选择图像源文件3单击状态图像后面的浏览，找到图片1.jpg，如图7-2-3所示。4单击确定，点击鼠标经过图片后面的浏览选择1.jpg如图7-2-4所示。图7-2-4 插入导航条5在下方插入选项中选择水平选项6单击最上方的小加号再添加一个新项目，如图7-2-5所示图7-2-5 插入导航条7按照上次的步骤再添加几次直到将导航图片全部添加上，如图7-2-6所示图7-2-6 插入导航条8点击确定，如图7-2-7所示。图7-2-7 显示导航条 9将导航调节得到与表格一样大小，如图7-2-8所示。

11、图7-2-8 导航条调节 10ctrl+s保存，按F12测试一下 11选中“产品报价”，在链接栏的地址里输入要链接到的网页。12保存并测试。注意：注意：相对链接根据链接文件的参照点不同，又分为：文档内绝对链接（链接文件的参照点是根目录）不支持预览文档内相对链接（链接文件的参照点是此文档所在文件夹）一、超级链接的分类：一、超级链接的分类：（按要链接的文件所处的位置分类）绝对链接（链接的文件位于站点外）相对链接（链接的文件位于站点内）虚链接（链接的文件是本身）2.相对链接相对链接:选中要设置链接的文本或图象。在属性检查器中,单击“浏览”按钮选择链接的文件.返回二、超级链接的创建：二、超级链接的创建

12、：1.绝对链接绝对链接:（1)选中要设置链接的文本或图象（2）在属性检查器“链接”文本框中输入URL.注意注意:URL:(统一资源定位符)格式:protocol:/machine:port/directory/filename 协议名 主机名 端口 目录 文件名 例如:http:/注意注意:绝对链接常见于“友情链接”项,或网址类网站.（四）任务拓展实践演练实践演练 青岛西海岸度假胜地青岛西海岸度假胜地【操作要求操作要求】返回（4）为图片“大珠山风景区(国家AAAA级景区)”创建超链接，链接的网页文档为“txcz.html”。（1）建立“课堂实践”网站文件夹，在站点文件夹下创建“11超级链接”文

13、件夹，创建网页文档“11.html”。（2）选中页面底部的文字“返回首页”设置超链接，链接的网页文档为“index.html”；同样为“关于我们”设置超链接，链接的网页文档为“02.html”；为“公司部门”设置超链接，链接的网页文档为“12.html”。（3）为“联系我们”创建E-mail链接，E-mail地址为mailto:abc126com。（五）作品展评效果图返回（六）项目小结 通过对本项目的学习能够对几种常见的超链接加深印象并熟练操作，能设置水平导航条并设置超链接。返回（七）布置作业返回在Dreamweaver MX中，为文本“精华展示”建立到HTTP：/WWWZHANSHINET的超链接，要求超链接在新的窗口中打开。请写出操作步骤。（八）反思感悟 亲爱的同学们，通过该项目的完成，你的收获是什么亲爱的同学们，通过该项目的完成，你的收获是什么?还有疑惑吗？在实际工作中，你准备如何推广应用该知还有疑惑吗？在实际工作中，你准备如何推广应用该知识？快点动手写下来吧。识？快点动手写下来吧。返回