Es hora de tu primera misión en este curso.
En la primera asignación,
vamos a proporcionarle la página aboutus.html sin estilo.
El archivo zip que contiene esa
página aboutus.html está disponible en las instrucciones de asignación.
Por lo tanto, debe descargar la página y luego mover esa página a su carpeta con Fusion.
A partir de entonces, aplicará
clases de Bootstrap y la cuadrícula Flexbox de Bootstrap para
darle estilo a la página, luego moverá la página a la carpeta Con Fusion,
luego puede ver la página en su navegador escribiendo
localhost: 3000/aboutus.html y su servidor de compilación de servidor ligero hasta la página aboutus.html,
así que esta es la única forma en que puede llegar a ver la página.
Así que para empezar,
la página se verá así,
una página completamente Unstyle que solo contiene contenido.
Ahora su trabajo es pasar por tres tareas para dar formato a esta página.
Veamos las tres tareas con más detalle.
Su primera tarea es aplicar
las clases Bootstraps CSS y Javascript a la
página aboutus.html para que esta página se transforme instantáneamente en esta página,
donde tan pronto como agregue las clases Bootstraps CSS y JavaScript,
el encabezado y el pie de página se formatearán automáticamente correctamente,
porque simplemente he copiado el encabezado en el pie de página de la página index.html en
esta página y dejé todo el formato de Bootstrap como tal,
pero el contenido real de la página todavía no tiene estilo.
Así que ahora, como segunda tarea,
va a aplicar la cuadrícula Bootstraps Flexbox incluyendo el contenedor,
las filas y las clases de columna a
este contenido o a la página para que pueda darle un estilo adecuado.
Ahora, cuando aplique las clases,
va a aplicar las clases de fila y columna al aboutus para simplemente dejarlo como tal.
Luego va a aplicar las clases de fila y columna a
este contenido para que este contenido ocupe sólo la mitad de la pantalla,
y luego va a aplicar las clases de fila y columna a
este contenido para que tenga ocupa todo el ancho de la pantalla.
Por lo tanto, elija las clases de fila y columna correctamente para aplicar a esto.
Puede utilizar las clases CSS personalizadas que ya hemos
implementado para el index.html agregando el archivo style.css,
también para darle estilo al contenido de esta página.
Por lo tanto, cuando complete la segunda tarea,
su página terminará teniendo este estilo.
Así que puede ver que la página de aboutus existe en su propia.
A continuación, nuestra parte Historia,
observe que en un tamaño de pantalla pequeño a grande,
nuestra historia ocupará sólo la mitad del ancho de la pantalla.
A continuación, la parte Liderazgo corporativo ocupa todo el ancho de la pantalla en este caso.
Esta es la segunda tarea que debe completar en su asignación.
Para la tercera tarea como puede ver,
este diseño de contenido se ve bien para tamaños de pantalla más grandes,
pero cuando va al tamaño de pantalla extra pequeño especialmente como este,
observa que el contenido es demasiado en esta sección.
Entonces, lo que nos gustaría hacer es usar otra clase de Bootstrap proporcionada para nosotros llamada,
[inaudible] y bloque DSM.
Hay un vínculo a las clases receptivas en los recursos de asignación,
por lo que puede comprobar la documentación del bloque [inaudible] y DSM.
Debe aplicarlos para que esta descripción se
oculte en los tamaños de pantalla extra pequeños.
Así que cuando las clases a esta parte de liderazgo corporativo,
el mismo contenido ahora se presentará sin la descripción,
por lo que se ocultará en el tamaño extra pequeñas pantallas.
Pero cuando se va a la pequeña el tamaño de la pantalla grande,
el contenido se hará visible.
Así que puede notar que para el tamaño de pantalla extra pequeño,
el contenido está oculto,
pero para el tamaño de pantalla pequeño,
ese contenido de descripción se mostrará claramente.
Así que esta es tu tercera tarea en tu misión.
Mientras esté en ello, también puede aplicar las mismas clases a
las descripciones de nuestra página index.html
para que las descripciones detalladas de los elementos de contenido también se oculten en
la página index.html cuando se vea en tamaños de pantalla extra pequeños.
Esto completa tu primera tarea.
Además, cuando envíe su tarea,
tome una captura de pantalla de página completa de su diseño
tanto en tamaño de
pantalla pequeño a extra grande como en tamaño de pantalla extra pequeño,
y luego incluya eso como parte de su envío.
Para tomar una captura de pantalla de página completa en Chrome,
puede usar una extensión de Chrome que está disponible para nosotros,
el enlace a la extensión de Chrome se proporciona en
los recursos de asignación que siguen la descripción de la asignación.
Después de completar su tarea,
en caso de que esté guardando sus cambios en un repositorio de Git,
no olvide confirmar los cambios en
su repositorio de Git con la asignación de mensajes uno.