WEB

D
 ESIGNER11
P
 REMIUM

Manual en español
2

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.

Copyright © Xara Group Ltd., 1994 - 2015. All rights reserved.

Xara es una marca registrada de Xara Group Ltd.
Xara Group Ltd. es una compañía afiliada de MAGIX GmbH & Co. KGaA.
MAGIX es una marca registrada de MAGIX GmbH & Co. KGaA.

Los otros nombres de productos pueden ser marcas registradas de sus

correspondientes fabricantes.

www.magix.es
 Copyright 3

Indice
Copyright 2

Asistencia técnica 14

Introducción 16
¿Qué es MAGIX Web Designer 11 Premium? 16
¿Por qué Web Designer es tan especial? 16
Una página web en 6 pasos 17
¿Cuáles son las novedades de MAGIX Web Designer 11 Premium? 18
Diseño de página 18
Contenido 19
Publicación y presentación 19
Ayuda 21

Primeros pasos 23
Diseño del programa 23
Objetos en la página 26
Menús con clic derecho 27
Diseño web basado en objetos 28
La herramienta de selección 29
Creación de una página Web 31
Vista previa de tu página web 31
Uso de plantillas, cliparts y widgets 33
Galería de diseños 34
Catálogo de contenido online 36
Colores de la página web 37
Fondos de página web 39
Fotos 40
Texto 44
Tamaño de página 48
Guardar tu trabajo. Creación de una página Web 49
Grupos 50
Objetos repetidos 51
Creación de botones, banners y otros gráficos web 52
Enlaces, botones y barras de navegación 53
Tus propios iconos en las pestañas de los navegadores (favicon) 56
Herramientas de dibujo 57
Capas, MouseOver (rollover) y elementos emergentes 65
4

Publicación de tu página web 71

Manejo de documento 73
Iniciar un nuevo documento 73
Abrir un documento existente 73
Compartir documento en múltiples ubicaciones 74
La ventana de MAGIX Web Designer 11 Premium 75
Abrir una segunda ventana 79
Cambiar el valor de zoom 80
Desplazar el documento dentro de la ventana 81
Cambiar el tamaño de página 82
Páginas múltiples en el documento 83
Guardar el documento 86
Directorios de compatibilidad 86
Cerrar el documento 88
Copias de seguridad automáticas 88
Cuadrícula en pantalla 91
Reglas 92
Calidad de imagen 93
La tecla de restricción 94
Galerías 95
Deshacer y rehacer 104

Trabajar con objetos 106

La herramienta de selección 106
Mover objetos 109
Eliminar objetos del documento 113
Duplicar y clonar 113
Mover objetos hacia adelante o hacia atrás 115
Girar utilizando el ratón 115
Cambio del tamaño de objetos (escalar) 117
Voltear objetos 120
Extender o reducir objetos 120
Inclinar objetos 121
La herramienta de moldes 122
Ajuste 126
Difuminación (Feathering) 130
Objetos guía y líneas guía 130
Resumen de shortcuts del teclado numérico 132
Conflictos en el diseño de páginas 132

www.magix.es
 Copyright 5

Agrupar y desagrupar objetos 133

Grupos suaves (soft groups, en inglés) 134
Alineación 136
Copiar estilos - pegar atributos 139
ClipView 140
Nombrar objetos 141
Objetos repetidos 143
Pies de página y objetos que se amplían con la página. 146

La herramienta de edición de formas 149

Dibujar una linea o forma 150
La herramienta de mano alzada y pincel 150
Editar líneas/formas con la herramienta de dibujo libre y pincel 153
La herramienta de líneas rectas y flechas 154
La herramienta de edición de formas 155
Extender la línea. 158
Finalizar la línea 158
Añadir un nuevo punto de control 158
Seleccionar múltiples puntos de control 159
Eliminar puntos 160
Mover puntos de control - Herramienta de edición de formas 160
Suavizar una línea 161
Restringir la línea 162
Convertir una línea recta en una curva (y viceversa) 162
Cambiar curvas 162
Unir líneas 164
Cambiar el ancho de línea (grosor) 165
Galería de líneas 166

Manejo de formas 169

Herramientas de dibujo y forma 169
Crear rectángulos y cuadrados 169
Crear círculos y elipses 170
Smartshapes 171
Edición de smartshapes 171
Crear polígonos y estrellas 173
Combinar formas 176

Trabajar con colores 179

La línea de colores 179
Aplicar colores de relleno y línea con arrastrar y soltar 181
6

Editar el color de un objeto 182

Aplicación de un color de fondo para el texto 183
El editor de color 183
Colores locales y colores originales 186
Esquemas de colores originales 186
Creación de tus propios esquemas de colores 187
Creación de nuevos colores con nombre 188
Reemplazar colores 189
Editar colores con nombre 190
Colores normales, tintes, tonalidades y colores vinculados 193
Creación de un tinte, una tonalidad o un color vinculado 194

Trabajar con textos 196

Introducción 196
Terminología 197
La herramienta de texto 197
Menú de fuente 199
Fuentes de Google 201
Símbolos de la fuente Font Awesome 202
Texto simple 204
Texto en una columna 205
Áreas de texto 206
Texto siguiendo una curva 210
Editar texto 211
Corrector ortográfico 213
Autocorrección 214
Buscar y reemplazar 215
Cómo sincronizar el texto empleando Grupos suaves 216
Tabulaciones, márgenes y sangrías 216
Texto alrededor de objetos 220
Gráficos anclados 222
Gráficos incrustados 225
Lista con viñetas y numeradas 225
Estilos de texto 227
Aplicar estilos de texto 232
Enlaces de texto 235
Texto dentro de grupos para páginas web 235
Copiar estilos de texto 236
Copiar / Pegar texto con formato (RTF) 237
Incrustación de fuentes en el documento 237
www.magix.es
 Copyright 7

Incrustación de fuentes en un sitio web 237

Permisos de fuentes 238

La herramienta de relleno 239

Crear un relleno de color con gradación 239
Tipos de relleno 239
Barra de información de herramienta de relleno 241
Rellenos lisos 243
Rellenos lineales 243
Rellenos circulares 244
Rellenos elípticos 245
Rellenos de mapa de bits 245
Relleno fractal 248
Gradaciones de color de varios niveles 249
La galería de rellenos 250

Transparencia 252
Aplicar transparencia plana 253
Aplicar transparencia con gradación 253
Transparencia con gradación de varios niveles 254
Tipos de transparencia 254
Perfil 255
Mapas de bits 256
Control deslizante / resolución 256
Aplicar transparencia a varios objetos 256

Sombras 257
La herramienta de sombra 257
Aplicar una sombra 257
Cambiar el color de sombra o el efecto de relleno 259
Eliminar una sombra 260
Aplicar una sombra a varios objetos 260
Selección de objetos con ayuda de la herramienta de sombras 261
Copiar sombras a otros objetos 261

Biseles 262
La herramienta de bisel 262
Aplicar un bisel 262
Aplicar un bisel a varios objetos 263
Modificar un bisel 263
Eliminar un bisel 266
8

Máscaras 267
Crear una máscara 267
Las herramientas de región de foto y máscara 267
Editar máscara. 268
Máscaras suaves 269
Operaciones que utilizan la máscara 269
Copiar formas a la capa de máscara 271

Diálogo de propiedades web 272

Pestaña Enlace 273
Pestaña Página web 279
Pestaña Página 282
Pestaña Imagen 285
Propiedades de MouseOver (animaciones web) 289
Pestaña Marcador de lugar 290
Animación web 294
Objetos sticky y stretchy 294
Pestaña Publicar 294
Pestaña Analytics 296

Diseño web adaptativo 297

Acerca de RWD 297
Variantes múltiples 298
Crear páginas web RWD desde las plantillas 299
Crear sitios web RWD desde sitios existentes 299
Compartir a través de variantes 300
Variantes y objetos repetidos 301
Variantes y barras de navegación 301
Publicación de variantes 302

Supersites 303
Sobre las Supersites 303
Habilitar Supersites 303

Objetos sticky y stretchy 306

Objetos sticky 306
Objetos stretchy 309
Combinaciones de objetos sticky y stretchy 311

Fondos de página web 312

Fondos de plantilla y cambio de color de fondo 314

www.magix.es
 Copyright 9

Fondos fijos no desplazables 314

Usar fotos como fondo. 315
Capas de fondos de página o de tablero de dibujo 315
Variantes y fondos de diseño web adaptativo 316
Desplazamiento de la parte superior de la página 317

Publicar página web 318

Publicación al sitio web TaskPilot M 318
Publicación en un alojamiento web alternativo 320
Inclusión de la página web en la galería de usuarios 324
Explorar espacio web 324
Publicación rápida (solo archivos modificados) 325
Guardar la configuración de publicación en el documento 325
Guardar perfiles 326
Documentos web y PDF 326

Trabajar con fotos 327

Introducción 327
Imágenes de alta resolución 327
Objetos de fotos 328
Grupos de foto 329
Importación de fotos 330
Copias de memoria cero 332
La galería de mapa de bits 333
Archivos JPEG integrados 336
Calidad de visualización de fotos 337
Guardar y exportar fotos 338
Atributos de la edición de fotos 340
Editar el contorno de las fotos 341
Recortar fotos 341
Recortar fotos con una máscara 342
Herramienta Capturar pantalla 342
Colorear fotos 344
Cambiar el tamaño, rotar y reposicionar la foto dentro de su propio marco 344
Enderezar horizonte 346
Ver una foto ampliada en su tamaño completo 347
Darle el tamaño completo a una foto 347
Optimización de fotos y mapas de bits 347
Convertir objetos o dibujos a mapas de bits 350
Documentos fotográficos 351
10

Edición de archivos de fotos 352

La herramienta de fotos 353

Introducción 353
Utilización de la herramienta de fotos 353
Funciones comunes para fotos 354
Herramienta de optimización 355
Herramienta de corte 360
Notas para la herramienta de foto 362
La herramienta de ojos rojos 363
Efectos en tiempo real 365
Cambio de tamaño teniendo en cuenta el contenido 368
Creación de panorámicas 373

Herramienta de extrusión 3D 376

Extrudir una forma 376
Barra de información de Herramienta de extrusión 377
Texturas y fotos 380
Extrudir texto 380
Copiar atributos de una extrusión 3D 381
Insertar sombras detrás del objeto 381

Barras de navegación 382

Web Designer y las barras de navegación 382
Usar de barras de navegación de plantillas 383
Diálogo Propiedades de la barra de navegación 384
Barra de navegación del sitio 386
Barras de navegación de botón único 387
Botones y menús 389
Actualización de la barra de navegación en todas las páginas 393
Edición en el lienzo 393
Cambio de la fuente de los botones de la barra de navegación 394
Importación e inserción de barras de navegación 394
Creación de barras de navegación propias 394

Presentaciones como páginas web 396

Sobre las presentaciones 396
Pasos y capas 396
La barra de herramientas "Presentación" 398
Creación de una presentación 399
Manejo de los pasos de presentación 402

www.magix.es
 Copyright 11

Agregado de nuevas páginas de presentación 404

Creación de listas con números y viñetas 404
Eliminar páginas de presentación 404
Enlaces al paso siguiente/anterior 404
Aplicación de transiciones a pasos de presentaciones 405
Aplicación de transiciones a páginas de presentaciones 406
Información de presentación avanzada 406

Widgets de sitios web 408

Widgets y marcadores de posición - todo automático 408
Widgets de la galería de diseños 409
Agregado de archivos de películas y animaciones 412
Widgets de otros sitios de widgets 415
Cambio de tamaño de widgets 415
Inserción manual de marcadores de posición para widgets 417
Más información 417
Inserción manual de un mapa de Google 417

Galería de páginas y capas 419

La galería de páginas y capas 419
Páginas 422
Capas 422
Operaciones de capa 425
Capas especiales 428
Ocultar capas 429
Modo Solo 429
Bloquear capas 429
Mostrar todo y desbloquear todo 430
Mover objetos entre capas 430

Animaciones web 431

Utilización de animaciones web 431
Funciones MouseOver 432
Animaciones de clic/toque 432
Animaciones de aparición 432
Combinaciones de animaciones y tipos de objetos 434

Animaciones en Flash 435

Introducción 435
Principios básicos 437
Tu primera animación 438
12

Exportación de un archivo Flash 440

Exportación de animaciones como AVI 441
La galería de frames de animación 442
Fotos 444
Duración de frames para películas Flash y pasos intermedios 447
Recortar y cortar 448
Velocidad de la animación 449
Fluidez de la animación (smoothness) 450
Rotación 450
Grupos 452
¿Qué funciones de MAGIX Web Designer 11 Premium son compatibles con Flash?453
El color se transforma — el color de la animación cambia 455
Transparencia 455
URL en Flash 456
Funciones de Flash avanzadas 457
Resumen de animación de MAGIX Web Designer 11 Premium Flash 459
Crear GIF animados 460
Propiedades de GIF animados 461

Importación y exportación 463

Indicaciones generales sobre la exportación e importación 463
Web Designer y HTML5 463
Importar y exportar formatos de archivo compatibles 464
Importación de archivos 467
Exportación de archivos 470
Resumen del diálogo de exportación GIF, PNG y JPEG 474

Imprimiendo 480
Mostrar bordes de impresión 480
Seleccionar y configurar una impresora 480
El diálogo de impresión 481
Opciones de impresión: Pestaña Salida 483
Opciones de impresión: Pestaña Diseño de la impresión 485

Personalización de Web Designer 487

Cambio del documento de plantilla en blanco 487
Opciones del menú "Herramientas" 487
Pestaña General 488
Pestaña Cuadrícula y regla 492
Pestaña Ratón 493
Pestaña Tamaño de página 495
www.magix.es
 Copyright 13

Pestaña Copias de seguridad 496

Pestaña efectos y plug-ins 496
Barras de control 497

Menús y shortcuts de teclado 501

Introducción 501
Menú Archivo 501
Menú Edición 506
Menú Arreglo 509
Menú Insertar 512
Menú Herramientas 513
Menú Compartir 515
Menú Ventana 517
Menú Ayuda 519
Shortcuts de teclado 521

Index 527
14

Asistencia técnica
Estimado usuario de MAGIX:

Nuestro objetivo es ofrecerte en todo momento una ayuda rápida, cómoda y

resolutiva. Por ello ponemos a tu disposición una amplia oferta de servicios:

• Asistencia web ilimitada:

Como cliente MAGIX registrado, dispones de asistencia web ilimitada a través
del portal de servicios de MAGIX de diseño sencillo support.magix.net. Aquí
tienes acceso a un asistente de ayuda inteligente, preguntas frecuentes, parches
e informes de experiencias de usuarios que se actualizan continuamente.
La única condición es que registres el producto en www.magix.es.
• La plataforma de intercambio multimedia como punto de ayuda:
Como cliente MAGIX puedes acceder a la Multimedia Community
www.magix.info de forma gratuita e ilimitada. La plataforma de intercambio
multimedia reúne a más de 120.000 miembros y ofrece la oportunidad de hacer
preguntas acerca de los productos MAGIX o buscar preguntas para temas
específicos a través de la función de búsqueda. Además de preguntas y
respuestas, encontrarás un glosario, vídeos de ejemplo (tutoriales) y un foro de
debate. Los numerosos expertos que encontrarás en www.magix.info te
garantizan respuestas rápidas, incluso en pocos minutos.
• Asistencia por correo electrónico para productos MAGIX:
Para cada nuevo producto de MAGIX, recibirás a partir de la fecha de compra y
de forma automática, 12 meses de soporte técnico gratuito vía e-mail.
Asistencia Premium por correo electrónico:
Para asistencia especial o para asistencia técnica sobre problemas de hardware
de productos no relacionados con MAGIX, puedes optar por un servicio de
asistencia por e-mail Premium. Para ello, accede a http://support.magix.net en
la página de asistencia de MAGIX y haz clic tras el iniciar sesión en el "Adquirir
código de acceso". El servicio abarca un caso de un problema específico hasta
que este se resuelva y no se limita a un solo e-mail.

Ten en cuenta: para poder utilizar la asistencia por e-mail Premium y la asistencia
por e-mail gratuita para productos mediante Internet, debes tener registrado tu
programa MAGIX con tu número de serie. El número de serie de tu producto se
encuentra en la cubierta del CD o en la parte interior de la caja del DVD.

• Servicio telefónico de atención al cliente:

Aparte de los numerosos servicios gratuitos podrás utilizar el servicio de pago
de atención telefónica al cliente.

Un resumen de los números de teléfono de la asistencia técnica lo puedes encontrar

aquí:

http://support.magix.net/contact/es
www.magix.es
 Asistencia técnica 15

Correo: MAGIX Development Support

01194 Dresden
Alemania

Por favor, ten preparada la siguiente documentación al realizar tu llamada:

• ¿Cuál es el programa MAGIX (versión) que estás utilizando?

• ¿Qué sistema operativo utilizas?
• ¿Cuál es el nombre y resolución de la tarjeta gráfica?
• ¿Cuál es el nombre de la tarjeta de sonido? ¿O estás utilizando el sistema de
sonido integrado de tu ordenador?
• Para software de vídeo: ¿cuál es el nombre de la tarjeta de vídeo o tarjeta
Firewire?
• ¿Cuál es el tamaño de la memoria RAM?
• ¿Qué versión de DirectX tienes instalada?

MAGIX Ventas

Número de teléfono: +34 911 875 676

MAGIX Ventas está disponible los días laborales para las consultas y problemas
siguientes:

• Pedidos
• Asistencia de producto (antes de la compra)
• Pedidos de actualizaciones
• Devoluciones
16

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.

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.

¿Qué es MAGIX Web Designer 11 Premium?

MAGIX Web Designer 11 Premium es una solución completa para el diseño de
páginas web. Te ofrece la libertad de elegir si deseas realizar el diseño de tu página
web desde cero o si deseas personalizar cualquiera de las numerosas plantillas del
programa a tu gusto. Gracias a los años de experiencia con la tecnología "Xtreme",
también es posible crear animaciones Flash, editar fotos, y optimizar o cambiar los
esquemas de color de las páginas web con sólo unos clics. También puedes obtener
una vista previa de tu página web y subir tu proyecto directamente desde MAGIX
Web Designer 11 Premium a un servidor FTP para pasar de la creación a la publicación
en pocos segundos. Gracias a las funciones prácticas, como la inserción de objetos de
marcador de posición, tu sitio web obtendrá rápidamente un aspecto profesional y
único al mismo tiempo.

¿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 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).

www.magix.es
 Introducción 17

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.
18

¿Cuáles son las novedades de MAGIX Web

Designer 11 Premium?
MAGIX Web Designer 11 Premium presenta algunas geniales características nuevas
para crear sitios de última tecnología con estilo contemporáneo (como objetos
sticky y fondos que pueden expandirse al ancho completo). Además, ahora también
podrás editar tus sitios online con cloud.xara.

Diseño de página
Objetos sticky (solo versión Premium)
Estos son objetos que puedes dejar fijos en un lugar mientras que la página
subyacente se desplaza. Un buen ejemplo es la barra de navegación que puedes fijar
en la parte superior de la página para que cuando los visitantes se desplacen hacia
abajo puedan seguir navegando fácilmente a otras páginas sin tener que regresar a la
parte superior. En la versión 11 cualquier objeto puede fijarse en cualquier lugar de la
página.

Fondos stretchy (solo versión Premium)

Los diseños de sitios web sin límites evidentes entre las páginas son muy populares
actualmente; en este tipo de diseño en general verás un fondo de página que cubre
toda la ventana del navegador y se extiende para ocupar su ancho. En Web
Designer 11 puedes hacer que cualquier rectángulo o imagen se extienda para cubrir la
ventana del navegador tanto en sentido horizontal como vertical.

Nuevas posibilidades de animación

Un nuevo diálogo de animación web ofrece nuevas opciones de animación potentes y
fáciles de aplicar. Ahora podrás configurar los objetos para que:

• Tengan una animación al pasar el cursor sobre ellos (MouseOver)

• Tengan una animación al aparecer por primera vez, es decir, que la primera vez
que el objeto aparezca puedes hacer que se desplace o aparezca gradualmente
cuando navegas hacia abajo en una página (solo Premium).
• Tengan una animación si se les hace clic (o se los toca en un dispositivo táctil)
(solo versión Premium)

Además, hay nuevos tipos de animación muy atractivos para las opciones de
MouseOver y clic, como tambaleo y rebote.

www.magix.es
 Introducción 19

Mejoras en el manejo del texto

• Expansión de la autocorrección/abreviaturas Crea tu propia lista de abreviaturas
que se ampliarán automáticamente cuando escribas, por ejemplo, XWD podría
ampliarse a Xara Web Designer a medida que introduzcas el texto. También es
muy útil para símbolos, por ejemplo, puedes configurar que la palabra yen se
convierta en el símbolo ¥. (Solo versión Premium)
• Autocreación de enlaces cuando escribes una URL, por ejemplo, si escribes
xara.com se creará automáticamente un enlace al sitio web de Xara.
• Opción de color de fondo de texto para que puedas destacar fácilmente algunas
palabras
• Una forma sencilla de reemplazar una fuente por otra en todo el documento
(muy útil para sustituir fuentes que faltan al importar PDF)
• Actualizar estilo para que coincida (conveniente para copiar estilos de otro
documento o para aplicar estilos a documentos que aún no los tienen, como
PDF importados)
• Más información detallada sobre permisos para la incrustación de fuentes en
Información del documento
• Exportación precisa de texto con kerning

Contenido
Nuevas plantillas
Seis nuevos temas web en Web Designer, más otros diseños actualizados para que
incluyan variantes para el móvil. Más de 30 nuevos temas web en Web Designer
Premium con hasta 16 diseños de página, todos con variantes para el móvil
(normalmente se venden en paquetes web por 10 $ cada uno).

Nuevos widgets
Un nuevo widget flexible y potente para crear pases de diapositivas en TaskPilot.

Publicación y presentación
Edición online con cloud.xara (beta)
Una manera ultrasencilla de visualizar, editar y actualizar el contenido de tu página
web de Xara a través del navegador de tu equipo o tablet (¡sí, también para tablets
Mac y Android!) y desde cualquier lugar del mundo, y para republicar tu sitio web.

Para diseñadores comerciales:

• Otorga derechos de edición controlada a tus clientes, es decir, permíteles editar

texto y reemplazar imágenes
20

• ¿Estás debatiendo con tu cliente por teléfono sobre un nuevo diseño? Ahora
puedes actualizar la versión en la nube en tiempo real para que tu cliente vea los
cambios a medida que conversan

Y para todos:

• Actualiza el texto (blogs, noticias, precios, etc.) o sustituye imágenes y republica

tu propio sitio web desde cualquier lugar
• Trabaja con colegas en el mismo sitio web y en el mismo momento

Sincronización de documentos con Dropbox o Google

Drive
Web Designer ahora puede sincronizar archivos mediante Dropbox y Google Drive.
Por lo tanto, si tienes el mismo archivo abierto en varios equipos y lo editas y guardas
en uno, se actualizará también en el Web Designer de los otros equipos.

Esto tiene también otra ventaja adicional: Dropbox y Google Drive conservan
versiones anteriores de tus archivos y permiten volver a ver y regresar fácilmente a las
versiones anteriores (en Dropbox solo debes hacer clic derecho en un archivo y
seleccionar "Ver versiones anteriores"). Esto ofrece una forma segura y fácil de
guardar múltiples versiones de los archivos de tu sitio web, y de ahorrar espacio.

Publicación segura vía FTP

Web Designer 11 es compatible con la publicación vía SFTP y FTPS.

Mejoras en la importación y exportación

Importación de PDF:
• Mejores posibilidades de edición de texto (reconstrucción mejorada de texto,
márgenes, importación mejorada de enlaces de texto, importación mejorada de
subrayado)
• Compatibilidad mejorada para la importación de PDF con subgrupos de fuentes
incrustadas, cuando las fuentes no están instaladas localmente
• Se han efectuado pequeñas mejoras y se han solucionado problemas menores.

Otras opciones de importación/exportación

• Opción de exportar una versión para Retina de un gráfico al exportar una versión
de 96 dpi (solo versión Premium)
• Mejoras a la importación de Word

Incluye alojamiento web "M" gratuito en el sitio web

TaskPilot
Web Designer incluye alojamiento web gratis con TaskPilot, que incluye 500 MB de
alojamiento web y TaskPilot (con calendarios y contactos en la nube). Web Designer

www.magix.es
 Introducción 21

Premium incluye el alojamiento web avanzado "M" de TaskPilot gratis por un año (por
un valor de 1,99 $ por mes). Esto ofrece 2 GB de alojamiento web gratis y un año
gratis de un nombre de domino (p. ej., tunombre.com o .es o .de, etc.) Además, si
publicas en TaskPilot puedes proteger tus páginas web con contraseña.

Otras pequeñas mejoras

• Los objetos se redimensionan automáticamente al ancho de la columna si los
insertas en una columna de texto
• Actualización de los símbolos de la fuente Awesome (una forma rápida y fácil
de insertar símbolos de la amplia y creciente selección de fuentes Awesome.
Podrás ver el conjunto completo a través del menú Insertar).
• Posibilidad de controlar los espacios entre las páginas de los supersites
verticales y horizontales (solo versión Premium)
• Uso offline del cuadro de diálogo de opciones de exportación web
• Si se incrustan los contornos, las fuentes tendrán el aspecto correcto también en
documentos importados que no cuenten con esas fuentes; por ejemplo, de
documentos PDF importados que, en su mayoría, contienen contornos de letras
incrustados.
• Nueva opción de Arreglo > Combinar formas > Entrecruzar todas las formas (las
áreas que se superponen se convierten en formas independientes) (solo versión
Premium)
• Compatibilidad mejorada en las herramientas de dibujo para dispositivos táctiles
modernos, incluido Microsoft Surface (solo versión Premium)
• Pequeñas mejoras en los menús desplegables
• Algunas mejoras en los widgets de la galería de fotos (ahora puedes fijar el
tamaño de los popups)
• Nuevo panel de texto para fotos SmartShape

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

• Ayuda de programa: selecciona "AYUDA DE MAGIX WEB DESIGNER 11 PREMIUM" del

menú "AYUDA" para abrir la ayuda de Web 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 MAGIX Web Designer 11 Premium. 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 MAGIX
Web Designer 11 Premium. También cuando colocas el cursor sobre los botones
y los controles, el programa te informa sobre lo que hacen. Para más detalles,
consulta la barra de estado.
• Consejos para herramientas (tooltips) (en la página 22): 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.
22

• 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.
• Vídeos: usa la opción del menú "AYUDA" > "PELÍCULAS ".

Información de documento
"ARCHIVO" > "INFORMACIÓN DE DOCUMENTO" muestra información sobre el
documento seleccionado como el tamaño o cualquier fuente utilizados. Esta es una
buena forma de comprobar si te falta alguna fuente necesaria que pudiera impedir
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á siempre que abras el diálogo de información
de documento.

Consejos de herramientas
Cuando te desplazas sobre un botón, el
consejo de herramienta te informa la
función de ese botón.

Acerca de Web Designer

Escoge AYUDA > ACERCA DE MAGIX WEB DESIGNER 11 PREMIUM . 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.

www.magix.es
 Primeros pasos 23

Primeros pasos
Esta sección te ofrece 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

Barra de herramientas de la página web
Zoom
Galería de diseños (barra de galerías)
Galería de páginas y capas (barra de galerías)
Herramienta de selección
Herramienta de edición de fotos
Herramientas de dibujo
Herramienta de texto
Herramienta de sombra
24

Pestañas para todos los documentos abiertos: el icono identifica el tipo de

documento.
Línea de color

Nota: todas las barras de información de Web Designer han mejorado la

renderización de texto para facilitar la visualización, siempre que tengas habilitado el
texto ClearType en el panel de control de Windows.

En la barra superior hay cuatro botones relacionados con las funciones de 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.

Exportar y previsualizar la página web

Propiedades del enlace
Opciones de página web
Exportar

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

Hay dos maneras de crear una página web. Se puede comenzar con una plantilla
diseñada previamente y personalizarla con tus propios textos, fotos y esquema de
colores. O se puede crear una página web desde cero, colocando todos los elementos
requeridos, texto, gráficos y fotos en el lugar que quieras.

Nota: por defecto, cuando Web Designer abre un documento nuevo, muestra solo
una página. Para ver todas las páginas en tu documento de página web, haz clic
derecho en una página y selecciona VISTA DE PÁGINA MÚLTIPLE . Ahora puedes
desplazarte de arriba a abajo por la ventana de Web Designer para ver todas las
páginas en el documento.

www.magix.es
 Primeros pasos 25

Zoom y desplazamiento de la página

Estas funciones comunes se hacen de manera sencilla:

• Para ampliar o alejar con el zoom, mantén "Ctrl" pulsado y utiliza la rueda del
ratón
• Para desplazar la página, presiona la rueda del ratón y muévelo (la rueda
también funciona como un botón)
• Para desplazarte por la página usa la rueda del ratón (o las barras de
desplazamiento, claro)

Los documentos web se visualizan por

defecto en modo de página única y los
documentos de impresión en modo de vista
multipágina. Cambia de modo de
visualización haciendo clic derecho en la
página o tablero de dibujo y seleccionando o
desactivando VISTA MULTIPÁGINA del menú
desplegable. A la izquierda se muestra un
ejemplo de vista multipágina.

Puedes arrastrar y soltar elementos entre

páginas. Cuando haces cambios de color de
tema en todo el documento, puede verse
como los cambios afectan a todas las
páginas.

La página actual está marcada con corchetes

en las cuatro esquinas.

En este ejemplo puedes ver algunos elementos que se han emplazado en el área del
tablero de dibujo junto a las páginas. El área del tablero de dibujo es útil como lugar
para mantener temporalmente gráficos de trabajo, fotos u otros objetos. Estos objetos
no son exportados como parte de tu página web, a menos que los sitúes en la capa
especial del fondo del tablero de dibujo. En este caso se exportan, ya que se asume
que quieres que formen parte del fondo de tu página web.

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 estos iconos, aparece una
barra desplegable. La barra contiene otros iconos de herramientas que pertenecen a
dicho grupo. Simplemente, mueve el cursor del ratón hasta una de las opciones para
ver un consejo de herramienta y luego selecciona la herramienta que quieras usar.
26

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

convierte en la herramienta principal para ese grupo. Ahora verás ese icono señalado
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.

Consulta el capítulo Personalización en el manual en pdf para más información sobre

las barras desplegables.

Objetos en la página
Si personalizas una plantilla o creas tus propios gráficos desde cero, 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 esquemas de colores,
funcionan a través de todas las páginas simultáneamente.

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

• 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 o numeradas. La barra de información
de la HERRAMIENTA DE TEXTO proporciona controles de fuente, tamaño,
espaciado de línea y más. Puedes redimensionar el texto usando la
HERRAMIENTA DE SELECCIÓN o seleccionando el texto de la manera normal y
escogiendo un punto o tamaños de píxeles alternativos. También puedes incluso
girar el texto desde cualquier ángulo, y usando CONTORNEAR TEXTO (haz clic
derecho en un objeto para ver esta opción) puedes hacer fluir el texto
automáticamente 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 de
color 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 exportas tu página web, se convierte automáticamente en una
imagen gráfica PNG con la resolución adecuada.
• Fotos: hay pocas páginas web que no contengan algún tipo de foto. MAGIX
Web Designer 11 Premium 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
www.magix.es
 Primeros pasos 27

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
es reemplazado por el código requerido para hacer que el widget funcione de
modo que el widget aparece en la misma posición en tu página. Consulta el
capítulo Widgets de página web (en la página 408) en el manual en pdf para
más detalles.

Menús con clic derecho

Al hacer clic derecho sobre cualquier objeto en el espacio de trabajo de MAGIX Web
Designer 11 Premium, se abre un menú desplegable con opciones relacionadas con el
objeto sobre el que has hecho clic. Por ejemplo, si haces clic derecho sobre un
rectángulo que acabas de dibujar, el menú desplegable te permitirá realizar acciones
solo relacionadas con un rectángulo.

Si haces clic derecho sobre una foto, sin embargo, algunas de las opciones del menú
que aparecen serán útiles solo para fotos, mientras que otras serán similares a
acciones que puedes realizar en un rectángulo. Las operaciones específicas para el
objeto se encuentran en la parte superior de la lista del menú de clic derecho, por
ejemplo, en el caso del rectángulo, las tres primeras acciones pueden utilizarse
solamente en rectángulos.

También puedes hacer clic derecho sobre la página y el tablero de dibujo para ver un
menú con las operaciones relacionadas con el fondo de página o de tablero.

Si seleccionas más de un objeto y haces clic derecho, el menú contendrá acciones

específicas para múltiples objetos como agrupar o alinear y combinar, así como otras
operaciones comunes como cortar, copiar y eliminar. De la misma manera, si haces
clic derecho sobre objetos que has agrupado previamente, verás acciones específicas
para un grupo.

Te recomendamos hacer clic derecho sobre cualquier objeto o múltiples objetos en el

espacio de trabajo para acceder al menú específico de esos objetos. Cuando lo hayas
probado algunas veces, sabrás que acciones puedes realizar rápidamente con estos
menús.
28

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), haciendo clic derecho y seleccionando ARREGLO o utilizando
las opciones del menú ARREGLO. Con la HERRAMIENTA DE SELECCIÓN puedes
redimensionar objetos estirándolos desde las esquinas. Puedes rotar 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 diagonalmente las áreas de texto. Ve a la
sección de texto (en la página 227) en el manual en pdf para más detalles y al
capítulo Manejo de texto (en la página 196) para una información detallada acerca de
las funciones de texto de MAGIX Web Designer 11 Premium.

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 57) en el
manual en pdf para más detalles.

Orden de los objetos

Todos los objetos en la página están colocados uno encima del otro. El objeto que se
ha dibujado o creado en último lugar está siempre arriba del todo, es decir delante de
cualquier otro. Puedes ajustar la posición de colocación con clic derecho y
seleccionando ARREGLO o 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. Con clic derecho y seleccionando ARREGLO o
presionando Ctrl+B (o el menú ARREGLO > LLEVAR ATRÁS) el objeto se mueve 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.
www.magix.es
 Primeros pasos 29

Hay una complicación añadida: las capas. Todos los objetos se recopilan en capas con
nombres y cada capa puede activarse o desactivarse para mostrar u ocultar todo en
esa capa. Consulta la sección de capas (en la página 65) en el manual en pdf para
más detalles.

La GALERÍA DE PÁGINAS Y CAPAS te permite ver fácilmente y ajustar el orden de

apilamiento de los objetos y capas. Los objetos se muestran en orden de adelante
hacia atrás en la galería. Lee el capítulo Galería de páginas y capas (en la página 419)
en el manual en pdf para más información.

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.

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 poder arrastrarlos y redimensionarlos. Otros objetos, como grupos,
bloques de texto o fotos, poseen sólo 4 controles y no pueden ser estirados (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.
30

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 superior 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.

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 "EDITAR" > "COPIAR" ("Ctrl + C") y "EDITAR" >
"PEGAR" ("Ctrl + V") o hacer clic derecho en un objeto y seleccionar COPIAR , aunque
una forma muy rápida de copiar un elemento es, simplemente, arrastrarlo con el
botón derecho del ratón.

También puedes copiar y pegar una página en cualquier parte del documento desde el
documento actual o en otro documento: ver Copiar y pegar (en la página 84) páginas.

www.magix.es
 Primeros pasos 31

Creación de una página Web

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, fotos y marcadores de posición en el lugar que quieras de
la página.

Los marcadores de posición son objetos gráficos 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, vídeos de YouTube, mapas interactivos, fragmentos de HTML y widgets de
todo tipo. Lee las secciones posteriores en el correspondiente capítulo del manual en
pdf para más información acerca de los marcadores de posició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 de herramientas web.

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.
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.

Los botones de navegación en la barra superior de la ventana de vista previa te

permite avanzar o retroceder, como en un navegador web, y el botón de Inicio
permite regresar a la página en la que comenzaste la vista previa.

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.
32

Puedes ver tu sitio web en modo de pantalla completa haciendo clic en el

botón de VER PANTALLA COMPLETA en la parte superior derecha de la ventana
de vista previa ("Esc" para salir o "F11" para entrar y salir del modo de pantalla
completa). Cuando se cierra la ventana de vista previa y la siguiente se vuelve
a abrir, Web Designer muestra el último modo elegido para la ventana, es
decir, la pantalla normal, maximizada o completa.

Si no has exportado tu sitio todavía, estas vistas previas se exportan a una carpeta
temporal en tu PC. 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.

Selecciona tu navegador de vista previa

A pesar de que esta vista previa interna utiliza una versión simplificada del navegador
Internet Explorer por defecto, puedes elegir uno de los cinco tipos de navegadores
más populares para ver tu página en la ventana de vista previa.

Para una vista previa de tu sitio web en tu navegador web favorito, haz clic en uno de
los siguientes navegadores de la barra en la parte superior de la ventana de vista
previa:

Nota: estos botones solo están habilitados si tienes instalados los navegadores en tu
PC.

Vista previa de tu página o su sitio web en Google Chrome.

Vista previa de tu página o su sitio web en Mozilla Firefox.

Vista previa de tu página o su sitio web en Internet Explorer.

Vista previa de tu página o su sitio web en Opera.

Vista previa de tu página o su sitio web en Safari.

Al hacer clic en uno de los botones de arriba, se abre el navegador en la página que
estás viendo actualmente en la ventana de vista previa.

Si deseas ver tus páginas en un navegador que no sea de este tipo, puedes hacer clic
derecho sobre el archivo. htm y seleccionar ABRIR CON... , o simplemente puedes
arrastrar y soltar el archivo en una ventana del navegador abierta. Una vez exportado,
cada vez que pulses el botón de vista previa, la exportación se actualizará también, y
entonces solo será necesario pulsar el botón de Actualizar en tu navegador (o
presionar F5).
www.magix.es
 Primeros pasos 33

Uso de plantillas, cliparts y widgets

Abre la GALERÍA DE DISEÑOS con un clic en la pestaña GALERÍA DE DISEÑOS de
la barra de galerías (o con "ARCHIVO" > "NUEVO DE LA GALERÍA DE DISEÑOS" ).

Aquí se muestran carpetas temáticas que contienen colecciones de diseños de

páginas web y archivos gráficos asociados con cada tema específico. Busca en TEMAS
PARA PLANTILLAS DE PÁGINAS WEB (GENERAL) para encontrar todas los diseños de
plantillas disponibles para configurar rápidamente una página web de calidad. En
TEMAS PARA PLANTILLAS DE PÁGINAS WEB (ESPECIAL PARA EMPRESAS) , encontrarás
páginas web completas ya diseñadas para tipos específicos de empresas, lo que hace
incluso más rápido el tener online la página web de una empresa.

Cada tema de página web tiene una serie de diseños alternativos y útiles elementos
para tu página. Cada uno contiene a su vez una plantilla de página web completa y
varios esquemas de colores. 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.

En ELEMENTOS DE PÁGINA Y WIDGETS encontrarás una amplia variedad de gráficos y

widgets que puedes añadir a tu página, desde botones, barras de navegación y
paneles de texto a formas, soluciones de comercio electrónico y pases de fotos. Tan
solo arrastra y suelta cualquiera de ellos desde la galería sobre tu página web. Si estás
conectado a Internet, la galería de diseños se actualiza automáticamente para
mostrarte las últimas plantillas y novedades disponibles.

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, se añadirá una nueva página a tu sitio
web, pero se te preguntará primero si quieres que los cambios de colores coincidan. Si
arrastras un elemento de clipart como un botón, un encabezado o un objeto de foto,
esto se agregará a la página en el lugar en donde lo sueltes y nuevamente se te
preguntará si quieres que los colores coincidan.

Para añadir una nueva página del mismo diseño, la forma más sencilla es hacer
clic derecho en la página y seleccionar DUPLICAR PÁGINA ACTUAL o utilizar el
botón DUPLICAR PÁGINA ACTUAL en la barra de herramientas estándar.

Esto replica la página actual abajo. Luego puedes eliminar o editar los elementos
según lo desees. Esto tiene la ventaja de que mantendrá la misma estructura de
navegación.

O puedes copiar y pegar una página existente en el mismo o en otro documento. Haz
clic en una parte en blanco de la página y selecciona COPIAR PÁGINA. Haz clic
derecho en una página del documento de destino y selecciona PEGAR > PÁGINA (o
pulsa "Ctrl + V").
34

La página en el portapapeles se añadirá inmediatamente como una nueva página

después de la página actual. La página pegada adopta el tamaño de página del
documento en el que es pegada (siempre y cuando esté activada la opción TODAS LAS
PÁGINAS IGUALES EN EL DOCUMENTO bajo ARCHIVO > OPCIONES DE PÁGINA ). También
se pegarán las capas de la página y los atributos y todos los objetos en la página.

Puedes agregar una nueva página en blanco, haciendo clic derecho y

seleccionando NUEVA PÁGINA o utilizar el botón INSERTAR PÁGINA EN BLANCO
en la barra del menú desplegable de la página.
Puedes eliminar páginas haciendo clic derecho y seleccionando ELIMINAR
PÁGINA ACTUAL o haciendo clic en el botón ELIMINAR PÁGINA ACTUAL en la
barra del menú desplegable de la página.

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

Puedes incrustar fácilmente películas, archivos de audio MP3, animaciones flash, GIF
animados, PDF, galerías de fotos y widgets de diapositivas y tipos ilimitados de
widgets interactivos en tu página web creada con MAGIX Web Designer 11 Premium.
Consulta el capítulo de Widgets de página web para más detalles.

Puedes crear tus propias animaciones Flash y GIF con MAGIX Web Designer 11
Premium. Consulta el capítulo Animaciones.

Clipart flash
MAGIX Web Designer 11 Premium incluye la posibilidad de crear animaciones flash
desde cero (ver la sección Animaciones flash (en la página 434) en el manual en
PDF), 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,
utiliza "ARCHIVO" > "IMPORTAR" o arrastra y suelta el archivo .swf en tu página web.

Se generará automáticamente una imagen de marcador de posición y se colocará en

tu página. Haz una vista previa de tu página para ver la animación Flash en
funcionamiento. Como alternativa, puedes crear tu propio marcador de posición (p.
ej., un rectángulo) y luego utilizar la pestaña MARCADOR DE POSICIÓN del diálogo
PROPIEDADES WEB para asociarlo con tu archivo Flash.

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:

www.magix.es
 Primeros pasos 35

• Haz clic en la pestaña GALERÍA DE DISEÑOS en la barra de galerías.

• O selecciona "HERRAMIENTAS" > "GALERÍAS" > "GALERÍA DE DISEÑOS".

Consulta MANEJO DE DOCUMENTOS (en la página 95) para más información sobre
como usar las galerías. Si te encuentras en línea cuando abres la galería, comenzarán
a descargarse automáticamente diseños y widgets de los servidores de Web
Designer, que aparecerán de inmediato en la galería. Visita regularmente la galería
para ver los últimos widgets y plantillas gratis disponibles. Para abrir una plantilla
como un nuevo documento, haz doble clic. Para importar una plantilla en un
documento abierto, arrástrala y suéltala sobre le diseño. Las plantillas de página se
agregan como nuevas páginas al documento actual cuando lo haces. Otras plantillas y
widgets se agregan a la página actual.

Muchas de las carpetas de la galería en ELEMENTOS DE PÁGINA Y WIDGETS contienen

"widgets", tal como lo indican sus nombres de carpeta. Estos son mucho más que
simples gráficos estáticos. Consulta el capítulo WIDGETS DE PÁGINA WEB para más
información.
36

Catálogo de contenido online

El catálogo de contenido online es esencialmente una versión "nube" de la galería de
diseños. Es decir, todo el contenido está almacenado online y como tal requiere que
estés conectado a Internet. Además de tener la librería de la galería de smartshapes,
temas de páginas web, plantillas de diseño y widgets almacenados en tu PC como
parte de Web Designer, también puedes acceder a todo el contenido a través del
catálogo de contenido, que ofrece una forma fácil e intuitiva para buscar todo el
contenido.

Cuando importas una pieza de contenido desde el catálogo de contenido se descarga

en tu PC y permanece disponible cuando no estás conectado. Para abrir el catálogo de
contenido:

• Haz clic en "ARCHIVO" > "NUEVO DEL CATÁLOGO DE CONTENIDO"

(Shift+Ctrl+Alt+K)
• haz clic en "INSERTAR" > "DESDE EL CATÁLOGO DE CONTENIDO" para insertar y
descargar una pieza de contenido desde el catálogo.

Catálogo de contenido online

El catálogo es una ventana redimensionable: arrastra los bordes o la esquina inferior

derecha para cambiar el tamaño. Se obtiene un popup de vista previa cuando pasas
por las categorías de contenido a la izquierda: haz clic para seleccionar y esa categoría
se expandirá y se mostrará en el lado derecho. Para las categorías que tienen muchos

www.magix.es
 Primeros pasos 37

elementos hay un control de página en el extremo superior derecho que te permite

ojear las páginas de contenido siguientes y posteriores.

Cuando se usa la versión de prueba gratuita, los elementos que se muestran en azul
en la lista de contenido de la izquierda se pueden usar durante el periodo de prueba
de forma gratuita. Todos los elementos que se muestran están disponibles de forma
inmediata y gratuita una vez que compras y activas el programa.

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.

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).
38

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.

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.

www.magix.es
 Primeros pasos 39

Puedes asignar un relleno de color con gradación a un objeto dibujado utilizando la

herramienta de relleno (en la página 239).

Importación de clipart con color

Cuando importas un gráfico de clipart arrastrándolo desde la GALERÍA DE DISEÑOS , al
utilizar la opción "ARCHIVO" > "IMPORTAR" , o arrastrando un archivo .web o .xar hasta
la página, por lo general se te preguntará si deseas vincular los colores. Si seleccionas
NO IGUALAR , entonces cualquier color con nombre utilizado en este gráfico será
añadido a la línea de colores. Haciendo clic en cualquier color de la línea de color, te
dará la opción de editarlo.

También puedes cambiar los colores o cualquier objeto multicolor seleccionándolo y

haciendo clic sobre un color de la línea de color. Aparecerá un diálogo que te muestra
el conjunto de colores usados actualmente en este objeto: tan solo haz clic sobre el
que quieres cambiar. También puedes abrir el editor de color. La lista de colores en la
parte superior incluye el mismo conjunto de colores: elige el que quieres editar.

Colorear fotos
Si intentas colorear una foto, se convierte en una foto de "colores completos". 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 .

Fondos de página web

La mayoría de diseños de página en la GALERÍA DE DISEÑOS tienen dos tipos de fondo.
Un fondo de tablero de dibujo amplio que se extiende a lo largo del fondo de toda la
ventana del navegador cuando exportas tu página. Sobre él está el fondo de página
con todos los otros elementos que constituyen la página web.
40

Color de fondo del tablero de dibujo o del navegador

Color del fondo de página

Puedes cambiar fácilmente el color del TABLERO DE DIBUJO o del FONDO DE PÁGINA
arrastrando y soltando un color de la LÍNEA DE COLORES o incluso usando el EDITOR DE
COLORES .

Cuando creas un nuevo documento en blanco ("ARCHIVO" > "NUEVO" ) la página es

transparente (sin color) por defecto, por lo que tan solo verás el color del tablero de
dibujo tras ella, que es blanco por defecto. También verás un contorno guía
rectangular suave que muestra los límites de la página sobre el tablero de dibujo.

Además, hay una gran variedad de texturas de fondo prediseñadas en la GALERÍA DE

DISEÑOS . Tan solo arrastra y suelta un color hasta el área del tablero de dibujo para
usarlas.

Consulta Fondos de página web (en la página 311) para más información.

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.

www.magix.es
 Primeros pasos 41

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.
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.
42

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 11 Premium 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 11
Premium 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 11 Premium 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.

Importación de fotos grandes

Al importar fotos de alta resolución (cualquiera de más de 1920 píxeles,
independiente del alto o ancho) en un documento web, MAGIX Web Designer 11
Premium ajusta la foto automáticamente al tamaño de la pantalla HD sin preguntar si
quieres importar una versión con una resolución menor. Para un documento web, aun
con el tamaño reducido, debería haber más que resolución suficiente en tus fotos para
resultados de alta calidad en tu página web, por lo que raramente es necesario
importar imágenes de cámaras digitales con su resolución completa para usar en la
web.

Sin embargo, si importas una foto grande a un documento de impresión o con

animación, MAGIX Web Designer 11 Premium te pregunta si quieres importar una
versión de menor resolución de tus fotos. Si el documento va a incluir muchas fotos,
sería conveniente elegir la opción de menor resolución. De lo contrario, si contiene
fotos de gran tamaño, 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). La memoria
requerida al editar y exportar el documento serán también mayor de lo necesario.

La herramienta de fotos
La herramienta de foto suministra una gran variedad de formas de optimizar y
recortar cualquier foto.

www.magix.es
 Primeros pasos 43

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 para más información detallada sobre cómo
MAGIX Web Designer 11 Premium maneja fotos y el apartado en Herramienta de
foto para averiguar cómo utilizar la herramienta de foto.

Fotos en miniatura con popup

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. 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 ).
44

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 un texto diferente, como
"Haz clic para ampliar" cuando mueves el cursor sobre la miniatura de imagen, ve a la
pestaña MOUSEOVER y cambia "MUESTRA TEXTO DE POPUP " por "HAZ CLIC PARA
AMPLIAR ".

Texto
Puedes editar el texto seleccionando HERRAMIENTA DE TEXTO y haciendo clic
en el texto.

Dispones de todas las opciones de procesamiento comunes de Word y puedes pegar

textos desde el portapapeles. Con doble clic se seleccionará una palabra, con triple
clic se seleccionará una línea entera (lo que puede ser útil para seleccionar todo el
texto en un botón). Como es habitual, la barra de información provee una amplia
variedad de controles para esta herramienta. Como alternativa, puedes hacer clic
dentro del texto y escoger PROPIEDADES AVANZADAS DE TEXTO .

www.magix.es
 Primeros pasos 45

El menú de fuente presenta una lista de fuentes y está separado en cuatro secciones.
El apartado superior muestra las fuentes ya usadas en el documento, el segundo
muestra las fuentes compatibles con la web, el tercero muestra las fuentes Google
disponibles y, finalmente, el apartado inferior muestra todas las fuentes instaladas en
tu PC.

Popup de tamaño de fuente en tiempo real

Fuentes usadas en el documento actual
Fuentes compatibles con la web
Fuentes de Google
Todas las fuentes instaladas
Variantes de estilo disponibles para la fuente seleccionada. No todas las fuentes
tienen variantes
46

La opción "añadir" en la sección de fuentes de Google te permite examinar, descargar

e instalar desde cientos de fuentes de acceso libre que puedes usar en tu página web.

El menú de fuentes ofrece la selección de fuentes en tiempo real. Mientras vas

recorriendo el menú, el texto seleccionado cambia de fuente, proporcionando una
vista previa de como se verá la fuente 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.

Usar fuentes en tu página web

Las fuentes de la sección de fuentes seguras se pueden usar sin problemas en las
páginas web, ya que la gran mayoría de los equipos y otros dispositivos dispondrán de
estas fuentes. También puedes usar cualquiera de los cientos de fuentes de Google
porque se descargarán automáticamente a través del navegador web cuando alguien
visite tu página. Puedes usar otras fuentes que hayas instalado y tenerlas incrustadas
automáticamente en tu página, siempre que la licencia de la fuente lo permita:
consulta el capítulo "Manejo de texto" para más detalles.

Si conviertes cualquier objeto de texto en un gráfico puedes usar cualquier fuente.

Consulta la sección de grupos (en la página 50) 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.

www.magix.es
 Primeros pasos 47

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 ingresar rápidamente listas con viñetas o numeradas.
Puedes hacer clic derecho sobre una lista numerada y escoger PROPIEDADES DE LA
LISTA… del menú contextual para cambiar el orden del esquema de números en tu
lista. También puedes usar cualquier gráfico como viñeta o número de tu lista.
Consulta el capítulo Herramienta de texto (en la página 196) 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 220)", 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 se contornean automáticamente,
es decir, el texto siempre fluye alrededor de estos objetos cuando los arrastras cerca.

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 el contorneo funcione (Ctrl +F).
Como alternativa, si solo quieres que el texto fluya alrededor de un objeto en una
capa individual, puedes hacer que el texto debajo de esta capa no se contornee (útil
para capas popup dentro de una página web). Consulta Propiedades de capa (en la
página 426).

Todas las operaciones de la HERRAMIENTA DE TEXTO son en tiempo real: el texto se

reformatea y refluye según vas ajustando el ancho de la comuna o vas moviendo los
objetos contorneados.

Nota: ahora también puedes hacer que el texto fluya alrededor de Objetos ancla (en
la página 48).
48

Objetos ancla
Si deseas que un objeto gráfico aparezca junto a una parte particular de un bloque de
texto, puedes anclar el objeto junto al texto para que se mueva junto con él.

Haz clic sobre el objeto y selecciona ANCLAR AL TEXTO . En la HERRAMIENTA DE

SELECCIÓN , haz clic y arrastra el símbolo del ancla que aparece en la parte superior
izquierda del objeto hasta la ubicación del texto en donde quieres fijar el objeto.
Ahora, si editas o mueves el texto, el objeto anclado se moverá junto con el punto
anclado.

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.

Tamaño de página
Las páginas de la GALERÍA DE DISEÑOS están diseñadas para tener un ancho
compatible con la mayoría de las pantallas. No se recomienda crear páginas más
anchas, incluso si tu PC dispone de una pantalla 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 configurar cualquier tamaño de página que quieras seleccionando TAMAÑO DE

PÁGINA del DIÁLOGO DE OPCIONES (haz clic derecho y selecciona OPCIONES DE
PÁGINA , u OPCIONES DE PÁGINA del menú ARCHIVO ). No se recomienda crear un
ancho de página que supere los 990 píxeles, ya que este es el ancho máximo para
gran parte de las pantallas (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.

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

inferior o derecho de la página. Ve a la HERRAMIENTA DE SELECCIÓN y mueve el cursor
sobre el borde inferior de la página y este cambiará para indicarte que ahora puedes
arrastrar para reducir o ampliar el tamaño de la página según se requiera.

www.magix.es
 Primeros pasos 49

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 419).

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. 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 88) para más detalles
acerca de estas funciones.
50

Grupos
Puedes agrupar cualquier selección de objetos en la página. 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. Muchos de los elementos de los
diseños de plantilla de la GALERÍA DE DISEÑOS , como los botones, paneles de texto y
objetos de fotos, son elementos agrupados.

Por ejemplo, puedes dibujar un simple botón desde cero dibujando un rectángulo con
la HERRAMIENTA DE RECTÁNGULO y colocando una etiqueta de texto encima con la
HERRAMIENTA DE TEXTO . Estos son objetos separados y puedes moverlos de forma
independiente en la HERRAMIENTA DE SELECCIÓN . Pero si seleccionas ambos en la
HERRAMIENTA DE SELECCIÓN (también puedes arrastrar para incluir ambos o presionar
"Shift" y hacer clic sobre otros objetos adicionales) y haces clic derecho y seleccionas
GRUPO (o pulsas "Ctrl + G" o usas el menú "ORDENAR" > "GRUPO" ), se convertirán en
un objeto agrupado (Pista: la línea de estado que se encuentra debajo siempre te
informa de lo que está seleccionado). Ahora si arrastras, cambias el tamaño o giras
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 (haz clic derecho y selecciona DESAGRUPAR o pulsa "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.

Cambia o edita cualquiera de los colores por separado usados dentro de un grupo
seleccionándolos y haciendo clic en un color o línea de color, o abriendo el editor de
color. Consulta el apartado sobre cambio de colores para más información.

Convertir texto en un gráfico

Como se mencionaba arriba, solo 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.

www.magix.es
 Primeros pasos 51

Por lo tanto, todo lo que tienes que hacer para incluir una fuente como esta es
agrupar. No es necesario que esté agrupada con otro, puede agruparse consigo
misma si seleccionas GRUPO del menú ARREGLO o presionas "Ctrl+G".

Nota técnica: al exportar estos grupos como imágenes en una página web, cualquier
texto del grupo se utiliza como texto alternativo de HTML en la imagen (salvo que
fijes explícitamente otro texto alternativo para el grupo). Esto significa que los
motores de búsqueda pueden indexar el texto y que las herramientas utilizadas por
las personas con problemas en la visión también reconocerán y leerán este texto, a
pesar de que el texto no aparece directamente en la página web. Si no quieres que el
texto alternativo se utilice de esta forma, puedes ignorarlo si fijas otro texto
alternativo para el grupo en la pestaña Imagen en Herramientas > Propiedades web.

Grupos suaves (soft groups)

Hay otro tipo de grupo denominado "Grupo suave" que es un conjunto de objetos
conectados de una forma más suelta . Consulta el capítulo Manejo de objetos para
más información.

Grupos anclados
Cuando aplicas anclaje a un objeto respecto al texto, se coloca dentro de un grupo
anclado. Consulta Gráficos anclados (en la página 222) para más información sobre
los objetos anclados.

Grupos de repetición
Cuando haces que un objeto se repita, se coloca dentro de un grupo de repetición.
Consulta Objetos repetidos (en la página 143) en el capítulo Manejo de objetos para
más detalles.

Objetos repetidos
En tu documento o página 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 logotipos. MAGIX Web Designer 11 Premium te ofrece la posibilidad de repetir
cualquier elemento en el mismo lugar de las páginas del sitio. Cuando actualices una
de las copias, todos los cambios se reflejarán automáticamente en todas las páginas.

Consulta la sección Objetos repetidos (en la página 143) en el capítulo Manejo de

objetos para más detalles.
52

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 (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 colores 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.

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

www.magix.es
 Primeros pasos 53

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 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 474) en el manual en PDF. En el ejemplo anterior, la
compresión JPEG se ajustó para obtener un tamaño de archivo óptimo.

Enlaces, botones y barras de navegación

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

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

introducir la dirección web que quieres enlazar.
54

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

La pestaña ENLACE del 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 con el menú ENLAZAR A) y puedes decidir si quieres que se abra así la
página en una ventana separada. También puedes enlazar a cualquier capa emergente
si ya las has creado.

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 . Ya has terminado.

www.magix.es
 Primeros pasos 55

Cuando hayas creado un enlace a un objeto puedes cambiar rápidamente su

funcionamiento con tan solo hacer clic sobre el mismo. Aparecerá un popup con los
detalles y opciones para Cambiar o Eliminar el enlace.

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, seleccionar toda la línea de texto
para un reemplazo más sencillo al tipear.

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 . Pero también puedes crear tus propios botones MouseOver:
consulta la sección "Capas" más abajo.

Añadir 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
llamados botones extensibles se alargarán para adaptar el botón de etiqueta de texto.

Además, en ELEMENTOS DE PÁGINA Y WIDGETS , hay una categoría que contiene un

conjunto de diseños de botones generales que se pueden agregar a tu página de la
misma forma.

O puedes copiar cualquier botón ya existente. Puedes copiar y pegar, aunque un

shortcut más rápido es arrastrar con el botón derecho del ratón apretado. (Este es un
shortcut general para copiar cualquier objeto). Ahora puedes editar el texto y
enlazarlo como desees.

Consejo: si mantienes presionada la tecla "Ctrl" mientras 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.
56

Barras de botones (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 11
Premium 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. Puesto que no puedes aplicar un efecto de transición a un enlace de una barra de
navegación, los controles de transición de enlace están desactivados.

En el diálogo de propiedades de la barra de navegación 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, solo 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 del sitio) haz clic y escoge REPETIR EN TODAS LAS PÁGINAS . Esto hará que
la barra de botones se convierta en un objeto y lo copiará de la página actual a todas
las otras en la misma ubicación.

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

Tus propios iconos en las pestañas de los

navegadores (favicon)
Es posible que quieras que tu propio icono personalizado, por ejemplo, un logo,
aparezca en las pestañas de tu página web cuando se muestran en un navegador.
Web Designer te permite hacerlo si aplicas el nombre "favicon" a tu icono de pestaña
personalizado.

Para crear un "favicon", arrastra o dibuja la imagen que quieres usar en tu página web.
La imagen puede tener cualquier tamaño, puesto que se ajustará automáticamente al
tamaño correcto al mostrarse en un navegador.

www.magix.es
 Primeros pasos 57

Haz clic en el objeto y luego en el botón "Nombres" a la derecha de la barra

de información de la HERRAMIENTA DE SELECCIÓN .

En el diálogo "Nombres", escribe "favicon", en el campo APLICAR NOMBRES , luego haz

clic en AGREGAR y finalmente en CERRAR .

Haz una vista previa de tu página web en tu navegador preferido. La forma más fácil
de hacerlo, es hacer clic en uno de los iconos de vista previa y en la ventana de vista
previa de MAGIX Web Designer 11 Premium, para luego escoger uno de los
navegadores web en la parte superior derecha de la ventana de vista previa.

Tu página web se mostrará con el icono personalizado, tal como se muestra en el

ejemplo más abajo.

Puedes utilizar un solo favicon por página web. Publica tu página web y visualízala
para ver tu favicon.

Herramientas de dibujo
Web Designer te ofrece todas las herramientas gráficas
que necesitas para crear cualquier objeto gráfico en tu
página, así como una variedad de elementos gráficos
previamente diseñados en la GALERÍA DE DISEÑOS . Existen
varias herramientas de dibujo básicas que te permiten
crear rectángulos, elipses, polígonos regulares, estrellas 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 detalle más ínfimo y todas las ediciones pueden
deshacerse.

Atributos actuales (estilos)

Un "atributo" es una característica de un objeto que puedes modificar en MAGIX
Web Designer 11 Premium. Por ejemplo, los atributos de una forma incluyen su color,
el ancho del contorno y su color de contorno.

Tal como se menciona anteriormente, puedes cambiar los atributos de un objeto

después de haberlo dibujado, si lo seleccionas y luego cambias su color de relleno, el
ancho de la línea o cualquiera de sus atributos. Pero MAGIX Web Designer 11
58

Premium también realiza un seguimiento de los atributos "actuales" que son aquellos
que se aplican a objetos nuevos cuando se crean.

Configuración manual de los atributos actuales

Si, por ejemplo, quieres que el próximo rectángulo que dibujes sea rojo, asegúrate de
que nada esté seleccionado (pulsa Esc o haz clic en una parte vacía de una página) y
luego haz clic sobre el color rojo en la línea de colores. Has fijado que el color de
relleno actual sea rojo. Ahora, cuando dibujes una nueva forma, su relleno será rojo.
Puedes fijar otros atributos de la misma manera, siempre fijándote que no haya nada
seleccionado antes de escoger el valor del atributo.

Configuración automática de atributos

Por defecto, MAGIX Web Designer 11 Premium actualiza automáticamente los
atributos para que coincidan con los del último objeto que has dibujado o
seleccionado. Entonces si, por ejemplo, haz dibujado un rectángulo y lo has hecho
verde, la próxima forma que dibujes será también verde. Si tienes un rectángulo azul
en tu diseño y deseas dibujar otro igual, entonces selecciona primero ese rectángulo
azul (esto hace que los atributos sean los actuales) y, entonces, la próxima forma que
dibujes también será azul. Entonces, al hacer clic sobre un objeto, fijas todos los
atributos actuales para que coincidan con ese objeto.

Esto te permite utilizar los objetos existentes como una "paleta" de los estilos
disponibles. Haz clic sobre un objeto para seleccionarlo y luego dibuja objetos nuevos
con este estilo.

Puedes desactivar este comportamiento en la PESTAÑA GENERAL (en la página 488)

del diálogo HERRAMIENTAS > OPCIONES . Selecciona la opción PREGUNTAR ANTES DE
APLICAR EL ATRIBUTO ACTUAL . Ahora, Web Designer te preguntará antes de cambiar
los atributos actuales a aquellos que has utilizado recientemente.

Grupos de atributo
Muchos diseños consisten en una combinación de formas cerradas con relleno y
formas abiertas (líneas en que los puntos de inicio y fin no coinciden). En general, no
se desea utilizar los atributos de una forma abierta para una cerrada, ni viceversa. Por
lo tanto, los atributos para las formas abiertas y cerradas se conservan separados y se
conocen como grupos de atributos. Fijar los valores de un grupo no afecta al otro
grupo. Entonces, por ejemplo, si seleccionas un rectángulo con relleno sin contorno
no cambiará el ancho de línea actual a cero para las formas abiertas.

Por los mismos motivos, los atributos de texto forman un tercer grupo de atributos. El
grupo de atributos de texto solamente se fija cuando seleccionas objetos de texto o
cuando fijas los atributos de forma manual mientras te encuentras en la herramienta
de texto.

www.magix.es
 Primeros pasos 59

Atributos exentos
Algunos atributos no se fijan como actuales de forma automática, aún cuando la
opción "Dar a nuevos objetos los atributos más recientes" esté activada. Esto es
porque algunos atributos pueden causar problemas si se convierten en actuales.

Por ejemplo, si has aplicado una difuminación de 10 píxeles a un objeto grande (para
hacer los bordes menos nítidos) y luego dibujas una forma de 10 píxeles de tamaño,
entonces la nueva forma sería invisible si el atributo de difuminación estuviera fijado.

Otros atributos pueden afectar la forma en que los diseños se exportan, o aumentar
significativamente el tiempo de renderización de ese diseño, por lo que no deberían
aplicarse de no ser necesario.

Los ejemplos de los atributos que se copian automáticamente:

• Colores de relleno, estilos de relleno, ancho de línea, color de línea, estilo de
línea, estilo de unión de línea, estilo de extremo de línea, puntas/extremos de
flechas, fuente de texto, tamaño de fuente de texto, márgenes de texto.

Los ejemplos de los atributos que no se copian automáticamente:

• Difuminación, transparencia, sombras, biselado, 3D.

Restauración de atributos actuales

Puedes restablecer los grupos de atributos actuales, si pulsas ESC cuando ningún
objeto esté seleccionado. Si hay objetos seleccionados, pulsar ESC quitará la
selección, así que pulsa nuevamente la tecla ESC para restaurar los atributos a su
valor por defecto.

Herramienta de formas
El EDITOR DE FORMAS te permite crear imágenes detalladas basadas en
vectores y editar también el contorno de cualquier forma.

Para formas predeterminadas como rectángulos o elipses, si quieres editar el

contorno de tus formas de caracteres de texto, debes convertir primero el objeto en
una forma editable. Puedes hacerlo si utilizas el shortcut "Ctrl + 1". Después puedes
usar el EDITOR DE FORMAS para realizar diversas ediciones de vectores avanzadas.
Consulta la sección de referencia (en la página 149, en la página 155) para más
información acerca del uso de esta poderosa herramienta.

La herramienta de líneas rectas y flechas

La HERRAMIENTA DE LÍNEAS RECTAS te facilita el dibujo de líneas rectas de un
solo segmento y el agregado de extremos de flechas.
60

Simplemente haz clic y arrastra sobre la página para dibujar una línea recta. Puedes
hacer clic sobre una línea existente para seleccionarla y, una vez seleccionada, puedes
hacer clic y arrastrar de cualquier extremo para moverlo.

Agregar extremos de flechas con la herramienta de líneas

rectas
La barra de información tiene dos listas desplegables a la izquierda, que te permiten
escoger un extremo de punta para cada extremo de la línea seleccionada.

Punta de flecha
Extremo posterior de la flecha
Tamaño del extremo de la flecha
Trayectoria invertida

La barra deslizante de la barra de información te permite cambiar el tamaño de los

extremos de flecha de la línea seleccionada actualmente. O puedes introducir un valor
de porcentaje al campo de texto del tamaño a la derecha de la barra deslizante.

Por defecto, los extremos de línea se crean con un ancho 6 veces mayor que el ancho
de la línea, y esto se toma como el tamaño 100%, como indica la barra deslizante de
tamaño. Si haces la línea más ancha, el ancho del extremo de la flecha también se
actualizará. Por lo tanto, introduce un valor menor que 100% para reducir el tamaño
de los extremos de la flecha o mayor que 100% para aumentarlo. A pesar de que la
barra deslizante solo llega a un máximo de 800%, puedes entrar porcentajes mayores
en el campo de texto.

Trayectoria invertida
Presiona el botón Trayectoria invertida de la barra de información para
intercambiar la punta y el final de la flecha de la línea seleccionada.

Agregar más segmentos de línea

Las líneas creadas con la HERRAMIENTA DE LÍNEAS RECTAS son, por supuesto,
completamente compatibles con las otras herramientas de dibujo. Entonces, si
quieres agregar más segmentos a una línea, curvarla o tal vez convertirla en una
forma cerrada, utiliza el EDITOR DE FORMAS .

www.magix.es
 Primeros pasos 61

Herramienta de rectángulo
Para dibujar un rectángulo, selecciona la HERRAMIENTA RECTÁNGULO y
arrástrala por la página. Verás una forma con relleno sólido a medida que
arrastras por la página, que te indicará el color de relleno y de línea, y los
bordes de la forma que estás dibujando.

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 deslizantes para redimensionar un objeto.

Arrastra y suelta un color desde la Línea de colores a tu forma para cambiarle el

color. Consulta Colorear formas (en la página 38). Con la HERRAMIENTA DE SELECCIÓN
puedes arrastrarla, girarla y cambiar su tamaño según lo desees. Consulta
herramienta de selección (en la página 29). Puedes colocar este rectángulo detrás de
los otros objetos como imagen de fondo si pulsas Ctrl+B para "Al fondo". Como
alternativa, si se encuentra frente a los demás objetos (Ctrl+F), puedes hacer clic
derecho y seleccionar CONTORNEAR TEXTO para hacer que el texto de la página fluya
alrededor de la parte externa de esta forma (otra herramienta de autoría web de Web
Designer).

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

62

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á únicamente 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.

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.

www.magix.es
 Primeros pasos 63

Difuminación
Éste es un término gráfico 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 herramientas de la izquierda, sino uno de
los controles que se ubican en la barra superior. Pruébalo en tu forma de 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.

Éste 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.

Esta 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 convierte automáticamente al gráfico
indicado, cuando guardas tu página web. En
Web Designer puedes crear cualquier tipo de
gráfico, foto, texto con transparencia y
simplemente "funciona". Web Designer puede
también importar casi todos los tipos de
archivos gráficos, desde Adobe EPS, hasta
Photoshop PSD, Cámara RAW y 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. Esto es
compatible con todos los navegadores web modernos.
64

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, ve a la HERRAMIENTA DE SOMBRA y

arrastra sobre sombra.

Gráficos de ejemplo

Este botón combina muchas de las funciones descritas más abajo: fue 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 software de edición como Photoshop, es que puedes volver a
colorear, editar, rotar y cambiar el tamaño del botón sin pérdida de calidad. Agrándalo
y verás que mantiene la nitidez:

Sobre la ampliación puedes volver a colorear de manera más fácil. Tan sólo
selecciona, haz clic en un color y elige el color que quieres reemplazar de la lista que
se muestra en el cuadro de diálogo "Reemplazar color" que aparece. Puedes incluso
extenderlo como lo desees: todo lo que hagas en Web Designer es no destructivo (lo
que significa que puedes editar siempre sin pérdida de calidad).
www.magix.es
 Primeros pasos 65

Aquello que normalmente lleva mucho tiempo y procedimientos en otro software

para gráficos, es cosa de niños en Web Designer.

Capas, MouseOver (rollover) y elementos

emergentes
Como ya se mencionó anteriormente, todos los objetos tienen un orden de ubicación
en la página: desde el objeto más al fondo hasta el objeto en primer plano.

Estos objetos están ubicados unos encima de otros.

Adicionalmente, todos los objetos pueden posicionarse en capas nombradas. Cada

capa puede tener cualquier cantidad 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 se controlan desde la GALERÍA DE PÁGINAS Y CAPAS de la barra de

galerías.
En Web Designer, las capas se utilizan 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
emergentes como un panel de texto que contiene una descripción detallada de
producto. También puedes aplicar una transición a una capa para que aparezca en tu
página web con una animación.

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.
66

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).

www.magix.es
 Primeros pasos 67

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, 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 51).

Orden de capas en documentos de página web

Si tu documento de página web tiene efectos MouseOver, capas popup y quizás
también efectos MouseOver en estas capas popup, deberás seguir algunas reglas
importantes sobre cómo ordenar las capas en tu documento. Si no sigues estas reglas
de orden, es posible que algunos efectos no funcionen.

Si tienes en cuenta las capas una a una desde el fondo hasta el primer plano (que
significa ir hacia arriba en la GALERÍA DE PÁGINAS Y CAPAS ), primero deben
encontrarse todas las capas estáticas. Se trata de capas que siempre son visibles y
que no se usan como popups. En la mayoría de los diseños habrá solo una: la capa
MouseOff. Pero ciertos diseños pueden tener varias, en cuyo caso deberán ser las
primeras capas en el orden.

La siguiente es la capa MouseOver, en caso de que hubiera efectos MouseOver en las

capas. Esto contiene los estados de MouseOver para todos tus botones MouseOver.
Luego, debe encontrarse la capa "MouseDown", si has agregado efectos MouseDown
a las capas estáticas.

Tu siguiente capa podría ser una capa popup. Si los objetos de este grupo tienen
efectos MouseOver, entonces la siguiente capa que siga a la capa popup debe ser la
capa que contiene dichos efectos. Debe tener un nombre que comience con
"MouseOver", p. ej. "MouseOverPopup1". Luego, si la capa popup también tiene
efectos MouseDown, deberá seguir una capa cuyo nombre comience con
"MouseDown" y que contenga todos esos efectos.

A continuación puedes tener otra capa popup a la que debe seguirle de nuevo otra
capa MouseOver y MouseDown para esa capa popup. Y así sucesivamente. Puedes
tener tantas capas popup como quieras.

Por lo tanto, para resumir lo explicado anteriormente, el orden de las capas debe
seguir, en general, lo que indica la lista siguiente, que se muestra en el mismo orden
que en la GALERÍA DE PÁGINAS Y CAPAS (del primer plano al fondo) Todas las capas
son opcionales y puedes nombrar las capas como tú quieras, a excepción de los
caracteres en negrita que identifican las capas especiales MouseOver y MouseDown.
68

MouseDown popup n
MouseOver popup n
Capa popup n
...
MouseDown popup 1
MouseOver popup 1
Capa popup 1
MouseDown
MouseOver
Capa estática n
...
Capa estática 2
MouseOff

Ten en cuenta que solo tienes que preocuparte por estas reglas de orden si estás
construyendo páginas complejas con múltiples efectos popup. Si estás usando los
diseños de plantillas provistos en la GALERÍA DE DISEÑOS , no tendrás problemas con el
orden de las capas de tu sitio web.

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 el objeto (Ctrl+X o haz clic derecho y selecciona CORTAR ). Asegúrate de

que la capa de destino es la capa actual (mostrada con , haz clic en la capa si
no es así) y luego haz clic derecho en PEGAR o PEGAR EN LUGAR. Ten en cuenta
que si cortas o copias múltiples elementos que se encuentran en diferentes
capas, la estructura de capas se conservará al pegar. Los elementos se pegarán
en la misma capa de la que se cortaron/copiaron en vez de en la capa actual. Si
quieres pegar todos los elementos en la capa actual e ignorar la estructura de
capas, usa la opción PEGAR EN LA CAPA ACTUAL . Si quieres mantener la estructura
de las capas, escoge PEGAR EN EL LUGAR DE LA CAPA ACTUAL . Estas opciones de
pegado también se encuentran en la barra desplegable del portapapeles en la
barra superior, así como también en el menú EDITAR .
• Haz clic derecho y escoge ARREGLO y luego 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.
• Asegúrate de que la capa de destino esté seleccionada como la capa actual y
luego encuentra el elemento seleccionado en la GALERÍA DE PÁGINAS Y CAPAS
(haz clic en el botón LOCALIZAR ), haz clic derecho sobre el elemento y
selecciona MOVER A LA CAPA ACTUAL .

www.magix.es
 Primeros pasos 69

Aplicación de transiciones a las capas popup

Puedes aplicar una transición a una capa popup para controlar como aparecerá la
capa y también como se cerrará.

1. Haz clic en la capa en la GALERÍA DE PÁGINAS Y CAPAS y luego en el botón

PROPIEDADES en la parte superior de la galería.
2. Haz clic en la pestaña CONFIGURACIÓN DE POPUP del diálogo de propiedades de
capa.
3. Escoge un EFECTO DE TRANSICIÓN de la lista desplegable y mueve la barra
deslizante para fijar la velocidad de la transición en segundos.
4. Escoge la forma en que quieres que se cierre la capa de popup con ayuda de
este campo. Déjalo sin marcar si quieres que la capa popup permanezca abierta
hasta que la cierres manualmente, o márcala si quieres que se cierre cuando
hagas clic en otra parte de la página web.
5. Haz clic en APLICAR .

Nota: La capa mouseover aparece y desaparece cuando pones y quitas el cursor

sobre el objeto disparador. Si empleas un método de clic para visualizar la capa (del
diálogo de Enlace), la capa se muestra si haces clic en el objeto y se oculta cuando
haces clic en cualquier otro lugar de la página (o cuando haces clic en el botón para
cerrar la capa de popup si has desactivado la opción "Cerrar popup
automáticamente" que se muestra arriba).
70

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

Para hacer esto, posiciona todos los objetos que quieras como popup en una nueva
capa (en la GALERÍA DE PÁGINAS Y CAPAS haz clic en NUEVA CAPA mientras está
seleccionada una capa; no utilices la capa MouseOver), luego define la propiedad
MouseOver (pestaña MOUSEOVER del diálogo de Animación web) del objeto original
para activar la visualización de esta capa cuando pases el cursor sobre cualquier
objeto. Por ejemplo, puedes hacer que un popup como este aparezca cuando pases el
cursor sobre un texto:

Aquí tienes los pasos para crear un texto popup similar a este:

1. Haz clic en NUEVA CAPA en la GALERÍA DE PÁGINAS Y CAPAS mientras está

seleccionada una capa para crear una nueva.
2. Dibuja un rectángulo redondeado con la HERRAMIENTA DE 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 DE SOMBRA y arrastra del rectángulo).
3. Crea un bloque de texto en la parte superior de tu rectángulo. Selecciona la
HERRAMIENTA DE TEXTO y arrastra en sentido diagonal a través del rectángulo.
Escribe tu texto. Si ahora quieres ocultar la capa popup, quita la selección de la
casilla con el ojo de tu nueva capa.
4. De vuelta en la capa base (MouseOff) (haz clic en la GALERÍA DE PÁGINAS Y
CAPAS para definir esta capa como la actual), selecciona el texto que quieras que
active el popup utilizando el método usual (en la herramienta de texto). A
continuación abre el diálogo Animación web (clic derecho y selecciona
ANIMACIÓN WEB... ) y en la pestaña MOUSEOVER escoge la nueva capa del menú
desplegable MOSTRAR CAPA POPUP. Haz clic en ACEPTAR .
5. Haz una vista previa y prueba tu efecto MouseOver.

Si quieres que el popup solo aparezca cuando haces clic, selecciona la opción
MOSTRAR CAPA POPUP en la pestaña ENLACE del diálogo de Propiedades web (en la
página 272).

www.magix.es
 Primeros pasos 71

Nota: La capa MouseOver aparece y desaparece cuando pones y quitas el cursor del
ratón sobre el objeto trigger. Si empleas un método de clic para visualizar la capa, 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 43). 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.

Publicación de tu página web

Para subir tu página web a Internet de forma instantánea puedes publicarla en
TaskPilot, que ofrece un servicio de alojamiento web gratuito, o bien publicarla en otro
espacio web. Publicarla en TaskPilot resulta más sencillo porque está integrado en
Web Designer. Selecciona "ARCHIVO" >"PUBLICAR" página web. Luego inicia sesión en
TaskPilot o pulsa en el enlace PUBLICAR EN OTRO ALOJAMIENTO WEB .

TaskPilot

Pulsa el botón REGISTRARME si todavía no dispones de una cuenta en TaskPilot:

registrarse es gratis, fácil y rápido. Introduce tu e-mail y contraseña: haz clic en
MANTENERME REGISTRADO para evitar tener que iniciar sesión en futuras sesiones con
Web Designer.

Cuando aparezca el diálogo de publicación de TaskPilot, haz clic en el botón PUBLICAR

para poner tu página web en la base de tu espacio web o introduce el nombre de una
subcarpeta si quieres publicar varias páginas. Para conseguir una dirección de página
web diferente, pulsa el botón NUEVA DIRECCIÓN DE PÁGINA WEB.

Otros alojamientos web

Introduce los detalles FTP para tu espacio de alojamiento web: estos datos los provee
la empresa de alojamiento web.

Necesitas:
• Dirección del alojamiento
• Nombre de usuario
• Contraseña
• Subcarpeta
• URL de la página web publicada

Consulta el apartado principal Publicar página web (en la página 318) para más
información.
72

Transferencia de datos
1. Tras hacer clic en EXPORTAR (o PUBLICAR ), Web Designer abre una pequeña
ventana que muestra el progreso de la transmisión de datos y avisa cuando la
publicación se ha completado. Si has introducido la URL de tu página web con
los detalles FTP, puedes acceder directamente a ella desde aquí.
2. Como alternativa, tan pronto como la transferencia finalice, podrás abrir una
ventana de navegador e ir a la URL de la página web publicada.

Nota: si introduces una subcarpeta en la pestaña "Publicar" del diálogo "Propiedades

web", la página se guardará ahí.

Nota: muchos servidores utilizan nombres de archivo que distinguen entre

mayúsculas y minúsculas. Así, por ejemplo, la dirección
web "xara.com/productos.htm" no es lo mismo que "xara.com/Productos.htm".
Para reducir la confusión y la probabilidad de errores, Web Designer obliga a que
todos los nombres de página se escriban en minúsculas y contengan solo caracteres
permitidos. Esto significa que no están permitidos los espacios en los nombres de
página. Sugerimos utilizar un guión bajo como separador alternativo.

www.magix.es
 Manejo de documento 73

Manejo de documento

Iniciar un nuevo documento

Principalmente, hay cuatro tipos diferentes de documentos en MAGIX Web Designer
11 Premium: página web, presentación, foto y animación. Para iniciar un nuevo
documento, selecciona "ARCHIVO" > "NUEVO"

Así se abre un submenú con varios documentos de plantilla predefinidos por los que
empezar.

La primera es la plantilla por defecto y se utiliza para crear el nuevo documento

después de iniciar MAGIX Web Designer 11 Premium. La plantilla de animación es la
plantilla por defecto para los documentos con animaciones.

El botón NUEVO DOCUMENTO 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 el comando "ARCHIVO" > "GUARDAR
PLANTILLA" : consulta "Cambiar el documento de plantilla (en la página 487)" para
más detalles.

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.
• O, para abrir un archivo usado recientemente, selecciónalo en ARCHIVO ·> ABRIR
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 la vista del

archivo para que se vea junto con sus detalles o como vista en miniatura con
este botón.
74

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).

Compartir documento en múltiples ubicaciones

Web Designer es compatible con varias características innovadoras relacionadas con
el servicio de unidad en la nube. Estos servicios brindan almacenamiento gratis de
archivos en la nube, una pequeña herramienta que puedes instalar en el escritorio de
tu PC que sincronizará automáticamente en la nube los archivos que guardes en tu
disco duro.

Web Designer sabrá si has cambiado los archivos y los cargará automáticamente.
Esto significa que puedes abrir el archivo en múltiples equipos y, si haces un cambio y
guardas el archivo en uno, se actualizará en el Web Designer de los demás. Además,
puedes optar por compartir el archivo en la nube con otra persona y, si ella hace
cambios al archivo y los guarda, tu versión también se actualizará, y viceversa.

Esto no soluciona el problema de contradicciones al editar. Es decir, que si editas el

archivo al mismo tiempo que otra persona, Web Designer te indicará que se ha
realizado una edición y te dará la opción de abrir el archivo actualizado en un nuevo
documento.

www.magix.es
 Manejo de documento 75

La ventana de MAGIX Web Designer 11

Premium

Barra de título
Nombre del archivo que se visualiza
Barra de botones estándar
Barra de galerías
Barra de información
Barra de herramientas
Reglas
Página
Tablero de dibujo
Línea de colores
Barra de estado
Indicadores de arrastre/ajuste en vivo
Barra de herramientas web
Pestañas de documentos para todos los archivos abiertos
76

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 de la página con un clic derecho y escogiendo OPCIONES DE

PÁGINA y luego la pestaña TAMAÑO DE PÁGINA (en la página 495).

Documento seleccionado y barra de título

Puedes abrir más de un archivo en simultáneo en Web Designer. Verás todos los
documentos abiertos como pestañas en la parte superior del espacio de trabajo.

El documento actual se muestra en el espacio de trabajo y el nombre se señala en gris

en las pestañas de documento. Haz clic derecho en la pestaña de un documento para
obtener un menú de las acciones que se pueden realizar. El tipo de documento actual
está indicado en la esquina superior izquierda de la ventana de Web Designer, junto a
las opciones del menú. El documento actual recibe todas las entradas. Cualquier
cambio que no haya sido guardado en un documento se indica con una estrella tras el
nombre del archivo.

Las pestañas muestran todos los documentos abiertos y la pestaña del documento actual está
marcada en gris.

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 iconos con un triángulo indicador en la esquina inferior derecha cuentan con
barras desplegables. Si colocas el cursor del ratón sobre estos iconos, verás la barra
desplegable con más iconos.

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 497).

www.magix.es
 Manejo de documento 77

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

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
497).

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 92)".
78

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 tiempo
real 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 solo 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 elipses también se realiza en tiempo real con
esta con esta opción. Si tu PC 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 130)".

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
www.magix.es
 Manejo de documento 79

pantalla llamado "pantalla completa" que muestra un monitor más ordenado. 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.

La pantalla normal/completa se controla a través de VENTANA > PANTALLA COMPLETA

o con un clic derecho y la opción 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.

Selección de la ventana que se quiere visualizar

Cada ventana que esté abierta se muestra como una pestaña debajo de la barra de
información. Haz clic en una pestaña para ver la ventana o clic en el menú VENTANA y
escoge un nombre para la ventana en la parte inferior.

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.
80

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.

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 493). 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.

www.magix.es
 Manejo de documento 81

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 se seguirá
manteniendo.
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.

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
82

• 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.

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.

www.magix.es
 Manejo de documento 83

Páginas múltiples en el documento

Un documento de MAGIX Web Designer 11 Premium 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 11 Premium corresponde a una página web.

Por defecto, cuando abres o creas un nuevo documento web, Web Designer muestra
solamente una página. Los documentos impresos, sin embargo, se visualizan por
defecto en vista de multipágina. Haz clic derecho en una página o su tablero de
dibujo y selecciona o desactiva VISTA MULTIPÁGINA para cambiar entre modos de
presentación.

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.

Puedes saber en qué página del documento te encuentras actualmente

mediante los indicadores situados en las esquinas de la página.

Introducir páginas en tu documento

Haz clic derecho sobre una página y escoge PÁGINA NUEVA o NUEVA DOBLE PÁGINA.
Se insertará una nueva página en blanco después de la página actual o haz clic
derecho sobre una página y escoge DUPLICAR PÁGINA ACTUAL o DUPLICAR DOBLE
PÁGINA ACTUAL . Un duplicado de la página actual se insertará detrás de la página.

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 "

Además, la barra de herramientas estándar cuenta con una barra desplegable que te
permite añadir, duplicar y eliminar páginas rápidamente.
84

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.

Copiar y pegar páginas

Puedes copiar y pegar páginas enteras en el documento actual o pegar páginas en
otro documento. Esto copia las dimensiones de página, las capas y otros atributos de
la página, además de todos los objetos en la página.

Para copiar la página actual, borra cualquier selección actual pulsando Esc o haz clic
en una parte vacía de la página o del área de trabajo. En la barra de estado aparecerá
"No hay objetos seleccionados". Haz clic en una parte en blanco de la página y
selecciona COPIAR PÁGINA (o pulsa "Ctrl + C").

Cuando pegas una página copiada, se añade inmediatamente después de la página

actual. Para pegar usa las teclas "Ctrl + V" o haz clic derecho en la página y
selecciona PEGAR > PÁGINA en el menú contextual.

Nota: si el documento en el que se pega una página tiene la opción TODAS LAS
PÁGINAS DEL DOCUMENTO IDÉNTICAS activada en ARCHIVO> OPCIONES DE PÁGINA ,
las dimensiones de la página pegada serán reemplazadas por las dimensiones de
página del documento. Entonces, la nueva página tendrá las mismas dimensiones
que las otras páginas del documento.

Mover páginas dentro del documento

El modo más fácil de cambiar entre páginas en tu documento es arrastrar la página en
miniatura en la galería páginas y capas (que está fijada a la parte derecha por
defecto). También puedes seleccionar más de una página a la vez y arrastrar para
reordenarlas.

Como alternativa para mover la página actual:

• Selecciona "EDICIÓN" > "PÁGINAS" > "MOVER PÁGINA HACIA ARRIBA" o haz clic
derecho y selecciona MOVER PÁGINA HACIA ARRIBA para cambiar la página actual
por la anterior.
• Selecciona "EDICIÓN" > "PÁGINAS" > "MOVER PÁGINA HACIA ABAJO" o haz clic
derecho y seleccionaMOVER 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 la última página

del documento respectivamente.

www.magix.es
 Manejo de documento 85

Eliminar páginas de tu documento

Para eliminar la página actual de tu documento haz clic derecho y selecciona
ELIMINAR PÁGINA ACTUAL o ve a "EDICIÓN" > "PÁGINAS" > "ELIMINAR PÁGINA ACTUAL" .
La página actual y todos sus contenidos serán eliminados. O selecciona una o más
páginas en la galería de páginas y capas y pulsa el botón "Eliminar" o la tecla de
borrado.

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.

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 419).
86

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 463)". 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 PC se cuelga de repente, ya
que 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 88) 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).

Guardar como (en el menú Archivo)

Esta opció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 estos 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 si no, cuando quieras exportar la
página web, esta 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 equipo.

MAGIX Web Designer 11 Premium ofrece un directorio opcional de compatibilidad

para los archivos externos que se encuentra a la derecha del archivo de diseño.

www.magix.es
 Manejo de documento 87

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 11 Premium también copiará todo el
directorio de compatibilidad (si existe uno).

Contenido del directorio de compatibilidad

Si utilizas el marcador de lugar (en la página 290) 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 11 Premium 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 compatibilidad. Si
no necesitas más ese archivo, deberás eliminarlo manualmente.

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

MAGIX Web Designer 11 Premium no eliminará ningún archivo, independientemente
de si estos 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 11 Premium 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".
88

Cerrar el documento
Para cerrar el documento:

• Seleccionar "ARCHIVO" > "CERRAR".

• O pulsa "Ctrl + F4", o también "Ctrl + W".
• O bien haz clic sobre la X más pequeña de las dos que se encuentran en la
esquina superior derecha.
• O incluso haz clic derecho en la pestaña del documento para ver un menú de
contexto sensible con una serie de opciones de guardar y cerrar tanto para una
sola pestaña cono para todas las pestañas abiertas.

Haz clic derecho en una pestaña para visualizar múltiples opciones de guardar y cerrar.

Copias de seguridad automáticas

MAGIX Web Designer 11 Premium 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 fallo eléctrico 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 las copias de seguridad automáticas, abre el diálogo
HERRAMIENTAS >OPCIONES y escoge la pestaña COPIAS DE SEGURIDAD .

www.magix.es
 Manejo de documento 89

Copias de seguridad de documentos abiertos

Para activar las copias de seguridad, selecciona este campo y escoge cómo te
gustaría que se hagan 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 está modificando. En el uso normal,
es poco probable que no haya periodos inactivos de 15 segundos o más, por lo que
permite 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.

La función de copia de seguridad automática no guarda los cambios de los

subdocumentos abiertos. Cuando se ejecuta una copia de seguridad programada, solo
se guarda el documento principal en su estado actual y sin los cambios no guardados
del grupo. Por esta razón, se recomienda guardar regularmente los cambios de
edición interna en el documento principal.

Cuando se realiza una copia de seguridad, verás una barra de progreso en la parte
inferior de la ventana de MAGIX Web Designer 11 Premium 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.
90

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
La pestaña "Copias de seguridad" del diálogo "Opciones" te permite activar laCOPIA
DE SEGURIDAD AUTOMÁTICA Y RESTAURACIÓN . Cuando esta opción está activada, al
cerrar MAGIX Web Designer 11 Premium, no se te preguntará si quieres guardar los
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.

Ten en cuenta que si tiene cualquier vista abierta de un subdocumento de edición

interna, estas se cerrarán sin notificación y se guardarán en el documento principal
cuando se cierre el programa y se hace una copia de seguridad del documento
principal. Las vistas del subdocumento de edición interna no se vuelven a abrir
cuando se reinicia el programa. Consulta edición dentro de grupos.

Recuperación tras 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 en el momento
de la última copia de seguridad.

www.magix.es
 Manejo de documento 91

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 11 Premium
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 en el 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 en pantalla
Para ayudarte a diseñar tu documento, Web Designer puede mostrar una cuadrícula
en la pantalla (la cuadrícula aparece solamente en la pantalla, no se exporta ni se
imprime). La cuadrícula te ayuda a alinear objetos (similar a utilizar una hoja de
gráficos como ayuda para dibujar).

Haz clic derecho y escoge "MOSTRAR CUADRÍCULA/GUÍAS" > "MOSTRAR CUADRÍCULA"

para activar y desactivar la visualización de la cuadrícula o escoge "AJUSTAR A" >
"AJUSTAR A CUADRÍCULA" . 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. Por defecto los documento web tienen
activado "AJUSTE A CUADRÍCULA", con una cuadrícula de 1 píxel.

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

entre los puntos de la cuadrícula se configuran en la pestaña CUADRÍCULA Y REGLA (en
la página 492) del diálogo de opciones. Cualquier cambio que hagas se aplicará solo
al documento seleccionado.
92

El ajuste a los objetos magnéticos también está activado por defecto para los
documentos web. El ajuste 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.

Puedes usarlo para alinear los centros de los objetos o para alinear objetos respecto al
centro de la página o para alinearlos de forma horizontal o vertical en cualquier parte
en el centro de la página o en la esquina de la misma.

Para activar el ajuste de los objetos, haz clic en el botón AJUSTAR A OBJETOS o
haz clic derecho y escoge "AJUSTAR A" > "AJUSTAR A OBJETOS" . También
puedes escoger la opción "VENTANA" > "AJUSTAR A CUADRÍCULA" .
Consulta Manejo de objetos (en la página 130) para más detalles sobre el ajuste de
cuadrículas y el ajuste a objetos.

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

• Haz clic derecho y escoge "MOSTRAR CUADRÍCULA/GUÍAS" > "MOSTRAR REGLAS"

para activar y desactivar la visualización de la cuadrícula.
• Pulsa "Ctrl + Shift + R".
• O selecciona "VENTANA" > "BARRAS" > "MOSTRAR REGLAS".

Web Designer utiliza las reglas para:

• controlar los márgenes, tabulaciones y sangrías (en la página 216) en la

HERRAMIENTA DE TEXTO .
• para informarte 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
Manejo de objetos (en la página 130).

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.

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 (en la página 492)" del diálogo "Opciones". Las unidades
actuales y los factores de cambio de tamaño se visualizan en la esquina superior
derecha de la regla.

www.magix.es
 Manejo de documento 93

Mostrar/ocultar reglas
Haz clic derecho y escoge "MOSTRAR CUADRÍCULA/GUÍAS" > "MOSTRAR REGLAS" ("Ctrl
+ Shift + R") para activar y desactivar las reglas. Los cambios se aplicarán a la ventana
actual y a las siguientes ventanas que abras. No afecta a las 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.

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 11
Premium:

• 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.

94

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.

La tecla de restricción
La tecla "Ctrl" tiene una función especial en Web Designer. Restringe la acción de la
función actual de alguna manera. Por ejemplo, normalmente puedes girar un objeto a
cualquier ángulo. Pero en Web Designer, si pulsas la tecla "Ctrl" mientras giras un
objeto, la rotación está restringida a una serie de ángulos predeterminados. Por
defecto, el objeto girará solamente en múltiplos de 45 grados y a cualquier rotación
en que un borde recto importante del objeto quede vertical u horizontal.

La línea negra que se encuentra a la

izquierda puede girarse a cualquier
ángulo dentro del círculo. A la derecha se
encuentra la misma línea, pero al
presionar "Ctrl", solo puede rotarse hasta
las posiciones indicadas.
De forma similar, restringir un rectángulo crea un cuadrado perfecto y restringir una
elipse crea un círculo perfecto. Si sueltas la tecla "Ctrl", ya no estarán restringidos.

La función de restricción de ángulo se define en OPCIONES -> GENERAL -> RESTRICCIÓN

DE ÁNGULO (en la página 491).

www.magix.es
 Manejo de documento 95

Galerías
MAGIX Web Designer 11 Premium usa galerías para suministrar acceso conveniente
a bibliotecas externas de contenido como plantillas, fuentes, colores, cliparts, atribu-
tos 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.

Por defecto, la GALERÍA DE PÁGINAS Y CAPAS está abierta en el modo Páginas (y muestra solo
páginas, no sus capas) y está fijada en la parte derecha de la ventana de Web Designer.

Página y capas
Diseños
Mapa de bits
Líneas
Rellenos
96

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.

Las GALERÍAS de DISEÑOS y RELLENOS te permiten escoger entre diferentes plantillas y

estilos suministrados con MAGIX Web Designer 11 Premium.

La GALERÍA DE MAPAS DE BITS te muestra los mapas de bits y fotos que estás
utilizando en todos los documentos abiertos.

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

Ver una galería

Para visualizar una galería:

1. Haz clic o pasa el cursor sobre la pestaña vertical de la galería que se encuentra
a la derecha del espacio de trabajo (la barra de galerías). La galería se abrirá
automáticamente. Al quitar el cursor de la galería, esta se cerrará
automáticamente.
2. Para mantener una galería abierta mientras trabajas, haz clic en el botón
OCULTAR AUTOMÁTICAMENTE que se encuentra en la esquina superior derecha.
El botón OCULTAR AUTOMÁTICAMENTE se transforma en un alfiler con la punta
hacia abajo para indicar que la galería está fijada al espacio de trabajo.
3. Para cerrar una galería fijada, consulta Cerrar una galería (en la página 103).
4. Si quieres que las galerías dejen de abrirse automáticamente al hacer
MouseOver, desactiva la opción BARRA DESPLEGABLE del menú "Herramientas" >
"Galerías".

Galería no fijada: la galería se cierra al quitar el cursor de la misma.

Galería fijada: la galería permanece abierta aunque quites el cursor de la

misma y, además, puedes moverla y fijarla (en la página 97) donde quieras.

Nota: por defecto, las GALERÍAS DE LÍNEAS y RELLENOS no muestran su título hasta
que no se hayan abierto, sino sus iconos individuales. Web Designer siempre
muestra el título de la última galería que has visto.

www.magix.es
 Manejo de documento 97

Mover y fijar una galería

Puedes liberar cualquier galería de la barra de galerías, si deseas moverla a una
ubicación más práctica en el espacio de trabajo. También puedes fijar la galería (o un
grupo de galerías, consulta Agrupar galerías) en la parte superior, inferior, derecha o
izquierda del espacio de trabajo.

Puedes mover una galería a cualquier lugar del espacio de trabajo

Para mover una galería:

1. Abre una galería y haz clic en el botón OCULTAR AUTOMÁTICAMENTE para fijar la
galería. El botón muestra un alfiler hacia abajo para indicar que la galería puede
moverse y fijarse en otro lugar.
2. Haz clic en la barra de título de la galería y arrastrar para moverla. Puedes dejar
que la galería "flote libremente" por cualquier lugar del espacio de trabajo o
puedes fijarla en una nueva ubicación.

Si mueves cualquiera de las galerías, las otras la acompañarán como si fuera un grupo.
Accede a una galería individual con un clic sobre su pestaña en la parte inferior del
grupo o haz clic y arrastra la pestaña de la galería alejándola del grupo.

• Mapa de bits
• Línea
• Relleno
98

Si haces clic y arrastras la barra de título de una galería que puedes fijar, aparecerán
flechas en el espacio de trabajo que te indicarán los lugares en donde puedes fijar la
galería.

Al arrastrar una galería, aparecerán flechas de fijación en la parte central, superior, inferior,
izquierda y derecha del espacio de trabajo. Arrastra la galería hasta una flecha para fijarla allí.

Ejemplo de una galería que se ha fijado a la derecha del espacio de trabajo.

www.magix.es
 Manejo de documento 99

Para fijar una galería:

1. Haz clic y arrastra la galería hasta la flecha que apunta a la ubicación en donde
quieres colocar la galería. Por ejemplo, si quieres colocar la galería en la parte
superior de la pantalla, muévela hacia la flecha que señala hacia la parte superior
del espacio de trabajo.
2. Cuando el cursor llega a la flecha, un recuadro gris transparente indica la nueva
ubicación de la galería.
3. Suelta el botón del ratón para fijar la galería. Ahora, cuando cierres u ocultes
automáticamente la galería, la pestaña se mostrará en esta nueva ubicación.
4. Pasa el cursor o haz clic sobre la pestaña para volver a abrir la galería.

Nota: para mover las galerías a su posición por defecto, escoge BARRAS DE
CONTROL del menú VENTANA , haz clic en GALERÍAS y finalmente en RESTAURAR .

Agrupación de galerías
Puedes arreglar dos o más galerías de forma que se encuentren cerca unas de otras.

1. Para posicionar una galería para que quede adyacente a una que has fijado
anteriormente, haz clic y arrastra la segunda galería hasta las cuatro flechas del
centro del espacio de trabajo.
2. Suelta cuando te encuentres sobre la flecha que indica en dirección a la primera
galería que has movido. La segunda galería se fija junto con la primera.

También puedes agrupar galerías y mover todo el grupo a una nueva ubicación si, por
ejemplo, estás trabajando principalmente con dos o tres galerías que quieres que se
encuentren cerca unas de otras y a las que deseas acceder fácilmente.
100

Ejemplo de un grupo de galerías con pestañas de galería en la parte inferior. Haz clic y arrastra
para agregar o quitar una galería del grupo.

Para agrupar galerías:

1. Desactiva el botón OCULTAR AUTOMÁTICAMENTE en una de las siguientes

galerías: MAPAS DE BITS, LÍNEAS , RELLENO, . La galería se agrupará
automáticamente con las otras cinco galerías y se mostrarán como pestañas en
la parte inferior del grupo.
2. Para quitar una galería de un grupo, haz clic en su pestaña y arrástrala hacia
afuera.
3. Haz clic en una pestaña para abrir una galería del grupo.
4. Para agregar una galería a un grupo, haz clic y arrastra la galería hasta el grupo.
Aparecerán cuatro flechas en el centro del grupo.
5. Arrastra y suelta la galería en el cuadrado del centro de estas flechas para que
Web Designer la agregue al grupo y su pestaña se agregue al final del grupo.
6. Cuando fijas un grupo de galerías, todas las galerías dentro del grupo también
están fijadas. Al ocultar automáticamente o cerrar un grupo de galerías, verás
todas las pestañas de las galerías del grupo en el borde del espacio de trabajo
más cercano a la última ubicación en donde se encontraban fijadas.

www.magix.es
 Manejo de documento 101

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.

OPCIONES abre un menú en donde puedes escoger:

102

• 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.

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 464)).
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.

www.magix.es
 Manejo de documento 103

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).

Cerrar una galería

Por defecto, el botón OCULTAR AUTOMÁTICAMENTE de las galerías está activado (es
decir, que el botón OCULTAR AUTOMÁTICAMENTE que se encuentra en la esquina
superior derecha no está fijado). De esta forma, la galería se cerrará automáticamente
cuando alejes el cursor.

Sin embargo, si has desactivado el botón OCULTAR AUTOMÁTICAMENTE (galería

fijada), tendrás que cerrar la galería de forma manual.

Para cerrar una galería liberada, haz clic en el botón CERRAR que se encuentra en la
parte superior derecha de la galería. La galería se cerrará y su pestaña se mostrará en
la barra de galerías.

Para cerrar una galería fijada, haz clic en OCULTAR AUTOMÁTICAMENTE (alfiler) o
CERRAR en la parte superior derecha de la galería. La galería se cierra y su pestaña se
mostrará en el lugar del espacio de trabajo en donde la hayas fijado.

Para volver a abrir la galería, pasa el cursor sobre ella o haz clic sobre la pestaña.

Nota: para eliminar una galería completamente, selecciona GALERÍAS de menú

HERRAMIENTAS y selecciona la galería que quieres eliminar.
104

Eliminar una galería del espacio de trabajo

Por defecto, cuando cierras una galería, Web Designer la regresa a la barra de galerías
para que puedas volver a abrirla acercando el cursor a su ícono o pestaña. Sin
embargo, puedes configurar a Web Designer para que elimine cualquier galería del
espacio de trabajo si no la necesitas.

Para eliminar galerías del espacio de trabajo, realiza una de las siguientes opciones:

• Escoge GALERÍAS del menú HERRAMIENTAS y selecciona la galería que quieres

eliminar. La galería seleccionada desaparecerá del espacio de trabajo. Si quieres
volver a ver la galería, ve a GALERÍAS en el menú HERRAMIENTAS y escoge la
galería que quieres volver a ver.
• Escoge BARRAS DE CONTROL del menú VENTANA y ve hacia abajo en la lista de
barras de control disponibles para ver las GALERÍAS . Haz clic en el recuadro
GALERÍAS para ver la barra de herramientas de galerías. Haz clic en CERRAR . En la
barra de herramientas Galerías que aparecerá en la parte superior del espacio de
trabajo, puedes activar una galería si haces clic en su barra de herramientas.

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 solo 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
quede 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.

www.magix.es
 Manejo de documento 105

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 solo 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).
106

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.

www.magix.es
 Trabajar con objetos 107

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.

• 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
106).

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
Puedes seleccionar un objeto que está dentro de un grupo u otro objeto contenedor
pulsando "Ctrl" mientras haces clic sobre el objeto. Es lo que se llama selección
interna. El objeto sobre el que haces clic será siempre seleccionado, incluso si está
dentro de varios niveles de grupos anidados. Cuando se tiene un nido de grupos tan
profundo, en ocasiones se quiere seleccionar solo uno de los grupos anidados (un
grupo que está dentro de otro). Podrás hacerlo fácilmente si mantienes presionadas
las teclas "Alt" y "Ctrl" mientras haces clic. El primer clic de tal tipo seleccionará el
grupo del nivel superior (tal como lo hace un clic normal). Haz clic de nuevo y se
108

seleccionará el siguiente grupo según su orden en el nido. Continúa haciendo clic para
avanzar en la estructura del grupo hasta que se seleccione el grupo que deseas.

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 la selección interna.

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.

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 419)" 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.

www.magix.es
 Trabajar con objetos 109

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.

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.
110

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 Ctrl+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.

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.

www.magix.es
 Trabajar con objetos 111

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 491).

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

Cortar, copiar y pegar

Estas funciones te permiten mover o copiar un objeto en el mismo documento o entre
diferentes documentos. Debes hacer lo siguiente:

1. Selecciona el objeto.
2. Para eliminar el objeto, elige " EDITAR" > "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. Escoge "EDITAR" > "PEGAR ", "Ctrl + V" o "INSERTAR ". Esto pega el contenido del
portapapeles en el documento.

Ten en cuenta que si los objetos que copias se encuentran en la misma capa,
entonces puedes pegar esos objetos en cualquier capa, si conviertes primero esa capa
en la capa actual y luego escoges "EDITAR" > "PEGAR" > "PEGAR EN CAPA" o "PEGAR EN
EL LUGAR 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.

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. Por ejemplo, si copias un botón de MouseOver,
112

que tenga un objeto en la capa MouseOff y otro objeto en la capa MouseOver, a otro
documento, las capas MouseOff y Mouseover se crearán si todavía no existen y se
copiarán los objetos de los botones sobre ellas.

"Ctrl + Shift + V" o "EDITAR" > "PEGAR EN LUGAR" pega el contenido del portapapeles
en la misma posición X/Y desde la que fueron cortadas o copiadas, o en la misma
posición en relación al final de la página en el caso de objetos del pie de página. Esto
solo se aplica a objetos cortados o copiados 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, MAGIX Web Designer 11

Premium te mostrará un diálogo titulado PEGADO ESPECIAL para que puedas elegir el
formato en el que deseas pegar el objeto. Al pegar en un texto, puede que tengas la
opción de pegar el texto sin formato o en formato Rich Text (formato de texto
enriquecido).

Además, es posible que veas las siguientes opciones de pegado, según el contenido
del portapapeles:

Pegar texto sin formato

Pega el texto del portapapeles en el documento sin formato.

Pegar formato/atributos
Conserva el formato (p. ej. el tipo y tamaño de fuente) o los atributos de estilo (p. ej.,
el color de la línea y del relleno) del objeto que se pega.

Pegar posición
Esta opción aplica la posición de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, que se mueve a exactamente la misma posición que el
objeto copiado. Si se han copiado múltiples elementos en el portapapeles, Web
Designer los trata como a un grupo y mueve al objeto actual seleccionado a la
posición del grupo copiado como un todo. El objeto seleccionado actualmente se
pega o se mueve a la posición central del objeto copiado o al grupo de objetos.

Pegar tamaño
Esta opción aplica el tamaño de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, cuyo tamaño se reajusta (en torno a su centro) al tamaño
exacto del objeto copiado.

Si al pegar el tamaño tienes muchos elementos seleccionados, no se redimensiona el

tamaño de la selección como un todo, sino que cada uno de esos objetos se convierte
al tamaño del objeto copiado. Por ejemplo, si copias una foto de 200x200 píxeles,
www.magix.es
 Trabajar con objetos 113

luego seleccionas otras 10 fotos y seleccionas "Pegar tamaño", las 10 fotos se

convierten a 200x200 píxeles. Este es un modo rápido de convertir un montón de
objetos a un tamaño determinado.

Pegar reemplazo de selección

Esto es similar a PEGAR POSICIÓN , solo que el objeto copiado en el portapapeles
reemplaza al objeto seleccionado actualmente y mantiene la posición del elemento
borrado. El objeto copiado se pega en la posición central del objeto borrado.

Pegar en la capa actual

Igual que PEGAR EN LUGAR , pero el objeto se pegará solamente en la capa actual. Esto
es útil si quieres ver u ocultar el objeto pegado cuando se muestran capas encima o
debajo.

Pegar en el lugar de la capa actual

Igual a PEGAR EN LA CAPA ACTUAL , pero el objeto se pegará en la capa actual en la
misma posición desde la que lo has copiado.

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 borrados en el lugar deseado.

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
114

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 492).

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.

www.magix.es
 Trabajar con objetos 115

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.

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 419)

Girar utilizando el ratón

Para ver los controles deslizantes de rotación (en lugar de los de modificación de
tamaño) en una forma seleccionada en la herramienta de selección, haz clic de nuevo
sobre la forma seleccionada.

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.
116

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

Para realizar una rotación limitada, pulsa "Ctrl" mientras rotas. Esto significa que el
objeto rotará solo a una selección limitada de ángulos Rotará a múltiplos del valor del
ángulo de restricción, que por defecto es de 45º. Pero además, incluirá ángulos a los
cuales está alineado cualquier borde recto significativo del objeto vertical u
horizontalmente. Esto hace más fácil, por ejemplo, rotar un rectángulo que ha sido
girado ligeramente, de manera que el rectángulo quede derecho de nuevo (alineado
con la pantalla). O hacer cualquier línea recta de una forma tanto vertical como
horizontal. Estos bordes tienen que ser al menos un 25% del ancho o alto de la forma
para considerarse significativos durante una rotación restringida.

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

Web Designer (en la página 491)".

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.

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.

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.

www.magix.es
 Trabajar con objetos 117

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.

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.
118

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.

Adaptar el tamaño de las fotos (solo documentos web)

Cuando arrastres los controles deslizantes de una foto en un documento web, la
imagen no se agrandará o hará más pequeña (lo que no suele ser útil y hace que la
foto se deforme) sino que se cortará. Si quieres que la imagen se deforme, mantén la
tecla Alt pulsada mientras efectúas el desplazamiento.

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
transformació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.

www.magix.es
 Trabajar con objetos 119

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".

Redimensionar grupos
Si redimensionas un grupo usando sus controles deslizantes laterales, se intentará
conseguir un cambio de tamaño de forma inteligente más que simplemente
concentrar los miembros del grupo. Esto es útil generalmente cuando se intenta hacer
una variante más estrecha adecuada para móviles de una página web más ancha:
necesitas hacer que objetos anchos como los encabezados y los pies de páginas se
ajusten a un ancho de página más pequeño.

Tomemos como ejemplo este grupo de pie de página:

120

El resultado que se obtiene tendría este aspecto:

El texto conserva el mismo tamaño y las esquinas redondeadas se mantienen.

Este efecto funciona mejor con unos grupos que con otros dependiendo del diseño y
complejidad del grupo. Si simplemente prefieres concentrar el resultado de forma que
se reduzca el tamaño de cada miembro del grupo, tan solo mantén pulsada la tecla
Alt mientras arrastras el cursor.

Como puedes ver, se ha reducido el texto y las esquinas ya no son redondeadas. Esto
puede ser útil para ciertos grupos, por lo general los gráficos que no incluyen textos o
esquinas redondeadas.

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.

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

www.magix.es
 Trabajar con objetos 121

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 una foto en su interior porque inclinar otros objetos rara vez produce
resultados correctos (las fotos se distorsionan).
122

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 117).

Inclinar utilizando la barra de información

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

La herramienta de moldes
La herramienta de MOLDE sirve para distorsionar las imágenes. Se utiliza tanto
para crear perspectivas (es decir, girar en tres dimensiones) o distorsiones a
partir de envolturas.

Barra de información de la herramienta de moldes

Malla
Eliminar molde
Separar molde
Girar molde
Copiar molde
Envolturas
Pegar molde de envoltura
Perspectiva
Pegar molde de perspectiva

www.magix.es
 Trabajar con objetos 123

La barra de información contiene dos juegos predeterminados de formas de molde.

Simplemente haz clic sobre un botón para aplicar el molde predeterminado. El botón
de la izquierda de cada grupo es el molde por defecto "sin distorsión" que puedes
editar manualmente después de aplicarlo.

Perspectivas
La herramienta de MOLDE te permite aplicar perspectiva a
las formas para darles un sentido de profundidad.

Puedes aplicar perspectivas a todos los tipos de objetos,

incluyendo texto y mapas de bits. Ten en cuenta que los
mapas de bits pierden la perspectiva si después aplicas
una transición o los conviertes en formas editables.

1. Selecciona el o los objetos.

2. Selecciona la herramienta de MOLD
(shortcut  + F6).
3. Escoge una de las opciones de perspectiva:

El botón de la derecha (pegar perspectiva) se

describe más adelante.

Web Designer dibuja un rectángulo alrededor del objeto o selección. Puedes arrastrar
los controles deslizantes de cada esquina del rectángulo para crear el efecto de
perspectiva.

Puedes girar, cambiar de tamaño e inclinar el objeto con perspectiva utilizando la

herramienta de SELECCIÓN .

Es posible que quieras mover los controles deslizantes sin volver a dibujar el objeto
con perspectiva (esto acelera el redibujo de la pantalla).

Para realizar esto, selecciona el botón SEPARAR MOLDE . Para readaptar el

objeto, desactiva el botón.

Usar puntos de fuga

A medida que reduces el tamaño de los lados del molde de perspectiva, verás un
"punto de fuga" de destino. Esto es similar a los puntos de fuga en los dibujos
convencionales de perspectivas.

Puedes utilizar puntos de fuga para obtener una perspectiva consistente para varios
objetos.
124

Todos los objetos comparten un punto de fuga común en la cruz pequeña.

La malla de perspectiva
Este botón pinta una serie de puntos en una cuadrícula que te permite una
vista previa del grado de distorsión en perspectiva de un objeto.

Utilizar moldes
Es posible que quieras aplicar la misma perspectiva a varios objetos. Para lograr esto,
debes crear una forma de molde, copiarla en el portapapeles y después utilizarla para
otros objetos. Una forma de molde en perspectiva debe tener cuatro lados rectos.

Esta es una forma de Estas no son aceptables. El objeto de la izquierda tiene

molde aceptable. demasiados lados (deben ser cuatro). El objeto de la derecha tiene
lados curvos (deben ser rectos).

Eliminar una perspectiva

Haz clic sobre ELIMINAR para quitar la perspectiva.

Si el objeto seleccionado tiene más de una perspectiva o envoltura, sólo se eliminará

la que se ha aplicado más recientemente.

Girar el objeto dentro del molde

Muchas veces verás que el molde es la forma correcta, pero el objeto debe
girarse. Puedes girar el objeto con un clic sobre el botón girar contenido.

Envolturas
La herramienta de moldes te permite envolver formas de diferentes maneras.
El efecto es similar a una hoja de hule o globo que puedes extender en
cualquier dirección.

Puedes envolver todo tipo de objetos excepto los mapas de bits.

www.magix.es
 Trabajar con objetos 125

Ejemplo de texto con envoltura

La aplicación de una envoltura es similar a la aplicación de una perspectiva:

1. Selecciona el o los objetos.

2. Selecciona la herramienta de MOLD
(shortcut  + F6).
3. Escoge una de las opciones de envoltura:

El botón de la derecha es similar al botón pegar perspectiva que se describe más

adelante.

En principio, el botón de la izquierda no modifica el objeto. Los otros botones

modifican inmediatamente el objeto.

Para editar el molde después de aplicarlo:

1. Arrastra cualquiera de los controles deslizantes de esquina.

2. O haz clic en un control deslizante de la esquina y arrastra los controles
deslizantes de curva.

El ejemplo de arriba muestra los 4 controles deslizantes de curva de las esquinas que
se han arrastrado hacia afuera para doblar el contenido del molde.

También puedes girar, cambiar el tamaño e inclinar el objeto con envoltura utilizando
la herramienta de SELECCIÓN .

La malla de moldes
El botón de malla muestra una serie de puntos que te permite ver
previamente la distorsión que la envoltura dará al objeto.

Moldes de envoltura
Puedes crear un molde de envoltura a partir de cualquier forma con cuatro lados, que
puedes distorsionar a tu gusto y después utilizar como molde de envoltura con un clic
sobre PEGAR ENVOLTURA de la BARRA DE INFORMACIÓN de la herramienta de moldes.
126

Editar formas de molde

Puedes editar la forma de los moldes de sobres de cartas o en perspectiva con la
herramienta de edición de formas (o con los controles deslizantes de edición con la
herramienta de selección, de ser mostrada). Según el tipo de molde, hay algunas
restricciones:

• No puedes añadir controles deslizantes a un molde de envoltura o de

perspectiva, porque tiene que permanecer como una forma con cuatro lados
• No puedes cambiar una línea recta por una curva en un molde de perspectiva.

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 11 Premium 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. Haz clic derecho en el portapapeles y escoge "AJUSTAR A " > "AJUSTAR
A CUADRÍCULA" o utiliza la opción del menú "VENTANA" > "AJUSTAR A CUADRÍCULA" ,
(o pulsa "." (separador decimal) del teclado numérico). Puedes controlar el espaciado
de la cuadrícula en el diálogo de opciones (haz clic derecho y escoge OPCIONES DE
PÁGINA o utiliza la función "HERRAMIENTAS " > "OPCIONES ") en la pestaña de
Cuadrícula y Reglas. Por defecto, las plantillas de documento web tienen el ajuste a la
cuadrícula activado con un solo píxel, por lo que, en general, todos los objetos y
posiciones son píxeles enteros.

Al arrastrar objetos, los bordes se ajustarán a los puntos de cuadrícula. Si el tamaño

del objeto es tal, que ambas esquinas opuestas no pueden ajustarse, la esquina que se
ajustará depende de la dirección en la que se está arrastrando el objeto.

www.magix.es
 Trabajar con objetos 127

Este ejemplo muestra una cuadrícula con 5 subdivisiones entre las divisiones mayores. La forma
tiene un contorno gris muy ancho. Como el objeto se arrastró 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 ESCALAR ANCHOS DE LÍNEA de la barra de
información de la HERRAMIENTA DE SELECCIÓN afecta a
cualquier tipo de ajuste que se esté aplicando a los
bordes de los objetos, incluyendo sus contornos.

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 la opción escalar anchos de línea está activada, el ancho del contorno es importante
y "ajustar a la cuadrícula" ajustará los bordes de los objetos, incluyendo los contornos,
a las cuadrículas. Ajustar a objetos te permitirá realizar el ajuste respecto de los
bordes o las líneas centrales de los contornos. Si los contornos, tal como aparecen en
la pantalla son pequeños y hay poca diferencia entre estas dos posiciones de ajuste,
128

entonces tendrá prioridad el ajuste a los límites. Por lo tanto, amplía la vista si quieres
ajustar a los centros de los contornos en este caso.

Si la opción escalar anchos de línea está desactivada, "ajustar a la cuadrícula" y

"ajustar a objetos" realizarán el ajuste a las líneas centrales de los objetos e ignorarán
los anchos del contorno.

Como el ajuste prioriza la opción escalar anchos de línea, los límites utilizados para el
ajuste son siempre los mismos límites que se indican en la barra de información de la
HERRAMIENTA DE SELECCIÓN .

Ajuste magnético de objeto (ajustar a objetos)

Con el ajuste magnético a objetos es más fácil posicionar objetos de forma precisa
respecto a otros o al centro o bordes de la página. 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, el uso del ajuste magnético te será muy útil.

Puedes usar esto para alinear los centros de los objetos o para alinear objetos
respecto al centro de la página o para alinearlos de forma horizontal o vertical en
cualquier parte en el centro de la página. El ajuste magnético funciona si mueves o
amplías el tamaño de los objetos con la HERRAMIENTA DE SELECCIÓN .

Para activar y desactivar la alineación magnética a objetos, haz clic en el

botón AJUSTAR A OBJETOS en la barra de herramientas de la parte superior.
Como alternativa, haz clic derecho sobre el tablero de dibujo y escoge
"AJUSTAR A" > "AJUSTAR A OBJETOS" o utiliza la opción del menú
"VENTANA" > "AJUSTAR A OBJETOS" . También puedes activarlo y
desactivarlo si pulsas la "s" mientras arrastras.

Haz clic y arrastra el objeto que quieres ajustar. A medida que arrastras, Web
Designer muestra un icono de imán, líneas azules y puntos rojos cuando te
encuentras cerca de un "punto de interés" al que puedas ajustar el objeto.

Indicadores de ajuste

Los indicadores de ajuste se muestran siempre que ocurre un ajuste. Es decir, siempre
que el objeto que estás arrastrando se encuentre en el sector de un punto de interés

www.magix.es
 Trabajar con objetos 129

en el documento (que puede ser otro objeto o una parte de la página). Web Designer
se ajusta respecto al punto de interés y el cursor del ratón se convierte en un imán
que te indica que se ha realizado un ajuste. También recibirás otras indicaciones
dinámicas en la pantalla que te informarán que se ha realizado un ajuste.

• Un punto rojo significa que el ajuste se ha realizado respecto a un punto

específico.
• Una línea azul indica que el ajuste se ha realizado respecto a alguna
característica de otro objeto (p. ej. el borde de un rectángulo).
• Una línea naranja indica que se ha realizado un ajuste respecto a una
característica de una página (esquinas, bordes, centro).

Las líneas que indican el ajuste parpadean para mostrar que son indicadores
temporales en tiempo real y para que puedas diferenciarlas de los colores del fondo.

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

OPCIONES ("HERRAMIENTAS" > "OPCIONES" o clic derecho sobre una página y
OPCIONES DE PÁGINA ).
130

Puedes especificar dos distancias de ajuste en la sección "Radios de ajuste

magnético", que controlarán cuán cerca los objetos tendrán que estar antes de
ajustarse. El tamaño del círculo alrededor de los puntos (punto) y la distancia hacia
ambos lados de las líneas (línea). En general, lo mejor es que el valor de punto sea
mayor que el valor de línea, de forma que sea más fácil ajustar a los puntos extremos
de las líneas.

Personalización de Web Designer contiene detalles del diálogo de opciones.

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.

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.

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 419)".

www.magix.es
 Trabajar con objetos 131

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 de que haya una capa guía en la GALERÍA DE PÁGINAS Y CAPAS, (ver
más arriba). Puedes crear objetos directamente en la capa guía si la seleccionas y
creas objetos de forma usual.

También puedes cortar o

copiar objetos desde otras
capas y pegarlos en la capa
guía. Para pegar objetos en la
misma posición relativa a la
capa guía utiliza el shortcut
"Ctrl+ Shift+ V".

La galería de páginas y capas muestra la capa guía

seleccionada encima de otras dos capas.

MOVER A LA CAPA DE DELANTE y MOVER A LA CAPA DE ATRÁS en el menú ARREGLO (o

hacer clic derecho y seleccionar "ARREGLO" > "MOVER A LA CAPA DE DELANTE/ DE
ATRÁS") ignora la capa guía y, por ello, 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 o
• 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.
132

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.

Conflictos en el diseño de páginas

Si demasiados objetos de la página intentan afectar la posición o tamaño de otros en
diferentes maneras, se mostrará un aviso de error que dice:

EL CAMBIO SOLICITADO EN EL DISEÑO DE LA PÁGINA NO SE PUEDE PROCESAR POR SER

DEMASIADO COMPLEJO. SIMPLIFICA LA PÁGINA E INTÉNTALO DE NUEVO.

Para solucionarlo deberás disminuir las interacciones entre los objetos de la página.
Esto significa realizar cosas como lo siguiente:

• Agrupar (en la página 133) o combinar en grupos suaves los elementos que
deberían moverse en conjunto
• Eliminar la opción Push si no es necesaria en objetos que también se extiendan o
tengan posiciones de "Pie de página" o "Automática" (en la página 146) en la
página
• Establecer la posición de la página como "Fija" o "Pie de página"
• Eliminar la marca de extensión
• Eliminar el contorneo (en la página 220)

www.magix.es
 Trabajar con objetos 133

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 252) y Sombras (en la página 257).

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.

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".

134

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

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.

Cambiar colores en un grupo

La mayoría de los grupos utilizan más de un color simple y a veces es útil cambiarlos
(por ejemplo para cambiar los colores de un botón formado por un grupo de objetos).
Podrías hacerlo simplemente desagrupándolos o usando SELECCIONAR INTERIOR para
cambiar el color de cada objeto individualmente, y reagruparlos después. Pero una
forma más rápida es seleccionar el grupo y hacer clic en un color. Si el grupo contiene
varios colores, aparecerá un diálogo que te permitirá elegir cuál reemplazar con el
color que has seleccionado. O abre el EDITOR DE COLOR y su lista de colores incluirá la
misma lista de colores que se ha usado en el grupo. Selecciona el color que quieres
editar.

Grupos suaves (soft groups, en inglés)

Los grupos normales, como se explicó en "Agrupar y desagrupar objetos" (en la
página 132), solo 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
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
www.magix.es
 Trabajar con objetos 135

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 ya estarán asociados
en un grupo suave.

Sincronización de texto
En algunas circunstancias, los objetos de texto de un grupo suave se sincronizan para
que, si editas el texto de uno, también se actualice en los demás. Esta función existía
antes de la introducción de las COPIAS LIVE y las COPIAS LIVE son mucho más flexibles
y potentes, por lo que esta función ya no es tan útil como solía serlo. Sin embargo,
muchas plantillas y elementos de la GALERÍA DE DISEÑOS todavía la utilizan y también
se usa generalmente para botones MouseOver, en donde ambos estados del botón
deben tener la misma etiqueta todo el tiempo. Cuando se cambia la etiqueta del
estado desactivado, el estado MouseOver también cambia para coincidir.

Además, muchas veces pueden obtenerse efectos "similares a las sombras" si colocas
dos o más copias de texto muy cerca entre sí pero con un leve desplazamiento. Al
editar una, se cambiarán las demás en sincronización.

Para mantener la sincronización, los objetos de texto deben:

• encontrarse en el mismo grupo suave

• tener el mismo texto al momento de la creación de un grupo suave
• y contar con recuadros de límite superpuestos o encontrarse en diferentes capas
o diferentes frames de animación.

Si quieres que el texto se mantenga sincronizado en otras circunstancias, utiliza las

COPIAS LIVE .
136

Alineación
Así puedes alinear o distribuir de forma precisa dos o más objetos.

Alineación rápida
Selecciona los objetos que deseas alinear y haz clic derecho en la selección para
escoger ALINEAR del menú desplegable, luego escoge una de las opciones siguientes:

• Para alinear los objetos verticalmente, selecciona BORDES IZQUIERDOS ,

CENTROS o BORDES DERECHOS.
• Para alinear los objetos horizontalmente, escoge BORDES SUPERIORES , CENTROS o
BORDES INFERIORES .

Alineación y distribución del espacio

Si, además de alinearlos, quieres distribuir el espacio entre los objetos, selecciónalos,
haz clic derecho sobre la selección y escoge "ALINEAR" > "ALINEACIÓN" para ver el
diálogo de alineación de objetos. Como alternativa, escoge "ARREGLO" >
"ALINEACIÓN" ("Ctrl + + L").

El pequeño diagrama en la parte superior del

diálogo te muestra el efecto al seleccionar cada
opción. Los objetos seleccionados en el
documento no cambiarán hasta que pulses
APLICAR .

El diálogo de alineación es un diálogo no modal,

lo que significa que puedes dejarlo abierto y
continuar trabajando sobre el documento al
mismo tiempo. Por lo tanto, puedes cambiar
herramientas, dibujar y cambiar la selección del
objeto y después seleccionar una de las opciones
de alineación.
Si te has equivocado al seleccionar, puedes
cambiar a la selección y hacer clic sobre el botón
APLICAR para configurar la última alineación. Esto
puede ahorrarte mucho tiempo.

www.magix.es
 Trabajar con objetos 137

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.

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. Selecciona los objetos y luego haz clic derecho sobre la selección.

2. Escoge "ALINEAR " > "BORDES IZQUIERDOS " de la lista desplegable.

Los objetos seleccionados se moverán para alinearse al borde izquierdo. Como

alternativa:

1. Escoge "ALINEAR " > "ALINEACIÓN " o pulsar "Ctrl + Shift + L" o escoge
ALINEACIÓN del menú ARREGLO para abrir el diálogo Alineación de 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 .
138

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 las otras
opciones.

Para seleccionar rápidamente cualquier otra combinación de alineación vertical y

horizontal, haz clic en el diagrama:

• Un solo clic alinea la posición horizontal y vertical a la posición de clic de

cualquiera de las nueve combinaciones superior-centro-inferior/izquierda-
centro-derecha.
• "Ctrl + clic" no cambia la posición horizontal y arregla los objetos en una línea
alineada respecto a la parte superior, central o inferior.
• "+ clic" no cambia la posición vertical y arregla los objetos en una columna
alineada respecto a la izquierda, al centro o a la derecha.

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 distribuye de forma
regular.

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.

www.magix.es
 Trabajar con objetos 139

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 la 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 los objetos a los que quieres aplicar los atributos.
4. Escoge "EDICIÓN" > "PEGAR ATRIBUTOS" o "Ctrl + Shift + A".

El objeto permanece en el portapapeles hasta que lo sustituyas con otra 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

140

• 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+Shift+A" para aplicar los atributos

Atención: la mayoría de los atributos puede 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.

ClipView
El ClipView te permite ocultar o "recortar" partes de una forma dentro de una forma
más grande. El efecto es similar a la opción Intersección de formas, descrita en el
capítulo Manejo de formas (en la página 176). La diferencia es que la opción
intersección de formas corta los objetos, mientras que la opción ClipView
simplemente oculta las partes fuera del objeto ClipView. Además, puedes ajustar la
posición de los objetos dentro del ClipView.

Para crear un ClipView:

1. El objeto "ventana" debe encontrarse detrás de los

demás objetos del ClipView. De ser necesario,
desplázalo hacia atrás. En este ejemplo, la elipse
oscura es el objeto ventana. Como alternativa dibuja
la forma "ventana" en la capa de máscara (en la
página 267)
2. Selecciona todos los objetos que quieres incluir en el
ClipView (incluyendo el objeto "ventana", salvo que
se encuentre en la capa de máscara).
3. Escoge ARREGLO > APLICAR CLIPVIEW ("Q"). Todo el
objeto "ventana" permanece visible además de las
partes de los demás objetos que cubren el objeto
"ventana".

Configurar el color de fondo del ClipView

El color de relleno del objeto original se utiliza como el color de fondo del ClipView.
Entonces, o bien configuras este color antes de crear el ClipView o utilizas
"seleccionar dentro" (Ctrl+Clic) sobre el fondo y después modificas el color.

Seleccionar forma de corte

Esto selecciona solamente la forma que has utilizado para hacer el corte.
Efectivamente, esta es la "ventana" a través de la que se verán los otros objetos en el
clipview. Una vez que la has seleccionado puedes moverla, transformarla o ajustarla a
tu clipview.
www.magix.es
 Trabajar con objetos 141

Seleccionar objetos cortados

Esto selecciona todos los objetos en el clipview que se están cortando. Por lo tanto,
una vez que los has seleccionado puedes arrastrarlos dentro del clipview para ajustar
su posición relativa a la forma de corte.

Seleccionar objetos en el ClipView

Puedes "seleccionar dentro" pulsando la tecla Ctrl y haciendo clic en el objeto
deseado. Esto es muy similar a seleccionar objetos dentro de un grupo que se ha
descrito anteriormente en este capítulo. (Los objetos ClipView son un tipo de grupo).
Ahora puedes realizar la mayoría de operaciones de edición sobre el objeto.

Eliminar un ClipView
Selecciona el objeto y escoge el menú Arreglo > Eliminar ClipView.

ClipView de borde suavizado

Si está seleccionado todo el objeto ClipView, puedes ajustar el control de
DIFUMINACIÓN de la barra superior para dar al objeto un borde de difuminación suave.

Nota: puedes colocar objetos ClipView dentro de otros objetos ClipView.

Nombrar objetos
Puedes aplicar nombres a cualquier objeto del MAGIX Web Designer 11
Premium, 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 434) 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 143) en
Primeros pasos.
142

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, solo 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 .

www.magix.es
 Trabajar con objetos 143

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 Designer te ofrece la posibilidad de repetir cualquier elemento en el mismo lugar

de las páginas del sitio. Cuando actualizas una de las copias, Web Designer aplica
automáticamente esos cambios a todas las páginas que tienen una copia del objeto
repetido.

En la mayoría de las plantillas de diseño se repiten los botones principales de

navegación. Puedes convertir a cualquier objeto, como un botón, en un objeto
repetido si haces clic derecho y escoges la opción REPETIR EN TODAS LAS PÁGINAS. El
objeto se copia en el mismo lugar en todas las páginas y verás el símbolo de objeto
repetido en la esquina superior derecha. Si realizas más cambios a este elemento,
todas las copias se actualizarán automáticamente.

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 la
conviertas en un objeto repetido.

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, y que el objeto se
actualizará automáticamente 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.

El recuadro rojo es el símbolo de objeto repetido y se muestra en todas las instancias del objeto
repetido.
144

Si no quieres una copia de un objeto que se repite en la página, solo tienes que
borrarla de esa página. Al editarlo, el objeto repetido se actualiza solamente en las
páginas que ya lo contienen. Esto significa que puedes escoger qué páginas de tu
documento deben tener el objeto que se repite y cuales no deben tenerlo.

Si quieres repetir un objeto en solo unas cuantas páginas de una página web extensa
puedes hacer lo siguiente:

1. Primsero, repite tu objeto en todas las páginas de tu sitio web, usando "Arreglo"
> "Repetir en todas las páginas".
2. Selecciona uno de los objetos repetidos y cópialo al portapapeles ("Ctrl + C").
3. Pulsa la tecla "Eliminar" y selecciona la opción "Eliminar de todas las páginas"
cuando se indique.
4. Ahora simplemente pega el objeto repetido en cada página donde lo quieras
copiar.

Edición del contenido de un objeto repetido

Cuando Web Designer crea un objeto repetido, los elementos repetidos se colocan en
un grupo de repetición similar a un grupo normal. Si vas a una página inferior que
contiene un objeto repetido en la GALERÍA DE PÁGINAS Y CAPAS, puedes ver que hay
un grupo repetido que contiene a cada objeto repetido de esa página.

Web Designer coloca a cada objeto repetido dentro de un grupo de repetición.

www.magix.es
 Trabajar con objetos 145

Si deseas editar un elemento que se encuentra dentro de este grupo, pulsa Ctrl y haz
clic sobre el elemento para seleccionarlo dentro del grupo de repetición. También
puedes hacer doble clic sobre un grupo para editarlo en una nueva vista de
subdocumento (o haz clic en él y escoge ABRIR del menú de contexto). Contendrá
solamente el contenido del grupo y no el grupo en sí mismo, para que puedas
seleccionar directamente a los elementos del grupo con un clic.

Como alternativa, si vas a una herramienta específica, en general puedes hacer clic
directamente en cualquier objeto al que pueda aplicarse la herramienta y se
seleccionará dentro de su grupo de repetición (o de cualquier otro grupo). De esta
forma, puedes seleccionar, por ejemplo, una Quickshape que se encuentra dentro de
un grupo de repetición, si vas a la herramienta de Quickshape y haces clic sobre la
forma. Al igual que con otras ediciones que realices a un objeto repetido, cualquier
edición que hagas dentro de un grupo de repetición se aplicará a todas las instancias
de ese objeto repetido en otras páginas.

Fijación de un objeto repetido

Puedes fijar un objeto repetido, si haces clic sobre él y escoges FIJAR OBJETO
REPETIDO . Una vez fijado, el objeto no puede seleccionarse. De todas formas, si
realizas una modificación a otras copias de ese objeto repetido en otras páginas que
no estén fijadas, se cambiarán todas las copias, incluyendo la copia fijada.

Detención de la repetición de objetos

Haz clic derecho sobre un objeto y escoge DETENER ACTUALIZACIÓN para desactivar la
repetición de un objeto o de todas las copias de ese objeto en tu sitio web. También
podrás hacerlo si escoges DETENER ACTUALIZACIÓN del menú ARREGLO. 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 vez que realices un cambio, los otros objetos no se
actualizarán.

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 modificar dichos objetos para que sean diferentes en cada página de forma
que dejen de estar conectados entre sí.

DETENER ACTUALIZACIÓ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 logotipo) y no quieres que esa
copia se actualice. En este caso, escoge la opción SOLO ESTA COPIA, cuando se te
pregunte.

Ten en cuenta que no puedes usar DETENER ACTUALIZACIÓN en barras de

navegación que tengan la opción BARRA DE NAVEGACIÓN DEL SITIO activada en el
DIÁLOGO DE BARRA DE NAVEGACIÓN . Esto es porque las barras de navegación del
146
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.

Eliminar objetos repetidos

Si no quieres una copia de un objeto que se repite en la página, solo tienes que
borrarla de esa página. MAGIX Web Designer 11 Premium te preguntará si deseas
eliminar solo esa copia o todas las copias del objeto repetido. Al pulsar "Ctrl +
Eliminar" se eliminarán el objeto repetido seleccionado sin preguntar si se quieren
eliminar todas las copias o solo una.

Pies de página y objetos que se amplían con la

página.
Normalmente en un documento de página web no todas las páginas tienen la misma
longitud y puede que tengas objetos que quieras que permanezcan a una distancia fija
del final de la página, incluso cuando la alargas o acortas. Estos elementos se llaman
objetos de pie de página. Puede que tengas también formas que conforman el fondo
de tu página, que deben extenderse o contraerse si cambia el largo de la página, de
modo que siempre se ajusten a la página adecuadamente. El submenú POSICIÓN EN LA
PÁGINA del menú contextual te permite hacer que los objetos se comporten de estas
maneras.

Haz clic derecho sobre un objeto y mira el submenú POSICIÓN EN LA PÁGINA . Este
menú te permite controlar la forma en que el objeto se comporta cuando cambias el
tamaño de la página. Las primeras cuatro entradas del submenú se comportan como
un grupo de botones de radio, es decir, que solo puedes seleccionar uno para cada
objeto cada vez.

Fijo
Esta es la opción por defecto y la configuración adecuada para la mayoría de los
objetos de un documento. La posición del objeto es fija con respecto a la parte
superior de la página de forma que no se moverá aun cuando cambies la longitud de
la página.

Pie de página
Así se marca el elemento como objeto de pie de página. Siempre mantendrá la misma
distancia con respecto a la parte inferior de la página, de forma que si amplías la
página, el objeto se moverá hacia abajo en la misma proporción. Si copias el objeto y
utilizas la opción PEGAR EN EL LUGAR para insertarlo en una página con un tamaño
diferente, el objeto se ubicará a la misma distancia de la parte inferior de esa otra
página.

Si configuras un objeto repetido como pie de página, se colocará a la misma distancia

de la parte inferior de cada página.

www.magix.es
 Trabajar con objetos 147

Automático
Esta opción es especialmente útil para plantillas de página y objetos repetidos.
Permite que un objeto se comporte como un pie de página, solo si se encuentra en la
mitad inferior de una página. Si mueves el objeto a la mitad superior de la página, se
comportará como un objeto fijo. La lógica de esta reacción reside en que los objetos
que son pie de página se necesitan en general cerca de la parte inferior de la página.

Esta es la configuración por defecto para los objetos repetidos. En otras palabras, si
configuras un objeto cerca del borde de la página como repetido, se colocará a la
misma distancia del borde inferior de todas las páginas en las que aparece. Pero si lo
mueves a la mitad superior de la página, ya no se tratará como un elemento de pie de
página.

Ampliar con la página

Si configuras a un objeto con AMPLIAR CON LA PÁGINA , la parte superior del objeto no
se moverá. Pero la parte inferior del objeto se desplazará para mantener la distancia a
la parte inferior de la página. Por lo tanto, el objeto se escalará en sentido vertical. En
general, esta opción es útil solamente para objetos que forman parte del fondo de una
página. Por ejemplo, muchas de las plantillas de páginas web de la galería de diseños
tienen rectángulos de colores en la capa de fondo de página que forman parte del
diseño de la página. En general, están configurados como AMPLIAR CON LA PÁGINA
para mantener un diseño perfecto con cualquier longitud de página.

Objetos de desplazamiento
Los objetos de desplazamiento son especialmente útiles en las plantillas de páginas
porque ayudan a mantener el diseño de la página cuando el texto se extiende o se
acorta. Los objetos de desplazamiento no se superponen unos con otros, por lo que si
amplías o mueves uno de forma que invada el espacio de otro, lo "desplazará" hacia
abajo en la página. Y si un objeto de desplazamiento se sale del final de la página, esta
se amplía automáticamente.

Para convertir un objeto en objeto de desplazamiento, haz clic derecho sobre él y

escoge DESPLAZAMIENTO... del submenú POSICIÓN EN LA PÁGINA . Aparecerá el diálogo
de DESPLAZAMIENTO.
148

Selecciona la casilla "Desplazamiento" para activar esta opción para los objetos
marcados. Luego puedes cambiar los márgenes inferior y superior, si lo deseas. Por
defecto, los márgenes inferior y superior están bloqueados conjuntamente: si quieres
configurarlos de forma independiente haz clic en el botón de bloqueo. El valor del
margen superior determina cuán cerca pueden estar los objetos de desplazamiento
entre sí, hasta que uno se desplace para dar lugar al otro. De esta forma impide que
otros objetos de desplazamiento se acerquen demasiado. De la misma forma, el valor
del margen inferior especifica cuán cerca puede estar de otro objeto de
desplazamiento situado debajo antes de que lo desplace. También define la distancia
mínima que debe mantenerse entre el objeto y el extremo inferior de la página (la
página se extenderá de ser necesario), ya que por lo general no deseas que el objeto
se encuentre justo sobre el borde de la página.

El campo AMPLIAR LADOS te permite hacer que el objeto de desplazamiento se

comporte como si fuera más ancho de lo que es en realidad. Esto significa que puedes
hacer que desplace a los objetos que se encuentran debajo (o que se lo empuje desde
arriba) aun si existe una separación horizontal entre los objetos. Entonces, por
ejemplo, un rectángulo de 100 píxeles de ancho con una configuración de
desplazamiento con AMPLIAR LADOS de 50 píxeles, se comportará como si tuviera
200 píxeles de ancho respecto al desplazamiento.

Como se menciona arriba, cuando un objeto de desplazamiento se alarga desplazará

otros objetos de desplazamiento debajo del mismo fuera de la página y , si es
necesario, la página se alargará. Pero, ¿qué ocurre si el objeto de desplazamiento se
acorta de nuevo (porque se haya borrado parte del texto de un objeto de texto, por
ejemplo)? Ahora hay espacio para que los objetos de desplazamiento debajo vuelvan
a desplazarse hacia arriba en la página. Por lo tanto, mientras que los objetos
comenzaron pegados antes de que el texto fuera borrado, esto es exactamente lo que
sucede a continuación: los objetos de desplazamiento inferiores suben, cubriendo el
hueco que en caso contrario se hubiera generado. De igual manera y donde sea preci-
so, el final de la página se desplazará hacia arriba, haciendo la página más corta.

En resumen, aplicar "Desplazamiento" a los elementos principales de tu página ayuda

a mantener su disposición cuando se añade o elimina contenido de la misma.
www.magix.es
 La herramienta de edición de formas 149

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 11 Premium 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.
150

Dibujar una linea o forma

Puedes utilizar cualquiera de las siguientes herramientas para dibujar líneas y formas:
• HERRAMIENTA DE MANO ALZADA Y PINCEL ("F3").
• HERRAMIENTA DE LÍNEAS RECTAS Y FLECHAS
• HERRAMIENTA DE EDICIÓN DE FORMAS ("F4").

La HERRAMIENTA DE MANO ALZADA Y PINCEL es la forma más simple de dibujar líneas,

curvas y formas, y funciona igual que un lápiz.

La HERRAMIENTA DE LÍNEAS RECTAS Y FLECHAS es la mejor opción si quieres dibujar

pequeños segmentos de líneas rectas o añadir extremos de flecha a cualquier tipo de
línea.

La HERRAMIENTA DE EDICIÓN DE FORMAS es la mejor herramienta para dibujar curvas y

líneas precisas. Es también la herramienta principal para editar líneas y formas.

Nota: aunque no es la barra de herramientas de la herramienta de dibujo,

también puedes usar la HERRAMIENTA DE PLUMA para crear formas precisas.
Tiene funcionalidad limitada y funciona como la herramienta de línea de otros
programas de dibujo. Para usar la HERRAMIENTA DE PLUMA , escoge BARRAS DE
CONTROL del menú VENTANA y haz clic en la casilla PALETA DE BOTONES . Luego
haz clic en el icono HERRAMIENTA DE PLUMA en la paleta de botones.

La herramienta de mano alzada y pincel

Puedes utilizar esta herramienta para dibujar libremente como si fuera un
lápiz. También puede utilizarse para crear pinceladas, lo que se describe más
adelante. Mientras utilizas esta herramienta, la barra de estado te suministra
información sobre cómo utilizarla.

1. Coloca el cursor en el lugar donde debe comenzar la línea.

2. Pulsa y mantén pulsada la tecla del ratón.
3. A medida que arrastras el cursor por el documento, dibujarás una línea en
tiempo real.
4. Suelta la tecla del ratón para finalizar la línea.

Después de dibujar libremente una

línea puedes controlar el suavizado
de la curva (la cantidad de puntos
Suavizado Indicador de
de control) ajustando la barra
readaptación
deslizante de control de suavizado
de la barra de información.

www.magix.es
 La herramienta de edición de formas 151

Los valores bajos hacen que la línea siga el movimiento del ratón de forma más
cercana al crear más puntos de control, mientras que los valores más altos producen
curvas más suaves con menos puntos de control.

Los valores bajos son menos suaves Los valores altos ofrecen curvas más
suaves

Puedes cambiar el suavizado en cualquier momento hasta que realices otras

ediciones a la línea (el indicador de readaptación te indicará en la barra de
información si todavía puedes hacer modificaciones al suavizado).

Borrar durante el dibujo

Antes de soltar el botón, puedes eliminar parte de la línea si pulsas la tecla Shift. El
icono del lápiz se dará la vuelta para que puedas utilizar la goma. Ahora podrás borrar
hacia atrás en la línea. Suelta  para continuar dibujando.

Dibujo de segmentos rectos con la herramienta de dibujo

libre
Mientras dibujas libremente una línea, presiona Alt y mueve el cursor hasta la nueva
posición, al soltar Alt la línea será recta. Puedes continuar dibujando la línea o pulsar
nuevamente Alt para dibujar otro segmento. Recuerda que puedes utilizar Ctrl para
limitar el ángulo de la línea. Si solo quieres dibujar muchos segmentos individuales de
líneas rectas, utiliza la herramienta de líneas rectas descrita más abajo.

Extender una línea

Asegúrate de haber seleccionado la línea (un solo clic sobre la forma o la línea
mientras te encuentras en la herramienta de DIBUJO LIBRE Y PINCEL lo hará). Ahora, si
te mueves hasta el final de la línea, un pequeño símbolo + junto al icono del lápiz te
indicará que puedes dibujar para añadir una nueva sección de dibujo libre a la línea.
152

Unir dos líneas

Selecciona ambas líneas ("Shift+clic" en la segunda línea para añadirla a la selección)
y ahora podrás dibujar desde el final de una línea hasta el final de la otra. Un pequeño
+ al lado del lápiz (aparece después de una pausa) te indica que te encuentras sobre
el extremo.

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:

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 Enter.

O:
1. Usa la herramienta de DIBUJO LIBRE Y PINCEL para crear el segmento final.

Cualquiera de estas opciones cerrará la forma. Si hay un color de relleno actual, la

forma se llenará con ese color.
www.magix.es
 La herramienta de edición de formas 153

Editar líneas/formas con la herramienta de

dibujo libre y pincel
No puedes modificar directamente las formas creadas con las herramientas de
rectángulo, elipses o quickshape. Primero debes convertirlas en formas editables con
"ARREGLO > CONVERTIR A FORMAS EDITABLES ". Consulta "Trabajar con formas" para
más información.

Puedes utilizar la herramienta de DIBUJO LIBRE Y PINCEL para editar líneas (o el

contorno de las formas) y simplemente dibujar la sección de la línea que quieres
modificar. Por ejemplo, para editar el objeto:

Selecciona el objeto que quieres editar.

Mueve el lápiz de dibujo libre sobre una parte de la línea. Una ~

mostrará cuando el lápiz se encuentra en su posición.

Dibuja la línea requerida y después mueve el lápiz hasta el

segundo punto de la línea existente. Una ~ te indica nuevamente
cuando el lápiz se encuentra en la posición correcta.

Al soltar la tecla del ratón, la sección de la línea se sustituirá.

Modo Bosquejo
Esta opción es útil si estás dibujando rápidamente muchas líneas
independientes cercanas unas a otras, tal vez con una tableta de dibujo.

Al trabajar de esta forma, generalmente no quieres editar las líneas existentes que has
dibujado, sino dibujar nuevas líneas con cada trazo. Pero como se ha descrito
anteriormente, si inicias una operación de dibujo en una línea existente o sobre su
punto final, esa línea existente se modifica. Entonces, cuando haces un bosquejo, es
posible que modifiques líneas sin quererlo con tus pinceladas, en vez de dibujar
nuevas líneas como las que querías.
154

Para solucionar este problema, activa el modo de bosquejo. Ahora, si colocas el cursor
del ratón sobre una línea existente o un punto de extremo, verás que se hace una
breve pausa antes de que el cursor del ratón cambie para indicar que la línea se
editará o extenderá. Esta pausa significa que puedes seguir editando líneas existentes
si lo deseas, pero que no lo harás sin intención cuando quieres trazar nuevas líneas.

Estilos de pincel
La herramienta de DIBUJO LIBRE Y PINCEL también puede utilizarse para aplicar
distintos estilos de trazos sobre el trazado de la línea. Entonces, puedes convertir una
línea sólida con un ancho específico en una línea con ancho variable o utilizar uno de
los estilos de pincel, como "airbrush" o marcador de fieltro, etc.

Es importante comprender que la línea puede continuarse editando por lo que, a

diferencia de la mayoría de programas de dibujo y optimización de fotos, puedes
seleccionar la línea posteriormente y ajustar la forma de la línea y el trazo del pincel.
Esto se describe en el apartado PINCELES más adelante en este capítulo.

La herramienta de líneas rectas y flechas

Esta herramienta facilita el dibujo de segmentos individuales de líneas rectas y el
agregado de extremos de flecha a cualquier línea, de forma que es más fácil y práctico
que hacerlo con la galería de líneas.

Dibujo y edición de líneas rectas

Simplemente haz clic y arrastra sobre la página para dibujar una línea recta. Puedes
hacer clic sobre una línea existente para seleccionarla y, una vez seleccionada, puedes
hacer clic y arrastrar de cualquier extremo para moverlo.

Agregar extremos de flechas

La barra de información tiene dos listas desplegables a la izquierda, que te permiten
escoger un extremo de punta para cada extremo de la línea seleccionada.

Punta de flecha
Extremo posterior de la flecha
Tamaño del extremo de la flecha
Trayectoria invertida

www.magix.es
 La herramienta de edición de formas 155

La barra deslizante de la barra de información te permite cambiar el tamaño de los

extremos de flecha a la línea seleccionada actualmente. O puedes introducir un valor
de porcentaje en el campo de texto del tamaño a la derecha de la barra deslizante. Por
defecto, los extremos de línea se crean con un ancho 6 veces mayor que el ancho de
la línea, y esto se toma como el tamaño 100%, como indica la barra deslizante de
tamaño. Si haces la línea más ancha, el ancho del extremo de la flecha también se
actualizará. Por lo tanto, introduce un valor menor que 100% para reducir el tamaño
de los extremos de la flecha o mayor que 100% para aumentarlo. A pesar de que la
barra deslizante solo llega a un máximo de 800%, puedes entrar porcentajes mayores
en el campo de texto.

Trayectoria invertida
Presiona el botón TRAYECTORIA INVERTIDA de la barra de información para
intercambiar la punta y el final de la flecha de la línea seleccionada.

Agregar más segmentos de línea

Las líneas creadas con la herramienta de líneas rectas son, por supuesto,
completamente compatibles con las otras herramientas de dibujo. Entonces, si
quieres agregar más segmentos a una línea, curvarla o tal vez convertirla en una
forma cerrada, utiliza 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
156

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 11 Premium 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.

Algunos objetos como QuickShapes, rectángulos, elipses y texto tienen que

convertirse en formas editables, antes de poder utilizar la HERRAMIENTA DE EDICIÓN
DE FORMAS para modificarlos. Para ello, selecciona un objeto y marca "ORDENAR " >
"COMBINAR FORMAS " > "AÑADIR FORMA".

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.

www.magix.es
 La herramienta de edición de formas 157

Mezclar líneas curvas y rectas

Para crear un objeto que es una mezcla de segmentos rectos y curvos, cambia entre
los botones CONVERTIR EN CURVA y CONVERTIR EN LÍNEA mientras creas el objeto
(también puedes pulsar L o C en el teclado).

Nota: También puedes usar el shortcut "X" para crear unión en vértice o "S" para
crear una unión fluida mientras usas el EDITOR DE FORMAS . Estos afectan la forma en
que dos segmentos de línea se unen. Una unión en vértice crea dos controles Bézier
independientes que puedes editar de forma separada. Con una unión en vértice
puedes crear un ángulo recto. Una unión fluida crea una unión simétrica que funciona
como un balancín. Si arrastras uno de los controles Bézier hacia abajo, el control
opuesto va hacia arriba.

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.

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.
158

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 solo es aplicable a la herramienta de edición de formas.

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.

www.magix.es
 La herramienta de edición de formas 159

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" (en la página 152). 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.
- 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.
160

Los puntos de inicio y fin son importantes cuando se aplican flechas (en la página
166).

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 492)"
en el diálogo de opciones.

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.

www.magix.es
 La herramienta de edición de formas 161

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 11 Premium 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.

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).
162

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.

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.

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.

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.

www.magix.es
 La herramienta de edición de formas 163

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.

Crear uniones en punta

Generalmente, MAGIX Web Designer 11 Premium 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.
164

Equilibrar curvas
El equilibrio hace que los dos controles deslizantes de la curva se encuentren a la
misma distancia del punto, lo que resulta en curvas más simétricas y suaves. Para
equilibrar una curva, selecciona el control deslizante del punto, luego arrastra uno de
los controles deslizantes de curva mientras mantienes la tecla SHIFT presionada. A
medida que arrastras uno de los controles deslizantes de la curva, el otro se moverá
para ser exactamente opuesto y tener la misma distancia desde el control deslizante
del punto.

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 106)".

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.

www.magix.es
 La herramienta de edición de formas 165

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 formas. Las formas son objetos cerrados y, por lo tanto, no tienen
controles deslizantes de fin.

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 (abreviado 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 usar cualquiera de las unidades de medida estándar de MAGIX Web

Designer 11 Premium.

Puedes introducir el valor del ancho en cualquier unidad y MAGIX Web Designer 11
Premium 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.

Nota: el ancho de línea cero es un caso especial y no debería utilizarse. Esto dibuja
una línea de un píxel. El tamaño verdadero dependerá del dispositivo en el que se
visualizará el dibujo. En el monitor, un píxel es claramente visible y nunca se ve con
antialiasing. En dispositivos como impresoras o imagesetters, que presentan una
resolución mucho más alta, la línea es casi invisible. (Las líneas con ancho cero de
archivos importados se convierten a 0,25 pt.)
166

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, trazos de pincel, plantillas con guiones, puntas de flecha y más.

Para ver la GALERÍA DE LÍNEAS :

• Selecciona "HERRAMIENTAS > GALERÍA DE LÍNEAS "

• O haz clic en la pestaña GALERÍA DE LÍNEAS en la barra de GALERÍAS.

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:

www.magix.es
 La herramienta de edición de formas 167

• arrastrar y soltar el estilo deseado desde la galería hasta la forma o línea;

• hacer doble clic sobre el estilo deseado en la galería;
• seleccionar el estilo y después hacer clic sobre el botón APLICAR .

Ancho de línea
El campo de texto que se encuentra encima de la galería es una copia del campo de
texto de la barra de control estándar.

Trazos de pincel
Hay varias secciones que muestran una selección de varios estilos de pincel.

Modelo de guión
Esta sección ofrece una selección de estilos de línea con guiones.

Puntas de flecha
La mejor forma de aplicar una punta de flecha es utilizar la HERRAMIENTA DE LÍNEAS
RECTAS Y FLECHAS (en la página 154), tal como se ha descrito anteriormente en este
capítulo. Sin embargo, también puedes utilizar la galería de líneas. Arrastra y suelta 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 .

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.
168

Para información general sobre galerías, consulta Manejo de documentos (en la

página 95).

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ú.

www.magix.es
 Manejo de formas 169

Manejo de formas

Herramientas de dibujo y forma

Usa cualquiera de estas herramientas para crear formas regulares.

• HERRAMIENTA DE RECTÁNGULO ("M")

• HERRAMIENTA DE ELIPSE ("L")
• HERRAMIENTA DE FORMA RÁPIDA ("Shift + F2")

La HERRAMIENTA DE RECTÁNGULO crea rectángulos y cuadrados. La HERRAMIENTA DE

ELIPSE crea círculos y elipses. La HERRAMIENTA QUICKSHAPE crea polígonos, estrellas y
smartshapes.

Crear rectángulos y cuadrados

Para crear un rectángulo: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.
170

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á.

Crear círculos y elipses

Para crear una elipse o un círculo:

Selecciona la herramienta de ELIPSES (" + F4" o "L") de la barra de

herramientas principal.

Los botones RADIO Y DIÁMETRO de la barra de información crean automáticamente

círculos.

Radio
Diámetro
Creación con límites

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.

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.

Puedes convertir una elipse en un círculo en cualquier momento haciendo doble clic
sobre un control deslizante.

www.magix.es
 Manejo de formas 171

Smartshapes
Usa la HERRAMIENTA QUICKSHAPE para insertar SMARTSHAPES: una
colección de formas útiles ya preparada como flechas, globos de diálogo,
campos de texto y componentes geométricos.

Con la HERRAMIENTA QUICKSHAPE seleccionada, haz clic en el botón INSERTAR de la

barra de información y elige entre las formas disponibles en el menú desplegable. Si
seleccionas RECTÁNGULO , ELIPSE, PANEL DE TEXTO o GLOBO DE DIÁLOGO la forma se
colocará directamente en tu documento.

Las otras opciones abrirán el CATÁLOGO DE CONTENIDO ONLINE, donde están

disponibles numerosas formas. Elige una forma e impórtala simplemente en tu
documento haciendo doble clic o haciendo clic en el botón IMPORTAR . También
puedes acceder a smartshapes a través de la GALERÍA DE DISEÑOS y el menú principal
INSERTAR .

Smartshapes de flecha, globo de diálogo y segmento de tarta.

Edición de smartshapes
Smartshapes viene con controles deslizantes predefinidos, lo que te permite editar las
formas de forma fácil e intuitiva. Simplemente modifica o curva una flecha o para
editar un globo de diálogo usando los controles deslizantes, por poner algún de
ejemplo. Los controles deslizantes aparecen cuando seleccionas la forma usando la
HERRAMIENTA QUICKSHAPE , y si pasas sobre el control deslizante, la barra de estado te
da una práctica descripción de la función.

Cuando estés en la herramienta de selección, haz doble clic sobre cualquier

smartshape y esto te lleva a la herramienta quickshape, de forma que puedes
arrastrar el ratón sobre los controles deslizantes de la forma.
172

Las smartshapes originales (a la izquierda) y las versiones editadas (a la derecha) que muestran
los controles deslizantes de smartshapes.

Con el globo de diálogo, los controles deslizantes te permiten cambiar las

dimensiones del globo, añadir una curvatura, controlar el área de texto y modificar el
tamaño y orientación de la flecha del globo.

Cuando smartshape contiene texto, puedes editarlo: cambia su tamaño y fuente, etc.
así como para cualquier otro texto, usando la HERRAMIENTA DE TEXTO.

Para cambiar los colores de una smartshape, puedes seleccionar la forma y hacer clic
en los colores sobre la línea de colores o abrir el EDITOR DE COLOR . O arrastra el color
desde la línea de color y suéltalo sobre el elemento. Donde hay múltiples colores en la
forma, el diálogo Reemplazamiento de color (en la página 189) aparecerá
permitiéndote elegir qué color quieres cambiar.

Hay muchas smartshape diferentes y verás más aparecer con el tiempo según el
programa vaya buscando nuevas formas modificadas en Internet cuando inicias el
programa. Así que mantente al tanto para agregar nuevas formas.

www.magix.es
 Manejo de formas 173

Crear polígonos y estrellas

Usa la herramienta QUICKSHAPE para crear una forma simétrica regular con esquinas
en punta o redondeadas. Luego puedes arrastrar los extremos para doblar los lados y
cambiar la cantidad de lados o convertir el objeto en una elipse, un polígono o una
estrella.

1. Selecciona la herramienta QUICKSHAPE (" + F2") de la barra de

herramientas desplegable.
2. Selecciona CREAR POLÍGONOS o FORMAS DE ESTRELLA de la barra de
información.
3. Selecciona la cantidad de lados en el menú o introduciendo el valor en el
campo de texto.

Modos de creación: Radio/Diámetro/Límites

Polígono
Elipse
Formas de estrella
Esquinas redondeadas
Restaurar bordes
Número de lados
Menú de elementos editables
Edición de campos
Insertar smartshapes

Para crear un polígono o estrella arrastra el ratón exactamente de la misma manera

que para un círculo o elipse usando los botones de creación de límites, diámetro o
radio para controlar el punto de origen de tu forma.

• Desde el centro hacia afuera (botón RADIO).

• O desde una esquina externa (botón de DIÁMETRO).
• O crea en diagonal un rectángulo imaginario que encierre el polígono (CREACIÓN
CON LÍMITES ) lo que te permite distorsionar el polígono o la estrella.
174

Polígonos o estrellas con esquinas redondeadas

Selecciona el botón ESQUINAS CURVADAS o haz
doble clic sobre un punto de esquina.

El polígono tiene controles

deslizantes adicionales
(controles deslizantes de
radio) donde comienza el
redondeo. Para aumentar o
disminuir el radio, arrastra
cualquiera de los controles de
radio.
Para eliminar las esquinas redondeadas:

• Haz clic en el botón ESQUINAS CURVADAS .

• O doble clic sobre el control deslizante.

Editar polígonos y estrellas

La herramienta SELECCIÓN te permite mover, girar, doblar y cambiar el tamaño de una
forma. (La herramienta SELECCIÓN se describe en Manejo de objetos (en la página
106)).

Usando la herramienta QUICKSHAPE puedes cambiar el tamaño o rotar:

• Arrastra los controles deslizantes de esquina.

• O selecciona TAMAÑO Y ROTACIÓN del menú ELEMENTOS EDITABLES . Introduce
los valores requeridos en los campos de texto.

También puedes desplazar los valores usando los botones de la derecha.

Para mover:

• Arrastra el control deslizante del centro de la forma.

• O utiliza las teclas de flechas de tu teclado.
• O selecciona CENTRO en el menú ELEMENTOS EDITABLES . Introduce los valores
X/Y deseados en los campos de texto.

Aplica o elimina las esquinas redondeadas con un clic sobre el botón

ESQUINAS CURVADAS .

www.magix.es
 Manejo de formas 175

Cambia el polígono a una elipse haciendo clic en el botón CREAR ELIPSE o

haciendo doble clic en el centro del polígono.

Haz un polígono con forma de estrella haciendo clic en el botón FORMAS DE

ESTRELLA . O haciendo doble clic en un lateral.

Arrastra los lados para curvarlos. Mueve el cursor sobre la esquina del polígono (se
convertirá en una flecha). Ahora puedes arrastrar los lados.

A la izquierda se encuentran los polígonos

originales. Simplemente arrastra los lados para
crear lados curvos.
"Ctrl+doble clic" sobre el lado o un clic sobre RESTAURAR BORDES para que los lados
vuelvan a ponerse rectos.

Cambia la cantidad de lados introduciendo el número en el menú o

seleccionando una de las opciones.

Edición de estrellas
Para aumentar o disminuir la profundidad de la forma de estrella:

Arrastra un control deslizante de estrella o

selecciona RADIO Y DESPLAZAMIENTO DE LA
ESTRELLA del menú de ELEMENTOS EDITABLES .
Introduce los valores requeridos en los campos La forma original está a la izquierda.
de texto.
O arrastra los lados para curvarlos:

La forma original está a la izquierda.

También puedes desplazar los valores usando los botones de la derecha.

Desplazamiento desde el centro

Desplazamiento angular

Si haces "Ctrl + arrastrar" un lado de una estrella, todos los lados se desplazarán de
forma simétrica. Si pulsas "Ctrl + " y arrastras, se desplazará el par de lados como
imagen reflejada. "Ctrl+doble clic" sobre el lado o un clic sobre RESTAURAR BORDES
para que los lados vuelvan a ponerse rectos.
176

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. Haz clic derecho y escoge "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.)

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.

www.magix.es
 Manejo de formas 177

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 133)).

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 177).

Cortar formas
MAGIX Web Designer 11 Premium 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.
178

También puedes utilizar una línea para cortar un objeto:

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.

División de formas complejas

Si utilizas las opción ENTRECRUZAR TODAS LAS FORMAS , los objetos seleccionados se
cortan por las líneas de la intersección.

Tres rectángulos seleccionados con un

borde de 1 px.

"ARREGLO" > "COMBINAR FORMAS" >

"ENTRECRUZAR TODAS LAS FORMAS"
divide las formas por las líneas de
intersección. Los bordes de 1 pt.
muestran los contornos de las nuevas
formas.
Luego podrás separar los rectángulos
para ver las nuevas formas.

Los atributos y colores de línea de las formas entrecruzadas no se modificarán.

www.magix.es
 Trabajar con colores 179

Trabajar con colores

MAGIX Web Designer 11 Premium 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 colores
La línea de colores 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 proporciona 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 183).

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 184), 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 lo
mismo que 100 % transparente. "Sin color" y transparencia son diferentes. Una
forma a la que se le aplica transparencia sigue siendo una forma sólida, mientras
que una forma rellenada 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.
Marcador de color de relleno actual
Marcador de color de línea actual

Si la longitud de la línea de color excede la ventana, puedes desplazarte por la línea de

colores con la barra de desplazamiento inferior o arrastrando la línea de color con "Alt
+ arrastrar".

MAGIX Web Designer 11 Premium te ofrece varias opciones para el tamaño

visualizado de la línea de colores (descrito en Personalización de Web Designer)
180

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 194).
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 184). 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.
www.magix.es
 Trabajar con colores 181

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:

EDITAR Abre el editor de color para editar el color con

ESTABLECER COLOR DE RELLENO
/ ESTABLECER COLOR DE LÍNEA
REEMPLAZAR COLORES
RENOMBRAR
ELIMINAR
nombre (no disponible para los colores de la paleta)
Configura este color como el color de relleno o de
línea del objeto seleccionado
Esta opción se muestra solo cuando el objeto
seleccionado tiene partes con múltiples componentes
o múltiples colores,
Cambiar el nombre del color con nombre (no
disponible para los colores de paleta)
Borra el color con nombre (no disponible para los
colores de paleta)

Si el objeto seleccionado es un mapa de bits, también puedes consultar las opciones

CONFIGURAR COLOR OSCURO DE TONO CONTINUO / CONFIGURAR COLOR CLARO DE
TONO CONTINUO. Consulta Coloreado de mapa de bits (en la página 246) 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.

Aplicar colores de relleno y línea con 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 sobre 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, arrastra un color hasta el fondo de
página.
• Para cambiar cualquier color en un objeto complejo o multicolor como un botón,
panel de texto, forma con relleno graduado, etc. suelta el color en cualquier
parte del objeto.

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 249).
182

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 final de relleno con gradación (cuando se arrastra sobre el final
de un relleno).
Establecer color de fondo de página o tablero de dibujo (cuando se arrastra un
color hasta la página o tablero de dibujo).

En vez de arrastrar y soltar, si has seleccionado un objeto, puedes hacer un simple clic
sobre la línea de color. Así se abre el Menú contextual de color de línea.

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 muestra el menú contextual con opciones de contorno incluidas. Color
continuo 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 oscuro es negro. Puedes configurar ambos colores
continuos a través del menú contextual de la línea de colores (leer más arriba).
Consulta Colorear mapa de bits (en la página 246) para más información.

Para establecer la opción "sin color" en un relleno o

línea, realiza los pasos descritos anteriormente, pero
escoge la opción "Sin color" en vez de un color.

Editar el color de un objeto

Para editar el color de relleno del objeto o objetos seleccionados:

• Selecciona "HERRAMIENTAS" > "EDITOR DE COLOR" ("Ctrl + E").

• O haz clic sobre el icono EDITOR DE COLOR en la línea de colores.
• O haz clic derecho sobre el objeto y selecciona COLOR DE RELLENO
• O haz doble clic sobre el icono de color de línea y relleno actual en la línea de
colores (al borde del panel más a la izquierda).

Para editar el color de línea del objeto o objetos seleccionados

• " + clic" sobre el icono EDITAR COLOR

• O haz doble clic sobre el icono de color de línea y relleno actual (al borde del
panel más a la izquierda).

www.magix.es
 Trabajar con colores 183

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 continuas trabajando. Cambiará para reflejar
el color de los objetos seleccionados, y el poder arrastar la esquina inferior derecha
para redimensionar la ventana del EDITOR DE COLOR te permite ajustar el color del
objeto seleccionado fácilmente y con precisión.

Aplicación de un color de fondo para el texto

Para aplicar un color de fondo para el texto, es decir, un color de fondo para destacar
el texto...

• Destaca texto con la HERRAMIENTA DE TEXTO (EN LA PÁGINA 197) o selecciona

objetos de texto con la HERRAMIENTA DE SELECCIÓN (en la página 29)
• Haz clic derecho sobre un color en la LÍNEA DE COLORES .
• Selecciona ESTABLECER FONDO DE TEXTO

Para quitar el color de fondo...

• Selecciona el texto
• Haz clic derecho sobre SIN COLOR en la LÍNEA DE COLORES (en la página 179)
• Selecciona la opción ELIMINAR FONDO DE TEXTO

El editor de color
El editor de color se utiliza para cambiar el color de los objetos del documento.
184

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 aquí para seleccionar cualquier tonalidad del tono seleccionado.
Arrastra aquí para seleccionar cualquier tono.
Arrastra aquí para aumentar el tamaño de la ventana.

La forma más fácil de crear un color nuevo es seleccionar un tono de la línea de color
inferior. Todos los matices de este tono se verán en la sección superior: tan solo haz
clic o arrastra 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
(lo que se llama "vista previa en tiempo real").

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.

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 arrastres, 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 fotos o de un objeto a otro.

Si el objeto bajo el cursor del ratón es complejo (p. ej. tiene aplicada una
transparencia) y el color no se puede determinar, se aplicará el color RGB de la
pantalla.
www.magix.es
 Trabajar con colores 185

La muestra de color abre un pequeño popup en el cursor

del ratón que indica el color que se está probando en ese
momento. Este será o el nombre de color de la paleta, el
nombre ya fijo de un color o el modelo y valor del color.

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

Convertir color con nombre en local para frame/capa
Renombrar color con nombre
Valores de colores HSV
Valor de color hex RGB
Modelo de color (HSV, RGB o escala de grises)
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 194).

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".
186

Colores locales y colores originales

Web Designer tiene dos tipos de colores:

• Los COLORES LOCALES se utilizan en un solo 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. Los colores originales aparecen en
la línea de colores. 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 la mayoría de plantillas para que coincidan
perfectamente 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 (porque se supone que si intentas editar el color del objeto, eso es
lo que quieres. 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
190)).

Esquemas de colores originales

Muchos de los temas web ofrecidos en la GALERÍA DE DISEÑOS y en los paquetes de
plantillas que pueden adquirirse por separado 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
color se pueden encontrar por lo general dentro de cada tema de la GALERÍA DE
DISEÑOS bajo TEMAS PARA PLANTILLAS DE PÁGINAS WEB , después de todos los diseños
de página y elementos gráficos independientes que conforman el tema. Todos tienen
"Esquema de color" en su título 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
www.magix.es
 Trabajar con colores 187

esquemas de colores de un tema a un sitio web creado a partir de plantillas de otro

tema. Pero obtendrás resultados mezclados y algunos esquemas no funcionarán
correctamente 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 color que se ofrecen 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.

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 190).
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.
188

Creación de nuevos colores con nombre

Si quieres usar el mismo color en diferentes partes del dibujo, y si existe la posibilidad
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 11 Premium:

Selecciona el objeto que tiene el color que quieres usar y luego haz clic en NUEVO
COLOR CON NOMBRE en el EDITOR DE COLOR .

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 solo con un clic (o con un 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.

www.magix.es
 Trabajar con colores 189

Reemplazar colores
Con Web Designer es más fácil volver a colorear objetos agrupados complejos como
botones, paneles de texto, barras de navegación, etc., ya que te ofrece una lista de
colores usados que te ayuda a elegir cual quieres reemplazar.

El diálogo de reemplazo de colores te permite seleccionar que color quieres reemplazar en el

grupo.

Puedes volver a colorear un elemento de una de las siguientes maneras:

• Arrastra el color desde la línea de color y suéltalo sobre el elemento.

• Selecciona un elemento y haz clic en un color de la línea de color.
• Selecciona el elemento y abre el EDITOR DE COLOR (Ctrl+E).

El editor mostrará una lista de colores de elemento en el menú desplegable en la parte

superior. Selecciona el que quieres editar y usa el editor de color como de costumbre.

Ten en cuenta que al reemplazar los colores en gráficos de esta forma, puedes
reemplazar el uso de colores con nombre por colores locales sin nombre, o
viceversa. Así, por ejemplo, podrías tomar un botón que tiene el "tema de color 1" y
reemplazarlo por el "tema de color 2". A partir de entonces, al editar el "tema de
color 2" en tu documento se cambiará también el color del botón. O bien, si
reemplazas el tema de color 1 con un color local, el botón ya no estará asociado a
ningún tema de color. Y puedes usar esta función para aplicar de forma rápida
colores con nombre en gráficos que originalmente no estaban diseñados para usar
tales colores.
190

Si seleccionas el elemento pluma, el "Editor de color" mostrará las gama de colores de reemplazo
disponibles.

Ten en cuenta que, cuando seleccionas un objeto con múltiples colores, la lista
desplegable del editor de color te muestra únicamente estos colores. El color de
relleno local, la línea de color local y la lista de colores con nombre no están
incluidas en la lista en este contexto para evitar hacer la lista demasiado larga y
confusa.

Cambiar color de fondo

Arrastra un color desde la línea de colores y suéltalo en el fondo de la página o del
tablero de dibujo para establecer su color. Si hay múltiples colores en el fondo, se
mostrará el diálogo "Color de reemplazo" para que elijas que color reemplazar.
Funciona igual que como se ha descrito arriba para los grupos con múltiples colores.

Para usar el editor de color para cambiar los colores de fondo, haz clic derecho en la
página y selecciona "FONDO DE PÁGINA" >"EDITAR COLOR DE PÁGINA" , o sobre el fondo
del tablero de dibujo y selecciona "TABLERO DE DIBUJO FONDO" >"EDITAR COLOR DEL
TABLERO DE DIBUJO" .

Editar colores con nombre

Hay cuatro modos diferentes de ver el color en el EDITOR DE COLOR para poder
editarlo:

• Escoge del menú en el EDITOR DE COLOR .

• O haz clic sobre el color en la LÍNEA DE COLORES y selecciona EDITAR del menú
que aparece.
www.magix.es
 Trabajar con colores 191

• O arrastra y suelta un color de la línea de color sobre el EDITOR DE COLOR .

• O bien arrastra y suelta un color de la GALERÍA DE COLORES (explicado más
adelante) sobre el 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 en todas las páginas de
tu documento.

Renombrar colores con nombre

Mientras editas un COLOR CON NOMBRE, haz clic derecho sobre el EDITOR DE COLOR y
selecciona RENOMBRAR

• O haz clic izquierdo sobre el color en la línea de colores y escoge RENOMBRAR .

Eliminar colores con nombre

Para eliminar un color con nombre, haz clic sobre el color en la línea de colores y
selecciona ELIMINAR .

Eliminar colores no utilizados

Para eliminar los colores no utilizados de la Línea de color, abre la galería de colores y
selecciona una gama de colores (haz clic sobre uno y Shift+clic sobre otro), después
pulsa el botón Eliminar. Se te preguntará si quieres eliminar solamente los colores no
utilizados. Sin embargo, ten en cuenta que los colores con nombre no utilizados, se
eliminarán automáticamente cuando se guarda o carga un documento.

Importación de colores con nombre

Al importar un diseño al documento actual (p.ej. al importar desde la GALERÍA DE
DISEÑOS , importar de un archivo XAR o pegar objetos de otro diseño), si alguno de los
nombres de los colores importados coincide con el nombre de los del diseño actual,
pero mantiene diferentes valores de color, aparecerá una alerta como la siguiente:

Si deseas que lo objetos importados adopten los colores de tu diseño actual, elige la
opción “IGUALAR ”. Esto hace que todos los objetos que usan un nombre de color dado
utilicen la muestra existente de dicho color tal y como aparece en el documento
actual.
192

Si por el contrario deseas que los objetos importados mantengan sus propios colores,
selecciona la opción “NO IGUALAR ”. Así se añaden nuevos nombres de colores a tu
diseño, con un número añadido al nombre de los colores para distinguirlos de los
colores que ya están en el diseño actual. De esta forma los objetos importados
mantendrán sus propios colores.

Observa que si importas objetos de múltiples diseños diferentes y eliges siempre “NO
IGUALAR ”, acabarás con un gran número de nombres de colores diferentes en tu línea
de color. Esto casi nunca resulta útil. Por ello una alternativa mejor es usar la función
"Reemplazar color" descrita arriba para cambiar los colores de los objetos donde no
quieras que adopten los colores tema de tu documento.

La misma entrada se muestra si hay diferencias en la definición del "estilo de texto"

entre el documento y el diseño importado. Ver esta entrada no significa
necesariamente que haya diferentes definiciones del nombre de color: podría deberse
tan solo a diferencias de "estilo de texto". Consulta la sección de "Estilos de texto" del
capítulo de "Manejo de texto" para más detalles.

La entrada de "igualar" arriba incluye una casilla de “NO PREGUNTARME DE NUEVO”. Si

haces clic aquí, la opción que elijas se aplicará a todas las importaciones futuras sin
preguntarte de nuevo. Sin embargo esto solo se aplica durante la sesión actual, por lo
que después de reiniciar el programa se te preguntará de nuevo, en relación a la
próxima importación, cuando haya alguna discrepancia con los colores.

Usar la opción IGUALAR significa que puedes escoger una plantilla, cambiar sus
colores de tema, importar a continuación más plantillas del mismo tema y los diseños
importados adoptarán automáticamente los colores de tema que has modificado.

Por ejemplo, importa un botón gráfico rojo de la GALERÍA DE DISEÑOS , cambia su color
de tema principal de rojo a verde, luego importa un logo gráfico rojo del mismo tema y
elige la opción “IGUALAR” . Cuando el logo aparece en tu diseño, en vez de ser rojo
habrá recogido automáticamente el color de tema verde escogido. Como en la
mayoría de los temas el nombre del color de tema principal es "Color de tema 1",
también obtendrás buenos resultados al importar gráficos de diferentes temas e
igualando los colores.

Convertir color con nombre en local para frame/capa

Cuando pulsas este botón, se crea un nuevo color con nombre que es idéntico
al que que has seleccionado.
Este nuevo color será aplicado a todos los objetos en el frame o capa actual que utiliza
el color con nombre seleccionado. Esto significa que con un clic puedes localizar para
frame/capa. Entonces puedes editar el color original y el localizado por separado. Esta
opción es útil cuando estás creando animaciones y quieres que el color de un objeto
cambie a medio camino de la animación. Este botón se oscurece a no ser que estés
editando un color con nombre que también es usado en otro frame o capa.

www.magix.es
 Trabajar con colores 193

Colores normales, tintes, tonalidades y colores

vinculados
Colores normales
Estos son los colores individuales que aplicas a los objetos.

MAGIX Web Designer 11 Premium 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.

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.
194

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 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 187)).

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.

www.magix.es
 Trabajar con colores 195

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
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 .
196

Trabajar con textos

Introducción
Las opciones de edición de texto de MAGIX Web Designer 11 Premium 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 11 Premium: 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.

www.magix.es
 Trabajar con textos 197

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
Estilo
Negrita
Cursiva
Subrayado
198

Barra de información de la HERRAMIENTA DE TEXTO , lado derecho

Justificar
Superíndice/Subíndice
Espaciado de línea
Lista con viñetas
Lista numerada
Quitar sangría
Colocar sangría
Corrector de ortografía
Espaciado de párrafos

MAGIX Web Designer 11 Premium 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.

www.magix.es
 Trabajar con textos 199

Menú de fuente

Popup de tamaño de fuente en tiempo real

Fuentes usadas en el documento actual
Fuentes compatibles con la web
Fuentes de Google
Todas las fuentes instaladas
Variantes de estilo disponibles para la fuente seleccionada. No todas las fuentes
tienen variantes

El menú de fuente muestra todas las fuentes instaladas y está dividido en cuatro
secciones. El apartado superior muestra las fuentes que se están usando actualmente
en el documento. El segundo apartado muestra las fuentes compatibles con la web.
Estas son las fuentes que puedes usar sin problemas para las páginas web, ya que son
200

admitidas por los navegadores y dispositivos más comunes. Consulta el apartado

"Fuentes compatibles con la web". La tercera sección muestra las fuentes de Google
disponibles que también pueden usarse de forma segura en la páginas web, y la
sección final presenta una lista alfabética de todas las fuentes instaladas. Cada
nombre de fuente se visualiza en el menú usando su propio tipo de letra, lo que hace
más fácil la selección.

Aquellas fuentes para las cuales están disponibles varios estilos se muestran con
pequeños triángulos negros en el lado derecho del menú. Tan solo mantén el cursor
del ratón sobre el nombre de una fuente durante un segundo o dos y aparecerá un
pequeño submenú a la derecha del menú principal que proporciona una lista de las
variantes disponibles de esa fuente. Mientras se visualiza el submenú puedes mover
el cursor del ratón por encima para seleccionar la variante de la fuente deseada.

Fuentes compatibles con la web

Estas fuentes son compatibles para su uso en páginas web porque la inmensa
mayoría de los PCs y otros dispositivos las tendrán instaladas. También puedes usar
cualquiera de las cientos de fuentes de Google en tu página. Incluso puedes usar otras
fuentes que tengas instaladas, siempre que la licencia de la fuente lo permita:
consulta la sección FUENTES PARA PÁGINAS WEB incluida abajo.

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

www.magix.es
 Trabajar con textos 201

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. En 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".

Fuentes de Google
Web Designer te da la opción de usar una de las cientos de fuentes Google. Son
fuentes web de fuentes abiertas y gratuitas que tienen la ventaja de estar presentadas
por Google, por lo que no tienes que cargar archivos de fuentes con tu página web: tu
navegador buscará las fuentes directamente en los servidores alojamiento de fuentes
de Google.

Las fuentes están totalmente integradas en Web Designer, por lo que puedes navegar
y buscar a lo largo de la lista de fuentes utilizando el BUSCADOR DE FUENTES para
descargarlas e instalarlas en tu propio PC.
Para comenzar a usar fuentes Google, tan
solo haz clic en AÑADIR del menú de
fuentes para detener el buscador de
fuentes.

El buscador de fuentes de Google muestra

alguna de las fuentes disponibles y familias de
fuentes.

Puedes buscar fuentes introduciendo el

nombre de fuente en la casilla de
búsqueda o desplázarte hacia abajo por la
lista para encontrar una fuente adecuada.
Restringe tu búsqueda seleccionando
estilos de fuente en las listas de casillas a
la izquierda y usa la barra de desplazamiento con vista previa para ver la fuente en
diferentes tamaños.
202

Haz clic en la fuente elegida y se te preguntará si quieres descargarla e instalarla. En

muchos PC Windows, y dependiendo de tu configuración Windows, se solicitará
permiso para la instalación, que realiza un programa de instalación de fuentes
independiente. Cada fuente que instales aparecerá en la sección fuentes de Google
del menú de fuentes.

Algunas fuentes Google, como EXO, proveen una amplia gama de pesos En estos
casos el significado de la opción "Negrita" cambia ligeramente. Los valores de peso de
las fuentes pueden estar entre 100 (fuentes muy ligeras o delgadas) a 900 (fuentes
muy pesadas o negras). En lugar de seleccionar siempre un peso de negrita dado, al
aplicar negrita (pulsando el botón "B", o usando "Ctrl+B" cuando se edita el texto)
sucede lo siguiente:

Peso del texto principal Peso seleccionado cuando se aplica

"B"

100 a 300 (Delgado/Extra ligero/ligero 400 (Normal)

500 a 500 (Normal/Medio 700 (Negrita)

600 a 900 (Seminegrita/Negrita/Extra etc.) 900 (Negro)

Por supuesto, no tienes por qué utilizar las fuentes exclusivamente para páginas web.
Como las fuentes son TrueType también se pueden usar en cualquier documento (p.
ej. un PDF).

Si envías otro usuario de Web Designer un archivo .xar o .web que contenga fuentes
de Google, se les preguntará, respecto a como cargar el documento, si quieren
descargar e instalar la fuente.

Nota: algunos navegadores no renderizan fuentes de Google tan efectivamente

como otros, por lo que es siempre una buena idea probar tus páginas web con varios
navegadores para asegurarte de que la calidad de las fuentes es aceptable.

Símbolos de la fuente Font Awesome

Los símbolos de la fuente Font Awesome son una amplia selección de iconos
expansibles. Puedes insertarlos en el texto o en tu documento como gráficos
independientes.

Los símbolos se dividen en varias categorías como iconos de aplicación web, iconos
de marca, iconos de editor de texto, iconos direccionales, etc. y se pueden encontrar
en el MENÚ "INSERTAR" > "SÍMBOLOS DE FUENTE FONT AWESOME" Tan solo desplázate
hacia abajo para ver la lista completa.

www.magix.es
 Trabajar con textos 203

Algunos de los símbolos de la fuente Font Awesome.

Insertar símbolos en el texto

Coloca el cursor de la HERRAMIENTA DE TEXTO en el punto del texto donde quieres
colocar el icono y haz clic en un icono de la colección. El carácter del símbolo se
inserta en el texto.

Cuando insertas símbolos en el documento de esta forma, los caracteres de símbolos

usan la fuente Font Awesome. Si posteriormente publicas tu documento como HTML,
verás un cuadro que te advierte que la fuente Font Awesome será publicada con tu
documento o en tu página web porque requiere dicha fuente. Esto no supone ningún
problema, ya que la licencia de la fuente Font Awesome permite tal uso.

El símbolo de Font Awesome insertado como fuente usando la herramienta de texto

Insertar símbolos como gráficos

Para insertar un icono como un gráfico de vector expansible tan solo tienes que
asegurarte de que el cursor de texto no está presente antes de hacer clic en el
símbolo que se debe insertar. Para quitar el cursor de texto, cambia a la herramienta
de selección o a otra herramienta excepto la herramienta de texto.

El símbolo aparecerá en el centro del espacio de trabajo (ten en cuenta que puede
estar tras el diálogo de Font Awesome). Usa la herramienta de selección para moverla
donde quieras en tu documento o redimensionarla, etc.
204

Cuando insertas un símbolo de esta forma, tu documento ya no necesita la fuente

Font Awesome porque se ha convertido en un gráfico o inserción. De esta forma, si
publicas un HTML no verás la advertencia de la fuente Font Awesome mencionada
anteriormente.

Símbolo Font Awesome insertado como gráfico

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.

El texto básico no es adecuado para grandes párrafos, ya que no hay salto de línea
automático (puesto que el ancho es ilimitado). Usa mejor una columna de texto o un
área de texto en su lugar (ver más abajo).

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 ancho de línea). Probablemente
querrás establecer el tipo de unión de línea (en la página 168) para redondearla y
darle un aspecto más suave (controlen la parte superior de la GALERÍA DE LÍNEAS ).

El ancho de línea está definido Cambiar el ancho de línea (el grosor) (en la página
165). La aplicación de color está descrita en Manejo de colores (en la página 179).

Puedes seguir introduciendo texto incluso después de la rotación o de haber aplicado

un relleno o ajustado el texto a una línea.

www.magix.es
 Trabajar con textos 205

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 11 Premium. Copiar y pegar es compatible con el
texto con formato RTF.

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.
206

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 11 Premium (en la página 94).

Á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. 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.

Conexión de áreas de texto, flujo de texto

Cuando un texto sobrepasa la parte inferior del área de texto, aparece una flecha roja
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.

Área de texto en exceso sobre el área de texto con la flecha roja.

www.magix.es
 Trabajar con textos 207

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. O haz clic en la flecha de flujo en la parte inferior del área de texto y
selecciona DESVINCULAR FLUJO DE TEXTO .

Si eliminas un área de texto que está conectada con otra, solo se eliminará el área. El
texto volverá a fluir a las áreas de texto restantes.

Páginas de múltiples columnas

Puedes usar dos o más áreas de texto en tu página, vinculadas tal como se
describe arriba, para crear un diseño de página de múltiples columnas. Sin
embargo, Web Designer te ofrece una forma más rápida de hacerlo.
Selecciona el área de texto que quieres colocar en varias columnas o coloca
el signo de intercalación en él y haz clic en el botón COLUMNAS de la barra de
información de la HERRAMIENTA DE TEXTO . O haz clic derecho sobre el texto y
escoge COLUMNAS… del menú contextual.

Aparecerá el diálogo de
columnas...

Diálogo de columnas

Por defecto, la cantidad de columnas que se muestran coincidirá con la cantidad de

áreas de texto vinculadas de la página actual. No obstante, puedes cambiar este
número para adaptarlo a la cantidad de columnas que quieres incluir. Si quieres un
diseño de 3 columnas, introduce 3. También puedes especificar el tamaño del espacio
entre las columnas. Cuando hayas finalizado, pulsa CONVERTIR . Tus áreas de texto se
transformarán en un conjunto de columnas con espacios iguales.
208

El ancho total del conjunto de áreas de texto se mantiene cuando utilizas el diálogo de
columnas, por lo que si las áreas de tu texto original cubrían únicamente la mitad
izquierda de tu página, las columnas creadas también cubrirán esa mitad. Por lo tanto,
si quieres que las columnas abarquen todo el ancho de la página, mueve o
redimensiona las áreas de texto de forma que cubran todo el ancho y luego utiliza el
diálogo de columnas para que estas tengan el mismo tamaño y espaciado.

Una página de 1 columna transformada en una página de 3 columnas.

También puedes utilizar el diálogo de columnas para reducir la cantidad de columnas

de la página si así lo deseas.

En el caso de que el mismo arreglo de columnas se encuentre en otras páginas (y

correspondan al mismo flujo de texto), se te preguntará si quieres aplicar los cambios
a las columnas de todas esas páginas también (tal como se describe en los cambios
de áreas de texto). Es decir, que si usas el diálogo de columnas podrás convertir de
inmediato un documento entero de una sola columna en un documento de múltiples
columnas, o viceversa, siempre que el flujo de texto sea único.

Saltos de columna
Inserta un salto de columna en un área de texto usando la HERRAMIENTA DE TEXTO
para hacer clic derecho en el punto del texto en el que quieres introducir el salto.
Luego selecciona "INSERTAR" > "SALTO DE COLUMNA" . O utiliza el shortcut
(Ctrl+Shift+Intro).

www.magix.es
 Trabajar con textos 209

Un salto que se inserta en la mitad de la columna central (izquierda) desplaza el texto a la

siguiente columna (derecha).

Todo el texto después del salto de columna aparecerá en la siguiente área de texto
vinculada del flujo actual, ya sea en la misma página o en la siguiente.

Saltos de página
Inserta un salto de página en un área de texto usando la HERRAMIENTA DE TEXTO para
hacer clic derecho en el punto del texto en el que quieres introducir el salto. Luego
selecciona "INSERTAR" > "SALTO DE PÁGINA" . O utiliza el shortcut (Ctrl+Intro).

Todo el texto después del salto de página aparecerá en la siguiente área de texto
vinculada en la próxima página.

Cambiar el tamaño de las áreas de texto

Con 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. Si cambias el tamaño de un área de texto con la
HERRAMIENTA DE SELECCIÓN , ocurre lo mismo: el texto en sí mismo no cambia de
tamaño sino solo el área de texto; el texto se reacomoda para adaptarse al nuevo
tamaño. Si lo que deseas es modificar el tamaño del texto del área de texto, ve a la
HERRAMIENTA DE TEXTO , selecciona todo el texto con Ctrl+A y cambia el tamaño de
fuente en la barra de información de HERRAMIENTA DE TEXTO .

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.
210

El flujo del texto no se ve afectado si giras una de las áreas de texto.

Mantén pulsada la tecla "Ctrl" mientras giras para limitar el ángulo de rotación a 90°
y a los ángulos alineados a la pantalla. Si usas la herramienta de texto, puedes hacer
clic y arrastrar los controles deslizantes de las esquinas. El texto del área cambiará de
formato para ajustarse al nuevo tamaño. Si modificas el tamaño de un área de texto
con la herramienta de selección ocurre lo mismo: el texto en sí mismo no cambia de
tamaño sino solo el área; el texto se reacomoda para adaptarse al nuevo tamaño. Si lo
que deseas es modificar el tamaño del texto del área de texto, ve a la herramienta de
texto, selecciona todo el texto con Ctrl+A y cambia el tamaño de fuente en la barra de
información de herramienta 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.

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

www.magix.es
 Trabajar con textos 211

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 179).

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.

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
212

• 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á.

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 525) 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.

www.magix.es
 Trabajar con textos 213

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.

Corrector ortográfico
La HERRAMIENTA DE TEXTO incluye un corrector de ortografía: haz clic en el
icono de CORRECTOR DE ORTOGRAFÍA/AUTOCORRECCIÓN en la barra de
información de la HERRAMIENTA DE TEXTO y verás un menú desplegable.

Para usar el corrector de ortografía selecciona

"REVISAR ORTOGRAFÍA MIENTRAS SE ESCRIBE ".
Ahora todas las palabras de tu documento que
no se reconocen y aquellas que vas escribiendo
aparecen subrayadas con una línea de guiones.
Para corregir un error ortográfico, haz clic
derecho y el menú contextual te sugerirá
opciones. Selecciona simplemente una de las
sugerencias para sustituir la palabra subrayada.
ff

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.
214

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 11 Premium pueden añadirse a tu propio
diccionario 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.

Autocorrección
Haz clic en el símbolo de CORRECTOR ORTOGRÁFICO/AUTOCORRECCIÓN de la
barra de información de la HERRAMIENTA DE TEXTO para utilizar la función de
autocorrección. Escoge OPCIONES DE AUTOCORRECCIÓN... del menú
desplegable.

Se abrirá un cuadro de diálogo que te permitirá añadir y reemplazar palabras, así

como símbolos del teclado, por símbolos del catálogo de fuentes Awesome (en la
página 202). Esta función siempre está activada por defecto pero puedes desactivarla
dentro del cuadro de diálogo.

Está disponible una selección de elementos útiles y también puedes añadir los tuyos.
Haz clic en AÑADIR para crear un nuevo campo y luego escribe una palabra o carácter
en la columna REEMPLAZAR , a continuación haz clic en la columna CON para introducir
una sustitución, o haz clic en ELEGIR SÍMBOLO para elegir un reemplazo del catálogo de
FUENTES AWESOME . El símbolo que escojas aparecerá en la columna CON . Haz clic en
ACEPTAR para cerrar el cuadro de diálogo.

Ahora cuando escribas una palabra o carácter de la lista de opciones, se reemplazará

por tu palabra, carácter o símbolo alternativo.
www.magix.es
 Trabajar con textos 215

Entonces, por ejemplo, si deseas que al escribir “Rwd” se reemplace automáticamente

por "diseño web adaptativo", simplemente pulsa el botón AÑADIR e introduce "rwd"
en el campo REEMPLAZAR y "diseño web adaptativo" en el campo CON . Todo el texto
del cuadro de diálogo debe escribirse en minúsculas, pero el reemplazo intenta ser
inteligente respecto al uso de mayúsculas o minúsculas.

Entonces, si escribes...

• "RWD" se reemplazará por "DISEÑO WEB ADAPTATIVO"

• "rwd" se reemplazará por "diseño web adaptativo"
• "Rwd" se reemplazará por "Diseño Web Adaptativo"

Buscar y reemplazar
La función Buscar y reemplazar realiza una búsqueda en vivo para que a medida que
buscas algo, el texto se explora y se marca en tiempo real.

Para buscar texto, selecciona en el menú EDITAR > BUSCAR/REEMPLAZAR... o pulsa

CTRL+ALT+F y verás el siguiente diálogo:

Introduce la palabra de búsqueda y se resaltará en el texto. Puedes escoger buscar

solamente en la historia o página actual o en todo el documento (el texto fluye por
todas las páginas).

La opción TODA LA PALABRA buscará solamente todas las palabras que coincidan con
el texto de búsqueda. Por ejemplo, si buscas la palabra, "met", no se resaltará "metro".
La opción COINCIDIR MAYÚSCULAS Y MINÚSCULAS solamente buscará la letra exacta.
Si buscas, por ejemplo, "aBc" en esta opción, no encontrarás "abc".
216

Cómo sincronizar el texto empleando Grupos

suaves
En algunos diseños es posible que necesites que múltiples objetos de texto muestren
siempre el mismo texto, pero con estilos diferentes. 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 escoge
"ARREGLAR" > "APLICAR GRUPO SUAVE" ("Ctrl + Alt + G").

Ahora, cuando edites el texto de un objeto, los demás se actualizarán

automáticamente, aún cuando se encuentren en otras capas diferentes del
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 "
("Ctrl + Alt + U"). Lee la sección de grupos suaves del capítulo Manejo de objetos (en
la página 134) 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.

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.

www.magix.es
 Trabajar con textos 217

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

218

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).

www.magix.es
 Trabajar con textos 219

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. 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.
220

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.
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 11 Premium sea rodeado
por texto, de modo que el texto fluya alrededor del objeto, en vez de aparecer debajo.
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, puedes
ajustar las posiciones de gráficos y fotos, y el texto se adaptará automáticamente y
fluirá alrededor de ellos.

Puedes escoger que el texto rodee solamente en una capa, lo que evita que el texto lo
haga en las otras capas y, además, evita que los objetos de capas superiores rodeen al
texto.

www.magix.es
 Trabajar con textos 221

Hacer que un objeto se rodee de texto

Para que el texto rodee al objeto, haz clic derecho y selecciona la opción CONTORNEAR
TEXTO . El texto de la misma capa que se encuentre debajo del objeto, lo rodeará con
un margen por defecto de 5 píxeles entre el texto y el objeto. 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.

Como alternativa, haz clic derecho sobre el objeto y selecciona CONTORNEO Y

ANCLAJE DE TEXTO para ver el diálogo correspondiente.

Haz clic en la casilla CONTORNEAR TEXTO ALREDEDOR DE ESTE GRÁFICO.

Si lo deseas, establece un margen para la distancia entre el texto y el objeto. Si deseas

una altura y un ancho diferentes para el margen, haz clic en el símbolo de candado e
ingresa el margen de altura en H (horizontal) y el ancho en V (vertical). Haz clic en
OK .

Para desactivar que el texto rodee al objeto, haz clic derecho sobre el objeto y vuelve
a escoger CONTORNEAR TEXTO para desactivarlo. O haz clic derecho y selecciona
CONTORNEO Y ANCLAJE DE TEXTO para ver el diálogo correspondiente. Haz clic en la
casilla CONTORNEAR TEXTO ALREDEDOR DE ESTE GRÁFICO para desactivar la opción y
haz clic en ACEPTAR .

Ten en cuenta que las líneas individuales de texto no responden al contonear objetos,
solo lo hacen las áreas con texto y columnas de texto.

Para que el texto texto fluya alrededor del objeto solamente en su misma capa,
consulta Propiedades de capa (en la página 426).
222

Gráficos anclados
Puedes colocar 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. Sin embargo, el anclaje se debería usar para objetos que están fuera
de los márgenes del texto (p. ej. una foto que está a la derecha d izquierda de una
columna de texto), o tras el texto. Usa la incrustación para objetos que estén dentro
de los límites del texto (ver abajo).
1. La forma más rápida de anclar un gráfico o un grupo es hacer clic y escoger la
opción ANCLAR AL TEXTO. Sin embargo, si quieres también editar las propiedades
de anclaje, puedes hacer clic en el objeto y seleccionar CONTORNEO Y ANCLAJE DE
TEXTO para ver el diálogo del mismo nombre.
2. Haz clic en la casilla MOVER GRÁFICO CON EL TEXTO.
3. Por defecto, la opción MOVER SOLO VERTICALMENTE también está seleccionada,
de forma que el gráfico anclado se moverá solamente en sentido vertical a
medida que se edite el texto. Esta es normalmente la opción más útil: si quieres
que el objeto siga la posición de anclaje también horizontalmente, fijar el objeto
es por lo general una opción mejor.
4. Un símbolo de ancla aparecerá en la parte superior izquierda del objeto para
indicarte que está anclado.
5. Con la HERRAMIENTA DE SELECCIÓN o la HERRAMIENTA DE TEXTO, haz clic y
arrastra el símbolo de ancla hasta que aparezca una flecha roja.
6. Mueve el extremo de la flecha y suéltala en la ubicación en la que quieres anclar
el objeto. Un signo de intercalación (una "T" invertida) te indicará la posición de
anclaje.
7. A medida que edites el texto alrededor de este signo de intercalación, el punto
de anclaje y el objeto de anclaje se moverán junto con el texto.

Un objeto anclado muestra un símbolo de anclaje y una flecha que señala al punto de anclaje,
marcado con un signo de intercalación. Estos desaparecerán mientras escribes, salvo que te
encuentres cerca del punto de anclaje.
www.magix.es
 Trabajar con textos 223

Nota: si arrastras la flecha de anclaje a un lugar de la página en la que no hay texto,

la flecha se convertirá en un ancla roja que indica que las propiedades de anclaje del
objeto se perderán si lo sueltas allí. Esto también ocurre cuando la flecha se suelta
en el mismo objeto.

Sin embargo, ten en cuenta que el objeto anclado no se moverá fuera del área de la
página como resultado de mover el punto de anclaje. El objeto anclado solo se moverá
hasta el borde de la página.

Este 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.

Es posible anclar cualquier objeto o grupo de gráficos, incluyendo grupos con texto,
como el ejemplo del panel lateral, que se muestra arriba.

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 arriba, está anclado de esta
forma y fluirá junto con el texto.

NOTA : si un objeto anclado también está configurado para que el texto se contornee,
solo ocurrirá con el texto respecto del que el objeto está anclado.
224

NOTA : el contorno de texto es restringido para los objetos que se repiten; el texto
dentro de un grupo repetido se contorneará solamente respecto de los objetos
dentro del grupo repetido. Los objetos individuales con configuración de contorneo
dentro de un grupo repetido, solamente lo hacen respecto del texto dentro del grupo
repetido. Los grupos repetidos como un todo pueden contornear cualquier texto que
se encuentre debajo del grupo en la página.

Mover objetos anclados

Cuando agregas o eliminas texto, el objeto se mueve a medida que el texto fluye, pero
siempre mantendrá su posición relativa respecto al punto de anclaje. Puedes mover
un gráfico anclado arrastrándolo de la forma usual. Esto cambia su posición relativa
respecto del punto de anclaje, pero no mueve el punto de anclaje, que permanece
visible al final de la flecha del símbolo de anclaje si haces clic y mueves el gráfico.

Si quieres mover el punto de anclaje a otra ubicación dentro del texto, haz clic y
arrastra el símbolo de anclaje para crear una nueva flecha y arrastrarla a su nueva
ubicación.

Si cortas y pegas el texto que contiene el signo de intercalación, el objeto anclado

también se cortará y pegará.

Visualización del punto de anclaje

El punto de anclaje del texto anclado solamente es visible si haces clic en el objeto
anclado con la HERRAMIENTA DE SELECCIÓN o si haces clic en el área que rodea al
texto en la HERRAMIENTA DE TEXTO.

Cuando haces clic en una región de texto con la HERRAMIENTA DE TEXTO , se

mostrarán los puntos de anclaje con el símbolo de la "T" invertida y una flecha desde
el punto de anclaje hasta el símbolo de anclaje en la parte superior izquierda de cada
objeto anclado. Entonces, la forma más sencilla de ver todos los puntos de anclado
para cualquier texto es hacer clic en él con la HERRAMIENTA DE TEXTO.

Sin embargo, cuando comienzas a editar el texto, el signo de intercalación, la flecha y

el símbolo de anclaje desaparecen temporalmente hasta que dejas de escribir. Si te
encuentras cerca del punto de anclaje, Web Designer muestra el signo de
intercalación, junto con la flecha que señala al símbolo de anclaje para indicarte que te
encuentras cerca.

Grupos suaves (soft groups, en inglés)

Puedes pegar Grupos suaves (en la página 134) 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.

www.magix.es
 Trabajar con textos 225

Eliminar un ancla
Para eliminar un ancla de un objeto, haz clic derecho y selecciona nuevamente
ANCLAR AL TEXTO para desactivar la opción. Ahora, cuando hagas clic en el objeto con
la HERRAMIENTA DE SELECCIÓN o en el texto en la HERRAMIENTA DE TEXTO, ya no verás
el símbolo de anclaje.

Gráficos incrustados
Puedes insertar un objeto en el texto para que se comporte igual que un carácter.
Simplemente copia el objeto al portapapeles ("Ctrl+C"), ve a la herramienta de texto,
coloca el cursor de texto en la posición en la que quieres insertar el objeto y pégalo
("Ctrl+V").

Puedes seleccionar, copiar, pegar y eliminar el objeto incrustado junto con el texto
que lo rodea, al igual que si fuera un carácter de texto. Sin embargo, también puedes
seleccionarlo y transformarlo con la herramienta de selección.

Te recomendamos utilizar esta técnica de incrustación en vez del anclaje, porque es

más eficiente en términos del proceso requerido para dar formato al texto.

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 ingresar rápidamente listas con viñetas o numeradas.
Puedes hacer clic derecho sobre una lista numerada y escoger PROPIEDADES DE LA
LISTA… del menú contextual para cambiar el orden del esquema de números en tu
lista. También puedes usar cualquier gráfico como viñeta o número de tu lista.
Consulta el capítulo Herramienta de texto (en la página 196) para más información.

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 pulsas "Intro" al

finalizar una línea al final de la viñeta, la próxima línea también comenzará con una
viñeta.
226

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.

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.

www.magix.es
 Trabajar con textos 227

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.

Lista con viñetas y números con gráficos

Puedes usar cualquier gráfico para las viñetas o números de una lista. Puedes diseñar
listas con tus propias viñetas o números con las herramientas de dibujo o texto, o bien
con los diseños de viñetas de la galería de diseños (en ELEMENTOS DE PÁGINA>
ELEMENTOS GRÁFICOS > VIÑETAS ). Por ejemplo, puedes crear un círculo simple con la
herramienta de elipse, rellenarlo, aplicarle una sombra y copiarlo en el portapapeles.
Luego destaca con la herramienta de texto la lista a la que quieres aplicar el estilo.
Haz clic derecho sobre la lista y escoge Pegar como viñeta del menú. El diseño
aparecerá como una viñeta para cada entrada de la lista.

En el caso de una lista numerada, el procedimiento es el mismo, salvo que agrupas un

elemento de texto con tu gráfico y luego escoges Pegar como número para sustituir
los números o elementos de texto de tu lista. El objeto de texto en el grupo se utiliza
para mostrar el número.

Estilos de texto
Los ESTILOS DE TEXTO son una forma muy útil de modificar la apariencia del texto en
todo el documento con unos pocos clics.

Un ESTILO DE TEXTO es un conjunto con nombre de atributos, como fuente, tamaño,

color, espaciado y otras propiedades de texto. Por ejemplo, el encabezado principal al
comienzo de este documento puede tener un estilo llamado "Encabezado 1", el
subencabezado más pequeño, como el de esta sección, y todos los encabezados de
sección equivalentes, un estilo llamado "Encabezado 2"

Al actualizar la definición de "Encabezado 2", por ejemplo, a una fuente diferente,

todos los encabezados similares se actualizarán instantáneamente.

Lo mismo ocurre con el texto principal, que muchas veces se denomina "cuerpo de
texto", tiene un estilo en particular, que en Web Designer se llama "Texto normal". Al
228

actualizar ese estilo para que su fuente sea, por ejemplo, Times New Roman de 12
puntos, todo el "Texto normal" del documento puede cambiarse de una sola vez, sin
tener que seleccionar y aplicar el mismo cambio de fuente una y otra vez.

Los ESTILOS DE TEXTO serían, entonces, como la función "Colores con nombre" que
también es compatible con Web Designer, en la que puedes actualizar el "Color tema
1" a un nuevo color para que todas las partes del documento que utilicen ese color lo
cambien al nuevo.

Barra de información de estilos de texto

En la BARRA DE INFORMACIÓN DE LA HERRAMIENTA DE TEXTO hay un menú desplegable
de estilos que te permite crear estilos, aplicarlos a cualquier texto y actualizar la
definición del estilo.

Por defecto, hay un pequeño grupo de estilos predefinidos, incluyendo el "Texto normal" y tres
estilos de encabezado, del Encabezado 1 al 3.

Estilo de párrafo y estilo de carácter

Los estilos de texto están disponibles en dos variedades. Estilos de párrafo y estilos
de carácter.

Un estilo de párrafo se señala con el símbolo ¶ en el menú de estilo. Un símbolo A

señala un estilo de carácter.

Los estilos de párrafo se aplican a todo el apartado y también se utilizan para

encabezados. No es posible aplicar un estilo de párrafo a una sección más pequeña
que un párrafo. Es decir, que no puedes aplicar un estilo de párrafo a una sola palabra
dentro de un apartado. Si lo intentas, entonces todo el párrafo cambiará a este estilo.

Simplemente coloca el cursor de texto en cualquier lugar de la línea y selecciona un

estilo de párrafo del menú de estilos: todo el párrafo cambiará a ese estilo.

Por otra parte, los estilos de carácter pueden aplicarse a cualquier sección del texto,
incluso a un solo carácter. Por ejemplo, si quieres destacar algunas palabras de tu
texto con un color diferente, el estilo de carácter te vendría ideal. La ventaja es que

www.magix.es
 Trabajar con textos 229

puedes cambiar luego el color (o fuente, etc.) de todas estas palabras destacadas con
solo actualizar el estilo.

Crea un estilo de carácter haciendo clic en CREAR ESTILO en el menú desplegable

Estilo y activa la opción ESTILO DE CARÁCTER del cuadro de diálogo para crear un
nuevo estilo de texto. Para más información consulta Creación de nuevos estilos.

En los estilos de párrafo pueden definirse todos los atributos de texto, salvo las
propiedades de las listas numeradas o con viñetas. Los estilos de carácter solo
pueden definir atributos de texto que pueden aplicarse a un solo carácter, como
color de texto, tamaño y grosor de fuente, etc.

Actualización de los estilos de texto

Para actualizar una definición de estilo:

1. selecciona un poco de texto que tenga el estilo que quieres actualizar.

2. Aplica los cambios que deseas, como otra fuente o tamaño de fuente.
3. Selecciona "Actualizar estilo" del menú desplegable de estilos en la barra de
información de texto.

Por ejemplo, para cambiar todo el "Texto normal" a otra fuente, selecciona algunas
palabras del estilo "Texto normal", cambia la fuente (y cualquier otro atributo) y luego
selecciona "Actualizar estilo" "Texto normal" del menú de estilos de la barra de
información de la herramienta de texto.

Cuando tienes páginas de la variante RWD, se puede actualizar el estilo de texto para
una variante individual. Esto es útil, por ejemplo, cuando necesitas que el texto de una
variante de móvil sea más o menos grande o de una fuente diferente. Para actualizar
el estilo de una variante individual, cambia el texto como arriba y selecciona
ACTUALIZAR ESTILO EN ESTA VARIANTE del menú desplegable Estilo en la barra de
información Texto. Ver Diseño de web adaptativo (en la página 297) para más
información sobre variantes.

Nota: cuando actualizas un estilo a partir de una selección de texto, el estilo

actualizado vuelve a aplicarse a la selección. Por lo tanto, si seleccionas algunos
caracteres de, por ejemplo, el Encabezado 1, cambias su color y luego actualizas el
estilo "Encabezado 1" todo el párrafo cambiará a este nuevo color (porque es un
estilo de párrafo y solo puede aplicarse a todo el apartado).

Redefinición de estilos de texto

Muchas veces quieres que un estilo de texto existente tenga un aspecto similar a un
texto al que todavía no has aplicado un estilo de texto. Tal vez has importado texto de
algún otro documento. No podrás aplicar el estilo existente a ese texto porque
perdería su aspecto. En su lugar, utiliza la opción ACTUALIZAR OTRO ESTILO PARA QUE
COINCIDA… en el menú de estilo.
230

1. Coloca el cursor de texto dentro del texto (o selecciona parte del texto).
2. Selecciona ACTUALIZAR OTRO ESTILO PARA QUE COINCIDA... del menú desplegable
de estilos en la barra de información de texto.
3. Escoge el estilo que deseas actualizar del cuadro de diálogo ACTUALIZAR ESTILO
PARA QUE COINCIDA... .
4. Activa los recuadros correspondientes para decidir si deseas que el estilo de
texto haga coincidir únicamente el nuevo texto o todo el texto similar del
documento. Quita la selección de APLICAR A TODO EL TEXTO SIMILAR EN ESTE
DOCUMENTO si quieres que el estilo se aplique únicamente al párrafo en donde
se encuentra el cursor de texto.
5. Haz clic en APLICAR. Ahora, has redefinido el texto como el estilo de texto
seleccionado.

La opción APLICAR A TODO EL TEXTO SIMILAR EN ESTE DOCUMENTO es útil para aplicar
estilos de texto a documentos existentes que todavía no utilicen estilos de texto,
como PDF importados. Para poder aplicar un estilo a todo el texto similar del
documento, el texto de más del 50% de un párrafo debe tener la misma fuente y
tamaño de fuente, y también debe tener la misma configuración de alineación y
sangría (con una pequeña tolerancia).

Estilos basados en otros estilos

En Web Designer, puedes crear un estilo a partir de otro. Supongamos que deseas
otra variante del estilo de Encabezado 2 que sea idéntico, pero con otro color; deberás
crear un nuevo estilo a partir del "Encabezado 2" en el diálogo CREAR ESTILO. Esto
significa que si actualizas el "Encabezado 2" para que, por ejemplo, tenga una nueva
fuente o tamaño, el nuevo estilo también tendrá la nueva fuente o tamaño.

Los nuevos estilos de carácter se basan normalmente en el "Estilo de párrafo

subyacente", pero solo con los cambios que deseas. Por lo tanto, esto significa que si
aplicas un estilo de carácter que solo establece el color de texto a una palabra, y luego
alteras el estilo del párrafo, esta palabra cambiará para adaptarse a excepción de su
color.

Creación de nuevos estilos

Para crear un estilo completamente nuevo, selecciona alguna parte del texto al que
quieras aplicar el estilo, escoge el menú CREAR ESTILO del menú desplegable de estilos
o de la BARRA DE INFORMACIÓN DE LA HERRAMIENTA DE TEXTO.

Si deseas crear un nuevo estilo de párrafo, te recomendamos seleccionar y aplicar los

cambios a todo un apartado, antes de seleccionar la opción del menú CREAR ESTILO.

www.magix.es
 Trabajar con textos 231

Este diálogo muestra un nuevo estilo, (NuevoEstilo2) que se crea como ESTILO DE
PÁRRAFO , a partir del estilo ENCABEZADO 2 ya existente. La opción PÁRRAFO SIGUIENTE
determina el estilo que se utilizará cuando comiences a escribir el próximo apartado.

La sección inferior del diálogo muestra la definición completa de este estilo. En este
caso, puedes ver que se basa en el Encabezado 2, con solo un cambio de color.

Para crear un estilo que no se base en ningún otro estilo, es decir, que no herede
ningún atributo de otro estilo, selecciona (Sin estilo) de la opción "Basado en:" tal
como se muestra a continuación.

El diálogo muestra que estoy creando un NuevoEstilo2 que es un estilo de párrafo y

que no me estoy basando en ningún otro estilo. Esta sección inferior enumera todos
los atributos que crean este estilo; en el ejemplo puedes ver que utilicé la fuente
Palatino, de 12 píxeles y que he aplicado sangría. Los otros atributos listados aquí
también se han tomado del texto seleccionado, es decir, que este estilo consiste en
una definición completa con una lista de todo el texto posible. En este caso, al
introducir texto en este estilo, el "Párrafo siguiente" (es decir, cuando pulses Intro)
tendrá el mismo estilo.
232

Eliminación de estilos: los estilos que no se utilizan en ningún lugar de un

documento se eliminan automáticamente al guardar y volver a cargar el documento.
Sin embargo, los estilos por defecto (texto normal y los encabezados de 1 a 3) no se
eliminan jamás.

Eliminación de estilos
La lista de ESTILOS en el menú ESTILOS incluye la entrada SIN ESTILO. Si seleccionas
esta opción, el estilo (de párrafo o de carácter) se quitará de la selección y el texto
regresará al formato por defecto.

Propiedades de estilo
Si quieres cambiar la definición de un estilo, como el estilo en el que se basa, o
simplemente mirar su definición, puedes usar la opción PROPIEDADES… del menú de
estilos. Necesitas seleccionar texto que tenga un estilo aplicado antes de hacerlo a fin
de indicar el texto que deseas editar.

Aparecerá el diálogo PROPIEDADES DE ESTILO, que tiene el mismo aspecto que el

diálogo CREAR ESTILO.

La descripción del estilo en la parte inferior del diálogo describe las diferencias
respecto al estilo en que se basa. Por lo tanto, si deseas ver todos los atributos del
estilo, selecciona temporalmente SIN ESTILO en la listaBASADO EN para ver una
descripción completa. No olvides restablecerlo el estilo correcto en BASADO EN o
hacer clic para cancelar el diálogo si no quieres cambiar el estilo.

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 200).
• 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.

www.magix.es
 Trabajar con textos 233

Negrita y cursiva
Haz clic sobre el botón NEGRITA o CURSIVA de la barra de información
("Ctrl + B" o "Ctrl + I")

Esta opción aplica la variante negrita o cursiva de la fuente actual.

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.

Destacar texto
Para aplicar un color de fondo para el texto, es decir, un color de fondo para destacar
el texto...

• Destaca texto con la HERRAMIENTA DE TEXTO

• Haz clic derecho sobre un color en la LÍNEA DE COLORES .
• Selecciona ESTABLECER FONDO DE TEXTO del menú

Para más detalles, consulta Aplicación de un color de fondo para el texto (en la página
183).

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.
234

Al usar texto simple la posición inicial de clic de la página se toma como origen de
la justificación de texto.

Superíndice y subíndice
Haz clic en el botón apropiado sobre la BARRA DE INFORMACIÓN .
superíndice
Texto normal subíndice

Agregar y quitar sangrías

Agregar sangría a un párrafo de texto.

Quitar sangría a un párrafo de texto.

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.

www.magix.es
 Trabajar con textos 235

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 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. De este modo, ningún texto dentro de un grupo podrá ser
seleccionado y copiado como texto por un visitante de 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, solo 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:
236

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.

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.

www.magix.es
 Trabajar con textos 237

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 11 Premium 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.

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).

Incrustación de fuentes en el documento

MAGIX Web Designer 11 Premium 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 equipo, el texto seguirá teniendo la misma
apariencia, incluso si las fuentes correctas no están instaladas.

Incrustación de fuentes en un sitio web

La mayoría de los documentos de sitios web utilizan únicamente fuentes compatibles
con la web, que son fuentes que están instaladas en la mayoría de los equipos y otros
dispositivos, de forma que pueden utilizarse sin inconvenientes en cualquier página
web. Sin embargo, puedes utilizar casi cualquier fuente en un sitio web (siempre que
los permisos de la fuente te lo permitan), puesto que Web Designer publicará
automáticamente la fuente en tu sitio de forma que el texto aparezca correctamente
en todos los equipos, independientemente de si está instalada o no.

Para ayudar a tu página a cargar de manera más rápida, tan solo se incluyen
caracteres Western en la fuente incrustada, a menos que tu documento use otro tipo
de caracteres también.

Cuando exportes o realices una vista previa de un documento que utiliza fuentes que
no son compatibles con la web, Web Designer te mostrará un aviso con la lista de
fuentes que se incrustarán en tu página web. Esta característica te recordará que tu
238

sitio incluye fuentes incrustadas. También puedes ver qué fuentes se están utilizando
en tu documento junto con sus permisos en "ARCHIVO" > "INFORMACIÓN DEL
DOCUMENTO..." Consulta Permisos de fuentes (en la página 238) para más
información.

Algunas fuentes no permiten la incrustación en un documento ni en una página web.

Web Designer detecta estas fuentes y emite una alerta independiente si intentas
utilizar estas fuentes en un documento de sitio web. En ese caso, deberás cambiar a
una fuente que sea compatible con la web, una fuente de Google o cualquier otra que
sí permita la incrustación.

Permisos de fuentes
Al integrar fuentes existen cuatro niveles de permisos de fuentes, es decir, cuatro
niveles de uso según la licencia de la fuente. Estos cuatro niveles son los siguientes:

1. Instalable: el nivel más permisivo. Permite incorporar la fuente en el documento

e instalarla de forma permanente en el equipo del invitado.
2. Editable: muestra la fuente que se incorporará en el documento, pero solo
permite utilizarla de forma temporal en el sistema.
3. Impresión y vista previa: permite incorporar la fuente en el documento, pero
únicamente para su impresión y visualización.
4. Restringido: la fuente no puede incorporarse en el documento.

Además de las advertencias que Web Designer te muestra con la lista de las fuentes
que se incorporarán en tu sitio web, podrás también ver los niveles de permisos si
miras la INFORMACIÓN DEL DOCUMENTO . Ve a "ARCHIVO" > "INFORMACIÓN DE
DOCUMENTO..." .

Cuadro de diálogo de información del documento que muestra las fuentes junto con sus permisos
de integración.

www.magix.es
 La herramienta de relleno 239

La herramienta de relleno

Crear un relleno de color con gradación

El proceso de creación de un relleno diferente es casi igual para todos los tipos
de relleno:
1. Selecciona el objeto o los objetos a los que quieres aplicar el relleno.
2. Selecciona la herramienta de RELLENO ("G")
3. Selecciona el tipo de relleno del menú desplegable.
4. Haz clic y arrastra hasta el objeto para crear el relleno. O arrastra uno de los
controles deslizantes de relleno para ajustar el tamaño y posición del relleno

MAGIX Web Designer 11 Premium suministra una vista previa interactiva del relleno a
medida que arrastras.

Mientras arrastras, aparecerá una flecha de

relleno que indica la dirección del relleno. Los
controles deslizantes se pueden seleccionar y
arrastrar para ajustar la posición y el ángulo
del relleno.

Relleno de colores
Selecciona uno de los controles deslizantes de relleno y haz clic sobre un color de la
LÍNEA DE COLORES o abre el EDITOR DE COLOR y elige un nuevo color. Puedes pulsar
"Tab" para cambiar entre los controles deslizantes 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.
240

RELLENO ELÍPTICO : similar al relleno circular, salvo que el cambio

se realiza en forma elíptica.

RELLENO CÓNICO : el cambio de color gira alrededor de un punto.

El efecto es de un cono iluminado desde un lado con el lado
opuesto con otro color.
RELLENO DE ROMBOS : similar al relleno elíptico, solo que el
relleno son como rombos.

RELLENO DE TRES COLORES : muestra tres colores diferentes,

como si hubiera luces iluminando el objeto.

RELLENO DE CUATRO COLORES : lo mismo que el relleno de tres

colores, pero con cuatro colores.

RELLENO DE MAPA DE BITS : el objeto se rellena con una o más

copias de un mapa de bits o foto. Todas las fotos que ves en
MAGIX Web Designer 11 Premium son formas con relleno de
mapa bits (por lo general rectángulos, por supuesto). Puedes
utilizar cualquier foto o cualquier mapa de bits de las galerías de
MAPAS DE BITS o RELLENOS .

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 a los objetos

seleccionados, 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. Esto facilitará tu trabajo con 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 la HERRAMIENTA DE SELECCIÓN .

www.magix.es
 La herramienta de relleno 241

Barra de información de herramienta de relleno

Tipo de relleno
Segmentación de relleno
Efecto de relleno
Nombre de mapa de bits
Perfil
Control deslizante/resolución de relleno
Color/grano del control deslizante

TIPO DE RELLENO selecciona el tipo de relleno. Si seleccionas de este menú:

• con un objeto seleccionado, aplica el relleno al objeto
• sin un objeto seleccionado, establece el actual tipo de relleno, el cual se usa para
objetos nuevos dibujados.

SEGMENTACIÓN DE RELLENO se utiliza al aplicar 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.
• Repetir/Mosaico repetido: 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.

Las opciones de segmentación de

relleno no están disponibles para
los rellenos cónicos. Todos los
otros tipos de relleno pueden
repetirse. Esto puede producir
efectos muy útiles.

Un relleno elíptico con repetición dentro de una

forma de elipse

El EFECTO DE RELLENO se utiliza para todos los tipos de rellenos, con excepción de los
rellenos de 3 y 4 colores. Controla el desvanecimiento del relleno desde el color de
inicio al color de fin:
242

• TRANSICIÓN (FADE) :crea una transición entre dos colores de forma lineal.
• ARCO IRIS :
realiza una transición siguiendo el borde más corto del modelo de
color HSV. Por ejemplo, una transición de amarillo a cian será amarillo-verde-
cian.

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
siguiendo 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 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 que necesitas para rellenarlo.

Con el PERFIL DE RELLENO puedes determinar la graduación de la "transición de color"

desde el comienzo y hasta el fin del relleno. Esto se aplica a todos los tipos de relleno,
excepto a los rellenos lisos, los de tres y cuatro colores y los rellenos de mapa de bits
(al menos que sea un mapa de bits con un color de tono continuo). Para cambiar el
perfil de un relleno:

1. Selecciona el objeto con relleno.

2. En la barra de información de la HERRAMIENTA DE RELLENO haz clic en PERFIL . Esto
abrirá el cuadro de diálogo de PERFIL .
3. Selecciona un perfil predefinido de la lista desplegable o arrastra los
deslizadores para crear un perfil personalizado. La opción superior en la lista
desplegable (la línea directa) crea una transición lineal entre el comienzo y el fin
del relleno.

Aquí se ven tres tipos distintos de rellenos con escala de grises con sus correspondientes cuadros
de diálogos de perfil. El del centro, que viene por defecto, es una transición lineal de negro a
negro.

www.magix.es
 La herramienta de relleno 243

CONTROL DESLIZANTE DE RELLENO : 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.

COLOR DE CONTROL DESLIZANTE DE RELLENO (excepto el 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 179).

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 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.
244

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 179).

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.

www.magix.es
 La herramienta de relleno 245

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

333) en el capítulo Trabajar con fotos, para Galería de rellenos, lee más abajo (en la
página 250).

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 11 Premium (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:
246

• 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)
• 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 248). 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. Al hacer esto también se sustituirán las otras instancias de
la foto en la página actual si estas se encuentran en el mismo GRUPO SUAVE .

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á.

www.magix.es
 La herramienta de relleno 247

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.

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).
248

Un ejemplo

Para rellenar la elipse de la izquierda con la foto central:

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 257) para más información.

Relleno fractal
MAGIX Web Designer 11 Premium 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.

www.magix.es
 La herramienta de relleno 249

Relleno fractal con nubes. A la izquierda con valor de grano 1, a la derecha con valor de grano 50.

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.

250

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".

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).

www.magix.es
 La herramienta de relleno 251

• 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.

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 95).

Trabajar con documentos (en la página 95) incluye información general sobre
galerías.
252

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
Tipo de transparencia
Segmentación
Nombre de mapa de bits
Perfil
Control deslizante/Resolución
Cantidad de transparencia

Puedes controlar el nivel de transparencia desde completamente opaco a

completamente transparente. Web Designer, con su amplia gama de gradaciones de
transparencia, te ofrece más que otros paquetes de dibujo.

Puedes aplicar transparencia lisa o con gradación a todos los tipos de objeto,
incluyendo mapas de bits.

Algunos usos de la transparencia:

• Simular agua o vidrio.

• Si quieres que los objetos se desvanezcan en partes de objetos o se mezclen con
el fondo.
• Las transparencias de nubes o de niebla son especialmente óptimas para esto.
• Utilizando el tipo especial de transparencia puedes iluminar, oscurecer y aplicar
efectos especiales a objetos y fotos.
• Crear puntos iluminados o reflejos.

www.magix.es
 Transparencia 253

El parabrisas tiene múltiples objetos superpuestos con distintas transparencias. El

reflejo del centro es un blanco 100% opaco que se va desvaneciendo poco a poco de forma
elíptica.

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 11 Premium 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 239) 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.
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.
254

Lee Rellenos (en la página 239) 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)

Transparencia con gradación de varios niveles

Del mismo modo que puedes añadir varios niveles a un relleno con gradación, puedes
hacer lo mismo con una transparencia con gradación. Esto te permite, por ejemplo,
aplicar una gradación desde opaco a transparencia de 50%, volver a transparencia de
25%, volver al opaco, etc.

Puedes definir el nivel de transparencia en cada nivel seleccionando un control

deslizante y ajustando la barra deslizante. Añade niveles adicionales haciendo doble
clic en la línea de transparencia con graduación.

Consulta el capítulo Rellenos (en la página 239) para más información sobre el uso de
controles deslizantes.

Tipos de transparencia
Web Designer es compatible con los principales tipos de transparencias que se
utilizan en muchas otras aplicaciones, como las siguientes:
Normal (Mezcla)
El color del objeto se mezcla con el color de los objetos subyacentes. El efecto es
similar a distribuir una capa fina de color (o pintura) sobre los objetos subyacentes.

Multiplicar (Vidriera)
El efecto es similar a ver los objetos subyacentes a través de un vidrio de color. Es
ideal para la simulación de cristal y para oscurecer objetos con criterio selectivo. Los
colores de los objetos a los que se aplica Multiplicar son:

• Blanco: sin efecto en los colores de los objetos subyacentes.

• Gris y blanco: oscurece los colores de los objetos subyacentes.
• Otros colores: oscurece los colores subyacentes hacia el color saturado (rojo
claro sobre rojo claro resulta en rojo medio; verde sobre rojo da negro).

Técnicamente, el proceso es sustractivo en el espacio de color RGB.

Trama (Blanqueador)
Trama no tiene ninguna analogía clara en el mundo físico. Es útil para crear puntos
destacados cuando la fuente de luz no es blanca. El color del objeto con aplicación de
Trama:

• Gris y blanco: aclara los colores de los objetos subyacentes.

www.magix.es
 Transparencia 255

• Negro: sin efecto en los colores de los objetos subyacentes.

• Otros colores: aclara los colores subyacentes hacia el color sin saturación. (Rojo
claro sobre rojo claro se convierte en rojo pálido; verde sobre rojo se convierte
en amarillo).

Técnicamente, el proceso es aditivo en el espacio de color RGB.

Para estos tipos de transparencia, la barra deslizante controla la cantidad de

transparencia desde opaco (transparencia 0%) hasta completamente transparente
(100%).

Al aplicar una transparencia plana al objeto también se aplica una transparencia a la

línea alrededor del objeto. No es posible configurar diferentes transparencias, pero
puedes eliminar la línea con la opción sin color o seleccionando el ancho de contorno
"ninguno". Para crear un objeto con un relleno transparente y una línea no
transparente, utiliza un tipo de transparencia no plana.

Para más información sobre colores, consulta Manejo de colores (en la página 179).

Ten en cuenta que los documentos de Web Designer que contengan tipos de
transparencia antiguos todavía se referirán a ellos con sus nombres originales a
pesar de que ya no sean compatibles con Web Designer. Busca el nombre entre
paréntesis en la lista de transparencias para identificarlos.

Perfil
Puedes ajustar el "gradación de la transición de color" entre el comienzo y el fin de las
transparencias. Esto se aplica a todas las distintas graduaciones de transparencia
excepto a las de tres y cuatro puntos (en dónde esta opción no está disponible).

Para cambiar el perfil de una transparencia:

1. Selecciona el objeto.
2. En la barra de información de la herramienta de TRANSPARENCIA , haz clic en
PERFIL . Esto abrirá el cuadro de diálogo de PERFIL .
3. Selecciona un perfil predefinido de la lista desplegable o arrastra los
deslizadores para crear un perfil personalizado. La opción superior en la lista
desplegable (la línea recta) crea una transición lineal entre el comienzo y el fin
de la transparencia.
256

Mapas de bits
Las galerías de mapas de bits y rellenos se describen en el capítulo Trabajar con
mapas de bits (en la página 327).

Cuando seleccionas un tipo de transparencia de MAPA DE BITS , se utiliza un mapa de

bits por defecto. Haz clic en NOMBRE DE MAPA DE BITS en la barra de información de
transparencia o utiliza las galerías de mapas de bits o rellenos para cambiar el mapa
de bits utilizado. (Clic sobre el botón TRANSP en la galería o arrastrar y soltar desde la
galería).

Por defecto, los colores más claros de un mapa de bits son los más transparentes.
(Por supuesto, puedes modificar la cantidad relativa de transparencia
posteriormente).

Control deslizante / resolución

Si has seleccionado un control deslizante, este campo te indica cuál es. Si no hay
ningún control deslizante seleccionado y se está utilizando una transparencia de
mapa de bits, controla el DPI.

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.

www.magix.es
 Sombras 257

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 11 Premium 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.

Aplicar una sombra

Aplicar una sombra de pared
Para aplicar una sombra de pared:

1. Selecciona el objeto.
258

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.

www.magix.es
 Sombras 259

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 11 Premium incluyendo rellenos multinivel.
260

Cómo cambiar el color de la sombra:

Para más información sobre colores y la línea de colores lee el capítulo Trabajar con
colores (en la página 179).

• 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.

www.magix.es
 Sombras 261

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 FORMATO/ATRIBUTOS . Simplemente copia el
objeto que tiene la sombra (EDICIÓN > COPIAR ), selecciona el objeto o los objetos a los
que quieres pegarle la sombra y escoge EDICIÓN > PEGAR FORMATO/ATRIBUTOS .
262

Biseles

La herramienta de bisel
La herramienta de BISEL (shortcut Ctrl+F3) da a los objetos una apariencia de
profundidad en vez de que parezcan planos sobre la página.

Los biseles tienen su propia resolución, por lo que puedes modificar su tamaño sin
perder calidad.

Tipo de bisel
Lista de tipo de barra deslizante
Valor numérico y de barra deslizante para el parámetro seleccionado
Bisel externo
Bisel interno
Estilo de unión

Puedes aplicar biseles a casi todos los tipos de objetos. Las excepciones son:

• Partes de bloques de texto (como una sola letra): el bisel se aplica a todo el
texto.
• A la curva seguida por un texto.
• Objetos con contorno
• Efectos en vivo (el bisel se aplicará al objeto antes de aplicar el efecto, si el
efecto es en vivo o a la caja circundante del efecto si el efecto está bloqueado).

Aplicar un bisel
Para aplicar un bisel a un solo objeto:

1. Selecciona el objeto
2. Escoge la herramienta de BISEL .
3. Escoge la forma de bisel de la lista TIPO DE BISEL . La opción NINGUNO elimina
todos los biseles aplicados.

www.magix.es
 Biseles 263

Aplicar un bisel a varios objetos

El resultado de un bisel sobre varios objetos, depende de la agrupación de los objetos:

• Si los objetos están agrupados, los biseles que se superponen se fusionan. El

color de bisel es el mismo al del objeto trasero.
• Si los objetos no están agrupados, cada objeto recibirá un bisel individual. El
color de bisel es el mismo al del objeto.

Modificar un bisel
Puedes cambiar el ángulo y elevación de la luz y cambiar la forma, dirección y tamaño
del borde del bisel.

Dirección del bisel

Los biseles pueden encontrarse dentro o fuera del objeto. Los biseles externos hacen
los objetos más grandes, mientras que los biseles internos no cambian el tamaño del
objeto.

Para cambiar la dirección del bisel.

1. Selecciona el objeto.
2. Haz clic en el botón INTERNO o EXTERNO.

Cambiar la fuente de luz del bisel

El efecto de bisel se crea con una luz que brilla a lo ancho del objeto y que ilumina la
forma (perfil) del bisel. Puedes cambiar la dirección y la altura de la luz, así como su
intensidad (contraste).

Cambiar el ángulo de luz (dirección horizontal):

1. Selecciona el objeto.
2. Arrastra la flecha para cambiar la posición de la fuente de luz.

No puedes mover el centro de la flecha, sino solamente la punta

de la flecha.
264

Para establecer un ángulo preciso, selecciona ÁNGULO DE LUZ de la lista TIPO DE

BARRA DESLIZANTE . Y después arrastra la barra o introduce un valor en el campo de
texto.

Si has seleccionado varios objetos con bisel, el ángulo de luz se cambiará para todos
los biseles. Si arrastras la flecha, se cambiará sólo el bisel (o biseles) de la flecha.

Cambiar la intensidad de la luz (contraste)

Para cambiar la intensidad de la luz:

1. Selecciona el objeto.
2. Selecciona CONTRASTE de la lista TIPO DE BARRA DESLIZANTE . Y después arrastra
la barra o introduce un valor en el campo de texto.

Si has seleccionado varios objetos con bisel, los cambios se aplicarán a todos los
biseles. Los colores utilizados en el bisel afectan el contraste. Por ejemplo, los colores
fuertes (saturados) requieren más contraste que los colores débiles para obtener el
mismo efecto. Para mejor resultados, es posible que debas ajustar el contraste para
cada objeto.

Cambiar la elevación de la luz (ángulo vertical)

Esto te permite mover la luz desde cualquier posición arriba del objeto (90) hasta el
costado del objeto (0).

1. Selecciona el objeto.
2. Selecciona ELEVACIÓN DE LA LUZ de la lista TIPO DE BARRA DESLIZANTE . Después
arrastra la barra o introduce un valor en el campo de texto.

Para obtener biseles redondeados se recomienda una elevación de luz de 30. Con
este ángulo, el bisel se mezcla suavemente con el objeto.

www.magix.es
 Biseles 265

Cambiar el tamaño del bisel

Cómo cambiar el tamaño del bisel:

1. Selecciona el objeto.
2. Arrastra cualquiera de las flechas externas para extender el
bisel.

Como alternativa:

1. Selecciona el objeto.
2. Selecciona TAMAÑO de la lista TIPO DE BARRA DESLIZANTE .
3. Después arrastra la barra o introduce un valor en el campo de texto.

Cambiar la forma del bisel

1. Selecciona el objeto
2. Escoge la herramienta de BISEL .
3. Escoge la forma de bisel de la lista TIPO DE BISEL .

Cambiar el color del bisel o el efecto de relleno

Después de aplicar un bisel a un objeto, puedes cambiar su color o el efecto de
relleno. Puedes aplicar cualquiera de los efectos de color de MAGIX Web Designer 11
Premium incluyendo rellenos multinivel.

Para más información sobre colores y la línea de colores lee el capítulo Trabajar con
colores (en la página 179).

Cómo cambiar el color del bisel:

• La forma más fácil es arrastrar y soltar un color desde la línea de color hasta el
bisel. (Asegúrate de soltar el color sobre el bisel 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 el bisel utilizando la herramienta de SELECCIÓN . (Asegúrate de

seleccionar el bisel y no el objeto).
2. Utiliza el EDITOR DE COLOR para editar el color.
266

Cambiar el estilo de unión del bisel

Después de aplicar un bisel a
un objeto, puedes cambiar la
forma de las esquinas
(uniones).

Cómo cambiar el estilo de la unión de bisel:

1. Selecciona el objeto.
2. Haz clic sobre el botón de unión apropiado en la barra de información de la
herramienta de BISEL .

Miter Redondo Bisel

Eliminar un bisel
Para eliminar un bisel:

1. Selecciona el/los objeto/s cuyo bisel quieres eliminar.

2. Escoge la herramienta de BISEL .

Escoge NINGUNO de la lista TIPO DE BISEL .

www.magix.es
 Máscaras 267

Máscaras
En MAGIX Web Designer 11 Premium las herramientas de máscara no se muestran
en la barra de herramientas principal al inicio. Si quieres usar estas herramientas,
puedes encontrarlas en la paleta de botones.

Para abrir el botón paleta selecciona BARRAS DE CONTROL ... del menú VENTANA y
desplázate por la lista hasta la parte inferior. Ahora haz clic en la casilla al lado del
icono de "Botón paleta". (O haz clic derecho sobre un área vacía o cualquier barra de
botones y elige "Botón paleta" del menú popup).

Si quieres usar estas herramientas a menudo puedes moverlas desde el "Botón

paleta" arrastrándolas hasta la barra de herramientas. (Mantén pulsada la tecla
"Alt", luego arrastra el botón y suéltalo sobre la barra de herramientas sobre alguno
de los iconos existentes).

Crear una máscara

En Web Designer se utiliza una máscara para proteger parte de una foto de una
posible distorsión. Por ejemplo, cuando se usa la herramienta de ESCALA BASADA EN
EL CONTENIDO/ ZOOM para extender o ampliar una foto, a veces quieres proteger
parte de la foto para evitar que se distorsione con la operación. Utiliza una máscara
para marcar el área a proteger.

Para crear una máscara selecciona una de las herramientas de máscara de la barra
desplegable de herramientas de máscara y úsala para pintar una máscara rosa sobre
tu foto en las partes que quieres proteger. Para ello, el PINCEL DE MÁSCARA (la primera
herramienta de la barra desplegable) es normalmente la herramienta más útil.

Las áreas enmascaradas muestran un relleno de color rosa y tienen un efecto de

"hormigas en marcha" alrededor del borde. Cualquier parte de los objetos cubierta por
el área rosa será protegida cuando se lleve a cabo una operación compatible con la
máscara.

Las herramientas de región de foto y máscara

Las herramientas para el dibujo de máscaras están en la barra de herramientas
de máscaras desplegable.

La barra de herramientas de máscara desplegable.

268

La HERRAMIENTA DE DIBUJO DE MÁSCARA es la herramienta de máscara por

defecto y te permite "dibujar" sobre el área que quieres ocultar. Elige un
tamaño de pluma de la barra de información y crea una forma de máscara
pasándola sobre el objeto. Si mantienes presionada la tecla "Shift" a la vez que
el botón izquierdo del ratón podrás borrar partes de la máscara.
Usa la herramienta de máscara a mano alzada para dibujar formas cerradas
alrededor de las áreas u objetos a los que quieres aplicar una máscara igual
que lo harías con un lápiz. Como las herramientas de mano alzada y pincel,
también la barra de información tiene un control suavizado y puedes mantener
pulsada la tecla "Shift" para borrar tu línea mientras dibujas.
La herramienta MÁSCARA RECTANGULAR te permite arrastrar un área de
máscara rectangular. Puedes modificar tu forma usando la configuración de
ancho y alto de la barra de información.
Usa el botón MOSTRAR MÁSCARA O REGIÓN para activar o desactivar la
máscara o región. Esta opción no las elimina, por lo que puedes volver a
activarlas, pero mientras está desactivada, la máscara o región no afectará a
ninguna operación.
El botón INVERTIR MÁSCARA invierte el área enmascarada de forma que las
zonas no enmascaradas sean ahora las que tengan la máscara.

Usa el botón ELIMINAR MÁSCARA para quitar el efecto en todas las formas.

Tanto la función INVERTIR como la de ELIMINAR aparecen también en la barra de

información.

La barra de información también ofrece una opción para activar y desactivar el

contorno de la máscara o región. En general, esto es únicamente útil cuando utilizas
estas herramientas para editar regiones dentro de grupos de fotos. Esta función
desactiva únicamente el contorno, por lo que NO es igual al botón MOSTRAR
MÁSCARA O REGIÓN descrito anteriormente, que activa o desactiva toda la máscara o
región. Para más detalles consulta Grupos de fotos (en la página 329).

Para más información sobre la característica de control suavizado consulta en la

herramienta Mano alzada y pincel.

Editar máscara.
En la mayoría de los casos editas la máscara usando las mismas herramientas de
máscara descritas arriba. Pero las formas que conforman una máscara son en realidad
formas normales colocadas en una capa especial de máscara, por lo que en algunos
casos puede ser útil editar formas sobre ella. Utiliza la GALERÍA DE PÁGINA Y CAPA

www.magix.es
 Máscaras 269

para acceder a la capa de máscara. Te será útil para los más finos detalles de las
formas de máscaras o si quieres mover una máscara de posición o incluso para crear
una máscara suave.
1. Haz clic en la herramienta de selección y abre la galería de páginas y capas.
2. Haz clic en la capa de máscara para activarla.
3. Selecciona la forma de máscara que quieras modificar y cámbiala de posición o
tamaño como necesites.
4. Haz doble clic en la forma para editarla usando la HERRAMIENTA DE FORMA . O
bien, si has creado la forma usando la herramienta de máscara de rectángulo, un
doble clic te permitirá la edición con la HERRAMIENTA DE RECTÁNGULO. (EN LA
PÁGINA 169)

Máscaras suaves
Una máscara suave es una máscara que incluye una variedad de niveles de máscaras,
en vez de consistir simplemente en partes con y sin máscara. Por ejemplo, una parte
de una imagen pueden tener aplicada un 50% de máscara de forma que la operación
que se aplique luego tenga únicamente el 50% de efecto en esa parte. O una forma
de máscara puede tener una máscara graduada que abarque de 0% a 100%. Si se
utiliza después esa máscara con la HERRAMIENTA DE OPTIMIZACIÓN DE FOTO para dar
más brillo a la imagen, el efecto tendrá esa misma graduación.

Crear una máscara suave

Puedes crear máscaras suaves si aplicas la herramienta de transparencia a tus formas
de máscaras en la capa de máscaras. Crea en primer lugar las formas de máscara.

• Cambia a la herramienta de selección y abre la galería de páginas y capas.

• Extiende la página para ver las capas y haz clic en la capa de máscara para
activarla.
• Haz clic sobre la forma de máscara en el espacio de trabajo y selecciona la
herramienta de transparencia.
• Arrastra por la forma de máscara para crear una máscara suave graduada lineal.

Operaciones que utilizan la máscara

Cortar, copiar, eliminar
Estas operaciones son útiles cuando se utilizan junto con máscaras para cortar trozos
de fotos, pero también puedes usarlas con cualquier objeto.

1. Selecciona una de las herramientas de máscara de la barra desplegable de

HERRAMIENTA DE MÁSCARA y dibuja la forma de máscara que desees.
2. A continuación, cambia a la HERRAMIENTA DE SELECCIÓN y selecciona el dibujo o
foto que deseas editar
3. Selecciona ahora una de las opciones del menú EDICIÓN para realizar cualquier
operación de cortar/copiar/pegar.
270

La máscara rectangular se usa para crear una máscara (izquierda). Cortar o borrar quita las
partes no enmascaradas de la foto (derecha).

En el ejemplo de la izquierda, la máscara se ha invertido. Ahora, cuando cortes o elimines, el área

de máscara en rosa está protegida y todo lo demás se eliminará.

Duplicar, clonar
Esto copiará solamente las partes no en máscara del dibujo o foto. La opción Clonar
coloca una copia exactamente sobre el original.

Modificación de tamaño de foto con contenido

Para proteger parte de una foto ante cambios de escala:

1. Selecciona una de las herramientas de máscara de la barra de herramientas de

máscara desplegable y dibuja la forma de máscara que desees alrededor del
área que quieres proteger.
2. Ahora ve a la herramienta "Cambio de tamaño teniendo en cuenta el contenido"
(barra desplegable de herramientas de foto en la barra de herramientas
principal) y haz clic sobre la foto.

Consulta la función Cambio de tamaño teniendo en cuenta el contenido (en la

página 368) para más información.

www.magix.es
 Máscaras 271

Herramienta de optimización de foto

Utiliza una máscara para aplicar brillo, contraste, saturación, temperatura o
enfoque/desenfoque a cualquier parte de una foto.

1. Selecciona una de las herramientas de máscara de la barra de herramientas de

máscara desplegable y dibuja la forma de máscara que desees alrededor del
área que quieres proteger.
2. Ahora ve a la herramienta de optimización de foto (barra de herramientas de
foto desplegable sobre la barra de herramientas principal) y haz clic sobre la
foto.
3. Usa los "Controles de optimización" de la barra de información de la
herramienta de fotos.

Los usuarios avanzados quizá quieran usar máscaras suaves para introducir efectos
graduados en la operación de optimización de foto. Consulta los capítulos
Herramienta de fotos y Manejo de fotos para más información.

Combinar formas
El menú "ARREGLO" > "COMBINAR FORMAS" contiene una serie de funciones que te
permiten combinar las formas de múltiples maneras. Estas operaciones funcionan con
la máscara. Por ejemplo, recorta una parte de una foto (cookie estilo cúter).

1. Selecciona una de las herramientas de máscara de la barra desplegable de

herramientas de máscara y pinta cualquier forma de máscara que necesites.
2. Cambia a la herramienta de selección y escoge el dibujo o foto que quieres
segmentar.
3. Selecciona "ARREGLO" > "COMBINAR FORMAS" > "SEGMENTAR" .

Copiar formas a la capa de máscara

Puede que prefieras dibujar formas de máscara usando las herramientas de dibujo
normales en lugar de las de máscara, o incluso usar una forma existente de la capa de
máscara. Resulta particularmente útil cuando trabajas con máscaras suaves, donde
estás aplicando niveles o transparencias sobre los objetos de máscara. En la
"Herramienta de selección", elige la forma y copia o córtala. Ahora cambia a una de
las herramientas de máscara y haz PEGAR . Utiliza PEGAR EN EL LUGAR si deseas que la
forma aparezca exactamente en el mismo lugar desde el cual se copió o cortó.

Para copiar las formas desde la capa de máscara hasta cualquier otra, haz la inversa.
Selecciona las formas mientras estés en una herramienta de máscara, luego cambia a
la HERRAMIENTA DE SELECCIÓN , y pega.
272

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 11 Premium y fijar diferentes propiedades web en objetos, páginas y en
toda tu página web. Para abrirlo, haz clic derecho sobre un objeto y escoge
PROPIEDADES WEB o utiliza la opción del menú "HERRAMIENTAS" > "PROPIEDADES
WEB…" (shortcut Ctrl + Shift + 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 MouseOver
Pestaña Marcador de posición
Pestaña Publicar
Pestaña Analytics (en la página 296)
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 rápido y fácil configurar las
propiedades de diferentes objetos y páginas en tu página 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

PROPIEDADES WEB aparece de forma modificada con algunos controles diferentes y
muchos otros desactivados porque no se aplican a las animaciones. Lee el capítulo
sobre Animaciones 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.

www.magix.es
 Diálogo de propiedades web 273

Pestaña Enlace

La configuración de esta pestaña se aplica al objeto, a los objetos o al texto

seleccionados. 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 agregar enlaces a otras páginas de tu sitio web, a una dirección
URL o a una ventana emergente.

También puedes aplicar efectos de transición a los enlaces, de forma que la página de
destino del enlace (ya sea externa o una de las páginas de tu sitio) aparezca con la
transición que selecciones. Las transiciones para los enlaces solo pueden utilizarse
cuando en enlace se abre en una nueva página, de lo contrario, estarán desactivadas.
274

Para agregar un enlace a algunas palabras de un párrafo, ve a la HERRAMIENTA DE

TEXTO y selecciona el texto al que quieras agregar el enlace. 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.

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 11 Premium 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...
Selecciona esta opción si deseas enlazar a otra página en el sitio web actual o, si estás
creando una presentación, si quieres incluir un enlace al paso siguiente o previo de la
presentación. La lista desplegable te permite seleccionar la página o el paso al que
deseas enlazar. También puedes escoger esta opción para enlazar a un objeto al
borde superior de la página (se crea un salto rápido desde el final de una larga página
hasta el inicio).

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.

www.magix.es
 Diálogo de propiedades web 275

Consulta la sección PESTAÑA PÁGINA (en la página 282) 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 en tu sitio, la lista desplegable también
contiene entradas especiales PRÓXIMA PÁGINA/PASO DE PRESENTACIÓN, PÁGINA
ANTERIOR/PASO DE PRESENTACIÓN y PARTE SUPERIOR DE PÁGINA .

Página anterior/Próxima página

Utilízalo para agregar un enlace hacia una página anterior o posterior de tu sitio web.
En el caso de enlaces de este tipo, el orden de las páginas se establece según el orden
de página que aparece en MAGIX Web Designer 11 Premium. La opción "siguiente"
en la última página configura un enlace a la primera página y la opción "anterior" en la
primera página, a la última.

Paso de presentación anterior/siguiente

Utiliza esta opción para agregar un enlace que te lleve al paso siguiente o anterior de
la presentación, si tu sitio web es una presentación. El orden de la presentación
también está determinado por el orden de los pasos tal como aparecen en MAGIX
Web Designer 11 Premium, al igual que "página anterior/siguiente".

Parte superior de la página

Si quieres enlazar a la parte superior de una página particularmente larga, crea un

objeto al final de la página (por lo general un objeto de texto o un botón) y selecciona
entonces la opción para enlazar "PARTE SUPERIOR DE LA PÁGINA" . El enlace te llevará
directamente a la parte superior de la página.

Enlazar a una referencia

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 agrega un nombre con un clic
derecho y la opción NOMBRES... . A continuación selecciona el objeto para el cual
quieres crear 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.

NOTA : no puedes aplicar una transición a un enlace a una referencia.

276

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 11 Premium ha hecho una copia
de tu archivo y la ha colocado en la carpeta de soporte para tu diseño. Esta 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 Manejo de documentos (en la página
86) para más información acerca de las carpetas de soporte.

Nota: como el archivo se copiará en la carpeta de soporte de tu diseño, deberás

actualizar esta copia cada vez que modifiques el archivo original 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.

NOTA : no puedes aplicar una transición a un enlace a un archivo.

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 solo 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 solo 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 PÁGINAS Y CAPAS y luego agregar tu contenido de
popup a esa capa.
Consulta 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".

También puedes agregar un efecto de transición que se aplica cuando la capa

aparece. En la GALERÍA DE PÁGINAS Y CAPAS , abre las propiedades de capa para poder

www.magix.es
 Diálogo de propiedades web 277

aplicar una transición directamente a una capa (en la página 68) para lograr un efecto
de animación cuando aparezca el contenido de la capa. Puedes también hacer clic en
el botón "Configuración" al lado de la capa popup en la pestaña de "Enlace" para
acceder a las mismas propiedades de capa.

Ahora cuando un visitante haga clic en el objeto aparecerá el contenido de la capa.

Con un clic en cualquier otro lugar de la página, el popup desaparece de nuevo por
defecto. Pero puedes hacer que la capa popup permanezca arriba hasta que el
visitante la cierre explicitamente. Tan solo desbloquea la casilla CERRAR POPUP
AUTOMÁTICAMENTE del diálogo de propiedades de la capa. Entonces se incluye un
botón de cierre en el borde superior del popup y permanece en pantalla hasta que se
presiona el botón de cerrar.

Ten en cuenta que también puedes acceder a las propiedades de capa haciendo clic
en el botón "Configuración..." al lado de la opción capa popup en el diálogo "Enlace".

Ten en cuenta que todo el contenido de la capa popup se carga en cuanto el usuario
visita tu página. Entonces, si quieres ofrecer muchas fotos con ventanas emergentes,
utiliza la característica Foto emergente descrita a continuación.

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 285) 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.
278

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).

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.

www.magix.es
 Diálogo de propiedades web 279

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 Y PALABRAS CLAVE : estos campos se han descrito en la sección

Pestaña Página (en la página 282). Opcionalmente puedes configurar estos campos
para que se apliquen a cada página de tu sitio, a no ser que la configuración para una
página de la pestaña "Página" los anule. Por ejemplo, una página que no tenga su
propio título en la pestaña Página, obtendrá el título especificado aquí.

CÓDIGO HTML (ENCABEZADO) Y CÓDIGO HTML (CUERPO): estos botones tienen el

mismo objetivo que los botones código HTML (encabezado) y código HTML
(cuerpo) de la secciónpestaña Página y te permiten introducir una gran cantidad de
código HTML en la sección del encabezado o del cuerpo de las páginas de tu sitio
web.
280

Si se ha especificado código aquí en la PESTAÑA PÁGINA WEB, se incluirá en todas las

páginas del sitio junto con el código especificado para cada página en la pestaña
Página. De esta forma puedes incluir un código en cada página y, además, te puedes
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.
Desactívala si no quieres que tus enlaces de texto aparezcan subrayados.

MOUSEOFF : aquí puedes elegir el color que quieras para todos tu enlaces de texto. 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.

MOUSEOVER : los enlaces de texto cambiarán a este color cuando un usuario mueva el
cursor del ratón por encima de ellos.

VISITADO : enlaces de texto que conduzcan a una página que el usuario ya ha visitado
se visualizan en este color en lugar de en el color MouseOff.

Adaptar a bordes de página

Esta opción está activada por defecto. Si tienes objetos en tu sitio web que
sobrepasan los bordes de la página web, haz clic en esta opción para recortar estos
objetos de modo que solo sea visible la parte que está sobre la página. Desactiva esta
casilla si quieres que el objeto fluya sobre el borde de la página de forma que la
porción que sobrepasa el tablero de dibujo se muestre de todas formas.

Ten en cuenta que si tienes una página invisible (lo que ocurre por defecto para
nuevos documentos web o si has aplicado "sin color" a tu página), no se puede
hacer clip a los bordes de página aun cuando esta opción está activada.

Presentaciones web
Haz clic en la opción PÁGINA WEB DE PRESENTACIÓN para convertir una página web
existente en una presentación.

Nota: si creas un documento de presentación y escoges PRESENTACIÓN DE 955

PIX del menú NUEVO , la casilla PÁGINA WEB DE PRESENTACIÓN se activa
automáticamente.

www.magix.es
 Diálogo de propiedades web 281

CLIP A LOS BORDES DE LA PÁGINA (activado por defecto): si tienes objetos en tu página
web que sobrepasan los bordes de la página web, haz clic en esta opción para
recortar estos objetos a la porción visible en la página web. Quita la selección de esta
casilla si quieres que el objeto fluya sobre el borde de la página de forma que la
porción que sobrepasa el tablero de dibujo se muestre de todas formas.

Nota: si tienes transiciones aplicadas a una capa o transiciones de pasos de una

presentación que aparecen desde los lados, la parte inferior o la parte superior de la
página, al desactivar esta opción, la transición aparecerá desde el borde de la
ventana del navegador en vez de desde el borde de la página.

Retina (activado por defecto)

Cuando esta opción está activada, Web Designer exportará versiones en alta
resolución de cada imagen en tu página web, además de las imágenes en resolución
de pantalla normal. Esto significa que los dispositivos con pantallas de muy alta
resolución reproducirán imágenes de mayor calidad.

Para más información consulta Imágenes de alta resolución (en la página 327).

Opciones de exportación web

El diálogo OPCIONES DE EXPORTACIÓN WEB te permite elegir como quieres publicar tu
sitio web. Puedes elegir entre exportarlo como SITIO WEB CONVENCIONAL (con un
archivo HTML separado para cada página), donde haces clic a través de las páginas
usando la navegación convencional, o como SUPERSITE (el sitio completo como un
único archivo HTML), lo que te permite presentar tu página con transiciones
animadas entre páginas o como un arreglo horizontal o vertical de páginas, para que
los usuarios puedan explorarla con toques de pantalla en móviles y tabletas.

La configuración por defecto para el diálogo es PÁGINA WEB CONVENCIONAL .

Ver Supersites (en la página 303) para más detalles sobre las opciones de
visualización y para añadir capas.
282

Pestaña Página

Las opciones en esta pestaña se aplican a la página actual, no al objeto ni a los objetos
seleccionados. 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 en esta pestaña son
opcionales: no necesitas necesariamente rellenar estos campos para cada página de
tu web.

Si quieres tener el mismo título, descripción y palabras clave en cada página de tu

sitio web, puedes configurarlo una sola vez en la pestaña Página web en lugar de
hacerlo para cada página.

NOMBRE DE ARCHIVO DE LA PÁGINA : utiliza este campo para establecer el nombre que
quieres que se utilice para esta página, al exportarla. Así, si quieres que la página se
exporte como "inicio.htm", configura este campo como "inicio".
www.magix.es
 Diálogo de propiedades web 283

En general, la primera página de un sitio web se denomina "index.htm" o "inicio.htm"

porque si un visitante especifica una URL con el nombre de dominio y sin el nombre
de página (como www.xara.com), el servidor web generalmente lo lleva
automáticamente a la página index.htm, si esta existe. Ten en cuenta que los
caracteres que introduces en este campo se escriben automáticamente en
minúsculas y que no se permiten los caracteres acentuados y algunos otros
caracteres no alfanuméricos. Esto tiene como objetivo reducir los posibles de
problemas de compatibilidad con los diferentes servidores web cuando publicas tu
página web.

TÍTULO DE PÁGINA: puedes escoger 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 marco 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, se muestra en el navegador web si visitas la página.

Avanzado: el título se inserta en el encabezado de la página con el elemento HTML

"<título>".

DESCRIPCIÓN DE LA PÁGINA : es posible que los motores de búsqueda muestren este

texto de descripción de la página en los resultados de las búsquedas cuando un
visitante encuentre tu página mediante una búsqueda en Internet. Los navegadores y
otros servicios web también pueden mostrar la descripción de la página.

Avanzado: la descripción se introduce como metadatos en el encabezado de la

página
(‘<meta name="description" …..).

PALABRAS CLAVE DE LA PÁGINA: aquí puedes ingresar palabras clave que deseas que
los motores de búsqueda reconozcan para que los visitantes encuentren tu sitio.
Introduce palabras que los visitantes potenciales puedan buscar cuando quieran
encontrar páginas y sitios como el tuyo.

Para aquellos familiarizados con HTML, las palabras clave se introducen en el

encabezado de la página como metadatos:

Avanzado: las palabras clave se introducen como metadatos en el encabezado de la

página
(‘<meta name="palabras clave" …..).

CÓDIGO HTML (ENCABEZADO): haz clic para abrir el diálogo de código HTML
(encabezado), en donde puedes pegar o escribir código HTML directamente en el
encabezado de tu página web. El código se inserta sin modificarse antes de la etiqueta
de cierre "</encabezado>".
284

CÓDIGO HTML (CUERPO): haz clic para abrir el diálogo de código HTML, en donde
puedes pegar o escribir código HTML directamente en el cuerpo de tu página web. El
código se inserta sin modificarse antes de la etiqueta de cierre "</cuerpo>".

Estos diálogos deben utilizarse con cuidado porque insertar código o comandos
inválidos en tu página pueden generar serios problemas en toda la página web. Si
necesitas insertar el mismo código exacto para todas la páginas de tu sitio web,
puedes usar el botón de código HTML (encabezado) y código HTML (cuerpo) en la
pestaña Página web de este diálogo, en vez de introducirlo para cada página individual
en la pestaña Página.

EFECTO DE TRANSICIÓN: escoge un efecto de transición que se mostrará cuando un

visitante abra tu página web. Por ejemplo, si seleccionas una transición fade para una
página, cuando un visitante haga clic en esa página, en vez de cargarse directamente,
aparecerá gradualmente. Sin embargo, no puedes aplicar un efecto de transición de
esta manera a una página externa, sino que debes usar la opción Transición de enlace
de la pestaña "Enlace" para hacerlo. Puedes aplicar los siguientes efectos de
transición a una página:

Instantánea (por defecto) El contenido de la nueva página, capa o paso aparecerá

directamente
Aparecer desde El contenido de la nueva página, capa o paso aparecerá
desde diversas direcciones
Desaparecer desde El contenido de la página actual desaparecerá en
diversas direcciones
Transición El contenido de la nueva página aparecerá de forma
gradual
Desaparecer en negro El contenido de la página actual cambiará a una
pantalla en negro y el contenido de la nueva página
aparecerá gradualmente.
Obturador Una barra negra se mueve a lo ancho de la pantalla
desde la derecha y oscurece el contenido viejo. Al
regresar revela el contenido de la nueva página.
Separación y aparición El nuevo contenido aparece, se divide en dos mitades
vertical/horizontal que se unen de forma vertical u horizontal.

VELOCIDAD (EN SEG.): arrastra la barra para escoger una velocidad para la transición
de entre 0 y 5 segundos.

Por defecto, cuando aplicas una transición, los objetos solamente aparecerán o
desaparecerán desde la esquina de la página web. Si quieres que los objetos
aparezcan desde las esquinas de la ventana del navegador, en vez de desde las
esquinas de la página, desactiva la opción de los bordes CLIP A LA PÁGINA en la
pestaña Página web (en la página 279) del diálogo de propiedades web.

www.magix.es
 Diálogo de propiedades web 285

Nota técnica: las transiciones de página primero cargan la página de destino en un

iFrame oculto y luego revelan ese iFrame con el efecto visual. Luego, la página de
destino vuelve a cargarse de forma normal. Esta segunda carga de la página de
destino, generalmente no se nota, pero, dependiendo de la velocidad de la máquina
y de la versión del navegador que se utilice (especialmente los navegadores más
antiguos), muchas veces la página parpadea un momento al final de la transición de
página.

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
286

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.

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.

www.magix.es
 Diálogo de propiedades web 287

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.

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.
288

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.

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.

www.magix.es
 Diálogo de propiedades web 289

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.

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 11 Premium 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 11 Premium 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.

Propiedades de MouseOver (animaciones web)

Las propiedades MouseOver forman parte del cuadro de diálogo ANIMACIONES WEB .
Al hacer clic en este icono, se abre la pestaña MouseOver del cuadro de diálogo
Animaciones web, lo que te permite establecer lo que debe suceder cuando un
visitante pasa el cursor del ratón sobre el objeto seleccionado. Entonces, por ejemplo,
puedes animar el MouseOver con una amplia selección de efectos, establecer un
texto popup o una capa completa de contenido cuando un visitante pase el cursor del
ratón sobre una foto u otro objeto de tu página web. Para más detalles consulta
Animaciones web (en la página 431).
290

Pestaña Marcador de lugar

La pestaña Marcador de posición de utiliza para añadir y editar manualmente los

widgets editables. Estos son widgets que insertas en tu página web al introducir
manualmente el código HTML para el widget o al importar un archivo Flash o de
película. En general, no deberás utilizar la pestaña Marcador de lugar para los widgets
que agregues de la GALERÍA DE DISEÑOS , porque el código y los archivos que hacen
que estos widgets funcionen se manejan automáticamente. Consulta el capítulo
Widgets de página web (en la página 408) para más detalles.

www.magix.es
 Diálogo de propiedades web 291

Para convertir cualquier objeto normal en un marcador de lugar para un widget,

selecciónalo y abre esta pestaña del diálogo Propiedades web. Escoge si deseas que el
widget se base en código HTML que has obtenido de un sitio web de widget, un
archivo Flash o un archivo gráfico. Navega en busca del archivo o pega el código
HTML. Haz clic en ACEPTAR y el objeto se convertirá un marcador de lugar.

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.

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 11 Premium (asegúrate de
que te encuentres en la HERRAMIENTA DE SELECCIÓN cuando lo hagas y no en la
HERRAMIENTA DE TEXTO porque, de lo contrario, se insertará como texto). MAGIX
Web Designer 11 Premium detecta el HTML y lo utiliza para renderizar una imagen de
marcador de posición que aparecerá en tu página. También puedes agregar un
marcador de posición para el código HTML directamente en el cuerpo o en el
encabezado de una página con un clic en los botones código HTML (cuerpo) o código
HTML (encabezado), que abrirán un diálogo en donde podrás pegar o editar códigos
largos, de ser necesario.

Al exportar o publicar tu sitio, el marcador de posición se sustituye por el código

verdadero para que el widget funcione. Consulta el capítulo Widgets de página web
(en la página 408) para más detalles.

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.
292

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 código HTML que has obtenido de otra sección del
cuerpo o encabezado de tu página web, por ejemplo, entre las etiquetas
<body></body> o <head></head>. Por ejemplo, muchos sitios proveen widgets que
puedes agregar a tu página si pegas el HTML aquí. Sigue las instrucciones que ofrece
el proveedor. En la mayoría de los casos necesitas agregar solamente código al
cuerpo, pero algunos widgets requieren que incluyas algún tipo de código en el
encabezado.

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.

Advertencia: debes 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 11 Premium simplemente
inserta el código tal y como tú lo suministras, sin modificar ni revisar, cuando
exportas tu página web.

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 la carpeta de soporte para tu diseño. Lee el capítulo Manejo de documento (en la
página 73) para obtener información sobre las carpetas de soporte. 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.

www.magix.es
 Diálogo de propiedades web 293

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 la
carpeta de soporte de mi documento. Si el documento es "mipagina.web", la carpeta
de soporte 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 la carpeta
de soporte, 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. Por lo tanto, puedo insertar:

<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 la carpeta de soporte
(_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 solo quiero poner una imagen en mi página web, ¡es mucho
más fácil importar directamente la imagen a MAGIX Web Designer 11 Premium! 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 34) para más ejemplos.

Añadir código al encabezado de página

Algunos códigos tienen que ir en el encabezado del código HTML exportado (<head>
tag) y no en el cuerpo (<body> tag) como aparece por defecto.

Para ello, haz clic en el botón de código HTML (encabezado) situado en el marcador
de posición, en la página web o en la pestaña de página del cuadro de diálogo de
propiedades e introduce o copia el código.

Objetos de marcador de lugar

El objeto de marcador de 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 lugar.

¡Por lo tanto, es una buena idea hacer de tu marcador de lugar algo más avanzado que
sólo un rectángulo negro! Podrías utilizar una imagen estática que se parezca al
contenido flash. O quizás podrías usar un grupo como marcador de lugar que incluya
un mensaje de texto que pida al visitante instalar Flash para que así pueda ver el
contenido flash.
294

Animación web

Haz clic en el icono ANIMACIÓN WEB para abrir el diálogo con el mismo nombre. Las
animaciones web te permiten tomar un objeto de tu documento web y crear
rápidamente una respuesta animada a una acción como MouseOver, un clic del ratón
o un toque de la pantalla. Puedes activar capas popup o un texto popup. Puedes hacer
que los objetos vayan apareciendo a medida que te desplazas hacia abajo por una
página y también controlar todas estas animaciones con una amplia variedad de
efectos.

Para más detalles consulta Animaciones web (en la página 431).

Objetos sticky y stretchy

Haz clic en el icono OBJETOS STICKY Y STRETCHY para abrir el diálogo de objetos sticky
y stretchy. El diálogo te permite seleccionar objetos que permanecerán fijos en una
posición en la ventana del navegador (sticky). También puedes configurar objetos
para que se extiendan para cubrir el ancho o alto de la ventana (stretchy).

Consulta Objetos sticky y stretchy (en la página 306) para más información.

Pestaña Publicar

En la pestaña PUBLICAR configuras o cambias la configuración, lo que te permite

publicar tu página en Internet. Sin embargo no necesitas visitar este diálogo antes de
publicar: la operación de publicación te indicará que introduzcas los detalles
requeridos si no los has especificado todavía. Consulta el Capítulo de publicación para
más información.

www.magix.es
 Diálogo de propiedades web 295

• Haz clic en el botón CONFIGURACIÓN para conformar la configuración tanto de

MAGIX MUNDO ONLINE como de OTROS ALOJAMIENTOS WEB (VÍA FTP).
• Haz clic en el botón GUARDAR EN EL PERFIL para guardar los detalles actuales en
un perfil.
• Selecciona la opción que incluye tu página en la galería de páginas de usuarios
de Web Designer marcando INCLUIR MI PÁGINA WEB EN LA GALERÍA DE USUARIOS .
• Marca la casilla PUBLICACIÓN RÁPIDA (SOLO ARCHIVOS CAMBIADOS) para volver a
publicar solo los nuevos archivos en tu página web.
• Marca la casilla SALVAR CONFIGURACIÓN DE PUBLICACIÓN EN EL DOCUMENTO si
deseas mantener los detalles FTP para este documento en particular.
• Marca la casilla GUARDAR CONTRASEÑA EN EL DOCUMENTO para guardar la
contraseña de FTP en el documento (no recomendado para uso normal y no
disponible para MAGIX ONLINE WORLD).

Consulta el capítulo principal Publicar página web (en la página 318) para tener toda
la información sobre como publicar tu página.
296

Pestaña Analytics

Pestaña Google Analytics con una muestra de código de seguimiento.

La pestaña Google Analytics te ofrece una forma rápida y fácil de añadir un código de
seguimiento a tus páginas permitiéndote controlar el tráfico de tus páginas web
usando las herramientas de información de Google.

Necesitas tener una cuenta con Google para usar las funciones de Analytics: haz clic
en el botón "PÁGINA WEB DE ANALYTICS" para visitar la página y crear una cuenta, si
aun no tienes una, o para administrar una cuenta existente.

Sigue las siguientes instrucciones para obtener tu código de seguimiento y cópialo en

la pestaña Analytics. Ahora podrás hacer el seguimiento de datos a través de la
página web Google Analytics de tu página publicada.
www.magix.es
 Diseño web adaptativo 297

Diseño web adaptativo

Acerca de RWD
Con el uso en aumento de dispositivos móviles para acceder a Internet, también
aumenta la demanda de diseños de sitios web hechos a la medida de los formatos de
móviles y tabletas.
Aunque los dispositivos móviles tales como teléfonos tienen navegadores web
excelentes capaces de visualizar cualquier página web, un sitio web optimizado para
móviles no debería requerir del uso del zoom para ver el texto. Esto significa
normalmente que el contenido principal será una única columna de tamaño un punto
mayor para que se pueda leer mejor en el móvil de un vistazo. Las páginas web en los
móviles normalmente tienen un contenido reducido y se pueden navegar con toques
de un solo dedo para desplazar y navegar.
Podrías crear dos sitios web separados, uno diseñado para móviles de pantalla
estrecha y otro para pantallas de escritorio tradicionales más anchas, pero repetir el
contenido en dos páginas web separadas puede ser tedioso y una pérdida de tiempo,
especialmente si tienes que hacerlo cada vez que actualizas los textos o imágenes.
El diseño web adaptativo (RWD por sus siglas en inglés) es una técnica que permite a
tus sitios web responder de forma dinámica al tamaño de la pantalla. En lugar de
tener dos páginas web separadas, es decir, dos páginas HTML separadas, tendrás una
sola página web que puede cambiar su diseño dependiendo del tamaño de la pantalla
(y la resolución) del dispositivo que se esté usando para ver la página web.

Dos variantes del mismo sitio web. La primera es como se ve en una pantalla ancha, la segunda
es para pantallas estrechas como las de dispositivos móviles. La columna de texto es más
estrecha y las imágenes y los elementos de página están organizados para adaptarse a una
pantalla más estrecha.
298

"Retina" adaptativa o control de resolución HiDPI

Los dispositivos móviles y tabletas se diferencian de la mayoría de navegadores web
de escritorio en que admiten gráficos de una resolución mayor. Web Designer admite
esto de forma totalmente automática y producirá tanto imágenes de resolución
normal como Hi-DPI o Retina para todos los gráficos y fotos. La página web utiliza
entonces de forma inteligente la versión adecuada de la imagen dependiendo de la
resolución del dispositivo de navegación.

Los navegadores más viejos como IE8 y anteriores no admiten RWD, por lo que solo
mostrarán la variante principal de tu sitio web.

Variantes múltiples
Crear sitios RWD puede llegar a implicar una programación compleja de Javascript.
Pero al ser Web Designer una herramienta destinada a diseñadores de programación
cero, el usuario todavía tiene todo el control para el diseño web espontáneo y
totalmente libre: también puede crear múltiples variantes del mismo sitio web.
Puedes crear una variante diseñada para dispositivos móviles de pantallas estrechas,
quizá otro diseño para tabletas intermedias de pantalla pequeña y otra variante para
un escritorio de pantalla ancha tradicional.

Lo importante es que el contenido, es decir, el texto, las fotos, los gráficos y los
esquemas de colores, se comparten entre las variantes. El segundo punto importante
es que las variantes de capa múltiple para cada página no son archivos separados,
sino que forman parte de un solo archivo HTML que puede cambiar de forma
dinámica e instantánea de una capa a otra dependiendo del ancho del navegador.

Para cada variante que creas, puedes adaptar la capa tanto como desees. Puedes
modificar el tamaño y recolocar elementos en la página y esto se comparte entre las
variantes. Edita el texto para la variante de móvil estrecha y el texto se actualiza para
las otras variantes. También puedes elegir actualizar el estilo de texto (en la página
227) de una variante y que se apliquen los cambios solo a esa variante. O puedes
decidir que quieres diferentes contenidos o gráficos en una variante: las variantes de
móviles normalmente tienen un contenido reducido.

Cuando añades o borras una página en una variante, automáticamente crea o elimina
la página en otras variantes. Así que tu página siempre tiene los mismos arreglos de
página en todas las variantes.

Hay que poner los nombres de las páginas web en orden para que se puedan
compartir a través de las variantes. Si no se le pone nombre al sitio, entonces se le
aplica uno automáticamente.

www.magix.es
 Diseño web adaptativo 299

Crear páginas web RWD desde las plantillas

Con mucho la forma más sencilla de comenzar a utilizar variantes es usar uno de los
diseños de plantillas de páginas web de la GALERÍA DE DISEÑOS o del CATÁLOGO DE
CONTENIDO : puedes ver que plantillas vienen con variantes por la (R) al lado del
nombre de la carpeta. Tan solo haz doble clic en la plantilla de una página web para
abrirla y editarla.

Cuando abras una plantilla verás dos pestañas de documento, una será la del
documento principal del sitio web llamada variante principal y otra plantilla más
estrecha llamada variante de móvil. Web Designer muestra cada variante en una
pestaña separada, de forma que puedes cambiar entre las variantes de forma fácil y
rápida. Te puede ser de ayuda organizar tus documentos web usando la opción de
menú "VENTANA" > "ORGANIZAR VISTAS" para alinear tus variantes una junto a otra.

Crear sitios web RWD desde sitios existentes

Para crear una variante desde un sitio web existente tienes que abrir el diálogo
VARIANTES DE PÁGINA WEB. Cualquiera de los siguientes pasos te permitirá hacerlo:

• Haz clic en "HERRAMIENTAS" > "VARIANTES DE PÁGINA WEB" > "VARIANTES DE

PÁGINA WEB" .
• Haz clic derecho en la pestaña de documento y seleccionar "VARIANTES DE
PÁGINA WEB" para abrir el diálogo y también para ver tus variantes.
• Haz clic derecho en cualquier lugar del área de trabajo y selecciona "VARIANTES
DE PÁGINA WEB" > "VARIANTES DE PÁGINA WEB" para ver el diálogo.

Variantes de página web

Haz clic en el botón CREAR y elige un ancho de diseño en píxeles. Las dos variantes
arriba describen páginas web d 760 píxeles para la variante principal y una variante
de móvil que tiene por defecto un ancho de 480 píxeles. Lo que sucede es que el
navegador web que se visita con un ancho de 620 píxeles o mayor verá la variante
mayor mientras que un navegador con un ancho menor de 620 píxeles verá la
variante de móvil.
300

Puedes ver y editar las dimensiones de las variantes existentes haciendo clic en el
botón PROPIEDADES... .

Cuando creas una nueva variante, todo el contenido de la página web principal
aparece en su mayoría inalterado, pero el tamaño de página cambia y el fondo de
página se ajusta. Depende de ti si quieres volver a ajustar el diseño como desees para
esta capa. Puedes mover los elementos alrededor de la página libremente, reducir el
ancho de las columnas de texto, cambiar el tamaño y la posición de las imágenes y
tendrás que hacerlo para todas las páginas de tu variante de sitio web.

Puedes cambiar el título y el ancho de píxel de una variante en cualquier momento

haciendo clic en los botones PROPIEDADES y luego ACTUALIZAR del diálogo.

Nota: el punto de inflexión entre dos variantes está a medio camino entre los anchos
de las dos. Así en el caso arriba descrito para anchos de navegador inferiores a 620,
mostrará el más estrecho y en el caso de los anchos por encima, mostrará el más
ancho. Tenlo en cuenta también porque la mayoría de los dispositivos móviles
siempre tratan de ajustar el contenido del navegador a la pantalla, no importa que tu
página web sea más ancha que los píxeles de su pantalla: se reducirá para adaptarlo
al navegador.

Compartir a través de variantes

Cuando creas una variante nueva, la mayoría del contenido se comparte o se
comparte en tiempo real a través de todas las variantes, pero el tamaño y la posición
de ese contenido es propio de cada variante.

• Si editas el texto, se cambiará en todas las variantes.

• Si cambias el tamaño de los objetos, el cambio se aplicará a una sola variante
(es probable que quieras que los objetos tengan diferentes posiciones y
tamaños en las diferentes variantes.
• Si arrastras y sueltas una foto en una foto existente, se reemplazará en todas las
variantes.
• Si editas la forma de una foto, la recortas o cambias el relleno (el tamaño de
imagen, la rotación o la posición dentro del marco de la foto), entonces estos
cambios solo afectan a esa variante. Esto es útil porque significa que puedes, no
solo cambiar el tamaño y posición de las fotos en la variantes, sino también
cambiar su relación de aspecto y el recorte de la imagen.

Haz clic en un objeto para ver si está compartido en tiempo real o no.

www.magix.es
 Diseño web adaptativo 301

Esta foto tienen un marcador de doble

línea en el ángulo superior, lo que
indica que está compartida en tiempo
real en una o más variantes.

Puedes modificar el tamaño, recortar y

ajustar el relleno como necesites y el
cambio seguirá afectando solo a esa
variante. Pero si sustituyes la foto, por
ejemplo colocando una foto encima,
entonces cambiarán todas las
variantes.

Cuando creas un objeto nuevo (por ejemplo un área de texto, una foto o un gráfico)
en principio no se comparte entre las variantes. Si quieres compartirlo, usa el menú
"HERRAMIENTAS" > "VARIANTES DE PÁGINA WEB" o tan solo haz clic derecho en el
elemento y selecciona "VARIANTES DE PÁGINA WEB" > "COMPARTIR CON TODAS LA
VARIANTES" . Selecciona "DEJAR DE COMPARTIR CON VARIANTES" si no quieres que un
objeto se comparta entre las variantes. Este menú también te da la opción de borrar el
objeto de todas la variantes.

Nota técnica: si tienes variantes diferentes de fotos, es decir, diferentes tamaños,

recortes o posición de relleno, entonces Xara tiene que crear múltiples versiones de
la foto para la página web publicada. Sin embargo esto no tiene costes de
rendimiento (no ralentiza tu página web), ya que el navegador web carga en un
principio la versión correcta y luego, en el fondo, descarga las imágenes de las otras
variantes. Esto significa que la versión inicial que estás mirando (en el móvil o en la
versión de escritorio) se descargará tan rápido como pueda, pero que si cambias el
ancho de tu navegador o la orientación, cambiará de forma inmediata a la otra
versión.

Variantes y objetos repetidos

Cuando los objetos repetidos (en la página 143) como las barras de navegación, los
encabezados y los pies de página aparecen en varias variantes, no pueden
compartirse a través de ellas. En lugar de eso, cada variante tiene su propio conjunto
de objetos repetidos separado.

Variantes y barras de navegación

Es probable que quieras un diseño de barra de navegación en una variante más
estrecha. Las barras de navegación en cada variante son independientes, de modo
que puedes adaptarlas como sea necesario, incluido el cambio de diseño de la barra,
arrastrando un diseño de barra de navegación de la GALERÍA DE DISEÑOS y soltándolo
en la barra existente en la variante que quieres cambiar. Puede que quieras, por
ejemplo, una barra horizontal para páginas web anchas y una vertical para
dispositivos estrechos.
302

Una solución eficiente de espacio para las barras de navegación en una variante de
página web para móviles estrechos es tener un solo botón de navegación con un
menú de enlaces a otras páginas en el sitio web en lugar de una barra con un botón
para cada página. Ver Barras de navegación de botón único (en la página 387) para
más detalles.

Publicación de variantes
Publicar tu página web con variantes es fácil y no difiere de publicar una página web
normal. Tu página web es capaz de determinar la resolución del dispositivo de
visualización de forma automática y proporcionar la variante adecuada en relación al
ancho que tenga.

Puedes probarlo cambiando el ancho de tu navegador web cuando hagas la vista

previa de tu página: hazlo más estrecho y verás como cambia instantáneamente para
mostrar la variante móvil de tu página web.

www.magix.es
 Supersites 303

Supersites

Sobre las Supersites

Los navegadores web modernos admiten muchos efectos HTML5 y CSS3 avanzados,
permitiendo la creación de páginas web mucho más dinámicas y atractivas
visualmente.

Las Supersites utilizan estos efectos para permitirte añadir transiciones de página
dinámicas animadas y opciones de visualización para tus páginas web cuando un
usuario va haciendo clic al navegar por tu página web..

Las animaciones de Supersites implican la aceleración de hardware, que es admitida

por casi todos los navegadores modernos, incluyendo aquellos de teléfonos y
tabletas, para asegurarse una animación rápida y fluida.

Mientras las Supersites no resultan adecuadas para las páginas web complejas y
grandes, son especialmente apropiadas para las páginas pequeñas o para
documentos web, presentaciones y para cualquier ocasión en que se requiera un
contenido de estilo diapositiva. Las presentaciones (en la página 396) se publican
siempre como Supersites.

Las opciones de visualización verticales u horizontales permiten al usuario deslizarse

a través de las páginas usando un ratón o incluso con toques de pantalla a través de
las páginas cuando se usa una tableta u otro dispositivo móvil. Las páginas se
presentan como una lista de desplazamiento única. Alternativamente una selección
de transiciones de página ofrece una amplia gama de transiciones entre las que elegir.

Habilitar Supersites
Abre el diálogo OPCIONES DE EXPORTACIÓN WEB para ver las opciones
Supersite."HERRAMIENTAS" > "OPCIONES DE EXPORTACIÓN WEB". O también haz clic
derecho en tu página y abre el diálogo PROPIEDADES WEB y haz clic en "PÁGINA WEB" >
"OPCIONES DE EXPORTACIÓN WEB".
304

Diálogo de opciones de exportación web

Elige la opción SUPERSITE y selecciona. Puedes seleccionar las opciones de

desplazamiento VERTICAL u HORIZONTAL o las TRANSICIONES DE PÁGINA .

Si escoges una opción de desplazamiento VERTICAL u HORIZONTAL , puedes

especificar el espacio entre las páginas individuales en unidades de píxel (1 a 1000 px
con una distancia por defecto de 8 px). La pequeña ventana de vista previa mostrará
tu opción para que tengas una idea del resultado final.

Para aplicar una transición de página, selecciona TRANSICIONES DE PÁGINA y elige

entonces un EFECTO DE TRANSICIÓN del menú desplegable. Puedes controlar la
velocidad de transición y también que las páginas tengan la opción ADAPTAR TAMAÑO
A LA PANTALLA , de modo que se redimensionen de forma automática para adaptarse
a la ventana del navegador. El efecto de transición que elijas se aplicará a todas las
páginas de tu sitio web. Nuevamente, la pequeña ventana de vista previa se
actualizará para mostrar tu elección.

Si quieres añadir una transición específica a una página individual, entonces ve a la

pestaña PÁGINA en el DIÁLOGO DE PROPIEDADES WEB y aplica allí la transición. La
configuración de las transiciones a nivel de página tiene prioridad frente a aquellas
configuraciones para el sitio web completo en las OPCIONES DE EXPORTACIÓN WEB .

Ten en cuenta que la opción ADAPTAR TAMAÑO A LA PANTALLA solo funciona

realmente bien para las páginas cortas y donde las páginas de tu sitio web tengan el
mismo alto y ancho. Si usas esta opción con páginas largas, el resultado no es bueno
porque el navegador encogerá la página de modo que su alto se ajuste al alto del
navegador o dispositivo.

www.magix.es
 Supersites 305

Necesitas hacer una vista previa de tu página web en un navegador web

separado para ver si las animaciones para la transición funcionan bien (mejor
que usar la ventana de vista previa del navegador incorporado, ya que no te
muestra las animaciones de forma fluida). Haz clic en el botón Vista previa
de página web de la barra de herramientas y luego haz clic en uno de los
iconos del navegador en el extremo superior derecho de la ventana de vista
previa para ver las transiciones en un navegador web separado que tienes en
tu dispositivo.

Selección de iconos de navegación en la ventana de vista previa de página web.

306

Objetos sticky y stretchy

Objetos sticky
Algunos sitios web tienen elementos de página que permanecen fijos en la pantalla y
se desplazan en ella cuando navegas hacia abajo, como los controles de navegación o
los iconos de redes sociales. En general, estos permanecen en el borde superior de la
ventana del navegador, algunas veces hacia la izquierda o derecha, y no pueden
desplazarse fuera de la ventana. El beneficio de los objetos sticky es que siempre
quedan visibles. Entonces podrás, por ejemplo, contar con acceso directo a la
navegación de páginas sin tener que volver hacia arriba en la página.

Puedes convertir cualquier objeto en "sticky", como un gráfico, un mapa de bits (o

foto) o un objeto de texto. También puedes añadir animaciones a los objetos sticky.
Para más información consulta Animaciones web (en la página 431).

Enlaces externos ubicados como objeto sticky en el extremo derecho de la ventana de navegador.

Para convertir un objeto en sticky o stretchy, selecciónalo primero y luego

haz clic en el icono de PROPIEDADES WEB

• o selecciona la opción del menú "HERRAMIENTAS" > "OBJETOS

STICKY/STRETCHY..."
• o simplemente haz clic derecho sobre el objeto y selecciona OBJETO
STICKY/STRETCHY... del menú desplegable.

Esto abrirá el diálogo PROPIEDADES DEL OBJETO STICKY/STRETCHY . Puedes activar o

desactivar la función con la casilla.

www.magix.es
 Objetos sticky y stretchy 307

Diálogo de propiedades del objeto sticky

Para los objetos sticky en la mitad superior de tu página, la distancia entre el objeto y
el extremo superior de la página determina la distancia desde la parte superior de la
ventana del navegador en la página publicada. Entonces, si colocas el objeto a 20 px
desde el extremo superior de la página, estará fijo a 20 px del extremo superior en la
ventana del navegador y el contenido de la página se desplazará debajo de él.

Si el objeto está más cerca del extremo inferior de la página que del superior, se fijará
respecto del extremo inferior de la ventana del navegador. Entonces, si fijas el objeto
sticky a 20 px del extremo inferior de la página, el objeto estará siempre a 20 px del
extremo inferior de la ventana del navegador.

Todos los objetos sticky que coloques en tu página (o que se superpongan levemente
con la página) estarán centrados horizontalmente en la ventana del navegador, para
que siempre aparezcan en la página sin importar el ancho de la ventana del
navegador, ya que la página también estará centrada en la ventana del navegador. Si,
por el contrario, quieres que el objeto se fije sobre el extremo izquierdo de la ventana
de navegador, coloca el objeto hacia la izquierda. De forma similar, si quieres que se
fije sobre el extremo derecho, colócalo sobre la derecha.

Esta es una ilustración de elementos colocados sobre los extremos de una página
típica o respecto de ellos.
308

La etiqueta describe el lugar en donde aparecerá un elemento colocado en esa ubicación de la

página cuando se visualice en la ventana del navegador.

Así aparecerá la página en la ventana del navegador.

Los elementos sticky en general permanecen en la parte superior del resto de la

página, por lo que estarán ordenados para que se encuentren delante de todo el
contenido. Sin embargo, puedes colocar objetos sticky detrás del contenido de la
página, si los colocas en la capa de fondo del tablero de dibujo (en la página 315).

Haz vista previa de la posición de tu objeto sticky en el navegador web incluido

utilizando uno de los botones de vista previa web.

www.magix.es
 Objetos sticky y stretchy 309

Objetos stretchy
Los objetos stretchy ayudan a crear diseños en los que no existen límites evidentes
entre las páginas y el fondo de la página cubre toda la ventana del navegador y se
extiende para cubrir todo el ancho del navegador. Puedes hacer que cualquier
rectángulo o imagen se extienda para cubrir la ventana del navegador tanto en
sentido horizontal como vertical, si utilizas el diálogo Stretchy (el mismo diálogo que
los controles sticky). Estos elementos stretchy están pensados como fondos de
página y, por lo tanto, aparecen detrás del otro contenido de la página. Es posible que
quieras colocarlos en una de las capas de fondo (en la página 311).
Sin embargo, también puede que quieras que un objeto sticky tenga el ancho o altura
completos, por lo que los objetos stretchy que también son sticky aparecerán delante
del contenido de tu página principal.

Por ejemplo, es posible que quieras colocar un encabezado sticky sobre el extremo
superior de tu página web con una barra de navegación sticky sobre él.

El navegador tiene un encabezado stretchy y sticky que cubre la parte superior de su ventana. El
contenido de la página se desplazará debajo del encabezado que permanecerá visible.
310

Los objetos stretchy pueden fijarse de forma que se ESCALEN o formen en MOSAICO
con las opciones del diálogo. En la mayoría de los casos querrás que un objeto
stretchy se redimensione para que se ajuste a la ventana del navegador, por lo que
escogerás la opción para escalar. Esto funciona muy bien con fotos y rectángulos con
relleno liso.

Si usas un rectángulo con un relleno con textura, querrás utilizar "mosaico" en lugar
de la opción escalar, para que la textura tenga la misma apariencia en cualquier
ventana de navegador. En estos casos, selecciona la opción mosaico. Si tienes un
relleno con gradación vertical, también deberás elegir la opción mosaico.

Notas de uso: se supone que extenderás únicamente rectángulos e imágenes

rectangulares. La característica stretchy no será útil con otras formas.

Cambio de tamaño de fotos

Puedes hacer que una imagen stretchy cubra el ancho completo de la ventana del
navegador. En este caso, la imagen se ampliará si aumentas el ancho del navegador,
pero lo hará dentro de la altura de la imagen existente (de forma que no crecerá en
sentido vertical y empujará todo hacia abajo a medida que ensanchas el navegador).
Esto significa que la imagen se recortará progresivamente en sentido vertical a
medida que crece verticalmente (la relación de aspecto de la foto no se alterará jamás
porque el resultado sería muy pobre).

Si quieres utilizar una foto como elemento stretchy, amplíalo al ancho completo de la
página y luego selecciona ANCHO COMPLETO en el cuadro de diálogo
STICKY/STRETCHY . Luego podrás decidir si quieres que la imagen se amplíe respecto a
la parte superior, al centro o a la parte inferior, usando los controles provistos. La
opción stretchy ALTURA COMPLETA funciona de la misma manera pero para las
imágenes que se extienden verticalmente (menos útil).

Una imagen de ancho completo puede redimensionarse respecto a la parte superior,

centro o parte inferior de la imagen.

Una imagen de altura completa puede redimensionarse respecto a la parte izquierda,

central o derecha de la imagen.

Nota de resolución: Es necesario que la foto sea una imagen de alta resolución (en la
página 327) porque se ampliará para adaptarse al ancho del navegador, lo que
podría ser un tamaño de pantalla de alta definición de aproximadamente
2000 píxeles de ancho. Por lo que si utilizas una imagen de resolución baja o media,
el resultado será una imagen borrosa cuando se la amplíe al ancho máximo.

www.magix.es
 Objetos sticky y stretchy 311

Combinaciones de objetos sticky y stretchy

La tabla muestra qué tipos de objetos funcionan con cuáles combinaciones sticky y
ancho/altura (stretchy).

Tipo de objeto Sticky Ancho/Altura

Texto Sí No
Imágenes (incluidos grupos) Sí Sí
Marcadores de lugar/widgets Sí No
Paneles de texto Sí No
Grupos suaves Sí Sí
Sticky NC Sí
Ancho/altura total Sí NC
Objetos en la capa de fondo de página Sí Sí
Objetos en la capa de fondo de tablero de Sí Sí
dibujo
Animaciones de aparición de objetos Sí No
Barras de navegación Sí No
Objetos en capas popup Sí Sí

Importante: Algunos widgets de la versión 10 de la galería no son compatibles con las

nuevas características de animación y sticky si se utilizan en la misma página o en el
mismo supersite, por lo que es probable que debas reemplazarlos con las versiones
actualizadas de la galería de diseños. Haz clic aquí
http://support.xara.com/index.php?/Knowledgebase/Article/View/816/ para más
información en el sitio de asistencia.
312

Fondos de página web

La mayoría de diseños de página en la GALERÍA DE DISEÑOS tienen dos tipos de fondo.
Un fondo de tablero de dibujo amplio que se extiende a lo largo del fondo de toda la
ventana del navegador cuando exportas tu página. Sobre él está el fondo de página
con todos los otros elementos que constituyen la página web.

Por defecto las plantillas de la galería de diseño contienen una variante principal y una
móvil dentro del mismo documento web.

Fondo del tablero de dibujo o del navegador

Fondo de página

Configurar los colores del fondo de página o tablero de dibujo

Cuando creas un nuevo documento en blanco ("ARCHIVO" > "NUEVO" ) la página es
transparente (sin color) por defecto, por lo que tan solo verás el color del tablero de
dibujo tras ella, que es blanco por defecto. Esta área de página es donde colocas todos
los elementos de tu página web. También verás un contorno guía rectangular suave
que muestra los límites de la página sobre el tablero de dibujo. Puedes desactivar
esta guía si quieres (haz clic derecho en la página y desactiva "FONDO DE PÁGINA" >
"MOSTRAR TAMAÑO DE PÁGINA".

Si arrastras un color desde la línea de colores al tablero de dibujo y lo sueltas, todo el

fondo de la página adoptará ese color. Sucede esto porque el fondo de página es por

www.magix.es
 Fondos de página web 313

defecto transparente, reflejándose así el color del tablero de dibujo subyacente. Y esto
es exactamente lo que verás en el navegador cuando realices una vista previa de tu
página.

Sin embargo, también puedes configurar el tablero de dibujo en un solo color, tal
como se describe más arriba, y luego fijar el área alrededor de la página en otro color.
Tan solo suelta un color sobre el fondo de página para configurar su color. 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 el fondo de 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 selecciona "FONDO DE PÁGINA" > "EDITAR COLOR DE PÁGINA" para abrir el
editor de color. Entonces 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 selecciona "FONDO DEL
TABLERO DE DIBUJO" > "EDITAR COLOR DEL TABLERO DE DIBUJO" .
314

Para restablecer el color blanco del fondo del tablero de dibujo, haz clic derecho sobre
el tablero de dibujo y selecciona "FONDO DEL TABLERO DE DIBUJO" > "RESTABLECER" .
Para restablecer el fondo de página a su color transparente por defecto, haz clic
derecho en el fondo de página web y selecciona "FONDO DE PÁGINA" > "RESTABLECER".

Si tienes más de una página en tu documento de página web y quieres aplicar un

fondo y colores del tablero de dibujo globalmente, es decir, en cada página de tu
documento de sitio web, puedes hacerlo fácilmente. Haz clic derecho sobre el tablero
de dibujo o sobre el fondo de página y selecciona COPIAR FONDO DE TABLERO DE
DIBUJO o COPIAR FONDO DE PÁGINA y selecciona entonces PEGAR TABLERO DE
DIBUJO/FONDO DE PÁGINA EN TODAS LAS PÁGINAS.

Fondos de plantilla y cambio de color de fondo

MAGIX Web Designer 11 Premium te permite arrastrar y soltar una gama de fondos
de página diseñados previamente desde la GALERÍA DE DISEÑO directamente en tu
documento web. Elige entre la selección de fondos del apartado FONDOS DE PÁGINA
WEB de la galería. Puedes personalizar las texturas con tus propios colores
arrastrándolos desde la línea de colores sobre el fondo o usando clic derecho sobre el
fondo y abriendo el menú "FONDO DE TABLERO DE DIBUJO" > "EDITAR COLOR DE
TABLERO DE DIBUJO" para desplegar el editor de color.

Cuando cambias el color de un fondo que está compuesto por una serie de colores,
Web Designer te preguntará qué color quieres cambiar. Puede que estos sean colores
con nombre (como sería en el caso de que estuvieras trabajando con uno de los
temas de plantillas prediseñadas para páginas web, o con colores que hayas
nombrado previamente, o incluso podrían ser colores locales si estuvieras cambiando
tu propia selección de color) Consulta "Reemplazar colores" para más información.

Ten en cuenta que cuando arrastres uno de los fondos de página web disponibles
sobre el fondo del tablero de dibujo, reemplazará todos los objetos que están
actualmente en la capa del tablero de dibujo, y a este respecto es una operación
destructiva.

Fondos fijos no desplazables

Normalmente, si tienes una página web larga por la que te puedas desplazar en el
navegador, el fondo del navegador se desplaza con ella, por lo que el contenido de la
página permanece en la misma posición en relación al fondo. Pero puede fijar el fondo
para que no se desplace con el contenido de la página. Haz clic derecho sobre el
tablero de dibujo y selecciona "FONDO DE TABLERO DE DIBUJO" > "FIJO" . Entonces,
cuando hagas una vista previa, el contenido se desliza sobre el fondo fijo mientras te
desplazas (para ver este efecto, asegúrate de que tu página es suficientemente larga
como para que el navegador muestre la barra de desplazamiento).

www.magix.es
 Fondos de página web 315

Para cambiar al estado por defecto, selecciona "FONDO DE TABLERO DE DIBUJO" >
"DESPLAZAMIENTO" .

Usar fotos como fondo.

Crear fondos de foto.
Si quieres crear un fondo propio de foto o de textura de mapa de bits en lugar de
personalizar un fondo prediseñado de la galería de diseños, es muy fácil de hacer.

Primero, importa la foto o textura en tu documento, tal y como lo harías para subirla a
tu página web. Entonces haz clic en la foto y escoge entre CONFIGURAR PÁGINA COMO
FONDO o CONFIGURAR TABLERO DE DIBUJO COMO FONDO , dependiendo de cual quieras
configurar.

Segmentación
En función de la naturaleza y tamaño de la imagen, puede que quieras que la imagen
se repita a modo de mosaico para rellenar el fondo. Para cambiar esta configuración,
haz clic derecho en el fondo de página o de tablero de dibujo (dependiendo de nuevo
de lo que quieras cambiar) y selecciona o desbloquea la opción "mosaico" en el
submenú Fondo de página/ Fondo de tablero de dibujo.

Rellenar la ventana del navegador

Al usar una foto como fondo del tablero de dibujo (que se convierte en el nuevo fondo
del navegador) hay una opción más. Puedes hacer que la foto cambie de tamaño en
relación al tamaño de la ventana del navegador del visitante. Tan pronto como la
ventana de navegador cambie de tamaño, la foto lo hace también para adaptarse. Haz
clic derecho en el tablero de dibujo y selecciona "FONDO DE TABLERO DE DIBUJO" >
"RELLENAR LA VENTANA DEL NAVEGADOR" .

Capas de fondos de página o de tablero de

dibujo
Si abres la GALERÍA DE PÁGINAS Y CAPAS verás tanto la CAPA DE FONDO DE PÁGINA
como la CAPA DE FONDO DE TABLERO DE DIBUJO. Estas capas contienen objetos que
montan ambos fondos en tu documento.

Estas capas se encuentran generalmente bloqueadas, por lo que no puedes

seleccionarlas para editar su contenido. Sin embargo, puedes desbloquearlas en la
GALERÍA DE PÁGINAS Y CAPAS y realizar cierto tipo de edición limitada para
personalizar el fondo de tu página o tablero de dibujo. Tan solo haz clic en los
símbolos de bloqueo al lado de las capas para desbloquearlas. Una vez
desbloqueadas, puedes hacer actual una capa de fondo (de forma que se dibujan
nuevos objetos sobre ella) o editar los objetos sobre ellas al igual que para las capas
normales.
316

Si has elegido, por ejemplo, un color diferente para el fondo de página, habrás visto un
rectángulo que quedó seleccionado (mira en la barra de estado) cuando hiciste clic en
el fondo de página. Ahora puedes editar de forma limitada este rectángulo, insertarle
un relleno con gradación con la HERRAMIENTA DE RELLENO o redondear sus esquinas
con la HERRAMIENTA DE RECTÁNGULO .

Si has colocado elementos en el tablero de dibujo (posiblemente tengas gráficos,

fotos u otros trabajos aun no terminados que no quieras que aparezcan como parte
de tu documento web) estos elementos no aparecerán cuando hagas una vista previa
de la página web. Si quieres que aparezcan como parte del fondo, entonces muévelos
hasta la capa FONDO DE TABLERO DE DIBUJO.

Las dos estrellas están sobre la capa del tablero de dibujo y por lo tanto aparecen como parte de
la página cuando se haga una vista previa en la ventana del navegador.

Ten en cuenta que una vez que hayas desbloqueado la capa de un fondo, se
comportará exactamente como cualquier otra capa abierta. De este modo, cuando
hagas clic derecho sobre un objeto en la capa de fondo desbloqueada, verás el menú
de capa normal relativo a los objetos sobre la capa y no el menú de la capa de fondo
propiamente, cosa que ves cuando la capa está bloqueada por defecto.

Variantes y fondos de diseño web adaptativo

Con un sitio web de diseño web adaptativo (en la página 297), el color principal o el
diseño del fondo de tablero de dibujo (el área alrededor de la página que determina el
fondo de la ventana del navegador cuando se publica la página) puede cambiar de
una variante a otra, y cada página y cada variante de página se exporta con su propio
rectángulo de tablero de dibujo.

Las excepciones a esta regla son los Supersites (en la página 303) verticales y
horizontales. Como puede mostrarse únicamente un fondo, en la primera página solo
se utilizará el fondo del tablero de dibujo de la primera variante.

Puedes colocar objetos adicionales en la capa de fondo de tablero de dibujo y estos

pueden variar también entre las variantes de las páginas. Así que, por ejemplo,
www.magix.es
 Fondos de página web 317

puedes tener una forma superpuesta en el borde de la página y esta puede colocarse
todavía de forma diferente en cada variante u omitirse en algunas.

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.
318

Publicar página web

Publicación al sitio web TaskPilot M

Para subir tu página web a Internet de forma instantánea puedes publicarla en
TaskPilot o MAGIX Online World (ambas opciones te ofrecen un servicio de
alojamiento web gratuito) o bien publicarla en otro espacio web. Publicarla en
TaskPilot resulta sencillo porque está integrado en Web Designer.

Los usuarios de MAGIX Online World todavía pueden publicar allí de forma usual,
pero los nuevos usuarios ya no pueden registrarse para este servicio. Los nuevos
usuarios que desean hacer uso del servicio de alojamiento web gratuito utilizarán
TaskPilot. Los usuarios de MAGIX Online World deben hacer clic en PUBLICAR EN UN
ALOJAMIENTO WEB ALTERNATIVO... y luego seguir las instrucciones del diálogo "MAGIX
ONLINE WORLD" > "CONFIGURACIÓN" .

Selecciona "ARCHIVO" > "PUBLICAR PÁGINA WEB " o haz clic en el icono
publicar en la barra de herramientas de la página web.

La primera vez que hagas esto verás aparecer el diálogo de inicio de sesión de
TaskPilot.

Inicia sesión con tu nombre de usuario y contraseña TaskPilot: se te habrá

suministrado ya con la compra o al registrar Web Designer en la página web de
MAGIX. Otros usuarios pueden hacer clic en el botón REGISTRO GRATUITO para

www.magix.es
 Publicar página web 319

obtener un nombre de usuario y contraseña para MAGIX de forma inmediata. Puedes

optar por no cerrar sesión, lo que significa que cuando salgas de Web Designer y
vuelvas a entrar, no deberás volver a iniciarla.

Una vez que hayas iniciado sesión verás el siguiente diálogo:

Selecciona la dirección de tu página web en el menú desplegable. También puedes

introducir el nombre de una subcarpeta, p. ej., "página 1", y verás cómo se añade al
final de tus direcciones web en el campo superior. Te será útil si quieres publicar
varias páginas en la misma cuenta de TaskPilot: puedes poner cada una en una
subcarpeta diferente. También es conveniente si quieres añadir una contraseña para
proteger una carpeta.

Haz clic en PUBLICAR . Tu página web se publicará y verás la ventana de transferencia

de datos que te indica el progreso de la publicación. Cuando la publicación haya
terminado, podrás navegar por tu página web a través del enlace que aparece en la
ventana de transferencia de datos. Publicar en TaskPilot genera automáticamente un
mapa de bits que verás como un archivo mapadebits.xml en tu espacio web de
TaskPilot. Es una lista de las páginas en tu sitio web y ayuda a los buscadores a
encontrar y hacer una lista de todas las páginas de tu sitio.

El botón PROTECCIÓN POR CONTRASEÑA te lleva a TaskPilot, donde podrás controlar el

acceso a carpetas configurando las contraseñas. Puedes crear una lista de contactos
que podrás organizar en grupos de usuarios. Quienes deseen visitar el área de
protección por contraseña tendrán que facilitar una dirección de correo electrónico y
una contraseña para poder acceder.

El botón CENTRO DE CONTROL te llevará a TaskPilot, donde podrás administrar tu

cuenta así como navegar, ver y eliminar archivos que hayas cargado en tu espacio
web.

Haz clic en el botón NUEVA DIRECCIÓN WEB si quieres elegir una dirección web
diferente para tu página web. Puedes comprar, por ejemplo, tu propio nombre de
dominio (p. ej., xara.com), en lugar de que tus direcciones web incluyan magix.net. Si
adquieres otras direcciones web, estas aparecerán en "Tu página web" en la lista
desplegable superior cuando vuelvas a publicar. Utiliza la opción "Actualizar" de esa
lista para actualizarla en caso de que no incluya todas las direcciones que esperabas
ver.
320

Publicación en un alojamiento web alternativo

Si no quieres publicar en TaskPilot, tan solo selecciona PUBLICAR EN UN ALOJAMIENTO
WEB ALTERNATIVO... del cuadro de diálogo que aparecerá cuando hagas clic en el
ícono de publicación en la barra de herramientas superior.

Así se abrirá la pestaña PUBLICAR del diálogo Propiedades de web donde puedes
configurar los detalles FTP de una empresa alternativa de alojamiento web.
También puedes configurar o cambiar otras propiedades, lo que te permitirá
publicar tu sitio web en Internet, sin que tengas que volver a realizarlo cada vez que
quieras publicar. Los usuarios de MAGIX Online World (MOW por sus siglas en
inglés) también pueden publicar a través del cuadro de diálogo CONFIGURACIÓN DE
MAGIX ONLINE WORLD .

Deberás obtener los detalles FTP de tu empresa de alojamiento web. Estos son:

• Dirección de alojamiento
• Nombre de usuario
• Contraseña
• Ruta completa de carpetas (incluidas las subcarpetas de ser necesario) que tu
empresa de alojamiento web te exige para la publicación.

Pestaña de publicación del cuadro de diálogo de propiedades web

www.magix.es
 Publicar página web 321

1. Elige en que alojamiento FTP deseas publicar. En este caso escogerás OTROS
ALOJAMIENTOS WEB (VÍA FTP) .
2. Haz clic ahora en CONFIGURACIÓN... para personalizar tu configuración de FTP.
Se abrirá el siguiente diálogo...

Diálogo de configuración de otros alojamientos web

1. Elige cómo quieres conectarte en el menú desplegable: las opciones son FTP o,
los dos protocolos más seguros, FTPS o SFTP.
2. En el campo Dirección FTP del alojamiento, introduce la dirección FTP de tu
alojamiento web. Suele ser el mismo nombre de tu dominio, si lo tienes. Por
ejemplo, para usuarios de MAGIX Online World sería Ftp.MAGIX-online.com.
3. En el campo "Nombre de usuario FTP", introduce tu nombre de usuario.
4. En el campo Contraseña FTP, introduce tu contraseña FTP.
5. El campo opcional "Subcarpeta" permite publicar la página web en una
subcarpeta. Si creas una subcarpeta aquí, todas las páginas del sitio web se
publicarán en esa carpeta. El hecho de publicar en una subcarpeta o no,
dependerá de las condiciones de tu servicio de alojamiento web: en algunos no
necesitarás publicar en una subcarpeta, mientras que otros exigen que publiques
en una subcarpeta "pública" o "www", por ejemplo. Antes de publicar la página
web, tienes que comprobar la ruta completa de la carpeta FTP en la que tu
empresa de alojamiento web te exige que publiques, ya que los requisitos varían
considerablemente. Por ejemplo, si la empresa de alojamiento web quiere que
322

publiques en http://tudominio.com/public_html, entonces tienes que introducir

"public_html" en el campo de subcarpeta.
6. Si quieres un mapa del sitio para tu página, o si deseas que se incluya tu página
en la galería de usuarios Xara http://www.xara.com/websitegallery, debes
introducir la URL completa de tu página publicada en el campo URL de página
web. Para el mapa del sitio web se genera automáticamente un archivo llamado
mapadelsitio.XML. Es una lista de las páginas en tu sitio web y ayuda a los
buscadores a encontrar y hacer una lista de todas las páginas de tu sitio. Si no
has especificado una URL aquí, al exportar tu página web, no se creará el mapa
de sitio.
7. Haz clic en el botón "Explorar espacio web" para examinar, ver y eliminar
archivos que has subido a tu servidor FTP (opcional). También puedes
establecer una ruta de subcarpetas que aparecerá automáticamente en el
campo de subcarpeta (opcional).
8. Cuando hayas terminado, haz clic en Aceptar para volver a la pestaña "Publicar"
del diálogo "Propiedades web".
9. Haz clic en Aceptar. Web Designer muestra un diálogo para confirmar los
detalles de publicación que está a punto de utilizar. Haz clic en Publicar.

Diálogo de detalles de publicación

Transferencia de datos
1. Tras hacer clic en "Publicar", Web Designer abre una pequeña ventana que
muestra el progreso de la transmisión de datos y te indica cuando la publicación
se haya completado. Si has introducido la URL de tu página web con los detalles
FTP, puedes acceder directamente a ella desde aquí.
2. Como alternativa, tan pronto como la transferencia finalice, podrás abrir una
ventana de navegador e ir a la URL de la página web publicada.

Nota: si introduces una subcarpeta en la pestaña "Publicar" del diálogo "Propiedades

web", la página se guardará ahí.

Importante: si no has asignado ningún nombre de página específico en la galería de

páginas y capas, el nombre que exportes en último lugar se utilizará como base para
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 la publicas a continuación, se

www.magix.es
 Publicar página web 323

publicará como test.htm en el servidor web y las páginas adicionales serán

test_2.htm, test_3.htm etc.

"index.htm" es el nombre común para la primera página de una web.

Nota: muchos servidores utilizan nombres de archivo que distinguen entre

mayúsculas y minúsculas. Así, por ejemplo, la dirección
web "xara.com/productos.htm" no es lo mismo que "xara.com/Productos.htm". Para
reducir la confusión y la probabilidad de errores, Web Designer obliga a que todos los
nombres de página se escriban en minúsculas y contengan solo caracteres
permitidos. Esto significa que no están permitidos los espacios en los nombres de
página. Sugerimos utilizar un guión bajo como separador alternativo.

Protocolos FTP seguros

Además del protocolo de transferencia de archivos (FTP por sus siglas en inglés),
Web Designer también admite los protocolos más seguros FTPS y SFTP. Algunos
alojamientos web te exigen cargar tu sitio utilizando uno de estos protocolos en vez
de FTP, ya que no es tan seguro.

Haz clic en el menú desplegable CONECTAR USANDO: en el cuadro de diálogo

CONFIGURACIÓN DE OTROS ALOJAMIENTOS WEB y verás las siguientes opciones:

Selecciona una de las tres opciones: la opción FTP usual o FTPS y SFTP que son más
seguras. Deberás saber qué protocolos de FTP admite tu empresa de alojamiento web
para completar los detalles FTP descritos anteriormente.

En general, lo que ocurre es que FTPS se asigna al puerto 21 mientras que SFTP se
asigna al puerto 22 como parte de la dirección IP del alojamiento. Esto es algo de lo
que no debes ocuparte porque Web Designer lo gestiona automáticamente por ti,
pero a veces, para brindar mayor seguridad, el administrador del sistema del anfitrión
asigna un número de puerto diferente y, si esto es así, tendrás que introducir el nuevo
puerto de forma manual como parte de la dirección FTP del alojamiento.

En este ejemplo, el número de puerto se ha cambiado a 22098 y, por lo tanto, se ha añadido a la

dirección del alojamiento como :22098.
324

Para más información, consulta nuestro artículo de la Base de datos de conocimiento

http://www.xara.com/support/sftp/ sobre la publicación utilizando protocolos de
FTP seguros.

Inclusión de la página web en la galería de

usuarios
El campo INCLUIR MI PÁGINA EN LA GALERÍA DE USUARIOS solo está disponible si has
añadido una URL válida (o si usas TaskPilot/MAGIX Online World). Si seleccionas
esta opción, después de publicar tu página, se la enviará para que se considere su
inclusión en la galería de páginas web creadas por usuarios de Web Designer.

Para más detalles, visita la galería en http://www.xara.com/websitegallery

http://www.xara.com/websitegallery o haz clic en el botón Más información.

Explorar espacio web

Si has completado los campos de dirección de FTP, el nombre de usuario FTP y la
contraseña de FTP, haz clic en el botón opcional Explorar espacio web para navegar,
ver y eliminar los archivos que has cargado a tu servidor FTP.

Puedes ver los archivos y abrir las carpetas para ver el contenido de las subcarpetas.
También puedes eliminar uno o muchos archivos. Selecciona múltiples filas con un
clic mientras pulsas Shift o Ctrl, tal como lo haces en el Explorador de Windows. Haz
clic en un encabezado de columna para ordenar los archivos según el criterio de esa
columna.

Navega por la lista de archivos que has cargado a tu servidor ftp

www.magix.es
 Publicar página web 325

Regresa a la vista de archivos original que habías abierto al lanzar el diálogo

Explorar espacio web
Te lleva a las carpetas de un nivel superior

Elimina un archivo o múltiples archivos seleccionados

Publicación rápida (solo archivos modificados)

Deja la casilla PUBLICACIÓN RÁPIDA (SOLO ARCHIVOS MODIFICADOS) seleccionada. De
esta forma la publicación será más rápida en la mayoría de los casos, ya que solo los
archivos modificados desde la última publicación son publicados de nuevo.

Guardar la configuración de publicación en el

documento
Deja activa la casilla GUARDAR LA CONFIGURACIÓN DE PUBLICACIÓN EN EL DOCUMENTO
para que se conserven guardados los detalles de publicación que has introducido en el
documento actual. Esto significa que siempre que abras el documento, tendrá ya los
detalles de publicación en él, por lo que puedes realizar actualizaciones fácilmente.

Cuando actives la casilla "Guardar configuración de publicación en el documento",

también podrás activar la casilla "Guardar contraseña" (no disponible para la
publicación en TaskPilot ni en MAGIX Online World). Selecciona esta casilla también
para guardar la contraseña FTP para el documento actual, si estás seguro de que eso
es lo que quieres. Esto no es recomendable, ya que significa que cualquiera que se
haga con una copia de tu archivo de diseño puede publicar en tu página web sin tener
que saber o introducir tu contraseña.

Cambiar entre cuentas TaskPilot/MAGIX Online World

Solo puedes trabajar sobre una cuenta TaskPilot/MAGIX Online World al mismo
tiempo porque con MAGIX Web Designer 11 Premium solo puedes estar registrado
en una única cuenta de este tipo a la vez. Por lo tanto, si quieres publicar una página
web en una cuenta TaskPilot/MAGIX Online World diferente, necesitas cerrar sesión
primero usando "COMPARTIR " > "SALIR ". Luego puedes volver a registrarte en otra
cuenta TaskPilot/MAGIX Online World y publicar como se describe arriba.

Del mismo modo, si cargas un documento de página web que contenga unos datos de
acceso a TaskPilot/MAGIX Online World diferentes a los de la cuenta en la que estás
actualmente registrado, verás aparecer el diálogo de registro del servicio si tratas de
publicar ese documento, de forma que puedas registrarte en la cuenta
correspondiente al mismo (de este modo se cerrará automáticamente la sesión actual
de TaskPilot/MAGIX Online World).
326

Guardar perfiles
Los perfiles te permiten guardar los detalles de publicación en tu equipo, de modo que
puedas recuperarlos y usarlos de nuevo en el futuro sin tener que introducirlos de
nuevo.

En PERFIL , haz clic en el botón GUARDAR PERFIL e introduce un nombre de perfil

adecuado. Ahora puedes seleccionar el perfil de la lista de perfiles en la parte superior
del diálogo, de forma que puedes usarlos en otros documentos sin tener que
reinsertarlos. Puedes guardar un perfil tanto con configuración TaskPilot/MAGIX
Online World como FTP.

Nota: puedes eliminar un perfil seleccionando en la lista de PERFIL y haciendo clic en

el botón ELIMINAR junto a él.

Documentos web y PDF

Tal vez la forma más usual de distribuir documentos impresos a una mayor cantidad
de personas sea mediante archivos PDF que se ofrecen como descarga. Desde el
punto de vista del diseño, los sitios webs y HTML están estrictamente restringidos.
Cada navegador muestra el texto de forma diferente y la disponibilidad limitada de
fuentes hace casi imposible asegurar que tu cliente verá exactamente tu diseño. Por
esto, los folletos, informes y todo tipo de documento en los que el diseñador quiera
conservar el control preciso del diseño, fuente, disposición y paginación se crean
como PDF.

Sin embargo, el formato PDF tiene una desventaja: requiere instalar plug-ins o
programas adicionales para poder visualizarlos. Designer Pro X9 presenta una nueva
forma de publicar en estilo "impreso" o documentos de tipo DTP que no implica la
utilización de PDF.

• Libre uso de fuentes. La capacidad de utilizar una amplia variedad de fuentes.

Puedes usar tus fuentes instaladas (las fuentes que se incluyen
automáticamente siempre que la licencia lo permita) o las más de 600 fuentes
de Google Fonts.
• Fotos y gráficos de alta resolución. Diseño libre: combina gráficos y texto en
cualquier lugar de la página.
• Resultados "lo que ves es lo que obtienes" con píxeles precisos. El documento
que diseñas en Designer Pro es exactamente lo que verá quien lo mire, con las
mismas fuentes, diseño y paginación.
• Sin necesidad de instalar ningún plug-in o lector independiente. Las páginas se
crean en HTML5. Tu documento es un documento web.
• Este formato es compatible con todos los navegadores modernos, incluyendo
dispositivos portátiles y tablets, y podrás desplazarte rápidamente y de forma
fluida por todo el documento.

www.magix.es
 Trabajar con fotos 327

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 11 Premium 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 11 Premium. El funcionamiento de la
Herramienta de fotos está contemplado en el capítulo Herramienta de fotos.

Imágenes de alta resolución

Las imágenes de alta resolución del mismo tipo que las imágenes de dispositivos
Retina(R) de Apple se pueden crear ahora automáticamente con Web Designer.

Para poder aprovechar las pantallas de tipo Retina es necesario, por lo general, crear
todas tus fotos y gráficos de páginas web con una resolución al menos de 96 dpi: esto
es el doble de píxeles por pulgada tanto vertical como horizontalmente, lo que cuatro
veces más píxeles por pulgada cuadrada. La parte negativa es que tus archivos serán
ahora más de cuatro veces mayores, reduciendo la velocidad de tu página web para
todos tus visitantes. Para aquellos visitantes de tu web que no tienen pantallas de alta
resolución esto es ciertamente injusto.

Web Designer resuelve este problema creando de forma automática fotos y gráficos
de alta resolución y actuando de manera inteligente al cargar los gráficos con la
resolución adecuada para el navegador que se está usando.
328

Esto significa que no se penaliza con una reducción de la velocidad para aquellos
visitantes sin Retina, pero aquellos que tienen navegadores de alta resolución
conseguirán ver la imágenes al doble de resolución y páginas web de mayor cantidad.

La creación de imágenes de alta resolución está activada por defecto: cuando

exportes tu página web, un visitante Retina o de alta resolución verá las imágenes y
gráficos con mayor resolución, mientras que un visitante estándar verá imágenes de
resolución normal. Lo único que tienes que hacer: asegúrate de que las imágenes que
quieres que aparezcan con alta resolución están guardadas en tus páginas web con
una resolución mayor que 100 dpi, ya que este es el punto límite en el cual Web
Designer asume que quieres que la imagen se renderice como alta definición.
Imágenes con una resolución inferior a 100 dpi permanecerán como imágenes de
definición estándar. No tendrás que preocuparte de esto por lo general, ya que, con la
función activada por defecto, todas las imágenes se optimizan a 192 dpi en el diálogo
OPTIMIZAR FOTO , por lo que quedan por encima del umbral de creación de imágenes
de alta resolución.

Ten en cuenta que debido a las imágenes de mayor tamaño y al hecho de que se
necesitan tanto las imágenes de alta resolución como las de resolución normal,
publicar páginas Retina lleva más tiempo que publicar páginas no Retina. Si deseas
deshabilitar la función, ve a la pestaña "PROPIEDADES DE WEB" > "PÁGINA WEB"
situada en el menú HERRAMIENTAS , o bien haz clic derecho sobre tu documento web
y selecciona "PROPIEDADES DE PÁGINA WEB" > "PÁGINA WEB" . Entonces desactiva la
casilla IMÁGENES RETINA (ALTA DEFINICIÓN) en la parte inferior del diálogo.

Si desear volver a formatear una página de definición estándar creada con una
versión anterior de Designer a una con imágenes de alta resolución, ten en cuenta
que tendrás que importar fotos de nuevo a Web Designer con la función Retina
activada.

Consulta Optimizar fotos y mapas de bits para más información sobre la resolución
de imágenes.

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.
www.magix.es
 Trabajar con fotos 329

Donde en otros programas deberías usar capas, en MAGIX Web Designer 11

Premium 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.

Grupos de foto
Si editas una foto con alguna herramienta, como la HERRAMIENTA DE OJOS ROJOS
INTEGRADA , la foto se agrupa con otros objetos que modifican la imagen de alguna
forma. Por ejemplo, con la HERRAMIENTA DE OJOS ROJOS , las formas de elipse que se
utilizan para modificar las áreas de ojos rojos de la foto se agrupan con la foto en sí
misma. Esto se llama GRUPO DE FOTO y lo verás en la línea de estado cuando
selecciones una de estas fotos modificadas.

Al igual que un grupo usual, el grupo mantiene a la foto unida con los demás objetos
que se añadieron para modificarla, pero las HERRAMIENTAS DE FOTO y otras
herramientas lo tratan como si fuera una foto usual. En general, los grupos de foto se
colocan automáticamente dentro de un objeto de ClipView, que recorta los objetos
que superponen los bordes de las fotos hasta los límites de la foto misma. Por ello,
cuando seleccionas un grupo de fotos en la línea de estado generalmente muestra
que has seleccionado un "grupo de foto recortado". Consulta el apartado Clipview (en
la página 140) de Manejo de objetos para obtener información sobre clipviews.

Diferencias entre los grupos de foto y las fotos:

• Los grupos de fotos reúnen una foto simple y algunas ediciones vectoriales.
• Puedes arrastrar una foto por su forma de corte en la HERRAMIENTA DE RELLENO
pero no puedes hacer lo mismo con los grupos de fotos (selecciona dentro y
mueve la foto base o haz clic derecho para abrir el menú contextual y
seleccionar los objetos recortados y luego arrástralos en la herramienta de
selección).
• Algunas operaciones convertirán los grupos de fotos en fotos.

Si quieres convertir un grupo de fotos en un objeto de foto común, 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. Otras operaciones, como la modificación de tamaño con contenido y el
contone, también convierten grupos de foto en fotos planas porque estas operaciones
no pueden preservar la estructura del grupo de foto. Cuando un grupo de foto debe
convertirse de esta forma, aparece primero un mensaje de advertencia.
330

Importación de fotos
MAGIX Web Designer 11 Premium 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 .

Al importar fotos de alta resolución (cualquier imagen con más de 1.920 píxeles de
alto o ancho) en un documento web (incluyendo presentaciones), MAGIX Web
Designer 11 Premium cambia automáticamente el tamaño de la foto para ajustarlo al
tamaño de pantalla HD, sin preguntar si deseas importarla con una resolución menor.
Para un documento web, aun con el tamaño reducido, debería haber más que
resolución suficiente en tus fotos para resultados de alta calidad en tu página web,
por lo que raramente es necesario importar imágenes de cámaras digitales con su
resolución completa para usar en la web.

Sin embargo, si estás importando una foto grande en un documento animado, MAGIX
Web Designer 11 Premium te preguntará si deseas importar una versión de menor

www.magix.es
 Trabajar con fotos 331

resolución de tus fotos. Si el documento incluirá muchas fotos, es posible que quieras
utilizar esta opción de resolución reducida. 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 que no dispongas de
memoria suficiente en tu equipo para cargar, editar y exportar tu documento.

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 foto (desde el Explorador de Windows o desde la
galería de mapas de bit) hasta una foto existente, esta se reemplazará pero
mantendrá el mismo contenedor o tamaño de frame. Esto facilita la sustitución de
fotos en plantillas. Puedes 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 (en la página 351), 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 existen múltiples copias de la misma foto en una página, en el mismo grupo suave,
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
ese grupo suave se reemplazarán con 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.
332

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 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 una foto grande, su tamaño se reduce a HD (1920 x 1080), si es
más grande, en documentos animados e impresos se te preguntará primero. Su
tamaño se modifica a 500 píxeles de ancho en la página.

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.

Copias de memoria cero

Una de las diferencias más revolucionarias entre Web Designer y otros softwares es
que, cuando copias cualquier foto en la página, realmente no realiza una nueva copia
completa de la foto original importada, sino que muestra simplemente otra "vista" de
la imagen original. El motor de renderización de Web Designer es lo suficientemente
rápido como para mostrar cualquier cantidad de copias de la misma imagen al vuelo.
Esto te permite ahorrar gran espacio de memoria y reduce drásticamente el tamaño
de los archivos.

www.magix.es
 Trabajar con fotos 333

Esto no limita lo que puedes realizar con cada copia, puesto que se tratan de forma
completamente independiente. 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 del archivo original.

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
importado, 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.

La galería de mapa de bits

El capítulo Manejo de documentos (en la página 95) 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 abrirla con clic en la barra de galerías, desde el menú HERRAMIENTAS >
GALERÍAS , o con "F11".
334

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 se muestran
directamente desde el archivo original, y sólo se muestra la imagen sola y no las
cuatro variantes que aparecen en la página.

Se muestra la siguiente información de ayuda acerca de 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.006 K. (Este
es el tamaño original del archivo, y también cuánto lugar de archivo .web
ocupará esta imagen.)
• Las dimensiones de píxeles del original, el tamaño de megapíxeles (en este caso
sólo inferior a 2 MP)
• 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 96 dpi
www.magix.es
 Trabajar con fotos 335

La GALERÍA DE MAPAS DE BITS siempre contiene un mapa de bits por defecto, con la
imagen de Xara en gris. 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 252).

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.

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. Se abrirá un
menú que te permite elegir entre la configuración del FONDO DEL TABLERO DE DIBUJO o
el FONDO DE PÁGINA . Cuando configuras el fondo del tablero de dibujo, si la imagen es
más estrecha que la página, se asume que quieres tener la imagen en mosaico para
rellenar por completo el fondo del navegador. De otra forma la imagen se aplica como
un único segmento. Puedes cambiar esta configuración haciendo clic derecho en el
tablero de dibujo y buscando en el submenú "Fondo de tablero de dibujo".

También puedes aplicar una imagen en el fondo sin usar esta galería: tan solo haz clic
en la imagen y consulta las opciones en el menú contextual.
336

Consulta Fondos de página web (en la página 311) para más información.

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.

www.magix.es
 Trabajar con fotos 337

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 11 Premium 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.

Calidad de visualización de fotos

MAGIX Web Designer 11 Premium 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
CALIDAD (POR las imágenes en la mejor calidad, en particular para imágenes
DEFECTO) grandes de 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.
338

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 DE pasos de una transición. MAGIX Web Designer 11 Premium no es
TRANSICIÓN compatible con 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".

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 sobre el icono 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 alternativas de exportación

www.magix.es
 Trabajar con fotos 339

avanzadas y se pueden comparar diversos ajustes 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 3 tipos de archivos de exportación
alternativos. Los valores por defecto deberían ser los correctos para todas 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 474) 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 85%.

El sistema JPEG está diseñado de

manera tal que un ajuste de 85 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
85%, 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 85 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.

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.
340

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 MAGIX Web Designer 11 Premium (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 353), 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 11 Premium 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.

www.magix.es
 Trabajar con fotos 341

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 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.
342

Recortar fotos con una máscara

Si quieres crear formas de foto no rectangulares o cortar partes de una foto, utiliza
una máscara. Primero selecciona la foto y luego la HERRAMIENTA DE MANO ALZADA de
la barra desplegable de herramientas de máscara.

Usa la "Herramienta de mano alzada" para dibujar una forma de máscara

cerrada alrededor de la parte de la foto que quieres recortar.

Cambia a HERRAMIENTA DE SELECCIÓN y selecciona la foto bajo la máscara o elimina la

selección (presiona "Esc"). Ahora al copiar ("Ctrl+C"), se copiará solamente la parte
sin máscara de la foto en el búfer de pegado. Ahora pulsa "Eliminar" y la parte sin
máscara se eliminará. O presiona "Ctrl+C" para cortar. También puedes usar la
máscara para aplicar operaciones de forma "ARREGLO" > "COMBINAR " con ella.

Consulta el capítulo Máscaras (en la página 267) para más información acerca del
uso de máscaras.

Herramienta Capturar pantalla

Esta herramienta ofrece algunas ventajas con respecto al método mencionado
anteriormente, incluyendo la opción de capturar el cursor del ratón en la imagen.
ÁBRELA CON HERRAMIENTAS > CAPTURA DE PANTALLA.

www.magix.es
 Trabajar con fotos 343

ÁREA DE PANTALLA: aquí puedes escoger el área de pantalla que quieres capturar.
Puedes capturar toda la pantalla, la ventana activa en su totalidad o simplemente el
contenido de la ventana activa sin el borde de ventana.

OPCIONES: aquí puedes escoger si deseas incluir el cursor en la captura de pantalla.

También puedes decidir si deseas capturar una sola imagen o mantener la
herramienta activada durante la sesión para poder realizar capturas consecutivas
cada vez que pulsas el shortcut asignado.

La sección de resultado te permite escoger la forma en que manejarás la imagen de

pantalla. Por defecto, se insertará directamente en el diseño actual de MAGIX Web
Designer 11 Premium. Como alternativa puedes también guardar cada captura de
pantalla como archivo BMP (mapa de bits de Windows) o PNG en cualquier carpeta.
Los archivos creados se denominarán "ScreenCapture", "ScreenCapture1,
"ScreenCapture2" y así sucesivamente. Selecciona la CARPETA DE DESTINO para los
archivos con el botón EXPLORAR...

Puedes definir casi cualquier combinación de teclas (Shift, Alt, Ctrl + tecla) para
activar la captura de pantalla. Simplemente haz clic en el campo de shortcut y
después selecciona la combinación de teclas deseada, p. ej. "Ctrl+S". El shortcut
escogido aparecerá en el campo de shortcut. Si se superpone con cualquier otro
shortcut definido en MAGIX Web Designer 11 Premium recibirás una advertencia en
la parte inferior del diálogo, pero esto no importará si están abiertas otras ventanas al
tomar capturas de pantallas. Presiona RESTAURAR para regresar al shortcut
seleccionado previamente.

En vez de utilizar una tecla de shortcut para tomar la captura de pantalla, puedes usar
la opción TIEMPO. Esto es útil en los casos en que cualquier movimiento en el teclado
cambia la pantalla que quieres capturar, como en el caso de un consejo de
herramienta que es probable que desaparezca cuando presiones una tecla. Selecciona
la opción de tiempo e introduce el valor de retraso en segundos. La captura de
pantalla se tomará automáticamente una vez que haya transcurrido el tiempo
específico. El temporizador comenzará ni bien hagas clic en el botón INICIAR .

Al pulsar el botón INICIO se cerrará el diálogo de captura de pantalla y se activará el

shortcut de sistema. Cambia a la ventana que quieres capturar y pulsa la combinación
deseada o espera que el tiempo pase si has escogido la opción de tiempo. La captura
de pantalla se toma y se inserta en Web Designer o se guarda en el archivo según la
opción escogida. Si has seleccionado "Capturar siempre" puedes tomar capturas de
pantalla adicionales si presionas la combinación nuevamente (esto no está disponible
con la opción de tiempo). Para desactivar la herramienta si has escogido esta opción,
cierra MAGIX Web Designer 11 Premium para cerrar la sesión. Como alternativa,
vuelve al diálogo de captura de pantalla y escoge la opción "una sola vez" y toma una
captura de pantalla más.
344

Colorear fotos
Selecciona una foto, haz clic en la línea de colores y elige en el menú para aplicar un
color continuo 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.

Si haces clic en LÍNEA DE COLORES ,

puedes seleccionar cualquier color,
sea éste el color claro o el oscuro del
tono continuo (contone). 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".

Si quieres colorear una foto que está dentro de un grupo, pulsa "Ctrl+click" para
seleccionarla dentro del grupo y aplica el tono continuo como se describe arriba.

Cambiar el tamaño, rotar y reposicionar la foto

dentro de su propio marco
MAGIX Web Designer 11 Premium 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

www.magix.es
 Trabajar con fotos 345

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.
• 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
11 Premium.
346

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.

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.

www.magix.es
 Trabajar con fotos 347

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.

Optimización de fotos y mapas de bits

Con la resolución siempre en aumento y el tamaño de archivo de los JPEGs de cámara
digital, si tienes un documento que contiene muchas imágenes, el tamaño del archivo
se puede agrandar muy rápidamente Por ejemplo, un documento multipágina que
contiene 20 JPEGs de máxima resolución, cada uno de los 5 Mb producirán un
archivo .xar de más de 100 Mb*.

Además, estas fotos por lo general están innecesariamente en 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, tendrá como resultado una imagen de 1500 dpi. Pese a que una imagen de
alta resolución tiene una mayor flexibilidad para la impresión (y puedes ampliarla o
agrandar pequeñas partes de la foto), esta es mucho más alta de lo necesario
respecto a lo requerido incluso para la impresión comercial de mayor calidad, y
todavía más en el caso de gráficos web o productos HTML.

Si seleccionas una pequeña parte de la imagen o cortas solo una pequeña parte de tus
fotos, podría haber grandes partes de imagen oculta fuera del área visible. Este
"recorte en vivo" es una gran función para la edición, ya que puedes retornar el
recorte, alterar el tamaño, la posición o la escala y todo permanece lo más nítido
posible. Sin embargo, puede que quieras eliminar las partes invisibles en los
documentos finalizados.
348

La imagen de mariposa para recortar todavía mantiene adjunto el resto de la foto. Si

vas a la HERRAMIENTA DE RELLENO podrás ver esto fácilmente si cambias el tamaño
del relleno dentro del contorno. Por lo tanto, las partes de la imagen fuera de la
mariposa probablemente serán superfluas para tu documento final.

Haz clic derecho sobre una foto y escoge OPTIMIZAR FOTO o "HERRAMIENTAS" >
"OPTIMIZAR FOTO..".. Este diálogo permite realizar tres funciones importantes:

• Eliminar partes invisibles de las fotos

• Reducir la resolución de las fotos
• Convertir PNG o mapas de bits en JPEG incrustados para optimizar el tamaño de
archivo

Si seleccionas esta opción del menú para cualquier mapa de bits, se abrirá el diálogo
OPTIMIZAR FOTO .

www.magix.es
 Trabajar con fotos 349

Para imágenes JPEG la configuración por defecto hace que la foto se optimice a JPEG
192dpi (resolución de pantalla retina) en el tamaño que aparece en tu página, o 96 dpi
si la opción retina no está activada (pestaña PÁGINA WEB del diálogo PROPIEDADES
WEB ). En general, esto es lo que quieres de las fotos de tu sitio web.

Al optimizar imágenes diferentes a JPEG, Web Designer decidirá automáticamente si

es mejor optimizarla a PNG o JPEG, según la propia naturaleza de la imagen. Puedes
hacer clic en el botón CONFIGURACIÓN de este diálogo, si quieres cambiar cualquier
configuración, como el formato de imagen utilizado para la optimización, la calidad
JPEG, etc.

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 mantener la resolución actual
de la foto si seleccionas ACTUAL de la lista PPI. 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, solo la parte visible de la
imagen se preserva en la imagen optimizada. Para imprimir, una resolución de 150dpi
ofrece muy buenos resultados, pese a que 300dpi ofrece la impresión comercial de
mejor calidad (la mayoría no pueden distinguir entre 150dpi y 300dpi y , sin embargo,
300dpi requiere cuatro veces más memoria o espacio de archivo).

Advertencia: "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á definitivamente (obviamente, puedes deshacer los cambios
mientras tengas el archivo abierto durante la edición).
350

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 ha descrito más 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 utilizar "HERRAMIENTAS" > "OPTIMIZAR TODAS LAS IMÁGENES" para

optimizar todas las imágenes de mapas de bits de tu documento en una sola
operación. El proceso de optimización convertirá las imágenes grandes que no sean
JPEG en imágenes JPEG más pequeñas, si el programa decide que la imagen puede
almacenarse y exportarse en JPEG sin una pérdida de calidad inaceptable.

Ten en cuenta que después de optimizar la foto, la foto original sin optimizar
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. Tan solo guarda tu diseño y vuélvelo a cargar después de optimizar
para eliminar las imágenes originales más grandes.

Convertir objetos o dibujos a mapas de bits

Puedes crear fácilmente un mapa de bits a partir de un objeto, o partir de una parte de
tu dibujo, incluso si están compuestos por otros mapas de bits. Los mapas de bits
pueden tener cualquier tamaño o resolución y también pueden tener transparencias.
También puedes crear mapas de bits con un número reducido de colores, que puede
ser útil para el uso en la web.

Crear un mapa de bits a partir de objetos:

1. Selecciona el/los objeto/s en la página

2. Haz clic derecho y selecciona CREAR UNA COPIA DE MAPA DE BITS o selecciona
CREAR UNA COPIA DE MAPA DE BITS en el menú ARREGLO (Ctrl + Shift + C).
3. En el diálogo, selecciona la profundidad de color, el tamaño y otras opciones.

Para obtener un máximo de calidad, selecciona una profundidad de color de un color

verdadero, o si quieres tener transparencia, selecciona "true color + alpha" (la
transparencia alpha es un término técnico). Puedes crear mapas de bits con menos
colores si seleccionas una profundidad de color de 256 colores o menos. Esto te
permite tener control sobre las opciones de "dithering" y paleta. Estas opciones se
describen en la sección Exportar mapas (en la página 474).

Ten en cuenta que siempre se crean imágenes en formato PNG (el tipo de imagen
con más calidad). Pero recuerda que las fotos a color completo requieren mucha
memoria y espacio de archivo. Utiliza la opción de optimización de foto para
convertir las imágenes en PNG en imágenes JPEG integradas para reducir el tamaño
del archivo.

www.magix.es
 Trabajar con fotos 351

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.
• 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 11 Premium. 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.
352

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 11 Premium 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. Esto es porque MAGIX Web Designer 11
Premium 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
11 Premium en la lista "Abrir con". La foto se abrirá como un documento de foto. 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 11
Premium también guarda tu foto en su formato .xar 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 .xar 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 11 Premium buscará en la carpeta principal para ver si hay un
archivo .xar disponible para esta foto. De ser así, se abrirá este archivo .xar 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 .xar 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 .

www.magix.es
 La herramienta de fotos 353

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 beneficios principales:

1. Es no destructiva.
2. Es muy rápida, aun para imágenes muy grandes.
3. La edición fotográfica no requiere memoria.

Para más información respecto a estos beneficios en comparación con otras

herramientas de edición de fotos, consulta el capítulo Manejo de fotos.

Utilización de la herramienta de fotos

Para acceder a las HERRAMIENTAS DE FOTO, mueve el cursor del ratón sobre el
icono de la cámara en la barra de herramientas principal en la parte izquierda
de la ventana. Aparecerá una barra desplegable con iconos para cada una de
las herramientas de foto.
354

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.

Funciones comunes para fotos

Los siguientes botones están disponibles en la barra de información cuando te
encuentras en las herramientas para fotos Optimización, Clip, Ojos rojos o Cambio de
tamaño con contenido.

Controles para rotar 90°

Los dos iconos 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 11 Premium, 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.

www.magix.es
 La herramienta de fotos 355

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.

Herramienta de optimización
Haz clic en el ícono de la cámara para ingresar a la HERRAMIENTA DE
OPTIMIZACIÓ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 te provee:
• Optimización automática con un clic de tus fotos, especialmente útil para fotos
subexpuestas.
• Ajuste manual de brillo, contraste, saturación de color y desenfoque o nitidez de
las fotos.
• Corte de imágenes. Se trata de "corte en tiempo real", lo que significa que
podrás cortar y deshacer el corte todas las veces que quieras.
• Corrección de la dominante de color o el balance de blancos.
• Una función de "comparación" con un solo clic para comparar rápidamente los
cambios respecto al original.
• Función copiar/pegar fotos sencilla que aumenta las ediciones entre imágenes
diferentes.

Todas estas operaciones son interactivas con actualización en tiempo real Mientras
ajustas los valores, la imagen se actualiza de forma instantánea. Son también no
destructivas, lo cual significa que tu imagen original no se cambia y siempre puedes
hacer o deshacer cualquier ajuste.
356

Los primeros seis botones de la izquierda de la barra de información (no se ilustran arriba) son
comunes a todas las herramientas y están descritos anteriormente

Optimización automática
Brillo
Contraste
Saturación de color
Temperatura del color
Control de tonos
Desenfoque/Enfoque
Comparación con el original

En esta herramienta puedes ajustar el brillo, el contraste, la saturación, la

temperatura, el tono, 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, solo 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 solo tiene que hacer
clic y soltar para cambiar los valores.

www.magix.es
 La herramienta de fotos 357

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/Tono

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. El manejo de la temperatura del color hace que una imagen sea más "cálida" o
"fría". El control de tono se aplica a un tinte de color particular de la imagen y te
permite controlar la intensidad del color seleccionado.

Tono

El regulador de tono controla la intensidad

del color seleccionado.

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" solo a imágenes que han sido reducidas mucho.

Uso de máscaras o regiones

Si deseas optimizar únicamente un área específica de tu foto, utiliza primero las
herramientas de región de foto (en la página 267) para marcar el área de la foto que
deseas modificar. O utiliza una herramienta de máscara para proteger las partes de la
foto que no quieras modificar.
358

Luego cambia a la herramienta de optimización y realiza las modificaciones. La

máscara o región se utiliza para limitar las partes de la foto a las que se aplica la
operación de optimización y luego obtendrás una región dentro del grupo de fotos.
Cuando esta región esté seleccionada dentro del grupo de fotos, su contorno se
mostrará como "hormigas en movimiento". Para seleccionar una región dentro de un
grupo de fotos, pulsa Ctrl y haz clic sobre ella o selecciónala desde la galería de
páginas y capas (en la página 85) en donde aparecerá como un región dentro de un
grupo de fotos (en la página 329). Si observas la línea de estado también podrás darte
cuenta de si hay una región o máscara seleccionada dentro de un grupo de fotos.

Ten en cuenta que casi siempre deberás aplicar difuminación a una región dentro de
un grupo de fotos para suavizar sus bordes y mezclar el efecto de optimización de
forma más fluida en la foto. Las regiones con bordes duros son útiles en muy pocas
ocasiones. Para más detalles consulta la herramienta de difuminación. Puedes aplicar
y ajustar la difuminación en la región dentro del grupo de fotos una vez que
selecciones dentro, o puedes aplicar difuminación a la máscara o región antes de
utilizar el efecto de optimización.

Foto izquierda con sombra parcial; foto derecha optimizada con brillo y difuminación para
suavizar y mezclar el contorno.

Si quieres hacer ajustes a la forma de una región dentro de un grupo de fotos, vuelve a
la herramienta de máscara o región y realiza los cambios asegurándote de que la
región o máscara esté seleccionada (verás el contorno como "hormigas en
movimiento"). Mientras te encuentras en las herramientas de región o máscara,
puedes seleccionar las regiones dentro de un grupo de fotos con Ctrl + clic.

Si quieres trabajar en regiones seleccionadas dentro de un grupo de fotos sin

ver el contorno en movimiento, puedes desactivar temporalmente los
contornos con el botón correspondiente de la barra de información de las
herramientas de región y máscara.

Los contornos volverán a activarse una vez que elimines la selección o vayas a otra
foto o documento.
www.magix.es
 La herramienta de fotos 359

En MAGIX Web Designer 11 Premium las herramientas de máscara no se muestran

en la barra de herramientas principal al inicio. Si quieres usar estas herramientas,
puedes encontrarlas en la paleta de botones. Para más detalles consulta Regiones de
foto y máscaras (en la página 267).

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.

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.
360

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.
• 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.
www.magix.es
 La herramienta de fotos 361

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 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). Solo
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.
362

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 351) para más información.

Notas para la herramienta de foto

1. Puedes seleccionar diferentes fotos mientras usas las HERRAMIENTAS DE FOTO
con solo 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. Es posible 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
hasta que optimices la foto para hacer que los cambios sean permanentes. 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 rellenos con mapas de bits, y también sobre las fotos
individuales.

www.magix.es
 La herramienta de fotos 363

6. Si abres una foto en MAGIX Web Designer 11 Premium (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 Manejo de
fotos 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.

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 80)
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.
364

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 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 (en la página 329).

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.

www.magix.es
 La herramienta de fotos 365

Efectos en tiempo real

Introducción
NOTA: esta herramienta está incluida en la versión de 64 bits de Web Designer
Premium por razones legales, para documentos que usan efectos de sombra o de
difuminación de mapas de bits, los cuales funcionan en la versión de 64 bits. La
versión de 64 bits no es compatible con los plug-ins normales de 32 bits de
Photoshop y los efectos de 64 bits no están incluidos en el producto.

Los efectos en tiempo real son efectos de mapas de bits que pueden aplicarse a un
objeto utilizando herramientas del "Editor de imagen de Xara" o plug-ins de Adobe®
Photoshop®. La lista de efectos en vivo disponibles se ve en la barra de información
de la herramienta de Efectos en vivo con un clic sobre el botón "Nuevo".

Añadir un nuevo efecto

Lista de efectos aplicados en orden
Editar el efecto seleccionado
Resolución del efecto en tiempo real
Eliminar el efecto actual
Bloquear/desbloquear efectos
Eliminar todos los efectos
Configurar para buscar plug-ins

Aplicar un efecto en vivo

Para aplicar un efecto en vivo:

1. Selecciona el objeto o los objetos de forma usual.

2. Selecciona la herramienta de EFECTOS EN VIVO.
3. Haz clic sobre el botón NUEVO en la parte izquierda de la barra de información.
Esto mostrará una lista dividida en partes de los efectos disponibles. El primer
conjunto de efectos de la lista son los efectos del XARA PICTURE EDITOR . El
segundo conjunto son los efectos suministrados por las herramientas incluidas
en MAGIX Web Designer 11 Premium DIFUMINACIÓN y SOMBRA. El tercer
conjunto son los efectos de plug-ins "nuevo estilo" de Photoshop y el último
conjunto son los efectos "estilo antiguo" de Photoshop (lee más adelante para
obtener una explicación de estos diferentes tipos).
366

4. Selecciona de la lista el efecto que quieres aplicar.

5. Esto mostrará un diálogo o herramienta del efecto. Puedes ajustar varios
controles y generalmente podrás ver una vista previa del efecto en el diálogo.

Una vez que has finalizado, haz clic sobre ACEPTAR para volver a MAGIX Web
Designer 11 Premium.

Editar formas
Si aplicas un efecto en vivo a una forma o texto, podrás seguir editando el objeto sin
problema. Cada ve que lo editas, el efecto en vivo se vuelve a aplicar
automáticamente al objeto. Para efectos bloqueados, esto no es posible y debes
eliminar el efecto usando el botón ELIMINAR de la barra de información de los efectos
en vivo, después editar la forma y finalmente volver a aplicar el efecto.

Bloquear efectos
Cuando cambias el tamaño o giras un objeto que tiene aplicado un efecto en vivo,
Web Designer lo considera una edición y vuelve a generar el efecto. Sin embargo, es
posible que esto no sea lo que quieres, por lo que a veces es útil bloquear un efecto.

Los plug-ins de "viejo estilo" de Photoshop ya están BLOQUEADOS al aplicarlos. Esto

significa que la capa subyacente no puede editarse. También puedes bloquear un
efecto en vivo para que permanezca fijo al cambiar el tamaño o girar el objeto, como
si estuvieras girando o cambiando el tamaño de un mapa de bits.

Como ejemplo de esto, imagina un plug-in que siempre aplica ondas horizontales. (El
efecto en vivo "Televisión" muestra algo similar). Aplica este efecto a la forma y verás
una línea horizontal sobre ella. Si después giras la forma, ¿querrás que las ondas giren
también? De ser así, bloquea el efecto antes de la rotación. Si, por el contrario, quieres
que el efecto de ondas horizontales se vuelva a aplicar en el rectángulo girado, dejar el
efecto sin bloquear.

Cuando un efecto en vivo está bloqueado, el efecto gira con el objeto (izquierda).

Si envías los diseños a otras personas para que los carguen pero no tienen los plug-in
utilizados en el diseño, no verán los efectos aplicados. Para evitar este problema,
puedes bloquear los efectos. Los efectos bloqueados se guardan como mapas de bits
en el documento, de forma que todos pueden verlos, incluso si no tienen los plug-ins
que generaron los efectos.
www.magix.es
 La herramienta de fotos 367

Para bloquear un efecto, selecciona el objeto o los objetos y después haz

clic en el símbolo del CANDADO de la barra de información de los EFECTOS
EN VIVO . Para desbloquear un efecto que has bloqueado de esta forma,
vuelve a hacer clic sobre el CANDADO.

Todavía puedes modificar la resolución del efecto. Es posible que quieras utilizar una
resolución mayor para la impresión que si solamente quieres trabajar en pantalla.

Resolución de los efectos en vivo

Para la utilización en pantalla y web, se recomienda no modificar la resolución por
defecto de 96 DPI (la misma que la resolución de pantalla). Si necesitas una imagen
con resolución mayor, por ejemplo, si quieres imprimir o exportar un mapa de bits de
alta resolución, puedes aumentar este valor a 150 DPI o más. Cuanto mayor sea la
resolución, más tiempo se necesitará para generar o volver a generar el efecto
(porque tiene que trabajar con un mapa de bits mucho más grande) y más memoria
se necesitará.

Puedes configurar la resolución de un efecto en vivo como "automático" en vez de

escoger un valor DPI fijo. Con esta configuración, el efecto se volverá a generar
automáticamente cuando sea necesario y con la resolución más apropiada. Por
ejemplo, si imprimes un diseño que contiene efectos en vivo, cualquier efecto
configurado como AUTOMÁTICO se regenerará en la resolución de impresión si
todavía no se encuentra en esa resolución o en una mayor. En un diseño grande con
muchos efectos, esto puede hacer que la impresión sea más lenta porque cada efecto
debe volver a generarse en alta resolución.

Puedes cambiar la resolución que se utiliza para renderizar los efectos en la pestaña
EFECTOS Y PLUG-INS del diálogo de OPCIONES . El valor por defecto es 96 DPI. Una vez
que modificas esta configuración, todos los efectos que apliques posteriormente se
realizarán con la resolución seleccionada. Cambiar la configuración no modificará la
resolución de los efectos que ya se han aplicado.

Para más información sobre el diálogo de opciones, lee el capítulo Personalización

de Web Designer.

Para cambiar la resolución de un efecto que ya se ha aplicado, utiliza el control de DPI

en la barra de los EFECTOS EN VIVO.

Guardar y transferir archivos

Cuando transfieres un archivo a otra persona, no podrá ver los efectos aplicados,
salvo que tenga instalados los mismos plug-ins (esto es similar a los problemas con
las fuentes: el receptor necesita tener instaladas todas las fuentes utilizadas en el
diseño para ver una representación precisa del texto en el documento). Para
garantizar que el receptor pueda ver los efectos de tu diseño, bloquea los efectos
antes de guardar.
368

Cuando esté cargado un diseño que utilice efectos que no están instalados, se emitirá
un aviso para notificar al usuario que es posible que el diseño no se vea de la forma
pensada por el diseñador.

Dado que los efectos bloqueados se guardan como mapas de bits en el archivo Xara,
los archivos serán más grandes que para los efectos en vivo sin bloquear.

Copiar efectos en vivo

Para más información sobre copiar y pegar, lee el capítulo Trabajar con objetos (en
la página 111).

Puedes copiar efectos en vivo en tu diseño desde un objeto a otro utilizando PEGAR
ATRIBUTOS , de la misma forma que copias todos los demás atributos. Simplemente
selecciona el objeto con el/los efecto/s que quieres copiar y escoge Edición > Copiar.
Después selecciona el objeto u objetos a los que quieres copiar los efectos y escoge
Edición > Pegar atributos.

Ten en cuenta que no puedes copiar efectos de plug-in de "viejo estilo" de Photoshop
de esta forma porque esos efectos no tienen la capacidad de volverse a aplicar.

Cambio de tamaño teniendo en cuenta el

contenido
En Web Designer la herramienta CAMBIO DE TAMAÑO TENIENDO EN CUENTA EL
CONTENIDO no se presenta en la barra principal desde el inicio. Si quieres usara esta
herramienta puedes encontrarla en la PALETA DE BOTONES.

Para abrir la paleta de botones selecciona BARRAS DE CONTROL... del menú VENTANA
y desplázate por la lista hasta el final. Ahora haz clic en la casilla al lado del elemento
PALETA DE BOTONES . (O puedes hacer clic derecho en un área vacía de cualquier
barra de botones y elegir PALETA DE BOTONES del menú desplegable).

Si quieres usar esta herramienta a menudo puedes moverla fuera de la "Paleta de

botones" arrastrándola sobre la barra de herramientas. (Mantén "Alt" pulsado,
arrastra el botón y suéltalo sobre un icono de la barra de herramientas).

Se puede arrastrar el botón de cambio de tamaño teniendo en cuenta el contenido

sobre la herramienta de foto desplegable si te aseguras de que está abierto antes de
que sueltes el botón, pero ten en cuenta que no se situará en esta posición cuando
vuelvas a reiniciar el programa.

Web Designer incluye ahora la posibilidad de ampliar las fotos con una nueva técnica
que conserva las proporciones de los aspectos clave de la misma.

www.magix.es
 La herramienta de fotos 369

El ojo humano es particularmente sensible a los cambios en la proporción de aspecto

de los objetos usuales y la mayoría de las personas puede reconocer cuando algo es
incorrecto en las imágenes que se han extendido o reducido levemente.

Aquí hay una foto de ejemplo del famoso

arco Torii en Japón. Claramente el arco es el
objeto principal de esta foto.

Aquí la foto se ha
extendido utilizando
el método de
extensión normal de
la HERRAMIENTA DE
SELECCIÓN . Aun con
esta extensión
moderada, es obvio
que las proporciones
del arco se han
distorsionado de
forma incorrecta.

Extender utilizando "Cambio de tamaño teniendo en cuenta el contenido". Sigue pareciendo

perfectamente natural. Las proporciones se han conservado, aun con esta extensión extrema, que
es dos veces más ancha que el original. La línea de la costa extendida continúa pareciendo
natural.
370

Preparar tu foto
La función de modificación del tamaño con contenido forma parte de las herramientas
de FOTO.

Selecciona tu foto y de la barra desplegable de la herramienta de foto,

selecciona el BOTÓN DE CAMBIO DE TAMAÑO CON CONTENIDO. El extremo
derecho de la barra de información muestra ahora un conjunto de botones.

Selecciona una foto, ve a herramienta de foto y la barra de información debería tener

el aspecto siguiente;

Primero haz clic en el botón PREPARAR para preparar la foto para el cambio de
tamaño. Esto inicia un análisis de la foto para calcular qué partes de una imagen se
pueden estirar y qué partes se deben mantener. Este proceso puede tomar un tiempo
dependiendo de la resolución de la foto y de cuántos procesadores tenga tu PC.

Para una imagen con una resolución realmente alta, se recomienda reducir la
resolución de imagen si no necesitas la resolución máxima. Haz esto antes de
seleccionar los botones Preparar. Para reducir la resolución de tu foto, selecciona el
botón OPTIMIZAR e introduce un ancho en píxeles o una resolución en dpi en le
diálogo. El tamaño de la imagen en la página no cambiará, solo cambia la resolución o
el número de píxeles de la foto. Después de preparar la imagen aparecerán nuevas
flechas de modificación de tamaño en los lados de la foto. Simplemente tira de éstas
para ampliar o reducir la imagen en la dirección deseada.

Optimizar
Las fotos que han sido preparadas para permitir la modificación de tamaño con
contenido tienen datos adicionales guardados junto a las mismas para permitir
ajustes posteriores. Cuando guardas un documento, estos datos adicionales también
se guardan, por lo que puedes cargar este documento y continuar ajustando el ancho
y la altura sin necesidad de realizar otra operación Preparar.

Cuando termines de modificar el tamaño de la foto, se recomienda que "fijes" los

cambios utilizando la función Optimizar. Esto convertirá la imagen ampliada de nuevo
en una imagen JPEG incrustada, a cualquier resolución, y así se guardará el tamaño de
archivo de forma sustancial.

Restablecer
Si haces clic en el botón "Restablecer", se restablece la imagen volviendo a su estado
original y borrando cualquier reducción o cualquier máscara que se pueda haber
aplicado.

www.magix.es
 La herramienta de fotos 371

Uso de máscaras con la función "Cambio de tamaño

teniendo en cuenta el contenido"
Si utilizas la herramienta de máscara podrás tener mayor control para evitar que las
áreas protegidas de la foto se distorsionen. Las áreas con máscara no se
distorsionarán de ninguna forma. Lee el capítulo Máscaras (en la página 267) para
más información acerca de las máscaras. Igualmente encontrarás a continuación un
resumen sobre la uso de máscaras con el cambio de tamaño teniendo en cuenta el
contenido.

Para proteger una o más áreas de la foto contra la distorsión:

1. Selecciona una de las herramientas de máscara de la barra desplegable

HERRAMIENTAS DE MÁSCARA y selecciona la parte o partes de la foto que quieres
proteger.
2. Ahora ve a la herramienta "Cambio de tamaño teniendo en cuenta el contenido"
y haz clic en la foto.

Ahora, cuando uses el botón PREPARAR , esta área estará protegida contra la
distorsión. Es posible que necesites seleccionar la foto para habilitar el botón
PREPARAR .

Nota: puedes enmascarar más de la mitad de la imagen. La operación de

preparación dará un error si pruebas esto.

Ajustar una máscara o añadir una nueva máscara

No puedes añadir una máscara a una imagen que ya has extendido. Si deseas añadir
una nueva máscara o ajustar la existente, tienes las siguientes opciones:

1. Haz clic en el botón RESTABLECER y dibuja una nueva máscara.

2. Haz clic en deshacer la cantidad de veces necesarias para regresar a la máscara
y después utiliza las herramientas de dibujo normales para ajustar las formas de
la máscara.
3. O bien, antes de seleccionar los botones PREPARAR , copia la máscara al
portapapeles. Si deseas utilizarla posteriormente, RESTABLECE la imagen, vuelve
a activar la HERRAMIENTA DE MÁSCARA y pega la forma en la capa de máscara.

Existe otra alternativa en la que puedes "fijar" una imagen extendida utilizando la
función OPTIMIZAR y después aplicar la nueva máscara. En la mayoría de los casos
esto no es recomendable porque produce resultados de menor calidad que al
restablecer la imagen y aplicar la máscara a la imagen original.
372

Zoom de foto teniendo en cuenta el contenido

Una alternativa al cambio de tamaño con contenido en que la foto conserva su
tamaño pero el contenido se amplía de forma inteligente. Aquí se ilustra un ejemplo
del efecto.

Utiliza la barra de zoom de la barra de información para

controlar el zoom de la foto con contenido.

La imagen conserva el mismo tamaño pero el programa detecta y amplía

automáticamente el contenido "interesante". Ten en cuenta que esto no es un recorte
de la chica, sino que todos los elementos, nubes y césped que aparecen en el original
están ampliados en la versión ampliada. El programa detecta automáticamente que el
surfer es la "región de interés" por lo que lo amplía.

Otro ejemplo:

El programa ha determinado que las flores, no las hojas del fondo, son el área de
interés, por lo que ha ampliado esas partes. Con la función de máscara puedes
proteger cualquier parte de la imagen de la distorsión a pesar de que estos dos
ejemplos anteriores no utilizan ninguna máscara.

www.magix.es
 La herramienta de fotos 373

Modificación de tamaño con contenido alternativa

Cuando amplías fotos hay dos formas alternativas de modificar la imagen. El método
de arrastrar las flechas de tamaño a veces no ofrece un buen resultado con algunos
tipos de imagen.

Sin embargo, si pulsas la tecla Alt mientras arrastras un extremo de los controles
deslizantes laterales en la herramienta de modificación de tamaño con contenido, se
utilizará una escala inteligente diferente con un algoritmo que tendrá mejores
resultados en algunas fotos.

Notas acerca de Cambio de tamaño teniendo en cuenta el

contenido
• Solo puedes comprimir la imagen a la mitad de su ancho o alto inicial
• Si guardas un documento con una foto que se ha preparado para el cambio de
tamaño teniendo en cuenta el contenido, entonces se guardará la información de
cambio de tamaño en el documento. La ventaja es que después puedes reajustar
la foto utilizando la característica para tener en cuenta el contenido. Existe una
gran ventaja de tamaño de archivo significante de guardar las fotos de esta
forma.

Creación de panorámicas
MAGIX Web Designer 11 Premium incluye una herramienta que puede unir
hasta 8 fotografías automáticamente para convertirlas en una única
panorámica de alta resolución.
La creación de una panorámica de alta calidad puede tornarse en un proceso muy
técnico y complejo. En general requiere la utilización de un equipo y lentes especiales
para obtener fotografías con la misma alineación y exposición. Con la herramienta
para crear panorámicas que viene con el MAGIX Web Designer 11 Premium no
necesitarás nada de esto y puedes utilizar una cámara digital de uso diario y podrás
crear imágenes panorámicas de alta excelente calidad en tan solo un par de minutos.

Característica de esta herramienta:

• Cálculo automático de distancia focal para optimizar imágenes y minimizar el

efecto "ojo de pez"
• Ajustes: distorsión de barril (automatic barrel), distorsión de cojín (pin cushion)
y efecto viñeta
• Corrección automática de exposición
• Detección automática de puntos superpuestos compartidos y unión
"transparente" de líneas
• Recorte automático del resultado final

Para crear una panorámica debes sacar una serie de fotos desde un lugar en donde te
encuentres parado en una posición central con respecto al objeto a fotografiar.
374

Idealmente cada foto se superpondrá con la próxima en un 30%, aunque funcionará

con más o menos superposición.

El proceso de creación de una panorámica es muy simple:

1. Importa cada una de las fotos. No es necesario que intentes colocar las
superposiciones de forma correcta.
2. Selecciona todas las fotos que desees unir.
3. Haz clic en el botón PANORÁMICA en la barra desplegable de la HERRAMIENTA DE
FOTO .

Comenzará el proceso de unión (stitching) y continuará como proceso de fondo. Se

abrirá una ventana emergente (pop-up) que te indicará el progreso por los distintos
estadios, aunque podrás seguir utilizando el MAGIX Web Designer 11 Premium
normalmente mientras avanza. Cuando esté completo el proceso, la imagen
panorámica será importada a la página. Ten cuenta que esta no reemplaza las
imágenes originales y puedes borrarlas si no las necesitas.

Tres ejemplos de fotos de un paisaje. Cada foto se superpone con la otra (en este caso un poco
más de lo necesario).

La imagen panorámica final es el resultado de la unión sin transiciones del grupo de fotos
originales.

www.magix.es
 La herramienta de fotos 375

Optimizar imágenes
El MAGIX Web Designer 11 Premium siempre une las fotos en alta resolución, incluso
si has reducido el tamaño de la imagen en la página. Esta característica es muy
práctica porque produce resultados de máxima calidad con la resolución más alta
posible. Pero esto sí quiere decir que la composición de una panorámica necesita un
par de minutos. Por eso, a veces es mejor reducir la resolución de las imágenes antes
de crear la panorámica, especialmente si solo necesitas un resultado final con una
resolución de calidad mediana, como para la web.

Para reducir la resolución de cualquier imagen, reduce la imagen en la página al

tamaño requerido y luego utiliza la opción "HERRAMIENTAS > OPTIMIZAR FOTO". Ten
en cuenta que la herramienta para crear una panorámica (panorama stitcher)
funciona mejor con imágenes en alta resolución (ya que de esta forma le es más fácil
al programa encontrar los partes que se repiten en las diferentes fotos para realizar la
unión).

Cuando esté lista la imagen panorámica se guardará como una imagen PNG en el
MAGIX Web Designer 11 Premium. Este es el formato de mejor calidad pero ocupa
mucha memoria y espacio de archivo, especialmente si es una panorámica en alta
resolución. (La GALERÍA DE MAPA DE BITS te indicará cuánto espacio necesita). Por
ello, es recomendable que reduzcas la resolución de la imagen final y luego la
conviertas a JPG. Para realizar esta acción, utiliza nuevamente la opción
"HERRAMIENTAS ->OPTIMIZAR FOTO".

Notas:
• La herramienta creadora de panorámicas (panorama stitcher) requiere que
todas las fotos tengan el mismo tamaño y resolución.
• En la medida de lo posible no saques fotos a objetos en movimiento. Esto puede
llegar a confundir el sistema ya que el mismo objeto puede llegar a aparecer en
distintos lugares de la misma foto, o directamente ni figurar.
• Intenta mantener el horizonte a la misma altura en cada foto.

Consejo: Si sacas las fotos con estilo retrato puedes obtener una cobertura máxima
vertical.

Actualizaciones para el Panorama Studio

Si así lo deseas puedes descargar una versión más flexible y poderosa del programa
Panorama Studio. Esta actualización te ofrece más herramientas y controladores para
la creación de una panorámica. Los usuarios de Designer Pro reciben este programa
gratis con el producto en el CD.

Si el Panorama Studio está instalado se te ofrecerá la opción de utilizarlo en lugar de

la versión estándar cuando seleccionas el botón "Panorámica".
376

Herramienta de extrusión 3D
La HERRAMIENTA DE EXTRUSIÓN ofrece una rápida y sencilla posibilidad para convertir
formas 2D y textos en extrusiones 3D con efectos de luz y sombras de alta calidad. Se
basa en la tecnología de Xara 3D utilizada.

Te permite realizar -arrastrando con el ratón a la pantalla- rotaciones de objetos 3D

en tiempo real, la adaptación de la profundidad de extrusión y el desplazamiento de
tres fuentes de luz en un espacio 3D alrededor del objeto.

La barra de información permite la selección de los tipos de bordes que se podrán

visualizar a lo largo de la extrusión. Puedes optar entre una selección de más de 25
tipos de contornos.

Extrudir una forma

Para cambiar una forma 2D a un objeto extrudido 3D, ve a la herramienta de
extrusión en la barra de herramientas principal y simplemente haz clic y
arrastra el objeto para rotarlo dentro del espacio 3D.

Inicialmente se le da una profundidad por defecto a la extrusión. El color del frente de

la forma 3D tendrá el color del relleno de la forma original y el color de la extrusión
www.magix.es
 Herramienta de extrusión 3D 377

(los costados del objeto 3D) será del mismo que el color de la línea de la forma. Luego
de haber creado una extrusión, mueve el cursor del ratón sobre el objeto 3D. Verás
que el cursor irá cambiando de símbolos en la pantalla para indicar qué ocurrirá si
haces clic y arrastras a otros puntos del diseño:

Verás esto cuando el cursor del ratón esté sobre el frente o el reverso del
objeto. Si haces clic y luego arrastras el ratón, el objeto girará en el espacio
3D.
Esto se puede visualizar cuando el cursor del ratón se encuentra sobre la
extrusión (costados del objeto extrudido). Si haces clic y luego arrastras el
ratón cambiarás la profundidad de la extrusión.

Verás esto cuando el cursor del ratón se encuentra sobre la extrusión y

mantengas presionado el botón "Ctrl". Haciendo clic y luego arrastrando el
ratón cambiará el tamaño del bisel (ver abajo).

Barra de información de Herramienta de

extrusión

Extrusión On/Off
Lista de tipo de barra deslizante
Valor numérico y de barra deslizante para el parámetro seleccionado
Tipo de bisel
Barra deslizante y valor del tamaño de bisel
Luces On/Off
Brillo/Mate
Esquina con inglete/Esquina redonda

Puedes ajustar un objeto 3D extrudido de forma manual, directamente en la página

como se describe más arriba, o seleccionándolo y utilizando los controles de la barra
de información de la Herramienta de extrusión.

Activar o desactivar (on/off) la extrusión

EXTRUSIÓN ON/OFF

Una vez que una forma o un objeto ha sido extrudido las modificaciones que se le
pueden realizar al objeto original son limitadas. Por ejemplo, si has extrudido una
378

forma, no es posible editar la forma con la "herramienta de edición de forma" porque

ya no es más una forma simple de 2D con la que puedes interactuar. Sin embargo, si
utilizas este control puedes "desactivar" temporariamente la extrusión para poder
visualizar y modificar el objeto subyacente utilizando otras herramientas, antes de
volver a activar la extrusión otra vez. Luego de realizar la modificación y de activar la
extrusión, la extrusión se volverá a aplicar a tu objeto 2D modificado, con todos los
mismos atributos 3D que tenía antes de haber desactivado la extrusión.

Ten en cuenta que en algunos casos si cambias mucho la forma del objeto mientras
la extrusión está desactivada (p. ej. cuando transformas un objeto a una forma
completamente diferente), puede ocurrir que los atributos de la extrusión 3D que
hayas aplicado no se haya conservado. En estos casos puedes utilizar PEGAR
ATRIBUTOS para copiar los atributos de una copia de tu extrusión original antes de la
modificación. Ver Copiando estilos: pegar atributos (en la página 139).

Profundidad de la extrusión
La forma más fácil de ajustar la profundidad de la extrusión es que hagas clic y luego
arrastres el cursor sobre la extrusión como ha sido explicado arriba. Aunque también
para realizar ajustes puedes utilizar la barra deslizante, que se encuentra en la parte
izquierda de la barra de información de la herramienta de extrusión. Asegúrate de
haber seleccionado PROFUNDIDAD DE EXTRUSIÓN en la lista desplegable a la izquierda
de la barra deslizante (esta es la configuración que viene por defecto). La profundidad
de la extrusión actual se puede visualizar en el campo numérico a la derecha de la
barra deslizante, también puedes introducir al campo tus valores para la profundidad
de la extrusión.

Tipo y tamaño del bisel

El tipo de bisel determina el perfil que tendrán los costados, los bordes y las esquinas
de la extrusión 3D. El tipo de bisel que se activa por defecto es el bisel con esquinas
redondeadas. La lista desplegable del tipo de bisel tiene una larga selección de
distintos tipos de biseles de las que puedes elegir. Puedes ajustar el tamaño del bisel
utilizando la barra deslizante a la derecha de la lista de tipos de bisel. A la derecha de
la lista de tipos de bisel se encuentra un campo numérico que muestra el tamaño
actual del bisel, y si quieres puedes introducir otro tamaño de bisel.

Un atajo (shortcut) alternativo para ajustar el tamaño del bisel es que arrastres el
cursor al costado del objeto 3D mientras mantienes presionado el botón "Ctrl" (con la
herramienta de extrusión activada).

Luces
LUCES ON/OFF

Si activas las luces podrás ajustarlas a tu gusto en el espacio 3D . Hay tres luces a las
que se les puede asignar un color propio y una posición específica en el diseño.
www.magix.es
 Herramienta de extrusión 3D 379

En este ejemplo, el color del frente de la

forma será blanco. Pero verás que se ve
verde porque hay una luz verde que ilumina
casi directamente la "cara" (frente) de la
forma.
Podrás optimizar los objetos 3D en tu
diseño ajustando sus colores y las
posiciones de las tres luces.

Detrás del objeto hay una luz de color beige/naranja y otra de color púrpura. Ambas
luces generan reflejos en los costados, y si cambias el color o la dirección de las luces
que se encuentran detrás del objeto, los reflejos de las luces también cambiarán.

Para mover una luz alrededor del objeto 3D, arrastra la flecha de la luz. Si sueltas la
luz detrás del objeto 3D (ya no la podrás seleccionar), puedes recuperarla utilizando
la barra deslizante de la izquierda en la opción "Extrudir" de la barra de información.
Selecciona uno de los ángulos de luz de la lista desplegable (por ejemplo: "Luz 2
Ángulo 1") a la izquierda de la barra deslizante. La luz se moverá alrededor del objeto
3D de tu diseño. Las distintas opciones de "ángulos de luz" de esta lista desplegable
te permiten mover todas las luces en cualquier dirección del espacio 3D para lograr
las posiciones que desees. Sin embargo, en general también obtendrás buenos
resultados arrastrando las flechas de luz a la página.

Para cambiar los colores de las luces, sólo tienes que arrastrar los colores de la barra
de colores y soltarlos directamente sobre las flechas de luz. Para editar el color de la
luz con el editor de color, haz doble clic en la flecha de luz que quieres cambiar y el
editor de color se abrirá con el color de la luz que hayas seleccionado. Ahora podrás
editar los colores de la luz. Con el editor de color abierto, mientras haces clic en las
diferentes flechas de luz, en el frente (cara) y en los costados de la extrusión, el color
seleccionado de la lista desplegable del editor de color cambia para que coincida con
el de la selección; así podrás seleccionar y cambiar rápidamente los diferentes colores
de tu extrusión.

Brillo / Mate
Utiliza este botón para hacer la superficie del objeto 3D más o menos
reflectante. Con la opción de brillo y la luz posicionada en el lugar correcto
detrás del objeto, la luz rebotará en los costados del objeto creando un efecto.

Esquina con inglete / Esquina redonda

Puedes elegir entre esquinas CON INGLETE o REDONDAS para tu objeto
3D. Las esquinas con ingletes tienen bordes cuadrados y las redondas
producen bordes redondeados.
380

Texturas y fotos
Cuando extrudas una foto, la foto se verá en el frente (cara) del objeto 3D. Puedes
crear impresionantes efectos 3D de fotos en un par de segundos con tan sólo
importar una foto y luego aplicarle una extrusión.

Este efecto se genera cuando realizas una extrusión de una foto y la giras un poco, creando una
copia reflejada por medio de la herramienta de selección, y ajustando el ángulo 3D para que
coincidan. Luego se le da una transparencia graduada para crear un reflejo más oscuro.

Puedes utilizar cualquier foto o textura para el frente de tu extrusión. Puedes importar
tu imagen y realizarle una extrusión como se explicó arriba, o arrastra y suelta una
imagen sobre el frente de una extrusión existente mientras presionas "Shift". Se habrá
aplicado la foto o la textura en el frente (cara) del objeto extrudido.

Extrudir texto
Puedes realizar una extrusión a un texto de la misma forma que se le puede realizar a
una forma. Haz clic y arrastra el ratón sobre el texto mientras utilizas la herramienta
de extrusión. Como es de esperar, si haces esto a varias palabras esto puede ser un
proceso lento y no es recomendable.

www.magix.es
 Herramienta de extrusión 3D 381

Como el texto en general es negro, al menos que cambies el color de la extrusión

resultante también será totalmente negro (esto hace difícil su visualización). Por ello,
se recomienda cambiar el color antes de realizar la extrusión (aunque puedes
cambiarlo luego con sólo hacer clic en un color).

Como ocurre con otros objetos extrudidos, si quieres editar el texto, sólo tienes que
desactivar la extrusión utilizando el botón de la izquierda de la barra de información
para realizar extrusiones, edita el texto y luego vuelve a activar la extrusión con el
mismo botón.

Copiar atributos de una extrusión 3D

Puedes copiar y pegar el estilo de una extrusión 3D, de un objeto 3D a otro. Esta
opción funciona de la misma forma que para todos los atributos en el Web Designer.
Simplemente copia la fuente del objeto extrudido al portapapeles y luego selecciona
uno nuevo, después selecciona EDITAR -> PEGAR ATRIBUTOS . Ten en cuenta que esta
acción sólo pegará los atributos 3D sobre otros objetos 3D extrudidos. Por ello,
primero tienes que extrudir una forma antes de pegarle los atributos 3D.

Esto copiará todos los atributos 3D tales como la profundidad de la extrusión, los
colores de la luz, tipo de bisel, y los colores del frente del objeto y los bordes.

Insertar sombras detrás del objeto

Utilizando la herramienta de sombra puedes optimizar el efecto 3D colocando una
sombra tenue detrás del objeto. Sólo tienes que aplicar herramienta de sombra y
arrastrarla sobre el objeto 3D.

El ejemplo de la izquierda es un ejemplo de una sombra de pared y el de la derecha es de una

sombra de suelo.
382

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 11 Premium 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.

Web Designer y las 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 11 Premium 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
www.magix.es
 Barras de navegación 383

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
añadir o quitar 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.

Usar de barras de navegación de plantillas

La galería de diseños contiene una amplia variedad de barras de navegación de
plantillas para tu uso. Son tanto barras horizontales como verticales y son
completamente personalizables. Tan solo arrastra y suelta una barra desde la galería
hasta tu página. O reemplaza una barra existente soltando la nueva encima: la nueva
barra adopta todos las etiquetas de los botones, enlaces y menús de la barra
reemplazada.

Cuando sueltes la barra puede que se te sugiera ajustar el esquema de color del
documento si no es el mismo que el de la barra. Puedes usar el color de la función de
reemplazo de color para cambiar los colores de la barra: todo esto sin tener que
desagrupar la barra en sus diferentes objetos. Tan solo selecciona la barra y haz clic
sobre un color de la línea de colores, o si está abierto el editor de color, elige el color
que desees editar desde la lista de colores desplegable.

Consulta Esquemas de colores de temas (en la página 186) para más información
sobre edición de temas de colores y mira en "Reemplazar colores" para saber como
puedes personalizar los colores fácilmente.

También se puedes crear barras de navegación desde cualquier diseño de botón: si

quieres crear tu propia barra, consulta más adelante en la sección correspondiente
de este capítulo.
384

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ú.

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.

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

www.magix.es
 Barras de navegación 385

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.

El orden de los botones coincide con el orden de la página

Al activar esta opción, el orden de los botones de la barra de navegación coincidirá
con el orden de las páginas del documento. Si cambias el orden de las páginas en la
GALERÍA DE PÁGINAS Y CAPAS , la barra de navegación también se reordenará. Esto es
especialmente útil para las barras de navegación de los sitios web con
presentaciones, en los que es importante mantener el orden lineal de las páginas y
para los que deseas que los botones de la barra tengan el mismo orden de las páginas
de la presentación.
386

Barra de navegación del sitio

Esta es una opción muy importante en el DIÁLOGO 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 tan pronto como cierres el diálogo Barra de
navegación.

Por lo general 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.

Esta barra de navegación del sitio también es útil para completar automáticamente
las entradas de menú en un solo botón de barra de navegación después de convertirlo
desde un botón múltiple de barra de navegación. Ver Botón único de barra de
navegación (en la página 387) para más información.

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.
www.magix.es
 Barras de navegación 387

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 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.

Barras de navegación de botón único

Las páginas diseñadas para ser visualizadas en dispositivos móviles pequeños tienen
poco espacio para barras de navegación horizontales o verticales, por lo que se
necesita una solución más eficiente en relación al espacio. Usar una barra de
navegación con un único botón y un menú es una de las soluciones que funcionan
bien, no importa cuantas páginas tenga el sitio.
388

Barra de navegación vertical de botón único

Para hacer una barra de navegación de botón único de una barra normal, tan solo abre
el diálogo PROPIEDADES DE LA BARRA DE NAVEGACIÓN (haz doble clic sobre la barra de
navegación) y borra todos los botones menos uno. Ahora borra los enlaces del botón
(haz clic en el campo URL al lado del botón en el diálogo y elige NO APLICAR en el
diálogo de enlace). Ahora puedes comenzar a añadir entradas de menú al botón de
forma manual en el diálogo de la barra de navegación o se puede añadir una entrada
de menú de forma automática para cada página en tu sitio web. Para añadir los
enlaces de forma automática, activa la opción BARRA DE NAVEGACIÓN DE PÁGINA WEB
en el diálogo (o desactívala y actívala de nuevo si ya estaba activada). Verás que tu
menú se completa con un enlace a cada página de tu sitio web. Edita los nombres de
cada entrada en el menú si no quieres que sean los mismos nombres que las páginas.

Hay una selección de diferentes diseños de barra de navegación en la GALERÍA DE

DISEÑOS dentro de "WIDGETS Y ELEMENTOS DE PÁGINA" > "BARRAS DE NAVEGACIÓN" .
También cada uno de los temas que hay en Temas de páginas web (general) tienen
sus propios diseños de barra de navegación. Cambia el diseño de tu barra de
navegación arrastrando un nuevo diseño de la galería de diseños y soltándolo en tu
barra.

IMPORTANTE: ten en cuenta que algunas barras de navegación tienen diseños de

primer y último botón que difieren del diseño de los botones centrales. Estas barras
de navegación no son adecuadas para un botón único porque si se queda el botón
central solo, su diseño es poco probable que sea atractivo, por lo que el diálogo de
propiedades de la barra de navegación no te permite borrar los botones de la derecha
y la izquierda de estas barras para dejar solo el central. Por lo que elige un diseño de
barra de navegación donde todos los botones de la barra tengan la misma apariencia.

www.magix.es
 Barras de navegación 389

Todos los botones iguales: adecuado

para barras de navegación de botón
único.

Diseños de botón final diferentes: no

adecuado para barras de navegación
de botón único.

Para convertir una barra de navegación de botón único en una barra de botones
múltiples normal, tan solo añade más botones y borra las entradas de menú del
primer botón si no se requiere ningún menú.

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
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 273) que utilizas para agregar otros enlaces a tu página y están
disponibles las mismas opciones. Algunas opciones están desactivadas porque no
390

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ú.

Creación de los botones MouseOver propios

Puedes crear tus propios botones MouseOver desde cero dibujando los elementos
necesarios con rectángulos, texto, etc. Tan solo dibuja las partes principales del botón
en la capa MouseOff (recuerda agruparlo (en la página 50)) 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. Después seleccionas una capa MouseOver en la GALERÍA DE
PÁGINAS Y CAPAS 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 seleccionas un botón en una capa, se selecciona automáticamente
la versión de grupo suave en la otra capa, aun 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 PÁGINAS Y CAPAS y realizar una selección lazo
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 este efecto 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 tengas un botón operativo, puedes convertirlo en una barra de
navegación. Selecciona el botón (junto con su estado MouseOver, si lo tiene) y
selecciona entonces "ARREGLO" > "CREAR BARRA DE NAVEGACIÓN" . El diálogo de barra
de navegación aparece para que puedas configurar la barra. Consulta el capítulo Barra
de navegación (en la página 382) para más información, incluyendo cómo tener
diferentes botones iniciales y finales en tu barra.

www.magix.es
 Barras de navegación 391

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ú.

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.
392

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.

Espaciado
Con esta configuración puedes agregar espacio entre las entradas del menú; si las
separas, el menú será más grande.

Borde

www.magix.es
 Barras de navegación 393

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
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.

Si el objeto de texto es un objeto repetido (clic derecho y REPETIR EN TODAS LAS

PÁGINAS ), todos los cambios que realizas a una instancia del objeto se actualizarán
automáticamente.
394

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 (es parte del mismo grupo de repetición), 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 (no es parte del mismo grupo de repetición)
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 390) 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.

www.magix.es
 Barras de navegación 395

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.

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.
396

Presentaciones como páginas web

Sobre las presentaciones

MAGIX Web Designer 11 Premium te permite crear presentaciones web: parecido a
una presentación de Microsoft PowerPoint® pero como una web Supersite (en la
página 303) con efectos tales como transiciones animadas de los pasos dentro de
una página y transiciones animadas de página fluidas.

Las presentaciones son documentos de páginas web HTML normales y son

compatibles con todos los navegadores modernos así como con teléfonos y tablets.
Se ajustan automáticamente para adaptarse al tamaño de cualquier ventana de
navegador.

Quienes visiten tu presentación web podrán navegarla paso por paso y página por
página con la flecha hacia la derecha o la tecla Av. Pág. para ver el próximo paso o
página y la flecha hacia la izquierda o la tecla Re. Pág. para volver hacia atrás.
También aparecerá una barra de navegación popup en la parte inferior izquierda de la
presentación que te permitirá desplazarte fácilmente por las páginas de la
presentación.

Puedes exportar tu presentación, tal como lo haces con un sitio web convencional. Si
alojas tu presentación en MAGIX Online World, el alojamiento es gratuito y también
puedes proteger tu presentación por contraseña, de modo que solo los visitantes
invitados autorizados puedan ver tu presentación.

Pasos y capas
Los pasos en una presentación son en realidad capas que están animadas en la página
de una en una. Si abres la galería de páginas y capas (en la página 85) verás todos los
pasos, como capas, además de otras cuantas capas.

El fondo de cada diapositiva de la galería de páginas y capas se llama capa MOUSEOFF .

Sobre este hay otra capa MOUSEOVER que contiene elementos que tienen
comportamiento MouseOver, tales como botones, barras de navegación, flechas de
"página siguiente", etc. Además hay un FONDO DE TABLERO DE DIBUJO y un FONDO DE
PÁGINA que son capas especiales y que generalmente están bloqueadas.

Es importante tener en cuenta que no es necesario usar la galería de páginas y capas

para crear o editar tu presentación. La barra de herramientas de presentación (en la
página 398) principal se puede usar para añadir, borrar y saltar a cualquier paso de tu
presentación.

www.magix.es
 Presentaciones como páginas web 397

Pasos de presentación en la galería de páginas y capas: la flecha muestra el paso actual.

Puedes reordenar los pasos de tu presentación si ordenas las capas en la galería. Los
números de los pasos se actualizarán automáticamente.

El paso actual está indicado con el símbolo de la flecha (en la captura de pantalla
arriba, el paso de presentación 2 es el actual). Tan solo haz clic sobre un paso para
hacer que sea el actual.

En el espacio de trabajo solo se muestran los objetos sobre la capa actual e inferior.
Así se refleja como se verá tu presentación cuando ese paso se alcanza en la
presentación. En una presentación de 3 pasos, por ejemplo, si el paso 2 es actual, no
verás ningún otro objeto en el paso 3 hasta que no hagas actual este paso u otros
siguientes.

Además puedes hacer clic en el icono "S" (solo) junto al paso que quieres ver, para
visualizar solamente este paso en el lienzo. Haz clic en el icono nuevamente para
volver al modo normal.

Al igual que con las capas, puedes hacer clic y arrastrar un objeto para moverlo de un
paso a otro en la GALERÍA DE PÁGINAS Y CAPAS.
398

La barra de herramientas "Presentación"

MAGIX Web Designer 11 Premium te muestra automáticamente la barra de
herramientas "Presentación" en el lado derecho de la barra de herramientas estándar
cuando creas o abres un documento de presentación.

La barra de herramientas te permite:

Crear un nuevo paso de presentación que contenga cualquiera de los objetos

seleccionados en el momento. Crear pasos rápidamente si arrastras o pegas
objetos en la página, los seleccionas y luego haces clic en este botón. Aun si
los objetos seleccionados ya se encuentran en un paso de presentación, un
clic en este botón moverá los elementos marcados a un nuevo paso. Si no has
seleccionado ningún objeto, cuando presionas este botón, un nuevo paso
vacío se crea y se convierte en el actual, por lo que todo lo que dibujes o
añadas a continuación se situará en ese paso.

Mueve los objetos seleccionados a la capa MouseOff, si no son parte de

ningún paso de presentación y deben mostrarse permanentemente como
objetos "de fondo".
Duplicar el paso de presentación actual (tal vez la opción más fácil para crear
un nuevo paso). El paso que contiene el objeto seleccionado se duplicará en su
totalidad (no solo el objeto seleccionado). El nuevo paso se convierte también
en el paso actual.
Eliminar el paso de presentación actual. El paso que contiene los objetos
seleccionados se elimina por completo, incluyendo los objetos de este paso
que no están seleccionados.
Salta a cualquiera de los pasos de la
presentación así como a la capa de
fondo/MouseOff.

Muestra la pestaña "Transición web" del diálogo Propiedades de capa (en la

página 426), lo que te permite escoger un tipo de transición para el paso de
presentación en el que se encuentran los objetos seleccionados.

www.magix.es
 Presentaciones como páginas web 399

Creación de una presentación

Existen tres formas de crear una nueva presentación:

• Comienza con una plantilla prediseñada y luego personalízala (en la página

399) con tu propio texto, imágenes y esquema de colores.
• Crea una presentación desde cero (en la página 399): agrega todos los
elementos necesarios, texto, gráficos y fotos en tu página y ordena el contenido
en pasos y páginas de tu presentación, tal como lo desees.
• Convierte una página web/documento web existente (en la página 401) en una
presentación.

Creación de una presentación a partir de plantillas

Abre la GALERÍA DE DISEÑOS con un clic en la pestaña GALERÍA DE DISEÑOS o
ARCHIVO > NUEVO DE LA GALERÍA DE DISEÑOS .

Busca la carpeta PRESENTACIONES en la galería y haz doble clic para abrirla.

Las carpetas temáticas contienen colecciones de diseños de presentaciones y

archivos gráficos asociados con cada tema específico. Navega por las carpetas de
temas hasta encontrar un diseño que te guste y haz doble clic sobre la primera
miniatura, denominada "Presentación".

Se abrirá un nuevo documento de presentación que muestra todas las páginas de

plantillas, con varias páginas y, cada una, con pasos de presentación con contenido.
Algunas páginas y pasos tienen aplicadas transiciones.

Haz clic en VISTA PREVIA DE PÁGINA WEB COMPLETA para abrir una ventana de
vista previa: entonces haz clic en uno de los iconos de navegador en el
extremo superior derecho de la ventana para lanzar un navegador externo. Tus
presentaciones puedes verlas en un navegador web separado para ver bien el
resultado de las animaciones de transición. También puedes usar las flechas
del extremo superior izquierdo de la presentación (o en tu teclado) para ver
los pasos y transiciones activos. Trata también de mover el cursor del ratón
hasta la esquina inferior izquierda de las ventanas de vista previa de
presentación para ver los controles de navegación desplegables.

Cierra la vista previa.

Personaliza el texto y las fotos con tu propio contenido, tal como cuando editas un
documento de página web.
400

Creación de una presentación desde cero

Esta sección describe el mejor flujo de trabajo para crear una página de presentación
mediante un ejemplo que te ayudará a dar los primeros pasos rápidamente.

Selecciona "NUEVO" > "PRESENTACIÓN (PANORÁMICA)" o "NUEVO" > "PRESENTACIÓN

(4:3 NORMAL)" del menú ARCHIVO dependiendo de si quieres una presentación en
pantalla panorámica (16:10) o una normal (4:3).

Nota: 16x10 es una solución mejor para algunos monitores de pantalla ancha y
tabletas que no son exactamente 16:9 y no es tan achatada. Pero, por supuesto,
puedes crear cualquier relación de aspecto que necesites.

Se abrirá una nueva ventana con un documento en blanco, que mostrará el

icono de documento de presentación en su pestaña en la parte superior de la
ventana del documento.
La barra de herramientas "Presentación" aparecerá en el extremo derecho de la barra
superior. Los botones de la barra de herramientas están habilitados únicamente
cuando has seleccionado algún elemento en la página.

1. Utiliza la HERRAMIENTA DE TEXTO para agregar texto a tu presentación en blanco,

tal vez, en el encabezado de la página. Selecciona este objeto de texto con la
HERRAMIENTA DE SELECCIÓN y mira la barra de estado en la parte inferior de la
ventana de Web Designer. Te indicará que has seleccionado un objeto de texto
en la capa MouseOff. Todos los elementos de la capa MouseOff estarán visibles
de forma permanente en tu presentación, puesto que esta capa es parte de tu
fondo. Por lo tanto, haz una vista previa de tu página para ver el texto del
encabezado.
2. Ahora agrega un nuevo objeto de texto con la HERRAMIENTA DE TEXTO.
Nuevamente, este objeto se colocará en la capa MouseOff y la línea de estado te
lo indicará cuando lo selecciones con la HERRAMIENTA DE SELECCIÓN . Ahora,
hagamos que este texto aparezca como el primer paso de esta presentación.
3. Con el texto seleccionado en la HERRAMIENTA DE SELECCIÓN , haz clic en el botón
"pie" que es el primer botón de la barra de herramientas "Presentación", llamado
CREAR COMO PASO NUEVO . Ahora mira la línea de estado: te indicará que el
objeto seleccionado es el "paso 1 de la presentación" en vez de MouseOff.
4. Haz nuevamente una vista previa. Al comienzo verás solamente el encabezado
inicial. Pulsa la flecha derecha de tu teclado para que aparezca el segundo objeto
de texto. Ya has agregado el primer paso de tu presentación.
5. El paso 1 es ahora el paso actual, por lo que si dibujas un nueva forma o añades
algún texto, será situado en el paso 1. Dibuja un rectángulo usando la
HERRAMIENTA DE RECTÁNGULO . Selecciónalo con la HERRAMIENTA DE SELECCIÓN y
nota como la barra de estado muestra el rectángulo situado en Paso de
presentación 1, que es también el paso actual.
6. Haz nuevamente una vista previa de tu página y verás que, al pulsar la flecha
hacia la derecha, aparecen el texto y el rectángulo.
www.magix.es
 Presentaciones como páginas web 401

7. Una forma rápida de crear un nuevo paso a partir de un paso existente es utilizar
el botón DUPLICAR PASO. Selecciona el rectángulo y pulsa este botón. Se
duplicará todo el paso, incluyendo el texto que no has seleccionado, pero que se
encontraba en el paso 1 junto con el rectángulo. Selecciona el nuevo texto o
rectángulo y la línea de estado te indicará que se encuentra en un nuevo paso de
la presentación. El nuevo paso se convierte en el paso actual: el paso de
presentación 2 y otros objetos que crees ahora se añadirán a este paso.
8. Si quieres mover un objeto a otro paso, haz clic derecho sobre él y verás el
submenú PRESENTACIÓN en el menú contextual que aparece. El submenú, a su
vez, contiene otro submenú MOVER A PASO , que enumera todos los pasos
existentes en la página. Tan solo selecciona el paso que desees. También existe
la opción NUEVO PASO en el menú, que tiene el mismo resultado que el botón
CREAR COMO PASO NUEVO que utilizamos más arriba.
9. Puedes cambiar el efecto utilizado para cada paso de forma muy sencilla.
Selecciona uno de los rectángulos que acabas de añadir y pulsa el último botón
de la barra de herramientas "Presentación", denominado EFECTO DE TRANSICIÓN
DEL PASO . Así se abre un diálogo que te permite seleccionar una transición
diferente en vez de la transición por defecto, "fade". Selecciona APARECER DESDE
LA DERECHA . Haz nuevamente una vista previa de tu página y verás que, al pulsar
la flecha hacia la derecha, el texto y el rectángulo aparecen desde la derecha.
10. Si decides que deseas que un objeto permanezca visible de forma permanente
en vez de formar parte de un paso, selecciónalo y pulsa el botón MOVER AL
FONDO en la barra de herramientas presentación. Así se coloca el objeto
nuevamente en la capa MouseOff. Pruébalo con uno de los objetos que has
colocado en un paso.
11. La GALERÍA DE DISEÑOS contiene algunos componentes muy útiles para las
presentaciones en "PRESENTACIONES " > "COMPONENTES DE PRESENTACIONES ". Tan
solo arrastra y suelta un componente hasta tu página. Cada componente se
añade al paso actual. Si no es esto lo que quieres, utiliza la barra de
herramientas "Presentación" o haz clic derecho en el menú "Presentación" para
moverlo a otro paso o a la capa de fondo (MouseOff). (Ten en cuenta que los
componentes TÍTULOS y CONTROLES DE TRANSICIÓN siempre se añaden a la capa
de MouseOff/Fondo).
12. Recuerda, como está descrito arriba, que la GALERÍA DE PÁGINAS Y CAPAS te
muestra todos los pasos de presentación en tu página en orden, puesto que
cada paso de la presentación es, en realidad, una capa independiente. Tan solo
el paso actual y los pasos anterior y posterior a él se muestran en el espacio de
trabajo.

Conversión de una página web existente en una

presentación
En el documento de página web, haz clic derecho sobre una página y escoge
PROPIEDADES DE PÁGINA WEB para ver el diálogo Propiedades web.

Haz clic en la pestaña Página web y luego en PÁGINA WEB DE PRESENTACIÓN para
seleccionar esa opción.
402

La pestaña del documento en la parte superior del espacio de trabajo mostrará

el ícono de documento de presentación.

Nota: las capas dentro del documento no se convierten automáticamente en pasos

de la presentación cuando conviertes una página web en una presentación. Debes
convertir de forma manual cada capa en un paso de la presentación, consulta
Conversión de una capa en un paso. Sin embargo, cuando conviertes una
presentación en una página web, los pasos de la presentación se convierten
automáticamente en capas que reciben el nombre "paso 1", etc.

Manejo de los pasos de presentación

En general, puedes manejar los pasos de una presentación de la siguiente manera:

• Haz clic derecho sobre un objeto de un paso y escoge PRESENTACIÓN y luego

selecciona la opción deseada del submenú.
• Utiliza los botones de la barra de herramientas Presentación (en la página 398).
• Utiliza la GALERÍA DE PÁGINAS Y CAPAS .

Visualización del contenido de los pasos

En ocasiones puede que quieras obtener una vista más clara de los objetos que se
encuentran en un paso. Puedes usar la opción SALTAR A en la barra de herramientas
de presentación para llevarte a un paso o capa particular o incluso utilizar la GALERÍA
DE PÁGINAS Y CAPAS .

Para una fácil navegación, el menú SALTAR A solo visualiza la capa fondo/MouseOff y
los pasos de presentación. Si necesitas seleccionar otra capa (MouseOver, fondo de
página, fondo de tablero de dibujo) tan solo selecciona GALERÍA DE PÁGINAS Y CAPAS y
se desplegará como la página actual en el menú desplegable SALTAR A .

Si haces clic en un paso en la GALERÍA DE PÁGINAS Y CAPAS todos pasos que has
seleccionado previamente se ocultarán y todos los pasos abajo se harán visibles
dándote así una vista precisa de tu posición en la presentación como se muestra en el
espacio de trabajo. Sucede lo mismo si seleccionas un paso usando la opción SALTAR
A . Puedes ocultar o mostrar cualquiera de los pasos en la presentación haciendo clic
en el icono de ojo.

Además puedes hacer clic en el icono "S" (solo) junto al paso que quieres ver, para
visualizar solamente este paso en el lienzo. Haz clic en el icono nuevamente para
volver al modo normal.

Ten en cuenta que en la GALERÍA DE PÁGINAS Y CAPAS se hace referencia al fondo del
menú SALTAR A como capa MouseOff.

www.magix.es
 Presentaciones como páginas web 403

Mover objetos de un paso a otro

Puedes mover objetos de un paso a otro en tres formas diferentes:

• Haz clic derecho sobre el objeto y selecciona "PRESENTACIÓN" > "MOVER A PASO"
, luego selecciona el número de paso al que quieres mover los objetos, o
selecciona "FONDO" si quieres mover los objetos a la capa MouseOff, o bien
"NUEVO PASO" para mover los objetos a un nuevo paso.
• En la GALERÍA DE PÁGINAS Y CAPAS, haz clic y arrastra los objetos de un paso a
otro o haz clic derecho sobre los objetos y escoge MOVER A LA CAPA ACTUAL .
• Usa cortar y pegar para mover objetos de un paso a otro. Corta el objeto
(Ctrl+X), convierte el paso que quieras mover en el paso actual, luego pega
(Ctrl+V) o pega en el lugar (Ctrl+Shift+V).

Cambio del orden de los pasos

El orden en que los pasos se ven es el orden en que los pasos aparecen en la GALERÍA
DE PÁGINAS Y CAPAS , tal como lo indican los números de pasos. También puedes
hacer clic y arrastrar los pasos hacia arriba o hacia abajo en la GALERÍA DE PÁGINAS Y
CAPAS hasta que los pasos se encuentren en el orden que desees.

Eliminar objetos de un paso

Haz clic derecho sobre el objeto y selecciona CORTAR o ELIMINAR o, en la GALERÍA DE
PÁGINAS Y CAPAS haz clic derecho sobre el objeto y selecciona ELIMINAR , o haz clic en
el objeto y luego pulsa el botón ELIMINAR en la barra de herramientas estándar.

Cuando borras un objeto y éste es el único en un paso, Web Designer eliminará el

paso vacío automáticamente solo después de las operaciones "guardar" o "vista
previa" . Así se pueden añadir objetos a un paso sin alterar el orden de pasos
existentes.

Tras las operaciones Guardar o Vista previa, los pasos vacíos se eliminarán y los
pasos restantes se volverán a numerar respectivamente.

Eliminar un paso
Selecciona un objeto del paso y haz clic en el botón ELIMINAR PASO de la
barra de herramientas "Presentación" o haz clic derecho y escoge
PRESENTACIÓN > ELIMINAR PASO .

O bien, haz clic derecho sobre la capa en la GALERÍA DE PÁGINAS Y CAPAS y

seleccionaELIMINAR CAPA .
404

Agregado de nuevas páginas de presentación

Haz clic derecho en MAGIX Web Designer 11 Premium y escoge NUEVA PÁGINA para
agregar una nueva página en blanco, o DUPLICAR LA PÁGINA ACTUAL para añadir una
copa de la página seleccionada.

Creación de listas con números y viñetas

Al añadir listas con viñetas o números a una presentación, cada elemento de la lista
se convierte automáticamente en un paso de presentación independiente cuando la
exportas. Esto facilita la creación y edición de elementos animados de una lista. Para
agregar nuevos elementos a la lista, haz clic en Intro al final de uno de los elementos
existentes. El efecto de transición que se utiliza para cada elemento de la viñeta
durante la presentación es el establecido para la capa de presentación en la que se
encuentra la lista (no puedes fijar efectos diferentes para los diversos puntos de la
misma lista).

Para desactivar esta función, haz clic derecho en el área de texto mientras te
encuentras en la HERRAMIENTA DE TEXTO, escoge Presentación > Presentar por
párrafo del menú y quita la selección de la opción. Ahora, al exportar/previsualizar tu
presentación, la lista no se separará en pasos independientes.

Para más información sobre las listas con viñetas y números, consulta Manejo de
texto > Aplicación de apariencias de texto (en la página 196)

Eliminar páginas de presentación

Haz clic derecho sobre la página y selecciona ELIMINAR PÁGINA ACTUAL . O selecciona
las páginas que quieres borrar en la GALERÍA DE PÁGINAS Y CAPAS y pulsa "borrar",
para borrar varias páginas a la vez.

Enlaces al paso siguiente/anterior

Puedes agregar fácilmente botones y objetos a una página de presentación que
muestren el próximo paso en la página. Simplemente agrega o crea tu botón y utiliza
la lista ENLACE A en la pestaña Enlace (en la página 274) del diálogo de Propiedades
web para aplicar un enlace al botón u objeto que mostrará el próximo paso de
presentación.

Cuando el visitante haya visto todos los pasos de la página con el enlace "próximo
paso de presentación" o con la flecha hacia la derecha, al hacer clic en el botón o
pulsar la tecla nuevamente, verá la próxima página.

www.magix.es
 Presentaciones como páginas web 405

Nota: si conviertes una presentación en un documento web (opción PÁGINA WEB DE

PRESENTACIÓN en el diálogo Propiedades web en la pestaña Página web), los enlaces
Paso de presentación anterior/siguiente se convierten automáticamente en los
enlaces Página anterior/Próxima página. No puedes aplicar enlaces "Paso de
presentación anterior/siguiente" a un documento web.

Aplicación de transiciones a pasos de

presentaciones
Cuando creas un paso, Web Designer le asigna automáticamente una transición
instantánea.

Para cambiar la transición en pasos de presentaciones:

Abre la pestaña "Transiciones" del diálogo de "Propiedades de capa" con un

clic en el botón "Propiedades de transición de capa" en la barra de
herramientas "Presentación" o haz clic derecho en un objeto dentro del paso y
selecciona PRESENTACIÓN > TRANSICIÓN. O bien, en la GALERÍA DE PÁGINAS Y
CAPAS , haz clic derecho en el paso y escoge PROPIEDADES DE CAPA .

Escoge una transición de la lista de EFECTO DE TRANSICIÓN , arrastra la barra

VELOCIDAD para fijar la duración de la transición entre 0 y 5 segundos y finalmente
haz clic en APLICAR .
406

Los nuevos pasos que has creado adquieren un efecto de transición en el último paso
de la presentación por defecto. Esto significa que, si quieres la misma transición en
todos los pasos, solo tienes que configurarlo una vez sobre el primer paso y entonces
todos los pasos añadidos a continuación tendrán la misma transición.

Aplicación de transiciones a páginas de

presentaciones
Cada página de una presentación puede tener su propia transición. Para añadir una
transición a la página actual, haz clic derecho en la página y selecciona la PESTAÑA DE
PÁGINA (EN LA PÁGINA 282) del diálogo PROPIEDADES DE PÁGINA WEB .

Luego selecciona un tipo de transición para la página en la lista desplegable EFECTO DE

TRANSICIÓN y desliza la barra VELOCIDAD para fijar la velocidad de la transición entre
0 y 5 segundos.

Luego, cuando un visitante navegue por a la página con la transición animada, verá
dicha transición.

También puedes configurar la transición de página para varias páginas de una vez.
Tan solo selecciona las páginas que quieres cambiar en la galería de páginas y capas
(usa Shift+clic y Ctrl+clic para extender la selección) y luego cambia la transición
sobre la pestaña de página como se muestra arriba.

Nota: las transiciones de página solo funcionan para una página web si está
configurada para ser una Supersite. Los documentos de presentación son Supersites
por defecto, por lo que no es necesario visitar esta opción en la PESTAÑA DE PÁGINA
WEB del diálogo.

Información de presentación avanzada

Capas de popup y capas de presentación
Las capas de presentación son capas que tienen la opción de presentación
seleccionada en el diálogo "Propiedades de capa". Una vez que activas esta opción
para una capa, el nombre de la capa se convierte en "Paso de presentación [n°.]" en la
GALERÍA DE PÁGINAS Y CAPAS .

En un documento de presentación puedes mezclar capas popup con capas de

presentación pero, por supuesto, solo las capas de presentación se presentarán
cuando los visitantes naveguen por la presentación con las teclas de flecha del
teclado.

El uso de capas y pasos en simultáneo es útil si quieres conservar características tales

como capas popup en tu presentación. Puedes convertir capas en pasos (y convertir
www.magix.es
 Presentaciones como páginas web 407

pasos en capas) si activas la opción CAPA DE PRESENTACIÓN en la pestaña "Transición

web" del diálogo Propiedades web (en la página 426).

Cuando creas un nuevo paso, esta casilla se selecciona automáticamente.

Si quitas la selección para convertir un paso en una capa, esto eliminará el paso de tu
presentación, pero su contenido y la transición de la capa se conservarán. Sin
embargo, la capa convertida no se mostrará cuando un visitante navegue por la
presentación con las flechas del teclado o con un enlace de paso de presentación
anterior/siguiente.
408

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
En MAGIX Web Designer 11 Premium, un widget es un objeto que puedes colocar en
tu página web y que muestra algún tipo de contenido dinámico que también puede
ser interactivo. Este contenido puede proceder de un sitio web externo (p. ej. un
widget de noticias) o estar publicado con el sitio web (p. ej. un pase de fotos). En el
lienzo de Web Designer, un widget está representado por una imagen estática de
marcador de posición, que define la posición y el tamaño del widget en la página. El
marcador de posición está vinculado con el código HTML y los archivos (Flash,
Javascript, fotos, etc.) que hacen que el widget funcione en la página exportada.

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 objeto. El marcador de posición generalmente tiene las mismas
www.magix.es
 Widgets de sitios web 409

dimensiones que el widget, de forma que puedas posicionarlo con respecto al otro
contenido de tu página.

La buena noticia es que Web Designer generalmente renderiza las imágenes de

posición de marcador por ti.

Tipos de widgets
Básicamente, existen tres tipos de widgets, que se diferencian en la forma en que los
personalizas y configuras en MAGIX Web Designer 11 Premium. A continuación
encontrarás una breve descripción de cada tipo, pero más adelante en este capítulo
cada uno se explica en más detalle. Para los tres tipos de widget puedes hacer doble
clic en la imagen de marcador de posición para editarlos.

Widgets que se editan en la Web

Cuando personalizas estos widgets, se abre una ventana con el navegador web y te
muestra el sitio web que te pone a disposición el widget para que lo configures y
personalices mediante esa interfaz web. Por ejemplo, si utilizas un widget que es un
mapa provisto por un sitio web de mapas, generalmente debes escoger la ubicación
geográfica y el tamaño del mapa. Una vez que hayas finalizado, haz clic en el botón
INSERTAR en la parte inferior de la ventana del explorador. En general, insertarás estos
widgets desde la GALERÍA DE DISEÑOS .

Widgets que se editan en el programa

Estos widgets se editan en Web Designer, pero generalmente en un documento
multipágina independiente, que facilita la edición del contenido del widget. Por
ejemplo, para un widget de un pase de fotos que muestra diez fotos, estas imágenes
se verán y editarán fácilmente dentro del documento multipágina del widget que se
utiliza para modificarlo. En general, también insertarás estos widgets desde la
GALERÍA DE DISEÑOS .

Widgets que se editan manualmente

Estos son widgets que agregas manualmente al insertar el código HTML del widget
directamente en Web Designer o al utilizar la pestaña "HERRAMIENTAS " >
"PROPIEDADES WEB " > "MARCADOR DE POSICIÓN " para insertar el código. También
puedes crearlos al importar un archivo, como una animación o película, en tu página.

Web Designer no te ofrece ninguna otra interfaz para editar tu widget, sino la pestaña
MARCADOR DE LUGAR , que te permite cambiar el archivo o código que lo define.

Widgets de la galería de diseños

Muchos elementos de la carpeta "Elementos de página y widgets" en la galería de
diseños son "widgets", tal como lo indican sus nombres.
410

Para agregar un widget, simplemente arrástralo y suéltalo desde la galería hasta tu

página. Lo que ocurre después depende del tipo del widget. Si es un widget que se
edita en la web, una ventana del navegador se abrirá para permitirte configurar el
widget en la página web del proveedor. Si es un widget que se edita en el programa,
aparecerá un marcador de posición en la página. Haz doble clic en el marcador de
posición para abrir un nuevo documento en Web Designer, que te permitirá
personalizar el widget.

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 11 Premium encontrará el código HTML y lo insertará en tu página por
ti.

Para algunos widgets, MAGIX Web Designer 11 Premium 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 11 Premium 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 11 Premium 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.

www.magix.es
 Widgets de sitios web 411

Edición de widgets existentes

En cualquier momento, puedes hacer doble clic en el marcador de lugar (o doble clic y
escoger EDITAR WIDGET ) en la página de Web Designer para ir al sitio web del
proveedor y modificar o reemplazar el widget.

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 que se editan en el programa

Algunos widgets que arrastras hasta tu página desde la GALERÍA DE DISEÑOS no
abrirán una ventana de navegador, tal como se ha descrito más arriba para los
widgets que se editan en la Web. Estos son widgets que se editan en el programa y
que puedes modificar directamente dentro de Web Designer en una ventana de
documento independiente.

Edición

Después de soltar este tipo de widget en tu página, haz doble clic sobre él para
editarlo. Se abrirá una nueva ventana de documento en Web Designer (el
"documento de edición" del widget). Lo que muestre ese documento dependerá del
widget en sí, pero en general verás un documento multipágina que te permite editar y
personalizar de forma práctica todo el contenido.

En general, se mostrarán instrucciones específicas a un costado o en la parte superior

de la primera página, que te describirá los aspectos del widget que puedes editar en el
documento y los que no puedes. En la mayoría de los casos, puedes editar el texto
que utilizas con la HERRAMIENTA DE TEXTO , pero en general no puedes cambiar ni la
fuente ni el estilo del texto. Puedes sustituir las fotos si arrastras un nuevo archivo de
foto hasta las imágenes desde el explorador de Windows, tal como lo haces para
reemplazar fotos en documentos normales. Y puedes editar las fotos con la
HERRAMIENTA DE FOTOS , ajustarlas con la HERRAMIENTA DE RELLENO , etc.

Mira una página por vez y personaliza los textos y las fotos. Es posible que algunos
objetos estén bloqueados (un clic sobre ellos no tiene efecto), lo que te indicará los
aspectos del widget que no puedes editar, o tal vez debas modificarlo al cambiar los
objetos bloqueados en algunas de las otras páginas. Los objetos bloqueados están
presentes como ayuda visual para ayudar al contexto de las partes editables sin
bloqueo del diseño.

Agregado de más contenido

412

Algunos widgets te permitirán agregar más contenido al widget, si duplicas las

páginas que se muestran (clic derecho sobre la página y escoge DUPLICAR PÁGINA
ACTUAL ). Un widget de pase de fotos te permitirá agregar más fotos de esta forma.
Después de duplicar una página, cambia las fotos o el texto, como lo desees. Las
instrucciones en el widget te indicarán si puedes o no duplicar páginas de esta forma
para agregar contenido.

Si realizas cambios que las instrucciones te indican que no debes hacer, en general, se
ignorarán. Sin embargo, es posible que el widget deje de funcionar, así que cambia
solamente los aspectos del diseño que las instrucciones te indican que puedes
modificar.

Cambio de tamaño

Los widgets que se editan en el programa en general no pueden redimensionarse, por

lo tanto, no cambies el tamaño del marcador de posición en tu página ni las
dimensiones de página en el documento de edición del widget.

Guardado de cambios

Una vez que finalices tu personalización, cierra el documento y se te preguntará si

deseas guardar los cambios que has hecho al documento de página web. Como
alternativa, solo pulsa "Ctrl + S" y los cambios que realices se guardarán y el
documento de edición se cerrará para que vuelvas al documento de tu página web.

El marcador de posición que representa tu widget debería actualizarse para reflejar la

primera página del documento de edición. Haz una vista previa de tu página para ver
el resultado de tus cambios en el widget.

Agregado de archivos de películas y

animaciones
MAGIX Web Designer 11 Premium 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.

www.magix.es
 Widgets de sitios web 413

Archivos de película MP4 y FLV

Al importar un archivo MP4 o FLV, MAGIX Web Designer 11 Premium inspecciona el
archivo para determinar la relación de aspecto y otra información acerca de la
película. Se te preguntará si deseas que se inicie la reproducción de la película
automáticamente tan pronto como se cargue la página en que aparece (autoinicio).
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.

Como alternativa puedes usar algún widget de la GALERÍA DE DISEÑOS para presentar
tus vídeos. De este modo tendrás más control sobre la presentación. Consulta
ELEMENTOS DE PÁGINA Y WIDGETS > AUDIO / VÍDEO .

Otros formatos de película

MAGIX Web Designer 11 Premium no es directamente compatible con otros
formatos de película, pero visita el 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.

Archivos MP3
Importa un archivo MP3 para añadirle audio a tu página web. Una ventana te permite
elegir si el audio comenzará automáticamente una vez se cargue tu página o si
debería empezar cuando se pulse el botón en el reproductor.
414

Como en los otros tipos de archivos de arriba, se creará una imagen de marcador de
posición y se ubicará en tu página. El archivo MP3, junto con todos los demás
archivos necesarios para hacer que el reproductor funcione, se copiarán en la carpeta
de soporte de tu documento y se incluirán en la página web exportada. Previsualiza la
página para ver el reproductor en acción.

El reproductor es simple y discreto. Puedes iniciar y parar el audio, saltar a distintos

puntos de la pista haciendo clic en la línea temporal, ajustar el volumen (haciendo clic
en la línea indicadora de volumen) y silenciarlo (clic en el icono con un altavoz).

Nota técnica: el reproductor utiliza las opciones de HTML 5 nativo del navegador
web para reproducir el audio, solamente si el navegador es compatible con ello y si
también es compatible con el formato MP3. En caso contrario se utilizará Flash. Esto
significa que el reproductor funciona con todas las versiones modernas de
navegadores (los antiguos no son compatibles con HTML 5 y algunos modernos no
son compatibles, directamente, con archivos MP3).

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.

www.magix.es
 Widgets de sitios web 415

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 11 Premium, 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 11 Premium ve a la herramienta de selección y haz

una operación de pegado habitual (Ctrl+V). Verás que MAGIX Web Designer 11
Premium 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 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
416

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.

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 .

www.magix.es
 Widgets de sitios web 417

Inserción manual de marcadores de posición

para widgets
Si no quieres que MAGIX Web Designer 11 Premium 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 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 el diálogo te permite pegar en
el cuerpo o encabezado de tu página web. Lee la sección PESTAÑA MARCADOR DE
POSICIÓN del capítulo diálogo de Propiedades web (en la página 290) 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.

Inserción manual de un mapa de Google

La forma más sencilla de añadir un mapa de Google a tu página web es utilizar el
widget de Google Map que se encuentra en la galería de diseños (en Elementos de
página, Otros widgets). Pero en esta sección utilizaremos un Google Map para
mostrarte cómo añadir un widget externo a tu sitio.
418

Ve a http://maps.google.com y busca el mapa que quieras insertar. Haz clic en el

icono cerca de la parte superior izquierda de la ventana 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 botón enlace abre una ventana que muestra 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 11 Premium 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.

www.magix.es
 Galería de páginas y capas 419

Galería de páginas y capas

La galería de páginas y capas

Por defecto, la GALERÍA DE PÁGINAS Y CAPAS se muestra abierta en la parte derecha de
la ventana de Web Designer cuando abres el programa. Si lo prefieres puedes liberar,
mover, fijar o cerrar la galería. Consulta Galerías (en la página 95) para más
información.

Si has cerrado previamente la GALERÍA DE PÁGINAS Y CAPAS , que está abierta

por defecto, puedes volver a abrirla con un clic en la pestaña GALERÍA DE
PÁGINAS Y CAPAS en la pestaña de galería o si presionas F10.

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.
Proporciona el modo de seleccionar, ocultar bloquear y reorganizar estos elementos.

Funciona en diferentes niveles: PÁGINAS , CAPAS, PASOS DE PRESENTACIONES y

OBJETOS. La orden de estos elementos es como sigue:

Páginas
Capas/pasos
Elementos de página, donde se
incluyen los grupos
Contenidos de grupo

Algunas de las características clave de la GALERÍA DE PÁGINAS Y CAPAS son:

Control de página
• Presentación de una lista de las páginas
• El modo de páginas muestra una lista más acotada de vistas en miniatura de las
páginas para una navegación más sencilla.
• Agregar una nueva página, duplicar, cortar, copiar, pegar o borrar páginas.
• Cambiar el orden de las páginas arrastrándolas
• Renombrar páginas

Control de capas
• Muestra una lista de todas las capas en cada página, desde el fondo (en general
la capa de fondo) hasta la capa superior
• En un documento de presentación, muestra una lista de todos los pasos y capas
de cada página de la presentación, desde la primera hasta la última
• Crear nuevas capas, borrar, reorganizar y renombrar capas
• Ocultar o mostrar capas
420

• Bloquear capas (lo que convierte la capa en no editable)

• Solo para una capa: desactiva todas las otras

Control de objetos
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 o hacia abajo en el orden
• Bloquear algún objeto para que sea no editable
• Ubicar y destacar cualquier objeto en la galería con un clic en la página cuando
te encuentras en el modo "Localizar": activa o desactiva el botón LOCALIZAR
• Solo para un objeto: desactiva todos los otros
• Mover objetos dentro o fuera de un grupo usando arrastrar y soltar, o mover un
objeto de un grupo a otro. (Ten en cuenta que esto solo es posible para grupos
normales, no para grupos anclados o repetidos).

Además, la GALERÍA DE PÁGINAS Y CAPAS muestra una pequeña vista en miniatura de

las páginas y una miniatura de cada elemento de la página. Pasa el cursor sobre un
elemento para ver una vista miniatura más grande.

www.magix.es
 Galería de páginas y capas 421

Así se muestra que la capa MouseOff se ha expandido para mostrar el contenido de esta capa.
Aquí se muestra un grupo de barra de navegación y otros grupos diversos, la línea de texto y los
elementos de la columna de texto y algunos elementos del grupo de sombras.

Si pasas el cursor sobre las pequeñas vistas en miniatura, verás una miniatura más grande que te
permitirá identificar cada objeto de la página.

Ten en cuenta que las dos columnas de la derecha indican (y controlan) si los elementos son
editables (una flecha pálida) o bloqueados (icono del candado) y si son visibles en la página
(icono de ojo abierto más claro) u ocultos (icono cerrado más oscuro).

Un clic sobre estos símbolos cambiará la visibilidad o el estado bloqueado o de edición de cada
objeto.
422

Páginas
Con un clic en el botón PÁGINAS en la parte superior de la GALERÍA DE PÁGINAS Y
CAPAS (o con un clic derecho en la galería y la opción VER NIVEL DE PÁGINA) se abrirá
el modo Páginas, verás solamente las páginas del documento y cerrarás todos los
otros niveles abiertos.

Si te encuentras en el modo Páginas y la galería está fijada, el ancho de la galería se

reducirá al mínimo para ocupar el menor espacio posible. La cantidad de botones en
la parte superior de la galería también se reducirá a aquellos que pueden utilizarse
para las páginas. Para salir del modo páginas, simplemente expande una de las
páginas para ver sus capas. La galería regresará a su ancho completo y se restaurarán
todos los botones.

Puedes reordenar las páginas si arrastras las páginas seleccionadas en la GALERÍA DE

PÁGINAS Y CAPAS o si haces clic derecho sobre una página y escoges MOVER LA
PÁGINA HACIA ARRIBA/ABAJO .

Para cambiar el nombre a la página, haz clic derecho y escoge RENOMBRAR PÁGINA.
Además de ofrecer 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.

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

www.magix.es
 Galería de páginas y capas 423

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 un objeto nuevo en la página, se coloca en una de las capas, la llamada
capa activa o simplemente 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 flecha de selección .

Importante: todos los elementos, fotos o texto nuevo que se dibuje y todos los
elementos pegados se colocan en la capa actual marcada con el símbolo .

Puedes cambiar la capa actual, simplemente con un clic sobre su hilera en la GALERÍA
DE PÁGINAS Y CAPAS . Es importante comprender 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, con la flecha, simplemente indica el lugar en donde se colocarán los
nuevos elementos.
424

Este ejemplo de la GALERÍA DE PÁGINAS Y CAPAS muestra la capa actual, llamada MouseOff (la
página actual se llama Novedades). Entonces, si dibujas algo nuevo se colocará en la capa
MouseOff.

También muestra un elemento de grupo de sombras seleccionado en el documento (señalado en

color azul) dentro de otro grupo que se encuentra en otra capa diferente, denominado Foto de
vacaciones 2.

Hay cuatro capas ocultas (llamadas foto de vacaciones 4, foto de vacaciones 3, foto de
vacaciones 1 y MouseOver). La página "fondo" está bloqueada.

www.magix.es
 Galería de páginas y capas 425

Capa actual siempre visible

Es posible que la página actual pueda estar oculta o hasta bloqueada. Al hacer clic en
una capa para seleccionarla y convertirla en la capa actual no cambia su estado
bloqueado o visible. Sin embargo, existe una preferencia en la pestaña General (en la
página 488) del diálogo Opciones (haz clic derecho sobre una página y escoge
OPCIONES DE PÁGINA o selecciona OPCIONES del menú HERRAMIENTAS ) para hacer que
las capas actuales siempre sean visibles y puedan editarse (no estén bloqueadas). Si
seleccionas esta opción, 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 pop·up (en el navegador web, los contenidos de estas capas se
visualizan cuando mueves el cursor sobre elementos en la página).

Puedes encontrar más detalles sobre esto en el capítulo de Gráficos web y Páginas
web en el apartado de Capas, MouseOver (rollover) y pop·ups (en la página 65).

Grupos y capas suaves

Los Grupos suaves (en la página 134) 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.

Lee el apartado sobre Grupos suaves (en la página 134) en el capítulo de Manejo de
objetos para más información.

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.
426

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.

Propiedades de capa
Esta opción abre el diálogo de Propiedades de capa

Creación de capas y edición de las propiedades de capas

Con la pestaña de capas, puedes:

www.magix.es
 Galería de páginas y capas 427

• Crear una nueva capa o editar una existente.

• Hacer que la capa actual sea editable y visible por defecto.
• Definir la capa como el fondo de página web que no aparecerá al imprimir.
• Especificar que todos los objetos de la capa solamente tendrán contorno de
texto (en la página 220) dentro de la misma capa. Esto evita que el texto de la
capa fluya respecto a objetos en otras capas, lo que es útil para capas de popup
en páginas web.

Uso de líneas guía

La pestaña Guías te permite crear guías para la capa en valores numéricos precisos y
escoger un color para los objetos de la capa de guías.

Lee la sección OBJETOS GUÍA Y LÍNEAS GUÍA en el capítulo Manejo de objetos (en la
página 130) para más información sobre el uso de líneas guía.

Configuración de popup

Nota: La opción CAPA DE PRESENTACIÓN solo estará activa si te encuentras en un

documento de presentación. Para convertir un documento web en una presentación,
consulta Presentaciones web (en la página 396).

Con esta pestaña podrás aplicar efectos de transición animados a una capa, si la
utilizas como capa popup en una página web o si se trata de una capa de
presentación. La capa luego aparecerá con el efecto de transición cuando se revele en
la página web exportada. Utiliza la barra para fijar el tiempo de transición entre 0 y 5
segundos.
428

En una presentación, una capa puede fijarse como una presentación, si colocas la tilde
en la opción CAPA DE PRESENTACIÓN . Consulta Presentaciones como páginas web (en
la página 396).

Nota: Si desactivas la opción CAPA DE PRESENTACIÓN , el paso se quitará de la

presentación.

Por defecto, cuando aplicas una transición, los objetos solamente aparecerán o
desaparecerán desde la esquina de la página web. Si quieres que los objetos
aparezcan desde las esquinas de la ventana del navegador, en vez de desde las
esquinas de la página, quita la selección de la opción de los bordes CLIP A LA
PÁGINA en la pestaña Página web (en la página 279) del diálogo de propiedades
web.

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 colores) esto creará automáticamente una
capa de FONDO DE PÁGINA. En general, está bloqueada.

También puedes configurar el color del tablero de dibujo (el área alrededor de la
página) si arrastras un color desde la línea de colores y lo sueltas en el tablero de
dibujo. Esto crea una capa de FONDO DE TABLERO DE DIBUJO automáticamente.
Nuevamente, esta capa 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 23) 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 creará 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, si has activado la opción "Ajustar a guía".

Lee la sección Objetos guía y líneas guía en el capítulo Manejo de objetos para más
información.

www.magix.es
 Galería de páginas y capas 429

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 icono
restaurará el estado anterior.

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 nuevamente.

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 134), 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).
430

Mostrar todo y desbloquear todo

Estos dos controles en la parte superior de la GALERÍA DE PÁGINAS Y CAPAS son un

atajo de teclado 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 esta 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. El botón "Desbloquear todo" es útil si
has bloqueado un objeto en el lienzo y quieres desbloquearlo sin tener que buscarlo
primero en la galería de páginas y capas. Activa "Desbloquear todo", haz clic derecho
en el objeto en el lienzo y selecciona la opción de desbloqueo del menú contextual.
Luego puedes desactivar la opción "Desbloquear todo". 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 EN LA PÁGINA y DESBLOQUEAR TODO
EN LA PÁGINA .

Mover objetos entre capas

Hay varias formas de mover objetos entre capas. Primero, selecciona el objeto o los
objetos que quieras mover, y luego

• Arrastra y suelta el objeto en la capa deseada de la GALERÍA DE PÁGINAS Y CAPAS

• CORTA el objeto (Ctrl+X o haz clic derecho y selecciona CORTAR ). Asegúrate de
que la capa de destino es la capa actual (mostrada con , haz clic en la capa si
no es así) y luego haz clic derecho en PEGAR o PEGAR EN LUGAR. Ten en cuenta
que si cortas o copias múltiples elementos que se encuentran en diferentes
capas, la estructura de capas se conservará cuando pegues. Los elementos se
pegarán en la misma capa de la que se cortaron/copiaron, en vez de en la capa
actual. Si quieres pegar todos los elementos en la capa actual e ignorar la
estructura de capas, usa la opción PEGAR EN LA CAPA ACTUAL . Si quieres
mantener la estructura de las capas, escoge PEGAR EN EL LUGAR DE LA CAPA
ACTUAL . Estas opciones de pegado también se encuentran en la barra
desplegable del portapapeles en la barra sueperior, así como también en el
menú EDITAR .
• Haz clic derecho y escoge ARREGLO y luego 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.
• Asegúrate de que la capa de destino esté seleccionada como la capa actual y
luego encuentra el elemento seleccionado en la GALERÍA DE PÁGINAS Y CAPAS
(haz clic en el botón LOCALIZAR ), haz clic derecho sobre el elemento y
selecciona MOVER A LA CAPA ACTUAL .

www.magix.es
 Animaciones web 431

Animaciones web

Utilización de animaciones web

Las animaciones web son una forma genial de añadir contenido atractivo a tus
páginas web. Puedes tomar cualquier objeto de tu documento web y crear
rápidamente una respuesta animada a un evento como MouseOver, un clic del ratón
o un toque de la pantalla. Por ejemplo, puedes hacer que algunos elementos
aparezcan gradualmente la primera vez que se reproducen, puedes añadir una
animación de rebote cuando pasas el cursor sobre un elemento y agregar otra
animación diferente cuando haces clic sobre él. También puedes activar capas popup
o un texto popup y hacer que los objetos vayan apareciendo a medida que te
desplazas hacia abajo por una página.

Para animar un objeto, haz clic derecho sobre él y luego escoge ANIMACIÓN WEB del
menú desplegable; o dirígete a "HERRAMIENTAS" > "ANIMACIÓN WEB" .

O haz clic en el botón ANIMACIÓN WEB de la barra desplegable de

PROPIEDADES DE SITIO WEB .

Esto abrirá el diálogo ANIMACIÓN WEB .

432

El diálogo tiene pestañas para los eventos MouseOver, Clic/Toque y Aparición.

El diálogo de animación no es modal, es decir, que podrás dejarlo abierto a medida

que seleccionas diferentes elementos de la página. Si presionas el botón APLICAR en
lugar de pulsar ACEPTAR , el diálogo se quedará en pantalla. Luego podrás seleccionar
otro elemento para cambiar la animación sin tener que volver a abrir el diálogo.

Para ver una vista previa de tus animaciones en el navegador integrado, haz
clic en el botón VER VISTA PREVIA DE LA PÁGINA WEB ACTUAL de la barra de
herramientas web.

Funciones MouseOver
Con MouseOver puedes fijar un efecto por defecto para todo el documento (esto solo
afecta a los elementos de la capa MouseOver, como las barras de navegación) o para
botones con dos estados (por ejemplo, botones con un enlace que cambia de color si
pasas el cursor sobre ellos). También puedes establecer un efecto MouseOver para
un solo objeto seleccionado.

Haz clic en el menú desplegable de la pestaña MOUSEOVER para ver y aplicar los
efectos.
• Puedes escoger entre una y seis velocidades para la animación, lo que implica de
MUY RÁPIDO a MUY LENTO .
• Introduce texto de popup que aparecerá cuando pases el cursor sobre el objeto.
• Haz que el MouseOver active una capa popup, es decir, otra capa de tu
documento, y haz que la capa también tenga una animación. Haz clic en el botón
EFECTO para abrir el diálogo de configuración de popup (en la página 70) para el
efecto de la capa de popup.

Para más información consulta Capas, MouseOver y popups (en la página 65).

Animaciones de clic/toque
Esta pestaña te permite elegir una animación que se reproducirá cuando se haga clic
en el objeto (o se lo toque en un dispositivo táctil). Al igual que con la pestaña
MouseOver, puedes elegir el tipo de animación y su velocidad, y configurar el efecto
por defecto para el clic/toque que se aplicará a todos los botones que tengan un
gráfico MouseOver.

Animaciones de aparición
Si seleccionas la pestaña Aparición de este diálogo, puedes hacer que el objeto
aparezca con una animación (tal como se muestra en la página) ya sea solo la
primera vez o todas las veces. Por ejemplo, puedes hacer que los elementos
aparezcan gradualmente cuando el sitio web se abra por primera vez y cada vez que

www.magix.es
 Animaciones web 433

el elemento aparece en la vista. O puedes hacer que los elementos aparezcan desde
un lado.

A medida que navegas o te desplazas hacia abajo por tu página web, los objetos van
apareciendo.

El pequeño gráfico azul aparecerá desde la izquierda cuando se muestre en la ventana del
navegador.

• Escoge un efecto de animación del menú desplegable.

• Fija una velocidad para el efecto con el regulador TIEMPO.
• Si lo deseas, utiliza el regulador para añadir un retraso por tiempo de forma que
haya una pausa antes de que aparezca el objeto.

Nombre del objeto trigger:

• En general, un objeto aparecerá tan pronto como es incluido en la vista. Sin

embargo, es posible que algunas veces quieras que un objeto aparezca
únicamente cuando otro objeto (el objeto TRIGGER ) aparece.
• Para nombrar el objeto trigger, haz clic derecho sobre él y selecciona NOMBRES...
para darle una denominación en el diálogo NOMBRES. Ahora, cuando hagas clic
en el menú desplegable NOMBRE DE OBJETO TRIGGER: podrás seleccionar el
nombre.

Para más información sobre la aplicación de nombres, consulta Nombrar objetos.

434

Combinaciones de animaciones y tipos de

objetos
La tabla muestra qué tipos de objetos funcionan con cuáles animaciones.

Tipo de objeto Animaciones Animaciones Animaciones de clic

de aparición MouseOver

Texto Sí Sí Sí
Imágenes (incluidos Sí Sí Sí
grupos)
Marcadores de Sí No No
lugar/widgets
Paneles de texto Sí No No
Grupos suaves Sí Sí Sí
Sticky Sí Sí Sí
Ancho/altura total No No No
Objetos en la capa de No No No
fondo de página
Objetos en la capa de No No No
fondo de tablero de dibujo
Animaciones de aparición NC Sí Sí
de objetos
Barras de navegación Sí Sí Sí
Objetos en capas de popup Sí Sí Sí

Importante: Algunos widgets de la versión 10 de la galería no son compatibles con las

nuevas características de animación y sticky si se utilizan en la misma página o en el
mismo supersite, por lo que es probable que debas reemplazarlos con las versiones
actualizadas de la galería de diseños. Haz clic aquí
http://support.xara.com/index.php?/Knowledgebase/Article/View/816/ para más
información en el sitio de asistencia.

www.magix.es
 Animaciones en Flash 435

Animaciones en Flash

Introducción
MAGIX Web Designer 11 Premium 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 11 Premium 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 11 Premium 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 11 Premium, como por ejemplo, una graduación de transparencia
compleja, difuminación (feathering), y la mayoría de los tipos de relleno de color
avanzados.

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.
436

El mismo ejemplo mostrando los frames intermedios (in-between frames) pero con un cambio de
transparencia.

Como MAGIX Web Designer 11 Premium, 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 11 Premium, 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 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
11 Premium.
www.magix.es
 Animaciones en Flash 437

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 11 Premium.

Lo que no puedes hacer con Flash en MAGIX Web

Designer 11 Premium
MAGIX Web Designer 11 Premium 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 11 Premium 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 11 Premium 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 11 Premium 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 11 Premium 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 ).
438

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".

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 495)").
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 11 Premium 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 11 Premium (o sus predecesores) todo este proceso les va a
ser familiar. La diferencia es que con los archivos en Flash el MAGIX Web Designer 11
Premium 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.

www.magix.es
 Animaciones en Flash 439

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.

440

Frame clave 1

Pasos intermedios producidos

por MAGIX Web Designer 11
Premium

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

11 Premium.
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 11

Premium.
Para aquellos que utilicen MAGIX Web Designer 11 Premium puedes arrastrar el
archivo Flash hasta la página web para insertarlo en el sitio web. Se creará

www.magix.es
 Animaciones en Flash 441

automáticamente una imagen 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 86) 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.

Exportación de animaciones como AVI

Además de exportar tus animaciones como GIF y Flash, también podrás exportarlas
como formato .AVI.

En el documento de animación, escoge EXPORTAR ANIMACIÓN del menú ARCHIVO, y

escoge ANIMACIÓN AVI ANIMATION (*.AVI) de la lista desplegable Guardar como tipo
en el diálogo Exportar archivo. Haz clic en el botón OPCIONES para escoger la
configuración de exportación o simplemente pulsa el botón EXPORTAR para usar la
configuración actual o por defecto.
442

Opciones AVI
Selección del códec
Utiliza la lista desplegable para seleccionar entre los códecs que tienes instalados.
Esto determina la forma en que se codificará y comprimirá su AVI. O escoge la opción
"sin compresión" si quieres exportar un AVI sin compresión. Ten cuenta que esto
tendrá como resultado un archivo de gran tamaño.

Keyframe cada N frames

El valor por defecto lo provee el códec seleccionado y, generalmente, lo mejor es
mantener este valor. Reducir el número resultará en archivos de mayor calidad pero
también de mayor tamaño.

Configurar
Si pulsas el botón CONFIGURAR , se abrirá un diálogo de configuración específico para
el códec seleccionado (si está disponible), que te ofrecerá opciones de configuración.
El botón ACERCA te dará más información sobre el códec seleccionado.

Fondo transparente
Si seleccionas esta opción, tu AVI tendrá un fondo transparente, lo que es útil si
quieres que tu animación aparezca sobre una película (por ejemplo, para los títulos).

Cuando esta opción está activada, la lista de códecs se reduce a la opción "sin
compresión", porque ninguno de los códecs es compatible en la actualidad con la
transparencia. Si exportas un AVI sin compresión con transparencia, se importará al
software de edición de vídeos de MAGIX y en algunas otras aplicaciones de edición
de películas con transparencias.

Área a guardar
Escoge si quieres guardar una película que tenga el tamaño de tu página de animación
o del dibujo animado.

Haz clic en Aceptar para exportar la animación AVI.

La galería de frames de animación

Por defecto, la GALERÍA DE FRAMES DE ANIMACIÓN se muestra abierta en la parte
derecha de la ventana de Web Designer, (junto a la GALERÍA DE PÁGINAS Y CAPAS )
cuando abres o creas un nuevo documento de animación.

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.

www.magix.es
 Animaciones en Flash 443

Una GALERÍA DE FRAMES típica. El frame 3 está seleccionado y por eso está visible.

Este muestra una lista de los keyframes en tu documento. Para visualizar cualquier
keyframe, haz clic sobre su nombre en la galería.

La GALERÍA DE FRAMES DE ANIMACIÓN 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 reordenar los frames con solo arrastrarlos. La galería cuenta con varios
botones para realizar las operaciones más importantes, como crear un frame nuevo,
borrar o copiar un frame seleccionado (siempre se agregará al final) y crear nuevos
frames en blanco.

El botón PROPIEDADES es muy importante ya que muestra el diálogo de las

PROPIEDADES DE ANIMACIÓN , que controla muchos aspectos, no solo de la animación
seleccionada, sino también de la animación completa.

Diálogo de las propiedades de animación

444

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 (candados), 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 se copiará el frame seleccionado y se 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 cuál 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.

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.

www.magix.es
 Animaciones en Flash 445

Afortunadamente es fácil guardar imágenes en JPEG desde el MAGIX Web Designer

11 Premium 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 11 Premium 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 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.
446

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 .

www.magix.es
 Animaciones en Flash 447

Duración de frames para películas Flash y pasos

intermedios
Las animaciones 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 el archivo en Flash será más grande. Por defecto, las animaciones de MAGIX
Web Designer 11 Premium tienen 24 frames por segundo, pero puedes cambiarlo si lo
deseas.

Cuando creas cada keyframe, determinas la duración del período hasta el próximo
keyframe. 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
keyframe a otro. Si tienes el ritmo de la animación prefijado a 24 frames por segundo,
esto quiere decir que el MAGIX Web Designer 11 Premium generará 11 pasos
intermedios en la animación en Flash; que son 12 frames en total. (Estos frames
intermedios nunca se verán en MAGIX Web Designer 11 Premium ya que solo se
generan cuando creas un archivo Flash).

La GALERÍA DE FRAMES siempre te mostrará el tiempo de duración de cada keyframe.

En este ejemplo se muestran tres frames, cada uno durante un segundo, por lo que la
animación dura 3 segundos antes de repetirse.

Para crear un efecto de intermedio más largo (en otras palabras, hacer la animación
más lenta) tienes que incrementar el tiempo de duración en el diálogo PROPIEDADES
DE LA 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 para abrir el diálogo; luego
introduce el tiempo de duración que tú quieras en segundos y pulsa ACEPTAR o
APLICAR .

Mover frame hacia adelante/atrás

Estos botones te permiten mover un keyframe hacia adelante o hacia atrás en la
animación sin modificar la duración. Esto es útil cuando trabajas con animaciones que
448

se exportan como AVI y se incluyen en películas, especialmente si estás intentando

rastrear un objeto en el vídeo con tu animación. Por defecto, cada clic mueve el frame
en 1/25 de un segundo, lo que corresponde a un frame en una película de 25 fps.
Puedes cambiar este valor en la pestaña FRAME del diálogo de PROPIEDADES DE LA
ANIMACIÓN .

Mover frame 1/25 seg. hacia adelante

Mover frame 1/25 seg. hacia atrás

La duración del frame anterior se ajusta para mantener la duración general de la

animación, de forma que solo estás desplazando el keyframe hacia adelante o hacia
atrás.

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 11 Premium 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 495) (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.

www.magix.es
 Animaciones en Flash 449

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
450
actualizados a medida que vayas seleccionando los diferentes frames, y puedes
configurar distintos tiempos de duración para cada uno de ellos.

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 11 Premium 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 11 Premium 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.
www.magix.es
 Animaciones en Flash 451

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 11 Premium 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.
452

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 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 11 Premium 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 11 Premium aplicará la transparencia a cada ítem individual del
grupo, en lugar de realizar una transparencia a todo el grupo en su conjunto.

www.magix.es
 Animaciones en Flash 453

¿Qué funciones de MAGIX Web Designer 11

Premium son compatibles con Flash?
La renderización de vectores en Flash es relativamente primitiva, comparada con la
del MAGIX Web Designer 11 Premium. Por esta razón, no podrás usar las funciones
más avanzadas de MAGIX Web Designer 11 Premium 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 11 Premium
serán representadas en Flash como si tuvieran un píxel de grosor.

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 11 Premium 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 11 Premium, 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).
454

• 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 11 Premium 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.

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 11 Premium 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.

www.magix.es
 Animaciones en Flash 455

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 11 Premium 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 11 Premium 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.

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 11 Premium 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.
456

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 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.

www.magix.es
 Animaciones en Flash 457

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.

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.
458

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 al 3 y una redirección URL del frame 1 si haces clic sobre el
enlace Volver a reproducir de la esquina.

www.magix.es
 Animaciones en Flash 459

"Ctrl +  + W" es una forma rápida de abrir el diálogo de Propiedades Web.

Resumen de animación de MAGIX Web

Designer 11 Premium Flash
• Los frame claves de MAGIX Web Designer 11 Premium son "instantáneas" de tu
animación en un momento determinado. MAGIX Web Designer 11 Premium
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 11 Premium 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 11 Premium 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 11 Premium.
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 11 Premium.
460

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 11 Premium 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 11
Premium 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.
www.magix.es
 Animaciones en Flash 461

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.
• MOVER FRAME EN LA LÍNEA DE TIEMPO: este valor determina cuánto cambia el
tiempo de un frame al utilizar los botones "MOVER FRAME HACIA
ADELANTE/ATRÁS" EN LA GALERÍA DE FRAMES.

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 456)

• Velocidad de vídeo flash (en la página 450)
• Calidad JPEG (en la página 446)
• Área a guardar (en la página 448)

Colores de animación
En la pestaña COLORES DE ANIMACIÓN puedes configurar los colores utilizados en la
animación:
462

• 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.
• 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.

Opciones AVI
Opciones: selecciona entre los códecs que tienes instalados.

Calidad: establece el valor de calidad para AVI (hasta 100%)

Keyframe cada...: activa/desactiva la salida de key frames y ajusta la frecuencia.

Transparencia: selecciona esta opción para hacer el fondo AVI transparente.

Área a guardar: configurando el área para guardar como DIBUJO creará una
animación AVI 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.

www.magix.es
 Importación y exportación 463

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 11 Premium 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 11 Premium. PNG se recomienda para gráficos en
la web y JPEG para fotos.

Web Designer y HTML5

Web Designer ofrece mayor compatibilidad con HTML5. Esto es totalmente
automático sin que el usuario tenga que hacer nada o saber nada de código HTML.
Esto significa que es una forma más eficiente y rápida de descargar páginas web. Por
ejemplo, muchas funciones de gráficos tales como paneles de fondo, rectángulos,
rectángulos redondeados y objetos con sombras que previamente se convertían en
gráficos en la exportación, ahora se exportan como características nativas HTML.
Esto hace imágenes independientes. Entre las características que se exportan ahora
con HTML5 están:

• Rectángulos, rectángulos redondeados, con contornos simples opcionales,

rellenos lineares graduados y transparencia plana simple.
• Rectángulos rotados o inclinados.
• Sombras de caja (negras o de colores).
• Texto con sombras.
• Rellenos de fondo de página simples graduados ( o algunos más complejos
hechos con los objetos de arriba).
• Texturas de mosaico (rellenos de mapa de bits) para rectángulos y fondos.

Los objetos agrupados no se exportarán como HTML5, por lo que deberías

exportarlos todavía como gráficos: consulta Agrupar y desagrupar objetos (en la
página 133) para más información.
464

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 11 Premium.

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
.MXB MAGIX Bitmap
.PBM UNIX monocromo
.PCD PhotoCD
.PCT PICT
.PCX PCX Paintbrush
.PDF (ver importación de un archivo PDF)
.PGM UNIX escala de grises
.PNG PNG
.PPM UNIX color (hasta 24 bits)
PSD Photoshop (consulta importación y exportación de archivos PSD (en la página
472))
.RAS Sun Raster
.SGI (Silicon Graphics Image)
.TGA TrueVision TARGA
.TIF TIFF (RGB, RGBA con transparencias de canal alfa & CMYK)

www.magix.es
 Importación y exportación 465

MAGIX Web Designer 11 Premium es compatible con archivos TIFF fax (imágenes
blanco y negro. Los faxes con muchas páginas se importarán 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 469) para ver una lista de tipos de archivos compatibles).

Formatos de importación EPS

.AI Illustrator EPS
.EPS ArtWorks
.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 11
Premium, utiliza archivos en PSD en lugar de en EPS para obtener mejores
resultados).
.EPS Xara
Otros formatos de importación
.ACO Adobe Color Swatch
.ACT tabla Adobe Color
.ART Xara Studio
.CPL paleta CorelDRAW
.WEB archivos Xara Webster
.AFF Acorn Draw
.CDR CorelDRAW (3, 4 & 5)
.CDT plantilla CorelDRAW
.CMX Corel CMX 5 & 6
.DRW Acorn Draw
.GIF marcador de posición GIF
.HTM. .HTM gráficos en páginas en HTML
466

.ODP (Open Office Impress)

.PAI imagen de MAGIX Photo Clinic
.PAL paletas CorelDRAW, Windows y PaintShopPro
.MXB MAGIX Bitmap
.WMF Windows Metafile (16 bits)
.EMF/ .WMF Enhanced Windows Metafile
.FLV marcador de posición FLV
.MP4 marcador de posición MP4
.PAI imagen de MAGIX Photo Clinic
.PDF marcador de posición PDF
.PPTX (PowerPoint 2007 y posteriores)
.RTF texto
.SVG (Scalable Vector Graphics)
.SWF marcador de posición Flash
.XWR marcador de posición Widget
.WIX para uso interno de Xara

Formatos de exportación
Formatos de exportación para mapas de bits (consulta resumen del diálogo de
exportación GIF, PNG y JPEG en la página 474)
.GIF CompuServe GIF
.GIF archivos animados en GIF (consulta Creación de archivos animados en GIF (en la
página 460))
.JPG JPEG
PSD Photoshop (consulta importación y exportación de archivos PSD (en la página
472))
.PNG PNG
Otros formatos de exportación
.AVI animación AVI (documentos de animación)
.EMF, .WMF documentos EMF/WMF
.HTML, .HTM (páginas y sitios web)
.SWF Flash (consulta Animaciones en Flash (en la página 434))
.RTF Rich Text Format
.WIX, .WEB, .XAR documentos Xara
www.magix.es
 Importación y exportación 467

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 11 Premium 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 11 Premium, 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 11
Premium.

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 11 Premium. 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 11 Premium,
colócalos en capas separadas en Photoshop antes de realizar la exportación.
468

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 11 Premium 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 11 Premium. Guarda el archivo como PDF y
después importa el archivo resultante en MAGIX Web Designer 11 Premium.

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 11 Premium.
• 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 11 Premium 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 PÁGINAS
Y CAPAS para ver esta capa.

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 cifrados 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 complejo 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 construcciones que son difíciles de editar de forma
manual (por ejemplo, clipviews incrustados).

www.magix.es
 Importación y exportación 469

Importación de un documento Word

Puedes importar un documento de Microsoft Word (.docx) de forma sencilla. Solo
arrastra y suelta el archivo desde el explorador de Windows o selecciona "ARCHIVO"
> "IMPORTAR" .

Áreas de texto de flujo automático

Cuando importas un documento Word, Web Designer te crea automáticamente

nuevas páginas si las áreas de texto sobrepasan la página actual. Del mismo modo
sucede cuando añades más texto o imágenes a tu documento: así el documento
añade nuevas páginas de forma automática para acomodarlos. Cuando creas una
nueva página, se colocará inmediatamente después de la página actual. La nueva
página tiene las mismas características que si la hubieras añadido de forma manual
(tendrá el mismo fondo y objetos repetidos de la página actual). Pero, además,
también tendrá una copia de todas las áreas de texto de la página actual que estén
vinculadas con el flujo de texto actual y estarán vinculadas de la misma manera.

Cambio simultáneo de áreas de texto vinculadas

Muchas veces, tu documento tendrá diseños similares de áreas de texto en muchas

de sus páginas. Es posible que si cambias un área de texto en una de las páginas
quieras que la modificación se vea reflejada en las áreas similares del mismo flujo de
texto. Por lo tanto, si mueves o cambias el tamaño de un área de texto y existen áreas
similares con el mismo flujo de texto en otras páginas (es decir, tienen el mismo
tamaño y posición en la página), Web Designer te preguntará si deseas cambiar esas
áreas también. Consulta Áreas de texto (en la página 206) para más información.

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.

Importación desde una página web.

Puedes importar texto y gráficos directamente de páginas web a tu documento o
copiar y pegar texto y gráficos desde un navegador.

Para importar desde una página web online:

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 gráfico que desees
importar.
3. Pulsa Importar.
470

Si la URL que has introducido es la de la página web, todo el texto y las imágenes de
esa página se importarán y colocarán en tu página en aproximadamente la misma
posición que en la página web. En otras palabras, esta función te permite importar
todos los textos y gráficos de un página web. Sin embargo, debes tener en cuenta que
la mayoría de las páginas web modernas están creadas a partir de una compleja
combinación de texto, gráficos, Javascript y otras características; por lo que es muy
probable que estas importaciones no te ofrezcan una representación precisa de la
página en MAGIX Web Designer 11 Premium. Sin embargo, esto te brinda una forma
útil de comenzar a reemplazar un sitio web ya existente con un sitio web de MAGIX
Web Designer 11 Premium.

Al importar de páginas web, la longitud de tu página de MAGIX Web Designer 11

Premium se extenderá automáticamente para incluir el texto y los gráficos nuevos, si
es que no es lo suficientemente extensa.

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.

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 434)
para más detalles sobre la exportación Flash.

Exportar como AVI

Selecciona ARCHIVO > EXPORTAR ANIMACIÓN y luego escoge AVI de la lista. Haz clic
en el botón OPCIONES que se encuentra en el diálogo de archivo para cambiar el códec
y otros ajustes para la exportación.

Exportación como documento Word

Selecciona "ARCHIVO" > "EXPORTAR" y luego escoge la opción MICROSOFT WORD
(.DOCX) del menú desplegable.

www.magix.es
 Importación y exportación 471

Exportación de un documento web

Muchas veces quieres exportar un documento de impresión como una página HTML
que pueda verse en Internet, en lugar de un archivo PDF. La ventaja de este formato
es que el tamaño de archivo es menor que el de un PDF y que facilita la visualización
en una tableta o en dispositivos con iOS.

Para más información, lee Publicación de documentos web.

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 11 Premium 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 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.

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).
472

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 11
Premium 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
Como los mapas de bits se exportan con la calidad de vista actual, asegúrate de que
la opción "VENTANA "> "CALIDAD " esté configurada en Anti-Aliasing para obtener
mejores resultados.

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 11 Premium se rasterizan.
Puedes seleccionar la resolución (dpi) al exportar.

Siempre guarda tu trabajo en MAGIX Web Designer 11 Premium antes de exportar.

Después, si deseas alterar tus objetos originales en el futuro, simplemente carga
MAGIX Web Designer 11 Premium, 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 11 Premium 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 11 Premium 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 11 Premium 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).

www.magix.es
 Importación y exportación 473

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 11 Premium.

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 11
Premium 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 11
Premium.
• Si quieres que el texto pueda editarse en Photoshop, colócalo en una capa
individual sin objetos gráficos.
474

Resumen del diálogo de exportación GIF, PNG y

JPEG

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 de vista previa
izquierda o derecha para cambiar la vista previa activa.

Arriba de la ventana de vista previa se encuentra una lista desplegable que te permite
seleccionar uno de los tres formatos de exportación más comunes: JPEG, PNG y GIF.
Una vez que hayas seleccionado la vista previa A o B , puedes ajustar numerosas
opciones de exportación con las cinco pestañas que se encuentran debajo de la 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. Por lo tanto
el proceso para exportar una imagen:

1. Selecciona el objeto o los objetos de la página que quieras exportar

2. Selecciona el menú Exportar o "Ctrl + Shift + E", introduce un nombre de archivo
y luego escoge el tipo de archivo de la lista desplegable. El tipo de exportación
principal se mostrará en el diálogo de vista previa superior.

www.magix.es
 Importación y exportación 475

3. En este diálogo de vista previa puedes ajustar la configuración si lo deseas o

ignorarlo si la configuración por defecto está bien.
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 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 recordarán para
la próxima vez que exportes. Por ejemplo, si ajustas la calidad JPEG, la próxima vez
que exportes un JPEG se recordará la configuración.

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 píxel 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):

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.
476

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.

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

www.magix.es
 Importación y exportación 477

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

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.
478

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 50% más grande que el original.
• RESOLUCIÓN: (no disponible para GIF ni BMP). Introduce la resolución en el
campo DPI. Si estás exportando una imagen para ver en una pantalla (p. ej., un
sitio web), en general no necesitas una configuración mayor que 96 dpi. (Si
necesitas exportar para un dispositivo Retina, puedes exportar automáticamente
con una resolución más alta de 192 dpi).

Á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.

Antialiasing
El antialiasing mejora la apariencia de los gráficos suavizando los bordes dentados:

• CONSERVAR ANTIALIASING DE PANTALLA : el mapa de bits exportado utilizará el

mismo posicionamiento que se ve en la pantalla para que conserve el mismo
antialiasing. Esto puede crear bordes de objetos levemente borrosos porque no
se ajustan exactamente a los límites de los píxeles.
• MINIMIZAR ANTIALIASING VISIBLE : esto reposicionará levemente los objetos en
fracciones para minimizar el antialiasing alrededor del borde del mapa de bits
exportado. Si tienes duda sobre la opción que debes utilizar, selecciona esta
opción.

Colocar etiqueta de imagen HTML en el portapapeles

Esto te permite guardar la información básica de la etiqueta de imagen HTML cuando
guardas el mapa de bits. Después, podrás pegar la etiqueta en tu texto o editor
externo de página HTML.

www.magix.es
 Importación y exportación 479

Exportar también mapa de bits de Retina (192 dpi)

Si esta opción está activada puedes exportar en simultáneo una imagen de Retina de
alta definición de 192 dpi. Esto te evita tener que realizar dos exportaciones si
necesitas una imagen con resolución de 96 dpi y otra de 192 dpi para dispositivos
Retina. En el caso de JPEG y PNG, la operación solo será válida si has seleccionado la
opción de 96 dpi.

Para más información sobre imágenes de Retina consulta imágenes de alta

resolución (en la página 327).

Pestaña de opciones
Con esta pestaña puedes modificar la compresión JPEG y activar las opciones
progresivo/entrelazado de ser necesario.

Calidad JPEG: (solo JPEG) una configuración baja generará un archivo pequeño con
pérdida de calidad, mientras que un valor alto reducirá levemente el tamaño del
archivo, pero conservará una 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 un JPEG progresivo. En el

navegador, la primera imagen aparecerán como una imagen de baja resolución. A
medida que el archivo se carga, la resolución aumenta.

Transparente: (solo GIF y PNG) 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 PÁGINAS Y 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.
480

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.

www.magix.es
 Imprimiendo 481

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 11 Premium 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 11 Premium 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.
482

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.

www.magix.es
 Imprimiendo 483

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
484

uso de 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 11 Premium 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 11 Premium 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.

www.magix.es
 Imprimiendo 485

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.
486

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).

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).

www.magix.es
 Personalización de Web Designer 487

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.
488

Pestaña General

Las capas actuales siempre están visibles y pueden

editarse.
En el capítulo Capas (en la página 419) 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.

www.magix.es
 Personalización de Web Designer 489

Dar a nuevos objetos los atributos más recientes

Algunos atributos son el ancho de línea, el modelo de guiones, puntas de flecha y
color, así como color y tipo de relleno.

Si esta opción está fijada, los nuevos objetos tendrán los atributos del último objeto
que se ha dibujado o seleccionado. Por ejemplo, puedes darle a una forma existente
un relleno rojo y una línea verde. Si luego dibujas una nueva forma, ésta también
tendrá un relleno rojo y una línea verde. Consulta la sección "Atributos actuales" (en
la página 57) del capítulo Primeros pasos para una descripción completa de los
atributos actuales y esta opción.

Esta opción está activa por defecto.

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 252) 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.

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).
490

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.

Longitud de línea compatible con navegadores web

antiguos
Los navegadores web antiguos no podían renderizar texto con precisión. Si solicitabas
un tamaño de fuente específico, lo redondeaban hacia arriba o hacia abajo y
mostraban el tamaño y ancho incorrectos (en comparación con el diseño de fuente
original y la forma en que Web Designer, Word, PDF y todos los programas modernos
de DTP los mostrarían).

Las versiones anteriores de Web Designer intentaban compensar estas imprecisiones

al suministrar una opción de LONGITUD DE LÍNEA COMPATIBLE CON NAVEGADORES WEB
ANTIGUOS , lo que significaba que el texto tenía un formato levemente diferente: la
longitud de las líneas sería diferente en comparación con los documentos normales
impresos o con el mismo texto en Word o PDF.

La mayoría de los navegadores web más modernos están mejorando la precisión de la

renderización de texto: ahora puedes especificar cualquier tamaño de fuente en
píxeles o puntos (aun fracciones) y, en su mayor parte, el texto se renderizará con
precisión*. El formato de texto debería ser igual en documentos impresos, en PDF y
en el diseño de páginas. Esto incluye kerning automático, kerning manual y espaciado
de letras.

Si abres un documento web de Web Designer antiguo, aparecerá un cuadro de

diálogo que te solicitará que actualices el formato del texto. Esto prepara tu
documento web para que se muestre con mayor precisión en los navegadores web
más modernos.

Una consecuencia de actualizar el formato para que sea compatible con navegadores
web más modernos es que el texto podría reordenarse como consecuencia de leves
diferencias en la longitud de las líneas que resultarían en columnas de texto un poco
más extensas o breves que las anteriores. Una vez que actualices el formato, el
documento permanecerá así y no se te volverá a solicitar.
www.magix.es
 Personalización de Web Designer 491

Para hacer que el formato vuelva al estilo antiguo, utiliza la PESTAÑA GENERAL del
cuadro de diálogo "HERRAMIENTAS" > "OPCIONES" y asegúrate de que esté activada la
opción LONGITUD DE LÍNEA COMPATIBLE CON NAVEGADORES WEB ANTIGUOS . O si
quieres abrir un documento antiguo en Web Designer, escoge la opción CONSERVAR
FORMATO ORIGINAL .

*Al momento de la escritura de este manual, los navegadores Apple Safari y Chrome
cuando se utilizan en dispositivos móviles como teléfonos o tabletas todavía
redondean los tamaños de fuente al píxel entero más cercano.

Tipo de documento
Se determina el tipo de documento, como se indica en el icono de la pestaña del
documento.

• Página web: usa este tipo de documento para crear páginas y gráficos web. Este
el el tipo de documento más común con el que usa Web Designer.
• Presentación (Web): estos son documentos web especiales para hacer
presentaciones. Consulta el capítulo Presentaciones web (en la página 396)
para más información.
• Impresión: se usa para documentos creados para trabajos de impresión. Este
tipo de documento no se suele usar en Web Designer, pero otros productos de
la gama Designer sí los utilizan.
• Foto: si abres una foto JPEG en Web Designer, este es el tipo de documento. Tal
documento no tiene un área de página definida, por ejemplo. Consulta el
capítulo Manejo de fotos (en la página 327) para más información.
• Animación: usado para los documentos con animaciones. Consulta el capítulo
"Animaciones" para más detalles.

Por lo general no necesitas cambiar de tipo de documento, ya que el tipo está

establecido cuando lo creas (por ejemplo, usar una plantilla de la galería de diseños, o
escoger un documento en blanco del menú ARCHIVO >NUEVO ). Sin embargo, a veces
es útil convertir entre imprimir, documentos de página web y presentación si cambia
el propósito con el que fue creado tu documento. Puedes convertir de fotos o
documentos de animación.

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.

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.
492

(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

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.

www.magix.es
 Personalización de Web Designer 493

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.
• Alt+clic.
• Menú pop-up (ver más adelante).
• Cambiar a pantalla completa (descrito en Trabajar con documentos (en la
página 78)).
• Acercar o alejar el zoom +clic para alejar (descrito en Trabajar con
documentos (en la página 78)).
• 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
494

CORTAR, COPIAR, PEGAR, ELIMINAR, DUPLICAR, CLONAR (descritas en el capítulo

Trabajar con objetos (en la página 106)).

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 Xtreme 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 130).

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.

www.magix.es
 Personalización de Web Designer 495

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.

Si la opción BLOQUEAR TAMAÑO DE PÁGINA está activada, no podrás cambiar el

tamaño de las páginas si arrastras el borde inferior o las esquinas derechas y
cualquier objeto de desplazamiento que se coloque fuera de la página no la ampliará.
496

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 88) para más detalles
acerca de estas funciones.

Pestaña efectos y plug-ins

Para más información sobre los efectos en tiempo real lee el capítulo Efectos en
tiempo real (en la página 365).

Plug-ins de Photoshop (solo Web Designer de 32 bits)

Un clic sobre CONFIGURAR te permite añadir y eliminar capetas de plug-ins de efectos
en vivo.

Efectos
Aquí puedes configurar la resolución por defecto de los efectos en vivo y bloqueados.

www.magix.es
 Personalización de Web Designer 497

Los nuevos efectos se bloquean por defecto

Esto bloqueará por defecto cualquier efecto en vivo que crees, de forma que no
cambiará si lo mueves o lo cambias de tamaño.

Res. de efecto en vivo por def.:

Si la resolución de un efecto en vivo está configurada en AUTOMÁTICO, entonces
cualquier efecto en vivo sobre un objeto se producirá por defecto con la resolución de
pantalla. Si deseas imprimir tu diseño puedes configurar un efecto en vivo con un DPI
mayor y todos los efectos sobre ese objeto (siempre que los otros efectos no estén
configurados como automáticos) se renderizarán automáticamente con el DPI mayor.
Por lo tanto, no será necesario modificar cada efecto. También puedes configurar una
opción por defecto diferente en esta ventana y todos los efectos en vivo se crearán
con esa resolución.

Res. efecto bloqueado por def.:

Esta es la resolución por defecto para los efectos bloqueados. Si quieres cambiar el
DPI de un objeto bloqueado necesitas volver a crear ese efecto. Ten en cuenta que
esto se aplica solamente a los efectos bloqueados y no a los efectos en vivo
bloqueados.

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.

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.
498

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 ).

Junto al nombre de cada barra de control hay un campo. Si colocas una tilde en ese
campo, la barra de control estará visible. Haz clic sobre ese campo de la barra de
control para mostrar u ocultar la barra.

También puedes activar o desactivar las BARRAS DE CONTROL si haces clic derecho en
un área vacía de la parte superior de la ventana del programa. Utiliza el menú
desplegable para escoger las barras que deseas mostrar.

www.magix.es
 Personalización de Web Designer 499

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.

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.

500

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:

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.

www.magix.es
 Menús y shortcuts de teclado 501

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 desde el catálogo de contenido

Abre el catálogo de contenido online. Elige entre las categorías smartshapes,
plantillas, widgets y cliparts de la web del catálogo o diseño y foto.

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 463) 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.

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).
502

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 487)).

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
463) 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 dirección web (Ctrl+Alt+W)

Importar textos y gráficos directamente desde páginas web de Internet hasta tu
documento. Introduce la URL (dirección web) de la página web que desees para
importar al cuadro de diálogo.

Exportar (Ctrl+Shift+E)
O haz clic derecho y escoge EXPORTAR .

Te permite exportar el documento en una gran variedad de formatos de exportación

compatibles con Web Designer (consulta Importación y exportación (en la página
463) para la lista de formatos).

www.magix.es
 Menús y shortcuts de teclado 503

Exportar JPEG
También disponible en la barra de herramientas de
exportación. O haz clic derecho y escoge Exportar JPEG.

Te permite exportar los objetos seleccionados, una página o todo el documento como
JPEG.

Exportar PNG
Te permite exportar los objetos seleccionados, una página o todo el documento como
PNG.

Vista previa de la página web (Shift + F5)

Exporta y ofrece una vista previa de la página actual del documento de sitio web.

También puedes hacer una vista previa de tu página con un clic en el botón de
vista previa de página en la barra de herramientas web.

Haz clic en un tipo de navegador en la parte superior de la ventana de vista previa

para ver la página en tu navegador preferido.

Muestra la vista previa de tu página en Google Chrome

Muestra la vista previa de tu página en Mozilla Firefox

Muestra la vista previa de tu página en Internet Explorer

Muestra la vista previa de tu página en Opera

Muestra la vista previa de tu página en Safari

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.

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.
504

Exportar página web

También disponible en la barra de herramientas de
exportación. Exportar el documento actual como HTML.

Publicar página web

Se realiza la misma operación que con 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. A continuación la
página web se publica en tu espacio web. Un indicador de progreso aparece durante
la operación de publicación.

Consulta el capítulo Primeros pasos para más detalles sobre la publicación.

Vista previa de documentos web (F5)

Te ofrece una vista previa del documento de impresión actual como página web.

También puedes hacer una vista previa de tu página con un clic en el botón de
vista previa de página en la barra de herramientas web.

Haz clic en un tipo de navegador en la parte superior de la ventana de vista previa

para ver la página en tu navegador preferido.

Exportar Página web

Exporta el documento de impresión actual como página web HTML. Lee Publicación
de documentos web HTML (en la página 471) para más información.

Publicación de documento web

Exporta y luego publica el documento de impresión actual como página web HTML
en tu espacio web. Si todavía no has introducido la información de FTP para tu
espacio web, se te solicitará que lo hagas. Luego podrás publicar el documento web
en tu espacio web. Un indicador de progreso aparece durante la operación de
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.

www.magix.es
 Menús y shortcuts de teclado 505

El botón en la barra de herramientas es una forma más rápida de invocar esta

operación.

Exportar animación
También disponible en la barra de herramientas de animación debajo de la
barra de herramientas estándar en un documento de animación.

Exporta una animación para utilizarla en una página web.

Información de documento
Esto muestra un recuadro de información sobre el documento seleccionado. Incluye
información completa sobre el documento, como fuentes (junto con sus permisos) y
plug-ins Live Effects que se utilizan.

Opciones de página
También puedes hacer clic derecho y escoger OPCIONES DE PÁGINA .

Te permite editar el diseño de la 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 480)).

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 480)).

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 480)).

Cerrar
Cierra todas las ventanas y borra Web Designer de la memoria de trabajo. Se te
advertirá si hay cambios sin guardar.
506

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 104)).

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.

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 111)).

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 111)).

Pegar (barra de control edición o Ctrl+V)

O haz clic derecho y escoge PEGAR .

Pega el contenido del portapapeles en el documento seleccionado. Lo que aparece

escrito en esta opción refleja el contenido del portapapeles (consulta Manejo de
objetos (en la página 111)).

A veces, cuando pegas el contenido del portapapeles en un documento, puede

insertarse en diversos formatos. Si esto es el caso, aparecerá el diálogo PEGADO
ESPECIAL para que puedas escoger un formato.

Pegar texto sin formato

Pega el texto del portapapeles en el documento sin formato.

Pegar en lugar
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 a otra sin cambiar su
posición X/Y. Sin embargo, ten en cuenta que si el objeto seleccionado es un pie de
página (es decir, que siempre guarda la misma distancia de la parte inferior de la
página aun al cambiar el tamaño de la página) entonces, al pegarlo, se posicionará
www.magix.es
 Menús y shortcuts de teclado 507

respecto a la parte inferior de la página. En general, así quieres que se comporten los
objetos de pie de página.

Pegar formato/atributos
Conserva el formato (p. ej. el tipo y tamaño de fuente) o los atributos de estilo (p. ej.,
el color de la línea y del relleno) del objeto que se pega.

Pegar posición
Esta opción aplica la posición de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, que se mueve a exactamente la misma posición que el
objeto copiado.

Si se han copiado múltiples elementos en el portapapeles, Web Designer los trata

como a un grupo y mueve al objeto actual seleccionado a la posición del grupo
copiado como un todo.

El objeto seleccionado actualmente se pega o se mueve a la posición central del

objeto copiado o al grupo de objetos.

Pegar tamaño
Esta opción aplica el tamaño de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, cuyo centro cambia de tamaño para ser igual al del objeto
copiado.

Si se han copiado múltiples elementos en el portapapeles, Web Designer los trata

como a un grupo y cambia el tamaño del objeto actual seleccionado al tamaño del
grupo copiado como un todo.

Pegar reemplazo de selección

Esto es similar a PEGAR POSICIÓN , solo que el objeto copiado en el portapapeles
reemplaza al objeto seleccionado actualmente y mantiene la posición del elemento
borrado.

El objeto copiado se pega en la posición central del objeto borrado.

Pegar en la capa actual

Igual que PEGAR EN LUGAR , pero el objeto se pegará solamente en la capa actual.

Esto es útil si quieres ver u ocultar el objeto pegado cuando se muestran capas
encima o debajo.
508

Pegar en el lugar de la capa actual

Igual a PEGAR EN LA CAPA ACTUAL , pero el objeto se pegará en la capa actual en la
misma posición desde la que lo has copiado.

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 106).

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 419)).

Eliminar selección/Restaurar atributos actuales (Esc)

Deselecciona todos los objetos. Si nada está seleccionado, los atributos actuales (en
la página 57) vuelven a sus valores por defecto. Puedes ejecutar esta opción si
presionas ESC dos veces.

Duplicar (barra de control edición o Ctrl+Alt+D)

Or haz clic derecho y escoge DUPLICAR .

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 (consulta Personalización de Web Designer (en la página 492).

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
O haz clic derecho y escoge PÁGINAS .

El submenú Páginas te permite añadir o quitar páginas de tu documento multipá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 multipágina consulta Documentos
multipágina (en la página 83).

www.magix.es
 Menús y shortcuts de teclado 509

Menú Arreglo
Mover a la capa al frente (barra de control arreglo o
Ctrl+Shift+U)
O clic derecho y escoge ARREGLO > MOVER A LA CAPA DE ADELANTE .

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 .

Traer al frente (barra de control arreglo o Ctrl+F)

O haz clic derecho y escoge ARREGLO > AL FRENTE.

Mueve el objeto seleccionado hasta el frente de los otros objetos sobre la misma
capa. Consulta Manejo de objetos (en la página 106) para más información.

Mover adelante (barra de control arreglo o Ctrl+Shift+F)

O haz clic derecho y escoge ARREGLO > MOVER HACIA ADELANTE .

Mueve el objeto seleccionado un paso hacia el frente (consulta Manejo de objetos

(en la página 106)).

Mover atrás (barra de control arreglo o Ctrl+Shift+B)

O haz clic derecho y escoge ARREGLO > MOVER HACIA ATRÁS .

Mueve el objeto seleccionado un paso hacia atrás (consulta Manejo de objetos).

Llevar atrás (barra de control arreglo o Ctrl+B)

O haz clic derecho y escoge ARREGLO > LLEVAR ATRÁS .

Mueve el objeto seleccionado detrás de los otros objetos sobre la misma capa
(consulta Manejo de objetos (en la página 106)).

Mover a la capa de atrás (barra de control arreglo o

Ctrl+Shift+D)
O clic derecho y escoge ARREGLO > MOVER A LA CAPA DE ATRÁS .

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 .
510

Agrupar (barra de control arreglo o Ctrl+G)

O haz clic derecho y escoge AGRUPAR .

Agrupa los objetos seleccionados para manejarlos como un solo objeto (consulta
Manejo de objetos (en la página 106)).

Desagrupar (barra de control arreglo o Ctrl+U)

O haz clic derecho y escoge DESAGRUPAR.

Separa el grupo o los grupos en objetos individuales. Esta opción no está disponible,
salvo que se haya seleccionado un grupo. O cuando haya al menos un grupo dentro
de los objetos seleccionados.

Aplicar grupo suave (Ctrl+Alt+G)

O haz clic derecho y escoge APLICAR GRUPO SUAVE .

Haz que los objetos seleccionados formen un grupo suave. A diferencia de los grupos,
los grupos suaves pueden incluir objetos en diferentes capas. Consulta Manejo de
objetos (en la página 134) para detalles.

Borrar grupo suave (Ctrl+Alt+U)

O haz clic derecho y escoge BORRAR GRUPO SUAVE .

Separa el grupo suave seleccionado de modo que los objetos puedan seleccionarse
por separado de nuevo.

Aplanar grupo de fotos

Convierte un grupo de fotos en un mapa de bits individual

Alineación (Ctrl+Shift+L)
O haz clic derecho y escoge ALINEAR .

Se utiliza para alinear varios objetos. No tiene efecto si se ha seleccionado un solo

objeto (consulta Manejo de objetos (en la página 135) para más información).

Combinar formas (barra de control arreglo)

El submenú de combinar formas te permite:

• Unir formas.
• Sustraer la forma superior de las inferiores.
• Descartar partes de otras formas no cubiertas por la forma superior.
www.magix.es
 Menús y shortcuts de teclado 511

• Utilizar la forma superior para cortar las otras formas.

• Realizar una intersección de formas para crear objetos de las formas agrupadas.

Solo las formas seleccionadas se combinarán. Las formas no seleccionadas

permanecen iguales (para más información, consulta Manejo de formas en la página
176).

Crear copia de mapa de bits (Ctrl+Shift+C)

CREAR COPIA DE MAPA DE BITS crea una versión en mapa de bits (en la página 350) de
los objetos seleccionados

Adaptar texto a la curva/Eliminar texto de la curva

O haz clic derecho y escoge ADAPTAR TEXTO A LA CURVA/ELIMINAR TEXTO DE LA
CURVA . Te permite adaptar una línea de texto a una curva arbitraria o desvincular el
texto de una curva (consulta Manejo de texto para más información).

Contorneo y anclaje
O haz clic y selecciona CONTORNEAR TEXTO , ANCLAR TEXTO o CONTORNEAR Y ANCLAR .

Haz que el objeto haga que el texto fluya a su alrededor o que se fije dentro de una
columna. Consulta Contornear objeto con texto (en la página 220) y Gráficos
anclados (en la página 222) para más detalles

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
382).

Repetir en todas las páginas (Shift+Ctrl+Alt+R)

O haz clic y escoge REPETIR EN TODAS LAS PÁGINAS .

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 .

Detener actualización (Shift+Ctrl+Alt+O)

O haz clic derecho y escoge DETENER ACTUALIZACIÓN . La función ARREGLO > DETENER
ACTUALIZACIÓ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 Manejo de objetos (en la página 145).

512

Menú Insertar
Del catálogo de contenidos
Abre el catálogo de contenidos online. Elige entre las categorías plantillas, widgets y
cliparts de la web del catálogo o diseño y foto.

Imagen
• Del archivo: examina tu PC para cargar un archivo de imagen en el documento
seleccionado.
• De direcciones web: extrae todas las imágenes desde una página web específica.
(Ctrl+Alt+W)
• Captura de pantalla: abre la herramienta de captura de pantalla.
• Desde la cámara: detecta una cámara web u otro dispositivo de captura de vídeo
asociado a Windows agregado a tu PC e inserta una imagen inmóvil en tu
documento.

Forma
• Rectángulo: inserta un rectángulo en el documento actual (Shift+Ctrl+Alt+E)
• Elipse: inserta una elipse en el documento actual (Shift+Ctrl+Alt+E)
• Más formas: abre la sección "Otras formas" de Smartshapes en el catálogo de
contenido online
• Flechas: abre el área de flechas de Smartshapes en el catálogo de contenido
online
• Panel de texto: inserta un panel de texto en un documento actual (Shift+C)
• Más paneles de texto: abre la sección de paneles de texto del catálogo de
contenido online
• Globo de diálogo: inserta un globo de diálogo en el documento actual

Campo de texto
Inserta un campo de texto en el documento actual.

Número de página
Inserta un número de página en la posición del cursor al usar la HERRAMIENTA DE
TEXTO . Ver Añadir números de página para más información.

Nueva página
• Nueva página en blanco: inserta una nueva página en blanco en el documento
detrás de la página seleccionada actual.
• Duplicar página: inserta un duplicado de la página en el documento detrás de la
página actual seleccionada.
• Del catálogo de contenidos: abre el catálogo de contenidos online.

www.magix.es
 Menús y shortcuts de teclado 513

Menú Herramientas
Galerías
Páginas y galerías (barra de control galerías o "F10")
Muestra u oculta la GALERÍA DE PÁGINAS Y CAPAS. Solo utilizada en documentos no
animados , ver Capas (en la página 419).

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 333).

Galería de líneas (barra de control de galerías o "Ctrl + F9")

Muestra u oculta la GALERÍA DE LÍNEAS , ver Dibujo de líneas (en la página 166).

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
463).

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 (en la página
327).

Galería de frames (barra de control de galerías o " + F12")

Muestra u oculta la GALERÍA DE FRAMES . Solo utilizado en documentos animados, ver
Gráficos web (en la página 434).

Editor de color (Ctrl+E)

O haz clic derecho y escoge COLOR DE RELLENO. Abre el EDITOR DE COLOR (consulta
Manejo de colores (en la página 183)).

Nombres
O haz clic derecho y escoge NOMBRES . Abre el diálogo Aplicar/Eliminar nombres (en
la página 141).

Propiedades web (Ctrl+Shift+W)

O haz clic derecho y escoge PROPIEDADES WEB . Abre el diálogo PROPIEDADES WEB ,
que te permite agregar elementos web, como enlaces, capas popup, anclajes, etc., a
tu documento de página web. Además puedes controlar cómo se exportan las
514

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 23) para más detalles.

Variantes de página web

• COMPARTIR CON TODAS LAS VARIANTES: permite compartir el objeto
seleccionado con todas las variantes. Si el objeto no se puede compartir,
entonces hay una opción para crear una copia no compartible del objeto en las
otras variantes.
• BORRAR DE TODAS LAS VARIANTES: borra el objeto de todas las variantes.
• DEJAR DE COMPARTIR CON LAS VARIANTES: deja de compartir el objeto
seleccionado con todas las variantes.
• COPIAR PÁGINA A TODAS LAS VARIANTES: copia la página seleccionada a todas las
variantes.
• VARIANTES DE PÁGINA WEB: abre el diálogo Variantes de página web (en la
página 298).

Optimizar foto
O haz clic derecho y escoge OPTIMIZAR FOTO . Optimizar resolución del mapa de bits
para utilizar tus diseños con MAGIX Web Designer 11 Premium. Ver Optimización de
fotos (en la página 347) para más detalles.

Optimización de todas las imágenes

Optimización de todas las fotos y mapas de bits en el diseño. Lee Optimización de
fotos (en la página 347).

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.

www.magix.es
 Menús y shortcuts de teclado 515

Revisar ortografía mientras se escribe

Esta opción activa el CORRECTOR DE ORTOGRAFÍA (en la página 213) en la herramienta
de texto.

Opciones (Ctrl+Shift+O)
O clic derecho y OPCIONES DE PÁGINA. Abre el diálogo OPCIONES (descrito en
Personalización de Web Designer).

Menú Compartir
El menú compartir incluye diversas opciones para compartir la imagen seleccionada
actualmente con los servicios MAGIX y otros servicios de terceros. Por ejemplo,
puedes seleccionar una foto de tu página y enviarla rápidamente al MAGIX Álbum
Online, a Facebook o a Flickr. Por lo tanto, si has instalado otros programas MAGIX
compatibles, también puedes enviar las imágenes a ellos. Por ejemplo, puedes
enviarla a MAGIX Video deluxe Pro MX para incluir la imagen en una película.

Publicar online: carga de objetos a Facebook

Envío de la selección a Facebook. Aparecerá un diálogo que te permitirá especificar, si
lo deseas, un nombre de archivo, una descripción, las palabras clave de búsqueda
para tu imagen y si debe ser pública o privada. Haz clic en el botón CARGA para
continuar y aparecerá una ventana de inicio de sesión. Si ya tienes una cuenta en
Facebook, introduce la información, de lo contrario, haz clic en Registrarse para unirte
a Facebook. Si vas a cargar muchas imágenes, selecciona el campo para no cerrar
sesión, de forma que no tengas que volver a iniciar sesión cada vez que quieras cargar
una imagen. Haz clic en el botón de inicio de sesión para que tu imagen se exporte y
cargue; luego se abrirá una ventana de navegador que te permitirá acceder a tu
Facebook.

Publicar online: carga de objetos a Flickr

Envío de la selección a Flickr. El proceso es similar al que se ha descrito anteriormente
para Facebook, excepto que debes iniciar sesión con tu información de cuenta de
Flickr.

Publicar online: MAGIX Álbum Online

ENVIAR OBJETOS SELECCIONADOS
Envía la selección a MAGIX para incluirla en un álbum online nuevo o existente. Inicia
sesión con la información de tu cuenta de MAGIX Mundo Online. Puedes optar por
que los datos de inicio de sesión se guarden en tu equipo para que no tengas que
iniciar sesión nuevamente en el futuro.
516

ABRIR ÁLBUM ONLINE

Esto abre una nueva ventana de navegador web para que puedas ver tus álbumes.

MEDIA MANAGER ONLINE

Abre el Media Manager Online en una ventana para que puedas ver las fotos
incluidas en tus álbumes.

ADMINISTRAR DATOS DE INICIO DE SESIÓN

Si has seleccionado guardar tus datos de inicio de sesión de MAGIX Mundo Online en
tu equipo, esta opción te permite cambiarlos o eliminarlos si no quieres dejarlos
guardados, con solo pulsar el botón de eliminación.

Publicar online: publicar un sitio web

Esto inicia una operación de publicación del documento actual, la misma operación
disponible a través del menú Archivo y de la barra de herramientas web.

Publicar online: espacio web libre y más

Esta opción abrirá un navegador web en una página que te informará sobre los
servicios de alojamiento web gratis de MAGIX disponibles y otra información
relacionada.

Envío de imágenes a otras aplicaciones de MAGIX

instaladas
Si tu equipo tiene instaladas otras aplicaciones MAGIX compatibles, el menú
compartir incluirá opciones para enviar la imagen seleccionada a esas aplicaciones.
Por ejemplo, si tienes instalado Video deluxe Pro MX, el menú incluirá una opción
"Añadir objetos a vídeo" que te permitirá enviar la selección a esa aplicación para
incluirla en una película.

www.magix.es
 Menús y shortcuts de teclado 517

Menú Ventana
Eliminar selección/Restaurar atributos actuales (Esc)
Deselecciona todos los objetos. Si nada está seleccionado, los atributos actuales (en
la página 57) vuelven a sus valores por defecto. Puedes ejecutar esta opción si
presionas ESC dos veces.

Vista multipágina
O haz clic derecho y escoge VISTA MULTIPÁGINA.

Por defecto, Web Designer muestra solamente la página actual del del documento
abierto en el momento. Si escoges la vista multipágina, verás todas las páginas en tu
documento.

Arreglar ventanas
Ordena todas las ventanas de Web Designer como mosaico.

Animación
En un documento de animación, activará la barra de herramientas Animación.

Nueva ventana
Abre una nueva ventana en el documento seleccionado.

Mostrar barras de desplazamiento

Muestra las barras de desplazamiento de los lados y de la parte inferior de la ventana
de Web Designer.

Mostrar reglas (Ctrl + L)

O clic derecho y MOSTRAR CUADRÍCULA/GUÍAS > MOSTRAR REGLAS.

Muestra las reglas de los lados y de la parte superior de la ventana de Web Designer.

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 497)).
518

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).

Ver pestañas de los documentos

Muestra las pestañas de los documentos que te proveen rápido acceso a los
documentos abiertos en la parte superior de la ventana de Web Designer.

Un clic sobre una pestaña selecciona el documento correspondiente. Un * tras el

nombre del documento señala que no se han guardado cambios de ese documento.

Pantalla completa (8 del teclado numérico)

Cambia entre el modo de pantalla completa y de pantalla normal.

Mostrar cuadrícula (#)

O clic derecho y MOSTRAR CUADRÍCULA/GUÍAS > MOSTRAR CUADRÍCULA.

Muestra la cuadrícula de pantalla (consulta Manejo de documentos (en la página

91)).

Mostrar guías (1 del teclado numérico)

O clic derecho y MOSTRAR CUADRÍCULA/GUÍAS > MOSTRAR GUÍAS.

Muestra u oculta la capa de guías que contiene todas las líneas guía y objetos guía.

Ajustar a cuadrícula (. del teclado numérico)

O clic derecho y AJUSTAR A > AJUSTAR A CUADRÍCULA.

Con esta opción configurada, un objeto se ajustará al punto de cuadrícula cercano al

que se lo arrastre. (consulta Manejo de documentos (en la página 130)).

Ajustar a guías (2 del teclado numérico)

O clic derecho y AJUSTAR A > AJUSTAR A GUÍAS .

Con esta opción configurada, un objeto se ajustará a cualquier guía cercana a la que
se lo arrastre (consulta Manejo de objetos (en la página 130) ).

Ajustar a objetos (* del teclado numérico)

O clic derecho y AJUSTAR A > AJUSTAR A OBJETOS .

www.magix.es
 Menús y shortcuts de teclado 519

Con esta opción seleccionada, arrastrar un control deslizante cerca de otro objeto
ajusta el control al objeto (consulta Manejo de objetos (en la página 130) para más
información). Puedes ajustar la distancia de ajuste. Para más información, lee
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 11 Premium
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.

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 11 Premium.

Shortcut: F1

Películas
Abre una página web que contiene vídeos tutoriales acerca de la utilización de Web
Designer.

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.
520

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 11
Premium 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 11 Premium, 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 11
Premium o donarla por caridad, seleccionando las opciones que se muestran en el
diálogo.

Popups informativos
Te permite mostrar consejos de herramienta que, contienen información popup,
cuando pasas el cursor sobre barras de herramientas, botones, la línea de colores y
otros elementos de la ventana de Web Designer.

Acerca de MAGIX Web Designer 11 Premium

Se verá información sobre el Copyright y el número de la versión de MAGIX Web
Designer 11 Premium.

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.

www.magix.es
 Menús y shortcuts de teclado 521

Shortcuts de teclado
Las herramientas
Herramienta de selección F2 o V o Alt + S
Herramienta Máscara a mano alzada Alt + F4
Herramienta Máscara de rectángulo Alt + F5
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 G
Herramienta de transparencia F6
Herramienta de sombra Ctrl + F2
Herramienta de foto P
Herramienta de desplazamiento  + 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 páginas y capas F10
Galería de mapa de bits F11
Galería de líneas Ctrl + F9

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
522

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.

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 Ctrl + 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 +  + R
Deshacer Ctrl + Z o < o ,
Rehacer Ctrl + Y o > o .

www.magix.es
 Menús y shortcuts de teclado 523

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 próximo objeto Tab
Eliminar la selección Supr *
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 offset Ctrl + D
Copiar objeto al portapapeles Ctrl + C
Cortar la selección y copiar en el Ctrl + X
portapapeles
Pegar objeto del portapapeles Ctrl + V
Pegar objeto en la posición original Ctrl +  + V
Pegar formato/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
524

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

(consulta Desplazar objetos (en la página 111))

Mover los controles deslizantes seleccionados: teclas de flecha en otras herramientas

diferentes a 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 izquierda/derecha. Mueve el cursor de texto una palabra hacia
la 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 + Intro Inserta salto de página
Ctrl +  + Intro Inserta salto de columna
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).
Ctrl + W Intercambia la mayúscula y minúscula del

www.magix.es
 Menús y shortcuts de teclado 525

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 (solo si toda la
Ctrl + >
selección tiene el mismo tamaño)
Alt + teclas de flecha Aumenta / reduce el espaciado / kerning.
 Inicia una nueva línea de texto.
Supr 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.
 + teclas de flecha 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
526

Páginas
Ctrl + C Copiar la página actual o la selección (sin
objetos seleccionados)
Ctrl + X Cortar la página actual o la selección (sin
objetos seleccionados)
Ctrl + V Pegar página(s)
Suprimir Eliminar la página actual o la selección (sin
objetos seleccionados)
 + Ctrl + Supr Eliminar la página actual o la selección (sin
o con objetos seleccionados)
 + Ctrl + Re. Pág. Mover la página hacia arriba
 + Ctrl + Av. Pág. Mover página hacia abajo

Utilizar máscaras
Herramienta "Pincel de máscara" Alt + F3
Máscara de mano alzada Herramienta Alt + F5
Herramienta de máscara rectangular Alt + F6
Activar/desactivar inversión de Ctrl + M o  + F1
máscara
Invertir máscara Ctrl +  + I o Ctrl + F1
Eliminar máscara Ctrl + D o Alt + F1

Otros
Editor de color Ctrl + E (abre y cierra)
Diálogo de opciones Ctrl +  + O
Ayuda de MAGIX Web Designer 11 F1
Premium

www.magix.es
 Index 527

Index
¿

¿Cuáles son las novedades de MAGIX Web Designer 11 Premium?.......................... 18

¿Por qué Web Designer es tan especial?........................................................................... 16
¿Qué es MAGIX Web Designer 11 Premium?................................................................... 16
¿Qué funciones de MAGIX Web Designer 11 Premium son compatibles con
Flash? ........................................................................................................................................ 453
¿Qué son las funciones deshacer y rehacer? ................................................................. 104

Abrir (barra de control estándar o Ctrl+O) .....................................................................501

Abrir enlace en: ...................................................................................................................... 278
Abrir un documento de animación .................................................................................. 460
Abrir un documento existente ..............................................................................................73
Abrir una segunda ventana ....................................................................................................79
Acelerar y desacelerar.......................................................................................................... 457
Acerca de MAGIX Web Designer 11 Premium ..............................................................520
Acerca de RWD ..................................................................................................................... 297
Acerca de Web Designer........................................................................................................22
Activación y desactivación de las barras de navegación del sitio ............................386
Activar o desactivar (on/off) la extrusión ...................................................................... 377
Actualización de la barra de navegación en todas las páginas.................................. 393
Actualización de los estilos de texto ................................................................................ 229
Actualizaciones para el Panorama Studio....................................................................... 375
Actualizar programa ..............................................................................................................519
Adaptación automática........................................................................................................486
Adaptación múltiple..............................................................................................................486
Adaptación personalizada...................................................................................................486
Adaptar a bordes de página................................................................................................280
Adaptar el tamaño de las fotos (solo documentos web)..............................................118
Adaptar texto a la curva/Eliminar texto de la curva ......................................................511
Agregado de archivos de películas y animaciones ........................................................412
Agregado de nuevas páginas de presentación ............................................................. 404
Agregado y edición de botones .........................................................................................389
Agregar extremos de flechas...............................................................................................154
Agregar más segmentos de línea ....................................................................................... 155
Agregar menús y submenús ................................................................................................391
Agregar nuevas páginas a tu página web...........................................................................33
Agregar y quitar sangrías..................................................................................................... 234
Agrupación de galerías........................................................................................................... 99
Agrupar (barra de control arreglo o Ctrl+G) ...................................................................510
Agrupar y desagrupar objetos............................................................................................. 133
Ajustando la región cortada.................................................................................................361
Ajustar a cuadrícula ...............................................................................................................126
Ajustar a cuadrícula (. del teclado numérico).................................................................518
Ajustar a guías (2 del teclado numérico) .........................................................................518
528
Ajustar a objetos (* del teclado numérico)..................................................................... 518
Ajustar el ancho de los botones a las etiquetas.............................................................385
Ajustar el margen izquierdo y derecho de un texto sobre una curva........................ 211
Ajuste ........................................................................................................................................ 126
Ajuste de una transparencia de mapa de bits ................................................................335
Ajuste del fondo de la página para un mapa de bits.....................................................335
Ajuste magnético de objeto (ajustar a objetos) ............................................................ 128
Ajuste y ancho de línea .........................................................................................................127
Al final de una línea: .............................................................................................................. 158
Al inicio de una línea: ............................................................................................................ 159
Alineación ........................................................................................................................136, 137
Alineación (Ctrl+Shift+L)..................................................................................................... 510
Ampliar foto a 100% .............................................................................................................355
Ampliar selección................................................................................................................... 107
Ancho / Alto ............................................................................................................................361
Animación........................................................................................................................514, 517
repeticiones y velocidad ................................................................................................. 462
Animación web...................................................................................................................... 294
Animaciones de aparición ...................................................................................................432
Animaciones de clic/toque .................................................................................................432
Animaciones en Flash ...........................................................................................................435
Animaciones web................................................................................................................... 431
Anterior y Siguiente...............................................................................................................354
Añadir a la galería .................................................................................................................. 102
Añadir código al encabezado de página ..........................................................................293
Añadir nombres...................................................................................................................... 142
Añadir nuevos botones........................................................................................................... 55
Añadir un nuevo punto de control..................................................................................... 158
Aplanar grupo de fotos......................................................................................................... 510
Aplicación de transiciones a las capas popup.................................................................. 69
Aplicación de transiciones a páginas de presentaciones ........................................... 406
Aplicación de transiciones a pasos de presentaciones............................................... 405
Aplicación de un color de fondo para el texto.................................................................183
Aplicar atributos a historias de texto completas...........................................................236
Aplicar colores de relleno y línea con arrastrar y soltar................................................ 181
Aplicar estilos de texto .........................................................................................................232
Aplicar grupo suave (Ctrl+Alt+G)..................................................................................... 510
Aplicar transparencia a varios objetos .............................................................................256
Aplicar transparencia con gradación ................................................................................253
Aplicar transparencia plana.................................................................................................253
Aplicar un bisel .......................................................................................................................262
Aplicar un bisel a varios objetos ........................................................................................263
Aplicar un efecto de resplandor .........................................................................................258
Aplicar un efecto en vivo......................................................................................................365
Aplicar una sombra ...............................................................................................................257
Aplicar una sombra a varios objetos................................................................................ 260
Aplicar una sombra de pared..............................................................................................257
Aplicar una sombra de suelo...............................................................................................258
Archivos de película MP4 y FLV ........................................................................................ 413
Archivos Flash......................................................................................................................... 413
Archivos JPEG integrados....................................................................................................336
Archivos MP3.......................................................................................................................... 413
www.magix.es
 Index 529

Archivos PDF .......................................................................................................................... 414

Archivos recientes........................................................................................................489, 501
Área que permite clic............................................................................................................ 278
Áreas de texto ........................................................................................................................206
Arrastrar el segmento de línea............................................................................................163
Arreglar ventanas ................................................................................................................... 517
Asistencia técnica..................................................................................................................... 14
Atributos actuales (estilos) ...................................................................................................57
Atributos de la edición de fotos.........................................................................................340
Autocorrección........................................................................................................................214
Auto-optimización ................................................................................................................ 357
Ayuda...................................................................................................................................21, 519
Ayuda de MAGIX Web Designer 11 Premium ................................................................519

Barra de estado........................................................................................................................109
Barra de herramientas principal............................................................................................77
Barra de información........................................................................................................ 30, 77
Barra de información de estilos de texto ......................................................................... 228
Barra de información de Herramienta de extrusión ..................................................... 377
Barra de información de herramienta de relleno ............................................................241
Barra de navegación del sitio..............................................................................................386
Barras de botones (barras de navegación) ....................................................................... 56
Barras de control.................................................................................................... 76, 497, 517
Barras de control bloqueadas o flotantes........................................................................499
Barras de navegación............................................................................................................ 382
Barras de navegación de botón único............................................................................... 387
Barras de navegación del sitio y plantillas....................................................................... 387
Barras desplegables .................................................................................................................25
Biseles ....................................................................................................................................... 262
Bloquear aspecto ....................................................................................................................361
Bloquear capas .......................................................................................................................429
Bloquear efectos ....................................................................................................................366
Borrar ........................................................................................................................................360
Borrar durante el dibujo .........................................................................................................151
Borrar grupo suave (Ctrl+Alt+U) .......................................................................................510
Botón Bloquear relación de aspecto ...................................................................................117
Botón de red.............................................................................................................................481
Botón Escalar anchos de línea ..............................................................................................117
Botón imprimir.........................................................................................................................481
Botón Imprimir... .....................................................................................................................481
Botón opciones........................................................................................................................481
Botones mouseover (rollover)...............................................................................................67
Botones MouseOver (rollover) .............................................................................................55
Botones que permiten clic y efectos de MouseOver ...................................................458
Botones y menús....................................................................................................................389
Brillo / Mate............................................................................................................................ 379
Brillo/Contraste/Temperatura del color/Saturación/Tono....................................... 357
Buscar y reemplazar............................................................................................................... 215
530

Calidad (barra de control estándar).................................................................................. 518

Calidad de imagen ................................................................................................................... 93
Calidad de llenado................................................................................................................. 484
Calidad de mapas de bits .................................................................................................... 446
Calidad de visualización de fotos.......................................................................................337
Cambiar color de fondo ........................................................................................................ 190
Cambiar colores de un relleno ........................................................................................... 244
Cambiar colores en un grupo.............................................................................................. 134
Cambiar curvas....................................................................................................................... 162
Cambiar el ancho de la columna....................................................................................... 206
Cambiar el ancho de línea (grosor)................................................................................... 165
Cambiar el ángulo de la columna...................................................................................... 206
Cambiar el color de sombra o el efecto de relleno........................................................259
Cambiar el color del bisel o el efecto de relleno ............................................................265
Cambiar el estilo de unión del bisel...................................................................................266
Cambiar el tamaño de fuente..............................................................................................232
Cambiar el tamaño de las áreas de texto........................................................................ 209
Cambiar el tamaño de página ............................................................................................... 82
Cambiar el tamaño del bisel................................................................................................265
Cambiar el tamaño, rotar y reposicionar la foto dentro de su propio marco ........ 344
Cambiar el tipo de unión ...................................................................................................... 168
Cambiar el valor de zoom ......................................................................................................80
Cambiar el valor de zoom utilizando el ratón ...................................................................80
Cambiar el zoom utilizando la barra de información/barra de control de zoom ..... 81
Cambiar extremo de línea.................................................................................................... 168
Cambiar la elevación de la luz (ángulo vertical) ........................................................... 264
Cambiar la forma del bisel ...................................................................................................265
Cambiar la fuente de luz del bisel......................................................................................263
Cambiar la intensidad de la luz (contraste) ................................................................... 264
Cambiar la transparencia de la sombra............................................................................259
Cambiar lados de la línea ...................................................................................................... 211
Cambiar los puntos cero de las reglas................................................................................ 93
Cambiar mayúsculas o minúsculas ....................................................................................212
Cambiar selección de objetos............................................................................................. 107
Cambiar tamaño utilizando el ratón................................................................................... 118
Cambiar tamaño utilizando la barra de información ..................................................... 119
Cambiar texto de botón.......................................................................................................... 55
Cambio de la fuente de los botones de la barra de navegación................................ 394
Cambio de tamaño de widgets........................................................................................... 415
Cambio de tamaño teniendo en cuenta el contenido...................................................368
Cambio del documento de plantilla en blanco .............................................................. 487
Cambio del orden de los pasos.......................................................................................... 403
Cambio del tamaño de objetos (escalar).......................................................................... 117
Cambio del tamaño y la posición del relleno de mapa de bits ...................................247
Campo de texto .......................................................................................................................512
Cantidad de palabras ............................................................................................................ 210
Capa popup..............................................................................................................................276
Capas...............................................................................................................................422, 472
Capas de fondos de página o de tablero de dibujo ........................................................315
www.magix.es
 Index 531

Capas de popup y capas de presentación...................................................................... 406

Capas en páginas web..........................................................................................................425
Capas especiales....................................................................................................................428
Capas popup ............................................................................................................................. 70
Capas, MouseOver (rollover) y elementos emergentes ............................................... 65
Caracteres especiales (en la herramienta de texto)..................................................... 525
Catálogo de contenido online................................................................................................36
Cerrar ........................................................................................................................................505
Cerrar (Ctrl+W) .....................................................................................................................502
Cerrar el documento ............................................................................................................... 88
Cerrar una forma..................................................................................................................... 152
Cerrar una galería ...................................................................................................................103
Clipart flash ............................................................................................................................... 34
ClipView................................................................................................................................... 140
ClipView de borde suavizado ...............................................................................................141
Clonar..........................................................................................................................................114
Clonar (Ctrl+K) ......................................................................................................................508
Colocar objetos en la capa guía ...........................................................................................131
Color previo y actual ..............................................................................................................184
Coloreado de mapa de bits ................................................................................................. 247
Colorear formas ........................................................................................................................38
Colorear fotos ..................................................................................................................39, 344
Colores de animación ............................................................................................................461
Colores de la línea de colores..............................................................................................180
Colores de la página web........................................................................................................37
Colores locales y colores originales ...................................................................................186
Colores normales....................................................................................................................193
Colores normales, tintes, tonalidades y colores vinculados........................................193
Colores para enlaces de sitios web...................................................................................280
Colores vinculados .................................................................................................................194
Combinaciones de animaciones y tipos de objetos......................................................434
Combinaciones de objetos sticky y stretchy ....................................................................311
Combinar formas ........................................................................................................... 176, 271
Combinar formas (barra de control arreglo)...................................................................510
Comillas inteligentes.............................................................................................................. 212
Cómo crear sangrías francesas ..........................................................................................220
Cómo sincronizar el texto empleando Grupos suaves .................................................216
Comparar y restaurar el original ........................................................................................ 359
Compartir a través de variantes.........................................................................................300
Compartir documento en múltiples ubicaciones ............................................................ 74
Conexión de áreas de texto, flujo de texto......................................................................206
Configuración de impresora................................................................................................505
Configurar el color de fondo del ClipView ...................................................................... 140
Conflictos en el diseño de páginas..................................................................................... 132
Consejo del día ........................................................................................................................519
Consejos de herramientas......................................................................................................22
Contenido del directorio de compatibilidad ......................................................................87
Contornear texto alrededor de objetos.............................................................................. 47
Contorneo y anclaje ................................................................................................................511
Control deslizante / resolución.......................................................................................... 256
Controles.................................................................................................................................. 475
Controles deslizantes de límites de selección.................................................................109
532
Controles para rotar 90°......................................................................................................354
Conversión de una página web existente en una presentación................................. 401
Convertir color con nombre en local para frame/capa................................................ 192
Convertir objetos o dibujos a mapas de bits.................................................................. 350
Convertir texto en un gráfico ................................................................................................ 50
Convertir una línea recta en una curva (y viceversa) ................................................... 162
Coordenadas X-Y..................................................................................................................... 78
Coordinar selección.............................................................................................................. 492
Copiar (barra de control edición o Ctrl+C) .................................................................... 506
Copiar / Pegar texto con formato (RTF)..........................................................................237
Copiar atributos de una extrusión 3D................................................................................381
Copiar efectos en vivo ..........................................................................................................368
Copiar estilos - pegar atributos...........................................................................................139
Copiar estilos de texto ..........................................................................................................236
Copiar formas a la capa de máscara ..................................................................................271
Copiar objetos.................................................................................................................30, 444
Copiar sombras a otros objetos ......................................................................................... 261
Copiar y pegar páginas ...........................................................................................................84
Copias ...................................................................................................................................... 482
Copias de memoria cero ......................................................................................................332
Copias de seguridad al cerrar el sistema ............................................................................ 91
Copias de seguridad automáticas.................................................................................49, 88
Copias de seguridad de documentos abiertos ................................................................. 89
Copyright.......................................................................................................................................2
Corrector de ortografía ...........................................................................................................48
Corrector ortográfico .............................................................................................................213
Cortar (barra de control edición o Ctrl+X)..................................................................... 506
Cortar en documentos fotográficos ..................................................................................362
Cortar formas ...........................................................................................................................177
Cortar objetos ...........................................................................................................................113
Cortar, copiar y pegar ............................................................................................................. 111
Cortar, copiar, eliminar .........................................................................................................269
Creación de barras de navegación propias .................................................................... 394
Creación de barras de símbolos ........................................................................................ 499
Creación de botones, banners y otros gráficos web ....................................................... 52
Creación de grupo suaves.................................................................................................... 134
Creación de listas con números y viñetas ...................................................................... 404
Creación de los botones MouseOver propios ............................................................... 390
Creación de nuevos colores con nombre......................................................................... 188
Creación de nuevos estilos..................................................................................................230
Creación de panorámicas ....................................................................................................373
Creación de tus propios esquemas de colores............................................................... 187
Creación de un tinte, una tonalidad o un color vinculado ........................................... 194
Creación de una página Web................................................................................................. 31
Creación de una presentación ............................................................................................399
Creación de una presentación a partir de plantillas......................................................399
Creación de una presentación desde cero......................................................................400
Creación y edición de rectángulos con esquinas redondeadas ................................. 169
Crear agujeros en las formas ...............................................................................................176
Crear barra de navegación.................................................................................................... 511
Crear círculos y elipses......................................................................................................... 170
Crear copia de mapa de bits (Ctrl+Shift+C) .................................................................... 511
www.magix.es
 Index 533

Crear GIF animados ............................................................................................................. 460

Crear nuevos objetos de texto nuevos............................................................................... 46
Crear páginas web RWD desde las plantillas.................................................................299
Crear polígonos y estrellas ................................................................................................... 173
Crear rectángulos y cuadrados ...........................................................................................169
Crear sitios web RWD desde sitios existentes ..............................................................299
Crear un cuadrado ..................................................................................................................169
Crear un línea guía...................................................................................................................131
Crear un relleno de color con gradación.......................................................................... 239
Crear una animación............................................................................................................ 460
Crear una máscara ................................................................................................................ 267
Crear una máscara suave ....................................................................................................269
Crear uniones en curva..........................................................................................................163
Crear uniones en punta .........................................................................................................163
Cuadrícula en pantalla............................................................................................................. 91

Dar a nuevos objetos los atributos más recientes ........................................................489

Darle el tamaño completo a una foto ............................................................................... 347
Del catálogo de contenidos.................................................................................................. 512
Dentro........................................................................................................................................ 137
Desactivación de la regeneración del marcador de posición ......................................416
Desagrupar (barra de control arreglo o Ctrl+U).............................................................510
Desagrupar objetos ................................................................................................................ 133
Deseleccionar un objeto .......................................................................................................108
Desenfocar los bordes de la sombra ................................................................................ 259
Desenfoque / Enfoque ......................................................................................................... 357
Deshacer (barra de control estándar o Ctrl+Z).............................................................506
Deshacer corte ........................................................................................................................361
Deshacer y rehacer................................................................................................................ 104
Desplazamiento de la parte superior de la página......................................................... 317
Desplazamiento de los controles de inicio y fin de un relleno...................................244
Desplazamiento y tranformación de una barra de navegación del sitio .................386
Desplazar ..................................................................................................................................491
Desplazar botones y herramientas ...................................................................................500
Desplazar el documento dentro de la ventana ................................................................. 81
Desplazar objetos ..............................................................................................................29, 111
Destacar texto ........................................................................................................................ 233
Detención de la repetición de objetos...............................................................................145
Detener actualización (Shift+Ctrl+Alt+O)........................................................................511
Diálogo de propiedades web .............................................................................................. 272
Diálogo Propiedades de la barra de navegación............................................................384
Dibujar una linea o forma .....................................................................................................150
Dibujo de segmentos rectos con la herramienta de dibujo libre.................................151
Dibujo y edición de líneas rectas ........................................................................................154
Diccionario de usuario...........................................................................................................214
Difuminación..............................................................................................................................63
Difuminación (Feathering) ...................................................................................................130
Dirección del bisel ................................................................................................................. 263
Directorios de compatibilidad .............................................................................................. 86
Diseño del programa................................................................................................................23
534
Diseño web adaptativo .........................................................................................................297
Diseño web basado en objetos............................................................................................. 28
Distancia duplicación ........................................................................................................... 492
Distribuir....................................................................................................................................138
División de formas complejas............................................................................................. 178
Documento seleccionado y barra de título ....................................................................... 76
Documentos abiertos............................................................................................................ 519
Documentos fotográficos .....................................................................................................351
Documentos sin título.............................................................................................................90
Documentos web y PDF.......................................................................................................326
Duplicar ..................................................................................................................................... 114
Duplicar (barra de control edición o Ctrl+Alt+D) ........................................................ 508
Duplicar y clonar ......................................................................................................................113
Duplicar, clonar...................................................................................................................... 270
Duración de frames para películas Flash y pasos intermedios ................................. 447

Edición de archivos de fotos................................................................................................352

Edición de estrellas .................................................................................................................175
Edición de smartshapes......................................................................................................... 171
Edición de widgets existentes.............................................................................................. 411
Edición del contenido de un objeto repetido .................................................................. 144
Edición en el lienzo ................................................................................................................393
Editar colores con nombre................................................................................................... 190
Editar el color de un objeto.................................................................................................. 182
Editar el color principal ......................................................................................................... 195
Editar el contorno de las fotos ............................................................................................ 341
Editar formas ...........................................................................................................................366
Editar formas de molde ........................................................................................................ 126
Editar líneas/formas con la herramienta de dibujo libre y pincel...............................153
Editar máscara. .......................................................................................................................268
Editar polígonos y estrellas.................................................................................................. 174
Editar texto................................................................................................................................ 211
Editor de color (Ctrl+E) .........................................................................................................513
Efectos...................................................................................................................................... 496
Efectos en tiempo real ..........................................................................................................365
Efectos MouseOver ................................................................................................................. 65
Ejemplo para cambiar el tamaño de una foto y guardarla en JPEG. ........................ 340
El botón de propiedades....................................................................................................... 481
El color se transforma — el color de la animación cambia .........................................455
El diálogo de impresión......................................................................................................... 481
El editor de color......................................................................................................................183
El orden de los botones coincide con el orden de la página .......................................385
Eliminación de estilos............................................................................................................232
Eliminación de grupos suaves..............................................................................................135
Eliminación de una barra de navegación del sitio de una página ..............................387
Eliminar ( ................................................................................................................................. 508
Eliminar colores con nombre ............................................................................................... 191
Eliminar colores no utilizados .............................................................................................. 191
Eliminar imágenes de la galería ..........................................................................................335
Eliminar las barras de control............................................................................................. 500
www.magix.es
 Index 535

Eliminar objetos........................................................................................................................113
Eliminar objetos de un grupo ............................................................................................... 133
Eliminar objetos de un paso ................................................................................................403
Eliminar objetos del documento ..........................................................................................113
Eliminar objetos repetidos....................................................................................................146
Eliminar páginas de presentación..................................................................................... 404
Eliminar páginas de tu documento...................................................................................... 85
Eliminar puntos........................................................................................................................160
Eliminar secciones de una galería.......................................................................................103
Eliminar selección/Restaurar atributos actuales (Esc) ...................................... 508, 517
Eliminar un ancla.................................................................................................................... 225
Eliminar un bisel .....................................................................................................................266
Eliminar un ClipView...............................................................................................................141
Eliminar un paso.....................................................................................................................403
Eliminar una galería del espacio de trabajo .................................................................... 104
Eliminar una línea guía........................................................................................................... 132
Eliminar una sombra .............................................................................................................260
En el medio de una línea: ......................................................................................................159
Enderezar horizonte ..............................................................................................................346
Enlace al archivo .................................................................................................................... 276
Enlace automático de páginas............................................................................................386
Enlaces al paso siguiente/anterior................................................................................... 404
Enlaces de texto ..................................................................................................................... 235
Enlaces, botones y barras de navegación...........................................................................53
Enlazar a una dirección web ............................................................................................... 274
Enlazar a una referencia....................................................................................................... 275
Enlazar a... ................................................................................................................................ 274
Envío de imágenes a otras aplicaciones de MAGIX instaladas..................................516
Envolturas .................................................................................................................................124
Equilibrar curvas......................................................................................................................164
Espaciado de botón ............................................................................................................... 385
Espaciado de cuadrícula y regla.........................................................................................492
Espaciado de línea ................................................................................................................. 234
Espaciado de párrafos .......................................................................................................... 234
Esquemas de colores originales..........................................................................................186
Esquina con inglete / Esquina redonda............................................................................ 379
Estilo de párrafo y estilo de carácter ................................................................................ 228
Estilos basados en otros estilos .........................................................................................230
Estilos de menú .......................................................................................................................391
Estilos de pincel.......................................................................................................................154
Estilos de texto ....................................................................................................................... 227
Explorar espacio web............................................................................................................ 324
Exportación como documento Word ...............................................................................470
Exportación como Flash.......................................................................................................470
Exportación como formato Extended Metafile (EMF)..................................................471
Exportación como mapa de bits .........................................................................................471
Exportación como metarchivo de Windows (.wmf) .....................................................471
Exportación de animaciones como AVI........................................................................... 441
Exportación de archivos.......................................................................................................470
Exportación de archivos Photoshop PSD......................................................................... 472
Exportación de páginas web con directorios de compatibilidad..................................87
Exportación de un archivo Flash ....................................................................................... 440
536
Exportación de un documento web................................................................................... 471
Exportación DPI ......................................................................................................................473
Exportación rápida de HTML y formatos de gráficos web.......................................... 471
Exportar (Ctrl+Shift+E) ....................................................................................................... 502
Exportar animación............................................................................................................... 505
Exportar como AVI ............................................................................................................... 470
Exportar JPEG......................................................................................................................... 503
Exportar la animación ........................................................................................................... 461
Exportar página web............................................................................................................. 504
Exportar Página web............................................................................................................. 504
Exportar PNG ......................................................................................................................... 503
Extender la línea. .................................................................................................................... 158
Extender o reducir objetos................................................................................................... 120
Extender una línea................................................................................................................... 151
Extracción del JPEG original ................................................................................................337
Extrudir texto.......................................................................................................................... 380
Extrudir una forma .................................................................................................................376

Finalizar la línea ...................................................................................................................... 158

Fluidez de la animación (smoothness)............................................................................ 450
Fondos de página web ....................................................................................................39, 312
Fondos de plantilla y cambio de color de fondo............................................................. 314
Fondos fijos no desplazables............................................................................................... 314
Forma .........................................................................................................................................512
Formatos de exportación .................................................................................................... 466
Formatos de importación.................................................................................................... 464
Foto emergente.......................................................................................................................277
Fotos ................................................................................................................................. 40, 444
Fotos emergentes...................................................................................................................285
Fotos en miniatura con popup .............................................................................................. 43
Fotos pop-up .............................................................................................................................. 71
Fuentes compatibles con la web....................................................................................... 200
Fuentes de Google ................................................................................................................. 201
Función de botones de ratón.............................................................................................. 493
Funciones comunes para fotos...........................................................................................354
Funciones de Flash avanzadas............................................................................................457
Funciones Detener e Ir a ......................................................................................................457
Funciones MouseOver..........................................................................................................432
Fusionar varias formas en una sola ....................................................................................176

Galería de diseños.................................................................................................................... 34
Galería de líneas ..................................................................................................................... 166
Galería de páginas y capas ........................................................................................... 85, 419
Galerías .............................................................................................................................. 95, 513
Generación automática del marcador de posición........................................................ 410
GIF animados .......................................................................................................................... 414
Girar objetos...................................................................................................................... 30, 116

www.magix.es
 Index 537

Girar objetos en el modo de cambio de tamaño .............................................................117

Girar utilizando el ratón .........................................................................................................115
Gradaciones de color de varios niveles............................................................................249
Gráficos anclados .................................................................................................................. 222
Gráficos de ejemplo ................................................................................................................ 64
Gráficos incrustados ............................................................................................................. 225
Grupos ...............................................................................................................................50, 452
Grupos anclados ....................................................................................................................... 51
Grupos de foto........................................................................................................................ 329
Grupos de repetición ............................................................................................................... 51
Grupos suaves (soft groups) ................................................................................................. 51
Grupos suaves (soft groups, en inglés) .................................................................. 134, 224
Grupos y capas........................................................................................................................134
Grupos y capas suaves.........................................................................................................425
Guardar..................................................................................................................................... 336
Guardar (barra de control estándar o Ctrl+S)................................................................502
Guardar como.........................................................................................................................502
Guardar como (en el menú Archivo) ................................................................................. 86
Guardar copias de seguridad de documentos abiertos al cerrar el programa......... 90
Guardar el documento............................................................................................................ 86
Guardar la configuración de publicación en el documento ........................................ 325
Guardar perfiles...................................................................................................................... 326
Guardar plantilla.....................................................................................................................502
Guardar todo...........................................................................................................................502
Guardar todo (en el menú Archivo) ................................................................................... 86
Guardar tu trabajo. Creación de una página Web .......................................................... 49
Guardar y exportar fotos...................................................................................................... 338
Guardar y transferir archivos.............................................................................................. 367

Habilitar Supersites ...............................................................................................................303

Hacer grupos transparentes en su conjunto...................................................................489
Hacer que un objeto se rodee de texto ............................................................................. 221
Herramienta Capturar pantalla .......................................................................................... 342
Herramienta de corte............................................................................................................360
Herramienta de extrusión 3D ............................................................................................. 376
Herramienta de formas .......................................................................................................... 59
Herramienta de optimización ............................................................................................. 355
Herramienta de optimización de foto................................................................................ 271
Herramienta de rectángulo .................................................................................................... 61
Herramienta de relleno............................................................................................................ 61
Herramienta de sombra ......................................................................................................... 64
Herramienta de texto............................................................................................................524
Herramienta de transparencia...............................................................................................62
Herramientas de dibujo...........................................................................................................57
Herramientas de dibujo y forma .........................................................................................169

Imagen ....................................................................................................................................... 512

538
Imágenes de alta resolución................................................................................................327
Importación de archivos...................................................................................................... 467
Importación de clipart con color .......................................................................................... 39
Importación de colores con nombre .................................................................................. 191
Importación de foto RAW................................................................................................... 469
Importación de fotos .............................................................................................................330
Importación de fotos grandes............................................................................................... 42
Importación de PDF.............................................................................................................. 468
Importación de un archivo Photoshop PSD.................................................................... 467
Importación de un documento Word .............................................................................. 469
Importación desde una página web. ................................................................................ 469
Importación e inserción de barras de navegación........................................................ 394
Importación y exportación.................................................................................................. 463
Importante ...............................................................................................................................472
Importar (Ctrl+Shift+I) ........................................................................................................ 502
Importar desde la dirección web (Ctrl+Alt+W) ........................................................... 502
Importar y exportar formatos de archivo compatibles ............................................... 464
Imprimiendo ........................................................................................................................... 480
Imprimir (Ctrl+P) .................................................................................................................. 505
Imprimir a archivo................................................................................................................. 482
Imprimir capas ....................................................................................................................... 483
Imprimir como ....................................................................................................................... 483
Inclinar objetos ........................................................................................................................ 121
Inclusión de la página web en la galería de usuarios ....................................................324
Incrustación de fuentes en el documento........................................................................237
Incrustación de fuentes en un sitio web...........................................................................237
Indicaciones generales sobre la exportación e importación...................................... 463
Información de documento ......................................................................................... 22, 505
Información de presentación avanzada .......................................................................... 406
Iniciar un nuevo documento.................................................................................................. 73
Inserción ................................................................................................................................... 410
Inserción con otra herramienta de autoría web ............................................................. 441
Inserción de un objeto flash en MAGIX Web Designer 11 Premium. ...................... 440
Inserción manual de marcadores de posición para widgets....................................... 417
Inserción manual de un mapa de Google ........................................................................ 417
Insertar símbolos como gráficos........................................................................................203
Insertar símbolos en el texto...............................................................................................203
Insertar sombras detrás del objeto.....................................................................................381
Insertar texto de ejemplo ('Lorem Ipsum') ......................................................................213
Integración de películas, Flash y otros widgets................................................................ 34
Intersección de formas ..........................................................................................................176
Introducción........................................................................16, 196, 327, 353, 365, 435, 501
Introducir caracteres especiales .........................................................................................212
Introducir páginas en tu documento................................................................................... 83

Justificación o alineación de texto.....................................................................................233

Justificado ............................................................................................................................... 384

www.magix.es
 Index 539

La barra de estado ....................................................................................................................78

La barra de herramientas.....................................................................................................398
La capa actual ......................................................................................................................... 423
La función de rotación ...........................................................................................................451
La función deshacer .............................................................................................................. 104
La función rehacer ..................................................................................................................105
La galería de frames de animación....................................................................................442
La galería de mapa de bits................................................................................................... 333
La galería de páginas y capas ..............................................................................................419
La galería de rellenos ............................................................................................................250
La herramienta de bisel ........................................................................................................ 262
La herramienta de edición de formas .......................................................................149, 155
La herramienta de fotos ................................................................................................ 42, 353
La herramienta de líneas rectas y flechas .................................................................59, 154
La herramienta de mano alzada y pincel ..........................................................................150
La herramienta de moldes .................................................................................................... 122
La herramienta de ojos rojos............................................................................................... 363
La herramienta de relleno.................................................................................................... 239
La herramienta de selección ........................................................................................ 29, 106
La herramienta de sombra................................................................................................... 257
La herramienta de texto ........................................................................................................197
La línea de colores ..................................................................................................................179
La página actual ........................................................................................................................83
La pestaña de frames.............................................................................................................461
La tecla de restricción............................................................................................................. 94
La ventana de MAGIX Web Designer 11 Premium ..........................................................75
Las capas actuales siempre están visibles y pueden editarse. ..................................488
Las capas MouseOff y MouseOver..................................................................................... 66
Las galerías ............................................................................................................................... 521
Las herramientas..................................................................................................................... 521
Las herramientas de región de foto y máscara .............................................................. 267
Limitación de ángulo..............................................................................................................491
Lista con viñetas..................................................................................................................... 225
Lista con viñetas y numeradas .................................................................................... 47, 225
Lista con viñetas y números con gráficos ....................................................................... 227
Lista numerada ....................................................................................................................... 226

Ll

Llevar atrás (barra de control arreglo o Ctrl+B) ............................................................509

Lo que Flash puede hacer y lo que no puede hacer ...................................................... 435

Lo que no puedes hacer con Flash en MAGIX Web Designer 11 Premium ............ 437
Longitud de línea compatible con navegadores web antiguos ................................. 490
Los 6 tipos centrales de animación...................................................................................436
Los indicadores..........................................................................................................................78
540
Los nuevos efectos se bloquean por defecto................................................................. 497
Luces..........................................................................................................................................378

Manejo de documento............................................................................................................ 73
Manejo de formas .................................................................................................................. 169
Manejo de los pasos de presentación ............................................................................. 402
Manipulación de documentos ............................................................................................522
Manipulación de objetos......................................................................................................523
Mantener los nombres de las capas importadas.......................................................... 489
Mapas de bits..........................................................................................................................256
Mapas de bits en otros formatos que el JPEG............................................................... 445
Marcadores de selección ..................................................................................................... 109
Marco de selección................................................................................................................ 107
Marco de selección de objetos.......................................................................................... 490
Márgenes y sangrías ..............................................................................................................217
Más información .................................................................................................................... 417
Más Web Designer................................................................................................................ 519
Máscaras ..................................................................................................................................267
Máscaras suaves....................................................................................................................269
Membresía del sitio del widget .......................................................................................... 410
Menú Archivo ......................................................................................................................... 501
Menú Arreglo ......................................................................................................................... 509
Menú Ayuda............................................................................................................................ 519
Menú Compartir......................................................................................................................515
Menú contextual de la línea de colores............................................................................. 181
Menú de fuente ...................................................................................................................... 199
Menú Edición ......................................................................................................................... 506
Menú Herramientas ...............................................................................................................513
Menú Insertar...........................................................................................................................512
Menú Ventana .........................................................................................................................517
Menús con clic derecho ......................................................................................................... 27
Menús y shortcuts de teclado ............................................................................................ 501
Mezclar líneas curvas y rectas.............................................................................................157
Mezclar transparencias individuales y de grupo............................................................256
Minimizar ventanas múltiples .............................................................................................. 79
Mismo ancho para todos los botones ..............................................................................385
Modificación de tamaño con contenido alternativa .....................................................373
Modificación de tamaño de foto con contenido ........................................................... 270
Modificación del tamaño de una barra de símbolos.................................................... 499
Modificar un bisel ..................................................................................................................263
Modo Bosquejo........................................................................................................................153
Modo de pantalla completa ............................................................................................... 497
Modo de pantalla normal/completa................................................................................... 78
Modo Solo............................................................................................................................... 429
Mostrar barras de desplazamiento ....................................................................................517
Mostrar bordes de impresión ............................................................................................ 480
Mostrar cuadrícula (#)......................................................................................................... 518
Mostrar guías (1 del teclado numérico) ........................................................................... 518
Mostrar reglas (Ctrl + L) .......................................................................................................517
Mostrar todo y desbloquear todo ..................................................................................... 430
www.magix.es
 Index 541

Mostrar y ocultar barras de control ..................................................................................498

Mostrar/ocultar reglas............................................................................................................93
Mover a la capa al frente (barra de control arreglo o Ctrl+Shift+U)........................509
Mover a la capa de atrás (barra de control arreglo o Ctrl+Shift+D)........................509
Mover adelante (barra de control arreglo o Ctrl+Shift+F) .........................................509
Mover atrás (barra de control arreglo o Ctrl+Shift+B) ................................................509
Mover objetos..........................................................................................................................109
Mover objetos anclados....................................................................................................... 224
Mover objetos de un paso a otro.......................................................................................403
Mover objetos entre capas.......................................................................................... 68, 430
Mover objetos hacia adelante o hacia atrás .....................................................................115
Mover objetos seleccionados debajo o dentro ...............................................................108
Mover páginas dentro del documento ............................................................................... 84
Mover puntos de control - Herramienta de edición de formas.................................160
Mover y fijar una galería .........................................................................................................97

Navegación instantánea del menú de fuente ..................................................................201

Navegar entre páginas............................................................................................................ 85
Negrita y cursiva .................................................................................................................... 233
Nombrar objetos ......................................................................................................................141
Nombres.................................................................................................................................... 513
Nombres aplicados.................................................................................................................142
Nombres para el directorio de compatibilidad .................................................................87
Notas acerca de Cambio de tamaño teniendo en cuenta el contenido................... 373
Notas para la herramienta de foto .................................................................................... 362
Nueva página ........................................................................................................................... 512
Nueva ventana......................................................................................................................... 517
Nuevo (barra de control estándar o Ctrl+N)...................................................................501
Nuevo desde el catálogo de contenido .............................................................................501
Número de página .................................................................................................................. 512

Objetos ancla ............................................................................................................................ 48

Objetos de fotos..................................................................................................................... 328
Objetos de marcador de lugar............................................................................................ 293
Objetos en la página ................................................................................................................26
Objetos guía y líneas guía.....................................................................................................130
Objetos repetidos .............................................................................................................51, 143
Objetos sin movimiento.......................................................................................................455
Objetos sticky .........................................................................................................................306
Objetos sticky y stretchy ...........................................................................................294, 306
Objetos stretchy.....................................................................................................................309
Ocultar botones y herramientas ........................................................................................500
Ocultar capas..........................................................................................................................429
Opción Guardar (en el menú Archivo) .............................................................................. 86
Opciones (Ctrl+Shift+O) ...................................................................................................... 515
Opciones AVI .........................................................................................................................462
Opciones de exportación web.............................................................................................281
542
Opciones de impresión........................................................................................................ 505
Pestaña Diseño de la impresión.................................................................................... 485
Pestaña Salida.................................................................................................................... 483
Opciones de la foto emergente ..........................................................................................286
Opciones de página .............................................................................................................. 505
Opciones de texto................................................................................................................. 484
Opciones del menú............................................................................................................... 487
Opciones flash ........................................................................................................................ 461
Operaciones de capa.............................................................................................................425
Operaciones de color avanzadas ....................................................................................... 185
Operaciones que utilizan la máscara ................................................................................269
Optimización .......................................................................................................................... 485
Optimización de fotos y mapas de bits............................................................................347
Optimización de todas las imágenes ................................................................................ 514
Optimizar .................................................................................................................................370
Optimizar foto......................................................................................................................... 514
Optimizar imágenes ..............................................................................................................375
Orden de capas en documentos de página web .............................................................. 67
Orden de los objetos ............................................................................................................... 28
Orden de múltiples ventanas ................................................................................................ 79
Orientación ............................................................................................................................. 384
Otros..........................................................................................................................................526
Otros aspectos interesantes ...............................................................................................387
Otros formatos de película .................................................................................................. 413

Páginas........................................................................................................ 422, 482, 508, 526

Páginas de múltiples columnas ......................................................................................... 207
Páginas múltiples en el documento..................................................................................... 83
Pantalla completa (8 del teclado numérico)................................................................... 518
Para crear un grupo ................................................................................................................133
Para dibujar un segmento de línea curvo:.........................................................................157
Para dibujar un segmento de línea recto.......................................................................... 156
Pasos y capas ..........................................................................................................................396
Pegar (barra de control edición o Ctrl+V)...................................................................... 506
Películas.................................................................................................................................... 519
Perfil...........................................................................................................................................255
Permisos de fuentes ..............................................................................................................238
Personalización de Web Designer.................................................................................... 487
Perspectivas..............................................................................................................................123
Pestaña Analytics...................................................................................................................296
Pestaña Copias de seguridad ............................................................................................. 496
Pestaña Cuadrícula y regla ................................................................................................. 492
Pestaña de opciones............................................................................................................. 479
Pestaña efectos y plug-ins.................................................................................................. 496
Pestaña Enlace ........................................................................................................................273
Pestaña General..................................................................................................................... 488
Pestaña Imagen ......................................................................................................................285
Pestaña Marcador de lugar................................................................................................. 290
Pestaña Opciones de paleta ............................................................................................... 476
Pestaña Página........................................................................................................................282
www.magix.es
 Index 543

Pestaña Página web .............................................................................................................. 279

Pestaña Publicar.....................................................................................................................294
Pestaña Ratón .........................................................................................................................493
Pestaña Tamaño de mapa de bits .....................................................................................478
Pestaña Tamaño de página .................................................................................................495
Pies de página y objetos que se amplían con la página. ...............................................146
Plug-ins de Photoshop (solo Web Designer de 32 bits) .............................................496
Polígonos o estrellas con esquinas redondeadas ...........................................................174
Pop-ups deslizantes .............................................................................................................. 356
Popups informativos .............................................................................................................520
Preguntar antes de aplicar el atributo actual..................................................................489
Preparar tu foto ......................................................................................................................370
Presentaciones como páginas web...................................................................................396
Presentaciones web ..............................................................................................................280
Primeros pasos ..........................................................................................................................23
Principios básicos .................................................................................................................. 437
Profundidad de la extrusión ................................................................................................ 378
Programa de afiliado .............................................................................................................520
Propiedades de capa .............................................................................................................426
Propiedades de estilo............................................................................................................ 232
Propiedades de GIF animados.............................................................................................461
Propiedades de MouseOver (animaciones web)..........................................................289
Propiedades del mapa de bits............................................................................................. 336
Propiedades web (Ctrl+Shift+W) ...................................................................................... 513
Publicación al sitio web TaskPilot M .................................................................................318
Publicación de documento web .........................................................................................504
Publicación de tu página web .................................................................................................71
Publicación de variantes ......................................................................................................302
Publicación en un alojamiento web alternativo .............................................................320
Publicación rápida (solo archivos modificados)............................................................ 325
Publicar online
carga de objetos a Facebook ........................................................................................... 515
carga de objetos a Flickr ................................................................................................... 515
espacio web libre y más ...................................................................................................516
MAGIX Álbum Online....................................................................................................... 515
publicar un sitio web .........................................................................................................516
Publicar página web .....................................................................................................318, 504

Radio para alineación magnética.......................................................................................494

Recortar fotos ..........................................................................................................................341
Recortar fotos con una máscara ........................................................................................ 342
Recortar o cortar imágenes................................................................................................. 359
Recortar y cortar ....................................................................................................................448
Recuperación de copias de seguridad ................................................................................. 91
Recuperación tras cierres anormales del programa ....................................................... 90
Redefinición de estilos de texto ......................................................................................... 229
Redimensionar grupos............................................................................................................119
Reemplazar colores ................................................................................................................189
Reemplazar con código HTML........................................................................................... 292
Reemplazar con Flash............................................................................................................291
544
Reemplazar con un archivo gráfico ...................................................................................292
Registrarme............................................................................................................................. 520
Regla de los tercios.................................................................................................................361
Reglas .......................................................................................................................... 77, 92, 216
Rehacer (barra de control estándar o Ctrl+Y)............................................................... 506
Relleno de formas con un mapa de bits ...........................................................................335
Relleno fractal ........................................................................................................................ 248
Rellenos...................................................................................................................................... 110
Rellenos circulares ................................................................................................................ 244
Rellenos de mapa de bits .....................................................................................................245
Rellenos elípticos....................................................................................................................245
Rellenos lineales .....................................................................................................................243
Rellenos lisos...........................................................................................................................243
Renombrar colores con nombre.......................................................................................... 191
Reordenar ítems en la galería.............................................................................................. 102
Reordenar los colores de la línea de color. ...................................................................... 180
Repetir en todas las páginas (Shift+Ctrl+Alt+R) ............................................................ 511
Res. de efecto en vivo por def.: .......................................................................................... 497
Res. efecto bloqueado por def.: ......................................................................................... 497
Resolución de los efectos en vivo ......................................................................................367
Resolución de transparencia .............................................................................................. 484
Restricciones de diseño de botones..................................................................................395
Restringir la línea.................................................................................................................... 162
Resumen...................................................................................................................................473
Resumen de animación de MAGIX Web Designer 11 Premium Flash .................... 459
Resumen de shortcuts del teclado numérico...................................................................132
Resumen del diálogo de exportación GIF, PNG y JPEG............................................... 474
Retina (activado por defecto) ............................................................................................. 281
Revisar ortografía mientras se escribe ..............................................................................515
Revisiones .................................................................................................................................. 89
Rotación................................................................................................................................... 450
Rotación con ángulos exactos (utilizando la barra de información) ......................... 116

Saltos de columna................................................................................................................. 208

Saltos de página..................................................................................................................... 209
Selección de idioma................................................................................................................213
Selección de la ventana que se quiere visualizar ............................................................. 79
Selección de objetos con ayuda de la herramienta de sombras ................................ 261
Selección interna .................................................................................................................... 107
Selección y capas ................................................................................................................... 108
Seleccionar bajo...................................................................................................................... 107
Seleccionar forma de corte.................................................................................................. 140
Seleccionar ítems ................................................................................................................... 102
Seleccionar múltiples puntos de control.......................................................................... 159
Seleccionar objetos................................................................................................................ 106
Seleccionar objetos cortados ............................................................................................... 141
Seleccionar objetos en el ClipView .................................................................................... 141
Seleccionar todo (Ctrl+A) .................................................................................................. 508
Seleccionar todo el objeto de texto ....................................................................................212
Seleccionar todos los objetos ............................................................................................. 108
www.magix.es
 Index 545

Seleccionar un objeto dentro de un grupo ....................................................................... 133

Seleccionar y configurar una impresora ......................................................................... 480
Separadores de menú ............................................................................................................391
Separar una forma .................................................................................................................. 177
Shortcuts de teclado .............................................................................................................. 521
Símbolos de la fuente Font Awesome..............................................................................202
Sincronización de texto ......................................................................................................... 135
Smartshapes .............................................................................................................................171
Sobre las presentaciones .....................................................................................................396
Sobre las Supersites ..............................................................................................................303
Soltar una copia........................................................................................................................110
Sombras ................................................................................................................................... 257
Sombras suaves, texto relleno de color, texto transparente ........................................ 47
Suavizar una línea ....................................................................................................................161
Subrayado de texto ............................................................................................................... 233
Subtítulos de imagen ............................................................................................................288
Superíndice y subíndice ....................................................................................................... 234
Supersites ................................................................................................................................303
Sustitución de archivos de imagen....................................................................................467
Sustitución de los rellenos de mapa de bits....................................................................246
Sustitución de múltiples fotos .............................................................................................. 42
Sustitución de múltiples fotos en simultáneo ................................................................. 331
Sustituir fotos........................................................................................................................... 331

Tab..............................................................................................................................................109
Tabulaciones ............................................................................................................................218
Tabulaciones personalizadas...............................................................................................218
Tabulaciones, márgenes y sangrías ...................................................................................216
Tamaño de foto inicial .......................................................................................................... 332
Tamaño de fuente.................................................................................................................... 46
Tamaño de página ................................................................................................................... 48
Terminología ............................................................................................................................197
Texto ................................................................................................................................. 44, 472
Texto alrededor de objetos .................................................................................................220
Texto dentro de grupos para páginas web...................................................................... 235
Texto en una columna ..........................................................................................................205
Texto girado .............................................................................................................................. 46
Texto siguiendo una curva ..........................................................................................210, 218
Texto simple............................................................................................................................204
Texturas y fotos......................................................................................................................380
Tintes .........................................................................................................................................193
Tipo de documento ................................................................................................................491
Tipo de imagen web..............................................................................................................289
Tipo y tamaño del bisel ........................................................................................................ 378
Tipos de relleno ...................................................................................................................... 239
Tipos de tabulaciones personalizadas...............................................................................219
Tipos de transparencia .........................................................................................................254
Tonalidades ..............................................................................................................................193
Trabajar con colores...............................................................................................................179
Trabajar con fotos.................................................................................................................. 327
546
Trabajar con objetos.............................................................................................................. 106
Trabajar con textos................................................................................................................ 196
Traer al frente (barra de control arreglo o Ctrl+F) ....................................................... 509
Transparencia................................................................................................................ 252, 455
Transparencia con gradación de varios niveles..............................................................254
Transparencia en un grupo..................................................................................................452
Trayectoria invertida ..............................................................................................................155
Tu primera animación .......................................................................................................... 438
Tus propios iconos en las pestañas de los navegadores (favicon)............................. 56

Ubicación de la copia de seguridad..................................................................................... 89

Un ejemplo.............................................................................................................................. 248
Una página web en 6 pasos.................................................................................................... 17
Unir dos líneas .........................................................................................................................152
Unir líneas ................................................................................................................................ 164
URL en Flash ........................................................................................................................... 456
Usar de barras de navegación de plantillas.....................................................................383
Usar fotos como fondo. .........................................................................................................315
Usar fuentes en tu página web .............................................................................................46
Usar la pipeta para escoger colores .................................................................................. 184
Uso de la herramienta de zoom ...........................................................................................80
Uso de las galerías .................................................................................................................. 101
Uso de máscaras con la función..........................................................................................371
Uso de máscaras o regiones ...............................................................................................357
Uso de plantillas, cliparts y widgets .................................................................................... 33
Uso del control de curva....................................................................................................... 162
Utilización de animaciones web......................................................................................... 431
Utilización de fotos como relleno ......................................................................................332
Utilización de la herramienta de fotos..............................................................................353
Utilización de los campos de texto de la barra de información ................................. 160
Utilizar colores habituales para enlaces de sitios web.................................................277
Utilizar máscaras....................................................................................................................526

Variantes de página web...................................................................................................... 514

Variantes múltiples................................................................................................................298
Variantes y barras de navegación...................................................................................... 301
Variantes y fondos de diseño web adaptativo ................................................................316
Variantes y objetos repetidos ............................................................................................. 301
Velocidad de la animación.................................................................................................. 449
Ventajas de la herramienta de fotos .................................................................................353
Ver pestañas de los documentos....................................................................................... 518
Ver una foto ampliada en su tamaño completo.............................................................347
Ver una galería.......................................................................................................................... 96
Vista multipágina ....................................................................................................................517
Vista previa............................................................................................................................. 479
Vista previa de documentos web (F5) ............................................................................ 504
Vista previa de fuente en tiempo real.............................................................................. 200

www.magix.es
 Index 547

Vista previa de la página web (Shift + F5)......................................................................503

Vista previa de tamaño de fuente en tiempo real .........................................................200
Vista previa de tu página web ................................................................................................31
Vista previa de un objeto flash en MAGIX Web Designer 11 Premium. ................ 440
Vista previa en el navegador...............................................................................................462
Vista previa flash ...................................................................................................................504
Visualización del contenido de los pasos........................................................................402
Visualización del punto de anclaje.................................................................................... 224
Visualizar página web...........................................................................................................503
Voltear objetos ........................................................................................................................120

Web Designer y HTML5......................................................................................................463

Web Designer y las barras de navegación...................................................................... 382
Widgets de la galería de diseños...................................................................................... 409
Widgets de otros sitios de widgets....................................................................................415
Widgets de sitios web ......................................................................................................... 408
Widgets y marcadores de posición - todo automático .............................................. 408

Zoom.......................................................................................................................................... 521
Zoom 1:1 ................................................................................................................................... 355
Zoom de foto teniendo en cuenta el contenido............................................................. 372
Zoom y desplazamiento de la página..................................................................................25