Manual de uso: Editor Web del CMS

Transcripción

1 Manual de uso: Editor Web del CMS Este manual sirve de apoyo para aquellas personas que usen el CMS y requieran editar textos dentro del mismo. Índice: 1. Cómo copiar texto desde Word? 2. Cómo resaltar textos de amarillo? 3. Cómo dar estilo: Firma de Lampadia, Comentado por Lampadia? 4. Cómo crear una tabla? 5. Cómo mostrar los bloques de separación? 6. Cómo maximizar la vista de contenido? 7. Cómo insertar Videos de Youtube? 8. Cómo agregar párrafos y saltos de línea? 9. Cómo insertar una imagen dentro del texto? 10. Cómo agregar enlaces? 11. Cómo crear saltos de línea en los títulos del slider?

2 1. Cómo copiar texto desde Word? Documento de origen: Paso1: Seleccionamos el párrafo que queremos copiar:

3 Paso 2: Seleccionamos el siguiente botón: (Pegar desde Word) Que se encuentra ubicado en la primera fila : Paso 3: Clic derecho -> Pegar.

4 Paso 4: Clic en Aceptar. De esta manera podemos copiar un texto extraído de Word al editor Web con todo y enlaces. El texto sombreado de amarillo se deberá asignar de manera manual desde el editor.

5 2. Cómo resaltar textos de amarillo? Paso 1: En el editor web, seleccionamos el texto que queremos resaltar. Paso 2: Clic en el botón Color de fondo

6 3. Cómo dar estilo: Firma de Lampadia, Comentado por Lampadia? Firma de Lampadia Paso 1: Seleccionamos la palabra Lampadia. Paso 2: Clic en el botón Estilo y seleccionamos el ítem Firma Lampadia Listo:

7 De manera similar podemos darle estilo a los comentarios de lampadia para pintar de azul el texto. 4. Cómo crear una tabla? Para crear una tabla hacemos clic en el botón tabla. *Siempre es recomendable crear un párrafo antes y uno después del lugar donde queremos insertar la tabla, en este caso insertaremos la tabla en el lugar donde se encuentra el segundo párrafo.

8 Ejemplo: Filas: 4 (ingrese la cantidad de filas requeridas) Columnas: 2 (ingrese la cantidad de columnas requeridas) Anchura: 500 (ingrese el ancho en px. <= 910) El resultado en editor:

9 El resultado en la web: También podemos asignarle valores a: - El espaciado entre celdas - Espaciado interior - Alineación (centrado) Asignarle estilo predeterminado a una tabla: - Clic derecho en cualquier lugar de la tabla creada.

10 - Clic en Propiedades de Tabla - Le asignamos el estilo: Ej: Clase de la hoja de estilos: tabla1 Estilo: tabla1 El estilo tabla1 requiere: - Filas: Filas requeridas - Columnas: 2 - Anchura: máximo Clase de la hoja de estilos: tabla1 El resultado es el siguiente: Una tabla centrada, sin bordes, con 2 columnas la primera a 70% del tamaño asignado en Anchura.

11 5. Cómo mostrar los bloques de separación? Es el último botón de la tercera fila: Nos sirve como ayuda visual para identificar los párrafos y objetos que están en el contenido. 6. Cómo maximizar la vista de contenido? Es el penúltimo botón de la tercera fila. Nos permite una vista más amplia del texto a pantalla completa. Para minimizar, dar clic por segunda vez.

12 7. Cómo insertar videos de Youtube? Paso 1: Clic en el penúltimo botón de la segunda fila: Paso 2: Se abrirá una ventana en la cual debemos ingresar la URL del video alojado en Youtube.

13 Ej: Paso 3: Importante Check en: Hacer responsivo (ignorar anchura y altura, ajustar a la anchura) Esto para que el video se ajuste al ancho de la pantalla y además permitirá que el vídeo se muestre correctamente en la versión móvil. Paso 4: Clic en Aceptar. 8. Cómo agregar párrafos y saltos de línea? Párrafo: Enter. Salto de línea: Shift + Enter

14 9. Cómo insertar imágenes al contenido? Paso 1: Creamos un par de párrafos vacíos: Paso 2: Colocamos el cursor en el primer párrafo vacío. Paso 3: Clic en el botón Imagen, ubicado en la segunda fila: Se abrirá una ventana. Clic en la segunda pestaña ( Cargar ): Paso 4: Clic en Seleccionar archivo. Buscamos la foto que queremos agregar y la seleccionamos. Luego de eso debe aparecer el nombre de la foto. (Ej: _b.jpg)

15 Paso 5: Clic en Enviar al Servidor Aparecerá otra ventana: Podemos asignarle un tamaño o una alineación si deseamos.

16 Paso 6: Clic en Aceptar. El resultado: 10. Cómo agregar enlaces? Paso 1: Copiamos contenido desde Word: Paso 2: Clic en el botón: Pegar desde Word

17 Clic en Aceptar Paso 3: Doble clic en el enlace. Se abrirá una ventana:

18 Paso 4: Clic en el TAB Destino Seleccionamos: Nueva ventana (_blank). Clic en Aceptar

19 Paso 5: Guardamos los cambios en el formulario. 11. Cómo crear saltos de línea en los títulos del slider? Lo hacemos mediante la inserción de una etiqueta HTML dentro del título Etiqueta HTML: <br/> = Salto de Línea Ejemplo: Al ingresar en el CMS el siguiente título: La visión de Arvind Subramanian. Da como resultado:

20 Pero si insertamos la etiqueta HTML: <br/> en medio de la oración Título: La visión de <br/> Arvind Subramanian El resultado sería el siguiente: