Act01 Aplicación estilos CSS de referencia
En esta actividad tendrás que crear una hoja de estilo CSS externa que incluya todas las reglas de estilo necesarias para conseguir un resultado lo más parecido posible que el de la “Fase 2” de los proyectos de referencia.
https://ledzep-tablascss.webcindario.com/ - https://nomadiclifefase2.webcindario.com/
Recuerda que tendrás que vincular todos los documentos HTML con la hoja de estilo incluyendo la siguiente línea en el código en cada uno de ellos.
<link href=”nombre.css” rel=”stylesheet” type=”text/css”>
Una vez que la hoja de estilos esté correctamente dirigida a todas las páginas del sitio, si quieres modificar algo relacionado con el diseño, será suficiente con añadir o editar las reglas de estilo de la hoja y se aplicará automáticamente a todas las páginas del sitio.
Esta hoja de estilos se irá actualizando en la próxima Unidad donde se incluirán las reglas CSS dedicadas a la disposición de elementos en la página (maquetación).
INDICACIONES DE ENTREGA
Entregar en la carpeta del servidor del instituto una copia de la carpeta raíz del sitio que incluya la hoja de estilo externa.
Recuerda que…
- Puedes incluir en una hoja externa todas las reglas de estilo que quieras. No importa si alguna de las reglas no se utiliza en alguna página. Si sólo quieres aplicar una o varias reglas de estilo a una página concreta, también puedes colocarlas en el “head” de esa misma página.
- Desde el panel de estilos CSS de Dreamweaver, puedes comprobar todas las reglas de estilo que se aplican en la página y su ubicación.
Act02 Aplicación hoja de estilo personal
En esta actividad tendrás que crear una nueva hoja CSS externa, en la que deberás aplicar un diseño personal, en el que tendrás que modificar todas las propiedades CSS utilizadas en el proyecto de muestra cambiando los colores, tamaños, tipografías y cuantas cosas quieras, aplicando los criterios de diseño que hayas aprendido.
- Prueba a crear nuevas reglas y propiedades y experimenta un poco con ello.
- Todas las tipografías de esta hoja de estilo deberán ser de Google Fonts.
- Dentro de la carpeta raíz del proyecto, crea una carpeta llamada “css” y guarda en esta carpeta la nueva hoja de estilo creada.
Prueba a vincular indistintamente ambas hojas de estilo sobre el proyecto y verifica que las aplicas correctamente.
INDICACIONES DE ENTREGA
Entregar una copia de la nueva hoja de estilos creada.