Quickly make CSS navigation menu teach _css/html

with the concept of Web page standardization, more and more websites adopt the CSS architecture. The CSS architecture of the Web page not only conforms to the standard, but also very beautiful. Standardized web pages start with a nice CSS menu. As we all know, CSS menus are a piece of code, a piece of code written out, to create a beautiful menu, today to introduce you a small software: CSS Tab designer!

CSS Tab Designer is a visual software that uses CSS to design navigation menus, with more than 60 different styles built into the software, so you can quickly create a CSS menu by modifying a ready-made style template. In particular, the software-generated XHTML code adheres strictly to Web standards, creating CSS menus that are compatible with a variety of mainstream browsers, whether the system comes with Internet Explorer or Firefox, Opera, or Netscape.

The CSS Tab Designer is simple, with three-column layouts for the main interface: items, styles (Tab styles), previews (preview), and almost all of the operations are done in the main interface.

The steps to create a new menu are simple, with more than 60 styles of menu styles prepared in Style (tab), select the desired style, then click "Fill with Samples" in "items" on the left, and you can immediately preview ( Preview) "To see the effect, the menu is generated.

Of course, the menu items in the software's built-in style templates are in English and are not suitable for Chinese users, and we need to make some changes. The current menu item is displayed in the project (items) on the left side of the main window, and the Project toolbar arranges multiple buttons, from left to right by adding multiple items (add multiple items), adding items (add Item), deleting items (delete item), moving up (move UP), lower (Move Down), edit selection Item (edit Selected Item).

The mouse double-click any current item to enter the edit dialog, we are here to modify the original English for the required Chinese can,.

Once you've finished modifying everything, you'll see the effect in the preview area. At this point, we found that the text on the menu is not expected to appear in Chinese, but some garbled, this is why?

CSS Tab Designer is an English software, the preset code is for the English Department of the Web page, so we need to manually modify the code to Chinese. Since the software itself does not have the code editing function, we will make changes after the CSS menu page file is generated.

Preview of the face garbled or not very good, you can in the Preview area blank right click, in the right-click menu select "Encoding → Simplified Chinese (gb2312)", the preview effect is back to normal.

Do not feel that the CSS menu is ready, the next output file. Click on the "Create HTML (Generate HTML)" button on the Software toolbar and the system is transferred to the Save dialog box. This example: Select Save folder: D:\web, enter file name: menu, click "Save" button to complete.

As mentioned earlier, the software generated by default page encoding is the English department, next, we began to do coding modification work.

Into the D:\web directory, you can generally see two files:

Menu.html, the generated CSS menu page.

Menu1.gif,css The associated picture of the menu call, the file name may be slightly different in the actual case.

You can open the menu.html file with any text editor, the author uses the system comes with "notepad", after opening the file, find the following content:

The default encoding for the CSS tab designer generation file is "Iso-8859-1", which is modified to Chinese encoding "gb2312",

So simple, save the results of the changes, open again menu.html see it, how, no garbled it!

