DreamWeavercs6学习笔记第10课处理导航汇总.doc

《DreamWeavercs6学习笔记第10课处理导航汇总.doc》由会员分享，可在线阅读，更多相关《DreamWeavercs6学习笔记第10课处理导航汇总.doc（8页珍藏版）》请在三一办公上搜索。

1、第10课 处理导航1、超链接基础知识：超链接（或链接）是对Internet上或者你自己的计算机内的可用资源的引用。超链接创建通过HTML或者你使用的程序设计语言指定的交互式行为，并通过浏览器或者其他应用程序启用。HTML超链接由锚记元素及一个或多个属性组成如图示：a href=” textHTML元素统一资源定位器（URL）值（新浏览器窗口）封闭标签对用户可见的文本属性属性（超链接引用）内部超链接是把用户带到相同文档、相同文件夹或硬盘驱动器中存储的另一个文档的超链接，而外部超链接是把用户带到硬盘驱动器、Web站点或Web主机外面的文档资源。都是通过锚记元素嵌入在HTML中，这个元素指定超链接的

2、目的地的地址或目标，并且可以使用几个属性指定它的工作方式。相对超链接就是引用相对于当前文档存储的目标，往往包括资源名称，也许还包括存储它的文件夹比如logo.jpg或images/logo.jpg。绝对超链接引用绝对路径的资源，常用于引用站点外面的资源，包括目标完整URL，如2、创建内部超链接：在“链接”框中输入文档名进行链接：打开文档，选取要添加链接的文本如Home（如是从模板创建的文档，此文本不是可编辑区域而不能选取，则需要打开模板选取要添加链接的文本如Home进行设置后更新）或图像，在“属性”检查器中选择HTML选项卡的“链接”框中显示了一个超链接符“#”，将此符号换成“./index.

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

4、”项的指向文件符拖到要链接的文件处则可。如何要链接的文件还包含在某个文件夹中，则可把“指向文件”图标拖到该文件夹上并且按住它，还可上下移到找到该文件。注意：如果是编辑模板则会弹出更新窗，？但是我的会重复弹出更新窗？；？链接的文件要在站点的根目录下才行？。通常，利用超链接格式化的图像将显示蓝色边框，类似于加蓝色下划线的文本链接。但是布局中带有的预先定义的CSS包括一个a img规则，它把这个默认的边框设置为“无”。如果在浏览时单击链接要弹出新的页面而不是新页面替换原来页面，则要在在“属性”检查器中“HTML”项的“目标”框中输入_blank3、创建外部链接：选取要创建链接的文本或图像，在“属性”

5、检查器中“HTML”项的“链接”框中输入文件的路径及名或者是URL（可从浏览器中搜索复制而来）。4、建立电子邮件链接：电子邮件链接不是把你带到另一个页面，而是打开访问者的电子邮件程序。它可以为访问者创建自动的、预先编写好地址的电子邮件消息，用于接收客户反馈、产品订单或者其他重要的通信。电子邮件链接的代码稍微不同于正常的超链接，DW可以为你自动创建正确的代码。选取要创建链接的文本（不能是图像），点菜单“插入电子邮件链接”（也可是“插入”面板的“常用”功能中点）弹出“电子邮件链接”窗，在“文本”框中自动出现选择的文本，在“电子邮件”框中输入电子邮件地址（如412385328）后点确定则可，保存后在

6、浏览器中预览测试，弹出窗口警告：因为默认邮件客户端没有正确安装，所以无法执行该操作。基于客户的功能与服务器端功能：5、把页面元素作为目标：命名锚记：命名锚记的了解：这种可叫内部目标链接，它含有两部分是链接本身和目标元素，随便先创建哪个部分都可以，可以在想创建链接的任何地方使用命名锚记。输入或选取要链接的文本如Return to Top（或标签选择器），在“链接”框中输入“#top”，通过使用#top，就创建了指向当前页面内的目标的链接。但这个目标还不存在，DW把目标元素称为命名锚记（提示：在官官相护浏览器中，只需要输入#以启用该功能。无论何时引用未命名锚记，浏览器都将跳转到页面顶部。但有些浏览

7、器将完全忽略它们。因此使用目标元素也很重要）。把光标定位在标题元素上，把命名锚记置于页面顶部很重要，否则当浏览器跳转到目标时页面的一部分可能会变得模糊不清，在这种情况下，最佳的解决方案是给模板添加命名锚记，那么无论你想在哪里添加一个返回页面顶部的链接，都能够在整个站点内使用够不够锚记。创建命名锚记：打开模板文档，在中插入光标（鼠标在该区域单击则可），点菜单“插入命名锚记”（也可从“插入”面板的“常用”中点“命名锚记”），在弹出的“命名锚记”窗中“锚记名称”框中输入top确定出现锚记图标（其代码为：），保存更新则可。警告：相关的锚记代码应该不会对任何文本内容或页面布局产生任何影响。不过，在藉此类

8、型的结构中，人们知道会发生一些奇怪的事情，如果你的页面布局由于在一个位置插入锚记代码而受到不行的影响，就尝试在另的位置插入它，也可将原来设置好的Return to Top复制过来则可（因为连同链接也一起复制）。使用ID属性：如果要转到的地方附近有一个方便的元素可以给它添加ID属性，就不需要添加额外的代码。打开文档，在要创建ID元素的位置插入光标，并选取其标签选择器。打开“属性”检查器的“HTML”项中“ID”框的下拉菜单如图示，没有可于表格的ID，将光标插入此框后输入ID名称，在标签选择器栏选定的标签则变为其后带有“#”和ID名（如）。注意：可以把ID应用于任何HTML元素，在样式表中根本不必

9、引用它们；在创建ID时，记住它们必须是唯一。6、插入Spry菜单栏：、了解Spry菜单栏：完成的页面中的菜单允许直接导航到站点中的特定内容，这些链接被显示为垂直菜单中的子菜单。尽管当前的菜单没有这种功能，如果你熟悉JavaScript和CSS，也可以自己把它添加到现有代码中。但是当DW在预先构建的构件中提供了所需的一切时，构件就在浏览器中执行一组特定的功能，通过结合有HTML代码、CSS和JavaScript的程序员（另称为Ajax和Adobe的Spry框架）来支持它们。了解Ajax和Spry：、插入并设置Spry菜单栏：插入Spry菜单栏：打开文本，在要插入菜单的位置单击定位光标，点“插入”

10、面板选“Spry”的“Spry菜单栏”，弹出“Spry菜单栏”窗中“请选择所需的布局”后确定则可见菜单栏如右图，上方有蓝条“MenuBar1”（有的前面还有蓝条“Spry菜单栏”）。为菜单外观设置做准备：选择Spry菜单构件上的蓝条（也可单击标签选择器或）,属性检查器显示的界面如下图。在自定义菜单栏前，先保存文件，如DW要求复制相关文件，单击“确定”按钮则可。DW将在站点的根文件夹中插入一个名为“SpryAssets”的文件夹，其中包含用于任何Spry构件的必要组件。菜单栏所需的自定义的CSS和JavaScript文件也将被添加到这个文件夹中。当把文件添加到文件夹中时，DW将自动把Web页面链

11、接到它们。在“属性”检查器中修改菜单栏：点击第一列的“项目1”，在“文本”框中选取文本“项目1”并输入菜单文本如“Green News”替换它，并可在“链接”框中创建链接（如选择站点根目录下的news.html,则在链接框中显示“./news.html”，如果直接在链接框中输入“news.html”则不会出现“./”也是可以的。这是由于此时处理的文件存储在站点的根文件夹中，并且不需要这个路径成分），删除其子项目；将第一列的“项目2”修改，如果没有指向的文件，也可先手动输入；将第一列的“项目3”修改（如Green Events）,设置两个子项目（如2010 Events Calendar和201

12、0 Class Schedule）并将其链接设置为对应文件中的ID（如events.html#calendar和events.html#classes）；设置完成后测试。（？我的不成功？）、直接修改Spry菜单：A、在文档窗口中修改菜单项：将菜单禁用样式变为列表项：光标停在菜单栏的文本处，然后单击菜单栏上的蓝条MenuBar1（或者选择标签选择器“”，然后在“属性”检查器点“禁用样式”（则在“设计”视图中看到显示的列表不具有CSS格式化效果）按钮，则菜单由右图左边形式变为右边样式。显示的列表不具有CSS格式化效果。注意列表是怎样以不同的方式格式化的（从列表项前的符号可看出），从而使菜单的主项目

13、与与子级项目相关联。在文档窗口中直接添加主项目或子项目：（也可在“属性”检查器中可以添加主或子项目）在最后一个菜单项的末尾处插入光标后回车，这个新行被格式化为列表项，输入链接文本（如Green Club），选取它并在“属性”检查器中“HTML”项的“链接”框中输入“#”创建链接点位符。如在Green Club下创建子项目，则再回车输入文本如Member Login选择文本后创建链接点位符选中文本点“内缩区块”图标。类似还可创建三级子项目，但是每下一级项目，列表项前的符号也不相同，选中此菜单文本则在标签选择器中可见多一个标签项。启用样式（与禁用样式类似）：但是在主菜单后面没有显示子菜单图标。光标

14、停在中创建的菜单项上时，标签选择器显示“”,而前面的则显示“”。由于你没有使用Spry界面添加子项目，DW将不会对此新建的菜单项如“Green Club”的父元素应用所需的类，这个类为子菜单应用CSS格式化效果，包括子菜单图标。可以使用“属性”检查器应用类：在“Green Club”项目中插入光标，并选取标签选择器，然后从“类”菜单中选择“MenuBarItemSubmenu”。但是从“实时视图”中观看则没有区别。保存文件：无论何时DW保存包含Spry组件的文档，它都会为你自动在SpryAssets文件夹中插入相关的CSS和JavaScript文件。如果删除一个组件并且不再需要相关的文件，DW

15、将从文档代码中删除对它们的任何链接引用。Spry界面和自动文件管理是你希望在任何基于HTML的工作流程中使用DW的另外两个原因。em宽度的容器随文本一起缩放，文本不重排固定宽度的容器不随文本一起缩放，文本重排B、自定义Spry菜单栏的外观：Spry元素通常是由它们自己的CSS文件编排样式的。查看浏览SpryMenuBarVertical.css样式表：打开含有Spry垂直菜单栏的文档如上节做的events.html。打开CSS样式面板，则可见SpryMenuBarVertical.css样式表，展开则可观察作用效果并可随意修改它。em和ex的认识：em是图形设计中使用的一种相对度量系统，它是基

16、于站点的当前默认字体中的大写字母M的宽度。Ex是基于小写字母x的大小的试题系统。设计师在希望格式化文本容器以保留某些换行符时使用em和ex。以em指定的容器宽度在文本变大时将随着文本一起缩放。设置为固定宽度的容器在文本变大时将不会缩放；为了适应容器，将不得不使文本换行。用ul.MenuBarVertical li修改第一级项目的宽度：即ul.MenuBarVertical规则确定了菜单的最大大小，但是由于还是块级元素，菜单的宽度实际上是由不同的规则控制的。只有另一个规则指定了第一级项目的宽度设置，即ul.MenuBarVertical li，找到将其width改为180px。因为有第二个ul.

17、MenuBarVertical规则创建了1px的宽度，有可能菜单栏的位置会移到下面，以便有足够的宽度容纳它。将第二个ul.MenuBarVertical规则删除就会回到原来的位置（但是在DWcs6中即使将width改为185px也没有此现象）。CSI（犯罪现场调查员）：Dreamweaver在像中固定宽度的站点上，当结构破坏时，通常是元素之一的规范引发了冲突。如果用于两个元素的窗口中没有足够的空间，一个元素将向下移到有更多空间的位置。上面就是180px再加上第二个ul.MenuBarVertical规则创建了1px边框则共有182px而超过180px。在结构设计中，宽度、边框、边距和填充都必须

18、计算在内。修正这个问题的方法有：更改的宽度；更改的宽度；更改的宽度；更改Spry菜单栏的宽度；删除边框。菜单字体及边框（border）的设置:双击ul.MenuBarVertical li规则以编辑它。在“类型”项的“Font-size”设置为90%；在“边框”项中将Top、Right、Bottom、Left的style均设置为solid、width均设置为1px、Color分别设置为#0C0、#060、#060、#0C0。这些设置也可在“CSS样式”面板中选择ul.MenuBarVertical li规则后在其下添加border-top-style、border-top-width、bord

19、er-top-color等类似属性。修改菜单及交互的外观：双击ul.MenuBarVertical a规则，将“类型”项中的“Color”设为#FFC，将“背景”项的“Background-color”设为#090，将“方框”项的“Padding”均设为0.5em，确定。在实时视图中浏览效果。修改菜单及子菜单悬停时文本和背景颜色：在“ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus”规则和“ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSu

20、bmenuHover,ul.MenuBarVertical a.MenuBarSubmenuVisible”规则均将color设为#FFC、background-color设为#0C0。保存测试则可。使用“代码浏览器”编辑CSS：第一步选择Spry菜单构件上的蓝条（也可单击标签选择器或）,“属性”检查器显示“Spry菜单”的编辑设置界面，点第二列中的子菜单，设计器中则显示了子菜单项，光标插入子菜单处右击选“代码浏览器”（也可单击后停留几秒点、按Ctrl+Alt+N）激活“代码浏览器”并检查规则，格式化子项目宽度的规则有ul.MenuBarVertical ul和ul.MenuBarVertic

21、al ul li。第二步在“代码浏览器”窗口中单击ul.MenuBarVertical ul规则，DW自动切换到“拆分”视图，在代码中部分加载SpryMenuBarVertical.css，并且自动把光标定位在文件中ul.MenuBarVertical ul所在的那一行上。把width值改为180px。同样的方法将ul.MenuBarVertical ul li规则的width值改为180px。当然这些也可在“CSS样式”面板中修改。第三步保存所有文件，并且需要单击“刷新设计视图”图标（或按F5）以刷新“设计”视图窗口，以便查看更改的结果。7、插入Spry菜单作为“库”项目：、将Spry菜单栏

22、保存为库项目：打开含有Spry菜单栏的文件，将光标插入Spry垂直菜单栏中，选取（有时也是ul id= “MenuBar1”class=“MenuBarVertical”）标签选择器（或点此容器上方的蓝条“Spry菜单栏：MenBar1”）；打开“资源”面板，点“库”图标，然后点，可能会弹出如右图的警告。点确定则可，然后在库列表框中输入名称“SpryMenu”回车后弹出“更新文件”窗。点更新则可。注意：可能会出现一个对话框，警告由于样式表问题而导致所选的内容可能不会正确显示。记住这个菜单的样式和行为依赖于外部文件，你将不得不手动附加文件。单击“确定”按钮关闭该对话框。 Green News G

23、reen Products Green Events 2010 Event Calendar 2010 Class Schedule Green Travel Green Tips Green Club Member Login Welcome YOU 、将Spry菜单栏创建“库”项目替换原始的“库”项目：在“资源”面板的“库”项的框中双击SpryMenu打开它，切换到“代码”视图，并检查代码如图示。只会把菜单的HTML结构添加到“库”项目中，而没有包括把它创建成文件的CSS或JavaScript引用，可以在每个页面上手动利用这个“库”项目替换旧的“库”项目，但是有一个更简单的方法。选择菜单“

24、文件另存为”弹出“另存为”窗后导航到Library文件夹，并单击vertical-nav.lbi，然后单击保存。使用这种方法，Spry组件将替换文件中存储的原始菜单，你解决了这个问题，但是还有另一个问题。Spry菜单将不会像现在这样工作。Spry组件需要它们自己的CSS和JavaScript文件以及一些特定的HTML标记，以便正确地工作。单击含有Spry菜单栏的文件选项卡，把该文档调到前面，切换到“代码”视图，并且检查区域。你将发现对样式表文件（SpryMenuBarVertical.css）和JavaScript文件（SpryMenuBar.js）的引用。你需要从这个文件中复制完整的引用代码

25、，并把它们粘贴进目标文档的区域中，由于“库”项目没有区域，这意味着你不得不把引用插进模板中。将CSS和JavaScript引用插进模板：选取用于SpryMenuBarVertical.css和SpryMenuBar.js的链接引用如下框中内容，然后剪切。注意：剪切这个引用将导致垂直菜单显示为项目列表。这只会暂时发生，等到后面模板更新这个页面后，垂直菜单将恢复原状。从“资源”面板的“模板”项中打开mygreen_temp.dwt，切换到“代码”视图，并且定位文件的区域中的CSS引用。在最后一个引用的末尾插入光标，并按下回车键插入一个新行（提示：为了使引用正确工作，在代码中添加新行是不必要的，它只

26、是使标记更容易阅读。）然后将两个引用粘贴到此（注意：顺序不能颠倒），如下图。 var MenuBar1 = new Spry.Widget.MenuBar(MenuBar1, imgRight:./SpryAssets/SpryMenuBarRightHover.gif); 元素中对MenuBar1的引用，这个条目为Spry菜单加载重要的变量。依赖于你在页面上使用了多少个构件，这个元素也可能包括用于其他构件的标记。为了使之工作，必须将这个条目插入在用于Spry组件的所有标记后面的代码中，这就是为什么它位于页面底部的原因。如果这是你将在这个页面上使用的唯一构件，可以在“库”项目自身的底部插入元素

27、。对于这个示例，你将把它插入到模板中。单击含有Spry菜单栏的文件选项卡，把该文档调到前面，切换到“代码”视图，滚动到代码底部，并定位条目，如下框。注意：记住这个代码条目的位置，你将在练习末尾从events.html中删除这个引用。选取整个元素及其内容剪切。定位到模板文档代码的底部，且在封闭标签的前面插入光标并粘贴。从含有Spry菜单栏的文档中删除Spry菜单（通过在Spry菜单中插入光标，并选取标签选择器后按Deleted键，同时也从文件中删除CSS和JavaScript引用）。打开“资源”面板，如果必要，可单击“库”图标，选择“vertical-nav”并单击“插入”按钮，Spry菜单将再

28、次显示为项目列表如图，由于模板还没有插入CSS和JavaScript引用，菜单将不会出现或者不会正确地工作。保存原含有Spry菜单栏的文件。单击mygreen_temp.dwt的选项卡，把该文档调到前面，保存模板，并更新所有文件。出现“更新页面”对话框，并且报告更新了多少个页面。模板根据需要添加了CSS和JavaScript引用，但是工作还没有完成，必须单独更新“库”项目。关闭mygreen_temp.dwt，如果必要，可打开contact_us.html，并切换到“设计”视图。然后在“实时”视力中预览页面。在contact_us.html仍然会显示旧菜单，因为原来替换旧的“库”项目的保存操作

29、不会自动更新受影响的页面。直到下一次打开“库”项目并对它执行更改，“库”项目才会更新，或者除非手动调用更新。再次单击“实时视图”按钮，返回到“设计”视图，在“资源”面板中，单击“库”图标。右键单击vertical-nav，并从上下文菜单中选择“更新站点”。在“更新页面”对话框中，单击“开始”按钮。“更新页面”对话框将报告更新了多少个页面，该报告应该包括当前站点中的所有页面。在默认的浏览器中预览contact_us.html文件，Spry菜单将被完全格式化，并且像期望的那样工作。注意：为了使这个Spry菜单正确地工作，将同时需要由模板提供的“库”项目标记和CSS引用，记住这一点很重要。“库”项目

30、自身是不完整的，不应该在基于模板的页面外面使用它。除非你如这个练习中所解释的那样手动添加所需的标记。保存所有文件。附：站点设计的替代方法：在“库”项目中存储菜单的一个缺点是：在“属性”检查器将失去对非常酷的Spry界面的支持。由此，你将不得不完全手工编辑菜单。考虑到这一点，值得花费时间和精力修改侧栏的设计，把Spry菜单移出“库”项目，并把它完全移入模板文件中，如右图示。一种替代方法是修改可编辑区域，使得它不再包含整个侧栏，如上图中右边的示例所示。在具有数百或者数千个页面的大型站点中，许多设计师更喜欢把菜单实现为服务器端包括（SSI），每次在浏览器中加载页面时，SSI都会自动更新，从而消除了无论何时更改菜单都将站点上的每个文件的需要。8、检查页面：、检查链接：打开要检查的文件，选择菜单“文件检查页链接”，在状态栏的下面打开“链接检查器”面板。如果有，其中报告会显示指向断掉的链接、为不存在的页面创建的其他链接和指向外部站点的断掉的链接三个方面的内容。、检查浏览器兼容性：打开