Curso de diseño web (documentación)

[Índice] · [Publicaciones] · [Saulo.Net]

Capítulo 1
HTML básico

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

1.1 Primera página web

Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

1.2 Formato de texto e imágenes

Nombre de la página: catedral.htm
Texto: catedral.txt
Imagen del logotipo: logoglory.jpg. Medidas: width="380" height="172"
Imagen 1 de la Sagrada Familia: familia1.jpg. Medidas: width="329" height="450"
Imagen 2 de la Sagrada Familia: familia2.jpg. Medidas: width="285" height="432"
Ver página [versión 1]
Ver página [versión 2]
Ver página [versión 3]

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

1.3 Listas

Nombre de la página: listas.htm
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

1.4 Tablas

Nombre de la página: tablas.htm
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

Capítulo 2
Composición de páginas

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.1 Composición de páginas con tablas (I)

Datos

Nombre de la página: comtablas.htm
Textos: linux.txt
Foto del pinguino: linux1.gif. Medidas: height="102" width="83"
Cartel de Linux: linux2.gif. Medidas: height="96" width="152"
Guarda las imágenes anteriores en un subdirectorio llamado imagenes.

Para llegar a la versión final, puedes ir pasando por las siguientes versiones intermedias:

Primera versión

Crea una tabla con 3 columnas. La primera y la última tienen un ancho de 100 puntos.
Ver página

Segunda versión

Añade dos filas nuevas a la tabla, una arriba y otra abajo. Une todas las celdas de estas dos filas para poder colorearlas de forma más sencilla.
Ver página

Tercera versión

Añade dos columnas nuevas a la tabla de 35 puntos de ancho, una en cada lado. La primera fila y la última de la tabla deben tener una única celda (unión de 5 celdas).
Ver página

Cuarta versión

Crea una nueva tabla de dos columnas dentro de la celda principal de la primera tabla.
Ver página

Versión final

Añade una segunda fila a la tabla interior y une sus dos celdas.
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.2 Composición de páginas con tablas (II)

Datos

Página web original: http://www.programacion.com/html/cursos.htm
Códigos de colores utilizados:
- El fondo de "Cursos propios": #3EBFB6
- El fondo de "Estándares": #D0BD4F
- Fondos de los textos de la derecha: #E3DFCC (oscuro) y #F5F4EB (claro)
Reproducir en una página nueva llamada columnas.htm la estructura de tablas de la página anterior. Es suficiente con hacer la zona central, desde donde pone "Cursos propios" hasta "Listas de correo". No es necesario escribir los textos, únicamente que se vean los recuadros. Observar que las dos columnas son independientes, es decir, si se añade o se suprime texto de una de ellas la otra no tiene que verse afectada.
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.3 Composición de páginas con frames (I)

Práctica 1

Nombre de la página: frames1.htm
Divide la página en dos frames: el frame superior tiene un tamaño fijo de 60 puntos y el inferior, el resto.
Para el frame superior crea la página framesup.htm
Para el frame principal crea la página frame1pri.htm
Nombre de la página de pruebas: framepru.htm
Ver página

Práctica 2

Nombre de la página: frames2.htm
Divide la página en tres frames: el frame superior tiene un tamaño fijo de 60 puntos, el de la derecha un tamaño fijo de 100 puntos y el frame principal, el resto.
Para el frame superior crea la página framesup.htm
Para el frame de la izquierda crea la página frame2izq.htm
Para el frame principal crea la página frame2pri.htm
Nombre de la página de pruebas: framepru.htm
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.4 Composición de páginas con frames (II)

Datos

Página web original: http://www.adams.es
División en frames de la página anterior.
Dirección de los frames laterales en blanco: http://www.adams.es/blanco.html
Dirección del frame superior: http://www.adams.es/menunavega.html
Dirección del frame pie de página: http://www.adams.es/registra.html
Dirección del frame lateral izquierdo: http://www.adams.es/menu.html
Dirección del frame menú superior: http://www.adams.es/menusup.php
Dirección del frame principal: http://www.adams.es/indice.php

Práctica

Crea la página con los correspondientes FRAMESET anidados para que genere la misma estructura del web de Adams. Esta página debe llamar a los frames que están publicados en Internet.

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.5 Composición de páginas con CSS (I)

Ejemplo 1

Caja centrada en la pantalla. Dimensiones expresadas en porcentajes respecto al navegador.
Ver página

Ejemplo 2

Caja con una anchura fija centrada horizontalmente en el navegador.
Ver página

Ejemplo 3

Dos columnas. La primera con tamaño fijo y la segunda, variable.
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.6 Composición de páginas con CSS (II)

Práctica 1

Nombre de la página: capas4.htm
Crea dos divisiones: una para la barra superior y otra para el resto.
En la división inferior incluye dos nuevas divisiones: una para la columna izquierda y otra para la derecha.
Ver página

Práctica 2

Realizar un diseño alternativo utilizando CSS para la estructura principal de http://www.hostalcorbero.com/2-e.html (ver ejemplo).
- Sustituir las tablas y la imagen de fondo por dos columnas creadas con CSS.
- Sustituir los botones creados con imágenes mediante cajas con borde.
Modificar el diseño anterior para situar la botonera en la zona superior de la pantalla, en lugar de en la columna izquierda (ver ejemplo).
- Sólo deben realizarse modificaciones en la hoja de estilos, no en el contenido de la página.

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.7 Marcas dentro de la página

Nombre de la página: marcas.htm
Texto: marcas.txt
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

2.8 Estructura de enlaces de un sitio web

Crear una carpeta llamada "seguridad". Dentro de esta carpeta incluir la página principal del web, "index.htm", y 3 subdirectorios: "general", "win" y "unix". Dentro de cada uno de estos subdirectorios incluir una nueva página llamada "index.htm" con el contenido correspondiente a cada apartado.
Desde cada página tiene que poder saltarse al resto de las páginas utilizando siempre rutas relativas a la situación de la página actual.
Ver hoja de estilos común a todas las páginas.
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

Capítulo 3
Formularios

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

3.1 Formularios

Práctica 1

Nombre de la página: formularios.htm
Ver página

Práctica 2: Libro de visitas

Crear una página web que envíe a la aplicación http://www.saulo.net/pub/dweb/verlibro.php la siguiente información:
- nombre (contiene el nombre del usuario que escribe el mensaje)
- correo (contiene el correo)
- vercorreo (contiene un 1 si el correo se mostrará a los demás)
- pais (contiene el país donde vive el usuario)
- web (contiene la página web sin "http://" del usuario; en blanco si no tiene)
- medio (contiene la forma en que el visitante encontró la página). Sólo puede contener uno de los siguientes valores:
  - 1 (por un buscador)
  - 2 (por recomendación de un amigo)
  - 3 (por un banner)
  - 4 (por otro sitio web)
- opinion (contiene la opinión que le merece la página al usuario). Sólo puede contener uno de los siguientes valores:
  - 1 (muy mala)
  - 2 (mala)
  - 3 (regular)
  - 4 (buena)
  - 5 (muy buena)
- mensaje (contiene el mensaje que se publicará en el libro de visitas)

Práctica 3: Buscadores

Crear una página que contenga formularios de envío de datos a buscadores.
Ver ejemplo.

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

Capítulo 4
Hojas de estilo

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

4.1 Textos

Ejemplo

Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

4.2 Listas

Ejemplo

Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

4.3 Tablas

Ejemplo

Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

4.4 Cuadros

Ejemplo

Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

4.5 Enlaces y cursores

Ejemplo

Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

Capítulo 5
JavaScript

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

5.1 Ejemplos de JavaScript

Ejemplo 1: mostrar datos al usuario
Ejemplo 2: solicitar datos al usuario
Ejemplo 3: uso de variables
Ejemplo 4: leer variables
Ejemplo 5: eventos (I)
Ejemplo 6: eventos (II)
Ejemplo 7: objetos navigator y screen
Ejemplo 8: objeto window
Ejemplo 9: eventos (III)

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

5.2 Control de eventos

Ejercicio 1

Nombre de la página: repite.htm
Ver página

Ejercicio 2

Nombre de la página: producto.htm
Ver página

[Índice] · [Arriba] · [Publicaciones] · [Saulo.Net]

5.3 Formulario de pedido

Nombre de la página: pedido.htm
Datos:
- Para los campos de los formularios puedes utilizar los tamaños: 5, 50, 5 y 5 respectivamente.
- Los datos se recalculan cada vez que se abandona una celda de cantidad o precio.
- El botón Enviar comprueba que los campos nombre y apellidos están completos y que el formulario contenga algún producto (precio total mayor que cero).
- Cada vez que se sitúa el cursor en alguna celda, se muestra en la barra de estado un mensaje de ayuda.
- No se debe permitir que el usuario modifique una celda con resultados.
Ver página