You are currently browsing the tag archive for the ‘pagina’ tag.

A veces vemos unos sitios web chulísimos con unos fondos de página supercurrados que hacen que nos muramos de envidia y nos preguntemos el típico “¿eso como se hace?”. Voy a intentar dar respuesta rápida en un único artículo a dos cuestiones bien diferentes, la primera es ¿cómo hacer un fondo de página?, y la segunda es ¿como utilizar fondos de página con CSS?. Antes de que os lo pregunteis, si, fondo de página y background es lo mismo. A partir de ya, lo llamaremos background, porque en css tenemos por ejemplo background-color (que es el color de fondo de una página) y background-image (que es la imagen de fondo de una página), aparte de más propiedades aplicables a los backgrounds.

El principio, ¿cómo hago un background o fondo para mi web?. Pues lo primero es que depende de lo que quieras hacer… si quieres hacer un background que se va a repetir indefinidamente en la página, lo mejor es recurrir a creadores de backgrounds o fondos como los que pueden hacerse con bgMaker. Esta web te ofrece de forma sencilla y gratuita una herramienta para crear diseños de fondos sencillos, como por ejemplo lineas sobre fondos de color, etc… Simplemente eliges un color y pulsas “Fill”, con lo que el cuadrado (cuyo tamaño puedes cambiar) se rellena de ese color, y luego seleccionas otros colores y haces tu diseño sobre el área rellenada, dibujando lo que te apetezca. Es fundamental que al dibujar el diseño lo hagamos de forma que el fondo quede continuo, que al repetirse no haya cortes… Una vez hecho un diseño, lo guardamos con “Save” en la misma web y lo utilizaremos como fondo, pero daros cuenta de que los diseños hechos de este tipo solo sirven para repetirse indefinidamente a lo largo de la página. Lo más importante es hacer un diseño de fondo pequeño, para que no pese, y que esté bien hecho para que la continuidad de las formas quede bien si se repite de forma infinita. Voy a hacer unos ejemplos…

Fondos hechos con BgMaker y ampliados el 600% para apreciar detalle.

Que quede claro que esto son solo unos ejemplos, ya que podemos diseñar los fondos como queramos o bien diseñar fondos mucho más grandes en tamaño y elementos. Yo simplemente os habló de esta opción por ser muy agradecida visualmente ya demás tener muy poco peso, lo que hace que la navegabilidad no se vea afectada y el rendimiento de la web sea bueno.

Ahora viene la segunda cuestión, ¿como utilizar backgrouns o fondos de página con CSS en mis diseños web?. Para explicarlo voy a utilizar los tres archivos png que he creado y que podeis ver más arriba. Para mostraros el resultado voy a emplear el mismo ejemplo de web que utilicé en el post Hacer un diseño web centrado con CSS, ¿cómo se hace? e iremos viendo como varía su diseño según el fondo que le pongamos.

En primer lugar, tenmos nuestra hoja de estilos: layout01.css, en la que tenemos la etiqueta body, que se aplica a todas las páginas del sitio web salvo que le indiquemos otra cosa. En este caso, actualmente tenemos esta etiqueta body en nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #003366;
}

Con esta etiqueta lo que tenemos es nuestras páginas con un color de fondo azul oscuro y punto, nada más. Si quisieramos, podriamos cambiar ese color de fondo simplemente cambiando el color hexadecimal, y así por ejemplo si queremos un fondo blanco pues pondriamos esto:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffffff;
}

Pero a lo que vamos, para insertar un fondo de imagen, yo os aconsejo conservar también el fondo de color solido, más que nada porque si hay un fallo en la ruta de la imagen o algún problema, os cargue un colora decuado con el diseño. Para que se inserte el fondo layout01.png pondremos en la etiqueta body:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;

background-image: url(images/layout01.png);
background-color: #ffffff;
}

Ejemplo de una página con el fondo número 1 en su CSS.MUY IMPORTANTE: Aseguraros de que la ruta de la imagen que insertais tras “url” es la correcta, ya que si no no cargará. Si lo habeis hecho bien, el resultado debería ser el de la imagen de la derecha (click para verla más grande), en el que la página tiene como fondo la imagen de layout01.png que hemos visto antes repetida por toda la página, y gracias a su diseño queda como una imagen continua.

Al insertar el fondo vía CSS este aparecerá en todas las páginas que utilicen la hoja CSS que contiene esa orden. Lo más importante de hacerlo con este sistema es que si tenemos varios fondos en el mismo directorio, tan solo tenemos que cambiar el archivo de imagen que queremos que nos sirva de fondo en cada página y automáticamente ese cambio aparecerá reflejado en todas las páginas. Por ejemplo, si queremos que el background que se vea sea el layout02.png, haremos el siguiente cambio en la etiqueta body de nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;

background-image: url(images/layout02.png);
background-color: #ffffff;
}

Y el resultado sería este (pulsa sobre la imagen para verla más grande):

Ejemplo con el fondo numero 2 insertado en la hoja CSS

Y si hicieramos la misma operación pero colocando el fondo número 3 con un código tal que este:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;

background-image: url(images/layout03.png);
background-color: #ffffff;
}

El resultado sería este (pulsa sobre la imagen para verla más grande):

El layout 3 con css

Espero que todo esto os haya servido de utilidad y os introduzca en el tema de los fondos o backgrounds de página, que da mucho más juego. A ver si posteo más adelante otra vez sobre este tema, que se pueden hacer cosas muy muy chulas probando cositas.

Rock & Ride!!!

Anuncios

Cuando empecé a entender y a manejar esto del CSS pensaba que estaba muy bien y que molaba mucho para cambiar los colorines de los enlaces y que se subrayaran y cosas así, pero no le veía mucha más aplicación. No digamos ya cuando se trataba de centrar un diseño en la página, por favor… eso se hace con tablas!!!. Pues no amigos, con CSS se puede, y además es más lógico, tiene más sentido y el diseño es más limpio.

Ejemplo de diseño centrado: www.elbuscadordecursos.comPara empezar, ¿que entendemos por un diseño centrado?, pues aquel diseño web que permanece centrado verticalmente en el navegador que utilicemos (en cualquier navegador: Firefox, IE, Opera… como el ejemplo de la imagen de la izquierda) sea cual sea la resolución de nuestra pantalla. Así de sencillo y de dificil a la vez. Si nosotros no indicamos al diseño web via CSS que esté centrado, por defecto, el diseño se centrara a la izquierda y en la esquina superior, en el mismo orden en el que escribimos, por ejemplo. Así que una vez que esto es claro y meridiano, que diría alguno, pasemos a explicar como se hace.

En primer lugar creamos el documento HTML de nuestro proyecto, la página principal, y la llamamos como queramos, por ejemplo, layout01.html. Lo siguiente que debemos hacer es vincular ese archivo html a una hoja de estilos css que llamaremos, por ejemplo, layout01.css.

Antes de continuar insisto siempre en que es fundamental que visualicemos el resultado que pretendemos conseguir antes de ponernos a hacerlo. Un recurso muy antiguo y muy util es dibujar como queremos que sea nuestra web, ya que en el mismo dibujo podemos hacer anotaciones. Creedme amigos, es muy pero que muy util aunque sea más viejo esto de dibujar que hacer pis en el campo.

Con la idea clara, hagamos la estructura. En este caso yo voy a hacer un diseño con una cabecera y un cuerpo central, así de sencillo. Luego ya cada uno puede ir agregando cosas. En primer lugar voy a crear un estilo tipo ID (los que llevan #, no como los class, que llevan un .) de DIV que englobe todo el ancho de la página. Es bueno tener metodología en esto y utilizar siempre el mismo tipo de estructuras. Yo lo voy a llamar “wrapper” y es así:

#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}

Este ID de CSS dice que el ancho es del 100% de la página, que el texto esta centrado y que el margen superior es de 10px. Al margen podria ponerle otros valores o no ponerle ninguno. Ahora, en mi documento html inserto este DIV de la siguiente manera:

<div id=”wrapper”>
</div>

Lógicamente si publico la página en un navegador no veré nada todavía, porque lo que hemos creado, este “wrapper” es el envoltorio que va a contener al resto de la estructura para que aparezca centrada. Lo siguiente es crear el ID del DIV que va a tener todo el contenido dentro. Este DIV estará dentro del “wrapper” y por eso estará siempre centrado. Llamo a este DIV “container”, y es así:

#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}

Simplemente le he indicado el ancho total que va a tener el sitio web (750 px en este caso) y también le he indicado que los márgenes izquierdo y derecho tengan una medida “auto”. Esto hace que el DIV container se mantenga siempre centrado dentro del “wrapper”, tal y como indica el estilo del “wrapper” al utilizar un text-align: center. Ahora inserto este DIV dentro del “wrapper” tal que así:

<div id=”wrapper”>
<div id=”container”>
</div>
</div>

Sigo sin ver nada si lo publico en un navegador, y es normal, porque no hay ningún contenido sino simplemente una estructura para albergar el contenido, que es justo lo que hemos hecho. A partir de ahora, lo que nos aseguramos es que el DIV “container” esté centrado de forma absoluta. Voy a hacer dos estilos ID más, uno que llamare “header” y que definira la cabecera y otro que llamare “content” que definira el contenido principal, y quedaran así:

#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Que quede claro que lo mismo que yo les doy estos valores de tamaño y de background, luego cada uno tiene que jugar en función de lo que quiera obtener. Una vez definidos estos IDs los incluyo en mi documento html dentro del DIV “container”:

<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>

Layout01 - Asi queda el resultado final.Y tachán, ya está (pulsa la miniatura de la derecha para ver como queda el resultado en Internet Explorer). Para que se vea el contraste ya que no voy a poner nada de contenido, en la CSS pongo en el estilo body que haya un background-color: #000000; para que se vea el fondo negro y los DIVs que he insertado en blanco. Resumiendo, lo que he hecho ha sido indicar via CSS a una serie de DIVs que deben tener el contenido centrado de forma absoluta. La hoja CSS layout01.css ha quedado así hecha:

body {
background-color: #003366;
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Y el archivo HTML para conseguir este increible y fascinante resultado que os cambiará la vida es así:

<head>
<title>ricardotayar.wordpress.com</title>
<link href=”layout01.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
</body>
</html>

Ala mozos, ahora a practicar cada uno en su casa estas cosicas, que poco a poco se pueden conseguir resultados muy interesantes. Ahora, ya sabeis como centrar un diseño web utilizando CSS, así que lo siguiente es experimentar y ampliar esta minilección por cuenta propia e ir dándole contenido al contenedor web principal… suerte!!!