Fireworks easy to create the dropdown navigation bar

Navigation | Pull down

The new features in Fireworks MX 2004 Help us to easily add graphics and interactive elements to our web site. For beginners who are unfamiliar with and understand code writing or JavaScript, Fireworks MX 2004 can maximize productivity. Today we design a cool pop-up pull-down menu with fireworks MX 2004来, you don't need to master the JavaScript programming language, you just have to follow the steps I've given you, and you can make your own pop-up Pull-down menu as you like. The end of the article provides the original document for everyone to download reference. The complete page is as follows: (move the mouse over the gray button to appear on the lower menu) 　　Step 1: Design the Make icon button Run Fireworks MX 2004, create a new 776*80 edit area, set the background color to #737e90, and our goal is to make this edit area a drop-down menu navigation bar that contains JavaScript. In the editing area, use the tool vector area Rectangle tool to draw the button's initial graphics and edit the focus on the button's visual effects. We first draw 6 80*22 rectangles with rectangular tools, the rectangle border color is set to transparent, the rectangle background color is #515764, then all the rectangles are selected, and then the rectangular roundness is set to 60 in the Properties window, as shown in figure: To achieve a good visual effect, you need to process the button, or in the Properties window, select Bevel and Emboss in the Effects pop-up list, select Emboss in the bevel and Emboss pop-up list, and set the parameters as follows: You can change the parameter settings to achieve the desired effect, of course, you can also choose other effects such as "concave relief" and so on, you can try different styles. Repeat for each of the rectangles as the operation, set them up after a word, spacing is 1, the bottom line and edit area line coincide. Use the Rectangle tool to draw a background color that is the same rectangle as the top six rectangular backgrounds, the length and height are 485 and 10 respectively, and the rectangle is dragged to the front of the six rectangles above, and the bottom line coincides with the bottom line of the edit area (the rectangle's function is to block the gap between the top six rectangles, forming an inverted-bow-like button array), The effect view is as follows: OK, the basic work is done, then edit the text on the button. Generally think, the text on the button is best to edit in the Web page, so as to flexibly replace the link name, but if you want to do the name of the link has been set down, you may wish to make these link names directly into the picture, the following we to carry out the operation. The mouse selects the Text tool, locates and enters "design online" four words before the first button, set font to imitation, font size 12, font color white, if you think the color is not bright enough you can choose another color, or select the text you just entered, in the Properties window in the Effect list box to sharpen it. Do the other buttons as above, and get the following view: The next step is to cut the editing area to form a hotspot area, in the tool's Web bar to select the "slice" tool, for each button to cut, the rest of the other parts do not care about it, cutting the edge of the button for cutting line, after cutting, the entire editing area formed 9, as shown: (larger picture, please pull the scroll bar to watch) 　　 Step 2: Add a pop-up drop-down menu on the slice For the first button "Design Online", right-click the slice on the button, select "Add pop-up menu" and pop up a window as shown: This is a pop-up menu editor that lets you set the content, appearance, advanced, and position four options for the pop-up menu. First, edit the content, click the "+" button, add a connection content, in the Text field, enter the "Web Tao Bar" Four words, in the Link field, enter the name of the page you want to link, such as web.html, in the Target field to select the Web.html page display target, there are _self, _ Blank, _father and other options, respectively, represent in the original window, displayed in the new window and in the parent window, the reader can choose according to their needs. The next step is to set the appearance, in the Appearance Settings window, you can link styles (with both HTML and image formats) settings, menu styles (with both vertical and horizontal menus) settings, font, size, and color settings for linked text, and cell borders, backgrounds, Settings for options such as mouse-sliding backgrounds. Here you may choose the HTML format link style and the horizontal menu menu style, select the italicized Word, center alignment, and then set the bounce state and sliding state of the text color and cell color, respectively, the bounce state text color set to #cccccc, sliding over the state when the text color is #ffffff white, The background color of the bouncing State cell is #737e90 and the background color is #464f5b when the state is slipping. After the appearance is set up, the next step is to make advanced settings for the appearance, as shown in the Parameters window: Select a cell with a width of 65 pixels and a height of 20 pixels, but with borders, text indents, and cell spacing of 0, border width 1, border color white, shadow and highlight darker, the effect is as shown above. The next step is to set the position, click Position to set the second button, set the pop-up menu at the bottom, where the position of the digital positioning, in this case x=0,y=25, the reader can be based on the height of the button set Y value to achieve the best results. In addition, the reader can set the appearance of the menu according to his or her hobby, including the font, size, color and alignment of the menu, as well as the properties of the cell border and background, as well as the font color and cell background of the mouse-sliding style. In addition, readers can also try to change a link style and menu style design, if you choose the image style link style, you can choose according to their favorite fireworks with a variety of buttons as the background, and you can also change the menu style for vertical style to meet your requirements. So for the above steps, you can make each button's Drop-down pop-up menu separately. In this step, you don't have to reset the menu's appearance, advanced, and location attributes, and Fireworks MX 2004 has memorized the style of the pop-up menu you made for the first button, and you just need to go through a simple operation to complete the design. After you have made all of the button's Pull-down menus, your work is 90%, and the final job is to export your work. Go to the File-〉 Export Wizard, select the Export Format radio button, into the next step, select the Site radio button click the Continue button, get the analysis results, direct single repulse out, the system will tell you that the slice will be ignored, you need to close the Export Wizard window, right click on any one of the slices, choose to export the selected slices as shown: Pop-up export window, save Type option select HTML and image, select the Put images in subfolders check box, this subfolder you can browse and select or Create, enter the name of the export file such as: Myfirst, click the Save button, all OK So far, the pop-up Pull-down menu was made to complete, quickly to experience the effect bar, open Explorer, browse you just save the file folder, you will find a JS file, this JS file is you just exported the file automatically generated JavaScript script file, can not lose it. Click on the page file named Myfirst, put the mouse on any one button, how, the effect is not very good?! Original File Download The complete page is as follows: (move the mouse over the gray button to appear on the lower menu)