Expression Web 2 Details
使用 Expression Web 以无代码方式实现纯 CSS 水平下拉菜单
作者：Morten Rand-Hendriksen，Pink & Yellow Media 公司创意总监
博客: http://blog.pinkandyellow.com/
菜单已经成为大多数（如果不是所有）网站必不可少的组成部分，但它对设计人员和开发人员来说仍然保持着一份神秘色彩。
什么是最完美的菜单？创建菜单时采用哪些方法更好？是应该使用 图层，还是应该使用表？基于图像的菜单如何？CSS 是不是最佳答案？对于下拉菜单，这些问题就变得更加复杂了。因为存在着这么多不同的可用选项，每种选项的支持者又那么狂热，对于 一个新来者，将难以游走于这一领域并找到合适的解决方案。
我并不自认为知道对于“什么是最好的菜单”这一问题的正确答案，但是根据多年的经验，我坚定地站在纯 CSS 下拉菜单这一边。
在本教程中，您将学习创建一个纯 CSS 下拉菜单，而且基本上无需编写一行代码。通过利用强大的 Expression Web 创新而又直观的“样式”对话框，以及 CSS 作为设计和布局工具的强大功能，可实现这一操作。Expression Web 处理 CSS 时的最大特点就在于它降低了学习、了解和创建样式代码的门槛，使没有或只有很少该代码语言经验的人能够创建坚实的基于标准的网站。许多集成 CSS 功能（包括“应用和管理样式”任务窗格、“样式”对话框和“CSS 属性”任务窗格）为入门者和高级用户同样提供了大量不同的方式来处理这种强大的代码语言，使得创建外观精美且功能丰富的网站变得前所未有地轻松。
为什么要走 CSS 路线？
由于促使越来越多的设计人员转为使用 CSS 和 XHTML 作为 Web 设计平台的原因多不胜举，因此本文就不一一阐述了。仅就我们现在探讨的菜单而言，这样做有以下几个明显优势：
- 可访问性
- 可管理性
- 自定义
可访问性: 网站的用途在于向访问者传达信息。但并不是所有访问者都使用相同的工具来查看 网站。访问者既可能是依赖于文本语音转换浏览器来访问网站的视障人士，也可能是通过老旧的计算机访问网站或者访问者的浏览器可能因安全原因而限制脚本和图像。如果您希望所有人都可以访问您的网站，则必须对您的网站进行相应的设置，从而使那些仅可查看网站的纯文本版本的用户也仍然能看到网站的全部内容。对于菜单而言，这意味着必须以纯文本形式提供菜单，并对其格式进行相应的设置，使访问者甚至无需使用任何附加功能即可轻松理解菜单并进行导航。由于纯 CSS 菜单是基于一个简单的无序列表构建的，因此用它来解决网站的可访问性问题最为理想。
可管理性: 网站通常是随时间而发展和变化的。就实际而言，这意味着最初创建的菜单可能需要随着网站所有者需求的变化而变化或扩展。从所有者以及设计人员和开发人员的利益上来看， 创建可轻松修改、扩展和重新制作的菜单而无需回到绘图板上从头开始将是一个不错的选择。 由于纯 CSS 菜单是基于一个无序列表构建的，因此只需更改列表项本身即可使菜单整体发生更改，编辑人员无需担心会出现较为复杂的问题，如图像或脚本。
自定义: 纯 CSS 菜单本身是一个无序列表，而其外观则是由 CSS 代码形式的样式定义的。这意味着设计人员可参与到工作中来，对菜单外观进行整体更改，而无需触及菜单项本身。换言之， 在进行设计和重新设计时，造成的不利影响会更小且花费的时间会更少。
说了这么多，下面让我们开始吧。
创建列表和子列表
纯 CSS 下拉菜单的优势在于其简单性：菜单本身只是一个标准的无序列表。
首先，在 Expression Web 中打开一个称作 menu.html 的新 HTML 页面，并将此页面保存到计算机中的某个位置。在页面的顶部，通过单击“ 项目符号”按钮创建一个新的无序列表，然后在其中键入一系列菜单项（每键入一个菜单项就单击一次 Enter，从而将各个菜单项分隔开）。此时， 您的页面外观应与图 1 中显示的外观类似。
以下是您必须写入的少量代码：若要创建子菜单（下拉项），则需要在列表中创建列表。通过向某一个原始列表项中添加新列表的标记即可以实现此操作。
在代码视图中，将光标置于第二个菜单项中的</li> 标记之前，然后按 Enter 以创建一个新行。 若要创建新的子菜单，请键入“<ul>”。智能感知功能将自动为您添加结束标记“</ul>”。 现在您已在一个原始菜单项中创建了一个新列表（请参见图 2）。
若要创建子菜单项，请返回设计视图。此时，您将看到第二个菜单项下方已插入一个新的缩进行。通过将光标置于此新行上并键入新的菜单项名称，系统会自动创建一个新列表项。在您按 Enter 之后，您就在此新子菜单中创建了与图 3 中类似的新项。
通过重复执行此过程来创建一些与上述子菜单类似的子菜单，从而让您的菜单中包含一些实质性内容。
完成菜单的基本结构之后，您可以随时切换到设计视图。
将每个项目都转换为一个超链接
下一个步骤是将不同的项目转换为链接。由于我们没有用于链接的目标位置，因此我们将项目链接回当前页面。若要执行此操作，最简单的方法是 Common Toolbar上的“Insert Hyperlink”按钮（图 4）
选择第一个项目中的文本，并单击“插入超链接”按钮。这将打开“插入超链接”对话框。在对话框中选择当前页面 (menu.html) 并单击“确定”（图 5）。对每个菜单项重复此过程，直到它们全部成为超链接。
现在，您就具有了一个包含子菜单的完全可以工作的菜单。由此开始，您可以使用 CSS 为菜单设计任意所需样式。菜单分为垂直菜单和水平菜单。在本教程中，您将学习如何构建这两类菜单，这样您就可以从中选择自己更喜欢的菜单样式了。
创建并附加外部样式表
Expression Web 的一大主要功能是能够像处理内部样式一样处理外部样式表。换言之，您无需离开附加了外部样式表的文档，即可在外部样式表中创建、修改和删除样式。这将使设计人员和开发人员（无论其技术水平如何）工作起来更加轻松。
若要创建新的样式表，请依次转到“文件, 新建 ”和“CSS”。将新的 CSS 文件保存到用于 保存 menu.html 页面的相同文件夹中，并将此文件命名为drop-down.css。打开 menu.html 文件之后，单击“管理样式”任务窗格中的“附加样式表”按钮（图 6）。这将打开“附加样式表”对话框。使用浏览按钮找到 drop-down.css 文件，并单击“确定”以附加样式表（图 7）。现在您就可以从 menu.html 文件内将样式置于外部 drop-down.css 文件中了。
重置衬距和边距
首先，去除无序列表中的固有样式。如果未为 ul 类明确指定左衬距和边距，则 Web 浏览器会假定每个列表项将相对页面上的其他文本缩进。若要解决此问题，您必须将 ul 类的衬距和边距设 置为 0：
打开 menu.html 文件之后，单击“管理样式”任务窗格中的“附加样式表 ”按钮（图 6）。 这将打开“附加样式表”对话框。使用浏览按钮找到 drop-down.css 文件，并单击“确定”以附加样式表（图 7）。现在您就可以从 menu.html 文件内将样式置于外部 drop-down.css 文件中了。
在“选择器”框中键入“ul”或从下拉列表中查找 ul。这意味着此样式将影响关联页中<ul>标记的所有实例。“选择器”的正下方有一个名为“定义位置”的框。您可以在此框中定义用来放置样式代码的位置。默认情况下，此样式代码将放置在当前页中，这表示 CSS 代码将在 HTML 页的<head> 标记内结束。从下拉菜单中选择“现有样式表”，并使用“URL”字段旁边的“浏览”按钮以导航到刚刚创建的 drop-down.css 文件。现在样式将会放置在外部样式表中，并且仍与您正在使用的 HTML 页面保持关联。
若要重置菜单项的衬距和边距，请转到“方框”类别并将“衬距 ”和 “上边距”设置为“0”。 保持“全部相同”框处于选中状态以重置所有值。此时，“新建样式”对话框的外观应与图 8 类似
单击“确定”，您将会看到主菜单项和子菜单项现在均与页面的左侧对齐且没有任何 缩进。
也许您会问：“为什么我必须同时重置衬距both边距呢？”下面我来告诉你答案：并非所有 Web 浏览器都是按照同一方式创建的。Firefox、Opera、Google Chrome 和 Safari 使用 “边距”属性来缩进列表项，而 Internet Explorer 使用“衬距”属性来缩进列表项。 因此，为了确保列表在所有浏览器中以相同方式呈现，您必须同时设置衬距和边距。
通过设置主菜单样式，使列表水平放置
下一个步骤是“翻转”菜单，将其从一个垂直列表变为一个水平列表。通过设置<li> 标记内包含的主菜单列表项的样式可以实现此操作。
单击“管理样式”任务窗格中的“新建样式”按钮以创建一个新样式，并将其选择器名称指定为“ul li”。确保像以前一样在 drop-down.css 文件中定义新样式。
从技术上说，您可以将该样式称为“li”，但在 CSS 中，通常还是对其进行一些细微管理为好：如果样式选择器设置为“li”，则该样式将应用于所有列表项，而不论这些列表项是在无序列表 (<ul>) 中还是在有序列表 (<ol>) 中。通过使选择器更加具体化，您可以为每类列表创建不同的自定义样式。
若要使菜单在屏幕上水平对齐并达到令人满意的视觉效果，您需要完成以下任务：使列表项水平对齐，定义每个行项目的宽度以及去除每个项目前面的项目符号或“圆点”。上述所有任务都可以在 ul li 样式中完成：
若要将列表项重新与水平面对齐，请转到布局类别，将“显示”属性设置为“嵌入式”，并将“浮动”属性设置为“左”。单击“应用”，此时您将看到所有列表项是一个挨着一个排列的，但列表看起来很零乱。若要稍微“整理”一下列表，请转到“位置”类别，并将“宽度”属性设置为“150px”。这将为每个列表项设置一个相同的宽度。
确切的宽度取决于您希望每个按钮所具有的宽度以及每个按钮中包含的文本的数量。如果您将按钮宽度设置得太小，则文本将会“跳”到下一行，从而使按钮具有两行文本而不是一行文本。
若要去除项目符号，请转到“列表”类别，并将“列表样式类型”属性设置为“无”。 单击“确定”，最终会显示类似于图 9 中所示内容的菜单。
现在菜单已正确对齐，您应为菜单添加一些样式，使其具有更好的外观。在 CSS 中，您定义的样式将应用于受影响内容的所有实例（层叠中尽可能高的位置），因此应在 ul li 样式中定义如字体系列和字号这样的属性：
在“管理样式”任务窗格中，右键单击 ul li 样式并选择“修改样式”。这将重新打开先前使用的同一对话框，您可以在相同样式中更改或添加属性。在“字体”下，将“字体系列”属性设置为“Arial, Helvetica, sans-serif”，将“字体大小”设置为“0.9em”，并将“文本转换”设置为 “大写”（图 11）。除非指定其他内容，否则这些设置将立即应用于列表项内的所有文本。 最后，为每个菜单项提供多一点的“活动空间”，再次转到“位置”类别，并将“高度” 属性设置为“30px”。稍后，此步骤的作用就会体现出来。
此时，最好是在多个浏览器中测试页面以确保所有内容按预期方式出现。保存 menu.html 页面后，Expression Web 将弹出一个“保存嵌入式文件”对话框（图 12），询问您是否要保存对外部文件（在本示例中为 drop-down.css 样式表）所做的更改。单击“确定”并按 F12 以在默认浏览器中打开页面。
为链接设置样式
虽然现在菜单已正确对齐，但仍有必要使它在外观上更吸引人。链接全都是蓝色的，还带有丑陋的下划线，且没有背景色。为了给我们的内容增添某种风格，我们将为链接本身创建专用样式：
再次使用“新建样式”按钮，打开“新建样式”对话框，并将该样式在“选择器”中显示的名称指定为“ul li a”。此时，该样式将影响无序列表中列表项内的所有链接。
首先，给链接添加背景色，并去掉下划线：在“背景”类别下，通过单击文本字段旁边的颜色框并打开“其他颜色”对话框，将“背景颜色”属性设置为“灰色”((#808080))（图 13）。然后转到“字体”类别，并使用下拉菜单将“颜色”设置为“白色”((#FFFFFF))。为去掉下划线，请选中 “文本效果”属性下的“无”框。单击“确定”以应用更改，您将会发现有一点问题：背景仅覆盖了文本本身，而在每项的周围留下许多空白（图 14）。
要解决这个问题，需要增加链接覆盖的面积。通过定义链接的高度和宽度以匹配您先前创建的列表项框，即可以实现此操作。在“管理样式”任务窗格中，右键单击 ul li a 样式并选择“修改样式”以返回到“修改样式”对话框。
要设置链接的高度，请转到“块”类别并将“行高”属性设置为“30px”以匹配您先前定义的 ul li 样式的“高度”属性。使用“行高”属性而不是“高度”属性的原因在于，“行高”会自动将文本垂直居中放置。 如果您使用“高度”，将不得不使用“衬距”手动设置垂直放置位置。 若要设置宽度，请转到“位置”类别，并将“宽度”设置为相匹配的“150px”。最后，为“填写”该地区的背景颜色， 点 布局 类设置 块.
此时，单击“应用”后，按钮将具有正确的大小，不过文本将向左侧对齐。若要使文本从左边缘缩进，请转到“
使链接做出反应
如果此时在浏览器中测试您的页面，将会发现菜单外观很不错，但将鼠标悬停在按钮上时， 按钮并没有反应。为此，需要为链接建立一个伪类。伪类是由用户交互触发的类，而不是 一直显示的类。伪类应用于类似于定位点（链接）的带有冒号的选择器，如下所示：
a:hover – 当鼠标悬停于链接上方时触发
a:visited – 当已访问过链接时触发
在本例中，我们需要为链接的悬停状态设置一个单独的样式。与前面一样创建一个新样式，并将其选择器名称设置为“ul li a:hover”。转到“背景”类别并将“背景颜色”设置为“#666666”。当鼠标悬停在按钮上时，这会将背景色更改为更暗的灰色。单击“确定”，保存页面，并在浏览器中进行测试以确保按钮会做出反应。图 15 显示了当鼠标悬停在其中一个按钮上时，菜单在 Firefox 中的显示效果。
请注意，不能在 Expression Web 的设计视图中测试伪类。必须在实际的浏览器中测试以查看它们是否起作用
不同菜单不同样式
现在，主菜单和子菜单项的外观全部都一样。理想情况下，您可能希望它们有些不同，以便以视觉方式告知访问者正在访问不同的元素。通过进一步微调样式可以实现此目标：
创建一个新样式，并将其选择器名称设置为“ul li ul li a”。此选择器将只影响如下列表项中的链接：这些列表项包含在一个无序列表中，而该无序列表又包含在另一个无序列表的列表项中。这有点拗口，但效果非常好。转到“背景”类别并将“背景颜色”设置为“#666666”。您可能会注意到，这与您刚才定义的悬停状态的颜色相同。很快您就会明白其中的原因。单击“确定”以应用此样式，并创建一个选择器名为“ul li ul li a:hover”的新样式。将此样式的“背景颜色”设置为 “#333333”，并单击“确定”以应用此样式。
此时您应有 6 个样式，一个比一个更具体。保存页面，并再次在浏览器中进行测试确保这些样式都起作用。
这都非常好，但我所要的是一个下拉菜单
此时，您可能会自问如上的问题。最后，下面就是答案：为了显示和隐藏子菜单，我们将结合可见性属性来使用 :hover 伪类以实现某种 CSS 技巧：
首先，隐藏子菜单。创建一个新样式，并将其选择器名称设置为“ul li ul”。此样式将影响所有子菜单。在“布局”类别下找到“可视性”属性，将其设置为“隐藏”。这会从屏幕隐藏子菜单，也不能通过鼠标单击子菜单。
若要使其再次可见，请创建一个新样式并将其选择器设置为“ul li:hover ul”。请注意，:hover 伪类位于第二个无序列表之前的第一个列表项上。此样式将只影响无序列表内当前由鼠标悬停于其上的列表项下的无序列表。转到“布局”类别并将“可视性”属性设置为“可见”，如图 16 中所示。单击“确定”以应用新样式并保存所有更改。
此时，当在浏览器中测试页面时，您将会发现子菜单不可见，直到您将鼠标悬停到主菜单按钮上方时才会出现。图 17 显示在 Opera 中完全起作用的纯 CSS 下拉菜单。
菜单适用于几乎所有的浏览器 ...
此处所示的纯 CSS 下拉菜单已经过测试，可以在 Microsoft Internet Explorer 7、Mozilla Firefox、Opera、Safari for Windows、Google Chrome 和其他一些浏览器中工作。但是，下拉菜单功能在仍被许多人使用的旧版 IE － Internet Explorer 6 (IE6) 中不起作用。这是因为 IE6 不支持附加到非定位元素（如列表项）的伪类。通过使用 JavaScripts 可以绕过这一问题，但这会失去原解决方案的优雅性，而且还会引入新的问题。有些人建议在进行设计时仍需要考虑 IE6，但我不同意。IE7 问世已经有 2 年了，在未来几个月内，Microsoft 将推出 IE8，因此针对 IE6 这样老的浏览器进行设计，有点像仅因为某些人还没有 DVD 播放器就得发布支持 VHS 的 Dark Night 一样。
结论
纯 CSS 下拉菜单是干净、简单、优雅的菜单，它易于构建、修改和编辑，既方便设计人员，也方便最终用户。因为它基于简单的无序列表结构，最终用户可以轻松添加、删除或编辑菜单项，而无需担心图形或其他非内容元素。同样，由于样式设置是与内容本身完全分开的，因此可以轻松对菜单样式进行重新设置和设计，而不会干扰内容。由 Expression Web 所生成的代码是 100% 标准兼容的，并且在大多数（如果不是所有）浏览器和平台上显示相同的外观。正如我在本文开头承诺的那样，它几乎无需编写或编辑任何代码即可实现构建、样式设置和修改工作。
Morten Rand-Hendriksen 是 Pink & Yellow Media 的老板和创意总监，这是一家位于（加拿大） 温哥华的数字媒体和设计公司，专注于中小型业务。在 2007 年听了有关 Microsoft Expression 套件的介绍后，他改变了公司的技术层次，现在将 Expression Web 2 作为他们唯一的 Web 开发和部署平台。Morten 是 Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours 一书的作者，他还撰写了一些有关 Expression Web、CSS 及其他设计相关主题的博客，网址为： http://blog.pinkandyellow.com