Atenção: Precisando de assessoria nos seus PROJETO entre em contato com a SGP
Neste artigo vamos
dar umas dicas de como estruturar corpo de um site com as novas
regras do HTML 5. Tem varias formas de estruturar o corpo de um site
vamos ver um deles que vai ter basicamente o topo com o nome e o
menu, o conteúdo da postagem com informações adjacentes ao lado
que podem servir como propaganda do site ou um sistema de busca e o
rodapé do site mais conhecido como mapa do site.
Primeiramente vamos
devenir o html. Salve um novo arquivo index.html
<!DOCTYPE html>
<html
lang="pt-Br">
<head>
<meta
charset="UTF-8">
<title>Estruturando
o corpo de um site</title>
</head>
<body>
</body>
</html>
Primeiramente vamos
abrir um tag section para o corpo inteiro do site
<section
id="site">
</section>
Depois de ter
definido a estruturara básica do HTML vamos fazer o CABEÇALHO do
site que vai conter o nome do site e o menu .
<header
id="cabecalho">
<h1>Nome do
site</h1>
<nav id="menu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Pagina1</a></li>
<li><a
href="#">Pagina2</a></li>
<li><a
href="#">Pagina3</a></li>
</ul>
</nav>
</header>
Agora vamos para as
informações adjacentes do site ou sistema de busca vai muito de
como cada um vai estruturar sua página.
<aside
id="busca">
<p>Informações
adjacentes ao site</p>
</aside>
Vamos definir o
conteúdo da postagem que vai conter o titulo, postagem e o rodapé
ser for necessário.
<section
id="conteudo">
<header
id="tituloPostagem">
<h3>Titulo
da postagem</h3>
</header>
<article
id="postagem">
<p>
Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Tempora in culpa explicabo laborum eum quia placeat excepturi repellendus incidunt odit rem
iste, voluptas porro nesciunt fuga delectus odio. Corporis, ipsa.
</p>
</article>
<footer
id="rodapePostagem">
<h3>Rodapé
da postagem se for necessario</h3>
</footer>
</section>
Finalmente vamos
para o RODAPÉ do site ou o mapa do site.
<footer
id="rodapeSite">
<h1>Rodapé
do site</h1>
</footer>
Teremos que fazer
também o nosso CSS para o site ter uma cara de página de verdade
se não ficar assim.
Vamos definir um CSS
externo do nosso HTML, vá até o topo do html e chame o css.
<head>
<meta
charset="UTF-8">
<title>teste
de formatação</title>
<link
rel="stylesheet" type="text/css" href="style.css"
/>
</head>
/* Código em css*/
html{ margin: 0px; padding: 0px; }
/* vamos dar uma cor
de fundo para a página*/
body{
background:#fafbff;
text-align: center;
}
/* vamos definir a
fonte e dar uma borda, largura e um sobreamento*/
#site{
font-family:
arial,Helvetica, sans-serif;
border: 1px solid
#ccc;
width: 1000px;
height: auto;
margin:0 0 0 150px;
padding: 5px;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
background: #fff;
-moz-box-shadow:0px
3px 15px 0px #CCC;
-webkit-box-shadow:0px
0px 25px 5px #CCC;
-o-box-shadow:0px 0px 25px 5px #CCC;
box-shadow:0px 0px 25px 5px #CCC;
}
/*Agora vamos
estruturar o cabeçalho*/
#site #cabecalho{
border: 1px solid
#ccc;
padding: 5px;
margin:0 0 5px 0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
background:
#fafbff;
}
/* Menu do site */
#site #cabecalho
#menu{
border: 1px solid
#ccc;
text-align: left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
background: #fff;
}
#site #cabecalho
#menu ul{
list-style: none;
height: 20px;
}
#site #cabecalho
#menu ul li{
float:left;
padding:5px 15px
5px 0;
}
#site #cabecalho
#menu ul a{
text-decoration:
none;
color: black;
}
/* As informações
adjacentes ou sistemas de busca do site*/
#site #busca{
border: 1px solid
#ccc;
width: 290px;
float: right;
height: auto;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
background:
#fafbff;
}
/* Conteúdo da
postagem */
#site #conteudo{
border: 1px solid
#ccc;
margin: 0 0 5px 0;
width: 690px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
padding: 5px;
background:
#fafbff;
}
/*Rodapé ou Mapa do
site*/
#site #rodapeSite{
border: 1px solid
#ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
background:
#fafbff;
}
E a estrutura do site deve ficar mais ou menos desse jeito aqui.
Atenção: Precisando de ajuda entre em contato com a SGP e solicite uma assessoria com a melhor equipe do mercado no desenvolvimento de trabalhos acadêmicos
E-mail: ajudastrabalhosprogramacao@gmail.com
Facebook: fb.me/ajudaemTrabalhosdeprogramacao
0 comentários:
Postar um comentário