Criando um site

>> Arquivo novo, defina largura em 799px por 500px de altura.

>> Criando o Topo

1º Passo -- Com a ferramenta retângulo crie um objeto com as seguintes características:
Largura: 799
Altura: 130
Posição X: 0
Posição Y:0

2º Passo -- Vamos colocar um preenchimento, na barra propriedades clique em Categoria de preenchimento e selecione a opção Linear, por padrão o Fireworks cria um degrade do branco para o preto. Vamos trocar a cor somente do preto clicando no baldinho de tintas. Clique no marcador da cor preta e altere para a cor Bege #999966.

3º Passo -- Posicione a guia do degrade da seguinte maneira:

4º Passo -- Configure a opacidade da camada para 70%.

>> Criando o Menu

1º Passo -- Com a ferramenta retângulo, procure criar um retângulo de 390px de largura por 20 de altura, com borda na cor #999999 do tipo Pixel Suave. Coloque em Arredond. do retângulo 90.

Sua posição será X=403 e Y=118.

2º Passo -- Adicione, em Efeitos+, Brilho interno com:

Largura: 3
Opacidade: 65%
Suavidade: 4
Deslocamento: 0
Cor: #999999

3º Passo -- Adicione agora um gradiente linear do Branco para o cinza #CCCCCC. Posicione o gradiente como na figura abaixo.

>> Adicionando o Texto do menu

1º Passo -- Selecione a ferramenta texto, e digite as opções:

QUEM SOMOS - EVENTOS - NOTICIAS - LIVROS - CONTATO

Tamanho 12, na cor #666666, fonte Arial, na guia suavização de serrilhado defina "Sem suavização de serrilhado".

2º Passo -- Para ficar mais organizado vamos criar uma linha de 1x19 com a ferramenta linha e com a mesma cor da borda do retângulo do menu #999999.

>> Interatividade do Menu

1º Passo -- Selecione um dos texto do nosso menu, por ex. QUEM SOMOS, aperte F8, irá abrir a janela chamada "Propriedade do Símbolo", configure da seguinte forma:

Nome: quemsomos
Tipo: botão

2º Passo -- Pressione F11 para abrir o painel "Biblioteca", é para lá que vão todos os símbolos, gráficos, animações e botões, veja que só tem um botão.

3º Passo -- Dê dois cliques sobre o objeto "Botão" que esta na biblioteca, irá abrir a seguinte tela:
Clique no botão Editar para entrar nas propriedades do botão.

Na parte superior da caixa temos as seguintes propriedades:

Acima: Nesta propriedade você deverá configurar a aparência do menu estático, ou seja, esta é a forma que o visitante irá ver assim que entrar no site.
Sobre: Nesta propriedade você deverá configurar a aparência do menu enquanto o visitante estiver com o mouse em cima do menu.
Abaixo: Nesta propriedade você deverá configurar a aparência do menu quando o visitante clicar em cima dele.
Sobre durante o estado Abaixo: Nesta opção você deverá configurar a aparência do menu quando o visitante passar o mouse por cima de um menu já clicado.
Área ativa: Esta propriedade serve para você aumentar ou diminuir a área em que um botão pode ser clicado.

4º Passo -- Nas propriedades "Sobre - Abaixo - Sobre durante o estado abaixo", você irá perceber que no canto inferior direito do painel em branco tem um botão "Copiar gráfico acima".
Clicando-o, você irá fazer uma cópia automaticamente do objeto que esta na tela anterior.

Após terminar de configurar clique em concluído. Repita para todos as opções do menu.

Para visualizar como eta ficando as ações dos botões clique na opção Visualização.

>> Criação do Logotipo

O logotipo de um site é muito importante que seja bem elaborado e que agrade o visitante assim que ele botar os olhos no site, neste exemplo iremos criar um bem simples mas que dará um visual bem interessante ao layout.

Fontes utilizadas:
Alliance Extended, e Fantastic Creatures

1º Passo -- Com a ferramenta texto e com a fonte Alliance Extended digite a palavra "uni.books", tamanho 14, na parte (uni.) atribua a cor #333333 e em (books) a cor #996600. Posição X=35 e Y=70.

2º Passo -- Agora vamos por a imagem do logotipo para isso utilize a ferramenta texto, digite a letra "q" (sem as aspas), e escolha a fonte "Fantastic Creatures" com o tamanho 79, cor #333333. Ajuste as propriedades para W=77 H=97 X=85 Y=16.

>> Criação do Banner

1º Passo -- Com a ferramenta retângulo, crie um objeto com as seguintes medidas 482 x 74 e com a cor de preenchimento #F4F4F4 e borda #999999 e arredondamento dos cantos em 22.

2º Passo -- Duplique o retângulo acima, atribua as medidas 470x62 e com a cor de preenchimento #999999, sem cor de contorno e cantos retos.

Selecione os dois retângulos, vá no menu Modificar, Alinhar, Centralizado Vertical e Centralizado Horizontal.

3º Passo -- Com a ferramente texto, digite a palavra Publicidade e coloque no canto superior direito do banner. Fonte Arial tamanho 12, cor #999999.

>> Menu em Cascata

Ficaria muito ruim se colocássemos muitos menus em seu topo, estão é para isso que existe o menu em cascata, quando passarmos o mouse em cima de algum menu do topo irá se abrir mais opções.

1º Passo -- Selecione o slice (verde) no menu QUEM SOMOS, você irá perceber que um alvo surgiu no meio dela.

2º Passo -- Clique em cima deste alvo, uma caixa de opções irá surgir, clique em "Adicionar Menu Pop-UP".

3º Passo -- A janela POP_Up irá se abrir, logo de cara você terá três opções:

Texto: Local onde você irá configurar o nome para as opções do menu;
Link: Local onde você irá configurar o link para as opções do menu;
Target: Local onde a página irá abir.

Por default o programa já cria um campo de cada para você configurar, então basta clicar duas vezes em cima de cada campo para por as informações.

Quando você terminar de configurar automaticamente novos campos são adicionados logo abaixo.

HISTÓRIA - historia.htm - _blank
LOJAS - lojas.htm - _blank
CLIENTES - clientes.htm - _black