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