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.

 

<iframe name=conteúdo src=principal.htm width=436 height=237 border=0 frameborder=no></iframe>

 

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.