Quick CSS navigation menu creation with powerful tools (with tool download address)

Author: Yi shuihan

[It168 practical skills] with the concept of Web Page standardization rooted in the hearts of the people, more and more websites use the CSS architecture. CSS architecture web pages not only comply with W3C standards, but also very beautiful. The Standardization page starts with the beautiful CSS menu. If you are still hesitating, please take a look at the following CSS menu demonstration, 1. Figure 2:

　　Click to download CSS tab designer

Figure 1 CSS navigation Effect

Figure 2 CSS navigation Effect

As we all know, CSS menus are all written in a piece of code and code. to generate these beautiful menus, you must think that the writing is very hard? In fact, I did not write a special code, and I got the above CSS menus. I am afraid to hide them and share some good things with you. Please be a hero behind the scenes-CSS tab designer!

CSS tab designer is a visualization software that uses CSS to design navigation menus. The software has over 60 built-in styles. You only need to modify the existing style templates to quickly generate CSS menus. It is particularly worth mentioning that the XHTML code generated by the software strictly follows the webpage standards. The created CSS menu is compatible with various mainstream browsers, whether it is the built-in Internet explorer of the system, or Firefox, opera, and Netscape.

CSS tab designer is easy to operate. The main interface adopts a three-column layout: Project (items), style (Tab styles), and preview, almost all operations are completed on the main interface, 3.

Figure 3 layout of the main interface in three columns

The procedure for creating a menu is very simple. You have premade more than 60 menu styles in different styles in "tab styles". Select the desired style first, next, click "fill with samples" in "items" on the left, and you can see the effect in "preview" immediately, even if the menu is generated.

Of course, the menu items in the built-in style templates are all in English and are not suitable for Chinese users. We still need to make some modifications. The current menu item is displayed in "items" on the left of the main window, and multiple buttons are arranged in the project toolbar, from left to right: add multiple items) add item, delete item, move up, move down, edit select item, and 4.

Figure 4 menu items

Double-click any current project to enter the edit dialog box. Here, we can change the original English to the required Chinese characters, 5.

Figure 5 modify the original English to the desired Chinese

After modifying all the content, you can see the effect in the preview area. At this point, we found that the text on the menu is not the expected Chinese, but garbled characters. Why? 6.

Figure 6 Chinese garbled characters

CSS tab designer is an English software with preset encoding for English webpage. Therefore, we need to manually change the encoding to Chinese. Because the software itself does not have the code editing function, we will make modifications after the CSS menu webpage file is generated.

You can right-click in the blank area of the preview area and select "encoding> Simplified Chinese (gb2312)" from the right-click menu. The preview effect is 7.

Figure 7 conversion Encoding

Unconsciously, the CSS menu is ready, and then the file is output. Click the "Create HTML (generate html)" button on the software toolbar to go to the Save dialog box. In this example, select the Save Folder: D: \ Web, enter the file name: menu, and click "save.

As mentioned above, the web page code generated by the software is in English by default. Next, let's start to modify the code.

Enter the D: \ WEB directory, and you can see two files:

The CSS menu page generated by menu.html.

Menu1.gif, CSS menu call related images, the actual file name may be slightly different.

You can open the menu.html file with an editor in any of the following ways:

<Meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1"/>

CSS tab designer generated file default encoding for "ISO-8859-1", modify to Chinese encoding "gb2312", 8:

<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>

Figure 8 edit and modify the generated menu code

This is simple. Save the Modification result and open menu.html again. How can this problem be solved? There is no garbled code!

　　Click to download CSS tab designer