2

Compra y activacin del MAGIX Web Designer 6

IndiceCompra y activacin del MAGIX Web Designer 6 Cules son las novedades en MAGIX Web Designer 6? Introduccin Por qu Web Designer es tan especial? Una pgina web en 6 pasos Ayuda Informacin de documento Acerca de Web Designer Primeros pasos Diseo del programa Objetos en la pgina Diseo web basado en objetos La herramienta de seleccin Vista previa de tu pgina web Utilizacin de plantillas, cliparts y widgets Colores de la pgina web Fotos Texto Tamao de pgina Guardar tu trabajo. Creacin de una pgina Web Objetos elsticos Grupos Enlaces, botones y barras de botones Herramientas de dibujo Capas, mouseover (rollover) y popups Creacin de botones, banners y otros grficos web Publicar tu pgina web Integracin de pelculas, Flash y otros widgets Trabajar con documentos Inicio del MAGIX Web Designer 6 Iniciar un nuevo documento Abrir un documento existente La ventana MAGIX Web Designer 6 Abrir una segunda ventana Cambiar el valor de zoom Desplazar el documento dentro de la ventana Cambiar el tamao de pgina 8 10 13 13 14 15 15 15 16 16 18 19 20 22 23 24 33 37 41 42 43 44 45 49 54 58 59 61 64 64 64 64 66 69 70 72 72

Compra y activacin del MAGIX Web Designer 6Pginas mltiples en el documento Guardar el documento Directorios de compatibilidad Cerrar el documento Copias de seguridad automticas Cuadrcula de pantalla Reglas Calidad de imagen Galeras Deshacer y rehacer Trabajar con objetos La herramienta de seleccin Mover objetos Eliminar objetos del documento Duplicar y clonar Mover objetos hacia adelante o hacia atrs Girar objetos Cambio del tamao de objetos (escalar) Voltear objetos Extender o reducir objetos Inclinar objetos Difuminacin (Feathering) Ajuste Objetos gua y lneas gua Resumen de shortcuts del teclado numrico Agrupar y desagrupar objetos Grupos suaves (soft groups, en ingls) Alineacin Copiar estilos: pegar atributos Nombrar objetos Objetos repetidos La herramienta de edicin de formas Para dibujar un segmento de lnea recto Mezclar lneas curvas y rectas Para dibujar un segmento de lnea curvo: Extender la lnea. Finalizar la lnea Aadir un nuevo punto de control Seleccionar mltiples puntos de control Eliminar puntos Mover puntos de control - Herramienta de edicin de formas Suavizar una lnea Restringir la lnea Cambiar curvas 73 75 76 77 78 80 81 83 83 87 89 89 92 94 95 96 97 98 100 100 101 102 103 105 107 107 108 110 112 113 114 118 119 119 119 120 120 120 121 122 122 123 124 124

3

4

Compra y activacin del MAGIX Web Designer 6Convertir una lnea recta en una curva (y viceversa) Unir lneas Separar una forma Cerrar una forma Manejo de formas Combinar formas Cambiar el ancho de lnea (grosor) Galera de lneas Crear rectngulos y cuadrados Crear crculos y elipses Trabajar con colores La lnea de color Aplicacin de colores de relleno y lnea mediante arrastrar y soltar Editar el color de un objeto El editor de color Colores locales y colores originales Esquemas de colores temticos Creacin de tus propios esquemas de colores Creacin de nuevos colores con nombre Editar colores con nombre Colores normales, tintes, tonalidades y colores vinculados Creacin de un tinte, una tonalidad o un color vinculado 125 126 127 127 129 129 131 131 134 135 136 136 138 139 140 142 142 143 143 144 144 145

Trabajar con textos 148 Introduccin 148 Terminologa 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 ortografa 160 Cmo sincronizar el texto empleando Grupos suaves (soft groups, en ingls)161 Tabulaciones, mrgenes y sangras 161 Texto alrededor de objetos 165 Grficos anclados 166 Aplicar estilos de texto 169 Enlaces de texto 172 Texto dentro de grupos para pginas web 173 Copiar estilos de texto 174 Copiar / Pegar texto con formato (RTF) 174 Visualizar fuentes utilizadas 175

Compra y activacin del MAGIX Web Designer 6Incrustacin de fuentes Compatibilidad entre el navegador y el texto La herramienta de relleno Creacin de una gradacin de color lineal Tipos de relleno Barra de informacin de la herramienta de relleno Rellenos lisos Rellenos lineales Rellenos circulares Rellenos elpticos Rellenos de mapa de bits Relleno fractal Gradaciones de color de varios niveles La galera de rellenos Transparencia Aplicar transparencia plana Aplicar transparencia con gradacin Aplicar transparencia a varios objetos Sombras La herramienta de sombra Aplicar una sombra Cambiar el color de sombra o el efecto de relleno Eliminar una sombra Aplicar una sombra a varios objetos Seleccin de objetos con ayuda de la herramienta de sombras Copiar sombras a otros objetos Dilogo de propiedades web Pestaa Enlace Pestaa "Pgina web" Pestaa de pgina Pestaa Imagen Pestaa Mouse-over Pestaa Marcador de posicin Pestaa Publicar Trabajar con fotos Introduccin Objetos de fotos Importacin de fotos Resolucin de foto Copias de memoria cero La galera de mapa de bits 175 175 177 177 178 179 180 180 181 182 182 185 186 186 189 189 189 190 191 191 192 193 194 194 195 195 196 197 202 204 206 210 212 215 219 219 220 220 223 223 224

5

6

Compra y activacin del MAGIX Web Designer 6Archivos JPEG integrados 226 Sin prdidas vs. Con prdidas (lossless vs. lossy) 227 Mezcla y combinacin de fotos 228 Calidad de visualizacin de fotos 229 Guardar y exportar fotos 229 Atributos de la edicin 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 tamao, rotar y reposicionar la foto dentro de su propio marco 235 Enderezar horizonte 236 Ver una foto ampliada en su tamao completo 237 Darle el tamao completo a una foto 237 Optimizar fotos y mapas de bits 238 Documentos fotogrficos 240 Edicin de archivos de fotos 241 La herramienta de fotos Introduccin Utilizacin de la herramienta de fotos Herramienta de optimizacin Herramienta de corte Notas para la herramienta de foto La herramienta de ojos rojos Creacin de panormicas Barras de navegacin Utilizacin de plantillas de barras de navegacin Dilogo Propiedades de la barra de navegacin Barra de navegacin del sitio Botones y mens Actualizacin de la barra de navegacin en todas las pginas Edicin en el lienzo Cambio de la fuente de los botones de la barra de navegacin Importacin e insercin de barras de navegacin Creacin de barras de navegacin propias Mrgenes de botn Avanzado: edicin de un diseo de botn de barra de navegacin. Barras de navegacin con primer y ltimo botn diferente Widgets de sitios web Widgets y marcadores de posicin: todo automtico Widgets de la galera de diseos Agregado de archivos de pelculas y animaciones 243 243 244 246 248 251 251 253 254 254 255 256 258 261 261 262 262 262 263 264 266 268 268 269 271

Compra y activacin del MAGIX Web Designer 6Widgets de otros sitios de widgets Cambio de tamao de widgets Insercin manual de marcadores de posicin Ms informacin Galera de pginas y capas La galera de pginas y capas Pginas Capas Operaciones de capa Capas especiales Ocultar capas Modo Solo Bloquear capas Mostrar todo y desbloquear todo Mover objetos entre capas 272 273 274 274 275 275 277 278 280 281 281 281 282 282 283

7

Animaciones en Flash 284 Introduccin 284 Principios bsicos 286 Tu primera animacin 287 Exportacin de un archivo Flash 289 La galera de frames 290 Fotos 293 Duracin de frames para pelculas Flash y pasos intermedios" (Movie frame rate and tween steps) 294 Recortar y cortar 296 Velocidad de la animacin 297 Fluidez de la animacin (smoothness) 298 Rotacin 298 Grupos 300 Qu funciones de MAGIX Web Designer 6 son compatibles con Flash? 300 El color se transforma el color de la animacin cambia 302 Transparencia 303 URL en Flash 303 Funciones de Flash avanzadas 304 Resumen de animacin de MAGIX Web Designer 6 Flash 306 Crear GIF animados 307 Propiedades de GIF animados 308 Imprimiendo Mostrar bordes de impresin Seleccionar y configurar una impresora El dilogo de impresin Opciones de impresin: pestaa Salida Opciones de impresin: pestaa "Diseo de la impresin" 310 310 310 311 313 315

8

Compra y activacin del MAGIX Web Designer 6Importacin y exportacin Indicaciones generales sobre la exportacin e importacin Importar y exportar formatos de archivo compatibles Importacin de archivos Exportacin de archivos Resumen del dilogo de exportacin JPEG, PNG, GIF y BMP La Galera de diseos Personalizacin de Web Designer Cambio del documento de plantilla en blanco Opciones del men "Herramientas" Pestaa General Pestaa Cuadrcula y regla Pestaa Ratn Pestaa Tamao de pgina Pestaa Copias de seguridad Barras de control Fijacin de galeras Restaurar las barras de control / galeras por defecto Mens y shortcuts de teclado Introduccin Men Archivo Men Edicin Men Arreglo Men Herramientas Men Ventana Men Ayuda Shortcuts de teclado Legal Copyright Acuerdo de licencia de usuario final de clientes de XARA Web Designer Agradecimientos Index 317 317 317 319 321 324 330 331 331 331 332 334 335 337 337 337 340 341 342 342 342 345 346 349 350 351 353 358 358 358 361 363

Compra y activacin del MAGIX Web Designer 6Cuando inicias la versin de prueba descargada de MAGIX Web Designer 6, la pantalla de inicio te presentar tres opciones. Comprueba la opcin que precises y se te explicar con ms instrucciones.

Compra y activacin del MAGIX Web Designer 6Introducir el nmero de serie Selecciona esta opcin si ya has encargado una copia de Web Designer e introduce el nmero que se te ha proporcionado en el e-mail para confirmar tu compra. Introduce tu direccin 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 opcin Descargar plantillas en el men de Ayuda de Web Designer. Comprar el programa. Selecciona esta opcin si deseas adquirir una copia de Web Designer. Se te enviar un nmero de serie con la compra. Continuar con la prueba Selecciona esta opcin si quieres continuar utilizando la versin de prueba gratis. A la derecha de esta opcin se te informar cuntos das de prueba tienes disponibles. Luego, haz clic en PROBAR EL PROGRAMA AHORA. Aviso importante: por favor, recuerda tu direccin de correo electrnico y contrasea que has utilizado para la compra de MAGIX Web Designer 6 puesto que los necesitars en el futuro, por ejemplo, si deseas realizar una actualizacin. Otras formas de compra Si no dispones de la versin de prueba puedes pedirla directamente en nuestra pgina web www.magix.com y recibirs un nmero de serie con el que luego podrs liberar la versin de prueba. Los productos de Xara ofrecen una muy buena relacin calidad-precio y adems ofrecemos descuentos en todos nuestros productos de grfico para instituciones de educacin. Ms detalles en nuestra pgina web.

9

10

Cules son las novedades en MAGIX Web Designer 6?

Cules son las novedades en MAGIX Web Designer 6?General Aspecto de la aplicacin completamente rediseado (diseo y smbolos) Herramientas y botones desplegables que presentan una interfaz de usuario ms simple, pero con acceso directo a una mayor cantidad de funciones comunes. Galera de "Pginas y capas" mejorada que suministra una forma rpida de visualizar y reordenar pginas y capas en cada pgina, por ejemplo, arrastrar y soltar para ordenar las pginas. El modo Solo permite aislar una capa. Galera de diseos con actualizacin automtica:la galera de diseos incluye nuevas secciones y contenido "online" que Xara puede actualizar de forma remota. Copia de seguridad automtica de todos los documentos abiertos. Copia de seguridad automtica y restauracin de documentos abiertos al cerrar la aplicacin. As puedes cerrar directamente Web Designer con documentos abiertos y, al iniciar Web Designer la prxima vez, todos los documentos abiertos se restaurarn. Autora web Galera de plantillas ampliada con nuevos diseos. Los diseos existentes se han actualizado. Un nuevo diseo "completo de pgina web" se suministra para todos los conjuntos de plantillas, lo que consiste en un sitio web preparado de ocho pginas enlazadas. Arrastrar y soltar widgets desde la galera de diseos y la nueva biblioteca de widgets. Las nuevas secciones de la galera de diseos 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 pelculas hasta caractersticas de comercio electrnico (como un botn "Comprar" para vender artculos o servicios de tu pgina web), formularios, mapas y mucho ms. Manejo optimizado de barras de navegacin (muy similar a la funcionalidad de Xara MenuMaker). Un nuevo objeto de nivel superior de la barra de navegacin puede arrastrarse como un objeto independiente. Escoge cualquier diseo de botn y convirtelo rpidamente en una barra de navegacin horizontal o vertical. Capacidad para crear una barra de navegacin con botones vinculados a todas las pginas de tu sitio web. La barra de navegacin se actualiza cuando agregas/quitas pginas. Resaltado automtico de los botones de las barras de navegacin de la "pgina actual". Submens DHTML con numerosas animaciones y efectos de transparencia Insercin directa de snippets HTML con creacin automtica de vista previa/marcador de posicin. Muchos add-ons y widgets de pginas web suministran un snippet de HTML para incluir en tu pgina. El Web Designer ahora acepta que pegues este snippet, lo detecta como un cdigo HTML y crea automticamente un marcador de posicin en la pgina, con una vista previa del snippet. Copia el cdigo HTML en el portapapeles y pgalo en Web Designer. Tras unos segundos aparecer un objeto de marcador de posicin con una imagen de vista previa, que puedes posicionar en cualquier lugar de la pgina web.

Cules son las novedades en MAGIX Web Designer 6? Carga sencilla de vdeo MP4 y reproductor de vdeo incluido. Arrastra y suelta un archivo de vdeo MP4 hasta la pgina y aparecer un reproductor de vdeo flash para reproducir el archivo que se cargar automticamente en tu servidor web. Nuevas opciones de "Vista previa de pgina actual" rpida 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 pgina actual o vista previa de todo el sitio web. Capacidad para admitir pginas de esquinas redondeadas con sombras proyectadas. Si admites el coloreado de la pgina de esta manera (al arrastrar un color hasta el tablero de dibujo), se activar una nueva capa de fondo de pgina en la galera de Pginas y capas, en donde podrs ajustar la sombra proyectada de la pgina rectangular con la herramienta de sombra para convertirla en un rectngulo redondeado (con la herramienta de rectngulos). Foto Ventanas emergentes de fotos en miniatura mejoradas y ms elegantes. Los efectos animados de fotos emergentes (al hacer clic sobre una foto se abre una ventana emergente con una versin ampliada) se ha mejorado para brindar efectos de animacin con calidad mejorada, una sombra proyectada opcional, ttulos, capturas de pantalla y oscurecimiento (la pgina debajo de la ventana emergente puede oscurecerse). Capacidad para crear un pase de fotos y Siguiente/Anterior en una galera o grupo de vistas en miniatura. Si cuentas con varias fotos en miniatura con el efecto de ventana emergente en la pgina, ahora puedes crear con ellas un pase de fotos con controles Siguiente/Anterior/Reproducir/Pausa y un guin cinematogrfico opcional con las miniaturas en la parte inferior de la ventana. Nueva funcin "Optimizar todos los JPEG". Esto reducir el tamao y resolucin de todas las fotos de un documento para ahorrar memoria y producir archivos .web o .xar ms pequeos. Llenado automtico de galeras. Arrastra y suelta varias fotos en simultneo para poblar una pgina de galera. Si arrastras y sueltas una seleccin de archivos de imagen desde tu explorador de archivos hasta una pgina de vistas en miniaturas, como cualquier diseo de galera de fotos de las plantillas (cada tema tiene un diseo de "galera de fotos"), esto puebla la galera. Reduccin automtica de la resolucin de importacin. Color Mejor compatibilidad con pginas y fondo, por lo que puede colorearse el tablero de dibujo de forma independiente a la pgina. Si arrastras un color hasta el rea del tablero de dibujo (fuera del rea visible de la pgina), esto te permite crear fondos independientes para la pgina y sus alrededores. Para la pgina y el rea del tablero de dibujo, si pulsas Ctrl y sueltas un mapa de bits en la pgina 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 galera de diseos para todos los temas. En vez de editar cada color original con nombre, ahora puedes cambiar todo el esquema de tu pgina. Puedes probarlo con el tema beta suministrado en la galera de diseos. Abre cualquier pgina del tema o el diseo "sitio web" que es un sitio web completo con ocho pginas. Al final de los diseos temticos hay una seleccin de los esquemas de color llamados "Esquema de color 1", etc. Simplemente arrastra y suelta estos esquemas hasta la pgina web para cambiar todos los colores originales.

11

12

Cules son las novedades en MAGIX Web Designer 6?Publicacin Recordar detalles del FTP con el documento, incluyendo la contrasea. El dilogo de propiedades de publicacin 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. Adems, puedes escoger guardar la contrasea FTP en el archivo. A pesar de que esta es una opcin potencialmente peligrosa (cualquiera que acceda al archivo .web puede actualizar tu pgina web), tambin es una herramienta muy til para los diseadores web con clientes, porque ofrece la opcin de enviar al cliente el archivo .web, instruirle que actualice el texto y luego pulse el botn Publicar para actualizar su pgina web. No es necesario que el cliente tenga conocimiento de las complejidades de la configuracin FTP. Perfiles FTP con nombre, incluyendo perfiles de terceros. Puedes guardar tu configuracin de FTP en un perfil con nombre. Esto es til si trabajas con mltiples pginas 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 pginas web gratis de MAGIX. De esta forma, podrs publicar tu pgina web como parte del MAGIX Mundo Online. Formas fciles de agregar enlaces en archivos externos (y cargarlos) como archivos PDF y Word, etc. Publicacin incremental. Cuando publicas tu pgina web, slo se cargarn aquellos archivos que se hayan modificado. Esto puede representar una mejora en la velocidad y productividad de sitios web medianos a grandes. Tambin significa que los adjuntos incluidos (p. ej. archivos PDF, vdeos, etc.) se cargarn solamente una vez. Calidad HTML mejorada, uso optimizado de CSS, divs eliminados, opciones para prrafos "HTML puros". Para usuarios avanzados que quieren "bloques HTML puros", ahora pueden ignorar el posicionamiento individual de lneas y hacer que cada prrafo de texto se emita como un bloque de texto en HTML. Para ello, aplica el nombre "HTMLBlockText" al bloque de texto. Ten en cuenta que los saltos de lnea no necesariamente sern los mismos que en el Web Designer (y pueden variar entre los exploradores), y que caractersticas como hacer fluir el texto alrededor de los grficos no funcionarn. Texto Compatibilidad con texto justificado. Hemos aadido la compatibilidad con el texto completamente justificado y esto funciona an con la caracterstica de texto alrededor del grfico. Herramienta de texto mejorada para incluir vietas, listas numeradas, sangras. Grficos anclados. Los fotos y los grficos pueden ahora flotar con el texto.

Introduccin

13

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

En las pginas web la presentacin grfica es tan importante como el contenido.

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

Por qu Web Designer es tan especial?Web Designer es nico porque es la nica herramienta de diseo web de forma libre que permite una verdadera libertad al disear una pgina web cuyo resultado es lo que ves. En otras palabras, puedes posicionar el texto, grficos y fotos en cualquier lugar de la pgina, configurar cualquier tamao, ngulo, superposicin, transparencia, etc. y Web Designer producir una pgina HTML precisa que funcionar perfectamente. Web Designer puede hacer cosas que se consideran casi imposibles con otros software de autora web, como hacer fluir el texto alrededor de fotos o formas irregulares. Incluye herramientas avanzadas de vectores grficos para que puedas dibujar lo que desees: desde formas simples hasta logos y grficos complejos. Tambin cuenta con optimizacin automtica de grficos (no slo produce imgenes de resolucin optimizada, sino que

14

Introduccintambin detecta los elementos que se repiten en toda la pgina web, lo que produce pginas ms rpidas y ms optimizadas). Es compatible con capas CSS con caractersticas avanzadas, como transparencia (incluyendo transparencia con gradacin), efectos mouse-over y ms. Crea pginas web HTML totalmente compatibles con los exploradores, las plataformas y XHTML. Adems, Web Designer es probablemente la herramienta de autora web ms fcil de aprender. Web Designer est pensado para diseadores grficos que no quieren aprender HTML ni lenguajes de scripting. Para diseadores grficos, es la herramienta prototipo para pginas web rpidas perfecta. Tambin est pensado para principiantes que simplemente quieren disponer de la forma ms fcil de crear pginas web de aspecto profesional. Web Designer no incluye herramientas de programacin, edicin de scripts ni una "vista HTML". Nuestra filosofa de diseo es la siguiente: no necesitas saber el lenguaje de programacin de PDF para crear un PDF. Por lo tanto, tampoco debes conocer nada acerca de HTML o Javascript para poder crear pginas web geniales.

Una pgina web en 6 pasosPara quienes no tienen mucha paciencia (la mayora de nosotros), se pueden descubrir las ventajas principales de Web Designer, siguiendo sencillamente las instrucciones en el documento inicial que se abre cuando comienzas a usar Web Designer. Se trata tanto de una introduccin bsica como de una pgina web real con la que puedes experimentar. Tambin puedes encontrar este documento de ejemplo en la galera de diseos. Haz clic en botn, abre la categora INTRODUCCIN y haz doble clic en el primer documento. Aqu puedes averiguar como cambiar los colores de la pgina web, corregir el texto, arrastrar y soltar fotos, mover objetos alrededor de la pgina y ms. Deshacer Recuerda que puedes deshacer cualquier cambio, utilizando el botn de deshacer o Ctrl+Z. Si mantienes pulsado el botn puedes deshacer todas las acciones hasta el comienzo.

Ayuda

15

AyudaSi necesitas ayuda para el manejo de este programa, a continuacin encontrars informacin 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 pginas de informacin). 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 descripcin 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. Tambin 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 ms detalles. Consejos para herramientas (tooltips): si colocas el cursor del ratn sobre un botn o control por un momento, aparecer un mensaje informndote de su funcin. Mens: si deseas saber cul es la funcin de un men, seleccinalo y pulsa "F1". Cajas de dilogo: si quieres saber lo que hace una caja de dilogo o cmo usarla, haz clic en "Ayuda". Pelculas: hay pelculas de demostracin que te ayudarn a sacar el mayor partido de MAGIX Web Designer 6. Escoge PELCULAS del men de AYUDA para ver una lista de las pelculas 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 tambin incluye otros foros relacionados con grficos). Xara Xone: visita Xara Xone (http://www.xaraxone.com/) para obtener excelentes fuentes de ayuda, incluyendo ms de diez aos de tutoriales de Photo & Graphic Designer, trucos y consejos y shareware de Xara. Newsletter "The Outsider": suscrbete a nuestra newsletter mensual "The Outsider" (con tutoriales mensuales y consejos, ofertas, arte inspiracional y mucho ms).

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

Cualquier texto que introduzcas en el campo de comentario se guardar como parte del archivo. Este comentario se mostrar cuando abras el dilogo de informacin de documento.

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

16

Primeros pasos

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

Diseo del programa

Barra de informacin: cambia con cada herramienta Zoom Visualizar pgina web Galera de pginas y capas Galera de diseos Herramienta de seleccin Herramienta de texto Herramienta de sombra Herramienta de edicin de fotos Lnea de color

Primeros pasosEstos son cuatro botones que se encuentran en la barra superior y se relacionan con las funciones en la pgina web. Tres de estas opciones tienen barras desplegables que se muestran cuando colocas el cursor del ratn sobre ellas y te ofrecen ms funciones.

17

Vista previa Enlace Opciones de pgina web Exportar

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

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

Zoom y desplazamiento de la pginaEstas funciones comunes estn hechas de manera sencilla: Para ampliar o alejar con el zoom, mantiene Ctrl pulsado y utiliza la rueda del ratn Para mover la pgina, pulsa la rueda del ratn y mueve (s, tambin es un botn) Para desplazar utiliza la rueda del ratn (o las barras de desplazamiento)

18

Primeros pasosTodas tus pginas en tu sitio web estn presentadas una tras otras, como en un programa de edicin de textos. Esto hace que sea muy til para ver toda tu pgina web, especialmente al alejarse con el zoom. Puedes arrastrar y soltar elementos entre pginas de esta manera. Cuando haces cambios de color de tema en todo el sitio, puede verse como los cambios afectan a todas las pginas. La pgina actual se destaca por las marcas en las 4 esquinas. En este ejemplo puedes ver que algunos artculos han sido colocados en el tablero de dibujo al lado de las pginas. No sern exportados como parte de tu pgina web. El rea del tablero de dibujo es normalmente un lugar donde guardar temporalmente grficos, fotos u otros objetos con los que ests trabajando.

Barras desplegablesAlgunas herramientas de la barra de herramientas principal estn agrupadas en un solo icono. Estos iconos cuentan con un pequeo tringulo indicador en la esquina inferior derecha y, cuando pasas el cursor del ratn por ellos, aparece una barra desplegable. La barra contiene otras herramientas que pertenecen a este grupo. Simplemente, mueve el cursor del ratn 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 vers el icono correspondiente en la barra de herramientas principal. Tambin hay algunas barras desplegables en la barra de herramientas de la parte superior de la ventana. Estas se utilizan para agrupar operaciones relacionadas en un solo icono. Esto las hace accesibles y no ocupan demasiado espacio en la barra. En el captulo Personalizacin obtendrs ms informacin sobre las barras desplegables.

Objetos en la pginaSi personalizas una plantilla o creas tus propios grficos desde el principio, puedes girar, redimensionar y posicionar cualquier cosa que desees en la pgina. Puedes redimensionar la pgina fcilmente al tamao que quieras y aadir nuevas pginas web a tu gusto. Ciertas caractersticas, como el cambio de combinaciones de colores, funcionan a travs de todas las pginas simultneamente. Estos son los tipos bsicos de elementos de pgina:

Primeros pasos Texto: al usar la herramienta de texto puedes crear todo tipo de ttulos y columnas de texto e incluso bloques de texto que fluyen de un bloque a otro. Tambin puedes crear listas con vietas y numeradas. La herramienta de texto de la barra de informacin proporciona controles de fuente, tamao y espaciado de lnea y ms. Puedes redimensionar el texto usando la herramienta de seleccin o escogiendo un punto alternativo o tamaos de pxeles. Tambin puedes girar el texto sorprendentemente desde cualquier ngulo, y usar la caracterstica automtica para hacer fluir el texto alrededor de objetos (p. ej. fotos) en la pgina. Grficos: cualquier tipo de logo, ttulo y la mayora de los botones que aparecen en tu pgina web son grficos. Web Designer es un programa de grficos vectoriales, lo que significa que puedes corregir la forma, girar y redimensionar tus objetos grficos sin prdida de calidad (a diferencia de herramientas de edicin y retoque fotogrfico como Photoshop). Y aunque no hay ningn estndar de grficos vectoriales para pginas web (para web todos los grficos tienen que ser formatos JPG, GIF o PNG) Web Designer crea automticamente el formato y resolucin adecuados. Por ejemplo, si quieres crear un panel coloreado para colocar detrs tu texto, lo haras dibujando un rectngulo o el objeto de rectngulo con esquinas redondeadas en la pgina, y colocndolo detrs del texto. Cuando guardas tu pgina web, se convierte automticamente en una imagen grfica PNG con la resolucin correcta. Fotos: hay pocas pginas web que no contienen algn tipo de foto. MAGIX Web Designer 6 tiene una gran gama de herramientas de retoque de fotografas. Puedes arrastrar y soltar fotos directamente desde tu cmara o desde la ventana del explorador de archivos, girarlas, optimizarlas, recortarlas, y Web Designer genera automticamente la resolucin de imagen JPG adecuada. Sustituir fotos existentes en plantillas es tan fcil como arrastrar y soltar, y puedes cambiar sencillamente el tamao y el ngulo de las fotos "dentro" de su marco. Puedes crear fcilmente fotos en miniatura sobre las que puedes hacer clic para que se abra una versin ampliada y puedes incluir opcionalmente controles de galera que permiten a los visitantes navegar por tus fotos o ver un pase de fotos automtico. Marcadores de posicin: estos son objetos grficos en la pgina que representan el tamao y la posicin de "widgets" dinmicos como animaciones flash, pelculas o formas. Al exportar tu sitio, el grfico del marcador de posicin se reemplaza con el cdigo requerido para hacer que el widget funcione y el widget aparece en la misma posicin en tu pgina. Consulta el captulo de "Widgets de pgina web" para ms detalles.

19

Diseo web basado en objetosTodo los tipos de elementos descritos ms arriba se refieren generalmente a objetos. Uno de los beneficios particulares de Web Designer es la libertad total para posicionar cualquier objeto en cualquier lugar de la pgina, que luego se respetar con exactitud en la pgina web final. La HERRAMIENTA DE SELECCIN puede ser utilizada para seleccionar cualquier objeto en la pgina y para mover (simplemente arrstralo), redimensionar o rotar los objetos. Puedes ajustar el orden de las capas (es decir, si un objeto aparece al frente o detrs de otro/s en la pgina), la utilizacin de las opciones del men Arreglo. Con la herramienta

20

Primeros pasosde seleccin puedes redimensionar objetos estirndolos desde las esquinas. Puedes girar cualquier objeto arrastrando desde dentro de los controles deslizantes de las esquinas. Y aunque las pginas web no admiten textos rotados, Web Designer sabe cmo crear automticamente la imagen grfica apropiada para que la pgina se vea siempre bien. Para agregar texto a tu pgina, selecciona la HERRAMIENTA DE TEXTO y haz clic en cualquier lugar de la pgina y empieza a escribir el texto. Tambin puedes crear columnas de texto, pulsando y arrastrando horizontalmente la herramienta de texto, o arrastrando horizontalmente los campos de texto. Ve a la seccin de texto en la parte inferior para ms detalles y al captulo Manejo de texto (en la pgina 147) para una informacin detallada acerca de las funciones de texto de MAGIX Web Designer 6 Puedes usar herramientas de dibujo para crear rectngulos normales o con esquinas redondeadas, crculos y elipses, y cualquier tipo de forma que desees, utilizando la herramienta de edicin de forma. Ve a la seccin herramientas de dibujo (en la pgina 48) para ms detalles.

Orden de los objetosTodos los objetos en la pgina estn colocados uno encima del otro. El objeto ms recientemente dibujado o creado est siempre arriba de todo, es decir delante de cualquier otro. Puedes ajustar la posicin de colocacin usando las opciones del MEN ARREGLO . Por ejemplo, cuando dibujas un nuevo rectngulo siempre aparece para cubrir todos los objetos que estn detrs suyo. Al presionar Ctrl+B (o el men ARREGLO > Llevar atrs) el objeto es movido detrs de todo lo dems. De modo similar, Ctrl+F trae cualquier objeto seleccionado hacia delante, quedando delante de todo lo dems. Hay una complicacin aadida: 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 seccin de capas (en la pgina 54) de ms abajo para ms detalles.

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

Primeros pasosPuedes hacer todas estas cosas simplemente estirando los objetos en la pgina, o con los controles deslizantes de seleccin alrededor del objeto, o puedes introducir valores numricos precisos. El objeto seleccionado con 4 u 8 controles deslizantes en su exterior y la barra de estado, en la parte inferior de la pantalla, tambin te indica qu objeto ha sido seleccionado.

21

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

Desplazar objetosLas teclas de flechas pueden ser utilizadas para desplazar los objetos seleccionados pxel a pxel. Si mantienes pulsada a la vez la tecla Shift, los objetos se desplazan de 10 en 10 pxeles.

Girar objetosHay dos modos de hacer girar un objeto. O bien, haciendo clic otra vez sobre el objeto para que los controles de seleccin cambien a controles de rotacin, con los que podrs estirar o hacer girar el objeto. O, cuando se ven los controles de esquinas, moviendo el cursor de ratn dentro de los controles de esquinas hasta que veas que el cursor cambia a un indicador de rotacin , entonces tambin podrs arrastrar para hacer girar el objeto seleccionado. Tambin puedes rotar casi todo en Web Designer, incluyendo fotos, ttulos, bloques de texto, y simplemente funcionar. Debido a que los navegadores web no pueden mostrar texto en ngulo, Web Designer convertir automticamente cualquier texto rotado en un grfico.

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

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

22

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

Copiar objetosPuedes utilizar las tpicas opciones de Copiar (Ctrl+C) y Pegar (Ctrl+V), aunque una forma rpida de copiar un elemento es, simplemente, arrastrndolo con el botn derecho del ratn.

Vista previa de tu pgina webCuando creas tu pgina web en Web Designer los documentos con los que trabajas muestran una vista previa exacta esttica, pero para comprobar el comportamiento de los popups, efectos MouseOver y Flash, es necesario utilizar la vista previa de navegador. Existen dos opciones de vista previa en la barra desplegable en la barra de herramientas web.

VISTA PREVIA DE PGINA WEB:

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

Si no has exportado tu sitio todava, estas vistas previas se exportan a una carpeta temporal en tu ordenador. Una vez que lo hayas exportado, la misma ubicacin de exportacin se utilizar siempre que hagas una vista previa, es decir, que el sitio exportado se actualiza constantemente. Nota: esta vista previa interna utiliza una versin simplificada del navegador de Internet Explorer. Para obtener una vista previa de tu pgina web en diferentes navegadores web, exprtala y luego abre el archivo .htm en el navegador que prefieras. El botn para exportar la pgina web es el ltimo botn 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 botn de vista previa, la exportacin se actualizar

Primeros pasostambin, y entonces slo ser necesario pulsar el botn de Actualizar en tu navegador (o presionar F5).

23

Utilizacin de plantillas, cliparts y widgetsAbre la galera de diseos haciendo clic en el botn de Galera de diseos en la barra de botones superior. Esto muestra las carpetas que contienen colecciones de diseos de pginas web y archivos grficos asociados que siguen un tema especfico. Tambin hay carpetas con widgets como formas, instalaciones de e-commerce, gadgets web y muchas otras caractersticas. Navega por las carpetas y haz doble clic para abrir un archivo como documento nuevo. Cada seccin temtica cuenta con una coleccin de diseos de pgina alternativos y otros elementos tiles como botones o paneles de texto expansibles. Cada tema generalmente contiene tambin una plantilla de pgina 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 galera hasta la pgina o con un doble clic. Algunas de las carpetas de la galera (especialmente las carpetas con widgets) se descargan automticamente de los servidores de Xara cuando ests online y abres la galera. Por lo tanto, la seleccin de carpetas y de artculos disponibles en las carpetas cambiar peridicamente. Regresa regularmente para ver las ltimas actualizaciones.

Agregar nuevas pginas a tu pgina webPuedes arrastrar cualquier diseo de plantilla desde la GALERA DE DISEOS en tu pgina. Si se trata de una plantilla de pgina, agregar una nueva pgina a tu pgina web, despus de preguntarte primero si quieres realizar algn cambio de color. Si arrastras un elemento de clipart como un botn, ttulo o foto, se agregar a la pgina en el lugar que lo sueltes y se te preguntar nuevamente si quieres modificar algn cambio de color. Adems de las pginas web con temas, la Galera de diseos tambin contiene carpetas con diseos de botones, banners, encabezados, objetos de fotos y ms. Simplemente arrastra el diseo adecuado desde la galera hasta tu pgina. Se te preguntar si deseas que el grfico coincida con los colores de tu pgina web o no. Si deseas que no lo hagan, an podrs editar los colores del grfico importado, lee a continuacin. Tus grficos importados son simplemente otro objeto en su pgina y puede reposicionarse, cambiarse su tamao y girarse utilizando la herramienta de seleccin. Para agregar una nueva pgina con el mismo diseo, la forma ms fcil es utilizar el botn de "copiar pgina" en la barra superior. Esto replica la pgina actual abajo. Podrs simplemente editar o eliminar los elementos segn lo desees. Esto tiene la ventaja de mantener la misma estructura de navegacin. Puedes aadir una nueva pgina en blanco seleccionando el men EDITAR > PGINAS > NUEVA PGINA .

24

Primeros pasosPuedes eliminar las pginas utilizando el mismo men de pginas.

Clipart flashMAGIX Web Designer 6 incluye la habilidad de crear animaciones flash desde cero (ver la seccin Animaciones flash (en la pgina 283)), pero tambin incluye una variedad de plantillas de flash que puedes personalizar. Las plantillas flash no se pueden arrastrar hacia la pgina directamente, deben abrirse como un documento de animacin separado que puedes personalizar como quieras y luego puedes guardar el archivo Flash (.swf) en tu disco local. Luego, utilizando la funcin marcador de posicin puedes crear un grfico de marcador de posicin y asociarlo con tu archivo Flash (.swf).

WidgetsAlgunos de los elementos de la GALERA DE DISEOS son widgets dinmicos que puedes aadir a tu sitio web de forma rpida y fcil. Al arrastrar uno de estos a tu pgina, 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 botn INSERTAR en la parte inferior de la ventana del explorador. Una imagen de marcador de posicin se generar automticamente, esto es, una imagen esttica de cmo se ver tu widget cuando est en tu sitio web. El widget no funcionar en la pgina de MAGIX Web Designer 6, all slo vers la imagen de vista previa. Simplemente haz una vista previa de tu pgina para ver tu widget en accin. Si encuentras otros widgets interesantes en Internet, en general, el proveedor del widget te suministrar un cdigo HTML para que copies y pegues en tu pgina web. Con MAGIX Web Designer 6 esto es muy fcil. Todo lo que necesitas hacer es ir a la herramienta de seleccin y luego pegar el cdigo en la pgina. MAGIX Web Designer 6 detectar que has pegado un cdigo HTML y renderizar una imagen de marcador de posicin para ti automticamente, que aparecer en tu pgina tras unos segundos. El cdigo ya estar aadido al marcador de posicin, por lo que al hacer la vista previa de la pgina, vers tu widget en funcionamiento. Para ms informacin, consulta Widgets (en la pgina 268).

Colores de la pgina webTodas las plantillas utilizan un pequeo conjunto de colores originales y varias sombras de estos colores originales. La forma ms fcil de cambiar el color de tu sitio es utilizar uno de los esquemas de color alternativos que se suministran con cada tema web en la GALERA DE DISEOS . Simplemente arrastra un esquema hasta la pgina para cambiar el color de todo el sitio o haz doble clic en l. O puedes editar cada uno de los colores originales individuales personalmente. Estos se denominan "colores con nombre" y aparecen en la parte izquierda de la lnea de colores a lo largo de la parte inferior de la ventana.

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 estndar Barra de estado . Muestra lo que se ha seleccionado y brinda consejos Mantn el cursor sobre un color para ver su nombre Simplemente haz clic en cualquier color con nombre y selecciona la opcin de edicin (si mantienes el cursor del ratn sobre el color vers el nombre del consejo de herramienta).

Cuando edites el color puedes arrastrar la pipeta para escoger colores de la pantalla, incluso de otras ventanas abiertas Selecciona el color a editar: Color de relleno/color de lnea del objeto seleccionado o cualquier color con nombre (original) Haz clic en la etiqueta para crear un color con nombre Haz clic para mostrar los controles de color ampliados Color anterior Color actual Arrastra hacia aqu para seleccionar cualquier tonalidad del tono seleccionado Arrastra hacia aqu para seleccionar cualquier tono El editor de color suministra una forma fcil de elegir cualquier color. Haz clic en los controles ampliados para introducir los valores RGB.

26

Primeros pasosObserva que cuando cambias un color original de esta forma, todas las tonalidades relacionadas utilizadas a lo largo del documento tambin cambiarn.

Colorear formasPuedes rellenar con un color cualquier forma dibujada, arrastra el color desde la LNEA DE COLOR y sultalo en la forma o selecciona primero el objeto y luego haciendo clic en la lnea de colores y escogiendo "ESTABLECER COLOR DE RELLENO ". De forma alternativa haz clic en el pequeo icono de editor de color (o presiona Ctrl+E) para visualizar el editor de color donde puedes ajustar cualquier color que desees. Puedes asignar un relleno de color con gradacin a un objeto dibujado utilizando la herramienta de relleno (en la pgina 176).

Importacin de Clipart con colorSi importas un grfico clipart arrastrndolo desde la Galera de diseos, utilizando la opcin de Importacin o arrastrando un archivo .web o .xar hasta la pgina, generalmente se te preguntar si deseas vincular los colores. Si seleccionas que no, entonces cualquier color con nombre utilizado en el grfico se aadir a la lnea de colores. Haciendo clic en cualquier color de la lnea de color, te dar la opcin de editar el color.

Colorear fotosSi 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 seleccinala de la forma usual y haz clic en el rombo blanco al final de la lnea de color. Puedes definir que el color claro sean dos colores cualquiera, no solo blanco y negro. Nota: Si la foto est dentro de un grupo, como muchos de los objetos de foto estn dentro de las plantillas o de los clipart, entonces tienes que seleccionar primero el interior de la foto. Puedes hacer esto pulsando la tecla Ctrl y haciendo clic en el objeto con la herramienta de seleccin. Otra forma de seleccionar directamente la foto es hacer clic en la foto con la HERRAMIENTA DE FOTO .

Color del fondo de pginaLa mayora de diseos de pgina en la galera de diseos tienen dos tipos de fondo. Un fondo de pgina amplio que se extiende a travs del fondo de la ventana completa del navegador. Encima de esto se encuentran por lo general los elementos de pgina web, que suelen consistir en varios paneles de colores. En la lnea de colores suele haber un color denominado "Color de fondo", otro "Color de panel" y editndolos puedes controlar los distintos colores de fondo. Los dems 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 pgina Cuando abres una nueva pgina (Archivo > Nuevo >), la pgina est por defecto en blanco. Este es el fondo sobre el que dispones todos los elementos de tu pgina web. Si arrastras un color desde la lnea de colores a la pgina y lo sueltas, el fondo de la pgina adoptar ese color. En el navegador web este color de fondo se muestra en todo el rea del fondo de la ventana.

28

Primeros pasosSin embargo, tambin puedes configurar el fondo de pgina en un solo color, tal como se describe ms arriba, y luego fijar el rea alrededor de la pgina en otro color. Esta rea alrededor de la pgina se denomina tablero de dibujo. Simplemente arrastra un color hasta el tablero de dibujo y determina el color de pgina, tal como se describe ms arriba. Ahora, al hacer la vista previa de tu pgina vers que el color de fondo de la ventana del navegador tiene el color del tablero de dibujo y la pgina cuenta con su propio color.

Puedes utilizar el editor de colores para modificar los colores. Haz clic derecho sobre la pgina y escoge CAMBIAR FONDO DE PGINA para abrir el editor de color, ahora podrs editar el color de la pgina. 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 galera de mapas de bits, desplaza la pgina hasta la foto que acabas de cargar, haz clic en la misma para seleccionarla y a continuacin haz clic en el botn FONDO en la galera.

Capa de fondo de pginaCuando configuras el color del fondo de pgina al soltar un color en la pgina tal como se describe ms arriba, esto en realidad aade una capa a tu documento, que podrs ver si abres la GALERA DE PGINAS Y CAPAS. Se llama CAPA DE FONDO DE PGINA. Esta capa se encuentra generalmente bloqueada, por lo que no puedes seleccionarla y editar su contenido. Sin embargo, puedes desbloquearla en la galera de Pginas y capas para realizar cierto tipo de edicin limitada, para personalizar el fondo de tu pgina. Simplemente haz clic en el smbolo del candado junto a la capa "Fondo de pgina" para desbloquearla. Ahora, si haces clic en el fondo de la pgina, vers que se selecciona un rectngulo (mira la barra de estado). Este rectngulo cubre toda la pgina y se utiliza para configurar su color. Puedes editar de forma limitada este rectngulo, insertarle un relleno con gradacin

Primeros pasoscon la HERRAMIENTA DE RELLENO o redondear sus esquinas con la herramienta de rectngulos. NOTA: debes configurar tambin el color del tablero de dibujo antes de poder modificar el color uniforme de tu pgina.

29

Desplazamiento de la parte superior de la pginaGeneralmente, si configuras la pgina y el tablero de dibujo con diferentes colores, al hacer la vista previa vers que la pgina se extiende hasta la parte superior de la ventana del explorador. No puedes ver el color del tablero de dibujo encima de tu pgina. Sin embargo, puedes aadir un desplazamiento para que haya cierto espacio entre tu pgina y el navegador web. Para agregar un desplazamiento, debes cambiar el origen de la pgina. Generalmente, el origen de la pgina est configurado en la esquina superior izquierda de tu pgina. Al mover el origen hacer arriba 20 pxeles, por ejemplo, agregas un margen de 20 pxeles a la parte superior de tu pgina cuando se visualiza en un navegador web. Puedes cambiar el origen de dos formas. La forma ms sencilla es abrir el dilogo HERRAMIENTAS > OPCIONES y en la pestaa CUADRCULA Y REGLA aumentar el valor de la coordenada Y del punto de origen. En general, esto est configurado como el tamao vertical de tu pgina, por lo que debes aumentar el tamao del margen de desees ver. Entonces, por ejemplo, si tu pgina tiene 700 pxeles de alto, cambia el valor Y de la coordenada de origen de 700 a 720 para agregar un desplazamiento de 20 pxeles. Como alternativa puedes configurar el punto de origen de forma interactiva. Activa las reglas con VENTANA > VER REGLAS (Ctrl+L). Luego haz clic y arrastra el botn de cruce, ubicado en el lugar en que la regla vertical se cruza con la horizontal, en la parte superior izquierda de lienzo. Ahora, ests desplazando por la posicin original, por lo que coloca la distancia vertical apropiada sobre la esquina izquierda superior de tu pgina. Cambiar la posicin horizontal del origen no tiene efecto en la posicin horizontal de tu pgina, por lo que no deberas modificarla.

Importacin de fotos grandesAl importar fotos grandes, MAGIX Web Designer 6 te pregunta si deseas importar una versin reducida de tus fotos. Si tu documento va a incluir varias fotos, particularmente un documento de pgina web, es importante que escojas esta opcin de tamao reducido. De lo contrario, si contiene varias fotos, el tamao del archivo de diseo ser mucho ms grande de lo que debera ser (porque contiene una copia de cada una de tus fotos) y es posible de que no dispongas de memoria suficiente en tu ordenador para cargar, editar y exportar tu pgina web. Para un documento web, la resolucin de las fotos en su versin reducida es ms que suficiente para ofrecer unos resultados de calidad en tu pgina web, por lo que raramente es necesario importar imgenes de cmaras digitales con su resolucin completa.

30

Primeros pasosFondos avanzadosLos navegadores web no permiten un fondo de color con gradacin 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 gradacin que llene la ventana completa creando un mapa de bits con forma de mosaico (que se repite) a travs de la pgina.

Creando una lnea estrecha como en la izquierda cuando defines un fondo, obtienes un fondo de color con gradacin a travs de toda la pgina.

Para crear este efecto, sigue estos pasos;

1.

2.

3.

4.

Dibuja un rectngulo. Tiene que tener el mismo tamao que cualquier usuario utilizara para hacer su ventana del navegador, para que no se repita verticalmente. Un valor de 1000 pxeles o ms es recomendable, ya que es mucho ms grande que tu pgina. Puede que necesites alejar el zoom para dibujar una que sea lo suficientemente grande. Debera ser muy reducida. Asegrate de que tu rectngulo no tenga contorno: haz clic en la herramienta de seleccin y ajusta para que no tenga contorno. Haz clic en el parche "sin color" en la lnea de colores (o selecciona "ninguno" en el ancho de lnea del men desplegable en la barra de botones superior). Asegrate de que el rectngulo contenga algunos pxeles enteros de ancho y luego asegrate de que est situado exactamente sobre pxeles enteros: en la herramienta de seleccin selecciona el rectngulo, edita el valor de ancho (W), presiona Aceptar y luego edita las posiciones X e Y para que sean nmeros enteros. Con la herramienta de relleno (en la pgina 176), aplica el relleno de color con gradacin como desees: simplemente arrastra hacia el rectngulo. Asegrate de que la gradacin se aplique de arriba a abajo ajustando la flecha de relleno si fuera necesario.

Primeros pasos5.Exporta el rectngulo como imagen PNG. Haz clic en el smbolo "Exportar como PNG" . Una vez exportado, arrstralo nuevamente hasta la pgina desde tu Explorador de archivos. Abre la galera de mapa de bits , desplzate abajo en la pgina para ver el grfico que acabas de cargar (ser muy pequeo, casi una miniatura invisible en la galera), y seleccinalo (haz clic en el mismo en la galera) y luego haz clic en el botn FONDO en la galera de mapas de bits. Ahora puedes eliminar el rectngulo original de la pgina.

31

6.

NOTA: esto slo 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 gradacin slo se aplicar al fondo del rea de pgina.

Crear tus propios colores con nombreSi 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 lnea de colores.

Haz clic en la etiqueta para crear un color con nombre

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

Formas vinculadasPuedes crear colores que son sombras ms claras u oscuras de otro color de modo que cuando alteras el color "principal", todas las sombras ms claras u oscuras cambian para

32

Primeros pasoscombinar con el nuevo tono. Por ejemplo una sombra de color con gradacin en un botn, como este: Este es un rectngulo redondeado simple con un relleno de color con gradacin 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 ms clara u oscura del color, como sombra vinculada, cuando edites el color con nombre, las sombras cambiarn tambin, por lo que puedes cambiar el color fcilmente 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 botn 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 pasosTambin puedes crear una sombra vinculada que aparezca en la lnea de colores (as puedes aplicarla fcilmente a otros objetos). Al crear un nuevo color con nombre puedes escoger convertirlo en una "Sombra de otro color" vinculada.

33

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

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

Si la foto que importas es muy grande, se te preguntar si quieres importar una versin reducida. Esto es recomendable, para ms informacin lee la seccin resolucin de fotos a continuacin. Cuando sustituyes una foto existente, la herramienta de relleno se selecciona y se muestran dos flechas de rellenos en ngulo recto sobre la foto.

34

Primeros pasosEsto es as porque la foto en realidad es un relleno dentro de una forma. Puedes tirar de la imagen para cambiar su posicin o estirar de las puntas de las flechas de relleno para cambiar el tamao y girar la imagen dentro del contorno de la forma.

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

Sustitucin de mltiples fotosAlgunas plantillas de la GALERA DE DISEOS, especialmente los estilos de los lbumes de fotos, pueden tener varias fotos que desees sustituir en un solo paso. Selecciona los mltiples archivos de fotos en el explorador de archivos de Windows (Ctrl+Clic para aadir ms archivos a la seleccin o Shift+Clic para seleccionar una serie de archivos). Luego arrastra y suelta los archivos hasta la pgina de MAGIX Web Designer 6 para que las fotos se reemplacen una a una desde el principio de la pgina hacia abajo. Eso facilita llenar una pgina de un lbum de fotos con tus propias fotos. Si arrastras ms fotos de las que caben en la pgina actual, MAGIX Web Designer 6 explorar las pginas siguientes en el documento para ver si puede acomodar algunas o todas las fotos restantes. Si esto todava no alcanza para colocar todas tus fotos, MAGIX Web Designer 6 duplicar la pgina actual todas las veces que sea necesario para posicionar todas las fotos. Este potente mecanismo significa que puedes crear una pgina web con un lbum de fotos de varias pginas, si cargas una plantilla de la galera de diseos y luego arrastras tus fotos.

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

Primeros pasosPara cortar una foto, simplemente arrastra a lo largo de la foto mientras te encuentras en la HERRAMIENTA DE OPTIMIZACIN DE FOTOS . Puedes ajustar los bordes de corte estirando de los controles deslizantes de corte alrededor del exterior de la foto. O utiliza la HERRAMIENTA DE CORTE para ms control sobre los recortes.

35

Consulta el apartado Trabajar con fotos (en la pgina 219) para ms informacin detallada sobre cmo MAGIX Web Designer 6 maneja fotos y el apartado en Herramienta de foto para averiguar cmo utilizar la herramienta de foto.

Fotos en miniatura con pop-upPuedes crear muy fcilmente pequeas miniaturas de fotos (simplemente cambia el tamao para que sean muy pequeas), para que cuando se haga clic sobre las mismas se muestre una versin ms ampliada. Simplemente cambia el tamao de tu foto, tal como lo haces con la herramienta de seleccin. Selecciona la pequea miniatura de foto y selecciona la opcin "Foto emergente" en la pestaa ENLACE del dilogo PROPIEDADES WEB (haz clic en el BOTN ENLACE en la BARRA DE HERRAMIENTAS DE WEB ).

36

Primeros pasosHaz clic en el botn CONFIGURACIN junto a la opcin de foto emergente para cambiar a la PESTAA IMAGEN del DILOGO DE PROPIEDADES WEB .

All podrs determinar cmo aparecer tu popup. Una opcin te permite colocar un ttulo sobre cada foto emergente. Configura el ttulo para cada foto en el campo TTULO . De forma opcional puede mostrarse un subttulo debajo de cada foto emergente. Simplemente, configura la CAPTURA DE IMAGEN para la miniatura en el mismo dilogo. Consulta la seccin foto emergente del captulo DILOGO DE PROPIEDADES WEB para detalles completos de las opciones disponibles. En Internet Explorer, la captura de imagen se mostrar en un consejo de herramienta emergente al pasar el ratn sobre la imagen. Para mostrar otro texto, generalmente algo como "Haz clic para ampliar" cuando mueves el cursor sobre la miniatura de imagen, ve a la pestaa MOUSE-OVER y cambia "MOSTRAR TEXTO DE POP-UP " por "Haz clic para ampliar".

Resolucin de foto - es todo automtico!Si importas una foto con un ancho o una altura mayor que 1920 pxeles (tamao de pantalla de alta definicin), se te preguntar si deseas importar una versin de tamao reducido en vez del original en tamao completo. Para el uso en la web es poco probable que necesites fotos que superen este tamao, por lo que es recomendable importar una versin reducida. Se recomienda utilizar fotos de tamao reducido para que el tamao del archivo de tu diseo (.web o .xar) sea pequeo y para reducir la cantidad de memoria utilizada al editar y exportar tu pgina web. Si no ests seguro si necesitas la foto de resolucin completa, puedes importar la foto original y luego optimizarla. Para optimizar una foto, haz clic derecho sobre ella y escoge la

Primeros pasosopcin de optimizacin en el men contextual. O puedes optimizar todas las fotos JPEG de un documento en simultneo, mediante HERRAMIENTAS > OPTIMIZAR TODOS LOS JPEG . Web Designer siempre guarda la imagen de resolucin completa (salvo que escojas importar las imgenes con resolucin reducida cuando se te pregunta durante la importacin). Esto significa que puedes cambiar el tamao o recortar tu imagen como lo desees sin perder calidad. Web Designer automticamente convierte todas las fotos a la resolucin correcta de imagen JPEG cuando guardas tu pgina web. No tienes que preocuparte por el dpi, el tamao de imagen, los pxeles o este tipo de cosas. Lo que ves en Web Designer (zoom al 100%) es exactamente lo que se producir en tu pgina web. Si quieres cambiar el tamao de una foto o de cualquier objeto a un valor especfico, puedes introducir el tamao en los campos de altura y ancho de la barra de informacin de la herramienta de Seleccin. Cuando sueltas una foto en la pgina (siempre que no ests sustituyendo una foto existente), su tamao se ajusta a 500 pxeles de ancho. Pero si quieres que tenga exactamente 200 pxeles de ancho, introduce 200pix en el campo de tamao de ancho (W) en la herramienta de Seleccin. Puedes introducir el valor en cualquier unidad, por ejemplo, 2in significa 2 pulgadas de ancho.

37

TextoPuedes 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 lnea entera, que puede ser til si quieres seleccionar todo el texto de un botn. Como siempre, la barra de informacin ofrece numerosos controles para esta herramienta.

El men de fuentes muestra una lista de todas las fuentes y est dividida en tres secciones. La seccin superior muestra las fuentes ya utilizadas en el documento, la siguiente seccin muestra las fuentes compatibles con la web y la ltima seccin inferior muestra todas las fuentes que estn 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 ratn por las distintas fuentes del men, el texto seleccionado cambia la fuente permitindote ver inmediatamente la vista previa y saber cmo quedar en el documento.

Tamao de fuenteEl campo de tamao de fuente muestra el tamao de fuente en pxeles, dado que ste es el mtodo ms confiable para ajustar el tamao del texto para utilizarlo en el navegador. Pero puedes introducir cualquier texto en puntos (o cualquier otra unidad para el caso) introduciendo un valor con pt detrs del mismo (significa "punto"), por ejemplo 72pt 1 y esto se convertir al tamao de pxeles correcto.

Fuentes compatibles con la webSlo un pequeo conjunto de fuentes puede utilizarse de forma segura para el texto principal de una pgina web - slo estas fuentes que conoces existirn en el ordenador del usuario que visite tu pgina web. Aunque no existen garantas, hay un subgrupo comn 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 estn alistadas en una seccin separada

Primeros pasosdel men de fuentes. Si intentas guardar una pgina web utilizando fuentes compatibles con la web, se te mostrar una advertencia. Si conviertes cualquier objeto de texto en un grfico, eres libre de utilizar cualquier fuente. Consulta la seccin Grupos (en la pgina 44) abajo para ms detalles.

39

Crear nuevos objetos de texto nuevosExisten tres objetos de texto: una nica lnea de texto, una columna de texto o un rea de texto rectangular. Para crear una simple lnea de texto, selecciona la herramienta de texto y luego puedes hacer clic en cualquier parte del fondo para comenzar a teclear. Para crear una columna, haz clic y arrastra horizontalmente en el fondo y luego comienza a teclear. Puedes ajustar el tamao de la columna en cualquier momento. Para crear un rea de texto, haz clic y arrastra diagonalmente. Puedes ajustar el ancho y la altura de un rea de texto.

Texto giradoDe forma usual (nicamente para una herramienta de autora web), puedes girar cualquier objeto de texto, incluso columnas de texto, utilizando la funcin de giro usual de la herramienta de seleccin. Pero debido a que los navegadores web no son compatibles con texto girado nativo, Web Designer convierte cualquier texto girado en un grfico cuando la pgina es exportada como pgina web.

Lista con vietas y numeradasUtiliza los botones de las listas con vietas y numeradas de la barra de informacin de la HERRAMIENTA DE TEXTO para insertar rpidamente listas con vietas 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 nmeros en tu lista. Consulta el captulo Herramienta de texto (en la pgina 147) para ms informacin.

Sombras suaves, texto relleno de color, texto transparentePuedes aplicar cualquiera de estos efectos utilizando las herramientas apropiadas. Por ejemplo, si arrastras sobre algn texto en la herramienta de relleno, obtendrs un color con gradacin, o si arrastras con la herramienta de sombra, obtendrs una sombra ligera. En todos estos casos, Web Designer convertir el texto automticamente en un grfico en tu pgina web exportada.

Contornear texto alrededor de objetosSi haces clic con el botn derecho del ratn en un objeto como una foto y seleccionas la opcin de men "CONTORNEAR TEXTO (en la pgina 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 galera de diseos son contorneados automticamente, 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 detrs del objeto, as que tendrs que "llevar hacia adelante" el objeto para que funcione el contorneo (Ctrl +F).

40

Primeros pasosTodas la operaciones de la herramienta de texto son en vivo: el texto se reformatea y refluye segn vas ajustando el ancho de la columna o vas moviendo los objetos contorneados.

Paneles de textoDel mismo modo que algunos botones de la galera de diseos se amplan 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 ms 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 lnea de texto). La mayora de las plantillas de la galera de diseo suministran algunos paneles de texto para que queden bien con el tema. Algunos paneles de texto simplemente se amplan verticalmente, otros se amplan vertical y horizontalmente. Para crear tu propio botn o panel de extensin, utiliza uno de los botones existentes en la galera de diseo y adptalo recoloreando el fondo o reajustando el color, el tamao y/o el ancho del texto. Nota: Puedes crear nuevos componentes de extensin utilizando Xara Xtreme Pro.

Corrector de ortografaEn la barra de informacin de la herramienta de texto hay un botn que selecciona las opciones del corrector ortogrfico y el idioma. Si seleccionas "Revisar ortografa mientras se escribe", tambin marcar todas las palabras que no reconoce subrayndolas en rojo intermitente. Haz clic con el botn derecho en cualquier palabra marcada para obtener sugerencias.

Fuentes incrustadasWeb 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 vern exactamente lo mismo que t, incluso si las fuentes correctas no estn instaladas en dicho ordenador. Pero esto nicamente incrusta

Primeros pasoslos 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 aada 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 seccin de referencia de shortcuts de teclado para verlas todas. Una til para experimentar con diseos de pgina es Ctrl+Shift+L, ya que inserta un bloque de pseudo-latn aleatorio.

41

Tamao de pginaLas pginas de la galera de diseos estn diseadas para tener el ancho que es conocido es compatible para la mayora de las pantallas de ordenador. No se recomienda crear pginas ms anchas, incluso si t tienes una pantalla de ordenador ms amplia. La experiencia demuestra que la mayora de usuarios prefieren tener un ancho de pgina fijo. Sin embargo, puedes ajustar el tamao de pgina que quieras. Puedes definir cualquier tamao de pgina que quieras seleccionando la pestaa del PGINA del DILOGO DE OPCIONES (Archivo>opciones de pgina). No se recomienda que crear un ancho de pgina que supere los 990 pxeles, ya que ste es el ancho mximo para gran parte de las pantallas de ordenador (1024 menos una pequea cantidad por la barra desplazable). Un ancho de pgina ms comn tiene por lo general unos 800 pxeles.

Selecciona la opcin Personalizar tamao de pgina para introducir cualquier tamao que desees.

Puedes ajustar directamente la altura de tu pgina arrastrando el margen inferior de la pgina. Ve a la HERRAMIENTA DE SELECCIN y mueve el cursor sobre el borde inferior de la pgina y ste cambiar para indicarte que ahora puedes arrastrar para reducir o ampliar el tamao de la pgina segn se requiera.

42

Primeros pasosCambiar el tamao de pgina de plantillasPuedes cambiar el tamao vertical de las plantillas prediseadas de la misma forma, simplemente arrastrando el borde inferior de la pgina. Sin embargo, tendrs que mover y cambiar el tamao de varios objetos de la pgina. Por ejemplo, muchas plantillas tienen un grupo de pie de pgina. Puedes arrastrarlo, utilizando la herramienta de seleccin, hacia la nueva posicin. Algunas veces el texto principal est en un rectngulo de fondo de color. Utilizando de nuevo le herramienta de seleccin puedes arrastrar el control deslizante modificador de tamao inferior para extenderlo hasta la parte inferior de la pgina como lo desees. La mayora de plantillas utilizan columnas de texto que crecen verticalmente segn vas agregando ms 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. Creacin de una pgina WebUtiliza las opciones de men GUARDAR o GUARDAR COMO para guardar tu trabajo en progreso. Esto guarda un archivo con la extensin .web que es el formato de archivo nativo para Web Designer (esto no es una pgina web). Se recomienda que guardes tu trabajo regularmente segn avances. Si quieres editar o actualizar tu pgina en el futuro, debes guardar un archivo .web de esta forma y hacerlo en actualizaciones futuras. Tambin te recomendamos trabajar con la funcin de copias de seguridad automticas activada. Esta opcin se controla desde la pestaa Copias de seguridad del dilogo HERRAMIENTAS > OPCIONES . Cuando est activada esta opcin, se realiza una copia de seguridad de tu documento abierto de forma regular. Aqu puedes escoger la forma en que debe comportarse el programa al cerrarlo. Puedes hacer que te pregunte si quieres guardar o eliminar un documento modificado o hacer que todos los documentos se guarden automticamente en la ubicacin de copias de seguridad y se restauren la prxima vez que inicies. Para guardar tu sitio web, que son las pginas HTML y archivos asociados para publicar en la Web, utiliza la opcin Exportar pgina web o haz clic en este botn en la barra superior. Esto guarda un archivo .htm por cada pgina y una carpeta que contiene todos los archivos que componen la pgina web. Al exportar un sitio web, todas las pginas se exportan juntas y cada pgina sin nombre recibe la finalizacin _1, _2 tras el nombre que ingresas durante la exportacin. La carpeta _FILES contiene todos los grficos y otros archivos que van a formar tu sitio web. Puedes nombrar cada pgina de forma individual si lo deseas, con la pestaa PGINA del dilogo PROPIEDADES WEB o con la Galera de pginas y capas (en la pgina 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 pgina de un sitio web.

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

43

Copias de seguridad automticasLa pestaa Copias de seguridad del dilogo HERRAMIENTAS > OPCIONES te permite activar y desactivar la funcin de copias de seguridad automticas. Esta funcin guarda una copia de todos los documentos abiertos modificados en intervalos regulares. Tambin puedes escoger si se te debe advertir que no has guardado documentos al cerrar el programa o si debe guardarse una copia de seguridad de todos estos documentos y restaurarse la prxima vez que inicies el programa. Consulta el captulo Manejo de documentos (en la pgina 78) para ms detalles acerca de estas funciones.

Objetos elsticosMuchos de los objetos grficos, como los botones y los paneles de texto pueden ajustar automticamente su tamao dependiendo del tamao o la longitud de texto. Por ejemplo, algunos de los botones denominados "botones extensibles", que significa que la longitud del botn se ajusta para que el texto de la etiqueta quepa en el botn. La mayora de grupos de plantillas y todos los botones en el archivo de botones de la galera de diseos tienen versiones de ancho fijo y extensible. Se recomienda que si creas un grupo de botones de navegacin (tpicamente una coleccin de enlaces o botones horizontales o verticales), utilices un ancho fijo de modo que todos tengan el mismo tamao.

De forma similar, muchos de los paneles laterales o de texto en las plantillas, y algunas veces en el rea de texto principal, tambin pueden ajustar su tamao vertical y a veces su tamao 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 GruposPuedes agrupar cualquier seleccin de objetos en la pgina. Muchos de estos elementos de los diseos como los botones, paneles de texto y objetos de fotos son elementos agrupados. Los grupos actan casi como un objeto individual, ya que puedes arrastrarlos por la pgina, cambiar su tamao y rotarlos como si fueran un solo objeto. Por ejemplo, puedes dibujar un botn simple desde el comienzo arrastrando un tringulo con la herramienta de tringulo 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 seleccin. Pero si seleccionas ambos en la herramienta de seleccin (tambin 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 convertirn en un objeto agrupado (pista: la lnea de estado que se encuentra debajo siempre te informa lo que est seleccionado). Ahora puedes arrastrar, cambiarle el tamao o girar este objeto, todas las partes de este grupo se mueven y transforman como si fueran un nico objeto. Importante: los objetos agrupados estn generalmente convertidos en un nico grfico cuando exportas tu pgina web. Al desagrupar (Ctrl+U) puedes acceder a todas las partes del grupo de forma individual. Como alternativa puedes editar elementos directamente dentro de un grupo, por ejemplo, si utilizas la herramienta de texto para editar el texto o la herramienta de foto para editar una foto, un clic seleccionar automticamente el elemento dentro del grupo.

Convertir texto en un grficoComo se mencionaba arriba, slo un nmero limitado de fuentes estn disponibles en navegadores web. Si quieres utilizar una fuente diferente en un botn o, digamos, como un encabezado, puedes hacerlo asegurndote de que se ha convertido a un grfico, y todo lo que necesitas es agrupar el objeto para que esto ocurra automticamente. Todava puedes editar el texto dentro del grupo, pero los grupos se convierten automticamente en grficos cuando se exporta la pgina web.

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 ingls)Hay otro tipo de grupo denominado "Grupo suave" que es un conjunto de objetos conectados de una forma ms suelta . La diferencia entre los grupos y los grupos suaves reside en que:

Primeros pasos Cuando agrupas elementos, todos tienen que estar en una nica capa (si no lo estn se movern a una nica capa cuando agrupes los elementos). Los grupos suaves conservan sus capas, de modo que puedes ligar elementos a travs de mltiples capas. Los grupos por lo general se convierten en un nico grfico en la pgina 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 grficos (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 tcnica organizativa, es como tener un archivo dentro de otros archivos. Sin embargo, los grupos suaves no se pueden depositar dentro y en primer lugar estn diseados para ligar mltiples 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 automticamente 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 seccin de capas ms abajo para comprenderlo mejor. La mayora de botones son grupos suaves, es decir, cuando seleccionas, mueves o cambias el tamao de un botn, en realidad ests efectuando estas operaciones en dos copias del botn, una llamada la versin "MouseOff" y la otra llamada versin "MouseOver". Algunos de los objetos de panel ms complejos en la galera de diseo 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 mxima.

45

Texto sincronizadoHay otra caracterstica muy til que ofrecen los grupos suaves. Si tienes el mismo texto en dos o ms objetos dentro de un grupo suave, el texto se sincronizar cuando lo edites. De esta forma, puedes mantener igual el texto del botn normal y el del MouseOver (ver abajo).

Enlaces, botones y barras de botonesPuedes aadir un enlace de web a cualquier objeto, un botn, grfico o a un texto. Selecciona el objeto y simplemente haz clic en el icono en la parte superior para introducir la direccin web que quieres vincular.

46

Primeros pasos

Introduce la direccin web que quieras para vincular en el campo

El dilogo de enlace te permite controlar lo que ocurre si haces clic en el objeto vinculado en la pgina. Puedes saltar a cualquier otra pgina web (puedes seleccionar rpidamente un enlace a cualquier otra pgina dentro de tu pgina web utilizando el enlace a la pgina desplegable) y puedes controlar si esto abre la pgina en una ventana separada. Por lo tanto, para definir uno de tus botones como enlace, simplemente seleccinalo (haz clic en el mismo en la herramienta de seleccin), haz clic en el icono, e introduce la direccin web o selecciona una de las pginas de la lista desplegable y haz clic en Aplicar. Eso es todo.

Enlazar a una referencia (anchor)Puedes vincular cualquier texto u objeto en cualquier lugar en tu pgina 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 grfico o algo de texto) y luego selecciona el men HERRAMIENTAS ->> NOMBRES... para visualizar el dilogo de nombre. Introduce cualquier nombre nico que desees y haz clic en AGREGAR . Para vincular esta referencia desde otro lugar en tu pgina web (un botn o slo un enlace en algo de texto), abre el dilogo de enlace (que se muestra arriba) y elige "ENLAZAR A UNA REFERENCIA (ANCHOR) " de la lista desplegable de nombres.

Primeros pasosEnlace al archivoMuchas veces quieres insertar en tu sitio un documento, pelcula u otro tipo de archivo. Para ello, utiliza la opcin ENLACE AL ARCHIVO . Selecciona en tu pgina el objeto que quieres enlazar con el archivo. Luego escoge la opcin Enlace al archivo y busca tu archivo. Esto copia el archivo en una carpeta de soporte junto con el archivo de diseo, para que el archivo se publique junto con el resto de tu sitio. La carpeta se nombra con la denominacin de tu archivo de diseo y la terminacin "_files". Haz clic en ACEPTAR , obtn una vista previa de tu pgina y comprueba el enlace. Cuando quieras modificar el archivo, repite el proceso: busca tu archivo nuevo o actualizado. Consulta el captulo del dilogo PROPIEDADES WEB (en la pgina 195) para ms informacin acerca de esta funcin y el captulo Trabajar con documentos para informacin acerca de las carpetas de soporte (en la pgina 76).

47

Cambiar texto de botnEs muy simple en la HERRAMIENTA DE TEXTO , haz clic en el texto del botn y edtalo. Consejo: si haces triple clic en el texto del botn, seleccionas toda la lnea de texto para un reemplazo ms sencillo al tipear. NOTA: no puedes editar el texto de las barras de navegacin de esta forma, si la barra est fijada como barra de navegacin del sitio. Debes editar las etiquetas en el dilogo de Barras de navegacin.

Botones mouseover (rollover)Te habrs dado cuenta de que la mayora de botones se resaltan cuando mueves el cursor del ratn por encima de los mismos en tu navegador. Esto se llama un mouseover o, algunas veces, efecto rollover. Es completamente automtico para la mayora de botones utilizados en las plantillas o para la seccin de botones de la galera de diseos. 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 botn, como cambiar, mover, o cambiar el tamao del texto. Ver la seccin Capas (en la pgina 54) abajo para ms detalles.

Agregar nuevos botonesEn la galera de diseos cada tema tiene una coleccin de grficos de botones que puedes arrastrar hacia la pgina. Por lo general hay dos tipos de botones. Los que se denominan botones extensibles se adaptarn al texto de la etiqueta del botn. Adems hay una categora de botones que tiene un conjunto de diseos de botones generales que se pueden agregar a tu pgina de la misma forma. Tambin puedes copiar cualquier botn existente; esta sea probablemente la mejor forma de aadir ms botones a una barra de navegacin. Puedes copiar/pegar, pero es un shortcut mucho ms rpido arrastrar presionando el botn derecho del ratn. (Esto es un

48

Primeros pasosshortcut 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 operacin de arrastre ser perfectamente horizontal o vertical, facilitando en gran medida la creacin de una lnea o una columna de botones.

Botn de barras (barras de navegacin)

La mayora de pginas web, y la mayora de los diseos de plantillas que suministramos, tienen una fila o una columna de botones para navegar en la pgina web o en otros lugares. Esto se llama BARRA DE NAVEGACIN y MAGIX Web Designer 6 incluye una compatibilidad especial para estas barras. Para editar una barra de navegacin, haz doble clic sobre ella o clic derecho y escoge EDITAR BARRA DE NAVEGACIN del men contextual. Se abrir el dilogo de barra de navegacin. All podrs cambiar los nombres de los botones, enlaces y consejos de herramientas, agregar y eliminar botones, cambiar el orden y hasta agregar mens y submens. Al hacer doble clic sobre el campo de URL, se abrir el dilogo Enlace que es el mismo dilogo que se utiliza para fijar enlaces en objetos normales, tal como se ha descrito anteriormente en este captulo y en detalle en el captulo del dilogo de propiedades web. En este dilogo tambin p