Paso 1: Modo avanzado

Activa el Modo avanzado si aún no lo has hecho.

Paso 2: Gestor de estilos

Pulsa en el menú estilos para acceder al Gestor de estilos.

Paso 3: Crear estilo nuevo

En la ventana que aparece, pulsa sobre el botón Crear estilo nuevo.

Paso 4: El diseñador

El diseñador de estilos mostrará los cambios que se realicen en las diferentes pestañas.

Comienza por la pestaña General.

Paso 5: General

1. Escribe tu nombre como Autor/a del nuevo estilo.
2. Deja la dirección URL tal y como está o borra el contenido.
3. En la descripción puedes indicar por ejemplo que el estilo utiliza los colores corporativos de tu Centro, tu ciudad, etc...
4. Piensa en los colores que van a conformar tu página.
5. Indica los ajustes generales de tu proyecto. Prueba con estos ajustes:
   
   • Ancho página: 90% (lo normal es dejar "algo de espacio" en los laterales)
   • Ancho borde: menos de 5 px para no hacerlo demasiado ancho.
   • Posición: centrado (si es menos del 100%)
   • Color borde: elige uno que haga juego con los colores que tienes pensados.
   • Color sombra: por defecto (o no, tú decides)
6. Ahora, decide el tipo de texto y los diferentes colores. Por ejemplo:
   • Tipo de letra: elige la que más te guste
   • Tamaño: 100% y vacío es lo mismo e indica el tamaño normal de la letra. Más de 100 la aumenta y, menos, la disminuye.
   • Color de texto: por defecto (o no, tú decides)
   • Color de los enlaces: elige uno que haga juego con los colores que tienes pensados.
7. Pulsa Guardar y continúa.

Paso 6: Página

1. Elige el color del fondo (ojo, de la parte externa a la página con los contenidos).
2. Puedes usar una imagen que se repita en el fondo a modo de tapiz (no lo vamos a hacer por falta de tiempo). Habría que indicar que Sí se repite y la posición donde comienza.
3. Elige el color del fondo de los contenidos. Aquí también se puede elegir una imagen.
4. Elige el color y estilo para la barra de búsqueda (si la hubiera). Se pueden dejar los valores por defecto.
5. Pulsa Guardar y continúa.

Paso 7: Cabecera y pie

1. Indica el alto para el encabezado. Por ejemplo: 90px.
2. Al igual que en ajustes anteriores, se puede seleccionar una imagen como tapiz o, incluso, como logotipo (en este caso, no debería repetirse y estar localizada en una posición determinada).
3. Indica un color para el fondo y otro para el borde.
4. Si muestras el título del proyecto, deberás elegir diferentes apartados para su presentación (tipo de letra, color de texto y sombra, alineación, tamaño y margen superior). También puedes desear no mostrarlo porque hayas decidido colocar un logo.
5. Para el pie de página se podrán modificar los colores y algún que otro ajuste pero no su tamaño.
6. Pulsa Guardar y continúa.

Paso 8: Navegación

Estos ajustes afectarán a la manera en la que un usuario puede interactuar con el proyecto:

• Si existirá menú o no y cómo, horizontal o vertical.
• La apariencia del menú, si existiera.
• Uso de iconos o palabras y sus estilos.

Cambia lo que consideres y guarda para continuar.

Paso 9: iDevices

Afectará al estilo de la caja que forma cada iDevice. Podremos cambiar dos tipos de iDevices: los destacados y los no destacados (texto libre, ...)

Prueba a jugar con los diferentes valores y observa los cambios.

Guarda y continúa.

Paso 10: Avanzado

Este bloque está reservado a los usuarios avanzados en conocimientos HTML y CSS.

Pulsa Finalizar para guardar los cambios, cerrar el diseñador y volver al proyecto.