搜索
DW项目四电子商务网页制作链接与导航•举例说明路径的概念；•列举超链接的分类；•会设置超链接；•描述导航的相关知识。项目目标链接和路径正确描述从链接源所在文档到链接目标之间的文件路径，对创建超链接至关重要。描述方式有三种：绝对路径、文档相对路径和站点根目录相对路径。这三种路径各有特点，灵活使用这些路径能起到事半功倍的效果。路径知识看上去略显枯燥，但却是建立超链接的基础，许多超链接错误都是因为路径问题导致的，所以请静下心来认真学习这部分内容！小贴士绝对路径绝对路径提供了链接目标文档的完整的URL地址。如：，必须使用绝对路径。如在制作友情链接时，需要链接到另一个网站的网页，这时就要使用绝对路径。绝对路径也用于规模较大的网站中，因为大型网站并不是由一个域名构成的单个网站，而是由多个网站构成的网站群，如网易（www.163.com），就有新闻（news.163.com）、体育（sports.163.com）、娱乐（ent.163.com）等多个分站，各分站有独立的编辑团队，网站之间的超链接当然只能使用绝对路径了。然而，对于仅有一个域名的小型网站而言，虽然也可以使用绝对路径，但如果网站改变域名，所有使用绝对路径的链接就立刻失效了，因此小型网站没有必要使用绝对路径。相对路径文档相对路径描述了链接源与链接目标之间的相对位置，在网站内部各页面的链接中使用相对路径最合适，因为相对路径不但描述简洁，而且与站点目录所在的位置无关，当站点根目录位置发生改变时，不会影响到站点内链接的网页。•当链接源与链接目标在同一文件夹中时，描述相对路径只需要指明链接目标的文件名即可，例如在index.html中创建指向login.html的链接，可使用相对路径：“login.html”。相对路径•当链接目标在链接源下一级目录中时，可直接指明目录名称和文档名称，例如在index.html中创建指向cloth.html的链接，可使用相对路径：“list/cloth.html”。•当链接目标在链接源上一级目录中时，可用“..”符号来表示当前文件的父目录，使用多个“..”可以表示更高的父级目录，例如在cloth.html中创建指向index.html的链接，可使用相对路径：“../index.html”。站点根目录相对路径基于站点根目录的相对路径从站点的根目录开始，通常使用“/”表示根目录，所有基于站点根目录相对路径均以“/”开始，如：/list/cloth.html。由此可见，站点根目录相对路径同绝对路径十分相似，只是它略去了绝对路径中的协议部分。通常在站点规模稍大，需要多个设计者合作建设，并且使用模板和组件进行设计时，站点根目录相对路径被广泛使用。假设站点网址为，在index.html文档中，创建指向list文件夹中的cloth.html文档的链接，使用三种路径形式描述这个链接目标如下：绝对路径：：list/cloth.html站点根目录相对路径：/list/cloth.html站点根目录相对路径假设站点网址为，在index.html文档中，创建指向list文件夹中的cloth.html文档的链接，使用三种路径形式描述这个链接目标如下：绝对路径：：list/cloth.html站点根目录相对路径：/list/cloth.html超级链接的分类超链接按链接目标的不同分为五种类型：序号分类链接目标1网络链接WWW上的某个Web网站、网页或其他资源2本地链接当前网站中的一个网页或其他资源3电子邮件链接一个电子邮件地址4锚记链接本网页中的一个“锚记”5脚本链接执行JavaScript代码或调用JavaScript函数超级链接的分类超链接按链接源的不同分为三种类型：序号分类链接目标1文本链接一个文本，是最基本的链接形式2图像链接一个图像3图像映射图像中包含的各种不同的热点区域，每个热点区域都能链接到一个单独的链接目标上创建本地超链接的常用方法1．使用属性面板创建超链接选择要作为链接源的文本或图片，在属性面板中会有“链接”文本框、“指向文件”按钮和“浏览文件”按钮。将链接目标的路径直接输入到链接文本框中可以创建超链接。点击“浏览文件”按钮可以打开“选择文件”对话框，可以浏览并指定链接目标文档以创建超链接。创建本地超链接的常用方法点击“指向文件”按钮并拖动到“文件”面板中的某个文件也可以将该文件设置为链接目标。创建本地超链接的常用方法2．使用“超级链接”命令创建超链接选择要作为链接源的文本或图片，然后打开“插入”菜单，选择“超级链接”命令，或者单击插入栏中“常用”类别中的“超级链接”按钮，可以打开“超级链接”对话框，在对话框里进行相应设置以创建超链接。超级链接的目标窗口当浏览者点击网页上的超级链接后会跳转到链接目标页面。当新页面出现时，可能会出现三种情况：（1）原有的页面被覆盖；（2）原有的网页不被覆盖，弹出一个新的窗口；（3）原有的网页内部分内容被替换。这三种情况的出现是由于对超级链接的目标窗口进行了设置。在设置超级链接时会有一个“目标”下拉菜单，其中可以设置4种目标超级链接的目标窗口•“_blank”：将文件载入新的无标题浏览器窗口中；•“_parent”：将文件载入到上级框架集或包含该链接的框架窗口中；•“_self”：将文件载入到相同框架式窗口中，此目标是默认的，通过不需要量指定；•“_top”：将文件载入到整个浏览器窗口中，将取消所有框架。创建电子邮件超级链接在网页中经常可以看到类似“联系我们”这样的超链接，单击后会弹出本机所安装的邮件发送程序，而且此时的收件人是已经填写好的，这种链接就是电子邮件链接。创建电子邮件超级链接的方法如下：（1）选择需要创建链接的内容，在“插入栏”中选择“常用”类别，单击“电子邮件链接”按钮，打开“电子邮件链接”命令创建电子邮件链接。创建电子邮件超级链接（2）在“电子邮件链接”对话框中输入需要链接的电子邮件地址，单击确定。（3）在属性面板中可以看到链接地址中有“mailto：（+邮件地址）”，表示创建完成。创建锚记链接锚记链接又称书签链接，一般用在同一个页面中，用于在文档中设置标记，这种标记通常放在指定的位置，创建锚记链接后，便可迅速链接到指定的位置。比如，一个篇幅较长的商品介绍网页，需要不断地滚动才能看到下面的信息，当浏览者阅读完毕后，希望能快速地回到文章开头，这时可以先在文章开头放置一个锚记，在文章尾部添加一个链接指向锚记，浏览时点击此链接就能迅速回到网页开头。亲，你一定注意到了，锚记是在制作超链接前就放置好了的。创建锚记链接创建锚记链接的方法如下：（1）选择需要被链接到锚记的位置，在“插入栏”中选择“常用”类别，单击“命名锚记”按钮，打开“命名锚记”命令创建锚记链接。（2）在“命名锚记”对话框中输入创建的命名锚记的名称，单击确定。创建锚记链接（3）选中需要创建锚记链接的内容，在属性面板的“链接”文本框中输入“#”，后接需要链接到的命名锚记的名字，创建完成。如需要链接到其他页面中命名锚记，则需要“链接”文本框中先输入其他页面的地址，然后在地址后输入“#”和命名锚记的名称。清除超级链接清除超级链接的方法非常简单，只需要先选定超级链接对象，然后在属性面板中将“链接”文本框中的地址删除即可。电子商务网站导航的组织与分类影响电子商务网站成功与否的关键因素是网站的可用性，即高效提供给浏览者满意的产品或服务，良好的导航设计是提高网站可用性的有力措施。如果浏览者知道各个信息都在网站的什么位置，他们就会感到更强的控制感、更舒服，也就有可能浏览更多的页面来寻找他们所需的信息内容。用行话来说这叫做使“用户对于网页的粘滞系数增大。”小贴士电子商务网站的导航通常有以下几种类型：（1）网站栏目导航，如图4-14所示。为浏览者提供该网站的主要栏目版块导航。电子商务网站导航的组织与分类（2）站内功能服务导航此导航为浏览者提供电子商务网站的功能服务，如注册、购物、账户信息等。此导航具有为浏览者提供帮助功能的导航。电子商务网站导航的组织与分类（3）产品分类导航，如图4-17所示。这是电子商务网站导航中展示产品和服务的部分，在网站导航中所占比例较大。电子商务网站导航的组织与分类（4）当前位置导航，如图4-18所示，标示浏览者当前所在位置，以避免浏览者迷航。（5）网站持有方信息导航，如图4-19所示。有关网站持有方信息的链接集群。电子商务网站的导航设计原则电子商务网站为用户提供了十分详尽、方便的信息导航，浏览者可以通过各种途径方便地查找到要购买的商品，这说明网站的结构和导航确定了信息查找方式，对于每条信息来说，查找的路径越多，它被阅读的可能性就越大，这也是提高网站浏览量的一种好办法。但对于用户来说，过多的入口容易抓不住重点而忽略真正重要的链接，甚至可能在网站内部迷失方向。因此，链接数量过多会使用户混乱，降低重要链接的被点击率。所以要在链接数量的多少上取得平衡，同时要进行合理组织和规划，一般而言，主要功能和导航链接尽量不要超过10个。找到一种解决方案。把握链接之中的重点和层次是设计的关键。电子商务网站的导航设计原则商务网站链接与导航的设计要点：（1）对商务网站的导航进行适当的组织与分类。如图4-20所示，通常以产品导航为主导航，另外还兼有如联系方式和意见反馈等关于网站持有方的信息导航，以及购物车和密码登录等有关购物程序的功能导航。（2）突出重点链接。（3）让浏览者可对链接的相互关系以及点击后的效果产生正确的预期。（4）降低页面的长度或者进行有效的分类和分页。站内服务功能导航网站栏目导航当前位置导航产品介绍导航网站服务功能导航网站持有方信息导航将浏览者引向重要链接的方法有经验的浏览者已经对链接有了先入为主的认知定式。并且大多数浏览者有着基本相同的使用习惯。因此，在设计中可以根据浏览者的使用经验，通过强化重要链接把浏览者引向重要的页面，在这个层面上链接与导航设计的关键是（1）清晰明确，有很强的点击感，让浏览者产生点击的欲望。（2）尊重浏览者现有的对链接的认识习惯，如有下划线的文字、动画图标、按钮等。（3）必要时对链接进行解释，如在“用户注册”按钮旁边添加“新用户点击此处注册”的说明文字。项目总结本项目介绍了路径的基础知识，这是制作超链接的基础。路径分为绝对路径、文档相对路径、站点根目录相对路径。超链接是网页的灵魂，它将WWW上的不同的站点联系起来，浏览者可以使用链接从一个文档跳到另一个文档，按链接目标分，超链接被分为四类：本地链接、网络链接、电子邮件链接和锚记链接。创建网站的导航结构是由设计者完成的，网站信息十分庞杂，容易造成浏览者的信息迷航，因此导航的设计尤为重要，本项目在最后介绍了商务网站导航设计的原则，希望你能认真体会，并贯彻到设计中去。推荐资源《网页导航栏设计模式》：《导航栏设计欣赏》：《导航栏图片素材》：！