WEB

D
 ESIGNER11
P
 REMIUM

Manual en espaol
2

Copyright
Esta documentacin est protegida por ley. Quedan reservados todos los derechos
especialmente los de duplicacin, circulacin y traduccin.

Ninguna parte de esta publicacin puede reproducirse a travs de fotocopias,

microfilm o cualquier otro procedimiento, as como tampoco transferirse a un idioma
utilizable por mquina alguna, especialmente equipos de procesamiento de datos, sin
la aprobacin 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 compaa 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 tcnica 14

Introduccin 16
Qu es MAGIX Web Designer 11 Premium? 16
Por qu Web Designer es tan especial? 16
Una pgina web en 6 pasos 17
Cules son las novedades de MAGIX Web Designer 11 Premium? 18
Diseo de pgina 18
Contenido 19
Publicacin y presentacin 19
Ayuda 21

Primeros pasos 23
Diseo del programa 23
Objetos en la pgina 26
Mens con clic derecho 27
Diseo web basado en objetos 28
La herramienta de seleccin 29
Creacin de una pgina Web 31
Vista previa de tu pgina web 31
Uso de plantillas, cliparts y widgets 33
Galera de diseos 34
Catlogo de contenido online 36
Colores de la pgina web 37
Fondos de pgina web 39
Fotos 40
Texto 44
Tamao de pgina 48
Guardar tu trabajo. Creacin de una pgina Web 49
Grupos 50
Objetos repetidos 51
Creacin de botones, banners y otros grficos web 52
Enlaces, botones y barras de navegacin 53
Tus propios iconos en las pestaas de los navegadores (favicon) 56
Herramientas de dibujo 57
Capas, MouseOver (rollover) y elementos emergentes 65
4

Publicacin de tu pgina web 71

Manejo de documento 73
Iniciar un nuevo documento 73
Abrir un documento existente 73
Compartir documento en mltiples 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 tamao de pgina 82
Pginas mltiples en el documento 83
Guardar el documento 86
Directorios de compatibilidad 86
Cerrar el documento 88
Copias de seguridad automticas 88
Cuadrcula en pantalla 91
Reglas 92
Calidad de imagen 93
La tecla de restriccin 94
Galeras 95
Deshacer y rehacer 104

Trabajar con objetos 106

La herramienta de seleccin 106
Mover objetos 109
Eliminar objetos del documento 113
Duplicar y clonar 113
Mover objetos hacia adelante o hacia atrs 115
Girar utilizando el ratn 115
Cambio del tamao de objetos (escalar) 117
Voltear objetos 120
Extender o reducir objetos 120
Inclinar objetos 121
La herramienta de moldes 122
Ajuste 126
Difuminacin (Feathering) 130
Objetos gua y lneas gua 130
Resumen de shortcuts del teclado numrico 132
Conflictos en el diseo de pginas 132

www.magix.es
 Copyright 5

Agrupar y desagrupar objetos 133

Grupos suaves (soft groups, en ingls) 134
Alineacin 136
Copiar estilos - pegar atributos 139
ClipView 140
Nombrar objetos 141
Objetos repetidos 143
Pies de pgina y objetos que se amplan con la pgina. 146

La herramienta de edicin de formas 149

Dibujar una linea o forma 150
La herramienta de mano alzada y pincel 150
Editar lneas/formas con la herramienta de dibujo libre y pincel 153
La herramienta de lneas rectas y flechas 154
La herramienta de edicin de formas 155
Extender la lnea. 158
Finalizar la lnea 158
Aadir un nuevo punto de control 158
Seleccionar mltiples puntos de control 159
Eliminar puntos 160
Mover puntos de control - Herramienta de edicin de formas 160
Suavizar una lnea 161
Restringir la lnea 162
Convertir una lnea recta en una curva (y viceversa) 162
Cambiar curvas 162
Unir lneas 164
Cambiar el ancho de lnea (grosor) 165
Galera de lneas 166

Manejo de formas 169

Herramientas de dibujo y forma 169
Crear rectngulos y cuadrados 169
Crear crculos y elipses 170
Smartshapes 171
Edicin de smartshapes 171
Crear polgonos y estrellas 173
Combinar formas 176

Trabajar con colores 179

La lnea de colores 179
Aplicar colores de relleno y lnea con arrastrar y soltar 181
6

Editar el color de un objeto 182

Aplicacin 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
Creacin de tus propios esquemas de colores 187
Creacin de nuevos colores con nombre 188
Reemplazar colores 189
Editar colores con nombre 190
Colores normales, tintes, tonalidades y colores vinculados 193
Creacin de un tinte, una tonalidad o un color vinculado 194

Trabajar con textos 196

Introduccin 196
Terminologa 197
La herramienta de texto 197
Men de fuente 199
Fuentes de Google 201
Smbolos 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 ortogrfico 213
Autocorreccin 214
Buscar y reemplazar 215
Cmo sincronizar el texto empleando Grupos suaves 216
Tabulaciones, mrgenes y sangras 216
Texto alrededor de objetos 220
Grficos anclados 222
Grficos incrustados 225
Lista con vietas y numeradas 225
Estilos de texto 227
Aplicar estilos de texto 232
Enlaces de texto 235
Texto dentro de grupos para pginas web 235
Copiar estilos de texto 236
Copiar / Pegar texto con formato (RTF) 237
Incrustacin de fuentes en el documento 237
www.magix.es
 Copyright 7

Incrustacin de fuentes en un sitio web 237

Permisos de fuentes 238

La herramienta de relleno 239

Crear un relleno de color con gradacin 239
Tipos de relleno 239
Barra de informacin de herramienta de relleno 241
Rellenos lisos 243
Rellenos lineales 243
Rellenos circulares 244
Rellenos elpticos 245
Rellenos de mapa de bits 245
Relleno fractal 248
Gradaciones de color de varios niveles 249
La galera de rellenos 250

Transparencia 252
Aplicar transparencia plana 253
Aplicar transparencia con gradacin 253
Transparencia con gradacin de varios niveles 254
Tipos de transparencia 254
Perfil 255
Mapas de bits 256
Control deslizante / resolucin 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
Seleccin 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

Mscaras 267
Crear una mscara 267
Las herramientas de regin de foto y mscara 267
Editar mscara. 268
Mscaras suaves 269
Operaciones que utilizan la mscara 269
Copiar formas a la capa de mscara 271

Dilogo de propiedades web 272

Pestaa Enlace 273
Pestaa Pgina web 279
Pestaa Pgina 282
Pestaa Imagen 285
Propiedades de MouseOver (animaciones web) 289
Pestaa Marcador de lugar 290
Animacin web 294
Objetos sticky y stretchy 294
Pestaa Publicar 294
Pestaa Analytics 296

Diseo web adaptativo 297

Acerca de RWD 297
Variantes mltiples 298
Crear pginas web RWD desde las plantillas 299
Crear sitios web RWD desde sitios existentes 299
Compartir a travs de variantes 300
Variantes y objetos repetidos 301
Variantes y barras de navegacin 301
Publicacin 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 pgina 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 pgina o de tablero de dibujo 315
Variantes y fondos de diseo web adaptativo 316
Desplazamiento de la parte superior de la pgina 317

Publicar pgina web 318

Publicacin al sitio web TaskPilot M 318
Publicacin en un alojamiento web alternativo 320
Inclusin de la pgina web en la galera de usuarios 324
Explorar espacio web 324
Publicacin rpida (solo archivos modificados) 325
Guardar la configuracin de publicacin en el documento 325
Guardar perfiles 326
Documentos web y PDF 326

Trabajar con fotos 327

Introduccin 327
Imgenes de alta resolucin 327
Objetos de fotos 328
Grupos de foto 329
Importacin de fotos 330
Copias de memoria cero 332
La galera de mapa de bits 333
Archivos JPEG integrados 336
Calidad de visualizacin de fotos 337
Guardar y exportar fotos 338
Atributos de la edicin de fotos 340
Editar el contorno de las fotos 341
Recortar fotos 341
Recortar fotos con una mscara 342
Herramienta Capturar pantalla 342
Colorear fotos 344
Cambiar el tamao, rotar y reposicionar la foto dentro de su propio marco 344
Enderezar horizonte 346
Ver una foto ampliada en su tamao completo 347
Darle el tamao completo a una foto 347
Optimizacin de fotos y mapas de bits 347
Convertir objetos o dibujos a mapas de bits 350
Documentos fotogrficos 351
10

Edicin de archivos de fotos 352

La herramienta de fotos 353

Introduccin 353
Utilizacin de la herramienta de fotos 353
Funciones comunes para fotos 354
Herramienta de optimizacin 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 tamao teniendo en cuenta el contenido 368
Creacin de panormicas 373

Herramienta de extrusin 3D 376

Extrudir una forma 376
Barra de informacin de Herramienta de extrusin 377
Texturas y fotos 380
Extrudir texto 380
Copiar atributos de una extrusin 3D 381
Insertar sombras detrs del objeto 381

Barras de navegacin 382

Web Designer y las barras de navegacin 382
Usar de barras de navegacin de plantillas 383
Dilogo Propiedades de la barra de navegacin 384
Barra de navegacin del sitio 386
Barras de navegacin de botn nico 387
Botones y mens 389
Actualizacin de la barra de navegacin en todas las pginas 393
Edicin en el lienzo 393
Cambio de la fuente de los botones de la barra de navegacin 394
Importacin e insercin de barras de navegacin 394
Creacin de barras de navegacin propias 394

Presentaciones como pginas web 396

Sobre las presentaciones 396
Pasos y capas 396
La barra de herramientas "Presentacin" 398
Creacin de una presentacin 399
Manejo de los pasos de presentacin 402

www.magix.es
 Copyright 11

Agregado de nuevas pginas de presentacin 404

Creacin de listas con nmeros y vietas 404
Eliminar pginas de presentacin 404
Enlaces al paso siguiente/anterior 404
Aplicacin de transiciones a pasos de presentaciones 405
Aplicacin de transiciones a pginas de presentaciones 406
Informacin de presentacin avanzada 406

Widgets de sitios web 408

Widgets y marcadores de posicin - todo automtico 408
Widgets de la galera de diseos 409
Agregado de archivos de pelculas y animaciones 412
Widgets de otros sitios de widgets 415
Cambio de tamao de widgets 415
Insercin manual de marcadores de posicin para widgets 417
Ms informacin 417
Insercin manual de un mapa de Google 417

Galera de pginas y capas 419

La galera de pginas y capas 419
Pginas 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

Utilizacin de animaciones web 431
Funciones MouseOver 432
Animaciones de clic/toque 432
Animaciones de aparicin 432
Combinaciones de animaciones y tipos de objetos 434

Animaciones en Flash 435

Introduccin 435
Principios bsicos 437
Tu primera animacin 438
12

Exportacin de un archivo Flash 440

Exportacin de animaciones como AVI 441
La galera de frames de animacin 442
Fotos 444
Duracin de frames para pelculas Flash y pasos intermedios 447
Recortar y cortar 448
Velocidad de la animacin 449
Fluidez de la animacin (smoothness) 450
Rotacin 450
Grupos 452
Qu funciones de MAGIX Web Designer 11 Premium son compatibles con Flash?453
El color se transforma el color de la animacin cambia 455
Transparencia 455
URL en Flash 456
Funciones de Flash avanzadas 457
Resumen de animacin de MAGIX Web Designer 11 Premium Flash 459
Crear GIF animados 460
Propiedades de GIF animados 461

Importacin y exportacin 463

Indicaciones generales sobre la exportacin e importacin 463
Web Designer y HTML5 463
Importar y exportar formatos de archivo compatibles 464
Importacin de archivos 467
Exportacin de archivos 470
Resumen del dilogo de exportacin GIF, PNG y JPEG 474

Imprimiendo 480
Mostrar bordes de impresin 480
Seleccionar y configurar una impresora 480
El dilogo de impresin 481
Opciones de impresin: Pestaa Salida 483
Opciones de impresin: Pestaa Diseo de la impresin 485

Personalizacin de Web Designer 487

Cambio del documento de plantilla en blanco 487
Opciones del men "Herramientas" 487
Pestaa General 488
Pestaa Cuadrcula y regla 492
Pestaa Ratn 493
Pestaa Tamao de pgina 495
www.magix.es
 Copyright 13

Pestaa Copias de seguridad 496

Pestaa efectos y plug-ins 496
Barras de control 497

Mens y shortcuts de teclado 501

Introduccin 501
Men Archivo 501
Men Edicin 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 tcnica
Estimado usuario de MAGIX:

Nuestro objetivo es ofrecerte en todo momento una ayuda rpida, cmoda y

resolutiva. Por ello ponemos a tu disposicin una amplia oferta de servicios:

Asistencia web ilimitada:

Como cliente MAGIX registrado, dispones de asistencia web ilimitada a travs
del portal de servicios de MAGIX de diseo 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 condicin 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 rene a ms de 120.000 miembros y ofrece la oportunidad de hacer
preguntas acerca de los productos MAGIX o buscar preguntas para temas
especficos a travs de la funcin de bsqueda. Adems de preguntas y
respuestas, encontrars un glosario, vdeos de ejemplo (tutoriales) y un foro de
debate. Los numerosos expertos que encontrars en www.magix.info te
garantizan respuestas rpidas, incluso en pocos minutos.
Asistencia por correo electrnico para productos MAGIX:
Para cada nuevo producto de MAGIX, recibirs a partir de la fecha de compra y
de forma automtica, 12 meses de soporte tcnico gratuito va e-mail.
Asistencia Premium por correo electrnico:
Para asistencia especial o para asistencia tcnica 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 pgina de asistencia de MAGIX y haz clic tras el iniciar sesin en el "Adquirir
cdigo de acceso". El servicio abarca un caso de un problema especfico 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 nmero de serie. El nmero de serie de tu producto se
encuentra en la cubierta del CD o en la parte interior de la caja del DVD.

Servicio telefnico de atencin al cliente:

Aparte de los numerosos servicios gratuitos podrs utilizar el servicio de pago
de atencin telefnica al cliente.

Un resumen de los nmeros de telfono de la asistencia tcnica lo puedes encontrar

aqu:

http://support.magix.net/contact/es
www.magix.es
 Asistencia tcnica 15

Correo: MAGIX Development Support

01194 Dresden
Alemania

Por favor, ten preparada la siguiente documentacin al realizar tu llamada:

Cul es el programa MAGIX (versin) que ests utilizando?

Qu sistema operativo utilizas?
Cul es el nombre y resolucin de la tarjeta grfica?
Cul es el nombre de la tarjeta de sonido? O ests utilizando el sistema de
sonido integrado de tu ordenador?
Para software de vdeo: cul es el nombre de la tarjeta de vdeo o tarjeta
Firewire?
Cul es el tamao de la memoria RAM?
Qu versin de DirectX tienes instalada?

MAGIX Ventas

Nmero de telfono: +34 911 875 676

MAGIX Ventas est disponible los das laborales para las consultas y problemas
siguientes:

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

Introduccin
Es evidente que la gran mayora de pginas web tienen una naturaleza grfica. La
presentacin de tu pgina web es muy importante. T deseas una pgina web con
una imagen competente y profesional. Para crear tu pgina, creemos que no es
necesario usar gran cantidad de herramientas, tanto para la edicin grfica como para
HTML. Creemos que debes tener libertad total para incluir cualquier tipo de texto,
grfico o foto en cualquier lugar de la pgina.

La creacin de pginas web debera ser como la creacin de archivos PDF: no

deberas tener la necesidad de saber qu pasa 'bajo el cap'. En el caso de los archivos
PDF, no debes editarlos directamente. Tampoco deberas tener la necesidad de saber
sobre HTML al crear tu pgina web.

Qu es MAGIX Web Designer 11 Premium?

MAGIX Web Designer 11 Premium es una solucin completa para el diseo de
pginas web. Te ofrece la libertad de elegir si deseas realizar el diseo de tu pgina
web desde cero o si deseas personalizar cualquiera de las numerosas plantillas del
programa a tu gusto. Gracias a los aos de experiencia con la tecnologa "Xtreme",
tambin es posible crear animaciones Flash, editar fotos, y optimizar o cambiar los
esquemas de color de las pginas web con slo unos clics. Tambin puedes obtener
una vista previa de tu pgina web y subir tu proyecto directamente desde MAGIX
Web Designer 11 Premium a un servidor FTP para pasar de la creacin a la publicacin
en pocos segundos. Gracias a las funciones prcticas, como la insercin de objetos de
marcador de posicin, tu sitio web obtendr rpidamente 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 diseo web de forma libre
que permite una verdadera libertad al disear una pgina web cuyo resultado es lo
que ves. En otras palabras, puedes posicionar el texto, grficos y fotos en cualquier
lugar de la pgina, configurar cualquier tamao, ngulo, superposicin, transparencia,
etc. y Web Designer producir una pgina HTML precisa que funcionar
perfectamente.

Web Designer puede hacer cosas que se consideran casi imposibles con otros
software de autora web, como hacer fluir el texto alrededor de fotos o formas
irregulares. Incluye herramientas avanzadas de vectores grficos para que puedas
dibujar lo que desees: desde formas simples hasta logos y grficos complejos.
Tambin cuenta con optimizacin automtica de grficos (no slo produce imgenes
de resolucin optimizada, sino que tambin detecta los elementos que se repiten en
toda la pgina web, lo que produce pginas ms rpidas y ms optimizadas).

www.magix.es
 Introduccin 17

Es compatible con capas CSS con caractersticas avanzadas, como transparencia

(incluyendo transparencia con gradacin), efectos mouse-over y ms. Crea pginas
web HTML totalmente compatibles con los exploradores, las plataformas y XHTML.

Adems, Web Designer es probablemente la herramienta de autora web ms fcil de

aprender.

Web Designer est pensado para diseadores grficos que no quieren aprender
HTML ni lenguajes de scripting. Para diseadores grficos, es la herramienta
prototipo para pginas web rpidas perfecta.

Tambin est pensado para principiantes que simplemente quieren disponer de la

forma ms fcil de crear pginas web de aspecto profesional.

Web Designer no incluye herramientas de programacin, edicin de scripts ni una

"vista HTML". Nuestra filosofa de diseo es la siguiente: no necesitas saber el
lenguaje de programacin de PDF para crear un PDF. Por lo tanto, tampoco debes
conocer nada acerca de HTML o Javascript para poder crear pginas web geniales.

Una pgina web en 6 pasos

Para quienes no tienen mucha paciencia (la mayora 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 introduccin bsica como de una pgina web real con
la que puedes experimentar. Tambin puedes encontrar este documento de ejemplo
en la galera de diseos.

Haz clic en botn, abre la categora INTRODUCCIN y haz doble clic en el primer
documento.
Aqu puedes averiguar como cambiar los colores de la pgina web, corregir el texto,
arrastrar y soltar fotos, mover objetos alrededor de la pgina y ms.

Deshacer
Recuerda que puedes deshacer cualquier cambio, utilizando el botn de
deshacer o Ctrl+Z. Si mantienes pulsado el botn puedes deshacer todas las
acciones hasta el comienzo.
18

Cules son las novedades de MAGIX Web

Designer 11 Premium?
MAGIX Web Designer 11 Premium presenta algunas geniales caractersticas nuevas
para crear sitios de ltima tecnologa con estilo contemporneo (como objetos
sticky y fondos que pueden expandirse al ancho completo). Adems, ahora tambin
podrs editar tus sitios online con cloud.xara.

Diseo de pgina
Objetos sticky (solo versin Premium)
Estos son objetos que puedes dejar fijos en un lugar mientras que la pgina
subyacente se desplaza. Un buen ejemplo es la barra de navegacin que puedes fijar
en la parte superior de la pgina para que cuando los visitantes se desplacen hacia
abajo puedan seguir navegando fcilmente a otras pginas sin tener que regresar a la
parte superior. En la versin 11 cualquier objeto puede fijarse en cualquier lugar de la
pgina.

Fondos stretchy (solo versin Premium)

Los diseos de sitios web sin lmites evidentes entre las pginas son muy populares
actualmente; en este tipo de diseo en general vers un fondo de pgina que cubre
toda la ventana del navegador y se extiende para ocupar su ancho. En Web
Designer 11 puedes hacer que cualquier rectngulo o imagen se extienda para cubrir la
ventana del navegador tanto en sentido horizontal como vertical.

Nuevas posibilidades de animacin

Un nuevo dilogo de animacin web ofrece nuevas opciones de animacin potentes y
fciles de aplicar. Ahora podrs configurar los objetos para que:

Tengan una animacin al pasar el cursor sobre ellos (MouseOver)

Tengan una animacin 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 pgina (solo Premium).
Tengan una animacin si se les hace clic (o se los toca en un dispositivo tctil)
(solo versin Premium)

Adems, hay nuevos tipos de animacin muy atractivos para las opciones de
MouseOver y clic, como tambaleo y rebote.

www.magix.es
 Introduccin 19

Mejoras en el manejo del texto

Expansin de la autocorreccin/abreviaturas Crea tu propia lista de abreviaturas
que se ampliarn automticamente cuando escribas, por ejemplo, XWD podra
ampliarse a Xara Web Designer a medida que introduzcas el texto. Tambin es
muy til para smbolos, por ejemplo, puedes configurar que la palabra yen se
convierta en el smbolo . (Solo versin Premium)
Autocreacin de enlaces cuando escribes una URL, por ejemplo, si escribes
xara.com se crear automticamente un enlace al sitio web de Xara.
Opcin de color de fondo de texto para que puedas destacar fcilmente 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 an no los tienen, como
PDF importados)
Ms informacin detallada sobre permisos para la incrustacin de fuentes en
Informacin del documento
Exportacin precisa de texto con kerning

Contenido
Nuevas plantillas
Seis nuevos temas web en Web Designer, ms otros diseos actualizados para que
incluyan variantes para el mvil. Ms de 30 nuevos temas web en Web Designer
Premium con hasta 16 diseos de pgina, todos con variantes para el mvil
(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.

Publicacin y presentacin
Edicin online con cloud.xara (beta)
Una manera ultrasencilla de visualizar, editar y actualizar el contenido de tu pgina
web de Xara a travs del navegador de tu equipo o tablet (s, tambin para tablets
Mac y Android!) y desde cualquier lugar del mundo, y para republicar tu sitio web.

Para diseadores comerciales:

Otorga derechos de edicin controlada a tus clientes, es decir, permteles editar

texto y reemplazar imgenes
20

Ests debatiendo con tu cliente por telfono sobre un nuevo diseo? Ahora
puedes actualizar la versin 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 imgenes y republica

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

Sincronizacin 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 tambin en el Web Designer de los otros equipos.

Esto tiene tambin otra ventaja adicional: Dropbox y Google Drive conservan
versiones anteriores de tus archivos y permiten volver a ver y regresar fcilmente 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 fcil de
guardar mltiples versiones de los archivos de tu sitio web, y de ahorrar espacio.

Publicacin segura va FTP

Web Designer 11 es compatible con la publicacin va SFTP y FTPS.

Mejoras en la importacin y exportacin

Importacin de PDF:
Mejores posibilidades de edicin de texto (reconstruccin mejorada de texto,
mrgenes, importacin mejorada de enlaces de texto, importacin mejorada de
subrayado)
Compatibilidad mejorada para la importacin de PDF con subgrupos de fuentes
incrustadas, cuando las fuentes no estn instaladas localmente
Se han efectuado pequeas mejoras y se han solucionado problemas menores.

Otras opciones de importacin/exportacin

Opcin de exportar una versin para Retina de un grfico al exportar una versin
de 96 dpi (solo versin Premium)
Mejoras a la importacin 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
 Introduccin 21

Premium incluye el alojamiento web avanzado "M" de TaskPilot gratis por un ao (por
un valor de 1,99 $ por mes). Esto ofrece 2 GB de alojamiento web gratis y un ao
gratis de un nombre de domino (p. ej., tunombre.com o .es o .de, etc.) Adems, si
publicas en TaskPilot puedes proteger tus pginas web con contrasea.

Otras pequeas mejoras

Los objetos se redimensionan automticamente al ancho de la columna si los
insertas en una columna de texto
Actualizacin de los smbolos de la fuente Awesome (una forma rpida y fcil
de insertar smbolos de la amplia y creciente seleccin de fuentes Awesome.
Podrs ver el conjunto completo a travs del men Insertar).
Posibilidad de controlar los espacios entre las pginas de los supersites
verticales y horizontales (solo versin Premium)
Uso offline del cuadro de dilogo de opciones de exportacin web
Si se incrustan los contornos, las fuentes tendrn el aspecto correcto tambin en
documentos importados que no cuenten con esas fuentes; por ejemplo, de
documentos PDF importados que, en su mayora, contienen contornos de letras
incrustados.
Nueva opcin de Arreglo > Combinar formas > Entrecruzar todas las formas (las
reas que se superponen se convierten en formas independientes) (solo versin
Premium)
Compatibilidad mejorada en las herramientas de dibujo para dispositivos tctiles
modernos, incluido Microsoft Surface (solo versin Premium)
Pequeas mejoras en los mens desplegables
Algunas mejoras en los widgets de la galera de fotos (ahora puedes fijar el
tamao de los popups)
Nuevo panel de texto para fotos SmartShape

Ayuda
Si necesitas ayuda para el manejo de este programa, a continuacin encontrars
informacin 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
pginas de informacin.
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 descripcin 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. Tambin cuando colocas el cursor sobre los botones
y los controles, el programa te informa sobre lo que hacen. Para ms detalles,
consulta la barra de estado.
Consejos para herramientas (tooltips) (en la pgina 22): si colocas el cursor del
ratn sobre un botn o control por un momento, aparecer un mensaje
informndote de su funcin.
22

Mens: si deseas saber cul es la funcin de un men, seleccinalo y pulsa "F1".

Cajas de dilogo: si quieres saber lo que hace una caja de dilogo o cmo usarla,
haz clic en AYUDA.
Vdeos: usa la opcin del men "AYUDA" > "PELCULAS ".

Informacin de documento
"ARCHIVO" > "INFORMACIN DE DOCUMENTO" muestra informacin sobre el
documento seleccionado como el tamao 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 dilogo de informacin
de documento.

Consejos de herramientas
Cuando te desplazas sobre un botn, el
consejo de herramienta te informa la
funcin de ese botn.

Acerca de Web Designer

Escoge AYUDA > ACERCA DE MAGIX WEB DESIGNER 11 PREMIUM . Esto te mostrar
informacin general sobre el programa. Si contactas con la asistencia tcnica de Xara,
es posible que se te solicite esta informacin.

www.magix.es
 Primeros pasos 23

Primeros pasos
Esta seccin te ofrece una idea general de las funciones principales de Web Designer.
Las secciones siguientes te darn ms detalles sobre cada una de las herramientas.

Diseo del programa

Barra de informacin: cambia con cada herramienta

Barra de herramientas de la pgina web
Zoom
Galera de diseos (barra de galeras)
Galera de pginas y capas (barra de galeras)
Herramienta de seleccin
Herramienta de edicin de fotos
Herramientas de dibujo
Herramienta de texto
Herramienta de sombra
24

Pestaas para todos los documentos abiertos: el icono identifica el tipo de

documento.
Lnea de color

Nota: todas las barras de informacin de Web Designer han mejorado la

renderizacin de texto para facilitar la visualizacin, 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 pgina
web. Tres de estas opciones tienen barras desplegables que se muestran cuando
colocas el cursor del ratn sobre ellas y te ofrecen ms funciones.

Exportar y previsualizar la pgina web

Propiedades del enlace
Opciones de pgina web
Exportar

Coloca el cursor sobre cada botn de la barra desplegable para obtener un consejo de
herramienta con la descripcin del botn.

Hay dos maneras de crear una pgina web. Se puede comenzar con una plantilla
diseada previamente y personalizarla con tus propios textos, fotos y esquema de
colores. O se puede crear una pgina web desde cero, colocando todos los elementos
requeridos, texto, grficos y fotos en el lugar que quieras.

Nota: por defecto, cuando Web Designer abre un documento nuevo, muestra solo
una pgina. Para ver todas las pginas en tu documento de pgina web, haz clic
derecho en una pgina y selecciona VISTA DE PGINA MLTIPLE . Ahora puedes
desplazarte de arriba a abajo por la ventana de Web Designer para ver todas las
pginas en el documento.

www.magix.es
 Primeros pasos 25

Zoom y desplazamiento de la pgina

Estas funciones comunes se hacen de manera sencilla:

Para ampliar o alejar con el zoom, mantn "Ctrl" pulsado y utiliza la rueda del
ratn
Para desplazar la pgina, presiona la rueda del ratn y muvelo (la rueda
tambin funciona como un botn)
Para desplazarte por la pgina usa la rueda del ratn (o las barras de
desplazamiento, claro)

Los documentos web se visualizan por

defecto en modo de pgina nica y los
documentos de impresin en modo de vista
multipgina. Cambia de modo de
visualizacin haciendo clic derecho en la
pgina o tablero de dibujo y seleccionando o
desactivando VISTA MULTIPGINA del men
desplegable. A la izquierda se muestra un
ejemplo de vista multipgina.

Puedes arrastrar y soltar elementos entre

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

La pgina 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 pginas. El rea del tablero de dibujo es til como lugar
para mantener temporalmente grficos de trabajo, fotos u otros objetos. Estos objetos
no son exportados como parte de tu pgina web, a menos que los sites 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 pgina web.

Barras desplegables
Algunas herramientas de la barra de herramientas principal estn agrupadas en un
solo icono. Estos iconos cuentan con un pequeo tringulo indicador en la esquina
inferior derecha y, cuando pasas el cursor del ratn por estos iconos, aparece una
barra desplegable. La barra contiene otros iconos de herramientas que pertenecen a
dicho grupo. Simplemente, mueve el cursor del ratn 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 vers ese icono sealado
en la barra de herramientas principal.

Tambin 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 captulo Personalizacin en el manual en pdf para ms informacin sobre

las barras desplegables.

Objetos en la pgina
Si personalizas una plantilla o creas tus propios grficos desde cero, puedes girar,
redimensionar y posicionar cualquier cosa que desees en la pgina. Puedes
redimensionar la pgina fcilmente al tamao que quieras y aadir nuevas pginas
web a tu gusto. Ciertas caractersticas, como el cambio de esquemas de colores,
funcionan a travs de todas las pginas simultneamente.

Estos son los tipos de elementos de pgina bsicos:

Texto: al usar la HERRAMIENTA DE TEXTO puedes crear todo tipo de ttulos y

columnas de texto e incluso bloques de texto que fluyen de un bloque a otro.
Tambin puedes crear listas con vietas o numeradas. La barra de informacin
de la HERRAMIENTA DE TEXTO proporciona controles de fuente, tamao,
espaciado de lnea y ms. Puedes redimensionar el texto usando la
HERRAMIENTA DE SELECCIN o seleccionando el texto de la manera normal y
escogiendo un punto o tamaos de pxeles alternativos. Tambin puedes incluso
girar el texto desde cualquier ngulo, y usando CONTORNEAR TEXTO (haz clic
derecho en un objeto para ver esta opcin) puedes hacer fluir el texto
automticamente alrededor de objetos (p. ej. fotos) en la pgina.
Grficos: cualquier tipo de logo, ttulo y la mayora de los botones que aparecen
en tu pgina web son grficos. Web Designer es un programa de grficos
vectoriales, lo que significa que puedes corregir la forma, girar y redimensionar
tus objetos grficos sin prdida de calidad (a diferencia de herramientas de
edicin y retoque fotogrfico como Photoshop). Y aunque no hay ningn
estndar de grficos vectoriales para pginas web (para web todos los grficos
tienen que ser formatos JPG, GIF o PNG) Web Designer crea automticamente
el formato y resolucin adecuados. Por ejemplo, si quieres crear un panel de
color para colocar detrs tu texto, lo haras dibujando un rectngulo o el objeto
de rectngulo con esquinas redondeadas en la pgina, y colocndolo detrs del
texto. Cuando exportas tu pgina web, se convierte automticamente en una
imagen grfica PNG con la resolucin adecuada.
Fotos: hay pocas pginas web que no contengan algn tipo de foto. MAGIX
Web Designer 11 Premium tiene una gran gama de herramientas de retoque de
fotografas. Puedes arrastrar y soltar fotos directamente desde tu cmara o
desde la ventana del explorador de archivos, girarlas, optimizarlas, recortarlas, y
www.magix.es
 Primeros pasos 27

Web Designer genera automticamente la resolucin de imagen JPG adecuada.

Sustituir fotos existentes en plantillas es tan fcil como arrastrar y soltar, y
puedes cambiar sencillamente el tamao y el ngulo de las fotos "dentro" de su
marco. Puedes crear fcilmente fotos en miniatura sobre las que puedes hacer
clic para que se abra una versin ampliada y puedes incluir opcionalmente
controles de galera que permiten a los visitantes navegar por tus fotos o ver un
pase de fotos automtico.
Marcadores de posicin: estos son objetos grficos en la pgina que
representan el tamao y la posicin de "widgets" dinmicos como animaciones
flash, pelculas o formas. Al exportar tu sitio, el grfico del marcador de posicin
es reemplazado por el cdigo requerido para hacer que el widget funcione de
modo que el widget aparece en la misma posicin en tu pgina. Consulta el
captulo Widgets de pgina web (en la pgina 408) en el manual en pdf para
ms detalles.

Mens 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
rectngulo que acabas de dibujar, el men desplegable te permitir realizar acciones
solo relacionadas con un rectngulo.

Si haces clic derecho sobre una foto, sin embargo, algunas de las opciones del men
que aparecen sern tiles solo para fotos, mientras que otras sern similares a
acciones que puedes realizar en un rectngulo. Las operaciones especficas para el
objeto se encuentran en la parte superior de la lista del men de clic derecho, por
ejemplo, en el caso del rectngulo, las tres primeras acciones pueden utilizarse
solamente en rectngulos.

Tambin puedes hacer clic derecho sobre la pgina y el tablero de dibujo para ver un
men con las operaciones relacionadas con el fondo de pgina o de tablero.

Si seleccionas ms de un objeto y haces clic derecho, el men contendr acciones

especficas para mltiples 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, vers acciones especficas
para un grupo.

Te recomendamos hacer clic derecho sobre cualquier objeto o mltiples objetos en el

espacio de trabajo para acceder al men especfico de esos objetos. Cuando lo hayas
probado algunas veces, sabrs que acciones puedes realizar rpidamente con estos
mens.
28

Diseo web basado en objetos

Todo los tipos de elementos descritos ms 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 pgina, que luego se respetar con
exactitud en la pgina web final.

La HERRAMIENTA DE SELECCIN puede ser utilizada para seleccionar cualquier

objeto en la pgina y para mover (simplemente arrstralo), redimensionar o
rotar los objetos.

Puedes ajustar el orden de las capas (es decir , si un objeto aparece al frente o detrs
de otro/s en la pgina), haciendo clic derecho y seleccionando ARREGLO o utilizando
las opciones del men ARREGLO. Con la HERRAMIENTA DE SELECCIN puedes
redimensionar objetos estirndolos desde las esquinas. Puedes rotar cualquier objeto
arrastrando desde dentro de los controles deslizantes de las esquinas. Y aunque las
pginas web no admiten textos rotados, Web Designer sabe cmo crear
automticamente la imagen grfica apropiada para que la pgina se vea siempre bien.

Para agregar texto a tu pgina, selecciona la HERRAMIENTA DE TEXTO y haz clic

en cualquier lugar de la pgina y empieza a escribir el texto.

Tambin puedes crear columnas de texto, pulsando y arrastrando horizontalmente la

HERRAMIENTA DE TEXTO , o arrastrando diagonalmente las reas de texto. Ve a la
seccin de texto (en la pgina 227) en el manual en pdf para ms detalles y al
captulo Manejo de texto (en la pgina 196) para una informacin detallada acerca de
las funciones de texto de MAGIX Web Designer 11 Premium.

Puedes usar herramientas de dibujo para crear rectngulos normales

o con esquinas redondeadas, crculos y elipses, y cualquier tipo de
forma que desees, utilizando la HERRAMIENTA DE EDICIN DE FORMA .
Ve a la seccin herramientas de dibujo (en la pgina 57) en el
manual en pdf para ms detalles.

Orden de los objetos

Todos los objetos en la pgina estn 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 posicin de colocacin con clic derecho y
seleccionando ARREGLO o usando las opciones del MEN ARREGLO .

Por ejemplo, cuando dibujas un nuevo rectngulo siempre aparece para cubrir todos
los objetos que estn detrs. Con clic derecho y seleccionando ARREGLO o
presionando Ctrl+B (o el men ARREGLO > LLEVAR ATRS) el objeto se mueve detrs
de todo lo dems. De modo similar, Ctrl+F trae cualquier objeto seleccionado hacia
delante, quedando delante de todo lo dems.
www.magix.es
 Primeros pasos 29

Hay una complicacin aadida: 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 seccin de capas (en la pgina 65) en el manual en pdf para
ms detalles.

La GALERA DE PGINAS Y CAPAS te permite ver fcilmente y ajustar el orden de

apilamiento de los objetos y capas. Los objetos se muestran en orden de adelante
hacia atrs en la galera. Lee el captulo Galera de pginas y capas (en la pgina 419)
en el manual en pdf para ms informacin.

La herramienta de seleccin
Esta herramienta es de uso general y te permite seleccionar, mover,
redimensionar y girar todos los objetos en tu pgina web.

Puedes hacer todas estas cosas simplemente estirando los objetos en la pgina, o con
los controles deslizantes de seleccin alrededor del objeto, o puedes introducir
valores numricos 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, tambin 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 rectngulos y rectngulos con esquinas redondeadas tienen ocho controles
deslizantes para poder arrastrarlos y redimensionarlos. Otros objetos, como grupos,
bloques de texto o fotos, poseen slo 4 controles y no pueden ser estirados (porque
se deformaran).

Desplazar objetos
Las teclas de flechas pueden ser utilizadas para desplazar los objetos seleccionados
pxel a pxel. Si mantienes pulsada a la vez la tecla Shift, los objetos se desplazan de
10 en 10 pxeles.
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 seleccin cambien a controles de rotacin, con los
que podrs estirar o hacer girar el objeto. O, cuando se ven los controles de esquinas,
moviendo el cursor de ratn dentro de los controles de esquinas hasta que veas que
el cursor cambia a un indicador de rotacin , entonces tambin podrs arrastrar para
hacer girar el objeto seleccionado.

Tambin puedes rotar casi todo en Web Designer, incluyendo fotos, ttulos, bloques
de texto, y simplemente funcionar. Debido a que los navegadores web no pueden
mostrar texto en ngulo, Web Designer convertir automticamente cualquier texto
rotado en un grfico.

Barra de informacin
Cuando un objeto es seleccionado, la barra de informacin en la parte superior de tu
documento muestra todos los controles relevantes para la herramienta actual. Esta
barra cambia segn la herramienta seleccionada. Esta es la barra de informacin de la
herramienta de seleccin:

La barra de informacin justo encima de tu documento, te muestra los controles para la

herramienta seleccionada.

Puedes introducir valores numricos en cualquier campo, p. ej. para reducir el tamao
de un objeto un 20%, puedes introducir 80% en el campo del ancho (que es un
tamao porcentual). Con el candado pequeo determinas si los cambios de ancho y
alto se cambian a la vez.

Copiar objetos
Puedes utilizar las tpicas 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 rpida de copiar un elemento es, simplemente, arrastrarlo con el
botn derecho del ratn.

Tambin puedes copiar y pegar una pgina en cualquier parte del documento desde el
documento actual o en otro documento: ver Copiar y pegar (en la pgina 84) pginas.

www.magix.es
 Primeros pasos 31

Creacin de una pgina Web

Hay dos modos de crear una nueva pgina web. Se puede comenzar con una plantilla
prediseada y luego personalizarla con textos, fotos y combinacin de colores. O
creando una pgina web desde el principio, colocando todos los elementos
requeridos, texto, grficos, fotos y marcadores de posicin en el lugar que quieras de
la pgina.

Los marcadores de posicin son objetos grficos en la pgina que sern sustituidos en
la pgina web final por una serie de elementos de pgina web como animaciones
Flash, vdeos de YouTube, mapas interactivos, fragmentos de HTML y widgets de
todo tipo. Lee las secciones posteriores en el correspondiente captulo del manual en
pdf para ms informacin acerca de los marcadores de posicin.

Vista previa de tu pgina web

Cuando creas tu pgina web en Web Designer los documentos con los que trabajas
muestran una vista previa exacta esttica, 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 PGINA : exporta y muestra la vista previa de la pgina

actual nicamente. Esta opcin es til si cuentas con un sitio muy
grande que demora mucho en exportarse en su totalidad. De esta
forma, puedes ajustar rpidamente la vista previa de la pgina en la que
ests trabajando, sin tener que exportar el resto del sitio.
VISTA PREVIA DE PGINA WEB : exporta todas las pginas de tu sitio y
luego muestra la ventana de vista previa. As, todas las pginas y
enlaces de tu sitio deberan funcionar.

Los botones de navegacin en la barra superior de la ventana de vista previa te

permite avanzar o retroceder, como en un navegador web, y el botn de Inicio
permite regresar a la pgina en la que comenzaste la vista previa.

VISTA PREVIA DE PGINA : exporta y muestra la vista previa de la pgina actual

nicamente. Esta opcin es til si cuentas con un sitio muy grande que demora
mucho en exportarse en su totalidad. De esta forma, puedes ajustar rpidamente la
vista previa de la pgina en la que ests trabajando, sin tener que exportar el resto del
sitio.
32

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

botn 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 todava, estas vistas previas se exportan a una carpeta
temporal en tu PC. Una vez que lo hayas exportado, la misma ubicacin de
exportacin 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 versin simplificada del navegador
Internet Explorer por defecto, puedes elegir uno de los cinco tipos de navegadores
ms populares para ver tu pgina 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 estn habilitados si tienes instalados los navegadores en tu
PC.

Vista previa de tu pgina o su sitio web en Google Chrome.

Vista previa de tu pgina o su sitio web en Mozilla Firefox.

Vista previa de tu pgina o su sitio web en Internet Explorer.

Vista previa de tu pgina o su sitio web en Opera.

Vista previa de tu pgina o su sitio web en Safari.

Al hacer clic en uno de los botones de arriba, se abre el navegador en la pgina que
ests viendo actualmente en la ventana de vista previa.

Si deseas ver tus pginas 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 botn de vista previa, la exportacin se actualizar tambin, y
entonces solo ser necesario pulsar el botn de Actualizar en tu navegador (o
presionar F5).
www.magix.es
 Primeros pasos 33

Uso de plantillas, cliparts y widgets

Abre la GALERA DE DISEOS con un clic en la pestaa GALERA DE DISEOS de
la barra de galeras (o con "ARCHIVO" > "NUEVO DE LA GALERA DE DISEOS" ).

Aqu se muestran carpetas temticas que contienen colecciones de diseos de

pginas web y archivos grficos asociados con cada tema especfico. Busca en TEMAS
PARA PLANTILLAS DE PGINAS WEB (GENERAL) para encontrar todas los diseos de
plantillas disponibles para configurar rpidamente una pgina web de calidad. En
TEMAS PARA PLANTILLAS DE PGINAS WEB (ESPECIAL PARA EMPRESAS) , encontrars
pginas web completas ya diseadas para tipos especficos de empresas, lo que hace
incluso ms rpido el tener online la pgina web de una empresa.

Cada tema de pgina web tiene una serie de diseos alternativos y tiles elementos
para tu pgina. Cada uno contiene a su vez una plantilla de pgina 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 galera hasta
la pgina o con un doble clic.

En ELEMENTOS DE PGINA Y WIDGETS encontrars una amplia variedad de grficos y

widgets que puedes aadir a tu pgina, desde botones, barras de navegacin y
paneles de texto a formas, soluciones de comercio electrnico y pases de fotos. Tan
solo arrastra y suelta cualquiera de ellos desde la galera sobre tu pgina web. Si ests
conectado a Internet, la galera de diseos se actualiza automticamente para
mostrarte las ltimas plantillas y novedades disponibles.

Agregar nuevas pginas a tu pgina web

Puedes arrastrar cualquier diseo de plantilla desde la GALERA DE DISEOS en tu
pgina. Si se trata de una plantilla de pgina, se aadir una nueva pgina 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 botn, un encabezado o un objeto de foto,
esto se agregar a la pgina en el lugar en donde lo sueltes y nuevamente se te
preguntar si quieres que los colores coincidan.

Para aadir una nueva pgina del mismo diseo, la forma ms sencilla es hacer
clic derecho en la pgina y seleccionar DUPLICAR PGINA ACTUAL o utilizar el
botn DUPLICAR PGINA ACTUAL en la barra de herramientas estndar.

Esto replica la pgina actual abajo. Luego puedes eliminar o editar los elementos
segn lo desees. Esto tiene la ventaja de que mantendr la misma estructura de
navegacin.

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

La pgina en el portapapeles se aadir inmediatamente como una nueva pgina

despus de la pgina actual. La pgina pegada adopta el tamao de pgina del
documento en el que es pegada (siempre y cuando est activada la opcin TODAS LAS
PGINAS IGUALES EN EL DOCUMENTO bajo ARCHIVO > OPCIONES DE PGINA ). Tambin
se pegarn las capas de la pgina y los atributos y todos los objetos en la pgina.

Puedes agregar una nueva pgina en blanco, haciendo clic derecho y

seleccionando NUEVA PGINA o utilizar el botn INSERTAR PGINA EN BLANCO
en la barra del men desplegable de la pgina.
Puedes eliminar pginas haciendo clic derecho y seleccionando ELIMINAR
PGINA ACTUAL o haciendo clic en el botn ELIMINAR PGINA ACTUAL en la
barra del men desplegable de la pgina.

Integracin de pelculas, Flash y otros widgets

Puedes incrustar fcilmente pelculas, archivos de audio MP3, animaciones flash, GIF
animados, PDF, galeras de fotos y widgets de diapositivas y tipos ilimitados de
widgets interactivos en tu pgina web creada con MAGIX Web Designer 11 Premium.
Consulta el captulo de Widgets de pgina web para ms detalles.

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

Clipart flash
MAGIX Web Designer 11 Premium incluye la posibilidad de crear animaciones flash
desde cero (ver la seccin Animaciones flash (en la pgina 434) en el manual en
PDF), pero tambin incluye una variedad de plantillas de flash que puedes
personalizar. Las plantillas flash no se pueden arrastrar hacia la pgina directamente,
deben abrirse como un documento de animacin 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 pgina web.

Se generar automticamente una imagen de marcador de posicin y se colocar en

tu pgina. Haz una vista previa de tu pgina para ver la animacin Flash en
funcionamiento. Como alternativa, puedes crear tu propio marcador de posicin (p.
ej., un rectngulo) y luego utilizar la pestaa MARCADOR DE POSICIN del dilogo
PROPIEDADES WEB para asociarlo con tu archivo Flash.

Galera de diseos
Esta galera contiene plantillas de diseo profesional de pginas y sitios web
completos, as como de elementos individuales de cliparts que puedes utilizar para tu
diseo.

Para abrir esta galera:

www.magix.es
 Primeros pasos 35

Haz clic en la pestaa GALERA DE DISEOS en la barra de galeras.

O selecciona "HERRAMIENTAS" > "GALERAS" > "GALERA DE DISEOS".

Consulta MANEJO DE DOCUMENTOS (en la pgina 95) para ms informacin sobre

como usar las galeras. Si te encuentras en lnea cuando abres la galera, comenzarn
a descargarse automticamente diseos y widgets de los servidores de Web
Designer, que aparecern de inmediato en la galera. Visita regularmente la galera
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, arrstrala y sultala sobre le diseo. Las plantillas de pgina se
agregan como nuevas pginas al documento actual cuando lo haces. Otras plantillas y
widgets se agregan a la pgina actual.

Muchas de las carpetas de la galera en ELEMENTOS DE PGINA Y WIDGETS contienen

"widgets", tal como lo indican sus nombres de carpeta. Estos son mucho ms que
simples grficos estticos. Consulta el captulo WIDGETS DE PGINA WEB para ms
informacin.
36

Catlogo de contenido online

El catlogo de contenido online es esencialmente una versin "nube" de la galera de
diseos. Es decir, todo el contenido est almacenado online y como tal requiere que
ests conectado a Internet. Adems de tener la librera de la galera de smartshapes,
temas de pginas web, plantillas de diseo y widgets almacenados en tu PC como
parte de Web Designer, tambin puedes acceder a todo el contenido a travs del
catlogo de contenido, que ofrece una forma fcil e intuitiva para buscar todo el
contenido.

Cuando importas una pieza de contenido desde el catlogo de contenido se descarga

en tu PC y permanece disponible cuando no ests conectado. Para abrir el catlogo de
contenido:

Haz clic en "ARCHIVO" > "NUEVO DEL CATLOGO DE CONTENIDO"

(Shift+Ctrl+Alt+K)
haz clic en "INSERTAR" > "DESDE EL CATLOGO DE CONTENIDO" para insertar y
descargar una pieza de contenido desde el catlogo.

Catlogo de contenido online

El catlogo es una ventana redimensionable: arrastra los bordes o la esquina inferior

derecha para cambiar el tamao. Se obtiene un popup de vista previa cuando pasas
por las categoras de contenido a la izquierda: haz clic para seleccionar y esa categora
se expandir y se mostrar en el lado derecho. Para las categoras que tienen muchos

www.magix.es
 Primeros pasos 37

elementos hay un control de pgina en el extremo superior derecho que te permite

ojear las pginas de contenido siguientes y posteriores.

Cuando se usa la versin 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 estn disponibles de forma
inmediata y gratuita una vez que compras y activas el programa.

Colores de la pgina web

Todas las plantillas utilizan un pequeo conjunto de colores originales y varias
sombras de estos colores originales. La forma ms fcil 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 GALERA DE DISEOS. Simplemente arrastra un esquema hasta la
pgina 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 lnea 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 estndar
Barra de estado . Muestra lo que se ha seleccionado y brinda consejos
Mantn el cursor sobre un color para ver su nombre

Simplemente haz clic en cualquier color con nombre y selecciona la opcin de edicin
(si mantienes el cursor del ratn sobre el color vers 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 lnea 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 fcil 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 tambin cambiarn.

Colorear formas
Puedes rellenar con un color cualquier forma dibujada, arrastra el color desde la LNEA
DE COLOR y sultalo en la forma o selecciona primero el objeto y luego haciendo clic
en la lnea de colores y escogiendo "ESTABLECER COLOR DE RELLENO".

De forma alternativa haz clic en el pequeo 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 gradacin a un objeto dibujado utilizando la

herramienta de relleno (en la pgina 239).

Importacin de clipart con color

Cuando importas un grfico de clipart arrastrndolo desde la GALERA DE DISEOS , al
utilizar la opcin "ARCHIVO" > "IMPORTAR" , o arrastrando un archivo .web o .xar hasta
la pgina, por lo general se te preguntar si deseas vincular los colores. Si seleccionas
NO IGUALAR , entonces cualquier color con nombre utilizado en este grfico ser
aadido a la lnea de colores. Haciendo clic en cualquier color de la lnea de color, te
dar la opcin de editarlo.

Tambin puedes cambiar los colores o cualquier objeto multicolor seleccionndolo y

haciendo clic sobre un color de la lnea de color. Aparecer un dilogo que te muestra
el conjunto de colores usados actualmente en este objeto: tan solo haz clic sobre el
que quieres cambiar. Tambin 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
seleccinala de la forma usual y haz clic en el rombo blanco al final de la lnea 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 estn
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 seleccin. Otra forma de seleccionar directamente la
foto es hacer clic en la foto con la HERRAMIENTA DE FOTO .

Fondos de pgina web

La mayora de diseos de pgina en la GALERA DE DISEOS 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 pgina. Sobre l est el fondo de pgina
con todos los otros elementos que constituyen la pgina web.
40

Color de fondo del tablero de dibujo o del navegador

Color del fondo de pgina

Puedes cambiar fcilmente el color del TABLERO DE DIBUJO o del FONDO DE PGINA
arrastrando y soltando un color de la LNEA DE COLORES o incluso usando el EDITOR DE
COLORES .

Cuando creas un nuevo documento en blanco ("ARCHIVO" > "NUEVO" ) la pgina es

transparente (sin color) por defecto, por lo que tan solo vers el color del tablero de
dibujo tras ella, que es blanco por defecto. Tambin vers un contorno gua
rectangular suave que muestra los lmites de la pgina sobre el tablero de dibujo.

Adems, hay una gran variedad de texturas de fondo prediseadas en la GALERA DE

DISEOS . Tan solo arrastra y suelta un color hasta el rea del tablero de dibujo para
usarlas.

Consulta Fondos de pgina web (en la pgina 311) para ms informacin.

Fotos
Puedes sustituir cualquier foto arrastrndola desde tu explorador de Windows y
soltndola sobre cualquier foto de Web Designer. Si la sueltas sobre el fondo,
entonces se importa y se posiciona en la pgina donde la soltaste. Todas las fotos
importadas se muestran con 500 pxeles, pero por supuesto puedes ajustar cualquier
tamao de la forma usual con la herramienta de seleccin.

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

versin reducida. Esto es recomendable, para ms informacin lee la seccin
resolucin de fotos a continuacin.

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 posicin o estirar de las puntas de las flechas de relleno
para cambiar el tamao y girar la imagen dentro del contorno de la forma.

Arrastra sobre la foto para cambiar su posicin dentro del marco. Estira de la punta de las
flechas para cambiar el tamao y girar.
42

Sustitucin de mltiples fotos

Algunas plantillas de la GALERA DE DISEOS , especialmente los estilos de los lbumes
de fotos, pueden tener varias fotos que desees sustituir en un solo paso. Selecciona
los mltiples archivos de fotos en el explorador de archivos de Windows (Ctrl+Clic
para aadir ms archivos a la seleccin o Shift+Clic para seleccionar una serie de
archivos). Luego arrastra y suelta los archivos hasta la pgina de MAGIX Web
Designer 11 Premium para que las fotos se reemplacen una a una desde el principio de
la pgina hacia abajo. Eso facilita llenar una pgina de un lbum de fotos con tus
propias fotos.

Si arrastras ms fotos de las que caben en la pgina actual, MAGIX Web Designer 11
Premium explorar las pginas siguientes en el documento para ver si puede
acomodar algunas o todas las fotos restantes. Si esto todava no alcanza para colocar
todas tus fotos, MAGIX Web Designer 11 Premium duplicar la pgina actual todas
las veces que sea necesario para posicionar todas las fotos.

Este potente mecanismo significa que puedes crear una pgina web con un lbum de
fotos de varias pginas, si cargas una plantilla de la galera de diseos y luego
arrastras tus fotos.

Importacin de fotos grandes

Al importar fotos de alta resolucin (cualquiera de ms de 1920 pxeles,
independiente del alto o ancho) en un documento web, MAGIX Web Designer 11
Premium ajusta la foto automticamente al tamao de la pantalla HD sin preguntar si
quieres importar una versin con una resolucin menor. Para un documento web, aun
con el tamao reducido, debera haber ms que resolucin suficiente en tus fotos para
resultados de alta calidad en tu pgina web, por lo que raramente es necesario
importar imgenes de cmaras digitales con su resolucin completa para usar en la
web.

Sin embargo, si importas una foto grande a un documento de impresin o con

animacin, MAGIX Web Designer 11 Premium te pregunta si quieres importar una
versin de menor resolucin de tus fotos. Si el documento va a incluir muchas fotos,
sera conveniente elegir la opcin de menor resolucin. De lo contrario, si contiene
fotos de gran tamao, el tamao del archivo de diseo ser mucho ms grande de lo
que debera ser (porque contiene una copia de cada una de tus fotos). La memoria
requerida al editar y exportar el documento sern tambin 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 OPTIMIZACIN 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 ms control sobre los recortes.

Consulta el apartado Trabajar con fotos para ms informacin detallada sobre cmo
MAGIX Web Designer 11 Premium maneja fotos y el apartado en Herramienta de
foto para averiguar cmo utilizar la herramienta de foto.

Fotos en miniatura con popup

Puedes crear muy fcilmente pequeas miniaturas de fotos (simplemente cambia el
tamao para que sean muy pequeas), para que cuando se haga clic sobre las
mismas se muestre una versin ms ampliada. Cambia el tamao de tu foto, tal como
lo haces con la HERRAMIENTA DE SELECCIN .

Selecciona la pequea miniatura de foto y selecciona la opcin "FOTO

EMERGENTE " en la pestaa ENLACE del dilogo Propiedades web (haz clic en el
BOTN ENLACE en la BARRA DE HERRAMIENTAS DE WEB ).
44

Haz clic en el botn CONFIGURACIN junto a la opcin de foto emergente para

cambiar a la PESTAA IMAGEN del DILOGO DE PROPIEDADES WEB.

All podrs determinar cmo aparecer tu popup. Una opcin te permite colocar un
ttulo sobre cada foto emergente. Configura el ttulo para cada foto en el campo
TTULO . De forma opcional, puede mostrarse un subttulo debajo de cada foto
emergente. Simplemente, configura la CAPTURA DE IMAGEN para la miniatura en el
mismo dilogo. Consulta la seccin foto emergente del captulo Dilogo 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 ratn 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
pestaa 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 lnea entera (lo que puede ser til para seleccionar todo el
texto en un botn). Como es habitual, la barra de informacin 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 tamao 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 opcin "aadir" en la seccin de fuentes de Google te permite examinar, descargar

e instalar desde cientos de fuentes de acceso libre que puedes usar en tu pgina web.

El men de fuentes ofrece la seleccin 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.

Tamao de fuente
El campo de tamao de fuente muestra el tamao de fuente en pxeles, dado que ste
es el mtodo ms confiable para ajustar el tamao 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 detrs del mismo (significa "punto"), por
ejemplo 72pt 1 y esto se convertir al tamao de pxeles correcto.

Usar fuentes en tu pgina web

Las fuentes de la seccin de fuentes seguras se pueden usar sin problemas en las
pginas web, ya que la gran mayora de los equipos y otros dispositivos dispondrn de
estas fuentes. Tambin puedes usar cualquiera de los cientos de fuentes de Google
porque se descargarn automticamente a travs del navegador web cuando alguien
visite tu pgina. Puedes usar otras fuentes que hayas instalado y tenerlas incrustadas
automticamente en tu pgina, siempre que la licencia de la fuente lo permita:
consulta el captulo "Manejo de texto" para ms detalles.

Si conviertes cualquier objeto de texto en un grfico puedes usar cualquier fuente.

Consulta la seccin de grupos (en la pgina 50) abajo para ms detalles.

Crear nuevos objetos de texto nuevos

Existen tres objetos de texto: una nica lnea de texto, una columna de texto o un rea
de texto rectangular. Para crear una simple lnea 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 tamao 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 autora web), puedes girar
cualquier objeto de texto, incluso columnas de texto, utilizando la funcin de giro
usual de la herramienta de seleccin. Pero debido a que los navegadores web no son
compatibles con texto girado nativo, Web Designer convierte cualquier texto girado
en un grfico cuando la pgina es exportada como pgina web.

www.magix.es
 Primeros pasos 47

Lista con vietas y numeradas

Utiliza los botones de las listas con vietas y numeradas de la barra de informacin de
la HERRAMIENTA DE TEXTO para ingresar rpidamente listas con vietas 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 nmeros en tu
lista. Tambin puedes usar cualquier grfico como vieta o nmero de tu lista.
Consulta el captulo Herramienta de texto (en la pgina 196) para ms informacin.

Sombras suaves, texto relleno de color, texto transparente

Puedes aplicar cualquiera de estos efectos utilizando las herramientas apropiadas. Por
ejemplo, si arrastras sobre algn texto en la herramienta de relleno, obtendrs un
color con gradacin, o si arrastras con la herramienta de sombra, obtendrs una
sombra ligera.

En todos estos casos, Web Designer convertir el texto automticamente en un

grfico en tu pgina web exportada.

Contornear texto alrededor de objetos

Si haces clic con el botn derecho del ratn en un objeto como una foto y seleccionas
la opcin de men "CONTORNEAR TEXTO (en la pgina 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 GALERA DE DISEOS se contornean automticamente,
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 detrs del objeto, as que
tendrs 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 pgina web). Consulta Propiedades de capa (en la
pgina 426).

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

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

Nota: ahora tambin puedes hacer que el texto fluya alrededor de Objetos ancla (en
la pgina 48).
48

Objetos ancla
Si deseas que un objeto grfico 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

SELECCIN , haz clic y arrastra el smbolo del ancla que aparece en la parte superior
izquierda del objeto hasta la ubicacin 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 ortografa
En la barra de informacin de la herramienta de texto hay un botn que
selecciona las opciones del corrector ortogrfico y el idioma. Si seleccionas
"Revisar ortografa mientras se escribe", tambin marcar todas las palabras
que no reconoce subrayndolas en rojo intermitente. Haz clic con el botn
derecho en cualquier palabra marcada para obtener sugerencias.

Tamao de pgina
Las pginas de la GALERA DE DISEOS estn diseadas para tener un ancho
compatible con la mayora de las pantallas. No se recomienda crear pginas ms
anchas, incluso si tu PC dispone de una pantalla ms amplia. La experiencia
demuestra que la mayora de usuarios prefieren tener un ancho de pgina fijo. Sin
embargo, puedes ajustar el tamao de pgina que quieras.

Puedes configurar cualquier tamao de pgina que quieras seleccionando TAMAO DE

PGINA del DILOGO DE OPCIONES (haz clic derecho y selecciona OPCIONES DE
PGINA , u OPCIONES DE PGINA del men ARCHIVO ). No se recomienda crear un
ancho de pgina que supere los 990 pxeles, ya que este es el ancho mximo para
gran parte de las pantallas (1024 menos una pequea cantidad por la barra
desplazable). Un ancho de pgina ms comn tiene por lo general unos 800 pxeles.

Puedes ajustar directamente la altura y el ancho de tu pgina arrastrando el margen

inferior o derecho de la pgina. Ve a la HERRAMIENTA DE SELECCIN y mueve el cursor
sobre el borde inferior de la pgina y este cambiar para indicarte que ahora puedes
arrastrar para reducir o ampliar el tamao de la pgina segn se requiera.

www.magix.es
 Primeros pasos 49

Guardar tu trabajo. Creacin de una pgina Web

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

Tambin te recomendamos trabajar con la funcin de copias de seguridad

automticas activada. Esta opcin se controla desde la pestaa Copias de seguridad
del dilogo HERRAMIENTAS > OPCIONES . Cuando est activada esta opcin, 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 automticamente en la ubicacin de copias de seguridad
y se restauren la prxima vez que inicies.

Para guardar tu sitio web, que son las pginas HTML y archivos asociados
para publicar en la Web, utiliza la opcin Exportar pgina web o haz clic en
este botn en la barra superior.

Esto guarda un archivo .htm por cada pgina y una carpeta que contiene todos los
archivos que componen la pgina web. Al exportar un sitio web, todas las pginas se
exportan juntas y cada pgina sin nombre recibe la finalizacin _1, _2 tras el nombre
que ingresas durante la exportacin. La carpeta _FILES contiene todos los grficos y
otros archivos que van a formar tu sitio web. Puedes nombrar cada pgina de forma
individual si lo deseas, con la pestaa PGINA del dilogo PROPIEDADES WEB o con la
Galera de pginas y capas (en la pgina 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 pgina 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 automticas

La pestaa Copias de seguridad del dilogo HERRAMIENTAS > OPCIONES te permite
activar y desactivar la funcin de copias de seguridad automticas. Esta funcin
guarda una copia de todos los documentos abiertos modificados en intervalos
regulares. Tambin 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 prxima vez que inicies el programa.

Consulta el captulo Manejo de documentos (en la pgina 88) para ms detalles

acerca de estas funciones.
50

Grupos
Puedes agrupar cualquier seleccin de objetos en la pgina. Los grupos actan casi
como un objeto individual, ya que puedes arrastrarlos por la pgina, cambiar su
tamao y rotarlos como si fueran un solo objeto. Muchos de los elementos de los
diseos de plantilla de la GALERA DE DISEOS , como los botones, paneles de texto y
objetos de fotos, son elementos agrupados.

Por ejemplo, puedes dibujar un simple botn desde cero dibujando un rectngulo con
la HERRAMIENTA DE RECTNGULO 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 SELECCIN . Pero si seleccionas ambos en la
HERRAMIENTA DE SELECCIN (tambin 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 convertirn en
un objeto agrupado (Pista: la lnea de estado que se encuentra debajo siempre te
informa de lo que est seleccionado). Ahora si arrastras, cambias el tamao o giras
este objeto, todas las partes de este grupo se mueven y transforman como si fueran
un nico objeto.

Importante: los objetos agrupados estn generalmente convertidos en un nico

grfico cuando exportas tu pgina 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 automticamente el elemento dentro del grupo.

Cambia o edita cualquiera de los colores por separado usados dentro de un grupo
seleccionndolos y haciendo clic en un color o lnea de color, o abriendo el editor de
color. Consulta el apartado sobre cambio de colores para ms informacin.

Convertir texto en un grfico

Como se mencionaba arriba, solo un nmero limitado de fuentes estn disponibles en
navegadores web. Si quieres utilizar una fuente diferente en un botn o,
digamos, como un encabezado, puedes hacerlo asegurndote de que se ha convertido
a un grfico, y todo lo que necesitas es agrupar el objeto para que esto ocurra
automticamente. Todava puedes editar el texto dentro del grupo, pero los grupos se
convierten automticamente en grficos cuando se exporta la pgina 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 tcnica: al exportar estos grupos como imgenes en una pgina web, cualquier
texto del grupo se utiliza como texto alternativo de HTML en la imagen (salvo que
fijes explcitamente otro texto alternativo para el grupo). Esto significa que los
motores de bsqueda pueden indexar el texto y que las herramientas utilizadas por
las personas con problemas en la visin tambin reconocern y leern este texto, a
pesar de que el texto no aparece directamente en la pgina 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 pestaa 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 ms suelta . Consulta el captulo Manejo de objetos para
ms informacin.

Grupos anclados
Cuando aplicas anclaje a un objeto respecto al texto, se coloca dentro de un grupo
anclado. Consulta Grficos anclados (en la pgina 222) para ms informacin sobre
los objetos anclados.

Grupos de repeticin
Cuando haces que un objeto se repita, se coloca dentro de un grupo de repeticin.
Consulta Objetos repetidos (en la pgina 143) en el captulo Manejo de objetos para
ms detalles.

Objetos repetidos
En tu documento o pgina web es muy comn que ciertos elementos se repitan en
todas las pginas como, por ejemplo, los botones de navegacin, los encabezados o
los logotipos. MAGIX Web Designer 11 Premium te ofrece la posibilidad de repetir
cualquier elemento en el mismo lugar de las pginas del sitio. Cuando actualices una
de las copias, todos los cambios se reflejarn automticamente en todas las pginas.

Consulta la seccin Objetos repetidos (en la pgina 143) en el captulo Manejo de

objetos para ms detalles.
52

Creacin de botones, banners y otros grficos

web
Web Designer es una herramienta genial para crear cualquier grfico web para utilizar
con otros programas y otras herramientas de autora web. Puedes dibujar estos
objetos desde el comienzo, utilizando las herramientas de dibujo o utilizar los cliparts
web de la GALERA DE DISEOS . Simplemente dibuja, disea o importa cualquier
elemento de la GALERA DE DISEOS a una pgina en blanco. Maniplalo segn tus
deseos, cmbiale el tamao, el color y el texto o fuentes, y luego exporta el elemento
como PNG o JPG.

Por ejemplo, as se crea un grfico de botn individual a partir de una plantilla:

Abre la GALERA DE DISEOS y luego la categora Botones web (o Iconos,

Banners o la categora que necesites).
Haz doble clic sobre un diseo para abrirlo en un nuevo documento. Edtalo segn tus
deseos, puedes:
Cambiar su tamao (o girarlo) con la HERRAMIENTA DE SELECCIN
Cambiar el color con un clic en los colores apropiados en el extremo izquierdo
de la Lnea de colores y escogiendo "Editar".
Cambiar el texto con la HERRAMIENTA DE TEXTO

Una vez que ests satisfecho con el resultado, selecciona el

objeto y exprtalo como PNG o JPG con los botones de la
barra de pgina web (estos se encuentran en la barra
desplegable del smbolo de exportacin HTML).

Para casi todos los grficos, como botones, encabezados, conos y otros objetos no
fotogrficos deberas usar formato PNG. Para elementos que contienen fotos o partes
texturizadas a partir de fotos, entonces JPEG ser un mejor formato. Si ests
guardando una foto girada o una con una sombra suave o borde suave, entonces
deberas guardarla en un formato PNG, pero debes considerar que este archivo ser
mucho ms grande que el JPEG.

Si haces clic en el botn CONFIGURACIN en el dilogo 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 versin en PNG del mismo
grfico para evaluar la calidad o el tamao del archivo; o comparar dos imgenes PNG
optimizadas de forma diferente. Consulta el captulo de referencia del dilogo de
exportacin (en la pgina 474) en el manual en PDF. En el ejemplo anterior, la
compresin JPEG se ajust para obtener un tamao de archivo ptimo.

Enlaces, botones y barras de navegacin

Puedes aadir un enlace web a cualquier objeto, un botn, un grfico o algn texto.

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

introducir la direccin web que quieres enlazar.
54

Introduce la direccin web que quieras para enlazar en el campo.

La pestaa ENLACE del dilogo de enlace te permite controlar lo que ocurre si haces
clic en el objeto vinculado en la pgina. Puedes saltar a cualquier otra pgina web
(puedes seleccionar rpidamente un enlace a cualquier otra pgina dentro de tu
pgina web con el men ENLAZAR A) y puedes decidir si quieres que se abra as la
pgina en una ventana separada. Tambin puedes enlazar a cualquier capa emergente
si ya las has creado.

Por lo tanto, para definir uno de tus botones como enlace, simplemente
seleccinalo (haz clic en el mismo en la HERRAMIENTA DE SELECCIN ), haz clic
en el icono e introduce la direccin web o selecciona una de las pginas 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 rpidamente 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 botn

Es muy simple en la HERRAMIENTA DE TEXTO, haz clic en el texto del botn y edtalo.

Consejo: si haces triple clic en el texto del botn, seleccionar toda la lnea de texto
para un reemplazo ms sencillo al tipear.

Botones MouseOver (rollover)

Te habrs dado cuenta de que la mayora de botones se resaltan cuando mueves el
cursor del ratn por encima de los mismos en tu navegador. Esto se llama un
MouseOver o, algunas veces, efecto rollover. Es completamente automtico para la
mayora de botones utilizados en las plantillas o para la seccin de botones de la
GALERA DE DISEOS . Pero tambin puedes crear tus propios botones MouseOver:
consulta la seccin "Capas" ms abajo.

Aadir nuevos botones

En la GALERA DE DISEOS cada tema tiene una coleccin de grficos de botones que
puedes arrastrar hacia la pgina. Por lo general hay dos tipos de botones. Los
llamados botones extensibles se alargarn para adaptar el botn de etiqueta de texto.

Adems, en ELEMENTOS DE PGINA Y WIDGETS , hay una categora que contiene un

conjunto de diseos de botones generales que se pueden agregar a tu pgina de la
misma forma.

O puedes copiar cualquier botn ya existente. Puedes copiar y pegar, aunque un

shortcut ms rpido es arrastrar con el botn derecho del ratn 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 operacin de

arrastre ser perfectamente horizontal o vertical, facilitando en gran medida la
creacin de una lnea o una columna de botones.
56

Barras de botones (barras de navegacin)

La mayora de pginas web, y la mayora de los diseos de plantillas que

suministramos, tienen una fila o una columna de botones para navegar en la pgina
web o en otros lugares. Esto se llama barra de navegacin y MAGIX Web Designer 11
Premium incluye una compatibilidad especial para estas barras. Para editar una barra
de navegacin, haz doble clic sobre ella o clic derecho y escoge EDITAR BARRA DE
NAVEGACIN del men contextual. Se abrir el dilogo de barra de navegacin. All
podrs cambiar los nombres de los botones, enlaces y consejos de herramientas,
agregar y eliminar botones, cambiar el orden y hasta agregar mens y submens.

Al hacer doble clic sobre el campo de URL, se abrir el dilogo Enlace que es el mismo
dilogo que se utiliza para fijar enlaces en objetos normales, tal como se ha descrito
anteriormente en este captulo y en detalle en el captulo del dilogo de propiedades
web. Puesto que no puedes aplicar un efecto de transicin a un enlace de una barra de
navegacin, los controles de transicin de enlace estn desactivados.

En el dilogo de propiedades de la barra de navegacin tambin puedes activar la

opcin BARRA DE NAVEGACIN DEL SITIO. Esto hace que la barra aparezca
automticamente en las nuevas pginas que agregas a tu sitio y los botones/enlaces
agregados a la barra tambin se aaden a cada pgina nueva. Sin embargo, no puedes
editar tu barra en el lienzo si esta opcin est activada, solo puedes hacerlo mediante
este dilogo.

Para actualizar una barra de navegacin en todas las pginas (si no es una barra de
navegacin del sitio) haz clic y escoge REPETIR EN TODAS LAS PGINAS . Esto har que
la barra de botones se convierta en un objeto y lo copiar de la pgina actual a todas
las otras en la misma ubicacin.

Lee el captulo Barras de navegacin (en la pgina 382) para toda la informacin
detallada sobre barras de navegacin.

Tus propios iconos en las pestaas de los

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

Para crear un "favicon", arrastra o dibuja la imagen que quieres usar en tu pgina web.
La imagen puede tener cualquier tamao, puesto que se ajustar automticamente al
tamao correcto al mostrarse en un navegador.

www.magix.es
 Primeros pasos 57

Haz clic en el objeto y luego en el botn "Nombres" a la derecha de la barra

de informacin de la HERRAMIENTA DE SELECCIN .

En el dilogo "Nombres", escribe "favicon", en el campo APLICAR NOMBRES , luego haz

clic en AGREGAR y finalmente en CERRAR .

Haz una vista previa de tu pgina web en tu navegador preferido. La forma ms fcil
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 pgina web se mostrar con el icono personalizado, tal como se muestra en el

ejemplo ms abajo.

Puedes utilizar un solo favicon por pgina web. Publica tu pgina web y visualzala
para ver tu favicon.

Herramientas de dibujo
Web Designer te ofrece todas las herramientas grficas
que necesitas para crear cualquier objeto grfico en tu
pgina, as como una variedad de elementos grficos
previamente diseados en la GALERA DE DISEOS . Existen
varias herramientas de dibujo bsicas que te permiten
crear rectngulos, elipses, polgonos regulares, estrellas o
cualquier forma que desees.

Web Designer suministra herramientas de dibujo vectoriales lo que significa que

puedes cambiar el tamao, editar la forma y cambiar el color sin perder calidad.
Puedes ampliar para ver el detalle ms nfimo y todas las ediciones pueden
deshacerse.

Atributos actuales (estilos)

Un "atributo" es una caracterstica 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

despus de haberlo dibujado, si lo seleccionas y luego cambias su color de relleno, el
ancho de la lnea o cualquiera de sus atributos. Pero MAGIX Web Designer 11
58

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

Configuracin manual de los atributos actuales

Si, por ejemplo, quieres que el prximo rectngulo que dibujes sea rojo, asegrate de
que nada est seleccionado (pulsa Esc o haz clic en una parte vaca de una pgina) y
luego haz clic sobre el color rojo en la lnea 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 fijndote que no haya nada
seleccionado antes de escoger el valor del atributo.

Configuracin automtica de atributos

Por defecto, MAGIX Web Designer 11 Premium actualiza automticamente los
atributos para que coincidan con los del ltimo objeto que has dibujado o
seleccionado. Entonces si, por ejemplo, haz dibujado un rectngulo y lo has hecho
verde, la prxima forma que dibujes ser tambin verde. Si tienes un rectngulo azul
en tu diseo y deseas dibujar otro igual, entonces selecciona primero ese rectngulo
azul (esto hace que los atributos sean los actuales) y, entonces, la prxima forma que
dibujes tambin 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 PESTAA GENERAL (en la pgina 488)

del dilogo HERRAMIENTAS > OPCIONES . Selecciona la opcin 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 diseos consisten en una combinacin de formas cerradas con relleno y
formas abiertas (lneas 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 rectngulo con relleno sin contorno
no cambiar el ancho de lnea 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 automtica, an cuando la
opcin "Dar a nuevos objetos los atributos ms recientes" est activada. Esto es
porque algunos atributos pueden causar problemas si se convierten en actuales.

Por ejemplo, si has aplicado una difuminacin de 10 pxeles a un objeto grande (para
hacer los bordes menos ntidos) y luego dibujas una forma de 10 pxeles de tamao,
entonces la nueva forma sera invisible si el atributo de difuminacin estuviera fijado.

Otros atributos pueden afectar la forma en que los diseos se exportan, o aumentar
significativamente el tiempo de renderizacin de ese diseo, por lo que no deberan
aplicarse de no ser necesario.

Los ejemplos de los atributos que se copian automticamente:

Colores de relleno, estilos de relleno, ancho de lnea, color de lnea, estilo de
lnea, estilo de unin de lnea, estilo de extremo de lnea, puntas/extremos de
flechas, fuente de texto, tamao de fuente de texto, mrgenes de texto.

Los ejemplos de los atributos que no se copian automticamente:

Difuminacin, transparencia, sombras, biselado, 3D.

Restauracin de atributos actuales

Puedes restablecer los grupos de atributos actuales, si pulsas ESC cuando ningn
objeto est seleccionado. Si hay objetos seleccionados, pulsar ESC quitar la
seleccin, 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 imgenes detalladas basadas en
vectores y editar tambin el contorno de cualquier forma.

Para formas predeterminadas como rectngulos 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". Despus puedes
usar el EDITOR DE FORMAS para realizar diversas ediciones de vectores avanzadas.
Consulta la seccin de referencia (en la pgina 149, en la pgina 155) para ms
informacin acerca del uso de esta poderosa herramienta.

La herramienta de lneas rectas y flechas

La HERRAMIENTA DE LNEAS RECTAS te facilita el dibujo de lneas rectas de un
solo segmento y el agregado de extremos de flechas.
60

Simplemente haz clic y arrastra sobre la pgina para dibujar una lnea recta. Puedes
hacer clic sobre una lnea 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 lneas

rectas
La barra de informacin tiene dos listas desplegables a la izquierda, que te permiten
escoger un extremo de punta para cada extremo de la lnea seleccionada.

Punta de flecha
Extremo posterior de la flecha
Tamao del extremo de la flecha
Trayectoria invertida

La barra deslizante de la barra de informacin te permite cambiar el tamao de los

extremos de flecha de la lnea seleccionada actualmente. O puedes introducir un valor
de porcentaje al campo de texto del tamao a la derecha de la barra deslizante.

Por defecto, los extremos de lnea se crean con un ancho 6 veces mayor que el ancho
de la lnea, y esto se toma como el tamao 100%, como indica la barra deslizante de
tamao. Si haces la lnea ms ancha, el ancho del extremo de la flecha tambin se
actualizar. Por lo tanto, introduce un valor menor que 100% para reducir el tamao
de los extremos de la flecha o mayor que 100% para aumentarlo. A pesar de que la
barra deslizante solo llega a un mximo de 800%, puedes entrar porcentajes mayores
en el campo de texto.

Trayectoria invertida
Presiona el botn Trayectoria invertida de la barra de informacin para
intercambiar la punta y el final de la flecha de la lnea seleccionada.

Agregar ms segmentos de lnea

Las lneas creadas con la HERRAMIENTA DE LNEAS RECTAS son, por supuesto,
completamente compatibles con las otras herramientas de dibujo. Entonces, si
quieres agregar ms segmentos a una lnea, curvarla o tal vez convertirla en una
forma cerrada, utiliza el EDITOR DE FORMAS .

www.magix.es
 Primeros pasos 61

Herramienta de rectngulo
Para dibujar un rectngulo, selecciona la HERRAMIENTA RECTNGULO y
arrstrala por la pgina. Vers una forma con relleno slido a medida que
arrastras por la pgina, que te indicar el color de relleno y de lnea, y los
bordes de la forma que ests dibujando.

Haz clic sobre "esquinas curvas" en la barra de informacin para crear un

rectngulo 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 Lnea de colores a tu forma para cambiarle el

color. Consulta Colorear formas (en la pgina 38). Con la HERRAMIENTA DE SELECCIN
puedes arrastrarla, girarla y cambiar su tamao segn lo desees. Consulta
herramienta de seleccin (en la pgina 29). Puedes colocar este rectngulo detrs de
los otros objetos como imagen de fondo si pulsas Ctrl+B para "Al fondo". Como
alternativa, si se encuentra frente a los dems objetos (Ctrl+F), puedes hacer clic
derecho y seleccionar CONTORNEAR TEXTO para hacer que el texto de la pgina fluya
alrededor de la parte externa de esta forma (otra herramienta de autora web de Web
Designer).

Herramienta de relleno
Puedes agregar fcilmente un relleno de color con gradacin 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
direccin, el ngulo o la extensin de la graduacin.

Rectngulo redondeado con relleno con gradacin

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 seleccin con la tecla Ctrl presionada (esto es conocido como
"seleccin 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 lnea 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 gradacin de varios niveles haciendo que se vea la flecha
de relleno (seleccinala con la herramienta de relleno), luego arrastra un color de la
lnea de colores y sultalo cuidadosamente en la lnea 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 crculo con un relleno circular.

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

Herramienta de transparencia

Los navegadores ms modernos con compatibles con efectos de transparencias

avanzados, como lo hace Web Designer. Puedes ajustar la transparencia de cualquier
grfico o foto para hacerlo transparente. Prubalo en tu ejemplo rectngulo.
Simplemente selecciona la herramienta de transparencia y ajusta la barra deslizante
larga en la barra de informacin.

Ms que eso, Web Designer es compatible con la transparencia con gradacin.

Funciona de forma similar al relleno de color con gradacin. En la herramienta de
transparencia, simplemente arrastra a travs de tu forma y puedes ver que la
transparencia desaparece. Puedes ajustar el grado de transparencia de cada
terminacin de la flecha de relleno haciendo clic en la terminacin de la flecha o
ajustando la barra deslizante de transparencia.

Haz un vista previa y vers que tambin funciona en tu navegador.

www.magix.es
 Primeros pasos 63

Difuminacin
ste es un trmino grfico para armonizar las esquinas de los objetos. Web Designer
proporciona un control de difuminacin que permite difuminar cualquier objeto,
grfico, texto o foto, proporcionndole un borde borroso que se mezcla con el fondo.
El control de difuminacin no es una de las herramientas de la izquierda, sino uno de
los controles que se ubican en la barra superior. Prubalo en tu forma de rectngulo.
Selecciona la forma y haz clic en el control de difuminacin de la barra superior.

La sombra debajo del dibujo de la pelota tiene un borde difuminado. La combinacin

de todos estos controles te permite producir rpidamente grficos de capas
asombrosos para tu pgina web, todo directamente en Web Designer sin necesidad
de utilizar ninguna otra herramienta grfica.

ste es un ejemplo de un rectngulo redondeado

con una gradacin de color, gradacin de
transparencia y bordes difuminados con un poco
de texto arriba.

Esta tiene un relleno de gradacin de color desde

verde oscuro hasta verde claro de izquierda a
derecha. Tambin 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 automticamente al grfico
indicado, cuando guardas tu pgina web. En
Web Designer puedes crear cualquier tipo de
grfico, foto, texto con transparencia y
simplemente "funciona". Web Designer puede
tambin importar casi todos los tipos de
archivos grficos, desde Adobe EPS, hasta
Photoshop PSD, Cmara RAW y ms.

Nota tcnica: Web Designer convierte automticamente todo tipo de vector grfico
en imgenes PNG, un PNG de canal alfa, si se ha utilizado transparencia. Utiliza
capas CSS para repetir el orden de aparicin de las capas en Web Designer. Esto es
compatible con todos los navegadores web modernos.
64

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

La HERRAMIENTA DE SOMBRA te permite aadir una sombra suave a cualquier

objeto, texto, grfico 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 informacin.

Texto con una sombra suave.

Para ajustar la posicin de una sombra existente, ve a la HERRAMIENTA DE SOMBRA y

arrastra sobre sombra.

Grficos de ejemplo

Este botn combina muchas de las funciones descritas ms abajo: fue creado a partir
de la combinacin de formas difuminadas y utilizando transparencia con gradacin (el
efecto de reflexin blanco). El texto tiene una sombra suave y el botn tiene una
sombra de resplandor. Todo est agrupado. (No necesitas crear el botn, ya que
aparece en la categora "Botones" de la GALERA DE DISEOS ).

La gran ventaja de los grficos vectoriales, en comparacin con los grficos de "mapa
de bits" creados en software de edicin como Photoshop, es que puedes volver a
colorear, editar, rotar y cambiar el tamao del botn sin prdida de calidad. Agrndalo
y vers que mantiene la nitidez:

Sobre la ampliacin puedes volver a colorear de manera ms fcil. Tan slo

selecciona, haz clic en un color y elige el color que quieres reemplazar de la lista que
se muestra en el cuadro de dilogo "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 prdida de calidad).
www.magix.es
 Primeros pasos 65

Aquello que normalmente lleva mucho tiempo y procedimientos en otro software

para grficos, es cosa de nios en Web Designer.

Capas, MouseOver (rollover) y elementos

emergentes
Como ya se mencion anteriormente, todos los objetos tienen un orden de ubicacin
en la pgina: desde el objeto ms al fondo hasta el objeto en primer plano.

Estos objetos estn 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 GALERA DE PGINAS Y CAPAS de la barra de

galeras.
En Web Designer, las capas se utilizan para suministrar funciones MouseOver
(algunas veces llamadas "rollover") en tu pgina 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 descripcin detallada de
producto. Tambin puedes aplicar una transicin a una capa para que aparezca en tu
pgina web con una animacin.

Efectos MouseOver
Hay dos tipos de efectos mouseover. Primero, el que se utiliza en botones mouseover,
en los que cualquier objeto con direccin web puedes mostrar un objeto grfico
superpuesto que aparece en una capa llamada MOUSEOVER. Ve ms abajo para ms
detalles. Hay otra posibilidad an 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 pgina. Esta capa popup puede contener texto, grficos, fotos o cualquier
combinacin de estos elementos. Ms informacin, abajo.
66

Las capas MouseOff y MouseOver

Todos los objetos principales en tu pgina web han sido colocados en la capa inferior,
conocida normalmente como MOUSEOFF. Los botones que se destacan cuando
mueves el cursor del ratn sobre ellos en tu pgina web, tienen un grfico adicional en
la capa, conocido como MOUSEOVER .

Si abres la Galera de capas puedes mostrar u ocultar cualquier capa si colocas o

quitas la seleccin en la casilla de visibilidad (columna izquierda bajo el smbolo de
ojo). Esta es una forma de mostrarte cmo pueden verse los elementos de
MouseOver en tu pgina web.

La capa actual siempre est destacada en la Galera de capas (la capa de MouseOff
en el diagrama de arriba) y esta es la capa en la que todos los objetos nuevos se
dibujarn. Para colocar objetos en cualquier otra capa, simplemente haz clic en la
capa requerida en la Galera de capas, y asegrate de que los smbolos del ojo y del
candado estn abiertos.

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

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

www.magix.es
 Primeros pasos 67

Botones mouseover (rollover)

Casi todos los botones de diseo acabado en la GALERA DE DISEOS tienen un efecto
mouseover en Web Designer. Estn creados con dos versiones de cada botn, el
botn principal en la capa MouseOff y el botn "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 versin. Si mueves, arrastras o cambias un botn en la
capa MouseOff, la otra versin en la capa MouseOver cambiar asimismo aunque no
puedas verlo. Esto se efecta utilizando Grupos suaves (en la pgina 51).

Orden de capas en documentos de pgina web

Si tu documento de pgina web tiene efectos MouseOver, capas popup y quizs
tambin efectos MouseOver en estas capas popup, debers seguir algunas reglas
importantes sobre cmo 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 GALERA DE PGINAS Y CAPAS ), primero deben
encontrarse todas las capas estticas. Se trata de capas que siempre son visibles y
que no se usan como popups. En la mayora de los diseos habr solo una: la capa
MouseOff. Pero ciertos diseos pueden tener varias, en cuyo caso debern 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 estticas.

Tu siguiente capa podra 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 tambin tiene
efectos MouseDown, deber seguir una capa cuyo nombre comience con
"MouseDown" y que contenga todos esos efectos.

A continuacin 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 GALERA DE PGINAS Y CAPAS (del primer plano al fondo) Todas las capas
son opcionales y puedes nombrar las capas como t quieras, a excepcin 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 esttica n
...
Capa esttica 2
MouseOff

Ten en cuenta que solo tienes que preocuparte por estas reglas de orden si ests
construyendo pginas complejas con mltiples efectos popup. Si ests usando los
diseos de plantillas provistos en la GALERA DE DISEOS , no tendrs 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 continuacin:

CORTA el objeto (Ctrl+X o haz clic derecho y selecciona CORTAR ). Asegrate 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 mltiples elementos que se encuentran en diferentes
capas, la estructura de capas se conservar al pegar. Los elementos se pegarn
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 opcin 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 tambin se encuentran en la barra desplegable del portapapeles en la
barra superior, as como tambin en el men EDITAR .
Haz clic derecho y escoge ARREGLO y luego MOVER A LA CAPA DE
ADELANTE /MOVER A LA CAPA DE ATRS para mover los objetos seleccionados a
una capa ms arriba o abajo.
Asegrate de que la capa de destino est seleccionada como la capa actual y
luego encuentra el elemento seleccionado en la GALERA DE PGINAS Y CAPAS
(haz clic en el botn LOCALIZAR ), haz clic derecho sobre el elemento y
selecciona MOVER A LA CAPA ACTUAL .

www.magix.es
 Primeros pasos 69

Aplicacin de transiciones a las capas popup

Puedes aplicar una transicin a una capa popup para controlar como aparecer la
capa y tambin como se cerrar.

1. Haz clic en la capa en la GALERA DE PGINAS Y CAPAS y luego en el botn

PROPIEDADES en la parte superior de la galera.
2. Haz clic en la pestaa CONFIGURACIN DE POPUP del dilogo de propiedades de
capa.
3. Escoge un EFECTO DE TRANSICIN de la lista desplegable y mueve la barra
deslizante para fijar la velocidad de la transicin en segundos.
4. Escoge la forma en que quieres que se cierre la capa de popup con ayuda de
este campo. Djalo sin marcar si quieres que la capa popup permanezca abierta
hasta que la cierres manualmente, o mrcala si quieres que se cierre cuando
hagas clic en otra parte de la pgina 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 mtodo de clic para visualizar la capa (del
dilogo de Enlace), la capa se muestra si haces clic en el objeto y se oculta cuando
haces clic en cualquier otro lugar de la pgina (o cuando haces clic en el botn para
cerrar la capa de popup si has desactivado la opcin "Cerrar popup
automticamente" que se muestra arriba).
70

Capas popup
Una alternativa ms 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, mens o descripciones
de objetos detalladas.

Para hacer esto, posiciona todos los objetos que quieras como popup en una nueva
capa (en la GALERA DE PGINAS Y CAPAS haz clic en NUEVA CAPA mientras est
seleccionada una capa; no utilices la capa MouseOver), luego define la propiedad
MouseOver (pestaa MOUSEOVER del dilogo de Animacin web) del objeto original
para activar la visualizacin 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 GALERA DE PGINAS Y CAPAS mientras est

seleccionada una capa para crear una nueva.
2. Dibuja un rectngulo redondeado con la HERRAMIENTA DE RECTNGULO, haz clic
en un parche de color (plido) en la LNEA DE COLOR para darle un color de
relleno. Para una buena medida dale una sombra suave (selecciona la
HERRAMIENTA DE SOMBRA y arrastra del rectngulo).
3. Crea un bloque de texto en la parte superior de tu rectngulo. Selecciona la
HERRAMIENTA DE TEXTO y arrastra en sentido diagonal a travs del rectngulo.
Escribe tu texto. Si ahora quieres ocultar la capa popup, quita la seleccin de la
casilla con el ojo de tu nueva capa.
4. De vuelta en la capa base (MouseOff) (haz clic en la GALERA DE PGINAS Y
CAPAS para definir esta capa como la actual), selecciona el texto que quieras que
active el popup utilizando el mtodo usual (en la herramienta de texto). A
continuacin abre el dilogo Animacin web (clic derecho y selecciona
ANIMACIN WEB... ) y en la pestaa 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 opcin
MOSTRAR CAPA POPUP en la pestaa ENLACE del dilogo de Propiedades web (en la
pgina 272).

www.magix.es
 Primeros pasos 71

Nota: La capa MouseOver aparece y desaparece cuando pones y quitas el cursor del
ratn sobre el objeto trigger. Si empleas un mtodo 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 pgina.

Fotos pop-up
Hay una segunda forma ms fcil de mostrar fotos ampliadas de miniaturas que no
implica crear nuevas capas. Ver aqu (en la pgina 43). Este mtodo 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.

Publicacin de tu pgina web

Para subir tu pgina web a Internet de forma instantnea puedes publicarla en
TaskPilot, que ofrece un servicio de alojamiento web gratuito, o bien publicarla en otro
espacio web. Publicarla en TaskPilot resulta ms sencillo porque est integrado en
Web Designer. Selecciona "ARCHIVO" >"PUBLICAR" pgina web. Luego inicia sesin en
TaskPilot o pulsa en el enlace PUBLICAR EN OTRO ALOJAMIENTO WEB .

TaskPilot

Pulsa el botn REGISTRARME si todava no dispones de una cuenta en TaskPilot:

registrarse es gratis, fcil y rpido. Introduce tu e-mail y contrasea: haz clic en
MANTENERME REGISTRADO para evitar tener que iniciar sesin en futuras sesiones con
Web Designer.

Cuando aparezca el dilogo de publicacin de TaskPilot, haz clic en el botn PUBLICAR

para poner tu pgina web en la base de tu espacio web o introduce el nombre de una
subcarpeta si quieres publicar varias pginas. Para conseguir una direccin de pgina
web diferente, pulsa el botn NUEVA DIRECCIN DE PGINA WEB.

Otros alojamientos web

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

Necesitas:
Direccin del alojamiento
Nombre de usuario
Contrasea
Subcarpeta
URL de la pgina web publicada

Consulta el apartado principal Publicar pgina web (en la pgina 318) para ms
informacin.
72

Transferencia de datos
1. Tras hacer clic en EXPORTAR (o PUBLICAR ), Web Designer abre una pequea
ventana que muestra el progreso de la transmisin de datos y avisa cuando la
publicacin se ha completado. Si has introducido la URL de tu pgina web con
los detalles FTP, puedes acceder directamente a ella desde aqu.
2. Como alternativa, tan pronto como la transferencia finalice, podrs abrir una
ventana de navegador e ir a la URL de la pgina web publicada.

Nota: si introduces una subcarpeta en la pestaa "Publicar" del dilogo "Propiedades

web", la pgina se guardar ah.

Nota: muchos servidores utilizan nombres de archivo que distinguen entre

maysculas y minsculas. As, por ejemplo, la direccin
web "xara.com/productos.htm" no es lo mismo que "xara.com/Productos.htm".
Para reducir la confusin y la probabilidad de errores, Web Designer obliga a que
todos los nombres de pgina se escriban en minsculas y contengan solo caracteres
permitidos. Esto significa que no estn permitidos los espacios en los nombres de
pgina. Sugerimos utilizar un guin 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: pgina web, presentacin, foto y animacin. 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

despus de iniciar MAGIX Web Designer 11 Premium. La plantilla de animacin es la
plantilla por defecto para los documentos con animaciones.

El botn NUEVO DOCUMENTO de la barra de control estndar 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 pgina 487)" para
ms 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 arrstralo 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, seleccinalo en ARCHIVO > ABRIR
RECIENTE
O, selecciona ARCHIVO > ABRIR (Shortcut "Ctrl+O").

O, haz clic sobre el botn ABRIR en la barra de control ESTNDAR .

Se mostrar el dilogo de apertura. El dilogo te permite una seleccin mltiple 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 botn.
74

Si VER VISTA PREVIA en la esquina superior derecha est activado, el archivo

seleccionado se ver en una vista previa an ms grande (esto no funciona en el caso
de una seleccin de varios archivos).

Compartir documento en mltiples ubicaciones

Web Designer es compatible con varias caractersticas innovadoras relacionadas con
el servicio de unidad en la nube. Estos servicios brindan almacenamiento gratis de
archivos en la nube, una pequea herramienta que puedes instalar en el escritorio de
tu PC que sincronizar automticamente en la nube los archivos que guardes en tu
disco duro.

Web Designer sabr si has cambiado los archivos y los cargar automticamente.
Esto significa que puedes abrir el archivo en mltiples equipos y, si haces un cambio y
guardas el archivo en uno, se actualizar en el Web Designer de los dems. Adems,
puedes optar por compartir el archivo en la nube con otra persona y, si ella hace
cambios al archivo y los guarda, tu versin tambin 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 edicin y te dar la opcin 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 ttulo
Nombre del archivo que se visualiza
Barra de botones estndar
Barra de galeras
Barra de informacin
Barra de herramientas
Reglas
Pgina
Tablero de dibujo
Lnea de colores
Barra de estado
Indicadores de arrastre/ajuste en vivo
Barra de herramientas web
Pestaas 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 rectngulo blanco representa la hoja de papel (la
carilla o pgina). El borde gris es el tablero de dibujo.

Puedes cambiar el tamao de la pgina con un clic derecho y escogiendo OPCIONES DE

PGINA y luego la pestaa TAMAO DE PGINA (en la pgina 495).

Documento seleccionado y barra de ttulo

Puedes abrir ms de un archivo en simultneo en Web Designer. Vers todos los
documentos abiertos como pestaas en la parte superior del espacio de trabajo.

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

en las pestaas de documento. Haz clic derecho en la pestaa 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 pestaas muestran todos los documentos abiertos y la pestaa 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, reordenndolas o creando y ocultando barras.

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

Puedes personalizar la barra de control ESTNDAR de la misma forma que las otras
barras de control.

Estos iconos con un tringulo indicador en la esquina inferior derecha cuentan con
barras desplegables. Si colocas el cursor del ratn sobre estos iconos, vers la barra
desplegable con ms iconos.

Para ms informacin sobre la personalizacin de barras de control consulta el

captulo "Personalizacin de Web Designer" (en la pgina 497).

www.magix.es
 Manejo de documento 77

Barra de informacin
Esta es una barra de control especial. Su contenido cambia segn la herramienta que
selecciones. Las barras de informacin para algunas herramientas especficas estn
descritas en sus respectivos captulos.

Las barras de informacin no pueden personalizarse.

Barra de informacin de la herramienta de seleccin

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 smbolos de la barra de herramientas tienen un pequeo

tringulo indicador en la esquina inferior derecha. Esto significa que est
disponible una barra desplegable con ms smbolos de herramientas.
Mantn el cursor del ratn sobre el smbolo para que aparezca la barra
desplegable. Luego podrs llevar el cursor del ratn sobre cada smbolo de
la barra para ver un consejo de herramienta con la indicacin de su
funcionamiento.

Haz clic sobre una herramienta para seleccionarla (algunas herramientas

tambin tienen shortcuts de teclado).
Para ms informacin sobre la personalizacin de barras de control
consulta el captulo "Personalizacin de Web Designer" (en la pgina
497).

Reglas
Puedes ocultar reglas, cambiar el punto cero (origen) y
utilizarlas para crear lneas gua. Para ms informacin, lee
"Reglas (en la pgina 92)".
78

La barra de estado

Objetos seleccionados
Opciones disponibles
Indicadores
Cursor del ratn 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 posicin 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
edicin en tiempo real. El dibujo con las herramientas de dibujo libre, lneas
rectas, Quickshape, rectngulos y elipses tambin se realiza en tiempo real con
esta con esta opcin. Si tu PC no puede trabajar con un documento
particularmente complejo, esta opcin se apagar automticamente para
garantizar que la edicin siga siendo rpida y eficiente.
Indicador de ajuste
Este indicador est activo cuando se ha seleccionado la opcin VENTANA >
AJUSTAR A OBJETOS . Muestra cuando mueves un punto cerca de la distancia de
ajuste de un objeto. Para ms informacin sobre el ajuste, consulta "Trabajar con
objetos (en la pgina 130)".

Coordenadas X-Y
Web Designer muestra las medidas relativas a la esquina inferior izquierda de la
pgina. Sin embargo, esto puede configurarse. Para ms informacin, lee el captulo
Trabajar con objetos.

Modo de pantalla normal/completa

En el modo de pantalla normal, parte de la ventana est ocupada por la barra de ttulo,
la barra de men y las barras de desplazamiento. Esto puede no ser conveniente si
necesitas la mayor superficie de edicin posible. Web Designer tiene otro modo de
www.magix.es
 Manejo de documento 79

pantalla llamado "pantalla completa" que muestra un monitor ms ordenado. Puedes

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

La pantalla normal/completa se controla a travs de VENTANA > PANTALLA COMPLETA

o con un clic derecho y la opcin PANTALLA COMPLETA ("8" del teclado numrico).

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 estn descritas ms adelante.

Escoge Ventana > Nueva vista para abrir otra ventana. Puedes tener el mismo
documento abierto en diferentes ventanas.

Seleccin de la ventana que se quiere visualizar

Cada ventana que est abierta se muestra como una pestaa debajo de la barra de
informacin. Haz clic en una pestaa para ver la ventana o clic en el men VENTANA y
escoge un nombre para la ventana en la parte inferior.

Orden de mltiples ventanas

"VENTANA > ORDENAR VISTAS" > te ayuda a organizar mltiples ventanas. Cada
ventana tiene su propia barra de ttulo 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 ms de

tres ventanas, como superpuestas.

Minimizar ventanas mltiples

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 impresin 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 tamao del documento y de los objetos permanece igual (el cambio de tamao de
documento se describe ms adelante). Para cambiar el valor de zoom puedes usar la
herramienta de ZOOM, el ratn o las barras de control.

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

zoom entre 100% y 400%. El nmero 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 mantn 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 ratn

Si tu ratn tiene ruedita:
Pulsa Ctrl y gira la rueda del ratn para cambiar el nivel de zoom.

Tambin puedes configurar una tecla del ratn para el zoom. Adems, puedes
cambiar la accin de la rueda del ratn entre desplazamiento y zoom en
Herramientas > Opciones > Pestaa del ratn (en la pgina 493). La accin 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 ms del documento).
Arrastra el ratn diagonalmente para crear un rectngulo. Al soltar la tecla del
ratn, el rea dentro del rectngulo se ampliar para adaptarse al tamao de la
ventana.

www.magix.es
 Manejo de documento 81

Cambiar el zoom utilizando la barra de informacin/barra

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

Mantn el cursor del ratn sobre el smbolo del zoom de la barra de

herramientas estndar para ver la barra desplegable.

Para cambiar el zoom:

Shortcut: Ctrl + R. Haz clic en el botn ZOOM ANTERIOR. Este es el valor de
zoom antes de la configuracin actual. Usar este botn 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 botn Zoom a 100%. El factor del zoom cambia al
100%

Shortcut "Ctrl + + J". Haz clic en el botn ZOOM AL DIBUJO . La ventana

muestra todos los objetos del documento.

Shortcut "Ctrl + + P". Haz clic en el botn ZOOM A LA PGINA . La ventana

muestra toda la pgina o pares de pginas.

Shortcut "Ctrl + + Z". Haz clic en el botn ZOOM A LA SELECCIN . El objeto u

objetos seleccionados ocuparn toda la ventana.

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

implementar el cambio o selecciona algn valor de
zoom predeterminado incluyendo los mencionados
anteriormente (pgina, dibujo, seleccionado, anterior)
en el men desplegable.

Desplazar el documento dentro de la ventana

La forma ms rpida y fcil de desplazar el documento es utilizar el botn central del
ratn (que muchas veces es tambin la ruedita). Haz clic y pulsa la tecla del ratn y
mueve el ratn. Suelta el botn para volver a la herramienta anterior.

Para mover el documento dentro de la ventana tambin puedes:

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

La visualizacin de las barras de desplazamiento es opcional. Escoge Ventana >

Barras > Barras deslizantes para desactivarlas
82

Usa la rueda del ratn para desplazar el documento hacia arriba y hacia abajo
(Shift + rueda del ratn para izquierda a derecha)

Puedes cambiar la accin de la rueda del ratn entre desplazamiento y zoom en

Herramientas > Opciones > Pestaa del ratn. La accin 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 mantn 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). Despus puedes usar el ratn para desplazar el
documento por la ventana.

La barra de informacin de la herramienta de DESPLAZAMIENTO es la misma que la

barra de informacin de la herramienta de ZOOM (descrita anteriormente).

Cambiar el tamao de pgina

Cuando se abre un nuevo documento en Web Designer el tamao de pgina es 760 x
700 pxeles (SVA pgina web). Sin embargo, si lo deseas puedes cambiar el tamao
de pgina para que sea compatible con otras resoluciones de pantalla como VGA.

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

2. De ser necesario, escoge la pestaa de tamao de pgina.
3. Selecciona el tamao de pgina que deseas.

Si seleccionas PERSONALIZAR en la seleccin de tamao puedes configurar un ancho

y un alto personalizado en los campos de abajo.

Cada pgina del documento (pgina web exportada) puede tener una tamao
diferente. Con la opcin TODAS LAS PGINAS DEL SITIO WEB CON EL MISMO TAMAO
puedes determinar un tamao de pgina para que se aplique a todas las pginas del
documento.

Puedes cambiar el alto de la pgina arrastrando el borde inferior de la

pgina con la herramienta de seleccin.

www.magix.es
 Manejo de documento 83

Pginas mltiples en el documento

Un documento de MAGIX Web Designer 11 Premium puede tener mltiples pginas.
Cada pgina se exporta a una pgina en HTML independiente, es decir, cada
documento en MAGIX Web Designer 11 Premium corresponde a una pgina web.

Por defecto, cuando abres o creas un nuevo documento web, Web Designer muestra
solamente una pgina. Los documentos impresos, sin embargo, se visualizan por
defecto en vista de multipgina. Haz clic derecho en una pgina o su tablero de
dibujo y selecciona o desactiva VISTA MULTIPGINA para cambiar entre modos de
presentacin.

La pgina actual
Si haces clic en una pgina de un documento multipgina, se convertir en la pgina
actual.

Debes estar situado en la pgina actual cuando desees introducir, duplicar o

mover pginas, como pasaremos a explicarte en las secciones siguientes.

Puedes saber en qu pgina del documento te encuentras actualmente

mediante los indicadores situados en las esquinas de la pgina.

Introducir pginas en tu documento

Haz clic derecho sobre una pgina y escoge PGINA NUEVA o NUEVA DOBLE PGINA.
Se insertar una nueva pgina en blanco despus de la pgina actual o haz clic
derecho sobre una pgina y escoge DUPLICAR PGINA ACTUAL o DUPLICAR DOBLE
PGINA ACTUAL . Un duplicado de la pgina actual se insertar detrs de la pgina.

La nueva pgina ser la

misma que la pgina original
incluyendo su tamao y
orientacin, e incluir todo
su contenido, de manera tal
que la puedas utilizar como
plantilla para nuevos
contenidos.
Tambin puedes utilizar las
opciones del men "EDITAR >
PGINAS "

Adems, la barra de herramientas estndar cuenta con una barra desplegable que te
permite aadir, duplicar y eliminar pginas rpidamente.
84

Mantn el cursor del ratn sobre cada smbolo de la barra para ver un consejo de
herramienta para cada operacin. Puedes agregar una nueva pgina en blanco,
duplicar la pgina actual o eliminarla.

Copiar y pegar pginas

Puedes copiar y pegar pginas enteras en el documento actual o pegar pginas en
otro documento. Esto copia las dimensiones de pgina, las capas y otros atributos de
la pgina, adems de todos los objetos en la pgina.

Para copiar la pgina actual, borra cualquier seleccin actual pulsando Esc o haz clic
en una parte vaca de la pgina o del rea de trabajo. En la barra de estado aparecer
"No hay objetos seleccionados". Haz clic en una parte en blanco de la pgina y
selecciona COPIAR PGINA (o pulsa "Ctrl + C").

Cuando pegas una pgina copiada, se aade inmediatamente despus de la pgina

actual. Para pegar usa las teclas "Ctrl + V" o haz clic derecho en la pgina y
selecciona PEGAR > PGINA en el men contextual.

Nota: si el documento en el que se pega una pgina tiene la opcin TODAS LAS
PGINAS DEL DOCUMENTO IDNTICAS activada en ARCHIVO> OPCIONES DE PGINA ,
las dimensiones de la pgina pegada sern reemplazadas por las dimensiones de
pgina del documento. Entonces, la nueva pgina tendr las mismas dimensiones
que las otras pginas del documento.

Mover pginas dentro del documento

El modo ms fcil de cambiar entre pginas en tu documento es arrastrar la pgina en
miniatura en la galera pginas y capas (que est fijada a la parte derecha por
defecto). Tambin puedes seleccionar ms de una pgina a la vez y arrastrar para
reordenarlas.

Como alternativa para mover la pgina actual:

Selecciona "EDICIN" > "PGINAS" > "MOVER PGINA HACIA ARRIBA" o haz clic
derecho y selecciona MOVER PGINA HACIA ARRIBA para cambiar la pgina actual
por la anterior.
Selecciona "EDICIN" > "PGINAS" > "MOVER PGINA HACIA ABAJO" o haz clic
derecho y seleccionaMOVER PGINA HACIA ABAJO para cambiar la pgina actual
por la posterior.

Estas opciones de men sern desactivadas si ests en la primera o la ltima pgina

del documento respectivamente.

www.magix.es
 Manejo de documento 85

Eliminar pginas de tu documento

Para eliminar la pgina actual de tu documento haz clic derecho y selecciona
ELIMINAR PGINA ACTUAL o ve a "EDICIN" > "PGINAS" > "ELIMINAR PGINA ACTUAL" .
La pgina actual y todos sus contenidos sern eliminados. O selecciona una o ms
pginas en la galera de pginas y capas y pulsa el botn "Eliminar" o la tecla de
borrado.

Navegar entre pginas

Adems de los mtodos usuales para moverse dentro de un documento (como la
barra deslizante y la ruedecilla del ratn), existen otras formas de navegar a travs de
las pginas:

Hacia arriba: se mueve hacia arriba del documento (retrocede a la pgina anterior).
La cantidad de desplazamiento depende de tu nivel de zoom. Cuanto ms alejado
ests del documento (zoom out), ms grande ser el desplazamiento.

Ctrl + Re. Pg. (page up): va hacia el centro de la pgina anterior.

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

depende de tu nivel de zoom. Cuanto ms alejado ests del documento (zoom out),
ms grande ser el desplazamiento.

Ctrl + Av. Pg: va hacia el centro de la pgina anterior.

O haz clic en la flecha que apunta hacia arriba o hacia abajo

en la barra de estado de acuerdo a dnde te quieres
desplazar:

La barra de estado tambin es til para saber qu pgina/s ests visualizando

actualmente.

Nota: todos estos movimientos son relativos a las pginas que ests visualizando,
no a la pgina actual.

Galera de pginas y capas

Tambin puedes utilizar la galera de Pginas y capas para administrar
convenientemente las pginas en tu documento. Te permite ver, aadir, duplicar,
eliminar, reorganizar y renombrar pginas desde una sola vista. Para ms informacin,
consulta Galera de pginas y capas (en la pgina 419).
86

Guardar el documento
Esta seccin explica cmo guardar los documentos en el formato de Web Designer
(su formato nativo). Para ms detalles sobre exportar documentos en otro formato,
lee el captulo "Importacin y exportacin (en la pgina 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 perders muchas horas de trabajo invertidas en un documento complicado.
Asegrate de que la funcin de copia de seguridad automtica est activada para que
se realicen copias regulares de los documentos mientras trabajas. Consulta la seccin
Copias de seguridad automticas (en la pgina 88) a continuacin para ms detalles.

Opcin Guardar (en el men Archivo)

(Shortcut Ctrl+S o clic sobre el botn Guardar en la barra de control
ESTNDAR ).

Esta opcin te ofrece una forma rpida de volver a guardar el documento con el
mismo nombre de archivo. La opcin no est disponible salvo que hayas realizado
cambios y todava no los hayas guardado. Para un nuevo documento que todava no
se ha guardado en disco, la opcin acta como "Guardar como" (descrita a
continuacin).

Guardar como (en el men Archivo)

Esta opcin abre un dilogo que te permite guardar el documento con un nuevo
nombre o en otro directorio. Esta opcin es til para realizar copias de seguridad de
Web Designer.

Guardar todo (en el men Archivo)

Esto acta 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 pginas web, tienen archivos
externos de referencia porque estos no pueden ser integrados al archivo de diseo
.web. Por ejemplo, un archivo Flash (swf) de tu pgina web. Debes mantener el
archivo Flash junto al archivo de diseo porque si no, cuando quieras exportar la
pgina web, esta no funcionar de forma correcta. Otra razn por la que es
importante mantener ambos archivos juntos es para cuando quieras enviar el diseo 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 diseo.

www.magix.es
 Manejo de documento 87

Nombres para el directorio de compatibilidad

El archivo de diseo y su directorio de compatibilidad correspondiente se identifican
fcilmente 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 diseo 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 diseo,
recuerda que debes mandar tambin el directorio de compatibilidad.

Cuando cargues un diseo que tiene un directorio de compatibilidad y luego escoges

la opcin "Guardar como", MAGIX Web Designer 11 Premium tambin copiar todo el
directorio de compatibilidad (si existe uno).

Contenido del directorio de compatibilidad

Si utilizas el marcador de lugar (en la pgina 290) del dilogo PROPIEDADES WEB para
insertar una referencia a un archivo externo en tu diseo de la pgina web, MAGIX
Web Designer 11 Premium copiar automticamente 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 automticamente del directorio de compatibilidad. Si
no necesitas ms ese archivo, debers eliminarlo manualmente.

Tambin puedes copiar manualmente archivos al directorio de compatibilidad.

MAGIX Web Designer 11 Premium no eliminar ningn archivo, independientemente
de si estos aparecen en el diseo o no. Esto es as porque hay muchas formas
distintas de colocar referencias a archivos externos en el archivo de diseo. Por
ejemplo, se puede insertar un cdigo complejo de HTML en el diseo que contenga
una referencia a un archivo externo de tu directorio de compatibilidad. O tambin 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 pgina web, por eso no los elimina.

Exportacin de pginas web con directorios de

compatibilidad
Cuando exportas un documento de pgina web, se copiarn todos los archivos de
directorio de compatibilidad a la carpeta que contenga todas las imgenes de tu
pgina web. Si exportas "miSitio.web" a "index.htm", los archivos de la carpeta
"miSitio_web_archivos" se copiarn a la carpeta "index_htm_archivos".
88

Cerrar el documento
Para cerrar el documento:

Seleccionar "ARCHIVO" > "CERRAR".

O pulsa "Ctrl + F4", o tambin "Ctrl + W".
O bien haz clic sobre la X ms pequea de las dos que se encuentran en la
esquina superior derecha.
O incluso haz clic derecho en la pestaa del documento para ver un men de
contexto sensible con una serie de opciones de guardar y cerrar tanto para una
sola pestaa cono para todas las pestaas abiertas.

Haz clic derecho en una pestaa para visualizar mltiples opciones de guardar y cerrar.

Copias de seguridad automticas

MAGIX Web Designer 11 Premium guardar como opcin copias de seguridad de tus
documentos abiertos mientras trabajas. Esto te ayudar a evitar que pierdas tu
trabajo en el caso de un fallo elctrico o de un cierre anormal del programa. Tambin
es til si deseas volver a una versin anterior de tu documento. Para activar o
desactivar las copias de seguridad automticas, abre el dilogo
HERRAMIENTAS >OPCIONES y escoge la pestaa 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 cmo te
gustara 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 ms 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 prxima 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 ms, por lo que
permite realizar una copia de seguridad poco despus. De todas formas, si ests
editando activamente durante un periodo extendido de tiempo es posible que
transcurra bastante ms tiempo que el configurado entre dos copias de seguridad.

La funcin de copia de seguridad automtica 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 razn, se recomienda guardar regularmente los cambios de
edicin interna en el documento principal.

Cuando se realiza una copia de seguridad, vers una barra de progreso en la parte
inferior de la ventana de MAGIX Web Designer 11 Premium mientras se finaliza el
procedimiento.

Ubicacin de la copia de seguridad

Utiliza el botn Explorar si quieres cambiar la carpeta en la que estn guardadas tus
copias de seguridad.

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

opcin de men ARCHIVO>ABRIR RECIENTE>COPIAS DE SEGURIDAD . Esto abre un
dilogo 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 diseo en tu carpeta de copias de
seguridad, pero puedes escoger cambiar este nmero en el campo de revisiones. Las
revisiones que excedan la cantidad establecida, se eliminarn automticamente. 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 mltiples documentos que comparten

el mismo nombre de archivo en diferentes carpetas en tu ordenador, sus copias de
seguridad tambin compartirn el nombre en la carpeta de copias de seguridad. Por
lo tanto, intenta usar nombres de archivo nicos para tus diseos con el propsito
de evitar que las copias de seguridad de un diseo sobrescriban otras con el mismo
nombre.

Documentos sin ttulo

Las copias de seguridad de los documentos que has creado y que no has guardado se
almacenarn con el nombre "Untitled" seguido de un nmero y la fecha/hora. Este
nombre y nmero corresponden a los que se muestran en la barra de ttulo cuando
ests 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 rpido. Por lo tanto, deberas guardar los documentos importantes
con un nombre exclusivo de tu eleccin para poder identificar fcilmente 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 pestaa "Copias de seguridad" del dilogo "Opciones" te permite activar laCOPIA
DE SEGURIDAD AUTOMTICA Y RESTAURACIN . Cuando esta opcin est activada, al
cerrar MAGIX Web Designer 11 Premium, no se te preguntar si quieres guardar los
documentos modificados que todava estn 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 automticamente para que puedas continuar
trabajando desde donde los has dejado.

Ten en cuenta que si tiene cualquier vista abierta de un subdocumento de edicin

interna, estas se cerrarn sin notificacin y se guardarn en el documento principal
cuando se cierre el programa y se hace una copia de seguridad del documento
principal. Las vistas del subdocumento de edicin interna no se vuelven a abrir
cuando se reinicia el programa. Consulta edicin dentro de grupos.

Recuperacin tras cierres anormales del programa

Si has activado las copias de seguridad automticas y el programa se cierra de forma
anormal (debido a un corte de electricidad, por ejemplo), el programa debera
detectarlo al reiniciarse. De ser as, te ofrecer la posibilidad de restaurar la copia de
seguridad ms 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
guardarn en la carpeta de copias de seguridad aun cuando la opcin "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
prxima 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.

Recuperacin de copias de seguridad

Puedes acceder a las copias de seguridad de tus documentos con Archivo>ABRIR
RECIENTES ->COPIA DE SEGURIDAD . Esto abre un dilogo 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 dilogo para limpiar
viejas copias de seguridad de forma peridica.

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

automticamente con el archivo de diseo 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 deberas usar ARCHIVO>GUARDAR
COMO para guardarlo en algn lugar con un nombre adecuado.

Cuadrcula en pantalla
Para ayudarte a disear tu documento, Web Designer puede mostrar una cuadrcula
en la pantalla (la cuadrcula aparece solamente en la pantalla, no se exporta ni se
imprime). La cuadrcula te ayuda a alinear objetos (similar a utilizar una hoja de
grficos como ayuda para dibujar).

Haz clic derecho y escoge "MOSTRAR CUADRCULA/GUAS" > "MOSTRAR CUADRCULA"

para activar y desactivar la visualizacin de la cuadrcula o escoge "AJUSTAR A" >
"AJUSTAR A CUADRCULA" . Tambin puedes escoger la opcin "VENTANA" > "AJUSTAR
A CUADRCULA" .

En este caso, los puntos de cuadrcula actan como imanes y, al mover objetos, estos
se ajustan al punto de cuadrcula ms cercano. Por defecto los documento web tienen
activado "AJUSTE A CUADRCULA", con una cuadrcula de 1 pxel.

El tipo de cuadrcula (isomtrica/rectangular), el punto 0,0 (el origen) y el espaciado

entre los puntos de la cuadrcula se configuran en la pestaa CUADRCULA Y REGLA (en
la pgina 492) del dilogo de opciones. Cualquier cambio que hagas se aplicar solo
al documento seleccionado.
92

El ajuste a los objetos magnticos tambin est activado por defecto para los
documentos web. El ajuste de objeto es una forma muy precisa de alinear lneas,
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 pgina o para alinearlos de forma horizontal o vertical en cualquier parte
en el centro de la pgina o en la esquina de la misma.

Para activar el ajuste de los objetos, haz clic en el botn AJUSTAR A OBJETOS o
haz clic derecho y escoge "AJUSTAR A" > "AJUSTAR A OBJETOS" . Tambin
puedes escoger la opcin "VENTANA" > "AJUSTAR A CUADRCULA" .
Consulta Manejo de objetos (en la pgina 130) para ms detalles sobre el ajuste de
cuadrculas y el ajuste a objetos.

Reglas
Las reglas estn desactivadas por defecto. Para activarlas:

Haz clic derecho y escoge "MOSTRAR CUADRCULA/GUAS" > "MOSTRAR REGLAS"

para activar y desactivar la visualizacin de la cuadrcula.
Pulsa "Ctrl + Shift + R".
O selecciona "VENTANA" > "BARRAS" > "MOSTRAR REGLAS".

Web Designer utiliza las reglas para:

controlar los mrgenes, tabulaciones y sangras (en la pgina 216) en la

HERRAMIENTA DE TEXTO .
para informarte la parte de la pgina que ests viendo;
mostrar la posicin X-Y actual del cursor;
aplicar lneas gua. Si la opcin "VENTANA" > "AJUSTAR A CUADRCULA " est
activada, las lneas gua se ajustan a las divisiones de las reglas. Para ms
informacin sobre lneas gua, lee el apartado guas y lneas gua en el captulo
Manejo de objetos (en la pgina 130).

Cuando creas o cambias el tamao de objetos, puedes utilizar las reglas para
controlar el tamao. Tambin puedes utilizar la HERRAMIENTA DE SELECCIN para un
trabajo ms exacto. Lee Seleccin de objetos para ms informacin.

Las reglas pueden verse sobre el borde izquierdo y el borde superior de la ventana.
Una lnea punteada sobre cada regla sigue la posicin actual del cursor.

Las unidades y nmeros de las divisiones de las reglas son los mismos configurados
para personalizar la cuadrcula en pantalla. Estos valores se configuran utilizando la
pestaa "Cuadrcula y regla (en la pgina 492)" del dilogo "Opciones". Las unidades
actuales y los factores de cambio de tamao 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 CUADRCULA/GUAS" > "MOSTRAR REGLAS" ("Ctrl
+ Shift + R") para activar y desactivar las reglas. Los cambios se aplicarn 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 fcil 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 interseccin de ambas
reglas.

Puedes arrastrar vertical u horizontalmente a lo largo de las reglas o hasta cualquier

otra parte de la ventana de edicin de Web Designer. A medida que lo hagas, una
lnea punteada te mostrar la nueva posicin.

Esto tambin mueve el origen de la cuadrcula de forma que las divisiones de la regla
siempre se encuentren alineadas con la cuadrcula.

Tambin puedes mover el punto cero desde la pestaa CUADRCULA Y REGLA del
dilogo de opciones (descrito a continuacin)

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:

Slo contorno. Ahora, con antialiasing completo para una mayor calidad de
visualizacin de la pantalla
Contornos con pasos de transicin
Color total (sin antialiasing)
Alta calidad (antialising total y suavizado de imagen)
Muy alta calidad (el mejor antialiasing de la industria. La nueva visualizacin de
fotos bicbica aumenta la calidad de fotos reducidas).

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

94

La configuracin CONTORNO muestra solamente el contorno de las formas (se dibujan

como wire frames). Esto facilita la seleccin de objetos que se encuentran detrs de
otros objetos.

La configuracin 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
configuracin de calidad actual.

La tecla de restriccin
La tecla "Ctrl" tiene una funcin especial en Web Designer. Restringe la accin de la
funcin 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 rotacin est restringida a una serie de ngulos predeterminados. Por
defecto, el objeto girar solamente en mltiplos de 45 grados y a cualquier rotacin
en que un borde recto importante del objeto quede vertical u horizontal.

La lnea negra que se encuentra a la

izquierda puede girarse a cualquier
ngulo dentro del crculo. A la derecha se
encuentra la misma lnea, pero al
presionar "Ctrl", solo puede rotarse hasta
las posiciones indicadas.
De forma similar, restringir un rectngulo crea un cuadrado perfecto y restringir una
elipse crea un crculo perfecto. Si sueltas la tecla "Ctrl", ya no estarn restringidos.

La funcin de restriccin de ngulo se define en OPCIONES -> GENERAL -> RESTRICCIN

DE NGULO (en la pgina 491).

www.magix.es
 Manejo de documento 95

Galeras
MAGIX Web Designer 11 Premium usa galeras para suministrar acceso conveniente
a bibliotecas externas de contenido como plantillas, fuentes, colores, cliparts, atribu-
tos de lneas y mapas de bits/fotos. Esta seccin de la ayuda suministra informacin
general sobre caractersticas que son comunes a mltiples galeras. Las secciones
individuales describen caractersticas especficas a una galera en particular.

Por defecto, la GALERA DE PGINAS Y CAPAS est abierta en el modo Pginas (y muestra solo
pginas, no sus capas) y est fijada en la parte derecha de la ventana de Web Designer.

Pgina y capas
Diseos
Mapa de bits
Lneas
Rellenos
96

La GALERA DE PGINAS Y CAPAS te muestra y te permite manipular las pginas de tu

documento y las capas dentro de cada pgina.

Las GALERAS de DISEOS y RELLENOS te permiten escoger entre diferentes plantillas y

estilos suministrados con MAGIX Web Designer 11 Premium.

La GALERA DE MAPAS DE BITS te muestra los mapas de bits y fotos que ests
utilizando en todos los documentos abiertos.

Algunas galeras se describen en detalle ms adelante.

Ver una galera

Para visualizar una galera:

1. Haz clic o pasa el cursor sobre la pestaa vertical de la galera que se encuentra
a la derecha del espacio de trabajo (la barra de galeras). La galera se abrir
automticamente. Al quitar el cursor de la galera, esta se cerrar
automticamente.
2. Para mantener una galera abierta mientras trabajas, haz clic en el botn
OCULTAR AUTOMTICAMENTE que se encuentra en la esquina superior derecha.
El botn OCULTAR AUTOMTICAMENTE se transforma en un alfiler con la punta
hacia abajo para indicar que la galera est fijada al espacio de trabajo.
3. Para cerrar una galera fijada, consulta Cerrar una galera (en la pgina 103).
4. Si quieres que las galeras dejen de abrirse automticamente al hacer
MouseOver, desactiva la opcin BARRA DESPLEGABLE del men "Herramientas" >
"Galeras".

Galera no fijada: la galera se cierra al quitar el cursor de la misma.

Galera fijada: la galera permanece abierta aunque quites el cursor de la

misma y, adems, puedes moverla y fijarla (en la pgina 97) donde quieras.

Nota: por defecto, las GALERAS DE LNEAS y RELLENOS no muestran su ttulo hasta
que no se hayan abierto, sino sus iconos individuales. Web Designer siempre
muestra el ttulo de la ltima galera que has visto.

www.magix.es
 Manejo de documento 97

Mover y fijar una galera

Puedes liberar cualquier galera de la barra de galeras, si deseas moverla a una
ubicacin ms prctica en el espacio de trabajo. Tambin puedes fijar la galera (o un
grupo de galeras, consulta Agrupar galeras) en la parte superior, inferior, derecha o
izquierda del espacio de trabajo.

Puedes mover una galera a cualquier lugar del espacio de trabajo

Para mover una galera:

1. Abre una galera y haz clic en el botn OCULTAR AUTOMTICAMENTE para fijar la
galera. El botn muestra un alfiler hacia abajo para indicar que la galera puede
moverse y fijarse en otro lugar.
2. Haz clic en la barra de ttulo de la galera y arrastrar para moverla. Puedes dejar
que la galera "flote libremente" por cualquier lugar del espacio de trabajo o
puedes fijarla en una nueva ubicacin.

Si mueves cualquiera de las galeras, las otras la acompaarn como si fuera un grupo.
Accede a una galera individual con un clic sobre su pestaa en la parte inferior del
grupo o haz clic y arrastra la pestaa de la galera alejndola del grupo.

Mapa de bits
Lnea
Relleno
98

Si haces clic y arrastras la barra de ttulo de una galera que puedes fijar, aparecern
flechas en el espacio de trabajo que te indicarn los lugares en donde puedes fijar la
galera.

Al arrastrar una galera, aparecern flechas de fijacin en la parte central, superior, inferior,
izquierda y derecha del espacio de trabajo. Arrastra la galera hasta una flecha para fijarla all.

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

www.magix.es
 Manejo de documento 99

Para fijar una galera:

1. Haz clic y arrastra la galera hasta la flecha que apunta a la ubicacin en donde
quieres colocar la galera. Por ejemplo, si quieres colocar la galera en la parte
superior de la pantalla, muvela hacia la flecha que seala hacia la parte superior
del espacio de trabajo.
2. Cuando el cursor llega a la flecha, un recuadro gris transparente indica la nueva
ubicacin de la galera.
3. Suelta el botn del ratn para fijar la galera. Ahora, cuando cierres u ocultes
automticamente la galera, la pestaa se mostrar en esta nueva ubicacin.
4. Pasa el cursor o haz clic sobre la pestaa para volver a abrir la galera.

Nota: para mover las galeras a su posicin por defecto, escoge BARRAS DE
CONTROL del men VENTANA , haz clic en GALERAS y finalmente en RESTAURAR .

Agrupacin de galeras
Puedes arreglar dos o ms galeras de forma que se encuentren cerca unas de otras.

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

Tambin puedes agrupar galeras y mover todo el grupo a una nueva ubicacin si, por
ejemplo, ests trabajando principalmente con dos o tres galeras que quieres que se
encuentren cerca unas de otras y a las que deseas acceder fcilmente.
100

Ejemplo de un grupo de galeras con pestaas de galera en la parte inferior. Haz clic y arrastra
para agregar o quitar una galera del grupo.

Para agrupar galeras:

1. Desactiva el botn OCULTAR AUTOMTICAMENTE en una de las siguientes

galeras: MAPAS DE BITS, LNEAS , RELLENO, . La galera se agrupar
automticamente con las otras cinco galeras y se mostrarn como pestaas en
la parte inferior del grupo.
2. Para quitar una galera de un grupo, haz clic en su pestaa y arrstrala hacia
afuera.
3. Haz clic en una pestaa para abrir una galera del grupo.
4. Para agregar una galera a un grupo, haz clic y arrastra la galera hasta el grupo.
Aparecern cuatro flechas en el centro del grupo.
5. Arrastra y suelta la galera en el cuadrado del centro de estas flechas para que
Web Designer la agregue al grupo y su pestaa se agregue al final del grupo.
6. Cuando fijas un grupo de galeras, todas las galeras dentro del grupo tambin
estn fijadas. Al ocultar automticamente o cerrar un grupo de galeras, vers
todas las pestaas de las galeras del grupo en el borde del espacio de trabajo
ms cercano a la ltima ubicacin en donde se encontraban fijadas.

www.magix.es
 Manejo de documento 101

Uso de las galeras

Para plegar o desplegar una seccin en una galera:

Haz clic sobre el icono PLEGAR/DESPLEGAR .

O haz doble clic sobre el ttulo de la seccin.
O haz clic derecho sobre una seccin para ver el men pop-up. Selecciona
PLEGAR/DESPLEGAR seccin. El men pop-up tambin tiene opciones para abrir la
seccin siguiente o la anterior.

La ilustracin muestra la galera desplegada. Otras galeras son similares.

Los botones de la parte superior dependen de la galera (p.ej. RELLENO y TRANSP son
opciones especficas de la GALERA DE MAPA DE BITS .) De todos modos, la mayora de
las galeras presenta estos botones:

APLICAR inserta el tem seleccionado de la galera. Haz clic sobre un tem para
seleccionarlo.

OPCIONES abre un men en donde puedes escoger:

102

BUSCAR : se describe ms adelante en la bsqueda de un nombre de tem.

ORDENAR : se describe ms adelante en el orden de los tems en una galera.
PROPIEDADES : permite controlar el tamao de los iconos y la cantidad de
informacin que se muestra en la galera.
Aadir (galeras de clipart, rellenos y fuentes): descrito a continuacin en aadir
tems en una galera.
ELIMINAR (galeras de clipart, rellenos y fuentes): descrito a continuacin en
eliminar secciones de una galera.

Seleccionar tems
Para seleccionar un tem:

Haz clic sobre un tem para seleccionarlo.

O haz clic sobre un tem, despus +clic sobre otro tem: todos los tems entre
los dos puntos se seleccionarn.
O Ctrl+clic para aadir ese tem a la seleccin.

Reordenar tems en la galera

En algunas galeras, "OPCIONES - > ORDENAR" abre un campo de dilogo. Puedes
ordenar por nombre y, dependiendo de la galera, por otros criterios. Los controles de
clave primaria controlan el orden inicial. Para algunos parmetros como tipo o
longitud de nombre, es posible que haya dos o ms archivos con el mismo tipo o
longitud de nombre. Estos archivos pueden ordenarse usando la clave secundaria.

Aadir a la galera
Es posible que quieras aadir tems extra para estas galeras. (slo es posible en las
galeras de DISEOS & RELLENOS ). Para esto:

1. Copia los archivos que quieres aadir a un nuevo directorio usando el explorador
de Windows.
- Para la GALERA DE CLIPARTS , estos archivos pueden ser cualquier tipo de la
amplia gama de archivos de vectores o mapas de bits.
- Para la GALERA DE RELLENOS puede ser cualquiera de los formatos de mapa
de bits compatibles con Web Designer (listados en importacin y
exportacin (en la pgina 464)).
2. En cada galera, pulsa el botn "DISEOS DE DISCO/RELLENOS" . Se abrir una
ventana de dilogo.
3. Usa este dilogo para seleccionar el directorio que quieres aadir.
4. Haz clic en "AADIR" . Esto crea una nueva seccin en la galera.

www.magix.es
 Manejo de documento 103

Si despus quieres aadir ms tems a la carpeta:

1. Copia los archivos nuevos en la carpeta existente.

2. En la galera, pulsa el botn "DISEOS DE DISCO/RELLENOS" . Se abrir una ventana
de dilogo.
3. Usa este dilogo para seleccionar el directorio que quieres aadir.
4. Haz clic en "ACTUALIZAR" para actualizar la seccin en la galera.

Eliminar secciones de una galera

Para eliminar una seccin de una galera (vlido slo para las galeras de CLIPARTS y
RELLENOS ):

1. Haz clic sobre el ttulo de la seccin o secciones que quieres eliminar.

2. Haz clic en "ELIMINAR" .

Si posteriormente quieres volver a utilizar la seccin, aade la carpeta a la galera

(descrito anteriormente).

Cerrar una galera

Por defecto, el botn OCULTAR AUTOMTICAMENTE de las galeras est activado (es
decir, que el botn OCULTAR AUTOMTICAMENTE que se encuentra en la esquina
superior derecha no est fijado). De esta forma, la galera se cerrar automticamente
cuando alejes el cursor.

Sin embargo, si has desactivado el botn OCULTAR AUTOMTICAMENTE (galera

fijada), tendrs que cerrar la galera de forma manual.

Para cerrar una galera liberada, haz clic en el botn CERRAR que se encuentra en la
parte superior derecha de la galera. La galera se cerrar y su pestaa se mostrar en
la barra de galeras.

Para cerrar una galera fijada, haz clic en OCULTAR AUTOMTICAMENTE (alfiler) o
CERRAR en la parte superior derecha de la galera. La galera se cierra y su pestaa se
mostrar en el lugar del espacio de trabajo en donde la hayas fijado.

Para volver a abrir la galera, pasa el cursor sobre ella o haz clic sobre la pestaa.

Nota: para eliminar una galera completamente, selecciona GALERAS de men

HERRAMIENTAS y selecciona la galera que quieres eliminar.
104

Eliminar una galera del espacio de trabajo

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

Para eliminar galeras del espacio de trabajo, realiza una de las siguientes opciones:

Escoge GALERAS del men HERRAMIENTAS y selecciona la galera que quieres

eliminar. La galera seleccionada desaparecer del espacio de trabajo. Si quieres
volver a ver la galera, ve a GALERAS en el men HERRAMIENTAS y escoge la
galera 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 GALERAS . Haz clic en el recuadro
GALERAS para ver la barra de herramientas de galeras. Haz clic en CERRAR . En la
barra de herramientas Galeras que aparecer en la parte superior del espacio de
trabajo, puedes activar una galera 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
correccin 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
operacin, sino volver hacia atrs deshaciendo varias operaciones. Por lo tanto,
puedes experimentar libremente sabiendo que siempre puedes eliminar lo que no
quede bien.

La funcin deshacer
Deshacer cancela el efecto de la ltima operacin. Para deshacer una
operacin:

Haz clic sobre el botn DESHACER de la barra de control ESTNDAR.

O escoge Editar > Deshacer (la formulacin exacta te dice cul 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 funcin deshacer para seguir retrocediendo por la secuencia de las
operaciones previas.

www.magix.es
 Manejo de documento 105

La funcin rehacer
Rehacer cancela la funcin deshacer anterior. Para rehacer la ltima operacin:

Haz clic sobre el botn REHACER de la barra de control ESTNDAR.

O escoge Editar > Rehacer (la formulacin exacta te dice cul 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 funcin rehacer solo puede aplicarse inmediatamente despus de la funcin

deshacer. No puedes rehacer tras modificar el documento (por ejemplo, moviendo o
aadiendo un objeto).
106

Trabajar con objetos

La herramienta de seleccin
La HERRAMIENTA DE SELECCIN es la herramienta principal para seleccionar,
mover, girar y cambiar el tamao de los objetos. Generalmente se utiliza
ms que cualquier otra herramienta y es la herramienta central para
manipular documentos.

Dimensiones de seleccin
% de controles de tamao
Bloquear relacin de aspecto
Girar e inclinar
Voltear
Escalar anchos de lnea
Aplicar nombres

Para utilizar la HERRAMIENTA DE SELECCIN :

Haz clic sobre la HERRAMIENTA DE SELECCIN en la BARRA DE HERRAMIENTAS

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

Cuando cambies a la HERRAMIENTA DE SELECCIN , 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 SELECCIN es la herramienta ms utilizada, existe un

shortcut adicional para permitirte cambiar a esta herramienta para realizar una
seleccin u otra operacin y volver rpidamente a la herramienta anterior. Si ests
utilizando otra herramienta puedes cambiar fcilmente a la herramienta de
SELECCIN :

Pulsa y libera Alt+S para cambiar a la herramienta de SELECCIN . 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 seleccin de objetos

Una vez que el objeto est seleccionado, puedes utilizar las siguientes teclas para
cambiar la seleccin:

Fin selecciona el objeto de atrs.

Inicio selecciona el objeto de adelante.
"Tab" selecciona el objeto siguiente hacia atrs.
+Tab selecciona el objeto siguiente hacia adelante.

Los objetos del frente y el fondo se describen en Trabajar con objetos (en la pgina
106).

Marco de seleccin
Para seleccionar varios objetos, pulsa y mantn pulsada la tecla del ratn. Al arrastrar
el ratn se dibuja un rectngulo de seleccin y todos los objetos dentro del rectngulo
quedarn seleccionados.

Algunos programas de dibujo llaman a este rectngulo "marco de seleccin".

Si hay algn objeto que no te permite dibujar un rectngulo porque el objeto se

mueve, pulsa "" mientras arrastras el rectngulo de seleccin.

Ampliar seleccin
Para seleccionar objetos adicionales:

+clic sobre ellos.

O +arrastrar el ratn. Esto dibuja un rectngulo de seleccin y aade los
objetos dentro del rectngulo a la seleccin.

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

Seleccin 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 seleccin
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). Podrs hacerlo fcilmente 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 segn su orden en el nido. Contina 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 seleccin y la copia con clic derecho no
funcionan para la seleccin 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 podrs 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.

Seleccin y capas
No puedes seleccionar objetos que se encuentran en capas bloqueadas o invisibles.

Consulta "Galera de pginas y capas (en la pgina 419)" para obtener ms detalles
sobre capas.

Seleccionar todos los objetos

Para seleccionar todos los objetos:

Escoge Edicin > 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 Edicin > Borrar seleccin.
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 seleccin
Cada objeto seleccionado muestra un marcador de seleccin para sealar 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 tambin
describe lo que est seleccionado.

Controles deslizantes de lmites de seleccin

Los controles deslizantes de lmites de seleccin te permiten cambiar el tamao y
extender los objetos seleccionados. Para leer ms informacin sobre este tema ve a
Extender o reducir objetos. Varios clics sucesivos sobre un objeto cambia entre
mostrar los controles de lmite de seleccin y rotacin.

Tab
Si hay un objeto seleccionado, pulsar Tab y +Tab cambiar la seleccin al objeto
anterior y siguiente en el documento.

Mover objetos
Para deslizar un objeto sobre la pgina

1. Escoge la herramienta de SELECCIN .

2. Arrastra el objeto hasta la posicin deseada. Pulsa Ctrl para limitar la direccin
de movimiento a uno de los ngulos de restriccin.
110

Puedes definir los ngulos de restriccin. Consulta el captulo Personalizacin de

Web Designer.

Pulsa Ctrl+Alt y podrs 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 despus de
comenzar a arrastrar el objeto, salvo que quieras restringir el movimiento.

Tambin puedes mover objetos usando las teclas de flecha. Esto se describe en la
prxima pgina.

Soltar una copia

Durante un movimiento (y mientras pulsas la tecla izquierda del ratn) haz clic
derecho o pulsa + del teclado numrico 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 ratn y arrastra. Esto arrastrar
inmediatamente una copia del objeto. Haz clic izquierdo para dejar una copia en la
posicin actual del ratn.

Rellenos
Generalmente, si mueves un objeto, su relleno tambin se mover:

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

Esto tambin es aplicable al girar, doblar, extender o cambiar el tamao de objetos.

Web Designer tambin puede mover el objeto pero no el origen del relleno. Para
hacer esto, pulsa la tecla - en el teclado numrico 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 magntico ni de cuadrcula. (Los

ajustes se describen ms 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 pxel
Alt + 10 pxeles

Puedes cambiar la distancia normal de desplazamiento en la pestaa GENERAL de

Herramientas > Opciones. (Consulta el captulo Personalizacin de Web Designer (en
la pgina 491).

El desplazamiento funciona en la mayora 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 "EDICIN" > "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
automticamente con esta operacin. Por ejemplo, si copias un botn 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 crearn si todava no existen y se
copiarn los objetos de los botones sobre ellas.

"Ctrl + Shift + V" o "EDITAR" > "PEGAR EN LUGAR" pega el contenido del portapapeles
en la misma posicin X/Y desde la que fueron cortadas o copiadas, o en la misma
posicin en relacin al final de la pgina en el caso de objetos del pie de pgina. 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 dilogo 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
opcin de pegar el texto sin formato o en formato Rich Text (formato de texto
enriquecido).

Adems, es posible que veas las siguientes opciones de pegado, segn 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 tamao de fuente) o los atributos de estilo (p. ej.,
el color de la lnea y del relleno) del objeto que se pega.

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

Pegar tamao
Esta opcin aplica el tamao de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, cuyo tamao se reajusta (en torno a su centro) al tamao
exacto del objeto copiado.

Si al pegar el tamao tienes muchos elementos seleccionados, no se redimensiona el

tamao de la seleccin como un todo, sino que cada uno de esos objetos se convierte
al tamao del objeto copiado. Por ejemplo, si copias una foto de 200x200 pxeles,
www.magix.es
 Trabajar con objetos 113

luego seleccionas otras 10 fotos y seleccionas "Pegar tamao", las 10 fotos se

convierten a 200x200 pxeles. Este es un modo rpido de convertir un montn de
objetos a un tamao determinado.

Pegar reemplazo de seleccin

Esto es similar a PEGAR POSICIN , solo que el objeto copiado en el portapapeles
reemplaza al objeto seleccionado actualmente y mantiene la posicin del elemento
borrado. El objeto copiado se pega en la posicin 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 posicin 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 "Edicin > Cortar", o pulsa "Ctrl + X". Los contenidos del portapapeles
sern sobrescritos y podrs pegar el objeto o los objetos borrados en el lugar deseado.

Eliminar objetos
Escoge "Edicin > Eliminar", pulsa "Supr" o haz clic sobre el botn ELIMINAR de
la barra de control ESTNDAR.

En este caso los objetos eliminados no se colocarn 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.

Tambin puedes duplicar un objeto mientras lo mueves, giras, doblas o cambias su

tamao. Mientras lo arrastras (y mientras pulsas la tecla izquierda del ratn) haz clic
derecho o pulsa + del teclado numrico 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 ms copias de un objeto alineado horizontal o

verticalmente, es arrastrar el objeto, pulsar Ctrl para limitar el movimiento y despus
hacer clic derecho (o pulsar + del teclado numrico) para cada copia.

Para sustituir rpidamente una lnea de objetos, dibuja uno, despus arrstralo mientras pulsas
la tecla Ctrl y haz clic derecho para cada copia que quieras crear.

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

La distancia de duplicacin puede cambiarse. Lee el captulo Personalizacin de

Web Designer (en la pgina 492).

Clonar
Escoge Edicin > Clonar o pulsa Ctrl+K. Esto coloca una copia exactamente arriba del
original. La clonacin es una forma fcil de crear formas concntricas.

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 lnea negra de 1 pt.

www.magix.es
 Trabajar con objetos 115

Mover objetos hacia adelante o hacia atrs

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

El blanco de la izquierda est construido a partir de tres crculos apilados uno sobre otro.

Para asegurar que los objetos se superpongan en el orden correcto, muchas veces
necesitas cambiar el orden desde adelante hacia atrs. (El objeto de adelante siempre
cubre a los de abajo y los otros objetos siempre cubren a los que estn ms 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

ms 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 peldao de una escalera.
MOVER ATRS (Ctrl + + B): esto mueve el objeto un nivel hacia atrs.
LLEVAR ATRS (Ctrl + B): esto coloca el objeto atrs de todo.

Estas opciones mueven los objetos hacia adelante y hacia atrs en la misma capa.
MOVER A LA CAPA AL FRENTE y MOVER A LA CAPA DE ATRS te permiten mover los
objetos entre las capas visibles. (Las capas invisibles no se tienen en cuenta al mover
objetos).

Ms informacin sobre capas en el captulo Capas (en la pgina 419)

Girar utilizando el ratn

Para ver los controles deslizantes de rotacin (en lugar de los de modificacin de
tamao) en una forma seleccionada en la herramienta de seleccin, haz clic de nuevo
sobre la forma seleccionada.

Arrastra una flecha de una esquina. Mientras arrastras, el objeto gira alrededor del
centro de transformacin. La barra de informacin muestra el ngulo de rotacin
actual.
116

" + arrastrar" para hacer girar un objeto alrededor de su centro (el centro de
transformacin ser ignorado).

Para realizar una rotacin limitada, pulsa "Ctrl" mientras rotas. Esto significa que el
objeto rotar solo a una seleccin limitada de ngulos Rotar a mltiplos del valor del
ngulo de restriccin, que por defecto es de 45. Pero adems, incluir ngulos a los
cuales est alineado cualquier borde recto significativo del objeto vertical u
horizontalmente. Esto hace ms fcil, por ejemplo, rotar un rectngulo que ha sido
girado ligeramente, de manera que el rectngulo quede derecho de nuevo (alineado
con la pantalla). O hacer cualquier lnea 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 rotacin restringida.

Puedes definir los ngulos de restriccin. Consulta el captulo "Personalizacin de

Web Designer (en la pgina 491)".

Para crear una copia mientras realizas un giro, pulsa la tecla "+" del teclado numrico
mientras giras o haz clic con la tecla derecha del ratn.

Girar objetos
Esta opcin es parte de la herramienta de SELECCIN .

Si el modo de rotacin est activado, el centro de transformacin (alrededor

del cual el objeto gira) aparece inicialmente en el centro del objeto, tal como
se ve en este pequeo blanco.

Haz otro clic sobre el objeto para poner la herramienta de seleccin en el modo de
rotacin.

Arrastra el centro de transformacin al lugar que desees.

Atencin: si se mueve el centro de rotacin, se mantendr en esta posicin para

cualquier objeto seleccionado hasta que todos los objetos ests deseleccionados; as
el punto volver al centro de cualquier objeto seleccionado.

Rotacin con ngulos exactos (utilizando la barra de

informacin)
Introduce un ngulo en el campo de rotacin 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 rotacin.

www.magix.es
 Trabajar con objetos 117

Girar objetos en el modo de cambio de tamao

Tambin es posible girar y doblar un objeto si no te encuentras en el modo de

rotacin. Usando el modo de cambio de tamao, mueve el cursor hasta las reas
pequeas cerca de los controles deslizantes de lmites de seleccin, tal como se
muestra arriba. El cursor cambiar a un icono de rotacin para indicar que puedes
girar o doblar el objeto arrastrando el ratn.

Cambio del tamao de objetos (escalar)

Esta opcin es parte de la herramienta de SELECCIN .

Botn Escalar anchos de lnea

Con el botn ESCALAR ANCHOS DE LNEA , al cambiar el tamao
de un objeto, tambin se cambiar el ancho de sus lneas. Si
desactivas este botn, el ancho de las lneas no se modificar.

Puedes activar este botn durante el arrastre y pulsando la tecla / del teclado
numrico.

Este control tambin determina si los valores X, Y, ancho y alto de la barra de

informacin incluyen el ancho del contorno o pincel. Muchas veces es til ver y
controlar el tamao exacto de la forma excluyendo el ancho de la lnea.

Botn Bloquear relacin de aspecto

Con el botn BLOQUEAR RELACIN DE ASPECTO , la relacin de
aspecto ancho:altura permanece constante cuando cambias el
tamao del objeto.
118

En otras palabras, la forma mantiene las mismas proporciones que el original. Se

recomienda dejar este botn activado la mayora del tiempo para garantizar que los
objetos no se deformen al cambiar su tamao.

Si este botn est desactivado, puedes cambiar la relacin de aspecto al cambiar el

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

Adaptar el tamao 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 ms pequea (lo que no suele ser til y hace que la
foto se deforme) sino que se cortar. Si quieres que la imagen se deforme, mantn la
tecla Alt pulsada mientras efectas el desplazamiento.

Cambiar tamao utilizando el ratn

La herramienta de
SELECCIN debe
encontrarse en el modo de
cambio de tamao (los
controles deslizantes de
lmite son cuadrados). De
ser necesario, haz clic sobre
el objeto para cambiar al
modo de cambio de
tamao.

Arrastra uno de los controles deslizantes de esquina. El objeto cambiar de tamao a

medida que muevas el cursor diagonalmente. La barra de informacin muestra el
cambio de tamao actual. El tamao 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 rotacin, mueve el centro de
transformacin al punto deseado y usa los botones de la barra de informacin para
cambiar el tamao.

Pulsa "" mientras arrastras para cambiar el tamao del objeto alrededor de su
centro. Esto funciona independientemente de la posicin del centro de
transformacin. "Ctrl + arrastra" aumenta el tamao del objeto en mltiplos de su
tamao original (x2, x3 y sucesivamente).

Para crear una copia mientras cambias el tamao (dejando el original en su lugar),
haz clic derecho o pulsa la tecla "+" del teclado numrico.

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

operacin se explica detalladamente en la seccin Extender o reducir objetos.

www.magix.es
 Trabajar con objetos 119

Cambiar tamao utilizando la barra de informacin

Introduce el valor en el campo CAMBIAR TAMAO DE TEXTO y pulsa "".

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

Si el botn BLOQUEAR ASPECTO est activado, puedes introducir el valor en

cualquier campo de texto para cambiar el tamao del objeto de acuerdo al
porcentaje deseado. Si este botn est desactivado, puedes introducir valores
individuales para el ancho y el alto.

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

Si el botn BLOQUEAR RELACIN DE ASPECTO est activado, esto cambia el tamao del
objeto pero mantiene su relacin de aspecto. Puedes introducir cualquier tamao en
cualquier unidad como, por ejemplo, 1 cm.

Si cambias el tamao utilizando los botones de la barra de informacin (o recuadros

de nmeros), siempre se realizar el cambio de tamao alrededor del centro de
transformacin. Puedes posicionar el centro en cualquier lugar del objeto, tal como se
ha descrito en la seccin "Girar objetos".

Redimensionar grupos
Si redimensionas un grupo usando sus controles deslizantes laterales, se intentar
conseguir un cambio de tamao de forma inteligente ms que simplemente
concentrar los miembros del grupo. Esto es til generalmente cuando se intenta hacer
una variante ms estrecha adecuada para mviles de una pgina web ms ancha:
necesitas hacer que objetos anchos como los encabezados y los pies de pginas se
ajusten a un ancho de pgina ms pequeo.

Tomemos como ejemplo este grupo de pie de pgina:

120

El resultado que se obtiene tendra este aspecto:

El texto conserva el mismo tamao y las esquinas redondeadas se mantienen.

Este efecto funciona mejor con unos grupos que con otros dependiendo del diseo y
complejidad del grupo. Si simplemente prefieres concentrar el resultado de forma que
se reduzca el tamao de cada miembro del grupo, tan solo mantn 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 grficos que no incluyen textos o
esquinas redondeadas.

Voltear objetos
Esta opcin es parte de la herramienta de SELECCIN . Un clic sobre los
botones para VOLTEAR da vuelta el objeto vertical u horizontalmente a
partir del centro de transformacin.

El tamao y la relacin de aspecto no cambian, el objeto simplemente se voltea.

Extender o reducir objetos

Esto es similar a cambiar el tamao de los objetos, salvo que el objeto cambia de
tamao en una sola direccin. La extensin o reduccin del objeto son bsicamente la
misma accin, pero en sentido contrario.

Extender o reducir objetos utilizando el ratn

La herramienta de SELECCIN debe encontrarse en el modo de cambio de tamao.
(Los controles deslizantes de seleccin son cuadrados.) De ser necesario, haz clic en
el objeto para activar el modo de cambio de tamao.

Utiliza los controles deslizantes superiores, inferiores y laterales, en lugar de los

controles deslizantes de esquina para extender o reducir una forma slo en una
dimensin. Ten en cuenta que slo se muestran estos controles deslizantes en los

www.magix.es
 Trabajar con objetos 121

rectngulos que no tienen una foto en su interior porque extender otros objetos en
una sola dimensin rara vez produce resultados correctos (las fotos se distorsionan).

Arrastra uno de los controles

deslizantes laterales. El objeto
cambiar de tamao en la direccin
de arrastre. La barra de informacin
muestra el cambio de tamao
actual.

El botn BLOQUEAR RELACIN DE

ASPECTO se ignora.

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

Extender o reducir objetos utilizando la barra de informacin

El BOTN BLOQUEAR ASPECTO debe estar desactivado (si est activado, cambiars el
tamao del objeto en vez de extenderlo o reducirlo).

Introduce el valor en el campo de texto del ancho o alto (segn corresponda) y pulsa
"". Tambin 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 opcin BLOQUEAR ASPECTO , el objeto no se modificar.

Inclinar objetos
Esta opcin es parte de la herramienta de SELECCIN .

A la izquierda se encuentra el objeto original; a la

derecha el objeto inclinado horizontalmente.

Inclinar utilizando el ratn

Cambia la herramienta de SELECCIN al modo de rotacin/doblado haciendo clic
sobre el objeto. (Los controles deslizantes de seleccin tienen forma de flecha).

Arrastra una de las flechas laterales, superiores o inferiores para inclinar el objeto. Ten
en cuenta que slo se muestran estos controles deslizantes en los rectngulos 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 direccin

del movimiento (vertical u horizontal).

La barra de informacin muestra el ngulo de

inclinacin actual.

+ arrastra para inclinar el objeto alrededor del centro. Pulsa "Ctrl" para limitar la
direccin de inclinacin a uno de los ngulos de restriccin. Para crear una copia
mientras arrastras, haz clic derecho o pulsa la tecla "+" del teclado numrico (dejando
el original adonde estaba antes). O haz clic derecho con el ratn para crear copias
instantneas; si quieres copias adicionales haz clic izquierdo.

Tambin puedes inclinar el objeto con la herramienta de seleccin en el modo de

cambio de tamao, utilizando las reas de inclinacin. Para ms informacin ve a la
seccin Girar objetos en el modo de cambio de tamao (en la pgina 117).

Inclinar utilizando la barra de informacin

Para inclinar horizontalmente introduce un ngulo en el
campo de inclinacin y pulsa "".

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

Barra de informacin 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 informacin contiene dos juegos predeterminados de formas de molde.

Simplemente haz clic sobre un botn para aplicar el molde predeterminado. El botn
de la izquierda de cada grupo es el molde por defecto "sin distorsin" que puedes
editar manualmente despus 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 despus aplicas
una transicin 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 botn de la derecha (pegar perspectiva) se

describe ms adelante.

Web Designer dibuja un rectngulo alrededor del objeto o seleccin. Puedes arrastrar
los controles deslizantes de cada esquina del rectngulo para crear el efecto de
perspectiva.

Puedes girar, cambiar de tamao e inclinar el objeto con perspectiva utilizando la

herramienta de SELECCIN .

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 botn SEPARAR MOLDE . Para readaptar el

objeto, desactiva el botn.

Usar puntos de fuga

A medida que reduces el tamao de los lados del molde de perspectiva, vers 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 comn en la cruz pequea.

La malla de perspectiva
Este botn pinta una serie de puntos en una cuadrcula que te permite una
vista previa del grado de distorsin 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 despus 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 ms de una perspectiva o envoltura, slo se eliminar

la que se ha aplicado ms recientemente.

Girar el objeto dentro del molde

Muchas veces vers que el molde es la forma correcta, pero el objeto debe
girarse. Puedes girar el objeto con un clic sobre el botn 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 direccin.

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

www.magix.es
 Trabajar con objetos 125

Ejemplo de texto con envoltura

La aplicacin de una envoltura es similar a la aplicacin 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 botn de la derecha es similar al botn pegar perspectiva que se describe ms

adelante.

En principio, el botn de la izquierda no modifica el objeto. Los otros botones

modifican inmediatamente el objeto.

Para editar el molde despus 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.

Tambin puedes girar, cambiar el tamao e inclinar el objeto con envoltura utilizando
la herramienta de SELECCIN .

La malla de moldes
El botn de malla muestra una serie de puntos que te permite ver
previamente la distorsin 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 despus utilizar como molde de envoltura con un clic
sobre PEGAR ENVOLTURA de la BARRA DE INFORMACIN 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 edicin de formas (o con los controles deslizantes de edicin con la
herramienta de seleccin, de ser mostrada). Segn el tipo de molde, hay algunas
restricciones:

No puedes aadir controles deslizantes a un molde de envoltura o de

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

Ajuste
El ajuste facilita el posicionamiento de esquinas o puntos especficos de objetos en
lugares precisos. Puede utilizarse para alinear esquinas a un punto o lnea especfico o
para espaciar objetos en intervalos regulares utilizando la cuadrcula.

MAGIX Web Designer 11 Premium ofrece tres tipos de ajuste:

Ajustar a cuadrcula
Ajuste magntico
Ajustar a lneas gua u objetos gua

Ajustar a cuadrcula es muy til para espaciar los objetos en intervalos precisos o
cambiar el tamao en mltiplos exactos de un valor determinado. Las lneas gua se
utilizan para alinear esquinas (aunque usar objetos guas es ms poderoso) y,
finalmente, el ajuste magntico es una forma general de posicionar lneas, puntos o
esquinas arriba de otras lneas puntos o esquinas de objetos cercanos.

Ajustar a cuadrcula
Si se ha seleccionado AJUSTAR A CUADRCULA, los puntos de cuadrcula funcionan
como imanes. Haz clic derecho en el portapapeles y escoge "AJUSTAR A " > "AJUSTAR
A CUADRCULA" o utiliza la opcin del men "VENTANA" > "AJUSTAR A CUADRCULA" ,
(o pulsa "." (separador decimal) del teclado numrico). Puedes controlar el espaciado
de la cuadrcula en el dilogo de opciones (haz clic derecho y escoge OPCIONES DE
PGINA o utiliza la funcin "HERRAMIENTAS " > "OPCIONES ") en la pestaa de
Cuadrcula y Reglas. Por defecto, las plantillas de documento web tienen el ajuste a la
cuadrcula activado con un solo pxel, por lo que, en general, todos los objetos y
posiciones son pxeles enteros.

Al arrastrar objetos, los bordes se ajustarn a los puntos de cuadrcula. Si el tamao

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

www.magix.es
 Trabajar con objetos 127

Este ejemplo muestra una cuadrcula 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 cuadrcula ms cercano.

Nota: el espaciado de cuadrcula por defecto es 50 pxeles para las lneas principales
con 50 subdivisiones. Esto significa que la cuadrcula tiene un espaciado de un pxel
de pantalla y puede parecer que no se estuviera trabajando a un nivel normal de
100%. Si amplas la imagen a 500%, vers que se ajusta de forma correcta.

Como alternativa, cambia los valores de cuadrcula a, por ejemplo, 10 subdivisiones, lo

que significa que los puntos de cuadrcula estn en lmites de 5 pxeles.

Ajuste y ancho de lnea

El control ESCALAR ANCHOS DE LNEA de la barra de
informacin de la HERRAMIENTA DE SELECCIN 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. Tambin muestra
una lnea 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 lnea, por lo
que se encuentra parcialmente dentro de la forma y parcialmente fuera).

Si la opcin escalar anchos de lnea est activada, el ancho del contorno es importante
y "ajustar a la cuadrcula" ajustar los bordes de los objetos, incluyendo los contornos,
a las cuadrculas. Ajustar a objetos te permitir realizar el ajuste respecto de los
bordes o las lneas centrales de los contornos. Si los contornos, tal como aparecen en
la pantalla son pequeos y hay poca diferencia entre estas dos posiciones de ajuste,
128

entonces tendr prioridad el ajuste a los lmites. Por lo tanto, ampla la vista si quieres
ajustar a los centros de los contornos en este caso.

Si la opcin escalar anchos de lnea est desactivada, "ajustar a la cuadrcula" y

"ajustar a objetos" realizarn el ajuste a las lneas centrales de los objetos e ignorarn
los anchos del contorno.

Como el ajuste prioriza la opcin escalar anchos de lnea, los lmites utilizados para el
ajuste son siempre los mismos lmites que se indican en la barra de informacin de la
HERRAMIENTA DE SELECCIN .

Ajuste magntico de objeto (ajustar a objetos)

Con el ajuste magntico a objetos es ms fcil posicionar objetos de forma precisa
respecto a otros o al centro o bordes de la pgina. Por ejemplo, si quieres que varias
lneas comiencen precisamente en el mismo punto o quieres que una lnea se junte
con precisin al borde de un crculo, el uso del ajuste magntico te ser muy til.

Puedes usar esto para alinear los centros de los objetos o para alinear objetos
respecto al centro de la pgina o para alinearlos de forma horizontal o vertical en
cualquier parte en el centro de la pgina. El ajuste magntico funciona si mueves o
amplas el tamao de los objetos con la HERRAMIENTA DE SELECCIN .

Para activar y desactivar la alineacin magntica a objetos, haz clic en el

botn 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 opcin del men
"VENTANA" > "AJUSTAR A OBJETOS" . Tambin 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 imn, lneas azules y puntos rojos cuando te
encuentras cerca de un "punto de inters" 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 ests arrastrando se encuentre en el sector de un punto de inters

www.magix.es
 Trabajar con objetos 129

en el documento (que puede ser otro objeto o una parte de la pgina). Web Designer
se ajusta respecto al punto de inters y el cursor del ratn se convierte en un imn
que te indica que se ha realizado un ajuste. Tambin recibirs otras indicaciones
dinmicas en la pantalla que te informarn que se ha realizado un ajuste.

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

especfico.
Una lnea azul indica que el ajuste se ha realizado respecto a alguna
caracterstica de otro objeto (p. ej. el borde de un rectngulo).
Una lnea naranja indica que se ha realizado un ajuste respecto a una
caracterstica de una pgina (esquinas, bordes, centro).

Las lneas 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 travs de la pestaa RATN del dilogo de

OPCIONES ("HERRAMIENTAS" > "OPCIONES" o clic derecho sobre una pgina y
OPCIONES DE PGINA ).
130

Puedes especificar dos distancias de ajuste en la seccin "Radios de ajuste

magntico", que controlarn cun cerca los objetos tendrn que estar antes de
ajustarse. El tamao del crculo alrededor de los puntos (punto) y la distancia hacia
ambos lados de las lneas (lnea). En general, lo mejor es que el valor de punto sea
mayor que el valor de lnea, de forma que sea ms fcil ajustar a los puntos extremos
de las lneas.

Personalizacin de Web Designer contiene detalles del dilogo de opciones.

Difuminacin (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 difuminacin. Un ejemplo es cuando
se fusionan dos mapas de bits para evitar un borde marcado entre ellos.

El control de difuminacin se encuentra sobre el lado

derecho de la barra superior despus del botn de
galeras.

Para difuminar un objeto:

1. Selecciona el objeto o los objetos que quieres difuminar.
2. Introduce un tamao numrico para la difuminacin 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 difuminarn.

La difuminacin fusiona los bordes de los objetos o los hace borrosos.

Si has seleccionado varios objetos, la difuminacin aparecer alrededor de cada

objeto. Si has agrupado los objetos, la difuminacin aparecer alrededor del conjunto
de objetos agrupado.

Objetos gua y lneas gua

Los objetos gua y las lneas gua son objetos de una capa especial: la capa gua. Una
capa gua se crea automticamente cuando creas una lnea gua (ver a continuacin)
o puede crearse de forma manual con un clic derecho en la GALERA DE CAPAS y
seleccionando CREAR UNA CAPA GUA. Lee el captulo "Capas para ms informacin
(en la pgina 419)".

www.magix.es
 Trabajar con objetos 131

Usa la opcin AJUSTAR A GUAS del men Ventana (o la tecla 2 del teclado numrico)
para activar el ajuste a objetos gua.

Cualquier objeto colocado en la capa gua se convierte en un objeto gua. Esto puede
ser cualquier objeto incluyendo lneas en cualquier ngulo, formas irregulares y
QuickShapes. Puedes crear, eliminar y cambiar el tamao de los objetos de la capa
gua al igual que en las otras capas, pero los objetos se vern con contornos de puntos
rojos y el ancho de lnea o color de relleno se ignorar. Esta informacin se guardar, y
si posteriormente mueves el objeto desde la capa gua a una capa normal, el ancho de
lnea y los colores se vern nuevamente.)

Puedes usar los objetos gua para dibujar lneas de construccin como lneas que
pasan a travs de un punto imaginario para un dibujo en perspectiva.

Colocar objetos en la capa gua

Primero asegrate de que haya una capa gua en la GALERA DE PGINAS Y CAPAS, (ver
ms arriba). Puedes crear objetos directamente en la capa gua si la seleccionas y
creas objetos de forma usual.

Tambin puedes cortar o

copiar objetos desde otras
capas y pegarlos en la capa
gua. Para pegar objetos en la
misma posicin relativa a la
capa gua utiliza el shortcut
"Ctrl+ Shift+ V".

La galera de pginas y capas muestra la capa gua

seleccionada encima de otras dos capas.

MOVER A LA CAPA DE DELANTE y MOVER A LA CAPA DE ATRS en el men ARREGLO (o

hacer clic derecho y seleccionar "ARREGLO" > "MOVER A LA CAPA DE DELANTE/ DE
ATRS") ignora la capa gua y, por ello, no puede utilizarse para mover objetos a esta
capa.

Crear un lnea gua

Las lneas gua son lneas verticales u horizontales que sirven para alinear rpida y
fcilmente una serie de objetos en la pgina.

Activa las reglas (Ctrl+L).

Arrastra desde una regla hasta la pgina o
Doble clic sobre la regla para crear una lnea gua alineada al punto de clic.

Esto crea automticamente una capa gua y coloca la lnea gua en esa capa.
132

O, usa la galera de capas:

1. Clic derecho sobre la galera de capas y escoge PROPIEDADES

2. De ser necesario, escoge la pestaa Guas.
3. Selecciona horizontal o vertical.
4. Haz clic en Nuevo.
5. Introduce la posicin deseada.

Eliminar una lnea gua

Utiliza la herramienta de seleccin para arrastrar la lnea gua hasta la regla apropiada
(la regla vertical para lneas gua verticales, la regla horizontal para horizontales).

O haz clic derecho sobre la lnea gua y escoge Eliminar.

Resumen de shortcuts del teclado numrico

+ crea una copia mientras arrastras, cambias de tamao, doblas, etc. El objeto
original no se modifica.
/ conserva el ancho de lnea intacto al cambiar de tamao el objeto.
- conserva el relleno sin cambios al mover, cambiar de tamao, doblar, etc.
* activa y desactiva el ajuste magntico.

Conflictos en el diseo de pginas

Si demasiados objetos de la pgina intentan afectar la posicin o tamao de otros en
diferentes maneras, se mostrar un aviso de error que dice:

EL CAMBIO SOLICITADO EN EL DISEO DE LA PGINA NO SE PUEDE PROCESAR POR SER

DEMASIADO COMPLEJO. SIMPLIFICA LA PGINA E INTNTALO DE NUEVO.

Para solucionarlo debers disminuir las interacciones entre los objetos de la pgina.
Esto significa realizar cosas como lo siguiente:

Agrupar (en la pgina 133) o combinar en grupos suaves los elementos que
deberan moverse en conjunto
Eliminar la opcin Push si no es necesaria en objetos que tambin se extiendan o
tengan posiciones de "Pie de pgina" o "Automtica" (en la pgina 146) en la
pgina
Establecer la posicin de la pgina como "Fija" o "Pie de pgina"
Eliminar la marca de extensin
Eliminar el contorneo (en la pgina 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 ms informacin, lee el
captulo Transparencia (en la pgina 252) y Sombras (en la pgina 257).

Muchas veces crears formas complejas a partir de varios objetos diferentes. La

opcin Arreglo >Agrupar, te permite unir estos objetos para que parezcan un solo
objeto. Despus podrs seleccionar los objetos agrupados y copiarlos, moverlos,
escalarlos o realizar cualquier otra operacin 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).

Despus de esto, todos los objetos individuales quedarn 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. (Tambin puedes
utilizar esto para seleccionar un "grupo dentro de un grupo".) Si pulsas Tab o +Tab,
la seleccin 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
Ms informacin sobre capas en el captulo Capas (en la pgina 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 automticamente en el objeto de adelante).

Si los objetos se encuentran en ms de una capa, el grupo se crear en la capa que

contenga el objeto ms cercano al frente.

Cambiar colores en un grupo

La mayora de los grupos utilizan ms de un color simple y a veces es til cambiarlos
(por ejemplo para cambiar los colores de un botn formado por un grupo de objetos).
Podras hacerlo simplemente desagrupndolos o usando SELECCIONAR INTERIOR para
cambiar el color de cada objeto individualmente, y reagruparlos despus. Pero una
forma ms rpida es seleccionar el grupo y hacer clic en un color. Si el grupo contiene
varios colores, aparecer un dilogo que te permitir elegir cul 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 ingls)

Los grupos normales, como se explic en "Agrupar y desagrupar objetos" (en la
pgina 132), solo se colocan en una capa, no pueden estar en varias capas al mismo
tiempo. Los GRUPOS SUAVES te permiten conectar objetos a travs de distintas capas.

Si seleccionas un componente de un grupo suave, tambin se seleccionarn 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 tambin se modificarn de forma similar.

La barra de estado te indica cuando un grupo suave ha sido seleccionado.

Los grupos suaves son prcticos para cuando quieres mantener juntos los objetos que
estn relacionados. Por ejemplo, los estados MOUSEOFF y MOUSEOVER de un botn
web se agrupan en un grupo suave para que el otro estado tambin guarde los
movimientos o transformaciones.

Creacin 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, tendrs que hacer esas capas temporalmente visibles y editables

utilizando la galera de capas para poder seleccionar los objetos y agruparlos en un
grupo suave.

Un objeto no puede ser miembro de ms de un grupo suave y los grupos suaves no

pueden ser parte de otros grupos suaves.

Eliminacin de grupos suaves

Para deshacer un grupo suave, seleccionar "ARREGLO > ELIMINAR GRUPO SUAVE " (o
pulsa Ctrl + Alt + U). Los objetos no sern borrados, pero no ya estarn asociados
en un grupo suave.

Sincronizacin de texto
En algunas circunstancias, los objetos de texto de un grupo suave se sincronizan para
que, si editas el texto de uno, tambin se actualice en los dems. Esta funcin exista
antes de la introduccin de las COPIAS LIVE y las COPIAS LIVE son mucho ms flexibles
y potentes, por lo que esta funcin ya no es tan til como sola serlo. Sin embargo,
muchas plantillas y elementos de la GALERA DE DISEOS todava la utilizan y tambin
se usa generalmente para botones MouseOver, en donde ambos estados del botn
deben tener la misma etiqueta todo el tiempo. Cuando se cambia la etiqueta del
estado desactivado, el estado MouseOver tambin cambia para coincidir.

Adems, muchas veces pueden obtenerse efectos "similares a las sombras" si colocas
dos o ms copias de texto muy cerca entre s pero con un leve desplazamiento. Al
editar una, se cambiarn las dems en sincronizacin.

Para mantener la sincronizacin, los objetos de texto deben:

encontrarse en el mismo grupo suave

tener el mismo texto al momento de la creacin de un grupo suave
y contar con recuadros de lmite superpuestos o encontrarse en diferentes capas
o diferentes frames de animacin.

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

COPIAS LIVE .
136

Alineacin
As puedes alinear o distribuir de forma precisa dos o ms objetos.

Alineacin rpida
Selecciona los objetos que deseas alinear y haz clic derecho en la seleccin 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 .

Alineacin y distribucin del espacio

Si, adems de alinearlos, quieres distribuir el espacio entre los objetos, seleccinalos,
haz clic derecho sobre la seleccin y escoge "ALINEAR" > "ALINEACIN" para ver el
dilogo de alineacin de objetos. Como alternativa, escoge "ARREGLO" >
"ALINEACIN" ("Ctrl + + L").

El pequeo diagrama en la parte superior del

dilogo te muestra el efecto al seleccionar cada
opcin. Los objetos seleccionados en el
documento no cambiarn hasta que pulses
APLICAR .

El dilogo de alineacin es un dilogo 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 seleccin del
objeto y despus seleccionar una de las opciones
de alineacin.
Si te has equivocado al seleccionar, puedes
cambiar a la seleccin y hacer clic sobre el botn
APLICAR para configurar la ltima alineacin. Esto
puede ahorrarte mucho tiempo.

www.magix.es
 Trabajar con objetos 137

Dentro
Esta seccin del dilogo controla los lmites dentro de los que alineas o distribuyes los
objetos. Las opciones son:

LMITES DE SELECCIN : los lmites son los bordes

externos de los objetos seleccionados. Esta posicin
relativa no tiene efecto en la pgina.

LMITES DE UN OBJETO DE ATRS : los lmites son los

bordes externos del objeto seleccionado que se
encuentre atrs 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 "lmites de la seleccin" el objeto que se
encuentre ms a la izquierda ser el objeto de
referencia (el que no se mover).
PGINA/S : si los objetos se encuentran en una sola
pgina, los lmites son los bordes de pgina. (Esto te
permite, por ejemplo, centrar objetos en la pgina o
alinear a partir del borde de pgina.)

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

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

Los objetos seleccionados se movern para alinearse al borde izquierdo. Como

alternativa:

1. Escoge "ALINEAR " > "ALINEACIN " o pulsar "Ctrl + Shift + L" o escoge
ALINEACIN del men ARREGLO para abrir el dilogo Alineacin de objetos.
2. Selecciona la opcin "DENTRO" deseada, por ejemplo, lmites de seleccin.
3. Selecciona ALINEAR A LA IZQUIERDA para la posicin horizontal.
4. Deja la posicin vertical SIN CAMBIOS.
5. Haz clic en APLICAR .
138

Los objetos seleccionados se movern para alinearse al borde izquierdo.

Todas las opciones de alineacin actan de forma similar. Mostramos solamente el

ejemplo de alineacin izquierda para ser breves. Experimenta para aprender las otras
opciones.

Para seleccionar rpidamente cualquier otra combinacin de alineacin vertical y

horizontal, haz clic en el diagrama:

Un solo clic alinea la posicin horizontal y vertical a la posicin de clic de

cualquiera de las nueve combinaciones superior-centro-inferior/izquierda-
centro-derecha.
"Ctrl + clic" no cambia la posicin horizontal y arregla los objetos en una lnea
alineada respecto a la parte superior, central o inferior.
"+ clic" no cambia la posicin vertical y arregla los objetos en una columna
alineada respecto a la izquierda, al centro o a la derecha.

Distribuir
Las opciones de distribucin posicionarn los objetos seleccionados de forma regular
dentro del rea (generalmente los lmites de seleccin, pero tambin puede ser la
pgina o doble pgina.)

Todas las opciones de distribucin 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
distribucin 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 posicin horizontal son similares, pero funcionan en direccin

horizontal.

www.magix.es
 Trabajar con objetos 139

Si, por ejemplo, quieres distribuir esta coleccin de elipses para que presenten
espacios iguales y sus bordes superiores estn alineados:

Selecciona las formas

Abre el dilogo de alineacin (Ctrl+Mays+L)
Asegrate de que la seccin DENTRO muestre la
opcin LMITES DE SELECCIN
Selecciona la posicin horizontal: distribuir
centros
Selecciona la posicin vertical: alinear arriba
Haz clic en APLICAR .

Ahora se vern as, con espaciado horizontal

equidistante y alineacin superior.

Recuerda que si te has equivocado, siempre puedes deshacer la operacin.

Copiar estilos - pegar atributos

Esto te permite copiar atributos (como el modelo de lnea o el color de relleno) entre
objetos. Es una forma rpida de aplicar mltiples atributos a un objeto.

El cuadrado tiene un color, sombra,

estilo de lnea y relleno especficos. Si se
copia y se pegan los atributos al crculo
del centro, el resultado ser el crculo de
la derecha.

1. Selecciona el objeto cuyos atributos quieres copiar.

2. Copia la seleccin al portapapeles. ("EDICIN" > "COPIAR " o "Ctrl + C".)
3. Selecciona los objetos a los que quieres aplicar los atributos.
4. Escoge "EDICIN" > "PEGAR ATRIBUTOS" o "Ctrl + Shift + A".

El objeto permanece en el portapapeles hasta que lo sustituyas con otra operacin

"copiar" o "cortar". Esto te permite repetir la funcin de "pegar" todas las veces que
quieras.

Libreras de estilos
Es bastante fcil utilizar esta tcnica para crear documentos que pueden utilizarse
como libreras de estilo. Crea una serie de pequeos objetos con un relleno, color y
otros estilos de atributos. Despus, la forma ms 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 rpidamente entre documentos), haz clic en el objeto para aplicar
el estilo
Pulsa "Ctrl+Shift+A" para aplicar los atributos

Atencin: la mayora de los atributos puede copiarse de esta forma, incluyendo

sombras, valores de difuminacin, 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
ms grande. El efecto es similar a la opcin Interseccin de formas, descrita en el
captulo Manejo de formas (en la pgina 176). La diferencia es que la opcin
interseccin de formas corta los objetos, mientras que la opcin ClipView
simplemente oculta las partes fuera del objeto ClipView. Adems, puedes ajustar la
posicin de los objetos dentro del ClipView.

Para crear un ClipView:

1. El objeto "ventana" debe encontrarse detrs de los

dems objetos del ClipView. De ser necesario,
desplzalo hacia atrs. En este ejemplo, la elipse
oscura es el objeto ventana. Como alternativa dibuja
la forma "ventana" en la capa de mscara (en la
pgina 267)
2. Selecciona todos los objetos que quieres incluir en el
ClipView (incluyendo el objeto "ventana", salvo que
se encuentre en la capa de mscara).
3. Escoge ARREGLO > APLICAR CLIPVIEW ("Q"). Todo el
objeto "ventana" permanece visible adems de las
partes de los dems 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 despus 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 travs de la que se vern 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 estn cortando. Por lo tanto,
una vez que los has seleccionado puedes arrastrarlos dentro del clipview para ajustar
su posicin 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 captulo. (Los objetos ClipView son un tipo de grupo).
Ahora puedes realizar la mayora de operaciones de edicin 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
DIFUMINACIN de la barra superior para dar al objeto un borde de difuminacin 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 opcin "Aplicar, quitar o verificar nombres de objetos"
en la barra de informacin de la HERRAMIENTA DE SELECCIN .

La aplicacin de nombres es un mecanismo que tiene una variedad de usos que sern
explicados a continuacin. El uso ms comn 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 aadirn animaciones con el exportador Flash. Lee el captulo
sobre Flash (en la pgina 434) para ms detalles.

Objetos repetidos: se utiliza una convencin especial de nombres para identificar un

objeto que aparecer en la misma posicin y con la misma forma en mltiples
pginas. Esto te permite editar una copia del objeto y actualizar todas las otras copias
para que estn iguales. Ver el captulo "Objetos repetidos" (en la pgina 143) en
Primeros pasos.
142

El dilogo carece de modo as que puedes cambiar la seleccin mientras el diolog

est abierto. Muestra los nombres para la seleccin actual. El campo de texto superior
del dilogo te indica cuntos objetos estn seleccionados actualmente.

Aadir nombres
Para aadir un nombre a un objeto, selecciona el objeto y abre el dilogo
APLICAR/ELIMINAR NOMBRES utilizando el botn de la BARRA DE INFORMACIN DE LA
HERRAMIENTA DE SELECCIN .

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 AADIR . 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
seleccin actual. Si hay ms de un objeto seleccionado, solo se mostrar una lista de
los nombres aplicados si todos los objetos de la seleccin tienen la misma serie de
nombres. Si no es as, vers la palabra "<muchos>" indicando que se han aplicado
distintos nombres para los diferentes objetos de la seleccin.

Para quitar un nombre de un objeto seleccionado, haz clic en el nombre en la lista

"Nombres aplicados" y luego haz clic en el botn ELIMINAR .

www.magix.es
 Trabajar con objetos 143

Objetos repetidos
En las pginas web es muy comn que ciertos elementos se repitan en todas las
pginas como, por ejemplo: los botones de navegacin, los encabezados o los logos.

Web Designer te ofrece la posibilidad de repetir cualquier elemento en el mismo lugar

de las pginas del sitio. Cuando actualizas una de las copias, Web Designer aplica
automticamente esos cambios a todas las pginas que tienen una copia del objeto
repetido.

En la mayora de las plantillas de diseo se repiten los botones principales de

navegacin. Puedes convertir a cualquier objeto, como un botn, en un objeto
repetido si haces clic derecho y escoges la opcin REPETIR EN TODAS LAS PGINAS. El
objeto se copia en el mismo lugar en todas las pginas y vers el smbolo de objeto
repetido en la esquina superior derecha. Si realizas ms cambios a este elemento,
todas las copias se actualizarn automticamente.

Sin embargo, si la barra est configurada como BARRA DE NAVEGACIN DEL SITIO
aparecer automticamente en todas las pginas de tu sitio y no es necesario que la
conviertas en un objeto repetido.

Los textos de logos y pies de pgina generalmente se configuran como objetos que se
repiten. Esto significa que puedes editarlos en una sola pgina, y que el objeto se
actualizar automticamente en todas las otras pginas.

Nota: se utiliza la pgina actual como fuente original para actualizar los elementos
repetidos de todas las pginas.

El recuadro rojo es el smbolo 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 pgina, solo tienes que
borrarla de esa pgina. Al editarlo, el objeto repetido se actualiza solamente en las
pginas que ya lo contienen. Esto significa que puedes escoger qu pginas de tu
documento deben tener el objeto que se repite y cuales no deben tenerlo.

Si quieres repetir un objeto en solo unas cuantas pginas de una pgina web extensa
puedes hacer lo siguiente:

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

Edicin del contenido de un objeto repetido

Cuando Web Designer crea un objeto repetido, los elementos repetidos se colocan en
un grupo de repeticin similar a un grupo normal. Si vas a una pgina inferior que
contiene un objeto repetido en la GALERA DE PGINAS Y CAPAS, puedes ver que hay
un grupo repetido que contiene a cada objeto repetido de esa pgina.

Web Designer coloca a cada objeto repetido dentro de un grupo de repeticin.

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 repeticin. Tambin
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 especfica, en general puedes hacer clic
directamente en cualquier objeto al que pueda aplicarse la herramienta y se
seleccionar dentro de su grupo de repeticin (o de cualquier otro grupo). De esta
forma, puedes seleccionar, por ejemplo, una Quickshape que se encuentra dentro de
un grupo de repeticin, 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
edicin que hagas dentro de un grupo de repeticin se aplicar a todas las instancias
de ese objeto repetido en otras pginas.

Fijacin 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 modificacin a otras copias de ese objeto repetido en otras pginas que
no estn fijadas, se cambiarn todas las copias, incluyendo la copia fijada.

Detencin de la repeticin de objetos

Haz clic derecho sobre un objeto y escoge DETENER ACTUALIZACIN para desactivar la
repeticin de un objeto o de todas las copias de ese objeto en tu sitio web. Tambin
podrs hacerlo si escoges DETENER ACTUALIZACIN del men ARREGLO. Se te
preguntar si quieres dejar de repetir el objeto seleccionado o todas las copias del
objeto. Escoge la opcin TODOS . Ahora, cada copia puede editarse de forma
independiente y la prxima vez que realices un cambio, los otros objetos no se
actualizarn.

Utiliza esta opcin cuando, por ejemplo, hayas utilizado ARREGLO > REPETIR EN TODAS
LAS PGINAS para copiar un objeto en todas las pginas de tu sitio web, pero luego
quieras modificar dichos objetos para que sean diferentes en cada pgina de forma
que dejen de estar conectados entre s.

DETENER ACTUALIZACIN tambin es til si quieres crear una copia de un objeto

repetido en una pgina (p. ej., un pie de pgina o un logotipo) y no quieres que esa
copia se actualice. En este caso, escoge la opcin SOLO ESTA COPIA, cuando se te
pregunte.

Ten en cuenta que no puedes usar DETENER ACTUALIZACIN en barras de

navegacin que tengan la opcin BARRA DE NAVEGACIN DEL SITIO activada en el
DILOGO DE BARRA DE NAVEGACIN . Esto es porque las barras de navegacin del
146
sitio se actualizan siempre en toda la pgina. Consulta el captulo Barras de
navegacin para ms informacin sobre las barras de navegacin.

Eliminar objetos repetidos

Si no quieres una copia de un objeto que se repite en la pgina, solo tienes que
borrarla de esa pgina. 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 eliminarn el objeto repetido seleccionado sin preguntar si se quieren
eliminar todas las copias o solo una.

Pies de pgina y objetos que se amplan con la

pgina.
Normalmente en un documento de pgina web no todas las pginas tienen la misma
longitud y puede que tengas objetos que quieras que permanezcan a una distancia fija
del final de la pgina, incluso cuando la alargas o acortas. Estos elementos se llaman
objetos de pie de pgina. Puede que tengas tambin formas que conforman el fondo
de tu pgina, que deben extenderse o contraerse si cambia el largo de la pgina, de
modo que siempre se ajusten a la pgina adecuadamente. El submen POSICIN EN LA
PGINA del men contextual te permite hacer que los objetos se comporten de estas
maneras.

Haz clic derecho sobre un objeto y mira el submen POSICIN EN LA PGINA . Este
men te permite controlar la forma en que el objeto se comporta cuando cambias el
tamao de la pgina. 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 opcin por defecto y la configuracin adecuada para la mayora de los
objetos de un documento. La posicin del objeto es fija con respecto a la parte
superior de la pgina de forma que no se mover aun cuando cambies la longitud de
la pgina.

Pie de pgina
As se marca el elemento como objeto de pie de pgina. Siempre mantendr la misma
distancia con respecto a la parte inferior de la pgina, de forma que si amplas la
pgina, el objeto se mover hacia abajo en la misma proporcin. Si copias el objeto y
utilizas la opcin PEGAR EN EL LUGAR para insertarlo en una pgina con un tamao
diferente, el objeto se ubicar a la misma distancia de la parte inferior de esa otra
pgina.

Si configuras un objeto repetido como pie de pgina, se colocar a la misma distancia

de la parte inferior de cada pgina.

www.magix.es
 Trabajar con objetos 147

Automtico
Esta opcin es especialmente til para plantillas de pgina y objetos repetidos.
Permite que un objeto se comporte como un pie de pgina, solo si se encuentra en la
mitad inferior de una pgina. Si mueves el objeto a la mitad superior de la pgina, se
comportar como un objeto fijo. La lgica de esta reaccin reside en que los objetos
que son pie de pgina se necesitan en general cerca de la parte inferior de la pgina.

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

Ampliar con la pgina

Si configuras a un objeto con AMPLIAR CON LA PGINA , 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 pgina. Por lo tanto, el objeto se escalar en sentido vertical. En
general, esta opcin es til solamente para objetos que forman parte del fondo de una
pgina. Por ejemplo, muchas de las plantillas de pginas web de la galera de diseos
tienen rectngulos de colores en la capa de fondo de pgina que forman parte del
diseo de la pgina. En general, estn configurados como AMPLIAR CON LA PGINA
para mantener un diseo perfecto con cualquier longitud de pgina.

Objetos de desplazamiento
Los objetos de desplazamiento son especialmente tiles en las plantillas de pginas
porque ayudan a mantener el diseo de la pgina cuando el texto se extiende o se
acorta. Los objetos de desplazamiento no se superponen unos con otros, por lo que si
amplas o mueves uno de forma que invada el espacio de otro, lo "desplazar" hacia
abajo en la pgina. Y si un objeto de desplazamiento se sale del final de la pgina, esta
se ampla automticamente.

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

escoge DESPLAZAMIENTO... del submen POSICIN EN LA PGINA . Aparecer el dilogo
de DESPLAZAMIENTO.
148

Selecciona la casilla "Desplazamiento" para activar esta opcin para los objetos
marcados. Luego puedes cambiar los mrgenes inferior y superior, si lo deseas. Por
defecto, los mrgenes inferior y superior estn bloqueados conjuntamente: si quieres
configurarlos de forma independiente haz clic en el botn de bloqueo. El valor del
margen superior determina cun 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 cun cerca puede estar de otro objeto de
desplazamiento situado debajo antes de que lo desplace. Tambin define la distancia
mnima que debe mantenerse entre el objeto y el extremo inferior de la pgina (la
pgina se extender de ser necesario), ya que por lo general no deseas que el objeto
se encuentre justo sobre el borde de la pgina.

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

comporte como si fuera ms 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 separacin horizontal entre los objetos. Entonces, por
ejemplo, un rectngulo de 100 pxeles de ancho con una configuracin de
desplazamiento con AMPLIAR LADOS de 50 pxeles, se comportar como si tuviera
200 pxeles 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 pgina y , si es
necesario, la pgina 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 pgina. Por lo tanto, mientras que los objetos
comenzaron pegados antes de que el texto fuera borrado, esto es exactamente lo que
sucede a continuacin: 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 pgina se desplazar hacia arriba, haciendo la pgina ms corta.

En resumen, aplicar "Desplazamiento" a los elementos principales de tu pgina ayuda

a mantener su disposicin cuando se aade o elimina contenido de la misma.
www.magix.es
 La herramienta de edicin de formas 149

La herramienta de edicin de formas

La herramienta de EDICIN DE FORMAS es la herramienta principal para crear
curvas, lneas y formas precisas, as como para editar y modificar las lneas y
las formas.

Aadir/Cambiar/Editar indicador
Crear curva
Crear lnea
Unin en curva
Unin marcada
Separar en puntos
Eliminar puntos
Invertir trayectoria
Posicin de los controles deslizantes
Suavizado

La barra de informacin, que se muestra arriba, ofrece una amplia variedad de

controles, incluyendo un control numrico muy preciso.

Todas las lneas y formas en MAGIX Web Designer 11 Premium estn formadas a
partir de una secuencia de curvas y secciones de lnea. Muchas veces, las curvas se
denominan Bzier, en honor al primer matemtico en describirlas.

Estas secciones o segmentos de una lnea estn sealados por pequeos controles
deslizantes negros. Puedes arrastrar, aadir y eliminar estos controles deslizantes
para manipular la forma de la lnea o contorno.
150

Dibujar una linea o forma

Puedes utilizar cualquiera de las siguientes herramientas para dibujar lneas y formas:
HERRAMIENTA DE MANO ALZADA Y PINCEL ("F3").
HERRAMIENTA DE LNEAS RECTAS Y FLECHAS
HERRAMIENTA DE EDICIN DE FORMAS ("F4").

La HERRAMIENTA DE MANO ALZADA Y PINCEL es la forma ms simple de dibujar lneas,

curvas y formas, y funciona igual que un lpiz.

La HERRAMIENTA DE LNEAS RECTAS Y FLECHAS es la mejor opcin si quieres dibujar

pequeos segmentos de lneas rectas o aadir extremos de flecha a cualquier tipo de
lnea.

La HERRAMIENTA DE EDICIN DE FORMAS es la mejor herramienta para dibujar curvas y

lneas precisas. Es tambin la herramienta principal para editar lneas y formas.

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

tambin puedes usar la HERRAMIENTA DE PLUMA para crear formas precisas.
Tiene funcionalidad limitada y funciona como la herramienta de lnea 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
lpiz. Tambin puede utilizarse para crear pinceladas, lo que se describe ms
adelante. Mientras utilizas esta herramienta, la barra de estado te suministra
informacin sobre cmo utilizarla.

1. Coloca el cursor en el lugar donde debe comenzar la lnea.

2. Pulsa y mantn pulsada la tecla del ratn.
3. A medida que arrastras el cursor por el documento, dibujars una lnea en
tiempo real.
4. Suelta la tecla del ratn para finalizar la lnea.

Despus de dibujar libremente una

lnea puedes controlar el suavizado
de la curva (la cantidad de puntos
Suavizado Indicador de
de control) ajustando la barra
readaptacin
deslizante de control de suavizado
de la barra de informacin.

www.magix.es
 La herramienta de edicin de formas 151

Los valores bajos hacen que la lnea siga el movimiento del ratn de forma ms
cercana al crear ms puntos de control, mientras que los valores ms altos producen
curvas ms suaves con menos puntos de control.

Los valores bajos son menos suaves Los valores altos ofrecen curvas ms
suaves

Puedes cambiar el suavizado en cualquier momento hasta que realices otras

ediciones a la lnea (el indicador de readaptacin te indicar en la barra de
informacin si todava puedes hacer modificaciones al suavizado).

Borrar durante el dibujo

Antes de soltar el botn, puedes eliminar parte de la lnea si pulsas la tecla Shift. El
icono del lpiz se dar la vuelta para que puedas utilizar la goma. Ahora podrs borrar
hacia atrs en la lnea. Suelta para continuar dibujando.

Dibujo de segmentos rectos con la herramienta de dibujo

libre
Mientras dibujas libremente una lnea, presiona Alt y mueve el cursor hasta la nueva
posicin, al soltar Alt la lnea ser recta. Puedes continuar dibujando la lnea o pulsar
nuevamente Alt para dibujar otro segmento. Recuerda que puedes utilizar Ctrl para
limitar el ngulo de la lnea. Si solo quieres dibujar muchos segmentos individuales de
lneas rectas, utiliza la herramienta de lneas rectas descrita ms abajo.

Extender una lnea

Asegrate de haber seleccionado la lnea (un solo clic sobre la forma o la lnea
mientras te encuentras en la herramienta de DIBUJO LIBRE Y PINCEL lo har). Ahora, si
te mueves hasta el final de la lnea, un pequeo smbolo + junto al icono del lpiz te
indicar que puedes dibujar para aadir una nueva seccin de dibujo libre a la lnea.
152

Unir dos lneas

Selecciona ambas lneas ("Shift+clic" en la segunda lnea para aadirla a la seleccin)
y ahora podrs dibujar desde el final de una lnea hasta el final de la otra. Un pequeo
+ al lado del lpiz (aparece despus 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. Slo 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 - deberan 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 ratn. Los dos
controles deslizantes se unirn.

O:

1. Crea un objeto abierto con todos los controles deslizantes en

sus posiciones correctas. No dibujes el segmento de lnea
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 lnea y cerrar la
forma.
O:

1. Escoge la herramienta de EDICIN 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 edicin de formas 153

Editar lneas/formas con la herramienta de

dibujo libre y pincel
No puedes modificar directamente las formas creadas con las herramientas de
rectngulo, elipses o quickshape. Primero debes convertirlas en formas editables con
"ARREGLO > CONVERTIR A FORMAS EDITABLES ". Consulta "Trabajar con formas" para
ms informacin.

Puedes utilizar la herramienta de DIBUJO LIBRE Y PINCEL para editar lneas (o el

contorno de las formas) y simplemente dibujar la seccin de la lnea que quieres
modificar. Por ejemplo, para editar el objeto:

Selecciona el objeto que quieres editar.

Mueve el lpiz de dibujo libre sobre una parte de la lnea. Una ~

mostrar cuando el lpiz se encuentra en su posicin.

Dibuja la lnea requerida y despus mueve el lpiz hasta el

segundo punto de la lnea existente. Una ~ te indica nuevamente
cuando el lpiz se encuentra en la posicin correcta.

Al soltar la tecla del ratn, la seccin de la lnea se sustituir.

Modo Bosquejo
Esta opcin es til si ests dibujando rpidamente muchas lneas
independientes cercanas unas a otras, tal vez con una tableta de dibujo.

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

Para solucionar este problema, activa el modo de bosquejo. Ahora, si colocas el cursor
del ratn sobre una lnea existente o un punto de extremo, vers que se hace una
breve pausa antes de que el cursor del ratn cambie para indicar que la lnea se
editar o extender. Esta pausa significa que puedes seguir editando lneas existentes
si lo deseas, pero que no lo hars sin intencin cuando quieres trazar nuevas lneas.

Estilos de pincel
La herramienta de DIBUJO LIBRE Y PINCEL tambin puede utilizarse para aplicar
distintos estilos de trazos sobre el trazado de la lnea. Entonces, puedes convertir una
lnea slida con un ancho especfico en una lnea con ancho variable o utilizar uno de
los estilos de pincel, como "airbrush" o marcador de fieltro, etc.

Es importante comprender que la lnea puede continuarse editando por lo que, a

diferencia de la mayora de programas de dibujo y optimizacin de fotos, puedes
seleccionar la lnea posteriormente y ajustar la forma de la lnea y el trazo del pincel.
Esto se describe en el apartado PINCELES ms adelante en este captulo.

La herramienta de lneas rectas y flechas

Esta herramienta facilita el dibujo de segmentos individuales de lneas rectas y el
agregado de extremos de flecha a cualquier lnea, de forma que es ms fcil y prctico
que hacerlo con la galera de lneas.

Dibujo y edicin de lneas rectas

Simplemente haz clic y arrastra sobre la pgina para dibujar una lnea recta. Puedes
hacer clic sobre una lnea existente para seleccionarla y, una vez seleccionada, puedes
hacer clic y arrastrar de cualquier extremo para moverlo.

Agregar extremos de flechas

La barra de informacin tiene dos listas desplegables a la izquierda, que te permiten
escoger un extremo de punta para cada extremo de la lnea seleccionada.

Punta de flecha
Extremo posterior de la flecha
Tamao del extremo de la flecha
Trayectoria invertida

www.magix.es
 La herramienta de edicin de formas 155

La barra deslizante de la barra de informacin te permite cambiar el tamao de los

extremos de flecha a la lnea seleccionada actualmente. O puedes introducir un valor
de porcentaje en el campo de texto del tamao a la derecha de la barra deslizante. Por
defecto, los extremos de lnea se crean con un ancho 6 veces mayor que el ancho de
la lnea, y esto se toma como el tamao 100%, como indica la barra deslizante de
tamao. Si haces la lnea ms ancha, el ancho del extremo de la flecha tambin se
actualizar. Por lo tanto, introduce un valor menor que 100% para reducir el tamao
de los extremos de la flecha o mayor que 100% para aumentarlo. A pesar de que la
barra deslizante solo llega a un mximo de 800%, puedes entrar porcentajes mayores
en el campo de texto.

Trayectoria invertida
Presiona el botn TRAYECTORIA INVERTIDA de la barra de informacin para
intercambiar la punta y el final de la flecha de la lnea seleccionada.

Agregar ms segmentos de lnea

Las lneas creadas con la herramienta de lneas rectas son, por supuesto,
completamente compatibles con las otras herramientas de dibujo. Entonces, si
quieres agregar ms segmentos a una lnea, curvarla o tal vez convertirla en una
forma cerrada, utiliza la herramienta de edicin de formas.

La herramienta de edicin de formas

La HERRAMIENTA DE EDICIN DE FORMAS es la herramienta principal para
crear curvas, lneas y formas precisas, as como para editar y modificar las
lneas y las formas.

Aadir/Cambiar/Editar indicador
Crear curva
Crear lnea
Unin en curva
Unin marcada
Separar en puntos
Eliminar puntos
Invertir trayectoria
Posicin de los controles deslizantes
Suavizado
156

La barra de informacin, que se muestra arriba, ofrece una amplia variedad de

controles, incluyendo un control numrico muy preciso.

Todas las lneas y formas en MAGIX Web Designer 11 Premium estn formadas a
partir de una secuencia de curvas y secciones de lnea. Muchas veces, las curvas se
denominan Bzier, en honor al primer matemtico en describirlas.

Estas secciones o segmentos de una lnea estn sealados por pequeos controles
deslizantes negros. Puedes arrastrar, aadir y eliminar estos controles deslizantes
para manipular la forma de la lnea o contorno.

Algunos objetos como QuickShapes, rectngulos, elipses y texto tienen que

convertirse en formas editables, antes de poder utilizar la HERRAMIENTA DE EDICIN
DE FORMAS para modificarlos. Para ello, selecciona un objeto y marca "ORDENAR " >
"COMBINAR FORMAS " > "AADIR FORMA".

Para dibujar un segmento de lnea recto

Para comenzar una lnea recta en la herramienta de EDICIN DE FORMAS
1. Haz clic donde quieras comenzar la lnea. (Puedes comenzar una lnea 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 sealar que est seleccionado.
2. De ser necesario, selecciona el botn CONVERTIR EN LNEA de la barra de
informacin. (Shortcut L). Esto te garantiza que el prximo clic dibujar un
segmento de lnea recto.

Haz clic donde quieras colocar el prximo control deslizante o haz clic y arrastra y
despus suelta el botn del ratn cuando la lnea sea correcta. Esto crea un segmento
de lnea y selecciona el nuevo control deslizante del extremo.

www.magix.es
 La herramienta de edicin de formas 157

Mezclar lneas 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 LNEA mientras creas el objeto
(tambin puedes pulsar L o C en el teclado).

Nota: Tambin puedes usar el shortcut "X" para crear unin en vrtice o "S" para
crear una unin fluida mientras usas el EDITOR DE FORMAS . Estos afectan la forma en
que dos segmentos de lnea se unen. Una unin en vrtice crea dos controles Bzier
independientes que puedes editar de forma separada. Con una unin en vrtice
puedes crear un ngulo recto. Una unin fluida crea una unin simtrica que funciona
como un balancn. Si arrastras uno de los controles Bzier hacia abajo, el control
opuesto va hacia arriba.

Para dibujar un segmento de lnea curvo:

Esto es similar a iniciar una lnea recta (descrito
anteriormente).

1. Haz clic donde quieras comenzar la lnea.

2. De ser necesario, selecciona el botn CONVERTIR EN CURVA . (Shortcut C)
3. Haz clic o arrastra (igual que lo descrito para las lneas rectas) para crear un
segundo control deslizante y un segmento curvo se aadir a la lnea.

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 lnea.
Asegrate de seleccionar un punto de control deslizante que se encuentre en un
extremo (contorno rojo) y despus haz clic para aadir una nueva seccin de lnea o
curva. Cada clic sucesivo coloca un nuevo punto de control deslizante y dibuja un
nuevo segmento de lnea a partir del punto de control deslizante seleccionado.

Finalizar la lnea
+ clic completa la lnea (mantnla seleccionada), o pulsa "Esc" para terminar la
lnea y deseleccinala. El prximo clic crear una nueva lnea.

Aadir un nuevo punto de control

La herramienta de EDICIN DE FORMAS tiene tres modos dependiendo si no hay
ningn punto de control seleccionado (un clic iniciar una nueva lnea), si est
seleccionado un control del extremo de la lnea (un clic aadir una nueva seccin) o
si est seleccionado uno o ms controles (puedes arrastrar o cambiar los controles
deslizantes).

En el modo actual, la barra de informacin muestra lo

siguiente:

NUEVO :
clic para comenzar una nueva lnea.
AADIR :
clic para extender la lnea.
CAMBIAR : arrasta o elimina puntos de control.

Esto solo es aplicable a la herramienta de edicin de formas.

Al final de una lnea:

Selecciona la lnea, despus:

1. De ser necesario, haz clic en el punto de fin para seleccionarlo.

2. Coloca el cursor y haz clic para aadir una nueva seccin.

www.magix.es
 La herramienta de edicin de formas 159

En el medio de una lnea:

Selecciona la lnea, despus:

1. Haz clic sobre la lnea para aadir un nuevo punto de control sobre la lnea.
2. Arrastra el punto de control a la posicin deseada.

Al inicio de una lnea:

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 pgina 152). Para aadir un
nuevo control deslizante en el inicio de una lnea:

1. Termina la lnea con + clic.

2. Haz clic en el punto de inicio.
3. Coloca el cursor en posicin y haz clic.

Seleccionar mltiples puntos de control

Es posible que quieras seleccionar varios puntos de control para, por ejemplo,
eliminarlos o moverlos como un grupo o cambiar una regin de puntos a lneas curvas
o rectas. Para esto:

1. Selecciona un punto de control con un clic.

2. + clic sobre otros puntos de control para seleccionarlos. ( + clic tambin
elimina la seleccin).
- O + Ctrl+clic sobre un punto de control para seleccionar todos los puntos
de control de la lnea.
- O arrastra el cursor del ratn diagonalmente para crear un rectngulo de
seleccin. Todos los puntos de control que se encuentren dentro del
rectngulo se seleccionarn.
- O + arrastra el cursor del ratn diagonalmente para crear un rectngulo de
seleccin. Esto aade todos los puntos dentro del rectngulo a aquellos que
ya estn seleccionados.
3. Si la lnea tiene uno o ms puntos de control seleccionados:
- Fin mueve la seleccin al final de la lnea.
- Inicio mueve la seleccin al comienzo de la lnea.
- Tab mueve la seleccin al prximo punto de control hacia el fin de la lnea.
- + tab mueve la seleccin al prximo punto de control hacia el inicio de la
lnea.
160

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

Eliminar puntos
Selecciona el o los puntos de control tal como se describe
anteriormente y haz clic sobre el botn ELIMINAR PUNTOS (barra de
informacin del EDITOR DE FORMAS ) o pulsa la tecla Supr.

Mover puntos de control - Herramienta de

edicin de formas
Puedes mover el o los controles deslizantes seleccionados:

Arrastra los controles deslizantes usando el ratn.

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 informacin (ver ms abajo).

Utilizacin de los campos de texto de la barra de

informacin
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 pgina. Puedes cambiar esto en la pestaa "Cuadrcula y regla (en la pgina 492)"
en el dilogo de opciones.

Si el punto seleccionado se encuentra al final de una seccin de lnea curva, los

campos izquierdos muestran la longitud y el ngulo de la lnea. Puedes ajustar estos
valores introduciendo uno nuevo y pulsando Intro.

www.magix.es
 La herramienta de edicin de formas 161

Longitud y ngulo para la lnea recta

Posicin del punto seleccionado
Posicin del control de la curva

Suavizar una lnea

Solo con herramienta de edicin de forma.

Las formas importadas de un examinador pueden contener puntos innecesarios sobre

las lneas. Las lneas con demasiados puntos pueden ser poco manejables y reducir la
velocidad de renderizacin. MAGIX Web Designer 11 Premium puede suavizar la lnea
para eliminar puntos innecesarios.

Selecciona todos los puntos de la parte de la lnea que quieres suavizar. (Lee ms
arriba). Es probable que la forma ms sencilla de seleccionar una gran cantidad de
puntos sea la seleccin con arrastre sobre la regin en la HERRAMIENTA DE EDICIN DE
FORMAS .

Arrastra la barra de suavizado del final de la barra

de informacin de la EDICIN DE FORMAS .

Los puntos eliminados se recuerdan para que puedas realizar otros cambios al
suavizado de la lnea con solo ajustar la barra deslizante. Los puntos eliminados se
eliminan cuando realizas otra edicin a la lnea como, por ejemplo, arrastrar un
control deslizante.

Consejo: para asegurarte de que no se borren puntos importantes, comprueba que

no estn seleccionados. ( + clic sobre un punto seleccionado para eliminar la
seleccin).
162

Restringir la lnea
Cuando arrastras un punto de control y pulsas la
tecla de restriccin (Ctrl), el movimiento se
limitar al ngulo de restriccin (controlado en el
dilogo de OPCIONES , en la pestaa GENERAL ). Al
arrastrar un control deslizante de curva, el
ngulo est restringido.

Convertir una lnea recta en una curva (y

viceversa)
1. Selecciona los puntos de control de los dos finales del segmento de lnea.
2. Haz clic en CONVERTIR EN LNEA o CONVERTIR EN CURVA en la barra de
informacin o pulsa L o C en tu teclado.

Despus de cambiar el tipo de lnea, es posible que quieras mover los controles de
curva para una transicin ms suave entre los segmentos de lnea curvos y rectos.

Puedes seleccionar varios segmentos de lnea 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 direccin
requerida.

www.magix.es
 La herramienta de edicin de formas 163

Arrastrar el segmento de lnea

Tambin puedes cambiar la curva, arrastrando el segmento de lnea entre los puntos.

Nota la diferencia entre arrastrar una lnea para cambiar su forma y hacer clic en la
lnea para aadir un nuevo punto de control. Arrastrar un segmento de lnea recto lo
cambia a un segmento de lnea curvo.

Crear uniones en punta

Generalmente, MAGIX Web Designer 11 Premium dibuja una curva suave a travs de
un punto de control. Para esto, los dos controles de curva a cada lado del punto de
control estn unidos. Si se mueve un control de curva, tambin se mover el otro.

Muchas veces quieres crear una unin 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 botn UNIN 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 unin 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 botn UNIN 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 ms simtricas 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 lneas
Para unir lneas ambas tienen que estar seleccionadas (los deslizantes de punto se
muestran en ambas lneas): Con la herramienta de SELECCIN , mantn presionado
"" y haz clic en las lnea para seleccionarlas (si ya te encuentras en la herramienta
de EDICIN DE FORMAS , pulsa "Alt + S" si quieres ir a la herramienta de SELECCIN ,
para seleccionar la segunda lnea, presiona " + clic", y luego "Alt + S" para volver a la
herramienta de EDICIN DE FORMAS .

El modo de seleccin de objetos est explicado en detalle en el captulo "Seleccin

de objetos (en la pgina 106)".

Una vez que ambos objetos estn seleccionados, en la herramienta de EDICIN DE

FORMAS , arrastra el control deslizante del extremo de la lnea hasta el extremo de la
otra lnea. Mientras arrastras, el cursor del ratn mostrar un smbolo + para indicar
que las lneas se unirn.

www.magix.es
 La herramienta de edicin de formas 165

Si los extremos de ambas lneas ya se encuentran uno muy cerca del otro, pero no
estn unidos, puedes ampliar el tamao con el zoom, o alejar el punto de fin y
despus volverlo a arrastrar para llevarlo hasta el punto de fin y ver el "+" que indica
que las lneas se unirn.

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

Cambiar el ancho de lnea (grosor)

Para cambiar el ancho de la lnea o del contorno de una forma, primero selecciona el
objeto o los objetos:

Introduce un nuevo valor para el ancho de lnea en el campo de texto

de la barra de control ESTNDAR o escoge del men uno de los
grosores de lnea por defecto.

El grosor de la lnea 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 pxel de
pantalla si se visualiza al 100% del zoom

Puedes usar cualquiera de las unidades de medida estndar de MAGIX Web

Designer 11 Premium.

Puedes introducir el valor del ancho en cualquier unidad y MAGIX Web Designer 11
Premium lo convertir al nmero correcto de puntos. Por ejemplo, puedes introducir
0,5cm y obtendrs una lnea con un grosor de medio centmetro, pero el campo del
ancho de lnea indicar un valor cercano a 14pt.

Si no has seleccionado ningn objeto y cambias el valor del grosor de la lnea, esto
cambiar el ancho por defecto para todas las nuevas lneas.

Nota: el ancho de lnea cero es un caso especial y no debera utilizarse. Esto dibuja
una lnea de un pxel. El tamao verdadero depender del dispositivo en el que se
visualizar el dibujo. En el monitor, un pxel es claramente visible y nunca se ve con
antialiasing. En dispositivos como impresoras o imagesetters, que presentan una
resolucin mucho ms alta, la lnea es casi invisible. (Las lneas con ancho cero de
archivos importados se convierten a 0,25 pt.)
166

Galera de lneas
La GALERA DE LNEAS puede utilizarse para aplicar una gama de estilos o atributos de
lnea como, trazos de pincel, plantillas con guiones, puntas de flecha y ms.

Para ver la GALERA DE LNEAS :

Selecciona "HERRAMIENTAS > GALERA DE LNEAS "

O haz clic en la pestaa GALERA DE LNEAS en la barra de GALERAS.

La GALERA DE LNEAS est separada en secciones. Para abrir o cerrar una seccin, haz
clic en el pequeo icono de carpeta de la ventana de la galera.

Ancho de lnea
Tipo de unin
Extremo de lnea

Para aplicar cualquier estilo o atributo de lnea desde la galera puedes:

www.magix.es
 La herramienta de edicin de formas 167

arrastrar y soltar el estilo deseado desde la galera hasta la forma o lnea;

hacer doble clic sobre el estilo deseado en la galera;
seleccionar el estilo y despus hacer clic sobre el botn APLICAR .

Ancho de lnea
El campo de texto que se encuentra encima de la galera es una copia del campo de
texto de la barra de control estndar.

Trazos de pincel
Hay varias secciones que muestran una seleccin de varios estilos de pincel.

Modelo de guin
Esta seccin ofrece una seleccin de estilos de lnea con guiones.

Puntas de flecha
La mejor forma de aplicar una punta de flecha es utilizar la HERRAMIENTA DE LNEAS
RECTAS Y FLECHAS (en la pgina 154), tal como se ha descrito anteriormente en este
captulo. Sin embargo, tambin puedes utilizar la galera de lneas. Arrastra y suelta la
punta de flecha desde la galera hasta el extremo apropiado de la lnea.

Como alternativa para aplicar una punta de flecha:

Haz doble clic sobre la punta de flecha en la galera.

O, selecciona la punta de flecha deseada y pulsa APLICAR .

Web Designer tiene dos tipos de diseos de flecha: comienzo y fin. Si la lnea ya tiene,
por ejemplo, una punta de flecha de comienzo, la punta de flecha aplicada se colocar
automticamente en el extremo final de la lnea.

Si la lnea no tiene puntas de flecha y pulsas el botn APLICAR o haces doble clic sobre
un estilo para aplicarlo, la punta de flecha se colocar al final de la lnea.

El tamao de la punta de flecha depende del ancho de la lnea. Las lneas ms anchas
tendrn puntas de flecha proporcionalmente ms 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 lnea.
168

Para informacin general sobre galeras, consulta Manejo de documentos (en la

pgina 95).

Cambiar el tipo de unin

Este control en la parte superior de la GALERA DE LNEAS configura el estilo de las
esquinas.

Para cambiar una lnea existente, selecciona la

lnea.
Para cambiar el tipo de unin actual, deselecciona
todas las lneas.
Selecciona el tipo deseado del men.

Cambiar extremo de lnea

Este control en la parte superior de la GALERA DE LNEAS configura el estilo de los
extremos de la lnea.

Para cambiar una lnea existente, selecciona la

lnea.
Para cambiar el extremo de lnea por defecto,
deselecciona todas las lneas.
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 RECTNGULO ("M")

HERRAMIENTA DE ELIPSE ("L")
HERRAMIENTA DE FORMA RPIDA ("Shift + F2")

La HERRAMIENTA DE RECTNGULO crea rectngulos y cuadrados. La HERRAMIENTA DE

ELIPSE crea crculos y elipses. La HERRAMIENTA QUICKSHAPE crea polgonos, estrellas y
smartshapes.

Crear rectngulos y cuadrados

Para crear un rectngulo:utiliza la herramienta de RECTNGULO (" + F3" o
"M").

Haz clic y arrastra para dibujar un nuevo rectngulo.

Crear un cuadrado
Para crear un cuadrado en vez de un rectngulo, pulsa Ctrl mientras arrastras.

Creacin y edicin de rectngulos con esquinas

redondeadas
Para que las esquinas de tu rectngulo sean redondeadas, seleccinalo y luego
pulsa el botn "Esquinas redondeadas" en la barra de informacin de la
HERRAMIENTA DE SELECCIN .

Puedes arrastrar los controles deslizantes de las esquinas para ajustar el dimetro de
las esquinas redondeadas.
170

Para cambiar el tamao de los rectngulos ve a la HERRAMIENTA DE RECTNGULO (y

arrastra los controles deslizantes de las esquinas) o a la HERRAMIENTA DE SELECCIN .

Ten en cuenta que si cambias la relacin de aspecto de una esquina redondeada de

un rectngulo utilizando la herramienta de seleccin (extendiendo slo una
dimensin), la relacin de aspecto de las esquinas redondeadas no cambiar. Pero si
seleccionas varios objetos o si extiendes un grupo con un rectngulo con esquinas
redondeadas, la relacin de aspecto de las esquinas no se mantendr.

Crear crculos y elipses

Para crear una elipse o un crculo:

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

herramientas principal.

Los botones RADIO Y DIMETRO de la barra de informacin crean automticamente

crculos.

Radio
Dimetro
Creacin con lmites

Selecciona la opcin RADIO para dibujar crculos. El lugar en dnde empieces a

arrastrar ser el centro del crculo.

Selecciona la opcin DIMETRO. Ahora el lugar en dnde empieces a arrastrar

determinar el borde del crculo.

Con el botn de CREACIN CON LMITES seleccionado, arrastra el ratn a travs del
lienzo y se crear una elipse. Para crear un crculo en vez de una elipse, pulsa "Ctrl"
mientras arrastras.

Puedes convertir una elipse en un crculo 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
coleccin de formas tiles ya preparada como flechas, globos de dilogo,
campos de texto y componentes geomtricos.

Con la HERRAMIENTA QUICKSHAPE seleccionada, haz clic en el botn INSERTAR de la

barra de informacin y elige entre las formas disponibles en el men desplegable. Si
seleccionas RECTNGULO , ELIPSE, PANEL DE TEXTO o GLOBO DE DILOGO la forma se
colocar directamente en tu documento.

Las otras opciones abrirn el CATLOGO DE CONTENIDO ONLINE, donde estn

disponibles numerosas formas. Elige una forma e imprtala simplemente en tu
documento haciendo doble clic o haciendo clic en el botn IMPORTAR . Tambin
puedes acceder a smartshapes a travs de la GALERA DE DISEOS y el men principal
INSERTAR .

Smartshapes de flecha, globo de dilogo y segmento de tarta.

Edicin de smartshapes
Smartshapes viene con controles deslizantes predefinidos, lo que te permite editar las
formas de forma fcil e intuitiva. Simplemente modifica o curva una flecha o para
editar un globo de dilogo usando los controles deslizantes, por poner algn 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 prctica descripcin de la funcin.

Cuando ests en la herramienta de seleccin, haz doble clic sobre cualquier

smartshape y esto te lleva a la herramienta quickshape, de forma que puedes
arrastrar el ratn 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 dilogo, los controles deslizantes te permiten cambiar las

dimensiones del globo, aadir una curvatura, controlar el rea de texto y modificar el
tamao y orientacin de la flecha del globo.

Cuando smartshape contiene texto, puedes editarlo: cambia su tamao 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 lnea de colores o abrir el EDITOR DE COLOR . O arrastra el color
desde la lnea de color y sultalo sobre el elemento. Donde hay mltiples colores en la
forma, el dilogo Reemplazamiento de color (en la pgina 189) aparecer
permitindote elegir qu color quieres cambiar.

Hay muchas smartshape diferentes y vers ms aparecer con el tiempo segn 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 polgonos y estrellas

Usa la herramienta QUICKSHAPE para crear una forma simtrica 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 polgono o una
estrella.

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

herramientas desplegable.
2. Selecciona CREAR POLGONOS o FORMAS DE ESTRELLA de la barra de
informacin.
3. Selecciona la cantidad de lados en el men o introduciendo el valor en el
campo de texto.

Modos de creacin: Radio/Dimetro/Lmites

Polgono
Elipse
Formas de estrella
Esquinas redondeadas
Restaurar bordes
Nmero de lados
Men de elementos editables
Edicin de campos
Insertar smartshapes

Para crear un polgono o estrella arrastra el ratn exactamente de la misma manera

que para un crculo o elipse usando los botones de creacin de lmites, dimetro o
radio para controlar el punto de origen de tu forma.

Desde el centro hacia afuera (botn RADIO).

O desde una esquina externa (botn de DIMETRO).
O crea en diagonal un rectngulo imaginario que encierre el polgono (CREACIN
CON LMITES ) lo que te permite distorsionar el polgono o la estrella.
174

Polgonos o estrellas con esquinas redondeadas

Selecciona el botn ESQUINAS CURVADAS o haz
doble clic sobre un punto de esquina.

El polgono 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 botn ESQUINAS CURVADAS .

O doble clic sobre el control deslizante.

Editar polgonos y estrellas

La herramienta SELECCIN te permite mover, girar, doblar y cambiar el tamao de una
forma. (La herramienta SELECCIN se describe en Manejo de objetos (en la pgina
106)).

Usando la herramienta QUICKSHAPE puedes cambiar el tamao o rotar:

Arrastra los controles deslizantes de esquina.

O selecciona TAMAO Y ROTACIN del men ELEMENTOS EDITABLES . Introduce
los valores requeridos en los campos de texto.

Tambin 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 botn

ESQUINAS CURVADAS .

www.magix.es
 Manejo de formas 175

Cambia el polgono a una elipse haciendo clic en el botn CREAR ELIPSE o

haciendo doble clic en el centro del polgono.

Haz un polgono con forma de estrella haciendo clic en el botn FORMAS DE

ESTRELLA . O haciendo doble clic en un lateral.

Arrastra los lados para curvarlos. Mueve el cursor sobre la esquina del polgono (se
convertir en una flecha). Ahora puedes arrastrar los lados.

A la izquierda se encuentran los polgonos

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 nmero en el men o

seleccionando una de las opciones.

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

Tambin 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 desplazarn de
forma simtrica. 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 opcin del men ARREGLO > COMBINAR FORMAS te ofrece una amplia gama de
opciones avanzadas para combinar formas con el objetivo de crear nuevas formas
como, aadir, separar o cortar. Puedes utilizar la combinacin 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 lnea de las formas subyacentes no se modificarn.
Combinar formas modifica las lneas fsicamente. 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 crculos y el rectngulo.

2. Selecciona las tres formas.
3. Haz clic derecho y escoge "COMBINAR FORMAS" > "AADIR FORMAS" .

La nueva forma tomar los atributos y colores de la forma de arriba (en este caso el
rectngulo de la ilustracin.)

Interseccin de formas
Con FORMAS DE INTERSECCIN , el nuevo objeto se crea de esas partes de las formas
inferiores que estn 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 INTERSECCIN . Esto crea una
nueva forma. La forma de arriba desaparece.

Los atributos y colores de lnea de las formas subyacentes no se modificarn. Las

reas no cubiertas por la forma de arriba se eliminarn. La forma de arriba puede ser
un grupo para una sustraccin para completa. (Los grupos se describen en el captulo
Manejo de objetos (en la pgina 133)).

Separar una forma

Si quieres separar una lnea o una forma: selecciona un punto de control existente de
la lnea o contorno de la forma, o crea uno nuevo donde quieres separar la lnea (clic
sobre la lnea en la herramienta de EDICIN DE FORMAS; ver arriba). Haz clic sobre el
botn SEPARAR EN PUNTOS o pulsa la B de tu teclado.

Si separas una lnea, el cambio no ser visible. Sin embargo, si mueves un punto de
control, solo se mover una parte de la lnea. Si separas una forma, se convertir en
una lnea. El relleno desaparecer.

Nota: cortar formas (parte de Arreglo > Combinar formas) te permite separar
formas en dos formas individuales. Esta funcin se describe en el captulo Trabajar
con formas (en la pgina 177).

Cortar formas
MAGIX Web Designer 11 Premium te permite cortar formas en dos o ms partes.
Puedes usar un objeto slido o una lnea. Por ejemplo, para cortar un segmento de un
crculo:

1. Crea un crculo y un tringulo arriba

2. Seleccinalos.
3. Escoge ARREGLO> COMBINAR FORMAS >
CORTAR FORMAS . Las esquinas del
tringulo cortarn el crculo en dos
formas. El tringulo desaparecer.
4. Ahora puedes arrastrar el segmento fuera
del crculo.
178

Tambin puedes utilizar una lnea para cortar un objeto:

La lnea debera estar dibujada completamente a travs del objeto y extenderse ms

all. (Como se muestra en la ilustracin.) Si la lnea es demasiado corta, slo se
realizar un pequeo corte.

Divisin de formas complejas

Si utilizas las opcin ENTRECRUZAR TODAS LAS FORMAS , los objetos seleccionados se
cortan por las lneas de la interseccin.

Tres rectngulos seleccionados con un

borde de 1 px.

"ARREGLO" > "COMBINAR FORMAS" >

"ENTRECRUZAR TODAS LAS FORMAS"
divide las formas por las lneas de
interseccin. Los bordes de 1 pt.
muestran los contornos de las nuevas
formas.
Luego podrs separar los rectngulos
para ver las nuevas formas.

Los atributos y colores de lnea de las formas entrecruzadas no se modificarn.

www.magix.es
 Trabajar con colores 179

Trabajar con colores

MAGIX Web Designer 11 Premium te permite controlar la aplicacin, creacin y
modificacin de los colores de los objetos. Para documentos simples, puedes escoger
los colores de la paleta de colores en pantalla, la lnea de colores. Las operaciones de
color ms avanzadas se describen ms adelante.

La lnea de colores
La lnea de colores se muestra en la parte inferior de la ventana. Te permite ver los
colores de relleno y lnea, te da acceso al editor de colores y proporciona la paleta de
colores predefinidos incluyendo la opcin "sin color".

MUESTRA DE COLOR: la parte exterior de la muestra de color en el extremo

izquierdo muestra la lnea 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 ningn objeto.

Este botn permite el acceso al editor de color (en la pgina 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 pgina 184), para ms detalles.
SIN COLOR: haciendo clic aqu puedes aplicar un "relleno sin color". Con
"Shift+clic" puedes aplicar "sin color" a una lnea. 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 slida, mientras
que una forma rellenada con "sin color" queda hueca. El botn SIN COLOR
tambin 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 lnea actual

Si la longitud de la lnea de color excede la ventana, puedes desplazarte por la lnea de

colores con la barra de desplazamiento inferior o arrastrando la lnea de color con "Alt
+ arrastrar".

MAGIX Web Designer 11 Premium te ofrece varias opciones para el tamao

visualizado de la lnea de colores (descrito en Personalizacin de Web Designer)
180

Colores de la lnea de colores

Colores con nombre (originales): primero se encuentran los colores con nombre
(si se encuentran presentes en el documento, ver ms abajo). Los colores con
nombre se utilizan para asignar colores originales a las plantillas y diseos, para
que el esquema de color de un diseo pueda cambiarse sin tener que editar cada
objeto de forma individual.
Colores vinculados: son aquellos colores que estn relacionados con una sombra
o un matiz y se muestran de forma diferente en la lnea de color (pequeos
rectngulos redondeados), de modo que resulta mucho ms fcil distinguir los
colores con nombres independientes de aquellos que estn vinculados a un color
principal. Leer el captulo Creacin de un tinte, una tonalidad o un color
vinculado (en la pgina 194).
Colores de paleta: hay una paleta "estndar" de 46 colores predefinidos. Hay 5
sombras de 7 colores estndar y 10 sombras de grises, negros y blancos. Los
colores de la paleta estndar no se pueden editar (es decir, no son colores con
nombre) y tienen una seleccin simple y limitada de colores que se utilizan para
aplicarlos a objetos (ya sea arrastrando hasta el objeto o mediante clic).

Los marcadores pequeos en los iconos de color muestran cul 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 lnea.
Los marcadores en forma de cruz muestran los atributos de color activo, si
no hay ningn objeto seleccionado. El color de lnea 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 tambin escogiendo un color con el selector de color de un objeto

existente, consulta Usar la pipeta para escoger colores (en la pgina 184). Los
marcadores de lnea de colores se actualizan inmediatamente e indican el color del
objeto bajo la pipeta al arrastrarlo alrededor.

Reordenar los colores de la lnea de color.

Es posible que prefieras cambiar el orden de los colores de la lnea de color.
Simplemente pulsa Ctrl y arrastra los colores sobre la lnea. Con esto tambin se
reordenar la GALERA DE COLORES . Slo los colores con nombre pueden ser
reorganizados en la lnea de color.
www.magix.es
 Trabajar con colores 181

Men contextual de la lnea de colores

Haz clic derecho sobre un color de la lnea de colores para ver un men contextual
con las siguientes opciones:

EDITAR Abre el editor de color para editar el color con

nombre (no disponible para los colores de la paleta)
ESTABLECER COLOR DE RELLENO Configura este color como el color de relleno o de
/ ESTABLECER COLOR DE LNEA lnea del objeto seleccionado
REEMPLAZAR COLORES Esta opcin se muestra solo cuando el objeto
seleccionado tiene partes con mltiples componentes
o mltiples colores,
RENOMBRAR Cambiar el nombre del color con nombre (no
disponible para los colores de paleta)
ELIMINAR Borra el color con nombre (no disponible para los
colores de paleta)

Si el objeto seleccionado es un mapa de bits, tambin puedes consultar las opciones

CONFIGURAR COLOR OSCURO DE TONO CONTINUO / CONFIGURAR COLOR CLARO DE
TONO CONTINUO. Consulta Coloreado de mapa de bits (en la pgina 246) para ms
informacin.

Con un clic derecho sobre la opcin "sin color", las opciones de color de relleno y lnea
se reemplazarn por ELIMINAR COLOR DE RELLENO / ELIMINAR COLOR DE LNEA.

Aplicar colores de relleno y lnea con arrastrar y

soltar
Para aplicar un color de relleno a un objeto (seleccionado o sin seleccionar),
arrastra un color desde la lnea de colores y sultalo en el centro de la forma.
Para establecer el color de lnea 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 pgina, arrastra un color hasta el fondo de
pgina.
Para cambiar cualquier color en un objeto complejo o multicolor como un botn,
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 cul 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 pgina 249).
182

Establecer color de lnea (cuando se arrastra sobre una lnea).

Establecer color de relleno actual (cuando se arrastra sobre un espacio vaco).

Establecer color de inicio de relleno con gradacin (cuando se arrastra sobre el

inicio de un relleno).
Establecer color final de relleno con gradacin (cuando se arrastra sobre el final
de un relleno).
Establecer color de fondo de pgina o tablero de dibujo (cuando se arrastra un
color hasta la pgina o tablero de dibujo).

En vez de arrastrar y soltar, si has seleccionado un objeto, puedes hacer un simple clic
sobre la lnea de color. As se abre el Men contextual de color de lnea.

En los otros casos, puedes modificar el color de la lnea con "Shift" + clic sobre la lnea
de color.

Si has seleccionado una foto o una forma con relleno de mapa de bits, un clic sobre el
color de lnea 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 travs del men contextual de la lnea de colores (leer ms arriba).
Consulta Colorear mapa de bits (en la pgina 246) para ms informacin.

Para establecer la opcin "sin color" en un relleno o

lnea, realiza los pasos descritos anteriormente, pero
escoge la opcin "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 lnea de colores.
O haz clic derecho sobre el objeto y selecciona COLOR DE RELLENO
O haz doble clic sobre el icono de color de lnea y relleno actual en la lnea de
colores (al borde del panel ms a la izquierda).

Para editar el color de lnea del objeto o objetos seleccionados

" + clic" sobre el icono EDITAR COLOR

O haz doble clic sobre el icono de color de lnea y relleno actual (al borde del
panel ms 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 mayora de los programas grficos, 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 fcilmente y con precisin.

Aplicacin 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 PGINA 197) o selecciona

objetos de texto con la HERRAMIENTA DE SELECCIN (en la pgina 29)
Haz clic derecho sobre un color en la LNEA DE COLORES .
Selecciona ESTABLECER FONDO DE TEXTO

Para quitar el color de fondo...

Selecciona el texto
Haz clic derecho sobre SIN COLOR en la LNEA DE COLORES (en la pgina 179)
Selecciona la opcin 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 lnea 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 tamao de la ventana.

La forma ms fcil de crear un color nuevo es seleccionar un tono de la lnea de color

inferior. Todos los matices de este tono se vern en la seccin superior: tan solo haz
clic o arrastra desde la seccin superior para seleccionar el nuevo color. Vers 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 plido del rojo,
selecciona el color rojo en la seccin inferior y despus escoge un rojo muy plido
(rosa) en el rea superior derecha de la seccin superior.

Color previo y actual

Mientras arrastras hasta el editor de color, las dos pequeas 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 edicin). Esto es til cuando quieres
realizar un cambio pequeo 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, vers que el editor de
color toma el color que se encuentra debajo de la pipeta. Suelta el botn del ratn
cuando tengas el color deseado. Esta es una forma fcil y rpida de utilizar el mismo
color o copiar colores de fotos o de un objeto a otro.

Si el objeto bajo el cursor del ratn 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 pequeo popup en el cursor

del ratn 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 dilogo que te ofrece ms 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 ms sobre tipos de colores, consulta el captulo Creacin de un
tinte, una tonalidad o un color vinculado (en la pgina 194).

Aqu puedes introducir valores precisos RGB (o HSV). En general, se introduce un

color hexadecimal RGB para los grficos web. Los campos H , S y V te permiten
especificar el color con un valor porcentual HSV (valor de saturacin de tinte). En el
campo # puedes introducir el valor RGB en nmeros hexadecimales (0-F).

Aqu tambin estn 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
mtodo ms 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 pgina como los botones o las barras de
navegacin. Cualquier edicin que se realice a un color con nombre se reflejar
en todos los objetos o partes del dibujo que usen ese color. Tambin puedes
copiar colores originales entre documentos. Los colores originales aparecen en
la lnea de colores. Si el diseo ya tiene colores originales y cargas o pegas
plantillas de la GALERA DE DISEOS 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 mayora de plantillas para que coincidan
perfectamente con los diferentes colores originales de los elementos que
importes.

Importante: si seleccionas un objeto de la pgina 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 pgina
190)).

Esquemas de colores originales

Muchos de los temas web ofrecidos en la GALERA DE DISEOS y en los paquetes de
plantillas que pueden adquirirse por separado incluyen esquemas de colores
alternativos que pueden aplicarse fcilmente a los sitios web que utilizan el mismo
tema para transformar el esquema de color de forma instantnea. Los esquemas de
color se pueden encontrar por lo general dentro de cada tema de la GALERA DE
DISEOS bajo TEMAS PARA PLANTILLAS DE PGINAS WEB , despus de todos los diseos
de pgina y elementos grficos independientes que conforman el tema. Todos tienen
"Esquema de color" en su ttulo en la GALERA DE DISEOS , por lo que pueden
identificarse fcilmente.

Para aplicar un esquema de colores a tu sitio web, simplemente arrastra el esquema

desde la GALERA DE DISEOS y sultalo en tu pgina. 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 obtendrs resultados mezclados y algunos esquemas no funcionarn
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 fcilmente a los
colores originales, si lo prefieres, despus de experimentar con esquemas
alternativos.

Creacin de tus propios esquemas de colores

Es muy fcil crear tus archivos de esquemas de colores, que puedes compartir con los
usuarios de Web Designer para que ellos los utilicen en las pginas web creadas con
el mismo tema.

1. Carga una de las plantillas de pgina para el tema. Escoge una que muestre
todos los colores del tema de forma ms efectiva. De ser necesario, puedes
agregar ms elementos a la pgina para incluir toda la gama de colores
temticos.
2. Edita los colores con nombre del tema uno por vez, tal como se describe a
continuacin en la seccin "Edicin de colores con nombre" (en la pgina 190).
3. Una vez que ests 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. Tambin 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", podras llamarlo
"BetaThemeColorSchemeAzul.web".

Para comprobar tu esquema de colores, arrstralo y sultalo desde el explorador de

archivos hasta la pgina con los colores temticos por defecto. La pgina debera
cambiar de color instantneamente con tu esquema de colores.
188

Creacin 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 fcil 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

Asgnale al color un nombre adecuado, como "color del coche" y haz clic en crear.
Vers el color nuevo aadido en la LNEA DE COLOR .

Ahora podrs aplicar el color a cualquier objeto como lo haces habitualmente,

arrastrndolo de la lnea de color y luego soltndolo, o solo con un clic (o con un clic
en el botn derecho para usarlo como lnea de color) para aplicarlo como color de
relleno. Cuando editas un color con nombre, todos los objetos que usen este color
cambiarn.

www.magix.es
 Trabajar con colores 189

Reemplazar colores
Con Web Designer es ms fcil volver a colorear objetos agrupados complejos como
botones, paneles de texto, barras de navegacin, etc., ya que te ofrece una lista de
colores usados que te ayuda a elegir cual quieres reemplazar.

El dilogo 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 lnea de color y sultalo sobre el elemento.

Selecciona un elemento y haz clic en un color de la lnea 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 grficos de esta forma, puedes
reemplazar el uso de colores con nombre por colores locales sin nombre, o
viceversa. As, por ejemplo, podras tomar un botn 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 tambin el color del botn. O bien, si
reemplazas el tema de color 1 con un color local, el botn ya no estar asociado a
ningn tema de color. Y puedes usar esta funcin para aplicar de forma rpida
colores con nombre en grficos que originalmente no estaban diseados 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 mltiples colores, la lista
desplegable del editor de color te muestra nicamente estos colores. El color de
relleno local, la lnea de color local y la lista de colores con nombre no estn
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 lnea de colores y sultalo en el fondo de la pgina o del
tablero de dibujo para establecer su color. Si hay mltiples colores en el fondo, se
mostrar el dilogo "Color de reemplazo" para que elijas que color reemplazar.
Funciona igual que como se ha descrito arriba para los grupos con mltiples colores.

Para usar el editor de color para cambiar los colores de fondo, haz clic derecho en la
pgina y selecciona "FONDO DE PGINA" >"EDITAR COLOR DE PGINA" , 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 LNEA DE COLORES y selecciona EDITAR del men
que aparece.
www.magix.es
 Trabajar con colores 191

O arrastra y suelta un color de la lnea de color sobre el EDITOR DE COLOR .

O bien arrastra y suelta un color de la GALERA DE COLORES (explicado ms
adelante) sobre el EDITOR DE COLOR .

Ahora podrs editar el color como lo desees. Todos los objetos que utilizan ese color
se actualizarn automticamente para mostrar el nuevo color en todas las pginas 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 lnea de colores y escoge RENOMBRAR .

Eliminar colores con nombre

Para eliminar un color con nombre, haz clic sobre el color en la lnea de colores y
selecciona ELIMINAR .

Eliminar colores no utilizados

Para eliminar los colores no utilizados de la Lnea de color, abre la galera de colores y
selecciona una gama de colores (haz clic sobre uno y Shift+clic sobre otro), despus
pulsa el botn 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
eliminarn automticamente cuando se guarda o carga un documento.

Importacin de colores con nombre

Al importar un diseo al documento actual (p.ej. al importar desde la GALERA DE
DISEOS , importar de un archivo XAR o pegar objetos de otro diseo), si alguno de los
nombres de los colores importados coincide con el nombre de los del diseo actual,
pero mantiene diferentes valores de color, aparecer una alerta como la siguiente:

Si deseas que lo objetos importados adopten los colores de tu diseo actual, elige la
opcin 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 opcin NO IGUALAR . As se aaden nuevos nombres de colores a tu
diseo, con un nmero aadido al nombre de los colores para distinguirlos de los
colores que ya estn en el diseo actual. De esta forma los objetos importados
mantendrn sus propios colores.

Observa que si importas objetos de mltiples diseos diferentes y eliges siempre NO

IGUALAR , acabars con un gran nmero de nombres de colores diferentes en tu lnea
de color. Esto casi nunca resulta til. Por ello una alternativa mejor es usar la funcin
"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 definicin del "estilo de texto"

entre el documento y el diseo importado. Ver esta entrada no significa
necesariamente que haya diferentes definiciones del nombre de color: podra deberse
tan solo a diferencias de "estilo de texto". Consulta la seccin de "Estilos de texto" del
captulo de "Manejo de texto" para ms detalles.

La entrada de "igualar" arriba incluye una casilla de NO PREGUNTARME DE NUEVO. Si

haces clic aqu, la opcin que elijas se aplicar a todas las importaciones futuras sin
preguntarte de nuevo. Sin embargo esto solo se aplica durante la sesin actual, por lo
que despus de reiniciar el programa se te preguntar de nuevo, en relacin a la
prxima importacin, cuando haya alguna discrepancia con los colores.

Usar la opcin IGUALAR significa que puedes escoger una plantilla, cambiar sus
colores de tema, importar a continuacin ms plantillas del mismo tema y los diseos
importados adoptarn automticamente los colores de tema que has modificado.

Por ejemplo, importa un botn grfico rojo de la GALERA DE DISEOS , cambia su color
de tema principal de rojo a verde, luego importa un logo grfico rojo del mismo tema y
elige la opcin IGUALAR . Cuando el logo aparece en tu diseo, en vez de ser rojo
habr recogido automticamente el color de tema verde escogido. Como en la
mayora de los temas el nombre del color de tema principal es "Color de tema 1",
tambin obtendrs buenos resultados al importar grficos de diferentes temas e
igualando los colores.

Convertir color con nombre en local para frame/capa

Cuando pulsas este botn, se crea un nuevo color con nombre que es idntico
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
opcin es til cuando ests creando animaciones y quieres que el color de un objeto
cambie a medio camino de la animacin. Este botn se oscurece a no ser que ests
editando un color con nombre que tambin 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 tambin puede vincular un color a otro color, es
decir, cuando cambia el color principal, el color vinculado tambin cambiar. Hay tres
formas de vincular un color a su: TINTE, TONALIDAD y COLORES VINCULADOS . Esta es
una tcnica muy til que te permite, por ejemplo, volver a cambiar el color un dibujo
con tonalidades complejas con un slo clic. Algunos de los cliparts modelo utilizan
esta tcnica.

Tintes
Los tintes estn vinculados a otros colores (llamados colores principales) y son
siempre una versin ms plida que el principal. Tienen dos usos principales:

Cuando quieres crear tonalidades ms plidas de un color principal y es posible

que quieras cambiar el color principal en el futuro y que los tintes se actualicen
automticamente.
Para extender el rango de colores disponibles de las tintas de impresin. 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
ests utilizando solamente tinta negra y blanca, podrs crear varias tonalidades
de gris. Si ests imprimiendo con una gama limitada de colores (generalmente
es ms econmico 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, tambin 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 ms claros y ms oscuros basados en un color principal. Si
se cambia el color principal, se modificarn tambin las tonalidades asociadas. Por
ejemplo, un dibujo de un coche puede utilizar tonalidades para las regiones con ms
luz y tonalidades de la carrocera. Una simple edicin al color principal cambiar todos
los colores, pero las tonalidades se mantendrn 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 saturacin y el valor deberan ser 100%. Al
verlo en el EDITOR DE COLOR , la cruz debera encontrarse en la esquina superior
izquierda.

Colores vinculados
Los colores vinculados son similares a las tonalidades, pero permiten ms flexibilidad.
Tambin estn 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 versin ms o menos saturada del principal, pero que el
tinte y la tonalidad sean las del principal.

Creacin de un tinte, una tonalidad o un color

vinculado
Ve arriba para leer la seccin sobre TINTES , TONALIDADES y COLORES VINCULADOS . Te
ser til para cuando quieras encontrar el color principal de una tonalidad ms 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
tambin cambie su tonalidad. Por ello, de ser necesario, primero asgnale un nombre
al color (ver Creacin de nuevos colores con nombre (en la pgina 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 opcin "color normal" en el men desplegable situado en la parte
inferior del dilogo 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 aadirle un vnculo.
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 an no has creado un
color con nombre al que le quieres agregar un vnculo, o tambin puede ser que ests
editando el nico color con nombre del diseo.

www.magix.es
 Trabajar con colores 195

A la izquierda vers que el nuevo color tiene un poco de tinte del color original "amarillo", por
ello el editor slo suministra tintes ms claros del color original. A la derecha si seleccionas la
opcin tonalidad podrs elegir cualquier tonalidad ms clara o ms 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 lnea de colores y as puedas
encontrarlo ms fcilmente cuando lo necesites. Haz clic sobre el cono con forma de
etiqueta para crear un nuevo nombre para un color. Ahora aparecer en la lnea 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 (arrstralo de la LNEA DE COLOR hasta el
EDITOR DE COLOR y modifica el color.) Vers que los objetos con el tinte, tonalidad o
color cambian en sincronizacin con el color principal.

NOTA: ten cuidado de no editar el color de los objetos sobre la pgina a la que has
aplicado colores con NOMBRE, TINTES , TONALIDADES o COLORES VINCULADOS porque
se convertirn en COLORES LOCALES .
196

Trabajar con textos

Introduccin
Las opciones de edicin de texto de MAGIX Web Designer 11 Premium son similares
a los editores de texto o procesadores de texto, pero adems suministra una amplia
gama de caractersticas que no encontrars en esos programas.

Puedes aumentar o ampliar el texto a un tamao muy grande.

Puedes aplicar la gama de atributos y efectos normales de MAGIX

Web Designer 11 Premium: rellenos, difuminacin, 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

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

JUSTIFICACIN: una forma alternativa de describir a la alineacin 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 ms comn. La
mayora de las fuentes son fuentes con espaciado proporcional, es decir, que el ancho
de los caracteres vara.

PUNTO : el tamao 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 tamao determinado pueden
variar.

La herramienta de texto
Usa la HERRAMIENTA DE TEXTO ("F8") para introducir o editar texto.

Barra de informacin de la HERRAMIENTA DE TEXTO , lado izquierdo

Fuente
Tamao de fuente
Estilo
Negrita
Cursiva
Subrayado
198

Barra de informacin de la HERRAMIENTA DE TEXTO , lado derecho

Justificar
Superndice/Subndice
Espaciado de lnea
Lista con vietas
Lista numerada
Quitar sangra
Colocar sangra
Corrector de ortografa
Espaciado de prrafos

MAGIX Web Designer 11 Premium es compatible con tres tipos bsicos de objetos de
texto

Lneas de texto simple: haz clic sobre la pgina y escribe.

Columnas de texto: haz clic y arrastra para crear una columna y despus escribe.
reas de texto: haz clic y arrastra en sentido diagonal para crear un rea
rectangular. Despus escribe.

Despus de haber creado un objeto de texto puedes transformarlo (girarlo, inclinarlo,

cambiar su tamao) y puedes aplicar todos los atributos normales, color de relleno,
transparencia, difuminacin, etc. utilizando las herramientas normales. Tambin
puedes vincularlo a una curva. El texto permanecer editable.

www.magix.es
 Trabajar con textos 199

Men de fuente

Popup de tamao 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 estn 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 pginas web, ya que son
200

admitidas por los navegadores y dispositivos ms comunes. Consulta el apartado

"Fuentes compatibles con la web". La tercera seccin muestra las fuentes de Google
disponibles que tambin pueden usarse de forma segura en la pginas web, y la
seccin final presenta una lista alfabtica de todas las fuentes instaladas. Cada
nombre de fuente se visualiza en el men usando su propio tipo de letra, lo que hace
ms fcil la seleccin.

Aquellas fuentes para las cuales estn disponibles varios estilos se muestran con
pequeos tringulos negros en el lado derecho del men. Tan solo mantn el cursor
del ratn sobre el nombre de una fuente durante un segundo o dos y aparecer un
pequeo 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 ratn por encima para seleccionar la variante de la fuente deseada.

Fuentes compatibles con la web

Estas fuentes son compatibles para su uso en pginas web porque la inmensa
mayora de los PCs y otros dispositivos las tendrn instaladas. Tambin puedes usar
cualquiera de las cientos de fuentes de Google en tu pgina. Incluso puedes usar otras
fuentes que tengas instaladas, siempre que la licencia de la fuente lo permita:
consulta la seccin FUENTES PARA PGINAS WEB incluida abajo.

Vista previa de fuente en tiempo real

Si mantienes el ratn sobre cualquier entrada del men de fuentes por una fraccin
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 ratn sobre el men volvers a
la fuente inicial hasta que te poses sobre otra entrada. Esto es ideal para obtener una
vista previa muy rpida de gran cantidad de fuentes.

Si pulsas la tecla "Shift" mientras navegas por el men de fuentes, habr una pequea
pausa antes de que se vea la fuente seleccionada. Esta opcin es prctica porque la
vista previa instantnea ralentiza la navegacin a travs del men; y si tienes varias
fuentes seleccionadas este proceso ser an ms lento.

Vista previa de tamao de fuente en tiempo real

Junto al men de tamao 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
tamao de letra directo y ajustar el tamao de fuente del texto seleccionado en
tiempo real a medida que arrastras la barra deslizante.

Haz clic para ver la opcin emergente para el tamao 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
podrs arrastrar la barra deslizante o usar la rueda del ratn sobre el control para
ajustar rpidamente los valores. En este caso, podrs ajustar el tamao de punto
usando la rueda del ratn para ver los resultados directamente en la pgina del
documento mientras trabajas.

Otra forma de utilizar la barra deslizante emergente es "pulsar + arrastrar + soltar"

sobre el botn y la barra. Esto es un modo ligeramente ms directo de ajustar el
control (requiere menos clics).

Navegacin instantnea del men de fuente

Mientras el men de fuente es mostrado, puedes escribir los carcteres iniciales del
nombre de fuente, y el men se desplazar hasta esa seccin de la lista. Por ejemplo,
si escribes "ver", se desplazar instantneamente y localizar la fuente "Verdana".

Fuentes de Google
Web Designer te da la opcin 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 pgina web: tu
navegador buscar las fuentes directamente en los servidores alojamiento de fuentes
de Google.

Las fuentes estn 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 AADIR 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
bsqueda o desplzarte hacia abajo por la
lista para encontrar una fuente adecuada.
Restringe tu bsqueda 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 tamaos.
202

Haz clic en la fuente elegida y se te preguntar si quieres descargarla e instalarla. En

muchos PC Windows, y dependiendo de tu configuracin Windows, se solicitar
permiso para la instalacin, que realiza un programa de instalacin de fuentes
independiente. Cada fuente que instales aparecer en la seccin 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 opcin "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 botn "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 pginas web.
Como las fuentes son TrueType tambin se pueden usar en cualquier documento (p.
ej. un PDF).

Si envas 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 pginas web con varios
navegadores para asegurarte de que la calidad de las fuentes es aceptable.

Smbolos de la fuente Font Awesome

Los smbolos de la fuente Font Awesome son una amplia seleccin de iconos
expansibles. Puedes insertarlos en el texto o en tu documento como grficos
independientes.

Los smbolos se dividen en varias categoras como iconos de aplicacin web, iconos
de marca, iconos de editor de texto, iconos direccionales, etc. y se pueden encontrar
en el MEN "INSERTAR" > "SMBOLOS DE FUENTE FONT AWESOME" Tan solo desplzate
hacia abajo para ver la lista completa.

www.magix.es
 Trabajar con textos 203

Algunos de los smbolos de la fuente Font Awesome.

Insertar smbolos 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 coleccin. El carcter del smbolo se
inserta en el texto.

Cuando insertas smbolos en el documento de esta forma, los caracteres de smbolos

usan la fuente Font Awesome. Si posteriormente publicas tu documento como HTML,
vers un cuadro que te advierte que la fuente Font Awesome ser publicada con tu
documento o en tu pgina web porque requiere dicha fuente. Esto no supone ningn
problema, ya que la licencia de la fuente Font Awesome permite tal uso.

El smbolo de Font Awesome insertado como fuente usando la herramienta de texto

Insertar smbolos como grficos

Para insertar un icono como un grfico de vector expansible tan solo tienes que
asegurarte de que el cursor de texto no est presente antes de hacer clic en el
smbolo que se debe insertar. Para quitar el cursor de texto, cambia a la herramienta
de seleccin o a otra herramienta excepto la herramienta de texto.

El smbolo aparecer en el centro del espacio de trabajo (ten en cuenta que puede
estar tras el dilogo de Font Awesome). Usa la herramienta de seleccin para moverla
donde quieras en tu documento o redimensionarla, etc.
204

Cuando insertas un smbolo de esta forma, tu documento ya no necesita la fuente

Font Awesome porque se ha convertido en un grfico o insercin. De esta forma, si
publicas un HTML no vers la advertencia de la fuente Font Awesome mencionada
anteriormente.

Smbolo Font Awesome insertado como grfico

Texto simple
Si quieres escribir una pequea cantidad de texto simple, coloca el cursor donde
quieres introducir el texto y haz clic. Aparecer un cursor rojo y podrs comenzar a
escribir con tu teclado.

Si te has equivocado, pulsa "Supr "o "Retroceso" de la forma usual.

Al pulsar "Enter" se completa la lnea e inicia una lnea de texto debajo. El espaciado
entre lneas se controla en el campo de texto de espaciado en la barra de informacin.

El texto bsico no es adecuado para grandes prrafos, ya que no hay salto de lnea
automtico (puesto que el ancho es ilimitado). Usa mejor una columna de texto o un
rea de texto en su lugar (ver ms abajo).

Por defecto, el texto no tiene color de contorno. Con "Shift + clic" sobre un color de la
lnea de color le dars un color de contorno al texto seleccionado (el grosor puede
ajustarse como siempre a travs del control de ancho de lnea). Probablemente
querrs establecer el tipo de unin de lnea (en la pgina 168) para redondearla y
darle un aspecto ms suave (controlen la parte superior de la GALERA DE LNEAS ).

El ancho de lnea est definido Cambiar el ancho de lnea (el grosor) (en la pgina
165). La aplicacin de color est descrita en Manejo de colores (en la pgina 179).

Puedes seguir introduciendo texto incluso despus de la rotacin o de haber aplicado

un relleno o ajustado el texto a una lnea.

www.magix.es
 Trabajar con textos 205

Texto en una columna

Si ests introduciendo una gran cantidad de texto a lo largo de varias lneas, es posible
que una columna te resulte ms til. Cambiar el ancho de la columna adaptar
automticamente el texto. Para escribir una columna de texto:

1. Selecciona la herramienta de TEXTO.

2. Mueve el cursor del ratn al lugar de inicio de la columna.
3. Arrastra hacia la derecha para crear una lnea horizontal del ancho de la
columna. Esta lnea roja te muestra el ancho de la columna. Nunca se imprime.
4. Introduce el texto. No necesitas pulsar al final de una lnea. Cuando el texto llega
al final de la columna sigue automticamente en una nueva lnea.

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 pgina. Por lo tanto, debes
comenzar a tipear inmediatamente despus de haber arrastrado la lnea 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 slo se separan en las lneas si se introduce un guin.

El efecto de el guin en un texto fluido.

Si introduces Ctrl+- (tecla menos) se insertar un guin suave que aparecer

solamente si la palabra puede terminarse al final de la lnea. 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 guin normal, la palabra
se separar al final de la lnea. Se llama guin "suave" porque cuando la palabra
aparece en el medio de una lnea, el guin desaparece (a diferencia de un guin
normal o el carcter menos), por lo que el guin se introduce slo si es necesario.

Al editar texto, el guin suave funciona como un carcter invisible (no ocupa
espacio), pero puede reconocerse en el texto moviendo las flechas izquierda/derecha
sobre el lugar en donde se encuentra el carcter.

Un guin rgido puede insertarse utilizando Ctrl+Shift+- (tecla menos). Un guin

rgido no causar ninguna separacin. Esto es til en situaciones en las que las
palabras presentan guiones pero no deben separarse al final de las lneas.
206

Cambiar el ancho de la columna

Arrastra uno de los dos controles deslizantes al final de la lnea.

Cambiar el ngulo de la columna

Pulsa +arrastra uno de los controles deslizantes al final de la lnea para cambiar el
ngulo de la columna. Como alternativa, pulsa Ctrl y arrastra para limitar la lnea a
ngulos restringidos. Tambin puedes utilizar la herramienta de SELECCIN y girar el
objeto de forma normal.

Para ms informacin sobre ngulos restringidos, lee el captulo Introduccin a

MAGIX Web Designer 11 Premium (en la pgina 94).

reas de texto
Si haces clic y arrastras diagonalmente sobre la pgina usando la herramienta de
TEXTO , crears un rea de texto rectangular. El cursor se posicionar en la esquina
superior izquierda y podrs 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 aadir 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 podrs continuar editando el texto de forma normal.

Conexin 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 conectarn. 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 pgina para crear una nueva rea de texto. La nueva rea de texto se
conectar automticamente y el texto fluir hasta la nueva rea.

Consejo: puedes hacer fluir un texto desde un rea a otra en cualquier pgina,
incluso en pginas anteriores. Si necesitas que el texto fluya a un rea que se
encuentra varias pginas adelante, probablemente sea ms fcil utilizar el mtodo
anterior, aunque si reduces la imagen a un tamao de texto pequeo podrs
arrastrar la flecha por las pginas.

Para desconectar un rea de texto de otra, arrastra el indicador y sultalo 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.

Pginas de mltiples columnas

Puedes usar dos o ms reas de texto en tu pgina, vinculadas tal como se
describe arriba, para crear un diseo de pgina de mltiples columnas. Sin
embargo, Web Designer te ofrece una forma ms rpida de hacerlo.
Selecciona el rea de texto que quieres colocar en varias columnas o coloca
el signo de intercalacin en l y haz clic en el botn COLUMNAS de la barra de
informacin de la HERRAMIENTA DE TEXTO . O haz clic derecho sobre el texto y
escoge COLUMNAS del men contextual.

Aparecer el dilogo de
columnas...

Dilogo de columnas

Por defecto, la cantidad de columnas que se muestran coincidir con la cantidad de

reas de texto vinculadas de la pgina actual. No obstante, puedes cambiar este
nmero para adaptarlo a la cantidad de columnas que quieres incluir. Si quieres un
diseo de 3 columnas, introduce 3. Tambin puedes especificar el tamao del espacio
entre las columnas. Cuando hayas finalizado, pulsa CONVERTIR . Tus reas de texto se
transformarn en un conjunto de columnas con espacios iguales.
208

El ancho total del conjunto de reas de texto se mantiene cuando utilizas el dilogo de
columnas, por lo que si las reas de tu texto original cubran nicamente la mitad
izquierda de tu pgina, las columnas creadas tambin cubrirn esa mitad. Por lo tanto,
si quieres que las columnas abarquen todo el ancho de la pgina, mueve o
redimensiona las reas de texto de forma que cubran todo el ancho y luego utiliza el
dilogo de columnas para que estas tengan el mismo tamao y espaciado.

Una pgina de 1 columna transformada en una pgina de 3 columnas.

Tambin puedes utilizar el dilogo de columnas para reducir la cantidad de columnas

de la pgina si as lo deseas.

En el caso de que el mismo arreglo de columnas se encuentre en otras pginas (y

correspondan al mismo flujo de texto), se te preguntar si quieres aplicar los cambios
a las columnas de todas esas pginas tambin (tal como se describe en los cambios
de reas de texto). Es decir, que si usas el dilogo de columnas podrs convertir de
inmediato un documento entero de una sola columna en un documento de mltiples
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 despus del salto de columna aparecer en la siguiente rea de texto
vinculada del flujo actual, ya sea en la misma pgina o en la siguiente.

Saltos de pgina
Inserta un salto de pgina 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 PGINA" . O utiliza el shortcut (Ctrl+Intro).

Todo el texto despus del salto de pgina aparecer en la siguiente rea de texto
vinculada en la prxima pgina.

Cambiar el tamao 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 tamao. Si cambias el tamao de un rea de texto con la
HERRAMIENTA DE SELECCIN , ocurre lo mismo: el texto en s mismo no cambia de
tamao sino solo el rea de texto; el texto se reacomoda para adaptarse al nuevo
tamao. Si lo que deseas es modificar el tamao del texto del rea de texto, ve a la
HERRAMIENTA DE TEXTO , selecciona todo el texto con Ctrl+A y cambia el tamao de
fuente en la barra de informacin de HERRAMIENTA DE TEXTO .

Puedes girar el rea de texto, utilizando la HERRAMIENTA DE SELECCIN 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.

Mantn pulsada la tecla "Ctrl" mientras giras para limitar el ngulo de rotacin 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 tamao. Si modificas el tamao de un rea de texto
con la herramienta de seleccin ocurre lo mismo: el texto en s mismo no cambia de
tamao sino solo el rea; el texto se reacomoda para adaptarse al nuevo tamao. Si lo
que deseas es modificar el tamao del texto del rea de texto, ve a la herramienta de
texto, selecciona todo el texto con Ctrl+A y cambia el tamao de fuente en la barra de
informacin 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 tambin muestra la cantidad de palabras excedidas. Si est seleccionada
cualquier regin de texto, se mostrar la cuenta de la seleccin.

Texto siguiendo una curva

Para colocar un texto a lo largo de una curva de tu eleccin:
1. Crea un texto bsico, un texto en
una columna o un rea de texto
(ver ms arriba).
2. Selecciona tu objeto de texto y
una curva.
3. Escoge ARREGLO > ADAPTAR
TEXTO A LA CURVA .

Como alternativa, selecciona una curva o lnea y despus, en la herramienta de

TEXTO , haz clic sobre la lnea donde quieres que el texto comience y escribe. Esto
adaptar automticamente el texto a lo largo de la lnea. Cuando alcances el final de

www.magix.es
 Trabajar con textos 211

la lnea, el texto continuar en una nueva lnea inmediatamente por debajo de la

anterior. Si no quieres que el texto siga en otra lnea, pulsa "Shift y clic" sobre la lnea.

Para ocultar una curva, selecciona la herramienta de EDICIN DE FORMAS y configura

el color de la lnea en SIN COLOR o un ancho de NINGUNO. Tambin puedes editar la
curva de forma usual.

La aplicacin de color est descrita en Trabajar con colores (en la pgina 179).

Ajustar el margen izquierdo y derecho de un texto sobre

una curva
Si ests comenzando a escribir o colocar una columna de texto sobre una curva,
puedes cambiar la posicin de inicio y fin de los controles deslizantes rojos.
Simplemente arrstralos sobre la curva segn lo desees. Si centras el texto, se
encontrar entre estos dos mrgenes.

Cambiar lados de la lnea

Haz clic derecho sobre el texto y selecciona la opcin de men INVERTIR TEXTO EN LA
CURVA . Como alternativa, si cambias la direccin de la lnea (herramienta de EDICIN
DE TEXTO , botn INVERTIR TRAYECTORIA de la barra de informacin), entonces el texto
cambiar al otro lado de la lnea 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 posicin 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 lnea.
Pulsa "Ctrl + Inicio" o "Ctrl + Fin" para desplazarte al inicio o fin del objeto de
texto.

Seleccin 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 lnea de texto
212

Cuatro clics (4x) seleccionan un prrafo

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

regin de texto seleccionada. Si slo 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 aplicacin de un efecto o atributo a toda la historia de texto.

Por ejemplo, para cambiar el tamao de la fuente de todo el objeto de texto, pulsa ESC
y selecciona un nuevo tamao de la barra de informacin.

Cambiar maysculas o minsculas

Pulsar Ctrl+W cambiar la mayscula o minscula del texto detrs del cursor y
mover el cursor. Entonces, si te das cuenta de que has tipeado una seccin de texto
con la tecla Maysculas activada, coloca el cursor al inicio y pulsa Ctrl+W.

Puedes cambiar la mayscula o minscula de la regin de texto seleccionada de la

misma forma. El cursor no se mover.

Comillas inteligentes
Si escribes comillas ' o ", Xtreme las convertir automticamente en comillas de
apertura o cierre estticamente adecuadas. Esto significa que 'esto' cambiar a esto
y "comillas" en comillas. Esta caracterstica es lo suficientemente inteligente para
comprender el uso de comillas simples dentro de las palabras, para que, por ejemplo,
si escribes en ingls la palabra 'don't' no se convierta en dont.

Introducir caracteres especiales

Existen shortcuts tiles para insertar caracteres especiales como o . Lee la
seccin Caracteres especiales (herramienta de texto) (en la pgina 525) en el
captulo "Mens y shortcuts de teclado".

Todos estos shortcuts (con la excepcin del espacio rgido) son compatibles con
Microsoft Word.

www.magix.es
 Trabajar con textos 213

Insertar texto de ejemplo ('Lorem Ipsum')

Cuando se compone un diseo de pgina es una prctica comn que se utilice un
texto de ejemplo que contiene palabras en pseudo-latn (que no significan nada) y
que tiene la apariencia general de un texto tpico en ingls (o en otros idiomas
latinos). El texto comienza as: "Lorem ipsum dolor sit amet..."

Nota histrica. este mismo texto ha sido utilizado como texto de ejemplo por ms
de 500 aos en la industria de la imprenta, e incluso partes de las frases en latn se
han escrito hace ms de 2000 aos.

Para insertar un prrafo 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 ms largo presiona esta combinacin de teclas un par de veces.

Corrector ortogrfico
La HERRAMIENTA DE TEXTO incluye un corrector de ortografa: haz clic en el
icono de CORRECTOR DE ORTOGRAFA/AUTOCORRECCIN en la barra de
informacin de la HERRAMIENTA DE TEXTO y vers un men desplegable.

Para usar el corrector de ortografa selecciona

"REVISAR ORTOGRAFA MIENTRAS SE ESCRIBE ".
Ahora todas las palabras de tu documento que
no se reconocen y aquellas que vas escribiendo
aparecen subrayadas con una lnea de guiones.
Para corregir un error ortogrfico, haz clic
derecho y el men contextual te sugerir
opciones. Selecciona simplemente una de las
sugerencias para sustituir la palabra subrayada.
ff

Seleccin de idioma
Haciendo clic en el icono del corrector de ortografa aparece un men con todos los
idiomas para los cuales hay diccionarios instalados. Por defecto, el idioma
seleccionado corresponder a la configuracin local. Puedes elegir diferentes idiomas
para diferentes objetos de texto de modo que en tu documento puedes utilizar texto
en mltiples idiomas si fuera necesario.

Para cambiar el idioma asociado con el objeto de texto, selecciona el objeto de texto y
a continuacin selecciona el idioma requerido en el men del corrector de ortografa
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 asegrate de que no has seleccionado nada (haz clic sobre un rea vaca de
tu diseo utilizando la herramienta de seleccin). A continuacin elige en la
herramienta de texto el idioma que quieras usando el men del corrector de
ortografa. 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 diseo. Por lo tanto debers repetir el
procedimiento anterior para fijar el atributo de idioma de texto actual la prxima vez
que cargues el documento, si quieres seguir introduciendo nuevos objetos de textos
usando el mismo idioma.

Si hay un objeto de texto cuya ortografa no quieres revisar en absoluto, selecciona el

objeto y elige la opcin "Sin idioma (ignorar") del men del corrector de ortografa.

Diccionario de usuario
Las palabras que utilices regularmente y que no se encuentren en el diccionario
suministrado por MAGIX Web Designer 11 Premium pueden aadirse a tu propio
diccionario personal. Haz clic con el botn derecho del ratn y selecciona "Aadir 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.

Autocorreccin
Haz clic en el smbolo de CORRECTOR ORTOGRFICO/AUTOCORRECCIN de la
barra de informacin de la HERRAMIENTA DE TEXTO para utilizar la funcin de
autocorreccin. Escoge OPCIONES DE AUTOCORRECCIN... del men
desplegable.

Se abrir un cuadro de dilogo que te permitir aadir y reemplazar palabras, as

como smbolos del teclado, por smbolos del catlogo de fuentes Awesome (en la
pgina 202). Esta funcin siempre est activada por defecto pero puedes desactivarla
dentro del cuadro de dilogo.

Est disponible una seleccin de elementos tiles y tambin puedes aadir los tuyos.
Haz clic en AADIR para crear un nuevo campo y luego escribe una palabra o carcter
en la columna REEMPLAZAR , a continuacin haz clic en la columna CON para introducir
una sustitucin, o haz clic en ELEGIR SMBOLO para elegir un reemplazo del catlogo de
FUENTES AWESOME . El smbolo que escojas aparecer en la columna CON . Haz clic en
ACEPTAR para cerrar el cuadro de dilogo.

Ahora cuando escribas una palabra o carcter de la lista de opciones, se reemplazar

por tu palabra, carcter o smbolo alternativo.
www.magix.es
 Trabajar con textos 215

Entonces, por ejemplo, si deseas que al escribir Rwd se reemplace automticamente

por "diseo web adaptativo", simplemente pulsa el botn AADIR e introduce "rwd"
en el campo REEMPLAZAR y "diseo web adaptativo" en el campo CON . Todo el texto
del cuadro de dilogo debe escribirse en minsculas, pero el reemplazo intenta ser
inteligente respecto al uso de maysculas o minsculas.

Entonces, si escribes...

"RWD" se reemplazar por "DISEO WEB ADAPTATIVO"

"rwd" se reemplazar por "diseo web adaptativo"
"Rwd" se reemplazar por "Diseo Web Adaptativo"

Buscar y reemplazar
La funcin Buscar y reemplazar realiza una bsqueda 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 vers el siguiente dilogo:

Introduce la palabra de bsqueda y se resaltar en el texto. Puedes escoger buscar

solamente en la historia o pgina actual o en todo el documento (el texto fluye por
todas las pginas).

La opcin TODA LA PALABRA buscar solamente todas las palabras que coincidan con
el texto de bsqueda. Por ejemplo, si buscas la palabra, "met", no se resaltar "metro".
La opcin COINCIDIR MAYSCULAS Y MINSCULAS solamente buscar la letra exacta.
Si buscas, por ejemplo, "aBc" en esta opcin, no encontrars "abc".
216

Cmo sincronizar el texto empleando Grupos

suaves
En algunos diseos es posible que necesites que mltiples 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.

Aadiendo a un grupo suave objetos de texto relacionados de esta forma, puedes

asegurarte de que siempre mostrarn el mismo texto. Para aadir los objetos de texto
relacionados a un grupo suave, primero asegrate de que todos ya poseen
exactamente el mismo texto (de lo contrario no se sincronizarn todos). A
continuacin selecciona todos usando la herramienta de seleccin. Luego escoge
"ARREGLAR" > "APLICAR GRUPO SUAVE" ("Ctrl + Alt + G").

Ahora, cuando edites el texto de un objeto, los dems se actualizarn

automticamente, an cuando se encuentren en otras capas diferentes del
documento. Ten en cuenta que esta sincronizacin 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 seccin de grupos suaves del captulo Manejo de objetos (en
la pgina 134) para obtener ms informacin sobre grupos suaves.

Tabulaciones, mrgenes y sangras

Reglas
Para ajustar las tabulaciones, mrgenes y sangras, 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 caractersticas de texto avanzadas slo aparecern en la regla cuando ests

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 mrgenes o tabulaciones en la regla de la herramienta de texto, vers

una gua vertical temporal que te facilitar alinear las tabulaciones o mrgenes a otros
objetos de la pgina.

www.magix.es
 Trabajar con textos 217

Mrgenes y sangras
Cualquier cambio que realices se aplicar al prrafo de texto actual, es decir, el
prrafo en el que se encuentra el cursor de texto. Por el contrario, si has seleccionado
una regin de texto, el cambio se aplicar a los prrafos de la regin 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 ms de una historia de texto,
selecciona los objetos de texto en la herramienta de SELECCIN , despus 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 lnea. Arrastra para cambiar el margen izquierdo de la

primera lnea del prrafo (til para listas, como se muestra abajo).
Margen derecho. Arrastra esto para cambiar el margen derecho del texto.

Demostracin del margen izquierdo y el margen de la primera lnea

Demostracin de un margen derecho

218

Texto siguiendo una curva

Si has adaptado una sola lnea de texto a la curva utilizando la opcin ADAPTAR TEXTO
A LA CURVA , la lnea de curva ser el margen.

Si has hecho clic sobre la lnea o has adaptado una columna de texto a una curva o
lnea, entonces vers indicadores de margen izquierdo y derecho (pequeos
cuadrados rojos) que puedes arrastrar a lo largo de la lnea para ajustar los mrgenes
utilizados para la justificacin.

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 prximo punto de tabulacin.
Slo necesitas definir una nueva posicin de tabulacin, si deseas utilizar otro
espaciado.

Estas tabulaciones por defecto se muestran como "L" sobre la regla:

Tabulaciones estndar indicadas con "L"

Tabulaciones personalizadas
Para crear una posicin de tabulacin personalizada, haz clic sobre la regla en el lugar
don de quieres colocar la tabulacin. Se sustituirn las tabulaciones por defecto hasta
esa posicin de la regla.

Por ejemplo:

El tringulo indica una tabulacin personalizada

Para colocar ms de una tabulacin, haz clic varias veces sobre la regla.

Para desplazar una tabulacin personalizada arrstrala a lo largo de la regla.

Para eliminar una tabulacin arrstrala fuera de la regla (las tabulaciones por defecto
retornarn).

www.magix.es
 Trabajar con textos 219

Tipos de tabulaciones personalizadas

Puedes configurar diferentes tipos de tabulaciones personalizadas. Por defecto, las
tabulaciones personalizadas estn alineadas a la izquierda. Esto significa que el texto
se alinear con la tabulacin a la izquierda del texto. Para cambiar el tipo de
tabulacin, haz clic sobre el icono de tabulacin sobre la regla.

Estn disponibles los siguientes tipos de tabulacin personalizada. Puedes escoger

diferentes tipos de tabulaciones, puesto que no ests limitado a utilizar un solo tipo
de tabulacin en una historia.
Alineacin izquierda: el texto se alinear con la tabulacin a la izquierda.

Alineacin derecha: el texto se alinear con la tabulacin a la derecha.

Alineacin central: el texto se centrar a partir de la tabulacin.

Alineacin al decimal: los puntos decimales en el texto se alinearn con la

tabulacin. Esto es til para crear listas, sin importar la longitud del nmero, los
puntos decimales se alinearn con al tabulacin.
220

Cmo crear sangras francesas

La sangra francesa es cuando la primera lnea del prrafo tiene un margen negativo, o
el margen se encuentra ms a la izquierda que el margen izquierdo normal. Las listas
con nmero o vietas son ejemplos de sangra francesa.

Para crear una sangra francesa:

1. Arrastra el margen izquierdo hacia adentro.
2. Haz clic sobre la regla lejos del margen izquierdo (crea una nueva tabulacin) y
arrastra esta tabulacin hasta el margen izquierdo.
3. Ahora todas las lneas comenzarn con sangra; puedes insertar cualquier
carcter o nmero y pulsar Tab para moverlo hasta el margen izquierdo. Y (al
igual que con el prrafo) todas las lneas siguientes de texto tendrn sangra
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 presentacin de pginas que contienen pasajes largos de texto
combinados con fotos y grficos. Una vez que has insertado los objetos, puedes
ajustar las posiciones de grficos y fotos, y el texto se adaptar automticamente 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, adems, 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 opcin CONTORNEAR
TEXTO . El texto de la misma capa que se encuentre debajo del objeto, lo rodear con
un margen por defecto de 5 pxeles entre el texto y el objeto. Ten en cuenta que
contornear el texto slo 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 dilogo correspondiente.

Haz clic en la casilla CONTORNEAR TEXTO ALREDEDOR DE ESTE GRFICO.

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 smbolo 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 dilogo correspondiente. Haz clic en la
casilla CONTORNEAR TEXTO ALREDEDOR DE ESTE GRFICO para desactivar la opcin y
haz clic en ACEPTAR .

Ten en cuenta que las lneas 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 pgina 426).
222

Grficos anclados
Puedes colocar cualquier grfico o grupo para anclarlo a una posicin en un texto, de
forma que al mover el texto, el objeto de grfico se desplace para mantener la misma
posicin relativa. Sin embargo, el anclaje se debera usar para objetos que estn fuera
de los mrgenes del texto (p. ej. una foto que est a la derecha d izquierda de una
columna de texto), o tras el texto. Usa la incrustacin para objetos que estn dentro
de los lmites del texto (ver abajo).
1. La forma ms rpida de anclar un grfico o un grupo es hacer clic y escoger la
opcin ANCLAR AL TEXTO. Sin embargo, si quieres tambin editar las propiedades
de anclaje, puedes hacer clic en el objeto y seleccionar CONTORNEO Y ANCLAJE DE
TEXTO para ver el dilogo del mismo nombre.
2. Haz clic en la casilla MOVER GRFICO CON EL TEXTO.
3. Por defecto, la opcin MOVER SOLO VERTICALMENTE tambin est seleccionada,
de forma que el grfico anclado se mover solamente en sentido vertical a
medida que se edite el texto. Esta es normalmente la opcin ms til: si quieres
que el objeto siga la posicin de anclaje tambin horizontalmente, fijar el objeto
es por lo general una opcin mejor.
4. Un smbolo de ancla aparecer en la parte superior izquierda del objeto para
indicarte que est anclado.
5. Con la HERRAMIENTA DE SELECCIN o la HERRAMIENTA DE TEXTO, haz clic y
arrastra el smbolo de ancla hasta que aparezca una flecha roja.
6. Mueve el extremo de la flecha y sultala en la ubicacin en la que quieres anclar
el objeto. Un signo de intercalacin (una "T" invertida) te indicar la posicin de
anclaje.
7. A medida que edites el texto alrededor de este signo de intercalacin, el punto
de anclaje y el objeto de anclaje se movern junto con el texto.

Un objeto anclado muestra un smbolo de anclaje y una flecha que seala al punto de anclaje,
marcado con un signo de intercalacin. Estos desaparecern 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 pgina en la que no hay texto,

la flecha se convertir en un ancla roja que indica que las propiedades de anclaje del
objeto se perdern si lo sueltas all. Esto tambin 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
pgina como resultado de mover el punto de anclaje. El objeto anclado solo se mover
hasta el borde de la pgina.

Este es un ejemplo de una columna de texto con diversos elementos grficos a la izquierda. Cada
uno de estos est anclado al inicio de una lnea de texto inmediatamente a la derecha.

Es posible anclar cualquier objeto o grupo de grficos, incluyendo grupos con texto,
como el ejemplo del panel lateral, que se muestra arriba.

Tambin es posible anclar objetos para que aparezcan arriba o debajo del texto. El
ejemplo del grfico de flor azul plido, que se muestra arriba, est anclado de esta
forma y fluir junto con el texto.

NOTA : si un objeto anclado tambin 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 configuracin 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 pgina.

Mover objetos anclados

Cuando agregas o eliminas texto, el objeto se mueve a medida que el texto fluye, pero
siempre mantendr su posicin relativa respecto al punto de anclaje. Puedes mover
un grfico anclado arrastrndolo de la forma usual. Esto cambia su posicin relativa
respecto del punto de anclaje, pero no mueve el punto de anclaje, que permanece
visible al final de la flecha del smbolo de anclaje si haces clic y mueves el grfico.

Si quieres mover el punto de anclaje a otra ubicacin dentro del texto, haz clic y
arrastra el smbolo de anclaje para crear una nueva flecha y arrastrarla a su nueva
ubicacin.

Si cortas y pegas el texto que contiene el signo de intercalacin, el objeto anclado

tambin se cortar y pegar.

Visualizacin 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 SELECCIN o si haces clic en el rea que rodea al
texto en la HERRAMIENTA DE TEXTO.

Cuando haces clic en una regin de texto con la HERRAMIENTA DE TEXTO , se

mostrarn los puntos de anclaje con el smbolo de la "T" invertida y una flecha desde
el punto de anclaje hasta el smbolo de anclaje en la parte superior izquierda de cada
objeto anclado. Entonces, la forma ms 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 intercalacin, la flecha y

el smbolo de anclaje desaparecen temporalmente hasta que dejas de escribir. Si te
encuentras cerca del punto de anclaje, Web Designer muestra el signo de
intercalacin, junto con la flecha que seala al smbolo de anclaje para indicarte que te
encuentras cerca.

Grupos suaves (soft groups, en ingls)

Puedes pegar Grupos suaves (en la pgina 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 opcin. Ahora, cuando hagas clic en el objeto con
la HERRAMIENTA DE SELECCIN o en el texto en la HERRAMIENTA DE TEXTO, ya no vers
el smbolo de anclaje.

Grficos incrustados
Puedes insertar un objeto en el texto para que se comporte igual que un carcter.
Simplemente copia el objeto al portapapeles ("Ctrl+C"), ve a la herramienta de texto,
coloca el cursor de texto en la posicin en la que quieres insertar el objeto y pgalo
("Ctrl+V").

Puedes seleccionar, copiar, pegar y eliminar el objeto incrustado junto con el texto
que lo rodea, al igual que si fuera un carcter de texto. Sin embargo, tambin puedes
seleccionarlo y transformarlo con la herramienta de seleccin.

Te recomendamos utilizar esta tcnica de incrustacin en vez del anclaje, porque es

ms eficiente en trminos del proceso requerido para dar formato al texto.

Lista con vietas y numeradas

Utiliza los botones de las listas con vietas y numeradas de la barra de informacin de
la HERRAMIENTA DE TEXTO para ingresar rpidamente listas con vietas 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 nmeros en tu
lista. Tambin puedes usar cualquier grfico como vieta o nmero de tu lista.
Consulta el captulo Herramienta de texto (en la pgina 196) para ms informacin.

Lista con vietas

Puedes convertir cualquier texto en una lista con vietas si seleccionas el texto
y luego escoges el botn de lista con vietas de la barra de informacin.

Cada prrafo de texto se convierte en una vieta independiente. Si pulsas "Intro" al

finalizar una lnea al final de la vieta, la prxima lnea tambin comenzar con una
vieta.
226

Para finalizar la lista con vietas, pulsa Intro al final de la ltima vieta y luego vuelve
a pulsar Intro en la nueva lnea con vieta. Esto elimina la ltima lnea con vieta y te
permite comenzar a introducir texto normal nuevamente.

Puedes incluir listas con vietas secundarias si pulsas el botn de sangra de la

barra de informacin. Esta sangra crea una lnea con vieta y cambia el estilo
de la vieta para diferenciarla de la principal.

Ejemplo de una lista de vietas secundaria

Para mover un punto de vieta desde la lista secundaria hasta la principal,

simplemente coloca el texto del cursor en la lnea y pulsa el botn para quitar
sangra.
Por lo tanto, realizar arreglos en las listas de vietas es fcil con los botones para
agregar y quitar sangras.

Lista numerada
Puedes crear y editar listas numeradas de la misma forma que se ha descrito
para las listas con vietas pero con el botn de listas numeradas.

Puedes escoger el esquema numerado que se utiliza para cada lista con el dilogo 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 dilogo puedes escoger entre una variedad de esquemas de numeracin y

tambin introducir el valor que debe utilizarse en la primera entrada de la lista. Luego,
el nmero se aumentar automticamente para las siguientes entradas de la lista.

Lista con vietas y nmeros con grficos

Puedes usar cualquier grfico para las vietas o nmeros de una lista. Puedes disear
listas con tus propias vietas o nmeros con las herramientas de dibujo o texto, o bien
con los diseos de vietas de la galera de diseos (en ELEMENTOS DE PGINA>
ELEMENTOS GRFICOS > VIETAS ). Por ejemplo, puedes crear un crculo 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 vieta del men. El diseo
aparecer como una vieta 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 grfico y luego escoges Pegar como nmero para sustituir
los nmeros o elementos de texto de tu lista. El objeto de texto en el grupo se utiliza
para mostrar el nmero.

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, tamao,

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 ms pequeo, como el de esta seccin, y todos los encabezados de
seccin equivalentes, un estilo llamado "Encabezado 2"

Al actualizar la definicin de "Encabezado 2", por ejemplo, a una fuente diferente,

todos los encabezados similares se actualizarn instantneamente.

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 seran, entonces, como la funcin "Colores con nombre" que
tambin 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 informacin de estilos de texto

En la BARRA DE INFORMACIN DE LA HERRAMIENTA DE TEXTO hay un men desplegable
de estilos que te permite crear estilos, aplicarlos a cualquier texto y actualizar la
definicin del estilo.

Por defecto, hay un pequeo grupo de estilos predefinidos, incluyendo el "Texto normal" y tres
estilos de encabezado, del Encabezado 1 al 3.

Estilo de prrafo y estilo de carcter

Los estilos de texto estn disponibles en dos variedades. Estilos de prrafo y estilos
de carcter.

Un estilo de prrafo se seala con el smbolo en el men de estilo. Un smbolo A

seala un estilo de carcter.

Los estilos de prrafo se aplican a todo el apartado y tambin se utilizan para

encabezados. No es posible aplicar un estilo de prrafo a una seccin ms pequea
que un prrafo. Es decir, que no puedes aplicar un estilo de prrafo a una sola palabra
dentro de un apartado. Si lo intentas, entonces todo el prrafo cambiar a este estilo.

Simplemente coloca el cursor de texto en cualquier lugar de la lnea y selecciona un

estilo de prrafo del men de estilos: todo el prrafo cambiar a ese estilo.

Por otra parte, los estilos de carcter pueden aplicarse a cualquier seccin del texto,
incluso a un solo carcter. Por ejemplo, si quieres destacar algunas palabras de tu
texto con un color diferente, el estilo de carcter te vendra 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 carcter haciendo clic en CREAR ESTILO en el men desplegable

Estilo y activa la opcin ESTILO DE CARCTER del cuadro de dilogo para crear un
nuevo estilo de texto. Para ms informacin consulta Creacin de nuevos estilos.

En los estilos de prrafo pueden definirse todos los atributos de texto, salvo las
propiedades de las listas numeradas o con vietas. Los estilos de carcter solo
pueden definir atributos de texto que pueden aplicarse a un solo carcter, como
color de texto, tamao y grosor de fuente, etc.

Actualizacin de los estilos de texto

Para actualizar una definicin 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 tamao de fuente.
3. Selecciona "Actualizar estilo" del men desplegable de estilos en la barra de
informacin 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
informacin de la herramienta de texto.

Cuando tienes pginas 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 mvil sea ms 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
informacin Texto. Ver Diseo de web adaptativo (en la pgina 297) para ms
informacin sobre variantes.

Nota: cuando actualizas un estilo a partir de una seleccin de texto, el estilo

actualizado vuelve a aplicarse a la seleccin. 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 prrafo cambiar a este nuevo color (porque es un
estilo de prrafo y solo puede aplicarse a todo el apartado).

Redefinicin de estilos de texto

Muchas veces quieres que un estilo de texto existente tenga un aspecto similar a un
texto al que todava no has aplicado un estilo de texto. Tal vez has importado texto de
algn otro documento. No podrs aplicar el estilo existente a ese texto porque
perdera su aspecto. En su lugar, utiliza la opcin 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 informacin de texto.
3. Escoge el estilo que deseas actualizar del cuadro de dilogo 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 seleccin de APLICAR A TODO EL TEXTO SIMILAR EN ESTE
DOCUMENTO si quieres que el estilo se aplique nicamente al prrafo 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 opcin APLICAR A TODO EL TEXTO SIMILAR EN ESTE DOCUMENTO es til para aplicar
estilos de texto a documentos existentes que todava no utilicen estilos de texto,
como PDF importados. Para poder aplicar un estilo a todo el texto similar del
documento, el texto de ms del 50% de un prrafo debe tener la misma fuente y
tamao de fuente, y tambin debe tener la misma configuracin de alineacin y
sangra (con una pequea 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 idntico, pero con otro color; debers
crear un nuevo estilo a partir del "Encabezado 2" en el dilogo CREAR ESTILO. Esto
significa que si actualizas el "Encabezado 2" para que, por ejemplo, tenga una nueva
fuente o tamao, el nuevo estilo tambin tendr la nueva fuente o tamao.

Los nuevos estilos de carcter se basan normalmente en el "Estilo de prrafo

subyacente", pero solo con los cambios que deseas. Por lo tanto, esto significa que si
aplicas un estilo de carcter que solo establece el color de texto a una palabra, y luego
alteras el estilo del prrafo, esta palabra cambiar para adaptarse a excepcin de su
color.

Creacin 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 INFORMACIN DE LA HERRAMIENTA DE TEXTO.

Si deseas crear un nuevo estilo de prrafo, te recomendamos seleccionar y aplicar los

cambios a todo un apartado, antes de seleccionar la opcin del men CREAR ESTILO.

www.magix.es
 Trabajar con textos 231

Este dilogo muestra un nuevo estilo, (NuevoEstilo2) que se crea como ESTILO DE
PRRAFO , a partir del estilo ENCABEZADO 2 ya existente. La opcin PRRAFO SIGUIENTE
determina el estilo que se utilizar cuando comiences a escribir el prximo apartado.

La seccin inferior del dilogo muestra la definicin 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 ningn otro estilo, es decir, que no herede
ningn atributo de otro estilo, selecciona (Sin estilo) de la opcin "Basado en:" tal
como se muestra a continuacin.

El dilogo muestra que estoy creando un NuevoEstilo2 que es un estilo de prrafo y

que no me estoy basando en ningn otro estilo. Esta seccin inferior enumera todos
los atributos que crean este estilo; en el ejemplo puedes ver que utilic la fuente
Palatino, de 12 pxeles y que he aplicado sangra. Los otros atributos listados aqu
tambin se han tomado del texto seleccionado, es decir, que este estilo consiste en
una definicin completa con una lista de todo el texto posible. En este caso, al
introducir texto en este estilo, el "Prrafo siguiente" (es decir, cuando pulses Intro)
tendr el mismo estilo.
232

Eliminacin de estilos: los estilos que no se utilizan en ningn lugar de un

documento se eliminan automticamente 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 jams.

Eliminacin de estilos
La lista de ESTILOS en el men ESTILOS incluye la entrada SIN ESTILO. Si seleccionas
esta opcin, el estilo (de prrafo o de carcter) se quitar de la seleccin y el texto
regresar al formato por defecto.

Propiedades de estilo
Si quieres cambiar la definicin de un estilo, como el estilo en el que se basa, o
simplemente mirar su definicin, puedes usar la opcin 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 dilogo PROPIEDADES DE ESTILO, que tiene el mismo aspecto que el

dilogo CREAR ESTILO.

La descripcin del estilo en la parte inferior del dilogo 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
descripcin completa. No olvides restablecerlo el estilo correcto en BASADO EN o
hacer clic para cancelar el dilogo si no quieres cambiar el estilo.

Aplicar estilos de texto

Cambiar el tamao de fuente
Existen diversas formas de cambiar el tamao de la fuente:

Introduce un nuevo valor en el campo de texto de tamao de la barra de

informacin y pulsa .
O selecciona una opcin de la lista desplegable TAMAO DE FUENTE en la barra
de informacin.
O utiliza la barra deslizante emergente de tamao de fuente (en la pgina 200).
O aumenta/disminuye el tamao de fuente con Ctrl + + > y Ctrl + + <. Esta
opcin se aplica solamente si todas las partes de texto seleccionadas tienen el
mismo tamao de fuente.
O utiliza la herramienta de SELECCIN para cambiar el tamao de todo el objeto
de texto.

www.magix.es
 Trabajar con textos 233

Negrita y cursiva
Haz clic sobre el botn NEGRITA o CURSIVA de la barra de informacin
("Ctrl + B" o "Ctrl + I")

Esta opcin aplica la variante negrita o cursiva de la fuente actual.

Subrayado de texto
Haz clic en el botn de subrayar en la barra de informacin para subrayar el
texto seleccionado.

El color de subrayado y el tamao deriva automticamente del color y tamao 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 LNEA DE COLORES .
Selecciona ESTABLECER FONDO DE TEXTO del men

Para ms detalles, consulta Aplicacin de un color de fondo para el texto (en la pgina
183).

Justificacin o alineacin de texto

La justificacin siempre se aplica a toda la lnea. Cualquier regin seleccionada se
ignorar.

Justificacin IZQUIERDA: el borde izquierdo del texto se alinea a la posicin inicial

de clic.
Justificacin CENTRAL : centra el texto alrededor de la posicin de clic.
Justificacin DERECHA: el borde derecho del texto se alinea a la posicin inicial de
clic.
Justificacin COMPLETA: esto slo se aplica cuando el texto sigue a una curva o
se encuentra en una columna y cuando haya al menos una lnea completa de
texto para justificar.
234

Al usar texto simple la posicin inicial de clic de la pgina se toma como origen de
la justificacin de texto.

Superndice y subndice
Haz clic en el botn apropiado sobre la BARRA DE INFORMACIN .
superndice
Texto normal subndice

Agregar y quitar sangras

Agregar sangra a un prrafo de texto.

Quitar sangra a un prrafo de texto.

Espaciado de lnea
El espaciado de lnea te permite cambiar el espacio entre dos
lneas (afecta el espaciado vertical).

El espaciado de lnea se mide en porcentajes (120%) o puntos (12pt). Puedes

introducir el valor de espacio de lnea en el campo de texto o hacer clic sobre las
flechas para desplazar los valores.

La configuracin de porcentajes tiene como beneficio de que cambia de tamao si

cambias el tamao de la fuente. Si se aplica un porcentaje a una lnea de texto con
varios tamaos de fuente, se utilizar el tamao ms grande. Por ejemplo, si una lnea
contiene texto 90% y 100%, el espaciado de lnea se calcular a partir del 100%.

Espaciado de prrafos
Los dos ltimos campos de la barra de informacin de la herramienta
de texto te permiten configurar el espacio antes y despus de los
prrafos.

Esto es particularmente til cuando quieres configurar espacios de media lnea entre
los prrafos.

Al igual que en Microsoft Word, cuando utilizas el espaciado arriba y abajo de los
prrafos, el espaciado es el valor mayor entre ambos (no se acumula). El espaciado
arriba del prrafo mover el primer prrafo 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 botn de enlace en la barra de
herramientas de WEB .

Esto abre el dilogo de PROPIEDADES WEB con la pestaa ENLACE seleccionada. En esta
pestaa puedes elegir si quieres vincular un URL, otra pgina 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
pestaa PGINA WEB del dilogo de PROPIEDADES WEB (men HERRAMIENTAS-
>PROPIEDADES WEB ). Asimismo puedes fijar el color que aparece cuando el usuario
mueve el cursor del ratn 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 pgina web
usando las listas desplegables, o bien puedes hacer clic en el botn EDITAR para abrir
el EDITOR DE COLOR mediante el cual puedes elegir el color que quieras.

Asimismo, si fuera necesario tambin puedes sobrescribir los colores globales de los
enlaces de texto para enlaces individuales. En la pestaa de enlaces del dilogo de las
propiedades web, deselecciona la opcin "Utilizar los colores de enlace de pgina web
usuales". A continuacin 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 pginas web

Al exportar un documento como pgina web, todos los grupos sern exportados
como imgenes. De este modo, ningn texto dentro de un grupo podr ser
seleccionado y copiado como texto por un visitante de tu pgina web.

Esto suele ser apropiado para botones grficos, ttulos, logotipos, etc., ya que el texto
forma parte del grfico. Sin embargo puede que tengas ms piezas de texto
importantes dentro de grupos que desees mantener como texto en tu pgina web
exportada. Para hacer esto, solo tienes que aplicar el nombre especial "Texto HTML"
a tu objeto de texto. La forma ms fcil de hacer esto se explica a continuacin:
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 dilogo 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 continuacin haz clic en AADIR para aadir el nombre.

Ahora, cuando exportes tu pgina web, tu texto permanecer como texto y el resto
del grupo se convertir en imagen. Todos los paneles de texto suministrados por la
GALERA DE DISEOS 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 rotacin, por lo que no puedes
utilizar este nombre para forzar que el texto con rotacin sea exportado como texto.
En este caso, el nombre se ignora.

Copiar estilos de texto

Es fcil copiar el estilo de cualquier texto a otra regin de texto utilizando la opcin
PEGAR ATRIBUTOS :

Selecciona la regin fuente cuyo estilo quieres copiar. Esto puede ser tambin
una sola palabra (slo haz doble clic).
Selecciona Edicin > Copia (o Ctrl+C).
Selecciona la regin de texto a la que quieres aplicar el estilo.
Selecciona Edicin > Pegar atributos (Ctrl + Majs + A).

Si el cursor de texto se encuentra posicionado en algn texto cuando PEGAS

ATRIBUTOS , los atributos del prrafo se pegarn a este otro (p.ej. tabulaciones,
mrgenes). Si has seleccionado una regin 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 ms rpido que realizar
seleccionar todo (Ctlr+A).

Con las reas de texto este mtodo slo funciona si se han seleccionado todas las
reas de texto. Puedes hacer esto en la herramienta de SELECCIN con un clic y +clic
sobre las diferentes reas de texto para seleccionarlas. Pero este mtodo slo es
posible si las reas de texto se encuentran en una sola pgina. Si tu historia de texto
fluye por diferentes pginas y quieres cambiar todo el texto, entonces ser necesario
Seleccionar todo (Ctrl+A) y despus 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, mrgenes y espaciado de lneas se conservarn. 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
opcin 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 tambin funciona al revs. Puedes copiar texto de Web Designer y pegarlo en
otras aplicaciones compatibles con Rich Text y el estilo (fuente, tamao, colores,
mrgenes, 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 opcin 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 grfico).

Incrustacin 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 diseo a
otra persona o transfieres el archivo a otro equipo, el texto seguir teniendo la misma
apariencia, incluso si las fuentes correctas no estn instaladas.

Incrustacin de fuentes en un sitio web

La mayora de los documentos de sitios web utilizan nicamente fuentes compatibles
con la web, que son fuentes que estn instaladas en la mayora de los equipos y otros
dispositivos, de forma que pueden utilizarse sin inconvenientes en cualquier pgina
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
automticamente 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 pgina a cargar de manera ms rpida, tan solo se incluyen

caracteres Western en la fuente incrustada, a menos que tu documento use otro tipo
de caracteres tambin.

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 incrustarn en tu pgina web. Esta caracterstica te recordar que tu
238

sitio incluye fuentes incrustadas. Tambin puedes ver qu fuentes se estn utilizando
en tu documento junto con sus permisos en "ARCHIVO" > "INFORMACIN DEL
DOCUMENTO..." Consulta Permisos de fuentes (en la pgina 238) para ms
informacin.

Algunas fuentes no permiten la incrustacin en un documento ni en una pgina 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, debers cambiar a
una fuente que sea compatible con la web, una fuente de Google o cualquier otra que
s permita la incrustacin.

Permisos de fuentes
Al integrar fuentes existen cuatro niveles de permisos de fuentes, es decir, cuatro
niveles de uso segn la licencia de la fuente. Estos cuatro niveles son los siguientes:

1. Instalable: el nivel ms 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. Impresin y vista previa: permite incorporar la fuente en el documento, pero
nicamente para su impresin y visualizacin.
4. Restringido: la fuente no puede incorporarse en el documento.

Adems de las advertencias que Web Designer te muestra con la lista de las fuentes
que se incorporarn en tu sitio web, podrs tambin ver los niveles de permisos si
miras la INFORMACIN DEL DOCUMENTO . Ve a "ARCHIVO" > "INFORMACIN DE
DOCUMENTO..." .

Cuadro de dilogo de informacin del documento que muestra las fuentes junto con sus permisos
de integracin.

www.magix.es
 La herramienta de relleno 239

La herramienta de relleno

Crear un relleno de color con gradacin

El proceso de creacin 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 tamao y posicin 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 direccin del relleno. Los
controles deslizantes se pueden seleccionar y
arrastrar para ajustar la posicin y el ngulo
del relleno.

Relleno de colores
Selecciona uno de los controles deslizantes de relleno y haz clic sobre un color de la
LNEA 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 ELPTICO : similar al relleno circular, salvo que el cambio

se realiza en forma elptica.

RELLENO CNICO : 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 elptico, 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 ms

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 rectngulos, por supuesto). Puedes
utilizar cualquier foto o cualquier mapa de bits de las galeras 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 automticamente

En la herramienta de relleno, se aplica automticamente la opcin "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 SELECCIN .

www.magix.es
 La herramienta de relleno 241

Barra de informacin de herramienta de relleno

Tipo de relleno
Segmentacin de relleno
Efecto de relleno
Nombre de mapa de bits
Perfil
Control deslizante/resolucin 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.

SEGMENTACIN DE RELLENO se utiliza al aplicar mapas de bits y rellenos fractales. Las

opciones se describen ms adelante en los rellenos de mapas de bits. La
segmentacin de relleno cambia la repeticin del efecto de relleno. Las opciones son:

Simple: el relleno se utiliza una sola vez, independientemente del tamao del
objeto.
Repetir/Mosaico repetido: el efecto se repite hasta llenar todo el objeto.
Invertir mosaico repetido: slo 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 segmentacin de

relleno no estn disponibles para
los rellenos cnicos. Todos los
otros tipos de relleno pueden
repetirse. Esto puede producir
efectos muy tiles.

Un relleno elptico con repeticin dentro de una

forma de elipse

El EFECTO DE RELLENO se utiliza para todos los tipos de rellenos, con excepcin de los
rellenos de 3 y 4 colores. Controla el desvanecimiento del relleno desde el color de
inicio al color de fin:
242

TRANSICIN (FADE) :crea una transicin entre dos colores de forma lineal.
ARCO IRIS :
realiza una transicin siguiendo el borde ms corto del modelo de
color HSV. Por ejemplo, una transicin de amarillo a cian ser amarillo-verde-
cian.

Esta opcin no tiene efecto alguno cuando los dos colores son negro, blanco y gris.

ALT ARCO IRIS : similar a la opcin arco iris salvo que la transicin se realiza
siguiendo el borde ms extenso de la rueda de color. Por ejemplo, la transicin
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 GALERA 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 graduacin de la "transicin 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 informacin de la HERRAMIENTA DE RELLENO haz clic en PERFIL . Esto
abrir el cuadro de dilogo de PERFIL .
3. Selecciona un perfil predefinido de la lista desplegable o arrastra los
deslizadores para crear un perfil personalizado. La opcin superior en la lista
desplegable (la lnea directa) crea una transicin 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 dilogos de perfil. El del centro, que viene por defecto, es una transicin 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.

RESOLUCIN (slo rellenos de mapas de bits y fractales): muestra la resolucin del

mapa de bits (siempre que no hayas seleccionado un control deslizante de relleno).
Puedes introducir una nueva resolucin para cambiar el tamao del mapa de bits. Las
resoluciones bajas muestran los pxeles individuales del mapa de bits. Muy pocas
veces se necesita una resolucin mayor que 150 DPI, incluso para utilizacin de
tipografa.

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 LNEA DE COLORES .

La lnea de colores se describe en Manejo de colores (en la pgina 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 ratn en el lugar donde debe comenzar el relleno. (Esto
tambin puede ser fuera del objeto).
3. Arrastra el cursor hasta la posicin de fin del relleno. (Tambin puede
encontrarse fuera del objeto).

La flecha que se dibujar sobre el objeto seleccionado, se denomina flecha de relleno.

Esta flecha muestra la direccin y el alcance de la gradacin del relleno. Ambos
extremos de la flecha pueden marcarse con un clic.
244

Desplazamiento de los controles de inicio y fin de un

relleno
Modificacin de la direccin y el tamao de la gradacin 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 LNEA 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 lnea 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 sealado),
simplemente haz clic sobre un color.

La lnea de colores se describe en Trabajar con colores (en la pgina 179).

Cada mtodo cambia el color de un solo control deslizante; no se cambia ningn otro
control deslizante seleccionado, o:

1. Selecciona el control deslizante (o controles deslizantes, tambin funciona con

objetos mltiples) correspondiente.
2. Escoge el color deseado de la lnea de colores.
3. Esto cambia todos los controles deslizantes de relleno seleccionados.

Rellenos circulares
Para los rellenos circulares, la aplicacin 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 automticamente un relleno circular a un relleno
elptico (ver a continuacin).

Una forma rpida de aplicar un relleno circular:

+arrastra para crear un relleno circular.

www.magix.es
 La herramienta de relleno 245

Rellenos elpticos
La aplicacin de un relleno elptico es similar a la aplicacin
de rellenos lineales. A medida que arrastras el cursor del
ratn, creas un crculo con dos controles deslizantes de fin.
Despus puedes arrastrar estos controles deslizantes para
crear una elipse adecuada.

+ arrastrar conserva la relacin de aspecto del relleno. Ctrl+arrastrar limita la

rotacin a los ngulos de restriccin 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
Segmentacin de relleno
No utilizado
Nombre de mapa de bits
Resolucin
No utilizado

La Galera de mapa de bits se describe en La galera de mapa de bits (en la pgina

333) en el captulo Trabajar con fotos, para Galera de rellenos, lee ms abajo (en la
pgina 250).

El relleno de mapas de bits es el tipo de relleno ms impactante. Te permite utilizar

cualquier foto o textura como relleno de cualquier forma y te ofrece control directo
sobre el tamao, ngulo, posicin y mosaico. Tambin 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 lnea 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 GALERA DE MAPA DE BITS o desde el

explorador de Windows, manteniendo Shift presionada y soltando, o bien
Arrastra un relleno desde la GALERA 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
INFORMACIN 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 mltiples 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 tamao y la
posicin del relleno de mapa de bits (en la pgina 248). Una forma alternativa de
configurar el tamao del mapa de bits es introducir la resolucin en el campo de la
barra de informacin. Primero tienes que deshacer la seleccin 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 resolucin dpi.

Sustitucin 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 tambin se sustituirn las otras instancias de
la foto en la pgina actual si estas se encuentran en el mismo GRUPO SUAVE .

Si presionas SHIFT al sustituir una foto de esta forma, la posicin, escala y rotacin 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 LNEA DE COLOR (asegrate de no haber seleccionado ningn control
deslizante de relleno, al hacer clic sobre la imagen). Esto crear un tono contnuo
(tcnicamente tono dual) que flucta entre el negro y el color seleccionado. Tambin
puedes hacer clic derecho en la lnea 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, slo necesitas hacer clic en el
color blanco de la lnea 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 RESOLUCIN de la BARRA DE INFORMACIN muestra la resolucin que puede

modificarse moviendo los controles deslizantes de relleno o introduciendo un valor.

Cambio del tamao y la posicin 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 tambin, el ngulo se limitar,
de forma que te ser ms fcil 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 ratn sobre los controles deslizantes de

relleno exteriores, el cursor del ratn se convertir en
un cursor de "rotacin". Si arrastras los controles
deslizantes externos, el relleno de mapa de bits se
ampliar, pero manteniendo la relacin de aspecto; si
pulsas "" mientras arrastras, se cambiar el tamao
vertical y el horizontal de forma independiente y el
relleno se doblar. La barra de informacin muestra la
resolucin del relleno de mapa de bits (puedes ajustar
la resolucin y, por lo tanto, el tamao 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 Galera de mapas de bits si ya se ha utilizado en el documento) hasta la
elipse y luego arrstrala mientras pulsas la tecla "Shift". La herramienta de
relleno se convertir en la herramienta actual.
2. Ahora podrs ajustar el ngulo y tamao de la imagen arrastrando los controles
deslizantes de relleno.

El ejemplo anterior tiene una sombra simple. Lee el captulo sobre la herramienta de
sombras (en la pgina 257) para ms informacin.

Relleno fractal
MAGIX Web Designer 11 Premium es compatible con dos tipos de rellenos fractales
que son modelos de relleno naturalistas creados matemticamente. 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 INFORMACIN te permite controlar la proporcin de

granos del modelo. Los valores bajos resultan en un modelo suave, mientras que los
valores altos dan modelos con granos ms marcados.

Puedes ajustar el tamao y posicin 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 resolucin 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 resolucin. El grano controla el flujo del modelo.
La resolucin establece el tamao del mapa de bits fractal y la impresin de los
pxeles individuales.

Puedes cambiar los colores de inicio y fin de un relleno fractal. Selecciona los
controles deslizantes centrales o externos y despus aplica el color utilizando la lnea
de colores o la galera de COLOR . Para cancelar el color aplicado, escoge Sin color.

Gradaciones de color de varios niveles

Muchos de los tipos de rellenos con gradacin de color (lineal, circular, elptico,
cnico, rombos) son compatibles con rellenos de gradacin 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 aadir un nuevo nivel de color a una graduacin, selecciona la herramienta de

relleno para que se vea la flecha de relleno y despus:

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 despus haz clic sobre un color o abre el EDITOR DE COLOR .

Puedes reposicionar los controles deslizantes de relleno simplemente arrastrndolos.

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, seleccinalo con un clic y pulsa la tecla
Supr.

La galera de rellenos
La GALERA DE RELLENOS contiene texturas de mapas de bits que pueden utilizarse
para rellenos. Slo cuando utilizas un relleno se copia en el documento.

Para ver la GALERA DE RELLENOS :

Escoge HERRAMIENTAS > GALERAS > GALERA DE RELLENOS .
O pulsa " + F11".

IMPORTAR : importa el mapa de bits seleccionado en el documento. Una copia del

mapa de bits aparece en la GALERA DE MAPAS DE BITS . Tambin puedes arrastrar y
soltar el mapa de bits hasta una parte en blanco de la pgina. Esto es en general ms
fcil 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 ningn objeto es seleccionado, inserta el mapa de bits en el documento

como un nuevo objeto de foto.

Tambin 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 galera de MAPAS
DE BITS o la GALERA DE RELLENOS: al arrastrar mapas de bits desde la GALERA 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 adaptacin posible
para la forma. Este comportamiento es diferente al que ocurre al arrastrar desde la
galera de mapa de bits porque en general las texturas se aplican desde la galera 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 pgina.

ELIMINAR : borra el relleno o carpeta seleccionada.

RELLENO DE DISCO : aade nuevos rellenos de tu disco duro o un CD.

OPCIONES : te permite seleccionar el tamao de los smbolos de vista previa y si se

debe mostrar informacin completa sobre el mapa de bits, as como buscar y ordenar
los rellenos.

DETENER DESCARGA : si tienes una conexin lenta y la descarga de Internet se demora,

puedes detener la descarga y continuarla ms tarde.

Buscar y ordenar estn descritos en el captulo Trabajar con documentos (en la

pgina 95).

Trabajar con documentos (en la pgina 95) incluye informacin general sobre
galeras.
252

Transparencia
La herramienta de TRANSPARENCIA te permite determinar cunto de los
colores y objetos subyacentes se podrn ver a travs de un objeto.

Forma
Tipo de transparencia
Segmentacin
Nombre de mapa de bits
Perfil
Control deslizante/Resolucin
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 ms que otros paquetes de dibujo.

Puedes aplicar transparencia lisa o con gradacin 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 mltiples objetos superpuestos con distintas transparencias. El

reflejo del centro es un blanco 100% opaco que se va desvaneciendo poco a poco de forma
elptica.

Aplicar transparencia plana

Se llama transparencia "plana" porque todas las partes de los objetos tienen la misma
transparencia, a diferencia de la transparencia con gradacin.

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 informacin

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 gradacin

La transparencia con gradacin funciona de forma muy similar a los rellenos de color
(en la pgina 239) con gradacin. Debes arrastrar sobre los objetos en la
HERRAMIENTA DE TRANSPARENCIA para crear una transparencia con gradacin. Tienes
a disposicin una gama similar de formas de transparencia: la ms sencilla es la lineal,
pero tambin puedes utilizar transparencias circulares o elpticas:

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 informacin

Puedes seleccionar y ajustar la posicin y la intensidad de transparencia utilizando los

controles deslizantes del objeto.
254

Lee Rellenos (en la pgina 239) para ms informacin sobre cmo manipular los
controles deslizantes de relleno y las diferentes formas de relleno (en este caso,
formas de transparencia)

Transparencia con gradacin de varios niveles

Del mismo modo que puedes aadir varios niveles a un relleno con gradacin, puedes
hacer lo mismo con una transparencia con gradacin. Esto te permite, por ejemplo,
aplicar una gradacin 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. Aade niveles adicionales haciendo doble
clic en la lnea de transparencia con graduacin.

Consulta el captulo Rellenos (en la pgina 239) para ms informacin 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 travs de un vidrio de color. Es
ideal para la simulacin 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).

Tcnicamente, el proceso es sustractivo en el espacio de color RGB.

Trama (Blanqueador)
Trama no tiene ninguna analoga clara en el mundo fsico. Es til para crear puntos
destacados cuando la fuente de luz no es blanca. El color del objeto con aplicacin 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 saturacin. (Rojo
claro sobre rojo claro se convierte en rojo plido; verde sobre rojo se convierte
en amarillo).

Tcnicamente, 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 tambin se aplica una transparencia a la

lnea alrededor del objeto. No es posible configurar diferentes transparencias, pero
puedes eliminar la lnea con la opcin sin color o seleccionando el ancho de contorno
"ninguno". Para crear un objeto con un relleno transparente y una lnea no
transparente, utiliza un tipo de transparencia no plana.

Para ms informacin sobre colores, consulta Manejo de colores (en la pgina 179).

Ten en cuenta que los documentos de Web Designer que contengan tipos de
transparencia antiguos todava se referirn a ellos con sus nombres originales a
pesar de que ya no sean compatibles con Web Designer. Busca el nombre entre
parntesis en la lista de transparencias para identificarlos.

Perfil
Puedes ajustar el "gradacin de la transicin 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 dnde esta opcin no est disponible).

Para cambiar el perfil de una transparencia:

1. Selecciona el objeto.
2. En la barra de informacin de la herramienta de TRANSPARENCIA , haz clic en
PERFIL . Esto abrir el cuadro de dilogo de PERFIL .
3. Selecciona un perfil predefinido de la lista desplegable o arrastra los
deslizadores para crear un perfil personalizado. La opcin superior en la lista
desplegable (la lnea recta) crea una transicin lineal entre el comienzo y el fin
de la transparencia.
256

Mapas de bits
Las galeras de mapas de bits y rellenos se describen en el captulo Trabajar con
mapas de bits (en la pgina 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 informacin de
transparencia o utiliza las galeras de mapas de bits o rellenos para cambiar el mapa
de bits utilizado. (Clic sobre el botn TRANSP en la galera o arrastrar y soltar desde la
galera).

Por defecto, los colores ms claros de un mapa de bits son los ms transparentes.
(Por supuesto, puedes modificar la cantidad relativa de transparencia
posteriormente).

Control deslizante / resolucin

Si has seleccionado un control deslizante, este campo te indica cul es. Si no hay
ningn 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 estn
agrupados y aplicas transparencia, cada objeto individual recibir una transparencia
por separado y obtendrs un efecto diferente si los objetos estn superpuestos.

Transparencia individual (izquierda) o transparencia de grupo (derecha)

Mezclar transparencias individuales y de grupo

Puedes combinar los mtodos descritos anteriormente para crear combinaciones
complejas de transparencia. Por ejemplo, puedes aplicar un 50% de transparencia a
un objeto, despus agruparlo y aplicar tambin transparencia al grupo. Tambin
puedes aplicar primero transparencia al grupo y despus 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
Posicin de la sombra

MAGIX Web Designer 11 Premium tiene tres tipos de sombras:

Pared (Wall): la sombra se proyecta detrs del objeto.

Suelo (Floor): el objeto parece estar parado verticalmente sobre una superficie.
Brillo (Glow): la sombra se utiliza para aadir 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 resolucin y puedes modificar su
tamao sin prdida 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 botn PARED de la barra de informacin de la
herramienta de SOMBRA.
4. Puedes arrastrar la sombra desde o hacia el objeto para
crear ms 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 direccin a la sombra.

Aplicar una sombra de suelo

1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botn SUELO de la barra de
informacin de la herramienta de SOMBRA.
4. Arrastra hacia o desde el objeto para cambiar el
tamao o la direccin radial. El ngulo puede tener
hasta 70.

Aplicar un efecto de resplandor

Aadir un resplandor o halo detrs de un objeto puede crear grficos muy
asombrosos.

Para crear un efecto de resplandor:

1. Selecciona el objeto.
2. Escoge la herramienta de SOMBRA .
3. Selecciona el botn RESPLANDOR de la barra de
informacin de la herramienta de SOMBRA.
4. Arrastra hacia o desde el objeto para cambiar el
tamao del resplandor.

www.magix.es
 Sombras 259

Desenfocar los bordes de la sombra

Esto cambia el tamao 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 estn desenfocadas
levemente, puesto que es ms realista.

Para desenfocar los bordes de la sombra:

1. Selecciona el objeto
2. Escoge la herramienta de SOMBRA.
3. En la barra de informacin 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 ms
realista que una sombra slida. 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 informacin 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
Despus 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

Cmo cambiar el color de la sombra:

Para ms informacin sobre colores y la lnea de colores lee el captulo Trabajar con
colores (en la pgina 179).

La forma ms fcil es arrastrar y soltar un color desde la lnea de color hasta la

sombra. (Asegrate de soltar el color sobre la sombra y no sobre el objeto.)
Como alternativa, tienes a disposicin este mtodo un poco ms complejo pero
que te permite el control absoluto sobre el color:
1. Selecciona la sombra utilizando la herramienta de SELECCIN . (Asegrate 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 botn SIN SOMBRA de la barra de
informacin de la herramienta de SOMBRA.

Aplicar una sombra a varios objetos

El resultado de aplicar una sombra depende de la agrupacin de los objetos:
Si los objetos estn agrupados, las sombras superpuestas se fusionan (no se
oscurecen al superponerse).
Si los objetos no estn agrupados, cada objeto recibir una sombra individual.
Las partes superpuestas de las sombras se vern ms oscuras.
Si has seleccionado varios objetos con sombra, los cambios se aplicarn a todas
las sombras.

www.magix.es
 Sombras 261

Seleccin 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 travs de la herramienta de SELECCIN . Sin embargo,
tambin 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 opcin PEGAR FORMATO/ATRIBUTOS . Simplemente copia el
objeto que tiene la sombra (EDICIN > COPIAR ), selecciona el objeto o los objetos a los
que quieres pegarle la sombra y escoge EDICIN > 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 pgina.

Los biseles tienen su propia resolucin, por lo que puedes modificar su tamao sin
perder calidad.

Tipo de bisel
Lista de tipo de barra deslizante
Valor numrico y de barra deslizante para el parmetro seleccionado
Bisel externo
Bisel interno
Estilo de unin

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 opcin 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 agrupacin de los objetos:

Si los objetos estn agrupados, los biseles que se superponen se fusionan. El

color de bisel es el mismo al del objeto trasero.
Si los objetos no estn 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 elevacin de la luz y cambiar la forma, direccin y tamao
del borde del bisel.

Direccin del bisel

Los biseles pueden encontrarse dentro o fuera del objeto. Los biseles externos hacen
los objetos ms grandes, mientras que los biseles internos no cambian el tamao del
objeto.

Para cambiar la direccin del bisel.

1. Selecciona el objeto.
2. Haz clic en el botn 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 direccin y la altura de la luz, as como su
intensidad (contraste).

Cambiar el ngulo de luz (direccin horizontal):

1. Selecciona el objeto.
2. Arrastra la flecha para cambiar la posicin 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 despus 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 slo 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 despus arrastra
la barra o introduce un valor en el campo de texto.

Si has seleccionado varios objetos con bisel, los cambios se aplicarn a todos los
biseles. Los colores utilizados en el bisel afectan el contraste. Por ejemplo, los colores
fuertes (saturados) requieren ms contraste que los colores dbiles para obtener el
mismo efecto. Para mejor resultados, es posible que debas ajustar el contraste para
cada objeto.

Cambiar la elevacin de la luz (ngulo vertical)

Esto te permite mover la luz desde cualquier posicin arriba del objeto (90) hasta el
costado del objeto (0).

1. Selecciona el objeto.
2. Selecciona ELEVACIN DE LA LUZ de la lista TIPO DE BARRA DESLIZANTE . Despus
arrastra la barra o introduce un valor en el campo de texto.

Para obtener biseles redondeados se recomienda una elevacin de luz de 30. Con
este ngulo, el bisel se mezcla suavemente con el objeto.

www.magix.es
 Biseles 265

Cambiar el tamao del bisel

Cmo cambiar el tamao 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 TAMAO de la lista TIPO DE BARRA DESLIZANTE .
3. Despus 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

Despus 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 ms informacin sobre colores y la lnea de colores lee el captulo Trabajar con
colores (en la pgina 179).

Cmo cambiar el color del bisel:

La forma ms fcil es arrastrar y soltar un color desde la lnea de color hasta el

bisel. (Asegrate de soltar el color sobre el bisel y no sobre el objeto.)

Como alternativa, tienes a disposicin este mtodo un poco ms complejo pero que
te permite el control absoluto sobre el color:

1. Selecciona el bisel utilizando la herramienta de SELECCIN . (Asegrate de

seleccionar el bisel y no el objeto).
2. Utiliza el EDITOR DE COLOR para editar el color.
266

Cambiar el estilo de unin del bisel

Despus de aplicar un bisel a
un objeto, puedes cambiar la
forma de las esquinas
(uniones).

Cmo cambiar el estilo de la unin de bisel:

1. Selecciona el objeto.
2. Haz clic sobre el botn de unin apropiado en la barra de informacin 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
 Mscaras 267

Mscaras
En MAGIX Web Designer 11 Premium las herramientas de mscara 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 botn paleta selecciona BARRAS DE CONTROL ... del men VENTANA y
desplzate por la lista hasta la parte inferior. Ahora haz clic en la casilla al lado del
icono de "Botn paleta". (O haz clic derecho sobre un rea vaca o cualquier barra de
botones y elige "Botn paleta" del men popup).

Si quieres usar estas herramientas a menudo puedes moverlas desde el "Botn

paleta" arrastrndolas hasta la barra de herramientas. (Mantn pulsada la tecla
"Alt", luego arrastra el botn y sultalo sobre la barra de herramientas sobre alguno
de los iconos existentes).

Crear una mscara

En Web Designer se utiliza una mscara para proteger parte de una foto de una
posible distorsin. 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 operacin. Utiliza una mscara
para marcar el rea a proteger.

Para crear una mscara selecciona una de las herramientas de mscara de la barra
desplegable de herramientas de mscara y sala para pintar una mscara rosa sobre
tu foto en las partes que quieres proteger. Para ello, el PINCEL DE MSCARA (la primera
herramienta de la barra desplegable) es normalmente la herramienta ms 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 operacin compatible con la
mscara.

Las herramientas de regin de foto y mscara

Las herramientas para el dibujo de mscaras estn en la barra de herramientas
de mscaras desplegable.

La barra de herramientas de mscara desplegable.

268

La HERRAMIENTA DE DIBUJO DE MSCARA es la herramienta de mscara por

defecto y te permite "dibujar" sobre el rea que quieres ocultar. Elige un
tamao de pluma de la barra de informacin y crea una forma de mscara
pasndola sobre el objeto. Si mantienes presionada la tecla "Shift" a la vez que
el botn izquierdo del ratn podrs borrar partes de la mscara.
Usa la herramienta de mscara a mano alzada para dibujar formas cerradas
alrededor de las reas u objetos a los que quieres aplicar una mscara igual
que lo haras con un lpiz. Como las herramientas de mano alzada y pincel,
tambin la barra de informacin tiene un control suavizado y puedes mantener
pulsada la tecla "Shift" para borrar tu lnea mientras dibujas.
La herramienta MSCARA RECTANGULAR te permite arrastrar un rea de
mscara rectangular. Puedes modificar tu forma usando la configuracin de
ancho y alto de la barra de informacin.
Usa el botn MOSTRAR MSCARA O REGIN para activar o desactivar la
mscara o regin. Esta opcin no las elimina, por lo que puedes volver a
activarlas, pero mientras est desactivada, la mscara o regin no afectar a
ninguna operacin.
El botn INVERTIR MSCARA invierte el rea enmascarada de forma que las
zonas no enmascaradas sean ahora las que tengan la mscara.

Usa el botn ELIMINAR MSCARA para quitar el efecto en todas las formas.

Tanto la funcin INVERTIR como la de ELIMINAR aparecen tambin en la barra de

informacin.

La barra de informacin tambin ofrece una opcin para activar y desactivar el

contorno de la mscara o regin. En general, esto es nicamente til cuando utilizas
estas herramientas para editar regiones dentro de grupos de fotos. Esta funcin
desactiva nicamente el contorno, por lo que NO es igual al botn MOSTRAR
MSCARA O REGIN descrito anteriormente, que activa o desactiva toda la mscara o
regin. Para ms detalles consulta Grupos de fotos (en la pgina 329).

Para ms informacin sobre la caracterstica de control suavizado consulta en la

herramienta Mano alzada y pincel.

Editar mscara.
En la mayora de los casos editas la mscara usando las mismas herramientas de
mscara descritas arriba. Pero las formas que conforman una mscara son en realidad
formas normales colocadas en una capa especial de mscara, por lo que en algunos
casos puede ser til editar formas sobre ella. Utiliza la GALERA DE PGINA Y CAPA

www.magix.es
 Mscaras 269

para acceder a la capa de mscara. Te ser til para los ms finos detalles de las
formas de mscaras o si quieres mover una mscara de posicin o incluso para crear
una mscara suave.
1. Haz clic en la herramienta de seleccin y abre la galera de pginas y capas.
2. Haz clic en la capa de mscara para activarla.
3. Selecciona la forma de mscara que quieras modificar y cmbiala de posicin o
tamao 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 mscara de rectngulo, un
doble clic te permitir la edicin con la HERRAMIENTA DE RECTNGULO. (EN LA
PGINA 169)

Mscaras suaves
Una mscara suave es una mscara que incluye una variedad de niveles de mscaras,
en vez de consistir simplemente en partes con y sin mscara. Por ejemplo, una parte
de una imagen pueden tener aplicada un 50% de mscara de forma que la operacin
que se aplique luego tenga nicamente el 50% de efecto en esa parte. O una forma
de mscara puede tener una mscara graduada que abarque de 0% a 100%. Si se
utiliza despus esa mscara con la HERRAMIENTA DE OPTIMIZACIN DE FOTO para dar
ms brillo a la imagen, el efecto tendr esa misma graduacin.

Crear una mscara suave

Puedes crear mscaras suaves si aplicas la herramienta de transparencia a tus formas
de mscaras en la capa de mscaras. Crea en primer lugar las formas de mscara.

Cambia a la herramienta de seleccin y abre la galera de pginas y capas.

Extiende la pgina para ver las capas y haz clic en la capa de mscara para
activarla.
Haz clic sobre la forma de mscara en el espacio de trabajo y selecciona la
herramienta de transparencia.
Arrastra por la forma de mscara para crear una mscara suave graduada lineal.

Operaciones que utilizan la mscara

Cortar, copiar, eliminar
Estas operaciones son tiles cuando se utilizan junto con mscaras para cortar trozos
de fotos, pero tambin puedes usarlas con cualquier objeto.

1. Selecciona una de las herramientas de mscara de la barra desplegable de

HERRAMIENTA DE MSCARA y dibuja la forma de mscara que desees.
2. A continuacin, cambia a la HERRAMIENTA DE SELECCIN y selecciona el dibujo o
foto que deseas editar
3. Selecciona ahora una de las opciones del men EDICIN para realizar cualquier
operacin de cortar/copiar/pegar.
270

La mscara rectangular se usa para crear una mscara (izquierda). Cortar o borrar quita las
partes no enmascaradas de la foto (derecha).

En el ejemplo de la izquierda, la mscara se ha invertido. Ahora, cuando cortes o elimines, el rea

de mscara en rosa est protegida y todo lo dems se eliminar.

Duplicar, clonar
Esto copiar solamente las partes no en mscara del dibujo o foto. La opcin Clonar
coloca una copia exactamente sobre el original.

Modificacin de tamao de foto con contenido

Para proteger parte de una foto ante cambios de escala:

1. Selecciona una de las herramientas de mscara de la barra de herramientas de

mscara desplegable y dibuja la forma de mscara que desees alrededor del
rea que quieres proteger.
2. Ahora ve a la herramienta "Cambio de tamao 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 funcin Cambio de tamao teniendo en cuenta el contenido (en la

pgina 368) para ms informacin.

www.magix.es
 Mscaras 271

Herramienta de optimizacin de foto

Utiliza una mscara para aplicar brillo, contraste, saturacin, temperatura o
enfoque/desenfoque a cualquier parte de una foto.

1. Selecciona una de las herramientas de mscara de la barra de herramientas de

mscara desplegable y dibuja la forma de mscara que desees alrededor del
rea que quieres proteger.
2. Ahora ve a la herramienta de optimizacin 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 optimizacin" de la barra de informacin de la
herramienta de fotos.

Los usuarios avanzados quiz quieran usar mscaras suaves para introducir efectos
graduados en la operacin de optimizacin de foto. Consulta los captulos
Herramienta de fotos y Manejo de fotos para ms informacin.

Combinar formas
El men "ARREGLO" > "COMBINAR FORMAS" contiene una serie de funciones que te
permiten combinar las formas de mltiples maneras. Estas operaciones funcionan con
la mscara. Por ejemplo, recorta una parte de una foto (cookie estilo cter).

1. Selecciona una de las herramientas de mscara de la barra desplegable de

herramientas de mscara y pinta cualquier forma de mscara que necesites.
2. Cambia a la herramienta de seleccin y escoge el dibujo o foto que quieres
segmentar.
3. Selecciona "ARREGLO" > "COMBINAR FORMAS" > "SEGMENTAR" .

Copiar formas a la capa de mscara

Puede que prefieras dibujar formas de mscara usando las herramientas de dibujo
normales en lugar de las de mscara, o incluso usar una forma existente de la capa de
mscara. Resulta particularmente til cuando trabajas con mscaras suaves, donde
ests aplicando niveles o transparencias sobre los objetos de mscara. En la
"Herramienta de seleccin", elige la forma y copia o crtala. Ahora cambia a una de
las herramientas de mscara 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 mscara hasta cualquier otra, haz la inversa.
Selecciona las formas mientras ests en una herramienta de mscara, luego cambia a
la HERRAMIENTA DE SELECCIN , y pega.
272

Dilogo de propiedades web

El dilogo de propiedades web es un dilogo con mltiples pestaas que te permite
aadir y configurar la mayora de las caractersticas relacionas con la web en MAGIX
Web Designer 11 Premium y fijar diferentes propiedades web en objetos, pginas y en
toda tu pgina web. Para abrirlo, haz clic derecho sobre un objeto y escoge
PROPIEDADES WEB o utiliza la opcin del men "HERRAMIENTAS" > "PROPIEDADES
WEB" (shortcut Ctrl + Shift + W).

Tambin puedes acceder a cada pestaa del dilogo con los botones de la barra
desplegable de propiedades web, disponible en la barra de herramientas de pgina
web.

Pestaa Enlace
Pestaa Pgina web
Pestaa Pgina
Pestaa Imagen
Pestaa MouseOver
Pestaa Marcador de posicin
Pestaa Publicar
Pestaa Analytics (en la pgina 296)
Editar barra de navegacin

El dilogo carece de modo as que puedes dejarlo abierto mientras seleccionas

diferentes pginas y objetos en tu documento. As es ms rpido y fcil configurar las
propiedades de diferentes objetos y pginas en tu pgina web. Utiliza el botn
ACEPTAR para aplicar tus cambios y cerrar el dilogo, o bien utiliza el botn APLICAR
para aplicar tus cambios sin cerrar.

Ten en cuenta que si tu documento actual es un diseo de animacin, el dilogo

PROPIEDADES WEB aparece de forma modificada con algunos controles diferentes y
muchos otros desactivados porque no se aplican a las animaciones. Lee el captulo
sobre Animaciones para informarte sobre cmo usar este dilogo con diseos de
animacin.

Las siguientes secciones abarcan cada una de las pestaas correspondientes.

www.magix.es
 Dilogo de propiedades web 273

Pestaa Enlace

La configuracin de esta pestaa se aplica al objeto, a los objetos o al texto

seleccionados. Por lo general, esta pestaa se utiliza para aadir un enlace a un objeto
en tu pgina web (por ejemplo un botn o una foto), o bien para aadir texto de modo
que cuando un usuario visita tu pgina y hace clic en el objeto/texto, es remitido a
otra pgina. Puedes agregar enlaces a otras pginas de tu sitio web, a una direccin
URL o a una ventana emergente.

Tambin puedes aplicar efectos de transicin a los enlaces, de forma que la pgina de
destino del enlace (ya sea externa o una de las pginas de tu sitio) aparezca con la
transicin que selecciones. Las transiciones para los enlaces solo pueden utilizarse
cuando en enlace se abre en una nueva pgina, de lo contrario, estarn desactivadas.
274

Para agregar un enlace a algunas palabras de un prrafo, ve a la HERRAMIENTA DE

TEXTO y selecciona el texto al que quieras agregar el enlace. A continuacin configura
el enlace en esta pestaa.

La seccin principal de esta pestaa te permite escoger qu debe ocurrir cuando se

hace clic en el objeto o texto seleccionado.

Enlazar a una direccin web

Para vincular esta direccin, introduce una direccin web. Si mantienes seleccionado
el recuadro "CORREGIR DIRECCIN AUTOMTICAMENTE ", tu direccin, 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 direccin del enlace una direccin de correo

electrnico y as, al hacer clic en el enlace, se abrir el programa de correo electrnico
del usuario con el campo Para: rellenado. Asimismo, puedes especificar la lnea del
asunto, agregar direcciones de correo electrnico CC o CCO para copiarlas en el
correo electrnico, o incluso especificar el cuerpo de texto estndar que deseas
utilizar.

tunombre@elsitioquequieras.com asunto:correo electrnico de la pgina web

cc:otro@elsitioquequieras.com coo:yotromas@elsitioquequieras.com cuerpo:correo
electrnico autogenerado

Nota tcnica: MAGIX Web Designer 11 Premium codifica tu direccin de correo

electrnico para reducir las probabilidades de que robots de correo basura
encuentren tu correo electrnico de la pgina web. Esto requiere que Javascript est
permitido en el navegador (actualmente > 95%) de los navegadores).

Enlazar a...
Selecciona esta opcin si deseas enlazar a otra pgina en el sitio web actual o, si ests
creando una presentacin, si quieres incluir un enlace al paso siguiente o previo de la
presentacin. La lista desplegable te permite seleccionar la pgina o el paso al que
deseas enlazar. Tambin puedes escoger esta opcin para enlazar a un objeto al
borde superior de la pgina (se crea un salto rpido desde el final de una larga pgina
hasta el inicio).

CONSEJO: si tu documento de sitio web tiene varias pginas, asignar a cada una un
nombre facilita la configuracin y mantenimiento de los enlaces de tu pgina porque
la lista de pginas contendr los nombres de las pginas y no solo "Pgina 2",
"Pgina 3", etc.

www.magix.es
 Dilogo de propiedades web 275

Consulta la seccin PESTAA PGINA (en la pgina 282) a continuacin para

ms detalles sobre cmo configurar los nombres de pgina o editar los
nombres en la GALERA DE PGINAS Y CAPAS .

Adems de una entrada para cada pgina en tu sitio, la lista desplegable tambin
contiene entradas especiales PRXIMA PGINA/PASO DE PRESENTACIN, PGINA
ANTERIOR/PASO DE PRESENTACIN y PARTE SUPERIOR DE PGINA .

Pgina anterior/Prxima pgina

Utilzalo para agregar un enlace hacia una pgina anterior o posterior de tu sitio web.
En el caso de enlaces de este tipo, el orden de las pginas se establece segn el orden
de pgina que aparece en MAGIX Web Designer 11 Premium. La opcin "siguiente"
en la ltima pgina configura un enlace a la primera pgina y la opcin "anterior" en la
primera pgina, a la ltima.

Paso de presentacin anterior/siguiente

Utiliza esta opcin para agregar un enlace que te lleve al paso siguiente o anterior de
la presentacin, si tu sitio web es una presentacin. El orden de la presentacin
tambin est determinado por el orden de los pasos tal como aparecen en MAGIX
Web Designer 11 Premium, al igual que "pgina anterior/siguiente".

Parte superior de la pgina

Si quieres enlazar a la parte superior de una pgina particularmente larga, crea un

objeto al final de la pgina (por lo general un objeto de texto o un botn) y selecciona
entonces la opcin para enlazar "PARTE SUPERIOR DE LA PGINA" . El enlace te llevar
directamente a la parte superior de la pgina.

Enlazar a una referencia

Esta opcin te permite hacer que el usuario salte a una parte especfica de cualquier
pgina de tu sitio web.

Para configurar un punto de referencia, primero ve a la pgina y determina hacia

dnde quieres que lleve el enlace. Selecciona el objeto y agrega un nombre con un clic
derecho y la opcin NOMBRES... . A continuacin selecciona el objeto para el cual
quieres crear el enlace y escoge en la lista suministrada por la opcin "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 pgina, el navegador web bajar la pgina automticamente para mostrar
tu objeto de referencia.

NOTA : no puedes aplicar una transicin a un enlace a una referencia.

276

Enlace al archivo
Esta opcin de enlace es til si quieres agregar un documento, pelcula u otro archivo
a tu sitio web para que est a disposicin 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
opcin Enlace al archivo y utiliza el botn EXPLORAR para buscar el archivo en tu
ordenador. El nombre del archivo aparece en el campo de texto a la izquierda del
botn Explorar. Con un clic en Aceptar, el enlace se aplicar.

Adems 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 diseo. Esta es una
carpeta que se guarda junto con tu archivo .web o .xar. Si tu diseo 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 captulo Manejo de documentos (en la pgina
86) para ms informacin acerca de las carpetas de soporte.

Nota: como el archivo se copiar en la carpeta de soporte de tu diseo, debers

actualizar esta copia cada vez que modifiques el archivo original y quieras publicar la
versin modificada. O puedes repetir el proceso de enlace y buscar el archivo
actualizado. De igual forma, si mueves o copias tu diseo a otro ordenador o le das
una copia a alguien, debes asegurarte de enviar tambin la carpeta de soporte del
archivo de diseo porque contiene una parte muy importante de tu pgina web.

NOTA : no puedes aplicar una transicin a un enlace a un archivo.

Capa popup
Puedes aadir el contenido que quieras en una capa separada de tu pgina y puedes
hacer que este contenido se muestre como un popup solo cuando el usuario hace clic
en un enlace. Por ejemplo, podras agregar un texto descriptivo sobre una foto que se
encuentre en tu pgina web y hacer que el texto solo aparezca cuando el usuario haga
clic en la foto.

Para aadir una capa de popup, primero tienes que agregar la propia capa
mediante la GALERA DE PGINAS Y CAPAS y luego agregar tu contenido de
popup a esa capa.
Consulta el captulo GALERA DE PGINAS Y CAPAS para ms informacin. A
continuacin puedes seleccionar la capa de la lista de capas que encontrars junto a
la opcin de "Capa popup".

Tambin puedes agregar un efecto de transicin que se aplica cuando la capa

aparece. En la GALERA DE PGINAS Y CAPAS , abre las propiedades de capa para poder

www.magix.es
 Dilogo de propiedades web 277

aplicar una transicin directamente a una capa (en la pgina 68) para lograr un efecto
de animacin cuando aparezca el contenido de la capa. Puedes tambin hacer clic en
el botn "Configuracin" al lado de la capa popup en la pestaa 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 pgina, 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
AUTOMTICAMENTE del dilogo de propiedades de la capa. Entonces se incluye un
botn de cierre en el borde superior del popup y permanece en pantalla hasta que se
presiona el botn de cerrar.

Ten en cuenta que tambin puedes acceder a las propiedades de capa haciendo clic
en el botn "Configuracin..." al lado de la opcin capa popup en el dilogo "Enlace".

Ten en cuenta que todo el contenido de la capa popup se carga en cuanto el usuario
visita tu pgina. Entonces, si quieres ofrecer muchas fotos con ventanas emergentes,
utiliza la caracterstica Foto emergente descrita a continuacin.

Foto emergente
Esta opcin te ofrece una forma muy fcil de aadir fotos emergentes y otras
caractersticas de la galera de fotos a tu sitio web, sin agregar capas. Simplemente
importa tu foto y utiliza la HERRAMIENTA DE SELECCIN para reducir el tamao
correctamente de modo que aparezca como una pequea miniatura de foto en tu
pgina web. Luego seleccinala y escoge la opcin FOTO EMERGENTE.

Haz clic en el botn CONFIGURACIN junto a esta opcin para ir a la PESTAA IMAGEN ,
en donde puedes fijar el tamao de la foto emergente y escoger entre otras opciones.
Consulta la seccin pestaa Imagen a continuacin (en la pgina 285) para ms
detalles. Al seleccionar la opcin foto emergente en esta pestaa Enlace, tambin se
selecciona la casilla foto emergente en la pestaa Imagen, es decir, que ambos
activan el mismo comportamiento de popup.

Utilizar colores habituales para enlaces de sitios web

Esta opcin te permite decidir cmo deben aparecer los enlaces de texto. Por defecto,
esta opcin est seleccionada, lo que significa que el enlace de texto tendr el color
que definiste para toda la pgina web. Puedes configurar este color en la pestaa
Pgina web (vase el apartado de la pestaa Pgina web).

Si deseleccionas esta opcin, el enlace de texto seleccionado mantendr el color que

le diste en la pgina. Por lo tanto, puedes asignar colores distintos a los diferentes
enlaces, si lo deseas.
278

Abrir enlace en:

Esta opcin no hace nada si una de las opciones "Capa popup" o "Popup foto" est
seleccionada. Pero de cara a otros enlaces te permite definir cmo el navegador web
debe cargar la pgina 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 pgina principal del navegador,
sustituyendo todos los frames existentes.

Si quieres que el enlace se cargue en un frame especfico en el navegador, teclea el

nombre del frame en este campo.

rea que permite clic

Esta opcin te permite especificar en qu rea del objeto se debe hacer clic para
invocar el enlace. Sin embargo, no es compatible con pginas web HTML (el
rectngulo que rodea el objeto siempre se usa); slo funciona si se exporta a flash.

FORMA DE OBJETO : El usuario debe hacer clic exactamente en el contorno del objeto
para invocar el enlace.

RECTNGULO RODEANDO OBJETO: El usuario puede hacer clic en cualquier parte del
rectngulo que est rodeando el objeto (caja circundante) para invocar el enlace.

www.magix.es
 Dilogo de propiedades web 279

Pestaa Pgina web

La configuracin en esta pestaa se aplica a todo el documento o a toda la pgina

actual, por lo que no importa qu objeto o pgina hayas seleccionado.

TTULO, DESCRIPCIN Y PALABRAS CLAVE : estos campos se han descrito en la seccin

Pestaa Pgina (en la pgina 282). Opcionalmente puedes configurar estos campos
para que se apliquen a cada pgina de tu sitio, a no ser que la configuracin para una
pgina de la pestaa "Pgina" los anule. Por ejemplo, una pgina que no tenga su
propio ttulo en la pestaa Pgina, obtendr el ttulo especificado aqu.

CDIGO HTML (ENCABEZADO) Y CDIGO HTML (CUERPO): estos botones tienen el

mismo objetivo que los botones cdigo HTML (encabezado) y cdigo HTML
(cuerpo) de la seccinpestaa Pgina y te permiten introducir una gran cantidad de
cdigo HTML en la seccin del encabezado o del cuerpo de las pginas de tu sitio
web.
280

Si se ha especificado cdigo aqu en la PESTAA PGINA WEB, se incluir en todas las

pginas del sitio junto con el cdigo especificado para cada pgina en la pestaa
Pgina. De esta forma puedes incluir un cdigo en cada pgina y, adems, te puedes
agregar ms cdigo a las pginas que lo requieran.

Colores para enlaces de sitios web

Esta seccin de la pestaa "Pgina web" te permite controlar cmo los enlaces de
texto deben aparecer en tu pgina web.

SUBRAYAR TEXTOS CON ENLACES : el subrayado se suele usar para resaltar en el texto
los enlaces que permiten clic, por lo que esta opcin est seleccionada por defecto.
Desactvala 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 botn "Editar" para abrir el
editor de color y elegir cualquier otro color.

MOUSEOVER : los enlaces de texto cambiarn a este color cuando un usuario mueva el
cursor del ratn por encima de ellos.

VISITADO : enlaces de texto que conduzcan a una pgina que el usuario ya ha visitado
se visualizan en este color en lugar de en el color MouseOff.

Adaptar a bordes de pgina

Esta opcin est activada por defecto. Si tienes objetos en tu sitio web que
sobrepasan los bordes de la pgina web, haz clic en esta opcin para recortar estos
objetos de modo que solo sea visible la parte que est sobre la pgina. Desactiva esta
casilla si quieres que el objeto fluya sobre el borde de la pgina de forma que la
porcin que sobrepasa el tablero de dibujo se muestre de todas formas.

Ten en cuenta que si tienes una pgina invisible (lo que ocurre por defecto para
nuevos documentos web o si has aplicado "sin color" a tu pgina), no se puede
hacer clip a los bordes de pgina aun cuando esta opcin est activada.

Presentaciones web
Haz clic en la opcin PGINA WEB DE PRESENTACIN para convertir una pgina web
existente en una presentacin.

Nota: si creas un documento de presentacin y escoges PRESENTACIN DE 955

PIX del men NUEVO , la casilla PGINA WEB DE PRESENTACIN se activa
automticamente.

www.magix.es
 Dilogo de propiedades web 281

CLIP A LOS BORDES DE LA PGINA (activado por defecto): si tienes objetos en tu pgina
web que sobrepasan los bordes de la pgina web, haz clic en esta opcin para
recortar estos objetos a la porcin visible en la pgina web. Quita la seleccin de esta
casilla si quieres que el objeto fluya sobre el borde de la pgina de forma que la
porcin 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

presentacin que aparecen desde los lados, la parte inferior o la parte superior de la
pgina, al desactivar esta opcin, la transicin aparecer desde el borde de la
ventana del navegador en vez de desde el borde de la pgina.

Retina (activado por defecto)

Cuando esta opcin est activada, Web Designer exportar versiones en alta
resolucin de cada imagen en tu pgina web, adems de las imgenes en resolucin
de pantalla normal. Esto significa que los dispositivos con pantallas de muy alta
resolucin reproducirn imgenes de mayor calidad.

Para ms informacin consulta Imgenes de alta resolucin (en la pgina 327).

Opciones de exportacin web

El dilogo OPCIONES DE EXPORTACIN 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 pgina), donde haces clic a travs de las pginas
usando la navegacin convencional, o como SUPERSITE (el sitio completo como un
nico archivo HTML), lo que te permite presentar tu pgina con transiciones
animadas entre pginas o como un arreglo horizontal o vertical de pginas, para que
los usuarios puedan explorarla con toques de pantalla en mviles y tabletas.

La configuracin por defecto para el dilogo es PGINA WEB CONVENCIONAL .

Ver Supersites (en la pgina 303) para ms detalles sobre las opciones de
visualizacin y para aadir capas.
282

Pestaa Pgina

Las opciones en esta pestaa se aplican a la pgina actual, no al objeto ni a los objetos
seleccionados. La pgina actual se indica con lneas de ngulo negras en la parte
exterior de cada esquina de la pgina. Todos los campos en esta pestaa son
opcionales: no necesitas necesariamente rellenar estos campos para cada pgina de
tu web.

Si quieres tener el mismo ttulo, descripcin y palabras clave en cada pgina de tu

sitio web, puedes configurarlo una sola vez en la pestaa Pgina web en lugar de
hacerlo para cada pgina.

NOMBRE DE ARCHIVO DE LA PGINA : utiliza este campo para establecer el nombre que
quieres que se utilice para esta pgina, al exportarla. As, si quieres que la pgina se
exporte como "inicio.htm", configura este campo como "inicio".
www.magix.es
 Dilogo de propiedades web 283

En general, la primera pgina 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 pgina (como www.xara.com), el servidor web generalmente lo lleva
automticamente a la pgina index.htm, si esta existe. Ten en cuenta que los
caracteres que introduces en este campo se escriben automticamente en
minsculas y que no se permiten los caracteres acentuados y algunos otros
caracteres no alfanumricos. Esto tiene como objetivo reducir los posibles de
problemas de compatibilidad con los diferentes servidores web cuando publicas tu
pgina web.

TTULO DE PGINA: puedes escoger un ttulo para tu pgina. Si est definido, los
navegadores web lo usan para mostrar el ttulo de la pgina en el marco de la ventana
del navegador o en la pestaa. A modo de ejemplo, en el momento de redaccin la
pgina inicial de www.xara.com tiene el ttulo "Graphics Software by Xara" que, como
puedes ver, se muestra en el navegador web si visitas la pgina.

Avanzado: el ttulo se inserta en el encabezado de la pgina con el elemento HTML

"<ttulo>".

DESCRIPCIN DE LA PGINA : es posible que los motores de bsqueda muestren este

texto de descripcin de la pgina en los resultados de las bsquedas cuando un
visitante encuentre tu pgina mediante una bsqueda en Internet. Los navegadores y
otros servicios web tambin pueden mostrar la descripcin de la pgina.

Avanzado: la descripcin se introduce como metadatos en el encabezado de la

pgina
(<meta name="description" ..).

PALABRAS CLAVE DE LA PGINA: aqu puedes ingresar palabras clave que deseas que
los motores de bsqueda reconozcan para que los visitantes encuentren tu sitio.
Introduce palabras que los visitantes potenciales puedan buscar cuando quieran
encontrar pginas y sitios como el tuyo.

Para aquellos familiarizados con HTML, las palabras clave se introducen en el

encabezado de la pgina como metadatos:

Avanzado: las palabras clave se introducen como metadatos en el encabezado de la

pgina
(<meta name="palabras clave" ..).

CDIGO HTML (ENCABEZADO): haz clic para abrir el dilogo de cdigo HTML
(encabezado), en donde puedes pegar o escribir cdigo HTML directamente en el
encabezado de tu pgina web. El cdigo se inserta sin modificarse antes de la etiqueta
de cierre "</encabezado>".
284

CDIGO HTML (CUERPO): haz clic para abrir el dilogo de cdigo HTML, en donde
puedes pegar o escribir cdigo HTML directamente en el cuerpo de tu pgina web. El
cdigo se inserta sin modificarse antes de la etiqueta de cierre "</cuerpo>".

Estos dilogos deben utilizarse con cuidado porque insertar cdigo o comandos
invlidos en tu pgina pueden generar serios problemas en toda la pgina web. Si
necesitas insertar el mismo cdigo exacto para todas la pginas de tu sitio web,
puedes usar el botn de cdigo HTML (encabezado) y cdigo HTML (cuerpo) en la
pestaa Pgina web de este dilogo, en vez de introducirlo para cada pgina individual
en la pestaa Pgina.

EFECTO DE TRANSICIN: escoge un efecto de transicin que se mostrar cuando un

visitante abra tu pgina web. Por ejemplo, si seleccionas una transicin fade para una
pgina, cuando un visitante haga clic en esa pgina, en vez de cargarse directamente,
aparecer gradualmente. Sin embargo, no puedes aplicar un efecto de transicin de
esta manera a una pgina externa, sino que debes usar la opcin Transicin de enlace
de la pestaa "Enlace" para hacerlo. Puedes aplicar los siguientes efectos de
transicin a una pgina:

Instantnea (por defecto) El contenido de la nueva pgina, capa o paso aparecer

directamente
Aparecer desde El contenido de la nueva pgina, capa o paso aparecer
desde diversas direcciones
Desaparecer desde El contenido de la pgina actual desaparecer en
diversas direcciones
Transicin El contenido de la nueva pgina aparecer de forma
gradual
Desaparecer en negro El contenido de la pgina actual cambiar a una
pantalla en negro y el contenido de la nueva pgina
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 pgina.
Separacin y aparicin 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 transicin
de entre 0 y 5 segundos.

Por defecto, cuando aplicas una transicin, los objetos solamente aparecern o
desaparecern desde la esquina de la pgina web. Si quieres que los objetos
aparezcan desde las esquinas de la ventana del navegador, en vez de desde las
esquinas de la pgina, desactiva la opcin de los bordes CLIP A LA PGINA en la
pestaa Pgina web (en la pgina 279) del dilogo de propiedades web.

www.magix.es
 Dilogo de propiedades web 285

Nota tcnica: las transiciones de pgina primero cargan la pgina de destino en un

iFrame oculto y luego revelan ese iFrame con el efecto visual. Luego, la pgina de
destino vuelve a cargarse de forma normal. Esta segunda carga de la pgina de
destino, generalmente no se nota, pero, dependiendo de la velocidad de la mquina
y de la versin del navegador que se utilice (especialmente los navegadores ms
antiguos), muchas veces la pgina parpadea un momento al final de la transicin de
pgina.

Pestaa Imagen

Fotos emergentes
Esta seccin de la PESTAA IMAGEN te permite aadir fotos emergentes y otras
caractersticas de la galera de fotos a tu pgina web. Simplemente importa tu foto y
utiliza la HERRAMIENTA DE SELECCIN para reducir el tamao correctamente de modo
que aparezca como una pequea miniatura de foto en tu pgina web. Luego, mientras
la foto todava est seleccionada, selecciona el campo foto emergente en esta
pestaa. Escoge el tamao que quieres dar a la foto emergente en el campo de ancho
(valor por defecto: 500 pxeles). Haz una vista previa de tu pgina y haz clic en la
miniatura de tu foto en tu pgina, ahora vers aparecer la ventana emergente con tu
foto.

Al activar la funcin de foto emergente en el campo de la pestaa IMAGEN , tambin se

selecciona automticamente la opcin correspondiente de la pestaa ENLACE. Esto es
286

porque con un clic sobre la foto vers 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 pestaa Enlace desaparecer.

Una gran ventaja de estas ventanas emergentes frente a las capas emergentes (tal
como se describen anteriormente en la seccin de la pestaa 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 mtodo es ms adecuado para presentar un gran
nmero de fotos en una pgina de galera, ya que en un primer momento slo se
cargan las pequeas miniaturas, permitiendo as que la pgina se cargue ms
rpidamente.

Observa que esta caracterstica funciona con otros objetos adems 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 restriccin.

Ttulo de la ventana emergente

Utiliza este campo para agregar un ttulo a la foto seleccionada, que se mostrar
sobre la foto emergente. Ten en cuenta que debes activar tambin esta opcin de
ttulo en el dilogo de opciones de foto emergente (ver a continuacin) porque, por
defecto, los ttulos no se muestran.

Opciones de la foto emergente

Haz clic en el botn OPCIONES para abrir el dilogo 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
 Dilogo de propiedades web 287

Opciones de la ventana emergente

Las siguientes opciones cambian la apariencia de la foto emergente.

OSCURECER PGINA MIENTRAS LA VENTANA EMERGENTE EST ABIERTA : con esta opcin
seleccionada, toda la pgina 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 pgina.

MOSTRAR SOMBRA DETRS DE LA VENTANA EMERGENTE : esta opcin coloca una

sombra detrs de la ventana de la foto emergente para que se destaque del fondo de
la pgina.

MOSTRAR TTULO DE LA IMAGEN : si has introducido texto de ttulo (lee ms arriba)

para cada una de tus fotos, esta opcin hace que el ttulo aparezca sobre la foto
emergente.

Ten en cuenta que el texto del ttulo es independiente del texto de subttulo que se
muestra debajo de la foto. Lee a continuacin para ms informacin sobre los textos
de subttulo.

Opciones de la galera
Las siguientes opciones activan las caractersticas de galera para tus fotos
emergentes.

MOSTRAR LOS CONTROLES DE NAVEGACIN DE LA GALERA : activa esta opcin para que
los controles de la galera se vean sobre la foto emergente.
288

Esto aparece arriba de la foto cuando se coloca el cursor del ratn sobre la foto.
Permite al visitante ver las otras fotos emergentes en la pgina 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 automtico en el que cada foto se muestra durante algunos segundos para
luego pasar a la siguiente.

MOSTRAR GUIN CINEMATOGRFICO AL FINAL DE LA FOTO: con esta opcin se ver una
cinta cinematogrfica 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 cinematogrfica, sin tener que cerrar primero la
ventana emergente de la foto.

INICIAR PASE DE FOTOS AUTOMTICAMENTE : activa esta opcin cuando quieras que se
inicie un pase de fotos cuando un usuario hace clic en tus fotos emergentes. Tambin
puedes escoger cuntos segundos debe mostrarse cada foto cuando el pase de fotos
est funcionando.

Ten en cuenta que slo las fotos incluidas en la galera de fotos son aquellas fotos que
se encuentran en la pgina actual que estn configuradas como ventanas emergentes.
Todas las otras fotos en tu pgina no aparecern en la galera, por lo que debes
asegurarte de usar la pestaa Enlace del dilogo de propiedades web para activar la
opcin foto emergente en todas las fotos que quieras que se incluyan en la galera.

Subttulos de imagen
De forma opcional puede mostrarse un subttulo debajo de cada foto emergente.
Introduce el texto del subttulo en este campo en la pestaa Imagen.

Observa que esta caracterstica funciona con otros objetos adems 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 restriccin.

www.magix.es
 Dilogo 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 pgina en lugar de la imagen si sta no est disponible por alguna razn.

Tipo de imagen web

Debido a la naturaleza de las pginas web HTML, la mayora de los objetos que ves y
puedes seleccionar en la pgina MAGIX Web Designer 11 Premium deben convertirse
en imgenes de mapas de bits durante el proceso de exportacin de tu pgina web.
Todo esto sucede de forma automtica si realizas una vista previa y la exportacin,
pero los controles de esta pestaa te conceden cierto control sobre cmo se crean
estas imgenes.

Recuerda que cada grupo, forma, encabezado, logotipo, foto, fondo de panel, etc. se
exporta por separado como imagen. Viendo cmo se agrupan los objetos en tu
diseo, puedes controlar cmo numerosas imgenes son exportadas para componer
tu pgina web. Por ejemplo, si tienes dos formas separadas en tu diseo que no estn
agrupadas conjuntamente, se exportarn como dos imgenes separadas. Puedes
agrupar las dos formas (Ctrl+G), as se exporta una sola imagen.

Este apartado sobre la pestaa Imagen te permite especificar cmo 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 exportarn como JPEG (suele ser el mejor formato para fotos) y otros objetos
se exportarn como PNG (suele ser el mejor formato para grficos). Las fotos que se
rotaron en la pgina 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 opcin apropiada. Si la opcin JPEG est seleccionada,
puedes tambin escoger la calidad JPEG para esta imagen. Una calidad superior
implica que el tamao del archivo JPEG es mayor.

Propiedades de MouseOver (animaciones web)

Las propiedades MouseOver forman parte del cuadro de dilogo ANIMACIONES WEB .
Al hacer clic en este icono, se abre la pestaa MouseOver del cuadro de dilogo
Animaciones web, lo que te permite establecer lo que debe suceder cuando un
visitante pasa el cursor del ratn sobre el objeto seleccionado. Entonces, por ejemplo,
puedes animar el MouseOver con una amplia seleccin de efectos, establecer un
texto popup o una capa completa de contenido cuando un visitante pase el cursor del
ratn sobre una foto u otro objeto de tu pgina web. Para ms detalles consulta
Animaciones web (en la pgina 431).
290

Pestaa Marcador de lugar

La pestaa Marcador de posicin de utiliza para aadir y editar manualmente los

widgets editables. Estos son widgets que insertas en tu pgina web al introducir
manualmente el cdigo HTML para el widget o al importar un archivo Flash o de
pelcula. En general, no debers utilizar la pestaa Marcador de lugar para los widgets
que agregues de la GALERA DE DISEOS , porque el cdigo y los archivos que hacen
que estos widgets funcionen se manejan automticamente. Consulta el captulo
Widgets de pgina web (en la pgina 408) para ms detalles.

www.magix.es
 Dilogo de propiedades web 291

Para convertir cualquier objeto normal en un marcador de lugar para un widget,

seleccinalo y abre esta pestaa del dilogo Propiedades web. Escoge si deseas que el
widget se base en cdigo HTML que has obtenido de un sitio web de widget, un
archivo Flash o un archivo grfico. Navega en busca del archivo o pega el cdigo
HTML. Haz clic en ACEPTAR y el objeto se convertir un marcador de lugar.

Esto significa que el objeto representa las dimensiones y la posicin del contenido que
has agregado, pero que al exportar tu pgina web, el objeto se sustituye con el cdigo
o archivo verdadero que has insertado.

Sin embargo, existe una forma ms sencilla de aadir archivos o cdigos a tu sitio.
Simplemente arrastra y suelta los archivos Flash o GIF animados desde el explorador
de archivos de Windows hasta tu pgina. Se generar automticamente una imagen
de marcador de posicin y se colocar en tu pgina. Una copia del archivo se aade a
la carpeta de soporte de tu diseo para que se exporte y publique con tu sitio. Al
exportar y publicar tu sitio, la imagen del marcador de posicin se sustituye por el
archivo verdadero que has importado.

De la misma forma, si has copiado cdigo HTML de la pgina web de widgets de un

tercero, puedes pegar el cdigo en MAGIX Web Designer 11 Premium (asegrate de
que te encuentres en la HERRAMIENTA DE SELECCIN 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 posicin que aparecer en tu pgina. Tambin puedes agregar un
marcador de posicin para el cdigo HTML directamente en el cuerpo o en el
encabezado de una pgina con un clic en los botones cdigo HTML (cuerpo) o cdigo
HTML (encabezado), que abrirn un dilogo en donde podrs pegar o editar cdigos
largos, de ser necesario.

Al exportar o publicar tu sitio, el marcador de posicin se sustituye por el cdigo

verdadero para que el widget funcione. Consulta el captulo Widgets de pgina web
(en la pgina 408) para ms detalles.

Reemplazar con Flash

Selecciona esta opcin para sustituir el objeto del marcador de lugar con una
animacin flash. Utiliza el botn Explorar para localizar el archivo Flash (.swf) que
quieres usar.

A continuacin , el archivo elegido se copiar automticamente al directorio de

compatibilidad para el diseo actual de modo que cuando exportes tu pgina web, el
archivo se incluir en el directorio _htm_archivos junto con todas las dems imgenes
generadas para tu pgina web. Lee el captulo Trabajar con documentos para obtener
informacin sobre los directorios de compatibilidad.
292

Reemplazar con un archivo grfico

Selecciona esta opcin si quieres insertar un grfico o una imagen en tu pgina web
en lugar del objeto del marcador de lugar (por ejemplo PNG, GIF u otro archivo de
imagen compatible con el web.). Utiliza el botn Explorar para seleccionar el archivo.

A continuacin , el archivo elegido se copiar automticamente al directorio de

compatibilidad para el diseo actual de modo que cuando exportes tu pgina web, el
archivo se incluir en el directorio _htm_archivos junto con todas las dems imgenes
generadas para tu pgina web. Lee el captulo Trabajar con documentos para obtener
informacin sobre los directorios de compatibilidad.

Reemplazar con cdigo HTML

Con esta opcin, puedes pegar cdigo HTML que has obtenido de otra seccin del
cuerpo o encabezado de tu pgina web, por ejemplo, entre las etiquetas
<body></body> o <head></head>. Por ejemplo, muchos sitios proveen widgets que
puedes agregar a tu pgina si pegas el HTML aqu. Sigue las instrucciones que ofrece
el proveedor. En la mayora de los casos necesitas agregar solamente cdigo al
cuerpo, pero algunos widgets requieren que incluyas algn tipo de cdigo en el
encabezado.

Tal como se mencion anteriormente, puedes simplemente pegar el cdigo HTML

directamente en la pgina en vez de insertarlo en este dilogo (siempre que te
encuentres en la HERRAMIENTA DE SELECCIN ). Al hacerlo de esta forma, aparecer
automticamente una imagen de marcador de posicin de aspecto similar al widget
verdadero, por lo que se recomienda utilizar este mtodo para insertar cdigo HTML.

Advertencia: debes tener cuidado e insertar solamente cdigo que sabes que es
seguro y que proviene de una fuente de fiar. El cdigo invlido o roto afectar tu
pgina web publicada porque MAGIX Web Designer 11 Premium simplemente
inserta el cdigo tal y como t lo suministras, sin modificar ni revisar, cuando
exportas tu pgina web.

Si utilizas mdulos de Xara (www.xaraonline.com), puedes pegar un snippet (trozo)

de mdulo en este campo para agregar tu mdulo a tu pgina web.

Si el cdigo HTML que introduces contiene una referencia a archivos externos que se
supone deben encontrarse en tu pgina web, debers copiar estos archivos externos
en la carpeta de soporte para tu diseo. Lee el captulo Manejo de documento (en la
pgina 73) para obtener informacin sobre las carpetas de soporte. Una vez en la
carpeta de soporte, los archivos se copiarn automticamente a la carpeta _htm_files
de tu sitio web al exportarlo. Por lo tanto, tambin es necesario asegurarte que
cualquier referencia a estos archivos en el cdigo HTML se encuentre en la ubicacin
correcta.

www.magix.es
 Dilogo de propiedades web 293

He aqu un ejemplo simple para explicarlo de forma ms clara. Supn que yo quiero
insertar una pequea pieza de cdigo HTML que aade una imagen en mi pgina
web. El cdigo HTML que yo agregue necesitar una referencia al archivo de imagen
en algn 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 pgina
web, la exportar al nombre "mipagina.htm". Esto significa que todas las imgenes
generadas para mi pgina web y una copia de "milogotipo.gif" que puse en la carpeta
de soporte, se exportarn al directorio "mipagina_htm_archivos". Por lo tanto, en el
cdigo HTML que inserto tengo que incluir una referencia al archivo de imagen en esa
ubicacin. Por lo tanto, puedo insertar:

<img src="mipagina_htm_archivos/milogotipo.gif" />

Observa que esto hace referencia al archivo de imagen en la ubicacin 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 pgina web cuando se publique la pgina.

Obviamente, si realmente solo quiero poner una imagen en mi pgina web, es mucho
ms fcil importar directamente la imagen a MAGIX Web Designer 11 Premium! Pero
esto es un ejemplo simple que muestra cmo agregar un cdigo HTML que contiene
una referencia a un archivo externo. Consulta Integracin de YouTube, Flash y otros
widgets (en la pgina 34) para ms ejemplos.

Aadir cdigo al encabezado de pgina

Algunos cdigos tienen que ir en el encabezado del cdigo HTML exportado (<head>
tag) y no en el cuerpo (<body> tag) como aparece por defecto.

Para ello, haz clic en el botn de cdigo HTML (encabezado) situado en el marcador
de posicin, en la pgina web o en la pestaa de pgina del cuadro de dilogo de
propiedades e introduce o copia el cdigo.

Objetos de marcador de lugar

El objeto de marcador de lugar en realidad est incluido en tu pgina web y puede
mostrarse al usuario en algunas circunstancias. Por ejemplo, si has aadido una
animacin flash y el usuario que visita tu pgina 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 ms avanzado que
slo un rectngulo negro! Podras utilizar una imagen esttica que se parezca al
contenido flash. O quizs podras 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

Animacin web

Haz clic en el icono ANIMACIN WEB para abrir el dilogo con el mismo nombre. Las
animaciones web te permiten tomar un objeto de tu documento web y crear
rpidamente una respuesta animada a una accin como MouseOver, un clic del ratn
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
pgina y tambin controlar todas estas animaciones con una amplia variedad de
efectos.

Para ms detalles consulta Animaciones web (en la pgina 431).

Objetos sticky y stretchy

Haz clic en el icono OBJETOS STICKY Y STRETCHY para abrir el dilogo de objetos sticky
y stretchy. El dilogo te permite seleccionar objetos que permanecern fijos en una
posicin en la ventana del navegador (sticky). Tambin puedes configurar objetos
para que se extiendan para cubrir el ancho o alto de la ventana (stretchy).

Consulta Objetos sticky y stretchy (en la pgina 306) para ms informacin.

Pestaa Publicar

En la pestaa PUBLICAR configuras o cambias la configuracin, lo que te permite

publicar tu pgina en Internet. Sin embargo no necesitas visitar este dilogo antes de
publicar: la operacin de publicacin te indicar que introduzcas los detalles
requeridos si no los has especificado todava. Consulta el Captulo de publicacin para
ms informacin.

www.magix.es
 Dilogo de propiedades web 295

Haz clic en el botn CONFIGURACIN para conformar la configuracin tanto de

MAGIX MUNDO ONLINE como de OTROS ALOJAMIENTOS WEB (VA FTP).
Haz clic en el botn GUARDAR EN EL PERFIL para guardar los detalles actuales en
un perfil.
Selecciona la opcin que incluye tu pgina en la galera de pginas de usuarios
de Web Designer marcando INCLUIR MI PGINA WEB EN LA GALERA DE USUARIOS .
Marca la casilla PUBLICACIN RPIDA (SOLO ARCHIVOS CAMBIADOS) para volver a
publicar solo los nuevos archivos en tu pgina web.
Marca la casilla SALVAR CONFIGURACIN DE PUBLICACIN EN EL DOCUMENTO si
deseas mantener los detalles FTP para este documento en particular.
Marca la casilla GUARDAR CONTRASEA EN EL DOCUMENTO para guardar la
contrasea de FTP en el documento (no recomendado para uso normal y no
disponible para MAGIX ONLINE WORLD).

Consulta el captulo principal Publicar pgina web (en la pgina 318) para tener toda
la informacin sobre como publicar tu pgina.
296

Pestaa Analytics

Pestaa Google Analytics con una muestra de cdigo de seguimiento.

La pestaa Google Analytics te ofrece una forma rpida y fcil de aadir un cdigo de
seguimiento a tus pginas permitindote controlar el trfico de tus pginas web
usando las herramientas de informacin de Google.

Necesitas tener una cuenta con Google para usar las funciones de Analytics: haz clic
en el botn "PGINA WEB DE ANALYTICS" para visitar la pgina y crear una cuenta, si
aun no tienes una, o para administrar una cuenta existente.

Sigue las siguientes instrucciones para obtener tu cdigo de seguimiento y cpialo en

la pestaa Analytics. Ahora podrs hacer el seguimiento de datos a travs de la
pgina web Google Analytics de tu pgina publicada.
www.magix.es
 Diseo web adaptativo 297

Diseo web adaptativo

Acerca de RWD
Con el uso en aumento de dispositivos mviles para acceder a Internet, tambin
aumenta la demanda de diseos de sitios web hechos a la medida de los formatos de
mviles y tabletas.
Aunque los dispositivos mviles tales como telfonos tienen navegadores web
excelentes capaces de visualizar cualquier pgina web, un sitio web optimizado para
mviles no debera requerir del uso del zoom para ver el texto. Esto significa
normalmente que el contenido principal ser una nica columna de tamao un punto
mayor para que se pueda leer mejor en el mvil de un vistazo. Las pginas web en los
mviles normalmente tienen un contenido reducido y se pueden navegar con toques
de un solo dedo para desplazar y navegar.
Podras crear dos sitios web separados, uno diseado para mviles de pantalla
estrecha y otro para pantallas de escritorio tradicionales ms anchas, pero repetir el
contenido en dos pginas web separadas puede ser tedioso y una prdida de tiempo,
especialmente si tienes que hacerlo cada vez que actualizas los textos o imgenes.
El diseo web adaptativo (RWD por sus siglas en ingls) es una tcnica que permite a
tus sitios web responder de forma dinmica al tamao de la pantalla. En lugar de
tener dos pginas web separadas, es decir, dos pginas HTML separadas, tendrs una
sola pgina web que puede cambiar su diseo dependiendo del tamao de la pantalla
(y la resolucin) del dispositivo que se est usando para ver la pgina 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 mviles. La columna de texto es ms
estrecha y las imgenes y los elementos de pgina estn organizados para adaptarse a una
pantalla ms estrecha.
298

"Retina" adaptativa o control de resolucin HiDPI

Los dispositivos mviles y tabletas se diferencian de la mayora de navegadores web
de escritorio en que admiten grficos de una resolucin mayor. Web Designer admite
esto de forma totalmente automtica y producir tanto imgenes de resolucin
normal como Hi-DPI o Retina para todos los grficos y fotos. La pgina web utiliza
entonces de forma inteligente la versin adecuada de la imagen dependiendo de la
resolucin del dispositivo de navegacin.

Los navegadores ms viejos como IE8 y anteriores no admiten RWD, por lo que solo
mostrarn la variante principal de tu sitio web.

Variantes mltiples
Crear sitios RWD puede llegar a implicar una programacin compleja de Javascript.
Pero al ser Web Designer una herramienta destinada a diseadores de programacin
cero, el usuario todava tiene todo el control para el diseo web espontneo y
totalmente libre: tambin puede crear mltiples variantes del mismo sitio web.
Puedes crear una variante diseada para dispositivos mviles de pantallas estrechas,
quiz otro diseo para tabletas intermedias de pantalla pequea y otra variante para
un escritorio de pantalla ancha tradicional.

Lo importante es que el contenido, es decir, el texto, las fotos, los grficos y los
esquemas de colores, se comparten entre las variantes. El segundo punto importante
es que las variantes de capa mltiple para cada pgina no son archivos separados,
sino que forman parte de un solo archivo HTML que puede cambiar de forma
dinmica e instantnea 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 tamao y recolocar elementos en la pgina y esto se comparte entre las
variantes. Edita el texto para la variante de mvil estrecha y el texto se actualiza para
las otras variantes. Tambin puedes elegir actualizar el estilo de texto (en la pgina
227) de una variante y que se apliquen los cambios solo a esa variante. O puedes
decidir que quieres diferentes contenidos o grficos en una variante: las variantes de
mviles normalmente tienen un contenido reducido.

Cuando aades o borras una pgina en una variante, automticamente crea o elimina
la pgina en otras variantes. As que tu pgina siempre tiene los mismos arreglos de
pgina en todas las variantes.

Hay que poner los nombres de las pginas web en orden para que se puedan
compartir a travs de las variantes. Si no se le pone nombre al sitio, entonces se le
aplica uno automticamente.

www.magix.es
 Diseo web adaptativo 299

Crear pginas web RWD desde las plantillas

Con mucho la forma ms sencilla de comenzar a utilizar variantes es usar uno de los
diseos de plantillas de pginas web de la GALERA DE DISEOS o del CATLOGO 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 pgina web para
abrirla y editarla.

Cuando abras una plantilla vers dos pestaas de documento, una ser la del
documento principal del sitio web llamada variante principal y otra plantilla ms
estrecha llamada variante de mvil. Web Designer muestra cada variante en una
pestaa separada, de forma que puedes cambiar entre las variantes de forma fcil y
rpida. Te puede ser de ayuda organizar tus documentos web usando la opcin 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 dilogo
VARIANTES DE PGINA WEB. Cualquiera de los siguientes pasos te permitir hacerlo:

Haz clic en "HERRAMIENTAS" > "VARIANTES DE PGINA WEB" > "VARIANTES DE

PGINA WEB" .
Haz clic derecho en la pestaa de documento y seleccionar "VARIANTES DE
PGINA WEB" para abrir el dilogo y tambin para ver tus variantes.
Haz clic derecho en cualquier lugar del rea de trabajo y selecciona "VARIANTES
DE PGINA WEB" > "VARIANTES DE PGINA WEB" para ver el dilogo.

Variantes de pgina web

Haz clic en el botn CREAR y elige un ancho de diseo en pxeles. Las dos variantes
arriba describen pginas web d 760 pxeles para la variante principal y una variante
de mvil que tiene por defecto un ancho de 480 pxeles. Lo que sucede es que el
navegador web que se visita con un ancho de 620 pxeles o mayor ver la variante
mayor mientras que un navegador con un ancho menor de 620 pxeles ver la
variante de mvil.
300

Puedes ver y editar las dimensiones de las variantes existentes haciendo clic en el
botn PROPIEDADES... .

Cuando creas una nueva variante, todo el contenido de la pgina web principal
aparece en su mayora inalterado, pero el tamao de pgina cambia y el fondo de
pgina se ajusta. Depende de ti si quieres volver a ajustar el diseo como desees para
esta capa. Puedes mover los elementos alrededor de la pgina libremente, reducir el
ancho de las columnas de texto, cambiar el tamao y la posicin de las imgenes y
tendrs que hacerlo para todas las pginas de tu variante de sitio web.

Puedes cambiar el ttulo y el ancho de pxel de una variante en cualquier momento

haciendo clic en los botones PROPIEDADES y luego ACTUALIZAR del dilogo.

Nota: el punto de inflexin 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 ms estrecho y en el caso de los anchos por encima, mostrar el ms
ancho. Tenlo en cuenta tambin porque la mayora de los dispositivos mviles
siempre tratan de ajustar el contenido del navegador a la pantalla, no importa que tu
pgina web sea ms ancha que los pxeles de su pantalla: se reducir para adaptarlo
al navegador.

Compartir a travs de variantes

Cuando creas una variante nueva, la mayora del contenido se comparte o se
comparte en tiempo real a travs de todas las variantes, pero el tamao y la posicin
de ese contenido es propio de cada variante.

Si editas el texto, se cambiar en todas las variantes.

Si cambias el tamao de los objetos, el cambio se aplicar a una sola variante
(es probable que quieras que los objetos tengan diferentes posiciones y
tamaos 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 tamao de
imagen, la rotacin o la posicin 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 tamao y posicin de las fotos en la variantes, sino tambin
cambiar su relacin 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
 Diseo web adaptativo 301

Esta foto tienen un marcador de doble

lnea en el ngulo superior, lo que
indica que est compartida en tiempo
real en una o ms variantes.

Puedes modificar el tamao, 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 cambiarn todas las
variantes.

Cuando creas un objeto nuevo (por ejemplo un rea de texto, una foto o un grfico)
en principio no se comparte entre las variantes. Si quieres compartirlo, usa el men
"HERRAMIENTAS" > "VARIANTES DE PGINA WEB" o tan solo haz clic derecho en el
elemento y selecciona "VARIANTES DE PGINA 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 tambin te da la opcin de borrar el
objeto de todas la variantes.

Nota tcnica: si tienes variantes diferentes de fotos, es decir, diferentes tamaos,

recortes o posicin de relleno, entonces Xara tiene que crear mltiples versiones de
la foto para la pgina web publicada. Sin embargo esto no tiene costes de
rendimiento (no ralentiza tu pgina web), ya que el navegador web carga en un
principio la versin correcta y luego, en el fondo, descarga las imgenes de las otras
variantes. Esto significa que la versin inicial que ests mirando (en el mvil o en la
versin de escritorio) se descargar tan rpido como pueda, pero que si cambias el
ancho de tu navegador o la orientacin, cambiar de forma inmediata a la otra
versin.

Variantes y objetos repetidos

Cuando los objetos repetidos (en la pgina 143) como las barras de navegacin, los
encabezados y los pies de pgina aparecen en varias variantes, no pueden
compartirse a travs de ellas. En lugar de eso, cada variante tiene su propio conjunto
de objetos repetidos separado.

Variantes y barras de navegacin

Es probable que quieras un diseo de barra de navegacin en una variante ms
estrecha. Las barras de navegacin en cada variante son independientes, de modo
que puedes adaptarlas como sea necesario, incluido el cambio de diseo de la barra,
arrastrando un diseo de barra de navegacin de la GALERA DE DISEOS y soltndolo
en la barra existente en la variante que quieres cambiar. Puede que quieras, por
ejemplo, una barra horizontal para pginas web anchas y una vertical para
dispositivos estrechos.
302

Una solucin eficiente de espacio para las barras de navegacin en una variante de
pgina web para mviles estrechos es tener un solo botn de navegacin con un
men de enlaces a otras pginas en el sitio web en lugar de una barra con un botn
para cada pgina. Ver Barras de navegacin de botn nico (en la pgina 387) para
ms detalles.

Publicacin de variantes
Publicar tu pgina web con variantes es fcil y no difiere de publicar una pgina web
normal. Tu pgina web es capaz de determinar la resolucin del dispositivo de
visualizacin de forma automtica y proporcionar la variante adecuada en relacin al
ancho que tenga.

Puedes probarlo cambiando el ancho de tu navegador web cuando hagas la vista

previa de tu pgina: hazlo ms estrecho y vers como cambia instantneamente para
mostrar la variante mvil de tu pgina web.

www.magix.es
 Supersites 303

Supersites

Sobre las Supersites

Los navegadores web modernos admiten muchos efectos HTML5 y CSS3 avanzados,
permitiendo la creacin de pginas web mucho ms dinmicas y atractivas
visualmente.

Las Supersites utilizan estos efectos para permitirte aadir transiciones de pgina
dinmicas animadas y opciones de visualizacin para tus pginas web cuando un
usuario va haciendo clic al navegar por tu pgina web..

Las animaciones de Supersites implican la aceleracin de hardware, que es admitida

por casi todos los navegadores modernos, incluyendo aquellos de telfonos y
tabletas, para asegurarse una animacin rpida y fluida.

Mientras las Supersites no resultan adecuadas para las pginas web complejas y
grandes, son especialmente apropiadas para las pginas pequeas o para
documentos web, presentaciones y para cualquier ocasin en que se requiera un
contenido de estilo diapositiva. Las presentaciones (en la pgina 396) se publican
siempre como Supersites.

Las opciones de visualizacin verticales u horizontales permiten al usuario deslizarse

a travs de las pginas usando un ratn o incluso con toques de pantalla a travs de
las pginas cuando se usa una tableta u otro dispositivo mvil. Las pginas se
presentan como una lista de desplazamiento nica. Alternativamente una seleccin
de transiciones de pgina ofrece una amplia gama de transiciones entre las que elegir.

Habilitar Supersites
Abre el dilogo OPCIONES DE EXPORTACIN WEB para ver las opciones
Supersite."HERRAMIENTAS" > "OPCIONES DE EXPORTACIN WEB". O tambin haz clic
derecho en tu pgina y abre el dilogo PROPIEDADES WEB y haz clic en "PGINA WEB" >
"OPCIONES DE EXPORTACIN WEB".
304

Dilogo de opciones de exportacin web

Elige la opcin SUPERSITE y selecciona. Puedes seleccionar las opciones de

desplazamiento VERTICAL u HORIZONTAL o las TRANSICIONES DE PGINA .

Si escoges una opcin de desplazamiento VERTICAL u HORIZONTAL , puedes

especificar el espacio entre las pginas individuales en unidades de pxel (1 a 1000 px
con una distancia por defecto de 8 px). La pequea ventana de vista previa mostrar
tu opcin para que tengas una idea del resultado final.

Para aplicar una transicin de pgina, selecciona TRANSICIONES DE PGINA y elige

entonces un EFECTO DE TRANSICIN del men desplegable. Puedes controlar la
velocidad de transicin y tambin que las pginas tengan la opcin ADAPTAR TAMAO
A LA PANTALLA , de modo que se redimensionen de forma automtica para adaptarse
a la ventana del navegador. El efecto de transicin que elijas se aplicar a todas las
pginas de tu sitio web. Nuevamente, la pequea ventana de vista previa se
actualizar para mostrar tu eleccin.

Si quieres aadir una transicin especfica a una pgina individual, entonces ve a la

pestaa PGINA en el DILOGO DE PROPIEDADES WEB y aplica all la transicin. La
configuracin de las transiciones a nivel de pgina tiene prioridad frente a aquellas
configuraciones para el sitio web completo en las OPCIONES DE EXPORTACIN WEB .

Ten en cuenta que la opcin ADAPTAR TAMAO A LA PANTALLA solo funciona

realmente bien para las pginas cortas y donde las pginas de tu sitio web tengan el
mismo alto y ancho. Si usas esta opcin con pginas largas, el resultado no es bueno
porque el navegador encoger la pgina 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 pgina web en un navegador web

separado para ver si las animaciones para la transicin 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 botn Vista previa
de pgina 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.

Seleccin de iconos de navegacin en la ventana de vista previa de pgina web.

306

Objetos sticky y stretchy

Objetos sticky
Algunos sitios web tienen elementos de pgina que permanecen fijos en la pantalla y
se desplazan en ella cuando navegas hacia abajo, como los controles de navegacin 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 podrs, por ejemplo, contar con acceso directo a la
navegacin de pginas sin tener que volver hacia arriba en la pgina.

Puedes convertir cualquier objeto en "sticky", como un grfico, un mapa de bits (o

foto) o un objeto de texto. Tambin puedes aadir animaciones a los objetos sticky.
Para ms informacin consulta Animaciones web (en la pgina 431).

Enlaces externos ubicados como objeto sticky en el extremo derecho de la ventana de navegador.

Para convertir un objeto en sticky o stretchy, seleccinalo primero y luego

haz clic en el icono de PROPIEDADES WEB

o selecciona la opcin 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 dilogo PROPIEDADES DEL OBJETO STICKY/STRETCHY . Puedes activar o

desactivar la funcin con la casilla.

www.magix.es
 Objetos sticky y stretchy 307

Dilogo de propiedades del objeto sticky

Para los objetos sticky en la mitad superior de tu pgina, la distancia entre el objeto y
el extremo superior de la pgina determina la distancia desde la parte superior de la
ventana del navegador en la pgina publicada. Entonces, si colocas el objeto a 20 px
desde el extremo superior de la pgina, estar fijo a 20 px del extremo superior en la
ventana del navegador y el contenido de la pgina se desplazar debajo de l.

Si el objeto est ms cerca del extremo inferior de la pgina 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 pgina, el objeto estar siempre a 20 px del
extremo inferior de la ventana del navegador.

Todos los objetos sticky que coloques en tu pgina (o que se superpongan levemente
con la pgina) estarn centrados horizontalmente en la ventana del navegador, para
que siempre aparezcan en la pgina sin importar el ancho de la ventana del
navegador, ya que la pgina tambin 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, colcalo sobre la derecha.

Esta es una ilustracin de elementos colocados sobre los extremos de una pgina
tpica o respecto de ellos.
308

La etiqueta describe el lugar en donde aparecer un elemento colocado en esa ubicacin de la

pgina cuando se visualice en la ventana del navegador.

As aparecer la pgina en la ventana del navegador.

Los elementos sticky en general permanecen en la parte superior del resto de la

pgina, por lo que estarn ordenados para que se encuentren delante de todo el
contenido. Sin embargo, puedes colocar objetos sticky detrs del contenido de la
pgina, si los colocas en la capa de fondo del tablero de dibujo (en la pgina 315).

Haz vista previa de la posicin 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 diseos en los que no existen lmites evidentes
entre las pginas y el fondo de la pgina cubre toda la ventana del navegador y se
extiende para cubrir todo el ancho del navegador. Puedes hacer que cualquier
rectngulo o imagen se extienda para cubrir la ventana del navegador tanto en
sentido horizontal como vertical, si utilizas el dilogo Stretchy (el mismo dilogo que
los controles sticky). Estos elementos stretchy estn pensados como fondos de
pgina y, por lo tanto, aparecen detrs del otro contenido de la pgina. Es posible que
quieras colocarlos en una de las capas de fondo (en la pgina 311).
Sin embargo, tambin puede que quieras que un objeto sticky tenga el ancho o altura
completos, por lo que los objetos stretchy que tambin son sticky aparecern delante
del contenido de tu pgina principal.

Por ejemplo, es posible que quieras colocar un encabezado sticky sobre el extremo
superior de tu pgina web con una barra de navegacin sticky sobre l.

El navegador tiene un encabezado stretchy y sticky que cubre la parte superior de su ventana. El
contenido de la pgina 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 dilogo. En la mayora de los casos querrs que un objeto
stretchy se redimensione para que se ajuste a la ventana del navegador, por lo que
escogers la opcin para escalar. Esto funciona muy bien con fotos y rectngulos con
relleno liso.

Si usas un rectngulo con un relleno con textura, querrs utilizar "mosaico" en lugar
de la opcin escalar, para que la textura tenga la misma apariencia en cualquier
ventana de navegador. En estos casos, selecciona la opcin mosaico. Si tienes un
relleno con gradacin vertical, tambin debers elegir la opcin mosaico.

Notas de uso: se supone que extenders nicamente rectngulos e imgenes

rectangulares. La caracterstica stretchy no ser til con otras formas.

Cambio de tamao 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 relacin de aspecto de la foto no se alterar jams
porque el resultado sera muy pobre).

Si quieres utilizar una foto como elemento stretchy, amplalo al ancho completo de la
pgina y luego selecciona ANCHO COMPLETO en el cuadro de dilogo
STICKY/STRETCHY . Luego podrs decidir si quieres que la imagen se ample respecto a
la parte superior, al centro o a la parte inferior, usando los controles provistos. La
opcin stretchy ALTURA COMPLETA funciona de la misma manera pero para las
imgenes 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 resolucin: Es necesario que la foto sea una imagen de alta resolucin (en la
pgina 327) porque se ampliar para adaptarse al ancho del navegador, lo que
podra ser un tamao de pantalla de alta definicin de aproximadamente
2000 pxeles de ancho. Por lo que si utilizas una imagen de resolucin baja o media,
el resultado ser una imagen borrosa cuando se la ample al ancho mximo.

www.magix.es
 Objetos sticky y stretchy 311

Combinaciones de objetos sticky y stretchy

La tabla muestra qu tipos de objetos funcionan con cules combinaciones sticky y
ancho/altura (stretchy).

Tipo de objeto Sticky Ancho/Altura

Texto S No
Imgenes (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 pgina S S
Objetos en la capa de fondo de tablero de S S
dibujo
Animaciones de aparicin de objetos S No
Barras de navegacin S No
Objetos en capas popup S S

Importante: Algunos widgets de la versin 10 de la galera no son compatibles con las

nuevas caractersticas de animacin y sticky si se utilizan en la misma pgina o en el
mismo supersite, por lo que es probable que debas reemplazarlos con las versiones
actualizadas de la galera de diseos. Haz clic aqu
http://support.xara.com/index.php?/Knowledgebase/Article/View/816/ para ms
informacin en el sitio de asistencia.
312

Fondos de pgina web

La mayora de diseos de pgina en la GALERA DE DISEOS 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 pgina. Sobre l est el fondo de pgina
con todos los otros elementos que constituyen la pgina web.

Por defecto las plantillas de la galera de diseo contienen una variante principal y una
mvil dentro del mismo documento web.

Fondo del tablero de dibujo o del navegador

Fondo de pgina

Configurar los colores del fondo de pgina o tablero de dibujo

Cuando creas un nuevo documento en blanco ("ARCHIVO" > "NUEVO" ) la pgina es
transparente (sin color) por defecto, por lo que tan solo vers el color del tablero de
dibujo tras ella, que es blanco por defecto. Esta rea de pgina es donde colocas todos
los elementos de tu pgina web. Tambin vers un contorno gua rectangular suave
que muestra los lmites de la pgina sobre el tablero de dibujo. Puedes desactivar
esta gua si quieres (haz clic derecho en la pgina y desactiva "FONDO DE PGINA" >
"MOSTRAR TAMAO DE PGINA".

Si arrastras un color desde la lnea de colores al tablero de dibujo y lo sueltas, todo el

fondo de la pgina adoptar ese color. Sucede esto porque el fondo de pgina es por

www.magix.es
 Fondos de pgina web 313

defecto transparente, reflejndose as el color del tablero de dibujo subyacente. Y esto

es exactamente lo que vers en el navegador cuando realices una vista previa de tu
pgina.

Sin embargo, tambin puedes configurar el tablero de dibujo en un solo color, tal
como se describe ms arriba, y luego fijar el rea alrededor de la pgina en otro color.
Tan solo suelta un color sobre el fondo de pgina para configurar su color. Ahora, al
hacer la vista previa de tu pgina vers que el color de fondo de la ventana del
navegador tiene el color del tablero de dibujo y el fondo de pgina cuenta con su
propio color.

Puedes utilizar el editor de colores para modificar los colores. Haz clic derecho sobre
la pgina y selecciona "FONDO DE PGINA" > "EDITAR COLOR DE PGINA" para abrir el
editor de color. Entonces podrs editar el color de la pgina. 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 pgina a su color transparente por defecto, haz clic
derecho en el fondo de pgina web y selecciona "FONDO DE PGINA" > "RESTABLECER".

Si tienes ms de una pgina en tu documento de pgina web y quieres aplicar un

fondo y colores del tablero de dibujo globalmente, es decir, en cada pgina de tu
documento de sitio web, puedes hacerlo fcilmente. Haz clic derecho sobre el tablero
de dibujo o sobre el fondo de pgina y selecciona COPIAR FONDO DE TABLERO DE
DIBUJO o COPIAR FONDO DE PGINA y selecciona entonces PEGAR TABLERO DE
DIBUJO/FONDO DE PGINA EN TODAS LAS PGINAS.

Fondos de plantilla y cambio de color de fondo

MAGIX Web Designer 11 Premium te permite arrastrar y soltar una gama de fondos
de pgina diseados previamente desde la GALERA DE DISEO directamente en tu
documento web. Elige entre la seleccin de fondos del apartado FONDOS DE PGINA
WEB de la galera. Puedes personalizar las texturas con tus propios colores
arrastrndolos desde la lnea 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 sera en el caso de que estuvieras trabajando con uno de los
temas de plantillas prediseadas para pginas web, o con colores que hayas
nombrado previamente, o incluso podran ser colores locales si estuvieras cambiando
tu propia seleccin de color) Consulta "Reemplazar colores" para ms informacin.

Ten en cuenta que cuando arrastres uno de los fondos de pgina web disponibles
sobre el fondo del tablero de dibujo, reemplazar todos los objetos que estn
actualmente en la capa del tablero de dibujo, y a este respecto es una operacin
destructiva.

Fondos fijos no desplazables

Normalmente, si tienes una pgina 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
pgina permanece en la misma posicin en relacin al fondo. Pero puede fijar el fondo
para que no se desplace con el contenido de la pgina. 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, asegrate de que tu pgina es suficientemente larga
como para que el navegador muestre la barra de desplazamiento).

www.magix.es
 Fondos de pgina 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 prediseado de la galera de diseos, es muy fcil de hacer.

Primero, importa la foto o textura en tu documento, tal y como lo haras para subirla a
tu pgina web. Entonces haz clic en la foto y escoge entre CONFIGURAR PGINA COMO
FONDO o CONFIGURAR TABLERO DE DIBUJO COMO FONDO , dependiendo de cual quieras
configurar.

Segmentacin
En funcin de la naturaleza y tamao de la imagen, puede que quieras que la imagen
se repita a modo de mosaico para rellenar el fondo. Para cambiar esta configuracin,
haz clic derecho en el fondo de pgina o de tablero de dibujo (dependiendo de nuevo
de lo que quieras cambiar) y selecciona o desbloquea la opcin "mosaico" en el
submen Fondo de pgina/ 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 opcin ms. Puedes hacer que la foto cambie de tamao en
relacin al tamao de la ventana del navegador del visitante. Tan pronto como la
ventana de navegador cambie de tamao, la foto lo hace tambin 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 pgina o de tablero de

dibujo
Si abres la GALERA DE PGINAS Y CAPAS vers tanto la CAPA DE FONDO DE PGINA
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
GALERA DE PGINAS Y CAPAS y realizar cierto tipo de edicin limitada para
personalizar el fondo de tu pgina o tablero de dibujo. Tan solo haz clic en los
smbolos 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 pgina, habrs visto un
rectngulo que qued seleccionado (mira en la barra de estado) cuando hiciste clic en
el fondo de pgina. Ahora puedes editar de forma limitada este rectngulo, insertarle
un relleno con gradacin con la HERRAMIENTA DE RELLENO o redondear sus esquinas
con la HERRAMIENTA DE RECTNGULO .

Si has colocado elementos en el tablero de dibujo (posiblemente tengas grficos,

fotos u otros trabajos aun no terminados que no quieras que aparezcan como parte
de tu documento web) estos elementos no aparecern cuando hagas una vista previa
de la pgina web. Si quieres que aparezcan como parte del fondo, entonces muvelos
hasta la capa FONDO DE TABLERO DE DIBUJO.

Las dos estrellas estn sobre la capa del tablero de dibujo y por lo tanto aparecen como parte de
la pgina 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, vers 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 diseo web adaptativo

Con un sitio web de diseo web adaptativo (en la pgina 297), el color principal o el
diseo del fondo de tablero de dibujo (el rea alrededor de la pgina que determina el
fondo de la ventana del navegador cuando se publica la pgina) puede cambiar de
una variante a otra, y cada pgina y cada variante de pgina se exporta con su propio
rectngulo de tablero de dibujo.

Las excepciones a esta regla son los Supersites (en la pgina 303) verticales y
horizontales. Como puede mostrarse nicamente un fondo, en la primera pgina 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 tambin entre las variantes de las pginas. As que, por ejemplo,
www.magix.es
 Fondos de pgina web 317

puedes tener una forma superpuesta en el borde de la pgina y esta puede colocarse
todava de forma diferente en cada variante u omitirse en algunas.

Desplazamiento de la parte superior de la pgina

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

Para agregar un desplazamiento, debes cambiar el origen de la pgina. Generalmente,

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

Puedes cambiar el origen de dos formas. La forma ms sencilla es abrir el dilogo

HERRAMIENTAS > OPCIONES y en la pestaa CUADRCULA Y REGLA aumentar el valor de
la coordenada Y del punto de origen. En general, esto est configurado como el
tamao vertical de tu pgina, por lo que debes aumentar el tamao del margen de
desees ver. Entonces, por ejemplo, si tu pgina tiene 700 pxeles de alto, cambia el
valor Y de la coordenada de origen de 700 a 720 para agregar un desplazamiento de
20 pxeles.

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 botn de
cruce, ubicado en el lugar en que la regla vertical se cruza con la horizontal, en la parte
superior izquierda de lienzo. Ahora, ests desplazando por la posicin original, por lo
que coloca la distancia vertical apropiada sobre la esquina izquierda superior de tu
pgina.

Cambiar la posicin horizontal del origen no tiene efecto en la posicin horizontal de

tu pgina, por lo que no deberas modificarla.
318

Publicar pgina web

Publicacin al sitio web TaskPilot M

Para subir tu pgina web a Internet de forma instantnea 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 todava 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 utilizarn
TaskPilot. Los usuarios de MAGIX Online World deben hacer clic en PUBLICAR EN UN
ALOJAMIENTO WEB ALTERNATIVO... y luego seguir las instrucciones del dilogo "MAGIX
ONLINE WORLD" > "CONFIGURACIN" .

Selecciona "ARCHIVO" > "PUBLICAR PGINA WEB " o haz clic en el icono
publicar en la barra de herramientas de la pgina web.

La primera vez que hagas esto vers aparecer el dilogo de inicio de sesin de
TaskPilot.

Inicia sesin con tu nombre de usuario y contrasea TaskPilot: se te habr

suministrado ya con la compra o al registrar Web Designer en la pgina web de
MAGIX. Otros usuarios pueden hacer clic en el botn REGISTRO GRATUITO para

www.magix.es
 Publicar pgina web 319

obtener un nombre de usuario y contrasea para MAGIX de forma inmediata. Puedes

optar por no cerrar sesin, lo que significa que cuando salgas de Web Designer y
vuelvas a entrar, no debers volver a iniciarla.

Una vez que hayas iniciado sesin vers el siguiente dilogo:

Selecciona la direccin de tu pgina web en el men desplegable. Tambin puedes

introducir el nombre de una subcarpeta, p. ej., "pgina 1", y vers cmo se aade al
final de tus direcciones web en el campo superior. Te ser til si quieres publicar
varias pginas en la misma cuenta de TaskPilot: puedes poner cada una en una
subcarpeta diferente. Tambin es conveniente si quieres aadir una contrasea para
proteger una carpeta.

Haz clic en PUBLICAR . Tu pgina web se publicar y vers la ventana de transferencia

de datos que te indica el progreso de la publicacin. Cuando la publicacin haya
terminado, podrs navegar por tu pgina web a travs del enlace que aparece en la
ventana de transferencia de datos. Publicar en TaskPilot genera automticamente un
mapa de bits que vers como un archivo mapadebits.xml en tu espacio web de
TaskPilot. Es una lista de las pginas en tu sitio web y ayuda a los buscadores a
encontrar y hacer una lista de todas las pginas de tu sitio.

El botn PROTECCIN POR CONTRASEA te lleva a TaskPilot, donde podrs controlar el

acceso a carpetas configurando las contraseas. Puedes crear una lista de contactos
que podrs organizar en grupos de usuarios. Quienes deseen visitar el rea de
proteccin por contrasea tendrn que facilitar una direccin de correo electrnico y
una contrasea para poder acceder.

El botn CENTRO DE CONTROL te llevar a TaskPilot, donde podrs administrar tu

cuenta as como navegar, ver y eliminar archivos que hayas cargado en tu espacio
web.

Haz clic en el botn NUEVA DIRECCIN WEB si quieres elegir una direccin web
diferente para tu pgina 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 aparecern en "Tu pgina web" en la lista
desplegable superior cuando vuelvas a publicar. Utiliza la opcin "Actualizar" de esa
lista para actualizarla en caso de que no incluya todas las direcciones que esperabas
ver.
320

Publicacin en un alojamiento web alternativo

Si no quieres publicar en TaskPilot, tan solo selecciona PUBLICAR EN UN ALOJAMIENTO
WEB ALTERNATIVO... del cuadro de dilogo que aparecer cuando hagas clic en el
cono de publicacin en la barra de herramientas superior.

As se abrir la pestaa PUBLICAR del dilogo Propiedades de web donde puedes

configurar los detalles FTP de una empresa alternativa de alojamiento web.
Tambin 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
ingls) tambin pueden publicar a travs del cuadro de dilogo CONFIGURACIN DE
MAGIX ONLINE WORLD .

Debers obtener los detalles FTP de tu empresa de alojamiento web. Estos son:

Direccin de alojamiento
Nombre de usuario
Contrasea
Ruta completa de carpetas (incluidas las subcarpetas de ser necesario) que tu
empresa de alojamiento web te exige para la publicacin.

Pestaa de publicacin del cuadro de dilogo de propiedades web

www.magix.es
 Publicar pgina web 321

1. Elige en que alojamiento FTP deseas publicar. En este caso escogers OTROS
ALOJAMIENTOS WEB (VA FTP) .
2. Haz clic ahora en CONFIGURACIN... para personalizar tu configuracin de FTP.
Se abrir el siguiente dilogo...

Dilogo de configuracin de otros alojamientos web

1. Elige cmo quieres conectarte en el men desplegable: las opciones son FTP o,
los dos protocolos ms seguros, FTPS o SFTP.
2. En el campo Direccin FTP del alojamiento, introduce la direccin FTP de tu
alojamiento web. Suele ser el mismo nombre de tu dominio, si lo tienes. Por
ejemplo, para usuarios de MAGIX Online World sera Ftp.MAGIX-online.com.
3. En el campo "Nombre de usuario FTP", introduce tu nombre de usuario.
4. En el campo Contrasea FTP, introduce tu contrasea FTP.
5. El campo opcional "Subcarpeta" permite publicar la pgina web en una
subcarpeta. Si creas una subcarpeta aqu, todas las pginas del sitio web se
publicarn 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
necesitars publicar en una subcarpeta, mientras que otros exigen que publiques
en una subcarpeta "pblica" o "www", por ejemplo. Antes de publicar la pgina
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 varan
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 pgina, o si deseas que se incluya tu pgina
en la galera de usuarios Xara http://www.xara.com/websitegallery, debes
introducir la URL completa de tu pgina publicada en el campo URL de pgina
web. Para el mapa del sitio web se genera automticamente un archivo llamado
mapadelsitio.XML. Es una lista de las pginas en tu sitio web y ayuda a los
buscadores a encontrar y hacer una lista de todas las pginas de tu sitio. Si no
has especificado una URL aqu, al exportar tu pgina web, no se crear el mapa
de sitio.
7. Haz clic en el botn "Explorar espacio web" para examinar, ver y eliminar
archivos que has subido a tu servidor FTP (opcional). Tambin puedes
establecer una ruta de subcarpetas que aparecer automticamente en el
campo de subcarpeta (opcional).
8. Cuando hayas terminado, haz clic en Aceptar para volver a la pestaa "Publicar"
del dilogo "Propiedades web".
9. Haz clic en Aceptar. Web Designer muestra un dilogo para confirmar los
detalles de publicacin que est a punto de utilizar. Haz clic en Publicar.

Dilogo de detalles de publicacin

Transferencia de datos
1. Tras hacer clic en "Publicar", Web Designer abre una pequea ventana que
muestra el progreso de la transmisin de datos y te indica cuando la publicacin
se haya completado. Si has introducido la URL de tu pgina web con los detalles
FTP, puedes acceder directamente a ella desde aqu.
2. Como alternativa, tan pronto como la transferencia finalice, podrs abrir una
ventana de navegador e ir a la URL de la pgina web publicada.

Nota: si introduces una subcarpeta en la pestaa "Publicar" del dilogo "Propiedades

web", la pgina se guardar ah.

Importante: si no has asignado ningn nombre de pgina especfico en la galera de

pginas y capas, el nombre que exportes en ltimo lugar se utilizar como base para
todas las pginas de tu sitio web. Por ejemplo, si abres una plantilla de pgina web,
la exportas como "test" a tu sistema de archivos y la publicas a continuacin, se

www.magix.es
 Publicar pgina web 323

publicar como test.htm en el servidor web y las pginas adicionales sern

test_2.htm, test_3.htm etc.

"index.htm" es el nombre comn para la primera pgina de una web.

Nota: muchos servidores utilizan nombres de archivo que distinguen entre

maysculas y minsculas. As, por ejemplo, la direccin
web "xara.com/productos.htm" no es lo mismo que "xara.com/Productos.htm". Para
reducir la confusin y la probabilidad de errores, Web Designer obliga a que todos los
nombres de pgina se escriban en minsculas y contengan solo caracteres
permitidos. Esto significa que no estn permitidos los espacios en los nombres de
pgina. Sugerimos utilizar un guin bajo como separador alternativo.

Protocolos FTP seguros

Adems del protocolo de transferencia de archivos (FTP por sus siglas en ingls),
Web Designer tambin admite los protocolos ms 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 dilogo

CONFIGURACIN DE OTROS ALOJAMIENTOS WEB y vers las siguientes opciones:

Selecciona una de las tres opciones: la opcin FTP usual o FTPS y SFTP que son ms
seguras. Debers 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 direccin IP del alojamiento. Esto es algo de lo
que no debes ocuparte porque Web Designer lo gestiona automticamente por ti,
pero a veces, para brindar mayor seguridad, el administrador del sistema del anfitrin
asigna un nmero de puerto diferente y, si esto es as, tendrs que introducir el nuevo
puerto de forma manual como parte de la direccin FTP del alojamiento.

En este ejemplo, el nmero de puerto se ha cambiado a 22098 y, por lo tanto, se ha aadido a la

direccin del alojamiento como :22098.
324

Para ms informacin, consulta nuestro artculo de la Base de datos de conocimiento

http://www.xara.com/support/sftp/ sobre la publicacin utilizando protocolos de
FTP seguros.

Inclusin de la pgina web en la galera de

usuarios
El campo INCLUIR MI PGINA EN LA GALERA DE USUARIOS solo est disponible si has
aadido una URL vlida (o si usas TaskPilot/MAGIX Online World). Si seleccionas
esta opcin, despus de publicar tu pgina, se la enviar para que se considere su
inclusin en la galera de pginas web creadas por usuarios de Web Designer.

Para ms detalles, visita la galera en http://www.xara.com/websitegallery

http://www.xara.com/websitegallery o haz clic en el botn Ms informacin.

Explorar espacio web

Si has completado los campos de direccin de FTP, el nombre de usuario FTP y la
contrasea de FTP, haz clic en el botn 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.
Tambin puedes eliminar uno o muchos archivos. Selecciona mltiples 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 segn el criterio de esa
columna.

Navega por la lista de archivos que has cargado a tu servidor ftp

www.magix.es
 Publicar pgina web 325

Regresa a la vista de archivos original que habas abierto al lanzar el dilogo

Explorar espacio web
Te lleva a las carpetas de un nivel superior

Elimina un archivo o mltiples archivos seleccionados

Publicacin rpida (solo archivos modificados)

Deja la casilla PUBLICACIN RPIDA (SOLO ARCHIVOS MODIFICADOS) seleccionada. De
esta forma la publicacin ser ms rpida en la mayora de los casos, ya que solo los
archivos modificados desde la ltima publicacin son publicados de nuevo.

Guardar la configuracin de publicacin en el

documento
Deja activa la casilla GUARDAR LA CONFIGURACIN DE PUBLICACIN EN EL DOCUMENTO
para que se conserven guardados los detalles de publicacin que has introducido en el
documento actual. Esto significa que siempre que abras el documento, tendr ya los
detalles de publicacin en l, por lo que puedes realizar actualizaciones fcilmente.

Cuando actives la casilla "Guardar configuracin de publicacin en el documento",

tambin podrs activar la casilla "Guardar contrasea" (no disponible para la
publicacin en TaskPilot ni en MAGIX Online World). Selecciona esta casilla tambin
para guardar la contrasea FTP para el documento actual, si ests 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 diseo puede publicar en tu pgina web sin tener
que saber o introducir tu contrasea.

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 pgina
web en una cuenta TaskPilot/MAGIX Online World diferente, necesitas cerrar sesin
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 pgina web que contenga unos datos de
acceso a TaskPilot/MAGIX Online World diferentes a los de la cuenta en la que ests
actualmente registrado, vers aparecer el dilogo 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 automticamente la sesin actual
de TaskPilot/MAGIX Online World).
326

Guardar perfiles
Los perfiles te permiten guardar los detalles de publicacin 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 botn GUARDAR PERFIL e introduce un nombre de perfil

adecuado. Ahora puedes seleccionar el perfil de la lista de perfiles en la parte superior
del dilogo, de forma que puedes usarlos en otros documentos sin tener que
reinsertarlos. Puedes guardar un perfil tanto con configuracin TaskPilot/MAGIX
Online World como FTP.

Nota: puedes eliminar un perfil seleccionando en la lista de PERFIL y haciendo clic en

el botn ELIMINAR junto a l.

Documentos web y PDF

Tal vez la forma ms 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 diseo, los sitios webs y HTML estn 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 diseo. Por
esto, los folletos, informes y todo tipo de documento en los que el diseador quiera
conservar el control preciso del diseo, fuente, disposicin y paginacin 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
utilizacin 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
automticamente siempre que la licencia lo permita) o las ms de 600 fuentes
de Google Fonts.
Fotos y grficos de alta resolucin. Diseo libre: combina grficos y texto en
cualquier lugar de la pgina.
Resultados "lo que ves es lo que obtienes" con pxeles precisos. El documento
que diseas en Designer Pro es exactamente lo que ver quien lo mire, con las
mismas fuentes, diseo y paginacin.
Sin necesidad de instalar ningn plug-in o lector independiente. Las pginas se
crean en HTML5. Tu documento es un documento web.
Este formato es compatible con todos los navegadores modernos, incluyendo
dispositivos porttiles y tablets, y podrs desplazarte rpidamente y de forma
fluida por todo el documento.

www.magix.es
 Trabajar con fotos 327

Trabajar con fotos

Introduccin
Actualmente, las fotos son una parte integral de casi todo trabajo creativo, de sitios
web, flyers, folletos, DTP y ms.

El Manejo de fotos en Web Designer es diferente al que puedes haber usado con
otros programas de diseo grfico.

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 tamao de una foto, no ests alterando realmente la foto
original, sino que slo ests modificando una copia visual. La imagen original con la
resolucin total se guarda en el archivo .web de modo que posteriormente puedes
editar, volver a cambiar el tamao o aplicar cualquiera de las opciones de edicin de la
herramienta de fotos sin ninguna prdida de calidad. Incluso puedes "descortar" fotos
recortadas.

El manejo de fotos es increblemente rpido. Puedes abrir una foto de 50 megapxeles

y efectuar cualquiera de las operaciones de optimizacin y girar la imagen con su
resolucin total en tiempo real.

Este captulo cubre los principios bsicos de manipulacin de fotos e imgenes de

mapas de bits en MAGIX Web Designer 11 Premium. El funcionamiento de la
Herramienta de fotos est contemplado en el captulo Herramienta de fotos.

Imgenes de alta resolucin

Las imgenes de alta resolucin del mismo tipo que las imgenes de dispositivos
Retina(R) de Apple se pueden crear ahora automticamente con Web Designer.

Para poder aprovechar las pantallas de tipo Retina es necesario, por lo general, crear
todas tus fotos y grficos de pginas web con una resolucin al menos de 96 dpi: esto
es el doble de pxeles por pulgada tanto vertical como horizontalmente, lo que cuatro
veces ms pxeles por pulgada cuadrada. La parte negativa es que tus archivos sern
ahora ms de cuatro veces mayores, reduciendo la velocidad de tu pgina web para
todos tus visitantes. Para aquellos visitantes de tu web que no tienen pantallas de alta
resolucin esto es ciertamente injusto.

Web Designer resuelve este problema creando de forma automtica fotos y grficos
de alta resolucin y actuando de manera inteligente al cargar los grficos con la
resolucin adecuada para el navegador que se est usando.
328

Esto significa que no se penaliza con una reduccin de la velocidad para aquellos
visitantes sin Retina, pero aquellos que tienen navegadores de alta resolucin
conseguirn ver la imgenes al doble de resolucin y pginas web de mayor cantidad.

La creacin de imgenes de alta resolucin est activada por defecto: cuando

exportes tu pgina web, un visitante Retina o de alta resolucin ver las imgenes y
grficos con mayor resolucin, mientras que un visitante estndar ver imgenes de
resolucin normal. Lo nico que tienes que hacer: asegrate de que las imgenes que
quieres que aparezcan con alta resolucin estn guardadas en tus pginas web con
una resolucin mayor que 100 dpi, ya que este es el punto lmite en el cual Web
Designer asume que quieres que la imagen se renderice como alta definicin.
Imgenes con una resolucin inferior a 100 dpi permanecern como imgenes de
definicin estndar. No tendrs que preocuparte de esto por lo general, ya que, con la
funcin activada por defecto, todas las imgenes se optimizan a 192 dpi en el dilogo
OPTIMIZAR FOTO , por lo que quedan por encima del umbral de creacin de imgenes
de alta resolucin.

Ten en cuenta que debido a las imgenes de mayor tamao y al hecho de que se
necesitan tanto las imgenes de alta resolucin como las de resolucin normal,
publicar pginas Retina lleva ms tiempo que publicar pginas no Retina. Si deseas
deshabilitar la funcin, ve a la pestaa "PROPIEDADES DE WEB" > "PGINA WEB"
situada en el men HERRAMIENTAS , o bien haz clic derecho sobre tu documento web
y selecciona "PROPIEDADES DE PGINA WEB" > "PGINA WEB" . Entonces desactiva la
casilla IMGENES RETINA (ALTA DEFINICIN) en la parte inferior del dilogo.

Si desear volver a formatear una pgina de definicin estndar creada con una
versin anterior de Designer a una con imgenes de alta resolucin, ten en cuenta
que tendrs que importar fotos de nuevo a Web Designer con la funcin Retina
activada.

Consulta Optimizar fotos y mapas de bits para ms informacin sobre la resolucin

de imgenes.

Objetos de fotos
En Web Designer las fotos (o mapas de bits) son simplemente otro tipo de objeto en
la pgina. Puedes arrastrar y soltar fotos en la pgina de tu explorador, y luego puedes
redimensionarlas, girarlas, copiarlas y moverlas como cualquier otro objeto. Puedes
ajustar la transparencia, incluso la transparencia con gradacin, difuminar los bordes y
cortar y recortar formas extradas de fotos con gran facilidad. la opcin de
transparencia te deja mezclar, combinar o crear fotos compuestas.
www.magix.es
 Trabajar con fotos 329

Donde en otros programas deberas usar capas, en MAGIX Web Designer 11

Premium cada objeto est sobre su propia capa y, tambin con cada objeto de la
pgina, puede traerlo hacia el frente o hacia atrs 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 vers en la lnea de estado cuando
selecciones una de estas fotos modificadas.

Al igual que un grupo usual, el grupo mantiene a la foto unida con los dems objetos
que se aadieron 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 automticamente dentro de un objeto de ClipView, que recorta los objetos
que superponen los bordes de las fotos hasta los lmites de la foto misma. Por ello,
cuando seleccionas un grupo de fotos en la lnea de estado generalmente muestra
que has seleccionado un "grupo de foto recortado". Consulta el apartado Clipview (en
la pgina 140) de Manejo de objetos para obtener informacin sobre clipviews.

Diferencias entre los grupos de foto y las fotos:

Los grupos de fotos renen 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 arrstralos en la herramienta de
seleccin).
Algunas operaciones convertirn los grupos de fotos en fotos.

Si quieres convertir un grupo de fotos en un objeto de foto comn, puedes usar

HERRAMIENTA > OPTIMIZAR FOTO para hacerlo. Pero ten en cuenta que esto es
destructivo y que luego no podrs modificar ninguna de las ediciones que aplicaste a
la foto. Otras operaciones, como la modificacin de tamao con contenido y el
contone, tambin 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

Importacin 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 imgenes RAW de cmaras
digitales, as como muchos tipos ms. El trmino "mapa de bits" es el trmino general
que abarca todos los tipos, pero intercambiable con la palabra "foto".

El modo ms fcil 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 resolucin (cualquier imagen con ms de 1.920 pxeles de

alto o ancho) en un documento web (incluyendo presentaciones), MAGIX Web
Designer 11 Premium cambia automticamente el tamao de la foto para ajustarlo al
tamao de pantalla HD, sin preguntar si deseas importarla con una resolucin menor.
Para un documento web, aun con el tamao reducido, debera haber ms que
resolucin suficiente en tus fotos para resultados de alta calidad en tu pgina web,
por lo que raramente es necesario importar imgenes de cmaras digitales con su
resolucin completa para usar en la web.

Sin embargo, si ests importando una foto grande en un documento animado, MAGIX
Web Designer 11 Premium te preguntar si deseas importar una versin de menor

www.magix.es
 Trabajar con fotos 331

resolucin de tus fotos. Si el documento incluir muchas fotos, es posible que quieras
utilizar esta opcin de resolucin reducida. De lo contrario, si contiene varias fotos, el
tamao del archivo de diseo ser mucho ms grande de lo que debera 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
galera de mapas de bit) hasta una foto existente, esta se reemplazar pero
mantendr el mismo contenedor o tamao de frame. Esto facilita la sustitucin de
fotos en plantillas. Puedes usar la HERRAMIENTA DE RELLENO para ajustar el tamao, la
posicin y el ngulo de la foto dentro de su contorno. Esto no es vlido para
documentos de foto (en la pgina 351), donde al soltar una foto en la pgina 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 rotacin
que la foto anterior. Esto es til para cuando ajustes manualmente la escala o rotacin
de un relleno y luego quieres sustituir la imagen por otra que tenga la misma relacin
de aspecto.

Si existen mltiples copias de la misma foto en una pgina, en el mismo grupo suave,
por ejemplo, una pequea vista en miniatura y una versin ms grande en una capa
popup, cuando haces clic y arrastras para reemplazar, todas las copias de la foto de
ese grupo suave se reemplazarn con la foto nueva.

Sustitucin de mltiples fotos en simultneo

La mayora de las plantillas web incluidas en la GALERA DE DISEOS te permitir
reemplazar varias imgenes al mismo tiempo, si arrastras y sueltas muchos archivos
de imagen desde el Explorador hasta el lienzo. O utiliza la opcin ARCHIVO >
IMPORTAR y selecciona varias imgenes en el dilogo de archivo (Ctrl+clic aade la
seleccin actual, Shift+clic te permite seleccionar un rango de archivos).

Las fotos entrantes se utilizan para sustituir las imgenes en el documento. De la

misma forma que cuando importas fotos individuales, se te preguntar si deseas
importar versiones de tamao reducido, si tus fotos son muy grandes. La sustitucin
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
sustitucin contina a partir de la siguiente foto sin reemplazar. As, puedes llenar
rpidamente el diseo con tus fotos.
332

Si importas ms fotos de las que pueden acomodarse en la pgina actual, tambin se

sustituirn las fotos de las siguientes pginas con las fotos entrantes restantes. Si
todava quedan fotos entrantes, la pgina actual se duplica todas las veces que sea
necesario para acomodar todas tus fotos.

Esto significa que puedes crear rpidamente una pgina web con una galera de tus
fotos. Simplemente escoge una plantilla de galera de la GALERA DE DISEOS y luego
importa todos los archivos de fotos que desees. La pgina se copia todas las veces
que sea necesario para que entren todas tus fotos. Asegrate de escoger la opcin de
tamao reducido si importas muchas fotos.

Utilizacin de fotos como relleno

Tambin 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 Galeras 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 tamao, la
posicin y el ngulo.

Tamao de foto inicial

Cuando importas una foto grande, su tamao se reduce a HD (1920 x 1080), si es
ms grande, en documentos animados e impresos se te preguntar primero. Su
tamao se modifica a 500 pxeles de ancho en la pgina.

Para reducir el tamao, solamente arrastra desde una de las esquinas usando la
herramienta de seleccin, o introduce un nuevo ancho en el campo de la barra de
informacin de la herramienta de seleccin.

Si reemplazas una foto mediante arrastrar y soltar, entonces la foto se adaptar

exactamente al contenedor, es decir, su tamao y la resolucin depender del tamao
del contenedor.

Copias de memoria cero

Una de las diferencias ms revolucionarias entre Web Designer y otros softwares es
que, cuando copias cualquier foto en la pgina, 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 renderizacin de Web Designer es lo suficientemente
rpido como para mostrar cualquier cantidad de copias de la misma imagen al vuelo.
Esto te permite ahorrar gran espacio de memoria y reduce drsticamente el tamao
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 idntica. Puedes editar
cada una como quieras, redimensionndola, girndola, cortndola, colorendola o
aplicndole una amplia gama de efectos de foto y de transparencia. Todo, sin ocupar
espacio en la memoria ni aumentar el tamao del archivo original.

Este ejemplo muestra las copias separadas de la misma imagen, cada una manipulada
de un modo diferente. Cada una conserva la resolucin total del JPEG original
importado, como puedes ver en la imagen de la derecha. La memoria (RAM y el
tamao de archivo) no es superior al tamao de JPEG original.

La galera de mapa de bits

El captulo Manejo de documentos (en la pgina 95) cuenta con informacin general
acerca de las galeras.

La GALERA DE MAPA DE BITS muestra todo los mapas de bits o fotos usadas en
cualquier documento, con la informacin de su tamao de pxeles y el tamao de
archivo.

Puedes abrirla con clic en la barra de galeras, desde el men HERRAMIENTAS >
GALERAS , o con "F11".
334

Este ejemplo muestra la GALERA 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 slo se muestra la imagen sola y no las
cuatro variantes que aparecen en la pgina.

Se muestra la siguiente informacin de ayuda acerca de la imagen original:

Nombre de archivo del JPEG original

El tipo de archivo, en este caso un JPEG, y el tamao de archivo, 1.006 K. (Este
es el tamao original del archivo, y tambin cunto lugar de archivo .web
ocupar esta imagen.)
Las dimensiones de pxeles del original, el tamao de megapxeles (en este caso
slo 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 resolucin original de la imagen, en estos casos 96 dpi
www.magix.es
 Trabajar con fotos 335

La GALERA 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 tambin
como marcador de posicin.

Como con todas las galeras, puedes arrastrar los objetos de la galera a la pgina para
crear una nueva copia. O puedes seleccionar una imagen en la galera y hacer clic en
uno de los botones superiores. El apartado siguiente muestra detalladamente cmo
utilizar los controles de la GALERA DE MAPAS DE BITS , que en su mayora estn
pensados para usuarios ms avanzados.

Relleno de formas con un mapa de bits

Selecciona la forma en la pgina, luego selecciona el mapa de bits en la galera y haz
clic en el botn de relleno. O bien, arrastra la imagen de la GALERA DE MAPAS DE BITS
y sultala en cualquier forma mientras mantienes pulsada "Shift". Puede ajustar el
tamao, el ngulo, etc. en la HERRAMIENTA DE RELLENO.

Ajuste de una transparencia de mapa de bits

Esto es para los usuarios ms avanzado. Puedes usar cualquier mapa de bits como
una mscara de transparencia sobre cualquier forma rellena o mapa de bits. La
luminosidad del mapa de bits afecta la transparencia del objeto seleccionado. El
tamao de transparencia del mapa de bits, la rotacin y segmentacin pueden ser
controlados desde la barra de informacin de la HERRAMIENTA DE TRANSPARENCIA (en
la pgina 252).

Eliminar imgenes de la galera

Cuando eliminas un mapa de bits de la pgina, permanece en la GALERA 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
seleccionndolo y apretando el botn SUPRIMIR . Si el mapa de bits es usado en el
documento, ser sustituido en el mapa de bits estndar de Xara.

Ajuste del fondo de la pgina para un mapa de bits

Selecciona el mapa de bits en la galera y haz clic en el botn FONDO. Se abrir un
men que te permite elegir entre la configuracin del FONDO DEL TABLERO DE DIBUJO o
el FONDO DE PGINA . Cuando configuras el fondo del tablero de dibujo, si la imagen es
ms estrecha que la pgina, 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 configuracin haciendo clic derecho en el
tablero de dibujo y buscando en el submen "Fondo de tablero de dibujo".

Tambin puedes aplicar una imagen en el fondo sin usar esta galera: tan solo haz clic
en la imagen y consulta las opciones en el men contextual.
336

Consulta Fondos de pgina web (en la pgina 311) para ms informacin.

Guardar
Seleccionando el mapa de bits y haciendo clic en GUARDAR , guardars 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 botn PROPIEDADES te mostrar la informacin del mapa de bits seleccionado en la
galera. Esta opcin tambin te da la posibilidad de evitar que se suavicen las
imgenes cuando se amplan los mapas de bits. Por lo general, todos los mapas de
bits se suavizan cuando se amplan, o se agrandan con el zoom en la pantalla. Hay un
cuadro de seleccin en el dilogo de Propiedades para desactivar esta caracterstica
para que puedas ver cada pxel cuando amplas con el zoom.

Esto tambin proporciona la informacin de las propiedades de animacin del mapa

de bits. Esto es realmente aplicable slo a imgenes GIF animadas.

ANIMACIN GIF:

RETARDO (el tiempo en que el frame es dejado en pantalla)

RESTAURAR: La configuracin de GIF animado fija lo que ocurre entre cada frame
de un GIF animado. Nada significa que no se efecta ninguna accin. Numerosos
navegadores interpretan que esto significa lo mismo que la opcin 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 animacin antes de reproducir ms 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
dejndola 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, debers experimentar
hasta conseguir los resultados deseados.

Archivos JPEG integrados

Los archivos JPEG estn enormemente comprimidos en relacin a su estado original,
siendo hasta 10 veces ms pequeos que la imagen original. En el ejemplo de arriba,
la imagen original no comprimida requiere ms de 7 MB de memoria, pero en la
GALERA DE MAPAS DE BITS slo tiene 1 MB. Una reduccin muy significativa. Por eso
las imgenes JPEG son el tipo de archivo estndar para la fotografa 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 grficos, tanto

en software de dibujos vectoriales como de programas de edicin de fotos. Otros
productos descomprimirn la imagen y almacenarn la imagen no comprimida
"cruda" en la memoria y el archivo nativo cuando lo guardas en disco. Lo que no es
ms 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
ms 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 tamao de archivo mayor a 7:1 comparado con otros programas
de diseo grfico. Al haber cuatro copias completas de la imagen significa, en este
caso particular, que la memoria usada es ms bien 30 veces menor. Por lo tanto,
representa un enorme ahorro de tamao (y de tiempo) en comparacin a otras
herramientas de grficos*.

*Es fcil para comprobar. Importa un JPEG a tu editor de grficos favorito, haz cuatro copias, y
haz algunos pequeos cambios en ellas, colorendolas, rotndolas, o desenfocndolas. Luego,
guarda el archivo nativo y compralo con el tamao del JPEG original, y el equivalente archivo
.Xar. Un archivo .Xar nativo tendr aprximadamente el tamao del JPEG original, no importa
cuntas copias de la imagen sean hechas.

Extraccin del JPEG original

Haz clic derecho sobre cualquier imagen en la GALERA DE MAPAS DE BITS y escoge la
opcin de men GUARDAR para guardar el JPEG original en tu sistema de archivos.

Calidad de visualizacin de fotos

MAGIX Web Designer 11 Premium puede mostrar fotos en uno de cinco niveles de
calidad. Las dos primeras configuraciones, suavizan los pxeles de pantalla para evitar
pxeles 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 imgenes mediante sampleo bicbico. Esto permite ver
CALIDAD (POR las imgenes en la mejor calidad, en particular para imgenes
DEFECTO) grandes de alta resolucin que son altamente reducidas o
ampliadas con zoom.
ALTA CALIDAD Antialiasing activado, pero las imgenes se renderizan lento y con
una calidad baja.
338

COLOR TOTAL Sin antialiasing, por lo que se ven los pxeles individuales. Esto
puede ser til cuando amples con el zoom y necesites ver
claramente los pixeles de la imagen por separado. El
inconveniente es que las imgenes generalmente se ven pobres
cuando reduces o amplas 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 transicin. MAGIX Web Designer 11 Premium no es
TRANSICIN compatible con transiciones pero los archivos .xar importados
pueden contenerlas.
CONTORNO Slo se ven los contornos de los objetos. Esto es til para buscar y
seleccionar objetos que son difciles de ver debido a otros objetos
que se encuentran delante o detrs de ellos.

Hay un control adicional que te permite frenar todo antialiasing o suavizado de

imagen en imgenes que son reducidas o ampliadas con zoom. En otras palabras, en
vez de una imagen suavizada, vers todos los pixeles cuando amples con zoom. Abre
la GALERA DE MAPAS DE BITS y haz clic derecho sobre la imagen y seleccione
"propiedades". En el dilogo desactiva la seleccin de "Suavizar al aumentar tamao".
Ahora, no importa la calidad que utilices para la imagen (y todas las copias), siempre
se visualizarn los pxeles no suavizados cuando amples o reduzcas con zoom.

Atencin: Si usas el control de Desenfoque/Enfoque de la Herramienta de fotos,

entonces las imgenes tienen que ser mostradas en la calidad mxima. As que si
piensas que la calidad de visualizacin 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 opcin 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 opcin EXPORTAR o el shortcut "Ctrl + Shift + E".

Hay dos conos disponibles en la barra superior que son shortcuts para
guardar la seleccin como JPG o PNG. Estos se encuentran en la barra
desplegable cuando colocas el cursor sobre el icono de exportacin
HTML.

Recomendamos guardar las fotos como JPEG (a veces llamado JPG), ya que ofrece la
mejor relacin tamao/calidad.

Cuando exportas JPEG o PNG, aparece la opcin CONFIGURACIN en el dilogo

Guardar. Al seleccionar esta opcin se obtienen muchas alternativas de exportacin

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 exportacin
donde puedes ajustar muchas opciones de exportacin y comparar ajustes
alternativos o tipos de archivo alternativos como PNG.

La ventana de vista previa de exportacin te permite ajustar el tamao, la resolucin,

la calidad del JPEG y, adems, seleccionar entre 3 tipos de archivos de exportacin
alternativos. Los valores por defecto deberan ser los correctos para todas las tareas
comunes y puedes pulsar simplemente el botn de exportacin para guardar tu foto.

Aspectos para tener en cuenta al exportar:

Primero selecciona el objeto o los objetos que quieres exportar

El tamao por defecto de la imagen exportada ser del tamao que veas en la
pantalla con el zoom al 100%.

La ventana de Vista previa de exportacin (en la pgina 474) est descrita ms

detalladamente aqu.

Consejo: Puedes controlar la calidad de JPEG en el dilogo configuracin de

exportacin de la pestaa de Opciones. El valor estndar y recomendado es 85%.

El sistema JPEG est diseado 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 idnticos a la calidad del
85%, slo que el tamao de archivo y
uso de memoria aumenta drsticamente
sin beneficio alguno.

Se puede bajar la calidad por debajo de 85 para que se vea ms rpido la pgina 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
tamao de la imagen, te recomendamos que guardes el archivo .web tambin. Esto
preservar la imagen original sin prdida de calidad.
340

Ejemplo para cambiar el tamao de una foto y guardarla

en JPEG.
este proceso es muy rpido y simple:

Suelta tu foto en MAGIX Web Designer 11 Premium (en una pgina en blanco o
en la barra de ttulo)
Ve a la herramienta de seleccin, arrastra el control deslizante de una esquina
para cambiar el tamao de la imagen, o introduce el ancho o la altura requerida
en los campos correspondientes de la barra de informacin. El tamao de la
imagen ser correcto cuando est al 100%.

Haz clic en el botn "Exportar seleccin como JPG" en la barra superior.

Introduce un nombre de archivo, haz clic en el botn CONFIGURACIN si
necesitas controlar la compresin o simplemente haz clic en GUARDAR .

Para guardar la imagen en formato PNG, repite los mismos pasos de arriba pero
selecciona la opcin PNG en el men desplegable del tipo de archivo.

Atributos de la edicin de fotos

Todas las ediciones realizadas con la HERRAMIENTA DE FOTO (en la pgina 353), como
cambiar el brillo, el contraste, el color, los valores de enfoque o desenfoque, sern
guardadas sobre la foto como atributos de Web Designer.

Tal como puedes cambiar el color de una forma o de una lnea 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 edicin no destructiva). Otra
forma de explicar esto es que MAGIX Web Designer 11 Premium slo guarda una lista
de las ediciones aplicadas a tu foto; puedes cambiar, quitar o aadir nuevas ediciones.
Siempre podrs recuperar la foto original sin retocar, incluso luego de haber cambiado
el brillo, haberle cambiado el tamao, o incluso luego de haberla cortado o recortado.

Los atributos se pueden copiar y pegar entre distintos objetos. Esto no slo se aplica
solamente a los atributos tradicionales como el color o el ancho de la lnea, tambin
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 funcin "copiar/pegar atributos".

Esto tambin vale para todos los otros atributos de la foto, como color y ancho de
lnea, coloreado de foto (contoning), sombras, etc.; todos estos atributos se pueden
copiar de una foto a otra usando la misma tcnica.

www.magix.es
 Trabajar con fotos 341

Editar el contorno de las fotos

Puedes utilizar la herramienta de EDICIN 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 EDICIN DE FORMA

puedes achicar o agrandar la forma de sus
esquinas. Este ejemplo tambin 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 informacin 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 edicin para crear una lnea o
cambiar la forma, e incluso puedes usar la
HERRAMIENTA DE RELLENO para ajustar el tamao,
el ngulo y la posicin del relleno de la foto
adentro de la forma.

Recortar fotos
La forma ms fcil de recortar una foto es
arrastrarla mientras te encuentras en la
HERRAMIENTA DE OPTIMIZACIN o tambin
puedes arrastrar uno de los 8 controles
deslizantes alrededor de la foto para ajustar el
borde de cualquier foto seleccionada.

Para un manejo ms avanzado del recorte, selecciona el BOTN CLIP en la

herramienta de fotos de la barra de informacin, ya que te permitir definir la
relacin de aspecto, as como usar el recorte numrico preciso.

Asimismo encontrars un botn Deshacer corte que borra cualquier rectngulo de

corte y restaura la imagen original.

Una funcin importante es que la herramienta de recorte es realmente dinmica, 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 funcin Optimizar foto.
342

Recortar fotos con una mscara

Si quieres crear formas de foto no rectangulares o cortar partes de una foto, utiliza
una mscara. Primero selecciona la foto y luego la HERRAMIENTA DE MANO ALZADA de
la barra desplegable de herramientas de mscara.

Usa la "Herramienta de mano alzada" para dibujar una forma de mscara

cerrada alrededor de la parte de la foto que quieres recortar.

Cambia a HERRAMIENTA DE SELECCIN y selecciona la foto bajo la mscara o elimina la

seleccin (presiona "Esc"). Ahora al copiar ("Ctrl+C"), se copiar solamente la parte
sin mscara de la foto en el bfer de pegado. Ahora pulsa "Eliminar" y la parte sin
mscara se eliminar. O presiona "Ctrl+C" para cortar. Tambin puedes usar la
mscara para aplicar operaciones de forma "ARREGLO" > "COMBINAR " con ella.

Consulta el captulo Mscaras (en la pgina 267) para ms informacin acerca del
uso de mscaras.

Herramienta Capturar pantalla

Esta herramienta ofrece algunas ventajas con respecto al mtodo mencionado
anteriormente, incluyendo la opcin de capturar el cursor del ratn 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.

Tambin puedes decidir si deseas capturar una sola imagen o mantener la
herramienta activada durante la sesin para poder realizar capturas consecutivas
cada vez que pulsas el shortcut asignado.

La seccin de resultado te permite escoger la forma en que manejars la imagen de

pantalla. Por defecto, se insertar directamente en el diseo actual de MAGIX Web
Designer 11 Premium. Como alternativa puedes tambin guardar cada captura de
pantalla como archivo BMP (mapa de bits de Windows) o PNG en cualquier carpeta.
Los archivos creados se denominarn "ScreenCapture", "ScreenCapture1,
"ScreenCapture2" y as sucesivamente. Selecciona la CARPETA DE DESTINO para los
archivos con el botn EXPLORAR...

Puedes definir casi cualquier combinacin de teclas (Shift, Alt, Ctrl + tecla) para
activar la captura de pantalla. Simplemente haz clic en el campo de shortcut y
despus selecciona la combinacin 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 recibirs una advertencia en
la parte inferior del dilogo, pero esto no importar si estn 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 opcin 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 opcin de tiempo e introduce el valor de retraso en segundos. La captura de
pantalla se tomar automticamente una vez que haya transcurrido el tiempo
especfico. El temporizador comenzar ni bien hagas clic en el botn INICIAR .

Al pulsar el botn INICIO se cerrar el dilogo de captura de pantalla y se activar el

shortcut de sistema. Cambia a la ventana que quieres capturar y pulsa la combinacin
deseada o espera que el tiempo pase si has escogido la opcin de tiempo. La captura
de pantalla se toma y se inserta en Web Designer o se guarda en el archivo segn la
opcin escogida. Si has seleccionado "Capturar siempre" puedes tomar capturas de
pantalla adicionales si presionas la combinacin nuevamente (esto no est disponible
con la opcin de tiempo). Para desactivar la herramienta si has escogido esta opcin,
cierra MAGIX Web Designer 11 Premium para cerrar la sesin. Como alternativa,
vuelve al dilogo de captura de pantalla y escoge la opcin "una sola vez" y toma una
captura de pantalla ms.
344

Colorear fotos
Selecciona una foto, haz clic en la lnea 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 LNEA DE COLORES ,

puedes seleccionar cualquier color,
sea ste el color claro o el oscuro del
tono continuo (contone). Tambin
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 ests
editando en el color claro u oscuro.
Puedes restaurar el color original de la foto haciendo clic en el pequeo cuadrado
blanco cuadriculado del extremo izquierdo de la lnea de colores, o haz clic derecho
sobre la foto y selecciona la opcin "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 tamao, rotar y reposicionar la foto

dentro de su propio marco
MAGIX Web Designer 11 Premium trata las fotos como si fueran un rectngulo 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 estars afectando al relleno.

Las fotos y los mapas de bits de la pgina siempre estn "contenidos" dentro del
contorno de una forma. No slo puedes cambiarle la forma al contorno, sino que
tambin puedes ajustarle el tamao, el ngulo y la posicin de la foto dentro de su
marco (frame) utilizando la HERRAMIENTA DE RELLENO . Selecciona la foto, ve a la
HERRAMIENTA DE RELLENO y podrs 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 tamao, arrastra el cursor sobre una de las puntas de las flechas,
alejndote 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 informacin de la herramienta de

relleno puedes seleccionar la opcin de "mosaico
repetido" y la imagen se llenar con un mapa de bits
segmentado. Si arrastras los controles deslizantes de
relleno, podrs cambiar las dimensiones de la
segmentacin dentro de la imagen o realizar una
rotacin. Si realizas la misma accin pero con una
imagen gigante con muchos pxeles, podrs 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 comn 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 comn 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 podrs
modificar ninguna de las ediciones que aplicaste a la foto.

Enderezar horizonte
Es muy fcil enderezar el horizonte torcido de una imagen. Slo 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 bsicamente son flechas que muestran la
extensin del relleno en el interior de la forma.
Arrastra uno de los extremos de las flechas para cambiar el tamao de la
imagen o para rotarla.

La siguiente imagen tiene un paisaje con un horizonte torcido, que ha sido creada con
la funcin de "creacin de panormicas".

Utilizando la herramienta de relleno, arrastra una de las flechas para rotar o cambiar el
tamao 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 tamao completo

El botn ZOOM A 1:1 en la barra de informacin de la herramienta de foto ajusta el
zoom de forma que la imagen seleccionada se muestre en su tamao completo, en
donde cada pxel de la imagen corresponde a un pxel de pantalla. Esto es til si
quieres editar una imagen que se ha reducido en la pgina, pero quieres verla en su
tamao completo mientras trabajas en ella.

Darle el tamao completo a una foto

El botn AMPLIAR FOTO A 100% en la barra de informacin de la herramienta de foto
hace que la foto seleccionada actualmente se ample al tamao completo de la
pgina. As, una foto que se ha reducido a 500 pxeles de ancho, pero cuyo original
tena 1000 pxeles de ancho, se ampliar nuevamente a su valor original. Si el zoom
del documento es 100%, significa que cada pxel de la imagen corresponder a un
pxel en la pantalla.

Optimizacin de fotos y mapas de bits

Con la resolucin siempre en aumento y el tamao de archivo de los JPEGs de cmara
digital, si tienes un documento que contiene muchas imgenes, el tamao del archivo
se puede agrandar muy rpidamente Por ejemplo, un documento multipgina que
contiene 20 JPEGs de mxima resolucin, cada uno de los 5 Mb producirn un
archivo .xar de ms de 100 Mb*.

Adems, estas fotos por lo general estn innecesariamente en alta resolucin. Reducir
una foto de una cmara digital de 8 megapxeles a 5 cm (2 pulgadas) de ancho en la
pgina, tendr como resultado una imagen de 1500 dpi. Pese a que una imagen de
alta resolucin tiene una mayor flexibilidad para la impresin (y puedes ampliarla o
agrandar pequeas partes de la foto), esta es mucho ms alta de lo necesario
respecto a lo requerido incluso para la impresin comercial de mayor calidad, y
todava ms en el caso de grficos web o productos HTML.

Si seleccionas una pequea parte de la imagen o cortas solo una pequea parte de tus
fotos, podra haber grandes partes de imagen oculta fuera del rea visible. Este
"recorte en vivo" es una gran funcin para la edicin, ya que puedes retornar el
recorte, alterar el tamao, la posicin o la escala y todo permanece lo ms ntido
posible. Sin embargo, puede que quieras eliminar las partes invisibles en los
documentos finalizados.
348

La imagen de mariposa para recortar todava mantiene adjunto el resto de la foto. Si

vas a la HERRAMIENTA DE RELLENO podrs ver esto fcilmente si cambias el tamao
del relleno dentro del contorno. Por lo tanto, las partes de la imagen fuera de la
mariposa probablemente sern superfluas para tu documento final.

Haz clic derecho sobre una foto y escoge OPTIMIZAR FOTO o "HERRAMIENTAS" >
"OPTIMIZAR FOTO..".. Este dilogo permite realizar tres funciones importantes:

Eliminar partes invisibles de las fotos

Reducir la resolucin de las fotos
Convertir PNG o mapas de bits en JPEG incrustados para optimizar el tamao de
archivo

Si seleccionas esta opcin del men para cualquier mapa de bits, se abrir el dilogo
OPTIMIZAR FOTO .

www.magix.es
 Trabajar con fotos 349

Para imgenes JPEG la configuracin por defecto hace que la foto se optimice a JPEG
192dpi (resolucin de pantalla retina) en el tamao que aparece en tu pgina, o 96 dpi
si la opcin retina no est activada (pestaa PGINA WEB del dilogo PROPIEDADES
WEB ). En general, esto es lo que quieres de las fotos de tu sitio web.

Al optimizar imgenes diferentes a JPEG, Web Designer decidir automticamente si

es mejor optimizarla a PNG o JPEG, segn la propia naturaleza de la imagen. Puedes
hacer clic en el botn CONFIGURACIN de este dilogo, si quieres cambiar cualquier
configuracin, como el formato de imagen utilizado para la optimizacin, la calidad
JPEG, etc.

Puedes cambiar la resolucin utilizada en este dilogo, si escoges el tamao fsico que
deseas para la imagen optimizada (ancho/alto en pxeles) o si introduces un dpi
diferente (p. ej. 150 dpi si quieres calidad de impresin).

Si escoges la opcin de dpi, el valor que introduzcas se recuerda y se convierte en el

valor por defecto para la sesin actual. Tambin puedes mantener la resolucin actual
de la foto si seleccionas ACTUAL de la lista PPI. Tambin puedes escoger optimizar
como PNG (produce imgenes ms grandes pero mayor calidad para grficos e
imgenes de texto) o cambiar la calidad usada para la optimizacin JPEG (mayor
calidad significa tamao ms grande). Si tu foto se corta, solo la parte visible de la
imagen se preserva en la imagen optimizada. Para imprimir, una resolucin de 150dpi
ofrece muy buenos resultados, pese a que 300dpi ofrece la impresin comercial de
mejor calidad (la mayora no pueden distinguir entre 150dpi y 300dpi y , sin embargo,
300dpi requiere cuatro veces ms memoria o espacio de archivo).

Advertencia: "OPTIMIZAR FOTO" es una operacin "destructiva". Cuando guardes el

documento, las partes de la imagen que se hayan quitado se perdern, y la
resolucin se cambiar definitivamente (obviamente, puedes deshacer los cambios
mientras tengas el archivo abierto durante la edicin).
350

Puedes optimizar mltiples fotos al mismo tiempo si quieres que todas tengan el
mismo dpi. Selecciona las fotos que quieras optimizar y luego elige la opcin
OPTIMIZAR como se ha descrito ms arriba. Si tus fotos tienen diferentes
dimensiones, la opcin para optimizar segn el tamao de pxeles estar desactivada
y debers escoger el dpi requerido.

O puedes utilizar "HERRAMIENTAS" > "OPTIMIZAR TODAS LAS IMGENES" para

optimizar todas las imgenes de mapas de bits de tu documento en una sola
operacin. El proceso de optimizacin convertir las imgenes grandes que no sean
JPEG en imgenes JPEG ms pequeas, si el programa decide que la imagen puede
almacenarse y exportarse en JPEG sin una prdida de calidad inaceptable.

Ten en cuenta que despus de optimizar la foto, la foto original sin optimizar
permanece en la GALERA DE MAPAS DE BITS . Esto significa que todava se encuentra
en la memoria y que el espacio de almacenamiento requerido en tu diseo no se
habr reducido. Tan solo guarda tu diseo y vulvelo a cargar despus de optimizar
para eliminar las imgenes originales ms grandes.

Convertir objetos o dibujos a mapas de bits

Puedes crear fcilmente un mapa de bits a partir de un objeto, o partir de una parte de
tu dibujo, incluso si estn compuestos por otros mapas de bits. Los mapas de bits
pueden tener cualquier tamao o resolucin y tambin pueden tener transparencias.
Tambin puedes crear mapas de bits con un nmero 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 pgina

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 dilogo, selecciona la profundidad de color, el tamao y otras opciones.

Para obtener un mximo 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 trmino tcnico). 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 seccin Exportar mapas (en la pgina 474).

Ten en cuenta que siempre se crean imgenes en formato PNG (el tipo de imagen
con ms calidad). Pero recuerda que las fotos a color completo requieren mucha
memoria y espacio de archivo. Utiliza la opcin de optimizacin de foto para
convertir las imgenes en PNG en imgenes JPEG integradas para reducir el tamao
del archivo.

www.magix.es
 Trabajar con fotos 351

Documentos fotogrficos
A veces es mejor trabajar con una foto sola, en vez de con un "objeto" en una pgina.
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 fotogrfico de varias maneras:

Arrastra una foto desde tu explorador hacia la barra de ttulo o la barra de

herramientas de la ventana de Web Designer.
Selecciona "Archivo > Abrir" y selecciona una foto.
Crea un documento fotogrfico en blanco seleccionando "ARCHIVO > NUEVO >
FOTO VACA ".

Los documentos fotogrficos de Web Designer se diferencian de los documentos

tradicionales en lo siguiente:

No hay una pgina en blanco visible. Las dimensiones de pgina se ajustan a las
dimensiones de la foto, amplindose automticamente si aades cualquier otro
objeto.
Los documentos fotogrficos tienen una cuadrcula de 1 pxel por defecto. La
funcin para ajustar la cuadrcula tambin viene activada. Esto hace ms fcil y
preciso tu trabajo de corte y recorte de reas.
El tablero o pasteboard (el rea alrededor de la foto) tiene un color ms oscuro.
Esto facilita la distincin rpida entre los documentos fotogrficos y los
documentos de dibujo.
El zoom del documento est ajustado de modo tal que la foto cubra toda la
pgina, y la herramienta de fotos se abrir automticamente.
Si sueltas documentos fotogrficos adicionales sobre la foto principal, estars
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) permitindote ver la
imagen entera.
Las imgenes no se reducen a un tamao de 500 pxeles 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%, vers el tamao total de
la imagen.
Las opciones de suavizado de pxeles se han cambiado. Por defecto, se aplica el
modo de visualizacin en alta calidad. Esta es la mejor forma de ver imgenes
reducidas y las imgenes 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 pxeles estar desactivado.

En lo que respecta a todas las otras funciones, los documentos fotogrficos 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 fotogrfico con un tamao especfico,
puedes cambiar el lienzo o el tamao de la pgina seleccionando "HERRAMIENTAS >
OPCIONES y la pestaa "PGINA " para introducir las dimensiones.
352

En documentos fotogrficos, se permitirn dos controles extra. Los botones ANTERIOR

y SIGUIENTE cambiarn 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.

Edicin de archivos de fotos

Puedes utilizar MAGIX Web Designer 11 Premium para editar fcilmente tus fotos
JPEG y guardar el archivo modificado. A diferencia de la mayora de los editores de
fotos, puedes realizar repetidas ediciones sin prdida de calidad, a pesar de que el
formato JPEG es un formato con prdida. Esto es porque MAGIX Web Designer 11
Premium puede guardar tus ediciones sin prdida, 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 tambin 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 extensin .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 editndolo,

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 podrs 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 opcin 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 GALERA DE
MAPAS DE BITS , haces clic derecho sobre la foto y escoges la opcin GUARDAR .

www.magix.es
 La herramienta de fotos 353

La herramienta de fotos

Introduccin
Con la herramienta de fotos podrs recortar fotos o ajustar sus niveles de brillo y
nitidez de forma muy directa y rpida, incluso con las imgenes con muy alta
resolucin. Esta herramienta provee:

Auto-optimizacin con un clic de tus fotos; esto es particularmente bueno para

imgenes subexpuestas.
Ajuste manual de brillo, contraste, saturacin de color, temperatura del color de
la foto y desenfoque o nitidez de las fotos.
Corte de imgenes. Se trata de 'corte en vivo', lo que significa que podrs cortar
y deshacer el corte todas las veces que quieras.
Una funcin de "comparacin" con un solo clic para comparar rpidamente los
cambios respecto al original.
Funcin sencilla para copiar/pegar fotos que aumenta las ediciones entre
imgenes diferentes.

Todas estas operaciones son interactivas con actualizacin en vivo. Cuando ajustas
los valores, la imagen se actualiza al instante. Son tambin no destructivas, lo cual
significa que tu imagen original no se cambia y siempre puedes hacer o deshacer
cualquier ajuste. Tambin 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 rpida, aun para imgenes muy grandes.
3. La edicin fotogrfica no requiere memoria.

Para ms informacin respecto a estos beneficios en comparacin con otras

herramientas de edicin de fotos, consulta el captulo Manejo de fotos.

Utilizacin de la herramienta de fotos

Para acceder a las HERRAMIENTAS DE FOTO, mueve el cursor del ratn sobre el
icono de la cmara 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 ests en la herramienta de seleccin, haz doble clic en una foto para cambiar a la
HERRAMIENTA DE FOTO .

Los primeros seis botones de la barra de informacin 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 ms adelante.

Funciones comunes para fotos

Los siguientes botones estn disponibles en la barra de informacin cuando te
encuentras en las herramientas para fotos Optimizacin, Clip, Ojos rojos o Cambio de
tamao con contenido.

Controles para rotar 90

Los dos iconos de rotacin 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, ms 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 informacin 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 travs 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 ms informacin en Documentos

fotogrficos.

www.magix.es
 La herramienta de fotos 355

Zoom 1:1
Selecciona una foto y haz clic en el botn zoom 1:1.

El factor del zoom para el documento est establecido de forma que la foto
seleccionada se muestre 1:1 (un pxel de la foto es igual a un pxel de la pantalla).
Utiliza esta opcin si quieres trabajar en una foto a tamao completo en un
documento en donde has reducido el tamao de la foto.

Ampliar foto a 100%

La funcin AMPLIAR FOTO A 100% hace que la foto seleccionada actualmente
se ample al tamao completo de la pgina.

As, una foto que se ha reducido a 500 pxeles de ancho, pero cuyo original tena
1000 pxeles de ancho, se ampliar nuevamente a su valor original. Si el zoom del
documento es 100%, significa que cada pxel de la imagen corresponder a un pxel
en la pantalla. Si el zoom del documento es 100%, significa que cada pxel de la
imagen corresponder a un pxel en la pantalla.

Herramienta de optimizacin
Haz clic en el cono de la cmara para ingresar a la HERRAMIENTA DE
OPTIMIZACIN .

Con la HERRAMIENTA DE FOTOS podrs recortar fotos o ajustar sus niveles de brillo y
nitidez de forma muy directa y rpida, incluso con las imgenes con muy alta
resolucin. Esta herramienta te provee:
Optimizacin automtica con un clic de tus fotos, especialmente til para fotos
subexpuestas.
Ajuste manual de brillo, contraste, saturacin de color y desenfoque o nitidez de
las fotos.
Corte de imgenes. Se trata de "corte en tiempo real", lo que significa que
podrs cortar y deshacer el corte todas las veces que quieras.
Correccin de la dominante de color o el balance de blancos.
Una funcin de "comparacin" con un solo clic para comparar rpidamente los
cambios respecto al original.
Funcin copiar/pegar fotos sencilla que aumenta las ediciones entre imgenes
diferentes.

Todas estas operaciones son interactivas con actualizacin en tiempo real Mientras
ajustas los valores, la imagen se actualiza de forma instantnea. Son tambin 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 informacin (no se ilustran arriba) son
comunes a todas las herramientas y estn descritos anteriormente

Optimizacin automtica
Brillo
Contraste
Saturacin de color
Temperatura del color
Control de tonos
Desenfoque/Enfoque
Comparacin con el original

En esta herramienta puedes ajustar el brillo, el contraste, la saturacin, 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

podrs ajustar los valores todas las veces que quieras, solo tienes que arrastrar
el control deslizante. Otra alternativa es que mantengas presionado el botn del
ratn sobre el control y puedes usar la rueda del ratn para realizar pequeos
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 botn del ratn y arrastra el cursor sobre la
barra deslizante para ajustar el valor. Cuando sueltes el ratn el pop-up
desaparecer. Esta forma de trabajar es ms rpida porque solo tiene que hacer
clic y soltar para cambiar los valores.

www.magix.es
 La herramienta de fotos 357

Auto-optimizacin
Si haces clic en el botn "OPTIMIZAR" se realizar un anlisis general del brillo y el
contraste de la imagen y la imagen se optimizar automticamente para obtener una
mejor imagen. Esto es muy efectivo para las imgenes oscuras subexpuestas. Luego
de haber aplicado la auto-optimizacin a una foto podrs ajustar los valores que han
sido asignados con la optimizacin, usando los controles que se encuentran a la
derecha del botn "optimizar". Si haces clic sobre el botn "COMPARAR" se restaurar
la imagen original, y si haces clic otra vez sobre el mismo botn volvers a los valores
de optimizacin anteriores.

Brillo/Contraste/Temperatura del color/Saturacin/Tono

Brillo Contraste Saturacin Temperatura del
color

La imagen se actualiza al instante mientras ajustas los valores. La saturacin cambia

la intensidad del color. Si le colocas el valor mnimo -100, la imagen ser en blanco y
negro. El manejo de la temperatura del color hace que una imagen sea ms "clida" o
"fra". 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 imgenes 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 imgenes. Y aplica
la opcin de "enfoque" solo a imgenes que han sido reducidas mucho.

Uso de mscaras o regiones

Si deseas optimizar nicamente un rea especfica de tu foto, utiliza primero las
herramientas de regin de foto (en la pgina 267) para marcar el rea de la foto que
deseas modificar. O utiliza una herramienta de mscara para proteger las partes de la
foto que no quieras modificar.
358

Luego cambia a la herramienta de optimizacin y realiza las modificaciones. La

mscara o regin se utiliza para limitar las partes de la foto a las que se aplica la
operacin de optimizacin y luego obtendrs una regin dentro del grupo de fotos.
Cuando esta regin est seleccionada dentro del grupo de fotos, su contorno se
mostrar como "hormigas en movimiento". Para seleccionar una regin dentro de un
grupo de fotos, pulsa Ctrl y haz clic sobre ella o seleccinala desde la galera de
pginas y capas (en la pgina 85) en donde aparecer como un regin dentro de un
grupo de fotos (en la pgina 329). Si observas la lnea de estado tambin podrs darte
cuenta de si hay una regin o mscara seleccionada dentro de un grupo de fotos.

Ten en cuenta que casi siempre debers aplicar difuminacin a una regin dentro de
un grupo de fotos para suavizar sus bordes y mezclar el efecto de optimizacin de
forma ms fluida en la foto. Las regiones con bordes duros son tiles en muy pocas
ocasiones. Para ms detalles consulta la herramienta de difuminacin. Puedes aplicar
y ajustar la difuminacin en la regin dentro del grupo de fotos una vez que
selecciones dentro, o puedes aplicar difuminacin a la mscara o regin antes de
utilizar el efecto de optimizacin.

Foto izquierda con sombra parcial; foto derecha optimizada con brillo y difuminacin para
suavizar y mezclar el contorno.

Si quieres hacer ajustes a la forma de una regin dentro de un grupo de fotos, vuelve a
la herramienta de mscara o regin y realiza los cambios asegurndote de que la
regin o mscara est seleccionada (vers el contorno como "hormigas en
movimiento"). Mientras te encuentras en las herramientas de regin o mscara,
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 botn correspondiente de la barra de informacin de las
herramientas de regin y mscara.

Los contornos volvern a activarse una vez que elimines la seleccin o vayas a otra
foto o documento.
www.magix.es
 La herramienta de fotos 359

En MAGIX Web Designer 11 Premium las herramientas de mscara no se muestran

en la barra de herramientas principal al inicio. Si quieres usar estas herramientas,
puedes encontrarlas en la paleta de botones. Para ms detalles consulta Regiones de
foto y mscaras (en la pgina 267).

Comparar y restaurar el original

El botn 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 botn comparar por una segunda vez y recuperars tus valores
previos. Por lo tanto, puedes utilizar el botn "Comparar" para cambiar rpidamente
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 optimizacin o de niveles son "no destructivos", si
pulsas "Comparar" simplemente estars eliminando los atributos de optimizacin, y
de esta forma volvers a la imagen original. El botn "Comparar" puede ser utilizado
en cualquier momento despus de haber modificado la imagen.

Recortar o cortar imgenes

El modo ms fcil de cortar una foto es arrastrar el cursor sobre la foto o a lo largo de
la misma habiendo seleccionado la HERRAMIENTA DE OPTIMIZACIN . El corte se
efecta al instante de soltar el ratn. La foto cortada resultante tiene controles
deslizantes de clip alrededor de la misma donde puedes ajustar posteriormente los
bordes del recorte.

Esta es una operacin no destructiva, lo que significa que puedes ajustar el rea de
corte despus 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
rectngulo. 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 informacin para fotos. Esto suministra una gama de opciones
de recorte adicionales. Puedes introducir un valor exacto de pxeles y escoger entre
varias relaciones de aspecto de recorte.

Para un corte interactivo y algunas opciones ms en relacin con las

relaciones de aspecto, entra en el MODO DE CORTE con el botn HERRAMIENTA
DE CORTE .

La barra de informacin se ver as:

Mientras arrastras el cursor sobre la foto, el rectngulo 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 regin cortada de lugar si la arrastras
con el cursor.
Selecciona el botn CORTAR o haz doble clic dentro del rea de corte para
realizar un corte.

Podrs darte cuenta si una foto ha sido cortada o no si miras la barra de estado que
dir "foto cortada".

Borrar
Presiona el botn "BORRAR" , o haz clic fuera del rea de corte marcada para vaciar el
rectngulo de corte actual.
www.magix.es
 La herramienta de fotos 361

Regla de los tercios

Existe una norma fotogrfica que ayuda a componer fotografas 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 regin de clip a travs de tus lneas de fotos, se muestran las
lneas en los tercios a lo ancho y a lo largo de la imagen para ayudarte a posicionar los
objetos para seguir esta norma de composicin.

Consejo: busca "Regla de los Tercios" en Google para obtener ms informacin.

Deshacer corte
Pulsa el botn DESHACER CORTE sobre cualquier foto cortada seleccionada para
restaurar la foto original. Esto restaura el rectngulo de corte, que puedes ajustar o
borrar si haces clic fuera de l. El botn DESHACER CORTE en la HERRAMIENTA DE
CORTE cambiar el contorno de cualquier foto cortada, y tambin las formas creadas
arbitrariamente que contengan un relleno de mapa de bits, a un contorno de
rectngulo de la foto completa o a un mapa de bits utilizado como relleno. Puede ser
que tengas que seleccionar el botn "Borrar" para borrar el rectngulo de recorte (o
haz clic fuera del rectngulo).

Ajustando la regin cortada

Debido a que el botn "Deshacer corte" restaura el rectngulo de corte (mostrando el
rea de afuera ms oscura), puedes realizar finos ajustes a una foto cortada). Solo
selecciona la foto, pulsa el botn "Deshacer corte" y ajusta los lados del rectngulo de
corte como requieras. Haz doble clic dentro de la foto para cortarla otra vez.

Ancho / Alto
Luego de dibujar un rectngulo de corte puedes introducir valores directamente
dentro de los campos de ancho y alto en la barra de informacin fijar valores exactos
a las dimensiones del rectngulo de corte.

Bloquear aspecto
Selecciona el recuadro "BLOQUEAR ASPECTO" para mantener la relacin de aspecto del
rectngulo de corte mientras lo arrastras. Los botones de radio a la derecha del check-
box determinan la relacin de aspecto utilizada. Selecciona "ACTUAL" para mantener
la relacin de aspecto de la foto antes de cortarla. Ten en cuenta que el rectngulo de
corte cambia automticamente entre la forma orientacin de paisaje y retrato a
medida que arrastras el cursor hacia una esquina del rectngulo. Entonces si lo
arrastras lateralmente, tiende a crearse un corte con orientacin paisaje. Si lo
arrastras hacia abajo, entonces se crear una regin cortada con orientacin retrato.
362

Las relaciones de aspecto ms comunes para recortes predeterminados disponibles

son 4:3 (mayora de cmaras digitales para consumidores y televisores y monitores
de estilo antiguo), 3:2 (filmadoras tradicionales y cmaras digitales SLR de alta
calidad) y 16:9 (relacin de aspecto para televisores con pantalla ancha).

Puedes anular la opcin "bloquear aspecto" si pulsas "Ctrl" mientras arrastras el ratn.
De modo que si ests arrastrando un rectngulo de corte (o ajustando uno) sin la
relacin de aspecto bloqueada, mientras ests pulsando "Ctrl" entonces se mantendr
el aspecto de la ltima relacin de aspecto seleccionada. De la misma forma, si tienes
la opcin "bloquear aspecto" activada y presionas "Ctrl", se desbloquear
temporalmente el aspecto bloqueado.

Cortar en documentos fotogrficos

En el modo foto hay una cuadrcula de 1 pxel que se aplica a la foto (cuando tiene 96
dpi, la resolucin por defecto) y el rectngulo de corte se ajustar a la cuadrcula. Esto
hace muy fcil realizar un corte con una exactitud de pxel por pxel. Para realizar
ajustes muy precisos o del tamao de 1 pxel se recomienda operar en modo foto y
acercarse con el zoom para poder ver los pxeles ms claramente. Ver Documentos
fotogrficos (en la pgina 351) para ms informacin.

Notas para la herramienta de foto

1. Puedes seleccionar diferentes fotos mientras usas las HERRAMIENTAS DE FOTO
con solo hacer clic sobre ellas. Tambin puedes seleccionar fotos que se
encuentran en un grupo.
2. Si haces clic y arrastras mientras te encuentras en la HERRAMIENTA DE
OPTIMIZACIN , 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 botn DESHACER CORTE en la HERRAMIENTA DE CORTE cambiar el contorno de
cualquier foto cortada, y tambin las formas creadas arbitrariamente que
contengan un relleno de mapa de bits, a un contorno de rectngulo de la foto
completa o a un mapa de bits utilizado como relleno. Es posible que tengas que
seleccionar el botn "Borrar" para borrar el rectngulo de recorte (o haz clic
fuera del rectngulo).
4. Todas las operaciones para las fotos pueden deshacerse. A diferencia de las
fotos tradicionales o de los editores de pxeles, 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 edicin son no destructivas y
sin prdidas) y sin que el tamao 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 tambin 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. Despus de editarla, puedes sobrescribir
la foto, si escoges la opcin ARCHIVO->GUARDAR ("Ctrl+S"). Tambin 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 captulo Manejo de
fotos para ms informacin.

La herramienta de ojos rojos

La herramienta de OJOS ROJOS te permite eliminar rpidamente los efectos
de ojo rojo de los rostros de las fotos.

Haz clic en el smbolo anterior para ingresar en el modo de ojos rojos. Luego:
Ampla la vista de los ojos rojos, con la HERRAMIENTA DE ZOOM (EN LA PGINA 80)
o simplemente utiliza Ctrl+rueda del ratn.
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 crculo.
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. Despus, puedes
pulsar la tecla eliminar para quitar el parche.

Tambin 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 elptica 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 informacin sobre su utilizacin para editar elipses. Sin embargo,
para la mayora 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 difuminacin de 3 pxeles, para que
no se produzca un corte duro en el rea de donde se elimina el ojo rojo. Puedes
ajustar fcilmente este valor de difuminacin si seleccionas la elipse de ojo rojo
(como se ha mencionado anteriormente) y ajustas el valor de difuminacin con el
control de difuminacin principal (del lado derecho de la barra superior), de la misma
forma que editas el valor de difuminacin de las formas usuales.

Despus de aplicar la herramienta de ojo rojo, los parches de ojo rojo estn 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, necesitars pulsar Ctrl
mientras haces clic sobre la elipse (lo que se llama una operacin "seleccionar
dentro"). Lee el captulo sobre Trabajar con fotos para informacin acerca de los
Grupos de foto (en la pgina 329).

Haz clic sobre el botn LIMPIAR TODO en la barra de informacin 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

Introduccin
NOTA: esta herramienta est incluida en la versin de 64 bits de Web Designer
Premium por razones legales, para documentos que usan efectos de sombra o de
difuminacin de mapas de bits, los cuales funcionan en la versin de 64 bits. La
versin de 64 bits no es compatible con los plug-ins normales de 32 bits de
Photoshop y los efectos de 64 bits no estn 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 informacin
de la herramienta de Efectos en vivo con un clic sobre el botn "Nuevo".

Aadir un nuevo efecto

Lista de efectos aplicados en orden
Editar el efecto seleccionado
Resolucin 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 botn NUEVO en la parte izquierda de la barra de informacin.
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 DIFUMINACIN 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 ms adelante para
obtener una explicacin de estos diferentes tipos).
366

4. Selecciona de la lista el efecto que quieres aplicar.

5. Esto mostrar un dilogo o herramienta del efecto. Puedes ajustar varios
controles y generalmente podrs ver una vista previa del efecto en el dilogo.

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, podrs seguir editando el objeto sin
problema. Cada ve que lo editas, el efecto en vivo se vuelve a aplicar
automticamente al objeto. Para efectos bloqueados, esto no es posible y debes
eliminar el efecto usando el botn ELIMINAR de la barra de informacin de los efectos
en vivo, despus editar la forma y finalmente volver a aplicar el efecto.

Bloquear efectos
Cuando cambias el tamao o giras un objeto que tiene aplicado un efecto en vivo,
Web Designer lo considera una edicin 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 estn BLOQUEADOS al aplicarlos. Esto

significa que la capa subyacente no puede editarse. Tambin puedes bloquear un
efecto en vivo para que permanezca fijo al cambiar el tamao o girar el objeto, como
si estuvieras girando o cambiando el tamao de un mapa de bits.

Como ejemplo de esto, imagina un plug-in que siempre aplica ondas horizontales. (El
efecto en vivo "Televisin" muestra algo similar). Aplica este efecto a la forma y vers
una lnea horizontal sobre ella. Si despus giras la forma, querrs que las ondas giren
tambin? De ser as, bloquea el efecto antes de la rotacin. Si, por el contrario, quieres
que el efecto de ondas horizontales se vuelva a aplicar en el rectngulo girado, dejar el
efecto sin bloquear.

Cuando un efecto en vivo est bloqueado, el efecto gira con el objeto (izquierda).

Si envas los diseos a otras personas para que los carguen pero no tienen los plug-in
utilizados en el diseo, no vern 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 despus haz

clic en el smbolo del CANDADO de la barra de informacin de los EFECTOS
EN VIVO . Para desbloquear un efecto que has bloqueado de esta forma,
vuelve a hacer clic sobre el CANDADO.

Todava puedes modificar la resolucin del efecto. Es posible que quieras utilizar una
resolucin mayor para la impresin que si solamente quieres trabajar en pantalla.

Resolucin de los efectos en vivo

Para la utilizacin en pantalla y web, se recomienda no modificar la resolucin por
defecto de 96 DPI (la misma que la resolucin de pantalla). Si necesitas una imagen
con resolucin mayor, por ejemplo, si quieres imprimir o exportar un mapa de bits de
alta resolucin, puedes aumentar este valor a 150 DPI o ms. Cuanto mayor sea la
resolucin, ms tiempo se necesitar para generar o volver a generar el efecto
(porque tiene que trabajar con un mapa de bits mucho ms grande) y ms memoria
se necesitar.

Puedes configurar la resolucin de un efecto en vivo como "automtico" en vez de

escoger un valor DPI fijo. Con esta configuracin, el efecto se volver a generar
automticamente cuando sea necesario y con la resolucin ms apropiada. Por
ejemplo, si imprimes un diseo que contiene efectos en vivo, cualquier efecto
configurado como AUTOMTICO se regenerar en la resolucin de impresin si
todava no se encuentra en esa resolucin o en una mayor. En un diseo grande con
muchos efectos, esto puede hacer que la impresin sea ms lenta porque cada efecto
debe volver a generarse en alta resolucin.

Puedes cambiar la resolucin que se utiliza para renderizar los efectos en la pestaa
EFECTOS Y PLUG-INS del dilogo de OPCIONES . El valor por defecto es 96 DPI. Una vez
que modificas esta configuracin, todos los efectos que apliques posteriormente se
realizarn con la resolucin seleccionada. Cambiar la configuracin no modificar la
resolucin de los efectos que ya se han aplicado.

Para ms informacin sobre el dilogo de opciones, lee el captulo Personalizacin

de Web Designer.

Para cambiar la resolucin 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
diseo para ver una representacin precisa del texto en el documento). Para
garantizar que el receptor pueda ver los efectos de tu diseo, bloquea los efectos
antes de guardar.
368

Cuando est cargado un diseo que utilice efectos que no estn instalados, se emitir
un aviso para notificar al usuario que es posible que el diseo no se vea de la forma
pensada por el diseador.

Dado que los efectos bloqueados se guardan como mapas de bits en el archivo Xara,
los archivos sern ms grandes que para los efectos en vivo sin bloquear.

Copiar efectos en vivo

Para ms informacin sobre copiar y pegar, lee el captulo Trabajar con objetos (en
la pgina 111).

Puedes copiar efectos en vivo en tu diseo desde un objeto a otro utilizando PEGAR
ATRIBUTOS , de la misma forma que copias todos los dems atributos. Simplemente
selecciona el objeto con el/los efecto/s que quieres copiar y escoge Edicin > Copiar.
Despus selecciona el objeto u objetos a los que quieres copiar los efectos y escoge
Edicin > 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 tamao teniendo en cuenta el

contenido
En Web Designer la herramienta CAMBIO DE TAMAO 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 desplzate 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 vaca 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" arrastrndola sobre la barra de herramientas. (Mantn "Alt" pulsado,
arrastra el botn y sultalo sobre un icono de la barra de herramientas).

Se puede arrastrar el botn de cambio de tamao teniendo en cuenta el contenido

sobre la herramienta de foto desplegable si te aseguras de que est abierto antes de
que sueltes el botn, pero ten en cuenta que no se situar en esta posicin cuando
vuelvas a reiniciar el programa.

Web Designer incluye ahora la posibilidad de ampliar las fotos con una nueva tcnica
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 proporcin de aspecto

de los objetos usuales y la mayora de las personas puede reconocer cuando algo es
incorrecto en las imgenes que se han extendido o reducido levemente.

Aqu hay una foto de ejemplo del famoso

arco Torii en Japn. Claramente el arco es el
objeto principal de esta foto.

Aqu la foto se ha
extendido utilizando
el mtodo de
extensin normal de
la HERRAMIENTA DE
SELECCIN . Aun con
esta extensin
moderada, es obvio
que las proporciones
del arco se han
distorsionado de
forma incorrecta.

Extender utilizando "Cambio de tamao teniendo en cuenta el contenido". Sigue pareciendo

perfectamente natural. Las proporciones se han conservado, aun con esta extensin extrema, que
es dos veces ms ancha que el original. La lnea de la costa extendida contina pareciendo
natural.
370

Preparar tu foto
La funcin de modificacin del tamao con contenido forma parte de las herramientas
de FOTO.

Selecciona tu foto y de la barra desplegable de la herramienta de foto,

selecciona el BOTN DE CAMBIO DE TAMAO CON CONTENIDO. El extremo
derecho de la barra de informacin muestra ahora un conjunto de botones.

Selecciona una foto, ve a herramienta de foto y la barra de informacin debera tener

el aspecto siguiente;

Primero haz clic en el botn PREPARAR para preparar la foto para el cambio de
tamao. Esto inicia un anlisis 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 resolucin de la foto y de cuntos procesadores tenga tu PC.

Para una imagen con una resolucin realmente alta, se recomienda reducir la
resolucin de imagen si no necesitas la resolucin mxima. Haz esto antes de
seleccionar los botones Preparar. Para reducir la resolucin de tu foto, selecciona el
botn OPTIMIZAR e introduce un ancho en pxeles o una resolucin en dpi en le
dilogo. El tamao de la imagen en la pgina no cambiar, solo cambia la resolucin o
el nmero de pxeles de la foto. Despus de preparar la imagen aparecern nuevas
flechas de modificacin de tamao en los lados de la foto. Simplemente tira de stas
para ampliar o reducir la imagen en la direccin deseada.

Optimizar
Las fotos que han sido preparadas para permitir la modificacin de tamao con
contenido tienen datos adicionales guardados junto a las mismas para permitir
ajustes posteriores. Cuando guardas un documento, estos datos adicionales tambin
se guardan, por lo que puedes cargar este documento y continuar ajustando el ancho
y la altura sin necesidad de realizar otra operacin Preparar.

Cuando termines de modificar el tamao de la foto, se recomienda que "fijes" los

cambios utilizando la funcin Optimizar. Esto convertir la imagen ampliada de nuevo
en una imagen JPEG incrustada, a cualquier resolucin, y as se guardar el tamao de
archivo de forma sustancial.

Restablecer
Si haces clic en el botn "Restablecer", se restablece la imagen volviendo a su estado
original y borrando cualquier reduccin o cualquier mscara que se pueda haber
aplicado.

www.magix.es
 La herramienta de fotos 371

Uso de mscaras con la funcin "Cambio de tamao

teniendo en cuenta el contenido"
Si utilizas la herramienta de mscara podrs tener mayor control para evitar que las
reas protegidas de la foto se distorsionen. Las reas con mscara no se
distorsionarn de ninguna forma. Lee el captulo Mscaras (en la pgina 267) para
ms informacin acerca de las mscaras. Igualmente encontrars a continuacin un
resumen sobre la uso de mscaras con el cambio de tamao teniendo en cuenta el
contenido.

Para proteger una o ms reas de la foto contra la distorsin:

1. Selecciona una de las herramientas de mscara de la barra desplegable

HERRAMIENTAS DE MSCARA y selecciona la parte o partes de la foto que quieres
proteger.
2. Ahora ve a la herramienta "Cambio de tamao teniendo en cuenta el contenido"
y haz clic en la foto.

Ahora, cuando uses el botn PREPARAR , esta rea estar protegida contra la
distorsin. Es posible que necesites seleccionar la foto para habilitar el botn
PREPARAR .

Nota: puedes enmascarar ms de la mitad de la imagen. La operacin de

preparacin dar un error si pruebas esto.

Ajustar una mscara o aadir una nueva mscara

No puedes aadir una mscara a una imagen que ya has extendido. Si deseas aadir
una nueva mscara o ajustar la existente, tienes las siguientes opciones:

1. Haz clic en el botn RESTABLECER y dibuja una nueva mscara.

2. Haz clic en deshacer la cantidad de veces necesarias para regresar a la mscara
y despus utiliza las herramientas de dibujo normales para ajustar las formas de
la mscara.
3. O bien, antes de seleccionar los botones PREPARAR , copia la mscara al
portapapeles. Si deseas utilizarla posteriormente, RESTABLECE la imagen, vuelve
a activar la HERRAMIENTA DE MSCARA y pega la forma en la capa de mscara.

Existe otra alternativa en la que puedes "fijar" una imagen extendida utilizando la
funcin OPTIMIZAR y despus aplicar la nueva mscara. En la mayora de los casos
esto no es recomendable porque produce resultados de menor calidad que al
restablecer la imagen y aplicar la mscara a la imagen original.
372

Zoom de foto teniendo en cuenta el contenido

Una alternativa al cambio de tamao con contenido en que la foto conserva su
tamao pero el contenido se ampla de forma inteligente. Aqu se ilustra un ejemplo
del efecto.

Utiliza la barra de zoom de la barra de informacin para

controlar el zoom de la foto con contenido.

La imagen conserva el mismo tamao pero el programa detecta y ampla

automticamente el contenido "interesante". Ten en cuenta que esto no es un recorte
de la chica, sino que todos los elementos, nubes y csped que aparecen en el original
estn ampliados en la versin ampliada. El programa detecta automticamente que el
surfer es la "regin de inters" por lo que lo ampla.

Otro ejemplo:

El programa ha determinado que las flores, no las hojas del fondo, son el rea de
inters, por lo que ha ampliado esas partes. Con la funcin de mscara puedes
proteger cualquier parte de la imagen de la distorsin a pesar de que estos dos
ejemplos anteriores no utilizan ninguna mscara.

www.magix.es
 La herramienta de fotos 373

Modificacin de tamao con contenido alternativa

Cuando amplas fotos hay dos formas alternativas de modificar la imagen. El mtodo
de arrastrar las flechas de tamao 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 modificacin de tamao con contenido, se
utilizar una escala inteligente diferente con un algoritmo que tendr mejores
resultados en algunas fotos.

Notas acerca de Cambio de tamao 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
tamao teniendo en cuenta el contenido, entonces se guardar la informacin de
cambio de tamao en el documento. La ventaja es que despus puedes reajustar
la foto utilizando la caracterstica para tener en cuenta el contenido. Existe una
gran ventaja de tamao de archivo significante de guardar las fotos de esta
forma.

Creacin de panormicas
MAGIX Web Designer 11 Premium incluye una herramienta que puede unir
hasta 8 fotografas automticamente para convertirlas en una nica
panormica de alta resolucin.
La creacin de una panormica de alta calidad puede tornarse en un proceso muy
tcnico y complejo. En general requiere la utilizacin de un equipo y lentes especiales
para obtener fotografas con la misma alineacin y exposicin. Con la herramienta
para crear panormicas que viene con el MAGIX Web Designer 11 Premium no
necesitars nada de esto y puedes utilizar una cmara digital de uso diario y podrs
crear imgenes panormicas de alta excelente calidad en tan solo un par de minutos.

Caracterstica de esta herramienta:

Clculo automtico de distancia focal para optimizar imgenes y minimizar el

efecto "ojo de pez"
Ajustes: distorsin de barril (automatic barrel), distorsin de cojn (pin cushion)
y efecto vieta
Correccin automtica de exposicin
Deteccin automtica de puntos superpuestos compartidos y unin
"transparente" de lneas
Recorte automtico del resultado final

Para crear una panormica debes sacar una serie de fotos desde un lugar en donde te
encuentres parado en una posicin central con respecto al objeto a fotografiar.
374

Idealmente cada foto se superpondr con la prxima en un 30%, aunque funcionar

con ms o menos superposicin.

El proceso de creacin de una panormica 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 botn PANORMICA en la barra desplegable de la HERRAMIENTA DE
FOTO .

Comenzar el proceso de unin (stitching) y continuar como proceso de fondo. Se

abrir una ventana emergente (pop-up) que te indicar el progreso por los distintos
estadios, aunque podrs seguir utilizando el MAGIX Web Designer 11 Premium
normalmente mientras avanza. Cuando est completo el proceso, la imagen
panormica ser importada a la pgina. Ten cuenta que esta no reemplaza las
imgenes 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
ms de lo necesario).

La imagen panormica final es el resultado de la unin sin transiciones del grupo de fotos
originales.

www.magix.es
 La herramienta de fotos 375

Optimizar imgenes
El MAGIX Web Designer 11 Premium siempre une las fotos en alta resolucin, incluso
si has reducido el tamao de la imagen en la pgina. Esta caracterstica es muy
prctica porque produce resultados de mxima calidad con la resolucin ms alta
posible. Pero esto s quiere decir que la composicin de una panormica necesita un
par de minutos. Por eso, a veces es mejor reducir la resolucin de las imgenes antes
de crear la panormica, especialmente si solo necesitas un resultado final con una
resolucin de calidad mediana, como para la web.

Para reducir la resolucin de cualquier imagen, reduce la imagen en la pgina al

tamao requerido y luego utiliza la opcin "HERRAMIENTAS > OPTIMIZAR FOTO". Ten
en cuenta que la herramienta para crear una panormica (panorama stitcher)
funciona mejor con imgenes en alta resolucin (ya que de esta forma le es ms fcil
al programa encontrar los partes que se repiten en las diferentes fotos para realizar la
unin).

Cuando est lista la imagen panormica 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 panormica en alta
resolucin. (La GALERA DE MAPA DE BITS te indicar cunto espacio necesita). Por
ello, es recomendable que reduzcas la resolucin de la imagen final y luego la
conviertas a JPG. Para realizar esta accin, utiliza nuevamente la opcin
"HERRAMIENTAS ->OPTIMIZAR FOTO".

Notas:
La herramienta creadora de panormicas (panorama stitcher) requiere que
todas las fotos tengan el mismo tamao y resolucin.
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 mxima
vertical.

Actualizaciones para el Panorama Studio

Si as lo deseas puedes descargar una versin ms flexible y poderosa del programa
Panorama Studio. Esta actualizacin te ofrece ms herramientas y controladores para
la creacin de una panormica. 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 opcin de utilizarlo en lugar de

la versin estndar cuando seleccionas el botn "Panormica".
376

Herramienta de extrusin 3D
La HERRAMIENTA DE EXTRUSIN ofrece una rpida 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 tecnologa de Xara 3D utilizada.

Te permite realizar -arrastrando con el ratn a la pantalla- rotaciones de objetos 3D

en tiempo real, la adaptacin de la profundidad de extrusin y el desplazamiento de
tres fuentes de luz en un espacio 3D alrededor del objeto.

La barra de informacin permite la seleccin de los tipos de bordes que se podrn

visualizar a lo largo de la extrusin. Puedes optar entre una seleccin de ms de 25
tipos de contornos.

Extrudir una forma

Para cambiar una forma 2D a un objeto extrudido 3D, ve a la herramienta de
extrusin 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 extrusin. El color del frente de

la forma 3D tendr el color del relleno de la forma original y el color de la extrusin
www.magix.es
 Herramienta de extrusin 3D 377

(los costados del objeto 3D) ser del mismo que el color de la lnea de la forma. Luego
de haber creado una extrusin, mueve el cursor del ratn sobre el objeto 3D. Vers
que el cursor ir cambiando de smbolos en la pantalla para indicar qu ocurrir si
haces clic y arrastras a otros puntos del diseo:

Vers esto cuando el cursor del ratn est sobre el frente o el reverso del
objeto. Si haces clic y luego arrastras el ratn, el objeto girar en el espacio
3D.
Esto se puede visualizar cuando el cursor del ratn se encuentra sobre la
extrusin (costados del objeto extrudido). Si haces clic y luego arrastras el
ratn cambiars la profundidad de la extrusin.

Vers esto cuando el cursor del ratn se encuentra sobre la extrusin y

mantengas presionado el botn "Ctrl". Haciendo clic y luego arrastrando el
ratn cambiar el tamao del bisel (ver abajo).

Barra de informacin de Herramienta de

extrusin

Extrusin On/Off
Lista de tipo de barra deslizante
Valor numrico y de barra deslizante para el parmetro seleccionado
Tipo de bisel
Barra deslizante y valor del tamao de bisel
Luces On/Off
Brillo/Mate
Esquina con inglete/Esquina redonda

Puedes ajustar un objeto 3D extrudido de forma manual, directamente en la pgina

como se describe ms arriba, o seleccionndolo y utilizando los controles de la barra
de informacin de la Herramienta de extrusin.

Activar o desactivar (on/off) la extrusin

EXTRUSIN 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 edicin de forma" porque

ya no es ms una forma simple de 2D con la que puedes interactuar. Sin embargo, si
utilizas este control puedes "desactivar" temporariamente la extrusin para poder
visualizar y modificar el objeto subyacente utilizando otras herramientas, antes de
volver a activar la extrusin otra vez. Luego de realizar la modificacin y de activar la
extrusin, la extrusin se volver a aplicar a tu objeto 2D modificado, con todos los
mismos atributos 3D que tena antes de haber desactivado la extrusin.

Ten en cuenta que en algunos casos si cambias mucho la forma del objeto mientras
la extrusin est desactivada (p. ej. cuando transformas un objeto a una forma
completamente diferente), puede ocurrir que los atributos de la extrusin 3D que
hayas aplicado no se haya conservado. En estos casos puedes utilizar PEGAR
ATRIBUTOS para copiar los atributos de una copia de tu extrusin original antes de la
modificacin. Ver Copiando estilos: pegar atributos (en la pgina 139).

Profundidad de la extrusin
La forma ms fcil de ajustar la profundidad de la extrusin es que hagas clic y luego
arrastres el cursor sobre la extrusin como ha sido explicado arriba. Aunque tambin
para realizar ajustes puedes utilizar la barra deslizante, que se encuentra en la parte
izquierda de la barra de informacin de la herramienta de extrusin. Asegrate de
haber seleccionado PROFUNDIDAD DE EXTRUSIN en la lista desplegable a la izquierda
de la barra deslizante (esta es la configuracin que viene por defecto). La profundidad
de la extrusin actual se puede visualizar en el campo numrico a la derecha de la
barra deslizante, tambin puedes introducir al campo tus valores para la profundidad
de la extrusin.

Tipo y tamao del bisel

El tipo de bisel determina el perfil que tendrn los costados, los bordes y las esquinas
de la extrusin 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 seleccin de
distintos tipos de biseles de las que puedes elegir. Puedes ajustar el tamao 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 numrico que muestra el tamao
actual del bisel, y si quieres puedes introducir otro tamao de bisel.

Un atajo (shortcut) alternativo para ajustar el tamao del bisel es que arrastres el
cursor al costado del objeto 3D mientras mantienes presionado el botn "Ctrl" (con la
herramienta de extrusin activada).

Luces
LUCES ON/OFF

Si activas las luces podrs ajustarlas a tu gusto en el espacio 3D . Hay tres luces a las
que se les puede asignar un color propio y una posicin especfica en el diseo.
www.magix.es
 Herramienta de extrusin 3D 379

En este ejemplo, el color del frente de la

forma ser blanco. Pero vers que se ve
verde porque hay una luz verde que ilumina
casi directamente la "cara" (frente) de la
forma.
Podrs optimizar los objetos 3D en tu
diseo ajustando sus colores y las
posiciones de las tres luces.

Detrs del objeto hay una luz de color beige/naranja y otra de color prpura. Ambas
luces generan reflejos en los costados, y si cambias el color o la direccin de las luces
que se encuentran detrs del objeto, los reflejos de las luces tambin cambiarn.

Para mover una luz alrededor del objeto 3D, arrastra la flecha de la luz. Si sueltas la
luz detrs del objeto 3D (ya no la podrs seleccionar), puedes recuperarla utilizando
la barra deslizante de la izquierda en la opcin "Extrudir" de la barra de informacin.
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 diseo. Las distintas opciones de "ngulos de luz" de esta lista desplegable
te permiten mover todas las luces en cualquier direccin del espacio 3D para lograr
las posiciones que desees. Sin embargo, en general tambin obtendrs buenos
resultados arrastrando las flechas de luz a la pgina.

Para cambiar los colores de las luces, slo 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 podrs
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 extrusin, el color
seleccionado de la lista desplegable del editor de color cambia para que coincida con
el de la seleccin; as podrs seleccionar y cambiar rpidamente los diferentes colores
de tu extrusin.

Brillo / Mate
Utiliza este botn para hacer la superficie del objeto 3D ms o menos
reflectante. Con la opcin de brillo y la luz posicionada en el lugar correcto
detrs 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 slo
importar una foto y luego aplicarle una extrusin.

Este efecto se genera cuando realizas una extrusin de una foto y la giras un poco, creando una
copia reflejada por medio de la herramienta de seleccin, y ajustando el ngulo 3D para que
coincidan. Luego se le da una transparencia graduada para crear un reflejo ms oscuro.

Puedes utilizar cualquier foto o textura para el frente de tu extrusin. Puedes importar
tu imagen y realizarle una extrusin como se explic arriba, o arrastra y suelta una
imagen sobre el frente de una extrusin existente mientras presionas "Shift". Se habr
aplicado la foto o la textura en el frente (cara) del objeto extrudido.

Extrudir texto
Puedes realizar una extrusin a un texto de la misma forma que se le puede realizar a
una forma. Haz clic y arrastra el ratn sobre el texto mientras utilizas la herramienta
de extrusin. 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 extrusin 3D 381

Como el texto en general es negro, al menos que cambies el color de la extrusin

resultante tambin ser totalmente negro (esto hace difcil su visualizacin). Por ello,
se recomienda cambiar el color antes de realizar la extrusin (aunque puedes
cambiarlo luego con slo hacer clic en un color).

Como ocurre con otros objetos extrudidos, si quieres editar el texto, slo tienes que
desactivar la extrusin utilizando el botn de la izquierda de la barra de informacin
para realizar extrusiones, edita el texto y luego vuelve a activar la extrusin con el
mismo botn.

Copiar atributos de una extrusin 3D

Puedes copiar y pegar el estilo de una extrusin 3D, de un objeto 3D a otro. Esta
opcin 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, despus selecciona EDITAR -> PEGAR ATRIBUTOS . Ten en cuenta que esta
accin slo 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 extrusin, los
colores de la luz, tipo de bisel, y los colores del frente del objeto y los bordes.

Insertar sombras detrs del objeto

Utilizando la herramienta de sombra puedes optimizar el efecto 3D colocando una
sombra tenue detrs del objeto. Slo 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 navegacin
La mayora de los sitios web tienen una barra de navegacin horizontal o vertical,
desde la que puede accederse a todas las pginas importantes.

MAGIX Web Designer 11 Premium incluye funciones especiales para las barras de
navegacin, que facilitan la insercin, edicin y eliminacin de botones. Los botones
de una barra de navegacin pueden ajustar el ancho para coincidir automticamente
con sus etiquetas y se reposicionan automticamente cuando realizas cambios. Hasta
puedes agregar mens y submens desplegables a tus barras y hacer que se puedan
agregar o eliminar botones automticamente al agregar o eliminar pginas.

Los usuarios avanzados pueden crear sus propias barras a partir de diseos de
botones propios y modificar los diseos de botones existentes en una barra de
navegacin para aplicar su nuevo diseo en toda la barra.

Web Designer y las barras de navegacin

La mayora de los sitios web tienen una barra de navegacin horizontal o vertical,
desde la que puede accederse a todas las pginas importantes.

MAGIX Web Designer 11 Premium incluye funciones especiales para las barras de
navegacin, que facilitan la insercin, edicin y eliminacin de botones. Los botones
de una barra de navegacin pueden ajustar el ancho para coincidir automticamente
www.magix.es
 Barras de navegacin 383

con sus etiquetas y se reposicionan automticamente cuando realizas cambios. Hasta

puedes agregar mens y submens desplegables a tus barras y hacer que se puedan
aadir o quitar botones automticamente al agregar o eliminar pginas.

Los usuarios avanzados pueden crear sus propias barras a partir de diseos de
botones propios y modificar los diseos de botones existentes en una barra de
navegacin para aplicar su nuevo diseo en toda la barra.

Usar de barras de navegacin de plantillas

La galera de diseos contiene una amplia variedad de barras de navegacin de
plantillas para tu uso. Son tanto barras horizontales como verticales y son
completamente personalizables. Tan solo arrastra y suelta una barra desde la galera
hasta tu pgina. O reemplaza una barra existente soltando la nueva encima: la nueva
barra adopta todos las etiquetas de los botones, enlaces y mens 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 funcin 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 lnea 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 pgina 186) para ms informacin

sobre edicin de temas de colores y mira en "Reemplazar colores" para saber como
puedes personalizar los colores fcilmente.

Tambin se puedes crear barras de navegacin desde cualquier diseo de botn: si

quieres crear tu propia barra, consulta ms adelante en la seccin correspondiente
de este captulo.
384

Dilogo Propiedades de la barra de navegacin

La mejor forma de editar las etiquetas, enlaces y otros atributos de una barra de
navegacin y de agregar o eliminar botones, es utilizar el dilogo de propiedades de la
barra de navegacin. Haz doble clic sobre una barra para abrir el dilogo o un clic
derecho sobre la barra y escoge "EDITAR BARRA DE NAVEGACIN " del men
contextual.

La mitad superior del dilogo te permite establecer diversas propiedades de la barra

de navegacin. La parte inferior te permite agregar y eliminar botones y mens y
editar las etiquetas y enlaces de cada botn y entrada del men.

Orientacin
Escoge la orientacin horizontal o vertical que desees para tu barra de navegacin.
Para las barras de navegacin verticales generalmente querrs que los botones
tengan el mismo ancho (el ancho del botn ms ancho), para obtener una barra
rectangular. Consulta la opcin AJUSTAR TODOS LOS BOTONES A LA ETIQUETA MS
ANCHA a continuacin para controlar esto.

Justificado
Escoge el comportamiento que deseas para tu barra cuando cambie su longitud al
editar etiquetas o aadir/quitar botones. Una barra horizontal JUSTIFICADA A LA

www.magix.es
 Barras de navegacin 385

IZQUIERDA crecer hacia la derecha a medida que agregas ms botones o extiendes la

longitud de las etiquetas de los botones. El extremo izquierdo de la barra
permanecer en el mismo lugar en la pgina. 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 opcin central si, por ejemplo, quieres que la barra de
navegacin horizontal se centre en la parte superior de tu pgina.

Para barras verticales, las opciones de justificacin cambian a Arriba, Centro y Abajo.
En el caso de las barras verticales, la configuracin 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 opcin si quieres que los botones se extiendan, reduzcan o crezcan para
ajustarse al texto de la etiqueta. Si esta opcin est desactivada, tus botones
conservarn el mismo tamao de forma que una etiqueta que sea demasiado extensa
para el botn sobrepasar los extremos del botn.

Mismo ancho para todos los botones

Esta opcin est disponible slo si la opcin "Ajustar el ancho de los botones a las
etiquetas" est activada.

Selecciona esta opcin para hacer que todos los botones tengan el mismo ancho que
el botn ms ancho de la barra. Para las barras de navegacin 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
tamao, pero requiere ms espacio, por lo que es posible que no puedas incluir tantos
botones en la barra si esta opcin est activada.

Espaciado de botn
Aqu puedes escoger el espacio entre cada botn en la barra de navegacin horizontal
si no quieres que cada botn se encuentre justo arriba de su vecino. Simplemente
introduce la cantidad de pxeles de espacio que te gustara y observa el resultado de
inmediato.

El orden de los botones coincide con el orden de la pgina

Al activar esta opcin, el orden de los botones de la barra de navegacin coincidir
con el orden de las pginas del documento. Si cambias el orden de las pginas en la
GALERA DE PGINAS Y CAPAS , la barra de navegacin tambin se reordenar. Esto es
especialmente til para las barras de navegacin de los sitios web con
presentaciones, en los que es importante mantener el orden lineal de las pginas y
para los que deseas que los botones de la barra tengan el mismo orden de las pginas
de la presentacin.
386

Barra de navegacin del sitio

Esta es una opcin muy importante en el DILOGO BARRA DE NAVEGACIN que activa
los enlaces automticos, es decir, que los botones y los enlaces se agregarn solos a
medida que agregas pginas. Adems, todos los cambios que hagas a la barra se
reflejarn en todas las pginas del sitio tan pronto como cierres el dilogo Barra de
navegacin.

Por lo general activas esta opcin si quieres que tu barra de navegacin aparezca en
todas las pginas de tu sitio web. Sin embargo, puedes eliminar manualmente la barra
de algunas pginas si as lo deseas.

Esta barra de navegacin del sitio tambin es til para completar automticamente
las entradas de men en un solo botn de barra de navegacin despus de convertirlo
desde un botn mltiple de barra de navegacin. Ver Botn nico de barra de
navegacin (en la pgina 387) para ms informacin.

Desplazamiento y tranformacin de una barra de

navegacin del sitio
Si mueves una barra de navegacin del sitio sobre la pgina, la barra tambin se
mueve en todas las pginas en las que aparece. De la misma forma, si cambias el
tamao de la barra con la HERRAMIENTA DE SELECCIN, la transformacin se aplica a
todas las copias de la barra en otras pginas. No puedes realizar ninguna otra
transformacin de una barra de navegacin con la HERRAMIENTA DE SELECCIN
(rotacin, extensin, cambio de tamao en una sola dimensin).

Enlace automtico de pginas

Cada vez que agregues una nueva pgina a tu sitio, un enlace a esa pgina se
agregar a tu barra de navegacin del sitio y la nueva pgina obtendr una copia de la
barra, si todava no la tiene. Si tu barra cuenta con un botn sin usar, entonces ese
botn se enlazar con la nueva pgina. Si todos los botones ya contienen un enlace,
se agregar un nuevo botn al final de la barra y se lo enlazar con la nueva pgina. En
ambos casos, la etiqueta del botn se modifica para que coincida con el nombre de la
nueva pgina, si tiene un nombre o a "Nueva pgina" si no lo tiene. Generalmente
querrs editar de inmediato la nueva etiqueta en el dilogo de la barra de navegacin.

Si eliminas una pgina de tu sitio web, el botn de la barra de navegacin del sitio que
contiene el enlace con esa pgina se eliminar automticamente en todas las pginas
de tu sitio.

Activacin y desactivacin de las barras de navegacin del

sitio
Al activar y desactivar la opcin de navegacin del sitio en el dilogo de barra de
navegacin, el cambio se refleja en todas las copias de esa barra.
www.magix.es
 Barras de navegacin 387

Eliminacin de una barra de navegacin del sitio de una

pgina
Si quieres que la barra de navegacin del sitio no aparezca en una pgina en particular
de tu sitio, simplemente haz clic en ella para seleccionarla en esa pgina y pulsa
Eliminar. Se te preguntar si quieres eliminar la barra de esa pgina sola o de todas.

Sin embargo, tras eliminar la barra de una o ms pginas, si luego desactivas la opcin
de barra de navegacin del sitio (tal vez para editar el diseo de botones que no
puede realizarse con esta opcin activada), y luego vuelves a activarla, la barra se
aadir automticamente a todas las pginas del sitio que no la contengan.

Barras de navegacin del sitio y plantillas

Todas las plantillas de pginas nicas en la GALERA DE DISEOS cuentan con barras
de navegacin configuradas para ser barras de navegacin del sitio al cargarlas desde
la galera para iniciar un nuevo documento de pgina web. Esto significa que puedes
crear rpidamente un pequeo sitio web con todas las pginas enlazadas a la barra
sin tener que agregar botones ni enlaces de pgina de forma manual. De la misma
forma, todas las plantillas de pginas web tienen barras de navegacin del sitio
activadas. Si no quieres este comportamiento, desactiva la opcin de barra de
navegacin en el DILOGO DE BARRA DE NAVEGACIN .

Las barras de navegacin independientes presentadas con cada tema en la galera no

tienen la opcin de barras de navegacin 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 pginas. De todas formas, esta opcin puede activarse
fcilmente en el dilogo de barra de navegacin de ser necesario.

Otros aspectos interesantes

Si eliminas un botn que refiere a una de tus pginas o si cambias el enlace para que
refiera a otro lugar, no se realizar accin alguna para restaurar un enlace de botn a
la pgina. Se asume que has decidido que no quieres utilizar un enlace directo a esa
pgina en tu barra de navegacin del sitio. Los nuevos botones y enlaces de pgina
solamente se crean cuando se agrega una pgina.

Barras de navegacin de botn nico

Las pginas diseadas para ser visualizadas en dispositivos mviles pequeos tienen
poco espacio para barras de navegacin horizontales o verticales, por lo que se
necesita una solucin ms eficiente en relacin al espacio. Usar una barra de
navegacin con un nico botn y un men es una de las soluciones que funcionan
bien, no importa cuantas pginas tenga el sitio.
388

Barra de navegacin vertical de botn nico

Para hacer una barra de navegacin de botn nico de una barra normal, tan solo abre
el dilogo PROPIEDADES DE LA BARRA DE NAVEGACIN (haz doble clic sobre la barra de
navegacin) y borra todos los botones menos uno. Ahora borra los enlaces del botn
(haz clic en el campo URL al lado del botn en el dilogo y elige NO APLICAR en el
dilogo de enlace). Ahora puedes comenzar a aadir entradas de men al botn de
forma manual en el dilogo de la barra de navegacin o se puede aadir una entrada
de men de forma automtica para cada pgina en tu sitio web. Para aadir los
enlaces de forma automtica, activa la opcin BARRA DE NAVEGACIN DE PGINA WEB
en el dilogo (o desactvala y actvala de nuevo si ya estaba activada). Vers que tu
men se completa con un enlace a cada pgina de tu sitio web. Edita los nombres de
cada entrada en el men si no quieres que sean los mismos nombres que las pginas.

Hay una seleccin de diferentes diseos de barra de navegacin en la GALERA DE

DISEOS dentro de "WIDGETS Y ELEMENTOS DE PGINA" > "BARRAS DE NAVEGACIN" .
Tambin cada uno de los temas que hay en Temas de pginas web (general) tienen
sus propios diseos de barra de navegacin. Cambia el diseo de tu barra de
navegacin arrastrando un nuevo diseo de la galera de diseos y soltndolo en tu
barra.

IMPORTANTE: ten en cuenta que algunas barras de navegacin tienen diseos de

primer y ltimo botn que difieren del diseo de los botones centrales. Estas barras
de navegacin no son adecuadas para un botn nico porque si se queda el botn
central solo, su diseo es poco probable que sea atractivo, por lo que el dilogo de
propiedades de la barra de navegacin 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 diseo de
barra de navegacin donde todos los botones de la barra tengan la misma apariencia.

www.magix.es
 Barras de navegacin 389

Todos los botones iguales: adecuado

para barras de navegacin de botn
nico.

Diseos de botn final diferentes: no

adecuado para barras de navegacin
de botn nico.

Para convertir una barra de navegacin de botn nico en una barra de botones
mltiples normal, tan solo aade ms botones y borra las entradas de men del
primer botn si no se requiere ningn men.

Botones y mens
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 DILOGO DE BARRA DE
NAVEGACIN . Cada fila de la tabla corresponde a un botn de la barra o a una entrada
en un men de uno de los botones.

Agregado y edicin de botones

Para agregar un botn, haz doble clic sobre la primera columna, en el lugar donde dice
"Doble clic para agregar botn". Se agregar una nueva fila debajo de la fila
correspondiente al ltimo botn. O haz clic en el botn AADIR en la parte inferior del
dilogo para agregar un botn detrs del botn seleccionado. Puedes comenzar a
editar de inmediato la etiqueta para el nuevo botn. Para completar la edicin de la
etiqueta, pulsa Intro o haz clic en algn lugar fuera de la etiqueta.

Puedes editar cualquier etiqueta de botn si haces clic en la fila apropiada para
seleccionarlo y luego haces clic en la primera columna para iniciar la edicin de la
etiqueta.

Para fijar el enlace de un botn, haz doble clic en el campo de la URL o, si la fila ya
est seleccionada, simplemente haz clic en ella. Aparecer el DILOGO ENLACE DE
PROPIEDADES WEB . Este debera parecerte familiar, puesto que es el mismo dilogo
Enlace (en la pgina 273) que utilizas para agregar otros enlaces a tu pgina y estn
disponibles las mismas opciones. Algunas opciones estn desactivadas porque no
390

son aplicables a las barras de navegacin ni a los enlaces de men, como la opcin de
foto emergente que slo funciona cuando se aplica a una foto.

Tambin puedes configurar el texto de consejo de herramienta para cada botn 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 pequeo consejo de
herramienta emergente cuando se coloque el cursor del ratn sobre el botn o
entrada del men.

Creacin de los botones MouseOver propios

Puedes crear tus propios botones MouseOver desde cero dibujando los elementos
necesarios con rectngulos, texto, etc. Tan solo dibuja las partes principales del botn
en la capa MouseOff (recuerda agruparlo (en la pgina 50)) y coloca la versin
destacada correspondiente en la capa MouseOver. Mientras que la versin MouseOff
tenga un enlace de direccin web, la versin MouseOver se visualizar
automticamente cuando muevas el ratn por encima de la pgina web. (La capa
MouseOver tiene que estar encima de la capa MouseOff).

En otras palabras, otorgas al objeto principal una direccin web utilizando la

opcin de enlace. Despus seleccionas una capa MouseOver en la GALERA DE
PGINAS Y CAPAS y colocas las versiones MouseOver de tu botn en esta capa
para que se superpongan con el objeto con el enlace.

Nota tcnica: cualquier objeto grfico en la capa MouseOver se visualizar si se

superpone como mnimo el 50% con el objeto de la capa MouseOff. Las dos
versiones de botones MouseOver se mantienen sincronizadas con la funcin de
grupos suaves. Si seleccionas un botn en una capa, se selecciona automticamente
la versin de grupo suave en la otra capa, aun cuando la capa est desactivada. Al
editar el texto del botn en una capa, se pondr en sincrona automticamente con la
otra versin del botn.

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, necesitars permitir
ambas capas en la GALERA DE PGINAS Y CAPAS y realizar una seleccin 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, tambin 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 estn agrupados como grupo suave).

Una vez que tengas un botn operativo, puedes convertirlo en una barra de
navegacin. Selecciona el botn (junto con su estado MouseOver, si lo tiene) y
selecciona entonces "ARREGLO" > "CREAR BARRA DE NAVEGACIN" . El dilogo de barra
de navegacin aparece para que puedas configurar la barra. Consulta el captulo Barra
de navegacin (en la pgina 382) para ms informacin, incluyendo cmo tener
diferentes botones iniciales y finales en tu barra.

www.magix.es
 Barras de navegacin 391

Agregar mens y submens

En la primera columna (etiqueta) vers un smbolo ms a la izquierda de cada
etiqueta. Este es un control de la estructura de rbol y con un clic en el smbolo ms
junto a una etiqueta de botn, la vista se expande y podrs agregar un men a ese
botn

Haz clic en el texto DOBLE CLIC PARA AGREGAR UN ELEMENTO DEL MEN debajo del
botn para comenzar a aadir un men. O haz clic en el botn AADIR en la parte
inferior del dilogo para agregar un elemento de men detrs 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. Tambin puedes
agregar submens 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 botn AADIR SEPARADOR
en la parte inferior del dilogo. El separador se agrega despus del elemento de men
seleccionado en este momento. Los separadores te permitirn agrupar visualmente
los elementos relacionados de tu men.

Estilos de men
Haz clic en el botn ESTILO DE MEN para abrir el DILOGO ESTILO DE MEN . Esto te
permite cambiar cmo aparecen los mens y cmo se comportan en tu barra de
navegacin.
392

Fuente
Escoge una fuente para utilizar para el texto de tus mens. Slo se enumerarn las
fuentes seguras para la web, que son las fuentes que todos los visitantes de tu sitio
deberan tener. Tambin existe la opcin de hacer que la fuente sea negrita o para
cambiar su tamao.

NOTA: Esto no cambia la fuente que se utiliza para las etiquetas de botn de tu
barra, sino la fuente utilizada en los mens. Para cambiar la fuente de las etiquetas
de botones, consulta la seccin correspondiente ms adelante en este captulo.

Direccin
Escoge la direccin en la que quieres que tus mens se abran. Para las barras de
navegacin horizontales, normalmente querrs que sea hacia abajo y para las barras
de navegacin verticales, o bien hacia la izquierda o hacia la derecha dependiendo el
lugar de la pgina en el que se encuentre tu barra.

Espaciado
Con esta configuracin puedes agregar espacio entre las entradas del men; si las
separas, el men ser ms grande.

Borde

www.magix.es
 Barras de navegacin 393

Agrega un borde a los paneles de los mens al fijar un ancho de borde en pxeles.

Animacin
Por defecto, los mens se abrirn de forma instantnea, pero aqu puedes elegir si
quieres que el men tenga una animacin mientras se abre.

Transparencia
Puedes hacer que tus mens sean semitransparentes para poder ver a travs de los
paneles de men. Introduce el nivel de transparencia que te gustara 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 pxeles de desplazamiento.

Actualizacin de la barra de navegacin en todas

las pginas
Tal como se ha descrito anteriormente, si la opcin BARRA DE NAVEGACIN DEL SITIO
est activada para una barra de navegacin, entonces todos los cambios realizados a
una barra de navegacin se aplicarn automticamente a todas las otras pginas,
incluyendo la ubicacin de la barra en la pgina.

Sin embargo, si no tienes esta opcin activada, debes utilizar la funcin ARREGLO >
ACTUALIZAR OBJETOS REPETIDOS para copiar los cambios que has realizado a la barra
en la pgina actual a todas las otras pginas. Ten en cuenta que esto tambin
actualizar todos los otros objetos repetidos en la pgina, como los encabezados o
logos, y la pgina actual se utilizar como referencia. Lee el captulo Trabajar con
objetos para ms informacin sobre objetos repetidos.

Edicin 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

PGINAS ), todos los cambios que realizas a una instancia del objeto se actualizarn
automticamente.
394

Cambio de la fuente de los botones de la barra

de navegacin
Puedes modificar la fuente utilizada para las etiquetas de botones de una barra de
navegacin fcilmente. 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 INFORMACIN DE LA HERRAMIENTA DE TEXTO. A medida que
desplaces el cursor del ratn sobre las diferentes fuentes de la lista, la barra de
navegacin 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 tambin se adaptar.

De la misma forma, puedes cambiar el tamao de la fuente con el control del tamao
de fuente que se encuentra junto a la lista de seleccin de fuente.

Importacin e insercin de barras de navegacin

Si importas o pegas una barra de navegacin en tu documento, la opcin de
navegacin del sitio de esta barra de navegacin se desactiva automticamente, si
estaba activada. Esto es para evitar conflictos con cualquier barra de navegacin del
sitio existente en tu documento.

Sin embargo, si la barra entrante es del mismo tema y tipo que la barra de navegacin
del sitio existente (es parte del mismo grupo de repeticin), inmediatamente se
actualizar para coincidir con la barra de navegacin del sitio existente. De esa forma,
esta barra no aparecer con su forma original en tu pgina.

Si la barra es de un tema o tipo diferente (no es parte del mismo grupo de repeticin)
aparecer sin modificacin.

Creacin de barras de navegacin propias

Puedes crear una barra de navegacin a partir de cualquier tipo de diseo de botn. La
GALERA DE DISEOS contiene varios diseos de botones diferentes o puedes dibujar
tus propios diseos. Consulta la seccin Creacin de los botones MouseOver propios
(en la pgina 390) del captulo Primeros pasos para ms informacin sobre este
tema. El botn puede o no incluir un estado MouseOver.

Para crear una barra de navegacin, selecciona el botn y luego escoge ARREGLO >
CREAR BARRA DE NAVEGACIN . El DILOGO DE BARRA DE NAVEGACIN aparecer y
podrs agregar ms botones a tu barra de inmediato, de la misma forma que con las
otras barras de navegacin.

www.magix.es
 Barras de navegacin 395

Tambin puedes crear barras de navegacin con ms de un diseo de botn (para

que puedas tener diferentes diseos para tu primer y/o ltimo botn de la barra).
Consulta la seccin a continuacin para informacin sobre cmo hacerlo.

Restricciones de diseo de botones

Existen algunas reglas que debes seguir cuando crees tus propios botones para
utilizar en barras de navegacin.

Limitaciones de botones extensibles

Para obtener resultados ptimos cuando tus botones se extienden de forma
automtica, te recomendamos que no haya puntos de control de ruta ni rellenos con
gradacin/puntos de control de transparencia en el rea horizontal que ocupa el
objeto de texto de la etiqueta de botn.

Texto en un botn
Cada estado del diseo de botn debe disearse como objeto de grupo que contenga
el objeto de texto que puede servir como etiqueta de botn. Este objeto de texto
debera ser un objeto de texto simple, no una columna de texto ni un rea de texto. Es
decir, que debera crearse en la Herramienta de texto con un clic en la pgina y
escribiendo, sin arrastrar una lnea ni rea de texto primero.

Estados de botones en grupos suaves

Si hay varios estados en tu botn, 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 pginas web

Sobre las presentaciones

MAGIX Web Designer 11 Premium te permite crear presentaciones web: parecido a
una presentacin de Microsoft PowerPoint pero como una web Supersite (en la
pgina 303) con efectos tales como transiciones animadas de los pasos dentro de
una pgina y transiciones animadas de pgina fluidas.

Las presentaciones son documentos de pginas web HTML normales y son

compatibles con todos los navegadores modernos as como con telfonos y tablets.
Se ajustan automticamente para adaptarse al tamao de cualquier ventana de
navegador.

Quienes visiten tu presentacin web podrn navegarla paso por paso y pgina por
pgina con la flecha hacia la derecha o la tecla Av. Pg. para ver el prximo paso o
pgina y la flecha hacia la izquierda o la tecla Re. Pg. para volver hacia atrs.
Tambin aparecer una barra de navegacin popup en la parte inferior izquierda de la
presentacin que te permitir desplazarte fcilmente por las pginas de la
presentacin.

Puedes exportar tu presentacin, tal como lo haces con un sitio web convencional. Si
alojas tu presentacin en MAGIX Online World, el alojamiento es gratuito y tambin
puedes proteger tu presentacin por contrasea, de modo que solo los visitantes
invitados autorizados puedan ver tu presentacin.

Pasos y capas
Los pasos en una presentacin son en realidad capas que estn animadas en la pgina
de una en una. Si abres la galera de pginas y capas (en la pgina 85) vers todos los
pasos, como capas, adems de otras cuantas capas.

El fondo de cada diapositiva de la galera de pginas y capas se llama capa MOUSEOFF .

Sobre este hay otra capa MOUSEOVER que contiene elementos que tienen
comportamiento MouseOver, tales como botones, barras de navegacin, flechas de
"pgina siguiente", etc. Adems hay un FONDO DE TABLERO DE DIBUJO y un FONDO DE
PGINA que son capas especiales y que generalmente estn bloqueadas.

Es importante tener en cuenta que no es necesario usar la galera de pginas y capas

para crear o editar tu presentacin. La barra de herramientas de presentacin (en la
pgina 398) principal se puede usar para aadir, borrar y saltar a cualquier paso de tu
presentacin.

www.magix.es
 Presentaciones como pginas web 397

Pasos de presentacin en la galera de pginas y capas: la flecha muestra el paso actual.

Puedes reordenar los pasos de tu presentacin si ordenas las capas en la galera. Los
nmeros de los pasos se actualizarn automticamente.

El paso actual est indicado con el smbolo de la flecha (en la captura de pantalla
arriba, el paso de presentacin 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 presentacin cuando ese paso se alcanza en la
presentacin. En una presentacin de 3 pasos, por ejemplo, si el paso 2 es actual, no
vers ningn otro objeto en el paso 3 hasta que no hagas actual este paso u otros
siguientes.

Adems 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 GALERA DE PGINAS Y CAPAS.
398

La barra de herramientas "Presentacin"

MAGIX Web Designer 11 Premium te muestra automticamente la barra de
herramientas "Presentacin" en el lado derecho de la barra de herramientas estndar
cuando creas o abres un documento de presentacin.

La barra de herramientas te permite:

Crear un nuevo paso de presentacin que contenga cualquiera de los objetos

seleccionados en el momento. Crear pasos rpidamente si arrastras o pegas
objetos en la pgina, los seleccionas y luego haces clic en este botn. Aun si
los objetos seleccionados ya se encuentran en un paso de presentacin, un
clic en este botn mover los elementos marcados a un nuevo paso. Si no has
seleccionado ningn objeto, cuando presionas este botn, un nuevo paso
vaco se crea y se convierte en el actual, por lo que todo lo que dibujes o
aadas a continuacin se situar en ese paso.

Mueve los objetos seleccionados a la capa MouseOff, si no son parte de

ningn paso de presentacin y deben mostrarse permanentemente como
objetos "de fondo".
Duplicar el paso de presentacin actual (tal vez la opcin ms fcil 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 tambin
en el paso actual.
Eliminar el paso de presentacin actual. El paso que contiene los objetos
seleccionados se elimina por completo, incluyendo los objetos de este paso
que no estn seleccionados.
Salta a cualquiera de los pasos de la
presentacin as como a la capa de
fondo/MouseOff.

Muestra la pestaa "Transicin web" del dilogo Propiedades de capa (en la

pgina 426), lo que te permite escoger un tipo de transicin para el paso de
presentacin en el que se encuentran los objetos seleccionados.

www.magix.es
 Presentaciones como pginas web 399

Creacin de una presentacin

Existen tres formas de crear una nueva presentacin:

Comienza con una plantilla prediseada y luego personalzala (en la pgina

399) con tu propio texto, imgenes y esquema de colores.
Crea una presentacin desde cero (en la pgina 399): agrega todos los
elementos necesarios, texto, grficos y fotos en tu pgina y ordena el contenido
en pasos y pginas de tu presentacin, tal como lo desees.
Convierte una pgina web/documento web existente (en la pgina 401) en una
presentacin.

Creacin de una presentacin a partir de plantillas

Abre la GALERA DE DISEOS con un clic en la pestaa GALERA DE DISEOS o
ARCHIVO > NUEVO DE LA GALERA DE DISEOS .

Busca la carpeta PRESENTACIONES en la galera y haz doble clic para abrirla.

Las carpetas temticas contienen colecciones de diseos de presentaciones y

archivos grficos asociados con cada tema especfico. Navega por las carpetas de
temas hasta encontrar un diseo que te guste y haz doble clic sobre la primera
miniatura, denominada "Presentacin".

Se abrir un nuevo documento de presentacin que muestra todas las pginas de

plantillas, con varias pginas y, cada una, con pasos de presentacin con contenido.
Algunas pginas y pasos tienen aplicadas transiciones.

Haz clic en VISTA PREVIA DE PGINA 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 transicin. Tambin puedes usar las flechas
del extremo superior izquierdo de la presentacin (o en tu teclado) para ver
los pasos y transiciones activos. Trata tambin de mover el cursor del ratn
hasta la esquina inferior izquierda de las ventanas de vista previa de
presentacin para ver los controles de navegacin desplegables.

Cierra la vista previa.

Personaliza el texto y las fotos con tu propio contenido, tal como cuando editas un
documento de pgina web.
400

Creacin de una presentacin desde cero

Esta seccin describe el mejor flujo de trabajo para crear una pgina de presentacin
mediante un ejemplo que te ayudar a dar los primeros pasos rpidamente.

Selecciona "NUEVO" > "PRESENTACIN (PANORMICA)" o "NUEVO" > "PRESENTACIN

(4:3 NORMAL)" del men ARCHIVO dependiendo de si quieres una presentacin en
pantalla panormica (16:10) o una normal (4:3).

Nota: 16x10 es una solucin 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 relacin de aspecto que necesites.

Se abrir una nueva ventana con un documento en blanco, que mostrar el

icono de documento de presentacin en su pestaa en la parte superior de la
ventana del documento.
La barra de herramientas "Presentacin" aparecer en el extremo derecho de la barra
superior. Los botones de la barra de herramientas estn habilitados nicamente
cuando has seleccionado algn elemento en la pgina.

1. Utiliza la HERRAMIENTA DE TEXTO para agregar texto a tu presentacin en blanco,

tal vez, en el encabezado de la pgina. Selecciona este objeto de texto con la
HERRAMIENTA DE SELECCIN 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 estarn visibles
de forma permanente en tu presentacin, puesto que esta capa es parte de tu
fondo. Por lo tanto, haz una vista previa de tu pgina 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 lnea de estado te
lo indicar cuando lo selecciones con la HERRAMIENTA DE SELECCIN . Ahora,
hagamos que este texto aparezca como el primer paso de esta presentacin.
3. Con el texto seleccionado en la HERRAMIENTA DE SELECCIN , haz clic en el botn
"pie" que es el primer botn de la barra de herramientas "Presentacin", llamado
CREAR COMO PASO NUEVO . Ahora mira la lnea de estado: te indicar que el
objeto seleccionado es el "paso 1 de la presentacin" en vez de MouseOff.
4. Haz nuevamente una vista previa. Al comienzo vers 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 presentacin.
5. El paso 1 es ahora el paso actual, por lo que si dibujas un nueva forma o aades
algn texto, ser situado en el paso 1. Dibuja un rectngulo usando la
HERRAMIENTA DE RECTNGULO . Seleccinalo con la HERRAMIENTA DE SELECCIN y
nota como la barra de estado muestra el rectngulo situado en Paso de
presentacin 1, que es tambin el paso actual.
6. Haz nuevamente una vista previa de tu pgina y vers que, al pulsar la flecha
hacia la derecha, aparecen el texto y el rectngulo.
www.magix.es
 Presentaciones como pginas web 401

7. Una forma rpida de crear un nuevo paso a partir de un paso existente es utilizar
el botn DUPLICAR PASO. Selecciona el rectngulo y pulsa este botn. Se
duplicar todo el paso, incluyendo el texto que no has seleccionado, pero que se
encontraba en el paso 1 junto con el rectngulo. Selecciona el nuevo texto o
rectngulo y la lnea de estado te indicar que se encuentra en un nuevo paso de
la presentacin. El nuevo paso se convierte en el paso actual: el paso de
presentacin 2 y otros objetos que crees ahora se aadirn a este paso.
8. Si quieres mover un objeto a otro paso, haz clic derecho sobre l y vers el
submen PRESENTACIN 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 pgina. Tan solo selecciona el paso que desees. Tambin existe
la opcin NUEVO PASO en el men, que tiene el mismo resultado que el botn
CREAR COMO PASO NUEVO que utilizamos ms arriba.
9. Puedes cambiar el efecto utilizado para cada paso de forma muy sencilla.
Selecciona uno de los rectngulos que acabas de aadir y pulsa el ltimo botn
de la barra de herramientas "Presentacin", denominado EFECTO DE TRANSICIN
DEL PASO . As se abre un dilogo que te permite seleccionar una transicin
diferente en vez de la transicin por defecto, "fade". Selecciona APARECER DESDE
LA DERECHA . Haz nuevamente una vista previa de tu pgina y vers que, al pulsar
la flecha hacia la derecha, el texto y el rectngulo 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, seleccinalo y pulsa el botn MOVER AL
FONDO en la barra de herramientas presentacin. As se coloca el objeto
nuevamente en la capa MouseOff. Prubalo con uno de los objetos que has
colocado en un paso.
11. La GALERA DE DISEOS contiene algunos componentes muy tiles para las
presentaciones en "PRESENTACIONES " > "COMPONENTES DE PRESENTACIONES ". Tan
solo arrastra y suelta un componente hasta tu pgina. Cada componente se
aade al paso actual. Si no es esto lo que quieres, utiliza la barra de
herramientas "Presentacin" o haz clic derecho en el men "Presentacin" para
moverlo a otro paso o a la capa de fondo (MouseOff). (Ten en cuenta que los
componentes TTULOS y CONTROLES DE TRANSICIN siempre se aaden a la capa
de MouseOff/Fondo).
12. Recuerda, como est descrito arriba, que la GALERA DE PGINAS Y CAPAS te
muestra todos los pasos de presentacin en tu pgina en orden, puesto que
cada paso de la presentacin 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.

Conversin de una pgina web existente en una

presentacin
En el documento de pgina web, haz clic derecho sobre una pgina y escoge
PROPIEDADES DE PGINA WEB para ver el dilogo Propiedades web.

Haz clic en la pestaa Pgina web y luego en PGINA WEB DE PRESENTACIN para
seleccionar esa opcin.
402

La pestaa del documento en la parte superior del espacio de trabajo mostrar

el cono de documento de presentacin.

Nota: las capas dentro del documento no se convierten automticamente en pasos

de la presentacin cuando conviertes una pgina web en una presentacin. Debes
convertir de forma manual cada capa en un paso de la presentacin, consulta
Conversin de una capa en un paso. Sin embargo, cuando conviertes una
presentacin en una pgina web, los pasos de la presentacin se convierten
automticamente en capas que reciben el nombre "paso 1", etc.

Manejo de los pasos de presentacin

En general, puedes manejar los pasos de una presentacin de la siguiente manera:

Haz clic derecho sobre un objeto de un paso y escoge PRESENTACIN y luego

selecciona la opcin deseada del submen.
Utiliza los botones de la barra de herramientas Presentacin (en la pgina 398).
Utiliza la GALERA DE PGINAS Y CAPAS .

Visualizacin del contenido de los pasos

En ocasiones puede que quieras obtener una vista ms clara de los objetos que se
encuentran en un paso. Puedes usar la opcin SALTAR A en la barra de herramientas
de presentacin para llevarte a un paso o capa particular o incluso utilizar la GALERA
DE PGINAS Y CAPAS .

Para una fcil navegacin, el men SALTAR A solo visualiza la capa fondo/MouseOff y
los pasos de presentacin. Si necesitas seleccionar otra capa (MouseOver, fondo de
pgina, fondo de tablero de dibujo) tan solo selecciona GALERA DE PGINAS Y CAPAS y
se desplegar como la pgina actual en el men desplegable SALTAR A .

Si haces clic en un paso en la GALERA DE PGINAS Y CAPAS todos pasos que has
seleccionado previamente se ocultarn y todos los pasos abajo se harn visibles
dndote as una vista precisa de tu posicin en la presentacin como se muestra en el
espacio de trabajo. Sucede lo mismo si seleccionas un paso usando la opcin SALTAR
A . Puedes ocultar o mostrar cualquiera de los pasos en la presentacin haciendo clic
en el icono de ojo.

Adems 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 GALERA DE PGINAS Y CAPAS se hace referencia al fondo del
men SALTAR A como capa MouseOff.

www.magix.es
 Presentaciones como pginas 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 "PRESENTACIN" > "MOVER A PASO"
, luego selecciona el nmero 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 GALERA DE PGINAS 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 GALERA
DE PGINAS Y CAPAS , tal como lo indican los nmeros de pasos. Tambin puedes
hacer clic y arrastrar los pasos hacia arriba o hacia abajo en la GALERA DE PGINAS 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 GALERA DE
PGINAS Y CAPAS haz clic derecho sobre el objeto y selecciona ELIMINAR , o haz clic en
el objeto y luego pulsa el botn ELIMINAR en la barra de herramientas estndar.

Cuando borras un objeto y ste es el nico en un paso, Web Designer eliminar el

paso vaco automticamente solo despus de las operaciones "guardar" o "vista
previa" . As se pueden aadir objetos a un paso sin alterar el orden de pasos
existentes.

Tras las operaciones Guardar o Vista previa, los pasos vacos se eliminarn y los
pasos restantes se volvern a numerar respectivamente.

Eliminar un paso
Selecciona un objeto del paso y haz clic en el botn ELIMINAR PASO de la
barra de herramientas "Presentacin" o haz clic derecho y escoge
PRESENTACIN > ELIMINAR PASO .

O bien, haz clic derecho sobre la capa en la GALERA DE PGINAS Y CAPAS y

seleccionaELIMINAR CAPA .
404

Agregado de nuevas pginas de presentacin

Haz clic derecho en MAGIX Web Designer 11 Premium y escoge NUEVA PGINA para
agregar una nueva pgina en blanco, o DUPLICAR LA PGINA ACTUAL para aadir una
copa de la pgina seleccionada.

Creacin de listas con nmeros y vietas

Al aadir listas con vietas o nmeros a una presentacin, cada elemento de la lista
se convierte automticamente en un paso de presentacin independiente cuando la
exportas. Esto facilita la creacin y edicin 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 transicin que se utiliza para cada elemento de la vieta
durante la presentacin es el establecido para la capa de presentacin en la que se
encuentra la lista (no puedes fijar efectos diferentes para los diversos puntos de la
misma lista).

Para desactivar esta funcin, haz clic derecho en el rea de texto mientras te
encuentras en la HERRAMIENTA DE TEXTO, escoge Presentacin > Presentar por
prrafo del men y quita la seleccin de la opcin. Ahora, al exportar/previsualizar tu
presentacin, la lista no se separar en pasos independientes.

Para ms informacin sobre las listas con vietas y nmeros, consulta Manejo de
texto > Aplicacin de apariencias de texto (en la pgina 196)

Eliminar pginas de presentacin

Haz clic derecho sobre la pgina y selecciona ELIMINAR PGINA ACTUAL . O selecciona
las pginas que quieres borrar en la GALERA DE PGINAS Y CAPAS y pulsa "borrar",
para borrar varias pginas a la vez.

Enlaces al paso siguiente/anterior

Puedes agregar fcilmente botones y objetos a una pgina de presentacin que
muestren el prximo paso en la pgina. Simplemente agrega o crea tu botn y utiliza
la lista ENLACE A en la pestaa Enlace (en la pgina 274) del dilogo de Propiedades
web para aplicar un enlace al botn u objeto que mostrar el prximo paso de
presentacin.

Cuando el visitante haya visto todos los pasos de la pgina con el enlace "prximo
paso de presentacin" o con la flecha hacia la derecha, al hacer clic en el botn o
pulsar la tecla nuevamente, ver la prxima pgina.

www.magix.es
 Presentaciones como pginas web 405

Nota: si conviertes una presentacin en un documento web (opcin PGINA WEB DE

PRESENTACIN en el dilogo Propiedades web en la pestaa Pgina web), los enlaces
Paso de presentacin anterior/siguiente se convierten automticamente en los
enlaces Pgina anterior/Prxima pgina. No puedes aplicar enlaces "Paso de
presentacin anterior/siguiente" a un documento web.

Aplicacin de transiciones a pasos de

presentaciones
Cuando creas un paso, Web Designer le asigna automticamente una transicin
instantnea.

Para cambiar la transicin en pasos de presentaciones:

Abre la pestaa "Transiciones" del dilogo de "Propiedades de capa" con un

clic en el botn "Propiedades de transicin de capa" en la barra de
herramientas "Presentacin" o haz clic derecho en un objeto dentro del paso y
selecciona PRESENTACIN > TRANSICIN. O bien, en la GALERA DE PGINAS Y
CAPAS , haz clic derecho en el paso y escoge PROPIEDADES DE CAPA .

Escoge una transicin de la lista de EFECTO DE TRANSICIN , arrastra la barra

VELOCIDAD para fijar la duracin de la transicin entre 0 y 5 segundos y finalmente
haz clic en APLICAR .
406

Los nuevos pasos que has creado adquieren un efecto de transicin en el ltimo paso
de la presentacin por defecto. Esto significa que, si quieres la misma transicin en
todos los pasos, solo tienes que configurarlo una vez sobre el primer paso y entonces
todos los pasos aadidos a continuacin tendrn la misma transicin.

Aplicacin de transiciones a pginas de

presentaciones
Cada pgina de una presentacin puede tener su propia transicin. Para aadir una
transicin a la pgina actual, haz clic derecho en la pgina y selecciona la PESTAA DE
PGINA (EN LA PGINA 282) del dilogo PROPIEDADES DE PGINA WEB .

Luego selecciona un tipo de transicin para la pgina en la lista desplegable EFECTO DE

TRANSICIN y desliza la barra VELOCIDAD para fijar la velocidad de la transicin entre
0 y 5 segundos.

Luego, cuando un visitante navegue por a la pgina con la transicin animada, ver
dicha transicin.

Tambin puedes configurar la transicin de pgina para varias pginas de una vez.
Tan solo selecciona las pginas que quieres cambiar en la galera de pginas y capas
(usa Shift+clic y Ctrl+clic para extender la seleccin) y luego cambia la transicin
sobre la pestaa de pgina como se muestra arriba.

Nota: las transiciones de pgina solo funcionan para una pgina web si est
configurada para ser una Supersite. Los documentos de presentacin son Supersites
por defecto, por lo que no es necesario visitar esta opcin en la PESTAA DE PGINA
WEB del dilogo.

Informacin de presentacin avanzada

Capas de popup y capas de presentacin
Las capas de presentacin son capas que tienen la opcin de presentacin
seleccionada en el dilogo "Propiedades de capa". Una vez que activas esta opcin
para una capa, el nombre de la capa se convierte en "Paso de presentacin [n.]" en la
GALERA DE PGINAS Y CAPAS .

En un documento de presentacin puedes mezclar capas popup con capas de

presentacin pero, por supuesto, solo las capas de presentacin se presentarn
cuando los visitantes naveguen por la presentacin con las teclas de flecha del
teclado.

El uso de capas y pasos en simultneo es til si quieres conservar caractersticas tales

como capas popup en tu presentacin. Puedes convertir capas en pasos (y convertir
www.magix.es
 Presentaciones como pginas web 407

pasos en capas) si activas la opcin CAPA DE PRESENTACIN en la pestaa "Transicin

web" del dilogo Propiedades web (en la pgina 426).

Cuando creas un nuevo paso, esta casilla se selecciona automticamente.

Si quitas la seleccin para convertir un paso en una capa, esto eliminar el paso de tu
presentacin, pero su contenido y la transicin de la capa se conservarn. Sin
embargo, la capa convertida no se mostrar cuando un visitante navegue por la
presentacin con las flechas del teclado o con un enlace de paso de presentacin
anterior/siguiente.
408

Widgets de sitios web

Este captulo describe cmo agregar contenido dinmico a tu sitio web, como
pelculas, animaciones, formas y miles de gadgets disponibles como contadores de
pgina y conversores de divisas. Nos referimos a estos con el trmino general
"widgets de sitios web" o simplemente "widgets".

Widgets y marcadores de posicin - todo

automtico
En MAGIX Web Designer 11 Premium, un widget es un objeto que puedes colocar en
tu pgina web y que muestra algn tipo de contenido dinmico que tambin 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 esttica de
marcador de posicin, que define la posicin y el tamao del widget en la pgina. El
marcador de posicin est vinculado con el cdigo HTML y los archivos (Flash,
Javascript, fotos, etc.) que hacen que el widget funcione en la pgina exportada.

En general, un marcador de posicin es una imagen que parece una instantnea

esttica del widget mismo, pero tambin puede ser simplemente un rectngulo o
cualquier otro objeto. El marcador de posicin 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 pgina.

La buena noticia es que Web Designer generalmente renderiza las imgenes de

posicin de marcador por ti.

Tipos de widgets
Bsicamente, existen tres tipos de widgets, que se diferencian en la forma en que los
personalizas y configuras en MAGIX Web Designer 11 Premium. A continuacin
encontrars una breve descripcin de cada tipo, pero ms adelante en este captulo
cada uno se explica en ms detalle. Para los tres tipos de widget puedes hacer doble
clic en la imagen de marcador de posicin 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 disposicin 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 ubicacin
geogrfica y el tamao del mapa. Una vez que hayas finalizado, haz clic en el botn
INSERTAR en la parte inferior de la ventana del explorador. En general, insertars estos
widgets desde la GALERA DE DISEOS .

Widgets que se editan en el programa

Estos widgets se editan en Web Designer, pero generalmente en un documento
multipgina independiente, que facilita la edicin del contenido del widget. Por
ejemplo, para un widget de un pase de fotos que muestra diez fotos, estas imgenes
se vern y editarn fcilmente dentro del documento multipgina del widget que se
utiliza para modificarlo. En general, tambin insertars estos widgets desde la
GALERA DE DISEOS .

Widgets que se editan manualmente

Estos son widgets que agregas manualmente al insertar el cdigo HTML del widget
directamente en Web Designer o al utilizar la pestaa "HERRAMIENTAS " >
"PROPIEDADES WEB " > "MARCADOR DE POSICIN " para insertar el cdigo. Tambin
puedes crearlos al importar un archivo, como una animacin o pelcula, en tu pgina.

Web Designer no te ofrece ninguna otra interfaz para editar tu widget, sino la pestaa
MARCADOR DE LUGAR , que te permite cambiar el archivo o cdigo que lo define.

Widgets de la galera de diseos

Muchos elementos de la carpeta "Elementos de pgina y widgets" en la galera de
diseos son "widgets", tal como lo indican sus nombres.
410

Para agregar un widget, simplemente arrstralo y sultalo desde la galera hasta tu

pgina. Lo que ocurre despus 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 pgina web del proveedor. Si es un widget que se edita en el programa,
aparecer un marcador de posicin en la pgina. Haz doble clic en el marcador de
posicin para abrir un nuevo documento en Web Designer, que te permitir
personalizar el widget.

Insercin
Pulsa el botn AYUDA al final de la ventana para ver informacin que te gue durante
el proceso de configuracin e insercin del widget. Para la mayora de los widgets,
debers llegar al punto en que la pgina web del widget te muestre el cdigo HTML
que necesita insertarse en tu pgina web. Cuando sea visible, generalmente puedes
hacer clic en el botn Insertar en la parte inferior de la ventana. Entonces, MAGIX
Web Designer 11 Premium encontrar el cdigo HTML y lo insertar en tu pgina por
ti.

Para algunos widgets, MAGIX Web Designer 11 Premium no puede tomar el cdigo
HTML directamente desde la pgina y debers copiar el cdigo al portapapeles.
Selecciona el cdigo en la ventana del navegador y pulsa Ctrl+C. Muchos widgets te
facilian esto porque te suministran un botn de copia junto al cdigo. Una vez que has
copiado el cdigo, haz clic en el botn INSERTAR .

Generacin automtica del marcador de posicin

Al pulsar el botn Insertar, si MAGIX Web Designer 11 Premium encontr el cdigo
del widget, la ventana de la pgina web del widget se cerrar y vers un aviso
indicando que MAGIX Web Designer 11 Premium est ocupado renderizando la
imagen del marcador de posicin. Tras algunos segundos, aparecer una imagen de
tu widget en tu pgina. Para la mayora de los widgets, esta imagen tiene el mismo
tamao que el widget en s mismo, por lo que puedes posicionarla con la
HERRAMIENTA DE SELECCIN .

Ahora, todo lo que debes hacer es realizar una vista previa de tu pgina web y vers el
nuevo widget en funcionamiento.

Membresa del sitio del widget

Es posible que algunos widgets requieran que abras un cuenta con el proveedor del
widget antes de poder usarlo. La mayora son gratis, pero algunas ofrecen servicios
premium adems de la oferta gratis. Mira cada widget individual y la informacin
sobre el sitio del proveedor del widget para ms detalles.

www.magix.es
 Widgets de sitios web 411

Edicin de widgets existentes

En cualquier momento, puedes hacer doble clic en el marcador de lugar (o doble clic y
escoger EDITAR WIDGET ) en la pgina 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 conservarn una
copia de un widget que has creado. Esto significa que puedes iniciar sesin 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 cdigo HTML o copia el cdigo 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 pgina desde la GALERA DE DISEOS no
abrirn una ventana de navegador, tal como se ha descrito ms 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.

Edicin

Despus de soltar este tipo de widget en tu pgina, haz doble clic sobre l para
editarlo. Se abrir una nueva ventana de documento en Web Designer (el
"documento de edicin" del widget). Lo que muestre ese documento depender del
widget en s, pero en general vers un documento multipgina que te permite editar y
personalizar de forma prctica todo el contenido.

En general, se mostrarn instrucciones especficas a un costado o en la parte superior

de la primera pgina, que te describir los aspectos del widget que puedes editar en el
documento y los que no puedes. En la mayora 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 imgenes 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 pgina por vez y personaliza los textos y las fotos. Es posible que algunos
objetos estn 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 pginas. Los objetos bloqueados estn
presentes como ayuda visual para ayudar al contexto de las partes editables sin
bloqueo del diseo.

Agregado de ms contenido
412

Algunos widgets te permitirn agregar ms contenido al widget, si duplicas las

pginas que se muestran (clic derecho sobre la pgina y escoge DUPLICAR PGINA
ACTUAL ). Un widget de pase de fotos te permitir agregar ms fotos de esta forma.
Despus de duplicar una pgina, cambia las fotos o el texto, como lo desees. Las
instrucciones en el widget te indicarn si puedes o no duplicar pginas de esta forma
para agregar contenido.

Si realizas cambios que las instrucciones te indican que no debes hacer, en general, se
ignorarn. Sin embargo, es posible que el widget deje de funcionar, as que cambia
solamente los aspectos del diseo que las instrucciones te indican que puedes
modificar.

Cambio de tamao

Los widgets que se editan en el programa en general no pueden redimensionarse, por

lo tanto, no cambies el tamao del marcador de posicin en tu pgina ni las
dimensiones de pgina en el documento de edicin del widget.

Guardado de cambios

Una vez que finalices tu personalizacin, cierra el documento y se te preguntar si

deseas guardar los cambios que has hecho al documento de pgina web. Como
alternativa, solo pulsa "Ctrl + S" y los cambios que realices se guardarn y el
documento de edicin se cerrar para que vuelvas al documento de tu pgina web.

El marcador de posicin que representa tu widget debera actualizarse para reflejar la

primera pgina del documento de edicin. Haz una vista previa de tu pgina para ver
el resultado de tus cambios en el widget.

Agregado de archivos de pelculas y

animaciones
MAGIX Web Designer 11 Premium incluye compatibilidad directa con algunos tipos
de archivos que es posible que quieras aadir a tu pgina. Para estos archivos, puedes
simplemente arrastrarlos y soltarlos desde el Explorador de Windows hasta tu pgina
o utilizar la opcin ARCHIVO > Importar.

Durante la importacin, se identifica el tipo de archivo y se coloca un marcador de

posicin o un enlace apropiado en tu pgina, mientras que el archivo se copia en la
carpeta de soporte de tu diseo. La carpeta de soporte es una carpeta que est
vinculada a tu archivo de diseo y se crea automticamente. Si tu archivo de diseo
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 pelcula MP4 y FLV

Al importar un archivo MP4 o FLV, MAGIX Web Designer 11 Premium inspecciona el
archivo para determinar la relacin de aspecto y otra informacin acerca de la
pelcula. Se te preguntar si deseas que se inicie la reproduccin de la pelcula
automticamente tan pronto como se cargue la pgina en que aparece (autoinicio).
Luego inserta el archivo de pelcula y otros archivos en un reproductor de pelculas
Flash en la carpeta de soporte de tu sitio web. En tu pgina aparecer una imagen
similar al reproductor de la pelcula.

Posiciona y cambia el tamao de tu marcador de posicin con la HERRAMIENTA DE

SELECCIN y luego haz una vista previa de tu pgina. Haz clic en el botn para iniciar
la reproduccin de la pelcula (debers tener Flash instalado). Esto es todo. El
reproductor de la pelcula contiene controles bsicos para ajustar el volumen, iniciar y
detener la reproduccin y para desplazarte hasta cualquier lugar de la pelcula.

Como alternativa puedes usar algn widget de la GALERA DE DISEOS para presentar
tus vdeos. De este modo tendrs ms control sobre la presentacin. Consulta
ELEMENTOS DE PGINA Y WIDGETS > AUDIO / VDEO .

Otros formatos de pelcula

MAGIX Web Designer 11 Premium no es directamente compatible con otros
formatos de pelcula, pero visita el sitio web de MAGIX para ms informacin sobre
cmo convertir pelculas a un formato que pueda agregarse a tu pgina web.

Archivos Flash
Para incluir una animacin Flash en tu sitio web, importa el archivo Flash (.swf). El
archivo Flash se copia en la carpeta de soporte de tu diseo, de forma que se
exportar y publicar con tu sitio web. Una imagen de marcador de posicin se
renderiza y se coloca en tu pgina web.

Puedes cambiar el tamao de tus animaciones Flash, si utilizas la HERRAMIENTA DE

SELECCIN para cambiar el tamao de la imagen de marcador de posicin al tamao
deseado y la posicionas en el lugar que desees.

Haz una vista previa de tu pgina para ver la animacin Flash en funcionamiento en tu
pgina web. Por supuesto, debes tener Flash instalado para poder reproducirla con
xito.

Archivos MP3
Importa un archivo MP3 para aadirle audio a tu pgina web. Una ventana te permite
elegir si el audio comenzar automticamente una vez se cargue tu pgina o si
debera empezar cuando se pulse el botn en el reproductor.
414

Como en los otros tipos de archivos de arriba, se crear una imagen de marcador de
posicin y se ubicar en tu pgina. El archivo MP3, junto con todos los dems
archivos necesarios para hacer que el reproductor funcione, se copiarn en la carpeta
de soporte de tu documento y se incluirn en la pgina web exportada. Previsualiza la
pgina para ver el reproductor en accin.

El reproductor es simple y discreto. Puedes iniciar y parar el audio, saltar a distintos

puntos de la pista haciendo clic en la lnea temporal, ajustar el volumen (haciendo clic
en la lnea indicadora de volumen) y silenciarlo (clic en el icono con un altavoz).

Nota tcnica: 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
tambin 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 pgina de la misma forma en que agregas archivos Flash.
Importa o arrastra y suelta el archivo GIF hasta la pgina. Se copiar a la carpeta de
soporte del diseo y se generar una imagen de marcador de posicin esttica.
Cambia el tamao y reposiciona el marcador de posicin, luego haz una vista previa
de tu pgina 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 pgina (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 aadir un enlace, el archivo PDF se copia en la carpeta de soporte de tu diseo de

forma que se exporta y publica con el resto de tu sitio. Adems, se agrega un enlace
en tu pgina que se ver as:

Un clic sobre el enlace de tu pgina exportada generalmente abre el archivo PDF, pero
el comportamiento exacto vara segn la configuracin 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 Galera de
diseos brinda acceso a un pequeo subgrupo de ellos. Casi todos los widgets se
ofrecen mediante un breve cdigo HTML. El proveedor del widget generalmente te
suministra instrucciones simples para insertar el cdigo en tu pgina web, pero con
MAGIX Web Designer 11 Premium, esto es todava ms fcil.

Copia el cdigo del proveedor del widget en el portapapeles de tu sistema,

simplemente cpialo tal como lo haras en un procesador de texto. Muchas veces, el
proveedor del widget te suministra un botn "copia" que lo hace por ti.

Luego, en MAGIX Web Designer 11 Premium ve a la herramienta de seleccin y haz

una operacin de pegado habitual (Ctrl+V). Vers que MAGIX Web Designer 11
Premium reconoce el cdigo HTML e comienza de inmediato a renderizar la imagen
de marcador de posicin, tal como lo hace como cuando se inserta un widget de la
Galera de diseos. El marcador de posicin aparecer en tu pgina y, generalmente,
tendr el tamao del widget. Luego podrs hacer una vista previa de tu pgina para
ver al widget en funcionamiento.

NOTA: si no te encuentras en la herramienta de texto cuando pegas el cdigo, se

pegar como texto en vez de introducir un marcador de posicin. Una vez que hayas
pegado el contenido del portapapeles como texto, continuar pegando como texto
an cuando cambies a la herramienta de seleccin y vuelvas a pegar. Si llegas a este
punto, vuelve a la pgina web del widget y copia el cdigo de nuevo. Luego, pgalo
mientras te encuentras en la herramienta de seleccin.

Cambio de tamao de widgets

Puedes cambiar el tamao de las imgenes de marcadores de posicin para archivos
Flash, MP4 y GIF animados de la misma forma que cambias el tamao del contenido
de tu pgina, porque este tipo de contenido es modificable. Sin embargo, la mayora
de los otros widgets no son compatibles con esto y siempre renderizarn el mismo
tamao.
Para estos widgets, el objeto de marcador de posicin determina simplemente los
lmites del rea en que el widget puede renderizar, de forma que reducir el tamao del
marcador de posicin significar que el widget se ver recortado en tu pgina. La
imagen del marcador de posicin se regenera cada vez que cambias su tamao por lo
que reflejar un recorte del widget tambin, tal como se ilustra en el ejemplo.

Marcador de posicin con el tamao por Marcador de posicin con tamao reducido
defecto
416

Este es un ejemplo del botn "Comprar ahora" de PayPal que permite vender bienes y
servicios desde tu pgina web. Este widget est disponible en la Galera de diseos.

De la misma forma, hacer que el marcador de posicin de estos widgets sea ms

grande resultar en un espacio vaco alrededor del widget en la pgina y en la imagen
del marcador de posicin. Para widgets como este, que no cambian de tamao
correctamente cuando se modifica el tamao del marcador de posicin, lo mejor es
conservar el tamao original por defecto.

Hay algunos widgets que pueden mejorarse si se cambia el tamao del marcador de
posicin, aun cuando el widget en s mismo no cambie su tamao. Algunos widgets
llenarn el contenedor en el que estn insertos, lo que significa que parecern ms
grandes y habr espacios en blanco que ocupan el espacio. Puedes experimentar
cambiando el tamao del widget en cada direccin 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 tamao, el
tamao de los controles no cambiar, sino que la forma se recortar. El resultado es
un marcador de posicin ms claro que ocupa menos espacio en la pgina.

Marcador de posicin con el tamao por defecto Marcador de posicin ms angosto y corto

Desactivacin de la regeneracin del marcador de

posicin
La imagen de marcador de posicin se regenerar cada vez que cambies su tamao,
el cdigo o el archivo relacionado. Es posible que algunas veces quieras desactivar la
regeneracin de forma que la imagen del marcador de posicin no cambie. Puedes
hacerlo si quitas la tilde de la casilla que se encuentra en la parte inferior de la
PESTAA MARCADOR DE POSICIN del DILOGO HERRAMIENTAS > PROPIEDADES WEB .

www.magix.es
 Widgets de sitios web 417

Insercin manual de marcadores de posicin

para widgets
Si no quieres que MAGIX Web Designer 11 Premium cree una imagen de marcador de
posicin, puedes fijar una personalmente. Primero crea un objeto de marcador de
posicin (tal vez un rectngulo del tamao adecuado o una imagen importada que
quieras utilizar para representar el widget en tu pgina). Selecciona el objeto y luego
abre la pestaa Marcador de posicin en HERRAMIENTAS > PROPIEDADES WEB .

O pulsa el botn de marcador de posicin en la barra desplegable de

Propiedades web en la barra superior.

En este dilogo, puedes escoger si deseas asociar el objeto seleccionado con un

archivo Flash u otro archivo o con un cdigo HTML que el dilogo te permite pegar en
el cuerpo o encabezado de tu pgina web. Lee la seccin PESTAA MARCADOR DE
POSICIN del captulo dilogo de Propiedades web (en la pgina 290) para ms
detalles en este dilogo.

En general, no quieres que la opcin "Regenerar marcador de posicin" est activada

si quieres conservar el objeto de marcador de posicin que has creado. Si seleccionas
esta opcin, tu marcador de posicin se reemplazar por la imagen generada del
cdigo o archivo especificado en este dilogo.

Ms informacin
Consulta la pgina web xara.com/widgets http://www.xara.com/widgets para ms
informacin acerca de widgets. Por supuesto, sigue visitando la Galera de diseos
que se actualiza regularmente.

Insercin manual de un mapa de Google

La forma ms sencilla de aadir un mapa de Google a tu pgina web es utilizar el
widget de Google Map que se encuentra en la galera de diseos (en Elementos de
pgina, Otros widgets). Pero en esta seccin utilizaremos un Google Map para
mostrarte cmo aadir 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 pequea
ventana con un enlace HTML que te servir para insertar el mapa en tu pgina web.
Cpialo.

El botn enlace abre una ventana que muestra el enlace HTML para este mapa.

Para adaptar el tamao y otras opciones, haz clic en la opcin "PERSONALIZAR ".

En MAGIX Web Designer 11 Premium ve a la HERRAMIENTA DE SELECCIN . Pega

("Ctrl+V") el HTML en el programa. Se lo reconocer como un cdigo HTML y una
imagen de marcador de posicin se generar automticamente con el cdigo
insertado. La imagen aparece en tu pgina. Posicinala en el lugar que desees y luego
haz la vista previa de tu pgina. Ahora vers el Google Map en tu pgina.

www.magix.es
 Galera de pginas y capas 419

Galera de pginas y capas

La galera de pginas y capas

Por defecto, la GALERA DE PGINAS 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 galera. Consulta Galeras (en la pgina 95) para ms
informacin.

Si has cerrado previamente la GALERA DE PGINAS Y CAPAS , que est abierta

por defecto, puedes volver a abrirla con un clic en la pestaa GALERA DE
PGINAS Y CAPAS en la pestaa de galera o si presionas F10.

La GALERA DE PGINAS Y CAPAS enumera todo lo que tienes en tus documentos,

desde las pginas y las capas hasta cada elemento individual de la pgina.
Proporciona el modo de seleccionar, ocultar bloquear y reorganizar estos elementos.

Funciona en diferentes niveles: PGINAS , CAPAS, PASOS DE PRESENTACIONES y

OBJETOS. La orden de estos elementos es como sigue:

Pginas
Capas/pasos
Elementos de pgina, donde se
incluyen los grupos
Contenidos de grupo

Algunas de las caractersticas clave de la GALERA DE PGINAS Y CAPAS son:

Control de pgina
Presentacin de una lista de las pginas
El modo de pginas muestra una lista ms acotada de vistas en miniatura de las
pginas para una navegacin ms sencilla.
Agregar una nueva pgina, duplicar, cortar, copiar, pegar o borrar pginas.
Cambiar el orden de las pginas arrastrndolas
Renombrar pginas

Control de capas
Muestra una lista de todas las capas en cada pgina, desde el fondo (en general
la capa de fondo) hasta la capa superior
En un documento de presentacin, muestra una lista de todos los pasos y capas
de cada pgina de la presentacin, 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 pgina 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 algn objeto para que sea no editable
Ubicar y destacar cualquier objeto en la galera con un clic en la pgina cuando
te encuentras en el modo "Localizar": activa o desactiva el botn 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).

Adems, la GALERA DE PGINAS Y CAPAS muestra una pequea vista en miniatura de

las pginas y una miniatura de cada elemento de la pgina. Pasa el cursor sobre un
elemento para ver una vista miniatura ms grande.

www.magix.es
 Galera de pginas 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 navegacin y otros grupos diversos, la lnea de texto y los
elementos de la columna de texto y algunos elementos del grupo de sombras.

Si pasas el cursor sobre las pequeas vistas en miniatura, vers una miniatura ms grande que te
permitir identificar cada objeto de la pgina.

Ten en cuenta que las dos columnas de la derecha indican (y controlan) si los elementos son
editables (una flecha plida) o bloqueados (icono del candado) y si son visibles en la pgina
(icono de ojo abierto ms claro) u ocultos (icono cerrado ms oscuro).

Un clic sobre estos smbolos cambiar la visibilidad o el estado bloqueado o de edicin de cada
objeto.
422

Pginas
Con un clic en el botn PGINAS en la parte superior de la GALERA DE PGINAS Y
CAPAS (o con un clic derecho en la galera y la opcin VER NIVEL DE PGINA) se abrir
el modo Pginas, vers solamente las pginas del documento y cerrars todos los
otros niveles abiertos.

Si te encuentras en el modo Pginas y la galera est fijada, el ancho de la galera se

reducir al mnimo para ocupar el menor espacio posible. La cantidad de botones en
la parte superior de la galera tambin se reducir a aquellos que pueden utilizarse
para las pginas. Para salir del modo pginas, simplemente expande una de las
pginas para ver sus capas. La galera regresar a su ancho completo y se restaurarn
todos los botones.

Puedes reordenar las pginas si arrastras las pginas seleccionadas en la GALERA DE

PGINAS Y CAPAS o si haces clic derecho sobre una pgina y escoges MOVER LA
PGINA HACIA ARRIBA/ABAJO .

Para cambiar el nombre a la pgina, haz clic derecho y escoge RENOMBRAR PGINA.
Adems de ofrecer una forma til de identificar pginas en documentos largos, el
nombre de pgina se usa cuando el documento se exporta como pgina web.

Capas
Qu son capas? Todo en tu documento tiene un orden de apilamiento esto significa
que nuevos elementos son posicionados encima de elementos ms antiguos de la
pgina, como si estuvieras aadiendo 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 difcil. Quizs
quieras trabajar en elementos que estn tapados por elementos que se encuentran
encima.

Las capas son tiles para organizar pginas o dibujos ms complejos que contienen
numerosas partes separadas. Utilizando capas puedes agrupar una coleccin de
elementos y luego activar o desactivar la coleccin entera (hacerla visible u ocultarla)
a travs de una operacin fcil. Imagnate que una capa es un sobre transparente de
plstico que contiene una pila de papeles separados. Abriendo el sobre puedes
acceder a su contenido y rearreglarlo. Pero tu escritorio puede que contenga una pila
de dichos sobres y, tal y como puedes volver a arreglar los sobres, tambin 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 ms fciles de manejar. Puedes asignar nombres a las capas o
puedes crearlas o borrarlas fcilmente. Y de igual modo que puedes hacer clic en el

www.magix.es
 Galera de pginas y capas 423

icono de la pequea flecha para abrir una pgina y ver su contenido (las capas en la
pgina), puedes hacer lo mismo con cada capa para ver los contenidos de esa capa.

Cuando selecciones cualquier objeto, la capa se mostrar en la lnea de estado en la

parte inferior de la ventana.

La capa actual
Cuando creas un objeto nuevo en la pgina, 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
seala con una flecha de seleccin .

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

Puedes cambiar la capa actual, simplemente con un clic sobre su hilera en la GALERA
DE PGINAS Y CAPAS . Es importante comprender que puedes seleccionar un objeto en
cualquier capa o incluso en mltiples capas, sin que se encuentren en la capa actual.
Esta capa actual, con la flecha, simplemente indica el lugar en donde se colocarn los
nuevos elementos.
424

Este ejemplo de la GALERA DE PGINAS Y CAPAS muestra la capa actual, llamada MouseOff (la
pgina actual se llama Novedades). Entonces, si dibujas algo nuevo se colocar en la capa
MouseOff.

Tambin muestra un elemento de grupo de sombras seleccionado en el documento (sealado 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 pgina "fondo" est bloqueada.

www.magix.es
 Galera de pginas y capas 425

Capa actual siempre visible

Es posible que la pgina 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 pestaa General (en la
pgina 488) del dilogo Opciones (haz clic derecho sobre una pgina y escoge
OPCIONES DE PGINA o selecciona OPCIONES del men HERRAMIENTAS ) para hacer que
las capas actuales siempre sean visibles y puedan editarse (no estn bloqueadas). Si
seleccionas esta opcin, cada vez que selecciones una capa en la GALERA DE PGINAS
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 pginas web

En pginas web guardadas de <Programmnam_short>, las capas se usan para efectos
de MouseOver o de popup (en el navegador web, los contenidos de estas capas se
visualizan cuando mueves el cursor sobre elementos en la pgina).

Puedes encontrar ms detalles sobre esto en el captulo de Grficos web y Pginas

web en el apartado de Capas, MouseOver (rollover) y popups (en la pgina 65).

Grupos y capas suaves

Los Grupos suaves (en la pgina 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 tambin se seleccionan, incluso si estn ocultas o bloqueadas. La
GALERA DE PGINAS 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 pgina 134) en el captulo de Manejo de
objetos para ms informacin.

Operaciones de capa
Con un clic en el botn CAPAS en la parte superior de la galera de pginas y capas
aparecern slo las capas de la pgina actual. Este es un modo en que el botn de
capas permanece pulsado. Mientras te encuentras en el modo de capas, si pasas a
otra pgina, se vern las capas de la pgina del momento y todos los otros nodos se
cerrarn. Para desactivar el modo, haz clic nuevamente en el botn CAPAS .

Puedes reordenar las capas, esto es el orden de superposicin en la pgina,

arrastrando y soltando en las capas en la galera de pginas y capas.
426

Puedes renombrar una capa haciendo haciendo dos veces clic (despacio) en el
nombre de la capa. (El primer clic seleccionara la capa.) Esto se parece mucho a
renombrar archivos en Windows Explorer.

Si mueves el cursor del ratn sobre los pequeos 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 galera de pginas y capas harn lo que
sus nombres sugieren. El botn NUEVO crear una capa nueva vaca y la posicionar
en la parte superior de la pila. Puedes cambiar el orden arrastrndolo a la posicin
requerida.

El botn DUPLICAR copiar la capa y su contenido y lo posicionar arriba en la pila, es

decir, arriba de todos los dems objetos de la pgina.

Propiedades de capa
Esta opcin abre el dilogo de Propiedades de capa

Creacin de capas y edicin de las propiedades de capas

Con la pestaa de capas, puedes:

www.magix.es
 Galera de pginas 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 pgina web que no aparecer al imprimir.
Especificar que todos los objetos de la capa solamente tendrn contorno de
texto (en la pgina 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 pginas web.

Uso de lneas gua

La pestaa Guas te permite crear guas para la capa en valores numricos precisos y
escoger un color para los objetos de la capa de guas.

Lee la seccin OBJETOS GUA Y LNEAS GUA en el captulo Manejo de objetos (en la
pgina 130) para ms informacin sobre el uso de lneas gua.

Configuracin de popup

Nota: La opcin CAPA DE PRESENTACIN solo estar activa si te encuentras en un

documento de presentacin. Para convertir un documento web en una presentacin,
consulta Presentaciones web (en la pgina 396).

Con esta pestaa podrs aplicar efectos de transicin animados a una capa, si la
utilizas como capa popup en una pgina web o si se trata de una capa de
presentacin. La capa luego aparecer con el efecto de transicin cuando se revele en
la pgina web exportada. Utiliza la barra para fijar el tiempo de transicin entre 0 y 5
segundos.
428

En una presentacin, una capa puede fijarse como una presentacin, si colocas la tilde
en la opcin CAPA DE PRESENTACIN . Consulta Presentaciones como pginas web (en
la pgina 396).

Nota: Si desactivas la opcin CAPA DE PRESENTACIN , el paso se quitar de la

presentacin.

Por defecto, cuando aplicas una transicin, los objetos solamente aparecern o
desaparecern desde la esquina de la pgina web. Si quieres que los objetos
aparezcan desde las esquinas de la ventana del navegador, en vez de desde las
esquinas de la pgina, quita la seleccin de la opcin de los bordes CLIP A LA
PGINA en la pestaa Pgina web (en la pgina 279) del dilogo de propiedades
web.

Capas especiales
Existen diversos tipos de capas especiales. Estos aparecen en la GALERA DE PGINAS
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
pgina (arrastrar y soltar desde la lnea de colores) esto crear automticamente una
capa de FONDO DE PGINA. En general, est bloqueada.

Tambin puedes configurar el color del tablero de dibujo (el rea alrededor de la
pgina) si arrastras un color desde la lnea de colores y lo sueltas en el tablero de
dibujo. Esto crea una capa de FONDO DE TABLERO DE DIBUJO automticamente.
Nuevamente, esta capa est bloqueada.

Al guardar un documento como un sitio web, las capas de fondo se convierten en

fondos de pgina web. Consulta el captulo Primeros pasos (en la pgina 23) para
ms informacin acerca de la configuracin de los fondos de pgina web y la
utilizacin de las capas de fondo.

La CAPA DE GUAS es el lugar en donde se colocan las lneas gua o los objetos gua.
Cuando creas una lnea gua, se crear automticamente una capa de guas. Podrs
seleccionar la capa de guas y colocar todo lo que desees en esta capa, lo que
funcionar como una gua de ajuste, si has activado la opcin "Ajustar a gua".

Lee la seccin Objetos gua y lneas gua en el captulo Manejo de objetos para ms
informacin.

www.magix.es
 Galera de pginas y capas 429

Ocultar capas
Las dos columnas de conos de la derecha de la galera de Pginas y capas controlan
la visibilidad y el estado bloqueado de las capas. Un clic en el ojo abierto ocultar
la capa de la pgina 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 pgina y no puede

verse ni seleccionarse ms. 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 botn
MS... y seleccionar la opcin VER TODOS , lo que hace visible todos los elementos de
la pgina actual.

Modo Solo
Si haces clic en cualquiera de los iconos en la columna junto a cada capa, activar
el modo "solo" de esta pgina, lo que significa que se ocultar todo lo dems, salvo
esta capa. Ahora puedes trabajar sobre esta capa aislada. Un clic en el icono
restaurar el estado anterior.

Tambin puedes hacer clic y arrastrar hacia abajo la columna de iconos para
navegar rpidamente por las capas independientemente de todo lo dems. Para salir
del modo Solo, haz clic en el botn 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 podrs seleccionar
ningn otro objeto en esa capa. Al hacer clic en los elementos cerrados, los
atravesars como si no estuvieran all y se seleccionarn 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 botn MS.. y seleccionar la opcin
DESBLOQUEAR TODO .

Grupos suaves
Hay una excepcin en las reglas de bloqueo. Si un elemento en una capa bloqueada
forma parte de un Grupo suave (en la pgina 134), al seleccionar u operar ese grupo
suave, se selecciona y opera asimismo cualquier elemento bloqueado de ese grupo
suave (para esto estn pensados los grupos suaves).
430

Mostrar todo y desbloquear todo

Estos dos controles en la parte superior de la GALERA DE PGINAS Y CAPAS son un

atajo de teclado para ver todos los elementos de la pgina actual o desbloquearlos.
Invalidan temporalmente todos los objetos individuales y configuracin de capas. Un
segundo clic sobre los controles restaurar el estado anterior. Es decir, que esta es
una forma rpida de ver o desbloquear todo, en todas las capas, realizar alguna
operacin y despus regresar al estado anterior. El botn "Desbloquear todo" es til si
has bloqueado un objeto en el lienzo y quieres desbloquearlo sin tener que buscarlo
primero en la galera de pginas y capas. Activa "Desbloquear todo", haz clic derecho
en el objeto en el lienzo y selecciona la opcin de desbloqueo del men contextual.
Luego puedes desactivar la opcin "Desbloquear todo". Cuando uno de los botones se
ha seleccionado (estn pulsados), entonces no es posible cambiar el estado de los
elementos individuales. Quita la seleccin de los botones para permitir la operacin
normal de la visibilidad de la capa y el estado bloqueado. Un clic sobre el botn MS
mostrar opciones de men para MOSTRAR TODO EN LA PGINA y DESBLOQUEAR TODO
EN LA PGINA .

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 GALERA DE PGINAS Y CAPAS

CORTA el objeto (Ctrl+X o haz clic derecho y selecciona CORTAR ). Asegrate 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 mltiples elementos que se encuentran en diferentes
capas, la estructura de capas se conservar cuando pegues. Los elementos se
pegarn 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 opcin 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 tambin se encuentran en la barra
desplegable del portapapeles en la barra sueperior, as como tambin en el
men EDITAR .
Haz clic derecho y escoge ARREGLO y luego MOVER A LA CAPA DE
ADELANTE /MOVER A LA CAPA DE ATRS para mover los objetos seleccionados a
una capa ms arriba o abajo.
Asegrate de que la capa de destino est seleccionada como la capa actual y
luego encuentra el elemento seleccionado en la GALERA DE PGINAS Y CAPAS
(haz clic en el botn LOCALIZAR ), haz clic derecho sobre el elemento y
selecciona MOVER A LA CAPA ACTUAL .

www.magix.es
 Animaciones web 431

Animaciones web

Utilizacin de animaciones web

Las animaciones web son una forma genial de aadir contenido atractivo a tus
pginas web. Puedes tomar cualquier objeto de tu documento web y crear
rpidamente una respuesta animada a un evento como MouseOver, un clic del ratn
o un toque de la pantalla. Por ejemplo, puedes hacer que algunos elementos
aparezcan gradualmente la primera vez que se reproducen, puedes aadir una
animacin de rebote cuando pasas el cursor sobre un elemento y agregar otra
animacin diferente cuando haces clic sobre l. Tambin puedes activar capas popup
o un texto popup y hacer que los objetos vayan apareciendo a medida que te
desplazas hacia abajo por una pgina.

Para animar un objeto, haz clic derecho sobre l y luego escoge ANIMACIN WEB del
men desplegable; o dirgete a "HERRAMIENTAS" > "ANIMACIN WEB" .

O haz clic en el botn ANIMACIN WEB de la barra desplegable de

PROPIEDADES DE SITIO WEB .

Esto abrir el dilogo ANIMACIN WEB .

432

El dilogo tiene pestaas para los eventos MouseOver, Clic/Toque y Aparicin.

El dilogo de animacin no es modal, es decir, que podrs dejarlo abierto a medida

que seleccionas diferentes elementos de la pgina. Si presionas el botn APLICAR en
lugar de pulsar ACEPTAR , el dilogo se quedar en pantalla. Luego podrs seleccionar
otro elemento para cambiar la animacin sin tener que volver a abrir el dilogo.

Para ver una vista previa de tus animaciones en el navegador integrado, haz
clic en el botn VER VISTA PREVIA DE LA PGINA 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 navegacin) o para
botones con dos estados (por ejemplo, botones con un enlace que cambia de color si
pasas el cursor sobre ellos). Tambin puedes establecer un efecto MouseOver para
un solo objeto seleccionado.

Haz clic en el men desplegable de la pestaa MOUSEOVER para ver y aplicar los
efectos.
Puedes escoger entre una y seis velocidades para la animacin, lo que implica de
MUY RPIDO 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 tambin tenga una animacin. Haz clic en el botn
EFECTO para abrir el dilogo de configuracin de popup (en la pgina 70) para el
efecto de la capa de popup.

Para ms informacin consulta Capas, MouseOver y popups (en la pgina 65).

Animaciones de clic/toque
Esta pestaa te permite elegir una animacin que se reproducir cuando se haga clic
en el objeto (o se lo toque en un dispositivo tctil). Al igual que con la pestaa
MouseOver, puedes elegir el tipo de animacin y su velocidad, y configurar el efecto
por defecto para el clic/toque que se aplicar a todos los botones que tengan un
grfico MouseOver.

Animaciones de aparicin
Si seleccionas la pestaa Aparicin de este dilogo, puedes hacer que el objeto
aparezca con una animacin (tal como se muestra en la pgina) 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 pgina web, los objetos van
apareciendo.

El pequeo grfico azul aparecer desde la izquierda cuando se muestre en la ventana del
navegador.

Escoge un efecto de animacin del men desplegable.

Fija una velocidad para el efecto con el regulador TIEMPO.
Si lo deseas, utiliza el regulador para aadir 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 denominacin en el dilogo NOMBRES. Ahora, cuando hagas clic
en el men desplegable NOMBRE DE OBJETO TRIGGER: podrs seleccionar el
nombre.

Para ms informacin sobre la aplicacin de nombres, consulta Nombrar objetos.

434

Combinaciones de animaciones y tipos de

objetos
La tabla muestra qu tipos de objetos funcionan con cules animaciones.

Tipo de objeto Animaciones Animaciones Animaciones de clic

de aparicin MouseOver

Texto S S S
Imgenes (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 pgina
Objetos en la capa de No No No
fondo de tablero de dibujo
Animaciones de aparicin NC S S
de objetos
Barras de navegacin S S S
Objetos en capas de popup S S S

Importante: Algunos widgets de la versin 10 de la galera no son compatibles con las

nuevas caractersticas de animacin y sticky si se utilizan en la misma pgina o en el
mismo supersite, por lo que es probable que debas reemplazarlos con las versiones
actualizadas de la galera de diseos. Haz clic aqu
http://support.xara.com/index.php?/Knowledgebase/Article/View/816/ para ms
informacin en el sitio de asistencia.

www.magix.es
 Animaciones en Flash 435

Animaciones en Flash

Introduccin
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 animacin a
travs del tiempo, y MAGIX Web Designer 11 Premium producir automticamente
todos los frames que sean necesarios entre un frame y otro (pasos intermedios), es
un proceso llamado "tweening" (generacin de transiciones).

Un ejemplo de frame de inicio

El prximo frame clave tiene la estrella en otra posicin, la forma se ha rotado un poco, se ha
reducido su tamao 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 automtica. 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 graduacin de transparencia
compleja, difuminacin (feathering), y la mayora 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 transicin a la estrella en el segundo
frame clave superior para que sea 100% transparente, obtendrs una animacin en la
cual la estrella se mueve, reduce su tamao 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 grficos

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 pequeas 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 vdeo se reproduce suavemente a 24
frames por segundo) crea un archivo flash de tan slo 700 bytes.

Los 6 tipos centrales de animacin

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 bsicos de
animacin. 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 posicin a otra.

2. Modificar tamao (scale): aumentar o reducir el tamao 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 transformacin mencionados anteriormente son

absolutamente claves para todas las animaciones flash. Ningn otro tipo de
transformacin es posible para frames de transicin (tweened frames).

Si te fijas en algunos ejemplos de animacin en Flash en la web, te dars cuenta de

que casi todas las animaciones utilizan stos efectos. Los objetos aparecen y
desaparecen (fade in, fade out), se mueven de una posicin 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 fcil 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 accin 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 ilustracin
vectorial y no est diseado para ser una herramienta de Flash integral. En vez, este
programa ofrece un enfoque nuevo e innovador, y de fcil comprensin 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 ms sencilla y fcil que con otras aplicaciones.

Debido a su enfoque simplificado, MAGIX Web Designer 11 Premium no es

compatible con las funciones ms complejas de Flash como scripting (programacin),
audio o pelculas integradas (embedded movies).

Adicionalmente, como la renderizacin 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 estn detallados al final de este captulo
en "Qu funciones de MAGIX Web Designer 11 Premium son compatibles con
Flash?".

Principios bsicos
En tu animacin es probable que tengas algunos objetos que se mantengan estticos
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 botn CREAR
NUEVOS NOMBRES que se encuentra en la barra de informacin de la
HERRAMIENTA DE SELECCIN ).
438

Para ms informacin sobre cmo colocarle nombres a los objetos. ver la seccin
"Nombrar objetos" en el captulo "Trabajar con documentos".

Aqu tienes un resumen de los pasos a seguir cuando quieres crear una animacin
nueva:

1. Primero decide el tamao de la animacin y luego configura el tamao de pgina

(ver "Archivo > Opciones de pgina (en la pgina 495)").
2. Dibuja tu primer frame. Pnle 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 segn lo desees.
5. Comprueba los resultados en la vista previa.
6. Repite los pasos de 3 a 5.

Y as podrs seguir componiendo tu animacin.

El botn Copiar frame de la barra de botones para animaciones.

MAGIX Web Designer 11 Premium crea un frame clave nuevo con slo pulsar un
botn (bsicamente lo que hace es copiar el frame anterior). La GALERA DE FRAMES te
permite ver cualquier frame clave y puedes ajustar el orden y el tiempo de duracin
de los frames. La GALERA DE FRAMES se explica en detalle ms adelante en este
captulo.

Para aquellos que estn 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 automticamente todos los pasos intermedios (tween steps)
para producir animaciones ms 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 mantendrn visibles pero estticos por el
tiempo de duracin del frame hasta que aparezca el prximo frame. Para borrar un
objeto de una animacin, brralo slo en el primer frame clave en el que no quieres
que aparezca.

Tu primera animacin
Para crear una nueva animacin, crea un nuevo documento de animacin. Para esto:

Selecciona ARCHIVO > NUEVA > ANIMACIN ("Ctrl + + N"). Se abrir un nuevo
documento y vers la barra de botones para animaciones que incluye algunos
botones relevantes para la animacin.

www.magix.es
 Animaciones en Flash 439

1. Dibuja una forma simple, por ejemplo un rectngulo redondeado, con la

herramienta de rectngulo (pero puede tener cualquier forma).
2. Haz clic sobre el icono APLICAR NOMBRE en la barra de informacin de la
HERRAMIENTA DE SELECCIN y ponle el nombre "forma".
3. Haz clic sobre el botn COPIAR FRAME para crear un segundo frame
clave.
Modifica la forma segn lo desees. Puedes ajustarla utilizando
cualquiera de las seis formas de animacin descritas anteriormente en
este captulo.
4. Pulsa el botn de VISTA PREVIA DE ANIMACIN FLASH para visualizar la
animacin.

Por defecto, el tiempo de duracin de cada frame clave dura medio segundo. Para
producir una animacin ms larga, ve a la seccin "Duracin de frames para pelcula
Flash y pasos intermedios", que se encuentra ms adelante en este captulo.

No ests limitado a incluir un solo objeto en movimiento por frame clave, puedes
tener todos los objetos que quieras en cada frame clave. Slo tienen que pasar por
algn tipo de transformacin 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 rectngulo
esttico.

En el siguiente frame clave, el texto se ha ampliado y oscurecido, el rectngulo 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 animacin.

440

Frame clave 1

Pasos intermedios producidos

por MAGIX Web Designer 11
Premium

Frame clave 2

En esta animacin, el objeto de texto crece y simultneamente el rectngulo redondeado gira y

desaparece.

Exportacin de un archivo Flash

Para exportar una animacin como archivo Flash, selecciona ARCHIVO > EXPORTAR
ANIMACIN y luego escoge Flash en GUARDAR COMO TIPO o pulsa el botn EXPORTAR
FLASH ANIMADO .

Con esto el archivo SWF acabado se guardar en la ubicacin indicada.

Vista previa de un objeto flash en MAGIX Web Designer

11 Premium.
Para visualizar la animacin tal como se ver en la pgina web, haz clic en el
botn de VISTA PREVIA DE ANIMACIN FLASH y se abrir un navegador con la
vista previa de la animacin.

La pgina de vista previa te mostrar la animacin final e informacin til como las
dimensiones de la animacin, tamao del documento, etc. Tambin incluye
instrucciones simples sobre cmo insertar la animacin en una pgina web.

Insercin 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 pgina web para insertarlo en el sitio web. Se crear

www.magix.es
 Animaciones en Flash 441

automticamente una imagen esttica de marcador de posicin y se colocar en tu

pgina. Haz una vista previa de tu pgina web y vers la animacin Flash en
funcionamiento.

Como alternativa, puedes crear un objeto de marcador de posicin de forma manual.

En tu pgina web, crea un objeto marcador del lugar, puede ser algo como un simple
rectngulo o una imagen. Posiciona y ajusta el tamao de tu marcador de lugar

A continuacin, en el dilogo de PROPIEDADES WEB (Ctrl+Shift+W), selecciona la

pestaa MARCADOR DE LUGAR y las opciones de navegacin REEMPLAZAR CON FLASH
para localizar el archivo .SWF requerido. Haz clic en APLICAR .

Ahora, cuando realices la vista previa de tu pgina web, el marcador de lugar es

reemplazado por la animacin 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 animacin y exportas un
archivo .swf actualizado que quieras utilizar en su lugar, o bien busca el nuevo archivo
.swf con Herramientas > Propiedades web > Pestaa Marcador de posicin o
reemplaza manualmente el archivo en la carpeta de soporte con el archivo
actualizado.

Consulta la seccin Carpetas de soporte (en la pgina 86) del captulo Trabajar con
documentos para ms informacin.

Insercin con otra herramienta de autora web

Para posicionar tu animacin SWF en tu HTML, haz clic en el enlace VER HTML en la
pantalla de vista previa de flash para obtener el cdigo que luego puedes pegar en tu
pgina web con ayuda de tu editor HTML preferido.

Nota: Debes cambiarle el nombre al archivo SWF en el cdigo para que coincida con
el nombre actual de tu archivo exportado SWF. Tambin debes colocar tu archivo
SWF en el mismo directorio de tu pgina web para que funcione tu cdigo. Si deseas
colocar el archivo SWF en otro directorio, debers cambiar el cdigo HTML.

Exportacin de animaciones como AVI

Adems de exportar tus animaciones como GIF y Flash, tambin podrs exportarlas
como formato .AVI.

En el documento de animacin, escoge EXPORTAR ANIMACIN del men ARCHIVO, y

escoge ANIMACIN AVI ANIMATION (*.AVI) de la lista desplegable Guardar como tipo
en el dilogo Exportar archivo. Haz clic en el botn OPCIONES para escoger la
configuracin de exportacin o simplemente pulsa el botn EXPORTAR para usar la
configuracin actual o por defecto.
442

Opciones AVI
Seleccin del cdec
Utiliza la lista desplegable para seleccionar entre los cdecs que tienes instalados.
Esto determina la forma en que se codificar y comprimir su AVI. O escoge la opcin
"sin compresin" si quieres exportar un AVI sin compresin. Ten cuenta que esto
tendr como resultado un archivo de gran tamao.

Keyframe cada N frames

El valor por defecto lo provee el cdec seleccionado y, generalmente, lo mejor es
mantener este valor. Reducir el nmero resultar en archivos de mayor calidad pero
tambin de mayor tamao.

Configurar
Si pulsas el botn CONFIGURAR , se abrir un dilogo de configuracin especfico para
el cdec seleccionado (si est disponible), que te ofrecer opciones de configuracin.
El botn ACERCA te dar ms informacin sobre el cdec seleccionado.

Fondo transparente
Si seleccionas esta opcin, tu AVI tendr un fondo transparente, lo que es til si
quieres que tu animacin aparezca sobre una pelcula (por ejemplo, para los ttulos).

Cuando esta opcin est activada, la lista de cdecs se reduce a la opcin "sin
compresin", porque ninguno de los cdecs es compatible en la actualidad con la
transparencia. Si exportas un AVI sin compresin con transparencia, se importar al
software de edicin de vdeos de MAGIX y en algunas otras aplicaciones de edicin
de pelculas con transparencias.

rea a guardar
Escoge si quieres guardar una pelcula que tenga el tamao de tu pgina de animacin
o del dibujo animado.

Haz clic en Aceptar para exportar la animacin AVI.

La galera de frames de animacin

Por defecto, la GALERA DE FRAMES DE ANIMACIN se muestra abierta en la parte
derecha de la ventana de Web Designer, (junto a la GALERA DE PGINAS Y CAPAS )
cuando abres o creas un nuevo documento de animacin.

Para abrir la GALERA DE FRAMES, selecciona "HERRAMIENTAS > GALERAS >

GALERA DE FRAMES ", o haz clic en el cono de la GALERA DE FRAMES en la
barra de herramientas de las GALERAS.

www.magix.es
 Animaciones en Flash 443

Una GALERA DE FRAMES tpica. 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 galera.

La GALERA DE FRAMES DE ANIMACIN muestra los frames de arriba hacia abajo: el

primer frame est primero en la lista y cada frame que aadas aparecer al final de la
lista. Puedes reordenar los frames con solo arrastrarlos. La galera cuenta con varios
botones para realizar las operaciones ms importantes, como crear un frame nuevo,
borrar o copiar un frame seleccionado (siempre se agregar al final) y crear nuevos
frames en blanco.

El botn PROPIEDADES es muy importante ya que muestra el dilogo de las

PROPIEDADES DE ANIMACIN , que controla muchos aspectos, no solo de la animacin
seleccionada, sino tambin de la animacin completa.

Dilogo de las propiedades de animacin

444

Otra forma de visualizar el dilogo de las propiedades de la animacin es hacer doble

clic sobre el nombre de un frame en la GALERA DE FRAMES .

Los botones TODOS LOS FRAMES VISIBLES (cono de un ojo) y EDITAR

TODOS LOS FRAMES (candados), que se encuentran en la GALERA DE
FRAMES son muy tiles porque te permiten visualizar o editar todos los
frames al mismo tiempo.
Esto es particularmente prctico 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 botn COPIAR , y luego arrastra la
nueva copia desde el final a la posicin 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 reproducirn siguiendo el orden
de los frames de arriba hacia abajo, no importa cul 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 pgalo al nuevo frame). La opcin "Editar > Pegar
en lugar" ("Ctrl + + V") es muy prctica para cuando quieras ejecutar esta accin,
ya que siempre se pegarn los objetos en la misma posicin que el lugar de donde los
copiaste pero en el nuevo frame.

Cuando copias un objeto, el nombre se copia junto a l, pero asegrate de que no

haya otro objeto con el mismo nombre porque sino surgirn errores.

Fotos
Como los documentos en Flash estn compuestos por formas vectoriales, y stos se
transforman fcilmente, los documentos pueden ser muy pequeos. Se pueden
integrar fotos y mapas de bits a las animaciones en Flash, pero al menos que seas
especialmente cuidadoso se convertirn en documentos de animacin muy grandes.
Puedes realizar 5 de las 6 transformaciones centrales sobre mapas de bits y fotos
(puedes mover los objetos, cambiarles el tamao, aplastarlos, rotarlos y hacerlos
desaparecer).

Los documentos en Flash pueden incluir imgenes en PNG y JPEG, tal como los
documentos .xar. Si mantienes el tamao y la resolucin bajas podrs crear
animaciones pequeas en Flash con fotos. La mejor forma de incorporar fotos en
JPEG con el tamao ms pequeo posible y con la compresin ms alta que puedas
aceptar.

www.magix.es
 Animaciones en Flash 445

Afortunadamente es fcil guardar imgenes en JPEG desde el MAGIX Web Designer

11 Premium en el tamao, resolucin y con la compresin que desees, y hasta tienes
una vista previa interactiva en la que podrs ajustar la compresin y ver el resultado
de forma inmediata.

Si sueltas un documento JPEG sobre la animacin y le cambias el tamao, esto no

reducir el tamao del documento en JPEG, sino que se reducirn sus dimensiones (y
por ende se incrementar la resolucin). En este respecto el programa Flash se
comporta tal como el MAGIX Web Designer 11 Premium ya que integra (embed) la
resolucin total de la imagen JPEG original a la animacin para que puedas acercarte
a ella con el zoom. Por esta razn es muy fcil calcular el tamao estimado de
cualquier animacin que contenga fotos en JPEG; es aproximadamente la suma de los
tamaos de todas las imgenes JPEG integradas a la animacin (la GALERA DE MAPA
DE BITS te mostrar el tamao de todas las fotos y mapas de bits integrados a la
animacin).

Cuando realices una transicin (tweening) para los mapas de bits o para una foto,
slo 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, slo porque aparezcan el mapa de bits en los frames 1, 2 y 3 de tu
animacin, 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 ms grandes y por ende menos
adecuados para usarlos en las animaciones en Flash (la compresin JPEG es mucho
mejor que la PNG). Sin embargo, si incluyes una imagen PNG de baja resolucin (una
imagen de 96 dpi o menos - la lnea de estado te muestra la resolucin de cualquier
imagen seleccionada), permanecer como imagen PNG en el archivo flash. Las
imgenes con una resolucin ms alta (>96 dpi) sern convertidas a JPEG (JPEG
transparente, si fuera necesario).

Puedes controlar la compresin utilizada para la conversin automtica a JPEG si

utilizas la barra deslizante de la pestaa OPCIONES FLASH en el dilogo de
PROPIEDADES DE ANIMACIN . El valor de compresin ms comn es de un 75% pero
puedes modificar la calidad, luego visualizar la animacin en una vista previa y
rpidamente ver el tamao 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 animacin utilizando una compresin PNG, que usualmente es
la mejor tipo de compresin para este tipo de imgenes.

Calidad de mapas de bits

El programa Flash Player versin 8 y las versiones siguientes tienen una calidad ms
alta de visualizacin de los mapas de bits. Es particularmente evidente cuando rotas y
cambias el tamao de los mapas de bits y las fotos, mientras que en las versiones
ms viejas se reproducen las imgenes de forma pixelada y con movimientos menos
fluidos.

Puedes ver qu versin tienes del Flash Player si haces un clic derecho sobre
cualquier animacin en tu navegador web y mira el men "Acerca de" (About).

Te recomendamos que exportes tu animacin en Flash como versin 8 si ests

utilizando fotos o mapas de bits. Puedes controlar esto en la pestaa OPCIONES FLASH
del dilogo de PROPIEDADES DE LA ANIMACIN .

www.magix.es
 Animaciones en Flash 447

Duracin de frames para pelculas Flash y pasos

intermedios
Las animaciones Flash se reproducen a un ritmo prefijado. Cunto ms rpido sea el
ritmo (frame rate o duracin de cada frame) de los frames, mejor fluir la animacin
aunque el archivo en Flash ser ms 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 duracin del perodo hasta el prximo
keyframe. Por ejemplo, si has definido como tiempo de duracin de un frame a medio
segundo, esto significa que la animacin tardar medio segundo en pasar de un
keyframe a otro. Si tienes el ritmo de la animacin prefijado a 24 frames por segundo,
esto quiere decir que el MAGIX Web Designer 11 Premium generar 11 pasos
intermedios en la animacin en Flash; que son 12 frames en total. (Estos frames
intermedios nunca se vern en MAGIX Web Designer 11 Premium ya que solo se
generan cuando creas un archivo Flash).

La GALERA DE FRAMES siempre te mostrar el tiempo de duracin de cada keyframe.

En este ejemplo se muestran tres frames, cada uno durante un segundo, por lo que la
animacin dura 3 segundos antes de repetirse.

Para crear un efecto de intermedio ms largo (en otras palabras, hacer la animacin
ms lenta) tienes que incrementar el tiempo de duracin en el dilogo PROPIEDADES
DE LA ANIMACIN .

La forma ms fcil de modificar el tiempo de duracin de cualquier frame es hacer

doble clic sobre el nombre del frame que quieres cambiar para abrir el dilogo; luego
introduce el tiempo de duracin que t quieras en segundos y pulsa ACEPTAR o
APLICAR .

Mover frame hacia adelante/atrs

Estos botones te permiten mover un keyframe hacia adelante o hacia atrs en la
animacin sin modificar la duracin. Esto es til cuando trabajas con animaciones que
448

se exportan como AVI y se incluyen en pelculas, especialmente si ests intentando

rastrear un objeto en el vdeo con tu animacin. Por defecto, cada clic mueve el frame
en 1/25 de un segundo, lo que corresponde a un frame en una pelcula de 25 fps.
Puedes cambiar este valor en la pestaa FRAME del dilogo de PROPIEDADES DE LA
ANIMACIN .

Mover frame 1/25 seg. hacia adelante

Mover frame 1/25 seg. hacia atrs

La duracin del frame anterior se ajusta para mantener la duracin general de la

animacin, de forma que solo ests desplazando el keyframe hacia adelante o hacia
atrs.

Recortar y cortar
Quizs ms 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 animacin como esta, tienes que cambiar el tamao de la pgina en
MAGIX Web Designer 11 Premium al tamao que deseas tener para la animacin en
Flash. Por ejemplo, si quieres un banner en Flash que tenga 468 pxeles de ancho y 60
pxeles de alto, tienes que ajustar el tamao de la pgina de tu documento de
animacin a 468x60. Para cambiar el tamao de la pgina ve a PESTAA DE PGINA
en el DILOGO DE OPCIONES (en la pgina 495) (o selecciona "ARCHIVO -> OPCIONES
DE PGINA" ) e introduce los valores en los campos "ancho" y "alto" respectivamente.

Cuando exportas o realizas una visualizacin previa, la animacin en Flash se ajustar

automticamente al tamao de la pgina que ya habas determinado. Por ello, es muy
fcil arreglar tu animacin para que los objetos entren y salgan de la animacin
visible. Por ejemplo, si colocas un objeto animado a la izquierda de la pgina en un
frame clave (key frame) y a la derecha de la pgina en el prximo frame clave, el
objeto se ver entrar del lado izquierdo del diseo para desaparecer por el lado
derecho.

Nota: Si abres documentos ms antiguos creados con versiones anteriores de Xara

Xtreme, no cortarn la pgina (el tamao de la pgina era enorme), en vez de ello
los cortarn al tamao del dibujo. Puedes controlar esto en el dilogo de
propiedades de animacin.

www.magix.es
 Animaciones en Flash 449

Configurando el rea para guardar como Dibujo crear una animacin flash que slo
sea tan grande como debe ser, por ejemplo de igual tamao que los lmites de la
animacin. Esto puede ser til si no necesitas un tamao de pgina especfico.

Velocidad de la animacin
Cuando crees un nuevo frame clave, tendr por defecto una duracin de medio
segundo. Por lo tanto la animacin de ese frame clave al siguiente tardar medio
segundo. Cuanto ms larga sea la duracin configurada para la animacin, ms lenta
ser su reproduccin. Para configurar el tiempo de duracin para cada frame, primero
selecciona el frame que necesitas en la GALERA DE FRAMES (haz clic sobre l), y luego
haz clic sobre el botn de PROPIEDADES DE ANIMACIN (simplemente haz doble clic
sobre el nombre del frame).

Si configuras la opcin "Mostrar este frame por" a 2 segundos, significa que la animacin tardar
2 segundos en pasar de este frame clave al siguiente.

Nota: el dilogo de PROPIEDADES DE ANIMACIN es del tipo no modal (non-modal),

lo puedes tener siempre presente en la pantalla. Si presionas el botn APLICAR en
lugar de pulsar "Aceptar", el dilogo se quedar en pantalla. Los contenidos sern
450
actualizados a medida que vayas seleccionando los diferentes frames, y puedes
configurar distintos tiempos de duracin para cada uno de ellos.

Fluidez de la animacin (smoothness)

Los frames de las pelculas de Flash se reproducen a un ritmo constante. Cuanto ms
rpido sea el ritmo de reproduccin (frame rate), ms fluida ser la animacin. Las
animaciones de MAGIX Web Designer 11 Premium tienen por defecto 24 frames por
segundo. Para cambiar el ritmo selecciona la pestaa OPCIONES FLASH del dilogo de
PROPIEDADES DE ANIMACIN .

La pestaa "opciones Flash" en donde puedes cambiar la velocidad de la pelcula, as como

tambin la versin de la exportacin en Flash.

Nota: cuanto ms rpido sea el ritmo (frame rate) del frame, ms grande ser el
archivo resultante en Flash. Si tu animacin consiste mayormente en objetos que
aparecen y desaparecen, con relativamente pocos movimientos rpidos, entonces
puedes reducir el tiempo de duracin a menos de 24 frames por segundo. Si tienes
mucha accin con movimientos rpidos, quizs sea necesario aumentar el ritmo,
pero raramente es necesario tener ms de 50 frames por segundo.

Rotacin
MAGIX Web Designer 11 Premium genera los frames intermedios (tween frames) de
forma automtica, haciendo un clculo de cmo deben transformarse las formas de
un frame al otro. Pero a veces no es posible saber exactamente qu tipo de rotacin
es necesaria.
www.magix.es
 Animaciones en Flash 451

Como en este caso. Supone que quieres

crear una transicin (tween) entre la
primera cara del reloj y la segunda:

Seguramente esperas que las agujas se

muevan en direccin a las agujas del
reloj pero tambin podran moverse en
sentido contrario:

Es ms, incluso podran rotar de otras formas tambin. El

ejemplo de arriba asume que la aguja se mueve de un
extremo a otro, pero tambin podras crear una rotacin que
vaya en "lnea recta", (ver grfico):

Si miras detenidamente, la aguja rota sobre su centro y no de un extremo a otro, y el

punto central se mueve en lnea recta de un frame clave al siguiente. Por defecto el
MAGIX Web Designer 11 Premium hace rotar a los objetos de esta forma.

La funcin de rotacin
Para que la rotacin sea sobre otro punto puedes aadir la palabra clave "rotar"
enfrente del nombre del objeto (ver abajo en Galera de nombres). O puedes usar la
combinacin "rotar +" para hacer que la rotacin vaya en direccin a las agujas del
reloj o introducir la combinacin "rotar -" para que vaya en contra de las agujas del
reloj.

Vuelve al ejemplo de animacin de la pgina anterior con dos frames claves en donde
la aguja del reloj se mueve de las 12 a las 8. Si introduces la combinacin de palabras
"rotar + aguja" al objeto aguja, hars que la animacin mueva la aguja en direccin a
las agujas del reloj (como en un reloj real). En cambio, si le colocas lacombinacin de
palabras "rotar - aguja", sta se mover en direccin contraria a las agujas del reloj.

Si no has insertado un comando especial para la rotacin, entonces se generar un

movimiento de transicin (tween) con el trayecto ms corto entre los objetos de un
frame a otro (rotando sobre el centro). Si introduces un comando de rotacin para el
objeto con nombre, se calcular el punto de rotacin necesario para generar la
animacin.
452

Nota: no es posible rotar un objeto 360 entre frames claves si el punto de rotacin
no se encuentra en el centro. Por ejemplo, para crear una rotacin "completa" (que d
toda la vuelta) de las agujas del reloj en el ejemplo de arriba deberas 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 podrs copiar el grupo al
frame clave siguiente. MAGIX Web Designer 11 Premium animar el grupo completo
de un frame clave a otro. Y podrs aplicar las transformaciones normales al grupo
(como cambiar el tamao, rotar, aplastar pero no podrs crear una transparencia para
el grupo; ver prxima pgina).

Si quieres que algunos miembros del grupo se muevan de forma diferente que el resto
del grupo, entonces estos objetos debern tener un nombre distinto ("Ctrl + haz clic
para seleccionar un objeto dentro del grupo, y luego colcale un nombre).

Nota: Si quieres realizar cambios a algunos componentes del grupo, primero tendrs
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 GALERA DE NOMBRE ).
No debes cambiar el orden de los tems del grupo.
No debes aadir o quitar tems del grupo.

Transparencia en un grupo
Si quieres que un objeto agrupado se vaya desvaneciendo en la animacin, 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 opcin HACER GRUPOS TRANSPARENTES EN SU CONJUNTO en el
dilogo de OPCIONES ("Herramientas > Opciones, luego ve a la pestaa 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 renderizacin de vectores en Flash es relativamente primitiva, comparada con la
del MAGIX Web Designer 11 Premium. Por esta razn, no podrs usar las funciones
ms avanzadas de MAGIX Web Designer 11 Premium como difuminacin
(feathering), transparencias complejas y tipos de rellenos o sombras suaves. Las
lneas (pinceladas) slo podrn tener un grosor simple y constante, y con extremos
redondeados. No se pueden usar lneas con guiones. El grosor mnimo para una lnea
es de un pxel. Las lneas que sean ms finas en MAGIX Web Designer 11 Premium
sern representadas en Flash como si tuvieran un pxel de grosor.

Hay dos aspectos a tener en cuenta para cuando realices dibujos que sean
compatibles con Flash. Primero, debes limitarte a utilizar slo aquellas funciones que
sean compatibles con el Flash Player. Segundo, cuando crees animaciones slo
podrs utilizar una serie limitada de caractersticas 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 lneas y formas (aunque el flash es mucho
menos preciso que MAGIX Web Designer 11 Premium, por eso, a veces, habrn
inexactitudes en lneas y formas).
Los rellenos lisos, lineales, circulares y los rellenos elpticos con gradacin de
color.
Rellenos con gradaciones de color de varios niveles, incluyendo rellenos lineales
y elpticos. Mximo cuatro fases de color.
Transparencia plana. Slo tipo mixto.
La transparencia con gradacin es compatible con los objetos con relleno de
color plano (sin gradacin). Es decir, puedes tener objetos con gradacin de
color y con transparencia lisa u objetos con color liso y con transparencia con
gradacin, pero no podrs tener ambos.
Contornos de grosor constante (trazos de pincel) con extremos redondeados y
uniones de lnea (los archivos en Flash versin 8 tambin 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 ms eficiente que la integracin de la fuente en
los documentos en PDF.
Texto sobre una curva. Nota: la lnea utilizada para la curva deber hacerse
invisible para que la animacin funcione.
Mapas de bits y rellenos de mapas de bits.
Mapas de bits Contoned (coloreados) y rellenos de mapas de bits
Saturacin foto, temperatura del color y desenfoque (pero no brillo / cambios de
contraste).
454

Nubes fractales y rellenos de plasma funcionarn, pero se convertirn 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 estticos, stos se
exportan como mapas de bits al archivo flash, de modo que no son muy eficientes y
no son adecuados para la animacin.

Lo que puede animarse:

Tal como se mencion al comienzo de este captulo, stas son las reglas de oro sobre
lo que se puede cambiar de un frame clave al otro:

Mover: desplazar los objetos de una posicin a otra.

Modificar tamao (scale): aumentar o reducir el tamao 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 combinacin de lo anterior.

Adicionalmente, hay determinados casos especiales de transformaciones de color de

foto que son compatibles con flash. Puedes alterar la saturacin (as puedes convertir
una foto de color completo a una foto en blanco y negro para insertarla), adems
puedes ajustar el color de la temperatura (caliente / fro) y cambiar el valor de
desenfoque. El ltimo caso te permite convertir una foto desenfocada en una foto
enfocada. Pero observa que esto slo funciona con valores de desenfoque, pero no
funciona con valores de enfoque. Asimismo, existe una pequea diferencia en cmo
flash desenfoca las fotos. Flash desenfoca la foto completa incluyendo el borde,
mientras que el desenfoque en MAGIX Web Designer 11 Premium slo 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 posicin
de la letra en un frame clave con la posicin de la letra en el prximo frame. Esto
puede producir efectos muy interesantes.

Nota: la lnea utilizada para la curva deber hacerse invisible para que la animacin
funcione.

www.magix.es
 Animaciones en Flash 455

Objetos sin movimiento

Puedes aadir nuevos objetos simplemente dibujndolos sobre cualquier frame clave.
Estos aparecern en la animacin al comienzo del frame y desaparecern en el
prximo, salvo que aparezcan tambin en el segundo frame. Por lo tanto, la forma
ms fcil de que un objeto aparezca esttico en todos los frames es asegurarse de
que est copiado en todos los frames. La optimizacin Flash de MAGIX Web
Designer 11 Premium es muy eficiente y vers que realizar ms de una copia casi no
ocupa espacio adicional en el archivo (esto es aplicable para mltiples copias de
objetos en diversos lugares).

El color se transforma el color de la animacin

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 lnea independientemente del color del relleno.
Puedes cambiar los colores de tono continuo de una foto.
No puedes ajustar la posicin de los rellenos con gradacin.

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 estticos como para cambios de transparencia tweening), pero la
transparencia con gradacin de MAGIX Web Designer 11 Premium no es realmente
compatible con Flash. Existe una sola situacin en la que puedes utilizar transparencia
con gradacin 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 gradacin (lineal, circular y elptica) 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 animacin 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 opcin RECTNGULO
RODEANDO OBJETO . Esto garantiza que aquellos que observan la animacin 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 animacin

En la pestaa PROPIEDADES DE ANIMACIN -> OPCIONES FLASH puedes configurar que
en una URL se aplique la animacin 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 animacin para ir a la direccin web sugerida.

clicTAG
Los clicTAG son utilizados con frecuencia por redes de publicidad. En vez de codificar
una URL en una animacin Flash, el clicTAG permite a una organizacin insertar su
propia URL en la animacin, lo que es particularmente til para rastrear clics de
publicidad.

Si necesitas utilizar esta caracterstica, 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 estn separados en intervalos regulares entre los frame
claves, produciendo una animacin lineal de un frame clave al otro. Al aadir los
smbolos < 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 rpido y despus ir ms lento. Lo opuesto, <Nombre, har que la
animacin comience lento y se acelere.

Hasta puedes usarlos en combinacin. Si el nombre de un objeto es <>Nombre, el

objeto comenzar lento, ir ms rpido y volver a ir ms lento hacia el final del
periodo del frame. La terminologa tradicional de animacin denomina esto "easing"
porque puedes entrar ("ease in") o salir ("ease out") con facilidad, y la orden <> sera
un "ease in/out".

Puedes controlar el grado de aceleracin o desaceleracin utilizando nmeros del 0 al

9. Esto significa que <2Nombre ser una aceleracin muy lenta, mientras que
<9Nombre ser una aceleracin extrema. De la misma forma >2 delante del nombre
resultar en una desaceleracin. Usar el nombre >Nombre (sin nmero) es lo mismo
que >5Nombre.

Ejemplo: en la seccin Ejemplos Flash de la GALERA DE DISEOS (haz clic sobre el

botn OBTENER DISEOS de la GALERA CLIPART ) hay un archivo de ejemplo llamado
Pndulo. El grupo del pndulo utiliza una combinacin de <> y la funcin de giro.
Tambin vale la pena examinar el otro ejemplo llamado "Zoom6.xar".

Funciones Detener e Ir a
Puedes aadir 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 animacin saltar al
frame 6 al inicio del frame 1. Esto puede producir errores de tween, pero pueden
ignorarse. Tambin espera el periodo especfico del frame con la funcin 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 animacin cuando llegue a ese frame. Por qu esto es til? Porque
puedes hacer que la animacin salte a cualquier otro frame clave con un clic o
moviendo el ratn por encima de objetos. Por ejemplo, puede que tengas una
animacin que espera a que el usuario le haga clic o mueva el ratn sobre un objeto
antes de continuar.
458

Botones que permiten clic y efectos de MouseOver

Puedes hacer que la secuencia de animacin salte a cualquier otro frame clave
haciendo clic en un objeto o simplemente moviendo el ratn por encima de cualquier
objeto.

Para hacer esto, selecciona el objeto que quieras usar como disparador, abre el
dilogo de PROPIEDADES WEB (Ctrl+Shift+W) y en la pestaa ENLACE selecciona la
opcin SALTAR A FRAME.

Si quieres que el salto ocurra simplemente moviendo el cursor sobre un objeto, selecciona la
pestaa MouseOver en lugar de la pestaa Enlace y selecciona de la opcin similar " SALTAR A
FRAME ".

Ahora en tu animacin, si haces clic en el objeto o pasas el cursor del ratn por
encima, la animacin llevar al nuevo frame y seguir desde ah. Fjate en el ejemplo
del archivo "Ro Tmesis" en la GALERA CLIPART. Esto utiliza una funcin Ir a para
crear un loop del frame 4 al 3 y una redireccin 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 rpida de abrir el dilogo de Propiedades Web.

Resumen de animacin de MAGIX Web

Designer 11 Premium Flash
Los frame claves de MAGIX Web Designer 11 Premium son "instantneas" de tu
animacin en un momento determinado. MAGIX Web Designer 11 Premium
produce automticamente un transicin o tween de objetos de un frame clave al
siguiente para producir una animacin Flash fluida.
No existe una lnea de tiempo. Por lo contrario, la GALERA DE FRAMES te muestra
tus frames claves instantneos en el tiempo (de arriba hacia abajo). Haz clic
sobre el nombre del frame para ver y editar ese frame clave.
Si configuras la visualizacin de frames en MAGIX Web Designer 11 Premium en
2 seg., entonces animar objetos llevar 2 segundos desde su posicin al inicio de
un frame clave a la posicin de inicio del siguiente frame clave. Utiliza el dilogo
PROPIEDADES DE ANIMACIN para configurar el tiempo de visualizacin del frame.
Para indicar a MAGIX Web Designer 11 Premium los objetos a los que debe
aplicarse la transicin 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 botn NOMBRES en la barra de informacin de la herramienta de seleccin
y nmbralo (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 (instantnea) , generalmente lo realizas
copiando el frame actual, lo que copia todos los objetos al nuevo frame junto
con sus nombres. A continuacin mueve los objetos como corresponda.
Todos los dems objetos (no nombrados) aparecern estticos mientras que
dura el frame clave (periodo de visualizacin).
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 pelcula Flash. Cuantos ms frames
Flash por segundo, ms grande ser el archivo Flash y ms fluida la animacin.
Como cada frame Xtreme es una instantnea de toda la animacin, todos los
objetos que deben aparecer en la instantnea deben tambin aparecer en el
frame. No puedes hacer una transicin 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 segn lo permiten las seis reglas
de transformacin descritas anteriormente (mover, cambiar de tamao,
aplastar/torcer, rotacin, transparencia plana y cambio de color). Si cambias la
forma de cualquier otra manera, esto no funcionar.
La animacin Flash depende de las dimensiones de la pgina 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 tecnologa ms antigua y mucho ms simple que tiene algunas
ventajas e inconvenientes. Un GIF animado es un archivo GIF que contiene una
secuencia de imgenes, como si fueran frames de una pelcula. Cada MAGIX Web
Designer 11 Premium es un frame en la animacin final, como en un folioscopio.

Las ventajas:

Todos los navegadores pueden reproducir animaciones GIF, no es necesario

ningn plugin adicional como en el caso de las animaciones flash. Esto conlleva
tiempos de carga cortos y un aumento de la compatibilidad de tus pginas.
La animacin GIF se utiliza como imgenes normales, no es necesario ningn
cdigo 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 animacin 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 ms grandes, incluso para formas geomtricas o texto.
La profundidad de color mxima es de 256 colores.
Las funciones de flash avanzado como el flujo de la secuencia (Detener/Ir a), los
vnculos con URLs o la aceleracin no estn 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
instantneos.

Abrir un documento de animacin

Para crear un GIF animado, primero debes abrir un documento animado. Para realizar
esto, escoge Archivo > Nuevo > Animacin. Despus tendrs acceso a la galera de
FRAMES .

Crear una animacin

Para crear un GIF animado:

1. Escoge Herramientas > Galeras > Galera de frames. O haz clic sobre el smbolo
de la galera de FRAMES en la barra de GALERAS.
2. Dibuja lo que quieres que aparezca en el primer frame.
3. En la galera de FRAMES , haz clic en NUEVO para crear el prximo frame.
www.magix.es
 Animaciones en Flash 461

4. Establece el fondo y los puntos de superposicin.

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 animacin
Para guardar la animacin, escoge Archivo > Exportar GIF animado.

Propiedades de GIF animados

Para modificar los propiedades de la animacin, haz clic sobre un frame en la galera
de FRAMES y selecciona PROPIEDADES . Podrs cambiar las opciones detalladas ms
adelante.

La pestaa de frames
En la pestaa 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 despus crear una animacin sobre ese fondo.
Con frecuencia, el primer frame de la animacin es el frame de fondo. Si el
primer frame no es el frame de fondo, el GIF animado usa el fondo de pgina
como fondo.
SUPERPOSICIN : si esta opcin est configurada, el frame se superpondr con el
frame previo.
RETARDO LOCAL : establece la duracin que el frame tendr en la animacin.
VER FRAME : si est activado, el frame se mostrar en la animacin.
MOVER FRAME EN LA LNEA DE TIEMPO: este valor determina cunto cambia el
tiempo de un frame al utilizar los botones "MOVER FRAME HACIA
ADELANTE/ATRS" EN LA GALERA DE FRAMES.

Opciones flash
Aqu hay varias opciones para animaciones flash, la mayora de los cuales se
describen arriba.

Enlace que se aplicar a toda la animacin (en la pgina 456)

Velocidad de vdeo flash (en la pgina 450)
Calidad JPEG (en la pgina 446)
rea a guardar (en la pgina 448)

Colores de animacin
En la pestaa COLORES DE ANIMACIN puedes configurar los colores utilizados en la
animacin:
462

COLORES DE PALETA: fija los colores de paleta favoritos para el GIF animado.
CANTIDAD DE COLORES DE PALETA: esta opcin est disponible si se utiliza una
paleta optimizada. Para grficos simples puedes reducir la cantidad de colores
de la paleta. De esta forma se crear un archivo ms pequeo sin prdida de
calidad. Es posible que debas experimentar un poco para encontrar el balance
ptimo entre tamao de archivo y calidad.
DITHERING: selecciona uno de los tipos de dithering.
TRANSPARENCIA: escoge esta opcin para que las partes de un mapa de bits que
no contienen objetos se vuelvan transparentes.

Animacin: repeticiones y velocidad

En la pestaa ANIMACIN puedes modificar la tasa de la animacin 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 animacin. Utiliza la pestaa "Frame"
para establecer distintas pausas para frames individuales (descrito
anteriormente). Se indicar "Muchos" cuando la animacin contenga ms de
una duracin.

Vista previa en el navegador

Puedes seleccionar opciones adecuadas para los grficos y despus cargarlas en tu
navegador para poder hacer una vista previa:

OPCIONES DE FONDO : modifica el fondo del GIF animado para ver cul da el mejor
resultado.
INFORMACIN ADICIONAL : la pgina de vista previa contendr informacin til
como, por ejemplo, tiempo de descarga potencial si se coloca en una pgina
web.
VISTA PREVIA : pulsa este botn para lanzar una vista previa en tu navegador web.

Opciones AVI
Opciones: selecciona entre los cdecs 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 opcin para hacer el fondo AVI transparente.

rea a guardar: configurando el rea para guardar como DIBUJO crear una
animacin AVI que slo sea tan grande como debe ser, por ejemplo de igual tamao
que los lmites de la animacin. Esto puede ser til si no necesitas un tamao de
pgina especfico.

www.magix.es
 Importacin y exportacin 463

Importacin y exportacin
Indicaciones generales sobre la exportacin e
importacin
Web Designer ofrece una amplia gama de opciones de importacin y exportacin.
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 sera como el formado de
"documento master".
EXPORTAR convierte a otros formatos compatibles. La exportacin te permite
utilizar y distribuir tus diseos.

Formatos recomendados
Los formatos de exportacin universal que pueden ser ledos 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 grficos en
la web y JPEG para fotos.

Web Designer y HTML5

Web Designer ofrece mayor compatibilidad con HTML5. Esto es totalmente
automtico sin que el usuario tenga que hacer nada o saber nada de cdigo HTML.
Esto significa que es una forma ms eficiente y rpida de descargar pginas web. Por
ejemplo, muchas funciones de grficos tales como paneles de fondo, rectngulos,
rectngulos redondeados y objetos con sombras que previamente se convertan en
grficos en la exportacin, ahora se exportan como caractersticas nativas HTML.
Esto hace imgenes independientes. Entre las caractersticas que se exportan ahora
con HTML5 estn:

Rectngulos, rectngulos redondeados, con contornos simples opcionales,

rellenos lineares graduados y transparencia plana simple.
Rectngulos rotados o inclinados.
Sombras de caja (negras o de colores).
Texto con sombras.
Rellenos de fondo de pgina simples graduados ( o algunos ms complejos
hechos con los objetos de arriba).
Texturas de mosaico (rellenos de mapa de bits) para rectngulos y fondos.

Los objetos agrupados no se exportarn como HTML5, por lo que deberas

exportarlos todava como grficos: consulta Agrupar y desagrupar objetos (en la
pgina 133) para ms informacin.
464

Importar y exportar formatos de archivo

compatibles
Formatos de importacin
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 importacin 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 importacin de un archivo PDF)
.PGM UNIX escala de grises
.PNG PNG
.PPM UNIX color (hasta 24 bits)
PSD Photoshop (consulta importacin y exportacin de archivos PSD (en la pgina
472))
.RAS Sun Raster
.SGI (Silicon Graphics Image)
.TGA TrueVision TARGA
.TIF TIFF (RGB, RGBA con transparencias de canal alfa & CMYK)

www.magix.es
 Importacin y exportacin 465

MAGIX Web Designer 11 Premium es compatible con archivos TIFF fax (imgenes
blanco y negro. Los faxes con muchas pginas se importarn como pginas mltiples;
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 inalmbrica). Formato de
imagen de mapa de bits en blanco y negro (1 bit) utilizado por los dispositivos
mviles.
.RAW formato de importacin de cmara (ver importacin de fotos RAW (en la
pgina 469) para ver una lista de tipos de archivos compatibles).

Formatos de importacin 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 importacin
.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 posicin GIF
.HTM. .HTM grficos en pginas 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 posicin FLV
.MP4 marcador de posicin MP4
.PAI imagen de MAGIX Photo Clinic
.PDF marcador de posicin PDF
.PPTX (PowerPoint 2007 y posteriores)
.RTF texto
.SVG (Scalable Vector Graphics)
.SWF marcador de posicin Flash
.XWR marcador de posicin Widget
.WIX para uso interno de Xara

Formatos de exportacin
Formatos de exportacin para mapas de bits (consulta resumen del dilogo de
exportacin GIF, PNG y JPEG en la pgina 474)
.GIF CompuServe GIF
.GIF archivos animados en GIF (consulta Creacin de archivos animados en GIF (en la
pgina 460))
.JPG JPEG
PSD Photoshop (consulta importacin y exportacin de archivos PSD (en la pgina
472))
.PNG PNG
Otros formatos de exportacin
.AVI animacin AVI (documentos de animacin)
.EMF, .WMF documentos EMF/WMF
.HTML, .HTM (pginas y sitios web)
.SWF Flash (consulta Animaciones en Flash (en la pgina 434))
.RTF Rich Text Format
.WIX, .WEB, .XAR documentos Xara
www.magix.es
 Importacin y exportacin 467

Importacin de archivos
Para importar un archivo:

Selecciona "ARCHIVO > IMPORTAR" - Esto normalmente mezcla el contenido del

archivo en el documento existente. Con algunos formatos, tendrs la opcin de
importar el documento a la pgina actual o insertarlo como nueva pgina. Con
otros formatos se te dar la opcin de importar los datos de archivo de forma
convencional o aadir un enlace al archivo e incluirlo en tu sitio web publicado.
O selecciona "ARCHIVO -> ABRIR ": esta opcin abre el archivo como un nuevo
documento.

Con MAGIX Web Designer 11 Premium podrs importar archivos utilizando el

mtodo 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 accin estars importando al documento y quedar colocado en el centro de la
pgina actual. O tambin puedes arrastrar y soltar el documento desde el Explorador
de Windows a una barra o ttulo de barra de la ventana de Web Designer, esta accin
abrir el archivo como un documento nuevo.

Sustitucin 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 sultalo sobre la imagen que quieres
reemplazar. El tamao de tu foto se adaptar automticamente para sustituir la foto
de la plantilla. La nueva foto permanecer seleccionada y se activar la herramienta
de relleno para que puedas adaptar la posicin y el tamao de la foto si lo deseas.

Importacin 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 configuracin de visibilidad de la capa se conservarn y

se convertirn en capas de MAGIX Web Designer 11 Premium. Podrs verlas abriendo
la GALERA 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,
colcalos en capas separadas en Photoshop antes de realizar la exportacin.
468

Importacin de PDF
PDF es un formato de vectores grficos complejos que ha evolucionado durante 10
aos o ms, y contiene numerosos subformatos y opciones. El PDF fue diseado
como un formato de documento porttil 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
mayora 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
despus importa el archivo resultante en MAGIX Web Designer 11 Premium.

Es importante tener en cuenta los siguientes puntos:

Los archivos PDF de varias pginas se importan como documentos multipgina

en MAGIX Web Designer 11 Premium.
El texto en los archivos PDF generalmente est separado en pequeos objetos
de texto. Esto no evita la visualizacin e impresin, pero significa que cuando se
lo importa lo que aparece como uno o ms prrafos continuos pueden no serlo.
MAGIX Web Designer 11 Premium intenta rearmar las lneas de texto en lneas y
prrafos de texto editable, pero muchas veces vers que el texto est separado
en objetos de texto individuales.
Para facilitar la extraccin de un texto de un archivo PDF, se crea una capa que
contiene solamente el texto de esa pgina del PDF. Utiliza la GALERA DE PGINAS
Y CAPAS para ver esta capa.

Lo que podra 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, vers que las fuentes faltantes se
sustituirn con fuentes alternativas.
Los archivos cifrados o protegidos por contrasea no pueden importarse.
Los textos de archivos PDF que utilizan fuentes incrustadas no podrn 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 opcin OPTIMIZAR PARA VISUALIZAR intenta que el aspecto del resultado
importado sea lo ms similar posible al Acrobat, pero puede ser ms difcil de editar
(podra tener clipviews insertados, por ejemplo). La opcin alternativa OPTIMIZAR
PARA EDITAR deshace algunas construcciones que son difciles de editar de forma
manual (por ejemplo, clipviews incrustados).

www.magix.es
 Importacin y exportacin 469

Importacin 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 automtico

Cuando importas un documento Word, Web Designer te crea automticamente

nuevas pginas si las reas de texto sobrepasan la pgina actual. Del mismo modo
sucede cuando aades ms texto o imgenes a tu documento: as el documento
aade nuevas pginas de forma automtica para acomodarlos. Cuando creas una
nueva pgina, se colocar inmediatamente despus de la pgina actual. La nueva
pgina tiene las mismas caractersticas que si la hubieras aadido de forma manual
(tendr el mismo fondo y objetos repetidos de la pgina actual). Pero, adems,
tambin tendr una copia de todas las reas de texto de la pgina actual que estn
vinculadas con el flujo de texto actual y estarn vinculadas de la misma manera.

Cambio simultneo de reas de texto vinculadas

Muchas veces, tu documento tendr diseos similares de reas de texto en muchas

de sus pginas. Es posible que si cambias un rea de texto en una de las pginas
quieras que la modificacin se vea reflejada en las reas similares del mismo flujo de
texto. Por lo tanto, si mueves o cambias el tamao de un rea de texto y existen reas
similares con el mismo flujo de texto en otras pginas (es decir, tienen el mismo
tamao y posicin en la pgina), Web Designer te preguntar si deseas cambiar esas
reas tambin. Consulta reas de texto (en la pgina 206) para ms informacin.

Importacin de foto RAW

Puedes importar archivos RAW desde cmaras digitales utilizando la opcin del men
de importacin 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.

Importacin desde una pgina web.

Puedes importar texto y grficos directamente de pginas web a tu documento o
copiar y pegar texto y grficos desde un navegador.

Para importar desde una pgina web online:

1. Selecciona "ARCHIVO" > "IMPORTAR DESDE PGINA WEB" (o "Ctrl + Alt + W").
2. Introduce la direccin de la pgina web (URL) de la pgina o grfico que desees
importar.
3. Pulsa Importar.
470

Si la URL que has introducido es la de la pgina web, todo el texto y las imgenes de
esa pgina se importarn y colocarn en tu pgina en aproximadamente la misma
posicin que en la pgina web. En otras palabras, esta funcin te permite importar
todos los textos y grficos de un pgina web. Sin embargo, debes tener en cuenta que
la mayora de las pginas web modernas estn creadas a partir de una compleja
combinacin de texto, grficos, Javascript y otras caractersticas; por lo que es muy
probable que estas importaciones no te ofrezcan una representacin precisa de la
pgina 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 pginas web, la longitud de tu pgina de MAGIX Web Designer 11

Premium se extender automticamente para incluir el texto y los grficos nuevos, si
es que no es lo suficientemente extensa.

Exportacin de archivos
Para exportar un archivo:

Selecciona Archivo > Exportar.

O pulsa Ctrl + +E.

Se abrir un dilogo de EXPORTACIN . Escoge el nombre para tu archivo y selecciona

el formato deseado de la lista desplegable de TIPO DE ARCHIVO . Algunos de los
formatos estn descritos ms abajo.

Exportacin como Flash

Puedes exportar un dibujo al formato Macromedia SWF Flash (esttico). Esto es ms
apto para diseos de vectores y puede suministrar un tamao de archivo mucho
menor. Puedes utilizar el SWF en pginas web o importarlo a Macromedia Flash para
usar en animaciones Flash.

Tambin puedes crear un Flash animado. Lee Animaciones Flash (en la pgina 434)
para ms detalles sobre la exportacin Flash.

Exportar como AVI

Selecciona ARCHIVO > EXPORTAR ANIMACIN y luego escoge AVI de la lista. Haz clic
en el botn OPCIONES que se encuentra en el dilogo de archivo para cambiar el cdec
y otros ajustes para la exportacin.

Exportacin como documento Word

Selecciona "ARCHIVO" > "EXPORTAR" y luego escoge la opcin MICROSOFT WORD
(.DOCX) del men desplegable.

www.magix.es
 Importacin y exportacin 471

Exportacin de un documento web

Muchas veces quieres exportar un documento de impresin como una pgina HTML
que pueda verse en Internet, en lugar de un archivo PDF. La ventaja de este formato
es que el tamao de archivo es menor que el de un PDF y que facilita la visualizacin
en una tableta o en dispositivos con iOS.

Para ms informacin, lee Publicacin de documentos web.

Exportacin como metarchivo de Windows (.wmf)

Word y muchos otros programas pueden leer los archivos en este formato.

Exportacin como formato Extended Metafile (EMF)

Las aplicaciones modernas de Windows son compatibles con este tipo de formato de
grficos vectoriales avanzados. Este formato tambin est disponible para
aplicaciones que suministran la opcin de men Pegar especial.

Ten en cuenta que MAGIX Web Designer 11 Premium puede contener caractersticas
como estilos de relleno avanzados que no pueden representarse en formatos
vectoriales como EMF. En este caso, parte delas imgenes se exportarn como mapas
de bits. Las partes vectoriales que pueden exportarse como vectores se exportarn
como tales.

Exportacin rpida de HTML y formatos de grficos web

Puedes utilizar las opciones dedicadas en el MEN ARCHIVO para exportar
rpidamente pginas web y grficos web, sin tener que seleccionar los formatos de
una lista completa de los formatos de exportacin disponibles al utilizar "ARCHIVO ->
EXPORTAR ".

ARCHIVO ->EXPORTAR PGINA WEB : exporta el presente documento de pgina

web a una ubicacin de tu eleccin en tu ordenador.
ARCHIVO ->EXPORTAR JPEG : exporta la seleccin o la pgina actual a un archivo
JPEG.
ARCHIVO ->EXPORTAR PNG : exporta la seleccin o la pgina actual a un archivo
PNG.

Para ms informacin, lee el captulo Primeros pasos.

Exportacin como mapa de bits

JPEG, GIF y PNG son formatos universales compatibles con la mayora de las
aplicaciones informticas modernas. PNG tiene la calidad ms alta. JPEG es el mejor
formato para trabajos fotogrficos, pero puede producir archivos compactos
aceptables (puede controlarse la calidad y el tamao de archivo).
472

El formato GIF es compatible slo con 256 colores y, a pesar de que es muy comn en
muchas pginas web, PNG es un mejor formato. PNG tambin es compatible con
grficos semitransparentes (utiliza la opcin True Color + Alpha), pero esto no es
compatible correctamente con Microsoft Internet Explorer (pero s con los dems
navegadores web).

Cuantos menos colores contenga el archivo, ms pequeo ser y menor calidad

tendr. Sin embargo, al utilizar 256 colores o menos, MAGIX Web Designer 11
Premium te suministra tcnicas muy avanzadas para simular una mayor gama de
colores para que obtengas resultados de calidad fotogrfica utilizando solamente 256
colores o menos.

Importante
Como los mapas de bits se exportan con la calidad de vista actual, asegrate de que
la opcin "VENTANA "> "CALIDAD " est configurada en Anti-Aliasing para obtener
mejores resultados.

Exportacin 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 resolucin (dpi) al exportar.

Siempre guarda tu trabajo en MAGIX Web Designer 11 Premium antes de exportar.

Despus, si deseas alterar tus objetos originales en el futuro, simplemente carga
MAGIX Web Designer 11 Premium, realiza los cambios y despus exporta
nuevamente los objetos requeridos.

Para exportar como archivo PSD selecciona "Archivo -> Exportar" y despus 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 tambin se guarda, por lo tanto las
capas definidas como "invisibles" en MAGIX Web Designer 11 Premium sern
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
 Importacin y exportacin 473

El texto que se encuentra en una capa con cualquier otro objeto grfico se rasterizar
en esa capa y no ser editable.

Exportacin DPI
Podrs configurar el valor DPI de los mapas de bits en el archivo PSD exportado.

Un DPI de 96 es la resolucin de
pantalla normal de Windows, es
decir, que si exportas en 96 dpi el
tamao del 100% en Photoshop ser
igual que el 100% en MAGIX Web
Designer 11 Premium.

Para un trabajo de impresin deberas escoger un DPI mayor.

Puedes seleccionar para exportar toda el rea de pgina de MAGIX Web Designer 11
Premium o solamente las reas con objetos visibles.

Resumen
Para obtener la mayor compatibilidad y posibilidades de edicin 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, colcalo en una capa
individual sin objetos grficos.
474

Resumen del dilogo de exportacin GIF, PNG y

JPEG

El dilogo de exportacin tiene dos ventanas de vista previa, IMAGEN A a la izquierda e

IMAGEN B a la derecha, para que puedas comparar las opciones de exportacin
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 exportacin ms comunes: JPEG, PNG y GIF.
Una vez que hayas seleccionado la vista previa A o B , puedes ajustar numerosas
opciones de exportacin con las cinco pestaas 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 pestaa 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 pgina 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 exportacin
principal se mostrar en el dilogo de vista previa superior.

www.magix.es
 Importacin y exportacin 475

3. En este dilogo de vista previa puedes ajustar la configuracin si lo deseas o

ignorarlo si la configuracin por defecto est bien.
4. Haz clic en el botn EXPORTAR

Para los formatos ms usuales JPEG y PNG, en el paso 2 puedes utilizar directamente
las opciones disponibles en el MEN ARCHIVO: EXPORTAR JPEG y EXPORTAR PNG . El
dilogo de exportacin incluye el botn "Configuracin" que te lleva al dilogo que se
muestra arriba. La mayora de las configuraciones de exportacin se recordarn para
la prxima vez que exportes. Por ejemplo, si ajustas la calidad JPEG, la prxima vez
que exportes un JPEG se recordar la configuracin.

Tamao de imagen exportada

Si exportas el tamao estndar normal es lo mismo que ves en la pantalla con el zoom
al 100%. El tamao de pxel se puede ver en la ventana de vista previa. Puedes ajustar
el tamao del objeto en la pgina antes de exportar o si introduces un valor de pxel o
DPI alternativo en la pestaa TAMAO DE MAPA DE BITS .

Controles
Estos botones modifican la vista previa de las imgenes, 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 tamao de la imagen de vista
previa de forma que se adapte a la ventana.
ZOOM AL 100%: ampla la imagen a su tamao completo (100%).
ZOOM HASTA LA RESOLUCIN DE LA IMAGEN (1:1): no tiene ningn
efecto en el caso de archivos GIF. Modifica el tamao de la imagen
para que un pxel del mapa de bits sea un pxel 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 vers el resultado si has seleccionado la pestaa OPCIONES DE PALETA):

SELECTOR DE COLOR (PIPETA) : al mover el cursor sobre la imagen se sealar

el color que se encuentra debajo del cursor. Haz clic para seleccionar ese
color en la paleta. Despus, puedes utilizar los botones de las OPCIONES DE
PALETA (descrito a continuacin) para modificar ese color.

VISTA PREVIA: el botn de vista previa est disponible en todas las pestaas de este
dilogo. Actualiza las ventanas de vista previa para reflejar cualquier cambio que
hayas hecho a las opciones de exportacin.
476

Pestaa Opciones de paleta

Esta pestaa te permite modificar los colores de tu imagen para exportar.

Dithering y paleta
Las opciones DITHERING y PALETA solo son aplicables para la exportacin 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 opcin DITHERING en ninguno, se producirn archivos ms pequeos pero
que probablemente presentarn lneas. ERROR DE DIFUSIN crea resultados con mejor
calidad pero tambin archivos ms grandes.

Profundidad de color
Escoge la cantidad de colores que requiere tu mapa de bits. Cuantos ms colores,
ms grande el archivo (generalmente) y mayor la calidad. La opcin TRUE COLOR es
compatible con hasta 16 millones de colores. TRUE COLOR + ALPHA incluye
caractersticas 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 continuacin el icono de la copa). Esto no es compatible con pxeles
semitransparentes, sino con pxeles completamente opacos o transparentes y, por lo
tanto, puede producir bordes dentados.

Colores mximos
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 tamao del archivo. Simplemente
introduce la cantidad de colores requeridos y pulsa el botn de VISTA PREVIA para ver
el resultado.

Botones
Estos botones (excepto FONDO TRANSPARENTE ) se aplican cuando se exportan
imgenes 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 cmo 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
 Importacin y exportacin 477

para seleccionarlo y despus selecciona el botn BLOQUEAR . Aparecer un pequeo

cuadrado en la esquina izquierda del color para sealar que ese color est bloqueado.

Convertir un color de la paleta en web safe

Si pulsas este botn 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 grficos 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 opcin activa automticamente 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 opcin, que convierte partes del objeto seleccionado en transparente, y la
opcin Convertir fondeo de la imagen transparente, que convierte el fondo detrs 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
utilizarn el color ms cercano en la paleta. Cuantos menos colores en la paleta, ms
pequeo ser el archivo de mapa de bits.

Restablecer un color previamente eliminado

Restaura un color eliminado.

Aadir colores de sistema

Aade 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 extensin
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 opcin para
obtener los mejores resultados.
478

Pestaa Tamao de mapa de bits

En esta pestaa puedes cambiar el tamao de la imagen para exportar.

Tamao y resolucin del mapa de bits

Puedes modificar el tamao del mapa de bits cambiando:

TAMAO: introduce el ancho o alto en uno de los campos. Como la relacin de

aspecto del mapa de bits est bloqueada, al cambiar una dimensin se cambiar
tambin la otra. TAMAO es ms adecuado que ESCALA si quieres crear un mapa
de bits con un tamao especial en pxeles.
ESCALA: (no disponible para JPEG ni PNG). Esto te permite cambiar el tamao
del mapa de bits con un porcentaje. ESCALA es mejor que Tamao si quieres, por
ejemplo, crear un mapa de bits 50% ms grande que el original.
RESOLUCIN: (no disponible para GIF ni BMP). Introduce la resolucin en el
campo DPI. Si ests exportando una imagen para ver en una pantalla (p. ej., un
sitio web), en general no necesitas una configuracin mayor que 96 dpi. (Si
necesitas exportar para un dispositivo Retina, puedes exportar automticamente
con una resolucin ms alta de 192 dpi).

rea a guardar
El mapa de bits puede crearse utilizando una de estas reas del documento:

PGINA :toda el rea de la pgina.

DIBUJO :
el rea cubierta por los objetos.
SELECCIN : el rea cubierta por los objetos seleccionados. Solo disponible
cuando se han seleccionado objetos.

Antialiasing
El antialiasing mejora la apariencia de los grficos 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 lmites de los pxeles.
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 opcin que debes utilizar, selecciona esta
opcin.

Colocar etiqueta de imagen HTML en el portapapeles

Esto te permite guardar la informacin bsica de la etiqueta de imagen HTML cuando
guardas el mapa de bits. Despus, podrs pegar la etiqueta en tu texto o editor
externo de pgina HTML.

www.magix.es
 Importacin y exportacin 479

Exportar tambin mapa de bits de Retina (192 dpi)

Si esta opcin est activada puedes exportar en simultneo una imagen de Retina de
alta definicin de 192 dpi. Esto te evita tener que realizar dos exportaciones si
necesitas una imagen con resolucin de 96 dpi y otra de 192 dpi para dispositivos
Retina. En el caso de JPEG y PNG, la operacin solo ser vlida si has seleccionado la
opcin de 96 dpi.

Para ms informacin sobre imgenes de Retina consulta imgenes de alta

resolucin (en la pgina 327).

Pestaa de opciones
Con esta pestaa puedes modificar la compresin JPEG y activar las opciones
progresivo/entrelazado de ser necesario.

Calidad JPEG: (solo JPEG) una configuracin baja generar un archivo pequeo con
prdida de calidad, mientras que un valor alto reducir levemente el tamao del
archivo, pero conservar una alta calidad. Ten en cuenta que una configuracin de
100% tambin comprimir el archivo. Un valor de 75% produce una buena
compresin sin causar prdida de calidad evidente para la mayora de los usos.

Entrelazado: (solo GIF y PNG) esta opcin es como un JPEG progresivo. En el

navegador, la primera imagen aparecern como una imagen de baja resolucin. A
medida que el archivo se carga, la resolucin aumenta.

Transparente: (solo GIF y PNG) hace que las reas no cubiertas por los objetos
seleccionados sean transparentes. Seleccionar esta opcin activa automticamente
una entrada transparente en la paleta.

Exportar cada capa a un archivo individual: si se selecciona esta opcin al exportar

un diseo 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
GALERA DE PGINAS Y CAPAS ) se utilizarn para nombrar los archivos exportados.

Vista previa
Puedes escoger el mejor compromiso entre tamao de archivo y calidad para grficos
web utilizando las ventanas de vista previa A y B en el dilogo de EXPORTACIN
(ilustrado arriba). Sin embargo, la mejor prueba es ver la forma en que el grfico se ve
en un navegador web. Esta pestaa te ofrece algunas opciones para esa vista previa.
Haz clic en el botn VISTA PREVIA para abrir el navegador web y ver los grficos antes
de exportarlos.
480

Imprimiendo

Mostrar bordes de impresin

El men Ventana > Mostrar bordes de impresin muestra una lnea amarilla y roja
alrededor de la pgina (no se imprime) que indica los mrgenes y bordes de
impresin. Los lmites de la pgina estn sealados con un rectngulo rojo. El rea de
impresin est establecida por los mrgenes de la impresora seleccionada
actualmente. Algunas impresoras te permiten ajustar los mrgenes, pero muy pocas
te dejan imprimir hasta el borde de la pgina.

Si algn objeto de la pgina se encuentra fuera del rectngulo rojo, es muy probable
que no se imprima.

Seleccionar y configurar una impresora

Archivo > Configuracin de impresora. Esta opcin abre el dilogo estndar de
CONFIGURACIN DE IMPRESIN de Windows:

Al seleccionar una impresora, tambin se selecciona el tamao de papel y su

orientacin. Ten en cuenta que este es el tamao y la orientacin de las hojas en la
impresora. No es lo mismo que el tamao/orientacin del documento. VERTICAL
imprime la hoja sin girarla. HORIZONTAL imprime girando la hoja 90%. (Estos botones
son duplicados del dilogo de OPCIONES DE IMPRESIN , descrito a continuacin).
Recomendamos no modificar la configuracin por defecto de los botones
HORIZONTAL /VERTICAL .

Por favor, ten en cuenta que no podemos darte consejo sobre la instalacin o
configuracin de impresoras porque estas son operaciones de sistema estndar. Si
tienes dificultades, contacta con el proveedor de tu impresora u ordenador.

www.magix.es
 Imprimiendo 481

El botn de propiedades
Esto muestra un dilogo que te permite establecer las opciones para el tipo de
impresora seleccionada. MAGIX Web Designer 11 Premium no controla este dilogo.

Botn de red
Si tu ordenador est conectado a una red, este botn te permite compartir impresoras
de la red. MAGIX Web Designer 11 Premium no controla este dilogo.

El dilogo de impresin
Escoge Archivo > Imprimir (shortcut Ctrl+P)

Botn imprimir
Una vez que has seleccionado las opciones requeridas, haz clic para imprimir.

Botn Imprimir...
Esto abre el dilogo de CONFIGURACIN DE IMPRESIN (descrito anteriormente).

Botn opciones
Esto abre el dilogo que te permite configurar opciones adicionales de impresin. Las
opciones se describen ms adelante.
482

Pginas
TODAS LAS PGINAS: imprime todas las pginas del documento.

PGINA/S ACTUAL/ES: imprime la pgina o doble pgina actualmente seleccionada.

OBJETOS SELECCIONADOS: Esta opcin est disponible si se selecciona cualquier objeto

del documento. Si est activada, slo se imprimen los objetos seleccionados. Observa
que otros objetos dentro de los lmites de los objetos seleccionados no se imprimen,
slo se imprimen los objetos que estn realmente seleccionados.

Los objetos en las capas del fondo y las capas gua nunca se imprimen. Lee Galera de
capas para ms detalles.

RANGO DE PGINAS: te permite especificar las pginas que deseas imprimir. Puedes
escribir nmeros de pginas especficos separados por comas, o introducir un rango
de pginas separando los dos nmeros con un guin.

Ejemplos rangos de pginas:

2 slo imprimir la pgina 2.

1,3,5-7 imprimir las pginas 1, 3, 5, 6 y 7.

2,3,6-8,11-12 imprimir las pginas 2,3,6,7,8,11 y 12.

La seccin Opciones del dilogo te indicar si el rango de pginas que has escrito es
aceptado o no.

Imprimir a archivo
Puedes seleccionar la opcin IMPRIMIR A ARCHIVO para crear un documento para
entregar a una imprenta (si pueden aceptar este tipo de archivo).

Despus de activar esta opcin, al hacer clic sobre IMPRIMIR , Web Designer muestra
el dilogo estndar de Windows para GUARDAR para que puedas especificar un
nombre y una ubicacin para el archivo.

Los archivos de impresin tienen una extensin por defecto .prn

Copias
Establece la cantidad de copias del documento que quieres imprimir.

www.magix.es
 Imprimiendo 483

Opciones de impresin: Pestaa 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 mayora 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 eleccin 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 lneas delgadas. En general, el
484

uso de anti-aliasing permite imprimir con resolucin menor. Por ejemplo, la impresin
de un mapa de bits con 150 DPI es generalmente suficiente para todos los usos. Sin
anti-aliasing, es probable que se necesite una resolucin ms alta lo que resulta en
una impresin ms lenta.

Resolucin de transparencia
Al imprimir, los efectos de transparencia de MAGIX Web Designer 11 Premium se
crean utilizando mapas de bits.

Esta opcin controla la resolucin de esos mapas de bits cuando se envan a la

impresora. La opcin automtica es adecuada para la mayora de los dibujos y
significa que MAGIX Web Designer 11 Premium selecciona automticamente una
resolucin apropiada para la impresora actual. Esto puede no ser adecuado si se
imprime en una impresora con resolucin muy alta como dispositivos imagesetting.
En este caso, es posible que quieras controlar la resolucin de forma manual e
introducir el valor deseado.

Ten en cuenta que las impresoras modernas muchas veces aseguran poder imprimir
ms de 1000 DPI, pero esto no es lo mismo que "pxeles por pulgada", que es lo que
ves en tu pantalla. En general, nunca es necesario imprimir a ms de 600 pxeles por
pulgada y 300 pxeles por pulgada producen en general resultados de impresin
perfectamente adecuados, especialmente con anti-aliasing.

Calidad de llenado
Si usas esta opcin, puedes escoger cuntos pasos conforman los rellenos con
gradacin en tu documento al imprimirlo. La configuracin NORMAL es adecuada para
la mayora de los casos. Esta opcin no puede activarse en el caso de impresoras
PostcScript.

Opciones de texto
Si tu impresora tiene problemas para reproducir fuentes, selecciona la opcin
IMPRIMIR TODO EL TEXTO COMO FORMAS . Todo el texto se convertir en formas
vectoriales antes de que el documento se enve a la impresora. Esto puede ser ms
lento, pero reproducir exactamente lo que ves en pantalla.

www.magix.es
 Imprimiendo 485

Opciones de impresin: Pestaa Diseo de la

impresin
Aqu encontrars una compilacin de los efectos ms importantes para la
optimizacin de fotos sacadas, por ejemplo, con tu mvil.

La mayora de las opciones en el diseo de impresin no pueden activarse si has

seleccionado las opciones OPTIMIZACIN o ADAPTACIN AUTOMTICA.
Recomendamos utilizar estas opciones, porque ofrecen la forma ms fcil de
imprimir.

Sin embargo, puedes escoger las opciones personalizadas (lee "Individual" ms

adelante).

Optimizacin
Tu diseo se mover al centro de la pgina y se ampliar o reducir para adaptarse al
tamao del papel.

Esta opcin es la mejor si tienes un diseo grande o pequeo que quieres adaptar al
tamao de una pgina.
486

Adaptacin automtica
Tu diseo tendr la orientacin necesaria, pero Web Designer no cambiar el tamao.
Recomendamos utilizar esta opcin si tienes dificultades para encontrar la orientacin
correcta (existen al menos cuatro lugares en donde puedes establecer la orientacin
de la pgina, en algunos drivers de impresora todava ms).

Esta opcin es la mejor si has configurado el tamao para tu diseo y no quieres que
se modifique.

Adaptacin personalizada
Te permite controlar la impresin, incluyendo orientacin, tamao y mrgenes.

Los botones de ORIENTACIN pueden utilizarse para escoger la orientacin de la

impresin. La escalacin 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 pgina en el papel de la impresora).

Los campos ANCHO y ALTURA te ofrecen una forma alternativa de configurar el

tamao de la impresin (cuando cambias un valor, el otro cambiar tambin para
asegurar que la pgina se imprima con una relacin de aspecto 100%).

Adaptacin mltiple
Para imprimir muchas copias en una pgina, escoge MLTIPLE, introduce un valor para
la cantidad de copias que debe incluir el ancho de la pgina (hileras) y la cantidad a lo
alto de la pgina (columnas) y la distancia entre cada uno (margen).

www.magix.es
 Personalizacin de Web Designer 487

Personalizacin de Web Designer

Cambio del documento de plantilla en blanco

Los documentos de plantilla son las opciones disponibles en ARCHIVO > NUEVO.

Las plantillas prediseadas estn disponibles en la galera de diseos (o en

Archivo > Nuevo de la galera de diseos).

Para aadir un documento de plantilla:

1. Abre un documento existente ("Archivo > Abrir" o "Ctrl + O") o crea uno
nuevo con el botn NUEVO de la barra de control ESTNDAR o "Ctrl +N".
2. Haz los cambios necesarios (como cambiar la pgina, aadir un logo o un
mensaje). Puedes editar el documento de plantilla de la misma forma que
un documento comn.
3. Cuando ests 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 dilogo de opciones. All pueden aplicarse configuraciones para
Web Designer.

Con el botn ACEPTAR se guardarn las configuraciones y se cerrar el dilogo.

APLICAR guarda las modificaciones pero el dilogo permanece abierto. De esta forma
puedes continuar realizando cambios.
488

Pestaa General

Las capas actuales siempre estn visibles y pueden

editarse.
En el captulo Capas (en la pgina 419) encontrars ms detalles sobre las capas y la
galera de capas.

Si se ha seleccionado esta opcin, al seleccionar una capa en la GALERA DE CAPAS ,

stas estarn visibles y podrn editarse automticamente.

Si esta opcin no est seleccionada, los estados VISIBILIDAD y EDICIN de una capa no
se modificarn al seleccionarla.

www.magix.es
 Personalizacin de Web Designer 489

Dar a nuevos objetos los atributos ms recientes

Algunos atributos son el ancho de lnea, el modelo de guiones, puntas de flecha y
color, as como color y tipo de relleno.

Si esta opcin est fijada, los nuevos objetos tendrn los atributos del ltimo objeto
que se ha dibujado o seleccionado. Por ejemplo, puedes darle a una forma existente
un relleno rojo y una lnea verde. Si luego dibujas una nueva forma, sta tambin
tendr un relleno rojo y una lnea verde. Consulta la seccin "Atributos actuales" (en
la pgina 57) del captulo Primeros pasos para una descripcin completa de los
atributos actuales y esta opcin.

Esta opcin 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 ningn objeto.) Si la opcin est activada, se te
solicitar que confirmes si quieres cambiar el atributo. Si la opcin est desactivada, el
cambio se realizar sin necesidad de confirmar.

Hacer grupos transparentes en su conjunto

Lee el captulo Transparencia (en la pgina 252) para ms informacin 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 vern las
transparencias individuales en el grupo). Si se deselecciona esta opcin, Web
Designer aadir la transparencia a cada objeto del grupo por separado.

Mantener los nombres de las capas importadas

Si esta opcin est activada, la informacin de capa se preservar al importar
plantillas u otros archivos. Con la opcin IMPORTAR CAPAS a la CAPA ACTIVA
seleccionada, todos los objetos importados aparecern en la capa actual y la
informacin de capa en la informacin 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 ms
recientemente en el submen "Abiertos recientemente". Esta lista ofrece una forma
rpida de volver a abrir esos archivos. Esta opcin te permite cambiar la cantidad de
archivos que contendr la lista (entre 1 y 20 archivos).
490

Marco de seleccin de objetos

Esta opcin te permite cambiar la configuracin por defecto para el Marco de
seleccin (donde arrastras un rectngulo de seleccin sobre los objetos que quieres
seleccionar). As podrs seleccionar objetos que estn tocando el rectngulo de
seleccin o seleccionar slo los objetos que estn dentro del rectngulo.

Longitud de lnea compatible con navegadores web

antiguos
Los navegadores web antiguos no podan renderizar texto con precisin. Si solicitabas
un tamao de fuente especfico, lo redondeaban hacia arriba o hacia abajo y
mostraban el tamao y ancho incorrectos (en comparacin con el diseo de fuente
original y la forma en que Web Designer, Word, PDF y todos los programas modernos
de DTP los mostraran).

Las versiones anteriores de Web Designer intentaban compensar estas imprecisiones

al suministrar una opcin de LONGITUD DE LNEA COMPATIBLE CON NAVEGADORES WEB
ANTIGUOS , lo que significaba que el texto tena un formato levemente diferente: la
longitud de las lneas sera diferente en comparacin con los documentos normales
impresos o con el mismo texto en Word o PDF.

La mayora de los navegadores web ms modernos estn mejorando la precisin de la

renderizacin de texto: ahora puedes especificar cualquier tamao de fuente en
pxeles o puntos (aun fracciones) y, en su mayor parte, el texto se renderizar con
precisin*. El formato de texto debera ser igual en documentos impresos, en PDF y
en el diseo de pginas. Esto incluye kerning automtico, kerning manual y espaciado
de letras.

Si abres un documento web de Web Designer antiguo, aparecer un cuadro de

dilogo que te solicitar que actualices el formato del texto. Esto prepara tu
documento web para que se muestre con mayor precisin en los navegadores web
ms modernos.

Una consecuencia de actualizar el formato para que sea compatible con navegadores
web ms modernos es que el texto podra reordenarse como consecuencia de leves
diferencias en la longitud de las lneas que resultaran en columnas de texto un poco
ms 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
 Personalizacin de Web Designer 491

Para hacer que el formato vuelva al estilo antiguo, utiliza la PESTAA GENERAL del
cuadro de dilogo "HERRAMIENTAS" > "OPCIONES" y asegrate de que est activada la
opcin LONGITUD DE LNEA COMPATIBLE CON NAVEGADORES WEB ANTIGUOS . O si
quieres abrir un documento antiguo en Web Designer, escoge la opcin CONSERVAR
FORMATO ORIGINAL .

*Al momento de la escritura de este manual, los navegadores Apple Safari y Chrome
cuando se utilizan en dispositivos mviles como telfonos o tabletas todava
redondean los tamaos de fuente al pxel entero ms cercano.

Tipo de documento
Se determina el tipo de documento, como se indica en el icono de la pestaa del
documento.

Pgina web: usa este tipo de documento para crear pginas y grficos web. Este
el el tipo de documento ms comn con el que usa Web Designer.
Presentacin (Web): estos son documentos web especiales para hacer
presentaciones. Consulta el captulo Presentaciones web (en la pgina 396)
para ms informacin.
Impresin: se usa para documentos creados para trabajos de impresin. 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 pgina definida, por ejemplo. Consulta el
captulo Manejo de fotos (en la pgina 327) para ms informacin.
Animacin: usado para los documentos con animaciones. Consulta el captulo
"Animaciones" para ms 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 galera de diseos, o
escoger un documento en blanco del men ARCHIVO >NUEVO ). Sin embargo, a veces
es til convertir entre imprimir, documentos de pgina web y presentacin si cambia
el propsito con el que fue creado tu documento. Puedes convertir de fotos o
documentos de animacin.

Limitacin de ngulo
Esto es aplicable para la rotacin 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 duplicacin
Edicin > 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.

Pestaa Cuadrcula y regla

Espaciado de cuadrcula y regla

El ESPACIADO PRINCIPAL define la distancia entre la cuadrcula principal y las
divisiones de la regla. Las unidades utilizadas para la cuadrcula y las reglas estn
definidas por las unidades que utilizas en el espaciado principal. Por ejemplo, si
introduces un espaciado principal de 2 CM. las unidades de la cuadrcula y la regla se
configurarn en centmetros sin importar la unidad de pgina especificada en las
opciones de unidades.

Coordinar seleccin
Aqu puedes cambiar la direccin de las coordinadas de la pgina.

www.magix.es
 Personalizacin de Web Designer 493

Pestaa Ratn

Funcin de botones de ratn

Web Designer te ofrece una gama de acciones posibles para la tecla izquierda o
derecha del ratn. Por ejemplo, si eres zurdo, es posible que quieras utilizar el botn
derecho como el botn normal. Por lo tanto, puedes asignar el clic normal a la tecla
derecha del ratn (tambin puedes configurar ambas teclas para la misma accin, si
as lo deseas).

Acciones posibles:

Clic normal: al menos un botn debera tener asignado esta opcin.

+clic.
Ctrl+clic.
Alt+clic.
Men pop-up (ver ms adelante).
Cambiar a pantalla completa (descrito en Trabajar con documentos (en la
pgina 78)).
Acercar o alejar el zoom +clic para alejar (descrito en Trabajar con
documentos (en la pgina 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 mayora de los tipos de objetos, el men contiene las opciones
494

CORTAR, COPIAR, PEGAR, ELIMINAR, DUPLICAR, CLONAR (descritas en el captulo

Trabajar con objetos (en la pgina 106)).

MOVIMIENTO DE RUEDECILLA DEL RATN: puedes cambiar la accin de la rueda del

ratn entre desplazamiento y zoom. La primera es la opcin 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 asignacin de botones
originales. Esto tiene efecto inmediato, no necesitar hacer clic en ACEPTAR ni en
APLICAR AHORA .

El panel de control de Windows tambin te permite intercambiar los botones

izquierdo y derecho del ratn.

Radio para alineacin magntica

La alineacin magntica se describe en detalla en el captulo Trabajo con objetos (en
la pgina 130).

Estos valores determinan la distancia a la que pueden acercarse los objetos a los
objetos magnticos antes de alinearse automticamente. Estas son distancias en la
pantalla y son independientes del tamao de tu documento.

www.magix.es
 Personalizacin de Web Designer 495

Pestaa Tamao de pgina

Si la opcin "TODAS LAS PGINAS DEL SITIO WEB CON EL MISMO TAMAO" no est
seleccionada, entonces puedes asignar tamaos diferentes a tus pginas utilizando
este dilogo. Para fijar el tamao de la pgina, escoge uno de los tamaos de pgina
suministrados en la lista desplegable o escoge "Personalizado" y luego introduce el
ancho y la altura requeridas en el campo suministrado.

Si la opcin BLOQUEAR TAMAO DE PGINA est activada, no podrs cambiar el

tamao de las pginas si arrastras el borde inferior o las esquinas derechas y
cualquier objeto de desplazamiento que se coloque fuera de la pgina no la ampliar.
496

Pestaa Copias de seguridad

Esta pestaa te permite activar y desactivar la funcin de copias de seguridad
automticas. Esta funcin guarda una copia de todos los documentos abiertos
modificados en intervalos regulares. Se recomienda dejar activada esta opcin para
que tu trabajo se guarde con regularidad. Tambin 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 prxima vez que
inicies el programa.

Consulta el captulo Trabajar con documentos (en la pgina 88) para ms detalles
acerca de estas funciones.

Pestaa efectos y plug-ins

Para ms informacin sobre los efectos en tiempo real lee el captulo Efectos en
tiempo real (en la pgina 365).

Plug-ins de Photoshop (solo Web Designer de 32 bits)

Un clic sobre CONFIGURAR te permite aadir y eliminar capetas de plug-ins de efectos
en vivo.

Efectos
Aqu puedes configurar la resolucin por defecto de los efectos en vivo y bloqueados.

www.magix.es
 Personalizacin 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 tamao.

Res. de efecto en vivo por def.:

Si la resolucin de un efecto en vivo est configurada en AUTOMTICO, entonces
cualquier efecto en vivo sobre un objeto se producir por defecto con la resolucin de
pantalla. Si deseas imprimir tu diseo puedes configurar un efecto en vivo con un DPI
mayor y todos los efectos sobre ese objeto (siempre que los otros efectos no estn
configurados como automticos) se renderizarn automticamente con el DPI mayor.
Por lo tanto, no ser necesario modificar cada efecto. Tambin puedes configurar una
opcin por defecto diferente en esta ventana y todos los efectos en vivo se crearn
con esa resolucin.

Res. efecto bloqueado por def.:

Esta es la resolucin 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 informacin 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 configuracin aparece cuando la ventana tiene el tamao normal.

La segunda configuracin aparece despus de escoger Ventana > Pantalla
completa.

Cualquier cambio a la configuracin de las barras de control (por ejemplo, cambio de

tamao o desplazamiento) no tiene efecto en la otra configuracin. Los cambios a
botones individuales (por ejemplo, configurar una opcin) se aplican tanto al modo
normal como de pantalla completa.
498

Mostrar y ocultar barras de control

La visualizacin de las barras de control se modifica a travs del dilogo 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.

Tambin puedes activar o desactivar las BARRAS DE CONTROL si haces clic derecho en
un rea vaca de la parte superior de la ventana del programa. Utiliza el men
desplegable para escoger las barras que deseas mostrar.

www.magix.es
 Personalizacin de Web Designer 499

Barras de control bloqueadas o flotantes

Normalmente, las barras de control estn bloqueadas (ajustadas a los bordes de la
ventana). Al mover la ventana tambin se mueven las barras de control bloqueadas.

Las barras de control tambin 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 dilogo de BARRAS DE

CONTROL (descrito arriba) o con un clic sobre el icono de CIERRE.

Para hacer que una barra de control sea flotante, arrstrala desde el borde de la
ventana hasta un rea de edicin o fuera de la ventana de Web Designer.

Para bloquear una barra de control, arrstrala 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 lnea al arrastrar. Esto
cambia a una lnea simple cuando se encuentra en una posicin bloqueada. Si quieres
que la barra de control permanezca flotante, pulsa Ctrl mientras la desplazas.

Modificacin del tamao de una barra de smbolos

Desplaza el cursor del ratn sobre el borde de la barra de smbolos hasta que se
convierte en una doble flecha. Ahora podrs arrastrar el borde para modificar el
tamao de la barra de smbolos.

Creacin de barras de smbolos

Para crear una barra de smbolos realiza lo siguiente:
Arrastra un botn desde el rea de trabajo o desde la ventana. De esta forma, se
crear una nueva barra de smbolos que contendr el botn.
O haz clic sobre NUEVO en el dilogo de BARRAS DE SMBOLOS . De esta forma
puedes crear una nueva barra de smbolos y darle un nombre. La nueva barra de
smbolos estar vaca. Ahora podrs insertar botones mediante arrastrar y
soltar.

El desplazamiento de botones se explica ms adelante.

500

Eliminar las barras de control

Slo puedes eliminar las barras de control que estn vacas. Para ello, mueve
cualquier botn hasta otra barra de control. Cierra la barra de control (con un clic
sobre el icono de CIERRE o usando el dilogo de BARRAS DE CONTROL ). La barra de
control se eliminar automticamente cuando cierres Web Designer.

Desplazar botones y herramientas

Para mover botones o herramientas:

1. Mueve el cursor hasta el botn que quieres mover.

2. Mantn pulsada "Alt" (ALT izquierdo) para mover el botn o "AltGr" (ALT
derecho) para copiar el botn 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 slo copian el botn.
3. Arrastra el botn hasta:
- Un lugar diferente sobre la misma barra de control.
- Otra barra de control.
- O hasta un rea de edicin o fuera de Web Designer para crear una barra de
control nueva.

No puedes mover botones desde ni hasta la barra de informacin.

Ocultar botones y herramientas

Mueve los botones o herramientas no deseados hasta otra barra de control y despus
oculta esa barra de control (descrito anteriormente).

Si necesitas el botn 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
 Mens y shortcuts de teclado 501

Mens y shortcuts de teclado

Introduccin
En muchas partes estas descripciones se refieren al objeto seleccionado. En la
mayora de los casos, la accin descrita tambin 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 opcin de un men, una barra de control o con
un shortcut. Si existe un botn en la barra de control y/o un shortcut, se mostrarn
detrs el nombre del men. Por ejemplo, lo siguiente significa que hay un botn en la
barra de control ESTNDAR que tiene el mismo efecto que seleccionar nuevo o que
pulsar el shortcut Ctrl+N.

Nuevo (barra de control estndar o Ctrl+N)

Men Archivo
Nuevo (barra de control estndar o Ctrl+N)
Crea un documento nuevo.

Nuevo desde el catlogo de contenido

Abre el catlogo de contenido online. Elige entre las categoras smartshapes,
plantillas, widgets y cliparts de la web del catlogo o diseo y foto.

Abrir (barra de control estndar o Ctrl+O)

Abre una nueva ventana de edicin 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 importacin (consulta Importacin y
exportacin (en la pgina 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 ms recientemente. Esta lista te
proporciona una forma rpida de volver a cargar cualquiera de estos archivos.

Puedes cambiar la cantidad de archivos que aparecen en esta lista. (Para ms

informacin consulta el captulo Personalizacin de Web Designer).
502

Cerrar (Ctrl+W)
Cierra la ventana de edicin actual. Web Designer permanece abierto. Se te advertir
si no has guardado cambios.

Guardar (barra de control estndar 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
captulo Personalizacin de Web Designer (en la pgina 487)).

Importar (Ctrl+Shift+I)
Carga un archivo en el documento seleccionado. El archivo puede ser cualquiera de
los formatos de importacin. (Lee el captulo Importacin y exportacin (en la pgina
463) para ms informacin).

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 direccin web (Ctrl+Alt+W)

Importar textos y grficos directamente desde pginas web de Internet hasta tu
documento. Introduce la URL (direccin web) de la pgina web que desees para
importar al cuadro de dilogo.

Exportar (Ctrl+Shift+E)
O haz clic derecho y escoge EXPORTAR .

Te permite exportar el documento en una gran variedad de formatos de exportacin

compatibles con Web Designer (consulta Importacin y exportacin (en la pgina
463) para la lista de formatos).

www.magix.es
 Mens y shortcuts de teclado 503

Exportar JPEG
Tambin disponible en la barra de herramientas de
exportacin. O haz clic derecho y escoge Exportar JPEG.

Te permite exportar los objetos seleccionados, una pgina o todo el documento como
JPEG.

Exportar PNG
Te permite exportar los objetos seleccionados, una pgina o todo el documento como
PNG.

Vista previa de la pgina web (Shift + F5)

Exporta y ofrece una vista previa de la pgina actual del documento de sitio web.

Tambin puedes hacer una vista previa de tu pgina con un clic en el botn de
vista previa de pgina 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 pgina en tu navegador preferido.

Muestra la vista previa de tu pgina en Google Chrome

Muestra la vista previa de tu pgina en Mozilla Firefox

Muestra la vista previa de tu pgina en Internet Explorer

Muestra la vista previa de tu pgina en Opera

Muestra la vista previa de tu pgina en Safari

Visualizar pgina web

Exporta el documento de pgina web actual y realiza una vista previa. El documento
es exportado a la misma ubicacin a la que fue exportada por ltima vez
(sobrescribiendo los archivos necesarios sin sugerir) o a una ubicacin temporal si la
pgina no ha sido exportada todava. A continuacin aparece una ventana de
navegador mostrando la primera pgina de la pgina web.

Esta es la forma ms rpida de realizar una vista previa de tu pgina cuando

trabajas en ella. Tambin puedes realizar una vista previa haciendo clic en el
botn en la barra de herramientas de web.
504

Exportar pgina web

Tambin disponible en la barra de herramientas de
exportacin. Exportar el documento actual como HTML.

Publicar pgina web

Se realiza la misma operacin que con el botn en la barra de herramientas
de web. Exporta y luego publica el documento de pgina web actual a tu
pgina web.

Si todava no has introducido los detalles FTP para tu espacio web, la pestaa
PUBLICAR en el dilogo de PROPIEDADES WEB se visualizar primero. A continuacin la
pgina web se publica en tu espacio web. Un indicador de progreso aparece durante
la operacin de publicacin.

Consulta el captulo Primeros pasos para ms detalles sobre la publicacin.

Vista previa de documentos web (F5)

Te ofrece una vista previa del documento de impresin actual como pgina web.

Tambin puedes hacer una vista previa de tu pgina con un clic en el botn de
vista previa de pgina 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 pgina en tu navegador preferido.

Exportar Pgina web

Exporta el documento de impresin actual como pgina web HTML. Lee Publicacin
de documentos web HTML (en la pgina 471) para ms informacin.

Publicacin de documento web

Exporta y luego publica el documento de impresin actual como pgina web HTML
en tu espacio web. Si todava no has introducido la informacin de FTP para tu
espacio web, se te solicitar que lo hagas. Luego podrs publicar el documento web
en tu espacio web. Un indicador de progreso aparece durante la operacin de
publicacin.

Vista previa flash

Esta opcin slo se activa cuando el documento actual es un documento de
animacin. Esto exporta tu animacin como flash y abre una ventana popup
mostrando tu animacin flash reproducindose. La ventana tambin incluye
informacin bsica sobre tu animacin flash, como por ejemplo el tamao del archivo
flash.

www.magix.es
 Mens y shortcuts de teclado 505

El botn en la barra de herramientas es una forma ms rpida de invocar esta

operacin.

Exportar animacin
Tambin disponible en la barra de herramientas de animacin debajo de la
barra de herramientas estndar en un documento de animacin.

Exporta una animacin para utilizarla en una pgina web.

Informacin de documento
Esto muestra un recuadro de informacin sobre el documento seleccionado. Incluye
informacin completa sobre el documento, como fuentes (junto con sus permisos) y
plug-ins Live Effects que se utilizan.

Opciones de pgina
Tambin puedes hacer clic derecho y escoger OPCIONES DE PGINA .

Te permite editar el diseo de la pgina, su tamao, etc.

Configuracin de impresora
Establece las opciones relacionadas con la impresora o el archivo de impresin actual.
(Para ms informacin, lee el captulo Impresin (en la pgina 480)).

Opciones de impresin
Modifica las opciones de la impresin, incluyendo la orientacin y el tamao de
impresin. (Para ms informacin, lee el captulo Impresin (en la pgina 480)).

Imprimir (Ctrl+P)
Configura las opciones relacionadas con la impresin del documento y te permite
imprimirlo. (Para ms informacin, lee el captulo Impresin (en la pgina 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 Edicin
Deshacer (barra de control estndar o Ctrl+Z)
Deshace la operacin anterior. Lo que aparece escrito en esta opcin refleja la ltima
operacin realizada. Por ejemplo DESHACER CORTAR . (Lee el captulo Deshacer y
rehacer (en la pgina 104)).

Rehacer (barra de control estndar o Ctrl+Y)

Cancela la ltima opcin DESHACER . Lo que aparece escrito en esta opcin refleja la
ltima operacin DESHACER realizada.

Cortar (barra de control edicin o Ctrl+X)

Corta el objeto seleccionado al portapapeles. Lo que aparece escrito en esta opcin
refleja el tipo de objeto seleccionado. (Lee el captulo Trabajar con objetos (en la
pgina 111)).

Copiar (barra de control edicin o Ctrl+C)

Copia el objeto seleccionado en el portapapeles. Lo que aparece escrito en esta
opcin refleja el tipo de objeto seleccionado. El objeto permanece en el lugar del
documento. (Lee el captulo Trabajar con objetos (en la pgina 111)).

Pegar (barra de control edicin 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 opcin refleja el contenido del portapapeles (consulta Manejo de
objetos (en la pgina 111)).

A veces, cuando pegas el contenido del portapapeles en un documento, puede

insertarse en diversos formatos. Si esto es el caso, aparecer el dilogo 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 posicin de donde lo
has copiado. Esto es til para mover objetos de una capa a otra sin cambiar su
posicin X/Y. Sin embargo, ten en cuenta que si el objeto seleccionado es un pie de
pgina (es decir, que siempre guarda la misma distancia de la parte inferior de la
pgina aun al cambiar el tamao de la pgina) entonces, al pegarlo, se posicionar
www.magix.es
 Mens y shortcuts de teclado 507

respecto a la parte inferior de la pgina. En general, as quieres que se comporten los

objetos de pie de pgina.

Pegar formato/atributos
Conserva el formato (p. ej. el tipo y tamao de fuente) o los atributos de estilo (p. ej.,
el color de la lnea y del relleno) del objeto que se pega.

Pegar posicin
Esta opcin aplica la posicin de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, que se mueve a exactamente la misma posicin que el
objeto copiado.

Si se han copiado mltiples elementos en el portapapeles, Web Designer los trata

como a un grupo y mueve al objeto actual seleccionado a la posicin del grupo
copiado como un todo.

El objeto seleccionado actualmente se pega o se mueve a la posicin central del

objeto copiado o al grupo de objetos.

Pegar tamao
Esta opcin aplica el tamao de un objeto copiado en el portapapeles a un objeto
seleccionado actualmente, cuyo centro cambia de tamao para ser igual al del objeto
copiado.

Si se han copiado mltiples elementos en el portapapeles, Web Designer los trata

como a un grupo y cambia el tamao del objeto actual seleccionado al tamao del
grupo copiado como un todo.

Pegar reemplazo de seleccin

Esto es similar a PEGAR POSICIN , solo que el objeto copiado en el portapapeles
reemplaza al objeto seleccionado actualmente y mantiene la posicin del elemento
borrado.

El objeto copiado se pega en la posicin 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 posicin desde la que lo has copiado.

Eliminar (Edicin- Barra de smbolos y barra de smbolos

estndar o Supr)
Borra el objeto marcado. El texto de esta opcin corresponde al objeto seleccionado.
Lee el captulo: El trabajo con objetos (en la pgina 106).

Seleccionar todo (Ctrl+A)

Selecciona todos los objetos de las capas editables. (Las capas editables y bloqueadas
estn descritas en el captulo Capas (en la pgina 419)).

Eliminar seleccin/Restaurar atributos actuales (Esc)

Deselecciona todos los objetos. Si nada est seleccionado, los atributos actuales (en
la pgina 57) vuelven a sus valores por defecto. Puedes ejecutar esta opcin si
presionas ESC dos veces.

Duplicar (barra de control edicin 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 Personalizacin de Web Designer (en la pgina 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.

Pginas
O haz clic derecho y escoge PGINAS .

El submen Pginas te permite aadir o quitar pginas de tu documento multipgina,

duplicar la pgina actual o mover la pgina actual ms arriba o abajo del documento.
Para ms informacin sobre documentos multipgina consulta Documentos
multipgina (en la pgina 83).

www.magix.es
 Mens 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 animacin, esta opcin es
MOVER AL PRXIMO 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 pgina 106) para ms informacin.

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

Mover atrs (barra de control arreglo o Ctrl+Shift+B)

O haz clic derecho y escoge ARREGLO > MOVER HACIA ATRS .

Mueve el objeto seleccionado un paso hacia atrs (consulta Manejo de objetos).

Llevar atrs (barra de control arreglo o Ctrl+B)

O haz clic derecho y escoge ARREGLO > LLEVAR ATRS .

Mueve el objeto seleccionado detrs de los otros objetos sobre la misma capa
(consulta Manejo de objetos (en la pgina 106)).

Mover a la capa de atrs (barra de control arreglo o

Ctrl+Shift+D)
O clic derecho y escoge ARREGLO > MOVER A LA CAPA DE ATRS .

Mueve el objeto seleccionado una capa hacia atrs. El objeto se convierte en el objeto
de primer plano de la nueva capa. En un documento con animacin, esta opcin 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 pgina 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 opcin 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 pgina 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

Alineacin (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 pgina 135) para ms informacin).

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
 Mens y shortcuts de teclado 511

Utilizar la forma superior para cortar las otras formas.

Realizar una interseccin de formas para crear objetos de las formas agrupadas.

Solo las formas seleccionadas se combinarn. Las formas no seleccionadas

permanecen iguales (para ms informacin, consulta Manejo de formas en la pgina
176).

Crear copia de mapa de bits (Ctrl+Shift+C)

CREAR COPIA DE MAPA DE BITS crea una versin en mapa de bits (en la pgina 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 lnea de texto a una curva arbitraria o desvincular el
texto de una curva (consulta Manejo de texto para ms informacin).

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 pgina 220) y Grficos
anclados (en la pgina 222) para ms detalles

Crear barra de navegacin

Esta funcin te permite crear una barra de navegacin a partir de un nico botn.
Encontrars ms informacin en el captulo BARRAS DE NAVEGACIN (en la pgina
382).

Repetir en todas las pginas (Shift+Ctrl+Alt+R)

O haz clic y escoge REPETIR EN TODAS LAS PGINAS .

El objeto seleccionado se copiar en el mismo lugar en todas las pginas. La funcin

crear automticamente 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 actualizacin (Shift+Ctrl+Alt+O)

O haz clic derecho y escoge DETENER ACTUALIZACIN . La funcin ARREGLO > DETENER
ACTUALIZACIN te permite desactivar la naturaleza de repeticin de un objeto o en
todas las copias de ese objeto en tu sitio web.

Obtn ms informacin en el captulo Manejo de objetos (en la pgina 145).

512

Men Insertar
Del catlogo de contenidos
Abre el catlogo de contenidos online. Elige entre las categoras plantillas, widgets y
cliparts de la web del catlogo o diseo y foto.

Imagen
Del archivo: examina tu PC para cargar un archivo de imagen en el documento
seleccionado.
De direcciones web: extrae todas las imgenes desde una pgina web especfica.
(Ctrl+Alt+W)
Captura de pantalla: abre la herramienta de captura de pantalla.
Desde la cmara: detecta una cmara web u otro dispositivo de captura de vdeo
asociado a Windows agregado a tu PC e inserta una imagen inmvil en tu
documento.

Forma
Rectngulo: inserta un rectngulo en el documento actual (Shift+Ctrl+Alt+E)
Elipse: inserta una elipse en el documento actual (Shift+Ctrl+Alt+E)
Ms formas: abre la seccin "Otras formas" de Smartshapes en el catlogo de
contenido online
Flechas: abre el rea de flechas de Smartshapes en el catlogo de contenido
online
Panel de texto: inserta un panel de texto en un documento actual (Shift+C)
Ms paneles de texto: abre la seccin de paneles de texto del catlogo de
contenido online
Globo de dilogo: inserta un globo de dilogo en el documento actual

Campo de texto
Inserta un campo de texto en el documento actual.

Nmero de pgina
Inserta un nmero de pgina en la posicin del cursor al usar la HERRAMIENTA DE
TEXTO . Ver Aadir nmeros de pgina para ms informacin.

Nueva pgina
Nueva pgina en blanco: inserta una nueva pgina en blanco en el documento
detrs de la pgina seleccionada actual.
Duplicar pgina: inserta un duplicado de la pgina en el documento detrs de la
pgina actual seleccionada.
Del catlogo de contenidos: abre el catlogo de contenidos online.

www.magix.es
 Mens y shortcuts de teclado 513

Men Herramientas
Galeras
Pginas y galeras (barra de control galeras o "F10")
Muestra u oculta la GALERA DE PGINAS Y CAPAS. Solo utilizada en documentos no
animados , ver Capas (en la pgina 419).

Galera de mapas de bits (barra de control de galeras o "F11")

Muestra u oculta la GALERA DE MAPAS DE BITS , ver Manejo de mapas de bits (en la
pgina 333).

Galera de lneas (barra de control de galeras o "Ctrl + F9")

Muestra u oculta la GALERA DE LNEAS , ver Dibujo de lneas (en la pgina 166).

Galera de diseos (barra de control de galeras o " + F10")

Muestra u oculta la GALERA DE DISEOS , ver Importacin y exportacin (en la pgina
463).

Galera de rellenos (barra de control de galeras o " + F11")

Muestra u oculta la GALERA DE RELLENOS , ver Manejo de mapas de bits (en la pgina
327).

Galera de frames (barra de control de galeras o " + F12")

Muestra u oculta la GALERA DE FRAMES . Solo utilizado en documentos animados, ver
Grficos web (en la pgina 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 pgina 183)).

Nombres
O haz clic derecho y escoge NOMBRES . Abre el dilogo Aplicar/Eliminar nombres (en
la pgina 141).

Propiedades web (Ctrl+Shift+W)

O haz clic derecho y escoge PROPIEDADES WEB . Abre el dilogo PROPIEDADES WEB ,
que te permite agregar elementos web, como enlaces, capas popup, anclajes, etc., a
tu documento de pgina web. Adems puedes controlar cmo se exportan las
514

imgenes para la pgina web y configurar otras propiedades web ms utilizando este
dilogo. Consulta Primeros pasos (en la pgina 23) para ms detalles.

Variantes de pgina 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 opcin 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 PGINA A TODAS LAS VARIANTES: copia la pgina seleccionada a todas las
variantes.
VARIANTES DE PGINA WEB: abre el dilogo Variantes de pgina web (en la
pgina 298).

Optimizar foto
O haz clic derecho y escoge OPTIMIZAR FOTO . Optimizar resolucin del mapa de bits
para utilizar tus diseos con MAGIX Web Designer 11 Premium. Ver Optimizacin de
fotos (en la pgina 347) para ms detalles.

Optimizacin de todas las imgenes

Optimizacin de todas las fotos y mapas de bits en el diseo. Lee Optimizacin de
fotos (en la pgina 347).

Animacin
Este men slo est disponible en los documentos con animacin y ofrece tres
opciones:

PROPIEDADES DE LA ANIMACIN : en este dilogo puedes cambiar las opciones

para la animacin y para cada frame.
VISTA PREVIA DE TODOS LOS FRAMES : Utiliza esto para realizar una vista previa de
todos los frames de tu animacin. Esto no es muy til para animaciones flash
porque slo muestra los frames clave sin transiciones (tweening).
VISTA PREVIA DE ANIMACIN 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 botn en la barra de
animacin para un acceso rpido a esta operacin.
VISTA PREVIA DE ANIMACIN FLASH EN EL EXPLORADOR: Abrir una ventana donde
se reproduce tu animacin como flash, tal como aparecer en un navegador web
cuando la exportes. Utiliza esto para realizar vistas previas de animaciones flash.
Hay un botn en la barra de animacin para un acceso rpido a esta operacin.

www.magix.es
 Mens y shortcuts de teclado 515

Revisar ortografa mientras se escribe

Esta opcin activa el CORRECTOR DE ORTOGRAFA (en la pgina 213) en la herramienta
de texto.

Opciones (Ctrl+Shift+O)
O clic derecho y OPCIONES DE PGINA. Abre el dilogo OPCIONES (descrito en
Personalizacin 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 pgina y enviarla rpidamente al MAGIX lbum
Online, a Facebook o a Flickr. Por lo tanto, si has instalado otros programas MAGIX
compatibles, tambin puedes enviar las imgenes a ellos. Por ejemplo, puedes
enviarla a MAGIX Video deluxe Pro MX para incluir la imagen en una pelcula.

Publicar online: carga de objetos a Facebook

Envo de la seleccin a Facebook. Aparecer un dilogo que te permitir especificar, si
lo deseas, un nombre de archivo, una descripcin, las palabras clave de bsqueda
para tu imagen y si debe ser pblica o privada. Haz clic en el botn CARGA para
continuar y aparecer una ventana de inicio de sesin. Si ya tienes una cuenta en
Facebook, introduce la informacin, de lo contrario, haz clic en Registrarse para unirte
a Facebook. Si vas a cargar muchas imgenes, selecciona el campo para no cerrar
sesin, de forma que no tengas que volver a iniciar sesin cada vez que quieras cargar
una imagen. Haz clic en el botn de inicio de sesin 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

Envo de la seleccin a Flickr. El proceso es similar al que se ha descrito anteriormente
para Facebook, excepto que debes iniciar sesin con tu informacin de cuenta de
Flickr.

Publicar online: MAGIX lbum Online

ENVIAR OBJETOS SELECCIONADOS
Enva la seleccin a MAGIX para incluirla en un lbum online nuevo o existente. Inicia
sesin con la informacin de tu cuenta de MAGIX Mundo Online. Puedes optar por
que los datos de inicio de sesin se guarden en tu equipo para que no tengas que
iniciar sesin 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 SESIN

Si has seleccionado guardar tus datos de inicio de sesin de MAGIX Mundo Online en
tu equipo, esta opcin te permite cambiarlos o eliminarlos si no quieres dejarlos
guardados, con solo pulsar el botn de eliminacin.

Publicar online: publicar un sitio web

Esto inicia una operacin de publicacin del documento actual, la misma operacin
disponible a travs del men Archivo y de la barra de herramientas web.

Publicar online: espacio web libre y ms

Esta opcin abrir un navegador web en una pgina que te informar sobre los
servicios de alojamiento web gratis de MAGIX disponibles y otra informacin
relacionada.

Envo de imgenes 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 opcin
"Aadir objetos a vdeo" que te permitir enviar la seleccin a esa aplicacin para
incluirla en una pelcula.

www.magix.es
 Mens y shortcuts de teclado 517

Men Ventana
Eliminar seleccin/Restaurar atributos actuales (Esc)
Deselecciona todos los objetos. Si nada est seleccionado, los atributos actuales (en
la pgina 57) vuelven a sus valores por defecto. Puedes ejecutar esta opcin si
presionas ESC dos veces.

Vista multipgina
O haz clic derecho y escoge VISTA MULTIPGINA.

Por defecto, Web Designer muestra solamente la pgina actual del del documento
abierto en el momento. Si escoges la vista multipgina, vers todas las pginas en tu
documento.

Arreglar ventanas
Ordena todas las ventanas de Web Designer como mosaico.

Animacin
En un documento de animacin, activar la barra de herramientas Animacin.

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 CUADRCULA/GUAS > MOSTRAR REGLAS.

Muestra las reglas de los lados y de la parte superior de la ventana de Web Designer.

Barras de control
Muestra el dilogo de BARRAS DE CONTROL . (Descrito en el captulo Personalizacin
de Web Designer (en la pgina 497)).
518

Calidad (barra de control estndar)

Selecciona la forma en que los objetos se visualizan, desde contorno hasta
antialiasing. (Consulta el captulo Trabajar con documentos).

Ver pestaas de los documentos

Muestra las pestaas de los documentos que te proveen rpido acceso a los
documentos abiertos en la parte superior de la ventana de Web Designer.

Un clic sobre una pestaa selecciona el documento correspondiente. Un * tras el

nombre del documento seala que no se han guardado cambios de ese documento.

Pantalla completa (8 del teclado numrico)

Cambia entre el modo de pantalla completa y de pantalla normal.

Mostrar cuadrcula (#)

O clic derecho y MOSTRAR CUADRCULA/GUAS > MOSTRAR CUADRCULA.

Muestra la cuadrcula de pantalla (consulta Manejo de documentos (en la pgina

91)).

Mostrar guas (1 del teclado numrico)

O clic derecho y MOSTRAR CUADRCULA/GUAS > MOSTRAR GUAS.

Muestra u oculta la capa de guas que contiene todas las lneas gua y objetos gua.

Ajustar a cuadrcula (. del teclado numrico)

O clic derecho y AJUSTAR A > AJUSTAR A CUADRCULA.

Con esta opcin configurada, un objeto se ajustar al punto de cuadrcula cercano al

que se lo arrastre. (consulta Manejo de documentos (en la pgina 130)).

Ajustar a guas (2 del teclado numrico)

O clic derecho y AJUSTAR A > AJUSTAR A GUAS .

Con esta opcin configurada, un objeto se ajustar a cualquier gua cercana a la que
se lo arrastre (consulta Manejo de objetos (en la pgina 130) ).

Ajustar a objetos (* del teclado numrico)

O clic derecho y AJUSTAR A > AJUSTAR A OBJETOS .

www.magix.es
 Mens y shortcuts de teclado 519

Con esta opcin seleccionada, arrastrar un control deslizante cerca de otro objeto
ajusta el control al objeto (consulta Manejo de objetos (en la pgina 130) para ms
informacin). Puedes ajustar la distancia de ajuste. Para ms informacin, lee
Personalizacin de Web Designer.

Documentos abiertos
Una lista de todos los documentos abiertos actualmente. Un clic sobre un nombre
selecciona el documento correspondiente. (Ctrl+F6 tambin cambia entre los
documentos.) Un * tras el nombre del documento seala que no se han guardado
cambios de ese documento.

Men Ayuda
Ayuda de MAGIX Web Designer 11 Premium
Utiliza la opcin "Temas de ayuda" del men "Ayuda" para abrir una pgina de inicio
de la ayuda del programa. Aqu puedes leer la ayuda paso a paso o escoger una
seccin especfica a travs de la estructura de rbol de la derecha.

Ayuda
Esta opcin est disponible en casi todos los lugares del programa y abre la ayuda del
programa en el tema correspondiente. Utiliza esta funcin para obtener ayuda sobre
cualquier funcin de MAGIX Web Designer 11 Premium.

Shortcut: F1

Pelculas
Abre una pgina web que contiene vdeos tutoriales acerca de la utilizacin de Web
Designer.

Ms Web Designer
Este men contiene enlaces de internet tiles para la pgina web de Xara y recursos
online tiles.

Consejo del da
Ver el consejo del da. En la ventana del consejo del da 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 versin
principal de Web Designer para actualizar. Luego, si has registrado el programa con
Xara, se iniciar un proceso automtico de actualizacin que comprobar si hay
disponibles actualizaciones de programa gratuitas. Si hay una actualizacin
disponible, se descargar automticamente y luego se cierra MAGIX Web Designer 11
Premium y se instala la actualizacin. El programa luego se reinicia automticamente
para ti.'

Utiliza la opcin 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 opcin para unirte al programa o para
cambiar la opcin de afiliacin previamente. Selecciona esta opcin para abrir el
dilogo de afiliacin que te explica todo sobre el programa de afiliacin. Puedes
comenzar a cobrar comisiones desde tu pgina web MAGIX Web Designer 11
Premium o donarla por caridad, seleccionando las opciones que se muestran en el
dilogo.

Popups informativos
Te permite mostrar consejos de herramienta que, contienen informacin popup,
cuando pasas el cursor sobre barras de herramientas, botones, la lnea de colores y
otros elementos de la ventana de Web Designer.

Acerca de MAGIX Web Designer 11 Premium

Se ver informacin sobre el Copyright y el nmero de la versin de MAGIX Web
Designer 11 Premium.

Registrarme
Utiliza esta opcin para registrar online en Xara tu adquisicin para que puedas
obtener actualizaciones de programa gratuitas, descuentos en actualizaciones, ofertas
especiales y otros beneficios.

www.magix.es
 Mens y shortcuts de teclado 521

Shortcuts de teclado
Las herramientas
Herramienta de seleccin F2 o V o Alt + S
Herramienta Mscara a mano alzada Alt + F4
Herramienta Mscara de rectngulo Alt + F5
Herramienta de edicin de forma F4
Herramienta de rectngulo + 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 galeras
Galera de diseos + F10
Galera de rellenos + F11
Galera de frames + F12
Galera de pginas y capas F10
Galera de mapa de bits F11
Galera de lneas Ctrl + F9

Zoom
Zoom previo Ctrl + R
Zoom a seleccin Ctrl + + Z
Zoom a dibujo Ctrl + + J
Zoom a pgina Ctrl + + P
Ampliar (zoom in) Ctrl + + del teclado numrico
Alejar (zoom out) Ctrl+ - del teclado numrico
522

Zoom al 100% 1
Zoom al 200% 2
Zoom al 300% 3
Zoom al 400% 4
Zoom al 50% 5

Tambin puedes ampliar/alejar y desplazar el documento utilizando la rueda del ratn

(Ctrl+Rueda amplia/aleja).

Manipulacin de documentos
En la herramienta de texto, los shortcuts sealados con el asterisco (*) tienen una
accin diferente. Lee a continuacin.

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 grficos de la web Ctrl + Alt + W *
Exportar Ctrl + + E
Calcular tiempo de redibujo Ctrl + + T
Mostrar cuadrcula #
Mostrar guas 1 del teclado numrico
Ajustar a cuadrcula . del teclado numrico
Ajustar a guas 2 del teclado numrico
Ajustar a objetos * del teclado numrico
Seleccionar pantalla completa 8 del teclado numrico
Mostrar reglas Ctrl + + R
Deshacer Ctrl + Z o < o ,
Rehacer Ctrl + Y o > o .

www.magix.es
 Mens y shortcuts de teclado 523

Manipulacin de objetos
En la herramienta de texto, los shortcuts sealados con el asterisco (*) tienen una
accin diferente. Lee a continuacin.

Seleccionar todo Ctrl + A *

Seleccionar prximo objeto Tab
Eliminar la seleccin Supr *
Borrar seleccin Esc
Traer objeto al frente Ctrl + F
Llevar objeto al fondo Ctrl + B *
Mover objeto hacia adelante Ctrl + + F
Mover objeto hacia atrs Ctrl + + B
Mover objeto a la capa de adelante Ctrl + + U
(documentos de dibujo)
Mover objeto a la capa de atrs Ctrl + + D
(documentos de dibujo)
Mover al prximo frame (documentos de Ctrl + + U
animacin)
Mover al frame anterior (documentos de Ctrl + + D
animacin)
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 seleccin y copiar en el Ctrl + X
portapapeles
Pegar objeto del portapapeles Ctrl + V
Pegar objeto en la posicin original Ctrl + + V
Pegar formato/atributos Ctrl + + A
Crear copia de mapa de bits Ctrl + + C
Aadir formas Ctrl + 1
Sustraer formas Ctrl + 2
Formas de interseccin Ctrl + 3
524

Segmentar formas Ctrl + 4

Abrir el dilogo de alineacin Ctrl + + L*
Direccin web Ctrl + + W

Mover los objetos seleccionados: teclas de flecha con la HERRAMIENTA DE SELECCIN

(consulta Desplazar objetos (en la pgina 111))

Mover los controles deslizantes seleccionados: teclas de flecha en otras herramientas

diferentes a la herramienta de seleccin

Herramienta de texto
Teclas de navegacin Mueven el cursor de texto hacia arriba,
abajo, izquierda o derecha
un carcter por vez.
Inicio Mueve el cursor de texto al inicio de la
lnea.
Fin Mueve el cursor de texto al final de la lnea.
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 lnea en un objeto de texto.
Ctrl + Fin Mueve el cursor de texto al final de la
ltima lnea 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 regin de texto seleccionado en el
portapapeles.
Ctrl + L Selecciona todos los caracteres de la lnea
que contiene el cursor de texto.
Ctrl + Intro Inserta salto de pgina
Ctrl + + Intro Inserta salto de columna
Ctrl + + L Inserta el texto de ejemplo 'Lorem ipsum'
Ctrl + V Pega el texto en la posicin del cursor de
texto (si el portapapeles contiene texto).
Ctrl + W Intercambia la mayscula y minscula del

www.magix.es
 Mens y shortcuts de teclado 525

carcter que se encuentra a la derecha del

cursor de texto.
Ctrl + - Inserta un guin suave (aparece solamente
cuando se encuentra la final de la lnea).
Ctrl + + - Inserta guin rgido para prevenir que un
guin se malinterprete al final de la lnea.
Ctrl + < Aumenta/reduce el tamao de la fuente
del texto seleccionado (solo si toda la
Ctrl + >
seleccin tiene el mismo tamao)
Alt + teclas de flecha Aumenta / reduce el espaciado / kerning.
Inicia una nueva lnea de texto.
Supr Elimina el carcter a la derecha del cursor
de texto. Si el cursor se encuentra al final
de una lnea de texto, une esta lnea con la
lnea de abajo.
Retroceso Elimina el carcter a la izquierda del cursor
de texto. Si el cursor se encuentra al inicio
de una lnea de texto, une esta lnea con la
lnea de arriba.
+ teclas de flecha Selecciona todo el texto entre la posicin
del cursor y el inicio de la lnea.
+ Fin Selecciona todo el texto entre la posicin
del cursor y el final de la lnea.

Caracteres especiales (en la herramienta de texto)

Ctrl+barra espaciadora Espacio rgido (las palabras con espacios
rgidos entre ellas no se separaran al final
de la lnea)
Ctrl + del teclado numrico Guin "n" (este guin tiene el ancho de
una letra "n" y es ms largo que un
menos).
Ctrl + Alt + - del teclado numrico Guin "m" (este guin es un guin largo)
Ctrl + Alt + .(punto) Puntos suspensivos
Ctrl + Alt + C Copyright
Ctrl + Alt + R Registrado
Ctrl + Alt + T Marca registrada
Ctrl + Alt + B Vieta
526

Pginas
Ctrl + C Copiar la pgina actual o la seleccin (sin
objetos seleccionados)
Ctrl + X Cortar la pgina actual o la seleccin (sin
objetos seleccionados)
Ctrl + V Pegar pgina(s)
Suprimir Eliminar la pgina actual o la seleccin (sin
objetos seleccionados)
+ Ctrl + Supr Eliminar la pgina actual o la seleccin (sin
o con objetos seleccionados)
+ Ctrl + Re. Pg. Mover la pgina hacia arriba
+ Ctrl + Av. Pg. Mover pgina hacia abajo

Utilizar mscaras
Herramienta "Pincel de mscara" Alt + F3
Mscara de mano alzada Herramienta Alt + F5
Herramienta de mscara rectangular Alt + F6
Activar/desactivar inversin de Ctrl + M o + F1
mscara
Invertir mscara Ctrl + + I o Ctrl + F1
Eliminar mscara Ctrl + D o Alt + F1

Otros
Editor de color Ctrl + E (abre y cierra)
Dilogo de opciones Ctrl + + O
Ayuda de MAGIX Web Designer 11 F1
Premium

www.magix.es
 Index 527

Index

Cules 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 estndar o Ctrl+O) .....................................................................501

Abrir enlace en: ...................................................................................................................... 278
Abrir un documento de animacin .................................................................................. 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
Activacin y desactivacin de las barras de navegacin del sitio ............................386
Activar o desactivar (on/off) la extrusin ...................................................................... 377
Actualizacin de la barra de navegacin en todas las pginas.................................. 393
Actualizacin de los estilos de texto ................................................................................ 229
Actualizaciones para el Panorama Studio....................................................................... 375
Actualizar programa ..............................................................................................................519
Adaptacin automtica........................................................................................................486
Adaptacin mltiple..............................................................................................................486
Adaptacin personalizada...................................................................................................486
Adaptar a bordes de pgina................................................................................................280
Adaptar el tamao de las fotos (solo documentos web)..............................................118
Adaptar texto a la curva/Eliminar texto de la curva ......................................................511
Agregado de archivos de pelculas y animaciones ........................................................412
Agregado de nuevas pginas de presentacin ............................................................. 404
Agregado y edicin de botones .........................................................................................389
Agregar extremos de flechas...............................................................................................154
Agregar ms segmentos de lnea ....................................................................................... 155
Agregar mens y submens ................................................................................................391
Agregar nuevas pginas a tu pgina web...........................................................................33
Agregar y quitar sangras..................................................................................................... 234
Agrupacin de galeras........................................................................................................... 99
Agrupar (barra de control arreglo o Ctrl+G) ...................................................................510
Agrupar y desagrupar objetos............................................................................................. 133
Ajustando la regin cortada.................................................................................................361
Ajustar a cuadrcula ...............................................................................................................126
Ajustar a cuadrcula (. del teclado numrico).................................................................518
Ajustar a guas (2 del teclado numrico) .........................................................................518
528
Ajustar a objetos (* del teclado numrico)..................................................................... 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 pgina para un mapa de bits.....................................................335
Ajuste magntico de objeto (ajustar a objetos) ............................................................ 128
Ajuste y ancho de lnea .........................................................................................................127
Al final de una lnea: .............................................................................................................. 158
Al inicio de una lnea: ............................................................................................................ 159
Alineacin ........................................................................................................................136, 137
Alineacin (Ctrl+Shift+L)..................................................................................................... 510
Ampliar foto a 100% .............................................................................................................355
Ampliar seleccin................................................................................................................... 107
Ancho / Alto ............................................................................................................................361
Animacin........................................................................................................................514, 517
repeticiones y velocidad ................................................................................................. 462
Animacin web...................................................................................................................... 294
Animaciones de aparicin ...................................................................................................432
Animaciones de clic/toque .................................................................................................432
Animaciones en Flash ...........................................................................................................435
Animaciones web................................................................................................................... 431
Anterior y Siguiente...............................................................................................................354
Aadir a la galera .................................................................................................................. 102
Aadir cdigo al encabezado de pgina ..........................................................................293
Aadir nombres...................................................................................................................... 142
Aadir nuevos botones........................................................................................................... 55
Aadir un nuevo punto de control..................................................................................... 158
Aplanar grupo de fotos......................................................................................................... 510
Aplicacin de transiciones a las capas popup.................................................................. 69
Aplicacin de transiciones a pginas de presentaciones ........................................... 406
Aplicacin de transiciones a pasos de presentaciones............................................... 405
Aplicacin de un color de fondo para el texto.................................................................183
Aplicar atributos a historias de texto completas...........................................................236
Aplicar colores de relleno y lnea 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 gradacin ................................................................................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 pelcula 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 lnea............................................................................................163
Arreglar ventanas ................................................................................................................... 517
Asistencia tcnica..................................................................................................................... 14
Atributos actuales (estilos) ...................................................................................................57
Atributos de la edicin de fotos.........................................................................................340
Autocorreccin........................................................................................................................214
Auto-optimizacin ................................................................................................................ 357
Ayuda...................................................................................................................................21, 519
Ayuda de MAGIX Web Designer 11 Premium ................................................................519

Barra de estado........................................................................................................................109
Barra de herramientas principal............................................................................................77
Barra de informacin........................................................................................................ 30, 77
Barra de informacin de estilos de texto ......................................................................... 228
Barra de informacin de Herramienta de extrusin ..................................................... 377
Barra de informacin de herramienta de relleno ............................................................241
Barra de navegacin del sitio..............................................................................................386
Barras de botones (barras de navegacin) ....................................................................... 56
Barras de control.................................................................................................... 76, 497, 517
Barras de control bloqueadas o flotantes........................................................................499
Barras de navegacin............................................................................................................ 382
Barras de navegacin de botn nico............................................................................... 387
Barras de navegacin 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
Botn Bloquear relacin de aspecto ...................................................................................117
Botn de red.............................................................................................................................481
Botn Escalar anchos de lnea ..............................................................................................117
Botn imprimir.........................................................................................................................481
Botn Imprimir... .....................................................................................................................481
Botn opciones........................................................................................................................481
Botones mouseover (rollover)...............................................................................................67
Botones MouseOver (rollover) .............................................................................................55
Botones que permiten clic y efectos de MouseOver ...................................................458
Botones y mens....................................................................................................................389
Brillo / Mate............................................................................................................................ 379
Brillo/Contraste/Temperatura del color/Saturacin/Tono....................................... 357
Buscar y reemplazar............................................................................................................... 215
530

Calidad (barra de control estndar).................................................................................. 518

Calidad de imagen ................................................................................................................... 93
Calidad de llenado................................................................................................................. 484
Calidad de mapas de bits .................................................................................................... 446
Calidad de visualizacin 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 lnea (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 unin del bisel...................................................................................266
Cambiar el tamao de fuente..............................................................................................232
Cambiar el tamao de las reas de texto........................................................................ 209
Cambiar el tamao de pgina ............................................................................................... 82
Cambiar el tamao del bisel................................................................................................265
Cambiar el tamao, rotar y reposicionar la foto dentro de su propio marco ........ 344
Cambiar el tipo de unin ...................................................................................................... 168
Cambiar el valor de zoom ......................................................................................................80
Cambiar el valor de zoom utilizando el ratn ...................................................................80
Cambiar el zoom utilizando la barra de informacin/barra de control de zoom ..... 81
Cambiar extremo de lnea.................................................................................................... 168
Cambiar la elevacin 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 lnea ...................................................................................................... 211
Cambiar los puntos cero de las reglas................................................................................ 93
Cambiar maysculas o minsculas ....................................................................................212
Cambiar seleccin de objetos............................................................................................. 107
Cambiar tamao utilizando el ratn................................................................................... 118
Cambiar tamao utilizando la barra de informacin ..................................................... 119
Cambiar texto de botn.......................................................................................................... 55
Cambio de la fuente de los botones de la barra de navegacin................................ 394
Cambio de tamao de widgets........................................................................................... 415
Cambio de tamao teniendo en cuenta el contenido...................................................368
Cambio del documento de plantilla en blanco .............................................................. 487
Cambio del orden de los pasos.......................................................................................... 403
Cambio del tamao de objetos (escalar).......................................................................... 117
Cambio del tamao y la posicin 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 pgina o de tablero de dibujo ........................................................315
www.magix.es
 Index 531

Capas de popup y capas de presentacin...................................................................... 406

Capas en pginas web..........................................................................................................425
Capas especiales....................................................................................................................428
Capas popup ............................................................................................................................. 70
Capas, MouseOver (rollover) y elementos emergentes ............................................... 65
Caracteres especiales (en la herramienta de texto)..................................................... 525
Catlogo de contenido online................................................................................................36
Cerrar ........................................................................................................................................505
Cerrar (Ctrl+W) .....................................................................................................................502
Cerrar el documento ............................................................................................................... 88
Cerrar una forma..................................................................................................................... 152
Cerrar una galera ...................................................................................................................103
Clipart flash ............................................................................................................................... 34
ClipView................................................................................................................................... 140
ClipView de borde suavizado ...............................................................................................141
Clonar..........................................................................................................................................114
Clonar (Ctrl+K) ......................................................................................................................508
Colocar objetos en la capa gua ...........................................................................................131
Color previo y actual ..............................................................................................................184
Coloreado de mapa de bits ................................................................................................. 247
Colorear formas ........................................................................................................................38
Colorear fotos ..................................................................................................................39, 344
Colores de animacin ............................................................................................................461
Colores de la lnea de colores..............................................................................................180
Colores de la pgina 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
Cmo crear sangras francesas ..........................................................................................220
Cmo sincronizar el texto empleando Grupos suaves .................................................216
Comparar y restaurar el original ........................................................................................ 359
Compartir a travs de variantes.........................................................................................300
Compartir documento en mltiples ubicaciones ............................................................ 74
Conexin de reas de texto, flujo de texto......................................................................206
Configuracin de impresora................................................................................................505
Configurar el color de fondo del ClipView ...................................................................... 140
Conflictos en el diseo de pginas..................................................................................... 132
Consejo del da ........................................................................................................................519
Consejos de herramientas......................................................................................................22
Contenido del directorio de compatibilidad ......................................................................87
Contornear texto alrededor de objetos.............................................................................. 47
Contorneo y anclaje ................................................................................................................511
Control deslizante / resolucin.......................................................................................... 256
Controles.................................................................................................................................. 475
Controles deslizantes de lmites de seleccin.................................................................109
532
Controles para rotar 90......................................................................................................354
Conversin de una pgina web existente en una presentacin................................. 401
Convertir color con nombre en local para frame/capa................................................ 192
Convertir objetos o dibujos a mapas de bits.................................................................. 350
Convertir texto en un grfico ................................................................................................ 50
Convertir una lnea recta en una curva (y viceversa) ................................................... 162
Coordenadas X-Y..................................................................................................................... 78
Coordinar seleccin.............................................................................................................. 492
Copiar (barra de control edicin o Ctrl+C) .................................................................... 506
Copiar / Pegar texto con formato (RTF)..........................................................................237
Copiar atributos de una extrusin 3D................................................................................381
Copiar efectos en vivo ..........................................................................................................368
Copiar estilos - pegar atributos...........................................................................................139
Copiar estilos de texto ..........................................................................................................236
Copiar formas a la capa de mscara ..................................................................................271
Copiar objetos.................................................................................................................30, 444
Copiar sombras a otros objetos ......................................................................................... 261
Copiar y pegar pginas ...........................................................................................................84
Copias ...................................................................................................................................... 482
Copias de memoria cero ......................................................................................................332
Copias de seguridad al cerrar el sistema ............................................................................ 91
Copias de seguridad automticas.................................................................................49, 88
Copias de seguridad de documentos abiertos ................................................................. 89
Copyright.......................................................................................................................................2
Corrector de ortografa ...........................................................................................................48
Corrector ortogrfico .............................................................................................................213
Cortar (barra de control edicin o Ctrl+X)..................................................................... 506
Cortar en documentos fotogrficos ..................................................................................362
Cortar formas ...........................................................................................................................177
Cortar objetos ...........................................................................................................................113
Cortar, copiar y pegar ............................................................................................................. 111
Cortar, copiar, eliminar .........................................................................................................269
Creacin de barras de navegacin propias .................................................................... 394
Creacin de barras de smbolos ........................................................................................ 499
Creacin de botones, banners y otros grficos web ....................................................... 52
Creacin de grupo suaves.................................................................................................... 134
Creacin de listas con nmeros y vietas ...................................................................... 404
Creacin de los botones MouseOver propios ............................................................... 390
Creacin de nuevos colores con nombre......................................................................... 188
Creacin de nuevos estilos..................................................................................................230
Creacin de panormicas ....................................................................................................373
Creacin de tus propios esquemas de colores............................................................... 187
Creacin de un tinte, una tonalidad o un color vinculado ........................................... 194
Creacin de una pgina Web................................................................................................. 31
Creacin de una presentacin ............................................................................................399
Creacin de una presentacin a partir de plantillas......................................................399
Creacin de una presentacin desde cero......................................................................400
Creacin y edicin de rectngulos con esquinas redondeadas ................................. 169
Crear agujeros en las formas ...............................................................................................176
Crear barra de navegacin.................................................................................................... 511
Crear crculos 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 pginas web RWD desde las plantillas.................................................................299
Crear polgonos y estrellas ................................................................................................... 173
Crear rectngulos y cuadrados ...........................................................................................169
Crear sitios web RWD desde sitios existentes ..............................................................299
Crear un cuadrado ..................................................................................................................169
Crear un lnea gua...................................................................................................................131
Crear un relleno de color con gradacin.......................................................................... 239
Crear una animacin............................................................................................................ 460
Crear una mscara ................................................................................................................ 267
Crear una mscara suave ....................................................................................................269
Crear uniones en curva..........................................................................................................163
Crear uniones en punta .........................................................................................................163
Cuadrcula en pantalla............................................................................................................. 91

Dar a nuevos objetos los atributos ms recientes ........................................................489

Darle el tamao completo a una foto ............................................................................... 347
Del catlogo de contenidos.................................................................................................. 512
Dentro........................................................................................................................................ 137
Desactivacin de la regeneracin del marcador de posicin ......................................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 estndar o Ctrl+Z).............................................................506
Deshacer corte ........................................................................................................................361
Deshacer y rehacer................................................................................................................ 104
Desplazamiento de la parte superior de la pgina......................................................... 317
Desplazamiento de los controles de inicio y fin de un relleno...................................244
Desplazamiento y tranformacin de una barra de navegacin 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
Detencin de la repeticin de objetos...............................................................................145
Detener actualizacin (Shift+Ctrl+Alt+O)........................................................................511
Dilogo de propiedades web .............................................................................................. 272
Dilogo Propiedades de la barra de navegacin............................................................384
Dibujar una linea o forma .....................................................................................................150
Dibujo de segmentos rectos con la herramienta de dibujo libre.................................151
Dibujo y edicin de lneas rectas ........................................................................................154
Diccionario de usuario...........................................................................................................214
Difuminacin..............................................................................................................................63
Difuminacin (Feathering) ...................................................................................................130
Direccin del bisel ................................................................................................................. 263
Directorios de compatibilidad .............................................................................................. 86
Diseo del programa................................................................................................................23
534
Diseo web adaptativo .........................................................................................................297
Diseo web basado en objetos............................................................................................. 28
Distancia duplicacin ........................................................................................................... 492
Distribuir....................................................................................................................................138
Divisin de formas complejas............................................................................................. 178
Documento seleccionado y barra de ttulo ....................................................................... 76
Documentos abiertos............................................................................................................ 519
Documentos fotogrficos .....................................................................................................351
Documentos sin ttulo.............................................................................................................90
Documentos web y PDF.......................................................................................................326
Duplicar ..................................................................................................................................... 114
Duplicar (barra de control edicin o Ctrl+Alt+D) ........................................................ 508
Duplicar y clonar ......................................................................................................................113
Duplicar, clonar...................................................................................................................... 270
Duracin de frames para pelculas Flash y pasos intermedios ................................. 447

Edicin de archivos de fotos................................................................................................352

Edicin de estrellas .................................................................................................................175
Edicin de smartshapes......................................................................................................... 171
Edicin de widgets existentes.............................................................................................. 411
Edicin del contenido de un objeto repetido .................................................................. 144
Edicin 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 lneas/formas con la herramienta de dibujo libre y pincel...............................153
Editar mscara. .......................................................................................................................268
Editar polgonos 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 tamao de una foto y guardarla en JPEG. ........................ 340
El botn de propiedades....................................................................................................... 481
El color se transforma el color de la animacin cambia .........................................455
El dilogo de impresin......................................................................................................... 481
El editor de color......................................................................................................................183
El orden de los botones coincide con el orden de la pgina .......................................385
Eliminacin de estilos............................................................................................................232
Eliminacin de grupos suaves..............................................................................................135
Eliminacin de una barra de navegacin del sitio de una pgina ..............................387
Eliminar ( ................................................................................................................................. 508
Eliminar colores con nombre ............................................................................................... 191
Eliminar colores no utilizados .............................................................................................. 191
Eliminar imgenes de la galera ..........................................................................................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 pginas de presentacin..................................................................................... 404
Eliminar pginas de tu documento...................................................................................... 85
Eliminar puntos........................................................................................................................160
Eliminar secciones de una galera.......................................................................................103
Eliminar seleccin/Restaurar atributos actuales (Esc) ...................................... 508, 517
Eliminar un ancla.................................................................................................................... 225
Eliminar un bisel .....................................................................................................................266
Eliminar un ClipView...............................................................................................................141
Eliminar un paso.....................................................................................................................403
Eliminar una galera del espacio de trabajo .................................................................... 104
Eliminar una lnea gua........................................................................................................... 132
Eliminar una sombra .............................................................................................................260
En el medio de una lnea: ......................................................................................................159
Enderezar horizonte ..............................................................................................................346
Enlace al archivo .................................................................................................................... 276
Enlace automtico de pginas............................................................................................386
Enlaces al paso siguiente/anterior................................................................................... 404
Enlaces de texto ..................................................................................................................... 235
Enlaces, botones y barras de navegacin...........................................................................53
Enlazar a una direccin web ............................................................................................... 274
Enlazar a una referencia....................................................................................................... 275
Enlazar a... ................................................................................................................................ 274
Envo de imgenes a otras aplicaciones de MAGIX instaladas..................................516
Envolturas .................................................................................................................................124
Equilibrar curvas......................................................................................................................164
Espaciado de botn ............................................................................................................... 385
Espaciado de cuadrcula y regla.........................................................................................492
Espaciado de lnea ................................................................................................................. 234
Espaciado de prrafos .......................................................................................................... 234
Esquemas de colores originales..........................................................................................186
Esquina con inglete / Esquina redonda............................................................................ 379
Estilo de prrafo y estilo de carcter ................................................................................ 228
Estilos basados en otros estilos .........................................................................................230
Estilos de men .......................................................................................................................391
Estilos de pincel.......................................................................................................................154
Estilos de texto ....................................................................................................................... 227
Explorar espacio web............................................................................................................ 324
Exportacin como documento Word ...............................................................................470
Exportacin como Flash.......................................................................................................470
Exportacin como formato Extended Metafile (EMF)..................................................471
Exportacin como mapa de bits .........................................................................................471
Exportacin como metarchivo de Windows (.wmf) .....................................................471
Exportacin de animaciones como AVI........................................................................... 441
Exportacin de archivos.......................................................................................................470
Exportacin de archivos Photoshop PSD......................................................................... 472
Exportacin de pginas web con directorios de compatibilidad..................................87
Exportacin de un archivo Flash ....................................................................................... 440
536
Exportacin de un documento web................................................................................... 471
Exportacin DPI ......................................................................................................................473
Exportacin rpida de HTML y formatos de grficos web.......................................... 471
Exportar (Ctrl+Shift+E) ....................................................................................................... 502
Exportar animacin............................................................................................................... 505
Exportar como AVI ............................................................................................................... 470
Exportar JPEG......................................................................................................................... 503
Exportar la animacin ........................................................................................................... 461
Exportar pgina web............................................................................................................. 504
Exportar Pgina web............................................................................................................. 504
Exportar PNG ......................................................................................................................... 503
Extender la lnea. .................................................................................................................... 158
Extender o reducir objetos................................................................................................... 120
Extender una lnea................................................................................................................... 151
Extraccin del JPEG original ................................................................................................337
Extrudir texto.......................................................................................................................... 380
Extrudir una forma .................................................................................................................376

Finalizar la lnea ...................................................................................................................... 158

Fluidez de la animacin (smoothness)............................................................................ 450
Fondos de pgina web ....................................................................................................39, 312
Fondos de plantilla y cambio de color de fondo............................................................. 314
Fondos fijos no desplazables............................................................................................... 314
Forma .........................................................................................................................................512
Formatos de exportacin .................................................................................................... 466
Formatos de importacin.................................................................................................... 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
Funcin de botones de ratn.............................................................................................. 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

Galera de diseos.................................................................................................................... 34
Galera de lneas ..................................................................................................................... 166
Galera de pginas y capas ........................................................................................... 85, 419
Galeras .............................................................................................................................. 95, 513
Generacin automtica del marcador de posicin........................................................ 410
GIF animados .......................................................................................................................... 414
Girar objetos...................................................................................................................... 30, 116

www.magix.es
 Index 537

Girar objetos en el modo de cambio de tamao .............................................................117

Girar utilizando el ratn .........................................................................................................115
Gradaciones de color de varios niveles............................................................................249
Grficos anclados .................................................................................................................. 222
Grficos de ejemplo ................................................................................................................ 64
Grficos incrustados ............................................................................................................. 225
Grupos ...............................................................................................................................50, 452
Grupos anclados ....................................................................................................................... 51
Grupos de foto........................................................................................................................ 329
Grupos de repeticin ............................................................................................................... 51
Grupos suaves (soft groups) ................................................................................................. 51
Grupos suaves (soft groups, en ingls) .................................................................. 134, 224
Grupos y capas........................................................................................................................134
Grupos y capas suaves.........................................................................................................425
Guardar..................................................................................................................................... 336
Guardar (barra de control estndar 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 configuracin de publicacin en el documento ........................................ 325
Guardar perfiles...................................................................................................................... 326
Guardar plantilla.....................................................................................................................502
Guardar todo...........................................................................................................................502
Guardar todo (en el men Archivo) ................................................................................... 86
Guardar tu trabajo. Creacin de una pgina 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 extrusin 3D ............................................................................................. 376
Herramienta de formas .......................................................................................................... 59
Herramienta de optimizacin ............................................................................................. 355
Herramienta de optimizacin de foto................................................................................ 271
Herramienta de rectngulo .................................................................................................... 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
Imgenes de alta resolucin................................................................................................327
Importacin de archivos...................................................................................................... 467
Importacin de clipart con color .......................................................................................... 39
Importacin de colores con nombre .................................................................................. 191
Importacin de foto RAW................................................................................................... 469
Importacin de fotos .............................................................................................................330
Importacin de fotos grandes............................................................................................... 42
Importacin de PDF.............................................................................................................. 468
Importacin de un archivo Photoshop PSD.................................................................... 467
Importacin de un documento Word .............................................................................. 469
Importacin desde una pgina web. ................................................................................ 469
Importacin e insercin de barras de navegacin........................................................ 394
Importacin y exportacin.................................................................................................. 463
Importante ...............................................................................................................................472
Importar (Ctrl+Shift+I) ........................................................................................................ 502
Importar desde la direccin 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
Inclusin de la pgina web en la galera de usuarios ....................................................324
Incrustacin de fuentes en el documento........................................................................237
Incrustacin de fuentes en un sitio web...........................................................................237
Indicaciones generales sobre la exportacin e importacin...................................... 463
Informacin de documento ......................................................................................... 22, 505
Informacin de presentacin avanzada .......................................................................... 406
Iniciar un nuevo documento.................................................................................................. 73
Insercin ................................................................................................................................... 410
Insercin con otra herramienta de autora web ............................................................. 441
Insercin de un objeto flash en MAGIX Web Designer 11 Premium. ...................... 440
Insercin manual de marcadores de posicin para widgets....................................... 417
Insercin manual de un mapa de Google ........................................................................ 417
Insertar smbolos como grficos........................................................................................203
Insertar smbolos en el texto...............................................................................................203
Insertar sombras detrs del objeto.....................................................................................381
Insertar texto de ejemplo ('Lorem Ipsum') ......................................................................213
Integracin de pelculas, Flash y otros widgets................................................................ 34
Interseccin de formas ..........................................................................................................176
Introduccin........................................................................16, 196, 327, 353, 365, 435, 501
Introducir caracteres especiales .........................................................................................212
Introducir pginas en tu documento................................................................................... 83

Justificacin o alineacin 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 funcin de rotacin ...........................................................................................................451
La funcin deshacer .............................................................................................................. 104
La funcin rehacer ..................................................................................................................105
La galera de frames de animacin....................................................................................442
La galera de mapa de bits................................................................................................... 333
La galera de pginas y capas ..............................................................................................419
La galera de rellenos ............................................................................................................250
La herramienta de bisel ........................................................................................................ 262
La herramienta de edicin de formas .......................................................................149, 155
La herramienta de fotos ................................................................................................ 42, 353
La herramienta de lneas 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 seleccin ........................................................................................ 29, 106
La herramienta de sombra................................................................................................... 257
La herramienta de texto ........................................................................................................197
La lnea de colores ..................................................................................................................179
La pgina actual ........................................................................................................................83
La pestaa de frames.............................................................................................................461
La tecla de restriccin............................................................................................................. 94
La ventana de MAGIX Web Designer 11 Premium ..........................................................75
Las capas actuales siempre estn visibles y pueden editarse. ..................................488
Las capas MouseOff y MouseOver..................................................................................... 66
Las galeras ............................................................................................................................... 521
Las herramientas..................................................................................................................... 521
Las herramientas de regin de foto y mscara .............................................................. 267
Limitacin de ngulo..............................................................................................................491
Lista con vietas..................................................................................................................... 225
Lista con vietas y numeradas .................................................................................... 47, 225
Lista con vietas y nmeros con grficos ....................................................................... 227
Lista numerada ....................................................................................................................... 226

Ll

Llevar atrs (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 lnea compatible con navegadores web antiguos ................................. 490
Los 6 tipos centrales de animacin...................................................................................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 presentacin ............................................................................. 402
Manipulacin de documentos ............................................................................................522
Manipulacin 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 seleccin ..................................................................................................... 109
Marco de seleccin................................................................................................................ 107
Marco de seleccin de objetos.......................................................................................... 490
Mrgenes y sangras ..............................................................................................................217
Ms informacin .................................................................................................................... 417
Ms Web Designer................................................................................................................ 519
Mscaras ..................................................................................................................................267
Mscaras suaves....................................................................................................................269
Membresa del sitio del widget .......................................................................................... 410
Men Archivo ......................................................................................................................... 501
Men Arreglo ......................................................................................................................... 509
Men Ayuda............................................................................................................................ 519
Men Compartir......................................................................................................................515
Men contextual de la lnea de colores............................................................................. 181
Men de fuente ...................................................................................................................... 199
Men Edicin ......................................................................................................................... 506
Men Herramientas ...............................................................................................................513
Men Insertar...........................................................................................................................512
Men Ventana .........................................................................................................................517
Mens con clic derecho ......................................................................................................... 27
Mens y shortcuts de teclado ............................................................................................ 501
Mezclar lneas curvas y rectas.............................................................................................157
Mezclar transparencias individuales y de grupo............................................................256
Minimizar ventanas mltiples .............................................................................................. 79
Mismo ancho para todos los botones ..............................................................................385
Modificacin de tamao con contenido alternativa .....................................................373
Modificacin de tamao de foto con contenido ........................................................... 270
Modificacin del tamao de una barra de smbolos.................................................... 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 impresin ............................................................................................ 480
Mostrar cuadrcula (#)......................................................................................................... 518
Mostrar guas (1 del teclado numrico) ........................................................................... 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 atrs (barra de control arreglo o Ctrl+Shift+D)........................509
Mover adelante (barra de control arreglo o Ctrl+Shift+F) .........................................509
Mover atrs (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 atrs .....................................................................115
Mover objetos seleccionados debajo o dentro ...............................................................108
Mover pginas dentro del documento ............................................................................... 84
Mover puntos de control - Herramienta de edicin de formas.................................160
Mover y fijar una galera .........................................................................................................97

Navegacin instantnea del men de fuente ..................................................................201

Navegar entre pginas............................................................................................................ 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 tamao teniendo en cuenta el contenido................... 373
Notas para la herramienta de foto .................................................................................... 362
Nueva pgina ........................................................................................................................... 512
Nueva ventana......................................................................................................................... 517
Nuevo (barra de control estndar o Ctrl+N)...................................................................501
Nuevo desde el catlogo de contenido .............................................................................501
Nmero de pgina .................................................................................................................. 512

Objetos ancla ............................................................................................................................ 48

Objetos de fotos..................................................................................................................... 328
Objetos de marcador de lugar............................................................................................ 293
Objetos en la pgina ................................................................................................................26
Objetos gua y lneas gua.....................................................................................................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
Opcin Guardar (en el men Archivo) .............................................................................. 86
Opciones (Ctrl+Shift+O) ...................................................................................................... 515
Opciones AVI .........................................................................................................................462
Opciones de exportacin web.............................................................................................281
542
Opciones de impresin........................................................................................................ 505
Pestaa Diseo de la impresin.................................................................................... 485
Pestaa Salida.................................................................................................................... 483
Opciones de la foto emergente ..........................................................................................286
Opciones de pgina .............................................................................................................. 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 mscara ................................................................................269
Optimizacin .......................................................................................................................... 485
Optimizacin de fotos y mapas de bits............................................................................347
Optimizacin de todas las imgenes ................................................................................ 514
Optimizar .................................................................................................................................370
Optimizar foto......................................................................................................................... 514
Optimizar imgenes ..............................................................................................................375
Orden de capas en documentos de pgina web .............................................................. 67
Orden de los objetos ............................................................................................................... 28
Orden de mltiples ventanas ................................................................................................ 79
Orientacin ............................................................................................................................. 384
Otros..........................................................................................................................................526
Otros aspectos interesantes ...............................................................................................387
Otros formatos de pelcula .................................................................................................. 413

Pginas........................................................................................................ 422, 482, 508, 526

Pginas de mltiples columnas ......................................................................................... 207
Pginas mltiples en el documento..................................................................................... 83
Pantalla completa (8 del teclado numrico)................................................................... 518
Para crear un grupo ................................................................................................................133
Para dibujar un segmento de lnea curvo:.........................................................................157
Para dibujar un segmento de lnea recto.......................................................................... 156
Pasos y capas ..........................................................................................................................396
Pegar (barra de control edicin o Ctrl+V)...................................................................... 506
Pelculas.................................................................................................................................... 519
Perfil...........................................................................................................................................255
Permisos de fuentes ..............................................................................................................238
Personalizacin de Web Designer.................................................................................... 487
Perspectivas..............................................................................................................................123
Pestaa Analytics...................................................................................................................296
Pestaa Copias de seguridad ............................................................................................. 496
Pestaa Cuadrcula y regla ................................................................................................. 492
Pestaa de opciones............................................................................................................. 479
Pestaa efectos y plug-ins.................................................................................................. 496
Pestaa Enlace ........................................................................................................................273
Pestaa General..................................................................................................................... 488
Pestaa Imagen ......................................................................................................................285
Pestaa Marcador de lugar................................................................................................. 290
Pestaa Opciones de paleta ............................................................................................... 476
Pestaa Pgina........................................................................................................................282
www.magix.es
 Index 543

Pestaa Pgina web .............................................................................................................. 279

Pestaa Publicar.....................................................................................................................294
Pestaa Ratn .........................................................................................................................493
Pestaa Tamao de mapa de bits .....................................................................................478
Pestaa Tamao de pgina .................................................................................................495
Pies de pgina y objetos que se amplan con la pgina. ...............................................146
Plug-ins de Photoshop (solo Web Designer de 32 bits) .............................................496
Polgonos 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 pginas web...................................................................................396
Presentaciones web ..............................................................................................................280
Primeros pasos ..........................................................................................................................23
Principios bsicos .................................................................................................................. 437
Profundidad de la extrusin ................................................................................................ 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
Publicacin al sitio web TaskPilot M .................................................................................318
Publicacin de documento web .........................................................................................504
Publicacin de tu pgina web .................................................................................................71
Publicacin de variantes ......................................................................................................302
Publicacin en un alojamiento web alternativo .............................................................320
Publicacin rpida (solo archivos modificados)............................................................ 325
Publicar online
carga de objetos a Facebook ........................................................................................... 515
carga de objetos a Flickr ................................................................................................... 515
espacio web libre y ms ...................................................................................................516
MAGIX lbum Online....................................................................................................... 515
publicar un sitio web .........................................................................................................516
Publicar pgina web .....................................................................................................318, 504

Radio para alineacin magntica.......................................................................................494

Recortar fotos ..........................................................................................................................341
Recortar fotos con una mscara ........................................................................................ 342
Recortar o cortar imgenes................................................................................................. 359
Recortar y cortar ....................................................................................................................448
Recuperacin de copias de seguridad ................................................................................. 91
Recuperacin tras cierres anormales del programa ....................................................... 90
Redefinicin de estilos de texto ......................................................................................... 229
Redimensionar grupos............................................................................................................119
Reemplazar colores ................................................................................................................189
Reemplazar con cdigo HTML........................................................................................... 292
Reemplazar con Flash............................................................................................................291
544
Reemplazar con un archivo grfico ...................................................................................292
Registrarme............................................................................................................................. 520
Regla de los tercios.................................................................................................................361
Reglas .......................................................................................................................... 77, 92, 216
Rehacer (barra de control estndar 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 elpticos....................................................................................................................245
Rellenos lineales .....................................................................................................................243
Rellenos lisos...........................................................................................................................243
Renombrar colores con nombre.......................................................................................... 191
Reordenar tems en la galera.............................................................................................. 102
Reordenar los colores de la lnea de color. ...................................................................... 180
Repetir en todas las pginas (Shift+Ctrl+Alt+R) ............................................................ 511
Res. de efecto en vivo por def.: .......................................................................................... 497
Res. efecto bloqueado por def.: ......................................................................................... 497
Resolucin de los efectos en vivo ......................................................................................367
Resolucin de transparencia .............................................................................................. 484
Restricciones de diseo de botones..................................................................................395
Restringir la lnea.................................................................................................................... 162
Resumen...................................................................................................................................473
Resumen de animacin de MAGIX Web Designer 11 Premium Flash .................... 459
Resumen de shortcuts del teclado numrico...................................................................132
Resumen del dilogo de exportacin GIF, PNG y JPEG............................................... 474
Retina (activado por defecto) ............................................................................................. 281
Revisar ortografa mientras se escribe ..............................................................................515
Revisiones .................................................................................................................................. 89
Rotacin................................................................................................................................... 450
Rotacin con ngulos exactos (utilizando la barra de informacin) ......................... 116

Saltos de columna................................................................................................................. 208

Saltos de pgina..................................................................................................................... 209
Seleccin de idioma................................................................................................................213
Seleccin de la ventana que se quiere visualizar ............................................................. 79
Seleccin de objetos con ayuda de la herramienta de sombras ................................ 261
Seleccin interna .................................................................................................................... 107
Seleccin y capas ................................................................................................................... 108
Seleccionar bajo...................................................................................................................... 107
Seleccionar forma de corte.................................................................................................. 140
Seleccionar tems ................................................................................................................... 102
Seleccionar mltiples 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
Smbolos de la fuente Font Awesome..............................................................................202
Sincronizacin 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 lnea ....................................................................................................................161
Subrayado de texto ............................................................................................................... 233
Subttulos de imagen ............................................................................................................288
Superndice y subndice ....................................................................................................... 234
Supersites ................................................................................................................................303
Sustitucin de archivos de imagen....................................................................................467
Sustitucin de los rellenos de mapa de bits....................................................................246
Sustitucin de mltiples fotos .............................................................................................. 42
Sustitucin de mltiples fotos en simultneo ................................................................. 331
Sustituir fotos........................................................................................................................... 331

Tab..............................................................................................................................................109
Tabulaciones ............................................................................................................................218
Tabulaciones personalizadas...............................................................................................218
Tabulaciones, mrgenes y sangras ...................................................................................216
Tamao de foto inicial .......................................................................................................... 332
Tamao de fuente.................................................................................................................... 46
Tamao de pgina ................................................................................................................... 48
Terminologa ............................................................................................................................197
Texto ................................................................................................................................. 44, 472
Texto alrededor de objetos .................................................................................................220
Texto dentro de grupos para pginas 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 tamao 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 gradacin de varios niveles..............................................................254
Transparencia en un grupo..................................................................................................452
Trayectoria invertida ..............................................................................................................155
Tu primera animacin .......................................................................................................... 438
Tus propios iconos en las pestaas de los navegadores (favicon)............................. 56

Ubicacin de la copia de seguridad..................................................................................... 89

Un ejemplo.............................................................................................................................. 248
Una pgina web en 6 pasos.................................................................................................... 17
Unir dos lneas .........................................................................................................................152
Unir lneas ................................................................................................................................ 164
URL en Flash ........................................................................................................................... 456
Usar de barras de navegacin de plantillas.....................................................................383
Usar fotos como fondo. .........................................................................................................315
Usar fuentes en tu pgina web .............................................................................................46
Usar la pipeta para escoger colores .................................................................................. 184
Uso de la herramienta de zoom ...........................................................................................80
Uso de las galeras .................................................................................................................. 101
Uso de mscaras con la funcin..........................................................................................371
Uso de mscaras o regiones ...............................................................................................357
Uso de plantillas, cliparts y widgets .................................................................................... 33
Uso del control de curva....................................................................................................... 162
Utilizacin de animaciones web......................................................................................... 431
Utilizacin de fotos como relleno ......................................................................................332
Utilizacin de la herramienta de fotos..............................................................................353
Utilizacin de los campos de texto de la barra de informacin ................................. 160
Utilizar colores habituales para enlaces de sitios web.................................................277
Utilizar mscaras....................................................................................................................526

Variantes de pgina web...................................................................................................... 514

Variantes mltiples................................................................................................................298
Variantes y barras de navegacin...................................................................................... 301
Variantes y fondos de diseo web adaptativo ................................................................316
Variantes y objetos repetidos ............................................................................................. 301
Velocidad de la animacin.................................................................................................. 449
Ventajas de la herramienta de fotos .................................................................................353
Ver pestaas de los documentos....................................................................................... 518
Ver una foto ampliada en su tamao completo.............................................................347
Ver una galera.......................................................................................................................... 96
Vista multipgina ....................................................................................................................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 pgina web (Shift + F5)......................................................................503

Vista previa de tamao de fuente en tiempo real .........................................................200
Vista previa de tu pgina 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
Visualizacin del contenido de los pasos........................................................................402
Visualizacin del punto de anclaje.................................................................................... 224
Visualizar pgina web...........................................................................................................503
Voltear objetos ........................................................................................................................120

Web Designer y HTML5......................................................................................................463

Web Designer y las barras de navegacin...................................................................... 382
Widgets de la galera de diseos...................................................................................... 409
Widgets de otros sitios de widgets....................................................................................415
Widgets de sitios web ......................................................................................................... 408
Widgets y marcadores de posicin - todo automtico .............................................. 408

Zoom.......................................................................................................................................... 521
Zoom 1:1 ................................................................................................................................... 355
Zoom de foto teniendo en cuenta el contenido............................................................. 372
Zoom y desplazamiento de la pgina..................................................................................25