diseño del contenido
DESCRIPTION
Se recogen aquí las nuevas funcionalidades del editor online de la versión 5 del portal Educamadrid en cuando al diseño del contenido se refiere.TRANSCRIPT
![Page 1: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/1.jpg)
DISEÑO DEL CONTENIDO
![Page 2: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/2.jpg)
ESTILOS
Esta herramienta permite dar un diseño personalizado al contenido que estamos realizando.
Para ello en primer lugar seleccionaremos el párrafo a modificar y posteriormente pulsaremos en Estilos.
Hecho esto, seleccionaremos el estilo deseado.
Estilos disponibles
![Page 3: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/3.jpg)
A continuación pueden verse los diferentes estilos que le hemos dado a nuestro contenido:
![Page 4: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/4.jpg)
Esta herramienta nos permite realizar enlaces entre diferentes contenidos creados.
INSERTAR ENLACE A CONTENIDO
1. Seleccionamos la parte del texto donde queramos introducir el
enlace.
2. Pulsamos sobre el icono Insertar enlace
de contenido.
3. En la ventana emergente pulsamos
sobre Examinar.
![Page 5: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/5.jpg)
4. A continuación nos aparecerá la siguiente ventana donde tendremos que seleccionar los criterios de búsqueda para encontrar nuestro contenido. En este caso, el criterio de búsqueda empleado ha sido el de Tipo de contenido.
5. Hecho esto, pulsaremos en Buscar
![Page 6: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/6.jpg)
6. A continuación se mostrarán los resultado coincidentes con nuestra búsqueda.7. Seleccionamos el contenido deseado
![Page 7: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/7.jpg)
8. En la ventana emergente se incorporará el contenido seleccionado y pulsaremos en Insertar.
![Page 8: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/8.jpg)
9. El enlace quedaría creado y el resultado sería el siguiente:
![Page 9: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/9.jpg)
INSERTAR ENLACEEsta herramienta nos permite crear enlaces a documentos, videos, presentaciones, enlaces a otras webs,… Para crear un enlace lo que tendremos que hacer será:
1. Seleccionar el texto donde queramos insertar el enlace2. Pulsar sobre el icono Insertar enlace
![Page 10: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/10.jpg)
3. En la siguiente ventana emergente introducimos los siguiente datos y pulsamos en Insertar:
![Page 11: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/11.jpg)
4. A continuación se muestra como quedaría insertado el enlace:
![Page 12: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/12.jpg)
DESENLAZAREsta opción permite que "rompamos" los enlaces creados tanto a otros contenidos nuestros como a otras páginas web o sitios webs. Para ello :
1. Seleccionar el enlace 2. Pulsar sobre el icono Romper enlace de la barra de herramientas.
![Page 13: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/13.jpg)
A continuación se muestra como quedaría el contenido una vez hemos roto el enlace.
![Page 14: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/14.jpg)
INSERTAR/ EDITAR ANCLA
Esta funcionalidad nos va a permitir movernos por el contenido sin necesidad de movernos a través del scrol.
Tenemos que tener en cuenta que el uso de esta herramienta exige la realización dos acciones:
o Crear el ancla e o Insertar el enlace al ancla.
![Page 15: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/15.jpg)
Creación del ancla:1. Situamos el cursor del ratón en el punto exacto donde queremos crear el ancla.2. Pulsamos sobre el icono Insertar ancla3. Introducimos nombre que queramos darle al ancla y pulsamos en insertar
![Page 16: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/16.jpg)
El resultado sería el siguiente:
![Page 17: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/17.jpg)
Creación del enlace al ancla:1. Seleccionamos el texto donde queramos crear el enlace al ancla.2. Pulsamos sobre el icono Insertar enlace3. Seleccionamos el ancla donde queremos que lleve ese enlace
![Page 18: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/18.jpg)
El resultado sería el siguiente:
En el caso que se presenta, cada vez que pulsemos sobre Cuerda, nos llevará al apartado Cuerda que es el ancla que hemos creado.
![Page 19: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/19.jpg)
INSERTAR/ EDITAR IMAGEN
A través de esta herramienta podremos insertar la imagen y dotarle del diseño que deseemos. Los pasos a seguir serían los siguientes:
1. Situar el cursor del ratón en el lugar a insertar la imagen.2. Pulsar sobre el icono Insertar imagen.
![Page 20: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/20.jpg)
3. En la siguiente ventana pulsaremos sobre el botón examinar:
4. Pulsamos en Añadir Fichero
![Page 21: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/21.jpg)
5. A continuación pulsamos en Examinar, seleccionamos el archivo y pulsamos en abrir
6. Pulsamos en Subir fichero
![Page 22: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/22.jpg)
7. Hecho esto, nos aparecerá el estado de proceso de subida de la imagen
8. Finalizado el proceso de subida, pulsaremos en Listado
![Page 23: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/23.jpg)
9. Nos aparecerán todas las imágenes subidas, seleccionamos la imagen deseada y pulsamos sobre Insertar.
10. Previsualizamos la imagen y pulsamos en insertar.
![Page 24: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/24.jpg)
El resultado sería el que mostramos:
![Page 25: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/25.jpg)
INSERTAR/ EDITAR ARCHIVO MULTIMEDIAEsta herramienta permite insertar archivos multimedia en nuestro contenido.Los pasos a seguir serían los siguientes:
1. Pulsar sobre el icono Insertar archivo multimedia2. Seleccionar el tipo de archivo a insertar.
![Page 26: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/26.jpg)
3. A continuación subimos el archivo al disco duro del contenido:
![Page 27: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/27.jpg)
4. Seleccionamos el archivo a insertar:
![Page 28: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/28.jpg)
5. Introducimos el tamaño con el que queremos que se vea el archivo y pulsamos en Insertar:
![Page 29: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/29.jpg)
El resultado sería el siguiente:
![Page 30: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/30.jpg)
INSERTAR FRAGMENTO HTML (EMBEBIDO)
Esta herramienta nos va a permitir insertar videos, audios,… dentro del contenido que estamos creando.Para emplear este herramienta tendremos que realizar los siguientes pasos:
1. Buscar un video que nos interese2. Copiar el código html
![Page 31: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/31.jpg)
3. Pulsar sobre el icono Insertar fragmento html
4. Pegar código5. Pulsar en Insertar
![Page 32: Diseño del contenido](https://reader036.vdocumento.com/reader036/viewer/2022062313/557b6073d8b42a78238b50e7/html5/thumbnails/32.jpg)
El resultado sería el siguiente: