Create Interactive Buttons in Microsoft Expression Web
Posted by: Minal Agarwal
in Category Expression Web
Abstract: This article demonstrates how to create interactive buttons in Expression Web without writing a single line of code.
Create Interactive Buttons in Microsoft Expression Web
I remember those days when I used to create my own custom buttons in Photoshop and then use them in my pages. But now hundreds of designers have made such buttons available for download. Now Microsoft has incorporated a set of interactive buttons in Expression Web. Life has been so easier with ‘cool menus’ and ‘drag and drop tools’ in Microsoft Expression Web that you need not write even a single line of code. In this article we would explore how to go about adding interactive buttons into our pages without having to code.
Microsoft Expression Web has provided advanced graphical buttons and has made it easier for you to add buttons to your web pages. You can change their appearance and settings.
Creating Interactive Buttons
Launch Expression Web and open the page you want to insert the interactive button in.
Position your cursor where you want to insert the interactive button, go to the Insert menu and choose Interactive Button…
Expression Web will prompt you with the Interactive Buttons dialog box as shown below:
The Interactive Buttons dialog box lets you add and set certain properties for the button.
The first section viz. ‘Preview:’ (See image above) shows a preview of the button that has been selected in the ‘Buttons’ list given below it. Go through the list of available buttons and choose an appropriate button for your page. In ‘Text:’ box type the text that should be displayed on the button. In the ‘Link:’ box type/browse to the hyperlink location for the button. This link could be a link to another page in the current web site or to another web site, or to an email address. I like the transparent appearance of Glass Tab series, since the color of Glass Tab 3 goes well with my banner image in this example, I will go in for it.
This tab lets you set button text and font properties. Font, Font Style and Size specify the font face, style and size. ‘Original Font Color’ is the text color. ‘Hovered Font Color’ specifies the color of the text when mouse pointer is hovered over it and ‘Pressed Font Color’ specifies the text color when the button is pressed. ‘Horizontal and Vertical Alignment’ specify the alignment of the text.
This tab displays image dimension options like ‘Width, Height and Maintain proportions’. ‘Create hover image’ checkbox when checked, changes the appearance of the button over mouse hover and ‘Create pressed image’ changes the button when clicked. ‘Preload button images’ loads all the button images in the memory. Choose ‘Make the button a JPEG image and use this background color:’ to set a solid background color else choose ‘Make the button a GIF image and use a transparent background’ to set a transparent background. Click OK when you are done and the button would be placed on your page.
You can create multiple buttons following this procedure. For example I would like to create a navigation bar with a series of similar buttons with same properties. But instead of going through the same process of creating buttons that we saw earlier, for each button, it would be easy and quick to make copies of an existing button and then edit the button labels and links for each such button created. Let us see how to do that.
Copy Interactive Buttons
1. Right click on the button you want to replicate and say Copy.
2. Position the cursor where you want to place the copy of the button, right click and choose Paste (else go to the Edit menu and choose Paste).
Now edit the button label and its link.
Edit Interactive Buttons
1. Right click on the new button (copy that you pasted) and choose ‘Button Properties’ from the menu. This would prompt the Interactive Buttons window we saw earlier.
2. Change the ‘Text’ and ‘Link’ properties of the button, click on OK and you are done.
NOTE: In this example we wanted to create similar type of buttons since we are displaying them on the navigation bar. Hence we did not change any other properties for the button like font and image. But you can copy a button to a different location on the page and then customize it individually in the same window by changing its Font and Image properties like we saw under the heading ‘Creating an Interactive Button’.
Saving Interactive Buttons
The interactive buttons are made up of several image files. When you add an interactive button, Expression Web adds these image files to your page and prompts you to save them too. To save the document, click on ‘Save’ from the Common toolbar. The ‘Save Embedded Files’ window is prompted that displays the list of button images that are embedded into the document (and any related files). Click on OK to save.
You can choose not to save the embedded files in your website folder and use them from the current location on the disk. For this click on ‘Action’ in Save Embedded Files window and choose ‘Don’t Save this file. Use the current file on disk.’ See image below:
You can also change the file types of the images, click on Picture File Type…
This article was an introduction to interactive buttons. We learnt how to add buttons, how to link and edit them Expression Web. In our next article we will take a look at behaviors and how to add them to your page elements. I hope you liked the article and thank you for viewing it.