Open the file in Dreamweaver. Select either “Code” or “Split” view.

Put your cursor where you would like the buttons to appear and paste this code,

<p style="margin-top:7px;" id="smallBtn_blue">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_green">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_orange">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_purple">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>

If you would like your buttons to be on the right side of the page you will need to wrap this div around them,
<div style=”float:right; margin-top:7px; margin-left:15px;”>
</div>

Here is what that code would look like,

<div style="float:right; margin-top:7px; margin-left:15px;">
<p style="margin-top:7px;" id="smallBtn_blue">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_green">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_orange">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_purple">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
</div>

To change the text on the buttons select “Your Button Name” and type over it what you would like. Look at the blue text below for an example.
<p style=”margin-top:7px;” id=”smallBtn_blue”> <a style=”text-decoration:none;” href=”#”>Your Button Name</a></p>

To link your button select the “#” and type over it where you would like it to link to. Look at the blue text below for an example.
<p style=”margin-top:7px;” id=”smallBtn_blue”>
<a style=”text-decoration:none;” href=”#“>Your Button Name</a></p>

Please feel free to email me if you have any questions, gauntzd@wou.edu.