After determining where you want to place the button on your web page, insert the image that you want to use as the button. To do this, click on the Insert dropdown menu in Expression Web’s toolbar, choose Picture and then From File. (Click the image below for a larger view.)
click to enlarge
Navigate to the directory that contains the image and click on the Insert button to bring the image into your web page. The Accessibility Properties dialog box will pop up on your screen, unless you’ve disabled it, prompting you to enter information about the image.
click to enlarge
You can choose to add this information now or go back to it later. Click OK when done and the image will appear in your web page.
click to enlarge
For the next few steps, we’ll want to have access to the Pictures toolbar. To display this, click on the View dropdown menu of Expression Web’s main toolbar, choose Toolbars and click on Pictures.
click to enlarge
Click on the image in your web page to activate the toolbar.
click to enlarge
Once the Pictures toolbar is activated, you can use any of the options to make modifications to the image that has been selected. One thing that you can do to give the image more texture is choose the Bevel tool.
click to enlarge
This will give the image a raised appearance, making it look more like a button.
click to enlarge
After you’ve finished making modifications to the appearance of the button, it’s time to link it to whatever destination you choose. To do this, first select one of the Hotspot tools from the Pictures toolbar.
click to enlarge
We’ll use the Rectangular Hotspot tool since it is closer to the shape of our image. If the image you chose was more rounded in nature, you might want to use the Circular Hotspot instead.
With the Rectangular Hotspot tool selected, draw a hotspot over the image including as much of the area of the image as possible. When you release the mouse key, the Insert Hyperlink dialog box will appear. Type in the URL or file name for your hyperlink and click OK.
click to enlarge
Don’t forget to save your web page. As you are saving the page, you’ll also be asked if you want to save the button that you’ve just created in the same directory. Make sure you do this so you don’t lose your work. If you want to test the button that you’ve just created, choose Preview in Browser from the File menu. Select your browser type, and a view of your web page will open. You can click on the button here to make sure it’s working as you planned.
For more tips and tricks, browse through the collection of Expression Web user guides here at Bright Hub.
