You are on page 1of 74

Gua de inicio rpido del usuario

Web Creator Pro 6 - Gua de inicio rpido

Tabla de materias
Introduccin a Web Creator Pro 6 .................................................................................................. 5 Gua de inicio rpido........................................................................................................................ 6 Apertura de una plantilla............................................................................................................. 6 Modificacin de una imagen ....................................................................................................... 9 Adicin de un elemento a la pgina .......................................................................................... 10 Introduccin a los elementos del Contenedor .......................................................................... 12 Introduccin al comportamiento de flotacin .......................................................................... 12 Modificacin del men .............................................................................................................. 14 Creacin de un vnculo a otra pgina ........................................................................................ 14 Introduccin a Bloques .............................................................................................................. 18 Uso de Bloques .......................................................................................................................... 21 Finalizacin del proyecto ........................................................................................................... 21 1. 2. 3. Etiquetas de ttulo H1 a H6................................................................................................ 22 Metaetiquetas ................................................................................................................... 22 Google Analytics ................................................................................................................ 22

Mapa del sitio ............................................................................................................................ 22 Carga del sitio Web.................................................................................................................... 23 1. 2. 3. Optimizar ........................................................................................................................... 23 Volver a generar ................................................................................................................ 23 Cargar ................................................................................................................................ 23

Presentacin detallada de la interfaz ............................................................................................ 23 Barra de acceso rpido .............................................................................................................. 24 Cinta........................................................................................................................................... 25 Ficha Archivo ......................................................................................................................... 25 Ficha Inicio ............................................................................................................................. 26 Ficha Proyecto ....................................................................................................................... 27 Ficha Pgina ........................................................................................................................... 27 Actualizar ................................................................................................................................... 27 Deteccin de dispositivos .......................................................................................................... 27 Ficha Insertar ......................................................................................................................... 28 Pgina 2 / 74

Web Creator Pro 6 - Gua de inicio rpido Ficha Seleccin ...................................................................................................................... 30 Ficha Formato ........................................................................................................................ 31 Ficha Web .............................................................................................................................. 31 Peso de pgina........................................................................................................................... 31 Metaetiquetas ........................................................................................................................... 31 Optimizar ................................................................................................................................... 32 Ficha Herramientas ............................................................................................................... 32 Ficha Ayuda ........................................................................................................................... 33 Barra de herramientas Elementos............................................................................................. 33 Insercin de un elemento...................................................................................................... 33 Propiedades de los elementos .............................................................................................. 34 Jerarqua de los elementos.................................................................................................... 34 Seccin Comunes................................................................................................................... 34 Seccin Diseo....................................................................................................................... 37 Seccin Sociales ..................................................................................................................... 39 Seccin Multimedia ............................................................................................................... 40 Seccin Datos ........................................................................................................................ 42 Lista de elementos..................................................................................................................... 43 Ficha Elemento ...................................................................................................................... 45 Ficha Bloques ......................................................................................................................... 46 Barra de herramientas Propiedades ......................................................................................... 48 Ficha Elemento ...................................................................................................................... 48 Ficha Opciones....................................................................................................................... 48 Ficha Acciones ....................................................................................................................... 49 Ficha Puntero del mouse ....................................................................................................... 49 Ficha Vnculo.......................................................................................................................... 49 Ficha Posicin ........................................................................................................................ 49 Ficha Propiedades ................................................................................................................. 49 Elementos del Contenedor: cuadros y paneles ............................................................................. 49 Contenedores ............................................................................................................................ 49 Diferencias entre paneles y cuadros ......................................................................................... 50 Creacin de un diseo con contenedores ................................................................................. 50 Pgina 3 / 74

Web Creator Pro 6 - Gua de inicio rpido Adicin de elementos a un contenedor .................................................................................... 50 Adicin de un elemento a un contenedor............................................................................. 50 Adicin de varios elementos a un contenedor...................................................................... 51 Bloques ...................................................................................................................................... 52 Propiedades de los cuadros y paneles ...................................................................................... 52 Paneles ...................................................................................................................................... 52 Cuadros...................................................................................................................................... 53 Herramientas de alineacin y posicionamiento ............................................................................ 55 Cuadrcula .................................................................................................................................. 55 Guas de posicionamiento ......................................................................................................... 56 Funciones de la ficha Formato .................................................................................................. 56 Comportamientos Flotar y Abajo .................................................................................................. 58 Entendimiento de la funcin de flotacin ................................................................................. 59 Restricciones de posicionamiento ............................................................................................. 60 Mximo provecho del comportamiento de flotacin ............................................................... 64 Adicin de un elemento flotante .............................................................................................. 65 Desplazamiento de elementos de flotacin .............................................................................. 65 Usos del comportamiento de flotacin ..................................................................................... 66 Comportamiento Abajo ............................................................................................................. 68 Uso de grupos ................................................................................................................................ 69 Uso de Bloques .............................................................................................................................. 71 Introduccin a Bloques .............................................................................................................. 71 Creacin de un bloque .............................................................................................................. 71 Cmo volver a utilizar un bloque .............................................................................................. 73 Precauciones con el uso de bloques ......................................................................................... 73 En resumen:............................................................................................................................... 73 Tamao ideal de un bloque ....................................................................................................... 73 Luminosidad y transparencia ........................................................................................................ 74

Pgina 4 / 74

Web Creator Pro 6 - Gua de inicio rpido

Introduccin a Web Creator Pro 6


Web Creator Pro 6 es una aplicacin potente que permite a los usuarios que conocen poco la informtica o no la conocen, crear sitios Web en poco tiempo, con un aspecto profesional. Es tan rpido que puede contarlo en minutos. Web Creator est diseado para cumplir con las necesidades de los usuarios de una herramienta de creacin de sitios Web sencilla y potente. Si se piensa en un usuario con conocimientos medios, le permitimos que su creatividad fluya, sin tener que utilizar la programacin tediosa y los lenguajes de marcado complicados. Poco a poco nuestra solucin ha evolucionado, con la contribucin de los usuarios y la necesidad de ofrecer una experiencia fascinante al usuario final, al mismo tiempo que nos concentramos en la simplicidad. Web Creator Pro 6 es con mucho nuestra versin ms avanzada de todos los tiempos. Tiene en cuenta las innovaciones tecnolgicas recientes, como el nmero cada vez mayor de usuarios de smartphones y exploradores mviles, el mundo creciente de las redes sociales y los pagos seguros mediante PayPal, y hace que puedan implementarse de manera sencilla. Incluso facilita todava ms la visualizacin y la organizacin con nuestros nuevos Contenedores, el cambio de posicin sin ningn esfuerzo con las opciones de Flotar, y la decoracin con fichas y acordeones. La creacin de un sitio Web es tentadoramente sencilla; puede crear un sitio Web desde el principio o utilizar una de las plantillas completas si necesita ayuda para empezar. Una vez realizado el sitio Web, su colocacin en lnea se realiza con slo hacer clic en un botn. Le invitamos a leer este manual para el principiante de Web Creator Pro 6 que le ayudar a familiarizarse con la modificacin de diversos elementos, crear vnculos y administrar pginas. Aqu crear las dos primeras pginas y utilizar herramientas potentes de organizacin como el bloque, los contenedores y la opcin Flotar. Al final, le mostraremos cmo sacar el mayor provecho de su sitio Web y cmo ponerlo en lnea.

Ver este smbolo a lo largo de esta gua. Indica una nueva funcin o una mejora nica en Web Creator Pro 6.

Pgina 5 / 74

Web Creator Pro 6 - Gua de inicio rpido

Gua de inicio rpido


Para empezar, echemos un vistazo a nuestro lienzo virtual.

La seccin Presentacin detallada de la interfaz presentar una explicacin completa de los elementos que se presentan en la imagen.

Apertura de una plantilla


Si todava no lo hace, abra Web Creator Pro 6, vaya a la ficha Archivo y seleccione Nuevo proyecto. Aparecer una ventana con sugerencias que detallan el uso de los Bloques y las Plantillas. Despus de leer la informacin, cierre la ventana. Aparecer el asistente de creacin de sitios con las plantillas para Web Creator Pro 6.

Pgina 6 / 74

Web Creator Pro 6 - Gua de inicio rpido

El asistente ofrece 8 plantillas que contienen todos los elementos esenciales para realizar un sitio Web completo, as como la opcin de empezar con una pgina en blanco. En la parte superior de la ventana se encuentran cuatro fichas: Estilo, Pgina, Tema, y Color/Vista previa. Posteriormente hablaremos de las dems fichas, pero por lo pronto concentrmonos en stas. Abajo se encuentran tres botones de opcin llamados "Versin 6", "Versin 5" y "Otras versiones". Al hacer clic en ellos, podr acceder a las diferentes plantillas. Entretanto, se han agregado nuevas funciones a Web Creator Pro 6, por lo que no se incluyen en las plantillas anteriores. Se recomienda que se utilicen despus de dominar los conceptos fundamentales de la utilizacin de Web Creator Pro 6 para que pueda sacar el mximo provecho de estas plantillas. Vuelva al botn de opcin Versin 6 y desplcese hacia abajo con la barra de la derecha. En este ejemplo, utilizaremos Style 05 de la versin 6. Seleccinelo y haga clic en el botn Siguiente o haga doble clic en la plantilla. Ahora debe haber pasado a la ficha Pgina.

Pgina 7 / 74

Web Creator Pro 6 - Gua de inicio rpido Contiene varios campos en la parte superior de la ventana. Nombre de pgina se refiere al nombre "interno" de esa pgina; el nombre de archivo de base. Por otra parte, Ttulo es lo que se mostrar en la parte superior de un explorador Web. En el campo Idioma, tiene la opcin de cambiar el idioma de su sitio Web. El valor predeterminado es el mismo que el del sistema operativo que est utilizando. En el rea principal tiene la posibilidad de seleccionar una pgina en blanco y varios diseos de pgina. Las plantillas A y B son bastante sencillas y slo contienen unos cuantos bloques vacos. Las pginas Inicio y Presentacin estn constituidas principalmente de texto y se adaptan ms a sitios Web de negocios. Mientras que, las pginas Producto y Productos contienen ms detalles con un bloque de imgenes y bloques combinados que contienen texto y una imagen, que se prestan ms para mostrar galeras y listas que requieren una estructuracin uniforme. El nombre y la carpeta del proyecto se encuentran en la parte inferior de la ventana. Si hace clic en el icono del campo de carpeta, podr ver la ruta de acceso completa, que de manera predeterminada es Web Creator. En el sistema operativo Windows, la carpeta Web Creator se encuentra en Documentos, pero puede cambiarla si desea guardar su proyecto en otro sitio. Para ello, elija la pgina Inicio. Pasar a la pgina Tema, que debe estar vaca. Esta ficha tiene la funcin de agregar pancartas o fondos a pginas, pero se ha deshabilitado. Las nuevas opciones como la luminosidad y transparencia de la imagen permiten realizar efectos sorprendentes que no estaban disponibles en versiones anteriores. (Consulte el captulo Luminosidad y transparencia). Pase a la ficha siguiente, que es la ltima: Color/Vista previa. Desde aqu puede cambiar la paleta, que es el conjunto de colores que se aplicarn en todas sus pginas. El campo Estilo de la parte superior izquierda representa la apariencia general que tendrn los elementos de la pgina. Puede abrir la lista del campo Estilo, que le permite elegir de ms de 170 combinaciones de colores. Es muy importante elegir una paleta adecuada al tipo de sitio Web que est creando y que refleje la idea que hay detrs de ella. En este ejemplo, elegimos el estilo Honolulu. Ms abajo puede ver el nombre de archivo de la paleta, as como los colores que la constituyen. Es importante saber que puede modificar los colores, guardar, duplicar y suprimir cualquier paleta determinada con los botones que se encuentran a la derecha de la lista de colores. Termine con las selecciones y haga clic en el botn Finalizar. Aparecer momentneamente un cuadro de dilogo pequeo con una barra de progreso mientras se constituye la primera pgina.

Pgina 8 / 74

Web Creator Pro 6 - Gua de inicio rpido

Modificacin de una imagen


En la parte superior izquierda, hay una imagen de logotipo. Si hace clic en sta, aparecer un borde de seleccin que le permite cambiar el tamao desde cualquiera de las cuatro esquinas. Este borde le permite saber que el objeto tiene un centro y, cada elemento de Web Creator Pro 6 se puede modificar de esta manera. Si observa en la parte derecha de la interfaz, ver el texto LogoEdit. Es el nombre del elemento, y este panel siempre mostrar el elemento que est seleccionado. Ms abajo se encuentran fichas que tienen opciones para modificar el elemento. Cuando seleccione un elemento, la primera ficha que siempre se abrir ser la ficha Elementos. En la parte superior de esta ficha se encuentra el campo Archivo con 4 iconos junto a ste. Se accede a la biblioteca de imgenes integradas con Web Creator Pro 6. El segundo icono abrir un cuadro de dilogo que le permitir buscar un archivo de imagen que se encuentre en su equipo y reemplazar la imagen del logotipo. Si todava no cuenta con un logotipo, pruebe con uno de la biblioteca de imgenes.

Pgina 9 / 74

Web Creator Pro 6 - Gua de inicio rpido

Debajo del campo Archivo se tienen opciones para los atributos y el comportamiento de la imagen. De manera predeterminada, est habilitado el cuadro de comprobacin Conservar relacin de aspecto. Esto le permite cambiar el tamao de las imgines mientras se conservan la apariencia y las proporciones originales. Sin embargo, existen casos en que desee ajustar las imgenes y esto se hace desactivando el cuadro. Con esta opcin deshabilitada, aparecern nuevos controles que le permiten cambiar el tamao libremente.

Adicin de un elemento a la pgina


Vamos a agregar un eslogan junto al logotipo; ms sencillo no puede haber. En la parte superior izquierda de Web Creator Pro 6, se encuentra la barra de herramientas Elementos. Contiene virtualmente todos los elementos que pueden insertarse en una pgina y siempre est a mano. Elementos ms especficos al contexto se pueden encontrar en la ficha Insertar mediante la cinta. Desde la cinta, tambin se dispone de elementos Comunes, pero los elementos de la biblioteca estn separados en 4 categoras a las que se puede acceder de manera sencilla: Imgenes, Vdeos, Sonidos y animaciones Flash. Vamos a concentrarnos nuevamente en la barra de herramientas Elementos. Haga clic en el botn Texto que se encuentra en la seccin Comunes. Se insertar un rea de texto transparente en medio de la pgina con un smbolo para que introduzca informacin.

Pgina 10 / 74

Web Creator Pro 6 - Gua de inicio rpido Una vez que haya introducido texto, ser fcil personalizarlo. Seleccione texto y desde la ficha Inicio de la cinta, puede cambiar la fuente, su tamao, alineacin, sangra e incluso agregar un vnculo. Seleccionemos la fuente Brush Script MT el tamao 40 para una mejor legibilidad.

Pgina 11 / 74

Web Creator Pro 6 - Gua de inicio rpido

A la derecha de la ficha Inicio, se encuentra un botn para suprimir el formato y hacer que el texto vuelva a su configuracin predeterminada en caso de ser necesario. Ahora que ha modificado el texto, cambie el tamao del elemento con los controladores verdes para que se ajuste al texto. Puede volver a hacer clic en el elemento Texto si necesita editar su contenido.

Introduccin a los elementos del Contenedor


Coloquemos el elemento de texto junto al logotipo haciendo clic en su borde y arrastrndolo. El rea que lo rodea debe tener puntos verdes que indican que est colocando un elemento en un Contenedor. Sin que nadie lo vea, en realidad est agregando el elemento Texto a un elemento llamado Panel. Los paneles, al igual que los cuadros, son un tipo especial de elementos llamados Elementos primarios/Contenedores. Para obtener una explicacin detallada al respecto, consulte el captulo Elementos del Contenedor: cuadros y paneles.

Introduccin al comportamiento de flotacin


Flotar es una funcin importante detrs de toda la potencia de Web Creator Pro 6, que cuando se utiliza en conjunto con los Contenedores, puede incrementar la productividad de forma sorprendente. La flotacin se refiere a la colocacin automtica de elementos en una pgina Web y est estrechamente relacionada con CSS (Hojas de estilos en cascada para las pginas Web). Seleccione el logotipo e intente desplazarlo hacia la derecha (de manera que no se sobreponga en los dems elementos). Se dio cuenta de cmo vuelve a su sitio? Al desplazar el cuadro de texto, se da cuenta de que el elemento de texto no tiene el mismo comportamiento. Esto se debe a que los dos elementos tienen dos comportamientos diferentes. Flotar, para ser ms preciso, flotar hacia la izquierda, desplaza el logotipo hacia arriba y hacia la izquierda en cualquier contenedor que se encuentre. Nuestro elemento Texto no se limita a esta regla porque no tiene habilitado este comportamiento. Seleccione el elemento Texto, y en la ficha Posicin, en el rea Comportamiento de la parte inferior, active Flotar, Izquierda. El elemento Texto se colocar junto al logotipo. Si intenta desplazar el elemento Texto hacia la derecha, volver a su sitio junto al logotipo. Cuando esta funcionalidad se utiliza correctamente, puede reducir considerablemente el tiempo de edicin. Tenindolo en cuenta, se recomienda encarecidamente que lea el captulo Comportamientos Flotar y Abajo para entender mejor su utilizacin y conexin con los Bloques y Contenedores. Pgina 12 / 74

Web Creator Pro 6 - Gua de inicio rpido

Pgina 13 / 74

Web Creator Pro 6 - Gua de inicio rpido

Modificacin del men


Justo debajo del logotipo, se encuentra un men con el texto Menu1, Menu2, Menu3, etc. Seleccione el men haciendo clic en ste y vaya a la barra de herramientas Propiedades de la parte inferior derecha. Aqu ver los diferentes encabezados que tiene el men. Si hace clic en uno de los encabezados, podr cambiar el ttulo. Si lo cambiamos a "Presentacin", aparecer un submen debajo llamado Agregar. Haga clic en ste y cambie el nombre a "Nuestra sociedad" y as sucesivamente. Haga clic en Menu2 y cambie el nombre a "Productos". Tambin cree varios submens para familiarizarse con esta funcin. Para una personalizacin ms detallada, existe un icono de lpiz junto al Estilo, que abre un cuadro de dilogo con parmetros para modificar tanto el men principal como los submens.

Creacin de un vnculo a otra pgina


Una vez que haya elegido el texto del encabezado de los mens, por ejemplo, Productos, junto al campo de texto existe otro campo para los vnculos. Si hace clic en el icono de lpiz que est junto a este campo, aparecer el cuadro de dilogo de creacin de vnculos.

Pgina 14 / 74

Web Creator Pro 6 - Gua de inicio rpido Por lo general debe introducir una descripcin que servir de recordatorio para saber con qu est vinculado. A continuacin, elija una de las diferentes opciones de vnculo segn sus necesidades. Elija la primera opcin de la seccin Crear un vnculo a: una nueva pgina o una existente.

Como hasta ahora no tiene ninguna otra pgina adems de la pgina de Inicio, cree una en un abrir y cerrar de ojos haciendo clic en el botn Crear una nueva pgina. Volver a la ficha Pgina, desde donde cre el proyecto, que presenta pginas que corresponden a su tema. Contine y elija la pgina Productos; confirme la informacin de las pginas Tema y Color/Vista previa y haga clic en Finalizar. Volver al selector de pginas donde puede seleccionar la pgina que acaba de crear.

Pgina 15 / 74

Web Creator Pro 6 - Gua de inicio rpido

Despus de hacer clic en el botn Aceptar, aparecer el nombre de la pgina en el campo de vnculo de la ficha Vnculo.

Pgina 16 / 74

Web Creator Pro 6 - Gua de inicio rpido

Haga clic en Aceptar y volver al editor.

Pgina 17 / 74

Web Creator Pro 6 - Gua de inicio rpido

Prueba de su sitio Web en un explorador


Ha aprendido a insertar y modificar elementos, mens, vnculos y pginas. Desea hacer una prueba? Es muy fcil! Vaya a la ficha Web que se encuentra en la cinta. En la primera seccin aparecen los exploradores que tiene instalados en su equipo. Web Creator Pro 6 agrega automticamente Internet Explorer, Mozilla Firefox, Google Chrome, Opera y Safari a la seccin de exploradores. Aparecer un mensaje que le preguntar si desea guardar las modificaciones. Haga clic en S para ver las modificaciones realizadas en el explorador que haya elegido despus de que cargue la pgina.

Introduccin a Bloques
Si va a la pgina Productos mediante el vnculo que cre en el men, observar que el logotipo aparece, pero no el que eligi. Sera muy til tener el mismo logotipo en la misma pgina. Para hacerlo de manera rpida y eficaz, debe saber de qu se tratan los Bloques. Anteriormente vimos que la imagen del logotipo forma parte de un Contenedor llamado Panel. Justo arriba de la barra de herramientas Propiedades del extremo derecho de la interfaz, encontrar la lista de elementos. Esta lista incluye cada elemento contenido en una pgina, en Pgina 18 / 74

Web Creator Pro 6 - Gua de inicio rpido una estructura de rbol, que muestra la relacin de los elementos entre s, as como el orden en que se crearon. Ajuste el tamao del rea para que pueda ver claramente los 5 primeros elementos que contiene, por ejemplo:

En la parte superior puede ver el primer Panel que mencionamos, denominado PanelHeader, que contiene el logotipo, el texto de eslogan y otra imagen. Justo debajo de ese panel se encuentra otro llamado PanelMenu, que contiene slo el men. Haga clic en PanelHeader para resaltarlo, como se muestra en la imagen anterior. Observe cmo tambin selecciona el elemento de la pgina. Ya que ha seleccionado un panel con elementos secundarios, tambin stos se seleccionan aunque no estn visibles. Haga clic en la ficha Bloques de la parte superior de la lista de elementos. Aparecer una lista de Bloques predefinidos. Se pueden arrastrar a su pgina para agregar nuevo contenido rpidamente. Vaya a la ficha Personalizado, que estar vaca.

Pgina 19 / 74

Web Creator Pro 6 - Gua de inicio rpido

Pero hagamos que esto cambie. Una vez que el panel del editor an est seleccionado, al hacer clic en el smbolo + se crear un nuevo bloque llamado Item1. Se generar una vista en miniatura que muestra de qu est formado el bloque, y contiene lo siguiente: el panel, el logotipo, el texto y la imagen.

Pgina 20 / 74

Web Creator Pro 6 - Gua de inicio rpido

Uso de Bloques
Abra la ficha Pgina de la cinta. En la ficha Pgina, haga clic en el icono Administrador de pginas. Aparecer una ventana que muestra las dos pginas que cre. Ver que a la derecha hay varios iconos. El icono X le permite suprimir pginas, mientras que el segundo icono permite cambiar su nombre y, el tercer icono se utiliza para duplicar las pginas. Vamos a utilizar el primer icono que crea pginas. (La creacin de pginas tambin se puede realizar con el botn Nueva pgina de la ficha Pgina). Una vez que aparezca el asistente, seleccione la opcin "Pgina vaca" y haga clic en el botn Finalizar. Con el panel Bloques an abierto, elija Item1 en la seccin Administrador de pginas y haga clic en Agregar a pgina. El bloque se colocar automticamente en el extremo superior izquierdo de la pgina. La pgina en s es un Contenedor del nivel ms alto y el Panel insertado tiene activado el comportamiento Flotar, lo que provoca que encuentre su posicin de manera automtica. Guarde el proyecto con el icono de disquete de la barra de acceso rpido que se encuentra en la parte superior izquierda de la interfaz. La barra de acceso rpido tambin contiene la lista de exploradores que se utilizan para hacer pruebas y el icono de deshacer.

Finalizacin del proyecto


Una vez que haya creado todas las pginas, desear asegurarse de que el sitio se puede encontrar fcilmente en los resultados de bsqueda. Web Creator Pro 6 cuenta con varias herramientas que facilitan esta tarea.

Pgina 21 / 74

Web Creator Pro 6 - Gua de inicio rpido 1. Etiquetas de ttulo H1 a H6: se pueden utilizar durante la creacin de sitios Web. Estn disponibles en la barra de herramientas Elementos, en la seccin Diseo. Esto significa que se pueden personalizar al igual que cualquier otro elemento desde la barra de herramientas Propiedades, pero tambin desde la ficha Web de la seccin Referenciacin. En la ficha Web>Referenciacin se encuentran otras tres herramientas a su disposicin: 2. Metaetiquetas: invisibles en el sitio Web e integradas al cdigo de su pgina/sitio Web. Tambin son etiquetas de SEO (Optimizacin de motores de bsqueda). 3. Google Analytics: es una herramienta especfica de Google que tambin se basa en etiquetas. Web Creator puede generarlas para usted. Mapa del sitio: la informacin que se genera toma como base la estructura y programaciones de actualizaciones previstas que los motores de bsqueda recuperarn de su sitio Web. Se puede encontrar ms informacin sobre este tema en el captulo que abarca la ficha Web.

Pgina 22 / 74

Web Creator Pro 6 - Gua de inicio rpido

Carga del sitio Web


En la seccin Salida Web de la ficha Web, se encuentran tres herramientas tiles para enviar su sitio Web al servidor. 1. Optimizar: esta herramienta explorar todos los archivos de su sitio Web y crear una lista que contiene pginas con vnculos inactivos, elementos no utilizados, etc. Entonces podr decidir si desea conservar esos archivos o suprimirlos. Tenga cuidado, ya que es posible que algunas pginas necesiten "repararse" y no son necesariamente intiles. Es poco probable que desee eliminar todas las pginas que se muestran; es peor eliminar por equivocacin una pgina necesaria que conservar una que no desea. 2. Volver a generar: har el trabajo de limpieza de todo el sitio Web despus de haber realizado una optimizacin. Despus de hacer clic en este botn, sintese y reljese mientras se corrigen las imperfecciones de su sitio Web. 3. Cargar: esta funcin colocar su sitio Web en Internet. Tendr que rellenar los campos de direccin, nombre de usuario y contrasea. Se dispone de una opcin til que permite configurar un filtro para que enve archivos creados o modificados a partir de una fecha determinada. Esto puede acelerar en gran medida la carga de un sitio Web incluso con las conexiones ms rpidas, ya que enva nicamente la informacin pertinente al servidor. Esta herramienta es austera comparada con nuestro software de carga de sitios Web FTP Site Manager, que se parece al Explorador de Windows gracias a la posibilidad de mostrar la informacin que se muestra actualmente en su servidor. FTP Site Manager tambin le permite realizar operaciones de arrastrar y colocar y se integra directamente en la interfaz Web Creator.

Presentacin detallada de la interfaz


Observemos ms de cerca los componentes principales que ofrece Web Creator Pro 6. Para no extendernos demasiado, no hablaremos de los elementos ms sencillos como por ejemplo, Imagen, Texto o Botn, porque su uso es fcil desde el principio.

Pgina 23 / 74

Web Creator Pro 6 - Gua de inicio rpido

Si ha tenido la oportunidad de familiarizarse con las versiones ms recientes de Microsoft Office, se va a sentir como en su casa con Web Creator Pro 6 ya que comparten principios de organizacin similares.

Barra de acceso rpido


La barra de acceso rpido del extremo superior izquierdo agrupa las siguientes funciones: (de izquierda a derecha) Guardar, lista de pginas del proyecto, Deshacer y varios exploradores disponibles.

El icono de lista de pginas del proyecto le permitir desplazarse, con un solo clic, a otra pgina que se encuentre en la lista que se muestra. Los exploradores que estn instalados en su equipo aparecern a la derecha de la barra de acceso rpido. Web Creator Pro 6 agregar de manera automtica a esta lista, Internet Explorer, Mozilla Firefox, Google Chrome, Opera y Safari de modo que pueda probar rpidamente su pgina Web en el explorador seleccionado. Si utiliza un explorador diferente de los que se mencionan arriba, puede agregarlo manualmente desde la ficha Web>seccin Exploradores>Agregar que se encuentran en la cinta.

Pgina 24 / 74

Web Creator Pro 6 - Gua de inicio rpido

Cinta
La cinta, que siempre est disponible, se encuentra en la parte superior, debajo de la barra de acceso rpido. La cinta reemplaza el men original, lo que permite disponer de las opciones en toda la longitud de la cinta. Las opciones estn clasificadas por tema con imgenes que las representan, y texto para facilitar su exploracin.

Si no est familiarizado con el conjunto de aplicaciones Microsoft Office, esta estructura de los mens puede confundirlo al principio, pero una vez que los haya utilizado unas cuantas veces, podr encontrar de manera fcil lo que busca. En el extremo derecho se encuentran 4 botones. El primer botn de la izquierda contrae la cinta para ofrecer ms espacio. De manera predeterminada aparece una flecha hacia arriba y se convierte en flecha hacia abajo para expandir la cinta contrada. Los otros tres botones se utilizan para los proyectos. El segundo botn sirve para pasar al modo de ventana, y el tercero se utiliza para cerrar el proyecto despus de preguntarle si desea guardarlo. Ahora vayamos a las diferentes fichas que se encuentran en la cinta.

Ficha Archivo

Aqu encontrar opciones que lo ayudarn a administrar los proyectos; Abrir proyecto, Nuevo proyecto, Cerrar, Guardar, Guardar como, Imprimir y Salir. La opcin Abrir ofrece dos posibilidades. Pgina 25 / 74

Web Creator Pro 6 - Gua de inicio rpido Se tiene la opcin de cargar un proyecto que se ha abierto recientemente. Nota: esta lista se actualiza slo despus de haber cerrado Web Creator Pro 6.

Otra manera de abrir un proyecto es con la funcin Explorar. Se mostrar un rbol de carpetas, la carpeta de proyectos de "Web Creator" predeterminada: "C:/Usuarios/Nombre_de_usuario/Documentos/Web Creator".

Ficha Inicio
sta es la ficha con la que trabajar la mayor parte del tiempo.

Contiene funciones referentes a la edicin: Deshacer, Cortar, Copiar, Pegar, Eliminar y Seleccionar todo. Las dems funciones se encargan de fuentes, formato de pgina, alineacin, listas con vietas y nmeros, sangra y gestin de vnculos. La ltima opcin suprime por completo el formato del texto y lo convierte en texto sin formato no editado. Pgina 26 / 74

Web Creator Pro 6 - Gua de inicio rpido

Ficha Proyecto
Esta ficha se refiere al proyecto actual como un todo.

La primera seccin, Alineacin del explorador, le permite definir el rea que ocupar su sitio Web en el explorador. Su sitio Web se puede colocar a la izquierda, derecha o en el centro de cualquier explorador determinado. La seccin Pgina de inicio define la primera pgina que un usuario de Internet ver una vez que se conecte a su sitio Web.

Ficha Pgina
Esta ficha se refiere a la pgina actual que se est editando.

La primera seccin, Pginas, le permite cambiar las pginas, ya sea crendolas o cambiando a una que ya haya creado. El tercer icono, Administrador de pginas, abre una lista de las pginas que estn disponibles dentro del proyecto con la opcin de mostrar u ocultar las vistas previas de las pginas y realizar operaciones como el cambio de pgina, cambio de nombre, supresin, duplicado y creacin de una pgina. La seccin Actual contiene el icono Propiedades que le permite modificar opciones referentes a la pgina actual desde la barra de herramientas Propiedades. Esto es til cuando la pgina est llena de elementos que ocultan el fondo, lo que dificulta el acceso a sus propiedades. Actualizar, vuelve a disear la pgina y sus elementos partir de la memoria almacenada. Volver a cargar por una parte encuentra los elementos en su disco duro para volver a disear la pgina, lo que har que Web Creator le pregunte si desea guardar la informacin. Estas herramientas son tiles para suprimir informacin "perdida" que aparezca despus de editar varias veces la pgina abierta y en equipos ms lentos. Deteccin de dispositivos le permite elegir de modo sencillo la manera en que se visualiza la pgina, en caso de que se consulte con un dispositivo mvil. Ser necesario que cree con Pgina 27 / 74

Web Creator Pro 6 - Gua de inicio rpido anticipacin una versin de dicha pgina para dispositivos mviles y la seleccione como opcin favorita de visualizacin para exploradores de dispositivos mviles.

Establecer una Contrasea evitar que otros usuarios puedan acceder a la pgina durante la fase de prueba.

La seccin Colores le permite cambiar la paleta de colores actual eligiendo una de la lista. Los elementos que utilicen colores de la paleta cambiarn de color en funcin de su seleccin. El botn Configurar colores le permite modificar los colores de los elementos de la Plantilla que utilice en la pgina.

Ficha Insertar
Esta ficha rene todos los elementos disponibles de Web Creator en un solo sitio.

Pgina 28 / 74

Web Creator Pro 6 - Gua de inicio rpido

La seccin Comunes contiene los mismos elementos que siempre se encuentran disponibles en la barra de herramientas Elementos y se clasifica de la misma manera.

La seccin Biblioteca le permite elegir archivos Multimedia proporcionados por Web Creator Pro 6 directamente a partir de 4 categoras: Imgenes, Vdeos, Sonidos y animaciones Flash.

Pgina 29 / 74

Web Creator Pro 6 - Gua de inicio rpido

Ficha Seleccin
Como su nombre lo indica, estas funciones se refieren a los elementos que estn seleccionados en la pgina.

Las secciones Acciones y Orden Z son bastante sencillas y ya hemos abarcado los vnculos. La seccin Grupo cuenta con funciones que le permitirn agregar o suprimir elementos de un grupo o crear un grupo completamente nuevo con la posibilidad de agregarle elementos. La seccin Elemento primario le permite transferir elementos seleccionados a un Contenedor disponible en la pgina o crear un elemento del Contenedor (Panel o Cuadro) para ese propsito determinado. Se hablar con ms detalle de los contenedores en la seccin Elementos del Contenedor: cuadros y paneles.

Pgina 30 / 74

Web Creator Pro 6 - Gua de inicio rpido

Ficha Formato

Esta ficha ofrece mltiples opciones para alinear uno o varios elementos, y en trminos de comportamiento, est vinculada con los conceptos Elemento primario/Contenedor (Cuadro, Panel o Pgina). Para obtener informacin ms detallada sobre este tema, consulte la seccin Alineacin y posicionamiento.

Ficha Web

Esta ficha contiene todas las funciones referentes a la finalizacin de su sitio Web y su activacin en lnea. La primera seccin, Exploradores, muestra los exploradores que estn instalados en su equipo, y se pueden utilizar para ver la apariencia que tendr su sitio Web. Los iconos que se encuentran en el extremo derecho de esta seccin le permiten agregar, suprimir o modificar una referencia a un explorador que est instalado en su equipo, pero que Web Creator Pro 6 no haya reconocido. En la seccin Pgina, Cdigo personalizado le permite incluir cdigo JavaScript o HTML con un editor de texto, en la pgina Web actual. Peso de pgina calcula de qu manera afectar cada elemento de su pgina Web el tiempo de carga de la misma y le informa cunto tardar un usuario con una conexin de 256 Kb/seg descargar y ver su pgina. La seccin Referenciacin cuenta con cuatro herramientas que le ayudan a hacer que su sitio destaque en los resultados de los motores de bsqueda. Metaetiquetas proporciona descripciones y palabras clave a los motores de bsqueda. Usted mismo puede crear las etiquetas o simplemente proporcionar la informacin a Web Creator y permitir que ste las cree para usted.

Pgina 31 / 74

Web Creator Pro 6 - Gua de inicio rpido Con el icono Encabezados puede ayudar a los motores de bsqueda a identificar informacin importante sobre sus pginas Web. Puede insertar los encabezados en la pgina utilizando la cinta o la barra de herramientas Elementos. Para obtener ms informacin al respecto, consulte el captulo Seccin Diseo. Al hacer clic en Google Analytics puede definir palabras clave utilizadas por el motor de bsqueda de palabras clave de Google. La seccin Salida Web trata de los pasos finales para cargar su sitio Web. Optimizar busca en todo el sitio Web componentes que ya no se utilizan. Volver a generar a continuacin volver a compilar el sitio Web excepto todo el desorden acumulado. Cargar enviar posteriormente su sitio Web al servidor donde estar visible para el mundo entero. Tendr que proporcionar a Web Creator Pro 6 todas las credenciales necesarias para conectarse al servidor y transferir los archivos. Recuerde que las credenciales que introduzca estn vinculadas al proyecto que cargue; esto facilita el trabajo en servidores mltiples con proyectos correspondientes.

Ficha Herramientas
Esta ficha le permite acceder a recursos adicionales que vienen con Web Creator Pro 6.

La primera seccin cuenta con recursos que vienen directamente de LMSOFT. La segunda seccin contiene correctores de gramtica y ortografa creados por Druid Informatique. La seccin Cuadrcula proporciona mtodos para simplificar el posicionamiento de los elementos en la pgina. Y, por ltimo, la seccin Barras de herramientas le permite ocultar y mostrar el cuadro Elementos que est a la izquierda. Esta funcin es til cuando ya ha colocado la mayora de los elementos necesarios en la pgina y desea tener ms espacio para trabajar. El icono Restablecer a configuracin predeterminada har que la interfaz Web Creator Pro 6 vuelva a la configuracin de fbrica.

Pgina 32 / 74

Web Creator Pro 6 - Gua de inicio rpido

Ficha Ayuda

Las funciones de esta ficha son muy fciles de utilizar. Recuerde que para utilizarlas, necesita una conexin a Internet.

Barra de herramientas Elementos


Esta barra de herramientas le permite acceder a los elementos principales que Web Creator pone a su disposicin para la creacin de su sitio Web. Los llamamos elementos porque son los cimientos de cada pgina. Algunos se utilizan para mostrar informacin, otros la recopilan, y todos se pueden personalizar. La barra de herramientas Elementos se ha dividido en 5 secciones para facilitar su uso: Comunes, Diseo, Sociales, Multimedia y Datos. Cada seccin se puede contraer y expandir utilizando las flechas que se encuentran a la derecha de su nombre. Se cuenta con una barra de desplazamiento para poder ver los elementos de la parte inferior en caso de que no se visualicen o en caso de que la resolucin de su pantalla sea demasiado baja.

Insercin de un elemento
Para insertar un elemento en la pgina actual, basta con hacer clic en el icono/nombre correspondiente para que aparezca en medio de la pgina en la parte superior de la capa. La insercin de elementos en la pgina nunca afectar los elementos seleccionados de la misma. El agrupamiento y la insercin en elementos primarios nunca ocurrirn sin que lo haya elegido. Para obtener ms informacin sobre los elementos, consulte los siguientes captulos: Elementos del Contenedor: cuadros y paneles, Creacin y uso de Bloques y Grupos.

Pgina 33 / 74

Web Creator Pro 6 - Gua de inicio rpido

Propiedades de los elementos


Cuando agregue un elemento a la pgina, la Barra de herramientas Propiedades abrir la ficha Elementos para permitir la personalizacin inmediata del elemento. Cada elemento que agrega a la pgina se puede personalizar en lo que se refiere a color, forma, dimensiones. Algunos tienen ms opciones que se pueden configurar como los elementos PayPal, Blog y Formulario. Se puede acceder a estos parmetros desde la barra de herramientas Propiedades de la derecha de la interfaz. Para obtener ms informacin, consulte el captulo Barra de herramientas Propiedades.

Jerarqua de los elementos


Se ha mencionado cmo al crear cada elemento, ste se coloca en el centro de la pgina, y es independiente de los dems elementos (excepto de la pgina, por supuesto, pues forma parte de ella). Al agregar elementos a la pgina, stos se clasifican dentro de una jerarqua segn el orden en que se hayan creado. Desde ese punto de vista, los elementos se pueden modificar utilizando Contenedores, Bloques y Grupos. La relacin jerrquica entre los elementos se puede ver en la lista de elementos que abarcaremos en el captulo Lista de elementos. Ahora, nos gustara abarcar las diferentes secciones de la barra de herramientas Elementos, as como sus funciones subyacentes. Algunos de los elementos se expresan por s mismos, por lo que no los abarcaremos con mucho detalle. Sin embargo, nos aseguraremos de que entienda completamente cmo utilizarlos todos.

Seccin Comunes
Elemento Texto A partir del momento en que inserta el elemento de texto, puede empezar a escribir texto, modificar su apariencia y agregar vnculos parciales o de texto completo (botn Vnculo de la cinta de la ficha Inicio),etc. Los hipervnculos se pueden configurar muy fcilmente mediante el botn Vnculo de la cinta. Se pueden aplicar luminosidad y transparencia de fondo al texto a partir de efectos visuales sorprendentes (barra de herramientas Propiedades>ficha Elementos>Color de fondo).

Pgina 34 / 74

Web Creator Pro 6 - Gua de inicio rpido

Elemento Imagen Al crear una Imagen se crea un rectngulo con marcadores de posicin. Para modificar una imagen utilice la ficha Elementos de la barra de herramientas Propiedades y utilice uno de los 4 iconos que aparecen junto al campo de texto. El primer icono le permite acceder a las imgenes desde la Biblioteca de Web Creator 6. El segundo le permite buscar una imagen del equipo. El tercero le permite vincular una imagen que se encuentre en un sitio Web. (Necesitar conocer la ruta de acceso completa a la imagen para que funcione).

Ampliar imagen al hacer clic es una funcin muy til para ahorrar espacio. Si desea colocar una imagen muy grande en su pgina, puede reducir su tamao para que quepa en la pgina y ofrezca la posibilidad de verla de tamao completo haciendo clic en ella (incluso puede seleccionar qu tanto se debe ampliar).

Pgina 35 / 74

Web Creator Pro 6 - Gua de inicio rpido

Elemento Botn Una vez que inserta un botn, puede hacer doble clic en ste para cambiar el texto que muestra, o tambin puede hacerlo en el campo de texto que se proporciona en la barra de herramientas Propiedades. En la ficha Elementos puede cambiar la apariencia de los diferentes estados por los que pasa el botn: En relieve, Presionado y Puntero del mouse. Tambin se muestra una vista previa de su apariencia en la parte inferior. Elemento Men Al agregar un men, aparecer un icono cuadrado que simboliza un men. Para rellenar el men, vaya a la barra de herramientas Propiedades y, a continuacin, al rea Elementos y haga clic en Agregar. El centro se definir con respecto al campo de texto donde podr agregar un ttulo para dicha seccin. Puede agregar submens siguiendo el mismo mtodo, y agregar vnculos utilizando el campo que est debajo del campo de ttulo.

Pgina 36 / 74

Web Creator Pro 6 - Gua de inicio rpido

Seccin Diseo
Elementos Panel y Cuadro

Panel y Cuadro tienen la denominacin especial: Contenedor. Estn diseados para almacenar otros elementos e incluso otros contenedores. Un objeto del contenedor existe como Elemento primario: cuando se colocan otros elementos dentro del mismo; esos elementos se convierten en sus elementos secundarios. Esta relacin afecta mucho el comportamiento porque cuando el elemento primario se desplaza, tambin se desplazan los elementos secundarios. Lo mismo sucede al eliminarlo. Si elimina un panel que tenga botones, stos se perdern. De hecho, la pgina misma es un contenedor, que es el elemento primario de todos los elementos que coloque dentro de ella. En caso de que elimine la pgina, se eliminar todo lo que se encuentre dentro de ella. La diferencia principal entre los cuadros y los paneles es que stos ltimos slo tienen una funcin organizativa, mientras que los cuadros tambin se utilizan para presentacin. Se dar cuenta de qu tan personalizable es un cuadro en comparacin con su panel. Se debe analizar con ms detalle cada uno de estos elementos, y le sugerimos que consulte informacin ms detallada en el captulo Elementos del Contenedor: cuadros y paneles. Elemento IFrame

El elemento IFrame le permite incluir toda una pgina Web dentro de otra pgina, que sea suya o que la haya encontrado en Internet. Puede cambiar el tamao y color de este elemento, as como su nombre. Cuando lo agrega a la pgina, ver una imagen con marcadores de posicin que representa el sitio donde se mostrar la pgina as como sus dimensiones actuales. Puede elegir la pgina que se mostrar con los iconos de la ficha Elementos de la barra de herramientas Propiedades. Elemento Acorden

El elemento Acorden se puede comparar a un men apilado animado. Cuando hace clic en una seccin, se extiende y muestra la informacin que se haya incluido para esa seccin. Puede cambiar el color de los diferentes estados de los acordeones de la misma manera que lo cambia para el elemento Botn. En Web Creator 6 debe preparar pginas de antemano y asignarlas a una seccin de su eleccin. Elemento Control de ficha

Pgina 37 / 74

Web Creator Pro 6 - Gua de inicio rpido

El elemento Control de ficha le permite insertar varias pginas Web en un rea y acceder a ellas con los botones en forma de mens que aparecen al insertarlas. Pueden ser pginas que usted haya creado o pginas que haya tomado de un sitio Web en lnea. El tamao de las pginas que se muestran ser el tamao normal y se podr utilizar la barra de desplazamiento para desplazarse por las pginas.

Algunas diferencias entre los elementos Acorden y Ficha son que el elemento Acorden slo muestra pginas internas y el men es animado y est apilado. Elementos Etiqueta(H1H6)

El elemento Etiqueta(H1H6) le permite insertar etiquetas de referenciacin de H1 a H6. A menudo se utilizan para definir la organizacin de su sitio Web y representan la importancia de determinada informacin que proporciona en una pgina. De la ms importante a la menos importante (1 a 6), indican a los motores de bsqueda la informacin clave sobre su pgina. Son tiles para asegurarse de que los motores de bsqueda no pasen por alto informacin importante sobre su sitio Web cuando un usuario haga una consulta para buscar informacin importante. Por lo tanto, estos elementos pueden mejorar en gran medida la presencia de sus sitios Web en Internet. Estos elementos son diferentes de los elementos Texto y se deben utilizar con precaucin.

Pgina 38 / 74

Web Creator Pro 6 - Gua de inicio rpido Una vez que se han agregado a su pgina, puede elegir el nivel de importancia que el bloque de texto siguiente tendr en la barra de herramientas Propiedades. Cada encabezado tiene un estilo, color y fuente predefinidos, pero puede cambiarlos para que se adapten de manera ms adecuada a sus pginas. A nivel amplio del proyecto, puede cambiar todos los estilos de los encabezados con el icono Encabezados de la ficha Web del cordn. Si nicamente desea modificar el encabezado de la pgina actual, utilice la seccin Pgina actual para realizar las modificaciones.

Elemento Emergente

Emergentes le permiten mostrar otra pgina Web sobre su pgina. El elemento emergente debe ser desencadenado por un evento para que sea visible. Cuando se activa el elemento emergente, la pgina que estaba activada se oscurecer para que los usuarios se concentren en la pgina recin abierta.

Seccin Sociales
Elemento Redes sociales

El elemento Redes sociales le permite integrar vnculos rpidamente a una lista predefinida de sitios sociales populares: Facebook, Twitter, Google+, Delicious, Reddit, Pgina 39 / 74

Web Creator Pro 6 - Gua de inicio rpido Stumbleupon, Tumblr, LinkedIn y Digg. Puede realizar algunos cambios de estilo a este elemento para que se adapten mejor a su pgina. Elemento Blog Una vez que lo haya colocado en su pgina, haga clic en el botn Nuevo de la barra de herramientas Propiedades y aparecer el nombre predeterminado blog. Si desea recibir respuestas de los usuarios que lo visiten, deber proporcionar una direccin de correo electrnico para que pueda recibirlas. En el rea que se proporciona a continuacin, puede escribir la primera informacin utilizando el icono + de la derecha. Se mostrar la fecha y debajo de ella, "Nueva entrada". En los campos siguientes, puede agregar vnculos a artculos de otras pginas o pginas de su proyecto. Cada vez que agregue una entrada, se mostrar la hora de creacin para que la vean los lectores. Puede modificar el formato del texto utilizando los cuatro iconos que se encuentran arriba del rea de texto.

Seccin Multimedia
Elemento Galera El elemento Galera le permite mostrar una recopilacin de imgenes en su pgina Web. La vista inicial puede ser en forma de mosaico que muestra una recopilacin de pequeas miniaturas, o una presentacin que muestra las imgenes una por una. Recuerde que esto slo afecta la visualizacin inicial y el parmetro de mosaico cambiar a formato de presentacin una vez que un visitante seleccione una imagen.

Pgina 40 / 74

Web Creator Pro 6 - Gua de inicio rpido Elementos Sonido y Vdeo Los elementos Sonido y Vdeo funcionan casi de la misma forma. Los dos mostrarn un reproductor exactamente de la misma manera en que aparece en un explorador. Puede realizar una vista previa del vdeo o sonido que elija directamente desde la barra de herramientas Propiedades. Son compatibles la mayora de los formatos conocidos. Adems se le dar la opcin de elegir un reproductor para utilizarlos.

Elemento Google Map

Gracias al elemento Google Map puede agregar un mapa interactivo a su sitio Web que represente cualquier direccin determinada. Con slo agregar una direccin en la ficha Elemento de la barra de herramientas Propiedades, podr tener acceso al Mapa, Satlite y Street View del rea.

Pgina 41 / 74

Web Creator Pro 6 - Gua de inicio rpido

Seccin Datos
Elemento PayPal

El elemento PayPal le permite insertar un vnculo a una cuenta PayPal para configurar un pago seguro en lnea. En la ficha Elemento de la barra de herramientas Propiedades puede elegir el tipo de vnculo que desee: Agregar al carro, Ver carro y Comprar ahora. A continuacin, puede vincularlo a la cuenta PayPal, definir el precio y elegir si se autoriza la compra de varias unidades del producto. Elemento Web Para los usuarios que tengan experiencia con la codificacin y las secuencias de comandos, el Elemento Web permitir la insercin de JavaScript, PHP y otros lenguajes de programacin que se basan en Web. No se puede garantizar el resultado obtenido al utilizar este elemento, ya que depende del cdigo que se utilice, el explorador que lo lea y el servidor que lo almacene. Por ello, antes de utilizarlo, asegrese de estar bien informado y de realizar pruebas. Este elemento est estrechamente relacionado con la funcin Cdigo personalizado de la seccin Pgina de la ficha Web de la cinta. Elemento Google Translate

El elemento Google Translate ofrece a los usuarios la oportunidad de ver de manera instantnea su sitio Web en cualquier idioma de su eleccin. Slo necesita agregar el elemento a su pgina y los visitantes pueden elegir el idioma que deseen de la lista desplegable. Elementos Formulario y Campo de formulario Los elementos Formulario y Campo de formulario deben trabajar en conjunto. Le permiten utilizar un servicio que se solicita con frecuencia que LMSOFT ofrece de manera gratuita. Siempre y cuando proporcione una direccin de destinatario, el formulario que cree recopilar la informacin que enven los visitantes. Los datos recopilados se procesarn en nuestros servidores y se le enviarn para que los utilice segn sus necesidades. Debe empezar por crear un Formulario y seleccionar un Tipo de accin de la barra de herramientas Propiedades. Al realizar las dos primeras acciones se le enviar un correo electrnico con la informacin recopilada; sin embargo, los usuarios preferirn la primera seleccin, ya que tendrn menos trabajo y no interrumpir su exploracin. La tercera opcin es enviar los datos a una pgina Web, que a continuacin analizar la informacin utilizando secuencias de comandos o informacin almacenada en el servidor (usted ser responsable de esta accin). La adicin de informacin a una base de datos es una de las razones por la que esta opcin es muy til.

Pgina 42 / 74

Web Creator Pro 6 - Gua de inicio rpido Con la cuarta opcin, la informacin se enva a una funcin JavaScript que cre sea en un Elemento Web (como se describi anteriormente) o en el rea Cdigo personalizado que se encuentra en la ficha Web de la cinta. Una vez que se enve el formulario, se llamar la funcin JavaScript segn la informacin que proporcione. Una vez que se cree el formulario, necesitar crear entradas utilizando el elemento Campo de formulario. Despus de su insercin, tendr el aspecto de un campo de texto blanco, pero se podr cambiar a otro Tipo de entrada. Asegrese de probarlos todos para ver las ventajas que pueden ofrecer.

Elemento Contador El elemento Contador le permite contar cuntos usuarios han visitado su pgina. Como existen diferentes contadores, necesitar configurar el contador deseado. Usted puede escribir el cdigo si est suficientemente familiarizado con ste, pero existen muchos fragmentos de cdigo JavaScript disponibles en Internet listos para utilizarse.

Lista de elementos
La lista de elementos se encuentra en el extremo derecho de la interfaz, justo arriba de la barra normal de estilo.

Pgina 43 / 74

Web Creator Pro 6 - Gua de inicio rpido

Esta lista se puede separar en cualquier momento. Para ello, basta con hacer doble clic en la barra que se encuentra en la parte superior y podr desplazarla como desee. Para que vuelva a su posicin original, vuelva a hacer doble clic en la barra superior. La lista de elementos tiene dos fichas: Elementos y Bloques.

Pgina 44 / 74

Web Creator Pro 6 - Gua de inicio rpido

Ficha Elemento
Dentro de la ficha Elementos, encontrar una lista de cada elemento contenido en la pgina actual organizado en una estructura de rbol. La estructura muestra su sitio respectivo en trminos de orden, creacin, relaciones y dependencias con los dems elementos y si pertenecen a o contienen otros elementos (este tema se abarcar en el captulo Elementos del Contenedor: cuadros y paneles). Al utilizar los iconos que estn junto a cada nombre de elemento, puede ocultar o mostrar los elementos, as como contraer o expandir el contenido del Contenedor. Bsqueda de un elemento El rea Buscar le permitir encontrar fcilmente un elemento en base a su nombre o incluso parte de su nombre. Al hacer clic en la flecha, se buscarn los resultados y los elementos encontrados se resaltarn en rojo en la lista de elementos y tambin se seleccionarn en la pgina. Cambio de orden de los elementos Justo a la derecha de la funcin de bsqueda, se encuentra Orden Z seguido de dos flechas verticales. Esta funcin se encarga del orden de los elementos de la pgina. Los elementos estn clasificados de manera predeterminada por orden de creacin; se puede cambiar la clasificacin si se agrega a un elemento primario (ya que los elementos del elemento primario se pueden haber creado antes de dicho elemento). Las flechas verticales le permiten cambiar el Orden Z de un elemento de la pgina. Visualizacin de elementos y grupos Arriba de la lista se encuentra un cuadro desplegable, Vista jerrquica de los elementos de la pgina. Si hace clic en esta lista, puede elegir la opcin Ver grupos de elementos y su contenido.

Pgina 45 / 74

Web Creator Pro 6 - Gua de inicio rpido

Bsqueda de grupos Al igual que con los elementos, el campo de bsqueda le permite buscar de manera sencilla grupos en funcin de su nombre o parte de ste. Al hacer clic en la flecha, se buscarn los resultados y los elementos encontrados se resaltarn en rojo en la lista de elementos y tambin se seleccionarn en la pgina.

Ficha Bloques
Al hacer clic en la ficha Bloques, aparecer una nueva rea con dos nuevas fichas llamadas: Biblioteca y Personalizado.

Pgina 46 / 74

Web Creator Pro 6 - Gua de inicio rpido

Un men desplegable que se encuentra dentro de la ficha Biblioteca le permitir seleccionar bloques de diferentes plantillas. La ficha Personalizado le permite almacenar bloques que haya creado. Para obtener ms informacin sobre Bloques, consulte el captulo Creacin y uso de Bloques.

Pgina 47 / 74

Web Creator Pro 6 - Gua de inicio rpido

Barra de herramientas Propiedades

La barra de herramientas Propiedades agrupa varias fichas referentes al elemento que est seleccionado. Con el icono de alfiler que se encuentra en el extremo superior derecho puede ver por separado la barra de herramientas Propiedades. Incluso puede cerrarla con el icono de cruz de la parte superior. Una vez que est cerrada, en la parte inferior de la interfaz se colocar la barra de ttulo Propiedades que puede utilizar para mostrar la barra de propiedades.

Ficha Elemento
En funcin del elemento que est seleccionado, encontrar herramientas para modificar elementos que van desde cambiar su color hasta insertar pginas.

Ficha Opciones
En esta ficha puede cambiar el nombre del elemento seleccionado. Para una imagen puede utilizar el campo Alt= que usan los motores de bsqueda para reemplazar una imagen faltante o para usuarios que han deshabilitado las imgenes en su explorador. Incluso puede cambiar el comportamiento de los elementos al cargar la pgina; por ejemplo, efectos de apariencia. Pgina 48 / 74

Web Creator Pro 6 - Gua de inicio rpido

Ficha Acciones
Esta ficha le permitir agregar un elemento interactivo a sus elementos. Le dar la posibilidad de hacer el seguimiento de los clics con el mouse, as como cuando el mouse accede a un elemento o sale de ste. En esta pgina puede elegir un host de elementos para que se vincule a estas acciones.

Ficha Puntero del mouse


Esta ficha se refiere nicamente al paso del puntero del mouse sobre el elemento seleccionado. Sin embargo, las acciones de este evento se pueden aplicar a otros elementos de la pgina. Por ejemplo, si crea un botn simple y lo deja invisible cuando la pgina se carga, puede hacer que aparezca una vez que el puntero del mouse pase sobre un elemento determinado de la pgina. Incluso puede hacerlo con un elemento multimedia, hacer que se reproduzca slo cuando se haya pasado el puntero del mouse.

Ficha Vnculo
La ficha Vnculo es muy fcil de utilizar. Le permitir definir vnculos a pginas de Internet o pginas de su proyecto. Tambin existen otras opciones que puede habilitar, como redireccin automtica y dnde se abrir el vnculo.

Ficha Posicin
Esta ficha rene toda la informacin sobre un elemento referente a su posicin en la pgina y su tamao. En esta ficha es donde puede definir el Comportamiento para Flotar y Abajo (consulte el captulo Comportamientos Flotar y Abajo).

Ficha Propiedades
Esta ltima ficha contiene propiedades que comparten todos los elementos y se utiliza para modificar estas propiedades en una seleccin de por lo menos 2 elementos simultneamente. Se recomienda que se utilicen las otras fichas para cambiar estos valores cuando se seleccione un solo elemento.

Elementos del Contenedor: cuadros y paneles


Web Creator Pro 6 introduce un nuevo tipo de elemento que, al igual que una pgina, es un Contenedor: los elementos Cuadro y Panel. Contenedores: se disearon especficamente para almacenar elementos comunes y se utilizan exactamente como una caja fsica: todo elemento que se coloque en el interior se convierte en un subelemento. Por lo tanto, una vez que desplaza el contenedor, tambin desplaza lo que est dentro de ste.

Pgina 49 / 74

Web Creator Pro 6 - Gua de inicio rpido Gracias a estos contenedores, puede crear de manera muy sencilla plantillas para pginas combinando una serie de contenedores. Tambin puede reunir diseos complejos y guardar una apariencia ms homognea.

Diferencias entre paneles y cuadros


La diferencia principal entre los cuadros y los paneles es que stos ltimos slo tienen una funcin organizativa, mientras que los cuadros tambin se utilizan para presentacin. Se dar cuenta de qu tan personalizable es un cuadro en comparacin con su panel. Esencialmente, cuando necesita un cuadro invisible slo para fines organizativos, utilizara un Panel. Si el Contenedor tambin necesitara un aspecto atractivo en trminos de forma, color, borde, un Cuadro sera ms adecuado. Las opciones de personalizacin de un Cuadro se describirn ms adelante. A continuacin, ver que ambos objetos funcionan casi del mismo modo.

Creacin de un diseo con contenedores


Puede encontrar estos elementos en la seccin Diseo de la barra de herramientas Elementos en Panel y Cuadro. Al hacer clic en uno de los elementos lo colocar en el centro de la pgina. Los cuadros aparecern en azul y los paneles sern transparentes con un borde punteado (el borde no se visualizar en el explorador).

Adicin de elementos a un contenedor


Adicin de un elemento a un contenedor
Para que no se confunda, no existe manera de crear un elemento directamente en un contenedor. Empiece a crear un contenedor: vaya a la seccin Diseo de la barra Elementos. Elija Panel o Cuadro, que aparecer en el centro de la pgina. Ahora cree un elemento. Seleccionemos una imagen haciendo clic en el icono que se encuentra en la seccin de elementos Comunes de la barra de herramientas Elementos. Tambin aparecer en medio de la pgina. Si selecciona el Panel y lo desplaza, la Imagen no sigue el panel. Esto se debe a que de manera predeterminada, los elementos se crean de manera independiente con respecto a los dems elementos. Esto evita la adicin accidental de elementos en contenedores que se encuentran en el centro de la pgina.

Pgina 50 / 74

Web Creator Pro 6 - Gua de inicio rpido Haga lo siguiente: elija el elemento y a continuacin, colquelo en la parte superior del panel. En cuanto el elemento se encuentre dentro del rea del panel, el borde de ste ltimo, se vuelve prpura. Esto indica que el panel se ha convertido en el Elemento primario del elemento que se coloc en el interior; ahora puede soltar el elemento. Si intenta desplazar el panel de nuevo, el elemento se desplazar con ste. Otra manera de colocar un elemento dentro de un contenedor es haciendo clic en el elemento para abrir el men de contexto. Una vez que el men se abra, elija Agregar a Elemento primario y seleccione el nombre del contenedor.

El elemento se colocar de inmediato en el extremo superior izquierdo del contenedor.

Adicin de varios elementos a un contenedor


Existen varias maneras de agregar elementos mltiples a un contenedor. Una vez que se ha creado el contenedor, la manera ms sencilla de agregarle varios elementos sera seleccionar stos ltimos y abrir el men de contexto haciendo clic con el botn secundario del mouse. Una vez que el men se abra, seleccione Agregar a Elemento primario y, Pgina 51 / 74

Web Creator Pro 6 - Gua de inicio rpido a continuacin, elija el contenedor que desee. Entonces los elementos se colocarn en la parte superior izquierda del contenedor de elemento primario. Otra forma de hacerlo sera arrastrar y colocar los elementos seleccionados en el contenedor donde desea incluirlos. Una vez que el borde del Elemento primario se vuelve prpura, puede estar seguro de que los elementos se han incluido en el contenedor. Una forma ms larga de hacerlo es arrastrando y colocando cada elemento uno por uno. Seleccione el contenedor haciendo clic en ste o seleccionndolo de la lista de elementos. Si lo desplaza, se dar cuenta de que los elementos que estn dentro se desplazan al mismo tiempo. Si esto no sucede, entonces significa que uno o varios elementos o no se seleccionaron al arrastrarlos y colocarlos o simplemente no se encontraban en el contenedor. Haga clic en Deshacer e intntelo de nuevo. Si se utilizan los contenedores junto con otros componentes disponibles mediante Web Creator Pro 6, es muy fcil juntar varias pginas o proyectos que tengan como base la misma plantilla. Para ello, utilice la funcin ms reciente de la interfaz: el bloque. Bloques: tambin son componentes organizativos, pero stos se utilizan para copiar contenedores y sus elementos subyacentes para su uso futuro. De esta manera puede copiar varios contenedores y desplazarlos a otra pgina en forma de bloques. Hablaremos de ellos con ms detalle en el captulo Creacin y uso de Bloques.

Propiedades de los cuadros y paneles


Como ya lo mencionamos, la diferencia principal entre los cuadros y los paneles es la apariencia. Sus diferentes propiedades se pueden personalizar desde la ficha Elementos que se encuentra en la barra de herramientas Propiedades. Paneles: slo cuentan con opciones bsicas de personalizacin; nicamente se pueden modificar la luminosidad y la transparencia de colores haciendo clic en el icono que est a la derecha del campo Color.

Pgina 52 / 74

Web Creator Pro 6 - Gua de inicio rpido

Cuadros: por otra parte, se pueden peresonalizar muchos de sus parmetros desde el momento que se crean; tienen esquinas redondeadas, un borde en color, una sombra paralela y un color de fondo. Mientras que los paneles inicialmente son transparentes y slo se les puede asignar un color de fondo. Los cuadros tambin pueden tener un encabezado y pie de pgina, cada uno con su propio color o incluso transparencia. Esta funcionalidad le permite colocar texto en ellos o mostrar los elementos subyacentes.

Pgina 53 / 74

Web Creator Pro 6 - Gua de inicio rpido

A continuacin se presentan dos ejemplos de esquinas redondeadas, encabezados, pies de pgina, anchos de borde, degradados y transparencias.

Pgina 54 / 74

Web Creator Pro 6 - Gua de inicio rpido

Herramientas de alineacin y posicionamiento


La alineacin, el posicionamiento y el cambio de tamao de elementos en Web Creator Pro 6 se ha convertido en una tarea muy eficaz. 1) Se cuenta con una herramienta de cuadrcula que se puede personalizar en la ficha Herramientas de la cinta. 2) Aparecen guas para las funciones de posicionamiento y cambio de tamao. 3) Se cuenta con una gran seleccin de opciones mediante la ficha de formato.

Cuadrcula
Se puede acceder a todos los parmetros mediante la ficha Herramientas.

Desde esta ficha puede personalizar por completo la manera en que funciona la cuadrcula de forma predeterminada en Web Creator: puede hacerla Visible o no visible, Activa o inactiva, cambiar el color de la cuadrcula con la herramienta de seleccin de colores, as como el espacio de la cuadrcula (tanto el Alto como el Ancho).

Pgina 55 / 74

Web Creator Pro 6 - Gua de inicio rpido

Guas de posicionamiento
En cuanto empiece a desplazar un elemento, Web Creator Pro 6 mostrar lneas que sirven de gua y que le permiten alinear el elemento seleccionado con respecto a otros elementos de la pgina. Esta funcin puede ser extremadamente til en muchas ocasiones en que necesite hacer alineaciones perfectas en una pgina que contenga varios elementos. Estas lneas de gua tambin se activan cuando cambia el tamao. A continuacin se muestra un elemento que se est desplazando:

... y cuando se cambia su tamao:

Funciones de la ficha Formato


Web Creator Pro 6 le permite alinear de manera sencilla varios elementos con respecto a un elemento primario u otro tipo de elemento: izquierda, derecha, superior, inferior, en medio y centro.

Pgina 56 / 74

Web Creator Pro 6 - Gua de inicio rpido

La primera seccin de la ficha Formato se utiliza para colocar uno o varios elementos no con respecto a otro, sino con respecto al contenedor donde se encuentra el elemento (Pgina, Panel, Cuadro). El ejemplo siguiente muestra la alineacin de un elemento en un cuadro, primero Horizontalmente, luego Verticalmente, seguida de la combinacin de ambas, es decir, en el Centro.

El resto de la ficha Formato se refiere al posicionamiento relativo de los elementos entre s. A continuacin se presenta un resumen visual de alineaciones y cambios de tamao con tres cuadros en la parte superior.

Pgina 57 / 74

Web Creator Pro 6 - Gua de inicio rpido

Al haber seleccionado varios elementos, uno de los ellos tendr controladores verdes mientras que los dems sern azules. El elemento seleccionado con los controladores verdes es la seleccin principal y sirve de punto de referencia para varias funciones de formato. Si no obtiene el resultado deseado despus de haber alineado un grupo de elementos, proceda de la siguiente manera: cancele la alineacin, elija la tcnica de alineacin de los elementos y, a continuacin, haga clic en el elemento que ser el punto de referencia. A continuacin se seleccionar como punto de referencia y entonces podr realizar la alineacin. Despus de un periodo de tiempo corto encontrar instintivamente el elemento al que se hace referencia.

Comportamientos Flotar y Abajo


La implementacin de los comportamientos Flotar y Abajo permitirn el reposicionamiento automtico de los elementos del contenedor, sea una Pgina, un Panel o un Cuadro. Esta funcin es ms sencilla de lo que parece, una vez que haya aprendido a utilizarla.

Pgina 58 / 74

Web Creator Pro 6 - Gua de inicio rpido Primordialmente, esta funcin puede eliminar casi por completo la necesidad de editar el diseo manualmente, facilitar el cambio de tamao de las pginas y crear sitios Web con los ojos cerrados. No es obligatorio utilizar estas funciones, pero se recomienda que se aprovechen. Se puede acceder a estos parmetros desde la ficha Posicin de la barra de herramientas Propiedades, en la seccin Comportamiento.

Entendimiento de la funcin de flotacin


Un elemento con la funcin Flotar, como su nombre lo indica, flotar como si estuviera en el agua. Como si fuera espuma en un acuario, el elemento "burbujear" en la parte superior del contenedor (Pgina, Panel, Cuadro). El elemento adoptar la posicin de flotacin que se seleccione, hacia la Izquierda o hacia la Derecha. Si un elemento tiene configurado el comportamiento de flotacin, ste se colocar junto al otro elemento que ya est colocado si tiene suficiente espacio para hacerlo. Si no hay sitio para un elemento flotante, se colocar directamente debajo si es posible. Si se selecciona el comportamiento de flotacin Ninguno, el elemento se puede colocar manualmente y permanecer en ese sitio. Si se activa este parmetro, se permitir el reposicionamiento automtico de los elementos de una pgina en caso de que modifique su diseo, la orientacin o inserte un nuevo elemento. Importante: el comportamiento de flotacin se encarga de gestionar el posicionamiento de los elementos en su contenedor inmediato. Por lo tanto, los elementos flotan en relacin con los elementos de su propio contenedor. Puede aplicar el comportamiento de flotacin no slo a los elementos de un cuadro, sino tambin al cuadro que contiene dichos elementos. Los elementos que se encuentran dentro del cuadro flotarn con respecto a los dems dentro del cuadro, y el cuadro flotar con respecto a los dems contenedores de la pgina.

Pgina 59 / 74

Web Creator Pro 6 - Gua de inicio rpido

Restricciones de posicionamiento
Los elementos que tienen definido el atributo de flotacin se colocarn de acuerdo con el espacio disponible en la parte superior del contenedor. Si el elemento es demasiado grande, no cambiar su tamao y se colocar en algn sitio. Esto significa que si un elemento se coloca junto a otro se debe colocar en su sitio. De lo contrario, buscar sitio en la lnea siguiente. Se ajustar de acuerdo con el tipo de flotacin, derecha o izquierda, que se haya elegido. El objeto flotante entonces se colocar junto al primer elemento que encuentre. En la imagen siguiente, se presentan tres botones con el parmetro de flotacin a la izquierda con los anchos proporcionales al tamao del contenedor. Por lo tanto, estn perfectamente alineados.

Pgina 60 / 74

Web Creator Pro 6 - Gua de inicio rpido

En la segunda imagen, se ha reducido la anchura del panel. Como el panel es demasiado pequeo para incluir los tres elementos en la primera fila, el botn pasa automticamente a la lnea siguiente. Y en la tercera imagen, se ha cambiado el tamao del tercer botn; es ms ancho y, por consiguiente, una vez ms se ha desplazado hacia la lnea siguiente. En la ilustracin siguiente, las imgenes se han colocado en orden descendente.

Pgina 61 / 74

Web Creator Pro 6 - Gua de inicio rpido

Una vez ms se ha reducido la anchura de la segunda imagen, lo que provoca que el cuarto botn se desplace hacia la lnea siguiente. En este ejemplo el botn tiene configurado el parmetro hacia la izquierda y pasa al final, pero se alinea con el borde del segundo botn. La ltima imagen muestra lo que sucede si se vuelve a reducir el tamao del panel. El cuarto botn se coloca directamente debajo del segundo botn alineado al borde del primer botn. En la imagen siguiente, se ha vuelto a reducir el tamao del panel.

El primer botn afectado por este cambio es el tercer botn. Como ya no cabe en su sitio anterior, se desplaza debajo del segundo botn y se alinea con el primer botn. Y como el botn Pgina 62 / 74

Web Creator Pro 6 - Gua de inicio rpido ya no se puede colocar junto al tercer botn, se desplaza debajo de ste y se alinea al borde del panel. Observe el espacio que se deja despus del primer botn. Lo primero que se piensa es que el cuarto botn es demasiado grande para colocarse debajo del primer botn. Pero no es as. Lo que sucede es que, una vez que un elemento haya flotado hasta donde pueda llegar, entonces se alinear con el elemento anterior. El elemento que est antes del cuarto botn, es el tercer botn. Por lo tanto, el cuarto botn siempre desear que el tercer botn est a su izquierda. Si esto no es posible, se desplazar a la lnea siguiente. Por esta razn, como lo muestra la imagen siguiente, si se reduce el tamao del cuarto botn, no se permitir que se coloque debajo del primer botn.

Sin embargo, si cambia el tamao del cuarto botn para que quepa en el espacio que est a la derecha del tercer botn, entonces se desplazar hacia arriba, a la derecha de este botn. En los tres ejemplos siguientes, cualquiera que sea la altura o anchura de los elementos 1, 2 y 3, el orden ser el mismo: cada elemento intenta permanecer a la derecha de su elemento anterior o debajo de ste.

Pgina 63 / 74

Web Creator Pro 6 - Gua de inicio rpido

Mximo provecho del comportamiento de flotacin


Despus de las explicaciones anteriores, es evidente que para aprovechar al mximo el comportamiento de flotacin, deber utilizar elementos que tengan exactamente las mismas dimensiones. De lo contrario, dichos elementos se agregarn a la dimensin del contenedor. Al hacerlo, los elementos conservarn una apariencia uniforme en el contenedor sin dejar huecos. Se podra optar por rellenar los huecos utilizando elementos que no tengan activado el comportamiento de flotacin. Sin embargo, al hacerlo, esos elementos no podran posicionarse de manera automtica y por lo tanto, crearan nuevos huecos.

Pgina 64 / 74

Web Creator Pro 6 - Gua de inicio rpido

Adicin de un elemento flotante


Una vez que haya creado o colocado un elemento sobre un grupo de elementos con el comportamiento Flotar, el elemento que se acaba de insertar se colocar donde se encontraba en el primer plano (asegrese de que ha agregado correctamente el elemento al contenedor arrastrndolo y colocndolo en su sitio o con el men de contexto y seleccionando Agregar a elemento primario>nombre del elemento primario). Si activa el comportamiento de flotacin para este nuevo elemento, de manera automtica se colocar en la nica posicin disponible al final de este grupo de elementos flotantes, ya sea a la izquierda o la derecha de elemento anterior o, si no hay espacio, debajo de ste. A continuacin puede elegir la posicin de este elemento siguiendo las instrucciones.

Desplazamiento de elementos de flotacin


Hasta ahora, ha aprendido que el orden de los elementos flotantes es muy importante al agregar un nuevo elemento flotante. Haga clic en un elemento y arrstrelo de manera habitual. Cuando el cursor del mouse se coloca sobre los bordes de los dems elementos de la pgina, aparece una lnea azul vertical que muestra dnde se colocar el elemento si lo suelta en ese sitio. La barra que se encuentra a la derecha del elemento se colocar despus de ste, antes de las barras de la izquierda. Recuerde que la adicin de un elemento a un contenedor que contenga otros elementos flotantes tendr un gran impacto en su diseo.

Pgina 65 / 74

Web Creator Pro 6 - Gua de inicio rpido

Usos del comportamiento de flotacin


El comportamiento de flotacin se puede utilizar de dos maneras principales: 1) Para presentar elementos del mismo tipo. El mejor ejemplo para ello sera una lista de productos. Puede utilizar un solo cuadro y rellenarlo con paneles que contengan una imagen y texto descriptivo. De esta manera puede hacer una lista que incluya desde perfiles de gente famosa hasta recetas de cocina y, cuando llegue el momento de modificarla, slo necesita suprimir un panel o agregar uno y se conservar el diseo. A continuacin se presenta un ejemplo de un conjunto de compositores que muestra cmo el diseo permanece uniforme incluso despus de haber cambiado la dimensin de los contenedores de elementos primarios.

Pgina 66 / 74

Web Creator Pro 6 - Gua de inicio rpido

Esta pgina contiene dos logotipos con una imagen y un men. El cuerpo de la pgina contiene cuatro paneles con la misma anchura, pero diferente altura. En realidad se trata de Bloques que se han medido cuidadosamente.

Pgina 67 / 74

Web Creator Pro 6 - Gua de inicio rpido Los bloques son un concepto importante en Web Creator Pro 6 y se explican en el captulo Creacin y uso de Bloques.

Comportamiento Abajo
El comportamiento Abajo funciona en conjunto con el comportamiento Flotar. Este comportamiento indica a un objeto flotante que siempre se coloque en la lnea siguiente en lugar de alinearse junto a otro elemento flotante. Por ello, aunque haya espacio para colocar el elemento flotante, sin importar si flota hacia la izquierda o derecha, se colocar debajo de los

Pgina 68 / 74

Web Creator Pro 6 - Gua de inicio rpido dems elementos. Esto le permitir acomodar elementos de manera automtica como si utilizara un "retorno de carro" as como elegir de qu lado se colocarn los elementos. Si por alguna razn, como restricciones de espacio, los elementos slo se pueden apilar, este parmetro asegurar que los elementos siempre se alineen de manera previsible. Esto es til en particular para dispositivos mviles que pueden cambiar su orientacin. La orientacin vertical ser ms angosta y provoca que los elementos se apilen, pero cuando se utilizan en modo horizontal, los elementos se alinearn entre s.

Uso de grupos
Los grupos han existido desde hace tiempo en Web Creator y es posible que se supriman debido a la introduccin de los contenedores. Los grupos son una coleccin simblica de elementos que se pueden utilizar para modificar elementos mltiples. A menudo se utilizaron para pertenecer a un grupo de elementos que no deseaba modificar por equivocacin y necesitaba crear una jerarqua de orden Z entre los elementos. Con la introduccin de los Contenedores, los elementos ya estn agrupados segn su posicionamiento en la pgina. Puede definir un grupo seleccionando varios elementos y abriendo el men de contexto con el botn secundario del mouse. A continuacin, seleccione Agregar a Grupo y cree un nuevo grupo o agrguelo a uno que ya exista. Para acceder a las propiedades de un grupo, haga clic en Vista jerrquica de los elementos de la pgina que se encuentra en la parte superior de la lista de elementos y seleccione Ver grupos de elementos y su contenido.

Pgina 69 / 74

Web Creator Pro 6 - Gua de inicio rpido

Con los iconos +/- puede contraer o expandir la lista de elementos o incluso bloquear grupos y elementos con el smbolo de bloqueo. En la ficha Elementos se puede cambiar el nombre de un grupo, as como modificar su visibilidad en el explorador o, incluso agregar y suprimir elementos. Si selecciona un elemento del grupo, puede acceder directamente a sus propiedades, acciones, etc.

Pgina 70 / 74

Web Creator Pro 6 - Gua de inicio rpido

Uso de Bloques
Introduccin a Bloques
Bloques son la evolucin de los Grupos en Web Creator. Un bloque es una herramienta organizativa que le permite almacenar un conjunto de elementos con la finalidad de utilizarlos posteriormente en otra pgina o proyecto.

Creacin de un bloque
Incluso si no es indispensable, le recomendamos encarecidamente que cree un bloque en funcin de un contenedor para que el reposicionamiento del bloque sea ms sencillo posteriormente. De la misma forma, si los elementos que estn dentro de un bloque que est almacenado en un contenedor, como un panel o un cuadro, entonces puede aplicar un comportamiento de flotacin a un contenedor, lo que le permitir el reposicionamiento automtico del bloque en su pgina. A continuacin se presenta un ejemplo. Cree un panel en su pgina y configure el parmetro Flotar con la barra de herramientas Propiedades. Despus, inserte elementos como por ejemplo, una imagen, texto y una red social.

Una vez que lo haya hecho, como se muestra en la imagen anterior, puede guardarlos como un bloque para su uso futuro. Para ello, seleccione el cuadro o el panel que contiene todos los elementos haciendo clic en un rea fuera de los elementos, uno de sus bordes o su nombre en la lista de elementos. En esta lista, abra la ficha Bloques. A continuacin, seleccione la ficha Personalizado y haga clic en el smbolo +. Inmediatamente ver que aparece en la ventana con el ttulo ItemX, donde X representa el orden en que se cre.

Pgina 71 / 74

Web Creator Pro 6 - Gua de inicio rpido

Y eso es todo lo que se tiene que hacer. Puede cambiar su nombre si hace doble clic en ste. Si fuera a crear un encabezado almacenado en un bloque, entonces lo arrastrara a cada pgina sin tener que realizar la accin varias veces. Si hace un bloque diferente que desea utilizar para otro sitio, la creacin de bloques puede hacer que ahorre mucho tiempo as como tambin lo ayudar a evitar errores de diseo.

Pgina 72 / 74

Web Creator Pro 6 - Gua de inicio rpido

Cmo volver a utilizar un bloque


Puede cambiar de pgina o incluso de proyecto y volver al rea de bloque personalizado que se encuentra en la lista de elementos. Ah encontrar todos los bloques que haya creado anteriormente. Si utiliza el botn Agregar a pgina mientras est seleccionado un bloque, todo el bloque se agregar a la pgina conservando todos los elementos y sus propiedades.

Precauciones con el uso de bloques


Si no est seleccionado ningn elemento del contenedor, un nuevo bloque siempre se insertar independiente de los dems elementos. Esta funcin es til para los bloques ms grandes que cree para definir el diseo de la pgina. Por otra parte, es posible que desee agregar bloques ms pequeos a una pgina que ya tenga un diseo definido. Para ello, puede crear un bloque que defina el diseo de la pgina y a continuacin, rellenar ese diseo de pgina con bloques ms pequeos que dividirn el contenido. Para ahorrar tiempo, debe seleccionar de antemano el contenedor donde desea que se inserte el bloque, de lo contrario el bloque se colocar donde encuentre espacio si est activado el comportamiento de flotacin, o en el centro de la pgina si este comportamiento est desactivado. En resumen: si se selecciona un solo elemento o no est seleccionado ninguno, el bloque se insertar en la pgina independientemente de lo dems. Si un contenedor, es decir, un Panel o un Cuadro est seleccionado, el bloque aparecer dentro del contenedor como elemento secundario.

Tamao ideal de un bloque


Las plantillas que se proporcionan en Web Creator Pro 6 se basan en mltiplos de 240 pxeles de ancho. Por lo que los bloques tendrn una anchura de 240, 480, 720 960 pxeles. La altura sigue el mismo principio y ofrece 16 combinaciones para la dimensin de un bloque. En promedio, las pginas Web tienen un ancho de 960 pxeles. Por consiguiente, esta anchura se ha definido en Web Creator Pro 6 para que sea el tamao predeterminado de la pgina. Esto le permite agregar cuatro bloques mximo en una sola fila; ms que suficiente para agregar varios elementos. Evidentemente, tambin puede crear bloques con una anchura ms pequea para adaptarse a sus necesidades. Como vimos en los captulos referentes a los contenedores y la flotacin, debe tener en cuenta que la anchura de los contenedores se debe agregar a la anchura de su pgina. Asimismo, la altura de los bloques debe ser la misma o reducida en mltiplos proporcionales.

Pgina 73 / 74

Web Creator Pro 6 - Gua de inicio rpido

Luminosidad y transparencia
Adems del color, que se puede personalizar para la mayora de los elementos, Web Creator Pro 6 le permite administrar la Transparencia en la Luminosidad, no slo en los paneles y los cuadros, sino tambin en el texto, los botones, etc. Esto le permite superponer efectos en otros elementos de la pgina como por ejemplo, imgenes, sin tener que modificarlos directamente. Esto permite realizar muchas modificaciones del sitio Web cambiando slo unos cuantos elementos. Utilice la ficha Elemento que se encuentra en la barra de herramientas Propiedades para un elemento seleccionado. Desde este punto, seleccione la paleta de colores. En la parte inferior de la ventana que aparece, puede modificar tanto la Luminosidad como la Transparencia del color seleccionado.

Intente con varias combinaciones para ver los resultados que dar en un elemento, en especial en casos en que los elementos se sobrepongan.

Pgina 74 / 74

You might also like