como criar site com o Fireworks

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.





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.

Por hoje é só pessoal,aguardem que na próxima parte deste tutorial irei mostrar como criar a parte debaixo do site,

Uma abraço a todos.

Explore posts in the same categories: Uncategorized

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: