Criar um botão é simples, mas requer atenção a vários passos que devem ser seguidos.

 

Inicie o Fireworks e crie um novo documento com dimensões de 35 x 35 px:

Usando a ferramenta "Elipse" e segurando a tecla "Shift" pressionada, desenhe um círculo no palco:

Mude o preenchimento para radial e ajuste a posição da cor, clicando e arrastando o ponto de ajuste (pontinho redondo), do centro para o lado superior esquerdo do círculo, como mostra a figura:

Com o círculo selecionado, pressione "Ctrl + C" para copiá-lo, depois pressione "Ctrl + V". Um novo círculo idêntico estará sobre o primeiro.

Faça o seguinte, diminua o tamanho deste segundo círculo e posicione ele exatamente no meio do círculo maior. Para diminuir o tamanho proporcionalmente use o inspetor de propriedades (Painel Properties).

Depois vamos inverter a posição do segundo círculo. com ele selecionado, clique na ferramenta "Flip Vertical" e logo em seguida na ferramenta "Flip Horizontal". Ambas estão juntas, provavelmente abaixo do painel "Properties".

Nosso trabalho estará assim:

Para facilitar o trabalho, aumente o zoom para 200%, clicando no valor logo abaixo do palco.

Use os pontos de ajuste para aumentar o tamanho do radial que preenche o botão. Clique no pontinho quadrado e arraste um pouco para a esquerda.

Selecione o círculo maior, e vá ao painel "Properties", clicando no sinal de "+" para adicionar um leve efeito de sombra:

Configure a sombra (Shadow) assim:

Ótimo, agora basta inserir um texto e o nosso botão já tem uma aparência definida.

Bom agora falta darmos ao nosso botãozinho um efeito rollover.

Pressione a tecla "Shift" e clique sobre todos os objetos que estão no palco para selecioná-los (os dois círculos e o texto). Depois pressione "Ctrl + G" para agrupá-los.

Feito isso, pressione a tecla "F8" no seu teclado para transformar o grupo em um símbolo. Na janela que surgir, selecione "Button" e dê um nome a ele. Veja:

Um slice será criado no palco por sobre o botão. Dê um duplo clique sobre o slice e uma nova janela aparecerá para que possamos configurar a aparência do nosso botão quando passarmos o mouse sobre ele e quando o clicarmos. Isso nós faremos navegando pelas abas "Up", "Over", "Down" e "Down While Over".

Selecione novamente nesta janela os dois círculos e o texto, e agrupe (Ctrl + G). Passe para a aba "Over" e clique no botão "Copy Up Grafic". As imagens da posição Over serão copiadas para a posição Up. Selecione a imagem e pressione "Ctrl + Shift + G" para desagrupar. Mude a cor do texto. Agrupe novamente.

Passe para as abas seguintes ("Down" e "Over While Down") e repita a operação, clicando no botão "Copy Over Grafic" e " Copy Down Grafic".

Feito isso clique em "Done".

Nosso botão está pronto, mas ainda falta o link. Isso pode ser feito no inspetor de propriedades, com o slice selecionado:

Setado o link vamos exportá-lo. Clique no botão "Quick Export" que é um pequeno ícone do Fireworks localizado no canto superior direito do palco. No menu que surgir, vá até Dreamweaver e clique em "Export Html".

Escolha a pasta para onde você quer salvar o trabalho no seu computador e preste atenção nos seguintes detalhes:

Na primeira caixa de texto você vai inserir o nome do arquivo html que será gerado;

No primeiro drop down, certifique-se de que esteja selecionado "Salvar como o tipo: Html and Images";

As configurações dos drop downs seguintes são: "Export HTML File" e "Export Slices";

Se você desejar você pode colocar as imagens dos botões em um subdiretório selecionando a caixa "Put Images in Subfolder". Veja a imagem:

Pronto! seu botão está criado e todo o código javascript necessário para que haja o efeito rollover nas imagens está embutido no arquivo html.