In this Microsoft FrontPage tutorial I will show you how to create the soft blue and pink gradient beveled menu in my image. Please see the image that I have provided to see the ending results of this tutorial. This menu is kind of hard to explain in words, but it is really pretty. This menu is made by using the bevel shape in the auto shapes and applying a gradient effect to it. Open your FrontPage program and we will get started.

How to Create a Soft Blue and Pink Gradient Beveled Menu in Microsoft FrontPage

First, we will draw the menu using the auto shapes in FrontPage. Go to the top of your window and click Insert > Picture > Auto Shapes. The Auto Shapes toolbar will pop up on your page. Click the Basic Shapes icon in the toolbar. Then click the Bevel Square. Roll your mouse over the shapes to see the names of them. The shape that we are using is called Bevel. Draw the menu on your page. You will need to shrink the border of the menu some, unless you want it to be that thick. To shrink the border, grab the yellow diamond and pull it up. The size of the menu will depend on the number of links you are going to need. You can resize the menu at the end if you need too.

The next step of this tutorial is to apply the gradient to the menu. Click the menu to select it. Then click the arrow beside the paint bucket at the bottom of your FrontPage window. Click the Fill Effects link when the menu pops up. The Fill Effects box will pop up and you will need to apply the following effects. Click on the Gradient Tab. Then select Preset Colors in the Color Section. Drop the Preset box down and select Daybreak. Change the From in Transparency to 10% and leave the To field at 0%. Select Vertical for the Shading Style. Click the bottom left variant in the Variants section. Click OK to apply the effects

Next, you will need to apply a border to the menu. Click on the menu again to select it. Click the arrow beside the paint brush at the bottom of your window. Apply the color White to your border menu. Next, we will change the size of the border. Click on the Border Style icon at the bottom of your window. Click the ¾ pt line. If you want a thinner or thicker border for your menu, select the one that you want.

The next step of this Microsoft FrontPage tutorial is to type your links. Right click inside the menu and click Add Text. Type your links in the menu. Next, you will need to highlight each link and make it active. Right click on a highlighted link and click Hyperlink in the menu. When the hyperlink box comes up, type the link in the bottom field. Then click the OK button. Repeat this step until you have linked all of your links. You can use any font style, color, or size for your links. I used the following for my links.

Font Style - Palatino Linotype
Font Size - 12 pt
Font Color - Hex={6D,AB,FF}

You can resize the menu if you need to by grabbing the corner dot with your mouse and dragging it in or out.

If you have any problems with this Microsoft FrontPage tutorial, please feel free to leave a comment at the bottom of this page.

discuss this topic to forum