《情景——建立某公司网站超级链接》由会员分享,可在线阅读,更多相关《情景——建立某公司网站超级链接(30页珍藏版)》请在金锄头文库上搜索。
1、第三章情景三 建立某公司网站超级链接本章主要介绍了在Dreamweaver CS5中如何创建、编辑超级链接。超级链接是网页设计的重要元素之一,通过超级链接用户可随 意访问网站内、外的网页,也可以访问Internet网络上的各类信息。本章内容通过完成某公司网站的超级链接任务来学习。具体涉及以下内容:超级链接概念 路径和URL超级链接的创建和编辑各类链接的使用Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slide
2、s for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.3.1 任务一:在网页中使用超级链接3.1.1 知识要点1. 超级链接概念超级链接就是实现文件和文件之间的相互访问,通过超级链接可以从一个网页指向另一个目标。超级链接由两部分组成:链接的载体和链接目标,载体可以是文本或媒体,目标可以是网页、图像、邮 件地址、word文档或程序。通过超级链接可以将网站内、外的网页链接在一起。Evaluation only.Evaluation only
3、. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.2. 路径和URL表示链接目标的地址就是路径,超级链接的路径有三种: (1)绝对路径:是链接目标的完整路径,包括使用的协议,例如 http:/,绝对路径通常用于站点外的文件链接。(2)相对路径:是链接目标与
4、源的相对目录关系路径。常用于同一站点内不同文件的链接,是Dreamweaver中默认的链接路径。 如图所示,index.html和gsjj.html在同一级目录内,news.html是在下级目录pages内,则index.html连接到gsjj.html的相对路径就是gsjj.html;而index.html连接到news.html的相对路径就是pages/news.html, news.html连接到index.html的相对路径就是./ index.htm。Evaluation only.Evaluation only. Created with Aspose.Slides for .NE
5、T 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.(3)站点根目录相对路径:是从站点根目录开始的路径,与链接的源端位置无关。需要先配置站点的HTTP地址(用“/”表示站点根文件夹)。URL(Uniform Resource Locator):统一资源定位符,是超级链接相互访问时标准的文件定位标示,其概念类似路径,但是它应用于网
6、页的超级链接上,所以其写法有 自己的规则。例如“http:/ 协议:/用户名密码:子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志”协议根据网络服务不同而不同,比较常用的有“HTTP(超级文本传输协议)”、“FTP(文件传输协议)”、“Telnet(远程登录)”等。顶级域名标示不同的网站类型,例如“edu”表示教育类网站、“com”表示商业机构、“org”表示非盈利组织、“gov”表示政府等。端口可以控制访问服务器的服务,通常HTTP默认端口是80,FTP默认端口是21等。Evaluation only.Evaluation only. Created with Aspo
7、se.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.3创建超级链接链接的形式:链接有多种,按照功能可分为站点内链接、站点外链接、邮件链接、锚链接、热点链接、空链接和脚本链接等。在Dreamweaver CS5中创建超级链接,先选择网页中的链接载体(文本或媒体),然后通过以下方法可以完成建立。方法
8、一:在“属性检查器”中点击“链接”属性右面的 “浏览文件”按钮,如图所示。在弹出的“选择文件”对话框中选择被链接的文档,如图所示。Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.方法二:在“属
9、性检查器”中直接拖曳 “链接”右面的 “指向文件”按钮到要链接的文 件。如图所示。Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.方法三:在“属性检查器”中的“链接”文本框中直接输入要链接的U
10、RL。例如要连接到“百度”网站,则在链接栏中输入:。方法四:在“菜单栏”中选择“插入”|“超级链接”,在弹出的“超级链接”对话框中的“文本”中输入的是链接的文字,在“链接”中输入或浏览链接的URL,如图所示。Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Co
11、pyright 20042011 Aspose Pty Ltd.4超级链接的修改和删除 (1)超级链接目标属性 链接的“属性检查器”中“目标”设定超级链接打开目标,下拉菜单中有 五个选项表示文档打开的位置,如图所示。 _blank:表示每个链接都在新浏览器窗口打开。 _new:表示在同一个新的浏览器窗口打开。 _parent:表示如果有嵌套框架,则在父框架中打开。 _self:表示在当前网页的浏览器窗口打开(默认方式)。 _top:表示在一个完整的浏览器窗口打开。(2)修改超级链接 超级链接创建完成后,若需要修改链接,在“修改”菜单中,选择“更改链接”命令 ,在弹出对话框中重新选择链接对象的路
12、径(也可以在链接属性检查器中的“链 接”栏中修改路径)。可以选中超级链接,在“属性检查器”中重新设定超级链接。 (3)删除超级链接 若要删除链接,则在“修改”菜单中,选择“删除链接”命令,可直接将链接删除, 也可以在链接“属性检查器”中的“链接”属性中把路径删除)。Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyrig
13、ht 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.3.1.2 工作任务与设计效果依据教材提供素材,利用网络资源制作所有“巨鑫房地产公司网站的页面超级链接”。网站结构如图317所示,通过导航栏我们把站点内的网页链接起来。Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.
14、0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.3.1.3 建立站内链接先建立一个“巨鑫房产”站点,将教材中“素材3”文件夹中内容复制到站点根目 录中。在Dreamweaver中打开网页index.html,如图所示。Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client
15、 Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.1设置首页与站点内其他页面的链接在index.html页面的导航栏上选中“公司简介”图像,然后在“属性检查器”中拖 曳 “链接”属性右面的按钮到“文件”面板中的gsjj.html网页,如图所示。这样就将 公司首页和公司简介两网页链接起来了,按快捷键F12,可以在浏览器中预览链接 的效果。用同样的方法可以将网站首页与其他的页面(公司规划(gsgh.html)、开发 项目(kfxm.html)、企业合作(qyhz.html))链
16、接起来。 Evaluation only.Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 20042011 Aspose Pty Ltd.Copyright 20042011 Aspose Pty Ltd.2设置站点内其他页面与首页的链接在Dreameaver 中打开gsjj.html(公司简介)页面,选择导航栏中“首页”图像 ,然后将“属性检查器”中 “链接”属性右面的 “指向文件”按钮拖曳到“文件”面板中 的index.html网页