1 / 20

Web Technologies

Web Technologies. Creating a Navigation Bar in Adobe Fireworks CS4. Pop up Menus. Adobe Fireworks CS4 has a popup generator which automatically generates CSS code and JavaScript code.

herb
Download Presentation

Web Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Technologies Creating a Navigation Bar in Adobe Fireworks CS4

  2. Pop up Menus • Adobe Fireworks CS4 has a popup generator which automatically generates CSS code and JavaScript code. • Each drop down menu item appears as an HTML or image cell, which has an Up state, an Over state, and text in both states. IT: Web Technologies - Creating a Navigation Bar

  3. Creating a Button Create a new Fireworks document with the dimensions: 312 x 100 pixels. Draw a rectangle with the dimensions of 75x25 pixels using the Rectangle Tool . Set the Fill Color as #FFFFCC, a Light Yellow. Set the Stroke Color as #CC0066, a Deep Pink. IT: Web Technologies - Creating a Navigation Bar

  4. Enhancing the appearance of the button • Select the rectangle using the Pointer tool and apply the Inner Bevel filter. • On the Properties panel click the next to Filters and point to Bevel and Emboss and choose Inner Bevel. IT: Web Technologies - Creating a Navigation Bar

  5. Applying a Filter • Set the following values for the filter: Bevel edge shape – SmoothWidth - 6Contrast – 75% Softness – 3Angle – 135 Button preset - Raised IT: Web Technologies - Creating a Navigation Bar

  6. Putting text on the button • Click on the Text Tool and put a name on the button. • Make the following selections on the Properties panel: • Font Family – Times New Roman • Size – 14 pts • Font Style – Bold • Align - Center IT: Web Technologies - Creating a Navigation Bar

  7. Converting to a button • With the Pointer tool select the rectangle and the text (Contact Us). • In the Align Panel select Align Horizontal Center and Align Vertical Center(to center the text on the rectangle). • With both items still selected chooseModify on the Application bar and point to Symbol and select Convert to Symbol. IT: Web Technologies - Creating a Navigation Bar

  8. Converting to a Button • In the Convert to Symbol dialog box: • Name the button: WebDesign • Type: Button • Click OK. • With the button still selected, choose Edit on the Application bar Clone. • In the Properties panel, in the Text box type: Home. • With the Pointer tool drag the new button to the right. IT: Web Technologies - Creating a Navigation Bar

  9. Cloning additional buttons • Clone the button two more times and name the buttons: Services and About Us. • Rearrange the buttons in an order that makes more sense: IT: Web Technologies - Creating a Navigation Bar

  10. Creating the Pop-up Menu • Click on the target in the middle of the Services button and choose Add Pop-up Menu. • Enter the following: • Click Next. IT: Web Technologies - Creating a Navigation Bar

  11. The Appearance • Cells: Image • Font: Verdana … • Up state: • Text Color: FFFFCC • Cell Color:CC0066 • Over state: • Text Color: FFFFCC • Cell Color:FFFF99 • Click Next, Next,Done IT: Web Technologies - Creating a Navigation Bar

  12. About Us • Repeat this same process for the About Us button creating the following menu items: • Background • Meet our Team • Testimonials IT: Web Technologies - Creating a Navigation Bar

  13. Previewing the Navigation • Select File on the Application bar and point to Preview in Browser and choose Preview in IExplore (your browser may vary) • Shortcut key: [F12] IT: Web Technologies - Creating a Navigation Bar

  14. Fixing the buttons • Double-click on one of the buttons. • Select the text and the rectangle. • In the States panel, click the buttonand choose Copy to States. • Copy selection to All states and clickOK. • Click the at the top of the document window IT: Web Technologies - Creating a Navigation Bar

  15. Adjusting the Pop-up Menu • Click on the Services button target and choose Edit Pop-up Menu • Click the Position tab andchange the X value to 0and the Y value to 28. • Click Done. • Complete the same processwith the Contact Us button • Preview again. IT: Web Technologies - Creating a Navigation Bar

  16. Exporting the Navigation Bar • Select File on the Application bar and choose Export Wizard. • The Export Wizard activates. • Click Continue, under Choose Destination select Dreamweaver and click Continue. • On the Analysis Results dialog box click Exit. • The Image Preview dialog box opens. IT: Web Technologies - Creating a Navigation Bar

  17. Exporting the Navigation Bar • Click the Export Button • Navigate to where your assets are being save. • Click Save. IT: Web Technologies - Creating a Navigation Bar

  18. Viewing your Exported files • Fireworks creates a subfolder titled “images” to save the necessary files for your navigation bar, a JavaScript file and a CSS style sheet to be viewed correctly. IT: Web Technologies - Creating a Navigation Bar

  19. Previewing your Navigation Bar • Navigate to the folder where you exported your navigation bar. • Open the html file that has been created to preview your file in a browser. IT: Web Technologies - Creating a Navigation Bar

  20. On Your Own • Create a navigation bar in Fireworks for a school club or organization website of your choice. • Your navigation bar should have at least four buttons and two of the buttons should have drop-down menus with a minimum of three choices. IT: Web Technologies - Creating a Navigation Bar

More Related