Introducción a Web Creator Pro 6

Guía de inicio rápido del
usuario
Web Creator Pro 6 - Guía de inicio rápido
Tabla de materias
Introducción a Web Creator Pro 6 .................................................................................................. 5
Guía de inicio rápido........................................................................................................................ 6
Apertura de una plantilla............................................................................................................. 6
Modificación de una imagen ....................................................................................................... 9
Adición de un elemento a la página .......................................................................................... 10
Introducción a los elementos del Contenedor .......................................................................... 12
Introducción al comportamiento de flotación .......................................................................... 12
Modificación del menú .............................................................................................................. 14
Creación de un vínculo a otra página ........................................................................................ 14
Introducción a Bloques .............................................................................................................. 18
Uso de Bloques .......................................................................................................................... 21
Finalización del proyecto ........................................................................................................... 21
1.
Etiquetas de título 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
Presentación detallada de la interfaz ............................................................................................ 23
Barra de acceso rápido .............................................................................................................. 24
Cinta........................................................................................................................................... 25
Ficha Archivo ......................................................................................................................... 25
Ficha Inicio ............................................................................................................................. 26
Ficha Proyecto ....................................................................................................................... 27
Ficha Página ........................................................................................................................... 27
Actualizar ................................................................................................................................... 27
Detección de dispositivos .......................................................................................................... 27
Ficha Insertar ......................................................................................................................... 28
Página 2 / 74
Web Creator Pro 6 - Guía de inicio rápido
Ficha Selección ...................................................................................................................... 30
Ficha Formato ........................................................................................................................ 31
Ficha Web .............................................................................................................................. 31
Peso de página........................................................................................................................... 31
Metaetiquetas ........................................................................................................................... 31
Optimizar ................................................................................................................................... 32
Ficha Herramientas ............................................................................................................... 32
Ficha Ayuda ........................................................................................................................... 33
Barra de herramientas Elementos............................................................................................. 33
Inserción de un elemento...................................................................................................... 33
Propiedades de los elementos .............................................................................................. 34
Jerarquía de los elementos.................................................................................................... 34
Sección Comunes................................................................................................................... 34
Sección Diseño....................................................................................................................... 37
Sección Sociales ..................................................................................................................... 39
Sección Multimedia ............................................................................................................... 40
Sección 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 Vínculo.......................................................................................................................... 49
Ficha Posición ........................................................................................................................ 49
Ficha Propiedades ................................................................................................................. 49
Elementos del Contenedor: cuadros y paneles ............................................................................. 49
Contenedores ............................................................................................................................ 49
Diferencias entre paneles y cuadros ......................................................................................... 50
Creación de un diseño con contenedores ................................................................................. 50
Página 3 / 74
Web Creator Pro 6 - Guía de inicio rápido
Adición de elementos a un contenedor .................................................................................... 50
Adición de un elemento a un contenedor............................................................................. 50
Adición de varios elementos a un contenedor...................................................................... 51
Bloques ...................................................................................................................................... 52
Propiedades de los cuadros y paneles ...................................................................................... 52
Paneles ...................................................................................................................................... 52
Cuadros...................................................................................................................................... 53
Herramientas de alineación y posicionamiento ............................................................................ 55
Cuadrícula .................................................................................................................................. 55
Guías de posicionamiento ......................................................................................................... 56
Funciones de la ficha Formato .................................................................................................. 56
Comportamientos Flotar y Abajo .................................................................................................. 58
Entendimiento de la función de flotación ................................................................................. 59
Restricciones de posicionamiento ............................................................................................. 60
Máximo provecho del comportamiento de flotación ............................................................... 64
Adición de un elemento flotante .............................................................................................. 65
Desplazamiento de elementos de flotación .............................................................................. 65
Usos del comportamiento de flotación ..................................................................................... 66
Comportamiento Abajo ............................................................................................................. 68
Uso de grupos ................................................................................................................................ 69
Uso de Bloques .............................................................................................................................. 71
Introducción a Bloques .............................................................................................................. 71
Creación de un bloque .............................................................................................................. 71
Cómo volver a utilizar un bloque .............................................................................................. 73
Precauciones con el uso de bloques ......................................................................................... 73
En resumen:............................................................................................................................... 73
Tamaño ideal de un bloque ....................................................................................................... 73
Luminosidad y transparencia ........................................................................................................ 74
Página 4 / 74
Web Creator Pro 6 - Guía de inicio rápido
Introducción a Web Creator Pro 6
Web Creator Pro 6 es una aplicación potente que permite a los usuarios que conocen poco la
informática o no la conocen, crear sitios Web en poco tiempo, con un aspecto profesional. Es
tan rápido que puede contarlo en minutos.
Web Creator está diseñado para cumplir con las necesidades de los usuarios de una herramienta
de creación 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 programación tediosa y
los lenguajes de marcado complicados.
Poco a poco nuestra solución ha evolucionado, con la contribución 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 versión más avanzada de todos los tiempos. Tiene en
cuenta las innovaciones tecnológicas recientes, como el número cada vez mayor de usuarios de
smartphones y exploradores móviles, el mundo creciente de las redes sociales y los pagos
seguros mediante PayPal, y hace que puedan implementarse de manera sencilla. Incluso facilita
todavía más la visualización y la organización con nuestros nuevos Contenedores, el cambio de
posición sin ningún esfuerzo con las opciones de Flotar, y la decoración con fichas y acordeones.
La creación 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 colocación en línea se realiza con sólo hacer clic en un botón.
Le invitamos a leer este manual para el principiante de Web Creator Pro 6 que le ayudará a
familiarizarse con la modificación de diversos elementos, crear vínculos y administrar páginas.
Aquí creará las dos primeras páginas y utilizará herramientas potentes de organización como el
bloque, los contenedores y la opción Flotar. Al final, le mostraremos cómo sacar el mayor
provecho de su sitio Web y cómo ponerlo en línea.
Verá este símbolo a lo largo de esta guía.
Indica una nueva función o una mejora única en Web Creator Pro 6.
Página 5 / 74
Web Creator Pro 6 - Guía de inicio rápido
Guía de inicio rápido
Para empezar, echemos un vistazo a nuestro lienzo virtual.
La sección Presentación detallada de la interfaz presentará una explicación completa de los
elementos que se presentan en la imagen.
Apertura de una plantilla
Si todavía 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. Después de leer la información, cierre la ventana. Aparecerá el asistente de creación
de sitios con las plantillas para Web Creator Pro 6.
Página 6 / 74
Web Creator Pro 6 - Guía de inicio rápido
El asistente ofrece 8 plantillas que contienen todos los elementos esenciales para realizar un
sitio Web completo, así como la opción de empezar con una página en blanco.
En la parte superior de la ventana se encuentran cuatro fichas: Estilo, Página, Tema, y
Color/Vista previa. Posteriormente hablaremos de las demás fichas, pero por lo pronto
concentrémonos en éstas.
Abajo se encuentran tres botones de opción llamados "Versión 6", "Versión 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 después de dominar los conceptos
fundamentales de la utilización de Web Creator Pro 6 para que pueda sacar el máximo provecho
de estas plantillas.
Vuelva al botón de opción Versión 6 y desplácese hacia abajo con la barra de la derecha.
En este ejemplo, utilizaremos Style 05 de la versión 6. Selecciónelo y haga clic en el botón
Siguiente o haga doble clic en la plantilla. Ahora debe haber pasado a la ficha Página.
Página 7 / 74
Web Creator Pro 6 - Guía de inicio rápido
Contiene varios campos en la parte superior de la ventana. Nombre de página se refiere al
nombre "interno" de esa página; el nombre de archivo de base. Por otra parte, Título es lo que
se mostrará en la parte superior de un explorador Web. En el campo Idioma, tiene la opción 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 página en blanco y varios diseños de
página.
Las plantillas A y B son bastante sencillas y sólo contienen unos cuantos bloques vacíos. Las
páginas Inicio y Presentación están constituidas principalmente de texto y se adaptan más a
sitios Web de negocios. Mientras que, las páginas Producto y Productos contienen más detalles
con un bloque de imágenes y bloques combinados que contienen texto y una imagen, que se
prestan más para mostrar galerías y listas que requieren una estructuración 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 página Inicio.
Pasará a la página Tema, que debe estar vacía. Esta ficha tiene la función de agregar pancartas o
fondos a páginas, 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 capítulo 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 aplicarán en todas sus páginas. El campo Estilo de la
parte superior izquierda representa la apariencia general que tendrán los elementos de la
página. Puede abrir la lista del campo Estilo, que le permite elegir de más 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 detrás de ella.
En este ejemplo, elegimos el estilo Honolulu.
Más 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 botón Finalizar. Aparecerá momentáneamente un
cuadro de diálogo pequeño con una barra de progreso mientras se constituye la primera página.
Página 8 / 74
Web Creator Pro 6 - Guía de inicio rápido
Modificación de una imagen
En la parte superior izquierda, hay una imagen de logotipo. Si hace clic en ésta, aparecerá un
borde de selección que le permite cambiar el tamaño 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. Más 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 imágenes
integradas con Web Creator Pro 6. El segundo icono abrirá un cuadro de diálogo que le
permitirá buscar un archivo de imagen que se encuentre en su equipo y reemplazar la imagen
del logotipo. Si todavía no cuenta con un logotipo, pruebe con uno de la biblioteca de imágenes.
Página 9 / 74
Web Creator Pro 6 - Guía de inicio rápido
Debajo del campo Archivo se tienen opciones para los atributos y el comportamiento de la
imagen.
De manera predeterminada, está habilitado el cuadro de comprobación Conservar relación de
aspecto. Esto le permite cambiar el tamaño de las imágines mientras se conservan la apariencia
y las proporciones originales. Sin embargo, existen casos en que desee ajustar las imágenes y
esto se hace desactivando el cuadro. Con esta opción deshabilitada, aparecerán nuevos
controles que le permiten cambiar el tamaño libremente.
Adición de un elemento a la página
Vamos a agregar un eslogan junto al logotipo; más 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 página y siempre está a mano.
Elementos más específicos al contexto se pueden encontrar en la ficha Insertar mediante la
cinta. Desde la cinta, también se dispone de elementos Comunes, pero los elementos de la
biblioteca están separados en 4 categorías a las que se puede acceder de manera sencilla:
Imágenes, Vídeos, Sonidos y animaciones Flash.
Vamos a concentrarnos nuevamente en la barra de herramientas Elementos. Haga clic en el
botón Texto que se encuentra en la sección Comunes. Se insertará un área de texto
transparente en medio de la página con un símbolo para que introduzca información.
Página 10 / 74
Web Creator Pro 6 - Guía de inicio rápido
Una vez que haya introducido texto, será fácil personalizarlo. Seleccione texto y desde la ficha
Inicio de la cinta, puede cambiar la fuente, su tamaño, alineación, sangría e incluso agregar un
vínculo. Seleccionemos la fuente Brush Script MT el tamaño 40 para una mejor legibilidad.
Página 11 / 74
Web Creator Pro 6 - Guía de inicio rápido
A la derecha de la ficha Inicio, se encuentra un botón para suprimir el formato y hacer que el
texto vuelva a su configuración predeterminada en caso de ser necesario.
Ahora que ha modificado el texto, cambie el tamaño 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.
Introducción a los elementos del Contenedor
Coloquemos el elemento de texto junto al logotipo haciendo clic en su borde y
arrastrándolo. 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 explicación
detallada al respecto, consulte el capítulo Elementos del Contenedor: cuadros y paneles.
Introducción al comportamiento de flotación
Flotar es una función importante detrás 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 flotación se refiere a la colocación automática de elementos en una
página Web y está estrechamente relacionada con CSS (Hojas de estilos en cascada para las
páginas Web).
Seleccione el logotipo e intente desplazarlo hacia la derecha (de manera que no se sobreponga
en los demás elementos). ¿Se dio cuenta de cómo 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
más 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 Posición, 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 edición. Teniéndolo en cuenta, se recomienda encarecidamente que lea el capítulo
Comportamientos Flotar y Abajo para entender mejor su utilización y conexión con los Bloques y
Contenedores.
Página 12 / 74
Web Creator Pro 6 - Guía de inicio rápido
Página 13 / 74
Web Creator Pro 6 - Guía de inicio rápido
Modificación 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 título. Si lo cambiamos a "Presentación", 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". También
cree varios submenús para familiarizarse con esta función. Para una personalización más
detallada, existe un icono de lápiz junto al Estilo, que abre un cuadro de diálogo con parámetros
para modificar tanto el menú principal como los submenús.
Creación de un vínculo a otra página
Una vez que haya elegido el texto del encabezado de los menús, por ejemplo, Productos, junto
al campo de texto existe otro campo para los vínculos. Si hace clic en el icono de lápiz que está
junto a este campo, aparecerá el cuadro de diálogo de creación de vínculos.
Página 14 / 74
Web Creator Pro 6 - Guía de inicio rápido
Por lo general debe introducir una descripción que servirá de recordatorio para saber con qué
está vinculado. A continuación, elija una de las diferentes opciones de vínculo según sus
necesidades. Elija la primera opción de la sección Crear un vínculo a: una nueva página o una
existente.
Como hasta ahora no tiene ninguna otra página además de la página de Inicio, cree una en un
abrir y cerrar de ojos haciendo clic en el botón Crear una nueva página. Volverá a la ficha
Página, desde donde creó el proyecto, que presenta páginas que corresponden a su tema.
Continúe y elija la página Productos; confirme la información de las páginas Tema y Color/Vista
previa y haga clic en Finalizar. Volverá al selector de páginas donde puede seleccionar la página
que acaba de crear.
Página 15 / 74
Web Creator Pro 6 - Guía de inicio rápido
Después de hacer clic en el botón Aceptar, aparecerá el nombre de la página en el campo de
vínculo de la ficha Vínculo.
Página 16 / 74
Web Creator Pro 6 - Guía de inicio rápido
Haga clic en Aceptar y volverá al editor.
Página 17 / 74
Web Creator Pro 6 - Guía de inicio rápido
Prueba de su sitio Web en un explorador
Ha aprendido a insertar y modificar elementos, menús, vínculos y páginas. ¿Desea hacer una
prueba?
¡Es muy fácil!
Vaya a la ficha Web que se encuentra en la cinta. En la primera sección aparecen los
exploradores que tiene instalados en su equipo. Web Creator Pro 6 agrega automáticamente
Internet Explorer, Mozilla Firefox, Google Chrome, Opera y Safari a la sección 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 después de que cargue
la página.
Introducción a Bloques
Si va a la página Productos mediante el vínculo que creó en el menú, observará
que el logotipo aparece, pero no el que eligió. Sería muy útil tener el mismo logotipo en la
misma página. Para hacerlo de manera rápida 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 página, en
Página 18 / 74
Web Creator Pro 6 - Guía de inicio rápido
una estructura de árbol, que muestra la relación de los elementos entre sí, así como el orden en
que se crearon. Ajuste el tamaño 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 sólo el menú.
Haga clic en PanelHeader para resaltarlo, como se muestra en la imagen anterior. Observe cómo
también selecciona el elemento de la página. Ya que ha seleccionado un panel con elementos
secundarios, también éstos se seleccionan aunque no estén 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 página para agregar nuevo contenido
rápidamente. Vaya a la ficha Personalizado, que estará vacía.
Página 19 / 74
Web Creator Pro 6 - Guía de inicio rápido
Pero hagamos que esto cambie. Una vez que el panel del editor aún está seleccionado, al hacer
clic en el símbolo + 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.
Página 20 / 74
Web Creator Pro 6 - Guía de inicio rápido
Uso de Bloques
Abra la ficha Página de la cinta. En la ficha Página, haga clic en el icono Administrador de
páginas. Aparecerá una ventana que muestra las dos páginas que creó. Verá que a la derecha
hay varios iconos. El icono X le permite suprimir páginas, mientras que el segundo icono permite
cambiar su nombre y, el tercer icono se utiliza para duplicar las páginas. Vamos a utilizar el
primer icono que crea páginas. (La creación de páginas también se puede realizar con el botón
Nueva página de la ficha Página). Una vez que aparezca el asistente, seleccione la opción
"Página vacía" y haga clic en el botón Finalizar.
Con el panel Bloques aún abierto, elija Item1 en la sección Administrador de páginas y haga clic
en Agregar a página. El bloque se colocará automáticamente en el extremo superior izquierdo
de la página. La página en sí es un Contenedor del nivel más alto y el Panel insertado tiene
activado el comportamiento Flotar, lo que provoca que encuentre su posición de manera
automática.
Guarde el proyecto con el icono de disquete de la barra de acceso rápido que se encuentra en la
parte superior izquierda de la interfaz. La barra de acceso rápido también contiene la lista de
exploradores que se utilizan para hacer pruebas y el icono de deshacer.
Finalización del proyecto
Una vez que haya creado todas las páginas, deseará asegurarse de que el sitio se puede
encontrar fácilmente en los resultados de búsqueda. Web Creator Pro 6 cuenta con varias
herramientas que facilitan esta tarea.
Página 21 / 74
Web Creator Pro 6 - Guía de inicio rápido
1. Etiquetas de título H1 a H6: se pueden utilizar durante la creación de sitios Web. Están
disponibles en la barra de herramientas Elementos, en la sección Diseño. Esto significa
que se pueden personalizar al igual que cualquier otro elemento desde la barra de
herramientas Propiedades, pero también desde la ficha Web de la sección
Referenciación.
En la ficha Web>Referenciación se encuentran otras tres herramientas a su disposición:
2. Metaetiquetas: invisibles en el sitio Web e integradas al código de su página/sitio Web.
También son etiquetas de SEO (Optimización de motores de búsqueda).
3. Google Analytics: es una herramienta específica de Google que también se basa en
etiquetas. Web Creator puede generarlas para usted.
Mapa del sitio: la información que se genera toma como base la estructura y
programaciones de actualizaciones previstas que los motores de búsqueda recuperarán
de su sitio Web.
Se puede encontrar más información sobre este tema en el capítulo que abarca la ficha Web.
Página 22 / 74
Web Creator Pro 6 - Guía de inicio rápido
Carga del sitio Web
En la sección 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 páginas con vínculos inactivos, elementos no utilizados, etc. Entonces
podrá decidir si desea conservar esos archivos o suprimirlos. Tenga cuidado, ya que es
posible que algunas páginas necesiten "repararse" y no son necesariamente inútiles. Es
poco probable que desee eliminar todas las páginas que se muestran; es peor eliminar
por equivocación una página necesaria que conservar una que no desea.
2. Volver a generar: hará el trabajo de limpieza de todo el sitio Web después de haber
realizado una optimización. Después de hacer clic en este botón, siéntese y relájese
mientras se corrigen las imperfecciones de su sitio Web.
3. Cargar: esta función colocará su sitio Web en Internet. Tendrá que rellenar los campos
de dirección, nombre de usuario y contraseña.
Se dispone de una opción útil que permite configurar un filtro para que envíe 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 más rápidas, ya que envía
únicamente la información 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 información que
se muestra actualmente en su servidor. FTP Site Manager también le permite realizar
operaciones de arrastrar y colocar y se integra directamente en la interfaz Web Creator.
Presentación detallada de la interfaz
Observemos más de cerca los componentes principales que ofrece Web Creator Pro 6. Para no
extendernos demasiado, no hablaremos de los elementos más sencillos como por ejemplo,
Imagen, Texto o Botón, porque su uso es fácil desde el principio.
Página 23 / 74
Web Creator Pro 6 - Guía de inicio rápido
Si ha tenido la oportunidad de familiarizarse con las versiones más recientes de Microsoft Office,
se va a sentir como en su casa con Web Creator Pro 6 ya que comparten principios de
organización similares.
Barra de acceso rápido
La barra de acceso rápido del extremo superior izquierdo agrupa las siguientes
funciones: (de izquierda a derecha) Guardar, lista de páginas del proyecto, Deshacer y varios
exploradores disponibles.
El icono de lista de páginas del proyecto le permitirá desplazarse, con un solo clic, a otra página
que se encuentre en la lista que se muestra.
Los exploradores que estén instalados en su equipo aparecerán a la derecha de la barra de
acceso rápido. Web Creator Pro 6 agregará de manera automática a esta lista, Internet Explorer,
Mozilla Firefox, Google Chrome, Opera y Safari de modo que pueda probar rápidamente su
página Web en el explorador seleccionado. Si utiliza un explorador diferente de los que se
mencionan arriba, puede agregarlo manualmente desde la ficha Web>sección
Exploradores>Agregar que se encuentran en la cinta.
Página 24 / 74
Web Creator Pro 6 - Guía de inicio rápido
Cinta
La cinta, que siempre está disponible, se encuentra en la parte superior, debajo de
la barra de acceso rápido. La cinta reemplaza el menú original, lo que permite disponer de las
opciones en toda la longitud de la cinta. Las opciones están clasificadas por tema con imágenes
que las representan, y texto para facilitar su exploración.
Si no está familiarizado con el conjunto de aplicaciones Microsoft Office, esta estructura de los
menús puede confundirlo al principio, pero una vez que los haya utilizado unas cuantas veces,
podrá encontrar de manera fácil lo que busca.
En el extremo derecho se encuentran 4 botones. El primer botón de la izquierda contrae la cinta
para ofrecer más espacio. De manera predeterminada aparece una flecha hacia arriba y se
convierte en flecha hacia abajo para expandir la cinta contraída.
Los otros tres botones se utilizan para los proyectos. El segundo botón sirve para pasar al modo
de ventana, y el tercero se utiliza para cerrar el proyecto después de preguntarle si desea
guardarlo.
Ahora vayamos a las diferentes fichas que se encuentran en la cinta.
Ficha Archivo
Aquí encontrará opciones que lo ayudarán a administrar los proyectos; Abrir proyecto, Nuevo
proyecto, Cerrar, Guardar, Guardar como, Imprimir y Salir.
La opción Abrir ofrece dos posibilidades.
Página 25 / 74
Web Creator Pro 6 - Guía de inicio rápido
Se tiene la opción de cargar un proyecto que se ha abierto recientemente. Nota: esta lista se
actualiza sólo después de haber cerrado Web Creator Pro 6.
Otra manera de abrir un proyecto es con la función 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 edición: Deshacer, Cortar, Copiar, Pegar, Eliminar y
Seleccionar todo.
Las demás funciones se encargan de fuentes, formato de página, alineación, listas con viñetas
y números, sangría y gestión de vínculos. La última opción suprime por completo el formato
del texto y lo convierte en texto sin formato no editado.
Página 26 / 74
Web Creator Pro 6 - Guía de inicio rápido
Ficha Proyecto
Esta ficha se refiere al proyecto actual como un todo.
La primera sección, Alineación 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 sección Página de inicio define la primera página que un usuario de Internet verá una vez que
se conecte a su sitio Web.
Ficha Página
Esta ficha se refiere a la página actual que se está editando.
La primera sección, Páginas, le permite cambiar las páginas, ya sea creándolas o cambiando a
una que ya haya creado.
El tercer icono, Administrador de páginas, abre una lista de las páginas que están disponibles
dentro del proyecto con la opción de mostrar u ocultar las vistas previas de las páginas y realizar
operaciones como el cambio de página, cambio de nombre, supresión, duplicado y creación de
una página.
La sección Actual contiene el icono Propiedades que le permite modificar opciones referentes a
la página actual desde la barra de herramientas Propiedades. Esto es útil cuando la página está
llena de elementos que ocultan el fondo, lo que dificulta el acceso a sus propiedades.
Actualizar, vuelve a diseñar la página y sus elementos partir de la memoria almacenada. Volver
a cargar por una parte encuentra los elementos en su disco duro para volver a diseñar la página,
lo que hará que Web Creator le pregunte si desea guardar la información.
Estas herramientas son útiles para suprimir información "perdida" que aparezca después de
editar varias veces la página abierta y en equipos más lentos.
Detección de dispositivos le permite elegir de modo sencillo la manera en que se visualiza la
página, en caso de que se consulte con un dispositivo móvil. Será necesario que cree con
Página 27 / 74
Web Creator Pro 6 - Guía de inicio rápido
anticipación una versión de dicha página para dispositivos móviles y la seleccione como opción
favorita de visualización para exploradores de dispositivos móviles.
Establecer una Contraseña evitará que otros usuarios puedan acceder a la página durante la
fase de prueba.
La sección Colores le permite cambiar la paleta de colores actual eligiendo una de la lista. Los
elementos que utilicen colores de la paleta cambiarán de color en función de su selección.
El botón Configurar colores le permite modificar los colores de los elementos de la Plantilla que
utilice en la página.
Ficha Insertar
Esta ficha reúne todos los elementos disponibles de Web Creator en un solo sitio.
Página 28 / 74
Web Creator Pro 6 - Guía de inicio rápido
La sección Comunes contiene los mismos elementos que siempre se encuentran disponibles en
la barra de herramientas Elementos y se clasifica de la misma manera.
La sección Biblioteca le permite elegir archivos Multimedia proporcionados por Web Creator
Pro 6 directamente a partir de 4 categorías: Imágenes, Vídeos, Sonidos y animaciones Flash.
Página 29 / 74
Web Creator Pro 6 - Guía de inicio rápido
Ficha Selección
Como su nombre lo indica, estas funciones se refieren a los elementos que están seleccionados
en la página.
Las secciones Acciones y Orden Z son bastante sencillas y ya hemos abarcado los vínculos.
La sección Grupo cuenta con funciones que le permitirán agregar o suprimir elementos de un
grupo o crear un grupo completamente nuevo con la posibilidad de agregarle elementos.
La sección Elemento primario le permite transferir elementos seleccionados a un Contenedor
disponible en la página o crear un elemento del Contenedor (Panel o Cuadro) para ese
propósito determinado. Se hablará con más detalle de los contenedores en la sección Elementos
del Contenedor: cuadros y paneles.
Página 30 / 74
Web Creator Pro 6 - Guía de inicio rápido
Ficha Formato
Esta ficha ofrece múltiples opciones para alinear uno o varios elementos, y en términos de
comportamiento, está vinculada con los conceptos Elemento primario/Contenedor (Cuadro,
Panel o Página).
Para obtener información más detallada sobre este tema, consulte la sección Alineación y
posicionamiento.
Ficha Web
Esta ficha contiene todas las funciones referentes a la finalización de su sitio Web y su activación
en línea.
La primera sección, Exploradores, muestra los exploradores que están 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 sección 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 sección Página, Código personalizado le permite incluir código JavaScript o HTML con un
editor de texto, en la página Web actual.
Peso de página calcula de qué manera afectará cada elemento de su página Web el tiempo de
carga de la misma y le informa cuánto tardará un usuario con una conexión de 256 Kb/seg
descargar y ver su página.
La sección Referenciación cuenta con cuatro herramientas que le ayudan a hacer que su sitio
destaque en los resultados de los motores de búsqueda.
Metaetiquetas proporciona descripciones y palabras clave a los motores de búsqueda. Usted
mismo puede crear las etiquetas o simplemente proporcionar la información a Web Creator y
permitir que éste las cree para usted.
Página 31 / 74
Web Creator Pro 6 - Guía de inicio rápido
Con el icono Encabezados puede ayudar a los motores de búsqueda a identificar información
importante sobre sus páginas Web. Puede insertar los encabezados en la página utilizando la
cinta o la barra de herramientas Elementos. Para obtener más información al respecto,
consulte el capítulo Sección Diseño.
Al hacer clic en Google Analytics puede definir palabras clave utilizadas por el motor de
búsqueda de palabras clave de Google.
La sección 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
continuación 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 están
vinculadas al proyecto que cargue; esto facilita el trabajo en servidores múltiples con proyectos
correspondientes.
Ficha Herramientas
Esta ficha le permite acceder a recursos adicionales que vienen con Web Creator Pro 6.
La primera sección cuenta con recursos que vienen directamente de LMSOFT.
La segunda sección contiene correctores de gramática y ortografía creados por Druid
Informatique.
La sección Cuadrícula proporciona métodos para simplificar el posicionamiento de los
elementos en la página.
Y, por último, la sección Barras de herramientas le permite ocultar y mostrar el cuadro
Elementos que está a la izquierda. Esta función es útil cuando ya ha colocado la mayoría de los
elementos necesarios en la página y desea tener más espacio para trabajar. El icono Restablecer
a configuración predeterminada hará que la interfaz Web Creator Pro 6 vuelva a la
configuración de fábrica.
Página 32 / 74
Web Creator Pro 6 - Guía de inicio rápido
Ficha Ayuda
Las funciones de esta ficha son muy fáciles de utilizar. Recuerde que para utilizarlas, necesita
una conexión a Internet.
Barra de herramientas Elementos
Esta barra de herramientas le permite acceder a los elementos principales que
Web Creator pone a su disposición para la creación de su sitio Web. Los llamamos elementos
porque son los cimientos de cada página. Algunos se utilizan para mostrar información, otros la
recopilan, y todos se pueden personalizar.
La barra de herramientas Elementos se ha dividido en 5 secciones para facilitar su uso:
Comunes, Diseño, Sociales, Multimedia y Datos.
Cada sección 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 resolución de su pantalla sea
demasiado baja.
Inserción de un elemento
Para insertar un elemento en la página actual, basta con hacer clic en el icono/nombre
correspondiente para que aparezca en medio de la página en la parte superior de la capa.
La inserción de elementos en la página nunca afectará los elementos seleccionados de la misma.
El agrupamiento y la inserción en elementos primarios nunca ocurrirán sin que lo haya elegido.
Para obtener más información sobre los elementos, consulte los siguientes capítulos:
Elementos del Contenedor: cuadros y paneles, Creación y uso de Bloques y Grupos.
Página 33 / 74
Web Creator Pro 6 - Guía de inicio rápido
Propiedades de los elementos
Cuando agregue un elemento a la página, la Barra de herramientas Propiedades abrirá la ficha
Elementos para permitir la personalización inmediata del elemento.
Cada elemento que agrega a la página se puede personalizar en lo que se refiere a color, forma,
dimensiones. Algunos tienen más opciones que se pueden configurar como los elementos
PayPal, Blog y Formulario.
Se puede acceder a estos parámetros desde la barra de herramientas Propiedades de la
derecha de la interfaz. Para obtener más información, consulte el capítulo Barra de
herramientas Propiedades.
Jerarquía de los elementos
Se ha mencionado cómo al crear cada elemento, éste se coloca en el centro de la página, y es
independiente de los demás elementos (excepto de la página, por supuesto, pues forma parte
de ella). Al agregar elementos a la página, éstos se clasifican dentro de una jerarquía según el
orden en que se hayan creado. Desde ese punto de vista, los elementos se pueden modificar
utilizando Contenedores, Bloques y Grupos.
La relación jerárquica entre los elementos se puede ver en la lista de elementos que
abarcaremos en el capítulo Lista de elementos.
Ahora, nos gustaría 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 cómo utilizarlos todos.
Sección Comunes
Elemento Texto
A partir del momento en que inserta el elemento de texto, puede empezar a escribir texto,
modificar su apariencia y agregar vínculos parciales o de texto completo (botón Vínculo de la
cinta de la ficha Inicio),etc.
Los hipervínculos se pueden configurar muy fácilmente mediante el botón Vínculo 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).
Página 34 / 74
Web Creator Pro 6 - Guía de inicio rápido
Elemento Imagen
Al crear una Imagen se crea un rectángulo con marcadores de posición. 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 imágenes
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 función muy útil para ahorrar espacio. Si desea
colocar una imagen muy grande en su página, puede reducir su tamaño para que quepa en la
página y ofrezca la posibilidad de verla de tamaño completo haciendo clic en ella (incluso puede
seleccionar qué tanto se debe ampliar).
Página 35 / 74
Web Creator Pro 6 - Guía de inicio rápido
Elemento Botón
Una vez que inserta un botón, puede hacer doble clic en éste para cambiar el texto que muestra,
o también 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 botón: En relieve, Presionado y Puntero del mouse. También 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 continuación, al área Elementos y haga
clic en Agregar. El centro se definirá con respecto al campo de texto donde podrá agregar un
título para dicha sección. Puede agregar submenús siguiendo el mismo método, y agregar
vínculos utilizando el campo que está debajo del campo de título.
Página 36 / 74
Web Creator Pro 6 - Guía de inicio rápido
Sección Diseño
Elementos Panel y Cuadro
Panel y Cuadro tienen la denominación especial: Contenedor. Están diseñados
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 relación
afecta mucho el comportamiento porque cuando el elemento primario se desplaza, también se
desplazan los elementos secundarios. Lo mismo sucede al eliminarlo. Si elimina un panel que
tenga botones, éstos se perderán. De hecho, la página misma es un contenedor, que es el
elemento primario de todos los elementos que coloque dentro de ella. En caso de que elimine la
página, se eliminará todo lo que se encuentre dentro de ella.
La diferencia principal entre los cuadros y los paneles es que éstos últimos sólo tienen una
función organizativa, mientras que los cuadros también se utilizan para presentación. Se dará
cuenta de qué tan personalizable es un cuadro en comparación con su panel.
Se debe analizar con más detalle cada uno de estos elementos, y le sugerimos que consulte
información más detallada en el capítulo Elementos del Contenedor: cuadros y paneles.
Elemento IFrame
El elemento IFrame le permite incluir toda una página Web dentro de otra página,
que sea suya o que la haya encontrado en Internet. Puede cambiar el tamaño y color de este
elemento, así como su nombre. Cuando lo agrega a la página, verá una imagen con marcadores
de posición que representa el sitio donde se mostrará la página así como sus dimensiones
actuales. Puede elegir la página que se mostrará con los iconos de la ficha Elementos de la barra
de herramientas Propiedades.
Elemento Acordeón
El elemento Acordeón se puede comparar a un menú apilado animado. Cuando
hace clic en una sección, se extiende y muestra la información que se haya incluido para esa
sección. Puede cambiar el color de los diferentes estados de los acordeones de la misma manera
que lo cambia para el elemento Botón.
En Web Creator 6 debe preparar páginas de antemano y asignarlas a una sección de su elección.
Elemento Control de ficha
Página 37 / 74
Web Creator Pro 6 - Guía de inicio rápido
El elemento Control de ficha le permite insertar varias páginas Web en un área y
acceder a ellas con los botones en forma de menús que aparecen al insertarlas. Pueden ser
páginas que usted haya creado o páginas que haya tomado de un sitio Web en línea.
El tamaño de las páginas que se muestran será el tamaño normal y se podrá utilizar la barra de
desplazamiento para desplazarse por las páginas.
Algunas diferencias entre los elementos Acordeón y Ficha son que el elemento Acordeón sólo
muestra páginas internas y el menú es animado y está apilado.
Elementos Etiqueta(H1…H6)
El elemento Etiqueta(H1…H6) le permite insertar etiquetas de referenciación de H1
a H6.
A menudo se utilizan para definir la organización de su sitio Web y representan la importancia
de determinada información que proporciona en una página. De la más importante a la menos
importante (1 a 6), indican a los motores de búsqueda la información clave sobre su página.
Son útiles para asegurarse de que los motores de búsqueda no pasen por alto información
importante sobre su sitio Web cuando un usuario haga una consulta para buscar información
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 precaución.
Página 38 / 74
Web Creator Pro 6 - Guía de inicio rápido
Una vez que se han agregado a su página, 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 más
adecuada a sus páginas. A nivel amplio del proyecto, puede cambiar todos los estilos de los
encabezados con el icono Encabezados de la ficha Web del cordón. Si únicamente desea
modificar el encabezado de la página actual, utilice la sección Página actual para realizar las
modificaciones.
Elemento Emergente
Emergentes le permiten mostrar otra página Web sobre su página. El elemento
emergente debe ser desencadenado por un evento para que sea visible. Cuando se activa el
elemento emergente, la página que estaba activada se oscurecerá para que los usuarios se
concentren en la página recién abierta.
Sección Sociales
Elemento Redes sociales
El elemento Redes sociales le permite integrar vínculos rápidamente a una lista
predefinida de sitios sociales populares: Facebook, Twitter, Google+, Delicious, Reddit,
Página 39 / 74
Web Creator Pro 6 - Guía de inicio rápido
Stumbleupon, Tumblr, LinkedIn y Digg. Puede realizar algunos cambios de estilo a este
elemento para que se adapten mejor a su página.
Elemento Blog
Una vez que lo haya colocado en su página, haga clic en el botón 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 dirección de
correo electrónico para que pueda recibirlas.
En el área que se proporciona a continuación, puede escribir la primera información utilizando
el icono + de la derecha. Se mostrará la fecha y debajo de ella, "Nueva entrada". En los campos
siguientes, puede agregar vínculos a artículos de otras páginas o páginas de su proyecto. Cada
vez que agregue una entrada, se mostrará la hora de creación para que la vean los lectores.
Puede modificar el formato del texto utilizando los cuatro iconos que se encuentran arriba del
área de texto.
Sección Multimedia
Elemento Galería
El elemento Galería le permite mostrar una recopilación de imágenes en su página Web. La vista
inicial puede ser en forma de mosaico que muestra una recopilación de pequeñas miniaturas, o
una presentación que muestra las imágenes una por una. Recuerde que esto sólo afecta la
visualización inicial y el parámetro de mosaico cambiará a formato de presentación una vez que
un visitante seleccione una imagen.
Página 40 / 74
Web Creator Pro 6 - Guía de inicio rápido
Elementos Sonido y Vídeo
Los elementos Sonido y Vídeo funcionan casi de la misma forma. Los dos mostrarán un
reproductor exactamente de la misma manera en que aparece en un explorador. Puede realizar
una vista previa del vídeo o sonido que elija directamente desde la barra de herramientas
Propiedades. Son compatibles la mayoría de los formatos conocidos. Además se le dará la
opción 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 dirección determinada. Con sólo agregar una dirección en la ficha
Elemento de la barra de herramientas Propiedades, podrá tener acceso al Mapa, Satélite y
Street View del área.
Página 41 / 74
Web Creator Pro 6 - Guía de inicio rápido
Sección Datos
Elemento PayPal
El elemento PayPal le permite insertar un vínculo a una cuenta PayPal para
configurar un pago seguro en línea. En la ficha Elemento de la barra de herramientas
Propiedades puede elegir el tipo de vínculo que desee: Agregar al carro, Ver carro y Comprar
ahora. A continuación, 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 codificación y las secuencias de comandos, el
Elemento Web permitirá la inserción de JavaScript, PHP y otros lenguajes de programación que
se basan en Web. No se puede garantizar el resultado obtenido al utilizar este elemento, ya que
depende del código que se utilice, el explorador que lo lea y el servidor que lo almacene. Por
ello, antes de utilizarlo, asegúrese de estar bien informado y de realizar pruebas. Este elemento
está estrechamente relacionado con la función Código personalizado de la sección Página de la
ficha Web de la cinta.
Elemento Google Translate
El elemento Google Translate ofrece a los usuarios la oportunidad de ver de
manera instantánea su sitio Web en cualquier idioma de su elección. Sólo necesita agregar el
elemento a su página 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 dirección de destinatario, el formulario que cree recopilará
la información que envíen los visitantes. Los datos recopilados se procesarán en nuestros
servidores y se le enviarán para que los utilice según sus necesidades.
Debe empezar por crear un Formulario y seleccionar un Tipo de acción de la barra de
herramientas Propiedades. Al realizar las dos primeras acciones se le enviará un correo
electrónico con la información recopilada; sin embargo, los usuarios preferirán la primera
selección, ya que tendrán menos trabajo y no interrumpirá su exploración.
La tercera opción es enviar los datos a una página Web, que a continuación analizará la
información utilizando secuencias de comandos o información almacenada en el servidor (usted
será responsable de esta acción). La adición de información a una base de datos es una de las
razones por la que esta opción es muy útil.
Página 42 / 74
Web Creator Pro 6 - Guía de inicio rápido
Con la cuarta opción, la información se envía a una función JavaScript que creó sea en un
Elemento Web (como se describió anteriormente) o en el área Código personalizado que se
encuentra en la ficha Web de la cinta. Una vez que se envíe el formulario, se llamará la función
JavaScript según la información que proporcione.
Una vez que se cree el formulario, necesitará crear entradas utilizando el elemento Campo de
formulario. Después de su inserción, tendrá el aspecto de un campo de texto blanco, pero se
podrá cambiar a otro Tipo de entrada. Asegúrese de probarlos todos para ver las ventajas que
pueden ofrecer.
Elemento Contador
El elemento Contador le permite contar cuántos usuarios han visitado su página. Como existen
diferentes contadores, necesitará configurar el contador deseado. Usted puede escribir el
código si está suficientemente familiarizado con éste, pero existen muchos fragmentos de
código 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.
Página 43 / 74
Web Creator Pro 6 - Guía de inicio rápido
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 posición original, vuelva a hacer doble clic en la barra superior. La lista de elementos tiene
dos fichas: Elementos y Bloques.
Página 44 / 74
Web Creator Pro 6 - Guía de inicio rápido
Ficha Elemento
Dentro de la ficha Elementos, encontrará una lista de cada elemento contenido en
la página actual organizado en una estructura de árbol. La estructura muestra su sitio respectivo
en términos de orden, creación, relaciones y dependencias con los demás elementos y si
pertenecen a o contienen otros elementos (este tema se abarcará en el capítulo Elementos del
Contenedor: cuadros y paneles).
Al utilizar los iconos que están junto a cada nombre de elemento, puede ocultar o mostrar los
elementos, así como contraer o expandir el contenido del Contenedor.
Búsqueda de un elemento
El área Buscar le permitirá encontrar fácilmente un elemento en base a su nombre o incluso
parte de su nombre. Al hacer clic en la flecha, se buscarán los resultados y los elementos
encontrados se resaltarán en rojo en la lista de elementos y también se seleccionarán en la
página.
Cambio de orden de los elementos
Justo a la derecha de la función de búsqueda, se encuentra Orden Z seguido de dos flechas
verticales. Esta función se encarga del orden de los elementos de la página. Los elementos están
clasificados de manera predeterminada por orden de creación; se puede cambiar la clasificación
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 página.
Visualización de elementos y grupos
Arriba de la lista se encuentra un cuadro desplegable, Vista jerárquica de los elementos de la
página. Si hace clic en esta lista, puede elegir la opción Ver grupos de elementos y su
contenido.
Página 45 / 74
Web Creator Pro 6 - Guía de inicio rápido
Búsqueda de grupos
Al igual que con los elementos, el campo de búsqueda le permite buscar de manera sencilla
grupos en función de su nombre o parte de éste. Al hacer clic en la flecha, se buscarán los
resultados y los elementos encontrados se resaltarán en rojo en la lista de elementos y también
se seleccionarán en la página.
Ficha Bloques
Al hacer clic en la ficha Bloques, aparecerá una nueva área con dos nuevas fichas
llamadas: Biblioteca y Personalizado.
Página 46 / 74
Web Creator Pro 6 - Guía de inicio rápido
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 más información sobre Bloques, consulte el capítulo Creación y uso de
Bloques.
Página 47 / 74
Web Creator Pro 6 - Guía de inicio rápido
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
título Propiedades que puede utilizar para mostrar la barra de propiedades.
Ficha Elemento
En función del elemento que esté seleccionado, encontrará herramientas para modificar
elementos que van desde cambiar su color hasta insertar páginas.
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 búsqueda para reemplazar una imagen faltante o
para usuarios que han deshabilitado las imágenes en su explorador. Incluso puede cambiar el
comportamiento de los elementos al cargar la página; por ejemplo, efectos de apariencia.
Página 48 / 74
Web Creator Pro 6 - Guía de inicio rápido
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 página 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 página. Por
ejemplo, si crea un botón simple y lo deja invisible cuando la página se carga, puede hacer que
aparezca una vez que el puntero del mouse pase sobre un elemento determinado de la página.
Incluso puede hacerlo con un elemento multimedia, hacer que se reproduzca sólo cuando se
haya pasado el puntero del mouse.
Ficha Vínculo
La ficha Vínculo es muy fácil de utilizar. Le permitirá definir vínculos a páginas de Internet o
páginas de su proyecto. También existen otras opciones que puede habilitar, como redirección
automática y dónde se abrirá el vínculo.
Ficha Posición
Esta ficha reúne toda la información sobre un elemento referente a su posición en la página y su
tamaño. En esta ficha es donde puede definir el Comportamiento para Flotar y Abajo (consulte
el capítulo 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 selección de por lo menos 2 elementos simultáneamente.
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
página, es un Contenedor: los elementos Cuadro y Panel.
Contenedores: se diseñaron específicamente para almacenar elementos comunes y se utilizan
exactamente como una caja física: todo elemento que se coloque en el interior se convierte en
un subelemento. Por lo tanto, una vez que desplaza el contenedor, también desplaza lo que está
dentro de éste.
Página 49 / 74
Web Creator Pro 6 - Guía de inicio rápido
Gracias a estos contenedores, puede crear de manera muy sencilla plantillas para páginas
combinando una serie de contenedores. También puede reunir diseños complejos y guardar una
apariencia más homogénea.
Diferencias entre paneles y cuadros
La diferencia principal entre los cuadros y los paneles es que éstos últimos sólo tienen una
función organizativa, mientras que los cuadros también se utilizan para presentación. Se dará
cuenta de qué tan personalizable es un cuadro en comparación con su panel.
Esencialmente, cuando necesita un cuadro invisible sólo para fines organizativos, utilizaría un
Panel.
Si el Contenedor también necesitara un aspecto atractivo en términos de forma, color, borde,
un Cuadro sería más adecuado. Las opciones de personalización de un Cuadro se describirán
más adelante.
A continuación, verá que ambos objetos funcionan casi del mismo modo.
Creación de un diseño con contenedores
Puede encontrar estos elementos en la sección Diseño 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 página. Los cuadros
aparecerán en azul y los paneles serán transparentes con un borde punteado (el borde no se
visualizará en el explorador).
Adición de elementos a un contenedor
Adición 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 sección Diseño de la barra Elementos. Elija Panel o
Cuadro, que aparecerá en el centro de la página.
Ahora cree un elemento. Seleccionemos una imagen haciendo clic en el icono que se encuentra
en la sección de elementos Comunes de la barra de herramientas Elementos. También
aparecerá en medio de la página.
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 demás
elementos. Esto evita la adición accidental de elementos en contenedores que se encuentran en
el centro de la página.
Página 50 / 74
Web Creator Pro 6 - Guía de inicio rápido
Haga lo siguiente: elija el elemento y a continuación, colóquelo en la parte superior del panel. En
cuanto el elemento se encuentre dentro del área del panel, el borde de éste último, se vuelve
púrpura. 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.
Adición de varios elementos a un contenedor
Existen varias maneras de agregar elementos múltiples a un contenedor.
Una vez que se ha creado el contenedor, la manera más sencilla de agregarle varios elementos
sería seleccionar éstos últimos y abrir el menú de contexto haciendo clic con el botón
secundario del mouse. Una vez que el menú se abra, seleccione Agregar a Elemento primario y,
Página 51 / 74
Web Creator Pro 6 - Guía de inicio rápido
a continuación, elija el contenedor que desee. Entonces los elementos se colocarán en la parte
superior izquierda del contenedor de elemento primario.
Otra forma de hacerlo sería arrastrar y colocar los elementos seleccionados en el contenedor
donde desea incluirlos. Una vez que el borde del Elemento primario se vuelve púrpura, puede
estar seguro de que los elementos se han incluido en el contenedor.
Una forma más larga de hacerlo es arrastrando y colocando cada elemento uno por uno.
Seleccione el contenedor haciendo clic en éste o seleccionándolo de la lista de elementos. Si lo
desplaza, se dará cuenta de que los elementos que están 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 inténtelo de nuevo.
Si se utilizan los contenedores junto con otros componentes disponibles mediante Web Creator
Pro 6, es muy fácil juntar varias páginas o proyectos que tengan como base la misma plantilla.
Para ello, utilice la función más reciente de la interfaz: el bloque.
Bloques: también 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 página en forma de bloques. Hablaremos de ellos con
más detalle en el capítulo Creación 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: sólo cuentan con opciones básicas de personalización; únicamente se pueden
modificar la luminosidad y la transparencia de colores haciendo clic en el icono que está a la
derecha del campo Color.
Página 52 / 74
Web Creator Pro 6 - Guía de inicio rápido
Cuadros: por otra parte, se pueden peresonalizar muchos de sus parámetros 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 sólo se les puede asignar
un color de fondo.
Los cuadros también pueden tener un encabezado y pie de página, cada uno con su propio color
o incluso transparencia. Esta funcionalidad le permite colocar texto en ellos o mostrar los
elementos subyacentes.
Página 53 / 74
Web Creator Pro 6 - Guía de inicio rápido
A continuación se presentan dos ejemplos de esquinas redondeadas, encabezados, pies de
página, anchos de borde, degradados y transparencias.
Página 54 / 74
Web Creator Pro 6 - Guía de inicio rápido
Herramientas de alineación y posicionamiento
La alineación, el posicionamiento y el cambio de tamaño de elementos en Web Creator Pro 6 se
ha convertido en una tarea muy eficaz.
1) Se cuenta con una herramienta de cuadrícula que se puede personalizar en la ficha
Herramientas de la cinta.
2) Aparecen guías para las funciones de posicionamiento y cambio de tamaño.
3) Se cuenta con una gran selección de opciones mediante la ficha de formato.
Cuadrícula
Se puede acceder a todos los parámetros mediante la ficha Herramientas.
Desde esta ficha puede personalizar por completo la manera en que funciona la cuadrícula de
forma predeterminada en Web Creator: puede hacerla Visible o no visible, Activa o inactiva,
cambiar el color de la cuadrícula con la herramienta de selección de colores, así como el espacio
de la cuadrícula (tanto el Alto como el Ancho).
Página 55 / 74
Web Creator Pro 6 - Guía de inicio rápido
Guías de posicionamiento
En cuanto empiece a desplazar un elemento, Web Creator Pro 6 mostrará líneas
que sirven de guía y que le permiten alinear el elemento seleccionado con respecto a otros
elementos de la página. Esta función puede ser extremadamente útil en muchas ocasiones en
que necesite hacer alineaciones perfectas en una página que contenga varios elementos.
Estas líneas de guía también se activan cuando cambia el tamaño.
A continuación se muestra un elemento que se está desplazando:
... y cuando se cambia su tamaño:
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.
Página 56 / 74
Web Creator Pro 6 - Guía de inicio rápido
La primera sección 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 (Página,
Panel, Cuadro).
El ejemplo siguiente muestra la alineación de un elemento en un cuadro, primero
Horizontalmente, luego Verticalmente, seguida de la combinación de ambas, es decir, en el
Centro.
El resto de la ficha Formato se refiere al posicionamiento relativo de los elementos entre sí. A
continuación se presenta un resumen visual de alineaciones y cambios de tamaño con tres
cuadros en la parte superior.
Página 57 / 74
Web Creator Pro 6 - Guía de inicio rápido
Al haber seleccionado varios elementos, uno de los ellos tendrá controladores verdes mientras
que los demás serán azules. El elemento seleccionado con los controladores verdes es la
selección principal y sirve de punto de referencia para varias funciones de formato.
Si no obtiene el resultado deseado después de haber alineado un grupo de elementos, proceda
de la siguiente manera: cancele la alineación, elija la técnica de alineación de los elementos y, a
continuación, haga clic en el elemento que será el punto de referencia. A continuación se
seleccionará como punto de referencia y entonces podrá realizar la alineación.
Después de un periodo de tiempo corto encontrará instintivamente el elemento al que se hace
referencia.
Comportamientos Flotar y Abajo
La implementación de los comportamientos Flotar y Abajo permitirán el
reposicionamiento automático de los elementos del contenedor, sea una Página, un Panel o un
Cuadro. Esta función es más sencilla de lo que parece, una vez que haya aprendido a utilizarla.
Página 58 / 74
Web Creator Pro 6 - Guía de inicio rápido
Primordialmente, esta función puede eliminar casi por completo la necesidad de editar el diseño
manualmente, facilitar el cambio de tamaño de las páginas 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 parámetros desde la ficha Posición de la barra de herramientas
Propiedades, en la sección Comportamiento.
Entendimiento de la función de flotación
Un elemento con la función 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 (Página, Panel, Cuadro).
El elemento adoptará la posición de flotación que se seleccione, hacia la Izquierda o hacia la
Derecha. Si un elemento tiene configurado el comportamiento de flotación, é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 flotación Ninguno, el elemento se puede colocar manualmente y
permanecerá en ese sitio.
Si se activa este parámetro, se permitirá el reposicionamiento automático de los elementos de
una página en caso de que modifique su diseño, la orientación o inserte un nuevo elemento.
Importante: el comportamiento de flotación se encarga de gestionar el posicionamiento de los
elementos en su contenedor inmediato. Por lo tanto, los elementos flotan en relación con los
elementos de su propio contenedor.
Puede aplicar el comportamiento de flotación no sólo a los elementos de un cuadro, sino
también al cuadro que contiene dichos elementos. Los elementos que se encuentran dentro del
cuadro flotarán con respecto a los demás dentro del cuadro, y el cuadro flotará con respecto a
los demás contenedores de la página.
Página 59 / 74
Web Creator Pro 6 - Guía de inicio rápido
Restricciones de posicionamiento
Los elementos que tienen definido el atributo de flotación se colocarán de acuerdo con el
espacio disponible en la parte superior del contenedor. Si el elemento es demasiado grande, no
cambiará su tamaño y se colocará en algún 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 línea siguiente. Se ajustará de acuerdo con el tipo de flotación,
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 parámetro de
flotación a la izquierda con los anchos proporcionales al tamaño del contenedor. Por lo tanto,
están perfectamente alineados.
Página 60 / 74
Web Creator Pro 6 - Guía de inicio rápido
En la segunda imagen, se ha reducido la anchura del panel. Como el panel es demasiado
pequeño para incluir los tres elementos en la primera fila, el botón pasa automáticamente a la
línea siguiente.
Y en la tercera imagen, se ha cambiado el tamaño del tercer botón; es más ancho y, por
consiguiente, una vez más se ha desplazado hacia la línea siguiente.
En la ilustración siguiente, las imágenes se han colocado en orden descendente.
Página 61 / 74
Web Creator Pro 6 - Guía de inicio rápido
Una vez más se ha reducido la anchura de la segunda imagen, lo que provoca que el cuarto
botón se desplace hacia la línea siguiente. En este ejemplo el botón tiene configurado el
parámetro hacia la izquierda y pasa al final, pero se alinea con el borde del segundo botón.
La última imagen muestra lo que sucede si se vuelve a reducir el tamaño del panel. El cuarto
botón se coloca directamente debajo del segundo botón alineado al borde del primer botón.
En la imagen siguiente, se ha vuelto a reducir el tamaño del panel.
El primer botón afectado por este cambio es el tercer botón. Como ya no cabe en su sitio
anterior, se desplaza debajo del segundo botón y se alinea con el primer botón. Y como el botón
Página 62 / 74
Web Creator Pro 6 - Guía de inicio rápido
ya no se puede colocar junto al tercer botón, se desplaza debajo de éste y se alinea al borde del
panel.
Observe el espacio que se deja después del primer botón. Lo primero que se piensa es que el
cuarto botón es demasiado grande para colocarse debajo del primer botón. 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 botón, es
el tercer botón. Por lo tanto, el cuarto botón siempre deseará que el tercer botón esté a su
izquierda. Si esto no es posible, se desplazará a la línea siguiente.
Por esta razón, como lo muestra la imagen siguiente, si se reduce el tamaño del cuarto botón,
no se permitirá que se coloque debajo del primer botón.
Sin embargo, si cambia el tamaño del cuarto botón para que quepa en el espacio que está a la
derecha del tercer botón, entonces se desplazará hacia arriba, a la derecha de este botón.
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.
Página 63 / 74
Web Creator Pro 6 - Guía de inicio rápido
Máximo provecho del comportamiento de flotación
Después de las explicaciones anteriores, es evidente que para aprovechar al máximo el
comportamiento de flotación, deberá utilizar elementos que tengan exactamente las mismas
dimensiones. De lo contrario, dichos elementos se agregarán a la dimensión del contenedor. Al
hacerlo, los elementos conservarán una apariencia uniforme en el contenedor sin dejar huecos.
Se podría optar por rellenar los huecos utilizando elementos que no tengan activado el
comportamiento de flotación.
Sin embargo, al hacerlo, esos elementos no podrían posicionarse de manera automática y por lo
tanto, crearían nuevos huecos.
Página 64 / 74
Web Creator Pro 6 - Guía de inicio rápido
Adición 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 (asegúrese de que ha agregado correctamente el elemento al contenedor
arrastrándolo y colocándolo en su sitio o con el menú de contexto y seleccionando Agregar a
elemento primario>nombre del elemento primario).
Si activa el comportamiento de flotación para este nuevo elemento, de manera automática se
colocará en la única posición 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 continuación
puede elegir la posición de este elemento siguiendo las instrucciones.
Desplazamiento de elementos de flotación
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 arrástrelo de manera habitual.
Cuando el cursor del mouse se coloca sobre los bordes de los demás elementos de la página,
aparece una línea azul vertical que muestra dónde se colocará el elemento si lo suelta en ese
sitio. La barra que se encuentra a la derecha del elemento se colocará después de éste, antes de
las barras de la izquierda.
Recuerde que la adición de un elemento a un contenedor que contenga otros elementos
flotantes tendrá un gran impacto en su diseño.
Página 65 / 74
Web Creator Pro 6 - Guía de inicio rápido
Usos del comportamiento de flotación
El comportamiento de flotación se puede utilizar de dos maneras principales:
1) Para presentar elementos del mismo tipo. El mejor ejemplo para ello sería 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, sólo necesita suprimir un panel o agregar uno y se conservará el diseño.
A continuación se presenta un ejemplo de un conjunto de compositores que muestra
cómo el diseño permanece uniforme incluso después de haber cambiado la dimensión
de los contenedores de elementos
primarios.
Página 66 / 74
Web Creator Pro 6 - Guía de inicio rápido
Esta página contiene dos logotipos con una imagen y un menú. El cuerpo de la página
contiene cuatro paneles con la misma anchura, pero diferente altura. En realidad se
trata de Bloques que se han medido cuidadosamente.
Página 67 / 74
Web Creator Pro 6 - Guía de inicio rápido
Los bloques son un concepto importante en Web Creator Pro 6 y se explican en el
capítulo Creación 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 línea 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
Página 68 / 74
Web Creator Pro 6 - Guía de inicio rápido
demás elementos. Esto le permitirá acomodar elementos de manera automática como si
utilizara un "retorno de carro" así como elegir de qué lado se colocarán los elementos.
Si por alguna razón, como restricciones de espacio, los elementos sólo se pueden apilar, este
parámetro asegurará que los elementos siempre se alineen de manera previsible.
Esto es útil en particular para dispositivos móviles que pueden cambiar su orientación. La
orientación vertical será más angosta y provoca que los elementos se apilen, pero cuando se
utilizan en modo horizontal, los elementos se alinearán entre sí.
Uso de grupos
Los grupos han existido desde hace tiempo en Web Creator y es posible que se
supriman debido a la introducción de los contenedores. Los grupos son una colección simbólica
de elementos que se pueden utilizar para modificar elementos múltiples. A menudo se utilizaron
para pertenecer a un grupo de elementos que no deseaba modificar por equivocación y
necesitaba crear una jerarquía de orden Z entre los elementos. Con la introducción de los
Contenedores, los elementos ya están agrupados según su posicionamiento en la página.
Puede definir un grupo seleccionando varios elementos y abriendo el menú de contexto con el
botón secundario del mouse. A continuación, seleccione Agregar a Grupo y cree un nuevo grupo
o agréguelo a uno que ya exista.
Para acceder a las propiedades de un grupo, haga clic en Vista jerárquica de los elementos de la
página que se encuentra en la parte superior de la lista de elementos y seleccione Ver grupos
de elementos y su contenido.
Página 69 / 74
Web Creator Pro 6 - Guía de inicio rápido
Con los iconos +/- puede contraer o expandir la lista de elementos o incluso bloquear grupos y
elementos con el símbolo 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.
Página 70 / 74
Web Creator Pro 6 - Guía de inicio rápido
Uso de Bloques
Introducción a Bloques
Bloques son la evolución 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 página o proyecto.
Creación de un bloque
Incluso si no es indispensable, le recomendamos encarecidamente que cree un bloque en
función de un contenedor para que el reposicionamiento del bloque sea más sencillo
posteriormente. De la misma forma, si los elementos que están dentro de un bloque que está
almacenado en un contenedor, como un panel o un cuadro, entonces puede aplicar un
comportamiento de flotación a un contenedor, lo que le permitirá el reposicionamiento
automático del bloque en su página.
A continuación se presenta un ejemplo. Cree un panel en su página y configure el parámetro
Flotar con la barra de herramientas Propiedades. Después, 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 continuación, seleccione la ficha Personalizado y haga clic en el
símbolo +. Inmediatamente verá que aparece en la ventana con el título ItemX, donde X
representa el orden en que se creó.
Página 71 / 74
Web Creator Pro 6 - Guía de inicio rápido
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 arrastraría a cada página
sin tener que realizar la acción varias veces.
Si hace un bloque diferente que desea utilizar para otro sitio, la creación de bloques puede
hacer que ahorre mucho tiempo así como también lo ayudará a evitar errores de diseño.
Página 72 / 74
Web Creator Pro 6 - Guía de inicio rápido
Cómo volver a utilizar un bloque
Puede cambiar de página 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 botón Agregar a página mientras está seleccionado un bloque, todo
el bloque se agregará a la página conservando todos los elementos y sus propiedades.
Precauciones con el uso de bloques
Si no está seleccionado ningún elemento del contenedor, un nuevo bloque siempre se insertará
independiente de los demás elementos. Esta función es útil para los bloques más grandes que
cree para definir el diseño de la página.
Por otra parte, es posible que desee agregar bloques más pequeños a una página que ya tenga
un diseño definido. Para ello, puede crear un bloque que defina el diseño de la página y a
continuación, rellenar ese diseño de página con bloques más pequeños que dividirán 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 flotación, o en el centro de la página si este comportamiento está
desactivado.
En resumen: si se selecciona un solo elemento o no está seleccionado ninguno, el bloque se
insertará en la página independientemente de lo demás.
Si un contenedor, es decir, un Panel o un Cuadro está seleccionado, el bloque aparecerá dentro
del contenedor como elemento secundario.
Tamaño ideal de un bloque
Las plantillas que se proporcionan en Web Creator Pro 6 se basan en múltiplos de 240 píxeles de
ancho. Por lo que los bloques tendrán una anchura de 240, 480, 720 ó 960 píxeles. La altura
sigue el mismo principio y ofrece 16 combinaciones para la dimensión de un bloque.
En promedio, las páginas Web tienen un ancho de 960 píxeles. Por consiguiente, esta anchura se
ha definido en Web Creator Pro 6 para que sea el tamaño predeterminado de la página. Esto le
permite agregar cuatro bloques máximo en una sola fila; más que suficiente para agregar varios
elementos. Evidentemente, también puede crear bloques con una anchura más pequeña para
adaptarse a sus necesidades.
Como vimos en los capítulos referentes a los contenedores y la flotación, debe tener en cuenta
que la anchura de los contenedores se debe agregar a la anchura de su página. Asimismo, la
altura de los bloques debe ser la misma o reducida en múltiplos proporcionales.
Página 73 / 74
Web Creator Pro 6 - Guía de inicio rápido
Luminosidad y transparencia
Además del color, que se puede personalizar para la mayoría de los elementos,
Web Creator Pro 6 le permite administrar la Transparencia en la Luminosidad, no sólo en los
paneles y los cuadros, sino también en el texto, los botones, etc. Esto le permite superponer
efectos en otros elementos de la página como por ejemplo, imágenes, sin tener que
modificarlos directamente. Esto permite realizar muchas modificaciones del sitio Web
cambiando sólo 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.
Página 74 / 74