Dreamweaver使您可以轻松地为您的网站创建下拉菜单。 但是像所有的HTML表单一样，它们可能有点棘手。 本教程将引导您完成在Dreamweaver中创建下拉菜单的步骤。
Dreamweaver跳转菜单
Dreamweaver 8还提供了一个向导，用于创建用于在Web站点中导航的跳转菜单。 与基本的下拉式菜单不同，当您完成后，此菜单实际上会执行某些操作。 您不必编写任何JavaScript或CGI来让您的下拉式表单正常工作。 本教程还介绍如何使用Dreamweaver 8向导创建跳转菜单。
01 20
首先创建表单
有关HTML表单和Dreamweaver的重要说明：
除了像跳转菜单这样的特殊向导外，Dreamweaver不会帮助您使HTML表单“工作”。 为此，您需要一个CGI或JavaScript。 请参阅我的教程使HTML表单工作以获取更多信息。
当您在网站上添加下拉菜单时，首先需要的是一个包围它的窗体。 在Dreamweaver中，转到插入菜单并单击表格，然后选择“表格”。
02之20
窗体显示在设计视图中
Dreamweaver在设计视图中以可视化方式显示您的表单位置，因此您知道将表单元素放在哪里。 这很重要，因为下拉菜单标签在表单元素之外无效（并且不会工作）。 正如您在图像中看到的那样，表单在设计视图中是红色虚线。
03 20
选择列表/菜单
下拉菜单在Dreamweaver中称为“列表”或“菜单”项。 所以要添加一个到你的表单，你需要进入插入菜单的表单菜单并选择“列表/菜单”。 确保您的光标位于表单框的红色虚线内。
04之20
特殊选项窗口
在Dreamweaver选项中，有一个关于辅助功能的屏幕。 我选择让Dreamweaver显示所有可访问性属性。 而这个屏幕就是这个结果。 表单是许多Web站点无法访问的地方，通过填写这五个选项，您的下拉菜单将立即变得更易于访问。
05 20
表单辅助功能
可访问性选项是：
标签
这是该领域的名称。 它将显示为表单元素旁边的文本。
写下你想要调用的下拉菜单。 这可以是下拉菜单将回答的问题或短语。
样式
HTML包含一个标签标签，用于标识浏览器的表单标签。 您的选择是将下拉菜单和标签文本与标签一起打包，以便使用标签标签上的“for”属性来标识其引用哪个表单标签，或根本不使用标签标签。
我更喜欢使用for属性，因为如果因为某些原因需要移动标签，它仍然会附加到正确的表单域。
位置
您可以在下拉菜单之前或之后放置标签。
访问密钥
这是可以与Alt或Option键一起使用以直接访问该表单字段的关键。 这使得您的表单非常容易使用，而无需鼠标。 如何在HTML中设置访问密钥
Tab索引
这是在使用键盘通过网页选项卡时应该访问表单字段的顺序。 了解Tabindex
当您更新了辅助功能选项后，请点击确定。
06年20月
选择菜单
在设计视图中显示下拉菜单后，您需要添加各种元素。 首先点击它，选择下拉菜单。 Dreamweaver将在下拉菜单中放置另一条虚线，以表明您已选择它。
07的20
菜单属性
属性菜单将变为该下拉菜单的列表/菜单属性。 在那里你可以给你的菜单一个ID（它说“选择”），决定你是否希望它是一个lis或一个菜单，从你的样式表给它一个样式类，并给下拉列表赋值。
列表和菜单有什么区别？
Dreamweaver会调用一个菜单下拉菜单，任何只允许一个选择的下拉菜单。 “列表”允许在下拉菜单中进行多项选择，并且可以多项选择。
如果您希望下拉菜单为多行高，请将其更改为“列表”类型，并且不选中“选择”框。
08 20
添加新的列表项目
要将新项目添加到菜单中，请单击“列表值...”按钮。 这将打开上述窗口。 在第一个框中输入您的项目标签。 这将显示在页面上。 如果您将该值留空，那么也将在表单中发送该值。
09年20月
添加更多并重新排序
点击加号图标添加更多项目。 如果您想在列表框中重新排列它们，请使用右侧的向上和向下箭头。
10 20
给所有物品值
正如我在步骤8中所提到的，如果您将值留空，标签将被发送到表单。 但是你可以给你所有的物品值 - 发送替代信息到你的表格。 你会用这个很多的东西，如跳跃菜单。
11 20
选择一个默认
网页默认显示哪个下拉列表首先列为默认项目。 但是如果你想选择不同的一个，在属性菜单的“最初选择”框中突出显示它。
12 20
在设计视图中查看您的列表
完成编辑属性后，Dreamweaver将以选定的默认值显示您的下拉列表。
13 20
在代码视图中查看您的列表
如果切换到代码视图，则可以看到Dreamweaver使用非常干净的代码添加了下拉菜单。 唯一的额外属性是我们添加了辅助功能选项的属性。 代码全部缩进，非常容易阅读和理解。 它甚至放入了selected =“selected”属性，因为我告诉Dreamweaver我默认编写XHTML。
14 20
保存并在浏览器中查看
如果您保存文档并在Web浏览器中查看它，则可以看到您的下拉菜单看起来就像您所期望的那样。
15 20
但它没有做任何事情
我们上面创建的菜单看起来很好，但它什么也没做。 为了让它做些什么，你需要在表单本身上设置一个表单动作，这是一个完全的其他教程。
幸运的是，Dreamweaver具有内置的下拉菜单形式，您可以立即在网站上使用，无需了解表单，CGI或脚本。 这就是所谓的跳转菜单。
Dreamweaver跳转菜单设置了一个包含名称和URL的下拉菜单。 然后，您可以选择菜单中的项目，网页将移至该位置，就像点击链接一样。
转到插入菜单并选择表格，然后跳转菜单。
20 20
跳转菜单窗口
与标准下拉菜单不同，跳转菜单打开一个新窗口，为您命名菜单项并添加有关窗体应如何工作的详细信息。
对于第一项，将文本“untitled1”更改为您希望它读取的内容，并添加该链接应该到达的URL。
20 20
将项目添加到您的跳转菜单
点击添加项目添加一个新项目到您的跳转菜单。 根据需要添加尽可能多的项目。
18 20
跳转菜单选项
一旦你添加了你想要的所有链接，你应该选择你的选项：
在中打开网址
如果您有框架集，可以在不同的框架中打开链接。 或者，您可以将主窗口的选项更改为特殊目标，以便URL将在新窗口或其他位置打开。
菜单名称
为您的菜单提供该页面的唯一ID。 这是必需的，这样脚本才能正常工作。 它也允许你在一种形式中有多个跳转菜单 - 只需给他们所有不同的名字。
在菜单后插入Go按钮
我喜欢选择它，因为有时脚本在菜单更改时不起作用。 它也更容易访问。
选择URL更改后的第一项
如果您有诸如“选择一个”之类的提示作为第一个菜单项，请选择此项。 这将确保该项目在页面上保持默认。
19 20
跳转菜单设计视图
就像使用第一个菜单一样，Dreamweaver会在设计视图中设置您的跳转菜单，并显示默认项目。 然后，您可以像其他人一样编辑下拉菜单。
如果您确实要编辑它，请确保不要更改项目上的任何ID，否则脚本可能无法使用。
20 20
在浏览器中跳转菜单
保存文件并按F12将在您的首选浏览器中显示该页面。 在那里你可以选择一个选项，点击“开始”，跳转菜单起作用！