Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Creating a Navigation Bar

Bitmap & Vector Graphic Editor The following project is intended to be used in conjunction with a bitmap and vector graphic design application. Copyright © Texas Education Agency, All rights reserved.IT: Web Technologies - Creating a Navigation Bar2

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 Bar3Copyright © Texas Education Agency, All rights reserved.

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 Bar4Copyright © Texas Education Agency, All rights reserved.

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 Bar5Copyright © Texas Education Agency, All rights reserved.

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 Bar6Copyright © Texas Education Agency, All rights reserved.

Adding Text to the Button Click on the T 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 Bar7Copyright © Texas Education Agency, All rights reserved.

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, choose Modify on the Application bar, hover over Symbol, and select Convert to Symbol IT: Web Technologies - Creating a Navigation Bar8Copyright © Texas Education Agency, All rights reserved.

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 the Properties panel, type “Home” With the Pointer tool, drag the new button to the right IT: Web Technologies - Creating a Navigation Bar9Copyright © Texas Education Agency, All rights reserved.

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 Bar10Copyright © Texas Education Agency, All rights reserved.

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 Bar11Copyright © Texas Education Agency, All rights reserved. Web DesignServices.html#webdesign Web HostingServices.html#webhosting Splash PagesServices.html#webhosting

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 Bar12Copyright © Texas Education Agency, All rights reserved.

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 Bar13Copyright © Texas Education Agency, All rights reserved.

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 Bar14Copyright © Texas Education Agency, All rights reserved.

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 click OK Click the back arrow at the top of the document window IT: Web Technologies - Creating a Navigation Bar15Copyright © Texas Education Agency, All rights reserved.

Adjusting the Pop-up Menu Click on the Services button target and choose Edit Pop-up Menu Click the Position tab and change the X value to 0 and the Y value to 28 Click Done Complete the same process with the “Contact Us” button Preview again IT: Web Technologies - Creating a Navigation Bar16Copyright © Texas Education Agency, All rights reserved.

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 Bar17Copyright © Texas Education Agency, All rights reserved.

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 Bar18Copyright © Texas Education Agency, All rights reserved.

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 Bar19Copyright © Texas Education Agency, All rights reserved.

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 Bar20Copyright © Texas Education Agency, All rights reserved.

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 Bar21Copyright © Texas Education Agency, All rights reserved.