Definir la estructura de tu Web
Cuando vamos a empezar a hacer una página Web desde zero no tenemos claro que estructura va a tener, con 2 columnas, 1 columna izquierda y bloque central, con cabecera o no, con pie de página o con columna derecha, etc. Hay varias posibilidades.
La estructura que mostramos en la imagen anterior se puede conseguir de varias formas pero, una forma muy simple y claro de conseguir este efecto es utlizar div’s y código CSS para posicionamiento de contenedores.
El código HTML de la estructura de la imagen queda muy simple:
<div id="content"> <div id="header">Cabecera</div> <div id="column-left">Columna izquierda</div> <div id="central">Bloque central</div> <div id="column-right">Columna derecha</div> <div id="footer">Pie de página</div> </div>
La complejidad del asunto recae en las hojas de estilo CSS. Cada bloque es representado por una clase que se representa por su id. Por ejemplo para la cabecera tendremos la siguiente clases CSS:
#header {
background-color: #EBE9EA;
border: 1px solid #D2D2D2;
border-radius: 8px 8px 8px 8px;
margin-bottom: 10px;
text-align: center;
width: 900px;
min-height: 150px;
}
En esta clase estamos diciendo que la cabecera de la página debe tener un color gris suave de fondo con un borde sólido de 1px y con bordes redondeados. El texto está alineado al centro, su ancho es de 900px y su alto mínimo es de 150px. Después también marcamos un margen por debajo de 10px para separar la cabecera de la columna izquierda, central y derecha.
Ver ejemplo en funcionamiento 1
Ver ejemplo en funcionamiento 2
Autor
¿Buscas trabajo de programador?
5 respuestas a “Definir la estructura de tu Web”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
Puedes hacer lo siguiente en el success del ajax:
$.ajax({
type: "POST",
url: "archivo.php",
data: dataString,
success: function(data) {
alert(data);
}
});
En data tendremos todos los echos que haya en el archivo.php
Hola, muy buenos tus ejemplos, pero porque no haces funciondes de PHP como por ejemplo el sleep que usas y poner varias funciones de PHP interesante, y bien te hago una pregunta, como hago para retornar codigo Javascript en una consulta AJAX PHP con JQURY.
Puedes hacer lo siguiente en el success del ajax:
$.ajax({type: "POST",
url: "archivo.php",
data: dataString,
success: function(data) {
alert(data);
}
});
En data tendremos todos los echos que haya en el archivo.php
Amazing!
Very interesting info!Perfect just what I was searching for!