Manual MAGIX Web Designer 6 en español

2 Compra y activación del MAGIX Web Designer 6

Indice

Compra y activación del MAGIX Web Designer 6 8

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

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

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

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

Trabajar con documentos 64 Inicio del MAGIX Web Designer 6 64 Iniciar un nuevo documento 64 Abrir un documento existente 64 La ventana MAGIX Web Designer 6 66 Abrir una segunda ventana 69 Cambiar el valor de zoom 70 Desplazar el documento dentro de la ventana 72 Cambiar el tamaño de página 72


Páginas múltiples en el documento 73 Guardar el documento 75 Directorios de compatibilidad 76 Cerrar el documento 77 Copias de seguridad automáticas 78 Cuadrícula de pantalla 80 Reglas 81 Calidad de imagen 83 Galerías 83 Deshacer y rehacer 87

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

La herramienta de edición de formas 118 Para dibujar un segmento de línea recto 119 Mezclar líneas curvas y rectas 119 Para dibujar un segmento de línea curvo: 119 Extender la línea. 120 Finalizar la línea 120 Añadir un nuevo punto de control 120 Seleccionar múltiples puntos de control 121 Eliminar puntos 122 Mover puntos de control - Herramienta de edición de formas 122 Suavizar una línea 123 Restringir la línea 124 Cambiar curvas 124


Convertir una línea recta en una curva (y viceversa) 125 Unir líneas 126 Separar una forma 127 Cerrar una forma 127

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

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

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


Incrustación de fuentes 175 Compatibilidad entre el navegador y el texto 175

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

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

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

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

Trabajar con fotos 219 Introducción 219 Objetos de fotos 220 Importación de fotos 220 Resolución de foto 223 Copias de memoria cero 223 La galería de mapa de bits 224


Archivos JPEG integrados 226 Sin pérdidas vs. Con pérdidas (lossless vs. lossy) 227 Mezcla y combinación de fotos 228 Calidad de visualización de fotos 229 Guardar y exportar fotos 229 Atributos de la edición de fotos 231 Editar el contorno de las fotos 232 Recortar fotos 232 Cortar objetos de las fotos 233 Fotos de pantalla (screenshots) 234 Colorear fotos 234 Cambiar el tamaño, rotar y reposicionar la foto dentro de su propio marco 235 Enderezar horizonte 236 Ver una foto ampliada en su tamaño completo 237 Darle el tamaño completo a una foto 237 Optimizar fotos y mapas de bits 238 Documentos fotográficos 240 Edición de archivos de fotos 241

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

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

Widgets de sitios web 268 Widgets y marcadores de posición: todo automático 268 Widgets de la galería de diseños 269 Agregado de archivos de películas y animaciones 271


Widgets de otros sitios de widgets 272 Cambio de tamaño de widgets 273 Inserción manual de marcadores de posición 274 Más información 274

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

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

Imprimiendo 310 Mostrar bordes de impresión 310 Seleccionar y configurar una impresora 310 El diálogo de impresión 311 Opciones de impresión: pestaña Salida 313 Opciones de impresión: pestaña "Diseño de la impresión" 315


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

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

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

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

Index 363

Compra y activación del MAGIX Web Designer 6

Cuando inicias la versión de prueba descargada de MAGIX Web Designer 6, la pantalla de inicio te presentará tres opciones. Comprueba la opción que precises y se te explicará con más instrucciones.


Introducir el número de serie Selecciona esta opción si ya has encargado una copia de Web Designer e introduce el número que se te ha proporcionado en el e-mail para confirmar tu compra. Introduce tu dirección de e-mail para registrar tu copia (si ya la has registrado, debe ignorarse). Luego haz clic en Registrar y activar online.

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

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

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

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

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

Los productos de Xara ofrecen una muy buena relación calidad-precio y además ofrecemos descuentos en todos nuestros productos de gráfico para instituciones de educación. Más detalles en nuestra página web.

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

¿Cuáles son las novedades en MAGIX Web

Designer 6?

General • Aspecto de la aplicación completamente rediseñado (diseño y símbolos) • Herramientas y botones desplegables que presentan una interfaz de usuario más

simple, pero con acceso directo a una mayor cantidad de funciones comunes. • Galería de "Páginas y capas" mejorada que suministra una forma rápida de visualizar

y reordenar páginas y capas en cada página, por ejemplo, arrastrar y soltar para ordenar las páginas. El modo Solo permite aislar una capa.

• Galería de diseños con actualización automática:la galería de diseños incluye nuevas secciones y contenido "online" que Xara puede actualizar de forma remota.

• Copia de seguridad automática de todos los documentos abiertos. Copia de seguridad automática y restauración de documentos abiertos al cerrar la aplicación. Así puedes cerrar directamente Web Designer con documentos abiertos y, al iniciar Web Designer la próxima vez, todos los documentos abiertos se restaurarán.

Autoría web • Galería de plantillas ampliada con nuevos diseños. Los diseños existentes se han

actualizado. Un nuevo diseño "completo de página web" se suministra para todos los conjuntos de plantillas, lo que consiste en un sitio web preparado de ocho páginas enlazadas.

• Arrastrar y soltar widgets desde la galería de diseños y la nueva biblioteca de widgets. Las nuevas secciones de la galería de diseños suministran una gran variedad de "widgets" que pueden arrastrarse y soltarse en tu sitio web. Los widgets suministran add-ons interactivos que abarcan desde reproductores de películas hasta características de comercio electrónico (como un botón "Comprar" para vender artículos o servicios de tu página web), formularios, mapas y mucho más.

• Manejo optimizado de barras de navegación (muy similar a la funcionalidad de Xara MenuMaker).

- Un nuevo objeto de nivel superior de la barra de navegación puede arrastrarse como un objeto independiente.

- Escoge cualquier diseño de botón y conviértelo rápidamente en una barra de navegación horizontal o vertical.

- Capacidad para crear una barra de navegación con botones vinculados a todas las páginas de tu sitio web. La barra de navegación se actualiza cuando agregas/quitas páginas.

- Resaltado automático de los botones de las barras de navegación de la "página actual".

- Submenús DHTML con numerosas animaciones y efectos de transparencia

• Inserción directa de snippets HTML con creación automática de vista previa/marcador de posición. Muchos add-ons y widgets de páginas web suministran un snippet de HTML para incluir en tu página. El Web Designer ahora acepta que pegues este snippet, lo detecta como un código HTML y crea automáticamente un marcador de posición en la página, con una vista previa del snippet. Copia el código HTML en el portapapeles y pégalo en Web Designer. Tras unos segundos aparecerá un objeto de marcador de posición con una imagen de vista previa, que puedes posicionar en cualquier lugar de la página web.

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

• Carga sencilla de vídeo MP4 y reproductor de vídeo incluido. Arrastra y suelta un archivo de vídeo MP4 hasta la página y aparecerá un reproductor de vídeo flash para reproducir el archivo que se cargará automáticamente en tu servidor web.

• Nuevas opciones de "Vista previa de página actual" rápida así como vista previa de todo el documento: el ícono de vista previa en la barra superior se despliega con dos opciones, vista previa de la página actual o vista previa de todo el sitio web.

• Capacidad para admitir páginas de esquinas redondeadas con sombras proyectadas. Si admites el coloreado de la página de esta manera (al arrastrar un color hasta el tablero de dibujo), se activará una nueva capa de fondo de página en la galería de Páginas y capas, en donde podrás ajustar la sombra proyectada de la página rectangular con la herramienta de sombra para convertirla en un rectángulo redondeado (con la herramienta de rectángulos).

Foto • Ventanas emergentes de fotos en miniatura mejoradas y más elegantes. Los

efectos animados de fotos emergentes (al hacer clic sobre una foto se abre una ventana emergente con una versión ampliada) se ha mejorado para brindar efectos de animación con calidad mejorada, una sombra proyectada opcional, títulos, capturas de pantalla y oscurecimiento (la página debajo de la ventana emergente puede oscurecerse).

• Capacidad para crear un pase de fotos y Siguiente/Anterior en una galería o grupo de vistas en miniatura. Si cuentas con varias fotos en miniatura con el efecto de ventana emergente en la página, ahora puedes crear con ellas un pase de fotos con controles Siguiente/Anterior/Reproducir/Pausa y un guión cinematográfico opcional con las miniaturas en la parte inferior de la ventana.

• Nueva función "Optimizar todos los JPEG". Esto reducirá el tamaño y resolución de todas las fotos de un documento para ahorrar memoria y producir archivos .web o .xar más pequeños.

• Llenado automático de galerías. Arrastra y suelta varias fotos en simultáneo para poblar una página de galería. Si arrastras y sueltas una selección de archivos de imagen desde tu explorador de archivos hasta una página de vistas en miniaturas, como cualquier diseño de galería de fotos de las plantillas (cada tema tiene un diseño de "galería de fotos"), esto puebla la galería.

• Reducción automática de la resolución de importación.

Color • Mejor compatibilidad con páginas y fondo, por lo que puede colorearse el tablero

de dibujo de forma independiente a la página. Si arrastras un color hasta el área del tablero de dibujo (fuera del área visible de la página), esto te permite crear fondos independientes para la página y sus alrededores. Para la página y el área del tablero de dibujo, si pulsas Ctrl y sueltas un mapa de bits en la página o en el tablero de dibujo, puedes crear un fondo de mapa de bits segmentado.

• Arrastrar y soltar esquemas de colores y esquemas de colores creados previamente en la galería de diseños para todos los temas. En vez de editar cada color original con nombre, ahora puedes cambiar todo el esquema de tu página. Puedes probarlo con el tema beta suministrado en la galería de diseños. Abre cualquier página del tema o el diseño "sitio web" que es un sitio web completo con ocho páginas. Al final de los diseños temáticos hay una selección de los esquemas de color llamados "Esquema de color 1", etc. Simplemente arrastra y suelta estos esquemas hasta la página web para cambiar todos los colores originales.

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

Publicación • Recordar detalles del FTP con el documento, incluyendo la contraseña. El

diálogo de propiedades de publicación ahora ofrece la posibilidad de guardar los detalles FTP con el documento. Esto es genial si cuentas con diversos sitios web publicados en diferentes ubicaciones o con diferentes dominios. Además, puedes escoger guardar la contraseña FTP en el archivo. A pesar de que esta es una opción potencialmente peligrosa (cualquiera que acceda al archivo .web puede actualizar tu página web), también es una herramienta muy útil para los diseñadores web con clientes, porque ofrece la opción de enviar al cliente el archivo .web, instruirle que actualice el texto y luego pulse el botón Publicar para actualizar su página web. No es necesario que el cliente tenga conocimiento de las complejidades de la configuración FTP.

• Perfiles FTP con nombre, incluyendo perfiles de terceros. Puedes guardar tu configuración de FTP en un perfil con nombre. Esto es útil si trabajas con múltiples páginas web con diferentes dominios. La lista de perfiles puede contener perfiles de terceros como, por ejemplo, el alojamiento gratis de MAGIX.

• Oferta de alojamiento web gratis. El Web Designer ofrece el alojamiento de páginas web gratis de MAGIX. De esta forma, podrás publicar tu página web como parte del MAGIX Mundo Online.

• Formas fáciles de agregar enlaces en archivos externos (y cargarlos) como archivos PDF y Word, etc.

• Publicación incremental. Cuando publicas tu página web, sólo se cargarán aquellos archivos que se hayan modificado. Esto puede representar una mejora en la velocidad y productividad de sitios web medianos a grandes. También significa que los adjuntos incluidos (p. ej. archivos PDF, vídeos, etc.) se cargarán solamente una vez.

• Calidad HTML mejorada, uso optimizado de CSS, divs eliminados, opciones para párrafos "HTML puros". Para usuarios avanzados que quieren "bloques HTML puros", ahora pueden ignorar el posicionamiento individual de líneas y hacer que cada párrafo de texto se emita como un bloque de texto <p> en HTML. Para ello, aplica el nombre "HTMLBlockText" al bloque de texto. Ten en cuenta que los saltos de línea no necesariamente serán los mismos que en el Web Designer (y pueden variar entre los exploradores), y que características como hacer fluir el texto alrededor de los gráficos no funcionarán.

Texto • Compatibilidad con texto justificado. Hemos añadido la compatibilidad con el texto

completamente justificado y esto funciona aún con la característica de texto alrededor del gráfico.

• Herramienta de texto mejorada para incluir viñetas, listas numeradas, sangrías. • Gráficos anclados. Los fotos y los gráficos pueden ahora flotar con el texto.

Introducción 13

Introducción

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

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

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

¿Por qué Web Designer es tan especial?

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

Web Designer puede hacer cosas que se consideran casi imposibles con otros software de autoría web, como hacer fluir el texto alrededor de fotos o formas irregulares. Incluye herramientas avanzadas de vectores gráficos para que puedas dibujar lo que desees: desde formas simples hasta logos y gráficos complejos. También cuenta con optimización automática de gráficos (no sólo produce imágenes de resolución optimizada, sino que

14 Introducción

también detecta los elementos que se repiten en toda la página web, lo que produce páginas más rápidas y más optimizadas).

Es compatible con capas CSS con características avanzadas, como transparencia (incluyendo transparencia con gradación), efectos mouse-over y más. Crea páginas web HTML totalmente compatibles con los exploradores, las plataformas y XHTML.

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

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

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

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

Una página web en 6 pasos

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

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

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

Deshacer

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

Ayuda 15

Ayuda

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

• Selecciona Temas de ayuda en el menú de AYUDA para abrir la ayuda de Photo & Graphic Designer (que contiene cientos de páginas de información).

• Barra de estado: intenta leer el texto de la barra de estado en el extremo inferior de la ventana principal de Photo & Graphic Designer. Siempre ofrece una descripción de las acciones actuales y de sus efectos (incluso durante los arrastres), lo que resulta ideal para aprender a usar las herramientas de Photo & Graphic Designer. También cuando colocas el cursor sobre los botones y los controles, el programa te informa sobre lo que hacen. Ve a la barra de estado para más detalles.

• Consejos para herramientas (tooltips): si colocas el cursor del ratón sobre un botón o control por un momento, aparecerá un mensaje informándote de su función.

• Menús: si deseas saber cuál es la función de un menú, selecciónalo y pulsa "F1". • Cajas de diálogo: si quieres saber lo que hace una caja de diálogo o cómo usarla, haz

clic en "Ayuda". • Películas: hay películas de demostración que te ayudarán a sacar el mayor partido de

MAGIX Web Designer 6. Escoge PELÍCULAS del menú de AYUDA para ver una lista de las películas disponibles.

• Foros TalkGraphics: puedes compartir consejos e ideas, enviar preguntas u ofrecer soluciones a otros usuarios de Xara Xtreme en los foros http://www.talkgraphics.com (que también incluye otros foros relacionados con gráficos).

• Xara Xone: visita Xara Xone (http://www.xaraxone.com/) para obtener excelentes fuentes de ayuda, incluyendo más de diez años de tutoriales de Photo & Graphic Designer, trucos y consejos y shareware de Xara.

• Newsletter "The Outsider": suscríbete a nuestra newsletter mensual "The Outsider" (con tutoriales mensuales y consejos, ofertas, arte inspiracional y mucho más).

Información de documento

"ARCHIVO > INFORMACIÓN DEL DOCUMENTO "muestra información sobre el documento seleccionado como el tamaño o cualquier fuente utilizados. Esta es una buena forma de ver si te falta una fuente necesaria que pudiera prevenir que el documento se visualice correctamente.

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

Acerca de Web Designer

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

16 Primeros pasos

Primeros pasos

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

Diseño del programa

Barra de información: cambia con cada herramienta

Zoom

Visualizar página web

Galería de páginas y capas

Galería de diseños

Herramienta de selección

Herramienta de texto

Herramienta de sombra

Herramienta de edición de fotos

Línea de color

Primeros pasos 17

Estos son cuatro botones que se encuentran en la barra superior y se relacionan con las funciones en la página web. Tres de estas opciones tienen barras desplegables que se muestran cuando colocas el cursor del ratón sobre ellas y te ofrecen más funciones.

Vista previa

Enlace

Opciones de página web

Exportar

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

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

Zoom y desplazamiento de la página

Estas funciones comunes están hechas de manera sencilla:

• Para ampliar o alejar con el zoom, mantiene Ctrl pulsado y utiliza la rueda del ratón • Para mover la página, pulsa la rueda del ratón y mueve (sí, también es un botón) • Para desplazar utiliza la rueda del ratón (o las barras de desplazamiento)

18 Primeros pasos

Todas tus páginas en tu sitio web están presentadas una tras otras, como en un programa de edición de textos. Esto hace que sea muy útil para ver toda tu página web, especialmente al alejarse con el zoom. Puedes arrastrar y soltar elementos entre páginas de esta manera. Cuando haces cambios de color de tema en todo el sitio, puede verse como los cambios afectan a todas las páginas.

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

El área del tablero de dibujo es normalmente un lugar donde guardar temporalmente gráficos, fotos u otros objetos con los que estés trabajando.

Barras desplegables

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

Si seleccionas una herramienta modal de una barra desplegable, esta herramienta se convierte en la herramienta principal para ese grupo. A partir de ese momento verás el icono correspondiente en la barra de herramientas principal.

También hay algunas barras desplegables en la barra de herramientas de la parte superior de la ventana. Estas se utilizan para agrupar operaciones relacionadas en un solo icono. Esto las hace accesibles y no ocupan demasiado espacio en la barra.

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

Objetos en la página

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

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

Primeros pasos 19

• Texto: al usar la herramienta de texto puedes crear todo tipo de títulos y columnas de texto e incluso bloques de texto que fluyen de un bloque a otro. También puedes crear listas con viñetas y numeradas. La herramienta de texto de la barra de información proporciona controles de fuente, tamaño y espaciado de línea y más. Puedes redimensionar el texto usando la herramienta de selección o escogiendo un punto alternativo o tamaños de píxeles. También puedes girar el texto sorprendentemente desde cualquier ángulo, y usar la característica automática para hacer fluir el texto alrededor de objetos (p. ej. fotos) en la página.

• Gráficos: cualquier tipo de logo, título y la mayoría de los botones que aparecen en tu página web son gráficos. Web Designer es un programa de gráficos vectoriales, lo que significa que puedes corregir la forma, girar y redimensionar tus objetos gráficos sin pérdida de calidad (a diferencia de herramientas de edición y retoque fotográfico como Photoshop). Y aunque no hay ningún estándar de gráficos vectoriales para páginas web (para web todos los gráficos tienen que ser formatos JPG, GIF o PNG) Web Designer crea automáticamente el formato y resolución adecuados. Por ejemplo, si quieres crear un panel coloreado para colocar detrás tu texto, lo harías dibujando un rectángulo o el objeto de rectángulo con esquinas redondeadas en la página, y colocándolo detrás del texto. Cuando guardas tu página web, se convierte automáticamente en una imagen gráfica PNG con la resolución correcta.

• Fotos: hay pocas páginas web que no contienen algún tipo de foto. MAGIX Web Designer 6 tiene una gran gama de herramientas de retoque de fotografías. Puedes arrastrar y soltar fotos directamente desde tu cámara o desde la ventana del explorador de archivos, girarlas, optimizarlas, recortarlas, y Web Designer genera automáticamente la resolución de imagen JPG adecuada. Sustituir fotos existentes en plantillas es tan fácil como arrastrar y soltar, y puedes cambiar sencillamente el tamaño y el ángulo de las fotos "dentro" de su marco. Puedes crear fácilmente fotos en miniatura sobre las que puedes hacer clic para que se abra una versión ampliada y puedes incluir opcionalmente controles de galería que permiten a los visitantes navegar por tus fotos o ver un pase de fotos automático.

• Marcadores de posición: estos son objetos gráficos en la página que representan el tamaño y la posición de "widgets" dinámicos como animaciones flash, películas o formas. Al exportar tu sitio, el gráfico del marcador de posición se reemplaza con el código requerido para hacer que el widget funcione y el widget aparece en la misma posición en tu página. Consulta el capítulo de "Widgets de página web" para más detalles.

Diseño web basado en objetos

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

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

La HERRAMIENTA DE SELECCIÓN puede ser utilizada para seleccionar cualquier objeto en la página y para mover (simplemente arrástralo), redimensionar o rotar los objetos.

Puedes ajustar el orden de las capas (es decir, si un objeto aparece al frente o detrás de otro/s en la página), la utilización de las opciones del menú Arreglo. Con la herramienta

20 Primeros pasos

de selección puedes redimensionar objetos estirándolos desde las esquinas. Puedes girar cualquier objeto arrastrando desde dentro de los controles deslizantes de las esquinas. Y aunque las páginas web no admiten textos rotados, Web Designer sabe cómo crear automáticamente la imagen gráfica apropiada para que la página se vea siempre bien.

Para agregar texto a tu página, selecciona la HERRAMIENTA DE TEXTO y haz clic en cualquier lugar de la página y empieza a escribir el texto.

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

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

Orden de los objetos

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

ARREGLO.

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

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

La herramienta de selección

Esta herramienta es de uso general y te permite seleccionar, mover, redimensionar y girar todos los objetos en tu página web.

Primeros pasos 21

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

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

Desplazar objetos

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

Girar objetos

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

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

Barra de información

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

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

22 Primeros pasos

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

Copiar objetos

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

Vista previa de tu página web

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

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

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

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

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

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

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

Frecuentemente puedes utilizar el clic derecho sobre el archivo y seleccionar "Abrir con ..." , o simplemente arrastrar y soltar el archivo en una ventana de navegador abierta. Una vez exportado, cada vez que pulses el botón de vista previa, la exportación se actualizará

Primeros pasos 23

también, y entonces sólo será necesario pulsar el botón de Actualizar en tu navegador (o presionar F5).

Utilización de plantillas, cliparts y widgets

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

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

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

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

Agregar nuevas páginas a tu página web

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

Tus gráficos importados son simplemente otro objeto en su página y puede reposicionarse, cambiarse su tamaño y girarse utilizando la herramienta de selección.

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

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

Puedes añadir una nueva página en blanco seleccionando el menú EDITAR > PÁGINAS >

NUEVA PÁGINA.

24 Primeros pasos

Puedes eliminar las páginas utilizando el mismo menú de páginas.

Clipart flash

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

Widgets

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

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

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

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

Colores de la página web

Todas las plantillas utilizan un pequeño conjunto de colores originales y varias sombras de estos colores originales. La forma más fácil de cambiar el color de tu sitio es utilizar uno de los esquemas de color alternativos que se suministran con cada tema web en la GALERÍA

DE DISEÑOS. Simplemente arrastra un esquema hasta la página para cambiar el color de todo el sitio o haz doble clic en él.

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

Primeros pasos 25

Contorno actual y color de relleno

Editor de color

Pipeta para seleccionar colores

Patch "Sin color".

Colores "originales" con nombre y colores vinculado

Paleta fija de colores estándar

Barra de estado . Muestra lo que se ha seleccionado y brinda consejos

Mantén el cursor sobre un color para ver su nombre

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

Cuando edites el color puedes arrastrar la pipeta para escoger colores de la pantalla, incluso de otras ventanas abiertas

Selecciona el color a editar: Color de relleno/color de línea del objeto seleccionado o cualquier color con nombre (original)

Haz clic en la etiqueta para crear un color con nombre

Haz clic para mostrar los controles de color ampliados

Color anterior

Color actual

Arrastra hacia aquí para seleccionar cualquier tonalidad del tono seleccionado

Arrastra hacia aquí para seleccionar cualquier tono

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

26 Primeros pasos

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

Colorear formas

Puedes rellenar con un color cualquier forma dibujada, arrastra el color desde la LÍNEA DE

COLOR y suéltalo en la forma o selecciona primero el objeto y luego haciendo clic en la línea de colores y escogiendo "ESTABLECER COLOR DE RELLENO".

De forma alternativa haz clic en el pequeño icono de editor de color (o presiona Ctrl+E) para visualizar el editor de color donde puedes ajustar cualquier color que desees.

Puedes asignar un relleno de color con gradación a un objeto dibujado utilizando la herramienta de relleno (en la página 176).

Importación de Clipart con color

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

Colorear fotos

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

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

Color del fondo de página

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

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

Primeros pasos 27

Color de fondo

Color de panel

Colores originales 1 y 2

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

Si arrastras un color desde la línea de colores a la página y lo sueltas, el fondo de la página adoptará ese color. En el navegador web este color de fondo se muestra en todo el área del fondo de la ventana.

28 Primeros pasos

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

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

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

Capa de fondo de página

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

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

Ahora, si haces clic en el fondo de la página, verás que se selecciona un rectángulo (mira la barra de estado). Este rectángulo cubre toda la página y se utiliza para configurar su color. Puedes editar de forma limitada este rectángulo, insertarle un relleno con gradación

Primeros pasos 29

con la HERRAMIENTA DE RELLENO o redondear sus esquinas con la herramienta de rectángulos.

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

Desplazamiento de la parte superior de la página

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

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

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

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

Cambiar la posición horizontal del origen no tiene efecto en la posición horizontal de tu página, por lo que no deberías modificarla.

Importación de fotos grandes

Al importar fotos grandes, MAGIX Web Designer 6 te pregunta si deseas importar una versión reducida de tus fotos. Si tu documento va a incluir varias fotos, particularmente un documento de página web, es importante que escojas esta opción de tamaño reducido. De lo contrario, si contiene varias fotos, el tamaño del archivo de diseño será mucho más grande de lo que debería ser (porque contiene una copia de cada una de tus fotos) y es posible de que no dispongas de memoria suficiente en tu ordenador para cargar, editar y exportar tu página web. Para un documento web, la resolución de las fotos en su versión reducida es más que suficiente para ofrecer unos resultados de calidad en tu página web, por lo que raramente es necesario importar imágenes de cámaras digitales con su resolución completa.

30 Primeros pasos

Fondos avanzados

Los navegadores web no permiten un fondo de color con gradación sobre la ventana completa visible (por ejemplo como un fondo HTM real), pero sí permiten fondos repetidos o fondos como mosaicos o mapas de bits. Por lo tanto puedes utilizar esto para crear un fondo con gradación que llene la ventana completa creando un mapa de bits con forma de mosaico (que se repite) a través de la página.

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

Para crear este efecto, sigue estos pasos;

1. Dibuja un rectángulo. Tiene que tener el mismo tamaño que cualquier usuario utilizaría para hacer su ventana del navegador, para que no se repita verticalmente. Un valor de 1000 píxeles o más es recomendable, ya que es mucho más grande que tu página. Puede que necesites alejar el zoom para dibujar una que sea lo suficientemente grande. Debería ser muy reducida.

2. Asegúrate de que tu rectángulo no tenga contorno: haz clic en la herramienta de selección y ajusta para que no tenga contorno. Haz clic en el parche "sin color" en la línea de colores (o selecciona "ninguno" en el ancho de línea del menú desplegable en la barra de botones superior).

3. Asegúrate de que el rectángulo contenga algunos píxeles enteros de ancho y luego asegúrate de que esté situado exactamente sobre píxeles enteros: en la herramienta de selección selecciona el rectángulo, edita el valor de ancho (W), presiona Aceptar y luego edita las posiciones X e Y para que sean números enteros.

4. Con la herramienta de relleno (en la página 176), aplica el relleno de color con gradación como desees: simplemente arrastra hacia el rectángulo. Asegúrate de que la gradación se aplique de arriba a abajo ajustando la flecha de relleno si fuera necesario.

Primeros pasos 31

5. Exporta el rectángulo como imagen PNG. Haz clic en el símbolo "Exportar como PNG" . Una vez exportado, arrástralo nuevamente hasta la página desde tu Explorador de archivos.

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

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

Crear tus propios colores con nombre

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


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

Formas vinculadas

Puedes crear colores que son sombras más claras u oscuras de otro color de modo que cuando alteras el color "principal", todas las sombras más claras u oscuras cambian para

32 Primeros pasos

combinar con el nuevo tono. Por ejemplo una sombra de color con gradación en un botón, como este:

Este es un rectángulo redondeado simple con un relleno de color con gradación creado con la herramienta de relleno. En la herramienta de relleno puedes hacer clic en el final de la flecha para ajustar el color.

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

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

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

Ahora puedes seleccionar cualquier sombra clara u oscura del color principal. La cruz marca el color principal.

Selecciona la sombra de este menú desplegable y luego el color principal.

Primeros pasos 33

También puedes crear una sombra vinculada que aparezca en la línea de colores (así puedes aplicarla fácilmente a otros objetos). Al crear un nuevo color con nombre puedes escoger convertirlo en una "Sombra de otro color" vinculada.

Fotos

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

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

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

Cuando sustituyes una foto existente, la herramienta de relleno se selecciona y se muestran dos flechas de rellenos en ángulo recto sobre la foto.

34 Primeros pasos

Esto es así porque la foto en realidad es un relleno dentro de una forma. Puedes tirar de la imagen para cambiar su posición o estirar de las puntas de las flechas de relleno para cambiar el tamaño y girar la imagen dentro del contorno de la forma.

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

Sustitución de múltiples fotos

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

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

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

La herramienta de fotos

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

Primeros pasos 35

Para cortar una foto, simplemente arrastra a lo largo de la foto mientras te encuentras en la HERRAMIENTA DE OPTIMIZACIÓN DE FOTOS. Puedes ajustar los bordes de corte estirando de los controles deslizantes de corte alrededor del exterior de la foto.

O utiliza la HERRAMIENTA DE CORTE para más control sobre los recortes.

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

Fotos en miniatura con pop-up

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

Selecciona la pequeña miniatura de foto y selecciona la opción "Foto emergente" en la pestaña ENLACE del diálogo PROPIEDADES WEB (haz clic en el BOTÓN ENLACE en la BARRA DE HERRAMIENTAS DE WEB).

36 Primeros pasos

Haz clic en el botón CONFIGURACIÓN junto a la opción de foto emergente para cambiar a la PESTAÑA IMAGEN del DIÁLOGO DE PROPIEDADES WEB.

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

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

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

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

Si no estás seguro si necesitas la foto de resolución completa, puedes importar la foto original y luego optimizarla. Para optimizar una foto, haz clic derecho sobre ella y escoge la

Primeros pasos 37

opción de optimización en el menú contextual. O puedes optimizar todas las fotos JPEG de un documento en simultáneo, mediante HERRAMIENTAS > OPTIMIZAR TODOS LOS JPEG.

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

Si quieres cambiar el tamaño de una foto o de cualquier objeto a un valor específico, puedes introducir el tamaño en los campos de altura y ancho de la barra de información de la herramienta de Selección.

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

Texto

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

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

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

38 Primeros pasos

Las tres secciones del menú de fuentes

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

Tamaño de fuente

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

Fuentes compatibles con la web

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

Primeros pasos 39

del menú de fuentes. Si intentas guardar una página web utilizando fuentes compatibles con la web, se te mostrará una advertencia.

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

Crear nuevos objetos de texto nuevos

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

Texto girado

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

Lista con viñetas y numeradas

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

Sombras suaves, texto relleno de color, texto transparente

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

En todos estos casos, Web Designer convertirá el texto automáticamente en un gráfico en tu página web exportada.

Contornear texto alrededor de objetos

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

Muchos de los objetos, como fotos, paneles laterales, botones y encabezados utilizados en plantillas desde la galería de diseños son contorneados automáticamente, es decir, el texto siempre fluye alrededor de estos objetos cuando los mueves por el documento. El contorneo de objetos solo se aplica al texto que está detrás del objeto, así que tendrás que "llevar hacia adelante" el objeto para que funcione el contorneo (Ctrl +F).

40 Primeros pasos

Todas la operaciones de la herramienta de texto son en vivo: el texto se reformatea y refluye según vas ajustando el ancho de la columna o vas moviendo los objetos contorneados.

Paneles de texto

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

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

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

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

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

Corrector de ortografía

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

Fuentes incrustadas

Web Designer guarda las formas de caracteres de todas las fuentes usadas en tu documento. Esto significa que si pasas tu archivo web a otra persona o transfieres el archivo a otro ordenador, los usuarios verán exactamente lo mismo que tú, incluso si las fuentes correctas no están instaladas en dicho ordenador. Pero esto únicamente incrusta

Primeros pasos 41

los caracteres usados en el documento (no se incluye la fuente completa). Por lo tanto, en los ordenadores que no disponen de las fuentes, el texto que se añada en las fuentes no disponibles puede que no aparezca con las formas de caracteres correctas.

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

Tamaño de página

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

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

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

Puedes ajustar directamente la altura de tu página arrastrando el margen inferior de la página. Ve a la HERRAMIENTA DE SELECCIÓN y mueve el cursor sobre el borde inferior de la página y éste cambiará para indicarte que ahora puedes arrastrar para reducir o ampliar el tamaño de la página según se requiera.

42 Primeros pasos

Cambiar el tamaño de página de plantillas

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

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

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

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

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

Para guardar tu sitio web, que son las páginas HTML y archivos asociados para publicar en la Web, utiliza la opción Exportar página web o haz clic en este botón en la barra superior.

Esto guarda un archivo .htm por cada página y una carpeta que contiene todos los archivos que componen la página web.

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

El nombre por defecto que se le dará a tu sitio web es index.htm porque éste es el nombre usual de la primera página de un sitio web.

Primeros pasos 43

Puedes ver previamente el sitio web en cualquier navegador web, si arrastras el archivo index.htm (o cualquier .htm) desde el Explorador de Windows hasta una ventana del navegador.

Copias de seguridad automáticas

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

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

Objetos elásticos

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

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

44 Primeros pasos

Grupos

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

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

Importante: los objetos agrupados están generalmente convertidos en un único gráfico cuando exportas tu página web.

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

Convertir texto en un gráfico

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

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

Grupos suaves (soft groups, en inglés)

Hay otro tipo de grupo denominado "Grupo suave" que es un conjunto de objetos conectados de una forma más suelta . La diferencia entre los grupos y los grupos suaves reside en que:

Primeros pasos 45

• Cuando agrupas elementos, todos tienen que estar en una única capa (si no lo están se moverán a una única capa cuando agrupes los elementos). Los grupos suaves conservan sus capas, de modo que puedes ligar elementos a través de múltiples capas.

• Los grupos por lo general se convierten en un único gráfico en la página web exportada. En los grupos suaves, cada uno de los objetos se exporta como un elemento separado. El texto dentro de un grupo suave se conserva como texto en el HTML, mientras que el texto en los grupos se convierte en un gráficos (con algunas excepciones).

• Puedes colocar grupos dentro de otros grupos. Para dibujos complejos que consisten en numerosas y algunas veces en miles de formas, es una buena técnica organizativa, es como tener un archivo dentro de otros archivos. Sin embargo, los grupos suaves no se pueden depositar dentro y en primer lugar están diseñados para ligar múltiples objetos en diferentes capas.

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

La mayoría de botones son grupos suaves, es decir, cuando seleccionas, mueves o cambias el tamaño de un botón, en realidad estás efectuando estas operaciones en dos copias del botón, una llamada la versión "MouseOff" y la otra llamada versión "MouseOver".

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

Texto sincronizado

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

Enlaces, botones y barras de botones

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

Selecciona el objeto y simplemente haz clic en el icono en la parte superior para introducir la dirección web que quieres vincular.

46 Primeros pasos

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

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

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

Enlazar a una referencia (anchor)

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

Para vincular esta referencia desde otro lugar en tu página web (un botón o sólo un enlace en algo de texto), abre el diálogo de enlace (que se muestra arriba) y elige "ENLAZAR A UNA

REFERENCIA (ANCHOR)" de la lista desplegable de nombres.

Primeros pasos 47

Enlace al archivo

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

Cambiar texto de botón

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

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

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

Botones mouseover (rollover)

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

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

Agregar nuevos botones

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

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

También puedes copiar cualquier botón existente; esta sea probablemente la mejor forma de añadir más botones a una barra de navegación. Puedes copiar/pegar, pero es un shortcut mucho más rápido arrastrar presionando el botón derecho del ratón. (Esto es un

48 Primeros pasos

shortcut general para copiar cualquier objeto). Ahora puedes editar el texto y enlazarlo como lo desees.

Consejo: si mantienes presionada la tecla Ctrl mientras lo arrastras, la operación de arrastre será perfectamente horizontal o vertical, facilitando en gran medida la creación de una línea o una columna de botones.

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

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

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

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

Para actualizar una barra de navegación en todas las páginas, si no es una barra de navegación de sitio automática, selecciona el menú ARREGLO > ACTUALIZAR OBJETOS

REPETIDOS. Esto copiará la barra de botones (y todos los demás objetos repetidos) de la página actual a todas las otras páginas que contengan la misma barra de botones. Por lo tanto, si quieres copiar una barra de botones completa en otra página que todavía no tiene una barra de botones de botones, haz doble clic para seleccionar la barra entera y luego puedes copiarla/pegarla en otra página.

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

Primeros pasos 49

Herramientas de dibujo

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

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

Para dibujar un rectángulo, selecciona la herramienta RECTÁNGULO y arrástrala por la página. Esto creará un rectángulo negro.

Haz clic sobre "esquinas curvas" en la barra de información para crear un rectángulo redondeado, o arrastra el control deslizante de la esquina curva para ajustar el redondeo.

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

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

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

Para las formas de preset como rectángulo o elipses, si deseas editar el contorno de las formas de los caracteres de texto, deberás convertir el objeto en una forma editable

50 Primeros pasos

primero. Puedes hacerlo si seleccionas el shortcut Ctrl+1. Podrás utilizar el Editor de formas para realizar varias ediciones avanzadas de vectores.

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

Herramienta de relleno

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

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

Rectángulo redondeado con relleno con gradación

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

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

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

Primeros pasos 51

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

Herramienta de transparencia

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

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

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

Difuminación

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

La sombra debajo del dibujo de la pelota tiene un borde difuminado. La combinación de todos estos controles te permite producir rápidamente gráficos de capas asombrosos para tu página web, todo directamente en Web Designer sin necesidad de utilizar ninguna otra herramienta gráfica.

52 Primeros pasos

Este es un ejemplo de un rectángulo redondeado con una gradación de color, gradación de transparencia y bordes difuminados con un poco de texto arriba.

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

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

Herramienta de sombra

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

La HERRAMIENTA DE SOMBRA te permite añadir una sombra suave a cualquier objeto, texto, gráfico o foto. Selecciona la herramienta de sombra y simplemente arrastra el objeto. Puedes ajustar el desenfoque de sombra y la transparencia utilizando los controles de la barra de información.

Texto con una sombra suave.

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

Nota para usuarios avanzados: Ten en cuenta que como la sombra misma es semitransparente (parte de los objetos se ven a través de la sombra), los objetos con sombras son convertidos a imágenes PNG cuando se guardan en la página web (es el

Primeros pasos 53

único formato de imagen que es compatible con la transparencia). Las imágenes pueden ser bastante grandes, en especial las fotos. Es perfecto para imágenes como el gráfico de sombra superior.

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

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

Gráficos de ejemplo

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

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

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

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

54 Primeros pasos

Capas, mouseover (rollover) y pop·ups

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

Estos objetos están apilados unos encima de otros.

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

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

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

Efectos MouseOver

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

Hay otra posibilidad aún mejor de mouseover, con la que puedes hacer que aparezcan los contenidos de cualquier capa como mouseover o con un clic en un objeto en tu página. Esta capa popup puede contener texto, gráficos, fotos o cualquier combinación de estos elementos. Más información, abajo.

Primeros pasos 55

Las capas MouseOff y MouseOver

Todos los objetos principales en tu página web han sido colocados en la capa inferior, conocida normalmente como MOUSEOFF. Los botones que se destacan cuando mueves el cursor del ratón sobre ellos en tu página web, tienen un gráfico adicional en la capa, conocido como MOUSEOVER.

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

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

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

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

Mover objetos de una capa a otra

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

Botones mouseover (rollover)

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

Normalmente no tienes que saber o tener en cuenta esto porque ambos botones se comportan como uno: los cambios que haces en uno, como editar el texto de etiqueta, se reflejan en la otra versión. Si mueves, arrastras o cambias un botón en la capa MouseOff,

56 Primeros pasos

la otra versión en la capa MouseOver cambiará asimismo aunque no puedas verlo. Esto se efectúa utilizando Grupos suaves (en la página 44).

Creación de los botones MouseOver propios

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

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

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

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

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

Capas pop·up

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

Para hacer esto, posiciona todos los objetos que quieras como pop·up en una nueva capa (en la galería de objetos haz clic en NUEVO · no utilices la capa mouseover), luego define la

Primeros pasos 57

propiedad mouseover (diálogo de PROPIEDADES WEB) del objeto original para disparar la visualización de esta capa cuando pases el cursor sobre cualquier objeto. Por ejemplo puedes hacer que un pop·up como éste aparezca cuando pases el cursor sobre un texto:

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

1. Haz clic en NUEVO en la GALERÍA DE CAPAS para crear una nueva capa. 2. Dibuja un rectángulo redondeado con la HERRAMIENTA RECTÁNGULO, haz clic en un

parche de color (pálido) en la LÍNEA DE COLOR para darle un color de relleno. Para una buena medida dale una sombra suave (selecciona la herramienta SOMBRA y tira del rectángulo).

3. Crea un bloque de texto en la parte superior de tu rectángulo. Selecciona la HERRAMIENTA DE TEXTO y tira diagonalmente a través del rectángulo. Teclea tu texto. Probablemente quieras ocultar ahora la capa pop·up, entonces deselecciona la casilla del "ojo" de tu nueva capa.

4. De vuelta en la capa base (mouseoff) (haz clic en la GALERÍA DE CAPAS para definir ésta como la capa actual), selecciona el texto que quieras que dispare el pop·up utilizando el método usual (en la herramienta de texto). A continuación abre el diálogo PROPIEDADES WEB (Ctrl+Shift+W) y en la pestaña MOUSEOVER selecciona la nueva capa del menú desplegable "MOSTRAR CAPA POP·UP". Haz clic en OK.

5. Haz una vista general y prueba tu efecto mouseover.

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

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

Fotos pop-up

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

58 Primeros pasos

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

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

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

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

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

• Cambiar su tamaño (girarlo) con la herramienta de selección • Cambiar el color con un clic en los colores apropiados en el extremo izquierdo de la

Línea de color y escogiendo "Editar". • Cambiar el texto con la herramienta de texto

Una vez que estés satisfecho con el resultado, selecciona el objeto y expórtalo como PNG o JPG con los botones de la barra de página web (estos se encuentran en la barra desplegable del símbolo de exportación HTML).

Para casi todos los gráficos, como botones, encabezados, íconos y otros objetos no fotográficos deberías usar formato PNG. Para elementos que contienen fotos o partes texturizadas a partir de fotos, entonces JPEG será un mejor formato. Si estás guardando una foto girada o una con una sombra suave o borde suave, entonces deberías guardarla en un formato PNG, pero debes considerar que este archivo será mucho más grande que el JPEG.

Primeros pasos 59

Si haces clic en el botón CONFIGURACIÓN en el diálogo EXPORTAR ARCHIVO, accedes a un panel de control avanzado que te permite optimizar la imagen

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

Publicar tu página web

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

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

• La dirección servidor FTP. Suele ser el mismo nombre de tu dominio, si lo tienes. Si escoges uno de las opciones de alojamiento estándar en la lista de perfil de este campo, se fijará automáticamente.

• Un nombre de usuario FTP:

60 Primeros pasos

• Y una contraseña correspondiente

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

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

xara.com/productos/web_designer

A continuación define una subcarpeta "productos" y el nombre de página "web_designer". Si creas una subcarpeta de este modo, todas las páginas en tu sitio web se publicarán en esta carpeta.

Primeros pasos 61

Una vez que has fijado tus detalles de publicación, puedes hacer clic en el símbolo PUBLICAR en la barra superior (en la barra desplegable de exportación HTML) o utiliza el menú "ARCHIVO" > "PUBLICAR PÁGINA WEB". (Nota: Primero tienes que exportar la página web)

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

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

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

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

Importante: Si no has definido un nombre de página específico, entonces el nombre que exportes se utilizará en todas las páginas de tu sitio web. Por ejemplo, si abres una plantilla de página web, la exportas como "test" a tu sistema de archivos y ahora la publicas, se publicará como test.htm en tu servidor web y las páginas adicionales serán test_2.htm, test_3.htm etc.

Si no has definido un nombre de archivo de exportación, cuando publiques por primera vez, se te preguntará si quieres introducir el nombre de archivo index.htm como nombre para la primera página de tu sitio web. index.htm es el nombre usual para la primera página de un sitio web.

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

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

La Galería de diseños contiene una selección de widgets de diversos proveedores que se actualiza con frecuencia. Simplemente arrastra y suelta los widgets en tu página web.

62 Primeros pasos

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

O puedes buscar sitios de widgets tú mismo y simplemente agregar el código en tu sitio. Aquí te presentamos un ejemplo.

Insertar un Google Map

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

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

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

En MAGIX Web Designer 6 ve a la HERRAMIENTA DE SELECCIÓN. Pega (Ctrl+V) el HTML en el programa. Se lo reconocerá como un código HTML y una imagen de marcador de posición se generará automáticamente con el código insertado. La imagen aparece en tu página. Posiciónala en el lugar que desees y luego haz la vista previa de tu página. Ahora verás el Google Map en tu página.

Agregar archivos Flash

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

Hay una diferencia importante en el caso de los marcadores de posición para Flash: puedes modificar su tamaño como lo desees y el Flash se modificará para adaptarse al marcador de posición. Por otra parte, puedes optar por Flash transparente o semitransparente, y funcionará perfectamente en tu página web. La mayoría de los otros widgets tienen un tamaño fijo y aparecerán siempre con el tamaño predeterminado en tu página web, independientemente del tamaño del marcador de posición.

http://maps.google.com/

Primeros pasos 63

Si seleccionas un archivo Flash para enlazar con un marcador de posición de esta manera, el archivo Flash se copia en una carpeta "_archivos" junto al documento web. Si mueves o copias el archivo web, también debes copiar la carpeta "_archivos" para asegurarte de copiar también los archivos Flash.

Inserción de un GIF animado

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

Inserción de una película MP4 o FLV

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

64 Trabajar con documentos

Trabajar con documentos

Inicio del MAGIX Web Designer 6

Para iniciar Web Designer:

• Selecciona inicio > Todos los programas > MAGIX > MAGIX Web Designer 6.

• O doble clic sobre el símbolo de Web Designer de tu escritorio (ilustración a la izquierda).

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

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

Iniciar un nuevo documento

Principalmente, hay tres tipos diferentes de documentos en MAGIX Web Designer 6: página web, foto y animación. Para abrir un nuevo documento:

Escoge ARCHIVO > NUEVO

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

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

El botón NUEVO DIBUJO de la barra de control ESTÁNDAR crea un nuevo documento con la plantilla por defecto (shortcut "Ctrl + N").

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

Abrir un documento existente

Para abrir un documento existente:

• Arrastra y suelta un archivo. Selecciona el archivo en el explorador de Windows o en tu escritorio y arrástralo hasta el documento abierto para importarlo o hasta cualquier otra parte de la ventana de Web Designer para abrir el documento.

• O haz doble clic sobre un archivo de Web Designer.

Trabajar con documentos 65

• O, para abrir un archivo usado recientemente, selecciónalo en ARCHIVO ·> ABRE

RECIENTE • O selecciona ARCHIVO ·> ABRIR (Shortcut "Ctrl+O").

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

Se mostrará el diálogo de apertura. El diálogo te permite una selección múltiple de archivos. Haz clic y pulsa "Ctrl" para seleccionar varios archivos o haz clic y pulsa "Shift" para seleccionar varios archivos

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

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


La ventana MAGIX Web Designer 6

Barra de título

Nombre de archivo

Barra de botones estándar

Galerías


Barra de herramientas

Reglas

Línea de color

Barra de estado

Indicadores de arrastre/ajuste en vivo

Barra de herramientas web

La ventana de Web Designer es similar a una hoja de papel convencional sobre un caballete o un tablero de dibujo. El rectángulo blanco representa la hoja de papel (la carilla o página). El borde gris es el tablero de dibujo.

Puedes cambiar el tamaño del tablero de dibujo en la pestaña OPCIONES -> TAMAÑO DE

PÁGINA (en la página 337).


Documento seleccionado y barra de título

En Web Designer puedes abrir más de un documento a la vez, pero el documento en la ventana actual es el documento seleccionado al que se aplican todos los cambios. La barra de título que se encuentra en la parte superior de MAGIX Web Designer 6 muestra el nombre del documento seleccionado y si lo has cambiado desde la última vez que lo has guardado. Una estrella después del nombre de archivo significa que hay modificaciones no guardadas.

Barras de control

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

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

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

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

Para más información sobre la personalización de barras de control consulta el capítulo "Personalización de Web Designer" (en la página 337).


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

Las barras de información no pueden personalizarse.

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


Barra de herramientas principal

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

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

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

Reglas

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

La barra de estado

Objetos seleccionados

Opciones disponibles

Indicadores

Cursor del ratón X-Y

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

Los indicadores

Estos aparecen a la derecha de la barra de estado:

Indicador Live Drag El indicador muestra si live drag se encuentra activado o no (por defecto está activado). Haz doble clic sobre el indicador para activar/desactivar el live drag, todo el objeto se mueve (no sólo el contorno), lo que facilita juzgar el efecto de la edición en tiempo real. El dibujo con las herramientas de dibujo libre, líneas rectas, Quickshape, rectángulos y


elipses también se realiza en vivo con esta opción. Si tu ordenador no puede trabajar con un documento particularmente complejo, esta opción se apagará automáticamente para garantizar que la edición siga siendo rápida y eficiente.

Indicador de ajuste Este indicador está activo cuando se ha seleccionado la opción VENTANA > AJUSTAR A

OBJETOS. Muestra cuando mueves un punto cerca de la distancia de ajuste de un objeto. Para más información sobre el ajuste, consulta "Trabajar con objetos (en la página 105)".

Coordenadas X-Y

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

Modo de pantalla normal / completa

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

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

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

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

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

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

Abrir una segunda ventana

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

• obtener una vista ampliada o reducida del documento; • ver otra parte del documento; • obtener dos vistas de la misma área con dos calidades diferentes.

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

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


Selección de la ventana que se quiere visualizar

En la parte inferior del menú Ventana se encuentra una lista de las ventanas. Escoge el nombre de una ventana para verla.

Orden de múltiples ventanas

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

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

Minimizar ventanas múltiples

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

Cambiar el valor de zoom

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

Algunos valores de zoom tienen asignados shortcuts: los números 1, 2, 3, 4 colocan el zoom entre 100% y 400%. El número 5 lo lleva al 50%.

Uso de la herramienta de zoom

Para ampliar o reducir la vista:

• Selecciona la herramienta de ZOOM de la barra principal de herramientas. • O pulsa Alt+Z para cambiar entre la herramienta actual y la herramienta de ZOOM. • O pulsa y mantén pulsada las teclas Alt+Z para cambiar temporalmente a la herramienta

de ZOOM (suelta Alt+Z para volver a la herramienta previa). • O +F7 para seleccionar la herramienta de ZOOM.

Cambiar el valor de zoom utilizando el ratón

Si tu ratón tiene ruedita:

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


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

Alternativamente, selecciona la herramienta de ZOOM:

• Haz clic para ampliar. • +clic para reducir el valor de zoom (ver más del documento). • Arrastra el ratón diagonalmente para crear un rectángulo. Al soltar la tecla del ratón, el

área dentro del rectángulo se ampliará para adaptarse al tamaño de la ventana.

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

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

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

Para cambiar el zoom:

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

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

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

Shortcut "Ctrl + + P". Haz clic en el botón ZOOM A LA PÁGINA. La ventana muestra toda la página o pares de páginas.

Shortcut "Ctrl + + Z". Haz clic en el botón ZOOM A LA SELECCIÓN. El objeto u objetos seleccionados ocuparán toda la ventana.

Introduce un valor en el campo de texto. Pulsa "↵" para implementar el cambio o selecciona algún valor de zoom predeterminado incluyendo los mencionados anteriormente (página, dibujo, seleccionado, anterior) en el menú desplegable.


Desplazar el documento dentro de la ventana

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

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

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

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

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

Puedes cambiar la acción de la rueda del ratón entre desplazamiento y zoom en Herramientas > Opciones > Pestaña del ratón. La acción opuesta está disponible pulsando la tecla Ctrl.

• O selecciona la herramienta de DESPLAZAMIENTO de la barra de herramientas principal (shortcut +F8).

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

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

La barra de información de la herramienta de DESPLAZAMIENTO es la misma que la barra de información de la herramienta de ZOOM (descrita anteriormente).

Cambiar el tamaño de página

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

1. Escoge en el menú "HERRAMIENTAS -> OPCIONES". 2. De ser necesario, escoge la pestaña de tamaño de página. 3. Selecciona el tamaño de página que deseas.

Si seleccionas PERSONALIZAR en la selección de tamaño puedes configurar un ancho y un alto personalizado en los campos de abajo.


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

Puedes cambiar el alto de la página arrastrando el borde inferior de la página con la herramienta de selección.

Páginas múltiples en el documento

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

La página actual

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

Debes estar situado en la página actual cuando desees introducir, duplicar o mover páginas, como pasaremos a explicarte en las secciones siguientes.

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

Introducir páginas en tu documento

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

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

Con este botón se inserta un duplicado de la página actual.


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

PÁGINAS"

Mover páginas dentro del documento

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

Para mover la página actual:

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

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

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

Eliminar páginas de tu documento

Para eliminar la página actual de tu documento, selecciona "EDICIÓN > PÁGINAS > BORRAR

PÁGINA ACTUAL". La página actual y todos sus contenidos serán eliminados.

Navegar entre páginas

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

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

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

Hacia abajo: se mueve hacia abajo del documento. La cantidad de desplazamiento depende de tu nivel de zoom. Cuanto más alejado estés del documento (zoom out), más grande será el desplazamiento.

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


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

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

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


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

Guardar el documento

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

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

Opción Guardar (en el menú Archivo)

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

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

Para un nuevo documento que todavía no se ha guardado en disco, la opción actúa como "Guardar como" (descrita a continuación).


Guardar como (en el menú Archivo)

Esta ocpión abre un diálogo que te permite guardar el documento con un nuevo nombre o en otro directorio. Esta opción es útil para realizar copias de seguridad de Web Designer.

Guardar todo (en el menú Archivo)

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

Directorios de compatibilidad

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

MAGIX Web Designer 6 ofrece un directorio opcional de compatibilidad para los archivos externos que se encuentra a la derecha del archivo de diseño.


Nombres para el directorio de compatibilidad

El archivo de diseño y su directorio de compatibilidad correspondiente se identifican fácilmente porque tienen el mismo nombre. El directorio de compatibilidad para "miSitio.web" se llama "miSitio_web_archivos". Si cambias el nombre de un archivo de diseño o lo copias o mueves de sitio, no te olvides de cambiar el nombre del directorio de compatibilidad (si existe uno). Y si deseas enviar un archivo de diseño, recuerda que debes mandar también el directorio de compatibilidad.

Cuando cargues un diseño que tiene un directorio de compatibilidad y luego escoges la opción "Guardar como", MAGIX Web Designer 6 copiará todo el directorio de compatibilidad también (si existe uno).

Contenido del directorio de compatibilidad

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

Ten en cuenta que si realizas modificaciones al objeto del marcador posteriormente, el archivo original no se borrará automáticamente del directorio de compatiblidad. Si no necesitas más ese archivo, deberás eliminarlo manualmente.

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

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

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

Cerrar el documento

Para cerrar el documento:

• Escoge ARCHIVO > CERRAR • O pulsa Ctrl+F4


• O haz clic sobre la X más pequeña de las dos que se encuentran en la esquina superior derecha.

Nota: en la mayoría de los ordenadores, la X para cerrar el documento es más pequeña que la X que se encuentra arriba. La X roja más grande cierra el programa.

Copias de seguridad automáticas

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

Para activar o desactivar copias de seguridad automáticas, abre el diálogo HERRAMIENTAS>OPCIONES y escoge la pestaña COPIAS DE SEGURIDAD.

Copias de seguridad de documentos abiertos

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

Ten en cuenta que una vez que el periodo configurado haya pasado desde la última copia de seguridad, la próxima copia de seguridad se realizará cuando el programa haya estado inactivo durante al menos 15 segundos. Esto evita que se interrumpa tu trabajo y que el documento se guarde mientras se lo está modificando. En el uso normal, es poco probable que no haya periodos inactivos de 15 segundos o más, por lo que permite


realizar una copia de seguridad poco después. De todas formas, si estás editando activamente durante un periodo extendido de tiempo es posible que transcurra bastante más tiempo que el configurado entre dos copias de seguridad.

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

Ubicación de la copia de seguridad

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

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

Revisiones

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

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

Documentos sin título

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

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

Guardar copias de seguridad de documentos abiertos al cerrar el programa

En el diálogo Opciones de la pestaña Copias de seguridad puedes activar COPIA DE

SEGURIDAD AUTOMÁTICA Y RESTAURACIÓN. Cuando esta opción está activada, al cerrar MAGIX Web Designer 6, no se te preguntará si quieres guardar los documentos


modificados que todavía están abiertos. Por el contrario, se realiza una copia de seguridad de todos los documentos abiertos en la carpeta de copias de seguridad y el programa se cierra. Luego, al iniciar nuevamente el programa, los mismos documentos se cargan automáticamente para que puedas continuar trabajando desde donde los has dejado.

Recuperación de cierres anormales del programa

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

El cierre anormal no se detectará si no se ha realizado ninguna copia de seguridad desde el último cierre normal del programa.

Copias de seguridad al cerrar el sistema

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

Recuperación de copias de seguridad

Puedes acceder a las copias de seguridad de tus documentos con Archivo>ABRIR

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

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

Cuadrícula de pantalla

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

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


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

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

El tipo de cuadrícula (isométrica/rectangular), el punto 0,0 (el origen) y el espaciado entre los puntos de la grilla se configuran en la pestaña CUADRÍCULA Y REGLA del diálogo de opciones (ilustración a la derecha). Los cambios realizados sólo se aplicarán al documento seleccionado.

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

Esto te permite utilizar la configuración más apropiada para ese documento. El procedimiento para cambiar el tipo y el espaciado se describe a continuación.

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

Reglas

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

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

Web Designer utiliza las reglas para:


• que puedas ubicar la parte de la página que estás viendo; • mostrar la posición X-Y actual del cursor; • aplicar líneas guía. Si la opción VENTANA > AJUSTAR A CUADRÍCULA está activada, las

líneas guía se ajustan a las divisiones de las reglas. (Para más información sobre líneas guía, lee el apartado guías y líneas guía en el capítulo Trabajar con objetos (en la página 105).)

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

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


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

Mostrar / ocultar reglas

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

Cambiar los puntos cero de las reglas

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

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

Esto también mueve el origen de la cuadrícula de forma que las divisiones de la regla siempre se encuentren alineadas con la cuadrícula.


También puedes mover el punto cero desde la pestaña CUADRÍCULA Y REGLA del diálogo de opciones (descrito a continuación)

Calidad de imagen

Hay cinco configuraciones de calidad disponibles en el menú VENTANAS >CALIDAD que afectan la forma en que el documento aparece en MAGIX Web Designer 6:

• Sólo contorno. Ahora, con antialiasing completo para una mayor calidad de visualización de la pantalla

• Contornos con pasos de transición • Color total (sin antialiasing) • Alta calidad (antialising total y suavizado de imagen) • Muy alta calidad (el mejor antialiasing de la industria. La nueva visualización de fotos

bicúbica aumenta la calidad de fotos reducidas).

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

La configuración CONTORNO muestra solamente el contorno de las formas (se dibujan como wire frames). Esto facilita la selección de objetos que se encuentran detrás de otros objetos.

La configuración de calidad no tiene efecto en la forma en que el documento exporta o imprime, excepto en el caso de exportaciones de mapas de bits que utilizan la configuración de calidad actual.

Galerías

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

Capa

Frame

Mapa de bits

Línea

Diseños

Los DISEÑOS, RELLENOS y GALERÍAS DE LÍNEAS te permiten escoger entre diferentes plantillas y estilos suministrados con MAGIX Web Designer 6 .


La GALERÍA DE MAPAS DE BITS te muestra los mapas de bits y fotos que estás utilizando en el documento actual.

La GALERÍA DE PÁGINAS Y CAPAS te muestra y te permite manipular las páginas de tu documento y las capas dentro de cada página.

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

Ver una galería

Para abrir una galería:

• Selecciona la barra de control GALERÍAS (no todas las galerías están disponibles desde esta barra, sino solamente las que se utilizan con mayor frecuencia).

• O escoge "HERRAMIENTAS -> GALERÍAS", en donde encontrarás todas las galerías disponibles.

Fijación de galerías

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

Un ejemplo de una galería fijada. También es posible cambiar el tamaño de la galería para que ocupe más o menos espacio.


Fijar una galería

Para fijar una galería:

1. Abre una galería tal como se ha descrito anteriormente. 2. Arrastra la galería hasta la izquierda o derecha de la pantalla. 3. Si lo deseas, reitera el proceso para otras galerías.

Desfijar una galería

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

Reorganizar galerías

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

Uso de las galerías

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

• Haz clic sobre el icono PLEGAR/DESPLEGAR. • O haz doble clic sobre el título de la sección. • O haz clic derecho sobre una sección para ver el menú pop-up. Selecciona

PLEGAR/DESPLEGAR sección. El menú pop-up también tiene opciones para abrir la sección siguiente o la anterior.

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

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

APLICAR inserta el ítem seleccionado de la galería. Haz clic sobre un ítem para seleccionarlo.


OPCIONES abre un menú en donde puedes escoger:

• BUSCAR: se describe más adelante en la búsqueda de un nombre de ítem. • ORDENAR: se describe más adelante en el orden de los ítems en una galería. • PROPIEDADES: permite controlar el tamaño de los iconos y la cantidad de información

que se muestra en la galería. • Añadir (galerías de clipart, rellenos y fuentes): descrito a continuación en añadir ítems en

una galería. • ELIMINAR (galerías de clipart, rellenos y fuentes): descrito a continuación en eliminar

secciones de una galería.

Seleccionar ítems

Para seleccionar un ítem:

• Haz clic sobre un ítem para seleccionarlo. • O haz clic sobre un ítem, después +clic sobre otro ítem: todos los ítems entre los dos

puntos se seleccionarán. • O Ctrl+clic para añadir ese ítem a la selección.

Reordenar ítems en la galería

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

Buscar un nombre de ítem

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

1. Escoge Opciones > Buscar. 2. Introduce ROJO en el campo de texto. 3. Selecciona BUSCAR NOMBRES Y CONTRASEÑAS

(para buscar sólo en los nombres, color, etc.) o BUSCAR TODA LA INFORMACIÓN (para buscar en todos los nombres y palabras clave disponibles en algunas galerías).

Añadir a la galería

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

1. Copia los archivos que quieres añadir a un nuevo directorio usando el explorador de Windows.

- Para la GALERÍA DE CLIPARTS, estos archivos pueden ser cualquier tipo de la amplia gama de archivos de vectores o mapas de bits.

- Para la GALERÍA DE RELLENOS puede ser cualquiera de los formatos de mapa de bits compatibles con Web Designer (listados en importación y exportación (en la página 317)).


2. En cada galería, pulsa el botón "DISEÑOS DE DISCO/RELLENOS". Se abrirá una ventana de diálogo.

3. Usa este diálogo para seleccionar el directorio que quieres añadir. 4. Haz clic en "AÑADIR". Esto crea una nueva sección en la galería.

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

1. Copia los archivos nuevos en la carpeta existente. 2. En la galería, pulsa el botón "DISEÑOS DE DISCO/RELLENOS". Se abrirá una ventana de

diálogo. 3. Usa este diálogo para seleccionar el directorio que quieres añadir. 4. Haz clic en "ACTUALIZAR" para actualizar la sección en la galería.

Eliminar secciones de una galería

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

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

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

Deshacer y rehacer

¿Qué son las funciones deshacer y rehacer?

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

La función deshacer

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

• Haz clic sobre el botón DESHACER de la barra de control ESTÁNDAR. • O escoge Editar > Deshacer (la formulación exacta te dice cuál es el paso deshacer, por

ejemplo, deshacer escala). • O pulsa Ctrl+Z. • O pulsa la tecla de coma (en cualquier herramienta salvo la herramienta de TEXTO).

Puedes repetir la función deshacer para seguir retrocediendo por la secuencia de las operaciones previas.


La función rehacer

Rehacer cancela la función deshacer anterior. Para rehacer la última operación:

• Haz clic sobre el botón REHACER de la barra de control ESTÁNDAR. • O escoge Editar > Rehacer (la formulación exacta te dice cuál es el paso rehacer, por

ejemplo, rehacer escala). • O pulsa Ctrl+Y. • O pulsa la tecla de punto (en cualquier herramienta salvo la herramienta de TEXTO).

La función rehacer sólo puede aplicarse inmediatamente después de la función deshacer. No puedes rehacer tras modificar el documento (por ejemplo, moviendo o añadiendo un objeto).

Trabajar con objetos 89

Trabajar con objetos

La herramienta de selección

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

Dimensiones de selección

% de controles de tamaño

Bloquear relación de aspecto

Girar e inclinar

Voltear

Escalar anchos de línea

Aplicar nombres

Para utilizar la herramienta de SELECCIÓN:

• Haz clic sobre la herramienta de SELECCIÓN en la BARRA DE HERRAMIENTAS PRINCIPAL. • O pulsa "Alt + S", "V" o "F2".

Cuando cambies a la HERRAMIENTA DE SELECCIÓN, si hay objetos seleccionados dentro de un grupo u otro tipo de objeto compuesto, se seleccionará el objeto principal (grupo) en su lugar.

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

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

Seleccionar objetos

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

Cambiar selección de objetos

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

• Fin selecciona el objeto de atrás.

90 Trabajar con objetos

• Inicio selecciona el objeto de adelante. • "Tab" selecciona el objeto siguiente hacia atrás. • +Tab selecciona el objeto siguiente hacia adelante.

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

Marco de selección

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

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

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

Ampliar selección

Para seleccionar objetos adicionales:

• +clic sobre ellos. • O +arrastrar el ratón. Esto dibuja un rectángulo de selección y añade los objetos

dentro del rectángulo a la selección.

Seleccionar bajo

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

Selección interna

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

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

Mover objetos seleccionados debajo o dentro

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

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


Selección y capas

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

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

Seleccionar todos los objetos

Para seleccionar todos los objetos:

• Escoge Edición > Seleccionar todo. • O pulsa Ctrl+A.

Deseleccionar un objeto

Para deseleccionar todos los objetos:

• Haz clic en cualquier lugar sin usar del documento. • O escoge Edición > Borrar selección. • O pulsa Esc.

Para deseleccionar un objeto entre muchos:

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

Marcadores de selección

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

Barra de estado

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

Controles deslizantes de límites de selección

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


Tab

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

Mover objetos

Para deslizar un objeto sobre la página

1. Escoge la herramienta de SELECCIÓN. 2. Arrastra el objeto hasta la posición deseada. Pulsa Ctrl para limitar la dirección de

movimiento a uno de los ángulos de restricción.

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

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

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

Soltar una copia

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

O, de la misma forma, pulsa la tecla derecha del ratón y arrastra. Esto arrastrará inmediatamente una copia del objeto. Haz clic izquierdo para dejar una copia en la posición actual del ratón.


Rellenos

Generalmente, si mueves un objeto, su relleno también se moverá:

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

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

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

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

Desplazar objetos

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

El desplazamiento no se ve afectado por el ajuste magnético ni de cuadrícula. (Los ajustes se describen más adelante).

Modificadores de desplazamiento

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

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

Puedes cambiar la distancia normal de desplazamiento en la pestaña GENERAL de Herramientas > Opciones. (Consulta el capítulo Personalización de Web Designer (en la página 334).

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


Cortar, copiar y pegar

Estas funciones te permiten mover o copiar un objeto en el mismo documento o entre diferentes documentos. El procedimiento es:

1. Selecciona el objeto. 2. Para eliminar el objeto, escoge "EDICIÓN > CORTAR" (o "Ctrl + X"). Para copiar el

objeto pero no eliminarlo, escoge "EDICIÓN > COPIAR" (o "Ctrl + C"). Las dos opciones colocan el objeto (o una copia del objeto) en el portapapeles.

3. Selecciona "EDICIÓN > PEGAR" (o "Ctrl + V" o "Insertar"). Esto pega el contenido del portapapeles en el documento.

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

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

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

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

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

Si se provee una serie de formatos en el portapapeles, <programname> te mostrará un diálogo titulado PEGADO ESPECIAL para que puedas elegir el formato en el que deseas pegar el objeto. Por ejemplo, puedes pegar un texto sin formato o con en formato Rich Text.

Eliminar objetos del documento

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

Cortar objetos

Selecciona "Edición > Cortar", o pulsa "Ctrl + X". Los contenidos del portapapeles serán sobrescritos y podrás pegar el objeto o los objetos borrado en el lugar deseado.


Eliminar objetos

Escoge "Edición > Eliminar", pulsa "Supr" o haz clic sobre el botón ELIMINAR de la barra de control ESTÁNDAR.

En este caso los objetos eliminados no se colocarán en el portapapeles. Si eliminas accidentalmente un objeto, puedes recuperarlo con deshacer.

Duplicar y clonar

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

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

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

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

Duplicar

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

La distancia de duplicación puede cambiarse. Lee el capítulo Personalización de Web Designer (en la página 334).


Clonar

Escoge Edición > Clonar o pulsa Ctrl+K. Esto coloca una copia exactamente arriba del original. La clonación es una forma fácil de crear formas concéntricas.

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

Mover objetos hacia adelante o hacia atrás

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

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

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

El menú Arreglo te ofrece las cuatro opciones siguientes:

• TRAER AL FRENTE (Ctrl+F): esto convierte al objeto seleccionado en el objeto de más arriba. Por lo tanto, ocultará todos los objetos que cubra.

• MOVER ADELANTE (Ctrl+ +F): esto mueve el objeto un nivel hacia el frente, como si estuviera subiendo un peldaño de una escalera.

• MOVER ATRÁS (Ctrl+ +B): esto mueve el objeto un nivel hacia atrás. • LLEVAR ATRÁS (Ctrl+B): esto coloca el objeto atrás de todo.


Estas opciones mueven los objetos hacia adelante y hacia atrás en la misma capa. MOVER

A LA CAPA AL FRENTE y MOVER A LA CAPA DE ATRÁS te permiten mover los objetos entre las capas visibles. (Las capas invisibles no se tienen en cuenta al mover objetos).

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

Girar objetos

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

Si el modo de rotación está activado, el centro de transformación (alrededor del cual el objeto gira) aparece inicialmente en el centro del objeto, tal como se ve en este pequeño blanco.

Haz otro clic sobre el objeto para poner la herramienta de selección en el modo de rotación.

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

Atención: si se mueve el centro de rotación, se mantendrá en esta posición para cualquier objeto seleccionado hasta que todos los objetos estés deseleccionados; así el punto volverá al centro de cualquier objeto seleccionado.

Girar utilizando el ratón

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

Si arrastras los controles deslizantes laterales, el objeto se extenderá. Esta operación se explica detalladamente en la sección Extender o reducir objetos.

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

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

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

Puedes definir los ángulos de restricción. Consulta el capítulo "Personalización de Web Designer (en la página 333)".

Para crear una copia mientras realizas un giro, pulsa la tecla "+" del teclado numérico mientras giras o haz clic con la tecla derecha del ratón.


Rotación con ángulos exactos (utilizando la barra de información)

Introduce un ángulo en el campo de rotación y pulsa ↵. Los ángulos positivos realizan el giro en sentido contrario a las agujas del reloj, mientras que los ángulos negativos lo realizan en el sentido de las agujas del reloj.

Haz clic sobre las flechas a la derecha para desplazar el ángulo de rotación.

Girar objetos en el modo de cambio de tamaño

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

Cambio del tamaño de objetos (escalar)


Botón Escalar anchos de línea

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

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

Este control también determina si los valores X, Y, ancho y alto de la barra de información incluyen el ancho del contorno o pincel. Muchas veces es útil ver y controlar el tamaño exacto de la forma excluyendo el ancho de la línea.


Botón Bloquear relación de aspecto

Con el botón BLOQUEAR RELACIÓN DE ASPECTO, la relación de aspecto ancho:altura permanece constante cuando cambias el tamaño del objeto.

En otras palabras, la forma mantiene las mismas proporciones que el original. Se recomienda dejar este botón activado la mayoría del tiempo para garantizar que los objetos no se deformen al cambiar su tamaño.

Si este botón está desactivado, puedes cambiar la relación de aspecto al cambiar el tamaño del objeto. Es decir, que puedes extender el objeto de una forma u otra arrastrando un control deslizante de esquina o introduciendo un nuevo tamaño.

Cambiar tamaño utilizando el ratón

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

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

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

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

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

Si arrastras los controles deslizantes laterales, el objeto se extenderá o reducirá. Esta operación se explica detalladamente en la sección Extender o reducir objetos.


Cambiar tamaño utilizando la barra de información

Introduce el valor en el campo CAMBIAR TAMAÑO DE TEXTO y pulsa "↵". • Los valores menores que 100% reducen el objeto. 50 reduce el tamaño del objeto

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

tamaño del objeto.

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

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

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

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

Voltear objetos

Esta opción es parte de la herramienta de SELECCIÓN. Un clic sobre los botones para VOLTEAR da vuelta el objeto vertical u horizontalmente a partir del centro de transformación.

El tamaño y la relación de aspecto no cambian, el objeto simplemente se voltea.

Extender o reducir objetos

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

Extender o reducir objetos utilizando el ratón

La herramienta de SELECCIÓN debe encontrarse en el modo de cambio de tamaño. (Los controles deslizantes de selección son cuadrados.) De ser necesario, haz clic en el objeto para activar el modo de cambio de tamaño.


Utiliza los controles deslizantes superiores, inferiores y laterales, en lugar de los controles deslizantes de esquina para extender o reducir una forma sólo en una dimensión. Ten en cuenta que sólo se muestran estos controles deslizantes en los rectángulos que no tienen una foto en su interior porque extender otros objetos en una sola dimensión rara vez produce resultados correctos (las fotos se distorsionan).

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

El botón BLOQUEAR RELACIÓN DE

ASPECTO se ignora.

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

Extender o reducir objetos utilizando la barra de información

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

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

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

Inclinar objetos


A la izquierda se encuentra el objeto original; a la derecha el objeto inclinado horizontalmente.

Inclinar utilizando el ratón

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

Arrastra una de las flechas laterales, superiores o inferiores para inclinar el objeto. Ten en cuenta que sólo se muestran estos controles deslizantes en los rectángulos que no tienen


una foto en su interior porque inclinar otros objetos rara vez produce resultados correctos (las fotos se distorsionan).

A medida que arrastras, el objeto se inclinará en la dirección del movimiento (vertical u horizontal).

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

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

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

Inclinar utilizando la barra de información

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

Difuminación (Feathering)

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

El control de difuminación se encuentra sobre el lado derecho de la barra superior después del botón de galerías.

Para difuminar un objeto:

1. Selecciona el objeto o los objetos que quieres difuminar. 2. Introduce un tamaño numérico para la difuminación en el campo de texto.

O Haz clic en la flecha para ver la barra deslizante emergente. A medida que arrastres la barra deslizante los objetos se difuminarán.


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

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

Ajuste

El ajuste facilita el posicionamiento de esquinas o puntos específicos de objetos en lugares precisos. Puede utilizarse para alinear esquinas a un punto o línea específico o para espaciar objetos en intervalos regulares utilizando la cuadrícula.

MAGIX Web Designer 6 ofrece tres tipos de ajuste:

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

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

Ajustar a cuadrícula

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


Al arrastrar objetos, los bordes se ajustarán a los puntos de cuadrícula. El borde que se ajustará depende de la dirección en que se arrastra al objeto.

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

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

Como alternativa, cambia los valores de cuadrícula a, por ejemplo, 10 subdivisiones, lo que significa que los puntos de cuadrícula están en límites de 5 píxeles.

Ajuste y ancho de línea

El control MODIFICAR ANCHOS DE LÍNEA de la barra de información de la herramienta de SELECCIÓN también controla si el ajuste debe realizarse al borde del contorno de objeto o al centro verdadero de la línea.

El ejemplo muestra una forma con un contorno gris muy grueso. También muestra una línea negra delgada, el contorno de la forma en sí mismo (puedes ver que el contorno grueso está dibujado de forma igual a cada lado del centro de la línea, por lo que se encuentra parcialmente dentro de la forma y parcialmente fuera.)

Si desactivas este control, los objetos se ajustarán al centro matemático de la línea, que es lo mismo que el borde externo de la línea si no tuviera un contorno.


Ajuste magnético de objeto

El ajuste magnético de objeto es una forma muy precisa de alinear líneas, puntos y bordes de los objetos a cualquier otro objeto para que se toquen.

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

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

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

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

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

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


La distancia de ajuste se controla a través de la pestaña del RATÓN del diálogo de OPCIONES (Herramientas > Opciones). Puedes especificar dos distancias:

• Un círculo alrededor de cada control deslizante. • Y una distancia a cada lado de los segmentos de línea. Esto te permite hacer que los

puntos "se peguen" más que las líneas en sí mismas.

Objetos guía y líneas guía

Los objetos guía y las líneas guía son objetos de una capa especial: la capa guía. Una capa guía se crea automáticamente cuando creas una línea guía (ver a continuación) o puede crearse de forma manual con un clic derecho en la GALERÍA DE CAPAS y seleccionando CREAR UNA CAPA GUÍA. Lee el capítulo "Capas para más información (en la página 275)".


Usa la opción AJUSTAR A GUÍAS del menú Ventana (o la tecla 2 del teclado numérico) para activar el ajuste a objetos guía.

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

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

Colocar objetos en la capa guía

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

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

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

MOVER A LA CAPA DE ADELANTE y MOVER A LA CAPA DE ATRÁS en el menú Arreglo ignora la capa guía y no puede utilizarse para mover objetos a esta capa.

Crear un línea guía

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

• Activa las reglas (Ctrl+L). • Arrastra desde una regla hasta la página

O

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

Esto crea automáticamente una capa guía y coloca la línea guía en esa capa.


O, usa la galería de capas:

1. Clic derecho sobre la galería de capas y escoge PROPIEDADES 2. De ser necesario, escoge la pestaña Guías. 3. Selecciona horizontal o vertical. 4. Haz clic en Nuevo. 5. Introduce la posición deseada.

Eliminar una línea guía

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

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

Resumen de shortcuts del teclado numérico

+ crea una copia mientras arrastras, cambias de tamaño, doblas, etc. El objeto original no se modifica.

/ conserva el ancho de línea intacto al cambiar de tamaño el objeto. - conserva el relleno sin cambios al mover, cambiar de tamaño, doblar, etc. * activa y desactiva el ajuste magnético.

Agrupar y desagrupar objetos

Las herramientas de sombra y transparencia ofrecen diferentes resultados, dependiendo si se trata de objetos agrupados o no. Para más información, lee el capítulo Transparencia (en la página 188) y Sombras (en la página 190).

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

Para crear un grupo

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

Desagrupar objetos

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

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


Para añadir más objetos a un grupo

1. Selecciona el grupo. 2. Desagrupa (Ctrl+U) 3. Selecciona los objetos adicionales 4. Agrupa nuevamente (Ctrl+G)

También puedes incorporar un grupo en un segundo grupo, omitiendo el paso 2. Web Designer recuerda la información original de agrupación. Si desagrupas los objetos posteriormente, aparecerán los grupos originales.

Eliminar objetos de un grupo

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

otros objetos permanecen seleccionados.

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

Seleccionar un objeto dentro de un grupo

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

Esto se llama "seleccionar dentro".

Grupos y capas

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

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

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


Los grupos normales, como se explicó en "Agrupar y desagrupar objetos" (en la página 107), sólo se colocan en una capa, no pueden estar en varias capas al mismo tiempo. Los GRUPOS SUAVES te permiten conectar objetos a través de distintas capas.

Si seleccionas un componente de un grupo suave, también se seleccionarán otros componentes del mismo grupo suave, incluso los que son invisibles o se encuentran


bloqueados. Esto significa que cuando muevas, gires o transformes un componente de un grupo suave, todos los otros objetos también se modificarán de forma similar.

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

Los grupos suaves son prácticos para cuando quieres mantener juntos los objetos que están relacionados. Por ejemplo, los estados MOUSEOFF y MOUSEOVER de un botón web se agrupan en un grupo suave para que el otro estado también guarde los movimientos o transformaciones.

Creación de grupo suaves

Para crear un grupo suave, selecciona todos los objetos que quieras incluir en el grupo y luego escoge "ARREGLO > APLICAR GRUPO SUAVE" (o pulsa "Ctrl + Alt + G"). Ten en cuenta que si el grupo suave va a tener componentes en capas invisibles o bloqueadas, tendrás que hacer esas capas temporalmente visibles y editables utilizando la galería de capas para poder seleccionar los objetos y agruparlos en un grupo suave.

Un objeto no puede ser miembro de más de un grupo suave y los grupos suaves no pueden ser parte de otros grupos suaves.

Eliminación de grupos suaves

Para deshacer un grupo suave, seleccionar "ARREGLO > ELIMINAR GRUPO SUAVE" (o pulsa “Ctrl + Alt + U”). Los objetos no serán borrados, pero no estarán más asociados en un grupo suave.

Sincronización de texto

Todos los objetos que tengan el mismo valor de texto y que estén en el mismo grupo suave serán sincronizados si alguno de los objetos se edita. Entonces, si cambias el texto de un objeto, todos los otros objetos que tengan el mismo texto serán modificados. Sólo el texto será sincronizado, los objetos pueden tener diferentes tamaños, fuentes o atributos.

La sincronización de texto utilizando los grupos suaves es práctico cuando tienes una etiqueta que está duplicada en varios sitios, eventualmente en diferentes estilos y si quieres que cada objeto tenga la misma etiqueta.


Alineación

Esto permite alinear dos o más objetos con precisión. Selecciona los objetos que quieres alinear y escoge "Arreglo" > "Alineación" (Shortcut: Ctrl + Shift + L).

El diagrama de la parte superior del diálogo te muestra el efecto de cada configuración. Los objetos correspondientes se modificarán en el documento, sólo al confirmar con APLICAR.

El diálogo de alineación no es modal, lo que significa que el diálogo puede permanecer abierto mientras trabajas en el documento. De esta forma, puedes cambiar entre herramientas o dibujos, modificar la selección y después escoger una de las opciones de alineación.

Si tu selección no es la correcta, modifícala y haz clic nuevamente en APLICAR para volver a utilizar la última configuración. De esta forma, puedes ahorrar mucho tiempo.

Dentro

Esta sección del diálogo controla los límites dentro de los que alineas o distribuyes los objetos. Las opciones son:

LÍMITES DE SELECCIÓN: los límites son los bordes externos de los objetos seleccionados. Esta posición relativa no tiene efecto en la página.


LÍMITES DE UN OBJETO DE ATRÁS: los límites son los bordes externos del objeto seleccionado que se encuentre atrás de todo. Este objeto no será afectado por el alineamiento. Puedes utilizar esto para definir el objeto de "referencia" cuando quieres alinear varios objetos en una fila, por ejemplo. Con las opciones normales de los "límites de la selección" el objeto que se encuentre más a la izquierda será el objeto de referencia (el que no se moverá).

PÁGINA/S: si los objetos se encuentran en una sola página, los límites son los bordes de página. (Esto te permite, por ejemplo, centrar objetos en la página o alinear a partir del borde de página.)

Alineación

Para alinear objetos para que, por ejemplo, sus bordes izquierdos queden alineados a la izquierda:

1. De ser necesario, selecciona los objetos. 2. Selecciona la opción DENTRO deseada, por ejemplo, límites de selección. 3. Selecciona ALINEAR A LA IZQUIERDA para la posición horizontal. 4. Deja la posición vertical SIN CAMBIOS. 5. Haz clic en APLICAR.

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

Todas las opciones de alineación actúan de forma similar. Mostramos solamente el ejemplo de alineación izquierda para ser breves. Experimenta para aprender sobre las otras opciones.

Distribuir

Las opciones de distribución posicionarán los objetos seleccionados de forma regular dentro del área (generalmente los límites de selección, pero también puede ser la página o doble página.)

Todas las opciones de distribución funcionan de forma similar. Los siguientes ejemplos muestran las diferentes opciones verticales para alinear objetos:

DISTRIBUIR BORDES SUPERIORES: las partes superiores de los objetos se distribuyen de forma regular. La distribución de BORDES INFERIORES es la inversa: la parte inferior de los objetos se distribuyen de forma regular.


DISTRIBUIR CENTROS: los centros de los objetos se distribuyen de forma regular.

DISTRIBUIR EN ESPACIOS IGUALES: los objetos presentan espacios regulares entre uno y otro.

Las opciones de posición horizontal son similares, pero funcionan en dirección horizontal.

Si, por ejemplo, quieres distribuir esta colección de elipses para que presenten espacios iguales y sus bordes superiores estén alineados:

• Selecciona las formas • Abre el diálogo de alineación (Ctrl+Mayús+L) • Asegúrate de que la sección DENTRO muestre la

opción LÍMITES DE SELECCIÓN • Selecciona las posición horizontal: distribuir centros • Selecciona la posición vertical: alinear arriba • Haz clic en APLICAR.

Ahora se verán así, con espaciado horizontal equidistante y alineación superior.

Recuerda que si te has equivocado, siempre puedes deshacer la operación.

Copiar estilos: pegar atributos

Esto te permite copiar atributos (como el modelo de línea o el color de relleno) entre objetos. Es una forma rápida de aplicar múltiples atributos a un objeto.

El cuadrado tiene un color, sombra, estilo de línea y relleno específicos. Si se copia y se pegan los atributos al círculo del centro, el resultado será el círculo de la derecha.

1. Selecciona el objeto cuyos atributos quieres copiar. 2. Copia la selección al portapapeles. (EDICIÓN > COPIAR, o Ctrl+C). 3. Selecciona el/los objeto/s a los que quieres aplicar los atributos. 4. Escoge "EDICIÓN > PEGAR ATRIBUTOS" (o "Ctrl+ +A").


El objeto permanece en el portapapeles hasta no ser sustituido por la operación 'copiar' o 'cortar'. Esto te permite repetir la función de 'pegar' todas las veces que quieras.

Librerías de estilos

Es bastante fácil utilizar esta técnica para crear documentos que pueden utilizarse como librerías de estilo. Crea una serie de pequeños objetos con un relleno, color y otros estilos de atributos. Después, la forma más sencilla de utilizar uno de estos estilos es:

• Haz clic sobre el objeto fuente, "Ctrl+C" para copiar el estilo • Ve al objeto de destino (que puede encontrarse en otro documento, "Ctrl+Tab" para

cambiar rápidamente entre documentos), haz clic en el objeto para aplicar el estilo • Pulsa "Ctrl+ +A" para aplicar los atributos

Atención: la mayoría de los atributos pueden copiarse de esta forma, incluyendo sombras, valores de difuminación, estilos de relleno, efectos en vivo, etc.. Sin embargo, los biseles no pueden copiarse de un objeto a otro, si el objeto en el que se tiene que copiar el bisel posee ya un bisel para aplicar a los atributos de bisel.

Nombrar objetos

Puedes aplicar nombres a cualquier objeto del MAGIX Web Designer 6, utilizando la opción "Aplicar, quitar o verificar nombres de objetos" en la barra de información de la HERRAMIENTA DE SELECCIÓN.

La aplicación de nombres es un mecanismo que tiene una variedad de usos que serán explicados a continuación. El uso más común es para formar series de objetos.

Ejemplos del uso de nombres

Animaciones Flash: los nombres para las animaciones Flash se usan para marcar objetos a los que se les añadirán animaciones con el exportador Flash. Lee el capítulo sobre Flash (en la página 283) para más detalles.

Objetos repetidos: se utiliza una convención especial de nombres para identificar un objeto que aparecerá en la misma posición y con la misma forma en múltiples páginas. Esto te permite editar una copia del objeto y actualizar todas las otras copias para que estén iguales. Ver el capítulo "Objetos repetidos" (en la página 114) en Primeros pasos.


El diálogo carece de modo así que puedes cambiar la selección mientras el diáolog esté abierto. Muestra los nombres para la selección actual. El campo de texto superior del diálogo te indica cuántos objetos están seleccionados actualmente.

Añadir nombres

Para añadir un nombre a un objeto, selecciona el objeto y abre el diálogo APLICAR/ELIMINAR NOMBRES utilizando el botón de la BARRA DE INFORMACIÓN DE LA

HERRAMIENTA DE SELECCIÓN.

Introduce el nuevo nombre en el campo "Aplicar nombre" o utiliza la lista desplegable del mismo campo para seleccionar un nombre que ya haya sido utilizado en otra parte del documento actual. Haz clic en AÑADIR. El nombre aparecerá en la lista "NOMBRES

APLICADOS".

Nombres aplicados

El campo de "NOMBRES APLICADOS" te muestra los nombres que se han aplicado en la selección actual. Si hay más de un objeto seleccionado, sólo se mostrará una lista de los nombres aplicados si todos los objetos de la selección tienen la misma serie de nombres. Si no es así, verás la palabra "<muchos>" indicando que se han aplicado distintos nombres para los diferentes objetos de la selección.

Para quitar un nombre de un objeto seleccionado, haz clic en el nombre en la lista "Nombres aplicados" y luego haz clic en el botón ELIMINAR.

Objetos repetidos

En las páginas web es muy común que ciertos elementos se repitan en todas las páginas como, por ejemplo: los botones de navegación, los encabezados o los logos. Web


Designer te ofrece la posibilidad de repetir cualquier elemento en el mismo lugar de las páginas del sitio. Cuando actualices una de las copias, se guardarán los cambios en todas las páginas.

En la mayoría de las plantillas de diseño se repiten los botones principales de navegación. Cuando cambies un botón, como la dirección web o un texto, puedes seleccionar en el menú Arreglo > Actualizar objetos repetidos y se actualizarán los botones en todas las páginas.

Sin embargo, si la barra está configurada como BARRA DE NAVEGACIÓN DEL SITIO aparecerá automáticamente en todas las páginas de tu sitio y no es necesario que utilices la opción Actualizar objetos repetidos para estas barras.

Los textos de logos y pies de página generalmente se configuran como objetos que se repiten. Esto significa que puedes editarlos en una sola página, escoger Arreglo > Actualizar objetos repetidos, y el objeto se actualizará en todas las otras páginas.

Nota: se utiliza la página actual como fuente original para actualizar los elementos repetidos de todas las páginas. Por eso es importante que te asegures de estar en la página correcta antes de seleccionar una opción del menú. La página seleccionada es la que estás utilizando para trabajar y tiene marcadores alrededor de las esquinas de la página. Haz clic en cualquier parte de la página (también en el exterior) para activarla.

Es muy fácil crear tus propios elementos repetidos, sólo tienes que seleccionar cualquier objeto y escoger ARREGLO > REPETIR EN TODAS LAS PÁGINAS.

Se copiará el objeto en el mismo lugar en todas las páginas. Para efectuar más cambios en el elemento seleccionado, selecciona ARREGLO > ACTUALIZAR OBJETOS REPETIDOS para que se actualicen todas las copias.

Si no quieres una copia en la página, sólo tienes que borrarla de esa página. Si vuelves a seleccionar ACTUALIZAR OBJETOS REPETIDOS sólo se actualizarán los elementos que ya existen en la página.

Pies de página

Si quieres que aparezca un pie de página en la parte inferior de todas las páginas, también puedes utilizar el sistema de "Objetos repetidos". Selecciona el elemento (puede ser un elemento individual, un grupo o múltiples elementos) y escoge la opción "REPETIR EN

TODAS LAS PÁGINAS". Esta opción es muy práctica porque coloca los pies de página siempre en el mismo lugar, independientemente de la longitud de la página.

Uso avanzado de objetos repetidos

También puedes hacer que cualquier elemento sea un elemento repetido asignándole un nombre especial de repetición.

• Selecciona el objeto y haz clic en el botón "Aplicar nombre" en el extremo derecho de la barra de información de la herramienta de selección.


• Agrégale un nombre que comience con 'REPEATING:'. Esto debe estar seguido de un nombre exclusivo para ese elemento.

• Haz clic en el botón Añadir para aplicar el nombre.

Si quieres que este objeto se actualice en muchas páginas, primero cópialo manualmente en todas las páginas en las que quieras incluirlo. O utiliza utiliza el menú ARREGLO > REPETIR EN TODAS PÁGINAS.

Ahora, cuando edites o hagas cambios al elemento y selecciones ARREGLO > ACTUALIZAR

OBJETOS REPETIDOS, todas las copias se actualizarán.

Nota: esta función actualiza los objetos repetidos de la página actual en todas las otras páginas que contengan los mismos elementos repetidos. Eso es, sólo las páginas que tengan objetos repetidos se actualizarán (no insertará estos elementos en páginas vacías).

Es importante comprender que los objetos repetidos no se actualizan de forma automática, sino que sólo cuando hayas escogido la opción Arreglo > Actualizar objetos repetidos.

Nota técnica: esta función identifica los nombres "repetidos" y los reemplaza con los elementos correspondientes de la página original (la página seleccionada).

La página seleccionada es aquella en la que estás trabajando y se distingue por los elementos que aparecen alrededor de las esquinas de la página.

Si utilizas la opción del menú REPETIR EN TODAS LAS PÁGINAS, se creará un nombre "Repeating:AutoRepetición" apropiado que se aplicará a todas las copias. A partir de este momento, se actualizará cuando seleccionas "Actualizar objetos repetidos".

Puedes aplicar el nombre repetido a cualquier selección (p.ej.: un grupo de botones) seleccionando todos los botones y aplicando el nombre a toda la selección de una vez. Pero ten en cuenta que si quieres trabajo por separado con distintos objetos en diferentes partes de la página (p.ej.: encabezados y pies de página), éstos deben tener un nombre Repetido distinto (p.ej.: Repetido: pie de página).

Detención de la repetición de objetos

La función ARREGLO > DETENER REPETICIÓN te permite desactivar la naturaleza de repetición de un objeto o en todas las copias de ese objeto en tu sitio web.

Utiliza esta opción cuando, por ejemplo, hayas utilizado ARREGLO > REPETIR EN TODAS LAS

PÁGINAS para copiar un objeto en todas las páginas de tu sitio web, pero luego quieras


modificar dichos objetos para que sean diferentes en cada página de forma que dejen de estar conectados entre sí. Simplemente selecciona uno de los objetos y escoge ARREGLO > DETENER REPETICIÓN. Se te preguntará si quieres dejar de repetir el objeto seleccionado o todas las copias del objeto. Escoge la opción TODOS. Ahora, cada copia puede editarse de forma independiente y la próxima función "Actualizar repetición" no las modificará.

Arreglo > Detener repetición también es útil si quieres crear una copia de un objeto repetido en una página (p.ej. un pie de página o un logo) y no quieres que esa copia se actualice con "Actualizar repetición". En este caso escoge la opción SÓLO ESTA COPIA cuando se te pregunte.

Ten en cuenta que no puedes usar Arreglo > Detener repetición para las barras de navegación con la opción BARRA DE NAVEGACIÓN DEL SITIO activada en el DIÁLOGO DE

BARRAS DE NAVEGACIÓN. Esto es porque las barras de navegación del sitio se actualizan siempre en toda la página. Consulta el capítulo Barras de navegación para más información sobre las barras de navegación del sitio.

Encabezados/Pies de página

Puede ocurrir que tengas páginas de distintas longitudes y que quieras que algunos de los objetos repetidos se inserten en una posición determinada como los encabezados y los pies de página. MAGIX Web Designer 6 realiza esto automáticamente.

La posición del objeto repetido en la página determina si será considerado un encabezado o un pie de página. Los objetos repetidos de la mitad superior de la página se moverán a la misma posición de acuerdo a la altura de cada página. Los otros objetos repetidos (aquellos que no cubran ningún área de la parte superior de la página) se moverán a la misma posición, en relación con la parte inferior de la página.

118 La herramienta de edición de formas

La herramienta de edición de formas

La herramienta de EDICIÓN DE FORMAS es la herramienta principal para crear curvas, líneas y formas precisas, así como para editar y modificar las líneas y las formas.

Añadir/Cambiar/Editar indicador

Crear curva

Crear línea

Unión en curva

Unión marcada

Separar en puntos

Eliminar puntos

Invertir trayectoria

Posición de los controles deslizantes

Suavizado

La barra de información, que se muestra arriba, ofrece una amplia variedad de controles, incluyendo un control numérico muy preciso.

Todas las líneas y formas en MAGIX Web Designer 6 están formadas a partir de una secuencia de curvas y secciones de línea. Muchas veces, las curvas se denominan Bézier, en honor al primer matemático en describirlas.

Estas secciones o segmentos de una línea están señalados por pequeños controles deslizantes negros. Puedes arrastrar, añadir y eliminar estos controles deslizantes para manipular la forma de la línea o contorno.

La herramienta de edición de formas 119

Para dibujar un segmento de línea recto

Para comenzar una línea recta en la herramienta de EDICIÓN DE FORMAS

1. Haz clic donde quieras comenzar la línea. (Puedes comenzar una línea en cualquiera de los extremos; no es necesario trabajar de izquierda a derecha, ni de arriba hacia abajo). Esto crea un control deslizante. Este se ve como un cuadrado rojo para señalar que está seleccionado.

2. De ser necesario, selecciona el botón CONVERTIR EN LÍNEA de la barra de información. (Shortcut L). Esto te garantiza que el próximo clic dibujará un segmento de línea recto.

Haz clic donde quieras colocar el próximo control deslizante o haz clic y arrastra y después suelta el botón del ratón cuando la línea sea correcta. Esto crea un segmento de línea y selecciona el nuevo control deslizante del extremo.

Mezclar líneas curvas y rectas

Para crear un objeto que sea una mezcla de segmentos rectos y curvos, cambia entre los botones CONVERTIR EN CURVA y CONVERTIR EN LÍNEA mientras creas el objeto. (O pulsa L o C de tu teclado).

Para dibujar un segmento de línea curvo:

Esto es similar a iniciar una línea recta (descrito anteriormente).

1. Haz clic donde quieras comenzar la línea. 2. De ser necesario, selecciona el botón CONVERTIR EN CURVA. (Shortcut C) 3. Haz clic o arrastra (igual que lo descrito para las líneas rectas) para crear un segundo

control deslizante y un segmento curvo se añadirá a la línea.


Un segmento curvo tiene CONTROLES DE CURVA asociados con el control deslizante de punto seleccionado. Puedes arrastrarlos para ajustar el ángulo y el radio de la curva.

Extender la línea.

Asegúrate de seleccionar un punto de control deslizante que se encuentre en un extremo (contorno rojo) y después haz clic para añadir una nueva sección de línea o curva. Cada clic sucesivo coloca un nuevo punto de control deslizante y dibuja un nuevo segmento de línea a partir del punto de control deslizante seleccionado.

Finalizar la línea

+ clic completa la línea (manténla seleccionada), o pulsa "Esc" para terminar la línea y deselecciónala. El próximo clic creará una nueva línea.

Añadir un nuevo punto de control

La herramienta de EDICIÓN DE FORMAS tiene tres modos dependiendo si no hay ningún punto de control seleccionado (un clic iniciará una nueva línea), si está seleccionado un control del extremo de la línea (un clic añadirá una nueva sección) o si está seleccionado uno o más controles (puedes arrastrar o cambiar los controles deslizantes).

En el modo actual, la barra de información muestra lo siguiente:

• NUEVO: clic para comenzar una nueva línea. • AÑADIR: clic para extender la línea. • CAMBIAR: arrasta o elimina puntos de control.

Esto sólo es aplicable a la herramienta de edición de formas.


Al final de una línea:

Selecciona la línea, después:

1. De ser necesario, haz clic en el punto de fin para seleccionarlo. 2. Coloca el cursor y haz clic para añadir una nueva sección.

En el medio de una línea:

Selecciona la línea, después:

1. Haz clic sobre la línea para añadir un nuevo punto de control sobre la línea. 2. Arrastra el punto de control a la posición deseada.

Al inicio de una línea:

Si el punto de fin está seleccionado y haces clic sobre el punto de inicio, la forma se cerrará. Esto se describe en "Cerrar una forma". Para añadir un nuevo control deslizante en el inicio de una línea:

1. Termina la línea con + clic. 2. Haz clic en el punto de inicio. 3. Coloca el cursor en posición y haz clic.

Seleccionar múltiples puntos de control

Es posible que quieras seleccionar varios puntos de control para, por ejemplo, eliminarlos o moverlos como un grupo o cambiar una región de puntos a líneas curvas o rectas. Para esto:

1. Selecciona un punto de control con un clic. 2. +clic sobre otros puntos de control para seleccionarlos. ( +clic también elimina la

selección). - O +Ctrl+clic sobre un punto de control para seleccionar todos los puntos de

control de la línea. - O arrastra el cursor del ratón diagonalmente para crear un rectángulo de

selección. Todos los puntos de control que se encuentren dentro del rectángulo se seleccionarán.


- O + arrastra el cursor del ratón diagonalmente para crear un rectángulo de selección. Esto añade todos los puntos dentro del rectángulo a aquellos que ya están seleccionados.

3. Si la línea tiene uno o más puntos de control seleccionados: - Fin mueve la selección al final de la línea. - Inicio mueve la selección al comienzo de la línea. - Tab mueve la selección al próximo punto de control hacia el fin de la línea. - +tab mueve la selección al próximo punto de control hacia el inicio de la línea.

Los puntos de inicio y fin son importantes cuando se aplican flechas.

Eliminar puntos

Selecciona el o los puntos de control tal como se describe anteriormente y haz clic sobre el botón ELIMINAR PUNTOS (barra de información del EDITOR DE FORMAS) o pulsa la tecla Supr.

Mover puntos de control - Herramienta de edición de formas

Puedes mover el o los controles deslizantes seleccionados:

• Arrastra los controles deslizantes usando el ratón. • O utiliza las teclas de flechas de tu teclado.

O para mover un solo control deslizante, introduce los valores nuevos en los campos de texto de la barra de información (ver más abajo).

Utilización de los campos de texto de la barra de información

Los dos campos de texto centrales siempre muestran las coordenadas X/Y del punto seleccionado.

Los campos X/Y de al lado indican las coordenadas de los controles deslizantes de curva a cada lado del punto seleccionado.

Por defecto, las coordenadas X/Y se miden a partir de la esquina inferior izquierda de la página. Puedes cambiar esto en la pestaña "Cuadrícula y regla (en la página 334)" en el diálogo de opciones.


Si el punto seleccionado se encuentra al final de una sección de línea curva, los campos izquierdos muestran la longitud y el ángulo de la línea. Puedes ajustar estos valores introduciendo uno nuevo y pulsando Intro.

Longitud y ángulo para la línea recta

Posición del punto seleccionado

Posición del control de la curva

Suavizar una línea

Solo con herramienta de edición de forma.

Las formas importadas de un examinador pueden contener puntos innecesarios sobre las líneas. Las líneas con demasiados puntos pueden ser poco manejables y reducir la velocidad de renderización. MAGIX Web Designer 6 puede suavizar la línea para eliminar puntos innecesarios.

Selecciona todos los puntos de la parte de la línea que quieres suavizar. (Lee más arriba). Es probable que la forma más sencilla de seleccionar una gran cantidad de puntos sea la selección con arrastre sobre la región en la HERRAMIENTA DE EDICIÓN DE FORMAS.

Arrastra la barra de suavizado del final de la barra de información de la EDICIÓN DE FORMAS.

Los puntos eliminados se recuerdan para que puedas realizar otros cambios al suavizado de la línea con solo ajustar la barra deslizante. Los puntos eliminados se eliminan cuando realizas otra edición a la línea como, por ejemplo, arrastrar un control deslizante.


Consejo: para asegurarte de que no se borren puntos importantes, comprueba que no estén seleccionados. ( +clic sobre un punto seleccionado para eliminar la selección).

Restringir la línea

Cuando arrastras un punto de control y pulsas la tecla de restricción (Ctrl), el movimiento se limitará al ángulo de restricción (controlado en el diálogo de OPCIONES, en la pestaña GENERAL). Al arrastrar un control deslizante de curva, el ángulo está restringido.

Cambiar curvas

Uso del control de curva

Arrastrar el control de curva ajustará la curva de los segmentos de curva contiguos.

Mueve los controles deslizantes de curva hacia o desde el punto de control para arrastrar la curva en la dirección requerida.

Arrastrar el segmento de línea

También puedes cambiar la curva, arrastrando el segmento de línea entre los puntos.

Nota la diferencia entre arrastrar una línea para cambiar su forma y hacer clic en la línea para añadir un nuevo punto de control. Arrastrar un segmento de línea recto lo cambia a un segmento de línea curvo.


Crear uniones en punta

Generalmente, MAGIX Web Designer 6 dibuja una curva suave a través de un punto de control. Para esto, los dos controles de curva a cada lado del punto de control están unidos. Si se mueve un control de curva, también se moverá el otro.

Muchas veces quieres crear una unión en punta. Para esto, necesitas desvincular los controles de curva:

1. Haz doble clic sobre el punto de control. 2. O selecciona el punto de control y:

Haz clic sobre el botón UNIÓN EN PUNTA Z o pulsa Z en tu teclado.

Ahora puedes mover cada control de curva de forma independiente.

Crear uniones en curva

Para convertir una unión en punta en una curva:

1. Haz doble clic sobre el punto de control. 2. O selecciona el punto de control y:

Haz clic sobre el botón UNIÓN EN CURVA S o pulsa S en tu teclado.

Los dos controles de curva se han vinculado y se mueven a lados opuestos del punto de control. Esto puede cambiar la forma de la curva.

Convertir una línea recta en una curva (y viceversa)

1. Selecciona los puntos de control de los dos finales del segmento de línea. 2. Haz clic en CONVERTIR EN LÍNEA o CONVERTIR EN CURVA en la barra de información o

pulsa L o C en tu teclado.


Después de cambiar el tipo de línea, es posible que quieras mover los controles de curva para una transición más suave entre los segmentos de línea curvos y rectos.

Puedes seleccionar varios segmentos de línea y convertirlos. Los puntos de control de ambos extremos del segmento deben estar seleccionados.

Unir líneas

Para unir líneas ambas tienen que estar seleccionadas (los deslizantes de punto se muestran en ambas líneas):

Con la herramienta de SELECCIÓN, mantén presionado " " y haz clic en las línea para seleccionarlas (si ya te encuentras en la herramienta de EDICIÓN DE FORMAS, pulsa "Alt + S" si quieres ir a la herramienta de SELECCIÓN, para seleccionar la segunda línea, presiona " + clic", y luego "Alt + S" para volver a la herramienta de EDICIÓN DE FORMAS.

El modo de selección de objetos está explicado en detalle en el capítulo "Selección de objetos (en la página 89)".

Una vez que ambos objetos están seleccionados, en la herramienta de EDICIÓN DE

FORMAS, arrastra el control deslizante del extremo de la línea hasta el extremo de la otra línea. Mientras arrastras, el cursor del ratón mostrará un símbolo + para indicar que las líneas se unirán.

Si los extremos de ambas líneas ya se encuentran uno muy cerca del otro, pero no están unidos, puedes ampliar el tamaño con el zoom, o alejar el punto de fin y después volverlo a arrastrar para llevarlo hasta el punto de fin y ver el "+" que indica que las líneas se unirán.

Para crear una forma con relleno, arrastra los otros dos controles deslizantes de fin para que se unan. Puesto que unes los controles deslizantes de fin, sólo puedes unir líneas y no


formas. Las formas son objetos cerrados y, por lo tanto, no tienen controles deslizantes de fin.

Separar una forma

Si quieres separar una línea o una forma: selecciona un punto de control existente de la línea o contorno de la forma, o crea uno nuevo donde quieres separar la línea (clic sobre la línea en la herramienta de EDICIÓN DE FORMAS; ver arriba).

Haz clic sobre el botón SEPARAR EN PUNTOS o pulsa la B de tu teclado.

Si separas una línea, el cambio no será visible. Sin embargo, si mueves un punto de control, solo se moverá una parte de la línea. Si separas una forma, se convertirá en una línea. El relleno desaparecerá.

Nota: cortar formas (parte de Arreglo > Combinar formas) te permite separar formas en dos formas individuales. Esta función se describe en el capítulo Trabajar con formas (en la página 130).

Cerrar una forma

Una forma es un objeto cerrado sin controles de inicio ni fin. Sólo las formas pueden tener un relleno de color.

Para cerrar una forma:

1. Crea un objeto abierto cuyo punto de control de fin se encuentre cerca del punto de control de inicio. Todos los puntos de control, salvo el de fin, deberían encontrarse en las posiciones deseadas.

2. Coloca el cursor sobre el control deslizante de fin. 3. Arrastra el control deslizante de fin hasta el control

deslizante de inicio y suelta la tecla del ratón. Los dos controles deslizantes se unirán.

O:


1. Crea un objeto abierto con todos los controles deslizantes en sus posiciones correctas. No dibujes el segmento de línea final.

2. Mueve el cursor sobre el punto de inicio. Aparecerá un + a la derecha del cursor cuando se encuentre sobre el control deslizante de inicio.

3. Haz clic para crear el segmento final de la línea y cerrar la forma.

O:

1. Escoge la herramienta de EDICIÓN DE FORMAS. 2. Haz clic sobre un punto de fin para seleccionarlo. 3. Pulsa la tecla "↵".

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

Manejo de formas 129

Manejo de formas

Combinar formas

La opción del menú ARREGLO > COMBINAR FORMAS te ofrece una amplia gama de opciones avanzadas para combinar formas con el objetivo de crear nuevas formas como, añadir, separar o cortar. Puedes utilizar la combinación de formas en cualquier tipo de objeto, incluido los mapas de bits.

Crear agujeros en las formas

Escoge ARREGLO> COMBINAR FORMAS > SUSTRAER FORMAS. Esto es similar a utilizar unir formas (descrito anteriormente). Las diferencias son:

• La forma de arriba (o el grupo de arriba) recibe un agujero de las otras formas. • Los atributos y colores de línea de las formas subyacentes no se modificarán. • Combinar formas modifica las líneas físicamente. La única forma de restaurar las formas

originales es utilizar deshacer. • La cantidad de formas superpuestas no tiene efecto.

Fusionar varias formas en una sola

Por ejemplo, para crear la forma de la derecha a partir de las tres formas de la izquierda:

1. Crea dos círculos y el rectángulo. 2. Selecciona las tres formas. 3. Escoge ARREGLO> COMBINAR FORMAS > AÑADIR FORMAS.

La nueva forma tomará los atributos y colores de la forma de arriba (en este caso el rectángulo de la ilustración.)

130 Manejo de formas

Intersección de formas

Con FORMAS DE INTERSECCIÓN, el nuevo objeto se crea de esas partes de las formas inferiores que están cubiertas por el objeto de arriba.

Selecciona las formas que quieres utilizar y la forma de arriba.

Escoge ARREGLO> COMBINAR FORMAS > FORMAS

DE INTERSECCIÓN. Esto crea una nueva forma. La forma de arriba desaparece.

Los atributos y colores de línea de las formas subyacentes no se modificarán. Las áreas no cubiertas por la forma de arriba se eliminarán. La forma de arriba puede ser un grupo para una sustracción para completa. (Los grupos se describen en el capítulo Manejo de objetos (en la página 107)).

Cortar formas

MAGIX Web Designer 6 te permite cortar formas en dos o más partes. Puedes usar un objeto sólido o una línea. Por ejemplo, para cortar un segmento de un círculo:

1. Crea un círculo y un triángulo arriba 2. Selecciónalos. 3. Escoge ARREGLO> COMBINAR FORMAS >

CORTAR FORMAS. Las esquinas del triángulo cortarán el círculo en dos formas. El triángulo desaparecerá.

4. Ahora puedes arrastrar el segmento fuera del círculo.

También puedes utilizar una línea para cortar un objeto:


La línea debería estar dibujada completamente a través del objeto y extenderse más allá. (Como se muestra en la ilustración.) Si la línea es demasiado corta, sólo se realizará un pequeño corte.

Cambiar el ancho de línea (grosor)

Para cambiar el ancho de la línea o del contorno de una forma, primero selecciona el objeto o los objetos:

Introduce un nuevo valor para el ancho de línea en el campo de texto de la barra de control ESTÁNDAR o escoge del menú uno de los grosores de línea por defecto.

El grosor de la línea se mide tradicionalmente en puntos (abreviación: pt). 1 punto es 1/72 de una pulgada o aprox. 0,3mm, o un poco menos del grosor de un píxel de pantalla si se visualiza al 100% del zoom.

Puedes introducir el valor del ancho en cualquier unidad y MAGIX Web Designer 6 lo convertirá al número correcto de puntos. Por ejemplo, puedes introducir 0,5cm y obtendrás una línea con un grosor de medio centímetro, pero el campo del ancho de línea indicará un valor cercano a 14pt.

Si no has seleccionado ningún objeto y cambias el valor del grosor de la línea, esto cambiará el ancho por defecto para todas las nuevas líneas.

Galería de líneas

La GALERÍA DE LÍNEAS puede utilizarse para aplicar una gama de estilos o atributos de línea como, plantillas con guiones, puntas de flecha y más.

Para ver la GALERÍA DE LÍNEAS:

• Escoge "HERRAMIENTAS > GALERÍAS > GALERÍA DE LÍNEAS" ("F12"). • O haz clic en el botón de GALERÍA DE LÍNEAS en la barra de control de GALERÍAS.


La GALERÍA DE LÍNEAS está separada en secciones. Para abrir o cerrar una sección, haz clic en el pequeño icono de carpeta de la ventana de la galería.

Ancho de línea

Tipo de unión

Extremo de línea

Para aplicar cualquier estilo o atributo de línea desde la galería puedes:

• Arrastrar y soltar el estilo deseado desde la galería hasta la forma o línea. • O hacer doble clic sobre el estilo deseado en la galería. • O selecciona el estilo y después haz clic sobre el botón APLICAR.

Ancho de línea

El campo de texto que se encuentra arriba de la galería es una copia del campo de texto de la barra de control ESTÁNDAR.

Modelo de guión

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

Puntas de flecha

La forma más sencilla de aplicar una punta de flecha es arrastrar y soltar la punta de flecha desde la galería hasta el extremo apropiado de la línea.

Como alternativa para aplicar una punta de flecha:

• Haz doble clic sobre la punta de flecha en la galería. • O selecciona la punta de flecha deseada y pulsa APLICAR.


Web Designer tiene dos tipos de diseños de flecha: comienzo y fin. Si la línea ya tiene, por ejemplo, una punta de flecha de comienzo, la punta de flecha aplicada se colocará automáticamente en el extremo final de la línea.

Si la línea no tiene puntas de flecha y pulsas el botón APLICAR o haces doble clic sobre un estilo para aplicarlo, la punta de flecha se colocará al final de la línea.

El tamaño de la punta de flecha depende del ancho de la línea. Las líneas más anchas tendrán puntas de flecha proporcionalmente más grandes.

Si pulsas "Ctrl" y haces doble clic sobre una punta de flecha o estilo de final se aplicará en el otro extremo de la línea.

Cambiar el tipo de unión

Este control en la parte superior de la GALERÍA DE LÍNEAS configura el estilo de las esquinas.

Para cambiar una línea existente, selecciona la línea. Para cambiar el tipo de unión actual, deselecciona todas las líneas. Selecciona el tipo deseado del menú.

Cambiar extremo de línea

Este control en la parte superior de la GALERÍA DE LÍNEAS configura el estilo de los extremos de la línea.

Para cambiar una línea existente, selecciona la línea. Para cambiar el extremo de línea por defecto, deselecciona todas las líneas. Selecciona el tipo deseado del menú.


Crear rectángulos y cuadrados

Para crear un rectángulo:

• O utiliza la herramienta de RECTÁNGULO (" + F3" o "M").

Haz clic y arrastra para dibujar un nuevo rectángulo.

Crear un cuadrado

Para crear un cuadrado en vez de un rectángulo, pulsa Ctrl mientras arrastras.

Creación y edición de rectángulos con esquinas redondeadas

Para que las esquinas de tu rectángulo sean redondeadas, selecciónalo y luego pulsa el botón "Esquinas redondeadas" en la barra de información de la HERRAMIENTA DE SELECCIÓN.

Puedes arrastrar los controles deslizantes de las esquinas para ajustar el diámetro de las esquinas redondeadas.

Para cambiar el tamaño de los rectángulos ve a la HERRAMIENTA DE RECTÁNGULO (y arrastra los controles deslizantes de las esquinas) o a la HERRAMIENTA DE SELECCIÓN.

Ten en cuenta que si cambias la relación de aspecto de una esquina redondeada de un rectángulo utilizando la herramienta de selección (extendiendo sólo una dimensión), la relación de aspecto de las esquinas redondeadas no cambiará. Pero si seleccionas varios objetos o si extiendes un grupo con un rectángulo con esquinas redondeadas, la relación de aspecto de las esquinas no se mantendrá.


Crear círculos y elipses

Para crear una elipse o un círculo:

Selecciona la herramienta de ELIPSES ("Shift + F4" o "L").

Los botones RADIO Y DIÁMETRO crean automáticamente círculos.

Radio

Diámetro

Creación con límites

Con el botón de CREACIÓN CON LÍMITES seleccionado, arrastra el ratón a través del lienzo y se creará una elipse. Para crear un círculo en vez de una elipse, pulsa "Ctrl" mientras arrastras.

Selecciona la opción RADIO para dibujar círculos. El lugar en dónde empieces a arrastrar será el centro del círculo.

Selecciona la opción DIÁMETRO. Ahora el lugar en dónde empieces a arrastrar determinará el borde del círculo.

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

136 Trabajar con colores

Trabajar con colores

MAGIX Web Designer 6 te permite controlar la aplicación, creación y modificación de los colores de los objetos. Para documentos simples, puedes escoger los colores de la paleta de colores en pantalla, la línea de colores. Las operaciones de color más avanzadas se describen más adelante.

La línea de color

La línea de color se muestra en la parte inferior de la ventana. Te permite ver los colores de relleno y línea, te da acceso al editor de colores y te provee la paleta de colores predefinidos incluyendo la opción "sin color".

MUESTRA DE COLOR: la parte exterior de la muestra de color en el extremo izquierdo muestra la línea de colores, mientras que el centro muestra el color de relleno. Estos son los colores de cualquier objeto seleccionado o los atributos de color actuales si no se ha seleccionado ningún objeto.

Este botón permite el acceso al editor de color (en la página 140).

SELECTOR DE COLOR: usa la pipeta para escoger un color de cualquier parte del documento o cualquier parte de la pantalla del ordenador. Consulta Usar la pipeta para escoger colores (en la página 141), para más detalles.

SIN COLOR: haciendo clic aquí puedes aplicar un "relleno sin color". Con "Shift+clic" puedes aplicar "sin color" a una línea. Ten en cuenta que no es el mismo que 100 % transparente. "Sin color" y transparencia son diferentes. Una forma con transparencia aplicada sigue siendo una forma sólida, mientras que una forma rellena con "sin color" queda hueca. El botón SIN COLOR también se puede utilizar para restaurar los colores originales de una foto a la que se le haya aplicado un color continuo.

Color de relleno actual

Color de línea actual

Si la longitud de la línea de color excede la ventana, puedes desplazarte por la línea de color con la barra de desplazamiento inferior o arrastrando la línea de color con "Alt + arrastrar".

MAGIX Web Designer 6 te suministra varias opciones para el tamaño visualizado del color de línea (descrito en Personalización de Web Designer)

Trabajar con colores 137

Colores de la línea de colores

Colores con nombre (originales): primero se encuentran los colores con nombre (si se encuentran presentes en el documento, ver más abajo). Los colores con nombre se utilizan para asignar colores originales a las plantillas y diseños, para que el esquema de color de un diseño pueda cambiarse sin tener que editar cada objeto de forma individual.

Colores vinculados: son aquellos colores que están relacionados con una sombra o un matiz y se muestran de forma diferente en la línea de color (pequeños rectángulos redondeados), de modo que resulta mucho más fácil distinguir los colores con nombres independientes de aquellos que están vinculados a un color principal. Leer el capítulo Creación de un tinte, una tonalidad o un color vinculado (en la página 145).

Colores de paleta: hay una paleta "estándar" de 46 colores predefinidos. Hay 5 sombras de 7 colores estándar y 10 sombras de grises, negros y blancos. Los colores de la paleta estándar no se pueden editar (es decir, no son colores con nombre) y tienen una selección simple y limitada de colores que se utilizan para aplicarlos a objetos (ya sea arrastrando hasta el objeto o mediante clic).

Los marcadores pequeños en los iconos de color muestran cuál de los colores con nombre (si hay alguno) o colores de paleta se han aplicados al objeto seleccionado.

Los marcadores en forma de rombo muestran los colores usados por los objetos seleccionados. Un rombo en la esquina superior izquierda indica el color de relleno, en la esquina superior derecha indica el color de línea.

Los marcadores en forma de cruz muestran los atributos de color activo, si no hay ningún objeto seleccionado. El color de línea a la derecha, el color de relleno a la izquierda.

Los marcadores triangulares muestran los colores de un relleno si has aplicado alguno.

Esto funciona también escogiendo un color con el selector de color de un objeto existente, consulta Usar la pipeta para escoger colores (en la página 141). Los marcadores de línea de colores se actualizan inmediatamente e indican el color del objeto bajo la pipeta al arrastrarlo alrededor.

Reordenar los colores de la línea de color.

Es posible que prefieras cambiar el orden de los colores de la línea de color. Simplemente pulsa Ctrl y arrastra los colores sobre la línea. Con esto también se reordenará la GALERÍA

DE COLORES. Sólo los colores con nombre pueden ser reorganizados en la línea de color.

Menú contextual de la línea de colores

Haz clic derecho sobre un color de la línea de colores para ver un menú contextual con las siguientes opciones:


EDITAR Abre el editor de color con el color seleccionado (no disponible para los colores de la paleta)

ESTABLECER COLOR DE RELLENO

/ ESTABLECER COLOR DE LÍNEA Configura este color como el color de relleno o de línea del objeto seleccionado

RENOMBRAR Cambiar el nombre del color con nombre (no disponible para los colores de paleta)

ELIMINAR Borra el color con nombre (no disponible para los colores de paleta)

Si el objeto seleccionado es un mapa de bits, las opciones de color de relleno y línea se reemplazarán con ESTABLECER COLOR OSCURO DE TONO CONTINUO / ESTABLECER COLOR

CLARO DE TONO CONTINUO. Lee Coloreado de mapa de bits (en la página 183) para más información.

Con un clic derecho sobre la opción "sin color", las opciones de color de relleno y línea se reemplazarán por ELIMINAR COLOR DE RELLENO / ELIMINAR COLOR DE LÍNEA. Esto configura los atributos del objeto seleccionado a "sin color".

Aplicación de colores de relleno y línea mediante arrastrar y soltar

• Para aplicar un color de relleno a un objeto (seleccionado o sin seleccionar), arrastra un color desde la línea de colores y suéltalo en el centro de la forma.

• Para establecer el color de línea o contorno, suelta el color sobre el contorno en vez de en el centro.

• Para cambiar el color actual de relleno, arrastra un color a un espacio en blanco. • Para cambiar el color de fondo de la página, pulsa "Ctrl" y arrastra un color hasta el

fondo de página.

Al arrastrar colores, un indicador al lado del cursor te dirá cuál será el efecto al soltar el color:

Establecer un color de relleno liso (cuando se arrastra sobre un objeto) o los colores intermedios de un relleno multicolor (en la página 186).

Establecer color de línea (cuando se arrastra sobre una línea).

Establecer color de relleno actual (cuando se arrastra sobre un espacio vacío).

Establecer color de inicio de relleno con gradación (cuando se arrastra sobre el inicio de un relleno).

Establecer color de fin de relleno con gradación (cuando se arrastra sobre el fin de un relleno).


Establecer color de fondo de página (cuando se arrastra un color hasta la página).

En vez de arrastrar y soltar, si has seleccionado un objeto, puedes hacer un simple clic sobre la línea de color. Se abrirá un menú contextual de la línea de color en dónde puedes definir el color de línea y de relleno.

En los otros casos, puedes modificar el color de la línea con "Shift" + clic sobre la línea de color.

Si has seleccionado una foto o una forma con relleno de mapa de bits, un clic sobre el color de línea aplicará un color continuo al mapa de bits. Esto significa, que el mapa de bits se convertirá a una escala de grises (blanco y negro) y el color seleccionado se usará como un color claro de tono continuo. En general, el color continuo negro es negro. Puedes configurar ambos colores continuos a través del menú contextual de la línea de colores (lee más arriba). Lee Coloreado de mapa de bits (en la página 183) para más información.

Para establecer la opción "sin color" a un relleno o línea, realiza la función descrita anteriormente, pero escoge la opción "Sin color" en vez de un color.

Editar el color de un objeto

Selecciona el objeto cuyo color quieres cambiar.

Para editar el color de relleno del objeto o objetos seleccionados

• Escoge HERRAMIENTAS > EDITOR DE COLOR (shortcut Ctrl+E). • O haz clic sobre el icono del EDITOR DE COLOR en la línea de colores. • O haz doble clic sobre el panel de color del relleno actual sobre la línea de color.

Para editar el color de línea del objeto o objetos seleccionados

• Haz clic derecho (o +clic) sobre el icono del EDITOR DE COLOR • O haz doble clic sobre el panel de color del línea actual.

Esto muestra el EDITOR DE COLOR que te permite seleccionar cualquier color del espectro. A diferencia de la mayoría de los programas gráficos, el Editor de color puede permanecer en pantalla mientras continúas trabajando. Cambia para reflejar el color de los objetos seleccionados, lo que te permite ajustar el color rápidamente.


El editor de color

El editor de color se utiliza para cambiar el color de los objetos del documento.

Cuando edites el color puedes arrastrar la pipeta para escoger colores de la pantalla, incluso de otras ventanas abiertas

Selecciona el color a editar: Color de relleno/color de línea del objeto seleccionado o cualquier color con nombre (original)


Haz clic para mostrar los controles de color ampliados

Color anterior

Color actual

Arrastra hacia aquí para seleccionar cualquier tonalidad del tono seleccionado

Arrastra hacia aquí para seleccionar cualquier tono

La forma más fácil de crear un nuevo color es seleccionar un tinte de la línea de color inferior. Todos los matices de este tinte se verán en la sección superior, por lo que podrás hacer clic o arrastrar desde la sección superior para seleccionar el nuevo color. Verás que los objetos seleccionados cambian de color a medida que los ajustas en el editor de color ("Vista previa en vivo").

Por ejemplo, para seleccionar un color rosa, que es un matiz pálido del rojo, selecciona el color rojo en la sección inferior y después escoge un rojo muy pálido (rosa) en el área superior derecha de la sección superior.

Color previo y actual

Mientras arrastras hasta el editor de color, las dos pequeñas muestras que se encuentran en la esquina superior derecha del Editor de color muestran el color actual y el previo (antes de que comenzaras con la edición). Esto es útil cuando quieres realizar un cambio pequeño y comparar entre el color nuevo y el anterior.


Usar la pipeta para escoger colores

En vez de seleccionar tintes y tonalidades en el EDITOR DE COLOR puedes escoger un color de cualquier parte del documento o de tu monitor, incluso de otras ventanas y programas.

Para ello haz clic y arrastra la pipeta. A medida que arrastras verás que el Editor de Color toma el color que se encuentra debajo de la pipeta. Suelta el botón del ratón cuando tengas el color deseado. Esta es una forma fácil y rápida de utilizar el mismo color o copiar colores de un objeto a otro.

El selector de color no escoge por sí solo el color de pantalla (RGB). En cambio, si señalas una forma con un color de relleno sólido, el selector tomará una muestra del color actual de esa forma, incluyendo el modelo de color (RGB, HSV o CMYK), de forma tal que el color es copiado de manera exacta en el objeto(s) seleccionado. Si el color elegido es un color con nombre o de paleta, en vez de copiar simplemente el color, el selector de color aplicará el mismo color al objeto(s) seleccionado.

Si el objeto bajo el cursor del ratón es complejo (p.ej. tiene transparencia aplicada) y el color no puede ser determinado, el color RGB de pantalla es aplicado.

El muestreo de color enseña un pequeño popup en el cursor del ratón que indica el color que está siendo seleccionado en ese punto. Se tratará o bien del nombre de color de paleta, el nombre de un color con nombre, o el modelo de color y valor del color.

Sin embargo, si quieres usar muy seguido el mismo color, se recomienda que en su lugar uses un color con nombre.

Operaciones de color avanzadas

Haz clic sobre VER OPCIONES AVANZADAS en el editor de color para ver la parte inferior del diálogo que te ofrece más opciones.

Sin color de relleno

Valores de colores HSV

Valor de color hex RGB

Para leer más sobre tipos de colores, consulta el capítulo Creación de un tinte, una tonalidad o un color vinculado (en la página 145).


Aquí puedes introducir valores precisos RGB (o HSV). En general, se introduce un color hexadecimal RGB para los gráficos web. Los campos H, S y V te permiten especificar el color con un valor porcentual HSV (valor de saturación de tinte). En el campo # puedes introducir el valor RGB en números hexadecimales (0-F).

Aquí también están disponibles los botones de "Sin color de relleno" y de "Ayuda".

Colores locales y colores originales

Web Designer tiene dos tipos de colores:

• Los COLORES LOCALES se utilizan en un sólo lugar del documento. Cada objeto tiene un color por separado y nada se comparte. Esto es útil cuando quieres cambiar el color de un objeto sin afectar otros objetos. Los colores locales son el método más sencillo para documentos simples que utilizan relativamente pocos colores. "Aplicar color" y "Editar el color de un objeto" explicados anteriormente se refieren al trabajo con colores locales.

• Los COLORES ORIGINALES (O COLORES CON NOMBRE) pueden utilizarse una y otra vez en el documento. (Son el equivalente a los estilos de un procesador de textos.) Los colores originales se utilizan en las plantillas y brindan un aspecto consistente a los elementos de la página como los botones o las barras de navegación. Cualquier edición que se realice a un color con nombre se reflejará en todos los objetos o partes del dibujo que usen ese color. También puedes copiar colores originales entre documentos. Si el diseño ya tiene colores originales y cargas o pegas plantillas de la galería de diseños que contengan colores originales con el mismo nombre, el programa te preguntará si quieres que el color original importado sea igual que los ya existentes. Se le adjudican nombres consistentes a los colores originales de las plantillas para que coincidan con los diferentes colores originales de los elementos que importes.

IMPORTANTE: si seleccionas un objeto de la página que tiene un COLOR CON NOMBRE y lo modificas con el editor de color, el color se convertirá en un COLOR LOCAL en vez de un COLOR CON NOMBRE. Si lo que quieres hacer es cambiar el COLOR CON NOMBRE y todas las veces en las que se utiliza, entonces debes editar el COLOR CON NOMBRE (en la página 144)).

Esquemas de colores temáticos

Muchos de los temas web ofrecidos en la GALERÍA DE DISEÑOS y en los paquetes de plantillas que pueden adquirirse de forma separada incluyen esquemas de colores alternativos que pueden aplicarse fácilmente a los sitios web que utilizan el mismo tema para transformar el esquema de color de forma instantánea. Los esquemas de colores se encuentran en general en la galería de diseños en cada tema después de todos los diseños y elementos gráficos independientes que conforman el tema. Todos tienen el mismo "esquema de colores" en sus títulos en la galería de diseños, por lo que pueden identificarse fácilmente.

Para aplicar un esquema de colores a tu sitio web, simplemente arrastra el esquema desde la galería de diseños y suéltalo en tu página. Puedes intentar aplicar los esquemas de colores de un tema a un sitio web creado a partir de plantillas de otro tema. Pero


obtendrás resultados mezclados y algunos esquemas no funcionarán de forma aceptable con algunos temas. Por lo tanto, para mejores resultados, utiliza los esquemas de colores del tema que has utilizado para crear tu sitio.

Uno de los esquemas de colores suministrados con cada tema concuerda con los colores por defecto utilizados por ese tema. Esto te permite regresar fácilmente a los colores originales, si lo prefieres, después de experimentar con esquemas alternativos.

Por supuesto, no es necesario que utilices los esquemas de colores incluidos para cambiar los colores de tu sitio web. Puedes personalizar los colores del tema y elegir la combinación de colores que te guste. Consulta "Edición de colores con nombre (en la página 144)".

Creación de tus propios esquemas de colores

Es muy fácil crear tus archivos de esquemas de colores, que puedes compartir con los usuarios de Web Designer para que ellos los utilicen en las páginas web creadas con el mismo tema.

1. Carga una de las plantillas de página para el tema. Escoge una que muestre todos los colores del tema de forma más efectiva. De ser necesario, puedes agregar más elementos a la página para incluir toda la gama de colores temáticos.

2. Edita los colores con nombre del tema uno por vez, tal como se describe a continuación en la sección "Edición de colores con nombre" (en la página 144).

3. Una vez que estés satisfecho con tu nuevo esquema de colores, utiliza ARCHIVO > GUARDAR COMO para guardarlo. El nombre de archivo que escojas DEBE incluir "ThemeColorScheme" como parte del nombre del archivo. Esta es la forma en que Web Designer reconoce los archivos de esquema de colores, es decir, al buscar esa secuencia en el nombre del archivo. También es una buena idea incluir el nombre del tema relacionado con el esquema. Por ejemplo, si es un esquema de colores azules para el tema "Beta", podrías llamarlo "BetaThemeColorSchemeAzul.web".

Para comprobar tu esquema de colores, arrástralo y suéltalo desde el explorador de archivos hasta la página con los colores temáticos por defecto. La página debería cambiar de color instantáneamente con tu esquema de colores.

Creación de nuevos colores con nombre

Si quieres usar el mismo color en diferentes partes del dibujo, y si existe la probabilidad de que quieras cambiarle el color en el futuro, se recomienda que crees un COLOR CON

NOMBRE. Esto es fácil en MAGIX Web Designer 6:

Selecciona el objeto que tiene el color que quieres usar y luego haz clic en NUEVO COLOR

CON NOMBRE en el EDITOR DE COLOR.


Haz clic para crear un nuevo color con nombre

Asígnale al color un nombre adecuado, como "color del coche" y haz clic en crear. Verás el color nuevo añadido en la LÍNEA DE

COLOR.

Ahora podrás aplicar el color a cualquier objeto como lo haces habitualmente, arrastrándolo de la línea de color y luego soltándolo, o sólo haciendo clic (o haciendo clic en el botón derecho para usarlo como línea de color) para aplicarlo como color de relleno.

Cuando editas un color con nombre, todos los objetos que usen este color cambiarán.

Editar colores con nombre

Para poder ver el color con nombre en el EDITOR DE COLOR,y así poder editarlo, selecciona el EDITOR DE COLOR o arrastra y suelta el color de la línea de colores al EDITOR DE COLOR.

Ahora podrás editar el color como lo desees. Todos los objetos que utilizan ese color se actualizarán automáticamente para mostrar el nuevo color.

Para cambiar el nombre de un COLOR CON NOMBRE, haz clic derecho sobre el EDITOR DE

COLOR y selecciona RENOMBRAR o haz clic derecho sobre el color en la línea de colores y selecciona RENOMBRAR.

Para eliminar un color con nombre, haz clic derecho sobre el color en la línea de color y selecciona ELIMINAR.

Colores normales, tintes, tonalidades y colores vinculados

Colores normales

Estos son los colores individuales que aplicas a los objetos.

MAGIX Web Designer 6 también puede vincular un color a otro color, es decir, cuando cambia el color principal, el color vinculado también cambiará. Hay tres formas de vincular un color a su: TINTE, TONALIDAD y COLORES VINCULADOS. Esta es una técnica muy útil que te permite, por ejemplo, volver a cambiar el color un dibujo con tonalidades complejas con un sólo clic. Algunos de los cliparts modelo utilizan esta técnica.


Tintes

Los tintes están vinculados a otros colores (llamados colores principales) y son siempre una versión más pálida que el principal. Tienen dos usos principales:

• Cuando quieres crear tonalidades más pálidas de un color principal y es posible que quieras cambiar el color principal en el futuro y que los tintes se actualicen automáticamente.

• Para extender el rango de colores disponibles de las tintas de impresión. Por ejemplo, un tinte 25% rojo resulta en un color rosa. Por lo tanto, utilizando tinta roja puedes obtener tanto un rojo puro como un rosa. De la misma forma, si estás utilizando solamente tinta negra y blanca, podrás crear varias tonalidades de gris. Si estás imprimiendo con una gama limitada de colores (generalmente es más económico imprimir a uno o dos colores en vez de a todo color).

Un tinte puede estar basado en cualquier tipo de color, incluyendo otro tinte.

Cualquier cambio que se realice al color principal, también cambiará a los tintes basados en él. Por ejemplo, es posible que definas un color rosa como 50% del color principal rojo. Si cambias el color principal a naranja, el tinte cambiará de rosa a naranja claro.

Tonalidades

Esto permite crear colores más claros y más oscuros basados en un color principal. Si se cambia el color principal, se modificarán también las tonalidades asociadas. Por ejemplo, un dibujo de un coche puede utilizar tonalidades para las regiones con más luz y tonalidades de la carrocería. Una simple edición al color principal cambiará todos los colores, pero las tonalidades se mantendrán iguales. Por lo tanto, configurar tonalidades es una forma muy útil de modificar colores.

Para obtener mejores resultados, el color principal debe ser un color saturado "puro". Si se utiliza el modelo de color HSV, la saturación y el valor deberían ser 100%. Al verlo en el EDITOR DE COLOR, la cruz debería encontrarse en la esquina superior izquierda.

Colores vinculados

Los colores vinculados son similares a las tonalidades, pero permiten más flexibilidad. También están basados en color principal pero puedes definir los atributos que quieres que compartan el color vinculado y el principal. Por ejemplo, puedes crear un color vinculado que sea una versión más o menos saturada del principal, pero que el tinte y la tonalidad sean las del principal.

Creación de un tinte, una tonalidad o un color vinculado

Ve arriba para leer la sección sobre TINTES, TONALIDADES y COLORES VINCULADOS. Te será útil para cuando quieras encontrar el color principal de una tonalidad más clara u oscura.

Los TINTES, las TONALIDADES y los COLORES VINCULADOS deben tener un color "original" con un nombre de color asignado, para que cuando cambies el color original también


cambie su tonalidad. Por ello, de ser necesario, primero asígnale un nombre al color (ver Creación de nuevos colores con nombre (en la página 143)).

Para crear un tinte, una tonalidad o un color vinculado:

1. Selecciona el objeto o los objetos a los que quieres aplicar el color. 2. Abre el EDITOR DE COLOR con las opciones avanzadas. 3. Selecciona la opción "color normal" en el menú desplegable situado en la parte

inferior del diálogo y elige entre las opciones TINTE, TONALIDAD, o VINCULADO. 4. En el menú desplegable del COLOR ORIGINAL, selecciona el color con nombre al que

quieres añadirle un vínculo. 5. Ajusta el TINTE, la TONALIDAD o el COLOR VINCULADO en la parte superior del editor de

color.

Si no aparecen las opciones de tinte, tonalidad y color vinculado en el menú desplegable de "tipo de color", esto probablemente significa que aún no has creado un color con nombre al que le quieres agregar un vínculo, o también puede ser que estás editando el único color con nombre del diseño.

A la izquierda verás que el nuevo color tiene un poco de tinte del color original "amarillo", por ello el editor sólo suministra tintes más claros del color original. A la derecha si seleccionas la opción tonalidad podrás elegir cualquier tonalidad más clara o más oscura del color original.

Si quieres utilizar este color en muchas partes del documento se recomienda que le asignes al color un nombre para que aparezca en la línea de colores y así puedas encontrarlo más fácilmente cuando lo necesites. Haz clic sobre el ícono con forma de


etiqueta para crear un nuevo nombre para un color. Ahora aparecerá en la línea de color para que lo puedas escoger y colocar sobre otros objetos.

Editar el color principal

El objetivo principal de utilizar tintes, tonalidades y colores vinculados es que siguen los cambios que se realizan al color principal. Para ver el resultado, intenta editar el COLOR

CON NOMBRE que es el principal (arrástralo de la LÍNEA DE COLOR hasta el EDITOR DE

COLOR y modifica el color.) Verás que los objetos con el tinte, tonalidad o color cambian en sincronización con el color principal.

NOTA: ten cuidado de no editar el color de los objetos sobre la página a la que has aplicado colores con NOMBRE, TINTES, TONALIDADES o COLORES VINCULADOS porque se convertirán en COLORES LOCALES.

148 Trabajar con textos

Trabajar con textos

Introducción

Las opciones de edición de texto de MAGIX Web Designer 6 son similares a los editores de texto o procesadores de texto, pero además suministra una amplia gama de características que no encontrarás en esos programas.

Puedes aumentar o ampliar el texto a un tamaño muy grande.

Puedes aplicar la gama de atributos y efectos normales de MAGIX Web Designer 6: rellenos, difuminación, transparencia, tonalidades de color, sombras y continuar editando el texto.

Puedes convertir los contornos de las letras en formas que pueden editarse al igual que cualquier forma normal.

Adaptar texto a la curva. Todo el texto puede girarse, inclinarse y extenderse.

Trabajar con textos 149

Terminología

FUENTE o TIPO DE FUENTE: un conjunto de caracteres con un estilo consistente.

FAMILIA DE FUENTES: un conjunto de fuentes similares. Por ejemplo, Garamond y Garamond Italic son fuentes diferentes pero pertenecen a la misma familia Garamond.

JUSTIFICACIÓN: una forma alternativa de describir a la alineación de texto. Al texto alineado a la izquierda muchas veces se lo denomina justificado a la izquierda.

MONOESPACIADO: todos los caracteres individuales de una fuente monoespacio tienen el mismo ancho. Muchas veces se las denomina fuentes con ancho fijo. Muy útil para listados de programas. Courier es la fuente monoespacio más común. La mayoría de las fuentes son fuentes con espaciado proporcional, es decir, que el ancho de los caracteres varía.

PUNTO: el tamaño del texto o fuentes se miden en puntos (pt). 1 pt es aproximadamente 1/72 pulgadas, por lo que un texto de 72 pt es tiene aprox. 1 pulgada de altura, a pesar de que las fuentes de un tamaño determinado pueden variar.

La herramienta de texto

Usa la herramienta de texto ("F8") para introducir o editar texto.

Barra de información de la herramienta de texto, lado izquierdo

Fuente

Tamaño de fuente

Negrita

Cursiva

Subrayado

Justificado


Barra de información de la herramienta de texto, lado derecho

Superíndice/Subíndice

Espaciado de línea

Espaciado de párrafos

Lista con viñetas

Lista numerada

Colocar sangría

Quitar sangría


MAGIX Web Designer 6 es compatible con tres tipos básicos de objetos de texto

• Líneas de texto simple: haz clic sobre la página y escribe. • Columnas de texto: haz clic y arrastra para crear una columna y después escribe. • Áreas de texto: haz clic y arrastra en sentido diagonal para crear un área rectangular.

Después escribe.

Después de haber creado un objeto de texto puedes transformarlo (girarlo, inclinarlo, cambiar su tamaño) y puedes aplicar todos los atributos normales, color de relleno, transparencia, difuminación, etc. utilizando las herramientas normales. También puedes vincularlo a una curva. El texto permanecerá editable.


El menú de fuentes

El menú de fuente muestra todas las fuentes instaladas, y está dividido en dos secciones. La sección superior muestra aquellas fuentes que son usadas actualmente en el documento. La segunda sección contiene las fuentes compatibles con la web. Estas fuentes son las más seguras para las páginas web porque son las que utilizan la mayoría y, por ende, serán compatibles con la mayoría de los navegadores web. Lee el apartado "Fuentes compatibles con la web". La sección final muestra una lista alfabética de todas las fuentes. Cada nombre de fuente es mostrado en el menú usando su propio tipo de fuente, haciendo la selección de fuente más sencilla.

Las fuentes para las que están disponibles múltiples estilos de fuente se muestran con pequeños triángulos negros a la derecha del menú. Mantén simplemente el curso del ratón sobre algún nombre de fuente durante un segundo o dos y un pequeño submenú aparecerá a la derecha del menú principal, mostrando los estilos disponibles para esa fuente. Puedes mover el cursor del ratón sobre el submenú que aparece, para seleccionar el estilo de fuente deseado.


Fuentes compatibles con la web

Sólo se puede utilizar de forma segura un pequeño grupo de fuentes para el texto principal de la página web. Sólo aquellas fuentes que existan en el ordenador de la persona que va a visitar tu página web. Aunque no haya 100% de garantía, si existe una serie de fuentes que son frecuentemente utilizadas por el 98% de los ordenadores, incluyendo Apple Mac y algunos ordenadores Linux. Estas fuentes se llaman "fuentes compatibles con la web" y se encuentran en una lista de la sección del menú de fuentes. Si exportas una página web con fuentes no compatibles, se abrirá una aviso de advertencia.

Vista previa de fuente en tiempo real

Si mantienes el ratón sobre cualquier entrada del menú de fuentes por una fracción segundo, el texto seleccionado en el documento será actualizado para poder tener una vista previa de esta fuente. No será un cambio permanente hasta que no hagas clic sobre la fuente requerida. Si mueves el cursor del ratón sobre el menú volverás a la fuente inicial hasta que te poses sobre otra entrada. Esto es ideal para obtener una vista previa muy rápida de gran cantidad de fuentes.

Si pulsas la tecla "Shift" mientras navegas por el menú de fuentes, habrá una pequeña pausa antes de que se vea la fuente seleccionada. Esta opción es práctica porque la vista previa instantánea ralentiza la navegación a través del menú; y si tienes varias fuentes seleccionadas este proceso será aún más lento.

Vista previa de tamaño de fuente en tiempo real

Junto al menú de tamaño de fuente se encuentra una barra deslizante emergente igual a la que se utiliza en otras partes de Web Designer. Esto brinda un control de tamaño de letra directo y ajustará el tamaño de fuente del texto seleccionado en tiempo real a medida que arrastras la barra deslizante.

Haz clic para ver la opción emergente para el tamaño de la fuente

Como con las barras emergentes deslizantes anteriores existen dos forma de uso. Con "clic + soltar" sobre la flecha aparecerá la barra y se quedará en pantalla. Ahora podrás arrastrar la barra deslizante, o usar la rueda del ratón sobre el control para ajustar rápidamente los valores. Este caso, podrás ajustar el tamaño de punto usando la rueda del ratón para ver los resultados directamente en la página del documento mientras trabajas.

Otra forma de utilizar la barra deslizante emergente es "pulsar + arrastrar + soltar" sobre el botón y la barra. Esto es un modo ligeramente más directo de ajustar el control (requiere menos clics).

Navegación instantánea del menú de fuente

Mientras el menú de fuente es mostrado, puedes escribir los carácteres iniciales del nombre de fuente, y el menú se desplazará hasta esa sección de la lista. Por ejemplo, si escribes "ver", se desplazará instantáneamente y localizará la fuente "Verdana".


Texto simple

Si quieres escribir una pequeña cantidad de texto simple, coloca el cursor donde quieres introducir el texto y haz clic. Aparecerá un cursor rojo y podrás comenzar a escribir con tu teclado.

Si te has equivocado, pulsa "Supr "o "Retroceso" de la forma usual.

Al pulsar "Enter" se completa la línea e inicia una línea de texto debajo. El espaciado entre líneas se controla en el campo de texto de espaciado en la barra de información.

Por defecto, el texto no tiene color de contorno. Con 'Shift + clic' sobre un color de la línea de color le darás un color de contorno al texto seleccionado (el grosor puede ajustarse como siempre a través del control de amplitud de línea). Probablemente querrás establecer el tipo de unión de línea (en la página 133) para redondearla y darle un aspecto más suave (control en la parte superior de la Galería de líneas).

El ancho de líneas se describe en Dibujar líneas. La aplicación de color está descrita en Trabajar con colores (en la página 135).

Puedes continuar entrando texto incluso después de la rotación o de haber aplicado un relleno, ajustado el texto a una línea o haber añadido efectos en vivo.

Texto en una columna

Si estás introduciendo una gran cantidad de texto a lo largo de varias líneas, es posible que una columna te resulte más útil. Cambiar el ancho de la columna adaptará automáticamente el texto.

Para escribir una columna de texto:

1. Selecciona la herramienta de TEXTO. 2. Mueve el cursor del ratón al lugar de inicio de la columna. 3. Arrastra hacia la derecha para crear una línea horizontal del ancho de la columna.

Esta línea roja te muestra el ancho de la columna. Nunca se imprime. 4. Introduce el texto. No necesitas pulsar al final de una línea. Cuando el texto llega al

final de la columna sigue automáticamente en una nueva línea.

NOTA: si haces clic fuera o cambias la herramienta antes de comenzar a tipear, la columna de texto se eliminará y no quedará nada en la página. Por lo tanto, debes comenzar a tipear inmediatamente después de haber arrastrado la línea de ancho de la columna.

En vez de tipear el texto, puedes crearlo en un editor de texto, copiarlo al portapapeles y copiarlo en MAGIX Web Designer 6. Copiar y pegar es compatible con el texto con formato RTF.


Las palabras sólo se separan en las líneas si se introduce un guión.

El efecto de el guión en un texto fluido.

Si introduces Ctrl+- (tecla menos) se insertará un guión suave que aparecerá solamente si la palabra puede terminarse al final de la línea. Esto es especialmente útil para columnas de texto angostas: para evitar espacios en blanco es posible que necesites insertar guiones a algunas palabras. Si insertas un guión normal, la palabra se separará al final de la línea. Se llama guión "suave" porque cuando la palabra aparece en el medio de una línea, el guión desaparece (a diferencia de un guión normal o el carácter menos), por lo que el guión se introduce sólo si es necesario.

Al editar texto, el guión suave funciona como un carácter invisible (no ocupa espacio), pero puede reconocerse en el texto moviendo las flechas izquierda/derecha sobre el lugar en donde se encuentra el carácter.

Un guión rígido puede insertarse utilizando Ctrl+Shift+- (tecla menos). Un guión rígido no causará ninguna separación. Esto es útil en situaciones en las que las palabras presentan guiones pero no deben separarse al final de las líneas.

Cambiar el ancho de la columna

Arrastra uno de los dos controles deslizantes al final de la línea.

Cambiar el ángulo de la columna

Pulsa ń+arrastra uno de los controles deslizantes al final de la línea para cambiar el ángulo de la columna. Como alternativa, pulsa Ctrl y arrastra para limitar la línea a ángulos restringidos. También puedes utilizar la herramienta de SELECCIÓN y girar el objeto de forma normal.

Para más información sobre ángulos restringidos, lee el capítulo Introducción a MAGIX Web Designer 6.

Áreas de texto

Si haces clic y arrastras diagonalmente sobre la página usando la herramienta de TEXTO, crearás un área de texto rectangular. El cursor se posicionará en la esquina superior izquierda y podrás introducir texto y pegar.

Un área de texto puede contener una historia de texto "fluido". En este caso una sola pieza de texto fluye de un área de texto a otra. Esto se llama texto fluido, como el agua, porque al añadir o eliminar texto en un área, desbordará a o desde las áreas de texto conectadas.


Si el texto sobrepasa el final del área de texto se verá de color gris, a pesar de que podrás continuar editando el texto de forma normal.

Conectar áreas de texto—flujo de texto

Cuando un texto sobrepasa la parte inferior del área de texto, aparece un indicador al final del área. Si arrastras este indicador sobre cualquier otra área de texto, el texto fluirá hasta la nueva área de texto y las dos áreas se conectarán. Esto se muestra con una flecha de flujo.

Al arrastrar el indicador de un área de texto a otra, se conectarán ambas áreas de forma que el texto fluya de una a otra. Puedes vincular tantas áreas de texto como sean necesarias.

Consejo: existe una forma rápida de crear texto fluido. Si el cursor de texto se encuentra en un área con texto en exceso, haz clic y arrastra sobre la página para crear una nueva área de texto. La nueva área de texto se conectará automáticamente y el texto fluirá hasta la nueva área.

Consejo: puedes hacer fluir un texto desde un área a otra en cualquier página, incluso en páginas anteriores. Si necesitas que el texto fluya a un área que se encuentra varias páginas adelante, probablemente sea más fácil utilizar el método anterior, aunque si reduces la imagen a un tamaño de texto pequeño podrás arrastrar la flecha por las páginas.

Para desconectar un área de texto de otra, arrastra el indicador y suéltalo lejos de las áreas de texto.

Si eliminas un área de texto que está conectada con otra, sólo se eliminará el área. El texto volverá a fluir a las áreas de texto restantes.

Cambiar el tamaño de las áreas de texto

En la herramienta de TEXTO, puedes hacer clic y arrastrar cualquiera de los controles deslizantes de esquina. El texto del área tomará el formato adecuado para adaptarse al nuevo tamaño.

Como alternativa, puedes utilizar la herramienta de SELECCIÓN para cambiar el tamaño del objeto de texto, pero en este caso cambiará el comportamiento. Si cambias el tamaño de un objeto de texto usando la herramienta de selección, cambiará el tamaño del propio texto. Esto coincide con la operación normal de la herramienta de SELECCIÓN.


Sin embargo, en el caso de áreas de texto fluido, esto causaría efectos secundarios no deseados, y seguramente no quieres que una parte de una historia de texto tenga un tamaño diferente al resto. Por lo tanto, la herramienta de SELECCIÓN varía dependiendo de si cambias el tamaño de un área de texto que contiene una historia de texto fluido o si cambias toda la historia de texto. La regla es:

• Si cambias el tamaño de un área de texto sin conexión (o texto simple o una columna de texto), entonces tanto el área "contenedora" como el contenido del texto cambian de tamaño.

• Si seleccionas las áreas de texto de toda la historia de texto fluido (deben encontrarse en una misma página), entonces el texto y las áreas también cambiarán simultáneamente.

• Sin embargo, si cambias el tamaño de un área de texto que es parte de una serie de áreas de texto fluidas, entonces sólo cambiará el tamaño del área de texto y el texto conservará tu tamaño original y se cambiará su formato para adaptarse al nuevo tamaño. Esto es igual que cambiar el tamaño de área con la herramienta de TEXTO.

Si quieres cambiar el tamaño de todo el texto en una historia de texto, selecciónalo con "Ctrl+A" y aplica el tamaño de fuente deseado.

Puedes girar el área de texto, utilizando la herramienta de SELECCIÓN de forma normal y el texto fluirá a lo largo del área de texto girada.

El flujo del texto no se ve afectado si giras una de las áreas de texto

Cantidad de palabras

La cantidad total de palabras y caracteres del texto actual se indica en la barra de estado. Esto también muestra la cantidad de palabras excedidas. Si está seleccionada cualquier región de texto, se mostrará la cuenta de la selección.


Texto siguiendo una curva

Para colocar un texto a lo largo de una curva de tu elección:

1. Crea un texto básico, un texto en una columna o un área de texto (ver más arriba).

2. Selecciona tu objeto de texto y una curva.

3. Escoge ARREGLO > ADAPTAR

TEXTO A LA CURVA.

Como alternativa, selecciona una curva o línea y después, en la herramienta de TEXTO, haz clic sobre la línea donde quieres que el texto comience y escribe. Esto adaptará automáticamente el texto a lo largo de la línea. Cuando alcances el final de la línea, el texto continuará en una nueva línea inmediatamente por debajo de la anterior.

Si no quieres que el texto siga en otra línea, pulsa "Shift y clic" sobre la línea.

Para ocultar una curva, selecciona la herramienta de EDICIÓN DE FORMAS y configura el color de la línea en SIN COLOR o un ancho de NINGUNO. También puedes editar la curva de forma usual.

La aplicación de color está descrita en Trabajar con colores (en la página 135).

Ajustar el margen izquierdo y derecho de un texto sobre una curva

Si estás comenzando a escribir o colocar una columna de texto sobre una curva, puedes cambiar la posición de inicio y fin de los controles deslizantes rojos. Simplemente arrástralos sobre la curva según lo desees. Si centras el texto, se encontrará entre estos dos márgenes.

Cambiar lados de la línea

Haz clic derecho sobre el texto y selecciona la opción de menú INVERTIR TEXTO EN LA

CURVA.

Como alternativa, si cambias la dirección de la línea (herramienta de EDICIÓN DE TEXTO, botón INVERTIR TRAYECTORIA de la barra de información), entonces el texto cambiará al otro lado de la línea o, en el caso de una forma cerrada, se moverá desde el interior al exterior de la forma.


Editar texto

Haciendo doble clic sobre un objeto de texto en cualquier herramienta te llevará a la herramienta de TEXTO y posicionará el cursor en la posición de clic en el texto.

Pueden utilizarse todas las funciones de cursor y operaciones usuales de un procesador de texto. Por ejemplo:

• Haz clic donde deseas colocar el cursor. • Utiliza las teclas de flechas que van hacia la izquierda, la derecha, hacia arriba o abajo. • Utiliza "Ctrl + teclas de flechas que van hacia la izquierda y derecha" para mover una

palabra hacia la derecha o hacia la izquierda. • Pulsa "Inicio" o "Fin" para desplazarte al inicio o fin de la línea. • Pulsa "Ctrl + Inicio" o "Ctrl + Fin" para desplazarte al inicio o fin del objeto de texto.

Selección de texto:

• "Shift+ cualquiera" de las teclas anteriores para seleccionar el texto • Doble clic para seleccionar una palabra • Triple clic o "Ctrl + L" para seleccionar toda la línea de texto • Cuatro clics (4x) seleccionan un párrafo • O arrastra sobre el texto en la herramienta de texto para seleccionar el texto • "Ctrl + A" seleccionará todo el texto dentro del objeto de texto (debes encontrarte en la

herramienta de TEXTO.)

Si has seleccionado texto, cualquier cambio que realices se aplicará solamente a la región de texto seleccionada. Si sólo se encuentra el cursor en el texto, entonces cualquier atributo, por ejemplo, otro color, aparecerá solamente cuando introduzcas texto nuevo.

Seleccionar todo el objeto de texto

Existe un shortcut para seleccionar todo el objeto de texto. En vez de utilizar Ctrl+A o arrastrar a lo largo del texto, simplemente pulsa la tecla ESC. Esto elimina el cursor pero selecciona todo el texto (la barra de estado confirmará 1 objeto de texto). Esto facilita la aplicación de un efecto o atributo a toda la historia de texto.

Por ejemplo, para cambiar el tamaño de la fuente de todo el objeto de texto, pulsa ESC y selecciona un nuevo tamaño de la barra de información.

Cambiar mayúsculas o minúsculas

Pulsar Ctrl+W cambiará la mayúscula o minúscula del texto detrás del cursor y moverá el cursor. Entonces, si te das cuenta de que has tipeado una sección de texto con la tecla Mayúsculas activada, coloca el cursor al inicio y pulsa Ctrl+W.

Puedes cambiar la mayúscula o minúscula de la región de texto seleccionada de la misma forma. El cursor no se moverá.


Comillas inteligentes

Si escribes comillas ' o ", Xtreme las convertirá automáticamente en comillas de apertura o cierre estéticamente adecuadas. Esto significa que 'esto' cambiará a ‘esto’ y "comillas" en “comillas”. Esta característica es lo suficientemente inteligente para comprender el uso de comillas simples dentro de las palabras, para que, por ejemplo, si escribes en inglés la palabra 'don't' no se convierta en ‘don’t’.

Introducir caracteres especiales

Existen shortcuts útiles para insertar caracteres especiales como © o ™. Lee la sección Caracteres especiales (herramienta de texto) (en la página 356) en el capítulo "Menús y shortcuts de teclado".

Todos estos shortcuts (con la excepción del espacio rígido) son compatibles con Microsoft Word.

Insertar texto de ejemplo ('Lorem Ipsum')

Cuando se compone un diseño de página es una práctica común que se utilice un texto de ejemplo que contiene palabras en pseudo-latín (que no significan nada) y que tiene la apariencia general de un texto típico en inglés (o en otros idiomas latinos). El texto comienza así: "Lorem ipsum dolor sit amet..."

Nota histórica. este mismo texto ha sido utilizado como texto de ejemplo por más de 500 años en la industria de la imprenta, e incluso partes de las frases en latín se han escrito hace más de 2000 años.

Para insertar un párrafo del texto "Lorem ipsum" tienes que pulsar las teclas Ctrl + Shift + L ("L" para Lorem) utilizando la herramienta de texto. Para insertar un bloque de texto más largo presiona esta combinación de teclas un par de veces.



La herramienta de texto incluye un corrector de ortografía. Para activarlo selecciona el icono del CORRECTOR DE ORTOGRAFÍA en la barra de información de la herramienta de TEXTO y se abrirá un menú.

Selecciona "REVISAR ORTOGRAFÍA MIENTRAS SE ESCRIBE". Ahora todas las palabras sin revisar de tu documento y aquellas que vas tecleando aparecen subrayadas con una línea de guiones.

Para corregir una palabra mal escrita, haz clic sobre la palabra con el botón derecho del ratón y el menú contextual te mostrará sugerencias ortográficas correctas de la palabra situada en la parte superior del menú. Selecciona simplemente una de las sugerencias para sustituir la palabra.

Selección de idioma

Haciendo clic en el icono del corrector de ortografía aparece un menú con todos los idiomas para los cuales hay diccionarios instalados. Por defecto, el idioma seleccionado corresponderá a la configuración local. Puedes elegir diferentes idiomas para diferentes objetos de texto de modo que en tu documento puedes utilizar texto en múltiples idiomas si fuera necesario.

Para cambiar el idioma asociado con el objeto de texto, selecciona el objeto de texto y a continuación selecciona el idioma requerido en el menú del corrector de ortografía de la herramienta de texto. Ahora, el objeto de texto será revisado con el diccionario de la lengua que elegiste.

Si quieres introducir numerosos objetos de texto utilizando un idioma diferente al seleccionado por defecto, puedes cambiar el actual atributo de idioma de texto de modo que no tienes que cambiar individualmente el idioma de cada objeto de texto. Para ello asegúrate de que no has seleccionado nada (haz clic sobre un área vacía de tu diseño utilizando la herramienta de selección). A continuación elige en la herramienta de texto el idioma que quieras usando el menú del corrector de ortografía. Se te preguntará si deseas fijar el atributo de idioma de texto actual. Haz clic en "Fijar" para confirmarlo. De ahora en adelante cada nuevo objeto de texto que crees se asociará al idioma elegido. Ten en cuenta que dicho atributo actual no se cargará de nuevo cuando guardes y cargues tu diseño. Por lo tanto deberás repetir el procedimiento anterior para fijar el atributo de idioma de texto actual la próxima vez que cargues el documento, si quieres seguir introduciendo nuevos objetos de textos usando el mismo idioma.

Si hay un objeto de texto cuya ortografía no quieres revisar en absoluto, selecciona el objeto y elige la opción "Sin idioma (ignorar") del menú del corrector de ortografía.

Diccionario de usuario

Las palabras que utilices regularmente y que no se encuentren en el diccionario suministrado por MAGIX Web Designer 6 pueden añadirse a tu propio diccionario


personal. Haz clic con el botón derecho del ratón y selecciona "Añadir a diccionario de usuario". Ahora la palabra ya no será detectada como incorrecta. El diccionario de usuario se aplicará a todos los documentos que utilices en tu ordenador y se aplicará para todos los idiomas.

Cómo sincronizar el texto empleando Grupos suaves (soft groups, en inglés)

En algunos diseños puede que necesites que múltiples objetos de texto muestren siempre el mismo texto, pero con estilos diferentes. Ejemplos de ello serían la animación de texto en un documento de animación o botones mouseover que se resaltan cuando el cursor del ratón se mueve por encima de ellos en un navegador web. Por lo general, cuando quieres cambiar el texto mostrado en estos objetos, debes editar cada uno de forma individual.

Añadiendo a un grupo suave objetos de texto relacionados de esta forma, puedes asegurarte de que siempre mostrarán el mismo texto. Para añadir los objetos de texto relacionados a un grupo suave, primero asegúrate de que todos ya poseen exactamente el mismo texto (de lo contrario no se sincronizarán todos). A continuación selecciona todos usando la herramienta de selección. Luego selecciona "ARREGLO->APLICAR GRUPO SUAVE (Ctrl+Alt+G).

A continuación, cuando se edita el texto en un objeto de texto, los demás se actualizarán automáticamente, incluso si están desparramados por diferentes capas (o en caso de documentos de animación, en diferentes frames) a lo largo de tu documento. Ten en cuenta que esta sincronización funciona incluso si algunos de los objetos se encuentran en capas bloqueadas o invisibles.

Para deshacer un grupo suave, selecciona Arreglo > Eliminar grupo suave (o pulsa Ctrl+Alt+U). Lee la sección de grupos suaves del capítulo Manipulación de objetos (en la página 108) para obtener más información sobre grupos suaves.

Tabulaciones, márgenes y sangrías

Reglas

Para ajustar las tabulaciones, márgenes y sangrías, necesitas activas las reglas del documento.

Para esto:

• Escoge Ventana > Barras > Reglas. • O pulsa Ctrl+ +R (este es un nuevo shortcut). • O pulsa Ctrl+L (si no te encuentras en la herramienta de TEXTO).

Las características de texto avanzadas sólo aparecerán en la regla cuando estés utilizando la herramienta de TEXTO y cuando el cursor de texto se encuentre dentro de la historia de texto o cuando el objeto de texto esté seleccionado en la herramienta de TEXTO.


Al arrastrar los márgenes o tabulaciones en la regla de la herramienta de texto, verás una guía vertical temporal que te facilitará alinear las tabulaciones o márgenes a otros objetos de la página.

Márgenes y sangrías

Cualquier cambio que realices se aplicará al párrafo de texto actual, es decir, el párrafo en el que se encuentra el cursor de texto. Por el contrario, si has seleccionado una región de texto, el cambio se aplicará a los párrafos de la región seleccionada.

Puedes aplicar cambios a todo el texto de una historia de texto, si seleccionas todo el texto dentro de la historia (Ctrl+A). Para cambiar más de una historia de texto, selecciona los objetos de texto en la herramienta de SELECCIÓN, después cambia a la herramienta de TEXTO y realiza los cambios correspondientes.

Margen izquierdo . Arrastra esto para cambiar el margen izquierdo del texto.

Margen de la primera línea. Arrastra para cambiar el margen izquierdo de la primera línea del párrafo (útil para listas, como se muestra abajo).

Margen derecho. Arrastra esto para cambiar el margen derecho del texto.

Demostración del margen izquierdo y el margen de la primera línea

Demostración de un margen derecho


Texto siguiendo una curva

Si has adaptado una sola línea de texto a la curva utilizando la opción ADAPTAR TEXTO A LA

CURVA, la línea de curva será el margen.

Si has hecho clic sobre la línea o has adaptado una columna de texto a una curva o línea, entonces verás indicadores de margen izquierdo y derecho (pequeños cuadrados rojos) que puedes arrastrar a lo largo de la línea para ajustar los márgenes utilizados para la justificación.

Tabulaciones

Por defecto, las historias de texto se crean con tabulaciones de 0,5 cm. Esto significa que puedes pulsar la tecla Tab y tu texto se moverá al próximo punto de tabulación. Sólo necesitas definir una nueva posición de tabulación, si deseas utilizar otro espaciado.

Estas tabulaciones por defecto se muestran como "L" sobre la regla:

Tabulaciones estándar indicadas con "L"

Tabulaciones personalizadas

Para crear una posición de tabulación personalizada, haz clic sobre la regla en el lugar don de quieres colocar la tabulación. Se sustituirán las tabulaciones por defecto hasta esa posición de la regla.

Por ejemplo:

El triángulo indica una tabulación personalizada

Para colocar más de una tabulación, haz clic varias veces sobre la regla.

Para desplazar una tabulación personalizada arrástrala a lo largo de la regla.

Para eliminar una tabulación arrástrala fuera de la regla (las tabulaciones por defecto retornarán).

Tipos de tabulaciones personalizadas

Puedes configurar diferentes tipos de tabulaciones personalizadas. Por defecto, las tabulaciones personalizadas están alineadas a la izquierda. Esto significa que el texto se alineará con la tabulación a la izquierda del texto.


Para cambiar el tipo de tabulación, haz clic sobre el icono de tabulación sobre la regla.

Están disponibles los siguientes tipos de tabulación personalizada. Puedes escoger diferentes tipos de tabulaciones, puesto que no estás limitado a utilizar un solo tipo de tabulación en una historia.

Alineación izquierda: el texto se alineará con la tabulación a la izquierda.

Alineación derecha: el texto se alineará con la tabulación a la derecha.

Alineación central: el texto se centrará a partir de la tabulación.

Alineación al decimal: los puntos decimales en el texto se alinearán con la tabulación. Esto es útil para crear listas, sin importar la longitud del número, los puntos decimales se alinearán con al tabulación.

Cómo crear sangrías francesas

La sangría francesa es cuando la primera línea del párrafo tiene un margen negativo, o el margen se encuentra más a la izquierda que el margen izquierdo normal. Las listas con número o viñetas son ejemplos de sangría francesa.

Para crear una sangría francesa:

1. Arrastra el margen izquierdo hacia adentro.


2. Haz clic sobre la regla lejos del margen izquierdo (crea una nueva tabulación) y arrastra esta tabulación hasta el margen izquierdo.

3. Ahora todas las líneas comenzarán con sangría; puedes insertar cualquier carácter o número y pulsar Tab para moverlo hasta el margen izquierdo. Y (al igual que con el párrafo) todas las líneas siguientes de texto tendrán sangría hasta el margen izquierdo.

Texto alrededor de objetos

Puede hacer que cualquier objeto en MAGIX Web Designer 6 sea rodeado por texto, de modo que el texto fluya alrededor del objeto, en vez de aparecer encima. Esto facilita la presentación de páginas que contienen pasajes largos de texto combinados con fotos y gráficos. Una vez que has insertado los objetos, puede ajustar las posiciones de gráficos y fotos y el texto se adaptará automáticamente y fluira alrededor de ellos.

Hacer que un objeto se rodee de texto

Para hacer que un objeto sea rodeado por texto, selecciona la opción "CONTORNEAR

TEXTO..." en el menú ARREGLO para abrir la ventana de diálogo con las propiedades para hacer fluir el texto alrededor de objetos.


Si lo deseas, puedes poner un margen al objeto, que determinará el tamaño del margen entre los bordes del objeto y el texto que lo rodea. Para cerrar el diálogo y volver a la opción de contornear texto, haz clic en "Contornear".

Para desactivar el contorneo abre simplemente el diálogo de propiedades de contorneo del objeto y haz clic en "No contornear". Ten en cuenta que contornear el texto sólo funciona si el texto está debajo de los objetos, si el texto está encima no funciona.

Ten en cuenta que las líneas individuales de texto no responden al contonear objetos, sólo lo hacen las áreas con texto y columnas de texto.

Gráficos anclados

Puedes posicionar cualquier gráfico o grupo para anclarlo a una posición en un texto, de forma que al mover el texto, el objeto de gráfico se desplace para mantener la misma posición relativa.

Para anclar un gráfico o grupo, cópialo primero al portapapeles, y después en la posición de herramienta de TEXTO y PÉGALO. Se te dará la elección de pegar el objeto como un objeto de texto anclado o no.

Éste es un ejemplo de una columna de texto con diversos elementos gráficos a la izquierda. Cada uno de estos está anclado al inicio de una línea de texto inmediatamente a la derecha.


Una vez que lo has anclado en una posición del texto, cuando muevas el texto hacia arriba y hacia abajo (al eliminar o agregar texto arriba), este gráfico permanecerá vinculado a la misma posición relativa y se moverá hacia arriba o hacia abajo con el punto de anclaje. Sin embargo, ten en cuenta que el objeto anclado no se moverá fuera del área de la página como resultado del movimiento del punto de anclado. El objeto anclado sólo se moverá hasta el borde de la página.

Es posible anclar cualquier objeto o grupo de gráficos, incluyendo grupos con texto, como el ejemplo del panel lateral, que se muestra a la izquierda.

También es posible anclar objetos para que aparezcan arriba o debajo del texto. El ejemplo del gráfico de flor azul pálido, que se muestra a la izquierda, está anclado de esta forma y fluirá junto con el texto.

Nota: No es posible anclar texto a objetos con alineación a objetos. Si intentas anclar un objeto con Alineación de texto, la característica de alineación se desactivará.

Mover objetos anclados

Puedes mover un gráfico anclado arrastrándolo de la forma usual. Esto cambia su posición con de forma relativa al punto anclado, pero no mueve el punto anclado. Por lo tanto, si el punto anclado se mueve al fluir el texto, el gráfico mantendrá siempre su posición nueva relativa al punto anclado.


Puedes pegar Grupos suaves (en la página 108) de la misma forma, aun cuando parte de un grupo se encuentra en otra capa. Por ejemplo, los botones Web con efectos mouse over o pop-up en otras capas, pueden anclarse de esta forma.

Visualización del punto de anclado

Cuando seleccionas una región de texto con la Herramienta de texto, se verán todos los puntos de anclado con una "T" invertida, y también se dibujará una flecha desde el punto de anclado al centro de los objetos anclados. Entonces, la forma más sencilla de ver todos los puntos de anclado para cualquier texto es seleccionarlo todo (colocar el cursor en el texto y pulsar Ctrl+A).


Márgenes y objetos anclados

Se recomienda que los objetos gráficos anclados se posicionen fuera de los márgenes o (como en el ejemplo anterior) en un espacio vertical (únicamente introduce un número de líneas vacías), de modo que la gráfica no se superpone al texto al que está unido.

Sin embargo, existen varias formas para mover el texto alrededor de gráficos anclados.

Si quieres incrustar un pequeño gráfico en una línea de texto, como un gráfico de un icono como este ; dentro del texto, para que fluya con el texto, crea un pequeño espacio en el texto y pega la imagen como un objeto anclado y posiciónalo sobre los espacios. Se recomienda usar caracteres de espacio de no separación (Ctrl+barra espaciadora).

Utilizando el control de márgenes puedes definir que los gráficos se posicionen dentro del ancho de columna, en el lado izquierdo o derecho, como en este ejemplo.

Para hacer esto, utiliza el control de márgenes en la regla para crear un margen derecho para los parágrafos de texto para dar espacio para la imagen. Aquí puedes ver que el indicador de margen derecho en la regla está a la izquierda en la imagen.

El texto de debajo de la foto no tiene un margen derecho y se extiende hasta el borde de la columna.

La foto está anclada justo el principio de la línea (de modo que sólo se mueve hacia arriba y hacia abajo).


Aplicar estilos de texto

Cambiar el tamaño de fuente

Existen diversas formas de cambiar el tamaño de la fuente:

• Introduce un nuevo valor en el campo de texto de tamaño de la barra de información y pulsa ↵.

• O selecciona una opción de la lista desplegable TAMAÑO DE FUENTE en la barra de información.

• O utiliza la barra deslizante emergente de tamaño de fuente (en la página 152). • O aumenta/disminuye el tamaño de fuente con Ctrl+ +> y Ctrl+ +<. Esta opción se

aplica solamente si todas las partes de texto seleccionadas tienen el mismo tamaño de fuente.

• O utiliza la herramienta de SELECCIÓN para cambiar el tamaño de todo el objeto de texto.

Negrita y cursiva

Haz clic sobre el botón NEGRITA o CURSIVA de la barra de información ("Ctrl + B" or "Ctrl + I")

Esta opción aplica la variante negrita o cursiva de la fuente actual.

Atención: MAGIX Web Designer 6 no te permite aplicar cursiva o negrita al texto si la fuente cursiva/negrita necesaria no está instalada. Sin embargo, puedes emular fácilmente el mismo efecto. Para añadir negrita a una fuente, solamente agrégale una pequeña amplitud de línea y aplica un color de línea. Para inclinar una fuente, usa la opción oblicuidad / inclinación de la Herramienta de selección. Lee más en la sección "menú de fuente"

Subrayado de texto

Haz clic en el botón de subrayar en la barra de información para subrayar el texto seleccionado.

El color de subrayado y el tamaño deriva automáticamente del color y tamaño del texto.


Justificación o alineación de texto

La justificación siempre se aplica a toda la línea. Cualquier región seleccionada se ignorará.

Justificación IZQUIERDA: el borde izquierdo del texto se alinea a la posición inicial de clic.

Justificación CENTRAL: centra el texto alrededor de la posición de clic.

Justificación DERECHA: el borde derecho del texto se alinea a la posición inicial de clic.

Justificación COMPLETA: esto sólo se aplica cuando el texto sigue a una curva o se encuentra en una columna y cuando haya al menos una línea completa de texto para justificar.

Al usar texto simple la posición inicial de clic de la página se toma como origen de la justificación de texto.

Agregar y quitar sangrías

Agregar sangría a un párrafo de texto.

Quitar sangría a un párrafo de texto.

Lista con viñetas

Puedes convertir cualquier texto en una lista con viñetas si seleccionas el texto y luego escoges el botón de lista con viñetas de la barra de información.

Cada párrafo de texto se convierte en una viñeta independiente. Si presionas Intro al finalizar una línea al final de la viñeta, la próxima línea también comenzará con una viñeta.

Para finalizar la lista con viñetas, pulsa Intro al final de la última viñeta y luego vuelve a pulsar Intro en la nueva línea con viñeta. Esto elimina la última línea con viñeta y te permite comenzar a introducir texto normal nuevamente.

Puedes incluir listas con viñetas secundarias si pulsas el botón de sangría de la barra de información. Esta sangría crea una línea con viñeta y cambia el estilo de la viñeta para diferenciarla de la principal.


Ejemplo de una lista de viñetas secundaria

Para mover un punto de viñeta desde la lista secundaria hasta la principal, simplemente coloca el texto del cursor en la línea y pulsa el botón para quitar sangría.

Por lo tanto, realizar arreglos en las listas de viñetas es fácil con los botones para agregar y quitar sangrías.

Lista numerada

Puedes crear y editar listas numeradas de la misma forma que se ha descrito para las listas con viñetas pero con el botón de listas numeradas.

Puedes escoger el esquema numerado que se utiliza para cada lista con el diálogo de PROPIEDADES DE LISTA. Coloca el cursor de texto en uno de los puntos de la lista numerada, haz clic derecho y escoge PROPIEDADES DE LISTA... del menú contextual.

En el diálogo puedes escoger entre una variedad de esquemas de numeración y también introducir el valor que debe utilizarse en la primera entrada de la lista. Luego, el número se aumentará automáticamente para las siguientes entradas de la lista.


Superíndice y subíndice

Haz clic en el botón apropiado sobre la BARRA DE INFORMACIÓN.

Texto normal subíndice superíndice

Espaciado de línea

El espaciado de línea te permite cambiar el espacio entre dos líneas (afecta el espaciado vertical).

El espaciado de línea se mide en porcentajes (120%) o puntos (12pt). Puedes introducir el valor de espacio de línea en el campo de texto o hacer clic sobre las flechas para desplazar los valores.

La configuración de porcentajes tiene como beneficio de que cambia de tamaño si cambias el tamaño de la fuente. Si se aplica un porcentaje a una línea de texto con varios tamaños de fuente, se utilizará el tamaño más grande. Por ejemplo, si una línea contiene texto 90% y 100%, el espaciado de línea se calculará a partir del 100%.

Espaciado de párrafos

Los dos últimos campos de la barra de información de la herramienta de texto te permiten configurar el espacio antes y después de los párrafos.

Esto es particularmente útil cuando quieres configurar espacios de media línea entre los párrafos.

Al igual que en Microsoft Word, cuando utilizas el espaciado arriba y abajo de los párrafos, el espaciado es el valor mayor entre ambos (no se acumula). El espaciado arriba del párrafo moverá el primer párrafo hacia abajo en un marco de texto.

Enlaces de texto

Puedes aplicar un enlace en cualquier parte de un objeto de texto de modo que cuando el documento se exporte como HTML el texto aparezca en los navegadores web como un enlace sobre el cual se puede hacer clic.

Utiliza la HERRAMIENTA DE TEXTO para seleccionar las palabras o los caracteres que desees aplicar al enlace y luego haz clic en el botón de enlace en la barra de herramientas de WEB.

Esto abre el diálogo de PROPIEDADES WEB con la pestaña ENLACE seleccionada. En esta pestaña puedes elegir si quieres vincular un URL, otra página de tu sitio web o incluso una capa popup.

Por defecto, cuando aplicas un enlace a una parte de texto, el texto aparece subrayado y con el color de enlace de texto definido para el documento actual. Puedes cambiar el color del enlace, estando los enlaces subrayados o no, en la pestaña PÁGINA WEB del diálogo de

PROPIEDADES WEB (menú HERRAMIENTAS->PROPIEDADES WEB). Asimismo puedes fijar el


color que aparece cuando el usuario mueve el cursor del ratón por encima de un enlace de texto en un navegador web ("Colores MouseOver"), y el "Color visitado", el cual se usa para visualizar que los usuarios ya han visitado dicho enlace con su navegador web.

Para fijar los tres colores globales de los enlaces de texto, o bien puedes seleccionar los colores con nombre (original) ya existentes que utilizaste en tu página web usando las listas desplegables, o bien puedes hacer clic en el botón EDITAR para abrir el EDITOR DE

COLOR mediante el cual puedes elegir el color que quieras.

Asimismo, si fuera necesario también puedes sobrescribir los colores globales de los enlaces de texto para enlaces individuales. En la pestaña de enlaces del diálogo de las propiedades web, deselecciona la opción "Utilizar los colores de enlace de página web usuales". A continuación el enlace seleccionado adoptará el color de texto que fijaste en el documento, en lugar del color global del enlace de texto.

Texto dentro de grupos para páginas web

Al exportar un documento como página web, todos los grupos serán exportados como imágenes. Por este motivo, el texto que se encuentre dentro de grupos no estará presente como texto en tu página web exportada y, por lo tanto, no podrá ser detectado por buscadores ni seleccionado o copiado por los usuarios que visiten tu página web.

Esto suele ser apropiado para botones gráficos, títulos, logotipos, etc., ya que el texto forma parte del gráfico. Sin embargo puede que tengas más piezas de texto importantes dentro de grupos que desees mantener como texto en tu página web exportada. Para hacer esto, sólo tienes que aplicar el nombre especial "Texto HTML" a tu objeto de texto. La forma más fácil de hacer esto se explica a continuación:

1. Escoge la HERRAMIENTA DE TEXTO y haz clic en el texto para insertar el cursor de texto.

2. Pulsa Esc para seleccionar todo el objeto de texto. 3. Abre el diálogo de nombre (HERRAMIENTAS->NOMBRES...). 4. O bien selecciona el nombre de "Texto HTML" de la lista desplegable "Aplicar

nombre" si ya lo has utilizado en el documento actual, o bien teclea el nombre de "Texto HTML". A continuación haz clic en "Añadir" para añadir el nombre.

Ahora, cuando exportes tu página web, tu texto permanecerá como texto y el resto del grupo se convertirá en imagen. Todos los paneles de texto suministrados por la GALERÍA

DE DISEÑOS ya han aplicado este nombre a los objetos de texto dentro de los mismos, por lo que el texto de los paneles se exportará como texto.

Los navegadores no pueden renderizar texto con rotación, por lo que no puedes utilizar este nombre para forzar que el texto con rotación sea exportado como texto. En este caso, el nombre se ignora.


Copiar estilos de texto

Es fácil copiar el estilo de cualquier texto a otra región de texto utilizando la opción PEGAR

ATRIBUTOS:

• Selecciona la región fuente cuyo estilo quieres copiar. Esto puede ser también una sola palabra (sólo haz doble clic).

• Selecciona Edición > Copia (o Ctrl+C). • Selecciona la región de texto a la que quieres aplicar el estilo. • Selecciona Edición > Pegar atributos (Ctrl + Majús + A).

Si el cursor de texto se encuentra posicionado en algún texto cuando PEGAS ATRIBUTOS, los atributos del párrafo se pegarán a este otro (p.ej. tabulaciones, márgenes).

Si has seleccionado una región de texto, entonces PEGAR ATRIBUTOS insertará todos los atributos visuales del texto fuente.

Aplicar atributos a historias de texto completas

Si el cursor se encuentra en un objeto simple o una columna de texto, Esc seleccionará todo el objeto de texto. Puedes aplicar un atributo, por ejemplo, un color, y todo el objeto de texto se modificará. Esto es con frecuencia más rápido que realizar seleccionar todo (Ctlr+A).

Con las áreas de texto este método sólo funciona si se han seleccionado todas las áreas de texto. Puedes hacer esto en la herramienta de SELECCIÓN con un clic y ń+clic sobre las diferentes áreas de texto para seleccionarlas. Pero este método sólo es posible si las áreas de texto se encuentran en una sola página. Si tu historia de texto fluye por diferentes páginas y quieres cambiar todo el texto, entonces será necesario Seleccionar todo (Ctrl+A) y después aplicar los atributos deseados.

Copiar / Pegar texto con formato (RTF)

Puedes copiar texto con formato desde otras aplicaciones como editores o procesadores de texto y copiarlo en MAGIX Web Designer 6 como texto y las fuentes, márgenes y espaciado de líneas se conservarán. Esto facilita la posibilidad de conservar el estilo y apariencia de tu texto.

Cuando pegas texto en formato Rich Text (RFT) desde otras aplicaciones se te da la opción de pegar el texto como "texto sin formato" lo que significa que aparecerá en la fuente y estilo del cursor donde pegas o como Rich Text lo que significa que se conservará el estilo del texto fuente.

Esto también funciona al revés. Puedes copiar texto de Web Designer y pegarlo en otras aplicaciones compatibles con Rich Text y el estilo (fuente, tamaño, colores, márgenes, etc.) se conservará. Esto funciona solamente si copias de un objeto de texto simple o de un único texto fluido.


Algunas aplicaciones, como Microsoft Word, tienen una opción del menú que provee una amplia gama de opciones de pegado. Estas aplicaciones te permiten muchas veces escoger el formato del objeto pegado (texto o gráfico).

Visualizar fuentes utilizadas

Muchas veces es útil obtener un resumen de las fuentes utilizadas en el documento, especialmente si quieres compartir el documento con otros usuarios de Web Designer que no tienen las fuentes instaladas.

Encontrarás una lista completa de las fuentes utilizadas en "Archivo" > "Propiedades del documento".

Todas las fuentes que no estén instaladas pero se estén utilizando en el documento, estarán señaladas con "NO INSTALADA".

Si quieres enviar el documento a otro usuario que no tiene instaladas las fuentes utilizadas pero que tampoco tiene que editar el texto, entonces puedes convertir el texto en formas editables (lee a continuación).

Incrustación de fuentes

MAGIX Web Designer 6 guarda las formas de caracteres de todas las fuentes usadas en tu documento. Esto significa que si pasas tu archivo de diseño a otra persona o transfieres el archivo a otro ordenador, el texto todavía tendrá exactamente la misma apariencia, incluso si las fuentes correctas no están instaladas en dicho ordenador. Pero esto únicamente incrusta los caracteres usados en el documento (no se incluye la fuente completa). Por lo tanto, en los ordenadores que no disponen de las fuentes, el texto que se añada en las fuentes no disponibles puede que no cuente con las formas de caracteres correctas.

Compatibilidad entre el navegador y el texto

Lamentablemente, es un hecho que diferentes navegadores visualizan el mismo texto de forma ligeramente diferente, por general con un tamaño o una longitud de línea un poco diferente. En el momento de redacción sólo existe un navegador web capaz de visualizar los tamaños de texto de forma exacta y correcta (Firefox 3 en Mac); todos los demás navegadores muestran frecuentemente un texto demasiado largo y los tamaños se redondean a píxeles enteros (por ejemplo un texto de 10pt no se visualiza con un tamaño de 10pt, sino con el tamaño de píxel redondeado más próximo (13 píxeles)).

MAGIX Web Designer 6 ha sido diseñado para emular el comportamiento de la mayoría de los navegadores más comunes ajustando los tamaños intermedios a píxeles enteros y ajustando las longitudes de línea para emular al máximo el texto en navegadores de Windows. Puedes desactivar este ajuste en el diálogo OPCIONES, en la pestaña GENERAL (menú HERRAMIENTAS -> OPCIONES deseleccionando la opción "MOSTRAR LONGITUDES DE

TEXTO COMPATIBLES CON WINDOWS".


Nota para usuarios avanzados: si utilizas Xtreme o desactivas esta opción de compatibilidad, cuando introduzcas un tamaño intermedio, por ejemplo 13,6 píxeles ó 10 pt, obtendrás el texto exactamente con ese mismo tamaño. Pero ya advertimos que la mayoría de los navegadores web visualizarán este texto con un tamaño ligeramente mayor o menor al que se ve en el Web Designer.

La segunda consecuencia del (mal) comportamiento de este navegador es que en el caso de las fuentes pequeñas se produce un gran salto de un tamaño al siguiente. Por lo tanto, si deseas un tamaño de fuente, por ejemplo entre 9pix y 10pix, no podrás obtenerlo. La mayoría de los navegadores no pueden visualizar un tamaño intermedio (tanto si usas puntos, ems o cualquier otro tipo de unidad). Por lo tanto verás cómo los tamaños de texto de Web Designer saltan de un tamaño a otro tamaño cuando cambies el tamaño de los objetos de texto.

La herramienta de relleno 177

La herramienta de relleno

Creación de una gradación de color lineal

El procedimiento para la creación de un relleno es igual para todos los tipos de relleno:

1. Selecciona uno o varios objetos a los que quieres aplicar los rellenos. 2. Activa la herramienta de relleno (Shortcut F5) 3. Escoge el tipo de relleno deseado del menú. 4. Haz clic y arrastra el ratón sobre el objeto para crear el relleno.

También puedes arrastrar directamente los controles deslizantes de relleno para adaptar el tamaño y la posición.

MAGIX Web Designer 6 muestra una vista previa interactiva y fluida durante el arrastre. Esto tiene algunas ventajas con respecto a las herramientas tradicionales que trabajan a través de diálogos. No sólo son necesarios pocos clics del ratón, sino que también se aumenta la velocidad de trabajo y las opciones de posicionamiento de los puntos de inicio y fin.

Al arrastrar, se creará una flecha con controles para la dirección del relleno. Los controles deslizantes de relleno pueden seleccionarse y desplazarse para modificar la posición y el ángulo del relleno.

Coloreado de rellenos

Selecciona uno de los controles deslizantes de relleno y haz clic sobre un color de la LÍNEA

DE COLOR o abre el editor de colores para definir un nuevo color. Para cambiar entre los controles deslizantes de relleno, pulsa "Tab".

Modificar selección

En la herramienta de relleno, un objeto se selecciona con un clic y no es necesario cambiar a la herramienta de selección para marcar otro objeto.

178 La herramienta de relleno

Tipos de relleno

Web Designer dispone de estos tipos de relleno de color:

RELLENO LISO: la forma recibe un color o tono parejo en toda la superficie.

RELLENO LINEAL: el color cambia gradualmente de un color a otro.

RELLENO CIRCULAR: el color cambia a partir de un punto en forma circular.

RELLENO ELÍPTICO: similar al relleno circular, salvo que el cambio se realiza en forma elíptica.

Relleno de mapa de bits: el objeto se rellena con una o más copias con forma de mosaico de un mapa de bits o de una foto. Todas las fotos que ves en <Progammname> son formas con relleno de mapa bits (por lo general rectángulos, por supuesto). Se puede usar cualquier foto o bitmap en el BITMAP o en las galerías RELLENO.

NUBES FRACTALES: produce un relleno aleatorio con parches que es especialmente útil para nubes y neblina.

PLASMA FRACTAL: un relleno aleatorio de parches que presenta un mayor contraste que el relleno de nubes fractales.

La herramienta de RELLENOS te permite aplicar estos tipos de relleno al objeto o a los objetos seleccionado(s), así como editar y ajustar los rellenos.

Seleccionar dentro automáticamente En la herramienta de relleno, se aplica automáticamente la opción "Seleccionar dentro" si haces clic sobre un objeto, es decir, que se selecciona parte de un grupo en vez del grupo como un todo. En la herramienta de relleno, si haces clic en un objeto que se encuentra dentro de un grupo, se selecciona dicho objeto en lugar de seleccionarse el grupo completo. Esto se conoce como "seleccionar dentro". De este modo es más fácil trabajar en fotos y rellenos dentro de grupos. Si quieres cambiar el atributo de relleno de un grupo (que no es muy probable) necesitas seleccionar el grupo utilizando primero la herramienta de selección.


Barra de información de la herramienta de relleno

Tipo de relleno

Segmentación de relleno

Efecto de relleno

Mapa de bits nombre

Control deslizante de relleno/Resolución

Color del control deslizante/Grano

TIPO DE RELLENO selecciona el tipo de relleno. Si seleccionas un relleno de este menú:

• mientras tienes un objeto seleccionado, se aplicará el relleno al objeto; • sin un objeto seleccionado, establece el actual tipo de relleno estándar, el cual se usa

para objetos nuevos dibujados.

SEGMENTACIÓN DEL RELLENO (FILL TILING) se utiliza para aplicar rellenos de mapas de bits y rellenos fractales. Las opciones se describen más adelante en los rellenos de mapas de bits. La segmentación de relleno cambia la repetición del efecto de relleno. Las opciones son:

• Simple: el relleno se utiliza una sola vez, independientemente del tamaño del objeto. El texto alrededor del "mosaico" simple es transparente.

• Repetir / Repetir mosaico (repeating/repeating tile): el efecto se repite hasta llenar todo el objeto.

• Invertir mosaico repetido: sólo disponible en rellenos fractales y de mapas de bits. Esto es similar al mosaico repetido, pero uno de cada dos mosaicos está invertido. Esto ayuda a ocultar las junturas donde los mosaicos se juntan.

Una forma de elipse con un relleno elíptico repetido (repeating elliptical fill)

El EFECTO DE RELLENO se utiliza para todos los tipos de rellenos. Controla el desvanecimiento del relleno desde el color de inicio al color de fin:

• TRANSICIÓN: crea una transición entre los dos colores de forma lineal • ARCO IRIS: realiza una transición siguiendo el borde más breve del modelo de color HSV.

Por ejemplo, una transición de amarillo a cian será amarillo-verde-cian.


Esta opción no tiene efecto alguno cuando los dos colores son negro, blanco y gris.

• ALT ARCO IRIS: similar a la opción arco iris salvo que la transición se realiza siguiente el borde más extenso de la rueda de color. Por ejemplo, la transición de amarillo a cian será amarillo-rojo-magenta-azul-cian.

El NOMBRE DE MAPA DE BITS muestra un menú desplegable con vistas en miniatura (thumbnails) de todos los mapas de bits de la GALERÍA DE MAPAS DE BITS y es una forma sencilla de seleccionar el mapa de bits o la foto requerido para un relleno de mapa de bits.

CONTROL DESLIZANTE DE RELLENO: te indica si el control deslizante de inicio o fin está seleccionado. Este campo queda en blanco para rellenos lisos.

RESOLUCIÓN (sólo rellenos de mapas de bits y fractales): muestra la resolución del mapa de bits (siempre que no hayas seleccionado un control deslizante de relleno). Puedes introducir una nueva resolución para cambiar el tamaño del mapa de bits. Las resoluciones bajas muestran los píxeles individuales del mapa de bits. Muy pocas veces se necesita una resolución mayor que 150 DPI, incluso para utilización de tipografía. 96 DPI es suficiente para la resolución de pantalla.

COLOR DE CONTROL DESLIZANTE DE RELLENO (excepto relleno de mapas de bits): indica el color aplicado al control deslizante de relleno seleccionado.

Rellenos lisos

Para aplicar o cambiar un relleno liso:

1. Selecciona un relleno liso del menú de tipos de relleno. 2. Elige un color de LÍNEA DE COLORES.

La línea de colores se describe en Manejo de colores (en la página 135).

Rellenos lineales

Así se utilizan los rellenos lineales:

1. Escoge "Relleno lineal" del menú. (No es necesario si el relleno contiene una relleno de un color).

2. Coloca el cursor del ratón en el lugar donde debe comenzar el relleno. (Esto también puede ser fuera del objeto).

3. Arrastra el cursor hasta la posición de fin del relleno. (También puede encontrarse fuera del objeto).


La flecha que se dibujará sobre el objeto seleccionado, se denomina flecha de relleno. Esta flecha muestra la dirección y el alcance de la gradación del relleno. Ambos extremos de la flecha pueden marcarse con un clic.

Desplazamiento de los controles de inicio y fin de un relleno

Modificación de la dirección y el tamaño de la gradación de un relleno:

1. Desplaza el cursor sobre el control deslizante que quieres mover. Al encontrarse sobre el control deslizante, el aspecto del cursor cambiará.

2. Arrastra el control deslizante.

Cambiar colores de un relleno

Para cambiar el color de un relleno:

• Arrastra el color desde la LÍNEA DE COLORES hasta un control deslizante de relleno (no es necesario que selecciones primero el control deslizante).

• O bien O arrastra el color hasta el objeto. Cada relleno tiene una línea central imaginaria en la mitad de la flecha de relleno. Si sueltas el color sobre el control deslizante de inicio, cambiará el color del control deslizante de inicio; mientras que si lo sueltas sobre el control deslizante de fin, cambiará el color en el control deslizante de fin.

• Si está seleccionado uno de los controles deslizantes (está señalado), simplemente haz clic sobre un color.

La línea de colores se describe en Trabajar con colores (en la página 135).

Cada método cambia el color de un solo control deslizante; no se cambia ningún otro control deslizante seleccionado, o:

1. Selecciona el control deslizante (o controles deslizantes, también funciona con objetos múltiples) correspondiente.

2. Escoge el color deseado de la línea de colores. 3. Esto cambia todos los controles deslizantes de relleno seleccionados.

Rellenos circulares

Para los rellenos circulares, la aplicación del relleno, movimiento de los controles deslizantes y el cambio de los colores son iguales a los rellenos lineales. El control deslizante de inicio es el centro del relleno.

Los rellenos circulares son útiles para crear efectos de sombras.

Cambiar el aspecto alto/ancho del objeto cambia automáticamente un relleno circular a un relleno elíptico (ver a continuación).

Una forma rápida de aplicar un relleno circular: +arrastra para crear un relleno circular.


Rellenos elípticos

La aplicación de un relleno elíptico es similar a la aplicación de rellenos lineales. A medida que arrastras el cursor del ratón, creas un círculo con dos controles deslizantes de fin. Después puedes arrastrar estos controles deslizantes para crear una elipse adecuada.

+arrastrar conserva la relación de aspecto del relleno. Ctrl+arrastrar limita la rotación a los ángulos de restricción configurados. El desplazamiento de controles deslizantes y el cambio de colores es igual que para los rellenos lineales.

Rellenos de mapa de bits

Tipo de relleno

Segmentación de relleno

No utilizado

Nombre de mapa de bits

Resolución

No utilizado

La Galería de mapa de bits se describe en La galería de mapa de bits (en la página 224) en el capítulo Trabajar con fotos, para Galería de rellenos, lee más abajo (en la página 186).

El relleno de mapas de bits es el tipo de relleno más impactante. Te permite utilizar cualquier foto o textura como relleno de cualquier forma y te ofrece control directo sobre el tamaño, ángulo, posición y mosaico. También puedes colorear los rellenos de mapas de bits. Puedes utilizar cualquier tipo de mapas de bits, incluyendo fotos JPEG y canal alfa (semi-transparentes).

Cuando importas un archivo de foto en MAGIX Web Designer 6 (ej. un archivo JPG o PNG) aparecerá como una forma con un tipo de relleno de mapa de bits. Cuando un objeto de este tipo se selecciona en la línea de estado, se muestra como una "foto", pero es lo mismo que una foto a la que se le ha aplicado un relleno de mapa de bits.

Para rellenar o dar forma con un mapa de bits o relleno de foto, realiza uno de los siguientes pasos:

• Arrastra un mapa de bits desde la GALERÍA DE MAPA DE BITS o desde el explorador de Windows, manteniendo Shift presionada y soltando, o bien

• Arrastra un relleno desde la GALERÍA DE RELLENOS hasta una forma (en este caso, no es necesario mantener Shift presionada antes de soltar)


• Selecciona "Mapa de bits" del menú desplegable de la izquierda de la BARRA DE

INFORMACIÓN de la HERRAMIENTA DE RELLENO, y luego selecciona el mapa de bits requerido del menú desplegable de nombres de mapas de bits (solo muestra mapas de bits que hayan sido cargados previamente).

Puedes rellenar un objeto con un mapa de bits o múltiples repeticiones del mapa de bits.

Mosaico simple (foto) Mosaico repetido Repetir invertido: los mosaicos se adaptan de forma perfecta.

El relleno tiene tres controles deslizantes. Para ello, utiliza Cambiar el tamaño y la posición del relleno de mapa de bits (en la página 184). Una forma alternativa de configurar el tamaño del mapa de bits es introducir la resolución en el campo de la barra de información. Primero tienes que deshacer la selección de control deslizante de relleno haciendo clic en cualquier parte de la imagen donde no haya un control deslizante de relleno, y luego escribe una nueva resolución dpi.

Sustitución de los rellenos de mapa de bits

Si una forma ya contiene un mapa de bits, o es una foto, entonces solamente puedes arrastrar y soltar un nuevo mapa de bits desde cualquier fuente, como el Explorador de Windows, y se sustituirá el mapa de bits existente. La nueva imagen se adaptará a la forma de forma exacta. El hacer esto también sustituirá todas las otras instancias de la foto en la página actual.

Si presionas SHIFT al sustituir una foto de esta forma, la posición, escala y rotación del relleno de mapa de bits se conservará.

Coloreado de mapa de bits

Puedes colorear cualquier mapa de bits o relleno de foto pulsando simplemente sobre un color en la LÍNEA DE COLOR (asegúrate de no haber seleccionado ningún control deslizante de relleno, al hacer clic sobre la imagen). Esto creará un tono contínuo (técnicamente tono dual) que fluctúa entre el negro y el color seleccionado. También puedes hacer clic derecho en la línea de color y seleccionar 'ESTABLECER COLOR CLARO DE TONO CONTINUO' o bien 'ESTABLECER COLOR OSCURO DE TONO CONTINUO'.

Por ejemplo, para convertir una foto a blanco y negro, sólo necesitas hacer clic en el color blanco de la línea de color.

Para cancelar cualquier color aplicado, escoge SIN COLOR para cualquiera de los controles deslizantes. Esto restaura el color original del mapa de bits.


El campo RESOLUCIÓN de la BARRA DE INFORMACIÓN muestra la resolución que puede modificarse moviendo los controles deslizantes de relleno o introduciendo un valor.

Cambio del tamaño y la posición del relleno de mapa de bits

Si pulsas Shift, haces clic y arrastras hasta una forma que ya contiene un relleno de mapa de bits, se creará un nuevo relleno de mapa de bits cuyo centro se encontrará en el punto del clic. Si mantienes pulsada la tecla Ctrl también, el ángulo se limitará, de forma que te será más fácil crear un mapa de bits vertical.

Una vez que has creado el relleno, puedes arrastrar hasta cualquier lugar de la imagen para reposicionar el relleno dentro de la forma.

Al pasar el ratón sobre los controles deslizantes de relleno exteriores, el cursor del ratón se convertirá en un cursor de "rotación". Si arrastras los controles deslizantes externos, el relleno de mapa de bits se ampliará, pero manteniendo la relación de aspecto; si pulsas "ñ" mientras arrastras, se cambiará el tamaño vertical y el horizontal de forma independiente y el relleno se doblará. La barra de información muestra la resolución del relleno de mapa de bits (puedes ajustar la resolución y, por lo tanto, el tamaño del mapa de bits, introduciendo un nuevo valor).

Un ejemplo

Para rellenar la elipse de la izquierda con la foto central:


1. Arrastra la foto o archivo de mapa de bits desde el Explorador de Windows (o desde la Galería de mapas de bits si ya se ha utilizado en el documento) hasta la elipse y luego arrástrala mientras pulsas la tecla "Shift". La herramienta de relleno se convertirá en la herramienta actual.

2. Ahora podrás ajustar el ángulo y tamaño de la imagen arrastrando los controles deslizantes de relleno.

El ejemplo anterior tiene una sombra simple. Lee el capítulo sobre la herramienta de sombras (en la página 191) para más información.

Relleno fractal

MAGIX Web Designer 6 es compatible con dos tipos de rellenos fractales que son modelos de relleno naturalistas creados matemáticamente. Son muy útiles para simular el color del cielo, las nubes u otras texturas de la naturaleza.

Cada vez que creas un relleno fractal nuevo se crea un nuevo modelo. Para sustituir un fractal existente por un modelo nuevo escoge uno del menú de relleno.

El control GRANO de la BARRA DE INFORMACIÓN te permite controlar la proporción de granos del modelo. Los valores bajos resultan en un modelo suave, mientras que los valores altos dan modelos con granos más marcados.

Puedes ajustar el tamaño y posición del relleno fractal arrastrando y ajustando los controles deslizantes de relleno. Deselecciona los controles deslizantes de relleno (clic sobre el relleno fuera de los controles) para ver los controles de resolución y granos.

Relleno fractal con nubes. A la izquierda con valor de grano 1, a la derecha con valor de grano 50.

186 La herramienta de relleno Relleno de plasma fractal. A la izquierda con valor de grano 5, a la derecha con valor de grano 50.

Nota la diferencia entre el grano y la resolución. El grano controla el flujo del modelo. La resolución establece el tamaño del mapa de bits fractal y la impresión de los píxeles individuales.

Puedes cambiar los colores de inicio y fin de un relleno fractal. Selecciona los controles deslizantes centrales o externos y después aplica el color utilizando la línea de colores o la galería de COLOR. Para cancelar el color aplicado, escoge Sin color.

Gradaciones de color de varios niveles

Muchos de los tipos de rellenos con gradación de color (lineal, circular, elíptico, cónico, rombos) son compatibles con rellenos de gradación de varios niveles, lo que significa que en vez de pasar de un color a otro, puede pasar por una cantidad de niveles de color diferentes.

Para añadir un nuevo nivel de color a una graduación, selecciona la herramienta de relleno para que se vea la flecha de relleno y después:

• Arrastra un color hasta el lugar correspondiente de la flecha de relleno. • O haz doble clic sobre la flecha de relleno para crear un nuevo control de relleno y

después haz clic sobre un color o abre el EDITOR DE COLOR.

Puedes reposicionar los controles deslizantes de relleno simplemente arrastrándolos.

Si un control deslizante de relleno se encuentra seleccionado, pulsa Tab para seleccionar el siguiente. Si el EDITOR DE COLOR está abierto, se actualizará para reflejar el nuevo control deslizante de relleno

Para eliminar un control deslizante de nivel, selecciónalo con un clic y pulsa la tecla Supr.

La galería de rellenos

La GALERÍA DE RELLENOS contiene texturas de mapas de bits que pueden utilizarse para rellenos. Sólo cuando utilizas un relleno se copia en el documento.

Para ver la GALERÍA DE RELLENOS:

• Escoge HERRAMIENTAS > GALERÍAS > GALERÍA DE RELLENOS. • O pulsa " + F11".


IMPORTAR: importa el mapa de bits seleccionado en el documento. Una copia del mapa de bits aparece en la GALERÍA DE MAPAS DE BITS. También puedes arrastrar y soltar el mapa de bits hasta una parte en blanco de la página. Esto es en general más fácil que hacer clic en IMPORTAR.

RELLENAR: importa y aplica el mapa de bits seleccionado como:

• Un relleno de mapa de bits en los objetos seleccionados (de existir). • O, si ningún objeto es seleccionado, inserta el mapa de bits en el documento como un

nuevo objeto de foto.

También puedes arrastrar y soltar el mapa de bits hasta un objeto para aplicar un relleno de mapa de bits.

Hay algunas diferencias entre arrastrar una mapa de bits desde la galería de MAPAS DE

BITS o la GALERÍA DE RELLENOS: al arrastrar mapas de bits desde la GALERÍA DE RELLENOS y soltarlos sobre las formas para crear un relleno de mapa de bits, el relleno tendrá mosaicos y el mapa de bits no tendrá la mejor adaptación posible para la forma. Este comportamiento es diferente al que ocurre al arrastrar desde la galería de mapa de bits porque en general las texturas se aplican desde la galería de rellenos y normalmente tienen forma de mosaico y no adaptadas.

TRANSP : (transparencia) importa y aplica el mapa de bits seleccionado como:

• Un mapa de bits transparente al objeto seleccionado (de existir). • O configura el atributo de transparencia actual.

OBTENER RELLENOS: descarga rellenos gratis de Xara.

FONDO: establece el relleno seleccionado como fondo de página.

ELIMINAR: borra el relleno o carpeta seleccionada.

RELLENO DE DISCO: añade nuevos rellenos de tu disco duro o un CD.


OPCIONES: te permite seleccionar el tamaño de los símbolos de vista previa y si se debe mostrar información completa sobre el mapa de bits, así como buscar y ordenar los rellenos.

DETENER DESCARGA: si tienes una conexión lenta y la descarga de Internet se demora, puedes detener la descarga y continuarla más tarde.

Buscar y ordenar están descritos en el capítulo Trabajar con documentos (en la página 83).

Trabajar con documentos (en la página 83) incluye información general sobre galerías.

Transparencia 189

Transparencia

La herramienta de TRANSPARENCIA te permite determinar cuánto de los colores y objetos subyacentes se podrán ver a través de un objeto.

Forma

Segmentación

Nombre de mapa de bits

Control deslizante/Resolución

Cantidad de transparencia

Puedes controlar el nivel de transparencia desde completamente opaco a completamente transparente. Web Designer va más allá que otros programas, ya que ofrece una amplia gama de gradaciones de transparencia diferentes.

Puedes aplicar transparencia lisa o con gradación a todos los tipos de objeto, incluyendo mapas de bits.

Aplicar transparencia plana

Se llama transparencia "plana" porque todas las partes de los objetos tienen la misma transparencia, a diferencia de la transparencia con gradación.

1. Selecciona el o los objetos. 2. Selecciona la herramienta de transparencia (shortcut F6) 3. Arrastra la barra deslizante de transparencia en la barra de información

MAGIX Web Designer 6 suministra una vista previa en vivo. A medida que arrastras la barra de transparencia, los objetos del documento se modifican para que puedas ver el efecto inmediatamente.

Aplicar transparencia con gradación

La transparencia con gradación funciona de forma muy similar a los rellenos de color (en la página 176) con gradación. Debes arrastrar sobre los objetos en la HERRAMIENTA DE

TRANSPARENCIA para crear una transparencia con gradación. Tienes a disposición una gama similar de formas de transparencia: la más sencilla es la lineal, pero también puedes utilizar transparencias circulares o elípticas:

1. Selecciona el o los objetos. 2. En la HERRAMIENTA DE TRANSPARENCIA, arrastra a lo largo de los objetos para crear

un desvanecimiento lineal a lo largo del objeto.

190 Transparencia

3. Selecciona formas de transparencia alternativas del menú desplegable de la barra de información

Puedes seleccionar y ajustar la posición y la intensidad de transparencia utilizando los controles deslizantes del objeto.

Lee Rellenos para más información sobre cómo manipular los controles deslizantes de relleno y las diferentes formas de relleno (en este caso, formas de transparencia)

Aplicar transparencia a varios objetos

Si agrupas objetos y aplicas transparencia, todo el grupo será tratado como un objeto y la transparencia se aplicará a todo el grupo. Sin embargo, si los objetos no están agrupados y aplicas transparencia, cada objeto individual recibirá una transparencia por separado y obtendrás un efecto diferente si los objetos están superpuestos.

Transparencia individual (izquierda) o transparencia de grupo (derecha)

Mezclar transparencias individuales y de grupo

Puedes combinar los métodos descritos anteriormente para crear combinaciones complejas de transparencia. Por ejemplo, puedes aplicar un 50% de transparencia a un objeto, después agruparlo y aplicar también transparencia al grupo. También puedes aplicar primero transparencia al grupo y después aplicar atributos a objetos individuales dentro de un grupo. Simplemente pulsa Ctrl, haz clic sobre el objeto y cambia sus atributos.

Sombras 191

Sombras

La herramienta de sombra

La herramienta de SOMBRA (shortcut Ctrl+F2) te permite aplicar, eliminar y modificar sombras semitransparentes (o "suaves").

Sin sombra

Tipos de sombras

Nitidez de la sombra

Transparencia de la sombra

Posición de la sombra

MAGIX Web Designer 6 tiene tres tipos de sombras:

• Pared (Wall): la sombra se proyecta detrás del objeto. • Suelo (Floor): el objeto parece estar parado verticalmente sobre una superficie.

Brillo (Glow): la sombra se utiliza para añadir un efecto de halo alrededor del objeto

La transparencia de sombras suaves aumenta hacia los bordes, lo que le otorga un efecto muy realista. Las sombras tienen su propia resolución y puedes modificar su tamaño sin pérdida de calidad.

192 Sombras

Aplicar una sombra

Aplicar una sombra de pared

Para aplicar una sombra de pared:

1. Selecciona el objeto. 2. Escoge la herramienta de SOMBRA. 3. Selecciona el botón PARED de la barra de

información de la herramienta de SOMBRA. 4. Puedes arrastrar la sombra desde o hacia el objeto

para crear más o menos distancia entre el objeto y la pared imaginaria.

Como alternativa para crear una sombra de pared:

1. Selecciona el objeto. 2. Escoge la herramienta de SOMBRA. 3. Arrastra desde el centro del objeto en dirección a la sombra.

Aplicar una sombra de suelo

1. Selecciona el objeto. 2. Escoge la herramienta de SOMBRA. 3. Selecciona el botón SUELO de la barra de

información de la herramienta de SOMBRA. 4. Arrastra hacia o desde el objeto para cambiar el

tamaño o la dirección radial. El ángulo puede tener hasta 70°.

Aplicar un efecto de resplandor

Añadir un resplandor o halo detrás de un objeto puede crear gráficos muy asombrosos.

Para crear un efecto de resplandor:

1. Selecciona el objeto. 2. Escoge la herramienta de SOMBRA. 3. Selecciona el botón RESPLANDOR de la barra de

información de la herramienta de SOMBRA. 4. Arrastra hacia o desde el objeto para cambiar el

tamaño del resplandor.

Sombras 193

Desenfocar los bordes de la sombra

Esto cambia el tamaño de la sombra. Un desenfoque leve otorga el efecto de una fuente de luz fuerte, un desenfoque mayor, una fuente de luz difusa o distante. Se recomienda que las sombras siempre estén desenfocadas levemente, puesto que es más realista.

Para desenfocar los bordes de la sombra:

1. Selecciona el objeto 2. Escoge la herramienta de SOMBRA. 3. En la barra de información de la herramienta de SOMBRA, arrastra la barra deslizante

o introduce un valor en el campo de texto de la derecha.

Cambiar la transparencia de la sombra

Una sombra semitransparente es más realista que una sombra sólida. Pero puedes cambiar el nivel de transparencia de la sombra para adaptarla a tus necesidades.

Para cambiar la transparencia:

1. Selecciona el objeto 2. Escoge la herramienta de SOMBRA. 3. En la barra de información de la herramienta de SOMBRA, arrastra la barra deslizante

de transparencia o introduce un valor en el campo de texto de la derecha.

Cambiar el color de sombra o el efecto de relleno

Después de aplicar una sombra a un objeto, puedes cambiar el color de la sombra o el efecto de relleno. Puedes aplicar cualquiera de los efectos de color de MAGIX Web Designer 6 incluyendo rellenos multinivel.

Cómo cambiar el color de la sombra:

194 Sombras

Para más información sobre colores y la línea de colores lee el capítulo Trabajar con colores (en la página 135).

• La forma más fácil es arrastrar y soltar un color desde la línea de color hasta la sombra. (Asegúrate de soltar el color sobre la sombra y no sobre el objeto.)

• Como alternativa, tienes a disposición este método un poco más complejo pero que te permite el control absoluto sobre el color:

1. Selecciona la sombra utilizando la herramienta de SELECCIÓN. (Asegúrate de seleccionar la sombra y no el objeto).

2. Utiliza el EDITOR DE COLOR para editar el color.

Eliminar una sombra

Para eliminar una sombra suave:

1. Selecciona el objeto 2. Escoge la herramienta de SOMBRA. 3. Selecciona el botón SIN SOMBRA de la barra de información de la herramienta

de SOMBRA.

Aplicar una sombra a varios objetos

El resultado de aplicar una sombra depende de la agrupación de los objetos:

• Si los objetos están agrupados, las sombras superpuestas se fusionan (no se oscurecen al superponerse).

• Si los objetos no están agrupados, cada objeto recibirá una sombra individual. Las partes superpuestas de las sombras se verán más oscuras.

• Si has seleccionado varios objetos con sombra, los cambios se aplicarán a todas las sombras.

Sombras 195

Selección de objetos con ayuda de la herramienta de sombras

Antes de colocar una sombra a un objeto debes marcarlo. La forma usual de seleccionar un objeto es a través de la herramienta de SELECCIÓN. Sin embargo, también puedes utilizar la herramienta de SOMBRAS para marcar un objeto con un simple clic.

Copiar sombras a otros objetos

Una vez que una sombra se ve de la forma que deseas, puedes copiarla a otros objetos utilizando la opción Pegar atributos. Simplemente copia el objeto que tiene la sombra (Edición > Copia), selecciona el objeto o los objetos a los que quieres pegarle la sombra y escoge Edición > Pegar atributos.

196 Diálogo de propiedades web

Diálogo de propiedades web

El diálogo de propiedades web es un diálogo con múltiples pestañas que te permite añadir y configurar la mayoría de las características relacionas con la web en MAGIX Web Designer 6 y fijar diferentes propiedades web en objetos, páginas y en toda tu página web. Ábrelo con la opción de menú "HERRAMIENTAS->PROPIEDADES WEB..." (Shift+Ctr+W).

También puedes acceder a cada pestaña del diálogo con los botones de la barra desplegable de propiedades web, disponible en la barra de herramientas de página web.

Pestaña Enlace

Pestaña Página web

Pestaña Página

Pestaña Imagen

Pestaña Mouse-over

Pestaña Marcador de posición

Pestaña Publicar

Crear/Editar barra de navegación

El diálogo carece de modo así que puedes dejarlo abierto mientras seleccionas diferentes páginas y objetos en tu documento. Así es más fácil fijar propiedades rápidamente en diferentes objetos y páginas en tu sitio web. Utiliza el botón ACEPTAR para aplicar tus cambios y cerrar el diálogo, o bien utiliza el botón APLICAR para aplicar tus cambios sin cerrar.

Ten en cuenta que si tu documento actual es un diseño de animación, el diálogo de PROPIEDADES WEB aparece de forma modificada con algunos controles diferentes y muchos otros deshabilitados porque no se aplican a las animaciones. Lee el capítulo sobre Flash (en la página 283) para informarte sobre cómo usar este diálogo con diseños de animación.

Las siguientes secciones abarcan cada una de las pestañas correspondientes.

Diálogo de propiedades web 197

Pestaña Enlace

La configuración de esta pestaña se aplica al objeto, a los objetos o al texto seleccionado(s). Por lo general, esta pestaña se utiliza para añadir un enlace a un objeto en tu página web (por ejemplo un botón o una foto), o bien para añadir texto de modo que cuando un usuario visita tu página y hace clic en el objeto/texto, es remitido a otra página. Puedes añadir enlaces hacia otras páginas de tu sitio web, hacia una URL (dirección web), o incluso hacer que aparezca una ventana emergente (pop-up).

Para agregar un vínculo a unas pocas palabras de un párrafo de texto, ve a HERRAMIENTA

DE TEXTO y arrastra sobre el texto que quieras vincular, para seleccionarlo. A continuación configura el enlace en esta pestaña.

La sección principal de esta pestaña te permite escoger qué debe ocurrir cuando se hace clic en el objeto o texto seleccionado.


Enlazar a una dirección web

Para vincular esta dirección, introduce una dirección web. Si mantienes seleccionado el recuadro "CORREGIR DIRECCIÓN AUTOMÁTICAMENTE", tu dirección, en caso necesario, se ajustará si haces clic en OK o Aplicar. Por ejemplo, si entras a "www.xara.com", lo corregirá a "http://www.xara.com/".

Puedes poner en el campo de la dirección del enlace una dirección de correo electrónico y así, al hacer clic en el enlace, se abrirá el programa de correo electrónico del usuario con el campo Para: rellenado. Asimismo, puedes especificar la línea del asunto, agregar direcciones de correo electrónico CC o CCO para copiarlas en el correo electrónico, o incluso especificar el cuerpo de texto estándar que deseas utilizar.

[email protected] asunto:correo electrónico de la página web cc:[email protected] coo:[email protected] cuerpo:correo electrónico autogenerado

Nota técnica: MAGIX Web Designer 6 codifica tu dirección de correo electrónico para reducir las probabilidades de que robots de correo basura encuentren tu correo electrónico de la página web. Esto requiere que Javascript esté permitido en el navegador (actualmente > 95%) de los navegadores).

Enlazar a la página

Selecciona esta opción para enlazar otra página en la página web actual. La lista desplegable te permite seleccionar la página que deseas enlazar.

CONSEJO: si tu documento de sitio web tiene varias páginas, asignar a cada una un nombre facilita la configuración y mantenimiento de los enlaces de tu página porque la lista de páginas contendrá los nombres de las páginas y no solo "Página 2", "Página 3", etc.

Consulta la sección de pestaña Página (en la página 204) a continuación para más detalles sobre cómo configurar los nombres de página o editar los nombres en la galería de Páginas y capas.

Además de una entrada para cada página de tu sitio, la lista desplegable muestra asimismo las entradas especiales PÁGINA SIGUIENTE y PÁGINA ANTERIOR. Utilízalo para agregar un enlace hacia las páginas anterior y posterior de tu sitio web. En el caso de enlaces de este tipo, orden de las páginas se establece según el orden de página que aparece en MAGIX Web Designer 6. Un enlace "siguiente" en la última página vincula la primera página y un enlace "anterior" en la primera página vincula la última página.

Enlazar a una referencia (anchor)

Esta opción te permite hacer que el usuario salte a una parte específica de cualquier página de tu sitio web.

Para configurar un punto de referencia, primero ve a la página y determina hacia dónde quieres que lleve el enlace. Selecciona el objeto y ponle un nombre utilizando la opción

HERRAMIENTAS->NOMBRES.... A continuación selecciona el objeto para el cual quieres crear


el enlace y escoge en la lista suministrada por la opción "Enlazar a una referencia" el nombre de la referencia que ya creaste.

Observa que cuando creas un enlace vinculado a un objeto que se encuentra muy abajo en la página, el navegador web bajará la página automáticamente para mostrar tu objeto de referencia.

Enlace al archivo

Esta opción de enlace es útil si quieres agregar un documento, película u otro archivo a tu sitio web para que esté a disposición de los visitantes. Por ejemplo, es posible que quieras ofrecer un documento PDF.

Selecciona el objeto o texto que quieres enlazar con el archivo. Luego, activa esta opción Enlace al archivo y utiliza el botón EXPLORAR para buscar el archivo en tu ordenador. El nombre del archivo aparece en el campo de texto a la izquierda del botón Explorar. Con un clic en Aceptar, el enlace se aplicará.

Además de aplicar el enlace, MAGIX Web Designer 6 ha hecho una copia de tu archivo y la ha colocado en la carpeta de soporte para tu diseño. Ésta es una carpeta que se guarda junto con tu archivo .web o .xar. Si tu diseño se llama "Misitio.web", la carpeta de soporte se llamará "Misitio_web_files". Todos los archivos que se encuentran en la carpeta de soporte se publican junto con tu sitio web, lo que significa que tu archivo se publicará con tu sitio web para que el enlace que has agregado funcione. Consulta el capítulo Trabajar con documentos (en la página 76) para más información acerca de las carpetas de soporte.

Ten en cuenta que, como se crea una copia independiente de tu archivo en la carpeta de soporte de tu diseño, debes actualizar esa copia siempre que modifiques el archivo y quieras publicar la versión modificada. O puedes repetir el proceso de enlace y buscar el archivo actualizado. De igual forma, si mueves o copias tu diseño a otro ordenador o le das una copia a alguien, debes asegurarte de enviar también la carpeta de soporte del archivo de diseño porque contiene una parte muy importante de tu página web.

Capa popup

Puedes añadir el contenido que quieras en una capa separada de tu página y puedes hacer que este contenido se muestre como un popup sólo cuando el usuario hace clic en un enlace. Por ejemplo, podrías agregar un texto descriptivo sobre una foto que se encuentre en tu página web y hacer que el texto sólo aparezca cuando el usuario haga clic en la foto.

Para añadir una capa de popup, primero tienes que agregar la propia capa mediante la GALERÍA DE CAPAS y luego añadir tu contenido de popup a esa capa.

Lee el capítulo Galería de páginas y capas para más información. A continuación puedes seleccionar la capa de la lista de capas que encontrarás junto a la opción de "Capa popup".


Ahora, cuando un usuario haga clic en tu objeto, ¡aparecerán los contenido de la capa! Con un clic en cualquier otro lugar de la página, el popup desaparece de nuevo.

Ten en cuenta que todo el contenido de la capa popup se carga en cuanto el usuario visita tu página. Entonces, si quieres suministrar muchas fotos con ventanas emergentes, utiliza la característica Foto emergente descrita a continuación.

El capítulo "Primeros pasos" (en la página 56) incluye algunas instrucciones paso a paso para agregar capas popups.

Foto emergente

Esta opción te ofrece una forma muy fácil de añadir fotos emergentes y otras características de la galería de fotos a tu sitio web, sin agregar capas. Simplemente importa tu foto y utiliza la HERRAMIENTA DE SELECCIÓN para reducir el tamaño correctamente de modo que aparezca como una pequeña miniatura de foto en tu página web. Luego selecciónala y escoge la opción FOTO EMERGENTE.

Haz clic en el botón CONFIGURACIÓN junto a esta opción para ir a la PESTAÑA IMAGEN, en donde puedes fijar el tamaño de la foto emergente y escoger entre otras opciones. Consulta la sección pestaña Imagen a continuación (en la página 206) para más detalles. Al seleccionar la opción foto emergente en esta pestaña Enlace, también se selecciona la casilla foto emergente en la pestaña Imagen, es decir, que ambos activan el mismo comportamiento de popup.

Utilizar colores habituales para enlaces de sitios web

Esta opción te permite decidir cómo deben aparecer los enlaces de texto. Por defecto, esta opción está seleccionada, lo que significa que el enlace de texto tendrá el color que ´ú definiste para toda la página web. Puedes configurar este color en la pestaña Página web (véase el apartado de la pestaña Página web).

Si deseleccionas esta opción, el enlace de texto seleccionado mantendrá el color que le diste en la página. Por lo tanto, puedes asignar colores distintos a los diferentes enlaces, si lo deseas.

Abrir enlace en:

Esta opción no hace nada si una de las opciones "Capa popup" o "Popup foto" está seleccionada. Pero de cara a otros enlaces te permite definir cómo el navegador web debe cargar la página web de destino. Por defecto, está configurado como "Sin especificar", lo que por lo general significa que el navegador abrirá el enlace en la misma ventana del navegador que la ventana o el enlace.

La lista desplegable contiene cuatro opciones producen que el navegador haga cosas especiales. Tiene que seleccionar una de estas opciones o tecleas el nombre de un frame:

NUEVA VENTANA (_BLANK) Abre el enlace en una nueva ventana del navegador.

MISMO FRAME (_SELF) Abre el enlace en este frame (el frame que contiene este objeto).


FRAME SUPERIOR (_PARENT) Abre el enlace en la ventana principal o en el frameset (conjunto de marcos o frames) que contiene este frame.

MISMA VENTANA (_TOP) Abre el enlace dentro de la página principal del navegador, sustituyendo todos los frames existentes.

Si quieres que el enlace se cargue en un frame específico en el navegador, teclea el nombre del frame en este campo.

Área que permite clic

Esta opción te permite especificar en qué área del objeto se debe hacer clic para invocar el enlace. Sin embargo, no es compatible con páginas web HTML (el rectángulo que rodea el objeto siempre se usa); sólo funciona si se exporta a flash.

FORMA DE OBJETO: El usuario debe hacer clic exactamente en el contorno del objeto para invocar el enlace.

RECTÁNGULO RODEANDO OBJETO: El usuario puede hacer clic en cualquier parte del rectángulo que esté rodeando el objeto (caja circundante) para invocar el enlace.


Pestaña "Página web"

La configuración en esta pestaña se aplica a todo el documento o a toda la página actual, por lo que no importa qué objeto o página hayas seleccionado.

TÍTULO, DESCRIPCIÓN & PALABRAS CLAVE: Estos campos son como se describen en la PESTAÑA PÁGINA (en la página 204)más arriba. Opcionalmente puedes configurar estos campos para que se apliquen a cada página de tu sitio, a no ser que se sobrescriban por la configuración para una página de la pestaña Página. Por ejemplo, una página que no


tenga definido su propio título en la pestaña Página obtendrá el título que especifiques aquí.

TRACKER CODE: Esto sirve para el mismo propósito que el campo de tracker code en la pestaña Página. Lee el apartado pestaña Página (en la página 204) para obtener más detalles.

Sin embargo, para este campo rige que si se especifica código en la PESTAÑA PÁGINA

WEB, se incluye en cada página de tu sitio de forma adicional al código especificado para cada página en la pestaña Página. Esto te permite incluir código en cada página y, además, te permite agregar más código a las páginas que lo requieran.

Colores para enlaces de sitios web

Esta sección de la pestaña Página web te permite controlar cómo los enlaces de texto deben aparecer en tu página web.

SUBRAYAR TEXTOS CON ENLACES: El subrayado se suele usar para resaltar en el texto los enlaces que permiten clic, por lo que esta opción está seleccionada por defecto. Deselecciónala si no quieres que tus enlaces de texto aparezcan subrayados.

COLOR MOUSEOFF: Aquí puedes elegir el color que quieras para todos tu enlaces de text. O bien puedes elegir en la lista desplegable (si existe una en tu documento actual) un color original con nombre, o bien puedes hacer clic en el botón Editar para abrir el editor de color y elegir cualquier otro color.

COLOR MOUSEOVER: Los enlaces de texto cambiarán a este color cuando un usuario mueva el cursor del ratón por encima de ellos.

COLOR VISITADO: Enlaces de texto que conduzcan a una página que el usuario ya ha visitado se visualizan en este color en lugar del color MouseOff.


Pestaña de página

Las opciones en esta pestaña se aplican a la página actual, no al objeto o a los objetos seleccionado(s). La página actual se indica con líneas de ángulo negras en la parte exterior de cada esquina de la página. Todos los campos de esta pestaña son opcionales; no es necesario que rellenes estos campos para cada página web de tu sitio.

Si quieres el mismo título, la misma descripción y las mismas palabras clave para todas las páginas web de tu sitio, puedes definirlo una vez en la pestaña Página web en lugar de definirlo aquí para cada página.

PÁGINA DE NOMBRE DE ARCHIVO: Utiliza este campo para fijar el nombre que quieras usar para esta página cuando sea exportada. Por lo tanto, si quieres que la página se exporte como "inicio.html", teclea en este campo "inicio".

Por lo general, a la primera página de un sitio se le asigna el nombre de "index.htm" o "inicio.htm", ya que si un usuario especifica un URL que consiste sólo de un dominio sin el nombre de la página (por ejemplo www.xara.com), los servidores web lo vinculan automáticamente a la página index.htm, si ésta existe.


TÍTULO DE LA PÁGINA: Opcionalmente puedes elegir un título para tu página. Si está definido, los navegadores web lo usan para mostrar el título de la página en el frame de la ventana del navegador o en la pestaña. A modo de ejemplo, en el momento de redacción la página inicial de www.xara.com tiene el título "Graphics Software by Xara" que, como puedes ver, es mostrado por el navegador web si visitas la página.

Nota para usuarios avanzados: El título se introduce en el encabezado de la página utilizando el elemento HTML "<title>".

DESCRIPCIÓN DE PÁGINA: El texto de descripción de página puede mostrarse en los resultados de los buscadores cuando los usuarios encuentran tu página al realizar una búsqueda en Internet. La descripción de página también puede ser mostrada por navegadores y otros servicios web.

Nota para usuarios avanzados: La descripción se inserta en el encabezado de página como metadatos (‘<meta name="descripción" …..).

PALABRAS CLAVE DE LA PÁGINA: Aquí puedes introducir las palabras clave que quieras que sean encontradas por los buscadores para que los usuarios encuentren tu página. Introduce aquellas palabras que los visitantes potenciales probablemente utilicen para buscar si están buscando páginas o sitios como el tuyo.

Para aquellos que estén familiarizados con HTML, las palabras clave se introducen en el encabezado de página como metadatos.

Nota para usuarios avanzados: Las palabras claves se insertan en el encabezado de página como metadatos (‘<meta name="palabras clave" …..).

TRACKER CODE: Puedes utilizar este campo para pegar en tu página cualquier código HTML válido. Para aquellos que están familiarizados con HTML, el código se inserta sin modificar al final de la página, justo antes del tag de cierre "</body>".

Esto suele ser de gran ayuda para insertar un tracker code que recoge las estadísticas sobre las visitas a tu página. A modo de ejemplo, Google Analytics ofrece un snippet (un "trozo") de HTML que puedes pegar en este campo para la página web que desees controlar.

Aquí hay que tener cuidado, ya que insertar un código o script inválido en tu página puede causar serios problemas en toda la página en su conjunto.

Si tienes que insertar exactamente el mismo código en cada página de tu sitio, puedes usar el campo de Tracker code en el diálogo de la pestaña Página web en lugar de introducirlo individualmente en cada página utilizando la pestaña Página.


Pestaña Imagen

Fotos emergentes

Esta sección de la PESTAÑA IMAGEN te permite añadir fotos emergentes y otras características de la galería de fotos a tu página web. Simplemente importa tu foto y utiliza la HERRAMIENTA DE SELECCIÓN para reducir el tamaño correctamente de modo que aparezca como una pequeña miniatura de foto en tu página web. Luego, mientras la foto todavía está seleccionada, selecciona el campo foto emergente en esta pestaña. Escoge el tamaño que quieres dar a la foto emergente en el campo de ancho (valor por defecto: 500 píxeles). Haz una vista previa de tu página y haz clic en la miniatura de tu foto en tu página, ahora verás aparecer la ventana emergente con tu foto.

Al activar la función de foto emergente en el campo de la pestaña IMAGEN, también se selecciona automáticamente la opción correspondiente de la pestaña ENLACE. Esto es porque con un clic sobre la foto verás la foto emergente, de forma que no puedes agregar otro enlace al mismo objeto. Es decir, que cualquier enlace que hayas configurado previamente en el objeto mediante la pestaña Enlace desaparecerá.

Una gran ventaja de estas ventanas emergentes frente a las capas emergentes (tal como se describen anteriormente en la sección de la pestaña ENLACE) es que la foto ampliada solo se carga en el navegador web cuando los visitantes hacen clic en una foto en miniatura. Por lo tanto, este método es más adecuado para presentar un gran número de fotos en una página de galería, ya que en un primer momento sólo se cargan las pequeñas miniaturas, permitiendo así que la página se cargue más rápidamente.


Observa que esta característica funciona con otros objetos además de las fotos, por ejemplo con formas y grupos, pero no se puede utilizar directamente en texto. Puedes introducir un grupo de relleno de texto (Ctrl+G) para evitar esta restricción.

Título de la ventana emergente Utiliza este campo para agregar un título a la foto seleccionada, que se mostrará sobre la foto emergente. Ten en cuenta que debes activar también esta opción de título en el diálogo de opciones de foto emergente (ver a continuación) porque, por defecto, los títulos no se muestran.

Opciones de la foto emergente

Haz clic en el botón OPCIONES para abrir el diálogo OPCIONES DE FOTO EMERGENTE. Aquí puedes escoger entre una variedad de opciones que cambian la forma en que se presentan tus fotos emergentes.

Opciones de la ventana emergente Las siguientes opciones cambian la apariencia de la foto emergente.

OSCURECER PÁGINA MIENTRAS LA VENTANA EMERGENTE ESTÁ ABIERTA: con esta opción seleccionada, toda la página se oscurece cada vez que se muestra una foto emergente. Esto ayuda a enfatizar la foto emergente de forma que se destaque contra el fondo oscuro de la página.

MOSTRAR SOMBRA DETRÁS DE LA VENTANA EMERGENTE: esta opción coloca una sombra detrás de la ventana de la foto emergente para que se destaque del fondo de la página.


MOSTRAR TÍTULO DE LA IMAGEN: si has introducido texto de título (lee más arriba) para cada una de tus fotos, esta opción hace que el título aparezca sobre la foto emergente.

Ten en cuenta que el texto del título es independiente del texto de subtítulo que se muestra debajo de la foto. Lee a continuación para más información sobre los textos de subtítulo.

Opciones de la galería Las siguientes opciones activan las características de galería para tus fotos emergentes.

MOSTRAR LOS CONTROLES DE NAVEGACIÓN DE LA GALERÍA: activa esta opción para que los controles de la galería se vean sobre la foto emergente.

Esto aparece arriba de la foto cuando se coloca el cursor del ratón sobre la foto. Permite al visitante ver las otras fotos emergentes en la página actual sin tener que cerrar la ventana emergente y hacer clic en las vistas en miniatura de las otras fotos. El visitante puede pasar a la foto anterior o siguiente, o iniciar o detener un pase de fotos automático en el que cada foto se muestra durante algunos segundos para luego pasar a la siguiente.

MOSTRAR GUIÓN CINEMATOGRÁFICO AL FINAL DE LA FOTO: con esta opción se verá una cinta cinematográfica con vistas en miniatura debajo de la ventana emergente. Esto permite al visitante ir a cualquiera de las fotos de la ventana emergente con un clic en las vistas en miniatura en la cinta cinematográfica, sin tener que cerrar primero la ventana emergente de la foto.


INICIAR PASE DE FOTOS AUTOMÁTICAMENTE: activa esta opción cuando quieras que se inicie un pase de fotos cuando un usuario hace clic en tus fotos emergentes. También puedes escoger cuántos segundos debe mostrarse cada foto cuando el pase de fotos esté funcionando.

Ten en cuenta que sólo las fotos incluidas en la galería de fotos son aquellas fotos que se encuentran en la página actual que están configuradas como ventanas emergentes. Todas las otras fotos en tu página no aparecerán en la galería, por lo que debes asegurarte de usar la pestaña Enlace del diálogo de propiedades web para activar la opción foto emergente en todas las fotos que quieras que se incluyan en la galería.

Subtítulos de imagen

De forma opcional puede mostrarse un subtítulo debajo de cada foto emergente. Introduce el texto del subtítulo en este campo en la pestaña Imagen.

Observa que esta característica funciona con otros objetos además de las fotos, por ejemplo con formas y grupos, pero no se puede utilizar directamente en texto. Puedes introducir un grupo de relleno de texto (Ctrl+G) para evitar esta restricción.

Para aquellos familiarizados con HTML, este texto se utiliza como texto alternativo en la imagen exportada para el objeto seleccionado actualmente, independientemente de si la imagen tiene o no una ventana emergente. Los navegadores web muestran este texto en la página en lugar de la imagen si ésta no está disponible por alguna razón.


Tipo de imagen web

Debido a la naturaleza de las páginas web HTML, la mayoría de los objetos que ves y puedes seleccionar en la página MAGIX Web Designer 6 deben convertirse en imágenes de mapas de bits durante el proceso de exportación de tu página web. Todo esto sucede de forma automática si realizas una vista previa y la exportación, pero los controles de esta pestaña te conceden cierto control sobre cómo se crean estas imágenes.

Recuerda que cada grupo, forma, encabezado, logotipo, foto, fondo de panel, etc. se exporta por separado como imagen. Viendo cómo se agrupan los objetos en tu diseño, puedes controlar cómo numerosas imágenes son exportadas para componer tu página web. Por ejemplo, si tienes dos formas separadas en tu diseño que no están agrupadas conjuntamente, se exportarán como dos imágenes separadas. Puedes agrupar las dos formas (Ctrl+G), así se exporta una sola imagen.

Este apartado sobre la pestaña Imagen te permite especificar cómo el objeto seleccionado actualmente debe ser exportado como una imagen. Por defecto, MAGIX Web Designer 6 lo decidirá por ti. Esto significa que como regla general las fotos se exportarán como JPEG (suele ser el mejor formato para fotos) y otros objetos se exportarán como PNG (suele ser el mejor formato para gráficos). Las fotos que se rotaron en la página o a las que se les aplicó una sombra semitransparente, se exportan como PNG porque JPEG no es compatible con la transparencia.

Puedes forzar el objeto o los objetos seleccionado(s) para exportar como JPEG o como PNG seleccionando la opción apropiada. Si la opción JPEG está seleccionada, puedes también escoger la calidad JPEG para esta imagen. Una calidad superior implica que el tamaño del archivo JPEG es mayor.

Pestaña Mouse-over


Las opciones de esta pestaña especifican lo que debería ocurrir cuando un visitante coloca el cursor del ratón sobre el objeto seleccionado. Por ejemplo, puedes hacer que cierto texto o una capa completa de contenido emerja cuando un visitante coloque el cursor del ratón sobre una foto de tu página web.

MOSTRAR TEXTO DE POPUP (TÍTULO): aquí puedes especificar el texto del "título de popup" de un objeto. Los navegadores web lo muestran como un consejo de herramienta emergente cuando el usuario mueve el cursor del ratón sobre un objeto. Por ejemplo, si cuentas con una foto en miniatura que dispone de una versión ampliada de la foto al hacer clic (consulta la sección pestaña Imagen para información sobre esto), es posible que quieras insertar el texto de título de popup "Haz clic para ampliar". Entonces, cuando el cursor del ratón pasa sobre la miniatura de la foto, se verá este consejo de herramienta. MOSTRAR CAPA POPUP: del mismo modo que puedes añadir a tu diseño una capa que sólo se muestre cuando un usuario hace clic en un objeto (lee el apartado de la pestaña Enlace), también puedes especificar que esa capa se muestre cuando el cursor del ratón se mueva sobre un objeto. Cuando el cursor del ratón se quita del objeto, vuelve a desaparecer el popup. Simplemente escoge esta opción y selecciona la capa que quieras que se convierta en popup en la lista suministrada.

Por ejemplo, puedes utilizar esta característica para mostrar como popup una copia más grande de una foto cuando el usuario mueva el cursor del ratón sobre la misma. Ten en cuenta que todo el contenido de la capa popup se carga en cuanto el usuario visita tu página. Por lo tanto, este método de mostrar fotos emergentes no se recomienda si tienes una gran cantidad de fotos que quieres mostrar. En este caso, utiliza la función Foto emergente (en la página 35) descrita en el apartado de la pestaña Enlace.


Pestaña Marcador de posición

Selecciona el objeto del marcador de posición y abre esta pestaña del diálogo de PROPIEDADES WEB. Puedes utilizar los controles de esta pestaña para agregar a tu página un archivo flash o de gráfico externo o para insertar en tu página código HTML que hayas obtenido de otro sitio. El objeto seleccionado se convierte en un "marcador de posición". Esto significa que el objeto representa las dimensiones y la posición del contenido que has agregado, pero que al exportar tu página web, el objeto se sustituye con el código o archivo verdadero que has insertado.

Sin embargo, existe una forma más sencilla de añadir archivos o códigos a tu sitio. Simplemente arrastra y suelta los archivos Flash o GIF animados desde el explorador de archivos de Windows hasta tu página. Se generará automáticamente una imagen de marcador de posición y se colocará en tu página. Una copia del archivo se añade a la carpeta de soporte de tu diseño para que se exporte y publique con tu sitio. Al exportar y publicar tu sitio, la imagen del marcador de posición se sustituye por el archivo verdadero que has importado.


De la misma forma, si has copiado código HTML de la página web de widgets de un tercero, puedes pegar el código en MAGIX Web Designer 6 (asegúrate de que te encuentres en la herramienta de selección cuando lo hagas y no en la herramienta de texto porque, de ser así, se insertará como texto). MAGIX Web Designer 6 detecta el HTML y lo utiliza para renderizar una imagen de marcador de posición que aparecerá en tu página. Al exportar/publicar tu sitio, el marcador de posición se sustituye por el código verdadero para que el widget funcione. Consulta el capítulo de Gráficos web y widgets (en la página 268) para más detalles.

Si quieres insertar un código o un archivo de forma manual, primero crea en tu página web un objeto (por lo general un rectángulo, con la HERRAMIENTA DE RECTÁNGULO (en la página 134)) que tenga las mismas dimensiones que el contenido que quieres agregar y posiciónalo donde quieras que aparezca el contenido. Esto es tu "marcador de posición" porque se sustituirá en tu página exportada por el contenido que especifiques en esta pestaña

Reemplazar con Flash

Selecciona esta opción para sustituir el objeto del marcador de lugar con una animación flash. Utiliza el botón Explorar para localizar el archivo Flash (.swf) que quieres usar.

A continuación , el archivo elegido se copiará automáticamente al directorio de compatibilidad para el diseño actual de modo que cuando exportes tu página web, el archivo se incluirá en el directorio _htm_archivos junto con todas las demás imágenes generadas para tu página web. Lee el capítulo Trabajar con documentos para obtener información sobre los directorios de compatibilidad.

Reemplazar con un archivo gráfico

Selecciona esta opción si quieres insertar un gráfico o una imagen en tu página web en lugar del objeto del marcador de lugar (por ejemplo PNG, GIF u otro archivo de imagen compatible con el web.). Utiliza el botón Explorar para seleccionar el archivo.

A continuación , el archivo elegido se copiará automáticamente al directorio de compatibilidad para el diseño actual de modo que cuando exportes tu página web, el archivo se incluirá en el directorio _htm_archivos junto con todas las demás imágenes generadas para tu página web. Lee el capítulo Trabajar con documentos para obtener información sobre los directorios de compatibilidad.

Reemplazar con código HTML

Con esta opción puedes pegar el código HTML que has obtenido de otro sitio. Por ejemplo, hay muchos sitios web que suministran widgets que puedes agregar a tu página web pegando el código HTML. Sigue las instrucciones que ofrece el proveedor.

Tal como se mencionó anteriormente, puedes simplemente pegar el código HTML directamente en la página en vez de insertarlo en este diálogo (siempre que te encuentres en la herramienta de selección). Al hacerlo de esta forma, aparecerá automáticamente una imagen de marcador de posición de aspecto similar al widget verdadero, por lo que se recomienda utilizar este método para insertar código HTML.


En la galería de diseños está disponible una variedad de widgets que son fáciles de insertar en tu página. Haz clic aquí http://www.xara.com/us/products/webdesigner/widgets para obtener más consejos sobre widgets en la página web de Xara.

ADVERTENCIA: Al igual que ocurre con el código de seguimiento, tienes que tener tener cuidado e insertar solamente código que sabes que es seguro y que proviene de una fuente de fiar. El código inválido o roto afectará tu página web publicada porque MAGIX Web Designer 6 simplemente inserta el código tal y como tú lo suministres, sin modificar, sin revisar, en tu página web cuando ésta es exportada.

Si utilizas módulos de Xara (www.xaraonline.com), puedes pegar un snippet (trozo) de módulo en este campo para agregar tu módulo a tu página web.

Si el código HTML que introduces contiene una referencia a archivos externos que se supone deben encontrarse en tu página web, deberás copiar estos archivos externos en el directorio de compatibilidad para tu diseño. Lee el capítulo Trabajar con documentos para obtener información sobre los directorios de compatibilidad. Una vez en la carpeta de soporte, los archivos se copiarán automáticamente a la carpeta _htm_files de tu sitio web al exportarlo. Por lo tanto, también es necesario asegurarte que cualquier referencia a estos archivos en el código HTML se encuentre en la ubicación correcta.

He aquí un ejemplo simple para explicarlo de forma más clara. Supón que yo quiero insertar una pequeña pieza de código HTML que añade una imagen en mi página web. El código HTML que yo agregue necesitará una referencia al archivo de imagen en algún lugar. Primero copio el archivo de imagen, digamos "milogotipo.gif", en el directorio de compatibilidad de mi documento. Si el documento es "mipagina.web", el directorio de compatibilidad será "mipagina_web_archivos". Yo sé que cuando exporte esta página web, la exportaré al nombre "mipagina.htm". Esto significa que todas las imágenes generadas para mi página web y una copia de "milogotipo.gif" que puse en el directorio de compatibilidad, se exportarán al directorio "mipagina_htm_archivos". Por lo tanto, en el código HTML que inserto tengo que incluir una referencia al archivo de imagen en esa ubicación. Entonces insertaría:

<img src="mipagina_htm_archivos/milogotipo.gif" />

Observa que esto hace referencia al archivo de imagen en la ubicación del directorio de la imagen exportada (_htm_archivos) y NO en el directorio de compatibilidad (_web_achivos) directamente, ya que únicamente el directorio de la foto exportada se copia en el servidor web junto con mi página web cuando se publique la página.

Obviamente, si realmente sólo quiero poner una imagen en mi página web, ¡es mucho más fácil importar directamente la imagen a MAGIX Web Designer 6! Pero esto es un ejemplo simple que muestra cómo agregar un código HTML que contiene una referencia a un archivo externo.

Consulta Integración de YouTube, Flash y otros widgets (en la página 61) para más ejemplos.

http://www.xara.com/us/products/webdesigner/widgets


Objetos de marcador de posición

El objeto de marcador posición lugar en realidad está incluido en tu página web y puede mostrarse al usuario en algunas circunstancias. Por ejemplo, si has añadido una animación flash y el usuario que visita tu página no tiene instalado Flash en su navegador web, o si lo tiene deshabilitado, el navegador mostrará en su lugar la imagen del marcador de posición.

Por lo tanto, muchas veces es buena idea hacer que el objeto de marcador de posición no sea simplemente un rectángulo negro o una imagen precisa del widget que aparece en tu página. Podrías usar un grupo como marcador de posición que incluya un mensaje de texto que pida al visitante instalar Flash para que así pueda ver el contenido flash.

VOLVER A GENERAR LA IMAGEN DE MARCADOR DE POSICIÓN AUTOMÁTICAMENTE: si esta opción que se encuentra en la parte inferior de la PESTAÑA MARCADOR DE POSICIÓN se selecciona, la imagen del marcador de posición se genera automáticamente desde el contenido que has agregado, siempre que cambies el contenido o cuando cambies el tamaño del objeto de marcador de posición.

Al pegar código o importar archivos directamente en tu página, tal como se recomienda anteriormente, esta opción se selecciona automáticamente para la imagen de marcador de posición que se genera. Muchas veces es útil desactivarla tras insertar el contenido de esta forma, si te gusta la imagen de vista previa y no quieres que se vuelva a generar si cambias algo del contenido.

Pestaña Publicar

Necesitarás una empresa de alojamiento web para que aloje tu sitio web. Muchas veces, los proveedores de Internet incluyen un "espacio web" como parte de la suscripción normal. También el control Perfil del diálogo Publicar ofrece una o más opciones de alojamiento que puedes aprovechar. Lee a continuación para más detalles. La mayoría de los proveedores también ofrecen la posibilidad de que adquieras tu propio nombre de dominio (por ejemplo www.xara.com) y establecer un enlace a tus páginas web.

Si quieres que MAGIX Web Designer 6 publique tu página web terminada en tu espacio web automáticamente, de modo que se encuentre en Internet, tienes que introducir los detalles de acceso para tu espacio web en este pestaña.


La primera sección de este diálogo te permite seleccionar un perfil configurado previamente. La lista de perfiles contiene dos tipos de perfiles. Aquellos que has creado personalmente y se guardan en el ordenador que estás utilizando (lee a continuación para más información sobre cómo crearlos). Y uno o más perfiles estándar que se instalan junto con el programa y que te ofrecen algunas soluciones de alojamiento web diferentes.

PERFILES ESTÁNDAR: al seleccionar un perfil estándar, debería aparecer de inmediato un banner en la lista de perfiles. Este banner se descarga de la empresa de alojamiento web (por lo que sólo aparecerá si estás online). Haz clic en un botón del banner para obtener más información acerca de la solución de alojamiento web de la página web de la empresa. Si decides registrarte para el alojamiento con uno de los proveedores sugeridos, recibirás un nombre de usuario y una contraseña para conectarte. Ingrésalos en la sección DETALLES FTP de este diálogo.


FTP DETAILS: Enter the FTP details you have for your web space here. You need to enter at least the host address and username. You don’t need to enter the password at this stage if you don’t want to. If it’s missing you will be asked to enter it each time you publish your website.

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

xara.com/products/web_designer

A continuación define una subcarpeta "productos" y el nombre de página "web_designer". Si creas una subcarpeta de este modo, todas las páginas en tu sitio web se publicarán en esta carpeta.

Guardar estos detalles con el documento actual

Los detalles FTP que has introducido están asociados solamente con el documento abierto actualmente. Si cambias a otro documento verás que los campos de los detalles FTP quedan en blanco, salvo que ya hayas introducido detalles para ese documento. Por defecto, los detalles FTP NO se guardan en el documento. Esto significa que cada vez que cargues un documento y quieras publicarlo, deberás volver a introducir los detalles FTP o seleccionar un perfil desde donde copiar los detalles.

Selecciona este campo si quieres que los detalles FTP se guarden junto con el documento. Esto significa que siempre que cargues el documento, los detalles FTP se cargarán también y podrás volver a publicar de inmediato.

Guardar contraseña en el documento

Si escoges guardar los detalles FTP en tu documento, esta opción se activará junto al campo de la contraseña. Esto controla si guardas o no la contraseña FTP en el documento junto con los otros detalles. Si escoges hacerlo, puedes volver a publicar el sitio web sin tener que volver a introducir la contraseña.

Por supuesto, cualquier persona que obtenga una copia de tu archivo de diseño también podrá publicar tu página. Por lo tanto, se recomienda que no se active esta opción en el caso de uso normal porque conlleva el riesgo de que una persona que tenga acceso a tu documento pueda escribir en tu espacio web y hasta sobrescribirlo o eliminarlo.

Guardar en el perfil

Si quieres publicar más que un documento de página web en el mismo espacio web o si no quieres que tu información FTP se guarde en el diseño de documento, es posible que quieras que tus detalles de FTP se guarden en tu ordenador como un perfil. Luego, podrás añadir fácilmente los detalles a cualquier documento al seleccionar el perfil de tu lista de perfil, en vez de tener que volver a ingresar los datos de forma manual cada vez.

Haz clic en el botón GUARDAR EN EL PERFIL para almacenar la información FTP en un perfil. Esto abrirá un pequeño diálogo con una lista de perfiles editables. Puedes introducir el nombre de un nuevo perfil o escoger un perfil existente de la lista para sobrescribir ese


perfil. Al introducir un nuevo nombre, escoge uno que te recuerde para qué utilizas el espacio web. No puedes sobrescribir los perfiles estándar.

Por supuesto puedes guardar múltiples perfiles que solo varíen en el nombre de la subcarpeta. Esto te permite publicar en diferentes carpetas de tu espacio web.

Si no quieres que la contraseña FTP se guarde en tu ordenador, asegúrate de que el campo de la contraseña esté en blanco cuando pulsas GUARDAR EN PERFIL.

Eliminar un perfil

Para eliminar un perfil, selecciónalo en la lista de perfiles en la parte superior del diálogo Publicar y luego haz clic en el botón ELIMINAR junto a él. No puedes eliminar los perfiles estándar.

Carga de un documento con detalles FTP

Cuando cargas un documento que tiene información FTP guardada en él, los detalles FTP se verán en la PESTAÑA PUBLICAR. Si esos detalles coinciden exactamente con uno de los perfiles guardados en tu ordenador, entonces el perfil se muestra tal como se selecciona en la lista de perfiles. De otra forma, se muestra PERSONALIZADO en la lista de perfiles para indicar que la información FTP del documento no coincide con ningún perfil.

Si la información FTP del documento no incluye la contraseña, pero todos los demás detalles coinciden con un perfil, entonces el perfil se mostrará como seleccionado. Si el perfil cuenta con una contraseña guardada, se copiará en los detalles FTP del documento. Esto te ahorra tener que volver a introducir la contraseña cada vez que publiques el documento. Esto significa que parecerá que tu contraseña está guardada en tu documento. Pero esto solo puede suceder si la opción GUARDAR CONTRASEÑA EN EL

DOCUMENTO está seleccionada.

Publicación

Una vez que hayas configurado tus detalles para la publicación, selecciona ARCHIVO > PUBLICAR PÁGINA WEB. Tu página web se publicará.

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

Importante: Si no has definido un nombre de página específico, entonces el nombre que exportes se utilizará en todas las páginas de tu sitio web. Por ejemplo, si abres una plantilla de página web, la exportas como "test" a tu sistema de archivos y ahora la publicas, se publicará como test.htm en tu servidor web y las páginas adicionales serán test_2.htm, test_3.htm etc.

Si no has definido un nombre de archivo de exportación, cuando publiques por primera vez, se te preguntará si quieres introducir el nombre de archivo index.htm como nombre

Trabajar con fotos 219

para la primera página de tu sitio web. index.htm es el nombre usual para la primera página de un sitio web.

Volver a publicar solamente los archivos modificados

Por defecto, MAGIX Web Designer 6 realiza un seguimiento de los archivos que conforman tu página web publicada y cuando quieres volver a publicar tras hacer cambios en tu sitio, intenta publicar solamente los archivos que han cambiado. Esto hace que volver a publicar sea más rápido en la mayoría de los casos.

Sin embargo, MAGIX Web Designer 6 no sabe si has eliminado o modificado archivos en tu espacio web con otra herramienta. Por lo tanto, si por alguna razón tu sitio publicado no coincide con la copia local exportada de tu sitio, deberías hacer que todo el sitio se vuelva a publicar. Para ello, desactiva la opción VOLVER A PUBLICAR SOLAMENTE LOS ARCHIVOS

MODIFICADOS en la parte inferior de la pestaña Publicar. Luego, la próxima vez que publiques, todos los archivos que forman parte de tu página se publicarán, por lo que tu sitio publicado estará actualizado.

Trabajar con fotos

Introducción

Actualmente, las fotos son una parte integral de casi todo trabajo creativo, de sitios web, flyers, folletos, DTP y más.

El Manejo de fotos en Web Designer es diferente al que puedes haber usado con otros programas de diseño gráfico.

En MAGIX Web Designer 6 puedes colorear, cortar, copiar, mezclar, enmascarar, difuminar (decolorar los bordes de) fotos, todo lo que quieras. La naturaleza orientada al objeto, no destructiva, del manejo de fotos significa que, por ejemplo, cuando cambias el tamaño de una foto, no estás alterando realmente la foto original, sino que sólo estás modificando una copia visual. La imagen original con la resolución total se guarda en el archivo .web de modo que posteriormente puedes editar, volver a cambiar el tamaño o aplicar cualquiera de las opciones de edición de la herramienta de fotos sin ninguna pérdida de calidad. Incluso puedes "descortar" fotos recortadas.

El manejo de fotos es increíblemente rápido. Puedes abrir una foto de 50 megapíxeles y efectuar cualquiera de las operaciones de optimización y girar la imagen con su resolución total en tiempo real.

Este capítulo cubre los principios básicos de manipulación de fotos e imágenes de mapas de bits en MAGIX Web Designer 6. El funcionamiento de la Herramienta de fotos está contemplado en el capítulo Herramienta de fotos.

*Puntos de referencia basados en composiciones de foto creadas con múltiples fotos JPG digitales de alta resolución

220 Trabajar con fotos

Objetos de fotos

En Web Designer las fotos (o mapas de bits) son simplemente otro tipo de objeto en la página. Puedes arrastrar y soltar fotos en la página de tu explorador, y luego puedes redimensionarlas, girarlas, copiarlas y moverlas como cualquier otro objeto. Puedes ajustar la transparencia, incluso la transparencia con gradación, difuminar los bordes y cortar y recortar formas extraídas de fotos con gran facilidad. la opción de transparencia te deja mezclar, combinar o crear fotos compuestas.

Donde en otros programas deberías usar capas, en MAGIX Web Designer 6 cada objeto está sobre su propia capa y, también con cada objeto de la página, puede traerlo hacia el frente o hacia atrás de otros objetos.

Importación de fotos

MAGIX Web Designer 6 es compatible con una muy amplia gama de tipos de fotos o mapas de bits, incluyendo JPEG, PNG, TIFF e imágenes RAW de cámaras digitales, así como muchos tipos más. El término "mapa de bits" es el término general que abarca todos los tipos, pero intercambiable con la palabra "foto".

El modo más fácil de abrir una imagen es arrastrando la foto o el archivo de mapa de bits desde tu explorador de Windows hasta la ventana de Web Designer. O bien, puedes seleccionar las opciones de menú ARCHIVO > ABRIR o IMPORTAR .


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

Si arrastras y sueltas sobre una foto existente, esta se reemplazará. Arrastra hasta el fondo para importar como una foto individual.

Sustituir fotos

Si arrastras y sueltas un archivo de mapa de bits sobre una foto existente, se sustituirá la foto, pero mantendrá el mismo contenedor o tamaño de frame. Esto facilita la sustitución de fotos en plantillas. Puede usar la HERRAMIENTA DE RELLENO para ajustar el tamaño, la posición y el ángulo de la foto dentro de su contorno. Esto no es válido para documentos de foto, donde al soltar una foto en la página siempre la importará como un nuevo documento.

Cuando reemplazas una foto o mapa de bits de esta manera, se adaptará de la mejor forma posible al contorno de la imagen existente. Si mantienes presionada la tecla "Shift" al reemplazar una foto, la nueva cabrá en las mismas dimensiones y rotación que la foto anterior. Esto es útil para cuando ajustes manualmente la escala o rotación de un relleno y luego quieres sustituir la imagen por otra que tenga la misma relación de aspecto. Si mantienes presionada "Ctrl" al soltar, la foto será simplemente añadida al documento y no sustituirá ninguna imagen existente.

Si existen múltiples copias de la misma foto en una página, por ejemplo una pequeña vista en miniatura y una versión más grande en una capa popup, cuando haces clic y arrastras para reemplazar, todas las copias de la foto de esa página serán reemplazadas por la foto nueva.

Sustitución de múltiples fotos en simultáneo

La mayoría de las plantillas web incluidas en la GALERÍA DE DISEÑOS te permitirá reemplazar varias imágenes al mismo tiempo, si arrastras y sueltas muchos archivos de imagen desde el Explorador hasta el lienzo. O utiliza la opción ARCHIVO > IMPORTAR y selecciona varias imágenes en el diálogo de archivo (Ctrl+clic añade la selección actual, Shift+clic te permite seleccionar un rango de archivos).

Las fotos entrantes se utilizan para sustituir las imágenes en el documento. De la misma forma que cuando importas fotos individuales, se te preguntará si deseas importar versiones de tamaño reducido, si tus fotos son muy grandes. La sustitución se realiza de izquierda a derecha y desde arriba hacia abajo (el orden de lectura normal). Si no arrastras la cantidad suficiente de fotos para sustituir todas las fotos reemplazables, puedes continuar importando fotos de la misma manera. La sustitución continúa a partir de la siguiente foto sin reemplazar. Así, puedes llenar rápidamente el diseño con tus fotos.

Si importas más fotos de las que pueden acomodarse en la página actual, también se sustituirán las fotos de las siguientes páginas con las fotos entrantes restantes. Si todavía


quedan fotos entrantes, la página actual se duplica todas las veces que sea necesario para acomodar todas tus fotos.

Esto significa que puedes crear rápidamente una página web con una galería de tus fotos. Simplemente escoge una plantilla de galería de la GALERÍA DE DISEÑOS y luego importa todos los archivos de fotos que desees. La página se copia todas las veces que sea necesario para que entren todas tus fotos. Asegúrate de escoger la opción de tamaño reducido si importas muchas fotos.

Utilización de fotos como relleno

También puedes usar cualquier mapa de bits como relleno para cualquier forma de dibujo. Simplemente arrastra el archivo sobre la forma (que puede ser de tu sistema de archivos, o de las Galerías de mapas de bits o de rellenos), y presiona "Shift" antes de soltar. Esto sustituirá el color de relleno existente por un mapa de bits, adaptado al objeto. Puede usar otra vez la HERRAMIENTA DE RELLENO para ajustar el tamaño, la posición y el ángulo.

Tamaño de foto inicial

Cuando importas un JPEG, inicialmente tiene el ancho de 500 píxeles.

Para reducir el tamaño, solamente arrastra desde una de las esquinas usando la herramienta de selección, o introduce un nuevo ancho en el campo de la barra de información de la HERRAMIENTA DE SELECCIÓN.

Si reemplazas una foto mediante arrastrar y soltar, entonces la foto se adaptará exactamente al contenedor, es decir, su tamaño y la resolución dependerá del tamaño del contenedor.


Resolución de foto

Una diferencia fundamental entre MAGIX Web Designer 6 y otras herramientas de foto es que cuando redimensionas una foto esta conserva toda la resolución. Si reduces el tamaño de una imagen, solamente aumenta el dpi o ppi (píxeles por pulgada). En otras palabras, no se pierde ni un solo píxel, simplemente se hacen más pequeños.

Cuando reduces a la mitad la imagen de 96ppi a la izquierda se duplica la resolución, 192ppi.

La barra de estado muestra la resolución de cualquier imagen seleccionada. Es importante conservar la resolución total porque significa que puedes ver todo al detalle cuando amplias con el zoom, y cuando imprimes con la máxima resolución. Esto también quiere decir que puede ampliar todo o parte de la imagen y Web Designer conserva la máxima calidad original.

Cuando guardes tu página web (exportando el código HTML), Web Designer convierte las fotos automáticamente a la resolución correcta requerida para la página web.

Copias de memoria cero

Una de las diferencias más revolucionarias entre Web Designer y otros software es que cuando copias cualquier foto en la página, realmente no realiza una nueva copia completa de la foto original, pero en su lugar muestra simplemente otra 'vista' de la imagen original. El rendimiento en renderización de Web Designer es lo suficientemente rápido como para mostrar, de esta manera, cualquier cantidad de copias de la misma imagen 'al vuelo'. Esto te permite ahorrar gran espacio de memoria y reduce drásticamente los tamaños de archivos.

Esto no quita mérito ni limita lo que puedas hacer con cada copia, y pueden ser trabajadas independientemente como copias completamente separadas. Cada copia no tiene que ser idéntica. Puedes editar cada una como quieras, redimensionándola, girándola, cortándola, coloreándola o aplicándole una amplia gama de efectos de foto y de transparencia. Todo, sin ocupar espacio en la memoria ni aumentar el tamaño de archivo.


Este ejemplo muestra las copias separadas de la misma imagen, cada una manipulada de un modo diferente. Cada una conserva la resolución total del JPEG original, como puedes ver en la imagen de la derecha. La memoria (RAM y el tamaño de archivo) no es superior al tamaño de JPEG original.

Como se trata de la misma imagen mostrada en tamaños diferentes, la resolución, que es el dpi o ppi, varía. En el ejemplo de arriba, el ojo tiene 115dpi, (porque la imagen ha sido ampliada) mientras que la imagen de la izquierda tiene más de 1200dpi.

La galería de mapa de bits

El capítulo Trabajar con documentos (en la página 83) cuenta con información general acerca de las galerías.

La GALERÍA DE MAPA DE BITS muestra todo los mapas de bits o fotos usadas en cualquier documento, con la información de su tamaño de píxeles y el tamaño de archivo.

Puedes abrirlo con clic en su icono en la barra superior, o desde dentro del menú, a través de HERRAMIENTAS > GALERÍAS, o con "F11".


Este ejemplo muestra la GALERÍA DE MAPAS DE BITS para el documento de arriba, y muestra la imagen JPEG original de la joven que es integrada al archivo .web nativo. Como se menciona anteriormente, todas las copias de esta imagen son mostradas directamente desde el máster, y sólo se muestra la imagen sola y no las cuatro variantes que aparecen en la página.

La siguiente información de ayuda se muestra sobre la imagen original:

• Nombre de archivo del JPEG original • El tipo de archivo, en este caso un JPEG, y el tamaño de archivo, 1.006K. (Este es el

tamaño original del archivo, y también cuánto de archivo the.web será ocupado por esta imagen.)

• Las dimensiones de píxeles del original, el tamaño de megapíxeles (en este caso sólo inferior a 2MP)

• La profundidad de color, en este caso "24 bit", a veces se denomina color verdadero (true color). La imagen Xara es una imagen de 4 bit.

• La resolución original de la imagen, en estos casos 96dpi

La GALERÍA DE MAPAS DE BITS siempre contiene un mapa de bits por defecto, con la imagen gris de Xara. Se utiliza como mapa de bits por defecto para rellenos de mapas de bits y en casos donde faltan otros mapas de bits. Es útil tenerlo también como marcador de posición.

Como con todas las galerías, puedes arrastrar los objetos de la galería a la página para crear una nueva copia. O puedes seleccionar una imagen en la galería y hacer clic en uno de los botones superiores. El apartado siguiente muestra detalladamente cómo utilizar los controles de la Galería de mapas de bits, que en su mayoría están pensados para usuarios más avanzados.

Relleno de formas con un mapa de bits

Selecciona la forma en la página, luego selecciona el mapa de bits en la galería y haz clic en el botón de relleno. O bien, arrastra la imagen de la GALERÍA DE MAPAS DE BITS y suéltala en cualquier forma mientras mantienes pulsada "Shift". Puede ajustar el tamaño, el ángulo, etc. en la HERRAMIENTA DE RELLENO.

Ajuste de una transparencia de mapa de bits

Esto es para los usuarios más avanzado. Puedes usar cualquier mapa de bits como una máscara de transparencia sobre cualquier forma rellena o mapa de bits. La luminosidad del mapa de bits afecta la transparencia del objeto seleccionado. El tamaño de transparencia del mapa de bits, la rotación y segmentación pueden ser controlados desde la barra de información de la HERRAMIENTA DE TRANSPARENCIA (en la página 188).

Eliminar imágenes de la galería

Cuando eliminas un mapa de bits de la página, permanece en la GALERÍA DE MAPAS DE

BITS. Cualquier mapa de bits no utilizado será eliminado del archivo cuando sea guardado y vuelto a abrir. Sin embargo puedes eliminar cualquier mapa de bits seleccionándolo y apretando el botón SUPRIMIR. Si el mapa de bits es usado en el documento, será sustituido en el mapa de bits estándar de Xara.


Ajuste del fondo de la página para un mapa de bits

Selecciona el mapa de bits en la galería y haz clic en el botón FONDO. Esto va a copiar la imagen en el fondo. Al exportar la página como HTML, esta imagen se copiará por todo el fondo de la página visible del navegador, salvo que también hayas determinado un fondo diferente para el tablero de dibujo (el área que rodea la página).

Guardar

Seleccionando el mapa de bits y haciendo clic en GUARDAR, guardarás la imagen original. En el caso de JPEG integrada, se guardará el archivo JPEG original. Otros tipos de mapas de bits se guardan mejor como tipos de mapa de bits PNG.

Propiedades del mapa de bits

El botón PROPIEDADES te mostrará la información del mapa de bits seleccionado en la galería. Esta opción también te da la posibilidad de evitar que se suavicen las imágenes cuando se amplían los mapas de bits. Por lo general, todos los mapas de bits se suavizan cuando se amplían, o se agrandan con el zoom en la pantalla. Hay un cuadro de selección en el diálogo de Propiedades para desactivar esta característica para que puedas ver cada píxel cuando amplías con el zoom.

Esto también proporciona la información de las propiedades de animación del mapa de bits. Esto es realmente aplicable sólo a imágenes GIF animadas.

ANIMACIÓN GIF:

• RETARDO (el tiempo en que el frame es dejado en pantalla) • RESTAURAR: La configuración de GIF animado fija lo que ocurre entre cada frame de

un GIF animado. Nada significa que no se efectúa ninguna acción. Numerosos navegadores interpretan que esto significa lo mismo que la opción Conservar como es. Conservar como es visualiza los frames uno encima de otro - esto deja visibles muchos frames en un stack si algunos son transparentes. Algunos navegadores borran la animación antes de reproducir más loops, mientras que otros no. El fondo restaura el área cubierta por el color de fondo del GIF (blanco, por lo general). Restaurar anterior restaura el área cubierta por el frame dejándola como era antes de visualizarse el frame. Esto algunos navegadores lo interpretan como borrar la imagen y mostrar el fondo, mientras que otros navegadores lo interpretan como mostrar el frame encima del frame anterior. Como los navegadores lo interpretan de modo diferente, deberás experimentar hasta conseguir los resultados deseados.

Archivos JPEG integrados

Los archivos JPEG están enormemente comprimidos en relación a su estado original, siendo hasta 10 veces más pequeños que la imagen original. En el ejemplo de arriba, la imagen original no comprimida requiere más de 7 MB de memoria, pero en la GALERÍA DE

MAPAS DE BITS sólo tiene 1 MB. Una reducción muy significativa. Por eso las imágenes JPEG son el tipo de archivo estándar para la fotografía digital y para utilizar en Internet.


Cuando arrastras y sueltas un archivo JPEG (o usas las opciones de menú "Abrir" "o Importar") el JPEG original es almacenado en el documento, y esto es lo que queda guardado en el archivo .xar cuando guardas tu documento.

Es importante entender como se diferencia de otras herramientas de gráficos, tanto en software de dibujos vectoriales como de programas de edición de fotos. Otros productos descomprimirán la imagen y almacenarán la imagen no comprimida "cruda" en la memoria y el archivo nativo cuando lo guardas en disco. Lo que no es más que una copia completa de la imagen original cruda, como se menciona anteriormente. Haz cuatro copias de tu foto y guarda el archivo, y será cuatro veces más grande. En MAGIX Web Designer 6 el archivo no se agranda, no importa cuantas copias hagas.

Al incrustar el archivo JPEG original en vez de guardar la imagen no comprimida, existe un ahorro de tamaño de archivo mayor a 7:1 comparado con otros programas de diseño gráfico. Al haber cuatro copias completas de la imagen significa, en este caso particular, que la memoria usada es más bien 30 veces menor. Por lo tanto, representa un enorme ahorro de tamaño (y de tiempo) en comparación a otras herramientas de gráficos*.

*Es fácil para comprobar. Importa un JPEG a tu editor de gráficos favorito, haz cuatro copias, y haz algunos pequeños cambios en ellas, coloreándolas, rotándolas, o desenfocándolas. Luego, guarda el archivo nativo y compáralo con el tamaño del JPEG original, y el equivalente archivo .Xar. Un archivo .Xar nativo tendrá apróximadamente el tamaño del JPEG original, no importa cuántas copias de la imagen sean hechas.

Extracción del JPEG original

Haz clic derecho sobre cualquier imagen en la GALERÍA DE MAPAS DE BITS y escoge la opción de menú GUARDAR para guardar el JPEG original en tu sistema de archivos.

Sin pérdidas vs. Con pérdidas (lossless vs. lossy)

Como todo lo que Web Designer hace con tus fotos está basado en la imagen original, que permanece intacta en tu archivo, todo lo que hace es sin pérdidas. No hay ninguna re-compresión de imágenes cuando guardas el archivo .xar nativo.

Desde luego puedes guardar o exportar tu imagen como un archivo JPEG comprimido, en cualquier tamaño requerido, y en este caso la calidad de imagen y los detalles se reducirán en una manera "destructiva". Destructivo significa que los datos originales o los detalles no pueden ser recuperados desde un JPEG guardado con una resolución inferior. Xara es un editor "no destructivo" porque los datos de la foto original nunca se pierden, ni se reducen, ni se comprimen en el archivo .xar nativo.


Mezcla y combinación de fotos

Haciendo copias de fotos una encima de la otra, y aplicando diferentes efectos a las copias, combinadas con los avanzados controles de transparencia de Web Designer, puedes crear fácilmente composiciones de foto mezcladas. Por ejemplo, para desenfocar selectivamente partes de una foto necesitas sólo unos segundos.

Colocando la copia desenfocada con el 'agujero' creado por el efecto de transparencia sobre el original marcado, el resultado de la mezcla muestra el área de la parte marcada.

Para crear copias de cualquier objeto necesitas presionar sólo una tecla, o hacer un clic (arrastrar con el botón derecho del ratón). Para desenfocar alcanza con hacer 'un arrastre' en una barra deslizante de la Herramienta de fotos, para aplicar una transparencia graduada necesitas otro arrastre-cilc en la Herramienta de transparencia, y, para colocar fotos una encima de la otra necesitas un segundo. Por lo tanto, en MAGIX Web Designer 6, necesitas unos clics, arrastres y un par de segundos para todo el proceso.

Desde luego no todo se limita a desenfocar, ya que puedes ajustar los niveles de color, brillo y contraste, o aplicar cualquiera de la amplia gama de Efectos en vivo para crear una gama infinita de resultados interesantes o creativos.


Calidad de visualización de fotos

MAGIX Web Designer 6 puede mostrar fotos en uno de cinco niveles de calidad. Las dos primeras configuraciones, suavizan los píxeles de pantalla para evitar píxeles visibles o secciones no fluidas en los extremos (antialiasing). Cambia el nivel de calidad con la entrada CALIDAD en el menú VENTANA.

MUY ALTA

CALIDAD (POR

DEFECTO)

Muestra imágenes mediante sampleo bicúbico. Esto permite ver las imágenes en la mejor calidad, en particular para imágenes grandes de alta resolución que son altamente reducidas o ampliadas con zoom.

ALTA CALIDAD Antialiasing activado, pero las imágenes se renderizan lento y con una calidad baja.

COLOR TOTAL Sin antialiasing, por lo que se ven los píxeles individuales. Esto puede ser útil cuando amplíes con el zoom y necesites ver claramente los pixeles de la imagen por separado. El inconveniente es que las imágenes generalmente se ven pobres cuando reduces o amplías causando un pixelado claramente visible y bordes "escalonados" dentados, sobre todo si haces girar la imagen.

CONTORNOS CON

PASOS DE

TRANSICIÓN

Es particularmente útil para ver los contornos de los diferentes pasos de una transición. MAGIX Web Designer 6 no es compatible con transiciones pero los archivos .xar importados pueden contenerlas.

CONTORNO

Sólo se ven los contornos de los objetos. Esto es útil para buscar y seleccionar objetos que son difíciles de ver debido a otros objetos que se encuentran delante o detrás de ellos.

Hay un control adicional que te permite frenar todo antialiasing o suavizado de imagen en imágenes que son reducidas o ampliadas con zoom. En otras palabras, en vez de una imagen suavizada, verás todos los pixeles cuando amplíes con zoom. Abre la GALERÍA DE

MAPAS DE BITS y haz clic derecho sobre la imagen y seleccione "propiedades". En el diálogo desactiva la selección de "Suavizar al aumentar tamaño". Ahora, no importa la calidad que utilices para la imagen (y todas las copias), siempre se visualizarán los píxeles no suavizados cuando amplíes o reduzcas con zoom.

Atención: Si usas el control de Desenfoque/Enfoque de la Herramienta de fotos, entonces las imágenes tienen que ser mostradas en la calidad máxima. Así que si piensas que la calidad de visualización ha dejado de funcionar, es casi seguro que has desenfocado o enfocado la imagen con la Herramienta de fotos.

Guardar y exportar fotos

Al seleccionar la opción GUARDAR siempre se guardará un archivo .web nativo. Para guardar una foto como JPEG, PNG u otro tipo de archivo de imagen, es necesario usar la opción EXPORTAR o el shortcut "Ctrl + Shift + E".

Puedes seleccionar entre numerosos tipos de archivo, como JPEG, PNG, GIF, TIFF, PDF, PSD, Flash (.swf), BMP, así como otros tipos menos conocidos.


Hay dos íconos disponibles en la barra superior que son shortcuts para guardar la selección como JPG o PNG. Estos se encuentran en la barra desplegable cuando colocas el cursor del ratón sobre el ícono de exportación HTML.

Recomendamos guardar las fotos como JPEG (a veces llamado JPG), ya que ofrece la mejor relación tamaño/calidad.

Cuando exportas JPEG o PNG, aparece la opción CONFIGURACIÓN en el diálogo Guardar. Al seleccionar esta opción se obtienen muchas opciones de exportación avanzadas y se pueden comparar ajustes alternativos e incluso tipos de archivos alternativos como por ejemplo PNG.

Cuando exportas un JPEG, aparece una ventana con una vista previa de exportación donde puedes ajustar muchas opciones de exportación y comparar ajustes alternativos o tipos de archivo alternativos como PNG.

La ventana de vista previa de exportación te permite ajustar el tamaño, la resolución, la calidad del JPEG y, además, seleccionar entre tres tipos de archivos de exportación alternativos. Los valores por defecto deberían ser los correctos para todos las tareas comunes y puedes pulsar simplemente el botón de exportación para guardar tu foto.

Aspectos para tener en cuenta al exportar:

• Primero selecciona el objeto o los objetos que quieres exportar • El tamaño por defecto de la imagen exportada será del tamaño que veas en la pantalla

con el zoom al 100%.

La ventana de Vista previa de exportación (en la página 324) está descrita más detalladamente aquí.

Consejo: puedes controlar la calidad de JPEG en el diálogo configuración de exportación de la pestaña de Opciones. El valor estándar y recomendado es 75%.

El sistema JPEG está diseñado de manera tal que un ajuste de 75 es el valor óptimo. Te recomendamos que no guardes archivos JPEG con calidad del 100%, ya que los resultados son visualmente idénticos a la calidad del 75%, sólo que el tamaño de archivo y uso de memoria aumenta drásticamente sin beneficio alguno.

Se puede bajar la calidad por debajo de 75 para que se vea más rápido la página en la web. La ventana de vista previa muestra la calidad de cualquier valor que selecciones.


Consejo: si crees que vas a seguir editando la imagen exportada, como cambiar el tamaño de la imagen, te recomendamos que guardes el archivo .web también. Esto preservará la imagen original sin pérdida de calidad.

Ejemplo: para cambiar el tamaño de una foto y guardarla en JPEG.

este proceso es muy rápido y simple:

• Suelta tu foto en Xara Xtreme (en una página en blanco o en la barra de título) • Ve a la herramienta de selección, arrastra el control deslizante de una esquina para

cambiar el tamaño de la imagen, o introduce el ancho o la altura requerida en los campos correspondientes de la barra de información. El tamaño de la imagen será correcto cuando esté al 100%.

• Haz clic en el botón "Exportar selección como JPG" en la barra superior. • Introduce un nombre de archivo, haz clic en el botón CONFIGURACIÓN si necesitas

controlar la compresión o simplemente haz clic en GUARDAR.

Para guardar la imagen en formato PNG, repite los mismos pasos de arriba pero selecciona la opción PNG en el menú desplegable del tipo de archivo.

Atributos de la edición de fotos

Todas las ediciones realizadas con la HERRAMIENTA DE FOTO (en la página 242), como cambiar el brillo, el contraste, el color, los valores de enfoque o desenfoque, serán guardadas sobre la foto como atributos de Web Designer.

Tal como puedes cambiar el color de una forma o de una línea sin cambiar la forma subyacente, los atributos de la herramienta de foto cambian la apariencia de la foto pero sin afectar la imagen original (a esto se le llama edición no destructiva). Otra forma de explicar esto es que MAGIX Web Designer 6 sólo guarda una lista de las ediciones aplicadas a tu foto; puedes cambiar, quitar o añadir nuevas ediciones. Siempre podrás recuperar la foto original sin retocar, incluso luego de haber cambiado el brillo, haberle cambiado el tamaño, o incluso luego de haberla cortado o recortado.

Los atributos se pueden copiar y pegar entre distintos objetos. Esto no sólo se aplica solamente a los atributos tradicionales como el color o el ancho de la línea, también funciona con todos los atributos de la HERRAMIENTA DE FOTO. Esto significa que puedes copiar todas las optimizaciones que le hayas hecho a la foto a otro documento, utilizando la función "copiar/pegar atributos".

Esto también vale para todos los otros atributos de la foto, como color y ancho de línea, coloreado de foto (contoning), sombras, etc.; todos estos atributos se pueden copiar de una foto a otra usando la misma técnica.


Editar el contorno de las fotos

Puedes utilizar la herramienta de EDICIÓN DE FORMA para ajustar directamente el contorno exterior de una foto. De la misma manera, puedes aplicar contornos para cualquier forma, sombra, etc.

Utilizando la HERRAMIENTA DE EDICIÓN DE FORMA puedes achicar o agrandar la forma de sus esquinas. Este ejemplo también tiene un contorno negro y una sombra suave. Para restaurar la imagen a la forma rectangular original, selecciona "deshacer corte" en el modo de corte en la barra de información de la HERRAMIENTA DE FOTOS. Cuando se editan las fotos de esta forma, se tratan como si fueran una forma vectorial normal con relleno de mapa de bits. Por eso puedes usar las herramientas de edición para crear una línea o cambiar la forma, e incluso puedes usar la HERRAMIENTA DE RELLENO para ajustar el tamaño, el ángulo y la posición del relleno de la foto adentro de la forma.

Recortar fotos

La forma más fácil de recortar una foto es arrastrarla mientras te encuentras en la HERRAMIENTA DE

OPTIMIZACIÓN o también puedes arrastrar uno de los 8 controles deslizantes alrededor de la foto para ajustar el borde de cualquier foto seleccionada.

Para un manejo más avanzado del recorte, selecciona el BOTÓN CLIP en la herramienta de fotos de la barra de información, ya que te permitirá definir la relación de aspecto, así como usar el recorte numérico preciso.

Asimismo encontrarás un botón Deshacer corte que borra cualquier rectángulo de corte y restaura la imagen original.

Una función importante es que la herramienta de recorte es realmente dinámica, en otras palabras, el recorte no es destructivo y el borde del recorte puede ajustarse luego para


mostrar partes ocultas de la foto. Si realmente quieres cortar, es decir, realizar un recorte destructivo que elimine las partes invisibles de una imagen, utiliza la función Optimizar foto.

Cortar objetos de las fotos

Utilizando las herramientas de dibujo es fácil dibujar formas y cortarlas del fondo. Puedes usar cualquiera de las herramientas de dibujo para hacer esto. Quizás la forma más fácil es que utilices la HERRAMIENTA DE EDICIÓN DE FORMA. Dibuja una línea alrededor del borde de la forma que quieras extraer. Realiza un zoom en la foto y luego:

• En la herramienta de edición de forma utiliza la técnica de "conectar los puntos" haciendo clics secuenciales alrededor de la forma, dejando menos espacio entre los clics para las áreas más detalladas y haz menos clics para las líneas rectas o las áreas con curvas suaves.

• Cuando hayas completado toda la vuelta alrededor del objeto, cierra la línea para que sea uan forma sólida, uniendo el último segmento al primero. Así habrás creado una forma con relleno negro.

• Ahora podrás cortar esta forma de la foto si seleccionas la nueva forma y la foto (shift y clic sobre la foto en la herramienta de selección). Luego ve a EDICIÓN > ARREGLAR

FORMA > INTERSECCIÓN DE FORMAS. • Para suavizar un poco los bordes, arrastra la barra de difuminación en la barra superior

para que tenga uno o dos píxeles.

Puedes seguir editando la forma, utilizando las herramientas de edición de línea ya que la foto permanece dentro de la forma. En este caso la forma actúa como una máscara de corte (clipping mask).

En este ejemplo la vaca tiene una sombra de pared, que se le aplicó con la herramienta de sombra.


Fotos de pantalla (screenshots)

Puedes capturar una imagen de pantalla.

• Presiona el botón "Imprimir pantalla" (print screen) de tu teclado y aparecerá una imagen de toda la pantalla en el portapapeles. También puedes seleccionar "Alt + Print screen" y se generará una imagen de la ventana actual.

• En MAGIX Web Designer 6 selecciona "Ctrl + V" para pegar, y selecciona "mapa de bits" para que se pegue la imagen a tu página.

Ahora puedes recortar, añadir texto, cambiar el tamaño y guardar los resultados. Es mejor si guardas la imagen como archivo PNG. Todas las fotos de pantalla de este archivo de Ayuda y de este manual fueron creadas de esta forma.

Colorear fotos

Selecciona una foto, haz clic en la línea de colores para aplicar un color a la foto. Para convertir una foto de color a blanco y negro, haz clic en el color blanco y selecciona

"ESTABLECER COLOR CLARO DE TONO CONTINUO". Esto se llama color continuo porque es un tono continuo de negro a blanco.

Para crear una imagen con un tono continuo de color amarillo claro, haz clic en el color amarillo claro de la línea de colores.

O, haz clic derecho en la línea de colores y se abrirá un menú contextual para que apliques el color seleccionado, sea este el color oscuro o el claro.


Si haces clic en LÍNEA DE COLOR, puedes seleccionar cualquier color, sea éste el color claro o el oscuro del tono continuo. También puedes utilizar la herramienta EDITOR DE COLOR (Ctrl+E) y elegir cualquier color que quieras. El menú desplegable en la parte superior del editor de color controla si estás editando en el color claro u oscuro.

Puedes restaurar el color original de la foto haciendo clic en el pequeño cuadrado blanco cuadriculado del extremo izquierdo de la línea de colores, o haz clic derecho sobre la foto y selecciona la opción "restaurar color".

Cambiar el tamaño, rotar y reposicionar la foto dentro de su propio marco

MAGIX Web Designer 6 trata las fotos como si fueran un rectángulo con relleno de mapa de bits. Es decir, la forma de tu foto será tratada por el programa como si fuera un contorno alrededor de la imagen que se encuentra adentro, y el contorno se puede editar completamente. Entonces, cuando recortes o edites el contorno de la forma, no estarás afectando al relleno.

Las fotos y los mapas de bits de la página siempre están "contenidos" dentro del contorno de una forma. No sólo puedes cambiarle la forma al contorno, sino que también puedes ajustarle el tamaño, el ángulo y la posición de la foto dentro de su marco (frame) utilizando la HERRAMIENTA DE RELLENO. Selecciona la foto, ve a la HERRAMIENTA DE RELLENO y podrás ver las flechas de relleno que se encuentran en un ángulo recto (o puedes ir a la herramienta de relleno, y hacer clic sobre la foto para seleccionarla).

Por ejemplo. para agrandar y rotar la imagen hacia la izquierda dentro de su propio marco, selecciona la herramienta de relleno y arrastra una de las puntas de las flechas.


• Para cambiar el tamaño, arrastra el cursor sobre una de las puntas de las flechas, alejándote del centro. Puedes mantener presionada la tecla "Ctrl" para mantener el ángulo.

• Para rotar la imagen, arrastra una de las puntas de las flechas sobre el centro. • Para reposicionar la imagen, arrastra en cualquier parte de la imagen.

En la barra de información de la herramienta de relleno puedes seleccionar la opción de "mosaico repetido" y la imagen se llenará con un mapa de bits segmentado. Si arrastras los controles deslizantes de relleno, podrás cambiar las dimensiones de la segmentación dentro de la imagen o realizar una rotación. Si realizas la misma acción pero con una imagen gigante con muchos píxeles, podrás ver la velocidad con la que trabaja MAGIX Web Designer 6.

Si cuentas con un grupo de fotos en vez de un objeto común de foto no puedes utilizar la herramienta de relleno tal como se describe arriba para ampliar la imagen y girarla en su marco. Si quieres convertir un grupo de foto en un objeto de foto común para poder ajustarlo con la herramienta de relleno, puedes usar Herramienta > Optimizar foto para hacerlo. Pero ten en cuenta que esto es destructivo y que luego no podrás modificar ninguna de las ediciones que aplicaste a la foto.

Enderezar horizonte

Es muy fácil enderezar el horizonte torcido de una imagen. Sólo tienes que utilizar la herramienta de relleno siguiendo los mismos pasos de arriba.

• Selecciona la herramienta de relleno y haz clic sobre una foto. Esto mostrará los controles deslizantes de relleno, que básicamente son flechas que muestran la extensión del relleno en el interior de la forma.

• Arrastra uno de los extremos de las flechas para cambiar el tamaño de la imagen o para rotarla.


La siguiente imagen tiene un paisaje con un horizonte torcido, que ha sido creada con la función de "creación de panorámicas".

Utilizando la herramienta de relleno, arrastra una de las flechas para rotar o cambiar el tamaño de la imagen. Puedes reposicionar la foto arrastrando el control deslizante de las flechas en el centro, o mantiene presionada la tecla "Shift" y mueve el cursor sobre la imagen.

Ver una foto ampliada en su tamaño completo

El botón ZOOM A 1:1 en la barra de información de la herramienta de foto ajusta el zoom de forma que la imagen seleccionada se muestre en su tamaño completo, en donde cada píxel de la imagen corresponde a un píxel de pantalla. Esto es útil si quieres editar una imagen que se ha reducido en la página, pero quieres verla en su tamaño completo mientras trabajas en ella.

Darle el tamaño completo a una foto

El botón AMPLIAR FOTO A 100% en la barra de información de la herramienta de foto hace que la foto seleccionada actualmente se amplíe al tamaño completo de la página. Así, una foto que se ha reducido a 500 píxeles de ancho, pero cuyo original tenía 1000 píxeles de ancho, se ampliará nuevamente a su valor original. Si el zoom del documento es 100%, significa que cada píxel de la imagen corresponderá a un píxel en la pantalla.


Optimizar fotos y mapas de bits

Las cámaras digitales de hoy en día sacan fotos con cada vez más resolución y tamaño de archivos en JPEG, por eso si tienes un documento con muchas imágenes, el tamaño del archivo puede transformarse rápidamente en un archivo muy pesado. Por ejemplo, un documento multipágina con 20 imágenes en JPEG en alta resolución (cada imagen tiene 5 MB) producirá un archivo .xar con más de 100 MB*.

Además, muchas veces estas fotos tienen innecesariamente una alta resolución. Reducir una foto de una cámara digital de 8 megapíxeles a 5 cm (2 pulgadas) de ancho en la página, resultará en una imagen de 1500 dpi. Aunque una imagen con una resolución muy alta dará mucha más flexibilidad a la hora de imprimirla (y también te dará la posibilidad de hacer zoom para acercarte o la posibilidad de agrandar pequeñas partes de la foto), esta resolución es mucho más alta de la que se necesita incluso para la mejor calidad de impresión comercial, y más aún para los gráficos de la web o para la producción en HTML.

Si cortas una parte pequeña de la foto, habrá una gran parte de la imagen que estará "escondida" fuera del área visible. La función de "corte en vivo" (live crop) es muy práctica para cuando estés editando la imagen ya que puedes deshacer el corte realizado a la imagen, cambiarle el tamaño o la posición, y toda la imagen se mantendrá los más enfocada posible. Pero para los documentos finalizados conviene quitar las partes invisibles.

La imagen recortada de la mariposa aún tiene el resto de la foto adjuntada a ella. Si vas a la herramienta de relleno podrás ver esto fácilmente si cambias el tamaño del relleno dentro del contorno. Las partes de la imagen que estén fuera de la mariposa probablemente sean superfluas en tu documento final.


Hay una opción del menú que es útil, HERRAMIENTAS > OPTIMIZAR FOTO que realiza tres funciones importantes:

• Quita las partes invisibles de las fotos • Reduce la resolución de las fotos • Convierte los documentos PNG o en mapas de bits en documentos JPEG integrados al

documento para optimizar el tamaño del archivo.

Si seleccionas esta opción del menú para cualquier mapa de bits, se abrirá el diálogo OPTIMIZAR FOTO.

Por defecto, la configuración es tal que la foto estará optimizada en un JPEG de 96 dpi (resolución normal de pantalla) con el tamaño que aparece en tu página. En general, esto es lo que quieres de las fotos de tu sitio web.

Puedes cambiar la resolución utilizada en este diálogo, si escoges el tamaño físico que deseas para la imagen optimizada (ancho/alto en píxeles) o si introduces un dpi diferente (p.ej. 150 dpi si quieres calidad de impresión).

Si escoges la opción de dpi, el valor que introduzcas se recuerda y se convierte en el valor por defecto para la sesión actual.

También puedes escoger optimizar como PNG (produce imágenes más grandes pero mayor calidad para gráficos e imágenes de texto) o cambiar la calidad usada para la optimización JPEG (mayor calidad significa tamaño más grande).

Si tu foto se corta, sólo la parte visible de la imagen se preserva en la imagen optimizada.

Para obtener buenos resultados de impresión necesitas una resolución de 150 dpi. Si introduces una resolución de 300 dpi, obtendrás la calidad más alta posible en la


impresión comercial (la mayoría de la personas no pueden ver la diferencia entre 150 dpi y 300 dpi, pero con 300 dpi necesitas cuatro veces más de memoria o espacio adicional de archivo).

Nota: la calidad JPEG óptima es 75%. NO recomendamos guardar archivos JPEG con una calidad del 100%, virtualmente no pueden distinguirse de los JPEG guardados con 75% pero requieren más memoria y espacio de archivo.

Importante: la función "optimizar foto" es una operación destructiva. Cuando guardes el documento las partes de la imagen que se hayan quitado se perderán, y la resolución se cambiará para siempre (obviamente que puedes deshacer los cambios mientras tengas el archivo abierto durante la edición).

Puedes optimizar múltiples fotos al mismo tiempo si quieres que todas tengan el mismo dpi. Selecciona las fotos que quieras optimizar y luego elige la opción OPTIMIZAR como se describió arriba. Si tus fotos tienen diferentes dimensiones, la opción para optimizar según el tamaño de píxeles estará desactivada y deberás escoger el dpi requerido.

O puedes usar la función HERRAMIENTAS > OPTIMIZAR TODOS LOS JPEG para editar todas las fotos JPEG de tu documento en una sola operación. En este caso, el diálogo de optimización aparecerá para que puedas escoger el dpi que deseas utilizar para todas las optimizaciones.

Ten en cuenta que después de optimizar, el original sin optimizar y ahora foto sin referencia permanece en la galería de mapas de bits. Esto significa que todavía se encuentra en la memoria y que el espacio de almacenamiento requerido en tu diseño no se habrá reducido. Simplemente guarda tu diseño y vuélvelo a cargar después de optimizar, para eliminar las imágenes originales más grandes.

Documentos fotográficos

A veces es mejor trabajar con una foto sola, en vez de con un "objeto" en una página. Web Designer le llama a esta foto "foto documento" o "modo foto", y se lo puede editar de forma similar como se hace con los editores tradicionales de foto. Puedes crear un documento fotográfico de varias maneras:

• Arrastra una foto desde tu explorador hacia la barra de título o la barra de herramientas de la ventana de Web Designer.

• Selecciona "Archivo > Abrir" y selecciona una foto. • Crea un documento fotográfico en blanco seleccionando "ARCHIVO > NUEVO > FOTO

VACÍA".

Los documentos fotográficos de Web Designer se diferencian de los documentos tradicionales en lo siguiente:

• No hay una página en blanco visible. Las dimensiones de página se ajustan a las dimensiones de la foto, ampliándose automáticamente si añades cualquier otro objeto.


• Los documentos fotográficos tienen una cuadrícula de 1 píxel por defecto. La función para ajustar la cuadrícula también viene activada. Esto hace más fácil y preciso tu trabajo de corte y recorte de áreas.

• El tablero o pasteboard (el área alrededor de la foto) tiene un color más oscuro. Esto facilita la distinción rápida entre los documentos fotográficos y los documentos de dibujo.

• El zoom del documento está ajustado de modo tal que la foto cubra toda la página, y la herramienta de fotos se abrirá automáticamente.

• Si sueltas documentos fotográficos adicionales sobre la foto principal, estarás agregando una nueva foto al documento y no reemplazando la foto principal que se encuentra en el marco. Y la vista se alejará (zoom out) permitiéndote ver la imagen entera.

• Las imágenes no se reducen a un tamaño de 500 píxeles al importarlas, tal como se hace como en documentos web normales, sino que se han importado a una escala de 1:1 de modo que, si fijas el zoom a 100%, verás el tamaño total de la imagen.

• Las opciones de suavizado de píxeles se han cambiado. Por defecto, se aplica el modo de visualización en alta calidad. Esta es la mejor forma de ver imágenes reducidas y las imágenes a las que se les haya aplicado un "zoom out" para alejar la imagen. Cuando uno se acerca a la imagen haciendo "zoom in", el suavizado de píxeles estará desactivado.

En lo que respecta a todas las otras funciones, los documentos fotográficos funcionan como los otros documentos normales de MAGIX Web Designer 6. Puedes usar cualquiera de las herramientas de dibujo y de texto como lo haces habitualmente. Si quieres crear un documento fotográfico con un tamaño específico, puedes cambiar el lienzo o el tamaño de la página seleccionando "HERRAMIENTAS > OPCIONES y la pestaña "PÁGINA" para introducir las dimensiones.

En documentos fotográficos, se permitirán dos controles extra. Los botones ANTERIOR y SIGUIENTE cambiarán a la imagen anterior o siguiente en la carpeta desde donde se abrió la imagen. Esto cerrará la imagen actual, por lo que se te pedirá que guardes el archivo.

Edición de archivos de fotos

Puedes utilizar MAGIX Web Designer 6 para editar fácilmente tus fotos JPEG y guardar el archivo modificado. A diferencia de la mayoría de los editores de fotos, puedes realizar repetidas ediciones sin pérdida de calidad, a pesar de que el formato JPEG es un formato con pérdida (consulta Sin pérdida frente a con pérdida anteriormente en este capítulo). Esto es porque MAGIX Web Designer 6 puede guardar tus ediciones sin pérdida, junto con la foto original. Funciona de la siguiente forma.

Primero abre el JPEG con ARCHIVO > ABRIR, mediante arrastrar y soltar o con un clic derecho en el Explorador de archivos de Windows y eligiendo MAGIX Web Designer 6 en la lista "Abrir con". La foto se abrirá como un documento de foto.


Edita la foto con las herramientas de foto tal como se describe anteriormente.

Si luego escoges ARCHIVO > GUARDAR (Ctrl+S), el archivo JPEG que has abierto se sobrescribirá con la imagen modificada. Sin embargo, MAGIX Web Designer 6 también guarda tu foto en su formato .web nativo por defecto. Este archivo se coloca en una carpeta principal junto con tu archivo JPEG. Tiene el mismo nombre que tu archivo de foto, pero con la extensión .web. El archivo .web incluye tu foto original sin las modificaciones aplicadas y, por supuesto, detalles de tus ediciones.

Si posteriormente cargas el archivo JPEG modificado para continuar editándolo, MAGIX Web Designer 6 buscará en la carpeta principal para ver si hay un archivo .web disponible para esta foto. De ser así, se abrirá este archivo .web en vez de tu archivo JPEG y podrás continuar editando desde donde has dejado. Cuando vuelvas a guardar, el archivo JPEG se sobrescribirá nuevamente y el archivo .web se actualizará y guardará en la carpeta principal.

Por supuesto, si no quieres sobrescribir tu archivo JPEG con los cambios, puedes usar la opción ARCHIVO > GUARDAR COMO para guardar la foto modificada en otro lugar o utilizar algunas de las opciones para exportar tu foto en diversos formatos.

Puedes conservar la foto original del archivo .web si la abres, abres la GALERÍA DE MAPAS

DE BITS, haces clic derecho sobre la foto y escoges la opción GUARDAR.

En la pestaña Edición de foto del diálogo HERRAMIENTAS > OPCIONES puedes escoger cambiar el comportamiento de guardado descrito anteriormente. Puedes escoger que no se guarde automáticamente un archivo .web en la subcarpeta principal, o puedes seleccionar que el archivo de la foto original se guarde ahí en su lugar.

Ten en cuenta que si desactivas la conservación de la foto original, perderás esta foto original cuando guardes.

La herramienta de fotos 243

La herramienta de fotos

Introducción

Con la herramienta de fotos podrás recortar fotos o ajustar sus niveles de brillo y nitidez de forma muy directa y rápida, incluso con las imágenes con muy alta resolución. Esta herramienta provee:

• Auto-optimización con un clic de tus fotos; esto es particularmente bueno para imágenes subexpuestas.

• Ajuste manual de brillo, contraste, saturación de color, temperatura del color de la foto y desenfoque o nitidez de las fotos.

• Corte de imágenes. Se trata de 'corte en vivo', lo que significa que podrás cortar y deshacer el corte todas las veces que quieras.

• Una función de "comparación" con un solo clic para comparar rápidamente los cambios respecto al original.

• Función sencilla para copiar/pegar fotos que aumenta las ediciones entre imágenes diferentes.

Todas estas operaciones son interactivas con actualización en vivo. Cuando ajustas los valores, la imagen se actualiza al instante. Son también no destructivas, lo cual significa que tu imagen original no se cambia y siempre puedes hacer o deshacer cualquier ajuste.

También está disponible una herramienta para ojos rojos.

Ventajas de la herramienta de fotos

Esta herramienta tiene tres ventajas principales:

1. Es no destructiva. 2. Es muy, muy rápida, incluso para las imágenes gigantes. 3. La edición fotográfica no requiere memoria.

Los beneficios explicados en detalle:

No destructivo significa que todas las ediciones no afectan la imagen original. Puedes ajustar o quitar ediciones pero la imagen original no se verá afectada. En cambio, la mayoría de los otros editores de fotos sí realizan cambios permanentes a los píxeles de la foto durante el proceso de edición. Además puedes ajustar las configuraciones del Web Designer todas las veces que quieras ya que no estarás alterando los datos reales y actuales de la foto original.

Incluso la herramienta de recorte (crop) es no destructiva. Puedes restaurar las áreas que hayas cortado (clip) o recortado (crop) y ajustar o agrandar el área cortada cuando quieras, incluso después de que hayas guardado el archivo.

La velocidad es una característica muy importante. Una buena forma de demostrar esto es que rotes una foto en alta resolución. Con otras aplicaciones, en general tienes que

244 La herramienta de fotos

introducir el ángulo de rotación y luego esperar a que sea procesado. En MAGIX Web Designer 6 puedes arrastrar y rotar una imagen en resolución total en tiempo real (o introduce cualquier valor de rotación), y realiza un muestreo bi-cúbico de alta calidad (bi-cubi sampling) para asegurar los mejores resultados a nivel calidad.

La ventaja de memoria cero se refiere al hecho de que la mayoría de los editores de foto hacen una copia del mapa de bits en la memoria para poder ofrecer la función de "deshacer". En general se hace una copia cada vez que ajustas o editas algo en el documento. Si estás trabajando con fotos digitales grandes y en alta resolución, necesitarás mucho espacio de memoria para el trabajo de edición. Por ejemplo, una foto digital de 8 MB necesitará 32 MB de memoria, y si realizas 10 ediciones necesitarás 320 MB de memoria. Con nuestro programa puedes realizar todas las ediciones que quieras y realizar todas las copias que quieras de tu foto en el documento pero no estarás ocupando espacio adicional en el archivo, ni tampoco necesitarás RAM adicional.

Finalmente, las imágenes en JPEG se integran (embedded) al archivo nativo .xar y no se expanden a imágenes en crudo como lo hacen las otras aplicaciones gráficas. Esto significa que un archivo nativo es 10 veces más pequeño. Y si combinas esta característica con el hecho de que las copias no ocupan espacio en la memoria, las herramientas de optimización en tiempo real descritas más arriba, es muy posible que los archivos finales tengan un tamaño 30 veces más pequeño o menos que los archivos finales creados con otras aplicaciones gráficas. Esto significa que estos archivos se pueden manejar de forma mucho más rápida cuando quieras guardarlos, procesarlos y/o transferirlos.

Utilización de la herramienta de fotos

Para acceder a las HERRAMIENTAS DE FOTO, mueve el cursor del ratón sobre el ícono de la cámara en la barra de herramientas principal en la parte izquierda de la ventana. Aparecerá una barra desplegable con íconos para cada una de las herramientas de foto.

Si estás en la herramienta de selección, haz doble clic en una foto para cambiar a la HERRAMIENTA DE FOTO.

Los primeros seis botones de la barra de información a la izquierda son comunes a todas las herramientas y suministran acceso a las funciones GIRAR 90°, IMAGEN

ANTERIOR/SIGUIENTE, AJUSTAR ZOOM y AMPLIAR FOTO A 100%. Estas opciones se describen más adelante.


Controles para rotar 90°

Los dos íconos de rotación giran la foto o las fotos seleccionadas a 90 grados en sentido de las agujas del reloj o en sentido contrario.

Anterior y Siguiente

Cuando "abres" una foto utilizando MAGIX Web Designer 6, la foto se carga en un nuevo documento de foto porque Web Designer presupone que quieres editar o ver la foto misma, más que utilizarla como parte de un dibujo o de otro documento. Cuando abres una foto puedes utilizar los botones "Anterior" y "Siguiente" de la barra de información de la herramienta de foto para cerrar el documento de foto actual y abrir la foto siguiente (o previa) en el mismo archivo que la foto actual. Esto te permite navegar a través de las fotos en un archivo sin tener que abrir y cerrar cada una individualmente. Si has hecho cambios en la foto que no has guardado, se te preguntará si quieres guardar los cambios cuando pulsas Anterior o Siguiente.

Consulta Trabajar con documentos para más información en Documentos fotográficos.

Zoom 1:1

Selecciona una foto y haz clic en el botón zoom 1:1.

El factor del zoom para el documento está establecido de forma que la foto seleccionada se muestre 1:1 (un píxel de la foto es igual a un píxel de la pantalla). Utiliza esta opción si quieres trabajar en una foto a tamaño completo en un documento en donde has reducido el tamaño de la foto.

Ampliar foto a 100%

La función AMPLIAR FOTO A 100% hace que la foto seleccionada actualmente se amplíe al tamaño completo de la página.

Así, una foto que se ha reducido a 500 píxeles de ancho, pero cuyo original tenía 1000 píxeles de ancho, se ampliará nuevamente a su valor original. Si el zoom del documento es 100%, significa que cada píxel de la imagen corresponderá a un píxel en la pantalla.Si el zoom del documento es 100%, significa que cada píxel de la imagen corresponderá a un píxel en la pantalla.


Herramienta de optimización

Haz clic en el ícono de la cámara para ingresar a la HERRAMIENTA DE

OPTIMIZACIÓN.

Se visualiza la barra de información de la herramienta de optimización.

Los primeros seis botones de la izquierda (no se ilustran arriba) son comunes a todas las herramientas y están escritas anteriormente

Auto-optimización

Brillo

Contraste

Saturación de color

Temperatura del color

Desenfoque/Enfoque

Comparación con el original

En esta herramienta puedes ajustar el brillo, el contraste, la saturación, la temperatura, el desenfoque y el enfoque. Puedes introducir directamente valores a los campos de texto o usar la barra deslizante emergente para ajustar los valores de forma interactiva.

Pop-ups deslizantes

Los pop-up deslizantes pueden ser utilizados de una o dos maneras:

1. Haz clic y suelta la flecha pop-up. El control deslizante se quedará en pantalla y podrás ajustar los valores todas las veces que quieras, sólo tienes que arrastrar el control deslizante. Otra alternativa es que mantengas presionado el botón del ratón sobre el control y puedes usar la rueda del ratón para realizar pequeños ajustes hacia abajo o hacia arriba. El control deslizante desaparecerá cuando hagas clic en otro lugar del documento.

2. O haz clic y mantiene presionado el botón del ratón y arrastra el cursor sobre la barra deslizante para ajustar el valor. Cuando sueltes el ratón el pop-up desaparecerá. Esta forma de trabajar es más rápida porque sólo tiene que hacer clic y soltar para cambiar los valores.


Auto-optimización

Si haces clic en el botón "OPTIMIZAR" se realizará un análisis general del brillo y el contraste de la imagen y la imagen se optimizará automáticamente para obtener una mejor imagen. Esto es muy efectivo para las imágenes oscuras subexpuestas. Luego de haber aplicado la auto-optimización a una foto podrás ajustar los valores que han sido asignados con la optimización, usando los controles que se encuentran a la derecha del botón "optimizar". Si haces clic sobre el botón "COMPARAR" se restaurará la imagen original, y si haces clic otra vez sobre el mismo botón volverás a los valores de optimización anteriores.

Brillo/Contraste/!Temperatura del color/Saturación

Brillo Contraste

Saturación Temperatura del

color

La imagen se actualiza al instante mientras ajustas los valores. La saturación cambia la intensidad del color. Si le colocas el valor mínimo -100, la imagen será en blanco y negro. Cambiar la temperatura del color hace que una imagen sea más "cálida" o "fría".

Desenfoque / Enfoque

Este control desenfoca las imágenes si introduces valores por debajo del cero (negativos) y si los valores van por arriba del cero (positivos) la imagen se enfocará. Se recomienda que no uses valores muy altos cuando enfocas las imágenes. Y aplica la opción de "enfoque" sólo a imágenes que han sido reducidas mucho.

Comparar y restaurar el original

El botón COMPARAR puede ser utilizado para restablecer todos los valores de las herramienta OPTIMIZAR que vienen por defecto, y así vuelve la foto a su estado original. Pulsa el botón comparar por una segunda vez y recuperarás tus valores previos. Por lo tanto, puedes utilizar el botón "Comparar" para cambiar rápidamente de tu foto editada a la foto original para ver los efectos de los cambios que has hecho.

Debido a que todos los cambios de optimización o de niveles son "no destructivos", si pulsas "Comparar" simplemente estarás eliminando los atributos de optimización, y de esta forma volverás a la imagen original. El botón "Comparar" puede ser utilizado en cualquier momento después de haber modificado la imagen.


Recortar o cortar imágenes

El modo más fácil de cortar una foto es arrastrar el cursor sobre la foto o a lo largo de la misma habiendo seleccionado la HERRAMIENTA DE OPTIMIZACIÓN . El corte se efectúa al instante de soltar el ratón. La foto cortada resultante tiene controles deslizantes de clip alrededor de la misma donde puedes ajustar posteriormente los bordes del recorte.

Esta es una operación no destructiva, lo que significa que puedes ajustar el área de corte después de que la hayas recortado, e incluso puedes deshacer un recorte y restaurar toda la imagen. Una forma de comprender el proceso es que simplemente ajusta el contorno de la imagen, pero que toda la imagen permanece dentro del rectángulo. Por ello se llama recorte y no corte, aunque tiene el mismo objetivo.

Herramienta de corte

Como alternativa, puedes entrar en la HERRAMIENTA DE CORTE si seleccionas el icono de corte de la barra de información para fotos. Esto suministra una gama de opciones de recorte adicionales. Puedes introducir un valor exacto de píxeles y escoger entre varias relaciones de aspecto de recorte.

Para un corte interactivo y algunas opciones más en relación con las relaciones de aspecto, entra en el MODO DE CORTE con el botón HERRAMIENTA DE CORTE.

La barra de información se verá así:

Mientras arrastras el cursor sobre la foto, el rectángulo de corte se verá resaltado.

• Puedes ajustar el área de corte si arrastras los controles deslizantes laterales o los de las esquinas.

• Dentro del área de corte puedes mover la región cortada de lugar si la arrastras con el cursor.


• Selecciona el botón CORTAR o haz doble clic dentro del área de corte para realizar un corte.

Podrás darte cuenta si una foto ha sido cortada o no si miras la barra de estado que dirá "foto cortada".

Borrar

Presiona el botón "BORRAR", o haz clic fuera del área de corte marcada para vaciar el rectángulo de corte actual.

Regla de los tercios

Existe una norma fotográfica que ayuda a componer fotografías y que se denomina la "Regla de los tercios". En pocas palabras significa que debes colocar los objetos importantes de tus fotos en tercios del ancho de la imagen. Por ejemplo, en general es mejor colocar el horizonte en el tercio inferior de la imagen que justo en el centro. Cuando arrastras una región de clip a través de tus líneas de fotos, se muestran las líneas en los tercios a lo ancho y a lo largo de la imagen para ayudarte a posicionar los objetos para seguir esta norma de composición.

Consejo: busca "Regla de los Tercios" en Google para obtener más información.

Deshacer corte

Pulsa el botón DESHACER CORTE sobre cualquier foto cortada seleccionada para restaurar la foto original. Esto restaura el rectángulo de corte, que puedes ajustar o borrar si haces clic fuera de él.

El botón DESHACER CORTE en la HERRAMIENTA DE CORTE cambiará el contorno de cualquier foto cortada, y también las formas creadas arbitrariamente que contengan un relleno de mapa de bits, a un contorno de rectángulo de la foto completa o a un mapa de


bits utilizado como relleno. Puede ser que tengas que seleccionar el botón "Borrar" para borrar el rectángulo de recorte (o haz clic fuera del rectángulo).

Ajustando la región cortada

Debido a que el botón "Deshacer corte" restaura el rectángulo de corte (mostrando el área de afuera más oscura), puedes realizar finos ajustes a una foto cortada). Sólo selecciona la foto, pulsa el botón "Deshacer corte" y ajusta los lados del rectángulo de corte como requieras. Haz doble clic dentro de la foto para cortarla otra vez.

Ancho / Alto

Luego de dibujar un rectángulo de corte puedes introducir valores directamente dentro de los campos de ancho y alto en la barra de información fijar valores exactos a las dimensiones del rectángulo de corte.

Bloquear aspecto

Selecciona el recuadro "BLOQUEAR ASPECTO" para mantener la relación de aspecto del rectángulo de corte mientras lo arrastras. Los botones de radio a la derecha del check-box determinan la relación de aspecto utilizada. Selecciona "ACTUAL" para mantener la relación de aspecto de la foto antes de cortarla. Ten en cuenta que el rectángulo de corte cambia automáticamente entre la forma orientación de paisaje y retrato a medida que arrastras el cursor hacia una esquina del rectángulo. Entonces si lo arrastras lateralmente, tiende a crearse un corte con orientación paisaje. Si lo arrastras hacia abajo, entonces se creará una región cortada con orientación retrato.

Las relaciones de aspecto más comunes para recortes predeterminados disponibles son 4:3 (mayoría de cámaras digitales para consumidores y televisores y monitores de estilo antiguo), 3:2 (filmadoras tradicionales y cámaras digitales SLR de alta calidad) y 16:9 (relación de aspecto para televisores con pantalla ancha).

Puedes anular la opción "bloquear aspecto" si pulsas "Ctrl" mientras arrastras el ratón. De modo que si estás arrastrando un rectángulo de corte (o ajustando uno) sin la relación de aspecto bloqueada, mientras estás pulsando "Ctrl" entonces se mantendrá el aspecto de la última relación de aspecto seleccionada. De la misma forma, si tienes la opción "bloquear aspecto" activada y presionas "Ctrl", se desbloqueará temporalmente el aspecto bloqueado.

Cortar en documentos fotográficos

En el modo foto hay una cuadrícula de 1 píxel que se aplica a la foto (cuando tiene 96 dpi, la resolución por defecto) y el rectángulo de corte se ajustará a la cuadrícula. Esto hace muy fácil realizar un corte con una exactitud de píxel por píxel. Para realizar ajustes muy precisos o del tamaño de 1 píxel se recomienda operar en modo foto y acercarse con el zoom para poder ver los píxeles más claramente.

Ver Documentos fotográficos (en la página 240) para más información.


Notas para la herramienta de foto

1. Puedes seleccionar diferentes fotos mientras usas las HERRAMIENTAS DE FOTO con sólo hacer clic sobre ellas. También puedes seleccionar fotos que se encuentran en un grupo.

2. Si haces clic y arrastras mientras te encuentras en la HERRAMIENTA DE OPTIMIZACIÓN, se comenzará un recorte en la foto sobre la que has hecho clic. O, si comienzas a arrastrar el fondo, el recorte se aplicará a la primera foto que toques durante este arrastre.

3. El botón DESHACER CORTE en la HERRAMIENTA DE CORTE cambiará el contorno de cualquier foto cortada, y también las formas creadas arbitrariamente que contengan un relleno de mapa de bits, a un contorno de rectángulo de la foto completa o a un mapa de bits utilizado como relleno. Puede ser que tengas que seleccionar el botón "Borrar" para borrar el rectángulo de recorte (o haz clic fuera del rectángulo).

4. Todas las operaciones para las fotos pueden deshacerse. A diferencia de las fotos tradicionales o de los editores de píxeles, aquí la foto original no se altera. Esto significa que puedes realizar cuantos cambios quieras, tan seguido como quieras y guardar y abrir archivos .xar y .web todas las veces que quieras sin que la imagen se vea afectada (todas las operaciones de edición son no destructivas y sin pérdidas) y sin que el tamaño del archivo se modifique.

5. Todas las opciones de la "Herramienta de foto", incluyendo el control de niveles, operan sobre los objetos rellenados con mapas de bits, y también sobre las fotos individuales.

6. Si abres una foto en MAGIX Web Designer 6 (con ARCHIVO->ABRIR), se abrirá como un documento de foto. Después de editarla, puedes sobrescribir la foto, si escoges la opción ARCHIVO->GUARDAR (Ctrl+S). También se guarda un archivo .web o .xar en una carpeta principal junto con tu foto modificada, conservando tu foto original y las ediciones. Consulta el capítulo Trabajar con fotos (en la página 219) para más información.

La herramienta de ojos rojos

La herramienta de OJOS ROJOS te permite eliminar rápidamente los efectos de ojo rojo de los rostros de las fotos.


Haz clic en el símbolo anterior para ingresar en el modo de ojos rojos. Luego:

• Amplía la vista de los ojos rojos, con la HERRAMIENTA DE ZOOM (EN LA PÁGINA 70) o simplemente utiliza Ctrl+rueda del ratón.

• Haz clic y arrastra desde el centro del ojo rojo hacia afuera, para crear un parche de ojo circular. El color rojo se eliminará del área dentro de este círculo.

• Repite los pasos anteriores para cada ojo rojo de tu foto.

Puedes seleccionar cualquier parche de ojo rojo que has aplicado a una foto con un clic sobre él mientras te encuentras en la herramienta de ojo rojo. Después, puedes pulsar la tecla eliminar para quitar el parche.

También puedes ir a la herramienta QuickShape y editar el parche del ojo rojo seleccionado de la misma forma en que editas las elipses normales en tus documentos.

Por lo tanto, de ser necesario puedes dar forma elíptica a los parches de ojos rojos si esto lo coloca mejor en el área de ojo rojo. Lee la ayuda de la Herramienta QuickShape para información sobre su utilización para editar elipses. Sin embargo, para la mayoría de las fotos los parches circulares por defecto son suficientes para eliminar los efectos de ojos rojos.

Al borde de la elipse de ojo rojo se le aplica una difuminación de 3 píxeles, para que no se produzca un corte duro en el área de donde se elimina el ojo rojo. Puedes ajustar fácilmente este valor de difuminación si seleccionas la elipse de ojo rojo (como se ha mencionado anteriormente) y ajustas el valor de difuminación con el control de difuminación principal (del lado derecho de la barra superior), de la misma forma que editas el valor de difuminación de las formas usuales.

Después de aplicar la herramienta de ojo rojo, los parches de ojo rojo están agrupados dentro de un GRUPO DE FOTO. Esto tiene como objetivo que, al mover la foto por el documento, o al transformarla, los parches de ojo rojo se muevan junto con la foto. Ten en cuenta que esto significa que si quieres seleccionar una elipse de ojo rojo mientras no te encuentras en la herramienta de ojo rojo, necesitarás pulsar Ctrl mientras haces clic sobre


la elipse (lo que se llama una operación "seleccionar dentro"). Lee el capítulo sobre Trabajar con fotos para información acerca de los Grupos de foto.

Haz clic sobre el botón LIMPIAR TODO en la barra de información de la herramienta de ojos rojos para eliminar todas las elipses de ojo rojo de la foto seleccionada actualmente.

Creación de panorámicas

Si se instala una actualización de Panorama Studio separada, MAGIX Web Designer 6 puede lanzarla para incluir una herramienta que puede fusionar fotografías automáticamente para convertir hasta 6 fotografías en una única panorámica de alta resolución.

Haz clic en el enlace Más información del diálogo para informarte de cómo obtener la actualización.

Tres ejemplos de fotos de un paisaje. Cada una se superpone a la otra.

Utilizando la actualización de Panorama Studio puedes obtener una imagen panorámica final sin costuras de transición.

254 Barras de navegación

Barras de navegación

La mayoría de los sitios web tienen una barra de navegación horizontal o vertical, desde la que puede accederse a todas las páginas importantes.

MAGIX Web Designer 6 incluye funciones especiales para las barras de navegación, que facilitan la inserción, edición y eliminación de botones. Los botones de una barra de navegación pueden ajustar el ancho para coincidir automáticamente con sus etiquetas y se reposicionan automáticamente cuando realizas cambios. Hasta puedes agregar menús y submenús desplegables a tus barras y hacer que se puedan agregar o eliminar botones automáticamente al agregar o eliminar páginas.

Los usuarios avanzados pueden crear sus propias barras a partir de diseños de botones propios y modificar los diseños de botones existentes en una barra de navegación para aplicar su nuevo diseño en toda la barra.

Utilización de plantillas de barras de navegación

Puedes crear barras de navegación a partir de cualquier diseño de botón, pero la mayoría de los usuarios simplemente usan las numerosas plantillas de las barras de navegación disponibles en la GALERÍA DE DISEÑOS. Si quieres crear tus propias barras, lee la sección correspondiente más adelante en este capítulo.

Todos los diseños de barras de navegación de la galería están asociados con un tema en particular y se han diseñado cuidadosamente para que coincidan con el diseño de página del mismo tema. Por lo tanto, la mayoría de las páginas web puede crearse si se agrega de forma manual una barra de navegación que ya está creada en las plantillas de páginas de cada tema. Sin embargo, cada tema también suministra sus barras de navegación como elementos independientes, para que puedas agregarlos a tu página web si los arrastras de la galería y los sueltas en tu página.

Para cambiar los colores de una plantilla de barra de navegación debes hacer lo mismo que para cambiar el color de los otros elementos del tema: aplica un nuevo esquema de color de la Galería de diseños o edita los colores con nombre en la línea de color. Consulta el capítulo Primeros pasos para más información sobre este tema.

Barras de navegación 255

Diálogo Propiedades de la barra de navegación

La mejor forma de editar las etiquetas, enlaces y otros atributos de una barra de navegación y de agregar o eliminar botones, es utilizar el diálogo de propiedades de la barra de navegación. Haz doble clic sobre una barra para abrir el diálogo o un clic derecho sobre la barra y escoge "Editar barra de navegación" del menú contextual.

La mitad superior del diálogo te permite establecer diversas propiedades de la barra de navegación. La parte inferior te permite agregar y eliminar botones y menús y editar las etiquetas y enlaces de cada botón y entrada del menú.

Este es un diálogo modal, lo que significa que no puedes interactuar con el lienzo mientras este diálogo está abierto en la pantalla. Sin embargo, todos los cambios que realices se verán reflejados de inmediato en tu barra de navegación en el tablero, de forma que podrás ver el resultado en instantes. Los cambios que realices en cada sesión del diálogo se confirman cuando haces clic en ACEPTAR o se eliminan si haces clic en CANCELAR.

Orientación

Escoge la orientación horizontal o vertical que desees para tu barra de navegación. Para las barras de navegación verticales generalmente querrás que los botones tengan el mismo ancho (el ancho del botón más ancho), para obtener una barra rectangular. Consulta la opción AJUSTAR TODOS LOS BOTONES A LA ETIQUETA MÁS ANCHA a continuación para controlar esto.


Justificado

Escoge el comportamiento que deseas para tu barra cuando cambie su longitud al editar etiquetas o añadir/quitar botones. Una barra horizontal JUSTIFICADA A LA IZQUIERDA crecerá hacia la derecha a medida que agregas más botones o extiendes la longitud de las etiquetas de los botones. El extremo izquierdo de la barra permanecerá en el mismo lugar en la página. De forma similar, una barra JUSTIFICADA A LA DERECHA mantendrá su extremo derecho y crecerá hacia la izquierda. Una barra JUSTIFICADA EN EL CENTRO crece tanto para la derecha como para la izquierda de forma equitativa. Selecciona la opción central si, por ejemplo, quieres que la barra de navegación horizontal se centre en la parte superior de tu página.

Para barras verticales, las opciones de justificación cambian a Arriba, Centro y Abajo. En el caso de las barras verticales, la configuración determina si la barra crece hacia arriba (Abajo), hacia abajo (Arriba) o en ambos sentidos (centro) al agregar botones.

Ajustar el ancho de los botones a las etiquetas

Activa esta opción si quieres que los botones se extiendan, reduzcan o crezcan para ajustarse al texto de la etiqueta. Si esta opción está desactivada, tus botones conservarán el mismo tamaño de forma que una etiqueta que sea demasiado extensa para el botón sobrepasará los extremos del botón.

Mismo ancho para todos los botones

Esta opción está disponible sólo si la opción "Ajustar el ancho de los botones a las etiquetas" está activada.

Selecciona esta opción para hacer que todos los botones tengan el mismo ancho que el botón más ancho de la barra. Para las barras de navegación verticales, esto es casi siempre deseable para obtener una barra rectangular. Para las barras horizontales, muchas veces la barra tiene un mejor aspecto si todos los botones tienen el mismo tamaño, pero requiere más espacio, por lo que es posible que no puedas incluir tantos botones en la barra si esta opción está activada.

Espaciado de botón

Aquí puedes escoger el espacio entre cada botón en la barra de navegación horizontal si no quieres que cada botón se encuentre justo arriba de su vecino. Simplemente introduce la cantidad de píxeles de espacio que te gustaría y observa el resultado de inmediato. Es posible que quieras que el valor sea negativo para que los botones se superpongan un poco. Esto es útil si el diseño de tus botones es tal que se ve una línea de unión no deseada entre los botones cuando el espaciado es 0.

Barra de navegación del sitio

Esta es una opción muy importante en el diálogo de BARRA DE NAVEGACIÓN que activa los enlaces automáticos, es decir, que los botones y los enlaces se agregarán solos a medida que agregas páginas. Además, todos los cambios que hagas a la barra se reflejarán en todas las páginas del sitio ni bien cierres el diálogo de barra de navegación. Sin embargo, esta opción restringe la flexibilidad de la barra de cierta forma. Por ejemplo, no puedes


editar la barra de navegación directamente en el lienzo para cambiar las etiquetas de los botones, sino que debes utilizar el diálogo de barra de navegación.

Generalmente, activas esta opción si quieres que tu barra de navegación aparezca en todas las páginas de tu sitio web. Sin embargo, puedes eliminar manualmente la barra de algunas páginas si así lo deseas.

No puedes editar en el lienzo

A diferencia de las barras de navegación normales, las barras de navegación del sitio no pueden editarse en el lienzo, sino que todas las ediciones deben realizarse en el diálogo de barras de navegación. Al hacer clic en ACEPTAR en el diálogo de la barra de navegación para confirmar los cambios, la barra de navegación del sitio se actualizará en todas las páginas de tu sitio.

Desplazamiento y tranformación de una barra de navegación del sitio

Si mueves una barra de navegación del sitio sobre la página, la barra también se mueve en todas las páginas en las que aparece. De la misma forma, si cambias el tamaño de la barra con la HERRAMIENTA DE SELECCIÓN, la transformación se aplica a todas las copias de la barra en otras páginas. No puedes realizar ninguna otra transformación de una barra de navegación con la HERRAMIENTA DE SELECCIÓN (rotación, extensión, cambio de tamaño en una sola dimensión).

Enlace automático de páginas

Cada vez que agregues una nueva página a tu sitio, un enlace a esa página se agregará a tu barra de navegación del sitio y la nueva página obtendrá una copia de la barra, si todavía no la tiene. Si tu barra cuenta con un botón sin usar, entonces ese botón se enlazará con la nueva página. Si todos los botones ya contienen un enlace, se agregará un nuevo botón al final de la barra y se lo enlazará con la nueva página. En ambos casos, la etiqueta del botón se modifica para que coincida con el nombre de la nueva página, si tiene un nombre o a "Nueva página" si no lo tiene. Generalmente querrás editar de inmediato la nueva etiqueta en el diálogo de la barra de navegación.

Si eliminas una página de tu sitio web, el botón de la barra de navegación del sitio que contiene el enlace con esa página se eliminará automáticamente en todas las páginas de tu sitio.

Activación y desactivación de las barras de navegación del sitio

Al activar y desactivar la opción de navegación del sitio en el diálogo de barra de navegación, el cambio se refleja en todas las copias de esa barra.

Eliminación de una barra de navegación del sitio de una página

Si quieres que la barra de navegación del sitio no aparezca en una página en particular de tu sitio, simplemente haz clic en ella para seleccionarla en esa página y pulsa Eliminar. Se te preguntará si quieres eliminar la barra de esa página sola o de todas.

Sin embargo, tras eliminar la barra de una o más páginas, si luego desactivas la opción de barra de navegación del sitio (tal vez para editar el diseño de botones que no puede


realizarse con esta opción activada), y luego vuelves a activarla, la barra se añadirá automáticamente a todas las páginas del sitio que no la contengan.

Barras de navegación del sitio y plantillas

Todas las plantillas de páginas únicas en la GALERÍA DE DISEÑOS cuentan con barras de navegación configuradas para ser barras de navegación del sitio al cargarlas desde la galería para iniciar un nuevo documento de página web. Esto significa que puedes crear rápidamente un pequeño sitio web con todas las páginas enlazadas a la barra sin tener que agregar botones ni enlaces de página de forma manual. De la misma forma, todas las plantillas de páginas web tienen barras de navegación del sitio activadas. Si no quieres este comportamiento, desactiva la opción de barra de navegación en el DIÁLOGO DE

BARRA DE NAVEGACIÓN.

Las barras de navegación independientes presentadas con cada tema en la galería no tienen la opción de barras de navegación del sitio activada. Esto es porque es probable que un usuario que agregue manualmente una barra no quiera que la barra apareza en todas las páginas. De todas formas, esta opción puede activarse fácilmente en el diálogo de barra de navegación de ser necesario.

Otros aspectos interesantes

Si eliminas un botón que refiere a una de tus páginas o si cambias el enlace para que refiera a otro lugar, no se realizará acción alguna para restaurar un enlace de botón a la página. Se asume que has decidido que no quieres utilizar un enlace directo a esa página en tu barra de navegación del sitio. Los nuevos botones y enlaces de página solamente se crean cuando se agrega una página.

Botones y menús

Edita las etiquetas de botones, enlaces y otros atributos de botones con la tabla y los controles con estructura de árbol en la mitad inferior del DIÁLOGO DE BARRA DE

NAVEGACIÓN. Cada fila de la tabla corresponde a un botón de la barra o a una entrada en un menú de uno de los botones.

Agregado y edición de botones

Para agregar un botón, haz doble clic sobre la primera columna, en el lugar donde dice "Doble clic para agregar botón". Se agregará una nueva fila debajo de la fila correspondiente al último botón. O haz clic en el botón AÑADIR en la parte inferior del


diálogo para agregar un botón detrás del botón seleccionado. Puedes comenzar a editar de inmediato la etiqueta para el nuevo botón. Para completar la edición de la etiqueta, pulsa Intro o haz clic en algún lugar fuera de la etiqueta.

Puedes editar cualquier etiqueta de botón si haces clic en la fila apropiada para seleccionarlo y luego haces clic en la primera columna para iniciar la edición de la etiqueta.

Para fijar el enlace de un botón, haz doble clic en el campo de la URL o, si la fila ya está seleccionada, simplemente haz clic en ella. Aparecerá el DIÁLOGO ENLACE DE PROPIEDADES

WEB. Este debería parecerte familiar, puesto que es el mismo diálogo Enlace (en la página 197) que utilizas para agregar otros enlaces a tu página y están disponibles las mismas opciones. Algunas opciones están desactivadas porque no son aplicables a las barras de navegación ni a los enlaces de menú, como la opción de foto emergente que sólo funciona cuando se aplica a una foto.

También puedes configurar el texto de consejo de herramienta para cada botón en la tercera columna. Edita el texto de la misma forma en que lo haces con el texto de la etiqueta. En el sitio web exportado, este texto aparecerá como un pequeño consejo de herramienta emergente cuando se coloque el cursor del ratón sobre el botón o entrada del menú.

Agregar menús y submenús

En la primera columna (etiqueta) verás un símbolo más a la izquierda de cada etiqueta. Este es un control de la estructura de árbol y con un clic en el símbolo más junto a una etiqueta de botón, la vista se expande y podrás agregar un menú a ese botón

Haz clic en el texto DOBLE CLIC PARA AGREGAR UN ELEMENTO DEL MENÚ debajo del botón para comenzar a añadir un menú. O haz clic en el botón AÑADIR en la parte inferior del diálogo para agregar un elemento de menú detrás del elemento seleccionado. Para cada elemento de menú que agregues, aparecerá una nueva fila en la tabla. Configuras la etiqueta, enlace y consejo de herramienta para cada elemento del menú de la misma forma en que lo haces para los botones. También puedes agregar submenús a cualquier menú, si primero expandes la estructura de árbol de la entrada del menú.

Separadores de menú

Puedes agregar un separador a tu menú con un clic en el botón AÑADIR SEPARADOR en la parte inferior del diálogo. El separador se agrega después del elemento de menú seleccionado en este momento. Los separadores te permitirán agrupar visualmente los elementos relacionados de tu menú.


Estilos de menú

Haz clic en el botón ESTILO DE MENÚ… para abrir el DIÁLOGO ESTILO DE MENÚ. Esto te permite cambiar cómo aparecen los menús y cómo se comportan en tu barra de navegación.

Fuente Escoge una fuente para utilizar para el texto de tus menús. Sólo se enumerarán las fuentes seguras para la web, que son las fuentes que todos los visitantes de tu sitio deberían tener. También existe la opción de hacer que la fuente sea negrita o para cambiar su tamaño.

NOTA: Esto no cambia la fuente que se utiliza para las etiquetas de botón de tu barra, sino la fuente utilizada en los menús. Para cambiar la fuente de las etiquetas de botones, consulta la sección correspondiente más adelante en este capítulo.

Dirección Escoge la dirección en la que quieres que tus menús se abran. Para las barras de navegación horizontales, normalmente querrás que sea hacia abajo y para las barras de navegación verticales, o bien hacia la izquierda o hacia la derecha dependiendo el lugar de la página en el que se encuentre tu barra.


Espaciado Con esta configuración puedes agregar espacio entre las entradas del menú; si las separas, el menú será más grande.

Borde Agrega un borde a los paneles de los menús al fijar un ancho de borde en píxeles.

Animación Por defecto, los menús se abrirán de forma instantánea, pero aquí puedes elegir si quieres que el menú tenga una animación mientras se abre.

Transparencia Puedes hacer que tus menús sean semitransparentes para poder ver a través de los paneles de menú. Introduce el nivel de transparencia que te gustaría como porcentaje.

Desplazamiento horizontal/Desplazamiento vertical Puedes desplazar el panel del menú de forma horizontal o vertical con respecto a los botones. Introduce la cantidad de píxeles de desplazamiento.

Actualización de la barra de navegación en todas las páginas

Tal como se ha descrito anteriormente, si la opción BARRA DE NAVEGACIÓN DEL SITIO está activada para una barra de navegación, entonces todos los cambios realizados a una barra de navegación se aplicarán automáticamente a todas las otras páginas, incluyendo la ubicación de la barra en la página.

Sin embargo, si no tienes esta opción activada, debes utilizar la función ARREGLO > ACTUALIZAR OBJETOS REPETIDOS para copiar los cambios que has realizado a la barra en la página actual a todas las otras páginas. Ten en cuenta que esto también actualizará todos los otros objetos repetidos en la página, como los encabezados o logos, y la página actual se utilizará como referencia. Lee el capítulo Trabajar con objetos para más información sobre objetos repetidos.

Edición en el lienzo

Si la opción "Barra de navegación del sitio" está desactivada, entonces puedes editar las etiquetas de botones directamente en el lienzo, con la HERRAMIENTA DE

TEXTO. Simplemente escoge la herramienta de texto y haz clic en el texto de la etiqueta para comenzar a editarlo.

Utiliza ARREGLO > ACTUALIZAR OBJETOS REPETIDOS PARA APLICAR TUS CAMBIOS A TODAS

LAS PÁGINAS QUE CONTIENEN UNA COPIA DE LA BARRA.


Cambio de la fuente de los botones de la barra de navegación

Puedes modificar la fuente utilizada para las etiquetas de botones de una barra de navegación fácilmente. Selecciona la barra con un clic en ella. Luego ve a la HERRAMIENTA

DE TEXTO y selecciona de la lista de fuentes que se encuentra a la izquierda la BARRA DE

INFORMACIÓN DE LA HERRAMIENTA DE TEXTO. A medida que desplaces el cursor del ratón sobre las diferentes fuentes de la lista, la barra de navegación se adaptará de inmediato para que puedas ver el aspecto de tu barra con esa fuente. Selecciona la fuente que desees. Si tu barra tiene un estado MouseOver, su fuente también se adaptará.

De la misma forma, puedes cambiar el tamaño de la fuente con el control del tamaño de fuente que se encuentra junto a la lista de selección de fuente.

Importación e inserción de barras de navegación

Si importas o pegas una barra de navegación en tu documento, la opción de navegación del sitio de esta barra de navegación se desactiva automáticamente, si estaba activada. Esto es para evitar conflictos con cualquier barra de navegación del sitio existente en tu documento.

Sin embargo, si la barra entrante es del mismo tema y tipo que la barra de navegación del sitio existente (tiene el mismo nombre), inmediatamente se actualizará para coincidir con la barra de navegación del sitio existente. De esa forma, esta barra no aparecerá con su forma original en tu página.

Si la barra es de un tema o tipo diferente (tiene un nombre repetido diferente) aparecerá sin modificación.

Creación de barras de navegación propias

Puedes crear una barra de navegación a partir de cualquier tipo de diseño de botón. La GALERÍA DE DISEÑOS contiene varios diseños de botones diferentes o puedes dibujar tus propios diseños. Consulta la sección Creación de los botones MouseOver propios (en la página 56) del capítulo Primeros pasos para más información sobre este tema. El botón puede o no incluir un estado MouseOver.

Para crear una barra de navegación, selecciona el botón y luego escoge ARREGLO > CREAR BARRA DE NAVEGACIÓN. El DIÁLOGO DE BARRA DE NAVEGACIÓN aparecerá y podrás agregar más botones a tu barra de inmediato, de la misma forma que con las otras barras de navegación.

También puedes crear barras de navegación con más de un diseño de botón (para que puedas tener diferentes diseños para tu primer y/o último botón de la barra). Consulta la sección a continuación para información sobre cómo hacerlo.


Restricciones de diseño de botones

Existen algunas reglas que debes seguir cuando crees tus propios botones para utilizar en barras de navegación.

Limitaciones de botones extensibles Para obtener resultados óptimos cuando tus botones se extienden de forma automática, te recomendamos que no haya puntos de control de ruta ni rellenos con gradación/puntos de control de transparencia en el área horizontal que ocupa el objeto de texto de la etiqueta de botón.

Texto en un botón Cada estado del diseño de botón debe diseñarse como objeto de grupo que contenga el objeto de texto que puede servir como etiqueta de botón. Este objeto de texto debería ser un objeto de texto simple, no una columna de texto ni un área de texto. Es decir, que debería crearse en la Herramienta de texto con un clic en la página y escribiendo, sin arrastrar una línea ni área de texto primero.

Estados de botones en grupos suaves Si hay varios estados en tu botón, p. ej. MouseOff y MouseOver, necesitan agregarse a un grupo suave para que permanezcan juntos cuando un estado se mueve o transforma.

Márgenes de botón

En esta sección nos referimos a "márgenes" como los espacios entre la etiqueta y el final del botón. Para los botones extensibles (aquellos para los que se ha activado la opción "Ajustar el ancho de los botones a las etiquetas") esto está determinado por el botón master a partir del que has creado tu barra de navegación. Al ajustar los márgenes del botón master, configuras los márgenes para todos los otros botones de la barra, que se basan en él.

La forma más sencilla de cambiar el margen del primer botón es la siguiente:

1. Abre el DIÁLOGO DE BARRA DE NAVEGACIÓN 2. Desactiva la opción AJUSTAR EL ANCHO DE LOS BOTONES A LAS ETIQUETAS, para que

los botones no se extiendan al cambiar el texto de la etiqueta. 3. Cambia la etiqueta del botón master (el primer botón salvo que tu barra de

navegación contenga varios diseños de botones, ver la sección a continuación). Escoge un texto de etiqueta de prueba que tenga la longitud apropiada para ofrecerte los márgenes que deseas en el botón master.

4. Vuelve a activar la opción AJUSTAR EL ANCHO DE LOS BOTONES A LAS ETIQUETAS . Todos los botones tendrán los mismo márgenes que el botón master.

5. Vuelve a colocar el texto de la etiqueta master.


Barra original

Barra con margen pequeño modificado

Barra con margen grande modificado

Si tu barra de navegación contiene diferentes diseños para el inicio/fin (lee a continuación para saber cómo hacerlo), entonces los diseños de inicio y fin tendrán sus propios márgenes que pueden controlarse por separado.

Avanzado: edición de un diseño de botón de barra de navegación.

Sin importar la forma en que se ha creado la barra de navegación, puedes modificar el diseño de botón que utiliza. Para una barra de navegación en la que todos los botones tienen el mismo diseño, el primer botón en la barra se utiliza como botón master a partir del que todos los demás botones se copian. Por lo tanto, al modificar el primer diseño de botón, puedes modificar el diseño para toda la barra.

Edición interior

Para algunas barras puedes realizar cierto tipo de edición del diseño de botón directamente en el primer botón, si utilizas la opción para seleccionar el contenido. Esto te permite seleccionar las formas dentro de un grupo de botones. Lee la información acerca de la herramienta de selección en el capítulo Trabajar con objetos para más detalles.

Sin embargo, no puedes realizar la edición interior, si alguna de las siguientes opciones está activada en el diálogo de barra de navegación.

• BARRA DE NAVEGACIÓN DEL SITIO • AJUSTAR EL ANCHO DE LOS BOTONES A LAS ETIQUETAS

Si alguna de estas opciones está activada e intentas seleccionar dentro, se te preguntará y se te dará la opción de abrir el diálogo de barra de navegación para desactivar estas opciones y volver a intentar.

Con las opciones desactivadas, puedes utilizar seleccionar dentro y modificar las formas que conforman tu botón con las herramientas de dibujo usuales.


IMPORTANTE: Recuerda que el primer botón de tu barra es el botón master de la misma (salvo que uses botones de inicio y fin diferentes, ver a continuación). Es decir, que debes modificar el primer botón. Luego, los cambios que hayas realizado al primer botón se aplicarán de inmediato a otros botones de tu barra. Si modificas otro botón que no sea el master, los cambios no se aplicarán y se perderán cuando modifiques tu barra.

Desagrupar, editar y reagrupar

Si quieres realizar una edición significativa de un diseño de botón, lo mejor es desagrupar los componentes que forman la barra de navegación y luego reagruparlos.

Para desagrupar la barra, selecciona la barra de navegación con un clic en el lienzo y selecciona la función usual para desagruparARREGLO > DESAGRUPAR o Ctrl+U). O haz clic en el botón DESAGRUPAR PARA EDITAR GRÁFICOS en la parte inferior del diálogo de barra de navegación.

Nota: Si tu barra de navegación tiene la opción "Barra de navegación del sitio" activada, deberás volver a activar la opción después de reagrupar la barra modificada, de ser necesario.

Una vez que has desagrupado la barra, dejará de ser una barra de navegación y tendrás un grupo de botones separado para cada estado de botón. Además, si la opción "Mismo ancho para todos los botones" se ha activado, al desagrupar, es posible que los anchos de botones cambien porque esta opción es sólo efectiva mientras los botones son parte de una barra de navegación. La mayoría de las veces querrás realizar cambios al diseño del botón master y dejar los otros botones en la página. Se utilizan cuando reagrupes tu barra de navegación para recuperar todas las etiquetas de botones, enlaces, etc. para que no tengas que volver a ingresarlos.

Si has establecido un estado MouseOver, los dos grupos que conforman el botón master estarán unidos en un "grupo suave" para que permanezcan juntos cuando los arrastres por la página. Sepáralos con ARREGLO > BORRAR GRUPO SUAVE (Ctrl+Alt+U). Luego puedes desagrupar cada estado de botón de las capas MouseOff y MouseOver (Ctrl+U) para trabajar en sus respectivos diseños. Consulta la sección "Creación de los botones MouseOver propios" del capítulo Primeros pasos (en la página 56) para información sobre cómo crear botones.

Recuerda reagrupar cada uno de los estados de botón y luego volver a crear el grupo suave para conservar los dos botones de estado juntos una vez que hayas terminado con la edición. Házlo asegurándote de que ambas capas estén activadas en la Galería de páginas y galerías (en la página 275), selecciona ambos grupos de estado y luego ARREGLO > APLICAR GRUPO SUAVE. Lee el capítulo Trabajar con objetos para más información sobre grupos suaves (en la página 108).

Es una buena idea comprobar que el botón funcione de forma esperada con una vista previa de tu página, antes de volver a montar la barra. Para volver a armar la barra, selecciona el botón modificado y escoge ARREGLO >CREAR BARRA DE NAVEGACIÓN . Los botones no modificados en la página se utilizan para volver a crear la página tanto si los seleccionas o no.


Barras de navegación con primer y último botón diferente

Muchas veces es posible que el primer y el último botón de una barra sean diferentes. Por ejemplo, una barra puede tener extremos redondeados con botones rectangulares en el medio.

Las barras de navegación como estas necesitan 2 (si sólo un extremo es diferente) o 3 (si ambos extremos son diferentes) diseños de botones. Posiciona los diseños de botón en orden de izquierda a derecha, tal como quieres que aparezcan en una barra de navegación horizontal. O de arriba hacia abajo tal como te gustaría que aparecieran en una barra vertical. Luego selecciona los tres diseños de botones (junto con los estados MouseOver, si los tienen) y escoge ARREGLO > CREAR BARRA DE NAVEGACIÓN.

Cuando creas una barra a partir de más de un botón como este, MAGIX Web Designer 6 necesita saber cómo quieres que se utilicen esos botones en la barra. Por lo tanto, se muestra un diálogo que solicitará que escojas entre una variedad de opciones.

Todos los botones iguales: escoge esta opción si quieres que todos los botones de la barra tengan el diseño del primer botón que has seleccionado. Este es el tipo de barra de navegación más común.

PRIMER BOTÓN DIFERENTE: si el primer botón debe tener un diseño diferente al resto de los botones de la barra, escoge esta opción.


ÚLTIMO BOTÓN DIFERENTE: si el último botón debe tener un diseño diferente al resto de los botones de la barra, escoge esta opción. Un ejemplo en el que esta opción es necesaria es una barra que muestra una división entre cada botón de la barra. Todos menos el último botón necesitarán el divisor a la derecha del diseño del botón.

El último botón en este ejemplo es diferente porque no tiene un divisor en el borde derecho.

PRIMER Y ÚLTIMO BOTÓN DIFERENTES: esta opción te permite especificar los diferentes diseños de botones para el primer y el último botón para dar a tu barra los extremos finales. Por supuesto, debes haber seleccionado al menos 3 botones para que esta opción sea válida.

268 Widgets de sitios web

Widgets de sitios web

Este capítulo describe cómo agregar contenido dinámico a tu sitio web, como películas, animaciones, formas y miles de gadgets disponibles como contadores de página y conversores de divisas. Nos referimos a estos con el término general "widgets de sitios web" o simplemente "widgets".

Widgets y marcadores de posición: todo automático

Un widget es un objeto que puedes colocar en tu página que es más que un gráfico, una imagen o un texto estático. Todos los widgets tienen algún tipo de código HTML (y muchas veces una combinación de Javascript y Flash), que el navegador web ejecuta para mostrar el widget y reproducir su comportamiento. MAGIX Web Designer 6 muestra un "objeto de marcador de posición estático" en la página para indicar el tamaño y posición de un widget en la página web final, que puede colocarse en cualquier lugar de la página. Cuando exportes o generes la vista previa de tu página, el objeto de marcador de posición se reemplaza con el código actual para el widget, de forma que el widget funciona tal como lo esperas en tu página web.

En general, un marcador de posición es una imagen que parece una instantánea estática del widget mismo, pero también puede ser simplemente un rectángulo o cualquier otro

Widgets de sitios web 269

objeto. El marcador de posición debe tener las mismas dimensiones que el widget, de forma que puedas posicionarlo con respecto al otro contenido de tu página.

La buena noticia es que MAGIX Web Designer 6 puede renderizar las imágenes de posición de marcador por ti. En general, solo debes darle a MAGIX Web Designer 6 el código o archivo para un widget y él se ocupará de todo lo demás.

Widgets de la galería de diseños

La forma más sencilla de agregar widgets a tu sitio es escoger entre la selección suministrada en la GALERÍA DE DISEÑOS. Los widgets de la galería se actualizan automáticamente de forma regular, de forma que Xara puede añadir, modificar o eliminar la selección de widgets disponibles en cualquier momento. Verás que la galería de diseños muchas veces se actualiza cuando la abres.

Para agregar un widget, simplemente arrástralo y suéltalo desde la galería hasta tu página. Se abrirá una ventana que, en realidad, es el navegador de Internet que funciona dentro de MAGIX Web Designer 6. Esto es similar a la ventana de vista previa que se muestra cuando haces clic para ver la vista previa de la página y los botones del sitio web en la barra de herramientas web. Sin embargo, esta ventana tiene algunos botones adicionales en la parte inferior que te explicaremos más adelante.

Ejemplo de la ventana de inserción de widgets, que muestra el gadget de novedades de Google.


La ventana del navegador se abre en la página web del proveedor del widget. Aquí podrás encontrar más información acerca del widget y, en la mayoría de los casos, personalizar su apariencia. En general, la página web del widget también te permitirá hacer una vista previa de tu widget después de haber realizado cambios.

Inserción

Pulsa el botón AYUDA al final de la ventana para ver información que te guíe durante el proceso de configuración e inserción del widget. Para la mayoría de los widgets, deberás llegar al punto en que la página web del widget te muestre el código HTML que necesita insertarse en tu página web. Cuando sea visible, generalmente puedes hacer clic en el botón Insertar en la parte inferior de la ventana. Entonces, MAGIX Web Designer 6 encontrará el código HTML y lo insertará en tu página por ti.

Para algunos widgets, MAGIX Web Designer 6 no puede tomar el código HTML directamente desde la página y deberás copiar el código al portapapeles. Selecciona el código en la ventana del navegador y pulsa Ctrl+C. Muchos widgets te facilian esto porque te suministran un botón de copia junto al código. Una vez que has copiado el código, haz clic en el botón INSERTAR.

Generación automática del marcador de posición

Al pulsar el botón Insertar, si MAGIX Web Designer 6 encontró el código del widget, la ventana de la página web del widget se cerrará y verás un aviso indicando que MAGIX Web Designer 6 está ocupado renderizando la imagen del marcador de posición. Tras algunos segundos, aparecerá una imagen de tu widget en tu página. Para la mayoría de los widgets, esta imagen tiene el mismo tamaño que el widget en sí mismo, por lo que puedes posicionarla con la HERRAMIENTA DE SELECCIÓN.

Ahora, todo lo que debes hacer es realizar una vista previa de tu página web y verás el nuevo widget en funcionamiento.

Membresía del sitio del widget

Es posible que algunos widgets requieran que abras un cuenta con el proveedor del widget antes de poder usarlo. La mayoría son gratis, pero algunas ofrecen servicios premium además de la oferta gratis. Mira cada widget individual y la información sobre el sitio del proveedor del widget para más detalles.

Edición de widgets existentes

MAGIX Web Designer 6 no ofrece compatibilidad directa para editar un widget que ya has agregado a tu página. La mayoría de los widgets son muy simples y muchas veces la forma más fácil de cambiar un widget es eliminándolo y creando uno nuevo, tal como se describe anteriormente.

Los proveedores de widgets que te ofrecen una cuenta generalmente conservarán una copia de un widget que has creado. Esto significa que puedes iniciar sesión en tu cuenta y encontrar, modificar e insertar un widget que has creado previamente. Insertar widgets existentes es como insertar widgets nuevos, simplemente haz clic en INSERTAR cuando veas el código HTML o copia el código HTML para el widget en el portapapeles y luego haz clic en Insertar.


Agregado de archivos de películas y animaciones

MAGIX Web Designer 6 incluye compatibilidad directa con algunos tipos de archivos que es posible que quieras añadir a tu página. Para estos archivos, puedes simplemente arrastrarlos y soltarlos desde el Explorador de Windows hasta tu página o utilizar la opción ARCHIVO > Importar.

Durante la importación, se identifica el tipo de archivo y se coloca un marcador de posición o un enlace apropiado en tu página, mientras que el archivo se copia en la carpeta de soporte de tu diseño. La carpeta de soporte es una carpeta que está vinculada a tu archivo de diseño y se crea automáticamente. Si tu archivo de diseño se llama "Misitio.web", la carpeta de soporte se llamará "Misitio_web_files". El contenido de esta carpeta se incluye junto con todos los archivos de imagen de tu sitio, toda vez que exportes y publiques tu sitio.

Archivos de película MP4 y FLV

Al importar un archivo MP4 o FLV, MAGIX Web Designer 6 inspecciona el archivo para determinar la relación de aspecto y otra información acerca de la película. Luego inserta el archivo de película y otros archivos en un reproductor de películas Flash en la carpeta de soporte de tu sitio web. En tu página aparecerá una imagen similar al reproductor de la película.

Posiciona y cambia el tamaño de tu marcador de posición con la herramienta de selección y luego haz una vista previa de tu página. Haz clic en el botón para iniciar la reproducción de la película (deberás tener Flash instalado). Esto es todo. El reproductor de la película contiene controles básicos para ajustar el volumen, iniciar y detener la reproducción y para desplazarte hasta cualquier lugar de la película.

Otros formatos de película

MAGIX Web Designer 6 no es directamente compatible con otros formatos de película, pero visita esta página web http://rdir.magix.net/?page=H1Q9XX0777AR del sitio web de MAGIX para más información sobre cómo convertir películas a un formato que pueda agregarse a tu página web.

Archivos Flash

Para incluir una animación Flash en tu sitio web, importa el archivo Flash (.swf). El archivo Flash se copia en la carpeta de soporte de tu diseño, de forma que se exportará y publicará con tu sitio web. Una imagen de marcador de posición se renderiza y se coloca en tu página web.

Puedes cambiar el tamaño de tus animaciones Flash, si utilizas la HERRAMIENTA DE

SELECCIÓN para cambiar el tamaño de la imagen de marcador de posición al tamaño deseado y la posicionas en el lugar que desees.

Haz una vista previa de tu página para ver la animación Flash en funcionamiento en tu página web. Por supuesto, debes tener Flash instalado para poder reproducirla con éxito.

http://rdir.magix.net/?page=H1Q9XX0777AR


GIF animados

Agrega un GIF animado a tu página de la misma forma en que agregas archivos Flash. Importa o arrastra y suelta el archivo GIF hasta la página. Se copiará a la carpeta de soporte del diseño y se generará una imagen de marcador de posición estática. Cambia el tamaño y reposiciona el marcador de posición, luego haz una vista previa de tu página y listo.

Archivos PDF

Puedes importar archivos PDF a un documento web en dos formas diferentes. O bien lo importas para que el contenido del archivo se copie en tu página (al igual que cuando importas una foto). O bien puedes agregar un enlace a una copia del archivo en tu sitio web y dejas que el archivo se publique en tu sitio. Al importar un archivo PDF se te dará a escoger entre estas dos opciones.

Al añadir un enlace, el archivo PDF se copia en la carpeta de soporte de tu diseño de forma que se exporta y publica con el resto de tu sitio. Además, se agrega un enlace en tu página que se verá así:

Un clic sobre el enlace de tu página exportada generalmente abre el archivo PDF, pero el comportamiento exacto varía según la configuración del navegador del usuario.

Widgets de otros sitios de widgets

Existen cientos o miles de sitios que ofrecen widgets de alguno tipo y la Galería de diseños brinda acceso a un pequeño subgrupo de ellos. Casi todos los widgets se ofrecen mediante un breve código HTML. El proveedor del widget generalmente te suministra instrucciones simples para insertar el código en tu página web, pero con MAGIX Web Designer 6, esto es todavía más fácil.

Copia el código del proveedor del widget en el portapapeles de tu sistema, simplemente cópialo tal como lo harías en un procesador de texto. Muchas veces, el proveedor del widget te suministra un botón "copia" que lo hace por ti.

Luego, en MAGIX Web Designer 6 ve a la herramienta de selección y haz una operación de pegado habitual (Ctrl+V). Verás que MAGIX Web Designer 6 reconoce el código HTML e comienza de inmediato a renderizar la imagen de marcador de posición, tal como lo hace como cuando se inserta un widget de la Galería de diseños. El marcador de posición aparecerá en tu página y, generalmente, tendrá el tamaño del widget. Luego podrás hacer una vista previa de tu página para ver al widget en funcionamiento.

NOTA: si no te encuentras en la herramienta de texto cuando pegas el código, se pegará como texto en vez de introducir un marcador de posición. Una vez que hayas pegado el contenido del portapapeles como texto, continuará pegando como texto aún cuando cambies a la herramienta de selección y vuelvas a pegar. Si llegas a este punto, vuelve a la


página web del widget y copia el código de nuevo. Luego, pégalo mientras te encuentras en la herramienta de selección.

Cambio de tamaño de widgets

Puedes cambiar el tamaño de las imágenes de marcadores de posición para archivos Flash, MP4 y GIF animados de la misma forma que cambias el tamaño del contenido de tu página, porque este tipo de contenido es modificable. Sin embargo, la mayoría de los otros widgets no son compatibles con esto y siempre renderizarán el mismo tamaño.

Para estos widgets, el objeto de marcador de posición determina simplemente los límites del área en que el widget puede renderizar, de forma que reducir el tamaño del marcador de posición significará que el widget se verá recortado en tu página. La imagen del marcador de posición se regenera cada vez que cambias su tamaño por lo que reflejará un recorte del widget también, tal como se ilustra en el ejemplo.

Marcador de posición con el tamaño por defecto

Marcador de posición con tamaño reducido

Este es un ejemplo del botón "Comprar ahora" de PayPal que permite vender bienes y servicios desde tu página web. Este widget está disponible en la Galería de diseños.

De la misma forma, hacer que el marcador de posición de estos widgets sea más grande resultará en un espacio vacío alrededor del widget en la página y en la imagen del marcador de posición. Para widgets como este, que no cambian de tamaño correctamente cuando se modifica el tamaño del marcador de posición, lo mejor es conservar el tamaño original por defecto.

Hay algunos widgets que pueden mejorarse si se cambia el tamaño del marcador de posición, aun cuando el widget en sí mismo no cambie su tamaño. Algunos widgets llenarán el contenedor en el que están insertos, lo que significa que parecerán más grandes y habrá espacios en blanco que ocupan el espacio. Puedes experimentar cambiando el tamaño del widget en cada dirección y reduciendo el widget sin perder partes de él.

Por ejemplo, este widget se ha renderizado demasiado ancho y alto de forma que se desperdicia espacio abajo y a la derecha de los controles. Si reduces el tamaño, el tamaño de los controles no cambiará, sino que la forma se recortará. El resultado es un marcador de posición más claro que ocupa menos espacio en la página.


Marcador de posición con el tamaño por defecto Marcador de posición más angosto y corto

Desactivación de la regeneración del marcador de posición

La imagen de marcador de posición se regenerará cada vez que cambies su tamaño, el código o el archivo relacionado. Es posible que algunas veces quieras desactivar la regeneración de forma que la imagen del marcador de posición no cambie. Puedes hacerlo si quitas la tilde de la casilla que se encuentra en la parte inferior de la PESTAÑA

MARCADOR DE POSICIÓN del DIÁLOGO HERRAMIENTAS > PROPIEDADES WEB.

Inserción manual de marcadores de posición

Si no quieres que MAGIX Web Designer 6 cree una imagen de marcador de posición, puedes fijar una personalmente. Primero crea un objeto de marcador de posición (tal vez un rectángulo del tamaño adecuado o una imagen importada que quieras utilizar para representar el widget en tu página). Selecciona el objeto y luego abre la pestaña Marcador de posición en el DIÁLOGO HERRAMIENTAS > PROPIEDADES WEB.

O pulsa el botón de marcador de posición en la barra desplegable de Propiedades web en la barra superior.

En este diálogo puedes escoger si deseas asociar el objeto seleccionado con un archivo Flash u otro archivo o con un código HTML que pegues en el diálogo. Lee la sección PESTAÑA MARCADOR DE POSICIÓN del capítulo diálogo de Propiedades web (en la página 212) para más detalles en este diálogo.

En general, no quieres que la opción "Regenerar marcador de posición" esté activada si quieres conservar el objeto de marcador de posición que has creado. Si seleccionas esta opción, tu marcador de posición se reemplazará por la imagen generada del código o archivo especificado en este diálogo.

Más información

Consulta la página web xara.com/widgets http://www.xara.com/widgets para más información acerca de widgets. Por supuesto, sigue visitando la Galería de diseños que se actualiza regularmente.

http://www.xara.com/widgets

Galería de páginas y capas 275


La galería de páginas y capas

Nota para usuarios de versiones de este software más antiguas: esto sustituye la GALERÍA

DE CAPAS

Utiliza el ícono de la galería de PÁGINAS Y CAPAS de la barra de Galerías o pulsa F10 para ver la Galería de páginas y capas.

La GALERÍA DE PÁGINAS Y CAPAS enumera todo lo que tienes en tus documentos, desde las páginas y las capas hasta cada elemento individual de la página. Ofrece una forma de seleccionar, ocultar, bloquear y reordenar estos elementos.

Puede trabajar en muchos niveles. En el nivel más alto se pueden enumerar sólo las PÁGINAS y suministrar una forma directa y fácil de reordenar el orden de éstas (arrastrándolas) para nombrar, copiar o borrar las páginas.

En un nivel inferior se pueden mostrar todas las CAPAS en cada página y puedes cambiar el orden, renombrar y también bloquear y ocultar cualquier capa de una forma similar.

En el siguiente nivel inferior se enumeran todos los OBJETOS en la página de forma jerárquica. Por lo tanto, aparecerá por ejemplo cada elemento de grupo en la página, pero puedes expandir el grupo para mostrar los contenidos de ese grupo (que puede contener otros grupos), de forma similar a como el explorador de archivos Windows gestiona los archivos en archivos.

El nivel de objeto en la galería de Páginas y capas sólo está disponible en Xara Designer Pro.

La jerarquía de los elementos es la siguiente:

Páginas

Capas

Elementos de página que pueden incluir grupos

Contenidos de grupo

...etc

Algunas de las características clave de la galería de PÁGINAS Y CAPAS incluyen;

Control de página • Muestra una lista de páginas • Agregar una nueva página, duplicar o borrar páginas

276 Galería de páginas y capas

• Cambiar el orden de página arrastrándolas • Renombrar páginas

Control de capas • Muestra todas las capas en cada página, desde la parte inferior (por lo general la capa

de fondo) hasta la capa más alta • Crear nuevas capas, borrar, reordenar y renombrar capas • Ocultar o mostrar capas • Bloquear capas (convierte las capas en no editables) • Activar Solo para una capa: desactiva todas las otras

Control de objeto (sólo disponible en Xara Designer Pro) • Muestra una lista de todos los elementos (objetos) en la página de acuerdo con el orden

en el que aparecen en la misma, desde la parte inferior hasta la parte superior. • Ocultar o mostrar cualquier elemento • Mover hacia arriba y hacia abajo la pila • Bloquear cualquier objeto para que se convierta en no editable • Activar Solo para un objeto: desactiva todos los otros

Además, la galería de PÁGINAS Y CAPAS muestra una pequeña vista en miniatura de cada elemento y una vista en miniatura más grande si pasas el cursor del ratón por encima.

La galería de Páginas y capas muestra un documento de 5 páginas. La página denominada "photos" es la página seleccionada.

Si mantienes el cursor sobre el icono de la página pequeña, obtienes una vista previa de la miniatura de la página.


La página de fotos ha sido ampliada, haz clic en la pequeña flecha que apunta hacia la derecha para mostrar todas las capas de esta página.

La capa inferior "Page background (Fondo de página)" está bloqueada. La capa denominada MouseOff es la capa activa o actual que es donde aparecerán todos los nuevos objetos. Las 4 capas superiores están ocultas (icono del ojo cerrado), de modo que en el documento sólo son visibles la capa de fondo y la capa MouseOff.

Páginas

Haciendo clic en el botón PÁGINAS en la parte superior de la GALERÍA DE PÁGINAS Y CAPAS sólo se visualizarán las páginas en el documento, colapsando todos los demás niveles abiertos.

Puedes reordenar las páginas arrastrando sobre el elemento en la galería de páginas y capas.

Puedes renombrar una página haciendo haciendo dos veces clic (despacio) en el nombre de la página. (El primer clic seleccionaría la página.) Esto se parece mucho a renombrar archivos en Windows Explorer. Del mismo modo que es una forma útil de identificar páginas en documentos largos, el nombre de página se usa cuando el documento se exporta como página web. Por este motivo no es posible usar ciertos caracteres o caracteres de símbolo en el nombre (no son aceptados como nombres de páginas web).

Los botones NUEVO, DUPLICAR y BORRAR hacen lo que sus nombres sugieren. Observa que primero tienes que haber seleccionado una página (haz clic para que resalte en azul como se muestra arriba) para que estos botones funcionen en las páginas. (Si has seleccionado una capa, por ejemplo, funcionarán en el nivel de capa).

La opción NUEVO creará una página vacía del mismo tamaño que la página seleccionada actual.

Puedes expandir (abrir) la página para mostrar los contenidos de la página haciendo clic en la flecha pequeña que apunta a la derecha o haciendo doble clic.


Repitiendo la misma operación colapsará (cerrará) la vista de página. Manteniendo el cursor del ratón sobre el pequeño icono de página aparecerá una miniatura de pop·up de la página.

Capas

¿Qué son capas? Todo en tu documento tiene un orden de apilamiento · esto significa que nuevos elementos son posicionados encima de elementos más antiguos de la página, como si estuvieras añadiendo trozos de papel en tu escritorio. Puedes hacer clic para mover cualquier objeto, pero si tu documento tiene docenas o incluso cientos o miles de elementos, tu tarea puede volverse desordenada y difícil. Quizás quieras trabajar en elementos que están tapados por elementos que se encuentran encima.

Las capas son útiles para organizar páginas o dibujos más complejos que contienen numerosas partes separadas. Utilizando capas puedes agrupar una colección de elementos y luego activar o desactivar la colección entera (hacerla visible u ocultarla) a través de una operación fácil. Imagínate que una capa es un sobre transparente de plástico que contiene una pila de papeles separados. Abriendo el sobre puedes acceder a su contenido y re·arreglarlo. Pero tu escritorio puede que contenga una pila de dichos sobres y, tal y como puedes volver a arreglar los sobres, también puedes volver a ordenar, de forma similar, las capas.

Por lo tanto, las capas son grupos de elementos. Las capas pueden hacerse invisible para ocultar partes de tu documento, lo que hace que tus áreas de trabajo sean menos desordenadas y más fáciles de manejar. Puedes asignar nombres a las capas o puedes crearlas o borrarlas fácilmente. Y de igual modo que puedes hacer clic en el icono de la pequeña flecha para abrir una página y ver su contenido (las capas en la página), puedes hacer lo mismo con cada capa para ver los contenidos de esa capa.

Cuando selecciones cualquier objeto, la capa se mostrará en la línea de estado en la parte inferior de la ventana.

La capa actual

Cuando creas algún objeto en la página, se coloca en una de las capas, llamada la capa activa o simplemente la capa actual. En un documento en blanco esto se llama Capa 1 o, en el caso de documentos Web, se lo denomina MouseOff. La capa actual se señala con una marca redonda en el lado derecho.

Importante: todos los elementos, fotos o texto nuevo que se dibujen y todos los

elementos pegados se colocan en la capa actual marcada con el símbolo.


Puedes cambiar la capa actual, simplemente con un clic sobre su hilera en la Galería de objetosGalería de páginas y capasmprender que puedes seleccionar un objeto en cualquier capa o incluso en múltiples capas, sin que se encuentren en la capa actual. Esta capa actual simplemente indica el lugar en donde se colocarán los nuevos elementos.

Esta Galería de páginas y capas de ejemplo muestra que la capa actual se llama MouseOff (la página actual se llama fotos). Entonces, si dibujas algo nuevo se colocará en la capa MouseOff.

También muestra tres elementos seleccionados en el documento (resaltados en azul) dentro de una capa completamente diferente, llamada Beta_fotos 2.

Las capas Layer 5, 6, 7 y MouseOver están ocultas.

Capa actual siempre visible Es posible que la página actual pueda estar oculta o hasta bloqueada. Al hacer clic sobre una capa para seleccionarla, la capa actual no cambia generalmente su estado de visibilidad o bloqueado. Pero existe una preferencia en el diálogo de Opciones (Herramientas > Opciones > pestaña General (en la página 332)) para hacer que la capa actual siempre esté visible y editable (sin bloquear). Si seleccionas esta opción, entonces cada vez que selecciones una capa en la Galería de páginas y capas se hará visible y no estará bloqueada. Al moverte a otra capa, la capa anterior regresará a su estado de visibilidad y bloqueo anterior.

Capas en páginas web

En páginas web guardadas de <Programmnam_short>, las capas se usan para efectos de MouseOver o de ventanas emergentes (en el navegador web, los contenidos de estas capas se visualizan cuando mueves el cursor sobre elementos en la página).


Puedes encontrar más detalles sobre este tema en el capítulo Primeros pasos en la sección Capas, MouseOver y ventanas emergentes (en la página 54).

Grupos y capas suaves

Los Grupos suaves (en la página 108) son poco usuales porque son grupos de objetos que pueden encontrarse en diferentes capas. (Los elementos de los grupos normales deben estar en una sola capa). Cuando seleccionas una parte de un grupo suave, las otras partes también se seleccionan, incluso si están ocultas o bloqueadas. La Galería de páginas y capas mostrará todos los elementos seleccionados de color azul, pero en el caso de los grupos suaves, estos elementos pueden encontrarse en otras capas que no has expandido y, por lo tanto, no son visibles de inmediato.

Operaciones de capa

Con un clic en el botón CAPAS en la parte superior de la galería de páginas y capas aparecerán sólo las capas de la página actual. Este es un modo en que el botón de capas permanece pulsado. Mientras te encuentras en el modo de capas, si pasas a otra página, se verán las capas de la página del momento y todos los otros nodos se cerrarán. Para desactivar el modo, haz clic nuevamente en el botón CAPAS.

Puedes reordenar las capas, esto es el orden de superposición en la página, arrastrando y soltando en las capas en la galería de páginas y capas.

Puedes renombrar una capa haciendo haciendo dos veces clic (despacio) en el nombre de la capa. (El primer clic seleccionaría la capa.) Esto se parece mucho a renombrar archivos en Windows Explorer.

Si mueves el cursor del ratón sobre los pequeños iconos, se mostrará una miniatura del contenido de la capa.

Cuando selecciones una capa (hacer clic para resaltar la capa), los botones NUEVO, DUPLICAR y BORRAR en la parte superior de la galería de páginas y capas harán lo que sus nombres sugieren. El botón NUEVO creará una capa nueva vacía y la posicionará en la parte superior de la pila. Puedes cambiar el orden arrastrándolo a la posición requerida.

El botón DUPLICAR copiará la capa y su contenido y lo posicionará arriba en la pila, es decir, arriba de todos los demás objetos de la página.

El botón de propiedades

Esto abre una ventana de diálogo donde puedes crear nuevas capas con nombre y líneas guía con valores numéricos precisos. También puedes utilizar esto para modificar el color de los objetos de la capa guía.

Lee la sección OBJETOS GUÍA Y LÍNEAS GUÍA en el capítulo Trabajar con objetos (en la página 105) para más información.


Capas especiales

Existen diversos tipos de capas especiales. Estos aparecen en la galería de páginas y capas y pueden activarse o desactivarse de forma usual, aunque se comportan de forma levemente diferente.

CAPAS DE FONDO son capas que no se imprimen, que aparecen en el fondo del documento, debajo de todos los otros elementos. Al aplicar un color al fondo de la página (arrastrar y soltar desde la línea de color) esto creará automáticamente una capa de FONDO

DE PÁGINA. En general, está bloqueada.

Al guardar un documento como un sitio web, las capas de fondo se convierten en fondos de página web. Consulta el capítulo Primeros pasos (en la página 16) para más información acerca de la configuración de los fondos de página web y la utilización de las capas de fondo.

La CAPA DE GUÍAS es el lugar en donde se colocan las líneas guía o los objetos guía. Cuando creas una línea guía, se generará automáticamente una capa de guías. Podrás seleccionar la capa de guías y colocar todo lo que desees en esta capa, lo que funcionará como una guía de ajuste.

Lee la sección Objetos guía y líneas guía en el capítulo Manejo de objetos para más información.

Ocultar capas

Las dos columnas de íconos de la derecha de la galería de Páginas y capas controlan la visibilidad y el estado bloqueado de las capas.

Un clic en el ojo abierto ocultará la capa de la página y el ícono cambiara a un ojo cerrado . Otro clic hará que la capa sea visible nuevamente.

Cuando se oculta cualquier elemento, se vuelve invisible en la página y no puede verse ni seleccionarse más. La forma de volver a ver los elementos ocultos es hacer clic en su ícono de ojo cerrado. Como alternativa puedes hacer clic sobre el botón MÁS... y seleccionar la opción VER TODOS, lo que hace visible todos los elementos de la página actual.

Modo Solo

Si haces clic en cualquiera de los iconos en la columna junto a cada capa, activará el modo "solo" de esta página, lo que significa que se ocultará todo lo demás, salvo esta capa. Ahora puedes trabajar sobre esta capa aislada. Un clic en el botón restaurará el estado anterior.


También puedes hacer clic y arrastrar hacia abajo la columna de iconos para navegar rápidamente por las capas independientemente de todo lo demás.

Para salir del modo Solo, haz clic en el botón o en el botón más grande en la parte superior de la galería.

Bloquear capas

Un clic en el ícono de candado en el final derecho de la fila de capa bloquea la capa (el icono adopta la forma de un candado cerrado ). Ahora no podrás seleccionar ningún otro objeto en esa capa. Al hacer clic en los elementos cerrados, los atravesarás como si no estuvieran allí y se seleccionarán los elementos que se encuentran abajo. Con otro clic en el icono del candado, se vuelven a desbloquear. De forma alternativa puedes hacer clic en el botón MÁS.. y seleccionar la opción DESBLOQUEAR TODO.

Grupos suaves Hay una excepción en las reglas de bloqueo. Si un elemento en una capa bloqueada forma parte de un Grupo suave (en la página 108), al seleccionar u operar ese grupo suave, se selecciona y opera asimismo cualquier elemento bloqueado de ese grupo suave (para esto están pensados los grupos suaves).

Mostrar todo y desbloquear todo

Estos dos controles en la parte superior de la Galería de páginas y capas son un shortcut para ver todos los elementos de la página actual o desbloquearlos. Invalidan temporalmente todos los objetos individuales y configuración de capas. Un segundo clic sobre los controles restaurará el estado anterior. Es decir, que ésta es una forma rápida de ver o desbloquear todo, en todas las capas, realizar alguna operación y después regresar al estado anterior.

Cuando uno de los botones se ha seleccionado (están pulsados), entonces no es posible cambiar el estado de los elementos individuales. Quita la selección de los botones para permitir la operación normal de la visibilidad de la capa y el estado bloqueado.

Un clic sobre el botón Más mostrará opciones de menú para

MOSTRAR TODO y DESBLOQUEAR TODO.

Estas opciones son similares a las anteriores, pero no son interruptores. Al seleccionar una de las opciones, todas las capas se activarán o desbloquearán y no existe una forma fácil de restaurar el estado anterior, sino que deberá volver a seleccionarse individualmente el estado oculto o bloqueado de todos los elementos independientes.


Mover objetos entre capas

Hay varias formas de mover objetos entre capas. Primero, selecciona el objeto o los objetos que quieras mover, y, a continuación

• CORTA (Cortar) el objeto (Ctrl+X). Asegúrate que la capa de destino es la capa actual (mostrada con , haz clic en la capa si no es así) y luego haz clic en PEGAR o PEGAR

EN LUGAR. No puedes hacer esto al revés. Asegúrate de que la capa actual está seleccionada como la capa actual y luego corta (Cortar) el objeto (que puede encontrarse en cualquier capa) e inmediatamente vuelve a pegarlo (Pegar) (siempre se pegará en la capa actual).

• Utiliza los elementos del menú ARREGLO MOVER A LA CAPA DE ADELANTE / MOVER A LA

CAPA DE ATRÁS para mover los objetos seleccionados a una capa más arriba o abajo.

284 Animaciones en Flash

Animaciones en Flash

Introducción

MAGIX Web Designer 6 tiene un enfoque tradicional con respecto a las animaciones en Flash. Puedes crear frames claves (o snap shots) de tu animación a través del tiempo, y MAGIX Web Designer 6 producirá automáticamente todos los frames que sean necesarios entre un frame y otro (pasos intermedios), es un proceso llamado "tweening" (generación de transiciones).

Un ejemplo de frame de inicio

El próximo frame clave tiene la estrella en otra posición, la forma se ha rotado un poco, se ha reducido su tamaño y se ha cambiado su color.

MAGIX Web Designer 6 creará un archivo en Flash animado con movimientos suaves y fluidos porque los frames intermedios se generan de forma automática. Este proceso se llama "tweening".

Lo que Flash puede hacer y lo que no puede hacer

El formato Flash no es compatible con algunos efectos avanzados que ofrece MAGIX Web Designer 6, como por ejemplo, una graduación de transparencia compleja, difuminación (feathering), y la mayoría de los tipos de relleno de color avanzados.

Animaciones en Flash 285

Aunque, sí es compatible con una gama de efectos que incluye la transparencia simple. Por lo tanto, si por ejemplo le aplicas una transición a la estrella en el segundo frame clave superior para que sea 100% transparente, obtendrás una animación en la cual la estrella se mueve, reduce su tamaño y luego desaparece.

El mismo ejemplo mostrando los frames intermedios (in-between frames) pero con un cambio de transparencia.

Como MAGIX Web Designer 6, Flash es un programa basado en gráficos vectoriales, lo que te posibilita agrandar los objetos sin perder calidad en los detalles. Esta cualidad del programa hace que los archivos en Flash sean muy compactos, que es ideal para la web.

Para ilustrar lo pequeñas y compactas que pueden llegar a ser las animaciones flash de MAGIX Web Designer 6, el anterior ejemplo animado que dura un segundo y contiene 24 frames (de modo que el vídeo se reproduce suavemente a 24 frames por segundo) crea un archivo flash de tan sólo 700 bytes.

Los 6 tipos centrales de animación

Para que los archivos en Flash se mantengan muy compactos, los tipos de formas utilizadas en tweening compatibles con flash se limitan a seis tipos básicos de animación. Estos tipos se denominan a veces las 6 transformaciones centrales porque son las únicas que pueden transformar un objeto de un frame clave al siguiente.

1. Mover: desplazar los objetos de una posición a otra. 2. Modificar tamaño (scale): aumentar o reducir el tamaño de los objetos. 3. Aplastar o torcer (squash or skew): aplastar o torcer objetos. 4. Girar: rotar objetos 5. Transparencia: ajustar la transparencia general (plana) de los objetos. 6. Cambios de color: cambiar el color de relleno (plano) de los objetos.

El último ítem, los cambios de color, pueden aplicarse a las fotos a las que se ha aplicado un tono continuo. No puedes transformar una foto de colores completos en una foto de tono continuo, pero puedes cambiar una foto con un color de tono continuo en otro color de tono continuo.

Nota: los seis tipos de transformación mencionados anteriormente son absolutamente claves para todas las animaciones flash. Ningún otro tipo de transformación es posible para frames de transición (tweened frames).

Si te fijas en algunos ejemplos de animación en Flash en la web, te darás cuenta de que casi todas las animaciones utilizan éstos efectos. Los objetos aparecen y desaparecen (fade in, fade out), se mueven de una posición a otra. A veces los elementos giran, crecen


o se achican. Esta es la base para casi todas las animaciones en Flash, y es muy fácil producir este tipo de animaciones con MAGIX Web Designer 6.

Es imposible cambiar la forma de un objeto entre frames claves.

Es imposible cambiar la forma de un objeto entre frames claves.

Porque la forma de un objeto cambia, no se puede realizar esta acción en las animaciones en Flash de MAGIX Web Designer 6.

Lo que no puedes hacer con Flash en MAGIX Web Designer 6

MAGIX Web Designer 6 es principalmente un programa de ilustración vectorial y no está diseñado para ser una herramienta de Flash integral. En vez, este programa ofrece un enfoque nuevo e innovador, y de fácil comprensión de las animaciones en Flash. El MAGIX Web Designer 6 y sus herramientas de dibujo vectoriales, te permiten crear animaciones en Flash realmente compactas de forma mucho más sencilla y fácil que con otras aplicaciones.

Debido a su enfoque simplificado, MAGIX Web Designer 6 no es compatible con las funciones más complejas de Flash como scripting (programación), audio o películas integradas (embedded movies).

Adicionalmente, como la renderización de vectores en Flash es relativamente primitiva, comparado con Xara Xtreme, hay algunos efectos avanzados de Xtreme que no pueden ser utilizados con Flash. Éstos están detallados al final de este capítulo en "¿Qué funciones de MAGIX Web Designer 6 son compatibles con Flash?".

Principios básicos

En tu animación es probable que tengas algunos objetos que se mantengan estáticos entre un frame clave y otro, y otros que se muevan.

Para indicarle a MAGIX Web Designer 6 qué objetos quieres animar, debes colocarle un nombre a cada objeto (con el botón CREAR NUEVOS NOMBRES que se encuentra en la barra de información de la HERRAMIENTA DE SELECCIÓN).

Para más información sobre cómo colocarle nombres a los objetos. ver la sección "Nombrar objetos" en el capítulo "Trabajar con documentos".


Aquí tienes un resumen de los pasos a seguir cuando quieres crear una animación nueva:

1. Primero decide el tamaño de la animación y luego configura el tamaño de página (ver "Archivo > Opciones de página (en la página 337)").

2. Dibuja tu primer frame. Pónle un nombre a los objetos que desees animar. 3. Crea un frame clave nuevo (para ello copia el frame anterior). 4. Mueve y transforma los objetos según lo desees. 5. Comprueba los resultados en la vista previa. 6. Repite los pasos de 3 a 5.

Y así podrás seguir componiendo tu animación.

El botón Copiar frame de la barra de botones para animaciones.

MAGIX Web Designer 6 crea un frame clave nuevo con sólo pulsar un botón (básicamente lo que hace es copiar el frame anterior). La GALERÍA DE FRAMES te permite ver cualquier frame clave y puedes ajustar el orden y el tiempo de duración de los frames. La GALERÍA

DE FRAMES se explica en detalle más adelante en este capítulo.

Para aquellos que estén familiarizados con las funciones animadas de GIF en el MAGIX Web Designer 6 (o sus predecesores) todo este proceso les va a ser familiar. La diferencia es que con los archivos en Flash el MAGIX Web Designer 6 puede crear automáticamente todos los pasos intermedios (tween steps) para producir animaciones más fluidas y compactas que las animaciones GIF.

Nota: debes introducirle un nombre a los objetos que quieras animar entre un frame clave y otro. Todos los otros objetos se mantendrán visibles pero estáticos por el tiempo de duración del frame hasta que aparezca el próximo frame. Para borrar un objeto de una animación, bórralo sólo en el primer frame clave en el que no quieres que aparezca.

Tu primera animación

Para crear una nueva animación

Crea un nuevo documento de animación. Para esto:

Selecciona ARCHIVO > NUEVA > ANIMACIÓN ("Ctrl + + N").

Se abrirá un nuevo documento y verás la barra de botones para animaciones que incluye algunos botones relevantes para la animación.


1. Dibuja una forma simple, por ejemplo un rectángulo redondeado, con la herramienta de rectángulo (pero puede tener cualquier forma).

2. Haz clic sobre el icono APLICAR NOMBRE en la barra de información de la HERRAMIENTA DE SELECCIÓN y ponle el nombre "forma".

3. Haz clic sobre el botón COPIAR FRAME para crear un segundo frame clave. Modifica la forma según lo desees. Puedes ajustarla utilizando cualquiera de las seis formas de animación descritas anteriormente en este capítulo.

4. Pulsa el botón de VISTA PREVIA DE ANIMACIÓN FLASH para visualizar la animación.

Por defecto, el tiempo de duración de cada frame clave dura medio segundo. Para producir una animación más larga, ve a la sección "Duración de frames para película Flash y pasos intermedios", que se encuentra más adelante en este capítulo.

No estás limitado a incluir un solo objeto en movimiento por frame clave, puedes tener todos los objetos que quieras en cada frame clave. Sólo tienen que pasar por algún tipo de transformación en el siguiente frame clave (y todos tienen que tener un nombre) para que sean animados.

Aquí te mostramos otro ejemplo.

El primer frame clave tiene algo de texto simple y una forma simple dentro de un rectángulo estático.

En el siguiente frame clave, el texto se ha ampliado y oscurecido, el rectángulo azul se ha girado 90 grados y la transparencia se ha alternado para ser en la mayor parte transparente.

Así es como se construye una animación.


Frame clave 1 Pasos intermedios producidos por MAGIX Web Designer 6

Frame clave 2

En esta animación, el objeto de texto crece y simultáneamente el rectángulo redondeado gira y desaparece.

Exportación de un archivo Flash

Para exportar una animación como archivo Flash:

Selecciona ARCHIVO > EXPORTAR ANIMACIÓN y luego escoge Flash en GUARDAR COMO

TIPO.

O pulsa el botón EXPORTAR FLASH ANIMADO.

Con esto el archivo SWF acabado se guardará en la ubicación indicada.

Vista previa de un objeto flash en MAGIX Web Designer 6.

Para visualizar la animación tal como se verá en la página web, haz clic en el botón de VISTA PREVIA DE ANIMACIÓN FLASH y se abrirá un navegador con la vista previa de la animación.

La página de vista previa te mostrará la animación final e información útil como las dimensiones de la animación, tamaño del documento, etc. También incluye instrucciones simples sobre cómo insertar la animación en una página web.

Inserción de un objeto flash en MAGIX Web Designer 6.

Para aquellos que utilicen MAGIX Web Designer 6 puedes arrastrar el archivo Flash hasta la página web para insertarlo en el sitio web. Se creará automáticamente una imagen


estática de marcador de posición y se colocará en tu página. Haz una vista previa de tu página web y verás la animación Flash en funcionamiento.

Como alternativa, puedes crear un objeto de marcador de posición de forma manual. En tu página web, crea un objeto marcador del lugar, puede ser algo como un simple rectángulo o una imagen. Posiciona y ajusta el tamaño de tu marcador de lugar

A continuación, en el diálogo de PROPIEDADES WEB (Ctrl+Shift+W), selecciona la pestaña MARCADOR DE LUGAR y las opciones de navegación REEMPLAZAR CON FLASH para localizar el archivo .SWF requerido. Haz clic en APLICAR.

Ahora, cuando realices la vista previa de tu página web, el marcador de lugar es reemplazado por la animación flash.

Con cualquiera de las opciones mencionadas anteriormente, el archivo .swf se copia en la carpeta de soporte junto con tu archivo .xar, de forma que haya una copia del archivo con el archivo .xar. Por lo tanto, si luego cambias la animación y exportas un archivo .swf actualizado que quieras utilizar en su lugar, o bien busca el nuevo archivo .swf con Herramientas > Propiedades web > Pestaña Marcador de posición o reemplaza manualmente el archivo en la carpeta de soporte con el archivo actualizado.

Consulta la sección Carpetas de soporte (en la página 76) del capítulo Trabajar con documentos para más información.

Inserción con otra herramienta de autoría web

Para posicionar tu animación SWF en tu HTML, haz clic en el enlace VER HTML en la pantalla de vista previa de flash para obtener el código que luego puedes pegar en tu página web con ayuda de tu editor HTML preferido.

Nota: Debes cambiarle el nombre al archivo SWF en el código para que coincida con el nombre actual de tu archivo exportado SWF. También debes colocar tu archivo SWF en el mismo directorio de tu página web para que funcione tu código. Si deseas colocar el archivo SWF en otro directorio, deberás cambiar el código HTML.

La galería de frames

Para abrir la GALERÍA DE FRAMES, selecciona "HERRAMIENTAS > GALERÍAS >

GALERÍA DE FRAMES", o haz clic en el ícono de la GALERÍA DE FRAMES en la barra de herramientas de las GALERÍAS.


Una galería de frames típica. El frame 3 está seleccionado y por eso está visible.

Este muestra una lista de los frames claves en tu documento. Para visualizar cualquier frame clave, haz clic sobre su nombre en la galería.

La GALERÍA DE FRAMES muestra los frames de arriba hacia abajo. El primer frame está primero en la lista y cada frame que añadas aparecerá al final de la lista. Puedes re-ordenar los frames arrastrándolos hacia la posición que desees en la lista. La galería tiene varios botones para realizar las operaciones más importantes como crear un frame nuevo, borrar o copiar un frame seleccionado (éste será agregado al final).

El orden de los frames es inverso al orden de las versiones anteriores del Web Designer.

El botón PROPIEDADES es muy importante ya que muestra el diálogo de las PROPIEDADES

DE ANIMACIÓN, que controla muchos aspectos, no sólo de la animación seleccionada, sino que también de la animación completa.


Diálogo de las propiedades de animación

Otra forma de visualizar el diálogo de las propiedades de la animación es hacer doble clic sobre el nombre de un frame en la galería de frames.

Los botones TODOS LOS FRAMES VISIBLES (ícono de un ojo) y EDITAR

TODOS LOS FRAMES (flecha), que se encuentran en la galería de frames son muy útiles porque te permiten visualizar o editar todos los frames al mismo tiempo.

Esto es particularmente práctico para cuando quieras seleccionar objetos que se encuentran en varios frames.

Nota: cuando copies un frame, siempre copiará el frame seleccionado y lo colocará como último frame. Para insertar un frame nuevo entre, por ejemplo, el frame 4 y el 5, selecciona el frame 4, haz clic en el botón COPIAR, y luego arrastra la nueva copia desde el final a la posición deseada entre los frames 4 y 5.

Nota: Puedes elegir el nombre que quieras para los frames. No tienen que llamarse Frame 1, Frame 2, etc. Las animaciones siempre se reproducirán siguiendo el orden de los frames de arriba hacia abajo, no importa qué nombre tengan.

Copiar objetos

Puedes copiar objetos de un frame a otro de la forma usual (copia el contenido, selecciona el nuevo frame y luego pégalo al nuevo frame). La opción "Editar > Pegar en lugar" ("Ctrl +

+ V") es muy práctica para cuando quieras ejecutar esta acción, ya que siempre se pegarán los objetos en la misma posición que el lugar de donde los copiaste pero en el nuevo frame.


Cuando copias un objeto, el nombre se copia junto a él, pero asegúrate de que no haya otro objeto con el mismo nombre porque sino surgirán errores.

Fotos

Como los documentos en Flash están compuestos por formas vectoriales, y éstos se transforman fácilmente, los documentos pueden ser muy pequeños. Se pueden integrar fotos y mapas de bits a las animaciones en Flash, pero al menos que seas especialmente cuidadoso se convertirán en documentos de animación muy grandes. Puedes realizar 5 de las 6 transformaciones centrales sobre mapas de bits y fotos (puedes mover los objetos, cambiarles el tamaño, aplastarlos, rotarlos y hacerlos desaparecer).

Los documentos en Flash pueden incluir imágenes en PNG y JPEG, tal como los documentos .xar. Si mantienes el tamaño y la resolución bajas podrás crear animaciones pequeñas en Flash con fotos. La mejor forma de incorporar fotos en JPEG con el tamaño más pequeño posible y con la compresión más alta que puedas aceptar.

Afortunadamente es fácil guardar imágenes en JPEG desde el MAGIX Web Designer 6 en el tamaño, resolución y con la compresión que desees, y hasta tienes una vista previa interactiva en la que podrás ajustar la compresión y ver el resultado de forma inmediata.

Si sueltas un documento JPEG sobre la animación y le cambias el tamaño, esto no reducirá el tamaño del documento en JPEG, sino que se reducirán sus dimensiones (y por ende se incrementará la resolución). En este respecto el programa Flash se comporta tal como el MAGIX Web Designer 6 ya que integra (embed) la resolución total de la imagen JPEG original a la animación para que puedas acercarte a ella con el zoom. Por esta razón es muy fácil calcular el tamaño estimado de cualquier animación que contenga fotos en JPEG; es aproximadamente la suma de los tamaños de todas las imágenes JPEG integradas a la animación (la GALERÍA DE MAPA DE BITS te mostrará el tamaño de todas las fotos y mapas de bits integrados a la animación).

Cuando realices una transición (tweening) para los mapas de bits o para una foto, sólo se guarda una copia del mapa de bits en el documento en Flash, por lo que puedes hacer transformaciones en un mapa de bits que no requieran mucha memoria. En otras palabras, sólo porque aparezcan el mapa de bits en los frames 1, 2 y 3 de tu animación, esto no quiere decir que existan tres copias del mapa de bits integrados al documento en Flash.

Mapas de bits en otros formatos que el JPEG

Hay otros tipos de formatos de mapas de bits como, por ejemplo, los formatos BMP, TIFF o PNG que en general generan documentos más grandes y por ende menos adecuados para usarlos en las animaciones en Flash (la compresión JPEG es mucho mejor que la PNG). Sin embargo, si incluyes una imagen PNG de baja resolución (una imagen de 96 dpi o menos - la línea de estado te muestra la resolución de cualquier imagen seleccionada), permanecerá como imagen PNG en el archivo flash. Las imágenes con una resolución más alta (>96 dpi) serán convertidas a JPEG (JPEG transparente, si fuera necesario).

Puedes controlar la compresión utilizada para la conversión automática a JPEG si utilizas la barra deslizante de la pestaña OPCIONES FLASH en el diálogo de PROPIEDADES DE


ANIMACIÓN. El valor de compresión más común es de un 75% pero puedes modificar la calidad, luego visualizar la animación en una vista previa y rápidamente ver el tamaño y la calidad que hayas guardado.

Los mapas de bits con 256 colores o menos (como los GIF) no se codifican como JPEG y se integran a la animación utilizando una compresión PNG, que usualmente es la mejor tipo de compresión para este tipo de imágenes.

Calidad de mapas de bits

El programa Flash Player versión 8 y las versiones siguientes tienen una calidad más alta de visualización de los mapas de bits. Es particularmente evidente cuando rotas y cambias el tamaño de los mapas de bits y las fotos, mientras que en las versiones más viejas se reproducen las imágenes de forma pixelada y con movimientos menos fluidos.

Puedes ver qué versión tienes del Flash Player si haces un clic derecho sobre cualquier animación en tu navegador web y mira el menú "Acerca de" (About).

Te recomendamos que exportes tu animación en Flash como versión 8 si estás utilizando fotos o mapas de bits. Puedes controlar esto en la pestaña OPCIONES FLASH del diálogo de PROPIEDADES DE LA ANIMACIÓN.

Duración de frames para películas Flash y pasos intermedios" (Movie frame rate and tween steps)

Las animaciones en Flash se reproducen a un ritmo prefijado. Cuánto más rápido sea el ritmo (frame rate o duración de cada frame) de los frames, mejor fluirá la animación aunque


el archivo en Flash será más grande. Las animaciones de MAGIX Web Designer 6 tienen por defecto 24 frames por segundo pero puedes cambiar el ritmo si quieres.

Cuando creas un nuevo frame clave, puedes determinar el tiempo de duración entre un frame y el siguiente. Por ejemplo, si has definido como tiempo de duración de un frame a medio segundo, esto significa que la animación tardará medio segundo en pasar de un frame clave a otro. Si tienes el ritmo de la animación prefijado a 24 frames por segundo, esto quiere decir que el MAGIX Web Designer 6 generará 11 pasos intermedios en la animación en Flash; que son 12 frames en total. (Estos frames intermedios nunca serán vistos en MAGIX Web Designer 6 ya que sólo se generan cuando creas un archivo Flash).

La galería de frames siempre te mostrará el tiempo de duración de cada frame clave. En este ejemplo, tenemos tres frames con un tiempo de duración de 0,5 segundos para cada uno, es decir, la animación completa dura 1.5 segundos antes de que se vuelva a repetir.

Para crear un efecto de transición (tween effect) más largo (en otras palabras, hacer la animación más lenta) tienes que incrementar el tiempo de duración utilizando el diálogo de PROPIEDADES DE ANIMACIÓN.

La forma más fácil de modificar el tiempo de duración de cualquier frame es hacer doble clic sobre el nombre del frame que quieres cambiar, y se abrirá el diálogo. Introduce el tiempo de duración en segundos que tu quieras y pulsa Aceptar o Aplicar.


Recortar y cortar

Quizás más adelante quieres crear animaciones en Flash como las que se pueden ver en la web, con frases o fotos que se muevan de un lado a otro.

Para crear un animación como esta, tienes que cambiar el tamaño de la página en MAGIX Web Designer 6 al tamaño que deseas tener para la animación en Flash. Por ejemplo, si quieres un banner en Flash que tenga 468 píxeles de ancho y 60 píxeles de alto, tienes que ajustar el tamaño de la página de tu documento de animación a 468x60. Para cambiar el tamaño de la página ve a PESTAÑA DE PÁGINA en el DIÁLOGO DE OPCIONES (en la página 337) (o selecciona "ARCHIVO -> OPCIONES DE PÁGINA") e introduce los valores en los campos "ancho" y "alto" respectivamente.

Cuando exportas o realizas una visualización previa, la animación en Flash se ajustará automáticamente al tamaño de la página que ya habías determinado. Por ello, es muy fácil arreglar tu animación para que los objetos entren y salgan de la animación visible. Por ejemplo, si colocas un objeto animado a la izquierda de la página en un frame clave (key frame) y a la derecha de la página en el próximo frame clave, el objeto se verá entrar del lado izquierdo del diseño para desaparecer por el lado derecho.

Nota: Si abres documentos más antiguos creados con versiones anteriores de Xara Xtreme, no cortarán la página (el tamaño de la página era enorme), en vez de ello los cortarán al tamaño del dibujo. Puedes controlar esto en el diálogo de propiedades de animación.


Configurando el área para guardar como Dibujo creará una animación flash que sólo sea tan grande como debe ser, por ejemplo de igual tamaño que los límites de la animación. Esto puede ser útil si no necesitas un tamaño de página específico.

Velocidad de la animación

Cuando crees un nuevo frame clave, tendrá por defecto una duración de medio segundo. Por lo tanto la animación de ese frame clave al siguiente tardará medio segundo. Cuanto más larga sea la duración configurada para la animación, más lenta será su reproducción. Para configurar el tiempo de duración para cada frame, primero selecciona el frame que necesitas en la GALERÍA DE FRAMES (haz clic sobre él), y luego haz clic sobre el botón de PROPIEDADES DE ANIMACIÓN (simplemente haz doble clic sobre el nombre del frame).

Si configuras la opción "Mostrar este frame por" a 2 segundos, significa que la animación tardará 2 segundos en pasar de este frame clave al siguiente.

Nota: el diálogo de PROPIEDADES DE ANIMACIÓN es del tipo no modal (non-modal), lo puedes tener siempre presente en la pantalla. Si presionas el botón APLICAR en lugar de pulsar "Aceptar", el diálogo se quedará en pantalla. Los contenidos serán actualizados a medida que vayas seleccionando los diferentes frames, y puedes configurar distintos tiempos de duración para cada uno de ellos.


Fluidez de la animación (smoothness)

Los frames de las películas de Flash se reproducen a un ritmo constante. Cuanto más rápido sea el ritmo de reproducción (frame rate), más fluida será la animación. Las animaciones de MAGIX Web Designer 6 tienen por defecto 24 frames por segundo. Para cambiar el ritmo selecciona la pestaña OPCIONES FLASH del diálogo de PROPIEDADES DE

ANIMACIÓN.

La pestaña "opciones Flash" en donde puedes cambiar la velocidad de la película, así como también la versión de la exportación en Flash.

Nota: cuanto más rápido sea el ritmo (frame rate) del frame, más grande será el archivo resultante en Flash. Si tu animación consiste mayormente en objetos que aparecen y desaparecen, con relativamente pocos movimientos rápidos, entonces puedes reducir el tiempo de duración a menos de 24 frames por segundo. Si tienes mucha acción con movimientos rápidos, quizás sea necesario aumentar el ritmo, pero raramente es necesario tener más de 50 frames por segundo.

Rotación

MAGIX Web Designer 6 genera los frames intermedios (tween frames) de forma automática, haciendo un cálculo de cómo deben transformarse las formas de un frame al otro. Pero a veces no es posible saber exactamente qué tipo de rotación es necesaria.


Como en este caso. Supone que quieres crear una transición (tween) entre la primera cara del reloj y la segunda:

Seguramente esperas que las agujas se muevan en dirección a las agujas del reloj pero también podrían moverse en sentido contrario:

Es más, incluso podrían rotar de otras formas también. El ejemplo de arriba asume que la aguja se mueve de un extremo a otro, pero también podrías crear una rotación que vaya en "línea recta", (ver gráfico):

Si miras detenidamente, la aguja rota sobre su centro y no de un extremo a otro, y el punto central se mueve en línea recta de un frame clave al siguiente. Por defecto el MAGIX Web Designer 6 hace rotar a los objetos de esta forma.

La función de rotación

Para que la rotación sea sobre otro punto puedes añadir la palabra clave "rotar" enfrente del nombre del objeto (ver abajo en Galería de nombres). O puedes usar la combinación "rotar +" para hacer que la rotación vaya en dirección a las agujas del reloj o introducir la combinación "rotar -" para que vaya en contra de las agujas del reloj.

Vuelve al ejemplo de animación de la página anterior con dos frames claves en donde la aguja del reloj se mueve de las 12 a las 8. Si introduces la combinación de palabras "rotar + aguja" al objeto aguja, harás que la animación mueva la aguja en dirección a las agujas del reloj (como en un reloj real). En cambio, si le colocas lacombinación de palabras "rotar - aguja", ésta se moverá en dirección contraria a las agujas del reloj.

Si no has insertado un comando especial para la rotación, entonces se generará un movimiento de transición (tween) con el trayecto más corto entre los objetos de un frame a otro (rotando sobre el centro). Si introduces un comando de rotación para el objeto con nombre, se calculará el punto de rotación necesario para generar la animación.

Nota: no es posible rotar un objeto 360° entre frames claves si el punto de rotación no se encuentra en el centro. Por ejemplo, para crear una rotación "completa" (que dé toda la


vuelta) de las agujas del reloj en el ejemplo de arriba deberías crear un frame clave intermedio.

Grupos

Los grupos son tratados de forma especial por el programa cuando se crean animaciones. Para que no tengas que asignarle un nombre a cada parte individual de un grupo, puedes colocarle un nombre a todo el grupo, luego podrás copiar el grupo al frame clave siguiente. MAGIX Web Designer 6 animará el grupo completo de un frame clave a otro. Y podrás aplicar las transformaciones normales al grupo (como cambiar el tamaño, rotar, aplastar pero no podrás crear una transparencia para el grupo; ver próxima página).

Si quieres que algunos miembros del grupo se muevan de forma diferente que el resto del grupo, entonces estos objetos deberán tener un nombre distinto ("Ctrl + haz clic para seleccionar un objeto dentro del grupo, y luego colócale un nombre).

Nota: Si quieres realizar cambios a algunos componentes del grupo, primero tendrás que "desagrupar" el grupo, y luego tienes que re-agrupar los objetos nuevamente:

• debes volver a aplicar el nombre al nuevo grupo (selecciona el grupo, luego haz doble clic sobre el nombre en la GALERÍA DE NOMBRE).

• No debes cambiar el orden de los ítems del grupo. • No debes añadir o quitar ítems del grupo.

Transparencia en un grupo

Si quieres que un objeto agrupado se vaya desvaneciendo en la animación, debes aplicarle una transparencia a cada objeto del grupo individualmente. Hay dos formas de hacer esto:

• Selecciona cada objeto del grupo y ajusta su transparencia. • O desactiva la opción HACER GRUPOS TRANSPARENTES EN SU CONJUNTO en el diálogo

de OPCIONES ("Herramientas > Opciones, luego ve a la pestaña GENERAL. Si haces esto, cuando ajustes la transparencia del grupo en conjunto, MAGIX Web Designer 6 aplicará la transparencia a cada ítem individual del grupo, en lugar de realizar una transparencia a todo el grupo en su conjunto.

¿Qué funciones de MAGIX Web Designer 6 son compatibles con Flash?

La renderización de vectores en Flash es relativamente primitiva, comparada con la del MAGIX Web Designer 6. Por esta razón, no podrás usar las funciones más avanzadas de MAGIX Web Designer 6 como difuminación (feathering), transparencias complejas y tipos de rellenos o sombras suaves. Las líneas (pinceladas) sólo podrán tener un grosor simple y constante, y con extremos redondeados. No se pueden usar líneas con guiones. El grosor mínimo para una línea es de un píxel. Las líneas que sean más finas en MAGIX Web Designer 6 serán representadas en Flash como si tuvieran un píxel de grosor.


Hay dos aspectos a tener en cuenta para cuando realices dibujos que sean compatibles con Flash. Primero, debes limitarte a utilizar sólo aquellas funciones que sean compatibles con el Flash Player. Segundo, cuando crees animaciones sólo podrás utilizar una serie limitada de características a las que se le puedan agregar transiciones (tweens) o a que puedan ser animadas.

Las funciones de dibujo de MAGIX Web Designer 6 que son compatibles con flash :

• Todos los dibujos normales con líneas y formas (aunque el flash es mucho menos preciso que MAGIX Web Designer 6, por eso, a veces, habrán inexactitudes en líneas y formas).

• Los rellenos lisos, lineales, circulares y los rellenos elípticos con gradación de color. • Rellenos con gradaciones de color de varios niveles, incluyendo rellenos lineales y

elípticos. Máximo cuatro fases de color. • Transparencia plana. Sólo tipo mixto. • La transparencia con gradación es compatible con los objetos con relleno de color

plano (sin gradación). Es decir, puedes tener objetos con gradación de color y con transparencia lisa u objetos con color liso y con transparencia con gradación, pero no podrás tener ambos.

• Contornos de grosor constante (trazos de pincel) con extremos redondeados y uniones de línea (los archivos en Flash versión 8 también aceptan otros tipos de extremos y uniones).

• Texto, incluyendo kerning. Puedes utilizar las fuentes que desees. Los contornos de los caracteres de cualquier fuente utilizada se integran (embedded) al archivo en Flash. Esto es mucho más eficiente que la integración de la fuente en los documentos en PDF.

• Texto sobre una curva. Nota: la línea utilizada para la curva deberá hacerse invisible para que la animación funcione.

• Mapas de bits y rellenos de mapas de bits. • Mapas de bits Contoned (coloreados) y rellenos de mapas de bits • Saturación foto, temperatura del color y desenfoque (pero no brillo / cambios de

contraste). • Nubes fractales y rellenos de plasma funcionarán, pero se convertirán en mapas de bits,

lo que no es tan eficiente.

Entonces, mientras algunos efectos de MAGIX Web Designer 6 como, por ejemplo, las sombras blandas, no funcionan en archivos estáticos, éstos se exportan como mapas de bits al archivo flash, de modo que no son muy eficientes y no son adecuados para la animación.

Lo que puede animarse:

Tal como se mencionó al comienzo de este capítulo, éstas son las reglas de oro sobre lo que se puede cambiar de un frame clave al otro:

• Mover: desplazar los objetos de una posición a otra. • Modificar tamaño (scale): aumentar o reducir el tamaño de los objetos. • Aplastar o torcer (squash or skew): aplastar o torcer objetos. • Girar: rotar objetos • Transparencia: ajustar la transparencia general (plana) del objeto. • Transformar color: cambiar el color de relleno (plano) de los objetos. • O cualquier combinación de lo anterior.


Adicionalmente, hay determinados casos especiales de transformaciones de color de foto que son compatibles con flash. Puedes alterar la saturación (así puedes convertir una foto de color completo a una foto en blanco y negro para insertarla), además puedes ajustar el color de la temperatura (caliente / frío) y cambiar el valor de desenfoque. El último caso te permite convertir una foto desenfocada en una foto enfocada. Pero observa que esto sólo funciona con valores de desenfoque, pero no funciona con valores de enfoque. Asimismo, existe una pequeña diferencia en cómo flash desenfoca las fotos. Flash desenfoca la foto completa incluyendo el borde, mientras que el desenfoque en MAGIX Web Designer 6 sólo desenfoca el interior de la foto y mantiene un borde enfocado.

En segundo lugar, otro caso especial: puedes animar el texto en una curva. Esto es especial porque puede utilizarse para mutar el texto sobre una curva en un texto sobre otra curva totalmente diferente. De hecho, lo que hace es mezclar la posición de la letra en un frame clave con la posición de la letra en el próximo frame. Esto puede producir efectos muy interesantes.

Nota: la línea utilizada para la curva deberá hacerse invisible para que la animación funcione.

Objetos sin movimiento

Puedes añadir nuevos objetos simplemente dibujándolos sobre cualquier frame clave. Estos aparecerán en la animación al comienzo del frame y desaparecerán en el próximo, salvo que aparezcan también en el segundo frame. Por lo tanto, la forma más fácil de que un objeto aparezca estático en todos los frames es asegurarse de que esté copiado en todos los frames. La optimización Flash de MAGIX Web Designer 6 es muy eficiente y verás que realizar más de una copia casi no ocupa espacio adicional en el archivo (esto es aplicable para múltiples copias de objetos en diversos lugares).

El color se transforma — el color de la animación cambia

Esto es lo que puedes y no puedes hacer con las transformaciones de color en MAGIX Web Designer 6 Flash:

• Puedes animar simples cambios de color plano de objetos de un frame clave al siguiente.

• Puedes cambiar el color de la línea independientemente del color del relleno. • Puedes cambiar los colores de tono continuo de una foto. • No puedes ajustar la posición de los rellenos con gradación.


Transparencia

Tal como se mencionó anteriormente, puedes ajustar la transparencia plana de los objetos (no las transparencias de grupo), lo que es compatible con Flash (tanto para objetos estáticos como para cambios de transparencia tweening), pero la transparencia con gradación de MAGIX Web Designer 6 no es realmente compatible con Flash. Existe una sola situación en la que puedes utilizar transparencia con gradación y esta es en los objetos con relleno de color plano.

Se puede ajustar y animar la transparencia plana de todo tipo de objetos, formas, textos y fotos.

Es posible aplicar una transparencia con gradación (lineal, circular y elíptica) a los objetos con color plano, pero no es posible animar el cambio de transparencia. Sin embargo, puede animarse el cambio de color (regla seis).

URL en Flash

Para que un objeto en la animación Flash sea un enlace en el que pueda hacerse clic, simplemente selecciona el objeto que quieras utilizar y selecciona HERRAMIENTAS ->

PROPIEDADES WEB (Ctrl + ñ+ W).

Introduce la URL requerida. (Si quieres que el enlace se abra en una nueva ventana o en un nuevo frame del navegador, selecciona el frame web de destino seleccionando el menú desplegable "ABRIR ENLACE EN").

Si quieres que pueda hacerse clic sobre un texto, selecciona la opción RECTÁNGULO

RODEANDO OBJETO. Esto garantiza que aquellos que observan la animación Flash puedan


hacer clic en cualquier lugar sobre el texto (en vez de solamente sobre la forma real de la letra).

Permitir clic en toda la animación En la pestaña PROPIEDADES DE ANIMACIÓN -> OPCIONES FLASH puedes configurar que en una URL se aplique la animación completa. Esto es de gran ayuda para los banner publicitarios, ya que en éstos quieres que se permita hacer clic en cualquier parte de una animación para ir a la dirección web sugerida.

clicTAG Los clicTAG son utilizados con frecuencia por redes de publicidad. En vez de codificar una URL en una animación Flash, el clicTAG permite a una organización insertar su propia URL en la animación, lo que es particularmente útil para rastrear clics de publicidad.

Si necesitas utilizar esta característica, simplemente escribe clicTAG en vez de una URL.

Funciones de Flash avanzadas

Acelerar y desacelerar

En general, los pasos tween están separados en intervalos regulares entre los frame claves, produciendo una animación lineal de un frame clave al otro. Al añadir los símbolos < y > adelante del nombre de objeto, puedes hacer que la velocidad de los objetos se acelere o desacelere. Es decir, que nombrar a un objeto >Nombre significa que comenzará rápido y después irá más lento. Lo opuesto, <Nombre, hará que la animación comience lento y se acelere.

Hasta puedes usarlos en combinación. Si el nombre de un objeto es <>Nombre, el objeto comenzará lento, irá más rápido y volverá a ir más lento hacia el final del periodo del frame. La terminología tradicional de animación denomina esto "easing" porque puedes entrar ("ease in") o salir ("ease out") con facilidad, y la orden <> sería un "ease in/out".

Puedes controlar el grado de aceleración o desaceleración utilizando números del 0 al 9. Esto significa que <2Nombre será una aceleración muy lenta, mientras que <9Nombre será una aceleración extrema. De la misma forma >2 delante del nombre resultará en una desaceleración. Usar el nombre >Nombre (sin número) es lo mismo que >5Nombre.

Ejemplo: en la sección Ejemplos Flash de la GALERÍA DE DISEÑOS (haz clic sobre el botón OBTENER DISEÑOS de la GALERÍA CLIPART) hay un archivo de ejemplo llamado Péndulo. El grupo del péndulo utiliza una combinación de <> y la función de giro. También vale la pena examinar el otro ejemplo llamado "Zoom6.xar".

Funciones Detener e Ir a

Puedes añadir las funciones DETENER o IR A al nombre del frame (separado por un punto y coma) para controlar el flujo de la secuencia. Por ejemplo, si tu primer frame se llama "Frame 1;Ir a Frame 6", entonces la secuencia de la animación saltará al frame 6 al inicio del frame 1. Esto puede producir errores de tween, pero pueden ignorarse. También espera el periodo específico del frame con la función IR A antes de saltar, pero los frames con las funciones IR A o DETENER no realizan tween.


De la misma manera, un nombre de frame con DETENER al final del nombre, interrumpirá la animación cuando llegue a ese frame. ¿Por qué esto es útil? Porque puedes hacer que la animación salte a cualquier otro frame clave con un clic o moviendo el ratón por encima de objetos. Por ejemplo, puede que tengas una animación que espera a que el usuario le haga clic o mueva el ratón sobre un objeto antes de continuar.

Botones que permiten clic y efectos de MouseOver

Puedes hacer que la secuencia de animación salte a cualquier otro frame clave haciendo clic en un objeto o simplemente moviendo el ratón por encima de cualquier objeto.

Para hacer esto, selecciona el objeto que quieras usar como disparador, abre el diálogo de

PROPIEDADES WEB (Ctrl+Shift+W) y en la pestaña ENLACE selecciona la opción SALTAR A

FRAME.

Si quieres que el salto ocurra simplemente moviendo el cursor sobre un objeto, selecciona la pestaña MouseOver en lugar de la pestaña Enlace y selecciona de la opción similar "SALTAR A FRAME".

Ahora en tu animación, si haces clic en el objeto o pasas el cursor del ratón por encima, la animación llevará al nuevo frame y seguirá desde ahí. Fíjate en el ejemplo del archivo "Río Támesis" en la GALERÍA CLIPART. Esto utiliza una función Ir a para crear un loop del frame 4


al 3 y una redirección URL del frame 1 si haces clic sobre el enlace Volver a reproducir de la esquina.

"Ctrl + + W" es una forma rápida de abrir el diálogo de Propiedades Web.

Resumen de animación de MAGIX Web Designer 6 Flash

• Los frame claves de MAGIX Web Designer 6 son "instantáneas" de tu animación en un momento determinado. MAGIX Web Designer 6 produce automáticamente un transición o tween de objetos de un frame clave al siguiente para producir una animación Flash fluida.

• No existe una línea de tiempo. Por lo contrario, la GALERÍA DE FRAMES te muestra tus frames claves instantáneos en el tiempo (de arriba hacia abajo). Haz clic sobre el nombre del frame para ver y editar ese frame clave.

• Si configuras la visualización de frames en MAGIX Web Designer 6 en 2 seg., entonces animar objetos llevará 2 segundos desde su posición al inicio de un frame clave a la posición de inicio del siguiente frame clave. Utiliza el diálogo PROPIEDADES DE

ANIMACIÓN para configurar el tiempo de visualización del frame. • Para indicar a MAGIX Web Designer 6 los objetos a los que debe aplicarse la transición

o tween entre un frame y el siguiente, debes nombrar el objeto que deseas utilizar; para cada objeto nuevo que quieres animar, haz clic en el botón NOMBRES en la barra de información de la herramienta de selección y nómbralo (o selecciona el menú HERRAMIENTAS> NOMBRES..). El objeto debe tener exactamente el mismo nombre que en los frames siguientes.

• Cuando creas un frame clave nuevo (instantánea) , generalmente lo realizas copiando el frame actual, lo que copia todos los objetos al nuevo frame junto con sus nombres. A continuación mueve los objetos como corresponda.

• Todos los demás objetos (no nombrados) aparecerán estáticos mientras que dura el frame clave (periodo de visualización).

• Puedes mover, ampliar, reducir, girar, estirar, alterar los colores o la transparencia entre los frames de MAGIX Web Designer 6. Transformar los objetos es muy eficiente.

• Existe un frame rate general para toda la película Flash. Cuantos más frames Flash por segundo, más grande será el archivo Flash y más fluida la animación.

• Como cada frame Xtreme es una instantánea de toda la animación, todos los objetos que deben aparecer en la instantánea deben también aparecer en el frame. No puedes hacer una transición de un objeto del Xtreme frame 1 al frame 3 de Xtreme sin que aparezca en el frame 2.

• Puedes cambiar las formas, el texto o las fotos según lo permiten las seis reglas de transformación descritas anteriormente (mover, cambiar de tamaño, aplastar/torcer, rotación, transparencia plana y cambio de color). Si cambias la forma de cualquier otra manera, esto no funcionará.

• La animación Flash depende de las dimensiones de la página que has especificado en MAGIX Web Designer 6.


Crear GIF animados

Los GIF animados son una forma alternativa de mostrar secuencias animadas en la web. Se emplea una tecnología más antigua y mucho más simple que tiene algunas ventajas e inconvenientes.

Un GIF animado es un archivo GIF que contiene una secuencia de imágenes, como si fueran frames de una película. Cada MAGIX Web Designer 6 es un frame en la animación final, como en un folioscopio.

Las ventajas:

• Todos los navegadores pueden reproducir animaciones GIF, no es necesario ningún plugin adicional como en el caso de las animaciones flash. Esto conlleva tiempos de carga cortos y un aumento de la compatibilidad de tus páginas.

• La animación GIF se utiliza como imágenes normales, no es necesario ningún código HTML adicional como al incrustar animaciones flash.

Los inconvenientes:

• En los GIF animados no se pueden insertar transiciones "tween" entre los frames. Esto significa que los frames de tu animación MAGIX Web Designer 6 se traducen 1:1 a los frames GIF resultantes. Si quieres tener animaciones fluidas como en flash, tienes que utilizar numerosos frames.

• GIF es un formato Bitmap y no un formato vectorial como Flash. Produce archivos de salida mucho más grandes, incluso para formas geométricas o texto.

• La profundidad de color máxima es de 256 colores. • Las funciones de flash avanzado como el flujo de la secuencia (Detener/Ir a), los vínculos

con URLs o la aceleración no están disponibles.

No obstante, y gracias a su simplicidad, los GIF animados siguen siendo muy popular para banners publicitarios o como imagen de avatar en foros o mensajes instantáneos.

Abrir un documento de animación

Para crear un GIF animado, primero debes abrir un documento animado. Para realizar esto, escoge Archivo > Nuevo > Animación. Después tendrás acceso a la galería de FRAMES.

Crear una animación

Para crear un GIF animado:

1. Escoge Herramientas > Galerías > Galería de frames. O haz clic sobre el símbolo de la galería de FRAMES en la barra de GALERÍAS.

2. Dibuja lo que quieres que aparezca en el primer frame. 3. En la galería de FRAMES, haz clic en NUEVO para crear el próximo frame.


4. Establece el fondo y los puntos de superposición. 5. Crea los objetos que quieres que aparezcan en este frame. 6. Repite los pasos 3 a 5 hasta haber creado la secuencia de frames.

Exportar la animación

Para guardar la animación, escoge Archivo > Exportar GIF animado.

Propiedades de GIF animados

Para modificar los propiedades de la animación, haz clic sobre un frame en la galería de

FRAMES y selecciona PROPIEDADES. Podrás cambiar las opciones detalladas más adelante.

La pestaña de frames

En la pestaña de FRAME puedes fijar:

• NOMBRE: el nombre de este frame. Esto es un simple recordatorio para ti, puesto que no se exporta con el GIF animado.

• FONDO: si está establecido, el frame cubrirá todos los frames previos. Esto es útil cuando quieres crear un fondo y después crear una animación sobre ese fondo. Con frecuencia, el primer frame de la animación es el frame de fondo. Si el primer frame no es el frame de fondo, el GIF animado usa el fondo de página como fondo.

• SUPERPOSICIÓN: si esta opción está configurada, el frame se superpondrá con el frame previo.

• RETARDO LOCAL: establece la duración que el frame tendrá en la animación. • VER FRAME: si está activado, el frame se mostrará en la animación.

Opciones flash

Aquí hay varias opciones para animaciones flash, la mayoría de los cuales se describen arriba.

• Enlace que se aplicará a toda la animación (en la página 303) • Velocidad de vídeo flash (en la página 298) • Calidad JPEG (en la página 294) • Área a guardar (en la página 296) Colores de animación

En la pestaña COLORES DE ANIMACIÓN puedes configurar los colores utilizados en la animación:

• COLORES DE PALETA: fija los colores de paleta favoritos para el GIF animado. • CANTIDAD DE COLORES DE PALETA: esta opción está disponible si se utiliza una paleta

optimizada. Para gráficos simples puedes reducir la cantidad de colores de la paleta. De esta forma se creará un archivo más pequeño sin pérdida de calidad. Es posible que debas experimentar un poco para encontrar el balance óptimo entre tamaño de archivo y calidad.

• DITHERING: selecciona uno de los tipos de dithering.


• TRANSPARENCIA: escoge esta opción para que las partes de un mapa de bits que no contienen objetos se vuelvan transparentes.

Animación: repeticiones y velocidad

En la pestaña ANIMACIÓN puedes modificar la tasa de la animación y la frecuencia:

• LOOP: aquí determinas la cantidad de repeticiones. • MOSTRAR CADA FRAME DURANTE: introduce aquí un valor cuando quieras obtener una

pausa igual entre cada frame de la animación. Utiliza la pestaña "Frame" para establecer distintas pausas para frames individuales (descrito anteriormente). Se indicará "Muchos" cuando la animación contenga más de una duración.

Vista previa en el navegador

Puedes seleccionar opciones adecuadas para los gráficos y después cargarlas en tu navegador para poder hacer una vista previa:

• OPCIONES DE FONDO: modifica el fondo del GIF animado para ver cuál da el mejor resultado.

• INFORMACIÓN ADICIONAL: la página de vista previa contendrá información útil como, por ejemplo, tiempo de descarga potencial si se coloca en una página web.

• VISTA PREVIA: pulsa este botón para lanzar una vista previa en tu navegador web.

310 Imprimiendo

Imprimiendo

Mostrar bordes de impresión

El menú Ventana > Mostrar bordes de impresión muestra una línea amarilla y roja alrededor de la página (no se imprime) que indica los márgenes y bordes de impresión. Los límites de la página están señalados con un rectángulo rojo. El área de impresión está establecida por los márgenes de la impresora seleccionada actualmente. Algunas impresoras te permiten ajustar los márgenes, pero muy pocas te dejan imprimir hasta el borde de la página.

Si algún objeto de la página se encuentra fuera del rectángulo rojo, es muy probable que no se imprima.

Seleccionar y configurar una impresora

Archivo > Configuración de impresora. Esta opción abre el diálogo estándar de CONFIGURACIÓN DE IMPRESIÓN de Windows:

Al seleccionar una impresora, también se selecciona el tamaño de papel y su orientación. Ten en cuenta que este es el tamaño y la orientación de las hojas en la impresora. No es lo mismo que el tamaño/orientación del documento. VERTICAL imprime la hoja sin girarla. HORIZONTAL imprime girando la hoja 90%. (Estos botones son duplicados del diálogo de

OPCIONES DE IMPRESIÓN, descrito a continuación). Recomendamos no modificar la configuración por defecto de los botones HORIZONTAL/VERTICAL.

Por favor, ten en cuenta que no podemos darte consejo sobre la instalación o configuración de impresoras porque estas son operaciones de sistema estándar. Si tienes dificultades, contacta con el proveedor de tu impresora u ordenador.

Imprimiendo 311

El botón de propiedades

Esto muestra un diálogo que te permite establecer las opciones para el tipo de impresora seleccionada. MAGIX Web Designer 6 no controla este diálogo.

Botón de red

Si tu ordenador está conectado a una red, este botón te permite compartir impresoras de la red. MAGIX Web Designer 6 no controla este diálogo.

El diálogo de impresión

Escoge Archivo > Imprimir (shortcut Ctrl+P)

Botón imprimir

Una vez que has seleccionado las opciones requeridas, haz clic para imprimir.

Botón Imprimir...

Esto abre el diálogo de CONFIGURACIÓN DE IMPRESIÓN (descrito anteriormente).

Botón opciones

Esto abre el diálogo que te permite configurar opciones adicionales de impresión. Las opciones se describen más adelante.

312 Imprimiendo

Páginas

TODAS LAS PÁGINAS: imprime todas las páginas del documento.

PÁGINA/S ACTUAL/ES: imprime la página o doble página actualmente seleccionada.

OBJETOS SELECCIONADOS: Esta opción está disponible si se selecciona cualquier objeto del documento. Si está activada, sólo se imprimen los objetos seleccionados. Observa que otros objetos dentro de los límites de los objetos seleccionados no se imprimen, sólo se imprimen los objetos que estén realmente seleccionados.

Los objetos en las capas del fondo y las capas guía nunca se imprimen. Lee Galería de capas para más detalles.

RANGO DE PÁGINAS: te permite especificar las páginas que deseas imprimir. Puedes escribir números de páginas específicos separados por comas, o introducir un rango de páginas separando los dos números con un guión.

Ejemplos rangos de páginas:

2 sólo imprimirá la página 2.

1,3,5-7 imprimirá las páginas 1, 3, 5, 6 y 7.

2,3,6-8,11-12 imprimirá las páginas 2,3,6,7,8,11 y 12.

La sección Opciones del diálogo te indicará si el rango de páginas que has escrito es aceptado o no.

Imprimir a archivo

Puedes seleccionar la opción IMPRIMIR A ARCHIVO para crear un documento para entregar a una imprenta (si pueden aceptar este tipo de archivo).

Después de activar esta opción, al hacer clic sobre IMPRIMIR, Web Designer muestra el diálogo estándar de Windows para GUARDAR para que puedas especificar un nombre y una ubicación para el archivo.

Los archivos de impresión tienen una extensión por defecto .prn

Copias

Establece la cantidad de copias del documento que quieres imprimir.

Imprimiendo 313

Opciones de impresión: pestaña Salida

Imprimir capas

Hay dos opciones:

• Imprimir TODAS LAS CAPAS DE PRIMER PLANO. • Imprimir solamente las CAPAS DE PRIMER PLANO VISIBLES actualmente.

Ten en cuenta que las capas de primer plano se imprimen, mientras que las capas de fondo nunca se imprimen.

Imprimir como

NORMAL es adecuado para la mayoría de los tipos de documento.

Sin embargo, algunas impresoras no reproducen colores consistentes al imprimir mapas de bits y objetos vectoriales que tienen el mismo color (este es un fallo del driver de la impresora). Esto es visible si los objetos se superponen con mapas de bits o con objetos con transparencia. En este caso, selecciona MAPA DE BITS o MAPA DE BITS ANTI-ALIASED y vuelve a intentar.

La elección entre mapa de bits y MAPA DE BITS ANTI-ALIASED depende de la impresora y la preferencia personal. Algunas impresoras dan un mejor resultado cuando el anti-aliasing está desactivado, especialmente al imprimir líneas delgadas. En general, el uso de

314 Imprimiendo

anti-aliasing permite imprimir con resolución menor. Por ejemplo, la impresión de un mapa de bits con 150 DPI es generalmente suficiente para todos los usos. Sin anti-aliasing, es probable que se necesite una resolución más alta lo que resulta en una impresión más lenta.

Resolución de transparencia

Al imprimir, los efectos de transparencia de MAGIX Web Designer 6 se crean utilizando mapas de bits.

Esta opción controla la resolución de esos mapas de bits cuando se envían a la impresora. La opción automática es adecuada para la mayoría de los dibujos y significa que MAGIX Web Designer 6 selecciona automáticamente una resolución apropiada para la impresora actual. Esto puede no ser adecuado si se imprime en una impresora con resolución muy alta como dispositivos imagesetting. En este caso, es posible que quieras controlar la resolución de forma manual e introducir el valor deseado.

Ten en cuenta que las impresoras modernas muchas veces aseguran poder imprimir más de 1000 DPI, pero esto no es lo mismo que "píxeles por pulgada", que es lo que ves en tu pantalla. En general, nunca es necesario imprimir a más de 600 píxeles por pulgada y 300 píxeles por pulgada producen en general resultados de impresión perfectamente adecuados, especialmente con anti-aliasing.

Calidad de llenado

Si usas esta opción, puedes escoger cuántos pasos conforman los rellenos con gradación en tu documento al imprimirlo. La configuración NORMAL es adecuada para la mayoría de los casos. Esta opción no puede activarse en el caso de impresoras PostcScript.

Opciones de texto

Si tu impresora tiene problemas para reproducir fuentes, selecciona la opción IMPRIMIR

TODO EL TEXTO COMO FORMAS. Todo el texto se convertirá en formas vectoriales antes de que el documento se envíe a la impresora. Esto puede ser más lento, pero reproducirá exactamente lo que ves en pantalla.

Imprimiendo 315

Opciones de impresión: pestaña "Diseño de la impresión"

Aquí encontrarás una compilación de los efectos más importantes para la optimización de fotos sacadas, por ejemplo, con tu móvil.

La mayoría de las opciones en el diseño de impresión no pueden activarse si has seleccionado las opciones OPTIMIZACIÓN o ADAPTACIÓN AUTOMÁTICA. Recomendamos utilizar estas opciones, porque ofrecen la forma más fácil de imprimir.

Sin embargo, puedes escoger las opciones personalizadas (lee "Individual" más adelante).

Optimización

Tu diseño se moverá al centro de la página y se ampliará o reducirá para adaptarse al tamaño del papel.

Esta opción es la mejor si tienes un diseño grande o pequeño que quieres adaptar al tamaño de una página.

Adaptación automática

Tu diseño tendrá la orientación necesaria, pero Web Designer no cambiará el tamaño. Recomendamos utilizar esta opción si tienes dificultades para encontrar la orientación correcta (existen al menos cuatro lugares en donde puedes establecer la orientación de la página, en algunos drivers de impresora todavía más).

316 Imprimiendo

Esta opción es la mejor si has configurado el tamaño para tu diseño y no quieres que se modifique.

Adaptación personalizada

Te permite controlar la impresión, incluyendo orientación, tamaño y márgenes.

Los botones de ORIENTACIÓN pueden utilizarse para escoger la orientación de la impresión. La escalación puede modificarse utilizando el campo ESCALA. Los campos de margen superior e izquierdo pueden cambiarse (esto establece el lugar en que aparece la esquina superior izquierda de la página en el papel de la impresora).

Los campos ANCHO y ALTURA te ofrecen una forma alternativa de configurar el tamaño de la impresión (cuando cambias un valor, el otro cambiará también para asegurar que la página se imprima con una relación de aspecto 100%).

Adaptación múltiple

Para imprimir muchas copias en una página, escoge MÚLTIPLE, introduce un valor para la cantidad de copias que debe incluir el ancho de la página (hileras) y la cantidad a lo alto de la página (columnas) y la distancia entre cada uno (margen).

Importación y exportación 317

Importación y exportación

Indicaciones generales sobre la exportación e importación

Web Designer ofrece una amplia gama de opciones de importación y exportación.

Primero, es importante saber la diferencia entre guardar y exportar un archivo:

• GUARDAR almacena tu trabajo para que puedas abrirlo posteriormente y continuar trabajando con él. MAGIX Web Designer 6 guarda tu trabajo en un archivo de formato web. Esto sería como el formado de "documento master".

• EXPORTAR convierte a otros formatos compatibles. La exportación te permite utilizar y distribuir tus diseños.

Formatos recomendados

Los formatos de exportación universal que pueden ser leídos por la mayor parte de programas y que son utilizados en la web son los formatos de mapas de bits, GIF, PNG y JPEG. Esto te garantiza que tu documento se verá exactamente igual que en la pantalla de MAGIX Web Designer 6. PNG se recomienda para gráficos en la web y JPEG para fotos.

Importar y exportar formatos de archivo compatibles

Formatos de importación

Es importante que utilices las extensiones de archivo de tres letras de la lista de abajo cuando cargues archivos al MAGIX Web Designer 6.

Formatos de importación de mapa de bits

.Mapa de bits Windows BMP

.CUT Halo CUT (256 colores)

.Formato de imagen DCM Imaging and Communications in Medicine (DICOM)

.DCX DCX

.FAX imagen de fax de un fax recibido o creado con un software de fax

.GIF (Graphic Interchange Format)

.ICO Microsoft Windows Icon (16 colores)

.JPG JPEG Formatos de imagen .JP2, .JPX, .J2C, .J2K, .JPF JPEG 2000. Una versión mejorada del formato JPEG estándar que puede comprimir archivos de imagen realizando una compresión con o sin pérdidas. .HPD, importación .WDP Microsoft Photo HD, también conocido como Windows Media Photo. .PBM UNIX monocromo .PCD PhotoCD .PCT PICT

318 Importación y exportación

.PCX PCX Paintbrush

.PDF (ver importación de un archivo PDF)

.PGM UNIX escala de grises

.PNG PNG

.PPM UNIX color (hasta 24 bit)

.PSD Photoshop (ver importación y exportación de archivos PSD (en la página 322))

.RAS Sun Raster

.SGI (Silicon Graphics Image)

.TGA TrueVision TARGA

.TIF TIFF (RGB, RGBA con transparencias de canal alfa & CMYK) El MAGIX Web Designer 6 es compatible con archivos TIFF de fax (imágenes en blanco y negro. Los faxes con muchas páginas serán importados como páginas múltiples); archivos TIFF con orden de bytes para Mac o PC; TIFF con capas y transparencia (si se guarda desde el Photoshop las reglas para la compatibilidad para el modo de mezcla son las mismas que para los archivos PSD); JPEG en TIFF (la transparencia no es posible en este caso). .XBM X Windows (2 colores) .XPM X Windows (256 colores) .WBMP Wireless Bitmap Image (imagen de mapa de bits inalámbrica). Formato de imagen de mapa de bits en blanco y negro (1-bit) utilizado por los dispositivos móviles. .RAW formato de importación de cámara (ver importación de fotos RAW (en la página 321) para ver una lista de tipos de archivos compatibles).

Formatos de importación EPS

.AI Illustrator EPS

.EPS Illustrator EPS

.EPS CorelDRAW 3 & 4 EPS

.EPS FreeHand 3.0 EPS

.EPS Photoshop EPS (para importar datos de Photoshop a MAGIX Web Designer 6, utiliza archivos en PSD en lugar de en EPS para obtener mejores resultados).

Otros formatos de importación

.ART Xara Studio

.WEB archivos Xara Webster

.AFF Acorn Draw

.CDR CorelDRAW (3, 4 & 5)

.CDT plantilla CorelDRAW

.CMX Corel CMX 5 & 6

.DRW Acorn Draw

.HTM gráficos en páginas en HTML

.WMF Windows Metafile (16 bits)

.EMF/ .WMF Enhanced Windows Metafile

.RTF texto

.WIX para uso interno de Xara

Formatos de exportación

Formatos de exportación para mapas de bits (ver resumen del diálogo de exportación GIF, PNG, BMP y JPEG (en la página 324))


.BMP mapa de bits Windows

.GIF CompuServe GIF

.GIF archivos animados en GIF (ver Creando archivos animados en GIF (en la página 307))

.JPG JPEG PSD Photoshop (ver importación y exportación de archivos en PDF (en la página 322)) .PNG PNG Otros formatos de exportación

.HTML (páginas y sitios web)

.SWF Flash (ver Animaciones en Flash (en la página 283))

.RTF Rich Text Format

.SVG Internet Scalable Vector Graphics

.WIX, .TOC, para uso interno de Xara

Importación de archivos

Para importar un archivo:

• Selecciona "ARCHIVO > IMPORTAR" - Esto normalmente mezcla el contenido del archivo en el documento existente. Con algunos formatos, tendrás la opción de importar el documento a la página actual o insertarlo como nueva página. Con otros formatos se te dará la opción de importar los datos de archivo de forma convencional o añadir un enlace al archivo e incluirlo en tu sitio web publicado.

• O selecciona "ARCHIVO -> ABRIR": esta opción abre el archivo como un nuevo documento.

Con MAGIX Web Designer 6 podrás importar archivos utilizando el método de arrastrar y soltar. Puedes arrastrar un archivo desde tu explorador de archivos a un documento abierto dentro de MAGIX Web Designer 6, y con esta acción estarás importando al documento y quedará colocado en el centro de la página actual. O también puedes arrastrar y soltar el documento desde el Explorador de Windows a una barra o título de barra de la ventana de Web Designer, esta acción abrirá el archivo como un documento nuevo.

Sustitución de archivos de imagen

Puedes reemplazar cualquier imagen cargada o forma rellena con una imagen con las tuyas. Para sustituir una imagen arrastra tu propio archivo de imagen (JPEG, GIF, PNG, BMP) desde el explorador de Windows y suéltalo sobre la imagen que quieres reemplazar. El tamaño de tu foto se adaptará automáticamente para sustituir la foto de la plantilla. La nueva foto permanecerá seleccionada y se activará la herramienta de relleno para que puedas adaptar la posición y el tamaño de la foto si lo deseas.

Importación de un archivo Photoshop PSD

Para importar un archivo PSD, importa el archivo con Archivo > Importar o simplemente arrastra y suelta el archivo psd hasta MAGIX Web Designer 6.


Las capas del archivo PSD y la configuración de visibilidad de la capa se conservarán y se convertirán en capas de MAGIX Web Designer 6. Podrás verlas abriendo la GALERÍA DE

CAPAS.

Consejo: si tienes objetos separados en Photoshop que deseas poder mover y cambiar de forma independiente de otro en MAGIX Web Designer 6, colócalos en capas separadas en Photoshop antes de realizar la exportación.

Importación de PDF

PDF es un formato de vectores gráficos complejos que ha evolucionado durante 10 años o más, y contiene numerosos subformatos y opciones. El PDF fue diseñado como un formato de documento portátil para visualizar e imprimir solamente y no estaba pensado como formato de archivo para la transferencia de datos entre aplicaciones. Sin embargo, MAGIX Web Designer 6 puede cargar la mayoría de los archivos PDF.

El PDF es actualmente la forma recomendada para transferir archivos vectoriales de Adobe Illustrator a MAGIX Web Designer 6. Guarda el archivo como PDF y después importa el archivo resultante en MAGIX Web Designer 6.

Es importante tener en cuenta los siguientes puntos:

• Los archivos PDF de varias páginas se importan como documentos multipágina en MAGIX Web Designer 6.

• El texto en los archivos PDF generalmente está separado en pequeños objetos de texto. Esto no evita la visualización e impresión, pero significa que cuando se lo importa lo que aparece como uno o más párrafos continuos pueden no serlo. MAGIX Web Designer 6 intenta rearmar las líneas de texto en líneas y párrafos de texto editable, pero muchas veces verás que el texto está separado en objetos de texto individuales.

• Para facilitar la extracción de un texto de un archivo PDF, se crea una capa que contiene solamente el texto de esa página del PDF. Utiliza la GALERÍA DE CAPAS para ver esta capa.

• Los archivos PDF hacen un uso liberal del clipping. En MAGIX Web Designer 6 esto aparece como objetos ClipView, por lo que muchas veces es necesario utilizar "Ordenar > Eliminar Clipview" para poder editar los objetos de la página.

Lo que podría no funcionar:

• Muchos archivos PDF incluyen fuentes incrustadas. No es posible extraer e instalar de forma legal estas fuentes en tu sistema. Por lo tanto, si no tienes las fuentes utilizadas en el archivo PDF verás que las fuentes faltantes se sustituirán con fuentes alternativas.

• Los archivos encriptados o protegidos por contraseña no pueden importarse. • Los textos de archivos PDF que utilizan fuentes incrustadas no podrán leerse ni

editarse.

El PDF es un formato altamente completo y muchas veces no puede importarse de forma correcta. La mejor forma de importarlo puede depender del uso que quieras darle. La opción OPTIMIZAR PARA VISUALIZAR intenta que el aspecto del resultado importado sea lo más similar posible al Acrobat, pero puede ser más difícil de editar (podría tener clipviews insertados, por ejemplo). La opción alternativa OPTIMIZAR PARA EDITAR deshace algunas


construcciones que son difíciles de editar de forma manual (por ejemplo, clipviews incrustados).

Importación de foto RAW

Puedes importar archivos RAW desde cámaras digitales utilizando la opción del menú de importación o arrastrando y soltando el archivo en la ventana de Web Designer.

Extensiones de archivo compatibles: *.crw, *.cr2, *.nef,*.mrw,*raf,*.kdc,*.orf, *.dng, *.ptx, *.pef, *.anw, *.x3f.

Exportación rápida de HTML y formatos de gráficos web

Puedes utilizar las opciones dedicadas en el MENÚ ARCHIVO para exportar rápidamente páginas web y gráficos web, sin tener que seleccionar los formatos de una lista completa de los formatos de exportación disponibles al utilizar "ARCHIVO -> EXPORTAR".

• ARCHIVO->EXPORTAR PÁGINA WEB: exporta el presente documento de página web a una ubicación de tu elección en tu ordenador.

• ARCHIVO->EXPORTAR JPEG: exporta la selección o la página actual a un archivo JPEG. • ARCHIVO->EXPORTAR PNG: exporta la selección o la página actual a un archivo PNG.

Para más información, lee el capítulo Primeros pasos.

Importación de imágenes desde una página web.

Puedes importar gráficos directamente desde páginas web de Internet hasta tu documento. Ten en cuenta la diferencia entre esta función, que sirve para cargar todas las imágenes de una página web, y la función de "Importación", que sirve para cargar un solo gráfico desde un disco.

Para importar desde una página web:

1. Selecciona ARCHIVO > IMPORTAR DESDE PÁGINA WEB (o Ctrl + Alt + W). 2. Introduce la dirección de la página web (URL) de la página o del gráfico que desees

importar. Si la URL es una página, todos los gráficos de la página se van a importar. 3. Pulsa IMPORTAR.

Exportación de archivos

Para exportar un archivo:

• Selecciona Archivo > Exportar. • O pulsa Ctrl+ +E.

Se abrirá un diálogo de EXPORTACIÓN. Escoge el nombre para tu archivo y selecciona el formato deseado de la lista desplegable de TIPO DE ARCHIVO. Algunos de los formatos están descritos más abajo.


Exportación como Flash

Puedes exportar un dibujo al formato Macromedia SWF Flash (estático). Esto es más apto para diseños de vectores y puede suministrar un tamaño de archivo mucho menor. Puedes utilizar el SWF en páginas web o importarlo a Macromedia Flash para usar en animaciones Flash.

También puedes crear un Flash animado. Lee Animaciones Flash (en la página 283) para más detalles sobre la exportación Flash.

Exportación como metarchivo de Windows (.wmf)

Word y muchos otros programas pueden leer los archivos en este formato.

Exportación como formato Extended Metafile (EMF)

Las aplicaciones modernas de Windows son compatibles con este tipo de formato de gráficos vectoriales avanzados. Este formato también está disponible para aplicaciones que suministran la opción de menú Pegar especial.

Ten en cuenta que MAGIX Web Designer 6 puede contener características como estilos de relleno avanzados que no pueden representarse en formatos vectoriales como EMF. En este caso, parte delas imágenes se exportarán como mapas de bits. Las partes vectoriales que pueden exportarse como vectores se exportarán como tales.

Exportación como mapa de bits

JPEG, GIF y PNG son formatos universales compatibles con la mayoría de las aplicaciones informáticas modernas. PNG tiene la calidad más alta. JPEG es el mejor formato para trabajos fotográficos, pero puede producir archivos compactos aceptables (puede controlarse la calidad y el tamaño de archivo).

El formato GIF es compatible sólo con 256 colores y, a pesar de que es muy común en muchas páginas web, PNG es un mejor formato. PNG también es compatible con gráficos semitransparentes (utiliza la opción True Color + Alpha), pero esto no es compatible correctamente con Microsoft Internet Explorer (pero sí con los demás navegadores web).

Cuantos menos colores contenga el archivo, más pequeño será y menor calidad tendrá. Sin embargo, al utilizar 256 colores o menos, MAGIX Web Designer 6 te suministra técnicas muy avanzadas para simular una mayor gama de colores para que obtengas resultados de calidad fotográfica utilizando solamente 256 colores o menos.

Importante

Los mapas de bits se emiten con la calidad actual en que los ves, por lo tanto, para obtener la mejor calidad, asegúrate de que la opición "VENTANA > CALIDAD" esté configurada en MUY ALTA CALIDAD.

Exportación de archivos Photoshop PSD

Photoshop es un editor de mapas de bit, por lo que cuando se exporta a un formado PSD todos los objetos vectoriales de MAGIX Web Designer 6 se rasterizan. Puedes seleccionar la resolución (dpi) al exportar.


Siempre guarda tu trabajo en MAGIX Web Designer 6 antes de exportar. Después, si deseas alterar tus objetos originales en el futuro, simplemente carga MAGIX Web Designer 6, realiza los cambios y después exporta nuevamente los objetos requeridos.

Para exportar como archivo PSD selecciona "Archivo -> Exportar" y después ADOBE

PHOTOSHOP en la lista GUARDAR COMO TIPO.

Capas

Las capas se conservan en MAGIX Web Designer 6 cuando exportas en formato PSD. Cada capa se rasteriza como una capa separada en PSD, incluyendo los nombres de las capas. La visibilidad de las capas también se guarda, por lo tanto las capas definidas como "invisibles" en MAGIX Web Designer 6 serán exportadas y guardadas como invisibles en Photoshop. Puedes activar o desactivar las capas en Photoshop utilizando la paleta de CAPAS.

Texto

Puedes exportar texto desde MAGIX Web Designer 6 para que sea un texto editable en Photoshop, pero el texto debe encontrarse en una capa propia (al importar se te preguntará si quieres actualizar los objetos de texto para que sean editables en Photoshop).

El texto que se encuentra en una capa con cualquier otro objeto gráfico se rasterizará en esa capa y no será editable.

Exportación DPI

Podrás configurar el valor DPI de los mapas de bits en el archivo PSD exportado.

Un DPI de 96 es la resolución de pantalla normal de Windows, es decir, que si exportas en 96 dpi el tamaño del 100% en Photoshop será igual que el 100% en MAGIX Web Designer 6.

Para un trabajo de impresión deberías escoger un DPI mayor.

Puedes seleccionar para exportar toda el área de página de MAGIX Web Designer 6 o solamente las áreas con objetos visibles.

Resumen

Para obtener la mayor compatibilidad y posibilidades de edición en Photoshop:

• Coloca las partes de tu dibujo que deseas que permanezcan como capas separadas en Photoshop, en capas separadas en MAGIX Web Designer 6.


• Si quieres que el texto pueda editarse en Photoshop, colócalo en una capa individual sin objetos gráficos.

Resumen del diálogo de exportación JPEG, PNG, GIF y BMP

El diálogo de exportación tiene dos ventanas de vista previa, IMAGEN A a la izquierda e IMAGEN B a la derecha, para que puedas comparar las opciones de exportación alternativas o los tipos de documentos. Haz clic en la ventana derecha o izquierda de vista previa para cambiar la vista previa activada. Encima de la ventana de vista previa se encuentra una lista desplegable que te permite seleccionar uno de los cuatro formatos de exportación más comunes: JPEG, PNG, GIF y BMP.

Una vez que hayas seleccionado la imagen previa A o B podrás elegir entre una larga lista de opciones de exportación utilizando las cinco pestañas situadas debajo de la ventana de vista previa. Algunas opciones como las opciones de paleta solo se pueden aplicar a algunos tipos de documentos como los PNG, y no son relevantes para el tipo JPEG.

Otras opciones de la pestaña OPCIONES cambian dependiendo del tipo de documento, como cuando exportas un JPEG y puedes configurar la calidad requerida.


Entonces, los pasos a seguir para exportar una imagen son:

1. Selecciona el objeto o los objetos en la página que quieres exportar 2. Selecciona el menú Exportar, o pulsa "Ctrl + Shift + E", introduce el nombre del

documento y elige el tipo de documento de la lista desplegable. El tipo de exportación principal mostrará la ventana de vista previa superior.

3. Si así lo deseas puedes cambiar la configuración en el diálogo de vista previa o ignora esta opción si te parecen adecuadas las configuraciones que vienen por defecto.

4. Haz clic en el botón EXPORTAR

Para los formatos más usuales JPEG y PNG, en el paso 2 puedes utilizar directamente las opciones disponibles en el MENÚ ARCHIVO: EXPORTAR JPEG y EXPORTAR PNG. El diálogo de exportación mostrado incluye el botón "Configuración" que te lleva al diálogo que se muestra arriba.

La mayoría de las configuraciones de exportación se guardarán hasta la próxima exportación. Por ejemplo, si ajustas la calidad en JPEG, la próxima vez que exportes un JPEG se acordará de la última configuración de calidad.

Tamaño de imagen exportada Si exportas el tamaño estándar normal es lo mismo que ves en la pantalla con el zoom al 100%. El tamaño de píxel se puede ver en la ventana de vista previa. Puedes ajustar el tamaño del objeto en la página antes de exportar o si introduces un valor de pixel o DPI alternativo en la pestaña TAMAÑO DE MAPA DE BITS.

Controles

Estos botones modifican la vista previa de las imágenes, pero no el archivo para exportar:

• Herramienta de ZOOM: haz clic sobre una vista previa para ampliarla. Shift + clic para reducirla. Arrastra sobre un área de la vista previa para realizar un zoom en esa área.

• Herramienta de DESPLAZAMIENTO: te permite mover la imagen dentro de la ventana de vista previa.

• ZOOM PARA MAXIMIZAR: modifica el tamaño de la imagen de vista previa de forma que se adapte a la ventana.

• ZOOM AL 100%: amplía la imagen a su tamaño completo (100%).

• ZOOM HASTA LA RESOLUCIÓN DE LA IMAGEN (1:1): no tiene ningún efecto en el caso de archivos GIF. Modifica el tamaño de la imagen para que un píxel del mapa de bits sea un píxel en la pantalla. Esto es muy útil para previsualizar el mapa de bits en detalle.

La siguiente herramienta solo es importante para archivos que utilizan menos de 256 colores (pero verás el resultado si has seleccionado la pestaña OPCIONES DE PALETA):


SELECTOR DE COLOR (PIPETA): al mover el cursor sobre la imagen se señalará el color que se encuentra debajo del cursor. Haz clic para seleccionar ese color en la paleta. Después, puedes utilizar los botones de las OPCIONES DE PALETA (descrito a continuación) para modificar ese color.

VISTA PREVIA: el botón de vista previa está disponible en todas las pestañas de este diálogo. Actualiza las ventanas de vista previa para reflejar cualquier cambio que hayas hecho a las opciones de exportación.

Pestaña Opciones de paleta

Esta pestaña te permite modificar los colores de tu imagen para exportar.

Dithering y paleta

Las opciones DITHERING y PALETA solo son aplicables para la exportación de 256 colores o menos y modifican la forma en que la imagen se visualiza, así como su paleta de colores. Se recomienda utilizar siempre la PALETA OPTIMIZADA. Si se configura la opción DITHERING en ninguno, se producirán archivos más pequeños pero que probablemente presentarán líneas. ERROR DE DIFUSIÓN crea resultados con mejor calidad pero también archivos más grandes.

Profundidad de color

Escoge la cantidad de colores que requiere tu mapa de bits. Cuantos más colores, más grande el archivo (generalmente) y mayor la calidad. La opción TRUE COLOR es compatible con hasta 16 millones de colores. TRUE COLOR + ALPHA incluye características de semitransparencia como sombras y transparencias. Este es el formato recomendado para aplicaciones compatibles con archivos PNG de canal alfa.

Si escoges 256 colores o menos, tienes la posibilidad de utilizar transparencia simple (ver a continuación el icono de la copa). Esto no es compatible con píxeles semitransparentes, sino con píxeles completamente opacos o transparentes y, por lo tanto, puede producir bordes dentados.

Colores máximos

Si escoges una profundidad de color de 256 colores o menos puedes controlar exactamente la cantidad de colores que se utilizan en el archivo. Esto suministra un gran nivel de control sobre la calidad versus el tamaño del archivo. Simplemente introduce la cantidad de colores requeridos y pulsa el botón de VISTA PREVIA para ver el resultado.


Botones

Estos botones (excepto FONDO TRANSPARENTE) se aplican cuando se exportan imágenes con 256 colores o menos. Estos archivos se crean con una paleta de colores limitada y estos controles suministran un mayor nivel de control sobre esos colores de paleta. Lee SELECTOR DE COLOR explicado anteriormente para ver cómo seleccionar un color o haz clic sobre un color en la PALETA DE COLORES.

Bloquear un color

Puedes especificar la cantidad de colores que quieres en la paleta de los mapas de bits exportados. Es posible que quieras asegurarte de que estos colores siempre aparezcan en la paleta y, por lo tanto, puedes bloquearlos. Haz clic sobre un color para seleccionarlo y después selecciona el botón BLOQUEAR. Aparecerá un pequeño cuadrado en la esquina izquierda del color para señalar que ese color está bloqueado.

Convertir un color de la paleta en web safe

Si pulsas este botón el color seleccionado cambiará a uno de los 216 colores de la paleta de colores web. Este es un sistema que ha dejado de ser importante o relevante, puesto que todos los ordenadores puedes mostrar millones de colores y restringir los gráficos web a esta paleta limitada no tiene mayores beneficios.

Convertir el fondo de imagen en transparente

Esto hace que las áreas no cubiertas por los objetos seleccionados sean transparentes. Seleccionar esta opción activa automáticamente una entrada transparente en la paleta.

Convertir un color de la paleta en transparente

Convierte esta entrada de color en transparente. Debes tener en cuenta la diferencia entre esta opción, que convierte partes del objeto seleccionado en transparente, y la opción Convertir fondeo de la imagen transparente, que convierte el fondo detrás de los objetos seleccionados en transparentes.

Eliminar un color de la paleta

Borra este color de la paleta. Las áreas del mapa de bits que utilicen el color eliminado utilizarán el color más cercano en la paleta. Cuantos menos colores en la paleta, más pequeño será el archivo de mapa de bits.

Restablecer un color previamente eliminado

Restaura un color eliminado.

Añadir colores de sistema


Añade 28 colores a la paleta. Estos colores son los colores del sistema Windows y una cantidad de colores primarios. Esto garantiza que la paleta incluya una extensión de colores y puede mejorar la calidad de la imagen, especialmente si contiene una amplia gama de colores. Es posible que necesites experimentar con esta opción para obtener los mejores resultados.

Pestaña Tamaño de mapa de bits

En esta pestaña puedes cambiar el tamaño de la imagen para exportar.

Tamaño y resolución del mapa de bits

Puedes modificar el tamaño del mapa de bits cambiando:

• TAMAÑO . Introduce el ancho o alto en uno de los campos. Como la relación de aspecto del mapa de bits está bloqueada, al cambiar una dimensión se cambiará también la otra. TAMAÑO es más adecuado que ESCALA si quieres crear un mapa de bits con un tamaño especial en píxeles.

• ESCALA. (No disponible para JPEG ni PNG). Esto te permite cambiar el tamaño del mapa de bits con un porcentaje. ESCALA es mejor que Tamaño si quieres, por ejemplo, crear un mapa de bits un 50% más grande que el original.

• RESOLUCIÓN. (No disponible para GIF ni BMP). Introduce la resolución en el campo de DPI. Si quieres exportar una imagen para visualizar en una pantalla (por ejemplo, una página web) no necesitas un valor DPI mayor que 96. Los 96 DPI también garantizan que el mapa de bits tenga el mismo tamaño que los objetos en la pantalla (con un aumento del 100%).

Área a guardar

El mapa de bits puede crearse utilizando una de estas áreas del documento:

• PÁGINA: toda el área de la página. • DIBUJO: el área cubierta por los objetos. • SELECCIÓN: el área cubierta por los objetos seleccionados. Solo disponible cuando se

han seleccionado objetos.

Anti-aliasing

El anti-aliasing mejora la apariencia de los gráficos suavizando los bordes dentados:

• CONSERVAR ANTI-ALIASING PANTALLA. El mapa de bits exportado utilizará el mismo posicionamiento que se ve en la pantalla para que conserve el mismo anti-aliasing. Esto puede crear bordes de objetos levemente borrosos porque no se ajustan exactamente a los límites de los píxeles.

• MINIMIZAR ANTI-ALIASING VISIBLE. Esto reposicionará levemente los objetos en fracciones para minimizar el anti-aliasing alrededor del borde del mapa de bits exportado. Si tienes duda sobre la opción que debes utilizar, selecciona esta opción.

Colocar image tag de HTML en el portapapeles

Esto te permite guardar la información básica del image tag de HTML cuando guardas el mapa de bits. Después, podrás pegar la etiqueta en tu editor de texto o página HTML.


Pestaña de opciones

Con esta pestaña puedes modificar la compresión JPEG y activar las opciones progresivo/entrelazado de ser necesario.

Progresivo: (solo JPEG). Al seleccionar esta opción se crea un JPEG progresivo. Esto es útil cuando el JPEG es grande y se utilizará en una página web. Los navegadores web comenzarán a mostrar la imagen antes de finalizar la descarga por completo.

Calidad JPEG: (solo JPEG). Una configuración baja resultará en un archivo pequeño con pérdida de calidad, mientras que un valor alto reducirá levemente el tamaño del archivo pero conservará la alta calidad. Ten en cuenta que una configuración de 100% también comprimirá el archivo. Un valor de 75% produce una buena compresión sin causar pérdida de calidad evidente para la mayoría de los usos.

Entrelazado: (solo GIF y PNG). Esta opción es como el JPEG progresivo. En el navegador, la primera imagen aparecerá como una imagen de baja resolución. A medida que el archivo se carga, la resolución aumenta.

Transparente: (solo GIF y PNG). Esto hace que las áreas no cubiertas por los objetos seleccionados sean transparentes. Seleccionar esta opción activa automáticamente una entrada transparente en la paleta.

Exportar cada capa a un archivo individual: si se selecciona esta opción al exportar un diseño que contiene varias capas, se creará un archivo por separado para cada capa. Los nombres de cada capa (tales como se encuentran configurados en la Galería de capas) se utilizarán para nombrar los archivos exportados.

Vista previa

Puedes escoger el mejor compromiso entre tamaño de archivo y calidad para gráficos web utilizando las ventanas de vista previa A y B en el diálogo de EXPORTACIÓN (ilustrado arriba). Sin embargo, la mejor prueba es ver la forma en que el gráfico se ve en un navegador web. Esta pestaña te ofrece algunas opciones para esa vista previa. Haz clic en el botón VISTA PREVIA para abrir el navegador web y ver los gráficos antes de exportarlos.


La Galería de diseños

Esta galería contiene plantillas de diseño profesional de páginas y sitios web completos, así como de elementos individuales de cliparts que puedes utilizar para tu diseño.

Para abrir esta galería:

• Escoge "HERRAMIENTAS > GALERÍAS > GALERÍA DE DISEÑOS". • O haz clic en el botón de Diseños en la barra de control de Galerías.

Puedes realizar búsquedas con palabras clave y ordenar el contenido de la galería. Para información sobre la utilización de las galerías, lee el capítulo MANEJO DEL DOCUMENTO (en la página 83). Si estás online, al abrir la galería se bajarán diseños y widgets de los servidores de Xara, que aparecerán de inmediato en la galería. Vuelve a mirar regularmente para descubrir los últimos widgets y plantillas disponibles. Para abrir una plantilla como un nuevo documento, haz doble clic. Para importar una plantilla a tu documento abierto actualmente, arrástralo hasta tu diseño. Las plantillas de página se agregan como nuevas páginas a tu documento actual. Otras plantillas y widgets se colocan en tu página actual.

Personalización de Web Designer 331

Si arrastras y sueltas un widget, una ventana de navegador web se abrirá en la página web del widget, lo que te permite configurar tu widget para adaptarlo a tus necesidades. Al finalizar, haz clic en el botón Insertar en la parte inferior de la ventana del navegador y el widget se insertará en tu página con un marcador de posición estático. Verás la imagen estática al ver la página en MAGIX Web Designer 6, pero verás el widget real al exportar y hacer una vista previa de tu página. Consulta el capítulo de GRÁFICOS WEB Y WIDGETS para más información.

Personalización de Web Designer

Cambio del documento de plantilla en blanco

Los documentos de plantilla son las opciones disponibles en ARCHIVO > NUEVO.

Las plantillas prediseñadas están disponibles en la galería de diseños (o en Archivo > Nuevo de la galería de diseños).

Para añadir un documento de plantilla:

1. Abre un documento existente ("Archivo > Abrir" o "Ctrl + O") o crea uno nuevo con el botón NUEVO de la barra de control ESTÁNDAR o "Ctrl +N".

2. Haz los cambios necesarios (como cambiar la página, añadir un logo o un mensaje). Puedes editar el documento de plantilla de la misma forma que un documento común.

3. Cuando estés satisfecho con los cambios escoge "Archivo > Guardar plantilla" e introduce un nombre para la plantilla.

Para establecer la nueva plantilla como plantilla por defecto (es decir, que será lo primero que aparezca cuando abras Web Designer y cuando pulses Ctrl+N) coloca la tilde en USAR

COMO PLANTILLA POR DEFECTO al guardar la plantilla.

Opciones del menú "Herramientas"

Shortcut: Ctrl + Shift + O

Con esto se abre el diálogo de opciones. Allí pueden aplicarse configuraciones para Web Designer.

Con el botón ACEPTAR se guardarán las configuraciones y se cerrará el diálogo.

APLICAR guarda las modificaciones pero el diálogo permanece abierto. De esta forma puedes continuar realizando cambios.

332 Personalización de Web Designer

Pestaña General

Tamaño de lista de archivos recientes

El menú Archivo muestra una lista de los archivos cargados o guardados más recientemente en el submenú "Abiertos recientemente". Esta lista ofrece una forma rápida de volver a abrir esos archivos. Esta opción te permite cambiar la cantidad de archivos que contendrá la lista (entre 1 y 20 archivos).

Las capas actuales siempre están visibles y pueden editarse.

En el capítulo Capas (en la página 275) encontrarás más detalles sobre las capas y la galería de capas.

Si se ha seleccionado esta opción, al seleccionar una capa en la GALERÍA DE CAPAS, éstas estarán visibles y podrán editarse automáticamente.

Si esta opción no está seleccionada, los estados VISIBILIDAD y EDICIÓN de una capa no se modificarán al seleccionarla.


Preguntar antes de aplicar el atributo actual

Esto es aplicable cuando se cambia un atributo actual. (Es decir, si cambias un atributo cuando no está seleccionado ningún objeto.)

Si la opción está activada, se te solicitará que confirmes si quieres cambiar el atributo.

Si la opción está desactivada, el cambio se realizará sin necesidad de confirmar.

Hacer grupos transparentes en su conjunto

Lee el capítulo Transparencia (en la página 188) para más información sobre las transparencias.

Al aplicar transparencia a un grupo de objetos, Web Designer aplicará la transparencia a todo el grupo como si fuera un solo objeto (no se verán las transparencias individuales en el grupo). Si se deselecciona esta opción, Web Designer añadirá la transparencia a cada objeto del grupo por separado.

Mantener los nombres de las capas importadas

Si esta opción está activada, la información de capa se preservará al importar plantillas u otros archivos. Con la opción IMPORTAR CAPAS a la CAPA ACTIVA seleccionada, todos los objetos importados aparecerán en la capa actual y la información de capa en la información entrante se ignora. IMPORTAR CAPAS EN NUEVAS CAPAS creará una capa para cada capa importada.

Marco de selección de objetos

Esta opción te permite cambiar la configuración por defecto para el Marco de selección (donde arrastras un rectángulo de selección sobre los objetos que quieres seleccionar). Así podrás seleccionar objetos que estén tocando el rectángulo de selección o seleccionar sólo los objetos que estén dentro del rectángulo.

Limitación de ángulo

Esto es aplicable para la rotación o movimiento de un objeto mientras se pulsa la tecla Ctrl.

Puedes seleccionar un valor del menú o introducir un valor en grados.

Este documento va a ser una página web

Esta opción comunica a MAGIX Web Designer 6 que la intención es exportar el documento como página web. Esto cambia sutilmente el comportamiento del programa con respecto al modo de comportarse con los enlaces de los objetos. Si esta opción está desactivada y aplicas un enlace a un objeto que se encuentra dentro de un grupo, este enlace no hará nada en la página web exportada porque el grupo entero se exporta como imagen y, por lo tanto, el enlace aplicado a sólo un miembro del grupo es ignorado al exportarse la página web. Sin embargo, si esta opción está activa, el enlace "asciende" a grupo, como si el enlace se hubiera aplicado al grupo entero en lugar de sólo a un miembro del mismo. Por lo tanto, si por ejemplo aplicas sin querer un enlace al texto de un botón en lugar de


aplicarlo al botón entero, esta opción aplicará por ti el enlace al botón entero. Esta opción está activada por defecto en todas las plantillas web.

Mostrar longitudes de texto compatibles con Windows

Véase la compatibilidad de texto del navegador (en la página 175) en el capítulo MANEJA

DE TEXTO.

Desplazar

Esta se aplica cuando se utilizan las teclas de flecha del teclado mientras se mueve un objeto.

Este campo de texto define la distancia que el objeto se mueve cada vez que se pulse la tecla. Si el documento utiliza unidades escaladas (por ejemplo, 1 pulgada a 1 milla) este campo de texto mostrará la distancia en la unidad escalada.

(Cuando se realiza un desplazamiento, Ctrl y aumentan la distancia de desplazamiento cinco y diez veces respectivamente).

Distancia duplicación

Edición > Duplicar (Ctrl+D) crea un duplicado del objeto original. Este campo de texto te permite configurar la distancia de desplazamiento entre el original y el duplicado.

Los valores positivos crean un duplicado por arriba y a la derecha del objeto original.

Los valores negativos crean un duplicado por debajo y a la izquierda del original.

Pestaña Cuadrícula y regla


Espaciado de cuadrícula y regla

El ESPACIADO PRINCIPAL define la distancia entre la cuadrícula principal y las divisiones de la regla. Las unidades utilizadas para la cuadrícula y las reglas están definidas por las unidades que utilizas en el espaciado principal. Por ejemplo, si introduces un espaciado principal de 2 CM. las unidades de la cuadrícula y la regla se configurarán en centímetros sin importar la unidad de página especificada en las opciones de unidades.

Coordinar selección

Aquí puedes cambiar la dirección de las coordinadas de la página.

Pestaña Ratón

Función de botones de ratón

Web Designer te ofrece una gama de acciones posibles para la tecla izquierda o derecha del ratón. Por ejemplo, si eres zurdo, es posible que quieras utilizar el botón derecho como el botón normal. Por lo tanto, puedes asignar el clic normal a la tecla derecha del ratón (también puedes configurar ambas teclas para la misma acción, si así lo deseas).

Acciones posibles:

• Clic normal: al menos un botón debería tener asignado esta opción. • +clic. • Ctrl+clic.


• Alt+clic. • Menú pop-up (ver más adelante). • Cambiar a pantalla completa (descrito en Trabajar con documentos (en la página 69)). • Acercar o alejar el zoom +clic para alejar (descrito en Trabajar con documentos (en la

página 69)). • Herramienta de DESPLAZAMIENTO (como si pulsaras +F8)

El menú pop-up contiene opciones adecuadas para el objeto sobre el que haces clic. Por ejemplo, para la mayoría de los tipos de objetos, el menú contiene las opciones CORTAR,

COPIAR, PEGAR, ELIMINAR, DUPLICAR, CLONAR (descritas en el capítulo Trabajar con objetos (en la página 88)).

MOVIMIENTO DE RUEDECILLA DEL RATÓN: puedes cambiar la acción de la rueda del ratón entre desplazamiento y zoom. La primera es la opción por defecto de Web Designer, la última logra compatibilidad con MAGIX Photo Designer 7.

Haz clic sobre RESTAURAR para regresar a las opciones de asignación de botones originales. Esto tiene efecto inmediato, no necesitar hacer clic en ACEPTAR ni en APLICAR

AHORA.

El panel de control de Windows también te permite intercambiar los botones izquierdo y derecho del ratón.

Radio para alineación magnética

La alineación magnética se describe en detalla en el capítulo Trabajo con objetos (en la página 105).

Estos valores determinan la distancia a la que pueden acercarse los objetos a los objetos magnéticos antes de alinearse automáticamente. Estas son distancias en la pantalla y son independientes del tamaño de tu documento.


Pestaña Tamaño de página

Si la opción "TODAS LAS PÁGINAS DEL SITIO WEB CON EL MISMO TAMAÑO" no está seleccionada, entonces puedes asignar tamaños diferentes a tus páginas utilizando este diálogo. Para fijar el tamaño de la página, escoge uno de los tamaños de página suministrados en la lista desplegable o escoge "Personalizado" y luego introduce el ancho y la altura requeridas en el campo suministrado.

Pestaña Copias de seguridad

Esta pestaña te permite activar y desactivar la función de copias de seguridad automáticas. Esta función guarda una copia de todos los documentos abiertos modificados en intervalos regulares. Se recomienda dejar activada esta opción para que tu trabajo se guarde con regularidad. También puedes escoger si se te debe advertir que no has guardado documentos al cerrar el programa o si debe guardarse una copia de seguridad de todos estos documentos y restaurarse la próxima vez que inicies el programa.

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

Barras de control

Puedes mover las barras de control de Web Designer a otros lugares de la ventana, reordenar los botones, crear nuevas barras de control, mover o copiar botones entre las barras de control y muchas otras operaciones.


No puedes cambiar la barra de información que depende de la herramienta ni el contenido de las barras desplegables que se encuentran en la barra de herramienta principal y en las barras superiores.

Modo de pantalla completa

Web Designer tiene dos configuraciones de barras de control:

• Una configuración aparece cuando la ventana tiene el tamaño normal. • La segunda configuración aparece después de escoger Ventana > Pantalla completa.

Cualquier cambio a la configuración de las barras de control (por ejemplo, cambio de tamaño o desplazamiento) no tiene efecto en la otra configuración. Los cambios a botones individuales (por ejemplo, configurar una opción) se aplican tanto al modo normal como de pantalla completa.

Mostrar y ocultar barras de control

La visualización de las barras de control se modifica a través del diálogo BARRAS DE

CONTROL (Ventana > Barras de control).

Al lado del nombre de cada barra de control hay un recuadro. Si colocas una tilde en ese recuadro, la barra de control estará visible. Haz clic sobre ese recuadro de la barra de control para mostrar u ocultar la barra.

Barras de control bloqueadas o flotantes

Normalmente, las barras de control están bloqueadas (ajustadas a los bordes de la ventana). Al mover la ventana también se mueven las barras de control bloqueadas.

Las barras de control también pueden ser flotantes. Estas barras no siguen el movimiento de la ventana.


Barra de control flotante Barra de control bloqueada

Puedes ocultar una barra de control flotante utilizando el diálogo de BARRAS DE CONTROL (descrito arriba) o con un clic sobre el icono de CIERRE.

Para hacer que una barra de control sea flotante, arrástrala desde el borde de la ventana hasta un área de edición o fuera de la ventana de Web Designer.

Para bloquear una barra de control, arrástrala sobre:

• El borde de la ventana. • La barra de menú. • U otra barra de control.

Una barra de control flotante presenta un contorno de doble línea al arrastrar. Esto cambia a una línea simple cuando se encuentra en una posición bloqueada. Si quieres que la barra de control permanezca flotante, pulsa Ctrl mientras la desplazas.

Modificación del tamaño de una barra de símbolos

Desplaza el cursor del ratón sobre el borde de la barra de símbolos hasta que se convierte en una doble flecha. Ahora podrás arrastrar el borde para modificar el tamaño de la barra de símbolos.

Creación de barras de símbolos

Para crear una barra de símbolos realiza lo siguiente:

• Arrastra un botón desde el área de trabajo o desde la ventana. De esta forma, se creará una nueva barra de símbolos que contendrá el botón.

• O haz clic sobre NUEVO en el diálogo de BARRAS DE SÍMBOLOS. De esta forma puedes crear una nueva barra de símbolos y darle un nombre. La nueva barra de símbolos estará vacía. Ahora podrás insertar botones mediante arrastrar y soltar.

El desplazamiento de botones se explica más adelante.

Eliminar las barras de control

Sólo puedes eliminar las barras de control que están vacías. Para ello, mueve cualquier botón hasta otra barra de control. Cierra la barra de control (con un clic sobre el icono de CIERRE o usando el diálogo de BARRAS DE CONTROL). La barra de control se eliminará automáticamente cuando cierres Web Designer.

Desplazar botones y herramientas

Para mover botones o herramientas:


1. Mueve el cursor hasta el botón que quieres mover. 2. Mantén pulsada "Alt" (ALT izquierdo) para mover el botón o "AltGr" (ALT derecho)

para copiar el botón cuando se utiliza en barras de control definidas de usuario y otras barras de control. Aunque en la "paleta de botones" predefinida, ambas teclas ALT sólo copian el botón.

3. Arrastra el botón hasta: - Un lugar diferente sobre la misma barra de control. - Otra barra de control. - O hasta un área de edición o fuera de Web Designer para crear una barra de

control nueva.

No puedes mover botones desde ni hasta la barra de información.

Ocultar botones y herramientas

Mueve los botones o herramientas no deseados hasta otra barra de control y después oculta esa barra de control (descrito anteriormente).

Si necesitas el botón o herramienta en el futuro, utiliza la ventana de BARRAS DE CONTROL para volver a mostrar la barra de control.

No puedes eliminar los botones ni las herramientas.

Fijación de galerías

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

Fijar una galería

Para fijar una galería:

Abre una galería con un clic sobre el icono en la barra de control de GALERÍAS o seleccionando Herramientas > Galerías.

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

Desfijar una galería

Un clic sobre un icono de la barra de control de GALERÍAS eliminará la galería de la pantalla. Pero con otro clic, la galería volverá a su posición fija. Para desfijar la galería por completo, simplemente arrastra la galería desde el lado de la pantalla y desfijará automáticamente. O arrastra la galería manteniendo pulsada la tecla "Ctrl" para evitar la fijación mientras arrastras.


Reorganizar galerías

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

Restaurar las barras de control / galerías por defecto

Haz clic sobre RESTABLECER para restaurar la configuración de la barra de control a sus valores estándar.

342 Menús y shortcuts de teclado

Menús y shortcuts de teclado

Introducción

En muchas partes estas descripciones se refieren al objeto seleccionado. En la mayoría de los casos, la acción descrita también es aplicable cuando se han seleccionado varios objetos. Utilizamos la frase "objeto seleccionado" para referirnos a uno o varios objetos seleccionados.

Muchas veces puedes seleccionar una opción de un menú, una barra de control o con un shortcut. Si existe un botón en la barra de control y/o un shortcut, se mostrarán detrás el nombre del menú. Por ejemplo, lo siguiente significa que hay un botón en la barra de control ESTÁNDAR que tiene el mismo efecto que seleccionar nuevo o que pulsar el shortcut Ctrl+N.

Nuevo (barra de control estándar o Ctrl+N)

Menú Archivo

Nuevo (barra de control estándar o Ctrl+N)

Crea un documento nuevo.

Nuevo de la Galería de diseños

Esta opción abre la galería de diseños si no está abierta ya y te permite escoger una plantilla para un nuevo documento. Haz clic en los iconos de fichero en la galería para abrir un fichero y haz doble clic en una miniatura de plantilla para iniciar un nuevo documento utilizando esa plantilla.

También puedes abrir la galería de diseños haciendo clic en el icono en la barra de herramientas de la galería.

Abrir (barra de control estándar o Ctrl+O)

Abre una nueva ventana de edición y carga un archivo. Este archivo puede ser:

• Un archivo .web de Web Designer para visualizar o editar un documento de Web Designer existente,

• O cualquier otro de los formatos de importación (consulta Importación y exportación (en la página 316) para ver la lista de formatos). Esto abre un nuevo documento con un archivo.

Archivos recientes

Una lista de los archivos cargados o guardados más recientemente. Esta lista te proporciona una forma rápida de volver a cargar cualquiera de estos archivos.

Menús y shortcuts de teclado 343

Puedes cambiar la cantidad de archivos que aparecen en esta lista. (Para más información consulta el capítulo Personalización de Web Designer).

Cerrar (Ctrl+W)

Cierra la ventana de edición actual. Web Designer permanece abierto. Se te advertirá si no has guardado cambios.

Guardar (barra de control estándar o Ctrl+S)

Guarda el documento seleccionado.

Guardar como

Te permite guardar el documento seleccionado con otro nombre o en un directorio o unidad diferente.

Guardar todo

Guarda todos los documentos abiertos.

Guardar plantilla

Guarda el documento seleccionado como una plantilla de documento. (Consulta el capítulo Personalización de Web Designer (en la página 331)).

Importar (Ctrl+Shift+I)

Carga un archivo en el documento seleccionado. El archivo puede ser cualquiera de los formatos de importación. (Lee el capítulo Importación y exportación (en la página 316) para más información).

Ten en cuenta la diferencia entre ABRIR e IMPORTAR. Ambas opciones cargan una variedad de formatos de documento pero ABRIR los abre en un nuevo documento; mientras que IMPORTAR carga el archivo en el documento ya abierto.

Importar desde la web (Ctrl+Alt+W)

Extraer todas las imágenes de una página web específica (Gráficos web ).

Exportar (Ctrl+Shift+E)

Te permite exportar el documento en una gran variedad de formatos de exportación compatibles con Web Designer. (Consulta en el capítulo Importación y exportación (en la página 316) la lista de formatos).

Visualizar página web

Exporta el documento de página web actual y realiza una vista previa. El documento es exportado a la misma ubicación a la que fue exportada por última vez (sobrescribiendo los archivos necesarios sin sugerir) o a una ubicación temporal si la página no ha sido exportada todavía. A continuación aparece una ventana de navegador mostrando la primera página de la página web.


Esta es la forma más rápida de realizar una vista previa de tu página cuando trabajas en ella. También puedes realizar una vista previa haciendo clic en el botón en la barra de herramientas de web.

Vista previa de la página (F12)

Exporta y ofrece una vista previa de la página actual del documento de sitio web.

Exportar página web

Exportar el documento actual como HTML.

Publicar página web

Esto realiza la misma operación que el botón en la barra de herramientas de web. Exporta y luego publica el documento de página web actual a tu página web.

Si todavía no has introducido los detalles FTP para tu espacio web, la pestaña PUBLICAR en el diálogo de PROPIEDADES WEB se visualizará primero. Luego, si todavía no has exportado la página localmente, el diálogo de exportación aparecerá para permitirte que lo hagas. A continuación la página web se publica en tu espacio web. Un indicador de progreso aparece durantes la operación de publicación.

Consulta el capítulo Primeros pasos (en la página 59) para más detalles sobre la publicación.

Vista previa flash

Esta opción sólo se activa cuando el documento actual es un documento de animación. Esto exporta tu animación como flash y abre una ventana popup mostrando tu animación flash reproduciéndose. La ventana también incluye información básica sobre tu animación flash, como por ejemplo el tamaño del archivo flash.

El botón en la barra de herramientas es una forma más rápida de invocar esta operación.

Exportar animación

Exporta una animación para utilizarla en una página web. (Lee el capítulo Gráficos web).

Información de documento

Esto muestra una ventana de información sobre el documento seleccionado que incluye las fuentes utilizadas en el documento actual.

Opciones de página

Sirve para modificar el diseño de página, su tamaño, etc.

Configuración de impresora

Establece las opciones relacionadas con la impresora o el archivo de impresión actual. (Para más información, lee el capítulo Impresión (en la página 309)).


Opciones de impresión

Modifica las opciones de la impresión, incluyendo la orientación y el tamaño de impresión. (Para más información, lee el capítulo Impresión (en la página 309)).

Imprimir (Ctrl+P)

Configura las opciones relacionadas con la impresión del documento y te permite imprimirlo. (Para más información, lee el capítulo Impresión (en la página 309)).

Cerrar

Cierra todas las ventanas y borra Web Designer de la memoria de trabajo. Se te advertirá si hay cambios sin guardar.

Menú Edición

Deshacer (barra de control estándar o Ctrl+Z)

Deshace la operación anterior. Lo que aparece escrito en esta opción refleja la última operación realizada. Por ejemplo DESHACER CORTAR. (Lee el capítulo Deshacer y rehacer (en la página 87)).

Rehacer (barra de control estándar o Ctrl+Y)

Cancela la última opción DESHACER. Lo que aparece escrito en esta opción refleja la última operación DESHACER realizada. (Lee el capítulo Deshacer y rehacer).

Cortar (barra de control edición o Ctrl+X)

Corta el objeto seleccionado al portapapeles. Lo que aparece escrito en esta opción refleja el tipo de objeto seleccionado. (Lee el capítulo Trabajar con objetos (en la página 94)).

Copiar (barra de control edición o Ctrl+C)

Copia el objeto seleccionado en el portapapeles. Lo que aparece escrito en esta opción refleja el tipo de objeto seleccionado. El objeto permanece en el lugar del documento. (Lee el capítulo Trabajar con objetos (en la página 94)).

Pegar (barra de control edición o Ctrl+V)

Pega el contenido del portapapeles en el documento seleccionado. Lo que aparece escrito en esta opción refleja el contenido del portapapeles. (Lee el capítulo Trabajar con objetos (en la página 94)).

Pegar en lugar (Ctrl+Shift+V)

Es igual a PEGAR, excepto que el objeto se pegará en la misma posición de donde lo has copiado. Esto es útil para mover objetos de una capa o página a otra sin cambiar su posición X/Y.


Pegar formato/atributos (Ctrl+Shift+A)

Esta opción te permite copiar atributos (como el modelo de línea o el color de relleno) entre objetos. Es una forma rápida de aplicar múltiples atributos. Cuando pegas atributos, los atributos del objeto que se encuentra en el portapapeles se aplican a todos los objetos seleccionados actualmente (consulta Trabajar con objetos (en la página 112)).

Eliminar (“Edición“- Barra de símbolos y barra de símbolos estándar o “Supr”)

Borra el objeto marcado. El texto de esta opción corresponde al objeto seleccionado. Lee el capítulo: El trabajo con objetos (en la página 88).

Seleccionar todo (Ctrl+A)

Selecciona todos los objetos de las capas editables. (Las capas editables y bloqueadas están descritas en el capítulo Capas (en la página 275)).

Eliminar selección/Restaurar atributos actuales (Esc)

Deselecciona todos los objetos. Si nada está seleccionado, los atributos actuales vuelven a sus valores por defecto. Puedes ejecutar esta opción si presionas ESC dos veces.

Duplicar (barra de control edición o Ctrl+D)

Copia el objeto seleccionado y coloca la copia un poco desplazada del original. La copia se convierte en el objeto seleccionado. La distancia de desplazamiento puede personalizarse (lee el capítulo Personalización de Web Designer (en la página 334).

Clonar (Ctrl+K)

Al igual que DUPLICAR, copia el objeto seleccionado pero coloca la copia directamente arriba del original. La copia se convierte en el objeto seleccionado.

Páginas

El submenú Páginas te permite añadir o quitar páginas de tu documento multi-página, duplicar la página actual o mover la página actual más arriba o abajo del documento. Para más información sobre documentos multi-página ve al capítulo Documentos multi-página (en la página 73).

Menú Arreglo

Mover a la capa al frente (barra de control arreglo o Ctrl+Shift+U)

Mueve el objeto seleccionado una capa hacia el frente. El objeto se convierte en el objeto de fondo de la nueva capa. En un documento con animación, esta opción es MOVER AL

PRÓXIMO FRAME.


Traer al frente (barra de control arreglo o Ctrl+F)

Mueve el objeto seleccionado hasta el frente de los otros objetos sobre la misma capa. Lee el capítulo Trabajar con objetos (en la página 88) para más información.

Mover adelante (barra de control arreglo o Ctrl+Shift+F)

Mueve el objeto seleccionado un paso hacia adelante. (Lee el capítulo Trabajar con objetos (en la página 88)).

Mover atrás (barra de control arreglo o Ctrl+Shift+B)

Mueve el objeto seleccionado un paso hacia atrás. (Lee el capítulo Trabajar con objetos).

Llevar atrás (barra de control arreglo o Ctrl+B)

Mueve el objeto seleccionado detrás de los otros objetos sobre la misma capa. (Lee el capítulo Trabajar con objetos (en la página 88)).

Mover a la capa de atrás (barra de control arreglo o Ctrl+Shift+D)

Mueve el objeto seleccionado una capa hacia atrás. El objeto se convierte en el objeto de primer plano de la nueva capa. En un documento con animación, esta opción es MOVER AL

FRAME ANTERIOR.

Agrupar (barra de control arreglo o Ctrl+G)

Agrupa los objetos seleccionados para manejarlos como un solo objeto. (Lee el capítulo Trabajar con objetos (en la página 88)).

Desagrupar (barra de control arreglo o Ctrl+U)

Separa el grupo o los grupos en objetos individuales. Esta opción no está disponible, salvo que se haya seleccionado un grupo. O cuando hay al menos un grupo dentro de los objetos seleccionados.

Aplicar grupo suave (Ctrl+Alt+G)

Haz que los objetos seleccionados formen un grupo suave. Al diferencia de los grupos, los grupos suaves pueden incluir objetos en diferentes capas. Consulta Trabajar con objetos (en la página 108) para detalles.

Borrar grupo suave (Ctrl+Alt+U)

Separa el grupo suave seleccionado de modo que los objetos puedan seleccionarse por separado de nuevo.

Crear barra de navegación

Esta función te permite crear una barra de navegación a partir de un único botón. Encontrarás más información en el capítulo BARRAS DE NAVEGACIÓN (en la página 254).


Alineación (Ctrl+Shift+L)

Se utiliza para alinear varios objetos. No tiene efecto si hay un solo objeto seleccionado. (Para más información, lee el capítulo Trabajar con objetos (en la página 109)).

Combinar formas (barra de control arreglo)

El submenú de combinar formas te permite:

• Añadir formas. • Sustraer la forma superior de las inferiores. • Descartar partes de otras formas no cubiertas por la forma superior. • Utilizar la forma superior para cortar las otras formas.

Sólo las formas seleccionadas se combinarán. Las formas sin seleccionar no se modificarán. (Para más información, lee el capítulo Trabajar con formas (en la página 129)).

Adaptar texto a la curva / Eliminar texto de la curva

Permite adaptar un texto a una curva o eliminar el texto de la curva (ver capítulo Trabajo con textos).

Contornear texto

Hacer que el texto contornee al objeto. VerContornear objeto con texto (en la página 165) para más detalles.

Repetir en todas las páginas (Shift+Ctrl+Alt+R)

El objeto seleccionado se copiará en el mismo lugar en todas las páginas. La función creará automáticamente el nombre Repeating:AutoRepeat y se aplicará a todas las copias, a partir de allí se actualizará cada vez que selecciones ACTUALIZAR OBJETOS REPETIDOS.

Actualizar objetos repetidos

Copia los objetos marcados como repetidos en la página actual a todas las demás páginas que contienen copias de estos objetos. Todas las barras de navegación disponibles de la galería de diseños están configurados como objetos repetidos. Esto significa que puedes editar una barra de navegación en la página actual (por ejemplo cambia las etiquetas y los enlaces de los botones) y luego, invocando esta operación, actualiza esta misma barra de navegación en todas las demás páginas para que se igualen.

Actualizar objetos repetidos (en la página 114) en todas las páginas

Detener repetición (Shift+Ctrl+Alt+O)

La función Arreglo > Detener repetición te permite desactivar la naturaleza de repetición de un objeto o en todas las copias de ese objeto en tu sitio web.

Obtén más información en el capítulo Trabajar con objetos (en la página 116).


Menú Herramientas

Galerías

Páginas y galerías (barra de control galerías o "F10")

Muestra u oculta la GALERÍA DE CAPAS. Sólo utilizada en documentos no animados (ver Capas (en la página 275)).

Galería de mapas de bits (barra de control de galerías o "F11")

Muestra u oculta la GALERÍA DE MAPAS DE BITS (ver Manejo de mapas de bits (en la página 224)).

Galería de líneas (barra de control de galerías o"F12")

Muestra u oculta la GALERÍA DE LÍNEAS (ver Dibujo de líneas).

Galería de diseños (barra de control de galerías o " + F10")

Muestra u oculta la GALERÍA DE DISEÑOS (ver Importación y exportación (en la página 316)).

Galería de rellenos (barra de control de galerías o " + F11")

Muestra u oculta la GALERÍA DE RELLENOS (ver Manejo de mapas de bits).

Galería de frames (barra de control de galerías o " + F12")

Muestra u oculta la GALERÍA DE FRAMES. Sólo utilizado en documentos animados (ver Gráficos web (en la página 283)).

Editor de color (Ctrl+Shift+E)

Abre el EDITOR DE COLOR. (Consulta el capítulo Trabajar con colores.)

Nombres

Abre el diálogo Aplicar/Eliminar nombres (en la página 113).

Propiedades web (Ctrl+Shift+W)

Abre el diálogo PROPIEDADES WEB que permite añadir a tu documento de página funciones web como enlaces, capas popup, referencias, etc.. Además puedes controlar cómo se exportan las imágenes para la página web y configurar otras propiedades web más utilizando este diálogo. Consulta Primeros pasos (en la página 16) para más detalles.

Optimizar foto

Optimizar resolución del mapa de bits para utilizar tus diseños con MAGIX Web Designer 6. Ver Optimización de fotos (en la página 238) para más detalles.

Optimizar todos los JPEG

Optimiza el diseño de todas las fotos JPEG. Lee Optimización de fotos (en la página 238).


Animación

Este menú sólo está disponible en los documentos con animación y ofrece tres opciones:

• PROPIEDADES DE LA ANIMACIÓN: en este diálogo puedes cambiar las opciones para la animación y para cada frame.

• VISTA PREVIA DE TODOS LOS FRAMES: Utiliza esto para realizar una vista previa de todos los frames de tu animación. Esto no es muy útil para animaciones flash porque sólo muestra los frames clave sin transiciones (tweening).

• VISTA PREVIA DE ANIMACIÓN GIF EN EL NAVEGADOR: al escoger esto se creará un archivo GIF animado a partir de los frames de tu documento y se abrirá en tu navegador web para que veas el resultado. Hay un botón en la barra de animación para un acceso rápido a esta operación.

• VISTA PREVIA DE ANIMACIÓN FLASH EN EL EXPLORADOR: Abrirá una ventana donde se reproduce tu animación como flash, tal como aparecerá en un navegador web cuando la exportes. Utiliza esto para realizar vistas previas de animaciones flash. Hay un botón en la barra de animación para un acceso rápido a esta operación.

Revisar ortografía mientras se escribe

Esta opción activa el CORRECTOR DE ORTOGRAFÍA (en la página 159) en la herramienta de texto.

Opciones (Ctrl+Shift+O)

Abre el diálogo de OPCIONES. (Descrito en el capítulo Personalización de Web Designer).

Menú Ventana

Eliminar selección/Restaurar atributos actuales (Esc)

Deselecciona todos los objetos. Si nada está seleccionado, los atributos actuales vuelven a sus valores por defecto. Puedes ejecutar esta opción si presionas ESC dos veces.

Nueva ventana

Abre una nueva ventana en el documento seleccionado.

Arreglar ventanas

Ordena todas las ventanas de Web Designer como mosaico.

Barras de control

Muestra el diálogo de BARRAS DE CONTROL. (Descrito en el capítulo Personalización de Web Designer (en la página 337)).

Calidad (barra de control estándar)

Selecciona la forma en que los objetos se visualizan, desde contorno hasta antialiasing. (Consulta el capítulo Trabajar con documentos).


Pantalla completa (8 del teclado numérico)

Cambia entre el modo de pantalla completa y de pantalla normal.

Mostrar cuadrícula (#)

Muestra la cuadrícula de pantalla. (Consulta el capítulo Trabajar con documentos (en la página 69)).

Mostrar guías (1 del teclado numérico)

Muestra u oculta la capa guía que contiene todas las líneas guía y objetos guía.

Mostrar bordes de impresión

La mayoría de las impresoras tienen un margen que no se imprime (el borde de impresión) alrededor del borde de la página. Con MOSTRAR BORDES DE IMPRESIÓN se verán dos rectángulos en la pantalla. Uno te muestra el borde del papel y el otro el área que se imprimirá.

Ajustar a cuadrícula (. del teclado numérico)

Con esta opción configurada un objeto se ajustará al punto de cuadrícula cercano al que se lo arrastre. (Consulta el capítulo Trabajar con documentos (en la página 69)).

Ajustar a guías (2 del teclado numérico)

Con esta opción configurada un objeto se ajustará a cualquier guía cercana al que se la arrastre. (Consulta el capítulo Trabajar con objetos (en la página 105)).

Ajustar a objetos (* del teclado numérico)

Con esta opción seleccionada, arrastrar un control deslizante hasta otro objeto ajusta el control al objeto. Lee el capítulo Trabajar con objetos (en la página 105) para más información. Puedes ajustar la distancia de ajuste. Para más información, lee el capítulo Personalización de Web Designer.

Documentos abiertos

Una lista de todos los documentos abiertos actualmente. Un clic sobre un nombre selecciona el documento correspondiente. (Ctrl+F6 también cambia entre los documentos.) Un * tras el nombre del documento señala que no se han guardado cambios de ese documento.

Menú Ayuda

Ayuda de MAGIX Web Designer 6

Utiliza la opción "Temas de ayuda" del menú "Ayuda" para abrir una página de inicio de la ayuda del programa. Aquí puedes leer la ayuda paso a paso o escoger una sección específica a través de la estructura de árbol de la derecha.


Ayuda

Esta opción está disponible en casi todos los lugares del programa y abre la ayuda del programa en el tema correspondiente. Utiliza esta función para obtener ayuda sobre cualquier función de MAGIX Web Designer 6.

Shortcut: F1

Más Web Designer

Este menú contiene enlaces de internet útiles para la página web de Xara y recursos online útiles.

Consejo del día

Ver el consejo del día. En la ventana del consejo del día hay un recuadro en el que puedes seleccionar si quieres ver o no un consejo cada vez que inicias Web Designer.

Actualizar programa

Esto comprueba de forma online si hay actualizaciones de programas disponibles.

En primer lugar aparecerá una pantalla que te comunica si hay una nueva versión principal de Web Designer para actualizar. Luego, si has registrado el programa con Xara, se iniciará un proceso automático de actualización que comprobará si hay disponibles actualizaciones de programa gratuitas. Si hay una actualización disponible, se descargará automáticamente y luego se cierra MAGIX Web Designer 6 y se instala la actualización. El programa luego se reinicia automáticamente para ti.'

Utiliza la opción REGISTRARME en el menú AYUDA para registrar el programa con Xara.

Programa de afiliado

Si no te has registrado en el programa de afiliados cuando desbloquees MAGIX Web Designer 6, puedes utilizar esta opción para unirte al programa o para cambiar la opción de afiliación previamente. Selecciona esta opción para abrir el diálogo de afiliación que te explica todo sobre el programa de afiliación. Puedes comenzar a cobrar comisiones desde tu página web MAGIX Web Designer 6 o donarla por caridad, seleccionando las opciones que se muestran en el diálogo.

Acerca de MAGIX Web Designer 6

Se verá información sobre el Copyright y el número de la versión de MAGIX Web Designer 6.

Registrarme

Utiliza esta opción para registrar online en Xara tu adquisición para que puedas obtener actualizaciones de programa gratuitas, descuentos en actualizaciones, ofertas especiales y otros beneficios.


Shortcuts de teclado

Las herramientas

Herramienta de selección F2 o V o Alt+S Herramienta de edición de forma F4 Herramienta de rectángulo + F3 o M Herramienta de elipse + F4 o L Herramienta de texto F8 o T Herramienta de relleno F5 o G Herramienta de transparencia F6 Herramienta de sombra Ctrl + F2 Herramienta de foto P Herramienta de desplazamiento (push tool) + F8 o H o Alt + X (o barra espaciadora si

no está en la herramienta de texto) Herramienta de zoom + F7 o Z o Alt + Z

Las galerías

Galería de diseños + F10 Galería de rellenos + F11 Galería de frames + F12 Galería de capas F10 Galería de mapa de bits F11 Galería de líneas F12

Zoom

Zoom previo Ctrl+R Zoom a selección Ctrl+ +Z Zoom a dibujo Ctrl+ +J Zoom a página Ctrl+ +P Ampliar (zoom in) Ctrl + + del teclado numérico Alejar (zoom out) Ctrl+ - del teclado numérico Zoom al 100% 1 Zoom al 200% 2 Zoom al 300% 3 Zoom al 400% 4 Zoom al 50% 5

También puedes ampliar/alejar y desplazar el documento utilizando la rueda del ratón (Ctrl+Rueda amplia/aleja).

Manipulación de documentos

En la herramienta de texto, los shortcuts señalados con el asterisco (*) tienen una acción diferente. Lee a continuación.


Nuevo documento Ctrl+N Nuevo documento animado Ctrl+ +N Abrir documento Ctrl+O Cerrar documento Ctrl+W Cambiar documento Ctrl+Tab Imprimir documento Ctrl+P Guardar documento Ctrl+S Importar Ctrl+ +I Importar gráficos de la web Alt+W * Exportar Ctrl+ +E Calcular tiempo de redibujo Ctrl+ +T Mostrar cuadrícula # Mostrar guías 1 del teclado numérico Ajustar a cuadrícula . del teclado numérico Ajustar a guías 2 del teclado numérico Ajustar a objetos * del teclado numérico Seleccionar pantalla completa 8 del teclado numérico Mostrar reglas Ctrl+Shift+R Deshacer Ctrl+Z o < o , Rehacer Ctrl+Y o > o .

Manipulación de objetos

En la herramienta de texto, los shortcuts señalados con el asterisco (*) tienen una acción diferente. Lee a continuación.

Seleccionar todo Ctrl + A * Seleccionar el próximo objeto Pestaña Eliminar la selección Eliminar * Borrar selección Esc Traer objeto al frente Ctrl + F Llevar objeto al fondo Ctrl + B * Mover objeto hacia adelante Ctrl+ñ+F

Mover objeto hacia atrás Ctrl +ñ+ B

Mover objeto a la capa de adelante (documentos de dibujo)

Ctrl +ñ+ U

Mover objeto a la capa de atrás (documentos de dibujo)

Ctrl +ñ+ D

Mover al próximo frame (documentos de animación)

Ctrl +ñ+ U

Mover al frame anterior (documentos de animación)

Ctrl + ñ+ D

Agrupar objetos Ctrl + G Desagrupar objetos Ctrl + U Clonar objeto Ctrl + K Duplicar objeto con desplazamiento Ctrl + D Copiar objeto en el portapapeles Ctrl + C Cortar selección al portapapeles Ctrl + X


Pegar objeto del portapapeles Ctrl + V Pegar objeto en la posición original Ctrl + ñ+ V

Pegar atributos Ctrl + ñ+ A

Crear copia de mapa de bits Ctrl +ñ+ C

Añadir formas Ctrl + 1 Sustraer formas Ctrl + 2 Formas de intersección Ctrl + 3 Segmentar formas Ctrl + 4 Abrir el diálogo de alineación Ctrl + ñ+ L*

Dirección web Ctrl +ñ+ W

Mover los objetos seleccionados: teclas de flecha con la herramienta de selección (ver Desplazar objetos (en la página 93))

Mover los controles deslizantes seleccionados: teclas de flecha en otras herramientas que no sean la herramienta de selección

Herramienta de texto

Teclas de navegación Mueven el cursor de texto hacia arriba, abajo, izquierda o derecha un carácter por vez.

Inicio Mueve el cursor de texto al inicio de la línea. Fin Mueve el cursor de texto al final de la línea. Ctrl+flecha izquierda/derecha.

Mueve el cursor de texto una palabra hacia la izquierda/derecha.

Ctrl+Inicio Mueve el cursor de texto al inicio de la primera línea en un objeto de texto.

Ctrl+Fin Mueve el cursor de texto al final de la última línea en un objeto de texto.

Ctrl+A Selecciona todos los caracteres en un objeto de texto.

Ctrl+B Aplica negrita.

Ctrl+I Aplica cursiva.

Ctrl+C Copia la región de texto seleccionado en el portapapeles.

Ctrl+L Selecciona todos los caracteres de la línea que contiene el cursor de texto.

Ctrl+ +L Inserta el texto de ejemplo 'Lorem ipsum'

Ctrl+V Pega el texto en la posición del cursor de texto (si el portapapeles contiene texto).


Ctrl+W Intercambia la mayúscula y minúscula del carácter que se encuentra a la derecha del cursor de texto.

Ctrl+- Inserta un guión suave (aparece solamente cuando se encuentra la final de la línea).

Ctrl+ +- Inserta guión rígido para prevenir que un guión se malinterprete al final de la línea.

Ctrl+ +< Ctrl+ +>

Aumenta/reduce el tamaño de la fuente del texto seleccionado (sólo si toda la selección tiene el mismo tamaño)

Alt+teclas de flecha Aumenta / reduce el espaciado / kerning.

↵ Inicia una nueva línea de texto.

Eliminar Elimina el carácter a la derecha del cursor de texto. Si el cursor se encuentra al final de una línea de texto, une esta línea con la línea de abajo.

Retroceso Elimina el carácter a la izquierda del cursor de texto. Si el cursor se encuentra al inicio de una línea de texto, une esta línea con la línea de arriba.

+flechas Selecciona todo el texto entre la posición del cursor y el inicio de la línea.

+Fin Selecciona todo el texto entre la posición del cursor y el final de la línea.

Caracteres especiales (en la herramienta de texto)

Ctrl+barra espaciadora Espacio rígido (las palabras con espacios rígidos entre ellas no se separaran al final de la línea)

Ctrl + – del teclado numérico – Guión "n" (este guión tiene el ancho de una letra "n" y es más largo que un menos).

Ctrl + Alt + - del teclado numérico — Guión "m" (este guión es un guión largo) Ctrl + Alt + .(punto) … Puntos suspensivos Ctrl + Alt + C © Copyright Ctrl + Alt + R ® Registrado Ctrl + Alt + T ™ Marca registrada Ctrl + Alt + B • Viñeta

Herramienta de difuminación

Puedes controlar la barra de difuminación con tu ratón y el teclado. Si el campo de texto o la barra de difuminación están seleccionados:

Rueda del ratón arriba/abajo aumenta o disminuye la difuminación Ctrl+Rueda del ratón arriba/abajo aumenta o disminuye en pasos mayores. Re. pág. / Av. pág. aumenta o disminuye en pasos mayores. Inicio / fin selecciona los valores mínimos o máximos de

difuminación.


Otros

Editor de color Ctrl+E (abre y cierra) Diálogo "Opciones" Ctrl+ +O Ayuda de MAGIX Web Designer 6 F1

358 Legal

Legal

Copyright

Esta documentación está protegida por ley. Quedan reservados todos los derechos especialmente los de duplicación, circulación y traducción.

Ninguna parte de esta publicación puede reproducirse a través de fotocopias, microfilm o cualquier otro procedimiento, así como tampoco transferirse a un idioma utilizable por máquina alguna, especialmente equipos de procesamiento de datos, sin la aprobación por escrito del propietario de los derechos de autor.

Quedan reservados todos los copyrights.

Otros nombres de productos mencionados son marca registrada de su respectivo fabricante. Queda reservado el derecho a introducir cambios al contenido, así como modificaciones al programa.

Xara es marca registrada de Xara Group Ltd.

Xara Group Ltd. es una compañía afiliada de MAGIX AG.

MAGIX es marca registrada de MAGIX AG.

Los otros nombres de producto pueden ser marca registrada del respectivo fabricante.

This product uses MAGIX patent pending technology.

Copyright © Xara Group Ltd., 1994-2010. Todos los derechos reservados.

Acuerdo de licencia de usuario final de clientes de XARA Web Designer

© 2010 Xara Group Ltd

AVISO IMPORTANTE: El software <Programmnam> (en adelante"Software") es copyright de Xara Group Limited ("Xara") con sede principal en Gaddesden Place, Hemel Hempstead, Herts, HP2 6EX, Reino Unido, y no podrá almacenarse ni copiarse en ningún ordenador sin la licencia de Xara. Se ofrece una licencia de acuerdo con los términos del Acuerdo de licencia de usuario final ("EULA" por sus siglas en inglés) establecidos a continuación.

Si aceptas los términos del Acuerdo de licencia, selecciona "Sí".

Seleccionar Sí e instalar el software constituye la aceptación de los términos del Acuerdo de licencia de usuario final. Por favor, lee y acepta los términos y condiciones del Acuerdo

Legal 359

antes de instalar el software. No instales el software si no estás de acuerdo con los términos y condiciones del Acuerdo de licencia.

Si no aceptas estos términos y has adquirido el software, podrás retornar el CD-ROM con el software dentro de los 14 días de la fecha de compra, siempre que esté sin utilizar e intacto; o, en el caso de la descarga, deberás enviar una Carta de destrucción a tu proveedor junto con la prueba de compra para obtener un reembolso.

ACUERDO DE LICENCIA DE USUARIO FINAL DE CLIENTES DE XARA WEB DESIGNER ("EULA")

Está permitido:

1. cargar o descargar el software y utilizarlo solamente en un ordenador de un solo usuario que se encuentre bajo control personal; a no ser que quieras 2. copiar el software de un ordenador a otro que se encuentre bajo tu control personal, siempre que se utilice en un solo ordenador por vez y sólo por ti. Las copias deberán reproducir e incluir todos los avisos de copyright de Xara; 3. transferir el software (completo con toda su documentación asociada) y esta licencia a otra persona que haya aceptado los términos de este Acuerdo y la transferencia simultánea de todas las copias que se han realizado a esa persona o la destrucción de todas las copias no transferidas. Si el receptor de la transferencia no acepta los términos de esta licencia, esta licencia finalizará automáticamente. El transmisor no conservará ningún derecho de acuerdo con este Acuerdo en relación con el software y la licencia transferidos.

No está permitido:

(a) utilizar el software en ningún ordenador o sistema que permita el acceso electrónico al mismo por más de un usuario; (b) el alquiler, arrendamiento, sublicenciamiento, préstamo, copia (excepto lo expresamente establecido en este Acuerdo), modificación, adaptación, fusión, traducción, ingeniería inversa, decompilación, desmontaje ni creación de trabajos derivados basados en todo o una parte del software o su documentación asociada, salvo lo permitido por ley; (c) salvo lo expresamente establecido en este Acuerdo, la utilización, reproducción o trato de ningún tipo con este software.

DURACIÓN La licencia estará vigente hasta que se destruya el software y la documentación junto con todas las copias. También finalizará en caso de violación de este Acuerdo. Al momento de la finalización, se acuerda destruir todas las copias del software y su documentación, incluyendo el software guardado en el disco duro de cualquier ordenador. Si se está utilizando la versión de prueba del software, entonces los derechos de utilización del software o de las imágenes creadas con el mismo finalizarán al momento del vencimiento del periodo de prueba.

PROPIEDAD Solamente eres propietario del CD-ROM (o reemplazo autorizado) en el que se ha suministrado el software en caso de no haberse descargado. Podrás conservar este CD-ROM siempre que se haya borrado el software. Xara conservará en todo momento la propiedad del software según lo registrado en el CD-ROM original y todas las copias

360 Legal

posteriores del mismo sin importar su forma. Este Acuerdo es aplicable solamente al otorgamiento de la licencia y no al contrato de venta del CD-ROM.

ACCESO ONLINE A SOFTWARE DE TERCERO INCLUIDO El software puede proveer acceso online a un software de terceros, p. ej. widgets o gadgets, que se abren online mediante terceros. El software solo podrá suministrar dicho acceso si tu PC está conectado con Internet. Si aceptas los términos de este EULA, acuerdas que el software puede suministrar dicho acceso al software de terceros.

A fin de clarificación: Xara no es propietario de este software de terceros y Xara no acepta responsabilidad alguna por dicho software de terceros. En particular, Xara no garantiza la disponibilidad de dicho software de terceros.

RESTRICCIONES Esta licencia otorga el derecho a publicar, distribuir y reproducir imágenes creadas con este software, incluyendo plantillas de gráficos, fotos, fuentes y rellenos incluidos en el software, con las siguientes limitaciones:

1. Las plantillas, los gráficos, las fotos y las fuentes suministrados por el software no pueden redistribuirse, venderse ni publicarse como una colección de imágenes ni como parte de una colección de imágenes y, de forma específica, aunque no exclusiva, no podrán incluirse en ninguna plantilla, clip·art, fuente, textura ni colección fotográfica, ya sea en páginas web o de distribución por medios electrónicos como CD o discos, ni tampoco podrán incluirse como parte de otro producto de ninguna forma, ya se ésta comercial o de otro tipo. Sin perjuicio de lo anteriormente mencionado, la plantilla, gráfico, foto o fuente podrá incluirse en una página web creada con Web Designer para propósitos personales del cliente. 2. Las fotos incluidas con el software pueden utilizarse y distribuirse con propósitos personales, pero cualquier redistribución comercial requerirá la adquisición de una licencia ampliada de Xara o su licenciantes. Contacta con Xara Group Ltd para más detalles. 3. Cualquier aviso de copyright que no esté incluido en el HTML, Javascript o cualquier otro código exportado por el software no debe eliminarse ni modificarse. 4. Algunas fuentes fueron suministradas por terceros que retienen el copyright. En todos los casos el copyright queda reservado por Xara o el otorgante de la licencia y está protegido por leyes internacionales de copyright. 5. Las imágenes creadas incluidas en este software o creadas por el mismo no podrán utilizarse para ningún propósito prohibido por ley. 6. Considerando las restricciones mencionadas anteriormente, se permite crear páginas web para tus propósitos personales o para propósitos comerciales de tu cliente.

GARANTÍAS Y RECURSOS JUDICIALES

1. Xara garantiza que el medio de almacenamiento en el que se ha suministrado el software está libre de defectos materiales o de fabricación durante el uso normal de 90 días a partir de la fecha original de compra. En caso de que ocurriera un defecto en el CD durante este periodo, podrá retornarse el disco junto con la prueba de compra al proveedor, quien lo reemplazará sin costo alguno.

Legal 361

2. Xara garantiza que el software funcionará sustancialmente de acuerdo con su documentación acompañante (siempre que el software se utilice de forma apropiada en el ordenador y con el sistema operativo para el que se ha diseñado) y que la documentación describe de forma correcta el funcionamiento del software en todos sus aspectos materiales. Si se notifica a Xara cualquier error significativo en el software durante los 90 días desde la fecha original de compra, se corregirá dicho error dentro de un periodo de tiempo razonable (con elección de reemplazo) o, según se requiera, se devolverá el precio del software (contra devolución del software y su documentación). 3. Las garantías establecidas en los párrafos 1 y 2 mencionados anteriormente son las únicas garantías y reemplazan todas las condiciones de garantía u otros términos expresados o implicados por ley o por forma alguna, que quedan excluidos por el presente acuerdo, según lo permitido por ley. Los párrafos 1 y 2 anteriores también establecen los únicos recursos judiciales en caso de violación de las garantías de Xara. 4. En particular, Xara no garantiza que el software cumplirá con sus requerimientos ni que el software operará de forma ininterrumpida y sin errores ni que todos los errores del software puedan corregirse. El cliente carga y utiliza el software a su propio riesgo y en ningún caso Xara será responsable de cualquier pérdida o daño de ningún tipo (excepto lesión personal o muerte resultado de la negligencia de Xara), incluyendo pérdida de ganancias o pérdidas derivadas indirecta o directamente de la utilización o de la incapacidad de utilización del software o de errores o deficiencias en el software causadas por negligencia o por otra forma, excepto lo expresamente establecido en este Acuerdo.

CONSUMIDORES Ninguna parte de este Acuerdo afectará los derechos legales como consumidor.

LEY Este Acuerdo estará sujeto a la ley de Inglaterra.

Si tienes alguna pregunta acerca de este Acuerdo, por favor, escribe a Xara Group Limited, Gaddesden Place, Hemel Hempstead, Herts, HP2 6EX, Reino Unido.

Agradecimientos

La fuente Geotype se suministró con el gentil permiso de Gary Bouton y continúa siendo © de Gary Bouton, visita www.theboutons.com. Algunas fuentes copyright © FontBank Inc. Todos los derechos reservados. Otras fuentes fueron suministradas por terceros que retienen el copyright.

En todos los casos el copyright queda reservado por Xara o el otorgante de la licencia y está protegido por leyes internacionales de copyright.

Xara es marca registrada de Xara Group Ltd. Los contenidos de esta documentación y los software asociados de Xara Xtreme son propiedad de Xara Group Ltd. y tienen copyright. Cualquier reproducción completa o en partes está estrictamente prohibida. Para obtener copias adicionales del software, por favor contacta al Xara Group Ltd. Términos de licencia de MAGIX Web Designer 6.

Las partes redistribuibles de Microsoft MSVC y MFC son copyright de Microsoft Corporation. Microsoft, Internet Explorer, Windows y Windows Vista son marcas

362 Legal

comerciales o marcas comerciales registradas de Microsoft Corporation en los Estados Unidos y/o en otros países.

Adobe, Encapsulated PostScript, Illustrator, Photoshop, Dreamweaver, Fireworks, Freehand, Flash, PostScript y Type Manager son marcas comerciales registradas o marcas comerciales de Adobe Systems Incorporated en los Estados Unidos y/o en otros países.

MAGIX es marca registrada de MAGIX AG.

Apple, Macintosh y TrueType son marcas comerciales registradas de Apple Computer, Inc.

Corel, CorelDRAW y Paintshop Pro son marcas comerciales registradas o marcas comerciales de Corel Corporation.

A C-program for MT19937, Copyright (C) 1997 - 2002, Makoto Matsumoto and Takuji Nishimura, All rights reserved. Más información de copyright en el archivo MTRand.txt que se encuentra en la carpeta HelpAndSupport de la instalación del programa.

Algún código de programa es Copyright © 1996 Silicon Graphics Computer Systems, Inc.. Más información sobre copyright puede encontrarse en el directorio sg.txt HelpAndSupport de tu instalación de Xtreme.

Algún código de programa es Copyright© 1994 Hewlett-Packard Company. Más información de copyright en el directorio hp.txt HelpAndSupport de la instalación del programa.

Parte de este software está basado en el trabajo del Independent JPEG Group.

El filtro de importación PDF incluye y utiliza los programas externos GPL: fax2png.exe and fax2tiff.exe. El código fuente para estos programas está disponible en las siguientes páginas web, o también los puedes encargar a Xara:

MAGIX Web Designer 6 utiliza la biblioteca de compresión de datos zlibwww.zlib.net.

Todas las otras marcas comerciales o marcas comerciales registradas son propiedad de sus respectivos fabricantes.

Index 363

Index

¿

¿Cuáles son las novedades en MAGIX Web Designer 6?...............................10 ¿Por qué Web Designer es tan especial? ......................................................13 ¿Qué funciones de MAGIX Web Designer 6 son compatibles con Flash?.....300 ¿Qué son las funciones deshacer y rehacer?.................................................87

A

Abrir (barra de control estándar o Ctrl+O)....................................................342 Abrir enlace en:...........................................................................................200 Abrir un documento de animación...............................................................307 Abrir un documento existente .......................................................................64 Abrir una segunda ventana ...........................................................................69 Acelerar y desacelerar.................................................................................304 Acerca de MAGIX Web Designer 6..............................................................352 Acerca de Web Designer ..............................................................................15 Activación y desactivación de las barras de navegación del sitio..................257 Actualización de la barra de navegación en todas las páginas .....................261 Actualizar objetos repetidos ........................................................................348 Actualizar programa....................................................................................352 Acuerdo de licencia de usuario final de clientes de XARA Web Designer......358 Adaptación automática ...............................................................................315 Adaptación múltiple ....................................................................................316 Adaptación personalizada ...........................................................................316 Adaptar texto a la curva / Eliminar texto de la curva ....................................348 Agradecimientos.........................................................................................361 Agregado de archivos de películas y animaciones .......................................271 Agregado y edición de botones...................................................................258 Agregar archivos Flash..................................................................................62 Agregar menús y submenús .......................................................................259 Agregar nuevas páginas a tu página web ......................................................23 Agregar nuevos botones ...............................................................................47 Agregar y quitar sangrías ............................................................................170 Agrupar (barra de control arreglo o Ctrl+G)..................................................347 Agrupar y desagrupar objetos .....................................................................107 Ajustando la región cortada ........................................................................250 Ajustar a cuadrícula ....................................................................................103 Ajustar a cuadrícula (. del teclado numérico)................................................351 Ajustar a guías (2 del teclado numérico) ......................................................351 Ajustar a objetos (* del teclado numérico) ....................................................351 Ajustar el ancho de los botones a las etiquetas ...........................................256 Ajustar el margen izquierdo y derecho de un texto sobre una curva.............157 Ajuste .........................................................................................................103 Ajuste de una transparencia de mapa de bits ..............................................225 Ajuste del fondo de la página para un mapa de bits ....................................226

364 Index

Ajuste magnético de objeto ........................................................................ 105 Ajuste y ancho de línea............................................................................... 104 Al final de una línea:.................................................................................... 121 Al inicio de una línea: .................................................................................. 121 Alineación .......................................................................................... 110, 111 Alineación (Ctrl+Shift+L) ............................................................................. 348 Ampliar foto a 100%................................................................................... 245 Ampliar selección ......................................................................................... 90 Ancho / Alto ............................................................................................... 250 Animación .................................................................................................. 350

repeticiones y velocidad.......................................................................... 309 Animaciones en Flash................................................................................. 284 Anterior y Siguiente .................................................................................... 245 Añadir a la galería ......................................................................................... 86 Añadir nombres.......................................................................................... 114 Añadir un nuevo punto de control ............................................................... 120 Aplicación de colores de relleno y línea mediante arrastrar y soltar .............. 138 Aplicar atributos a historias de texto completas .......................................... 174 Aplicar estilos de texto ............................................................................... 169 Aplicar grupo suave (Ctrl+Alt+G)................................................................. 347 Aplicar transparencia a varios objetos......................................................... 190 Aplicar transparencia con gradación ........................................................... 189 Aplicar transparencia plana......................................................................... 189 Aplicar un efecto de resplandor .................................................................. 192 Aplicar una sombra .................................................................................... 192 Aplicar una sombra a varios objetos ........................................................... 194 Aplicar una sombra de pared...................................................................... 192 Aplicar una sombra de suelo ...................................................................... 192 Archivos de película MP4 y FLV.................................................................. 271 Archivos Flash............................................................................................ 271 Archivos JPEG integrados .......................................................................... 226 Archivos PDF ............................................................................................. 272 Archivos recientes ...................................................................................... 342 Área que permite clic.................................................................................. 201 Áreas de texto............................................................................................ 154 Arrastrar el segmento de línea .................................................................... 124 Arreglar ventanas ....................................................................................... 350 Atributos de la edición de fotos .................................................................. 231 Auto-optimización ...................................................................................... 247 Avanzado: edición de un diseño de botón de barra de navegación. ............ 264 Ayuda .................................................................................................. 15, 352 Ayuda de MAGIX Web Designer 6 .............................................................. 351

B

Barra de estado ........................................................................................... 91 Barra de herramientas principal .................................................................... 68 Barra de información .............................................................................. 21, 67 Barra de información de la herramienta de relleno....................................... 179 Barra de navegación del sitio...................................................................... 256

Index 365

Barras de control ..........................................................................67, 337, 350 Barras de control bloqueadas o flotantes ....................................................338 Barras de navegación .................................................................................254 Barras de navegación con primer y último botón diferente...........................266 Barras de navegación del sitio y plantillas....................................................258 Barras desplegables .....................................................................................18 Bloquear aspecto .......................................................................................250 Bloquear capas ..........................................................................................282 Borrar .........................................................................................................249 Borrar grupo suave (Ctrl+Alt+U) ..................................................................347 Botón Bloquear relación de aspecto .............................................................99 Botón de barras (barras de navegación) ........................................................48 Botón de red ..............................................................................................311 Botón Escalar anchos de línea ......................................................................98 Botón imprimir ............................................................................................311 Botón Imprimir... .........................................................................................311 Botón opciones ..........................................................................................311 Botones mouseover (rollover) ..................................................................47, 55 Botones que permiten clic y efectos de MouseOver ....................................305 Botones y menús........................................................................................258 Brillo/Contraste/!Temperatura del color/Saturación......................................247 Buscar un nombre de ítem............................................................................86

C

Calidad (barra de control estándar) .............................................................350 Calidad de imagen........................................................................................83 Calidad de llenado ......................................................................................314 Calidad de mapas de bits ...........................................................................294 Calidad de visualización de fotos ................................................................229 Cambiar colores de un relleno.....................................................................181 Cambiar curvas ..........................................................................................124 Cambiar el ancho de la columna .................................................................154 Cambiar el ancho de línea (grosor) ..............................................................131 Cambiar el ángulo de la columna ................................................................154 Cambiar el color de sombra o el efecto de relleno .......................................193 Cambiar el tamaño de fuente ......................................................................169 Cambiar el tamaño de las áreas de texto.....................................................155 Cambiar el tamaño de página .......................................................................72 Cambiar el tamaño de página de plantillas ....................................................42 Cambiar el tamaño, rotar y reposicionar la foto dentro de su propio marco..235 Cambiar el tipo de unión .............................................................................133 Cambiar el valor de zoom .............................................................................70 Cambiar el valor de zoom utilizando el ratón..................................................70 Cambiar el zoom utilizando la barra de información/barra de control de zoom71 Cambiar extremo de línea ...........................................................................133 Cambiar la transparencia de la sombra .......................................................193 Cambiar lados de la línea ............................................................................157 Cambiar los puntos cero de las reglas...........................................................82 Cambiar mayúsculas o minúsculas .............................................................158

366 Index

Cambiar selección de objetos....................................................................... 89 Cambiar tamaño utilizando el ratón............................................................... 99 Cambiar tamaño utilizando la barra de información ..................................... 100 Cambiar texto de botón................................................................................ 47 Cambio de la fuente de los botones de la barra de navegación ................... 262 Cambio de tamaño de widgets ................................................................... 273 Cambio del documento de plantilla en blanco............................................. 331 Cambio del tamaño de objetos (escalar) ....................................................... 98 Cambio del tamaño y la posición del relleno de mapa de bits...................... 184 Cantidad de palabras ................................................................................. 156 Capa de fondo de página ............................................................................. 28 Capa popup............................................................................................... 199 Capas ................................................................................................ 278, 323 Capas en páginas web............................................................................... 279 Capas especiales ....................................................................................... 281 Capas pop·up .............................................................................................. 56 Capas, mouseover (rollover) y pop·ups ......................................................... 54 Caracteres especiales (en la herramienta de texto)...................................... 356 Carga de un documento con detalles FTP .................................................. 218 Cerrar ........................................................................................................ 345 Cerrar (Ctrl+W) ........................................................................................... 343 Cerrar el documento .................................................................................... 77 Cerrar una forma ........................................................................................ 127 Clipart flash .................................................................................................. 24 Clonar .......................................................................................................... 96 Clonar (Ctrl+K) ........................................................................................... 346 Colocar objetos en la capa guía.................................................................. 106 Color del fondo de página ............................................................................ 26 Color previo y actual................................................................................... 140 Coloreado de mapa de bits ........................................................................ 183 Colorear formas ........................................................................................... 26 Colorear fotos ...................................................................................... 26, 234 Colores de animación................................................................................. 308 Colores de la línea de colores ..................................................................... 137 Colores de la página web ............................................................................. 24 Colores locales y colores originales............................................................. 142 Colores normales ....................................................................................... 144 Colores normales, tintes, tonalidades y colores vinculados.......................... 144 Colores para enlaces de sitios web............................................................. 203 Colores vinculados ..................................................................................... 145 Combinar formas........................................................................................ 129 Combinar formas (barra de control arreglo) ................................................. 348 Comillas inteligentes................................................................................... 159 Cómo crear sangrías francesas .................................................................. 164 Cómo sincronizar el texto empleando Grupos suaves (soft groups, en inglés)161 Comparar y restaurar el original .................................................................. 247 Compatibilidad entre el navegador y el texto............................................... 175 Compra y activación del MAGIX Web Designer 6 ............................................ 8 Conectar áreas de texto—flujo de texto ...................................................... 155 Configuración de impresora........................................................................ 344 Consejo del día .......................................................................................... 352

Index 367

Contenido del directorio de compatibilidad....................................................77 Contornear texto.........................................................................................348 Contornear texto alrededor de objetos ..........................................................39 Controles....................................................................................................325 Controles deslizantes de límites de selección ................................................91 Controles para rotar 90° .............................................................................245 Convertir texto en un gráfico .........................................................................44 Convertir una línea recta en una curva (y viceversa) .....................................125 Coordenadas X-Y .........................................................................................69 Coordinar selección ....................................................................................335 Copiar (barra de control edición o Ctrl+C) ...................................................345 Copiar / Pegar texto con formato (RTF) .......................................................174 Copiar estilos: pegar atributos ....................................................................112 Copiar estilos de texto ................................................................................174 Copiar objetos ......................................................................................22, 292 Copiar sombras a otros objetos ..................................................................195 Copias........................................................................................................312 Copias de memoria cero.............................................................................223 Copias de seguridad al cerrar el sistema .......................................................80 Copias de seguridad automáticas ...........................................................43, 78 Copias de seguridad de documentos abiertos ..............................................78 Copyright....................................................................................................358 Corrector de ortografía .........................................................................40, 160 Cortar (barra de control edición o Ctrl+X) ....................................................345 Cortar en documentos fotográficos .............................................................250 Cortar formas .............................................................................................130 Cortar objetos...............................................................................................94 Cortar objetos de las fotos..........................................................................233 Cortar, copiar y pegar ...................................................................................94 Creación de barras de navegación propias..................................................262 Creación de barras de símbolos..................................................................339 Creación de botones, banners y otros gráficos web ......................................58 Creación de grupo suaves ..........................................................................109 Creación de los botones MouseOver propios ................................................56 Creación de nuevos colores con nombre ....................................................143 Creación de panorámicas ...........................................................................253 Creación de tus propios esquemas de colores ............................................143 Creación de un tinte, una tonalidad o un color vinculado .............................145 Creación de una gradación de color lineal ...................................................177 Creación y edición de rectángulos con esquinas redondeadas ....................134 Crear agujeros en las formas.......................................................................129 Crear barra de navegación..........................................................................347 Crear círculos y elipses ...............................................................................135 Crear GIF animados....................................................................................307 Crear nuevos objetos de texto nuevos ..........................................................39 Crear rectángulos y cuadrados ...................................................................134 Crear tus propios colores con nombre ..........................................................31 Crear un cuadrado......................................................................................134 Crear un línea guía ......................................................................................106 Crear una animación...................................................................................307 Crear uniones en curva ...............................................................................125

368 Index

Crear uniones en punta .............................................................................. 125 Cuadrícula de pantalla .................................................................................. 80

D

Darle el tamaño completo a una foto .......................................................... 237 Dentro........................................................................................................ 110 Desactivación de la regeneración del marcador de posición........................ 274 Desagrupar (barra de control arreglo o Ctrl+U)............................................ 347 Desagrupar objetos .................................................................................... 107 Desagrupar, editar y reagrupar ................................................................... 265 Deseleccionar un objeto ............................................................................... 91 Desenfocar los bordes de la sombra........................................................... 193 Desenfoque / Enfoque................................................................................ 247 Desfijar una galería ..................................................................................... 340 Deshacer (barra de control estándar o Ctrl+Z)............................................. 345 Deshacer corte........................................................................................... 249 Deshacer y rehacer ...................................................................................... 87 Desplazamiento de la parte superior de la página ......................................... 29 Desplazamiento de los controles de inicio y fin de un relleno....................... 181 Desplazamiento y tranformación de una barra de navegación del sitio......... 257 Desplazar ................................................................................................... 334 Desplazar botones y herramientas .............................................................. 339 Desplazar el documento dentro de la ventana............................................... 72 Desplazar objetos................................................................................... 21, 93 Detención de la repetición de objetos ......................................................... 116 Detener repetición (Shift+Ctrl+Alt+O) .......................................................... 348 Diálogo de propiedades web ...................................................................... 196 Diálogo Propiedades de la barra de navegación.......................................... 255 Diccionario de usuario ................................................................................ 160 Difuminación ................................................................................................ 51 Difuminación (Feathering)............................................................................ 102 Directorios de compatibilidad ....................................................................... 76 Diseño del programa .................................................................................... 16 Diseño web basado en objetos..................................................................... 19 Distancia duplicación.................................................................................. 334 Distribuir..................................................................................................... 111 Documento seleccionado y barra de título .................................................... 67 Documentos abiertos ................................................................................. 351 Documentos fotográficos ........................................................................... 240 Documentos sin título................................................................................... 79 Duplicar ....................................................................................................... 95 Duplicar (barra de control edición o Ctrl+D)................................................. 346 Duplicar y clonar .......................................................................................... 95 Duración de frames para películas Flash y pasos intermedios ..................... 294

E

Edición de archivos de fotos....................................................................... 241 Edición de widgets existentes..................................................................... 270

Index 369

Edición en el lienzo .....................................................................................261 Edición interior ............................................................................................264 Editar colores con nombre ..........................................................................144 Editar el color de un objeto .........................................................................139 Editar el color principal................................................................................147 Editar el contorno de las fotos.....................................................................232 Editar texto .................................................................................................158 Editor de color (Ctrl+Shift+E).......................................................................349 Efectos MouseOver ......................................................................................54 Ejemplo: para cambiar el tamaño de una foto y guardarla en JPEG. ............231 El botón de propiedades.....................................................................280, 311 El color se transforma — el color de la animación cambia ...........................302 El diálogo de impresión...............................................................................311 El editor de color ........................................................................................140 El menú de fuentes .....................................................................................151 Eliminación de grupos suaves .....................................................................109 Eliminación de una barra de navegación del sitio de una página ..................257 Eliminar (.....................................................................................................346 Eliminar imágenes de la galería ...................................................................225 Eliminar las barras de control ......................................................................339 Eliminar objetos ............................................................................................95 Eliminar objetos de un grupo.......................................................................108 Eliminar objetos del documento ....................................................................94 Eliminar páginas de tu documento ................................................................74 Eliminar puntos ...........................................................................................122 Eliminar secciones de una galería..................................................................87 Eliminar selección/Restaurar atributos actuales (Esc)...........................346, 350 Eliminar un perfil .........................................................................................218 Eliminar una línea guía.................................................................................107 Eliminar una sombra ...................................................................................194 En el medio de una línea: ............................................................................121 Encabezados/Pies de página ......................................................................117 Enderezar horizonte ....................................................................................236 Enlace al archivo...................................................................................47, 199 Enlace automático de páginas ....................................................................257 Enlaces de texto .........................................................................................172 Enlaces, botones y barras de botones ..........................................................45 Enlazar a la página......................................................................................198 Enlazar a una dirección web .......................................................................198 Enlazar a una referencia (anchor)...........................................................46, 198 Espaciado de botón....................................................................................256 Espaciado de cuadrícula y regla..................................................................335 Espaciado de línea......................................................................................172 Espaciado de párrafos ................................................................................172 Esquemas de colores temáticos .................................................................142 Este documento va a ser una página web ...................................................333 Estilos de menú ..........................................................................................260 Exportación como Flash .............................................................................322 Exportación como formato Extended Metafile (EMF)....................................322 Exportación como mapa de bits..................................................................322 Exportación como metarchivo de Windows (.wmf).......................................322

370 Index

Exportación de archivos ............................................................................. 321 Exportación de archivos Photoshop PSD.................................................... 322 Exportación de páginas web con directorios de compatibilidad..................... 77 Exportación de un archivo Flash ................................................................. 289 Exportación DPI ......................................................................................... 323 Exportación rápida de HTML y formatos de gráficos web............................ 321 Exportar (Ctrl+Shift+E)................................................................................ 343 Exportar animación .................................................................................... 344 Exportar la animación ................................................................................. 308 Exportar página web .................................................................................. 344 Extender la línea. ........................................................................................ 120 Extender o reducir objetos.......................................................................... 100 Extracción del JPEG original ....................................................................... 227

F

Fijación de galerías ............................................................................... 84, 340 Fijar una galería .......................................................................................... 340 Finalizar la línea .......................................................................................... 120 Fluidez de la animación (smoothness) ......................................................... 298 Fondos avanzados ....................................................................................... 30 Formas vinculadas ....................................................................................... 31 Formatos de exportación............................................................................ 318 Formatos de importación............................................................................ 317 Foto emergente.......................................................................................... 200 Fotos ................................................................................................... 33, 293 Fotos de pantalla (screenshots) .................................................................. 234 Fotos emergentes ...................................................................................... 206 Fotos en miniatura con pop-up..................................................................... 35 Fotos pop-up ............................................................................................... 57 Fuentes compatibles con la web........................................................... 38, 152 Fuentes incrustadas ..................................................................................... 40 Función de botones de ratón...................................................................... 335 Funciones de Flash avanzadas ................................................................... 304 Funciones Detener e Ir a............................................................................. 304 Fusionar varias formas en una sola ............................................................. 129

G

Galería de líneas......................................................................................... 131 Galería de páginas y capas................................................................... 75, 275 Galerías................................................................................................ 83, 349 Generación automática del marcador de posición....................................... 270 GIF animados............................................................................................. 272 Girar objetos .......................................................................................... 21, 97 Girar objetos en el modo de cambio de tamaño............................................ 98 Girar utilizando el ratón................................................................................. 97 Gradaciones de color de varios niveles ....................................................... 186 Gráficos anclados ...................................................................................... 166 Gráficos de ejemplo ..................................................................................... 53

Index 371

Grupos .................................................................................................44, 300 Grupos suaves (soft groups, en inglés) ..........................................44, 108, 167 Grupos y capas ..........................................................................................108 Grupos y capas suaves...............................................................................280 Guardar ......................................................................................................226 Guardar (barra de control estándar o Ctrl+S) ...............................................343 Guardar como ............................................................................................343 Guardar como (en el menú Archivo) ..............................................................76 Guardar contraseña en el documento .........................................................217 Guardar copias de seguridad de documentos abiertos al cerrar el programa .79 Guardar el documento ..................................................................................75 Guardar en el perfil .....................................................................................217 Guardar estos detalles con el documento actual .........................................217 Guardar plantilla..........................................................................................343 Guardar todo..............................................................................................343 Guardar todo (en el menú Archivo) ................................................................76 Guardar tu trabajo. Creación de una página Web ..........................................42 Guardar y exportar fotos .............................................................................229

H

Hacer grupos transparentes en su conjunto ................................................333 Hacer que un objeto se rodee de texto .......................................................165 Herramienta de corte ..................................................................................248 Herramienta de difuminación.......................................................................356 Herramienta de optimización.......................................................................246 Herramienta de relleno..................................................................................50 Herramienta de sombra ................................................................................52 Herramienta de texto ..................................................................................355 Herramienta de transparencia .......................................................................51 Herramientas de dibujo .................................................................................49

I

Importación de archivos..............................................................................319 Importación de Clipart con color ...................................................................26 Importación de foto RAW............................................................................321 Importación de fotos...................................................................................220 Importación de fotos grandes .......................................................................29 Importación de imágenes desde una página web. .......................................321 Importación de PDF....................................................................................320 Importación de un archivo Photoshop PSD .................................................319 Importación e inserción de barras de navegación ........................................262 Importación y exportación...........................................................................317 Importante..................................................................................................322 Importar (Ctrl+Shift+I)..................................................................................343 Importar desde la web (Ctrl+Alt+W).............................................................343 Importar y exportar formatos de archivo compatibles ..................................317 Imprimiendo ...............................................................................................310 Imprimir (Ctrl+P)..........................................................................................345

372 Index

Imprimir a archivo....................................................................................... 312 Imprimir capas ........................................................................................... 313 Imprimir como ............................................................................................ 313 Inclinar objetos ........................................................................................... 101 Incrustación de fuentes .............................................................................. 175 Indicaciones generales sobre la exportación e importación ......................... 317 Información de documento................................................................... 15, 344 Iniciar un nuevo documento.......................................................................... 64 Inicio del MAGIX Web Designer 6 ................................................................. 64 Inserción .................................................................................................... 270 Inserción con otra herramienta de autoría web............................................ 290 Inserción de un GIF animado ........................................................................ 63 Inserción de un objeto flash en MAGIX Web Designer 6. ............................. 289 Inserción de una película MP4 o FLV ............................................................ 63 Inserción manual de marcadores de posición ............................................. 274 Insertar texto de ejemplo ('Lorem Ipsum') ................................................... 159 Insertar un Google Map................................................................................ 62 Integración de películas, Flash y otros widgets.............................................. 61 Intersección de formas ............................................................................... 130 Introducción ..........................................................13, 148, 219, 243, 284, 342 Introducir caracteres especiales.................................................................. 159 Introducir páginas en tu documento ............................................................. 73

J

Justificación o alineación de texto............................................................... 170 Justificado.................................................................................................. 256

L

La barra de estado ....................................................................................... 68 La capa actual............................................................................................ 278 La función de rotación................................................................................ 299 La función deshacer ..................................................................................... 87 La función rehacer........................................................................................ 88 La Galería de diseños ................................................................................. 330 La galería de frames ................................................................................... 290 La galería de mapa de bits ......................................................................... 224 La galería de páginas y capas..................................................................... 275 La galería de rellenos.................................................................................. 186 La herramienta de edición de formas .......................................................... 118 La herramienta de fotos........................................................................ 34, 243 La herramienta de ojos rojos....................................................................... 251 La herramienta de relleno ........................................................................... 177 La herramienta de selección ................................................................... 20, 89 La herramienta de sombra.......................................................................... 191 La herramienta de texto.............................................................................. 149 La línea de color ......................................................................................... 136 La página actual ........................................................................................... 73 La pestaña de frames................................................................................. 308

Index 373

La ventana MAGIX Web Designer 6...............................................................66 Las capas actuales siempre están visibles y pueden editarse. .....................332 Las capas MouseOff y MouseOver................................................................55 Las galerías ................................................................................................353 Las herramientas ........................................................................................353 Legal ..........................................................................................................358 Limitación de ángulo...................................................................................333 Lista con viñetas.........................................................................................170 Lista con viñetas y numeradas ......................................................................39 Lista numerada...........................................................................................171

Ll

Llevar atrás (barra de control arreglo o Ctrl+B) ............................................347

L

Lo que Flash puede hacer y lo que no puede hacer ....................................284 Lo que no puedes hacer con Flash en MAGIX Web Designer 6....................286 Los 6 tipos centrales de animación .............................................................285 Los beneficios explicados en detalle: ..........................................................243 Los indicadores ............................................................................................68

M

Manejo de formas.......................................................................................129 Manipulación de documentos .....................................................................353 Manipulación de objetos .............................................................................354 Mantener los nombres de las capas importadas..........................................333 Mapas de bits en otros formatos que el JPEG.............................................293 Marcadores de selección ..............................................................................91 Marco de selección.......................................................................................90 Marco de selección de objetos ...................................................................333 Márgenes de botón ....................................................................................263 Márgenes y objetos anclados......................................................................168 Márgenes y sangrías...................................................................................162 Más información .........................................................................................274 Más sobre Xara Group................................................................................358 Más Web Designer .....................................................................................352 Membresía del sitio del widget ....................................................................270 Menú Archivo .............................................................................................342 Menú Arreglo ..............................................................................................346 Menú Ayuda ...............................................................................................351 Menú contextual de la línea de colores........................................................137 Menú Edición..............................................................................................345 Menú Herramientas ....................................................................................349 Menú Ventana ............................................................................................350 Menús y shortcuts de teclado .....................................................................342 Mezcla y combinación de fotos ...................................................................228 Mezclar líneas curvas y rectas.....................................................................119

374 Index

Mezclar transparencias individuales y de grupo........................................... 190 Minimizar ventanas múltiples ........................................................................ 70 Mismo ancho para todos los botones ......................................................... 256 Modificación del tamaño de una barra de símbolos..................................... 339 Modo de pantalla completa ........................................................................ 338 Modo de pantalla normal / completa............................................................. 69 Modo Solo ................................................................................................. 281 Mostrar / ocultar reglas ................................................................................ 82 Mostrar bordes de impresión.............................................................. 310, 351 Mostrar cuadrícula (#) ................................................................................. 351 Mostrar guías (1 del teclado numérico) ....................................................... 351 Mostrar longitudes de texto compatibles con Windows............................... 334 Mostrar todo y desbloquear todo................................................................ 282 Mostrar y ocultar barras de control ............................................................. 338 Mover a la capa al frente (barra de control arreglo o Ctrl+Shift+U) ............... 346 Mover a la capa de atrás (barra de control arreglo o Ctrl+Shift+D)............... 347 Mover adelante (barra de control arreglo o Ctrl+Shift+F).............................. 347 Mover atrás (barra de control arreglo o Ctrl+Shift+B)................................... 347 Mover objetos .............................................................................................. 92 Mover objetos anclados ............................................................................. 167 Mover objetos de una capa a otra ................................................................ 55 Mover objetos entre capas ......................................................................... 283 Mover objetos hacia adelante o hacia atrás .................................................. 96 Mover objetos seleccionados debajo o dentro .............................................. 90 Mover páginas dentro del documento........................................................... 74 Mover puntos de control - Herramienta de edición de formas................... 122

N

Navegación instantánea del menú de fuente ............................................... 152 Navegar entre páginas.................................................................................. 74 Negrita y cursiva......................................................................................... 169 No puedes editar en el lienzo...................................................................... 257 Nombrar objetos ........................................................................................ 113 Nombres.................................................................................................... 349 Nombres aplicados .................................................................................... 114 Nombres para el directorio de compatibilidad ............................................... 77 Notas para la herramienta de foto............................................................... 251 Nueva ventana ........................................................................................... 350 Nuevo (barra de control estándar o Ctrl+N)................................................. 342 Nuevo de la Galería de diseños .................................................................. 342

O

Objetos de fotos......................................................................................... 220 Objetos de marcador de posición ............................................................... 215 Objetos elásticos.......................................................................................... 43 Objetos en la página..................................................................................... 18 Objetos guía y líneas guía ........................................................................... 105 Objetos repetidos....................................................................................... 114

Index 375

Objetos sin movimiento...............................................................................302 Ocultar botones y herramientas ..................................................................340 Ocultar capas .............................................................................................281 Opción Guardar (en el menú Archivo) ............................................................75 Opciones (Ctrl+Shift+O) ..............................................................................350 Opciones de impresión ...............................................................................345

pestaña...................................................................................................315 pestaña Salida ........................................................................................313

Opciones de la foto emergente ...................................................................207 Opciones de página....................................................................................344 Opciones de texto ......................................................................................314 Opciones del menú.....................................................................................331 Opciones flash............................................................................................308 Operaciones de capa..................................................................................280 Operaciones de color avanzadas ................................................................141 Optimización...............................................................................................315 Optimizar foto .............................................................................................349 Optimizar fotos y mapas de bits ..................................................................238 Optimizar todos los JPEG ...........................................................................349 Orden de los objetos ....................................................................................20 Orden de múltiples ventanas.........................................................................70 Orientación .................................................................................................255 Otros ..........................................................................................................357 Otros aspectos interesantes .......................................................................258 Otros formatos de película ..........................................................................271

P

Páginas ......................................................................................277, 312, 346 Páginas múltiples en el documento ...............................................................73 Paneles de texto ...........................................................................................40 Pantalla completa (8 del teclado numérico)..................................................351 Para añadir más objetos a un grupo............................................................108 Para crear un grupo....................................................................................107 Para dibujar un segmento de línea curvo:....................................................119 Para dibujar un segmento de línea recto .....................................................119 Pegar (barra de control edición o Ctrl+V) .....................................................345 Pegar en lugar (Ctrl+Shift+V) .......................................................................345 Pegar formato/atributos (Ctrl+Shift+A).........................................................346 Personalización de Web Designer ...............................................................331 Pestaña ......................................................................................................202 Pestaña Copias de seguridad .....................................................................337 Pestaña Cuadrícula y regla..........................................................................334 Pestaña de opciones ..................................................................................329 Pestaña de página ......................................................................................204 Pestaña Enlace...........................................................................................197 Pestaña General .........................................................................................332 Pestaña Imagen..........................................................................................206 Pestaña Marcador de posición....................................................................212 Pestaña Mouse-over...................................................................................210

376 Index

Pestaña Opciones de paleta ....................................................................... 326 Pestaña Publicar ........................................................................................ 215 Pestaña Ratón ........................................................................................... 335 Pestaña Tamaño de mapa de bits .............................................................. 328 Pestaña Tamaño de página ........................................................................ 337 Pies de página ........................................................................................... 115 Pop-ups deslizantes................................................................................... 246 Preguntar antes de aplicar el atributo actual ............................................... 333 Primeros pasos ............................................................................................ 16 Principios básicos ...................................................................................... 286 Programa de afiliado .................................................................................. 352 Propiedades de GIF animados.................................................................... 308 Propiedades del mapa de bits .................................................................... 226 Propiedades web (Ctrl+Shift+W) ................................................................. 349 Publicación ................................................................................................ 218 Publicar página web ................................................................................... 344 Publicar tu página web ................................................................................. 59

R

Radio para alineación magnética ................................................................ 336 Recortar fotos ............................................................................................ 232 Recortar o cortar imágenes ........................................................................ 248 Recortar y cortar ........................................................................................ 296 Recuperación de cierres anormales del programa......................................... 80 Recuperación de copias de seguridad .......................................................... 80 Reemplazar con código HTML ................................................................... 213 Reemplazar con Flash ................................................................................ 213 Reemplazar con un archivo gráfico ............................................................. 213 Registrarme ............................................................................................... 352 Regla de los tercios.................................................................................... 249 Reglas............................................................................................ 68, 81, 161 Rehacer (barra de control estándar o Ctrl+Y) .............................................. 345 Relleno de formas con un mapa de bits ...................................................... 225 Relleno fractal ............................................................................................ 185 Rellenos ....................................................................................................... 93 Rellenos circulares ..................................................................................... 181 Rellenos de mapa de bits ........................................................................... 182 Rellenos elípticos........................................................................................ 182 Rellenos lineales......................................................................................... 180 Rellenos lisos ............................................................................................. 180 Reordenar ítems en la galería........................................................................ 86 Reordenar los colores de la línea de color................................................... 137 Reorganizar galerías ................................................................................... 341 Repetir en todas las páginas (Shift+Ctrl+Alt+R) ........................................... 348 Resolución de foto ..................................................................................... 223 Resolución de foto - ¡es todo automático!..................................................... 36 Resolución de transparencia....................................................................... 314 Restaurar las barras de control / galerías por defecto ................................. 341 Restricciones de diseño de botones ........................................................... 263

Index 377

Restringir la línea.........................................................................................124 Resumen ....................................................................................................323 Resumen de animación de MAGIX Web Designer 6 Flash............................306 Resumen de shortcuts del teclado numérico...............................................107 Resumen del diálogo de exportación JPEG, PNG, GIF y BMP .....................324 Revisar ortografía mientras se escribe .........................................................350 Revisiones ....................................................................................................79 Rotación.....................................................................................................298 Rotación con ángulos exactos (utilizando la barra de información) .................98

S

Selección de idioma....................................................................................160 Selección de la ventana que se quiere visualizar............................................70 Selección de objetos con ayuda de la herramienta de sombras ...................195 Selección interna ..........................................................................................90 Selección y capas.........................................................................................91 Seleccionar bajo ...........................................................................................90 Seleccionar ítems .........................................................................................86 Seleccionar múltiples puntos de control ......................................................121 Seleccionar objetos ......................................................................................89 Seleccionar todo (Ctrl+A) ............................................................................346 Seleccionar todo el objeto de texto .............................................................158 Seleccionar todos los objetos .......................................................................91 Seleccionar un objeto dentro de un grupo...................................................108 Seleccionar y configurar una impresora.......................................................310 Separadores de menú ................................................................................259 Separar una forma ......................................................................................127 Shortcuts de teclado ..................................................................................353 Sin pérdidas vs. Con pérdidas (lossless vs. lossy)........................................227 Sincronización de texto...............................................................................109 Soltar una copia............................................................................................92 Sombras.....................................................................................................191 Sombras suaves, texto relleno de color, texto transparente ...........................39 Suavizar una línea .......................................................................................123 Subrayado de texto ....................................................................................169 Subtítulos de imagen ..................................................................................209 Superíndice y subíndice ..............................................................................172 Sustitución de archivos de imagen..............................................................319 Sustitución de los rellenos de mapa de bits.................................................183 Sustitución de múltiples fotos .......................................................................34 Sustitución de múltiples fotos en simultáneo ...............................................221 Sustituir fotos .............................................................................................221

T

Tab...............................................................................................................92 Tabulaciones ..............................................................................................163 Tabulaciones personalizadas ......................................................................163 Tabulaciones, márgenes y sangrías.............................................................161

378 Index

Tamaño de foto inicial ................................................................................ 222 Tamaño de fuente ........................................................................................ 38 Tamaño de lista de archivos recientes ........................................................ 332 Tamaño de página ....................................................................................... 41 Terminología .............................................................................................. 149 Texto ................................................................................................... 37, 323 Texto alrededor de objetos......................................................................... 165 Texto dentro de grupos para páginas web.................................................. 173 Texto en una columna ................................................................................ 153 Texto girado................................................................................................. 39 Texto siguiendo una curva.................................................................. 157, 163 Texto simple............................................................................................... 153 Texto sincronizado ....................................................................................... 45 Tintes......................................................................................................... 145 Tipo de imagen web................................................................................... 210 Tipos de relleno.......................................................................................... 178 Tipos de tabulaciones personalizadas......................................................... 163 Tonalidades ............................................................................................... 145 Trabajar con colores................................................................................... 136 Trabajar con documentos............................................................................. 64 Trabajar con fotos ...................................................................................... 219 Trabajar con objetos..................................................................................... 89 Trabajar con textos .................................................................................... 148 Traer al frente (barra de control arreglo o Ctrl+F) ......................................... 347 Transparencia .................................................................................... 189, 303 Transparencia en un grupo......................................................................... 300 Tu primera animación ................................................................................. 287

U

Ubicación de la copia de seguridad .............................................................. 79 Un ejemplo................................................................................................. 184 Una página web en 6 pasos ......................................................................... 14 Unir líneas .................................................................................................. 126 URL en Flash.............................................................................................. 303 Usar la pipeta para escoger colores............................................................ 141 Uso avanzado de objetos repetidos............................................................ 115 Uso de la herramienta de zoom .................................................................... 70 Uso de las galerías ....................................................................................... 85 Uso del control de curva............................................................................. 124 Utilización de fotos como relleno ................................................................ 222 Utilización de la herramienta de fotos.......................................................... 244 Utilización de los campos de texto de la barra de información..................... 122 Utilización de plantillas de barras de navegación......................................... 254 Utilización de plantillas, cliparts y widgets ..................................................... 23 Utilizar colores habituales para enlaces de sitios web.................................. 200

V

Velocidad de la animación .......................................................................... 297

Index 379

Ventajas de la herramienta de fotos.............................................................243 Ver una foto ampliada en su tamaño completo............................................237 Ver una galería..............................................................................................84 Vista previa .................................................................................................329 Vista previa de fuente en tiempo real ...........................................................152 Vista previa de la página (F12).....................................................................344 Vista previa de tamaño de fuente en tiempo real .........................................152 Vista previa de tu página web .......................................................................22 Vista previa de un objeto flash en MAGIX Web Designer 6. ..........................289 Vista previa en el navegador .......................................................................309 Vista previa flash.........................................................................................344 Visualización del punto de anclado..............................................................167 Visualizar fuentes utilizadas .........................................................................175 Visualizar página web..................................................................................343 Voltear objetos............................................................................................100 Volver a publicar solamente los archivos modificados..................................219

W

Widgets ........................................................................................................24 Widgets de la galería de diseños .................................................................269 Widgets de otros sitios de widgets..............................................................272 Widgets de sitios web.................................................................................268 Widgets y marcadores de posición

todo automático......................................................................................268

Z

Zoom..........................................................................................................353 Zoom 1: 1...................................................................................................245 Zoom y desplazamiento de la página ............................................................17

Manual MAGIX Web Designer 6 en español

Documents

Transcript of Manual MAGIX Web Designer 6 en español