Crear una página Html con el Editor.

Transcripción

1 Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante contribución. Ofrece numerosas operaciones, incluyendo la selección del contenido del repositorio. A continuación se explica las características y las operaciones del editor de HTML en el repositorio y sus usos. Para crear una nueva página HTML a través del asistente de creación diríjase al apartado Contribuir, y pulsar en el apartado de Editor Páginas HTML. Desde aquí se abrirá una nueva ventana para introducir los datos correspondientes a la nueva página que se va a crear. Complete los datos como la Descripción y en el caso de no tener creada ninguna otra página pulsar en botón Añadir página. A continuación introduzca el título para la nueva página y pulse Aceptar. Para abrir el asistente de creación de páginas HTML. Seguidamente se abrirá el asistente del Editor de Páginas HTML del repositorio de RODAS.

2 El editor incluye los siguientes componentes: Barra de herramientas: en la parte superior del editor donde se encuentran los botones con las herramientas necesarias para la creación de la página; Panel de texto: área donde se introduce el texto; Panel de estado: área situada debajo del panel de texto que muestra la información relacionada con la página abierta en el editor. Panel de Texto El panel de texto es el área de trabajo del editor de HTML, donde se pueden introducir texto e imágenes o copiadas de otras fuentes. Se puede introducir texto directamente en el panel de texto, o copiado de otra fuente. La barra de estado La barra de estado se muestra en la parte inferior del editor de HTML. La barra de estado muestra información sobre la estructura del documento HTML para el elemento seleccionado, o la posición del cursor. El editor de HTML puede cambiar de tamaño cuando no está en modo de pantalla completa haciendo clic derecho sobre la esquina inferior del panel de editor y arrastrarla a la medida deseada. Botones de barra de herramientas en el Editor HTML La barra de herramientas consta de una serie de botones que proporcionan funciones útiles para la edición de HTML.

3 La información sobre herramientas proporciona un nombre para cada botón y puede verse cuando el ratón pase sobre el botón. Los botones estándar proporcionados por RODAS comprenden muchas funciones comunes a los procesadores de texto. Estas funciones se describen brevemente y en a continuación. Negrita, cursiva, subrayado y tachado Son los botones de estilo de fuente para la presentación de texto en negrita, cursiva, subrayado o tachado. Alineación de texto Alinear a la izquierda, alinear al centro, alinear a la derecha, y justificado. Se puede utilizar para cambiar la alineación de los párrafos página seleccionando el párrafo y pulsar sobre la alineación deseada. Formato El desplegable Formato de lista, permite a los estilos de párrafo, incluidas las rúbricas, para ser aplicado al texto. Insertar línea horizontal Estos botones se utilizan a la hora de insertar una regla horizontal en la página y Limpiar formato. El botón Limpiar formato elimina la fuente y el formato del párrafo del texto seleccionado. Mostrar/ocultar elementos invisibles Seleccione el botón de Mostrar/ocultar elementos invisibles para ocultar o mostrar las líneas del borde de la tabla y otros elementos invisibles. Subíndice / Superíndice Convertir el texto seleccionado en subíndice o superíndice utilizando el Subíndice Superíndice y botones. Insertar caracteres personalizados Seleccione el botón de Insertar carácter personalizado para mostrar el carácter personalizado desde la nueva ventana que se muestra. Haga clic en el carácter necesario para insertarlo en la página web.

4 Insertar/editar hipervínculo El botón de Insertar/editar hipervínculo inserta enlaces a otras páginas web desde una dirección web (URL). Para crear un enlace: Seleccione el texto introducido en el panel de texto para que el enlace se ejecute al pulsar sobre dicho texto. A continuación haga clic en botón Insertar/editar hipervínculo para mostrar el menú en una nueva ventana. Añada la información requerida (que se describen en las secciones siguientes). General: La pestaña General ofrece las opciones de configuración como son: introducir una URL (dirección web) de un recurso web, agregar un enlace ya creado que se muestre al desplegar la lista, el Destino, que proporciona las opciones de presentación de la página, un título, y una Clase, que permite el uso de las funcionalidades de HTML avanzadas. Ventana Emergente: La ficha de ventana emergente, permite la creación y configuración de una ventana emergente para mostrar el contenido vinculado.

5 La ficha pop comprende dos áreas una de Propiedades de ventanas emergentes y otra de opciones. En ellas se puede configurar funciones como son: el tamaño, la posición dentro de la pantalla principal, y opciones del navegador. Eventos: La ficha Eventos permite acciones de Javascript que se añaden a cualquiera de los eventos estándar HTML. Avanzado: La ficha Opciones avanzadas permite la configuración de atributos, incluyendo el estilo del vínculo y los atributos de accesibilidad. Desde aquí se permite enlazar los atributos que deben proporcionar todos los elementos de configuración de estilos sofisticados que tienen los enlaces en su comportamiento.

6 Para finalizar haga clic en Insertar para completar el enlace o haga clic en Cancelar para cerrar el diálogo sin añadir los cambios. Desvincular El botón Desvincular deshabilita el vínculo seleccionado. Insertar/editar ancla Su función es habilitar vínculos que se crean dentro de una página para que la selección de un enlace a la página se dirija al enlace asociado. En el caso que no haya ningún enlace creado, creará uno nuevo, para editar uno existente basta con seleccionarlo y pulsar dicho botón. Insertar / editar imagen Para insertar una imagen sitúe el cursor en el panel de texto donde se requiera la imagen. Haga clic en el botón de Insertar/ Modificar imagen para mostrar el menú de edición de imagen.

7 Introduzca la información requerida (que se describen en las secciones siguientes). General: La ficha General incluye los siguientes campos: URL de la imagen a introducir (dirección web) de la imagen, descripción de la imagen, y título. En el panel inferior se muestra una vista previa de la imagen introducida. Apariencia: La ficha Apariencia ofrece opciones para personalizar la apariencia de la imagen insertada.

8 Incluye las opciones de: establecer la alineación, especificar las dimensiones (en píxeles) de la imagen, restringir proporciones, espacio vertical y horizontal y el estilo. Avanzado: ofrece más opciones de configuración y comprende las siguientes áreas: como son el intercambio de imagen al pasar el ratón sobre la imagen, el idioma, etc. Finalmente pulse Insertar (o actualización de la imagen si se realiza la edición de imágenes ya existentes) para cerrar el diálogo y volver a la página web. La imagen se insertará. O bien haga clic en Cancelar para cerrar el diálogo sin añadir cambios. Limpiar Código basura El botón Limpiar código HTML elimina código HTML innecesario de la página web. Editar código HTML El botón Editar código HTML permite a los usuarios editar el código fuente HTML de la página directamente. Haga clic en este botón para abrir el código fuente HTML. Modificar el código según sea necesario.

9 Haga clic en Actualizar para cerrar el editor y añadir los cambios a la página o en Cancelar para cerrar el editor de código fuente, sin añadir los cambios. Botones de Edición Las herramientas disponibles son: Deshacer Rehacer (activado cuando la función Deshacer se ha utilizado) Cortar Copiar Pegar Pegar desde Word Insertar una nueva tabla Las tablas se pueden añadir a una página HTML, seleccione el éste botón para crear una nueva tabla, para ello sitúe el cursor en el panel de texto donde se quiere dibujar la tabla. Complete las opciones requeridas como son: General: La pestaña General permite la configuración de propiedades de la tabla en relación con la estructura de la tabla. Introducir filas y columnas, especificar los márgenes (Cellpadding o Cellspacing), alineación, anchura y altura, son algunas de las posibles configuraciones.

10 Avanzado: ofrece nuevas opciones para la configuración avanzada de la tabla, incluyendo: Id (identificador), resumen, estilo, imagen de fondo, dirección del texto, y colores tanto del borde como de fondo, etc. Haga clic en Insertar para cerrar el editor y añadir los cambios a la página o en Cancelar para cerrar el editor de código fuente, sin añadir los cambios. Propiedades de fila (de tabla)

11 Las propiedades de fila se pueden ver situando el cursor en una sola celda en la fila para ser modificada. Seleccione las opciones requeridas (que se describen a continuación). General: La pestaña General permite la configuración de las propiedades de la fila en general y ofrece opciones para seleccionar las filas a modificar, como son: alineación, tanto vertical como horizontal, clase de estilos CSS, y altura. Avanzado: ofrece más opciones de configuración que incluyen: Id (nombre único) para identificar la fila dentro del documento HTML, estilo de los atributos, idioma, imagen de fondo, y color de fondo. Pulse sobre Actualizar para añadir las modificaciones a la fila de las células o Cancelar para cerrar el cuadro de diálogo sin añadir los cambios.

12 Propiedades de la celda (de la tabla) Para modificar las propiedades de la celda de una tabla seleccione la celda o celdas a modificar. Introduzca las propiedades necesarias (las propiedades se describen en las secciones siguientes). General: es similar a las modificaciones de la fila de la tabla. Permite la configuración de las propiedades como son: la alineación, el tipo de celda, la alineación vertical, el alcance y la anchura o altura. Avanzado: ofrece más opciones de configuración incluyen: Id (nombre único), estilo de atributos, dirección del texto, imagen y color de fondo y color del borde, etc.

13 Pulse sobre Actualizar para aplicar las modificaciones o en Cancelar para cerrar el diálogo sin modificar las celdas. Insertar quitar filas El número de las filas de una tabla pueden ser modificadas mediante estos botones. Para añadir filas a una tabla: Sitúe el cursor en una fila al lado de donde se requiere la adición. Seleccione una opción de inserción describiendo su situación: Insertar fila antes de Insertar fila después de Suprimir fila Para eliminar filas en una tabla sitúe el cursor de la fila que desea eliminar. Insertar quitar columnas El número de las columnas de una tabla pueden ser modificadas mediante estos botones. Para añadir columnas a una tabla: Sitúe el cursor en una columna al lado de donde se requiere la adición. Seleccione una opción de inserción describiendo su situación: Insertar columna antes de Insertar columna después de Suprimir columna Para eliminar columnas en una tabla sitúe el cursor de la columna que desea eliminar. Vincular celdas de tabla Las celdas de la tabla se pueden combinar ya sea a través de las filas o columnas, una vez que se fusionen las celdas se pueden volver a dividir. Para combinar o vincular las celdas seleccione las diferentes celdas que desea unir. Haga clic en el botón Combinar celdas de tabla para mostrar el cuadro de diálogo e introducir el número de columnas o filas. Haga clic en Actualizar para combinar las celdas o en Cancelar para cerrar el diálogo sin la fusión de las celdas. Dividir celdas de tabla Para dividir celdas seleccione la celda combinada y haga clic en el botón de Dividir celdas. Ésta celda se dividirá en las columnas y las filas que contaba de manera original. Seleccionar todo Utilice este botón para seleccionar todo el contenido de la página. Haga clic en cualquier parte del cuerpo de la página para cancelar la selección.

14 Seleccionar color del texto El texto y los colores de fondo se pueden cambiar utilizando los botones de color del texto y de color de fondo. Para cambiar el color del texto seleccione el texto que desea modificar y haga clic sobre el botón de color para mostrar el cuadro de diálogo con la gama de diferentes colores. Esta ventana dispone de tres pestañas que ofrecen diferentes opciones para la selección de colores. Pulse sobre Aplicar para cambiar el color del texto o X para cerrar la ventana. Seleccionar color de fondo del texto Para cambiar el color de fondo seleccione el texto que desea modificar. Haga clic en el botón y seleccione un color haciendo clic sobre la paleta de colores en el color deseado, o bien con el valor del color directamente en el cuadro de texto en Color. Pulse sobre Aplicar para cambiar el color del fondo del texto o X para cerrar el cuadro de diálogo y descartar los cambios de color. Botones de Listados Para crear una lista seleccione el texto, y seleccione un estilo de lista haciendo clic en uno de los siguientes botones: Lista desordenada para crear una lista con viñetas. Lista ordenada para crear una lista numerada. Para eliminar un estilo de lista haga clic en el botón de la lista seleccionada de nuevo. El texto volverá al estilo de párrafo normal. Reducir/Aumentar sangría Utilice estos botones para mover el texto seleccionado en la página. Botones Resource RODAS Hay tres botones en el editor de HTML, que permiten la selección de contenidos del Repositorio Digital RODAS. Este contenido puede ser: Archivos adjuntos incrustados en el documento HTML; Enlaces a páginas; Cargados como un archivo.

15 Recursos Embedders Para incrustar un archivo adjunto haga clic en el botón de recursos RODAS Embedders para mostrar la página de búsquedas principal de RODAS. Desde aquí podrá buscar o aportar un recurso que puede ser añadido en un documento HTML. (Nota: sólo los objetos adjuntos pueden ser incorporados directamente, no ocurre esto con los artículos.) Haga clic en el botón de selección para integrar los recursos y regresar al editor de HTML. Recursos Linker Para vincular a un recurso haga clic en el botón de recursos Linker y mostrar para mostrar la página de búsquedas principal de RODAS. A continuación seleccione un recurso. El recurso seleccionado se mostrará como un enlace.

16 File Uploader Se utiliza para subir un archivo. Haciendo clic en el botón de archivos se mostrará una nueva ventana para cargar un archivo o seleccionar un archivo adjunto actual. Escriba un título descriptivo, si es necesario. Haga clic en el botón Examinar para buscar un archivo en el disco duro local o de red. Una vez que el archivo se ha encontrado, haga clic en el botón Cargar. El archivo subido se mostrará como un enlace en la página HTML. Fuentes Modifica el tipo de fuente del texto. Para ello selecciona el texto que deseas modificar y despliega la lista de Fuentes. Selecciona el tipo de fuente preferida. Tamaño Modifica el tamaño del texto. Para ello selecciona el texto que deseas modificar y despliega la lista de Tamaño. Selecciona el tamaño preferido. Activar el modo de pantalla completa Seleccione el modo Ver en pantalla para mostrar el editor HTML en modo de pantalla completa, seleccione de nuevo para volver al modo normal. Corrector ortográfico Al activar el botón del corrector ortográfico cualquier texto mal escrito o palabra no reconocida, serán subrayadas en rojo. Haga clic en la palabra incorrecta o palabras para mostrar una lista de palabras sugeridas. Seleccione la palabra correcta de la lista. El editor de HTML es compatible con el inglés.