Fazendo um site com templates prontos no Dreamweaver
Um template é um modelo de página que poder ser comprado ou baixado gratuitamente na Internet, este pacote vem com todos os arquivos editáveis para que você o modifique de acordo com sua necessidade.
A primeira providência, é óbvio, é conseguir o seu template, existem varias empresas que comercializam com preços na faixa de 50 dólares e algumas que fornecem gratuitamente templates de uma qualidade menor, usando programas como e-mule ou torrent podemos baixar templates de qualidade gratuitamente, procure no seu e-mule ou torrent templates da série monster, são muito bons.
Vamos usar neste exemplo o templates abaixo. Este foi baixado do site www.myfreetemplates.com.
É importante escolher um template que tenha o mesmo número de links do seu site, pode ser desastroso visualmente, acrescentarmos ou tirarmos um link do template. Dê também preferência a templates, que como o que estou usando agora, forneça o arquivo .PSD para que possamos editá-lo no Photoshop.
Começando
1. Abra o arquivo .PSD do seu template no Photoshop.
2. Vamos alterar as cores do template para isso procure na paleta Layers, a layer que contém o fundo do site, dê um clique nela.
3. Clique no menu Image/Adjustmentes/Hue Saturation.
4. Ligue a opção “Colorize” e mova os controles para procurar a cor desejada para seu site, a opção Hue é a cor, Saturation é a quantidade desta cor e Lightness é o brilho que se vai aplicar.
5. Resultado
6. Perceba que o logotipo da empresa, manteve a cor original, isto aconteceu porque ele está em uma camada diferente, para alterar sua cor devemos repetir o procedimento, isto é, procurar sua layer, selecioná-la e alterar sua cor com o controle Hue/Saturation.
7. Vamos alterar o nome da empresa, selecione a ferramenta texto e marque o texto “Your Company”, altere para o home que quiser e escreva o nome que quiser como título do seu site.
8. Altere, usando a ferramenta texto os 5 links para Empresa, Portfolio, Serviços, Endereço, Contato e Principal.
9. Vamos agora retirar o texto que está na área de conteúdo do site, devemos procurá-lo na paleta Layers e deletar a layer.
10. Vamos usar o comando Save for web do menu File para salvar exportar o arquivo no formato .JPG para que possa ser fatiado no Fireworks.
11. Clique no botão Save e dê o nome de index.jpg ao arquivo.
12. Salve o arquivo PSD, para que se for caso, possa ser modificado em outras ocasiões.
13. Feche o Photoshop.
14. Abra no Fireworks o arquivo index.jpg.
15. Selecione a ferramenta Slice (fatia).
16. Vamos fatiar o site agora, o importante é criar uma fatia para cada link e uma fatia grande para a área de conteúdo, o resto das áreas do site podem ser fatiados da maneira que você quiser, abaixo, o resultado do meu fatiamento.
17. Vamos agora gerar o arquivo HTML, clique no menu File/Export Preview e clique clique no botão “Export”.
18. Nós acabamos de gerar um arquivo HTML, vamos fechar o Fireworks e abrir o arquivo index.htm no Dreamweaver.
19. Dê um clique na fatia grande, a fatia de conteúdo do site e anote a largura, altura e o nome da imagem.
20. Depois de anotar o nome e o tamanho da imagem, apague esta fatia.
21. Clique no “buraco” da fatia.
22. Acesse o modo de código do Dreamweaver e apague a tag de espaço ( ).
23. No lugar da tag de espaço escreva a tab IFRAME, tenha em mãos a anotação da largura e da altura da página, para configurar corretamente os valores width e height.
24. Salve o arquivo e peça um novo, vamos criar o arquivo principal.htm.
25. Neste novo arquivo, clique com o botão direito do mouse no meio da página e escolha a opção “Page Properties”.
26. Clique no botão Browse e procure na pasta Images a imagem que você anotou o nome a pouco junto com a largura e a altura.
27. Clique em OK e escreva na página “Bem-vindo ao site fulano de tal” , formate como quiser.
28. Salve o arquivo como principal.htm e feche-o.
29. Crie um novo arquivo.
30. Repita o item 26 para este novo arquivo.
31. Escreva “Portfolio” e formate como quiser. Salve o arquivo como portfolio.htm.
32. Para efeito deste exercício só teremos o link para o arquivo portfolio.htm, em sua casa você pode criar os outros arquivos e os links para estes arquivos.
33. Feche o arquivo portfolio.htm e retorne ao arquivo index.htm.
34. Pressione a tecla F12 para ver que o principal já aparece na área de conteúdo do site.
35. Retorne ao Dreamweaver.
36. Dê o clique na palavra Portfolio em seu site.
37. Use a paleta Properties para configurar a página que será vinculada a este link e o target.
38. Salve e teste seu arquivo com F12.
Nenhum comentário:
Postar um comentário