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.

 

FRONTPAGE - BÁSICO Criação de Páginas para Internet - Introdução Criando o Primeiro Arquivo HTML DREAMWEAVER - BÁSICO Introdução ao Dreamweaver MX 2004 Projeto Web – Parte 01 Projeto Web – Parte 04 Projeto Web – Parte 03 Criação de Tabelas no Dreamweaver Dreamweaver Basico - Começando a usar o DreamWeaver Dreamweaver Basico - Configurações de Definição de Sites Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 2 Dreamweaver Basico - Definição Básica do Design e Inserção de Conteúdo Dreamweaver Basico - Criação de Links Dreamweaver Basico - Configuração de Links Usando Tabelas no DreamWeaver Usando Imagens no Dreamweaver Usando Modelos no Dreamweaver Conhecendo o Dreamweaver 8 Usando comportamentos para criar um menu pop up no Dreamweaver Usando a paleta Behaviors do Dreamweaver - Parte 1 Usando Camadas Para Exibir Dicas de Formulários Fazendo um Site com Templates Prontos no Dreamweaver HTML BÁSICO HTML Básico - Introdução à Internet HTML Básico - Alinhamento de Texto HTML Básico - Cabeçalhos e Formatação de Texto HTML Básico - Formatação de Texto HTML Básico - Criação e configuração de links HTML Básico - Criando Listas Ordenadas e Listas de Definição HTML Básico - Criação de Links Internos e Externos HTML Básico - Criação de Links Externos E Links de E-mail HTML Básico - Inserindo Imagens na Página HTML Básico - Introdução à Tabelas HTML Básico - Criação de Formulários - Parte 1 HTML Básico - Criação de Formulários - Parte 2 DREAMWEAVER - PROGRAMAÇÃO PHP Galeria de Fotos com Efeito Lightbox Dinâmica Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 1) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 2) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte Final) Alternando Cores da Tabela no Resultado de uma Consulta Como Criar um Contador de Visitas (Acessos) Criando Galeria de Fotos (Tiny SlideShow) Criando Ícone para URL Criando Recurso Imprimir Criando Sites Auto-Ajustáveis de Acordo com a Resolução Formulário de Contato com Envio de Dados por Email Galeria de Fotos com Efeito Lightbox e Upload Múltiplo de Imagens

CRIANDO UM APLICATIVO PARA UMA ACADEMIA Criando Aplicativo Para Academia - Parte 1 Criando Aplicativo Para Academia - Parte 2 Criando Aplicativo Para Academia - Parte 3 Criando Aplicativo Para Academia - Parte 4 Criando Aplicativo Para Academia - Parte 5 Criando Aplicativo Para Academia - Parte 6 Criando Aplicativo Para Academia - Parte Final WEBSPHERE Apresentando o WebSphere Application Server da IBM Instalação do WebSphere Application Server Configurando uma aplicação no WAS Configurando a segurança no WAS SISTEMA DE SALÃO DE BELEZA Sistema Salão de Beleza - Parte 1 Sistema Salão de Beleza - Parte 2 Sistema Salão de Beleza - Parte 3 Sistema Salão de Beleza - Parte 4 Sistema Salão de Beleza - Parte 5 Sistema Salão de Beleza - Parte 6 Sistema Salão de Beleza - Parte 7 Sistema Salão de Beleza - Parte 8 Sistema Salão de Beleza - Parte 9 Sistema Salão de Beleza - Parte 10 Sistema Salão de Beleza - Parte 11 Sistema Salão de Beleza - Parte 12 Sistema Salão de Beleza - Parte 13 Sistema Salão de Beleza - Parte 14 SISTEMA PARA GERENCIAMENTO DE IMÓVEIS Sistema Para Gerenciamento de Imóveis - Parte 01 Sistema Para Gerenciamento de Imóveis - Parte 02 Sistema Para Gerenciamento de Imóveis - Parte 03 Sistema Para Gerenciamento de Imóveis - Parte 04 Sistema Para Gerenciamento de Imóveis - Parte 05 Sistema Para Gerenciamento de Imóveis - Parte 06 Sistema Para Gerenciamento de Imóveis - Parte 07 Sistema Para Gerenciamento de Imóveis - Parte 08 Sistema Para Gerenciamento de Imóveis - Parte 09 Sistema Para Gerenciamento de Imóveis - Parte 10 Sistema Para Gerenciamento de Imóveis - Parte 11