Organização do meu site em HTML5.

Bruno MEGA · Setembro 26, 2012

Galera, boa noite!

Estou aprendendo html e css há alguns dias. Consegui esse resultado abaixo com alguns tutos scripts prontos. Já desvendei a maioria dos itens, menos as transições....

Vocês poderiam me dar algumas dicas de organização? NO MODO HTML5? essa é a index.

ficará mais ou menos assim. site%2520proposta.jpg

<!doctype html>
<html lang=pt-br>
<head>
<meta charset="utf-8">
<title>Snake Portal</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="description" content="Eventos, Musica Eletônica, Rock n Roll, Sabará, Sabará - Minas Gerais, Belo horizonte, Musica, Portal Musica, Eletro, Trance, Psy">
<meta name="keywords" content="Eventos, Musica Eletônica, Rock n Roll, Sabará, Sabará - Minas Gerais, Belo horizonte, Musica, Portal Musica, Eletro, Trance, Psy">

<link rel="shortcut icon" href="Img/favicon.png"> 
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/styleslogin.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />

<link rel="stylesheet" type="text/css" href="css/Circles/democircle.css" />
	<link rel="stylesheet" type="text/css" href="css/Circles/cammoncircle.css" />
       <link rel="stylesheet" type="text/css" href="css/Circles/stylecircle.css" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
       <script type="text/javascript" src="js/Circles/jquery.min.js"></script>
<script src="js/Circles/csscustom.js"></script> 
<script type="text/javascript" src="js/Circles/modernizr.custom.js"></script>

	<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->





</head>


<body>


<section>

   <div id="conteudo">

            <div id ="corpo">



        <!---*************
        AQUI COMEÇA O SLIDER
        ----------*******--->

             <noscript>
           <style>
               .cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;} 
               .cn-slideshow{height: auto;}
           </style>
       </noscript>
	<script id="barTmpl" type="text/x-jquery-tmpl">
           <div class="cn-bar">
               <div class="cn-nav">
				<a href="#" class="cn-nav-prev">
                       <span>Previous</span>
					<div style="background-image:url(${prevSource});"></div> 
				</a>
				<a href="#" class="cn-nav-next">
                       <span>Next</span>
					<div style="background-image:url(${nextSource});"></div>
				</a>
               </div><!-- cn-nav -->
               <div class="cn-nav-content">
                   <div class="cn-nav-content-prev">
                       <span>Imagem Anterior</span>
                       <h3>${prevTitle}</h3>
                   </div>
                   <div class="cn-nav-content-current">
                       <span>Atual</span>
                       <h2>${currentTitle}</h2>
                   </div>
                   <div class="cn-nav-content-next">
                       <span>Próxima imagem</span>
                       <h3>${nextTitle}</h3>
                   </div>
               </div><!-- cn-nav-content -->
           </div><!-- cn-bar -->
	</script>




           <div class="wrapper">
               <div id="cn-slideshow" class="cn-slideshow">
                   <div class="cn-images">
                       <img src="Img/Caixa/Caixa/image-1.jpg" alt="image01" title="Evento 01" data-thumb="Img/Caixa/Caixa/image-1.jpg" style="display:block;"/>
                       <img src="Img/Caixa/Caixa/image-2.jpg" alt="image02" title="Evento 02" data-thumb="Img/Caixa/Caixa/image-2.jpg"/>
                       <img src="Img/Caixa/Caixa/image-3.jpg" alt="image03" title="Evento 03" data-thumb="Img/Caixa/Caixa/image-3.jpg"/>
                       <img src="Img/Caixa/Caixa/image-4.jpg" alt="image04" title="" data-thumb="Img/Caixa/Caixa/image-4.jpg"/>



                   </div><!-- cn-images -->
               </div><!-- cn-slideshow -->
           </div>
       </div>
       <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
	<script type="text/javascript" src="js/jquery.slideshow.js"></script>
       <script type="text/javascript">
           $(function() {
			$('#cn-slideshow').slideshow();
           });
       </script>   




           <!--------
           PATROCINADORES CIRCLE
           ------------------------>









      </div>
        </section> 


       <!--------
       COMEÇO DO HEADER
       ------------------------>


 <header>      

           <div id="logo">
       </div>        


       <nav>  

               <!---------------------
                    PARTE DOS MENUS
               ----------------------->



               <nav id="menutotal">                   
                  <ul>
                   <li id="inicio"><a href="#"></a></li>
                   <li id="eventos"><a href="#"></a></li>
                   <li id="news"><a href="#"></a></li>
                   <li id="galeria"><a href="#"></a></li>
                   <li id="contato"><a href="#"></a></li>
                   <li id="cadastro"><a href="#"></a><li>
                  </ul> 

                <nav class="menu2">

                 <ul>
                   <li><a href="#">LOCAIS</a></li>
                   <li><a href="#">TRABALHOS / DESIGN</a></li>
                   <li><a href="#">PATROCINIOS</a></li>
                   <li><a href="#">TRANSMISÃO AO VIVO</a></li>
                   <li><a href="#">INSPIRAÇÕES</a></li>
                 </ul>                               
               </nav>
             </nav>  



       </nav>


        <section >

             <ul class="ch-grid">
				<li>
					<div class="ch-item ch-img-1">				
						<div class="ch-info-wrap">
							<div class="ch-info">
								<div class="ch-info-front ch-img-1"></div>
								<div class="ch-info-back">
									<h3>BRUNO GOULART</h3>
									<p>SNAKE BG <a href="https://www.facebook.com/bgoulart13">FACEBOOK</a></p>
								</div>	
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="ch-item ch-img-2">
						<div class="ch-info-wrap">
							<div class="ch-info">
								<div class="ch-info-front ch-img-2"></div>
								<div class="ch-info-back">
									<h3>BRUNO GOULART</h3>
									<p>by SNAKE BG <a href="https://www.facebook.com/bgoulart13">FACEBOOK</a></p>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="ch-item ch-img-3">
						<div class="ch-info-wrap">
							<div class="ch-info">
								<div class="ch-info-front ch-img-3"></div>
								<div class="ch-info-back">
									<h3>BRUNO GOULART</h3>
									<p>SNAKE BG <a href="https://www.facebook.com/bgoulart13">FACEBOOK</a></p>
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
  </section>










      </div>


  </div>


</header>




<footer>




   <div id="footer">

      </div>



</footer>






</body>





  <!------------
  <section>
     <div id="main">

       	<h1>Registre-se e receba nossas atualizações!</h1>

       	<form class="" method="post" action="">

       		<div class="row email">
    			<input type="text" id="email" name="email" placeholder="Email" />
       		</div>

       		<div class="row pass">
       			<input type="password" id="password1" name="password1" placeholder="Password" />
       		</div>

       		<div class="row pass">
       			<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
       		</div>

       		<!-- The rotating arrow > MUDAR AQUI!!!!
       		<div class="arrowCap"></div>
       		<div class="arrow"></div>

       		<p class="meterText">POTÊNCIA</p>

       		<input type="submit" value="Register" />

       	</form>

           <script src="js/login/jquery-1.7.2.min.js"></script>
	<script src="js/login/jquery.complexify.js"></script>
	<script src="js/login/script.js"></script>

       </section>------------>
</html>

Dei uma melhorada mas o footer não aparece... alguma ideia?

marcelo2605 · Setembro 26, 2012

Bruno, manda o css.

André do Vale · Setembro 26, 2012

Bruno, manda o css.

A dúvida do tópico é em relação a marcação HTML5, e não à estilização. :thumbsup:

@Bruno

Ainda vejo você utilizando divs de wrapper e conteúdo. Tem uma section antes do header, qual o motivo?

Veja bem: na navegação, você tem 2 menus, mas não precisa necessariamente ter 2 tags "nav".

Bom, o footer não aparece pois não tem conteúdo.

Vejo também uma hierarquia muito grande. Primeiro, tente reduzir essa árvore a maior quantidade de graus possíveis, e quando postar aqui, tente deixar o código com uma melhor indentação (fica mais fácil de ler).

====

Acréscimo:

Resultado da validação

Result: 127 Errors, 125 warning(s)

http://validator.w3.org

Bruno MEGA · Setembro 26, 2012

A dúvida do tópico é em relação a marcação HTML5, e não à estilização. :thumbsup:

@Bruno

Ainda vejo você utilizando divs de wrapper e conteúdo. Tem uma section antes do header, qual o motivo?

Veja bem: na navegação, você tem 2 menus, mas não precisa necessariamente ter 2 tags "nav".

Bom, o footer não aparece pois não tem conteúdo.

Vejo também uma hierarquia muito grande. Primeiro, tente reduzir essa árvore a maior quantidade de graus possíveis, e quando postar aqui, tente deixar o código com uma melhor indentação (fica mais fácil de ler).

====

Acréscimo:

Resultado da validação

Result: 127 Errors, 125 warning(s)

http://validator.w3.org

beleza, vou melhorar aqui e envio novo código. Tive uma grande dificuldade em posicionar o site. essa bagunça do section em cima do header foi por usar position no css...

Bom, cometi o erro de criar o layout em 1600 px por causa do meu monitor... é viável redimensiona-lo por js? ou melhor voltar e fazer ao menos em 1280?

Bruno MEGA · Setembro 28, 2012

Bom, estou refazendo o código... poderiam checar a semântica? não sei oque estou fazendo de errado. segue também o css.

<!doctype html>
<html lang=pt-br>
<head>
<meta charset="utf-8">

<link rel="shortcut icon" href="Img/favicon.png"> 
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/styleslogin.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/Circles/democircle.css" />
<link rel="stylesheet" type="text/css" href="css/Circles/cammoncircle.css" />
<link rel="stylesheet" type="text/css" href="css/Circles/stylecircle.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/Circles/jquery.min.js"></script>
<script src="js/Circles/csscustom.js"></script>
<script type="text/javascript" src="js/Circles/modernizr.custom.js"></script>	

<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>

<body>

<div id="conteudo">

<header>   

  <section id="topo">

    <!---------------------
                    PARTE DOS MENUS
               ----------------------->               

               <nav id="menutotal">                   
                  <ul>
                   <li id="inicio"><a href="#"></a></li>
                   <li id="eventos"><a href="#"></a></li>
                   <li id="news"><a href="#"></a></li>
                   <li id="galeria"><a href="#"></a></li>
                   <li id="contato"><a href="#"></a></li>
                   <li id="cadastro"><a href="#"></a><li>
                  </ul>                               
                 <nav class="menu2">
                  <ul>
                   <li><a href="#">LOCAIS</a></li>
                   <li><a href="#">TRABALHOS / DESIGN</a></li>
                   <li><a href="#">PATROCINIOS</a></li>
                   <li><a href="#">TRANSMISÃO AO VIVO</a></li>
                   <li><a href="#">INSPIRAÇÕES</a></li>
                  </ul>                               
                 </nav>
               </nav>          

 </section>  
</header>  

<acide>  

  <header id="slide">

                            <!----slide---->

 <noscript>
           <style>
               .cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;} 
               .cn-slideshow{height: auto;}
           </style>
       </noscript>
	<script id="barTmpl" type="text/x-jquery-tmpl">
           <div class="cn-bar">
               <div class="cn-nav">
				<a href="#" class="cn-nav-prev">
                       <span>Previous</span>
					<div style="background-image:url(${prevSource});"></div> 
				</a>
				<a href="#" class="cn-nav-next">
                       <span>Next</span>
					<div style="background-image:url(${nextSource});"></div>
				</a>
               </div><!-- cn-nav -->
               <div class="cn-nav-content">
                   <div class="cn-nav-content-prev">
                       <span>Imagem Anterior</span>
                       <h3>${prevTitle}</h3>
                   </div>
                   <div class="cn-nav-content-current">
                       <span>Atual</span>
                       <h2>${currentTitle}</h2>
                   </div>
                   <div class="cn-nav-content-next">
                       <span>Próxima imagem</span>
                       <h3>${nextTitle}</h3>
                   </div>
               </div><!-- cn-nav-content -->
           </div><!-- cn-bar -->
	</script>

           <div class="wrapper">
               <div id="cn-slideshow" class="cn-slideshow">
                   <div class="cn-images">
                       <img src="Img/Caixa/Caixa/image-1.jpg" alt="image01" title="Evento 01" data-thumb="Img/Caixa/Caixa/image-1.jpg" style="display:block;"/>
                       <img src="Img/Caixa/Caixa/image-2.jpg" alt="image02" title="Evento 02" data-thumb="Img/Caixa/Caixa/image-2.jpg"/>
                       <img src="Img/Caixa/Caixa/image-3.jpg" alt="image03" title="Evento 03" data-thumb="Img/Caixa/Caixa/image-3.jpg"/>
                       <img src="Img/Caixa/Caixa/image-4.jpg" alt="image04" title="" data-thumb="Img/Caixa/Caixa/image-4.jpg"/>

                   </div><!-- cn-images -->
               </div><!-- cn-slideshow -->
           </div>
       </div>
       <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
	<script type="text/javascript" src="js/jquery.slideshow.js"></script>
       <script type="text/javascript">
           $(function() {
			$('#cn-slideshow').slideshow();
           });
       </script>   

       </header>

       </acide>       


</div> <!--conteudo-->
</body>

CSS:

@import url("fonts/stylesheet.css");

* {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
}


body {
background : #333;
background-repeat:repeat-y;

}

#conteudo {
background:url(../Img/1280/bacakline1.jpg) repeat-y;
width : 1280px;
position:relative;
height:auto;
min-height:2000px;
max-height:5000px;
margin:0px auto;
z-index:20px;
}

#topo {
background:url(../Img/1280/menu/backtop.jpg);
background-repeat : no-repeat;
width : 1280px;
height : 2000px;
position:relative;
margin:0px auto;
top : 16px;
}


/*----------------

MENU PRINCIPAL

-------------------*/

#menutotal {
margin:0px auto;
background:url(../Img/1280/menu/menutotal.jpg);
background-repeat : no-repeat;
width : 1280px;
height :64px;
position:absolute;
top : 226px;
}


#inicio {
margin:0px auto;
background:url(../Img/1280/menu/Green/inicio.jpg);
background-repeat : no-repeat;
list-style : none;
width : 145px;
height : 64px;
position:absolute;
top : 0;
left : 171px;
opacity : 0;
}


#inicio:hover {
margin:0px auto;
background:url(../Img/1280/menu/Hover/inicio.jpg);
background-repeat : no-repeat;
width : 145px;
height : 64px;
position:absolute;
top : 0;
left : 171px;
opacity : 1;
}


#eventos {
margin:0px auto;
background:url(../Img/1280/menu/Green/eventos.jpg);
background-repeat : no-repeat;
list-style : none;
width : 145px;
height : 64px;
position:absolute;
top : 0;
left : 304px;
opacity : 0;
}

#eventos:hover {
margin:0px auto;
background:url(../Img/1280/menu/Hover/eventos.jpg);
background-repeat : no-repeat;
width : 145px;
height : 64px;
position:absolute;
top : 0;
left : 304px;
opacity : 1;
}

#news {
margin:0px auto;
background:url(../Img/1280/menu/Green/news.jpg);
background-repeat : no-repeat;
list-style : none;
width : 110px;
height : 64px;
position:absolute;
top : 0;
left : 466px;
opacity : 0;
}

#news:hover {
margin:0px auto;
background:url(../Img/1280/menu/Hover/news.jpg);
background-repeat : no-repeat;
width : 110px;
height : 64px;
position:absolute;
top : 0;
left : 466px;
opacity : 1;
}

#galeria {
margin:0px auto;
background:url(../Img/1280/menu/Green/galeria.jpg);
background-repeat : no-repeat;
list-style : none;
width : 140px;
height : 64px;
position:absolute;
top : 0;
left : 594px;
opacity : 0;
}

#galeria:hover {
margin:0px auto;
background:url(../Img/1280/menu/Hover/galeria.jpg);
background-repeat : no-repeat;
width : 140px;
height : 64px;
position:absolute;
top : 0;
left : 594px;
opacity : 1;
}

#contato {
margin:0px auto;
background:url(../Img/1280/menu/Green/contato.jpg);
background-repeat : no-repeat;
list-style : none;
width : 148px;
height : 64px;
position:absolute;
top : 0;
left : 750px;
opacity : 0;
}

#contato:hover {
margin:0px auto;
background:url(../Img/1280/menu/Hover/contato.jpg);
background-repeat : no-repeat;
width : 148px;
height : 64px;
position:absolute;
top : 0;
left : 750px;
opacity : 1;
}

#cadastro {
margin:0px auto;
background:url(../Img/1280/menu/Green/cadastro.jpg);
background-repeat : no-repeat;
list-style : none;
width : 193px;
height : 64px;
position:absolute;
top : 0;
left : 915px;
opacity : 0;
}

#cadastro:hover {
margin:0px auto;
background:url(../Img/1280/menu/Hover/cadastro.jpg);
background-repeat : no-repeat;
width : 193px;
height : 64px;
position:absolute;
top : 0;
left : 915px;
opacity : 1;
}


/*--------------

MENU TEXTO

---------------*/


.menu2 ul li {
margin:0px auto;
list-style : none;
display : inline;
padding : 0 30px 0 0;
position:relative;
left : 50px;
font-size:2,4px;
top:61px;
font-family : "letter_gothic_stdregular";
}
.menu2 li a {
margin:0px auto;
color : #fff;
top : 50px;
text-decoration : none;
}
.menu2 li a:hover {
margin:0px auto;
color : #000;
text-decoration : none;
}

                                 /*-

                                 CORPO

                                 -*/

article {
position:relative;
width : 1280px;
height:auto;
margin:0px auto;
z-index:50px;
top:356px;
}

#slide {
margin:0px auto;
position:relative;
z-index:60px;

}


/*---------------

SLIDER COMEÇA AQUI
----------------*/


.cn-slideshow {
top:320px;
width : 1152px;
height : 328px;
position:relative;

background : #fff;
box-shadow : 1px 1px 3px rgba(0, 0, 0, 0.2);
background:url(../Img/Caixa/ajax-loader.gif) -9999px -9999px no-repeat #000;
}

.cn-loading {
position : absolute;
z-index : 999;
text-indent : -9000px;
opacity : 0.60000002384185791015625;
top : 50%;
left : 50%;
margin : -25px 0 0 -25px;
width : 50px;
height : 50px;
background:url(../Img/Caixa/ajax-loader.gif) center no-repeat #b72e40;
border-radius : 25px;
}
.cn-images {
width : 100%;
height : 100%;
overflow : hidden;
position : relative;
}
.cn-images img {
position : absolute;
top : 0;
left : 0;
display : none;
width:1440px;
height:410px;
}
.cn-bar {
background : url(../Img/Caixa/bar.png) top left repeat transparent;
height : 74px;
position : absolute;
bottom : 0;
right : 50px;
left : 50px;
color : #f8f8f8;
z-index : 999;
}
.cn-nav-content {
position : absolute;
top : 0;
height : 100%;
right : 70px;
left : 70px;
overflow : hidden;
text-shadow : 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.cn-nav-content div {
float : left;
width : 130px;
color : #aaa;
}
.cn-nav-content span {
color : #777;
}
.cn-nav-content div.cn-nav-content-current {
text-align : center;
width : 280px;
position : absolute;
top : 0;
left : 50%;
margin-left : -140px;
}
.cn-nav-content h2, .cn-nav-content h3 {
padding : 0;
margin : 0;
font-size : 12px;
line-height : 24px;
font-family : Georgia, serif;
font-style : italic;
}
.cn-nav-content h2 {
font-size : 18px;
color : #fff;
}
.cn-nav-content-current span {
color : #d0ab47;
}
.cn-nav-content div.cn-nav-content-prev {
margin-left : 20px;
}
.cn-nav-content div.cn-nav-content-next {
text-align : right;
margin-right : 20px;
float : right;
}
.cn-nav-content div span {
display : block;
padding-top : 18px;
text-transform : uppercase;
font-weight : bold;
letter-spacing : 2px;
}
.cn-nav > a {
position : absolute;
top : 0;
height : 70px;
width : 70px;
}
a.cn-nav-prev {
left : 0;
}
a.cn-nav-next {
right : 0;
}
.cn-nav a span {
width : 46px;
height : 46px;
display : block;
text-indent : -9000px;
border-radius : 23px;
cursor : pointer;
opacity : 0.89999997615814208984375;
position : absolute;
top : 50%;
left : 50%;
background-size : 17px 25px;
margin : -23px 0 0 -23px;
}
.cn-nav a.cn-nav-prev span {
background : url(../Img/Caixa/prev.png) center center no-repeat #fff;
}
.cn-nav a.cn-nav-next span {
background : url(../Img/Caixa/next.png) center center no-repeat #fff;
}
.cn-nav a div {
width : 0;
height : 0;
position : absolute;
top : 50%;
left : 50%;
overflow : hidden;
background-size : 100% 100%;
background-position : center center;
background-repeat : no-repeat;
margin : 0;
border-radius : 0;
}
.cn-nav a:hover span {
width : 100px;
height : 100px;
border-radius : 50px;
opacity : 0.60000002384185791015625;
margin : -50px 0 0 -50px;
background-size : 22px 32px;
background-color : #a8872d;
}
.cn-nav a:hover div {
width : 90px;
height : 90px;
background-size : 120% 120%;
margin : -45px 0 0 -45px;
border-radius : 45px;
}
.ch-grid {
margin : 20px 0 0 0;
padding : 0;
list-style : none;
display : block;
text-align : center;
width : 100%;
}
.ch-grid:after, .ch-item:before {
content : '';
display : table;
}
.ch-grid:after {
clear : both;
}
.ch-grid li {
width : 220px;
height : 220px;
display : inline-block;
margin : 20px;
}

/*---------------

SLIDER TERMINA  AQUI
----------------*/

ps: o slide não fica em cima do #conteudo de forma algumma.

A estrutura pensada é.

body

header

Topo

menu

--------

article

slide

cx de texto

Comentário

-------------

footer.

Entrar

Arquivado

Organização do meu site em HTML5.

Recommended Posts

Bruno MEGA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno MEGA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno MEGA 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Modal Bootstrap 5

mostrar quanto tempo foi postado um conteudo

Configuração de página para impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante