Guia 4. Aplicando estilos con CSS

Vista previa del material en texto

UNIVERSIDAD NACIONAL AUTÓNOMA DE NICARAGUA, León 
GUÍA DE APRENDIZAJE 4 
I. DATOS GENERALES: 
 
1.1 Facultad: Ciencias y Tecnología 
1.2 Carrera: Ingeniería en Sistemas de Información / Ingeniería en Telemática 
1.3 Modalidad: Diurna 
1.4 Nombre del Componente Curricular: Diseño de Páginas Web 
1.5 Unidad: Introducción a HTML5 
1.6. Tema: Aplicando estilos con CSS3 
1.7 Tiempo requerido: Presencial 1 hora No presencial 3 hora 
1.8. Fecha: Inicio 21 de agosto Finalización:semana del 28 de agosto (sesión de laboratorio) 
1.9. Profesor (a): M.Sc. Johanna Hernández , Lic. Luis Diaz, Ing. David Maradiaga, Ing. Juan 
Carlos Anton. 
1.11. Año académico: 2023 
1.12. Puntuación asignada a la actividad: 10 puntos 
 
II. COMPETENCIA DEL COMPONENTE CURRICULAR A LA QUE SE APORTA CON ESTA 
ACTIVIDAD: 
Diseña páginas web para cambiar dinámicamente los contenidos, el aspecto y manejar su 
estructura de objetos utilizando HTML, CSS, JavaScript y DOM. 
 
III. INTRODUCCIÓN: 
En esta guía realizaremos una página web aplicándole estilos con CSS3 para validar los 
conocimientos que hemos obtenido hasta ahora. 
IV. ACTIVIDADES A REALIZAR POR LOS ESTUDIANTES: 
Orientación de actividades a desarrollar: 
 
En esta práctica se debe crear un sitio web con una temática libre que cumpla con los siguientes 
requisitos: 
 
• La página principal (index.html) debe estar estructurada haciendo uso de marcos 
(etiquetas frameset y frame). Debe tener un total de 4 marcos distribuidos horizontalmente 
y del mismo tamaño. 
• En el primer frame, se debe visualizar una página web que tenga 3 imágenes visualizadas 
en diagonal utilizando el posicionamiento relativo. 
• En el segundo frame, se debe visualizar una página web que tenga una imagen, un 
párrafo y un formulario dentro de un div, de tal manera que la imagen aparezca 
desplazada en una posición que Usted estime conveniente utilizando el posicionamiento 
absoluto. 
• En el tercer frame, se debe visualizar una página web que tenga 3 imágenes, de tal 
manera que la primer imagen quede ubicada en el centro y en una nueva fila las otras 
dos imágenes (una alineada a la izquierda y otra a la derecha utilizando el 
posicionamiento flotante). 
• En el cuarto frame, añada el contenido que Usted estime conveniente pero donde se 
apliquen las siguientes propiedades de visualización: display, visibility, overflow y z-
index. 
 
 
 
Recursos didácticos para utilizar 
• Diapositivas del tema 4. 
 
V. EVALUACIÓN DE LOS APRENDIZAJES: 
Criterios 
• Que el estudiante aplique estilos a una página web utilizando los elementos de CSS3 
como los tipos de posicionamientos y las propiedades de visualización. 
 
 
 
Evidencias a presentar 
• Se deberá entregar como evidencia al profesor, la página web realizada para verificar en 
ella que el estudiante a aprendido a: 
o Crear la estructura (cajas) de la página web. 
o Aplicar estilos de CSS3 a los diferentes elementos que forman parte de la página. 
 
VI. BIBLIOGRAFIA: 
• Gauchat, J. D. El gran libro de HTML5, CSS3 y JavaScript. Barcelona: Marcombo, 2017. 
Print.