Creating tab strip menu navigation with Fireworks MX2004

Creating tab strip menus with Fireworks MX2004

Tutorials

Articles

Free Scripts - Code Snippets

Site Promotion

Search this site

Web Site Development

Offshore outsourcing

Graphic Design

Site Promotion

Custom Applications

PDA Development

E-Commerce Solutions

E-Business Development

Web site Maintenance

Flash Development

Website Redesign

Mobile Applications

Legacy To Web

Portfolio

This is very simple article which can be used for creating pop ups to the links of the website.
Normally when you design web pages you may want to make minimum of five to ten pages. When you want to attract your viewers to keep it simple and smart this article will be more useful. I have divided this article into four Chapters.
Chapter 1. Creating Buttons and Layout.
Chapter 2. Creating Layers for Number of Buttons or pages
Chapter 3. Creating Hot Spot and Text formats.
Chapter 4. Creating Behaviors to each layer and making Slices.

Chapter 1: Creating Buttons and Layout.

Step 1.1: Create canvas size of 600 X 400 and make canvas color of #CC9900

Step 1.2: Create a Polygon of size 85 X 35 fill #CC6600 and make White Border 2 tip size with One Pixel Soft.

Step 1.3: Select Skew tool and make a slight tilt on the top of the button towards inside as shown in the picture.

Step 1.4: Then press Control + Shift D. Now you have cloned the button select the cloned button and press Shift + right arrow to make parallel to the previous button. Make this in a line for about four times. Also make text as per your website links.

Chapter 2: Creating Layers for Number of Buttons or pages

Step 2.1: Draw a rectangle of white filled and bordered with #CC6600. Arrange it front of the all the buttons placed horizontally.

Step 2.2: Then Go to Windows menu and click Layers.

Step 2.3: In the frames select the Panel group. You can see this on the top right of the Frames Panel.

Step 2.4: Selecting Duplicate layers make another four layers you have already a layer so totally you will be having five layers. And enable the after current layer.

Chapter 3: Creating Hot Spot and Text formats.

Step 3.1: You can see at the right side of the below canvas an icon showing frames distribution.

Step 3.2:
Select first frame. Select the Home button and the square Go to Modify > Combine Paths > Select Union. Now you get united box.

Step 3.3:
Change the color: Fill with white and make border as # CC6600. Also change the Text color to the # CC6600

Step 3.4:
To go to next frames click the Frames Properties seen Bottom Ground. Go to Second Frame Do Step 10 and Step 11. Simultaneously Frame 3, Frame 4, Frame 5.

Step 3.5: Now draw a Swap Image to all the Menus as shown in the figure. You will be having the same Hotspot behaviors for all the layers.

Step 3.6:
Creating Inside Text Content to each layers showing the importance of the page.

Chapter 4: Creating Behaviors to each layer and making Slices.

Step 4.1:
Make Slice image to total frame.

Step 4.2:
End the Slice to back side of the each frame.

Step 4.3:
Now giving Behaviors to each slice in each Frame.

1) In Frame 1: Click and select the Slice. Go to Windows and Click Behaviors Panel. In Behaviors Add Swap Image.

2) After selecting Swap Image option you will bet a Swap Image Window. Do the following. Enable Frame 1 since you are in Frame 1 and enable Preload Images. Disable the Restore Image on MouseOut.

3) In Frame 2, Frame 3, Frame 4 and Frame 5. Continue the above steps and in the Show the swapped image from option change the existing Frame from where you are working.

Step 4.4: Now you have given Behaviors to each and every slice in each and every Frame. In the Behaviors Panel Change the Event option as onClick.

Step 4.5: Finally check your links selecting F12 and Export to the Dreamweaver and change to HTML Format.

Home I About Us I Services I Price Quote I Resources I Contact Us