Canvas How-To: Crear pestañas en una página

Introducción

Al agregar pestañas de navegación a una página de Canvas, puede usar esa página para presentar múltiples "áreas" de contenido sin la necesidad de crear una página separada para cada área. Esta página contiene recursos para que los instructores los usen para crear una navegación con pestañas dentro de una página de Canvas.

Descripción general del proceso

Video cortesía de Gregory Beyrer, Cosumnes River College

Fase I - Importar página de muestra de Canvas Commons

Consejo:  Abrir Canvas en una nueva pestaña del navegador. Cambie de un lado a otro entre estas instrucciones y su curso mientras sigue las siguientes instrucciones.

Para comenzar, importe el recurso Stan State - Página de muestra con pestañas de Canvas Commons a uno de sus cursos de Canvas.

1. Inicie sesión en Canvas y haga clic en Los comunes en el menú Canvas de la izquierda.
2. Busque "Stan State - Página de muestra con pestañas". Tan pronto como comience a escribir, aparecerán los resultados. Seleccione la página de muestra de los resultados.
3. Haz clic en el icono azul de  Importar/Descargar y seleccione el curso al que desea importar.

Enlace directo al recurso.

Fase II - Modificar plantilla para uso

Una vez que se haya importado la página de la plantilla, haga clic en el Páginas herramienta en el curso para comenzar a usarla.

1. En la lista de páginas, abra la página "Página de muestra con pestañas".
2. Haga clic en  Editar.
3. 
   En la lista superior de enlaces, reemplazar el texto de la etiqueta de cada enlace con las etiquetas de navegación deseadas. El texto de la etiqueta es "Tab One", "Tab Two", "Tab Three", etc.
   Nota: para obtener los mejores resultados, haga clic en el medio del nombre de ejemplo y escriba su reemplazo. A continuación, elimine los caracteres adicionales. Esto asegurará que el enlace HTML subyacente no se rompa sin darse cuenta.
4. En el área de contenido principal, reemplazar el texto del título de cada área de contenido para que coincida con la etiqueta de navegación.
   Nota: como arriba, haga clic en el medio del ejemplo y comience a escribir su reemplazo. Limpie los caracteres adicionales antes y después de su texto.
5. Reemplace el texto de marcador de posición para los párrafos "Contenido del párrafo de la pestaña 1" con el contenido deseado.
   • Repita el paso 5 para las otras áreas de contenido de pestañas que usará en esta página.
6. Modificar el contenido del encabezado y pie de página del documento. Aquí es donde irá el contenido de la página principal de la pestaña. Esto es lo que se muestra cuando un usuario hace clic en la pestaña de este elemento.
   Nota: se recomienda encarecidamente que conserve al menos el contenido del pie de página. Úselo para recordar a los estudiantes que hagan clic en cada pestaña.
7. Guardar y publicar la página.

Fase III: eliminar o agregar pestañas

Eliminar pestañas adicionales

Para eliminar las pestañas no utilizadas, simplemente resalte y elimine el elemento completo en la lista superior de enlaces de navegación, así como el título de la pestaña y los párrafos de muestra en el área de contenido de la pestaña.

Agregar pestañas adicionales

Agregar pestañas adicionales implica editar el HTML subyacente de la página. No es difícil, pero no dude en ponerse en contacto avena@csustan.edu si prefiere no hacerlo usted mismo.

1. Haga clic en el botón  Editor HTML enlace para cambiar a la vista HTML de la página. Desplácese hacia arriba hasta la parte superior del editor.

   

2. Seleccione y copie el código para el último artículo en la lista de navegación de pestañas. Será algo como:
   <li><a href="#tabs-5">Tab Five</a></li>
Example:

   

3. Pegue el código en una nueva línea en blanco inmediatamente después del último elemento de la lista. La nueva línea debe estar por encima de la final. </ul> </head>.
4. Cambie el número en el elemento href después '#pestañas-' y el nombre de la pestaña para que los números aparezcan en orden consecutivo. El código final será algo como esto:
   <li><a href="#tabs-6">Tab Six</a></li>
Example:
   

A continuación, creará el área de contenido de la pestaña que corresponde al enlace ab recién agregado.

5. Copie el siguiente código a continuación, asegúrese de incluir '<' y '>' al principio y al final:

   <div id="tabs-5">
<h2>Tab Five Title</h2>
<p>Tab 5 content paragraph 1</p>
<p>Tab 5 content paragraph 2</p>
</div>

6. Pegue el código inmediatamente encima del final </div> etiqueta en la página.
   Ejemplo:

   

7. Edite el código y vuelva a cambiar el número después 'pestañas-' para que coincida con el número utilizado en la lista de navegación. Muy importante lo siguiente!
8. Vuelva a la vista Editor de contenido enriquecido de la página.
9. Edite el nombre de la nueva pestaña para que coincida con el texto de navegación creado anteriormente y agregue su contenido al área de la pestaña.
10. Haga clic en  Guardar.