Como criar um website passo a passo, CSS, Dicas (iniciante)

Olá pessoal! Primeiro post sobre HTML e CSS, espero que gostem!
Nesse post irei resumir as etapas do desenvolvimento de um website.

Então vamos lá!
Tópicos: Layout – HTML/CSS – corte – Testes.

1º Layout – Etapa onde se cria toda a parte visual do seu site: menu, botões, banners etc.
A cara do seu site será definida aqui!

Para você iniciante, sugiro que faça um layout simples, para evitar complicações no seu estudo.

Onde eu crio meu layout?
Existem alguns softwares bastante utilizados pelos desenvolvedores, segue algumas sugestões:

Adobe PhotoShop
Adobe FireWorks
Adobe Illustrator
Corel Draw

Qual o melhor?

Creio que não exista o “melhor software”, caso tenha tempo estude um pouco de cada programa e veja qual se adapta melhor a você!

Eu costumo utilizar o Fireworks na criação dos meus layouts, é um software bem prático, e com bastante liberdade na hora de criar, eu recomendo, pois alem disso tem alguns objetos prontos que podem ser usados por vocês, mas não viciem nesses objetos prontos pois os Layouts acabam ficando muito parecido e ao mesmo tempo feios.

Corel Draw: Não recomendo, por ser um programa voltado a parte gráfica, na hora de exportar imagens acaba perdendo um pouco de tempo, já os demais você encontra mais facilidade na hora de exportar, por trabalharem mais com “PXs” esse trabalho se torna mais fácil e prático.

Qual resolução (tamanho (Largura X Altura)) devo utilizar no layout?

As resoluções ou tamanho do layout como preferirem, são bem variadas, por exemplo:

Alguns sites são feitos exclusivamente para celulares e outras tecnologias móveis, os mesmos usam a resoluções bem menores do que a de um monitor comum, outros sites são feitos para se ajustar a qualquer resolução de tela, eles se auto ajustam, são chamados sites responsivos!

Por hora as mais utilizadas são: 1024×768 – 1280×600 – 1280×768 – 800×600(ainda é utilizada, mas não recomendo pois está ficando ultrapassada, os monitores atuais suportam resoluções bem maiores vale a pena pensar em resoluções maiores!)
Costumo utilizar 980×768, gosto de fazer sites centralizados e com sobras nas laterais.

Por hora vamos utilizar esse 980×768
Segue exemplo de um layout simples
layout-simples

 

Depois do Layout pronto, devemos exportar as imagens separadamente como as que estão abaixo:

 

imagens-separadas

Essas são só algumas do layout que eu preparei.

 

2º HTML – CSS

Vamos ao HTMl (HyperText Markup Language) e CSS (Cascading Style Sheets)

Html é a linguagem utilizada para o desenvolvimento de sites, caso não conheça HTML, existem varias apostilas disponíveis na Web que são de grande ajuda, 99,9999999999999% dos sites utilizam HTML então acho bom vocês aprenderem.

CSS é um arquivo onde são definidas regras de formatação ou de estilos, a serem aplicadas aos elementos de marcação em um documento HTML, na web existem diversas apostilas onde podem dar uma boa estudada!

Supondo que já saibam o HTML eo CSS vamos avançar um pouco!

 

Primeiro crie uma pasta com o nome que quiser, dentro dela crie uma pasta chamada “img” e uma chamada ”css”, é bom separar os arquivos para que fique melhor organizado, isso é muito importante, pois dependendo do tamanho do site isso faz toda a diferença na hora de encontrar arquivos e tudo mais.

 

Segundo a estrutura HTML, salve como index.html na pasta que criaram.

Recomendo o software DreamWeaver que auxilia bastante na hora de desenvolver!

<HTML>

<head>

<title> Desenvolvimento Website </title>

</head>

<body>

</body>

</HTML>

Crie um arquivo CSS chamado estilo.css e salve na pasta CSS

Feito isso vamos lá

Precisamos fazer com que a nossa index.html chame o css, então colocamos o seguinte caminho entre as Tags

<head>

<link href=”css/estilo.css” rel=”stylesheet” type=”text/css” media=”screen” />

</head>

Agora a nossa index está ligada com o CSS!

As tags que utilizarei nesse Layout são as básicas para a construção de um layout simples

Eu gosto de começar pelo CSS fica a critério de vocês a ordem que querem seguir.

No “estilo.css” criaremos a formatação das “Div” que serão inseridas na Body no HTML

Então segue para download todos os arquivos do tutorial, o HTML e o CSS estão com comentários explicativos então dêem uma lida.

Download –  Layout-simples.rar

Também contem o Layout em PNG-Fireworks para quem quiser dar uma olhada.

 

Espero que tenham gostado e que tenha sido de grande ajuda!

Dúvidas, Críticas, elogios, sugestões, comentem!

Comentar

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

*

8 Comentários

  1. Ótimo tutorial.
    Parabéns pelo site.
    Estou iniciando minhas aulas de fireworks pelo curso adv aqui no rio de janeiro, http://www.cursoadv.com.br.
    Estou sempre em busca de tutorias para me aprimorar e praticar, acabei encontrando seu site no google e o achei bem completo e os tutorias muito bons.
    Parabéns.

    Responder
  2. Olá sou iniciante em programação, eu estou usando o exemplo acima e queria continuar incrementando as páginas, queria ajuda, pois de todos os sites esse foi o que eu consegui sair do zero e pelo jeito quero continuar.

    Responder
    • O que precisa exatamente?

      Responder
  3. As dicas que vc deu não são nada pra iniciante, inclusive eu não sou iniciante e nao entendi nada. Infelizmente não ajudou!!

    Responder
  4. olá amigo, estou utilizando o seu site vc poderia informar quando clico no menu2 e 3 para aparecer na div conteudo.

    Responder
    • No formato que postei não tem nada que troque a div, o que pode se fazer é criar outras páginas e linkar uma na outra.

      Responder
  5. Olá Richard!

    Parabéns pelo tutorial. Apesar de um comentário aqui de alguém que disse que não ajudou, espero que você não ligue pra isso. Até tenho certeza que não ligou mesmo, hehehehehe…. gostaria de deixar aqui meus agradecimentos, pois seu tutorial me ajudou muito no trabalho de faculdade! Seu tutorial acrescentou muito em meus conhecimentos, pois me ajudou a melhorar o trabalho proposto pela faculdade e tirei boas notas… Valeu! Obrigado!

    Responder
    • Que legal! fico feliz que tenha ajudado =]

      Responder