Inicio

Cómo colocar textos e imágenes en los contenidos.

No copie ni pegue textos de Word. Si tiene un texto de Word, primero pegue en un documento HTML de Dreamweaver.

Abra el programa Dreamweaver.

Configure el sitio a la carpeta administracion1

Cree un nuevo documento HTML y guárdelo en el directorio raíz de su sitio administracion1 con el nombre contenidos.html. Este documento es de paso.

Borre todo el código fuente del documento HTML

11

Active la pestaña Diseño y pegue el contenido del documento de Word o de una página html, sin imágenes.

12

Debemos optimizar las imágenes en el siguiente directorio de Joomla:
administracion1/images/stories

Dentro de stories se colocarán todas las imágenes del contenido. Podemos crear subcarpetas dentro de la carpeta stories. Esto permite mantener un orden en nuestro sitio Web.

Si las imágenes van a ser parte del párrafo, debemos optimizarlas máximo a 300 píxeles de ancho o de alto. No se recomienda mayores tamaños para contenidos. Sin embargo, la medida también se define de acuerdo al diseño propuesto.

Para el ejercicio he guardado una imagen dentro del directorio indicado con el nombre costa.jpg.

13

Arrastramos esta imagen al inicio del segundo párrafo.

14

Aparece la ventana siguiente:

15

Escriba un texto en Texto alternativo. Esto es importante para la validación del HTML en W3.org.

Cuando aceptamos, la imagen debe quedar en la línea del segundo párrafo, esto es, al mismo nivel de la letra. Esto significa que la imagen es parte del párrafo, de esta manera podemos colocarla a la derecha o izquierda del párrafo.

16

Seleccionamos la imagen y en la ventana de Propiedades de Dreamweaver, en Alinear, seleccionamos izquierda.

Para que la imagen se separe del texto, en la misma ventana de propiedades en Espacio H (Espacio horizontal) y Espacio V (Espacio vertical) colocamos los siguientes valores:

Espacio H: 0

Espacio V: 10

17

La imagen se verá de la siguiente manera:

18

Una vez que tenemos el texto y la imagen en el documento contenidos.html, vamos a la vista de código y copiamos todo el código fuente html.

19

Vamos al administrador de, Joomla en la sección que estamos creando y abrimos la ventana HTML del editor de texto:

20

Al hacer clic, se abrirá una ventana emergente. En esta ventana pegamos el código HTML que copiamos del archivo contenidos.html de Dreamweaver.

21

Hacemos clic en actualizar y listo. Nuestro texto se encuentra limpio y sin código basura.

22