Guía de inicio rápido del usuario - lmsoft.com · Puede abrir la lista del campo Estilo, que le permite elegir de más de 170 combinaciones de colores. Es muy importante elegir

Guía de inicio rápido del

usuario

Web Creator Pro 6 - Guía de inicio rápido

Página 2 / 74

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 3 / 74

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 4 / 74

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 5 / 74

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 6 / 74

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 7 / 74

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 8 / 74

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 9 / 74

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 10 / 74

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 11 / 74

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 12 / 74

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 13 / 74


Página 14 / 74

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 15 / 74

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 16 / 74

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 17 / 74

Haga clic en Aceptar y volverá al editor.


Página 18 / 74

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 19 / 74

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 20 / 74

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 21 / 74

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 22 / 74

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 23 / 74

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 24 / 74

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 25 / 74

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 26 / 74

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 27 / 74

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 28 / 74

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 29 / 74

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 30 / 74

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 31 / 74

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 32 / 74

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 33 / 74

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 34 / 74

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 35 / 74

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 36 / 74

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 37 / 74

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 38 / 74

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 39 / 74

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 40 / 74

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 41 / 74

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 42 / 74

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 43 / 74

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 44 / 74

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 45 / 74

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 46 / 74

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 47 / 74

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 48 / 74

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 49 / 74

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 50 / 74

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 51 / 74

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 52 / 74

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 53 / 74

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 54 / 74

A continuación se presentan dos ejemplos de esquinas redondeadas, encabezados, pies de

página, anchos de borde, degradados y transparencias.


Página 55 / 74

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 56 / 74

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 57 / 74

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 58 / 74

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 59 / 74

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 60 / 74

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 61 / 74

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 62 / 74

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 63 / 74

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 64 / 74

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 65 / 74

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 66 / 74

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 67 / 74

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 68 / 74

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 69 / 74

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 70 / 74

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 71 / 74

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 72 / 74

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 73 / 74

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 74 / 74

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.

Documents

Guía de inicio rápido del usuario - lmsoft.com · Puede abrir la lista del campo Estilo, que le permite elegir de más de 170 combinaciones de colores. Es muy importante elegir