Manual de Kompozer: módulo 5 - Imágenes en tu página

9 05 2009

Vas a realizar la portada de tu sitio Web Los ecosistemas. Como en ella vas a ubicar diferentes botones de navegación, una imagen representativa y un título tendrás que utilizar una tabla que te permita ubicar correctamente cada imagen. Además, como recomendación general te señalamos que, en primer lugar, copies a la carpeta imagenes de la estructura de tu sitio Web, es decir, en el directorio webcurso - subcarpeta imagenes, las imágenes que vas a utilizar: Ver nuestros artículos anteriores dedicados a Kompozer.

Para seguir nuestro tutorial online te ofrecemos a continuación las imágenes que serán empleadas en la página (ya convenientemente tratadas con un programa de edición gráfico, en concreto, con Gimp) para que te las descargues y las utilices directamente.

Portada para la página

Imagen para la portada

BotónBotónBotón BotónBotón Botón

 Botones de navegación

T�tulo de la portada

Imagen para el titular de la Web

Utiliza la opción de tu navegador para guardar cada imagen en la carpeta imagenes que has creado en el directorio webcurso, directorio especialmente creado para seguir nuestro curso online. Si utilizas Mozilla Firefox es tan simple como posicionarte encima de cada imagen con el botón derecho del ratón, seleccionar la opción Guardar imagen como y localizar en tu directorio personal la carpeta webcurso - subcarpeta imagenes en la ventana de Firefox que aparece en pantalla.

Crea una tabla para ubicar las imágenes

La mejor opción para posicionar toda clase de elementos en una página Web es la utilización de tablas, ya sean éstos imágenes, otros elementos multimedia e incluso texto.

Te mostramos cómo incluir tablas en tu página.

En primer lugar, inicia una nueva página mediante el botón Nuevo de la barra de iconos de Kompozer (también puedes ir a Archivo - Nuevo o utilizar la combinación de teclas Ctrl + N).
Para insertar una tabla en la página puedes utilizar cualquiera de los procedimientos siguientes:

  • Haz clic sobre el icono Tabla de la barra de iconos
  • Acude al menú Insertar - Tabla

La ventana Insertar tabla se mostrará en pantalla:

Kompozer, insertar tabla

Observa que presenta tres pestañas:

  • Rápido: puedes seleccionar con el ratón el número de filas y columnas
  • Preciso: te solicitará que establezcas un número determinado de filas y de columnas. Teclea el el número en los campos correspondientes.
  • Celda: te permitirá editar las características de las celdas de la tabla, su alineación, el espacio de separación entre celdas, el ajuste del texto…

El botón Edición avanzada te permite establecer opciones avanzadas como atributos html, eventos de Javascript, estilos, etc.

En esta práctica, haz clic sobre la pestaña Preciso e introduce los siguientes valores:

Kompozer, insertar tabla

  • Filas: 9
  • Columnas: 4
  • Anchura: 1000 (recuerda que la resolución de pantalla que estamos utilizando es 1024, si necesitas diseñar la web para una menor resolución sólo tienes que reducir este número, por ejemplo a 800) y selecciona píxeles en el cuadro de lista desplegable situado a su derecha.
  • Observa que en Borde aparece de forma predeterminado 1, déjalo como ésta: esto hará que la tabla tenga un borde sencillo con el que podrás visualizar mejor las celdas que la componen. No te preocupes porque podrás modificar este valor en cualquier momento que lo precises.

Cuando finalices haz clic sobre el botón Aceptar. La tabla aparecerá en el espacio de trabajo de Kompozer.

Una vez creada la tabla, puedes editar sus propiedades desde la opción de menú Tabla - Propiedades de la tabla. También puedes utilizar el menú contextual del botón derecho del ratón, si sitúas el cursor dentro de la tabla y haces clic en Propiedades de celda: de este modo establecerás las propiedades a nivel de celda.
Puedes también establecer el ancho y alto de la tabla pulsando y arrastrando sobre los recuadros de control de la tabla, que localizarás en la parte superior e izquierda de la página:

Kompozer, insertar tabla

Inserta los botones de navegación

Posiciónate con el cursor del ratón en la primera celda: será aquí donde colocarás el primer botón de navegación.
Para insertar una imagen acude al menú Insertar - Imagen o haz clic sobre el icono Imagen de la barra de iconos. Se abrirá en pantalla la ventana Propiedades de la imagen.

Kompozer, propiedades de la imagen

  • La pestaña Ubicación indica a Kompozer, de dónde puede tomar la imagen. Al hacer clic en el icono Elegir archivo, explorará el sistema de archivos de tu equipo para seleccionar la imagen que elijas. Debes indicar un texto alternativo de la imagen obligatoriamente: texto que se mostrará cuando se pase el ratón por encima de la imagen.
  • La pestaña Dimensiones te ofrece la posibilidad de cambiar el tamaño de la imagen.
  • La pestaña Apariencia te permite configurar la distancia entre la imagen y el texto, así como la alineación del texto alrededor de la imagen.
  • La pestaña Enlace te ofrece la opción de establecer un hipervínculo para la imagen.
  • El botón Edición avanzada te permite establecer opciones avanzadas para la imagen como atributos HTML, eventos de JavaScript, estilos, etc.

Haz clic en la pestaña Ubicación y mediante el icono Elegir archivo localiza en tu directorio personal la carpeta webcurso. Haz doble clic sobre ella para acceder a su contenido y repite el procedimiento sobre la carpeta imagenes. Selecciona el archivo bot01.jpg localizado en ella y haz clic, finalmente, en el botón Abrir. Observa que la ruta al archivo aparece ahora en la ventana Propiedades de la imagen:
Teclea un texto en el campo Texto alternativo, por ejemplo, Botón definición.
Observa que la Vista preliminar te ofrece una miniatura de la imagen que vas a incluir en tu página y te indica su medida en píxeles.

Kompozer, insertar una imagen en la página web

Guarda ahora la página mediante Archivo - Guardar como… En la ventana Título de la página teclea Portada como nombre y guarda el archivo con el nombre index.html en la carpeta webcurso.
Ahora que ya tienes el archivo index.html observa otro procedimiento para insertar imágenes en tu página:

Kompozer, administrador de sitios

Acude a la ventana Administrador de sitios.

Despliega, haciendo clic sobre el signo más situado a la izquierda de la entrada Los ecosistemas la lista de carpetas y archivos de tu sitio. Repite el procedimiento sobre el signo más a la izquierda de la carpeta imagenes. Se muestra en la ventana el listado de todas las imágenes que previamente has copiado en esta carpeta.

Haz clic y arrastra hasta el espacio de trabajo la imagen que deseas incluir en la página. Por ejemplo, haz clic sobre la imagen bot02.jpg y arrástrala hasta la primera celda de la segunda fila, justo debajo de la imagen del botón Definición que incluiste en el apartado anterior.

Con un doble clic sobre la imagen del botón abrirás la ventana Propiedades de imagen. Esto te permitirá editar en cualquier momento, las propiedades de cualquier imagen que tengas ya incluida en tu página Web. Por ejemplo, teclea Botón Tipos de ecosistemas como Texto alternativo.

Repite el procedimiento con los otros botones de navegación y añádelos en la página a modo de columna.

Kompozer, insertar una imagen en la página web

Incluye un titular en la Portada

Observa que el ancho de la primera columna es demasiado grande. Para reducirlo, haz clic sobre el control de la misma (en la parte superior del espacio de trabajo) y arrastra hasta la izquierda hasta “chocar” con los botones. Puedes reubicar también, si lo deseas, los límites de las otras columnas.

Vas a insertar una imagen con un titular que ocupará las tres celdas restantes de la primera fila, por tanto, debes unirlas previamente en una sola. Para ello, haz clic sobre la segunda celda de la primera fila y, sin soltar el ratón, arrastra hasta la última para seleccionarlas (verás que aparecen remarcadas). Utiliza el menú contextual del botón derecho del ratón sobre las celdas seleccionadas y haz clic, en concreto, sobre la entrada Unir las celdas seleccionadas. Esto hará que las tres celdas se unan en una única celda que ocupe todo su ancho. (Los usuarios de Microsoft reconocerán esta acción como Combinar celdas).

Kompozer, tablas: unir celdas

Ahora arrastra la imagen titular.jpg, que localizarás en la carpeta imágenes, a la celda resultante de la unión. Utiliza de nuevo el menú contextual del botón derecho del ratón sobre esta celda y selecciona la entrada Propiedades de Celda de tabla. En la nueva ventana que aparece en pantalla, Propiedades de la tabla - pestaña Celdas, localiza el apartado Alineación del contenido. Selecciona Centrada en el menú desplegable Horizontal.

Kompozer, tabla: alineación de la celda

Haz clic sucesivamente sobre Aplicar y Aceptar. La imagen con el titular se posicionará en el centro de la celda.

Incluye la imagen de portada

Repite el procedimiento que ya conoces para unir las celdas que van desde la segunda celda de la segunda fila a la última de la fila 8 (ya sabes, clic y arrastra para seleccionarlas) y selección de la entrada, en el menú contextual del botón derecho del ratón, Unir las celdas seleccionadas.

Haz clic y arrastra sobre la imagen portada.jpg de la carpeta imagenes a esta ubicación. Utiliza también el menú contextual del botón derecho del ratón - Propiedades de la Celda de la Tabla para cambiar la alineación horizontal de la misma a Centrada, tal y como hemos hecho anteriormente.

Incluye información en el pie de página

Une las 4 celdas de la última fila. En la celda resultante teclea tus datos personales, el nombre de tu centro educativo y la fecha de creación de la Web (utiliza la opción del menú Insertar - caracteres y símbolos si deseas incluir el signo del Copyright). Incluye también en este pie de página la licencia que regirá tu sitio Web, por ejemplo, una licencia Creative Commons o una licencia GNU/GPL.

Edita este texto según tus preferencias.

Nota. Modifica el borde de la tabla. Para ello selecciona de nuevo Propiedades de la Celda de la Tabla en el menú contextual del botón derecho del ratón en una de las celdas de la tabla y haz clic sobre la pestaña Tabla. Localiza el apartado Borde y modifica el valor 1 sustituyéndolo por 0 píxeles.

Guarda finalmente la página utilizando el botón Guardar. Y comprueba el aspecto de la página acudiendo a la carpeta webcurso y haciendo doble clic sobre el archivo index. html para que se abra en tu navegador predeterminado.

Kompozer, aspecto de la página inicial de tu sitio

¡No está mal para ser tu segunda página en Kompozer!

Visualiza nuestro manual. Manual Kompozer - Módulo 5: Issuu
Manual Kompozer - Módulo 5: Trabajo con imágenes. Formato PDF
Archivo para editar con OpenOffice: formato ODT

Estadísticas Este artículo ha sido visitado  7674  veces


Acciones

Informaciones

Un comentario a “Manual de Kompozer: módulo 5 - Imágenes en tu página”

19 05 2009
Melduana (18:30:46) :

He llegado a esta página buscando información sobre software libre y gratuito. He encontrado mucho más: explicaciones claras, consejos útiles, enfoques muy cercanos al usuario.

El mundo de la enseñanza me es ajeno desde hace muchos años, pero acabo de llevarme una alegría. Con maestros así, el tan cacareado bajo nivel de nuestros estudiantes no tiene más remedio que mejorar.

Gracias.

Enviar un comentario


*
Para demostrar que eres un usuario (no un script de spam), introduce la palabra de seguridad mostrada en la imagen.
Anti-Spam Image