Fireworks/dreamweaver Double Sword Wall-made pop-up menu (1)

dreamweaver| menu and graphic design software leader-adobe Company's Photoshop compared to the Macromedia Company's Fireworks 4 (hereinafter referred to as FW4) is short, and her strong support for web graphics production, It also makes it easy to gain the trust and follow of a large number of web designers. With Macromedia Web page to make another famous swordsman in the Three Musketeers Dreamweaver 4 (hereinafter referred to as DW4), FW4 can easily make the current Web page popular pop-up menu (also known as the Drop-down menu). If you are not familiar with DHTML Web programming, see the code is a headache, and follow the author to experience the charm of FW4!

　　 First, make the menu in the FW4
　　 1. Make a parent menu button
Open FW4, select New under the File menu, or press CTRL + N shortcut keys, such as figure a new file, size 200x30 pixel, precision 72 pixel/inch, background transparent.
Select Tools under the Window menu to open the tool panel and select the Rectangular tool from the tool panel;
Draw a rectangle of 100x30 pixel size, select Info on the Window menu to open the Information Panel, directly enter the numerical value to accurately adjust the size and position;

Select this rectangle, CTRL + C copy, Ctrl + V paste in place, this time two rectangles overlap, drag the above rectangle to the side, the same use of the information Panel positioning;

Then select the two rectangles individually, adjust their fill and border colors, with two methods, one using the stroke and fill buttons in the Color tool area on the tool panel:

The second is to choose the Window menu under the stroke and fill respectively to open the style Panel and fill Panel, select on the Panel, note that the line style to choose "Pencilà1-pixel Hard" or "basicàhard lines."
　
This output will make a thin border effect, select the Type tool from the tool panel, enter text, and note that the smoothness of the selected text is no Anti-alias (off antialiasing)

Then select both the text and one of the rectangles, and select center vertical and center horizontal to align the text and the rectangle from the Align under the Modify menu, as shown in the figure.

　　 2. Make pop-up menu entries
Select the aligned text and rectangle at the same time, choose Convert to Symbol under the Insert menu, or click the right mouse button on the rectangle, select Convert to Symbol in the right-click menu, or press F8 shortcut, select button (button) in the Type of pop-up dialog box, Converts this rectangle to a button object.

At this point, move the mouse to the middle of the button object on the circle of the mouse will become a hand shape, click the Circle Flag, in the pop-up menu select Add Pop_up menu ...

You can then set up your pop-up menu in the Set pop-up menu Settings window that pops up. The following figure, the author has set up a number of menu items.

You can set the text name of the entry in text, set the link path of the entry in link, set the target window of the open link in target, click the "+" button to create a menu entry, and if you want to delete the entry in the point, click the "-" button to remove the entry. If you want to modify the entry settings, just click on the entry, modify the settings and then click the Change button. FW4 pop-up menu can be done in a multilevel submenu, just create a submenu entry below the root menu entry, then point to the Neutron menu entry, and then click on the right side of the two Blue icon buttons on the top of the window to a indent menu (which is set as a submenu), on the contrary, Point to the left of the Outdent menu (which is set to the root menu), you can set the current submenu to the previous level root menu. You may find that changing the order of the menu items seems inconvenient, but it's very simple, just click on the item and drag it to the position you want. After you set up the menu entry, click Next to enter the menu style Setup window.
　　 3. Set pop-up menu entry style
It is worth mentioning that menu-style settings can be grouped into two categories:
　
One is the HTML pattern shown in the previous illustration, and the image (texture) pattern shown in the following illustration. The difference between them is that HTML mode, the menu style is completely controlled by the code, real-time computing, the display speed of course very fast, very smooth; In image mode, the background of the menu entry can display pictures, and every time the menu pops up, the background map is downloaded instantly, which is almost impossible for high-speed Internet users. But for slow-speed network users, it is obvious that the texture download display time lag, resulting in a feeling of not fluent. However, because the image generated by the menu can use beautiful texture, although the FW4 type provides a choice of the texture style is not much, a total of 21 kinds, but as long as the output, find these pictures, with a custom size consistent picture replaced, you can make a completely personalized menu of their own, For example, on the map to hit your own website logo and so on. Here I choose HTML mode. In the styling window, the up state is used to set the style of the menu entry when it is normal, and over state is used to set the style when the mouse moves over the menu item. In addition, font is used to select the font to display, in order to be able to clearly display the font on the page, we recommend that you select the size of the font, "B" button is in bold, "I" button is to use italic characters. The style settings are immediately displayed in the preview area below, and the Finish button is completed to generate a pop-up menu.
　　 4. Adjust pop-up menu Location
As shown in the figure, the generated pop-up menu will be shown in a blue wireframe, where the mouse is positioned where it pops up on the parent menu button, and you can spot the blue wireframe of the pop-up menu and drag it to the location where you want it to pop up, such as the author wants it to pop up under the parent menu button.

　　 5. Adjust the parent menu button to the pop-up menu style
Some friends say, now that the pop-up menu has a style, then what about the Mother menu? In fact, I have already thought, so just start to make the menu button object, double-click the Mother menu button object, open the button Object editing window, their own hands to change the status of the button, this belongs to the basic operation of the FW4, the author here will not wordy.

　　 6. Output pop-up menu
It must be very tiring just to follow, so there is also a rectangle for you to practice. When you are finished, you can select Export Preview under the File menu, or press ctrl+shift+x to open the Output Settings window. As shown in Figure 17, select the background color in the alpha Transparency,matte (base color) in the through option below the Option tab, so that the menu will seamlessly integrate with your Web page.

Click the Export button, as shown in Figure 18, set the output path and file name yourself, and select the Save type for HTML and images,html option to export the HTML file,slices option, the last point save button, The pop-up menu completes the output.

Now you can open your output to the HTML file to see what you have done. Turn off the FW4, there's nothing to it.