Plantilla para el examen

A continuación os dejo la descarga de un plantilla en para HTML5

Plantilla en HTML5

Click para descargar la plantilla

Algunos consejos

  1. La plantilla es muy similar a la primera que utilizamos
  2. Usa una estructura wrapper como contenedor
  3. No os os confundaís con el footer, simplemete usa:
    1. footer-area para meter todo lo del footer
    2. footer-outer-block, para meter los distintos segmentos (footer-segment, cajas que componen el footer)

Usando plantillas

Después de habernos familiarizado con HTML5 tenemos que aprender a usar plantillas CSS3 para poder haer páginas web con un diseño actual. Una página web cambia de diseño constantemente para adaptarse a los nuevos estilos y por eso tenemos que saber hacer estas adaptaciones con relativa normalidad.

Vamos a empezar con un estilo que podéis descargar desde aquí: owmx-1.1

Como empezar

  1. Denemos hacer un esquema de la plantilla.
  2. Todas las plantillas incluyen un fichero index.html que muestra las distintas posibilidades de diseño.
  3. Debemos entender las estructuras principales de esa plantilla.
  4. Tenemos que reconocer los estilos especiales y saber adaptarlos a nuestras necesidades.
  5. No es aoconsejable tocar el estilo. Las plantillas avanzadas han sido elaboradas por especialistas del diseño y si las cambiamos perderemos el diseño original.
  6. Si queremos cambiar las imagenes las cambiaremos en el archivo images, respetando el mismo nombre.
  7. En ocasiones la parte del meta no está completa, es muy importante rellenarla como hemos visto en clase y personalizarlas.
  8. No tenemos porque usar todos los elementos de diseño.
  9. Es importantísimo que los textos sean originales.
  10. Desde cada página se debe poder acceder a todas las páginas, salvo que tengamos muchas págimas (de momento este no es el caso).
  11. Es importante poner un favicon.
  12. De momento cogeremos las imagenes de google images, pero pronto aprenderemos a guardalas optimizadas
  13. No olvides que lo realmente importante es el texto.

Ejemplo de adaptación de plantilla

Marketing para PYMES

Marketing para PYMES

Ejercicios

  1. Crea una página web para alguna empresa (real o ficticia) usando la plantilla: owmx-1.1.
  2. Haz una prueba de la lista de definiciones.
  3. Prueba la galería fotográfica
  4. Prueba las tablas (puedes usar las de anteriores ejercicios).
  5. Ahora cambia la plantilla de tu página web a esta: owmx-2.0. Deberás seguir los consejos del principio de la entrada.

Este tema lo veremos en HTML5

Esto haciendo una página en HTML donde se verán ejemplo para diseñar páginas, pinchar en la imagen inferior para llegar a ella:

Página en html5

Página en html5