Microsoft Expression Tutorials

One of the fun things many websites have are neat looking
buttons that change as you move your mouse over them. In the past you had to
write a lot of HTML and javascript to add something like this to a site. Now,
as this tutorial will demonstrate, Microsoft Expression Web has made it easy
for us to create this interactive buttons.

To start off with create a new html page. This page is going
to be very basic. All we are going to do is create a bar of navigation buttons.

Obviously you would probably not have a web page that only contained navigation
buttons, but this tutorial is going to focus on creating these buttons first.
Then you can feel free to use what you learned here along with other Expression
Web tutorials on this site to create a full application.

To begin select Insert -> Interactive Button from the
menu bar at the top of the Expression Web window. This will bring up the
Interactive Button's dialog box. Pick a button shape that you like, I'm partial

to the Braided Row1 choice. In the text box put a description of what this
button will do. A lot of times you will see a site have the first button in
their navigation go back to the main homepage. In that case we would set our
button text to Home and our link would most likely point to default.htm.

Next click on the Font tab at the top of the Interactive
Buttons dialog box. Here you can do a lot of things. Expression Web really
gives you full control. I like the default font it creates with the link so I

will leave it, but if you wish to change this to a different font feel free to.
One of the most useful parts of this dialog is at the bottom, where you can set
the colors for the font based on when the user hovers over it or clicks on it.
Lets set our Hovered Font Color to Red and our Pressed Font Color to Green.

Then click OK and Expression Web will add the button to our
page. Now lets create more of this same kind of button. You can do that easily
by clicking the button and copying and pasting it. Make 5 buttons total. Then

you can click on each button and select Format->Properties from the menu
bar. This will bring up the Interactive Buttons dialog box, where you can
change the text on the button along with the link. After you have set up all
your buttons save the page and preview it in your browser. Note: When you save
the page it will ask you to save all the images that were created for you. Make
sure you save these so your buttons will work.

This is what your page should look like if you did
everything correctly. Notice how the button text changes color as you go over
it. If you would like to see all the code that Expression Web created for you
open up your webpage and in Expression Web and select View -> Page ->
Code from the menu bar. To get back to the default designer select View ->
Page -> Design.