扫一扫微信二维码
扫一扫微信二维码
本教程将告诉您如何您可以添加CSS导航菜单，有点像你看到的侧面板上thesitewizard.com，到你的网站使用Dreamweaver。菜单项将是基于文本的，但看起来像改变颜色的按钮，当鼠标悬停在。
前言
•如何使用Dreamweaver中的一些知识，这里假设。如果你不熟悉Dreamweaver，它可能是更好的使用教程如何使用Dreamweaver创建一个网站，而是因为该教程假设没有知识和通过的所有步骤与Web编辑器创建一个全功能的网站。
•如果你不有一个网站，只是收集信息，你怎么可以创建一个，这是一个好主意，启动/创建自己的网站来看看在初学者的AZ指南。还有更重要的是比其外观设计制作一个网站。
步骤添加到您的网页导航菜单
1.Generate菜单代码
你应该做的第一件事是让你想从导航菜单向导的代码。只要按照指示，为您的网站创建一个按钮菜单。该向导，可以自定义很多东西：你可以设置菜单中所使用的颜色，决定每个按钮上和网址每个按钮点上的文字，以及控制按钮的宽度。当你通过定制，向导将创建所有的代码，你需要的按钮菜单。
不要关闭浏览器，而在接下来的几个步骤。向导创建了一个几组代码，你需要分别插入到您的网站。
2.Saving CSS代码
结果页的第一部分提供了CSS代码菜单。这是菜单，控制按钮的外观的一部分。在某处点击鼠标右键，在文本框中下节“层叠样式表（CSS）的代码”。会弹出一个菜单。在该菜单中，单击“全选”项目。在框中的CSS代码现在应该被突出显示时，表明它已被选中。
在同一文本框中再次点击鼠标右键。这一次，当菜单出现时，单击“复制”项。
启动Dreamweaver中，如果你还没有这样做。不要关闭您的网页浏览器 - 离开它打开。您将需要回去以后再次到浏览器，以获得更多的代码。
选择“文件|新建”：即，单击“文件”菜单，在出现的菜单中选择“新建”项。 （注意：在本文的其余部分，我将使用相同的约定指菜单项）。
Dreamweaver的“新建文档”对话框应出现。该对话框中的“页面类型”栏下的一条线，说：“CSS”。单击以选中它。然后单击“创建”按钮。
您现在应该有一个由Dreamweaver在顶部增加两行的大多是空白文档。应该有一个文本光标闪烁在某个地方，那些最初的二，三线。
从菜单中选择“编辑|粘贴”。 （请记住，“编辑|粘贴”是指点击“编辑”菜单，然后在出现的菜单中的“粘贴”项。）刚才您选择在浏览器中的代码应该出现在窗口。
看看粘贴的代码。您应该看到字“tswnavbar.css”或的“tswtabs.css”（不带引号），顶部附近的某处。这是您需要使用您保存文件时，文件名。也给出了相同的文件名由向导（仍然应该在浏览器窗口打开）。 （对于好奇，“tswnavbar.css”使用，如果你选择使用垂直导航菜单，“tswtabs.css”如果你选择了水平的标签栏。）不要使用任何其他名称或代码将无法正常工作。
选择“文件|另存为”菜单。一个对话框将打开。类型的名称的文件，该文件前面提到的（即，无论是“tswnavbar.css”或“tswtabs.css”）。如果你已经忘记了这个名字，切换到您的网页浏览器，看看你需要使用的名称中的“层叠样式表（CSS）的代码”部分。 （提示：一个简单的方法，以确保你拼写文件名正确复制和粘贴的名字，不带引号，从浏览器。）
点击“保存”按钮。
你现在做的这个文件在Dreamweaver中。通过选择“文件”|“关闭”在Dreamweaver中关闭它。
3.Attaching到您的网页导航菜单样式表
现在加载Web页面，您要插入菜单。如果您使用的模板，您应该加载模板文件，而不是。 （如果你不知道什么是Dreamweaver的模板系统，看如何在Dreamweaver中使用模板来管理你的网站，你没有充分利用这个编辑器的力量，如果你不使用它的模板系统）。
如果这是一个新的文件，确保您保存页面，然后再继续，否则Dreamweaver将无法创建正确的网络地址（“网址”）需要你的菜单正常工作。
选择“文字”|“CSS样式”附加样式表“从菜单中。一个对话框，标题为“附加外部样式表”应该会出现。点击“浏览”按钮，选择“tswnavbar.css”或“tswtabs.css的”文件，您刚刚在上一步中保存，并点击“确定”按钮。确保“添加链接”单选框中选择，而不是在“导入”按钮。然后单击“确定”按钮关闭对话框。
4。增加了导航栏，标签栏到您的网页
再次切换到您的网页浏览器，向下滚动到节“的HTML菜单按钮守则”。只要你不担心，我也许应该说，你跳过一节标有“HTML代码的<HEAD>科”。你已经做了，在上一步中使用Dreamweaver的容易的附加样式表的方法，所以你并不需要做手工。
在任何情况下，一节“的HTML菜单按钮代码”包含了实际的菜单为你的网页。再次单击鼠标右键，在文本框中根据该条，单击“全选”突出代码。然后点击鼠标右键一次在该文本框中，选择“复制”。
切换到Dreamweaver。您现在应该寻找在您的网页或模板编辑器（因为你打开了它）。点击你要插入的按钮菜单页面上的空白点。如果有必要，按下ENTER键（或Mac上的回车键）几次就得到了一个空白的空间。如果你这样做是正确的，你应该能看到一个闪烁的文本光标在那个地方。这是你的菜单将会出现的位置。
选择“视图”|“守则”从菜单中。这改变Dreamweaver的“设计”模式，以“守则”模式。对于那些谁没有跟着我的Dreamweaver教程，设计模式可以让你创建你的页面中使用一个可视化界面。代码模式显示你的网页底层的HTML代码。您将需要使用“守则”模式插入菜单。
你的网页将不再有你习惯于熟悉的外观。然而，你的光标应该仍然是在同一地点你离开它。寻找它。
如果您创建了一些空白，刚才我建议的方式，很可能是你的文本光标闪烁在一块类似下面的代码，看起来某处。
</ P>
事实上，它可能是之间的<p>和。
使用键盘或鼠标，移动光标到现场之前所示的代码。也就是说，闪烁的文本光标现在应该之前，整个<P>一样是</ P>序列。
从菜单中选择“编辑|粘贴”。您选择并从您的浏览器复制的代码应该出现在这里。
选择“视图”|“设计”，从菜单中返回Dreamweaver的设计模式。你的菜单现在应该出现在你的网页或模板。您的网页或模板保存在你平常的方式。
5。可选步骤
虽然不是必需的，这将是很好，如果你可以确认你使用的导航菜单条形码链接到您的网站上（也许你的“致谢”或“链接”页面或东西）的某处thesitewizard.com。一种方法是使用普通的文本链接，如：
导航菜单提供的thesitewizard.com导航按钮向导。
链接的HTML代码（你可以在通常的方式，你在Dreamweaver中插入HTML代码添加到您的页面）：
导航菜单提供
<a href="http://www.thesitewizard.com/wizards/css-menu-buttons.shtml"> thesitewizard.com的导航菜单向导</ A>。
如果你喜欢的图形按钮，奇才结果页面下的“杂项”一节中有这样一个按钮的代码。
（实际上，随时链接到我任何你希望的方式，这些都只是建议）。
结论
恭喜。您已经成功具有专业外观的导航菜单添加到您的网站使用Dreamweaver。
高端网站建设
建站咨询热线
15853531888