Curso Rápido Web Design

APENAS R$ 180,00

Saiba como criar seu próprio site na internet de forma simples e rápida.

Curso de 12 horas • 6 aulas

Quer descobrir como fazer um site, de maneira simples e eficiente, para marcar sua presença na Internet ou melhorá-la?

A tecnologia não é um bicho-de-sete-cabeças e você pode dominá-la, com o Curso Rápido de Web Designer.
O curso ensina criação de site para uso pessoal ou profissional. Você poderá colocar seu currículo, seu portfólio ou apresentar a sua empresa. Melhorar seu blog, sua página no Twitter ou no Facebook, e ganhar dinheiro fazendo sites para clientes.

Você também pode montar um site para divertir ou informar seus visitantes. Quem sabe um dia poderá atrair interesse e anunciantes? Você sabia que muitos sites que hoje valem milhões de dólares e reais começaram sem pretensão?

No Curso Rápido de Web Designer, utilizando o Adobe Dreamweaver CS6, você aprende a fazer um site com técnicas modernas. Conheça também as técnicas de otimização SEO, que farão seu site aparecer nos principais motores de busca, como o Google, Yahoo, Bing, etc.

Tudo isso passo-a-passo, sem mistérios, em aulas 100% práticas e presenciais.

Apostila Dreamweaver CS6 em Português

Aproveitem!

É só clicar e baixar:

http://www.4shared.com/zip/_vyRWB2g/dreamweaver-cs6.html

bjus!!!

Trabalhando com templates no Dreamweaver

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.