GENERAL, ayuda informatica, trucos, problemas, internet, messenger, software, programas, solidaridad, P2P > Manuales y tutoriales Webmaster
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 "/"
--- Citar ---<etiqueta>Contenido</etiqueta>
--- Fin de la cita ---
-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.
--- Citar ---<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.
--- Fin de la cita ---
--------------
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:
--- Citar ---#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).
--- Fin de la cita ---
-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:
--- Citar ---<html>
<head>
</head>
<body>
</body>
</html>
--- Fin de la cita ---
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:
--- Citar ---<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mi página web</title>
</head>
--- Fin de la cita ---
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:
--- Citar ---<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.
--- Fin de la cita ---
-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:
--- Citar ---/* Delimitación de la página */
#pagina {
background-color: #ffffff;
border: 1px solid #000099;
text-align: left;
width: 750px;
margin: auto;
}
--- Fin de la cita ---
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:
--- Citar ---/* Baner */
#baner
{
height : 90px;
width: 750px;
border-bottom: 3px solid #000099;
background-image: url(otros/baner.jpg);
}
--- Fin de la cita ---
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:
--- Citar ---<div id="pagina">
<div id="baner">
</div>
</div>
--- Fin de la cita ---
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:
--- Citar ---<link type="text/css" href="estilo.css" rel="stylesheet" />
--- Fin de la cita ---
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):
--- Citar ---<div id="menu">
<ul>
<li><a class="index.html" href="#index">Portada</a></li>
<li><a class="poesias.html" href="#poesias">Poesías</a></li>
<li><a class="galeria" href="#galeria">Galería de imá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 [email protected]</div></li>
</ul>
</div>
--- Fin de la cita ---
<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.
*í <- 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:
--- Citar ---#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;
}
--- Fin de la cita ---
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:
--- Citar ---border-top: 1px;
border-top-style: solid;
border-top-color: #000099;
--- Fin de la cita ---
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).
Navegación
[#] Página Siguiente
Ir a la versión completa