Está en la página 1de 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.

Etiquetas de ttulo H1 a H6................................................................................................ 22

2.

Metaetiquetas ................................................................................................................... 22

3.

Google Analytics ................................................................................................................ 22

Mapa del sitio ............................................................................................................................ 22


Carga del sitio Web.................................................................................................................... 23
1.

Optimizar ........................................................................................................................... 23

2.

Volver a generar ................................................................................................................ 23

3.

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

También podría gustarte