Five-minute Quick CSS navigation menu with right-hand tool

With the concept of Web page standardization popular, more and more websites adopt CSS architecture. CSS Architecture Web pages are not only consistent with the standards of the consortium, but also very attractive. Standardized web pages start with a nice CSS menu, and if you're still hesitating, take a look at the following CSS menu demos, as shown in Figure 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 a piece of code, a piece of code to write out, to generate these beautiful menu, we must think that the author is very hard to write it? In fact, the author did not write a special code, they got the above CSS menu, good things to share with everyone, I dare not hide private, please--css Tab designer!

CSS Tab Designer is a use of CSS to design navigation menu of the visual software, software built in more than 60 different styles of style, just modify the ready-made style template, you can quickly generate CSS menus. It is particularly worth mentioning that the software generated XHTML code strictly follow the Web standards, the creation of CSS menus compatible with a variety of mainstream browsers, whether it is the system's own Internet Explorer, or Firefox, Opera, Netscape will not have problems.

The CSS Tab Designer operation is simple, the main interface uses a three-column layout: items, styles (Tab Styles), preview (Preview) in turn, almost all operations are done in the main interface, as shown in Figure 3.

Fig. 3 The main interface adopts three-column layout

The procedure for creating a new menu is very simple, in the "Style (tab Styles)" prefabricated more than 60 different styles of menu styles, first select the desired style, then click on the left "items" in the "Fill with samples", immediately on the "preview" ( Preview) "To see the effect, the menu even if generated.

Of course, the menu items in the Software built-in style template are all in English, not for Chinese users, and we need to make some changes. The current menu item appears in the items on the left side of the main window, and the Project toolbar arranges multiple buttons, from left to right: adding multiple items (add multiple items), adding items (add Item), deleting items (delete item), moving up (move Up, moving down, edit Select item (Edit Selected item), as shown in Figure 4.

　　

Figure 4 Menu item

Double-click any current item to enter the Edit dialog box, we modify the original English for the required Chinese can, as shown in Figure 5.

　　

Figure 5 Modifying the original English as required in Chinese

When you have finished modifying everything, you can 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? As shown in Figure 6.

Figure 6 Chinese garbled

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

When the preview of the face garbled or not too good, you can be in the preview area in the blank to right-click, in the Right button menu to choose "encoding → Simplified Chinese (gb2312)", the preview effect is back to normal, as shown in Figure 7.

　　

Figure 7 Conversion encoding

Unconsciously, the CSS menu is done, and then the output file. Click on the "Create HTML (Generate HTML)" button on the Software toolbar and the system goes to the Save dialog box. In this example: Select Save folder: D:web, enter filename: menu, click the "Save" button to complete.

As has been said before, the software default generated Web page encoding is the English department, next, we began to do coding modification work.

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

menu.html, generated CSS menu page.

MENU1.GIF,CSS menu calls related pictures, in fact, the file name may be slightly different.

You can use any text editor to open the menu.html file, the author used the system from the "notepad", open the file, find the following:

<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 "/>

CSS TAB Designer The default encoding for the generated file is "Iso-8859-1", which is modified to Chinese-encoded "gb2312", as shown in Figure 8:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>

　　

Figure 8 Edit and modify the generated menu code

So simple, save the change results, open menu.html again to see how, how, there is no garbled it!

CSS Tab Designer software download address:

Http://down.ddvip.com/view/11532415364176.html