How to Add Horizontal Menu with Button Images, Dreamweaver, Illustrator, Photoshop

We’ve been through the steps of How to Create A Wine Affiliate Web Page Template In Dreamweaver. This time we’ll be adding a horizontal menu with button images. The new menu can be used for purposes of making the wine affiliate page a multipage site with various wine products.

Creating the Button

First, we’ll start by creating the menu button with Adobe llustrator. Use the Creating a button with a Mesh Gradient tutorial to form your button. Its very explanatory. However, we’ll be using different colors to match the wine affiiate site. The gradient colors are #FFFFFF and #FF9999.

Convert Button to An Image File

Once you’ve formed your button, save it as button.ai in Adobe llustrator just in case you need to make an edit. Use the selection tool arrow to select the image as a whole and copy it via Edit > Copy.

Paste the copied button into Adobe Photoshop. Then save it as button.jpg. For more assistance in converting your images for Dreamweaver, click here.

Adding A Horizontal Menu

Lastly, we’ll add the menu to the wine affiliate page. In Adobe Dreamweaver, goto Insert > Spyry > Spyry Menu Bar and choose horizontal.

Next, place your cursor inside of the menu, to view the current CSS code, as shown below.

It may be necessary to add an background-image property to insert the button image.

Dreamweaver by default, will have every other menu item show the button. If you’d like your button to show for each menu item, you’ll need to modify the code to make sure each menu link includes.