如何利用NVU添加到您的网站的CSS导航按钮菜单

银海软件•2016-02-18•经验之谈•

如今，它是相当常见的，看网站的一个侧面或顶部导航菜单按钮改变颜色，当你将鼠标悬停。本教程如何创建这样的导航菜单按钮，显示鼠标悬停效果，使用免费的所见即所得的网页编辑器，Nvu的。

要求
很明显，你会需要Nvu的，有一个基本的了解如何启动Nvu的，并用它简单的操作。如果你是新的，并希望了解如何获取和使用Nvu的，请阅读我初学Nvu的教程如何设计和发布您的网站与NVU http://www.thesitewizard.com/gettingstarted/nvu1.shtml

如何创建与侧翻菜单按钮按钮菜单
1.Creating导航按钮的CSS和HTML代码
转到CSS导航菜单栏按钮在http://www.thesitewizard.com/wizards/css-menu-buttons.shtml向导，并按照指示，为您的网站创建一个按钮菜单。自定义按钮，你的心的内容使用向导。该向导做所有的辛勤工作，对我们来说，通过生成你需要的一切按钮菜单。

2.Saving CSS导航菜单守则
i.Without关闭浏览器，启动一个ASCII编辑器。如果你使用的是Windows，你已经有一个名为“记事本”在您的系统。要启动“记事本”中，点击“开始”菜单，“所有程序”（或“程序”）菜单项，然后在“附件”菜单项。在该菜单中，单击“记事本”。

ii.Return到您的网页浏览器。在某处点击鼠标右键，大箱子里面下节“层叠样式表（CSS）的代码”。会弹出一个菜单。单击“全选”菜单上，项目。现在那个盒子里面的一切都应该被突出显示（选择）。

再次iii.Click鼠标右键箱内。在弹出的菜单中选择“复制”项。

iv.Switch回到你开始较早的文本编辑器（记事本或类似）。

到编辑内容v.Paste。要做到这一点在记事本中，在顶部的窗口中单击“编辑”菜单，并选择“粘贴”。

vi.Now向导中给出的名称保存该文件。要找出正确的名称，切换到浏览器窗口。文件的文件名是按上面的框中你刚才复制的段落中。

例如，使用记事本保存的CSS文件，单击“文件”菜单，然后在出现的菜单中的“另存为”项。一个对话框将会出现。在“文件名”字段中，输入名称向导，包括引号。例如，如果该向导会告诉你使用的文件名“tswnavbar.css”你必须输入该名称，包括引号，否则记事本会修改你的文件名，不告诉你。

请记住，将文件保存在同一目录作为主要的网站的页面。例如，如果您的主网页保存在文件夹“C：\我的网站”，你的CSS文件保存在同一目录。

vii.Close您的文本编辑器（记事本或其他方式）。你不会需要它。

您的网页的head部分3.Modifying
i.Start高达NVU您要修改的页面加载。

ii.At Nvu的窗口的底部，单击“源”选项卡。 Nvu的现在应该切换到源视图，在那里你可以看到实际的为你的网页的HTML源代码。

回浏览器iii.Switch。滚动到“一节的<HEAD>节”向导中的HTML代码。

iv.Click在下面的框中，鼠标右键，然后单击“全选”，在出现的菜单中。文本框中输入现在应该加以强调。

v.Click鼠标按钮，并从弹出的菜单中点击“复制”。

Nvu的vi.Switch回。点击您的鼠标在空间后立即单词的“<HEAD>”（在同一行）。按下回车键（或Mac上的返回键）。这将创建一个新的空白行后的<head>标签。

vii.From菜单上，单击“编辑”之后出现的子菜单上的“粘贴”。您刚才复制的行插入到NVU窗口。

单按“常规”选项卡按钮在Nvu的窗口底部的返回到你的网页所见即所得的视图。

4.Inserting按钮菜单HTML代码到您的网页
Nvu的i.Move光标，你要插入你的菜单页面部分。一种方法是，只需用鼠标点击你想要的现货。

ii.Switch再次返回到浏览器窗口，向下滚动到“HTML菜单按钮代码”一节。再次选择包装盒中的所有代码，并将其复制。（见上面的步骤，如果你已经忘记了该怎么办呢。）

Nvu的iii.Return。单击“插入”菜单，并选择“HTML”项目。在出现的对话框中，在框中单击鼠标右键，选择“粘贴”。

iv.Click“插入”按钮时，即可大功告成。

将v.The菜单未正确显示了这一点。要看到它应该出现的菜单中，你将有你的页面到您的网站上传或发布。如果你已经忘记了如何做到这一点在NVU，再次检查Nvu的教程的第一章。请确保选中“包括图片和其他文件”中选中您的发布页面设置。

出版vi.After，您的网页加载在你的浏览器中，你应该能够看到你的菜单中有。

技术说明：Nvu的在这方面有一些错误，所以有机会，你将不会看到的菜单，因为它应该出现在网页编辑器。不要担心，您的页面将在一个真正的浏览器中正确显示。

5.Linking thesitewizard.com
如果你愿意，我会很感激，如果你能做到这一点，还请连结thesitewizard.com“在您的网站上某处。连接使用一个“技术由thesitewizard.com”按钮的代码中的“杂项”部分精灵的输出，你可以用同样的方法，使用的按钮菜单HTML代码中插入。按钮看起来像这样：

如果你不喜欢的按钮，可以链接使用你想要的任何其他代码。建议链接到我们页面上给出一些建议。

结论
恭喜。现在您已经添加了具有专业外观的CSS / HTML到您的网站的导航菜单。如果你还没有这样做，一定要检查您的网站，使用浏览器的外观。

高端网站建设

文章关键词: 网站建设