<html><!-- #BeginTemplate "/Templates/coolblue-inside.dwt" -->
<head>
<!-- #BeginEditable "doctitle" --> 
<title>Creating Navigational Buttons in Macromedia Fireworks</title>
<meta name="title" content="Creating Navigational Buttons in Macromedia Fireworks">
<meta name="description" content="Learn how to create navigational buttons in Macromedia Fireworks.">
<meta name="keywords" content="web site design, web design, web designer, beginner, tutorial, getting started, website design, design resources, html help, banners, wanna-be, learn web design, learn website design, beginning web design, website help, domain names, web hosting, javascript, dhtml, graphics links, sound loops, free sounds, sound wavs, site promotion, places to add your url, useful links, free scripts, getting started in website design, add your url, search portal, postcard, guestbook, making money on the internet, affiliate programs, finding a web site sponsor, website sponsor, free web space, free home page, free email, web designer, designing links">
<META NAME="rating" content="general">
<META NAME="distribution" CONTENT="global">
<META NAME="resource-type" CONTENT="document">
<META NAME="last-modified" CONTENT="2008/03/28">
<META NAME="robots" content="index,follow">
<META NAME="revisit-after" content="10_days">
<LINK REL=stylesheet HREF="/mystyle.css" TYPE="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- #EndEditable --> 
<LINK REL=stylesheet HREF="http://www.webmajestic.com/mystyle.css" TYPE="text/css">
</head>
<body bgcolor="#79849A" topmargin="0">
<!-- Kontera ContentLink(TM);--> 
<script type='text/javascript'>
var dc_AdLinkColor = 'green' ;
var dc_UnitID = 14 ;
var dc_PublisherID = 11118;
var dc_adprod = 'ADL' ;
</script>
<script type='text/javascript' 
src='http://kona.kontera.com/javascript/lib/KonaLibInline.js'>
</script>
<!-- Kontera ContentLink(TM) --> 
<table border="0" cellpadding="0" cellspacing="0" width="750" align="center">
  <tr> <!-- Shim row, height 1. --> 
    <td><img src="images/shim.gif" width="750" height="1" border="0"></td>
    <td><img src="images/shim.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr valign="top"> 
    <td bgcolor="#FFFFFF"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="10">
        <tr> 
          <td width="76%" valign="top"> 
            <div align="center"> 
              <table border="0" cellpadding="0" cellspacing="0" width="750">
                <!-- fwtable fwsrc="home2.png" fwbase="index.gif" --> 
                <tr> <!-- Shim row, height 1. --> 
                  <td><img src="images/shim.gif" width="217" height="1" border="0"></td>
                  <td><img src="images/shim.gif" width="533" height="1" border="0"></td>
                  <td><img src="images/shim.gif" width="1" height="1" border="0"></td>
                </tr>
                <tr valign="top"><!-- row 1 --> 
                  <td rowspan="2"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="217" height="263" border="0" usemap="#hoover_index_r1_c1MapMap"><map name="hoover_index_r1_c1MapMap"><area shape="rect" coords="8,9,198,245" href="index.html" alt="Home" title="Home"></map></td>
                  <td><img name="index_r1_c2" src="images/index_r1_c2.gif" width="533" height="230" border="0" usemap="#hoover_index_r1_c1Map"><map name="hoover_index_r1_c1Map"><area shape="rect" coords="447,176,531,213" href="http://www.webmajestic.com/contact.html" alt="Contact Webmajestic" title="Contact Webmajestic"><area shape="rect" coords="349,175,444,213" href="http://www.webmajestic.com/resources.html" alt="Resources" title="Resources"><area shape="rect" coords="3,175,79,214" href="http://www.webmajestic.com/web_lessons.html" alt="Web Design Lessons" title="Web Design Lessons"><area shape="rect" coords="83,176,169,214" href="http://www.webmajestic.com/templates" alt="Web Design Templates" title="Web Design Templates"><area shape="rect" coords="170,177,262,213" href="http://www.webmajestic.com/articles" alt="Web Design Articles" title="Web Design Articles"><area shape="rect" coords="263,177,349,212" href="http://www.webmajestic.com/graphics" alt="Free Web Graphics" title="Free Web Graphics"><area shape="rect" coords="4,4,527,165" href="index.html" alt="Home" title="Home"></map></td>
                  <td><img src="images/shim.gif" width="1" height="230" border="0"></td>
                </tr>
                <tr valign="top"><!-- row 2 --> 
                  <td background="images/index_r2_c2.gif" valign="middle">
                    <div align="right"><!-- Google CSE Search Box Begins --> 
                      <form id="searchbox_001927420258398297637:nplqsaxspt4" action="http://www.webmajestic.com/results.html">
                        <input type="hidden" name="cx" value="001927420258398297637:nplqsaxspt4" />
                        <input name="q" type="text" size="30" value=" " />
                        <input style="background:CCCCCC; border-width:1px" type="submit" name="sa" value="Search" />
                        <input type="hidden" name="cof" value="FORID:11" />
                      </form>
                      <script type="text/javascript" src="http://google.com/coop/cse/brand?form=searchbox_001927420258398297637%3Anplqsaxspt4"></script>
                      <!-- Google CSE Search Box Ends --></div>
                  </td>
                  <td><img src="images/shim.gif" width="1" height="33" border="0"></td>
                </tr>
              </table>
              
              
            </div>
            <!-- #BeginEditable "content" --> 
            <div align="center"> 
              <h1><b>Step 5b: Creating basic navigational buttons in Macromedia 
                Fireworks </b></h1>
              <table width="100" border="0" cellspacing="0" cellpadding="2" align="left">
                <tr> 
                  <td><font face="Arial, Helvetica, sans-serif" size="2"> 
                    <script type="text/javascript"><!--
google_ad_client = "pub-3142337522589164";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text";
//2006-12-07: webmajestic
google_ad_channel = "6999496151";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0033FF";
google_color_text = "000000";
google_color_url = "0033FF";
//--></script>
                    <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                    </font></td>
                </tr>
              </table>
              <p align="left">That wasn't too bad, was it. Now I'd like to have 
                a few navigational buttons on my website. Open a new canvas by 
                selecting File, New and for the canvas size select 100 width by 
                25 height. The color can be white or if you want to choose another 
                color, click on the colored box near custom. Clicking on it brings 
                up the color palette. You can select any color in the palate to 
                use for your background color. You can also type a color number 
                in or use the Eyedropper Tool to select a color from anywhere 
                in the window. I choose color number, #009999 which is Teal so 
                that it matches with our header. Using the Text Tool, type in 
                About Us on the canvas. Next export the graphic into your c:\website\images 
                directory. It should look like this:</p>
              <p align="left"><img src="images/about.gif" width="100" height="25"></p>
              <p align="left">Next save your work into C:\website\source. Call 
                it button_about.png. Now you need to edit your text by double 
                clicking on it and selecting the text, type in Contact Us. Next 
                export the graphic into your c:\website\images directory. Next 
                save your work into C:\website\source. Call it button_contact.png. 
                Now you need to edit your text once more by double clicking on 
                it and selecting the text, type in Home. Next save your work into 
                C:\website\source. Call it button_home.png.</p>
              <p align="left">Now you have create these 3 buttons:</p>
              <table width="371" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                  <td> 
                    <div align="center"><img src="images/about.gif" width="100" height="25"></div>
                  </td>
                  <td> 
                    <div align="center"><img src="images/contact.gif" width="100" height="25"></div>
                  </td>
                  <td> 
                    <div align="center"><img src="images/home.gif" width="100" height="25"></div>
                  </td>
                </tr>
              </table>
              <p>
                <script type="text/javascript"><!--
google_ad_client = "pub-3142337522589164";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
//2006-12-07: webmajestic
google_ad_channel = "6999496151";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0033FF";
google_color_text = "000000";
google_color_url = "0033FF";
//--></script>
                <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
              </p>
              <p align="left"></p>
              <table width="673" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                  <td><a href="webguide5a.html"><img src="images/prevstep.gif" width="93" height="16" border="0" alt="Lesson 5a"></a></td>
                  <td> 
                    <div align="right"><a href="webguide5c.html"><img src="images/nextstep.gif" width="93" height="16" border="0" alt="Lesson 5c"></a></div>
                  </td>
                </tr>
              </table>
              <a href="webguide.html">Step 1</a> | <a href="webguide2.html">Step 
              2</a> | <a href="webguide3.html">Step 3</a> | <a href="webguide4.html">Step 
              4</a> | <a href="webguide5.html">Step 5</a> | <a href="webguide6.html">Step 
              6</a> | <a href="webguide7.html">Step 7</a> | <a href="webguide8.html">Step 
              8</a> | <a href="webguide9.html">Step 9</a> | <a href="webguide10.html">Step 
              10</a></div>
            <div align="center">
              <div align="center">
                <script type="text/javascript"><!--
google_ad_client = "pub-3142337522589164";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al";
//2006-12-07: webmajestic
google_ad_channel = "6999496151";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0033FF";
google_color_text = "000000";
google_color_url = "0033FF";
//--></script>
                <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
              </div>
            </div>
            <!-- #EndEditable --> 
            <div align="center"> </div>
            <div align="right"></div>
          </td>
        </tr>
      </table>
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="top"><!-- row 3 --> 
    <td background="images/hoover_index_r3_c1.gif" valign="middle"> 
      <div align="center"><a href="http://www.webmajestic.com">Home</a> | <a href="http://www.webmajestic.com/webguide.html">Tutorials</a> 
        | <a href="http://www.webmajestic.com/userpages">Free Site Builder</a> 
        | <a href="http://www.webmajestic.com/templates">Templates</a> | <a href="http://www.webmajestic.com/articles">Articles</a> 
        | <a href="http://www.webmajestic.com/graphics">Free Web Graphics</a> 
        | <a href="http://www.webmajestic.com/awardsprogram.html"> </a> <a href="http://www.webmajestic.com/resources.html">Web 
        Resources</a> | <a href="http://www.webmajestic.com/links.html">Links</a> 
        | <a href="http://www.webmajestic.com/privacy.html">Privacy</a> | <a href="http://www.webmajestic.com/contact.html">Contact</a></div>
    </td>
    <td><img src="images/shim.gif" width="1" height="34" border="0"></td>
  </tr>
</table>
<div align="center"><font color="#CC6600"><font color="#FFFFFF"> © 2000-2008 <a href="http://www.webmajestic.com">Webmajestic.com</a>. 
  All Rights Reserved</font></font><font color="#FFFFFF">.</font> </div>
</body>

<!-- #EndTemplate --></html>