Saltar al contenido principal
pdf?stylesheet=default
Blackboard Help

Crear diseños Express

Puede crear un diseño Express muy fácilmente usando una plantilla existente. En esta sección, se describen los elementos básicos de la creación de un diseño Express. Para obtener más información sobre las variables de diseño, revise la sección Variables comunes del diseño Express.

Cómo crear un diseño Express

  1. Desde el bloque Express, seleccione Crear un diseño.
  2. Seleccione si el Tipo de diseño partirá de una Plantilla o de un diseño Manual (creado por el usuario).
  3. Configure los Ajustes de plantilla:
    • Introduzca un Nombre de la copia de seguridad para la plantilla.
    • Seleccione el estilo y el color de una de las plantillas. En el área Vista previa de la variante se visualizará una muestra de la plantilla. Las Notas de la plantilla muestran la configuración que se debe activar para que la plantilla funcione correctamente y cualquier otra información que el desarrollador de la plantilla considera que el usuario debe conocer antes de seleccionar la plantilla que utilizará.
    • Para copiar imágenes desde la plantilla original en el diseño, seleccione Recrear imágenes del diseño desde la plantilla.

      Si subió diferentes imágenes desde la ficha Subir imágenes de diseño, elimine esta opción.

    • Seleccione de uno de los Paquetes de íconos disponibles.

      Los diseños se pueden utilizar para los íconos en su sitio web, incluidos actividades, navegación y otros íconos.

      En el área Muestra del paquete de íconos se visualizará una muestra de los diferentes tipos de íconos. Las Notas del paquete de íconos muestran información adicional acerca de los íconos que el desarrollador considera que el usuario debe conocer antes de seleccionar el paquete que utilizará.

    • Si desea cambiar a esquinas redondeadas en vez de bordes cuadrados para bloques, fichas, botones y secciones de sus cursos, marque Usar esquinas redondeadas de CSS3.

      Esta CSS solo funciona para navegadores compatibles con CSS3, como Opera, Safari, Chrome, FF 3-4 e IE 9 (sin estar en modo de compatibilidad). En todos los otros navegadores se verán bordes cuadrados.

    • Para establecer la opacidad para editar íconos en los bloques y cursos de su sitio, marque Usar CSS visibilidad de la interfaz de usuario (UI).

      La opacidad se aplicará hasta que el usuario se mueva al ícono durante el modo de edición. El objetivo de esta configuración es hacer que los íconos de su sitio sean menos invasivos para sus usuarios.

    • Configure el nivel de Opacidad para las áreas ocultas (de 0.0 a 1.0) para los íconos de la interfaz.

      Esta configuración atenuará los íconos hasta que el usuario se mueva hacia ellos.

    • Introduzca cualquier CSS personalizado que desee incluir en las variables del diseño Express.

      Puede sobrescribir o crear un nueva CSS sin tener que editar el archivo CSS ni descargar el diseño.

      Para obtener más información sobre los cambios de CSS, consulte Variables comunes del diseño Express.

    • Introduzca información de pie de página adicional en el área Código de análisis.

      Agregue el código de análisis de Google u otro JavaScript que se agregará al pie de página de cada página. Este método le permite agregar información de pie de página sin tener que editar el archivo footer.html ni descargar el diseño.

    • Introduzca el nombre de la Familia de fuentes que utilizará en la plantilla.
    • Introduzca el Tamaño de fuente y seleccione el tipo de extensión para el tamaño.
  4. Establezca los Ajustes de color de la fuente personalizada usando la opción Elegir un color para cada tipo de fuente utilizado en el sitio web de su institución:
    • Cuerpo: El color predeterminado del texto del diseño.
    • Encabezado: El color de fuente o enlace en las etiquetas div del encabezado.
    • Menú: El color de fuente o enlace en los menús Express y Flexpage.
    • Resaltado del menú: El color de fuente o enlace en los menús Express y Flexpage cuando se desplace el cursor sobre un enlace o esté seleccionado actualmente.
    • Navegación/barra de navegación: El color de fuente o enlace en la navegación o barra de navegación.
    • Cabecera del bloque: El color de fuente de la parte superior de un bloque.
    • Contenido del bloque: El color de fuente dentro de un bloque.
    • Botón: El color de fuente del texto del botón.
    • Libro de calificaciones vertical: El color de fuente cuando el libro de calificaciones tiene una selección vertical.
    • Libro de calificaciones horizontal: El color de fuente cuando el libro de calificaciones tiene una selección horizontal.
    • Color del enlace general: El color de enlace en todo el sitio.
    • Encabezado (h1-h6): El color de fuente de la etiqueta HTML h1 a h6.
    • Resaltar: El color de fuente cuando se resalta algo o se desplaza el cursor sobre eso.
    • Alternar filas: El color de fuente o enlace cuando se utiliza el color de fondo de fila alternativo.
    • Pie de página: El color de fuente o enlace en el pie de página del diseño.
  5. Establezca los Ajustes de color del fondo personalizado usando la opción Elegir un color para cada tipo de fondo utilizado en el sitio web de su institución:
    • Cuerpo: El color o la imagen de fondo en la etiqueta HTML de cuerpo para el diseño.
    • Encabezado: El color o la imagen de fondo en el encabezado del diseño.
    • Navegación/barra de navegación: El color o la imagen de fondo en la navegación o la barra de navegación del diseño.
    • Barra superior: El color o la imagen de fondo detrás de una barra de color que se imprime en lugar de una barra de menú, si no se han creado menús en la página específica. Esta configuración también puede usarse para el color o la imagen de fondo del menú superior del menú cuando se han agregado menús.
    • Menú: El color o la imagen de fondo en el menú desplegable para todos los elementos del menú.
    • Resaltado del menú: El color o la imagen de fondo en el menú desplegable cuando el usuario desplaza el mouse sobre un elemento de menú.
    • División de la página: El color o la imagen de fondo en la etiqueta HTML div en la página ID.
    • Contenido en formato DIV: El color o la imagen de fondo en la etiqueta HTML div en el contenido ID del diseño.
    • Cabecera del bloque: El color o la imagen de fondo en el encabezado de todos los bloques. A veces, utilizado en planillas para otros fondos de encabezado, tales como el encabezado de esquema de tema o semanas.
    • Contenido del bloque: El color o la imagen de fondo del contenido de un bloque. A veces, utilizado en planillas para otros fondos de bloque, tales como el área de sección en cursos de temas o semanas.
    • Botón: El color o la imagen de fondo de todos los botones del sitio.
    • Selección de libro de calificaciones vertical: El color o la imagen de fondo del color de resaltado vertical en el libro de calificaciones.
    • Selección de libro de calificaciones horizontal: El color o la imagen de fondo del color de resaltado horizontal en el libro de calificaciones.
    • Alternar filas: El color o la imagen de fondo para áreas de su sitio que alternan colores, generalmente en tablas, como el libro de calificaciones, los registros y otros informes.
    • Pie de página: El color o la imagen de fondo en el pie de página del diseño.
  6. Haga clic en Guardar cambios.

Una vez que haya creado el nuevo diseño, podrá cargar imágenes en el diseño.

Cómo agregar imágenes a su diseño Express

El diseño Express incluye tres directorios para imágenes (pix, pix_core y pix_plugins). Puede eliminar cualquiera de los directorios o cualquier imagen individual y agregar una propia al diseño.

  1. Desde el bloque Express, seleccione Crear un diseño.
  2. Haga clic en Subir imágenes de diseño.
  3. Marque la carpeta o el archivo que desea actualizar.

    Puede descargar imágenes y carpetas antes de eliminar o reemplazar imágenes. También puede crear un nuevo directorio.

  4. Para agregar imágenes a su diseño Express, seleccione Subir un archivo.
  5. En la página Subir un archivo, puede mover una imagen al área Archivo o hacer clic en Elegir un archivo para buscar el archivo de imagen que subirá.

    Solo se pueden cargar los siguientes tipos de formatos de archivo: .flv, .gif, .ico, .jpeg, .jpg, .png, .mp3, .mp4, .swf y .zip. Si se carga un archivo .zip, se extraerá y todo el contenido del archivo ZIP se copiará en el directorio en el que se cargó el archivo. Luego, se eliminará el ZIP.

  6. Haga clic en Guardar cambios cuando termine.