You are on page 1of 379

2 Compra y activación del MAGIX Web Designer 6

Indice

Compra y activación del MAGIX Web Designer 6 8

¿Cuáles son las novedades en MAGIX Web Designer 6? 10

Introducción 13
¿Por qué Web Designer es tan especial? 13
Una página web en 6 pasos 14

Ayuda 15
Información de documento 15
Acerca de Web Designer 15

Primeros pasos 16
Diseño del programa 16
Objetos en la página 18
Diseño web basado en objetos 19
La herramienta de selección 20
Vista previa de tu página web 22
Utilización de plantillas, cliparts y widgets 23
Colores de la página web 24
Fotos 33
Texto 37
Tamaño de página 41
Guardar tu trabajo. Creación de una página Web 42
Objetos elásticos 43
Grupos 44
Enlaces, botones y barras de botones 45
Herramientas de dibujo 49
Capas, mouseover (rollover) y pop·ups 54
Creación de botones, banners y otros gráficos web 58
Publicar tu página web 59
Integración de películas, Flash y otros widgets 61

Trabajar con documentos 64


Inicio del MAGIX Web Designer 6 64
Iniciar un nuevo documento 64
Abrir un documento existente 64
La ventana MAGIX Web Designer 6 66
Abrir una segunda ventana 69
Cambiar el valor de zoom 70
Desplazar el documento dentro de la ventana 72
Cambiar el tamaño de página 72
Compra y activación del MAGIX Web Designer 6 3
Páginas múltiples en el documento 73
Guardar el documento 75
Directorios de compatibilidad 76
Cerrar el documento 77
Copias de seguridad automáticas 78
Cuadrícula de pantalla 80
Reglas 81
Calidad de imagen 83
Galerías 83
Deshacer y rehacer 87

Trabajar con objetos 89


La herramienta de selección 89
Mover objetos 92
Eliminar objetos del documento 94
Duplicar y clonar 95
Mover objetos hacia adelante o hacia atrás 96
Girar objetos 97
Cambio del tamaño de objetos (escalar) 98
Voltear objetos 100
Extender o reducir objetos 100
Inclinar objetos 101
Difuminación (Feathering) 102
Ajuste 103
Objetos guía y líneas guía 105
Resumen de shortcuts del teclado numérico 107
Agrupar y desagrupar objetos 107
Grupos suaves (soft groups, en inglés) 108
Alineación 110
Copiar estilos: pegar atributos 112
Nombrar objetos 113
Objetos repetidos 114

La herramienta de edición de formas 118


Para dibujar un segmento de línea recto 119
Mezclar líneas curvas y rectas 119
Para dibujar un segmento de línea curvo: 119
Extender la línea. 120
Finalizar la línea 120
Añadir un nuevo punto de control 120
Seleccionar múltiples puntos de control 121
Eliminar puntos 122
Mover puntos de control - Herramienta de edición de formas 122
Suavizar una línea 123
Restringir la línea 124
Cambiar curvas 124
4 Compra y activación del MAGIX Web Designer 6
Convertir una línea recta en una curva (y viceversa) 125
Unir líneas 126
Separar una forma 127
Cerrar una forma 127

Manejo de formas 129


Combinar formas 129
Cambiar el ancho de línea (grosor) 131
Galería de líneas 131
Crear rectángulos y cuadrados 134
Crear círculos y elipses 135

Trabajar con colores 136


La línea de color 136
Aplicación de colores de relleno y línea mediante arrastrar y soltar 138
Editar el color de un objeto 139
El editor de color 140
Colores locales y colores originales 142
Esquemas de colores temáticos 142
Creación de tus propios esquemas de colores 143
Creación de nuevos colores con nombre 143
Editar colores con nombre 144
Colores normales, tintes, tonalidades y colores vinculados 144
Creación de un tinte, una tonalidad o un color vinculado 145

Trabajar con textos 148


Introducción 148
Terminología 149
La herramienta de texto 149
El menú de fuentes 151
Texto simple 153
Texto en una columna 153
Áreas de texto 154
Texto siguiendo una curva 157
Editar texto 158
Corrector de ortografía 160
Cómo sincronizar el texto empleando Grupos suaves (soft groups, en inglés)161
Tabulaciones, márgenes y sangrías 161
Texto alrededor de objetos 165
Gráficos anclados 166
Aplicar estilos de texto 169
Enlaces de texto 172
Texto dentro de grupos para páginas web 173
Copiar estilos de texto 174
Copiar / Pegar texto con formato (RTF) 174
Visualizar fuentes utilizadas 175
Compra y activación del MAGIX Web Designer 6 5
Incrustación de fuentes 175
Compatibilidad entre el navegador y el texto 175

La herramienta de relleno 177


Creación de una gradación de color lineal 177
Tipos de relleno 178
Barra de información de la herramienta de relleno 179
Rellenos lisos 180
Rellenos lineales 180
Rellenos circulares 181
Rellenos elípticos 182
Rellenos de mapa de bits 182
Relleno fractal 185
Gradaciones de color de varios niveles 186
La galería de rellenos 186

Transparencia 189
Aplicar transparencia plana 189
Aplicar transparencia con gradación 189
Aplicar transparencia a varios objetos 190

Sombras 191
La herramienta de sombra 191
Aplicar una sombra 192
Cambiar el color de sombra o el efecto de relleno 193
Eliminar una sombra 194
Aplicar una sombra a varios objetos 194
Selección de objetos con ayuda de la herramienta de sombras 195
Copiar sombras a otros objetos 195

Diálogo de propiedades web 196


Pestaña Enlace 197
Pestaña "Página web" 202
Pestaña de página 204
Pestaña Imagen 206
Pestaña Mouse-over 210
Pestaña Marcador de posición 212
Pestaña Publicar 215

Trabajar con fotos 219


Introducción 219
Objetos de fotos 220
Importación de fotos 220
Resolución de foto 223
Copias de memoria cero 223
La galería de mapa de bits 224
6 Compra y activación del MAGIX Web Designer 6
Archivos JPEG integrados 226
Sin pérdidas vs. Con pérdidas (lossless vs. lossy) 227
Mezcla y combinación de fotos 228
Calidad de visualización de fotos 229
Guardar y exportar fotos 229
Atributos de la edición de fotos 231
Editar el contorno de las fotos 232
Recortar fotos 232
Cortar objetos de las fotos 233
Fotos de pantalla (screenshots) 234
Colorear fotos 234
Cambiar el tamaño, rotar y reposicionar la foto dentro de su propio marco 235
Enderezar horizonte 236
Ver una foto ampliada en su tamaño completo 237
Darle el tamaño completo a una foto 237
Optimizar fotos y mapas de bits 238
Documentos fotográficos 240
Edición de archivos de fotos 241

La herramienta de fotos 243


Introducción 243
Utilización de la herramienta de fotos 244
Herramienta de optimización 246
Herramienta de corte 248
Notas para la herramienta de foto 251
La herramienta de ojos rojos 251
Creación de panorámicas 253

Barras de navegación 254


Utilización de plantillas de barras de navegación 254
Diálogo Propiedades de la barra de navegación 255
Barra de navegación del sitio 256
Botones y menús 258
Actualización de la barra de navegación en todas las páginas 261
Edición en el lienzo 261
Cambio de la fuente de los botones de la barra de navegación 262
Importación e inserción de barras de navegación 262
Creación de barras de navegación propias 262
Márgenes de botón 263
Avanzado: edición de un diseño de botón de barra de navegación. 264
Barras de navegación con primer y último botón diferente 266

Widgets de sitios web 268


Widgets y marcadores de posición: todo automático 268
Widgets de la galería de diseños 269
Agregado de archivos de películas y animaciones 271
Compra y activación del MAGIX Web Designer 6 7
Widgets de otros sitios de widgets 272
Cambio de tamaño de widgets 273
Inserción manual de marcadores de posición 274
Más información 274

Galería de páginas y capas 275


La galería de páginas y capas 275
Páginas 277
Capas 278
Operaciones de capa 280
Capas especiales 281
Ocultar capas 281
Modo Solo 281
Bloquear capas 282
Mostrar todo y desbloquear todo 282
Mover objetos entre capas 283

Animaciones en Flash 284


Introducción 284
Principios básicos 286
Tu primera animación 287
Exportación de un archivo Flash 289
La galería de frames 290
Fotos 293
Duración de frames para películas Flash y pasos intermedios" (Movie frame
rate and tween steps) 294
Recortar y cortar 296
Velocidad de la animación 297
Fluidez de la animación (smoothness) 298
Rotación 298
Grupos 300
¿Qué funciones de MAGIX Web Designer 6 son compatibles con Flash? 300
El color se transforma — el color de la animación cambia 302
Transparencia 303
URL en Flash 303
Funciones de Flash avanzadas 304
Resumen de animación de MAGIX Web Designer 6 Flash 306
Crear GIF animados 307
Propiedades de GIF animados 308

Imprimiendo 310
Mostrar bordes de impresión 310
Seleccionar y configurar una impresora 310
El diálogo de impresión 311
Opciones de impresión: pestaña Salida 313
Opciones de impresión: pestaña "Diseño de la impresión" 315
8 Compra y activación del MAGIX Web Designer 6

Importación y exportación 317


Indicaciones generales sobre la exportación e importación 317
Importar y exportar formatos de archivo compatibles 317
Importación de archivos 319
Exportación de archivos 321
Resumen del diálogo de exportación JPEG, PNG, GIF y BMP 324
La Galería de diseños 330

Personalización de Web Designer 331


Cambio del documento de plantilla en blanco 331
Opciones del menú "Herramientas" 331
Pestaña General 332
Pestaña Cuadrícula y regla 334
Pestaña Ratón 335
Pestaña Tamaño de página 337
Pestaña Copias de seguridad 337
Barras de control 337
Fijación de galerías 340
Restaurar las barras de control / galerías por defecto 341

Menús y shortcuts de teclado 342


Introducción 342
Menú Archivo 342
Menú Edición 345
Menú Arreglo 346
Menú Herramientas 349
Menú Ventana 350
Menú Ayuda 351
Shortcuts de teclado 353

Legal 358
Copyright 358
Acuerdo de licencia de usuario final de clientes de XARA Web Designer 358
Agradecimientos 361

Index 363

Compra y activación del MAGIX Web Designer 6


Cuando inicias la versión de prueba descargada de MAGIX Web Designer 6, la pantalla de
inicio te presentará tres opciones. Comprueba la opción que precises y se te explicará con
más instrucciones.
Compra y activación del MAGIX Web Designer 6 9
Introducir el número de serie
Selecciona esta opción si ya has encargado una copia de Web Designer e introduce el
número que se te ha proporcionado en el e-mail para confirmar tu compra. Introduce tu
dirección de e-mail para registrar tu copia (si ya la has registrado, debe ignorarse). Luego
haz clic en Registrar y activar online.

Una vez que tu copia esté activada, puedes descargar la plantilla completa, seleccionando
la opción Descargar plantillas en el menú de Ayuda de Web Designer.

Comprar el programa.
Selecciona esta opción si deseas adquirir una copia de Web Designer. Se te enviará un
número de serie con la compra.

Continuar con la prueba


Selecciona esta opción si quieres continuar utilizando la versión de prueba gratis. A la
derecha de esta opción se te informará cuántos días de prueba tienes disponibles. Luego,
haz clic en PROBAR EL PROGRAMA AHORA.

Aviso importante: por favor, recuerda tu dirección de correo electrónico y contraseña que
has utilizado para la compra de MAGIX Web Designer 6 puesto que los necesitarás en el
futuro, por ejemplo, si deseas realizar una actualización.

Otras formas de compra


Si no dispones de la versión de prueba puedes pedirla directamente en nuestra página
web www.magix.com y recibirás un número de serie con el que luego podrás liberar la
versión de prueba.

Los productos de Xara ofrecen una muy buena relación calidad-precio y además
ofrecemos descuentos en todos nuestros productos de gráfico para instituciones de
educación. Más detalles en nuestra página web.
10 ¿Cuáles son las novedades en MAGIX Web Designer 6?

¿Cuáles son las novedades en MAGIX Web


Designer 6?
General
• Aspecto de la aplicación completamente rediseñado (diseño y símbolos)
• Herramientas y botones desplegables que presentan una interfaz de usuario más
simple, pero con acceso directo a una mayor cantidad de funciones comunes.
• Galería de "Páginas y capas" mejorada que suministra una forma rápida de visualizar
y reordenar páginas y capas en cada página, por ejemplo, arrastrar y soltar para ordenar
las páginas. El modo Solo permite aislar una capa.
• Galería de diseños con actualización automática:la galería de diseños incluye nuevas
secciones y contenido "online" que Xara puede actualizar de forma remota.
• Copia de seguridad automática de todos los documentos abiertos. Copia de
seguridad automática y restauración de documentos abiertos al cerrar la aplicación. Así
puedes cerrar directamente Web Designer con documentos abiertos y, al iniciar Web
Designer la próxima vez, todos los documentos abiertos se restaurarán.

Autoría web
• Galería de plantillas ampliada con nuevos diseños. Los diseños existentes se han
actualizado. Un nuevo diseño "completo de página web" se suministra para todos los
conjuntos de plantillas, lo que consiste en un sitio web preparado de ocho páginas
enlazadas.
• Arrastrar y soltar widgets desde la galería de diseños y la nueva biblioteca de
widgets. Las nuevas secciones de la galería de diseños suministran una gran variedad
de "widgets" que pueden arrastrarse y soltarse en tu sitio web. Los widgets suministran
add-ons interactivos que abarcan desde reproductores de películas hasta
características de comercio electrónico (como un botón "Comprar" para vender artículos
o servicios de tu página web), formularios, mapas y mucho más.
• Manejo optimizado de barras de navegación (muy similar a la funcionalidad de
Xara MenuMaker).
- Un nuevo objeto de nivel superior de la barra de navegación puede arrastrarse
como un objeto independiente.
- Escoge cualquier diseño de botón y conviértelo rápidamente en una barra de
navegación horizontal o vertical.
- Capacidad para crear una barra de navegación con botones vinculados a todas
las páginas de tu sitio web. La barra de navegación se actualiza cuando
agregas/quitas páginas.
- Resaltado automático de los botones de las barras de navegación de la "página
actual".
- Submenús DHTML con numerosas animaciones y efectos de transparencia
• Inserción directa de snippets HTML con creación automática de vista
previa/marcador de posición. Muchos add-ons y widgets de páginas web suministran
un snippet de HTML para incluir en tu página. El Web Designer ahora acepta que
pegues este snippet, lo detecta como un código HTML y crea automáticamente un
marcador de posición en la página, con una vista previa del snippet. Copia el código
HTML en el portapapeles y pégalo en Web Designer. Tras unos segundos aparecerá un
objeto de marcador de posición con una imagen de vista previa, que puedes posicionar
en cualquier lugar de la página web.
¿Cuáles son las novedades en MAGIX Web Designer 6? 11
• Carga sencilla de vídeo MP4 y reproductor de vídeo incluido. Arrastra y suelta un
archivo de vídeo MP4 hasta la página y aparecerá un reproductor de vídeo flash para
reproducir el archivo que se cargará automáticamente en tu servidor web.
• Nuevas opciones de "Vista previa de página actual" rápida así como vista previa
de todo el documento: el ícono de vista previa en la barra superior se despliega con
dos opciones, vista previa de la página actual o vista previa de todo el sitio web.
• Capacidad para admitir páginas de esquinas redondeadas con sombras
proyectadas. Si admites el coloreado de la página de esta manera (al arrastrar un color
hasta el tablero de dibujo), se activará una nueva capa de fondo de página en la galería
de Páginas y capas, en donde podrás ajustar la sombra proyectada de la página
rectangular con la herramienta de sombra para convertirla en un rectángulo redondeado
(con la herramienta de rectángulos).

Foto
• Ventanas emergentes de fotos en miniatura mejoradas y más elegantes. Los
efectos animados de fotos emergentes (al hacer clic sobre una foto se abre una ventana
emergente con una versión ampliada) se ha mejorado para brindar efectos de animación
con calidad mejorada, una sombra proyectada opcional, títulos, capturas de pantalla y
oscurecimiento (la página debajo de la ventana emergente puede oscurecerse).
• Capacidad para crear un pase de fotos y Siguiente/Anterior en una galería o grupo
de vistas en miniatura. Si cuentas con varias fotos en miniatura con el efecto de
ventana emergente en la página, ahora puedes crear con ellas un pase de fotos con
controles Siguiente/Anterior/Reproducir/Pausa y un guión cinematográfico opcional con
las miniaturas en la parte inferior de la ventana.
• Nueva función "Optimizar todos los JPEG". Esto reducirá el tamaño y resolución de
todas las fotos de un documento para ahorrar memoria y producir archivos .web o .xar
más pequeños.
• Llenado automático de galerías. Arrastra y suelta varias fotos en simultáneo para
poblar una página de galería. Si arrastras y sueltas una selección de archivos de
imagen desde tu explorador de archivos hasta una página de vistas en miniaturas, como
cualquier diseño de galería de fotos de las plantillas (cada tema tiene un diseño de
"galería de fotos"), esto puebla la galería.
• Reducción automática de la resolución de importación.

Color
• Mejor compatibilidad con páginas y fondo, por lo que puede colorearse el tablero
de dibujo de forma independiente a la página. Si arrastras un color hasta el área del
tablero de dibujo (fuera del área visible de la página), esto te permite crear fondos
independientes para la página y sus alrededores. Para la página y el área del tablero de
dibujo, si pulsas Ctrl y sueltas un mapa de bits en la página o en el tablero de dibujo,
puedes crear un fondo de mapa de bits segmentado.
• Arrastrar y soltar esquemas de colores y esquemas de colores creados
previamente en la galería de diseños para todos los temas. En vez de editar cada
color original con nombre, ahora puedes cambiar todo el esquema de tu página.
Puedes probarlo con el tema beta suministrado en la galería de diseños. Abre cualquier
página del tema o el diseño "sitio web" que es un sitio web completo con ocho páginas.
Al final de los diseños temáticos hay una selección de los esquemas de color llamados
"Esquema de color 1", etc. Simplemente arrastra y suelta estos esquemas hasta la
página web para cambiar todos los colores originales.
12 ¿Cuáles son las novedades en MAGIX Web Designer 6?
Publicación
• Recordar detalles del FTP con el documento, incluyendo la contraseña. El
diálogo de propiedades de publicación ahora ofrece la posibilidad de guardar los
detalles FTP con el documento. Esto es genial si cuentas con diversos sitios web
publicados en diferentes ubicaciones o con diferentes dominios. Además, puedes
escoger guardar la contraseña FTP en el archivo. A pesar de que esta es una opción
potencialmente peligrosa (cualquiera que acceda al archivo .web puede actualizar tu
página web), también es una herramienta muy útil para los diseñadores web con
clientes, porque ofrece la opción de enviar al cliente el archivo .web, instruirle que
actualice el texto y luego pulse el botón Publicar para actualizar su página web. No es
necesario que el cliente tenga conocimiento de las complejidades de la configuración
FTP.
• Perfiles FTP con nombre, incluyendo perfiles de terceros. Puedes guardar tu
configuración de FTP en un perfil con nombre. Esto es útil si trabajas con múltiples
páginas web con diferentes dominios. La lista de perfiles puede contener perfiles de
terceros como, por ejemplo, el alojamiento gratis de MAGIX.
• Oferta de alojamiento web gratis. El Web Designer ofrece el alojamiento de páginas
web gratis de MAGIX. De esta forma, podrás publicar tu página web como parte del
MAGIX Mundo Online.
• Formas fáciles de agregar enlaces en archivos externos (y cargarlos) como archivos PDF
y Word, etc.
• Publicación incremental. Cuando publicas tu página web, sólo se cargarán aquellos
archivos que se hayan modificado. Esto puede representar una mejora en la velocidad y
productividad de sitios web medianos a grandes. También significa que los adjuntos
incluidos (p. ej. archivos PDF, vídeos, etc.) se cargarán solamente una vez.
• Calidad HTML mejorada, uso optimizado de CSS, divs eliminados, opciones para
párrafos "HTML puros". Para usuarios avanzados que quieren "bloques HTML
puros", ahora pueden ignorar el posicionamiento individual de líneas y hacer que cada
párrafo de texto se emita como un bloque de texto <p> en HTML. Para ello, aplica el
nombre "HTMLBlockText" al bloque de texto. Ten en cuenta que los saltos de línea no
necesariamente serán los mismos que en el Web Designer (y pueden variar entre los
exploradores), y que características como hacer fluir el texto alrededor de los gráficos no
funcionarán.

Texto
• Compatibilidad con texto justificado. Hemos añadido la compatibilidad con el texto
completamente justificado y esto funciona aún con la característica de texto alrededor
del gráfico.
• Herramienta de texto mejorada para incluir viñetas, listas numeradas, sangrías.
• Gráficos anclados. Los fotos y los gráficos pueden ahora flotar con el texto.
Introducción 13

Introducción
Es evidente que la gran mayoría de páginas web tienen una naturaleza gráfica. La
presentación de tu página web es muy importante. Tú deseas una página web con una
imagen competente y profesional. Para crear tu página, creemos que no es necesario
usar gran cantidad de herramientas, tanto para la edición gráfica como para
HTML. Creemos que debes tener libertad total para incluir cualquier tipo de texto, gráfico o
foto en cualquier lugar de la página.

En las páginas web la presentación gráfica es tan importante como el contenido.

La creación de páginas web debería ser como la creación de archivos PDF: no deberías
tener la necesidad de saber qué pasa 'bajo el capó'. En el caso de los archivos PDF, no
debes editarlos directamente. Tampoco deberías tener la necesidad de saber sobre HTML
al crear tu página web.

¿Por qué Web Designer es tan especial?

Web Designer es único porque es la única herramienta de diseño web de forma libre que
permite una verdadera libertad al diseñar una página web cuyo resultado es lo que ves. En
otras palabras, puedes posicionar el texto, gráficos y fotos en cualquier lugar de la página,
configurar cualquier tamaño, ángulo, superposición, transparencia, etc. y Web Designer
producirá una página HTML precisa que funcionará perfectamente.

Web Designer puede hacer cosas que se consideran casi imposibles con otros software
de autoría web, como hacer fluir el texto alrededor de fotos o formas irregulares. Incluye
herramientas avanzadas de vectores gráficos para que puedas dibujar lo que desees:
desde formas simples hasta logos y gráficos complejos. También cuenta con optimización
automática de gráficos (no sólo produce imágenes de resolución optimizada, sino que
14 Introducción
también detecta los elementos que se repiten en toda la página web, lo que produce
páginas más rápidas y más optimizadas).

Es compatible con capas CSS con características avanzadas, como transparencia


(incluyendo transparencia con gradación), efectos mouse-over y más. Crea páginas web
HTML totalmente compatibles con los exploradores, las plataformas y XHTML.

Además, Web Designer es probablemente la herramienta de autoría web más fácil de


aprender.

Web Designer está pensado para diseñadores gráficos que no quieren aprender HTML ni
lenguajes de scripting. Para diseñadores gráficos, es la herramienta prototipo para páginas
web rápidas perfecta.

También está pensado para principiantes que simplemente quieren disponer de la forma
más fácil de crear páginas web de aspecto profesional.

Web Designer no incluye herramientas de programación, edición de scripts ni una "vista


HTML". Nuestra filosofía de diseño es la siguiente: no necesitas saber el lenguaje de
programación de PDF para crear un PDF. Por lo tanto, tampoco debes conocer nada
acerca de HTML o Javascript para poder crear páginas web geniales.

Una página web en 6 pasos

Para quienes no tienen mucha paciencia (la mayoría de nosotros), se pueden descubrir las
ventajas principales de Web Designer, siguiendo sencillamente las instrucciones en el
documento inicial que se abre cuando comienzas a usar Web Designer. Se trata tanto de
una introducción básica como de una página web real con la que puedes experimentar.
También puedes encontrar este documento de ejemplo en la galería de diseños.

Haz clic en botón, abre la categoría INTRODUCCIÓN y haz doble clic en el primer
documento.

Aquí puedes averiguar como cambiar los colores de la página web, corregir el texto,
arrastrar y soltar fotos, mover objetos alrededor de la página y más.

Deshacer
Recuerda que puedes deshacer cualquier cambio, utilizando el botón de deshacer o
Ctrl+Z. Si mantienes pulsado el botón puedes deshacer todas las acciones hasta el
comienzo.
Ayuda 15

Ayuda
Si necesitas ayuda para el manejo de este programa, a continuación encontrarás
información que puede serte útil:

• Selecciona Temas de ayuda en el menú de AYUDA para abrir la ayuda de Photo &
Graphic Designer (que contiene cientos de páginas de información).
• Barra de estado: intenta leer el texto de la barra de estado en el extremo inferior de la
ventana principal de Photo & Graphic Designer. Siempre ofrece una descripción de las
acciones actuales y de sus efectos (incluso durante los arrastres), lo que resulta ideal
para aprender a usar las herramientas de Photo & Graphic Designer. También cuando
colocas el cursor sobre los botones y los controles, el programa te informa sobre lo que
hacen. Ve a la barra de estado para más detalles.
• Consejos para herramientas (tooltips): si colocas el cursor del ratón sobre un botón o
control por un momento, aparecerá un mensaje informándote de su función.
• Menús: si deseas saber cuál es la función de un menú, selecciónalo y pulsa "F1".
• Cajas de diálogo: si quieres saber lo que hace una caja de diálogo o cómo usarla, haz
clic en "Ayuda".
• Películas: hay películas de demostración que te ayudarán a sacar el mayor partido de
MAGIX Web Designer 6. Escoge PELÍCULAS del menú de AYUDA para ver una lista de las
películas disponibles.
• Foros TalkGraphics: puedes compartir consejos e ideas, enviar preguntas u ofrecer
soluciones a otros usuarios de Xara Xtreme en los foros http://www.talkgraphics.com
(que también incluye otros foros relacionados con gráficos).
• Xara Xone: visita Xara Xone (http://www.xaraxone.com/) para obtener excelentes
fuentes de ayuda, incluyendo más de diez años de tutoriales de Photo & Graphic
Designer, trucos y consejos y shareware de Xara.
• Newsletter "The Outsider": suscríbete a nuestra newsletter mensual "The Outsider"
(con tutoriales mensuales y consejos, ofertas, arte inspiracional y mucho más).

Información de documento

"ARCHIVO > INFORMACIÓN DEL DOCUMENTO "muestra información sobre el documento


seleccionado como el tamaño o cualquier fuente utilizados. Esta es una buena forma de
ver si te falta una fuente necesaria que pudiera prevenir que el documento se visualice
correctamente.

Cualquier texto que introduzcas en el campo de comentario se guardará como parte del
archivo. Este comentario se mostrará cuando abras el diálogo de información de
documento.

Acerca de Web Designer

Escoge AYUDA > ACERCA DE MAGIX WEB DESIGNER 6. Esto te mostrará información general
sobre el programa. Si contactas con la asistencia técnica de Xara, es posible que se te
solicite esta información.
16 Primeros pasos

Primeros pasos
Esta sección te da una idea general de las funciones principales de Web Designer. Las
secciones siguientes te darán más detalles sobre cada una de las herramientas.

Diseño del programa

Barra de información: cambia con cada herramienta


Zoom
Visualizar página web
Galería de páginas y capas
Galería de diseños
Herramienta de selección
Herramienta de texto
Herramienta de sombra
Herramienta de edición de fotos
Línea de color
Primeros pasos 17
Estos son cuatro botones que se encuentran en la barra superior y se relacionan con las
funciones en la página web. Tres de estas opciones tienen barras desplegables que se
muestran cuando colocas el cursor del ratón sobre ellas y te ofrecen más funciones.

Vista previa
Enlace
Opciones de página web
Exportar

Coloca el cursor del ratón sobre cada botón de la barra desplegable para obtener un consejo de
herramienta con la descripción del botón.

Hay dos modos de crear una nueva página web. Se puede comenzar con una plantilla
prediseñada y luego personalizarla con textos, fotos y combinación de colores. O creando
una página web desde el principio, colocando todos los elementos requeridos, texto,
gráficos y fotos en el lugar que quieras de la página.

Zoom y desplazamiento de la página


Estas funciones comunes están hechas de manera sencilla:

• Para ampliar o alejar con el zoom, mantiene Ctrl pulsado y utiliza la rueda del ratón
• Para mover la página, pulsa la rueda del ratón y mueve (sí, también es un botón)
• Para desplazar utiliza la rueda del ratón (o las barras de desplazamiento)
18 Primeros pasos
Todas tus páginas en tu sitio web están presentadas
una tras otras, como en un programa de edición de
textos. Esto hace que sea muy útil para ver toda tu
página web, especialmente al alejarse con el zoom.
Puedes arrastrar y soltar elementos entre páginas de
esta manera. Cuando haces cambios de color de
tema en todo el sitio, puede verse como los cambios
afectan a todas las páginas.

La página actual se destaca por las marcas en las 4


esquinas. En este ejemplo puedes ver que algunos
artículos han sido colocados en el tablero de dibujo
al lado de las páginas. No serán exportados como
parte de tu página web.

El área del tablero de dibujo es normalmente un


lugar donde guardar temporalmente gráficos, fotos u
otros objetos con los que estés trabajando.

Barras desplegables
Algunas herramientas de la barra de herramientas principal están agrupadas en un solo
icono. Estos iconos cuentan con un pequeño triángulo indicador en la esquina inferior
derecha y, cuando pasas el cursor del ratón por ellos, aparece una barra desplegable. La
barra contiene otras herramientas que pertenecen a este grupo. Simplemente, mueve el
cursor del ratón hasta una de estas opciones para ver el consejo de herramienta (tooltip) y
luego selecciona la herramienta que quieras usar.

Si seleccionas una herramienta modal de una barra desplegable, esta herramienta se


convierte en la herramienta principal para ese grupo. A partir de ese momento verás el
icono correspondiente en la barra de herramientas principal.

También hay algunas barras desplegables en la barra de herramientas de la parte superior


de la ventana. Estas se utilizan para agrupar operaciones relacionadas en un solo icono.
Esto las hace accesibles y no ocupan demasiado espacio en la barra.

En el capítulo Personalización obtendrás más información sobre las barras desplegables.

Objetos en la página

Si personalizas una plantilla o creas tus propios gráficos desde el principio, puedes girar,
redimensionar y posicionar cualquier cosa que desees en la página. Puedes redimensionar
la página fácilmente al tamaño que quieras y añadir nuevas páginas web a tu gusto.
Ciertas características, como el cambio de combinaciones de colores, funcionan a través
de todas las páginas simultáneamente.

Estos son los tipos básicos de elementos de página:


Primeros pasos 19
• Texto: al usar la herramienta de texto puedes crear todo tipo de títulos y columnas de
texto e incluso bloques de texto que fluyen de un bloque a otro. También puedes crear
listas con viñetas y numeradas. La herramienta de texto de la barra de información
proporciona controles de fuente, tamaño y espaciado de línea y más. Puedes
redimensionar el texto usando la herramienta de selección o escogiendo un punto
alternativo o tamaños de píxeles. También puedes girar el texto sorprendentemente
desde cualquier ángulo, y usar la característica automática para hacer fluir el texto
alrededor de objetos (p. ej. fotos) en la página.
• Gráficos: cualquier tipo de logo, título y la mayoría de los botones que aparecen en tu
página web son gráficos. Web Designer es un programa de gráficos vectoriales, lo que
significa que puedes corregir la forma, girar y redimensionar tus objetos gráficos sin
pérdida de calidad (a diferencia de herramientas de edición y retoque fotográfico como
Photoshop). Y aunque no hay ningún estándar de gráficos vectoriales para páginas web
(para web todos los gráficos tienen que ser formatos JPG, GIF o PNG) Web Designer
crea automáticamente el formato y resolución adecuados. Por ejemplo, si quieres crear
un panel coloreado para colocar detrás tu texto, lo harías dibujando un rectángulo o el
objeto de rectángulo con esquinas redondeadas en la página, y colocándolo detrás del
texto. Cuando guardas tu página web, se convierte automáticamente en una imagen
gráfica PNG con la resolución correcta.
• Fotos: hay pocas páginas web que no contienen algún tipo de foto. MAGIX Web
Designer 6 tiene una gran gama de herramientas de retoque de fotografías. Puedes
arrastrar y soltar fotos directamente desde tu cámara o desde la ventana del explorador
de archivos, girarlas, optimizarlas, recortarlas, y Web Designer genera
automáticamente la resolución de imagen JPG adecuada. Sustituir fotos existentes en
plantillas es tan fácil como arrastrar y soltar, y puedes cambiar sencillamente el tamaño
y el ángulo de las fotos "dentro" de su marco. Puedes crear fácilmente fotos en
miniatura sobre las que puedes hacer clic para que se abra una versión ampliada y
puedes incluir opcionalmente controles de galería que permiten a los visitantes navegar
por tus fotos o ver un pase de fotos automático.
• Marcadores de posición: estos son objetos gráficos en la página que representan el
tamaño y la posición de "widgets" dinámicos como animaciones flash, películas o
formas. Al exportar tu sitio, el gráfico del marcador de posición se reemplaza con el
código requerido para hacer que el widget funcione y el widget aparece en la misma
posición en tu página. Consulta el capítulo de "Widgets de página web" para más
detalles.

Diseño web basado en objetos

Todo los tipos de elementos descritos más arriba se refieren generalmente a objetos.

Uno de los beneficios particulares de Web Designer es la libertad total para posicionar
cualquier objeto en cualquier lugar de la página, que luego se respetará con exactitud en la
página web final.

La HERRAMIENTA DE SELECCIÓN puede ser utilizada para seleccionar cualquier


objeto en la página y para mover (simplemente arrástralo), redimensionar o rotar
los objetos.
Puedes ajustar el orden de las capas (es decir, si un objeto aparece al frente o detrás de
otro/s en la página), la utilización de las opciones del menú Arreglo. Con la herramienta
20 Primeros pasos
de selección puedes redimensionar objetos estirándolos desde las esquinas. Puedes girar
cualquier objeto arrastrando desde dentro de los controles deslizantes de las esquinas. Y
aunque las páginas web no admiten textos rotados, Web Designer sabe cómo crear
automáticamente la imagen gráfica apropiada para que la página se vea siempre bien.

Para agregar texto a tu página, selecciona la HERRAMIENTA DE TEXTO y haz clic en


cualquier lugar de la página y empieza a escribir el texto.

También puedes crear columnas de texto, pulsando y arrastrando horizontalmente la


herramienta de texto, o arrastrando horizontalmente los campos de texto. Ve a la sección
de texto en la parte inferior para más detalles y al capítulo Manejo de texto (en la página
147) para una información detallada acerca de las funciones de texto de MAGIX Web
Designer 6

Puedes usar herramientas de dibujo para crear rectángulos normales o


con esquinas redondeadas, círculos y elipses, y cualquier tipo de forma
que desees, utilizando la herramienta de edición de forma. Ve a la
sección herramientas de dibujo (en la página 48) para más detalles.

Orden de los objetos


Todos los objetos en la página están colocados uno encima del otro. El objeto más
recientemente dibujado o creado está siempre arriba de todo, es decir delante de
cualquier otro. Puedes ajustar la posición de colocación usando las opciones del MENÚ
ARREGLO .

Por ejemplo, cuando dibujas un nuevo rectángulo siempre aparece para cubrir todos los
objetos que estén detrás suyo. Al presionar Ctrl+B (o el menú ARREGLO > Llevar atrás) el
objeto es movido detrás de todo lo demás. De modo similar, Ctrl+F trae cualquier objeto
seleccionado hacia delante, quedando delante de todo lo demás.

Hay una complicación añadida: las capas. Todos los objetos son registrados en capas
con nombres y cada capa puede activarse o desactivarse para mostrar u ocultar todo
acerca de la capa. Ve a la sección de capas (en la página 54) de más abajo para más
detalles.

La herramienta de selección

Esta herramienta es de uso general y te permite seleccionar, mover,


redimensionar y girar todos los objetos en tu página web.
Primeros pasos 21
Puedes hacer todas estas cosas simplemente estirando los objetos en la página, o con los
controles deslizantes de selección alrededor del objeto, o puedes introducir valores
numéricos precisos. El objeto seleccionado con 4 u 8 controles deslizantes en su exterior
y la barra de estado, en la parte inferior de la pantalla, también te indica qué objeto ha sido
seleccionado.

Arrastra desde cualquier esquina de los controles deslizante para redimensionar un objeto.
Arrastra desde dentro de los controles deslizantes (ver a la izquierda) para girar. Los rectángulos
y rectángulos con esquinas redondeadas tienen ocho controles deslizantes para que arrastrarlos
y redimensionarlos. Otros objetos, como grupos, bloques de texto o fotos, poseen sólo 4
controles y no pueden ser estiradas (porque se deformarían).

Desplazar objetos
Las teclas de flechas pueden ser utilizadas para desplazar los objetos seleccionados
píxel a píxel. Si mantienes pulsada a la vez la tecla Shift, los objetos se desplazan de 10 en
10 píxeles.

Girar objetos
Hay dos modos de hacer girar un objeto. O bien, haciendo clic otra vez sobre el objeto
para que los controles de selección cambien a controles de rotación, con los que podrás
estirar o hacer girar el objeto. O, cuando se ven los controles de esquinas, moviendo
el cursor de ratón dentro de los controles de esquinas hasta que veas que el cursor
cambia a un indicador de rotación , entonces también podrás arrastrar para hacer girar el
objeto seleccionado.

También puedes rotar casi todo en Web Designer, incluyendo fotos, títulos, bloques de
texto, y simplemente funcionará. Debido a que los navegadores web no pueden mostrar
texto en ángulo, Web Designer convertirá automáticamente cualquier texto rotado en un
gráfico.

Barra de información
Cuando un objeto es seleccionado, la barra de información en la parte superiro de tu
documento muestra todos los controles relevantes para la herramienta actual. Esta
barra cambia según la herramienta seleccionada. Esta es la barra de información de la
herramienta de selección:

La barra de información justo encima de tu documento, te muestra los controles para la


herramienta seleccionada.
22 Primeros pasos
Puedes introducir valores numéricos en cualquier campo, p. ej. para reducir el tamaño de
un objeto un 20%, puedes introducir 80% en el campo del ancho (que es un tamaño
porcentual). Con el candado pequeño determinas si los cambios de ancho y alto se
cambian a la vez.

Copiar objetos
Puedes utilizar las típicas opciones de Copiar (Ctrl+C) y Pegar (Ctrl+V), aunque una forma
rápida de copiar un elemento es, simplemente, arrastrándolo con el botón derecho del
ratón.

Vista previa de tu página web

Cuando creas tu página web en Web Designer los documentos con los que trabajas
muestran una vista previa exacta estática, pero para comprobar el comportamiento de
los popups, efectos MouseOver y Flash, es necesario utilizar la vista previa de navegador.

Existen dos opciones de vista previa en la barra desplegable en la barra de herramientas


web.

VISTA PREVIA DE PÁGINA WEB: exporta todas las páginas de tu sitio y luego muestra la
ventana de vista previa. Así, todas las páginas y enlaces de tu sitio deberían funcionar.

VISTA PREVIA DE PÁGINA: exporta y muestra la vista previa de la página actual únicamente.
Esta opción es útil si cuentas con un sitio muy grande que demora mucho en exportarse
en su totalidad. De esta forma, puedes ajustar rápidamente la vista previa de la página en
la que estás trabajando, sin tener que exportar el resto del sitio.

Si no has exportado tu sitio todavía, estas vistas previas se exportan a una carpeta
temporal en tu ordenador. Una vez que lo hayas exportado, la misma ubicación de
exportación se utilizará siempre que hagas una vista previa, es decir, que el sitio exportado
se actualiza constantemente.

Nota: esta vista previa interna utiliza una versión simplificada del navegador de Internet
Explorer.

Para obtener una vista previa de tu página web en diferentes navegadores web,
expórtala y luego abre el archivo .htm en el navegador que prefieras. El botón para
exportar la página web es el último botón en la barra de herramientas de la barra
superior.

Frecuentemente puedes utilizar el clic derecho sobre el archivo y seleccionar "Abrir con ..."
, o simplemente arrastrar y soltar el archivo en una ventana de navegador abierta. Una vez
exportado, cada vez que pulses el botón de vista previa, la exportación se actualizará
Primeros pasos 23
también, y entonces sólo será necesario pulsar el botón de Actualizar en tu navegador (o
presionar F5).

Utilización de plantillas, cliparts y widgets

Abre la galería de diseños haciendo clic en el botón de Galería de diseños en la


barra de botones superior.

Esto muestra las carpetas que contienen colecciones de diseños de páginas web y
archivos gráficos asociados que siguen un tema específico. También hay carpetas con
widgets como formas, instalaciones de e-commerce, gadgets web y muchas otras
características. Navega por las carpetas y haz doble clic para abrir un archivo como
documento nuevo.

Cada sección temática cuenta con una colección de diseños de página alternativos y otros
elementos útiles como botones o paneles de texto expansibles. Cada tema generalmente
contiene también una plantilla de página web completa y varios esquemas de color.
Puedes cambiar todo tu sitio a un esquema de color completamente distinto con solo
arrastrar y soltar el esquema desde la galería hasta la página o con un doble clic.

Algunas de las carpetas de la galería (especialmente las carpetas con widgets) se


descargan automáticamente de los servidores de Xara cuando estás online y abres la
galería. Por lo tanto, la selección de carpetas y de artículos disponibles en las carpetas
cambiará periódicamente. Regresa regularmente para ver las últimas actualizaciones.

Agregar nuevas páginas a tu página web


Puedes arrastrar cualquier diseño de plantilla desde la GALERÍA DE DISEÑOS en tu página.
Si se trata de una plantilla de página, agregará una nueva página a tu página web,
después de preguntarte primero si quieres realizar algún cambio de color. Si arrastras un
elemento de clipart como un botón, título o foto, se agregará a la página en el lugar que lo
sueltes y se te preguntará nuevamente si quieres modificar algún cambio de color.
Además de las páginas web con temas, la Galería de diseños también contiene carpetas
con diseños de botones, banners, encabezados, objetos de fotos y más. Simplemente
arrastra el diseño adecuado desde la galería hasta tu página. Se te preguntará si deseas
que el gráfico coincida con los colores de tu página web o no. Si deseas que no lo hagan,
aún podrás editar los colores del gráfico importado, lee a continuación.

Tus gráficos importados son simplemente otro objeto en su página y puede


reposicionarse, cambiarse su tamaño y girarse utilizando la herramienta de selección.

Para agregar una nueva página con el mismo diseño, la forma más fácil es utilizar el
botón de "copiar página" en la barra superior.

Esto replica la página actual abajo. Podrás simplemente editar o eliminar los elementos
según lo desees. Esto tiene la ventaja de mantener la misma estructura de navegación.

Puedes añadir una nueva página en blanco seleccionando el menú EDITAR > PÁGINAS >
NUEVA PÁGINA .
24 Primeros pasos
Puedes eliminar las páginas utilizando el mismo menú de páginas.

Clipart flash
MAGIX Web Designer 6 incluye la habilidad de crear animaciones flash desde cero (ver la
sección Animaciones flash (en la página 283)), pero también incluye una variedad de
plantillas de flash que puedes personalizar. Las plantillas flash no se pueden arrastrar hacia
la página directamente, deben abrirse como un documento de animación separado que
puedes personalizar como quieras y luego puedes guardar el archivo Flash (.swf) en tu
disco local. Luego, utilizando la función marcador de posición puedes crear un gráfico
de marcador de posición y asociarlo con tu archivo Flash (.swf).

Widgets
Algunos de los elementos de la GALERÍA DE DISEÑOS son widgets dinámicos que puedes
añadir a tu sitio web de forma rápida y fácil. Al arrastrar uno de estos a tu página, se abrirá
una ventana del explorador con el sitio web del widget que te permitirá configurarlo. Por lo
tanto, para usar widgets, debes estar conectado.

Una vez que hayas terminado de configurar tu widget, haz clic en el botón INSERTAR en la
parte inferior de la ventana del explorador. Una imagen de marcador de posición se
generará automáticamente, esto es, una imagen estática de cómo se verá tu widget
cuando esté en tu sitio web. El widget no funcionará en la página de MAGIX Web Designer
6, allí sólo verás la imagen de vista previa. Simplemente haz una vista previa de tu página
para ver tu widget en acción.

Si encuentras otros widgets interesantes en Internet, en general, el proveedor del widget te


suministrará un código HTML para que copies y pegues en tu página web. Con MAGIX
Web Designer 6 esto es muy fácil. Todo lo que necesitas hacer es ir a la herramienta de
selección y luego pegar el código en la página. MAGIX Web Designer 6 detectará que has
pegado un código HTML y renderizará una imagen de marcador de posición para ti
automáticamente, que aparecerá en tu página tras unos segundos. El código ya estará
añadido al marcador de posición, por lo que al hacer la vista previa de la página, verás tu
widget en funcionamiento.

Para más información, consulta Widgets (en la página 268).

Colores de la página web

Todas las plantillas utilizan un pequeño conjunto de colores originales y varias sombras de
estos colores originales. La forma más fácil de cambiar el color de tu sitio es utilizar uno de
los esquemas de color alternativos que se suministran con cada tema web en la GALERÍA
DE DISEÑOS . Simplemente arrastra un esquema hasta la página para cambiar el color de
todo el sitio o haz doble clic en él.

O puedes editar cada uno de los colores originales individuales personalmente. Estos se
denominan "colores con nombre" y aparecen en la parte izquierda de la línea de colores a
lo largo de la parte inferior de la ventana.
Primeros pasos 25

Contorno actual y color de relleno


Editor de color
Pipeta para seleccionar colores
Patch "Sin color".
Colores "originales" con nombre y colores vinculado
Paleta fija de colores estándar
Barra de estado . Muestra lo que se ha seleccionado y brinda consejos
Mantén el cursor sobre un color para ver su nombre

Simplemente haz clic en cualquier color con nombre y selecciona la opción de edición (si
mantienes el cursor del ratón sobre el color verás el nombre del consejo de herramienta).

Cuando edites el color puedes arrastrar la pipeta para escoger colores de la pantalla,
incluso de otras ventanas abiertas
Selecciona el color a editar: Color de relleno/color de línea del objeto seleccionado o
cualquier color con nombre (original)
Haz clic en la etiqueta para crear un color con nombre
Haz clic para mostrar los controles de color ampliados
Color anterior
Color actual
Arrastra hacia aquí para seleccionar cualquier tonalidad del tono seleccionado
Arrastra hacia aquí para seleccionar cualquier tono

El editor de color suministra una forma fácil de elegir cualquier color. Haz clic en los
controles ampliados para introducir los valores RGB.
26 Primeros pasos

Observa que cuando cambias un color original de esta forma, todas las tonalidades
relacionadas utilizadas a lo largo del documento también cambiarán.

Colorear formas
Puedes rellenar con un color cualquier forma dibujada, arrastra el color desde la LÍNEA DE
COLOR y suéltalo en la forma o selecciona primero el objeto y luego haciendo clic en la
línea de colores y escogiendo "ESTABLECER COLOR DE RELLENO ".

De forma alternativa haz clic en el pequeño icono de editor de color (o presiona


Ctrl+E) para visualizar el editor de color donde puedes ajustar cualquier color que
desees.
Puedes asignar un relleno de color con gradación a un objeto dibujado utilizando
la herramienta de relleno (en la página 176).

Importación de Clipart con color


Si importas un gráfico clipart arrastrándolo desde la Galería de diseños, utilizando la opción
de Importación o arrastrando un archivo .web o .xar hasta la página, generalmente se te
preguntará si deseas vincular los colores. Si seleccionas que no, entonces cualquier color
con nombre utilizado en el gráfico se añadirá a la línea de colores. Haciendo clic en
cualquier color de la línea de color, te dará la opción de editar el color.

Colorear fotos
Si intentas colorear una foto, se convierte en una foto de "semitonon". Por ejemplo, para
convertir una foto en una foto en blanco y negro, simplemente selecciónala de la forma
usual y haz clic en el rombo blanco al final de la línea de color. Puedes definir que el color
claro sean dos colores cualquiera, no solo blanco y negro.

Nota: Si la foto está dentro de un grupo, como muchos de los objetos de foto están
dentro de las plantillas o de los clipart, entonces tienes que seleccionar primero el interior
de la foto. Puedes hacer esto pulsando la tecla Ctrl y haciendo clic en el objeto con la
herramienta de selección. Otra forma de seleccionar directamente la foto es hacer clic en
la foto con la HERRAMIENTA DE FOTO .

Color del fondo de página


La mayoría de diseños de página en la galería de diseños tienen dos tipos de fondo. Un
fondo de página amplio que se extiende a través del fondo de la ventana completa del
navegador. Encima de esto se encuentran por lo general los elementos de página web,
que suelen consistir en varios paneles de colores.

En la línea de colores suele haber un color denominado "Color de fondo", otro "Color de
panel" y editándolos puedes controlar los distintos colores de fondo. Los demás colores
utilizados son usualmente el color original 1, 2, etc.
Primeros pasos 27

Color de fondo
Color de panel
Colores originales 1 y 2

Configurar el color de fondo de página


Cuando abres una nueva página (Archivo > Nuevo >), la página está por defecto en
blanco. Este es el fondo sobre el que dispones todos los elementos de tu página web.

Si arrastras un color desde la línea de colores a la página y lo sueltas, el fondo de la página


adoptará ese color. En el navegador web este color de fondo se muestra en todo el área
del fondo de la ventana.
28 Primeros pasos
Sin embargo, también puedes configurar el fondo de página en un solo color, tal como se
describe más arriba, y luego fijar el área alrededor de la página en otro color. Esta área
alrededor de la página se denomina tablero de dibujo. Simplemente arrastra un color hasta
el tablero de dibujo y determina el color de página, tal como se describe más arriba. Ahora,
al hacer la vista previa de tu página verás que el color de fondo de la ventana del
navegador tiene el color del tablero de dibujo y la página cuenta con su propio color.

Puedes utilizar el editor de colores para modificar los colores. Haz clic derecho sobre la
página y escoge CAMBIAR FONDO DE PÁGINA para abrir el editor de color, ahora podrás
editar el color de la página. Para editar el color del tablero de dibujo, haz clic derecho
sobre el tablero de dibujo y escoge CAMBIAR COLOR DE FONDO .

Para fijar una textura de fondo que se repita, arrastra la foto o el mapa de bits
hacia tu documento. Abre la galería de mapas de bits, desplaza la página hasta la
foto que acabas de cargar, haz clic en la misma para seleccionarla y a
continuación haz clic en el botón FONDO en la galería.

Capa de fondo de página


Cuando configuras el color del fondo de página al soltar un color en la página tal como se
describe más arriba, esto en realidad añade una capa a tu documento, que podrás ver si
abres la GALERÍA DE PÁGINAS Y CAPAS. Se llama CAPA DE FONDO DE PÁGINA.

Esta capa se encuentra generalmente bloqueada, por lo que no puedes seleccionarla y


editar su contenido. Sin embargo, puedes desbloquearla en la galería de Páginas y capas
para realizar cierto tipo de edición limitada, para personalizar el fondo de tu página.
Simplemente haz clic en el símbolo del candado junto a la capa "Fondo de página" para
desbloquearla.

Ahora, si haces clic en el fondo de la página, verás que se selecciona un rectángulo (mira
la barra de estado). Este rectángulo cubre toda la página y se utiliza para configurar su
color. Puedes editar de forma limitada este rectángulo, insertarle un relleno con gradación
Primeros pasos 29
con la HERRAMIENTA DE RELLENO o redondear sus esquinas con la herramienta de
rectángulos.

NOTA: debes configurar también el color del tablero de dibujo antes de poder modificar el
color uniforme de tu página.

Desplazamiento de la parte superior de la página


Generalmente, si configuras la página y el tablero de dibujo con diferentes colores, al hacer
la vista previa verás que la página se extiende hasta la parte superior de la ventana del
explorador. No puedes ver el color del tablero de dibujo encima de tu página. Sin
embargo, puedes añadir un desplazamiento para que haya cierto espacio entre tu página y
el navegador web.

Para agregar un desplazamiento, debes cambiar el origen de la página. Generalmente, el


origen de la página está configurado en la esquina superior izquierda de tu página. Al
mover el origen hacer arriba 20 píxeles, por ejemplo, agregas un margen de 20 píxeles a la
parte superior de tu página cuando se visualiza en un navegador web.

Puedes cambiar el origen de dos formas. La forma más sencilla es abrir el diálogo
HERRAMIENTAS > OPCIONES y en la pestaña CUADRÍCULA Y REGLA aumentar el valor de la
coordenada Y del punto de origen. En general, esto está configurado como el tamaño
vertical de tu página, por lo que debes aumentar el tamaño del margen de desees ver.
Entonces, por ejemplo, si tu página tiene 700 píxeles de alto, cambia el valor Y de la
coordenada de origen de 700 a 720 para agregar un desplazamiento de 20 píxeles.

Como alternativa puedes configurar el punto de origen de forma interactiva. Activa las
reglas con VENTANA > VER REGLAS (Ctrl+L). Luego haz clic y arrastra el botón de cruce,
ubicado en el lugar en que la regla vertical se cruza con la horizontal, en la parte superior
izquierda de lienzo. Ahora, estás desplazando por la posición original, por lo que coloca la
distancia vertical apropiada sobre la esquina izquierda superior de tu página.

Cambiar la posición horizontal del origen no tiene efecto en la posición horizontal de tu


página, por lo que no deberías modificarla.

Importación de fotos grandes


Al importar fotos grandes, MAGIX Web Designer 6 te pregunta si deseas importar una
versión reducida de tus fotos. Si tu documento va a incluir varias fotos, particularmente un
documento de página web, es importante que escojas esta opción de tamaño reducido.
De lo contrario, si contiene varias fotos, el tamaño del archivo de diseño será mucho más
grande de lo que debería ser (porque contiene una copia de cada una de tus fotos) y es
posible de que no dispongas de memoria suficiente en tu ordenador para cargar, editar y
exportar tu página web. Para un documento web, la resolución de las fotos en su versión
reducida es más que suficiente para ofrecer unos resultados de calidad en tu página web,
por lo que raramente es necesario importar imágenes de cámaras digitales con su
resolución completa.
30 Primeros pasos
Fondos avanzados
Los navegadores web no permiten un fondo de color con gradación sobre la ventana
completa visible (por ejemplo como un fondo HTM real), pero sí permiten fondos repetidos
o fondos como mosaicos o mapas de bits. Por lo tanto puedes utilizar esto para crear un
fondo con gradación que llene la ventana completa creando un mapa de bits con forma de
mosaico (que se repite) a través de la página.

Creando una línea estrecha como en la izquierda cuando defines un fondo, obtienes un fondo de
color con gradación a través de toda la página.

Para crear este efecto, sigue estos pasos;

1. Dibuja un rectángulo. Tiene que tener el mismo tamaño que cualquier usuario
utilizaría para hacer su ventana del navegador, para que no se repita verticalmente.
Un valor de 1000 píxeles o más es recomendable, ya que es mucho más grande que
tu página. Puede que necesites alejar el zoom para dibujar una que sea lo
suficientemente grande. Debería ser muy reducida.
2. Asegúrate de que tu rectángulo no tenga contorno: haz clic en la herramienta de
selección y ajusta para que no tenga contorno. Haz clic en el parche "sin color" en la
línea de colores (o selecciona "ninguno" en el ancho de línea del menú desplegable
en la barra de botones superior).
3. Asegúrate de que el rectángulo contenga algunos píxeles enteros de ancho y luego
asegúrate de que esté situado exactamente sobre píxeles enteros: en la herramienta
de selección selecciona el rectángulo, edita el valor de ancho (W), presiona Aceptar y
luego edita las posiciones X e Y para que sean números enteros.
4. Con la herramienta de relleno (en la página 176), aplica el relleno de color con
gradación como desees: simplemente arrastra hacia el rectángulo. Asegúrate de que
la gradación se aplique de arriba a abajo ajustando la flecha de relleno si fuera
necesario.
Primeros pasos 31

5. Exporta el rectángulo como imagen PNG. Haz clic en el símbolo "Exportar


como PNG" . Una vez exportado, arrástralo nuevamente hasta la página desde tu
Explorador de archivos.

6. Abre la galería de mapa de bits , desplázate abajo en la página para ver el


gráfico que acabas de cargar (será muy pequeño, casi una miniatura invisible en la
galería), y selecciónalo (haz clic en el mismo en la galería) y luego haz clic en el botón
FONDO en la galería de mapas de bits. Ahora puedes eliminar el rectángulo original de
la página.

NOTA: esto sólo funcionará en todo el fondo de la ventana del explorador si no has
otorgado al fondo del tablero de dibujo su propio color. Si has dado al fondo del tablero de
dibujo su propio color, el relleno con gradación sólo se aplicará al fondo del área de
página.

Crear tus propios colores con nombre


Si quieres utilizar un color muchas veces a lo largo de un documento, puedes crear tu
propio color con nombre haciendo clic en la etiqueta de nombre en la parte superior del
editor del color. Este color aparecerá a partir de ese momento en la línea de colores.

Haz clic en la etiqueta para crear un color con nombre

Lo bueno de un color con nombre es que cuando lo editas posteriormente (haciendo clic
en el color y seleccionando Editar), todos los objetos que utilizan ese color se cambian
inmediatamente.

Formas vinculadas
Puedes crear colores que son sombras más claras u oscuras de otro color de modo que
cuando alteras el color "principal", todas las sombras más claras u oscuras cambian para
32 Primeros pasos
combinar con el nuevo tono. Por ejemplo una sombra de color con gradación en un botón,
como este:

Este es un rectángulo redondeado simple con un relleno de


color con gradación creado con la herramienta de relleno. En la
herramienta de relleno puedes hacer clic en el final de la flecha
para ajustar el color.

Si creas el color verde principal como color con nombre y luego haces una sombra más
clara u oscura del color, como sombra vinculada, cuando edites el color con nombre, las
sombras cambiarán también, por lo que puedes cambiar el color fácilmente de los objetos
con sombras complicadas.

Para crear una sombra vinculada abre las opciones avanzadas en el editor de color y
selecciona el menú "COLOR NORMAL " y escoge "TONALIDAD DE OTRO COLOR ".

Haz clic en este botón para mostrar las opciones avanzadas.


Ahora puedes seleccionar cualquier sombra clara u oscura del color principal. La cruz
marca el color principal.
Selecciona la sombra de este menú desplegable y luego el color principal.
Primeros pasos 33
También puedes crear una sombra vinculada que aparezca en la línea de colores (así
puedes aplicarla fácilmente a otros objetos). Al crear un nuevo color con nombre puedes
escoger convertirlo en una "Sombra de otro color" vinculada.

Fotos

Puedes sustituir cualquier foto arrastrándola desde tu explorador de Windows y soltándola


sobre cualquier foto de Web Designer. Si la sueltas sobre el fondo, entonces se importa y
se posiciona en la página donde la soltaste. Todas las fotos importadas se muestran con
500 píxeles, pero por supuesto puedes ajustar cualquier tamaño de la forma usual con la
herramienta de selección.

Arrastra y suelta tu foto sobre cualquier foto existente para sustituirla. Arrastra hacia el fondo
para importarla como una foto nueva.

Si la foto que importas es muy grande, se te preguntará si quieres importar una versión
reducida. Esto es recomendable, para más información lee la sección resolución de fotos a
continuación.

Cuando sustituyes una foto existente, la herramienta de relleno se selecciona y se


muestran dos flechas de rellenos en ángulo recto sobre la foto.
34 Primeros pasos
Esto es así porque la foto en realidad es un relleno dentro de una forma. Puedes tirar de la
imagen para cambiar su posición o estirar de las puntas de las flechas de relleno para
cambiar el tamaño y girar la imagen dentro del contorno de la forma.

Arrastra sobre la foto para cambiar su posición dentro del marco. Estira de la punta de las
flechas para cambiar el tamaño y girar.

Sustitución de múltiples fotos


Algunas plantillas de la GALERÍA DE DISEÑOS, especialmente los estilos de los álbumes de
fotos, pueden tener varias fotos que desees sustituir en un solo paso. Selecciona los
múltiples archivos de fotos en el explorador de archivos de Windows (Ctrl+Clic para añadir
más archivos a la selección o Shift+Clic para seleccionar una serie de archivos). Luego
arrastra y suelta los archivos hasta la página de MAGIX Web Designer 6 para que las fotos
se reemplacen una a una desde el principio de la página hacia abajo. Eso facilita llenar una
página de un álbum de fotos con tus propias fotos.

Si arrastras más fotos de las que caben en la página actual, MAGIX Web Designer 6
explorará las páginas siguientes en el documento para ver si puede acomodar algunas o
todas las fotos restantes. Si esto todavía no alcanza para colocar todas tus fotos, MAGIX
Web Designer 6 duplicará la página actual todas las veces que sea necesario para
posicionar todas las fotos.

Este potente mecanismo significa que puedes crear una página web con un álbum de
fotos de varias páginas, si cargas una plantilla de la galería de diseños y luego arrastras tus
fotos.

La herramienta de fotos
La herramienta de foto suministra una gran variedad de formas de optimizar y recortar
cualquier foto.
Primeros pasos 35
Para cortar una foto, simplemente arrastra a lo largo de la foto mientras te
encuentras en la HERRAMIENTA DE OPTIMIZACIÓN DE FOTOS . Puedes ajustar los
bordes de corte estirando de los controles deslizantes de corte alrededor del
exterior de la foto.
O utiliza la HERRAMIENTA DE CORTE para más control sobre los recortes.

Consulta el apartado Trabajar con fotos (en la página 219) para más información
detallada sobre cómo MAGIX Web Designer 6 maneja fotos y el apartado en Herramienta
de foto para averiguar cómo utilizar la herramienta de foto.

Fotos en miniatura con pop-up


Puedes crear muy fácilmente pequeñas miniaturas de fotos (simplemente cambia el
tamaño para que sean muy pequeñas), para que cuando se haga clic sobre las mismas se
muestre una versión más ampliada. Simplemente cambia el tamaño de tu foto, tal como lo
haces con la herramienta de selección.

Selecciona la pequeña miniatura de foto y selecciona la opción "Foto emergente"


en la pestaña ENLACE del diálogo PROPIEDADES WEB (haz clic en el BOTÓN ENLACE
en la BARRA DE HERRAMIENTAS DE WEB ).
36 Primeros pasos
Haz clic en el botón CONFIGURACIÓN junto a la opción de foto emergente para cambiar a la
PESTAÑA IMAGEN del DIÁLOGO DE PROPIEDADES WEB .

Allí podrás determinar cómo aparecerá tu popup. Una opción te permite colocar un título
sobre cada foto emergente. Configura el título para cada foto en el campo TÍTULO . De
forma opcional puede mostrarse un subtítulo debajo de cada foto emergente.
Simplemente, configura la CAPTURA DE IMAGEN para la miniatura en el mismo diálogo.
Consulta la sección foto emergente del capítulo DIÁLOGO DE PROPIEDADES WEB para
detalles completos de las opciones disponibles.

En Internet Explorer, la captura de imagen se mostrará en un consejo de herramienta


emergente al pasar el ratón sobre la imagen. Para mostrar otro texto, generalmente algo
como "Haz clic para ampliar" cuando mueves el cursor sobre la miniatura de imagen, ve a
la pestaña MOUSE-OVER y cambia "MOSTRAR TEXTO DE POP-UP " por "Haz clic para
ampliar".

Resolución de foto - ¡es todo automático!


Si importas una foto con un ancho o una altura mayor que 1920 píxeles (tamaño de
pantalla de alta definición), se te preguntará si deseas importar una versión de tamaño
reducido en vez del original en tamaño completo. Para el uso en la web es poco probable
que necesites fotos que superen este tamaño, por lo que es recomendable importar una
versión reducida. Se recomienda utilizar fotos de tamaño reducido para que el tamaño del
archivo de tu diseño (.web o .xar) sea pequeño y para reducir la cantidad de memoria
utilizada al editar y exportar tu página web.

Si no estás seguro si necesitas la foto de resolución completa, puedes importar la foto


original y luego optimizarla. Para optimizar una foto, haz clic derecho sobre ella y escoge la
Primeros pasos 37
opción de optimización en el menú contextual. O puedes optimizar todas las fotos JPEG
de un documento en simultáneo, mediante HERRAMIENTAS > OPTIMIZAR TODOS LOS JPEG .

Web Designer siempre guarda la imagen de resolución completa (salvo que escojas
importar las imágenes con resolución reducida cuando se te pregunta durante la
importación). Esto significa que puedes cambiar el tamaño o recortar tu imagen como lo
desees sin perder calidad. Web Designer automáticamente convierte todas las fotos a la
resolución correcta de imagen JPEG cuando guardas tu página web. No tienes que
preocuparte por el dpi, el tamaño de imagen, los píxeles o este tipo de cosas. Lo que ves
en Web Designer (zoom al 100%) es exactamente lo que se producirá en tu página web.

Si quieres cambiar el tamaño de una foto o de cualquier objeto a un valor específico,


puedes introducir el tamaño en los campos de altura y ancho de la barra de información
de la herramienta de Selección.

Cuando sueltas una foto en la página (siempre que no estés sustituyendo una foto
existente), su tamaño se ajusta a 500 píxeles de ancho. Pero si quieres que tenga
exactamente 200 píxeles de ancho, introduce 200pix en el campo de tamaño de ancho
(W) en la herramienta de Selección. Puedes introducir el valor en cualquier unidad, por
ejemplo, 2in significa 2 pulgadas de ancho.

Texto

Puedes editar el texto seleccionando la herramienta de texto y haciendo clic en el


texto.

Dispones de todas las facilidades de procesamiento de texto y puedes pegar texto desde
el portapapeles del sistema. Haciendo doble clic se seleccionará una palabra, haciendo
triple clic se seleccionará una línea entera, que puede ser útil si quieres seleccionar todo el
texto de un botón. Como siempre, la barra de información ofrece numerosos controles
para esta herramienta.

El menú de fuentes muestra una lista de todas las fuentes y está dividida en tres
secciones. La sección superior muestra las fuentes ya utilizadas en el documento, la
siguiente sección muestra las fuentes compatibles con la web y la última sección inferior
muestra todas las fuentes que están instaladas en tu ordenador.
38 Primeros pasos

Las tres secciones del menú de fuentes

En el menú de fuentes se seleccionan las fuentes en tiempo real. Al pasar el ratón por las
distintas fuentes del menú, el texto seleccionado cambia la fuente permitiéndote ver
inmediatamente la vista previa y saber cómo quedará en el documento.

Tamaño de fuente
El campo de tamaño de fuente muestra el tamaño de fuente en píxeles, dado que éste es
el método más confiable para ajustar el tamaño del texto para utilizarlo en el navegador.
Pero puedes introducir cualquier texto en puntos (o cualquier otra unidad para el caso)
introduciendo un valor con pt detrás del mismo (significa "punto"), por ejemplo 72pt ó 1 y
esto se convertirá al tamaño de píxeles correcto.

Fuentes compatibles con la web


Sólo un pequeño conjunto de fuentes puede utilizarse de forma segura para el texto
principal de una página web - sólo estas fuentes que conoces existirán en el ordenador del
usuario que visite tu página web. Aunque no existen garantías, hay un subgrupo común de
fuentes que se utilizan de forma extendida en alrededor del 98% de todos los
ordenadores, incluyendo los Apple Mac y algunos ordenadores Linux. Estas fuentes se
denominan "Fuentes compatibles con la web" y están alistadas en una sección separada
Primeros pasos 39
del menú de fuentes. Si intentas guardar una página web utilizando fuentes compatibles
con la web, se te mostrará una advertencia.

Si conviertes cualquier objeto de texto en un gráfico, eres libre de utilizar cualquier fuente.
Consulta la sección Grupos (en la página 44) abajo para más detalles.

Crear nuevos objetos de texto nuevos


Existen tres objetos de texto: una única línea de texto, una columna de texto o un área de
texto rectangular. Para crear una simple línea de texto, selecciona la herramienta de texto
y luego puedes hacer clic en cualquier parte del fondo para comenzar a teclear. Para
crear una columna, haz clic y arrastra horizontalmente en el fondo y luego comienza a
teclear. Puedes ajustar el tamaño de la columna en cualquier momento. Para crear un área
de texto, haz clic y arrastra diagonalmente. Puedes ajustar el ancho y la altura de un área
de texto.

Texto girado
De forma usual (únicamente para una herramienta de autoría web), puedes girar cualquier
objeto de texto, incluso columnas de texto, utilizando la función de giro usual de la
herramienta de selección. Pero debido a que los navegadores web no son compatibles
con texto girado nativo, Web Designer convierte cualquier texto girado en un gráfico
cuando la página es exportada como página web.

Lista con viñetas y numeradas


Utiliza los botones de las listas con viñetas y numeradas de la barra de información de la
HERRAMIENTA DE TEXTO para insertar rápidamente listas con viñetas o numeradas. Puedes
hacer clic derecho sobre una lista numerada y escoger las propiedades de la lista en el
menú contextual para cambiar el orden del esquema de números en tu lista. Consulta el
capítulo Herramienta de texto (en la página 147) para más información.

Sombras suaves, texto relleno de color, texto transparente


Puedes aplicar cualquiera de estos efectos utilizando las herramientas apropiadas. Por
ejemplo, si arrastras sobre algún texto en la herramienta de relleno, obtendrás un color con
gradación, o si arrastras con la herramienta de sombra, obtendrás una sombra ligera.

En todos estos casos, Web Designer convertirá el texto automáticamente en un gráfico en


tu página web exportada.

Contornear texto alrededor de objetos


Si haces clic con el botón derecho del ratón en un objeto como una foto y seleccionas la
opción de menú "CONTORNEAR TEXTO (en la página 165)", puedes hacer que el texto
"fluya" alrededor del objeto que está encima del texto.

Muchos de los objetos, como fotos, paneles laterales, botones y encabezados utilizados
en plantillas desde la galería de diseños son contorneados automáticamente, es decir, el
texto siempre fluye alrededor de estos objetos cuando los mueves por el documento. El
contorneo de objetos solo se aplica al texto que está detrás del objeto, así que tendrás
que "llevar hacia adelante" el objeto para que funcione el contorneo (Ctrl +F).
40 Primeros pasos
Todas la operaciones de la herramienta de texto son en vivo: el texto se reformatea y
refluye según vas ajustando el ancho de la columna o vas moviendo los objetos
contorneados.

Paneles de texto
Del mismo modo que algunos botones de la galería de diseños se amplían para que
quepa el texto, algunos paneles de texto adaptan el ancho o la longitud del texto que se
les introduce.

El fondo del panel cambia para que quepan bloques de texto más largos o amplios.

Puedes ajustar el ancho de una columna de texto si vas a la herramienta de texto y


arrastras los controladores deslizantes de ancho de columna (debajo de la primera línea de
texto). La mayoría de las plantillas de la galería de diseño suministran algunos paneles de
texto para que queden bien con el tema. Algunos paneles de texto simplemente se
amplían verticalmente, otros se amplían vertical y horizontalmente.

Para crear tu propio botón o panel de extensión, utiliza uno de los botones existentes en la
galería de diseño y adáptalo recoloreando el fondo o reajustando el color, el tamaño y/o el
ancho del texto.

Nota: Puedes crear nuevos componentes de extensión utilizando Xara Xtreme Pro.

Corrector de ortografía
En la barra de información de la herramienta de texto hay un botón que selecciona
las opciones del corrector ortográfico y el idioma. Si seleccionas "Revisar ortografía
mientras se escribe", también marcará todas las palabras que no reconoce
subrayándolas en rojo intermitente. Haz clic con el botón derecho en cualquier
palabra marcada para obtener sugerencias.

Fuentes incrustadas
Web Designer guarda las formas de caracteres de todas las fuentes usadas en tu
documento. Esto significa que si pasas tu archivo web a otra persona o transfieres el
archivo a otro ordenador, los usuarios verán exactamente lo mismo que tú, incluso si las
fuentes correctas no están instaladas en dicho ordenador. Pero esto únicamente incrusta
Primeros pasos 41
los caracteres usados en el documento (no se incluye la fuente completa). Por lo tanto, en
los ordenadores que no disponen de las fuentes, el texto que se añada en las fuentes no
disponibles puede que no aparezca con las formas de caracteres correctas.

Consejo de texto: Existen numerosas combinaciones de teclas disponibles en la


herramienta de texto. Consulta la sección de referencia de shortcuts de teclado para
verlas todas. Una útil para experimentar con diseños de página es Ctrl+Shift+L, ya que
inserta un bloque de pseudo-latín aleatorio.

Tamaño de página

Las páginas de la galería de diseños están diseñadas para tener el ancho que es conocido
es compatible para la mayoría de las pantallas de ordenador. No se recomienda crear
páginas más anchas, incluso si tú tienes una pantalla de ordenador más amplia. La
experiencia demuestra que la mayoría de usuarios prefieren tener un ancho de página fijo.
Sin embargo, puedes ajustar el tamaño de página que quieras.

Puedes definir cualquier tamaño de página que quieras seleccionando la pestaña del
PÁGINA del DIÁLOGO DE OPCIONES (Archivo·>opciones de página). No se recomienda que
crear un ancho de página que supere los 990 píxeles, ya que éste es el ancho máximo
para gran parte de las pantallas de ordenador (1024 menos una pequeña cantidad por la
barra desplazable). Un ancho de página más común tiene por lo general unos 800 píxeles.

Selecciona la opción Personalizar tamaño de página para introducir cualquier tamaño que
desees.

Puedes ajustar directamente la altura de tu página arrastrando el margen inferior de la


página. Ve a la HERRAMIENTA DE SELECCIÓN y mueve el cursor sobre el borde inferior de la
página y éste cambiará para indicarte que ahora puedes arrastrar para reducir o ampliar el
tamaño de la página según se requiera.
42 Primeros pasos
Cambiar el tamaño de página de plantillas
Puedes cambiar el tamaño vertical de las plantillas prediseñadas de la misma forma,
simplemente arrastrando el borde inferior de la página. Sin embargo, tendrás que mover y
cambiar el tamaño de varios objetos de la página. Por ejemplo, muchas plantillas tienen un
grupo de pie de página. Puedes arrastrarlo, utilizando la herramienta de selección, hacia la
nueva posición. Algunas veces el texto principal está en un rectángulo de fondo de color.
Utilizando de nuevo le herramienta de selección puedes arrastrar el control deslizante
modificador de tamaño inferior para extenderlo hasta la parte inferior de la página como lo
desees. La mayoría de plantillas utilizan columnas de texto que crecen verticalmente según
vas agregando más texto.

Consejo: Si mantienes presionada la tecla Ctrl mientras arrastras, puedes estar seguro de
que el arrastrar será exactamente vertical u horizontal.

Guardar tu trabajo. Creación de una página Web

Utiliza las opciones de menú GUARDAR o GUARDAR COMO para guardar tu trabajo en
progreso. Esto guarda un archivo con la extensión .web que es el formato de archivo
nativo para Web Designer (esto no es una página web). Se recomienda que guardes tu
trabajo regularmente según avances. Si quieres editar o actualizar tu página en el futuro,
debes guardar un archivo .web de esta forma y hacerlo en actualizaciones futuras.

También te recomendamos trabajar con la función de copias de seguridad automáticas


activada. Esta opción se controla desde la pestaña Copias de seguridad del diálogo
HERRAMIENTAS > OPCIONES . Cuando está activada esta opción, se realiza una copia de
seguridad de tu documento abierto de forma regular. Aquí puedes escoger la forma en
que debe comportarse el programa al cerrarlo. Puedes hacer que te pregunte si quieres
guardar o eliminar un documento modificado o hacer que todos los documentos se
guarden automáticamente en la ubicación de copias de seguridad y se restauren la
próxima vez que inicies.

Para guardar tu sitio web, que son las páginas HTML y archivos asociados para
publicar en la Web, utiliza la opción Exportar página web o haz clic en este botón en
la barra superior.
Esto guarda un archivo .htm por cada página y una carpeta que contiene todos los
archivos que componen la página web.

Al exportar un sitio web, todas las páginas se exportan juntas y cada página sin nombre
recibe la finalización _1, _2 tras el nombre que ingresas durante la exportación. La carpeta
_FILES contiene todos los gráficos y otros archivos que van a formar tu sitio web. Puedes
nombrar cada página de forma individual si lo deseas, con la pestaña PÁGINA del diálogo
PROPIEDADES WEB o con la Galería de páginas y capas (en la página 275).

El nombre por defecto que se le dará a tu sitio web es index.htm porque éste es el nombre
usual de la primera página de un sitio web.
Primeros pasos 43
Puedes ver previamente el sitio web en cualquier navegador web, si arrastras el archivo
index.htm (o cualquier .htm) desde el Explorador de Windows hasta una ventana del
navegador.

Copias de seguridad automáticas


La pestaña Copias de seguridad del diálogo HERRAMIENTAS > OPCIONES te permite activar
y desactivar la función de copias de seguridad automáticas. Esta función guarda una copia
de todos los documentos abiertos modificados en intervalos regulares. También puedes
escoger si se te debe advertir que no has guardado documentos al cerrar el programa o si
debe guardarse una copia de seguridad de todos estos documentos y restaurarse la
próxima vez que inicies el programa.

Consulta el capítulo Manejo de documentos (en la página 78) para más detalles acerca de
estas funciones.

Objetos elásticos

Muchos de los objetos gráficos, como los botones y los paneles de texto pueden ajustar
automáticamente su tamaño dependiendo del tamaño o la longitud de texto. Por ejemplo,
algunos de los botones denominados "botones extensibles", que significa que la longitud
del botón se ajusta para que el texto de la etiqueta quepa en el botón. La mayoría de
grupos de plantillas y todos los botones en el archivo de botones de la galería de diseños
tienen versiones de ancho fijo y extensible. Se recomienda que si creas un grupo de
botones de navegación (típicamente una colección de enlaces o botones horizontales o
verticales), utilices un ancho fijo de modo que todos tengan el mismo tamaño.

De forma similar, muchos de los paneles laterales o de texto en las plantillas, y algunas
veces en el área de texto principal, también pueden ajustar su tamaño vertical y a veces su
tamaño horizontal. En el caso de los paneles de texto, puedes ajustar el ancho de la
columna en la herramienta de texto arrastrando el borde izquierdo o derecho del indicador
de columna.
44 Primeros pasos

Grupos

Puedes agrupar cualquier selección de objetos en la página. Muchos de estos elementos


de los diseños como los botones, paneles de texto y objetos de fotos son elementos
agrupados. Los grupos actúan casi como un objeto individual, ya que puedes arrastrarlos
por la página, cambiar su tamaño y rotarlos como si fueran un solo objeto.

Por ejemplo, puedes dibujar un botón simple desde el comienzo arrastrando un triángulo
con la herramienta de triángulo y colocando una etiqueta de texto encima de la etiqueta
con esta herramienta de texto. Estos son objetos separados que puedes mover de forma
independiente en la herramienta de selección. Pero si seleccionas ambos en la herramienta
de selección (también puedes arrastrar un laso para encerrarlos a ambos, o presionar Shift
y clic sobre objetos adicionales) y luego presionas Ctrl+G (o el menú Arreglo > Grupo) se
convertirán en un objeto agrupado (pista: la línea de estado que se encuentra debajo
siempre te informa lo que está seleccionado). Ahora puedes arrastrar, cambiarle el tamaño
o girar este objeto, todas las partes de este grupo se mueven y transforman como si
fueran un único objeto.

Importante: los objetos agrupados están generalmente convertidos en un único gráfico


cuando exportas tu página web.

Al desagrupar (Ctrl+U) puedes acceder a todas las partes del grupo de forma individual.
Como alternativa puedes editar elementos directamente dentro de un grupo, por ejemplo,
si utilizas la herramienta de texto para editar el texto o la herramienta de foto para editar
una foto, un clic seleccionará automáticamente el elemento dentro del grupo.

Convertir texto en un gráfico


Como se mencionaba arriba, sólo un número limitado de fuentes están disponibles en
navegadores web. Si quieres utilizar una fuente diferente en un botón o, digamos, como un
encabezado, puedes hacerlo asegurándote de que se ha convertido a un gráfico, y todo lo
que necesitas es agrupar el objeto para que esto ocurra automáticamente. Todavía
puedes editar el texto dentro del grupo, pero los grupos se convierten automáticamente en
gráficos cuando se exporta la página web.

Por lo tanto, todo lo que tienes que hacer para incluir una fuente como ésta es agrupar. No
tiene por qué estar agruparse con nada, puede agruparse en sí mismo presionando
Ctrl+G.

Grupos suaves (soft groups, en inglés)


Hay otro tipo de grupo denominado "Grupo suave" que es un conjunto de objetos
conectados de una forma más suelta . La diferencia entre los grupos y los grupos suaves
reside en que:
Primeros pasos 45
• Cuando agrupas elementos, todos tienen que estar en una única capa (si no lo están se
moverán a una única capa cuando agrupes los elementos). Los grupos suaves
conservan sus capas, de modo que puedes ligar elementos a través de múltiples capas.
• Los grupos por lo general se convierten en un único gráfico en la página web exportada.
En los grupos suaves, cada uno de los objetos se exporta como un elemento separado.
El texto dentro de un grupo suave se conserva como texto en el HTML, mientras que el
texto en los grupos se convierte en un gráficos (con algunas excepciones).
• Puedes colocar grupos dentro de otros grupos. Para dibujos complejos que consisten
en numerosas y algunas veces en miles de formas, es una buena técnica organizativa,
es como tener un archivo dentro de otros archivos. Sin embargo, los grupos suaves no
se pueden depositar dentro y en primer lugar están diseñados para ligar múltiples
objetos en diferentes capas.

Debido a que los grupos suaves pueden contener elementos en diferentes capas, cuando
seleccionas un elemento de grupo suave en una capa, se seleccionará/n automáticamente
el/los elemento/s "agrupado/s suavemente" de las otras capas; muchas veces se trata de
una capa que ni siquiera es visible. Consulta la sección de capas más abajo para
comprenderlo mejor.

La mayoría de botones son grupos suaves, es decir, cuando seleccionas, mueves o


cambias el tamaño de un botón, en realidad estás efectuando estas operaciones en dos
copias del botón, una llamada la versión "MouseOff" y la otra llamada versión
"MouseOver".

Algunos de los objetos de panel más complejos en la galería de diseño son grupos suaves.
Puedes moverlos como un objeto único, pero las partes del grupo, las fotos, las formas de
fondo, todos se exportan a HTML como elementos separados para obtener una eficiencia
máxima.

Texto sincronizado
Hay otra característica muy útil que ofrecen los grupos suaves. Si tienes el mismo texto en
dos o más objetos dentro de un grupo suave, el texto se sincronizará cuando lo edites.
De esta forma, puedes mantener igual el texto del botón normal y el del MouseOver (ver
abajo).

Enlaces, botones y barras de botones

Puedes añadir un enlace de web a cualquier objeto, un botón, gráfico o a un texto.

Selecciona el objeto y simplemente haz clic en el icono en la parte superior para


introducir la dirección web que quieres vincular.
46 Primeros pasos

Introduce la dirección web que quieras para vincular en el campo

El diálogo de enlace te permite controlar lo que ocurre si haces clic en el objeto vinculado
en la página. Puedes saltar a cualquier otra página web (puedes seleccionar rápidamente
un enlace a cualquier otra página dentro de tu página web utilizando el enlace a la página
desplegable) y puedes controlar si esto abre la página en una ventana separada.

Por lo tanto, para definir uno de tus botones como enlace, simplemente
selecciónalo (haz clic en el mismo en la herramienta de selección), haz clic en el
icono, e introduce la dirección web o selecciona una de las páginas de la lista
desplegable y haz clic en Aplicar. Eso es todo.

Enlazar a una referencia (anchor)


Puedes vincular cualquier texto u objeto en cualquier lugar en tu página web utilizando
"referencias". Primero tienes que asignar un nombre al objeto que quieres vincular. Esto
recibe el nombre de referencia. Selecciona el elemento (que puede ser un gráfico o algo de
texto) y luego selecciona el menú HERRAMIENTAS ->> NOMBRES... para visualizar el diálogo
de nombre. Introduce cualquier nombre único que desees y haz clic en AGREGAR .

Para vincular esta referencia desde otro lugar en tu página web (un botón o sólo un enlace
en algo de texto), abre el diálogo de enlace (que se muestra arriba) y elige "ENLAZAR A UNA
REFERENCIA (ANCHOR) " de la lista desplegable de nombres.
Primeros pasos 47
Enlace al archivo
Muchas veces quieres insertar en tu sitio un documento, película u otro tipo de archivo.
Para ello, utiliza la opción ENLACE AL ARCHIVO . Selecciona en tu página el objeto que
quieres enlazar con el archivo. Luego escoge la opción Enlace al archivo y busca tu
archivo. Esto copia el archivo en una carpeta de soporte junto con el archivo de diseño,
para que el archivo se publique junto con el resto de tu sitio. La carpeta se nombra con la
denominación de tu archivo de diseño y la terminación "_files". Haz clic en ACEPTAR , obtén
una vista previa de tu página y comprueba el enlace. Cuando quieras modificar el archivo,
repite el proceso: busca tu archivo nuevo o actualizado. Consulta el capítulo del diálogo
PROPIEDADES WEB (en la página 195) para más información acerca de esta función y el
capítulo Trabajar con documentos para información acerca de las carpetas de soporte (en
la página 76).

Cambiar texto de botón


Es muy simple en la HERRAMIENTA DE TEXTO , haz clic en el texto del botón y edítalo.

Consejo: si haces triple clic en el texto del botón, seleccionas toda la línea de texto para un
reemplazo más sencillo al tipear.

NOTA: no puedes editar el texto de las barras de navegación de esta forma, si la barra
está fijada como barra de navegación del sitio. Debes editar las etiquetas en el diálogo de
Barras de navegación.

Botones mouseover (rollover)


Te habrás dado cuenta de que la mayoría de botones se resaltan cuando mueves el cursor
del ratón por encima de los mismos en tu navegador. Esto se llama un mouseover o,
algunas veces, efecto rollover. Es completamente automático para la mayoría de botones
utilizados en las plantillas o para la sección de botones de la galería de diseños.

Para el usuario avanzado: este efecto mouseover se crea utilizando las capas nombradas.
De hecho, los botones son grupos suaves que consisten en dos estilos, el estilo mouse-off
y mouse-over en capas separadas. El grupo suave significa que ambas capas cambian al
mismo tiempo cuando le haces algo al botón, como cambiar, mover, o cambiar el tamaño
del texto. Ver la sección Capas (en la página 54) abajo para más detalles.

Agregar nuevos botones


En la galería de diseños cada tema tiene una colección de gráficos de botones que puedes
arrastrar hacia la página. Por lo general hay dos tipos de botones. Los que se denominan
botones extensibles se adaptarán al texto de la etiqueta del botón.

Además hay una categoría de botones que tiene un conjunto de diseños de botones
generales que se pueden agregar a tu página de la misma forma.

También puedes copiar cualquier botón existente; esta sea probablemente la mejor forma
de añadir más botones a una barra de navegación. Puedes copiar/pegar, pero es un
shortcut mucho más rápido arrastrar presionando el botón derecho del ratón. (Esto es un
48 Primeros pasos
shortcut general para copiar cualquier objeto). Ahora puedes editar el texto y enlazarlo
como lo desees.

Consejo: si mantienes presionada la tecla Ctrl mientras lo arrastras, la operación de


arrastre será perfectamente horizontal o vertical, facilitando en gran medida la creación de
una línea o una columna de botones.

Botón de barras (barras de navegación)

La mayoría de páginas web, y la mayoría de los diseños de plantillas que suministramos,


tienen una fila o una columna de botones para navegar en la página web o en otros
lugares. Esto se llama BARRA DE NAVEGACIÓN y MAGIX Web Designer 6 incluye una
compatibilidad especial para estas barras. Para editar una barra de navegación, haz doble
clic sobre ella o clic derecho y escoge EDITAR BARRA DE NAVEGACIÓN del menú contextual.
Se abrirá el diálogo de barra de navegación. Allí podrás cambiar los nombres de los
botones, enlaces y consejos de herramientas, agregar y eliminar botones, cambiar el orden
y hasta agregar menús y submenús.

Al hacer doble clic sobre el campo de URL, se abrirá el diálogo Enlace que es el mismo
diálogo que se utiliza para fijar enlaces en objetos normales, tal como se ha descrito
anteriormente en este capítulo y en detalle en el capítulo del diálogo de propiedades web.

En este diálogo también puedes activar la opción BARRA DE NAVEGACIÓN DEL SITIO . Esto
hace que la barra aparezca automáticamente en las nuevas páginas que agregas a tu sitio
y los botones/enlaces agregados a la barra también se añaden a cada página nueva. Sin
embargo, no puedes editar tu barra en el lienzo si esta opción está activada, sólo puedes
hacerlo mediante este diálogo.

Para actualizar una barra de navegación en todas las páginas, si no es una barra de
navegación de sitio automática, selecciona el menú ARREGLO > ACTUALIZAR OBJETOS
REPETIDOS . Esto copiará la barra de botones (y todos los demás objetos repetidos) de la
página actual a todas las otras páginas que contengan la misma barra de botones. Por lo
tanto, si quieres copiar una barra de botones completa en otra página que todavía no tiene
una barra de botones de botones, haz doble clic para seleccionar la barra entera y luego
puedes copiarla/pegarla en otra página.

Lee el capítulo Barras de navegación (en la página 254) para toda la información detallada
sobre barras de navegación.
Primeros pasos 49

Herramientas de dibujo

Web Designer pone a disposición todas las herramientas de gráficos que necesitas
para crear casi cualquier objeto gráfico para tu página, así como una gama de ele-
mentos prediseñados en la galería de diseño. Existen tres herramientas de dibujo
básicas que te permiten crear rectángulos, elipses o cualquier forma que desees.

Web Designer suministra herramientas de dibujo vectoriales lo que significa que puedes
cambiar el tamaño, editar la forma y cambiar el color sin perder calidad. Puedes ampliar
para ver el más mínimo detalles y todas las ediciones pueden deshacerse.

Para dibujar un rectángulo, selecciona la herramienta RECTÁNGULO y arrástrala por


la página. Esto creará un rectángulo negro.

Haz clic sobre "esquinas curvas" en la barra de información para crear un


rectángulo redondeado, o arrastra el control deslizante de la esquina curva para
ajustar el redondeo.

Arrastra desde cualquier esquina de los controles deslizante para redimensionar un objeto.

Arrastra y suelta un color desde la LÍNEA DE COLOR hasta la forma para cambiarle el
color. Lee Coloreado de formas (en la página 26). Con la HERRAMIENTA DE SELECCIÓN
puedes arrastrarla, cambiarle el tamaño y girarla como lo desees. Lee Herramienta de
selección (en la página 20). Puedes colocar este rectángulo detrás de otros objetos como
un fondo de imagen, si pulsas Ctrl+B para "Poner detrás". Como alternativa, si deseas
ponerlo delante de todos los otros objetos (Ctrl+F), podrás hacer un clic derecho sobre él y
seleccionar ALINEAR TEXTO BAJO para hacer que el texto de la página se acomode fuera de
la forma (otra herramienta de Web Designer antes de cualquier otra de autoría web).

El EDITOR DE FORMAS siempre le permite crear imágenes detalladas basadas en


vectores y editar también el contorno de cualquier forma.

Para las formas de preset como rectángulo o elipses, si deseas editar el contorno de las
formas de los caracteres de texto, deberás convertir el objeto en una forma editable
50 Primeros pasos
primero. Puedes hacerlo si seleccionas el shortcut Ctrl+1. Podrás utilizar el Editor de
formas para realizar varias ediciones avanzadas de vectores.

Consulta la sección de referencia (en la página 117) para más información acerca del uso
de esta poderosa herramienta.

Herramienta de relleno
Puedes agregar fácilmente un relleno de color con gradación a una forma usando
esta herramienta. Selecciona la herramienta y simplemente arrastra al objeto.

La flecha de relleno puede ser ajustada arrastrando las puntas para cambiar la dirección, el
ángulo o la extensión de la graduación.

Rectángulo redondeado con relleno con gradación

Nota: si arrastras la herramienta de relleno sobre un objeto agrupado como un panel de


texto, el relleno afecta a todo el grupo. Para evitarlo, debes seleccionar solo el objeto que
desees rellenar. Puedes hacerlo de distintas maneras. Un solo clic con la herramienta de
relleno seleccionará unicamente ese objeto, así como un clic en la herramienta de
selección con la tecla Ctrl presionada (esto es conocido como "selección interna", ya que
selecciona un objeto dentro del grupo). Cuando lo arrastres rellenará solo el objeto
seleccionado.

Para editar el principio o el color del relleno, arrastra y suelta un color desde la línea de
colores a la forma, o puedes seleccionar el final de la flecha de relleno en la herramienta de
relleno y utilizar el Editor de color (Ctrl + E).

Puedes crear un relleno de gradación de varios niveles haciendo que se vea la flecha de
relleno (selecciónala con la herramienta de relleno), luego arrastra un color de la línea de
colores y suéltalo cuidadosamente en la línea de flecha, donde quieras agregar el nuevo
color. Ahora puedes arrastrar este punto de relleno seleccionar Ctrl+E para ajustar el color
utilizando el Editor de color. Existen distintos estilos de relleno, por ejemplo, este es un
círculo con un relleno circular.
Primeros pasos 51

La sombra es otra elipse con un relleno de color de gradación y difuminado (ver abajo)

Herramienta de transparencia

Los navegadores más modernos con compatibles con efectos de transparencias


avanzados, como lo hace Web Designer. Puedes ajustar la transparencia de cualquier
gráfico o foto para hacerlo transparente. Pruébalo en tu ejemplo rectángulo. Simplemente
selecciona la herramienta de transparencia y ajusta la barra deslizante larga en la barra de
información.

Más que eso, Web Designer es compatible con la transparencia con gradación. Funciona
de forma similar al relleno de color con gradación. En la herramienta de transparencia,
simplemente arrastra a través de tu forma y puedes ver que la transparencia
desaparece. Puedes ajustar el grado de transparencia de cada terminación de la flecha
de relleno haciendo clic en la terminación de la flecha o ajustando la barra deslizante de
transparencia.

Haz un vista previa y verás que también funciona en tu navegador.

Difuminación
Es una herramienta gráfica para armonizar las esquinas de los objetos. Web Designer
proporciona un control de difuminación que permite difuminar cualquier objeto, gráfico,
texto o foto, proporcionándole un borde borroso que se mezcla con el fondo. El control
de difuminación no es una de las herramienta de la izquierda, sino uno de los controles
que se ubican en la barra superior. Inténtalo en la forma del rectángulo. Selecciona la
forma y haz clic en el control de difuminación de la barra superior.

La sombra debajo del dibujo de la pelota tiene un borde difuminado. La combinación de


todos estos controles te permite producir rápidamente gráficos de capas asombrosos
para tu página web, todo directamente en Web Designer sin necesidad de utilizar ninguna
otra herramienta gráfica.
52 Primeros pasos
Este es un ejemplo de un rectángulo redondeado
con una gradación de color, gradación de
transparencia y bordes difuminados con un poco
de texto arriba.

Tiene un relleno de gradación de color desde verde


oscuro hasta verde claro de izquierda a derecha.
También tiene una transparencia graduada desde
la parte superior hasta abajo. El difuminado otorga
un borde suave. Crear este tipo de imagen lleva
solo unos pocos segundos y se convertirá
automáticamente al gráfico indicado cuando
guardes tu página web. En Web Designer puedes
crear cualquier tipo de gráfico, foto, texto con
transparencia y simplemente, ¡funciona!. También
puede importar casi todos los tipos de archivos
gráficos, desde Adobe EPS, hasta Photoshop PSD,
RAW y muchos más.

Nota técnica: Web Designer convierte automáticamente todo tipo de vector gráfico en
imágenes PNG, un PNG de canal alfa, si se ha utilizado transparencia. Utiliza capas CSS
para repetir el orden de aparición de las capas en Web Designer. Es compatible con
todos los navegadores web más modernos.

Herramienta de sombra
Un efecto gráfico muy popular es crear una sombra suave debajo de un gráfico o un texto.
Esto sirve para elevar el objeto del fondo.

La HERRAMIENTA DE SOMBRA te permite añadir una sombra suave a cualquier


objeto, texto, gráfico o foto. Selecciona la herramienta de sombra y simplemente
arrastra el objeto. Puedes ajustar el desenfoque de sombra y la transparencia
utilizando los controles de la barra de información.

Texto con una sombra suave.

Para ajustar la posición de una sombra existente, en la herramienta de sombra arrastra a la


sombra.

Nota para usuarios avanzados: Ten en cuenta que como la sombra misma es
semitransparente (parte de los objetos se ven a través de la sombra), los objetos con
sombras son convertidos a imágenes PNG cuando se guardan en la página web (es el
Primeros pasos 53
único formato de imagen que es compatible con la transparencia). Las imágenes pueden
ser bastante grandes, en especial las fotos. Es perfecto para imágenes como el gráfico de
sombra superior.

Puede que pienses en convertir el gráfico completo a JPEG para ahorrar espacio. Si esto
funciona o no depende de qué hay detrás de la sombra. Si es un fondo plano o estático y
no tiene texto, es posible que puedas utilizar JPEG, ya que tiene un tamaño de archivo
mucho más pequeño (la página web se descarga más rápidamente). Para forzar que un
objeto sea un JPEG, utiliza la pestaña de imagen del diálogo de propiedades web.

Las imágenes JPEG no pueden tener partes semitransparentes, por lo tanto, cuando creas
un JPEG de un objeto semitransparente, Web Designer incluye el fondo (lo que hay detrás
de la parte semitransparente) como parte de la imagen JPEG, pero debido al
posicionamiento de píxeles perfecto de la página no lo puedes saber. Esto no funciona si
la sombra o el objeto semitransparente es posicionado sobre texto, dado que el texto se
incluirá como parte del gráfico.

Gráficos de ejemplo

Este es un ejemplo perfecto de las posibilidades de creación de Web Designer. Este botón
combina muchas de las funciones descritas más abajo: ha sido creado a partir de la
combinación de formas difuminadas y utilizando transparencia con gradación (el efecto de
reflexión blanco). El texto tiene una sombra suave y el botón tiene una sombra de
resplandor. Todo está agrupado. (No necesitas crear el botón, ya que aparece en la
categoría "Botones" de la galería de diseños).

La gran ventaja de los gráficos vectoriales, en comparación con los gráficos de "mapa de
bits" creados en softwares de edición como Photoshop, es que puedes cambiar el color,
editar, rotar, y cambiar el tamaño del botón, sin pérdida de calidad. Agrándalo y verás que
mantiene la nitidez:

Además de esto, puedes cambiar el color utilizando el sistema de color con nombre, y
estirarlo como desees: todo lo que hagas en Web Designer no es destructivo (lo que
significa que puedes editar siempre sin pérdida de calidad).

Los procedimientos que normalmente llevan mucho tiempo en otros softwares para
gráficos, son un juego de niños en Web Designer.
54 Primeros pasos

Capas, mouseover (rollover) y pop·ups

Como ya se mencionó anteriormente, todos los objetos tienen un orden de apilamiento en


la página · desde el objeto más al fondo hasta el objeto en primer plano.

Estos objetos están apilados unos encima de otros.

Adicionalmente, todos los objetos pueden posicionarse en capas nombradas. Cada capa
puede tener cualquier número de objetos y tiene la habilidad de poder activarse o
desactivarse. Cuando la capa se desconecta, todos los objetos en esa capa se vuelven
invisibles.

Las capas son controladas con el icono de la GALERÍA DE CAPAS en la barra


superior.

En Web Designer, las capas son usadas para suministrar funciones MouseOver (algunas
veces llamadas "rollover") en tu página web. Éstas incluyen botones resaltantes (se
resaltan cuando pasas el cursor sobre los mismos) y otros efectos pop·up como un panel
de texto que contiene una descripción detallada de producto.

Efectos MouseOver
Hay dos tipos de efectos mouseover. Primero, el que se utiliza en botones mouseover, en
los que cualquier objeto con dirección web puedes mostrar un objeto gráfico superpuesto
que aparece en una capa llamada MOUSEOVER. Ve más abajo para más detalles.

Hay otra posibilidad aún mejor de mouseover, con la que puedes hacer que aparezcan los
contenidos de cualquier capa como mouseover o con un clic en un objeto en tu página.
Esta capa popup puede contener texto, gráficos, fotos o cualquier combinación de estos
elementos. Más información, abajo.
Primeros pasos 55
Las capas MouseOff y MouseOver
Todos los objetos principales en tu página web han sido colocados en la capa inferior,
conocida normalmente como MOUSEOFF . Los botones que se destacan cuando mueves el
cursor del ratón sobre ellos en tu página web, tienen un gráfico adicional en la capa,
conocido como MOUSEOVER .

Si abres la Galería de capas puedes mostrar u ocultar cualquier capa si colocas o quitas la
selección en la casilla de visibilidad (columna izquierda bajo el símbolo de ojo). Esta es una
forma de mostrarte cómo pueden verse los elementos de MouseOver en tu página web.

La capa actual siempre está destacada en la Galería de capas (la capa de MouseOff en el
diagrama de arriba) y esta es la capa en la que todos los objetos nuevos se
dibujarán. Para colocar objetos en cualquier otra capa, simplemente haz clic en la capa
requerida en la Galería de capas, y asegúrate de que los símbolos del ojo y del candado
estén abiertos.

Nota: la capa MouseOver debe estar siempre por encima de la capa MouseOff.

Para editar los objetos en una capa, los símbolos tanto de "ojo" como de "candado"
deben estar abiertos, esto significa que puedes ver y editar la página (tal como se ilustra
arriba en la capa MouseOff).

Mover objetos de una capa a otra


Puedes cortar un objeto (Ctrl+X), seleccionar una capa nueva (hacer clic en su nombre en
la galería de capas) y pegar (Ctrl+V). Una alternativa útil se llama Pegar en lugar
(Ctrl+Shift+V) que lo pegará exactamente en la misma posición donde lo copiaste. Tienes
que asegurarte de que las dos casillas de visibilidad y de verificación de edición están
activadas para ver y editar el objeto en una nueva capa.

Botones mouseover (rollover)


Casi todos los botones de diseño acabado en la GALERÍA DE DISEÑOS tienen un efecto
mouseover en Web Designer. Están creados con dos versiones de cada botón, el botón
principal en la capa MouseOff y el botón "resaltado" en la capa MouseOver.

Normalmente no tienes que saber o tener en cuenta esto porque ambos botones se
comportan como uno: los cambios que haces en uno, como editar el texto de etiqueta, se
reflejan en la otra versión. Si mueves, arrastras o cambias un botón en la capa MouseOff,
56 Primeros pasos
la otra versión en la capa MouseOver cambiará asimismo aunque no puedas verlo. Esto se
efectúa utilizando Grupos suaves (en la página 44).

Creación de los botones MouseOver propios


Puedes crear tus propios botones MouseOver si dibujas los elementos necesarios a partir
de rectángulos, textos, etc. Simplemente dibuja las partes principales del botón en la capa
de MouseOff (recuerda agruparlos (en la página 44)) y coloca la versión "destacada"
correspondiente en la capa MouseOver. Mientras que la versión MouseOff tenga un enlace
de dirección web, la versión MouseOver se visualizará automáticamente cuando muevas el
ratón por encima de la página web. (La capa MouseOver tiene que estar encima de la
capa MouseOff).

En otras palabras, otorgas al objeto principal una dirección web utilizando la opción
de enlace, y después seleccionas una capa MouseOver en la Galería de objetos y
colocas las versiones MouseOver de tu botón en esta capa para que se
superpongan con el objeto con el enlace.

Nota técnica: Cualquier objeto gráfico en la capa MouseOver se visualizará si se


superpone como mínimo el 50% con el objeto de la capa MouseOff. Las dos versiones de
botones MouseOver se mantienen sincronizadas con la función de grupos suaves. Si has
seleccionado un botón en una capa, después seleccionas automáticamente la versión de
grupo suave en la otra capa, aún cuando la capa esté desactivada. Al editar el texto del
botón en una capa, se pondrá en sincronía automáticamente con la otra versión del
botón.

Para asegurarte de que el texto cambie en los dos estados cuando editas uno de ellos,
APLICA UN GRUPO SUAVE a los botones de ambas capas. Para esto, necesitarás permitir
ambas capas en la GALERÍA DE CAPAS y realizar una selección laso alrededor de ambos
botones. La barra de estado debe informarte si has seleccionado todo. Selecciona
ARREGLO > APLICAR GRUPO SUAVE . Ahora, cuando edites el texto en la capa Off, también
cambiará en la otra capa, aun cuando esté oculto. (Ten en cuenta que esto solo funciona
si el texto en las capas Off y Over es igual y cuando los objetos estén agrupados como
grupo suave).

Una vez que el botón funcione, puedes convertirlo rápidamente en una barra de
navegación. Selecciona el botón (junto con el estado MouseOver, de corresponder) y
luego selecciona ARREGLO >CREAR BARRA DE NAVEGACIÓN. Aparecerá el diálogo de barra
de navegación que te permitirá configurar tu barra. Consulta el capítulo Barra de
navegación (en la página 254) para más información sobre este tema, incluyendo cómo
incluir un primer y un último botón diferentes en tu barra.

Capas pop·up
Una alternativa más fuerte te permite visualizar los contenidos de cualquier capa al pasar el
cursor sobre cualquier objeto o haciendo clic sobre el mismo. Esto se puede utilizar para
una gran variedad de efectos pop·up diferentes, como fotos pop·up, menús, o
descripciones de objetos detalladas.

Para hacer esto, posiciona todos los objetos que quieras como pop·up en una nueva capa
(en la galería de objetos haz clic en NUEVO · no utilices la capa mouseover), luego define la
Primeros pasos 57
propiedad mouseover (diálogo de PROPIEDADES WEB ) del objeto original para disparar la
visualización de esta capa cuando pases el cursor sobre cualquier objeto. Por ejemplo
puedes hacer que un pop·up como éste aparezca cuando pases el cursor sobre un texto:

Aquí tienes los pasos para crear un texto pop·uo como éste:

1. Haz clic en NUEVO en la GALERÍA DE CAPAS para crear una nueva capa.
2. Dibuja un rectángulo redondeado con la HERRAMIENTA RECTÁNGULO , haz clic en un
parche de color (pálido) en la LÍNEA DE COLOR para darle un color de relleno. Para una
buena medida dale una sombra suave (selecciona la herramienta SOMBRA y tira del
rectángulo).
3. Crea un bloque de texto en la parte superior de tu rectángulo. Selecciona la
HERRAMIENTA DE TEXTO y tira diagonalmente a través del rectángulo. Teclea tu texto.
Probablemente quieras ocultar ahora la capa pop·up, entonces deselecciona la
casilla del "ojo" de tu nueva capa.
4. De vuelta en la capa base (mouseoff) (haz clic en la GALERÍA DE CAPAS para definir
ésta como la capa actual), selecciona el texto que quieras que dispare el pop·up
utilizando el método usual (en la herramienta de texto). A continuación abre el diálogo
PROPIEDADES WEB (Ctrl+Shift+W) y en la pestaña MOUSEOVER selecciona la nueva
capa del menú desplegable "MOSTRAR CAPA POP·UP ". Haz clic en OK.
5. Haz una vista general y prueba tu efecto mouseover.

Si quieres que el pop·up sólo aparezca cuando haces clic, selecciona la misma opción en
la pestaña ENLACE del mismo diálogo de PROPIEDADES WEB .

Nota: La capa mouseover aparece y desaparece cuando pones y quitas el cursor del
ratón sobre el objeto disparador. Si empleas un método de clic para visualizar la capa (del
diálogo de Enlace), la capa se revela si haces clic en el objeto y se oculta cuando haces
clic en cualquier otro lugar de la página.

Fotos pop-up
Hay una segunda forma más fácil de mostrar fotos ampliadas de miniaturas que no implica
crear nuevas capas. Ver aquí (en la página 35). Este método es mejor para cuando tienes
grandes fotos pop-up, ya que las fotos pop-up no se cargan hasta que se hace clic en la
imagen de miniatura.
58 Primeros pasos

Creación de botones, banners y otros gráficos web

Web Designer es una herramienta genial para crear cualquier gráfico web para utilizar con
otros programas y otras herramientas de autoría web. Puedes dibujar estos objetos desde
el comienzo, utilizando las herramientas de dibujo o utilizar los cliparts web de la Galería de
diseños. Simplemente dibuja, diseña o importa cualquier elemento de la Galería de diseños
a una página en blanco. Manipúlalo según tus deseos, cámbiale el tamaño, el color y el
texto o fuentes, y luego exporta el elemento como PNG o JPG.

Por ejemplo, así se crea un gráfico de botón individual a partir de una plantilla:

Abre la Galería de diseños y luego la categoría Botones web (o Iconos, Banners o


la categoría que necesites).

Haz doble clic sobre un diseño para abrirlo en un nuevo documento. Edítalo según tus
deseos, puedes:

• Cambiar su tamaño (girarlo) con la herramienta de selección


• Cambiar el color con un clic en los colores apropiados en el extremo izquierdo de la
Línea de color y escogiendo "Editar".
• Cambiar el texto con la herramienta de texto

Una vez que estés satisfecho con el resultado, selecciona el


objeto y expórtalo como PNG o JPG con los botones de la
barra de página web (estos se encuentran en la barra
desplegable del símbolo de exportación HTML).

Para casi todos los gráficos, como botones, encabezados, íconos y otros objetos no
fotográficos deberías usar formato PNG. Para elementos que contienen fotos o partes
texturizadas a partir de fotos, entonces JPEG será un mejor formato. Si estás guardando
una foto girada o una con una sombra suave o borde suave, entonces deberías guardarla
en un formato PNG, pero debes considerar que este archivo será mucho más grande que
el JPEG.
Primeros pasos 59
Si haces clic en el botón CONFIGURACIÓN en el diálogo EXPORTAR ARCHIVO , accedes a un
panel de control avanzado que te permite optimizar la imagen

Aquí puedes comparar las dos versiones diferentes de la misma imagen, una junto a la
otra. Por ejemplo, puedes comparar un JPEG con una versión en PNG del mismo gráfico
para evaluar la calidad y/o el tamaño del archivo; o comparar dos imágenes PNG
optimizadas de forma diferente. Consulta el capítulo de referencia del diálogo de
exportación (en la página 324). En el ejemplo anterior, la compresión JPEG se ajustó para
obtener un tamaño de archivo óptimo.

Publicar tu página web

Necesitarás una empresa de alojamiento web para que aloje tu sitio web. Muchas veces,
los proveedores de Internet incluyen un "espacio web" como parte de la suscripción
normal. El diálogo que se muestra a continuación también contiene soluciones de
alojamiento sugeridas en la lista PERFIL. La mayoría de los proveedores también ofrecen la
posibilidad de que adquieras tu propio nombre de dominio (por ejemplo www.xara.com) y
establecer un enlace a tus páginas web.

Necesitas tres datos importantes para poder publicar tu página web;

• La dirección servidor FTP. Suele ser el mismo nombre de tu dominio, si lo tienes. Si


escoges uno de las opciones de alojamiento estándar en la lista de perfil de este
campo, se fijará automáticamente.
• Un nombre de usuario FTP:
60 Primeros pasos
• Y una contraseña correspondiente

Simplemente introduce estos detalles en la pestaña de PUBLICACIÓN del diálogo de


PROPIEDADES WEB .

La subcarpeta opcional te permite publicar tu página web en una subcarpeta. Por ejemplo,
si publicases en el dominio xara.com (obviamente no puedes hacerlo) y quisieras que la
dirección web fuese

xara.com/productos/web_designer

A continuación define una subcarpeta "productos" y el nombre de página "web_designer".


Si creas una subcarpeta de este modo, todas las páginas en tu sitio web se publicarán en
esta carpeta.
Primeros pasos 61
Una vez que has fijado tus detalles de publicación, puedes hacer clic en el símbolo
PUBLICAR en la barra superior (en la barra desplegable de exportación HTML) o
utiliza el menú "ARCHIVO " > "PUBLICAR PÁGINA WEB ".
(Nota: Primero tienes que exportar la página web)

Tu página se publicará. Una barra de progreso te mostrará el progreso de la carga de las


páginas al servidor web.

Los detalles que introduzcas en la sección DETALLES DE FTP del diálogo están asociados
con el documento actual. Puedes escoger en el diálogo si estos detalles deben o no
guardarse con el documento. También puedes utilizar el botón GUARDAR EN PERFIL para
guardar los detalles en tu ordenador con un nombre de perfil, para poder seleccionarlo
rápidamente y utilizarlo con cualquier documento que quieras publicar en esa misma
ubicación.

Lee el capítulo Diálogo de propiedades web (en la página 215) para toda la información
sobre cómo utilizar este diálogo.

Nota: Muchos servidores utilizan nombres de archivo sensibles a las mayúsculas y las
minúsculas. Así, por ejemplo, la dirección web xara.com/products.htm no es lo mismo que
xara.com/Products.htm. Para reducir la confusión y la posibilidad de errores, Web
Designer fuerza que todo los nombres de página se escriban en minúsculas y contengan
sólo caracteres permitidos. Esto significa que los espacios no están permitidos en los
nombres de página. Sugerimos utilizar un guión bajo como separador alternativo.

Importante: Si no has definido un nombre de página específico, entonces el nombre que


exportes se utilizará en todas las páginas de tu sitio web. Por ejemplo, si abres una plantilla
de página web, la exportas como "test" a tu sistema de archivos y ahora la publicas, se
publicará como test.htm en tu servidor web y las páginas adicionales serán test_2.htm,
test_3.htm etc.

Si no has definido un nombre de archivo de exportación, cuando publiques por primera


vez, se te preguntará si quieres introducir el nombre de archivo index.htm como nombre
para la primera página de tu sitio web. index.htm es el nombre usual para la primera
página de un sitio web.

Integración de películas, Flash y otros widgets

Puedes integrar fácilmente una amplia gama de widgets interactivos, vídeos de


YouTube™, diapositivas de Picasa, Google Maps, archivos Flash o cualquier objeto HTML.
Esto se realiza utilizando marcadores de posición, que son objetos gráficos (rectángulos o
fotos) en la página que serán sustituidos en la página web final por una serie de elementos
de página web como animaciones Flash o fragmentos de HTML. Para detalles completos
sobre widgets y marcadores de posición, consulta el capítulo Widgets de páginas web (en
la página 268).

La Galería de diseños contiene una selección de widgets de diversos proveedores que se


actualiza con frecuencia. Simplemente arrastra y suelta los widgets en tu página web.
62 Primeros pasos
Aparecerá una ventana de navegador web que te llevará al sitio del proveedor del widget
en donde podrás escoger y personalizar tu widget. Al finalizar, haz clic en el botón Insertar
en la parte inferior de la ventana del navegador y el widget se insertará en tu página con
una imagen de vista previa generada automáticamente. Es muy fácil.

O puedes buscar sitios de widgets tú mismo y simplemente agregar el código en tu sitio.


Aquí te presentamos un ejemplo.

Insertar un Google Map


Ve a http://maps.google.com http://maps.google.com y busca el mapa que quieras
insertar. Haz clic en el icono en la parte superior derecha de la ventana ("Enlazar") y se
abrirá una pequeña ventana con un enlace HTML que te servirá para insertar el mapa en tu
página web. Cópialo.

El enlace de arriba a la derecha abre una ventana mostrando el enlace HTML para este mapa.

Para adaptar el tamaño y otras opciones, haz clic en la opción "Personalizar".

En MAGIX Web Designer 6 ve a la HERRAMIENTA DE SELECCIÓN . Pega (Ctrl+V) el HTML en


el programa. Se lo reconocerá como un código HTML y una imagen de marcador de
posición se generará automáticamente con el código insertado. La imagen aparece en tu
página. Posiciónala en el lugar que desees y luego haz la vista previa de tu página. Ahora
verás el Google Map en tu página.

Agregar archivos Flash


Los archivos Flash (con extensión de archivo .swf) pueden insertarse también fácilmente.
Utiliza ARCHIVO >IMPORTAR para importar tu archivo Flash. O simplemente arrastra y suelta
el archivo desde el Explorador hasta tu página. Se generará una imagen de marcador de
posición que se colocará en tu página. Haz una vista previa de tu página y verás la
animación Flash en funcionamiento.

Hay una diferencia importante en el caso de los marcadores de posición para Flash:
puedes modificar su tamaño como lo desees y el Flash se modificará para adaptarse al
marcador de posición. Por otra parte, puedes optar por Flash transparente o
semitransparente, y funcionará perfectamente en tu página web. La mayoría de los otros
widgets tienen un tamaño fijo y aparecerán siempre con el tamaño predeterminado en tu
página web, independientemente del tamaño del marcador de posición.
Primeros pasos 63
Si seleccionas un archivo Flash para enlazar con un marcador de posición de esta manera,
el archivo Flash se copia en una carpeta "_archivos" junto al documento web. Si mueves o
copias el archivo web, también debes copiar la carpeta "_archivos" para asegurarte de
copiar también los archivos Flash.

Inserción de un GIF animado


Insertar un GIF animado es tan fácil como agregar un archivo Flash. Utiliza ARCHIVO >
IMPORTAR o arrastra y suelta tu archivo hasta la página. Se te preguntará si quieres
importar el gráfico en tu página (en el caso del GIF animado colocará cada frame en una
capa diferente) o si quieres colocarlo como un marcador de posición. Si sólo quieres
mostrar la animación en tu sitio, escoge la opción de marcador de posición. Una vez
insertado, haz una vista previa de tu página y verás la animación en funcionamiento.

Inserción de una película MP4 o FLV


Utiliza ARCHIVO > IMPORTAR o arrastra y suelta la película hasta la página. Aparecerá una
imagen de marcador de posición así como tu archivo de película, un reproductor de
películas se incluye en la carpeta de soporte del diseño y se utiliza para reproducir tu
película en la página web. Haz una vista previa para ver el reproductor de películas en
funcionamiento.
64 Trabajar con documentos

Trabajar con documentos

Inicio del MAGIX Web Designer 6

Para iniciar Web Designer:

• Selecciona inicio > Todos los programas > MAGIX > MAGIX
Web Designer 6.
• O doble clic sobre el símbolo de Web Designer de tu escritorio
(ilustración a la izquierda).

Esto puede variar dependiendo de la versión de Windows que estés utilizando.

Se abre la ventana de inicio de MAGIX Web Designer 6. Aquí puedes seleccionar distintas
tareas típicas que puedes realizar con MAGIX Web Designer 6. Para más información lee el
capítulo correspondiente en la Ayuda de MAGIX Web Designer 6.

Iniciar un nuevo documento

Principalmente, hay tres tipos diferentes de documentos en MAGIX Web Designer 6:


página web, foto y animación. Para abrir un nuevo documento:

Escoge ARCHIVO > NUEVO

Esto abre un submenú con varios documentos de plantilla predefinidos con los que
puedes comenzar a trabajar.

La primer plantilla por defecto se utiliza para crear el nuevo documento después de iniciar
MAGIX Web Designer 6. La plantilla de animación es la plantilla por defecto para los
documentos con animaciones.

El botón NUEVO DIBUJO de la barra de control ESTÁNDAR crea un nuevo


documento con la plantilla por defecto (shortcut "Ctrl + N").

Puedes guardar tus propias plantillas con la opción Archivo -> Guardar plantilla: ve a
"Cambiar el documento de la plantilla (en la página 331)" para más información.

Abrir un documento existente

Para abrir un documento existente:

• Arrastra y suelta un archivo. Selecciona el archivo en el explorador de Windows o en tu


escritorio y arrástralo hasta el documento abierto para importarlo o hasta cualquier otra
parte de la ventana de Web Designer para abrir el documento.
• O haz doble clic sobre un archivo de Web Designer.
Trabajar con documentos 65
• O, para abrir un archivo usado recientemente, selecciónalo en ARCHIVO ·> ABRE
RECIENTE
• O selecciona ARCHIVO ·> ABRIR (Shortcut "Ctrl+O").

• O haz clic sobre el botón ABRIR en la barra de control ESTÁNDAR .

Se mostrará el diálogo de apertura. El diálogo te permite una selección múltiple de


archivos. Haz clic y pulsa "Ctrl" para seleccionar varios archivos o haz clic y pulsa "Shift"
para seleccionar varios archivos

Al igual que en las ventanas de exploradores, puedes cambiar el archivo para que
se vea junto con sus detalles o como vista en miniatura con este botón.

Si VER VISTA PREVIA en la esquina superior derecha está activado, el archivo seleccionado
se verá en una vista previa aún más grande (esto no funciona en el caso de una selección
de varios archivos).
66 Trabajar con documentos

La ventana MAGIX Web Designer 6

Barra de título
Nombre de archivo
Barra de botones estándar
Galerías
Barra de información
Barra de herramientas
Reglas
Línea de color
Barra de estado
Indicadores de arrastre/ajuste en vivo
Barra de herramientas web

La ventana de Web Designer es similar a una hoja de papel convencional sobre un


caballete o un tablero de dibujo. El rectángulo blanco representa la hoja de papel (la carilla
o página). El borde gris es el tablero de dibujo.

Puedes cambiar el tamaño del tablero de dibujo en la pestaña OPCIONES -> TAMAÑO DE
PÁGINA (en la página 337).
Trabajar con documentos 67
Documento seleccionado y barra de título
En Web Designer puedes abrir más de un documento a la vez, pero el documento en la
ventana actual es el documento seleccionado al que se aplican todos los cambios. La
barra de título que se encuentra en la parte superior de MAGIX Web Designer 6 muestra el
nombre del documento seleccionado y si lo has cambiado desde la última vez que lo has
guardado. Una estrella después del nombre de archivo significa que hay modificaciones no
guardadas.

Barras de control
Las barras de control contienen botones que puedes usar para manejar Web Designer.
Puedes personalizar las barras de control de distintas formas como, por ejemplo,
reordenándolas o creando y ocultando barras.

La ventana por defecto muestra la barra de botones ESTÁNDAR con los botones que se
utilizan con mayor frecuencia:

Puedes personalizar la barra de control ESTÁNDAR de la misma forma que las otras barras
de control.

Estos íconos con un triángulo indicador en la esquina inferior derecha cuentan con barras
desplegables. Si colocas el cursor del ratón sobre estos íconos, verás la barra desplegable
con más íconos.

Para más información sobre la personalización de barras de control consulta el capítulo


"Personalización de Web Designer" (en la página 337).

Barra de información
Esta es una barra de control especial. Su contenido cambia según la herramienta que
selecciones. Las barras de información para algunas herramientas específicas están
descritas en sus respectivos capítulos.

Las barras de información no pueden personalizarse.

Barra de información de la herramienta de selección


68 Trabajar con documentos
Barra de herramientas principal
Esta es la barra de control que contiene inicialmente todas las herramientas
disponibles en Web Designer (ver izquierda). Puedes personalizar la barra de
herramientas o mover herramientas a otras barras de control.

Algunos de los símbolos de la barra de herramientas tienen un pequeño triángulo


indicador en la esquina inferior derecha. Esto significa que está disponible una
barra desplegable con más símbolos de herramientas. Mantén el cursor del
ratón sobre el símbolo para que aparezca la barra desplegable. Luego podrás
llevar el cursor del ratón sobre cada símbolo de la barra para ver un consejo de
herramienta con la indicación de su funcionamiento.

Haz clic sobre una herramienta para seleccionarla (algunas herramientas también
tienen shortcuts de teclado).
Para más información sobre la personalización de barras de control consulta el
capítulo "Personalización de Web Designer" (en la página 337).

Reglas
Puedes ocultar reglas, cambiar el punto cero (origen) y
utilizarlas para crear líneas guía. Para más información, lee
"Reglas (en la página 81)".

La barra de estado

Objetos seleccionados
Opciones disponibles
Indicadores
Cursor del ratón X-Y

Esto aparece en la parte inferior de la ventana. La barra de estado te informa sobre los
objetos seleccionados, opciones disponibles, indicadores de arrastre/ajuste en vivo y la
posición X/Y del cursor.

Los indicadores
Estos aparecen a la derecha de la barra de estado:

Indicador Live Drag


El indicador muestra si live drag se encuentra activado o no (por defecto está activado).
Haz doble clic sobre el indicador para activar/desactivar el live drag, todo el objeto se
mueve (no sólo el contorno), lo que facilita juzgar el efecto de la edición en tiempo real. El
dibujo con las herramientas de dibujo libre, líneas rectas, Quickshape, rectángulos y
Trabajar con documentos 69
elipses también se realiza en vivo con esta opción. Si tu ordenador no puede trabajar
con un documento particularmente complejo, esta opción se apagará automáticamente
para garantizar que la edición siga siendo rápida y eficiente.
Indicador de ajuste
Este indicador está activo cuando se ha seleccionado la opción VENTANA > AJUSTAR A
OBJETOS . Muestra cuando mueves un punto cerca de la distancia de ajuste de un
objeto. Para más información sobre el ajuste, consulta "Trabajar con objetos (en la
página 105)".

Coordenadas X-Y
Web Designer muestra las medidas relativas a la esquina inferior izquierda de la página. Sin
embargo, esto puede configurarse. Para más información, lee el capítulo Trabajar con
objetos.

Modo de pantalla normal / completa


En el modo de pantalla normal, parte de la ventana está ocupada por la barra de título, la
barra de menú y las barras de desplazamiento. Esto puede no ser conveniente si necesitas
la mayor superficie de edición posible.

Web Designer tiene otro modo de pantalla llamado "pantalla completa" que muestra una
pantalla más ordenada.

Puedes configurar cada modo de pantalla de la forma que quieras. Por ejemplo, puedes
tener tu propia configuración de las barras de control. La configuración se guarda y se
aplica cada vez que cambias entre los modos de pantalla.

Para más información sobre la personalización de barras de control consulta el capítulo


Personalización de Web Designer.

La pantalla normal / completa se controla a través de Ventana > Pantalla completa (8 del
teclado numérico).

Para ver la barra de menú en modo de pantalla completa, mueve el cursor hasta la parte
superior de la pantalla.

Abrir una segunda ventana

Es posible que quieras abrir una segunda ventana con el mismo documento para:

• obtener una vista ampliada o reducida del documento;


• ver otra parte del documento;
• obtener dos vistas de la misma área con dos calidades diferentes.

Las configuraciones de calidad están descritas más adelante.

Escoge Ventana > Nueva vista para abrir otra ventana. Puedes tener el mismo documento
abierto en diferentes ventanas.
70 Trabajar con documentos
Selección de la ventana que se quiere visualizar
En la parte inferior del menú Ventana se encuentra una lista de las ventanas. Escoge el
nombre de una ventana para verla.

Orden de múltiples ventanas


"VENTANA > ORDENAR VISTAS" > te ayuda a organizar múltiples ventanas. Cada ventana
tiene su propia barra de título pero ninguna barra de control. Haz clic sobre una ventana
para que sea la ventana actual. Con "Ctrl + F6" puedes pasar por las ventanas en
secuencia.

ORDENAR VISTAS muestra las ventanas ordenadas verticalmente o, en caso de más de tres
ventanas, como superpuestas.

Minimizar ventanas múltiples


Al minimizar una de las ventanas, se ve un icono en el fondo de la ventana principal de
Web Designer. Para volver a abrir la ventana haz doble clic.

Cambiar el valor de zoom

Muchas veces es útil aumentar la vista del documento para examinar los detalles o reducir
la vista para obtener una impresión general. Los valores por encima de 100% muestran
una vista ampliada (como si estuvieras utilizando una lupa); mientras que debajo de 100%
reducen la vista. Lo único que se modifica es la vista del documento; el tamaño del
documento y de los objetos permanece igual (el cambio de tamaño de documento se
describe más adelante). Para cambiar el valor de zoom puedes usar la herramienta de
ZOOM , el ratón o las barras de control.

Algunos valores de zoom tienen asignados shortcuts: los números 1, 2, 3, 4 colocan el


zoom entre 100% y 400%. El número 5 lo lleva al 50%.

Uso de la herramienta de zoom


Para ampliar o reducir la vista:

• Selecciona la herramienta de ZOOM de la barra principal de herramientas.


• O pulsa Alt+Z para cambiar entre la herramienta actual y la herramienta de ZOOM .
• O pulsa y mantén pulsada las teclas Alt+Z para cambiar temporalmente a la herramienta
de ZOOM (suelta Alt+Z para volver a la herramienta previa).
• O ×+F7 para seleccionar la herramienta de ZOOM .

Cambiar el valor de zoom utilizando el ratón


Si tu ratón tiene ruedita:

• Pulsa Ctrl y gira la rueda del ratón para cambiar el nivel de zoom.
Trabajar con documentos 71

También puedes configurar una tecla del ratón para el zoom. Además, puedes cambiar la
acción de la rueda del ratón entre desplazamiento y zoom en Herramientas > Opciones >
Pestaña del ratón (en la página 335). La acción opuesta está disponible pulsando la tecla
Ctrl.

Alternativamente, selecciona la herramienta de ZOOM :

• Haz clic para ampliar.


• ×+clic para reducir el valor de zoom (ver más del documento).
• Arrastra el ratón diagonalmente para crear un rectángulo. Al soltar la tecla del ratón, el
área dentro del rectángulo se ampliará para adaptarse al tamaño de la ventana.

Cambiar el zoom utilizando la barra de información/barra de control de


zoom
Hay una barra desplegable en la barra de herramientas estándar, que te brinda acceso a
las funciones de zoom, sin tener que ir a la herramienta de zoom.

Mantén el cursor del ratón sobre el símbolo del zoom de la barra de herramientas
estándar para ver la barra desplegable.

Para cambiar el zoom:

Shortcut: Ctrl + R. Haz clic en el botón ZOOM ANTERIOR . Este es el valor de zoom
antes de la configuración actual. Usar este botón te permite cambiar de un valor
de zoom a otro en el documento. Esto es útil para cambiar entre el detalle y una
vista general. El valor de zoom anterior se guarda para cada ventana. Puedes
cambiar a otra ventana y el zoom previo todavía se mantendrá.

Shortcut "1" Haz clic en el botón Zoom a 100%. El factor del zoom cambia al
100%

Shortcut "Ctrl + ×+ J". Haz clic en el botón ZOOM AL DIBUJO . La ventana muestra
todos los objetos del documento.

Shortcut "Ctrl + ×+ P". Haz clic en el botón ZOOM A LA PÁGINA. La ventana


muestra toda la página o pares de páginas.

Shortcut "Ctrl + ×+ Z". Haz clic en el botón ZOOM A LA SELECCIÓN. El objeto u


objetos seleccionados ocuparán toda la ventana.

Introduce un valor en el campo de texto. Pulsa "↵" para


implementar el cambio o selecciona algún valor de zoom
predeterminado incluyendo los mencionados
anteriormente (página, dibujo, seleccionado, anterior) en el
menú desplegable.
72 Trabajar con documentos

Desplazar el documento dentro de la ventana

La forma más rápida y fácil de desplazar el documento es utilizar el botón central del ratón
(que muchas veces es también la ruedita). Haz clic y pulsa la tecla del ratón y mueve el
ratón. Suelta el botón para volver a la herramienta anterior.

Para mover el documento dentro de la ventana también puedes:

• Usar las barras de control y las flechas a los costados de la ventana.

La visualización de las barras de desplazamiento es opcional. Escoge Ventana > Barras >
Barras deslizantes para desactivarlas

• Usa la rueda del ratón para desplazar el documento hacia arriba y hacia abajo (Shift +
rueda del ratón para izquierda a derecha)

Puedes cambiar la acción de la rueda del ratón entre desplazamiento y zoom en


Herramientas > Opciones > Pestaña del ratón. La acción opuesta está disponible pulsando
la tecla Ctrl.

• O selecciona la herramienta de DESPLAZAMIENTO de la barra de herramientas


principal (shortcut×+F8).

• O pulsa la barra espaciadora o Alt+X para cambiar entre la herramienta actual y la


herramienta de DESPLAZAMIENTO .
• O pulsa y mantén pulsada la barra espaciadora o Alt+X para cambiar temporalmente
entre la barra de DESPLAZAMIENTO (y suelta la tecla para volver a la herramienta
anterior). Después puedes usar el ratón para desplazar el documento por la ventana.

La barra de información de la herramienta de DESPLAZAMIENTO es la misma que la barra


de información de la herramienta de ZOOM (descrita anteriormente).

Cambiar el tamaño de página

Cuando se abre un nuevo documento en Web Designer el tamaño de página es 760 x 700
píxeles (SVA página web). Sin embargo, si lo deseas puedes cambiar el tamaño de página
para que sea compatible con otras resoluciones de pantalla como VGA.

1. Escoge en el menú "HERRAMIENTAS - > OPCIONES".


2. De ser necesario, escoge la pestaña de tamaño de página.
3. Selecciona el tamaño de página que deseas.

Si seleccionas PERSONALIZAR en la selección de tamaño puedes configurar un ancho y


un alto personalizado en los campos de abajo.
Trabajar con documentos 73
Cada página del documento (página web exportada) puede tener una tamaño diferente.
Con la opción TODAS LAS PÁGINAS DEL SITIO WEB CON EL MISMO TAMAÑO puedes
determinar un tamaño de página para que se aplique a todas las páginas del documento.

Puedes cambiar el alto de la página arrastrando el borde inferior de la página


con la herramienta de selección.

Páginas múltiples en el documento

Un documento de MAGIX Web Designer 6 puede tener múltiples páginas. Cada página se
exporta a una página en HTML independiente, es decir, cada documento en MAGIX Web
Designer 6 corresponde a una página web.

La página actual
Si haces clic en una página de un documento multipágina, se convertirá en la página
actual.

Debes estar situado en la página actual cuando desees introducir, duplicar o


mover páginas, como pasaremos a explicarte en las secciones siguientes.

El número de la página actual del documento se puede ver en el indicador situado


en la esquina de la página.

Introducir páginas en tu documento


La barra de herramientas estándar cuenta con una barra desplegable que te permite
añadir y eliminar páginas rápidamente.

Mantén el cursor del ratón sobre cada símbolo de la barra para ver un consejo de
herramienta para cada operación. Puedes agregar una nueva página en blanco, duplicar la
página actual o eliminarla.

Con este botón se inserta un duplicado de la


página actual.
74 Trabajar con documentos
La nueva página será la misma
que la página original
incluyendo su tamaño y
orientación, e incluirá todo su
contenido, de manera tal que la
puedas utilizar como plantilla
para nuevos contenidos.
También puedes utilizar las
opciones del menú "EDITAR >
PÁGINAS "

Mover páginas dentro del documento


Si deseas modificar la ubicación de una página dentro del documento, puedes hacer así.

Para mover la página actual:

• Selecciona "EDICIÓN > PÁGINAS > MOVER PÁGINA HACIA ARRIBA" para cambiar la página
actual por la anterior.
• Selecciona "EDICIÓN > PÁGINAS > MOVER PÁGINA HACIA ABAJO" para cambiar la página
actual por la posterior.

Estas opciones de menú serán desactivadas si estás en la primera o en la última página


del documento respectivamente.

Eliminar páginas de tu documento


Para eliminar la página actual de tu documento, selecciona "EDICIÓN > PÁGINAS > BORRAR
PÁGINA ACTUAL" . La página actual y todos sus contenidos serán eliminados.

Navegar entre páginas


Además de los métodos usuales para moverse dentro de un documento (como la barra
deslizante y la ruedecilla del ratón), existen otras formas de navegar a través de las
páginas:

Hacia arriba: se mueve hacia arriba del documento (retrocede a la página anterior). La
cantidad de desplazamiento depende de tu nivel de zoom. Cuanto más alejado estés del
documento (zoom out), más grande será el desplazamiento.

Ctrl + Re. Pág. (page up): va hacia el centro de la página anterior.

Hacia abajo: se mueve hacia abajo del documento. La cantidad de desplazamiento


depende de tu nivel de zoom. Cuanto más alejado estés del documento (zoom out), más
grande será el desplazamiento.

Ctrl + Av. Pág: va hacia el centro de la página anterior.


Trabajar con documentos 75
O haz clic en la flecha que apunta hacia arriba o hacia abajo en la
barra de estado de acuerdo a dónde te quieres desplazar:

La barra de estado también es útil para saber qué página/s estás visualizando
actualmente.

Nota: todos estos movimientos son relativos a las páginas que estés visualizando, no a la
página actual.

Galería de páginas y capas


También puedes utilizar la galería de Páginas y capas para administrar convenientemente
las páginas en tu documento. Te permite ver, añadir, duplicar, eliminar, reorganizar y
renombrar páginas desde una sola vista. Para más información, consulta Galería de
páginas y capas (en la página 275).

Guardar el documento

Esta sección explica cómo guardar los documentos en el formato de Web Designer (su
formato nativo). Para más detalles sobre exportar documentos en otro formato, lee el
capítulo "Importación y exportación (en la página 316)".

Te recomendamos que siempre guardes los documentos de forma regular. Si no lo haces,


es posible que lo lamentes si hay un corte de electricidad repentino o si tu ordenador tiene
una falla irreparable y perderás muchas horas de trabajo invertidas en un documento
complicado. Asegúrate de que la función de copia de seguridad automática esté activada
para que se realicen copias regulares de los documentos mientras trabajas. Consulta la
sección Copias de seguridad automáticas (en la página 78) a continuación para más
detalles.

Opción Guardar (en el menú Archivo)


(Shortcut Ctrl+S o clic sobre el botón Guardar en la barra de control ESTÁNDAR ).

Esta opción te ofrece una forma rápida de volver a guardar el documento con el mismo
nombre de archivo. La opción no está disponible salvo que hayas realizado cambios y
todavía no los hayas guardado.

Para un nuevo documento que todavía no se ha guardado en disco, la opción actúa como
"Guardar como" (descrita a continuación).
76 Trabajar con documentos
Guardar como (en el menú Archivo)
Esta ocpión abre un diálogo que te permite guardar el documento con un nuevo nombre o
en otro directorio. Esta opción es útil para realizar copias de seguridad de Web Designer.

Guardar todo (en el menú Archivo)


Esto actúa como una serie de comandos de GUARDAR o GUARDAR COMO para todos los
documentos que se encuentran abiertos actualmente.

Directorios de compatibilidad

Algunos documentos, que se utilizan para crear páginas web, tienen archivos externos de
referencia porque éstos no pueden ser integrados al archivo de diseño .web. Por ejemplo,
un archivo Flash (swf) de tu página web. Debes mantener el archivo Flash junto al archivo
de diseño porque sino cuando quieras exportar la página web ésta no funcionará de forma
correcta. Otra razón por la que es importante mantener ambos archivos juntos es para
cuando quieras enviar el diseño a alguien o para cuando quieras transferirlo a otro
ordenador.

MAGIX Web Designer 6 ofrece un directorio opcional de compatibilidad para los archivos
externos que se encuentra a la derecha del archivo de diseño.
Trabajar con documentos 77
Nombres para el directorio de compatibilidad
El archivo de diseño y su directorio de compatibilidad correspondiente se identifican
fácilmente porque tienen el mismo nombre. El directorio de compatibilidad para
"miSitio.web" se llama "miSitio_web_archivos". Si cambias el nombre de un archivo de
diseño o lo copias o mueves de sitio, no te olvides de cambiar el nombre del directorio de
compatibilidad (si existe uno). Y si deseas enviar un archivo de diseño, recuerda que debes
mandar también el directorio de compatibilidad.

Cuando cargues un diseño que tiene un directorio de compatibilidad y luego escoges la


opción "Guardar como", MAGIX Web Designer 6 copiará todo el directorio de
compatibilidad también (si existe uno).

Contenido del directorio de compatibilidad


Si utilizas el marcador de lugar (en la página 212) del diálogo PROPIEDADES WEB para
insertar una referencia a un archivo externo en tu diseño de la página web, MAGIX Web
Designer 6 copiará automáticamente ese archivo al directorio de compatibilidad. Si no
existe el directorio de compatibilidad se creará uno.

Ten en cuenta que si realizas modificaciones al objeto del marcador posteriormente, el


archivo original no se borrará automáticamente del directorio de compatiblidad. Si no
necesitas más ese archivo, deberás eliminarlo manualmente.

También puedes copiar manualmente archivos al directorio de compatibilidad. MAGIX Web


Designer 6 no eliminará ningún archivo, independientemente de si éstos aparecen en el
diseño o no. Esto es así porque hay muchas formas distintas de colocar referencias a
archivos externos en el archivo de diseño. Por ejemplo, se puede insertar un código
complejo de HTML en el diseño que contenga una referencia a un archivo externo de tu
directorio de compatibilidad. O también se puede tener un archivo externo que contenga
una referencia a otro archivo externo. No hay forma de que MAGIX Web Designer 6 pueda
estar seguro de que el archivo no va a ser utilizado en la página web, por eso no los
elimina.

Exportación de páginas web con directorios de compatibilidad


Cuando exportas un documento de página web, se copiarán todos los archivos de
directorio de compatibilidad a la carpeta que contenga todas las imágenes de tu página
web. Si exportas "miSitio.web" a "index.htm", los archivos de la carpeta
"miSitio_web_archivos" se copiarán a la carpeta "index_htm_archivos".

Cerrar el documento
Para cerrar el documento:

• Escoge ARCHIVO > CERRAR


• O pulsa Ctrl+F4
78 Trabajar con documentos
• O haz clic sobre la X más pequeña de las dos que se encuentran en la esquina superior
derecha.

Nota: en la mayoría de los ordenadores, la X para cerrar el documento es más pequeña


que la X que se encuentra arriba. La X roja más grande cierra el programa.

Copias de seguridad automáticas

MAGIX Web Designer 6 guardará como opción copias de seguridad de tus documentos
abiertos mientras trabajas. Esto te ayudará a evitar que pierdas tu trabajo en el caso de un
falla eléctrica o de un cierre anormal del programa. También es útil si deseas volver a una
versión anterior de tu documento.

Para activar o desactivar copias de seguridad automáticas, abre el diálogo


HERRAMIENTAS >OPCIONES y escoge la pestaña COPIAS DE SEGURIDAD .

Copias de seguridad de documentos abiertos


Para activar las copias de seguridad, selecciona este campo y escoge cómo te gustaría
que se hicieran las copias de seguridad. El periodo sugerido es de 10 minutos, lo que
significa que un documento abierto se guardará si han pasado más de 10 minutos desde
que se ha guardado por última vez (o desde que se creó o abrió el documento).

Ten en cuenta que una vez que el periodo configurado haya pasado desde la última copia
de seguridad, la próxima copia de seguridad se realizará cuando el programa haya estado
inactivo durante al menos 15 segundos. Esto evita que se interrumpa tu trabajo y que el
documento se guarde mientras se lo está modificando. En el uso normal, es poco
probable que no haya periodos inactivos de 15 segundos o más, por lo que permite
Trabajar con documentos 79
realizar una copia de seguridad poco después. De todas formas, si estás editando
activamente durante un periodo extendido de tiempo es posible que transcurra bastante
más tiempo que el configurado entre dos copias de seguridad.

Cuando se realiza una copia de seguridad, verás una barra de progreso en la parte inferior
de la ventana de MAGIX Web Designer 6 mientras se finaliza el procedimiento.

Ubicación de la copia de seguridad


Utiliza el botón Explorar si quieres cambiar la carpeta en la que están guardadas tus copias
de seguridad.

Puedes acceder a los documentos de copia de seguridad en cualquier momento en la


opción de menú ARCHIVO >ABRIR RECIENTE >COPIAS DE SEGURIDAD. Esto abre un diálogo
de archivos con la carpeta de copias de seguridad, de forma que puedas navegar, abrir o
eliminar cualquiera de los archivos de copia de seguridad.

Revisiones
Por defecto, se guardan 10 revisiones de cada diseño en tu carpeta de copias de
seguridad, pero puedes escoger cambiar este número en el campo de revisiones. Las
revisiones que excedan la cantidad establecida, se eliminarán automáticamente. Cada
archivo de copia de seguridad recibe el nombre del documento del que se ha tomado,
junto con la fecha y hora en que se ha realizado la copia de seguridad.

ADVERTENCIA: Ten en cuenta que si tienes múltiples documentos que comparten el


mismo nombre de archivo en diferentes carpetas en tu ordenador, sus copias de
seguridad también compartirán el nombre en la carpeta de copias de seguridad. Por lo
tanto, intenta usar nombres de archivo únicos para tus diseños con el propósito de evitar
que las copias de seguridad de un diseño sobrescriban otras con el mismo nombre.

Documentos sin título


Las copias de seguridad de los documentos que has creado y que no has guardado se
almacenarán con el nombre "Untitled" seguido de un número y la fecha/hora. Este nombre
y número corresponden a los que se muestran en la barra de título cuando estás editando
documentos sin guardar.

ADVERTENCIA: Como los documentos sin guardar se denominan Untitled1, Untitled2,


etc., las copias de seguridad de estos documentos se sobrescriben relativamente rápido.
Por lo tanto, deberías guardar los documentos importantes con un nombre exclusivo de tu
elección para poder identificar fácilmente las copias de seguridad de ese documento en el
directorio de copias de seguridad.

Guardar copias de seguridad de documentos abiertos al cerrar el


programa
En el diálogo Opciones de la pestaña Copias de seguridad puedes activar COPIA DE
SEGURIDAD AUTOMÁTICA Y RESTAURACIÓN . Cuando esta opción está activada, al cerrar
MAGIX Web Designer 6, no se te preguntará si quieres guardar los documentos
80 Trabajar con documentos
modificados que todavía están abiertos. Por el contrario, se realiza una copia de seguridad
de todos los documentos abiertos en la carpeta de copias de seguridad y el programa se
cierra. Luego, al iniciar nuevamente el programa, los mismos documentos se cargan
automáticamente para que puedas continuar trabajando desde donde los has dejado.

Recuperación de cierres anormales del programa


Si has activado las copias de seguridad automáticas y el programa se cierra de forma
anormal (debido a un corte de electricidad, por ejemplo), el programa debería detectarlo al
reiniciarse. De ser así, te ofrecerá la posibilidad de restaurar la copia de seguridad más
reciente de cada documento que se encontraba abierto al momento de la última copia de
seguridad.

El cierre anormal no se detectará si no se ha realizado ninguna copia de seguridad desde


el último cierre normal del programa.

Copias de seguridad al cerrar el sistema


Si cierras Windows sin cerrar el programa primero, todos los documentos abiertos se
guardarán en la carpeta de copias de seguridad aun cuando la opción "Guardar copias de
seguridad de documentos abiertos al cerrar el programa" no esté activada. Esto permite
que el cierre del sistema se realice sin que MAGIX Web Designer 6 lo interrumpa para
preguntarte acerca de los documentos modificados sin guardar. La próxima vez que
inicies el programa, se te preguntará si quieres restaurar o no los documentos que estaban
abiertos al momento del cierre del sistema.

Recuperación de copias de seguridad


Puedes acceder a las copias de seguridad de tus documentos con Archivo>ABRIR
RECIENTES ->COPIA DE SEGURIDAD . Esto abre un diálogo de archivos con la carpeta de
copias de seguridad, de forma que puedas navegar, abrir o eliminar cualquiera de los
archivos de copia de seguridad. Es una buena idea utilizar este diálogo para limpiar viejas
copias de seguridad de forma periódica.

Ten en cuenta que cuando cargas un documento de copia de seguridad no se asocia


automáticamente con el archivo de diseño del que se ha realizado la copia de seguridad.
Se trata como un documento independiente con sus propios derechos. Por lo tanto, si
decides conservar la copia de seguridad deberías usar ARCHIVO >GUARDAR COMO para
guardarlo en algún lugar con un nombre adecuado.

Cuadrícula de pantalla

Para ayudarte a diseñar tu documento, MAGIX Web Designer 6 puede mostrar una
cuadrícula en la pantalla. (Esta cuadrícula se ve solamente en la pantalla y nunca se
imprime). La cuadrícula te ayuda a alinear objetos (similar a utilizar un papel cuadriculado
como ayuda para dibujar).

Ventana > Mostrar cuadrícula (shortcut de teclado #) activa y desactiva la cuadrícula.


Trabajar con documentos 81

También puedes escoger la opción Ventana > Ajustar a cuadrícula. En este caso, los
puntos de cuadrícula actúan como imanes y, al mover objetos, estos se ajustan al punto
de cuadrícula más cercano.

Para detalles sobre el ajuste de objetos, lee el capítulo Trabajar con objetos (en la página
105).

El tipo de cuadrícula (isométrica/rectangular), el punto 0,0 (el origen) y el espaciado entre


los puntos de la grilla se configuran en la pestaña CUADRÍCULA Y REGLA del diálogo de
opciones (ilustración a la derecha). Los cambios realizados sólo se aplicarán al documento
seleccionado.

El capítulo Personalización de Web Designer contiene detalles del diálogo de Opciones.

Esto te permite utilizar la configuración más apropiada para ese documento. El


procedimiento para cambiar el tipo y el espaciado se describe a continuación.

Puedes mover la cuadrícula de acuerdo a la página, moviendo el punto 0,0 de las reglas
(se describe más adelante).

Reglas

Las reglas están desactivadas por defecto. Para activarlas:

• Pulsa Ctrl + L.
• O selecciona VENTANA > BARRAS > REGLAS .

Web Designer utiliza las reglas para:


82 Trabajar con documentos
• que puedas ubicar la parte de la página que estás viendo;
• mostrar la posición X-Y actual del cursor;
• aplicar líneas guía. Si la opción VENTANA > AJUSTAR A CUADRÍCULA está activada, las
líneas guía se ajustan a las divisiones de las reglas. (Para más información sobre líneas
guía, lee el apartado guías y líneas guía en el capítulo Trabajar con objetos (en la página
105).)

Cuando creas o cambias el tamaño de objetos, puedes utilizar las reglas para controlar el
tamaño. También puedes utilizar la herramienta de SELECCIÓN para un trabajo más exacto
- lee Selección de objetos para más información.

Las reglas pueden verse sobre el borde izquierdo y el borde superior de la ventana. Una
línea punteada sobre cada regla sigue la posición actual del cursor.

El capítulo Personalización de Web Designer contiene detalles del diálogo de Opciones.

Las unidades y números de las divisiones de las reglas son los mismos configurados para
personalizar la cuadrícula en pantalla. Estos valores se configuran utilizando la pestaña
"Cuadrícula y regla" del diálogo OPCIONES (descrito más adelante). Las unidades actuales y
los factores de cambio de tamaño se visualizan en la esquina superior derecha de la regla.

Mostrar / ocultar reglas


Escoge VENTANA > BARRAS > REGLAS (shortcut Ctrl + Shift + R) para activar y desactivar las
reglas. Cualquier cambio se aplica a la ventana actual y las ventanas subsecuentes que
abras. No afecta a otras ventanas abiertas.

Cambiar los puntos cero de las reglas


Muchas veces es fácil medir los objetos si alineas el punto 0,0 de la regla con el objeto.
Para mover el punto 0,0 arrastra el cuadrado de la intersección de ambas reglas.

Puedes arrastrar vertical u horizontalmente a lo largo de las reglas o hasta cualquier otra
parte de la ventana de edición de Web Designer. A medida que lo hagas, una línea
punteada te mostrará la nueva posición.

Esto también mueve el origen de la cuadrícula de forma que las divisiones de la regla
siempre se encuentren alineadas con la cuadrícula.
Trabajar con documentos 83
También puedes mover el punto cero desde la pestaña CUADRÍCULA Y REGLA del diálogo
de opciones (descrito a continuación)

Calidad de imagen

Hay cinco configuraciones de calidad disponibles en el menú VENTANAS >CALIDAD que


afectan la forma en que el documento aparece en MAGIX Web Designer 6:

• Sólo contorno. Ahora, con antialiasing completo para una mayor calidad de visualización
de la pantalla
• Contornos con pasos de transición
• Color total (sin antialiasing)
• Alta calidad (antialising total y suavizado de imagen)
• Muy alta calidad (el mejor antialiasing de la industria. La nueva visualización de fotos
bicúbica aumenta la calidad de fotos reducidas).

COLOR TOTAL muestra el documento a color, pero con el antialiasing desactivado.

La configuración CONTORNO muestra solamente el contorno de las formas (se dibujan


como wire frames). Esto facilita la selección de objetos que se encuentran detrás de otros
objetos.

La configuración de calidad no tiene efecto en la forma en que el documento exporta o


imprime, excepto en el caso de exportaciones de mapas de bits que utilizan la
configuración de calidad actual.

Galerías

MAGIX Web Designer 6 usa galerías para suministrar acceso conveniente a bibliotecas
externas de contenido como plantillas, fuentes, colores, cliparts, atributos de líneas y
mapas de bits/fotos. Esta sección de la ayuda suministra información general sobre
características que son comunes a múltiples galerías. Las secciones individuales describen
características específicas a una galería en particular.

Capa
Frame
Mapa de bits
Línea
Diseños

Los DISEÑOS , RELLENOS y GALERÍAS DE LÍNEAS te permiten escoger entre diferentes


plantillas y estilos suministrados con MAGIX Web Designer 6 .
84 Trabajar con documentos
La GALERÍA DE MAPAS DE BITS te muestra los mapas de bits y fotos que estás utilizando
en el documento actual.

La GALERÍA DE PÁGINAS Y CAPAS te muestra y te permite manipular las páginas de tu


documento y las capas dentro de cada página.

Algunas galerías se describen en detalle más adelante en el manual.

Ver una galería


Para abrir una galería:

• Selecciona la barra de control GALERÍAS (no todas las galerías están disponibles desde
esta barra, sino solamente las que se utilizan con mayor frecuencia).
• O escoge "HERRAMIENTAS - > GALERÍAS", en donde encontrarás todas las galerías
disponibles.

Fijación de galerías
Es posible fijar una o más galerías a cada lado de la ventana de Web Designer.

Un ejemplo de una galería fijada. También es posible cambiar el tamaño de la galería para que
ocupe más o menos espacio.
Trabajar con documentos 85
Fijar una galería
Para fijar una galería:

1. Abre una galería tal como se ha descrito anteriormente.


2. Arrastra la galería hasta la izquierda o derecha de la pantalla.
3. Si lo deseas, reitera el proceso para otras galerías.

Desfijar una galería


Un clic sobre un ícono de la barra de control de GALERÍAS eliminará la galería de la
pantalla. Pero con otro clic, la galería volverá a su posición fija. Para desfijar la galería por
completo, simplemente arrastra la galería desde el lado de la pantalla y desfijará
automáticamente.

Reorganizar galerías
Si has fijado más de una galería de un lado, las galerías compartirán una columna. Puedes
cambiar el tamaño de las galerías como lo desees, así como también arrastrar las galerías
hacia arriba o hacia abajo para cambiar el orden.

Uso de las galerías


Para plegar o desplegar una sección en una galería:

• Haz clic sobre el icono PLEGAR/DESPLEGAR .


• O haz doble clic sobre el título de la sección.
• O haz clic derecho sobre una sección para ver el menú pop-up. Selecciona
PLEGAR/DESPLEGAR sección. El menú pop-up también tiene opciones para abrir la
sección siguiente o la anterior.

La ilustración muestra la galería desplegada. Otras galerías son similares.

Los botones de la parte superior dependen de la galería (p.ej. RELLENO y TRANSP son
opciones específicas de la GALERÍA DE MAPA DE BITS .) De todos modos, la mayoría de las
galerías presenta estos botones:

APLICAR inserta el ítem seleccionado de la galería. Haz clic sobre un ítem para
seleccionarlo.
86 Trabajar con documentos
OPCIONES abre un menú en donde puedes escoger:

• BUSCAR :
se describe más adelante en la búsqueda de un nombre de ítem.
• ORDENAR :
se describe más adelante en el orden de los ítems en una galería.
• PROPIEDADES : permite controlar el tamaño de los iconos y la cantidad de información
que se muestra en la galería.
• Añadir (galerías de clipart, rellenos y fuentes): descrito a continuación en añadir ítems en
una galería.
• ELIMINAR (galerías de clipart, rellenos y fuentes): descrito a continuación en eliminar
secciones de una galería.

Seleccionar ítems
Para seleccionar un ítem:

• Haz clic sobre un ítem para seleccionarlo.


• O haz clic sobre un ítem, después ×+clic sobre otro ítem: todos los ítems entre los dos
puntos se seleccionarán.
• O Ctrl+clic para añadir ese ítem a la selección.

Reordenar ítems en la galería


En algunas galerías, "OPCIONES - > ORDENAR" abre un campo de diálogo. Puedes ordenar
por nombre y, dependiendo de la galería, por otros criterios. Los controles de clave
primaria controlan el orden inicial. Para algunos parámetros como tipo o longitud de
nombre, es posible que haya dos o más archivos con el mismo tipo o longitud de nombre.
Estos archivos pueden ordenarse usando la clave secundaria.

Buscar un nombre de ítem


Puedes buscar, por ejemplo, todos los nombres conteniendo la palabra "rojo":

1. Escoge Opciones > Buscar.


2. Introduce ROJO en el campo de texto.
3. Selecciona BUSCAR NOMBRES Y CONTRASEÑAS
(para buscar sólo en los nombres, color, etc.) o
BUSCAR TODA LA INFORMACIÓN (para buscar en
todos los nombres y palabras clave disponibles en
algunas galerías).

Añadir a la galería
Es posible que quieras añadir ítems extra para estas galerías. (sólo es posible en las
galerías de DISEÑOS & RELLENOS ). Para esto:

1. Copia los archivos que quieres añadir a un nuevo directorio usando el explorador de
Windows.
- Para la GALERÍA DE CLIPARTS , estos archivos pueden ser cualquier tipo de la
amplia gama de archivos de vectores o mapas de bits.
- Para la GALERÍA DE RELLENOS puede ser cualquiera de los formatos de mapa de
bits compatibles con Web Designer (listados en importación y exportación (en la
página 317)).
Trabajar con documentos 87
2. En cada galería, pulsa el botón "DISEÑOS DE DISCO /RELLENOS". Se abrirá una ventana
de diálogo.
3. Usa este diálogo para seleccionar el directorio que quieres añadir.
4. Haz clic en "AÑADIR" . Esto crea una nueva sección en la galería.

Si después quieres añadir más ítems a la carpeta:

1. Copia los archivos nuevos en la carpeta existente.


2. En la galería, pulsa el botón "DISEÑOS DE DISCO/RELLENOS" . Se abrirá una ventana de
diálogo.
3. Usa este diálogo para seleccionar el directorio que quieres añadir.
4. Haz clic en "ACTUALIZAR" para actualizar la sección en la galería.

Eliminar secciones de una galería


Para eliminar una sección de una galería (válido sólo para las galerías de CLIPARTS y
RELLENOS ):

1. Haz clic sobre el título de la sección o secciones que quieres eliminar.


2. Haz clic en "ELIMINAR" .

Si posteriormente quieres volver a utilizar la sección, añade la carpeta a la galería (descrito


anteriormente).

Deshacer y rehacer

¿Qué son las funciones deshacer y rehacer?


Todos cometemos errores o cambiamos de parecer. Web Designer facilita la corrección
de errores o de cambios no deseados. Todas las acciones que haces se guardan en una
"lista de deshacer". Esto te permite deshacer no sólo la última operación, sino volver hacia
atrás deshaciendo varias operaciones. Por lo tanto, puedes experimentar libremente
sabiendo que siempre puedes eliminar lo que no se ve bien.

La función deshacer
Deshacer cancela el efecto de la última operación. Para deshacer una
operación:

• Haz clic sobre el botón DESHACER de la barra de control ESTÁNDAR .


• O escoge Editar > Deshacer (la formulación exacta te dice cuál es el paso deshacer, por
ejemplo, deshacer escala).
• O pulsa Ctrl+Z.
• O pulsa la tecla de coma (en cualquier herramienta salvo la herramienta de TEXTO ).

Puedes repetir la función deshacer para seguir retrocediendo por la secuencia de las
operaciones previas.
88 Trabajar con documentos
La función rehacer
Rehacer cancela la función deshacer anterior. Para rehacer la última
operación:

• Haz clic sobre el botón REHACER de la barra de control ESTÁNDAR .


• O escoge Editar > Rehacer (la formulación exacta te dice cuál es el paso rehacer, por
ejemplo, rehacer escala).
• O pulsa Ctrl+Y.
• O pulsa la tecla de punto (en cualquier herramienta salvo la herramienta de TEXTO ).

La función rehacer sólo puede aplicarse inmediatamente después de la función deshacer.


No puedes rehacer tras modificar el documento (por ejemplo, moviendo o añadiendo un
objeto).
Trabajar con objetos 89

Trabajar con objetos

La herramienta de selección

La herramienta de SELECCIÓN es la herramienta principal para seleccionar,


mover, girar y cambiar el tamaño de los objetos. Generalmente se utiliza más
que cualquier otra herramienta y es la herramienta central para manipular
documentos.

Dimensiones de selección
% de controles de tamaño
Bloquear relación de aspecto
Girar e inclinar
Voltear
Escalar anchos de línea
Aplicar nombres

Para utilizar la herramienta de SELECCIÓN:

• Haz clic sobre la herramienta de SELECCIÓN en la BARRA DE HERRAMIENTAS PRINCIPAL .


• O pulsa "Alt + S", "V" o "F2".

Cuando cambies a la HERRAMIENTA DE SELECCIÓN , si hay objetos seleccionados dentro de


un grupo u otro tipo de objeto compuesto, se seleccionará el objeto principal (grupo) en su
lugar.

Puesto que la herramienta de SELECCIÓN es la herramienta más utilizada, existe un


shortcut adicional para permitirte cambiar a esta herramienta para realizar una selección u
otra operación y volver rápidamente a la herramienta anterior. Si estás utilizando otra
herramienta puedes cambiar fácilmente a la herramienta de SELECCIÓN:

• Pulsa y libera Alt+S para cambiar a la herramienta de SELECCIÓN. Pulsa otra vez para
regresar a la herramienta anterior.

Seleccionar objetos
Para seleccionar un solo objeto haz clic en cualquier parte visible del objeto.

Cambiar selección de objetos


Una vez que el objeto esté seleccionado, puedes utilizar las siguientes teclas para cambiar
la selección:

• Fin selecciona el objeto de atrás.


90 Trabajar con objetos
• Inicio selecciona el objeto de adelante.
• "Tab" selecciona el objeto siguiente hacia atrás.
• ×+Tab selecciona el objeto siguiente hacia adelante.

Los objetos del frente y el fondo se describen en Trabajar con objetos (en la página 88).

Marco de selección
Para seleccionar varios objetos, pulsa y mantén pulsada la tecla del ratón. Al arrastrar el
ratón se dibuja un rectángulo de selección y todos los objetos dentro del rectángulo
quedarán seleccionados.

Algunos programas de dibujo llaman a este rectángulo "marco de selección".

Si hay algún objeto que no te permite dibujar un rectángulo porque el objeto se mueve,
pulsa "×" mientras arrastras el rectángulo de selección.

Ampliar selección
Para seleccionar objetos adicionales:

• ×+clic sobre ellos.


• O ×+arrastrar el ratón. Esto dibuja un rectángulo de selección y añade los objetos
dentro del rectángulo a la selección.

Seleccionar bajo
Pulsa Alt para seleccionar objetos que se encuentran debajo de otros objetos. Con Alt+clic
puedes pasar por varios objetos superpuestos.

Selección interna
"Ctrl + clic" sobre el objeto que quieres seleccionar de adentro. Esto se utiliza para
seleccionar un objeto que se encuentre dentro de un grupo. Te permite, por ejemplo,
editar un contorno de un objeto dentro de un grupo sin tener que desagruparlo. Los otros
objetos no se modifican.

Ten en cuenta que algunas operaciones no se pueden realizar si hay un objeto interno
seleccionado. Por ejemplo, el marco de selección y la copia con clic derecho no funcionan
para seleccionar dentro.

Mover objetos seleccionados debajo o dentro


Si necesitas mover un objeto seleccionado que se encuentra debajo de otros o dentro de
un grupo, no podrás simplemente arrastrarlo, porque se seleccionará y arrastrará otro
objeto. Para evitar esto, pulsa "Ctrl + Alt" y comienza a arrastrar. Esto arrastrará siempre el
objeto seleccionado. Puedes soltar las teclas una vez que hayas comenzado a arrastrar.

O puedes utilizar las teclas de flechas de tu teclado para desplazar el objeto.


Trabajar con objetos 91
Selección y capas
No puedes seleccionar objetos que se encuentran en capas bloqueadas o invisibles.

Consulta "Galería de páginas y capas (en la página 275)" para obtener más detalles sobre
capas.

Seleccionar todos los objetos


Para seleccionar todos los objetos:

• Escoge Edición > Seleccionar todo.


• O pulsa Ctrl+A.

Deseleccionar un objeto
Para deseleccionar todos los objetos:

• Haz clic en cualquier lugar sin usar del documento.


• O escoge Edición > Borrar selección.
• O pulsa Esc.

Para deseleccionar un objeto entre muchos:

• ×+clic sobre el objeto. Esto deselecciona el objeto. Los otros objetos permanecen
seleccionados.

Marcadores de selección
Cada objeto seleccionado muestra un marcador de selección para señalar que está
seleccionado. Esto es un recordatorio muy útil cuando seleccionas y deseleccionas varios
objetos.

Barra de estado
La barra de estado que se encuentra en la parte inferior de la ventana también describe lo
que está seleccionado.

Controles deslizantes de límites de selección


Los controles deslizantes de límites de selección te permiten cambiar el tamaño y extender
los objetos seleccionados. Para leer más información sobre este tema ve a Extender o
reducir objetos. Varios clics sucesivos sobre un objeto cambia entre mostrar los controles
de límite de selección y rotación.
92 Trabajar con objetos

Tab
Si hay un objeto seleccionado, pulsar Tab y ×+Tab cambiará la selección al objeto anterior
y siguiente en el documento.

Mover objetos

Para deslizar un objeto sobre la página

1. Escoge la herramienta de SELECCIÓN.


2. Arrastra el objeto hasta la posición deseada. Pulsa Ctrl para limitar la dirección de
movimiento a uno de los ángulos de restricción.

Puedes definir los ángulos de restricción. Consulta el capítulo Personalización de Web


Designer.

Pulsa Ctrl+Alt y podrás arrastrar el objeto seleccionado aunque el cursor no se encuentre


encima de él. Esto es útil cuando el objeto seleccionado se encuentra oculto tras otro
objeto o cuando es parte de un grupo. Suelta Ctlr+Alt después de comenzar a arrastrar el
objeto, salvo que quieras restringir el movimiento.

También puedes mover objetos usando las teclas de flecha. Esto se describe en la
próxima página.

Soltar una copia


Durante un movimiento (y mientras pulsas la tecla izquierda del ratón) haz clic derecho o
pulsa + del teclado numérico para soltar una copia del objeto. El objeto original no se
mueve. Puedes hacer esto todas las veces que quieras para crear una serie de objetos
duplicados.

O, de la misma forma, pulsa la tecla derecha del ratón y arrastra. Esto arrastrará
inmediatamente una copia del objeto. Haz clic izquierdo para dejar una copia en la
posición actual del ratón.
Trabajar con objetos 93
Rellenos
Generalmente, si mueves un objeto, su relleno también se moverá:

Movimiento normal de izquierda a derecha de un objeto con relleno lineal.

Esto también es aplicable al girar, doblar, extender o cambiar el tamaño de objetos.

Web Designer también puede mover el objeto pero no el origen del relleno. Para hacer
esto, pulsa la tecla - en el teclado numérico durante el movimiento.

El mismo movimiento pero pulsando la tecla - (menos) durante el arrastre.

Desplazar objetos
Generalmente puedes mover un objeto levemente utilizando las teclas de flecha . (A
veces, estas teclas tienen otros usos, especialmente en la herramienta de TEXTO .)

El desplazamiento no se ve afectado por el ajuste magnético ni de cuadrícula. (Los ajustes


se describen más adelante).

Modificadores de desplazamiento
Para modificar la distancia de desplazamiento, utiliza estas combinaciones de teclas
mientras usas las flechas:

• Ctrl 5 veces la distancia normal


• × 10 veces la distancia normal
• Ctrl + × l/5 de la distancia normal
• Alt 1 píxel
• Alt + × 10 píxeles

Puedes cambiar la distancia normal de desplazamiento en la pestaña GENERAL de


Herramientas > Opciones. (Consulta el capítulo Personalización de Web Designer (en la
página 334).

El desplazamiento funciona en la mayoría de las herramientas.


94 Trabajar con objetos
Cortar, copiar y pegar
Estas funciones te permiten mover o copiar un objeto en el mismo documento o entre
diferentes documentos. El procedimiento es:

1. Selecciona el objeto.
2. Para eliminar el objeto, escoge "EDICIÓN > CORTAR " (o "Ctrl + X"). Para copiar el
objeto pero no eliminarlo, escoge "EDICIÓN > COPIAR " (o "Ctrl + C"). Las dos
opciones colocan el objeto (o una copia del objeto) en el portapapeles.
3. Selecciona "EDICIÓN > PEGAR " (o "Ctrl + V" o "Insertar"). Esto pega el contenido del
portapapeles en el documento.

Ten en cuenta que si todos los objetos que copias se encuentran en la misma capa,
después podrás pegar esos objetos en cualquier capa si primero lo haces en la capa
actual. La capa desde la que se copian los objetos se ignora en este caso.

Sin embargo, si los objetos que copias se encuentran en varias capas diferentes,
entonces la estructura de capas se mantiene al pegar. Los objetos se pegan en la misma
capa desde la que se copiaron, sin importar cuál capa es actual.

Esto te permite copiar los datos en capas dentro de un documento o a un documento


diferente. Cualquier capa que falte en el documento de destino se crea automáticamente
con esta operación. Entonces, por ejemplo, si copias un botón mouse over, que tiene un
objeto en la capa MouseOff y otro objeto en la capa MouseOver, en un nuevo documento,
se crearán las capas Mouse Off y MouseOver si no existen todavía y los objetos del botón
se pegarán en ellas.

"Ctrl + ×+ V" pega el contenido del portapapeles en la misma posición X-Y de donde se
ha cortado o copiado. Esto sólo se aplica a los objetos cortados o copiados desde dentro
de Web Designer. Los objetos importados desde otros programas siempre se pegan en el
centro de la vista actual.

El objeto permanece en el portapapeles, por lo que puedes pegar el mismo objeto muchas
veces.

Si se provee una serie de formatos en el portapapeles, <programname> te mostrará un


diálogo titulado PEGADO ESPECIAL para que puedas elegir el formato en el que deseas
pegar el objeto. Por ejemplo, puedes pegar un texto sin formato o con en formato Rich
Text.

Eliminar objetos del documento

Primero selecciona los objetos que quieres eliminar. Puedes cortar los objetos al
portapapeles o eliminarlos.

Cortar objetos
Selecciona "Edición > Cortar", o pulsa "Ctrl + X". Los contenidos del portapapeles serán
sobrescritos y podrás pegar el objeto o los objetos borrado en el lugar deseado.
Trabajar con objetos 95
Eliminar objetos
Escoge "Edición > Eliminar", pulsa "Supr" o haz clic sobre el botón ELIMINAR de la
barra de control ESTÁNDAR .

En este caso los objetos eliminados no se colocarán en el portapapeles. Si eliminas


accidentalmente un objeto, puedes recuperarlo con deshacer.

Duplicar y clonar

Ambas opciones crean una copia del objeto seleccionado. El objeto original se
deselecciona y el duplicado o el clon se convierte en el objeto seleccionado.

También puedes duplicar un objeto mientras lo mueves, giras, doblas o cambias su


tamaño. Mientras lo arrastras (y mientras pulsas la tecla izquierda del ratón) haz clic
derecho o pulsa + del teclado numérico para soltar una copia del objeto. El objeto original
no se mueve. Puedes hacer esto todas las veces que quieras para crear una serie de
objetos duplicados.

Una forma sencilla de crear una o más copias de un objeto alineado horizontal o
verticalmente, es arrastrar el objeto, pulsar Ctrl para limitar el movimiento y después hacer
clic derecho (o pulsar + del teclado numérico) para cada copia.

Para sustituir rápidamente una línea de objetos, dibuja uno, después arrástralo mientras pulsas
la tecla Ctrl y haz clic derecho para cada copia que quieras crear.

Duplicar
Escoge Edición > Duplicar o pulsa Ctrl+D. La copia aparecerá un poco hacia la derecha y
abajo del objeto original.

La distancia de duplicación puede cambiarse. Lee el capítulo Personalización de Web


Designer (en la página 334).
96 Trabajar con objetos
Clonar
Escoge Edición > Clonar o pulsa Ctrl+K. Esto coloca una copia exactamente arriba del
original. La clonación es una forma fácil de crear formas concéntricas.

Este ejemplo usa una letra original A con relleno negro y un contorno blanco con una anchura de
4 pt y un clon sin relleno y una línea negra de 1 pt.

Mover objetos hacia adelante o hacia atrás

Las ilustraciones complejas tienen objetos apilados uno sobre otros, igual que este blanco.

El blanco de la izquierda está construido a partir de tres círculos apilados uno sobre otro.

Para asegurar que los objetos se superpongan en el orden correcto, muchas veces
necesitas cambiar el orden desde adelante hacia atrás. (El objeto de adelante siempre
cubre a los de abajo y los otros objetos siempre cubren a los que están más abajo. Cada
nuevo objeto que creas se coloca arriba de los anteriores.)

El menú Arreglo te ofrece las cuatro opciones siguientes:

• TRAER AL FRENTE (Ctrl+F): esto convierte al objeto seleccionado en el objeto de más


arriba. Por lo tanto, ocultará todos los objetos que cubra.
• MOVER ADELANTE (Ctrl+×+F): esto mueve el objeto un nivel hacia el frente, como si
estuviera subiendo un peldaño de una escalera.
• MOVER ATRÁS (Ctrl+×+B): esto mueve el objeto un nivel hacia atrás.
• LLEVAR ATRÁS (Ctrl+B): esto coloca el objeto atrás de todo.
Trabajar con objetos 97
Estas opciones mueven los objetos hacia adelante y hacia atrás en la misma capa. MOVER
A LA CAPA AL FRENTE y MOVER A LA CAPA DE ATRÁS te permiten mover los objetos entre las
capas visibles. (Las capas invisibles no se tienen en cuenta al mover objetos).

Más información sobre capas en el capítulo Capas (en la página 275)

Girar objetos

Esta opción es parte de la herramienta de SELECCIÓN.

Si el modo de rotación está activado, el centro de transformación (alrededor del


cual el objeto gira) aparece inicialmente en el centro del objeto, tal como se ve en
este pequeño blanco.
Haz otro clic sobre el objeto para poner la herramienta de selección en el modo de
rotación.

Arrastra el centro de transformación al lugar que desees.

Atención: si se mueve el centro de rotación, se mantendrá en esta posición para cualquier


objeto seleccionado hasta que todos los objetos estés deseleccionados; así el punto
volverá al centro de cualquier objeto seleccionado.

Girar utilizando el ratón


La herramienta de SELECCIÓN debe encontrarse en el modo de rotación/doblado (los
controles deslizantes de selección tienen forma de flecha).

Si arrastras los controles deslizantes laterales, el objeto se extenderá. Esta operación se


explica detalladamente en la sección Extender o reducir objetos.

Arrastra una flecha de una esquina. Mientras arrastras, el objeto gira alrededor del centro
de transformación. La barra de información muestra el ángulo de rotación actual.

"× + arrastrar" para hacer girar un objeto alrededor de su centro (el centro de
transformación será ignorado).

Pulsa "Ctrl" para limitar la dirección de rotación a uno de los ángulos de restricción.

Puedes definir los ángulos de restricción. Consulta el capítulo "Personalización de Web


Designer (en la página 333)".

Para crear una copia mientras realizas un giro, pulsa la tecla "+" del teclado numérico
mientras giras o haz clic con la tecla derecha del ratón.
98 Trabajar con objetos
Rotación con ángulos exactos (utilizando la barra de información)
Introduce un ángulo en el campo de rotación y pulsa ↵. Los ángulos positivos realizan el
giro en sentido contrario a las agujas del reloj, mientras que los ángulos negativos lo
realizan en el sentido de las agujas del reloj.

Haz clic sobre las flechas a la derecha para desplazar el


ángulo de rotación.

Girar objetos en el modo de cambio de tamaño

También es posible girar y doblar un objeto si no te encuentras en el modo de rotación.


Usando el modo de cambio de tamaño, mueve el cursor hasta las áreas pequeñas cerca
de los controles deslizantes de límites de selección, tal como se muestra arriba. El cursor
cambiará a un icono de rotación para indicar que puedes girar o doblar el objeto
arrastrando el ratón.

Cambio del tamaño de objetos (escalar)

Esta opción es parte de la herramienta de SELECCIÓN.

Botón Escalar anchos de línea


Con el botón ESCALAR ANCHOS DE LÍNEA , al cambiar el tamaño
de un objeto, también se cambiará el ancho de sus líneas. Si
desactivas este botón, el ancho de las líneas no se modificará.

Puedes activar este botón durante el arrastre y pulsando la tecla / del teclado numérico.

Este control también determina si los valores X, Y, ancho y alto de la barra de información
incluyen el ancho del contorno o pincel. Muchas veces es útil ver y controlar el tamaño
exacto de la forma excluyendo el ancho de la línea.
Trabajar con objetos 99
Botón Bloquear relación de aspecto
Con el botón BLOQUEAR RELACIÓN DE ASPECTO , la relación de
aspecto ancho:altura permanece constante cuando cambias el
tamaño del objeto.
En otras palabras, la forma mantiene las mismas proporciones que el original. Se
recomienda dejar este botón activado la mayoría del tiempo para garantizar que los
objetos no se deformen al cambiar su tamaño.

Si este botón está desactivado, puedes cambiar la relación de aspecto al cambiar el


tamaño del objeto. Es decir, que puedes extender el objeto de una forma u otra
arrastrando un control deslizante de esquina o introduciendo un nuevo tamaño.

Cambiar tamaño utilizando el ratón


La herramienta de SELECCIÓN
debe encontrarse en el modo
de cambio de tamaño (los
controles deslizantes de
límite son cuadrados). De ser
necesario, haz clic sobre el
objeto para cambiar al modo
de cambio de tamaño.

Arrastra uno de los controles deslizantes de esquina. El objeto cambiará de tamaño a


medida que muevas el cursor diagonalmente. La barra de información muestra el cambio
de tamaño actual. El tamaño del objeto se encontrará dentro de la escala delimitada por el
control deslizante que hayas arrastrado y el opuesto. Si quieres utilizar otro punto fijo del
objeto para realizar la rotación, mueve el centro de transformación al punto deseado y usa
los botones de la barra de información para cambiar el tamaño.

Pulsa "×" mientras arrastras para cambiar el tamaño del objeto alrededor de su centro.
Esto funciona independientemente de la posición del centro de tranformación.

"Ctrl + arrastra" aumenta el tamaño del objeto en múltiplos de su tamaño original (x2, x3 y
sucesivamente).

Para crear una copia mientras cambias el tamaño (dejando el original en su lugar), haz clic
derecho o pulsa la tecla "+" del teclado numérico.

Si arrastras los controles deslizantes laterales, el objeto se extenderá o reducirá. Esta


operación se explica detalladamente en la sección Extender o reducir objetos.
100 Trabajar con objetos
Cambiar tamaño utilizando la barra de información

Introduce el valor en el campo CAMBIAR TAMAÑO DE TEXTO y pulsa "↵".


• Los valores menores que 100% reducen el objeto. 50 reduce el tamaño del objeto
a la mitad.
• Los valores mayores que 100% aumentan el tamaño del objeto. 200 duplica el
tamaño del objeto.

Si el botón BLOQUEAR ASPECTO está activado, puedes introducir el valor en cualquier


campo de texto para cambiar el tamaño del objeto de acuerdo al porcentaje
deseado. Si este botón está desactivado, puedes introducir valores individuales para
el ancho y el alto.

Como alternativa, escribe el tamaño deseado del objeto en los campos de texto AL o
AN .

Si el botón BLOQUEAR RELACIÓN DE ASPECTO está activado, esto cambia el tamaño del
objeto pero mantiene su relación de aspecto. Puedes introducir cualquier tamaño en
cualquier unidad como, por ejemplo, 1 cm.

Si cambias el tamaño utilizando los botones de la barra de información (o recuadros de


números), siempre se realizará el cambio de tamaño alrededor del centro de
transformación. Puedes posicionar el centro en cualquier lugar del objeto, tal como se ha
descrito en la sección "Girar objetos".

Voltear objetos
Esta opción es parte de la herramienta de SELECCIÓN. Un clic sobre los
botones para VOLTEAR da vuelta el objeto vertical u horizontalmente a partir
del centro de transformación.
El tamaño y la relación de aspecto no cambian, el objeto simplemente se voltea.

Extender o reducir objetos

Esto es similar a cambiar el tamaño de los objetos, salvo que el objeto cambia de tamaño
en una sola dirección. La extensión o reducción del objeto son básicamente la misma
acción, pero en sentido contrario.

Extender o reducir objetos utilizando el ratón


La herramienta de SELECCIÓN debe encontrarse en el modo de cambio de tamaño. (Los
controles deslizantes de selección son cuadrados.) De ser necesario, haz clic en el objeto
para activar el modo de cambio de tamaño.
Trabajar con objetos 101
Utiliza los controles deslizantes superiores, inferiores y laterales, en lugar de los controles
deslizantes de esquina para extender o reducir una forma sólo en una dimensión. Ten en
cuenta que sólo se muestran estos controles deslizantes en los rectángulos que no tienen
una foto en su interior porque extender otros objetos en una sola dimensión rara vez
produce resultados correctos (las fotos se distorsionan).

Arrastra uno de los controles


deslizantes laterales. El objeto
cambiará de tamaño en la dirección
de arrastre. La barra de información
muestra el cambio de tamaño actual.

El botón BLOQUEAR RELACIÓN DE


ASPECTO se ignora.

Haz clic derecho o pulsa "+" del teclado numérico mientras arrastras para extender o
reducir una copia el objeto (dejando el original en su lugar).

Extender o reducir objetos utilizando la barra de información


El BOTÓN BLOQUEAR ASPECTO debe estar desactivado (si está activado, cambiarás el
tamaño del objeto en vez de extenderlo o reducirlo).

Introduce el valor en el campo de texto del ancho o alto (según corresponda) y pulsa "↵".
También puedes introducir un porcentaje (ancho o alto). Si introduces 200% en el campo
% superior, el ancho del objeto se duplicará mientras que el alto permanecerá igual.

Si está activada la opción BLOQUEAR ASPECTO, el objeto no se modificará.

Inclinar objetos

Esta opción es parte de la herramienta de SELECCIÓN.

A la izquierda se encuentra el objeto original; a la derecha


el objeto inclinado horizontalmente.

Inclinar utilizando el ratón


Cambia la herramienta de SELECCIÓN al modo de rotación/doblado haciendo clic sobre el
objeto. (Los controles deslizantes de selección tienen forma de flecha).

Arrastra una de las flechas laterales, superiores o inferiores para inclinar el objeto. Ten en
cuenta que sólo se muestran estos controles deslizantes en los rectángulos que no tienen
102 Trabajar con objetos
una foto en su interior porque inclinar otros objetos rara vez produce resultados correctos
(las fotos se distorsionan).

A medida que arrastras, el objeto se inclinará en la dirección del


movimiento (vertical u horizontal).

La barra de información muestra el ángulo de inclinación actual.

× + arrastra para inclinar el objeto alrededor del centro. Pulsa "Ctrl" para limitar la dirección
de inclinación a uno de los ángulos de restricción. Para crear una copia mientras arrastras,
haz clic derecho o pulsa la tecla "+" del teclado numérico (dejando el original adonde
estaba antes). O haz clic derecho con el ratón para crear copias instantáneas; si quieres
copias adicionales haz clic izquierdo.

También puedes inclinar el objeto con la herramienta de selección en el modo de cambio


de tamaño, utilizando las áreas de inclinación. Para más información ve a la sección Girar
objetos en el modo de cambio de tamaño (en la página 98).

Inclinar utilizando la barra de información


Para inclinar horizontalmente introduce un ángulo en el campo
de inclinación y pulsa "↵".

Difuminación (Feathering)

Si quieres que los bordes de un objeto sean borrosos (blur) para que el objeto se
desvanezca en un objeto de fondo. Esto se llama difuminación. Un ejemplo es cuando se
fusionan dos mapas de bits para evitar un borde marcado entre ellos.

El control de difuminación se encuentra sobre el lado


derecho de la barra superior después del botón de
galerías.

Para difuminar un objeto:

1. Selecciona el objeto o los objetos que quieres difuminar.


2. Introduce un tamaño numérico para la difuminación en el campo de texto.
O
Haz clic en la flecha para ver la barra deslizante emergente. A medida que arrastres la
barra deslizante los objetos se difuminarán.
Trabajar con objetos 103

La difuminación fusiona los bordes de los objetos o los hace borrosos.

Si has seleccionado varios objetos, la difuminación aparecerá alrededor de cada objeto. Si


has agrupado los objetos, la difuminación aparecerá alrededor del conjunto de objetos
agrupado.

Ajuste

El ajuste facilita el posicionamiento de esquinas o puntos específicos de objetos en lugares


precisos. Puede utilizarse para alinear esquinas a un punto o línea específico o para
espaciar objetos en intervalos regulares utilizando la cuadrícula.

MAGIX Web Designer 6 ofrece tres tipos de ajuste:

• Ajustar a cuadrícula
• Ajuste magnético
• Ajustar a líneas guía u objetos guía

Ajustar a cuadrícula es muy útil para espaciar los objetos en intervalos precisos o cambiar
el tamaño en múltiplos exactos de un valor determinado. Las líneas guía se utilizan para
alinear esquinas (aunque usar objetos guías es más poderoso) y, finalmente, el ajuste
magnético es una forma general de posicionar líneas, puntos o esquinas arriba de otras
líneas puntos o esquinas de objetos cercanos.

Ajustar a cuadrícula
Si se ha seleccionado AJUSTAR A CUADRÍCULA , los puntos de cuadrícula funcionan como
imanes. Esta opción se controla en Ventana > Ajustar a cuadrícula o pulsando . (separador
decimal) del teclado numérico. Al arrastrar un control deslizante de punto cerca de un
punto de cuadrícula, se creará un ajuste. Puedes controlar el espaciado de la cuadrícula
en el diálogo de opciones (Herramientas > Opciones). Por defecto, las plantillas de
documento web tienen el ajuste a la cuadrícula activado con un sólo píxel, por lo que, en
general, todos los objetos y posiciones son píxeles enteros.
104 Trabajar con objetos
Al arrastrar objetos, los bordes se ajustarán a los puntos de cuadrícula. El borde que se
ajustará depende de la dirección en que se arrastra al objeto.

Este ejemplo muestra una cuadrícula con 5 subdivisiones entre las divisiones mayores. La forma
tiene un contorno gris muy ancho. Como el objeto fue arrastrado hacia abajo a la izquierda, los
bordes inferiores izquierdos se han ajustado al punto de cuadrícula más cercano.

Nota: el espaciado de cuadrícula por defecto es 50 píxeles para las líneas principales con
50 subdivisiones. Esto significa que la cuadrícula tiene un espaciado de un píxel de
pantalla y puede parecer que no se estuviera trabajando a un nivel normal de 100%. Si
amplías la imagen a 500%, verás que se ajusta de forma correcta.

Como alternativa, cambia los valores de cuadrícula a, por ejemplo, 10 subdivisiones, lo


que significa que los puntos de cuadrícula están en límites de 5 píxeles.

Ajuste y ancho de línea


El control MODIFICAR ANCHOS DE LÍNEA de la barra de información
de la herramienta de SELECCIÓN también controla si el ajuste debe
realizarse al borde del contorno de objeto o al centro verdadero de
la línea.
El ejemplo muestra una forma con un contorno gris muy grueso. También muestra una
línea negra delgada, el contorno de la forma en sí mismo (puedes ver que el contorno
grueso está dibujado de forma igual a cada lado del centro de la línea, por lo que se
encuentra parcialmente dentro de la forma y parcialmente fuera.)

Si desactivas este control, los objetos se ajustarán al centro matemático de la línea, que es
lo mismo que el borde externo de la línea si no tuviera un contorno.
Trabajar con objetos 105
Ajuste magnético de objeto
El ajuste magnético de objeto es una forma muy precisa de alinear líneas, puntos
y bordes de los objetos a cualquier otro objeto para que se toquen.

Por ejemplo, si quieres que varias líneas comiencen precisamente en el mismo punto o
quieres que una línea se junte con precisión al borde de un círculo, la utilización del ajuste
magnético te lo permitirá.

Puedes utilizar esta opción, incluso para alinear el centro de los objetos. Cuando escoges
un objeto con el ajuste magnético activado, se selecciona el "punto de interés" más
cercano. Cuando arrastras el objeto y el ajuste magnético está activado, entonces el punto
debajo del ratón se ajustará al contorno u otro "punto de interés" de la forma visible.

El "punto de interés" se define como un contorno o cualquier punto de control sobre el


contorno y otras posiciones como el centro de los objetos. Esta herramienta es
doblemente inteligente: no sólo ajuste al punto que estás arrastrando, sino que se asegura
que si seleccionas un objeto cerca de un borde o punto, utilices la posición exacta para
realizar el ajuste.

Esto es controlado por el botón del pequeño imagen en la barra de botones ESTÁNDAR :

O a través del menú Ventana > Ajustar a objetos o pulsando * en el teclado numérico.

Por ejemplo, puedes alinear la esquina de un cuadrado al centro exacto del círculo,
escogiendo la esquina del cuadrado (o muy cerca) y arrastrándolo hasta el centro del
círculo. El indicador de ajuste de la barra de estado te mostrará cuando los objetos se
hayan ajustado.

El capítulo Personalización de Web Designer contiene detalles del diálogo de Opciones.

La distancia de ajuste se controla a través de la pestaña del RATÓN del diálogo de


OPCIONES (Herramientas > Opciones). Puedes especificar dos distancias:

• Un círculo alrededor de cada control deslizante.


• Y una distancia a cada lado de los segmentos de línea. Esto te permite hacer que los
puntos "se peguen" más que las líneas en sí mismas.

Objetos guía y líneas guía

Los objetos guía y las líneas guía son objetos de una capa especial: la capa guía. Una
capa guía se crea automáticamente cuando creas una línea guía (ver a continuación) o
puede crearse de forma manual con un clic derecho en la GALERÍA DE CAPAS y
seleccionando CREAR UNA CAPA GUÍA . Lee el capítulo "Capas para más información (en la
página 275)".
106 Trabajar con objetos
Usa la opción AJUSTAR A GUÍAS del menú Ventana (o la tecla 2 del teclado numérico) para
activar el ajuste a objetos guía.

Cualquier objeto colocado en la capa guía se convierte en un objeto guía. Esto puede ser
cualquier objeto incluyendo líneas en cualquier ángulo, formas irregulares y QuickShapes.
Puedes crear, eliminar y cambiar el tamaño de los objetos de la capa guía al igual que en
las otras capas, pero los objetos se verán con contornos de puntos rojos y el ancho de
línea o color de relleno se ignorará. Esta información se guardará, y si posteriormente
mueves el objeto desde la capa guía a una capa normal, el ancho de línea y los colores se
verán nuevamente.)

Puedes usar los objetos guía para dibujar líneas de construcción como líneas que pasan a
través de un punto imaginario para un dibujo en perspectiva.

Colocar objetos en la capa guía


Primero asegúrate que haya una capa guía en la GALERÍA DE CAPAS (ver más arriba).
Puedes crear objetos directamente en la capa guía si la seleccionas y creas objetos de
forma usual.

La galería de capas muestra la capa guía seleccionada encima de otras dos capas.

También puedes cortar o copiar objetos desde otras capa y pegarlos en la capa guía. Para
copiar objetos en la misma posición relativa a la capa guía utiliza el shortcut Ctrl+×+ V.

MOVER A LA CAPA DE ADELANTE y MOVER A LA CAPA DE ATRÁS en el menú Arreglo ignora la


capa guía y no puede utilizarse para mover objetos a esta capa.

Crear un línea guía


Las líneas guía son líneas verticales u horizontales que sirven para alinear rápida y
fácilmente una serie de objetos en la página.

• Activa las reglas (Ctrl+L).


• Arrastra desde una regla hasta la página

• Doble clic sobre la regla para crear una línea guía alineada al punto de clic.

Esto crea automáticamente una capa guía y coloca la línea guía en esa capa.
Trabajar con objetos 107
O, usa la galería de capas:

1. Clic derecho sobre la galería de capas y escoge PROPIEDADES


2. De ser necesario, escoge la pestaña Guías.
3. Selecciona horizontal o vertical.
4. Haz clic en Nuevo.
5. Introduce la posición deseada.

Eliminar una línea guía


Utiliza la herramienta de selección para arrastrar la línea guía hasta la regla apropiada (la
regla vertical para líneas guía verticales, la regla horizontal para horizontales).

O haz clic derecho sobre la línea guía y escoge Eliminar.

Resumen de shortcuts del teclado numérico

+ crea una copia mientras arrastras, cambias de tamaño, doblas, etc. El objeto original
no se modifica.
/ conserva el ancho de línea intacto al cambiar de tamaño el objeto.
- conserva el relleno sin cambios al mover, cambiar de tamaño, doblar, etc.
* activa y desactiva el ajuste magnético.

Agrupar y desagrupar objetos

Las herramientas de sombra y transparencia ofrecen diferentes resultados, dependiendo si


se trata de objetos agrupados o no. Para más información, lee el capítulo Transparencia
(en la página 188) y Sombras (en la página 190).

Muchas veces crearás formas complejas a partir de varios objetos diferentes. La opción
Arreglo >Agrupar, te permite unir estos objetos para que parezcan un solo objeto.
Después podrás seleccionar los objetos agrupados y copiarlos, moverlos, escalarlos o
realizar cualquier otra operación sobre todo el grupo.

Para crear un grupo


1. Selecciona todos los objetos que quieres incluir en el grupo.
2. Escoge Arreglo > Agrupar (o Ctrl+G) para crear el grupo.

Desagrupar objetos
1. Selecciona el grupo.
2. Escoge Arreglo > Desagrupar (o Ctrl+U).

Después de esto, todos los objetos individuales quedarán seleccionados.


108 Trabajar con objetos
Para añadir más objetos a un grupo
1. Selecciona el grupo.
2. Desagrupa (Ctrl+U)
3. Selecciona los objetos adicionales
4. Agrupa nuevamente (Ctrl+G)

También puedes incorporar un grupo en un segundo grupo, omitiendo el paso 2. Web


Designer recuerda la información original de agrupación. Si desagrupas los objetos
posteriormente, aparecerán los grupos originales.

Eliminar objetos de un grupo


1. Desagrupar los objetos.
2. ×+clic sobre los objetos que quieres eliminar. Esto los deselecciona, mientras los
otros objetos permanecen seleccionados.

Puedes escoger Arreglo > Agrupar para volver a agrupar los objetos restantes.

Seleccionar un objeto dentro de un grupo


(Por ejemplo, para cambiar su color.) Ctrl+clic sobre el objeto. (También puedes utilizar
esto para seleccionar un "grupo dentro de un grupo".) Si pulsas Tab o ×+Tab, la
selección dentro del grupo se moverá al objeto siguiente o anterior. Una vez que has
seleccionado un objeto dentro del grupo, puedes utilizar Alt+clic para seleccionar el objeto
debajo del objeto seleccionado.

Esto se llama "seleccionar dentro".

Grupos y capas

Más información sobre capas en el capítulo Capas (en la página 275)

Si todos los objetos que quieren agruparse se encuentran en una sola capa, el grupo se
creará en esa capa. El grupo se encuentra en el nivel del mayor miembro del grupo. (Es
decir, el grupo se convierte automáticamente en el objeto de adelante).

Si los objetos se encuentran en más de una capa, el grupo se creará en la capa que
contenga el objeto más cercano al frente.

Grupos suaves (soft groups, en inglés)

Los grupos normales, como se explicó en "Agrupar y desagrupar objetos" (en la página
107), sólo se colocan en una capa, no pueden estar en varias capas al mismo tiempo. Los
GRUPOS SUAVES te permiten conectar objetos a través de distintas capas.

Si seleccionas un componente de un grupo suave, también se seleccionarán otros


componentes del mismo grupo suave, incluso los que son invisibles o se encuentran
Trabajar con objetos 109
bloqueados. Esto significa que cuando muevas, gires o transformes un componente de un
grupo suave, todos los otros objetos también se modificarán de forma similar.

La barra de estado te indica cuando un grupo suave ha sido seleccionado.

Los grupos suaves son prácticos para cuando quieres mantener juntos los objetos que
están relacionados. Por ejemplo, los estados MOUSEOFF y MOUSEOVER de un botón web
se agrupan en un grupo suave para que el otro estado también guarde los movimientos o
transformaciones.

Creación de grupo suaves


Para crear un grupo suave, selecciona todos los objetos que quieras incluir en el grupo y
luego escoge "ARREGLO > APLICAR GRUPO SUAVE " (o pulsa "Ctrl + Alt + G"). Ten en
cuenta que si el grupo suave va a tener componentes en capas invisibles o bloqueadas,
tendrás que hacer esas capas temporalmente visibles y editables utilizando la galería de
capas para poder seleccionar los objetos y agruparlos en un grupo suave.

Un objeto no puede ser miembro de más de un grupo suave y los grupos suaves no
pueden ser parte de otros grupos suaves.

Eliminación de grupos suaves


Para deshacer un grupo suave, seleccionar "ARREGLO > ELIMINAR GRUPO SUAVE " (o pulsa
“Ctrl + Alt + U”). Los objetos no serán borrados, pero no estarán más asociados en un
grupo suave.

Sincronización de texto
Todos los objetos que tengan el mismo valor de texto y que estén en el mismo grupo
suave serán sincronizados si alguno de los objetos se edita. Entonces, si cambias el texto
de un objeto, todos los otros objetos que tengan el mismo texto serán modificados. Sólo el
texto será sincronizado, los objetos pueden tener diferentes tamaños, fuentes o atributos.

La sincronización de texto utilizando los grupos suaves es práctico cuando tienes una
etiqueta que está duplicada en varios sitios, eventualmente en diferentes estilos y si
quieres que cada objeto tenga la misma etiqueta.
110 Trabajar con objetos

Alineación

Esto permite alinear dos o más objetos con precisión. Selecciona los objetos que quieres
alinear y escoge "Arreglo" > "Alineación" (Shortcut: Ctrl + Shift + L).

El diagrama de la parte superior del diálogo te


muestra el efecto de cada configuración. Los
objetos correspondientes se modificarán en el
documento, sólo al confirmar con APLICAR .

El diálogo de alineación no es modal, lo que


significa que el diálogo puede permanecer abierto
mientras trabajas en el documento. De esta forma,
puedes cambiar entre herramientas o dibujos,
modificar la selección y después escoger una de
las opciones de alineación.

Si tu selección no es la correcta, modifícala y haz


clic nuevamente en APLICAR para volver a utilizar
la última configuración. De esta forma, puedes
ahorrar mucho tiempo.

Dentro
Esta sección del diálogo controla los límites dentro de los que alineas o distribuyes los
objetos. Las opciones son:

LÍMITES DE SELECCIÓN : los límites son los bordes


externos de los objetos seleccionados. Esta posición
relativa no tiene efecto en la página.
Trabajar con objetos 111
LÍMITES DE UN OBJETO DE ATRÁS : los límites son los
bordes externos del objeto seleccionado que se
encuentre atrás de todo. Este objeto no será afectado
por el alineamiento.
Puedes utilizar esto para definir el objeto de "referencia"
cuando quieres alinear varios objetos en una fila, por
ejemplo. Con las opciones normales de los "límites de la
selección" el objeto que se encuentre más a la izquierda
será el objeto de referencia (el que no se moverá).
PÁGINA/S : si los objetos se encuentran en una sola
página, los límites son los bordes de página. (Esto te
permite, por ejemplo, centrar objetos en la página o
alinear a partir del borde de página.)

Alineación
Para alinear objetos para que, por ejemplo, sus bordes izquierdos queden alineados a la
izquierda:

1. De ser necesario, selecciona los objetos.


2. Selecciona la opción DENTRO deseada, por ejemplo, límites de selección.
3. Selecciona ALINEAR A LA IZQUIERDA para la posición horizontal.
4. Deja la posición vertical SIN CAMBIOS.
5. Haz clic en APLICAR .

Los objetos seleccionados se moverán para alinearse al borde izquierdo.

Todas las opciones de alineación actúan de forma similar. Mostramos solamente el


ejemplo de alineación izquierda para ser breves. Experimenta para aprender sobre las
otras opciones.

Distribuir
Las opciones de distribución posicionarán los objetos seleccionados de forma regular
dentro del área (generalmente los límites de selección, pero también puede ser la página o
doble página.)

Todas las opciones de distribución funcionan de forma similar. Los siguientes ejemplos
muestran las diferentes opciones verticales para alinear objetos:

DISTRIBUIR BORDES SUPERIORES : las partes superiores


de los objetos se distribuyen de forma regular. La
distribución de BORDES INFERIORES es la inversa: la
parte inferior de los objetos se distribuyen de forma
regular.
112 Trabajar con objetos
DISTRIBUIR CENTROS : los centros de los objetos se
distribuyen de forma regular.

DISTRIBUIR EN ESPACIOS IGUALES : los objetos presentan


espacios regulares entre uno y otro.

Las opciones de posición horizontal son similares, pero funcionan en dirección horizontal.

Si, por ejemplo, quieres distribuir esta colección de elipses para que presenten espacios
iguales y sus bordes superiores estén alineados:

• Selecciona las formas


• Abre el diálogo de alineación (Ctrl+Mayús+L)
• Asegúrate de que la sección DENTRO muestre la
opción LÍMITES DE SELECCIÓN
• Selecciona las posición horizontal: distribuir centros
• Selecciona la posición vertical: alinear arriba
• Haz clic en APLICAR .

Ahora se verán así, con espaciado horizontal


equidistante y alineación superior.

Recuerda que si te has equivocado, siempre puedes deshacer la operación.

Copiar estilos: pegar atributos

Esto te permite copiar atributos (como el modelo de línea o el color de relleno) entre
objetos. Es una forma rápida de aplicar múltiples atributos a un objeto.

El cuadrado tiene un color, sombra, estilo


de línea y relleno específicos. Si se copia y
se pegan los atributos al círculo del
centro, el resultado será el círculo de la
derecha.

1. Selecciona el objeto cuyos atributos quieres copiar.


2. Copia la selección al portapapeles. (EDICIÓN > COPIAR , o Ctrl+C).
3. Selecciona el/los objeto/s a los que quieres aplicar los atributos.
4. Escoge "EDICIÓN > PEGAR ATRIBUTOS " (o "Ctrl+×+A").
Trabajar con objetos 113
El objeto permanece en el portapapeles hasta no ser sustituido por la operación 'copiar' o
'cortar'. Esto te permite repetir la función de 'pegar' todas las veces que quieras.

Librerías de estilos
Es bastante fácil utilizar esta técnica para crear documentos que pueden utilizarse como
librerías de estilo. Crea una serie de pequeños objetos con un relleno, color y otros estilos
de atributos. Después, la forma más sencilla de utilizar uno de estos estilos es:

• Haz clic sobre el objeto fuente, "Ctrl+C" para copiar el estilo


• Ve al objeto de destino (que puede encontrarse en otro documento, "Ctrl+Tab" para
cambiar rápidamente entre documentos), haz clic en el objeto para aplicar el estilo
• Pulsa "Ctrl+×+A" para aplicar los atributos

Atención: la mayoría de los atributos pueden copiarse de esta forma, incluyendo sombras,
valores de difuminación, estilos de relleno, efectos en vivo, etc.. Sin embargo, los biseles
no pueden copiarse de un objeto a otro, si el objeto en el que se tiene que copiar el bisel
posee ya un bisel para aplicar a los atributos de bisel.

Nombrar objetos

Puedes aplicar nombres a cualquier objeto del MAGIX Web Designer 6, utilizando
la opción "Aplicar, quitar o verificar nombres de objetos" en la barra de información
de la HERRAMIENTA DE SELECCIÓN.

La aplicación de nombres es un mecanismo que tiene una variedad de usos que serán
explicados a continuación. El uso más común es para formar series de objetos.

Ejemplos del uso de nombres

Animaciones Flash: los nombres para las animaciones Flash se usan para marcar objetos
a los que se les añadirán animaciones con el exportador Flash. Lee el capítulo sobre Flash
(en la página 283) para más detalles.

Objetos repetidos: se utiliza una convención especial de nombres para identificar un


objeto que aparecerá en la misma posición y con la misma forma en múltiples páginas.
Esto te permite editar una copia del objeto y actualizar todas las otras copias para que
estén iguales. Ver el capítulo "Objetos repetidos" (en la página 114) en Primeros pasos.
114 Trabajar con objetos

El diálogo carece de modo así que puedes cambiar la selección mientras el diáolog esté
abierto. Muestra los nombres para la selección actual. El campo de texto superior del
diálogo te indica cuántos objetos están seleccionados actualmente.

Añadir nombres
Para añadir un nombre a un objeto, selecciona el objeto y abre el diálogo
APLICAR/ELIMINAR NOMBRES utilizando el botón de la BARRA DE INFORMACIÓN DE LA
HERRAMIENTA DE SELECCIÓN .

Introduce el nuevo nombre en el campo "Aplicar nombre" o utiliza la lista desplegable del
mismo campo para seleccionar un nombre que ya haya sido utilizado en otra parte del
documento actual. Haz clic en AÑADIR. El nombre aparecerá en la lista "NOMBRES
APLICADOS ".

Nombres aplicados
El campo de "NOMBRES APLICADOS " te muestra los nombres que se han aplicado en la
selección actual. Si hay más de un objeto seleccionado, sólo se mostrará una lista de los
nombres aplicados si todos los objetos de la selección tienen la misma serie de nombres.
Si no es así, verás la palabra "<muchos>" indicando que se han aplicado distintos
nombres para los diferentes objetos de la selección.

Para quitar un nombre de un objeto seleccionado, haz clic en el nombre en la lista


"Nombres aplicados" y luego haz clic en el botón ELIMINAR .

Objetos repetidos

En las páginas web es muy común que ciertos elementos se repitan en todas las páginas
como, por ejemplo: los botones de navegación, los encabezados o los logos. Web
Trabajar con objetos 115
Designer te ofrece la posibilidad de repetir cualquier elemento en el mismo lugar de las
páginas del sitio. Cuando actualices una de las copias, se guardarán los cambios en todas
las páginas.

En la mayoría de las plantillas de diseño se repiten los botones principales de


navegación. Cuando cambies un botón, como la dirección web o un texto, puedes
seleccionar en el menú Arreglo > Actualizar objetos repetidos y se actualizarán los botones
en todas las páginas.

Sin embargo, si la barra está configurada como BARRA DE NAVEGACIÓN DEL SITIO
aparecerá automáticamente en todas las páginas de tu sitio y no es necesario que utilices
la opción Actualizar objetos repetidos para estas barras.

Los textos de logos y pies de página generalmente se configuran como objetos que se
repiten. Esto significa que puedes editarlos en una sola página, escoger Arreglo >
Actualizar objetos repetidos, y el objeto se actualizará en todas las otras páginas.

Nota: se utiliza la página actual como fuente original para actualizar los elementos
repetidos de todas las páginas. Por eso es importante que te asegures de estar en la
página correcta antes de seleccionar una opción del menú. La página seleccionada es la
que estás utilizando para trabajar y tiene marcadores alrededor de las esquinas de la
página. Haz clic en cualquier parte de la página (también en el exterior) para activarla.

Es muy fácil crear tus propios elementos repetidos, sólo tienes que seleccionar cualquier
objeto y escoger ARREGLO > REPETIR EN TODAS LAS PÁGINAS .

Se copiará el objeto en el mismo lugar en todas las páginas. Para efectuar más cambios
en el elemento seleccionado, selecciona ARREGLO > ACTUALIZAR OBJETOS REPETIDOS para
que se actualicen todas las copias.

Si no quieres una copia en la página, sólo tienes que borrarla de esa página. Si vuelves a
seleccionar ACTUALIZAR OBJETOS REPETIDOS sólo se actualizarán los elementos que ya
existen en la página.

Pies de página
Si quieres que aparezca un pie de página en la parte inferior de todas las páginas, también
puedes utilizar el sistema de "Objetos repetidos". Selecciona el elemento (puede ser un
elemento individual, un grupo o múltiples elementos) y escoge la opción "REPETIR EN
TODAS LAS PÁGINAS ". Esta opción es muy práctica porque coloca los pies de página
siempre en el mismo lugar, independientemente de la longitud de la página.

Uso avanzado de objetos repetidos


También puedes hacer que cualquier elemento sea un elemento repetido asignándole un
nombre especial de repetición.

• Selecciona el objeto y haz clic en el botón "Aplicar nombre" en el extremo


derecho de la barra de información de la herramienta de selección.
116 Trabajar con objetos
• Agrégale un nombre que comience con
'REPEATING: '. Esto debe estar seguido de
un nombre exclusivo para ese elemento.
• Haz clic en el botón Añadir para aplicar el
nombre.

Si quieres que este objeto se actualice en


muchas páginas, primero cópialo
manualmente en todas las páginas en las que
quieras incluirlo. O utiliza utiliza el menú
ARREGLO > REPETIR EN TODAS PÁGINAS .

Ahora, cuando edites o hagas cambios al elemento y selecciones ARREGLO > ACTUALIZAR
OBJETOS REPETIDOS , todas las copias se actualizarán.

Nota: esta función actualiza los objetos repetidos de la página actual en todas las otras
páginas que contengan los mismos elementos repetidos. Eso es, sólo las páginas que
tengan objetos repetidos se actualizarán (no insertará estos elementos en páginas vacías).

Es importante comprender que los objetos repetidos no se actualizan de forma


automática, sino que sólo cuando hayas escogido la opción Arreglo > Actualizar objetos
repetidos.

Nota técnica: esta función identifica los nombres "repetidos" y los reemplaza con los
elementos correspondientes de la página original (la página seleccionada).

La página seleccionada es aquella en la que estás trabajando y se distingue por


los elementos que aparecen alrededor de las esquinas de la página.

Si utilizas la opción del menú REPETIR EN TODAS LAS PÁGINAS , se creará un nombre
"Repeating:AutoRepetición" apropiado que se aplicará a todas las copias. A partir de este
momento, se actualizará cuando seleccionas "Actualizar objetos repetidos".

Puedes aplicar el nombre repetido a cualquier selección (p.ej.: un grupo de botones)


seleccionando todos los botones y aplicando el nombre a toda la selección de una vez.
Pero ten en cuenta que si quieres trabajo por separado con distintos objetos en diferentes
partes de la página (p.ej.: encabezados y pies de página), éstos deben tener un nombre
Repetido distinto (p.ej.: Repetido: pie de página).

Detención de la repetición de objetos


La función ARREGLO > DETENER REPETICIÓN te permite desactivar la naturaleza de
repetición de un objeto o en todas las copias de ese objeto en tu sitio web.

Utiliza esta opción cuando, por ejemplo, hayas utilizado ARREGLO > REPETIR EN TODAS LAS
PÁGINAS para copiar un objeto en todas las páginas de tu sitio web, pero luego quieras
Trabajar con objetos 117
modificar dichos objetos para que sean diferentes en cada página de forma que dejen de
estar conectados entre sí. Simplemente selecciona uno de los objetos y escoge ARREGLO
> DETENER REPETICIÓN. Se te preguntará si quieres dejar de repetir el objeto seleccionado
o todas las copias del objeto. Escoge la opción TODOS . Ahora, cada copia puede editarse
de forma independiente y la próxima función "Actualizar repetición" no las modificará.

Arreglo > Detener repetición también es útil si quieres crear una copia de un objeto
repetido en una página (p.ej. un pie de página o un logo) y no quieres que esa copia se
actualice con "Actualizar repetición". En este caso escoge la opción SÓLO ESTA COPIA
cuando se te pregunte.

Ten en cuenta que no puedes usar Arreglo > Detener repetición para las barras de
navegación con la opción BARRA DE NAVEGACIÓN DEL SITIO activada en el DIÁLOGO DE
BARRAS DE NAVEGACIÓN . Esto es porque las barras de navegación del sitio se actualizan
siempre en toda la página. Consulta el capítulo Barras de navegación para más
información sobre las barras de navegación del sitio.

Encabezados/Pies de página
Puede ocurrir que tengas páginas de distintas longitudes y que quieras que algunos de los
objetos repetidos se inserten en una posición determinada como los encabezados y los
pies de página. MAGIX Web Designer 6 realiza esto automáticamente.

La posición del objeto repetido en la página determina si será considerado un encabezado


o un pie de página. Los objetos repetidos de la mitad superior de la página se moverán a
la misma posición de acuerdo a la altura de cada página. Los otros objetos repetidos
(aquellos que no cubran ningún área de la parte superior de la página) se moverán a la
misma posición, en relación con la parte inferior de la página.
118 La herramienta de edición de formas

La herramienta de edición de formas


La herramienta de EDICIÓN DE FORMAS es la herramienta principal para crear
curvas, líneas y formas precisas, así como para editar y modificar las líneas y las
formas.

Añadir/Cambiar/Editar indicador
Crear curva
Crear línea
Unión en curva
Unión marcada
Separar en puntos
Eliminar puntos
Invertir trayectoria
Posición de los controles deslizantes
Suavizado

La barra de información, que se muestra arriba, ofrece una amplia variedad de controles,
incluyendo un control numérico muy preciso.

Todas las líneas y formas en MAGIX Web Designer 6 están formadas a partir de una
secuencia de curvas y secciones de línea. Muchas veces, las curvas se denominan Bézier,
en honor al primer matemático en describirlas.

Estas secciones o segmentos de una línea están señalados por pequeños controles
deslizantes negros. Puedes arrastrar, añadir y eliminar estos controles deslizantes para
manipular la forma de la línea o contorno.
La herramienta de edición de formas 119

Para dibujar un segmento de línea recto

Para comenzar una línea recta en la herramienta de EDICIÓN DE FORMAS

1. Haz clic donde quieras comenzar la línea. (Puedes comenzar una línea en cualquiera
de los extremos; no es necesario trabajar de izquierda a derecha, ni de arriba hacia
abajo). Esto crea un control deslizante. Este se ve como un cuadrado rojo para
señalar que está seleccionado.
2. De ser necesario, selecciona el botón CONVERTIR EN LÍNEA de la barra de
información. (Shortcut L). Esto te garantiza que el próximo clic dibujará un segmento
de línea recto.

Haz clic donde quieras colocar el próximo control deslizante o haz clic y arrastra y después
suelta el botón del ratón cuando la línea sea correcta. Esto crea un segmento de línea y
selecciona el nuevo control deslizante del extremo.

Mezclar líneas curvas y rectas

Para crear un objeto que sea una mezcla de segmentos rectos y curvos, cambia entre los
botones CONVERTIR EN CURVA y CONVERTIR EN LÍNEA mientras creas el objeto. (O pulsa L o
C de tu teclado).

Para dibujar un segmento de línea curvo:

Esto es similar a iniciar una línea recta (descrito anteriormente).

1. Haz clic donde quieras comenzar la línea.


2. De ser necesario, selecciona el botón CONVERTIR EN CURVA . (Shortcut C)
3. Haz clic o arrastra (igual que lo descrito para las líneas rectas) para crear un segundo
control deslizante y un segmento curvo se añadirá a la línea.
120 La herramienta de edición de formas

Un segmento curvo tiene CONTROLES DE CURVA asociados con el control deslizante de


punto seleccionado. Puedes arrastrarlos para ajustar el ángulo y el radio de la curva.

Extender la línea.

Asegúrate de seleccionar un punto de control deslizante que se encuentre en un extremo


(contorno rojo) y después haz clic para añadir una nueva sección de línea o curva. Cada
clic sucesivo coloca un nuevo punto de control deslizante y dibuja un nuevo segmento de
línea a partir del punto de control deslizante seleccionado.

Finalizar la línea

×+ clic completa la línea (manténla seleccionada), o pulsa "Esc" para terminar la línea y
deselecciónala. El próximo clic creará una nueva línea.

Añadir un nuevo punto de control

La herramienta de EDICIÓN DE FORMAS tiene tres modos dependiendo si no hay ningún


punto de control seleccionado (un clic iniciará una nueva línea), si está seleccionado un
control del extremo de la línea (un clic añadirá una nueva sección) o si está seleccionado
uno o más controles (puedes arrastrar o cambiar los controles deslizantes).

En el modo actual, la barra de información muestra


lo siguiente:

• NUEVO :
clic para comenzar una nueva línea.
• AÑADIR :
clic para extender la línea.
• CAMBIAR : arrasta o elimina puntos de control.

Esto sólo es aplicable a la herramienta de edición de formas.


La herramienta de edición de formas 121
Al final de una línea:

Selecciona la línea, después:

1. De ser necesario, haz clic en el punto de fin para seleccionarlo.


2. Coloca el cursor y haz clic para añadir una nueva sección.

En el medio de una línea:

Selecciona la línea, después:

1. Haz clic sobre la línea para añadir un nuevo punto de control sobre la línea.
2. Arrastra el punto de control a la posición deseada.

Al inicio de una línea:


Si el punto de fin está seleccionado y haces clic sobre el punto de inicio, la forma se
cerrará. Esto se describe en "Cerrar una forma". Para añadir un nuevo control deslizante
en el inicio de una línea:

1. Termina la línea con × + clic.


2. Haz clic en el punto de inicio.
3. Coloca el cursor en posición y haz clic.

Seleccionar múltiples puntos de control

Es posible que quieras seleccionar varios puntos de control para, por ejemplo, eliminarlos
o moverlos como un grupo o cambiar una región de puntos a líneas curvas o rectas. Para
esto:

1. Selecciona un punto de control con un clic.


2. ×+clic sobre otros puntos de control para seleccionarlos. (×+clic también elimina la
selección).
- O ×+Ctrl+clic sobre un punto de control para seleccionar todos los puntos de
control de la línea.
- O arrastra el cursor del ratón diagonalmente para crear un rectángulo de
selección. Todos los puntos de control que se encuentren dentro del rectángulo
se seleccionarán.
122 La herramienta de edición de formas
- O ×+ arrastra el cursor del ratón diagonalmente para crear un rectángulo de
selección. Esto añade todos los puntos dentro del rectángulo a aquellos que ya
están seleccionados.
3. Si la línea tiene uno o más puntos de control seleccionados:
- Fin mueve la selección al final de la línea.
- Inicio mueve la selección al comienzo de la línea.
- Tab mueve la selección al próximo punto de control hacia el fin de la línea.
- ×+tab mueve la selección al próximo punto de control hacia el inicio de la línea.

Los puntos de inicio y fin son importantes cuando se aplican flechas.

Eliminar puntos

Selecciona el o los puntos de control tal como se describe anteriormente


y haz clic sobre el botón ELIMINAR PUNTOS (barra de información del
EDITOR DE FORMAS ) o pulsa la tecla Supr.

Mover puntos de control - Herramienta de edición de


formas

Puedes mover el o los controles deslizantes seleccionados:

• Arrastra los controles deslizantes usando el ratón.


• O utiliza las teclas de flechas de tu teclado.

O para mover un solo control deslizante, introduce los valores nuevos en los campos de
texto de la barra de información (ver más abajo).

Utilización de los campos de texto de la barra de información


Los dos campos de texto
centrales siempre muestran
las coordenadas X/Y del
punto seleccionado.

Los campos X/Y de al lado indican las coordenadas de los controles deslizantes de curva
a cada lado del punto seleccionado.

Por defecto, las coordenadas X/Y se miden a partir de la esquina inferior izquierda de la
página. Puedes cambiar esto en la pestaña "Cuadrícula y regla (en la página 334)" en el
diálogo de opciones.
La herramienta de edición de formas 123
Si el punto seleccionado se encuentra al final de una sección de línea curva, los campos
izquierdos muestran la longitud y el ángulo de la línea. Puedes ajustar estos valores
introduciendo uno nuevo y pulsando Intro.

Longitud y ángulo para la línea recta


Posición del punto seleccionado
Posición del control de la curva

Suavizar una línea

Solo con herramienta de edición de forma.

Las formas importadas de un examinador pueden contener puntos innecesarios sobre las
líneas. Las líneas con demasiados puntos pueden ser poco manejables y reducir la
velocidad de renderización. MAGIX Web Designer 6 puede suavizar la línea para eliminar
puntos innecesarios.

Selecciona todos los puntos de la parte de la línea que quieres suavizar. (Lee más arriba).
Es probable que la forma más sencilla de seleccionar una gran cantidad de puntos sea la
selección con arrastre sobre la región en la HERRAMIENTA DE EDICIÓN DE FORMAS .

Arrastra la barra de suavizado del final de la barra de


información de la EDICIÓN DE FORMAS .

Los puntos eliminados se recuerdan para que puedas realizar otros cambios al suavizado
de la línea con solo ajustar la barra deslizante. Los puntos eliminados se eliminan cuando
realizas otra edición a la línea como, por ejemplo, arrastrar un control deslizante.
124 La herramienta de edición de formas

Consejo: para asegurarte de que no se borren puntos importantes, comprueba que no


estén seleccionados. (×+clic sobre un punto seleccionado para eliminar la selección).

Restringir la línea

Cuando arrastras un punto de control y pulsas la tecla de


restricción (Ctrl), el movimiento se limitará al ángulo de
restricción (controlado en el diálogo de OPCIONES , en la
pestaña GENERAL ). Al arrastrar un control deslizante de
curva, el ángulo está restringido.

Cambiar curvas

Uso del control de curva


Arrastrar el control de curva ajustará la curva de los segmentos de curva contiguos.

Mueve los controles deslizantes de curva hacia o desde el


punto de control para arrastrar la curva en la dirección
requerida.

Arrastrar el segmento de línea


También puedes cambiar la curva, arrastrando el segmento de línea entre los puntos.

Nota la diferencia entre arrastrar una línea para cambiar su forma y hacer clic en la línea
para añadir un nuevo punto de control. Arrastrar un segmento de línea recto lo cambia a
un segmento de línea curvo.
La herramienta de edición de formas 125
Crear uniones en punta
Generalmente, MAGIX Web Designer 6 dibuja una curva suave a través de un punto de
control. Para esto, los dos controles de curva a cada lado del punto de control están
unidos. Si se mueve un control de curva, también se moverá el otro.

Muchas veces quieres crear una unión en punta. Para esto, necesitas desvincular los
controles de curva:

1. Haz doble clic sobre el punto de control.


2. O selecciona el punto de control y:

Haz clic sobre el botón UNIÓN EN PUNTA Z o pulsa Z en tu


teclado.

Ahora puedes mover cada control de curva de forma independiente.

Crear uniones en curva


Para convertir una unión en punta en una curva:

1. Haz doble clic sobre el punto de control.


2. O selecciona el punto de control y:

Haz clic sobre el botón UNIÓN EN CURVA S o pulsa S en tu


teclado.

Los dos controles de curva se han vinculado y se mueven a lados opuestos del punto de
control. Esto puede cambiar la forma de la curva.

Convertir una línea recta en una curva (y viceversa)

1. Selecciona los puntos de control de los dos finales del segmento de línea.
2. Haz clic en CONVERTIR EN LÍNEA o CONVERTIR EN CURVA en la barra de información o
pulsa L o C en tu teclado.
126 La herramienta de edición de formas

Después de cambiar el tipo de línea, es posible que quieras mover los controles de curva
para una transición más suave entre los segmentos de línea curvos y rectos.

Puedes seleccionar varios segmentos de línea y convertirlos. Los puntos de control de


ambos extremos del segmento deben estar seleccionados.

Unir líneas

Para unir líneas ambas tienen que estar seleccionadas (los deslizantes de punto se
muestran en ambas líneas):

Con la herramienta de SELECCIÓN, mantén presionado "×" y haz clic en las línea para
seleccionarlas (si ya te encuentras en la herramienta de EDICIÓN DE FORMAS , pulsa "Alt +
S" si quieres ir a la herramienta de SELECCIÓN , para seleccionar la segunda línea, presiona
"×+ clic", y luego "Alt + S" para volver a la herramienta de EDICIÓN DE FORMAS .

El modo de selección de objetos está explicado en detalle en el capítulo "Selección de


objetos (en la página 89)".

Una vez que ambos objetos están seleccionados, en la herramienta de EDICIÓN DE


FORMAS , arrastra el control deslizante del extremo de la línea hasta el extremo de la otra
línea. Mientras arrastras, el cursor del ratón mostrará un símbolo + para indicar que las
líneas se unirán.

Si los extremos de ambas líneas ya se encuentran uno muy cerca del otro, pero no están
unidos, puedes ampliar el tamaño con el zoom, o alejar el punto de fin y después volverlo a
arrastrar para llevarlo hasta el punto de fin y ver el "+" que indica que las líneas se unirán.

Para crear una forma con relleno, arrastra los otros dos controles deslizantes de fin para
que se unan. Puesto que unes los controles deslizantes de fin, sólo puedes unir líneas y no
La herramienta de edición de formas 127
formas. Las formas son objetos cerrados y, por lo tanto, no tienen controles deslizantes de
fin.

Separar una forma

Si quieres separar una línea o una forma: selecciona un punto de control existente de la
línea o contorno de la forma, o crea uno nuevo donde quieres separar la línea (clic sobre la
línea en la herramienta de EDICIÓN DE FORMAS; ver arriba).

Haz clic sobre el botón SEPARAR EN PUNTOS o pulsa la B de tu teclado.

Si separas una línea, el cambio no será visible. Sin embargo, si mueves un punto de
control, solo se moverá una parte de la línea. Si separas una forma, se convertirá en una
línea. El relleno desaparecerá.

Nota: cortar formas (parte de Arreglo > Combinar formas) te permite separar formas en
dos formas individuales. Esta función se describe en el capítulo Trabajar con formas (en la
página 130).

Cerrar una forma

Una forma es un objeto cerrado sin controles de inicio ni fin. Sólo las formas pueden tener
un relleno de color.

Para cerrar una forma:

1. Crea un objeto abierto cuyo punto de control de fin


se encuentre cerca del punto de control de inicio.
Todos los puntos de control, salvo el de fin, deberían
encontrarse en las posiciones deseadas.
2. Coloca el cursor sobre el control deslizante de fin.
3. Arrastra el control deslizante de fin hasta el control
deslizante de inicio y suelta la tecla del ratón. Los dos
controles deslizantes se unirán.

O:
128 La herramienta de edición de formas
1. Crea un objeto abierto con todos los controles
deslizantes en sus posiciones correctas. No dibujes
el segmento de línea final.
2. Mueve el cursor sobre el punto de inicio. Aparecerá
un + a la derecha del cursor cuando se encuentre
sobre el control deslizante de inicio.
3. Haz clic para crear el segmento final de la línea y
cerrar la forma.

O:

1. Escoge la herramienta de EDICIÓN DE FORMAS.


2. Haz clic sobre un punto de fin para seleccionarlo.
3. Pulsa la tecla "↵".

Cualquiera de estas opciones cerrará la forma. Si hay un color de relleno actual, la forma
se llenará con ese color.
Manejo de formas 129

Manejo de formas

Combinar formas

La opción del menú ARREGLO > COMBINAR FORMAS te ofrece una amplia gama de
opciones avanzadas para combinar formas con el objetivo de crear nuevas formas como,
añadir, separar o cortar. Puedes utilizar la combinación de formas en cualquier tipo de
objeto, incluido los mapas de bits.

Crear agujeros en las formas


Escoge ARREGLO > COMBINAR FORMAS > SUSTRAER FORMAS . Esto es similar a utilizar unir
formas (descrito anteriormente). Las diferencias son:

• La forma de arriba (o el grupo de arriba) recibe un agujero de las otras formas.


• Los atributos y colores de línea de las formas subyacentes no se modificarán.
• Combinar formas modifica las líneas físicamente. La única forma de restaurar las formas
originales es utilizar deshacer.
• La cantidad de formas superpuestas no tiene efecto.

Fusionar varias formas en una sola


Por ejemplo, para crear la forma de la derecha a partir de las tres formas de la izquierda:

1. Crea dos círculos y el rectángulo.


2. Selecciona las tres formas.
3. Escoge ARREGLO> COMBINAR FORMAS > AÑADIR FORMAS.

La nueva forma tomará los atributos y colores de la forma de arriba (en este caso el
rectángulo de la ilustración.)
130 Manejo de formas
Intersección de formas
Con FORMAS DE INTERSECCIÓN , el nuevo objeto se crea de esas partes de las formas
inferiores que están cubiertas por el objeto de arriba.

Selecciona las formas que quieres utilizar y la


forma de arriba.

Escoge ARREGLO> COMBINAR FORMAS > FORMAS


DE INTERSECCIÓN . Esto crea una nueva forma.
La forma de arriba desaparece.

Los atributos y colores de línea de las formas subyacentes no se modificarán. Las áreas no
cubiertas por la forma de arriba se eliminarán. La forma de arriba puede ser un grupo para
una sustracción para completa. (Los grupos se describen en el capítulo Manejo de objetos
(en la página 107)).

Cortar formas
MAGIX Web Designer 6 te permite cortar formas en dos o más partes. Puedes usar un
objeto sólido o una línea. Por ejemplo, para cortar un segmento de un círculo:

1. Crea un círculo y un triángulo arriba


2. Selecciónalos.
3. Escoge ARREGLO> COMBINAR FORMAS >
CORTAR FORMAS . Las esquinas del
triángulo cortarán el círculo en dos formas.
El triángulo desaparecerá.
4. Ahora puedes arrastrar el segmento fuera
del círculo.

También puedes utilizar una línea para cortar un objeto:


Manejo de formas 131
La línea debería estar dibujada completamente a través del objeto y extenderse más allá.
(Como se muestra en la ilustración.) Si la línea es demasiado corta, sólo se realizará un
pequeño corte.

Cambiar el ancho de línea (grosor)

Para cambiar el ancho de la línea o del contorno de una forma, primero selecciona el
objeto o los objetos:

Introduce un nuevo valor para el ancho de línea en el campo de texto de la


barra de control ESTÁNDAR o escoge del menú uno de los grosores de
línea por defecto.
El grosor de la línea se mide tradicionalmente en puntos (abreviación: pt). 1 punto es 1/72
de una pulgada o aprox. 0,3mm, o un poco menos del grosor de un píxel de pantalla si se
visualiza al 100% del zoom.

Puedes introducir el valor del ancho en cualquier unidad y MAGIX Web Designer 6 lo
convertirá al número correcto de puntos. Por ejemplo, puedes introducir 0,5cm y
obtendrás una línea con un grosor de medio centímetro, pero el campo del ancho de línea
indicará un valor cercano a 14pt.

Si no has seleccionado ningún objeto y cambias el valor del grosor de la línea, esto
cambiará el ancho por defecto para todas las nuevas líneas.

Galería de líneas

La GALERÍA DE LÍNEAS puede utilizarse para aplicar una gama de estilos o atributos de línea
como, plantillas con guiones, puntas de flecha y más.

Para ver la GALERÍA DE LÍNEAS :

• Escoge "HERRAMIENTAS > GALERÍAS > GALERÍA DE LÍNEAS " ("F12").


• O haz clic en el botón de GALERÍA DE LÍNEAS en la barra de control de GALERÍAS .
132 Manejo de formas
La GALERÍA DE LÍNEAS está separada en secciones. Para abrir o cerrar una sección, haz
clic en el pequeño icono de carpeta de la ventana de la galería.

Ancho de línea
Tipo de unión
Extremo de línea

Para aplicar cualquier estilo o atributo de línea desde la galería puedes:

• Arrastrar y soltar el estilo deseado desde la galería hasta la forma o línea.


• O hacer doble clic sobre el estilo deseado en la galería.
• O selecciona el estilo y después haz clic sobre el botón APLICAR.

Ancho de línea
El campo de texto que se encuentra arriba de la galería es una copia del campo de texto
de la barra de control ESTÁNDAR .

Modelo de guión
Esta sección ofrece una selección de estilos de línea con guiones.

Puntas de flecha
La forma más sencilla de aplicar una punta de flecha es arrastrar y soltar la punta de flecha
desde la galería hasta el extremo apropiado de la línea.

Como alternativa para aplicar una punta de flecha:

• Haz doble clic sobre la punta de flecha en la galería.


• O selecciona la punta de flecha deseada y pulsa APLICAR.
Manejo de formas 133
Web Designer tiene dos tipos de diseños de flecha: comienzo y fin. Si la línea ya tiene, por
ejemplo, una punta de flecha de comienzo, la punta de flecha aplicada se colocará
automáticamente en el extremo final de la línea.

Si la línea no tiene puntas de flecha y pulsas el botón APLICAR o haces doble clic sobre un
estilo para aplicarlo, la punta de flecha se colocará al final de la línea.

El tamaño de la punta de flecha depende del ancho de la línea. Las líneas más anchas
tendrán puntas de flecha proporcionalmente más grandes.

Si pulsas "Ctrl" y haces doble clic sobre una punta de flecha o estilo de final se aplicará en
el otro extremo de la línea.

Cambiar el tipo de unión


Este control en la parte superior de la GALERÍA DE LÍNEAS configura el estilo de las
esquinas.

Para cambiar una línea existente, selecciona la línea.


Para cambiar el tipo de unión actual, deselecciona
todas las líneas.
Selecciona el tipo deseado del menú.

Cambiar extremo de línea


Este control en la parte superior de la GALERÍA DE LÍNEAS configura el estilo de los
extremos de la línea.

Para cambiar una línea existente, selecciona la línea.


Para cambiar el extremo de línea por defecto,
deselecciona todas las líneas.
Selecciona el tipo deseado del menú.
134 Manejo de formas

Crear rectángulos y cuadrados

Para crear un rectángulo:

• O utiliza la herramienta de RECTÁNGULO ("× + F3" o "M").

Haz clic y arrastra para dibujar un nuevo rectángulo.

Crear un cuadrado
Para crear un cuadrado en vez de un rectángulo, pulsa Ctrl mientras arrastras.

Creación y edición de rectángulos con esquinas redondeadas


Para que las esquinas de tu rectángulo sean redondeadas, selecciónalo y luego
pulsa el botón "Esquinas redondeadas" en la barra de información de la
HERRAMIENTA DE SELECCIÓN .
Puedes arrastrar los controles deslizantes de las esquinas para ajustar el diámetro de las
esquinas redondeadas.

Para cambiar el tamaño de los rectángulos ve a la HERRAMIENTA DE RECTÁNGULO (y


arrastra los controles deslizantes de las esquinas) o a la HERRAMIENTA DE SELECCIÓN.

Ten en cuenta que si cambias la relación de aspecto de una esquina redondeada de un


rectángulo utilizando la herramienta de selección (extendiendo sólo una dimensión), la
relación de aspecto de las esquinas redondeadas no cambiará. Pero si seleccionas varios
objetos o si extiendes un grupo con un rectángulo con esquinas redondeadas, la relación
de aspecto de las esquinas no se mantendrá.
Manejo de formas 135

Crear círculos y elipses

Para crear una elipse o un círculo:

Selecciona la herramienta de ELIPSES ("Shift + F4" o "L").

Los botones RADIO Y DIÁMETRO crean automáticamente círculos.

Radio
Diámetro
Creación con límites

Con el botón de CREACIÓN CON LÍMITES seleccionado, arrastra el ratón a través del lienzo y
se creará una elipse. Para crear un círculo en vez de una elipse, pulsa "Ctrl" mientras
arrastras.

Selecciona la opción RADIO para dibujar círculos. El lugar en dónde empieces a arrastrar
será el centro del círculo.

Selecciona la opción DIÁMETRO . Ahora el lugar en dónde empieces a arrastrar determinará


el borde del círculo.

Puedes convertir una elipse en un círculo en cualquier momento haciendo doble clic sobre
un control deslizante.
136 Trabajar con colores

Trabajar con colores


MAGIX Web Designer 6 te permite controlar la aplicación, creación y modificación de los
colores de los objetos. Para documentos simples, puedes escoger los colores de la paleta
de colores en pantalla, la línea de colores. Las operaciones de color más avanzadas se
describen más adelante.

La línea de color

La línea de color se muestra en la parte inferior de la ventana. Te permite ver los colores de
relleno y línea, te da acceso al editor de colores y te provee la paleta de colores
predefinidos incluyendo la opción "sin color".

MUESTRA DE COLOR: la parte exterior de la muestra de color en el extremo izquierdo


muestra la línea de colores, mientras que el centro muestra el color de relleno. Estos
son los colores de cualquier objeto seleccionado o los atributos de color actuales si
no se ha seleccionado ningún objeto.
Este botón permite el acceso al editor de color (en la página 140).
SELECTOR DE COLOR: usa la pipeta para escoger un color de cualquier parte del
documento o cualquier parte de la pantalla del ordenador. Consulta Usar la pipeta
para escoger colores (en la página 141), para más detalles.
SIN COLOR: haciendo clic aquí puedes aplicar un "relleno sin color". Con "Shift+clic"
puedes aplicar "sin color" a una línea. Ten en cuenta que no es el mismo que 100 %
transparente. "Sin color" y transparencia son diferentes. Una forma con transparencia
aplicada sigue siendo una forma sólida, mientras que una forma rellena con "sin
color" queda hueca. El botón SIN COLOR también se puede utilizar para restaurar los
colores originales de una foto a la que se le haya aplicado un color continuo.
Color de relleno actual
Color de línea actual

Si la longitud de la línea de color excede la ventana, puedes desplazarte por la línea de


color con la barra de desplazamiento inferior o arrastrando la línea de color con "Alt +
arrastrar".

MAGIX Web Designer 6 te suministra varias opciones para el tamaño visualizado del color
de línea (descrito en Personalización de Web Designer)
Trabajar con colores 137
Colores de la línea de colores

Colores con nombre (originales): primero se encuentran los colores con nombre (si se
encuentran presentes en el documento, ver más abajo). Los colores con nombre se
utilizan para asignar colores originales a las plantillas y diseños, para que el esquema
de color de un diseño pueda cambiarse sin tener que editar cada objeto de forma
individual.
Colores vinculados: son aquellos colores que están relacionados con una sombra o
un matiz y se muestran de forma diferente en la línea de color (pequeños rectángulos
redondeados), de modo que resulta mucho más fácil distinguir los colores con
nombres independientes de aquellos que están vinculados a un color principal. Leer
el capítulo Creación de un tinte, una tonalidad o un color vinculado (en la página
145).
Colores de paleta: hay una paleta "estándar" de 46 colores predefinidos. Hay 5
sombras de 7 colores estándar y 10 sombras de grises, negros y blancos. Los
colores de la paleta estándar no se pueden editar (es decir, no son colores con
nombre) y tienen una selección simple y limitada de colores que se utilizan para
aplicarlos a objetos (ya sea arrastrando hasta el objeto o mediante clic).

Los marcadores pequeños en los iconos de color muestran cuál de los colores con
nombre (si hay alguno) o colores de paleta se han aplicados al objeto seleccionado.

Los marcadores en forma de rombo muestran los colores usados por los
objetos seleccionados. Un rombo en la esquina superior izquierda indica el
color de relleno, en la esquina superior derecha indica el color de línea.
Los marcadores en forma de cruz muestran los atributos de color activo, si no
hay ningún objeto seleccionado. El color de línea a la derecha, el color de
relleno a la izquierda.
Los marcadores triangulares muestran los colores de un relleno si has aplicado
alguno.

Esto funciona también escogiendo un color con el selector de color de un objeto existente,
consulta Usar la pipeta para escoger colores (en la página 141). Los marcadores de línea
de colores se actualizan inmediatamente e indican el color del objeto bajo la pipeta al
arrastrarlo alrededor.

Reordenar los colores de la línea de color.


Es posible que prefieras cambiar el orden de los colores de la línea de color. Simplemente
pulsa Ctrl y arrastra los colores sobre la línea. Con esto también se reordenará la GALERÍA
DE COLORES . Sólo los colores con nombre pueden ser reorganizados en la línea de color.

Menú contextual de la línea de colores


Haz clic derecho sobre un color de la línea de colores para ver un menú contextual con las
siguientes opciones:
138 Trabajar con colores
EDITAR Abre el editor de color con el color seleccionado (no
disponible para los colores de la paleta)
ESTABLECER COLOR DE RELLENO Configura este color como el color de relleno o de línea
/ ESTABLECER COLOR DE LÍNEA del objeto seleccionado
RENOMBRAR Cambiar el nombre del color con nombre (no disponible
para los colores de paleta)
ELIMINAR Borra el color con nombre (no disponible para los
colores de paleta)

Si el objeto seleccionado es un mapa de bits, las opciones de color de relleno y línea se


reemplazarán con ESTABLECER COLOR OSCURO DE TONO CONTINUO / ESTABLECER COLOR
CLARO DE TONO CONTINUO. Lee Coloreado de mapa de bits (en la página 183) para más
información.

Con un clic derecho sobre la opción "sin color", las opciones de color de relleno y línea se
reemplazarán por ELIMINAR COLOR DE RELLENO / ELIMINAR COLOR DE LÍNEA . Esto configura
los atributos del objeto seleccionado a "sin color".

Aplicación de colores de relleno y línea mediante arrastrar y


soltar

• Para aplicar un color de relleno a un objeto (seleccionado o sin seleccionar), arrastra un


color desde la línea de colores y suéltalo en el centro de la forma.
• Para establecer el color de línea o contorno, suelta el color sobre el contorno en vez de
en el centro.
• Para cambiar el color actual de relleno, arrastra un color a un espacio en blanco.
• Para cambiar el color de fondo de la página, pulsa "Ctrl" y arrastra un color hasta el
fondo de página.

Al arrastrar colores, un indicador al lado del cursor te dirá cuál será el efecto al soltar el
color:

Establecer un color de relleno liso (cuando se arrastra sobre un objeto) o los colores
intermedios de un relleno multicolor (en la página 186).

Establecer color de línea (cuando se arrastra sobre una línea).

Establecer color de relleno actual (cuando se arrastra sobre un espacio vacío).

Establecer color de inicio de relleno con gradación (cuando se arrastra sobre el inicio
de un relleno).

Establecer color de fin de relleno con gradación (cuando se arrastra sobre el fin de
un relleno).
Trabajar con colores 139
Establecer color de fondo de página (cuando se arrastra un color hasta la página).

En vez de arrastrar y soltar, si has seleccionado un objeto, puedes hacer un simple clic
sobre la línea de color. Se abrirá un menú contextual de la línea de color en dónde puedes
definir el color de línea y de relleno.

En los otros casos, puedes modificar el color de la línea con "Shift" + clic sobre la línea de
color.

Si has seleccionado una foto o una forma con relleno de mapa de bits, un clic sobre el
color de línea aplicará un color continuo al mapa de bits. Esto significa, que el mapa de
bits se convertirá a una escala de grises (blanco y negro) y el color seleccionado se usará
como un color claro de tono continuo. En general, el color continuo negro es negro.
Puedes configurar ambos colores continuos a través del menú contextual de la línea de
colores (lee más arriba). Lee Coloreado de mapa de bits (en la página 183) para más
información.

Para establecer la opción "sin color" a un relleno o línea, realiza


la función descrita anteriormente, pero escoge la opción "Sin
color" en vez de un color.

Editar el color de un objeto

Selecciona el objeto cuyo color quieres cambiar.

Para editar el color de relleno del objeto o objetos seleccionados

• Escoge HERRAMIENTAS > EDITOR DE COLOR (shortcut Ctrl+E).


• O haz clic sobre el icono del EDITOR DE COLOR en la línea de colores.
• O haz doble clic sobre el panel de color del relleno actual sobre la línea de color.

Para editar el color de línea del objeto o objetos seleccionados

• Haz clic derecho (o ×+clic) sobre el icono del EDITOR DE COLOR


• O haz doble clic sobre el panel de color del línea actual.

Esto muestra el EDITOR DE COLOR que te permite seleccionar cualquier color del espectro.
A diferencia de la mayoría de los programas gráficos, el Editor de color puede permanecer
en pantalla mientras continúas trabajando. Cambia para reflejar el color de los objetos
seleccionados, lo que te permite ajustar el color rápidamente.
140 Trabajar con colores

El editor de color

El editor de color se utiliza para cambiar el color de los objetos del documento.

Cuando edites el color puedes arrastrar la pipeta para escoger colores de la pantalla,
incluso de otras ventanas abiertas
Selecciona el color a editar: Color de relleno/color de línea del objeto seleccionado o
cualquier color con nombre (original)
Haz clic en la etiqueta para crear un color con nombre
Haz clic para mostrar los controles de color ampliados
Color anterior
Color actual
Arrastra hacia aquí para seleccionar cualquier tonalidad del tono seleccionado
Arrastra hacia aquí para seleccionar cualquier tono

La forma más fácil de crear un nuevo color es seleccionar un tinte de la línea de color
inferior. Todos los matices de este tinte se verán en la sección superior, por lo que podrás
hacer clic o arrastrar desde la sección superior para seleccionar el nuevo color. Verás que
los objetos seleccionados cambian de color a medida que los ajustas en el editor de color
("Vista previa en vivo").

Por ejemplo, para seleccionar un color rosa, que es un matiz pálido del rojo, selecciona el
color rojo en la sección inferior y después escoge un rojo muy pálido (rosa) en el área
superior derecha de la sección superior.

Color previo y actual


Mientras arrastras hasta el editor de color, las dos pequeñas muestras que se encuentran
en la esquina superior derecha del Editor de color muestran el color actual y el previo
(antes de que comenzaras con la edición). Esto es útil cuando quieres realizar un cambio
pequeño y comparar entre el color nuevo y el anterior.
Trabajar con colores 141
Usar la pipeta para escoger colores
En vez de seleccionar tintes y tonalidades en el EDITOR DE COLOR puedes escoger un color
de cualquier parte del documento o de tu monitor, incluso de otras ventanas y programas.

Para ello haz clic y arrastra la pipeta. A medida que arrastras verás que el Editor de Color
toma el color que se encuentra debajo de la pipeta. Suelta el botón del ratón cuando
tengas el color deseado. Esta es una forma fácil y rápida de utilizar el mismo color o copiar
colores de un objeto a otro.

El selector de color no escoge por sí solo el color de pantalla (RGB). En cambio, si señalas
una forma con un color de relleno sólido, el selector tomará una muestra del color actual
de esa forma, incluyendo el modelo de color (RGB, HSV o CMYK), de forma tal que el
color es copiado de manera exacta en el objeto(s) seleccionado. Si el color elegido es un
color con nombre o de paleta, en vez de copiar simplemente el color, el selector de color
aplicará el mismo color al objeto(s) seleccionado.

Si el objeto bajo el cursor del ratón es complejo (p.ej. tiene transparencia aplicada) y el
color no puede ser determinado, el color RGB de pantalla es aplicado.

El muestreo de color enseña un pequeño popup en el cursor


del ratón que indica el color que está siendo seleccionado en
ese punto. Se tratará o bien del nombre de color de paleta, el
nombre de un color con nombre, o el modelo de color y valor
del color.

Sin embargo, si quieres usar muy seguido el mismo color, se recomienda que en su lugar
uses un color con nombre.

Operaciones de color avanzadas


Haz clic sobre VER OPCIONES AVANZADAS en el editor de color para ver la parte
inferior del diálogo que te ofrece más opciones.

Sin color de relleno


Valores de colores HSV
Valor de color hex RGB
Para leer más sobre tipos de colores, consulta el capítulo Creación de un tinte, una
tonalidad o un color vinculado (en la página 145).
142 Trabajar con colores
Aquí puedes introducir valores precisos RGB (o HSV). En general, se introduce un color
hexadecimal RGB para los gráficos web. Los campos H , S y V te permiten especificar el
color con un valor porcentual HSV (valor de saturación de tinte). En el campo # puedes
introducir el valor RGB en números hexadecimales (0-F).

Aquí también están disponibles los botones de "Sin color de relleno" y de "Ayuda".

Colores locales y colores originales

Web Designer tiene dos tipos de colores:

• Los COLORES LOCALES se utilizan en un sólo lugar del documento. Cada objeto tiene un
color por separado y nada se comparte. Esto es útil cuando quieres cambiar el color de
un objeto sin afectar otros objetos. Los colores locales son el método más sencillo para
documentos simples que utilizan relativamente pocos colores. "Aplicar color" y "Editar el
color de un objeto" explicados anteriormente se refieren al trabajo con colores locales.
• Los COLORES ORIGINALES (O COLORES CON NOMBRE) pueden utilizarse una y otra vez
en el documento. (Son el equivalente a los estilos de un procesador de textos.) Los
colores originales se utilizan en las plantillas y brindan un aspecto consistente a los
elementos de la página como los botones o las barras de navegación. Cualquier edición
que se realice a un color con nombre se reflejará en todos los objetos o partes del
dibujo que usen ese color. También puedes copiar colores originales entre documentos.
Si el diseño ya tiene colores originales y cargas o pegas plantillas de la galería de
diseños que contengan colores originales con el mismo nombre, el programa te
preguntará si quieres que el color original importado sea igual que los ya existentes. Se
le adjudican nombres consistentes a los colores originales de las plantillas para que
coincidan con los diferentes colores originales de los elementos que importes.

IMPORTANTE: si seleccionas un objeto de la página que tiene un COLOR CON NOMBRE y lo


modificas con el editor de color, el color se convertirá en un COLOR LOCAL en vez de un
COLOR CON NOMBRE . Si lo que quieres hacer es cambiar el COLOR CON NOMBRE y todas
las veces en las que se utiliza, entonces debes editar el COLOR CON NOMBRE (en la página
144)).

Esquemas de colores temáticos

Muchos de los temas web ofrecidos en la GALERÍA DE DISEÑOS y en los paquetes de


plantillas que pueden adquirirse de forma separada incluyen esquemas de colores
alternativos que pueden aplicarse fácilmente a los sitios web que utilizan el mismo tema
para transformar el esquema de color de forma instantánea. Los esquemas de colores se
encuentran en general en la galería de diseños en cada tema después de todos los
diseños y elementos gráficos independientes que conforman el tema. Todos tienen el
mismo "esquema de colores" en sus títulos en la galería de diseños, por lo que pueden
identificarse fácilmente.

Para aplicar un esquema de colores a tu sitio web, simplemente arrastra el esquema


desde la galería de diseños y suéltalo en tu página. Puedes intentar aplicar los esquemas
de colores de un tema a un sitio web creado a partir de plantillas de otro tema. Pero
Trabajar con colores 143
obtendrás resultados mezclados y algunos esquemas no funcionarán de forma aceptable
con algunos temas. Por lo tanto, para mejores resultados, utiliza los esquemas de colores
del tema que has utilizado para crear tu sitio.

Uno de los esquemas de colores suministrados con cada tema concuerda con los colores
por defecto utilizados por ese tema. Esto te permite regresar fácilmente a los colores
originales, si lo prefieres, después de experimentar con esquemas alternativos.

Por supuesto, no es necesario que utilices los esquemas de colores incluidos para
cambiar los colores de tu sitio web. Puedes personalizar los colores del tema y elegir la
combinación de colores que te guste. Consulta "Edición de colores con nombre (en la
página 144)".

Creación de tus propios esquemas de colores

Es muy fácil crear tus archivos de esquemas de colores, que puedes compartir con los
usuarios de Web Designer para que ellos los utilicen en las páginas web creadas con el
mismo tema.

1. Carga una de las plantillas de página para el tema. Escoge una que muestre todos
los colores del tema de forma más efectiva. De ser necesario, puedes agregar más
elementos a la página para incluir toda la gama de colores temáticos.
2. Edita los colores con nombre del tema uno por vez, tal como se describe a
continuación en la sección "Edición de colores con nombre" (en la página 144).
3. Una vez que estés satisfecho con tu nuevo esquema de colores, utiliza ARCHIVO >
GUARDAR COMO para guardarlo. El nombre de archivo que escojas DEBE incluir
"ThemeColorScheme" como parte del nombre del archivo. Esta es la forma en que
Web Designer reconoce los archivos de esquema de colores, es decir, al buscar esa
secuencia en el nombre del archivo. También es una buena idea incluir el nombre del
tema relacionado con el esquema. Por ejemplo, si es un esquema de colores azules
para el tema "Beta", podrías llamarlo "BetaThemeColorSchemeAzul.web".

Para comprobar tu esquema de colores, arrástralo y suéltalo desde el explorador de


archivos hasta la página con los colores temáticos por defecto. La página debería cambiar
de color instantáneamente con tu esquema de colores.

Creación de nuevos colores con nombre

Si quieres usar el mismo color en diferentes partes del dibujo, y si existe la probabilidad de
que quieras cambiarle el color en el futuro, se recomienda que crees un COLOR CON
NOMBRE . Esto es fácil en MAGIX Web Designer 6:

Selecciona el objeto que tiene el color que quieres usar y luego haz clic en NUEVO COLOR
CON NOMBRE en el EDITOR DE COLOR .
144 Trabajar con colores
Haz clic para crear un nuevo color con nombre Asígnale al color un nombre
adecuado, como "color del coche"
y haz clic en crear. Verás el color
nuevo añadido en la LÍNEA DE
COLOR .

Ahora podrás aplicar el color a


cualquier objeto como lo haces
habitualmente, arrastrándolo de la
línea de color y luego soltándolo, o
sólo haciendo clic (o haciendo clic
en el botón derecho para usarlo
como línea de color) para aplicarlo
como color de relleno.

Cuando editas un color con


nombre, todos los objetos que
usen este color cambiarán.

Editar colores con nombre

Para poder ver el color con nombre en el EDITOR DE COLOR,y así poder editarlo, selecciona
el EDITOR DE COLOR o arrastra y suelta el color de la línea de colores al EDITOR DE COLOR.

Ahora podrás editar el color como lo desees. Todos los objetos que utilizan ese color se
actualizarán automáticamente para mostrar el nuevo color.

Para cambiar el nombre de un COLOR CON NOMBRE , haz clic derecho sobre el EDITOR DE
COLOR y selecciona RENOMBRAR o haz clic derecho sobre el color en la línea de colores y
selecciona RENOMBRAR .

Para eliminar un color con nombre, haz clic derecho sobre el color en la línea de color y
selecciona ELIMINAR .

Colores normales, tintes, tonalidades y colores vinculados

Colores normales
Estos son los colores individuales que aplicas a los objetos.

MAGIX Web Designer 6 también puede vincular un color a otro color, es decir, cuando
cambia el color principal, el color vinculado también cambiará. Hay tres formas de vincular
un color a su: TINTE , TONALIDAD y COLORES VINCULADOS . Esta es una técnica muy útil que
te permite, por ejemplo, volver a cambiar el color un dibujo con tonalidades complejas con
un sólo clic. Algunos de los cliparts modelo utilizan esta técnica.
Trabajar con colores 145
Tintes
Los tintes están vinculados a otros colores (llamados colores principales) y son siempre
una versión más pálida que el principal. Tienen dos usos principales:

• Cuando quieres crear tonalidades más pálidas de un color principal y es posible que
quieras cambiar el color principal en el futuro y que los tintes se actualicen
automáticamente.
• Para extender el rango de colores disponibles de las tintas de impresión.
Por ejemplo, un tinte 25% rojo resulta en un color rosa. Por lo tanto, utilizando tinta roja
puedes obtener tanto un rojo puro como un rosa. De la misma forma, si estás utilizando
solamente tinta negra y blanca, podrás crear varias tonalidades de gris.
Si estás imprimiendo con una gama limitada de colores (generalmente es más
económico imprimir a uno o dos colores en vez de a todo color).

Un tinte puede estar basado en cualquier tipo de color, incluyendo otro tinte.

Cualquier cambio que se realice al color principal, también cambiará a los tintes basados
en él. Por ejemplo, es posible que definas un color rosa como 50% del color principal rojo.
Si cambias el color principal a naranja, el tinte cambiará de rosa a naranja claro.

Tonalidades
Esto permite crear colores más claros y más oscuros basados en un color principal. Si se
cambia el color principal, se modificarán también las tonalidades asociadas. Por ejemplo,
un dibujo de un coche puede utilizar tonalidades para las regiones con más luz y
tonalidades de la carrocería. Una simple edición al color principal cambiará todos los
colores, pero las tonalidades se mantendrán iguales. Por lo tanto, configurar tonalidades
es una forma muy útil de modificar colores.

Para obtener mejores resultados, el color principal debe ser un color saturado "puro". Si se
utiliza el modelo de color HSV, la saturación y el valor deberían ser 100%. Al verlo en el
EDITOR DE COLOR , la cruz debería encontrarse en la esquina superior izquierda.

Colores vinculados
Los colores vinculados son similares a las tonalidades, pero permiten más flexibilidad.
También están basados en color principal pero puedes definir los atributos que quieres
que compartan el color vinculado y el principal. Por ejemplo, puedes crear un color
vinculado que sea una versión más o menos saturada del principal, pero que el tinte y la
tonalidad sean las del principal.

Creación de un tinte, una tonalidad o un color vinculado

Ve arriba para leer la sección sobre TINTES , TONALIDADES y COLORES VINCULADOS . Te será
útil para cuando quieras encontrar el color principal de una tonalidad más clara u oscura.

Los TINTES , las TONALIDADES y los COLORES VINCULADOS deben tener un color "original"
con un nombre de color asignado, para que cuando cambies el color original también
146 Trabajar con colores
cambie su tonalidad. Por ello, de ser necesario, primero asígnale un nombre al color (ver
Creación de nuevos colores con nombre (en la página 143)).

Para crear un tinte, una tonalidad o un color vinculado:

1. Selecciona el objeto o los objetos a los que quieres aplicar el color.


2. Abre el EDITOR DE COLOR con las opciones avanzadas.
3. Selecciona la opción "color normal" en el menú desplegable situado en la parte
inferior del diálogo y elige entre las opciones TINTE , TONALIDAD, o VINCULADO .
4. En el menú desplegable del COLOR ORIGINAL , selecciona el color con nombre al que
quieres añadirle un vínculo.
5. Ajusta el TINTE, la TONALIDAD o el COLOR VINCULADO en la parte superior del editor de
color.

Si no aparecen las opciones de tinte, tonalidad y color vinculado en el menú desplegable


de "tipo de color", esto probablemente significa que aún no has creado un color con
nombre al que le quieres agregar un vínculo, o también puede ser que estás editando el
único color con nombre del diseño.

A la izquierda verás que el nuevo color tiene un poco de tinte del color original "amarillo", por ello
el editor sólo suministra tintes más claros del color original. A la derecha si seleccionas la opción
tonalidad podrás elegir cualquier tonalidad más clara o más oscura del color original.

Si quieres utilizar este color en muchas partes del documento se recomienda que le
asignes al color un nombre para que aparezca en la línea de colores y así puedas
encontrarlo más fácilmente cuando lo necesites. Haz clic sobre el ícono con forma de
Trabajar con colores 147
etiqueta para crear un nuevo nombre para un color. Ahora aparecerá en la línea de color
para que lo puedas escoger y colocar sobre otros objetos.

Editar el color principal


El objetivo principal de utilizar tintes, tonalidades y colores vinculados es que siguen los
cambios que se realizan al color principal. Para ver el resultado, intenta editar el COLOR
CON NOMBRE que es el principal (arrástralo de la LÍNEA DE COLOR hasta el EDITOR DE
COLOR y modifica el color.) Verás que los objetos con el tinte, tonalidad o color cambian en
sincronización con el color principal.

NOTA: ten cuidado de no editar el color de los objetos sobre la página a la que has
aplicado colores con NOMBRE, TINTES , TONALIDADES o COLORES VINCULADOS porque se
convertirán en COLORES LOCALES .
148 Trabajar con textos

Trabajar con textos

Introducción

Las opciones de edición de texto de MAGIX Web Designer 6 son similares a los editores
de texto o procesadores de texto, pero además suministra una amplia gama de
características que no encontrarás en esos programas.

Puedes aumentar o ampliar el texto a un tamaño muy grande.

Puedes aplicar la gama de atributos y efectos normales de MAGIX


Web Designer 6: rellenos, difuminación, transparencia, tonalidades de
color, sombras y continuar editando el texto.

Puedes convertir los contornos de las letras en formas que pueden


editarse al igual que cualquier forma normal.

Adaptar texto a la curva. Todo el texto puede girarse, inclinarse y extenderse.


Trabajar con textos 149

Terminología

FUENTE o TIPO DE FUENTE : un conjunto de caracteres con un estilo consistente.

FAMILIA DE FUENTES : un conjunto de fuentes similares. Por ejemplo, Garamond y


Garamond Italic son fuentes diferentes pero pertenecen a la misma familia Garamond.

JUSTIFICACIÓN: una forma alternativa de describir a la alineación de texto. Al texto alineado


a la izquierda muchas veces se lo denomina justificado a la izquierda.

MONOESPACIADO : todos los caracteres individuales de una fuente monoespacio tienen el


mismo ancho. Muchas veces se las denomina fuentes con ancho fijo. Muy útil para
listados de programas. Courier es la fuente monoespacio más común. La mayoría de las
fuentes son fuentes con espaciado proporcional, es decir, que el ancho de los caracteres
varía.

PUNTO : el tamaño del texto o fuentes se miden en puntos (pt). 1 pt es aproximadamente


1/72 pulgadas, por lo que un texto de 72 pt es tiene aprox. 1 pulgada de altura, a pesar de
que las fuentes de un tamaño determinado pueden variar.

La herramienta de texto

Usa la herramienta de texto ("F8") para introducir o editar texto.

Barra de información de la herramienta de texto, lado izquierdo

Fuente
Tamaño de fuente
Negrita
Cursiva
Subrayado
Justificado
150 Trabajar con textos

Barra de información de la herramienta de texto, lado derecho

Superíndice/Subíndice
Espaciado de línea
Espaciado de párrafos
Lista con viñetas
Lista numerada
Colocar sangría
Quitar sangría
Corrector de ortografía

MAGIX Web Designer 6 es compatible con tres tipos básicos de objetos de texto

• Líneas de texto simple: haz clic sobre la página y escribe.


• Columnas de texto: haz clic y arrastra para crear una columna y después escribe.
• Áreas de texto: haz clic y arrastra en sentido diagonal para crear un área rectangular.
Después escribe.

Después de haber creado un objeto de texto puedes transformarlo (girarlo, inclinarlo,


cambiar su tamaño) y puedes aplicar todos los atributos normales, color de relleno,
transparencia, difuminación, etc. utilizando las herramientas normales. También puedes
vincularlo a una curva. El texto permanecerá editable.
Trabajar con textos 151

El menú de fuentes

El menú de fuente muestra todas las fuentes instaladas, y está dividido en dos secciones.
La sección superior muestra aquellas fuentes que son usadas actualmente en el
documento. La segunda sección contiene las fuentes compatibles con la web. Estas
fuentes son las más seguras para las páginas web porque son las que utilizan la mayoría y,
por ende, serán compatibles con la mayoría de los navegadores web. Lee el apartado
"Fuentes compatibles con la web". La sección final muestra una lista alfabética de todas
las fuentes. Cada nombre de fuente es mostrado en el menú usando su propio tipo de
fuente, haciendo la selección de fuente más sencilla.

Las fuentes para las que están disponibles múltiples estilos de fuente se muestran con
pequeños triángulos negros a la derecha del menú. Mantén simplemente el curso del ratón
sobre algún nombre de fuente durante un segundo o dos y un pequeño submenú
aparecerá a la derecha del menú principal, mostrando los estilos disponibles para esa
fuente. Puedes mover el cursor del ratón sobre el submenú que aparece, para seleccionar
el estilo de fuente deseado.
152 Trabajar con textos
Fuentes compatibles con la web
Sólo se puede utilizar de forma segura un pequeño grupo de fuentes para el texto principal
de la página web. Sólo aquellas fuentes que existan en el ordenador de la persona que va
a visitar tu página web. Aunque no haya 100% de garantía, si existe una serie de fuentes
que son frecuentemente utilizadas por el 98% de los ordenadores, incluyendo Apple Mac y
algunos ordenadores Linux. Estas fuentes se llaman "fuentes compatibles con la web" y
se encuentran en una lista de la sección del menú de fuentes. Si exportas una página
web con fuentes no compatibles, se abrirá una aviso de advertencia.

Vista previa de fuente en tiempo real


Si mantienes el ratón sobre cualquier entrada del menú de fuentes por una fracción
segundo, el texto seleccionado en el documento será actualizado para poder tener una
vista previa de esta fuente. No será un cambio permanente hasta que no hagas clic sobre
la fuente requerida. Si mueves el cursor del ratón sobre el menú volverás a la fuente inicial
hasta que te poses sobre otra entrada. Esto es ideal para obtener una vista previa muy
rápida de gran cantidad de fuentes.

Si pulsas la tecla "Shift" mientras navegas por el menú de fuentes, habrá una pequeña
pausa antes de que se vea la fuente seleccionada. Esta opción es práctica porque la vista
previa instantánea ralentiza la navegación a través del menú; y si tienes varias fuentes
seleccionadas este proceso será aún más lento.

Vista previa de tamaño de fuente en tiempo real


Junto al menú de tamaño de fuente se encuentra una barra deslizante emergente igual a la
que se utiliza en otras partes de Web Designer. Esto brinda un control de tamaño de letra
directo y ajustará el tamaño de fuente del texto seleccionado en tiempo real a medida que
arrastras la barra deslizante.

Haz clic para ver la opción emergente para el tamaño de la fuente

Como con las barras emergentes deslizantes anteriores existen dos forma de uso. Con
"clic + soltar" sobre la flecha aparecerá la barra y se quedará en pantalla. Ahora podrás
arrastrar la barra deslizante, o usar la rueda del ratón sobre el control para ajustar
rápidamente los valores. Este caso, podrás ajustar el tamaño de punto usando la rueda del
ratón para ver los resultados directamente en la página del documento mientras trabajas.

Otra forma de utilizar la barra deslizante emergente es "pulsar + arrastrar + soltar" sobre el
botón y la barra. Esto es un modo ligeramente más directo de ajustar el control (requiere
menos clics).

Navegación instantánea del menú de fuente


Mientras el menú de fuente es mostrado, puedes escribir los carácteres iniciales del
nombre de fuente, y el menú se desplazará hasta esa sección de la lista. Por ejemplo, si
escribes "ver", se desplazará instantáneamente y localizará la fuente "Verdana".
Trabajar con textos 153

Texto simple

Si quieres escribir una pequeña cantidad de texto simple, coloca el cursor donde quieres
introducir el texto y haz clic. Aparecerá un cursor rojo y podrás comenzar a escribir con tu
teclado.

Si te has equivocado, pulsa "Supr "o "Retroceso" de la forma usual.

Al pulsar "Enter" se completa la línea e inicia una línea de texto debajo. El espaciado entre
líneas se controla en el campo de texto de espaciado en la barra de información.

Por defecto, el texto no tiene color de contorno. Con 'Shift + clic' sobre un color de la línea
de color le darás un color de contorno al texto seleccionado (el grosor puede ajustarse
como siempre a través del control de amplitud de línea). Probablemente querrás
establecer el tipo de unión de línea (en la página 133) para redondearla y darle un aspecto
más suave (control en la parte superior de la Galería de líneas).

El ancho de líneas se describe en Dibujar líneas. La aplicación de color está descrita en


Trabajar con colores (en la página 135).

Puedes continuar entrando texto incluso después de la rotación o de haber aplicado un


relleno, ajustado el texto a una línea o haber añadido efectos en vivo.

Texto en una columna

Si estás introduciendo una gran cantidad de texto a lo largo de varias líneas, es posible
que una columna te resulte más útil. Cambiar el ancho de la columna adaptará
automáticamente el texto.

Para escribir una columna de texto:

1. Selecciona la herramienta de TEXTO .


2. Mueve el cursor del ratón al lugar de inicio de la columna.
3. Arrastra hacia la derecha para crear una línea horizontal del ancho de la columna.
Esta línea roja te muestra el ancho de la columna. Nunca se imprime.
4. Introduce el texto. No necesitas pulsar al final de una línea. Cuando el texto llega al
final de la columna sigue automáticamente en una nueva línea.

NOTA : si haces clic fuera o cambias la herramienta antes de comenzar a tipear, la columna
de texto se eliminará y no quedará nada en la página. Por lo tanto, debes comenzar a
tipear inmediatamente después de haber arrastrado la línea de ancho de la columna.

En vez de tipear el texto, puedes crearlo en un editor de texto, copiarlo al portapapeles y


copiarlo en MAGIX Web Designer 6. Copiar y pegar es compatible con el texto con
formato RTF.
154 Trabajar con textos
Las palabras sólo se separan en las líneas si se introduce un guión.

El efecto de el guión en un texto fluido.

Si introduces Ctrl+- (tecla menos) se insertará un guión suave que aparecerá solamente si
la palabra puede terminarse al final de la línea. Esto es especialmente útil para columnas
de texto angostas: para evitar espacios en blanco es posible que necesites insertar
guiones a algunas palabras. Si insertas un guión normal, la palabra se separará al final de
la línea. Se llama guión "suave" porque cuando la palabra aparece en el medio de una
línea, el guión desaparece (a diferencia de un guión normal o el carácter menos), por lo
que el guión se introduce sólo si es necesario.

Al editar texto, el guión suave funciona como un carácter invisible (no ocupa espacio), pero
puede reconocerse en el texto moviendo las flechas izquierda/derecha sobre el lugar en
donde se encuentra el carácter.

Un guión rígido puede insertarse utilizando Ctrl+Shift+- (tecla menos). Un guión rígido no
causará ninguna separación. Esto es útil en situaciones en las que las palabras presentan
guiones pero no deben separarse al final de las líneas.

Cambiar el ancho de la columna


Arrastra uno de los dos controles deslizantes al final de la línea.

Cambiar el ángulo de la columna


Pulsa ń+arrastra uno de los controles deslizantes al final de la línea para cambiar el ángulo
de la columna. Como alternativa, pulsa Ctrl y arrastra para limitar la línea a ángulos
restringidos. También puedes utilizar la herramienta de SELECCIÓN y girar el objeto de
forma normal.

Para más información sobre ángulos restringidos, lee el capítulo Introducción a MAGIX
Web Designer 6.

Áreas de texto

Si haces clic y arrastras diagonalmente sobre la página usando la herramienta de TEXTO,


crearás un área de texto rectangular. El cursor se posicionará en la esquina superior
izquierda y podrás introducir texto y pegar.

Un área de texto puede contener una historia de texto "fluido". En este caso una sola pieza
de texto fluye de un área de texto a otra. Esto se llama texto fluido, como el agua, porque
al añadir o eliminar texto en un área, desbordará a o desde las áreas de texto conectadas.
Trabajar con textos 155
Si el texto sobrepasa el final del área de texto se verá de color gris, a pesar de que podrás
continuar editando el texto de forma normal.

Conectar áreas de texto—flujo de texto


Cuando un texto sobrepasa la parte inferior del área de texto, aparece un indicador al final
del área. Si arrastras este indicador sobre cualquier otra área de texto, el texto fluirá hasta
la nueva área de texto y las dos áreas se conectarán. Esto se muestra con una flecha de
flujo.

Al arrastrar el indicador de un área de texto a otra, se conectarán ambas áreas de forma que el
texto fluya de una a otra. Puedes vincular tantas áreas de texto como sean necesarias.

Consejo: existe una forma rápida de crear texto fluido. Si el cursor de texto se encuentra
en un área con texto en exceso, haz clic y arrastra sobre la página para crear una nueva
área de texto. La nueva área de texto se conectará automáticamente y el texto fluirá hasta
la nueva área.

Consejo: puedes hacer fluir un texto desde un área a otra en cualquier página, incluso en
páginas anteriores. Si necesitas que el texto fluya a un área que se encuentra varias
páginas adelante, probablemente sea más fácil utilizar el método anterior, aunque si
reduces la imagen a un tamaño de texto pequeño podrás arrastrar la flecha por las
páginas.

Para desconectar un área de texto de otra, arrastra el indicador y suéltalo lejos de las
áreas de texto.

Si eliminas un área de texto que está conectada con otra, sólo se eliminará el área. El texto
volverá a fluir a las áreas de texto restantes.

Cambiar el tamaño de las áreas de texto


En la herramienta de TEXTO, puedes hacer clic y arrastrar cualquiera de los controles
deslizantes de esquina. El texto del área tomará el formato adecuado para adaptarse al
nuevo tamaño.

Como alternativa, puedes utilizar la herramienta de SELECCIÓN para cambiar el tamaño del
objeto de texto, pero en este caso cambiará el comportamiento. Si cambias el tamaño de
un objeto de texto usando la herramienta de selección, cambiará el tamaño del propio
texto. Esto coincide con la operación normal de la herramienta de SELECCIÓN .
156 Trabajar con textos
Sin embargo, en el caso de áreas de texto fluido, esto causaría efectos secundarios no
deseados, y seguramente no quieres que una parte de una historia de texto tenga un
tamaño diferente al resto. Por lo tanto, la herramienta de SELECCIÓN varía dependiendo de
si cambias el tamaño de un área de texto que contiene una historia de texto fluido o si
cambias toda la historia de texto. La regla es:

• Si cambias el tamaño de un área de texto sin conexión (o texto simple o una columna
de texto), entonces tanto el área "contenedora" como el contenido del texto cambian de
tamaño.
• Si seleccionas las áreas de texto de toda la historia de texto fluido (deben encontrarse
en una misma página), entonces el texto y las áreas también cambiarán
simultáneamente.
• Sin embargo, si cambias el tamaño de un área de texto que es parte de una serie de
áreas de texto fluidas, entonces sólo cambiará el tamaño del área de texto y el texto
conservará tu tamaño original y se cambiará su formato para adaptarse al nuevo
tamaño. Esto es igual que cambiar el tamaño de área con la herramienta de TEXTO .

Si quieres cambiar el tamaño de todo el texto en una historia de texto, selecciónalo con
"Ctrl+A" y aplica el tamaño de fuente deseado.

Puedes girar el área de texto, utilizando la herramienta de SELECCIÓN de forma normal y el


texto fluirá a lo largo del área de texto girada.

El flujo del texto no se ve afectado si giras una de las áreas de texto

Cantidad de palabras
La cantidad total de palabras y caracteres del texto actual se indica en la barra de estado.
Esto también muestra la cantidad de palabras excedidas. Si está seleccionada cualquier
región de texto, se mostrará la cuenta de la selección.
Trabajar con textos 157

Texto siguiendo una curva

Para colocar un texto a lo largo de una curva de tu elección:

1. Crea un texto básico, un texto en


una columna o un área de texto
(ver más arriba).
2. Selecciona tu objeto de texto y
una curva.
3. Escoge ARREGLO > ADAPTAR
TEXTO A LA CURVA .

Como alternativa, selecciona una curva o línea y después, en la herramienta de TEXTO, haz
clic sobre la línea donde quieres que el texto comience y escribe. Esto adaptará
automáticamente el texto a lo largo de la línea. Cuando alcances el final de la línea, el texto
continuará en una nueva línea inmediatamente por debajo de la anterior.

Si no quieres que el texto siga en otra línea, pulsa "Shift y clic" sobre la línea.

Para ocultar una curva, selecciona la herramienta de EDICIÓN DE FORMAS y configura el


color de la línea en SIN COLOR o un ancho de NINGUNO . También puedes editar la curva de
forma usual.

La aplicación de color está descrita en Trabajar con colores (en la página 135).

Ajustar el margen izquierdo y derecho de un texto sobre una curva


Si estás comenzando a escribir o colocar una columna de texto sobre una curva, puedes
cambiar la posición de inicio y fin de los controles deslizantes rojos. Simplemente
arrástralos sobre la curva según lo desees. Si centras el texto, se encontrará entre estos
dos márgenes.

Cambiar lados de la línea


Haz clic derecho sobre el texto y selecciona la opción de menú INVERTIR TEXTO EN LA
CURVA .

Como alternativa, si cambias la dirección de la línea (herramienta de EDICIÓN DE TEXTO ,


botón INVERTIR TRAYECTORIA de la barra de información), entonces el texto cambiará al
otro lado de la línea o, en el caso de una forma cerrada, se moverá desde el interior al
exterior de la forma.
158 Trabajar con textos

Editar texto

Haciendo doble clic sobre un objeto de texto en cualquier herramienta te llevará a la


herramienta de TEXTO y posicionará el cursor en la posición de clic en el texto.

Pueden utilizarse todas las funciones de cursor y operaciones usuales de un procesador


de texto. Por ejemplo:

• Haz clic donde deseas colocar el cursor.


• Utiliza las teclas de flechas que van hacia la izquierda, la derecha, hacia arriba o abajo.
• Utiliza "Ctrl + teclas de flechas que van hacia la izquierda y derecha" para mover una
palabra hacia la derecha o hacia la izquierda.
• Pulsa "Inicio" o "Fin" para desplazarte al inicio o fin de la línea.
• Pulsa "Ctrl + Inicio" o "Ctrl + Fin" para desplazarte al inicio o fin del objeto de texto.

Selección de texto:

• "Shift+ cualquiera" de las teclas anteriores para seleccionar el texto


• Doble clic para seleccionar una palabra
• Triple clic o "Ctrl + L" para seleccionar toda la línea de texto
• Cuatro clics (4x) seleccionan un párrafo
• O arrastra sobre el texto en la herramienta de texto para seleccionar el texto
• "Ctrl + A" seleccionará todo el texto dentro del objeto de texto (debes encontrarte en la
herramienta de TEXTO .)

Si has seleccionado texto, cualquier cambio que realices se aplicará solamente a la región
de texto seleccionada. Si sólo se encuentra el cursor en el texto, entonces cualquier
atributo, por ejemplo, otro color, aparecerá solamente cuando introduzcas texto nuevo.

Seleccionar todo el objeto de texto


Existe un shortcut para seleccionar todo el objeto de texto. En vez de utilizar Ctrl+A o
arrastrar a lo largo del texto, simplemente pulsa la tecla ESC . Esto elimina el cursor pero
selecciona todo el texto (la barra de estado confirmará 1 objeto de texto). Esto facilita la
aplicación de un efecto o atributo a toda la historia de texto.

Por ejemplo, para cambiar el tamaño de la fuente de todo el objeto de texto, pulsa ESC y
selecciona un nuevo tamaño de la barra de información.

Cambiar mayúsculas o minúsculas


Pulsar Ctrl+W cambiará la mayúscula o minúscula del texto detrás del cursor y moverá el
cursor. Entonces, si te das cuenta de que has tipeado una sección de texto con la tecla
Mayúsculas activada, coloca el cursor al inicio y pulsa Ctrl+W.

Puedes cambiar la mayúscula o minúscula de la región de texto seleccionada de la misma


forma. El cursor no se moverá.
Trabajar con textos 159
Comillas inteligentes
Si escribes comillas ' o ", Xtreme las convertirá automáticamente en comillas de apertura o
cierre estéticamente adecuadas. Esto significa que 'esto' cambiará a ‘esto’ y "comillas"
en “comillas”. Esta característica es lo suficientemente inteligente para comprender el uso
de comillas simples dentro de las palabras, para que, por ejemplo, si escribes en inglés la
palabra 'don't' no se convierta en ‘don’t’.

Introducir caracteres especiales


Existen shortcuts útiles para insertar caracteres especiales como © o ™. Lee la sección
Caracteres especiales (herramienta de texto) (en la página 356) en el capítulo "Menús y
shortcuts de teclado".

Todos estos shortcuts (con la excepción del espacio rígido) son compatibles con Microsoft
Word.

Insertar texto de ejemplo ('Lorem Ipsum')


Cuando se compone un diseño de página es una práctica común que se utilice un texto
de ejemplo que contiene palabras en pseudo-latín (que no significan nada) y que tiene la
apariencia general de un texto típico en inglés (o en otros idiomas latinos). El texto
comienza así: "Lorem ipsum dolor sit amet..."

Nota histórica. este mismo texto ha sido utilizado como texto de ejemplo por más de 500
años en la industria de la imprenta, e incluso partes de las frases en latín se han escrito
hace más de 2000 años.

Para insertar un párrafo del texto "Lorem ipsum" tienes que pulsar las teclas Ctrl + Shift + L
("L" para Lorem) utilizando la herramienta de texto. Para insertar un bloque de texto más
largo presiona esta combinación de teclas un par de veces.
160 Trabajar con textos

Corrector de ortografía

La herramienta de texto incluye un corrector de ortografía. Para activarlo selecciona


el icono del CORRECTOR DE ORTOGRAFÍA en la barra de información de la
herramienta de TEXTO y se abrirá un menú.
Selecciona "REVISAR ORTOGRAFÍA MIENTRAS SE ESCRIBE ".
Ahora todas las palabras sin revisar de tu documento y
aquellas que vas tecleando aparecen subrayadas con una
línea de guiones.

Para corregir una palabra mal escrita, haz clic sobre la


palabra con el botón derecho del ratón y el menú
contextual te mostrará sugerencias ortográficas correctas
de la palabra situada en la parte superior del menú.
Selecciona simplemente una de las sugerencias para
sustituir la palabra.

Selección de idioma
Haciendo clic en el icono del corrector de ortografía aparece un menú con todos los
idiomas para los cuales hay diccionarios instalados. Por defecto, el idioma seleccionado
corresponderá a la configuración local. Puedes elegir diferentes idiomas para diferentes
objetos de texto de modo que en tu documento puedes utilizar texto en múltiples idiomas
si fuera necesario.

Para cambiar el idioma asociado con el objeto de texto, selecciona el objeto de texto y a
continuación selecciona el idioma requerido en el menú del corrector de ortografía de la
herramienta de texto. Ahora, el objeto de texto será revisado con el diccionario de la
lengua que elegiste.

Si quieres introducir numerosos objetos de texto utilizando un idioma diferente al


seleccionado por defecto, puedes cambiar el actual atributo de idioma de texto de modo
que no tienes que cambiar individualmente el idioma de cada objeto de texto. Para ello
asegúrate de que no has seleccionado nada (haz clic sobre un área vacía de tu diseño
utilizando la herramienta de selección). A continuación elige en la herramienta de texto el
idioma que quieras usando el menú del corrector de ortografía. Se te preguntará si deseas
fijar el atributo de idioma de texto actual. Haz clic en "Fijar" para confirmarlo. De ahora en
adelante cada nuevo objeto de texto que crees se asociará al idioma elegido. Ten en
cuenta que dicho atributo actual no se cargará de nuevo cuando guardes y cargues tu
diseño. Por lo tanto deberás repetir el procedimiento anterior para fijar el atributo de idioma
de texto actual la próxima vez que cargues el documento, si quieres seguir introduciendo
nuevos objetos de textos usando el mismo idioma.

Si hay un objeto de texto cuya ortografía no quieres revisar en absoluto, selecciona el


objeto y elige la opción "Sin idioma (ignorar") del menú del corrector de ortografía.

Diccionario de usuario
Las palabras que utilices regularmente y que no se encuentren en el diccionario
suministrado por MAGIX Web Designer 6 pueden añadirse a tu propio diccionario
Trabajar con textos 161
personal. Haz clic con el botón derecho del ratón y selecciona "Añadir a diccionario de
usuario". Ahora la palabra ya no será detectada como incorrecta. El diccionario de usuario
se aplicará a todos los documentos que utilices en tu ordenador y se aplicará para todos
los idiomas.

Cómo sincronizar el texto empleando Grupos suaves (soft


groups, en inglés)

En algunos diseños puede que necesites que múltiples objetos de texto muestren siempre
el mismo texto, pero con estilos diferentes. Ejemplos de ello serían la animación de texto
en un documento de animación o botones mouseover que se resaltan cuando el cursor
del ratón se mueve por encima de ellos en un navegador web. Por lo general, cuando
quieres cambiar el texto mostrado en estos objetos, debes editar cada uno de forma
individual.

Añadiendo a un grupo suave objetos de texto relacionados de esta forma, puedes


asegurarte de que siempre mostrarán el mismo texto. Para añadir los objetos de texto
relacionados a un grupo suave, primero asegúrate de que todos ya poseen exactamente el
mismo texto (de lo contrario no se sincronizarán todos). A continuación selecciona todos
usando la herramienta de selección. Luego selecciona "ARREGLO->APLICAR GRUPO SUAVE
(Ctrl+Alt+G).

A continuación, cuando se edita el texto en un objeto de texto, los demás se actualizarán


automáticamente, incluso si están desparramados por diferentes capas (o en caso de
documentos de animación, en diferentes frames) a lo largo de tu documento. Ten en
cuenta que esta sincronización funciona incluso si algunos de los objetos se encuentran en
capas bloqueadas o invisibles.

Para deshacer un grupo suave, selecciona Arreglo > Eliminar grupo suave (o pulsa
Ctrl+Alt+U). Lee la sección de grupos suaves del capítulo Manipulación de objetos (en la
página 108) para obtener más información sobre grupos suaves.

Tabulaciones, márgenes y sangrías

Reglas
Para ajustar las tabulaciones, márgenes y sangrías, necesitas activas las reglas del
documento.

Para esto:

• Escoge Ventana > Barras > Reglas.


• O pulsa Ctrl+×+R (este es un nuevo shortcut).
• O pulsa Ctrl+L (si no te encuentras en la herramienta de TEXTO ).

Las características de texto avanzadas sólo aparecerán en la regla cuando estés utilizando
la herramienta de TEXTO y cuando el cursor de texto se encuentre dentro de la historia de
texto o cuando el objeto de texto esté seleccionado en la herramienta de TEXTO .
162 Trabajar con textos
Al arrastrar los márgenes o tabulaciones en la regla de la herramienta de texto, verás una
guía vertical temporal que te facilitará alinear las tabulaciones o márgenes a otros objetos
de la página.

Márgenes y sangrías
Cualquier cambio que realices se aplicará al párrafo de texto actual, es decir, el párrafo en
el que se encuentra el cursor de texto. Por el contrario, si has seleccionado una región de
texto, el cambio se aplicará a los párrafos de la región seleccionada.

Puedes aplicar cambios a todo el texto de una historia de texto, si seleccionas todo el
texto dentro de la historia (Ctrl+A). Para cambiar más de una historia de texto, selecciona
los objetos de texto en la herramienta de SELECCIÓN, después cambia a la herramienta de
TEXTO y realiza los cambios correspondientes.

Margen izquierdo . Arrastra esto para cambiar el margen izquierdo del texto.

Margen de la primera línea. Arrastra para cambiar el margen izquierdo de la primera


línea del párrafo (útil para listas, como se muestra abajo).
Margen derecho. Arrastra esto para cambiar el margen derecho del texto.

Demostración del margen izquierdo y el margen de la primera línea

Demostración de un margen derecho


Trabajar con textos 163
Texto siguiendo una curva
Si has adaptado una sola línea de texto a la curva utilizando la opción ADAPTAR TEXTO A LA
CURVA , la línea de curva será el margen.

Si has hecho clic sobre la línea o has adaptado una columna de texto a una curva o línea,
entonces verás indicadores de margen izquierdo y derecho (pequeños cuadrados rojos)
que puedes arrastrar a lo largo de la línea para ajustar los márgenes utilizados para la
justificación.

Tabulaciones
Por defecto, las historias de texto se crean con tabulaciones de 0,5 cm. Esto significa que
puedes pulsar la tecla Tab y tu texto se moverá al próximo punto de tabulación. Sólo
necesitas definir una nueva posición de tabulación, si deseas utilizar otro espaciado.

Estas tabulaciones por defecto se muestran como "L" sobre la regla:

Tabulaciones estándar indicadas con "L"

Tabulaciones personalizadas
Para crear una posición de tabulación personalizada, haz clic sobre la regla en el lugar don
de quieres colocar la tabulación. Se sustituirán las tabulaciones por defecto hasta esa
posición de la regla.

Por ejemplo:

El triángulo indica una tabulación personalizada

Para colocar más de una tabulación, haz clic varias veces sobre la regla.

Para desplazar una tabulación personalizada arrástrala a lo largo de la regla.

Para eliminar una tabulación arrástrala fuera de la regla (las tabulaciones por defecto
retornarán).

Tipos de tabulaciones personalizadas


Puedes configurar diferentes tipos de tabulaciones personalizadas. Por defecto, las
tabulaciones personalizadas están alineadas a la izquierda. Esto significa que el texto se
alineará con la tabulación a la izquierda del texto.
164 Trabajar con textos
Para cambiar el tipo de tabulación, haz clic sobre el icono de tabulación sobre la regla.

Están disponibles los siguientes tipos de tabulación personalizada. Puedes escoger


diferentes tipos de tabulaciones, puesto que no estás limitado a utilizar un solo tipo de
tabulación en una historia.

Alineación izquierda: el texto se alineará con la tabulación a la izquierda.

Alineación derecha: el texto se alineará con la tabulación a la derecha.

Alineación central: el texto se centrará a partir de la tabulación.

Alineación al decimal: los puntos decimales en el texto se alinearán con la


tabulación. Esto es útil para crear listas, sin importar la longitud del número, los
puntos decimales se alinearán con al tabulación.

Cómo crear sangrías francesas


La sangría francesa es cuando la primera línea del párrafo tiene un margen negativo, o el
margen se encuentra más a la izquierda que el margen izquierdo normal. Las listas con
número o viñetas son ejemplos de sangría francesa.

Para crear una sangría francesa:

1. Arrastra el margen izquierdo hacia adentro.


Trabajar con textos 165
2. Haz clic sobre la regla lejos del margen izquierdo (crea una nueva tabulación) y
arrastra esta tabulación hasta el margen izquierdo.
3. Ahora todas las líneas comenzarán con sangría; puedes insertar cualquier carácter o
número y pulsar Tab para moverlo hasta el margen izquierdo. Y (al igual que con el
párrafo) todas las líneas siguientes de texto tendrán sangría hasta el margen
izquierdo.

Texto alrededor de objetos

Puede hacer que cualquier objeto en MAGIX Web Designer 6 sea rodeado por texto, de
modo que el texto fluya alrededor del objeto, en vez de aparecer encima. Esto facilita la
presentación de páginas que contienen pasajes largos de texto combinados con fotos y
gráficos. Una vez que has insertado los objetos, puede ajustar las posiciones de gráficos y
fotos y el texto se adaptará automáticamente y fluira alrededor de ellos.

Hacer que un objeto se rodee de texto


Para hacer que un objeto sea rodeado por texto, selecciona la opción "CONTORNEAR
TEXTO... " en el menú ARREGLO para abrir la ventana de diálogo con las propiedades para
hacer fluir el texto alrededor de objetos.
166 Trabajar con textos
Si lo deseas, puedes poner un
margen al objeto, que
determinará el tamaño del
margen entre los bordes del
objeto y el texto que lo rodea.
Para cerrar el diálogo y volver a
la opción de contornear texto,
haz clic en "Contornear".

Para desactivar el contorneo abre simplemente el diálogo de propiedades de contorneo


del objeto y haz clic en "No contornear". Ten en cuenta que contornear el texto sólo
funciona si el texto está debajo de los objetos, si el texto está encima no funciona.

Ten en cuenta que las líneas individuales de texto no responden al contonear objetos, sólo
lo hacen las áreas con texto y columnas de texto.

Gráficos anclados

Puedes posicionar cualquier gráfico o grupo para anclarlo a una posición en un texto, de
forma que al mover el texto, el objeto de gráfico se desplace para mantener la misma
posición relativa.

Para anclar un gráfico o grupo, cópialo primero al portapapeles, y después en la posición


de herramienta de TEXTO y PÉGALO . Se te dará la elección de pegar el objeto como un
objeto de texto anclado o no.

Éste es un ejemplo de una columna de texto con diversos elementos gráficos a la izquierda.
Cada uno de estos está anclado al inicio de una línea de texto inmediatamente a la derecha.
Trabajar con textos 167
Una vez que lo has anclado en una posición del texto, cuando muevas el texto hacia arriba
y hacia abajo (al eliminar o agregar texto arriba), este gráfico permanecerá vinculado a la
misma posición relativa y se moverá hacia arriba o hacia abajo con el punto de anclaje. Sin
embargo, ten en cuenta que el objeto anclado no se moverá fuera del área de la página
como resultado del movimiento del punto de anclado. El objeto anclado sólo se moverá
hasta el borde de la página.

Es posible anclar cualquier objeto o grupo de gráficos, incluyendo grupos con texto, como
el ejemplo del panel lateral, que se muestra a la izquierda.

También es posible anclar objetos para que aparezcan arriba o debajo del texto. El
ejemplo del gráfico de flor azul pálido, que se muestra a la izquierda, está anclado de esta
forma y fluirá junto con el texto.

Nota: No es posible anclar texto a objetos con alineación a objetos. Si intentas anclar un
objeto con Alineación de texto, la característica de alineación se desactivará.

Mover objetos anclados


Puedes mover un gráfico anclado arrastrándolo de la forma usual. Esto cambia su posición
con de forma relativa al punto anclado, pero no mueve el punto anclado. Por lo tanto, si el
punto anclado se mueve al fluir el texto, el gráfico mantendrá siempre su posición nueva
relativa al punto anclado.

Grupos suaves (soft groups, en inglés)


Puedes pegar Grupos suaves (en la página 108) de la misma forma, aun cuando parte de
un grupo se encuentra en otra capa. Por ejemplo, los botones Web con efectos mouse
over o pop-up en otras capas, pueden anclarse de esta forma.

Visualización del punto de anclado


Cuando seleccionas una región de texto con la Herramienta de texto, se verán todos los
puntos de anclado con una "T" invertida, y también se dibujará una flecha desde el punto
de anclado al centro de los objetos anclados. Entonces, la forma más sencilla de ver todos
los puntos de anclado para cualquier texto es seleccionarlo todo (colocar el cursor en el
texto y pulsar Ctrl+A).
168 Trabajar con textos
Márgenes y objetos anclados
Se recomienda que los objetos gráficos anclados se posicionen fuera de los márgenes o
(como en el ejemplo anterior) en un espacio vertical (únicamente introduce un número de
líneas vacías), de modo que la gráfica no se superpone al texto al que está unido.

Sin embargo, existen varias formas para mover el texto alrededor de gráficos anclados.

Si quieres incrustar un pequeño gráfico en una línea de texto, como un gráfico de un icono
como este ; dentro del texto, para que fluya con el texto, crea un pequeño espacio en el
texto y pega la imagen como un objeto anclado y posiciónalo sobre los espacios. Se
recomienda usar caracteres de espacio de no separación (Ctrl+barra espaciadora).

Utilizando el control de márgenes puedes definir que los gráficos se posicionen dentro del
ancho de columna, en el lado izquierdo o derecho, como en este ejemplo.

Para hacer esto, utiliza el control de márgenes en la regla para crear un margen derecho
para los parágrafos de texto para dar espacio para la imagen. Aquí puedes ver que el
indicador de margen derecho en la regla está a la izquierda en la imagen.

El texto de debajo de la foto no tiene un margen derecho y se extiende hasta el borde de


la columna.

La foto está anclada justo el principio de la línea (de modo que sólo se mueve hacia arriba
y hacia abajo).
Trabajar con textos 169

Aplicar estilos de texto

Cambiar el tamaño de fuente


Existen diversas formas de cambiar el tamaño de la fuente:

• Introduce un nuevo valor en el campo de texto de tamaño de la barra de información y


pulsa ↵.
• O selecciona una opción de la lista desplegable TAMAÑO DE FUENTE en la barra de
información.
• O utiliza la barra deslizante emergente de tamaño de fuente (en la página 152).
• O aumenta/disminuye el tamaño de fuente con Ctrl+×+> y Ctrl+×+<. Esta opción se
aplica solamente si todas las partes de texto seleccionadas tienen el mismo tamaño de
fuente.
• O utiliza la herramienta de SELECCIÓN para cambiar el tamaño de todo el objeto de
texto.

Negrita y cursiva
Haz clic sobre el botón NEGRITA o CURSIVA de la barra de información ("Ctrl
+ B" or "Ctrl + I")

Esta opción aplica la variante negrita o cursiva de la fuente actual.

Atención: MAGIX Web Designer 6 no te permite aplicar cursiva o negrita al texto si la


fuente cursiva/negrita necesaria no está instalada. Sin embargo, puedes emular fácilmente
el mismo efecto. Para añadir negrita a una fuente, solamente agrégale una pequeña
amplitud de línea y aplica un color de línea. Para inclinar una fuente, usa la opción
oblicuidad / inclinación de la Herramienta de selección. Lee más en la sección "menú de
fuente"

Subrayado de texto
Haz clic en el botón de subrayar en la barra de información para subrayar el
texto seleccionado.

El color de subrayado y el tamaño deriva automáticamente del color y tamaño del texto.
170 Trabajar con textos
Justificación o alineación de texto
La justificación siempre se aplica a toda la línea. Cualquier región seleccionada se ignorará.

Justificación IZQUIERDA : el borde izquierdo del texto se alinea a la posición inicial de


clic.
Justificación CENTRAL : centra el texto alrededor de la posición de clic.
Justificación DERECHA : el borde derecho del texto se alinea a la posición inicial de
clic.
Justificación COMPLETA : esto sólo se aplica cuando el texto sigue a una curva o se
encuentra en una columna y cuando haya al menos una línea completa de texto para
justificar.

Al usar texto simple la posición inicial de clic de la página se toma como origen de la
justificación de texto.

Agregar y quitar sangrías


Agregar sangría a un párrafo de texto.

Quitar sangría a un párrafo de texto.

Lista con viñetas


Puedes convertir cualquier texto en una lista con viñetas si seleccionas el texto y
luego escoges el botón de lista con viñetas de la barra de información.

Cada párrafo de texto se convierte en una viñeta independiente. Si presionas Intro al


finalizar una línea al final de la viñeta, la próxima línea también comenzará con una viñeta.

Para finalizar la lista con viñetas, pulsa Intro al final de la última viñeta y luego vuelve a
pulsar Intro en la nueva línea con viñeta. Esto elimina la última línea con viñeta y te permite
comenzar a introducir texto normal nuevamente.

Puedes incluir listas con viñetas secundarias si pulsas el botón de sangría de la


barra de información. Esta sangría crea una línea con viñeta y cambia el estilo de la
viñeta para diferenciarla de la principal.
Trabajar con textos 171

Ejemplo de una lista de viñetas secundaria

Para mover un punto de viñeta desde la lista secundaria hasta la principal,


simplemente coloca el texto del cursor en la línea y pulsa el botón para quitar
sangría.
Por lo tanto, realizar arreglos en las listas de viñetas es fácil con los botones para agregar y
quitar sangrías.

Lista numerada
Puedes crear y editar listas numeradas de la misma forma que se ha descrito para
las listas con viñetas pero con el botón de listas numeradas.

Puedes escoger el esquema numerado que se utiliza para cada lista con el diálogo de
PROPIEDADES DE LISTA . Coloca el cursor de texto en uno de los puntos de la lista
numerada, haz clic derecho y escoge PROPIEDADES DE LISTA... del menú contextual.

En el diálogo puedes escoger entre una variedad de esquemas de numeración y también


introducir el valor que debe utilizarse en la primera entrada de la lista. Luego, el número se
aumentará automáticamente para las siguientes entradas de la lista.
172 Trabajar con textos
Superíndice y subíndice
Haz clic en el botón apropiado sobre la BARRA DE INFORMACIÓN.

superíndice
Texto normal subíndice

Espaciado de línea
El espaciado de línea te permite cambiar el espacio entre dos líneas
(afecta el espaciado vertical).

El espaciado de línea se mide en porcentajes (120%) o puntos (12pt). Puedes introducir el


valor de espacio de línea en el campo de texto o hacer clic sobre las flechas para
desplazar los valores.

La configuración de porcentajes tiene como beneficio de que cambia de tamaño si


cambias el tamaño de la fuente. Si se aplica un porcentaje a una línea de texto con varios
tamaños de fuente, se utilizará el tamaño más grande. Por ejemplo, si una línea contiene
texto 90% y 100%, el espaciado de línea se calculará a partir del 100%.

Espaciado de párrafos
Los dos últimos campos de la barra de información de la herramienta de
texto te permiten configurar el espacio antes y después de los párrafos.

Esto es particularmente útil cuando quieres configurar espacios de media línea entre los
párrafos.

Al igual que en Microsoft Word, cuando utilizas el espaciado arriba y abajo de los párrafos,
el espaciado es el valor mayor entre ambos (no se acumula). El espaciado arriba del
párrafo moverá el primer párrafo hacia abajo en un marco de texto.

Enlaces de texto

Puedes aplicar un enlace en cualquier parte de un objeto de texto de modo que cuando el
documento se exporte como HTML el texto aparezca en los navegadores web como un
enlace sobre el cual se puede hacer clic.

Utiliza la HERRAMIENTA DE TEXTO para seleccionar las palabras o los caracteres que
desees aplicar al enlace y luego haz clic en el botón de enlace en la barra de
herramientas de WEB .

Esto abre el diálogo de PROPIEDADES WEB con la pestaña ENLACE seleccionada. En esta
pestaña puedes elegir si quieres vincular un URL, otra página de tu sitio web o incluso una
capa popup.

Por defecto, cuando aplicas un enlace a una parte de texto, el texto aparece subrayado y
con el color de enlace de texto definido para el documento actual. Puedes cambiar el color
del enlace, estando los enlaces subrayados o no, en la pestaña PÁGINA WEB del diálogo de
PROPIEDADES WEB (menú HERRAMIENTAS->PROPIEDADES WEB ). Asimismo puedes fijar el
Trabajar con textos 173
color que aparece cuando el usuario mueve el cursor del ratón por encima de un enlace de
texto en un navegador web ("Colores MouseOver"), y el "Color visitado", el cual se usa
para visualizar que los usuarios ya han visitado dicho enlace con su navegador web.

Para fijar los tres colores globales de los enlaces de texto, o bien puedes seleccionar los
colores con nombre (original) ya existentes que utilizaste en tu página web usando las
listas desplegables, o bien puedes hacer clic en el botón EDITAR para abrir el EDITOR DE
COLOR mediante el cual puedes elegir el color que quieras.

Asimismo, si fuera necesario también puedes sobrescribir los colores globales de los
enlaces de texto para enlaces individuales. En la pestaña de enlaces del diálogo de las
propiedades web, deselecciona la opción "Utilizar los colores de enlace de página web
usuales". A continuación el enlace seleccionado adoptará el color de texto que fijaste en el
documento, en lugar del color global del enlace de texto.

Texto dentro de grupos para páginas web

Al exportar un documento como página web, todos los grupos serán exportados como
imágenes. Por este motivo, el texto que se encuentre dentro de grupos no estará presente
como texto en tu página web exportada y, por lo tanto, no podrá ser detectado por
buscadores ni seleccionado o copiado por los usuarios que visiten tu página web.

Esto suele ser apropiado para botones gráficos, títulos, logotipos, etc., ya que el texto
forma parte del gráfico. Sin embargo puede que tengas más piezas de texto importantes
dentro de grupos que desees mantener como texto en tu página web exportada. Para
hacer esto, sólo tienes que aplicar el nombre especial "Texto HTML" a tu objeto de texto.
La forma más fácil de hacer esto se explica a continuación:

1. Escoge la HERRAMIENTA DE TEXTO y haz clic en el texto para insertar el cursor de


texto.
2. Pulsa Esc para seleccionar todo el objeto de texto.
3. Abre el diálogo de nombre (HERRAMIENTAS->NOMBRES... ).
4. O bien selecciona el nombre de "Texto HTML" de la lista desplegable "Aplicar
nombre" si ya lo has utilizado en el documento actual, o bien teclea el nombre de
"Texto HTML". A continuación haz clic en "Añadir" para añadir el nombre.

Ahora, cuando exportes tu página web, tu texto permanecerá como texto y el resto del
grupo se convertirá en imagen. Todos los paneles de texto suministrados por la GALERÍA
DE DISEÑOS ya han aplicado este nombre a los objetos de texto dentro de los mismos, por
lo que el texto de los paneles se exportará como texto.

Los navegadores no pueden renderizar texto con rotación, por lo que no puedes utilizar
este nombre para forzar que el texto con rotación sea exportado como texto. En este
caso, el nombre se ignora.
174 Trabajar con textos

Copiar estilos de texto

Es fácil copiar el estilo de cualquier texto a otra región de texto utilizando la opción PEGAR
ATRIBUTOS :

• Selecciona la región fuente cuyo estilo quieres copiar. Esto puede ser también una sola
palabra (sólo haz doble clic).
• Selecciona Edición > Copia (o Ctrl+C).
• Selecciona la región de texto a la que quieres aplicar el estilo.
• Selecciona Edición > Pegar atributos (Ctrl + Majús + A).

Si el cursor de texto se encuentra posicionado en algún texto cuando PEGAS ATRIBUTOS ,


los atributos del párrafo se pegarán a este otro (p.ej. tabulaciones, márgenes).

Si has seleccionado una región de texto, entonces PEGAR ATRIBUTOS insertará todos los
atributos visuales del texto fuente.

Aplicar atributos a historias de texto completas


Si el cursor se encuentra en un objeto simple o una columna de texto, Esc seleccionará
todo el objeto de texto. Puedes aplicar un atributo, por ejemplo, un color, y todo el objeto
de texto se modificará. Esto es con frecuencia más rápido que realizar seleccionar todo
(Ctlr+A).

Con las áreas de texto este método sólo funciona si se han seleccionado todas las áreas
de texto. Puedes hacer esto en la herramienta de SELECCIÓN con un clic y ń+clic sobre las
diferentes áreas de texto para seleccionarlas. Pero este método sólo es posible si las áreas
de texto se encuentran en una sola página. Si tu historia de texto fluye por diferentes
páginas y quieres cambiar todo el texto, entonces será necesario Seleccionar todo (Ctrl+A)
y después aplicar los atributos deseados.

Copiar / Pegar texto con formato (RTF)

Puedes copiar texto con formato desde otras aplicaciones como editores o procesadores
de texto y copiarlo en MAGIX Web Designer 6 como texto y las fuentes, márgenes y
espaciado de líneas se conservarán. Esto facilita la posibilidad de conservar el estilo y
apariencia de tu texto.

Cuando pegas texto en formato Rich Text (RFT) desde otras aplicaciones se te da la
opción de pegar el texto como "texto sin formato" lo que significa que aparecerá en la
fuente y estilo del cursor donde pegas o como Rich Text lo que significa que se conservará
el estilo del texto fuente.

Esto también funciona al revés. Puedes copiar texto de Web Designer y pegarlo en otras
aplicaciones compatibles con Rich Text y el estilo (fuente, tamaño, colores, márgenes, etc.)
se conservará. Esto funciona solamente si copias de un objeto de texto simple o de un
único texto fluido.
Trabajar con textos 175
Algunas aplicaciones, como Microsoft Word, tienen una opción del menú que provee una
amplia gama de opciones de pegado. Estas aplicaciones te permiten muchas veces
escoger el formato del objeto pegado (texto o gráfico).

Visualizar fuentes utilizadas

Muchas veces es útil obtener un resumen de las fuentes utilizadas en el documento,


especialmente si quieres compartir el documento con otros usuarios de Web Designer que
no tienen las fuentes instaladas.

Encontrarás una lista completa de las fuentes utilizadas en "Archivo" > "Propiedades del
documento".

Todas las fuentes que no estén instaladas pero se estén utilizando en el documento,
estarán señaladas con "NO INSTALADA" .

Si quieres enviar el documento a otro usuario que no tiene instaladas las fuentes utilizadas
pero que tampoco tiene que editar el texto, entonces puedes convertir el texto en formas
editables (lee a continuación).

Incrustación de fuentes

MAGIX Web Designer 6 guarda las formas de caracteres de todas las fuentes usadas en tu
documento. Esto significa que si pasas tu archivo de diseño a otra persona o transfieres el
archivo a otro ordenador, el texto todavía tendrá exactamente la misma apariencia, incluso
si las fuentes correctas no están instaladas en dicho ordenador. Pero esto únicamente
incrusta los caracteres usados en el documento (no se incluye la fuente completa). Por lo
tanto, en los ordenadores que no disponen de las fuentes, el texto que se añada en las
fuentes no disponibles puede que no cuente con las formas de caracteres correctas.

Compatibilidad entre el navegador y el texto

Lamentablemente, es un hecho que diferentes navegadores visualizan el mismo texto de


forma ligeramente diferente, por general con un tamaño o una longitud de línea un poco
diferente. En el momento de redacción sólo existe un navegador web capaz de visualizar
los tamaños de texto de forma exacta y correcta (Firefox 3 en Mac); todos los demás
navegadores muestran frecuentemente un texto demasiado largo y los tamaños se
redondean a píxeles enteros (por ejemplo un texto de 10pt no se visualiza con un tamaño
de 10pt, sino con el tamaño de píxel redondeado más próximo (13 píxeles)).

MAGIX Web Designer 6 ha sido diseñado para emular el comportamiento de la mayoría de


los navegadores más comunes ajustando los tamaños intermedios a píxeles enteros y
ajustando las longitudes de línea para emular al máximo el texto en navegadores de
Windows. Puedes desactivar este ajuste en el diálogo OPCIONES , en la pestaña GENERAL
(menú HERRAMIENTAS -> OPCIONES deseleccionando la opción "MOSTRAR LONGITUDES DE
TEXTO COMPATIBLES CON WINDOWS ".
176 Trabajar con textos

Nota para usuarios avanzados: si utilizas Xtreme o desactivas esta opción de


compatibilidad, cuando introduzcas un tamaño intermedio, por ejemplo 13,6 píxeles ó 10
pt, obtendrás el texto exactamente con ese mismo tamaño. Pero ya advertimos que la
mayoría de los navegadores web visualizarán este texto con un tamaño ligeramente mayor
o menor al que se ve en el Web Designer.

La segunda consecuencia del (mal) comportamiento de este navegador es que en el caso


de las fuentes pequeñas se produce un gran salto de un tamaño al siguiente. Por lo tanto,
si deseas un tamaño de fuente, por ejemplo entre 9pix y 10pix, no podrás obtenerlo. La
mayoría de los navegadores no pueden visualizar un tamaño intermedio (tanto si usas
puntos, ems o cualquier otro tipo de unidad). Por lo tanto verás cómo los tamaños de
texto de Web Designer saltan de un tamaño a otro tamaño cuando cambies el tamaño de
los objetos de texto.
La herramienta de relleno 177

La herramienta de relleno

Creación de una gradación de color lineal

El procedimiento para la creación de un relleno es igual para todos los tipos de


relleno:

1. Selecciona uno o varios objetos a los que quieres aplicar los rellenos.
2. Activa la herramienta de relleno (Shortcut F5)
3. Escoge el tipo de relleno deseado del menú.
4. Haz clic y arrastra el ratón sobre el objeto para crear el relleno.
También puedes arrastrar directamente los controles deslizantes de relleno para
adaptar el tamaño y la posición.

MAGIX Web Designer 6 muestra una vista previa interactiva y fluida durante el arrastre.
Esto tiene algunas ventajas con respecto a las herramientas tradicionales que trabajan a
través de diálogos. No sólo son necesarios pocos clics del ratón, sino que también se
aumenta la velocidad de trabajo y las opciones de posicionamiento de los puntos de inicio
y fin.

Al arrastrar, se creará una flecha con controles para la dirección del relleno. Los controles
deslizantes de relleno pueden seleccionarse y desplazarse para modificar la posición y el
ángulo del relleno.

Coloreado de rellenos
Selecciona uno de los controles deslizantes de relleno y haz clic sobre un color de la LÍNEA
DE COLOR o abre el editor de colores para definir un nuevo color. Para cambiar entre los
controles deslizantes de relleno, pulsa "Tab".

Modificar selección
En la herramienta de relleno, un objeto se selecciona con un clic y no es necesario cambiar
a la herramienta de selección para marcar otro objeto.
178 La herramienta de relleno

Tipos de relleno

Web Designer dispone de estos tipos de relleno de color:

RELLENO LISO : la forma recibe un color o tono parejo en toda la


superficie.

RELLENO LINEAL : el color cambia gradualmente de un color a otro.

RELLENO CIRCULAR : el color cambia a partir de un punto en forma


circular.

RELLENO ELÍPTICO : similar al relleno circular, salvo que el cambio


se realiza en forma elíptica.

Relleno de mapa de bits: el objeto se rellena con una o más


copias con forma de mosaico de un mapa de bits o de una foto.
Todas las fotos que ves en <Progammname> son formas con
relleno de mapa bits (por lo general rectángulos, por supuesto).
Se puede usar cualquier foto o bitmap en el BITMAP o en las
galerías RELLENO .

NUBES FRACTALES : produce un relleno aleatorio con parches que


es especialmente útil para nubes y neblina.

PLASMA FRACTAL : un relleno aleatorio de parches que presenta un


mayor contraste que el relleno de nubes fractales.

La herramienta de RELLENOS te permite aplicar estos tipos de relleno al objeto o a los


objetos seleccionado(s), así como editar y ajustar los rellenos.

Seleccionar dentro automáticamente


En la herramienta de relleno, se aplica automáticamente la opción "Seleccionar dentro" si
haces clic sobre un objeto, es decir, que se selecciona parte de un grupo en vez del grupo
como un todo. En la herramienta de relleno, si haces clic en un objeto que se encuentra
dentro de un grupo, se selecciona dicho objeto en lugar de seleccionarse el grupo
completo. Esto se conoce como "seleccionar dentro". De este modo es más fácil trabajar
en fotos y rellenos dentro de grupos. Si quieres cambiar el atributo de relleno de un grupo
(que no es muy probable) necesitas seleccionar el grupo utilizando primero la herramienta
de selección.
La herramienta de relleno 179

Barra de información de la herramienta de relleno

Tipo de relleno
Segmentación de relleno
Efecto de relleno
Mapa de bits nombre
Control deslizante de relleno/Resolución
Color del control deslizante/Grano

TIPO DE RELLENO selecciona el tipo de relleno. Si seleccionas un relleno de este menú:

• mientras tienes un objeto seleccionado, se aplicará el relleno al objeto;


• sin un objeto seleccionado, establece el actual tipo de relleno estándar, el cual se usa
para objetos nuevos dibujados.

SEGMENTACIÓN DEL RELLENO (FILL TILING) se utiliza para aplicar rellenos de mapas de bits
y rellenos fractales. Las opciones se describen más adelante en los rellenos de mapas de
bits. La segmentación de relleno cambia la repetición del efecto de relleno. Las opciones
son:

• Simple: el relleno se utiliza una sola vez, independientemente del tamaño del objeto. El
texto alrededor del "mosaico" simple es transparente.
• Repetir / Repetir mosaico (repeating/repeating tile): el efecto se repite hasta llenar todo
el objeto.
• Invertir mosaico repetido: sólo disponible en rellenos fractales y de mapas de bits. Esto
es similar al mosaico repetido, pero uno de cada dos mosaicos está invertido. Esto
ayuda a ocultar las junturas donde los mosaicos se juntan.

Una forma de elipse con un relleno elíptico repetido (repeating elliptical fill)

El EFECTO DE RELLENO se utiliza para todos los tipos de rellenos. Controla el


desvanecimiento del relleno desde el color de inicio al color de fin:

• TRANSICIÓN : crea una transición entre los dos colores de forma lineal
• ARCO IRIS :
realiza una transición siguiendo el borde más breve del modelo de color HSV.
Por ejemplo, una transición de amarillo a cian será amarillo-verde-cian.
180 La herramienta de relleno

Esta opción no tiene efecto alguno cuando los dos colores son negro, blanco y gris.

• ALT ARCO IRIS : similar a la opción arco iris salvo que la transición se realiza siguiente el
borde más extenso de la rueda de color. Por ejemplo, la transición de amarillo a cian
será amarillo-rojo-magenta-azul-cian.

El NOMBRE DE MAPA DE BITS muestra un menú desplegable con vistas en miniatura


(thumbnails) de todos los mapas de bits de la GALERÍA DE MAPAS DE BITS y es una forma
sencilla de seleccionar el mapa de bits o la foto requerido para un relleno de mapa de bits.

CONTROL DESLIZANTE DE RELLENO : te indica si el control deslizante de inicio o fin está


seleccionado. Este campo queda en blanco para rellenos lisos.

RESOLUCIÓN (sólo rellenos de mapas de bits y fractales): muestra la resolución del mapa
de bits (siempre que no hayas seleccionado un control deslizante de relleno). Puedes
introducir una nueva resolución para cambiar el tamaño del mapa de bits. Las resoluciones
bajas muestran los píxeles individuales del mapa de bits. Muy pocas veces se necesita una
resolución mayor que 150 DPI, incluso para utilización de tipografía. 96 DPI es suficiente
para la resolución de pantalla.

COLOR DE CONTROL DESLIZANTE DE RELLENO (excepto relleno de mapas de bits): indica el


color aplicado al control deslizante de relleno seleccionado.

Rellenos lisos

Para aplicar o cambiar un relleno liso:

1. Selecciona un relleno liso del menú de tipos de relleno.


2. Elige un color de LÍNEA DE COLORES .

La línea de colores se describe en Manejo de colores (en la página 135).

Rellenos lineales

Así se utilizan los rellenos lineales:

1. Escoge "Relleno lineal" del menú. (No es necesario si el relleno contiene una relleno
de un color).
2. Coloca el cursor del ratón en el lugar donde debe comenzar el relleno. (Esto también
puede ser fuera del objeto).
3. Arrastra el cursor hasta la posición de fin del relleno. (También puede encontrarse
fuera del objeto).
La herramienta de relleno 181
La flecha que se dibujará sobre el objeto seleccionado, se denomina flecha de relleno. Esta
flecha muestra la dirección y el alcance de la gradación del relleno. Ambos extremos de la
flecha pueden marcarse con un clic.

Desplazamiento de los controles de inicio y fin de un relleno


Modificación de la dirección y el tamaño de la gradación de un relleno:

1. Desplaza el cursor sobre el control deslizante que quieres mover. Al


encontrarse sobre el control deslizante, el aspecto del cursor cambiará.
2. Arrastra el control deslizante.

Cambiar colores de un relleno


Para cambiar el color de un relleno:

• Arrastra el color desde la LÍNEA DE COLORES hasta un control deslizante de relleno (no es
necesario que selecciones primero el control deslizante).
• O bien O arrastra el color hasta el objeto. Cada relleno tiene una línea central imaginaria
en la mitad de la flecha de relleno. Si sueltas el color sobre el control deslizante de inicio,
cambiará el color del control deslizante de inicio; mientras que si lo sueltas sobre el
control deslizante de fin, cambiará el color en el control deslizante de fin.
• Si está seleccionado uno de los controles deslizantes (está señalado), simplemente haz
clic sobre un color.

La línea de colores se describe en Trabajar con colores (en la página 135).

Cada método cambia el color de un solo control deslizante; no se cambia ningún otro
control deslizante seleccionado, o:

1. Selecciona el control deslizante (o controles deslizantes, también funciona con


objetos múltiples) correspondiente.
2. Escoge el color deseado de la línea de colores.
3. Esto cambia todos los controles deslizantes de relleno seleccionados.

Rellenos circulares

Para los rellenos circulares, la aplicación del relleno, movimiento


de los controles deslizantes y el cambio de los colores son
iguales a los rellenos lineales. El control deslizante de inicio es el
centro del relleno.
Los rellenos circulares son útiles para crear efectos de sombras.

Cambiar el aspecto alto/ancho del objeto cambia automáticamente un relleno circular a un


relleno elíptico (ver a continuación).

Una forma rápida de aplicar un relleno circular: ×+arrastra para crear un relleno circular.
182 La herramienta de relleno

Rellenos elípticos

La aplicación de un relleno elíptico es similar a la aplicación de


rellenos lineales. A medida que arrastras el cursor del ratón,
creas un círculo con dos controles deslizantes de fin. Después
puedes arrastrar estos controles deslizantes para crear una
elipse adecuada.
×+arrastrar conserva la relación de aspecto del relleno. Ctrl+arrastrar limita la rotación a
los ángulos de restricción configurados. El desplazamiento de controles deslizantes y el
cambio de colores es igual que para los rellenos lineales.

Rellenos de mapa de bits

Tipo de relleno
Segmentación de relleno
No utilizado
Nombre de mapa de bits
Resolución
No utilizado

La Galería de mapa de bits se describe en La galería de mapa de bits (en la página 224) en
el capítulo Trabajar con fotos, para Galería de rellenos, lee más abajo (en la página 186).

El relleno de mapas de bits es el tipo de relleno más impactante. Te permite utilizar


cualquier foto o textura como relleno de cualquier forma y te ofrece control directo sobre el
tamaño, ángulo, posición y mosaico. También puedes colorear los rellenos de mapas de
bits. Puedes utilizar cualquier tipo de mapas de bits, incluyendo fotos JPEG y canal alfa
(semi-transparentes).

Cuando importas un archivo de foto en MAGIX Web Designer 6 (ej. un archivo JPG o PNG)
aparecerá como una forma con un tipo de relleno de mapa de bits. Cuando un objeto de
este tipo se selecciona en la línea de estado, se muestra como una "foto", pero es lo
mismo que una foto a la que se le ha aplicado un relleno de mapa de bits.

Para rellenar o dar forma con un mapa de bits o relleno de foto, realiza uno de los
siguientes pasos:

• Arrastra un mapa de bits desde la GALERÍA DE MAPA DE BITS o desde el explorador de


Windows, manteniendo Shift presionada y soltando, o bien
• Arrastra un relleno desde la GALERÍA DE RELLENOS hasta una forma (en este caso, no es
necesario mantener Shift presionada antes de soltar)
La herramienta de relleno 183
• Selecciona "Mapa de bits" del menú desplegable de la izquierda de la BARRA DE
INFORMACIÓN de la HERRAMIENTA DE RELLENO , y luego selecciona el mapa de bits
requerido del menú desplegable de nombres de mapas de bits (solo muestra mapas de
bits que hayan sido cargados previamente).

Puedes rellenar un objeto con un mapa de bits o múltiples repeticiones del mapa de bits.

Mosaico simple (foto) Mosaico repetido Repetir invertido: los mosaicos se


adaptan de forma perfecta.

El relleno tiene tres controles deslizantes. Para ello, utiliza Cambiar el tamaño y la posición
del relleno de mapa de bits (en la página 184). Una forma alternativa de configurar el
tamaño del mapa de bits es introducir la resolución en el campo de la barra de
información. Primero tienes que deshacer la selección de control deslizante de relleno
haciendo clic en cualquier parte de la imagen donde no haya un control deslizante de
relleno, y luego escribe una nueva resolución dpi.

Sustitución de los rellenos de mapa de bits


Si una forma ya contiene un mapa de bits, o es una foto, entonces solamente puedes
arrastrar y soltar un nuevo mapa de bits desde cualquier fuente, como el Explorador de
Windows, y se sustituirá el mapa de bits existente. La nueva imagen se adaptará a la forma
de forma exacta. El hacer esto también sustituirá todas las otras instancias de la foto en la
página actual.

Si presionas SHIFT al sustituir una foto de esta forma, la posición, escala y rotación del
relleno de mapa de bits se conservará.

Coloreado de mapa de bits


Puedes colorear cualquier mapa de bits o relleno de foto pulsando simplemente sobre un
color en la LÍNEA DE COLOR (asegúrate de no haber seleccionado ningún control deslizante
de relleno, al hacer clic sobre la imagen). Esto creará un tono contínuo (técnicamente tono
dual) que fluctúa entre el negro y el color seleccionado. También puedes hacer clic
derecho en la línea de color y seleccionar 'ESTABLECER COLOR CLARO DE TONO CONTINUO '
o bien 'ESTABLECER COLOR OSCURO DE TONO CONTINUO '.

Por ejemplo, para convertir una foto a blanco y negro, sólo necesitas hacer clic en el color
blanco de la línea de color.

Para cancelar cualquier color aplicado, escoge SIN COLOR


para cualquiera de los controles deslizantes. Esto restaura el
color original del mapa de bits.
184 La herramienta de relleno
El campo RESOLUCIÓN de la BARRA DE INFORMACIÓN muestra la resolución que puede
modificarse moviendo los controles deslizantes de relleno o introduciendo un valor.

Cambio del tamaño y la posición del relleno de mapa de bits


Si pulsas Shift, haces clic y arrastras hasta una forma que ya contiene un relleno de mapa
de bits, se creará un nuevo relleno de mapa de bits cuyo centro se encontrará en el punto
del clic. Si mantienes pulsada la tecla Ctrl también, el ángulo se limitará, de forma que te
será más fácil crear un mapa de bits vertical.

Una vez que has creado el relleno, puedes arrastrar hasta


cualquier lugar de la imagen para reposicionar el relleno
dentro de la forma.

Al pasar el ratón sobre los controles deslizantes de


relleno exteriores, el cursor del ratón se convertirá en un
cursor de "rotación". Si arrastras los controles deslizantes
externos, el relleno de mapa de bits se ampliará, pero
manteniendo la relación de aspecto; si pulsas "ñ"
mientras arrastras, se cambiará el tamaño vertical y el
horizontal de forma independiente y el relleno se doblará.
La barra de información muestra la resolución del relleno
de mapa de bits (puedes ajustar la resolución y, por lo
tanto, el tamaño del mapa de bits, introduciendo un
nuevo valor).

Un ejemplo

Para rellenar la elipse de la izquierda con la foto central:


La herramienta de relleno 185
1. Arrastra la foto o archivo de mapa de bits desde el Explorador de Windows (o desde
la Galería de mapas de bits si ya se ha utilizado en el documento) hasta la elipse y
luego arrástrala mientras pulsas la tecla "Shift". La herramienta de relleno se
convertirá en la herramienta actual.
2. Ahora podrás ajustar el ángulo y tamaño de la imagen arrastrando los controles
deslizantes de relleno.

El ejemplo anterior tiene una sombra simple. Lee el capítulo sobre la herramienta de
sombras (en la página 191) para más información.

Relleno fractal

MAGIX Web Designer 6 es compatible con dos tipos de rellenos fractales que son
modelos de relleno naturalistas creados matemáticamente. Son muy útiles para simular el
color del cielo, las nubes u otras texturas de la naturaleza.

Cada vez que creas un relleno fractal nuevo se crea un nuevo modelo. Para sustituir un
fractal existente por un modelo nuevo escoge uno del menú de relleno.

El control GRANO de la BARRA DE INFORMACIÓN te permite controlar la proporción de


granos del modelo. Los valores bajos resultan en un modelo suave, mientras que los
valores altos dan modelos con granos más marcados.

Puedes ajustar el tamaño y posición del relleno fractal arrastrando y ajustando los
controles deslizantes de relleno. Deselecciona los controles deslizantes de relleno (clic
sobre el relleno fuera de los controles) para ver los controles de resolución y granos.

Relleno fractal con nubes. A la izquierda con valor de grano 1, a la derecha con valor de grano
50.
186 La herramienta de relleno
Relleno de plasma fractal. A la izquierda con valor de grano 5, a la derecha con valor de grano
50.

Nota la diferencia entre el grano y la resolución. El grano controla el flujo del modelo. La
resolución establece el tamaño del mapa de bits fractal y la impresión de los píxeles
individuales.

Puedes cambiar los colores de inicio y fin de un relleno fractal. Selecciona los controles
deslizantes centrales o externos y después aplica el color utilizando la línea de colores o la
galería de COLOR . Para cancelar el color aplicado, escoge Sin color.

Gradaciones de color de varios niveles

Muchos de los tipos de rellenos con gradación de color (lineal, circular, elíptico, cónico,
rombos) son compatibles con rellenos de gradación de varios niveles, lo que significa que
en vez de pasar de un color a otro, puede pasar por una cantidad de niveles de color
diferentes.

Para añadir un nuevo nivel de color a una graduación, selecciona la herramienta de relleno
para que se vea la flecha de relleno y después:

• Arrastra un color hasta el lugar correspondiente de la flecha de relleno.


• O haz doble clic sobre la flecha de relleno para crear un nuevo control de relleno y
después haz clic sobre un color o abre el EDITOR DE COLOR.

Puedes reposicionar los controles deslizantes de relleno simplemente arrastrándolos.

Si un control deslizante de relleno se encuentra seleccionado, pulsa Tab para seleccionar


el siguiente. Si el EDITOR DE COLOR está abierto, se actualizará para reflejar el nuevo control
deslizante de relleno

Para eliminar un control deslizante de nivel, selecciónalo con un clic y pulsa la tecla Supr.

La galería de rellenos

La GALERÍA DE RELLENOS contiene texturas de mapas de bits que pueden utilizarse para
rellenos. Sólo cuando utilizas un relleno se copia en el documento.

Para ver la GALERÍA DE RELLENOS :

• Escoge HERRAMIENTAS > GALERÍAS > GALERÍA DE RELLENOS .


• O pulsa "×+ F11".
La herramienta de relleno 187

IMPORTAR : importa el mapa de bits seleccionado en el documento. Una copia del mapa de
bits aparece en la GALERÍA DE MAPAS DE BITS. También puedes arrastrar y soltar el mapa
de bits hasta una parte en blanco de la página. Esto es en general más fácil que hacer clic
en IMPORTAR .

RELLENAR : importa y aplica el mapa de bits seleccionado como:

• Un relleno de mapa de bits en los objetos seleccionados (de existir).


• O, si ningún objeto es seleccionado, inserta el mapa de bits en el documento como un
nuevo objeto de foto.

También puedes arrastrar y soltar el mapa de bits hasta un objeto para aplicar un relleno
de mapa de bits.

Hay algunas diferencias entre arrastrar una mapa de bits desde la galería de MAPAS DE
BITS o la GALERÍA DE RELLENOS: al arrastrar mapas de bits desde la GALERÍA DE RELLENOS
y soltarlos sobre las formas para crear un relleno de mapa de bits, el relleno tendrá
mosaicos y el mapa de bits no tendrá la mejor adaptación posible para la forma. Este
comportamiento es diferente al que ocurre al arrastrar desde la galería de mapa de bits
porque en general las texturas se aplican desde la galería de rellenos y normalmente tienen
forma de mosaico y no adaptadas.

TRANSP : (transparencia) importa y aplica el mapa de bits seleccionado como:

• Un mapa de bits transparente al objeto seleccionado (de existir).


• O configura el atributo de transparencia actual.

OBTENER RELLENOS : descarga rellenos gratis de Xara.

FONDO : establece el relleno seleccionado como fondo de página.

ELIMINAR : borra el relleno o carpeta seleccionada.

RELLENO DE DISCO : añade nuevos rellenos de tu disco duro o un CD.


188 La herramienta de relleno
OPCIONES : te permite seleccionar el tamaño de los símbolos de vista previa y si se debe
mostrar información completa sobre el mapa de bits, así como buscar y ordenar los
rellenos.

DETENER DESCARGA : si tienes una conexión lenta y la descarga de Internet se demora,


puedes detener la descarga y continuarla más tarde.

Buscar y ordenar están descritos en el capítulo Trabajar con documentos (en la página 83).

Trabajar con documentos (en la página 83) incluye información general sobre galerías.
Transparencia 189

Transparencia
La herramienta de TRANSPARENCIA te permite determinar cuánto de los colores y
objetos subyacentes se podrán ver a través de un objeto.

Forma
Segmentación
Nombre de mapa de bits
Control deslizante/Resolución
Cantidad de transparencia

Puedes controlar el nivel de transparencia desde completamente opaco a completamente


transparente. Web Designer va más allá que otros programas, ya que ofrece una amplia
gama de gradaciones de transparencia diferentes.

Puedes aplicar transparencia lisa o con gradación a todos los tipos de objeto, incluyendo
mapas de bits.

Aplicar transparencia plana

Se llama transparencia "plana" porque todas las partes de los objetos tienen la misma
transparencia, a diferencia de la transparencia con gradación.

1. Selecciona el o los objetos.


2. Selecciona la herramienta de transparencia (shortcut F6)
3. Arrastra la barra deslizante de transparencia en la barra de información

MAGIX Web Designer 6 suministra una vista previa en vivo. A medida que arrastras la barra
de transparencia, los objetos del documento se modifican para que puedas ver el efecto
inmediatamente.

Aplicar transparencia con gradación

La transparencia con gradación funciona de forma muy similar a los rellenos de color (en la
página 176) con gradación. Debes arrastrar sobre los objetos en la HERRAMIENTA DE
TRANSPARENCIA para crear una transparencia con gradación. Tienes a disposición una
gama similar de formas de transparencia: la más sencilla es la lineal, pero también puedes
utilizar transparencias circulares o elípticas:

1. Selecciona el o los objetos.


2. En la HERRAMIENTA DE TRANSPARENCIA , arrastra a lo largo de los objetos para crear
un desvanecimiento lineal a lo largo del objeto.
190 Transparencia
3. Selecciona formas de transparencia alternativas del menú desplegable de la barra de
información

Puedes seleccionar y ajustar la posición y la intensidad de transparencia utilizando los


controles deslizantes del objeto.

Lee Rellenos para más información sobre cómo manipular los controles deslizantes de
relleno y las diferentes formas de relleno (en este caso, formas de transparencia)

Aplicar transparencia a varios objetos

Si agrupas objetos y aplicas transparencia, todo el grupo será tratado como un objeto y la
transparencia se aplicará a todo el grupo. Sin embargo, si los objetos no están agrupados
y aplicas transparencia, cada objeto individual recibirá una transparencia por separado y
obtendrás un efecto diferente si los objetos están superpuestos.

Transparencia individual (izquierda) o transparencia de grupo (derecha)

Mezclar transparencias individuales y de grupo


Puedes combinar los métodos descritos anteriormente para crear combinaciones
complejas de transparencia. Por ejemplo, puedes aplicar un 50% de transparencia a un
objeto, después agruparlo y aplicar también transparencia al grupo. También puedes
aplicar primero transparencia al grupo y después aplicar atributos a objetos individuales
dentro de un grupo. Simplemente pulsa Ctrl, haz clic sobre el objeto y cambia sus
atributos.
Sombras 191

Sombras

La herramienta de sombra

La herramienta de SOMBRA (shortcut Ctrl+F2) te permite aplicar, eliminar y


modificar sombras semitransparentes (o "suaves").

Sin sombra
Tipos de sombras
Nitidez de la sombra
Transparencia de la sombra
Posición de la sombra

MAGIX Web Designer 6 tiene tres tipos de sombras:

• Pared (Wall): la sombra se proyecta detrás del objeto.


• Suelo (Floor): el objeto parece estar parado verticalmente sobre una superficie.

Brillo (Glow): la sombra se utiliza para añadir un efecto de halo alrededor del objeto

La transparencia de sombras suaves aumenta hacia los bordes, lo que le otorga un efecto
muy realista. Las sombras tienen su propia resolución y puedes modificar su tamaño sin
pérdida de calidad.
192 Sombras

Aplicar una sombra

Aplicar una sombra de pared


Para aplicar una sombra de pared:

1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botón PARED de la barra de
información de la herramienta de SOMBRA.
4. Puedes arrastrar la sombra desde o hacia el objeto
para crear más o menos distancia entre el objeto y la
pared imaginaria.

Como alternativa para crear una sombra de pared:

1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Arrastra desde el centro del objeto en dirección a la sombra.

Aplicar una sombra de suelo


1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botón SUELO de la barra de
información de la herramienta de SOMBRA.
4. Arrastra hacia o desde el objeto para cambiar el
tamaño o la dirección radial. El ángulo puede tener
hasta 70°.

Aplicar un efecto de resplandor


Añadir un resplandor o halo detrás de un objeto puede crear gráficos muy asombrosos.

Para crear un efecto de resplandor:

1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botón RESPLANDOR de la barra de
información de la herramienta de SOMBRA.
4. Arrastra hacia o desde el objeto para cambiar el
tamaño del resplandor.
Sombras 193
Desenfocar los bordes de la sombra
Esto cambia el tamaño de la sombra. Un
desenfoque leve otorga el efecto de una fuente de
luz fuerte, un desenfoque mayor, una fuente de luz
difusa o distante. Se recomienda que las sombras
siempre estén desenfocadas levemente, puesto
que es más realista.

Para desenfocar los bordes de la sombra:

1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA .
3. En la barra de información de la herramienta de SOMBRA, arrastra la barra deslizante
o introduce un valor en el campo de texto de la derecha.

Cambiar la transparencia de la sombra


Una sombra semitransparente es más realista
que una sombra sólida. Pero puedes cambiar
el nivel de transparencia de la sombra para
adaptarla a tus necesidades.

Para cambiar la transparencia:

1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA .
3. En la barra de información de la herramienta de SOMBRA, arrastra la barra deslizante
de transparencia o introduce un valor en el campo de texto de la derecha.

Cambiar el color de sombra o el efecto de relleno

Después de aplicar una sombra a un objeto, puedes cambiar el color de la sombra o el


efecto de relleno. Puedes aplicar cualquiera de los efectos de color de MAGIX Web
Designer 6 incluyendo rellenos multinivel.

Cómo cambiar el color de la sombra:


194 Sombras

Para más información sobre colores y la línea de colores lee el capítulo Trabajar con
colores (en la página 135).

• La forma más fácil es arrastrar y soltar un color desde la línea de color hasta la sombra.
(Asegúrate de soltar el color sobre la sombra y no sobre el objeto.)
• Como alternativa, tienes a disposición este método un poco más complejo pero que te
permite el control absoluto sobre el color:

1. Selecciona la sombra utilizando la herramienta de SELECCIÓN . (Asegúrate de


seleccionar la sombra y no el objeto).
2. Utiliza el EDITOR DE COLOR para editar el color.

Eliminar una sombra

Para eliminar una sombra suave:

1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botón SIN SOMBRA de la barra de información de la herramienta
de SOMBRA.

Aplicar una sombra a varios objetos

El resultado de aplicar una sombra depende de la agrupación de los objetos:

• Si los objetos están agrupados, las sombras superpuestas se fusionan (no se oscurecen
al superponerse).
• Si los objetos no están agrupados, cada objeto recibirá una sombra individual. Las
partes superpuestas de las sombras se verán más oscuras.
• Si has seleccionado varios objetos con sombra, los cambios se aplicarán a todas las
sombras.
Sombras 195

Selección de objetos con ayuda de la herramienta de


sombras

Antes de colocar una sombra a un objeto debes marcarlo. La forma usual de seleccionar
un objeto es a través de la herramienta de SELECCIÓN. Sin embargo, también puedes
utilizar la herramienta de SOMBRAS para marcar un objeto con un simple clic.

Copiar sombras a otros objetos

Una vez que una sombra se ve de la forma que deseas, puedes copiarla a otros objetos
utilizando la opción Pegar atributos. Simplemente copia el objeto que tiene la sombra
(Edición > Copia), selecciona el objeto o los objetos a los que quieres pegarle la sombra y
escoge Edición > Pegar atributos.
196 Diálogo de propiedades web

Diálogo de propiedades web


El diálogo de propiedades web es un diálogo con múltiples pestañas que te permite añadir
y configurar la mayoría de las características relacionas con la web en MAGIX Web
Designer 6 y fijar diferentes propiedades web en objetos, páginas y en toda tu página web.
Ábrelo con la opción de menú "HERRAMIENTAS->PROPIEDADES WEB..." (Shift+Ctr+W).

También puedes acceder a cada pestaña del diálogo con los botones de la barra
desplegable de propiedades web, disponible en la barra de herramientas de página web.

Pestaña Enlace
Pestaña Página web
Pestaña Página
Pestaña Imagen
Pestaña Mouse-over
Pestaña Marcador de posición
Pestaña Publicar
Crear/Editar barra de navegación

El diálogo carece de modo así que puedes dejarlo abierto mientras seleccionas diferentes
páginas y objetos en tu documento. Así es más fácil fijar propiedades rápidamente en
diferentes objetos y páginas en tu sitio web. Utiliza el botón ACEPTAR para aplicar tus
cambios y cerrar el diálogo, o bien utiliza el botón APLICAR para aplicar tus cambios sin
cerrar.

Ten en cuenta que si tu documento actual es un diseño de animación, el diálogo de


PROPIEDADES WEB aparece de forma modificada con algunos controles diferentes y
muchos otros deshabilitados porque no se aplican a las animaciones. Lee el capítulo sobre
Flash (en la página 283) para informarte sobre cómo usar este diálogo con diseños de
animación.

Las siguientes secciones abarcan cada una de las pestañas correspondientes.


Diálogo de propiedades web 197

Pestaña Enlace

La configuración de esta pestaña se aplica al objeto, a los objetos o al texto


seleccionado(s). Por lo general, esta pestaña se utiliza para añadir un enlace a un objeto en
tu página web (por ejemplo un botón o una foto), o bien para añadir texto de modo que
cuando un usuario visita tu página y hace clic en el objeto/texto, es remitido a otra página.
Puedes añadir enlaces hacia otras páginas de tu sitio web, hacia una URL (dirección web),
o incluso hacer que aparezca una ventana emergente (pop-up).

Para agregar un vínculo a unas pocas palabras de un párrafo de texto, ve a HERRAMIENTA


DE TEXTO y arrastra sobre el texto que quieras vincular, para seleccionarlo. A continuación
configura el enlace en esta pestaña.

La sección principal de esta pestaña te permite escoger qué debe ocurrir cuando se hace
clic en el objeto o texto seleccionado.
198 Diálogo de propiedades web
Enlazar a una dirección web
Para vincular esta dirección, introduce una dirección web. Si mantienes seleccionado el
recuadro "CORREGIR DIRECCIÓN AUTOMÁTICAMENTE ", tu dirección, en caso necesario, se
ajustará si haces clic en OK o Aplicar. Por ejemplo, si entras a "www.xara.com", lo
corregirá a "http://www.xara.com/".

Puedes poner en el campo de la dirección del enlace una dirección de correo electrónico y
así, al hacer clic en el enlace, se abrirá el programa de correo electrónico del usuario con el
campo Para: rellenado. Asimismo, puedes especificar la línea del asunto, agregar
direcciones de correo electrónico CC o CCO para copiarlas en el correo electrónico, o
incluso especificar el cuerpo de texto estándar que deseas utilizar.

tunombre@elsitioquequieras.com asunto:correo electrónico de la página web


cc:otro@elsitioquequieras.com coo:yotromas@elsitioquequieras.com cuerpo:correo
electrónico autogenerado

Nota técnica: MAGIX Web Designer 6 codifica tu dirección de correo electrónico para
reducir las probabilidades de que robots de correo basura encuentren tu correo
electrónico de la página web. Esto requiere que Javascript esté permitido en el navegador
(actualmente > 95%) de los navegadores).

Enlazar a la página
Selecciona esta opción para enlazar otra página en la página web actual. La lista
desplegable te permite seleccionar la página que deseas enlazar.

CONSEJO: si tu documento de sitio web tiene varias páginas, asignar a cada una un
nombre facilita la configuración y mantenimiento de los enlaces de tu página porque la lista
de páginas contendrá los nombres de las páginas y no solo "Página 2", "Página 3", etc.

Consulta la sección de pestaña Página (en la página 204) a continuación para más
detalles sobre cómo configurar los nombres de página o editar los nombres en la
galería de Páginas y capas.
Además de una entrada para cada página de tu sitio, la lista desplegable muestra
asimismo las entradas especiales PÁGINA SIGUIENTE y PÁGINA ANTERIOR. Utilízalo para
agregar un enlace hacia las páginas anterior y posterior de tu sitio web. En el caso de
enlaces de este tipo, orden de las páginas se establece según el orden de página que
aparece en MAGIX Web Designer 6. Un enlace "siguiente" en la última página vincula la
primera página y un enlace "anterior" en la primera página vincula la última página.

Enlazar a una referencia (anchor)


Esta opción te permite hacer que el usuario salte a una parte específica de cualquier
página de tu sitio web.

Para configurar un punto de referencia, primero ve a la página y determina hacia dónde


quieres que lleve el enlace. Selecciona el objeto y ponle un nombre utilizando la opción
HERRAMIENTAS->NOMBRES... . A continuación selecciona el objeto para el cual quieres crear
Diálogo de propiedades web 199
el enlace y escoge en la lista suministrada por la opción "Enlazar a una referencia" el
nombre de la referencia que ya creaste.

Observa que cuando creas un enlace vinculado a un objeto que se encuentra muy abajo
en la página, el navegador web bajará la página automáticamente para mostrar tu objeto
de referencia.

Enlace al archivo
Esta opción de enlace es útil si quieres agregar un documento, película u otro archivo a tu
sitio web para que esté a disposición de los visitantes. Por ejemplo, es posible que quieras
ofrecer un documento PDF.

Selecciona el objeto o texto que quieres enlazar con el archivo. Luego, activa esta opción
Enlace al archivo y utiliza el botón EXPLORAR para buscar el archivo en tu ordenador. El
nombre del archivo aparece en el campo de texto a la izquierda del botón Explorar. Con
un clic en Aceptar, el enlace se aplicará.

Además de aplicar el enlace, MAGIX Web Designer 6 ha hecho una copia de tu archivo y la
ha colocado en la carpeta de soporte para tu diseño. Ésta es una carpeta que se guarda
junto con tu archivo .web o .xar. Si tu diseño se llama "Misitio.web", la carpeta de soporte
se llamará "Misitio_web_files". Todos los archivos que se encuentran en la carpeta de
soporte se publican junto con tu sitio web, lo que significa que tu archivo se publicará con
tu sitio web para que el enlace que has agregado funcione. Consulta el capítulo Trabajar
con documentos (en la página 76) para más información acerca de las carpetas de
soporte.

Ten en cuenta que, como se crea una copia independiente de tu archivo en la carpeta de
soporte de tu diseño, debes actualizar esa copia siempre que modifiques el archivo y
quieras publicar la versión modificada. O puedes repetir el proceso de enlace y buscar el
archivo actualizado. De igual forma, si mueves o copias tu diseño a otro ordenador o le
das una copia a alguien, debes asegurarte de enviar también la carpeta de soporte del
archivo de diseño porque contiene una parte muy importante de tu página web.

Capa popup
Puedes añadir el contenido que quieras en una capa separada de tu página y puedes
hacer que este contenido se muestre como un popup sólo cuando el usuario hace clic en
un enlace. Por ejemplo, podrías agregar un texto descriptivo sobre una foto que se
encuentre en tu página web y hacer que el texto sólo aparezca cuando el usuario haga clic
en la foto.

Para añadir una capa de popup, primero tienes que agregar la propia capa
mediante la GALERÍA DE CAPAS y luego añadir tu contenido de popup a esa capa.

Lee el capítulo Galería de páginas y capas para más información. A continuación puedes
seleccionar la capa de la lista de capas que encontrarás junto a la opción de "Capa
popup".
200 Diálogo de propiedades web
Ahora, cuando un usuario haga clic en tu objeto, ¡aparecerán los contenido de la capa!
Con un clic en cualquier otro lugar de la página, el popup desaparece de nuevo.

Ten en cuenta que todo el contenido de la capa popup se carga en cuanto el usuario visita
tu página. Entonces, si quieres suministrar muchas fotos con ventanas emergentes, utiliza
la característica Foto emergente descrita a continuación.

El capítulo "Primeros pasos" (en la página 56) incluye algunas instrucciones paso a paso
para agregar capas popups.

Foto emergente
Esta opción te ofrece una forma muy fácil de añadir fotos emergentes y otras
características de la galería de fotos a tu sitio web, sin agregar capas. Simplemente
importa tu foto y utiliza la HERRAMIENTA DE SELECCIÓN para reducir el tamaño
correctamente de modo que aparezca como una pequeña miniatura de foto en tu página
web. Luego selecciónala y escoge la opción FOTO EMERGENTE .

Haz clic en el botón CONFIGURACIÓN junto a esta opción para ir a la PESTAÑA IMAGEN, en
donde puedes fijar el tamaño de la foto emergente y escoger entre otras opciones.
Consulta la sección pestaña Imagen a continuación (en la página 206) para más detalles.
Al seleccionar la opción foto emergente en esta pestaña Enlace, también se selecciona la
casilla foto emergente en la pestaña Imagen, es decir, que ambos activan el mismo
comportamiento de popup.

Utilizar colores habituales para enlaces de sitios web


Esta opción te permite decidir cómo deben aparecer los enlaces de texto. Por defecto,
esta opción está seleccionada, lo que significa que el enlace de texto tendrá el color que ´ú
definiste para toda la página web. Puedes configurar este color en la pestaña Página web
(véase el apartado de la pestaña Página web).

Si deseleccionas esta opción, el enlace de texto seleccionado mantendrá el color que le


diste en la página. Por lo tanto, puedes asignar colores distintos a los diferentes enlaces, si
lo deseas.

Abrir enlace en:


Esta opción no hace nada si una de las opciones "Capa popup" o "Popup foto" está
seleccionada. Pero de cara a otros enlaces te permite definir cómo el navegador web debe
cargar la página web de destino. Por defecto, está configurado como "Sin especificar", lo
que por lo general significa que el navegador abrirá el enlace en la misma ventana del
navegador que la ventana o el enlace.

La lista desplegable contiene cuatro opciones producen que el navegador haga cosas
especiales. Tiene que seleccionar una de estas opciones o tecleas el nombre de un frame:

NUEVA VENTANA (_BLANK) Abre el enlace en una nueva ventana del navegador.

MISMO FRAME (_SELF) Abre el enlace en este frame (el frame que contiene este objeto).
Diálogo de propiedades web 201
FRAME SUPERIOR (_PARENT) Abre el enlace en la ventana principal o en el frameset
(conjunto de marcos o frames) que contiene este frame.

MISMA VENTANA (_TOP) Abre el enlace dentro de la página principal del navegador,
sustituyendo todos los frames existentes.

Si quieres que el enlace se cargue en un frame específico en el navegador, teclea el


nombre del frame en este campo.

Área que permite clic


Esta opción te permite especificar en qué área del objeto se debe hacer clic para invocar el
enlace. Sin embargo, no es compatible con páginas web HTML (el rectángulo que rodea el
objeto siempre se usa); sólo funciona si se exporta a flash.

FORMA DE OBJETO : El usuario debe hacer clic exactamente en el contorno del objeto para
invocar el enlace.

RECTÁNGULO RODEANDO OBJETO: El usuario puede hacer clic en cualquier parte del
rectángulo que esté rodeando el objeto (caja circundante) para invocar el enlace.
202 Diálogo de propiedades web

Pestaña "Página web"

La configuración en esta pestaña se aplica a todo el documento o a toda la página actual,


por lo que no importa qué objeto o página hayas seleccionado.

TÍTULO, DESCRIPCIÓN & PALABRAS CLAVE : Estos campos son como se describen en la
PESTAÑA PÁGINA (en la página 204)más arriba. Opcionalmente puedes configurar estos
campos para que se apliquen a cada página de tu sitio, a no ser que se sobrescriban por
la configuración para una página de la pestaña Página. Por ejemplo, una página que no
Diálogo de propiedades web 203
tenga definido su propio título en la pestaña Página obtendrá el título que especifiques
aquí.

TRACKER CODE : Esto sirve para el mismo propósito que el campo de tracker code en la
pestaña Página. Lee el apartado pestaña Página (en la página 204) para obtener más
detalles.

Sin embargo, para este campo rige que si se especifica código en la PESTAÑA PÁGINA
WEB ,se incluye en cada página de tu sitio de forma adicional al código especificado para
cada página en la pestaña Página. Esto te permite incluir código en cada página y,
además, te permite agregar más código a las páginas que lo requieran.

Colores para enlaces de sitios web


Esta sección de la pestaña Página web te permite controlar cómo los enlaces de texto
deben aparecer en tu página web.

SUBRAYAR TEXTOS CON ENLACES : El subrayado se suele usar para resaltar en el texto los
enlaces que permiten clic, por lo que esta opción está seleccionada por defecto.
Deselecciónala si no quieres que tus enlaces de texto aparezcan subrayados.

COLOR MOUSEOFF : Aquí puedes elegir el color que quieras para todos tu enlaces de text. O
bien puedes elegir en la lista desplegable (si existe una en tu documento actual) un color
original con nombre, o bien puedes hacer clic en el botón Editar para abrir el editor de
color y elegir cualquier otro color.

COLOR MOUSEOVER : Los enlaces de texto cambiarán a este color cuando un usuario
mueva el cursor del ratón por encima de ellos.

COLOR VISITADO : Enlaces de texto que conduzcan a una página que el usuario ya ha
visitado se visualizan en este color en lugar del color MouseOff.
204 Diálogo de propiedades web

Pestaña de página

Las opciones en esta pestaña se aplican a la página actual, no al objeto o a los objetos
seleccionado(s). La página actual se indica con líneas de ángulo negras en la parte exterior
de cada esquina de la página. Todos los campos de esta pestaña son opcionales; no es
necesario que rellenes estos campos para cada página web de tu sitio.

Si quieres el mismo título, la misma descripción y las mismas palabras clave para todas las
páginas web de tu sitio, puedes definirlo una vez en la pestaña Página web en lugar de
definirlo aquí para cada página.

PÁGINA DE NOMBRE DE ARCHIVO : Utiliza este campo para fijar el nombre que quieras usar
para esta página cuando sea exportada. Por lo tanto, si quieres que la página se exporte
como "inicio.html", teclea en este campo "inicio".

Por lo general, a la primera página de un sitio se le asigna el nombre de "index.htm" o


"inicio.htm", ya que si un usuario especifica un URL que consiste sólo de un dominio sin el
nombre de la página (por ejemplo www.xara.com), los servidores web lo vinculan
automáticamente a la página index.htm, si ésta existe.
Diálogo de propiedades web 205
TÍTULO DE LA PÁGINA: Opcionalmente puedes elegir un título para tu página. Si está
definido, los navegadores web lo usan para mostrar el título de la página en el frame de la
ventana del navegador o en la pestaña. A modo de ejemplo, en el momento de redacción
la página inicial de www.xara.com tiene el título "Graphics Software by Xara" que, como
puedes ver, es mostrado por el navegador web si visitas la página.

Nota para usuarios avanzados: El título se introduce en el encabezado de la página


utilizando el elemento HTML "<title>".

DESCRIPCIÓN DE PÁGINA : El texto de descripción de página puede mostrarse en los


resultados de los buscadores cuando los usuarios encuentran tu página al realizar una
búsqueda en Internet. La descripción de página también puede ser mostrada por
navegadores y otros servicios web.

Nota para usuarios avanzados: La descripción se inserta en el encabezado de página


como metadatos
(‘<meta name="descripción" …..).

PALABRAS CLAVE DE LA PÁGINA: Aquí puedes introducir las palabras clave que quieras que
sean encontradas por los buscadores para que los usuarios encuentren tu página.
Introduce aquellas palabras que los visitantes potenciales probablemente utilicen para
buscar si están buscando páginas o sitios como el tuyo.

Para aquellos que estén familiarizados con HTML, las palabras clave se introducen en el
encabezado de página como metadatos.

Nota para usuarios avanzados: Las palabras claves se insertan en el encabezado de


página como metadatos
(‘<meta name="palabras clave" …..).

TRACKER CODE: Puedes utilizar este campo para pegar en tu página cualquier código
HTML válido. Para aquellos que están familiarizados con HTML, el código se inserta sin
modificar al final de la página, justo antes del tag de cierre "</body>".

Esto suele ser de gran ayuda para insertar un tracker code que recoge las estadísticas
sobre las visitas a tu página. A modo de ejemplo, Google Analytics ofrece un snippet (un
"trozo") de HTML que puedes pegar en este campo para la página web que desees
controlar.

Aquí hay que tener cuidado, ya que insertar un código o script inválido en tu página puede
causar serios problemas en toda la página en su conjunto.

Si tienes que insertar exactamente el mismo código en cada página de tu sitio, puedes
usar el campo de Tracker code en el diálogo de la pestaña Página web en lugar de
introducirlo individualmente en cada página utilizando la pestaña Página.
206 Diálogo de propiedades web

Pestaña Imagen

Fotos emergentes
Esta sección de la PESTAÑA IMAGEN te permite añadir fotos emergentes y otras
características de la galería de fotos a tu página web. Simplemente importa tu foto y utiliza
la HERRAMIENTA DE SELECCIÓN para reducir el tamaño correctamente de modo que
aparezca como una pequeña miniatura de foto en tu página web. Luego, mientras la foto
todavía está seleccionada, selecciona el campo foto emergente en esta pestaña. Escoge
el tamaño que quieres dar a la foto emergente en el campo de ancho (valor por defecto:
500 píxeles). Haz una vista previa de tu página y haz clic en la miniatura de tu foto en tu
página, ahora verás aparecer la ventana emergente con tu foto.

Al activar la función de foto emergente en el campo de la pestaña IMAGEN , también se


selecciona automáticamente la opción correspondiente de la pestaña ENLACE . Esto es
porque con un clic sobre la foto verás la foto emergente, de forma que no puedes agregar
otro enlace al mismo objeto. Es decir, que cualquier enlace que hayas configurado
previamente en el objeto mediante la pestaña Enlace desaparecerá.

Una gran ventaja de estas ventanas emergentes frente a las capas emergentes (tal como
se describen anteriormente en la sección de la pestaña ENLACE ) es que la foto ampliada
solo se carga en el navegador web cuando los visitantes hacen clic en una foto en
miniatura. Por lo tanto, este método es más adecuado para presentar un gran número de
fotos en una página de galería, ya que en un primer momento sólo se cargan las pequeñas
miniaturas, permitiendo así que la página se cargue más rápidamente.
Diálogo de propiedades web 207

Observa que esta característica funciona con otros objetos además de las fotos, por
ejemplo con formas y grupos, pero no se puede utilizar directamente en texto. Puedes
introducir un grupo de relleno de texto (Ctrl+G) para evitar esta restricción.

Título de la ventana emergente


Utiliza este campo para agregar un título a la foto seleccionada, que se mostrará sobre la
foto emergente. Ten en cuenta que debes activar también esta opción de título en el
diálogo de opciones de foto emergente (ver a continuación) porque, por defecto, los títulos
no se muestran.

Opciones de la foto emergente


Haz clic en el botón OPCIONES para abrir el diálogo OPCIONES DE FOTO EMERGENTE . Aquí
puedes escoger entre una variedad de opciones que cambian la forma en que se
presentan tus fotos emergentes.

Opciones de la ventana emergente


Las siguientes opciones cambian la apariencia de la foto emergente.

OSCURECER PÁGINA MIENTRAS LA VENTANA EMERGENTE ESTÁ ABIERTA : con esta opción
seleccionada, toda la página se oscurece cada vez que se muestra una foto emergente.
Esto ayuda a enfatizar la foto emergente de forma que se destaque contra el fondo oscuro
de la página.

MOSTRAR SOMBRA DETRÁS DE LA VENTANA EMERGENTE : esta opción coloca una sombra
detrás de la ventana de la foto emergente para que se destaque del fondo de la página.
208 Diálogo de propiedades web
MOSTRAR TÍTULO DE LA IMAGEN : si has introducido texto de título (lee más arriba) para cada
una de tus fotos, esta opción hace que el título aparezca sobre la foto emergente.

Ten en cuenta que el texto del título es independiente del texto de subtítulo que se
muestra debajo de la foto. Lee a continuación para más información sobre los textos de
subtítulo.

Opciones de la galería
Las siguientes opciones activan las características de galería para tus fotos emergentes.

MOSTRAR LOS CONTROLES DE NAVEGACIÓN DE LA GALERÍA : activa esta opción para que los
controles de la galería se vean sobre la foto emergente.

Esto aparece arriba de la foto cuando se coloca el cursor del ratón sobre la foto. Permite al
visitante ver las otras fotos emergentes en la página actual sin tener que cerrar la ventana
emergente y hacer clic en las vistas en miniatura de las otras fotos. El visitante puede
pasar a la foto anterior o siguiente, o iniciar o detener un pase de fotos automático en el
que cada foto se muestra durante algunos segundos para luego pasar a la siguiente.

MOSTRAR GUIÓN CINEMATOGRÁFICO AL FINAL DE LA FOTO : con esta opción se verá una
cinta cinematográfica con vistas en miniatura debajo de la ventana emergente. Esto
permite al visitante ir a cualquiera de las fotos de la ventana emergente con un clic en las
vistas en miniatura en la cinta cinematográfica, sin tener que cerrar primero la ventana
emergente de la foto.
Diálogo de propiedades web 209
INICIAR PASE DE FOTOS AUTOMÁTICAMENTE : activa esta opción cuando quieras que se
inicie un pase de fotos cuando un usuario hace clic en tus fotos emergentes. También
puedes escoger cuántos segundos debe mostrarse cada foto cuando el pase de fotos
esté funcionando.

Ten en cuenta que sólo las fotos incluidas en la galería de fotos son aquellas fotos que se
encuentran en la página actual que están configuradas como ventanas emergentes. Todas
las otras fotos en tu página no aparecerán en la galería, por lo que debes asegurarte de
usar la pestaña Enlace del diálogo de propiedades web para activar la opción foto
emergente en todas las fotos que quieras que se incluyan en la galería.

Subtítulos de imagen
De forma opcional puede mostrarse un subtítulo debajo de cada foto emergente. Introduce
el texto del subtítulo en este campo en la pestaña Imagen.

Observa que esta característica funciona con otros objetos además de las fotos, por
ejemplo con formas y grupos, pero no se puede utilizar directamente en texto. Puedes
introducir un grupo de relleno de texto (Ctrl+G) para evitar esta restricción.

Para aquellos familiarizados con HTML, este texto se utiliza como texto alternativo en la
imagen exportada para el objeto seleccionado actualmente, independientemente de si la
imagen tiene o no una ventana emergente. Los navegadores web muestran este texto en
la página en lugar de la imagen si ésta no está disponible por alguna razón.
210 Diálogo de propiedades web
Tipo de imagen web
Debido a la naturaleza de las páginas web HTML, la mayoría de los objetos que ves y
puedes seleccionar en la página MAGIX Web Designer 6 deben convertirse en imágenes
de mapas de bits durante el proceso de exportación de tu página web. Todo esto sucede
de forma automática si realizas una vista previa y la exportación, pero los controles de esta
pestaña te conceden cierto control sobre cómo se crean estas imágenes.

Recuerda que cada grupo, forma, encabezado, logotipo, foto, fondo de panel, etc. se
exporta por separado como imagen. Viendo cómo se agrupan los objetos en tu diseño,
puedes controlar cómo numerosas imágenes son exportadas para componer tu página
web. Por ejemplo, si tienes dos formas separadas en tu diseño que no están agrupadas
conjuntamente, se exportarán como dos imágenes separadas. Puedes agrupar las dos
formas (Ctrl+G), así se exporta una sola imagen.

Este apartado sobre la pestaña Imagen te permite especificar cómo el objeto seleccionado
actualmente debe ser exportado como una imagen. Por defecto, MAGIX Web Designer 6
lo decidirá por ti. Esto significa que como regla general las fotos se exportarán como JPEG
(suele ser el mejor formato para fotos) y otros objetos se exportarán como PNG (suele ser
el mejor formato para gráficos). Las fotos que se rotaron en la página o a las que se les
aplicó una sombra semitransparente, se exportan como PNG porque JPEG no es
compatible con la transparencia.

Puedes forzar el objeto o los objetos seleccionado(s) para exportar como JPEG o como
PNG seleccionando la opción apropiada. Si la opción JPEG está seleccionada, puedes
también escoger la calidad JPEG para esta imagen. Una calidad superior implica que el
tamaño del archivo JPEG es mayor.

Pestaña Mouse-over
Diálogo de propiedades web 211
Las opciones de esta pestaña especifican lo que debería ocurrir cuando un visitante
coloca el cursor del ratón sobre el objeto seleccionado. Por ejemplo, puedes hacer que
cierto texto o una capa completa de contenido emerja cuando un visitante coloque el
cursor del ratón sobre una foto de tu página web.

MOSTRAR TEXTO DE POPUP (TÍTULO): aquí puedes especificar el texto del "título de popup"
de un objeto. Los navegadores web lo muestran como un consejo de herramienta
emergente cuando el usuario mueve el cursor del ratón sobre un objeto. Por ejemplo, si
cuentas con una foto en miniatura que dispone de una versión ampliada de la foto al hacer
clic (consulta la sección pestaña Imagen para información sobre esto), es posible que
quieras insertar el texto de título de popup "Haz clic para ampliar". Entonces, cuando el
cursor del ratón pasa sobre la miniatura de la foto, se verá este consejo de herramienta.
MOSTRAR CAPA POPUP: del mismo modo que puedes añadir a tu diseño una capa que sólo
se muestre cuando un usuario hace clic en un objeto (lee el apartado de la pestaña
Enlace), también puedes especificar que esa capa se muestre cuando el cursor del ratón
se mueva sobre un objeto. Cuando el cursor del ratón se quita del objeto, vuelve a
desaparecer el popup. Simplemente escoge esta opción y selecciona la capa que quieras
que se convierta en popup en la lista suministrada.

Por ejemplo, puedes utilizar esta característica para mostrar como popup una copia más
grande de una foto cuando el usuario mueva el cursor del ratón sobre la misma. Ten en
cuenta que todo el contenido de la capa popup se carga en cuanto el usuario visita tu
página. Por lo tanto, este método de mostrar fotos emergentes no se recomienda si tienes
una gran cantidad de fotos que quieres mostrar. En este caso, utiliza la función Foto
emergente (en la página 35) descrita en el apartado de la pestaña Enlace.
212 Diálogo de propiedades web

Pestaña Marcador de posición

Selecciona el objeto del marcador de posición y abre esta pestaña del diálogo de
PROPIEDADES WEB . Puedes utilizar los controles de esta pestaña para agregar a tu página
un archivo flash o de gráfico externo o para insertar en tu página código HTML que hayas
obtenido de otro sitio. El objeto seleccionado se convierte en un "marcador de posición".
Esto significa que el objeto representa las dimensiones y la posición del contenido que has
agregado, pero que al exportar tu página web, el objeto se sustituye con el código o
archivo verdadero que has insertado.

Sin embargo, existe una forma más sencilla de añadir archivos o códigos a tu sitio.
Simplemente arrastra y suelta los archivos Flash o GIF animados desde el explorador de
archivos de Windows hasta tu página. Se generará automáticamente una imagen de
marcador de posición y se colocará en tu página. Una copia del archivo se añade a la
carpeta de soporte de tu diseño para que se exporte y publique con tu sitio. Al exportar y
publicar tu sitio, la imagen del marcador de posición se sustituye por el archivo verdadero
que has importado.
Diálogo de propiedades web 213
De la misma forma, si has copiado código HTML de la página web de widgets de un
tercero, puedes pegar el código en MAGIX Web Designer 6 (asegúrate de que te
encuentres en la herramienta de selección cuando lo hagas y no en la herramienta de texto
porque, de ser así, se insertará como texto). MAGIX Web Designer 6 detecta el HTML y lo
utiliza para renderizar una imagen de marcador de posición que aparecerá en tu página. Al
exportar/publicar tu sitio, el marcador de posición se sustituye por el código verdadero
para que el widget funcione. Consulta el capítulo de Gráficos web y widgets (en la página
268) para más detalles.

Si quieres insertar un código o un archivo de forma manual, primero crea en tu página web
un objeto (por lo general un rectángulo, con la HERRAMIENTA DE RECTÁNGULO (en la
página 134)) que tenga las mismas dimensiones que el contenido que quieres agregar y
posiciónalo donde quieras que aparezca el contenido. Esto es tu "marcador de posición"
porque se sustituirá en tu página exportada por el contenido que especifiques en esta
pestaña

Reemplazar con Flash


Selecciona esta opción para sustituir el objeto del marcador de lugar con una animación
flash. Utiliza el botón Explorar para localizar el archivo Flash (.swf) que quieres usar.

A continuación , el archivo elegido se copiará automáticamente al directorio de


compatibilidad para el diseño actual de modo que cuando exportes tu página web, el
archivo se incluirá en el directorio _htm_archivos junto con todas las demás imágenes
generadas para tu página web. Lee el capítulo Trabajar con documentos para obtener
información sobre los directorios de compatibilidad.

Reemplazar con un archivo gráfico


Selecciona esta opción si quieres insertar un gráfico o una imagen en tu página web en
lugar del objeto del marcador de lugar (por ejemplo PNG, GIF u otro archivo de imagen
compatible con el web.). Utiliza el botón Explorar para seleccionar el archivo.

A continuación , el archivo elegido se copiará automáticamente al directorio de


compatibilidad para el diseño actual de modo que cuando exportes tu página web, el
archivo se incluirá en el directorio _htm_archivos junto con todas las demás imágenes
generadas para tu página web. Lee el capítulo Trabajar con documentos para obtener
información sobre los directorios de compatibilidad.

Reemplazar con código HTML


Con esta opción puedes pegar el código HTML que has obtenido de otro sitio. Por
ejemplo, hay muchos sitios web que suministran widgets que puedes agregar a tu página
web pegando el código HTML. Sigue las instrucciones que ofrece el proveedor.

Tal como se mencionó anteriormente, puedes simplemente pegar el código HTML


directamente en la página en vez de insertarlo en este diálogo (siempre que te encuentres
en la herramienta de selección). Al hacerlo de esta forma, aparecerá automáticamente una
imagen de marcador de posición de aspecto similar al widget verdadero, por lo que se
recomienda utilizar este método para insertar código HTML.
214 Diálogo de propiedades web
En la galería de diseños está disponible una variedad de widgets que son fáciles de
insertar en tu página. Haz clic aquí
http://www.xara.com/us/products/webdesigner/widgets para obtener más consejos sobre
widgets en la página web de Xara.

ADVERTENCIA: Al igual que ocurre con el código de seguimiento, tienes que tener tener
cuidado e insertar solamente código que sabes que es seguro y que proviene de una
fuente de fiar. El código inválido o roto afectará tu página web publicada porque MAGIX
Web Designer 6 simplemente inserta el código tal y como tú lo suministres, sin modificar,
sin revisar, en tu página web cuando ésta es exportada.

Si utilizas módulos de Xara (www.xaraonline.com), puedes pegar un snippet (trozo) de


módulo en este campo para agregar tu módulo a tu página web.

Si el código HTML que introduces contiene una referencia a archivos externos que se
supone deben encontrarse en tu página web, deberás copiar estos archivos externos en el
directorio de compatibilidad para tu diseño. Lee el capítulo Trabajar con documentos para
obtener información sobre los directorios de compatibilidad. Una vez en la carpeta de
soporte, los archivos se copiarán automáticamente a la carpeta _htm_files de tu sitio web
al exportarlo. Por lo tanto, también es necesario asegurarte que cualquier referencia a
estos archivos en el código HTML se encuentre en la ubicación correcta.

He aquí un ejemplo simple para explicarlo de forma más clara. Supón que yo quiero
insertar una pequeña pieza de código HTML que añade una imagen en mi página web. El
código HTML que yo agregue necesitará una referencia al archivo de imagen en algún
lugar. Primero copio el archivo de imagen, digamos "milogotipo.gif", en el directorio de
compatibilidad de mi documento. Si el documento es "mipagina.web", el directorio de
compatibilidad será "mipagina_web_archivos". Yo sé que cuando exporte esta página
web, la exportaré al nombre "mipagina.htm". Esto significa que todas las imágenes
generadas para mi página web y una copia de "milogotipo.gif" que puse en el directorio de
compatibilidad, se exportarán al directorio "mipagina_htm_archivos". Por lo tanto, en el
código HTML que inserto tengo que incluir una referencia al archivo de imagen en esa
ubicación. Entonces insertaría:

<img src="mipagina_htm_archivos/milogotipo.gif" />

Observa que esto hace referencia al archivo de imagen en la ubicación del directorio de la
imagen exportada (_htm_archivos) y NO en el directorio de compatibilidad (_web_achivos)
directamente, ya que únicamente el directorio de la foto exportada se copia en el servidor
web junto con mi página web cuando se publique la página.

Obviamente, si realmente sólo quiero poner una imagen en mi página web, ¡es mucho más
fácil importar directamente la imagen a MAGIX Web Designer 6! Pero esto es un ejemplo
simple que muestra cómo agregar un código HTML que contiene una referencia a un
archivo externo.

Consulta Integración de YouTube, Flash y otros widgets (en la página 61) para más
ejemplos.
Diálogo de propiedades web 215
Objetos de marcador de posición
El objeto de marcador posición lugar en realidad está incluido en tu página web y puede
mostrarse al usuario en algunas circunstancias. Por ejemplo, si has añadido una animación
flash y el usuario que visita tu página no tiene instalado Flash en su navegador web, o si lo
tiene deshabilitado, el navegador mostrará en su lugar la imagen del marcador de posición.

Por lo tanto, muchas veces es buena idea hacer que el objeto de marcador de posición no
sea simplemente un rectángulo negro o una imagen precisa del widget que aparece en tu
página. Podrías usar un grupo como marcador de posición que incluya un mensaje de
texto que pida al visitante instalar Flash para que así pueda ver el contenido flash.

VOLVER A GENERAR LA IMAGEN DE MARCADOR DE POSICIÓN AUTOMÁTICAMENTE : si esta


opción que se encuentra en la parte inferior de la PESTAÑA MARCADOR DE POSICIÓN se
selecciona, la imagen del marcador de posición se genera automáticamente desde el
contenido que has agregado, siempre que cambies el contenido o cuando cambies el
tamaño del objeto de marcador de posición.

Al pegar código o importar archivos directamente en tu página, tal como se recomienda


anteriormente, esta opción se selecciona automáticamente para la imagen de marcador de
posición que se genera. Muchas veces es útil desactivarla tras insertar el contenido de
esta forma, si te gusta la imagen de vista previa y no quieres que se vuelva a generar si
cambias algo del contenido.

Pestaña Publicar

Necesitarás una empresa de alojamiento web para que aloje tu sitio web. Muchas veces,
los proveedores de Internet incluyen un "espacio web" como parte de la suscripción
normal. También el control Perfil del diálogo Publicar ofrece una o más opciones de
alojamiento que puedes aprovechar. Lee a continuación para más detalles. La mayoría de
los proveedores también ofrecen la posibilidad de que adquieras tu propio nombre de
dominio (por ejemplo www.xara.com) y establecer un enlace a tus páginas web.

Si quieres que MAGIX Web Designer 6 publique tu página web terminada en tu espacio
web automáticamente, de modo que se encuentre en Internet, tienes que introducir los
detalles de acceso para tu espacio web en este pestaña.
216 Diálogo de propiedades web

La primera sección de este diálogo te permite seleccionar un perfil configurado


previamente. La lista de perfiles contiene dos tipos de perfiles. Aquellos que has creado
personalmente y se guardan en el ordenador que estás utilizando (lee a continuación para
más información sobre cómo crearlos). Y uno o más perfiles estándar que se instalan junto
con el programa y que te ofrecen algunas soluciones de alojamiento web diferentes.

PERFILES ESTÁNDAR : al seleccionar un perfil estándar, debería aparecer de inmediato un


banner en la lista de perfiles. Este banner se descarga de la empresa de alojamiento web
(por lo que sólo aparecerá si estás online). Haz clic en un botón del banner para obtener
más información acerca de la solución de alojamiento web de la página web de la
empresa. Si decides registrarte para el alojamiento con uno de los proveedores sugeridos,
recibirás un nombre de usuario y una contraseña para conectarte. Ingrésalos en la sección
DETALLES FTP de este diálogo.
Diálogo de propiedades web 217
FTP DETAILS : Enter the FTP details you have for your web space here. You need to enter at
least the host address and username. You don’t need to enter the password at this stage if
you don’t want to. If it’s missing you will be asked to enter it each time you publish your
website.

La subcarpeta opcional te permite publicar tu página web en una subcarpeta. Por ejemplo,
si publicases en el dominio xara.com (obviamente no puedes hacerlo) y quisieras que la
dirección web fuese:

xara.com/products/web_designer

A continuación define una subcarpeta "productos" y el nombre de página "web_designer".


Si creas una subcarpeta de este modo, todas las páginas en tu sitio web se publicarán en
esta carpeta.

Guardar estos detalles con el documento actual


Los detalles FTP que has introducido están asociados solamente con el documento
abierto actualmente. Si cambias a otro documento verás que los campos de los detalles
FTP quedan en blanco, salvo que ya hayas introducido detalles para ese documento. Por
defecto, los detalles FTP NO se guardan en el documento. Esto significa que cada vez que
cargues un documento y quieras publicarlo, deberás volver a introducir los detalles FTP o
seleccionar un perfil desde donde copiar los detalles.

Selecciona este campo si quieres que los detalles FTP se guarden junto con el
documento. Esto significa que siempre que cargues el documento, los detalles FTP se
cargarán también y podrás volver a publicar de inmediato.

Guardar contraseña en el documento


Si escoges guardar los detalles FTP en tu documento, esta opción se activará junto al
campo de la contraseña. Esto controla si guardas o no la contraseña FTP en el documento
junto con los otros detalles. Si escoges hacerlo, puedes volver a publicar el sitio web sin
tener que volver a introducir la contraseña.

Por supuesto, cualquier persona que obtenga una copia de tu archivo de diseño también
podrá publicar tu página. Por lo tanto, se recomienda que no se active esta opción en el
caso de uso normal porque conlleva el riesgo de que una persona que tenga acceso a tu
documento pueda escribir en tu espacio web y hasta sobrescribirlo o eliminarlo.

Guardar en el perfil
Si quieres publicar más que un documento de página web en el mismo espacio web o si
no quieres que tu información FTP se guarde en el diseño de documento, es posible que
quieras que tus detalles de FTP se guarden en tu ordenador como un perfil. Luego, podrás
añadir fácilmente los detalles a cualquier documento al seleccionar el perfil de tu lista de
perfil, en vez de tener que volver a ingresar los datos de forma manual cada vez.

Haz clic en el botón GUARDAR EN EL PERFIL para almacenar la información FTP en un perfil.
Esto abrirá un pequeño diálogo con una lista de perfiles editables. Puedes introducir el
nombre de un nuevo perfil o escoger un perfil existente de la lista para sobrescribir ese
218 Diálogo de propiedades web
perfil. Al introducir un nuevo nombre, escoge uno que te recuerde para qué utilizas el
espacio web. No puedes sobrescribir los perfiles estándar.

Por supuesto puedes guardar múltiples perfiles que solo varíen en el nombre de la
subcarpeta. Esto te permite publicar en diferentes carpetas de tu espacio web.

Si no quieres que la contraseña FTP se guarde en tu ordenador, asegúrate de que el


campo de la contraseña esté en blanco cuando pulsas GUARDAR EN PERFIL.

Eliminar un perfil
Para eliminar un perfil, selecciónalo en la lista de perfiles en la parte superior del diálogo
Publicar y luego haz clic en el botón ELIMINAR junto a él. No puedes eliminar los perfiles
estándar.

Carga de un documento con detalles FTP


Cuando cargas un documento que tiene información FTP guardada en él, los detalles FTP
se verán en la PESTAÑA PUBLICAR. Si esos detalles coinciden exactamente con uno de los
perfiles guardados en tu ordenador, entonces el perfil se muestra tal como se selecciona
en la lista de perfiles. De otra forma, se muestra PERSONALIZADO en la lista de perfiles para
indicar que la información FTP del documento no coincide con ningún perfil.

Si la información FTP del documento no incluye la contraseña, pero todos los demás
detalles coinciden con un perfil, entonces el perfil se mostrará como seleccionado. Si el
perfil cuenta con una contraseña guardada, se copiará en los detalles FTP del documento.
Esto te ahorra tener que volver a introducir la contraseña cada vez que publiques el
documento. Esto significa que parecerá que tu contraseña está guardada en tu
documento. Pero esto solo puede suceder si la opción GUARDAR CONTRASEÑA EN EL
DOCUMENTO está seleccionada.

Publicación
Una vez que hayas configurado tus detalles para la publicación, selecciona ARCHIVO >
PUBLICAR PÁGINA WEB. Tu página web se publicará.

Nota: Muchos servidores utilizan nombres de archivo sensibles a las mayúsculas y las
minúsculas. Así, por ejemplo, la dirección web xara.com/products.htm no es lo mismo que
xara.com/Products.htm. Para reducir la confusión y la posibilidad de errores, Web
Designer fuerza que todo los nombres de página se escriban en minúsculas y contengan
sólo caracteres permitidos. Esto significa que los espacios no están permitidos en los
nombres de página. Sugerimos utilizar un guión bajo como separador alternativo.

Importante: Si no has definido un nombre de página específico, entonces el nombre que


exportes se utilizará en todas las páginas de tu sitio web. Por ejemplo, si abres una plantilla
de página web, la exportas como "test" a tu sistema de archivos y ahora la publicas, se
publicará como test.htm en tu servidor web y las páginas adicionales serán test_2.htm,
test_3.htm etc.

Si no has definido un nombre de archivo de exportación, cuando publiques por primera


vez, se te preguntará si quieres introducir el nombre de archivo index.htm como nombre
Trabajar con fotos 219
para la primera página de tu sitio web. index.htm es el nombre usual para la primera
página de un sitio web.

Volver a publicar solamente los archivos modificados


Por defecto, MAGIX Web Designer 6 realiza un seguimiento de los archivos que conforman
tu página web publicada y cuando quieres volver a publicar tras hacer cambios en tu sitio,
intenta publicar solamente los archivos que han cambiado. Esto hace que volver a publicar
sea más rápido en la mayoría de los casos.

Sin embargo, MAGIX Web Designer 6 no sabe si has eliminado o modificado archivos en
tu espacio web con otra herramienta. Por lo tanto, si por alguna razón tu sitio publicado no
coincide con la copia local exportada de tu sitio, deberías hacer que todo el sitio se vuelva
a publicar. Para ello, desactiva la opción VOLVER A PUBLICAR SOLAMENTE LOS ARCHIVOS
MODIFICADOS en la parte inferior de la pestaña Publicar. Luego, la próxima vez que
publiques, todos los archivos que forman parte de tu página se publicarán, por lo que tu
sitio publicado estará actualizado.

Trabajar con fotos

Introducción

Actualmente, las fotos son una parte integral de casi todo trabajo creativo, de sitios web,
flyers, folletos, DTP y más.

El Manejo de fotos en Web Designer es diferente al que puedes haber usado con otros
programas de diseño gráfico.

En MAGIX Web Designer 6 puedes colorear, cortar, copiar, mezclar, enmascarar, difuminar
(decolorar los bordes de) fotos, todo lo que quieras. La naturaleza orientada al objeto, no
destructiva, del manejo de fotos significa que, por ejemplo, cuando cambias el tamaño de
una foto, no estás alterando realmente la foto original, sino que sólo estás modificando una
copia visual. La imagen original con la resolución total se guarda en el archivo .web de
modo que posteriormente puedes editar, volver a cambiar el tamaño o aplicar cualquiera
de las opciones de edición de la herramienta de fotos sin ninguna pérdida de calidad.
Incluso puedes "descortar" fotos recortadas.

El manejo de fotos es increíblemente rápido. Puedes abrir una foto de 50 megapíxeles y


efectuar cualquiera de las operaciones de optimización y girar la imagen con su resolución
total en tiempo real.

Este capítulo cubre los principios básicos de manipulación de fotos e imágenes de mapas
de bits en MAGIX Web Designer 6. El funcionamiento de la Herramienta de fotos está
contemplado en el capítulo Herramienta de fotos.

*Puntos de referencia basados en composiciones de foto creadas con múltiples fotos JPG
digitales de alta resolución
220 Trabajar con fotos

Objetos de fotos

En Web Designer las fotos (o mapas de bits) son simplemente otro tipo de objeto en la
página. Puedes arrastrar y soltar fotos en la página de tu explorador, y luego puedes
redimensionarlas, girarlas, copiarlas y moverlas como cualquier otro objeto. Puedes ajustar
la transparencia, incluso la transparencia con gradación, difuminar los bordes y cortar y
recortar formas extraídas de fotos con gran facilidad. la opción de transparencia te deja
mezclar, combinar o crear fotos compuestas.

Donde en otros programas deberías usar capas, en MAGIX Web Designer 6 cada objeto
está sobre su propia capa y, también con cada objeto de la página, puede traerlo hacia el
frente o hacia atrás de otros objetos.

Importación de fotos

MAGIX Web Designer 6 es compatible con una muy amplia gama de tipos de fotos o
mapas de bits, incluyendo JPEG, PNG, TIFF e imágenes RAW de cámaras digitales, así
como muchos tipos más. El término "mapa de bits" es el término general que abarca
todos los tipos, pero intercambiable con la palabra "foto".

El modo más fácil de abrir una imagen es arrastrando la foto o el archivo de mapa de bits
desde tu explorador de Windows hasta la ventana de Web Designer. O bien, puedes
seleccionar las opciones de menú ARCHIVO > ABRIR o IMPORTAR .
Trabajar con fotos 221
Si importas una foto con un ancho o una altura mayor que 1920 píxeles (tamaño de
pantalla de alta definición), se te preguntará si deseas importar una versión de tamaño
reducido en vez del original en tamaño completo. Para el uso en la web es poco probable
que necesites fotos que superen este tamaño, por lo que es recomendable importar una
versión reducida. Se recomienda utilizar fotos de tamaño reducido para que el tamaño del
archivo de tu diseño (.web o .xar) sea pequeño y para reducir la cantidad de memoria
utilizada al editar y exportar tu página web.

Si arrastras y sueltas sobre una foto existente, esta se reemplazará. Arrastra hasta el fondo
para importar como una foto individual.

Sustituir fotos
Si arrastras y sueltas un archivo de mapa de bits sobre una foto existente, se sustituirá la
foto, pero mantendrá el mismo contenedor o tamaño de frame. Esto facilita la sustitución
de fotos en plantillas. Puede usar la HERRAMIENTA DE RELLENO para ajustar el tamaño, la
posición y el ángulo de la foto dentro de su contorno. Esto no es válido para documentos
de foto, donde al soltar una foto en la página siempre la importará como un nuevo
documento.

Cuando reemplazas una foto o mapa de bits de esta manera, se adaptará de la mejor
forma posible al contorno de la imagen existente. Si mantienes presionada la tecla "Shift" al
reemplazar una foto, la nueva cabrá en las mismas dimensiones y rotación que la foto
anterior. Esto es útil para cuando ajustes manualmente la escala o rotación de un relleno y
luego quieres sustituir la imagen por otra que tenga la misma relación de aspecto. Si
mantienes presionada "Ctrl" al soltar, la foto será simplemente añadida al documento y no
sustituirá ninguna imagen existente.

Si existen múltiples copias de la misma foto en una página, por ejemplo una pequeña vista
en miniatura y una versión más grande en una capa popup, cuando haces clic y arrastras
para reemplazar, todas las copias de la foto de esa página serán reemplazadas por la foto
nueva.

Sustitución de múltiples fotos en simultáneo


La mayoría de las plantillas web incluidas en la GALERÍA DE DISEÑOS te permitirá reemplazar
varias imágenes al mismo tiempo, si arrastras y sueltas muchos archivos de imagen desde
el Explorador hasta el lienzo. O utiliza la opción ARCHIVO > IMPORTAR y selecciona varias
imágenes en el diálogo de archivo (Ctrl+clic añade la selección actual, Shift+clic te permite
seleccionar un rango de archivos).

Las fotos entrantes se utilizan para sustituir las imágenes en el documento. De la misma
forma que cuando importas fotos individuales, se te preguntará si deseas importar
versiones de tamaño reducido, si tus fotos son muy grandes. La sustitución se realiza de
izquierda a derecha y desde arriba hacia abajo (el orden de lectura normal). Si no arrastras
la cantidad suficiente de fotos para sustituir todas las fotos reemplazables, puedes
continuar importando fotos de la misma manera. La sustitución continúa a partir de la
siguiente foto sin reemplazar. Así, puedes llenar rápidamente el diseño con tus fotos.

Si importas más fotos de las que pueden acomodarse en la página actual, también se
sustituirán las fotos de las siguientes páginas con las fotos entrantes restantes. Si todavía
222 Trabajar con fotos
quedan fotos entrantes, la página actual se duplica todas las veces que sea necesario para
acomodar todas tus fotos.

Esto significa que puedes crear rápidamente una página web con una galería de tus fotos.
Simplemente escoge una plantilla de galería de la GALERÍA DE DISEÑOS y luego importa
todos los archivos de fotos que desees. La página se copia todas las veces que sea
necesario para que entren todas tus fotos. Asegúrate de escoger la opción de tamaño
reducido si importas muchas fotos.

Utilización de fotos como relleno


También puedes usar cualquier mapa de bits como relleno para cualquier forma de dibujo.
Simplemente arrastra el archivo sobre la forma (que puede ser de tu sistema de archivos, o
de las Galerías de mapas de bits o de rellenos), y presiona "Shift" antes de soltar. Esto
sustituirá el color de relleno existente por un mapa de bits, adaptado al objeto. Puede usar
otra vez la HERRAMIENTA DE RELLENO para ajustar el tamaño, la posición y el ángulo.

Tamaño de foto inicial


Cuando importas un JPEG, inicialmente tiene el ancho de 500 píxeles.

Para reducir el tamaño, solamente arrastra desde una de las esquinas usando la
herramienta de selección, o introduce un nuevo ancho en el campo de la barra de
información de la HERRAMIENTA DE SELECCIÓN .

Si reemplazas una foto mediante arrastrar y soltar, entonces la foto se adaptará


exactamente al contenedor, es decir, su tamaño y la resolución dependerá del tamaño
del contenedor.
Trabajar con fotos 223

Resolución de foto

Una diferencia fundamental entre MAGIX Web Designer 6 y otras herramientas de foto es
que cuando redimensionas una foto esta conserva toda la resolución. Si reduces el
tamaño de una imagen, solamente aumenta el dpi o ppi (píxeles por pulgada). En otras
palabras, no se pierde ni un solo píxel, simplemente se hacen más pequeños.

Cuando reduces a la mitad la imagen de 96ppi a la izquierda se duplica la resolución, 192ppi.

La barra de estado muestra la resolución de cualquier imagen seleccionada. Es importante


conservar la resolución total porque significa que puedes ver todo al detalle cuando
amplias con el zoom, y cuando imprimes con la máxima resolución. Esto también quiere
decir que puede ampliar todo o parte de la imagen y Web Designer conserva la máxima
calidad original.

Cuando guardes tu página web (exportando el código HTML), Web Designer convierte las
fotos automáticamente a la resolución correcta requerida para la página web.

Copias de memoria cero

Una de las diferencias más revolucionarias entre Web Designer y otros software es que
cuando copias cualquier foto en la página, realmente no realiza una nueva copia completa
de la foto original, pero en su lugar muestra simplemente otra 'vista' de la imagen original.
El rendimiento en renderización de Web Designer es lo suficientemente rápido como para
mostrar, de esta manera, cualquier cantidad de copias de la misma imagen 'al vuelo'. Esto
te permite ahorrar gran espacio de memoria y reduce drásticamente los tamaños de
archivos.

Esto no quita mérito ni limita lo que puedas hacer con cada copia, y pueden ser trabajadas
independientemente como copias completamente separadas. Cada copia no tiene que ser
idéntica. Puedes editar cada una como quieras, redimensionándola, girándola, cortándola,
coloreándola o aplicándole una amplia gama de efectos de foto y de transparencia.
Todo, sin ocupar espacio en la memoria ni aumentar el tamaño de archivo.
224 Trabajar con fotos

Este ejemplo muestra las copias separadas de la misma imagen, cada una manipulada de
un modo diferente. Cada una conserva la resolución total del JPEG original, como puedes
ver en la imagen de la derecha. La memoria (RAM y el tamaño de archivo) no es superior al
tamaño de JPEG original.

Como se trata de la misma imagen mostrada en tamaños diferentes, la resolución, que es


el dpi o ppi, varía. En el ejemplo de arriba, el ojo tiene 115dpi, (porque la imagen ha sido
ampliada) mientras que la imagen de la izquierda tiene más de 1200dpi.

La galería de mapa de bits

El capítulo Trabajar con documentos (en la página 83) cuenta con información general
acerca de las galerías.

La GALERÍA DE MAPA DE BITS muestra todo los mapas de bits o fotos usadas en cualquier
documento, con la información de su tamaño de píxeles y el tamaño de archivo.

Puedes abrirlo con clic en su icono en la barra superior, o


desde dentro del menú, a través de HERRAMIENTAS >
GALERÍAS , o con "F11".
Trabajar con fotos 225
Este ejemplo muestra la GALERÍA DE MAPAS DE BITS para el documento de arriba, y
muestra la imagen JPEG original de la joven que es integrada al archivo .web nativo. Como
se menciona anteriormente, todas las copias de esta imagen son mostradas directamente
desde el máster, y sólo se muestra la imagen sola y no las cuatro variantes que aparecen
en la página.

La siguiente información de ayuda se muestra sobre la imagen original:

• Nombre de archivo del JPEG original


• El tipo de archivo, en este caso un JPEG, y el tamaño de archivo, 1.006K. (Este es el
tamaño original del archivo, y también cuánto de archivo the.web será ocupado por esta
imagen.)
• Las dimensiones de píxeles del original, el tamaño de megapíxeles (en este caso sólo
inferior a 2MP)
• La profundidad de color, en este caso "24 bit", a veces se denomina color verdadero
(true color). La imagen Xara es una imagen de 4 bit.
• La resolución original de la imagen, en estos casos 96dpi

La GALERÍA DE MAPAS DE BITS siempre contiene un mapa de bits por defecto, con la
imagen gris de Xara. Se utiliza como mapa de bits por defecto para rellenos de mapas de
bits y en casos donde faltan otros mapas de bits. Es útil tenerlo también como marcador
de posición.

Como con todas las galerías, puedes arrastrar los objetos de la galería a la página para
crear una nueva copia. O puedes seleccionar una imagen en la galería y hacer clic en uno
de los botones superiores. El apartado siguiente muestra detalladamente cómo utilizar los
controles de la Galería de mapas de bits, que en su mayoría están pensados para usuarios
más avanzados.

Relleno de formas con un mapa de bits


Selecciona la forma en la página, luego selecciona el mapa de bits en la galería y haz clic
en el botón de relleno. O bien, arrastra la imagen de la GALERÍA DE MAPAS DE BITS y
suéltala en cualquier forma mientras mantienes pulsada "Shift". Puede ajustar el tamaño, el
ángulo, etc. en la HERRAMIENTA DE RELLENO .

Ajuste de una transparencia de mapa de bits


Esto es para los usuarios más avanzado. Puedes usar cualquier mapa de bits como una
máscara de transparencia sobre cualquier forma rellena o mapa de bits. La luminosidad
del mapa de bits afecta la transparencia del objeto seleccionado. El tamaño de
transparencia del mapa de bits, la rotación y segmentación pueden ser controlados desde
la barra de información de la HERRAMIENTA DE TRANSPARENCIA (en la página 188).

Eliminar imágenes de la galería


Cuando eliminas un mapa de bits de la página, permanece en la GALERÍA DE MAPAS DE
BITS . Cualquier mapa de bits no utilizado será eliminado del archivo cuando sea guardado
y vuelto a abrir. Sin embargo puedes eliminar cualquier mapa de bits seleccionándolo y
apretando el botón SUPRIMIR . Si el mapa de bits es usado en el documento, será
sustituido en el mapa de bits estándar de Xara.
226 Trabajar con fotos
Ajuste del fondo de la página para un mapa de bits
Selecciona el mapa de bits en la galería y haz clic en el botón FONDO . Esto va a copiar la
imagen en el fondo. Al exportar la página como HTML, esta imagen se copiará por todo el
fondo de la página visible del navegador, salvo que también hayas determinado un fondo
diferente para el tablero de dibujo (el área que rodea la página).

Guardar
Seleccionando el mapa de bits y haciendo clic en GUARDAR, guardarás la imagen original.
En el caso de JPEG integrada, se guardará el archivo JPEG original. Otros tipos de mapas
de bits se guardan mejor como tipos de mapa de bits PNG.

Propiedades del mapa de bits


El botón PROPIEDADES te mostrará la información del mapa de bits seleccionado en la
galería. Esta opción también te da la posibilidad de evitar que se suavicen las imágenes
cuando se amplían los mapas de bits. Por lo general, todos los mapas de bits se suavizan
cuando se amplían, o se agrandan con el zoom en la pantalla. Hay un cuadro de selección
en el diálogo de Propiedades para desactivar esta característica para que puedas ver cada
píxel cuando amplías con el zoom.

Esto también proporciona la información de las propiedades de animación del mapa de


bits. Esto es realmente aplicable sólo a imágenes GIF animadas.

ANIMACIÓN GIF:

• RETARDO (el tiempo en que el frame es dejado en pantalla)


• RESTAURAR: La configuración de GIF animado fija lo que ocurre entre cada frame de
un GIF animado. Nada significa que no se efectúa ninguna acción. Numerosos
navegadores interpretan que esto significa lo mismo que la opción Conservar como es.
Conservar como es visualiza los frames uno encima de otro - esto deja visibles muchos
frames en un stack si algunos son transparentes. Algunos navegadores borran la
animación antes de reproducir más loops, mientras que otros no. El fondo restaura el
área cubierta por el color de fondo del GIF (blanco, por lo general). Restaurar anterior
restaura el área cubierta por el frame dejándola como era antes de visualizarse el frame.
Esto algunos navegadores lo interpretan como borrar la imagen y mostrar el fondo,
mientras que otros navegadores lo interpretan como mostrar el frame encima del frame
anterior. Como los navegadores lo interpretan de modo diferente, deberás experimentar
hasta conseguir los resultados deseados.

Archivos JPEG integrados


Los archivos JPEG están enormemente comprimidos en relación a su estado original,
siendo hasta 10 veces más pequeños que la imagen original. En el ejemplo de arriba, la
imagen original no comprimida requiere más de 7 MB de memoria, pero en la GALERÍA DE
MAPAS DE BITS sólo tiene 1 MB. Una reducción muy significativa. Por eso las imágenes
JPEG son el tipo de archivo estándar para la fotografía digital y para utilizar en Internet.
Trabajar con fotos 227
Cuando arrastras y sueltas un archivo JPEG (o usas las opciones de menú "Abrir" "o
Importar") el JPEG original es almacenado en el documento, y esto es lo que queda
guardado en el archivo .xar cuando guardas tu documento.

Es importante entender como se diferencia de otras herramientas de gráficos, tanto en


software de dibujos vectoriales como de programas de edición de fotos. Otros productos
descomprimirán la imagen y almacenarán la imagen no comprimida "cruda" en la memoria
y el archivo nativo cuando lo guardas en disco. Lo que no es más que una copia completa
de la imagen original cruda, como se menciona anteriormente. Haz cuatro copias de tu
foto y guarda el archivo, y será cuatro veces más grande. En MAGIX Web Designer 6 el
archivo no se agranda, no importa cuantas copias hagas.

Al incrustar el archivo JPEG original en vez de guardar la imagen no comprimida, existe un


ahorro de tamaño de archivo mayor a 7:1 comparado con otros programas de diseño
gráfico. Al haber cuatro copias completas de la imagen significa, en este caso particular,
que la memoria usada es más bien 30 veces menor. Por lo tanto, representa un enorme
ahorro de tamaño (y de tiempo) en comparación a otras herramientas de gráficos*.

*Es fácil para comprobar. Importa un JPEG a tu editor de gráficos favorito, haz cuatro copias, y
haz algunos pequeños cambios en ellas, coloreándolas, rotándolas, o desenfocándolas.
Luego, guarda el archivo nativo y compáralo con el tamaño del JPEG original, y el equivalente
archivo .Xar. Un archivo .Xar nativo tendrá apróximadamente el tamaño del JPEG original, no
importa cuántas copias de la imagen sean hechas.

Extracción del JPEG original


Haz clic derecho sobre cualquier imagen en la GALERÍA DE MAPAS DE BITS y escoge la
opción de menú GUARDAR para guardar el JPEG original en tu sistema de archivos.

Sin pérdidas vs. Con pérdidas (lossless vs. lossy)

Como todo lo que Web Designer hace con tus fotos está basado en la imagen original,
que permanece intacta en tu archivo, todo lo que hace es sin pérdidas. No hay ninguna
re-compresión de imágenes cuando guardas el archivo .xar nativo.

Desde luego puedes guardar o exportar tu imagen como un archivo JPEG comprimido, en
cualquier tamaño requerido, y en este caso la calidad de imagen y los detalles se reducirán
en una manera "destructiva". Destructivo significa que los datos originales o los detalles no
pueden ser recuperados desde un JPEG guardado con una resolución inferior. Xara es un
editor "no destructivo" porque los datos de la foto original nunca se pierden, ni se reducen,
ni se comprimen en el archivo .xar nativo.
228 Trabajar con fotos

Mezcla y combinación de fotos

Haciendo copias de fotos una encima de la otra, y aplicando diferentes efectos a las
copias, combinadas con los avanzados controles de transparencia de Web Designer,
puedes crear fácilmente composiciones de foto mezcladas. Por ejemplo, para desenfocar
selectivamente partes de una foto necesitas sólo unos segundos.

Colocando la copia desenfocada con el 'agujero' creado por el efecto de transparencia


sobre el original marcado, el resultado de la mezcla muestra el área de la parte marcada.

Para crear copias de cualquier objeto necesitas presionar sólo una tecla, o hacer un clic
(arrastrar con el botón derecho del ratón). Para desenfocar alcanza con hacer 'un arrastre'
en una barra deslizante de la Herramienta de fotos, para aplicar una transparencia
graduada necesitas otro arrastre-cilc en la Herramienta de transparencia, y, para colocar
fotos una encima de la otra necesitas un segundo. Por lo tanto, en MAGIX Web Designer
6, necesitas unos clics, arrastres y un par de segundos para todo el proceso.

Desde luego no todo se limita a desenfocar, ya que puedes ajustar los niveles de color,
brillo y contraste, o aplicar cualquiera de la amplia gama de Efectos en vivo para crear una
gama infinita de resultados interesantes o creativos.
Trabajar con fotos 229

Calidad de visualización de fotos

MAGIX Web Designer 6 puede mostrar fotos en uno de cinco niveles de calidad. Las dos
primeras configuraciones, suavizan los píxeles de pantalla para evitar píxeles visibles o
secciones no fluidas en los extremos (antialiasing). Cambia el nivel de calidad con la
entrada CALIDAD en el menú VENTANA .

MUY ALTA Muestra imágenes mediante sampleo bicúbico. Esto permite ver las
CALIDAD (POR imágenes en la mejor calidad, en particular para imágenes grandes de
DEFECTO) alta resolución que son altamente reducidas o ampliadas con zoom.
ALTA CALIDAD Antialiasing activado, pero las imágenes se renderizan lento y con una
calidad baja.
COLOR TOTAL Sin antialiasing, por lo que se ven los píxeles individuales. Esto puede
ser útil cuando amplíes con el zoom y necesites ver claramente los
pixeles de la imagen por separado. El inconveniente es que las
imágenes generalmente se ven pobres cuando reduces o amplías
causando un pixelado claramente visible y bordes "escalonados"
dentados, sobre todo si haces girar la imagen.
CONTORNOS CON Es particularmente útil para ver los contornos de los diferentes pasos
PASOS DE de una transición. MAGIX Web Designer 6 no es compatible con
TRANSICIÓN transiciones pero los archivos .xar importados pueden contenerlas.
CONTORNO Sólo se ven los contornos de los objetos. Esto es útil para buscar y
seleccionar objetos que son difíciles de ver debido a otros objetos que
se encuentran delante o detrás de ellos.

Hay un control adicional que te permite frenar todo antialiasing o suavizado de imagen en
imágenes que son reducidas o ampliadas con zoom. En otras palabras, en vez de una
imagen suavizada, verás todos los pixeles cuando amplíes con zoom. Abre la GALERÍA DE
MAPAS DE BITS y haz clic derecho sobre la imagen y seleccione "propiedades". En el
diálogo desactiva la selección de "Suavizar al aumentar tamaño". Ahora, no importa la
calidad que utilices para la imagen (y todas las copias), siempre se visualizarán los píxeles
no suavizados cuando amplíes o reduzcas con zoom.

Atención: Si usas el control de Desenfoque/Enfoque de la Herramienta de fotos, entonces


las imágenes tienen que ser mostradas en la calidad máxima. Así que si piensas que la
calidad de visualización ha dejado de funcionar, es casi seguro que has desenfocado o
enfocado la imagen con la Herramienta de fotos.

Guardar y exportar fotos

Al seleccionar la opción GUARDAR siempre se guardará un archivo .web nativo. Para


guardar una foto como JPEG, PNG u otro tipo de archivo de imagen, es necesario usar la
opción EXPORTAR o el shortcut "Ctrl + Shift + E".

Puedes seleccionar entre numerosos tipos de archivo, como JPEG, PNG, GIF, TIFF, PDF,
PSD, Flash (.swf), BMP, así como otros tipos menos conocidos.
230 Trabajar con fotos
Hay dos íconos disponibles en la barra superior que son shortcuts para
guardar la selección como JPG o PNG. Estos se encuentran en la barra
desplegable cuando colocas el cursor del ratón sobre el ícono de
exportación HTML.

Recomendamos guardar las fotos como JPEG (a veces llamado JPG), ya que ofrece la
mejor relación tamaño/calidad.

Cuando exportas JPEG o PNG, aparece la opción CONFIGURACIÓN en el diálogo Guardar.


Al seleccionar esta opción se obtienen muchas opciones de exportación avanzadas y se
pueden comparar ajustes alternativos e incluso tipos de archivos alternativos como por
ejemplo PNG.

Cuando exportas un JPEG, aparece una ventana con una vista previa de exportación
donde puedes ajustar muchas opciones de exportación y comparar ajustes alternativos o
tipos de archivo alternativos como PNG.

La ventana de vista previa de exportación te permite ajustar el tamaño, la resolución, la


calidad del JPEG y, además, seleccionar entre tres tipos de archivos de exportación
alternativos. Los valores por defecto deberían ser los correctos para todos las tareas
comunes y puedes pulsar simplemente el botón de exportación para guardar tu foto.

Aspectos para tener en cuenta al exportar:

• Primero selecciona el objeto o los objetos que quieres exportar


• El tamaño por defecto de la imagen exportada será del tamaño que veas en la pantalla
con el zoom al 100%.

La ventana de Vista previa de exportación (en la página 324) está descrita más
detalladamente aquí.

Consejo: puedes controlar la calidad de JPEG en el diálogo configuración de exportación


de la pestaña de Opciones. El valor estándar y recomendado es 75%.

El sistema JPEG está diseñado de manera


tal que un ajuste de 75 es el valor óptimo.
Te recomendamos que no guardes
archivos JPEG con calidad del 100%, ya
que los resultados son visualmente
idénticos a la calidad del 75%, sólo que el
tamaño de archivo y uso de memoria
aumenta drásticamente sin beneficio
alguno.

Se puede bajar la calidad por debajo de 75 para que se vea más rápido la página en la
web. La ventana de vista previa muestra la calidad de cualquier valor que selecciones.
Trabajar con fotos 231

Consejo: si crees que vas a seguir editando la imagen exportada, como cambiar el
tamaño de la imagen, te recomendamos que guardes el archivo .web también. Esto
preservará la imagen original sin pérdida de calidad.

Ejemplo: para cambiar el tamaño de una foto y guardarla en JPEG.


este proceso es muy rápido y simple:

• Suelta tu foto en Xara Xtreme (en una página en blanco o en la barra de título)
• Ve a la herramienta de selección, arrastra el control deslizante de una esquina para
cambiar el tamaño de la imagen, o introduce el ancho o la altura requerida en los
campos correspondientes de la barra de información. El tamaño de la imagen será
correcto cuando esté al 100%.

• Haz clic en el botón "Exportar selección como JPG" en la barra superior.


• Introduce un nombre de archivo, haz clic en el botón CONFIGURACIÓN si necesitas
controlar la compresión o simplemente haz clic en GUARDAR.

Para guardar la imagen en formato PNG, repite los mismos pasos de arriba pero
selecciona la opción PNG en el menú desplegable del tipo de archivo.

Atributos de la edición de fotos

Todas las ediciones realizadas con la HERRAMIENTA DE FOTO (en la página 242), como
cambiar el brillo, el contraste, el color, los valores de enfoque o desenfoque, serán
guardadas sobre la foto como atributos de Web Designer.

Tal como puedes cambiar el color de una forma o de una línea sin cambiar la forma
subyacente, los atributos de la herramienta de foto cambian la apariencia de la foto pero
sin afectar la imagen original (a esto se le llama edición no destructiva). Otra forma de
explicar esto es que MAGIX Web Designer 6 sólo guarda una lista de las ediciones
aplicadas a tu foto; puedes cambiar, quitar o añadir nuevas ediciones. Siempre podrás
recuperar la foto original sin retocar, incluso luego de haber cambiado el brillo, haberle
cambiado el tamaño, o incluso luego de haberla cortado o recortado.

Los atributos se pueden copiar y pegar entre distintos objetos. Esto no sólo se aplica
solamente a los atributos tradicionales como el color o el ancho de la línea, también
funciona con todos los atributos de la HERRAMIENTA DE FOTO . Esto significa que puedes
copiar todas las optimizaciones que le hayas hecho a la foto a otro documento, utilizando
la función "copiar/pegar atributos".

Esto también vale para todos los otros atributos de la foto, como color y ancho de línea,
coloreado de foto (contoning), sombras, etc.; todos estos atributos se pueden copiar de
una foto a otra usando la misma técnica.
232 Trabajar con fotos

Editar el contorno de las fotos

Puedes utilizar la herramienta de EDICIÓN DE FORMA para ajustar directamente el contorno


exterior de una foto. De la misma manera, puedes aplicar contornos para cualquier forma,
sombra, etc.

Utilizando la HERRAMIENTA DE EDICIÓN DE FORMA


puedes achicar o agrandar la forma de sus esquinas.
Este ejemplo también tiene un contorno negro y una
sombra suave. Para restaurar la imagen a la forma
rectangular original, selecciona "deshacer corte" en
el modo de corte en la barra de información de la
HERRAMIENTA DE FOTOS .
Cuando se editan las fotos de esta forma, se tratan
como si fueran una forma vectorial normal con
relleno de mapa de bits. Por eso puedes usar las
herramientas de edición para crear una línea o
cambiar la forma, e incluso puedes usar la
HERRAMIENTA DE RELLENO para ajustar el tamaño, el
ángulo y la posición del relleno de la foto adentro de
la forma.

Recortar fotos

La forma más fácil de recortar una foto es arrastrarla


mientras te encuentras en la HERRAMIENTA DE
OPTIMIZACIÓN o también puedes arrastrar uno de los 8
controles deslizantes alrededor de la foto para ajustar
el borde de cualquier foto seleccionada.

Para un manejo más avanzado del recorte, selecciona el BOTÓN CLIP en la


herramienta de fotos de la barra de información, ya que te permitirá definir la relación
de aspecto, así como usar el recorte numérico preciso.

Asimismo encontrarás un botón Deshacer corte que borra cualquier rectángulo de corte y
restaura la imagen original.

Una función importante es que la herramienta de recorte es realmente dinámica, en otras


palabras, el recorte no es destructivo y el borde del recorte puede ajustarse luego para
Trabajar con fotos 233
mostrar partes ocultas de la foto. Si realmente quieres cortar, es decir, realizar un recorte
destructivo que elimine las partes invisibles de una imagen, utiliza la función Optimizar foto.

Cortar objetos de las fotos

Utilizando las herramientas de dibujo es fácil dibujar formas y cortarlas del fondo. Puedes
usar cualquiera de las herramientas de dibujo para hacer esto. Quizás la forma más fácil es
que utilices la HERRAMIENTA DE EDICIÓN DE FORMA . Dibuja una línea alrededor del borde de
la forma que quieras extraer. Realiza un zoom en la foto y luego:

• En la herramienta de edición de forma utiliza la técnica de "conectar los puntos"


haciendo clics secuenciales alrededor de la forma, dejando menos espacio entre los
clics para las áreas más detalladas y haz menos clics para las líneas rectas o las áreas
con curvas suaves.
• Cuando hayas completado toda la vuelta alrededor del objeto, cierra la línea para que
sea uan forma sólida, uniendo el último segmento al primero. Así habrás creado una
forma con relleno negro.
• Ahora podrás cortar esta forma de la foto si seleccionas la nueva forma y la foto (shift y
clic sobre la foto en la herramienta de selección). Luego ve a EDICIÓN > ARREGLAR
FORMA > INTERSECCIÓN DE FORMAS .
• Para suavizar un poco los bordes, arrastra la barra de difuminación en la barra superior
para que tenga uno o dos píxeles.

Puedes seguir editando la forma, utilizando las herramientas de edición de línea ya que la
foto permanece dentro de la forma. En este caso la forma actúa como una máscara de
corte (clipping mask).

En este ejemplo la vaca tiene una sombra de pared, que se le aplicó con la herramienta de
sombra.
234 Trabajar con fotos

Fotos de pantalla (screenshots)

Puedes capturar una imagen de pantalla.

• Presiona el botón "Imprimir pantalla" (print screen) de tu teclado y aparecerá una imagen
de toda la pantalla en el portapapeles. También puedes seleccionar "Alt + Print screen"
y se generará una imagen de la ventana actual.
• En MAGIX Web Designer 6 selecciona "Ctrl + V" para pegar, y selecciona "mapa de
bits" para que se pegue la imagen a tu página.

Ahora puedes recortar, añadir texto, cambiar el tamaño y guardar los resultados. Es mejor
si guardas la imagen como archivo PNG. Todas las fotos de pantalla de este archivo de
Ayuda y de este manual fueron creadas de esta forma.

Colorear fotos

Selecciona una foto, haz clic en la línea de colores para aplicar un color a la foto. Para
convertir una foto de color a blanco y negro, haz clic en el color blanco y selecciona
"ESTABLECER COLOR CLARO DE TONO CONTINUO ". Esto se llama color continuo porque es
un tono continuo de negro a blanco.

Para crear una imagen con un tono continuo de color amarillo claro, haz clic en el color amarillo
claro de la línea de colores.

O, haz clic derecho en la línea de colores y se abrirá un menú contextual para que apliques
el color seleccionado, sea este el color oscuro o el claro.
Trabajar con fotos 235
Si haces clic en LÍNEA DE COLOR ,
puedes seleccionar cualquier color, sea
éste el color claro o el oscuro del tono
continuo. También puedes utilizar la
herramienta EDITOR DE COLOR (Ctrl+E) y
elegir cualquier color que quieras. El
menú desplegable en la parte superior
del editor de color controla si estás
editando en el color claro u oscuro.

Puedes restaurar el color original de la foto haciendo clic en el pequeño cuadrado blanco
cuadriculado del extremo izquierdo de la línea de colores, o haz clic derecho sobre la foto
y selecciona la opción "restaurar color".

Cambiar el tamaño, rotar y reposicionar la foto dentro de su


propio marco

MAGIX Web Designer 6 trata las fotos como si fueran un rectángulo con relleno de mapa
de bits. Es decir, la forma de tu foto será tratada por el programa como si fuera un
contorno alrededor de la imagen que se encuentra adentro, y el contorno se puede editar
completamente. Entonces, cuando recortes o edites el contorno de la forma, no estarás
afectando al relleno.

Las fotos y los mapas de bits de la página siempre están "contenidos" dentro del contorno
de una forma. No sólo puedes cambiarle la forma al contorno, sino que también puedes
ajustarle el tamaño, el ángulo y la posición de la foto dentro de su marco (frame) utilizando
la HERRAMIENTA DE RELLENO . Selecciona la foto, ve a la HERRAMIENTA DE RELLENO y
podrás ver las flechas de relleno que se encuentran en un ángulo recto (o puedes ir a la
herramienta de relleno, y hacer clic sobre la foto para seleccionarla).

Por ejemplo. para agrandar y rotar la imagen hacia la izquierda dentro de su propio marco,
selecciona la herramienta de relleno y arrastra una de las puntas de las flechas.
236 Trabajar con fotos
• Para cambiar el tamaño, arrastra el cursor sobre una de las puntas de las flechas,
alejándote del centro. Puedes mantener presionada la tecla "Ctrl" para mantener el
ángulo.
• Para rotar la imagen, arrastra una de las puntas de las flechas sobre el centro.
• Para reposicionar la imagen, arrastra en cualquier parte de la imagen.

En la barra de información de la herramienta de relleno


puedes seleccionar la opción de "mosaico repetido" y la
imagen se llenará con un mapa de bits segmentado. Si
arrastras los controles deslizantes de relleno, podrás
cambiar las dimensiones de la segmentación dentro de la
imagen o realizar una rotación. Si realizas la misma acción
pero con una imagen gigante con muchos píxeles, podrás
ver la velocidad con la que trabaja MAGIX Web Designer
6.

Si cuentas con un grupo de fotos en vez de un objeto común de foto no puedes utilizar la
herramienta de relleno tal como se describe arriba para ampliar la imagen y girarla en su
marco. Si quieres convertir un grupo de foto en un objeto de foto común para poder
ajustarlo con la herramienta de relleno, puedes usar Herramienta > Optimizar foto para
hacerlo. Pero ten en cuenta que esto es destructivo y que luego no podrás modificar
ninguna de las ediciones que aplicaste a la foto.

Enderezar horizonte

Es muy fácil enderezar el horizonte torcido de una imagen. Sólo tienes que utilizar la
herramienta de relleno siguiendo los mismos pasos de arriba.

• Selecciona la herramienta de relleno y haz clic sobre una foto. Esto mostrará los
controles deslizantes de relleno, que básicamente son flechas que muestran la
extensión del relleno en el interior de la forma.
• Arrastra uno de los extremos de las flechas para cambiar el tamaño de la imagen o para
rotarla.
Trabajar con fotos 237
La siguiente imagen tiene un paisaje con un horizonte torcido, que ha sido creada con la
función de "creación de panorámicas".

Utilizando la herramienta de relleno, arrastra una de las flechas para rotar o cambiar el
tamaño de la imagen. Puedes reposicionar la foto arrastrando el control deslizante de las
flechas en el centro, o mantiene presionada la tecla "Shift" y mueve el cursor sobre la
imagen.

Ver una foto ampliada en su tamaño completo

El botón ZOOM A 1:1 en la barra de información de la herramienta de foto ajusta el zoom de


forma que la imagen seleccionada se muestre en su tamaño completo, en donde cada
píxel de la imagen corresponde a un píxel de pantalla. Esto es útil si quieres editar una
imagen que se ha reducido en la página, pero quieres verla en su tamaño completo
mientras trabajas en ella.

Darle el tamaño completo a una foto

El botón AMPLIAR FOTO A 100% en la barra de información de la herramienta de foto hace


que la foto seleccionada actualmente se amplíe al tamaño completo de la página. Así, una
foto que se ha reducido a 500 píxeles de ancho, pero cuyo original tenía 1000 píxeles de
ancho, se ampliará nuevamente a su valor original. Si el zoom del documento es 100%,
significa que cada píxel de la imagen corresponderá a un píxel en la pantalla.
238 Trabajar con fotos

Optimizar fotos y mapas de bits

Las cámaras digitales de hoy en día sacan fotos con cada vez más resolución y tamaño de
archivos en JPEG, por eso si tienes un documento con muchas imágenes, el tamaño del
archivo puede transformarse rápidamente en un archivo muy pesado. Por ejemplo, un
documento multipágina con 20 imágenes en JPEG en alta resolución (cada imagen tiene 5
MB) producirá un archivo .xar con más de 100 MB*.

Además, muchas veces estas fotos tienen innecesariamente una alta resolución. Reducir
una foto de una cámara digital de 8 megapíxeles a 5 cm (2 pulgadas) de ancho en la
página, resultará en una imagen de 1500 dpi. Aunque una imagen con una resolución muy
alta dará mucha más flexibilidad a la hora de imprimirla (y también te dará la posibilidad de
hacer zoom para acercarte o la posibilidad de agrandar pequeñas partes de la foto), esta
resolución es mucho más alta de la que se necesita incluso para la mejor calidad de
impresión comercial, y más aún para los gráficos de la web o para la producción en HTML.

Si cortas una parte pequeña de la foto, habrá una gran parte de la imagen que estará
"escondida" fuera del área visible. La función de "corte en vivo" (live crop) es muy práctica
para cuando estés editando la imagen ya que puedes deshacer el corte realizado a la
imagen, cambiarle el tamaño o la posición, y toda la imagen se mantendrá los más
enfocada posible. Pero para los documentos finalizados conviene quitar las partes
invisibles.

La imagen recortada de la mariposa aún tiene el resto de la foto adjuntada a ella. Si vas a
la herramienta de relleno podrás ver esto fácilmente si cambias el tamaño del relleno
dentro del contorno. Las partes de la imagen que estén fuera de la mariposa
probablemente sean superfluas en tu documento final.
Trabajar con fotos 239
Hay una opción del menú que es útil, HERRAMIENTAS > OPTIMIZAR FOTO que realiza tres
funciones importantes:

• Quita las partes invisibles de las fotos


• Reduce la resolución de las fotos
• Convierte los documentos PNG o en mapas de bits en documentos JPEG integrados al
documento para optimizar el tamaño del archivo.

Si seleccionas esta opción del menú para cualquier mapa de bits, se abrirá el diálogo
OPTIMIZAR FOTO .

Por defecto, la configuración es tal que la foto estará optimizada en un JPEG de 96 dpi
(resolución normal de pantalla) con el tamaño que aparece en tu página. En general, esto
es lo que quieres de las fotos de tu sitio web.

Puedes cambiar la resolución utilizada en este diálogo, si escoges el tamaño físico que
deseas para la imagen optimizada (ancho/alto en píxeles) o si introduces un dpi diferente
(p.ej. 150 dpi si quieres calidad de impresión).

Si escoges la opción de dpi, el valor que introduzcas se recuerda y se convierte en el valor


por defecto para la sesión actual.

También puedes escoger optimizar como PNG (produce imágenes más grandes pero
mayor calidad para gráficos e imágenes de texto) o cambiar la calidad usada para la
optimización JPEG (mayor calidad significa tamaño más grande).

Si tu foto se corta, sólo la parte visible de la imagen se preserva en la imagen optimizada.

Para obtener buenos resultados de impresión necesitas una resolución de 150 dpi. Si
introduces una resolución de 300 dpi, obtendrás la calidad más alta posible en la
240 Trabajar con fotos
impresión comercial (la mayoría de la personas no pueden ver la diferencia entre 150 dpi y
300 dpi, pero con 300 dpi necesitas cuatro veces más de memoria o espacio adicional de
archivo).

Nota: la calidad JPEG óptima es 75%. NO recomendamos guardar archivos JPEG con
una calidad del 100%, virtualmente no pueden distinguirse de los JPEG guardados con
75% pero requieren más memoria y espacio de archivo.

Importante: la función "optimizar foto" es una operación destructiva. Cuando guardes el


documento las partes de la imagen que se hayan quitado se perderán, y la resolución se
cambiará para siempre (obviamente que puedes deshacer los cambios mientras tengas el
archivo abierto durante la edición).

Puedes optimizar múltiples fotos al mismo tiempo si quieres que todas tengan el mismo
dpi. Selecciona las fotos que quieras optimizar y luego elige la opción OPTIMIZAR como se
describió arriba. Si tus fotos tienen diferentes dimensiones, la opción para optimizar según
el tamaño de píxeles estará desactivada y deberás escoger el dpi requerido.

O puedes usar la función HERRAMIENTAS > OPTIMIZAR TODOS LOS JPEG para editar todas
las fotos JPEG de tu documento en una sola operación. En este caso, el diálogo de
optimización aparecerá para que puedas escoger el dpi que deseas utilizar para todas las
optimizaciones.

Ten en cuenta que después de optimizar, el original sin optimizar y ahora foto sin
referencia permanece en la galería de mapas de bits. Esto significa que todavía se
encuentra en la memoria y que el espacio de almacenamiento requerido en tu diseño no
se habrá reducido. Simplemente guarda tu diseño y vuélvelo a cargar después de
optimizar, para eliminar las imágenes originales más grandes.

Documentos fotográficos

A veces es mejor trabajar con una foto sola, en vez de con un "objeto" en una página. Web
Designer le llama a esta foto "foto documento" o "modo foto", y se lo puede editar de
forma similar como se hace con los editores tradicionales de foto. Puedes crear un
documento fotográfico de varias maneras:

• Arrastra una foto desde tu explorador hacia la barra de título o la barra de herramientas
de la ventana de Web Designer.
• Selecciona "Archivo > Abrir" y selecciona una foto.
• Crea un documento fotográfico en blanco seleccionando "ARCHIVO > NUEVO > FOTO
VACÍA ".

Los documentos fotográficos de Web Designer se diferencian de los documentos


tradicionales en lo siguiente:

• No hay una página en blanco visible. Las dimensiones de página se ajustan a las
dimensiones de la foto, ampliándose automáticamente si añades cualquier otro objeto.
Trabajar con fotos 241
• Los documentos fotográficos tienen una cuadrícula de 1 píxel por defecto. La función
para ajustar la cuadrícula también viene activada. Esto hace más fácil y preciso tu
trabajo de corte y recorte de áreas.
• El tablero o pasteboard (el área alrededor de la foto) tiene un color más oscuro. Esto
facilita la distinción rápida entre los documentos fotográficos y los documentos de
dibujo.
• El zoom del documento está ajustado de modo tal que la foto cubra toda la página, y la
herramienta de fotos se abrirá automáticamente.
• Si sueltas documentos fotográficos adicionales sobre la foto principal, estarás
agregando una nueva foto al documento y no reemplazando la foto principal que se
encuentra en el marco. Y la vista se alejará (zoom out) permitiéndote ver la imagen
entera.
• Las imágenes no se reducen a un tamaño de 500 píxeles al importarlas, tal como se
hace como en documentos web normales, sino que se han importado a una escala de
1:1 de modo que, si fijas el zoom a 100%, verás el tamaño total de la imagen.
• Las opciones de suavizado de píxeles se han cambiado. Por defecto, se aplica el modo
de visualización en alta calidad. Esta es la mejor forma de ver imágenes reducidas y las
imágenes a las que se les haya aplicado un "zoom out" para alejar la imagen. Cuando
uno se acerca a la imagen haciendo "zoom in", el suavizado de píxeles estará
desactivado.

En lo que respecta a todas las otras funciones, los documentos fotográficos funcionan
como los otros documentos normales de MAGIX Web Designer 6. Puedes usar cualquiera
de las herramientas de dibujo y de texto como lo haces habitualmente. Si quieres crear un
documento fotográfico con un tamaño específico, puedes cambiar el lienzo o el tamaño de
la página seleccionando "HERRAMIENTAS > OPCIONES y la pestaña "PÁGINA " para introducir
las dimensiones.

En documentos fotográficos, se permitirán dos controles extra. Los botones ANTERIOR y


SIGUIENTE cambiarán a la imagen anterior o siguiente en la carpeta desde donde se abrió
la imagen. Esto cerrará la imagen actual, por lo que se te pedirá que guardes el archivo.

Edición de archivos de fotos

Puedes utilizar MAGIX Web Designer 6 para editar fácilmente tus fotos JPEG y guardar el
archivo modificado. A diferencia de la mayoría de los editores de fotos, puedes realizar
repetidas ediciones sin pérdida de calidad, a pesar de que el formato JPEG es un formato
con pérdida (consulta Sin pérdida frente a con pérdida anteriormente en este capítulo).
Esto es porque MAGIX Web Designer 6 puede guardar tus ediciones sin pérdida, junto con
la foto original. Funciona de la siguiente forma.

Primero abre el JPEG con ARCHIVO > ABRIR , mediante arrastrar y soltar o con un clic
derecho en el Explorador de archivos de Windows y eligiendo MAGIX Web Designer 6 en
la lista "Abrir con". La foto se abrirá como un documento de foto.
242 Trabajar con fotos
Edita la foto con las herramientas de foto tal como se describe anteriormente.

Si luego escoges ARCHIVO > GUARDAR (Ctrl+S), el archivo JPEG que has abierto se
sobrescribirá con la imagen modificada. Sin embargo, MAGIX Web Designer 6 también
guarda tu foto en su formato .web nativo por defecto. Este archivo se coloca en una
carpeta principal junto con tu archivo JPEG. Tiene el mismo nombre que tu archivo de
foto, pero con la extensión .web. El archivo .web incluye tu foto original sin las
modificaciones aplicadas y, por supuesto, detalles de tus ediciones.

Si posteriormente cargas el archivo JPEG modificado para continuar editándolo, MAGIX


Web Designer 6 buscará en la carpeta principal para ver si hay un archivo .web disponible
para esta foto. De ser así, se abrirá este archivo .web en vez de tu archivo JPEG y podrás
continuar editando desde donde has dejado. Cuando vuelvas a guardar, el archivo JPEG
se sobrescribirá nuevamente y el archivo .web se actualizará y guardará en la carpeta
principal.

Por supuesto, si no quieres sobrescribir tu archivo JPEG con los cambios, puedes usar la
opción ARCHIVO > GUARDAR COMO para guardar la foto modificada en otro lugar o utilizar
algunas de las opciones para exportar tu foto en diversos formatos.

Puedes conservar la foto original del archivo .web si la abres, abres la GALERÍA DE MAPAS
DE BITS ,
haces clic derecho sobre la foto y escoges la opción GUARDAR.

En la pestaña Edición de foto del diálogo HERRAMIENTAS > OPCIONES puedes escoger
cambiar el comportamiento de guardado descrito anteriormente. Puedes escoger que no
se guarde automáticamente un archivo .web en la subcarpeta principal, o puedes
seleccionar que el archivo de la foto original se guarde ahí en su lugar.

Ten en cuenta que si desactivas la conservación de la foto original, perderás esta foto
original cuando guardes.
La herramienta de fotos 243

La herramienta de fotos

Introducción

Con la herramienta de fotos podrás recortar fotos o ajustar sus niveles de brillo y nitidez de
forma muy directa y rápida, incluso con las imágenes con muy alta resolución. Esta
herramienta provee:

• Auto-optimización con un clic de tus fotos; esto es particularmente bueno para


imágenes subexpuestas.
• Ajuste manual de brillo, contraste, saturación de color, temperatura del color de la foto y
desenfoque o nitidez de las fotos.
• Corte de imágenes. Se trata de 'corte en vivo', lo que significa que podrás cortar y
deshacer el corte todas las veces que quieras.
• Una función de "comparación" con un solo clic para comparar rápidamente los cambios
respecto al original.
• Función sencilla para copiar/pegar fotos que aumenta las ediciones entre imágenes
diferentes.

Todas estas operaciones son interactivas con actualización en vivo. Cuando ajustas los
valores, la imagen se actualiza al instante. Son también no destructivas, lo cual significa
que tu imagen original no se cambia y siempre puedes hacer o deshacer cualquier ajuste.

También está disponible una herramienta para ojos rojos.

Ventajas de la herramienta de fotos


Esta herramienta tiene tres ventajas principales:

1. Es no destructiva.
2. Es muy, muy rápida, incluso para las imágenes gigantes.
3. La edición fotográfica no requiere memoria.

Los beneficios explicados en detalle:


No destructivo significa que todas las ediciones no afectan la imagen original. Puedes
ajustar o quitar ediciones pero la imagen original no se verá afectada. En cambio, la
mayoría de los otros editores de fotos sí realizan cambios permanentes a los píxeles de la
foto durante el proceso de edición. Además puedes ajustar las configuraciones del Web
Designer todas las veces que quieras ya que no estarás alterando los datos reales y
actuales de la foto original.

Incluso la herramienta de recorte (crop) es no destructiva. Puedes restaurar las áreas que
hayas cortado (clip) o recortado (crop) y ajustar o agrandar el área cortada cuando quieras,
incluso después de que hayas guardado el archivo.

La velocidad es una característica muy importante. Una buena forma de demostrar esto
es que rotes una foto en alta resolución. Con otras aplicaciones, en general tienes que
244 La herramienta de fotos
introducir el ángulo de rotación y luego esperar a que sea procesado. En MAGIX Web
Designer 6 puedes arrastrar y rotar una imagen en resolución total en tiempo real (o
introduce cualquier valor de rotación), y realiza un muestreo bi-cúbico de alta calidad
(bi-cubi sampling) para asegurar los mejores resultados a nivel calidad.

La ventaja de memoria cero se refiere al hecho de que la mayoría de los editores de foto
hacen una copia del mapa de bits en la memoria para poder ofrecer la función de
"deshacer". En general se hace una copia cada vez que ajustas o editas algo en el
documento. Si estás trabajando con fotos digitales grandes y en alta resolución,
necesitarás mucho espacio de memoria para el trabajo de edición. Por ejemplo, una foto
digital de 8 MB necesitará 32 MB de memoria, y si realizas 10 ediciones necesitarás 320
MB de memoria. Con nuestro programa puedes realizar todas las ediciones que quieras y
realizar todas las copias que quieras de tu foto en el documento pero no estarás
ocupando espacio adicional en el archivo, ni tampoco necesitarás RAM adicional.

Finalmente, las imágenes en JPEG se integran (embedded) al archivo nativo .xar y no se


expanden a imágenes en crudo como lo hacen las otras aplicaciones gráficas. Esto
significa que un archivo nativo es 10 veces más pequeño. Y si combinas esta
característica con el hecho de que las copias no ocupan espacio en la memoria, las
herramientas de optimización en tiempo real descritas más arriba, es muy posible que los
archivos finales tengan un tamaño 30 veces más pequeño o menos que los archivos
finales creados con otras aplicaciones gráficas. Esto significa que estos archivos se
pueden manejar de forma mucho más rápida cuando quieras guardarlos, procesarlos y/o
transferirlos.

Utilización de la herramienta de fotos

Para acceder a las HERRAMIENTAS DE FOTO , mueve el cursor del ratón sobre el
ícono de la cámara en la barra de herramientas principal en la parte izquierda de
la ventana. Aparecerá una barra desplegable con íconos para cada una de las
herramientas de foto.

Si estás en la herramienta de selección, haz doble clic en una foto para cambiar a la
HERRAMIENTA DE FOTO .

Los primeros seis botones de la barra de información a la izquierda son comunes a todas
las herramientas y suministran acceso a las funciones GIRAR 90° , IMAGEN
ANTERIOR/SIGUIENTE , AJUSTAR ZOOM y AMPLIAR FOTO A 100% . Estas opciones se
describen más adelante.
La herramienta de fotos 245
Controles para rotar 90°

Los dos íconos de rotación giran la foto o las fotos seleccionadas a 90 grados en sentido
de las agujas del reloj o en sentido contrario.

Anterior y Siguiente

Cuando "abres" una foto utilizando MAGIX Web Designer 6, la foto se carga en un nuevo
documento de foto porque Web Designer presupone que quieres editar o ver la foto
misma, más que utilizarla como parte de un dibujo o de otro documento. Cuando abres
una foto puedes utilizar los botones "Anterior" y "Siguiente" de la barra de información de
la herramienta de foto para cerrar el documento de foto actual y abrir la foto siguiente (o
previa) en el mismo archivo que la foto actual. Esto te permite navegar a través de las fotos
en un archivo sin tener que abrir y cerrar cada una individualmente. Si has hecho cambios
en la foto que no has guardado, se te preguntará si quieres guardar los cambios cuando
pulsas Anterior o Siguiente.

Consulta Trabajar con documentos para más información en Documentos fotográficos.

Zoom 1:1
Selecciona una foto y haz clic en el botón zoom 1:1.

El factor del zoom para el documento está establecido de forma que la foto seleccionada
se muestre 1:1 (un píxel de la foto es igual a un píxel de la pantalla). Utiliza esta opción si
quieres trabajar en una foto a tamaño completo en un documento en donde has reducido
el tamaño de la foto.

Ampliar foto a 100%


La función AMPLIAR FOTO A 100% hace que la foto seleccionada actualmente se
amplíe al tamaño completo de la página.

Así, una foto que se ha reducido a 500 píxeles de ancho, pero cuyo original tenía 1000
píxeles de ancho, se ampliará nuevamente a su valor original. Si el zoom del documento es
100%, significa que cada píxel de la imagen corresponderá a un píxel en la pantalla.Si el
zoom del documento es 100%, significa que cada píxel de la imagen corresponderá a un
píxel en la pantalla.
246 La herramienta de fotos

Herramienta de optimización

Haz clic en el ícono de la cámara para ingresar a la HERRAMIENTA DE


OPTIMIZACIÓN .

Se visualiza la barra de información de la herramienta de optimización.

Los primeros seis botones de la izquierda (no se ilustran arriba) son comunes a todas las
herramientas y están escritas anteriormente

Auto-optimización
Brillo
Contraste
Saturación de color
Temperatura del color
Desenfoque/Enfoque
Comparación con el original

En esta herramienta puedes ajustar el brillo, el contraste, la saturación, la temperatura, el


desenfoque y el enfoque. Puedes introducir directamente valores a los campos de texto o
usar la barra deslizante emergente para ajustar los valores de forma interactiva.

Pop-ups deslizantes
Los pop-up deslizantes pueden ser utilizados de una o dos maneras:

1. Haz clic y suelta la flecha pop-up. El control deslizante se quedará en pantalla y


podrás ajustar los valores todas las veces que quieras, sólo tienes que arrastrar el
control deslizante. Otra alternativa es que mantengas presionado el botón del ratón
sobre el control y puedes usar la rueda del ratón para realizar pequeños ajustes hacia
abajo o hacia arriba. El control deslizante desaparecerá cuando hagas clic en otro
lugar del documento.
2. O haz clic y mantiene presionado el botón del ratón y arrastra el cursor sobre la barra
deslizante para ajustar el valor. Cuando sueltes el ratón el pop-up desaparecerá. Esta
forma de trabajar es más rápida porque sólo tiene que hacer clic y soltar para
cambiar los valores.
La herramienta de fotos 247
Auto-optimización
Si haces clic en el botón "OPTIMIZAR" se realizará un análisis general del brillo y el contraste
de la imagen y la imagen se optimizará automáticamente para obtener una mejor imagen.
Esto es muy efectivo para las imágenes oscuras subexpuestas. Luego de haber aplicado
la auto-optimización a una foto podrás ajustar los valores que han sido asignados con la
optimización, usando los controles que se encuentran a la derecha del botón "optimizar".
Si haces clic sobre el botón "COMPARAR" se restaurará la imagen original, y si haces clic
otra vez sobre el mismo botón volverás a los valores de optimización anteriores.

Brillo/Contraste/!Temperatura del color/Saturación


Brillo Contraste Saturación Temperatura del
color

La imagen se actualiza al instante mientras ajustas los valores. La saturación cambia la


intensidad del color. Si le colocas el valor mínimo -100, la imagen será en blanco y negro.
Cambiar la temperatura del color hace que una imagen sea más "cálida" o "fría".

Desenfoque / Enfoque

Este control desenfoca las imágenes si introduces valores por debajo del cero (negativos) y
si los valores van por arriba del cero (positivos) la imagen se enfocará. Se recomienda que
no uses valores muy altos cuando enfocas las imágenes. Y aplica la opción de "enfoque"
sólo a imágenes que han sido reducidas mucho.

Comparar y restaurar el original


El botón COMPARAR puede ser utilizado para restablecer todos los valores de las
herramienta OPTIMIZAR que vienen por defecto, y así vuelve la foto a su estado original.
Pulsa el botón comparar por una segunda vez y recuperarás tus valores previos. Por lo
tanto, puedes utilizar el botón "Comparar" para cambiar rápidamente de tu foto editada a
la foto original para ver los efectos de los cambios que has hecho.

Debido a que todos los cambios de optimización o de niveles son "no destructivos", si
pulsas "Comparar" simplemente estarás eliminando los atributos de optimización, y de
esta forma volverás a la imagen original. El botón "Comparar" puede ser utilizado en
cualquier momento después de haber modificado la imagen.
248 La herramienta de fotos
Recortar o cortar imágenes
El modo más fácil de cortar una foto es arrastrar el cursor sobre la foto o a lo largo de la
misma habiendo seleccionado la HERRAMIENTA DE OPTIMIZACIÓN . El corte se efectúa al
instante de soltar el ratón. La foto cortada resultante tiene controles deslizantes de clip
alrededor de la misma donde puedes ajustar posteriormente los bordes del recorte.

Esta es una operación no destructiva, lo que significa que puedes ajustar el área de corte
después de que la hayas recortado, e incluso puedes deshacer un recorte y restaurar toda
la imagen. Una forma de comprender el proceso es que simplemente ajusta el contorno de
la imagen, pero que toda la imagen permanece dentro del rectángulo. Por ello se llama
recorte y no corte, aunque tiene el mismo objetivo.

Herramienta de corte

Como alternativa, puedes entrar en la HERRAMIENTA DE CORTE si seleccionas el icono de


corte de la barra de información para fotos. Esto suministra una gama de opciones de
recorte adicionales. Puedes introducir un valor exacto de píxeles y escoger entre varias
relaciones de aspecto de recorte.

Para un corte interactivo y algunas opciones más en relación con las relaciones de
aspecto, entra en el MODO DE CORTE con el botón HERRAMIENTA DE CORTE.

La barra de información se verá así:

Mientras arrastras el cursor sobre la foto, el rectángulo de corte se verá resaltado.

• Puedes ajustar el área de corte si arrastras los controles deslizantes laterales o los de
las esquinas.
• Dentro del área de corte puedes mover la región cortada de lugar si la arrastras con el
cursor.
La herramienta de fotos 249
• Selecciona el botón CORTAR o haz doble clic dentro del área de corte para realizar un
corte.

Podrás darte cuenta si una foto ha sido cortada o no si miras la barra de estado que dirá
"foto cortada".

Borrar
Presiona el botón "BORRAR", o haz clic fuera del área de corte marcada para vaciar el
rectángulo de corte actual.

Regla de los tercios


Existe una norma fotográfica que ayuda a componer fotografías y que se denomina la
"Regla de los tercios". En pocas palabras significa que debes colocar los objetos
importantes de tus fotos en tercios del ancho de la imagen. Por ejemplo, en general es
mejor colocar el horizonte en el tercio inferior de la imagen que justo en el centro. Cuando
arrastras una región de clip a través de tus líneas de fotos, se muestran las líneas en los
tercios a lo ancho y a lo largo de la imagen para ayudarte a posicionar los objetos para
seguir esta norma de composición.

Consejo: busca "Regla de los Tercios" en Google para obtener más información.

Deshacer corte
Pulsa el botón DESHACER CORTE sobre cualquier foto cortada seleccionada para restaurar
la foto original. Esto restaura el rectángulo de corte, que puedes ajustar o borrar si haces
clic fuera de él.

El botón DESHACER CORTE en la HERRAMIENTA DE CORTE cambiará el contorno de


cualquier foto cortada, y también las formas creadas arbitrariamente que contengan un
relleno de mapa de bits, a un contorno de rectángulo de la foto completa o a un mapa de
250 La herramienta de fotos
bits utilizado como relleno. Puede ser que tengas que seleccionar el botón "Borrar" para
borrar el rectángulo de recorte (o haz clic fuera del rectángulo).

Ajustando la región cortada


Debido a que el botón "Deshacer corte" restaura el rectángulo de corte (mostrando el área
de afuera más oscura), puedes realizar finos ajustes a una foto cortada). Sólo selecciona la
foto, pulsa el botón "Deshacer corte" y ajusta los lados del rectángulo de corte como
requieras. Haz doble clic dentro de la foto para cortarla otra vez.

Ancho / Alto
Luego de dibujar un rectángulo de corte puedes introducir valores directamente dentro de
los campos de ancho y alto en la barra de información fijar valores exactos a las
dimensiones del rectángulo de corte.

Bloquear aspecto
Selecciona el recuadro "BLOQUEAR ASPECTO" para mantener la relación de aspecto del
rectángulo de corte mientras lo arrastras. Los botones de radio a la derecha del check-box
determinan la relación de aspecto utilizada. Selecciona "ACTUAL" para mantener la relación
de aspecto de la foto antes de cortarla. Ten en cuenta que el rectángulo de corte cambia
automáticamente entre la forma orientación de paisaje y retrato a medida que arrastras el
cursor hacia una esquina del rectángulo. Entonces si lo arrastras lateralmente, tiende a
crearse un corte con orientación paisaje. Si lo arrastras hacia abajo, entonces se creará
una región cortada con orientación retrato.

Las relaciones de aspecto más comunes para recortes predeterminados disponibles son
4:3 (mayoría de cámaras digitales para consumidores y televisores y monitores de estilo
antiguo), 3:2 (filmadoras tradicionales y cámaras digitales SLR de alta calidad) y 16:9
(relación de aspecto para televisores con pantalla ancha).

Puedes anular la opción "bloquear aspecto" si pulsas "Ctrl" mientras arrastras el ratón. De
modo que si estás arrastrando un rectángulo de corte (o ajustando uno) sin la relación de
aspecto bloqueada, mientras estás pulsando "Ctrl" entonces se mantendrá el aspecto de
la última relación de aspecto seleccionada. De la misma forma, si tienes la opción
"bloquear aspecto" activada y presionas "Ctrl", se desbloqueará temporalmente el aspecto
bloqueado.

Cortar en documentos fotográficos


En el modo foto hay una cuadrícula de 1 píxel que se aplica a la foto (cuando tiene 96 dpi,
la resolución por defecto) y el rectángulo de corte se ajustará a la cuadrícula. Esto hace
muy fácil realizar un corte con una exactitud de píxel por píxel. Para realizar ajustes muy
precisos o del tamaño de 1 píxel se recomienda operar en modo foto y acercarse con el
zoom para poder ver los píxeles más claramente.

Ver Documentos fotográficos (en la página 240) para más información.


La herramienta de fotos 251

Notas para la herramienta de foto

1. Puedes seleccionar diferentes fotos mientras usas las HERRAMIENTAS DE FOTO con
sólo hacer clic sobre ellas. También puedes seleccionar fotos que se encuentran en
un grupo.
2. Si haces clic y arrastras mientras te encuentras en la HERRAMIENTA DE OPTIMIZACIÓN ,
se comenzará un recorte en la foto sobre la que has hecho clic. O, si comienzas a
arrastrar el fondo, el recorte se aplicará a la primera foto que toques durante este
arrastre.
3. El botón DESHACER CORTE en la HERRAMIENTA DE CORTE cambiará el contorno de
cualquier foto cortada, y también las formas creadas arbitrariamente que contengan
un relleno de mapa de bits, a un contorno de rectángulo de la foto completa o a un
mapa de bits utilizado como relleno. Puede ser que tengas que seleccionar el botón
"Borrar" para borrar el rectángulo de recorte (o haz clic fuera del rectángulo).
4. Todas las operaciones para las fotos pueden deshacerse. A diferencia de las fotos
tradicionales o de los editores de píxeles, aquí la foto original no se altera. Esto
significa que puedes realizar cuantos cambios quieras, tan seguido como quieras y
guardar y abrir archivos .xar y .web todas las veces que quieras sin que la imagen se
vea afectada (todas las operaciones de edición son no destructivas y sin pérdidas) y
sin que el tamaño del archivo se modifique.
5. Todas las opciones de la "Herramienta de foto", incluyendo el control de niveles,
operan sobre los objetos rellenados con mapas de bits, y también sobre las fotos
individuales.
6. Si abres una foto en MAGIX Web Designer 6 (con ARCHIVO ->ABRIR ), se abrirá como
un documento de foto. Después de editarla, puedes sobrescribir la foto, si escoges la
opción ARCHIVO ->GUARDAR (Ctrl+S). También se guarda un archivo .web o .xar en
una carpeta principal junto con tu foto modificada, conservando tu foto original y las
ediciones. Consulta el capítulo Trabajar con fotos (en la página 219) para más
información.

La herramienta de ojos rojos

La herramienta de OJOS ROJOS te permite eliminar rápidamente los efectos de ojo rojo de
los rostros de las fotos.
252 La herramienta de fotos
Haz clic en el símbolo anterior para ingresar en el modo de ojos rojos. Luego:

• Amplía la vista de los ojos rojos, con la HERRAMIENTA DE ZOOM (EN LA PÁGINA 70) o
simplemente utiliza Ctrl+rueda del ratón.
• Haz clic y arrastra desde el centro del ojo rojo hacia afuera, para crear un parche de ojo
circular. El color rojo se eliminará del área dentro de este círculo.
• Repite los pasos anteriores para cada ojo rojo de tu foto.

Puedes seleccionar cualquier parche de ojo rojo que has aplicado a una foto con un clic
sobre él mientras te encuentras en la herramienta de ojo rojo. Después, puedes pulsar la
tecla eliminar para quitar el parche.

También puedes ir a la herramienta QuickShape y editar el parche del ojo rojo


seleccionado de la misma forma en que editas las elipses normales en tus
documentos.
Por lo tanto, de ser necesario puedes dar forma elíptica a los parches de ojos rojos si esto
lo coloca mejor en el área de ojo rojo. Lee la ayuda de la Herramienta QuickShape para
información sobre su utilización para editar elipses. Sin embargo, para la mayoría de las
fotos los parches circulares por defecto son suficientes para eliminar los efectos de ojos
rojos.

Al borde de la elipse de ojo rojo se le aplica una difuminación de 3 píxeles, para que no se
produzca un corte duro en el área de donde se elimina el ojo rojo. Puedes ajustar
fácilmente este valor de difuminación si seleccionas la elipse de ojo rojo (como se ha
mencionado anteriormente) y ajustas el valor de difuminación con el control de
difuminación principal (del lado derecho de la barra superior), de la misma forma que editas
el valor de difuminación de las formas usuales.

Después de aplicar la herramienta de ojo rojo, los parches de ojo rojo están agrupados
dentro de un GRUPO DE FOTO . Esto tiene como objetivo que, al mover la foto por el
documento, o al transformarla, los parches de ojo rojo se muevan junto con la foto. Ten en
cuenta que esto significa que si quieres seleccionar una elipse de ojo rojo mientras no te
encuentras en la herramienta de ojo rojo, necesitarás pulsar Ctrl mientras haces clic sobre
La herramienta de fotos 253
la elipse (lo que se llama una operación "seleccionar dentro"). Lee el capítulo sobre
Trabajar con fotos para información acerca de los Grupos de foto.

Haz clic sobre el botón LIMPIAR TODO en la barra de información de la herramienta de ojos
rojos para eliminar todas las elipses de ojo rojo de la foto seleccionada actualmente.

Creación de panorámicas

Si se instala una actualización de Panorama Studio separada, MAGIX Web


Designer 6 puede lanzarla para incluir una herramienta que puede fusionar
fotografías automáticamente para convertir hasta 6 fotografías en una única
panorámica de alta resolución.
Haz clic en el enlace Más información del diálogo para informarte de cómo obtener la
actualización.

Tres ejemplos de fotos de un paisaje. Cada una se superpone a la otra.

Utilizando la actualización de Panorama Studio puedes obtener una imagen panorámica final sin
costuras de transición.
254 Barras de navegación

Barras de navegación
La mayoría de los sitios web tienen una barra de navegación horizontal o vertical, desde la
que puede accederse a todas las páginas importantes.

MAGIX Web Designer 6 incluye funciones especiales para las barras de navegación, que
facilitan la inserción, edición y eliminación de botones. Los botones de una barra de
navegación pueden ajustar el ancho para coincidir automáticamente con sus etiquetas y
se reposicionan automáticamente cuando realizas cambios. Hasta puedes agregar menús
y submenús desplegables a tus barras y hacer que se puedan agregar o eliminar botones
automáticamente al agregar o eliminar páginas.

Los usuarios avanzados pueden crear sus propias barras a partir de diseños de botones
propios y modificar los diseños de botones existentes en una barra de navegación para
aplicar su nuevo diseño en toda la barra.

Utilización de plantillas de barras de navegación

Puedes crear barras de navegación a partir de cualquier diseño de botón, pero la mayoría
de los usuarios simplemente usan las numerosas plantillas de las barras de navegación
disponibles en la GALERÍA DE DISEÑOS . Si quieres crear tus propias barras, lee la sección
correspondiente más adelante en este capítulo.

Todos los diseños de barras de navegación de la galería están asociados con un tema en
particular y se han diseñado cuidadosamente para que coincidan con el diseño de página
del mismo tema. Por lo tanto, la mayoría de las páginas web puede crearse si se agrega
de forma manual una barra de navegación que ya está creada en las plantillas de páginas
de cada tema. Sin embargo, cada tema también suministra sus barras de navegación
como elementos independientes, para que puedas agregarlos a tu página web si los
arrastras de la galería y los sueltas en tu página.

Para cambiar los colores de una plantilla de barra de navegación debes hacer lo mismo
que para cambiar el color de los otros elementos del tema: aplica un nuevo esquema de
color de la Galería de diseños o edita los colores con nombre en la línea de color. Consulta
el capítulo Primeros pasos para más información sobre este tema.
Barras de navegación 255

Diálogo Propiedades de la barra de navegación

La mejor forma de editar las etiquetas, enlaces y otros atributos de una barra de
navegación y de agregar o eliminar botones, es utilizar el diálogo de propiedades de la
barra de navegación. Haz doble clic sobre una barra para abrir el diálogo o un clic derecho
sobre la barra y escoge "Editar barra de navegación" del menú contextual.

La mitad superior del diálogo te permite establecer diversas propiedades de la barra de


navegación. La parte inferior te permite agregar y eliminar botones y menús y editar las
etiquetas y enlaces de cada botón y entrada del menú.

Este es un diálogo modal, lo que significa que no puedes interactuar con el lienzo mientras
este diálogo está abierto en la pantalla. Sin embargo, todos los cambios que realices se
verán reflejados de inmediato en tu barra de navegación en el tablero, de forma que
podrás ver el resultado en instantes. Los cambios que realices en cada sesión del diálogo
se confirman cuando haces clic en ACEPTAR o se eliminan si haces clic en CANCELAR .

Orientación
Escoge la orientación horizontal o vertical que desees para tu barra de navegación. Para
las barras de navegación verticales generalmente querrás que los botones tengan el
mismo ancho (el ancho del botón más ancho), para obtener una barra rectangular.
Consulta la opción AJUSTAR TODOS LOS BOTONES A LA ETIQUETA MÁS ANCHA a
continuación para controlar esto.
256 Barras de navegación
Justificado
Escoge el comportamiento que deseas para tu barra cuando cambie su longitud al editar
etiquetas o añadir/quitar botones. Una barra horizontal JUSTIFICADA A LA IZQUIERDA
crecerá hacia la derecha a medida que agregas más botones o extiendes la longitud de las
etiquetas de los botones. El extremo izquierdo de la barra permanecerá en el mismo lugar
en la página. De forma similar, una barra JUSTIFICADA A LA DERECHA mantendrá su
extremo derecho y crecerá hacia la izquierda. Una barra JUSTIFICADA EN EL CENTRO crece
tanto para la derecha como para la izquierda de forma equitativa. Selecciona la opción
central si, por ejemplo, quieres que la barra de navegación horizontal se centre en la parte
superior de tu página.

Para barras verticales, las opciones de justificación cambian a Arriba, Centro y Abajo. En el
caso de las barras verticales, la configuración determina si la barra crece hacia arriba
(Abajo), hacia abajo (Arriba) o en ambos sentidos (centro) al agregar botones.

Ajustar el ancho de los botones a las etiquetas


Activa esta opción si quieres que los botones se extiendan, reduzcan o crezcan para
ajustarse al texto de la etiqueta. Si esta opción está desactivada, tus botones conservarán
el mismo tamaño de forma que una etiqueta que sea demasiado extensa para el botón
sobrepasará los extremos del botón.

Mismo ancho para todos los botones


Esta opción está disponible sólo si la opción "Ajustar el ancho de los botones a las
etiquetas" está activada.

Selecciona esta opción para hacer que todos los botones tengan el mismo ancho que el
botón más ancho de la barra. Para las barras de navegación verticales, esto es casi
siempre deseable para obtener una barra rectangular. Para las barras horizontales,
muchas veces la barra tiene un mejor aspecto si todos los botones tienen el mismo
tamaño, pero requiere más espacio, por lo que es posible que no puedas incluir tantos
botones en la barra si esta opción está activada.

Espaciado de botón
Aquí puedes escoger el espacio entre cada botón en la barra de navegación horizontal si
no quieres que cada botón se encuentre justo arriba de su vecino. Simplemente introduce
la cantidad de píxeles de espacio que te gustaría y observa el resultado de inmediato. Es
posible que quieras que el valor sea negativo para que los botones se superpongan un
poco. Esto es útil si el diseño de tus botones es tal que se ve una línea de unión no
deseada entre los botones cuando el espaciado es 0.

Barra de navegación del sitio

Esta es una opción muy importante en el diálogo de BARRA DE NAVEGACIÓN que activa los
enlaces automáticos, es decir, que los botones y los enlaces se agregarán solos a medida
que agregas páginas. Además, todos los cambios que hagas a la barra se reflejarán en
todas las páginas del sitio ni bien cierres el diálogo de barra de navegación. Sin embargo,
esta opción restringe la flexibilidad de la barra de cierta forma. Por ejemplo, no puedes
Barras de navegación 257
editar la barra de navegación directamente en el lienzo para cambiar las etiquetas de los
botones, sino que debes utilizar el diálogo de barra de navegación.

Generalmente, activas esta opción si quieres que tu barra de navegación aparezca en


todas las páginas de tu sitio web. Sin embargo, puedes eliminar manualmente la barra de
algunas páginas si así lo deseas.

No puedes editar en el lienzo


A diferencia de las barras de navegación normales, las barras de navegación del sitio no
pueden editarse en el lienzo, sino que todas las ediciones deben realizarse en el diálogo de
barras de navegación. Al hacer clic en ACEPTAR en el diálogo de la barra de navegación
para confirmar los cambios, la barra de navegación del sitio se actualizará en todas las
páginas de tu sitio.

Desplazamiento y tranformación de una barra de navegación del sitio


Si mueves una barra de navegación del sitio sobre la página, la barra también se mueve en
todas las páginas en las que aparece. De la misma forma, si cambias el tamaño de la barra
con la HERRAMIENTA DE SELECCIÓN , la transformación se aplica a todas las copias de la
barra en otras páginas. No puedes realizar ninguna otra transformación de una barra de
navegación con la HERRAMIENTA DE SELECCIÓN (rotación, extensión, cambio de tamaño en
una sola dimensión).

Enlace automático de páginas


Cada vez que agregues una nueva página a tu sitio, un enlace a esa página se agregará a
tu barra de navegación del sitio y la nueva página obtendrá una copia de la barra, si
todavía no la tiene. Si tu barra cuenta con un botón sin usar, entonces ese botón se
enlazará con la nueva página. Si todos los botones ya contienen un enlace, se agregará un
nuevo botón al final de la barra y se lo enlazará con la nueva página. En ambos casos, la
etiqueta del botón se modifica para que coincida con el nombre de la nueva página, si
tiene un nombre o a "Nueva página" si no lo tiene. Generalmente querrás editar de
inmediato la nueva etiqueta en el diálogo de la barra de navegación.

Si eliminas una página de tu sitio web, el botón de la barra de navegación del sitio que
contiene el enlace con esa página se eliminará automáticamente en todas las páginas de
tu sitio.

Activación y desactivación de las barras de navegación del sitio


Al activar y desactivar la opción de navegación del sitio en el diálogo de barra de
navegación, el cambio se refleja en todas las copias de esa barra.

Eliminación de una barra de navegación del sitio de una página


Si quieres que la barra de navegación del sitio no aparezca en una página en particular de
tu sitio, simplemente haz clic en ella para seleccionarla en esa página y pulsa Eliminar. Se
te preguntará si quieres eliminar la barra de esa página sola o de todas.

Sin embargo, tras eliminar la barra de una o más páginas, si luego desactivas la opción de
barra de navegación del sitio (tal vez para editar el diseño de botones que no puede
258 Barras de navegación
realizarse con esta opción activada), y luego vuelves a activarla, la barra se añadirá
automáticamente a todas las páginas del sitio que no la contengan.

Barras de navegación del sitio y plantillas


Todas las plantillas de páginas únicas en la GALERÍA DE DISEÑOS cuentan con barras de
navegación configuradas para ser barras de navegación del sitio al cargarlas desde la
galería para iniciar un nuevo documento de página web. Esto significa que puedes crear
rápidamente un pequeño sitio web con todas las páginas enlazadas a la barra sin tener
que agregar botones ni enlaces de página de forma manual. De la misma forma, todas las
plantillas de páginas web tienen barras de navegación del sitio activadas. Si no quieres
este comportamiento, desactiva la opción de barra de navegación en el DIÁLOGO DE
BARRA DE NAVEGACIÓN .

Las barras de navegación independientes presentadas con cada tema en la galería no


tienen la opción de barras de navegación del sitio activada. Esto es porque es probable
que un usuario que agregue manualmente una barra no quiera que la barra apareza en
todas las páginas. De todas formas, esta opción puede activarse fácilmente en el diálogo
de barra de navegación de ser necesario.

Otros aspectos interesantes


Si eliminas un botón que refiere a una de tus páginas o si cambias el enlace para que
refiera a otro lugar, no se realizará acción alguna para restaurar un enlace de botón a la
página. Se asume que has decidido que no quieres utilizar un enlace directo a esa página
en tu barra de navegación del sitio. Los nuevos botones y enlaces de página solamente se
crean cuando se agrega una página.

Botones y menús

Edita las etiquetas de botones, enlaces y otros atributos de botones con la tabla y los
controles con estructura de árbol en la mitad inferior del DIÁLOGO DE BARRA DE
NAVEGACIÓN . Cada fila de la tabla corresponde a un botón de la barra o a una entrada en
un menú de uno de los botones.

Agregado y edición de botones


Para agregar un botón, haz doble clic sobre la primera columna, en el lugar donde dice
"Doble clic para agregar botón". Se agregará una nueva fila debajo de la fila
correspondiente al último botón. O haz clic en el botón AÑADIR en la parte inferior del
Barras de navegación 259
diálogo para agregar un botón detrás del botón seleccionado. Puedes comenzar a editar
de inmediato la etiqueta para el nuevo botón. Para completar la edición de la etiqueta,
pulsa Intro o haz clic en algún lugar fuera de la etiqueta.

Puedes editar cualquier etiqueta de botón si haces clic en la fila apropiada para
seleccionarlo y luego haces clic en la primera columna para iniciar la edición de la etiqueta.

Para fijar el enlace de un botón, haz doble clic en el campo de la URL o, si la fila ya está
seleccionada, simplemente haz clic en ella. Aparecerá el DIÁLOGO ENLACE DE PROPIEDADES
WEB . Este debería parecerte familiar, puesto que es el mismo diálogo Enlace (en la página
197) que utilizas para agregar otros enlaces a tu página y están disponibles las mismas
opciones. Algunas opciones están desactivadas porque no son aplicables a las barras de
navegación ni a los enlaces de menú, como la opción de foto emergente que sólo funciona
cuando se aplica a una foto.

También puedes configurar el texto de consejo de herramienta para cada botón en la


tercera columna. Edita el texto de la misma forma en que lo haces con el texto de la
etiqueta. En el sitio web exportado, este texto aparecerá como un pequeño consejo de
herramienta emergente cuando se coloque el cursor del ratón sobre el botón o entrada del
menú.

Agregar menús y submenús


En la primera columna (etiqueta) verás un símbolo más a la izquierda de cada etiqueta.
Este es un control de la estructura de árbol y con un clic en el símbolo más junto a una
etiqueta de botón, la vista se expande y podrás agregar un menú a ese botón

Haz clic en el texto DOBLE CLIC PARA AGREGAR UN ELEMENTO DEL MENÚ debajo del botón
para comenzar a añadir un menú. O haz clic en el botón AÑADIR en la parte inferior del
diálogo para agregar un elemento de menú detrás del elemento seleccionado. Para cada
elemento de menú que agregues, aparecerá una nueva fila en la tabla. Configuras la
etiqueta, enlace y consejo de herramienta para cada elemento del menú de la misma
forma en que lo haces para los botones. También puedes agregar submenús a cualquier
menú, si primero expandes la estructura de árbol de la entrada del menú.

Separadores de menú
Puedes agregar un separador a tu menú con un clic en el botón AÑADIR SEPARADOR en la
parte inferior del diálogo. El separador se agrega después del elemento de menú
seleccionado en este momento. Los separadores te permitirán agrupar visualmente los
elementos relacionados de tu menú.
260 Barras de navegación
Estilos de menú
Haz clic en el botón ESTILO DE MENÚ… para abrir el DIÁLOGO ESTILO DE MENÚ . Esto te
permite cambiar cómo aparecen los menús y cómo se comportan en tu barra de
navegación.

Fuente
Escoge una fuente para utilizar para el texto de tus menús. Sólo se enumerarán las fuentes
seguras para la web, que son las fuentes que todos los visitantes de tu sitio deberían
tener. También existe la opción de hacer que la fuente sea negrita o para cambiar su
tamaño.

NOTA: Esto no cambia la fuente que se utiliza para las etiquetas de botón de tu barra, sino
la fuente utilizada en los menús. Para cambiar la fuente de las etiquetas de botones,
consulta la sección correspondiente más adelante en este capítulo.

Dirección
Escoge la dirección en la que quieres que tus menús se abran. Para las barras de
navegación horizontales, normalmente querrás que sea hacia abajo y para las barras de
navegación verticales, o bien hacia la izquierda o hacia la derecha dependiendo el lugar de
la página en el que se encuentre tu barra.
Barras de navegación 261
Espaciado
Con esta configuración puedes agregar espacio entre las entradas del menú; si las
separas, el menú será más grande.

Borde
Agrega un borde a los paneles de los menús al fijar un ancho de borde en píxeles.

Animación
Por defecto, los menús se abrirán de forma instantánea, pero aquí puedes elegir si quieres
que el menú tenga una animación mientras se abre.

Transparencia
Puedes hacer que tus menús sean semitransparentes para poder ver a través de los
paneles de menú. Introduce el nivel de transparencia que te gustaría como porcentaje.

Desplazamiento horizontal/Desplazamiento vertical


Puedes desplazar el panel del menú de forma horizontal o vertical con respecto a los
botones. Introduce la cantidad de píxeles de desplazamiento.

Actualización de la barra de navegación en todas las


páginas

Tal como se ha descrito anteriormente, si la opción BARRA DE NAVEGACIÓN DEL SITIO está
activada para una barra de navegación, entonces todos los cambios realizados a una
barra de navegación se aplicarán automáticamente a todas las otras páginas, incluyendo la
ubicación de la barra en la página.

Sin embargo, si no tienes esta opción activada, debes utilizar la función ARREGLO >
ACTUALIZAR OBJETOS REPETIDOS para copiar los cambios que has realizado a la barra en
la página actual a todas las otras páginas. Ten en cuenta que esto también actualizará
todos los otros objetos repetidos en la página, como los encabezados o logos, y la página
actual se utilizará como referencia. Lee el capítulo Trabajar con objetos para más
información sobre objetos repetidos.

Edición en el lienzo

Si la opción "Barra de navegación del sitio" está desactivada, entonces puedes


editar las etiquetas de botones directamente en el lienzo, con la HERRAMIENTA DE
TEXTO . Simplemente escoge la herramienta de texto y haz clic en el texto de la
etiqueta para comenzar a editarlo.

Utiliza ARREGLO > ACTUALIZAR OBJETOS REPETIDOS PARA APLICAR TUS CAMBIOS A TODAS
LAS PÁGINAS QUE CONTIENEN UNA COPIA DE LA BARRA.
262 Barras de navegación

Cambio de la fuente de los botones de la barra de


navegación

Puedes modificar la fuente utilizada para las etiquetas de botones de una barra de
navegación fácilmente. Selecciona la barra con un clic en ella. Luego ve a la HERRAMIENTA
DE TEXTO y selecciona de la lista de fuentes que se encuentra a la izquierda la BARRA DE
INFORMACIÓN DE LA HERRAMIENTA DE TEXTO . A medida que desplaces el cursor del ratón
sobre las diferentes fuentes de la lista, la barra de navegación se adaptará de inmediato
para que puedas ver el aspecto de tu barra con esa fuente. Selecciona la fuente que
desees. Si tu barra tiene un estado MouseOver, su fuente también se adaptará.

De la misma forma, puedes cambiar el tamaño de la fuente con el control del tamaño de
fuente que se encuentra junto a la lista de selección de fuente.

Importación e inserción de barras de navegación

Si importas o pegas una barra de navegación en tu documento, la opción de navegación


del sitio de esta barra de navegación se desactiva automáticamente, si estaba activada.
Esto es para evitar conflictos con cualquier barra de navegación del sitio existente en tu
documento.

Sin embargo, si la barra entrante es del mismo tema y tipo que la barra de navegación del
sitio existente (tiene el mismo nombre), inmediatamente se actualizará para coincidir con la
barra de navegación del sitio existente. De esa forma, esta barra no aparecerá con su
forma original en tu página.

Si la barra es de un tema o tipo diferente (tiene un nombre repetido diferente) aparecerá sin
modificación.

Creación de barras de navegación propias

Puedes crear una barra de navegación a partir de cualquier tipo de diseño de botón. La
GALERÍA DE DISEÑOS contiene varios diseños de botones diferentes o puedes dibujar tus
propios diseños. Consulta la sección Creación de los botones MouseOver propios (en la
página 56) del capítulo Primeros pasos para más información sobre este tema. El botón
puede o no incluir un estado MouseOver.

Para crear una barra de navegación, selecciona el botón y luego escoge ARREGLO >
CREAR BARRA DE NAVEGACIÓN . El DIÁLOGO DE BARRA DE NAVEGACIÓN aparecerá y podrás
agregar más botones a tu barra de inmediato, de la misma forma que con las otras barras
de navegación.

También puedes crear barras de navegación con más de un diseño de botón (para que
puedas tener diferentes diseños para tu primer y/o último botón de la barra). Consulta la
sección a continuación para información sobre cómo hacerlo.
Barras de navegación 263
Restricciones de diseño de botones
Existen algunas reglas que debes seguir cuando crees tus propios botones para utilizar en
barras de navegación.

Limitaciones de botones extensibles


Para obtener resultados óptimos cuando tus botones se extienden de forma automática,
te recomendamos que no haya puntos de control de ruta ni rellenos con gradación/puntos
de control de transparencia en el área horizontal que ocupa el objeto de texto de la
etiqueta de botón.

Texto en un botón
Cada estado del diseño de botón debe diseñarse como objeto de grupo que contenga el
objeto de texto que puede servir como etiqueta de botón. Este objeto de texto debería ser
un objeto de texto simple, no una columna de texto ni un área de texto. Es decir, que
debería crearse en la Herramienta de texto con un clic en la página y escribiendo, sin
arrastrar una línea ni área de texto primero.

Estados de botones en grupos suaves


Si hay varios estados en tu botón, p. ej. MouseOff y MouseOver, necesitan agregarse a un
grupo suave para que permanezcan juntos cuando un estado se mueve o transforma.

Márgenes de botón

En esta sección nos referimos a "márgenes" como los espacios entre la etiqueta y el final
del botón. Para los botones extensibles (aquellos para los que se ha activado la opción
"Ajustar el ancho de los botones a las etiquetas") esto está determinado por el botón
master a partir del que has creado tu barra de navegación. Al ajustar los márgenes del
botón master, configuras los márgenes para todos los otros botones de la barra, que se
basan en él.

La forma más sencilla de cambiar el margen del primer botón es la siguiente:

1. Abre el DIÁLOGO DE BARRA DE NAVEGACIÓN


2. Desactiva la opción AJUSTAR EL ANCHO DE LOS BOTONES A LAS ETIQUETAS , para que
los botones no se extiendan al cambiar el texto de la etiqueta.
3. Cambia la etiqueta del botón master (el primer botón salvo que tu barra de
navegación contenga varios diseños de botones, ver la sección a continuación).
Escoge un texto de etiqueta de prueba que tenga la longitud apropiada para
ofrecerte los márgenes que deseas en el botón master.
4. Vuelve a activar la opción AJUSTAR EL ANCHO DE LOS BOTONES A LAS ETIQUETAS .
Todos los botones tendrán los mismo márgenes que el botón master.
5. Vuelve a colocar el texto de la etiqueta master.
264 Barras de navegación

Barra original

Barra con margen pequeño modificado

Barra con margen grande modificado

Si tu barra de navegación contiene diferentes diseños para el inicio/fin (lee a continuación


para saber cómo hacerlo), entonces los diseños de inicio y fin tendrán sus propios
márgenes que pueden controlarse por separado.

Avanzado: edición de un diseño de botón de barra de


navegación.

Sin importar la forma en que se ha creado la barra de navegación, puedes modificar el


diseño de botón que utiliza. Para una barra de navegación en la que todos los botones
tienen el mismo diseño, el primer botón en la barra se utiliza como botón master a partir
del que todos los demás botones se copian. Por lo tanto, al modificar el primer diseño de
botón, puedes modificar el diseño para toda la barra.

Edición interior
Para algunas barras puedes realizar cierto tipo de edición del diseño de botón
directamente en el primer botón, si utilizas la opción para seleccionar el contenido. Esto te
permite seleccionar las formas dentro de un grupo de botones. Lee la información acerca
de la herramienta de selección en el capítulo Trabajar con objetos para más detalles.

Sin embargo, no puedes realizar la edición interior, si alguna de las siguientes opciones
está activada en el diálogo de barra de navegación.

• BARRA DE NAVEGACIÓN DEL SITIO


• AJUSTAR EL ANCHO DE LOS BOTONES A LAS ETIQUETAS

Si alguna de estas opciones está activada e intentas seleccionar dentro, se te preguntará y


se te dará la opción de abrir el diálogo de barra de navegación para desactivar estas
opciones y volver a intentar.

Con las opciones desactivadas, puedes utilizar seleccionar dentro y modificar las formas
que conforman tu botón con las herramientas de dibujo usuales.
Barras de navegación 265

IMPORTANTE: Recuerda que el primer botón de tu barra es el botón master de la misma


(salvo que uses botones de inicio y fin diferentes, ver a continuación). Es decir, que debes
modificar el primer botón. Luego, los cambios que hayas realizado al primer botón se
aplicarán de inmediato a otros botones de tu barra. Si modificas otro botón que no sea el
master, los cambios no se aplicarán y se perderán cuando modifiques tu barra.

Desagrupar, editar y reagrupar


Si quieres realizar una edición significativa de un diseño de botón, lo mejor es desagrupar
los componentes que forman la barra de navegación y luego reagruparlos.

Para desagrupar la barra, selecciona la barra de navegación con un clic en el lienzo y


selecciona la función usual para desagruparARREGLO > DESAGRUPAR o Ctrl+U). O haz clic
en el botón DESAGRUPAR PARA EDITAR GRÁFICOS en la parte inferior del diálogo de barra
de navegación.

Nota: Si tu barra de navegación tiene la opción "Barra de navegación del sitio" activada,
deberás volver a activar la opción después de reagrupar la barra modificada, de ser
necesario.

Una vez que has desagrupado la barra, dejará de ser una barra de navegación y tendrás
un grupo de botones separado para cada estado de botón. Además, si la opción "Mismo
ancho para todos los botones" se ha activado, al desagrupar, es posible que los anchos
de botones cambien porque esta opción es sólo efectiva mientras los botones son parte
de una barra de navegación. La mayoría de las veces querrás realizar cambios al diseño
del botón master y dejar los otros botones en la página. Se utilizan cuando reagrupes tu
barra de navegación para recuperar todas las etiquetas de botones, enlaces, etc. para que
no tengas que volver a ingresarlos.

Si has establecido un estado MouseOver, los dos grupos que conforman el botón master
estarán unidos en un "grupo suave" para que permanezcan juntos cuando los arrastres
por la página. Sepáralos con ARREGLO > BORRAR GRUPO SUAVE (Ctrl+Alt+U). Luego
puedes desagrupar cada estado de botón de las capas MouseOff y MouseOver (Ctrl+U)
para trabajar en sus respectivos diseños. Consulta la sección "Creación de los botones
MouseOver propios" del capítulo Primeros pasos (en la página 56) para información sobre
cómo crear botones.

Recuerda reagrupar cada uno de los estados de botón y luego volver a crear el grupo
suave para conservar los dos botones de estado juntos una vez que hayas terminado con
la edición. Házlo asegurándote de que ambas capas estén activadas en la Galería de
páginas y galerías (en la página 275), selecciona ambos grupos de estado y luego
ARREGLO > APLICAR GRUPO SUAVE . Lee el capítulo Trabajar con objetos para más
información sobre grupos suaves (en la página 108).

Es una buena idea comprobar que el botón funcione de forma esperada con una vista
previa de tu página, antes de volver a montar la barra. Para volver a armar la barra,
selecciona el botón modificado y escoge ARREGLO >CREAR BARRA DE NAVEGACIÓN . Los
botones no modificados en la página se utilizan para volver a crear la página tanto si los
seleccionas o no.
266 Barras de navegación

Barras de navegación con primer y último botón diferente

Muchas veces es posible que el primer y el último botón de una barra sean diferentes. Por
ejemplo, una barra puede tener extremos redondeados con botones rectangulares en el
medio.

Las barras de navegación como estas necesitan 2 (si sólo un extremo es diferente) o 3 (si
ambos extremos son diferentes) diseños de botones. Posiciona los diseños de botón en
orden de izquierda a derecha, tal como quieres que aparezcan en una barra de
navegación horizontal. O de arriba hacia abajo tal como te gustaría que aparecieran en una
barra vertical. Luego selecciona los tres diseños de botones (junto con los estados
MouseOver, si los tienen) y escoge ARREGLO > CREAR BARRA DE NAVEGACIÓN.

Cuando creas una barra a partir de más de un botón como este, MAGIX Web Designer 6
necesita saber cómo quieres que se utilicen esos botones en la barra. Por lo tanto, se
muestra un diálogo que solicitará que escojas entre una variedad de opciones.

Todos los botones iguales: escoge esta opción si quieres que todos los botones de la
barra tengan el diseño del primer botón que has seleccionado. Este es el tipo de barra de
navegación más común.

PRIMER BOTÓN DIFERENTE: si el primer botón debe tener un diseño diferente al resto de los
botones de la barra, escoge esta opción.
Barras de navegación 267
ÚLTIMO BOTÓN DIFERENTE: si el último botón debe tener un diseño diferente al resto de los
botones de la barra, escoge esta opción. Un ejemplo en el que esta opción es necesaria
es una barra que muestra una división entre cada botón de la barra. Todos menos el
último botón necesitarán el divisor a la derecha del diseño del botón.

El último botón en este ejemplo es diferente porque no tiene un divisor en el borde derecho.

PRIMER Y ÚLTIMO BOTÓN DIFERENTES: esta opción te permite especificar los diferentes
diseños de botones para el primer y el último botón para dar a tu barra los extremos
finales. Por supuesto, debes haber seleccionado al menos 3 botones para que esta opción
sea válida.
268 Widgets de sitios web

Widgets de sitios web


Este capítulo describe cómo agregar contenido dinámico a tu sitio web, como películas,
animaciones, formas y miles de gadgets disponibles como contadores de página y
conversores de divisas. Nos referimos a estos con el término general "widgets de sitios
web" o simplemente "widgets".

Widgets y marcadores de posición: todo automático

Un widget es un objeto que puedes colocar en tu página que es más que un gráfico, una
imagen o un texto estático. Todos los widgets tienen algún tipo de código HTML (y
muchas veces una combinación de Javascript y Flash), que el navegador web ejecuta para
mostrar el widget y reproducir su comportamiento. MAGIX Web Designer 6 muestra un
"objeto de marcador de posición estático" en la página para indicar el tamaño y posición
de un widget en la página web final, que puede colocarse en cualquier lugar de la página.
Cuando exportes o generes la vista previa de tu página, el objeto de marcador de posición
se reemplaza con el código actual para el widget, de forma que el widget funciona tal
como lo esperas en tu página web.

En general, un marcador de posición es una imagen que parece una instantánea estática
del widget mismo, pero también puede ser simplemente un rectángulo o cualquier otro
Widgets de sitios web 269
objeto. El marcador de posición debe tener las mismas dimensiones que el widget, de
forma que puedas posicionarlo con respecto al otro contenido de tu página.

La buena noticia es que MAGIX Web Designer 6 puede renderizar las imágenes de
posición de marcador por ti. En general, solo debes darle a MAGIX Web Designer 6 el
código o archivo para un widget y él se ocupará de todo lo demás.

Widgets de la galería de diseños

La forma más sencilla de agregar widgets a tu sitio es escoger entre la selección


suministrada en la GALERÍA DE DISEÑOS . Los widgets de la galería se actualizan
automáticamente de forma regular, de forma que Xara puede añadir, modificar o eliminar la
selección de widgets disponibles en cualquier momento. Verás que la galería de diseños
muchas veces se actualiza cuando la abres.

Para agregar un widget, simplemente arrástralo y suéltalo desde la galería hasta tu página.
Se abrirá una ventana que, en realidad, es el navegador de Internet que funciona dentro de
MAGIX Web Designer 6. Esto es similar a la ventana de vista previa que se muestra
cuando haces clic para ver la vista previa de la página y los botones del sitio web en la
barra de herramientas web. Sin embargo, esta ventana tiene algunos botones adicionales
en la parte inferior que te explicaremos más adelante.

Ejemplo de la ventana de inserción de widgets, que muestra el gadget de novedades de Google.


270 Widgets de sitios web
La ventana del navegador se abre en la página web del proveedor del widget. Aquí podrás
encontrar más información acerca del widget y, en la mayoría de los casos, personalizar su
apariencia. En general, la página web del widget también te permitirá hacer una vista
previa de tu widget después de haber realizado cambios.

Inserción
Pulsa el botón AYUDA al final de la ventana para ver información que te guíe durante el
proceso de configuración e inserción del widget. Para la mayoría de los widgets, deberás
llegar al punto en que la página web del widget te muestre el código HTML que necesita
insertarse en tu página web. Cuando sea visible, generalmente puedes hacer clic en el
botón Insertar en la parte inferior de la ventana. Entonces, MAGIX Web Designer 6
encontrará el código HTML y lo insertará en tu página por ti.

Para algunos widgets, MAGIX Web Designer 6 no puede tomar el código HTML
directamente desde la página y deberás copiar el código al portapapeles. Selecciona el
código en la ventana del navegador y pulsa Ctrl+C. Muchos widgets te facilian esto porque
te suministran un botón de copia junto al código. Una vez que has copiado el código, haz
clic en el botón INSERTAR .

Generación automática del marcador de posición


Al pulsar el botón Insertar, si MAGIX Web Designer 6 encontró el código del widget, la
ventana de la página web del widget se cerrará y verás un aviso indicando que MAGIX
Web Designer 6 está ocupado renderizando la imagen del marcador de posición. Tras
algunos segundos, aparecerá una imagen de tu widget en tu página. Para la mayoría de
los widgets, esta imagen tiene el mismo tamaño que el widget en sí mismo, por lo que
puedes posicionarla con la HERRAMIENTA DE SELECCIÓN.

Ahora, todo lo que debes hacer es realizar una vista previa de tu página web y verás el
nuevo widget en funcionamiento.

Membresía del sitio del widget


Es posible que algunos widgets requieran que abras un cuenta con el proveedor del
widget antes de poder usarlo. La mayoría son gratis, pero algunas ofrecen servicios
premium además de la oferta gratis. Mira cada widget individual y la información sobre el
sitio del proveedor del widget para más detalles.

Edición de widgets existentes


MAGIX Web Designer 6 no ofrece compatibilidad directa para editar un widget que ya has
agregado a tu página. La mayoría de los widgets son muy simples y muchas veces la
forma más fácil de cambiar un widget es eliminándolo y creando uno nuevo, tal como se
describe anteriormente.

Los proveedores de widgets que te ofrecen una cuenta generalmente conservarán una
copia de un widget que has creado. Esto significa que puedes iniciar sesión en tu cuenta y
encontrar, modificar e insertar un widget que has creado previamente. Insertar widgets
existentes es como insertar widgets nuevos, simplemente haz clic en INSERTAR cuando
veas el código HTML o copia el código HTML para el widget en el portapapeles y luego
haz clic en Insertar.
Widgets de sitios web 271

Agregado de archivos de películas y animaciones

MAGIX Web Designer 6 incluye compatibilidad directa con algunos tipos de archivos que
es posible que quieras añadir a tu página. Para estos archivos, puedes simplemente
arrastrarlos y soltarlos desde el Explorador de Windows hasta tu página o utilizar la opción
ARCHIVO > Importar.

Durante la importación, se identifica el tipo de archivo y se coloca un marcador de posición


o un enlace apropiado en tu página, mientras que el archivo se copia en la carpeta de
soporte de tu diseño. La carpeta de soporte es una carpeta que está vinculada a tu
archivo de diseño y se crea automáticamente. Si tu archivo de diseño se llama
"Misitio.web", la carpeta de soporte se llamará "Misitio_web_files". El contenido de esta
carpeta se incluye junto con todos los archivos de imagen de tu sitio, toda vez que
exportes y publiques tu sitio.

Archivos de película MP4 y FLV


Al importar un archivo MP4 o FLV, MAGIX Web Designer 6 inspecciona el archivo para
determinar la relación de aspecto y otra información acerca de la película. Luego inserta el
archivo de película y otros archivos en un reproductor de películas Flash en la carpeta de
soporte de tu sitio web. En tu página aparecerá una imagen similar al reproductor de la
película.

Posiciona y cambia el tamaño de tu marcador de posición con la herramienta de selección


y luego haz una vista previa de tu página. Haz clic en el botón para iniciar la reproducción
de la película (deberás tener Flash instalado). Esto es todo. El reproductor de la película
contiene controles básicos para ajustar el volumen, iniciar y detener la reproducción y para
desplazarte hasta cualquier lugar de la película.

Otros formatos de película


MAGIX Web Designer 6 no es directamente compatible con otros formatos de película,
pero visita esta página web http://rdir.magix.net/?page=H1Q9XX0777AR del sitio web de
MAGIX para más información sobre cómo convertir películas a un formato que pueda
agregarse a tu página web.

Archivos Flash
Para incluir una animación Flash en tu sitio web, importa el archivo Flash (.swf). El archivo
Flash se copia en la carpeta de soporte de tu diseño, de forma que se exportará y
publicará con tu sitio web. Una imagen de marcador de posición se renderiza y se coloca
en tu página web.

Puedes cambiar el tamaño de tus animaciones Flash, si utilizas la HERRAMIENTA DE


SELECCIÓN para cambiar el tamaño de la imagen de marcador de posición al tamaño
deseado y la posicionas en el lugar que desees.

Haz una vista previa de tu página para ver la animación Flash en funcionamiento en tu
página web. Por supuesto, debes tener Flash instalado para poder reproducirla con éxito.
272 Widgets de sitios web
GIF animados
Agrega un GIF animado a tu página de la misma forma en que agregas archivos Flash.
Importa o arrastra y suelta el archivo GIF hasta la página. Se copiará a la carpeta de
soporte del diseño y se generará una imagen de marcador de posición estática. Cambia el
tamaño y reposiciona el marcador de posición, luego haz una vista previa de tu página y
listo.

Archivos PDF
Puedes importar archivos PDF a un documento web en dos formas diferentes. O bien lo
importas para que el contenido del archivo se copie en tu página (al igual que cuando
importas una foto). O bien puedes agregar un enlace a una copia del archivo en tu sitio
web y dejas que el archivo se publique en tu sitio. Al importar un archivo PDF se te dará a
escoger entre estas dos opciones.

Al añadir un enlace, el archivo PDF se copia en la carpeta de soporte de tu diseño de


forma que se exporta y publica con el resto de tu sitio. Además, se agrega un enlace en tu
página que se verá así:

Un clic sobre el enlace de tu página exportada generalmente abre el archivo PDF, pero el
comportamiento exacto varía según la configuración del navegador del usuario.

Widgets de otros sitios de widgets

Existen cientos o miles de sitios que ofrecen widgets de alguno tipo y la Galería de diseños
brinda acceso a un pequeño subgrupo de ellos. Casi todos los widgets se ofrecen
mediante un breve código HTML. El proveedor del widget generalmente te suministra
instrucciones simples para insertar el código en tu página web, pero con MAGIX Web
Designer 6, esto es todavía más fácil.

Copia el código del proveedor del widget en el portapapeles de tu sistema, simplemente


cópialo tal como lo harías en un procesador de texto. Muchas veces, el proveedor del
widget te suministra un botón "copia" que lo hace por ti.

Luego, en MAGIX Web Designer 6 ve a la herramienta de selección y haz una operación de


pegado habitual (Ctrl+V). Verás que MAGIX Web Designer 6 reconoce el código HTML e
comienza de inmediato a renderizar la imagen de marcador de posición, tal como lo hace
como cuando se inserta un widget de la Galería de diseños. El marcador de posición
aparecerá en tu página y, generalmente, tendrá el tamaño del widget. Luego podrás hacer
una vista previa de tu página para ver al widget en funcionamiento.

NOTA: si no te encuentras en la herramienta de texto cuando pegas el código, se pegará


como texto en vez de introducir un marcador de posición. Una vez que hayas pegado el
contenido del portapapeles como texto, continuará pegando como texto aún cuando
cambies a la herramienta de selección y vuelvas a pegar. Si llegas a este punto, vuelve a la
Widgets de sitios web 273
página web del widget y copia el código de nuevo. Luego, pégalo mientras te encuentras
en la herramienta de selección.

Cambio de tamaño de widgets

Puedes cambiar el tamaño de las imágenes de marcadores de posición para archivos


Flash, MP4 y GIF animados de la misma forma que cambias el tamaño del contenido de tu
página, porque este tipo de contenido es modificable. Sin embargo, la mayoría de los
otros widgets no son compatibles con esto y siempre renderizarán el mismo tamaño.

Para estos widgets, el objeto de marcador de posición determina simplemente los límites
del área en que el widget puede renderizar, de forma que reducir el tamaño del marcador
de posición significará que el widget se verá recortado en tu página. La imagen del
marcador de posición se regenera cada vez que cambias su tamaño por lo que reflejará un
recorte del widget también, tal como se ilustra en el ejemplo.

Marcador de posición con el tamaño por Marcador de posición con tamaño reducido
defecto

Este es un ejemplo del botón "Comprar ahora" de PayPal que permite vender bienes y
servicios desde tu página web. Este widget está disponible en la Galería de diseños.

De la misma forma, hacer que el marcador de posición de estos widgets sea más grande
resultará en un espacio vacío alrededor del widget en la página y en la imagen del
marcador de posición. Para widgets como este, que no cambian de tamaño
correctamente cuando se modifica el tamaño del marcador de posición, lo mejor es
conservar el tamaño original por defecto.

Hay algunos widgets que pueden mejorarse si se cambia el tamaño del marcador de
posición, aun cuando el widget en sí mismo no cambie su tamaño. Algunos widgets
llenarán el contenedor en el que están insertos, lo que significa que parecerán más
grandes y habrá espacios en blanco que ocupan el espacio. Puedes experimentar
cambiando el tamaño del widget en cada dirección y reduciendo el widget sin perder
partes de él.

Por ejemplo, este widget se ha renderizado demasiado ancho y alto de forma que se
desperdicia espacio abajo y a la derecha de los controles. Si reduces el tamaño, el tamaño
de los controles no cambiará, sino que la forma se recortará. El resultado es un marcador
de posición más claro que ocupa menos espacio en la página.
274 Widgets de sitios web

Marcador de posición con el tamaño por defecto Marcador de posición más angosto y
corto

Desactivación de la regeneración del marcador de posición


La imagen de marcador de posición se regenerará cada vez que cambies su tamaño, el
código o el archivo relacionado. Es posible que algunas veces quieras desactivar la
regeneración de forma que la imagen del marcador de posición no cambie. Puedes
hacerlo si quitas la tilde de la casilla que se encuentra en la parte inferior de la PESTAÑA
MARCADOR DE POSICIÓN del DIÁLOGO HERRAMIENTAS > PROPIEDADES WEB .

Inserción manual de marcadores de posición

Si no quieres que MAGIX Web Designer 6 cree una imagen de marcador de posición,
puedes fijar una personalmente. Primero crea un objeto de marcador de posición (tal vez
un rectángulo del tamaño adecuado o una imagen importada que quieras utilizar para
representar el widget en tu página). Selecciona el objeto y luego abre la pestaña Marcador
de posición en el DIÁLOGO HERRAMIENTAS > PROPIEDADES WEB .

O pulsa el botón de marcador de posición en la barra desplegable de Propiedades


web en la barra superior.

En este diálogo puedes escoger si deseas asociar el objeto seleccionado con un archivo
Flash u otro archivo o con un código HTML que pegues en el diálogo. Lee la sección
PESTAÑA MARCADOR DE POSICIÓN del capítulo diálogo de Propiedades web (en la página
212) para más detalles en este diálogo.

En general, no quieres que la opción "Regenerar marcador de posición" esté activada si


quieres conservar el objeto de marcador de posición que has creado. Si seleccionas esta
opción, tu marcador de posición se reemplazará por la imagen generada del código o
archivo especificado en este diálogo.

Más información

Consulta la página web xara.com/widgets http://www.xara.com/widgets para más


información acerca de widgets. Por supuesto, sigue visitando la Galería de diseños que se
actualiza regularmente.
Galería de páginas y capas 275

Galería de páginas y capas

La galería de páginas y capas

Nota para usuarios de versiones de este software más antiguas: esto sustituye la GALERÍA
DE CAPAS

Utiliza el ícono de la galería de PÁGINAS Y CAPAS de la barra de Galerías o pulsa F10


para ver la Galería de páginas y capas.

La GALERÍA DE PÁGINAS Y CAPAS enumera todo lo que tienes en tus documentos, desde
las páginas y las capas hasta cada elemento individual de la página. Ofrece una forma de
seleccionar, ocultar, bloquear y reordenar estos elementos.

Puede trabajar en muchos niveles. En el nivel más alto se pueden enumerar sólo las
PÁGINAS y suministrar una forma directa y fácil de reordenar el orden de éstas
(arrastrándolas) para nombrar, copiar o borrar las páginas.

En un nivel inferior se pueden mostrar todas las CAPAS en cada página y puedes cambiar
el orden, renombrar y también bloquear y ocultar cualquier capa de una forma similar.

En el siguiente nivel inferior se enumeran todos los OBJETOS en la página de forma


jerárquica. Por lo tanto, aparecerá por ejemplo cada elemento de grupo en la página, pero
puedes expandir el grupo para mostrar los contenidos de ese grupo (que puede contener
otros grupos), de forma similar a como el explorador de archivos Windows gestiona los
archivos en archivos.

El nivel de objeto en la galería de Páginas y capas sólo está disponible en Xara Designer
Pro.

La jerarquía de los elementos es la siguiente:

Páginas
Capas
Elementos de página que pueden incluir
grupos
Contenidos de
grupo
...etc

Algunas de las características clave de la galería de PÁGINAS Y CAPAS incluyen;

Control de página
• Muestra una lista de páginas
• Agregar una nueva página, duplicar o borrar páginas
276 Galería de páginas y capas
• Cambiar el orden de página arrastrándolas
• Renombrar páginas

Control de capas
• Muestra todas las capas en cada página, desde la parte inferior (por lo general la capa
de fondo) hasta la capa más alta
• Crear nuevas capas, borrar, reordenar y renombrar capas
• Ocultar o mostrar capas
• Bloquear capas (convierte las capas en no editables)
• Activar Solo para una capa: desactiva todas las otras

Control de objeto (sólo disponible en Xara Designer Pro)


• Muestra una lista de todos los elementos (objetos) en la página de acuerdo con el orden
en el que aparecen en la misma, desde la parte inferior hasta la parte superior.
• Ocultar o mostrar cualquier elemento
• Mover hacia arriba y hacia abajo la pila
• Bloquear cualquier objeto para que se convierta en no editable
• Activar Solo para un objeto: desactiva todos los otros

Además, la galería de PÁGINAS Y CAPAS muestra una pequeña vista en miniatura de cada
elemento y una vista en miniatura más grande si pasas el cursor del ratón por encima.

La galería de Páginas y capas muestra un documento de 5 páginas. La página denominada


"photos" es la página seleccionada.

Si mantienes el cursor sobre el icono de la página pequeña, obtienes una vista previa de la
miniatura de la página.
Galería de páginas y capas 277

La página de fotos ha sido ampliada, haz clic en la pequeña flecha que apunta hacia la derecha
para mostrar todas las capas de esta página.

La capa inferior "Page background (Fondo de página)" está bloqueada. La capa denominada
MouseOff es la capa activa o actual que es donde aparecerán todos los nuevos objetos. Las 4
capas superiores están ocultas (icono del ojo cerrado), de modo que en el documento sólo son
visibles la capa de fondo y la capa MouseOff.

Páginas

Haciendo clic en el botón PÁGINAS en la parte superior de la GALERÍA DE PÁGINAS Y CAPAS


sólo se visualizarán las páginas en el documento, colapsando todos los demás niveles
abiertos.

Puedes reordenar las páginas arrastrando sobre el elemento en la galería de páginas y


capas.

Puedes renombrar una página haciendo haciendo dos veces clic (despacio) en el nombre
de la página. (El primer clic seleccionaría la página.) Esto se parece mucho a renombrar
archivos en Windows Explorer. Del mismo modo que es una forma útil de identificar
páginas en documentos largos, el nombre de página se usa cuando el documento se
exporta como página web. Por este motivo no es posible usar ciertos caracteres o
caracteres de símbolo en el nombre (no son aceptados como nombres de páginas web).

Los botones NUEVO , DUPLICAR y BORRAR hacen lo que sus nombres sugieren. Observa
que primero tienes que haber seleccionado una página (haz clic para que resalte en azul
como se muestra arriba) para que estos botones funcionen en las páginas. (Si has
seleccionado una capa, por ejemplo, funcionarán en el nivel de capa).

La opción NUEVO creará una página vacía del mismo tamaño que la página seleccionada
actual.

Puedes expandir (abrir) la página para mostrar los contenidos de la página haciendo
clic en la flecha pequeña que apunta a la derecha o haciendo doble clic.
278 Galería de páginas y capas
Repitiendo la misma operación colapsará (cerrará) la vista de página.
Manteniendo el cursor del ratón sobre el pequeño icono de página aparecerá una
miniatura de pop·up de la página.

Capas

¿Qué son capas? Todo en tu documento tiene un orden de apilamiento · esto significa que
nuevos elementos son posicionados encima de elementos más antiguos de la página,
como si estuvieras añadiendo trozos de papel en tu escritorio. Puedes hacer clic para
mover cualquier objeto, pero si tu documento tiene docenas o incluso cientos o miles de
elementos, tu tarea puede volverse desordenada y difícil. Quizás quieras trabajar en
elementos que están tapados por elementos que se encuentran encima.

Las capas son útiles para organizar páginas o dibujos más complejos que contienen
numerosas partes separadas. Utilizando capas puedes agrupar una colección de
elementos y luego activar o desactivar la colección entera (hacerla visible u ocultarla) a
través de una operación fácil. Imagínate que una capa es un sobre transparente de
plástico que contiene una pila de papeles separados. Abriendo el sobre puedes acceder a
su contenido y re·arreglarlo. Pero tu escritorio puede que contenga una pila de dichos
sobres y, tal y como puedes volver a arreglar los sobres, también puedes volver a ordenar,
de forma similar, las capas.

Por lo tanto, las capas son grupos de elementos. Las capas pueden hacerse invisible para
ocultar partes de tu documento, lo que hace que tus áreas de trabajo sean menos
desordenadas y más fáciles de manejar. Puedes asignar nombres a las capas o puedes
crearlas o borrarlas fácilmente. Y de igual modo que puedes hacer clic en el icono de la
pequeña flecha para abrir una página y ver su contenido (las capas en la página), puedes
hacer lo mismo con cada capa para ver los contenidos de esa capa.

Cuando selecciones cualquier objeto, la capa se mostrará en la línea de estado en la parte


inferior de la ventana.

La capa actual
Cuando creas algún objeto en la página, se coloca en una de las capas, llamada la capa
activa o simplemente la capa actual. En un documento en blanco esto se llama Capa 1 o,
en el caso de documentos Web, se lo denomina MouseOff. La capa actual se señala con
una marca redonda en el lado derecho.

Importante: todos los elementos, fotos o texto nuevo que se dibujen y todos los
elementos pegados se colocan en la capa actual marcada con el símbolo.
Galería de páginas y capas 279
Puedes cambiar la capa actual, simplemente con un clic sobre su hilera en la Galería de
objetosGalería de páginas y capasmprender que puedes seleccionar un objeto en
cualquier capa o incluso en múltiples capas, sin que se encuentren en la capa actual. Esta
capa actual simplemente indica el lugar en donde se colocarán los nuevos elementos.

Esta Galería de páginas y capas de ejemplo muestra que la capa actual se llama MouseOff (la
página actual se llama fotos). Entonces, si dibujas algo nuevo se colocará en la capa MouseOff.

También muestra tres elementos seleccionados en el documento (resaltados en azul) dentro de


una capa completamente diferente, llamada Beta_fotos 2.

Las capas Layer 5, 6, 7 y MouseOver están ocultas.

Capa actual siempre visible


Es posible que la página actual pueda estar oculta o hasta bloqueada. Al hacer clic sobre
una capa para seleccionarla, la capa actual no cambia generalmente su estado de
visibilidad o bloqueado. Pero existe una preferencia en el diálogo de Opciones
(Herramientas > Opciones > pestaña General (en la página 332)) para hacer que la capa
actual siempre esté visible y editable (sin bloquear). Si seleccionas esta opción, entonces
cada vez que selecciones una capa en la Galería de páginas y capas se hará visible y no
estará bloqueada. Al moverte a otra capa, la capa anterior regresará a su estado de
visibilidad y bloqueo anterior.

Capas en páginas web


En páginas web guardadas de <Programmnam_short>, las capas se usan para efectos de
MouseOver o de ventanas emergentes (en el navegador web, los contenidos de estas
capas se visualizan cuando mueves el cursor sobre elementos en la página).
280 Galería de páginas y capas
Puedes encontrar más detalles sobre este tema en el capítulo Primeros pasos en la
sección Capas, MouseOver y ventanas emergentes (en la página 54).

Grupos y capas suaves


Los Grupos suaves (en la página 108) son poco usuales porque son grupos de objetos
que pueden encontrarse en diferentes capas. (Los elementos de los grupos normales
deben estar en una sola capa). Cuando seleccionas una parte de un grupo suave, las otras
partes también se seleccionan, incluso si están ocultas o bloqueadas. La Galería de
páginas y capas mostrará todos los elementos seleccionados de color azul, pero en el
caso de los grupos suaves, estos elementos pueden encontrarse en otras capas que no
has expandido y, por lo tanto, no son visibles de inmediato.

Operaciones de capa

Con un clic en el botón CAPAS en la parte superior de la galería de páginas y capas


aparecerán sólo las capas de la página actual. Este es un modo en que el botón de capas
permanece pulsado. Mientras te encuentras en el modo de capas, si pasas a otra página,
se verán las capas de la página del momento y todos los otros nodos se cerrarán. Para
desactivar el modo, haz clic nuevamente en el botón CAPAS .

Puedes reordenar las capas, esto es el orden de superposición en la página, arrastrando y


soltando en las capas en la galería de páginas y capas.

Puedes renombrar una capa haciendo haciendo dos veces clic (despacio) en el nombre de
la capa. (El primer clic seleccionaría la capa.) Esto se parece mucho a renombrar archivos
en Windows Explorer.

Si mueves el cursor del ratón sobre los pequeños iconos, se mostrará una miniatura
del contenido de la capa.

Cuando selecciones una capa (hacer clic para resaltar la capa), los botones NUEVO ,
DUPLICAR y BORRAR en la parte superior de la galería de páginas y capas harán lo que sus
nombres sugieren. El botón NUEVO creará una capa nueva vacía y la posicionará en la
parte superior de la pila. Puedes cambiar el orden arrastrándolo a la posición requerida.

El botón DUPLICAR copiará la capa y su contenido y lo posicionará arriba en la pila, es


decir, arriba de todos los demás objetos de la página.

El botón de propiedades
Esto abre una ventana de diálogo donde puedes crear nuevas capas con nombre y líneas
guía con valores numéricos precisos. También puedes utilizar esto para modificar el color
de los objetos de la capa guía.

Lee la sección OBJETOS GUÍA Y LÍNEAS GUÍA en el capítulo Trabajar con objetos (en la
página 105) para más información.
Galería de páginas y capas 281

Capas especiales

Existen diversos tipos de capas especiales. Estos aparecen en la galería de páginas y


capas y pueden activarse o desactivarse de forma usual, aunque se comportan de forma
levemente diferente.

CAPAS DE FONDO son capas que no se imprimen, que aparecen en el fondo del
documento, debajo de todos los otros elementos. Al aplicar un color al fondo de la página
(arrastrar y soltar desde la línea de color) esto creará automáticamente una capa de FONDO
DE PÁGINA . En general, está bloqueada.

Al guardar un documento como un sitio web, las capas de fondo se convierten en fondos
de página web. Consulta el capítulo Primeros pasos (en la página 16) para más
información acerca de la configuración de los fondos de página web y la utilización de las
capas de fondo.

La CAPA DE GUÍAS es el lugar en donde se colocan las líneas guía o los objetos guía.
Cuando creas una línea guía, se generará automáticamente una capa de guías. Podrás
seleccionar la capa de guías y colocar todo lo que desees en esta capa, lo que funcionará
como una guía de ajuste.

Lee la sección Objetos guía y líneas guía en el capítulo Manejo de objetos para más
información.

Ocultar capas

Las dos columnas de íconos de la derecha de la galería de Páginas y capas controlan la


visibilidad y el estado bloqueado de las capas.

Un clic en el ojo abierto ocultará la capa de la página y el ícono cambiara a un ojo


cerrado . Otro clic hará que la capa sea visible nuevamente.

Cuando se oculta cualquier elemento, se vuelve invisible en la página y no puede verse ni


seleccionarse más. La forma de volver a ver los elementos ocultos es hacer clic en su
ícono de ojo cerrado. Como alternativa puedes hacer clic sobre el botón MÁS... y
seleccionar la opción VER TODOS , lo que hace visible todos los elementos de la página
actual.

Modo Solo

Si haces clic en cualquiera de los iconos en la columna junto a cada capa, activará el
modo "solo" de esta página, lo que significa que se ocultará todo lo demás, salvo esta
capa. Ahora puedes trabajar sobre esta capa aislada. Un clic en el botón restaurará el
estado anterior.
282 Galería de páginas y capas
También puedes hacer clic y arrastrar hacia abajo la columna de iconos para navegar
rápidamente por las capas independientemente de todo lo demás.

Para salir del modo Solo, haz clic en el botón o en el botón más grande en la parte
superior de la galería.

Bloquear capas

Un clic en el ícono de candado en el final derecho de la fila de capa bloquea la capa (el
icono adopta la forma de un candado cerrado ). Ahora no podrás seleccionar ningún
otro objeto en esa capa. Al hacer clic en los elementos cerrados, los atravesarás como si
no estuvieran allí y se seleccionarán los elementos que se encuentran abajo. Con otro clic
en el icono del candado, se vuelven a desbloquear. De forma alternativa puedes hacer clic
en el botón MÁS.. y seleccionar la opción DESBLOQUEAR TODO .

Grupos suaves
Hay una excepción en las reglas de bloqueo. Si un elemento en una capa bloqueada
forma parte de un Grupo suave (en la página 108), al seleccionar u operar ese grupo
suave, se selecciona y opera asimismo cualquier elemento bloqueado de ese grupo suave
(para esto están pensados los grupos suaves).

Mostrar todo y desbloquear todo

Estos dos controles en la parte superior de la Galería de páginas y capas son un shortcut
para ver todos los elementos de la página actual o desbloquearlos. Invalidan
temporalmente todos los objetos individuales y configuración de capas. Un segundo clic
sobre los controles restaurará el estado anterior. Es decir, que ésta es una forma rápida de
ver o desbloquear todo, en todas las capas, realizar alguna operación y después regresar
al estado anterior.

Cuando uno de los botones se ha seleccionado (están pulsados), entonces no es posible


cambiar el estado de los elementos individuales. Quita la selección de los botones para
permitir la operación normal de la visibilidad de la capa y el estado bloqueado.

Un clic sobre el botón Más mostrará opciones de menú para


MOSTRAR TODO y DESBLOQUEAR TODO .

Estas opciones son similares a las anteriores, pero no son interruptores. Al seleccionar una
de las opciones, todas las capas se activarán o desbloquearán y no existe una forma fácil
de restaurar el estado anterior, sino que deberá volver a seleccionarse individualmente el
estado oculto o bloqueado de todos los elementos independientes.
Galería de páginas y capas 283

Mover objetos entre capas

Hay varias formas de mover objetos entre capas. Primero, selecciona el objeto o los
objetos que quieras mover, y, a continuación

• CORTA (Cortar) el objeto (Ctrl+X). Asegúrate que la capa de destino es la capa actual
(mostrada con , haz clic en la capa si no es así) y luego haz clic en PEGAR o PEGAR
EN LUGAR . No puedes hacer esto al revés. Asegúrate de que la capa actual está
seleccionada como la capa actual y luego corta (Cortar) el objeto (que puede
encontrarse en cualquier capa) e inmediatamente vuelve a pegarlo (Pegar) (siempre se
pegará en la capa actual).
• Utiliza los elementos del menú ARREGLO MOVER A LA CAPA DE ADELANTE / MOVER A LA
CAPA DE ATRÁS para mover los objetos seleccionados a una capa más arriba o abajo.
284 Animaciones en Flash

Animaciones en Flash

Introducción

MAGIX Web Designer 6 tiene un enfoque tradicional con respecto a las animaciones en
Flash. Puedes crear frames claves (o snap shots) de tu animación a través del tiempo, y
MAGIX Web Designer 6 producirá automáticamente todos los frames que sean necesarios
entre un frame y otro (pasos intermedios), es un proceso llamado "tweening" (generación
de transiciones).

Un ejemplo de frame de inicio

El próximo frame clave tiene la estrella en otra posición, la forma se ha rotado un poco, se ha
reducido su tamaño y se ha cambiado su color.

MAGIX Web Designer 6 creará un archivo en Flash animado con movimientos suaves y fluidos
porque los frames intermedios se generan de forma automática. Este proceso se llama
"tweening".

Lo que Flash puede hacer y lo que no puede hacer


El formato Flash no es compatible con algunos efectos avanzados que ofrece MAGIX Web
Designer 6, como por ejemplo, una graduación de transparencia compleja, difuminación
(feathering), y la mayoría de los tipos de relleno de color avanzados.
Animaciones en Flash 285
Aunque, sí es compatible con una gama de efectos que incluye la transparencia simple.
Por lo tanto, si por ejemplo le aplicas una transición a la estrella en el segundo frame
clave superior para que sea 100% transparente, obtendrás una animación en la cual la
estrella se mueve, reduce su tamaño y luego desaparece.

El mismo ejemplo mostrando los frames intermedios (in-between frames) pero con un cambio de
transparencia.

Como MAGIX Web Designer 6, Flash es un programa basado en gráficos vectoriales, lo


que te posibilita agrandar los objetos sin perder calidad en los detalles. Esta cualidad del
programa hace que los archivos en Flash sean muy compactos, que es ideal para la web.

Para ilustrar lo pequeñas y compactas que pueden llegar a ser las animaciones flash de
MAGIX Web Designer 6, el anterior ejemplo animado que dura un segundo y contiene 24
frames (de modo que el vídeo se reproduce suavemente a 24 frames por segundo) crea un
archivo flash de tan sólo 700 bytes.

Los 6 tipos centrales de animación


Para que los archivos en Flash se mantengan muy compactos, los tipos de formas
utilizadas en tweening compatibles con flash se limitan a seis tipos básicos de animación.
Estos tipos se denominan a veces las 6 transformaciones centrales porque son las únicas
que pueden transformar un objeto de un frame clave al siguiente.

1. Mover: desplazar los objetos de una posición a otra.


2. Modificar tamaño (scale): aumentar o reducir el tamaño de los objetos.
3. Aplastar o torcer (squash or skew): aplastar o torcer objetos.
4. Girar: rotar objetos
5. Transparencia: ajustar la transparencia general (plana) de los objetos.
6. Cambios de color: cambiar el color de relleno (plano) de los objetos.

El último ítem, los cambios de color, pueden aplicarse a las fotos a las que se ha aplicado
un tono continuo. No puedes transformar una foto de colores completos en una foto de
tono continuo, pero puedes cambiar una foto con un color de tono continuo en otro color
de tono continuo.

Nota: los seis tipos de transformación mencionados anteriormente son absolutamente


claves para todas las animaciones flash. Ningún otro tipo de transformación es posible
para frames de transición (tweened frames).

Si te fijas en algunos ejemplos de animación en Flash en la web, te darás cuenta de que


casi todas las animaciones utilizan éstos efectos. Los objetos aparecen y desaparecen
(fade in, fade out), se mueven de una posición a otra. A veces los elementos giran, crecen
286 Animaciones en Flash
o se achican. Esta es la base para casi todas las animaciones en Flash, y es muy fácil
producir este tipo de animaciones con MAGIX Web Designer 6.

Es imposible cambiar la forma de un objeto entre frames claves.

Es imposible cambiar la forma de un objeto entre frames claves.

Porque la forma de un objeto cambia, no se puede realizar esta acción en las animaciones
en Flash de MAGIX Web Designer 6.

Lo que no puedes hacer con Flash en MAGIX Web Designer 6


MAGIX Web Designer 6 es principalmente un programa de ilustración vectorial y no está
diseñado para ser una herramienta de Flash integral. En vez, este programa ofrece un
enfoque nuevo e innovador, y de fácil comprensión de las animaciones en Flash. El MAGIX
Web Designer 6 y sus herramientas de dibujo vectoriales, te permiten crear animaciones
en Flash realmente compactas de forma mucho más sencilla y fácil que con otras
aplicaciones.

Debido a su enfoque simplificado, MAGIX Web Designer 6 no es compatible con las


funciones más complejas de Flash como scripting (programación), audio o películas
integradas (embedded movies).

Adicionalmente, como la renderización de vectores en Flash es relativamente primitiva,


comparado con Xara Xtreme, hay algunos efectos avanzados de Xtreme que no pueden
ser utilizados con Flash. Éstos están detallados al final de este capítulo en "¿Qué funciones
de MAGIX Web Designer 6 son compatibles con Flash?".

Principios básicos

En tu animación es probable que tengas algunos objetos que se mantengan estáticos


entre un frame clave y otro, y otros que se muevan.

Para indicarle a MAGIX Web Designer 6 qué objetos quieres animar, debes
colocarle un nombre a cada objeto (con el botón CREAR NUEVOS NOMBRES que
se encuentra en la barra de información de la HERRAMIENTA DE SELECCIÓN ).

Para más información sobre cómo colocarle nombres a los objetos. ver la sección
"Nombrar objetos" en el capítulo "Trabajar con documentos".
Animaciones en Flash 287
Aquí tienes un resumen de los pasos a seguir cuando quieres crear una animación nueva:

1. Primero decide el tamaño de la animación y luego configura el tamaño de página (ver


"Archivo > Opciones de página (en la página 337)").
2. Dibuja tu primer frame. Pónle un nombre a los objetos que desees animar.
3. Crea un frame clave nuevo (para ello copia el frame anterior).
4. Mueve y transforma los objetos según lo desees.
5. Comprueba los resultados en la vista previa.
6. Repite los pasos de 3 a 5.

Y así podrás seguir componiendo tu animación.

El botón Copiar frame de la barra de botones para animaciones.

MAGIX Web Designer 6 crea un frame clave nuevo con sólo pulsar un botón (básicamente
lo que hace es copiar el frame anterior). La GALERÍA DE FRAMES te permite ver cualquier
frame clave y puedes ajustar el orden y el tiempo de duración de los frames. La GALERÍA
DE FRAMES se explica en detalle más adelante en este capítulo.

Para aquellos que estén familiarizados con las funciones animadas de GIF en el MAGIX
Web Designer 6 (o sus predecesores) todo este proceso les va a ser familiar. La diferencia
es que con los archivos en Flash el MAGIX Web Designer 6 puede crear automáticamente
todos los pasos intermedios (tween steps) para producir animaciones más fluidas y
compactas que las animaciones GIF.

Nota: debes introducirle un nombre a los objetos que quieras animar entre un frame
clave y otro. Todos los otros objetos se mantendrán visibles pero estáticos por el tiempo
de duración del frame hasta que aparezca el próximo frame. Para borrar un objeto de una
animación, bórralo sólo en el primer frame clave en el que no quieres que aparezca.

Tu primera animación

Para crear una nueva animación

Crea un nuevo documento de animación. Para esto:

Selecciona ARCHIVO > NUEVA > ANIMACIÓN ("Ctrl + ×+ N").

Se abrirá un nuevo documento y verás la barra de botones para animaciones que incluye
algunos botones relevantes para la animación.
288 Animaciones en Flash
1. Dibuja una forma simple, por ejemplo un rectángulo redondeado, con la
herramienta de rectángulo (pero puede tener cualquier forma).
2. Haz clic sobre el icono APLICAR NOMBRE en la barra de información de la
HERRAMIENTA DE SELECCIÓN y ponle el nombre "forma".
3. Haz clic sobre el botón COPIAR FRAME para crear un segundo frame clave.
Modifica la forma según lo desees. Puedes ajustarla utilizando cualquiera de
las seis formas de animación descritas anteriormente en este capítulo.
4. Pulsa el botón de VISTA PREVIA DE ANIMACIÓN FLASH para visualizar la
animación.

Por defecto, el tiempo de duración de cada frame clave dura medio segundo. Para
producir una animación más larga, ve a la sección "Duración de frames para película Flash
y pasos intermedios", que se encuentra más adelante en este capítulo.

No estás limitado a incluir un solo objeto en movimiento por frame clave, puedes tener
todos los objetos que quieras en cada frame clave. Sólo tienen que pasar por algún tipo
de transformación en el siguiente frame clave (y todos tienen que tener un nombre) para
que sean animados.

Aquí te mostramos otro ejemplo.

El primer frame clave tiene algo de texto simple y una forma simple dentro de un rectángulo
estático.

En el siguiente frame clave, el texto se ha ampliado y oscurecido, el rectángulo azul se ha girado


90 grados y la transparencia se ha alternado para ser en la mayor parte transparente.

Así es como se construye una animación.


Animaciones en Flash 289

Frame clave 1

Pasos intermedios producidos


por MAGIX Web Designer 6

Frame clave 2

En esta animación, el objeto de texto crece y simultáneamente el rectángulo redondeado gira y


desaparece.

Exportación de un archivo Flash

Para exportar una animación como archivo Flash:

Selecciona ARCHIVO > EXPORTAR ANIMACIÓN y luego escoge Flash en GUARDAR COMO
TIPO .

O pulsa el botón EXPORTAR FLASH ANIMADO .

Con esto el archivo SWF acabado se guardará en la ubicación indicada.

Vista previa de un objeto flash en MAGIX Web Designer 6.


Para visualizar la animación tal como se verá en la página web, haz clic en el
botón de VISTA PREVIA DE ANIMACIÓN FLASH y se abrirá un navegador con la vista
previa de la animación.

La página de vista previa te mostrará la animación final e información útil como las
dimensiones de la animación, tamaño del documento, etc. También incluye instrucciones
simples sobre cómo insertar la animación en una página web.

Inserción de un objeto flash en MAGIX Web Designer 6.


Para aquellos que utilicen MAGIX Web Designer 6 puedes arrastrar el archivo Flash hasta
la página web para insertarlo en el sitio web. Se creará automáticamente una imagen
290 Animaciones en Flash
estática de marcador de posición y se colocará en tu página. Haz una vista previa de tu
página web y verás la animación Flash en funcionamiento.

Como alternativa, puedes crear un objeto de marcador de posición de forma manual. En tu


página web, crea un objeto marcador del lugar, puede ser algo como un simple rectángulo
o una imagen. Posiciona y ajusta el tamaño de tu marcador de lugar

A continuación, en el diálogo de PROPIEDADES WEB (Ctrl+Shift+W), selecciona la pestaña


MARCADOR DE LUGAR y las opciones de navegación REEMPLAZAR CON FLASH para localizar
el archivo .SWF requerido. Haz clic en APLICAR .

Ahora, cuando realices la vista previa de tu página web, el marcador de lugar es


reemplazado por la animación flash.

Con cualquiera de las opciones mencionadas anteriormente, el archivo .swf se copia en la


carpeta de soporte junto con tu archivo .xar, de forma que haya una copia del archivo con
el archivo .xar. Por lo tanto, si luego cambias la animación y exportas un archivo .swf
actualizado que quieras utilizar en su lugar, o bien busca el nuevo archivo .swf con
Herramientas > Propiedades web > Pestaña Marcador de posición o reemplaza
manualmente el archivo en la carpeta de soporte con el archivo actualizado.

Consulta la sección Carpetas de soporte (en la página 76) del capítulo Trabajar con
documentos para más información.

Inserción con otra herramienta de autoría web


Para posicionar tu animación SWF en tu HTML, haz clic en el enlace VER HTML en la
pantalla de vista previa de flash para obtener el código que luego puedes pegar en tu
página web con ayuda de tu editor HTML preferido.
Nota: Debes cambiarle el nombre al archivo SWF en el código para que coincida con el
nombre actual de tu archivo exportado SWF. También debes colocar tu archivo SWF en el
mismo directorio de tu página web para que funcione tu código. Si deseas colocar el
archivo SWF en otro directorio, deberás cambiar el código HTML.

La galería de frames

Para abrir la GALERÍA DE FRAMES , selecciona "HERRAMIENTAS > GALERÍAS >


GALERÍA DE FRAMES" , o haz clic en el ícono de la GALERÍA DE FRAMES en la barra
de herramientas de las GALERÍAS .
Animaciones en Flash 291

Una galería de frames típica. El frame 3 está seleccionado y por eso está visible.

Este muestra una lista de los frames claves en tu documento. Para visualizar cualquier
frame clave, haz clic sobre su nombre en la galería.

La GALERÍA DE FRAMES muestra los frames de arriba hacia abajo. El primer frame está
primero en la lista y cada frame que añadas aparecerá al final de la lista. Puedes
re-ordenar los frames arrastrándolos hacia la posición que desees en la lista. La galería
tiene varios botones para realizar las operaciones más importantes como crear un frame
nuevo, borrar o copiar un frame seleccionado (éste será agregado al final).

El orden de los frames es inverso al orden de las versiones anteriores del Web Designer.

El botón PROPIEDADES es muy importante ya que muestra el diálogo de las PROPIEDADES


DE ANIMACIÓN ,que controla muchos aspectos, no sólo de la animación seleccionada, sino
que también de la animación completa.
292 Animaciones en Flash

Diálogo de las propiedades de animación

Otra forma de visualizar el diálogo de las propiedades de la animación es hacer doble clic
sobre el nombre de un frame en la galería de frames.

Los botones TODOS LOS FRAMES VISIBLES (ícono de un ojo) y EDITAR


TODOS LOS FRAMES (flecha), que se encuentran en la galería de frames son
muy útiles porque te permiten visualizar o editar todos los frames al mismo
tiempo.
Esto es particularmente práctico para cuando quieras seleccionar objetos que se
encuentran en varios frames.

Nota: cuando copies un frame, siempre copiará el frame seleccionado y lo colocará


como último frame. Para insertar un frame nuevo entre, por ejemplo, el frame 4 y el 5,
selecciona el frame 4, haz clic en el botón COPIAR , y luego arrastra la nueva copia desde el
final a la posición deseada entre los frames 4 y 5.

Nota: Puedes elegir el nombre que quieras para los frames. No tienen que llamarse Frame
1, Frame 2, etc. Las animaciones siempre se reproducirán siguiendo el orden de los
frames de arriba hacia abajo, no importa qué nombre tengan.

Copiar objetos
Puedes copiar objetos de un frame a otro de la forma usual (copia el contenido, selecciona
el nuevo frame y luego pégalo al nuevo frame). La opción "Editar > Pegar en lugar" ("Ctrl +
× + V") es muy práctica para cuando quieras ejecutar esta acción, ya que siempre se
pegarán los objetos en la misma posición que el lugar de donde los copiaste pero en el
nuevo frame.
Animaciones en Flash 293
Cuando copias un objeto, el nombre se copia junto a él, pero asegúrate de que no haya
otro objeto con el mismo nombre porque sino surgirán errores.

Fotos

Como los documentos en Flash están compuestos por formas vectoriales, y éstos se
transforman fácilmente, los documentos pueden ser muy pequeños. Se pueden integrar
fotos y mapas de bits a las animaciones en Flash, pero al menos que seas especialmente
cuidadoso se convertirán en documentos de animación muy grandes. Puedes realizar 5 de
las 6 transformaciones centrales sobre mapas de bits y fotos (puedes mover los objetos,
cambiarles el tamaño, aplastarlos, rotarlos y hacerlos desaparecer).

Los documentos en Flash pueden incluir imágenes en PNG y JPEG, tal como los
documentos .xar. Si mantienes el tamaño y la resolución bajas podrás crear animaciones
pequeñas en Flash con fotos. La mejor forma de incorporar fotos en JPEG con el tamaño
más pequeño posible y con la compresión más alta que puedas aceptar.

Afortunadamente es fácil guardar imágenes en JPEG desde el MAGIX Web Designer 6 en


el tamaño, resolución y con la compresión que desees, y hasta tienes una vista previa
interactiva en la que podrás ajustar la compresión y ver el resultado de forma inmediata.

Si sueltas un documento JPEG sobre la animación y le cambias el tamaño, esto no


reducirá el tamaño del documento en JPEG, sino que se reducirán sus dimensiones (y por
ende se incrementará la resolución). En este respecto el programa Flash se comporta tal
como el MAGIX Web Designer 6 ya que integra (embed) la resolución total de la imagen
JPEG original a la animación para que puedas acercarte a ella con el zoom. Por esta razón
es muy fácil calcular el tamaño estimado de cualquier animación que contenga fotos en
JPEG; es aproximadamente la suma de los tamaños de todas las imágenes JPEG
integradas a la animación (la GALERÍA DE MAPA DE BITS te mostrará el tamaño de todas las
fotos y mapas de bits integrados a la animación).

Cuando realices una transición (tweening) para los mapas de bits o para una foto, sólo se
guarda una copia del mapa de bits en el documento en Flash, por lo que puedes hacer
transformaciones en un mapa de bits que no requieran mucha memoria. En otras
palabras, sólo porque aparezcan el mapa de bits en los frames 1, 2 y 3 de tu animación,
esto no quiere decir que existan tres copias del mapa de bits integrados al documento en
Flash.

Mapas de bits en otros formatos que el JPEG


Hay otros tipos de formatos de mapas de bits como, por ejemplo, los formatos BMP, TIFF
o PNG que en general generan documentos más grandes y por ende menos adecuados
para usarlos en las animaciones en Flash (la compresión JPEG es mucho mejor que la
PNG). Sin embargo, si incluyes una imagen PNG de baja resolución (una imagen de 96 dpi
o menos - la línea de estado te muestra la resolución de cualquier imagen seleccionada),
permanecerá como imagen PNG en el archivo flash. Las imágenes con una resolución
más alta (>96 dpi) serán convertidas a JPEG (JPEG transparente, si fuera necesario).

Puedes controlar la compresión utilizada para la conversión automática a JPEG si utilizas la


barra deslizante de la pestaña OPCIONES FLASH en el diálogo de PROPIEDADES DE
294 Animaciones en Flash
ANIMACIÓN . El valor de compresión más común es de un 75% pero puedes modificar la
calidad, luego visualizar la animación en una vista previa y rápidamente ver el tamaño y la
calidad que hayas guardado.

Los mapas de bits con 256 colores o menos (como los GIF) no se codifican como JPEG y
se integran a la animación utilizando una compresión PNG, que usualmente es la mejor
tipo de compresión para este tipo de imágenes.

Calidad de mapas de bits


El programa Flash Player versión 8 y las versiones siguientes tienen una calidad más alta
de visualización de los mapas de bits. Es particularmente evidente cuando rotas y cambias
el tamaño de los mapas de bits y las fotos, mientras que en las versiones más viejas se
reproducen las imágenes de forma pixelada y con movimientos menos fluidos.

Puedes ver qué versión tienes del Flash Player si haces un clic derecho sobre cualquier
animación en tu navegador web y mira el menú "Acerca de" (About).

Te recomendamos que exportes tu animación en Flash como versión 8 si estás utilizando


fotos o mapas de bits. Puedes controlar esto en la pestaña OPCIONES FLASH del diálogo
de PROPIEDADES DE LA ANIMACIÓN.

Duración de frames para películas Flash y pasos


intermedios" (Movie frame rate and tween steps)

Las animaciones en Flash se reproducen a un ritmo prefijado. Cuánto más rápido sea el
ritmo (frame rate o duración de cada frame) de los frames, mejor fluirá la animación aunque
Animaciones en Flash 295
el archivo en Flash será más grande. Las animaciones de MAGIX Web Designer 6 tienen
por defecto 24 frames por segundo pero puedes cambiar el ritmo si quieres.

Cuando creas un nuevo frame clave, puedes determinar el tiempo de duración entre un
frame y el siguiente. Por ejemplo, si has definido como tiempo de duración de un frame a
medio segundo, esto significa que la animación tardará medio segundo en pasar de un
frame clave a otro. Si tienes el ritmo de la animación prefijado a 24 frames por segundo,
esto quiere decir que el MAGIX Web Designer 6 generará 11 pasos intermedios en la
animación en Flash; que son 12 frames en total. (Estos frames intermedios nunca serán
vistos en MAGIX Web Designer 6 ya que sólo se generan cuando creas un archivo Flash).

La galería de frames siempre te mostrará el tiempo de duración de cada frame clave. En


este ejemplo, tenemos tres frames con un tiempo de duración de 0,5 segundos para cada
uno, es decir, la animación completa dura 1.5 segundos antes de que se vuelva a repetir.

Para crear un efecto de transición (tween effect) más largo (en otras palabras, hacer la
animación más lenta) tienes que incrementar el tiempo de duración utilizando el diálogo de
PROPIEDADES DE ANIMACIÓN .

La forma más fácil de modificar el tiempo de duración de cualquier frame es hacer doble
clic sobre el nombre del frame que quieres cambiar, y se abrirá el diálogo. Introduce el
tiempo de duración en segundos que tu quieras y pulsa Aceptar o Aplicar.
296 Animaciones en Flash

Recortar y cortar

Quizás más adelante quieres crear animaciones en Flash como las que se pueden ver en
la web, con frases o fotos que se muevan de un lado a otro.

Para crear un animación como esta, tienes que cambiar el tamaño de la página en MAGIX
Web Designer 6 al tamaño que deseas tener para la animación en Flash. Por ejemplo, si
quieres un banner en Flash que tenga 468 píxeles de ancho y 60 píxeles de alto, tienes
que ajustar el tamaño de la página de tu documento de animación a 468x60. Para cambiar
el tamaño de la página ve a PESTAÑA DE PÁGINA en el DIÁLOGO DE OPCIONES (en la página
337) (o selecciona "ARCHIVO -> OPCIONES DE PÁGINA" ) e introduce los valores en los
campos "ancho" y "alto" respectivamente.

Cuando exportas o realizas una visualización previa, la animación en Flash se ajustará


automáticamente al tamaño de la página que ya habías determinado. Por ello, es muy fácil
arreglar tu animación para que los objetos entren y salgan de la animación visible. Por
ejemplo, si colocas un objeto animado a la izquierda de la página en un frame clave (key
frame) y a la derecha de la página en el próximo frame clave, el objeto se verá entrar del
lado izquierdo del diseño para desaparecer por el lado derecho.

Nota: Si abres documentos más antiguos creados con versiones anteriores de Xara
Xtreme, no cortarán la página (el tamaño de la página era enorme), en vez de ello los
cortarán al tamaño del dibujo. Puedes controlar esto en el diálogo de propiedades de
animación.
Animaciones en Flash 297
Configurando el área para guardar como Dibujo creará una animación flash que sólo sea
tan grande como debe ser, por ejemplo de igual tamaño que los límites de la animación.
Esto puede ser útil si no necesitas un tamaño de página específico.

Velocidad de la animación

Cuando crees un nuevo frame clave, tendrá por defecto una duración de medio segundo.
Por lo tanto la animación de ese frame clave al siguiente tardará medio segundo. Cuanto
más larga sea la duración configurada para la animación, más lenta será su reproducción.
Para configurar el tiempo de duración para cada frame, primero selecciona el frame que
necesitas en la GALERÍA DE FRAMES (haz clic sobre él), y luego haz clic sobre el botón de
PROPIEDADES DE ANIMACIÓN (simplemente haz doble clic sobre el nombre del frame).

Si configuras la opción "Mostrar este frame por" a 2 segundos, significa que la animación tardará
2 segundos en pasar de este frame clave al siguiente.

Nota: el diálogo de PROPIEDADES DE ANIMACIÓN es del tipo no modal (non-modal), lo


puedes tener siempre presente en la pantalla. Si presionas el botón APLICAR en lugar de
pulsar "Aceptar", el diálogo se quedará en pantalla. Los contenidos serán actualizados a
medida que vayas seleccionando los diferentes frames, y puedes configurar distintos
tiempos de duración para cada uno de ellos.
298 Animaciones en Flash

Fluidez de la animación (smoothness)

Los frames de las películas de Flash se reproducen a un ritmo constante. Cuanto más
rápido sea el ritmo de reproducción (frame rate), más fluida será la animación. Las
animaciones de MAGIX Web Designer 6 tienen por defecto 24 frames por segundo. Para
cambiar el ritmo selecciona la pestaña OPCIONES FLASH del diálogo de PROPIEDADES DE
ANIMACIÓN .

La pestaña "opciones Flash" en donde puedes cambiar la velocidad de la película, así como
también la versión de la exportación en Flash.

Nota: cuanto más rápido sea el ritmo (frame rate) del frame, más grande será el archivo
resultante en Flash. Si tu animación consiste mayormente en objetos que aparecen y
desaparecen, con relativamente pocos movimientos rápidos, entonces puedes reducir el
tiempo de duración a menos de 24 frames por segundo. Si tienes mucha acción con
movimientos rápidos, quizás sea necesario aumentar el ritmo, pero raramente es necesario
tener más de 50 frames por segundo.

Rotación

MAGIX Web Designer 6 genera los frames intermedios (tween frames) de forma
automática, haciendo un cálculo de cómo deben transformarse las formas de un frame al
otro. Pero a veces no es posible saber exactamente qué tipo de rotación es necesaria.
Animaciones en Flash 299
Como en este caso. Supone que quieres
crear una transición (tween) entre la
primera cara del reloj y la segunda:

Seguramente esperas que las agujas se


muevan en dirección a las agujas del reloj
pero también podrían moverse en sentido
contrario:

Es más, incluso podrían rotar de otras formas también. El


ejemplo de arriba asume que la aguja se mueve de un extremo
a otro, pero también podrías crear una rotación que vaya en
"línea recta", (ver gráfico):

Si miras detenidamente, la aguja rota sobre su centro y no de un extremo a otro, y el punto


central se mueve en línea recta de un frame clave al siguiente. Por defecto el MAGIX Web
Designer 6 hace rotar a los objetos de esta forma.

La función de rotación
Para que la rotación sea sobre otro punto puedes añadir la palabra clave "rotar" enfrente
del nombre del objeto (ver abajo en Galería de nombres). O puedes usar la combinación
"rotar +" para hacer que la rotación vaya en dirección a las agujas del reloj o introducir la
combinación "rotar -" para que vaya en contra de las agujas del reloj.

Vuelve al ejemplo de animación de la página anterior con dos frames claves en donde la
aguja del reloj se mueve de las 12 a las 8. Si introduces la combinación de palabras "rotar
+ aguja" al objeto aguja, harás que la animación mueva la aguja en dirección a las agujas
del reloj (como en un reloj real). En cambio, si le colocas lacombinación de palabras "rotar -
aguja", ésta se moverá en dirección contraria a las agujas del reloj.

Si no has insertado un comando especial para la rotación, entonces se generará un


movimiento de transición (tween) con el trayecto más corto entre los objetos de un frame a
otro (rotando sobre el centro). Si introduces un comando de rotación para el objeto con
nombre, se calculará el punto de rotación necesario para generar la animación.

Nota: no es posible rotar un objeto 360° entre frames claves si el punto de rotación no se
encuentra en el centro. Por ejemplo, para crear una rotación "completa" (que dé toda la
300 Animaciones en Flash
vuelta) de las agujas del reloj en el ejemplo de arriba deberías crear un frame clave
intermedio.

Grupos

Los grupos son tratados de forma especial por el programa cuando se crean animaciones.
Para que no tengas que asignarle un nombre a cada parte individual de un grupo, puedes
colocarle un nombre a todo el grupo, luego podrás copiar el grupo al frame clave siguiente.
MAGIX Web Designer 6 animará el grupo completo de un frame clave a otro. Y podrás
aplicar las transformaciones normales al grupo (como cambiar el tamaño, rotar, aplastar
pero no podrás crear una transparencia para el grupo; ver próxima página).

Si quieres que algunos miembros del grupo se muevan de forma diferente que el resto del
grupo, entonces estos objetos deberán tener un nombre distinto ("Ctrl + haz clic para
seleccionar un objeto dentro del grupo, y luego colócale un nombre).

Nota: Si quieres realizar cambios a algunos componentes del grupo, primero tendrás que
"desagrupar" el grupo, y luego tienes que re-agrupar los objetos nuevamente:

• debes volver a aplicar el nombre al nuevo grupo (selecciona el grupo, luego haz doble
clic sobre el nombre en la GALERÍA DE NOMBRE ).
• No debes cambiar el orden de los ítems del grupo.
• No debes añadir o quitar ítems del grupo.

Transparencia en un grupo
Si quieres que un objeto agrupado se vaya desvaneciendo en la animación, debes aplicarle
una transparencia a cada objeto del grupo individualmente. Hay dos formas de hacer esto:

• Selecciona cada objeto del grupo y ajusta su transparencia.


• O desactiva la opción HACER GRUPOS TRANSPARENTES EN SU CONJUNTO en el diálogo
de OPCIONES ("Herramientas > Opciones, luego ve a la pestaña GENERAL . Si haces esto,
cuando ajustes la transparencia del grupo en conjunto, MAGIX Web Designer 6 aplicará
la transparencia a cada ítem individual del grupo, en lugar de realizar una transparencia
a todo el grupo en su conjunto.

¿Qué funciones de MAGIX Web Designer 6 son compatibles


con Flash?
La renderización de vectores en Flash es relativamente primitiva, comparada con la del
MAGIX Web Designer 6. Por esta razón, no podrás usar las funciones más avanzadas de
MAGIX Web Designer 6 como difuminación (feathering), transparencias complejas y tipos
de rellenos o sombras suaves. Las líneas (pinceladas) sólo podrán tener un grosor simple y
constante, y con extremos redondeados. No se pueden usar líneas con guiones. El grosor
mínimo para una línea es de un píxel. Las líneas que sean más finas en MAGIX Web
Designer 6 serán representadas en Flash como si tuvieran un píxel de grosor.
Animaciones en Flash 301
Hay dos aspectos a tener en cuenta para cuando realices dibujos que sean compatibles
con Flash. Primero, debes limitarte a utilizar sólo aquellas funciones que sean compatibles
con el Flash Player. Segundo, cuando crees animaciones sólo podrás utilizar una serie
limitada de características a las que se le puedan agregar transiciones (tweens) o a que
puedan ser animadas.

Las funciones de dibujo de MAGIX Web Designer 6 que son compatibles con flash :

• Todos los dibujos normales con líneas y formas (aunque el flash es mucho menos
preciso que MAGIX Web Designer 6, por eso, a veces, habrán inexactitudes en líneas y
formas).
• Los rellenos lisos, lineales, circulares y los rellenos elípticos con gradación de color.
• Rellenos con gradaciones de color de varios niveles, incluyendo rellenos lineales y
elípticos. Máximo cuatro fases de color.
• Transparencia plana. Sólo tipo mixto.
• La transparencia con gradación es compatible con los objetos con relleno de color
plano (sin gradación). Es decir, puedes tener objetos con gradación de color y con
transparencia lisa u objetos con color liso y con transparencia con gradación, pero no
podrás tener ambos.
• Contornos de grosor constante (trazos de pincel) con extremos redondeados y uniones
de línea (los archivos en Flash versión 8 también aceptan otros tipos de extremos y
uniones).
• Texto, incluyendo kerning. Puedes utilizar las fuentes que desees. Los contornos de los
caracteres de cualquier fuente utilizada se integran (embedded) al archivo en Flash. Esto
es mucho más eficiente que la integración de la fuente en los documentos en PDF.
• Texto sobre una curva. Nota: la línea utilizada para la curva deberá hacerse invisible para
que la animación funcione.
• Mapas de bits y rellenos de mapas de bits.
• Mapas de bits Contoned (coloreados) y rellenos de mapas de bits
• Saturación foto, temperatura del color y desenfoque (pero no brillo / cambios de
contraste).
• Nubes fractales y rellenos de plasma funcionarán, pero se convertirán en mapas de bits,
lo que no es tan eficiente.

Entonces, mientras algunos efectos de MAGIX Web Designer 6 como, por ejemplo, las
sombras blandas, no funcionan en archivos estáticos, éstos se exportan como mapas de
bits al archivo flash, de modo que no son muy eficientes y no son adecuados para la
animación.

Lo que puede animarse:

Tal como se mencionó al comienzo de este capítulo, éstas son las reglas de oro sobre lo
que se puede cambiar de un frame clave al otro:

• Mover: desplazar los objetos de una posición a otra.


• Modificar tamaño (scale): aumentar o reducir el tamaño de los objetos.
• Aplastar o torcer (squash or skew): aplastar o torcer objetos.
• Girar: rotar objetos
• Transparencia: ajustar la transparencia general (plana) del objeto.
• Transformar color: cambiar el color de relleno (plano) de los objetos.
• O cualquier combinación de lo anterior.
302 Animaciones en Flash
Adicionalmente, hay determinados casos especiales de transformaciones de color de foto
que son compatibles con flash. Puedes alterar la saturación (así puedes convertir una foto
de color completo a una foto en blanco y negro para insertarla), además puedes ajustar el
color de la temperatura (caliente / frío) y cambiar el valor de desenfoque. El último caso te
permite convertir una foto desenfocada en una foto enfocada. Pero observa que esto sólo
funciona con valores de desenfoque, pero no funciona con valores de enfoque. Asimismo,
existe una pequeña diferencia en cómo flash desenfoca las fotos. Flash desenfoca la foto
completa incluyendo el borde, mientras que el desenfoque en MAGIX Web Designer 6 sólo
desenfoca el interior de la foto y mantiene un borde enfocado.

En segundo lugar, otro caso especial: puedes animar el texto en una curva. Esto es
especial porque puede utilizarse para mutar el texto sobre una curva en un texto sobre
otra curva totalmente diferente. De hecho, lo que hace es mezclar la posición de la letra en
un frame clave con la posición de la letra en el próximo frame. Esto puede producir efectos
muy interesantes.

Nota: la línea utilizada para la curva deberá hacerse invisible para que la animación
funcione.

Objetos sin movimiento


Puedes añadir nuevos objetos simplemente dibujándolos sobre cualquier frame clave.
Estos aparecerán en la animación al comienzo del frame y desaparecerán en el próximo,
salvo que aparezcan también en el segundo frame. Por lo tanto, la forma más fácil de que
un objeto aparezca estático en todos los frames es asegurarse de que esté copiado en
todos los frames. La optimización Flash de MAGIX Web Designer 6 es muy eficiente y
verás que realizar más de una copia casi no ocupa espacio adicional en el archivo (esto es
aplicable para múltiples copias de objetos en diversos lugares).

El color se transforma — el color de la animación cambia

Esto es lo que puedes y no puedes hacer con las transformaciones de color en MAGIX
Web Designer 6 Flash:

• Puedes animar simples cambios de color plano de objetos de un frame clave al


siguiente.
• Puedes cambiar el color de la línea independientemente del color del relleno.
• Puedes cambiar los colores de tono continuo de una foto.
• No puedes ajustar la posición de los rellenos con gradación.
Animaciones en Flash 303

Transparencia

Tal como se mencionó anteriormente, puedes ajustar la transparencia plana de los objetos
(no las transparencias de grupo), lo que es compatible con Flash (tanto para objetos
estáticos como para cambios de transparencia tweening), pero la transparencia con
gradación de MAGIX Web Designer 6 no es realmente compatible con Flash. Existe una
sola situación en la que puedes utilizar transparencia con gradación y esta es en los
objetos con relleno de color plano.

Se puede ajustar y animar la transparencia plana de todo tipo de objetos, formas, textos y fotos.

Es posible aplicar una transparencia con gradación (lineal, circular y elíptica) a los objetos con
color plano, pero no es posible animar el cambio de transparencia. Sin embargo, puede
animarse el cambio de color (regla seis).

URL en Flash

Para que un objeto en la animación Flash sea un enlace en el que pueda hacerse clic,
simplemente selecciona el objeto que quieras utilizar y selecciona HERRAMIENTAS ->
PROPIEDADES WEB (Ctrl + ñ+ W).

Introduce la URL requerida. (Si quieres que el enlace se abra en una nueva ventana o en
un nuevo frame del navegador, selecciona el frame web de destino seleccionando el menú
desplegable "ABRIR ENLACE EN ").

Si quieres que pueda hacerse clic sobre un texto, selecciona la opción RECTÁNGULO
RODEANDO OBJETO . Esto garantiza que aquellos que observan la animación Flash puedan
304 Animaciones en Flash
hacer clic en cualquier lugar sobre el texto (en vez de solamente sobre la forma real de la
letra).

Permitir clic en toda la animación


En la pestaña PROPIEDADES DE ANIMACIÓN -> OPCIONES FLASH puedes configurar que en
una URL se aplique la animación completa. Esto es de gran ayuda para los banner
publicitarios, ya que en éstos quieres que se permita hacer clic en cualquier parte de una
animación para ir a la dirección web sugerida.

clicTAG
Los clicTAG son utilizados con frecuencia por redes de publicidad. En vez de codificar una
URL en una animación Flash, el clicTAG permite a una organización insertar su propia URL
en la animación, lo que es particularmente útil para rastrear clics de publicidad.

Si necesitas utilizar esta característica, simplemente escribe clicTAG en vez de una URL.

Funciones de Flash avanzadas

Acelerar y desacelerar
En general, los pasos tween están separados en intervalos regulares entre los frame
claves, produciendo una animación lineal de un frame clave al otro. Al añadir los símbolos
< y > adelante del nombre de objeto, puedes hacer que la velocidad de los objetos se
acelere o desacelere. Es decir, que nombrar a un objeto >Nombre significa que comenzará
rápido y después irá más lento. Lo opuesto, <Nombre, hará que la animación comience
lento y se acelere.

Hasta puedes usarlos en combinación. Si el nombre de un objeto es <>Nombre, el objeto


comenzará lento, irá más rápido y volverá a ir más lento hacia el final del periodo del frame.
La terminología tradicional de animación denomina esto "easing" porque puedes entrar
("ease in") o salir ("ease out") con facilidad, y la orden <> sería un "ease in/out".

Puedes controlar el grado de aceleración o desaceleración utilizando números del 0 al 9.


Esto significa que <2Nombre será una aceleración muy lenta, mientras que <9Nombre
será una aceleración extrema. De la misma forma >2 delante del nombre resultará en una
desaceleración. Usar el nombre >Nombre (sin número) es lo mismo que >5Nombre.

Ejemplo: en la sección Ejemplos Flash de la GALERÍA DE DISEÑOS (haz clic sobre el botón
OBTENER DISEÑOS de la GALERÍA CLIPART ) hay un archivo de ejemplo llamado Péndulo. El
grupo del péndulo utiliza una combinación de <> y la función de giro. También vale la pena
examinar el otro ejemplo llamado "Zoom6.xar".

Funciones Detener e Ir a
Puedes añadir las funciones DETENER o IR A al nombre del frame (separado por un punto y
coma) para controlar el flujo de la secuencia. Por ejemplo, si tu primer frame se llama
"Frame 1;Ir a Frame 6", entonces la secuencia de la animación saltará al frame 6 al inicio
del frame 1. Esto puede producir errores de tween, pero pueden ignorarse. También
espera el periodo específico del frame con la función IR A antes de saltar, pero los frames
con las funciones IR A o DETENER no realizan tween.
Animaciones en Flash 305
De la misma manera, un nombre de frame con DETENER al final del nombre, interrumpirá la
animación cuando llegue a ese frame. ¿Por qué esto es útil? Porque puedes hacer que la
animación salte a cualquier otro frame clave con un clic o moviendo el ratón por encima de
objetos. Por ejemplo, puede que tengas una animación que espera a que el usuario le
haga clic o mueva el ratón sobre un objeto antes de continuar.

Botones que permiten clic y efectos de MouseOver


Puedes hacer que la secuencia de animación salte a cualquier otro frame clave haciendo
clic en un objeto o simplemente moviendo el ratón por encima de cualquier objeto.

Para hacer esto, selecciona el objeto que quieras usar como disparador, abre el diálogo de
PROPIEDADES WEB (Ctrl+Shift+W) y en la pestaña ENLACE selecciona la opción SALTAR A
FRAME .

Si quieres que el salto ocurra simplemente moviendo el cursor sobre un objeto, selecciona la
pestaña MouseOver en lugar de la pestaña Enlace y selecciona de la opción similar "SALTAR A
FRAME ".

Ahora en tu animación, si haces clic en el objeto o pasas el cursor del ratón por encima, la
animación llevará al nuevo frame y seguirá desde ahí. Fíjate en el ejemplo del archivo "Río
Támesis" en la GALERÍA CLIPART . Esto utiliza una función Ir a para crear un loop del frame 4
306 Animaciones en Flash
al 3 y una redirección URL del frame 1 si haces clic sobre el enlace Volver a reproducir de
la esquina.

"Ctrl +×+ W" es una forma rápida de abrir el diálogo de Propiedades Web.

Resumen de animación de MAGIX Web Designer 6 Flash

• Los frame claves de MAGIX Web Designer 6 son "instantáneas" de tu animación en un


momento determinado. MAGIX Web Designer 6 produce automáticamente un transición
o tween de objetos de un frame clave al siguiente para producir una animación Flash
fluida.
• No existe una línea de tiempo. Por lo contrario, la GALERÍA DE FRAMES te muestra
tus frames claves instantáneos en el tiempo (de arriba hacia abajo). Haz clic sobre el
nombre del frame para ver y editar ese frame clave.
• Si configuras la visualización de frames en MAGIX Web Designer 6 en 2 seg., entonces
animar objetos llevará 2 segundos desde su posición al inicio de un frame clave a la
posición de inicio del siguiente frame clave. Utiliza el diálogo PROPIEDADES DE
ANIMACIÓN para configurar el tiempo de visualización del frame.
• Para indicar a MAGIX Web Designer 6 los objetos a los que debe aplicarse la transición
o tween entre un frame y el siguiente, debes nombrar el objeto que deseas
utilizar; para cada objeto nuevo que quieres animar, haz clic en el
botón NOMBRES en la barra de información de la herramienta de selección y nómbralo
(o selecciona el menú HERRAMIENTAS> NOMBRES ..). El objeto debe tener exactamente el
mismo nombre que en los frames siguientes.
• Cuando creas un frame clave nuevo (instantánea) , generalmente lo realizas copiando
el frame actual, lo que copia todos los objetos al nuevo frame junto con sus nombres. A
continuación mueve los objetos como corresponda.
• Todos los demás objetos (no nombrados) aparecerán estáticos mientras que dura el
frame clave (periodo de visualización).
• Puedes mover, ampliar, reducir, girar, estirar, alterar los colores o la transparencia entre
los frames de MAGIX Web Designer 6. Transformar los objetos es muy eficiente.
• Existe un frame rate general para toda la película Flash. Cuantos más frames Flash por
segundo, más grande será el archivo Flash y más fluida la animación.
• Como cada frame Xtreme es una instantánea de toda la animación, todos los objetos
que deben aparecer en la instantánea deben también aparecer en el frame. No puedes
hacer una transición de un objeto del Xtreme frame 1 al frame 3 de Xtreme sin que
aparezca en el frame 2.
• Puedes cambiar las formas, el texto o las fotos según lo permiten las seis reglas de
transformación descritas anteriormente (mover, cambiar de tamaño, aplastar/torcer,
rotación, transparencia plana y cambio de color). Si cambias la forma de cualquier otra
manera, esto no funcionará.
• La animación Flash depende de las dimensiones de la página que has especificado en
MAGIX Web Designer 6.
Animaciones en Flash 307

Crear GIF animados

Los GIF animados son una forma alternativa de mostrar secuencias animadas en la web.
Se emplea una tecnología más antigua y mucho más simple que tiene algunas ventajas e
inconvenientes.

Un GIF animado es un archivo GIF que contiene una secuencia de imágenes, como si
fueran frames de una película. Cada MAGIX Web Designer 6 es un frame en la animación
final, como en un folioscopio.

Las ventajas:

• Todos los navegadores pueden reproducir animaciones GIF, no es necesario ningún


plugin adicional como en el caso de las animaciones flash. Esto conlleva tiempos de
carga cortos y un aumento de la compatibilidad de tus páginas.
• La animación GIF se utiliza como imágenes normales, no es necesario ningún código
HTML adicional como al incrustar animaciones flash.

Los inconvenientes:

• En los GIF animados no se pueden insertar transiciones "tween" entre los frames. Esto
significa que los frames de tu animación MAGIX Web Designer 6 se traducen 1:1 a los
frames GIF resultantes. Si quieres tener animaciones fluidas como en flash, tienes que
utilizar numerosos frames.
• GIF es un formato Bitmap y no un formato vectorial como Flash. Produce archivos de
salida mucho más grandes, incluso para formas geométricas o texto.
• La profundidad de color máxima es de 256 colores.
• Las funciones de flash avanzado como el flujo de la secuencia (Detener/Ir a), los vínculos
con URLs o la aceleración no están disponibles.

No obstante, y gracias a su simplicidad, los GIF animados siguen siendo muy popular para
banners publicitarios o como imagen de avatar en foros o mensajes instantáneos.

Abrir un documento de animación


Para crear un GIF animado, primero debes abrir un documento animado. Para realizar
esto, escoge Archivo > Nuevo > Animación. Después tendrás acceso a la galería de
FRAMES .

Crear una animación


Para crear un GIF animado:

1. Escoge Herramientas > Galerías > Galería de frames. O haz clic sobre el símbolo de
la galería de FRAMES en la barra de GALERÍAS .
2. Dibuja lo que quieres que aparezca en el primer frame.
3. En la galería de FRAMES, haz clic en NUEVO para crear el próximo frame.
308 Animaciones en Flash
4. Establece el fondo y los puntos de superposición.
5. Crea los objetos que quieres que aparezcan en este frame.
6. Repite los pasos 3 a 5 hasta haber creado la secuencia de frames.

Exportar la animación
Para guardar la animación, escoge Archivo > Exportar GIF animado.

Propiedades de GIF animados

Para modificar los propiedades de la animación, haz clic sobre un frame en la galería de
FRAMES y selecciona PROPIEDADES . Podrás cambiar las opciones detalladas más adelante.

La pestaña de frames
En la pestaña de FRAME puedes fijar:

• NOMBRE : el nombre de este frame. Esto es un simple recordatorio para ti, puesto que
no se exporta con el GIF animado.
• FONDO : si está establecido, el frame cubrirá todos los frames previos. Esto es útil
cuando quieres crear un fondo y después crear una animación sobre ese fondo. Con
frecuencia, el primer frame de la animación es el frame de fondo. Si el primer frame no
es el frame de fondo, el GIF animado usa el fondo de página como fondo.
• SUPERPOSICIÓN: si esta opción está configurada, el frame se superpondrá con el frame
previo.
• RETARDO LOCAL : establece la duración que el frame tendrá en la animación.
• VER FRAME : si está activado, el frame se mostrará en la animación.

Opciones flash
Aquí hay varias opciones para animaciones flash, la mayoría de los cuales se describen
arriba.

• Enlace que se aplicará a toda la animación (en la página 303)


• Velocidad de vídeo flash (en la página 298)
• Calidad JPEG (en la página 294)
• Área a guardar (en la página 296)
Colores de animación
En la pestaña COLORES DE ANIMACIÓN puedes configurar los colores utilizados en la
animación:

• COLORES DE PALETA: fija los colores de paleta favoritos para el GIF animado.
• CANTIDAD DE COLORES DE PALETA: esta opción está disponible si se utiliza una paleta
optimizada. Para gráficos simples puedes reducir la cantidad de colores de la paleta. De
esta forma se creará un archivo más pequeño sin pérdida de calidad. Es posible que
debas experimentar un poco para encontrar el balance óptimo entre tamaño de archivo
y calidad.
• DITHERING: selecciona uno de los tipos de dithering.
Animaciones en Flash 309
• TRANSPARENCIA: escoge esta opción para que las partes de un mapa de bits que no
contienen objetos se vuelvan transparentes.

Animación: repeticiones y velocidad


En la pestaña ANIMACIÓN puedes modificar la tasa de la animación y la frecuencia:

• LOOP: aquí determinas la cantidad de repeticiones.


• MOSTRAR CADA FRAME DURANTE: introduce aquí un valor cuando quieras obtener una
pausa igual entre cada frame de la animación. Utiliza la pestaña "Frame" para establecer
distintas pausas para frames individuales (descrito anteriormente). Se indicará "Muchos"
cuando la animación contenga más de una duración.

Vista previa en el navegador


Puedes seleccionar opciones adecuadas para los gráficos y después cargarlas en tu
navegador para poder hacer una vista previa:

• OPCIONES DE FONDO : modifica el fondo del GIF animado para ver cuál da el mejor
resultado.
• INFORMACIÓN ADICIONAL : la página de vista previa contendrá información útil como, por
ejemplo, tiempo de descarga potencial si se coloca en una página web.
• VISTA PREVIA: pulsa este botón para lanzar una vista previa en tu navegador web.
310 Imprimiendo

Imprimiendo

Mostrar bordes de impresión

El menú Ventana > Mostrar bordes de impresión muestra una línea amarilla y roja
alrededor de la página (no se imprime) que indica los márgenes y bordes de impresión.
Los límites de la página están señalados con un rectángulo rojo. El área de impresión está
establecida por los márgenes de la impresora seleccionada actualmente. Algunas
impresoras te permiten ajustar los márgenes, pero muy pocas te dejan imprimir hasta el
borde de la página.

Si algún objeto de la página se encuentra fuera del rectángulo rojo, es muy probable que
no se imprima.

Seleccionar y configurar una impresora

Archivo > Configuración de impresora. Esta opción abre el diálogo estándar de


CONFIGURACIÓN DE IMPRESIÓN de Windows:

Al seleccionar una impresora, también se selecciona el tamaño de papel y su orientación.


Ten en cuenta que este es el tamaño y la orientación de las hojas en la impresora. No es lo
mismo que el tamaño/orientación del documento. VERTICAL imprime la hoja sin girarla.
HORIZONTAL imprime girando la hoja 90%. (Estos botones son duplicados del diálogo de
OPCIONES DE IMPRESIÓN , descrito a continuación). Recomendamos no modificar la
configuración por defecto de los botones HORIZONTAL /VERTICAL .

Por favor, ten en cuenta que no podemos darte consejo sobre la instalación o
configuración de impresoras porque estas son operaciones de sistema estándar. Si tienes
dificultades, contacta con el proveedor de tu impresora u ordenador.
Imprimiendo 311
El botón de propiedades
Esto muestra un diálogo que te permite establecer las opciones para el tipo de impresora
seleccionada. MAGIX Web Designer 6 no controla este diálogo.

Botón de red
Si tu ordenador está conectado a una red, este botón te permite compartir impresoras de
la red. MAGIX Web Designer 6 no controla este diálogo.

El diálogo de impresión

Escoge Archivo > Imprimir (shortcut Ctrl+P)

Botón imprimir
Una vez que has seleccionado las opciones requeridas, haz clic para imprimir.

Botón Imprimir...
Esto abre el diálogo de CONFIGURACIÓN DE IMPRESIÓN (descrito anteriormente).

Botón opciones
Esto abre el diálogo que te permite configurar opciones adicionales de impresión. Las
opciones se describen más adelante.
312 Imprimiendo
Páginas
TODAS LAS PÁGINAS: imprime todas las páginas del documento.

PÁGINA/S ACTUAL/ES: imprime la página o doble página actualmente seleccionada.

OBJETOS SELECCIONADOS: Esta opción está disponible si se selecciona cualquier objeto del
documento. Si está activada, sólo se imprimen los objetos seleccionados. Observa que
otros objetos dentro de los límites de los objetos seleccionados no se imprimen, sólo se
imprimen los objetos que estén realmente seleccionados.

Los objetos en las capas del fondo y las capas guía nunca se imprimen. Lee Galería de
capas para más detalles.

RANGO DE PÁGINAS: te permite especificar las páginas que deseas imprimir. Puedes
escribir números de páginas específicos separados por comas, o introducir un rango de
páginas separando los dos números con un guión.

Ejemplos rangos de páginas:

2 sólo imprimirá la página 2.

1,3,5-7 imprimirá las páginas 1, 3, 5, 6 y 7.

2,3,6-8,11-12 imprimirá las páginas 2,3,6,7,8,11 y 12.

La sección Opciones del diálogo te indicará si el rango de páginas que has escrito es
aceptado o no.

Imprimir a archivo
Puedes seleccionar la opción IMPRIMIR A ARCHIVO para crear un documento para entregar
a una imprenta (si pueden aceptar este tipo de archivo).

Después de activar esta opción, al hacer clic sobre IMPRIMIR , Web Designer muestra el
diálogo estándar de Windows para GUARDAR para que puedas especificar un nombre y
una ubicación para el archivo.

Los archivos de impresión tienen una extensión por defecto .prn

Copias
Establece la cantidad de copias del documento que quieres imprimir.
Imprimiendo 313

Opciones de impresión: pestaña Salida

Imprimir capas
Hay dos opciones:

• Imprimir TODAS LAS CAPAS DE PRIMER PLANO .


• Imprimir solamente las CAPAS DE PRIMER PLANO VISIBLES actualmente.

Ten en cuenta que las capas de primer plano se imprimen, mientras que las capas de
fondo nunca se imprimen.

Imprimir como
NORMAL es adecuado para la mayoría de los tipos de documento.

Sin embargo, algunas impresoras no reproducen colores consistentes al imprimir mapas


de bits y objetos vectoriales que tienen el mismo color (este es un fallo del driver de la
impresora). Esto es visible si los objetos se superponen con mapas de bits o con objetos
con transparencia. En este caso, selecciona MAPA DE BITS o MAPA DE BITS ANTI-ALIASED y
vuelve a intentar.

La elección entre mapa de bits y MAPA DE BITS ANTI-ALIASED depende de la impresora y


la preferencia personal. Algunas impresoras dan un mejor resultado cuando el anti-aliasing
está desactivado, especialmente al imprimir líneas delgadas. En general, el uso de
314 Imprimiendo
anti-aliasing permite imprimir con resolución menor. Por ejemplo, la impresión de un mapa
de bits con 150 DPI es generalmente suficiente para todos los usos. Sin anti-aliasing, es
probable que se necesite una resolución más alta lo que resulta en una impresión más
lenta.

Resolución de transparencia
Al imprimir, los efectos de transparencia de MAGIX Web Designer 6 se crean utilizando
mapas de bits.

Esta opción controla la resolución de esos mapas de bits cuando se envían a la impresora.
La opción automática es adecuada para la mayoría de los dibujos y significa que MAGIX
Web Designer 6 selecciona automáticamente una resolución apropiada para la impresora
actual. Esto puede no ser adecuado si se imprime en una impresora con resolución muy
alta como dispositivos imagesetting. En este caso, es posible que quieras controlar la
resolución de forma manual e introducir el valor deseado.

Ten en cuenta que las impresoras modernas muchas veces aseguran poder imprimir más
de 1000 DPI, pero esto no es lo mismo que "píxeles por pulgada", que es lo que ves en tu
pantalla. En general, nunca es necesario imprimir a más de 600 píxeles por pulgada y 300
píxeles por pulgada producen en general resultados de impresión perfectamente
adecuados, especialmente con anti-aliasing.

Calidad de llenado
Si usas esta opción, puedes escoger cuántos pasos conforman los rellenos con gradación
en tu documento al imprimirlo. La configuración NORMAL es adecuada para la mayoría de
los casos. Esta opción no puede activarse en el caso de impresoras PostcScript.

Opciones de texto
Si tu impresora tiene problemas para reproducir fuentes, selecciona la opción IMPRIMIR
TODO EL TEXTO COMO FORMAS . Todo el texto se convertirá en formas vectoriales antes de
que el documento se envíe a la impresora. Esto puede ser más lento, pero reproducirá
exactamente lo que ves en pantalla.
Imprimiendo 315

Opciones de impresión: pestaña "Diseño de la impresión"

Aquí encontrarás una compilación de los efectos más importantes para la optimización de
fotos sacadas, por ejemplo, con tu móvil.

La mayoría de las opciones en el diseño de impresión no pueden activarse si has


seleccionado las opciones OPTIMIZACIÓN o ADAPTACIÓN AUTOMÁTICA . Recomendamos
utilizar estas opciones, porque ofrecen la forma más fácil de imprimir.

Sin embargo, puedes escoger las opciones personalizadas (lee "Individual" más adelante).

Optimización
Tu diseño se moverá al centro de la página y se ampliará o reducirá para adaptarse al
tamaño del papel.

Esta opción es la mejor si tienes un diseño grande o pequeño que quieres adaptar al
tamaño de una página.

Adaptación automática
Tu diseño tendrá la orientación necesaria, pero Web Designer no cambiará el tamaño.
Recomendamos utilizar esta opción si tienes dificultades para encontrar la orientación
correcta (existen al menos cuatro lugares en donde puedes establecer la orientación de la
página, en algunos drivers de impresora todavía más).
316 Imprimiendo
Esta opción es la mejor si has configurado el tamaño para tu diseño y no quieres que se
modifique.

Adaptación personalizada
Te permite controlar la impresión, incluyendo orientación, tamaño y márgenes.

Los botones de ORIENTACIÓN pueden utilizarse para escoger la orientación de la


impresión. La escalación puede modificarse utilizando el campo ESCALA . Los campos de
margen superior e izquierdo pueden cambiarse (esto establece el lugar en que aparece la
esquina superior izquierda de la página en el papel de la impresora).

Los campos ANCHO y ALTURA te ofrecen una forma alternativa de configurar el tamaño de
la impresión (cuando cambias un valor, el otro cambiará también para asegurar que la
página se imprima con una relación de aspecto 100%).

Adaptación múltiple
Para imprimir muchas copias en una página, escoge MÚLTIPLE , introduce un valor para la
cantidad de copias que debe incluir el ancho de la página (hileras) y la cantidad a lo alto de
la página (columnas) y la distancia entre cada uno (margen).
Importación y exportación 317

Importación y exportación

Indicaciones generales sobre la exportación e importación

Web Designer ofrece una amplia gama de opciones de importación y exportación.

Primero, es importante saber la diferencia entre guardar y exportar un archivo:

• GUARDAR almacena tu trabajo para que puedas abrirlo posteriormente y continuar


trabajando con él. MAGIX Web Designer 6 guarda tu trabajo en un archivo de formato
web. Esto sería como el formado de "documento master".
• EXPORTAR convierte a otros formatos compatibles. La exportación te permite utilizar y
distribuir tus diseños.

Formatos recomendados
Los formatos de exportación universal que pueden ser leídos por la mayor parte de
programas y que son utilizados en la web son los formatos de mapas de bits, GIF, PNG y
JPEG. Esto te garantiza que tu documento se verá exactamente igual que en la pantalla de
MAGIX Web Designer 6. PNG se recomienda para gráficos en la web y JPEG para fotos.

Importar y exportar formatos de archivo compatibles

Formatos de importación

Es importante que utilices las extensiones de archivo de tres letras de la lista de abajo
cuando cargues archivos al MAGIX Web Designer 6.

Formatos de importación de mapa de bits

.Mapa de bits Windows BMP


.CUT Halo CUT (256 colores)
.Formato de imagen DCM Imaging and Communications in Medicine (DICOM)
.DCX DCX
.FAX imagen de fax de un fax recibido o creado con un software de fax
.GIF (Graphic Interchange Format)
.ICO Microsoft Windows Icon (16 colores)
.JPG JPEG
Formatos de imagen .JP2, .JPX, .J2C, .J2K, .JPF JPEG 2000. Una versión mejorada del
formato JPEG estándar que puede comprimir archivos de imagen realizando una
compresión con o sin pérdidas.
.HPD, importación .WDP Microsoft Photo HD, también conocido como Windows Media
Photo.
.PBM UNIX monocromo
.PCD PhotoCD
.PCT PICT
318 Importación y exportación
.PCX PCX Paintbrush
.PDF (ver importación de un archivo PDF)
.PGM UNIX escala de grises
.PNG PNG
.PPM UNIX color (hasta 24 bit)
.PSD Photoshop (ver importación y exportación de archivos PSD (en la página 322))
.RAS Sun Raster
.SGI (Silicon Graphics Image)
.TGA TrueVision TARGA
.TIF TIFF (RGB, RGBA con transparencias de canal alfa & CMYK)
El MAGIX Web Designer 6 es compatible con archivos TIFF de fax (imágenes en blanco y
negro. Los faxes con muchas páginas serán importados como páginas múltiples); archivos
TIFF con orden de bytes para Mac o PC; TIFF con capas y transparencia (si se guarda
desde el Photoshop las reglas para la compatibilidad para el modo de mezcla son las
mismas que para los archivos PSD); JPEG en TIFF (la transparencia no es posible en este
caso).
.XBM X Windows (2 colores)
.XPM X Windows (256 colores)
.WBMP Wireless Bitmap Image (imagen de mapa de bits inalámbrica). Formato de imagen
de mapa de bits en blanco y negro (1-bit) utilizado por los dispositivos móviles.
.RAW formato de importación de cámara (ver importación de fotos RAW (en la página 321)
para ver una lista de tipos de archivos compatibles).

Formatos de importación EPS

.AI Illustrator EPS


.EPS Illustrator EPS
.EPS CorelDRAW 3 & 4 EPS
.EPS FreeHand 3.0 EPS
.EPS Photoshop EPS (para importar datos de Photoshop a MAGIX Web Designer 6, utiliza
archivos en PSD en lugar de en EPS para obtener mejores resultados).

Otros formatos de importación

.ART Xara Studio


.WEB archivos Xara Webster
.AFF Acorn Draw
.CDR CorelDRAW (3, 4 & 5)
.CDT plantilla CorelDRAW
.CMX Corel CMX 5 & 6
.DRW Acorn Draw
.HTM gráficos en páginas en HTML
.WMF Windows Metafile (16 bits)
.EMF/ .WMF Enhanced Windows Metafile
.RTF texto
.WIX para uso interno de Xara

Formatos de exportación
Formatos de exportación para mapas de bits (ver resumen del diálogo de exportación GIF,
PNG, BMP y JPEG (en la página 324))
Importación y exportación 319
.BMP mapa de bits Windows
.GIF CompuServe GIF
.GIF archivos animados en GIF (ver Creando archivos animados en GIF (en la página 307))
.JPG JPEG
PSD Photoshop (ver importación y exportación de archivos en PDF (en la página 322))
.PNG PNG
Otros formatos de exportación

.HTML (páginas y sitios web)


.SWF Flash (ver Animaciones en Flash (en la página 283))
.RTF Rich Text Format
.SVG Internet Scalable Vector Graphics
.WIX, .TOC, para uso interno de Xara

Importación de archivos

Para importar un archivo:

• Selecciona "ARCHIVO > IMPORTAR" - Esto normalmente mezcla el contenido del archivo
en el documento existente. Con algunos formatos, tendrás la opción de importar el
documento a la página actual o insertarlo como nueva página. Con otros formatos se te
dará la opción de importar los datos de archivo de forma convencional o añadir un
enlace al archivo e incluirlo en tu sitio web publicado.
• O selecciona "ARCHIVO -> ABRIR ": esta opción abre el archivo como un nuevo
documento.

Con MAGIX Web Designer 6 podrás importar archivos utilizando el método de arrastrar y
soltar. Puedes arrastrar un archivo desde tu explorador de archivos a un documento
abierto dentro de MAGIX Web Designer 6, y con esta acción estarás importando al
documento y quedará colocado en el centro de la página actual. O también puedes
arrastrar y soltar el documento desde el Explorador de Windows a una barra o título de
barra de la ventana de Web Designer, esta acción abrirá el archivo como un documento
nuevo.

Sustitución de archivos de imagen


Puedes reemplazar cualquier imagen cargada o forma rellena con una imagen con las
tuyas. Para sustituir una imagen arrastra tu propio archivo de imagen (JPEG, GIF, PNG,
BMP) desde el explorador de Windows y suéltalo sobre la imagen que quieres reemplazar.
El tamaño de tu foto se adaptará automáticamente para sustituir la foto de la plantilla. La
nueva foto permanecerá seleccionada y se activará la herramienta de relleno para que
puedas adaptar la posición y el tamaño de la foto si lo deseas.

Importación de un archivo Photoshop PSD


Para importar un archivo PSD, importa el archivo con Archivo > Importar o simplemente
arrastra y suelta el archivo psd hasta MAGIX Web Designer 6.
320 Importación y exportación
Las capas del archivo PSD y la configuración de visibilidad de la capa se conservarán y se
convertirán en capas de MAGIX Web Designer 6. Podrás verlas abriendo la GALERÍA DE
CAPAS .

Consejo: si tienes objetos separados en Photoshop que deseas poder mover y cambiar
de forma independiente de otro en MAGIX Web Designer 6, colócalos en capas separadas
en Photoshop antes de realizar la exportación.

Importación de PDF
PDF es un formato de vectores gráficos complejos que ha evolucionado durante 10 años o
más, y contiene numerosos subformatos y opciones. El PDF fue diseñado como un
formato de documento portátil para visualizar e imprimir solamente y no estaba pensado
como formato de archivo para la transferencia de datos entre aplicaciones. Sin embargo,
MAGIX Web Designer 6 puede cargar la mayoría de los archivos PDF.

El PDF es actualmente la forma recomendada para transferir archivos vectoriales de Adobe


Illustrator a MAGIX Web Designer 6. Guarda el archivo como PDF y después importa el
archivo resultante en MAGIX Web Designer 6.

Es importante tener en cuenta los siguientes puntos:

• Los archivos PDF de varias páginas se importan como documentos multipágina en


MAGIX Web Designer 6.
• El texto en los archivos PDF generalmente está separado en pequeños objetos de texto.
Esto no evita la visualización e impresión, pero significa que cuando se lo importa lo que
aparece como uno o más párrafos continuos pueden no serlo. MAGIX Web Designer 6
intenta rearmar las líneas de texto en líneas y párrafos de texto editable, pero muchas
veces verás que el texto está separado en objetos de texto individuales.
• Para facilitar la extracción de un texto de un archivo PDF, se crea una capa que
contiene solamente el texto de esa página del PDF. Utiliza la GALERÍA DE CAPAS para ver
esta capa.
• Los archivos PDF hacen un uso liberal del clipping. En MAGIX Web Designer 6 esto
aparece como objetos ClipView, por lo que muchas veces es necesario utilizar "Ordenar
> Eliminar Clipview" para poder editar los objetos de la página.

Lo que podría no funcionar:

• Muchos archivos PDF incluyen fuentes incrustadas. No es posible extraer e instalar de


forma legal estas fuentes en tu sistema. Por lo tanto, si no tienes las fuentes utilizadas
en el archivo PDF verás que las fuentes faltantes se sustituirán con fuentes alternativas.
• Los archivos encriptados o protegidos por contraseña no pueden importarse.
• Los textos de archivos PDF que utilizan fuentes incrustadas no podrán leerse ni
editarse.

El PDF es un formato altamente completo y muchas veces no puede importarse de forma


correcta. La mejor forma de importarlo puede depender del uso que quieras darle. La
opción OPTIMIZAR PARA VISUALIZAR intenta que el aspecto del resultado importado sea lo
más similar posible al Acrobat, pero puede ser más difícil de editar (podría tener clipviews
insertados, por ejemplo). La opción alternativa OPTIMIZAR PARA EDITAR deshace algunas
Importación y exportación 321
construcciones que son difíciles de editar de forma manual (por ejemplo, clipviews
incrustados).

Importación de foto RAW


Puedes importar archivos RAW desde cámaras digitales utilizando la opción del menú de
importación o arrastrando y soltando el archivo en la ventana de Web Designer.

Extensiones de archivo compatibles: *.crw, *.cr2, *.nef,*.mrw,*raf,*.kdc,*.orf, *.dng, *.ptx,


*.pef, *.anw, *.x3f.

Exportación rápida de HTML y formatos de gráficos web


Puedes utilizar las opciones dedicadas en el MENÚ ARCHIVO para exportar rápidamente
páginas web y gráficos web, sin tener que seleccionar los formatos de una lista completa
de los formatos de exportación disponibles al utilizar "ARCHIVO -> EXPORTAR ".

• ARCHIVO ->EXPORTAR PÁGINA WEB : exporta el presente documento de página web a una
ubicación de tu elección en tu ordenador.
• ARCHIVO ->EXPORTAR JPEG : exporta la selección o la página actual a un archivo JPEG.
• ARCHIVO ->EXPORTAR PNG : exporta la selección o la página actual a un archivo PNG.

Para más información, lee el capítulo Primeros pasos.

Importación de imágenes desde una página web.


Puedes importar gráficos directamente desde páginas web de Internet hasta tu
documento. Ten en cuenta la diferencia entre esta función, que sirve para cargar todas las
imágenes de una página web, y la función de "Importación", que sirve para cargar un solo
gráfico desde un disco.

Para importar desde una página web:

1. Selecciona ARCHIVO > IMPORTAR DESDE PÁGINA WEB (o Ctrl + Alt + W).
2. Introduce la dirección de la página web (URL) de la página o del gráfico que desees
importar. Si la URL es una página, todos los gráficos de la página se van a importar.
3. Pulsa IMPORTAR.

Exportación de archivos

Para exportar un archivo:

• Selecciona Archivo > Exportar.


• O pulsa Ctrl+×+E.

Se abrirá un diálogo de EXPORTACIÓN . Escoge el nombre para tu archivo y selecciona el


formato deseado de la lista desplegable de TIPO DE ARCHIVO . Algunos de los formatos
están descritos más abajo.
322 Importación y exportación
Exportación como Flash
Puedes exportar un dibujo al formato Macromedia SWF Flash (estático). Esto es más apto
para diseños de vectores y puede suministrar un tamaño de archivo mucho menor.
Puedes utilizar el SWF en páginas web o importarlo a Macromedia Flash para usar en
animaciones Flash.

También puedes crear un Flash animado. Lee Animaciones Flash (en la página 283) para
más detalles sobre la exportación Flash.

Exportación como metarchivo de Windows (.wmf)


Word y muchos otros programas pueden leer los archivos en este formato.

Exportación como formato Extended Metafile (EMF)


Las aplicaciones modernas de Windows son compatibles con este tipo de formato de
gráficos vectoriales avanzados. Este formato también está disponible para aplicaciones
que suministran la opción de menú Pegar especial.

Ten en cuenta que MAGIX Web Designer 6 puede contener características como estilos de
relleno avanzados que no pueden representarse en formatos vectoriales como EMF. En
este caso, parte delas imágenes se exportarán como mapas de bits. Las partes vectoriales
que pueden exportarse como vectores se exportarán como tales.

Exportación como mapa de bits


JPEG, GIF y PNG son formatos universales compatibles con la mayoría de las aplicaciones
informáticas modernas. PNG tiene la calidad más alta. JPEG es el mejor formato para
trabajos fotográficos, pero puede producir archivos compactos aceptables (puede
controlarse la calidad y el tamaño de archivo).

El formato GIF es compatible sólo con 256 colores y, a pesar de que es muy común en
muchas páginas web, PNG es un mejor formato. PNG también es compatible con gráficos
semitransparentes (utiliza la opción True Color + Alpha), pero esto no es compatible
correctamente con Microsoft Internet Explorer (pero sí con los demás navegadores web).

Cuantos menos colores contenga el archivo, más pequeño será y menor calidad tendrá.
Sin embargo, al utilizar 256 colores o menos, MAGIX Web Designer 6 te suministra
técnicas muy avanzadas para simular una mayor gama de colores para que obtengas
resultados de calidad fotográfica utilizando solamente 256 colores o menos.

Importante
Los mapas de bits se emiten con la calidad actual en que los ves, por lo tanto, para
obtener la mejor calidad, asegúrate de que la opición "VENTANA > CALIDAD" esté
configurada en MUY ALTA CALIDAD .

Exportación de archivos Photoshop PSD


Photoshop es un editor de mapas de bit, por lo que cuando se exporta a un formado PSD
todos los objetos vectoriales de MAGIX Web Designer 6 se rasterizan. Puedes seleccionar
la resolución (dpi) al exportar.
Importación y exportación 323
Siempre guarda tu trabajo en MAGIX Web Designer 6 antes de exportar. Después, si
deseas alterar tus objetos originales en el futuro, simplemente carga MAGIX Web Designer
6, realiza los cambios y después exporta nuevamente los objetos requeridos.

Para exportar como archivo PSD selecciona "Archivo -> Exportar" y después ADOBE
PHOTOSHOP en la lista GUARDAR COMO TIPO .

Capas
Las capas se conservan en MAGIX Web Designer 6 cuando exportas en formato PSD.
Cada capa se rasteriza como una capa separada en PSD, incluyendo los nombres de las
capas. La visibilidad de las capas también se guarda, por lo tanto las capas definidas
como "invisibles" en MAGIX Web Designer 6 serán exportadas y guardadas como
invisibles en Photoshop. Puedes activar o desactivar las capas en Photoshop utilizando la
paleta de CAPAS .

Texto
Puedes exportar texto desde MAGIX Web Designer 6 para que sea un texto editable en
Photoshop, pero el texto debe encontrarse en una capa propia (al importar se te
preguntará si quieres actualizar los objetos de texto para que sean editables en
Photoshop).

El texto que se encuentra en una capa con cualquier otro objeto gráfico se rasterizará en
esa capa y no será editable.

Exportación DPI
Podrás configurar el valor DPI de los mapas de bits en el archivo PSD exportado.

Un DPI de 96 es la resolución de
pantalla normal de Windows, es decir,
que si exportas en 96 dpi el tamaño
del 100% en Photoshop será igual que
el 100% en MAGIX Web Designer 6.

Para un trabajo de impresión deberías escoger un DPI mayor.

Puedes seleccionar para exportar toda el área de página de MAGIX Web Designer 6 o
solamente las áreas con objetos visibles.

Resumen
Para obtener la mayor compatibilidad y posibilidades de edición en Photoshop:

• Coloca las partes de tu dibujo que deseas que permanezcan como capas separadas en
Photoshop, en capas separadas en MAGIX Web Designer 6.
324 Importación y exportación
• Si quieres que el texto pueda editarse en Photoshop, colócalo en una capa individual sin
objetos gráficos.

Resumen del diálogo de exportación JPEG, PNG, GIF y BMP

El diálogo de exportación tiene dos ventanas de vista previa, IMAGEN A a la izquierda e


IMAGEN B a la derecha, para que puedas comparar las opciones de exportación
alternativas o los tipos de documentos. Haz clic en la ventana derecha o izquierda de vista
previa para cambiar la vista previa activada.
Encima de la ventana de vista previa se encuentra una lista desplegable que te permite
seleccionar uno de los cuatro formatos de exportación más comunes: JPEG, PNG, GIF y
BMP.

Una vez que hayas seleccionado la imagen previa A o B podrás elegir entre una larga lista
de opciones de exportación utilizando las cinco pestañas situadas debajo de la ventana de
vista previa. Algunas opciones como las opciones de paleta solo se pueden aplicar a
algunos tipos de documentos como los PNG, y no son relevantes para el tipo JPEG.

Otras opciones de la pestaña OPCIONES cambian dependiendo del tipo de documento,


como cuando exportas un JPEG y puedes configurar la calidad requerida.
Importación y exportación 325
Entonces, los pasos a seguir para exportar una imagen son:

1. Selecciona el objeto o los objetos en la página que quieres exportar


2. Selecciona el menú Exportar, o pulsa "Ctrl + Shift + E", introduce el nombre del
documento y elige el tipo de documento de la lista desplegable. El tipo de
exportación principal mostrará la ventana de vista previa superior.
3. Si así lo deseas puedes cambiar la configuración en el diálogo de vista previa o
ignora esta opción si te parecen adecuadas las configuraciones que vienen por
defecto.
4. Haz clic en el botón EXPORTAR

Para los formatos más usuales JPEG y PNG, en el paso 2 puedes utilizar directamente las
opciones disponibles en el MENÚ ARCHIVO : EXPORTAR JPEG y EXPORTAR PNG . El diálogo de
exportación mostrado incluye el botón "Configuración" que te lleva al diálogo que se
muestra arriba.

La mayoría de las configuraciones de exportación se guardarán hasta la próxima


exportación. Por ejemplo, si ajustas la calidad en JPEG, la próxima vez que exportes un
JPEG se acordará de la última configuración de calidad.

Tamaño de imagen exportada


Si exportas el tamaño estándar normal es lo mismo que ves en la pantalla con el zoom al
100%. El tamaño de píxel se puede ver en la ventana de vista previa. Puedes ajustar el
tamaño del objeto en la página antes de exportar o si introduces un valor de pixel o DPI
alternativo en la pestaña TAMAÑO DE MAPA DE BITS.

Controles
Estos botones modifican la vista previa de las imágenes, pero no el archivo para exportar:

• Herramienta de ZOOM : haz clic sobre una vista previa para ampliarla. Shift
+ clic para reducirla. Arrastra sobre un área de la vista previa para realizar
un zoom en esa área.

• Herramienta de DESPLAZAMIENTO : te permite mover la imagen dentro de la


ventana de vista previa.

• ZOOM PARA MAXIMIZAR : modifica el tamaño de la imagen de vista previa de


forma que se adapte a la ventana.

• ZOOM AL 100%: amplía la imagen a su tamaño completo (100%).

• ZOOM HASTA LA RESOLUCIÓN DE LA IMAGEN (1:1): no tiene ningún efecto en


el caso de archivos GIF. Modifica el tamaño de la imagen para que un píxel
del mapa de bits sea un píxel en la pantalla. Esto es muy útil para
previsualizar el mapa de bits en detalle.

La siguiente herramienta solo es importante para archivos que utilizan menos de 256
colores (pero verás el resultado si has seleccionado la pestaña OPCIONES DE PALETA):
326 Importación y exportación
SELECTOR DE COLOR (PIPETA) : al mover el cursor sobre la imagen se señalará el
color que se encuentra debajo del cursor. Haz clic para seleccionar ese color en
la paleta. Después, puedes utilizar los botones de las OPCIONES DE PALETA
(descrito a continuación) para modificar ese color.

VISTA PREVIA: el botón de vista previa está disponible en todas las pestañas de este
diálogo. Actualiza las ventanas de vista previa para reflejar cualquier cambio que hayas
hecho a las opciones de exportación.

Pestaña Opciones de paleta


Esta pestaña te permite modificar los colores de tu imagen para exportar.

Dithering y paleta
Las opciones DITHERING y PALETA solo son aplicables para la exportación de 256 colores
o menos y modifican la forma en que la imagen se visualiza, así como su paleta de colores.
Se recomienda utilizar siempre la PALETA OPTIMIZADA . Si se configura la opción DITHERING
en ninguno, se producirán archivos más pequeños pero que probablemente presentarán
líneas. ERROR DE DIFUSIÓN crea resultados con mejor calidad pero también archivos más
grandes.

Profundidad de color
Escoge la cantidad de colores que requiere tu mapa de bits. Cuantos más colores, más
grande el archivo (generalmente) y mayor la calidad. La opción TRUE COLOR es compatible
con hasta 16 millones de colores. TRUE COLOR + ALPHA incluye características de
semitransparencia como sombras y transparencias. Este es el formato recomendado para
aplicaciones compatibles con archivos PNG de canal alfa.

Si escoges 256 colores o menos, tienes la posibilidad de utilizar transparencia simple (ver a
continuación el icono de la copa). Esto no es compatible con píxeles semitransparentes,
sino con píxeles completamente opacos o transparentes y, por lo tanto, puede producir
bordes dentados.

Colores máximos
Si escoges una profundidad de color de 256 colores o menos puedes controlar
exactamente la cantidad de colores que se utilizan en el archivo. Esto suministra un gran
nivel de control sobre la calidad versus el tamaño del archivo. Simplemente introduce la
cantidad de colores requeridos y pulsa el botón de VISTA PREVIA para ver el resultado.
Importación y exportación 327
Botones
Estos botones (excepto FONDO TRANSPARENTE ) se aplican cuando se exportan imágenes
con 256 colores o menos. Estos archivos se crean con una paleta de colores limitada y
estos controles suministran un mayor nivel de control sobre esos colores de paleta. Lee
SELECTOR DE COLOR explicado anteriormente para ver cómo seleccionar un color o haz
clic sobre un color en la PALETA DE COLORES .

Bloquear un color

Puedes especificar la cantidad de colores que quieres en la paleta de los mapas de bits
exportados. Es posible que quieras asegurarte de que estos colores siempre aparezcan en
la paleta y, por lo tanto, puedes bloquearlos. Haz clic sobre un color para seleccionarlo y
después selecciona el botón BLOQUEAR . Aparecerá un pequeño cuadrado en la esquina
izquierda del color para señalar que ese color está bloqueado.

Convertir un color de la paleta en web safe

Si pulsas este botón el color seleccionado cambiará a uno de los 216 colores de la paleta
de colores web. Este es un sistema que ha dejado de ser importante o relevante, puesto
que todos los ordenadores puedes mostrar millones de colores y restringir los gráficos
web a esta paleta limitada no tiene mayores beneficios.

Convertir el fondo de imagen en transparente

Esto hace que las áreas no cubiertas por los objetos seleccionados sean transparentes.
Seleccionar esta opción activa automáticamente una entrada transparente en la paleta.

Convertir un color de la paleta en transparente

Convierte esta entrada de color en transparente. Debes tener en cuenta la diferencia entre
esta opción, que convierte partes del objeto seleccionado en transparente, y la opción
Convertir fondeo de la imagen transparente, que convierte el fondo detrás de los
objetos seleccionados en transparentes.

Eliminar un color de la paleta

Borra este color de la paleta. Las áreas del mapa de bits que utilicen el color eliminado
utilizarán el color más cercano en la paleta. Cuantos menos colores en la paleta, más
pequeño será el archivo de mapa de bits.

Restablecer un color previamente eliminado

Restaura un color eliminado.

Añadir colores de sistema


328 Importación y exportación
Añade 28 colores a la paleta. Estos colores son los colores del sistema Windows y una
cantidad de colores primarios. Esto garantiza que la paleta incluya una extensión de
colores y puede mejorar la calidad de la imagen, especialmente si contiene una amplia
gama de colores. Es posible que necesites experimentar con esta opción para obtener los
mejores resultados.

Pestaña Tamaño de mapa de bits


En esta pestaña puedes cambiar el tamaño de la imagen para exportar.

Tamaño y resolución del mapa de bits


Puedes modificar el tamaño del mapa de bits cambiando:

• TAMAÑO . Introduce el ancho o alto en uno de los campos. Como la relación de aspecto
del mapa de bits está bloqueada, al cambiar una dimensión se cambiará también la
otra. TAMAÑO es más adecuado que ESCALA si quieres crear un mapa de bits con un
tamaño especial en píxeles.
• ESCALA. (No disponible para JPEG ni PNG). Esto te permite cambiar el tamaño del mapa
de bits con un porcentaje. ESCALA es mejor que Tamaño si quieres, por ejemplo, crear
un mapa de bits un 50% más grande que el original.
• RESOLUCIÓN. (No disponible para GIF ni BMP). Introduce la resolución en el campo de
DPI . Si quieres exportar una imagen para visualizar en una pantalla (por ejemplo, una
página web) no necesitas un valor DPI mayor que 96. Los 96 DPI también garantizan
que el mapa de bits tenga el mismo tamaño que los objetos en la pantalla (con un
aumento del 100%).

Área a guardar
El mapa de bits puede crearse utilizando una de estas áreas del documento:

• PÁGINA :toda el área de la página.


• DIBUJO :el área cubierta por los objetos.
• SELECCIÓN : el área cubierta por los objetos seleccionados. Solo disponible cuando se
han seleccionado objetos.

Anti-aliasing
El anti-aliasing mejora la apariencia de los gráficos suavizando los bordes dentados:

• CONSERVAR ANTI-ALIASING PANTALLA . El mapa de bits exportado utilizará el mismo


posicionamiento que se ve en la pantalla para que conserve el mismo anti-aliasing. Esto
puede crear bordes de objetos levemente borrosos porque no se ajustan exactamente a
los límites de los píxeles.
• MINIMIZAR ANTI-ALIASING VISIBLE . Esto reposicionará levemente los objetos en
fracciones para minimizar el anti-aliasing alrededor del borde del mapa de bits
exportado. Si tienes duda sobre la opción que debes utilizar, selecciona esta opción.

Colocar image tag de HTML en el portapapeles


Esto te permite guardar la información básica del image tag de HTML cuando guardas el
mapa de bits. Después, podrás pegar la etiqueta en tu editor de texto o página HTML.
Importación y exportación 329
Pestaña de opciones
Con esta pestaña puedes modificar la compresión JPEG y activar las opciones
progresivo/entrelazado de ser necesario.

Progresivo: (solo JPEG). Al seleccionar esta opción se crea un JPEG progresivo. Esto es
útil cuando el JPEG es grande y se utilizará en una página web. Los navegadores web
comenzarán a mostrar la imagen antes de finalizar la descarga por completo.

Calidad JPEG: (solo JPEG). Una configuración baja resultará en un archivo pequeño con
pérdida de calidad, mientras que un valor alto reducirá levemente el tamaño del archivo
pero conservará la alta calidad. Ten en cuenta que una configuración de 100% también
comprimirá el archivo. Un valor de 75% produce una buena compresión sin causar pérdida
de calidad evidente para la mayoría de los usos.

Entrelazado: (solo GIF y PNG). Esta opción es como el JPEG progresivo. En el navegador,
la primera imagen aparecerá como una imagen de baja resolución. A medida que el
archivo se carga, la resolución aumenta.

Transparente: (solo GIF y PNG). Esto hace que las áreas no cubiertas por los objetos
seleccionados sean transparentes. Seleccionar esta opción activa automáticamente una
entrada transparente en la paleta.

Exportar cada capa a un archivo individual: si se selecciona esta opción al exportar un


diseño que contiene varias capas, se creará un archivo por separado para cada capa. Los
nombres de cada capa (tales como se encuentran configurados en la Galería de capas) se
utilizarán para nombrar los archivos exportados.

Vista previa
Puedes escoger el mejor compromiso entre tamaño de archivo y calidad para gráficos web
utilizando las ventanas de vista previa A y B en el diálogo de EXPORTACIÓN (ilustrado
arriba). Sin embargo, la mejor prueba es ver la forma en que el gráfico se ve en un
navegador web. Esta pestaña te ofrece algunas opciones para esa vista previa. Haz clic en
el botón VISTA PREVIA para abrir el navegador web y ver los gráficos antes de exportarlos.
330 Importación y exportación

La Galería de diseños

Esta galería contiene plantillas de diseño profesional de páginas y sitios web completos, así
como de elementos individuales de cliparts que puedes utilizar para tu diseño.

Para abrir esta galería:

• Escoge "HERRAMIENTAS > GALERÍAS > GALERÍA DE DISEÑOS ".


• O haz clic en el botón de Diseños en la barra de control de Galerías.

Puedes realizar búsquedas con palabras clave y ordenar el contenido de la galería. Para
información sobre la utilización de las galerías, lee el capítulo MANEJO DEL DOCUMENTO (en
la página 83). Si estás online, al abrir la galería se bajarán diseños y widgets de los
servidores de Xara, que aparecerán de inmediato en la galería. Vuelve a mirar regularmente
para descubrir los últimos widgets y plantillas disponibles. Para abrir una plantilla como un
nuevo documento, haz doble clic. Para importar una plantilla a tu documento abierto
actualmente, arrástralo hasta tu diseño. Las plantillas de página se agregan como nuevas
páginas a tu documento actual. Otras plantillas y widgets se colocan en tu página actual.
Personalización de Web Designer 331
Si arrastras y sueltas un widget, una ventana de navegador web se abrirá en la página web
del widget, lo que te permite configurar tu widget para adaptarlo a tus necesidades. Al
finalizar, haz clic en el botón Insertar en la parte inferior de la ventana del navegador y el
widget se insertará en tu página con un marcador de posición estático. Verás la imagen
estática al ver la página en MAGIX Web Designer 6, pero verás el widget real al exportar y
hacer una vista previa de tu página. Consulta el capítulo de GRÁFICOS WEB Y WIDGETS para
más información.

Personalización de Web Designer

Cambio del documento de plantilla en blanco

Los documentos de plantilla son las opciones disponibles en ARCHIVO > NUEVO .

Las plantillas prediseñadas están disponibles en la galería de diseños (o en Archivo


> Nuevo de la galería de diseños).

Para añadir un documento de plantilla:

1. Abre un documento existente ("Archivo > Abrir" o "Ctrl + O") o crea uno
nuevo con el botón NUEVO de la barra de control ESTÁNDAR o "Ctrl +N".
2. Haz los cambios necesarios (como cambiar la página, añadir un logo o un
mensaje). Puedes editar el documento de plantilla de la misma forma que un
documento común.
3. Cuando estés satisfecho con los cambios escoge "Archivo > Guardar
plantilla" e introduce un nombre para la plantilla.

Para establecer la nueva plantilla como plantilla por defecto (es decir, que será lo primero
que aparezca cuando abras Web Designer y cuando pulses Ctrl+N) coloca la tilde en USAR
COMO PLANTILLA POR DEFECTO al guardar la plantilla.

Opciones del menú "Herramientas"

Shortcut: Ctrl + Shift + O

Con esto se abre el diálogo de opciones. Allí pueden aplicarse configuraciones para Web
Designer.

Con el botón ACEPTAR se guardarán las configuraciones y se cerrará el diálogo.

APLICAR guarda las modificaciones pero el diálogo permanece abierto. De esta forma
puedes continuar realizando cambios.
332 Personalización de Web Designer

Pestaña General

Tamaño de lista de archivos recientes


El menú Archivo muestra una lista de los archivos cargados o guardados más
recientemente en el submenú "Abiertos recientemente". Esta lista ofrece una forma rápida
de volver a abrir esos archivos. Esta opción te permite cambiar la cantidad de archivos que
contendrá la lista (entre 1 y 20 archivos).

Las capas actuales siempre están visibles y pueden editarse.

En el capítulo Capas (en la página 275) encontrarás más detalles sobre las capas y la
galería de capas.

Si se ha seleccionado esta opción, al seleccionar una capa en la GALERÍA DE CAPAS, éstas


estarán visibles y podrán editarse automáticamente.

Si esta opción no está seleccionada, los estados VISIBILIDAD y EDICIÓN de una capa no se
modificarán al seleccionarla.
Personalización de Web Designer 333
Preguntar antes de aplicar el atributo actual
Esto es aplicable cuando se cambia un atributo actual. (Es decir, si cambias un atributo
cuando no está seleccionado ningún objeto.)

Si la opción está activada, se te solicitará que confirmes si quieres cambiar el atributo.

Si la opción está desactivada, el cambio se realizará sin necesidad de confirmar.

Hacer grupos transparentes en su conjunto

Lee el capítulo Transparencia (en la página 188) para más información sobre las
transparencias.

Al aplicar transparencia a un grupo de objetos, Web Designer aplicará la transparencia a


todo el grupo como si fuera un solo objeto (no se verán las transparencias individuales en
el grupo). Si se deselecciona esta opción, Web Designer añadirá la transparencia a cada
objeto del grupo por separado.

Mantener los nombres de las capas importadas


Si esta opción está activada, la información de capa se preservará al importar plantillas u
otros archivos. Con la opción IMPORTAR CAPAS a la CAPA ACTIVA seleccionada, todos los
objetos importados aparecerán en la capa actual y la información de capa en la
información entrante se ignora. IMPORTAR CAPAS EN NUEVAS CAPAS creará una capa para
cada capa importada.

Marco de selección de objetos


Esta opción te permite cambiar la configuración por defecto para el Marco de selección
(donde arrastras un rectángulo de selección sobre los objetos que quieres seleccionar). Así
podrás seleccionar objetos que estén tocando el rectángulo de selección o seleccionar
sólo los objetos que estén dentro del rectángulo.

Limitación de ángulo
Esto es aplicable para la rotación o movimiento de un objeto mientras se pulsa la tecla Ctrl.

Puedes seleccionar un valor del menú o introducir un valor en grados.

Este documento va a ser una página web


Esta opción comunica a MAGIX Web Designer 6 que la intención es exportar el documento
como página web. Esto cambia sutilmente el comportamiento del programa con respecto
al modo de comportarse con los enlaces de los objetos. Si esta opción está desactivada y
aplicas un enlace a un objeto que se encuentra dentro de un grupo, este enlace no hará
nada en la página web exportada porque el grupo entero se exporta como imagen y, por
lo tanto, el enlace aplicado a sólo un miembro del grupo es ignorado al exportarse la
página web. Sin embargo, si esta opción está activa, el enlace "asciende" a grupo, como
si el enlace se hubiera aplicado al grupo entero en lugar de sólo a un miembro del mismo.
Por lo tanto, si por ejemplo aplicas sin querer un enlace al texto de un botón en lugar de
334 Personalización de Web Designer
aplicarlo al botón entero, esta opción aplicará por ti el enlace al botón entero. Esta opción
está activada por defecto en todas las plantillas web.

Mostrar longitudes de texto compatibles con Windows


Véase la compatibilidad de texto del navegador (en la página 175) en el capítulo MANEJA
DE TEXTO .

Desplazar
Esta se aplica cuando se utilizan las teclas de flecha  del teclado mientras se mueve un
objeto.

Este campo de texto define la distancia que el objeto se mueve cada vez que se pulse la
tecla. Si el documento utiliza unidades escaladas (por ejemplo, 1 pulgada a 1 milla) este
campo de texto mostrará la distancia en la unidad escalada.

(Cuando se realiza un desplazamiento, Ctrl y × aumentan la distancia de desplazamiento


cinco y diez veces respectivamente).

Distancia duplicación
Edición > Duplicar (Ctrl+D) crea un duplicado del objeto original. Este campo de texto te
permite configurar la distancia de desplazamiento entre el original y el duplicado.

Los valores positivos crean un duplicado por arriba y a la derecha del objeto original.

Los valores negativos crean un duplicado por debajo y a la izquierda del original.

Pestaña Cuadrícula y regla


Personalización de Web Designer 335
Espaciado de cuadrícula y regla
El ESPACIADO PRINCIPAL define la distancia entre la cuadrícula principal y las divisiones de
la regla. Las unidades utilizadas para la cuadrícula y las reglas están definidas por las
unidades que utilizas en el espaciado principal. Por ejemplo, si introduces un espaciado
principal de 2 CM. las unidades de la cuadrícula y la regla se configurarán en centímetros
sin importar la unidad de página especificada en las opciones de unidades.

Coordinar selección
Aquí puedes cambiar la dirección de las coordinadas de la página.

Pestaña Ratón

Función de botones de ratón


Web Designer te ofrece una gama de acciones posibles para la tecla izquierda o derecha
del ratón. Por ejemplo, si eres zurdo, es posible que quieras utilizar el botón derecho como
el botón normal. Por lo tanto, puedes asignar el clic normal a la tecla derecha del ratón
(también puedes configurar ambas teclas para la misma acción, si así lo deseas).

Acciones posibles:

• Clic normal: al menos un botón debería tener asignado esta opción.


• ×+clic.
• Ctrl+clic.
336 Personalización de Web Designer
• Alt+clic.
• Menú pop-up (ver más adelante).
• Cambiar a pantalla completa (descrito en Trabajar con documentos (en la página 69)).
• Acercar o alejar el zoom ×+clic para alejar (descrito en Trabajar con documentos (en la
página 69)).
• Herramienta de DESPLAZAMIENTO (como si pulsaras ×+F8)

El menú pop-up contiene opciones adecuadas para el objeto sobre el que haces clic. Por
ejemplo, para la mayoría de los tipos de objetos, el menú contiene las opciones CORTAR,
COPIAR, PEGAR, ELIMINAR, DUPLICAR, CLONAR (descritas en el capítulo Trabajar con objetos
(en la página 88)).

MOVIMIENTO DE RUEDECILLA DEL RATÓN: puedes cambiar la acción de la rueda del ratón
entre desplazamiento y zoom. La primera es la opción por defecto de Web Designer, la
última logra compatibilidad con MAGIX Photo Designer 7.

Haz clic sobre RESTAURAR para regresar a las opciones de asignación de botones
originales. Esto tiene efecto inmediato, no necesitar hacer clic en ACEPTAR ni en APLICAR
AHORA .

El panel de control de Windows también te permite intercambiar los botones izquierdo y


derecho del ratón.

Radio para alineación magnética

La alineación magnética se describe en detalla en el capítulo Trabajo con objetos (en la


página 105).

Estos valores determinan la distancia a la que pueden acercarse los objetos a los objetos
magnéticos antes de alinearse automáticamente. Estas son distancias en la pantalla y son
independientes del tamaño de tu documento.
Personalización de Web Designer 337

Pestaña Tamaño de página

Si la opción "TODAS LAS PÁGINAS DEL SITIO WEB CON EL MISMO TAMAÑO " no está
seleccionada, entonces puedes asignar tamaños diferentes a tus páginas utilizando este
diálogo. Para fijar el tamaño de la página, escoge uno de los tamaños de página
suministrados en la lista desplegable o escoge "Personalizado" y luego introduce el ancho
y la altura requeridas en el campo suministrado.

Pestaña Copias de seguridad

Esta pestaña te permite activar y desactivar la función de copias de seguridad


automáticas. Esta función guarda una copia de todos los documentos abiertos
modificados en intervalos regulares. Se recomienda dejar activada esta opción para que tu
trabajo se guarde con regularidad. También puedes escoger si se te debe advertir que no
has guardado documentos al cerrar el programa o si debe guardarse una copia de
seguridad de todos estos documentos y restaurarse la próxima vez que inicies el
programa.

Consulta el capítulo Trabajar con documentos (en la página 78) para más detalles acerca
de estas funciones.

Barras de control

Puedes mover las barras de control de Web Designer a otros lugares de la ventana,
reordenar los botones, crear nuevas barras de control, mover o copiar botones entre las
barras de control y muchas otras operaciones.
338 Personalización de Web Designer

No puedes cambiar la barra de información que depende de la herramienta ni el contenido


de las barras desplegables que se encuentran en la barra de herramienta principal y en las
barras superiores.

Modo de pantalla completa


Web Designer tiene dos configuraciones de barras de control:

• Una configuración aparece cuando la ventana tiene el tamaño normal.


• La segunda configuración aparece después de escoger Ventana > Pantalla completa.

Cualquier cambio a la configuración de las barras de control (por ejemplo, cambio de


tamaño o desplazamiento) no tiene efecto en la otra configuración. Los cambios a botones
individuales (por ejemplo, configurar una opción) se aplican tanto al modo normal como de
pantalla completa.

Mostrar y ocultar barras de control


La visualización de las barras de control se modifica a través del diálogo BARRAS DE
CONTROL (Ventana > Barras de control).

Al lado del nombre de cada barra de control hay un recuadro. Si colocas una tilde en ese
recuadro, la barra de control estará visible. Haz clic sobre ese recuadro de la barra de
control para mostrar u ocultar la barra.

Barras de control bloqueadas o flotantes


Normalmente, las barras de control están bloqueadas (ajustadas a los bordes de la
ventana). Al mover la ventana también se mueven las barras de control bloqueadas.

Las barras de control también pueden ser flotantes. Estas barras no siguen el movimiento
de la ventana.
Personalización de Web Designer 339

Barra de control flotante Barra de control bloqueada

Puedes ocultar una barra de control flotante utilizando el diálogo de BARRAS DE CONTROL
(descrito arriba) o con un clic sobre el icono de CIERRE .

Para hacer que una barra de control sea flotante, arrástrala desde el borde de la ventana
hasta un área de edición o fuera de la ventana de Web Designer.

Para bloquear una barra de control, arrástrala sobre:

• El borde de la ventana.
• La barra de menú.
• U otra barra de control.

Una barra de control flotante presenta un contorno de doble línea al arrastrar. Esto cambia
a una línea simple cuando se encuentra en una posición bloqueada. Si quieres que la barra
de control permanezca flotante, pulsa Ctrl mientras la desplazas.

Modificación del tamaño de una barra de símbolos


Desplaza el cursor del ratón sobre el borde de la barra de símbolos hasta que se convierte
en una doble flecha. Ahora podrás arrastrar el borde para modificar el tamaño de la barra
de símbolos.

Creación de barras de símbolos


Para crear una barra de símbolos realiza lo siguiente:

• Arrastra un botón desde el área de trabajo o desde la ventana. De esta forma, se creará
una nueva barra de símbolos que contendrá el botón.
• O haz clic sobre NUEVO en el diálogo de BARRAS DE SÍMBOLOS . De esta forma puedes
crear una nueva barra de símbolos y darle un nombre. La nueva barra de símbolos
estará vacía. Ahora podrás insertar botones mediante arrastrar y soltar.

El desplazamiento de botones se explica más adelante.

Eliminar las barras de control


Sólo puedes eliminar las barras de control que están vacías. Para ello, mueve cualquier
botón hasta otra barra de control. Cierra la barra de control (con un clic sobre el icono de
CIERRE o usando el diálogo de BARRAS DE CONTROL ). La barra de control se eliminará
automáticamente cuando cierres Web Designer.

Desplazar botones y herramientas


Para mover botones o herramientas:
340 Personalización de Web Designer
1. Mueve el cursor hasta el botón que quieres mover.
2. Mantén pulsada "Alt" (ALT izquierdo) para mover el botón o "AltGr" (ALT derecho)
para copiar el botón cuando se utiliza en barras de control definidas de usuario y
otras barras de control. Aunque en la "paleta de botones" predefinida, ambas teclas
ALT sólo copian el botón.
3. Arrastra el botón hasta:
- Un lugar diferente sobre la misma barra de control.
- Otra barra de control.
- O hasta un área de edición o fuera de Web Designer para crear una barra de
control nueva.

No puedes mover botones desde ni hasta la barra de información.

Ocultar botones y herramientas


Mueve los botones o herramientas no deseados hasta otra barra de control y después
oculta esa barra de control (descrito anteriormente).

Si necesitas el botón o herramienta en el futuro, utiliza la ventana de BARRAS DE CONTROL


para volver a mostrar la barra de control.

No puedes eliminar los botones ni las herramientas.

Fijación de galerías

Es posible fijar una o más galerías a cada lado de la ventana de Web Designer.

Fijar una galería


Para fijar una galería:

Abre una galería con un clic sobre el icono en la barra de control de GALERÍAS o
seleccionando Herramientas > Galerías.

1. Arrastra la galería hasta la izquierda o derecha de la pantalla.


2. Si lo deseas, reitera el proceso para otras galerías.

Desfijar una galería


Un clic sobre un icono de la barra de control de GALERÍAS eliminará la galería de la
pantalla. Pero con otro clic, la galería volverá a su posición fija. Para desfijar la galería por
completo, simplemente arrastra la galería desde el lado de la pantalla y desfijará
automáticamente. O arrastra la galería manteniendo pulsada la tecla "Ctrl" para evitar la
fijación mientras arrastras.
Personalización de Web Designer 341
Reorganizar galerías
Si has fijado más de una galería de un lado, las galerías compartirán una columna. Puedes
cambiar el tamaño de las galerías como lo desees, así como también arrastrar las galerías
hacia arriba o hacia abajo para cambiar el orden.

Restaurar las barras de control / galerías por defecto

Haz clic sobre RESTABLECER para restaurar la configuración de la barra de control a sus
valores estándar.
342 Menús y shortcuts de teclado

Menús y shortcuts de teclado

Introducción

En muchas partes estas descripciones se refieren al objeto seleccionado. En la mayoría de


los casos, la acción descrita también es aplicable cuando se han seleccionado varios
objetos. Utilizamos la frase "objeto seleccionado" para referirnos a uno o varios objetos
seleccionados.

Muchas veces puedes seleccionar una opción de un menú, una barra de control o con un
shortcut. Si existe un botón en la barra de control y/o un shortcut, se mostrarán detrás el
nombre del menú. Por ejemplo, lo siguiente significa que hay un botón en la barra de
control ESTÁNDAR que tiene el mismo efecto que seleccionar nuevo o que pulsar el
shortcut Ctrl+N.

Nuevo (barra de control estándar o Ctrl+N)

Menú Archivo

Nuevo (barra de control estándar o Ctrl+N)


Crea un documento nuevo.

Nuevo de la Galería de diseños


Esta opción abre la galería de diseños si no está abierta ya y te permite escoger una
plantilla para un nuevo documento. Haz clic en los iconos de fichero en la galería para abrir
un fichero y haz doble clic en una miniatura de plantilla para iniciar un nuevo documento
utilizando esa plantilla.

También puedes abrir la galería de diseños haciendo clic en el icono en la barra


de herramientas de la galería.

Abrir (barra de control estándar o Ctrl+O)


Abre una nueva ventana de edición y carga un archivo. Este archivo puede ser:

• Un archivo .web de Web Designer para visualizar o editar un documento de Web


Designer existente,
• O cualquier otro de los formatos de importación (consulta Importación y exportación (en
la página 316) para ver la lista de formatos). Esto abre un nuevo documento con un
archivo.

Archivos recientes
Una lista de los archivos cargados o guardados más recientemente. Esta lista te
proporciona una forma rápida de volver a cargar cualquiera de estos archivos.
Menús y shortcuts de teclado 343
Puedes cambiar la cantidad de archivos que aparecen en esta lista. (Para más información
consulta el capítulo Personalización de Web Designer).

Cerrar (Ctrl+W)
Cierra la ventana de edición actual. Web Designer permanece abierto. Se te advertirá si no
has guardado cambios.

Guardar (barra de control estándar o Ctrl+S)


Guarda el documento seleccionado.

Guardar como
Te permite guardar el documento seleccionado con otro nombre o en un directorio o
unidad diferente.

Guardar todo
Guarda todos los documentos abiertos.

Guardar plantilla
Guarda el documento seleccionado como una plantilla de documento. (Consulta el
capítulo Personalización de Web Designer (en la página 331)).

Importar (Ctrl+Shift+I)
Carga un archivo en el documento seleccionado. El archivo puede ser cualquiera de los
formatos de importación. (Lee el capítulo Importación y exportación (en la página 316) para
más información).

Ten en cuenta la diferencia entre ABRIR e IMPORTAR . Ambas opciones cargan una variedad
de formatos de documento pero ABRIR los abre en un nuevo documento; mientras que
IMPORTAR carga el archivo en el documento ya abierto.

Importar desde la web (Ctrl+Alt+W)


Extraer todas las imágenes de una página web específica (Gráficos web ).

Exportar (Ctrl+Shift+E)
Te permite exportar el documento en una gran variedad de formatos de exportación
compatibles con Web Designer. (Consulta en el capítulo Importación y exportación (en la
página 316) la lista de formatos).

Visualizar página web


Exporta el documento de página web actual y realiza una vista previa. El documento es
exportado a la misma ubicación a la que fue exportada por última vez (sobrescribiendo los
archivos necesarios sin sugerir) o a una ubicación temporal si la página no ha sido
exportada todavía. A continuación aparece una ventana de navegador mostrando la
primera página de la página web.
344 Menús y shortcuts de teclado
Esta es la forma más rápida de realizar una vista previa de tu página cuando
trabajas en ella. También puedes realizar una vista previa haciendo clic en el botón
en la barra de herramientas de web.

Vista previa de la página (F12)


Exporta y ofrece una vista previa de la página actual del documento de sitio web.

Exportar página web


Exportar el documento actual como HTML.

Publicar página web


Esto realiza la misma operación que el botón en la barra de herramientas de web.
Exporta y luego publica el documento de página web actual a tu página web.

Si todavía no has introducido los detalles FTP para tu espacio web, la pestaña PUBLICAR
en el diálogo de PROPIEDADES WEB se visualizará primero. Luego, si todavía no has
exportado la página localmente, el diálogo de exportación aparecerá para permitirte que lo
hagas. A continuación la página web se publica en tu espacio web. Un indicador de
progreso aparece durantes la operación de publicación.

Consulta el capítulo Primeros pasos (en la página 59) para más detalles sobre la
publicación.

Vista previa flash


Esta opción sólo se activa cuando el documento actual es un documento de animación.
Esto exporta tu animación como flash y abre una ventana popup mostrando tu animación
flash reproduciéndose. La ventana también incluye información básica sobre tu animación
flash, como por ejemplo el tamaño del archivo flash.

El botón en la barra de herramientas es una forma más rápida de invocar esta


operación.

Exportar animación
Exporta una animación para utilizarla en una página web. (Lee el capítulo Gráficos web).

Información de documento
Esto muestra una ventana de información sobre el documento seleccionado que incluye
las fuentes utilizadas en el documento actual.

Opciones de página
Sirve para modificar el diseño de página, su tamaño, etc.

Configuración de impresora
Establece las opciones relacionadas con la impresora o el archivo de impresión actual.
(Para más información, lee el capítulo Impresión (en la página 309)).
Menús y shortcuts de teclado 345
Opciones de impresión
Modifica las opciones de la impresión, incluyendo la orientación y el tamaño de impresión.
(Para más información, lee el capítulo Impresión (en la página 309)).

Imprimir (Ctrl+P)
Configura las opciones relacionadas con la impresión del documento y te permite
imprimirlo. (Para más información, lee el capítulo Impresión (en la página 309)).

Cerrar
Cierra todas las ventanas y borra Web Designer de la memoria de trabajo. Se te advertirá
si hay cambios sin guardar.

Menú Edición

Deshacer (barra de control estándar o Ctrl+Z)


Deshace la operación anterior. Lo que aparece escrito en esta opción refleja la última
operación realizada. Por ejemplo DESHACER CORTAR. (Lee el capítulo Deshacer y rehacer
(en la página 87)).

Rehacer (barra de control estándar o Ctrl+Y)


Cancela la última opción DESHACER. Lo que aparece escrito en esta opción refleja la última
operación DESHACER realizada. (Lee el capítulo Deshacer y rehacer).

Cortar (barra de control edición o Ctrl+X)


Corta el objeto seleccionado al portapapeles. Lo que aparece escrito en esta opción refleja
el tipo de objeto seleccionado. (Lee el capítulo Trabajar con objetos (en la página 94)).

Copiar (barra de control edición o Ctrl+C)


Copia el objeto seleccionado en el portapapeles. Lo que aparece escrito en esta opción
refleja el tipo de objeto seleccionado. El objeto permanece en el lugar del documento. (Lee
el capítulo Trabajar con objetos (en la página 94)).

Pegar (barra de control edición o Ctrl+V)


Pega el contenido del portapapeles en el documento seleccionado. Lo que aparece escrito
en esta opción refleja el contenido del portapapeles. (Lee el capítulo Trabajar con objetos
(en la página 94)).

Pegar en lugar (Ctrl+Shift+V)


Es igual a PEGAR , excepto que el objeto se pegará en la misma posición de donde lo has
copiado. Esto es útil para mover objetos de una capa o página a otra sin cambiar su
posición X/Y.
346 Menús y shortcuts de teclado
Pegar formato/atributos (Ctrl+Shift+A)
Esta opción te permite copiar atributos (como el modelo de línea o el color de relleno) entre
objetos. Es una forma rápida de aplicar múltiples atributos. Cuando pegas atributos, los
atributos del objeto que se encuentra en el portapapeles se aplican a todos los objetos
seleccionados actualmente (consulta Trabajar con objetos (en la página 112)).

Eliminar (“Edición“- Barra de símbolos y barra de símbolos estándar o


“Supr”)
Borra el objeto marcado. El texto de esta opción corresponde al objeto seleccionado. Lee
el capítulo: El trabajo con objetos (en la página 88).

Seleccionar todo (Ctrl+A)


Selecciona todos los objetos de las capas editables. (Las capas editables y bloqueadas
están descritas en el capítulo Capas (en la página 275)).

Eliminar selección/Restaurar atributos actuales (Esc)


Deselecciona todos los objetos. Si nada está seleccionado, los atributos actuales vuelven
a sus valores por defecto. Puedes ejecutar esta opción si presionas ESC dos veces.

Duplicar (barra de control edición o Ctrl+D)


Copia el objeto seleccionado y coloca la copia un poco desplazada del original. La copia
se convierte en el objeto seleccionado. La distancia de desplazamiento puede
personalizarse (lee el capítulo Personalización de Web Designer (en la página 334).

Clonar (Ctrl+K)
Al igual que DUPLICAR , copia el objeto seleccionado pero coloca la copia directamente
arriba del original. La copia se convierte en el objeto seleccionado.

Páginas
El submenú Páginas te permite añadir o quitar páginas de tu documento multi-página,
duplicar la página actual o mover la página actual más arriba o abajo del documento. Para
más información sobre documentos multi-página ve al capítulo Documentos multi-página
(en la página 73).

Menú Arreglo

Mover a la capa al frente (barra de control arreglo o Ctrl+Shift+U)


Mueve el objeto seleccionado una capa hacia el frente. El objeto se convierte en el objeto
de fondo de la nueva capa. En un documento con animación, esta opción es MOVER AL
PRÓXIMO FRAME .
Menús y shortcuts de teclado 347
Traer al frente (barra de control arreglo o Ctrl+F)
Mueve el objeto seleccionado hasta el frente de los otros objetos sobre la misma capa.
Lee el capítulo Trabajar con objetos (en la página 88) para más información.

Mover adelante (barra de control arreglo o Ctrl+Shift+F)


Mueve el objeto seleccionado un paso hacia adelante. (Lee el capítulo Trabajar con objetos
(en la página 88)).

Mover atrás (barra de control arreglo o Ctrl+Shift+B)


Mueve el objeto seleccionado un paso hacia atrás. (Lee el capítulo Trabajar con objetos).

Llevar atrás (barra de control arreglo o Ctrl+B)


Mueve el objeto seleccionado detrás de los otros objetos sobre la misma capa. (Lee el
capítulo Trabajar con objetos (en la página 88)).

Mover a la capa de atrás (barra de control arreglo o Ctrl+Shift+D)


Mueve el objeto seleccionado una capa hacia atrás. El objeto se convierte en el objeto de
primer plano de la nueva capa. En un documento con animación, esta opción es MOVER AL
FRAME ANTERIOR .

Agrupar (barra de control arreglo o Ctrl+G)


Agrupa los objetos seleccionados para manejarlos como un solo objeto. (Lee el capítulo
Trabajar con objetos (en la página 88)).

Desagrupar (barra de control arreglo o Ctrl+U)


Separa el grupo o los grupos en objetos individuales. Esta opción no está disponible, salvo
que se haya seleccionado un grupo. O cuando hay al menos un grupo dentro de los
objetos seleccionados.

Aplicar grupo suave (Ctrl+Alt+G)


Haz que los objetos seleccionados formen un grupo suave. Al diferencia de los grupos, los
grupos suaves pueden incluir objetos en diferentes capas. Consulta Trabajar con objetos
(en la página 108) para detalles.

Borrar grupo suave (Ctrl+Alt+U)


Separa el grupo suave seleccionado de modo que los objetos puedan seleccionarse por
separado de nuevo.

Crear barra de navegación


Esta función te permite crear una barra de navegación a partir de un único botón.
Encontrarás más información en el capítulo BARRAS DE NAVEGACIÓN (en la página 254).
348 Menús y shortcuts de teclado
Alineación (Ctrl+Shift+L)
Se utiliza para alinear varios objetos. No tiene efecto si hay un solo objeto seleccionado.
(Para más información, lee el capítulo Trabajar con objetos (en la página 109)).

Combinar formas (barra de control arreglo)


El submenú de combinar formas te permite:

• Añadir formas.
• Sustraer la forma superior de las inferiores.
• Descartar partes de otras formas no cubiertas por la forma superior.
• Utilizar la forma superior para cortar las otras formas.

Sólo las formas seleccionadas se combinarán. Las formas sin seleccionar no se


modificarán. (Para más información, lee el capítulo Trabajar con formas (en la página 129)).

Adaptar texto a la curva / Eliminar texto de la curva


Permite adaptar un texto a una curva o eliminar el texto de la curva (ver capítulo Trabajo
con textos).

Contornear texto
Hacer que el texto contornee al objeto. VerContornear objeto con texto (en la página 165)
para más detalles.

Repetir en todas las páginas (Shift+Ctrl+Alt+R)


El objeto seleccionado se copiará en el mismo lugar en todas las páginas. La función
creará automáticamente el nombre Repeating:AutoRepeat y se aplicará a todas las copias,
a partir de allí se actualizará cada vez que selecciones ACTUALIZAR OBJETOS REPETIDOS .

Actualizar objetos repetidos


Copia los objetos marcados como repetidos en la página actual a todas las demás
páginas que contienen copias de estos objetos. Todas las barras de navegación
disponibles de la galería de diseños están configurados como objetos repetidos. Esto
significa que puedes editar una barra de navegación en la página actual (por ejemplo
cambia las etiquetas y los enlaces de los botones) y luego, invocando esta operación,
actualiza esta misma barra de navegación en todas las demás páginas para que se
igualen.

Actualizar objetos repetidos (en la página 114) en todas las páginas

Detener repetición (Shift+Ctrl+Alt+O)


La función Arreglo > Detener repetición te permite desactivar la naturaleza de repetición de
un objeto o en todas las copias de ese objeto en tu sitio web.

Obtén más información en el capítulo Trabajar con objetos (en la página 116).
Menús y shortcuts de teclado 349

Menú Herramientas

Galerías
Páginas y galerías (barra de control galerías o "F10")
Muestra u oculta la GALERÍA DE CAPAS. Sólo utilizada en documentos no animados (ver
Capas (en la página 275)).

Galería de mapas de bits (barra de control de galerías o "F11")


Muestra u oculta la GALERÍA DE MAPAS DE BITS (ver Manejo de mapas de bits (en la página
224)).

Galería de líneas (barra de control de galerías o"F12")


Muestra u oculta la GALERÍA DE LÍNEAS (ver Dibujo de líneas).

Galería de diseños (barra de control de galerías o "×+ F10")


Muestra u oculta la GALERÍA DE DISEÑOS (ver Importación y exportación (en la página 316)).

Galería de rellenos (barra de control de galerías o "×+ F11")


Muestra u oculta la GALERÍA DE RELLENOS (ver Manejo de mapas de bits).

Galería de frames (barra de control de galerías o "×+ F12")


Muestra u oculta la GALERÍA DE FRAMES . Sólo utilizado en documentos animados (ver
Gráficos web (en la página 283)).

Editor de color (Ctrl+Shift+E)


Abre el EDITOR DE COLOR. (Consulta el capítulo Trabajar con colores.)

Nombres
Abre el diálogo Aplicar/Eliminar nombres (en la página 113).

Propiedades web (Ctrl+Shift+W)


Abre el diálogo PROPIEDADES WEB que permite añadir a tu documento de página funciones
web como enlaces, capas popup, referencias, etc.. Además puedes controlar cómo se
exportan las imágenes para la página web y configurar otras propiedades web más
utilizando este diálogo. Consulta Primeros pasos (en la página 16) para más detalles.

Optimizar foto
Optimizar resolución del mapa de bits para utilizar tus diseños con MAGIX Web Designer
6. Ver Optimización de fotos (en la página 238) para más detalles.

Optimizar todos los JPEG


Optimiza el diseño de todas las fotos JPEG. Lee Optimización de fotos (en la página 238).
350 Menús y shortcuts de teclado
Animación
Este menú sólo está disponible en los documentos con animación y ofrece tres opciones:

• PROPIEDADES DE LA ANIMACIÓN: en este diálogo puedes cambiar las opciones para la


animación y para cada frame.
• VISTA PREVIA DE TODOS LOS FRAMES: Utiliza esto para realizar una vista previa de todos
los frames de tu animación. Esto no es muy útil para animaciones flash porque sólo
muestra los frames clave sin transiciones (tweening).
• VISTA PREVIA DE ANIMACIÓN GIF EN EL NAVEGADOR: al escoger esto se creará un archivo
GIF animado a partir de los frames de tu documento y se abrirá en tu navegador web
para que veas el resultado. Hay un botón en la barra de animación para un acceso
rápido a esta operación.
• VISTA PREVIA DE ANIMACIÓN FLASH EN EL EXPLORADOR: Abrirá una ventana donde se
reproduce tu animación como flash, tal como aparecerá en un navegador web cuando
la exportes. Utiliza esto para realizar vistas previas de animaciones flash. Hay un botón
en la barra de animación para un acceso rápido a esta operación.

Revisar ortografía mientras se escribe


Esta opción activa el CORRECTOR DE ORTOGRAFÍA (en la página 159) en la herramienta de
texto.

Opciones (Ctrl+Shift+O)
Abre el diálogo de OPCIONES. (Descrito en el capítulo Personalización de Web Designer).

Menú Ventana

Eliminar selección/Restaurar atributos actuales (Esc)


Deselecciona todos los objetos. Si nada está seleccionado, los atributos actuales vuelven
a sus valores por defecto. Puedes ejecutar esta opción si presionas ESC dos veces.

Nueva ventana
Abre una nueva ventana en el documento seleccionado.

Arreglar ventanas
Ordena todas las ventanas de Web Designer como mosaico.

Barras de control
Muestra el diálogo de BARRAS DE CONTROL . (Descrito en el capítulo Personalización de
Web Designer (en la página 337)).

Calidad (barra de control estándar)


Selecciona la forma en que los objetos se visualizan, desde contorno hasta antialiasing.
(Consulta el capítulo Trabajar con documentos).
Menús y shortcuts de teclado 351
Pantalla completa (8 del teclado numérico)
Cambia entre el modo de pantalla completa y de pantalla normal.

Mostrar cuadrícula (#)


Muestra la cuadrícula de pantalla. (Consulta el capítulo Trabajar con documentos (en la
página 69)).

Mostrar guías (1 del teclado numérico)


Muestra u oculta la capa guía que contiene todas las líneas guía y objetos guía.

Mostrar bordes de impresión


La mayoría de las impresoras tienen un margen que no se imprime (el borde de impresión)
alrededor del borde de la página. Con MOSTRAR BORDES DE IMPRESIÓN se verán dos
rectángulos en la pantalla. Uno te muestra el borde del papel y el otro el área que se
imprimirá.

Ajustar a cuadrícula (. del teclado numérico)


Con esta opción configurada un objeto se ajustará al punto de cuadrícula cercano al que
se lo arrastre. (Consulta el capítulo Trabajar con documentos (en la página 69)).

Ajustar a guías (2 del teclado numérico)


Con esta opción configurada un objeto se ajustará a cualquier guía cercana al que se la
arrastre. (Consulta el capítulo Trabajar con objetos (en la página 105)).

Ajustar a objetos (* del teclado numérico)


Con esta opción seleccionada, arrastrar un control deslizante hasta otro objeto ajusta el
control al objeto. Lee el capítulo Trabajar con objetos (en la página 105) para más
información. Puedes ajustar la distancia de ajuste. Para más información, lee el capítulo
Personalización de Web Designer.

Documentos abiertos
Una lista de todos los documentos abiertos actualmente. Un clic sobre un nombre
selecciona el documento correspondiente. (Ctrl+F6 también cambia entre los
documentos.) Un * tras el nombre del documento señala que no se han guardado cambios
de ese documento.

Menú Ayuda

Ayuda de MAGIX Web Designer 6


Utiliza la opción "Temas de ayuda" del menú "Ayuda" para abrir una página de inicio de la
ayuda del programa. Aquí puedes leer la ayuda paso a paso o escoger una sección
específica a través de la estructura de árbol de la derecha.
352 Menús y shortcuts de teclado
Ayuda
Esta opción está disponible en casi todos los lugares del programa y abre la ayuda del
programa en el tema correspondiente. Utiliza esta función para obtener ayuda sobre
cualquier función de MAGIX Web Designer 6.

Shortcut: F1

Más Web Designer


Este menú contiene enlaces de internet útiles para la página web de Xara y recursos online
útiles.

Consejo del día


Ver el consejo del día. En la ventana del consejo del día hay un recuadro en el que puedes
seleccionar si quieres ver o no un consejo cada vez que inicias Web Designer.

Actualizar programa
Esto comprueba de forma online si hay actualizaciones de programas disponibles.

En primer lugar aparecerá una pantalla que te comunica si hay una nueva versión principal
de Web Designer para actualizar. Luego, si has registrado el programa con Xara, se
iniciará un proceso automático de actualización que comprobará si hay disponibles
actualizaciones de programa gratuitas. Si hay una actualización disponible, se descargará
automáticamente y luego se cierra MAGIX Web Designer 6 y se instala la actualización. El
programa luego se reinicia automáticamente para ti.'

Utiliza la opción REGISTRARME en el menú AYUDA para registrar el programa con Xara.

Programa de afiliado
Si no te has registrado en el programa de afiliados cuando desbloquees MAGIX Web
Designer 6, puedes utilizar esta opción para unirte al programa o para cambiar la opción
de afiliación previamente. Selecciona esta opción para abrir el diálogo de afiliación que te
explica todo sobre el programa de afiliación. Puedes comenzar a cobrar comisiones desde
tu página web MAGIX Web Designer 6 o donarla por caridad, seleccionando las opciones
que se muestran en el diálogo.

Acerca de MAGIX Web Designer 6


Se verá información sobre el Copyright y el número de la versión de MAGIX Web Designer
6.

Registrarme
Utiliza esta opción para registrar online en Xara tu adquisición para que puedas obtener
actualizaciones de programa gratuitas, descuentos en actualizaciones, ofertas especiales y
otros beneficios.
Menús y shortcuts de teclado 353

Shortcuts de teclado

Las herramientas
Herramienta de selección F2 o V o Alt+S
Herramienta de edición de forma F4
Herramienta de rectángulo × + F3 o M
Herramienta de elipse × + F4 o L
Herramienta de texto F8 o T
Herramienta de relleno F5 o G
Herramienta de transparencia F6
Herramienta de sombra Ctrl + F2
Herramienta de foto P
Herramienta de desplazamiento (push tool) × + F8 o H o Alt + X (o barra espaciadora si
no está en la herramienta de texto)
Herramienta de zoom × + F7 o Z o Alt + Z
Las galerías
Galería de diseños × + F10
Galería de rellenos × + F11
Galería de frames × + F12
Galería de capas F10
Galería de mapa de bits F11
Galería de líneas F12

Zoom
Zoom previo Ctrl+R
Zoom a selección Ctrl+×+Z
Zoom a dibujo Ctrl+×+J
Zoom a página Ctrl+×+P
Ampliar (zoom in) Ctrl + + del teclado numérico
Alejar (zoom out) Ctrl+ - del teclado numérico
Zoom al 100% 1
Zoom al 200% 2
Zoom al 300% 3
Zoom al 400% 4
Zoom al 50% 5

También puedes ampliar/alejar y desplazar el documento utilizando la rueda del ratón


(Ctrl+Rueda amplia/aleja).

Manipulación de documentos
En la herramienta de texto, los shortcuts señalados con el asterisco (*) tienen una acción
diferente. Lee a continuación.
354 Menús y shortcuts de teclado
Nuevo documento Ctrl+N
Nuevo documento animado Ctrl+×+N
Abrir documento Ctrl+O
Cerrar documento Ctrl+W
Cambiar documento Ctrl+Tab
Imprimir documento Ctrl+P
Guardar documento Ctrl+S
Importar Ctrl+×+I
Importar gráficos de la web Alt+W *
Exportar Ctrl+×+E
Calcular tiempo de redibujo Ctrl+×+T
Mostrar cuadrícula #
Mostrar guías 1 del teclado numérico
Ajustar a cuadrícula . del teclado numérico
Ajustar a guías 2 del teclado numérico
Ajustar a objetos * del teclado numérico
Seleccionar pantalla completa 8 del teclado numérico
Mostrar reglas Ctrl+Shift+R
Deshacer Ctrl+Z o < o ,
Rehacer Ctrl+Y o > o .

Manipulación de objetos
En la herramienta de texto, los shortcuts señalados con el asterisco (*) tienen una acción
diferente. Lee a continuación.

Seleccionar todo Ctrl + A *


Seleccionar el próximo objeto Pestaña
Eliminar la selección Eliminar *
Borrar selección Esc
Traer objeto al frente Ctrl + F
Llevar objeto al fondo Ctrl + B *
Mover objeto hacia adelante Ctrl+ñ+F

Mover objeto hacia atrás Ctrl +ñ+ B

Mover objeto a la capa de adelante Ctrl +ñ+ U


(documentos de dibujo)
Mover objeto a la capa de atrás Ctrl +ñ+ D
(documentos de dibujo)
Mover al próximo frame (documentos de Ctrl +ñ+ U
animación)
Mover al frame anterior (documentos de Ctrl + ñ+ D
animación)
Agrupar objetos Ctrl + G
Desagrupar objetos Ctrl + U
Clonar objeto Ctrl + K
Duplicar objeto con desplazamiento Ctrl + D
Copiar objeto en el portapapeles Ctrl + C
Cortar selección al portapapeles Ctrl + X
Menús y shortcuts de teclado 355
Pegar objeto del portapapeles Ctrl + V
Pegar objeto en la posición original Ctrl + ñ+ V

Pegar atributos Ctrl + ñ+ A

Crear copia de mapa de bits Ctrl +ñ+ C

Añadir formas Ctrl + 1


Sustraer formas Ctrl + 2
Formas de intersección Ctrl + 3
Segmentar formas Ctrl + 4
Abrir el diálogo de alineación Ctrl + ñ+ L*

Dirección web Ctrl +ñ+ W

Mover los objetos seleccionados: teclas de flecha con la herramienta de selección (ver
Desplazar objetos (en la página 93))

Mover los controles deslizantes seleccionados: teclas de flecha en otras herramientas que
no sean la herramienta de selección

Herramienta de texto
Teclas de navegación Mueven el cursor de texto hacia arriba, abajo, izquierda o
derecha
un carácter por vez.
Inicio Mueve el cursor de texto al inicio de la línea.
Fin Mueve el cursor de texto al final de la línea.
Ctrl+flecha Mueve el cursor de texto una palabra hacia la izquierda/derecha.
izquierda/derecha.
Ctrl+Inicio Mueve el cursor de texto al inicio de la primera línea en un objeto
de texto.
Ctrl+Fin Mueve el cursor de texto al final de la última línea en un objeto de
texto.
Ctrl+A Selecciona todos los caracteres en un objeto de texto.

Ctrl+B Aplica negrita.

Ctrl+I Aplica cursiva.

Ctrl+C Copia la región de texto seleccionado en el portapapeles.

Ctrl+L Selecciona todos los caracteres de la línea que contiene el cursor


de texto.
Ctrl+×+L Inserta el texto de ejemplo 'Lorem ipsum'

Ctrl+V Pega el texto en la posición del cursor de texto (si el portapapeles


contiene texto).
356 Menús y shortcuts de teclado
Ctrl+W Intercambia la mayúscula y minúscula del carácter que se
encuentra a la derecha del cursor de texto.
Ctrl+- Inserta un guión suave (aparece solamente cuando se encuentra
la final de la línea).
Ctrl+×+- Inserta guión rígido para prevenir que un guión se malinterprete al
final de la línea.
Ctrl+×+< Aumenta/reduce el tamaño de la fuente del texto seleccionado
Ctrl+×+> (sólo si toda la selección tiene el mismo tamaño)
Alt+teclas de flecha Aumenta / reduce el espaciado / kerning.

↵ Inicia una nueva línea de texto.

Eliminar Elimina el carácter a la derecha del cursor de texto. Si el cursor


se encuentra al final de una línea de texto, une esta línea con la
línea de abajo.
Retroceso Elimina el carácter a la izquierda del cursor de texto. Si el cursor
se encuentra al inicio de una línea de texto, une esta línea con la
línea de arriba.
×+flechas Selecciona todo el texto entre la posición del cursor y el inicio de
la línea.
×+Fin Selecciona todo el texto entre la posición del cursor y el final de la
línea.

Caracteres especiales (en la herramienta de texto)


Ctrl+barra espaciadora Espacio rígido (las palabras con espacios
rígidos entre ellas no se separaran al final de
la línea)
Ctrl + – del teclado numérico – Guión "n" (este guión tiene el ancho de una
letra "n" y es más largo que un menos).
Ctrl + Alt + - del teclado numérico — Guión "m" (este guión es un guión largo)
Ctrl + Alt + .(punto) … Puntos suspensivos
Ctrl + Alt + C © Copyright
Ctrl + Alt + R ® Registrado
Ctrl + Alt + T ™ Marca registrada
Ctrl + Alt + B • Viñeta

Herramienta de difuminación
Puedes controlar la barra de difuminación con tu ratón y el teclado. Si el campo de texto o
la barra de difuminación están seleccionados:

Rueda del ratón arriba/abajo aumenta o disminuye la difuminación


Ctrl+Rueda del ratón arriba/abajo aumenta o disminuye en pasos mayores.
Re. pág. / Av. pág. aumenta o disminuye en pasos mayores.
Inicio / fin selecciona los valores mínimos o máximos de
difuminación.
Menús y shortcuts de teclado 357
Otros
Editor de color Ctrl+E (abre y cierra)
Diálogo "Opciones" Ctrl+×+O
Ayuda de MAGIX Web Designer 6 F1
358 Legal

Legal

Copyright

Esta documentación está protegida por ley. Quedan reservados todos los derechos
especialmente los de duplicación, circulación y traducción.

Ninguna parte de esta publicación puede reproducirse a través de fotocopias, microfilm o


cualquier otro procedimiento, así como tampoco transferirse a un idioma utilizable por
máquina alguna, especialmente equipos de procesamiento de datos, sin la aprobación por
escrito del propietario de los derechos de autor.

Quedan reservados todos los copyrights.

Otros nombres de productos mencionados son marca registrada de su respectivo


fabricante. Queda reservado el derecho a introducir cambios al contenido, así como
modificaciones al programa.

Xara es marca registrada de Xara Group Ltd.

Xara Group Ltd. es una compañía afiliada de MAGIX AG.

MAGIX es marca registrada de MAGIX AG.

Los otros nombres de producto pueden ser marca registrada del respectivo fabricante.

This product uses MAGIX patent pending technology.

Copyright © Xara Group Ltd., 1994-2010. Todos los derechos reservados.

Acuerdo de licencia de usuario final de clientes de XARA


Web Designer
© 2010 Xara Group Ltd

AVISO IMPORTANTE: El software <Programmnam> (en adelante"Software") es copyright


de Xara Group Limited ("Xara") con sede principal en Gaddesden Place, Hemel
Hempstead, Herts, HP2 6EX, Reino Unido, y no podrá almacenarse ni copiarse en ningún
ordenador sin la licencia de Xara. Se ofrece una licencia de acuerdo con los términos del
Acuerdo de licencia de usuario final ("EULA" por sus siglas en inglés) establecidos a
continuación.

Si aceptas los términos del Acuerdo de licencia, selecciona "Sí".

Seleccionar Sí e instalar el software constituye la aceptación de los términos del Acuerdo


de licencia de usuario final. Por favor, lee y acepta los términos y condiciones del Acuerdo
Legal 359
antes de instalar el software. No instales el software si no estás de acuerdo con los
términos y condiciones del Acuerdo de licencia.

Si no aceptas estos términos y has adquirido el software, podrás retornar el CD-ROM con
el software dentro de los 14 días de la fecha de compra, siempre que esté sin utilizar e
intacto; o, en el caso de la descarga, deberás enviar una Carta de destrucción a tu
proveedor junto con la prueba de compra para obtener un reembolso.

ACUERDO DE LICENCIA DE USUARIO FINAL DE CLIENTES DE XARA WEB


DESIGNER ("EULA")

Está permitido:

1. cargar o descargar el software y utilizarlo solamente en un ordenador de un solo usuario


que se encuentre bajo control personal; a no ser que quieras
2. copiar el software de un ordenador a otro que se encuentre bajo tu control personal,
siempre que se utilice en un solo ordenador por vez y sólo por ti. Las copias deberán
reproducir e incluir todos los avisos de copyright de Xara;
3. transferir el software (completo con toda su documentación asociada) y esta licencia a
otra persona que haya aceptado los términos de este Acuerdo y la transferencia
simultánea de todas las copias que se han realizado a esa persona o la destrucción de
todas las copias no transferidas. Si el receptor de la transferencia no acepta los términos
de esta licencia, esta licencia finalizará automáticamente. El transmisor no conservará
ningún derecho de acuerdo con este Acuerdo en relación con el software y la licencia
transferidos.

No está permitido:

(a) utilizar el software en ningún ordenador o sistema que permita el acceso electrónico al
mismo por más de un usuario;
(b) el alquiler, arrendamiento, sublicenciamiento, préstamo, copia (excepto lo
expresamente establecido en este Acuerdo), modificación, adaptación, fusión, traducción,
ingeniería inversa, decompilación, desmontaje ni creación de trabajos derivados basados
en todo o una parte del software o su documentación asociada, salvo lo permitido por ley;
(c) salvo lo expresamente establecido en este Acuerdo, la utilización, reproducción o trato
de ningún tipo con este software.

DURACIÓN
La licencia estará vigente hasta que se destruya el software y la documentación junto con
todas las copias. También finalizará en caso de violación de este Acuerdo. Al momento de
la finalización, se acuerda destruir todas las copias del software y su documentación,
incluyendo el software guardado en el disco duro de cualquier ordenador. Si se está
utilizando la versión de prueba del software, entonces los derechos de utilización del
software o de las imágenes creadas con el mismo finalizarán al momento del vencimiento
del periodo de prueba.

PROPIEDAD
Solamente eres propietario del CD-ROM (o reemplazo autorizado) en el que se ha
suministrado el software en caso de no haberse descargado. Podrás conservar este
CD-ROM siempre que se haya borrado el software. Xara conservará en todo momento la
propiedad del software según lo registrado en el CD-ROM original y todas las copias
360 Legal
posteriores del mismo sin importar su forma. Este Acuerdo es aplicable solamente al
otorgamiento de la licencia y no al contrato de venta del CD-ROM.

ACCESO ONLINE A SOFTWARE DE TERCERO INCLUIDO


El software puede proveer acceso online a un software de terceros, p. ej. widgets o
gadgets, que se abren online mediante terceros. El software solo podrá suministrar dicho
acceso si tu PC está conectado con Internet. Si aceptas los términos de este EULA,
acuerdas que el software puede suministrar dicho acceso al software de terceros.

A fin de clarificación: Xara no es propietario de este software de terceros y Xara no acepta


responsabilidad alguna por dicho software de terceros. En particular, Xara no garantiza la
disponibilidad de dicho software de terceros.

RESTRICCIONES
Esta licencia otorga el derecho a publicar, distribuir y reproducir imágenes creadas con
este software, incluyendo plantillas de gráficos, fotos, fuentes y rellenos incluidos en el
software, con las siguientes limitaciones:

1. Las plantillas, los gráficos, las fotos y las fuentes suministrados por el software no
pueden redistribuirse, venderse ni publicarse como una colección de imágenes ni como
parte de una colección de imágenes y, de forma específica, aunque no exclusiva, no
podrán incluirse en ninguna plantilla, clip·art, fuente, textura ni colección fotográfica, ya sea
en páginas web o de distribución por medios electrónicos como CD o discos, ni tampoco
podrán incluirse como parte de otro producto de ninguna forma, ya se ésta comercial o de
otro tipo. Sin perjuicio de lo anteriormente mencionado, la plantilla, gráfico, foto o fuente
podrá incluirse en una página web creada con Web Designer para propósitos personales
del cliente.
2. Las fotos incluidas con el software pueden utilizarse y distribuirse con propósitos
personales, pero cualquier redistribución comercial requerirá la adquisición de una licencia
ampliada de Xara o su licenciantes. Contacta con Xara Group Ltd para más detalles.
3. Cualquier aviso de copyright que no esté incluido en el HTML, Javascript o cualquier
otro código exportado por el software no debe eliminarse ni modificarse.
4. Algunas fuentes fueron suministradas por terceros que retienen el copyright. En todos
los casos el copyright queda reservado por Xara o el otorgante de la licencia y está
protegido por leyes internacionales de copyright.
5. Las imágenes creadas incluidas en este software o creadas por el mismo no podrán
utilizarse para ningún propósito prohibido por ley.
6. Considerando las restricciones mencionadas anteriormente, se permite crear páginas
web para tus propósitos personales o para propósitos comerciales de tu cliente.

GARANTÍAS Y RECURSOS JUDICIALES

1. Xara garantiza que el medio de almacenamiento en el que se ha suministrado el


software está libre de defectos materiales o de fabricación durante el uso normal de 90
días a partir de la fecha original de compra. En caso de que ocurriera un defecto en el CD
durante este periodo, podrá retornarse el disco junto con la prueba de compra al
proveedor, quien lo reemplazará sin costo alguno.
Legal 361
2. Xara garantiza que el software funcionará sustancialmente de acuerdo con su
documentación acompañante (siempre que el software se utilice de forma apropiada en el
ordenador y con el sistema operativo para el que se ha diseñado) y que la documentación
describe de forma correcta el funcionamiento del software en todos sus aspectos
materiales. Si se notifica a Xara cualquier error significativo en el software durante los 90
días desde la fecha original de compra, se corregirá dicho error dentro de un periodo de
tiempo razonable (con elección de reemplazo) o, según se requiera, se devolverá el precio
del software (contra devolución del software y su documentación).
3. Las garantías establecidas en los párrafos 1 y 2 mencionados anteriormente son las
únicas garantías y reemplazan todas las condiciones de garantía u otros términos
expresados o implicados por ley o por forma alguna, que quedan excluidos por el presente
acuerdo, según lo permitido por ley. Los párrafos 1 y 2 anteriores también establecen los
únicos recursos judiciales en caso de violación de las garantías de Xara.
4. En particular, Xara no garantiza que el software cumplirá con sus requerimientos ni que
el software operará de forma ininterrumpida y sin errores ni que todos los errores del
software puedan corregirse. El cliente carga y utiliza el software a su propio riesgo y en
ningún caso Xara será responsable de cualquier pérdida o daño de ningún tipo (excepto
lesión personal o muerte resultado de la negligencia de Xara), incluyendo pérdida de
ganancias o pérdidas derivadas indirecta o directamente de la utilización o de la
incapacidad de utilización del software o de errores o deficiencias en el software causadas
por negligencia o por otra forma, excepto lo expresamente establecido en este Acuerdo.

CONSUMIDORES
Ninguna parte de este Acuerdo afectará los derechos legales como consumidor.

LEY
Este Acuerdo estará sujeto a la ley de Inglaterra.

Si tienes alguna pregunta acerca de este Acuerdo, por favor, escribe a Xara Group
Limited, Gaddesden Place, Hemel Hempstead, Herts, HP2 6EX, Reino Unido.

Agradecimientos

La fuente Geotype se suministró con el gentil permiso de Gary Bouton y continúa siendo ©
de Gary Bouton, visita www.theboutons.com. Algunas fuentes copyright © FontBank Inc.
Todos los derechos reservados. Otras fuentes fueron suministradas por terceros que
retienen el copyright.

En todos los casos el copyright queda reservado por Xara o el otorgante de la licencia y
está protegido por leyes internacionales de copyright.

Xara es marca registrada de Xara Group Ltd. Los contenidos de esta documentación y los
software asociados de Xara Xtreme son propiedad de Xara Group Ltd. y tienen copyright.
Cualquier reproducción completa o en partes está estrictamente prohibida. Para obtener
copias adicionales del software, por favor contacta al Xara Group Ltd. Términos de licencia
de MAGIX Web Designer 6.

Las partes redistribuibles de Microsoft MSVC y MFC son copyright de Microsoft


Corporation. Microsoft, Internet Explorer, Windows y Windows Vista son marcas
362 Legal
comerciales o marcas comerciales registradas de Microsoft Corporation en los Estados
Unidos y/o en otros países.

Adobe, Encapsulated PostScript, Illustrator, Photoshop, Dreamweaver, Fireworks,


Freehand, Flash, PostScript y Type Manager son marcas comerciales registradas o marcas
comerciales de Adobe Systems Incorporated en los Estados Unidos y/o en otros países.

MAGIX es marca registrada de MAGIX AG.

Apple, Macintosh y TrueType son marcas comerciales registradas de Apple Computer, Inc.

Corel, CorelDRAW y Paintshop Pro son marcas comerciales registradas o marcas


comerciales de Corel Corporation.

A C-program for MT19937, Copyright (C) 1997 - 2002, Makoto Matsumoto and Takuji
Nishimura, All rights reserved. Más información de copyright en el archivo MTRand.txt que
se encuentra en la carpeta HelpAndSupport de la instalación del programa.

Algún código de programa es Copyright © 1996 Silicon Graphics Computer Systems, Inc..
Más información sobre copyright puede encontrarse en el directorio sg.txt
HelpAndSupport de tu instalación de Xtreme.

Algún código de programa es Copyright© 1994 Hewlett-Packard Company. Más


información de copyright en el directorio hp.txt HelpAndSupport de la instalación del
programa.

Parte de este software está basado en el trabajo del Independent JPEG Group.

El filtro de importación PDF incluye y utiliza los programas externos GPL: fax2png.exe and
fax2tiff.exe. El código fuente para estos programas está disponible en las siguientes
páginas web, o también los puedes encargar a Xara:

MAGIX Web Designer 6 utiliza la biblioteca de compresión de datos zlibwww.zlib.net.

Todas las otras marcas comerciales o marcas comerciales registradas son propiedad de
sus respectivos fabricantes.
Index 363

Index

¿Cuáles son las novedades en MAGIX Web Designer 6?...............................10


¿Por qué Web Designer es tan especial? ......................................................13
¿Qué funciones de MAGIX Web Designer 6 son compatibles con Flash?.....300
¿Qué son las funciones deshacer y rehacer?.................................................87

Abrir (barra de control estándar o Ctrl+O)....................................................342


Abrir enlace en:...........................................................................................200
Abrir un documento de animación...............................................................307
Abrir un documento existente .......................................................................64
Abrir una segunda ventana ...........................................................................69
Acelerar y desacelerar.................................................................................304
Acerca de MAGIX Web Designer 6..............................................................352
Acerca de Web Designer ..............................................................................15
Activación y desactivación de las barras de navegación del sitio..................257
Actualización de la barra de navegación en todas las páginas .....................261
Actualizar objetos repetidos ........................................................................348
Actualizar programa....................................................................................352
Acuerdo de licencia de usuario final de clientes de XARA Web Designer......358
Adaptación automática ...............................................................................315
Adaptación múltiple ....................................................................................316
Adaptación personalizada ...........................................................................316
Adaptar texto a la curva / Eliminar texto de la curva ....................................348
Agradecimientos.........................................................................................361
Agregado de archivos de películas y animaciones .......................................271
Agregado y edición de botones...................................................................258
Agregar archivos Flash..................................................................................62
Agregar menús y submenús .......................................................................259
Agregar nuevas páginas a tu página web ......................................................23
Agregar nuevos botones ...............................................................................47
Agregar y quitar sangrías ............................................................................170
Agrupar (barra de control arreglo o Ctrl+G)..................................................347
Agrupar y desagrupar objetos .....................................................................107
Ajustando la región cortada ........................................................................250
Ajustar a cuadrícula ....................................................................................103
Ajustar a cuadrícula (. del teclado numérico)................................................351
Ajustar a guías (2 del teclado numérico) ......................................................351
Ajustar a objetos (* del teclado numérico) ....................................................351
Ajustar el ancho de los botones a las etiquetas ...........................................256
Ajustar el margen izquierdo y derecho de un texto sobre una curva.............157
Ajuste .........................................................................................................103
Ajuste de una transparencia de mapa de bits ..............................................225
Ajuste del fondo de la página para un mapa de bits ....................................226
364 Index
Ajuste magnético de objeto ........................................................................ 105
Ajuste y ancho de línea............................................................................... 104
Al final de una línea:.................................................................................... 121
Al inicio de una línea: .................................................................................. 121
Alineación .......................................................................................... 110, 111
Alineación (Ctrl+Shift+L) ............................................................................. 348
Ampliar foto a 100%................................................................................... 245
Ampliar selección ......................................................................................... 90
Ancho / Alto ............................................................................................... 250
Animación .................................................................................................. 350
repeticiones y velocidad .......................................................................... 309
Animaciones en Flash................................................................................. 284
Anterior y Siguiente .................................................................................... 245
Añadir a la galería ......................................................................................... 86
Añadir nombres.......................................................................................... 114
Añadir un nuevo punto de control ............................................................... 120
Aplicación de colores de relleno y línea mediante arrastrar y soltar .............. 138
Aplicar atributos a historias de texto completas .......................................... 174
Aplicar estilos de texto ............................................................................... 169
Aplicar grupo suave (Ctrl+Alt+G)................................................................. 347
Aplicar transparencia a varios objetos......................................................... 190
Aplicar transparencia con gradación ........................................................... 189
Aplicar transparencia plana......................................................................... 189
Aplicar un efecto de resplandor .................................................................. 192
Aplicar una sombra .................................................................................... 192
Aplicar una sombra a varios objetos ........................................................... 194
Aplicar una sombra de pared...................................................................... 192
Aplicar una sombra de suelo ...................................................................... 192
Archivos de película MP4 y FLV .................................................................. 271
Archivos Flash ............................................................................................ 271
Archivos JPEG integrados .......................................................................... 226
Archivos PDF ............................................................................................. 272
Archivos recientes ...................................................................................... 342
Área que permite clic.................................................................................. 201
Áreas de texto............................................................................................ 154
Arrastrar el segmento de línea .................................................................... 124
Arreglar ventanas ....................................................................................... 350
Atributos de la edición de fotos .................................................................. 231
Auto-optimización ...................................................................................... 247
Avanzado: edición de un diseño de botón de barra de navegación. ............ 264
Ayuda .................................................................................................. 15, 352
Ayuda de MAGIX Web Designer 6 .............................................................. 351

Barra de estado ........................................................................................... 91


Barra de herramientas principal .................................................................... 68
Barra de información .............................................................................. 21, 67
Barra de información de la herramienta de relleno....................................... 179
Barra de navegación del sitio...................................................................... 256
Index 365
Barras de control ..........................................................................67, 337, 350
Barras de control bloqueadas o flotantes ....................................................338
Barras de navegación .................................................................................254
Barras de navegación con primer y último botón diferente...........................266
Barras de navegación del sitio y plantillas....................................................258
Barras desplegables .....................................................................................18
Bloquear aspecto .......................................................................................250
Bloquear capas ..........................................................................................282
Borrar .........................................................................................................249
Borrar grupo suave (Ctrl+Alt+U) ..................................................................347
Botón Bloquear relación de aspecto .............................................................99
Botón de barras (barras de navegación) ........................................................48
Botón de red ..............................................................................................311
Botón Escalar anchos de línea ......................................................................98
Botón imprimir ............................................................................................311
Botón Imprimir............................................................................................311
Botón opciones ..........................................................................................311
Botones mouseover (rollover) ..................................................................47, 55
Botones que permiten clic y efectos de MouseOver ....................................305
Botones y menús........................................................................................258
Brillo/Contraste/!Temperatura del color/Saturación......................................247
Buscar un nombre de ítem............................................................................86

Calidad (barra de control estándar) .............................................................350


Calidad de imagen........................................................................................83
Calidad de llenado ......................................................................................314
Calidad de mapas de bits ...........................................................................294
Calidad de visualización de fotos ................................................................229
Cambiar colores de un relleno.....................................................................181
Cambiar curvas ..........................................................................................124
Cambiar el ancho de la columna .................................................................154
Cambiar el ancho de línea (grosor) ..............................................................131
Cambiar el ángulo de la columna ................................................................154
Cambiar el color de sombra o el efecto de relleno .......................................193
Cambiar el tamaño de fuente ......................................................................169
Cambiar el tamaño de las áreas de texto.....................................................155
Cambiar el tamaño de página .......................................................................72
Cambiar el tamaño de página de plantillas ....................................................42
Cambiar el tamaño, rotar y reposicionar la foto dentro de su propio marco..235
Cambiar el tipo de unión .............................................................................133
Cambiar el valor de zoom .............................................................................70
Cambiar el valor de zoom utilizando el ratón..................................................70
Cambiar el zoom utilizando la barra de información/barra de control de zoom71
Cambiar extremo de línea ...........................................................................133
Cambiar la transparencia de la sombra .......................................................193
Cambiar lados de la línea ............................................................................157
Cambiar los puntos cero de las reglas...........................................................82
Cambiar mayúsculas o minúsculas .............................................................158
366 Index
Cambiar selección de objetos....................................................................... 89
Cambiar tamaño utilizando el ratón............................................................... 99
Cambiar tamaño utilizando la barra de información ..................................... 100
Cambiar texto de botón................................................................................ 47
Cambio de la fuente de los botones de la barra de navegación ................... 262
Cambio de tamaño de widgets ................................................................... 273
Cambio del documento de plantilla en blanco ............................................. 331
Cambio del tamaño de objetos (escalar) ....................................................... 98
Cambio del tamaño y la posición del relleno de mapa de bits...................... 184
Cantidad de palabras ................................................................................. 156
Capa de fondo de página ............................................................................. 28
Capa popup............................................................................................... 199
Capas ................................................................................................ 278, 323
Capas en páginas web ............................................................................... 279
Capas especiales ....................................................................................... 281
Capas pop·up .............................................................................................. 56
Capas, mouseover (rollover) y pop·ups ......................................................... 54
Caracteres especiales (en la herramienta de texto)...................................... 356
Carga de un documento con detalles FTP .................................................. 218
Cerrar ........................................................................................................ 345
Cerrar (Ctrl+W) ........................................................................................... 343
Cerrar el documento .................................................................................... 77
Cerrar una forma ........................................................................................ 127
Clipart flash .................................................................................................. 24
Clonar .......................................................................................................... 96
Clonar (Ctrl+K) ........................................................................................... 346
Colocar objetos en la capa guía.................................................................. 106
Color del fondo de página ............................................................................ 26
Color previo y actual................................................................................... 140
Coloreado de mapa de bits ........................................................................ 183
Colorear formas ........................................................................................... 26
Colorear fotos ...................................................................................... 26, 234
Colores de animación................................................................................. 308
Colores de la línea de colores ..................................................................... 137
Colores de la página web ............................................................................. 24
Colores locales y colores originales............................................................. 142
Colores normales ....................................................................................... 144
Colores normales, tintes, tonalidades y colores vinculados.......................... 144
Colores para enlaces de sitios web............................................................. 203
Colores vinculados ..................................................................................... 145
Combinar formas........................................................................................ 129
Combinar formas (barra de control arreglo) ................................................. 348
Comillas inteligentes ................................................................................... 159
Cómo crear sangrías francesas .................................................................. 164
Cómo sincronizar el texto empleando Grupos suaves (soft groups, en inglés)161
Comparar y restaurar el original .................................................................. 247
Compatibilidad entre el navegador y el texto............................................... 175
Compra y activación del MAGIX Web Designer 6 ............................................ 8
Conectar áreas de texto—flujo de texto ...................................................... 155
Configuración de impresora........................................................................ 344
Consejo del día .......................................................................................... 352
Index 367
Contenido del directorio de compatibilidad....................................................77
Contornear texto.........................................................................................348
Contornear texto alrededor de objetos ..........................................................39
Controles....................................................................................................325
Controles deslizantes de límites de selección ................................................91
Controles para rotar 90° .............................................................................245
Convertir texto en un gráfico .........................................................................44
Convertir una línea recta en una curva (y viceversa) .....................................125
Coordenadas X-Y .........................................................................................69
Coordinar selección ....................................................................................335
Copiar (barra de control edición o Ctrl+C) ...................................................345
Copiar / Pegar texto con formato (RTF) .......................................................174
Copiar estilos: pegar atributos ....................................................................112
Copiar estilos de texto ................................................................................174
Copiar objetos ......................................................................................22, 292
Copiar sombras a otros objetos ..................................................................195
Copias........................................................................................................312
Copias de memoria cero.............................................................................223
Copias de seguridad al cerrar el sistema .......................................................80
Copias de seguridad automáticas ...........................................................43, 78
Copias de seguridad de documentos abiertos ..............................................78
Copyright....................................................................................................358
Corrector de ortografía .........................................................................40, 160
Cortar (barra de control edición o Ctrl+X) ....................................................345
Cortar en documentos fotográficos .............................................................250
Cortar formas .............................................................................................130
Cortar objetos...............................................................................................94
Cortar objetos de las fotos..........................................................................233
Cortar, copiar y pegar ...................................................................................94
Creación de barras de navegación propias..................................................262
Creación de barras de símbolos..................................................................339
Creación de botones, banners y otros gráficos web ......................................58
Creación de grupo suaves ..........................................................................109
Creación de los botones MouseOver propios ................................................56
Creación de nuevos colores con nombre ....................................................143
Creación de panorámicas ...........................................................................253
Creación de tus propios esquemas de colores ............................................143
Creación de un tinte, una tonalidad o un color vinculado .............................145
Creación de una gradación de color lineal ...................................................177
Creación y edición de rectángulos con esquinas redondeadas ....................134
Crear agujeros en las formas.......................................................................129
Crear barra de navegación..........................................................................347
Crear círculos y elipses ...............................................................................135
Crear GIF animados....................................................................................307
Crear nuevos objetos de texto nuevos ..........................................................39
Crear rectángulos y cuadrados ...................................................................134
Crear tus propios colores con nombre ..........................................................31
Crear un cuadrado......................................................................................134
Crear un línea guía ......................................................................................106
Crear una animación...................................................................................307
Crear uniones en curva ...............................................................................125
368 Index
Crear uniones en punta .............................................................................. 125
Cuadrícula de pantalla .................................................................................. 80

Darle el tamaño completo a una foto .......................................................... 237


Dentro........................................................................................................ 110
Desactivación de la regeneración del marcador de posición........................ 274
Desagrupar (barra de control arreglo o Ctrl+U)............................................ 347
Desagrupar objetos .................................................................................... 107
Desagrupar, editar y reagrupar ................................................................... 265
Deseleccionar un objeto ............................................................................... 91
Desenfocar los bordes de la sombra........................................................... 193
Desenfoque / Enfoque................................................................................ 247
Desfijar una galería ..................................................................................... 340
Deshacer (barra de control estándar o Ctrl+Z)............................................. 345
Deshacer corte........................................................................................... 249
Deshacer y rehacer ...................................................................................... 87
Desplazamiento de la parte superior de la página ......................................... 29
Desplazamiento de los controles de inicio y fin de un relleno ....................... 181
Desplazamiento y tranformación de una barra de navegación del sitio......... 257
Desplazar ................................................................................................... 334
Desplazar botones y herramientas .............................................................. 339
Desplazar el documento dentro de la ventana............................................... 72
Desplazar objetos................................................................................... 21, 93
Detención de la repetición de objetos ......................................................... 116
Detener repetición (Shift+Ctrl+Alt+O) .......................................................... 348
Diálogo de propiedades web ...................................................................... 196
Diálogo Propiedades de la barra de navegación.......................................... 255
Diccionario de usuario ................................................................................ 160
Difuminación ................................................................................................ 51
Difuminación (Feathering)............................................................................ 102
Directorios de compatibilidad ....................................................................... 76
Diseño del programa .................................................................................... 16
Diseño web basado en objetos..................................................................... 19
Distancia duplicación.................................................................................. 334
Distribuir..................................................................................................... 111
Documento seleccionado y barra de título .................................................... 67
Documentos abiertos ................................................................................. 351
Documentos fotográficos ........................................................................... 240
Documentos sin título................................................................................... 79
Duplicar ....................................................................................................... 95
Duplicar (barra de control edición o Ctrl+D)................................................. 346
Duplicar y clonar .......................................................................................... 95
Duración de frames para películas Flash y pasos intermedios ..................... 294

Edición de archivos de fotos....................................................................... 241


Edición de widgets existentes..................................................................... 270
Index 369
Edición en el lienzo .....................................................................................261
Edición interior ............................................................................................264
Editar colores con nombre ..........................................................................144
Editar el color de un objeto .........................................................................139
Editar el color principal................................................................................147
Editar el contorno de las fotos.....................................................................232
Editar texto .................................................................................................158
Editor de color (Ctrl+Shift+E).......................................................................349
Efectos MouseOver ......................................................................................54
Ejemplo: para cambiar el tamaño de una foto y guardarla en JPEG. ............231
El botón de propiedades.....................................................................280, 311
El color se transforma — el color de la animación cambia ...........................302
El diálogo de impresión...............................................................................311
El editor de color ........................................................................................140
El menú de fuentes .....................................................................................151
Eliminación de grupos suaves .....................................................................109
Eliminación de una barra de navegación del sitio de una página ..................257
Eliminar (.....................................................................................................346
Eliminar imágenes de la galería ...................................................................225
Eliminar las barras de control ......................................................................339
Eliminar objetos ............................................................................................95
Eliminar objetos de un grupo.......................................................................108
Eliminar objetos del documento ....................................................................94
Eliminar páginas de tu documento ................................................................74
Eliminar puntos ...........................................................................................122
Eliminar secciones de una galería..................................................................87
Eliminar selección/Restaurar atributos actuales (Esc)...........................346, 350
Eliminar un perfil .........................................................................................218
Eliminar una línea guía.................................................................................107
Eliminar una sombra ...................................................................................194
En el medio de una línea: ............................................................................121
Encabezados/Pies de página ......................................................................117
Enderezar horizonte ....................................................................................236
Enlace al archivo...................................................................................47, 199
Enlace automático de páginas ....................................................................257
Enlaces de texto .........................................................................................172
Enlaces, botones y barras de botones ..........................................................45
Enlazar a la página......................................................................................198
Enlazar a una dirección web .......................................................................198
Enlazar a una referencia (anchor)...........................................................46, 198
Espaciado de botón....................................................................................256
Espaciado de cuadrícula y regla..................................................................335
Espaciado de línea......................................................................................172
Espaciado de párrafos ................................................................................172
Esquemas de colores temáticos .................................................................142
Este documento va a ser una página web ...................................................333
Estilos de menú ..........................................................................................260
Exportación como Flash .............................................................................322
Exportación como formato Extended Metafile (EMF)....................................322
Exportación como mapa de bits..................................................................322
Exportación como metarchivo de Windows (.wmf).......................................322
370 Index
Exportación de archivos ............................................................................. 321
Exportación de archivos Photoshop PSD.................................................... 322
Exportación de páginas web con directorios de compatibilidad..................... 77
Exportación de un archivo Flash ................................................................. 289
Exportación DPI ......................................................................................... 323
Exportación rápida de HTML y formatos de gráficos web............................ 321
Exportar (Ctrl+Shift+E)................................................................................ 343
Exportar animación .................................................................................... 344
Exportar la animación ................................................................................. 308
Exportar página web .................................................................................. 344
Extender la línea. ........................................................................................ 120
Extender o reducir objetos.......................................................................... 100
Extracción del JPEG original ....................................................................... 227

Fijación de galerías ............................................................................... 84, 340


Fijar una galería .......................................................................................... 340
Finalizar la línea .......................................................................................... 120
Fluidez de la animación (smoothness) ......................................................... 298
Fondos avanzados ....................................................................................... 30
Formas vinculadas ....................................................................................... 31
Formatos de exportación............................................................................ 318
Formatos de importación............................................................................ 317
Foto emergente.......................................................................................... 200
Fotos ................................................................................................... 33, 293
Fotos de pantalla (screenshots) .................................................................. 234
Fotos emergentes ...................................................................................... 206
Fotos en miniatura con pop-up..................................................................... 35
Fotos pop-up ............................................................................................... 57
Fuentes compatibles con la web........................................................... 38, 152
Fuentes incrustadas ..................................................................................... 40
Función de botones de ratón...................................................................... 335
Funciones de Flash avanzadas ................................................................... 304
Funciones Detener e Ir a............................................................................. 304
Fusionar varias formas en una sola ............................................................. 129

Galería de líneas ......................................................................................... 131


Galería de páginas y capas................................................................... 75, 275
Galerías................................................................................................ 83, 349
Generación automática del marcador de posición....................................... 270
GIF animados............................................................................................. 272
Girar objetos .......................................................................................... 21, 97
Girar objetos en el modo de cambio de tamaño............................................ 98
Girar utilizando el ratón................................................................................. 97
Gradaciones de color de varios niveles ....................................................... 186
Gráficos anclados ...................................................................................... 166
Gráficos de ejemplo ..................................................................................... 53
Index 371
Grupos .................................................................................................44, 300
Grupos suaves (soft groups, en inglés)..........................................44, 108, 167
Grupos y capas ..........................................................................................108
Grupos y capas suaves...............................................................................280
Guardar ......................................................................................................226
Guardar (barra de control estándar o Ctrl+S) ...............................................343
Guardar como ............................................................................................343
Guardar como (en el menú Archivo) ..............................................................76
Guardar contraseña en el documento .........................................................217
Guardar copias de seguridad de documentos abiertos al cerrar el programa .79
Guardar el documento ..................................................................................75
Guardar en el perfil .....................................................................................217
Guardar estos detalles con el documento actual .........................................217
Guardar plantilla..........................................................................................343
Guardar todo ..............................................................................................343
Guardar todo (en el menú Archivo) ................................................................76
Guardar tu trabajo. Creación de una página Web ..........................................42
Guardar y exportar fotos .............................................................................229

Hacer grupos transparentes en su conjunto ................................................333


Hacer que un objeto se rodee de texto .......................................................165
Herramienta de corte ..................................................................................248
Herramienta de difuminación.......................................................................356
Herramienta de optimización.......................................................................246
Herramienta de relleno ..................................................................................50
Herramienta de sombra ................................................................................52
Herramienta de texto ..................................................................................355
Herramienta de transparencia .......................................................................51
Herramientas de dibujo .................................................................................49

Importación de archivos..............................................................................319
Importación de Clipart con color ...................................................................26
Importación de foto RAW............................................................................321
Importación de fotos...................................................................................220
Importación de fotos grandes .......................................................................29
Importación de imágenes desde una página web. .......................................321
Importación de PDF ....................................................................................320
Importación de un archivo Photoshop PSD .................................................319
Importación e inserción de barras de navegación ........................................262
Importación y exportación...........................................................................317
Importante ..................................................................................................322
Importar (Ctrl+Shift+I)..................................................................................343
Importar desde la web (Ctrl+Alt+W).............................................................343
Importar y exportar formatos de archivo compatibles ..................................317
Imprimiendo ...............................................................................................310
Imprimir (Ctrl+P)..........................................................................................345
372 Index
Imprimir a archivo....................................................................................... 312
Imprimir capas ........................................................................................... 313
Imprimir como ............................................................................................ 313
Inclinar objetos ........................................................................................... 101
Incrustación de fuentes .............................................................................. 175
Indicaciones generales sobre la exportación e importación ......................... 317
Información de documento................................................................... 15, 344
Iniciar un nuevo documento.......................................................................... 64
Inicio del MAGIX Web Designer 6 ................................................................. 64
Inserción .................................................................................................... 270
Inserción con otra herramienta de autoría web............................................ 290
Inserción de un GIF animado ........................................................................ 63
Inserción de un objeto flash en MAGIX Web Designer 6. ............................. 289
Inserción de una película MP4 o FLV ............................................................ 63
Inserción manual de marcadores de posición ............................................. 274
Insertar texto de ejemplo ('Lorem Ipsum') ................................................... 159
Insertar un Google Map ................................................................................ 62
Integración de películas, Flash y otros widgets.............................................. 61
Intersección de formas ............................................................................... 130
Introducción ..........................................................13, 148, 219, 243, 284, 342
Introducir caracteres especiales.................................................................. 159
Introducir páginas en tu documento ............................................................. 73

Justificación o alineación de texto............................................................... 170


Justificado.................................................................................................. 256

La barra de estado ....................................................................................... 68


La capa actual............................................................................................ 278
La función de rotación ................................................................................ 299
La función deshacer ..................................................................................... 87
La función rehacer........................................................................................ 88
La Galería de diseños ................................................................................. 330
La galería de frames ................................................................................... 290
La galería de mapa de bits ......................................................................... 224
La galería de páginas y capas..................................................................... 275
La galería de rellenos.................................................................................. 186
La herramienta de edición de formas .......................................................... 118
La herramienta de fotos........................................................................ 34, 243
La herramienta de ojos rojos....................................................................... 251
La herramienta de relleno ........................................................................... 177
La herramienta de selección ................................................................... 20, 89
La herramienta de sombra.......................................................................... 191
La herramienta de texto.............................................................................. 149
La línea de color ......................................................................................... 136
La página actual........................................................................................... 73
La pestaña de frames................................................................................. 308
Index 373
La ventana MAGIX Web Designer 6...............................................................66
Las capas actuales siempre están visibles y pueden editarse. .....................332
Las capas MouseOff y MouseOver................................................................55
Las galerías ................................................................................................353
Las herramientas ........................................................................................353
Legal ..........................................................................................................358
Limitación de ángulo...................................................................................333
Lista con viñetas.........................................................................................170
Lista con viñetas y numeradas ......................................................................39
Lista numerada...........................................................................................171

Ll

Llevar atrás (barra de control arreglo o Ctrl+B) ............................................347

Lo que Flash puede hacer y lo que no puede hacer ....................................284


Lo que no puedes hacer con Flash en MAGIX Web Designer 6....................286
Los 6 tipos centrales de animación .............................................................285
Los beneficios explicados en detalle: ..........................................................243
Los indicadores ............................................................................................68

Manejo de formas .......................................................................................129


Manipulación de documentos .....................................................................353
Manipulación de objetos .............................................................................354
Mantener los nombres de las capas importadas..........................................333
Mapas de bits en otros formatos que el JPEG.............................................293
Marcadores de selección ..............................................................................91
Marco de selección.......................................................................................90
Marco de selección de objetos ...................................................................333
Márgenes de botón ....................................................................................263
Márgenes y objetos anclados......................................................................168
Márgenes y sangrías ...................................................................................162
Más información .........................................................................................274
Más sobre Xara Group................................................................................358
Más Web Designer .....................................................................................352
Membresía del sitio del widget ....................................................................270
Menú Archivo .............................................................................................342
Menú Arreglo ..............................................................................................346
Menú Ayuda ...............................................................................................351
Menú contextual de la línea de colores........................................................137
Menú Edición..............................................................................................345
Menú Herramientas ....................................................................................349
Menú Ventana ............................................................................................350
Menús y shortcuts de teclado .....................................................................342
Mezcla y combinación de fotos ...................................................................228
Mezclar líneas curvas y rectas.....................................................................119
374 Index
Mezclar transparencias individuales y de grupo........................................... 190
Minimizar ventanas múltiples ........................................................................ 70
Mismo ancho para todos los botones ......................................................... 256
Modificación del tamaño de una barra de símbolos..................................... 339
Modo de pantalla completa ........................................................................ 338
Modo de pantalla normal / completa............................................................. 69
Modo Solo ................................................................................................. 281
Mostrar / ocultar reglas ................................................................................ 82
Mostrar bordes de impresión.............................................................. 310, 351
Mostrar cuadrícula (#)................................................................................. 351
Mostrar guías (1 del teclado numérico) ....................................................... 351
Mostrar longitudes de texto compatibles con Windows............................... 334
Mostrar todo y desbloquear todo................................................................ 282
Mostrar y ocultar barras de control ............................................................. 338
Mover a la capa al frente (barra de control arreglo o Ctrl+Shift+U) ............... 346
Mover a la capa de atrás (barra de control arreglo o Ctrl+Shift+D)............... 347
Mover adelante (barra de control arreglo o Ctrl+Shift+F).............................. 347
Mover atrás (barra de control arreglo o Ctrl+Shift+B)................................... 347
Mover objetos .............................................................................................. 92
Mover objetos anclados ............................................................................. 167
Mover objetos de una capa a otra ................................................................ 55
Mover objetos entre capas ......................................................................... 283
Mover objetos hacia adelante o hacia atrás .................................................. 96
Mover objetos seleccionados debajo o dentro .............................................. 90
Mover páginas dentro del documento........................................................... 74
Mover puntos de control - Herramienta de edición de formas................... 122

Navegación instantánea del menú de fuente ............................................... 152


Navegar entre páginas.................................................................................. 74
Negrita y cursiva......................................................................................... 169
No puedes editar en el lienzo...................................................................... 257
Nombrar objetos ........................................................................................ 113
Nombres .................................................................................................... 349
Nombres aplicados .................................................................................... 114
Nombres para el directorio de compatibilidad ............................................... 77
Notas para la herramienta de foto............................................................... 251
Nueva ventana ........................................................................................... 350
Nuevo (barra de control estándar o Ctrl+N)................................................. 342
Nuevo de la Galería de diseños .................................................................. 342

Objetos de fotos......................................................................................... 220


Objetos de marcador de posición ............................................................... 215
Objetos elásticos.......................................................................................... 43
Objetos en la página..................................................................................... 18
Objetos guía y líneas guía ........................................................................... 105
Objetos repetidos....................................................................................... 114
Index 375
Objetos sin movimiento...............................................................................302
Ocultar botones y herramientas ..................................................................340
Ocultar capas .............................................................................................281
Opción Guardar (en el menú Archivo) ............................................................75
Opciones (Ctrl+Shift+O) ..............................................................................350
Opciones de impresión ...............................................................................345
pestaña...................................................................................................315
pestaña Salida ........................................................................................313
Opciones de la foto emergente ...................................................................207
Opciones de página....................................................................................344
Opciones de texto ......................................................................................314
Opciones del menú.....................................................................................331
Opciones flash............................................................................................308
Operaciones de capa..................................................................................280
Operaciones de color avanzadas ................................................................141
Optimización...............................................................................................315
Optimizar foto .............................................................................................349
Optimizar fotos y mapas de bits ..................................................................238
Optimizar todos los JPEG ...........................................................................349
Orden de los objetos ....................................................................................20
Orden de múltiples ventanas.........................................................................70
Orientación .................................................................................................255
Otros ..........................................................................................................357
Otros aspectos interesantes .......................................................................258
Otros formatos de película ..........................................................................271

Páginas ......................................................................................277, 312, 346


Páginas múltiples en el documento ...............................................................73
Paneles de texto ...........................................................................................40
Pantalla completa (8 del teclado numérico)..................................................351
Para añadir más objetos a un grupo............................................................108
Para crear un grupo....................................................................................107
Para dibujar un segmento de línea curvo:....................................................119
Para dibujar un segmento de línea recto .....................................................119
Pegar (barra de control edición o Ctrl+V) .....................................................345
Pegar en lugar (Ctrl+Shift+V) .......................................................................345
Pegar formato/atributos (Ctrl+Shift+A).........................................................346
Personalización de Web Designer ...............................................................331
Pestaña ......................................................................................................202
Pestaña Copias de seguridad .....................................................................337
Pestaña Cuadrícula y regla..........................................................................334
Pestaña de opciones ..................................................................................329
Pestaña de página ......................................................................................204
Pestaña Enlace...........................................................................................197
Pestaña General .........................................................................................332
Pestaña Imagen..........................................................................................206
Pestaña Marcador de posición....................................................................212
Pestaña Mouse-over...................................................................................210
376 Index
Pestaña Opciones de paleta ....................................................................... 326
Pestaña Publicar ........................................................................................ 215
Pestaña Ratón ........................................................................................... 335
Pestaña Tamaño de mapa de bits .............................................................. 328
Pestaña Tamaño de página ........................................................................ 337
Pies de página ........................................................................................... 115
Pop-ups deslizantes ................................................................................... 246
Preguntar antes de aplicar el atributo actual ............................................... 333
Primeros pasos ............................................................................................ 16
Principios básicos ...................................................................................... 286
Programa de afiliado .................................................................................. 352
Propiedades de GIF animados.................................................................... 308
Propiedades del mapa de bits .................................................................... 226
Propiedades web (Ctrl+Shift+W) ................................................................. 349
Publicación ................................................................................................ 218
Publicar página web ................................................................................... 344
Publicar tu página web ................................................................................. 59

Radio para alineación magnética ................................................................ 336


Recortar fotos ............................................................................................ 232
Recortar o cortar imágenes ........................................................................ 248
Recortar y cortar ........................................................................................ 296
Recuperación de cierres anormales del programa......................................... 80
Recuperación de copias de seguridad .......................................................... 80
Reemplazar con código HTML ................................................................... 213
Reemplazar con Flash ................................................................................ 213
Reemplazar con un archivo gráfico ............................................................. 213
Registrarme ............................................................................................... 352
Regla de los tercios .................................................................................... 249
Reglas............................................................................................ 68, 81, 161
Rehacer (barra de control estándar o Ctrl+Y) .............................................. 345
Relleno de formas con un mapa de bits ...................................................... 225
Relleno fractal ............................................................................................ 185
Rellenos ....................................................................................................... 93
Rellenos circulares ..................................................................................... 181
Rellenos de mapa de bits ........................................................................... 182
Rellenos elípticos........................................................................................ 182
Rellenos lineales ......................................................................................... 180
Rellenos lisos ............................................................................................. 180
Reordenar ítems en la galería........................................................................ 86
Reordenar los colores de la línea de color................................................... 137
Reorganizar galerías ................................................................................... 341
Repetir en todas las páginas (Shift+Ctrl+Alt+R) ........................................... 348
Resolución de foto ..................................................................................... 223
Resolución de foto - ¡es todo automático!..................................................... 36
Resolución de transparencia....................................................................... 314
Restaurar las barras de control / galerías por defecto ................................. 341
Restricciones de diseño de botones ........................................................... 263
Index 377
Restringir la línea.........................................................................................124
Resumen ....................................................................................................323
Resumen de animación de MAGIX Web Designer 6 Flash............................306
Resumen de shortcuts del teclado numérico ...............................................107
Resumen del diálogo de exportación JPEG, PNG, GIF y BMP .....................324
Revisar ortografía mientras se escribe .........................................................350
Revisiones ....................................................................................................79
Rotación.....................................................................................................298
Rotación con ángulos exactos (utilizando la barra de información) .................98

Selección de idioma....................................................................................160
Selección de la ventana que se quiere visualizar............................................70
Selección de objetos con ayuda de la herramienta de sombras ...................195
Selección interna ..........................................................................................90
Selección y capas.........................................................................................91
Seleccionar bajo ...........................................................................................90
Seleccionar ítems .........................................................................................86
Seleccionar múltiples puntos de control ......................................................121
Seleccionar objetos ......................................................................................89
Seleccionar todo (Ctrl+A) ............................................................................346
Seleccionar todo el objeto de texto .............................................................158
Seleccionar todos los objetos .......................................................................91
Seleccionar un objeto dentro de un grupo...................................................108
Seleccionar y configurar una impresora .......................................................310
Separadores de menú ................................................................................259
Separar una forma ......................................................................................127
Shortcuts de teclado ..................................................................................353
Sin pérdidas vs. Con pérdidas (lossless vs. lossy)........................................227
Sincronización de texto...............................................................................109
Soltar una copia............................................................................................92
Sombras.....................................................................................................191
Sombras suaves, texto relleno de color, texto transparente ...........................39
Suavizar una línea .......................................................................................123
Subrayado de texto ....................................................................................169
Subtítulos de imagen ..................................................................................209
Superíndice y subíndice ..............................................................................172
Sustitución de archivos de imagen ..............................................................319
Sustitución de los rellenos de mapa de bits.................................................183
Sustitución de múltiples fotos .......................................................................34
Sustitución de múltiples fotos en simultáneo ...............................................221
Sustituir fotos .............................................................................................221

Tab...............................................................................................................92
Tabulaciones ..............................................................................................163
Tabulaciones personalizadas ......................................................................163
Tabulaciones, márgenes y sangrías.............................................................161
378 Index
Tamaño de foto inicial ................................................................................ 222
Tamaño de fuente ........................................................................................ 38
Tamaño de lista de archivos recientes ........................................................ 332
Tamaño de página ....................................................................................... 41
Terminología .............................................................................................. 149
Texto ................................................................................................... 37, 323
Texto alrededor de objetos ......................................................................... 165
Texto dentro de grupos para páginas web.................................................. 173
Texto en una columna ................................................................................ 153
Texto girado................................................................................................. 39
Texto siguiendo una curva.................................................................. 157, 163
Texto simple............................................................................................... 153
Texto sincronizado ....................................................................................... 45
Tintes......................................................................................................... 145
Tipo de imagen web ................................................................................... 210
Tipos de relleno.......................................................................................... 178
Tipos de tabulaciones personalizadas......................................................... 163
Tonalidades ............................................................................................... 145
Trabajar con colores................................................................................... 136
Trabajar con documentos............................................................................. 64
Trabajar con fotos ...................................................................................... 219
Trabajar con objetos..................................................................................... 89
Trabajar con textos .................................................................................... 148
Traer al frente (barra de control arreglo o Ctrl+F) ......................................... 347
Transparencia .................................................................................... 189, 303
Transparencia en un grupo......................................................................... 300
Tu primera animación ................................................................................. 287

Ubicación de la copia de seguridad .............................................................. 79


Un ejemplo................................................................................................. 184
Una página web en 6 pasos ......................................................................... 14
Unir líneas .................................................................................................. 126
URL en Flash.............................................................................................. 303
Usar la pipeta para escoger colores............................................................ 141
Uso avanzado de objetos repetidos............................................................ 115
Uso de la herramienta de zoom .................................................................... 70
Uso de las galerías ....................................................................................... 85
Uso del control de curva............................................................................. 124
Utilización de fotos como relleno ................................................................ 222
Utilización de la herramienta de fotos.......................................................... 244
Utilización de los campos de texto de la barra de información..................... 122
Utilización de plantillas de barras de navegación ......................................... 254
Utilización de plantillas, cliparts y widgets ..................................................... 23
Utilizar colores habituales para enlaces de sitios web.................................. 200

Velocidad de la animación .......................................................................... 297


Index 379
Ventajas de la herramienta de fotos.............................................................243
Ver una foto ampliada en su tamaño completo............................................237
Ver una galería..............................................................................................84
Vista previa .................................................................................................329
Vista previa de fuente en tiempo real ...........................................................152
Vista previa de la página (F12).....................................................................344
Vista previa de tamaño de fuente en tiempo real .........................................152
Vista previa de tu página web .......................................................................22
Vista previa de un objeto flash en MAGIX Web Designer 6...........................289
Vista previa en el navegador .......................................................................309
Vista previa flash.........................................................................................344
Visualización del punto de anclado..............................................................167
Visualizar fuentes utilizadas .........................................................................175
Visualizar página web..................................................................................343
Voltear objetos............................................................................................100
Volver a publicar solamente los archivos modificados..................................219

Widgets ........................................................................................................24
Widgets de la galería de diseños .................................................................269
Widgets de otros sitios de widgets..............................................................272
Widgets de sitios web.................................................................................268
Widgets y marcadores de posición
todo automático ......................................................................................268

Zoom..........................................................................................................353
Zoom 1: 1...................................................................................................245
Zoom y desplazamiento de la página ............................................................17

You might also like