Foros del Web » Creando para Internet » HTML »

web Posicionamiento Basico

Estas en el tema de web Posicionamiento Basico en el foro de HTML en Foros del Web. como he visto a algunos que están comenzando a maquetar web y tienen algunos problemas de posicionamiento aquí les dejo una maquetacion de una web ...
  #1 (permalink)  
Antiguo 19/04/2011, 19:41
 
Fecha de Ingreso: enero-2011
Mensajes: 93
Antigüedad: 6 años, 11 meses
Puntos: 7
web Posicionamiento Basico

como he visto a algunos que están comenzando a maquetar web y tienen algunos problemas de posicionamiento aquí les dejo una maquetacion de una web con un diseño básico, aquí esta el codigo.


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body {
	background-color: #EFEFEF;
}

.Caja_Principal {
	padding: 0px;
	height: 900px;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.Bloque_1 {
	padding: 0px;
	height: 100px;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.Logo {
	padding: 0px;
	height: 100px;
	width: 900px;
}
.Bloque_2 {
	padding: 0px;
	height: 50px;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.Menu_ {
	padding: 0px;
	height: 50px;
	width: 900px;
	background-color: #09F;
}
.Boton {
	float: left;
	height: 35px;
	width: 100px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-align: center;
	background-color: #09F;
	text-transform: capitalize;
}
.Boton:hover {
	background-color: #0F0;
}
a, a:visited {
	color: #FFF;
	text-decoration: none;
}
.Menu_Letra {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-transform: capitalize;
	color: #FFF;
	background-color: #0CF;
	float: left;
	height: 35px;
	width: 100px;
	padding-top: 15px;
	text-align: center;
}
.Bloque_3 {
	height: 700px;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.Contenido {
	height: 700px;
	width: 900px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-transform: capitalize;
	text-align: justify;
	display: inline-block;
}
.Informacion_1 {
	padding: 0px;
	float: left;
	width: 500px;
	height: 500px;
	position: static;
	background-color: #F6F6F6;
}
.Informacion_2 {
	padding: 0px;
	float: left;
	height: 500px;
	width: 400px;
	position: static;
	background-color: #D9D9D9;
}
.Informacion_3 {
	padding: 0px;
	float: left;
	height: 200px;
	width: 900px;
	position: static;
	background-color: #C0C0C0;
}
.Bloque_4 {
	padding: 0px;
	height: 50px;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #F6F6F6;
}
.Otro_Contenido {
	height: 35px;
	width: 900px;
	text-align: center;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-transform: capitalize;
}
</style>
</head>

<body>
<div class="Caja_Principal" id="Caja_Principal">
  <div class="Bloque_1" id="Bloque_1">
    <div class="Logo" id="Logo"><img src="" alt="Logotipo De la Web" name="Logotipo" width="900" height="100" id="Logotipo" /></div>
  </div>
  <div class="Bloque_2" id="Bloque_2">
    <div class="Menu_" id="Menu_">
      <div class="Menu_Letra" id="Menu_Letra">menu</div>
      <div class="Boton" id="Boton"><a href="">inicio</a></div>
      <div class="Boton" id="Boton"><a href="">la web</a></div>
      <div class="Boton" id="Boton"><a href="">descargas</a></div>
      <div class="Boton" id="Boton"><a href="">sonidos</a></div>
      <div class="Boton" id="Boton"><a href="">musica</a></div>
      <div class="Boton" id="Boton"><a href="">videos</a></div>
      <div class="Boton" id="Boton"><a href="">ayuda</a></div>
      <div class="Boton" id="Boton"><a href="">nosotros</a></div>
    </div>
  </div>
  <div class="Bloque_3" id="Bloque_3">
    <div class="Contenido" id="Contenido">
      <div class="Informacion_1" id="Informacion_1">aqui va la informacion 1</div>
      <div class="Informacion_2" id="Informacion_2">aqui va la informacion 2</div>
      <div class="Informacion_3" id="Informacion_3">aqui va la informacion 3</div>
    </div>
  </div>
  <div class="Bloque_4" id="Bloque_4">
    <div class="Otro_Contenido" id="Otro_Contenido">aqui puede ir el copy right @ 2011-2012</div>
  </div>
</div>
</body>
</html>
el logo de la web, el menú y 3 cajas para colocar la información, y el copy right

¿pues como se ve la pagina? asi



Última edición por nedyer; 19/04/2011 a las 20:07
  #2 (permalink)  
Antiguo 20/04/2011, 09:23
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 6 años, 7 meses
Puntos: 37
Respuesta: web Posicionamiento Basico

Hola.

Está muy bien el aporte, seguro ayuda a muchos, pero he de advertir de algo importante:

Nunca debe repetirse un ID en una página. Además no es necesario utilizar clase e id en todas las etiquetas a menos que se vaya a hacer uso de ambos.

También es mejor habituarse a hacer los menús con listas (<ul></ul>). Siempre es bueno utilizar una buena semántica en el maquetado.


Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #3 (permalink)  
Antiguo 22/04/2011, 03:36
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: web Posicionamiento Basico

Hola:

Además en cada elemento pones una class y el mismo id ¿Para qué?

Código HTML:
Ver original
  1. <div class="Caja_Principal" id="Caja_Principal">
  2.   <div class="Bloque_1" id="Bloque_1">

Saludos.


Etiquetas: basico, posicionamiento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 11:14.