Añadir gráficos (imágenes) a la página web

Insertar una imagen en la página web

Se pueden insertar imágenes GIF, JPEG, BMP y PNG en una página web. También se pueden utilizar para crear enlaces. Cuando se inserta una imagen, Nvu guarda la referencia a la imagen en la página.

Nota: si planea publicar sus páginas en la web, es mejor no usar imágenes BMP en ellas.

Consejo: es mejor guardar o publicar primero su página antes de insertar imágenes en ella. Esto permite a Nvu utilizar automáticamente referencias relativas a los archivos de las imágenes cuando las inserta.

Para insertar una imagen:

1. Haga clic para emplazar el punto de inserción donde desee que aparezca la imagen.
2. Haga clic en el botón Imagen de la barra de herramientas o abra el menú Insertar y seleccione Imagen. Aparecerá el cuadro de diálogo Propiedades de la imagen.
3. Escriba la ubicación y nombre del archivo de la imagen o haga clic en Elegir archivo... para buscar un archivo de imagen en el disco duro o en red local.
4. Escriba el texto alternativo que aparecerá en los navegadores de sólo texto y que aparecerá en los otros navegadores mientras se carga la imagen o cuando la carga de imágenes está deshabilitada.

   Alternativamente, puede elegir no incluir texto alternativo.

5. En caso necesario, haga clic en Edición avanzada... para ajustar los valores (por ejemplo, alineación) en el cuadro de diálogo Propiedades de la imagen.

Consejo: mientras escribe un párrafo que contiene una o más imágenes, si desea insertar una línea de corte tras todas las imágenes del párrafo, seleccione Ruptura tras imágenes (<br clear="all">) en el menú Insertar.

Imagen ejemplo (archivo Imagen_ejemplo.jpg )

Editar las propiedades de la imagen

Una vez que haya insertado una imagen en la página, se pueden editar sus propiedades y personalizar su diseño, como la altura, anchura, espaciado y alineación del texto. Si no se está visualizando el cuadro de diálogo Propiedades de la imagen, lleve a cabo los siguientes pasos:

Para editar las propiedades de una imagen seleccionada:

1. Haga doble clic en la imagen o selecciónela y haga clic en el botón Imagen de la barra de herramientas para visualizar el cuadro de diálogo Propiedades de la imagen.
2. Pulse la pestaña Ubicación para editar estas propiedades:
   • Ubicación de la imagen: escriba el nombre y ubicación del archivo de la imagen. Haga clic en Elegir archivo... para buscar un archivo de imagen en el disco duro o red local.
   • La URL es relativa a la ruta de la página: si está seleccionado Nvu convertirá la URL a una dirección relativa a la ubicación de la página. Esto es especialmente útil si se planea copiar las páginas a un servidor web para que otra gente pueda verlas. El uso de URLs relativas permite mantener todos los archivos vinculados en el mismo sitio relativo al resto independientemente de la ruta en el disco duro o servidor web.

     Al desmarcar esta opción Nvu convierte la URL a una URL completa o absoluta. Normalmente se utilizan URLs absolutas cuando se vinculan imágenes en otros servidores web (cuando no están almacenadas localmente en el disco duro).

     Si no ha guardado o publicado nunca la página, se debe guardar primero para habilitar esta opción (esta casilla no está disponible si abre el cuadro de diálogo de propiedades de la imagen mientras redacta un mensaje).

   • Texto alternativo: introduzca el texto que se visualizará en lugar de la imagen original, por ejemplo, un título o una breve descripción de la imagen. Especificar un texto alternativo es una buena práctica para los lectores que utilizan navegadores de sólo texto o para quien tiene deshabilitada la descarga de imágenes.
   • No usar texto alternativo: seleccione esta opción si la imagen no requiere un texto alternativo o no quiere especificar uno.
3. Pulse en la pestaña Dimensiones para editar estas propiedades:
   • Tamaño real: seleccione esta opción para deshacer cualquier cambio que haya hecho a las dimensiones de la imagen y devolver ésta a su tamaño real.
   • Tamaño personalizado: seleccione esta opción y especifique una nueva altura y anchura, en píxeles o como porcentaje. Esta configuración no afecta al archivo original de la imagen, sólo a la imagen insertada en la página.
   • Mantener aspecto: es una buena idea marcarlo si se ha modificado el tamaño de la imagen para mantener la proporción de la imagen (para que no aparezca deformada). Si se selecciona esta opción sólo se necesitará cambiar la altura o la anchura, pero no ambas.
4. Pulse en la pestaña Apariencia para editar estas propiedades:
   • Espaciado: especifique la cantidad de espacio del contorno de la imagen; el espacio entre la imagen y el texto cercano. También se puede colocar un borde negro sólido en el contorno de la imagen, especificando la anchura en píxeles. Especifique cero si no quiere borde.
   • Alinear el texto con la imagen: si se coloca la imagen al lado de un texto, seleccione un icono de alineación para indicar cómo se desea que se posicione el texto en relación con la imagen.
   • Mapa de imagen: haga clic en Eliminar para borrar cualquier configuración de mapa de imagen.
5. Pulse la pestaña Enlace para editar estas propiedades:
   • Introduzca una ubicación de página web: si quiere definir un enlace para esta imagen, introduzca la URL de una página remota o local, o seleccione un enlace interno o encabezado de la lista desplegable. Pulse Elegir archivo para buscar un archivo de imagen en su disco duro o red local.
   • La URL es relativa a la ubicación de la página: si se marca, Nvu convierte la URL a una relativa a la ubicación de la página. Esto es especialmente útil si planea publicar sus páginas en un servidor web para que otros puedan verlas. Usar URLs relativas le permite mantener todos sus archivos enlazados en el mismo lugar relativo entre ellos, sin importar su ubicación en su disco duro o servidor web.

     Desmarcar esta casilla provoca que Nvu convierta la URL a una dirección completa (absoluta). Normalmente se usan URLs absolutas cuando se enlaza a páginas en otros servidores web (no almacenadas localmente en su disco duro).

     Si tiene cambios no guardados, se debe guardar primero la página para habilitar esta opción (esta casilla no está disponible si abre el cuadro de diálogo de propiedades de la imagen mientras redacta un mensaje).

   • Mostrar borde alrededor de la imagen: si se marca, aparecerá un borde del color elegido para los enlaces en torno a la imagen.
6. Para aplicar atributos adicionales o eventos JavaScript, haga clic en Edición avanzada... para visualizar el editor avanzado de propiedades.
7. Haga clic en Aceptar para confirmar los cambios.

Ejercicio: A continuación inserta la imagen ejemplo y alinea el texto " este texto está alineado en el medio de la imagen" como se indica.

Ejercicio: A continuación inserta la imagen ejemplo y cambia el tamaño (original 310x277) a 557x150 píxeles.

Ejercicio: A continuación inserta la imagen ejemplo y aumenta su tamaño, preservando sus proporciones.

Ejercicio: Regresa el tamaño de la siguiente imagen a sus dimensiones originales.

Añadir tablas a la página web

Insertar una tabla

Las tablas son útiles para organizar texto, imágenes y datos en filas y columnas formateadas. Para insertar una tabla:

1. Haga clic para emplazar el punto de inserción donde desee que aparezca la tabla.
2. Haga clic en el botón Tabla de la barra de herramientas de redacción o seleccione el menú Insert > Table... . Aparecerá el cuadro de diálogo Insertar tabla.
3. 
   

   En la pestaña Quickly (rápidamente) con el ratón puede seleccionar rápidamente el tamaño de la tabla a insertar. Clic OK para insertar la tabla.

   Si desea ser mas preciso en el diseño de la tabla, seleccione la pestaña Precisely.
   

   Escriba el número de filas (Rows) y columnas (Columns) que desee. Introduzca un tamaño para la anchura (Width) de la tabla y seleccione píxeles o porcentaje. Introduzca un número para el grosor del borde (en píxeles); introduzca cero si no quiere que aparezca ningún borde. Nota: Nvu usa líneas punteadas de color rojo para diferenciar a las tablas que no disponen de borde alguno; éstas líneas desaparecerán cuando la página se visualice en un navegador. Para aplicar atributos adicionales o JavaScript, haga clic en Edición avanzada para mostrar el Editor avanzado de propiedades. Clic OK para insertar la tabla.

   Si desea ser mas preciso en el diseño de las celdas de la tabla, seleccione la pestaña Cell.
   

   Alineación del contenido: seleccione de las listas desplegables un tipo de alineación horizontal (Horiz. alignment) y vertical (Vert. alignment) para el texto o datos contenidos en cada celda. Ajuste del texto (Text wrapping): seleccione No ajustar líneas (Don't wrap) para mantener el texto sin cortes hasta la siguiente línea a menos que inserte un corte de párrafo. En otro caso, escoja Ajustar líneas (Wrap). Espaciado entre celdas (Cellspacing): sirve para especificar, en píxeles, el espacio entre celdas. Espaciado entre el borde de la celda y su contenido  (Cellspacing): sirve para especificar, en píxeles, el relleno de las celdas (el espacio entre el borde de la celda y su contenido). Haga clic en OK para confirmar los parámetros y visualizar la nueva tabla.

   
   

Para modificar propiedades adicionales de la nueva tabla, vea Cambiar las propiedades de una tabla.

Consejo: para insertar una tabla dentro de otra, abra el menú Insertar y seleccione Tabla.

Ejercicio (insertando una tabla): Inserta una tabla de 2x2 con un ancho de 600 pixeles y con borde de 1 píxel.

Cambiar las propiedades de una tabla

Esta sección describe cómo modificar propiedades que se aplican a toda la tabla, englobando filas, columnas, y celdas individuales. Si no se encuentra visualizando en estos momentos el cuadro de diálogo Propiedades de la tabla, siga estos pasos:

1. Seleccione la tabla, o haga clic sobre cualquier lugar dentro de ella.
2. Haga clic en el botón Tabla de la barra de herramientas, o bien abra el menú Tabla y seleccione Propiedades de la tabla. Aparece el cuadro de diálogo Propiedades de la tabla, este contiene dos pestañas: Tabla y Celdas.
3. Haga clic en la pestaña Tabla para editar estas propiedades:
   

   Tamaño (Size): sirve para especificar el número de filas (Rows) y columnas (Columns). Introduzca la anchura de la tabla y escoja % de la ventana o píxeles. Si define la anchura como un porcentaje, ésta cambiará siempre que la anchura de la ventana de Nvu o la del navegador varíen. Bordes y espaciado (Borders and Spacing): sirve para especificar, en píxeles, el grosor de la línea del borde, el espacio entre celdas, y el relleno de las celdas (el espacio entre el borde de la celda y su contenido). Nota: Nvu usa líneas punteadas para mostrar tablas sin borde; éstas líneas desaparecerán cuando la página se visualice en un navegador. Alineación de la tabla (Table Alignment): utilice esta propiedad para alinear la tabla dentro de la página. Escoja una opción de la lista desplegable. Título (Caption): escoja la ubicación del título de la lista desplegable. Color de fondo (Background Color): establezca un color para el fondo de la tabla, o bien déjelo transparente.
4. Para aplicar atributos adicionales o eventos JavaScript, haga clic en Edición avanzada para mostrar el Editor avanzado de propiedades.
5. Pulse Aplicar para previsualizar los cambios sin cerrar el cuadro de diálogo, o pulse Aceptar de nuevo para confirmarlos.

Ejercicio: A continuación copie y pegue la tabla del ejercicio anterior. Modifica sus propiedades de la siguiente manera:

1. Ancho: 800 pixeles.
2. Grosor del Borde: 5 pixeles.
3. Espacio entre celdas: 4 pixeles.
4. Espacio entre el borde y el contenido de las celdas: 4 pixeles.
5. Alineación de la tabla: centrada.
6. Color de fondo: azul.

Para ver, cambiar o añadir propiedades a una o más celdas:

1. Seleccione la fila, columna, o celda. Abra el menú Tabla y seleccione Propiedades de la tabla. Aparecerá el cuadro de diálogo Propiedades de la tabla.
2. Haga clic en la pestaña Celdas para editar las siguientes propiedades:
   

   Selección (Selection): escoja Celda, Fila o Columna de la lista desplegable. Haga clic en Anterior o Siguiente para moverse a través de las filas, columnas o celdas. Tamaño (Size): escriba un número para la altura y anchura y seleccione % de la tabla o píxeles. Alineación del contenido (Content Alignment): seleccione un tipo de alineación vertical y horizontal para el texto o datos contenidos en cada celda. Estilo de celda (Cell Style): seleccione Cabecera de la lista desplegable para la cabecera de columna o de fila (lo cual centra y pone en negrita el texto de la celda); en otro caso, escoja Normal. Ajuste del texto (Text Wrap): seleccione No ajustar líneas de la lista desplegable para mantener el texto sin cortes hasta la siguiente línea a menos que inserte un corte de párrafo. En otro caso, escoja Ajustar líneas. Color de fondo (Background Color): seleccione un color para el fondo de la celda o déjelo transparente. Nota: para aplicar atributos adicionales o eventos JavaScript, haga clic en Edición avanzada para visualizar el Editor avanzado de propiedades.

3. Haga clic en Aplicar para previsualizar los cambios sin cerrar el cuadro de diálogo o haga clic en Aceptar para confirmarlos.

Consejo: para cambiar el color del texto o del fondo, de una o más celdas o de la tabla entera, seleccione las celdas o haga clic en cualquier sitio dentro de la tabla y haga clic de nuevo en el icono de color del texto o color del fondo en la barra de herramientas de formato.

Consejo: para cambiar el color de las celdas al último color utilizado, seleccione la celda y presione Mayúscula al mismo tiempo que hace clic en el selector de color del fondo. Esto es útil cuando se desea utilizar un solo color para celdas individuales.

Ejercicio: A continuación copie y pegue la tabla del ejercicio anterior. Modifica las propiedades de las celdas de la siguiente manera:

1. Ancho de la celda 11: 50 pixeles.
2. Color de fondo de la celda 21: amarillo.

Añadir y borrar filas, columnas y celdas

Nvu permite añadir y borrar rápidamente una o más celdas de una tabla. Además, se pueden establecer opciones que permitan mantener la estructura rectangular original o la disposición de la tabla mientras que se realizan tareas de edición.

Para añadir una celda, una fila o una columna a la tabla:

1. Haga clic dentro de la tabla donde desee añadir la celda (o celdas).
2. Abra el menú Tabla y seleccione Insertar.
3. Escoja uno de los agrupamientos de celdas (también puede insertar una nueva tabla dentro de la celda).

Ejercicio: A continuación copie y pegue la tabla del ejercicio anterior.

1. Añade dos columna después de la columna 1.
2. Añade una fila después de la fila 2.

Para borrar una celda, una fila o una columna:

1. Haga clic en una fila, columna o celda para emplazar el punto de inserción. O bien, seleccione las celdas vecinas para borrar más de una fila al mismo tiempo. Para seleccionar las celdas vecinas desplace el puntero del ratón sobre las celdas que desea seleccionar mientras mantiene pulsado el botón izquierdo. Para seleccionar celdas sueltas en una tabla, mantenga pulsada la tecla Control (Windows, Linux o Unix) o la tecla Cmd (Mac OS) y haga clic sobre las celdas que desea seleccionar.
2. Abra el menú Tabla y seleccione Borrar.
3. Seleccione el elemento que desee borrar.

Ejercicio: A continuación copie y pegue la tabla del ejercicio anterior.

1. Borre la columna 1.
2. Borre la fila 2.

Para unir (o combinar) una celda con la celda de su derecha:

• Haga clic dentro de la celda de la izquierda, abra el menú Tabla y seleccione Unir a la celda de la derecha.

Para unir (o combinar) celdas adyacentes:

• Seleccione las celdas adyacentes manteniendo pulsado el botón izquierdo del ratón mientras arrastra el puntero sobre ellas.
• Abra el menú Tabla y seleccione Unir celdas seleccionadas.

Ejercicio: A continuación copie y pegue la tabla del ejercicio anterior.

1. Combine las celdas 11 y 12.
2. Combine las celdas 14 y 24.

Para separar en dos o más celdas una celda combinada:

• Haga clic dentro de la celda, abra el menú Tabla y seleccione Dividir celda. El contenido de la celda original pasará a la primera de las celdas nuevas.

Ejercicio: A continuación copie y pegue la tabla del ejercicio anterior.

1. Separe las celdas 11 y 12.

Véase Seleccionar elementos de la tabla para información de cómo seleccionar celdas, filas y columnas no adyacentes.

Cambiar el comportamiento predeterminado de edición de tablas

Por omisión, cuando se borran una o más celdas, Nvu preserva la estructura de la tabla mediante la adición de celdas al final de la fila en caso de necesidad. Esto permite borrar una o más celdas manteniendo el la estructura rectangular original de la tabla. De otro modo, al borrar celdas se podría desembocar en una tabla con espacios vacíos o cuyas líneas exteriores fuesen irregulares debido a un número desigual de celdas.

Para cambiar el comportamiento predeterminado de edición por defecto de las tablas, empezando desde la ventana de Nvu:

1. Abra el menú Herramientas (menú Mozilla en Mac OS X), seleccione Preferencias y luego General.
2. Bajo Edición de tablas, establezca las siguiente preferencia:
   • Asegúrese de que Mantener el diseño de la tabla al introducir o borrar celdas esté seleccionado para cerciorarse de que no se obtengan tablas de forma irregular.
3. Pulse Aceptar.

Vea también Establecer las preferencias generales de Nvu.

Seleccionar elementos de la tabla

Hay dos maneras distintas de seleccionar rápidamente una tabla, celda o grupo de celdas:

• Haga clic en la tabla, abra el menú Tabla, escoja Seleccionar y escoja un elemento del submenú. Por ejemplo, para seleccionar una tabla, haga clic en cualquier sitio dentro de la tabla, abra el menú Tabla y escoja Seleccionar, y después Tabla.
• O se puede utilizar el ratón como herramienta de selección:
• • Para seleccionar un grupo de celdas adyacentes: haga clic en una celda y arrastre el ratón para seleccionar las celdas que desee. Arrastre el ratón a izquierda o derecha para seleccionar una fila; arriba o abajo para seleccionar una columna.
  • Para seleccionar celdas no adyacentes: presione Control (Windows, Linux or Unix) o Cmd (Mac OS) y haga clic dentro de una celda. Continúe presionando Control o Cmd mientras hace clic en las celdas adicionales.
  • Para extender una selección a las celdas adyacentes: haga clic dentro de una celda y sin soltar el botón arrastre el ratón sobre celdas adicionales para extender la selección.
  • Para seleccionar una o más columnas o filas adyacentes: arrastre el puntero hacia arriba o abajo para seleccionar la primera columna o fila, y luego arrastre a izquierda o derecha para seleccionar columnas o filas adyacentes adicionales. Presione Mayúscula y arrastre a la derecha para seleccionar una fila entera. Pulse Mayúscula y arrastre arriba o abajo para seleccionar una columna entera.

Mover, copiar y borrar tablas

Para mover una tabla:

1. Haga clic dentro de la tabla.
2. Abra el menú Tabla, escoja Seleccionar y después Tabla.

• Para copiar o mover la tabla: utilice las opciones Cortar, Copiar y Pegar del menú Editar.
• Para borrar la tabla: abra el menú Tabla y escoja seleccione Eliminar y después Tabla.

Convertir texto en una tabla

Para convertir texto en una tabla:

1. Seleccione el texto que desea convertir en una tabla. Tenga en cuenta que Nvu creará una fila en la nueva tabla por cada párrafo que haya en la selección.
2. Abra el menú Tabla y seleccione Crear tabla a partir de la selección. Aparecerá el cuadro de diálogo Convertir en tabla.
   

   Seleccione el carácter que utilizará Nvu para separar la selección en columnas o especifique un carácter distinto. Si escoge Espacio como separador de columnas, decida si desea o no que Nvu ignore múltiples espacios consecutivos y los trate como si fuesen sólo uno. Deje Borrar carácter separador marcado para que Nvu elimine el carácter separador cuando convierta el texto en una tabla. Si no desea que Nvu haga esto, desmarque esta opción.

3. Pulse Aceptar.

Nota: se eliminará el formato del texto cuando éste sea convertido en una tabla.

Ejercicio: Convierta el siguiente texto en una tabla (cada día ocupará una celda):

lunes martes miercoles
jueves viernes sabado domingo