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

(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 um), quando abrir escolha a opção Html, ele já abre com os códigos que necessitamos. 2. Qualquer coisa, pode digitar este código que você está vendo na imagem. (Podemos visualizar o código no Dreamweaver clicando a aba “Código”, observe a imagem). * Também podemos acessar um site qualquer e clicamos com o botão direito escolhendo “Exibir código fonte” que o navegador nos mostra o código, (caso você não tenha acesso ao Dreamweaver, pode estar fazendo isso). Uma janela aparecerá, então copiamos o código que queremos e colocamos no Notepad ++ plus ou Bloco de Notas do Windows.* 3. Renomeie o título do arquivo para o título do seu site. 4. A primeira coisa que faremos é criar o arquivo CSS, onde controlaremos tudo, e depois vinculá-lo ao nosso documento Html. Para isso clique em Arquivo/Novo (Ctrl+N) e escolha CSS como na imagem. Aparecerá a janela abaixo. 5. Salve o arquivo em uma pasta com o nome de style.css. (Eu criei uma pasta com o nome “meu site”). 7. E nessa mesma pasta salve o outro arquivo como index.html. 8. Dentro da tag <head>, no arquivo index.html digite esse código sem os colchetes [   <link href=”style.css” rel=”stylesheet” type=”text/css” /> ]. Com isso vinculamos o arquivo style.css ao arquivo index.html. Próximo Este post é parte integrante de um tutorial sobre como criar um site simples usando PSD, html e CSS. São 7 partes. Acompanhe abaixo. Parte 1 / Parte 2 / Parte 3 / Parte 4 / Parte 5 / Parte 6 / Parte 7

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *