Criando um Web Game #2

por Fogomax Ter 15 Out 2013, 15:39

Vamos começar a "desenhar" o site.
Iremos utilizar CSS, e para podermos usarmos em toda página, sem repetir tudo, vamos linkar o CSS utilizando um linha simples de código:

Código:: <link rel="stylesheet" href="style.css"/>

Primeiro, com o rel, definimos que estamos linkando um arquivo do tipo StyleSheet, ou seja, CSS.
Depois, com o href, definimos o local do nosso arquivo. Eu vou colocar no mesmo lugar do arquivo. O nome vai ser "style", ou seja, "style.css". Se fosse em outra pasta, seria "pasta/style.css". Já deu para entender né?
Coloque esse código dentro do <head>.

Crie um novo arquivo e salve como "style.css".
Vamos esclarecer algo antes de começarmos a programar:
É extremamente recomendável vocês estudarem um pouco antes de começar, não vou definir tudo que vou usar, o tópico não é pra ensinar CSS.

"#" é para ID.
"." é para class.

Vamos dar estilo para o site inteiro.

Código:: * { margin:0px; padding:0px; } #logotipo { width:450px; height:150px; border:1px solid #F00; margin:0 auto; margin-top:20px; } #corpo { width:1000px; height:700px; border:1px solid #F00; margin:0 auto; margin-top:40px; } #menu { float:left; width:300px; height:700px; border:1px solid #F00; } #cjogo { float:left; width:696px; height:700px; border:1px solid #F00; } #rodape { width:100%; height:70px; border-top:1px solid #F00; border-bottom:1px solid #F00; position:abusolute; bottom:0; margin-top:40px; }

Vamos explicar o código.
Depois de "#" colocamos a id de cada elemento.
No primeiro (*) definimos que o valor de TUDO tem margin e padding 0, isso é só para não ter o espaçamento normal que o HTML faz.
No logotipo, damos largura de 450px, altura de 150px.
Na próxima linha damos a borda. Border: (largura) (tipo, se quiser outros tipos, pesquise) (cor).
"margin" é a margem. "0 auto" é tipo um bug que centraliza ele no meio da página.
Depois definimos margem de 20px pra cima.
Se ficarem com dúvida, me perguntem.

Fazemos o mesmo com o #corpo.
No #menu, temos uma propriedade nova, o float. Ele é pra alinhar objetos a uma direção, no caso, na esquerda.
Fazemos o mesmo com o #cjogo.
No #rodape, damos a largura de 100%, o tamanho inteiro da página. Depois definimos a posição como absolute e colocamos um espaço de 0px pra baixo. Em seguida margem de 10px pra cima.
E quanto a border-top e border-bottom, eu usei pra colocar a borda somente desses lados, senão a página ia dar rolamento pra direita, pois como o tamanho da borda é de 1px, seria 2px mais o tamanho da página.

Vamos tirar as bordas, iremos colocar cor nos elementos para podermos saber o tamanho real.
Para isso, vamos usar a propriedade background-color.
Usamos ela da seguinte maneira: background-color:#FF0;.
Também podemos colocar outros valores, leia mais aqui: http://www.w3schools.com/cssref/pr_background-color.asp
Devemos tirar a borda dos elementos e colocar. O código ficou assim:

Código:: * { margin:0px; padding:0px; } #logotipo { width:450px; height:150px; background-color:#D3D3D3; margin:0 auto; margin-top:20px; } #corpo { width:1000px; height:700px; margin:0 auto; margin-top:40px; } #menu { float:left; width:300px; height:700px; background-color:#9ACD32; } #cjogo { float:left; width:700px; height:700px; background-color:#FFA500; } #rodape { width:100%; height:70px; background-color:#40E0D0; position:abusolute; bottom:0px; margin-top:40px; }

Vale lembrar que eu aumentei a largura do #cjogo, antes era 696px e agora 700px, pois se eu colocasse um valor maior, ia pra baixo por ser grande demais, era a borda.

Dependendo da cor que vocês colocaram, deve estar assim:
https://i.imgur.com/hPaV7xS.png

Também tem o rodapé em baixo.
No próximo tutorial vamos colocar as imagens de background nas DIVs e deixar o site lindo -q