Professional Documents
Culture Documents
Tabla de materias
Introduccin a Web Creator Pro 6 .................................................................................................. 5 Gua de inicio rpido........................................................................................................................ 6 Apertura de una plantilla............................................................................................................. 6 Modificacin de una imagen ....................................................................................................... 9 Adicin de un elemento a la pgina .......................................................................................... 10 Introduccin a los elementos del Contenedor .......................................................................... 12 Introduccin al comportamiento de flotacin .......................................................................... 12 Modificacin del men .............................................................................................................. 14 Creacin de un vnculo a otra pgina ........................................................................................ 14 Introduccin a Bloques .............................................................................................................. 18 Uso de Bloques .......................................................................................................................... 21 Finalizacin del proyecto ........................................................................................................... 21 1. 2. 3. Etiquetas de ttulo H1 a H6................................................................................................ 22 Metaetiquetas ................................................................................................................... 22 Google Analytics ................................................................................................................ 22
Mapa del sitio ............................................................................................................................ 22 Carga del sitio Web.................................................................................................................... 23 1. 2. 3. Optimizar ........................................................................................................................... 23 Volver a generar ................................................................................................................ 23 Cargar ................................................................................................................................ 23
Presentacin detallada de la interfaz ............................................................................................ 23 Barra de acceso rpido .............................................................................................................. 24 Cinta........................................................................................................................................... 25 Ficha Archivo ......................................................................................................................... 25 Ficha Inicio ............................................................................................................................. 26 Ficha Proyecto ....................................................................................................................... 27 Ficha Pgina ........................................................................................................................... 27 Actualizar ................................................................................................................................... 27 Deteccin de dispositivos .......................................................................................................... 27 Ficha Insertar ......................................................................................................................... 28 Pgina 2 / 74
Web Creator Pro 6 - Gua de inicio rpido Ficha Seleccin ...................................................................................................................... 30 Ficha Formato ........................................................................................................................ 31 Ficha Web .............................................................................................................................. 31 Peso de pgina........................................................................................................................... 31 Metaetiquetas ........................................................................................................................... 31 Optimizar ................................................................................................................................... 32 Ficha Herramientas ............................................................................................................... 32 Ficha Ayuda ........................................................................................................................... 33 Barra de herramientas Elementos............................................................................................. 33 Insercin de un elemento...................................................................................................... 33 Propiedades de los elementos .............................................................................................. 34 Jerarqua de los elementos.................................................................................................... 34 Seccin Comunes................................................................................................................... 34 Seccin Diseo....................................................................................................................... 37 Seccin Sociales ..................................................................................................................... 39 Seccin Multimedia ............................................................................................................... 40 Seccin Datos ........................................................................................................................ 42 Lista de elementos..................................................................................................................... 43 Ficha Elemento ...................................................................................................................... 45 Ficha Bloques ......................................................................................................................... 46 Barra de herramientas Propiedades ......................................................................................... 48 Ficha Elemento ...................................................................................................................... 48 Ficha Opciones....................................................................................................................... 48 Ficha Acciones ....................................................................................................................... 49 Ficha Puntero del mouse ....................................................................................................... 49 Ficha Vnculo.......................................................................................................................... 49 Ficha Posicin ........................................................................................................................ 49 Ficha Propiedades ................................................................................................................. 49 Elementos del Contenedor: cuadros y paneles ............................................................................. 49 Contenedores ............................................................................................................................ 49 Diferencias entre paneles y cuadros ......................................................................................... 50 Creacin de un diseo con contenedores ................................................................................. 50 Pgina 3 / 74
Web Creator Pro 6 - Gua de inicio rpido Adicin de elementos a un contenedor .................................................................................... 50 Adicin de un elemento a un contenedor............................................................................. 50 Adicin de varios elementos a un contenedor...................................................................... 51 Bloques ...................................................................................................................................... 52 Propiedades de los cuadros y paneles ...................................................................................... 52 Paneles ...................................................................................................................................... 52 Cuadros...................................................................................................................................... 53 Herramientas de alineacin y posicionamiento ............................................................................ 55 Cuadrcula .................................................................................................................................. 55 Guas de posicionamiento ......................................................................................................... 56 Funciones de la ficha Formato .................................................................................................. 56 Comportamientos Flotar y Abajo .................................................................................................. 58 Entendimiento de la funcin de flotacin ................................................................................. 59 Restricciones de posicionamiento ............................................................................................. 60 Mximo provecho del comportamiento de flotacin ............................................................... 64 Adicin de un elemento flotante .............................................................................................. 65 Desplazamiento de elementos de flotacin .............................................................................. 65 Usos del comportamiento de flotacin ..................................................................................... 66 Comportamiento Abajo ............................................................................................................. 68 Uso de grupos ................................................................................................................................ 69 Uso de Bloques .............................................................................................................................. 71 Introduccin a Bloques .............................................................................................................. 71 Creacin de un bloque .............................................................................................................. 71 Cmo volver a utilizar un bloque .............................................................................................. 73 Precauciones con el uso de bloques ......................................................................................... 73 En resumen:............................................................................................................................... 73 Tamao ideal de un bloque ....................................................................................................... 73 Luminosidad y transparencia ........................................................................................................ 74
Pgina 4 / 74
Ver este smbolo a lo largo de esta gua. Indica una nueva funcin o una mejora nica en Web Creator Pro 6.
Pgina 5 / 74
La seccin Presentacin detallada de la interfaz presentar una explicacin completa de los elementos que se presentan en la imagen.
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
Web Creator Pro 6 - Gua de inicio rpido Contiene varios campos en la parte superior de la ventana. Nombre de pgina se refiere al nombre "interno" de esa pgina; el nombre de archivo de base. Por otra parte, Ttulo es lo que se mostrar en la parte superior de un explorador Web. En el campo Idioma, tiene la opcin de cambiar el idioma de su sitio Web. El valor predeterminado es el mismo que el del sistema operativo que est utilizando. En el rea principal tiene la posibilidad de seleccionar una pgina en blanco y varios diseos de pgina. Las plantillas A y B son bastante sencillas y slo contienen unos cuantos bloques vacos. Las pginas Inicio y Presentacin estn constituidas principalmente de texto y se adaptan ms a sitios Web de negocios. Mientras que, las pginas Producto y Productos contienen ms detalles con un bloque de imgenes y bloques combinados que contienen texto y una imagen, que se prestan ms para mostrar galeras y listas que requieren una estructuracin uniforme. El nombre y la carpeta del proyecto se encuentran en la parte inferior de la ventana. Si hace clic en el icono del campo de carpeta, podr ver la ruta de acceso completa, que de manera predeterminada es Web Creator. En el sistema operativo Windows, la carpeta Web Creator se encuentra en Documentos, pero puede cambiarla si desea guardar su proyecto en otro sitio. Para ello, elija la pgina Inicio. Pasar a la pgina Tema, que debe estar vaca. Esta ficha tiene la funcin de agregar pancartas o fondos a pginas, pero se ha deshabilitado. Las nuevas opciones como la luminosidad y transparencia de la imagen permiten realizar efectos sorprendentes que no estaban disponibles en versiones anteriores. (Consulte el captulo Luminosidad y transparencia). Pase a la ficha siguiente, que es la ltima: Color/Vista previa. Desde aqu puede cambiar la paleta, que es el conjunto de colores que se aplicarn en todas sus pginas. El campo Estilo de la parte superior izquierda representa la apariencia general que tendrn los elementos de la pgina. Puede abrir la lista del campo Estilo, que le permite elegir de ms de 170 combinaciones de colores. Es muy importante elegir una paleta adecuada al tipo de sitio Web que est creando y que refleje la idea que hay detrs de ella. En este ejemplo, elegimos el estilo Honolulu. Ms abajo puede ver el nombre de archivo de la paleta, as como los colores que la constituyen. Es importante saber que puede modificar los colores, guardar, duplicar y suprimir cualquier paleta determinada con los botones que se encuentran a la derecha de la lista de colores. Termine con las selecciones y haga clic en el botn Finalizar. Aparecer momentneamente un cuadro de dilogo pequeo con una barra de progreso mientras se constituye la primera pgina.
Pgina 8 / 74
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
Web Creator Pro 6 - Gua de inicio rpido Una vez que haya introducido texto, ser fcil personalizarlo. Seleccione texto y desde la ficha Inicio de la cinta, puede cambiar la fuente, su tamao, alineacin, sangra e incluso agregar un vnculo. Seleccionemos la fuente Brush Script MT el tamao 40 para una mejor legibilidad.
Pgina 11 / 74
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
Web Creator Pro 6 - Gua de inicio rpido Por lo general debe introducir una descripcin que servir de recordatorio para saber con qu est vinculado. A continuacin, elija una de las diferentes opciones de vnculo segn sus necesidades. Elija la primera opcin de la seccin Crear un vnculo a: una nueva pgina o una existente.
Como hasta ahora no tiene ninguna otra pgina adems de la pgina de Inicio, cree una en un abrir y cerrar de ojos haciendo clic en el botn Crear una nueva pgina. Volver a la ficha Pgina, desde donde cre el proyecto, que presenta pginas que corresponden a su tema. Contine y elija la pgina Productos; confirme la informacin de las pginas Tema y Color/Vista previa y haga clic en Finalizar. Volver al selector de pginas donde puede seleccionar la pgina que acaba de crear.
Pgina 15 / 74
Despus de hacer clic en el botn Aceptar, aparecer el nombre de la pgina en el campo de vnculo de la ficha Vnculo.
Pgina 16 / 74
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
Web Creator Pro 6 - Gua de inicio rpido una estructura de rbol, que muestra la relacin de los elementos entre s, as como el orden en que se crearon. Ajuste el tamao del rea para que pueda ver claramente los 5 primeros elementos que contiene, por ejemplo:
En la parte superior puede ver el primer Panel que mencionamos, denominado PanelHeader, que contiene el logotipo, el texto de eslogan y otra imagen. Justo debajo de ese panel se encuentra otro llamado PanelMenu, que contiene slo el men. Haga clic en PanelHeader para resaltarlo, como se muestra en la imagen anterior. Observe cmo tambin selecciona el elemento de la pgina. Ya que ha seleccionado un panel con elementos secundarios, tambin stos se seleccionan aunque no estn visibles. Haga clic en la ficha Bloques de la parte superior de la lista de elementos. Aparecer una lista de Bloques predefinidos. Se pueden arrastrar a su pgina para agregar nuevo contenido rpidamente. Vaya a la ficha Personalizado, que estar vaca.
Pgina 19 / 74
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
Web Creator Pro 6 - Gua de inicio rpido 1. Etiquetas de ttulo H1 a H6: se pueden utilizar durante la creacin de sitios Web. Estn disponibles en la barra de herramientas Elementos, en la seccin Diseo. Esto significa que se pueden personalizar al igual que cualquier otro elemento desde la barra de herramientas Propiedades, pero tambin desde la ficha Web de la seccin Referenciacin. En la ficha Web>Referenciacin se encuentran otras tres herramientas a su disposicin: 2. Metaetiquetas: invisibles en el sitio Web e integradas al cdigo de su pgina/sitio Web. Tambin son etiquetas de SEO (Optimizacin de motores de bsqueda). 3. Google Analytics: es una herramienta especfica de Google que tambin se basa en etiquetas. Web Creator puede generarlas para usted. Mapa del sitio: la informacin que se genera toma como base la estructura y programaciones de actualizaciones previstas que los motores de bsqueda recuperarn de su sitio Web. Se puede encontrar ms informacin sobre este tema en el captulo que abarca la ficha Web.
Pgina 22 / 74
Pgina 23 / 74
Si ha tenido la oportunidad de familiarizarse con las versiones ms recientes de Microsoft Office, se va a sentir como en su casa con Web Creator Pro 6 ya que comparten principios de organizacin similares.
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
Web Creator Pro 6 - Gua de inicio rpido Se tiene la opcin de cargar un proyecto que se ha abierto recientemente. Nota: esta lista se actualiza slo despus de haber cerrado Web Creator Pro 6.
Otra manera de abrir un proyecto es con la funcin Explorar. Se mostrar un rbol de carpetas, la carpeta de proyectos de "Web Creator" predeterminada: "C:/Usuarios/Nombre_de_usuario/Documentos/Web Creator".
Ficha Inicio
sta es la ficha con la que trabajar la mayor parte del tiempo.
Contiene funciones referentes a la edicin: Deshacer, Cortar, Copiar, Pegar, Eliminar y Seleccionar todo. Las dems funciones se encargan de fuentes, formato de pgina, alineacin, listas con vietas y nmeros, sangra y gestin de vnculos. La ltima opcin suprime por completo el formato del texto y lo convierte en texto sin formato no editado. Pgina 26 / 74
Ficha Proyecto
Esta ficha se refiere al proyecto actual como un todo.
La primera seccin, Alineacin del explorador, le permite definir el rea que ocupar su sitio Web en el explorador. Su sitio Web se puede colocar a la izquierda, derecha o en el centro de cualquier explorador determinado. La seccin Pgina de inicio define la primera pgina que un usuario de Internet ver una vez que se conecte a su sitio Web.
Ficha Pgina
Esta ficha se refiere a la pgina actual que se est editando.
La primera seccin, Pginas, le permite cambiar las pginas, ya sea crendolas o cambiando a una que ya haya creado. El tercer icono, Administrador de pginas, abre una lista de las pginas que estn disponibles dentro del proyecto con la opcin de mostrar u ocultar las vistas previas de las pginas y realizar operaciones como el cambio de pgina, cambio de nombre, supresin, duplicado y creacin de una pgina. La seccin Actual contiene el icono Propiedades que le permite modificar opciones referentes a la pgina actual desde la barra de herramientas Propiedades. Esto es til cuando la pgina est llena de elementos que ocultan el fondo, lo que dificulta el acceso a sus propiedades. Actualizar, vuelve a disear la pgina y sus elementos partir de la memoria almacenada. Volver a cargar por una parte encuentra los elementos en su disco duro para volver a disear la pgina, lo que har que Web Creator le pregunte si desea guardar la informacin. Estas herramientas son tiles para suprimir informacin "perdida" que aparezca despus de editar varias veces la pgina abierta y en equipos ms lentos. Deteccin de dispositivos le permite elegir de modo sencillo la manera en que se visualiza la pgina, en caso de que se consulte con un dispositivo mvil. Ser necesario que cree con Pgina 27 / 74
Web Creator Pro 6 - Gua de inicio rpido anticipacin una versin de dicha pgina para dispositivos mviles y la seleccione como opcin favorita de visualizacin para exploradores de dispositivos mviles.
Establecer una Contrasea evitar que otros usuarios puedan acceder a la pgina durante la fase de prueba.
La seccin Colores le permite cambiar la paleta de colores actual eligiendo una de la lista. Los elementos que utilicen colores de la paleta cambiarn de color en funcin de su seleccin. El botn Configurar colores le permite modificar los colores de los elementos de la Plantilla que utilice en la pgina.
Ficha Insertar
Esta ficha rene todos los elementos disponibles de Web Creator en un solo sitio.
Pgina 28 / 74
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
Web Creator Pro 6 - Gua de inicio rpido Con el icono Encabezados puede ayudar a los motores de bsqueda a identificar informacin importante sobre sus pginas Web. Puede insertar los encabezados en la pgina utilizando la cinta o la barra de herramientas Elementos. Para obtener ms informacin al respecto, consulte el captulo Seccin Diseo. Al hacer clic en Google Analytics puede definir palabras clave utilizadas por el motor de bsqueda de palabras clave de Google. La seccin Salida Web trata de los pasos finales para cargar su sitio Web. Optimizar busca en todo el sitio Web componentes que ya no se utilizan. Volver a generar a continuacin volver a compilar el sitio Web excepto todo el desorden acumulado. Cargar enviar posteriormente su sitio Web al servidor donde estar visible para el mundo entero. Tendr que proporcionar a Web Creator Pro 6 todas las credenciales necesarias para conectarse al servidor y transferir los archivos. Recuerde que las credenciales que introduzca estn vinculadas al proyecto que cargue; esto facilita el trabajo en servidores mltiples con proyectos correspondientes.
Ficha Herramientas
Esta ficha le permite acceder a recursos adicionales que vienen con Web Creator Pro 6.
La primera seccin cuenta con recursos que vienen directamente de LMSOFT. La segunda seccin contiene correctores de gramtica y ortografa creados por Druid Informatique. La seccin Cuadrcula proporciona mtodos para simplificar el posicionamiento de los elementos en la pgina. Y, por ltimo, la seccin Barras de herramientas le permite ocultar y mostrar el cuadro Elementos que est a la izquierda. Esta funcin es til cuando ya ha colocado la mayora de los elementos necesarios en la pgina y desea tener ms espacio para trabajar. El icono Restablecer a configuracin predeterminada har que la interfaz Web Creator Pro 6 vuelva a la configuracin de fbrica.
Pgina 32 / 74
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
Panel y Cuadro tienen la denominacin especial: Contenedor. Estn diseados para almacenar otros elementos e incluso otros contenedores. Un objeto del contenedor existe como Elemento primario: cuando se colocan otros elementos dentro del mismo; esos elementos se convierten en sus elementos secundarios. Esta relacin afecta mucho el comportamiento porque cuando el elemento primario se desplaza, tambin se desplazan los elementos secundarios. Lo mismo sucede al eliminarlo. Si elimina un panel que tenga botones, stos se perdern. De hecho, la pgina misma es un contenedor, que es el elemento primario de todos los elementos que coloque dentro de ella. En caso de que elimine la pgina, se eliminar todo lo que se encuentre dentro de ella. La diferencia principal entre los cuadros y los paneles es que stos ltimos slo tienen una funcin organizativa, mientras que los cuadros tambin se utilizan para presentacin. Se dar cuenta de qu tan personalizable es un cuadro en comparacin con su panel. Se debe analizar con ms detalle cada uno de estos elementos, y le sugerimos que consulte informacin ms detallada en el captulo Elementos del Contenedor: cuadros y paneles. Elemento IFrame
El elemento IFrame le permite incluir toda una pgina Web dentro de otra pgina, que sea suya o que la haya encontrado en Internet. Puede cambiar el tamao y color de este elemento, as como su nombre. Cuando lo agrega a la pgina, ver una imagen con marcadores de posicin que representa el sitio donde se mostrar la pgina as como sus dimensiones actuales. Puede elegir la pgina que se mostrar con los iconos de la ficha Elementos de la barra de herramientas Propiedades. Elemento Acorden
El elemento Acorden se puede comparar a un men apilado animado. Cuando hace clic en una seccin, se extiende y muestra la informacin que se haya incluido para esa seccin. Puede cambiar el color de los diferentes estados de los acordeones de la misma manera que lo cambia para el elemento Botn. En Web Creator 6 debe preparar pginas de antemano y asignarlas a una seccin de su eleccin. Elemento Control de ficha
Pgina 37 / 74
El elemento Control de ficha le permite insertar varias pginas Web en un rea y acceder a ellas con los botones en forma de mens que aparecen al insertarlas. Pueden ser pginas que usted haya creado o pginas que haya tomado de un sitio Web en lnea. El tamao de las pginas que se muestran ser el tamao normal y se podr utilizar la barra de desplazamiento para desplazarse por las pginas.
Algunas diferencias entre los elementos Acorden y Ficha son que el elemento Acorden slo muestra pginas internas y el men es animado y est apilado. Elementos Etiqueta(H1H6)
El elemento Etiqueta(H1H6) le permite insertar etiquetas de referenciacin de H1 a H6. A menudo se utilizan para definir la organizacin de su sitio Web y representan la importancia de determinada informacin que proporciona en una pgina. De la ms importante a la menos importante (1 a 6), indican a los motores de bsqueda la informacin clave sobre su pgina. Son tiles para asegurarse de que los motores de bsqueda no pasen por alto informacin importante sobre su sitio Web cuando un usuario haga una consulta para buscar informacin importante. Por lo tanto, estos elementos pueden mejorar en gran medida la presencia de sus sitios Web en Internet. Estos elementos son diferentes de los elementos Texto y se deben utilizar con precaucin.
Pgina 38 / 74
Web Creator Pro 6 - Gua de inicio rpido Una vez que se han agregado a su pgina, puede elegir el nivel de importancia que el bloque de texto siguiente tendr en la barra de herramientas Propiedades. Cada encabezado tiene un estilo, color y fuente predefinidos, pero puede cambiarlos para que se adapten de manera ms adecuada a sus pginas. A nivel amplio del proyecto, puede cambiar todos los estilos de los encabezados con el icono Encabezados de la ficha Web del cordn. Si nicamente desea modificar el encabezado de la pgina actual, utilice la seccin Pgina actual para realizar las modificaciones.
Elemento Emergente
Emergentes le permiten mostrar otra pgina Web sobre su pgina. El elemento emergente debe ser desencadenado por un evento para que sea visible. Cuando se activa el elemento emergente, la pgina que estaba activada se oscurecer para que los usuarios se concentren en la pgina recin abierta.
Seccin Sociales
Elemento Redes sociales
El elemento Redes sociales le permite integrar vnculos rpidamente a una lista predefinida de sitios sociales populares: Facebook, Twitter, Google+, Delicious, Reddit, Pgina 39 / 74
Web Creator Pro 6 - Gua de inicio rpido Stumbleupon, Tumblr, LinkedIn y Digg. Puede realizar algunos cambios de estilo a este elemento para que se adapten mejor a su pgina. Elemento Blog Una vez que lo haya colocado en su pgina, haga clic en el botn Nuevo de la barra de herramientas Propiedades y aparecer el nombre predeterminado blog. Si desea recibir respuestas de los usuarios que lo visiten, deber proporcionar una direccin de correo electrnico para que pueda recibirlas. En el rea que se proporciona a continuacin, puede escribir la primera informacin utilizando el icono + de la derecha. Se mostrar la fecha y debajo de ella, "Nueva entrada". En los campos siguientes, puede agregar vnculos a artculos de otras pginas o pginas de su proyecto. Cada vez que agregue una entrada, se mostrar la hora de creacin para que la vean los lectores. Puede modificar el formato del texto utilizando los cuatro iconos que se encuentran arriba del rea de texto.
Seccin Multimedia
Elemento Galera El elemento Galera le permite mostrar una recopilacin de imgenes en su pgina Web. La vista inicial puede ser en forma de mosaico que muestra una recopilacin de pequeas miniaturas, o una presentacin que muestra las imgenes una por una. Recuerde que esto slo afecta la visualizacin inicial y el parmetro de mosaico cambiar a formato de presentacin una vez que un visitante seleccione una imagen.
Pgina 40 / 74
Web Creator Pro 6 - Gua de inicio rpido Elementos Sonido y Vdeo Los elementos Sonido y Vdeo funcionan casi de la misma forma. Los dos mostrarn un reproductor exactamente de la misma manera en que aparece en un explorador. Puede realizar una vista previa del vdeo o sonido que elija directamente desde la barra de herramientas Propiedades. Son compatibles la mayora de los formatos conocidos. Adems se le dar la opcin de elegir un reproductor para utilizarlos.
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
El elemento PayPal le permite insertar un vnculo a una cuenta PayPal para configurar un pago seguro en lnea. En la ficha Elemento de la barra de herramientas Propiedades puede elegir el tipo de vnculo que desee: Agregar al carro, Ver carro y Comprar ahora. A continuacin, puede vincularlo a la cuenta PayPal, definir el precio y elegir si se autoriza la compra de varias unidades del producto. Elemento Web Para los usuarios que tengan experiencia con la codificacin y las secuencias de comandos, el Elemento Web permitir la insercin de JavaScript, PHP y otros lenguajes de programacin que se basan en Web. No se puede garantizar el resultado obtenido al utilizar este elemento, ya que depende del cdigo que se utilice, el explorador que lo lea y el servidor que lo almacene. Por ello, antes de utilizarlo, asegrese de estar bien informado y de realizar pruebas. Este elemento est estrechamente relacionado con la funcin Cdigo personalizado de la seccin Pgina de la ficha Web de la cinta. Elemento Google Translate
El elemento Google Translate ofrece a los usuarios la oportunidad de ver de manera instantnea su sitio Web en cualquier idioma de su eleccin. Slo necesita agregar el elemento a su pgina y los visitantes pueden elegir el idioma que deseen de la lista desplegable. Elementos Formulario y Campo de formulario Los elementos Formulario y Campo de formulario deben trabajar en conjunto. Le permiten utilizar un servicio que se solicita con frecuencia que LMSOFT ofrece de manera gratuita. Siempre y cuando proporcione una direccin de destinatario, el formulario que cree recopilar la informacin que enven los visitantes. Los datos recopilados se procesarn en nuestros servidores y se le enviarn para que los utilice segn sus necesidades. Debe empezar por crear un Formulario y seleccionar un Tipo de accin de la barra de herramientas Propiedades. Al realizar las dos primeras acciones se le enviar un correo electrnico con la informacin recopilada; sin embargo, los usuarios preferirn la primera seleccin, ya que tendrn menos trabajo y no interrumpir su exploracin. La tercera opcin es enviar los datos a una pgina Web, que a continuacin analizar la informacin utilizando secuencias de comandos o informacin almacenada en el servidor (usted ser responsable de esta accin). La adicin de informacin a una base de datos es una de las razones por la que esta opcin es muy til.
Pgina 42 / 74
Web Creator Pro 6 - Gua de inicio rpido Con la cuarta opcin, la informacin se enva a una funcin JavaScript que cre sea en un Elemento Web (como se describi anteriormente) o en el rea Cdigo personalizado que se encuentra en la ficha Web de la cinta. Una vez que se enve el formulario, se llamar la funcin JavaScript segn la informacin que proporcione. Una vez que se cree el formulario, necesitar crear entradas utilizando el elemento Campo de formulario. Despus de su insercin, tendr el aspecto de un campo de texto blanco, pero se podr cambiar a otro Tipo de entrada. Asegrese de probarlos todos para ver las ventajas que pueden ofrecer.
Elemento Contador El elemento Contador le permite contar cuntos usuarios han visitado su pgina. Como existen diferentes contadores, necesitar configurar el contador deseado. Usted puede escribir el cdigo si est suficientemente familiarizado con ste, pero existen muchos fragmentos de cdigo JavaScript disponibles en Internet listos para utilizarse.
Lista de elementos
La lista de elementos se encuentra en el extremo derecho de la interfaz, justo arriba de la barra normal de estilo.
Pgina 43 / 74
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
Un men desplegable que se encuentra dentro de la ficha Biblioteca le permitir seleccionar bloques de diferentes plantillas. La ficha Personalizado le permite almacenar bloques que haya creado. Para obtener ms informacin sobre Bloques, consulte el captulo Creacin y uso de Bloques.
Pgina 47 / 74
La barra de herramientas Propiedades agrupa varias fichas referentes al elemento que est seleccionado. Con el icono de alfiler que se encuentra en el extremo superior derecho puede ver por separado la barra de herramientas Propiedades. Incluso puede cerrarla con el icono de cruz de la parte superior. Una vez que est cerrada, en la parte inferior de la interfaz se colocar la barra de ttulo Propiedades que puede utilizar para mostrar la barra de propiedades.
Ficha Elemento
En funcin del elemento que est seleccionado, encontrar herramientas para modificar elementos que van desde cambiar su color hasta insertar pginas.
Ficha Opciones
En esta ficha puede cambiar el nombre del elemento seleccionado. Para una imagen puede utilizar el campo Alt= que usan los motores de bsqueda para reemplazar una imagen faltante o para usuarios que han deshabilitado las imgenes en su explorador. Incluso puede cambiar el comportamiento de los elementos al cargar la pgina; por ejemplo, efectos de apariencia. Pgina 48 / 74
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
Web Creator Pro 6 - Gua de inicio rpido Gracias a estos contenedores, puede crear de manera muy sencilla plantillas para pginas combinando una serie de contenedores. Tambin puede reunir diseos complejos y guardar una apariencia ms homognea.
Pgina 50 / 74
Web Creator Pro 6 - Gua de inicio rpido Haga lo siguiente: elija el elemento y a continuacin, colquelo en la parte superior del panel. En cuanto el elemento se encuentre dentro del rea del panel, el borde de ste ltimo, se vuelve prpura. Esto indica que el panel se ha convertido en el Elemento primario del elemento que se coloc en el interior; ahora puede soltar el elemento. Si intenta desplazar el panel de nuevo, el elemento se desplazar con ste. Otra manera de colocar un elemento dentro de un contenedor es haciendo clic en el elemento para abrir el men de contexto. Una vez que el men se abra, elija Agregar a Elemento primario y seleccione el nombre del contenedor.
Web Creator Pro 6 - Gua de inicio rpido a continuacin, elija el contenedor que desee. Entonces los elementos se colocarn en la parte superior izquierda del contenedor de elemento primario. Otra forma de hacerlo sera arrastrar y colocar los elementos seleccionados en el contenedor donde desea incluirlos. Una vez que el borde del Elemento primario se vuelve prpura, puede estar seguro de que los elementos se han incluido en el contenedor. Una forma ms larga de hacerlo es arrastrando y colocando cada elemento uno por uno. Seleccione el contenedor haciendo clic en ste o seleccionndolo de la lista de elementos. Si lo desplaza, se dar cuenta de que los elementos que estn dentro se desplazan al mismo tiempo. Si esto no sucede, entonces significa que uno o varios elementos o no se seleccionaron al arrastrarlos y colocarlos o simplemente no se encontraban en el contenedor. Haga clic en Deshacer e intntelo de nuevo. Si se utilizan los contenedores junto con otros componentes disponibles mediante Web Creator Pro 6, es muy fcil juntar varias pginas o proyectos que tengan como base la misma plantilla. Para ello, utilice la funcin ms reciente de la interfaz: el bloque. Bloques: tambin son componentes organizativos, pero stos se utilizan para copiar contenedores y sus elementos subyacentes para su uso futuro. De esta manera puede copiar varios contenedores y desplazarlos a otra pgina en forma de bloques. Hablaremos de ellos con ms detalle en el captulo Creacin y uso de Bloques.
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
A continuacin se presentan dos ejemplos de esquinas redondeadas, encabezados, pies de pgina, anchos de borde, degradados y transparencias.
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.
El resto de la ficha Formato se refiere al posicionamiento relativo de los elementos entre s. A continuacin se presenta un resumen visual de alineaciones y cambios de tamao con tres cuadros en la parte superior.
Pgina 57 / 74
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
Web Creator Pro 6 - Gua de inicio rpido Primordialmente, esta funcin puede eliminar casi por completo la necesidad de editar el diseo manualmente, facilitar el cambio de tamao de las pginas y crear sitios Web con los ojos cerrados. No es obligatorio utilizar estas funciones, pero se recomienda que se aprovechen. Se puede acceder a estos parmetros desde la ficha Posicin de la barra de herramientas Propiedades, en la seccin Comportamiento.
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
En la segunda imagen, se ha reducido la anchura del panel. Como el panel es demasiado pequeo para incluir los tres elementos en la primera fila, el botn pasa automticamente a la lnea siguiente. Y en la tercera imagen, se ha cambiado el tamao del tercer botn; es ms ancho y, por consiguiente, una vez ms se ha desplazado hacia la lnea siguiente. En la ilustracin siguiente, las imgenes se han colocado en orden descendente.
Pgina 61 / 74
Una vez ms se ha reducido la anchura de la segunda imagen, lo que provoca que el cuarto botn se desplace hacia la lnea siguiente. En este ejemplo el botn tiene configurado el parmetro hacia la izquierda y pasa al final, pero se alinea con el borde del segundo botn. La ltima imagen muestra lo que sucede si se vuelve a reducir el tamao del panel. El cuarto botn se coloca directamente debajo del segundo botn alineado al borde del primer botn. En la imagen siguiente, se ha vuelto a reducir el tamao del panel.
El primer botn afectado por este cambio es el tercer botn. Como ya no cabe en su sitio anterior, se desplaza debajo del segundo botn y se alinea con el primer botn. Y como el botn Pgina 62 / 74
Web Creator Pro 6 - Gua de inicio rpido ya no se puede colocar junto al tercer botn, se desplaza debajo de ste y se alinea al borde del panel. Observe el espacio que se deja despus del primer botn. Lo primero que se piensa es que el cuarto botn es demasiado grande para colocarse debajo del primer botn. Pero no es as. Lo que sucede es que, una vez que un elemento haya flotado hasta donde pueda llegar, entonces se alinear con el elemento anterior. El elemento que est antes del cuarto botn, es el tercer botn. Por lo tanto, el cuarto botn siempre desear que el tercer botn est a su izquierda. Si esto no es posible, se desplazar a la lnea siguiente. Por esta razn, como lo muestra la imagen siguiente, si se reduce el tamao del cuarto botn, no se permitir que se coloque debajo del primer botn.
Sin embargo, si cambia el tamao del cuarto botn para que quepa en el espacio que est a la derecha del tercer botn, entonces se desplazar hacia arriba, a la derecha de este botn. En los tres ejemplos siguientes, cualquiera que sea la altura o anchura de los elementos 1, 2 y 3, el orden ser el mismo: cada elemento intenta permanecer a la derecha de su elemento anterior o debajo de ste.
Pgina 63 / 74
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
Web Creator Pro 6 - Gua de inicio rpido Los bloques son un concepto importante en Web Creator Pro 6 y se explican en el captulo Creacin y uso de Bloques.
Comportamiento Abajo
El comportamiento Abajo funciona en conjunto con el comportamiento Flotar. Este comportamiento indica a un objeto flotante que siempre se coloque en la lnea siguiente en lugar de alinearse junto a otro elemento flotante. Por ello, aunque haya espacio para colocar el elemento flotante, sin importar si flota hacia la izquierda o derecha, se colocar debajo de los
Pgina 68 / 74
Web Creator Pro 6 - Gua de inicio rpido dems elementos. Esto le permitir acomodar elementos de manera automtica como si utilizara un "retorno de carro" as como elegir de qu lado se colocarn los elementos. Si por alguna razn, como restricciones de espacio, los elementos slo se pueden apilar, este parmetro asegurar que los elementos siempre se alineen de manera previsible. Esto es til en particular para dispositivos mviles que pueden cambiar su orientacin. La orientacin vertical ser ms angosta y provoca que los elementos se apilen, pero cuando se utilizan en modo horizontal, los elementos se alinearn entre s.
Uso de grupos
Los grupos han existido desde hace tiempo en Web Creator y es posible que se supriman debido a la introduccin de los contenedores. Los grupos son una coleccin simblica de elementos que se pueden utilizar para modificar elementos mltiples. A menudo se utilizaron para pertenecer a un grupo de elementos que no deseaba modificar por equivocacin y necesitaba crear una jerarqua de orden Z entre los elementos. Con la introduccin de los Contenedores, los elementos ya estn agrupados segn su posicionamiento en la pgina. Puede definir un grupo seleccionando varios elementos y abriendo el men de contexto con el botn secundario del mouse. A continuacin, seleccione Agregar a Grupo y cree un nuevo grupo o agrguelo a uno que ya exista. Para acceder a las propiedades de un grupo, haga clic en Vista jerrquica de los elementos de la pgina que se encuentra en la parte superior de la lista de elementos y seleccione Ver grupos de elementos y su contenido.
Pgina 69 / 74
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