Web Technologies

1. Web Technologies Creating a Navigation Bar

2. Bitmap & Vector Graphic Editor • The following project is intended to be used in conjunction with a bitmap and vector graphic design application. IT: Web Technologies - Creating a Navigation Bar

3. Pop-Up Menus • Design production premium applications have a popup generator that automatically generates various codes. • 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

4. Creating a Button • Create a new document that is 312 x 100 pixels • Using the Rectangle Tool, draw a rectangle that is 75x25 pixels • 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

5. 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, hover over Bevel and Emboss, and choose Inner Bevel IT: Web Technologies - Creating a Navigation Bar

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

7. Adding Text to the Button • Click on the TText 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

8. 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, hover over Symbol, and select Convert to Symbol IT: Web Technologies - Creating a Navigation Bar

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

10. 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 better sense: IT: Web Technologies - Creating a Navigation Bar

11. 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 under the Content Tab: • Click Next IT: Web Technologies - Creating a Navigation Bar

12. 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, and Done IT: Web Technologies - Creating a Navigation Bar

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

14. Previewing the Navigation • Select File on the Application bar, hover over Preview in Browser, and choose Preview in your favorite web browser. • Shortcut key: [F12] IT: Web Technologies - Creating a Navigation Bar

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

16. 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

17. Exporting the Navigation Bar • Select File on the Application bar and choose Export Wizard • Click Continue • Under Choose Destination, select your web design application and click Continue • On the Analysis Results dialog box, click Exit • The Image Preview dialog box opens IT: Web Technologies - Creating a Navigation Bar

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

19. Viewing your Exported files • Your bitmap & vector graphic editor should create a subfolder titled “images” to save the necessary files for your navigation bar—a scripting language file and a CSS style sheet—so you can view them correctly. IT: Web Technologies - Creating a Navigation Bar

20. 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

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