Tutorial – criando um site simples usando psd (Photoshop), html e css – para iniciantes – Parte 6

criando-um-site-simples36

(Continuação) 1. Agora partiremos para a configuração do corpo do site. Note na imagem abaixo que acrescentei uma imagem de 300px por 200px, e coloquei o comando dentro da div Fotoconteudo, que a mesma se encontra dentro da div CONTENT. O ideal seria colocar ela fora da div content, mas na hora que você estiver fazendo, você escolhe. 2. Visualizando no navegador. … [Read more...]

Tutorial – criando um site simples usando psd (Photoshop), html e css – para iniciantes – Parte 5

criando-um-site-simples36 (1)

(Continuação) 1. Vamos começar a configurar a parte de cima (header) do site. No arquivo CSS, note que eu fiz a adição da propriedade Margin, e defini para a div #nutrição a margem de cima com 15pixels, a do lado direito com 2pixels, a de baixo com 2pixels e a do lado esquerdo com 58px. Se você salvar o documento agora pode notar que a imagem símbolo da nutrição descera um pouco e correrá um pouco para a direita da tela. Na div título eu fiz … [Read more...]

Tutorial – criando um site simples usando psd (Photoshop), html e css – para iniciantes – Parte 4

criando-um-site-simples27emeio

(Continuação) 1. No photoshop Pressione Ctrl+alt+Z para desfazer o corte e transfira a imagem (nutrição, das cobras) para outro documento. Escolha no menu Image/Trim para que o conteúdo transparente ao redor da imagem desapareça e fique só ela no canvas. ( Dica: Para transferir uma layer para outro documento facilmente, escolha Window / Arrange/ Float all in Windows, para que todas as abas do Photoshop fiquem uma acima da outra e clique, segur … [Read more...]

Tutorial – criando um site simples usando psd (Photoshop), html e css – para iniciantes – Parte 2

criando-um-site-simples10

(Continuação) Agora vamos terminar de montar o site em CSS e Html. Já criamos quase todas as imagens que usaremos no site. Os menus rodapé e textos criaremos em Html e CSS. Um site comercial é bom que tenha o mínimo de imagens, e máximo de texto, pois melhora na indexagem em mecanismos de buscas como o Google, e isso é o que queremos. 1. Abra o Dreamweaver (pode usar qualquer editor de texto, Bloco de notas do Windows, Notepad ++ Plus ou qualquer … [Read more...]