Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual Webcreator
Manual Webcreator
usuario
Tabla de materias
Introduccin a Web Creator Pro 6 .................................................................................................. 5
Gua de inicio rpido........................................................................................................................ 6
Apertura de una plantilla............................................................................................................. 6
Modificacin de una imagen ....................................................................................................... 9
Adicin de un elemento a la pgina .......................................................................................... 10
Introduccin a los elementos del Contenedor .......................................................................... 12
Introduccin al comportamiento de flotacin .......................................................................... 12
Modificacin del men .............................................................................................................. 14
Creacin de un vnculo a otra pgina ........................................................................................ 14
Introduccin a Bloques .............................................................................................................. 18
Uso de Bloques .......................................................................................................................... 21
Finalizacin del proyecto ........................................................................................................... 21
1.
2.
Metaetiquetas ................................................................................................................... 22
3.
Optimizar ........................................................................................................................... 23
2.
3.
Cargar ................................................................................................................................ 23
Pgina 4 / 74
Pgina 5 / 74
Pgina 6 / 74
El asistente ofrece 8 plantillas que contienen todos los elementos esenciales para realizar un
sitio Web completo, as como la opcin de empezar con una pgina en blanco.
En la parte superior de la ventana se encuentran cuatro fichas: Estilo, Pgina, Tema, y
Color/Vista previa. Posteriormente hablaremos de las dems fichas, pero por lo pronto
concentrmonos en stas.
Abajo se encuentran tres botones de opcin llamados "Versin 6", "Versin 5" y "Otras
versiones". Al hacer clic en ellos, podr acceder a las diferentes plantillas.
Entretanto, se han agregado nuevas funciones a Web Creator Pro 6, por lo que no se incluyen en
las plantillas anteriores. Se recomienda que se utilicen despus de dominar los conceptos
fundamentales de la utilizacin de Web Creator Pro 6 para que pueda sacar el mximo provecho
de estas plantillas.
Vuelva al botn de opcin Versin 6 y desplcese hacia abajo con la barra de la derecha.
En este ejemplo, utilizaremos Style 05 de la versin 6. Seleccinelo y haga clic en el botn
Siguiente o haga doble clic en la plantilla. Ahora debe haber pasado a la ficha Pgina.
Pgina 7 / 74
Pgina 8 / 74
Pgina 9 / 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 comprobacin Conservar relacin de
aspecto. Esto le permite cambiar el tamao de las imgines mientras se conservan la apariencia
y las proporciones originales. Sin embargo, existen casos en que desee ajustar las imgenes y
esto se hace desactivando el cuadro. Con esta opcin deshabilitada, aparecern nuevos
controles que le permiten cambiar el tamao libremente.
Pgina 10 / 74
Pgina 11 / 74
A la derecha de la ficha Inicio, se encuentra un botn para suprimir el formato y hacer que el
texto vuelva a su configuracin predeterminada en caso de ser necesario.
Ahora que ha modificado el texto, cambie el tamao del elemento con los controladores verdes
para que se ajuste al texto. Puede volver a hacer clic en el elemento Texto si necesita editar su
contenido.
Pgina 13 / 74
Pgina 14 / 74
Como hasta ahora no tiene ninguna otra pgina adems de la pgina de Inicio, cree una en un
abrir y cerrar de ojos haciendo clic en el botn Crear una nueva pgina. Volver a la ficha
Pgina, desde donde cre el proyecto, que presenta pginas que corresponden a su tema.
Contine y elija la pgina Productos; confirme la informacin de las pginas Tema y Color/Vista
previa y haga clic en Finalizar. Volver al selector de pginas donde puede seleccionar la pgina
que acaba de crear.
Pgina 15 / 74
Pgina 16 / 74
Pgina 17 / 74
Introduccin a Bloques
Si va a la pgina Productos mediante el vnculo que cre en el men, observar
que el logotipo aparece, pero no el que eligi. Sera muy til tener el mismo logotipo en la
misma pgina. Para hacerlo de manera rpida y eficaz, debe saber de qu se tratan los Bloques.
Anteriormente vimos que la imagen del logotipo forma parte de un Contenedor llamado Panel.
Justo arriba de la barra de herramientas Propiedades del extremo derecho de la interfaz,
encontrar la lista de elementos. Esta lista incluye cada elemento contenido en una pgina, en
Pgina 18 / 74
En la parte superior puede ver el primer Panel que mencionamos, denominado PanelHeader,
que contiene el logotipo, el texto de eslogan y otra imagen. Justo debajo de ese panel se
encuentra otro llamado PanelMenu, que contiene slo el men.
Haga clic en PanelHeader para resaltarlo, como se muestra en la imagen anterior. Observe cmo
tambin selecciona el elemento de la pgina. Ya que ha seleccionado un panel con elementos
secundarios, tambin stos se seleccionan aunque no estn visibles.
Haga clic en la ficha Bloques de la parte superior de la lista de elementos. Aparecer una lista de
Bloques predefinidos. Se pueden arrastrar a su pgina para agregar nuevo contenido
rpidamente. Vaya a la ficha Personalizado, que estar vaca.
Pgina 19 / 74
Pero hagamos que esto cambie. Una vez que el panel del editor an est seleccionado, al hacer
clic en el smbolo + se crear un nuevo bloque llamado Item1. Se generar una vista en
miniatura que muestra de qu est formado el bloque, y contiene lo siguiente: el panel, el
logotipo, el texto y la imagen.
Pgina 20 / 74
Uso de Bloques
Abra la ficha Pgina de la cinta. En la ficha Pgina, haga clic en el icono Administrador de
pginas. Aparecer una ventana que muestra las dos pginas que cre. Ver que a la derecha
hay varios iconos. El icono X le permite suprimir pginas, mientras que el segundo icono permite
cambiar su nombre y, el tercer icono se utiliza para duplicar las pginas. Vamos a utilizar el
primer icono que crea pginas. (La creacin de pginas tambin se puede realizar con el botn
Nueva pgina de la ficha Pgina). Una vez que aparezca el asistente, seleccione la opcin
"Pgina vaca" y haga clic en el botn Finalizar.
Con el panel Bloques an abierto, elija Item1 en la seccin Administrador de pginas y haga clic
en Agregar a pgina. El bloque se colocar automticamente en el extremo superior izquierdo
de la pgina. La pgina en s es un Contenedor del nivel ms alto y el Panel insertado tiene
activado el comportamiento Flotar, lo que provoca que encuentre su posicin de manera
automtica.
Guarde el proyecto con el icono de disquete de la barra de acceso rpido que se encuentra en la
parte superior izquierda de la interfaz. La barra de acceso rpido tambin contiene la lista de
exploradores que se utilizan para hacer pruebas y el icono de deshacer.
Pgina 21 / 74
Pgina 22 / 74
Pgina 23 / 74
El icono de lista de pginas del proyecto le permitir desplazarse, con un solo clic, a otra pgina
que se encuentre en la lista que se muestra.
Los exploradores que estn instalados en su equipo aparecern a la derecha de la barra de
acceso rpido. Web Creator Pro 6 agregar de manera automtica a esta lista, Internet Explorer,
Mozilla Firefox, Google Chrome, Opera y Safari de modo que pueda probar rpidamente su
pgina Web en el explorador seleccionado. Si utiliza un explorador diferente de los que se
mencionan arriba, puede agregarlo manualmente desde la ficha Web>seccin
Exploradores>Agregar que se encuentran en la cinta.
Pgina 24 / 74
Cinta
La cinta, que siempre est disponible, se encuentra en la parte superior, debajo de
la barra de acceso rpido. La cinta reemplaza el men original, lo que permite disponer de las
opciones en toda la longitud de la cinta. Las opciones estn clasificadas por tema con imgenes
que las representan, y texto para facilitar su exploracin.
Si no est familiarizado con el conjunto de aplicaciones Microsoft Office, esta estructura de los
mens puede confundirlo al principio, pero una vez que los haya utilizado unas cuantas veces,
podr encontrar de manera fcil lo que busca.
En el extremo derecho se encuentran 4 botones. El primer botn de la izquierda contrae la cinta
para ofrecer ms espacio. De manera predeterminada aparece una flecha hacia arriba y se
convierte en flecha hacia abajo para expandir la cinta contrada.
Los otros tres botones se utilizan para los proyectos. El segundo botn sirve para pasar al modo
de ventana, y el tercero se utiliza para cerrar el proyecto despus de preguntarle si desea
guardarlo.
Ahora vayamos a las diferentes fichas que se encuentran en la cinta.
Ficha Archivo
Aqu encontrar opciones que lo ayudarn a administrar los proyectos; Abrir proyecto, Nuevo
proyecto, Cerrar, Guardar, Guardar como, Imprimir y Salir.
La opcin Abrir ofrece dos posibilidades.
Pgina 25 / 74
Otra manera de abrir un proyecto es con la funcin Explorar. Se mostrar un rbol de carpetas,
la carpeta de proyectos de "Web Creator" predeterminada:
"C:/Usuarios/Nombre_de_usuario/Documentos/Web Creator".
Ficha Inicio
sta es la ficha con la que trabajar la mayor parte del tiempo.
Ficha Proyecto
Esta ficha se refiere al proyecto actual como un todo.
La primera seccin, Alineacin del explorador, le permite definir el rea que ocupar su sitio
Web en el explorador. Su sitio Web se puede colocar a la izquierda, derecha o en el centro de
cualquier explorador determinado.
La seccin Pgina de inicio define la primera pgina que un usuario de Internet ver una vez que
se conecte a su sitio Web.
Ficha Pgina
Esta ficha se refiere a la pgina actual que se est editando.
La primera seccin, Pginas, le permite cambiar las pginas, ya sea crendolas o cambiando a
una que ya haya creado.
El tercer icono, Administrador de pginas, abre una lista de las pginas que estn disponibles
dentro del proyecto con la opcin de mostrar u ocultar las vistas previas de las pginas y realizar
operaciones como el cambio de pgina, cambio de nombre, supresin, duplicado y creacin de
una pgina.
La seccin Actual contiene el icono Propiedades que le permite modificar opciones referentes a
la pgina actual desde la barra de herramientas Propiedades. Esto es til cuando la pgina est
llena de elementos que ocultan el fondo, lo que dificulta el acceso a sus propiedades.
Actualizar, vuelve a disear la pgina y sus elementos partir de la memoria almacenada. Volver
a cargar por una parte encuentra los elementos en su disco duro para volver a disear la pgina,
lo que har que Web Creator le pregunte si desea guardar la informacin.
Estas herramientas son tiles para suprimir informacin "perdida" que aparezca despus de
editar varias veces la pgina abierta y en equipos ms lentos.
Deteccin de dispositivos le permite elegir de modo sencillo la manera en que se visualiza la
pgina, en caso de que se consulte con un dispositivo mvil. Ser necesario que cree con
Pgina 27 / 74
Establecer una Contrasea evitar que otros usuarios puedan acceder a la pgina durante la
fase de prueba.
La seccin Colores le permite cambiar la paleta de colores actual eligiendo una de la lista. Los
elementos que utilicen colores de la paleta cambiarn de color en funcin de su seleccin.
El botn Configurar colores le permite modificar los colores de los elementos de la Plantilla que
utilice en la pgina.
Ficha Insertar
Esta ficha rene todos los elementos disponibles de Web Creator en un solo sitio.
Pgina 28 / 74
La seccin Comunes contiene los mismos elementos que siempre se encuentran disponibles en
la barra de herramientas Elementos y se clasifica de la misma manera.
La seccin Biblioteca le permite elegir archivos Multimedia proporcionados por Web Creator
Pro 6 directamente a partir de 4 categoras: Imgenes, Vdeos, Sonidos y animaciones Flash.
Pgina 29 / 74
Ficha Seleccin
Como su nombre lo indica, estas funciones se refieren a los elementos que estn seleccionados
en la pgina.
Las secciones Acciones y Orden Z son bastante sencillas y ya hemos abarcado los vnculos.
La seccin Grupo cuenta con funciones que le permitirn agregar o suprimir elementos de un
grupo o crear un grupo completamente nuevo con la posibilidad de agregarle elementos.
La seccin Elemento primario le permite transferir elementos seleccionados a un Contenedor
disponible en la pgina o crear un elemento del Contenedor (Panel o Cuadro) para ese
propsito determinado. Se hablar con ms detalle de los contenedores en la seccin Elementos
del Contenedor: cuadros y paneles.
Pgina 30 / 74
Ficha Formato
Esta ficha ofrece mltiples opciones para alinear uno o varios elementos, y en trminos de
comportamiento, est vinculada con los conceptos Elemento primario/Contenedor (Cuadro,
Panel o Pgina).
Para obtener informacin ms detallada sobre este tema, consulte la seccin Alineacin y
posicionamiento.
Ficha Web
Esta ficha contiene todas las funciones referentes a la finalizacin de su sitio Web y su activacin
en lnea.
La primera seccin, Exploradores, muestra los exploradores que estn instalados en su equipo, y
se pueden utilizar para ver la apariencia que tendr su sitio Web.
Los iconos que se encuentran en el extremo derecho de esta seccin le permiten agregar,
suprimir o modificar una referencia a un explorador que est instalado en su equipo, pero que
Web Creator Pro 6 no haya reconocido.
En la seccin Pgina, Cdigo personalizado le permite incluir cdigo JavaScript o HTML con un
editor de texto, en la pgina Web actual.
Peso de pgina calcula de qu manera afectar cada elemento de su pgina Web el tiempo de
carga de la misma y le informa cunto tardar un usuario con una conexin de 256 Kb/seg
descargar y ver su pgina.
La seccin Referenciacin cuenta con cuatro herramientas que le ayudan a hacer que su sitio
destaque en los resultados de los motores de bsqueda.
Metaetiquetas proporciona descripciones y palabras clave a los motores de bsqueda. Usted
mismo puede crear las etiquetas o simplemente proporcionar la informacin a Web Creator y
permitir que ste las cree para usted.
Pgina 31 / 74
Ficha Herramientas
Esta ficha le permite acceder a recursos adicionales que vienen con Web Creator Pro 6.
Pgina 32 / 74
Ficha Ayuda
Las funciones de esta ficha son muy fciles de utilizar. Recuerde que para utilizarlas, necesita
una conexin a Internet.
Insercin de un elemento
Para insertar un elemento en la pgina actual, basta con hacer clic en el icono/nombre
correspondiente para que aparezca en medio de la pgina en la parte superior de la capa.
La insercin de elementos en la pgina nunca afectar los elementos seleccionados de la misma.
El agrupamiento y la insercin en elementos primarios nunca ocurrirn sin que lo haya elegido.
Para obtener ms informacin sobre los elementos, consulte los siguientes captulos:
Elementos del Contenedor: cuadros y paneles, Creacin y uso de Bloques y Grupos.
Pgina 33 / 74
Seccin Comunes
Elemento Texto
A partir del momento en que inserta el elemento de texto, puede empezar a escribir texto,
modificar su apariencia y agregar vnculos parciales o de texto completo (botn Vnculo de la
cinta de la ficha Inicio),etc.
Los hipervnculos se pueden configurar muy fcilmente mediante el botn Vnculo de la cinta.
Se pueden aplicar luminosidad y transparencia de fondo al texto a partir de efectos visuales
sorprendentes (barra de herramientas Propiedades>ficha Elementos>Color de fondo).
Pgina 34 / 74
Elemento Imagen
Al crear una Imagen se crea un rectngulo con marcadores de posicin. Para modificar una
imagen utilice la ficha Elementos de la barra de herramientas Propiedades y utilice uno de los 4
iconos que aparecen junto al campo de texto. El primer icono le permite acceder a las imgenes
desde la Biblioteca de Web Creator 6. El segundo le permite buscar una imagen del equipo. El
tercero le permite vincular una imagen que se encuentre en un sitio Web. (Necesitar conocer la
ruta de acceso completa a la imagen para que funcione).
Ampliar imagen al hacer clic es una funcin muy til para ahorrar espacio. Si desea
colocar una imagen muy grande en su pgina, puede reducir su tamao para que quepa en la
pgina y ofrezca la posibilidad de verla de tamao completo haciendo clic en ella (incluso puede
seleccionar qu tanto se debe ampliar).
Pgina 35 / 74
Elemento Botn
Una vez que inserta un botn, puede hacer doble clic en ste para cambiar el texto que muestra,
o tambin puede hacerlo en el campo de texto que se proporciona en la barra de herramientas
Propiedades. En la ficha Elementos puede cambiar la apariencia de los diferentes estados por los
que pasa el botn: En relieve, Presionado y Puntero del mouse. Tambin se muestra una vista
previa de su apariencia en la parte inferior.
Elemento Men
Al agregar un men, aparecer un icono cuadrado que simboliza un men. Para rellenar el
men, vaya a la barra de herramientas Propiedades y, a continuacin, al rea Elementos y haga
clic en Agregar. El centro se definir con respecto al campo de texto donde podr agregar un
ttulo para dicha seccin. Puede agregar submens siguiendo el mismo mtodo, y agregar
vnculos utilizando el campo que est debajo del campo de ttulo.
Pgina 36 / 74
Seccin Diseo
Elementos Panel y Cuadro
El elemento IFrame le permite incluir toda una pgina Web dentro de otra pgina,
que sea suya o que la haya encontrado en Internet. Puede cambiar el tamao y color de este
elemento, as como su nombre. Cuando lo agrega a la pgina, ver una imagen con marcadores
de posicin que representa el sitio donde se mostrar la pgina as como sus dimensiones
actuales. Puede elegir la pgina que se mostrar con los iconos de la ficha Elementos de la barra
de herramientas Propiedades.
Elemento Acorden
Pgina 37 / 74
Algunas diferencias entre los elementos Acorden y Ficha son que el elemento Acorden slo
muestra pginas internas y el men es animado y est apilado.
Elementos Etiqueta(H1H6)
Pgina 38 / 74
Elemento Emergente
Seccin Sociales
Elemento Redes sociales
Seccin Multimedia
Elemento Galera
El elemento Galera le permite mostrar una recopilacin de imgenes en su pgina Web. La vista
inicial puede ser en forma de mosaico que muestra una recopilacin de pequeas miniaturas, o
una presentacin que muestra las imgenes una por una. Recuerde que esto slo afecta la
visualizacin inicial y el parmetro de mosaico cambiar a formato de presentacin una vez que
un visitante seleccione una imagen.
Pgina 40 / 74
Gracias al elemento Google Map puede agregar un mapa interactivo a su sitio Web
que represente cualquier direccin determinada. Con slo agregar una direccin en la ficha
Elemento de la barra de herramientas Propiedades, podr tener acceso al Mapa, Satlite y
Street View del rea.
Pgina 41 / 74
Seccin Datos
Elemento PayPal
Pgina 42 / 74
Elemento Contador
El elemento Contador le permite contar cuntos usuarios han visitado su pgina. Como existen
diferentes contadores, necesitar configurar el contador deseado. Usted puede escribir el
cdigo si est suficientemente familiarizado con ste, pero existen muchos fragmentos de
cdigo JavaScript disponibles en Internet listos para utilizarse.
Lista de elementos
La lista de elementos se encuentra en el extremo derecho de la interfaz, justo
arriba de la barra normal de estilo.
Pgina 43 / 74
Esta lista se puede separar en cualquier momento. Para ello, basta con hacer doble clic en la
barra que se encuentra en la parte superior y podr desplazarla como desee. Para que vuelva a
su posicin original, vuelva a hacer doble clic en la barra superior. La lista de elementos tiene
dos fichas: Elementos y Bloques.
Pgina 44 / 74
Ficha Elemento
Dentro de la ficha Elementos, encontrar una lista de cada elemento contenido en
la pgina actual organizado en una estructura de rbol. La estructura muestra su sitio respectivo
en trminos de orden, creacin, relaciones y dependencias con los dems elementos y si
pertenecen a o contienen otros elementos (este tema se abarcar en el captulo Elementos del
Contenedor: cuadros y paneles).
Al utilizar los iconos que estn junto a cada nombre de elemento, puede ocultar o mostrar los
elementos, as como contraer o expandir el contenido del Contenedor.
Bsqueda de un elemento
El rea Buscar le permitir encontrar fcilmente un elemento en base a su nombre o incluso
parte de su nombre. Al hacer clic en la flecha, se buscarn los resultados y los elementos
encontrados se resaltarn en rojo en la lista de elementos y tambin se seleccionarn en la
pgina.
Cambio de orden de los elementos
Justo a la derecha de la funcin de bsqueda, se encuentra Orden Z seguido de dos flechas
verticales. Esta funcin se encarga del orden de los elementos de la pgina. Los elementos estn
clasificados de manera predeterminada por orden de creacin; se puede cambiar la clasificacin
si se agrega a un elemento primario (ya que los elementos del elemento primario se pueden
haber creado antes de dicho elemento). Las flechas verticales le permiten cambiar el Orden Z de
un elemento de la pgina.
Visualizacin de elementos y grupos
Arriba de la lista se encuentra un cuadro desplegable, Vista jerrquica de los elementos de la
pgina. Si hace clic en esta lista, puede elegir la opcin Ver grupos de elementos y su
contenido.
Pgina 45 / 74
Bsqueda de grupos
Al igual que con los elementos, el campo de bsqueda le permite buscar de manera sencilla
grupos en funcin de su nombre o parte de ste. Al hacer clic en la flecha, se buscarn los
resultados y los elementos encontrados se resaltarn en rojo en la lista de elementos y tambin
se seleccionarn en la pgina.
Ficha Bloques
Al hacer clic en la ficha Bloques, aparecer una nueva rea con dos nuevas fichas
llamadas: Biblioteca y Personalizado.
Pgina 46 / 74
Pgina 47 / 74
Ficha Elemento
En funcin del elemento que est seleccionado, encontrar herramientas para modificar
elementos que van desde cambiar su color hasta insertar pginas.
Ficha Opciones
En esta ficha puede cambiar el nombre del elemento seleccionado. Para una imagen puede
utilizar el campo Alt= que usan los motores de bsqueda para reemplazar una imagen faltante o
para usuarios que han deshabilitado las imgenes en su explorador. Incluso puede cambiar el
comportamiento de los elementos al cargar la pgina; por ejemplo, efectos de apariencia.
Pgina 48 / 74
Ficha Acciones
Esta ficha le permitir agregar un elemento interactivo a sus elementos. Le dar la posibilidad de
hacer el seguimiento de los clics con el mouse, as como cuando el mouse accede a un elemento
o sale de ste. En esta pgina puede elegir un host de elementos para que se vincule a estas
acciones.
Ficha Vnculo
La ficha Vnculo es muy fcil de utilizar. Le permitir definir vnculos a pginas de Internet o
pginas de su proyecto. Tambin existen otras opciones que puede habilitar, como redireccin
automtica y dnde se abrir el vnculo.
Ficha Posicin
Esta ficha rene toda la informacin sobre un elemento referente a su posicin en la pgina y su
tamao. En esta ficha es donde puede definir el Comportamiento para Flotar y Abajo (consulte
el captulo Comportamientos Flotar y Abajo).
Ficha Propiedades
Esta ltima ficha contiene propiedades que comparten todos los elementos y se utiliza para
modificar estas propiedades en una seleccin de por lo menos 2 elementos simultneamente.
Se recomienda que se utilicen las otras fichas para cambiar estos valores cuando se seleccione
un solo elemento.
Pgina 49 / 74
Pgina 50 / 74
Pgina 52 / 74
Cuadros: por otra parte, se pueden peresonalizar muchos de sus parmetros desde el momento
que se crean; tienen esquinas redondeadas, un borde en color, una sombra paralela y un color
de fondo. Mientras que los paneles inicialmente son transparentes y slo se les puede asignar
un color de fondo.
Los cuadros tambin pueden tener un encabezado y pie de pgina, cada uno con su propio color
o incluso transparencia. Esta funcionalidad le permite colocar texto en ellos o mostrar los
elementos subyacentes.
Pgina 53 / 74
Pgina 54 / 74
Cuadrcula
Se puede acceder a todos los parmetros mediante la ficha Herramientas.
Desde esta ficha puede personalizar por completo la manera en que funciona la cuadrcula de
forma predeterminada en Web Creator: puede hacerla Visible o no visible, Activa o inactiva,
cambiar el color de la cuadrcula con la herramienta de seleccin de colores, as como el espacio
de la cuadrcula (tanto el Alto como el Ancho).
Pgina 55 / 74
Guas de posicionamiento
En cuanto empiece a desplazar un elemento, Web Creator Pro 6 mostrar lneas
que sirven de gua y que le permiten alinear el elemento seleccionado con respecto a otros
elementos de la pgina. Esta funcin puede ser extremadamente til en muchas ocasiones en
que necesite hacer alineaciones perfectas en una pgina que contenga varios elementos.
Estas lneas de gua tambin se activan cuando cambia el tamao.
A continuacin se muestra un elemento que se est desplazando:
Pgina 56 / 74
La primera seccin de la ficha Formato se utiliza para colocar uno o varios elementos no con
respecto a otro, sino con respecto al contenedor donde se encuentra el elemento (Pgina,
Panel, Cuadro).
El ejemplo siguiente muestra la alineacin de un elemento en un cuadro, primero
Horizontalmente, luego Verticalmente, seguida de la combinacin de ambas, es decir, en el
Centro.
Pgina 57 / 74
Al haber seleccionado varios elementos, uno de los ellos tendr controladores verdes mientras
que los dems sern azules. El elemento seleccionado con los controladores verdes es la
seleccin principal y sirve de punto de referencia para varias funciones de formato.
Si no obtiene el resultado deseado despus de haber alineado un grupo de elementos, proceda
de la siguiente manera: cancele la alineacin, elija la tcnica de alineacin de los elementos y, a
continuacin, haga clic en el elemento que ser el punto de referencia. A continuacin se
seleccionar como punto de referencia y entonces podr realizar la alineacin.
Despus de un periodo de tiempo corto encontrar instintivamente el elemento al que se hace
referencia.
Pgina 58 / 74
Pgina 59 / 74
Restricciones de posicionamiento
Los elementos que tienen definido el atributo de flotacin se colocarn de acuerdo con el
espacio disponible en la parte superior del contenedor. Si el elemento es demasiado grande, no
cambiar su tamao y se colocar en algn sitio.
Esto significa que si un elemento se coloca junto a otro se debe colocar en su sitio. De lo
contrario, buscar sitio en la lnea siguiente. Se ajustar de acuerdo con el tipo de flotacin,
derecha o izquierda, que se haya elegido. El objeto flotante entonces se colocar junto al primer
elemento que encuentre. En la imagen siguiente, se presentan tres botones con el parmetro de
flotacin a la izquierda con los anchos proporcionales al tamao del contenedor. Por lo tanto,
estn perfectamente alineados.
Pgina 60 / 74
Pgina 61 / 74
Una vez ms se ha reducido la anchura de la segunda imagen, lo que provoca que el cuarto
botn se desplace hacia la lnea siguiente. En este ejemplo el botn tiene configurado el
parmetro hacia la izquierda y pasa al final, pero se alinea con el borde del segundo botn.
La ltima imagen muestra lo que sucede si se vuelve a reducir el tamao del panel. El cuarto
botn se coloca directamente debajo del segundo botn alineado al borde del primer botn.
En la imagen siguiente, se ha vuelto a reducir el tamao del panel.
El primer botn afectado por este cambio es el tercer botn. Como ya no cabe en su sitio
anterior, se desplaza debajo del segundo botn y se alinea con el primer botn. Y como el botn
Pgina 62 / 74
Sin embargo, si cambia el tamao del cuarto botn para que quepa en el espacio que est a la
derecha del tercer botn, entonces se desplazar hacia arriba, a la derecha de este botn.
En los tres ejemplos siguientes, cualquiera que sea la altura o anchura de los elementos 1, 2 y 3,
el orden ser el mismo: cada elemento intenta permanecer a la derecha de su elemento
anterior o debajo de ste.
Pgina 63 / 74
Pgina 64 / 74
Pgina 65 / 74
Pgina 66 / 74
Esta pgina contiene dos logotipos con una imagen y un men. El cuerpo de la pgina
contiene cuatro paneles con la misma anchura, pero diferente altura. En realidad se
trata de Bloques que se han medido cuidadosamente.
Pgina 67 / 74
Comportamiento Abajo
El comportamiento Abajo funciona en conjunto con el comportamiento Flotar. Este
comportamiento indica a un objeto flotante que siempre se coloque en la lnea siguiente en
lugar de alinearse junto a otro elemento flotante. Por ello, aunque haya espacio para colocar el
elemento flotante, sin importar si flota hacia la izquierda o derecha, se colocar debajo de los
Pgina 68 / 74
Uso de grupos
Los grupos han existido desde hace tiempo en Web Creator y es posible que se
supriman debido a la introduccin de los contenedores. Los grupos son una coleccin simblica
de elementos que se pueden utilizar para modificar elementos mltiples. A menudo se utilizaron
para pertenecer a un grupo de elementos que no deseaba modificar por equivocacin y
necesitaba crear una jerarqua de orden Z entre los elementos. Con la introduccin de los
Contenedores, los elementos ya estn agrupados segn su posicionamiento en la pgina.
Puede definir un grupo seleccionando varios elementos y abriendo el men de contexto con el
botn secundario del mouse. A continuacin, seleccione Agregar a Grupo y cree un nuevo grupo
o agrguelo a uno que ya exista.
Para acceder a las propiedades de un grupo, haga clic en Vista jerrquica de los elementos de la
pgina que se encuentra en la parte superior de la lista de elementos y seleccione Ver grupos
de elementos y su contenido.
Pgina 69 / 74
Con los iconos +/- puede contraer o expandir la lista de elementos o incluso bloquear grupos y
elementos con el smbolo de bloqueo.
En la ficha Elementos se puede cambiar el nombre de un grupo, as como modificar su
visibilidad en el explorador o, incluso agregar y suprimir elementos.
Si selecciona un elemento del grupo, puede acceder directamente a sus propiedades, acciones,
etc.
Pgina 70 / 74
Uso de Bloques
Introduccin a Bloques
Bloques son la evolucin de los Grupos en Web Creator. Un bloque es una
herramienta organizativa que le permite almacenar un conjunto de elementos con la finalidad
de utilizarlos posteriormente en otra pgina o proyecto.
Creacin de un bloque
Incluso si no es indispensable, le recomendamos encarecidamente que cree un bloque en
funcin de un contenedor para que el reposicionamiento del bloque sea ms sencillo
posteriormente. De la misma forma, si los elementos que estn dentro de un bloque que est
almacenado en un contenedor, como un panel o un cuadro, entonces puede aplicar un
comportamiento de flotacin a un contenedor, lo que le permitir el reposicionamiento
automtico del bloque en su pgina.
A continuacin se presenta un ejemplo. Cree un panel en su pgina y configure el parmetro
Flotar con la barra de herramientas Propiedades. Despus, inserte elementos como por
ejemplo, una imagen, texto y una red social.
Una vez que lo haya hecho, como se muestra en la imagen anterior, puede guardarlos como un
bloque para su uso futuro.
Para ello, seleccione el cuadro o el panel que contiene todos los elementos haciendo clic en un
rea fuera de los elementos, uno de sus bordes o su nombre en la lista de elementos. En esta
lista, abra la ficha Bloques. A continuacin, seleccione la ficha Personalizado y haga clic en el
smbolo +. Inmediatamente ver que aparece en la ventana con el ttulo ItemX, donde X
representa el orden en que se cre.
Pgina 71 / 74
Y eso es todo lo que se tiene que hacer. Puede cambiar su nombre si hace doble clic en ste.
Si fuera a crear un encabezado almacenado en un bloque, entonces lo arrastrara a cada pgina
sin tener que realizar la accin varias veces.
Si hace un bloque diferente que desea utilizar para otro sitio, la creacin de bloques puede
hacer que ahorre mucho tiempo as como tambin lo ayudar a evitar errores de diseo.
Pgina 72 / 74
Pgina 73 / 74
Luminosidad y transparencia
Adems del color, que se puede personalizar para la mayora de los elementos,
Web Creator Pro 6 le permite administrar la Transparencia en la Luminosidad, no slo en los
paneles y los cuadros, sino tambin en el texto, los botones, etc. Esto le permite superponer
efectos en otros elementos de la pgina como por ejemplo, imgenes, sin tener que
modificarlos directamente. Esto permite realizar muchas modificaciones del sitio Web
cambiando slo unos cuantos elementos.
Utilice la ficha Elemento que se encuentra en la barra de herramientas Propiedades para un
elemento seleccionado. Desde este punto, seleccione la paleta de colores. En la parte inferior de
la ventana que aparece, puede modificar tanto la Luminosidad como la Transparencia del color
seleccionado.
Intente con varias combinaciones para ver los resultados que dar en un elemento, en especial
en casos en que los elementos se sobrepongan.
Pgina 74 / 74