2

www.magix.es

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

Ninguna parte de esta publicacin puede reproducirse a travs de fotocopias, microfilm o cualquier otro procedimiento, as como tampoco transferirse a un idioma utilizable por mquina alguna, especialmente equipos de procesamiento de datos, sin la aprobacin por escrito del propietario de los derechos de autor.

Quedan reservados todos los copyrights.

Otros nombres de productos mencionados son marca registrada de su respectivo fabricante. Queda reservado el derecho a introducir cambios al contenido, as como modificaciones al programa.

Copyright Xara Group Ltd., 1994 - 2014. All rights reserved.

Xara es una marca registrada de Xara Group Ltd.

Xara Group Ltd. es una compaa afiliada de MAGIX AG.

MAGIX es una marca registrada de MAGIX AG.

Los otros nombres de productos pueden ser marcas registradas de sus correspondientes fabricantes.

Copyright 3

Indice

Copyright 2

Asistencia tcnica 13

Introduccin 15 Qu es MAGIX Web Designer 10 Premium? 15 Por qu Web Designer es tan especial? 15 Una pgina web en 6 pasos 16 Cules son las novedades de MAGIX Web Designer 10 Premium? 17 Ayuda 21

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

4

www.magix.es

Manejo de documento 74 Iniciar un nuevo documento 74 Abrir un documento existente 74 La ventana de MAGIX Web Designer 10 Premium 75 Abrir una segunda ventana 79 Cambiar el valor de zoom 80 Desplazar el documento dentro de la ventana 81 Cambiar el tamao de pgina 82 Pginas mltiples en el documento 82 Guardar el documento 85 Directorios de compatibilidad 86 Cerrar el documento 87 Copias de seguridad automticas 88 Cuadrcula en pantalla 91 Reglas 91 Calidad de imagen 93 La tecla de restriccin 93 Galeras 94 Deshacer y rehacer 102

Trabajar con objetos 103 La herramienta de seleccin 103 Mover objetos 106 Eliminar objetos del documento 110 Duplicar y clonar 111 Mover objetos hacia adelante o hacia atrs 112 Girar utilizando el ratn 112 Cambio del tamao de objetos (escalar) 114 Voltear objetos 116 Extender o reducir objetos 116 Inclinar objetos 117 La herramienta de moldes 118 Ajuste 122 Difuminacin (Feathering) 126 Objetos gua y lneas gua 126 Resumen de shortcuts del teclado numrico 128 Agrupar y desagrupar objetos 128 Grupos suaves (soft groups, en ingls) 130 Alineacin 131

Copyright 5

Copiar estilos - pegar atributos 134 Nombrar objetos 135 Objetos repetidos 137 Pies de pgina y objetos que se amplan con la pgina. 140

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

Manejo de formas 165 Herramientas de dibujo y forma 165 Crear rectngulos y cuadrados 165 Crear crculos y elipses 166 Smartshapes 167 Edicin de smartshapes 167 Crear polgonos y estrellas 168 Combinar formas 171 Convertir a formas editables 173

Trabajar con colores 174 La lnea de colores 174 Aplicar colores de relleno y lnea con arrastrar y soltar 176 Editar el color de un objeto 177 El editor de color 178 Colores locales y colores originales 180 Esquemas de colores originales 181

6

www.magix.es

Creacin de tus propios esquemas de colores 181 Creacin de nuevos colores con nombre 182 Reemplazar colores 183 Editar colores con nombre 184 Colores normales, tintes, tonalidades y colores vinculados 187 Creacin de un tinte, una tonalidad o un color vinculado 188

Trabajar con textos 190 Introduccin 190 Terminologa 191 La herramienta de texto 191 Men de fuente 193 Fuentes de Google 195 Texto simple 197 Texto en una columna 198 reas de texto 199 Texto siguiendo una curva 203 Editar texto 204 Corrector de ortografa 206 Buscar y reemplazar 207 Cmo sincronizar el texto empleando Grupos suaves 208 Tabulaciones, mrgenes y sangras 208 Texto alrededor de objetos 212 Grficos anclados 214 Grficos incrustados 217 Estilos de texto 217 Aplicar estilos de texto 222 Enlaces de texto 226 Texto dentro de grupos para pginas web 226 Copiar estilos de texto 227 Copiar / Pegar texto con formato (RTF) 228 Visualizar fuentes utilizadas 228 Incrustacin de fuentes en el documento 228 Incrustacin de fuentes en un sitio web 229 Compatibilidad entre el navegador y el texto 229

La herramienta de relleno 231 Crear un relleno de color con gradacin 231 Tipos de relleno 231 Barra de informacin de herramienta de relleno 233

Copyright 7

Rellenos lisos 235 Rellenos lineales 235 Rellenos circulares 236 Rellenos elpticos 237 Rellenos de mapa de bits 237 Relleno fractal 240 Gradaciones de color de varios niveles 241 La galera de rellenos 242

Transparencia 244 Aplicar transparencia plana 245 Aplicar transparencia con gradacin 245 Transparencia con gradacin de varios niveles 245 Tipos de transparencia 246 Optimizar 249 Perfil 251 Mapas de bits 251 Control deslizante / resolucin 251 Aplicar transparencia a varios objetos 252

Sombras 253 La herramienta de sombra 253 Aplicar una sombra 253 Cambiar el color de sombra o el efecto de relleno 255 Eliminar una sombra 256 Aplicar una sombra a varios objetos 256 Seleccin de objetos con ayuda de la herramienta de sombras 256 Copiar sombras a otros objetos 257

Biseles 258 La herramienta de bisel 258 Aplicar un bisel 258 Aplicar un bisel a varios objetos 258 Modificar un bisel 259 Eliminar un bisel 262

Mscaras 263 Crear una mscara 263 La herramienta de mscaras 263 Editar mscara. 264 Mscaras suaves 265

8

www.magix.es

Operaciones que utilizan la mscara 265 Copiar formas a la capa de mscara 267

Dilogo de propiedades web 268 Pestaa Enlace 269 Pestaa Pgina web 275 Pestaa Pgina 278 Pestaa Imagen 281 Pestaa Mouse-over 286 Pestaa Marcador de lugar 287 Pestaa Publicar 291 Pestaa Analytics 293

Diseo web adaptativo 294 Acerca de RWD 294 Variantes mltiples 295 Crear pginas web RWD desde las plantillas 296 Crear sitios web RWD desde sitios existentes 296 Compartir a travs de variantes 297 Variantes y objetos repetidos 298 Variantes y barras de navegacin 298 Variantes y fondos 299 Publicacin de variantes 299

Supersites 300 Sobre las Supersites 300 Habilitar Supersites 300

Fondos de pgina web 303 Fondos de plantilla y cambio de color de fondo 305 Fondos fijos no desplazables 305 Usar fotos como fondo. 306 Desplazamiento de la parte superior de la pgina 306 Capas de fondos de pgina o de tablero de dibujo 307 Fondos avanzados 308

Publicar pgina web 310 Publicar en MAGIX Mundo Online (MOW) 310 Publicar en un alojamiento web alternativo 312 Guardar perfiles 315 Incluir pgina web en la galera de usuarios 316 Publicacin rpida (solo archivos modificados) 316

Copyright 9

Guardar la configuracin de publicacin en el documento 316

Publicacin de documentos web 317 Documentos web y PDF 317

Trabajar con fotos 318 Introduccin 318 Imgenes de alta resolucin 318 Objetos de fotos 319 Grupos de foto 320 Importacin de fotos 321 Copias de memoria cero 323 La galera de mapa de bits 324 Archivos JPEG integrados 327 Calidad de visualizacin de fotos 328 Guardar y exportar fotos 329 Atributos de la edicin de fotos 331 Editar el contorno de las fotos 331 Recortar fotos 332 Recortar fotos con una mscara 332 Herramienta Capturar pantalla 333 Colorear fotos 335 Cambiar el tamao, rotar y reposicionar la foto dentro de su propio marco 335 Enderezar horizonte 337 Ver una foto ampliada en su tamao completo 338 Darle el tamao completo a una foto 338 Optimizacin de fotos y mapas de bits 338 Convertir objetos o dibujos a mapas de bits 341 Documentos fotogrficos 342 Edicin de archivos de fotos 343

La herramienta de fotos 344 Introduccin 344 Utilizacin de la herramienta de fotos 344 Funciones comunes para fotos 345 Herramienta de optimizacin 346 Herramienta de corte 349 Notas para la herramienta de foto 352 La herramienta de ojos rojos 353 Efectos en tiempo real 355 Cambio de tamao teniendo en cuenta el contenido 358

10

www.magix.es

Creacin de panormicas 363

Herramienta de extrusin 3D 366 Extrudir una forma 366 Barra de informacin de Herramienta de extrusin 367 Texturas y fotos 370 Extrudir texto 370 Copiar atributos de una extrusin 3D 371 Insertar sombras detrs del objeto 371

Barras de navegacin 372 Usar de barras de navegacin de plantillas 372 Dilogo Propiedades de la barra de navegacin 373 Barra de navegacin del sitio 375 Barras de navegacin de botn nico 377 Botones y mens 378 Actualizacin de la barra de navegacin en todas las pginas 382 Edicin en el lienzo 382 Cambio de la fuente de los botones de la barra de navegacin 382 Importacin e insercin de barras de navegacin 383 Creacin de barras de navegacin propias 383

Presentaciones como pginas web 385 Sobre las presentaciones 385 Pasos y capas 385 La barra de herramientas "Presentacin" 387 Creacin de una presentacin 387 Manejo de los pasos de presentacin 391 Agregado de nuevas pginas de presentacin 392 Creacin de listas con nmeros y vietas 392 Eliminar pginas de presentacin 393 Enlaces al paso siguiente/anterior 393 Aplicacin de transiciones a pasos de presentaciones 393 Aplicacin de transiciones a pginas de presentaciones 394 Informacin de presentacin avanzada 395 Sesiones remotas de presentacin 395

Widgets de sitios web 398 Widgets y marcadores de posicin - todo automtico 398 Widgets de la galera de diseos 399 Agregado de archivos de pelculas y animaciones 402

Copyright 11

Widgets de otros sitios de widgets 404 Cambio de tamao de widgets 405 Insercin manual de marcadores de posicin para widgets 406

Galera de pginas y capas 407 La galera de pginas y capas 407 Pginas 410 Capas 410 Operaciones de capa 413 Capas especiales 415 Ocultar capas 416 Modo Solo 416 Bloquear capas 416 Mostrar todo y desbloquear todo 417 Mover objetos entre capas 417

Animaciones en Flash 418 Introduccin 418 Principios bsicos 421 Tu primera animacin 422 Exportacin de un archivo Flash 423 Exportacin de animaciones como AVI 425 La galera de frames de animacin 426 Fotos 428 Duracin de frames para pelculas Flash y pasos intermedios 430 Recortar y cortar 431 Velocidad de la animacin 432 Fluidez de la animacin (smoothness) 433 Rotacin 433 Grupos 435 Qu funciones de MAGIX Web Designer 10 Premium son compatibles con Flash? 435 El color se transforma el color de la animacin cambia 438 Transparencia 438 URL en Flash 439 Funciones de Flash avanzadas 439 Resumen de animacin de MAGIX Web Designer 10 Premium Flash 441 Crear GIF animados 442 Propiedades de GIF animados 443

Importacin y exportacin 446

12

www.magix.es

Indicaciones generales sobre la exportacin e importacin 446 Web Designer y HTML5 446 Importar y exportar formatos de archivo compatibles 447 Importacin de archivos 449 Exportacin de archivos 453 Resumen del dilogo de exportacin GIF, PNG y JPEG 456

Imprimiendo 462 Mostrar bordes de impresin 462 Seleccionar y configurar una impresora 462 El dilogo de impresin 463 Opciones de impresin: Pestaa Salida 465 Opciones de impresin: Pestaa Diseo de la impresin 467

Personalizacin de Web Designer 469 Cambio del documento de plantilla en blanco 469 Opciones del men "Herramientas" 469 Pestaa General 470 Pestaa Cuadrcula y regla 474 Pestaa Ratn 475 Pestaa Tamao de pgina 477 Pestaa Copias de seguridad 478 Pestaa efectos y plug-ins 478 Barras de control 479

Mens y shortcuts de teclado 483 Introduccin 483 Men Archivo 483 Men Edicin 488 Men Arreglo 491 Men Insertar 494 Men Herramientas 495 Men Compartir 497 Men Ventana 498 Men Ayuda 501 Shortcuts de teclado 503

Si an tienes preguntas... 509 Ayuda del programa (breve) 509 Manual en PDF 509

Index 510

Asistencia tcnica 13

Asistencia tcnica Estimado usuario de MAGIX:

Nuestro objetivo es ofrecerte en todo momento una ayuda rpida, cmoda y resolutiva. Por ello ponemos a tu disposicin una amplia oferta de servicios:

Asistencia web ilimitada: Como cliente MAGIX registrado, dispones de asistencia web ilimitada a travs del portal de servicios de MAGIX de diseo sencillo support.magix.net. Aqu tienes acceso a un asistente de ayuda inteligente, preguntas frecuentes, parches e informes de experiencias de usuarios que se actualizan continuamente. La nica condicin es que registres el producto en www.magix.es.

La plataforma de intercambio multimedia como punto de ayuda: Como cliente MAGIX puedes acceder a la Multimedia Community www.magix.info de forma gratuita e ilimitada. La plataforma de intercambio multimedia rene a ms de 120.000 miembros y ofrece la oportunidad de hacer preguntas acerca de los productos MAGIX o buscar preguntas para temas especficos a travs de la funcin de bsqueda. Adems de preguntas y respuestas, encontrars un glosario, vdeos de ejemplo (tutoriales) y un foro de debate. Los numerosos expertos que encontrars en www.magix.info te garantizan respuestas rpidas, incluso en pocos minutos.

Asistencia por correo electrnico para productos MAGIX: Para cada nuevo producto de MAGIX, recibirs a partir de la fecha de compra y de forma automtica, 12 meses de soporte tcnico gratuito va e-mail. Asistencia Premium por correo electrnico: Para asistencia especial o para asistencia tcnica sobre problemas de hardware de productos no relacionados con MAGIX, puedes optar por un servicio de asistencia por e-mail Premium. Para ello, accede a http://support.magix.net en la pgina de asistencia de MAGIX y haz clic tras el iniciar sesin en el "Adquirir cdigo de acceso". El servicio abarca un caso de un problema especfico hasta que este se resuelva y no se limita a un solo e-mail.

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

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

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

http://support.magix.net

14

www.magix.es

Correo: MAGIX Development Support

01194 Dresden Alemania

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

Cul es el programa MAGIX (versin) que ests utilizando? Qu sistema operativo utilizas? Cul es el nombre y resolucin de la tarjeta grfica? Cul es el nombre de la tarjeta de sonido? O ests utilizando el sistema de

sonido integrado de tu ordenador? Para software de vdeo: cul es el nombre de la tarjeta de vdeo o tarjeta

Firewire? Cul es el tamao de la memoria RAM? Qu versin de DirectX tienes instalada?

MAGIX Ventas

Nmero de telfono: +34 911 875 676

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

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

Introduccin 15

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

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

Qu es MAGIX Web Designer 10 Premium? MAGIX Web Designer 10 Premium es una solucin completa para el diseo de pginas web. Te ofrece la libertad de elegir si deseas realizar el diseo de tu pgina web desde cero o si deseas personalizar cualquiera de las numerosas plantillas del programa a tu gusto. Gracias a los aos de experiencia con la tecnologa "Xtreme", tambin es posible crear animaciones Flash, editar fotos, y optimizar o cambiar los esquemas de color de las pginas web con slo unos clics. Tambin puedes obtener una vista previa de tu pgina web y subir tu proyecto directamente desde MAGIX Web Designer 10 Premium a un servidor FTP para pasar de la creacin a la publicacin en pocos segundos. Gracias a las funciones prcticas, como la insercin de objetos de marcador de posicin, tu sitio web obtendr rpidamente un aspecto profesional y nico al mismo tiempo.

Por qu Web Designer es tan especial? Web Designer es nico porque es la nica herramienta de diseo web de forma libre que permite una verdadera libertad al disear una pgina web cuyo resultado es lo que ves. En otras palabras, puedes posicionar el texto, grficos y fotos en cualquier lugar de la pgina, configurar cualquier tamao, ngulo, superposicin, transparencia, etc. y Web Designer producir una pgina HTML precisa que funcionar perfectamente.

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

16

www.magix.es

Es compatible con capas CSS con caractersticas avanzadas, como transparencia (incluyendo transparencia con gradacin), efectos mouse-over y ms. Crea pginas web HTML totalmente compatibles con los exploradores, las plataformas y XHTML.

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

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

Tambin est pensado para principiantes que simplemente quieren disponer de la forma ms fcil de crear pginas web de aspecto profesional.

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

Una pgina web en 6 pasos Para quienes no tienen mucha paciencia (la mayora de nosotros), se pueden descubrir las ventajas principales de Web Designer, siguiendo sencillamente las instrucciones en el documento inicial que se abre cuando comienzas a usar Web Designer. Se trata tanto de una introduccin bsica como de una pgina web real con la que puedes experimentar. Tambin puedes encontrar este documento de ejemplo en la galera de diseos.

Haz clic en botn, abre la categora INTRODUCCIN y haz doble clic en el primer documento.

Aqu puedes averiguar como cambiar los colores de la pgina web, corregir el texto, arrastrar y soltar fotos, mover objetos alrededor de la pgina y ms.

Deshacer

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

Introduccin 17

Cules son las novedades de MAGIX Web Designer 10 Premium? Si ya tienes Web Designer 9 (o una versin anterior), encontrars numerosas nuevas caractersticas y contenidos en Web Designer 10. Sabemos que muchos clientes Premium no necesitan revisar la funcin Diseo Web adaptativo, pero avanza hasta la vista general de las otras nuevas funciones y contenidos y encontrars muchas otras novedades que te permitirn ahorrar tiempo y hacer que tu sitio destaque entre los dems.

Autora y publicacin web Funcin de diseo web adaptativo (RWD por sus siglas en ingls): solo para Web Designer Premium. Dado que cada vez es ms popular realizar bsquedas en navegadores a travs de los mviles y tabletas, es necesario crear sitios diseados a la medida de las necesidades de sus usuarios. Hasta ahora la solucin implicaba crear mltiples pginas y un buen conocimiento de Javascript. Web Designer 10 presenta una solucin RWD que te permite crear un nico archivo que contenga variantes de tu pgina en anchos diferentes para que tu sitio web responda de forma dinmica al tamao de pantalla del visor, presentando el diseo ms apropiado para su dispositivo. Y como es de esperar en Web Designer, no tienes que hacer ningn tipo de codificacin.

En otras palabras, puedes crear mltiples variantes (p. ej. escritorio, tableta, telfono) con contenido compartido (textos, fotos, grficos) pero con la capacidad de adaptar libremente el diseo de las variantes para ajustarse al tamao del dispositivo. Puedes controlar totalmente el diseo de las variantes, lo que asegura un resultado de calidad para mviles y tabletas. Web Designer exporta un nico archivo HTML que puede cambiar de forma dinmica de un diseo a otro dependiendo del tamao de la pantalla del visor.

Variantes de temas normales y de mvil

18

www.magix.es

Smartshapes Una manera increblemente rpida de crear y editar algunas de las formas requeridas ms comunes (por ejemplo, globos de dilogo, flechas o segmentos de grfico de tarta) con resultados de alta calidad garantizados. Si no tienes tiempo (o la habilidad) para dominar las herramientas de dibujo, ya no necesitas recurrir a clipart. Aqu hay algunos ejemplos de la librera smartshapes (disponibles por Internet, por lo que se aadirn ms formas hasta finales de ao) que se pueden personalizar fcilmente:

Ejemplo de "burbuja de dilogo" smartshape. Edita la forma, el tamao, el texto, la direccin, el ngulo, la curva de la punta, el color, etc. simplemente arrastrando el control deslizante por la forma.

Variaciones de uno de los diseos de flecha de smartshape. Tan solo arrastra para ajustar el ngulo, la duracin, la curva y el grosor. As de fcil

Supersites de pgina nica (solo en Web Designer Premium) Si tienes una pgina pequea o muy concentrada y ests esforzndote por hacerla destacar entre las dems, te va a encantar nuestro nuevo concepto de pginas nicas trucadas.

En lugar de presentar tu sitio web como una web de pginas separadas al modo tradicional (en el que hay que hacer clic en un enlace para navegar de una pgina a otra) ahora tienes la opcin de presentar el sitio web completo como un nico documento con desplazamiento rpido (horizontal o vertical) usando el

Introduccin 19

desplazamiento o deslizando el dedo por la pantalla para navegar. O puedes presentar pginas de una en una al modo tradicional pero con una de las nuevas transiciones de pgina animadas supersuaves (ver abajo) que se activan con el desplazamiento, deslizando el dedo por la pantalla o con clics.

Las posibilidades son infinitas y los ejemplos incluyen promociones de eventos, portafolios, reclamos para nuevos productos, captadores de fondos, tutoriales breves o currculums. Es estupendo para aquellos sitios nicos (una fuente, una plantilla, un coche a la venta...) y puede ser una opcin ms atractiva a la vista e interactiva que un documento PDF (ver el ejemplo en el men). Sea cual sea tu aplicacin, esta funcin es perfectamente apropiada para todos aquellos usuarios que navegan ahora con tabletas (siendo aun as totalmente compatible con navegadores normales).

Men Insertar nuevo Un nuevo men Insertar de alta calidad que mejora considerablemente la facilidad con la que puedes insertar elementos clave en tu documento (p. ej. insertar nuevas pginas o insertar nmeros de pgina) incluidas algunas opciones nuevas, por ejemplo, "Insertar imagen de cmara".

Nuevas transiciones de pginas para presentaciones y pginas web (solo en versin Premium) V10 ofrece mejoras de efectos de transicin de pgina significativas que incluyen efectos en 3D, con aceleracin de hardware, superfluidas y totalmente libres de parpadeos. Son ideales para presentaciones, pero tambin pueden usarse con grandes resultados en Supersites.

Esta captura de pantalla muestra una transicin media de una a otra. En este caso la pgina est haciendo una rotacin en 3D, una pgina se introduce desde la derecha mientras la otra sale por la izquierda.

Hay muchos tipos de transiciones animadas entre las que puedes elegir.

Adaptar tamao En lugar de disear pginas web de presentacin para tamaos de pantalla especficos, las pginas ajustan su tamao de forma automtica e inteligente para adaptarse a cualquier tamao de navegador (o puedes configurarlas para pantalla completa). Ten en cuenta que tambin puedes usarlo para pginas web, pues puede ser una buena opcin cuando, como en el caso de las presentaciones, son sitios pequeos con pginas cortas (podra estar bien con una superficie Supersite, por

20

www.magix.es

ejemplo, de forma que cada pgina adaptara su tamao de forma automtica para adaptarse al tamao de la ventana del navegador).

Pginas con proteccin por contrasea de MAGIX Online World Si publicas tu sitio web a travs de MAGIX Online World (el alojamiento MOW gratuito est incluido en todas las versiones de Web Designer) ahora puedes proteger fcilmente con contrasea esa pgina. Incluye todas las funciones para gestionar tu lista de autorizacin.

Alojamiento "M" en MAGIX Mundo Online gratuito incluido (solo versin Premium) Si has adquirido Web Designer Premium, tienes la opcin de alojamiento "M" en MAGIX Mundo Online gratuito incluida por un ao (por valor de 1,99 euros al mes). Esto incluye alojamiento web gratuito de 2GB, un nombre de dominio gratuito (p. ej. tunombre.com, .co.uk o .es, etc.) y una direccin de e-mail asociada con base en la web que se puede asociar al nombre del dominio (5 buzones de correo diferentes). Los usuarios de Premium V9 ahora obtienen un vale que les permite prolongar su paquete de alojamiento gratuito M un ao.

Contenido Catlogo de contenido online La extensin online de la galera de diseos te ofrece navegacin y bsqueda de contenido mejoradas.

Introduccin 21

Nuevas plantillas Web Designer Premium se ha ampliado con 10 nuevos y modernos temas generales de pginas web (normalmente a la venta en paquetes web de 10 cada uno, por lo que ahorras 100 ) con ms de 16 diseos, incluidas las nuevas variantes para mviles. Web Designer tambin se ampla con 5 nuevos temas generales de pgina web.

Nuevos widgets Nuevos widget de barra de desplazamiento de foto usuales (solo para Premium) Nuevos widget para redes sociales: logotipo de Instagram, snapwidgets de

Instagram (inserta tus fotos Instagram en una pgina web como una galera de fotos) logotipos de Pinterest y Linkedln.

Otras pequeas mejoras Rotacin automtica de fotos al importar: puede que hayas notado ltimamente

que tus fotos rotaban de forma aleatoria cuando las importabas desde algunos dispositivos nuevos. Web Designer lleva a cabo una deteccin y rotacin automtica cuando es necesario para evitar este inconveniente.

Importacin mejorada de archivos Word y PDF: se ha optimizado la importacin de archivos Word. El filtro de importacin de archivos PDF se ha reemplazado con uno nuevo con el que obtendrs mejores resultados.

Otros cambios de presentacin (solo para Premium): las nuevas transiciones de pgina representan una gran mejora para las presentaciones, pero tambin hay algunos otras pequeas mejoras de uso en el proceso de creacin y vista de pasos, adems de dos nuevas plantillas "vacas" de relacin de aspecto (pantalla panormica 16x10 y tradicional 4:3).

Ayuda Si necesitas ayuda para el manejo de este programa, a continuacin encontrars informacin que puede serte til:

Ayuda de programa: selecciona "AYUDA DE MAGIX WEB DESIGNER 10 PREMIUM" del men "AYUDA" para abrir la ayuda de Web Designer, que contiene cientos de pginas de informacin.

Barra de estado: intenta leer el texto de la barra de estado en el extremo inferior de la ventana principal de MAGIX Web Designer 10 Premium. Siempre ofrece una descripcin de las acciones actuales y de sus efectos (incluso durante los arrastres), lo que resulta ideal para aprender a usar las herramientas de MAGIX Web Designer 10 Premium. Tambin cuando colocas el cursor sobre los botones y los controles, el programa te informa sobre lo que hacen. Para ms detalles, consulta la barra de estado.

Consejos para herramientas (tooltips) (en la pgina 22): si colocas el cursor del ratn sobre un botn o control por un momento, aparecer un mensaje informndote de su funcin.

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

22

www.magix.es

Cajas de dilogo: si quieres saber lo que hace una caja de dilogo o cmo usarla, haz clic en AYUDA.

Vdeos: usa la opcin del men "AYUDA" > "PELCULAS".

Informacin de documento "ARCHIVO" > "INFORMACIN DE DOCUMENTO" muestra informacin sobre el documento seleccionado como el tamao o cualquier fuente utilizados. Esta es una buena forma de comprobar si te falta alguna fuente necesaria que pudiera impedir que el documento se visualice correctamente.

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

Consejos de herramientas

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

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

Primeros pasos 23

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

Diseo del programa

Barra de informacin: cambia con cada herramienta

Barra de herramientas de la pgina web

Zoom

Galera de diseos (barra de galeras)

Galera de pginas y capas (barra de galeras)

Herramienta de seleccin

Herramienta de edicin de fotos

Herramientas de dibujo

Herramienta de texto

Herramienta de sombra

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

Lnea de color

24

www.magix.es

Nota: todas las barras de informacin de Web Designer han mejorado la renderizacin de texto para facilitar la visualizacin, siempre que tengas habilitado el texto ClearType en el panel de control de Windows.

En la barra superior hay cuatro botones relacionados con las funciones de la pgina web. Tres de estas opciones tienen barras desplegables que se muestran cuando colocas el cursor del ratn sobre ellas y te ofrecen ms funciones.

Exportar y previsualizar la pgina web

Propiedades del enlace

Opciones de pgina web

Exportar

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

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

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

Zoom y desplazamiento de la pgina Estas funciones comunes se hacen de manera sencilla:

Para ampliar o alejar con el zoom, mantn "Ctrl" pulsado y utiliza la rueda del ratn

Para desplazar la pgina, presiona la rueda del ratn y muvelo (la rueda tambin funciona como un botn)

Primeros pasos 25

Para desplazarte por la pgina usa la rueda del ratn (o las barras de desplazamiento, claro)

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

Puedes arrastrar y soltar elementos entre pginas. Cuando haces cambios de color de tema en todo el documento, puede verse como los cambios afectan a todas las pginas.

La pgina actual est marcada con corchetes en las cuatro esquinas.

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

Barras desplegables Algunas herramientas de la barra de herramientas principal estn agrupadas en un solo icono. Estos iconos cuentan con un pequeo tringulo indicador en la esquina inferior derecha y, cuando pasas el cursor del ratn por estos iconos, aparece una barra desplegable. La barra contiene otros iconos de herramientas que pertenecen a dicho grupo. Simplemente, mueve el cursor del ratn hasta una de las opciones para ver un consejo de herramienta y luego selecciona la herramienta que quieras usar.

Si seleccionas una herramienta modal de una barra desplegable, esta herramienta se convierte en la herramienta principal para ese grupo. Ahora vers ese icono sealado en la barra de herramientas principal.

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

Consulta el captulo Personalizacin en el manual en pdf para ms informacin sobre las barras desplegables.

26

www.magix.es

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

Estos son los tipos de elementos de pgina bsicos:

Texto: al usar la HERRAMIENTA DE TEXTO puedes crear todo tipo de ttulos y columnas de texto e incluso bloques de texto que fluyen de un bloque a otro. Tambin puedes crear listas con vietas o numeradas. La barra de informacin de la HERRAMIENTA DE TEXTO proporciona controles de fuente, tamao, espaciado de lnea y ms. Puedes redimensionar el texto usando la HERRAMIENTA DE SELECCIN o seleccionando el texto de la manera normal y escogiendo un punto o tamaos de pxeles alternativos. Tambin puedes incluso girar el texto desde cualquier ngulo, y usando CONTORNEAR TEXTO (haz clic derecho en un objeto para ver esta opcin) puedes hacer fluir el texto automticamente alrededor de objetos (p. ej. fotos) en la pgina.

Grficos: cualquier tipo de logo, ttulo y la mayora de los botones que aparecen en tu pgina web son grficos. Web Designer es un programa de grficos vectoriales, lo que significa que puedes corregir la forma, girar y redimensionar tus objetos grficos sin prdida de calidad (a diferencia de herramientas de edicin y retoque fotogrfico como Photoshop). Y aunque no hay ningn estndar de grficos vectoriales para pginas web (para web todos los grficos tienen que ser formatos JPG, GIF o PNG) Web Designer crea automticamente el formato y resolucin adecuados. Por ejemplo, si quieres crear un panel de color para colocar detrs tu texto, lo haras dibujando un rectngulo o el objeto de rectngulo con esquinas redondeadas en la pgina, y colocndolo detrs del texto. Cuando exportas tu pgina web, se convierte automticamente en una imagen grfica PNG con la resolucin adecuada.

Fotos: hay pocas pginas web que no contengan algn tipo de foto. MAGIX Web Designer 10 Premium tiene una gran gama de herramientas de retoque de fotografas. Puedes arrastrar y soltar fotos directamente desde tu cmara o desde la ventana del explorador de archivos, girarlas, optimizarlas, recortarlas, y Web Designer genera automticamente la resolucin de imagen JPG adecuada. Sustituir fotos existentes en plantillas es tan fcil como arrastrar y soltar, y puedes cambiar sencillamente el tamao y el ngulo de las fotos "dentro" de su marco. Puedes crear fcilmente fotos en miniatura sobre las que puedes hacer clic para que se abra una versin ampliada y puedes incluir opcionalmente controles de galera que permiten a los visitantes navegar por tus fotos o ver un pase de fotos automtico.

Marcadores de posicin: estos son objetos grficos en la pgina que representan el tamao y la posicin de "widgets" dinmicos como animaciones flash, pelculas o formas. Al exportar tu sitio, el grfico del marcador de posicin es reemplazado por el cdigo requerido para hacer que el widget funcione de

Primeros pasos 27

modo que el widget aparece en la misma posicin en tu pgina. Consulta el captulo Widgets de pgina web (en la pgina 398) en el manual en pdf para ms detalles.

Diseo web basado en objetos Todo los tipos de elementos descritos ms arriba se refieren generalmente a objetos.

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

La HERRAMIENTA DE SELECCIN puede ser utilizada para seleccionar cualquier objeto en la pgina y para mover (simplemente arrstralo), redimensionar o rotar los objetos.

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

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

Tambin puedes crear columnas de texto, pulsando y arrastrando horizontalmente la HERRAMIENTA DE TEXTO, o arrastrando diagonalmente las reas de texto. Ve a la seccin de texto (en la pgina 217) en el manual en pdf para ms detalles y al captulo Manejo de texto (en la pgina 190) para una informacin detallada acerca de las funciones de texto de MAGIX Web Designer 10 Premium.

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

Orden de los objetos Todos los objetos en la pgina estn colocados uno encima del otro. El objeto que se ha dibujado o creado en ltimo lugar est siempre arriba del todo, es decir delante de cualquier otro. Puedes ajustar la posicin de colocacin con clic derecho y seleccionando ARREGLO o usando las opciones del MEN ARREGLO.

28

www.magix.es

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

Hay una complicacin aadida: las capas. Todos los objetos se recopilan en capas con nombres y cada capa puede activarse o desactivarse para mostrar u ocultar todo en esa capa. Consulta la seccin de capas (en la pgina 65) en el manual en pdf para ms detalles.

La GALERA DE PGINAS Y CAPAS te permite ver fcilmente y ajustar el orden de apilamiento de los objetos y capas. Los objetos se muestran en orden de adelante hacia atrs en la galera. Lee el captulo Galera de pginas y capas (en la pgina 407) en el manual en pdf para ms informacin.

La herramienta de seleccin

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

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

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

Primeros pasos 29

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

Girar objetos Hay dos modos de hacer girar un objeto. O bien, haciendo clic otra vez sobre el objeto para que los controles de seleccin cambien a controles de rotacin, con los que podrs estirar o hacer girar el objeto. O, cuando se ven los controles de esquinas, moviendo el cursor de ratn dentro de los controles de esquinas hasta que veas que el cursor cambia a un indicador de rotacin , entonces tambin podrs arrastrar para hacer girar el objeto seleccionado.

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

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

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

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

Copiar objetos Puedes utilizar las tpicas opciones de "EDITAR" > "COPIAR" ("Ctrl + C") y "EDITAR" > "PEGAR" ("Ctrl + V") o hacer clic derecho en un objeto y seleccionar COPIAR, aunque una forma muy rpida de copiar un elemento es, simplemente, arrastrarlo con el botn derecho del ratn.

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

30

www.magix.es

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

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

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

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

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

VISTA PREVIA DE PGINA WEB: exporta todas las pginas de tu sitio y luego muestra la ventana de vista previa. As, todas las pginas y enlaces de tu sitio deberan funcionar.

Los botones de navegacin en la barra superior de la ventana de vista previa te permite avanzar o retroceder, como en un navegador web, y el botn de Inicio permite regresar a la pgina en la que comenzaste la vista previa.

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

Primeros pasos 31

Puedes ver tu sitio web en modo de pantalla completa haciendo clic en el botn de VER PANTALLA COMPLETA en la parte superior derecha de la ventana de vista previa ("Esc" para salir o "F11" para entrar y salir del modo de pantalla completa). Cuando se cierra la ventana de vista previa y la siguiente se vuelve a abrir, Web Designer muestra el ltimo modo elegido para la ventana, es decir, la pantalla normal, maximizada o completa.

Si no has exportado tu sitio todava, estas vistas previas se exportan a una carpeta temporal en tu PC. Una vez que lo hayas exportado, la misma ubicacin de exportacin se utilizar siempre que hagas una vista previa, es decir, que el sitio exportado se actualiza constantemente.

Selecciona tu navegador de vista previa A pesar de que esta vista previa interna utiliza una versin simplificada del navegador Internet Explorer por defecto, puedes elegir uno de los cinco tipos de navegadores ms populares para ver tu pgina en la ventana de vista previa.

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

Nota: estos botones solo estn habilitados si tienes instalados los navegadores en tu PC.

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

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

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

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

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

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

Si deseas ver tus pginas en un navegador que no sea de este tipo, puedes hacer clic derecho sobre el archivo. htm y seleccionar ABRIR CON..., o simplemente puedes arrastrar y soltar el archivo en una ventana del navegador abierta. Una vez exportado, cada vez que pulses el botn de vista previa, la exportacin se actualizar tambin, y entonces solo ser necesario pulsar el botn de Actualizar en tu navegador (o presionar F5).

32

www.magix.es

Uso de plantillas, cliparts y widgets Abre la GALERA DE DISEOS con un clic en la pestaa GALERA DE DISEOS de

la barra de galeras (o con "ARCHIVO" > "NUEVO DE LA GALERA DE DISEOS").

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

Cada tema de pgina web tiene una serie de diseos alternativos y tiles elementos para tu pgina. Cada uno contiene a su vez una plantilla de pgina web completa y varios esquemas de colores. Puedes cambiar todo tu sitio a un esquema de color completamente distinto con solo arrastrar y soltar el esquema desde la galera hasta la pgina o con un doble clic.

En ELEMENTOS DE PGINA Y WIDGETS encontrars una amplia variedad de grficos y widgets que puedes aadir a tu pgina, desde botones, barras de navegacin y paneles de texto a formas, soluciones de comercio electrnico y pases de fotos. Tan solo arrastra y suelta cualquiera de ellos desde la galera sobre tu pgina web.

Si ests conectado a Internet, la galera de diseos se actualiza automticamente para mostrarte las ltimas plantillas y novedades disponibles.

Agregar nuevas pginas a tu pgina web Puedes arrastrar cualquier diseo de plantilla desde la GALERA DE DISEOS en tu pgina. Si se trata de una plantilla de pgina, se aadir una nueva pgina a tu sitio web, pero se te preguntar primero si quieres que los cambios de colores coincidan. Si arrastras un elemento de clipart como un botn, un encabezado o un objeto de foto, esto se agregar a la pgina en el lugar en donde lo sueltes y nuevamente se te preguntar si quieres que los colores coincidan.

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

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

O puedes copiar y pegar una pgina existente en el mismo o en otro documento. Haz clic en una parte en blanco de la pgina y selecciona COPIAR PGINA. Haz clic

Primeros pasos 33

derecho en una pgina del documento de destino y selecciona PEGAR > PGINA (o pulsa "Ctrl + V").

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

Puedes agregar una nueva pgina en blanco, haciendo clic derecho y seleccionando NUEVA PGINA o utilizar el botn INSERTAR PGINA EN BLANCO en la barra del men desplegable de la pgina.

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

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

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

Clipart flash MAGIX Web Designer 10 Premium incluye la posibilidad de crear animaciones flash desde cero (ver la seccin Animaciones flash (en la pgina 418) en el manual en PDF), pero tambin incluye una variedad de plantillas de flash que puedes personalizar. Las plantillas flash no se pueden arrastrar hacia la pgina directamente, deben abrirse como un documento de animacin separado que puedes personalizar como quieras y luego puedes guardar el archivo Flash (.swf) en tu disco local. Luego, utiliza "ARCHIVO" > "IMPORTAR" o arrastra y suelta el archivo .swf en tu pgina web.

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

34

www.magix.es

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

Para abrir esta galera:

Haz clic en la pestaa GALERA DE DISEOS en la barra de galeras. O selecciona "HERRAMIENTAS" > "GALERAS" > "GALERA DE DISEOS".

Consulta MANEJO DE DOCUMENTOS (en la pgina 94) para ms informacin sobre como usar las galeras. Si te encuentras en lnea cuando abres la galera, comenzarn a descargarse automticamente diseos y widgets de los servidores de Web Designer, que aparecern de inmediato en la galera. Visita regularmente la galera para ver los ltimos widgets y plantillas gratis disponibles. Para abrir una plantilla como un nuevo documento, haz doble clic. Para importar una plantilla en un documento abierto, arrstrala y sultala sobre le diseo. Las plantillas de pgina se

Primeros pasos 35

agregan como nuevas pginas al documento actual cuando lo haces. Otras plantillas y widgets se agregan a la pgina actual. Muchas de las carpetas de la galera en ELEMENTOS DE PGINA Y WIDGETS contienen "widgets", tal como lo indican sus nombres de carpeta. Estos son mucho ms que simples grficos estticos. Consulta el captulo WIDGETS DE PGINA WEB para ms informacin.

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

Cuando importas una pieza de contenido desde el catlogo de contenido se descarga en tu PC y permanece disponible cuando no ests conectado. Para abrir el catlogo de contenido

Haz clic en "ARCHIVO" > "NUEVO DEL CATLOGO DE CONTENIDO" (Shift+Ctrl+Alt+K)

haz clic en "INSERTAR" > "DESDE EL CATLOGO DE CONTENIDO" para insertar y descargar una pieza de contenido desde el catlogo.

Catlogo de contenido online

36

www.magix.es

El catlogo es una ventana redimensionable: arrastra los bordes o la esquina inferior derecha para cambiar el tamao. Se obtiene un popup de vista previa cuando pasas por las categoras de contenido a la izquierda: haz clic para seleccionar y esa categora se expandir y se mostrar en el lado derecho. Para las categoras que tienen muchos elementos hay un control de pgina en el extremo superior derecho que te permite ojear las pginas de contenido siguientes y posteriores.

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

Colores de la pgina web Todas las plantillas utilizan un pequeo conjunto de colores originales y varias sombras de estos colores originales. La forma ms fcil de cambiar el color de tu sitio es utilizar uno de los esquemas de color alternativos que se suministran con cada tema web en la GALERA DE DISEOS. Simplemente arrastra un esquema hasta la pgina para cambiar el color de todo el sitio o haz doble clic en l.

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

Contorno actual y color de relleno

Editor de color

Pipeta para seleccionar colores

Patch "Sin color".

Colores "originales" con nombre y colores vinculado

Paleta fija de colores estndar

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

Mantn el cursor sobre un color para ver su nombre

Simplemente haz clic en cualquier color con nombre y selecciona la opcin de edicin (si mantienes el cursor del ratn sobre el color vers el nombre del consejo de herramienta).

Primeros pasos 37

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

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

Haz clic en la etiqueta para crear un color con nombre

Haz clic para mostrar los controles de color ampliados

Color anterior

Color actual

Arrastra hacia aqu para seleccionar cualquier tonalidad del tono seleccionado

Arrastra hacia aqu para seleccionar cualquier tono

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

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

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

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

38

www.magix.es

Puedes asignar un relleno de color con gradacin a un objeto dibujado utilizando la herramienta de relleno (en la pgina 231).

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

Tambin puedes cambiar los colores o cualquier objeto multicolor seleccionndolo y haciendo clic sobre un color de la lnea de color. Aparecer un dilogo que te muestra el conjunto de colores usados actualmente en este objeto: tan solo haz clic sobre el que quieres cambiar. Tambin puedes abrir el editor de color. La lista de colores en la parte superior incluye el mismo conjunto de colores: elige el que quieres editar.

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

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

Primeros pasos 39

Fondos de pgina web La mayora de diseos de pgina en la GALERA DE DISEOS tienen dos tipos de fondo. Un fondo de tablero de dibujo amplio que se extiende a lo largo del fondo de toda la ventana del navegador cuando exportas tu pgina. Sobre l est el fondo de pgina con todos los otros elementos que constituyen la pgina web.

Color de fondo del tablero de dibujo o del navegador

Color del fondo de pgina

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

Cuando creas un nuevo documento en blanco ("ARCHIVO" > "NUEVO") la pgina es transparente (sin color) por defecto, por lo que tan solo vers el color del tablero de dibujo tras ella, que es blanco por defecto. Tambin vers un contorno gua rectangular suave que muestra los lmites de la pgina sobre el tablero de dibujo.

Adems, hay una gran variedad de texturas de fondo prediseadas en la GALERA DE DISEOS. Tan solo arrastra y suelta un color hasta el rea del tablero de dibujo para usarlas.

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

40

www.magix.es

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

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

Si la foto que importas es muy grande, se te preguntar si quieres importar una versin reducida. Esto es recomendable, para ms informacin lee la seccin resolucin de fotos a continuacin.

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

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

Primeros pasos 41

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

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

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

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

42

www.magix.es

Sin embargo, si importas una foto grande a un documento de impresin o con animacin, MAGIX Web Designer 10 Premium te pregunta si quieres importar una versin de menor resolucin de tus fotos. Si el documento va a incluir muchas fotos, sera conveniente elegir la opcin de menor resolucin. De lo contrario, si contiene fotos de gran tamao, el tamao del archivo de diseo ser mucho ms grande de lo que debera ser (porque contiene una copia de cada una de tus fotos). La memoria requerida al editar y exportar el documento sern tambin mayor de lo necesario.

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

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

O utiliza la HERRAMIENTA DE CORTE para ms control sobre los recortes.

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

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

Selecciona la pequea miniatura de foto y selecciona la opcin "FOTO EMERGENTE" en la pestaa ENLACE del dilogo Propiedades web (haz clic en el BOTN ENLACE en la BARRA DE HERRAMIENTAS DE WEB).

Primeros pasos 43

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

44

www.magix.es

All podrs determinar cmo aparecer tu popup. Una opcin te permite colocar un ttulo sobre cada foto emergente. Configura el ttulo para cada foto en el campo TTULO. De forma opcional, puede mostrarse un subttulo debajo de cada foto emergente. Simplemente, configura la CAPTURA DE IMAGEN para la miniatura en el mismo dilogo. Consulta la seccin foto emergente del captulo Dilogo de propiedades web para detalles completos de las opciones disponibles.

En Internet Explorer, la captura de imagen se mostrar en un consejo de herramienta emergente al pasar el ratn sobre la imagen. Para mostrar un texto diferente, como "Haz clic para ampliar" cuando mueves el cursor sobre la miniatura de imagen, ve a la pestaa MOUSEOVER y cambia "MUESTRA TEXTO DE POPUP" por "HAZ CLIC PARA AMPLIAR".

Texto

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

Dispones de todas las opciones de procesamiento comunes de Word y puedes pegar textos desde el portapapeles. Con doble clic se seleccionar una palabra, con triple clic se seleccionar una lnea entera (lo que puede ser til para seleccionar todo el texto en un botn). Como es habitual, la barra de informacin provee una amplia variedad de controles para esta herramienta. Como alternativa, puedes hacer clic dentro del texto y escoger PROPIEDADES AVANZADAS DE TEXTO.

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

Primeros pasos 45

Popup de tamao de fuente en tiempo real

Fuentes usadas en el documento actual

Fuentes compatibles con la web

Fuentes de Google

Todas las fuentes instaladas

Variantes de estilo disponibles para la fuente seleccionada. No todas las fuentes tienen variantes

La opcin "aadir" en la seccin de fuentes de Google te permite examinar, descargar e instalar desde cientos de fuentes de acceso libre que puedes usar en tu pgina web.

46

www.magix.es

El men de fuentes ofrece la seleccin de fuentes en tiempo real. Mientras vas recorriendo el men, el texto seleccionado cambia de fuente, proporcionando una vista previa de como se ver la fuente en el documento.

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

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

Si conviertes cualquier objeto de texto en un grfico puedes usar cualquier fuente. Consulta la seccin de grupos (en la pgina 51) abajo para ms detalles.

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

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

Lista con vietas y numeradas Utiliza los botones de las listas con vietas y numeradas de la barra de informacin de la HERRAMIENTA DE TEXTO para ingresar rpidamente listas con vietas o numeradas. Puedes hacer clic derecho sobre una lista numerada y escoger PROPIEDADES DE LA

Primeros pasos 47

LISTA del men contextual para cambiar el orden del esquema de nmeros en tu lista. Tambin puedes usar cualquier grfico como vieta o nmero de tu lista. Consulta el captulo Herramienta de texto (en la pgina 190) para ms informacin.

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

En todos estos casos, Web Designer convertir el texto automticamente en un grfico en tu pgina web exportada.

Contornear texto alrededor de objetos Si haces clic con el botn derecho del ratn en un objeto como una foto y seleccionas la opcin de men "CONTORNEAR TEXTO (en la pgina 212)", puedes hacer que el texto fluya alrededor del objeto que est encima del texto.

Muchos de los objetos, como fotos, paneles laterales, botones y encabezados utilizados en plantillas desde la GALERA DE DISEOS se contornean automticamente, es decir, el texto siempre fluye alrededor de estos objetos cuando los arrastras cerca.

El contorneo de objetos solo se aplica al texto que est detrs del objeto, as que tendrs que "llevar hacia adelante" el objeto para que el contorneo funcione (Ctrl +F). Como alternativa, si solo quieres que el texto fluya alrededor de un objeto en una capa individual, puedes hacer que el texto debajo de esta capa no se contornee (til para capas popup dentro de una pgina web). Consulta Propiedades de capa (en la pgina 413). Todas las operaciones de la HERRAMIENTA DE TEXTO son en tiempo real: el texto se reformatea y refluye segn vas ajustando el ancho de la comuna o vas moviendo los objetos contorneados.

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

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

Haz clic sobre el objeto y selecciona ANCLAR AL TEXTO. En la HERRAMIENTA DE SELECCIN, haz clic y arrastra el smbolo del ancla que aparece en la parte superior izquierda del objeto hasta la ubicacin del texto en donde quieres fijar el objeto. Ahora, si editas o mueves el texto, el objeto anclado se mover junto con el punto anclado.

48

www.magix.es

Corrector de ortografa

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

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

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

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

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

Tambin te recomendamos trabajar con la funcin de copias de seguridad automticas activada. Esta opcin se controla desde la pestaa Copias de seguridad del dilogo HERRAMIENTAS > OPCIONES. Cuando est activada esta opcin, se realiza una copia de seguridad de tu documento abierto de forma regular. Aqu puedes escoger la forma en que debe comportarse el programa al cerrarlo. Puedes hacer que

Primeros pasos 49

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

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

Copias de seguridad automticas La pestaa Copias de seguridad del dilogo HERRAMIENTAS > OPCIONES te permite activar y desactivar la funcin de copias de seguridad automticas. Esta funcin guarda una copia de todos los documentos abiertos modificados en intervalos regulares. Tambin puedes escoger si se te debe advertir que no has guardado documentos al cerrar el programa o si debe guardarse una copia de seguridad de todos estos documentos y restaurarse la prxima vez que inicies el programa.

Consulta el captulo Manejo de documentos (en la pgina 88) para ms detalles acerca de estas funciones.

Objetos extensibles Muchos de los objetos grficos, como los botones extensibles y los paneles de texto pueden ajustar automticamente su tamao dependiendo del tamao o la longitud de texto. La mayora de grupos de plantillas y todos los botones en la carpeta de "ELEMENTOS DE PGINA Y WIDGETS" > "BOTONES" de la GALERA DE DISEOS, tienen ambas versiones, fija y extensible. Se recomienda que si se configura un conjunto de botones de navegacin (por lo general una coleccin vertical u horizontal de enlaces o botones) se use un ancho fijo para que sean todos del mismo tamao.

50

www.magix.es

De manera similar, en muchos de los paneles laterales o de texto en las plantillas, y a veces en el rea de texto principal, se puede ajustar tambin el alto y en ocasiones el ancho. En el caso de los paneles de texto, puedes ajustar el ancho de la columna con la HERRAMIENTA DE TEXTO arrastrando el borde izquierdo o derecho del indicador de columna.

Nota: puedes crear nuevos componentes de extensin utilizando Xara Designer Pro.

Barra de herramientas de pgina Web La BARRA DE HERRAMIENTA DE PGINAS WEB en la parte superior de MAGIX Web Designer 10 Premium suministra un prctico acceso a las principales funciones web que utilizars regularmente.

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.

Primeros pasos 51

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

Por ejemplo, puedes dibujar un simple botn desde cero dibujando un rectngulo con la HERRAMIENTA DE RECTNGULO y colocando una etiqueta de texto encima con la HERRAMIENTA DE TEXTO. Estos son objetos separados y puedes moverlos de forma independiente en la HERRAMIENTA DE SELECCIN. Pero si seleccionas ambos en la HERRAMIENTA DE SELECCIN (tambin puedes arrastrar para incluir ambos o presionar "Shift" y hacer clic sobre otros objetos adicionales) y haces clic derecho y seleccionas GRUPO (o pulsas "Ctrl + G" o usas el men "ORDENAR" > "GRUPO"), se convertirn en un objeto agrupado (Pista: la lnea de estado que se encuentra debajo siempre te informa de lo que est seleccionado). Ahora si arrastras, cambias el tamao o giras este objeto, todas las partes de este grupo se mueven y transforman como si fueran un nico objeto.

Importante: los objetos agrupados estn generalmente convertidos en un nico grfico cuando exportas tu pgina web.

Al desagrupar (haz clic derecho y selecciona DESAGRUPAR o pulsa "Ctrl + U"), puedes acceder a todas las partes del grupo de forma individual. Como alternativa puedes editar elementos directamente dentro de un grupo. Por ejemplo, si utilizas la HERRAMIENTA DE TEXTO para editar el texto o la herramienta de foto para editar una foto, un clic seleccionar automticamente el elemento dentro del grupo.

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

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

52

www.magix.es

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

Nota tcnica: al exportar estos grupos como imgenes en una pgina web, cualquier texto del grupo se utiliza como texto alternativo de HTML en la imagen (salvo que fijes explcitamente otro texto alternativo para el grupo). Esto significa que los motores de bsqueda pueden indexar el texto y que las herramientas utilizadas por las personas con problemas en la visin tambin reconocern y leern este texto, a pesar de que el texto no aparece directamente en la pgina web. Si no quieres que el texto alternativo se utilice de esta forma, puedes ignorarlo si fijas otro texto alternativo para el grupo en la pestaa Imagen en Herramientas > Propiedades web.

Grupos suaves (soft groups) Hay otro tipo de grupo denominado "Grupo suave" que es un conjunto de objetos conectados de una forma ms suelta . Consulta el captulo Manejo de objetos para ms informacin.

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

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

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

Consulta la seccin Objetos repetidos (en la pgina 137) en el captulo Manejo de objetos para ms detalles.

Primeros pasos 53

Enlaces, botones y barras de navegacin Puedes aadir un enlace web a cualquier objeto, un botn, un grfico o algn texto.

Selecciona el objeto y simplemente haz clic en el icono en la barra superior para introducir la direccin web que quieres enlazar.

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

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

54

www.magix.es

Por lo tanto, para definir uno de tus botones como enlace, simplemente seleccinalo (haz clic en el mismo en la HERRAMIENTA DE SELECCIN), haz clic en el icono e introduce la direccin web o selecciona una de las pginas de la lista desplegable y haz clic en APLICAR. Ya has terminado.

Cuando hayas creado un enlace a un objeto puedes cambiar rpidamente su funcionamiento con tan solo hacer clic sobre el mismo. Aparecer un popup con los detalles y opciones para Cambiar o Eliminar el enlace.

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

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

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

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

Adems, en ELEMENTOS DE PGINA Y WIDGETS, hay una categora que contiene un conjunto de diseos de botones generales que se pueden agregar a tu pgina de la misma forma.

O puedes copiar cualquier botn ya