Neste tutorial irei mostrar a vocês como criar um site completo utilizando o Fireworks,esta é só a primeira parte,no final da série você estara pronto para criar um site com menus,topo,banner,etc.

Bem vindos fire-experts a mais um tutorial de Fireworks,antes de mais nada eu gostaria de agradecer pela audiência que vocês tem nos dado nesses dias que estamos online,todos vocês nos dão uma força incrível para nós sempre continuarmos fazendo coisas desse tipo.

Bom muita gente me pergunta. Leonardo por que você utiliza o Fireworks? e eu sempre respondo a mesma coisa “ Sinto-me bem trabalhando com ele, é uma ferramenta que me prende ao projeto,cada vez que crio uma coisa me empolgo e crio outra e mais outras coisas” na minha opinião ele ainda vai evoluir muito,é uma ferramenta excelente para se trabalhar com sites e com imagens também,bom para provar o que eu digo eu preciso mostrar a vocês, então é ai que pensei em criar um tutorial que em vários passos eu possa mostrar tudo isso.

Ingredientes

Fireworks MX 2004 (é a versão atual da ferramenta,muito mais agradável de mexer,proporciona movimentos mais precisos e suaves)

Banco de Imagens (é muito importante você ter um pasta com muitas imagens para qualquer ocasião de sites,é ai que começam surgir as idéias)

Criatividade e Paciência (talvez as mais importantes para você se dar bem)

Neste tutorial mostrarei a vocês como criar um site completo com o Fireworks,veja abaixo uma lista do que abordarei nos artigos no decorrer das semanas.

* Definindo um tamanho
* Como criar um logotipo sem mistérios
* Como criar um topo de site agradável
* Menu rollover e menu popup
* Slices para exibir informações
* Tratamento de imagens

Desenvolvendo Full site com o Fireworks – Parte 1

>> Dimensões da tela
Um dos erros que as vezes cometemos é criar um site com seu tamanho “width” definido de forma errada,isso fará com que alguns visitantes com resoluções 800x600 possam não visualiza-lo de maneira correta,então quando você for criar um novo documento no Fireworks,defina seu tamanho “width”(Largura) com tamanho de “ 799 ” pixel,já sua altura “height” você não terá que ter tanta preocupação por que vai ser a área onde o visitante irá navegar livremente para ver possivelmente os destaques da pagina.

>> Criação do topo
Com certeza essa é uma das fazes de criação mais trabalhosas para um webdesign, é agora que ele deve pensar muito antes de criar um topo para o site, o primeiro lugar que o visitante olha quando entra em um site é o topo, então se ele não estiver em perfeita harmonia o visitante não terá prazer em acessa-lo.

1º passo: Com a ferramenta "Rectangle Tool" crie um retângulo com os tamanhos "width 779" e "height 130",a borda você pode por na cor #999999 do tipo "Pixel Soft com 1 pixel" veja:


A imagem acima esta um pouco reduzida para caber na tela.

2º passo: Para dar uma aparência mais bonita iremos adicionar o famoso efeito "degrade", com o topo selecionado clique na guia "Fill Category" > "Gradient" > "Linear" veja:


Perceba que seu banner ficou com essa característica:


Por padrão o Fireworks cria o efeito degrade nas cores Preta e Branco mas para esse nosso exemplo eu quero trabalhar com outras cores,para trocar a cor clique na caixa de cores como mostra na figura abaixo:


Perceba na imagem acima que eu coloquei a cor Branca #FFFFFF e a cor Bege escuro #999966, para dar um toque melhor no topo,la em cima em adicionei uma opacidade em 70%,configure tudo como mostrado nesta imagem,saia da caixa de cores e posicione o guia do seu degrade da seguinte forma, veja:


Pronto,acabamos de criar o topo,agora nós precisamos criar os menus,o logotipo etc,mas isso você verá mais adiante.

>>Criando o menu do topo

Vocês perceberam que o topo que criamos é bem simples,mas é muito bonito e "clean", agora iremos criar o seu menu, devemos cria-lo de maneira com que fique agradável quando o visitante acessar seu site,então vejam como criei.

1º passo: Com a ferramenta "Rectangle Tool" crie um retangulo com largura (width) mais ou menos a metade do topo e sua altura (height) com "20 pixels", para cor de fundo defina #CCCCCC e para a borda a cor #999999 do tipo "Pixel soft" com 1 pixel,depois de criado posicione-o na parte inferior do topo de maneira que fique igual a imagem abaixo, veja:


Perceba que o fundo menu ficou um pouco grosseiro,para deixa-lo mais bonito arredonde sua borda em 90% na guia "Rectangle roundness" veja:

Veja agora como ficou agora:


2º passo: Agora iremos adicionar os textos que futuramente serão os link do nosso menu,com a ferramenta "Text" digite algumas opções utilizando a fonte 04b_21 no tamanho "8" na cor #666666 e na guia Anti-aliasing level defina " No Anti-Alias ",veja:


As opções do menu que digite foram:

QUEM SOMOS, EVENTOS, NOTICIAS, LIVROS, CONTATO

Vejam como esta ficando nosso topo:


3º passo: Para ficar mais organizado vamos criar uma linha de 1X20 com a ferramenta "Line Tool" com a mesma cor da borda do fundo do menu,veja como devera ficar:


Dica extra: Percebam que para dar um toque mais "clean" no fundo do menu,eu acrescentei um efeito "Inner Glow" com a cor #999999,e um efeito degrade linear na cor #FFFFFF para #CCCCCC,veja.



Se baseie nas guias do degrade para fazer o efeito certinho, veja:


Ficou um menu muito agradável e que combinou com o topo perfeitamente.

>>Interatividade com o Menu

Vocês viram anteriormente como criar a aparência do menu,agora eu irei mostrar como trabalhar com "Botão",essa opção é muito interessante,quando passarmos o mouse em cima dos Botões do menu eles irão trocar de cor,essa é apenas uma das coisas que podemos fazer com essa opção.

1º passo: Selecione uma das opções do menu e precione ( F8 ), irá abrir uma janela chamada "Symbol Properties",nela configure da seguinte forma, veja:


Em "Name" você devera informar um nome para seu objeto e em "Type" você devera selecionar o opção "Button" que sera nosso botão,depois de ter configurado clique no botão ok.

2º passo: Precione ( F11 ) para abrir o painel "Library",é para lá que vão todos os botões que você criar, vejam que só temos um botão:


3º passo: Dê dois cliques sob o objeto "Botão" que esta na "Library" ira abrir a seguinte tela, veja:


Você irá perceber que agora temos o botão "Edit" clique sob ele e você entrara nas propriedades do botão,na parte superior direita temos as seguintes propriedades:


Veja para que ser cada uma dessas propriedades:

Up - Nesta propriedade você devera configurar a aparência do menu estático,ou seja, esta é a forma que o visitante irá ver assim que entrar no seu site.

Over - Nesta propriedade você devera configurar a aparência do menu enquanto o visitante estiver com o mouse em cima dele.

Down - Nesta propriedade você devera configurar a aparência do menu quando o visitante clicar em cima dele.

Over While Down - Nesta opção você devera configurar a aparência do menu quando o visitante passar o mouse por cima de um menu já clicado.

Active Area - Esta propriedade serve para você aumentar ou diminuir a área em que um botão pode ser clicado

Agora ficara critério de cada um, não é necessário configurar todas essas propriedades, eu gosto de utilizar apenas a "UP" e a "Down".

4º passo: Nas propriedades "Over,Down e Over While Down" você ira perceber que no canto inferior direito do painel em branco tem o seguinte botão:


Clicando-o você irá fazer uma cópia automaticamente do tipo de menu que esta na propriedade anterior a ele,por exemplo, clicando no botão "Copy Up Graphic" da propriedade "Over" ele irá por na tela para você o menu que esta na propriedade "Up" e assim por diante, essa opção é muito interessante,pois você não precisara toda hora ficar Ctrl + C e Ctrl + V.

Bom com o menu na tela você poderá modifica-lo da maneira que quiser,poderá até mesmo adicionar botões que ja vem prontos junto com o Fireworks clicando no botão "Import a Button".


Depois de tudo configurado ao seu gosto clique no botão "Done" para sair desta tela.

Faça os mesmos passos para todos os menus que quiser, para visualizar como ficou as ações do seu Botão clique na guia "Preview" do Fireworks.

Continuação parte 2
Como criar o logotipo, o meu em cascata e o local para banner do nosso topo,então vamos lá:

Ingredientes:

* Fireworks MX 2004
* Fonte Fantastic Creatures ( Fonte que contem a imagem do logotipo )
* Fonte Alliance Extended ( Fonte para o nome do logotipo )

Abram o arquivo .png do topo que vocês criaram na matéria anterior, para quem não sabe é este abaixo:


>>Criação do logotipo
O logotipo de um website é muito importante que seja bem elaborado e que agrade o visitante assim quem ele bater o olho no site, neste exemplo iremos criar um bem simples mas que dará um visual bem interessante ao layout.

1º passo: Com a ferramenta "Text Tool" e com a fonte Alliance Extended digite a palavra ( uni. ), atribua a cor #333333 e o tamanho 14,veja:


2º passo: Novamente com a ferramenta "Text Tool" escreva a palavra ( books ), atribua a cor #996600 e o tamanho 14, ponha esta palavra ao lado da criada anteriormente,veja:


Olhe como está ficando:


3º passo: Agora vamos por a imagem do logotipo para isso utiliza a ferramenta "Text Tool", digite a letra ( q ) e escolha a fonte "Fantastic Creatures" com tamanho 79, coloque-a do jeito que mostra abaixo.


>> Criação do banner
A área destinada ao banner é onde você atravez de um sistema em php por exemplo irá admistrar os anúncios dos seus patrocinadores e parceiros, banners são fundamentais em um site, os padrões de banners para um topo de site é de 468 x 60 pixels.

Neste exemplo eu irei mostrar apenas como criar uma área que futuramente iremos fatia-la para inserção de um banner:

1º passo: Com a ferramenta "Rectangle Tool" crie um retângulo de 482 x 74 com cor de fundo # F4F4F4 com cor de borda #999999 e arredondamento das pontas em 22



2º passo: Novamente crie um retângulo,mas desta vez com a cor de fundo um pouco mais escura, neste caso escolhi #CCCCCC, não se preocupe com a cor deste retângulo, por que é ai que ira aparecer o banner futuramente.


3º passo: Com a ferramenta "Text Tool" escreva a palavra ( publicidade ) acima do banner.

>> Menu em cascata
Como vocês virão este layout que estamos fazendo é do estilo site pequeno, ele ficaria ruim se colocasemos muitos menus em seu topo, então é para isso que existe o menu em cascata,quando passarmos o mouse em cima de algum menu do topo ele descer varias opções.

Na matéria anterior eu mostrei como criar botões no menu, em cada botão é criado uma Slice definida pela cor verde, se esta slice for muito pequena passe o mouse por um das linhas vermelhas que cercam a slice e arraste para aumentar sua área ativa:


1º passo: Clique em cima desta Slice verde, 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 "Add Pop-up Menu"


3º passo: A janela Pop-up Menu Editor irá se abrir


Logo de cara você ve tres opções:

Text - Local onde você ira configurar o nome para as opções do menu
Link - Local onde você ira configurar o link para as opções do menu
Target - Você ira definir se a pagina ira abrir em uma nova janela ou se ela vai abrir na mesma janela

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ê termina de configurar automaticamente novos campos são adicionados logo abaixo, caso queria adicionar mais opções manualmente basta clicar no sinal ( + ) que fica na parte superior da janela.

Veja abaixo algumas opções que eu adicionei:



Também é possível criar sub-opções nas opções, para isso selecione uma opção do menu (menos a primeira) e clique no ícone "Indent Menu"



Perceba que a opção "Lojas" foi um pouco mais para o lado,isso quer dizer que ela vai ser uma sub opção da opção "História" que esta acima dela, para voltar ao normal clique no icone "Outdent Menu" que fica ao lado do "Indent Menu", mas esse não será nosso caso.

Clique no botão Next para ir para a guia "Appearance", é nela que você vai encontrar todas as opções para trabalhar com a aparência do menu de opções.


Nessas opções você poderá configurar as seguintes aparências:

Cells - Html ou Imagem, para uma coisa mais simples escolha Html, se você quiser definir algo mais robusto escolha image.

Vertical Menu ou Horizontal Menu, você poderá definir se as opção irão aparecer na posição vertical ou horizontal.

Font - Escolha a fonte das opções do seu menu.

Size - Define o tamanho da fonte

Ao lado de size você ira encontrar opções para deixar em Negrito,Itálico, alinhamento a esquerda,a direita e ao centro.

Up State - Define as configurações quando o mouse não estiver em cima das opções.

Over State - Define as configurações quando o mouse estiver em cima das opções.

Configure tudo da maneira que achar que fique mais bonito com o visual do seu site e clique no botão Next.

A próxima guia é "Advance", nela você ira configurar algumas coisas avançadas para a aparência.


Veja as opções que você poderá configurar na guia "Advance":

Cell width - Nesta opção você poderá definir a largura da célula como automática ou poderá definir um numero de pixel.

Cell height - Nesta opção você poderá definir a altura da célula como automática ou poderá definir um numero de pixel.

Cell padding - Tem basicamente a mesma função do height

Cell spacing - Nesta opção você poderá definir um espaço entre as células

Cell Indent - Você joga os textos a direita

Menu delay - Define a velocidade em que os menus vão abrir, recomendo vocês deixarem como esta

Pop - up Border - Habilite a opção Show Borders se quiser exibir bordas no menu de opções

Border widht - Defina a espessura da borda

Border color - Defina uma cor para borda

Shadow e Highlight - Defina as cores das linhas de dentro da borda como sombra e luz

Clique no botão Next para ir para guia "Position"


Na guia "Position" você ira clicar em algum dos ícones para definir a posição em que vai aparecer as opções e as sub-opções do seu menu caso haja.

Bom pessoal,clique em done para salvar todas as configurações,agora vá no ícone "Preview"


Ela fica na parte superior do palco, e faz com que você visualize os menus funcionando.