Tutorial on how to quickly create a CSS navigation menu_CSS/HTML

As the concept of web page standardization takes root in people's hearts, more and more websites adopt CSS architecture. CSS-structured web pages not only comply with W3C standards, but are also very beautiful. Standardized web pages start with beautiful CSS menus. As we all know, CSS menus are written in a piece of code to generate a beautiful menu. Today I will introduce you to a small software: CSS Tab Designer!

CSS Tab Designer is a visual software that uses CSS to design navigation menus. The software has more than 60 different built-in styles. You only need to modify the ready-made style templates to quickly generate CSS menus. It is particularly worth mentioning that the XHTML code generated by the software strictly follows web standards, and the CSS menu created is compatible with various mainstream browsers, whether it is the Internet Explorer that comes with the system, or Firefox, Opera, and Netscape.

The operation of CSS Tab Designer is very simple. The main interface adopts a three-column layout: items (Items), styles (Tab Styles), and preview (Preview) are arranged in order. Almost all operations are completed in the main interface, as shown in the figure .

The steps to create a new menu are very simple. More than 60 menu styles with different styles are pre-made in "Tab Styles". First select the style you need, and then click on the "Items" on the left "Fill with samples", you can immediately see the effect in the "Preview", and the menu is generated.

Of course, the menu items in the software’s built-in style template are all in English, which is not suitable for Chinese users. We still need to make some modifications. The current menu items are displayed in "Items" on the left side of the main window. The item toolbar is arranged with multiple buttons, from left to right: Add Multiple Items, Add Item, Delete Item (Delete Item), Move Up, Move Down, Edit Selected Item, as shown in the figure.

Double-click any current project to enter the editing dialog box. Here we can modify the original English to the required Chinese, as shown in the picture.

After modifying all the content, you can see the effect in the preview area. At this time, we found that the text on the menu was not the expected Chinese, but some garbled characters. Why is this? As shown in the picture.

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

It is still not good to face garbled characters when previewing. You can right-click in the blank space of the preview area and select "Encoding → Simplified Chinese (gb2312)" in the right-click menu, and the preview effect will return to normal, as shown in the picture.

Before you know it, the CSS menu is ready, let’s export the file. Click the "Generate HTML" button on the software toolbar, and the system will enter the save dialog box. This example: Select the save folder: D:web, enter the file name: menu, and click the "Save" button to complete.

As mentioned before, the web page encoding generated by the software by default is English-based. Next, we start to modify the encoding.

Enter the D:web directory and you will generally see two files:

menu.html, the generated CSS menu web page.

menu1.gif, the related picture called by CSS menu. In actual circumstances, the file name may be slightly different.

You can open the menu.html file with any text editor. The author uses the "Notepad" that comes with the system. After opening the file, you will find the following content:

The default encoding of files generated by CSS Tab Designer is "ISO-8859-1", which can be changed to the Chinese encoding "gb2312", as shown in the figure:

It’s as simple as that, save the modification results, open menu.html again and take a look, how is it, there is no garbled code!