Sectores en páginas web

1. LA HERRAMIENTA SECTOR

E l uso de tablas de imagen es un truco frecuente en las páginas

web. Sencillamente se trata de una imagen que ha sido
dividida en trozos o sectores y que se reconstruye al cargar la página
web utilizando una tabla HTML.

Las ventajas que presentan las tablas de imagen son

fáciles de intuir:

 Al dividir la imagen en fragmentos más pequeños, es posible

cambiar partes de la misma sin necesidad de tener que
volver a cargarla completamente.
 Cada sector puede tener su propio enlace o hipervínculo.
 Podemos optimizar cada uno de los sectores de forma
independiente. Por ejemplo, si necesitamos una animación
en uno de los sectores, podremos guardar ese sector como
un gif animado.

Para crear tablas de imagen en Photoshop, se utiliza la herramienta

Sector (esta herramienta se encuentra en el grupo de herramientas
de la herramienta Recortar ).

La forma de utilizar esta herramienta es dibujar los sectores en la

imagen. Los sectores siempre serán fragmentos de forma rectangular.

Al dibujar los sectores, se ajustarán a varios elementos (por

ejemplo, a los límites de las distintas capas, a las guías o a los límites
del documento), según lo seleccionado en el menú Vista - Ajustar a;
puedes activar o desactivar las distintas opciones, según lo que necesites
en cada momento. Si desactivas la opción Vista - Ajustar, al dibujar
no se ajustará a ningún elemento.

Al crear un sector, Photoshop divide automáticamente el resto de

la imagen en otros sectores. Cada vez que creas un nuevo sector, se
reconfigura automáticamente la distribución de sectores.

Copyright © Computer Aided Education, S.A. 1

 Sectores en páginas web

Cada vez que

creas, modi-
ficas o elimi-
nas un sector
de usuario o
de capa, se
reconfigura la
distribución de
sectores auto-
máticos.

Cada sector muestra en su esquina superior izquierda un número

que lo identifica y un icono que representa su contenido .

Hay tres tipos de sectores:

 Sectores de usuario: los sectores que creas tú mismo

con la herramienta Sector ; se muestran con una línea
continua.
 Sectores basados en capas: se crean desde una capa,
con la opción de menú Capa - Nuevo sector basado en
capa; también se muestran con una línea continua. Si
mueves la capa o modificas su contenido, el sector se ajusta
automáticamente.
 Sectores automáticos: sectores creados automáticamente
por Photoshop y que aparecen con líneas discontinuas. Estos
sectores se generan para incluir toda el área restante de la
imagen, es decir, la que no está incluida en los otros tipos
de sectores.

Cada sector muestra en su esquina superior izquierda un

número que lo identifica y un icono que representa su contenido.
Indican si un sector de usuario es un sector con imagen o
sin imagen ; si el sector es un sector basado en capas o
si el sector está enlazado .

Si mantienes pulsada la tecla al arrastrar con la herramienta

Sector , el sector que se creará será cuadrado. Por otro lado, si
mantienes pulsada , dibujarás el sector desde el centro, en lugar de
desde una esquina.

2
 Sectores en páginas web

Puedes ocultar o mostrar los sectores de la imagen. Para ello,

utiliza la opción de menú Vista - Mostrar - Sectores.

A la hora de crear un sector tenemos tres posibilidades disponibles

en la lista Estilo de la barra de opciones:

 Normal: las proporciones del sector se determinan al dibujarlo

en la imagen.
 Proporciones fijas: crea sectores de proporciones exactas. Por
ejemplo, el doble de alto que de ancho.
 Tamaño fijo: los sectores con medidas exactas, indicadas en la
misma barra de opciones.

Uno de los problemas que se presentan al utilizar la herramienta

Sector es que se crean muchos sectores automáticos.

Aunque al dividir en sectores una imagen puedes optimizar

cada uno de ellos de forma individualizada y conseguir un
ahorro de espacio en disco importante, no es adecuado tener
muchos sectores, ya que el explorador tardará mucho tiempo
en reconfigurar la imagen final.

2. PROPIEDADES DE LOS SECTORES

U na vez hayas creado los sectores que quieras tener en la

imagen, el siguiente paso es establecer sus propiedades.

Normalmente, esto no será necesario para los sectores automáticos,

ya que, en la mayoría de ocasiones, no querrás asociar ninguna
funcionalidad con este último tipo de sector.

De hecho, si seleccionas un sector automático y estableces alguna

de sus propiedades, el sector pasará a ser de usuario, reconfigurándose
el resto de sectores automáticos.

Primero tienes que seleccionar el sector sobre el que quieres

trabajar, para lo que se utiliza la herramienta Seleccionar sector
(que se encuentra en el mismo grupo de herramientas que la herramienta
Sector ).

Tras seleccionar el sector haciendo clic en él con esta herramienta,

pulsa el botón Configurar opciones para el sector actual de la
barra de opciones. Aparecerá un cuadro desde el que establecer las
propiedades del sector que tienes seleccionado.
Copyright © Computer Aided Education, S.A. 3
 Sectores en páginas web

La lista Tipo de sector indica si es un sector de imagen o sin imagen.

Los sectores sin imagen pueden mostrar colores sólidos o texto.

En la propie- Nombre permite cambiar el nombre de los sectores de imagen. Por

dad Etiqueta
Alt puedes
defecto, se aplica un nombre en el que se indica el número de sector.
escribir un tex-
to alternativo El campo URL permite indicar la dirección a la que se accederá al
que aparece
en lugar de
hacer clic en este sector cuando se esté viendo en la página web. Sólo
la imagen del está disponible si el sector es de imagen. Puedes utilizar dos tipos de
sector. direcciones:

 Absolutas: del tipo http://www.empresa.com/cursos/main.htm

 Relativas: del tipo cursos/main.htm

En el campo Destino puedes indicar dónde se cargará la página

a la que accedemos a través de este sector. Esto puede ser necesario si
deseamos cargar dicha página en una nueva ventana del navegador o
en un determinado marco o cuadro en que están divididas las páginas
del sitio web.

Cuando haces clic en el sector, la forma de cargar la página a

la que apunta puede ser:

 _blank: muestra la página en una nueva ventana, dejando

abierta la ventana del navegador original.
 _self: visualiza la página en el mismo cuadro o ventana en
la que está la página actual.
 _parent: muestra la página en su propio cuadro primario
original.

4
 Sectores en páginas web

 _top: para sustituir toda la ventana del navegador por la

página a la que está enlazada, eliminando todos los cuadros
actuales.

Desde el apartado Tipo de fondo del sector de la parte inferior

del cuadro puedes elegir el color del fondo del sector.

También Si se trata de un sector de imagen, este color sólo afecta a las zonas
puedes indicar transparentes; si es un sector sin imagen, se refiere a toda el área.
de forma
exacta tanto la
posición como En el campo Texto de mensaje puedes introducir el texto que
el tamaño del quieres que se vea en la barra de estado cuando sitúas el puntero
sector (desde del ratón por encima del sector en la página web. Si no pones nada,
la sección Di-
mensiones). aparecerá la dirección a la que está enlazado.

De esta forma irías estableciendo las propiedades de los sectores

de usuario o basados en capa que existieran en la imagen.

Ten en cuenta que no puedes seleccionar sectores con la herramienta

Sector , ya que ésta sólo sirve para crear sectores; debes utilizar la
herramienta Seleccionar sector . Recuerda este detalle, ya que si
Si mueves
o cambias intentas seleccionar un sector existente con la herramienta Sector ,
de tamaño lo único que puedes conseguir es crear un sector nuevo.
un sector,
los sectores
automáticos Por otro lado, si quieres mover o cambiar el tamaño de un sector,
de la imagen puedes seleccionarlo con la herramienta Seleccionar sector y
también se
ven afectados, arrastrar desde dentro del área del sector (para moverlo) o arrastrar
para adap- alguno de los controladores que aparecen en los lados y esquinas del
tarse a las sector (para cambiar su tamaño).
modificaciones
que realices.

Tras seleccionar un sector con la herramienta Seleccionar sector , el

botón Dividir de la barra de opciones sirve para dividir el sector seleccionado,
tanto en divisiones horizontales, verticales o en ambos tipos a la vez. Ten en
cuenta que no puedes dividir sectores basados en capas.

Copyright © Computer Aided Education, S.A. 5

 Sectores en páginas web

Simplemente tienes que seleccionar la opción adecuada en el

cuadro e indicar el número de sectores que se crearán tras la división,
o indicar el número de píxeles de los sectores resultantes, de forma que
Photoshop cree las divisiones necesarias.

Si está activa la casilla Previsualizar del cuadro de diálogo, puedes

comprobar el resultado en el documento, antes de aceptar el cuadro.

Si quieres combinar dos o más sectores en uno solo, primero

selecciónalos y luego pulsa el botón derecho del ratón sobre alguno de
ellos y selecciona la opción Combinar sectores.

Finalmente, para eliminar un sector, selecciónalo y pulsa la

tecla . No puedes eliminar sectores automáticos, ya que estos se
generan automáticamente para ocupar el área de la imagen no ocupada
por los otros tipos de sectores.

Si eliminas un sector basado en una capa, la capa base sobre la

que se creó sigue existiendo. Sin embargo, si eliminas la capa asociada
a un sector basado en una capa, el sector sí que se elimina también.

3. GUARDAR LA TABLA DE IMAGEN

U na de las ventajas de utilizar sectores es la posibilidad de

optimizar individualmente cada trozo de la imagen que
constituye un sector.

Ya que cada sector se guarda en un archivo independiente, es

posible aplicarles distintos detalles de optimización a través del
comando Guardar para Web y dispositivos del menú Archivo.

Recuerda que desde el cuadro de diálogo Guardar para Web

y dispositivos puedes seleccionar y configurar el formato del fichero
que se generará a partir de la imagen (GIF, JPEG, PNG...).

Desde las fichas de la parte superior de la imagen puedes elegir si

quieres ver la imagen original, la imagen optimizada, las dos a la vez o
cuatro vistas, para comparar distintas configuraciones de formato.

Cuando la imagen tiene sectores, en lugar de establecer las

opciones generales que se aplican a toda la imagen, cada sector puede
tener su propio formato o configuración, de forma que los ajustes estén
personalizados y adaptados a cada sector.

6
 Sectores en páginas web

Para seleccio-
nar un sector
de la imagen, En la parte derecha del cuadro puedes ver todas las opciones
debe estar disponibles según el formato de archivo que hayas elegido para guardar
seleccionada el sector seleccionado. Por defecto, cada sector tiene las opciones que
la herramienta
Seleccionar se aplican a toda la imagen.
sector , en
la lista de he- Más adelante nos centraremos en los distintos formatos y en sus
rramientas que características. De momento, nos basta con saber que, tras seleccionar
aparece en la
parte superior
un sector, desde las opciones de la parte derecha estableceremos la
izquierda del configuración correspondiente a dicho sector.
cuadro de
diálogo.
El objetivo es conseguir el menor tamaño del archivo manteniendo
una buena calidad. Para ello, debes estar atento a la información que
nos proporciona Photoshop en la parte inferior de la muestra. Ahí se
muestra el tamaño del archivo resultante, que depende del formato
elegido y de su configuración.

Si ajustamos todos los sectores de una manera adecuada, ajustando

el tamaño de las distintas imágenes de forma que se vean bien pero
ocupen lo mínimo posible, conseguiremos que el tiempo de descarga
de la página web sea menor (el tiempo de descarga es lo que tarda una
página web en cargarse desde Internet y mostrarse en tu ordenador).

También puedes seleccionar varios sectores a la vez, para

establecer la configuración de todos ellos en un solo paso. Para ello, ve
haciendo clic en ellos mientras mantienes pulsada la tecla .

Copyright © Computer Aided Education, S.A. 7

 Sectores en páginas web

Dependiendo de las necesidades de cada caso, elegirás una calidad

u otra para cada sector (además de otras características). Por ejemplo,
puedes seleccionar una calidad menor para el fondo y una mayor para
las imágenes principales o en primer término.

Puedes mostrar dos o cuatro vistas de la imagen, para comparar la

una o varias optimizaciones con la imagen original y ver si el resultado
es satisfactorio. En cualquier momento puedes seleccionar uno o varios
sectores y seguir cambiando la configuración de salida, para adaptarlo
a tus necesidades.

Puedes utilizar el botón Conmuta la visibilidad de sectores ,

en la parte superior izquierda del cuadro, para activar o desactivar la
visualización de los sectores de la imagen (si no visualizas los sectores,
puedes ver el tamaño global de la imagen, en la parte inferior de la
muestra).

Si pulsas el botón Menú Optimizar , en la parte superior

derecha del cuadro, y seleccionas la opción Editar ajustes de salida,
puedes establecer varias opciones correspondientes a cómo se genera
la página web: ajustes del código HTML, de los sectores, del fondo y
de cómo se guardan los archivos.

Por ejemplo, desde la sección Sectores puedes elegir si se debe

usar una tabla HTML o una hoja de estilo en cascada (CSS, cascading
stylesheet) para distribuir los sectores de la imagen. También puedes
configurar el nombre que se asignará a los distintos sectores.

8
 Sectores en páginas web

Desde el
campo Colocar
imágenes en
carpeta, que
se encuentra
en la parte
inferior del
cuadro, pue-
des seleccionar
el nombre
del directo-
rio donde se
colocarán los
archivos con
las imágenes
optimizadas.

El apartado Guardar archivos se utiliza para configurar los

nombres de los archivos de imagen que se crearán al generar la página
web.

Una vez has terminado de ajustar los sectores y las distintas

opciones de salida, pulsa el botón Guardar (en la parte inferior del
cuadro Guardar para Web y dispositivos) para crear los archivos
adecuados.

Copyright © Computer Aided Education, S.A. 9

 Sectores en páginas web

Desde la lista Tipo puedes elegir entre guardar sólo las imágenes
correspondientes a cada sector, sólo la página web con el código
HTML necesario para la tabla de imagen o los dos juntos.

En la lista Sectores podemos indicar si queremos guardar todos

los sectores, sólo los de usuario o sólo los que tengamos seleccionados
en ese momento.

Si en la lista Ajustes seleccionas la opción Otro, también

accederás al cuadro de diálogo para configurar los ajustes de salida,
por si necesitas comprobar o modificar algún aspecto.

Tras pulsar en el botón Guardar, se generan y guardar los archivos

necesarios y vuelves a Photoshop. Si accedes al directorio donde se ha
creado la página web, podrás ver el archivo HTML correspondiente a
dicha página, así como el directorio imágenes donde se ha creado un
archivo por cada sector de la imagen, que se muestran al mostrar dicha
página.

También puedes ver cómo queda la página directamente desde

Photoshop, antes de crearla. Para esto, desde el cuadro de diálogo
Guardar para Web y dispositivos, pulsa el botón Previsualizar, en
la parte inferior izquierda del mismo.

Este botón Previsualizar permite ver el resultado final que

obtendrías, al ver dicho resultado final en el navegador de Internet que
tengas predeterminado en tu ordenador. De esta forma, si hay alguna
cosa que no te gusta cómo queda, puedes volver y cambiarla.

También puedes ver el código HTML que genera Photoshop para

crear la tabla, que contiene las referencias a las distintas imágenes
utilizadas.

Si el resultado es el deseado, puedes generar la página web en el

directorio adecuado. En caso contrario, puedes continuar trabajando
en la imagen.

Como hemos visto, desde Photoshop, además de preparar la

imagen para situarla en una página web, puedes generar el código
HTML necesario para que el correcto funcionamiento de la tabla de
imagen. Todo esto lo puedes utilizar en una aplicación de diseño de
páginas web como Dreamweaver o FrontPage.

10