DreamWeaver-cs6学习笔记第10课处理导航汇总

第10课 处理导航1、超链接基础知识：①超链接（或链接）是对Internet 上或者你自己的计算机内的可用资源的引用。

超链接创建通过HTML 或者你使用的程序设计语言指定的交互式行为，并通过浏览器或者其他应用程序启用。

HTML 超链接由锚记元素<a>及一个或多个属性组成如图示： ②内部超链接是把用户带到相同文档、相同文件夹或硬盘驱动器中存储的另一个文档的超链接，而外部超链接是把用户带到硬盘驱动器、Web 站点或Web 主机外面的文档资源。

都是通过<a>锚记元素嵌入在HTML 中，这个元素指定超链接的目的地的地址或目标，并且可以使用几个属性指定它的工作方式。

③相对超链接就是引用相对于当前文档存储的目标，往往包括资源名称，也许还包括存储它的文件夹比如logo.jpg 或images/logo.jpg 。

绝对超链接引用绝对路径的资源，常用于引用站点外面的资源，包括目标完整URL ，如/index.jspa ，它可以把用户指引到特定的文件或者只是站点内的某个文件夹。

相对链接书写起来更快、更容易，但是如果文档保存在Web 站点中的不同文件夹中或者不同位置，它们可能不会工作。

绝对链接则没有此限制，但文档或文件夹或重命名时则会失败。

那么，为站点内的资源使用相对链接，为站点外的资源使用绝对链接。

2、创建内部超链接：①在“链接”框中输入文档名进行链接：打开文档，选取要添加链接的文本如Home （如是从模板创建的文档，此文本不是可编辑区域而不能选取，则需要打开模板选取要添加链接的文本如Home 进行设置后更新）或图像，在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”，将此符号换成“../index.html ”回车则可。

但是还没有主页；②在“链接”框后浏览窗中选择文档名进行链接：打开文档，选取要添加链接的文本如Home （如是从模板创建的文档，此文本不是可编辑区域而不能选取，则需要打开模板选取要添加链接的文本如Home 进行设置后更新）或图像，在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”，点此框后的“浏览文件图标”，从站点根文件夹中选择文件，确保“相对于”框中设置为“文档”，确定则可，则“#”变成文件名了。

③拖动“链接”框后的指向文件到要链接的文件进行链接：选择要链接的文本（可以从一个字符到整个段落）或图像，打开文件面板，找到要链接的文件，将“属性”检查器中“HTML ”项的指向文件符拖到要链接的文件处则可。

如何要链接的文件还包含在某个文件夹中，则可把“指向文件”图标拖到该文件夹上并且按住它，还可上下移到找到该文件。

④注意：如果是编辑模板则会弹出更新窗，？但是我的会重复弹出更新窗？；？链接的文件要在站点的根目录下才行？。

通常，利用超链接格式化的图像将显示蓝色边框，类似于加蓝色下划线的文本链接。

但是布局中带有的预先定义的CSS 包括一个a img 规则，它把这个默认的边框设置为“无”。

如果在浏览时单击链接要弹出新的页面而不是新页面替换原来页面，则要在在“属性”检查器中“HTML ”项的“目标”框中输入_blank3、创建外部链接：选取要创建链接的文本或图像，在“属性”检查器中“HTML ”项的“链接”框中输入文件的路径及名或者是URL （可从浏览器中搜索复制而来）。

4、建立电子邮件链接：①电子邮件链接不是把你带到另一个页面，而是打开访问者的电子邮件程序。

它可以为访问者创建自动的、预先编写好地址的电子邮件消息，用于接收客户反馈、产品订单或者其他重要的通信。

电子邮件链接的代码稍微不同于正常的超链接，DW 可以为你自动创建正确的代码。

②选取要创建链接的文本（不能是图像），点菜单“插入－电子邮件链接”（也可是“插入”面板的“常用”功能中点）弹出“电子邮件链接”窗，在“文本”框中自动出现选择的文本，在“电子邮件”框中输入电子邮件地址（如412385328@）后点确定则可，保存后在浏览器中预览测试，弹出窗口警告：因为默认邮件客户端没有正确安装，所以无法执行该操作。

③基于客户的功能与服务器端功能：5、把页面元素作为目标：⑴命名锚记：①命名锚记的了解：●这种可叫内部目标链接，它含有两部分是链接本身和目标元素，随便先创建哪个部分都可以，可以在想创建链接的任何地方使用命名锚记。

●输入或选取要链接的文本如Return to Top（或标签选择器），在“链接”框中输入“#top”，通过使用#top，就创建了指向当前页面内的目标的链接。

但这个目标还不存在，DW把目标元素称为命名锚记（提示：在官官相护浏览器中，只需要输入#以启用该功能。

无论何时引用未命名锚记，浏览器都将跳转到页面顶部。

但有些浏览器将完全忽略它们。

因此使用目标元素也很重要）。

●把光标定位在标题元素上，把命名锚记置于页面顶部很重要，否则当浏览器跳转到目标时页面的一部分可能会变得模糊不清，在这种情况下，最佳的解决方案是给模板添加命名锚记，那么无论你想在哪里添加一个返回页面顶部的链接，都能够在整个站点内使用够不够锚记。

②创建命名锚记：打开模板文档，在<div.header>中插入光标（鼠标在该区域单击则可），点菜单“插入－命名锚记”（也可从“插入”面板的“常用”中点“命名锚记”），在弹出的“命名锚记”窗中“锚记名称”框中输入top确定出现锚记图标（其代码为：<a name="top" id="top"></a>），保存更新则可。

③警告：相关的锚记代码应该不会对任何文本内容或页面布局产生任何影响。

不过，在藉此类型的结构中，人们知道会发生一些奇怪的事情，如果你的页面布局由于在一个位置插入锚记代码而受到不行的影响，就尝试在另的位置插入它，也可将原来设置好的Return to Top复制过来则可（因为连同链接也一起复制）。

⑵使用ID属性：①如果要转到的地方附近有一个方便的元素可以给它添加ID属性，就不需要添加额外的代码。

②打开文档，在要创建ID元素的位置插入光标，并选取其标签选择器。

③打开“属性”检查器的“HTML”项中“ID”框的下拉菜单如图示，没有可于表格的ID，将光标插入此框后输入ID名称，在标签选择器栏选定的标签则变为其后带有“#”和ID名（如）。

④注意：可以把ID应用于任何HTML元素，在样式表中根本不必引用它们；在创建ID时，记住它们必须是唯一。

6、插入Spry菜单栏：⑴、了解Spry菜单栏：①完成的页面中的菜单允许直接导航到站点中的特定内容，这些链接被显示为垂直菜单中的子菜单。

尽管当前的菜单没有这种功能，如果你熟悉JavaScript和CSS，也可以自己把它添加到现有代码中。

但是当DW在预先构建的构件中提供了所需的一切时，构件就在浏览器中执行一组特定的功能，通过结合有HTML代码、CSS和JavaScript的程序员（另称为Ajax和Adobe的Spry框架）来支持它们。

②了解Ajax和Spry：⑵、插入并设置Spry菜单栏：①插入Spry菜单栏：打开文本，在要插入菜单的位置单击定位光标，点“插入”面板选“Spry”的“Spry菜单栏”，弹出“Spry菜单栏”窗中“请选择所需的布局”后确定则可见菜单栏如右图，上方有蓝条“MenuBar1”（有的前面还有蓝条“Spry菜单栏”）。

②为菜单外观设置做准备：选择Spry菜单构件上的蓝条（也可单击标签选择器<ul id=”MenuBar1”class=”MenuBarVertical”>或< ul#MenuBar1 .MenuBarVertical>）,属性检查器显示的界面如下图。

在自定义菜单栏前，先保存文件，如DW要求复制相关文件，单击“确定”按钮则可。

DW将在站点的根文件夹中插入一个名为“SpryAssets”的文件夹，其中包含用于任何Spry 构件的必要组件。

菜单栏所需的自定义的CSS和JavaScript文件也将被添加到这个文件夹中。

当把文件添加到文件夹中时，DW将自动把Web页面链接到它们。

③在“属性”检查器中修改菜单栏：点击第一列的“项目1”，在“文本”框中选取文本“项目1”并输入菜单文本如“Green News”替换它，并可在“链接”框中创建链接（如选择站点根目录下的news.html,则在链接框中显示“../news.html”，如果直接在链接框中输入“news.html”则不会出现“../”也是可以的。

这是由于此时处理的文件存储在站点的根文件夹中，并且不需要这个路径成分），删除其子项目；将第一列的“项目2”修改，如果没有指向的文件，也可先手动输入；将第一列的“项目3”修改（如Green Events）,设置两个子项目（如2010 Events Calendar和2010 Class Schedule）并将其链接设置为对应文件中的ID（如events.html#calendar和events.html#classes）；设置完成后测试。

（？我的不成功？）⑶、直接修改Spry菜单：A、在文档窗口中修改菜单项：①将菜单禁用样式变为列表项：光标停在菜单栏的文本处，然后单击菜单栏上的蓝条MenuBar1（或者选择标签选择器“<ulid=’MenuBar1’class=’MenuBarVertical’>”，然后在“属性”检查器点“禁用样式”（则在“设计”视图中看到显示的列表不具有CSS格式化效果）按钮，则菜单由右图左边形式变为右边样式。

显示的列表不具有CSS格式化效果。

注意列表是怎样以不同的方式格式化的（从列表项前的符号可看出），从而使菜单的主项目与与子级项目相关联。

②在文档窗口中直接添加主项目或子项目：（也可在“属性”检查器中可以添加主或子项目）在最后一个菜单项的末尾处插入光标后回车，这个新行被格式化为列表项，输入链接文本（如Green Club），选取它并在“属性”检查器中“HTML”项的“链接”框中输入“#”创建链接点位符。

如在Green Club下创建子项目，则再回车－输入文本如Member Login－选择文本后创建链接点位符－选中文本点“内缩区块”图标。

类似还可创建三级子项目，但是每下一级项目，列表项前的符号也不相同，选中此菜单文本则在标签选择器中可见多一个<ul><li>标签项。

③启用样式（与禁用样式类似）：但是在主菜单后面没有显示子菜单图标。

光标停在②中创建的菜单项上时，标签选择器显示“<a href=’#’>”,而前面的则显示“<aclass=’MenuBarItemSubmenu’href=’../events.html’>”。