Fireworks mx make drop down menu

Menu | Dropdown with the complexity of web pages, more and more websites use Pull-down menus to navigate. Friends who are familiar with JavaScript know that the drop down menu is actually implemented by JavaScript to control the visible attributes of each element, which, of course, requires writing large sections of code. But if you use fireworks MX does not need such trouble, all the code is automatically generated by fireworks MX, you have to do is to beautify the interface, and then simply set the Drop-down menu options.

Let's take a look at how to use the Fireworks MX enhanced pull-down menu feature to make an enviable pull-down menu.

　　 Step 1:

Open a cartoon character graphic, select Text Tool on the toolbar to write to text: Click. and place it in the upper-left corner of the graphic (Figure 1).

　　Step 2:

Select the Slice Tool (slice tool) on the toolbar and draw a rectangle on the text. The function of slicing tool is to make small picture, and to cut a large image into several small pictures and publish it in tabular form to increase the speed of download. Each slice can be added as a link or as a button. After slicing the area in green, we can precisely adjust the position and size of the slice on the properties panel below (Figure 2).

　　Step 3:

Right-click the green area of the slice and select Add pop-upmenu (add dropdown) in the pop-up menu (Figure 3).

　　Step 4:

The Pop-up pop-up menu Editor dialog box contains four tabs that correspond to different functions (Figure 4).

Click the area under the text label to enter the name of the menu, for example: Option one. Click the plus sign, repeat the above, to add all the menu options, if the input error, click the minus sign to remove this option (see Figure 5).

Also, the area under the Link tab can enter the link address for this menu option.

Because it's just an exercise, we enter the "#" symbol, in the HTML markup Language, the link address is "#" to represent the link to itself, that is, a link no matter how you click what you see will be the current page, there will be no "page does not exist" error, very suitable for testing use.
　　Step 5:

But sometimes we will use more than one level of the menu, may be in the first level of the menu with a level two menu , and even the existence of a level three menu, how to face such a complex situation? Quite simply, there are two buttons on this panel:outdent menu and Indentmenu, which you can use to set the sub options under a menu option. You just have to select an option, click Indent menu to set it to level two, and then click Outdent menu to restore it to a first-level menu (Figure 6).

In this way you can make a very complicated drop down menu.

　　Step 6:

After you enter and set the menu options, select the Appearance tab. Here, we can set the appearance properties of the Drop-down menu. Everyone will be familiar with the test, and it is worth noting that the State and over states represent the two types of menus. It is up at the normal display and when the mouse is moved to the menu option, it is displayed in over state. We can set different display styles for each of these states in style (Figure 7).

　　Step 7:

Select the Advanced tab, where you can further set the appearance style of the menu, mainly the properties of the table, such as the width of the border, color, and the distance between the menu content and the border. Please make changes to your liking (Figure 8).

　　Step 8:

Finally select the Position tab, where you can adjust the position and orientation of the menu pop-up . You can select directly from the effects provided by the Fireworks MX, or you can enter values yourself. Note that the menu position is the location where the first-level menus pop up, while submenu position is the pop-up position setting for the subordinate menu (Figure 9).

　　Step 9:

When all the settings are complete, click the OK button to see the effect shown in the figure (Figure 10).

We can see directly from the figure of this Drop-down menu pop-up position, the number of options, and other basic conditions. Select Slice Tool on the toolbar, drag the mouse over the graph to pull out the green area, and each green area will be a separate small image when it is exported, which can speed up the download (Figure 11).

Continuously cut the picture until the effect is shown (Figure 12).

Step 10:

Fireworks MX has a very good effect preview function, we just press the F12 button on it will automatically generate a Web page let us see the effect (Figure 13).

Step 11:

Now that we've finished making the drop down menu, how do we publish it as a Web page or directly output it to Dreamweaver for the next edit? We can use the menu command File->export to output a good result (Figure 14).

But it is more convenient to directly click on the Open Graphics box on the Quick Export button, where you can output the file to Dreamweaver, Flash and even director.

Step 12:

We select output to Dreamweaver and export Html ... (Figure 15).

A File Save dialog box will pop up, especially if we choose HTML and Images in the Save Type selection box, so that the output page also prints the cut picture. If you hook the selection box before the include area without slice, you can output the part of the graphic that is not sliced. Output only slices of graphics (Figure 16) without a tick.

Summarize:

Fireworks MX features make it greatly convenient for graphic designers to make complex web page effect, you do not need to understand the program language can easily control it, get satisfactory results. In addition, fireworks, Flash, Dreamweaver are called Web page production of the Three Musketeers, their functions are complementary. Each software can be easily used in conjunction with the other two software, and has some of the other two software common features, this time in the Macromedia MX series can be more obvious to feel. We can use Fireworks MX production Web page, with Dreamweaver MX production of Simple flash, Flash MX processing fireworks in PNG format pictures to make animation. Therefore, if we are proficient in the use of these three software, then our web page production will be very convenient.

Practice:
Use fireworks MX to make a pop-up menu with a three-layer submenu and set the pop-up direction of the submenu.

Tips:
Use outdent and indent in the Content tab to implement level three menu functionality, and in the Position tab to adjust the location of the menu pop-up.