15 years of excellence
Get a QuoteReady to get started on your project?
tab strip menus

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.

Creating tab strip menus with Fireworks

Creating tab strip menus with Fireworks


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

Creating tab strip menus with Fireworks


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

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks

Creating tab strip menus with Fireworks


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

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks

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.

Creating tab strip menus with Fireworks


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

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks


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

Creating tab strip menus with Fireworks

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

Step 4.1: Make Slice image to total frame.

Creating tab strip menus with Fireworks


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

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks

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.

Creating tab strip menus with Fireworks


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.

Creating tab strip menus with Fireworks


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

Creating tab strip menus with Fireworks


articles



Please fill in the fields below and click the "Send" button.
We will e-mail a link of this article.

Your Name
From Email Address
To Email Address
Subject
Please note: We will not spam or share your Email Address
Quick Enquiry

Related Readings

Verified Company

Inc.com Verified

Case Studies

Website details: A blog site with social networking features and user..

Challenge: This is a social community website, with..

More Case studies..

Recent Blog

What our clients Think

CLIENTS

  • todd
  • RIDGE WEB DESIGN
  • DUNKIN BRANDS
  • Store Point
  • HARVEST
  • Open Solutions

Expertise

  • WordPress
  • Joomla
  • Prestashop
  • CodeIgniter
  • Laravel
  • Responsive Web Design
  • Mobile Apps
  • HTML5