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

Código:

 myfreetemplates .com
.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


É 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.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


. Clique no menu Image/Adjustmentes/Hue Saturation.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


5. Resultado


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]



8. Altere, usando a ferramenta texto os 5 links para Empresa, Portfolio, Serviços, Endereço, Contato e Principal.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]



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.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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).

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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.



[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


17. Vamos agora gerar o arquivo HTML, clique no menu File/Export Preview e clique clique no botão “Export”.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


20. Depois de anotar o nome e o tamanho da imagem, apague esta fatia.


21. Clique no “buraco” da fatia.



[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


22. Acesse o modo de código do Dreamweaver e apague a tag de espaço ( ).


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


37. Use a paleta Properties para configurar a página que será vinculada a este link e o target.


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


38. Salve e teste seu arquivo com F12.