Como estruturar um layout com HTML e CSS da maneira certa

Neste tutorial, eu vou mostrar como criar rapidamente um layout usando só HTML e CSS. Vou usar o Dreamweaver porque eu já sou acostumado com ele, mas você pode muito bem usar o NOTEPAD++ (Tem gente que acha melhor trabalhar com ele) ou até o Bloco de Notas do Windows mesmo. É só você ir copiando o código e colocando nos diretórios.

No Caso eu criei um arquivo index.php e coloquei em um diretório (pasta) chamado “outlinexborder” no diretório “www” do meu Wampserver (servidor que
simulo no meu computador, aprenda aqui a instalar um servidor no seu PC). Ativei ele e acessei no meu browser, o link referente ao diretório. Como usei arquivos php, ele só funcionou porque eu usei no servidor, mas se você quiser fazer sem o servidor, é só salvar a extensão em .html, sem ser .php, e abrir esse arquivo no Browser.

 

Aqui, eu acessei “http://localhost/outlinexborders”

 

 

Abri um arquivo novo em PHP no Dreamweaver (Ctrl+n).

 

Abri um novo arquivo em CSS (ctrl+n)

 

 

No arquivo index, eu coloquei o link apontando para o css, mostrando ao index qual será o arquivo CSS que vai “embelezar” ele, ou seja, que vai dar todas as instruções do visual do layout.

 

Veja que depois disso eu salvei ele em PHP.

 

Já o arquivo CSS que criei, eu salvei também, mas com o nome “style.css”, que foi o que escrevi lá na instrução no index.

 

Renomeei o <title> do arquivo como “Outline x Borders”. É o nome que vai aparecer lá na barra de título, na aba do browser.
Também é o nome que aparece nos resultados de busca, quando o Google indexa. (Muito importante para o ranqueamento, esse title. Ele deve descrever o que tem na página. Cuidado para não spamar com palavras-chave para o Google não te dar uma rasteira.
mas isso já é outro assunto.)

 

 

Lá no CSS eu coloquei todos os dados de como vai ser nossa estrutura.(na imagem, faltou colocar as duas chaves no main-one e main two.)

 

E coloquei as marcações correspondentes no HTML.

 

 

Após isso, eu coloco sempre, nos meus códigos, essas marcações em cinza, que não servem de nada. São comentários, para a pessoa não se perder.

 

 

Já dentro da marcação do “content”, eu coloquei as main’s one, two e three.(Na parte visual entenderemos melhor.)

 

Elas já estão escritas na CSS ( e você colocou as chaves que faltaram).

 

Note que eu acrescentei um nome “left” em todos as marcações main’s. Esses nome não são padrões, mas eu só dei esse nome a eles, por causa do contexto do uso, ou seja, ele vai combinar com quando agente marcar ele no CSS.

Como essas div’s são “class” e não “id”, estamos usando o “.” no CSS em vez de “#”.
Class se usa quando usamos a mesma marcação para vários elementos (no caso, vamos usar “left” para as três). O id (#) só pode ser usado para um elemento.
Você pode repetir o ID? pode sim, mas na validação do W3C vai ficar errado.

 

 

Salvando tudo e olhando no browser, já “dá pra ver algo” (só o Title na página).

Acrescentamos “width” (lagura), e height (altura) nas div’s, em pixels. E também background-color(cor de fundo). Você pode usar o nome das cores, mas acho melhor você aprender como funciona as regras de cores decimais aqui, porque você vai poder usar uma infinidade de cores.

Salvando e olhando no CSS, já vemos algo. Elas apareceram porque definimos cor, largura, altura e cor de fundo.

 

Vamos envolver o código com uma div chamada “tudo”.

 

Definir a largura dele, e dar um margin:0 auto; para ele ficar sem margem em cima e baixo, e na esquerda e direita ficar com a margin automática. (fica no meio).

Já dá pra ver que ele foi para o meio e não tem margem em cima e em baixo.

 

Vamos agora definir a largura das main’s. como ela tá dentro de uma de 800px, devemos dividir isso por 3 e o resultado vai ser a largura delas.

 

 

Salvando e olhando no browser, já vimos que fica uma abaixo da outra, mas elas estão certinhas, com a largura ideal.

 

 

Agora o left entra em ação.

 

Quando flotei em left, as três…

elas ficaram uma do lado da outra.


Se quiser ver como funciona as outlines (é a continuação desse post) daqui a pouco.

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 *