Botones en la categoria Insertar

Insertar / modificar enlace

Este icono nos permite enlazar un texto con una página web, a través de un hipervínculo.

• Paso 1: Se selecciona el texto que se quiere enlazar con una página web y se pulsa el botón "Insertar/editar enlace":

• Paso 2: Se abrirá una ventana con varias pestañas y opciones:

Desde la PESTAÑA GENERAL podremos efectuar las acciones más sencillas. Incluye los siguientes campos:

• URL del enlace: En esta caja de texto se escribirá la dirección completa de la página web a la que se quiere enlazar. La forma correcta de escribir la dirección es con http:// antes de su dirección y sin signos de puntuación. El icono situado a la derecha del campo permite incluir una imagen que enlazará a dicha web.

• Anclas: En el caso de tener definida un ancla (ver sección) desde este desplegable se puede seleccionar para enlazarla.

• Target: Esta opción indica dónde se debe abrir la página web que estamos enlazando, si en la misma ventana del navegador, sustituyendo a la página actual (Abrir en la ventana general), abrir en otra ventana (_blank), o en el caso de tener frames, permite elegir si se abrirá en el frame principal o en el frame hijo (Abrir en esta ventana / frame) o (Abrir en esta ventana / frame padre _parent).

• Título: Es el texto que aparece al situarnos sobre el enlace (sin pulsar sobre él) para más información sobre la acción que realizará. Es opcional, aunque aconsejable poner una breve explicación de a dónde llevará el enlace (2-3 palabras).

• Clase: En el caso de tener asociada una hoja de estilos CSS, se puede indicar la clase que corresponde a este enlace.

El resto de pestañas nos permitirán realizar acciones más complejas que explicamos en un apartado especialmente dedicado a : funciones avanzadas

Romper enlace

Activando este botón se eliminará el hipervínculo asociado a un texto previamente seleccionado.

Insertar / editar imagen

Esta opción nos permitirá incluir imágenes en el contenido que estamos creando.

• Paso 1: Situar el cursor del ratón en el lugar exacto de la caja de escritura donde queramos insertar la imagen.

• Paso 2: Activar el botón de Insertar/editar imagen:

• Paso 3: Se abrirá un Popup con varias pestañas que nos permitirán definir las características de la imagen que se va a insertar:

Consulta la tabla con las características y requisitos de los distintos tipos de ficheros admitidos en EducaMadrid.

Desde la PESTAÑA GENERAL podremos realizar las acciones más básicas relacionas con la inserción de imagénes. Cuenta con los siguientes campos:

• URL de la imagen: En esta caja de texto se puede escribir la dirección completa de la dirección en Internet donde se encuentra la imagen. La forma correcta de escribir la dirección es con http://direccion/ruta-imagen, sin signos de puntuación.

El botón de la derecha permite seleccionar e incluir una imagen que esté en nuestro disco duro virtual.

Si aún no hemos subido al disco duro virtual la imagen que deseamos incoporar a nuestro contenido, podremos hacerlo desde la misma ventana, pulsando sobre el botón "Añadir fichero". Se abrirá entonces una nueva ventana, desde la que seleccionaremos la imagen local a través del botón Examinar.

Si antes de efectuar esta acción hubiésemos realizado una búsqueda en el directorio de ficheros, sus resultados se mostrarán, en nueva ventana, inmediatamente después de incorporar la imagen en el contenido. Cerraremos esa ventana para poder seleccionar la imagen que acabamos de subir.

Tras activar el botón "Seleccionar" se abrirá de nuevo el pop up que ya habíamos visto antes con la imagen incorporada en "Vista previa". Desde esta ventana podremos cumplimentar los campos "Descripción" y "Título", ambos opcionales.

• Descripción: Es la etiqueta “alt” de la imagen, un atributo que permite visualizar un texto alternativo en el navegador cuando no se puede cargar la imagen por cualquier motivo (por ejemplo, porque se tenga una conexión lenta y se hayan desactivado las imágenes en el navegador). También aparece al situarnos encima de la imagen. No es obligatorio ponerla, pero es altamente recomendable.

• Título: Alternativa a la anterior.

Cuando acabemos pulsaremos el botón "Insertar". La imagen se mostrará en la caja de escritura del editor.

Desde la PESTAÑA ASPECTO podremos efectuar diferentes acciones sobre las imágenes, antes o después de mostrarlas en la caja de escritura

• Alineación: Aquí se selecciona cómo estará alineada la imagen respecto al texto. Conforme se va cambiando la opción en el desplegable, se puede observar cómo quedaría esa alineación, en el dibujo del lateral.

• Dimensiones: El tamaño de la imagen está especificado en píxels y en horizontal x vertical. Un píxel es la unidad en que se mide la resolución de la pantalla del ordenador, que suele tener dimensiones 1024 píxels de ancho y 768 píxels de alto. Cualquier imagen que se introduzca deberá tener dimensiones menores al tamaño de la pantalla y preferiblemente dimensiones reducidas para que no lentificar la conexión.

Si se desea cambiar el tamaño original de la imagen, en esta opción se puede hacer, introduciendo en los cuadros de texto las nuevas dimensiones. La opción de “Bloquear relación de aspecto”, que por defecto está activada, mantiene la proporción real entre el largo y el ancho de la imagen, para que no ocurra que se introduzca un valor demasiado diferente en una de las dimensiones y distorsione la otra.

También será posible cambiar el tamaño de una imagen desde el área de edición. Sólo hay que seleccionarla pinchando sobre ella y situar el puntero del ratón en uno de los controladores de tamaño, arrastrándolo hasta que el objeto adquiera la forma y el tamaño deseado.

• Espacio vertical: Podemos definir el espacio entre la imagen y los elementos que la rodeen verticalmente. Insertaremos en la caja de escritura un número entero del 1 en adelante.

• Espacio horizontal: Podemos definir el espacio entre la imagen y los elementos que la rodeen horizontalmente. Insertaremos en la caja de escritura un número entero del 1 en adelante.

• Borde: Se puede poner borde a la imagen, escribiendo un número entero mayor que 0.

• Clase: En el caso de tener asociada una hoja de estilos CSS, se puede indicar la clase que corresponde a esta imagen.

• Estilo: También se puede definir el estilo desde este cuadro, sin necesitad de tener una hoja de estilos CSS asociada.

La PESTAÑA AVANZADO nos permitirán realizar acciones más complejas que explicamos en un apartado especialmente dedicado a : funciones avanzadas

Insertar / editar barra horizontal

Este botón permite insertar en cualquier lugar del editor una barra horizontal que actuará como línea divisoria o separadora.

• Paso 1: Si el navegador usado es Internet Explorer, al pulsar sobre el botón se introducirá la línea directamente:

Podremos editar la barra, definiendo sus propiedades, si la seleccionamos y hacemos clic en el botón derecho del ratón:

• Paso 2: Si el navegador usado es Mozilla Firefox, al pulsar sobre el botón, se abrirá un popup con una serie de opciones:

• Ancho: Grosor de la barra (en la unidad deseada, píxels o %, a seleccionar en el desplegable de la derecha)

• Alto: La altura en unidades (del 1 al 5).

• Sin sombras: Se puede elegir el efecto de sombreado (relleno) que tendrá la barra.

Al pulsar en el botón Insertar, la barra se mostrará según las propiedades que hayamos definido.

Funcionalidades avanzadas

Insertar / modificar ancha

Un ancla es similar a un hipervínculo: enlaza a otro sitio, en este caso a otra parte del mismo documento donde nos encontramos. Para poder enlazar entre un elemento y su ancla, previamente habrá que seleccionar un espacio en blanco junto al texto o imágen que queremos "convertir en ancla".

• Paso 1: Activar la edición de anclas con el botón correspondiente:

• Paso 2: Se abrirá un popup para introducir el nombre del ancla que se quiere asignar al texto seleccionado: Pulsando en Insertar se creará el ancla.

• Paso 3: Resultado: Se puede observar un pequeño icono amarillo en forma de ancla junto al texto Capítulo 2, en el espacio que hemos convertido en ancla:

• Paso 4: Enlazar al ancla: Hasta aquí, lo que se ha hecho es crear un ancla en una zona del documento. Desde cualquier otra parte del documento podremos enlazar a esa zona concreta. Para crear este enlace, seleccionaremos el texto que enlazará al ancla y pulsaremos el icono de insertar enlace .

A partir de ahora, el proceso es el mismo que se ha explicado anteriormente para crear un enlace de tipo hipervínculo, teniendo en cuenta un único detalle diferente para este proceso: En la pestaña General del Popup que se abre, seleccionaremos del desplegable Anclas el nombre de aquella con la que queramos enlazar (en este caso, cap2). Si el documento contase con más anclas se mostrarían también en este campo desplegable.

Insertar / editar película flash

• Paso 1: Activar el icono de insertar animación:

• Paso 2: Se abrirá un pop up donde se indicará el archivo Flash que se ha de cargar así como su tamaño en píxels: Exactamente igual que en el caso de las imágenes, se puede indicar la ruta en Internet donde se encuentra el flash o seleccionarlo de forma local:

Consulta la tabla con las características y requisitos de los distintos tipos de ficheros admitidos en EducaMadrid.

Si decidimos seleccionarlo de forma local pulsaremos en el icono situado al lateral del campo, abriéndose una nueva ventana que nos muestra los archivos existentes en el disco duro virtual.

Si aún no hemos subido al disco duro virtual el archivo que queremos insertar, lo haremos pulsando sobre Añadir fichero

Una vez hayamos seleccionado el fichero y el tamaño de la ventana en que se abrirá, pulsaremos sobre el botón Actualizar.

Mostrar una página web o una imagen en una ventana emergente (pop up)

Cuando insertamos un enlace a través del icono correspondiente podemos hacer que la página o imagen hipervinculada se muestre en una ventana de tipo pop up o emergente. El proceso a seguir es el siguiente:

• Paso 1: Se selecciona el texto que se quiere enlazar con la página web o imagen y se pulsa el botón "Insertar/editar enlace":

• Paso 2: Se abrirá una ventana con varias pestañas y opciones:

• Paso 3: Pulsaremos sobre la pestaña Pop up

En ella encontramos los siguientes campos:

- Javascript Popup: Esta casilla se debe marcar para que el enlace se abra como un Popup (una ventana de navegador más pequeña).

- Popup URL: Aquí escribiremos la dirección de la página web o de la imagen que se mostrará en el popup que se abra. Se deberá incluir bajo la forma http://dirección

El resto de elementos sirven para definir las características de la ventana que se abrirá cuando se pulse sobre el enlace (el título, el tamaño, la situación respecto a la pantalla, etc):

- Nombre de la ventana: Sin espacios en blanco y sólo caracteres alfanuméricos (letras y números). Es el nombre identificativo de la ventana.

- Tamaño: En píxeles (unidad en la que se mide la resolución de la pantalla, suele tener 1024 de ancho y 768 de alto). En la primera caja hay que especificar el ancho y en la segunda el alto.

- Posición (X,Y): La posición en la pantalla en la que se abrirá el Popup, en la primera caja de texto hay que indicar cuantos píxeles se quieren dejar a la izquierda y en la segunda cuantos dejar de margen superior. Si quiere que aparezca centrada hay que poner las letras c, c en ambas cajas de texto.

- Opciones:

o Mostrar barra de dirección: Si se marca mostrará la barra de dirección en el popup (la barra donde sale la URL).

o Mostrar barra de menú: Si se marca mostrará la barra de menú (la barra donde aparecen las opciones de Archivo, Editar, Ver…)

o Mostrar barra de herramientas: Si se marca mostrará la barra de herramientas (donde aparecen los botones de actualizar, página de inicio..)

o Mostrar barra de estado: Si se marca mostrará la barra de estado (la barra inferior donde aparece información de la carga de la página).

o Mostrar barras de scroll: Si se marca mostrará las barras de scroll (las que permiten bajar el contenido de la página).

o Ventana redimensionable: Si se quiere que el usuario pueda redimensionar (hacer más grande o pequeña) la ventana hay que marcar esta opción.

o Dependiente: Si se quiere que la ventana sea de tipo dependiente, es decir que se cierre al cerrar la ventana del navegador.

o Insert return ‘false’: Una opción javascript para que devuelva un valor nulo, no goza de mayor interés para el usuario.

Cuando finalicemos pulsaremos sobre el botón Actualizar. Al previsualizar el contenido y pulsar sobre el enlace, la imagen cuya URL hemos incluído en el campo Pop up URL se mostrará en ventana emergente con las medidas que hemos definido.

En cuanto a la pestaña Eventos, situada en la misma ventana que la anterior, señalar que los eventos son acciones que ocurren al realizar “algo” relacionado con el enlace (por ejemplo, pulsarlo, ponernos sobre él, etc). Todas las acciones de la lista anterior pueden asociarse con una función Javascript, en el caso de tenerla definida, que se indicará en la caja de texto.

Listado de eventos en javascript:

o Onfocus: Se activa cuando se selecciona un elemento de un formulario (obtiene el foco). Por ejemplo cuando se pone el cursor en una caja de texto.

o Onblur: Se activa cuando un elemento seleccionado de un formulario pierde el foco, es decir cuando se selecciona otro elemento del formulario.

o Onclick: Se activa cuando se hace clic en un elemento (un enlace, botón, caja de texto)

o Ondblclick: Se activa cuando se hace doble clic en un elemento (un enlace, botón, caja de texto)

o Onmousedown: Se activa cuando se pulsa con el ratón sobre un elemento (un enlace, botón, caja de texto).

o Onmouseup: Se activa cuando habiendo pulsado sobre un elemento con el botón izquierdo del ratón éste se suelta.

o Onmouseover: Se activa cuando el cursor se sitúa sobre un elemento.

o Onmousemove: Se activa cuando el cursor se mueve sobre el elemento.

o Onmouseout: Se activa cuando el cursor deja de estar sobre el elemento.

o Onkeypress: Se activa cuando se pulsa una letra del teclado.

o Onkeydown: Se activa cuando se deja pulsada una tecla del teclado.

o Onkeyup: Se activa cuando habiendo pulsado una tecla ésta se suelta.

La cuarta y última pestaña dentro de la ventana que se nos abre cuando pulsamos sobre el icono de insertar enlace es la de Avanzado.

Las opciones que presenta están asociadas al uso de capas, estilos y a la codificación del propio HTML, son totalmente opcionales.

o Id: Un identificador único para que posteriormente el enlace pueda ser utilizado mediante Javascript.

o Estilo: Posibles estilos CSS aplicables

o Clases: Si se ha definido una clase CSS para el enlace indicar aquí el nombre.

o Target name: Esta etiqueta es útil si el enlace se quiere abrir en un iframe u otro marco, aquí se debe especificar el nombre de ese iframe.

o Otras etiquetas:

- Language direction

- Target language

- Language code

- Target carácter encoding

- Target MIME type

- Relationship page to target

- Relationship target to page

- Tabindex

- Accesskey

Mostrar una imagen alternativa a otra ya incorporada

Para poder mostrar una imagen alternativa a otra ya incorporada, debemos ir a la pestaña Avanzado de la ventana que se muestra cuando pulsamos sobre el icono Insertar imagen

La pestaña cuenta con los siguientes campos:

• Imagen Alternativa: Si se activa esta opción, se podrá ver una imagen alternativa al realizar una acción sobre la imagen original.

• On mouse over: Si se quiere que aparezca otra imagen al mover el ratón sobre la original, se debe indicar en esta casilla qué imagen alternativa se verá, poniendo la ruta de la imagen o buscándola.

• On mouse out: Si se quiere que aparezca otra imagen al mover el ratón fuera de la original, se debe indicar en esta casilla qué imagen alternativa se verá, poniendo la ruta de la imagen o buscándola.

• Id: El identificador, para su posterior tratamiento con un lenguaje de script.

• Dirección del texto: Para indicar si el texto de al lado de la imagen irá de derecha a izquierda o viceversa.

• Código del idioma: Se ha de poner el idioma en formato código: es, en, etc.

• Mapa de la imagen: Si la imagen forma parte de un mapa de imágenes.

• Descripción larga del link: Se puede indicar una descripción más larga, para una mayor accesiblilidad.

Tras incorporar la imagen alternativa pulsaremos en el botón Actualizar. Cuando previsualicemos el contenido veremos la imagen originalmente metida.

Pero al mover el ratón sobre ella aparecerá la alternativa (ya que al editar hemos elegido la opción On mouse over).