Depois de alguns dias (muitos dias) continuo com meu pequeno artigo sobre HTML5, CSS e Jquery agora na nossa aula 2.
Antes nós criamos uma estrutura básica em HTML5 e expliquei um pouco sobre as novas tags e algumas alterações... Hoje vamos integrar o css em nosso site e torna-lo visualmente agradável.
Vou colocar o código da nossa estrutura feita anteriormente:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>CRIANDO UM SITE EM HTML5 COM PV</title>
</head>
<body>
<header>
CABECALHO... AINDA VAMOS TRABALHAR AQUI
</header>
CONTEUDO DO MEU SITE
<footer>
RODAPE 2011
</footer>
</body>
</html>
Certo agora vamos montar um layout bem simples utilizando nossos poderes especiais imaginando e desenhando uma estrutura para o site, eu imaginei essa:
Vou explicar um pouco sobre minha estrutura mas sem detalhes ok?
Topo: O topo do site, no tudo que vai naquela tag HEADER
Menu: Basicamente o menu de navegação do site
Login: Painel para entrar com usuario e senha
Destaques: Estou pensando em algo rotativo com novidades
Social: Algo da nova mania social "Twitter, Facebook..."
Artigos: Artigos relacionado ao site
Imagens: Imagens rotativas do portal
Rodapé: O famoso rodapé
Legal agora eu expliquei o desenho do meu site. Logicamente antes de fazer o desenho você precisa analisar qual o segmento do site, nosso caso é um site de aula então fiz um layout padrão.
Perceba que em nosso HTML acima fizemos uma chamada CSS para um arquivo com o nome ESTILO.CSS localizado no mesmo diretório de nosso arquivo HTML <link rel="stylesheet" type="text/css" href="estilo.css">
Sendo assim crie um arquivo com o nome estilo.css e vamos começar a ESTRUTURAR...
CODIGO estilo.css
/* CRIADO POR PV */
body{
background-color:#2F4F4F;
}
.estrutura{
margin:0 auto;
width:750px;
}
.topo{
height:200px;
background-color:#483D8B;
}
.menu{
height:50px;
background-color:#008B8B;
}
.esquerda{
width: 150px;
float:left;
background-color:#f00;
}
.direita{
width: 600px;
float:left;
background-color:#fff;
}
.rodape{
background-color:#fff;
}
/* GLOBAIS */
.limpa{
clear:both;
}
Como já era de se esperar eu tive que criar um css 'grande' por não estar utilizando um FRAMEWORK para isso (como o BLUEPRINT ou o 52FRAMEWORK) mas estamos aqui para aprender então é interessante eu explicar basicamente o css aqui... Veja bem, eu primeiro fiz o desenho do layout e depois eu 'escrevi ele'... Busquei a tag BODY e apliquei a regra de cor no fundo, e depois criei as classes para o layout por padrão criei a esquerda e direita para não criar classes iguais 2 vezes. E adicionando as classes ao html fica assim:
CODIGO:
< ! DOCTYPE HTML >
< html lang="pt-br" >
< head >
< meta charset="UTF-8" >
< l ink rel="stylesheet" type="text/css" href="estilo.css" >
< script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js " type="text/javascript">< / scrip t >
< title >CRIANDO UM SITE EM HTML5 COM PV
< body >
< div class="estrutura">
< header class="topo">
CABECALHO... AINDA VAMOS TRABALHAR AQUI
< / header>
< div class="menu">
MENU
< / div>
< div class="esquerda"> LOGIN < / div>
< div class="direita"> Destaques < / div>
< div class="limpa">
< div class="esquerda"> SOCIAL < / div>
< div class="direita"> ARTIGOS < / div>
< div class="limpa">
< / div>
< footer class="rodape">
RODAPE 2011
< / footer >
< / div >
< / body>
< / html>
Aproveito para mostrar que fizemos uma chamada ao jquery do google (que vamos utilizar na próxima aula) teste seu layout e vc vai ver o quanto ele ficou FEIO... mas ja apareceu a estrutura que queremos...
Na próxima aula nós terminamos a estrutura e começamos com JQUERY.
Valeu.
