Tutorial de diseño web

[Gepetto]

Capítulo1: Introducción.


Este tutorial de diseño web explica como crear una web sencilla (en xhtml + CSS) a través de ejemplos. En el, nos acercaremos a algunos de los aspectos más importantes del código y también veremos algunos consejos útiles para que sea una web funcional y accesible.

Aunque quizá lo más importante de esto no sea el poder construir una web desde cero, sino aprender como funcionan las hojas de estilo y poder aplicar esos conocimientos para modificar el aspecto de cualquier sitio web, ya sea hecho íntegramente por nosotros o ya sea un sitio preconstruido.

*Puedes descargar la página terminada haciendo clic aquí
--------------

Para seguir los ejemplos son necesarias una serie de herramientas que nos faciliten la tarea en la manera de lo posible. Las más importantes son: un programa editor web y uno para crear y editar gráficos.


El editor web:

Existen gran cantidad de ellos entre los que elegir, tanto gratuitos como de pago. Los podemos diferenciar en dos tipos: los editores en modo texto, que nos sirven para escribir el código y los editores wysing, que además nos ofrecen la posibilidad de situar algunos elementos directamente en la página sin tener que escribir su código.


Captura del editor evolvED.


El editor gráfico:

Un editor gráfico nos servirá para crear imágenes para nuestra página. Necesitaremos alguno que permita exportar a los formatos más usados para web (.jpg, .gif o .png).


Captura del editor gráfico El Gimp.


El entorno de trabajo:

Es importante que nos encontremos cómodos a la hora de trabajar. Un escritorio limpio y con accesos directos a los programas que vayamos a utilizar, hará mucho más sencillo el desarrollo de nuestra página y también nos ahorrará tiempo.

Una vez organizado el espacio de trabajo, crearemos una carpeta con varias subcarpetas en su interior, las cuales nos servirán para ir situando todos los ficheros de una forma organizada. La estructura sería la siguiente:



*A la carpeta principal le pondremos el nombre que queramos (Ej: Miweb) y dentro de ella crearemos las carpetas que vemos en la imagen y guardaremos las páginas que compongan la web segun las vayamos haciendo.
*En la carpeta Archivos, guardaremos todo tipo de archivo que queramos que los visitantes descarguen.
*En Imagenes guardaremos todas la imágenes que vayamos a usar en nuestra galería.
*En la carpeta Otros, meteremos todo elemento que usemos para la decoración de la página (iconos, baner, hoja/s de estilo, etc...).

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

(En el siguiente capítulo: Un poco de teoría).

[Gepetto]

Capítulo2: Un poco de teoría

Estructura:
Lo primero que hay que saber es como se estructura una página web. En cierta medida una web es comparable a una persona; tiene cabeza y cuerpo.

xhtml:
Simplificando, diremos que el xhtml es igual al HTML, solo que de una forma un poco más estricta en algunos aspectos. Por ejemplo, en xhtml todas las etiquetas de código van en minúsculas y todas deben estar debidamente cerradas (excepto alguna que ya veremos más adelante), esto no era así en HTML.

CSS:
Las holas de estilo en cascada, o CSS, son como un traje que le ponemos a nuestra web para que tenga mejor aspecto y que nos da la ventaja de poder cambiarla de aspecto solo con cambiarle ese traje.

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

El código (x)html:

A pesar del gran número de comandos existentes, por lo general no los usamos todos. Aunque aquí veremos los necesarios para crear una web simple, es recomendable tener una manual complementario para poder profundizar en el tema (lo mejor en estos casos es un buen libro impreso que podamos consultar ante cualquier duda).


Cosas a tener en cuenta:

-La mayoría de comandos siempre se componen de una etiqueta de apertura y otra de cierre. Ambas tienen el mismo nombre y sólo se diferencian en que la de cierre lleva una barra "/"

<etiqueta>Contenido</etiqueta>

-Mucha veces, tendremos que usar unas etiqueta dentro de otras. Esto en xhtml hay que hacerlo ordenadamente, es decir, cerrando las etiquetas de dentro hacia afuera.

<etiqueta1><etiqueta2>contenido</etiqueta2></etiqueta1> - BIEN, la segunda etiqueta está cerrada dentro de la primera.
<etiqueta1><etiqueta2>contenido</etiqueta1></etiqueta2> - MAL, aunque el código podría funcionar, ya no sería xhtml válido.

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

CSS (esto se verá más claro con la práctica):

El código en CSS se puede dividir en 3 partes, selector {propiedad: valor;}. Un ejemplo:

#body {background-color: ffffff;}  <- este código le dice (propiedad) al cuerpo de la página (selector) que tiene que ser de color blanco (valor).

-Los selectores pueden ser de 3 tipos:

#bloque - va precedido del símbolo # y se utiliza para aplicar estilos a todo un bloque.
.clase - se utiliza para aplicar un estilo a cierta parte del contenido.
etiqueta - se utilizara para aplicar un estilo a dicha etiqueta en todo el documento.

*Las propiedades que les asignemos a cada uno de ellos siempre van encerradas entre llaves {} y con un punto y coma al final de cada valor ;

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

(En el siguiente capítulo: Empezando con el código).

[Gepetto]

Capítulo3: Empezando con el código

Abre tu editor de código y escribe las siguientes etiquetas:

<html>

<head>
</head>

<body>
</body>

</html>

Explicación de las etiquetas:

<html> indica al navegador que la página tiene código html en su interior. Todo el código que utilicemos, irá comprendido entre las etiquetas de apertura y cierre (<html> y </html>).

<head> es la "cabeza" de la página. Entre <head> y </head> incluiremos código que dará unas instrucciones a la página. Aquí meteremos el título y la dirección de la hoja de estilos.

<body>, el cuerpo de la página. Aquí irán todos los elementos visibles, cada uno con su etiqueta descriptiva o de formato.


*Si guardasemos esta página como html, al abrirla no veríamos nada, ya que aun no le hemos insertado nada de contenido al código.

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

Ahora añade lo siguiente a la cabeza de la página:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mi página web</title>
</head>

charset=iso-8859-1 hace referencia a la codificación de caracteres latinos. Esto nos permite que los visitantes puedan visualizar caracteres especiales en nuestro idoma como la "ñ" o la "ç". Si quisieramos usar otro tipo de caracteres junto con los latinos (por ejemplo caracteres japoneses o árabes), entonces habría que sustitulo por charset=UTF-8.

Con <title>, le damos un título a la página. Si ahora la guardas como index.html y la abres con un navegador, veras arriba del todo el título.



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

Un par de apuntes:

-La estructura del código debe estar siempre ordenada, separando al menos con un espacio cada uno de los elementos del código para futuras modificaciones que queramos hacer. Algunos diseñadores optan por comprimir el código ya que al haber menos espacios la página ocupa menos, pero no es la forma correcta de hacerlo. Por ejemplo, lo siguiente funcionaría de la misma manera que lo que llevamos hecho hasta ahora:

<html><head><title>Mi página web</title></head><body></body></html> <-El código es más compacto, pero a la hora de hacer alguna modificación nos costaría bastante más que si tuviesemos un código bien estructurado.

-El index.html siempre será la página principal del sitio web, es decir, es lo primero que debería ver el visitante cuando escriba en el navegador la dirección de nuestra web.

(En el siguiente capítulo: Delimitación e inclusión de un baner).

[Gepetto]

Capítulo4: Delimitación e inclusión de un baner

Aunque a la hora de definir o delimitar anchos y altos, podemos utilizar varias unidades de medida, por comodidad trabajaremos con pixeles a la hora de adaptar la página a determinadas resoluciones de pantalla.

Actualmente la resolución óptima es 1024 x 768, pero algunas personas prefieren mantener una resolución de 800 x 600 (bien porque el pc es antiguo y el monitor pequeño o bien porque les resulta más cómoda esa resolución). Debido a esto, no es recomendable definir un ancho de página  mayor de 800 pixels y debido a la gran variedad de navegadores existentes, tampoco es recomendable apurar demasiado esos pixels.

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

El primer paso es crear un baner o logo para ponerlo como encabezamiento. Yo he optado por un baner gráfico de 750 de largo por 90 de ancho.


Haz clic en la imagen para verlo en grande y si quieres,
puedes descargarlo para usarlo de prueba en tu diseño.

Una vez lo tengas, guardalo en la carpeta otros. Abre el editor web y crea un nuevo archivo en blanco para incluir los estilos, esto será la “hoja de estilos”.

En ese nuevo archivo, escribe el siguiente código:

/* Delimitación de la página */
#pagina {
background-color: #ffffff;
border: 1px solid #000099;
text-align: left;
width: 750px;
margin: auto;
}

background-color: #ffffff; <- Color de fondo blanco.
border: 1px solid #000099; <- Borde azul marino de 1pixel de ancho.
text-align: left; <- Los textos que incluyamos se alinearán a la izquierda.
width: 750px; <- Ancho 750 px.
margin: auto; <- El margen automático centrará la página.


Y debajo del código anterior, añade el siguiente:

/* Baner */
#baner
{
height : 90px;
width: 750px;
border-bottom: 3px solid #000099;
background-image: url(otros/baner.jpg);
}

height : 90px; <- Alto.
width: 750px; <- Ancho.
border-bottom: 3px solid #000099; <- Añade un poco de grosor al borde inferior.
background-image: url(otros/baner.jpg); <- Establece una imagen de fondo, en este caso el baner.


Una vez hecho esto, guarda el código con el nombre de "estilo.css" en la misma carpeta donde tengas la página y abre el index.html que ya habías creado. En el cuerpo (<body></body>) añade lo siguiente:

<div id="pagina">
<div id="baner">
</div>
</div>

Ya está la página delimitada, y a su vez la cabecera situada dentro de ella. Ahora sólo falta añadir la línea de código que hará que la página html llame a la hoja de estilos. En el <head> y debajo del <title> añade:

<link type="text/css" href="estilo.css" rel="stylesheet" />

Seguidamente guarda el trabajo y abre la página con el navegador para asegurate de que todo está correcto. Si lo has hecho bien, deberías ver el baner centrado y rodeado por un borde azul marino.

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

*Como el estilo "página" será el que englobe todo el contenido, el resto de código lo iremos incluyendo entre <div id="pagina"> y su correspondiente etiqueta de cierre </div> que siempre estará situada antes de </body> (como hemos hecho con el baner).

*Antes de cada bloque de código CSS, se ha incluido un comentario (Ej: /* Delimitación de la página */). Esto no es necesario, pero es una buena constumbre al empezar a trabajar con CSS, el indicar para que que sirve cada bloque. Así se ve todo un poco más claro.

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

(En el siguiente capítulo: Estructura de una caja y creación de un menu).

[Gepetto]

Capítulo5: Estructura de una caja y creación de un menu

El término "caja" se puede aplicar a cada uno de los bloques que componen nuestra páginas, con sus estilos y posicionamiento.



padding: Es el margen que se deja entre el contenido y el borde de la caja.
border: El borde de la caja. 1px sería el tamaño mínimo.
margin: Margen de separación entre dicha caja y resto de cajas o elementos cercanos.

Una vez entendido el concepto de caja, abre tu archivo index en el editor web y añade (después de la cabecera):

<div id="menu">
 <ul>
   <li><a class="index.html" href="#index">Portada</a></li>
   <li><a class="poesias.html" href="#poesias">Poes&iacute;as</a></li>
   <li><a class="galeria" href="#galeria">Galer&iacute;a de im&aacute;genes</a></li>
   <li><a class="descargas" href="#descargas">Descargas</a></li>
   <li><a class="enlaces" href="#enlaces">Enlaces</a></li>
   <li><div id="contacto">Para ponerte en contacto conmigo, escribeme a webmaster@mipagina.com</div></li>
 </ul>
</div>

<ul> y <li>: Son etiquetas para crear una lista.
<a class: De momento no hace nada. Pero en teoría llama a una clase en css que aplica un estilo a los enlaces del menu.
href="enlace.html">: Enlaces de destino del menu.
<div id="contacto">: Un estilo especial para el texto de contacto. Al igual que "class", de momento no hará nada hasta que no definamos el estilo.

*&iacute; <- Algunos editores web, como dreamweaver, añaden esto para mostrar símbolos especiales (o no universales), como pueden ser las tildes de las palabras (si el texto lo escribes normalmente, también lo verás correctamente).

*Nota que en los enlaces, los nombre de las páginas no contienen tildes ni espacios. Esto es debido a que algunos navegadores podrían no mostrarlas correctamente, por lo tanto, evita poner tildes o espacios a los nombres de tus páginas.

El resultado sería un menu como este:


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

Seguidamente, abre la hoja de estilos y debajo del los estilos que ya tienes añade los siguientes:

#menu
{
float: left;
width: 160px;
height: 225px;
border-top: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
border-color: #000099;
margin-top: 20px;
}

#contacto {
font-size: 11px;
border-top: solid 1px #000099;
padding-top: 13px;
}

ul
{
margin:0px;
padding: 0px 0px 0px 0px;
}

li {
list-style: none;
margin-left: 5px;
padding: 5px 0px 5px 0px;
}

a.menu:hover {
display:block;
background-color: #9999ff;
}

a.menu {
text-decoration: none;
color: #000000;
}

float: left; <- Hace que la caja del menu "flote" a la izquierda de otras cajas.
margin-top: 20px; <- Dejamos un espacio de 20px entre el menu y el baner.
font-size: 11px; <- Establecemos un tamaño de fuente.
margin:0px; <- Un margen 0px para que los enlaces se peguen a la izquierda.
padding: 0px 0px 0px 0px; <- Esto es para que no haya excesiva separación con respecto al borde y los enlaces queden bien encuadrados.
list-style: none; <- Con esto quitamos los circulitos que suelen aparecer por defecto en las listas.
display:block; <- Muestra los enlaces en modo bloque, lo que nos permite aplicarles un color de fondo (yo he aplicado un azul claro).
text-decoration: none; <- Quitamos toda decoración a los enlaces (en este caso el subrayado y el color). El que sea "a.menu" en vez de "a" a secas nos permite aplicar este estilo sólo a los enlaces del menu dejando que los demás enlaces se vean normalmente.
padding: 5px 0px 5px 0px; <- Estas medidas van en el sentido de las agujas del reloj (arriba, derecha, abajo, izquierda).
border-top: solid 1px #000099; <- En esta línea he puesto varios atributos para ahorrar espacio. Esto también se podría expresar de la siguiente manera:

border-top: 1px;
border-top-style: solid;
border-top-color: #000099;

Guarda los cambios en la hoja de estilos y previsualiza el index para ver si se han aplicado correctamente los estilos. Ahora el menu debería verse de esta manera:



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

*Quizá todo este código pueda resultar un poco confuso al principio. Mi consejo es que modifiques las propiedades de cada uno de los estilos y previsualices los cambios para poder entenderlo un poco mejor.

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

(En el siguiente capítulo: Inclusión de un texto).

[Gepetto]

Capítulo6: Inclusión de un texto

Ya tenemos el menu y el baner. Así que ahora vamos a incluir un poco de contenido, que será un texto de presentación para la página.

El texto a incluir podría ser el siguiente:

<h1>Página principal</h1>

<h5>Presentación</h5>
 <p>Bienvenid@ a mi nueva página web. Una sencilla página personal creada con xhtml y estilos css.</p>
 <p>Aquí encontraras algunas imagenes, textos, descargas variadas y enlaces a otras páginas interesantes. </p>

<h1> <- Título de página con un tamaño predefinido (podríamos definir <h2>, <h3>, etc... para tamaños más pequeños).
<h5> <- Título del contenido de texto.
<p> <- Etiqueta que sirve para introducir un párrafo.


-De momento, el texto se vería así con el navegador:



*Al tener sólo esos dos párrafos, puedes ver que en la imagen aperece una molesta línea cortando el menu y que se situa inmediatamente después del texto. Esto a primera vista se podría corregir aplicando un ancho de página, pero nosotros lo solucionaremos de otra manera un poco más práctica en capítulos posteriores.

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

Ahora vamos a aplicarle unos estilos al texto:(Copialos en la hoja de estilos).

#contenido
{
width: 500px;
float: right;
border: 1px solid #000099;
margin-top: 15px;
margin-right: 37px;
padding: 9px;
}

h1 {
float: left;
margin-left: 30px;
margin-bottom: 0px;
margin-top: 0px;
}

h5 {
text-decoration: underline;
margin: 0px;
}

p.inicial:first-letter {
font-size: 18px;
font-weight: bolder;
margin-left: 10px;
}

h1 { y h5 { <- Aplicamos estilos a todas las etiquetas <h1> y <h5> que pongamos en la página.
text-decoration: underline; <- Hacemos que el texto aparezca subrayado.
p.inicial:first-letter { <- Esta línea aplica un estilo de clase a la primera letra de un párrafo (Nota que si en vez de poner p.inicial hubiesemos puesto sólo p, entonces ese estilo se aplicaría a todos los párrafos de la página).
font-weight: bolder; <- La primera letra en negrita.
margin-left: 10px; <- Separo la primera letra 10 pixeles del borde de la caja. Esto también se podía haber conseguido con una propiedad llamada "text-indent" y que sirve para sangrar la primera linea.

Y ahora vamos a añadir y modificar algunas etiquetas de nuestro texto para aplicarle estos estilos (código coloreado):

<h1>Página principal</h1>

<div id="contenido">
<h5>Presentación</h5>
<p class="inicial">Bienvenid@ a mi nueva página web. Una sencilla página personal creada con xhtml y estilos css.</p>
<p class="inicial">Aquí encontraras algunas imagenes, textos, descargas variadas y enlaces a otras páginas interesantes.</p>
</div>

Recordemos:
<div id="contenido"></div> <- Aplicamos un estilo al bloque que contengan estas dos etiquetas.
<p class="inicial"> <- Aplicamos un estilo especial a una parte del contenido y no a todo el bloque como haríamos con "div".


-Ahora el bloque de texto se debería ver perfectamente alineado (excepto con internet explorer):



--------------
**La página tal y como la tenemos, no se verá bien en navegadores internet explorer hasta su versión 6. Esto es debido a que internet explorer interpreta de manera diferente los estilos css. En realidad IE suma de manera diferente el margin que aplicamos al contenido, lo cual hace que nuestro texto se pegue al menu.

Teniendo presente que nuestro fin es que la página se vea bien en cualquiera de los navegadores (cumplan o no los estándares), en el próximo capítulo veremos unas etiquetas especiales que nos servirán para adaptar nuestra página al navegador de Microsoft.

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

(En el siguiente capítulo: Inclusión de un segundo texto y adaptación a Internet Explorer).

[Gepetto]

Capítulo7: Inclusión de un segundo texto y adaptación a Internet Explorer

Incluir un segundo texto nos resultará sencillo, ya que tenemos habíamos definido un estilo para el primer bloque en el capítulo anterior y para conseguir cierta homogeneidad, será ese estilo el que utilizaremos también en este bloque de texto. Recordemos que esto lo aplicabamos mediante la etiqueta "div="contenido".

Además, vamos a adornar el texto con una imágen para conseguir un aspecto más vistoso. Para esto vamos a incluir en nuestra hoja de estilos un poco de código que aplicaremos a la imagen y que a su vez aplicaremos dentro de el bloque "div="contenido".


-Esta es la imagen que voy a utilizar. Si quieres, puedes descargarla para hacer pruebas en tu propio diseño (para llevarlo todo con un poco de orden, guarda la imagen en la carpeta "imagenes"):



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

Este sería el código a incluir en la hoja de estilos:

.imagen {
float: left;
border: solid 1px #000099;
padding: 2px;
margin-top: 12px;
margin-right: 4px;
}

-En este caso vemos que el selector va precedido por un punto. Esto es debido a que vamos a aplicar una clase a la etiqueta de imagen "img".


Y este sería el código a incluir en el index:

<div id="contenido">
<h5>Noticias</h5>
<img class="imagen" src="imagenes/maleducado.gif" alt="Una fea costumbre" width="80" height="80" /><p class="inicial">Recientes estudios han demostrado que urgarse la nariz puede acarrear la desventura, entre otras cosas, de convertirse en protagonista de un tutorial de diseño web. Además, es más rápido usar las dos manos para escribir código, por lo que se recomienda que se abstengan de tan fea costumbre y que para las "molestias nasales", utilicen los pañuelos destinados a tal efecto.</p>
</div>

<img class="imagen" <- Aplicamos el estilo "imagen" a la etiqueta <img>.
src="imagenes/maleducado.gif" <- Esta es la ruta donde tenemos guardada la imagen (en ete caso apunta a la carpeta "imagenes").
alt="Una fea costumbre" <- Esto es un texto descriptivo, que, si bien no es obligatorio para que se vea la imagen, es recomendable acordarse de incluirlo siempre.
width="75" height="75" <- Podemos definir las dimensiones de la imagen, aunque si ya la tenemos al tamaño necesario, o es necesario aplicar estos atributos. Aquí he reducido la imagen a 75px de largo por 75px de ancho.
/> <- Asi es como cerramos las etiquetas de imagen en xhtml (en html "normal" se aplicaría la respectiva etiqueta de cierre </img>).


Así se debería ver en el navegador.
--------------

Ya tenemos listo nuestro segundo párrafo, pero como vimos en el anterior capítulo, si abrimos la página en internet explorer los párrafos de texto no se verían bien posicionados, tal como podemos apreciar en la siguiente captura:



Para solucionar esto, tenemos que aplicar un estílo específico para internet explorer, pero que no modifique los estilos anteriormente creados. Para eso añadimos antes de la etiqueta de cierre </head>, lo siguiente:

<!--[if IE]>
<style>
#contenido {
margin-right: 19px;
}
</style>
<![endif]-->

-Este pequeño código simplemente reemplaza el estilo de margen de el bloque #contenido en la hoja de estilos. <!--[if IE]>, simplemente indica que sólo se reemplace si el navegador del visitante es internet explorer (IE).

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

*A riesgo de ser pesado, vuelvo a recordarte que no olvides nunca de recordad el texto "alt" de las imágenes. Es imprescindible si quieres que tu página valide como xhtml (una cuestión de accesibilidad que quizá tratemos más adelante).

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

Ya casi tenemos la estructura casi terminada, pero aun nos faltan algunas cosas importantes. En el siguiente capítulos veremos como cerrar el borde de la página, además del código denominado "doctype", imprescindible en toda página web.

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

(En el siguiente capítulo: Pie de página e información sobre el tipo de documento).

[Gepetto]

Capítulo8: Pie de página e información sobre el tipo de documento

Continuamos con el pie de página, que será la parte donde escribiremos los "créditos", es decir, nuestro nombre, licencia, año de creación, y cualquier añadido que queramos hacer sobre la creación de la página.


Abre la hoja de estilos y añade lo siguiente:

#creditos{
clear : both;
text-align: center;
font-size: 80%;
color: Gray;
padding-top: 10px;
padding-bottom:10px;
}

font-size: 80%; <- Además de en pixeles, podemos indicar el tamaño de fuente en porcentaje. En esta línea aplicamos un tamaño al 80% del tamaño por defecto.
color: Gray; <- A parte de los colores en hexadecimal, también hay una serie de colores que se pueden aplicar simplemente escribiendo su nombre. Aquí indicamos que el color del texto será "Gris".
clear: both; <- Esta línea es muy importante. Significa que el texto no podrá alinearse con ninguna otro bloque CSS, por lo tanto se situará debajo o encima de los demás, pero nunca al lado. Esto es lo que hace que ahora si aparezca la línea que delimita la página.


Ahora añade el código respectivo en el index:

<div id="creditos">
-Tutorial de maquetación con CSS-<br />
Daboweb (cc) 2006.
</div>

Pie y línea que delimita la página.

*Si no se viese parecido a como está en la captura, comprueba que has añadido el código del index antes del último </div>, que es el que cierra la étiqueta "página" (la que delimita la los límites de la web y que incluye todos los bloques de contenido).
-------------

Bueno, ya tenemos la "tarta" casi terminada, pero aun nos falta la guinda.

El DTD o Doctype son dos líneas de código que se situan antes de la etiqueta <html>. significa "Document Type Definition" y hace precisamente eso, define el tipo de documento que estamos creando (en este caso ya lo hemos creado).


Existen 6 tipos de Doctype, 3 para html y 3 para xhtml. En este caso, como nuestra página es xhtml, debemos aplicar uno de los tres que hacen referencia a este lenguaje y que son los siguientes:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

-El primero es el "estricto" (Strict). Incluir este tipo nos obligaría a utilizar todas las etiquetas en xhtml y cumplir a "rajatabla" la presentación en CSS.

-El segundo es el "transicional" (Transitional). Es bastante más flexible que el estricto, ya que aquí podemos mezclar etiquetas HTML con etiquetas xhtml, estilos aplicados a etiquetas y tablas para maquetación.

-El tercero "conjunto de frames" (frameset), se debe utilizar cuando la página contenga marcos o frames.


*Para esta página puedes utilizar cualquiera de los dos primeros, pero yo aconsejaría utilizar el segundo por lo ya mencionado, su flexibilidad.

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

Con esto ya tenemos una página más o menos estructurada y aunque a primera vista es agradable, quizá también resulta excesivamente sencilla. En el siguiente capítulo como poner un fondo gráfico que hará que la página muestre un aspecto un poco más sofisticado.

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

(En el siguiente capítulo: Utilización de un fondo gráfico).

[Gepetto]

Capítulo8: Utilización de un fondo gráfico

En editores como photoshop o gimp, es muy sencillo crear fondos web. Esto nos da la oportunidad de crear fondos gráficos con efectos y colores personalizados (sin tener que limitarnos a los "colores seguros web").

A la hora de crear tu propio fondo, es importante tener en cuenta la resolución de pantalla que podrán utilizar nuestros visitantes. Una buena idea es la de crear el fondo adaptado a resoluciones 1280 x 1024, que a pesar de no ser la más utilizada, siempre es bueno que el fondo no se vea "cortado".

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

-En este caso yo he creado un fondo muy simple, pero que dará una sensación de profundidad a la página. Las medidas son 1300 x 20 pixels:


Clic en la imagen para ampliarla.

*Guárdalo si quieres en la carpeta "otros" donde ya teníamos el baner y lo enlazaremos desde alli.

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

En la hoja de estilos añade el siguiente código:

body {
background-image: url(otros/fondo.gif);
background-position: center;
background-repeat: repeat-y;
margin: 0px;
}

body { <- Como el fondo es para todo el cuerpo de la página, aplicaremos el estilo a la etiqueta <body>.Escribiendo "body", hacemos referencia a esa etiqueta.
background-position: center; <- La centramos para que la parte blanca quede sobre el contenido.
background-image: url(otros/fondo.gif); <- Establecemos la ruta de la imagen de fondo.
background-repeat: repeat-y; <- Repetimos la imagen sobre el "eje y", es decir, hacemos que la imagen se vea como mosaico.
margin: 0px; <- Eliminamos los márgenes para que no quede hueco por arriba ni por abajo del contenido de la página (si esto último no te queda claro, prueba el código sin añadir esta línea).


Ahora eliminamos los bordes que delimitan la página para que parezca que es la sombra del fondo la que la delimita. Para esto, en la hoja de estililos ve al bloque #pagina y elimina la línea del borde (border: 1px solid #000099;).

El resultado final sería el siguiente:



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

Caso a parte, me imagino que te habrás dado cuenta de que la carpeta "archivos" que creaste en el primer capítulo no la hemos tocado.Pues bien, vamos a ver un pequeño ejemplo de enlace para descarga.

-He creado un archivo ficticio llamado "pañuelos.zip" y lo he guardado dentro de la carpeta "archivos". Seguidamente he incluido el siguiente código en el segundo bloque de texto del index, al final del párrafo (antes de la etiqueta de cierre </p>):

<br /><a href="archivos/pañuelos.zip">Descargar pañuelos</a>

<br /> <- Recordemos que esto era una etiqueta de salto de línea en xhtml.
<a href="archivos/pañuelos.zip" <- Etiqueta de enlace href con la ruta del archivo entre comillas.
>Descargar pañuelos</a> <- Texto que aparecerá como enlace y cierre de la etiqueta.


Asi se verá el enlace. Al hacer clic sobre el, se abrirá el diálogo de descarga del navegador:



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

*Con este capítulo doy por terminado el tutorial. Espero que no haya resultado excesivamente complicado de entender, no obstante, cualquier duda puede ser preguntada en el foro. Y si te apetece ir "un poco mas allá", no olvides echar un vistazo al resto de manuales sobre diseño web.

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

PD: Aunque el responsable de este tutorial soy yo (incluido cualquier error que pueda contener); me gustaría dar las gracias a Liamngls, Ladyblues, Dabo y Destroyer. Por su ayuda, sus consejos y sobre todo por su paciencia