[E-BOOK GRÁTIS]: Windows 7 Básico, 476 pgs - QUERO RECEBER!
Você está em: PrincipalTutoriaisCarloscastro : Dreamweaver007
Quer receber novidades e e-books gratuitos?
›››

Conheça o Júlio Battisti

Julio Battisti - Autor de mais de 25 livros de informática Júlio Battisti tem mais de 36 livros publicados, dezenas de e-books e é certificado Microsoft.

Ganhe o e-book a Seguir

e-book grátis Windows 7 Básico

476 páginas



Curta Nossa Fanpage

Loja Virtual do Site

Livros do Julio Battisti

FILTRO DE TUTORIAIS:




 

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.

 

Dúvidas?

Utilize a área de comentários a seguir.

Me ajude a divulgar este conteúdo gratuito!

Use a área de comentários a seguir, diga o que achou desta lição, o que está achando do curso.
Compartilhe no Facebook, no Google+, Twitter e Pinterest.

Indique para seus amigos. Quanto mais comentários forem feitos, mais lições serão publicadas.

Quer receber novidades e e-books gratuitos?
›››

Vídeo-Aulas

  • Access
  • Excel
  • Programação
  • Windows/Linux
  • Redes
  • + Todas as categorias
  • E-books

  • Access
  • Excel
  • Programação
  • Windows/Linux
  • Redes
  • + Todas as categorias
  • Livros

  • Administração
  • Excel
  • Programação
  • Windows/Linux
  • Redes
  • + Todas as categorias
  • Cursos Online

  • Banco de Dados
  • Carreira
  • Criação/Web
  • Excel/Projetos
  • Formação
  • + Todas as categorias
  • Conteúdo Gratuito

  • +1500 Artigos e Tutoriais
  • ASP 3.0
  • ASP.NET
  • Access Básico
  • Access Avançado
  • Excel Básico - 120 lições
  • Excel Avançado - 120 lições
  • SQL Server 2005
  • Windows 7
  • Windows XP
  • Windows 2003 Server
  • Windows 2008 Server
  • Novidades e E-books grátis

    Fique por dentro das novidades, lançamento de livros, cursos, e-books e vídeo-aulas, e receba ofertas de e-books e vídeo-aulas gratuitas para download.



    Institucional

  • Quem somos
  • Garantia de Entrega
  • Formas de Pagamento
  • Contato
  • O Autor
  • Endereço

  • Júlio Battisti Livros e Cursos Ltda
  • Rua Vereador Ivo Cláudio Weigel, 537 Universitário
  • Santa Cruz do Sul/RS
  • CEP 96816-208

  • Atendimento: (51) 3717-3796 - webmaster@juliobattisti.com.br Todos os direitos reservados, Júlio Battisti 2001-2014 ®