Sei sulla pagina 1di 324

WYSIWYG Web Builder 10

Copyright © 2014 Pablo Software Solutions. Reservados todos los derechos.


WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Tabla de contenido
TABLA DE CONTENTS..............................................................................................................................II
WYSIWYG WEB CONSTRUCTOR ............................................................................................................. 6
YONTRODUCCIÓN ......................................................................................................................................... 6
EMPEZANDO,Una introducción rápida ............................................................................................................ 8
¿Cómo es WYSIWYG Web Builder diferente de un editor de HTML? .................................................. 8
Comienzo Web Builder ........................................................................................................................ 9
Adición de texto a la página ............................................................................................................ 14
Adición de una imagen a una página Web ...................................................................................... 15
Girar una imagen ............................................................................................................................. 16
Aplicar efectos a una imagen ........................................................................................................... 16
La vinculación de sus páginas juntas (Creación de hipervínculos) ................................................... 17
Ahorro de su sitio web ..................................................................................................................... 17
Preestrenouna página ...................................................................................................................... 18
Publicaciónsus páginas web ............................................................................................................. 19
¿Qué sigue? ...................................................................................................................................... 20
WYSIWYGWEBBUILDEROOPCIONES ........................................................................................................... 21
Expediente ....................................................................................................................................... 21
Casa .................................................................................................................................................. 23
Vista .................................................................................................................................................. 25
Página ............................................................................................................................................... 26
Insertar ............................................................................................................................................ 41
Insertar ............................................................................................................................................ 41
Formato ........................................................................................................................................... 42
Mesa ................................................................................................................................................ 45
Arreglar ........................................................................................................................................... 47
Instrumentos ................................................................................................................................... 51
WYSIWYG Web Builder Objetos ....................................................................................................... 69
WYSIWYG Web Builder Objetos ....................................................................................................... 69
Estilo.................................................................................................................................................. 70
Marcador ......................................................................................................................................... 72
Lista con viñetas............................................................................................................................... 73
HorizontalLínea ................................................................................................................................ 74
Imagen .............................................................................................................................................. 75
Marquesina ..................................................................................................................................... 80
Marquesina ..................................................................................................................................... 80
Texto ............................................................................................................................................... 81
Asistente para formularios .............................................................................................................. 83

ii
WYSIWYG Web Builder 10 Pablo
Forma ..............................................................................................................................................
SoftwareSoluciones 86
Botón Avanzada ............................................................................................................................... 92
CAPTCHA de .................................................................................................................................... 93
Caja .................................................................................................................................................. 95
Combobox ........................................................................................................................................ 96
Editbox .............................................................................................................................................. 98
ExpedienteSubir.............................................................................................................................. 100
Botón de imagen ............................................................................................................................. 101
EmpujarBotón ................................................................................................................................ 102
Botón de opción ............................................................................................................................. 103
TextArea ........................................................................................................................................ 104
ActiveX ........................................................................................................................................... 105
Editorial Archivo ............................................................................................................................ 106
Flash ................................................................................................................................................ 107
Flash Video Player .......................................................................................................................... 109
HTML ............................................................................................................................................. 111
Java ............................................................................................................................................... 113
Marco en la línea ........................................................................................................................... 114
Capa ................................................................................................................................................ 115
Objetos maestros ........................................................................................................................... 118
Contenido Place Holder .................................................................................................................. 120
Marcos Máster ................................................................................................................................ 120
Objeto incrustado OLE ................................................................................................................... 122
Notas .............................................................................................................................................. 123
Pie de página ................................................................................................................................. 124
Cabecera de página ....................................................................................................................... 125
EnvaseTexto ................................................................................................................................... 126
QuickTime ....................................................................................................................................... 127
Real Player ..................................................................................................................................... 128
Media Player ................................................................................................................................... 130
YouTube ......................................................................................................................................... 131
CSSMenú ........................................................................................................................................ 132
IrMenú............................................................................................................................................ 133
Mega Menu..................................................................................................................................... 134
Barra de menús ............................................................................................................................... 136
Barra de navegación ...................................................................................................................... 138
Menú del panel .............................................................................................................................. 140
Sitetree .......................................................................................................................................... 141

LengüetaMenú ............................................................................................................................... 142


TextoMenú ..................................................................................................................................... 143
ii
WYSIWYG Web Builder 10 Pablo
Bandera ...........................................................................................................................................
SoftwareSoluciones 144
Galería de imágenes ...................................................................................................................... 146
Curva ............................................................................................................................................. 147
CurvoTexto ..................................................................................................................................... 148
Línea................................................................................................................................................ 149
Polígono ......................................................................................................................................... 151
Garabato ......................................................................................................................................... 152
Forma .............................................................................................................................................. 153
Blog ................................................................................................................................................. 156
Carrusel ......................................................................................................................................... 157
Mapa de imagen ............................................................................................................................. 159
Galería de fotos .............................................................................................................................. 161
Listo para usar Java Scripts ............................................................................................................. 164
Imagen de sustitución .................................................................................................................... 165
Rollover texto ................................................................................................................................. 166
RSS Feed ......................................................................................................................................... 167
Noticias RSS Ticker ......................................................................................................................... 169
Slide Show ...................................................................................................................................... 171
Site Search....................................................................................................................................... 172
Timer ............................................................................................................................................. 174
PayPal herramientas de comercio electrónico ............................................................................... 175
PHP Iniciar sesión Herramientas .................................................................................................... 180
El gestor de contenidos .................................................................................................................. 194
Base de datos de CMS ................................................................................................................... 195
CMSAdministración ........................................................................................................................ 197
CMSEtiqueta .................................................................................................................................. 205
CMSMenú....................................................................................................................................... 206
CMSBúsqueda ................................................................................................................................ 207
CMSVista ........................................................................................................................................ 208
jQueryAcordeón ............................................................................................................................. 210
jQueryComplete Auto ..................................................................................................................... 211
jQueryBotón ................................................................................................................................... 212
jQueryDatePicker ........................................................................................................................... 213
jQueryDiálogo ................................................................................................................................ 214
jQueryMenú ................................................................................................................................... 216
jQuery Tabs ................................................................................................................................... 217

jQueryProgressbar ......................................................................................................................... 218


jQueryDeslizador ............................................................................................................................ 219
jQueryHilandero ............................................................................................................................. 221
jQuery Tooltips .............................................................................................................................. 222
ii
WYSIWYG Web Builder 10 Pablo
jQueryMóvil....................................................................................................................................
SoftwareSoluciones 223
jQueryMóvil plegable ..................................................................................................................... 225
jQueryInterruptor de tirón móvil .................................................................................................... 225
jQueryMóvil deslizante................................................................................................................... 225
jQueryMobile Diseño de cuadrícula ............................................................................................... 226
jQueryTabs móviles ........................................................................................................................ 226
jQueryMobile Pie de página ........................................................................................................... 227
jQueryMobile Header ..................................................................................................................... 228
jQueryListview móvil ...................................................................................................................... 229
jQueryMobile Menu anidada ......................................................................................................... 230
jQueryMobile Menú emergente ..................................................................................................... 230
jQueryMobile Panel........................................................................................................................ 231
jQueryTabla Responsive móvil ....................................................................................................... 232
PUBLISH SU SITIO WEB .............................................................................................................................. 234
LTINTAS ................................................................................................................................................. 237
SITEMMANAGER .................................................................................................................................... 242
OBjectMMANAGER ................................................................................................................................. 246
PROPIEDADESYONSPECTOR ....................................................................................................................... 248
STYLEMMANAGER .................................................................................................................................. 249
GRADIENT STYLEMMANAGER .................................................................................................................... 249
EVENTS ................................................................................................................................................. 250
CSS3 ANIMATIONS YTRANSITIONS ............................................................................................................. 252
MObileWEBDISEÑO ................................................................................................................................ 255
MObileWEBDISEÑO ................................................................................................................................ 255
RESPONSIVEWEBDISEÑO .......................................................................................................................... 256
FORMVAlidación ..................................................................................................................................... 258
GDI + INFORMACIÓN .............................................................................................................................. 261
CErsonalizaciónWYSIWYG WEBBUILDER ................................................................................................... 262
CREACIÓNNEWSLETTERS .......................................................................................................................... 264
ÍNDICE .............................................................................................................................................. 265

ii
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

WYSIWYG Web Builder

Introducción
WYSIWYGWeb Builder es una solución todo-en-un software para crear sitios web completos. Lo-que-
See- es-lo-que-hay (WYSIWYG) significa que todos los elementos de la página se mostrarán en la
misma posición (diseño fijo) como en el diseñador a diferencia de fluidos diseños (dinámicos)
(generada por tradicional HTML editores) donde la posición de objetos depende de la posición y el
tamaño de los objetos que lo rodean. WYSIWYG Web Builder genera HTML (Hypertext Markup
Language) o etiquetas XHTML Mientras que el punto y haga clic sobre las funciones disponibles; puede
crear una página web sin saber HTML. Sólo tienes que arrastrar y soltar objetos a la página de posición
'en cualquier lugar' que desee y cuando haya terminado la publicará en su servidor web (utilizando la
herramienta de construir en Publicar). WYSIWYG Web Builder te ofrece un control total sobre el
contenido y el diseño de sus páginas web. Un archivo de proyecto Web Builder puede contener varias
páginas web, por lo que puede gestionar fácilmente todas sus páginas desde dentro de un archivo.

Características principales:
 Arrastrar y soltar objetos HTML: texto, líneas, Imágenes, Carpas, Mesas y mucho más!
 HTML,XHTML o salida HTML5.
 Soporta muchas características de CSS3: box-shadow, opacidad, esquinas redondeadas, etc.
 Administración de sitios. Fácilmente añadir, editar, reproducir y estructura de sus páginas web.
 Asistente de formularios; crear formularios en menos de 4 pasos, además de muchos
formularios listos para usar!
 Soporta todos los controles de formulario comunes: Editbox, TextArea, Casilla de
verificación, RadioButton, ComboBox, Button y carga de archivos.
 Formar herramientas de validación para la mayoría de los elementos del formulario.
 IncorporadoCAPTCHA para formularios PHP.
 Muchos objetos Shape (rectángulo, Ronda Rect, Elipse, Hexagon, Octagon, Flechas, Signos,
Estrellas, Burbujas Talk y más) con muchos efectos de relleno, tales como sólidos,
gradientes patrones y vidrio.
 Apoyo a YouTube, JAVA, Flash, HTML5 Audio / Video, Flash Video (FLV), Quicktime, Real
Audio y otros plug-ins.
 Construir-encreador de la bandera.
 Las imágenes de sustitución y presentación de diapositivas con imágenes (muchas animaciones
de transición).
 Rollover texto, muestra un banner de texto sobre la imagen en el mouse encima. Incluye
diapositivas fresco y efectos de desvanecimiento.
 Galería de fotos de objetos con marcos de fotos y diapositivas de apoyo de la caja ligera
incorporada.
 Muchos scripts frescas listas para su uso de Java.
 Navegaciónbar, menú Texto, Mega Menu, Tab, menú de diapositivas, sitetree y barra de menús.
 ViñetasListas (Círculo, Disco, Cuadrado, numérico, Alpha, romana y las imágenes personalizadas).
 Los mapas de imagen
 Importar páginas HTML existentes.
 Personalizar colores hipervínculo / formato utilizando cascada hojas de estilo CSS).
 Plantillaapoyo. Ya hay más de 100 plantillas gratuitas disponibles!
 Publicarsu sitio web entero, una sola página o un grupo de páginas en una sola acción (en la
unidad local o un servidor web).
 Maestroobjetos y Maestro Marcos. Esto le permite volver a utilizar objetos de otras páginas.
 Capa de objetos de avanzadaposibilidades de diseño
 Librerotación del ángulo de formas e imágenes
 Mesaapoyo.

iii
5
WYSIWYG Web Builder 10 Pablo
 CSS3animaciones y transiciones. SoftwareSoluciones
 PropiedadesVentana de información para la manipulación de objetos rápida.
 Capacidadagrupar / desagrupar objetos
 Herramientas de imagen: contraste, brillo, voltear, rotar, volver a muestrear, Tono / saturación,
plantillas y el cultivo.
 Efectos de imagen: Escala de grises, Negativo, Sepia, Blur, Suavizar, nitidez, ruido, Repujado y
mucho más!

iii
6
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

 Herramientas de dibujo: línea, línea + Flechas, Scribble, polígono, curva y curva cerrada.
 Implementar Eventosde imágenes, formas y controles de formulario!
 Imagen efecto de la reflexión y la capacidad de añadir sombra a las imágenes.
 RSS y construido en el Blog de herramientas.
 PHP Iniciar sesión / Herramientas de protección de página.
 Contenido La funcionalidad del sistema de gestión con el apoyo de plug-in.
 Mobile Web Herramientas de diseño con una función de apoyo jQuery Mobile.
 Responsive WebDiseño (breakpoints) basados en CSS3 Medios consultas.
 GradienteGestor de estilos para añadir / editar y eliminar (multicolor) mundial gradientes
efectos.
 Herramientas de comercio electrónico PayPal. Los PayPal eCommerce Herramientas son la
manera más rápida y fácil de eCommerce para añadir a su sitio web!
 Apoyo ventana emergente para los enlaces (con la posición optinal, tamaño, barra de
herramientas, barra de estado, barras de desplazamiento, etc.)
 Inteligenteenlaces; enlazar con el siguiente, anterior, los padres o página secundaria. Mapa del
sitio generador.
 IncorporadoCliente FTP para administrar sus archivos en línea. Los 'Explorar' botón de
configuración de publicación dan acceso a sus archivos publicados.
 Incorporadoapoyo jQuery: Acordeón, Tabs, Dialog, selector de fechas, completa Auto,
animaciones, etc !!!
 Site Search
 Herramienta de marca de agua de imagen
 Funcionalidad del carrusel
 Incorporadoapoyo a la galería de fotos Flickr / MySpace / Picasa.
 Noticias objeto ticker alimentaciónintegrar los canales RSS, Twitter, MySpace, Flickr, Facebook,
etc.
 Menú jQuery.Un menú temable (varios niveles) con ratón y teclado interacciones para la
navegación.
 jQuerySpinner. Mejorar una entrada de texto para introducir valores numéricos, con
botones arriba / abajo y flecha la entrega de llaves.
 jQueryTooltip. , Información sobre herramientas temable personalizables, en sustitución de la
información de herramientas nativas.
 Ajuste del texto
 y mucho más ...

7
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Llegar comenzado, una introducción rápida

WYSIWYGWeb Builder es una herramienta de creación de sitios web que te ayuda a diseñar y construir
sitios web con todas las funciones sin tener que aprender HTML. Al previsualizar o publicar una página
Web Builder genera automáticamente el código HTML de su navegador Web tiene que mostrar las
páginas. Este capítulo le ayuda a empezar en unos pocos pasos sencillos. Puede encontrar más
información sobre cada elemento en este documento en otros lugares.

¿Cómo es WYSIWYG Web Builder diferente de un editor de HTML?


Laidea detrás de esta aplicación es ocultar HTML del usuario. WYSIWYG Web Builder no es un editor
HTML, pero un generador de HTML. Ni siquiera tiene que saber que hay HTML involucrados. Sólo
tienes que arrastrar y soltar imágenes, texto y otros objetos en su página y su página está listo para
ser publicado! Usted puede pensar en él como una herramienta de autoedición para los sitios web.

Web Builder no editar el código HTML directamente, sino que utiliza su propio formato de archivo
(.wbs) para almacenar la información de la página web. Incluso puede guardar su página web
completa en un solo archivo!
Al no usar HTML internamente, Web Builder puede hacer mucho más que simplemente generar
objetos HTML estándar: apoya formas, dibujos, barras de navegación, fuentes RSS, blogs, galerías de
fotos, listas para el uso de JavaScript de y mucho más avanzados objetos.

Consejo:Aexportar sus páginas en HTML que puedes usar la herramienta integrada de publicar!

Si lo desea, puede insertar HTML existente para su página utilizando las herramientas HTML (página
HTML y el objeto HTML). También puede insertar atributos personalizados u otro código para casi
cualquier objeto.

FrontPage, Dreamweaver, etc utilizar un método de documentos (procesador de textos) para el diseño,
donde no se puede recoger objetos y arrastrarlo donde quiere que vaya a la página web. En WYSIWYG
Web Builder puede arrastrar y soltar los objetos en cualquier lugar que desee, que le da un control
total sobre el diseño. Usted puede incluso poner objetos encima (o por debajo) otros objetos!

HTML tradicionaleditores utilizan dinámico diseño de la página, lo que significa que el primer objeto de
la página también determinará la posición del segundo objeto. Cambiar el tamaño o mover el primer
objeto afectará el diseño completo de la página. No se puede solapar objetos cuando se utiliza
Dinámico Diseño de página.

WYSIWYGWeb Builder genera Fijo Diseño de página. Todos los objetos tienen una posición fija que no
está afectada por otros objetos. Esto también le permite superponer objetos y le dará mucho más
control sobre el diseño de la página.

Lo-que-ve-es-lo-que-hay no significa necesariamente que la página se verá exactamente igual en todos


los navegadores, ya que cada navegador utiliza su propio motor de renderizado y tiene su propia
interpretación de la especificación HTML. Sin embargo WYSIWYG Web Builder generará el código
HTML más óptima, para que se vea lo más cerca posible. Tenemos también un seguimiento constante
de los últimos estándares para asegurarse de que estamos 99,9% compatible con los estándares del
W3C.

Consejo:Para instrucciones paso a paso a las características básicas de WYSIWYG Web Builder visite los
tutoriales en línea:http://www.wysiwygwebbuilder.com/getting_started.html

8
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Iniciar Web Builder


Haga clic enel icono WYSIWYG Web Builder para iniciar la aplicación.

Cuando arrancas WYSIWYG Web Builder la pantalla principal se verá algo como esto:

Por defecto la interfaz Ribbon estará activa, pero si lo prefiere, también puede cambiar a menú clásico
/ barras de herramientas en Herramientas-> Opciones-> Varios-> Interfaz de usuario.

9
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Cinta
LaLa cinta le proporciona acceso rápido a todas las herramientas disponibles. La cinta contiene fichas para exponer
diferentes
conjuntos de elementos de control, lo que elimina la necesidad de muchas diferentes barras de
herramientas basadas en iconos. Algunas de estas fichas son contextuales y aparecen sólo cuando se
selecciona un determinado tipo de objeto, proporcionar herramientas específicas para elementos como
tablas, texto o imágenes.

Ustedpuede minimizar la cinta con la pequeña flecha en la esquina derecha. En ese caso, usted todavía
será capaz de acceder a todas las pestañas de la cinta de opciones, pero las herramientas va a esconder
para liberar algo de espacio en la pantalla.

ContextualTabs
Tabs contextuales sólo aparecen cuando sea necesario. Por ejemplo, si selecciona un objeto de
imagen a continuación se mostrarán las Herramientas de imagen. Las herramientas se oculta
automáticamente si se anula la selección del objeto.

Herramientas de formato de texto


Laherramientas de formato de texto sólo están activos cuando se encuentra en modo de edición de texto.

Para insertartexto basta con arrastrar el icono de texto en el espacio de trabajo. Un nuevo objeto con
el texto "Haga doble clic para editar" se mostrará en la página. Para cambiar al modo de edición de
texto haga doble clic en este texto y las herramientas de formato se activarán. Para algunas de las
herramientas que necesita para resaltar el texto antes de que se puede utilizar (al igual que en un
editor de texto normal).
10
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Barra de herramientas de acceso rápido


Ustedpuede poner los comandos que utiliza con más frecuencia en la barra de herramientas de acceso
rápido encima de la cinta. Al igual que el
La cinta, esta barra de herramientas es totalmente personalizable.

Menú Archivo
LaMenú Archivo contiene todos los comandos de archivos relacionados, como Abrir,
Guardar, Cerrar y Publicar. También hay un campo de búsqueda que le ayuda a
encontrar rápidamente los comandos específicos.

Caja de herramientas
Lacaja de herramientas se puede usar para agregar nuevos objetos a sus páginas web. Para insertar un
nuevo objeto, seleccione uno de los elementos disponibles y dibuje un cuadro para indicar la posición
del objeto. El nuevo objeto ahora se inserta a la página. Otra forma de añadir objetos a su página es
simplemente arrastrándolas fuera de la caja de herramientas en el área de trabajo.

Tabs
Cuando haya abierto varias páginas, puede utilizar las pestañas para cambiar entre las páginas. Para
cerrar la
activopágina pulse la pequeña 'x' en la esquina superior derecha de la tira de pestañas.

Espacio de trabajo
Lacentro de la pantalla es el área de trabajo, donde se pueden arrastrar y soltar objetos de la caja de
herramientas. Este

11
WYSIWYG Web Builder 10 Pablo
representasu página web. SoftwareSoluciones

12
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Administrador del Portal


LaSite Manager puede utilizarse para gestionar la estructura de su sitio web.

LaAdministrador del Portal tiene su propia barra de herramientas para agregar, editar, clonar o eliminar
páginas. También hay un botón para abrir las propiedades de la página seleccionada.
En la imagen superior se ve un ejemplo de una estructura del sitio web. El nombre de archivo de este
ejemplo el sitio web se llama 'mywebsite.wbs', este nombre se muestra siempre en la raíz del árbol del
sitio web. La raíz puede tener uno de más páginas y cada página puede tener sub-páginas. Los sitios
web tienen siempre una página de inicio, que a menudo se llama índice, por lo que por esta razón
constructor Web agrega automáticamente esta página para cada nuevo proyecto. Los nombres de los
elementos (páginas) en el árbol del sitio son los nombres de los archivos de los archivos HTML de
destino, por lo que si usted nombró un "índice" página es publicará como index.html. No agregue la
extensión del archivo en el administrador del sitio!

Consejo:Asegúrese de que todas las páginas de un sitio web son parte de un mismo proyecto, de esta
manera Web Builder será "saber" que las páginas van juntos y generan HTML óptimo para su sitio web.

Cadavez que se inserta una nueva página de su sitio web que se añadirá al Administrador del Portal.
Para editar páginas creadas previamente puede hacer doble clic en el nombre de la página para abrirlo
en el editor.

Nota importante:
Si vuelve a abrir el proyecto a continuación, sólo la primera página se abrirá (para reducir el tiempo de
carga del proyecto y limitar la memoria asignada). Para abrir otras páginas del proyecto debe utilizar el
Administrador del Portal. Si usted no ve también sus páginas entonces es posible que les haya
agregado como hijo de otra página. Haga clic en el signo "+" delante de la página (o carpeta) para
expandir el árbol ..

Vas aencontrar más información sobre el Administrador del Portal adelante en este documento.

13
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

PropiedadesInspector
Utilice la ventana Propiedades del Inspector para ver y cambiar las propiedades de los objetos
seleccionados. Usted puede
tambiénutilizar la ventana Propiedades Inspector para modificar las propiedades de página. Los
cambios serán visibles inmediatamente. La ventana Propiedades del Inspector muestra los diferentes
tipos de campos de edición, en función de las necesidades de una propiedad particular. Estos campos
de edición incluyen cuadros de edición, listas desplegables, y enlaces a los cuadros de diálogo del
editor personalizado. También es posible modificar manualmente el tamaño y la posición del objeto
seleccionado cambiando la posición y tamaño propiedades.

La propiedad ID
LaPropiedad ID de un objeto debe ser único en la página. Normalmente Web Builder le dará a su
objetonombres únicos automáticamente. Sin embargo, si usted utiliza una de más objetos maestros,
luego los ID podrá ser duplicada, ya que el software no puede distinguir un maestro de una página
normal.
LaPropiedades Inspector también le da acceso a los atributos más avanzadas como el ID de un objeto.
Este
puede ser útil si utiliza las páginas maestras y quiere dar a los elementos de la página de un
identificador único. Se recomienda otorgar objetos en un nombre de página maestra con un prefijo
como MasterPage_Text1. Esto se asegurará de que si la página maestra se utiliza en otra página, la
identificación de los objetos es único.

14
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Adicióntexto a la página
Uno de los primeros pasos en la creación de una página web a menudo añadiendo texto.

Seleccione Insertar> Texto en el menú y dibuje un cuadro para indicar la posición del texto. A
continuación haga doble clic en el cuadro para empezar a editar el texto. Escriba algún texto y
(presione Enter para ir a la línea siguiente). El cuadro cambia automáticamente su tamaño para
ajustarse al texto.

Siguiente,usted puede cambiar los atributos de texto resaltando el texto que desea modificar con el
ratón y luego elegir los nuevos atributos en la ficha Formato. Usted puede cambiar el tipo de letra,
tamaño, negrita, cursiva, subrayado, color del texto, color de realce y muchos otros atributos. Tenga en
cuenta que las herramientas de formato también están disponibles en el menú contextual del editor de
texto.

15
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Haga clic en cualquier lugaren la página para detener la edición.

Adición de unaimagen a una página web


Seleccione Insertar> Imagen desde el menú y dibuje un cuadro para indicar la posición de la imagen
o seleccione Imagen en la caja de herramientas. El tamaño de la caja no importa; Web Builder ajusta
automáticamente el cuadro para ajustar la imagen después de colocarla.

LaArchivo de imagen de diálogo Abrir para que pueda localizar la imagen que desea colocar en el
cuadro de imagen. Seleccione la imagen que desee agregar y haga clic en Abrir para agregarlo a la
página.

Acambiar el tamaño de la imagen de arrastrar los bordes (asas) del objeto de imagen.

16
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Girar una imagen


Ustedpuede girar imágenes y objetos de forma.

Agirar un objeto:
1. Seleccione la herramienta Girar de la cinta de opciones o haga clic derecho y seleccione Rotar.
2. Haga clic enpara seleccionar el objeto, se ciernen sobre una de sus asas hasta que aparezca el puntero
de rotación.
3. Mantenga pulsado el botón del ratón y arrastre en la dirección en la que desea rotar el objeto y
luego suelte. Use la tecla Mayús para intervalos de rotación de 15 °.

Aplicar efectos a una imagen


En WYSIWYG Web Builder puede aplicar efectos a las imágenes sin tener que abrir un editor de
imágenes por separado! Algunos de los efectos disponibles son: Contraste, Brillo, Blur, escala de grises,
Relieve, Negativo, Sepia, nitidez, Suavizar, plantillas y mucho más!

17
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

La vinculación de sus páginas juntas (Creación de hipervínculos)


Los hipervínculosson texto o imágenes que se puede hacer clic para que el usuario a otro archivo web
como una página web, imágenes o cualquier otro archivo. Ellos son la esencia de la World Wide Web,
ya que enlazan las páginas de los sitios y páginas web a otros sitios web. Para crear un hipervínculo en
Web Builder, siga las instrucciones a continuación.

Enlacetexto
Resalte el texto que desea establecer el vínculo y seleccione Insertar> Enlace desde la barra de menús,
haga clic en el botón de conexión en la barra de herramientas o pulse CTRL + K en el teclado. Esto
mostrará la ventana Insertar hipervínculo.

Enlaceuna imagen, forma o vuelco.

Por favor lea los "Enlaces" de capítulos de este documento para obtener más detalles acerca de la
vinculación.

Guardando tu websitio
Asalvar a su sitio web, seleccione Menú-> Archivo-> Guardar Sitio Web en el menú e introduzca un
nombre para el proyecto. Web Builder utiliza los .wbs extensión (Web Site Builder) para guardar los
archivos de proyecto, para salvar a su página como HTML tendrás que publicar sus páginas.

18
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Preestrenouna página
Seleccione Inicio-> Vista previa en Browser-> Navegador por omisión (F5) para obtener una vista previa
de la página actual en el navegador predeterminado. También es posible cambiar el navegador que se
utiliza para la previsualización. Ir a Inicio-> Vista previa en Browser-> Editar lista de navegadores para
añadir / editar la lista de navegadores que se pueden utilizar para previsualizar las páginas que está
trabajando.

Dependientesobre el alcance de previsualización (Herramientas-> Opciones-> Varios), se puede


obtener una vista previa o bien una sola página o todo el sitio web. Si mantiene pulsada la tecla SHIFT
durante la vista previa voluntad 'invertido' el alcance preliminar actual.

Nota importante:Los enlaces internos no funcionan en Vista previa, a menos que haya configurado el
Ámbito de vista previa para el sitio web completo! Si sólo una vista previa de una sola página, su
navegador no será capaz de encontrar todas las otras páginas (internos) a menos que también genera
ellos!

Otra nota:Ustedno puede previsualizar las páginas que utilizan PHP en su navegador local. Páginas PHP
sólo se pueden ver a través de un servidor web con soporte para PHP.

19
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

La publicación de supáginas web


Lafase final de la creación de un sitio web está publicando sus páginas. Para poner sus páginas en la
Web, usted necesita un servidor Web. Comúnmente llamado hosts, servidores Web le permiten
transferir y almacenar archivos, incluyendo documentos HTML, imágenes y archivos multimedia. A
menos que usted es dueño de su propio servidor Web, usted necesita encontrar un servidor para
alojar sus páginas. Algunos ejemplos de los anfitriones de la tela son:
http://www.50megs.com/
http://www.godaddy.com/
http://www.fortunecity.com/
http://www.ipowerweb.com/
pero por supuesto hay muchos más!
Asegúrese de elegir un hosting que soporta FTP; esto hace que sea mucho más fácil para publicar sus
páginas Web Builder.

Publicara un servidor FTP remoto.


Una vez que haya registrado en una red de acogida, usted recibirá una dirección del servidor, nombre de
usuario y contraseña.
Introduzca esta información en Web Builder seleccionando: Archivo-> Publicar. Haga clic en Agregar y
seleccione Tipo "Servidor FTP". A veces también es necesario especificar una carpeta remota.
Comunes ubicaciones carpetas remotas son:
/ Www, / public_html,/ Html, pero lamentablemente este valor puede ser diferente para cada servicio
de hosting, así que consulte la documentación de su servicio de hosting para más detalles! Si usted
tiene un firewall / router, seleccione 'Usar el modo pasivo para las transferencias ". Haga clic en
Aceptar para guardar. Ahora usted puede publicar cada página, simplemente seleccionando Publicar.

Publicaren una carpeta local


Si su servidor no soporta FTP o si desea utilizar su cliente favorito de FTP para transferir los archivos al
servidor, puede utilizar la opción 'Publicar en una carpeta local ". Haga clic en Agregar para agregar una
nueva ubicación a la lista. Introduzca un nombre para la ubicación de un selecto 'Carpeta local "como
tipo. Entre en la carpeta donde desea publicar el documento activo. Haga clic en Aceptar para guardar
los datos y luego haga clic en Publicar para guardar los archivos en la carpeta especificada. Ahora usted
puede tomar estos archivos de la carpeta local y publicarlos usando su utilidad FTP preferido.

20
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Páginas para Publicar


Seleccione qué página o páginas que desea publicar.

 TodoSitio Web, Publica todas las páginas del sitio web (excepto las páginas que han
permitido 'No publicar esta página' en Propiedades de la página)
 Sólo Seleccionar página,publica la página de selección, haga clic en Seleccionar para especificar
la página que se publicará.
 Seleccionar páginay Sub Pages, Publica la página de selección y todos sus sub-páginas (si las
hay).
 Publicarpáginas con la página maestra seleccionada.Esta voluntadpublicar todos los
archivos a través de la página maestra seleccionada. Esto puede ser útil si usted ha hecho
algunos cambios en una página maestra y rápida que desee volver a publicar todas las
páginas que utilizan la página principal.

¿Qué hacer en caso de errores de publicación?


 Asegúrese de que su dirección ftp (host) es correcta.
 Es su nombre de usuario y contraseña ok?
 Asegúrese de que la carpeta remota es correcta (muy importante!)
 Si los archivos no aparecen en su página web, probablemente, usted ha especificado la carpeta
remota mal.
 ¿Tienesu firewall bloquea la conexión FTP de Web Builder?
 Habilitar 'Usar el modo pasivo para las transferencias'
 Aumentar el tiempo de espera de conexión de 120 segundos (Herramientas-> Opciones->
Publicar)
 Si la transferencia tiene un largo tiempo, entonces probablemente usted ha utilizado (muy)
grandes imágenes.
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=1918
 Si su sitio web no parece ser actualizado, seleccione "Actualizar" en sus tiempos del navegador
múltiple!
 Para obtener una lista de todos los posibles códigos de error y sus
descripciones ir aquí?: Http: //support.microsoft.com/default.aspx scid =
kb; EN-EEUU; 193625

¿Por qué mis imágenes muestran una página publicada?


 ¿Sabía usted carga las imágenes al servidor web?
 Por defecto, lugares Web Builder todas las imágenes en una carpeta secundaria llaman
imágenes; usted puede cambiar esto a través de Herramientas-> Opciones-> editores>
Carpeta Imagen Sub. Si deja este campo vacío, las imágenes se publicarán en la misma
carpeta que la página publicada.
 Algunos servidores Web no admiten subcarpetas, así que asegúrese de que tiene permisos
para crear carpetas en el servidor. Si no, entonces usted debe decirle Web Builder para
publicar las imágenes en la misma carpeta que el HTML.
 Asegúrese de que los nombres de las imágenes son válidas; la mayoría de los servidores
web son mayúsculas y minúsculas y / o no admiten caracteres especiales en los nombres
de archivo de las imágenes.
 ¿Sus nombres de archivos de imagen contienen espacios en blanco u otros caracteres
especiales? Los nombres de imágenes con espacios pueden causar problemas en algunos
navegadores y / o servidores web, utilice guiones o guiones para conectar palabras en lugar de
espacios.

¿Qué essiguiente?
Estemanual tiene una descripción de casi todas las funciones de Web Builder. Desplácese hacia abajo
para aprender todas las características interesantes de WYSIWYG Web Builder!

20
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Consejo:Para preguntas más comunes u otro soporte por favor visite:
http://www.wysiwygwebbuilder.com/support.html

20
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

WYSIWYG Opciones Web Builder


Expediente
NuevoSitio Web
Creaun nuevo proyecto de sitio web vacía.
Todas las páginas de un sitio web se guardarán en un archivo.

NuevoSitio Web De Plantilla


Creaun nuevo sitio web basado en una plantilla. Plantillas más tarde puede ser utilizado por usted (o
alguien más) para utilizar una base para una nueva página o sitio web. Al guardar una página web en
una plantilla que contiene todas las imágenes y otros objetos en el archivo de plantilla, lo que no hay
necesidad de copiar estos archivos por separado. Esto puede ser útil si su quiera transferir su trabajo a
otro equipo. WYSIWYG Web Builder plantillas tienen la extensión .wtp y se guardan en la subcarpeta \
Mis Documentos \ WYSIWYG Web Builder \ system \ templates. Para añadir una nueva categoría a la
ventana de selección de la plantilla, para que pueda organizar sus plantillas, basta con crear una nueva
carpeta y poner los archivos de plantilla en esta carpeta. El nombre de la carpeta se muestra en la lista
desplegable Categoría. También puede descargar plantillas creadas por otros usuarios Web Builder
desde el sitio Web de Soluciones Pablo Software: http://www.wysiwygwebbuilder.com/templates.html

AbiertoSitio Web
Abreun proyecto de sitio web existente.

Cerca
Cierre la página activa. El cierre de la última página abierta también se cerrará el proyecto del sitio web!

Cerrar WebSitio
Cierre el proyecto de sitio web activo.

21
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Sitio Web Guardar


Guardarel proyecto de sitio web activo.

Nota importante:
WYSIWYGWeb Builder no editar el código HTML directamente, sino que utiliza su propio formato de
archivo (.wbs) para almacenar el
informaciónde la página web. Con el fin de salvar a sus páginas como HTML lo necesario para publicar
o exportar sus páginas. Web Builder almacena la información de todas sus páginas en un archivo de
proyecto.

Guardar Web
Site Como
Guardarel proyecto de sitio web activa con un
nuevo nombre.

Guardar Sitio Web


Plantilla
Guardarel proyecto de sitio web activa a una
plantilla.
Ver'Sitio Web Nuevo de plantilla "para más detalles acerca de las
plantillas.

Guardar como HTML Documento /


Exportar HTML
Esteopción activa la ventana de Publicar. Si usted realmente desea exportar la página HTML activo
sólo, a continuación, mantenga presionada la tecla SHIFT en el teclado. Para generar más de un
archivo a la vez, por favor, utilice la opción Publicar.

Vista previa
enNavegador
Preestrenola página web activa en el navegador
predeterminado.
Dependientesobre el alcance de previsualización (Herramientas-> Opciones-> Misc), se puede
obtener una vista previa o bien una sola página o la
todositio web. También es posible cambiar el navegador que se utiliza para la previsualización. Ir a
Archivo-> Vista previa en Browser-> Editar lista de navegadores para añadir / editar la lista de
navegadores que se pueden utilizar para previsualizar las páginas que está trabajando.

Consejo:UstedTambién puede utilizar "toda Prevista sitio web" la opción de menú para cambiar entre
una sola página y todo el sitio web de vista previa.

Nota:Ustedno se puede obtener una vista previa de páginas PHP directamente en su navegador. PHP
sólo puede ser visto a través de un servidor web con soporte para PHP!

Publicar
Publicarla página activa, un grupo de páginas o todo el sitio web. Puede optar por publicar en una
carpeta local o un servidor FTP remoto. Echa un vistazo a el capítulo 'Publicar' de este documento para
obtener más detalles.

Salida
Sale de la aplicación.

22
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Casa
Pasta
Insertar contenido del Portapapeles.

En el modo de edición de texto mantenga pulsada la tecla SHIFT mientras se utiliza este comando para
pegar sin formato. Esto puede ser útil cuando se está pegando el texto de MS Word que puede incluir
los caracteres de control no válidos.

Pegue en Place
Pastaen su lugar es un método de pegar algo en el área de trabajo en la posición exacta que estaba
cuando lo copiaste.

Cortada
Cortar la selección y colocarla en el portapapeles.

Copia
Copie la selección y colocarla en el portapapeles.

Borrar
Borrarla selección.

Deshacer
Deshacerla última acción. Puede deshacer hasta 255 acciones.

Rehacer
Rehacerla acción previamente deshecha.

Seleccionar todo
Seleccione todo el documento (todos los objetos).

Encontrar
Ustedpueden buscar palabras o caracteres en la página activa o todo su sitio web.
En el menú Edición, haga clic en Buscar.
En Buscar en, seleccione la página actual o sitio web completo.
En Buscar, escriba los caracteres o palabras que desea buscar y, a continuación, haga clic en Buscar
siguiente. Para encontrar ejemplos adicionales de un mismo texto, siga haciendo clic en Buscar
siguiente.

Nota:Si selecciona Buscar en 'Sitio web completo', entonces se abrirán todas sus páginas. Esto puede
utilizar una gran cantidad de memoria del sistema y ralentizar el rendimiento general de su equipo!

23
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Reemplazar
Ustedpuede buscar y reemplazar palabras o caracteres con el texto que usted especifique.
En el menú Edición, haga clic en Reemplazar. En Buscar en, seleccione la página
actual o de todo el sitio En Buscar, escriba los caracteres o palabras que desea
encontrar.
En Reemplazar con, escriba el texto que desea sustituir.
Haga clic enBuscar siguiente y, a continuación, haga clic en Reemplazar. Para reemplazar todas las
apariciones del texto, haga clic en Reemplazar todo.

Propiedades
Editar las propiedades del objeto seleccionado.
Verel capítulo 'WYSIWYG Web Builder Objeto' para más detalles acerca de las propiedades del objeto.

HTML
Ver genera HTMLdel objeto seleccionado o inserte su propio código HTML!
Por Favortenga en cuenta que esta opción es sólo para usuarios avanzados. Inserción de código
HTML no válido puede producir resultados inesperados.

NoPublicar Activos (menú contextual únicamente)


Si esta opción está activada, Web Builder no publicar los elementos (imágenes, scripts, películas) para
este
objeto.Por ejemplo, un reproductor de medios no publicará el archivo multimedia asociado (s).
Estepuede ser útil si ya existe un archivo en el servidor, por lo que no tiene que ser publicado
nuevamente.
Tenga en cuenta que todavía generar el código HTML para el objeto!

Restaurar tamaño original (menú contextual únicamente)


Se puede utilizar para restaurar una imagen o un objeto flash en su tamaño original.

24
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Vista

CompletoModo de pantalla:Normalmente, cuando se edita una página web en WYSIWYG Web


Builder, parte de la pantalla está ocupada con las barras de herramientas, una barra de menú, una
barra de estado, y otras ventanas. Para ocultar temporalmente toda esta información ajena a trabajar
exclusivamente en su página, haga clic en "Ver" y seleccione "Modo de pantalla completa". Todo va a
desaparecer si vuestra página editada actualmente. Para volver, pulse la tecla F11 o haga clic en el
botón de barra de herramientas Pantalla completa.

Actualizar:LaOpción 'Actualizar' para recarga todas las imágenes de la página actual. Esto puede ser
útil si ha editado las imágenes fuera del Web Builder.

ObjetoManager:Mostrar u ocultar la ventana del Administrador de

objetos. Propiedades Inspector: Mostrar u ocultar la ventana

Propiedades del Inspector. Administrador del Portal: Mostrar u

ocultar la ventana del Administrador del sitio.

Caja de herramientas:Mostrar u ocultar la caja de herramientas.

Grid:Mostrar u ocultar la cuadrícula.

Ajustar a la cuadrícula:Permite activar o desactivar Ajustar a cuadrícula. Utilice la función Ajustar a la


cuadrícula para alinear objetos con exactitud. Web Builder crea una atracción "magnética" entre el
objeto seleccionado y de la red.

Chasquidoa las guías de regla:Permitiro desactivar el complemento a las guías de regla.

Gobernantes:Mostrar u ocultar las reglas.

GobernanteGuías: Mostrar u ocultar las guías de regla. Puede añadir guías de regla
haciendo clic Gobernante Guías de> Añadir guía del usuario Horizontal / Vertical o
simplemente arrastrar una nueva guía de la barra de regla.

Los contornos de objetos:Mostrar u ocultar los bordes de los objetos.

Ampliar
Ustedpuede acercar la imagen para ver partes de su página web de cerca, o alejar el zoom para ver más
de la página. Usted puede
cualquiera de los dosseleccione uno de los porcentajes de zoom predefinidos o introducir un valor
personalizado en la barra de herramientas de zoom.

Notas:
Lala calidad de la página ampliada depende en gran medida del nivel de zoom. Obtendrá la mejor
calidad de 100%, 200%, 300%, 400%, etc. Sin embargo, un nivel de zoom de 150% introducirá errores
de redondeo.
Ustedno se puede editar el texto cuando una página se amplía o alejaste.

25
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

26
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Página

NuevoPágina
Añade una nueva página de su sitio web. La nueva página se abre automáticamente para que pueda
comenzar a editarlo derecho
de distancia. La nueva página (con un nombre página única) con añadirá al árbol Administrador del Portal.

Nuevo móvilPágina
Añade una nueva página móvil de su sitio web. Las páginas móviles tienen un conjunto de herramientas
diferentes, optimizado para móviles
dispositivos.Para obtener más información acerca de diseño web móvil por favor, lea el siguiente
artículo: Mobile Web Design.

NuevoPágina de plantilla
Crearuna nueva página basada en una plantilla. Escoja cualquier página de una plantilla y la inserta
en el proyecto actual. La nueva página (con un nombre página única) con añadirá al árbol
Administrador del Portal.

EditarPágina
Esto mostraráuna lista de todas las páginas de su sitio web. Para abrir / editar la página, simplemente
escoja el nombre de la página.

ClonPágina
Ahacer una copia exacta de la página activa, seleccione Duplicar página en el menú. Un nuevo artículo
(con un nombre único) se añadirá al Administrador del Portal.

Nota:
'ClonePágina 'duplicará la página y todos los objetos de esa página. Para reducir el número de duplicados
objetosdentro de su sitio web que usted debe considerar el uso de páginas maestras.

BorrarPágina
Eliminar la página activa de su sitio web. No se puede quitar la última página de su sitio web.

27
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Renombrar Página
Rebautizarla página activa. Tenga en cuenta que el administrador del sitio debe estar visible para
poder cambiar el nombre de su página. El nombre de la página se resaltará en el administrador del
sitio, donde se puede cambiar el nombre.

Nota:Cuando haya vinculado a la página que está cambiando el nombre (de cualquier página dentro
del sitio web), Web Builder se actualiza automáticamente todos los enlaces para que así usted no
tiene que volver a hacer todos los enlaces internos.

Notasacerca de los nombres de página


Aunque la construcción de su sitio web, Web Builder guarda el archivo de proyecto con la extensión
.wbs. Este es un archivo de proyecto utilizado por Web Builder para simplificar el proceso de
construcción. Un archivo de proyecto puede contener varias páginas web. Una vez que sus páginas
están listas debe exportar o publicar como HTML.
Lanombre del archivo HTML de salida se toma del nombre que ha especificado en el administrador del
sitio.
Así que si usted nombró el índice de la página, el archivo de salida se llama index.html. Si la página
necesita otra extensión como .php, puede configurar esto en las propiedades de la página.

Aquíhay algunas pautas sobre cómo nombrar tus páginas web:


1. No agregue .html o .htm extensión al nombre de la página. Web Builder añadirá
automáticamente la
extensión .html (o .php, .asp) cuando publica (o exportaciones) el código HTML.
2. Siempre el nombre de su página web: "índice", este es el nombre más común para una página
web.
3. Utilice siempre los nombres de archivo en minúsculas, la mayoría de los servidores web son
mayúsculas y minúsculas y puede fallar para encontrar su página si ha llamado "Índice" o
"INDEX"
4. Utilice alfa sólo caracteres numéricos. No utilice el espacio u otros caracteres especiales en
el nombre, mantenerlos simple como:
"Page1"o "my_products"
5. Utilice guiones bajos o guiones para conectar palabras.

28
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Importación de páginas HTML


Aunque Web Builder NO es un editor HTML, puede importar páginas HTML existentes.
Seleccione Página-> Import-> Importar HTML página en el menú para mostrar la ventana de la página
Importar HTML. Usted puede seleccionar una página HTML de la unidad local o especificar una
dirección URL de un sitio web en línea.
Haga clic en Aceptarpara iniciar la importación de la página. Web Builder copiará automáticamente todas
las imágenes en la unidad local.

Notas importantes sobre la importación de HTML:


 WYSIWYGWeb Builder no es un editor HTML, pero un generador HTML! Web Builder importa el
HTML por la prestación de los contenidos de una página existente y luego intenta convertir el
diseño de formato de objeto interno de Web Builder.
 Lafunción de importación actualmente sólo importa texto, imágenes, elementos de formulario
y atributos cuerpo (colores de los enlaces, imágenes de fondo, etiquetas meta). Las tablas,
scripts, hojas de estilo y componentes multimedia no se importan. Pero en la mayoría de los
casos esto es suficiente para empezar.
 Web Builder no analiza las hojas de estilo, por lo que es algunos casos el texto puede ser
distinta de la página original.
 Web Builder actualmente no admite conjuntos de marcos. Si desea importar una página
web que utiliza marcos tendrás que importar todas las páginas individuales por separado.
 Es muy difícil de soportar todos los diferentes tipos de HTML. Incluso los navegadores
populares interpretarán HTML de manera diferente, así que no esperes milagros. Si una
página no puede ser importado es probable que contenga código que Web Builder no
entender y usted todavía tiene que empezar de cero.
 Importación de páginas web creadas con WYSIWYG Web Builder le dará los mejores resultados!

Página Importar de otro proyecto


Esteopción permite importar la página de otro proyecto WYSIWYG Web Builder.

Página HTML
En esta ventana, se muestra el HTML generado por Web Builder. Para insertar su propio código,
seleccione la ficha correspondiente. Seleccione si se debe insertar el código en el inicio de la página,
entre etiqueta Head, etiqueta interior del cuerpo, Comienzo del Cuerpo, Fin de cuerpo o de Fin de
página. El código personalizado se mostrará en el color azul.

Advertencia:Al insertar código en la ventana de página HTML, asegúrese de que no se incluye la etiqueta
29
WYSIWYG Web Builder 10 Pablo
<HTML>, SoftwareSoluciones
<HEAD>o <BODY>! WYSIWYG Web Builder ya genera estas etiquetas.

30
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

 Inicio de Página
LaSe insertará HTML antes de que todo otro código en la página.

<- Tu html ->


<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional
// EN"
"Http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
...

 Entre <head> </ head>


Se insertará el código HTML entre las etiquetas <head> </ head> etiquetas.

<Head>
...
<- Tu html ->
</ Head>

 Dentro de <body>etiqueta
El HTML se inserta dentro de las etiquetas <body>.

<Bodyatributo = valor>

 Después de <body>etiqueta
Se inserta el HTML después de las etiquetas <body>.

<Body>
<- Tu html ->

...
</ Body>

 Antes de </ body>

<Body>
...

<- Tu html ->


</ Body>

 Finde la página

<Body>
...
</ Body>
<- Tu html ->

31
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Propiedades de la página
Seto editar las propiedades de la página activa.
Laventana de propiedades de una página se subdivide en las siguientes categorías:

 General
 Estilo
 MetaEtiquetas
 Misceláneo
 Eventos

30
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

SitioPropiedades
Cambiar las propiedades de página de todas las páginas dentro del proyecto de sitio web actual.
Estos valores también se utilizarán como los valores por defecto para las nuevas páginas. También
puede iniciar las categorías de propiedad individual (generales, de formato, Meta Tags, Internet
Explorer y Miscelánea). Esto puede ser útil si sólo desea actualizar las propiedades de formato, sin
afectar también los meta tags y otras categorías para todas las páginas.

Nota:
Algunas propiedades como el tamaño de página, el título y la extensión son únicos para cada página, por
lo que estos no pueden ser
cambiado para todas las páginas a la vez. Para evitar que accidentalmente cambiarlas y reescribiendo
las propiedades de todas las páginas, estas propiedades se han desactivado.
Las variables definidas por el usuario
Esteopción puede ser útil para obtener las variables globales para el proyecto, por ejemplo, para
actualizar rápidamente los derechos de autor u otro valor que cambia regularmente.
Lase reemplazarán las variables durante la publicación por el valor especificado. Puede utilizar
esta variable en cualquier lugar de los valores de página, texto o propiedad.

Ejemplo:
Nombre:$ COPYRIGHT $
Valor:Pablo Software Solutions
Esta voluntadreemplazar cualquier instancia de '$ COPYRIGHT $' en el proyecto 'Pablo Software Solutions.

SitioHTML
InsertarCódigo (Página) HTML que se incluirá en todas las páginas.
Aincluir el código HTML sólo para páginas específicas, utilice página HTML.
Aincluir código HTML en varias páginas, pero no en todas las páginas que puede utilizar Maestro Marcos.

31
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Propiedades de la página
- general

Títu
lo
Introduzca el título de la página web. Este título se mostrará en la barra de título de la ventana y de
resultados del motor de búsqueda de tu navegador.

Nombre del
menú
Estenombre será utilizado para los nombres de los elementos en las barras de navegación y barras
de menús que han permitido a la opción 'Sincronizar con Administrativa'. Por defecto, el nombre de
la página (como se especifica en el Administrador del sitio) y el nombre del botón son las mismas,
pero este campo le permite usar un nombre alternativo para el artículo.

PáginaAnc
ho
Especifica el ancho del área de trabajo de
la página.

Notas:
1. Este valorno es utilizado por el navegador, es sólo un valor interno utilizado por Web Builder
para indicar el espacio de trabajo disponible y para controlar las barras de desplazamiento
cuando el tamaño de la pantalla no es lo suficientemente grande como para mostrar el
contenido de la página.
2. LaCentro de opción del navegador utiliza este valor para calcular el centro absoluto de su
página, por lo que si usted ha diseñado su página para una resolución de 800x600, asegúrese
de que este valor se establece en 800 o bien su página no se centrará!

PáginaAltura
Especifica la altura del área de trabajo de la página.

Nota:
Este valorno es utilizado por el navegador, es sólo un valor interno utilizado por Web Builder para
indicar el espacio de trabajo disponible y para controlar las barras de desplazamiento cuando el
tamaño de la pantalla no es lo suficientemente grande como para mostrar el contenido de la página.

Objetivotamaño de la pantalla
Esteopción le ayuda a determinar el tamaño óptimo de página para una resolución de pantalla específica.
Controla el
Página de propiedades de anchura / altura. Por ejemplo, si selecciona '800x600', entonces la página de
anchura / altura se ajustará a 770x600.
¿Por qué?Debido a que usted tendrá que dejar un poco de espacio para la barra de desplazamiento
vertical, por lo que no puede usar la plena 800
píxelespara el contenido de la página.

Expedienteextensión
Normalmentesu página web se publicará con la extensión .html. En algunos casos podría ser necesario
para especificar otra extensión como .php de .asp en caso de que su página utiliza PHP o ASP.

Notas:
Si establece la extensión del archivo a algo distinto de .html, a continuación, su navegador puede no
ser capaz de obtener una vista previa de la página. Con el fin de previsualización PHP o ASP, debe
publicar la página en un servidor web que puede manejar estos tipos de páginas!

Despuéscambiando la extensión del archivo necesitará para volver a publicar todas las páginas enlazan
a ella, de lo contrario los enlaces todavía se refieren a la antigua nombre de la página.

32
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Tipo de Documento
Ladeclaración de tipo de documento es una instrucción para el navegador web acerca de la versión
del lenguaje de marcado de la página está escrita en.
ActualmenteWYSIWYG Web Builder soporta 2 tipos de documentos:

HTML4.01 Transitional (por defecto)


Lasalida generada será HTML y compatible con la especificación HTML 4.01 de W3C (al igual
que en las versiones anteriores de WYSIWYG Web Builder).

XHTML1.0 Transitional
Lasalida generada será XML y compatible con la especificación XHTML 1.0 del W3C.

HTML5
Lasalida generada será HTML y compatible con la especificación HTML 5 de W3C. Para
algunas características (como eventos HTML5, estilos CSS3. Esta opción debe ser
seleccionada)

Seleccionar tipo de documento 'Ninguno' si no desea incluir la declaración DOCTYPE en el resultado de


la página. La salida generada será HTML 4.01 Transitional en ese caso.

FavoritosIcono
Ustedpuede utilizar iconos favoritos (también conocidos como iconos de acceso directo) para mostrar
su logotipo o algún otro pequeño gráfico en el menú Favoritos, dirección o fichas de página de su
navegador. Ellos son una gran manera de añadir el reconocimiento de marca a su sitio Web.
Un icono de acceso directo debe ser cuadrada en tamaño, y al menos 16 x 16 píxeles. Considerar la
creación de un icono 16 x 16 píxeles, así como un icono de 32 x 32 píxeles (y más grande, ancho de
banda permite), puesto en alto DPI pantallas, el navegador puede estirar el icono para ajustarse al
espacio disponible.

Acrear el icono, utilice un editor de iconos, como Axialis IconWorkshop, IcoFX o Microangelo Toolset y
guardar el icono en el formato de archivo .ico.

Página del Centro en la ventana del navegador


Al activar esta opción se centrará la página publicada en la ventana del navegador.
Mássitios web profesionales están diseñados para que se vea bien en diferentes tamaños de pantalla.
Debido Web Builder utiliza el posicionamiento absoluto para todos los elementos, que no pueden ser
estirados sobre el pleno
anchoy la altura de una página, porque eso haría 'lucha' el contenido de la página y esto no se vería
bien;)

Aquíson algunos consejos para el diseño de sus páginas para que se muestran en el centro del navegador:
 Setlas propiedades de la página a 800x600.
 Habilitar la Guía de Fronteras y los puso en el mismo tamaño.
 Asegúrese de que todos los contenidos de la página se queda entre los bordes de guía.
 Habilitar 'Centro al navegador en Propiedades de página.

Para más detalles vea también:http://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=153

Página del Centro de forma horizontal


y vertical
Esteopción le permite centrar la página web, tanto horizontal como verticalmente en la ventana del
navegador. Si el contenido de la página es mayor que el tamaño de la pantalla, no estará centrado.
Ver también la página del Centro en la ventana del navegador.

Alineara la izquierda, sino que incluyen página anchura / altura


(recomendado por eBay)
Esteopción puede ser útil para los diseñadores que desean utilizar sus páginas para anuncios de eBay.
La anchura y la altura de los atributos se añade la página al estilo de página.

33
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

No publicar estepágina
Active esta opción si no desea esta página a publicarse si su seleccione Publicar sitio web completo.
Posible razón de esto puede ser:
1. Estepágina actualmente no es parte de la página web o en construcción
2. Lapágina sólo se utiliza como parte de sus otras páginas, por ejemplo. Master Page.
3. LaLa página no se cambia lo que no hay necesidad de publicar de nuevo.

No sincronice estepágina en objetos de navegación


Cuando esta opción está habilitada la página no aparecerá en objetos de navegación que se sincronizan
automáticamente con el administrador del sitio.

No Incluya esta páginaen el índice de búsqueda.


Cuando esta opción está habilitada la página no se incluirá en el índice de búsqueda.

No Incluyeesta página en el mapa del sitio.


Cuando esta opción está habilitada la página no se incluirá en el mapa del sitio.

Conjunto de caracteres
Lajuego de caracteres indica al navegador cómo interpretar y mostrar a los personajes en su página web.
Dependienteen el idioma del texto en la página podría ser necesario forzar al navegador a otro
conjunto de caracteres. Los conjuntos de caracteres usados más comunes son: ISO-8859-1 (ANSI) y
UTF-8 (Unicode).

Nota:
Este ajusteno va a cambiar nada para el camino Web Builder muestra sus páginas. Es sólo será utilizada
por los navegadores.

PáginaIdioma
Especifica el idioma (Content-Language) de la página. Los motores de búsqueda pueden usar esta
etiqueta para clasificar
páginas por idioma.

Nota:
Este ajusteno va a cambiar nada para el camino Web Builder muestra sus páginas. Este valor sólo será
usadopor los motores de búsqueda.

Dirección
Especifica la dirección de texto para el contenido de la página. Esto puede ser propiedad conjunto de
"izquierda-derecha" o "derecha-izquierda".

Establecer como predeterminado


Guarda los valores actuales como valores por defecto para las nuevas páginas.

Nota:
UstedTambién puede actualizar las propiedades de página de todas las páginas a la vez utilizando Menú->
Página-> Propiedades del sitio!

34
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Propiedades- Estilo

Modo fondo
Especifica el modo de fondo.

 Transparente
Lafondo de la página será transparente. Tenga en cuenta que normalmente esto significa que
la página será blanco, porque no se puede mira a través de la ventana del navegador ...

 Sólido
Use un color de fondo sólido.

 Imagen
Utilizar una imagen como fondo.

Repetición
Conjuntosatribuye el suelo de baldosas de la imagen de fondo. Las opciones posibles son:
- Repeticiónen ambas direcciones
- Repeticiónen la dirección horizontal
- Repeticiónen dirección vertical
- No repita

Horizontal Alinear
Conjuntosla posición horizontal de la imagen de fondo.

Alineación vertical
Conjuntosla posición vertical de la imagen de fondo.

VolutaFondo
Lafondo se desplazará ingenio hthe resto del contenido de la página (por defecto).

FijoFondo
Un fondo fijo es una imagen de fondo que se quedará en un solo lugar, mientras que el resto
de su texto
y las imágenes se desplazan sobre la parte superior de la misma.

Antecedentes Stretch
Laimagen de fondo se ampliará en función del tamaño de la ventana del navegador mientras
trata de mantener la relación de aspecto de la imagen.

 Gradiente
Use un (bicolor) gradiente de fondo.
El gradientepuede ser o bien horizontal o vertical. Por defecto una imagen de fondo será
generadopara el efecto de degradado. Sin embargo, usted también puede usar gradientes
CSS3 activando la opción 'gradientes CSS3 uso en lugar de imágenes' en Herramientas->
Opciones-> HTML. Tenga en cuenta sin embargo, que no todos los navegadores soportan CSS3
todavía.

 Degradado de color Multi


Use un (varios colores) gradiente de fondo. WYSIWYG Web Builder incluye muchas
predefinido
múltiplesestilos de degradado de color, pero usted puede crear fácilmente su propio estilo
con el Administrador de degradado.

 Patrón
Utilice un patrón como fondo. Una nueva imagen se generará automáticamente para el
patrón.

35
WYSIWYG Web Builder 10 Pablo
 Textura SoftwareSoluciones
Utilice una textura como fondo. Una nueva imagen se generará automáticamente para la
textura.

36
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Color de los vínculos


Especificael valor por defecto, el color hipervínculos no visitados.

VisitadoColor de los vínculos


Especificael color de un enlace seguido.

ActivoColor de los vínculos


Especificael color de un enlace activo.

Hover Enlace color


Especificael color de todo ciernen enlaces de la página activa.

Subrayarmodo
Especifica si siempre se destacaron los vínculos o sólo cuando el ratón está sobre el enlace.

Nota:Ustedtambién puede controlar los colores de los hipervínculos mediante hojas de estilos de
hipervínculo. Para obtener más información, consulte la descripción en el capítulo 'Links'.

DefectoFuente, tamaño y color


Especifica la fuente predeterminada, el tamaño de fuente y el color del texto que se utilizará para el texto
que introduzca en la página.

Tema
Especifica el tema (basado ThemeRoller) para la página. Este tema se aplica a todos los objetos del
tema habilitado como widgets de jQuery UI. Además de jQuery UI Widgets también puede activar la
tematización de la barra de menú, barra de navegación, menú de la ficha, SlideMenu, línea horizontal.
De esta manera usted puede darle página una apariencia uniforme. Los temas pueden ser creados y
editados con el Theme Manager.

Establecer como predeterminado


Guarda los valores actuales como valores por defecto para las nuevas páginas.

37
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Propiedades de la página - Meta Tags

Autor
Laautor etiqueta meta se utiliza para indicar que el autor de la página web es.

Palabras clave
La meta de palabras clavela etiqueta puede ser importante cuando se trata de algunos motores de
búsqueda.
Cuando índice de estos motores de búsqueda robot automático su sitio, algunos se busque una etiqueta
meta de palabras clave para su uso como términos de índice.
Cuando alguien utiliza su motor de búsqueda y búsquedas en una palabra que está en su lista manso meta
de palabras clave,
su sitio será incluido en los resultados de búsqueda de salida.

Co
Lapalabras
nse clave son típicamente separados por una coma (,)
jo:
Descripción
LaDescripción etiqueta meta puede ser importante cuando se trata de algunos
motores de búsqueda. Hay muchos motores de búsqueda que indexar su sitio de
forma automática.
Algunos de estos motores de búsqueda permiten una breve descripción que se colocará en su página web.
Si los motores de búsqueda están buscando en su página web para una etiqueta meta descripción,
utilizará esta descripción en el índice de búsqueda.

Categorías
Especifica a qué categorías pertenece la página. Esta etiqueta meta se utiliza por el objeto sitetree
categorizar páginas.
Ejemplo: descargas,productos, diversión, negocio, personal, etc.

Consejo:pueden asignar varias categorías a una página. Las categorías deben estar separados por una
coma (,)

Generador
Típicamenteel nombre de la aplicación utilizada para crear la página.

Definido por el usuario


Aquíusted puede insertar sus propias etiquetas meta personalizado. Estos serán insertados antes de todas
las otras etiquetas meta derecha
después de la etiqueta <head>.

Ejemplo:
<Meta http-equiv = "Cache-control" content = "no-cache">
<Meta name = "expira" content = "mar, 01 de junio 2010 19:45:00 GMT">

Establecer como predeterminado


Guardalos valores actuales como valores por defecto para las nuevas páginas.

38
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Propiedades- Varios

Fotograma máster
Especifica la página utilizada para el fotograma maestro. El contenido de esta página se colocará en el
interior del contenido
Coloque Titular de ese fotograma maestro cuando la página está siendo vista previa o publicada.
Aeliminar un nombre seleccionado anterior, haga clic en el botón "Eliminar". Más detalles: Marcos
Máster

Redirigir
LaRedirigir propiedad redirige al usuario a otra página después de un retraso específico (mediante el
uso de la 'refrescar' etiqueta meta).
RedirigirA
 Hacerninguna redirección
Desactiva la función de redirección.
 Sitio Web
Redirigirel usuario a una página externa.
 Página Interna
Redirigiral usuario a una página (interno) de su sitio web.

RedirigirURL
Especifica la URL donde el usuario será redirigido a.

Redirigir Delay
Especifica el retraso redirección. 0 (cero) significa que no hay demora.

Search Engine Optimization


Búsquedaoptimización de motores (SEO) es el proceso de mejorar el volumen o la calidad de tráfico a un
Web
sitioo una página web de los motores de búsqueda.
La teoríaes que los anteriores (o superior) de un sitio aparece en la lista de resultados de búsqueda, los
visitantes más lo hará
recibir deel motor de búsqueda.
Estosvalores pueden ayudar a mejorar su SEO, motores de búsqueda, sin embargo modernos utilizan
técnicas más avanzadas para indexar su sitio web.
Más detalles:http://en.wikipedia.org/wiki/Search_engine_optimization

Robots
LaRobots Meta Tag se utiliza contar a los motores de búsqueda si desea indizar y / o rastrear una página o
no.

Volver a visitardespués
LaRevisar Meta Tag se utiliza contar a los motores de búsqueda cuando volver el próximo.

Expiradespués
LaExpira Meta Tag se utiliza contar a los motores de búsqueda cuando la página y el contenido ya no es
válido.

39
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Desbordamiento
Estospropiedades especifican si el contenido se recorta cuando se desborda la ventana del navegador.
'Desbordamiento-x' determina el recorte en los bordes izquierdo y derecho, 'desbordamiento-y' en
los bordes superior e inferior.

 ninguno
Laatributo de desbordamiento no será añadido a la página de HTML. En este caso el
comportamiento de desplazamiento puede ser
diferente para cadael tipo de
navegador.
 visible
Este valorIndica que el contenido no se recorta, es decir, pueden dejarlo fuera del
explorador
ventana
.
 oculto
Este valorindica que el contenido es recortado y que ningún mecanismo de
desplazamiento se debe proporcionar a ver el contenido fuera de la ventana del
navegador.
 voluta
Este valorindica que el contenido es recortado y que si el navegador muestra scrolbars.
Esteevita cualquier problema con las barras de desplazamiento aparecen y desaparecen en
un entorno dinámico en el que las páginas tienen diferentes tamaños.
 auto
El comportamiento deel valor 'auto' es depende del explorador, pero debe causar un
mecanismo de desplazamiento que deberá facilitarse a rebosar de cajas.

DisposiciónModo
 CSSdisposición
El recomendadomodo de diseño. Este modo utilizará CSS (posiciones absolutas) para crear el
mejor
posiblediseño. Todos los objetos serán colocados de forma individual, por lo que se pueden
superponer objetos y colocarlos donde quieras. También da lugar a código HTML muy limpio.
 MesaLayout (no recomendado!)
Este modoutiliza tablas (invisibles) para colocar objetos en la página. No permite que objetos
que se solapan! Esta técnica fue utilizada por los diseñadores web antes de CSS fue apoyada por
todos
navegado
res.
Tenga en cuenta que hoy en día todos los navegadores hacen apoyar diseños CSS y de
mesa a base se consideran vieja tecnología pasada de moda. Sin embargo disposiciones de
la tabla pueden ser útiles para News Letters porque los clientes de correo electrónico por
lo general no son compatibles con CSS.
Ver'Creando Newletters' más adelante en este documento para
obtener más detalles.

Usoz-index para la orden objeto


Por defecto, todos los objetos utilizan el atributo 'z-index' para establecer la posición en el orden z de la
página. Si por alguna
razónUsted no quiere esto, entonces usted puede desactivar
esta opción. No cambie este valor a menos que sepa lo que
está haciendo!

Deshabilitar barra de herramientas de imagen de Internet Explorer


Normalmente InternetExplorador colocará una barra de herramientas de la imagen de arriba imágenes
en una página web que permite al usuario guardar o imprimir la imagen. Para detener la barra de
herramientas aparezca en las imágenes de su sitio, habilite esta opción.

40
WYSIWYG Web Builder 10 Pablo
Compatibilidad SoftwareSoluciones
Esteopción permite que Internet Explorer emular previamente versiones de este navegador. Esto
puede ser útil en caso de experimentar problemas de visualización en IE que no existían en las
versiones anteriores del navegador. Más información:http://msdn.microsoft.com/en-
us/library/cc288325(VS.85).aspx#SetMode

41
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Propiedades- Eventos
Para obtener más información acerca de eventos, por favor ve a leer los capítulos Eventos.

Propiedades- JQuery Mobile


Lasiguientes propiedades de la página son sólo para las páginas web para móviles.

Tema
Especifica el tema de jQuery Mobile para la página actual y todos los objetos de esa página. Los temas
pueden ser editados con el tema Mobile Manager.

Swatch
Cada tema puede tener hasta 26 variaciones (Muestras).
En la propiedad Swatch puede seleccionar una de esas variaciones.

Usar AJAX
jQueryMobile se encargará automáticamente de enlace clics y envíos de formularios a través de Ajax,
cuando sea posible. Si
falsa,Escucha de hash URL se desactivará también, y URLs cargará peticiones HTTP como ordinarios.

Transición
Especifica la transición de página. Las transiciones de página sólo funcionan si AJAX está activado ..

40
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Insertar

Másde los elementos del menú también están disponibles a través de la caja de herramientas. Más
detalles sobre los objetos disponibles se pueden encontrar en WYSIWYG Web Builder objetos más
adelante en este documento. A pocas opciones adicionales están disponibles en la ficha Insertar:

Seleccionar
LaSeleccionar objeto se utiliza para seleccionar objetos. Para seleccionar varios objetos, arrastre un
cuadro de selección alrededor de ellos, o mantenga pulsada la tecla Mayúsculas mientras hace clic en
uno de ellos a la vez.

Símbolo
Insertarun símbolo (caracteres especiales) en un objeto de texto. Esta opción sólo se activa cuando se
encuentra en modo de edición de texto.

Enlace
Abreun diálogo de enlace para el objeto o el texto
seleccionado. Echa un vistazo a capítulo 'Links', para
más detalles.

41
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Formato

Másherramientas de formato se aplican al texto solamente. WYSIWYG Web Builder le permite hacer
todo el mismo atributo cambios que puede hacer en (por ejemplo) MS Word. Para editar el formato
del texto en primer lugar debe hacer doble clic en el objeto de texto para ir al modo de edición y, a
continuaciónpunto culminanteel texto que desea modificar con el ratón y seleccionar la opción de
formato.

Tipo de fuente
Tipo de fuente es la familia de fuentes de texto, como Comic Sans, Times New Roman y Courier New.
Acambiar el tipo de fuente, seleccione la fuente que desee en el cuadro de lista Tipo de fuente de la barra
de herramientas.

Estilo de fuente
Lael estilo del texto o bien puede ser negrita, cursiva o subrayado.
Acambiar el estilo de fuente, seleccione uno o más de los iconos de estilo en la barra de herramientas.

Color de fuente
Lacolor del texto también se puede cambiar.
Acambiar el color de fuente, seleccione el texto Icono de color en la
barra de herramientas. Aparece el cuadro de diálogo Color. Elija el
color que desee y haga clic en Aceptar.

Color de fondo
Acambiar el color de fondo del texto seleccionado, haga clic en el icono de fondo de color en la barra
de herramientas. Aparece el cuadro de diálogo Color. Elija el color que desee y haga clic en Aceptar.

Cambio Case-> caso de la oración


Capitalizala primera letra de cada frase del texto seleccionado.

Cambio Case-> Minúsculas


Conjuntostodo el texto seleccionado a minúsculas.

Cambie Case-> Mayúsculas


Conjuntostodo el texto seleccionado a mayúsculas.

Cambio Case-> Capitalizar Cada Palabra


Capitalizala primera letra de cada palabra del texto seleccionado.

Cambio Case-> caso Toggle


Alternael caso de cada letra del texto seleccionado.

Disminuir sangría
Disminuir el margen izquierdo (guión) de la línea de texto actual.

Aumentar el guión
Aumentar el margen izquierdo (guión) de la línea de texto actual.

Espaciado entre letras


Conjuntosla cantidad de espacio adicional entre letras en el texto.

Líneaaltura
Conjuntosla distancia entre líneas en el objeto.

Tamaño de la Fuente
Acambiar el tamaño de fuente, seleccione una de disponibles tamaños de fuente HTML.

42
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Alineación de texto
Ustedpuede cambiar la alineación del objeto de texto seleccionado mediante el uso de uno de los
botones de alineación: izquierda, centro, derecha o Justificar.

Eliminar el formato
A veces puede ser útil para eliminar todo el formato de un trozo de texto a la vez. Resalta el texto y
seleccione Eliminar formato para restablecer todos los estilos a sus valores predeterminados. Al
formatear la retirada del texto incluyen negrita, cursiva, subrayado, subíndice, superíndice, tachado,
color del texto y el color de fondo.

Retire enlace
Eliminael vínculo que se le asignó al texto seleccionado.

Búsquedaen Google
Cuando esté editando texto este comando buscará la palabra seleccionada en Google. El ordenador
debe estar conectado a Internet.

Buscar en diccionario
Cuando esté editando texto este comando buscará la palabra seleccionada en la página web:
http://dictionary.reference.com/
Suequipo debe estar conectado a la Internet.

Estilos
En el Administrador de estilos se pueden gestionar los estilos de un proyecto. Mediante el uso de estilos
que puede modificar el estilo de
todo el sitio web en un solo lugar.

Estilos Generales
En la página HTML generales Estilo / estilos CSS se pueden definir, como estilos de encabezado
de texto (H1, H2,
H3 ...) o de elementos de forma estilos. Ver también: Gestor de estilos.

HiperenlaceEstilos
Por defecto, todos los hipervínculos en su página web utilice el enlace HTML predeterminados
colores como se define en las propiedades de la página. Pero usando estilos de hipervínculo
puede establecer el estilo de enlaces individuales.
a) Crearun nuevo estilo
b) En el enlace (texto) propiedades seleccionar el estilo se aplicará el estilo en la vista previa o
publicarla página.

GradienteEstilos
Utilice el Administrador de estilos de degradado para añadir / editar y eliminar (multicolor)
mundial gradientes efectos.
Gradienteefecto puede ser utilizado por las formas, imágenes prediseñadas TextArt y otras
herramientas de dibujo.

43
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Webfuentes seguras

Información actualizada de WYSIWYG Web Builder 10 y superiores:


Ustedahora puede permitir a @ font-face para poder utilizar no web fuentes seguras. Más información
está disponible en la parte inferior de esta página.

Safe Web (o "web seguro", "seguro para la Web") fuentes son fuentes que son comunes entre todas las
versiones de Windows, Mac y Linux. Recomendamos el uso de fuentes web seguras si quieres que tus
páginas web tienen el mismo aspecto en todos los equipos.

Listade fuentes seguras


web: Arial
Bookman Old Style
Comic Sans MS
Courier
MensajeroNuevo
GeorgiaImpac
to
Lucida Console
Lucida Sans Unicode
MS Sans Serif
MS Serif
Palatino Linotype
Símbolo
Tahoma
VecesNew Roman
Trebuchet MS
Verdana
Webdings
Wingdings

Ustedpuede activar la opción "Herramientas-> Opciones-> Misc-> Pantalla web fuentes no seguras ',
también lo harán los tipos sólo mostrarse con seguridad web WYSIWYG Web Builder.
Esto también puedeaumentar la velocidad de la interfaz de usuario, porque no todas las fuentes tienen
que ser cargado en
memoria cada vezdesea seleccionar un tipo de letra diferente.

Por supuesto, esta limitación de la fuente es sólo para los objetos basados en texto. Así que usted
puede utilizar otras fuentes para botones de la barra de navegación, banners y otros objetos en función
de imagen. Objeto de texto Web del constructor también tiene una opción para publicar el texto como
una imagen.

Uso@ Font-face
Durante mucho tiempo sólo era posible utilizar un número seleccionado de fuentes web seguras en
sus diseños web. Sin embargo ahora se puede utilizar cualquier fuente al permitir 'Usar @ font-face
para no web fuentes seguras "de WYSIWYG Web Builder opción (Menú-> Herramientas-> Opciones->
HTML)!
Si habilita esta opción usted será capaz de utilizar cualquier tipo de fuente true tipo, incluso si no es
seguro mediante el uso de una nueva característica CSS3 llamada @ font-face web. WYSIWYG Web
Builder generará automáticamente el código necesario y subir el tipo de letra en el servidor. Incluso
se genera un archivo (EOT) secundaria requerida para hacer esta operación de trabajo con IE!

44
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Mesa
LaTabla de menús contiene todas las operaciones relacionadas con la creación y modificación de
tablas. Las tablas tienen columnas y filas de células que pueden contener texto (imágenes, formularios
u otros elementos de la página no son compatibles por el momento). Las tablas son útiles para el
diseño de los datos; que pueden ser utilizados para simular columnas de texto. Cuando escribe texto
en una celda de la tabla que se expande horizontalmente y verticalmente para acomodar el texto que
se escriben o se inserta. Puede editar, formatear y especificar las propiedades (color o imagen de
fondo) para el texto, así como para la celda de tabla, fila, columna o tabla en sí. Usted puede cambiar
el tamaño de las células fácilmente, columnas, filas o la totalidad de la mesa por las fronteras
arrastrando.

Insertar tabla
Dibuje un cuadro en el que desea colocar la tabla.
Aparece el diálogo Insertar tabla.
Introduce el número de celdas y filas requeridas.
Introduzca diseño y tamaño detalles y haga clic
en Aceptar

Insertar filas o columnas


Seleccionaresta opción si necesita insertar filas y columnas adicionales después de una tabla se ha
creado. Especifique si desea insertar filas de columnas e introduzca el número de filas / columnas
a añadir. Para insertar una columna a la izquierda de una columna seleccionada, elijaIzquierdade
selección.
Para insertaruna columna a la derecha de la columna seleccionada, elijaDerechode selección.
Para insertaruna fila por encima de una fila seleccionada,
elijaPor encima de Selección. Para insertar una fila debajo de
una fila seleccionada, elijaA continuación Selección.

Combinar celdas
Fundirsedos o más células adyacentes. Este comando sólo está disponible cuando dos o más celdas
adyacentes se seleccionan en la misma fila.

DivisiónCélula
Dividir la celda seleccionada en columnas.

BorrarColumna
Seleccione esta opción para eliminar la columna seleccionada.

BorrarFila
Seleccione esta opción para eliminar la fila seleccionada.

MesaAncho de columna
Setel ancho de columna para la columna seleccionada.

MesaAlto de fila
Setel alto de fila para la fila seleccionada.

Clase
Ordenar texto (ascendente / descendente) de una columna de tabla o fila.

45
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

MesaPropiedades

Tamaño del borde


Introduzca el ancho desea que la frontera sea, en píxeles.
CélulaAcolchado
Introduce la cantidad de espacio que desea entre el contenido y los bordes interiores de las células, en
píxeles.
CélulaEspaciamiento
Introduce la cantidad de espacio que desea entre las celdas de la tabla en píxeles.
Color de fondo
Especifica el color de fondo del formulario. Si se establece en el fondo 'Automatic' página web será
utilizada.
Imagen de fondo
Especifica la imagen de fondo opcional.
Fronteracolor
Especifica el color de los bordes de la tabla. Si se establece en "Automático" la mesa tendrá un borde 3D.

Tabla HTML
Ver genera HTMLde la mesa. También puede insertar su propio código HTML!

Propiedades de celda
Editar propiedades de la celda seleccionada:
Color de fondo
Especifica el color del fondo del texto. Si se establece en el fondo 'Automatic' página web será utilizada.
Imagen de fondo
Especifica la imagen de fondo opcional.
Repetición
Conjuntosatribuye el suelo de baldosas de la imagen de
fondo. Las opciones posibles son:
 Repeticiónen ambas direcciones
 Repeticiónen la dirección horizontal
 Repeticiónen dirección vertical
 No repita

Horizontal Alinear
Conjuntosla posición horizontal de la imagen de fondo.
Alineación vertical
Conjuntosla posición vertical de la imagen de fondo.

HTML celular
Ver genera HTMLde la celda seleccionada. También puede insertar su propio código HTML!

Consejos de mesa:
1. Si bien el cambio de tamaño de la tabla mantenga presionada la tecla Ctrl para cambiar el
tamaño de la última columna / fila de una tabla con
afectandoel tamaño de las otras columnas / filas.
2. Para seleccionar múltiplescélulas mantenga presionada la tecla Ctrl mientras selecciona las
celdas.
3. Para seleccionartoda la fila, mueva el cursor del ratón al borde izquierdo de la primera célula.
4. Para seleccionartoda la columna, mueva el cursor del ratón al borde superior de la primera
célula.
5. Acambiar las propiedades de varias celdas en una sola acción, primero seleccione las celdas y
haga clic en Propiedades de celda.
6. Para centraruna imagen en el medio de una célula, Propiedades de celda abierta, especifique
la imagen de fondo, elija Repetir 'No repita' y ajuste horizontal / vertical Alinear para 'Centro'.

46
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Arreglar
Laordenar menú contiene todas las operaciones relacionadas con el diseño de la página actual.

Alinear
Izquierdas
Alinealos bordes izquierdos de los objetos seleccionados con el objeto dominante.

Centros
Alinealos centros de los objetos seleccionados con el objeto dominante

Derechos
Alinealos bordes derechos de los objetos seleccionados con el objeto dominante

Tops
Alinealos bordes superiores de los objetos seleccionados con el objeto dominante

Middles
Alinealos puntos medios de los objetos seleccionados con el objeto dominante

Bottoms
Alinealos bordes inferiores de los objetos seleccionados con el objeto dominante

Espaciado uniforme
A través de
Igualmenteespacios los controles seleccionados horizontalmente

Abajo
Igualmenteespacios los controles seleccionados verticalmente

Centro de Página
Vertical/ Horizontal
Centra los controles vertical u horizontalmente dentro de la página web

Haga mismo tamaño


Ancho
Cambia el tamañolos objetos seleccionados tengan la misma anchura que el objeto dominante

Altura
Cambia el tamañolos objetos seleccionados tengan la misma altura que el objeto dominante

Ambos
Cambia el tamañolos objetos seleccionados tengan el mismo tamaño que el objeto dominante

Arreglar
Mover al principio
Movimientooponerse al frente de la página

Mueva con espalda


Movimientooponerse al reverso de la página

Avanzar
Movimientoobjeto a la siguiente posición en el orden-z

Retroceder
Movimientoobjeto a la posición anterior en orden z

47
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Grupo
Ustedpueden agrupar varios objetos, por lo que se mantienen unidos cuando se mueva. Al seleccionar
un objeto de un grupo, los demás objetos se seleccionarán automáticamente también. Los objetos
agrupados no se pueden editar hasta que los desagrupar.

Desagrupar
Objetos Desagrupar.

La fusión de objetos
Mediante el uso de esta opción puede combinar varios objetos en una sola imagen! Esto puede ser
útil para la fusión múltiple (capas) da forma en una sola imagen para reducir el número de imágenes
publicadas y acelerar los tiempos de carga.
Esteopción básicamente convertir cualquier objeto (o grupo de objetos) en una imagen. Así que si esto
se utiliza para objetos como formularios, botones, menús y luego van a perder su funcionalidad
original, ya que se publicarán como una imagen estática.

Consejo:
UstedTambién puede utilizar esta opción en un solo objeto. Esto puede ser útil para convertir una
imagen o forma a otro formato de imagen.

Por ejemplo:
Digamosde haber aplicado un efecto de sombra a una imagen. El formato de salida de la imagen será
entonces PNG. Ahora seleccione 'Merge' en el menú. La imagen se convierte en un "objeto fusionado ',
ahora se puede seleccionar otro formato de salida como jpg que se traducirá imagen de salida de un
menor en).
Q: Pero espere .... ¿qué pasará con la transparencia de la sombra?
R: El objeto fusionado hará una "instantánea" de los objetos de fondo y utilizar esa imagen de fondo!

Combinar objetos
Fundirselos actualmente seleccionar objetos.
En las propiedades de este objeto se puede especificar el formato de salida de la imagen.

DivisiónObjetos
Esteopción dividirá objetos fusionados anteriores.

Girar
Estecomando se activará el modo de rotación. Puede girar imágenes y objetos de
forma. Para obtener más información, véase también: Rotación

Bloqueo / Desbloqueo
Esta voluntad'Bloquear' los objetos seleccionados, de modo que no se pueden mover o cambiar el
tamaño de forma accidental. Tenga en cuenta que esto también le impedirá la edición de las
propiedades de los objetos a menos que active la opción "Permitir objetos bloqueados a editar" en el
Herramientas-> Opciones-> Configuración avanzada. Para desbloquear el objeto de nuevo, repita el
mismo comando.

Bloquear todo
Esta voluntadbloquear todos los objetos en la página activa.

DescubrirTodos
Esta voluntaddesbloquear todos los objetos de la página activa.

48
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Ajustes de
guía

Chasquidoa las
guías de regla
Activar o desactivar el complemento
a las guías de regla

Mostrar tabla celularContornos (si


border = 0)
Cuando se activa esta opción Web Builder dibujará celda de tabla resume incluso si la frontera
es cero.

ShowGuía Fronteras
Guíafrontera puede ser útil en el diseño de una página web para resoluciones específicas. Si se
asegura de todos los objetos se mantienen entre la frontera de guía, la página final cabrá en el
tamaño de la ventana deseada.

Showguías inteligentes cuando se alinean


los objetos
Inteligenteguías son pautas dinámicas que aparecen al mover objetos en la alineación con la otra.

Tamaño de página de bloqueo (sin ajuste


automático de página)
Normalmente WebConstructor se actualizará automáticamente el tamaño de página si coloca un
objeto fuera de la página
fronteras.Cuando esta opción está activada, el ancho de la página será bloqueado incluso si coloca
objetos fuera de la frontera. Si desea un espacio de trabajo más grande que usted tendrá que actualizar
la página de anchura / altura manualmente en ese caso (usando Propiedades de la página).

ShowCua
drícula
Mostrar u ocultar
la cuadrícula.

Chasquidoa
la
cuadrícula
Permite activar o desactivar Ajustar a cuadrícula. Utilice la función Ajustar a la cuadrícula para alinear
objetos con exactitud. Web Builder crea una atracción "magnética" entre el objeto seleccionado y de la
red.

Espaciado
de
cuadrícula
Especifica la separación entre los puntos de
rejilla.

Mostrar información sobre herramientas, mientras


quecambiar el tamaño y los objetos y las guías de
movimiento
Active esta opción si desea ver la posición actual (mientras se mueve) o tamaño (mientras cambia el
tamaño) del objeto actual en una punta de la herramienta sobre el cursor del ratón.
También funciona mientras mueve las
guías de regla!

Nota:
Esteopción puede hacer que los objetos que hacen un poco más lento durante la mudanza / cambio de

49
WYSIWYG Web Builder 10 Pablo
tamaño debido a que la información de herramienta necesita ser actualizada SoftwareSoluciones
constantemente.

EditarPuntos
Esteopción se puede utilizar para polígonos y curvas para agregar, editar y eliminar nodos.
Acomenzar a editar nodos, primero seleccione el Polígono o curva y luego seleccione 'Editar puntos'
del menú. Para editar nodos existentes simplemente mantenga pulsado el botón izquierdo del
ratón y arrástrelo a su nueva posición.
Aagregar un nuevo nodo, haga clic en cualquier parte de la línea y arrastre el punto a la
posición deseada. Para eliminar un nodo, mantenga presionada la tecla CTRL y haga clic
en el nodo con el botón izquierdo del ratón.

50
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Las guías
Las guías horizontales y verticales se utilizan para alinear objetos en la
página.
Normalmente gobernanteguías se colocan en la página arrastrando desde las reglas horizontal y vertical
o especificando posiciones precisas utilizando el cuadro de diálogo "Formato guías de regla.
Alternativamentepuede utilizar la opción de menú "Añadir Guía Regla Horizontal 'o' Agregar Vertical
Guía Gobernante 'a
insertaruna nueva
guía.

Amover la guía de regla, coloque el puntero del ratón sobre la guía, hasta que vea el puntero vertical u
horizontal Ajuste y luego arrastra la guía a su nueva posición.

Ustedpuede eliminar una sola guía de regla o todas las guías de una página. Coloque el puntero del
ratón sobre la guía de regla que desee eliminar hasta que vea el puntero ajustar y arrastre de nuevo a
la regla. O puede utilizar el cuadro de diálogo "Formato guía de regla 'para eliminar la regla.

Aeliminar todas las guías en una página, seleccione el menú Organizar, vaya a las guías de regla y haga
clic en Borrar todas las guías.

Objetos quese colocan cerca de una guía de "ajustar a" la guía para facilitar la
alineación.

50
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Instrumentos

Asset Manager
LaAsset Manager puede ser útil para modificar la ubicación de uno o más activos (imágenes, películas,
sonidos
etc)sin la necesidad de abrir las propiedades de cada elemento. Puede seleccionar el grupo de
elementos se mostrará en el Administrador de Activos (Filter).

Acambiar la ubicación de sólo 1 de los activos, sólo tiene que seleccionar el elemento, haga clic en el
botón "Actualizar" y seleccione la nueva ubicación. Para cambiar la ubicación de múltiples activos,
seleccione los elementos, haga clic en el botón "Actualizar" y seleccione la nueva ubicación. Esto
significa que usted puede actualizar la ubicación de todos los activos con unos pocos clics!

También es posible mover activos a otra ubicación. En ese caso, se realizará una copia de los activos
a la ubicación especificada y actualizar la ruta en el editor. Tenga en cuenta que no se eliminará el
archivo original!

Otra característica interesante de la Asset Manager es la capacidad de mostrar todos los archivos
huérfanos en la carpeta del proyecto. Seleccione los archivos Filtro-> huérfanos para mostrar una lista
de todos los activos ya no se utilizan en el proyecto actual. Ahora usted puede seleccionar y eliminar
los archivos de la carpeta del proyecto.

Backup Manager
Cada vez que guarde su proyecto el software creará automáticamente una copia de seguridad de la
versión anterior
del proyecto. El comportamiento de copia de seguridad se puede configurar en Herramientas-> Opciones-
> Copia de seguridad

LaBackup Manager puede utilizarse para restaurar fácilmente y eliminar copias de seguridad creadas
automáticamente. El Backup Manager mostrará la hora y fecha de la copia de seguridad y el nombre
del archivo. Los archivos de nuevo subido tendrán nombres de archivo como: myproject_01.wbs,
myproject_02.wbs, myproject_03.wbs. El archivo de número más alto será siempre la última copia de
seguridad.

Arestaurar una copia de seguridad, seleccione el nombre de archivo y haga clic en "Restaurar". El
archivo se trasladó de nuevo a la carpeta del proyecto y renombró a su nombre original.

Notas:
- LaBackup Manager anulará la versión actual del proyecto!
- Una copia de seguridad no puede ser restaurado si el proyecto está actualmente en uso. Así que
cierra el proyecto antes de usar el Administrador de Volver.
51
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Página Peso
LaHerramienta de peso página le ayuda a determinar el tamaño y descarga tiempo estimado de una
página.
Laherramienta mostrará una lista de todos los archivos que forman parte de la página y sus tamaños.
Al seleccionar la velocidad de conexión puede tener una idea de cuánto tiempo se tardará en
descargar la página completa. Tenga en cuenta que algunos archivos (como scripts, imágenes) son
utilizados por varias páginas. Se pueden descargar una sola vez!

Verifique Links
Esteopción escanea los documentos para los enlaces y las muestra en una lista.
Ustedpuede optar por editar o pulse el botón Verificar para validar su estado actual.

Estados posibles:
No verificado - No verificado todavía
Validado URL - URL es válida
URL extraviado - URL no es válido (o actualmente no accesible)

Esteherramienta puede ser útil cuando se desea para verificar todos los enlaces para que usted no
tiene que verificar uno por uno.

52
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Mapa del Sitio


El mapa del sitioherramienta crea un mapa del sitio XML que se puede enviar a Google y otros motores de
búsqueda para
ayudarles arastrear su sitio web mejor.

Un mapa del sitio es un archivo XML que enumera las URL de un sitio. Se permite a los webmasters
para incluir información adicional sobre cada URL: cuando se actualizó por última vez, la frecuencia con
que cambia, y lo importante que es en relación con las demás URL del sitio. Esto permite a los motores
de búsqueda para rastrear el sitio con más inteligencia.

Esimportante que especifique la URL completa de su sitio web, por ejemplo,


http://www.wysiwygwebbuilder.com/
EsteURL debe comenzar con el protocolo (como http) y terminar con una barra final. Puede especificar
la frecuencia de cambio y la prioridad de cada página en su sitio web.

Cambio de frecuencia
¿Con qué frecuencia la página es probable que cambie. Este valor proporciona información general a
los motores de búsqueda y puede que no se corresponda exactamente con la frecuencia con que
rastrean la página.
Los valores válidos son: Siempre, cada hora, diario, semanal, mensual, anual, nunca

Lavalor "siempre" se debe utilizar para describir los documentos que cambian cada vez que se accede a
ellos. El valor "nunca" se debe utilizar para describir URLs archivados.

Tenga en cuenta que el valor de esta etiqueta se considera una sugerencia y no una orden. A pesar de
que los rastreadores de motores de búsqueda consideran esta información cuando se toman
decisiones, se pueden rastrear páginas marcadas "por hora" con menos frecuencia que eso, y que
pueden rastrear páginas marcadas "anual" con más frecuencia que eso. También es probable que los
rastreadores se arrastrará periódicamente páginas marcadas "nunca" para que puedan manejar los
cambios inesperados en esas páginas.

Prioridad
Laprioridad de esta página en relación con otras páginas de su sitio. Los valores válidos van de 0.0 a
1.0. Este valor no tiene ningún efecto en sus páginas en comparación con las páginas de otros sitios, y
sólo permite a los motores de búsqueda saben cuáles de sus páginas que considere más importante
para que puedan ordenar el rastreo de sus páginas en la forma en que le gusta más.
Laprioridad predeterminada de una página es de 0,5.

Tenga en cuenta que la prioridad que se asigna a una página no tiene influencia sobre la posición de las
páginas en las páginas de resultados de un motor de búsqueda. Los motores de búsqueda utilizan esta
información al seleccionar entre las páginas del mismo sitio, para que pueda utilizar esta etiqueta para
aumentar la probabilidad de que sus páginas más importantes están presentes en un índice de
búsqueda.

También,tenga en cuenta que la asignación de una alta prioridad a todas las páginas de su sitio no le
ayudará. Dado que la prioridad es relativa, que sólo se utiliza para seleccionar entre las páginas de su
sitio; la prioridad de sus páginas no se comparará con la prioridad de las páginas de otros sitios.

53
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Laúltimo paso es decirle a Google en los que puede encontrar su mapa del sitio. https: //
Www.google.com/webmasters/tools/docs/en/sitemap-generator.html#submitting

Laubicación del sitemap será algo así como:


http://www.yourwebsiteurl.com/sitemap.xml

Personaliza
Estecomando mostrará la ventana Personalizar.
Esteopción es sólo para usuarios avanzados y le permite personalizar casi todos los menús, barra de
herramientas o atajo de teclado de la aplicación.
Los usuarios queestán familiarizados con productos de Microsoft Office, probablemente reconocer la
mayoría de los ajustes disponibles.

54
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Opciones
Estecomando muestra la ventana de configuración de WYSIWYG Web Builder.

General Opciones
Crear documento en blanco en el arranque
Active esta opción para crear un nuevo proyecto vacío cuando la aplicación se inicia.

Ventana de la aplicación maximizadaen el inicio.


Active esta opción para maximizar la ventana de la aplicación en el inicio.

Abra el archivo utilizado más reciente en el arranque


Especifica si se debe abrir el proyecto utilizó más reciente en el arranque

Mostrar splashpantalla
Active esta opción para mostrar la imagen de la pantalla de bienvenida / derechos de autor en el
arranque.

Permitir bloqueadoobjetos para ser editados.


Objetos bloqueados no se pueden mover o cambiar de tamaño, pero todavía se pueden editar sus
propiedades.

Determinar Flash Movietamaño mediante la búsqueda de la trama más grande


Esteopción intenta encontrar el cuadro más grande dentro de una película de Flash.
Tenga en cuenta que algunos Flash Movie puede tener marcos invisibles que son más grandes que el
tamaño real de la película!

Utilice altarotación de la calidad de las imágenes.


Al habilitar esta opción aumentará la calidad de las imágenes rotadas, pero también hace que el proceso
sea más lento.

Buscar actualizaciones en línea en el inicio.


Esteopción se conectará a la página web Web Builder para comprobar si hay una nueva versión del
software disponible.
UstedTambién puede comprobar si hay actualizaciones en el menú Ayuda: Menú-> Ayuda-> Buscar
actualizaciones en línea.

Mostrar las extensiones de página en el sitioManager.


Active esta opción para mostrar la extensión de la página (html, php, asp, etc) en el administrador del
sitio.

Nota:
Usted debereinicie la aplicación antes de que se mostrarán las extensiones de página.

Comprobar automáticamente IDs duplicados cuando se carga la página.


Habilite esta opción para comprobar automáticamente los ID duplicados cuando se carga la página,
publicado o
previamente.Si el software encuentra ID duplicados continuación se mostrará un mensaje con un enlace a
los avisos de error.

TextBox
Texto inicial: Especifica el texto inicial de un objeto de texto. Por defecto: Haga doble clic para editar

HacerNo mostrar texto inicial, sino ir directamente al modo de edición cuando se creó.
Si habilita esta opción, no se mostrará el texto inicial (doble clic para editar). Usted puede directamente
comienzoescribir texto en el cuadro.

55
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Opciones HTML
Generar hojas de estilo CSS externos para la página de estilos definidos.
Active esta opción para generar un archivo CSS independiente con los estilos utilizados por una página.
El nombre del archivo será el mismo que el nombre de la página. Así 'index.html' generará un archivo
'index.css'.
Estilos en línea no serán parte de la hoja de estilos! Así que para los mejores resultados de sus objetos
deben hacer uso de estilos creados en el Administrador de estilos.

Generar hoja de estilos CSS solo para los estilos globales.


Active esta opción para generar un solo archivo CSS con todos los estilos creados en el Administrador
del Portal. Todas las páginas se refieren a este archivo.
Lahoja de estilo global no contendrá página estilos específicos (como estilos de barra de menús).

Optimizarestilos en línea (experimentales)


Esuna opción que intenta limpiar el código HTML moviendo estilos en línea a la hoja de estilo de la
página.

Nota:
Esteopción procesará todos los elementos HTML de la página, sin embargo no todos (de terceros)
extensiones pueden soportar este comportamiento. Así que por favor probar toda la funcionalidad de
su sitio web antes de usar este!

Fuentes web (@ font-face)


 HacerNo utilice @ font-face (por defecto)
No se generará ningún código para apoyar no web fuentes seguras.

 Usar automáticamente @ font-face para las fuentes no seguros para la Web.


Si habilita esta opción usted será capaz de utilizar cualquier tipo de fuente true tipo, incluso si
no es Web
seguromediante el uso de una nueva característica CSS3 llamada @ font-face. WYSIWYG Web
Builder generará automáticamente el código necesario y subir el tipo de letra en el servidor.
Incluso se genera un archivo (EOT) secundaria requerida para hacer esta operación de trabajo
con IE!

 A manoespecifique @ fuentes font-face.


En algunos casos es necesario configurar manualmente @ font-face. Por ejemplo si no es
posible;
para determinar automáticamente el nombre de archivo asociado con una fuente específica o
si desea utilizar archivos separados para cada formato. La activación de esta opción permite a
los usuarios avanzados para vincular manualmente los archivos de fuentes a una fuente
específica.

Notas acerca de @ font-face:


- Tenga en cuenta que los archivos de fuentes pueden ser bastante grandes, por lo que puede añadir un
peso considerable a la página.
- Asegúrese de verificar la licencia de la fuente que desea utilizar, como la mayoría de los tipos que no
tienen licencia para permitir
este tipo de uso. Hacer la fuente disponible en su servidor viola la mayoría de los acuerdos de licencia de
usuario final.
- Desafortunadamente InternetExplorer requiere un tipo de letra diferente (EOT lugar de TTF), por lo
que el software genera automáticamente la versión EOT de la fuente. Esto significa que usted va a
terminar con dos versiones de cada fuente !!

56
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

 Utilice GoogleFuentes de fuentes no seguros para la Web


Active esta opción si va a utilizar Google Fonts en su proyecto. Si esta opción está activada, el
software asumirá que todas las fuentes que no sean seguros web que utiliza son de Google
Web Fonts y generará automáticamente un enlace a la fuente en el código HTML, por lo que
no tiene que hacerlo manualmente. Sin embargo, advierte que para usar Google Fuentes
durante el tiempo de diseño que usted debe tener instalado en su computadora!

He aquícómo puede instalar una fuente Google en su equipo:


1) Visitael sitio web de Google Fuentes:http://www.google.com/fonts/

2) Encontrar la fuente que desea utilizar y añadirlo a una colección (Haga clic en "Añadir a la
colección '). Tome nota del nombre de la fuente, ya que lo necesitará en el paso 6.

3) Aser capaz de utilizar la fuente en su computadora, tendrá que descargarlo e instalarlo por
lo que estará disponible en WYSIWYG Web Builder (y otro software de Windows).

Haga clic enla "Descarga tu Colección" en la parte superior de la página web de Google
Fuentes y obtendrás un archivo zip que contiene toda la fuente solicitada (s) en formato TTF.

4) Abrir la cremallerala recogida y y arrastre los archivos TTF a la carpeta de fuentes de


Windows. (En Windows 8: Panel de control \ Apariencia y personalización \ Fonts). El tipo de
letra (s) ahora estará disponible para todas las aplicaciones de Windows.

5) Aver la fuente en WYSIWYG Web Builder, asegúrese 'Display web únicas fuentes seguras', la
opción está desactivada: Menú-> Herramientas-> Opciones-> Varios

Nota: Algunas fuentes de Google requieren parámetros adicionales. Puede agregar estos
parámetros haciendo clic en el botón "Gestionar". Siguiente, haga clic en "Añadir" y seleccione
la familia de fuentes. En el campo Parámetros especificar los parámetros.

Ejemplo:
Y subconjunto = latino, cirílico-ext
o
: 400 700 900 y subconjunto = latino, cirílico

57
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

UsoGradientes CSS3 en lugar de imágenes (cuando sea posible).


Active esta opción para generar estilos CSS para gradientes de fondo en lugar de imágenes. Esto
reduce el número de imágenes genera para la página. Tenga en cuenta sin embargo que no todos los
navegadores (especialmente de Internet Explorer!) Sí apoyan gradiente CSS3 todavía.
Tambiéntenga en cuenta que no se seguirán utilizando todos los gradientes de estilos están todavía
apoyaban, ya que en algunos casos las imágenes.

Incluirnombre de la página en los atributos ID generados automáticamente.


Esteopción añadirá el nombre de la página de Identificación genera automáticamente cuando se añade
un nuevo objeto a la
página. Así, por ejemplo 'Image1' se convertirá en 'indexImage1'. Donde 'index' es el nombre de la
página. Esto puede ser útil cuando se utiliza una gran cantidad de páginas maestras en cuyo caso se
evitará atributos ID duplicados dentro de una página.

Nota:
Esteopción no cambia sus identificaciones existentes sólo para objetos recién creados!

PermitirCodificación HTML (basado en el conjunto de caracteres seleccionado).


Esta voluntadguardar el documento codificado con la página de códigos seleccionada. Esta es una
nueva característica de la versión 7.5 en un intento de generar (incluso) mejores documentos HTML
W3C.
Esteopción debe ser habilitada a menos que usted está experimentando problemas con la visualización
de caracteres en los navegadores.

PermitirEmbellecedor HTML
Formatea el código HTML para que se vea mejor y es más fácil de leer.

Notas:
- Esteopción afectará a todo el HTML de la página. Incluyendo encargo añadiendo código y el
código generado por las extensiones!
- No se formatean PHP y JavaScript.
- Si se activa esta opción puede tomar más tiempo para generar la página.
- Latamaño de la página aumentará ligeramente debido a los espacios en blanco extra añadido a la
página. Pero, en general esto no afecta al rendimiento en el navegador!

PermitirLa codificación URL para evitar nombres de archivos no seguros de Internet.


Especifica si se debe utilizar la codificación de URL para nombres de archivo. En general no se debe
utilizar espacios en blanco u otros caracteres no alfanuméricos en los nombres de archivos, ya que
puede confundir a los servidores web y navegadores (especialmente en combinación con JavaScript). Si
habilita esta opción, el software le codificar nombres de archivo para evitar posibles problemas con
nombres de archivo no válido. Por supuesto que es aún mejor para asegurarse de que sus nombres de
ficheros son válidos antes de añadirlos a su sitio web.

Usocarpeta compartida de activos (páginas en carpetas no tendrá su propia carpeta de recursos)


Activando esta opción se comparta la carpeta (s) objetivo activo para el sitio web completo
(incluyendo páginas en sub carpetas!). Esto significa que las subcarpetas en el Administrador del
Portal ya no usan una carpeta activo separado. Tenga en cuenta que puede establecer la carpeta de
destino para los tipos de archivos específicos en Publicar y Vista previa. Si esta opción está
desactivada, cada carpeta se crea en el Administrador del Portal tendrá su propia carpeta de
recursos.

58
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Archivos y Carpetas Opciones


En la opción de carpeta del sistema puede configurar en el software almacenará todos los datos
específicos del usuario, como
extensiones,plantillas, configuración de publicación, gradientes etc.

Importante:
Si cambia la carpeta System Folder entonces esto también cambiará la ubicación donde WYSIWYG
Web Builder busca extensiones, plantillas, publicar ajuste etc. Así que si usted cambia la carpeta y
luego asegurarse de que su también mover todos los archivos a la nueva carpeta!

Si habilita Let WYSIWYG Web Builder gestionar imágenes y otros archivos utilizados por un proyecto,
entonces Web Builder hará una copia de seguridad de todos los activos (imágenes, películas, sonidos)
que son parte de su sitio web a una carpeta relativa al archivo del proyecto, así que todos los archivos
se almacenan en un solo lugar. El nombre de la carpeta será el mismo que el nombre del proyecto.
Esto significa que si su proyecto se llama 'mywebsite', a continuación, todos los activos se
almacenarán en la sub carpeta 'mywebsite'. Copia o traslado de su proyecto a otro equipo es ahora
tan fácil como copiar el archivo del proyecto y su carpeta secundaria a otra PC!

En el campo Vista previa de carpeta se puede cambiar la carpeta predeterminada que se utiliza para los
archivos de vista previa. Esto puede ser útil si desea que los archivos que se copian en una carpeta de su
servidor web local en caso de que generas PHP o ASP páginas.

Si la opción Eliminar archivos de vista previa está activada, Web Builder eliminará todos los archivos
generados anteriormente la próxima vez que seleccione la opción de vista previa. Esto evita que los
archivos antiguos se quedan atrás y sólo los archivos nuevos existe en la carpeta de vista previa.

Advertencia:Esto eliminará todos los archivos de la carpeta especificada! (No sólo los archivos que
donde previamente generado por Web Builder).

Publicar y Opciones de previsualización

Conexión Tiempo de espera, Aumentar este valor si experimenta tiempos de espera durante la
conexión al servidor FTP. El valor predeterminado es 30 segundos.

PermitirExplotación forestal,habilitar el registro cuando se tienen problemas al publicar su sitio web.


El registro puede contener información útil sobre el problema.

Imágenesnombre del prefijo. Algunos objetos, tales como formas, botones de la barra de navegación
se publicarán como imágenes (generadas dinámicamente). Estas imágenes tienen un nombre único
dentro del sitio web (por ejemplo img0001.gif, img0002.gif). Con esta opción se puede controlar cómo
se llamarán las imágenes. Por ejemplo, si especifica wbimage como prefijo, las imágenes serán
nombrados 'wbimage0001.gif' o 'wbimage0002.png'
También es posible hacer que el nombre de la página de elementos del nombre de archivo,
permitiendo la opción Usar nombre de la página para prefijo de imagen, esto hace que sea más fácil
hacer un seguimiento de las imágenes que pertenecen a una página específica

Carpeta de destinopara tipos de archivo


WYSIWYGWeb Builder puede publicar las imágenes, secuencias de comandos, swf, pdf, css y otros
archivos que genera a un archivo de carpetas separadas en el servidor web. Esto mantendrá su sitio
web organizado.
Si el servidor web no soporta subcarpetas, a continuación, retire todo tipo de archivo de la lista. En ese
caso todos
archivos serán publicados en la misma carpeta que los archivos HTML.

Nota:Las carpetas son relativosa la carpeta de la página HTML. Así que si usted ha creado carpetas en el
administrador del sitio y luego cada carpeta tendrá sus propias subcarpetas para los archivos!

PreestrenoÁmbito de aplicación,esta opción especifica el alcance de previsualización de Web Builder.


59
WYSIWYG Web Builder 10 Pablo
Seleccione Sólo página actual para obtener una vista previa de una página o sitio web completo si
SoftwareSoluciones
quieres probar su sitio web completo.

Consejo:
Si mantiene pulsada la tecla SHIFT durante la vista previa voluntad 'invertido' el alcance preliminar actual.

60
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Esto significaque si se selecciona "Página actual", entonces la celebración de tecla SHIFT se vista previa de
la página web completa ".

Desactivar la advertencia de seguridad de IE durante la vista previa


Por defecto Internet Explorer mostrará una advertencia de seguridad si se intenta obtener una vista
previa la página web almacena en su
disco local. Y aunque esto se puede desactivar en la configuración de Internet Explorer que podría
ser más conveniente para marcar la página como "seguro para la vista previa local".
Web Builder añadirá el código necesario para la página para desactivar la advertencia. Este código no será
incluido en la página publicada.

Retire código PHP durante la vista previa


Muchas de las características avanzadas de WYSIWYG Web Builder use el código PHP. Como ustedes
saben, los navegadores
no se puede interpretar el código PHP y por lo general se mostrará errores o nada en absoluto! Vista
previa de la disposición de una página web como en un servidor no siempre es conveniente, por lo que
es por eso que hemos introducido esta opción. Si esta opción está activada, se eliminará todo el código
PHP durante la vista previa, para que pueda ver el diseño. Por supuesto, usted todavía será publicar la
página en un servidor web PHP permitido probar completamente el comportamiento (dinámica) de la
página.

Nota:
Durante vista previa del software se cambie el nombre de la página de extensión del archivo de .php a
.html.
Esto significaque si otras páginas que enlacen a esta página, entonces el navegador no se encuentra la
página, ya que tiene una extensión diferente.

60
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Otra informaciónOpciones
Idioma:Utilice esta opción para especificar el idioma utilizado para la interfaz de usuario. Por defecto es
el Inglés. Antes de que una
determinado idioma está disponible en la lista desplegable, necesita instalar el módulo de idioma
apropiado. Visite el sitio web de WYSIWYG Web Builder para comprobar los idiomas disponibles.

UsuarioInterfaz
Especifica si se debe utilizar el menú y las barras de herramientas clásicos o la interfaz Ribbon.

Dockingalgoritmo para barras de tamaño variable: Por defecto o 2005 Estilo Visual Studio. Cuando se
selecciona Visual Studio 2005 estilo, llamado Muelle marcadores se muestran cuando cambia la
posición de las ventanas como Administrador del Portal o de la caja de herramientas.

Pantalla seguro para la WebSólo fuentes


Ustedpuede habilitar esta opción para WYSIWYG Web Builder sólo mostrará fuentes seguros para la Web.

Botón Tab 'Cerrar'


Especifica el aspecto y el comportamiento del botón de cierre en las fichas de página.
 Ninguno
Sin botón de cierre en las fichas.
 ActivoLengüeta
Se muestra el botón Cerrar en sólo la pestaña activa.
 DestacadoTab (Compact)
Se muestra el botón Cerrar en las pestañas activas y resaltados. El espacio para el botón de
cierre en
no activoficha no está reservado.
 DestacadoLengüeta
Se muestra el botón Cerrar en las pestañas activas y resaltados.
 Todos
Cerradose muestra el botón en todas las fichas.

Carpeta de copia de seguridad: WYSIWYG Web Builder puede realizar automáticamente copias de
seguridad de sus proyectos, antes de sobrescribir una versión anterior del proyecto.
Carpeta de copia de seguridad especifica la carpeta donde se almacenará la copia de seguridad.

Número total de copias de seguridad del sitio. Especifica el número de copias de seguridad para
mantener antes de sobrescribir con las versiones más recientes. Introduzca 0 es que no quieres Web
Builder para crear copias de seguridad.
Web Builder nombrará a las copias de seguridad como este:
myproject_01.wbs, myproject_02.wbs, myproject_03.wbs
Laarchivo de número más alto será siempre la última copia de seguridad. Si se alcanza el número
máximo de copias de seguridad, la copia de seguridad más antigua se eliminará y el resto de las copias
de seguridad será renombrado.

Autoreserva
Active esta opción para que automáticamente copia de seguridad de su proyecto cada 5, 15, o 30
minutos. Esto puede ayudarle a restaurar su trabajo si el equipo se bloquea inesperadamente.
Lanombre de la copia de seguridad será myproject_autobackup.wbs y se almacena en la carpeta de copia
de seguridad.

Hacer una copia de seguridad del proyecto en el servidor.


Active esta opción para hacer automáticamente una copia de seguridad del proyecto en el servidor. Esto
puede ser útil si
el ordenador se bloquea o sus proyectos locales se dañan. En ese caso, usted tendrá siempre una
copia de seguridad en el servidor.

Habilitar en directoRepresentación HTML de las extensiones.


Algunas extensiones utilizan 'renderizado HTML en vivo "lo que significa que crean una vista previa

61
WYSIWYG Web Builder 10 Pablo
en vivo del código HTML generado para la extensión. Y aunque esto puede serSoftwareSoluciones
útil para tener una
idea de lo que la página final se verá así, también puede utilizar una gran cantidad de recursos del
sistema (memoria / tiempo de procesador), especialmente cuando se utiliza muchas extensiones en
el mismo proyecto. Desactivar esta opción puede reducir el uso de memoria y tiempo de carga de
proyectos. No tendrá ningún efecto en la salida generada.

62
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Permitirel registro de depuración (uso sólo para fines de prueba!)


Si habilita esta opción, extensiones creará un archivo de registro con información que puede ser útil
para la depuración. Esto puede ayudarle o el desarrollador de la extensión permite rastrear /
resolver problemas.
Laarchivo de registro se creará en la carpeta de extensiones y tiene el mismo nombre que la extensión
(Extensionname.log).

Lasiguiente información se registrará:


• Carga / carga con número de versión.
• Propiedades,variables y valores
• Conjunto de datosTransformación XML (usuario de entrada aplicado a la plantilla XSL)
• GaleríaTransformación XML
• MenúTransformación XML
• Copiar archivos publique carpeta.

63
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Extension Manager
Extensiones(también llamados complementos o plugins) son componentes que mejoran la funcionalidad
de
WYSIWYGWeb Builder. Las extensiones pueden ser accedidos a través de la Caja de herramientas oa
través del menú Insertar al igual que los objetos estándar.

Ahi estaya una larga lista de extensiones oficiales y en el futuro tenemos la intención de liberar a
muchos más para hacer WYSIWYG Web Builder aún más poderoso de lo que ya es. Algunas extensiones
son simplemente componentes con pocos parámetros, mientras que otros son aplicaciones casi
completos por sí mismos! Ver también: http://www.wysiwygwebbuilder.com/extensions.html
Ustedpuede incluso crear sus propias extensiones con la herramienta Extensión Constructor:
http://www.wysiwygwebbuilder.com/extension_builder.html

Muchos usuarios ya han hecho algunas extensiones personalizadas increíbles. Echa un vistazo a la lista
completa aquí:
http://www.wysiwygwebbuilder.com/forum/viewforum.php?f=42

La ExtensiónManager ayuda a organizar extensiones. En Extension Manager se puede instalar / quitar y


extensiones de actualización. También puede buscar extensiones en la galería. Las extensiones
instaladas página muestra todas las extensiones que están instalados actualmente. Si ya no necesita
una extensión específica, puede eliminarlo haciendo clic en el botón "Desinstalar".

Nota:
Por favor, asegúrese de que ninguno de sus proyectos utiliza la extensión si usted decide quitar una
extensión específica, de lo contrario ya no será capaz de cargar ese proyecto hasta que vuelva a
instalar la extensión.

LaPágina Online Gallery muestra todas las extensiones disponibles para su descarga e instalación. Si
una nueva versión de una extensión que ya tiene disponible en línea, entonces usted tiene la opción
de actualizarlo. Cada vez que se abre esta ventana, Web Builder le preguntará si desea descargar la
lista más reciente de la página web. Normalmente, tendrá que hacer esto una vez por semana.

Notas:
Laincorporado Extension Manager sólo funciona correctamente si el software puede acceder a nuestro
servidor web! Si por alguna razón sus bloques de escáner de firewall o virus accedan a la conexión a
Internet, entonces no será capaz de utilizar esta función. Para solucionar este problema asegúrese de
WYSIWYG Web Builder está en la lista de excepciones de su escáner firewall / virus!

Si usted ha comprado recientemente su licencia, es posible que su información de registro todavía no


está en la base de datos en línea. PUEDE TARDAR VARIAS HORAS ANTES Puede descargar el
EXTENSIONES! Por Favor
ser la paciencia.

Vertambién:http://www.wysiwygwebbuilder.com/restricted.html

LaManual página de instalación le permite instalar de forma manual extensiones. Haga clic en el
botón "Instalar" para seleccionar un archivo de extensión (* .wbx) o zip archivo. También puede
arrastrar y soltar una o más extensiones desde el Explorador de Windows en esta ventana! También
puede instalar manualmente extensiones copiando el archivo .wbx a la carpeta de extensiones: C: \
Usuarios \ su nombre \ Documents \ WYSIWYG Web Builder \ system \ extensiones Dónde Tu
Nombre 'es el nombre de su carpeta personal en el equipo.

ConexoFAQ tema:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=7234

Descargo de responsabilidad:
Extensionesse ponen a disposición como un servicio extra para los usuarios registrados. Ellos no son

64
WYSIWYG Web Builder 10 Pablo
parte oficial del software. Pablo Software Solutions no ofrecerá soporte para extensiones de terceros y
SoftwareSoluciones
es de ninguna manera responsable para el buen funcionamiento de estas extensiones. Todas las
extensiones se proporcionan "TAL CUAL", para aquellos que encuentran útiles. Por supuesto que vamos
a hacer nuestro mejor esfuerzo para asegurarse de que funcionan correctamente.

65
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Buscar Índice
WYSIWYGWeb Builder tiene funcionalidad básica incorporada 'buscador', por lo que los visitantes pueden
buscar específico
palabras dentro de su sitio web.
Arealizar esta función los usuarios no avanzados disponibles, decidimos usar Javascript, ya que no le
requiere a la base de datos de configuración y servicio de indexación en el servidor. La desventaja es
que puede ser más lenta para los sitios web más grandes (> 100 páginas).

Generar índice de búsqueda


Active esta opción para crear el índice de búsqueda durante la publicación.

Nota:
LaSe requiere índice de búsqueda si desea utilizar el objeto 'Site Search' en su página web!

Nombre de archivo de índice


Especifica el nombre del archivo de índice de búsqueda. Como se trata de un archivo javascript, debe
tener las extensiones .js.

Crear índice de
Esteopción especifica cómo se creará el índice de búsqueda.

 PáginaContenido
Laíndice de búsqueda se creará a partir del contenido de la página. En este caso
WYSIWYG Web
Constructor extraerá todo el texto de las
páginas.
 Meta tags
Laíndice de búsqueda se crea a partir de las etiquetas meta que ha especificado
contenido en Página
Propiedad
es.
 Texto
Esta voluntadúnico índice el texto que se traducen en un / índice de búsqueda más rápido
más pequeño. En la mayoría de los casos esta modalidad será suficiente. Tenga en cuenta
que también disminuirá el tiempo requerido para crear el índice de búsqueda durante la
publicación.

ExcluirDeje de Palabras de Índice


Active esta opción para excluir palabras vacías.
Web WYSYWYGConstructor incluye una lista predefinida de palabras vacías en el archivo 'search.dat'.
Ahacer su propia lista de 'excluir' palabras simplemente copiar el archivo a 'Mis documentos \
WYSIWYG Web Builder \ system \ search.dat y Web Builder utilizarán este archivo en lugar.

Nota:
Detener Las palabras son palabras que no contienen significado importante para ser utilizado en
consultas de búsqueda. En general
estospalabras se filtran desde las consultas de búsqueda, ya que regresan vasta cantidad de
información innecesaria.

Usoenlaces absolutos
Active esta opción si desea utilizar el motor de búsqueda en las subcarpetas. En ese caso, vínculos
absolutos se deben utilizar de otro modo los enlaces en los resultados de búsqueda no va a utilizar la
ruta correcta (porque sólo hay un índice de búsqueda en la raíz del sitio web).

Ejemplo:
http://www.yourwebsite.com

66
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Notificar un error
LaHerramientas de informe de errores analizarán la página actual y comprobar si hay errores como
identificadores duplicados, inválidos
nombres de archivou otros problemas comunes.

He aquíuna lista de los posibles problemas que se detecten en la actualidad por la herramienta de
informe de errores:

Inválidonombre del archivo


Los nombres debencontener sólo letras ASCII (az, AZ), números (0-9), el subrayado, puntos y rayas.

VacíoIdentificación
Asegúrese de que todos los objetos tienen una identificación válida.

DuplicarIdentificación
Todos los objetos deben tener una propiedad ID único en el contexto de la página. Esto incluye los
objetos en páginas maestras!

HTML no válido
CostumbreHTML no puede contener <html> << head> o <body>.

Inválidoextensión de la página
LaLa página contiene un formulario que requiere PHP. Ajuste la extensión de archivo página a 'php' (en
Propiedades de la página)

La página de Éxitono especificado


Lapropiedad página de éxito de la forma no puede estar vacío.

ErrorLa página no especificado


Lapágina de error de propiedades del formulario no puede estar vacío.

Inválidotítulo de la página
LaLa página no tiene un título significativo. El título de la página es vacío o tiene el defecto 'Página sin
título' valor.

Inválidonombre de la página
LaLa página '' índice 'no debe tener caracteres en mayúsculas en su nombre. 'Índice' o 'ÍNDICE' no es
válido.

Formulario está utilizando 'mailto:'


Uso'Mailto:' en formas no es confiable. Por favor, considere el uso del procesador de forma integrada en
su lugar.

El texto no está optimizado


El texto esno optimizado para todos los navegadores. Considere el uso de una de las opciones de
compatibilidad.

67
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

68
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Theme Manager
LaTheme Manager proporciona una forma alternativa para crear temas de jQuery UI que son utilizados
por los objetos
como jQuery acordeón, jQuery Tabs y muchos otros widgets basados jQuery. Normal es que cree estos
temas a través dehttp://jqueryui.com/themeroller/, pero puede crear temas impresionantes
directamente desde dentro de WYSIWYG Web Builder! El gerente del tema utiliza el poderoso "motor
de la forma 'de WYSIWYG Web Builder para producir temas de alta calidad.

Acrear un nuevo tema, haga clic en el botón "Añadir". Ahora puede estilos específicos para cada
estado de los widgets jQuery. No es el estado predeterminado, el vuelo estacionario y activar los
estados, y el área de contenido. El área de contenido puede ser el panel de un conjunto de lengüetas o
un acordeón. También puede establecer la fuente-familia global, estilo de fuente y el tamaño de
fuente. El radio de la esquina especifica la redondez de las fronteras. En el panel de la derecha se
puede ver el resultado de los estilos especificados.

Cuando haya terminado el diseño de su tema, haga clic en "Guardar". El Theme Manager ahora
generará los archivos CSS y las imágenes asociadas. Los archivos se copian en la carpeta Mis
documentos \ WYSIWYG Web Builder \ system \ ThemeRoller carpeta. Si ya existe el tema se le
preguntará si desea sobrescribir el tema actual.

Tenga en cuenta que si guarda un tema con el mismo nombre que un tema estándar entonces (como
'cupertino' o 'suavidad'), entonces el tema personalizado será utilizado por el software, aunque el
tema original no se sobrescribe o se retira (porque está en otra carpeta). Esto significa que si se
elimina el tema personalizado, a continuación, versión original seguirá existiendo. Temas originales se
encuentran en C: \ Archivos de programa \ WYSIWYG Web Builder 10 \ ThemeRoller \

UstedTambién puede crear un nuevo tema basado en un tema existente mediante el botón "Copiar".
Es incluso posible importar temas CSS generados por el sitio web rodillo tema. Aunque esto sólo
importará la combinación de colores, por supuesto, porque no posibles datos de estilo extracto de
imágenes ...

69
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

En Propiedades de la página se puede seleccionar el tema de una página (que luego se aplicará a todos
los objetos de esa página). Y aunque el Theme Manager fue diseñado para crear temas para los
widgets jQuery UI, otros objetos también apoyan los temas! Por ejemplo, puede seleccionar página de
Uso tema "en la barra de menú, barra de navegación, menú de la ficha y muchos otros objetos.

Por supuesto, también puede seguir utilizando el tema de crear en el sitio web ThemeRoller:
http://jqueryui.com/themeroller/. Nuevos temas se deben instalar en la carpeta 'ThemeRoller' de
WYSIWYG Web Builder: Mis documentos \ WYSIWYG Web Builder \ system \ ThemeRoller \

Mobile temático Gerente


Mobile temático Gerente introduce una manera fácil de crear temas que se utilizan para el estilo de
jQuery Mobile
Objetoscomo botones, menús, encabezados, pies de página, etc.
Un tema jQuery Mobile es un conjunto de muestras de color que definen: los colores del texto, color
de fondo y los gradientes y la fuente.
Ustedpuede definir un máximo de 26 muestras de color, de la A a la Z. Es compatible con muchas de las
propiedades de CSS3, como las esquinas redondeadas, sombras y gradientes.

Acrear un nuevo tema, haga clic en el botón "Añadir". Ahora usted puede especificar el color para
cada parte de los widgets jQuery Mobile. También puede establecer la fuente-familia, el radio y
sombras frontera global.
En el panel de la derecha se puede ver el resultado de los estilos especificados. Para modificar los
colores de otras muestras, seleccione la letra de muestras (AZ) en la lista de propiedades.

Cuando haya terminado el diseño de su tema, haga clic en "Guardar". Los archivos CSS e imágenes
asociadas se generarán cuando se publica el sitio web que utiliza el tema.
Ladefiniciones de tema se guardan en el archivo: C: \ Users \ nombre de usuario \ Documentos \ Web
WYSIWYG
Constructor \ system \ mobilethemes.dat
En WYSIWYG Web Builder usted puede seleccionar el tema de una página (móvil) en la página de
propiedades.

70
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Global Reemplazar
LaGlobal herramienta Reemplazar se puede utilizar para cambiar rápidamente el color, la fuente, el URL o
nombre de archivo para todos los objetos (o
una selección) en la página o todo el sitio web.

Páginas
Especifica si desea sustituir los valores en la página actual sólo en en todo el sitio web.

Objetos
Especifica las categorías de objetos se aplicará a la búsqueda /
reemplazo. Por ejemplo: sólo sustituir un valor de color para
los elementos del formulario.

Propiedad
Especifica con qué reemplazarla:
 Color
Reemplazarun valor de color con otro valor.
 Expediente
Reemplazarun nombre de archivo. La herramienta automáticamente una lista de todos los
nombres de fichero actualmente en uso.
 Nombre de la Fuente
Reemplazarel nombre de la fuente. La herramienta automáticamente una lista de todos los de
la fuente en uso.
 Tamaño de la Fuente
Reemplazarel tamaño de fuente.
 URL
Reemplazarun URL. La herramienta automáticamente una lista de todas las URL actualmente
en uso.

Tenga en cuenta que esta acción no se puede deshacer!

71
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

WYSIWYG Web Builder Objetos


En WYSIWYG Web Builder permite crear su sitio web al dejar caer objetos en la página. La mayoría de
estos objetos representan un elemento HTML estándar. Hay 2 formas de insertar objetos a su página:

1. Mediante el uso de la ficha Insertar.


2. Mediante el uso de la caja de herramientas

Para insertarun nuevo objeto, seleccione uno de los elementos disponibles y dibujar un cuadro para
indicar la posición del objeto. El nuevo objeto ahora se inserta a la página. Para cambiar las
propiedades de duplicar el objeto o seleccione Editar-> Propiedades en la barra de menú. También es
posible llamar a las propiedades del objeto utilizando la combinación de teclas Alt + Enter '.

Consejo:
Otra forma de añadir objetos a su página es simplemente arrastrándolas fuera de la caja de
herramientas en el área de trabajo.

72
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Estilo
La mayoría de los objetostener una sección de estilo en la ventana de propiedades, aquí se puede
configurar la apariencia del objeto. Tenga en cuenta que no todas las opciones se aplican a todos los
objetos!

Estilo predefinido
Aquípuede seleccionar uno de los estilos de sitio mundial. Esta opción sobrescribe todos los ajustes de
estilo personalizado para el objeto. Puede agregar o editar estilos en el Administrador de estilos.
Tenga en cuenta que la etiqueta <h1> ... <h6> generalmente se usan sólo para el texto!

Fondo
Modo fondo
Especifica el modo de fondo.

 Transparente
Lade fondo del objeto será transparente.
 Sólido
Use un color de fondo sólido.
 Imagen
Utilizar una imagen como fondo.
Repita;Conjuntosatribuye el suelo de baldosas de la imagen de fondo. Las opciones posibles
son: Repite en ambas direcciones, Repetir en dirección horizontal, Repetir en dirección
vertical y no se repiten. Alinear horizontalmente; Ajusta la posición horizontal de la imagen de
fondo.
Alinear Vertical;Establece la posición vertical de la imagen de fondo.
 Gradiente
Use un (bicolor) gradiente de fondo. Esta opción es compatible con muchos diferentes estilos
de gradiente
como lineal, elipse, vidrio, brillante, etc. Por defecto una imagen de fondo se generará para el
efecto de degradado. Sin embargo, usted también puede usar gradientes CSS3 activando la
opción 'gradientes CSS3 uso en lugar de imágenes' en Menú-> Herramientas-> Opciones->
HTML. Tenga en cuenta sin embargo, que no todos los navegadores soportan CSS3 todavía.

70
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

 Degradado de color Multi


Use un (varios colores) gradiente de fondo. WYSIWYG Web Builder incluye muchas de
múltiples estilos de gradiente de color predefinidos, pero usted puede crear fácilmente su
propio estilo con el Administrador de degradado estilo. Al igual que la opción de gradiente
estándar soporta muchos diferentes estilos de gradiente como lineal, elipse, vidrio, brillante,
etc. Por defecto una imagen de fondo se generará para el efecto de degradado. Sin embargo,
usted también puede usar gradientes CSS3 activando la opción 'gradientes CSS3 uso en lugar
de imágenes' en Menú-> Herramientas-> Opciones-> HTML.
 Patrón
Utilice un patrón como fondo. Una nueva imagen se generará automáticamente para el
patrón.
 Textura
Utilice una textura como fondo. Una nueva imagen se generará automáticamente para la
textura.

Frontera
Estilo
Especifica el estilo de la frontera: punteado, La, Sólido, Doble, Groove, Ridge, Recuadro o
principio. Para muchos objetos también puede establecer el estilo individual, el ancho, el color y
el radio de cada lado de la frontera! Seleccione "estilo individual para cada lado 'y haga clic en"
Configuración ".

Ancho
Especifica el grosor del borde alrededor de la bandera. Póngalo a 0 (cero) para ninguna frontera.

Color
Especifica el color del borde alrededor de la bandera.

Radio
Define el grado en que se redondearán esquinas fronterizas.

Texto
Fuente
Especifica la familia de fuentes del texto, como Comic Sans, Times New Roman y Courier New.

Estilo
Especifica el estilo del texto, como negrita, cursiva o regular.

Tamaño
Especifica el tamaño del texto.

Color
Especifica el color del texto.
71
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Marcador
Textoy las imágenes se pueden fijar como favoritos (también llamados "anclas") que se pueden vincular
a dentro de una página. Por ejemplo, si una página tiene varios elementos nuevos, los títulos de las
noticias de cada elemento se puede configurar como favoritos y una fila de enlaces se pueden agregar
a la parte superior de la página que cada pase directamente a las secciones marcadas. Este método de
usar marcadores permite a los visitantes a su sitio para acceder rápidamente a la información por no
tener que desplazarse por la página para ver la información que desean.

Ustedpuede crear un marcador mediante el uso de la herramienta de marcador en el menú Insertar y


colocarlo en cualquier lugar de la página. Asegúrese de darle el marcador un nombre único. Una vez
que haya colocado el icono del marcador en su página, se puede seleccionar de la lista desplegable
Favoritos.

Ustedpuede leer más acerca de los marcadores en el capítulo "Enlaces".

72
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Lista con viñetas


Ustedpuede agregar una lista con viñetas a su página web para apartar una lista de elementos del resto
del texto de la página pf. La lista con viñetas es una combinación de ordenadas (numeradas) listas y
listas desordenadas y soporta los siguientes estilos:
Círculo,Disco, Cuadrado, numérico (1, 2, 3), Baja Alfa (a, b, c), Alta Alfa (A, B, C), Baja Romano (i, ii, iii),
Alta romano (I, II, III) e imágenes personalizadas.

Para insertaruna lista con viñetas en tu página seleccione Insertar> Lista con viñetas. A continuación,
seleccione el número inicial de las partidas y el estilo de viñeta. Tenga en cuenta que siempre se puede
cambiar el estilo de viñeta a otra cosa a través de las propiedades del objeto.

Otras propiedades delas listas con viñetas incluyen fuente, tamaño, color y el espaciado y el relleno de
los diferentes elementos.

¿Cómo puedo editar el texto de un artículo?


Haga doble clic en el elemento para editar el texto. Formato del texto funciona de la misma manera que
en un cuadro de texto regular.

¿Cómo se inserta un nuevo elemento?


Haz clic derechola lista con viñetas para mostrar el menú contextual y seleccione Insertar elemento.

¿Cómo elimino un artículo?


Haz clic derechola lista con viñetas para mostrar el menú contextual y seleccione Eliminar elemento.

¿Cómo se selecciona el siguiente elemento con el teclado?


Utilice la tecla Tab para ir al siguiente elemento

¿Cómo puedo cambiar el espacio entre la viñeta y el texto?


Al mover el cursor del ratón entre la viñeta y el texto puede arrastrar el (invisible) frontera para
aumentar de disminuir el espaciado.

¿Por qué Web Builder no utiliza etiquetas de bala "reales" en la salida HTML?
Viñetaslista no son navegadores compatibles. Esto significa que todos los navegadores tienen su propia
manera de
donde aparecen las listastodas con su propio relleno, interlineado y otras compensaciones específicas.
Es imposible generar una lista con viñetas utilizando el estándar <OL> <ul> en una forma que es se ve la
igual en todos los navegadores. Por esta razón, hemos decidido utilizar tablas a mirada simulada y la
sensación de listas con viñetas. De esta manera tenemos mucho más control sobre el diseño de las
listas con viñetas y podemos estar seguros de lo que parece (casi) el mismo de todos los navegadores.

73
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Línea horizontal
LaLínea objeto se utiliza para insertar una línea horizontal a través de la página.

Color Line
Especificael color de la línea.

Usotema de la página
Utilice la página del tema de estilo de objeto. Más detalles acerca de temas: Theme Manager.

Shadow Box
Configurecaja de sombra (también llamado sombra) para el objeto. Esta función requiere un navegador
habilitado CSS3.

Nota:HTML haceno tener un objeto de línea vertical, pero en Web Builder, puede utilizar el objeto de
forma o dibujar herramientas en su lugar.

74
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Imagen
Aagregar las imágenes usan el objeto Image. Arrastre el objeto a la página y un diálogo de archivo
popup para seleccionar la imagen. Web Builder soporta archivos JPG, GIF, BMP y PNG.

Nombre Del Archivo:entrarla ruta y el nombre de la imagen / foto o seleccione Examinar para buscar
una imagen en la unidad local.

Notas:
1. Estepropiedad especifica la ubicación de la imagen local, cuando se publica la página de la
imagen
voluntadautomáticamente se va a copiar a la ubicación especificada en Herramientas->
Opciones-> editores> Imágenes Sub carpeta.
2. UstedTambién puede especificar las direcciones URL absolutas
como este https: //
Www.paypalobjects.com/en_US/i/logo/paypal_logo.gif
3. Ahacer una (copia de seguridad) copia de las imágenes utilizadas en su página, permite
Herramientas-> Opciones-> Folders-> Haga una copia de imágenes a esta carpeta cuando se
guardan los documentos. Esto copiará todas las imágenes en la carpeta especificada, por lo
que todos están almacenados en un solo lugar. También evita tener nombres de las imágenes
duplicadas en su sitio web.

Suplentetexto
Este texto,normalmente una breve descripción, aparece en lugar del objeto en el navegador cuando las
imágenes son
sin apoyoo han sido deshabilitado. En algunos navegadores aparece como una información sobre
herramientas cuando se mueve el puntero del ratón sobre la imagen.

Título
En los navegadores modernos este título aparece como una información sobre herramientas cuando se
mueve el puntero del ratón sobre la imagen.

Usotamaño original
Seleccionaresto si usted quiere que aparezca la imagen en su tamaño original.

Fita disposición rectángulo


Seleccione esta opción si desea especificar manualmente el tamaño de la imagen.

Tamaño del borde


Especifica el grosor del borde alrededor de la imagen. Póngalo a 0 (cero) para ninguna frontera.

Color del borde


Especifica el color del borde alrededor de la imagen.

Fronteraradio
Define el grado en que se redondearán esquinas fronterizas.

Reflexión
Especifica la cantidad de reflejo.

Opacidad
Cambiar la transparencia (0 - 100%) de la imagen.

75
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

PermitirSombra
Especifica si se debe activar el efecto de sombra. Una sombra con una x e y desplazamiento de 0 (cero)
producirá un efecto de brillo similar. Al disminuir el factor de la falta de definición de la sombra hará
que los bordes más agudo.

Sombra OffsetX
Desplazamiento de la sombra Horizontal

Sombra OffsetY
Verticaldesplazamiento de la sombra

Sombra Opacidad
Conjuntosla transparencia de la sombra.

Color de la sombra
Especifica el color de la sombra

Sombra de Blur
Suavizabordes de la sombra.

UsoCSS3 box-shadow
Habilitar esta opción para utilizar sombra CSS nativa en lugar de generar una nueva imagen con el
efecto de sombra. Esta opción requiere un navegador moderno con soporte CSS3!

Rotación
Vertambién la descripción de 'girar una imagen "al principio de este documento.

Enlaces
Para más detalles acerca de la vinculación por favor lea el capítulo acerca de "Enlaces".

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos".

76
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Herramientas de Imageny efectos


En WYSIWYG Web Builder, puede aplicar efectos a las imágenes sin tener que abrir una imagen separada
editor!

Disponibleherramientas son:
 Girar
Rotar la imagen 90 grados a la izquierda o derecha.
 Capirotazo
Capirotazola imagen horizontal o verticalmente.
 Contrastar
Ajuste el contraste de la imagen.
 Brillo
Ajuste el brillo de la imagen.
 Volver a muestrear
Re cambiará el muestreo de una imagen el número de píxeles y, por tanto, el tamaño del
archivo físico de una
imagen. Remuestreo se realiza con base en el tamaño actual de la imagen en la página. Si el
tamaño es más pequeño que el tamaño original, el tamaño del archivo físico es disminución.
Es que es mayor el tamaño del archivo físico aumentará!
 Cosecha
Por recortar una imagen, puede eliminar áreas de la imagen que usted no desea utilizar.
Mientras que en
modo de recorte, arrastre los controladores del cuadro de recorte para cambiar el tamaño y
incluye la parte de la imagen que desea mantener. Haga clic de nuevo para eliminar los
cultivos de la zona exterior de la caja de cultivo.
 Rebanada
Laherramienta de corte se utiliza para "rebanar" de seguridad de sus imágenes en muchos
pedazos más pequeños no se dará cuenta
nada en su página porque cuando se ve de antemano todo el pedazo de la demostración como
una sola. La lógica detrás de corte es que sus imágenes se cargarán más rápido y también
puede ayudar a evitar que los usuarios tratando de robar sus imágenes si el intento de que no
va a conseguir una imagen de gran tamaño, pero sólo una pequeña parte de ella.
 Tono / Saturación
Ajustar el matiz o la saturación de la imagen.
 Miniatura Auto
Utilice esta opción para crear rápidamente una versión en miniatura de menor tamaño de la
imagen. Un hipervínculo a
se agregará la imagen a tamaño completo inicial.
 SetColor transparente
Ustedpuede crear un área transparente en la mayoría de las imágenes excepto en las
imágenes GIF animadas.
Seleccione la imagen que desea crear áreas transparentes
en. En la barra de herramientas de imagen o menú del
botón 'Establecer color transparente'. En la imagen, haga
clic en el color que desee hacer transparente.
LaAjuste la opción Color transparente está disponible para las imágenes que aún no tienen
información de transparencia. La imagen se convierte al formato PNG y se publicará con un
nombre diferente.
 Añadir / Reemplazar plantilla
Las plantillas son una manera fresca de cambiar el aspecto de las imágenes. Los patrones
pueden convertir su
imágenes en cualquier forma! Básicamente plantillas sustituyen a la información del canal alfa
(transparencia) de la imagen con la de la plantilla. Usted puede crear sus propias plantillas y
colocar las plantillas en la carpeta 'plantillas' sub del programa.
 Guardarcomo imagen
Esteopción se puede utilizar para exportar la imagen en el disco que incluye todos los efectos
aplicados. Puede exportar
la imagen en formato PNG JPG, GIF o.

77
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Disponibleefectos son:
 Acuarela
 Blue Print
 Mancha/ Desenfocar más
 Buttonize
 Colorear
 Cómico
 Cilindro
 Difusa
 Efecto Droste
 Linear Edge/ Edge No Lineal
 Realzar/ Relieve Más
 Grabar/ Grabe Más
 Erosionar
 PescadoOjo
 Llama
 Holga
 Impresionismo
 Bisel interiormarco
 Invertir luminancia
 Jitter
 Gaussian Blur
 Brillar
 Oro / / efecto metálico del hielo
 Escala de grises
 Laplace
 Mediana
 Azulejos de mosaico
 Motion Blur
 Negativo
 Resplandor de neón
 Visión nocturna
 Ruido
 Pintura al óleo
 ViejoPelícula
 Foto antigua
 Lápiz
 Pellizcar
 Pixellate
 Polaroid Pila
 Psicodélico
 Ponche
 ReemplazarColor
 Rizo
 Sepia
 Afilar/ Enfocar más
 Bosquejo
 Sobel
 Solarizar
 Ablandar
 Los bordes suaves / pluma
 Chapoteo
 IntercambioCanales de color
 Textura
 Thermique
 Umbral
 Cambio de inclinación
 Giro
 Tinta Urbana
 Reflejo en el agua

78
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Cosasque usted debe saber acerca de los efectos:


1. Ustedpuede aplicar múltiples efectos especiales a una imagen.
2. Efectosno son destructivos, lo que significa que no se aplican a la imagen original. Una copia de
la imagen original se publicará a su sitio web utilizando un nombre único (formato .png).
3. Efectosse aplican a la imagen "en la marcha" cuando las imágenes se cargan en espacio de
trabajo y en
el orden en que los hemos añadido. Así por ejemplo, si usted solicita Brillo 3 veces, las imágenes
se procesan 3 veces la próxima vez que se carga la página.
4. Planee sus efectos! No agregue a muchos efectos a las imágenes. Esto ralentizará el tiempo de
carga de
la imagen en Web Builder. Antes de la aplicación de efectos probar que impacto el efecto
tiene en la imagen, si no te gusta usar deshacer la restauración de la imagen original.
5. No aplicar efectos a las imágenes muy grandes! Cuanto más grande sea la imagen, más
tiempo tardará antes de que el efecto ha sido procesado (al igual que en cualquier otro
editor de imágenes!).
6. Volver a muestrearpuede ser usado para disminuir el tamaño de la imagen publicada y por lo
tanto puede aumentar la velocidad de carga de su sitio web. Por supuesto remuestreo
también reducirá la calidad de la imagen.

Filigrana
Herramienta de agua esla función de gran alcance que le permite proteger rápida y fácilmente sus
imágenes con una
visiblemarca de agua. Con las muchas opciones de marcas de agua disponibles, usted es capaz de
personalizar sus imágenes en una variedad de maneras, incluyendo el tamaño del texto, color y
posición.

Tipo
 Ninguno
Laherramienta de marca de agua se desactivará.
 Estándar
El texto seser dictada en la parte superior de la imagen.
 Invertido
Laefecto marca de agua se invierte.
 En relieve
Esteopción utilizará un efecto relieve para el texto.

Texto
Especifica el texto de la marca.

Fuente
Tipo de fuente es la familia de fuentes de texto, como Comic Sans, Times New Roman y Courier New.

Color
Especifica el color del texto.

Opacidad
Especifica la opacidad / transparencia del texto.

Horizontal/ Alineamiento Vertical


Especifica la alineación horizontal y vertical del texto.

Repita el texto
Active esta opción para repetir el texto sobre la imagen completa.

79
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Marquesina
The Marqueeobjeto se utiliza para introducir el texto que se desplaza.

Texto
Introduzca el texto para desplazarse. El texto puede incluir formato y enlaces.

Dirección
Esteatributo controla la dirección de desplazamiento.

Repetición
Númerode veces que se repite el desplazamiento (0 = continuamente).

Retraso
Estecontrola el retardo (en milisegundos) entre las pantallas sucesivas que dan la impresión de
animación.

Cantidad
Estecontrola la cantidad de movimiento (en píxeles) entre las pantallas sucesivas que dan la
impresión de animación.

Comportamiento
Esteatributo controla el comportamiento del texto que se muestra.

Pausa de desplazamiento en el mouse encima


Especifica si se debe hacer una pausa en el desplazamiento en el mouse encima.

Nota:
Aunque la carpa no es una queja oficial W3C elemento HTML, la mayoría de los navegadores
modernos son compatibles con este! Tenga en cuenta sin embargo, que los validadores del W3C se
quejan acerca del uso de este objeto.

80
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Texto
Este objetole permite añadir texto a la página web, arrastre el objeto a la página y haga doble clic para
empezar a escribir su texto. Utilice la barra de herramientas Formato para cambiar el tipo de letra, el
tamaño, el color y otras propiedades del texto. Para las opciones de formato disponibles consulte
Formato Herramientas.
Para insertarun vínculo en el texto utilice la opción Link. Para obtener más información acerca de los
hipervínculos por favor lea el capítulo "Enlaces" de este documento.

Máspropiedades de texto pueden cambiarse utilizando la barra de herramientas de formato o


utilizar el elemento de formato de la barra de menú. Primero debe resaltar el texto antes de
poder cambiar el formato.

Nota:
Aunque WYSIWYG Web Builder puede visualizar todas las fuentes instaladas en el equipo, se recomienda
que
sólo utiliza fuentes de seguridad web para que sus páginas web tienen el mismo aspecto en todos los
equipos. Puedes leer más sobre las fuentes web seguras en la sección 'menú Formato "de este
documento.

Lasiguientes propiedades se pueden cambiar mediante la ventana Propiedades del texto (clic
derecho menú contextual):

Acolcha
do
Conjuntosla cantidad de espacio entre el objeto y su
frontera.

Publicar estetexto como


una imagen
Convierteel texto de la imagen cuando se publica su
página.
Esteopción puede ser útil si desea que el texto que se mostrará exactamente como en WYSIWYG Web
Builder, incluso cuando ha seleccionado las fuentes que no son seguras web.
El texto seconvertirse ti una imagen GIF, JPG o PNG.
GIFutilizará la transparencia píxel.
JPG voluntadutilizar un color de fondo sólido, ya que no admite
transparencia.
PNG se traducirá en el mejor (anti-aliasing) de calidad para las fuentes más grandes, pero la
imagen de salida será más grande.

Incluirtexto en el atributo
ALT
Si el texto se ha convertido en una imagen entonces los motores de búsqueda no serán capaces de "ver"
este texto. Seleccione esta opción si desea que el texto original que se incluirán en el atributo alt.

Formato de Compatibilidad /
salida
Lamentablemente nono hay manera de hacer mirada texto exactamente igual en todos los
navegadores. Cada navegador utiliza su propio motor de renderizado de texto y todos ellos son
ligeramente diferentes. Y aunque WYSIWYG Web Builder utiliza píxeles para especificar el tamaño de
la fuente, esto todavía provoca diferentes resultados en diferentes navegadores.
Aayudarle a optimizar su texto para que se vea tan bueno como es posible todos los navegadores, que
han añadido algunas opciones para controlar la forma en que el texto se da salida en HTML. Hay 3
formatos de salida.

 Default / ClassicModo
Todo el código será dentro de div. Esto debería estar bien para los diseños de página más

81
WYSIWYG Web Builder 10 Pablo
estándar con no demasiado SoftwareSoluciones
mucho texto.

 Uso<Div> para cada línea


Cada línea se integrará dentro de su propia <div> con su propio estilo. Esto da más precisa
resultados en algunas ocasiones.

 Uso<Div> con la posición de cada línea


Cada línea se integrará dentro de su propia div e incluye información de posición / tamaño
(anteriormente
conocido como Optimizado para el modo de Firefox / Safari). Un problema común con los
navegadores basados en Mozilla es que ellos no manejan grandes bloques de texto en
combinación con CSS posicionamiento absoluto muy bien. Esta opción intenta superar este
problema mediante la ruptura de texto en múltiples <div> elementos. Esto dará lugar a
mejores diseños, sino que también aumenta la cantidad de código generado.

82
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Tenga en cuenta que no hay realmente un formato de salida preferido porque todo depende de su
diseño, lo que debe tratar lo que funciona mejor para usted. Y probarlo en todos los navegadores
populares para encontrar la solución óptima.

Vertambién para los últimos consejos y trucos:


http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=10&t=34318

Combinaciones de teclas
El textoeditor compatible con las siguientes combinaciones de teclas:

Claves Operaciones Comentarios

Ctrl + A Seleccionar todo


Ctrl + E Alineación central
Ctrl + J Justificar la
Ctrl + alineación
R +L
Ctrl derecha
El ajuste a izquierda
Ctrl + C alineación
Copia
Ctrl + V Pasta
Ctrl + X Corta
Ctrl + Z r
Ctrl + Y Desh
Rehacer
Ctrl + '+' (Ctrl + Shift + acer
Superíndic
'=') Ctrl + '=' e Subíndice
Ctrl + '(Apóstrofo) Agudo acento Después de pulsar el atajo de teclado, pulse el adecuado
letra (por ejemplo, una, e, o u). Esto se aplica a Inglés,
Francés, Alemán, italiano y teclados españoles solamente.
Ctrl + `(Tumba) Acento grave Ver Ctrl + ' comentarios.
Ctrl + ~ (Tilde) Tilde Acento Ver Ctrl + ' comentarios.
Ctrl +; (Punto y coma) Diéresis Acento Ver Ctrl + ' comentarios.
Ctrl + Shift + Acento circunflejo Ver Ctrl + '
Ctrl + 6, (coma) (circunflejo) cedilla comentarios. Ver
Ctrl + Shift + '(apóstrofo) Acento comillas tipográficas
Activar comentarios Ctrl + '.
Retroceso Borrar el carácter anterior
Ctrl + Retroceso Eliminar anterior palabra.
Ctrl + Copy
Inserte Shift Paste
+Insertar
Insert Sobrescribir
Ctrl + Flecha izquierda Mueve el cursor una palabraa la izquierda.
Ctrl + Flecha derecha Mueve el cursor una palabraa la derecha.
Ctrl + Flecha Mover a la línea
arriba Ctrl + anterior. Mover a la
Flecha
Ctrl + abajo línea de abajo.de la caja de texto. Ir al
Ir al principio
Inicio Ctrl final de la caja de texto
+Ctrl
Fin+ Supr Eliminar la siguiente palabra o caracteres
Shift + seleccionados.
SuprEsc Cortar los caracteres seleccionados.
Alt + 0xxx (Teclado numérico) Detenervalores
Inserta la edición texto.sixxx
Unicode Dejaesmodo deque
mayor edición.
255. Cuándo xxx es inferior a 256, se inserta el texto ASCI gama
basado en el actual teclado. Debe introducir valores
decimales.

Lorem Ipsum
Loremipsum es un marcador de posición de texto (texto de relleno) comúnmente utilizado para demostrar los
elementos gráficos de un
websitio, como fuente, tipografía, y el diseño, eliminando la distracción de contenido significativo.
WYSIWYG Web Builder tiene un sencillo generador de texto Lorem Ipsum incorporado para añadir
lugar de texto titular al objeto de texto. Puede insertar cualquiera párrafos completos o un número
determinado de palabras.
El texto secargar desde un archivo llamado loremispum.txt en la carpeta de la aplicación. Si lo desea,
puede modificar o sobrescribir este archivo con su propio texto personalizado (sólo para usuarios
avanzados!).

83
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Asistente para formularios


Creaciónformas nunca ha sido tan fácil! Crear formularios completos en tan sólo unos pasos. Una de
las muchas formas en que se puede interactuar con las personas que visitan su sitio web es para
obtener retroalimentación de ellos a través de las formas. Creación de un formulario desde cero puede
ser un poco difícil, así que hemos implementado el Asistente para formularios para hacer esta tarea un
poco más fácil.

Paso 1: ¿Cómo desea crear la nueva forma?


LaAsistente Generador de formularios WYSIWYG Web tiene 3 métodos para crear un formulario:
1. Crear un nuevo formulario basado en una plantilla
Esteopción le permite seleccionar una forma de la plantilla, que se puede utilizar como base
para la forma propia.
2. Crear un nuevo formulario desde cero utilizando el asistente
Inserte manualmente los controles y etiquetas al formulario.
3. Crear un formulario en blanco para que pueda agregar controles más tarde
Esteinserta un formulario en blanco en su página sin controles en él. Básicamente esto es lo
mismo que insertar manualmente una zona de forma vacía.

Paso 2: Seleccione una forma de la plantilla


Tenemosincluido varias formas listas para usar para ayudarle a empezar. Por favor, tómese su tiempo
para estudiar la
propiedadesde cada una de ellas forma para tener una idea de cómo los hemos implementado, para
que puedas utilizar este conocimiento para crear sus propias formas. Para algunas formas tendrá que
modificar los valores predefinidos, como la dirección de correo electrónico especificada o sitio web
URL.
Hay2 plantillas de formulario de procesadores que se utilizan sitios web externos para procesar los
datos del formulario. Antes de que pueda hacer uso de los servicios de estos sitios web que usted
tendrá que registrar primero! http://www.formbuddy.com/
http://www.mailmyform.com/
Estosejemplos pueden ser útiles si su sitio web no es compatible con PHP o cualquier otro tipo de
procesamiento de formularios.

84
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Paso 3: Agregar control a la forma


En este paso se puede insertar controles al formulario. Cada control puede tener una etiqueta que se
mostrará en
frentedel control.
Haga clic enAñadir y seleccione uno de los elementos del menú desplegable para insertar un nuevo
control. En la mayoría de los casos, el asistente le pedirá que introduzca un nombre de etiqueta.

Amodificar las propiedades de los controles, selecciónelo en la lista y haga clic en Editar para
mostrar las propiedades del control.
Ustedpuede volver a organizar los elementos usando el Subir y botones de abajo.

Co
Asegúrese
nse de que el formulario contiene un botón Enviar. Sin este botón, el usuario no será capaz de
presentar
jo: los datos introducidos!

85
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Paso 4: ¿Dónde se debe enviar los datos a?


Cuando el usuario presiona Enviar, el navegador envía los datos del formulario a un servidor web, por lo
que necesitamos para especificar
dondelos datos deben ser enviados a.
Una de las posibilidades es "Enviar los datos a una dirección de correo electrónico ', aunque este es un
método muy común, no funciona de forma fiable para todos los visitantes a su sitio. Sea o no que un
visitante puede utilizar este método depende del cliente de correo instalado en su ordenador. Y, por
desgracia, no hay manera de probar si ese es el caso para cada uno de sus visitantes. No se
recomienda el uso de este método!

En lugarde utilizar el presentar los datos a una dirección de correo electrónico ("mailto") método, trate
de usar un script CGI remotamente recibido como PHP, ASP o remoto soluciones alojadas
comohttp://www.formbuddy.como http://www.mailmyform.com. Estos servicios permiten acceder a
un programa CGI huido de sus servidores. Usted construye su forma como lo haría normalmente, pero
ahora que seleccione Enviar datos a un script en un servidor externo y llene el URL del script CGI
remoto. La secuencia de comandos CGI traduce su formulario en un mensaje de correo electrónico y lo
envía a la dirección que usted proporciona.

Alternativamenteusted puede crear su propio procesador de forma y hacer la parte de escritura del
procesador forma de su sitio Web Builder. En ese caso, seleccione Enviar datos a una página de su
sitio web.

En la sección de tutoriales de nuestra página web se puede encontrar un ejemplo de cómo implementar
esta usando PHP:
http://www.wysiwygwebbuilder.com/forms_php.html

Nota:
Algunas plantillas de formulario utilizan su propio guión procesador de forma (por lo general agregado
como un objeto HTML independiente). En ese caso, por favor, no cambie los valores predefinidos a
menos que sepa lo que está haciendo!

Plantillasque utilizan un procesador de forma


personalizada son: Diccionario de búsqueda
Procesador Forma: ASP
Procesador Forma:
procesador Formulario
Godaddy: Enviar a un amigo
Procesador de forma:www.formbuddy.com
Procesador de
forma:www.mailmyform.com Decirun
amigo
Todo PayPal plantillas
Todas las plantillas de
búsqueda
en cualquier momento posterior a través de
Importante:
las propiedades del formulario.
Algunos utilizan plantilla de formulario campos ocultos a (fro ejemplo) especificar una dirección de correo
electrónico
UsoConstruido o página web.de
en forma Cerciorarse
procesador de PHP para enviar datos
reemplazar estosdevalores
a una dirección correocon su propia información
electrónico.Active !!! Puede
esta opción cambiar los valores de los campos ocultos
si desea
en
utilizar el procesador de forma integrada. Para más detalles sobre
esta función en el capítulo formulario.

Tipo de codificación
El requeridotipo de codificación depende de la secuencia de comandos de procesador forma, lo que
deberá consultar la documentación
de la secuencia de comandos CGI para obtener más información. En caso de haber seleccionado una
forma predefinida, el tipo de codificación correcta se seleccionará.

86
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Forma
Una forma proporciona una manera que usted pueda recoger información de las personas que ven sus
páginas web. Un espectador introduce datos o toma decisiones entre varias opciones y luego envía el
formulario. Los resultados pueden ser enviados por correo electrónico. Si su servidor web tiene el
software adecuado, puede guardar los resultados del formulario en una base de datos.

LaObjeto Form Area es un contenedor de objetos de formulario, como botones, cuadros de edición y
casillas de verificación.
Ustedpuede añadir cualquier objeto de formulario estándar a un formulario, incluyendo campos de texto
simple y múltiple de línea, marque
cajas,botones de radio, listas de desplazamiento y listas desplegables.
Ustedañadir objetos a un formulario utilizando la barra de herramientas Form (Forma Herramientas).
Usted debecolocar objetos de formulario dentro de un formulario para que funcionen como parte del
formulario.
Los navegadores muestran objetos de formulario de forma diferente, por lo que ponen a prueba su forma
en todos los navegadores y plataformas que planea
apoyar.

¿Cómo puedo crear un formulario en WYSIWYG Web Builder?


1. Arrastre el objeto Form a la página y dibuje un cuadro para indicar la posición de la forma.
2. Diseña tu formulario añadiendo algunos controles de formulario a la forma, por ejemplo:
Botón, Botón de imagen, botón Avanzada, Casilla de verificación, botón de radio, cuadro de
edición, área de texto o cuadro combinado. También puede hacer que el texto y las imágenes
de parte del formulario. Se dará cuenta de que todos los objetos se convierten en parte de la
forma, por lo que cuando se cambia la posición de la forma de todos esos objetos se mueven a
lo largo.
3. Asegúrese de que el formulario contiene un botón Enviar (pulsador). Sin este botón, el usuario
no será capaz de presentar los datos introducidos.
4. Una vez que haya diseñado su forma, es posible que tenga que configurar algunas propiedades.
Seleccione la forma y
elegirEditar-> Propiedades en el menú Web Builder. Lo más importante que tiene que hacer es
especificar la acción de formulario. Por ejemplo, para enviar los datos introducidos a su
dirección de correo electrónico, cuando el usuario pulsa el botón de envío:mailto:
yourname@yourdomain.com

Nota:Mucho más información acerca de las formas está disponible en la sección de preguntas más
frecuentes de la página web, en los tutoriales en línea y en el foro de soporte:
http://www.wysiwygwebbuilder.com/support.html

87
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Nombre del formulario


Introduzca un nombre para el formulario. Este nombre se utiliza principalmente para scripting avanzado.

Acción
Necesarioatribuir, especificando la dirección URL de un script CGI que procesa el formulario y lo envía de
vuelta
retroalimentación.Hay dos métodos para enviar datos del formulario a un servidor. OBTENER enviará el
formulario de entrada en una URL, mientras POST envía en el cuerpo de la presentación. El último
método significa que puede enviar grandes cantidades de datos, y que la URL de los resultados del
formulario no muestra la forma codificada.

Ejemplo:
mailto: yourname@yourdomain.com
Esta voluntadenviar por correo electrónico los resultados a su dirección de correo electrónico mediante el
cliente de correo electrónico predeterminado visitantes.

Nota:No recomendamos el uso de la función del HTML "mailto". Es muy poco fiable y su
comportamiento depende en gran medida del tipo de las preferencias del navegador y de usuario.
Siempre que sea posible utilizar el procesador de forma integrada en PHP o crear su propio script de
procesamiento.

Si su servidor web es compatible con PHP, puede utilizar el procesador de forma integrada en PHP, que
es probablemente la forma más fácil de implementar procesamiento de formularios. Lea más detalles
sobre esto más adelante en este documento.
UstedTambién puede escribir un sencillo formulario de rutina de control en PHP como se explica en este
tutorial:
http://www.wysiwygwebbuilder.com/forms_php.html

Si su servidor no está habilitado con PHP, entonces usted debe comunicarse con su proveedor de
alojamiento web y pedirles los detalles acerca de las formas de procesamiento. Algunos servidores
ofrecen scripts de servidor que puede utilizar, y si este es el caso que usted necesitará un manual de
instrucciones esta facilidad para arriba. Alternativamente se puede utilizar una soluciones alojadas
remotamente como www.formbuddy.com owww.mailmyform.com.
Estosservicios permiten acceder a un programa CGI huido de sus servidores. Usted construye su forma
como lo haría normalmente, pero ahora usted completa el URL del script CGI remoto.
LaScript CGI traduce su formulario en un mensaje de correo electrónico y lo envía a la dirección que usted
proporciona.

AceptarCharset
Especifica el carácter que será aceptado por la forma. Esto puede ser útil para los idiomas Unicode. Este
valor también utilizado por el procesador de forma integrada.
Valores comunes soportados por la mayoría de los navegadores son ISO-8859-1 o UTF-8.

Tipo de codificación
Aquípuede especificar el tipo de codificación
el valor por defecto de "application / x-www-form-urlencoded" es el más amplio apoyo.
Una alternativa es "text / plain", que se utiliza normalmente en combinación cuando la Acción de
puntos de atributos a un mailto: URL. Si un navegador compatible tanto, el contenido del formulario se
envía en texto plano al destinatario indicado.

UsoConstruido en forma de procesador de PHP para enviar datos a una dirección de correo electrónico.
Despuésel usuario ha introducido la información en forma, es probable que desee procesar de alguna
manera. Por
defectoun formulario HTML hace hacer nada con los datos por lo que necesita para ejecutar una
secuencia de comandos de procesamiento de formularios. Una de las grandes características de
WYSIWYG Web Builder es que tiene un procesador de forma integrada. Esto implementa todas las
características básicas de un procesador de forma como enviar un correo electrónico, guardarla en un
archivo en el servidor o incluso almacenarla en una base de datos MySQL.

88
WYSIWYG Web Builder 10 Pablo
Habilitar Uso incorporado procesador formulario PHP para enviar datos a unaSoftwareSoluciones
opción dirección de
correo electrónico si desea utilizar el procesador integrado de forma. Esta característica genera
automáticamente un script PHP que procesará los campos de su formulario y enviarlo a una dirección
de correo electrónico que usted especifique. La secuencia de comandos de procesamiento de
formularios se insertará en la misma página y usted será capaz de seleccionar una o una página
"gracias" éxito que se mostrará cuando el usuario ha presentado los datos.

89
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Correo electrónicodirección
Ladirección de correo electrónico donde los resultados de la forma serán envían a.

Sujeto
Laasunto del mensaje de correo electrónico.

Mensaje
Un mensaje corto que se añadirá a los datos presentados.
Por defecto se enviará el mensaje en texto plano, pero también es posible dar formato al texto. Haga
clic en el botón "Editar" para cambiar el formato del mensaje. Seleccione "Texto enriquecido" para
usar el editor incorporado para dar formato al texto (haga clic en el botón "Editar" para abrir el editor)
o seleccione 'HTML' para insertar su propio código HTML para el mensaje (para usuarios avanzados!).

La página de Éxito(Requerido)
LaLa página que el usuario será redirigido a después de los datos se ha presentado (después de que el
botón de 'enviar' se ha pulsado).

Errorpágina (requerido)
LaLa página que el usuario será redirigido a si se ha producido un error al procesar los datos.

Escribirdatos del formulario a un archivo .csv.


Esteopción guardará los datos del formulario presentado en un archivo de datos separados por comas
en el servidor web. Usted abre este archivo en Microsoft Excel, un editor de texto o importación en
una base de datos.

Tenga en cuenta que debe existir el archivo de datos en el servidor y que debe poder escribir!
WYSIWYGWeb Builder tiene una opción muy útil para crear automáticamente este archivo para usted y
establecer los permisos adecuados. Simplemente haga clic en el botón 'Crear' junto al campo de
nombre de archivo y siga las instrucciones en pantalla.

Paso1
Introduzca el nombre del archivo de datos. Por ejemplo 'formdata.csv'

Paso2
Seleccione la ubicación de publicación en la que se creó el archivo. Web Builder listará todos los
perfiles que has
creadoen el administrador de publicar.

Paso3
Web Builder se conectará a la ubicación seleccionada y visualizar la estructura de carpetas en la
web
servidor.Seleccione la carpeta remota y haga clic en "Finalizar" para crear el archivo de datos.

Subir archivos a una carpeta en el servidor.


Si esta opción está activada, el procesador de forma integrada será subir archivos a una carpeta en el
servidor en lugar de enviarlos como archivo adjunto por correo electrónico.
Lalos archivos se guardan con un nombre de archivo único. La ubicación del archivo (s) cargado será
incluido en el mensaje de correo electrónico.

90
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Base de datos (sólo para usuarios avanzados)


Ustedpuede utilizar esta opción en combinación con el procesador integrado de forma de almacenar
datos de formulario en un MySQL
base de datos en el servidor. El script PHP generado intentará crear automáticamente la tabla y los
campos en base a los ajustes configurados por usted, por lo que no tiene que preocuparse de crear
usted mismo. Los campos de la base estarán en el mismo orden y utilizar el mismo nombre que en
el diseño de su forma.

Nota:
Avista o procesar los datos del formulario presentado necesitará una herramienta independiente,
como la herramienta de administración de MySQL estándar. Por favor, consulte la documentación de
su proveedor de alojamiento web para más detalles.

Escribirdatos del formulario en una base de datos MySQL.


Especifica si se debe escribir los datos del formulario en una base de datos MySQL.

Base de datos / Tabla


Especifica el nombre de base de datos MySQL y el nombre de tabla.

Nombre de usuario/ Contraseña


Especifica el nombre de usuario y contraseña de MySQL.

Servidor
Especifica el servidor de base de datos MySQL.

Contestador automático
Hemos añadido algunas funciones básicas de respuesta automática al procesador formulario. Esto le
permite enviará un
Mensaje (gracias o confirmación) para el usuario.

Desde
Especifica el 'de' dirección de correo electrónico para el mensaje de correo electrónico.

Sujeto
Especifica el asunto del mensaje de correo electrónico.

Mensaje
Especifica el texto del cuerpo del mensaje de correo electrónico.

Misceláneo
Activar Incluir dirección IP en los datos del formulario para incluir la dirección IP del ordenador en el
formulario de presentación de la forma en el mensaje. Las variables de proceso opción de éxito Page
hace que sea posible incluir resultados del formulario en la página de éxito. Esto le permite utilizar
variables en el texto (o de otras partes del
página de éxito), que será reemplazado por los valores enviados de forma.

Ejemplo: en la página de éxito añadir un objeto de texto con este texto:

Los siguientes datos se ha presentado a la forma en línea:


Nombre: $ name
Email: $ email
Página web: $ página
web

Donde nombre, correo electrónico y página web son los nombres de los campos del formulario,
además de la muestra de dólar. Así que si el nombre del campo es "nombre" y luego el nombre de la

91
WYSIWYG Web Builder 10 Pablo
variable será '$ nombre'. SoftwareSoluciones

92
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Adición de encargo código para el procesador de forma (sólo para usuarios avanzados!)
Es posible añadir código adicional al procesador de forma, esto puede ser útil para la inserción de CC /
BCC o cabeceras para enviar otro correo electrónico, tienda para la base de datos, etc.

Paso1
Primeroasegúrese de que la opción 'Usar incorporado procesador formulario PHP para enviar
datos a una dirección de correo electrónico' está habilitada.

Paso2
Haz clic derechola forma y seleccione "Copiar" en el menú contextual.

Paso3
Observe que una de las fichas se llama "Procesamiento de formularios personalizados", aquí
se puede escribir su propio
código.
Lase insertará el código justo antes de la función PHP mail ():

$ Cuerpo = '-' $ frontera .'-- '$ eol..;.

// Se inserta su código aquí!

mail ($ mailto, $ asunto, $ cuerpo, $


header); encabezado (. 'Localización:' $
success_url); salida;

Notas importantes acerca del procesador incorporado en forma de PHP:

 Si el formulario contiene un cuadro de edición llamado 'email', entonces esta dirección de


correo electrónico se utilizará como dirección "de" para el mensaje. Este nombre de campo
distingue entre mayúsculas y minúsculas! Así que no lo llaman por email o por correo
electrónico.
 Si el formulario contiene uno o más objetos 'de carga de archivos' entonces el guión adjunta
automáticamente estos archivos al mensaje de correo electrónico.
 Usted debecambiar la extensión del archivo en la página para PHP (en Propiedades de
página), debido a que PHP se añadirá a la página.
 Ustedno se puede obtener una vista previa / probar una página PHP en el equipo local a
menos que tenga un servidor web PHP instalado. Scripts PHP sólo pueden ser probados una
vez que la página ha sido publicado en el servidor.
 Sucuenta de alojamiento debe ser compatible con PHP y la función mail () debe permitir
que, de lo contrario no funcionará.
 Ustedsólo puede tener un formulario por cada página.
 Laz-orden de los objetos en el formulario determina el orden de los elementos en el mensaje de
correo electrónico.
Ustedpuede cambiar este orden utilizando las herramientas Organizar o seleccione 'organizar
los objetos "en la forma de
menú contextual.

VerTambién este tutorial en línea:


http://www.wysiwygwebbuilder.com/forms.html

90
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Los campos ocultos


UstedTambién puede agregar campos ocultos que no son prestados, pero cuyos valores se envían con un
formulario.
En generalcampos ocultos se utilizan para almacenar información entre los intercambios de
cliente / servidor que de otra manera se perderían debido a la naturaleza sin estado de HTTP.

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

Almacenamiento Web
Almacenamiento Web es una nueva característica de HTML5. Se le permite almacenar los valores de
campo entre las sesiones o / y
páginas.Esto puede ser útil si desea transferir los valores de una forma a otra.
Habilite esta opción y WYSIWYG Web Builder constructor web almacenará automáticamente y recuperar
todo
valores para usted!
Tenga en cuenta que la identificación de los objetos se utiliza como clave para el valor, por lo que si
desea recuperar los valores de otra forma (en otra página), entonces debe tener el mismo ID.

Almacena los datos de almacenamiento local sin


límite de tiempo. Tiendas de almacenamiento de
sesión de datos para una sola sesión.

Nota:
Almacenamiento Web sólo funciona si el sitio web está online. Funciona en todos los navegadores
modernos.

jQuery Mobile

Usar AJAX
jQueryMobile manejará automáticamente los envíos de formularios a través de Ajax, cuando sea posible.
Si es falso, ordinaria
HTTPse utilizarán las solicitudes.

Transición
Especifica la transición de página cuando se carga la página de éxito. Las transiciones de página sólo
funcionan si AJAX es
habilitado.

Establecer orden de tabulación en las


formas
Laopción 'Establecer orden de tabulación "se puede utilizar para configurar rápidamente el orden de
tabulación en las formas.
He aquícómo funciona:
1) Seleccione primeroel formulario.
2) A continuación, seleccionela opción 'Establecer orden de tabulación "en el menú (también disponible
en el menú contextual de la forma).
3) Web Builder ahora mostrará el índice actual de cada elemento de forma que admite el atributo
de índice de tabulación. Si el índice de tabulación no está todavía establecido, se muestra "no
especificado".
4) Ahora haga clic en cada objeto en el orden deseado. Se mostrará automáticamente el nuevo índice.

91
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón Avanzada

Insercionesun objeto Button avanzada en un formulario. El botón Advanced le da mucho más control
sobre el aspecto y el comportamiento de un botón. Usted puede cambiar el color de fondo, utilice
diferentes tipos de letra para el texto o incluso activar JavaScript.

General
Nomb
re
Nombre del botón.

Valor
Valor inicial del botón.

Tipo de
botón
Normal:NormalBotones (Push) no tienen ningún
comportamiento predeterminado.
Presentar:Cuando se activa, un botón de envío envía un
formulario.
Reset:Cuando se activa, un botón de reinicio restablece todos los controles a
sus valores iniciales.
OnClick:Con esta opción se puede asociado un script del lado del cliente para
el botón.

OnClickacción
Aquípuede especificar qué acción si se asocia con el botón de evento OnClick:
 Navegara la URL especificada; introducir una URL como valor OnClick
 Abiertouna nueva ventana y se carga la URL especificada Cierre la ventana actual del
navegador; introducir una URL como valor OnClick
 Actualizar; recargarla página actual (igual que en Actualizar en el navegador de Internet).
 Ira la página anterior; lo mismo que De vuelta en el navegador de Internet.
 Ira la página siguiente; lo mismo que a seguir en el navegador de Internet.
 Ejecutar la función Java Script; especificaruna función de script que ha definido en la página en
otro lugar.

OnClickvalor
Dependienteen la que onclick acción que ha seleccionado se introduce el valor asociado
aquí.
Por ejemplo, para Vaya a la URL especificada introduce una URL.

AccesoCla
ve
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único
carácter. Al pulsar la tecla de acceso el foco se dirige al elemento.

Discapac
itado
Laopción desactivada desactiva el control de la entrada del usuario. Controles con
discapacidad no reciben atención.

Índice de

92
WYSIWYG Web Builder 10 Pablo
fichas SoftwareSoluciones
Todos los elementos (excepto los elementos ocultos) en una forma son parte
del orden de tabulación del formulario.

Títu
lo
Especifica la información sobre herramientas
que muestra el navegador

Event
os
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos"
de este documento.

93
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CAPTCHA

LaObjeto de CAPTCHA fue diseñado para trabajar en combinación con formas (PHP). Ayuda a frenar el
spam de la presentación de los datos del formulario automáticamente. CAPTCHA de (un acrónimo de
"Completamente prueba Turing pública y automática para contar máquinas y humanos") genera
dinámicamente una imagen con letras y números (al azar).
Laletras, porque son parte de un texto de la imagen y no, es difícil para un robot de spam u otro
programa de ordenador para leer. Sin embargo, una persona tiene problemas para leer las cartas una
imagen captcha.

Consejo:
LaCAPTCHA de objeto debe ser parte de un formulario. Y ya que utiliza PHP, sólo puede ser utilizado /
probado en un servidor web con soporte para PHP!
Aser capaz de generar la imagen CAPTCHA la librería GD (versión 2) debe estar habilitado en la
configuración de PHP.
En algunos casos un mensaje de error puede aparecer en su página web. El mensaje es se verá algo
como esto:
Advertencia: imagepng (): No se puede abrir './captcha.png' para escribir en /../../captcha.php en línea x
Esteproblema puede producirse cuando el guión código de imagen se coloca en una carpeta en el sitio
web. La solución es cambiar las propiedades de esa carpeta después de la publicación. Las propiedades
correctas son 757 o 777. Usted puede utilizar el incorporado en el cliente FTP para cambiar los permisos
de la carpeta.

Algunos webservidores que no permiten establecer la opción GDFONTPATH.


En ese caso, puede desactivar esta opción en Menú-> Herramientas-> Opciones-> HTML

Imagen CAPTCHA
Ancho
Especifica el ancho de la imagen

Altura
Especifica la altura de la imagen

Tipo de fuente
Especifica la fuente utilizada para las letras / números de la imagen.
Tenga en cuenta que Web Builder cargará la fuente seleccionada para su sitio web, por lo que PHP
puede utilizar para generar la imagen.

Tamaño de la fuente
Especifica el tamaño de fuente.

Fondo
Especifica el color de fondo de la imagen.

Generar aleatorio de fondo


Esta voluntadgenerar un fondo azar con polígonos y líneas de diferentes colores que es más
difícilleer por los robots de spam.

Permitirsombra texto
Añade sombra al texto, lo que hace aún más difícil de leer para los robots de spam (pero también para los
seres humanos ...).
94
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Editbox
Offset
Especifica el desplazamiento entre la imagen y el cuadro de edición.
Consejo:Si introduce un valor negativo, entonces el cuadro de edición se colocará debajo de la imagen!

Accesoclave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML.
Sin embargo,a veces desea que el orden de tabulación a fluir un poco diferente. En ese caso, puede
numerar los campos utilizando el atributo tabindex.
En generalla primera tabindex empezar con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especificala información sobre herramientas que muestra el navegador

Validar
Para obtener más información acerca de la validación por favor lea el capítulo "Formulario de validación '.

95
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Caja

Las casillas de verificación son de encendido / apagado


interruptores que pueden ser activados por el usuario. Utilice
casillas de verificación si desea permitir que más de un elemento a
seleccionar.

General
Nombre
Nombre de la casilla de verificación.

Valor
Valor de la casilla de verificación cuando está encendido.

Inicialestado
Estado inicial de la casilla de verificación.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Discapacitado
Laopción desactivada desactiva el control de la entrada del usuario.
Discapacitadocontroles no reciben atención.
Discapacitadocontroles se omiten en navegación con tabulador.
Lavalor de los controles con discapacidad no se presentará con el formulario.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML. Sin embargo, a veces desea que el
orden de tabulación a fluir un poco diferente. En ese caso, puede numerar los campos utilizando el
atributo tabindex.
En generalla primera tabindex empezar con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Validar
Para obtener más información acerca de la validación por favor lea el capítulo "Formulario de validación '.

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

Nota:
Estecontrol es normalmente parte de un formulario.

96
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Combobox

Usadopara permitir a los usuarios hacer una selección de un número de diferentes opciones.

General
Nombre
Introduzca un identificador para el campo.

Nota:
Esimportante señalar que el nombre del elemento debe estar en el nombre del formulario [] para
múltiples selecciona! De esta manera usted va a recibir los valores seleccionados en una matriz (esta
es una característica de PHP).

Tipo
 Combobox
Esta voluntadque el objeto de una lista desplegable. Sólo una sola línea se visualiza a la vez.
 Listbox
Esta voluntadque el objeto de un cuadro de lista estándar. Varias líneas se muestran a la vez.
 De Datalist(HTML5).
Una lista de datos es una combinación entre un cuadro combinado y un cuadro de edición. El
usuario puede seleccionar los datos de
una lista o introduzca el valor manualmente.

Permitir múltiplesselecciones
Permite al usuario seleccionar varios elementos al mismo tiempo.

Elementos
UstedPuede añadir, editar y eliminar los objetos que te aparece en la lista.

Añadir
Añadir un nuevo elemento a la lista.

Editar
Editar un elemento existente en la lista.

Borrar
Quitarel elemento seleccionado de la lista.

Importación
Esteopción le permite importar rápidamente listas de datos predefinidos. Seleccione de muchos valores
predefinidos
(países,estados, meses, días, etc.) o la importación de un archivo externo.

Importar desde un archivo externo


Laarchivo con los objetos que debe tener dos elementos por línea, separados por un punto y coma: Tema
Texto; Elemento Valor

Por ejemplo: Afganistán; Afganistán


Albania; Albania

97
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Subir
Movimientosel elemento seleccionado una posición hacia arriba en la lista.

Bajar
Movimientosel elemento seleccionado una posición hacia abajo en la lista.

Discapacitado
Laopción desactivada desactiva el control de la entrada del usuario.
Discapacitadocontroles no reciben atención.
Discapacitadocontroles se omiten en navegación con tabulador.
Lavalor de los controles con discapacidad no se presentará con el formulario.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML. Sin embargo, a veces desea que el
orden de tabulación a fluir un poco diferente. En ese caso, puede numerar los campos utilizando el
atributo tabindex.
En generalla primera tabindex empezar con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Validar
Para obtener más información acerca de la validación por favor lea el capítulo "Formulario de validación '.

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

Nota:
Estecontrol es normalmente parte de un formulario.

98
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Editbox

Campo de una sola línea que se puede utilizar para agregar campos de dirección nombre / e-mail.

General
Nombre
Introduzca un identificador para el campo.

Valor inicial
Valor que es inicialmente visualización en el campo.

Lugartitular (HTML5)
Especifica un toque corto para ayudar al usuario a rellenar el campo de entrada. El texto desaparecerá
tan pronto como el usuario introduce algún texto.

Max. Longitud
Especifica el número máximo de caracteres puede introducir un usuario en el cuadro de edición.

Tipo
 texto
Un campo de texto sin formato.
 contraseña
Hace que el cuadro de edición un campo de contraseña por lo que cualquier entrada de texto
se muestra como asteriscos.
 de color (HTML5)
Lanavegador muestra un selector de color visual.
 fecha (HTML5)
Lanavegador muestra un selector de fechas.
 datetime (HTML5)
Campo de entrada es de precisas y absolutas de fecha y hora.
 -datetime locales(HTML5)
Campo de entrada es de fecha y hora local.
 email(HTML5)
Campo de entrada es para direcciones de correo electrónico.
 mes (HTML5)
Lanavegador muestra un selector de mes.
 número (HTML5)
Lanavegador muestra un cuadro de selección visual.
 rango (HTML5)
Lanavegador muestra un selector de rango.
 Búsqueda (HTML5)
Lanavegador muestra un campo de búsqueda.
 tel (HTML5)
Lanavegador muestra un campo de entrada de teléfono.
 tiempo (HTML5)
Campo de entrada es un campo de entrada de tiempo.
 url (HTML5)
Campo de entrada es para direcciones web.
 semana (HTML5)
Lanavegador muestra un selector de semana.
Nota: Campos Actualmente sólo texto y la contraseña son compatibles con todos los navegadores. En
otros casos, algunos navegadores simplemente mostrar el cuadro de edición predeterminado.

99
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Discapacitado
Laopción desactivada desactiva el control de la entrada del usuario. Controles con discapacidad no
reciben atención. Controles de movilidad se omiten en navegación con tabulador. El valor de los
controles con discapacidad no se presentará con el formulario.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Alineación
Especifica la alineación horizontal del campo de entrada.

Autocompleta (HTML5)
Especifica si el campo de entrada debe tener activado autocompletar (si está disponible en el navegador).

Readonly
Laopción de sólo lectura impide que el usuario cambie el valor del campo, pero no de la interacción
conel campo. El usuario puede seleccionar el texto para copiar, por ejemplo. Elementos de sólo
lectura reciben atención, pero no pueden ser modificados por el usuario. Elementos de sólo lectura se
incluyen en la navegación con tabulador. Elementos de sólo lectura se presentarán con la forma.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML. Sin embargo, a veces desea que el
orden de tabulación a fluir un poco diferente. En ese caso, puede numerar los campos utilizando el
atributo tabindex.
En generalla primera tabindex empezar con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Shadow Box
Configurecaja de sombra (también llamado sombra) para el objeto. Esta función requiere una CSS3
habilitado
navegador.

Acolchado
Conjuntosla cantidad de espacio entre el objeto y su frontera.

Validar
Para obtener más información acerca de la validación por favor lea el capítulo "Formulario de validación '.

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

Nota:
Estecontrol es normalmente parte de un formulario.

10
0
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Subir archivo

Este objetoproporciona un medio para los usuarios adjuntar un archivo al contenido de la forma. El
elemento se representa como un campo de texto y un botón asociado, aunque en algunos
navegadores se pueden aparecer de forma diferente. Por ejemplo: el texto del botón 'Examinar' será
'Elegir' en la ópera y en "Examinar" en el IE / FireFox. Además, no hay manera de controlar el tamaño
del campo de botón o de edición a través de HTML ..

Notas:
Cuando se utiliza el procesador incorporado en forma de PHP, el script generado se encargará
automáticamente de adjuntarlo (s) seleccionado para el mensaje de correo electrónico después de que
el formulario ha sido enviado.

Másservicios de alojamiento limitan tamaño de subida de entre 2 y 4 Mb. Mientras que usted puede
controlar el límite de carga mediante la adición de un campo oculto llamado "tamaño del archivo"
con el tamaño en kB, será sin embargo cumple con los límites impuestos por los proveedores de
alojamiento.

Si decide no utilizar el procesador de forma integrada, debe implementar una secuencia de comandos
para manejar la carga de archivos a ti mismo!

General
Nombre
Introduzca un identificador para el campo.

Discapacitado
Laopción desactivada desactiva el control de la entrada del
usuario. Controles con discapacidad no reciben atención.
Discapacitadocontroles se omiten en navegación con tabulador.
Lavalor de los controles con discapacidad no se presentará con el formulario.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML. Sin embargo, a veces desea que el
orden de tabulación a fluir un poco diferente. En ese caso, puede numerar los campos utilizando el
atributo tabindex.
En generalla primera tabindex empezar con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Validar
Para obtener más información acerca de la validación por favor lea el capítulo "Formulario de validación '.

100
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Nota:
Estecontrol es normalmente parte de un formulario.

100
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón de imagen

Insercionesun objeto imagen del botón en un formulario.


Un botón de imagen es como un botón Enviar. Cuando el visitante de la página hace clic en la imagen
que va a realizar la acción asociada a la forma.

General
Nombre
Nombre del botón.

Image:entrarla ruta y el nombre de la imagen / foto.

Usotamaño original:Seleccione esta opción si desea que aparezca la imagen en su tamaño original.
Fita disposición rectángulo:Seleccione esta opción si desea especificar manualmente el tamaño de la
imagen.

LaBotón Imagen actúa del mismo modo que un botón con el tipo establecido en: Presentar

Discapacitado
Laopción desactivada desactiva el control de la entrada del
usuario. Controles con discapacidad no reciben atención.
Discapacitadocontroles se omiten en navegación con tabulador.
Lavalor de los controles con discapacidad no se presentará con el formulario.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Prensadola clave de acceso sitúa el foco en el elemento.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML.
Sin embargo,a veces desea que el orden de tabulación a fluir un poco diferente. En ese caso, puede
contar el
campos utilizando el atributo tabindex.
En generalla primera tabindex empezar con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Si desea más control sobre el aspecto y el comportamiento del botón también se puede utilizar el
botón Avanzada

Nota:
Estecontrol es normalmente parte de un formulario.

101
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

EmpujarBotón

Lapulsador normalmente se utiliza como presentar o botón de reinicio


en un formulario. Si el pulsador no es parte de una forma que no hace
nada por defecto.

General
Nombre
Nombre del botón.

Valor / Etiqueta
Caption del botón.

Tipo de botón
Presentar:Cuando se activa, un botón de envío envía un formulario. Un formulario puede contener
más de un botón de envío.
Reset:Cuando se activa, un botón de reinicio restablece todos los controles a sus valores iniciales.
Normal:NormalBotones (Push) no tienen ningún comportamiento predeterminado.
Cada botón puede tener secuencias de comandos del cliente asociados a atributos de los eventos
del elemento. Cuando ocurre un evento (por ejemplo, el usuario pulsa el botón, lo libera, etc.), se
activa el script asociado.

Discapacitado
Laopción desactivada desactiva el control de la entrada del usuario.
Discapacitadocontroles no reciben atención.
Discapacitadocontroles se omiten en navegación con tabulador.
Lavalor de los controles con discapacidad no se presentará con el formulario.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento con el fin
los elementos aparecen en el código HTML. Sin embargo, a veces desea que el orden de tabulación a
fluir un poco diferente. En ese caso, puede numerar los campos utilizando el atributo tabindex. Por lo
general, se inicia la primera tabindex con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

Nota:

102
WYSIWYG Web Builder 10 Pablo
Estecontrol es normalmente parte de un formulario. SoftwareSoluciones

103
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón de opción

Los botones de radio son como casillas de verificación, excepto que cuando varios comparten el
mismo nombre, que se excluyen mutuamente: cuando uno se conecta "on", a todos los demás con el
mismo nombre están "apagados".

General
Nombre del grupo
LaRadio Button será parte de este grupo.
Los botones de radio con el mismo nombre del grupo obligará al usuario a seleccionar una opción.

Texto
Textoque aparece a la derecha del botón de opción.

Valor
Valor del botón de opción cuando se selecciona.

Inicialestado
Estado inicial del botón de opción.

Discapacitado
Laopción desactivada desactiva el control de la entrada del
usuario. Controles con discapacidad no reciben atención.
Discapacitadocontroles se omiten en navegación con tabulador.
Lavalor de los controles con discapacidad no se presentará con el formulario.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML. Sin embargo, a veces desea que el
orden de tabulación a fluir un poco diferente. En ese caso, puede numerar los campos utilizando el
atributo tabindex. Por lo general, se inicia la primera tabindex con valor "1". Para excluir un elemento
de la orden de tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite
cuando las fichas de los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

Nota:
Estecontrol es normalmente parte de un formulario.
104
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

TextArea

Un área de texto es un campo de formulario de varias líneas donde el usuario puede


introducir una gran cantidad de texto. Nota: Este objeto es normalmente parte de una
forma!

General
Nombre
Introduzca un identificador para el campo.

Valor inicial
Valor que es inicialmente visualización en el campo. Cuando se envía el formulario se introduce el texto
nuevo o modificado.

Discapacitado
Laopción desactivada desactiva el control de la entrada del usuario. Controles con discapacidad no
reciben atención. Discapacitado
controles se omiten en navegación con tabulador. El valor de los controles con discapacidad no se
presentará con el formulario.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Readonly
Laopción de sólo lectura impide que el usuario cambie el valor del campo, pero no de la interacción
con el campo. El usuario puede seleccionar el texto para copiar, por ejemplo. Elementos de sólo
lectura reciben atención, pero no pueden ser modificados por el usuario. Elementos de sólo lectura se
presentarán con la forma.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación
del formulario. Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de
elemento a elemento en orden los elementos aparecen en el código HTML. Sin embargo, a veces desea
que el orden de tabulación a fluir un poco diferente. En ese caso, puede numerar los campos utilizando
el atributo tabindex. Por lo general, se inicia la primera tabindex con valor "1". Para excluir un
elemento de la orden de tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se
omite cuando las fichas de los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador

Shadow Box
Configurecaja de sombra (también llamado sombra) para el objeto. Esta función requiere una CSS3
habilitado
navegador.

Acolchado
Conjuntosla cantidad de espacio entre el objeto y su frontera.

Validar
Para obtener más información acerca de la validación por favor lea el capítulo "Formulario de validación '.
105
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

106
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

ActiveX
Ustedcontrola el uso de ActiveX para incrustar una aplicación en una página Web. Los controles ActiveX
pueden agregar capacidades personalizados tales como audio / reproductores de películas, calendarios,
botones personalizados y otras características a sus páginas. Al utilizar controles ActiveX asegúrese de
que sus visitantes usan un navegador que soporte esto. Dibuje un cuadro para indicar la posición del
control ActiveX. Aparece el cuadro de diálogo Insertar Control ActiveX, enumerando los controles
ActiveX instalados actualmente en su sistema. En la parte inferior se muestra la ruta de control ActiveX
seleccionado (que tiene un .ocx o extensión .dll). Para cambiar las propiedades del Control Activo
seleccione Propiedades. Inmuebles disponibles se mostrarán en la ventana y se pueden cambiar
seleccionando el elemento y editar el valor. La mayoría ActiveX controla también tienen una página de
propiedad nativa, que su lata llamada usando el botón Propiedades. Algunos controles ActiveX no
soportan HTML como lenguaje de programación y se comportarán inesperado, así que asegúrese de
probarlo extensa antes de publicar su página.

Nota:
LaEl componente ActiveX no es compatible con W3C. Sólo funciona en versiones antiguas de Internet
Explorer!
Le recomendamos no utilizar este componente en su sitio web. Es sólo está disponible para la
compatibilidad con versiones anteriores.

107
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Editorial Archivo
Estecomponente carga automáticamente los archivos especificados a su sitio web y crea las carpetas
una vez publicada esta página.
Laarchivos serán publicados a la misma ubicación que la propia página.

Este objetopuede ser útil si desea incluir archivos adicionales que son parte de la página (como scripts
o archivos multimedia).

Agregar archivos
Agregar uno o más archivos en el árbol.

AñadirCarpeta
Insertaruna carpeta completa y todos los archivos que contiene desde el disco local.

Nueva carpeta
Añade un nuevo nombre de la carpeta en el árbol.

Propiedades
Modificarlas propiedades (nombre de la carpeta o archivo de localización) del elemento seleccionado.

Quitar
Quitarel elemento seleccionado en el árbol de carpetas.

Eliminar todo
Quitartodos los artículos en el árbol de carpetas.

Hacerno incluir archivos en Asset Manager


Si la opción 'Let WYSIWYG Web Builder gestionar imágenes y otros archivos utilizados por un proyecto
"en Opciones está activada, todos los archivos se copian en la carpeta de proyectos por Asset Manager
de Web Builder. Puede desactivar este comportamiento para esta extensión habilitando esta opción.

Nota:
Ustedpuede utilizar arrastrar y soltar para reordenar artículos.

108
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Flash
Con Adobe Flash archivos (.swf), puede crear multimedia, gráficos y audio que descarga rápidamente.
Para ver estos archivos, los visitantes del sitio deben instalar el plugin de flash adecuado a su navegador
y plataforma. Estos plugins están disponibles en el sitio Web de Macromedia enwww.macromedia.com.
Web Builder crea todo el código es necesario agregar un archivos Flash a su sitio.

Película
Introduzca un nombre de archivo de la película (.swf).

Alternativaimagen
Esteimagen se mostrará si el navegador no soporta flash.

Versión
Especificael número mínimo versión de Flash que necesita la película se reproduzca correctamente.

Calidad
Acontrolar la calidad de la pantalla, seleccione una opción de calidad.
Bajofavorece la velocidad de reproducción sobre el aspecto y nunca utiliza la visualización suavizada.
Autolowhace hincapié en la velocidad, pero mejora el aspecto siempre que sea posible. La reproducción
comienza con
anti-aliasingapagado. Si Flash Player detecta que el procesador puede gestionarla, anti-aliasing está
activado.
Autohighhace hincapié envelocidad y al aspecto igualmente al principio, pero sacrifica el aspecto por
velocidad si es necesario. La reproducción comienza con anti-aliasing activado. Si la velocidad de
fotogramas real cae por debajo de la velocidad especificada, anti-aliasing se apaga para mejorar la
velocidad de reproducción. Utilice esta configuración para emular el ajuste en Flash Ver> Suavizado.
Mediose aplica un poco de anti-aliasing y no suavizar los mapas de bits. Produce una mejor calidad que la
Ajuste bajo, pero de menor calidad que el valor Alta.
Altofavorece aspecto ante la velocidad de reproducción y siempre utiliza la visualización suavizada. Si
la película no contiene animación, los mapas de bits se suavizan; si la película tiene animación, mapas
de bits no se suavizan.Mejorproporcionala mejor calidad de visualización y no tiene en cuenta la
velocidad de reproducción. Toda la salida es anti-alias y todos los mapas de bits se suavizan.

Escala
Adeterminar la forma en que la película se inscribe en el marco, seleccione una opción de Escala.
Incumplimiento (Mostrartodo)hace que toda la película visible en el área especificada sin distorsión,
mientras se mantiene la relación de aspecto original de la película. Fronteras pueden aparecer a ambos
lados de la película.
No Borderbásculala película para rellenar el área especificada, sin distorsión pero quizá con algún recorte,
mientrasel mantenimiento de la relación de aspecto original de la película.
Ajuste exactohace que toda la película visible en el área especificada sin intentar mantener la
proporción original. Puede ocurrir una distorsión.

Autostart
Areproducir la película automáticamente cuando el visitante del sitio se abre la página, seleccione Auto
Start.

Bucle
Para volver a reproducirla película cuando termina, seleccione Loop.

VisualizaciónMenú completo
Cuando se activa, se mostrará el menú completo, que permite al usuario una gran variedad de
opciones para mejorar o controlar la reproducción. Si no está seleccionada, sólo se mostrará un menú
que contiene únicamente la opción Configuración y la opción Acerca de Flash.

VentanaModo
Especifica el modo de ventana del flash. Seleccione Transparente si desea mostrar la película flash con

109
WYSIWYG Web Builder 10 Pablo
transparencia. De lo contrario, seleccione Ventana u opaco. SoftwareSoluciones

110
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Permitir escritura Acceso


LaAllowScriptAccess parámetro de Flash Player controla la capacidad para realizar scripts de salida
desde dentro de un SWF de Flash.
Cuando AllowScriptAccess es "nunca", los scripts de salida siempre fallará.
Cuando AllowScriptAccess es "siempre", los scripts de salida siempre tendrá éxito.
Cuando AllowScriptAccess es "samedomains", los scripts de salida sólo tendrá éxito dentro del mismo
dominio.

PermitirPantalla Completa
Active esta opción para permitir la visualización a pantalla completa de la aplicación Flash. Esta opción es
compatible con Flash
9.0 o superior.

IncrustarAdobe Flash Player conetn usando SWFObject


SWFObject esun método que cumple los estándares del W3C para incrustar el contenido de Flash, que
utiliza un pequeño archivo de JavaScript.
Si habilita esta opción, Web Builder utilizará el script SWFObject en lugar del W3C incompliant
<object> y <embed>.

FlashVariables
Flashvariables (FlashVars) que es una forma de pasar datos o variables de HTML a una aplicación
Flash. FlashVars es compatible con Flash Player 6 y versiones posteriores. Por favor, consulte la
documentación de la aplicación Flash para obtener más detalles.

111
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Flash Video Player


Si quiere añadir películas a tu página y luego Flash Video es probablemente la manera más confiable
de hacer esto porque la mayoría de los usuarios tendrán Flash Player de Adobe plug-in instalado en su
navegador.

LaFlash Movie Player es un reproductor que se puede utilizar para reproducir películas Flash (FLV),
pero también el apoyo de muchos otros formatos como MP4 (también AVC), MOV, AVI, MP4V, M4V,
F4V, VP6, VP7 y M4A (AAC auch , iPod), M4R (Audio / tonos para el iPhone), F4A (Audio).
Tiene muchas opciones para personalizar la apariencia del reproductor.

General
Vídeo
Especifica el video que desea reproducir.

Imagen
Especifica la imagen 'sumario'. Esto se mostrará si el vídeo no se reproduce.

Título
Especifica el título del vídeo. Esto se mostrará en el reproductor si el usuario haga clic en el botón 'Info'.

Descripción
Especifica la descripción del video. Esto se mostrará en el reproductor si el usuario haga clic en el
botón 'Info'.

Autocomienzo
Areproducir la película automáticamente cuando el visitante del sitio se abre la página, seleccione Auto
Start.

Bucle
Para volver a reproducirla película cuando termina, seleccione Loop.

ShowBotón de Información
Especifica si el botón 'Info' se debe mostrar en la barra de control.

Mostrar Pantalla CompletaBotón


Especifica si el botón "Pantalla Completa" se debe mostrar en la barra de control.

Mostrar EscalaBotón
Especifica si el botón "Escala" se debe mostrar en la barra de control.

Mostrar volumenControles
Especifica si los controles de volumen se debe mostrar en la barra de control.

Tiempo De La Funcion
Especifica si el tiempo se debe mostrar en la barra de control.

Mostrar GrandeBotón de reproducción


Especifica si el botón de reproducción grande debe mostrarse en el centro del jugador.

HTML5
Aasegúrese de que su video también juega en dispositivos que no soportan Flash (al igual que muchos
dispositivos móviles), que
puede habilitar la opción de soporte Flash y HTML5. La mirada y la sensación del Flash Player A
continuación se simula mediante el uso de vídeo HTML5, JavaScript y CSS. Tenga en cuenta que no
todos los navegadores soportan los mismos formatos de vídeo. si usted quiere apoyar a tantos
dispositivos como sea posible también se debe incluir .mp4 y
.wversiones de ebmel vídeo.

112
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Si desmarca "Mostrar controles" entonces no hay controles se muestran en el modo HTML5.

113
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Estilo
BackgroundColor
Especifica el color del fondo.

WindowMode
Especifica el modo de ventana de la película flash. Seleccione Transparente si desea mostrar la película
flash
con transparencia.De lo contrario, seleccione Ventana u opaco.

ButtonColor
Especifica el color de los botones.

ControlSpacing
Especifica el espacio entre los controles.

ControlBarColor
Especifica el color de la barra de control.

ControlBarHeight
Especifica la altura de la barra de control.

DescriptionColor
Especifica el color de la descripción.

GradientColor
Especifica el color de degradado.

SliderColor
Especificael color de los deslizadores.

SliderHeight
Especifica la altura de las barras de desplazamiento.

SliderTrackerColor
Especifica el color del seguidor slider.

TimeColor
Especifica el color del tiempo.

TitleColor
Especifica el color del título.

TotalTimeColor
Especificael color del tiempo total.

VolumeLength
Especifica el ancho de la barra de volumen.

110
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

HTML
Este objetose puede utilizar para insertar código HTML o JavaScript.
Cuando se agrega HTML usando este objeto será el lugar en el lugar donde se colocará el objeto.

Descripción
Esto se utilizapara su visualización en Web sólo Constructor. Puede ayudar a identificar el bloque de
código que ha añadido.

Tipo
LaTipo de propiedad especifica cómo y dónde se insertará el código HTML de la página.

 HacerNo use <div>


Seleccione esta opción para insertar el código HTML "TAL CUAL", sin el tamaño y la posición
de la información.

 Uso<Div> para ajustar la posición y el tamaño del HTML


Seleccione esta opción para insertar el código HTML dentro de un contenedor DIV con el
tamaño y la posición
informaciónagregado por WYSIWYG Web Builder.

<Div style: left: 100px; top: 100px; ancho: 200px; altura: 200px; position:
absolute ">
<- Tu html ->
</ Div>

 Inicio de Página
LaSe insertará HTML antes de que todo otro código en la página.

<- Tu html ->


<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN"
"Http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>

 Entre <head> </ head>


LaSe insertará HTML entre las etiquetas <head> </ head> etiquetas.
<Head>
...
<- Tu html ->
</ Head>

 Dentro de <body>etiqueta
LaHTML se inserta dentro de las etiquetas <body>.

<Body atributo = valor>

 Después de <body>etiqueta
LaSe insertará HTML después de las etiquetas <body>.
<Body>
<- Tu html ->
...
</ Body>

 Antes de </ body>


<Body>
...
<- Tu html ->
</ Body>

 Fin de página
<Body>
...
</ Body>
<- Tu html ->

111
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Desbordamiento
Estedesbordamiento se puede utilizar para controlar el comportamiento de desbordamiento de la capa.

 Ninguno
Lacontenido del objeto HTML es totalmente visible. No ocurrirá ningún recorte.
 Oculto
Lacontenido es recortado, pero el navegador no muestra una barra de desplazamiento para
ver el resto del contenido.
 Voluta
Lacontenido es recortado, pero el navegador muestra una barra de desplazamiento para ver
el resto del contenido.
 Auto
Si se recorta el contenido, el navegador mostrará una barra de desplazamiento para ver el
resto del contenido.

HTML
Introduzca su código HTML costumbre aquí.

Notas:
1. Para la mayoría de los objetos, también puede agregar HTML extra antes, dentro de después de
la automática
generadoHTML. Seleccione un objeto y seleccione Editar-> HTML en el menú Web Builder.
2. Aañadir HTML extra antes, dentro de después de las etiquetas de la cabeza y el cuerpo,
seleccione Ver-> Página HTML en el menú Web Builder.
3. Si es necesario agregar HTML "global" a su página, es mejor añadirla utilizando la opción Página
HTML.

112
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Java
Javaapplets son una forma eficiente de añadir sonido y animación, tales como mensajes de
desplazamiento y otros efectos interesantes, a una página. Applets de Java son aplicaciones
independientes de la plataforma con tamaños de archivo compactos.
Másnavegadores son compatibles con Java, por lo que los visitantes del sitio no necesitan plug-ins
especiales para ejecutar un applet de Java.
LaJava Object hace que sea fácil de insertar los applets de Java para que la página y establecer sus
propiedades.
AElija las propiedades correspondientes ajustes, usted debe estar familiarizado con Java antes de
agregar estos tipos de archivos de la aplicación a su sitio.

Ustedpuede descargar applets Java de uno de estos sitios web:


http://www.freewarejava.com/applets/index.shtml
http://www.jguru.com/

Siga las instrucciones que vienen con estos applets para más información sobre los parámetros y
otros ajustes.

113
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Marco en la línea
Marco en la línea o un iframe es permite abrir nuevas páginas interiores páginas principales. Los
marcos en línea también se les conoce como los marcos flotantes.

General
Nombre
Usadopara establecer un nombre para el marco en línea.

Enlacea
Sitio Web:visualizaciónuna página de un sitio web externo. Sintaxis:http://www.google.com

Web interno Página:visualizaciónuna de las páginas de su sitio web.


Haga clic en'Select' para elegir una página. La ventana Seleccionar página mostrará todas las páginas que
forman parte de la
web actualproyecto de sitio.
Web Builder creará automáticamente para corregir (relativa) URL al publicar sus páginas.

Mostrar borde
Usadopara especificar la posibilidad de tener una frontera para el marco en línea o no.

Las barras de desplazamiento


Usadopara especificar si el marco en línea debe tener la capacidad de desplazamiento o no. Valores
posibles: Si es necesario, Nunca o Siempre.

Suplentetexto
Este textose mostrará por los navegadores que no soportan marcos en línea.

Apariencia
Las barras de desplazamiento
Usadopara especificar si el marco en línea debe tener la capacidad de desplazamiento o no. Valores
posibles: Si
Necesaria,Nunca y Siempre.

Color del borde


Especifica el color del borde alrededor del marco en línea. Ajuste el color a "Automático" para
mostrar la frontera 3D estándar.

Tamaño del borde


Especifica el tamaño del borde alrededor del marco en línea. Póngalo a 0 (cero) para ninguna frontera.

La mesa de luz
LaOpción la mesa de luz hace posible la visualización de otra página en caja de luz (utilizando
FancyBox) después de hacer clic en una imagen de vista previa. Puede especificar la imagen de vista
previa, título de luz y anchura / altura de la caja de luz.

Shadow Box
Configurecaja de sombra (también llamado sombra) para el marco en línea. Esta función requiere un
navegador habilitado CSS3. No funcionará en combinación con la función de luz.

VerTambién este tutorial en línea:


http://www.wysiwygwebbuilder.com/iframe.html

114
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Capa
Capasse puede utilizar para crear diseños avanzados. Una capa es un contenedor para otros
objetos. Los objetos se pueden arrastrar y soltar en una capa al igual que en un formulario.

Algunas de las características interesantes de capas son:


 0 ... 100% de transparencia
 Mostrar / Ocultaruna capa (y todos sus objetos contenidos) con el administrador de capas o por
medio de eventos.
 Posicióny el tamaño de una capa relativamente
 Posiciónuna capa absoluta a la derecha y / o borde inferior de la ventana del navegador
 Variosfondo de repetición y opciones de alineación.
 Modo de capa adhesiva, mantiene una capa visible en todo momento.

Opacidad
Cambiar la transparencia (0 - 100%) de la capa (y todos sus hijos).

Desbordamiento
Estedesbordamiento se puede utilizar para controlar el comportamiento de desbordamiento de la capa.

 Ninguno
Lacontenido de la capa es totalmente visible. En este caso el tamaño de la capa no puede ser
menor de la
contenido.
 Oculto
Lacontenido es recortado, pero el navegador no muestra una barra de desplazamiento para ver el
resto del contenido.
 Voluta
Lacontenido es recortado, pero el navegador muestra una barra de desplazamiento para ver el
resto del contenido. Esto puede ser útil para crear contenido desplazable sin la necesidad de un
marco en línea!
 Auto
Si se recorta el contenido, el navegador mostrará una barra de desplazamiento para ver el resto
del contenido.

Nota:
Acrear / actualizar el contenido de la capa, debe cambiar su tamaño en el diseñador para que todos los
objetos serán visibles. Después de haber creado / modificado el diseño se puede cambiar el tamaño de
la capa al tamaño deseado.
Ustedno se puede desplazar el contenido de la capa interior de Web Builder.

115
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CapaModo
LaCapa tiene 3 modos. El modo por defecto, el modo de capa pegajosa y un modo de encabezado / pie de
página.
En el modo por defecto de la capa se colocará en la ubicación en la que ha colocado durante el tiempo
de diseño. Si el modo de capa pegajosa mantiene una capa visible (arriba / abajo / izquierda /
derecha) en todo momento. Esto puede ser útil si se desea mantener un menú o una imagen visible
incluso si los rollos de página. La animación es también una opción!

El modo de Encabezado / Pie de páginapuede ser útil si usted está utilizando la capa como un
encabezado o un pie de página de su página por lo general en combinación con la opción
'redimensionamiento horizontal relativa ".
Normalmente, el 'cambio de tamaño en relación horizontal "(y las otras opciones relativas) agregarán el
código después de la
<Body>contenedorresultanteen un mayor z-index. La selección del modo 'Encabezado / Pie de página'
insertará el código
antes de la etiqueta <body> contenedor, Por lo que la capa estará detrás de todos los demás contenidos.

También hayel modo de capa de acoplamiento que le permite acoplar una capa a un lado específico de
la pantalla o en el centro de la pantalla. La principal diferencia entre este modo y el modo de capa
pegajosa es que el modo de capa de acoplamiento no utiliza JavaScript, en cambio, es utiliza técnicas
CSS estándar. Es sólo otra manera para que usted utilice capas y este modo también puede ser útil
para los encabezados y pies de página completa.

Con la capa de anclado se puede anclar uno o más lados de la capa a los lados de la página. Por
ejemplo si se habilita 'Anclaje a la izquierda' y 'Anclaje a la derecha', entonces después la capa se
extenderá si cambia el tamaño de la ventana del navegador (el desplazamiento a la izquierda y
derecha borde de página seguirá siendo el mismo).
Pero también se puede anclar una sola frontera (o todos).

FlotanteCapamodo espara el uso avanzado. Esto hará que la capa de "flotar" en lugar de tener una
posición fija. Si hay varias capas flotantes se colocan en la página entonces van a ser colocados uno al
lado del otro (de izquierda a derecha) en función del espacio disponible en pantalla. Si la capa no cabe
en la fila actual entonces se envolvió a la siguiente fila. Esta característica puede ser útil (para usuarios
avanzados) para crear sitios web de respuesta.

Laopción de modo flotante se puede utilizar para controlar el "comportamiento float ':
 Defecto
La capa dese posicionará en el lado derecho del objeto flotante anterior. Si el objeto no cabe
en la fila actual y luego se moverá a la siguiente fila.
 ClaroIzquierda
La capa dese verá obligado a la siguiente fila. La capa puede tener otros objetos en el lado
derecho de
la fila (a menos que el objeto flotante siguiente también está configurado para borrar la
izquierda).
 CompletoAncho
La capa deutilizará la anchura completa (100%) de la página. No hay otros objetos pueden
estar en la misma fila.
Este modopuede ser útil para los encabezados o pies de página.

Modal Capamodoposicionará a la capa encima de todo. Otros elementos de la página se desactivarán


hasta que se cierre la capa. Básicamente esto convierte la capa a un jQuery diálogo pero sin la
tematización.

Una capa de panel está inicialmente invisible, pero puede deslizarse desde la parte derecha o izquierda
de la página mediante eventos (mostrar / ocultar). Display, especifica la relación del panel de la página
de contenidos. "Push" empuja la página una y "superposición" mostrar la capa sobre el contenido.
Descartable, especifica si el panel se puede cerrar haciendo clic fuera hasta la página.

116
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Modo por defecto


Relativoposición horizontal
En lugarde la utilización de coordenadas absolutas, la posición de la capa será ahora con relación a la
anchura de la página. Esta propiedad sólo tiene efecto cuando se muestra la página en el navegador!

Posición vertical relativa


En lugarde la utilización de coordenadas absolutas, la posición de la capa será ahora con relación a la
altura de la página. Esta propiedad sólo tiene efecto cuando se muestra la página en el navegador!

Relativodimensionamiento horizontal
En lugarde la utilización de dimensiones absolutas, la anchura de la capa será ahora con relación a la
anchura de la página. Esta propiedad sólo tiene efecto cuando se muestra la página en el navegador!

Vertical relativoapresto
En lugarde la utilización de dimensiones absolutas, la altura de la capa será ahora en relación con la
altura de la página. Esta propiedad sólo tiene efecto cuando se muestra la página en el navegador!

Derecho
Conjuntosla posición del objeto con respecto al borde derecho de la página. Esto reemplazará el atributo
de "izquierda".

Fondo
Conjuntosla posición inferior del objeto en relación con la parte inferior de la página. Esto reemplazará
el atributo 'top'.

Alineación
Especifica la alineación del contenido de la capa de Si de ajuste horizontal relativa está habilitada.

 Izquierda
Lacontenido será alineado a la izquierda (por defecto).
 Centro
Lacontenido será centrada.
 Derecho
Lacontenido será alineado a la derecha.
 Contenido Stretch
Esta voluntadposición y tamaño del niño objeto con respecto a la capa. Esta opción se puede
utilizar para creado
contenido estirable. Cuando el tamaño de los objetos se basa en el tamaño de la ventana del
navegador.

Notas sobre el estiramiento de


contenido:
Estecaracterística fue diseñada principalmente para ser utilizado para la cabecera y pies de página
que cubra todo el ancho de la página.
Esteopción sólo funcionará para objetos HTML simples como imágenes, formas, texto. No
funcionará para objetos avanzadas como menús, extensiones, blog, galerías, etc. Estos objetos
no se pueden estirar. Imágenes de estiramiento pueden tener efecto sobre la calidad de la
imagen.

Modo Sticky
Orientación
Especifica a qué lado de la ventana del explorador de la capa se 'palo'.
Ustedpuede utilizar los valores de desplazamiento para ajustar el desplazamiento horizontal y vertical de
las fronteras.
LaValor de retardo especifica el retardo de animación.

Conexotutorial:
http://www.wysiwygwebbuilder.com/using_layers.html
117
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Objetos maestros
MaestroObjetos es una característica muy útil, que le permite volver a utilizar objetos de otra página (de
su sitio web) en la página web actual. Un objeto 'objetos maestros' es básicamente un puntero a los
objetos de otra página (por ejemplo, el 'Maestro de página "). Estos objetos incrustados en la página
exactamente como están en la página original. Incluso puede utilizar la página principal de varios
objetos en una sola página!
Digamosusted tiene un cierto diseño que es el mismo para todas sus páginas y usted no desea que esta
copia / pega que entre todas sus páginas; luego simplemente crear el diseño de una vez en la página e
insertar el diseño de la página en todas sus otras páginas utilizando el objeto de página maestra. Cuando
desea actualizar el diseño que sólo tendrá que hacer esto una vez en la página original.

Aquíes un ejemplo:
1. Crearun nuevo sitio web, Web Builder agregar automáticamente la primera página que se llama
"índice".
2. Insertaruna nueva página con el Administrador del Portal y cambiarle el nombre a 'master_page'.

3. Ahora vamos a añadir una barra de navegación a la master_page. Insertar> Navegación->


navigationbar.

4. Cambie de nuevo a la página de índice (haga clic en la ficha índice) e insertar un


objeto 'objetos maestros.

118
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

5. Haga doble clic en el objeto que acaba de insertar para seleccionar una página. Siguiente haga
clic en el botón Seleccionar para mostrar la ventana Seleccionar página y elija master_page de
la lista. Haga clic en Aceptar para volver a la página.

Vas aobserve que la barra de navegación de su master_page ahora se ha convertido en


una parte de la página de índice. Si nos remontamos a la página principal y que ha
modificado algo en esa página, automáticamente se actualiza en la página de índice
también. Por supuesto, esta función no se limita sólo a las barras de navegación; usted
puede agregar cualquier elemento de la página maestra.

Notas:
1. Coloque todos los objetos de la página maestra alineado con el borde izquierdo y la parte
superior, por lo que no tiene márgenes.
2. Si utiliza el master_page sólo con fines de página maestra y no la página como independiente,
puede permitir 'No publicar esta página "en Propiedades de la página, por lo que la página no
se publicará cuando todo el sitio web se publica.
3. En contraste con IFRAMES, cuando se utiliza el objeto Master Page, todos los objetos de esa
página se fusionan en la página actual como si son realmente una parte de la página. Sin
embargo, debe editarlos en la página maestra.
4. Maestroobjetos de la página no clonar las propiedades de una página! Se clonan Sólo los
objetos de la página principal.
5. Dado que los objetos se clonan "TAL CUAL", asegúrese de que los ID de objetos en la página
principal son
único. Ustedpuede cambiar la ID en el inspector de propiedades. Es una buena práctica
para darles un prefijo, como 'master_'. Esto evitará identificaciones duplicadas en una
página.
6. Formas no funcionan en una página maestra.
7. Capase puede utilizar en una página maestra. Sin embargo, usted no puede utilizar los enlaces
internos de esa capa.
8. LaLa página principal debe estar en la misma carpeta que las páginas de las que lo están
utilizando. Esto es especialmente importante si usted está utilizando los enlaces internos, ya
que los enlaces serán relativa a la página principal de modo que si la página está en otra
carpeta, entonces no son válidas.
9. Laopción 'estado estilo Uso vuelo estacionario para indicar la página actual' en herramientas
de navegación no funciona en combinación con objetos maestros, ya que habrá sólo un
conjunto de imágenes de ese objeto. Las mismas imágenes se utilizarán en todas las páginas.

Incrustarobjetos maestros como una capa


Cuando se selecciona los "objetos maestros Incrustar como una capa", todos los elementos que
componen el maestro
página son, de hecho, en una capa. Esta capa se bloqueará el acceso a los elementos de las páginas
"debajo de" ella (en el orden z). Si la capa de objetos maestros es en la parte superior de un botón o
enlace, los visitantes a su sitio no será capaz de hacer clic en el botón o enlace, incluso si es visible.

Cuando los "objetos maestros Incrustar como una capa" casilla está desactivada, los elementos que
componen la página maestra se insertan como objetos individuales en la página (no en una capa). A
continuación, puede acceder a los objetos "por debajo" de los objetos maestros (siempre y cuando

119
WYSIWYG Web Builder 10 Pablo
sean visibles). SoftwareSoluciones

120
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Contenido Place Holder


LaTexto Tramite objeto Holder se debe insertar en una página fotograma maestro. Define donde se
insertará el contenido de la página.

Desbordamiento
Especifica lo que sucederá si el contenido de la página es mayor que el tamaño del soporte de placer
contenido.
 Expandir
Latenedor del lugar se expandirá automáticamente de modo que el contenido se ajusta sin la
necesidad de
barras de desplazamiento.Serán reposicionados Todos los objetos abajo y en la parte derecha
del marcador de posición.
 Oculto
El contenido que encaja dentro del soporte del lugar se ocultará.
 Voluta
Se añadirán las barras de desplazamiento si el contenido no entra dentro del marcador de
posición.

Alinear
Especifica cómo se alineará el contenido de la página dentro del marcador de posición si es inferior al del
del lugar titular contenido.

Marcos Máster
A Frame Master es un concepto de diseño, donde su sitio web tiene un marco de constante y sólo la
parte interna de las páginas cambios. En WYSIWYG Web Builder es suficiente con diseñar el marco de
una vez y volver a colocarla en todas las demás páginas. Puede ampliar aun automáticamente la
disposición si el contenido es más grande que el titular de contenidos lugar! Si el contenido es menor
que el lugar helper también hay una opción para centrarla en la zona.

Un marco de página principal puede ser cualquier página en su sitio web. Para indicar la posición en la
que el contenido del marco principal debe ir, debe insertar un marcador de posición de objeto de
contenido a la página de marco maestro.
Durante previsualización / publicar este lugar titular contenido será reemplazar con el contenido real de
la página.

Aindica que una página debe utilizar el marco principal, debe configurarlo en la configuración Varios
de los propiedades de la página.

Lamarco maestro y contenido de la página se fusionarán en una página cuando es vista previa /
publicada.
Tenga en cuenta que el pie de página se ha reposicionado automáticamente porque el contenido de la
página era más grande que la
contenido del tenedor del lugar! Todos los objetos de abajo y en el lado derecho del lugar contenido
portaobjetos se pueden reposicionar automáticamente. También puede seleccionar la visualización
de las barras de desplazamiento en su lugar.

120
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Marco principal con contenido Place Holder PáginaContenido

120
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Resultado enventana del navegador, la trama principal se fusionó con el contenido de la página.

Notas:
 Laobjetos en un marco maestro se clonan "TAL CUAL", así que asegúrate de los identificadores
de objetos en la página principal son únicas.
 Ustedpuede cambiar la ID en el inspector de propiedades. Es una buena práctica para darles
un prefijo, como master_, esto evitará identificaciones duplicadas en una página.
 No se recomienda el uso de un marco maestro como parte de otro marco principal para
evitar bucles infinitos.
 Laopción 'estado estilo Uso vuelo estacionario para indicar la página actual' en herramientas
de navegación no funciona en combinación con objetos maestros, ya que habrá sólo un
conjunto de imágenes de ese objeto. Las mismas imágenes se utilizarán en todas las páginas.
 Lacuaderna maestra debe estar en la misma carpeta que las páginas de las que lo están
utilizando. Esto es especialmente importante si usted está utilizando los enlaces internos, ya
que los enlaces serán con respecto al bastidor principal por lo que si la página está en otra
carpeta, entonces no son válidas.

121
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Objeto incrustado OLE


Ustedpuede utilizar la vinculación e incrustación de intercambiar información entre documentos
creados en diferentes programas.

Incorporación de mediosla inserción de información, como texto o un gráfico, en otro documento en


otro programa. La información incrustada, o un objeto, se convierte en parte del nuevo documento.
Para editar un objeto incrustado, haga doble clic en él; Se abre el programa en el que se creó el objeto.
Cuando termine de editar el objeto y regrese a su documento, el documento refleja todos los cambios
que ha hecho; pero, el objeto original se mantiene sin cambios.

Medios de inserción de la información, tales como datos de hoja de cálculo, que conserva una
conexión con la información almacenada en otro archivo de enlace. Utilice vínculos cuando desee que
la información que se actualiza dinámicamente a medida que los datos de los cambios en los archivos
fuente. Para enlazar información seleccionada, utilice Copiar y Pegado especial. Algunos programas no
permiten vincular.

Utilice la incrustación cuando se quiere editar la información por separado del archivo de origen o si
cree que el archivo de origen no estará disponible.

Cuando se publica una página, que incluye un objeto OLE incrustado, Web Builder genera cada objeto
como un archivo .gif. Así que los datos se convierte en estática una vez que se publique.

Consejo:Si hace doble clic en el objeto mientras mantiene pulsada la tecla CTRL, se abrirá la incrustado
aplicación en una nueva
ventana.

122
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Notas
«Notas»es un tiempo de diseño único objeto. Es una manera fácil de notas 'drop' / comentarios en la
página. Por ejemplo, para incluir notas para otro diseñador u otros recordatorios.

Los soportes de objetosel mismo formato que el objeto de texto. Sin embargo, el contenido del objeto
no se incluirá en la página publicada. Puede mostrar rápidamente / ocultar todas las notas con la
opción 'Notas' en el menú de la vista.

123
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Pie de página
LaPie de página se puede utilizar para añadir un pie de ancho a su sitio web. Básicamente este objeto
es una capa simplificada, lo que la mayoría ajustes son idénticos y otros objetos pueden ser
arrastrados en la parte superior de este objeto para que entonces formaba parte del pie de página. El
pie de página se mostrará siempre en la parte inferior de la página.

Modo
Especifica el modo de pie de página.
 Defecto
Lapie de página se colocará en la parte inferior de la página. Tenga en cuenta que esto
no es necesariamente la parte inferior de la ventana del navegador.
 Fijo
Lapie de página se fijará en la parte inferior de la ventana del navegador.
 Pantalla Completa
Lapie de página se oculta de forma predeterminada y se hacen visibles cuando el usuario
mueve el ratón sobre
el pie de página. Así que el pie de página es sólo visible cuando sea necesario. Este modo
también es compatible con animaciones para deslizarse o fade el pie de página en la vista. La
animación se puede sincronizar con la animación de cabecera lo tanto la cabecera y pie de
página mostrar / ocultar al mismo tiempo.
 Flotante
Laposición del pie de página dependerá de otros objetos flotantes (como las capas), pero lo
hará siempre
estar en el fondo.

Pila Nivel
Especifica el nivel de pila del pie de página con relación al contenido de la página. El pie de página o
bien puede ser "Delante del contenido" o "Detrás del contenido".

Styling, la alineación y otras opciones son las mismas que para el objeto de capa.

124
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Cabecera de página
LaCabecera de la página se puede utilizar para agregar un encabezado de ancho total de su sitio web.
Fundamentalmenteeste objeto es una capa simplificada, por lo que la mayoría de los ajustes son
idénticos y otros objetos pueden ser arrastrados en la parte superior de este objeto para que entonces
formaba parte de la cabecera.
Laencabezado siempre se mostrará en la parte superior de la página.

Modo
Especifica el modo de encabezado.
 Defecto
Lacabecera se coloca en la parte superior de la página. Tenga en cuenta que esto no es
necesariamente la parte superior de la
ventana del navegador.
 Fijo
Lacabecera se fija en la parte superior de la ventana del navegador.
 Pantalla Completa
Lacabecera se oculta de forma predeterminada y se hacen visibles cuando el usuario mueve el
ratón sobre la cabecera. Así que la cabecera es sólo visible cuando sea necesario. Este modo
también soporta animaciones a
diapositivao desaparecer la cabecera a la vista.
 Flotante
Laposición de la cabecera dependerá de otros objetos flotantes (como las capas), pero lo hará
siempre
estar en la cima.

Pila Nivel
Especifica el nivel de pila de la cabecera con respecto al contenido de la página. La cabecera o bien
puede ser "Delante del contenido" o "Detrás del contenido".

Styling, la alineación y otras opciones son las mismas que para el objeto de capa ..

125
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Ajuste del texto


Una de las características más solicitadas es la posibilidad de ajustar el texto alrededor de las imágenes
y otros objetos. Desafortunadamente esta funcionalidad es muy complicado de implementar debido a
que el tamaño y la posición del texto es por lo general no es exactamente el mismo en distintos
navegadores.
Laresultados con estándar HTML / CSS son impredecibles y no lo-que-ve-es-lo-que-hay. Aunque las
versiones futuras de HTML / CSS apoyarán más flexibilidad, así que decidimos que simula la funcionalidad
de envolver por el momento y cuando los navegadores están preparados para ello vamos a convertir a la
norma oficial.

"EnvolverTexto 'es un contenedor de objetos (como una capa y forma) con el texto. Por defecto, el
texto va a llenar toda la caja, pero al arrastrar y soltar objetos en el interior del objeto "Ajuste del
texto ', entonces el texto se ajustará alrededor de él!

Todo el texto tendrá el mismo formato que se puede configurar en las propiedades de estilo. Debido a
que no todos los tipos de letra se comportan de la misma manera en los diferentes navegadores,
hemos añadido una opción de 'font afinar' que le permite ajustar con precisión el tamaño de la fuente
para los mejores resultados. Asegúrese de probar esto en todos los navegadores!

126
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

QuickTime
Utilice este objeto para añadir archivos multimedia QuickTime a tu página.

Expediente
Introduzca el nombre del archivo de la película.
Medios QuickTime tiene un .mov o .qt extensión.

Ocultar
Seleccione esta opción si no desea mostrar la película, pero quiere usarlo sólo como sonido de fondo.

Controlador
Seleccione esta opción para mostrar una barra de control que los visitantes del sitio pueden usar para
iniciar o detener la película.

Autocomienzo
Areproducir la película automáticamente cuando el visitante del sitio se abre la página, seleccione Auto
Start.

Bucle
Para volver a reproducirla película cuando termina, seleccione Loop.

Mantenga películaen la caché del usuario


Seleccione esta opción para guardar la película en la memoria caché en el sistema del visitante del sitio.
Si el visitante abandona la página y vuelve, la película no tiene que ser descargado de nuevo porque
que ya está en la caché del sistema.

127
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Real Player
Utilice este objeto para añadir archivos multimedia RealPlayer a su página.

Nombre Del Archivo


Introduzca el nombre del archivo de audio o vídeo.
Un archivo multimedia RealPlayer puede tener una de estas extensiones: .ra, .rm, .rv, RMVB, .rmj, .rms,
.ram, .rmm,
.rhacha, .rvx, .rp, .rtx, .rt, .rmx.

Controles
Conjuntoslos componentes visibles del RealPlayer plug-in.

ImageWindow Muestrala ventana de la imagen.


Todos Muestra el panel de control básico de
RealPlayer. Panel de control Muestraun panel de control
compacto RealPlayer. PlayButton Muestraun botón de reproducción /
pausa.
PlayOnlyButton Muestraun botón de reproducción.
PauseButton Muestra un botón de pausa.
StopButton Muestraun botón de parada.
FFCtrl Muestra un botón de avance rápido.
RWCtrl Muestraun botón de rebobinado.
MuteCtrl Muestra un botón de silencio.
MuteVolume Muestraun botón de silencio y control de volumen.
VolumeSlider Muestra un regulador de volumen.
PositionSlider Muestra un control
deslizante de posición clip. TACCtrl
Diensanchaun campo de información
de clip.
HomeCtrl Muestrael logotipo de Real ™.
InfoVolumePanel Muestrainformación de presentación junto con el regulador de volumen y botón
de silencio. Infopanel Muestra el panel de información de presentación.
StatusBar Muestrael panel de estado, que muestra mensajes
informativos. StatusField Muestra el área de texto del mensaje de la barra de estado.
PositionField Muestrael campo de posición, que muestra el lugar actual del clip en
la línea de tiempo de presentación y la longitud total del clip.

Consola
Conjuntosun nombre de consola que se utiliza para vincular varias instancias RealPlayer. Todos
RealPlayer plug-ins con el mismo nombre de la consola trabajan juntos. Por ejemplo, si usted tiene
botones de parada múltiple de reproducción y en la misma página, el nombre de la consola les
permitiría controlar el mismo clip de RealAudio. Establezca esta propiedad para cada instancia de la
reproducción o el botón que desea vincular Detener. El nombre de la consola master enlaces a todas
las instancias. El nombre de la consola enlaces únicos a ninguna otra instancia.

Autostart
Establece sio no el RealPlayer plug-in se reproducirá automáticamente una vez que la fuente de
datos está disponible.

Bucle
Para volver a reproducirla película cuando termina, seleccione Loop.

La vinculación de varios controles


Laconsolapropiedaddefine un nombre que unifica RealPlayer objetos para que varios controles funcionan
juntos.
Por ejemplo, se pueden crear tres objetos RealPlayer separadas para definir una ventana de imagen,
un botón de reproducción, y un botón de parada.

128
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Mediante el uso de tres objetos diferentes, se puede ajustar el tamaño de cada control por separado.
Aatar controles juntos, definir el mismo nombre de la consola dentro de RealPlayer, o utilizar uno de
estos nombres predefinidos:

129
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

_mastervincula el control de todos los demás controles incrustados en la página.


_uniquevincula el control de ninguna otra controles incrustados en la página.

Ustedpuede tener varios nombres de consola para presentaciones separadas.


Para una página que muestra dos clips de vídeo, por ejemplo, se puede definir el video1 nombres de
consola y video2.
Todos los controles vinculados por video1 interoperar, al igual que todos los controles enlazados por
video2. Sin embargo, un regulador de volumen video1, por ejemplo, no afectará el volumen de un clip
video2.

Ejemplo1:
Ustedque desee agregar un archivo de vídeo sin ningún tipo de control a su página
1. Agregue una instancia del objeto a su página
2. Especificarel nombre del archivo
3. Setla propiedad controles para ImageWindow
4. Setla propiedad de la consola para video1

Ejemplo2:
Ustedque desee agregar un archivo de vídeo con todos los controles visibles
1. Agregue dos instancias del objeto a su página
2. Especificarel nombre del archivo para ambos objetos
3. Setla propiedad controles de objeto 1 a ImageWindow
4. Setla propiedad controles de objeto 2 a Todos
5. Setlas propiedades de la consola de ambos objetos a Video1

Ejemplo3:
Ustedque desee agregar un archivo de vídeo con sólo un playButton
1. Agregue dos instancias del objeto a su página
2. Especificarel nombre del archivo para ambos objetos
3. Setla propiedad controles de objeto 1 a ImageWindow
4. Setla propiedad controles de objeto 2 a PlayButton
5. Setlas propiedades de la consola de ambos objetos a Video1

Para obtener más información sobre el objeto RealPlayer visite la página web oficial:
http://service.real.com/help/library/guides/production8/htmfiles/control.htm

130
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Media Player
Utilice este objeto para agregar archivos multimedia a su página. Esta es la forma más común de
agregar archivos multimedia a su página web. El Media Player ha incorporado soporte para HTML5 de
audio / video!

Nota importante: En la actualidad, hay un formato de audio / video que funciona en todos los
navegadores. Asegúrese de configurar formatos alternativos para apoyar todos los navegadores.

Tipo
Especifica el tipo de reproductor de medios.

 Defecto
Si se selecciona esta opción, el navegador utilizará el reproductor multimedia por defecto como
se configura en las preferencias del usuario.

Nota: Para reproducir un archivo multimedia al visitante de su sitio web debe tener
instalado el complemento del navegador apropiado en!

 HTML5 Audio
Utilice esta opción si desea utilizar audio HTML5.

 HTML5Vídeo
Utilice esta opción si desea utilizar vídeo HTML5

Nombre Del Archivo


Especifica el nombre de archivo o URL del audio / vídeo para reproducir.

Autostart
Areproducir la película automáticamente cuando el visitante del sitio se abre la página, seleccione Auto
Start.

Ocultar
Si es compatible, esta opción ocultará el jugador, por lo que sólo se reproduce el sonido.

Bucle
Para volver a reproducirla película cuando termina, seleccione Loop.

Showcontroles
Si está presente, se mostrarán los controles, como por ejemplo un botón de reproducción. El aspecto
real del jugador depende del tipo de navegador! Cada navegador hará que el jugador diferente !!!

Precargamedios de comunicación
Si está presente, el video se cargará en la página de carga, y listo para funcionar. Se ignora si la
"reproducción automática" está presente.

Desactivar audio(Se aplicade vídeo HTML5


solamente). Especifica si el audio debe ser
silenciado.

Alternativaformatos(Se aplica a sólo vídeo HTML5).


Desafortunadamenteno todos los navegadores lo hacen compatible con los mismos formatos de audio
/ vídeo. Actualmente no hay ningún formato que funciona en todos los navegadores.
Así que para asegurarse de que el jugador va a funcionar en todos los navegadores se pueden especificar
formatos alternativos.

Cartel
Especifica el nombre de archivo o URL de una imagen que representa el vídeo.

130
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

YouTube
LaObjeto YouTube ofrece una forma fácil de añadir vídeos de YouTube a sus páginas.

URL
Especifica la URL del vídeo de YouTube.
LaURL debe tener este aspecto:http://www.youtube.com/v/x-40jgwazk0

Tamaño
Aquíusted puede elegir entre unos tamaños predefinidos. Sin embargo, esto todavía le permite cambiar
manualmente el tamaño del objeto de YouTube en el espacio de trabajo.
Esteopción es sólo una herramienta de ayuda para configurar rápidamente un tamaño específico.

Mostrar vídeos relacionados


Especifica si se muestra una lista de vídeos relacionados.

Juega en AltaModo de calidad


Active esta opción para jugar inicialmente el video en modo de alta calidad cuando esté disponible.

Autocomienzo
Areproducir la película automáticamente cuando el visitante del sitio se abre la página, seleccione Auto
Start.

Bucle
Para volver a reproducirla película cuando termina, seleccione Loop.

Permitirbotón de pantalla completa.


Habilitar el botón "pantalla completa" en la barra de control del reproductor.

Ocultar vídeocontrol después el video empieza a jugar.


Labarra de progreso de vídeo y los controles del reproductor se deslice fuera de la vista de un par de
segundos después de que el vídeo comienza a reproducirse. Ellos sólo reaparecerán si el usuario
mueve su ratón sobre el reproductor de vídeo o presiona una tecla en su teclado.

ApoyoFlash y vídeo HTML5


Si se activa esta opción WYSIWYG Web Builder utilizará solución marco en línea de YouTube en lugar
del flash sólo jugador. Habilitar esta opción es que desea orientar navegador que no soporta Flash
(como el iPhone o el iPad).

Versión
Lapropiedad de versión te permite especificar la versión del reproductor de YouTube. Algunas de las
nuevas características (como
las nuevas opciones de tema) requieren la versión 3, pero si desea cargar una versión anterior del
reproductor que pueden establecerse como 1 o 2 (o dejarlo vacío).

La mesa de luz
LaOpción la mesa de luz hace posible la visualización de un vídeo de YouTube en una caja de luz
(utilizando FancyBox) después
al hacer clic en una imagen de vista previa. Puede especificar la imagen de vista previa, título de luz y
anchura / altura de la caja de luz.

131
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CSS Menu
Este menúes muy similar a la barra de navegación con la principal diferencia de que este menú no
utiliza imágenes o JavaScript! Aún así el menú CSS le permite crear menús de lujo mirando (brillante,
cristal, pendientes, etc.) utilizando gradientes CSS3 y sombras.

Seleccione Agregar para insertar un nuevo botón.


Seleccione Editar para modificar las propiedades de un
botón existente. Para eliminar un elemento de la CSS
Menu seleccione Quitar.
Ustedpuede cambiar el orden de elemento utilizando en Subir y Bajar.

Sincronizar con SitioGerente


Cuando esta opción está activada, Web Builder sincroniza automáticamente los elementos del menú
CSS con el contenido del Administrador del Portal. Así que si se agrega una nueva página, a
continuación, un botón se añade automáticamente al menú Texto. O si cambia el nombre de una
página también se actualizará el texto del botón.

Objetivo
Especifica la ventana de destino de los enlaces cuando 'Sincronizar con el Administrador del sitio "está
habilitada.

Nivel
Este valorespecifica que el nivel de Administrador del Portal se utiliza para crear los artículos.
Primero Nivel Creabotones que unirán a los hijos de la raíz.
Nivel de Padres Crea botones que vincularán a todas las páginas en el nivel superior de la página
actual en el administrador del sitio.
Nivel actual Crea botones que unirán a la página actual y todas las demás páginas que comparten el
misma página padre.
Nivel Niño Crear botones que unirán a los hijos de la página actual.

Espaciamiento
Este ajusteespecifica el espacio entre 2 artículos.

132
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Ir Menu
Ustedpuede utilizar el componente Menú Ir a crear fácilmente un menú de navegación desplegable,
con cada elemento del menú correspondiente a una sola dirección URL o una página en su sitio web.
Cuando el usuario pulsa el botón Ir al enlace de selección se activará.

Seleccione Agregar para


agregar un nuevo tema.
Texto:Texto deel elemento de
la lista
URL:La URL(Dirección de Internet), al que el artículo será
vincular.
Para obtener más información acerca de los hipervínculos por favor lea los "Enlaces" de
capítulos de este documento.

Seleccione Editar para modificar las propiedades de un


elemento de salir. Para eliminar un botón en el menú Ir
seleccione Quitar.
Ustedpuede cambiar el orden de elemento utilizando en Subir y Bajar.

InicialText
o
Esel texto inicial que se mostrará en el menú desplegable.

Texto del
botón
El textodel botón

Hacerbotón no
utilizar
Seleccione esta casilla de verificación para ocultar el botón de marcha. Es este caso una selección del
menú desplegable activará el enlace.

133
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Mega Menu
MegaLos menús son menús desplegables que contienen varias columnas de enlaces. Permiten el
acceso a todos los enlaces a la vez, en lugar de obligar al usuario a desplazarse o utilizar sub-menús.
Una de las características únicas de este Mega Menu es que se puede establecer diferentes
desplegables estilos para cada botón. El menú desplegable puede tener filas, columnas, sólo un
sencillo menú o ningún menú en absoluto!

LaMega Menu se ha creado usando jQuery y es compatible con los mismos temas ThemeRoller
como los otros componentes basados en jQuery. Usted puede establecer el tema para el conjunto
de Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con el Theme
Manager incorporado.

General
Aquíusted puede agregar, editar y eliminar elementos de menú para el Mega Menu.
Haga clic en"Añadir" para añadir un nuevo botón a la barra de menú principal. Las propiedades del
botón le dan acceso al submenú.

Texto del botón


Especifica el texto del botón.

Diseño de menú
Especifica cómo se visualizan los elementos del submenú.
 Columnassólo
Todas las categorías se mostrarán en las columnas (1 fila).
 Sólo Filas
Todas las categorías se mostrarán en las filas (1 columna)
 2 columnas
Categorías se mostrarán en 2 columnas.
 3 columnas
Categorías se mostrarán en 3 columnas.
 4 columnas
Categorías se mostrarán en 2 columnas
 Simplemenú
Muestraun sencillo menú desplegable
 Sólo botón
Labotón no tiene ningún submenú.

Los enlaces están organizados en categorías. Para agregar una nueva categoría, haga clic en el botón
"Añadir categoría 'y especifique un nombre. Para añadir un enlace a una categoría, seleccione primero
el nombre de la categoría y haga clic en "Añadir Enlace '.
134
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Ustedpuede reorganizar los vínculos con el botón "Subir" y "Bajar" o mediante el uso de arrastrar y soltar.

Estilo
Labarra de menú utiliza el tema página global que se puede establecer en Página Propiedades-> Estilo.
Otro objeto específicoajustes se pueden modificar en la sección 'Estilo' de las propiedades del
menú de Mega. El 'Nombre de fuente' y propiedades "Tamaño de fuente" se puede utilizar la
anulación de la fuente por defecto del tema. La propiedad 'Animación' permite la animación de
fundido para ocultar y mostrar los submenús.

Botón Relleno
Especifica el relleno para los botones. El texto del botón en combinación con el relleno determina la
tamañodel botón.

Botón espaciado
Especifica el espacio entre el botón.

Icono
Especifica el icono que aparece en el botón.

Icono Offset
Especifica la posición del icono del botón.
Si el valor es positivo, el icono se alineará en el lado izquierdo del botón.
Si el valor es negativo, el icono se alineará en el lado derecho del botón.

SubMenú Relleno
Especifica el relleno para el submenú.

Icono
Especifica el icono que aparece en la parte izquierda de los enlaces ..

135
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Barra de menús
El Menúbar en Web Builder se basa en JSCookMenu de Heng Yuan (Http:
//www.cs.ucla.edu/~heng/JSCookMenu). Este es un muy potente menú script basado en JavaScript que
puede simular complejos menús encontrar en las aplicaciones GUI. Web Builder ofrece un constructor
de menú, así que usted puede agregar fácilmente los elementos de menú, asignar los vínculos y
establecer el estilo para el menú mediante la ficha estilo.

Seleccione Agregar para insertar un nuevo elemento a


la barra de menús. Seleccione Editar para modificar las
propiedades de un elemento existente. Para eliminar
un elemento de la barra de menú seleccione Quitar.
LaInserte de Splitbotón inserta un divisor / separador en el menú.

Disposición: LaBarra de menú puede ser vertical u horizontal.

Estilo: Paracambiar la apariencia de la barra de menú seleccionar un tema predefinido de seleccione


Predeterminado para editar los colores de la barra de menú y formato de texto.

Tenga en cuenta el efecto del tema seleccionado sólo será visible en el navegador. Así que tendrás una
vista previa o publicar la página en primer lugar.

Sincronizar con SitioGerente


Cuando esta opción está activada, Web Builder sincroniza automáticamente los artículos con el
contenido del administrador del sitio. Así que si por ejemplo se agrega una nueva página, a
continuación, un elemento se agrega automáticamente a la barra de menús. O si cambia el nombre de
una página también se actualizará el texto del artículo.

Subir
Movimientoel elemento seleccionado hacia arriba entre sus hermanos.
Bajar
Movimientoel elemento seleccionado hacia abajo entre sus hermanos.
Mover a la izquierda
Hacer el elemento seleccionado un hermano de su padre.
Mover a la derecha
Hacer el elemento seleccionado al hijo de su hermano precedente.

Consejo:
Ustedpuede reorganizar los elementos en el menú se puede utilizar arrastrar y soltar para mover los
elementos alrededor.

136
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Añadir tus propios temas:


Labarra de menú también se puede personalizar usando hojas de estilo en cascada (CSS) e imágenes
personalizadas.
La WebCarpeta del programa Constructor contiene varios temas predefinidos en la subcarpeta 'barra
de menú ", pero también se puede añadir sus propios temas. Basta con crear una nueva subcarpeta en
la carpeta de barra de menús y copiar las nuevas definiciones de estilo en ese país. Echa un vistazo a
los temas existentes de averiguar cómo funciona;). Web Builder detecta automáticamente nuevos
temas cuando se añaden.

El uso Theme Studiopara crear temas:


Una de las grandes características del objeto barra de menú es el soporte para temas menubar Theme
Studio.

Esteherramienta hace que sea relativa fácil crear temas menubar avanzadas.
Ustedpuede descargar Theme Studio aquí:http://tapestry-jsmenu.sourceforge.net/theme-builder/

Cómo agregar un tema creado con Theme Studio para WYSIWYG Web
Builder?
1. En la barra de herramientas Theme Studio, haga clic en 'Build'
2. Seleccione Formato Build 'Formato original'
3. Especificarun archivo de destino, por ejemplo 'ThemeDemo.zip'
4. Abrir la cremallerael tema a Mis documentos \ WYSIWYG Web Builder \ system \ menú de \.

Nota:
Laarchivos de la carpeta 'ejemplo' no son
necesarios!

Laestructura se verá algo como esto:


Mis documentos \ WYSIWYG Web Builder \ system \ barra de menú \
ThemeDemo
Mis documentos \ WYSIWYG Web Builder \ system \ barra de menú \ ThemeDemo \
fondo-1.png Mis documentos \ WYSIWYG Web Builder \ system \ barra de menú \
ThemeDemo \ fondo-2.png Mis documentos \ WYSIWYG Web Builder \ system \ barra de
menú \ ThemeDemo \ fondo -3.png Mis documentos \ WYSIWYG Web Builder \ system \
barra de menú \ ThemeDemo \ fondo-4.png Mis documentos \ WYSIWYG Web Builder \
system \ barra de menú \ ThemeDemo \ theme.css
Mis documentos \ WYSIWYG Web Builder \ system \ barra de menú \
ThemeDemo \ theme.js

VerTambién este tutorial


en línea:
http://www.wysiwygwebbuilder.com/menubar.html

137
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Barra de navegación
Adición de una barra de navegación en WYSIWYG Web Builder es muy fácil.
Sóloañadir un par de botones, asignar los vínculos y establecer el estilo de los botones.

Seleccione Agregar para insertar un nuevo botón.


Seleccione Editar para modificar las propiedades de un
botón existente. Para quitar un botón de la barra de
navegación seleccione Quitar.
Ustedpuede cambiar el orden de los botones utilizando en Subir y Bajar.

Sincronizar con SitioGerente


Cuando esta opción está activada, Web Builder sincroniza automáticamente los botones con el contenido
de
Administrador del Portal.
Así que si por ejemplo se agrega una nueva página, a continuación, un botón se añade
automáticamente a la barra de navegación. O si cambia el nombre de una página también se
actualizará el texto del botón.

Objetivo
Especifica la ventana de destino de los enlaces cuando 'Sincronizar con el Administrador del sitio "está
habilitada.

Nivel
Este valorespecifica que el nivel de Administrador del Portal se utiliza para crear los botones.
PrimeroNivel
Creabotones que unirán a los hijos de la raíz.
PadreNivel
Creabotones que vincularán a todas las páginas en el nivel superior de la página actual en el
administrador del sitio.
CorrienteNivel
Creabotones que unirán a la página actual y todas las demás páginas que comparten la misma página
padre.
NiñoNivel
Crearbotones que unirán a los hijos de la página actual.

Cambiar el tamañobotones horizontalmente


Active esta opción para poder cambiar el tamaño de los botones de la barra de navegación horizontal.
En lugar de la anchura original botón, a continuación se estiró el botón.

Tipo diseño
LaBarra de navegación puede ser vertical u horizontal.

Del diseño del espacio


Esteopción especifica el espacio entre 2 botones.

138
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Navegaciónbar
Estilo

Estil
o
Seleccionaruno de los estilos de botón disponibles desde el menú
desplegable.
Ustedpuede elegir sus propias imágenes por el uso de la opción "Imagen Use Custom '(el primer
elemento de la caída
lista abajo).De manera predeterminada Web Builder incluye algunos estilos de ejemplo, pero usted
puede agregar fácilmente sus propios estilos: Copie sus propios estilos (que son básicamente sólo
imágenes) a la carpeta navbar: Mis documentos \ WYSIWYG Web Builder \ system \ navbar \

Con la opción Colorear usted puede cambiar el color de un botón para casi
cualquier color! Esto le da cientos de variaciones adicionales de colores para elegir!

Animació
n
Ustedpuede elegir entre varias animaciones para el puntero del ratón sobre los efectos de dar a su
menú es una web moderno
2.1 ver y sentir.

Usoflotar estado estilo para indicar la página


actual.
Adar a los visitantes de su sitio web una indicación de que la página que está viendo actualmente usted
puede dar a esa página el mismo estilo que el estado estacionario.
Tenga en cuenta que esta opción no funciona cuando la barra de navegación se encuentra en una
página maestra, porque en ese caso
las imágenes de la barra de navegación serán los mismos para
todas las páginas!

Usotema de la
página
Utilice la página del tema de estilo de objeto. Más detalles acerca de temas: Theme
Manager.
139
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Menú del panel


Un menú del panel es inicialmente invisible, pero puede deslizarse desde la parte derecha o izquierda
de la página haciendo clic en el botón de menú. Muchos sitios web modernos utilizan este tipo de
menú.

Laajustes de menú generales son los mismos que para otros tipos de menú, como la barra de navegación.

Texto
Especificael texto de la tecla de menú.

Icono
Imagenque se pueden mostrar en el botón. La posición de icono se puede utilizar para controlar la
posición de icono relativamente al texto.

Visualización
Especificala relación entre el panel de la página de contenidos. "Push" empuja la página una y
"superposición"
visualizaciónla capa sobre el contenido.

Posición
Especifica siel menú del panel se mostrará en la parte izquierda o derecha de la página.

Dismissible
Especifica siel panel se puede cerrar haciendo clic fuera hasta la página.

Ancho
Especificala anchura del panel. Por defecto, este valor es en píxeles pero también se puede utilizar el
porcentaje, por ejemplo 50%.

Laanimación puede ser o bien ninguno o diapositivas. La animación de diapositivas también es


compatible con muchas opciones de flexibilización.

140
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Sitetree

LaSitetree puede visualizar un resumen de su página web (un mapa del sitio) para que los
visitantes puedan encontrar rápidamente lo que están buscando.

Consejo:
No hay que confundir este objeto con la opción Mapa del sitio en el menú de herramientas, que está
puramente destinado a los motores de búsqueda!

LaSitetree mostrará todas las páginas de su sitio web, con excepción de las páginas que usted ha
marcado "No Sincronizar esta página en objetos de navegación. '.
Este objetocuenta con 3 estilos de visualización, cada uno ofrece una visión completamente diferente de su sitio:

Alfabético
Muestrauna lista alfabética de todas las páginas de su sitio web.

Categoría
Muestratodas las páginas de su sitio web agrupados por categoría.
Para que este estilo para que funcione correctamente, primero debe asignar una o más categorías a
una página. Usted puede hacer esto en la página de propiedades (meta tags) o en las propiedades
generales de la propia sitetree.

Treeview
Muestratodas las páginas de su sitio web en una vista de árbol sobre la base de la estructura del
sitio en el administrador del sitio.

En las propiedades generales de este objeto se puede actualizar rápidamente el nombre de


visualización (es lo mismo que la propiedad nombre del menú de Propiedades de la página), la
descripción de página (Descripción etiqueta meta) y las categorías.
Ustedpuede asignar una o más categorías a una página (separados por una coma).

141
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Tab Menu

LaTab Menu es otra manera de poner en práctica su navegación web.


Lamayor diferencia entre la barra de navegación y el menú de la ficha (además de su apariencia) es
que un elemento de menú de la ficha tiene 3 estados:
1. Normal
Estado de reposo
2. Flotar
Ratónsobre o Roll over estado
3. Activar
Laelemento seleccionado es la página actual.

Seleccione Agregar para insertar un nuevo elemento de ficha. En el campo Nombre, escriba el texto
que desea que aparezca en el elemento de ficha. El texto alternativo: este texto, por lo general una
breve descripción, aparece en lugar del objeto en el navegador cuando las imágenes no son
compatibles o se han desactivado.

En el Enlace campo Para puede seleccionar el tipo de hipervínculo y donde enlazar. Ver también el
capítulo sobre "Enlaces".

Seleccione Editar para modificar las propiedades de un elemento existente. Para eliminar un elemento
del Menú Tab seleccionar
Quitar. Puede cambiar el orden de los elementos utilizando en Subir y Bajar.

Sincronizar con SitioGerente


Cuando esta opción está activada, Web Builder sincroniza automáticamente los artículos con el
contenido del administrador del sitio. Así que si por ejemplo se agrega una nueva página, a
continuación, un botón se añade automáticamente al menú Tab o si cambia el nombre de una página
el texto del elemento de ficha también se actualizará.

Nivel
Este valorespecifica que el nivel de Administrador del Portal se utiliza para crear los artículos.

PrimeroNivel
Creaelementos que vinculen a los hijos de la raíz.
PadreNivel
Creaartículos que vincularán a todas las páginas en el nivel superior de la página actual en el
administrador del sitio.
CorrienteNivel
Creaartículos que unirán a la página actual y todas las demás páginas que comparten la misma página
padre.
NiñoNivel
Crearelementos que vinculen a los hijos de la página actual.

Pestaña Menú Estilo


WYSIWYGWeb Builder incluye varios temas que puede elegir para la aparición del menú de la ficha. El
tema por defecto es sólo texto y no utiliza ninguna imagen. Los otros temas se definen en la carpeta
142
WYSIWYG Web Builder 10 Pablo
tabmenu (Mis documentos \ WYSIWYG Web Builder \ system \ tabmenu \) y se hacen generalmente
SoftwareSoluciones
de 2 imágenes. Si lo desea, puede modificar estos tema o crear sus propios temas.

143
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Texto Menú
LaMenú de texto es una versión de sólo texto de la barra de navegación.
Menús de textopuede acelerar la navegación a través de su sitio web, ya que no hay imágenes
necesitan ser cargados primero antes de que el usuario puede navegar a otra página.

Seleccione Agregar para insertar un nuevo enlace de texto.


Seleccione Editar para modificar las propiedades de un
enlace de texto existente. Para eliminar un elemento en el
menú Texto seleccione Quitar.
Ustedpuede cambiar el orden de elemento utilizando en Subir y Bajar.

Sincronizar con SitioGerente


Cuando esta opción está activada, Web Builder sincroniza automáticamente el elemento del menú Texto
el contenido del administrador del sitio.
Así que si por ejemplo se agrega una nueva página, a continuación, un botón se añade
automáticamente al menú Texto. o si cambia el nombre de una página también se actualizará
el texto del botón.

Objetivo
Especifica la ventana de destino de los enlaces cuando 'Sincronizar con el Administrador del sitio "está
habilitada.

Nivel
Este valorespecifica que el nivel de Administrador del Portal se utiliza para crear los
artículos. Primer Nivel Creabotones que unirán a los hijos de la raíz.
Nivel de Padres Crea botones que vincularán a todas las páginas en el nivel superior de la página actual.
Nivel actual Crea botones que unirán a la página actual y todas las demás páginas que
comparten la misma página padre.
Nivel Niño Crear botones que unirán a los hijos de la página actual.

Espaciamiento
Este ajusteespecifica el espacio entre 2 artículos.

Estilo
Fuente
Tipo de fuente es la familia de fuentes de texto, como Comic Sans, Times New Roman y Courier New.

Color de fondo
Especifica el color del fondo. Si se establece en el fondo 'Automatic' página web será utilizada.

Enlace Estilo
Todos los hipervínculos en su página web por defecto utilizan los colores de los enlaces HTML
predeterminados (enlace: azul, visitaron: púrpura, vivo: rojo). Mediante la definición de estilos de
hipervínculo (CCS) puede ajustar los colores y el formato de un hipervínculo. Una vez que haya
definido un estilo puede adjuntarlo al menú de texto seleccionándolo de la lista desplegable Estilo de
Enlace. Haga clic en el botón Editar Estilos de añadir o modificar la hoja de estilo hipervínculo.

Alineación
Especifica la alineación del texto del menú.

Los delimitadores
Especifique especialpersonajes para poner antes y después del texto del vínculo. Caracteres comunes son
{, [y (.

144
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Bandera
Un banner es una imagen que muestra el título de una página web. Una pancarta ayuda a los
visitantes a comprender lo que la página se trata.

General
La bandera del texto
Textoque se mostrará en el banner.

Título de Uso página


Esteopción utiliza automáticamente el título de la página web como el texto de la pancarta. Desactive
esta opción si desea introducir texto personalizado.

Tipo de fuente
Tipo de fuente es la familia de fuentes de texto, como Comic Sans, Times New Roman y Courier New.

Estilo de texto
Estilo de la fuente, como negrita, cursiva o regular.

Tamaño del texto


Tamaño del texto.

Color del texto


Color del texto.

Banner Tamaño
Latamaño de la bandera. Seleccione uno de los tamaños predefinidos o "Ajustar a disposición
rectángulo 'si quieres un banner de tamaño personalizado.

Alineación horizontal
Alineación horizontal del texto.

Alineación vertical
Verticalalineación del texto.

Estilo
Efecto de fondo
Ustedpuede seleccionar entre varias Efectos de relleno:
1. Color sólido
2. Gradiente
3. Baldosao imagen estirada.

Fronteratamaño
Especifica el grosor del borde alrededor de la bandera. Póngalo a 0 (cero) para ninguna frontera.

Color del borde


Especifica el color del borde alrededor de la bandera.

Estilo de borde
Especifica el estilo (sólido, Círculo, Disco, Cuadrado o Dash) del borde alrededor de la bandera.

145
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Efectos
Permitirsombra
Especifica si se debe activar el efecto de sombra para el texto.

Sombra OffsetX
Desplazamiento de la sombra Horizontal

Sombra OffsetY
Verticaldesplazamiento de la sombra

Sombra Opacidad
Conjuntosla transparencia de la sombra.

Color de la sombra
Especifica el color de la sombra

Sombra de Blur
Suavizabordes de la sombra.

Reflexión
Especifica la cantidad de reflejo del texto.

ReflexiónOffset
Especifica el desplazamiento de la reflexión desde el fondo del texto. Este valor puede ser negativo.

Texto Animación
El objeto Bannerpuede animar los caracteres individuales del texto utilizando una función de animaciones
CSS3. Este
marcasposible la creación de introducción fresco a su sitio web.
Ustedpuede establecer una animación diferente para mostrar y ocultar los personajes. Si establece
ambas animaciones entonces tanto la animación se reproducirá continuamente. Si sólo se especifica el
espectáculo de animación a continuación, la animación se reproducirá una sola vez en la página de
carga.

Nota:
No todas las animaciones pueden ser útiles para la animación de personajes. Por ejemplo animando el
border-color no tendrá ningún efecto sobre el texto o sólo se verá raro ...
Tambiénalgunas animaciones fueron diseñados para mostrar, mientras que otros fueron diseñados
para ocultar. Por lo general, el nombre de la animación indica esto. Por ejemplo 'puff-in "es para
mostrar y' puff-out" es para esconderse. Pero, por supuesto, usted puede diseñado sus propias
animaciones con el Administrador de animaciones ..

Publicar
Formato
Especifica el formato de salida de la bandera. Usted puede publicar la bandera como una imagen o
como texto estándar con estilo CSS3.

Tenga en cuenta sin embargo que los navegadores antiguos no soportan la sombra texto. También
tenga en cuenta que la refacción actualmente no está apoyada por CSS3, por lo que la bandera no se
verá exactamente lo mismo que cuando publique como una imagen.

146
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Galerí
a de
imáge
nes

Galería de imágenesutiliza fuentes dingbat y los convierte en formas vectoriales. Tiene todas las
características de las formas, sino que le permite insertar cualquier tipo de forma a su página!
Ustedpuede descargar miles de fuentes dingbats gratis desde Internet. Buscar 'fuentes dingbat libres
"para encontrar todo gran colección de nuevas formas. Después de descargar uno o más archivos que
se pueden copiar a la carpeta 'clipart' en la carpeta del sistema Web Builder:
Mis documentos \ WYSIWYG Web Builder \ system \
clipart \

Fuentes Simbolos tienen la extensión de archivo '.ttf'. También hay muchas herramientas
disponibles para crear sus propias colecciones dingbat. El nombre de archivo de la fuente Dingbats
se mostrará como el nombre de la categoría en la selección de imágenes prediseñadas.

Para más detalles acerca de las propiedades del objeto ClipArt ver
Formas.

147
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Curva
LaHerramienta Curve le permite dibujar líneas curvas.

Adibujar una línea curva:


1. Haga clic enla herramienta Curva en la caja de herramientas o haga clic en Insertar> Dibujo->
Curva.
2. Haga clic eny suelte el botón izquierdo del ratón donde desee iniciar la curva, mientras
arrastra la prensa ratón y pulse / suelte el botón del ratón para añadir puntos.
3. Aponer fin a la curva, haga doble clic en el botón izquierdo del ratón o pulse la tecla ESC.
Cuando se selecciona la curva, los nodos individuales pueden ser cambiados arrastrándolos a una nueva
posición.

Suplentetexto
Este texto,normalmente una breve descripción, aparece en lugar del objeto en el navegador cuando
las imágenes no son compatibles o se han desactivado.

Lucha contra Alias


Active esta opción para mejorar la calidad de los gráficos. Se puede disminuir el rendimiento de la
aplicación.

Rellene Efecto(Curva cerrada solamente)


Especifica el efecto de relleno del polígono: Sólido, Gradiente, Textura, Hatch o transparente.

Ancho del borde


Especifica el grosor de la línea.

Color del borde


Especifica el color de la línea.

Estilo de borde
Especifica el estilo de la línea (sólida, guiones, puntos, puntos y rayas o Dash Dot Sor).

Enlace
Para obtener másinformación acerca de la vinculación por favor lea la sección "Enlaces" del presente
documento.

Eventos
Para obtener más información acerca de eventos, por favor, lea las "Eventos" capítulo de este
documento.

Nota importante:La Curvaherramienta sólo está disponible en sistemas con GDI + instalado. Lea más

148
WYSIWYG Web Builder 10 Pablo
acerca de GDI + en 'GDI + Información "de este documento, el capítulo. SoftwareSoluciones

149
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CurvoTexto

Con el objeto de texto curvado puede dibujar texto a lo largo de una curva

definida por el usuario. En primer lugar, tendrá que dibujar una línea curva:
1. Haga clic enel texto curvado en la caja de herramientas o haga clic en Insertar> Dibujo-> Texto
curvado.
2. Haga clic eny suelte el botón izquierdo del ratón donde desee iniciar la curva, mientras arrastra
el
ratónprensa y pulse / suelte el botón del ratón para añadir
puntos. Para finalizar la curva, haga doble clic en el botón izquierdo del
ratón o pulse la tecla ESC. Luego duplicar el texto curvado para editar
otras propiedades.

Para obtener más información sobre cómo agregar, editar o eliminar nodos ver 'Editar puntos "en el

menú Organizar. Todas las propiedades del objeto de texto curvado son los mismos que el objeto

Shape.

150
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Línea
LaHerramienta Línea de WYSIWYG Web Builder te da mucho control sobre su apariencia de la línea
horizontal estándar HTML. La línea puede ser dibujada con cualquier ángulo, el color, el estilo y puede
incluso tener flechas en el inicio o el final de la línea!

Adibujar una línea:


1. Haga clic enLa herramienta de línea en la caja de herramientas o haga clic en Insertar> Dibujo->
Línea.
2. Haga clic endonde desea que comience la línea, y mantenga pulsado el botón izquierdo del ratón
mientras dibuja. A
finla línea, suelte el botón del ratón.

Tamaño
Especifica el grosor de la línea.

Color
Especifica el color de la línea.

Estilo
Especifica el estilo de la línea (sólida, guiones, puntos, puntos y rayas o Dash Dot Sor).

FlechaComienzo
Especifica el tipo de flecha del inicio de la línea (Ninguno, Flecha, Círculo, Cuadrado, Diamante, Sigilo o
Abrir Arrow).

FlechaIniciar Tamaño
Especifica el tamaño de la flecha.

Flecha End
Especifica el tipo de flecha de la final de la línea (Ninguno, Flecha, Círculo, Cuadrado, Diamante, Sigilo o
Abrir Arrow).

Flecha Fin Tamaño


Especifica el tamaño de la flecha.

Suplentetexto
Este texto,normalmente una breve descripción, aparece en lugar del objeto en el navegador cuando
las imágenes no son compatibles o se han desactivado. En algunos navegadores aparece como una
información sobre herramientas cuando se mueve el puntero del ratón sobre la imagen.

Lucha contra Alias


Active esta opción para mejorar la calidad de los gráficos. Se puede disminuir el rendimiento de la
aplicación.

151
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Tipo de conector
Especifica el tipo de conector. Elbow y el conector de la curva se utilizan comúnmente en los diagramas
de flujo.
 Línea
Dibuja una línea recta.
 Codo
Dibuja una línea de codo.
 Curva
Dibuja una curva forrada.

Orientación Conector
Especifica la orientación del conector. Horizontal, Vertical o Auto.

Enlace
Para obtener más información acerca de la vinculación por favor lea los "Enlaces" de los capítulos de este
documento.

Eventos
Para obtener más información acerca de eventos, por favor, lea las "Eventos" capítulo de este
documento.

Nota importante:LaHerramienta Línea sólo está disponible en sistemas con GDI + instalado. Lea más
acerca de GDI + en 'GDI + Información "de este documento, el capítulo.

150
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Polígono
LaHerramienta Polígono permite dibujar polígonos con las fronteras y los diversos métodos de llenado.

Adibujar un polígono:
1. Haga clic enla herramienta Polígono en la caja de herramientas o haga clic en Insertar> Dibujo->
Polígono.
2. Haga clic eny suelte el botón izquierdo del ratón donde desea que empiece el polígono,
mientras arrastra la prensa ratón y pulse / suelte el botón del ratón para añadir puntos.
3. Aterminar y cerrar el polígono, haga doble clic en el botón izquierdo del ratón o pulsar la tecla
ESC.
Cuando se selecciona el polígono, los nodos individuales pueden ser cambiados arrastrándolos a una
nueva posición.

El texto alternativo
Este texto,normalmente una breve descripción, aparece en lugar del objeto en el navegador cuando las
imágenes no son compatibles o se han desactivado.

Lucha contra Alias


Active esta opción para mejorar la calidad de los gráficos. Se puede disminuir el rendimiento de la
aplicación.

Rellene Efecto
Especifica el efecto de relleno del polígono: Sólido, Gradiente, Textura, Hatch o transparente.

Ancho del borde


Especifica el grosor de la línea.

Color del borde


Especifica el color de la línea.

Estilo de borde
Especifica el estilo de la línea (sólida, guiones, puntos, puntos y rayas o Dash Dot Sor).

Enlace
Para obtener más información acerca de la vinculación por favor lea los "Enlaces" de los capítulos de este
documento.

Eventos
Para obtener más información acerca de eventos, por favor, lea las "Eventos" capítulo de este
documento.

151
WYSIWYG Web Builder 10 Pablo
Nota importante:LaHerramienta Polígono sólo está disponible en sistemas con GDI + instalado. Lea
SoftwareSoluciones
más acerca de GDI + en 'GDI + Información "de este documento, el capítulo.

151
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Garabato
LaHerramienta Scribble le permite esbozar las líneas y las formas curvas de una manera libre.

Adibujar una línea a mano alzada:


1. Haga clic enla herramienta Scribble en la caja de herramientas o haga clic en Insertar> Dibujo->
Garabato.
2. Haga clic endonde desea que comience la línea, y mantenga pulsado el botón izquierdo del
ratón mientras dibuja. La línea se dibuja inmediatamente y sigue los movimientos del ratón.
Al soltar el botón del ratón se dibuja una línea recta desde el punto en el que soltó el botón a
la posición actual del ratón.
3. Aterminar la línea, haga doble clic en el botón izquierdo del ratón o pulse la tecla ESC.
Cuando se selecciona la línea, los nodos individuales pueden ser cambiados arrastrándolos a una nueva
posición.

Suplentetexto
Este texto,normalmente una breve descripción, aparece en lugar del objeto en el navegador cuando las
imágenes no son compatibles o se han desactivado.

Lucha contra Alias


Active esta opción para mejorar la calidad de los gráficos. Se puede disminuir el rendimiento de la
aplicación.

Ancho del borde


Especifica el grosor de la línea.

Color del borde


Especifica el color de la línea.

Estilo de borde
Especifica el estilo de la línea (sólida, guiones, puntos, puntos y rayas o Dash Dot Dot).

Enlace
Debido a que el dibujo se publica como imagen también puede asignar un enlace a ella.
Para obtener más información acerca de la vinculación por favor lea los "Enlaces" de los capítulos de este
documento.

Eventos
Debido a que el dibujo se publica como imagen también puede asignar eventos a ella.
Para obtener más información acerca de eventos, por favor, lea las "Eventos" capítulo de este
documento.

Nota importante:LaHerramienta Scribble sólo está disponible en sistemas con GDI + instalado. Lea

152
WYSIWYG Web Builder 10 Pablo
más acerca de GDI + en 'GDI + Información "de este documento, el capítulo. SoftwareSoluciones

153
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Forma
LaForma objeto puede ser utilizado para 'dibujar' una forma en su página web. Al publicar una
página con las formas, Web Builder genera cada figura como un archivo .gif.

Tipo:Seleccione el tipo de forma que desee sea exhibición en su página web.


 Rectángulo
 Ronda Rect
 Elipse
 Diamante
 Hexágono
 Octágono
 Flechas
 Signos
 Estrellas
 Hablar de burbujas
 y muchos más.

Algunas formas tienen algunas variantes que se pueden elegir.

Aañadir un borde a la Forma seleccione 'Activar Border' y especifique el ancho del borde y el

color. Puede seleccionar entre varios Efectos de relleno:


1. Color sólido
2. Gradiente
3. Baldosao imagen estirada.
4. Transparente
5. Patrón (modo suavizado solamente)
6. VistaGlass (modo suavizado solamente)

Lucha contra Alias


Active esta opción para mejorar la calidad de los gráficos. Se puede disminuir el rendimiento
de la aplicación.

Sombra interior
Esteopción añadirá un efecto de bisel (sombra interior) a la forma. Un valor de Blur "0" desactivará el
efecto.

Nota:
Si alias contra está desactivado no es posible ajustar la transparencia de la
sombra.
Enlace
Para obtener más información acerca de la vinculación por favor lea el capítulo "Enlace de este
documento.

154
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Eventos
Para obtener más información acerca de eventos, por favor lea el capítulo "Eventos" de este documento.

HTML5
Formas normalmenteserá publicado en forma de imágenes, para las formas más grandes esto puede
tener algún impacto en el
el rendimiento de su sitio web. Sin embargo los navegadores modernos (Firefox 5, IE9, Safari,
Chrome) ahora han incorporado soporte para formatos de alternativas como <canvas> y <svg>.
WYSIWYGWeb Builder ahora le permite convertir sus formas en elementos HTML5 nativo!

Seleccione 'Publicar como <canvas> para generar la forma de uso de HTML5 elemento <canvas>.
Básicamente esto genera un conjunto complejo de llamadas JavaScript para dibujar la forma en el
navegador.

Seleccione 'Publicar como <svg> para generar la forma mediante <svg> elemento de HTML5. Esto hará
instrucciones SVG salida para el navegador para dibujar la forma como una imagen basada en vectores.

Seleccione 'Publicar como CSS3' a la salida de la forma con estilo CSS3. Esta es la salida estándar <div>
con un estilo CSS3 (frontera y el color de fondo). Nota en este modo sólo rectángulo, elipse y esquinas
redondeadas formas son posibles, porque CSS no admite ningún otro tipo de formas!

Conocidolimitaciones:
- Esuna técnica muy nueva y no todas las características de forma WYSIWYG Web Builder está
disponible todavía, pero vamos a seguir para mejorar el software cuando los navegadores se pondrá
al día;)
- No se admiten todos los efectos de degradado.
- Textoen forma no es compatible.
- Puntos y borde punteado no son compatibles con <canvas>.
- Sombra y otras imágenes efectos no son compatibles.

155
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Sombra OffsetX
Desplazamiento de la sombra horizontal.

Sombra OffsetY
Verticaldesplazamiento de la sombra.

Sombra Opacidad
Conjuntosla transparencia de la sombra.

ShadowColor
Especifica el color de la sombra.

Opacidad
Cambiar la transparencia (0 - 100%) de la forma.

Añadir texto a una forma


Una nueva característica de la versión 5.0 es la posibilidad de añadir texto con formato a una forma!
Ahora usted puede crear logotipos fresco, banners o incluso texto girar!
Textopuede ser alineado a cualquier borde de la forma. El espacio disponible para el texto dentro de la
forma puede variar dependiendo del tipo de forma que ha seleccionado.

Nota:
Textono ser visible si el objeto es transparente!

Rotación
Agirar una forma:
1. Seleccione la herramienta Girar de la caja de herramientas o haga clic en Editar-> Rotar.
2. Haga clic enpara seleccionar el objeto, se ciernen sobre una de sus asas hasta que aparezca el
puntero de rotación.
3. Mantenga pulsado el botón del ratón y arrastre en la dirección en la que desea rotar el objeto
y luego suelte. Use la tecla Mayús para intervalos de rotación de 15 °.

Notas:
 Rotación de formas grandes puede llevar mucho tiempo.
 Formas giratorias pueden reducir la calidad de visualización del objeto.

Efectos
Sólocomo las imágenes también se puede aplicar la mayoría de los efectos a las formas, del arte del texto
y de imágenes prediseñadas. Para más detalles ver
Imágenes.

156
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Blog
Lavocablo «blog» es la abreviatura de web log. Un blog es un diario que se publica en la web para
otros a leer. El objeto Blog proporciona una manera fácil de implementar un blog en su sitio web sin
requisitos especiales en el servidor web.

General
ComentarioTexto, cada entrada del blog tendrá un enlace en la parte inferior para permitir a los lectores
a enviar comentarios. La
defectotexto es 'Enviar Comentarios', pero se puede cambiar esto a lo que
quieras. Si deja este campo en blanco, no se mostrará ningún enlace.
Comentario Email,especifica la dirección de correo electrónico donde los comentarios se envían a.

Aañadir una nueva entrada a su blog, haga clic en el botón Agregar. Darle entrada de blog un título a
continuación, escriba el mensaje de tu blog en el área de texto.
Opcionalmente se puede insertar una imagen y un enlace a una página web relacionada.

Estilo
LaLa página de estilo le permite modificar el estilo del Blog, cada elemento individual, como comentario,
fecha,
Sujetoy el fondo puede tener su propio color y la fuente.
El Divisorla imagen se utiliza para las entradas de blog separados horizontalmente.

RSS Alimentación
Opcionalmente se puede habilitar para generar un feed RSS de este blog. Las Propiedades RSS Feed son
idénticos a
las del objeto RSS.

157
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Carrusel
LaCarrusel de objetos (también conocido como paneles corredizos en horizontal) muestra imágenes o
cualquier otro objeto desplazándose por el contenido de derecha a izquierda usando una animación de
deslizamiento suave (con varios efectos de aceleración opcionales). Los usuarios pueden intervenir a
cualquier panel específico sobre la demanda utilizando los iconos de paginación o navegar por el
carrusel de forma secuencial utilizando los siguientes botones de la espalda /. También puede pensar
en el carrusel como una presentación múltiple de diapositivas capa. Es un método muy eficaz para
aumentar la usabilidad del sitio web y realizar el usuario. Usted probablemente ha visto este efecto en
muchos sitios web populares, como Apple o Blackberry.

La primera vez que inserte el carrusel a su página, verá un área en blanco con dos botones y un control
de la paginación. Los botones se pueden utilizar para ir al panel anterior o siguiente. El control de la
paginación muestra un "punto" para cada página en el carrusel. Puede saltar directamente a una
página específica haciendo clic en el punto. Los colores y el tamaño del control de paginación es
configurable y, por supuesto, usted puede seleccionar sus imágenes ganados durante los siguientes
botones / espalda también.
Avanzadolos usuarios pueden incluso utilizar eventos para crear botones personalizados fuera del
carrusel!

Aañadir nuevo contenido el la página actual, basta con arrastrar y soltar objetos dentro del área del
carrusel. Para añadir objetos a otra página, primero ir a la página (ya sea mediante el uso de los
controles de paginación o siguiente / atrás). Otra característica interesante del carrusel es el soporte
para dispositivos móviles. En el iPhone / iPad / Android puedes usar gestos de diapositivas para cambiar
de página!

General
Páginas
Esta voluntadestablecer el número de páginas para el Carrusel.

Tiempo de pausa
Especificarel número de milisegundos para hacer una pausa antes de mostrar el panel siguiente en la
secuencia.

Animaciónduración
Especifica la duración de la animación de diapositivas en milisegundos.

Aliviar
Ustedpuede elegir entre más de 30 funciones de aceleración para controlar el proceso de animación.
Esta opción se puede utilizar para (por ejemplo) crear efectos de rebote o elásticas.

Permitirbotones de navegación
Especifica si se muestran los botones de navegación.
158
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Anteriorbotón
Especifica la imagen que se utilizará para el botón "Anterior". Si deja este campo vacío se utilizará una
imagen predeterminada.

159
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón Siguiente
Especifica la imagen que se utilizará para el botón 'Siguiente'. Si deja este campo vacío se utilizará una
imagen predeterminada.

Margen
Especifica el margen entre el borde del carrusel y los botones.

Permitirpaginación
Especifica si se muestran los controles de paginación. Los controles de paginación se mostrarán en la
parte inferior del carrusel. El usuario puede hacer clic en los iconos para ir rápidamente al panel
específico.

Color
Especifica el color de los iconos de paginación.

Fronteracolor
Especifica el color del borde de los iconos de paginación.

Tamaño
Especifica el tamaño de los iconos de paginación.

Acolchado
Especifica el relleno alrededor de los iconos de paginación.

Estilo
En esta sección se puede modificar la apariencia del objeto. Para más detalles sobre el estilo objeto, por
favor
leer Style.

Cómopara controlar las diapositivas a través de eventos?


Ustedpuede utilizar la Presentación de imágenes Siguiente y Presentación acciones anteriores en eventos
para crear la navegación externa.

Es tambiénposible saltar directamente a una página específica:


1. Agregue el objeto del carrusel a la página.
2. Tome nota de la ID. El valor por defecto es 'Carousel1' '.
3. Añadir una imagen, figura u otro objeto con el apoyo de eventos a la página.
4. Abiertolas propiedades y seleccionar la pestaña "Eventos".
5. Haga clic en'Añadir' para insertar un nuevo evento.
6. Seleccione 'Evento': OnClick y establecer la "Acción" para la función JavaScript.

Amostrar el diálogo de entrar en esta JavaScript:


$ ('# Carrusel') carrusel ('Goto, 1.');

dondeCarousel1 es el ID del carrusel. Goto, 1


salta a la primera diapositiva
Goto, 2 salta a la segunda diapositiva.
etc ...

Amostrar la siguiente diapositiva también puede utilizar este JavaScript:


$ ('# Carrusel') carrusel ("siguiente".);

Amostrar el uso diapositiva anterior:


$ ('# Carrusel') carrusel ('prev.');

160
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Mapa de imagen
Ustedpuede crear una (del lado del cliente) mapa de imagen que divide una imagen en diferentes
áreas que cada enlace a una página web diferente. Creación de un mapa de imagen es útil para las
imágenes como un piso, mapa del campus o mapa del mundo que desea contener enlaces a diferentes
páginas. Puede definir cada área seleccionable (punto de acceso) en el mapa utilizando tres valores de
forma: rectángulo, círculo o polígono (forma irregular). Para añadir las imágenes usan el objeto de
mapa de imagen. Arrastre el objeto a la página y un diálogo de archivo popup para seleccionar la
imagen. Web Builder soporta jpg, gif, bmp y png (XP) archivos.

Nombre Del Archivo:entrarla ruta y el nombre de la imagen / foto o seleccione Examinar para buscar
una imagen en la unidad local.

Notas:
1. Estepropiedad especifica la ubicación de la imagen local, cuando se publica la página de la
imagen se copiará automáticamente a la ubicación especificada en Herramientas->
Opciones-> editores> Imágenes Sub carpeta.
2. UstedTambién puede especificar las direcciones URL absolutas
como este https: //
Www.paypalobjects.com/en_US/i/logo/paypal_logo.gif
3. Ahacer una (copia de seguridad) copia de las imágenes utilizadas en su página de permitir
Herramientas-> Opciones-> Folders-
> Haceruna copia de las imágenes en esta carpeta cuando se guardan los documentos. Esto
copiará todas las imágenes en la carpeta especificada, por lo que se almacenan en un solo
lugar. También evita tener nombres de las imágenes duplicadas en su sitio web.

Suplentetexto:este texto, por lo general una breve descripción, aparece en lugar del objeto en el
navegador cuando las imágenes no son compatibles o se han desactivado. En algunos navegadores
aparece como una información sobre herramientas cuando se mueve el puntero del ratón sobre la
imagen.

Título:En los navegadores modernos este título aparece como una información sobre herramientas
cuando se mueve el puntero del ratón sobre la imagen.

Usotamaño original:Seleccione esta opción si desea que aparezca la imagen en su tamaño original.

Fita disposición rectángulo:Seleccione esta opción si desea especificar manualmente el tamaño de la


imagen.

Fronteraespesor:Especificael grosor del borde alrededor de la imagen. Póngalo a 0 (cero) para


ninguna frontera.

161
WYSIWYG Web Builder 10 Pablo
Color del borde:Especificael color del borde alrededor de la imagen. SoftwareSoluciones

162
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Adición de puntos de acceso


Hay dosformas de agregar puntos de acceso a un mapa de imagen:
1. Introducción manual de las coordenadas en la pestaña hotspot de las propiedades del mapa de
imagen
2. Visualmentemodificando las coordenadas utilizando el ratón

Introducción manual de las coordenadas


Abiertolos de la imagen Características mapa y haga clic en la ficha Hotspots para insertar las
coordenadas de un punto de acceso.
Ustedpuede insertar tres tipos de puntos de acceso:
1. Círculo,aquí se entra las coordenadas X e Y del centro y el radio del círculo.
2. Rectángulo,Aquí se introduce el x (izquierda) y y (arriba) coordina y la anchura y la altura del
rectángulo.
3. Polígono (forma irregular), aquí se introduce cada punto (coordenadas x, y) en el polígono.

Modificar visualmente las coordenadas utilizando el ratón


Una manera más eficiente para modificar las coordenadas de los puntos de acceso es arrastrando
visualmente.
1. Haz clic derechoel mapa de imagen para visualizar el menú contextual
2. Seleccione el tipo de punto de acceso que desea insertar (Agrega Círculo Hotspot, Añadir
Rectángulo Hotspot o Añadir Polígono Hotspot)
3. Aparecerá una ventana emergente en la que puede establecer las coordenadas iniciales, la
URL y el texto alternativo de la zona. De manera predeterminada, Web Builder insertará la
forma en el centro del mapa de imagen.
4. Despuésusted ha hecho clic en Aceptar, la forma se insertará al mapa de imagen, ahora
puede seleccionarlo y arrastrarlo alrededor o cambiar su tamaño utilizando las asas de
tamaño.
5. Aeditar o eliminar el punto de acceso, haga clic derecho en el área para mostrar el menú
contextual y seleccione Editar
Hotspoto Eliminar Hotspot.

160
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Galería de fotos
LaGalería de fotos de objetos es que da una herramienta para crear una galería de fotos con sólo unos
pocos clics del ratón.

Añadir
Añadir una o más imágenes a la galería de fotos.

Quitar
Quitarla imagen (s) seleccionado de la galería de fotos.

Eliminar todo
Quitartodas las imágenes de la galería de fotos seleccionadas.

Subir
Movimientoel seleccionado imagen un lugar.

Bajar
Movimientoel seleccionado imagen un lugar hacia abajo.

Título en miniatura
Introduzca el texto que se mostrará bajo la imagen en miniatura. Para habilitar títulos asegúrese de
que ha seleccionado la opción "Incluir título 'en la página del texto.

Tamaño miniatura
Especifica el tamaño de las imágenes en miniatura.
Seleccione 'Variable' para determinar dinámicamente el tamaño de las miniaturas.

Columnas
El númerode imágenes por fila.

Alineación horizontal
Alineaciónde las imágenes de mariposa. Esta opción no tiene efecto si la opción Mantener relación de
aspecto está apagado.

Alineación vertical
Alineaciónde las imágenes de mariposa. Esta opción no tiene efecto si la opción Mantener relación de
aspecto está apagado.

CélulaAcolchado
Introduce la cantidad de espacio que desea entre el contenido y los bordes interiores de las células, en
píxeles.

CélulaEspaciamiento
Introduce la cantidad de espacio que desea entre las celdas de la tabla en píxeles.

Mantener relación de aspecto


161
WYSIWYG Web Builder 10 Pablo
Seleccione esta opción si desea mantener la relación de aspecto de la imagenSoftwareSoluciones
en la miniatura.
Si no se selecciona esta opción, la miniatura se cambia de tamaño para adaptarse a toda rectángulo.

162
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

GaleríaModo
Especifica qué sucede si el usuario hace clic en una imagen.

 Abrir en la misma ventana del navegador


Laversión ampliada de la imagen se mostrará en la misma ventana del
navegador.
 Abrir en una nueva ventana del navegador
Laversión ampliada de la imagen se mostrará en una nueva ventana del
navegador.
 Abrir en una ventana emergente
Laversión ampliada de la imagen se mostrará en una ventana del navegador emergente.
La ventana emergente tendrá el tamaño de la imagen completa.
 Abrir en otra ventana
Laversión ampliada de la imagen se muestra en otra ventana. Por ejemplo, en un inline
marco. Ustedpuede especificar el nombre de la ventana de destino en el
campo Nombre.
 Abrir en una jQuery diálogo
Laimagen se mostrará en un diálogo jQuery. Utilice el botón Configuración para modificar la
apariencia de la ventana de diálogo.
 LuzBox Gallery
Si selecciona esta opción, al hacer clic en una de las imágenes se iniciará una caja de luz de
diapositivas. Usted
puede seleccionar una de incorporados presentaciones: Slimbox,
PrettyPhoto, FancyBox.

Apersonalizar el comportamiento de la luz, puede añadir opciones adicionales a través de


los 'Ajustes'. Por favor, consulte la documentación o sitio web de la caja de luz específica
para obtener más detalles sobre las posibles opciones de configuración.

Galerías adicionales / plugins mesa de luz se pueden descargar desde la sección de descargas
de la página web:http://www.wysiwygwebbuilder.com/download.html
 Use Links
Esteopción le permite asignar enlaces a las imágenes, en lugar de abrir la
imagen.

Generar imágenes en miniatura


De manera predeterminada Web Builder genera una ventana de vista previa que muestra las imágenes
originales.
Si el tamaño de estas imágenes es grande, puede tomar mucho tiempo antes de que la página se carga en
el navegador.
En lugarpuede habilitar Generar imágenes en miniatura que generará una versión más pequeña
de las imágenes para que la página se cargará más rápido.

Prefijo
Prefijoutilizado para nombrar a las imágenes en miniatura.

Incluir título
Incluya el título de la imagen bajo la miniatura. También puede cambiar el tipo de letra, el tamaño, el
estilo y
color del título.

Marco
Especifica que el estilo de marco para su uso. El tipo 'Default' agrega un simple fotograma en el que
puede especificar el
anchoy color. WYSIWYG Web Builder incluye algunos tipos de marcos predefinidos, pero usted puede
agregar fácilmente sus propios estilos. Copie sus propios estilos (gif, jpg o png) a la galería carpeta, en
la que cada estilo tiene su propia carpeta. Mis documentos \ WYSIWYG Web Builder \ system \ Gallery
\ YourStyle \
163
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Estilos de marcos están hechos de 8 imágenes (tenga en cuenta que también puede utilizar el jpg y png
extensiones!): Bottom.gif, bottomleft.gif, bottomright.gif, left.gif, right.gif, top.gif, topleft.gif ,
topright.gif

164
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Polaroidmodo
LaGalería de fotos también tiene modo de Polaroid 'que utiliza CSS3 y tiene unos efectos
espectaculares, como polaroids tamaño rotados o variables. Para activar el modo Polaroid seleccionar
(Polaroid) como el estilo de marco. Para el mejor efecto de establecer el ancho del marco de 20 o más y
usar "blanco" como el color. También la adición de un poco de sombra con darle un efecto más realista.

Polaroids Rotar rotarán aleatoriamente las imágenes para simular una pila de fotos. También puede
dar a cada foto un tamaño diferente.

Para usuarios avanzados que quieren tener más control sobre los ángulos y escala individual de la
imagen: Mantenga presionada la tecla Mayús mientras hace clic en las opciones de casilla de
verificación. Con ello se abre un cuadro de diálogo donde se puede especificar una serie de ángulos o
escalas. Si estos valores no tienen sentido para ti, entonces por favor no editarlos!

Polaroidsse pueden arrastrar


Añade la posibilidad de cambiar la posición de las Polaroids por la página. Al igual que Polaroids 'reales'
en una pila.

Animate polaroidsal cargar la página


Anima las Polaroids a una posición aleatoria en la página.

165
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Listo para usar Java Scripts


Estefunción puede ser útil si quieres alegrar sus páginas web con algunos Scripts fresco Java. Haga clic
en "Insertar JavaScript 'y seleccione una de las secuencias de comandos predefinidos. Algunos de los
guiones tienen propiedades para cambiar el comportamiento de la secuencia de comandos. Para ver el
efecto de la secuencia de comandos de Java, necesitará obtener una vista previa o publicar la página
web.

Notas:
 Estosscripts no son creados por Pablo Software Solutions. Siempre que sea posible se
muestran los derechos de autor correspondientes.
 Dependienteen la configuración del navegador de Internet algunos de estos scripts podrían
no funcionar en todos los sistemas.
 No se recomienda el uso de más de una secuencia de comandos de Java por página.

UstedPuede crear añadir sus propios scripts Java usando el editor de JavaScript que está disponible en la
sección de descargas de nuestra página web.

166
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Dese La Vueltaimagen
Las imágenes dinámicas cambian imágenes de intercambio en vuelco (evento onMouseOver) y vuelve a la
imagen original en el despliegue del objeto (evento onMouseOut).

Imagen inicial
Seleccione la imagen que se mostrará inicialmente.

Imagen Mouseover
Seleccione la imagen que se mostrará cuando el ratón está sobre el objeto.

Suplentetexto
Este texto,normalmente una breve descripción, aparece en lugar del objeto en el navegador cuando
las imágenes no son compatibles o se han desactivado. En algunos navegadores aparece como una
información sobre herramientas cuando se mueve el puntero del ratón sobre la imagen.

Título
En los navegadores modernos este título aparece como una información sobre herramientas cuando se
mueve el puntero del ratón sobre la imagen.

Animación
Especifica el efecto de animación para la imagen de sustitución:
 Ninguno
 Fundido
 DiapositivaIzquierda
 DiapositivaDerecho
 DiapositivaArriba
 Deslice hacia abajo
 Ampliar
 Escala,utiliza CSS3 para mostrar una versión más grande de la imagen. Utiliza
transformación, caja CSS3 sombra, un buen título de la imagen cuando sea posible
(experimental).
 CorredizoPuerta. Esto hace que se parece a la imagen está dividido en la mitad y uno va a la
izquierda y el otro va a la derecha.

Duración
Duración de la animación en milisegundos.

Aliviar
Laanimaciones de diapositivas también apoyan suavizado. Usted puede elegir entre más de 30
funciones de aceleración para controlar el proceso de animación. Esta opción se puede utilizar para
(por ejemplo) crear efectos de rebote o elásticas.

Enlace
Para obtener más información acerca de la vinculación por favor lea el capítulo "Enlaces".

167
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Dese La VueltaTexto

El objeto Texto RollOvermuestra un texto (título y descripción) bandera sobre una imagen en el mouse
encima.

Nombre Del Archivo


Seleccione la imagen que se mostrará inicialmente.

Título
Títulode imagen.

Descripción
Descripción de la imagen.

Enlacetexto
Labandera también puede contener un enlace. Aquí puede especificar el texto para este enlace. El URL
del enlace puede ser
configuradoen la pestaña 'Enlace'.

Posición
Especifica la posición del banner de texto.
 Superior
Labanner se mostrará en la parte superior de la imagen.
 Fondo
Labanner se mostrará en la parte inferior de la imagen.
 Completo
Labanner se mostrará el tamaño completo de la imagen.

Animación
Especifica el efecto de animación para el banner de texto de rollover:
 Ninguno
 Fundido
 DiapositivaIzquierda
 DiapositivaDerecho
 DiapositivaArriba
 Deslice hacia abajo

Duración
Duración de la animación en milisegundos.
168
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

RSS Feed
Con el objeto de RSS se puede añadir un feed RSS para su sitio web en sólo unos clics del ratón!

¿Qué significa RSS?


RSS son las siglas de Really Simple Syndication, y se utiliza para describir la tecnología utilizada en la
creación de feeds.

¿Qué es un feed (RSS)?


Feeds, también conocida como feeds RSS, fuentes XML, contenido sindicado, o vínculos Web, contiene
con frecuencia
actualizadoel contenido publicado por un sitio web.
Ellossuelen ser utilizado para noticias y blogs sitios web, pero también se utilizan para la distribución de
otros tipos de contenido digital, incluyendo imágenes, archivos de audio o vídeo.
En su forma más básica, RSS genera una lista de enlaces, a varios recursos en su sitio con una descripción
de la
contenido para cada enlace.

Lacontenido de un feed RSS pueden leerse de distintas maneras. Una variedad de herramientas, tanto
tarifa basada y gratuito, para leer los canales RSS están disponibles en Internet. Las últimas versiones
de navegadores (Internet Explorer 7.0, Safari, Firefox
2.1 y Opera) también tiene construir-en el soporte RSS feed.

LaExtensión de RSS le permite definir un canal RSS con un conjunto de titulares. Al publicar la página
web, que incluye la extensión de RSS, un archivo RSS (XML) se generará en la misma carpeta que la
página HTML. Un icono de RSS pequeña se mostrará en tu página web con un enlace a este archivo.
Algunos navegadores mostrarán un icono especial en la barra de herramientas, que permite a los
usuarios suscribirse fácilmente a su canal RSS.

General
Título
Lanombre del canal. Es cómo los usuarios se refieren a su servicio. Si usted tiene un sitio web HTML
que contiene la misma información que el archivo RSS, el título de su canal debe ser el mismo que el
título de su sitio web.

Descripción
Frase u oración que describa el canal.

URL
LaURL de la página web HTML correspondiente al canal. Por
ejemplo:http://www.wysiwygwebbuilder.com

Incluya publicaciónfecha de titulares.


Laextensión puede actualizar automáticamente la fecha de publicación de los titulares (en base a la
creación o
modificaciónfecha y hora). Para incluir la fecha de publicación en el feed RSS, active esta opción. Si deja
esta opción, no se incluirá la fecha de publicación.

Nombre Del Archivo


Lael nombre del archivo XML RSS generado. De forma predeterminada, este archivo se denomina
'rss.xml', pero se puede cambiar el nombre a algo que te gusta. Extensiones de archivo comunes para
los piensos son .xml y .rss

Logo
Especifica que el logotipo se mostrará en la página web.

169
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Titulares
Añadir
Añadir un nuevo titular.
LaSujeto y descripción se debe escribir para describir el contenido.
LaPodcastpropiedadproporciona una manera de adjuntar contenido multimedia a los canales RSS,
como un archivo MP3. El campo URL debe hacer referencia a la página web que contiene ese
contenido real. Esto puede ser un interno de enlace externo.

Editar
Edite el título seleccionado.

Quitar
Quitarel título seleccionado.

Opcional
Categoría, Especifiqueuna o más categorías que el canal pertenece. Ejemplo:
Periódico

Derechos de autor,Aviso de Copyright de los contenidos en el


canal. Ejemplo: Copyright 2008, Soluciones Pablo Software

Editor,Dirección de correo electrónico de la persona responsable de la


editorial Ejemplo contenido:yourname@yourwebsite.com (Su Nombre)

Webmaster, Dirección de correo electrónico para la persona responsable de los asuntos


técnicos relacionados con el Ejemplo canal:webmaster@yourwebsite.com (Web Master)

Idioma,El idioma del canal está escrito en. Esto permite que los agregadores de grupo todos los sitios
de holandés, por ejemplo, en una sola página.

Imagen,Especifica una imagen GIF, JPEG o PNG que se puede visualizar con el canal.

Tiempo de refresco, Especifica el número de minutos que indica el tiempo que un canal puede
almacenar en caché antes de actualizar desde la fuente.

170
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

NoticiasAlimente Ticker
LaNoticias RSS Ticker o rotadores Encabezado pantallas FUENTES RSS (locales o de otro sitio web), los
mensajes de Twitter, imágenes de Flickr, blogs Myspace u otras fuentes de noticias en su sitio web.
UstedTambién puede pensar en este objeto como una presentación de diapositivas para el texto con
muchas animaciones y visualización diferentes
tipos como estática, desplazador, presentación de diapositivas, paginas y teletipo.

Nota:
Debe publicarsu página en un servidor web de lo contrario la información no se mostrará debido a las
restricciones de seguridad del navegador.

General
Datosfuente
Laticker de noticias es compatible con muchos tipos de fuentes de datos. Utiliza jQuery para recuperar los
datos.

 Definido por el usuario


Esteopción le permite especificar los titulares manualmente.

 RSSAlimentación
Seleccione esta opción si la fuente de datos es un feed RSS. Esto puede ser un alimento en su
propio sitio web o un
externositio web. Introduzca la ubicación de la fuente RSS en el campo URL. Para alimentos
locales (como la creada con el objeto RSS feed), introduzca ./rss.xml
En los feeds de los sitios web externos debe introducir la URL completa:
http://www.wysiwygwebbuilder.com/rss.xml

Asuperar los problemas de seguridad debido a las restricciones de dominio cruzadas que
hemos incluido varias opciones de recuperación de datos:
Cargar datos mediante una petición HTTP GET
Utilice esta opción para feeds recuperados de su propio dominio. Esta opción utiliza AJAX
(Asynchronous JavaScript and XML) a buscar los datos y no requiere PHP. Sin embargo
peticiones AJAX no se pueden hacer a un sitio diferente al que aloja la página que se está
viendo.

Cargar datos a través de proxy (esta opción requiere el soporte de PHP en el servidor!)
Esteopción utiliza un script de proxy PHP para recuperar los datos. Esto básicamente trucos
navegador Web en
pensando que la alimentación proviene de su propio servidor. Un script PHP se tire el
contenido de la alimentación de las noticias a tu servidor mediante los file_get_contents
función de PHP () y luego transmitir los datos al ticker de noticias. Este guión se generará
automáticamente y subido por WYSIWYG Web Builder, por lo que no tiene que preocuparse
por eso.

Datos de carga a través de CURL (requiere PHP)


Algunos proveedores de alojamiento web pueden no permitir el uso de los file_get_contents
PHP () para
traerarchivos remotos debido a preocupaciones de seguridad. Si su anfitrión apoya CURL
entonces esto puede ser una buena alternativa. Consulte la documentación de su servidor
para obtener más detalles. Tenga en cuenta que aquí también el script PHP se generará
automáticamente y subido por WYSIWYG Web Builder.

 Gorjeo
Utiliza JSONpara obtener los últimos mensajes de una cuenta específica Twitter.

 Flickr
Muestraimágenes basadas en el Flickr criterios de búsqueda especificados. Introduce la
171
WYSIWYG Web Builder 10 Pablo
consulta de búsqueda de Flickr en el SoftwareSoluciones
FlickrCampo Parámetros. Por ejemplo: etiquetas = vegas y tagmode = ninguna, que la búsqueda
de las últimas imágenes etiquetados con 'vegas'

172
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

 Facebook
Esteopción utiliza Facebook Graph API para obtener actualizaciones de estado, fotos y enlaces
de su cuenta de Facebook. Para obtener los datos de la API Graphi necesita introducir su ID
de Facebook y un token de acceso. Puedes leer más acerca de compartir datos de Facebook
aquí: https://developers.facebook.com/docs/getting-started/graphapi/

Tipo de Visor
Latipo de visor especifica cómo se mostrarán las líneas de la cabeza:
 Defecto
Laartículos se mostrarán como una lista estática. Si la lista es más larga que el espacio
disponible, se añadirán las barras de desplazamiento.

 Scroll Continua
Lalos artículos serán desplazan como una noticia (vertical) de alimentación ticker. La rueda de
desplazamiento se detendrá en ratón
más.

 Exposición de diapositivas
Laartículos fluirán a la vista uno a la vez, hacer una pausa durante unos segundos y luego
deslice hacia arriba para mostrar
el siguiente artículo.
La'Pausa para' propiedad especifica la pausa entre los titulares en cuestión de segundos.

 Paginar
Paginate muestra un pequeño subconjunto de los artículos Obras cualquier momento, al
tiempo que permite al usuario mover
a través de él con los botones de navegación. La propiedad 'Artículo por página' especifica
cuántos elementos se mostrarán por página. Haga clic en el botón Estilo para cambiar la
apariencia de los botones de paginas.

 Ticker
Usosanimaciones-ticker como se desvanezcan y artículos de diapositivas en la vista. Este
efecto se utiliza con frecuencia en
nuevositios web.

Artículos Max
Especifica el número máximo de elementos que se recuperarán de la fuente de datos.

Orden de clasificación
Especifica el orden en que se mostrarán los artículos.

Velocidad
Especifica la velocidad de desplazamiento del texto para el modo de desplazamiento continuo.

Animación
Especifica el efecto de animación para el modo de presentación de diapositivas: Ninguno, Fade,
Diapositiva izquierda y hacia la derecha, deslice hacia arriba o deslizarse hacia abajo

Duración
Especifica la duración de la animación.

Enlace Target
Especifica el destino de los enlaces en el ticker de noticias. Por ejemplo:
_blank, Abreel enlace en una nueva ventana
_self, Abiertael vínculo en el cuadro actual
_parent, Abrir el enlace en el marco padre
_top, Carga el documento vinculado en el marco superior

170
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Slide Show
Ustedpuede utilizar la proyección de diapositivas objeto para mostrar diferentes imágenes seguidas en
el mismo lugar de la página web. Por ejemplo, usted podría rotar entre varias imágenes que se
anuncian nuevos productos o anuncios de visualización de otros sitios Web. Para añadir una imagen,
haga clic en el botón Agregar. También puede asignar un enlace a cada imagen. Haga clic en Editar
para cambiar las propiedades de una imagen o Quitar para eliminarlo de la lista.

Ustedespecificar el número de segundos para hacer una pausa antes de mostrar la siguiente imagen de la
secuencia.
Si se establece este valor en 0 (cero), las imágenes no se gire automáticamente, sino que se puede utilizar
Eventos
para visualizar la imagen anterior o siguiente. Esto significa que puede utilizar formas, imágenes, texto o
cualquier otro objeto que admite eventos de caminar a través de las imágenes! Hay dos acciones de
eventos especiales definidos para este propósito: diapositivas siguiente y presentación de diapositivas
anterior. Ver los "Eventos" capítulo para obtener más detalles.

Subir
Movimientoel seleccionado imagen un lugar.

Bajar
Movimientoel seleccionado imagen un lugar hacia abajo.

Tipo
Especifica el tipo de presentación de diapositivas
 Secuencia
Lalas imágenes se pueden rotar en secuencia.
 Aleatorio
Lalas imágenes se muestran en orden aleatorio.
 LuzBox Gallery
Si selecciona esta opción haciendo clic en la imagen comenzará caja de luz de diapositivas.
Puede seleccionar uno de incorporados presentaciones: Slimbox, PrettyPhoto, FancyBox.
Apersonalizar el comportamiento de la luz, puede añadir opciones adicionales a través de los
'Ajustes'. Por favor, consulte la documentación o sitio web de la caja de luz específica para
obtener más detalles sobre las posibles opciones de configuración. Galerías adicionales /
plugins mesa de luz se pueden descargar desde la sección de descargas de la página
web:http://www.wysiwygwebbuilder.com/download.html
 TransportadorCinturón
Esteopción crea una presentación de diapositivas de imágenes que desplaza las imágenes de
derecha a izquierda en un
"Transportadormoda cinturón ".

Efecto
Especifica el efecto que se utilizará para las transiciones de imagen. Hay más de 25 efectos de animación!

Aliviar
Laanimaciones de diapositivas también apoyan suavizado. Usted puede elegir entre más de 30 funciones
de aceleración para controlar
el proceso de animación. Esta opción se puede utilizar para (por ejemplo) crear efectos de rebote o
elásticas.

Estilo del borde


Especifica el estilo de la frontera: punteado, La, Sólido, Doble, Groove, Ridge, Recuadro o principio.

Tamaño del borde


Especifica el grosor del borde alrededor de la imagen. Póngalo a 0 (cero) para ninguna frontera.

Fronteracolor

171
WYSIWYG Web Builder 10 Pablo
Especifica el color del borde alrededor de la imagen. SoftwareSoluciones

Consejo:
Para insertar múltipleimágenes en una sola acción sostienen tecla SHIFT mientras pulsa Añadir.

172
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Site
Search

WYSIWYGWeb Builder tiene básica funcionalidad integrada 'buscador', por lo que los visitantes pueden
buscar palabras específicas dentro de su sitio web. La opción de búsqueda no tiene ningún requisitos
de servidor especiales porque usa javascript, por lo que es muy fácil de insertar este componente a su
página (s).

Nota:
Antesañada este objeto a su página, asegúrese de que ha habilitado "Generar índice de búsqueda
'en Menú-> Herramientas-> Buscar Índice de otro modo el índice de búsqueda no se creará y la
búsqueda no funcionará !.

Indirectatexto
Lapista (o 'cue') texto se visualiza en el interior del campo de búsqueda si no tiene la focus.When el
usuario mueve su enfoque hacia el campo, la etiqueta estará oculta.

Permitirauto completo
Lafunción de autocompletado que permitirá a los usuarios escribir el comienzo de un término de
búsqueda y se presentarán con todos los términos posibles que comienzan con esa cadena de
caracteres (sobresale como el motor de búsqueda de Google).

No hay resultados
Especifica el texto que se mostrará si la consulta de búsqueda no tiene resultados.

Palabras clave
El textopara la etiqueta de palabras clave en los resultados de búsqueda.

Descripción
El textopara la etiqueta de descripción en los resultados de búsqueda.

Avanzadoconsejo:
Para mostrarla etiqueta de palabras clave y la descripción en negrita, usted puede poner entre <b>
etiquetas:
<B> Palabras clave: </ b>.

Cercabotón
Latexto en el botón de cierre

LaNombre de la fuente y Font propiedades tamaño puede utilizarse para especificar los tipos de letra del
texto resultado.

Visualizacióndescripción
Especifica si se muestra la descripción de los resultados de búsqueda.

Visualizaciónpalabras clave
Especifica si se deben mostrar las palabras clave en los resultados de búsqueda.

Acolchado
Conjuntosla cantidad de espacio entre los resultados y la frontera.

173
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Resultados
Laresultados de la búsqueda se pueden mostrar en la página de varias maneras diferentes:

 Mostrar los resultados enuna nueva ventana del navegador


LaLos resultados se mostrarán en una nueva ventana del navegador. Puede configurar las
propiedades de esta ventana a través del botón 'Configuración'.
 Mostrar los resultados enun marco en línea
LaLos resultados se mostrarán en un marco en línea en la misma página.
Tenga en cuenta que tendrá que insertar un objeto marco en línea primero antes de que
seleccione su nombre en la propiedad del marco.
 Mostrar los resultados enjQuery diálogo
LaLos resultados se mostrarán en una jQuery diálogo. Utilice el botón Configuración para
modificar la apariencia de la ventana de diálogo.
 Mostrar los resultados enotro objeto.
Laresultados serán la que se muestra dentro de otro objeto (por ejemplo una capa en la
misma página). Ella
voluntadsustituir el contenido actual de dicho objeto. Asegúrese de que el modo de
desbordamiento de ese objeto se establece en 'scroll' de lo contrario es posible que no vea
todos los resultados!

Cómo añadir un botón 'Buscar' para el campo de búsqueda?


Insertarun botón de avanzada
AbiertoLas propiedades y seleccione el botón tipo
'OnClick' Select OnClick acción 'Ejecutar función
javascript' Enter 'página de búsqueda ()' en el campo
OnClick Valor.

Tenga en cuenta que, básicamente, puede desencadenar la función de página de búsqueda () de

cualquier objeto apoyar eventos. Consejo:


Si ha seleccionado "Mostrar resultados en una nueva ventana del navegador", entonces debe especificar
la ventana emergente
ajustes en los argumentos de página de búsqueda

como esta: página de búsqueda ("barras de

desplazamiento = yes, de tamaño variable = yes ')

Más detalles sobre los argumentos disponibles aquí:


http://www.w3schools.com/jsref/met_win_open.asp

174
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Timer
LaObjeto Timer permite activar acciones basadas en eventos de temporizador. Por ejemplo mostrar u
ocultar un objeto después de x milisegundos.
TimersTambién puede iniciar / detener otros temporizadores! Todas las acciones de sucesos son
compatibles (animar, mostrar / ocultar, rotar,
medios de comunicación,JavaScript etc). Las posibilidades son infinitas!

General
LaObjeto Timer admite dos tipos:
 Intervalo
Ejecutauna función, una y otra vez, a intervalos de tiempo especificados.

 Se Acabó El Tiempo
Ejecutauna función, una vez, después de esperar un número especificado de milisegundos.

Intervalo
Especifica el intervalo en milisegundos.

Autocomienzo
Especifica si se debe iniciar automáticamente el temporizador. Si esta opción no está activada, usted
puede iniciar el temporizador a través de eventos (por ejemplo, al hacer clic en un botón).

Recuerde que también puede detener el temporizador a través de eventos (Timer Stop).

Eventos
En Eventos puede configurar lo que va a pasar cuando el tiempo se agota. Por ejemplo, puede mostrar u
ocultar
un objeto, reproducir un archivo multimedia, animar algo etc.

Para obtener másinformación sobre eventos, por favor, lea las "Eventos" capítulo de este documento.

175
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

PayPalHerramientas de comercio electrónico


LaPayPal herramientas de comercio electrónico son la manera más rápida y fácil de eCommerce para
añadir a su sitio web. Usted puede crear fácilmente botones de pago y compra funcionalidad compras
básicas para su sitio web con sólo unos clics del ratón! Acepte pagos de cualquier persona, todo lo que
necesita para configurar una cuenta de PayPal es una dirección de correo electrónico!
PayPal es uno de los servicios principales y más respetados de pago en la Web. Lo mejor de todo, no
cuesta nada para configurar una cuenta.

SignoPara obtener una cuenta PayPal ahora:


https://www.paypal.com/mrb/pal=6TUEY37GLM48U

Lasiguientes herramientas están disponibles:


 Botón Comprar ahora
Habilitar el comercio electrónico en su sitio web al permitir que los clientes compran
rápidamente un elemento a la vez.
 Añadiral botón del carro
 Vistabotón del carro
Estosbotones son parte de la solución de carrito de la compra de PayPal.
Con los usuarios 'Añadir al carro' botón puede agregar uno o más elementos a su
carrito de compras. El botón 'Ver carro' permite a los usuarios comprobar su compra
siempre que les gustaría.
 Botón Suscripción
Útilpara las suscripciones y pagos periódicos. Aceptar pagos recurrentes con, facturación
automatizada flexible.
 DonaciónBotón
Acepte el créditode tarjetas y cuentas bancarias donaciones en su sitio web o vía e-mail.

Opciones
Ustedpuede adjuntar 6 controles de formulario opcionales por lo que el comprador puede seleccionar
(por ejemplo) el tamaño o color de un
producto. Un campo de opción puede ser un ComboBox o un EditBox.
LaPropiedad Label se puede utilizar para asignar una etiqueta a la opción. Si deja este campo en
blanco, se utiliza el ID del objeto.

Paso1
Insertarun ComboBox o EditBox a la página.

Paso2
Seleccione el ID del objeto en la lista desplegable anterior

Notas:
Lacampos de opciones seleccionadas no deben ser parte de otra forma. Web Builder se asegurará de
que están unidos en el botón de PayPal y cambiar el nombre de los objetos si es necesario.

176
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón Comprar ahora


Cuando se utiliza de PayPal botones Comprar ahora, usted puede vender artículos individuales de su sitio
web.
Botones Comprar ahora es una manera de bajo costo para usted aceptar pagos de cuentas
bancarias, y se puede integrar completamente con su sitio web en unos pocos y sencillos pasos.

General
PayPalCuenta: Dirección de correo electrónico para su cuenta de PayPal.
Botón de imagen: Especifica la imagen del botón que se mostrará en su página web. Seleccione
"Imagen personalizada" si desea especificar una imagen personalizada.
PermitirSandBox: PayPal ofrece un recinto de seguridad para permitir poner a prueba su sitio sin tener
que hacer
pagos.Desactive esta opción cuando la publicación de la versión en vivo de su
sitio! Más información sobre el entorno limitado del
PayPal:https://developer.paypal.com/
Ventana Target:Especifica la ventana del navegador donde se abrirá la página web de PayPal. Por
defecto: PayPal.
Hacer este campo vacío si desea que el sitio Web de PayPal para abrir en la ventana actual.

Detalles
Nombre del artículo / servicio: Descripción de la pieza. Este campo es opcional. Si los clientes omitidos
pueden introducir un elemento
nombrar al momento de la compra.
Identificación de artículo / número: Pass-through variable para realizar un seguimiento de las
compras pasaron de nuevo a usted en la realización del pago. Este campo es opcional. Si se omite
ninguna variable se pasa de nuevo a usted.
Precio: Laprecio o la cantidad de la compra, no incluyendo el envío, manipulación, o impuesto. Si se omite
clientespuede entrar en una cantidad al momento de la compra.
Impuesto:Basado en transacciones variable de anulación de impuestos. Ponga esto en una cantidad
IETU para aplicar a la transacción independientemente de la ubicación del comprador. Este valor anula
cualquier configuración de impuestos establecidos en su perfil.
Por defecto:Configuración de impuestos del perfil (si los hay) se aplican.
Moneda: La divisa del pago. Define la moneda en la que se indican las variables monetarias (cantidad,
envío, shipping2, manejo, impuestos).
Permitirclientes editen cantidad: Cuando se activa esta opción permite que el comprador para
especificar el
la cantidad.

Envío
Envío Base: El costode envío de este artículo si ha activado los gastos de envío específicos de los artículos.
Este campo
es opcional.
Envío adicional: Lacosto de envío de cada artículo adicional. Este campo es opcional.
Manejocostos: Gastos de manipulación. Esta no es la cantidad. El mismo costo de tramitación se pagan
independientemente del número de artículos comprados. Este campo es opcional.
Requerir el envíoinformación: Especifica si se pide el cliente de una dirección de envío.
Permitirnota del cliente: Especifica si se pide al cliente que incluya una nota con el pago.

URLs
ExitosoURL Pago: La URLa la que el navegador del cliente se devuelve después de terminar el pago; por
ejemplo, una dirección URL de su sitio que muestra un "Gracias por su pago" página. Si se omite el
cliente es llevado al sitio Web de PayPal.
Cancelar URL Pago: Una URL a la que se devuelve el navegador del cliente si el pago se cancela; por
ejemplo, una URL de su sitio web que muestra una
"PagoPágina Cancelado ". Si se omite el navegador se dirige a la página web de PayPal.
CompradorPaís: Define el idioma del comprador para la página de Inicio de sesión único.

Más información:
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/singleitem-intro-outside
177
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

PayPal Cesta de la compra


Cuando se utiliza PayPal la libre Compras en su sitio web, sus clientes pueden comprar varios artículos
conun pago único, navegar por toda su selección, y ver una lista consolidada de todos sus artículos
antes de comprar. La compra de PayPal es una manera de bajo costo para usted aceptar pagos con
tarjeta de crédito y de cuentas bancarias, y se puede integrar completamente con su sitio web en unos
pocos y sencillos pasos. Cuando un comprador hace clic en el botón "Añadir al carrito", una nueva
ventana aparecerá una lista de los contenidos de del comprador de PayPal Cesta de la compra,
incluyendo el tema acaba de agregar. Para realizar la compra, el comprador hace clic en "Checkout" de
esta ventana.

Añadir a la Cesta Button


El complementoa la Cesta botón se puede utilizar para agregar un artículo a la cesta de la compra.

General
PayPalCuenta: Dirección de correo electrónico para su cuenta de PayPal.
Botón de imagen: Especifica la imagen del botón que se mostrará en su página web. Seleccione
"Imagen personalizada" si desea especificar una imagen personalizada.
PermitirSandBox: PayPal ofrece un recinto de seguridad para permitir poner a prueba su sitio sin tener
que hacer los pagos. Desactive esta opción cuando la publicación de la versión en vivo de su sitio!
Más información sobre el entorno limitado del PayPal:https://developer.paypal.com/
Ventana Target:Especifica la ventana del navegador donde se abrirá la página web de PayPal. Por
defecto: PayPal. Hacer este campo vacío si desea que el sitio Web de PayPal para abrir en la ventana
actual.

Detalles
Nombre del artículo / servicio: Descripción de la pieza. Este campo es opcional. Si los clientes
omitidos pueden introducir un nombre de elemento en el momento de la compra.
Identificación de artículo / número: Pass-through variable para realizar un seguimiento de las
compras pasaron de nuevo a usted en la realización del pago. Este campo es opcional. Si se omite
ninguna variable se pasa de nuevo a usted.
Precio: Laprecio o la cantidad de la compra, no incluyendo el envío, manipulación, o impuesto. Si los
clientes omitidos pueden entrar en una cantidad al momento de la compra.
Impuesto:Basado en transacciones variable de anulación de impuestos. Ponga esto en una cantidad IETU
para aplicar a la transacción
independientemente de la ubicación del comprador. Este valor anula cualquier configuración
de impuestos establecidos en su perfil. Defecto: ajustes fiscales Perfil (si los hay) se aplican.
Moneda: La divisa del pago. Define la moneda en la que se indican las variables monetarias (cantidad,
envío, shipping2, manejo, impuestos).
Permitirclientes editen cantidad: Permite al comprador para especificar la cantidad.

URLs
ExitosoURL Pago: La URL a la que el navegador del cliente se devuelve después de terminar el pago;
por ejemplo, una dirección URL de su sitio que muestra un "Gracias por su pago" página. Si se omite el
cliente es llevado al sitio Web de PayPal.
Cancelar URL Pago: Una URL a la que se devuelve el navegador del cliente si el pago se cancela; para
ejemplo,una URL de su sitio web que muestra una página "Pago cancelado". Si se omite el navegador se
dirige a la página web de PayPal.
CompradorPaís: Define el idioma del comprador para la página de Inicio de sesión único.

Ver Carrito Button


LaEl botón Ver carro se puede utilizar para ver el contenido de la cesta de la compra.

General
PayPalCuenta: Dirección de correo electrónico para su cuenta de PayPal.
Botón de imagen: Especifica la imagen del botón que se mostrará en su página web. Seleccione
"Imagen personalizada" si desea especificar una imagen personalizada.

Más información:

178
WYSIWYG Web Builder 10 Pablo
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/sc-intro-outside SoftwareSoluciones

179
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón Suscripción
Cuando se utiliza PayPal suscripciones y pagos periódicos, sus clientes pueden comprar
automáticamente recurrentesuscripciones de su sitio web.
Suscripcionesy pagos periódicos es una manera de bajo costo para que acepte tarjetas de crédito y
cuenta bancaria el pago de suscripciones a sitios de contenido, los honorarios del boletín de noticias,
las cuotas del club, o donaciones recurrentes, y se puede integrar completamente con su sitio web en
unos pocos y sencillos pasos. Suscripciones y pagos periódicos sólo están disponibles para cuentas
comerciales o Premier.

General
PayPalCuenta: Dirección de correo electrónico para su cuenta de PayPal.
Botón de imagen: Especifica la imagen del botón que se mostrará en su página web. Seleccione
"Imagen personalizada" si desea especificar una imagen personalizada.
PermitirSandBox: PayPal ofrece un recinto de seguridad para permitir poner a prueba su sitio sin tener
que hacer
pagos.Desactive esta opción cuando la publicación de la versión en vivo de su
sitio! Más información sobre el entorno limitado del
PayPal:https://developer.paypal.com/
Ventana Target:Especifica la ventana del navegador donde se abrirá la página web de PayPal. Por
defecto: PayPal. Hacer este campo vacío si desea que el sitio Web de PayPal para abrir en la ventana
actual.

Detalles
Suscripciónnombre: Introduzca el nombre de la suscripción que desea vender en el campo Nombre de
suscripción. Si no introduce nada en este campo, sus clientes pueden completarlo.
Número de Referencia de Artículo: Si usted tiene un ID o número de seguimiento para su artículo,
escríbalo en el campo Número de Referencia de Artículo. Este campo no se mostrará a sus clientes en
el momento del pago, pero van a ver en sus detalles de las transacciones del sitio Web de PayPal.
Moneda: Elija la moneda en que usted quisiera este pago se denomina. Este campo será por defecto la
divisa de su saldo principal.
Proyecto de leyel suscriptor: Escriba su tasa normal de suscripción.
Longitud de cada ciclo de facturación: Especifica el ciclo de facturación regular.
¿Quieres dejar los pagos recurrentes después de un cierto número?
Active esta opción si desea poner fin a las suscripciones de sus clientes después de un cierto número
de pagos en sus tarifas regulares. Esto significa que una vez que un cliente ha hecho que el número
especificado de pagos a su tasa regular, se completará su suscripción. Si deshabilita esta opción
continuarán a menos que sea cancelado manualmente o por el incumplimiento del pago de
suscripciones de sus clientes.
Ensayoperíodos (opcional)
Ustedpuede entrar en un período de prueba y tarifas para su suscripción. Para crear una cuenta de
prueba
período, ingrese una cantidad de 0. Los periodos de prueba se puede introducir como un número de
días, semanas, meses o años.
Vuelva a intentar de Insuficiencia
Active esta opción si desea que PayPal para reintentar automáticamente fallido
pagos.Los pagos se volverá a intentar tres días después de la fecha de fallo. Después de un segundo
fracaso, PayPal intentará una vez más cinco días después. Un tercer fracaso conducirá a una
cancelación automática de la suscripción.
Pagoshecho con cuentas bancarias se volverá a intentar automáticamente una vez, tres días después
de PayPal notifica al usuario que el pago ha fallado. Si selecciona No, los pagos fallidos resultarán en
la cancelación automática de la suscripción.
Requerir el envíoinformación: Especifica si se pide el cliente de una dirección de envío.

Más información:
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/subscr-intro-outside

180
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón de Donación
Recogerdonaciones de un botón en su sitio web.
Donaciones de PayPal es una manera de bajo costo para usted aceptar tarjetas de crédito y
donaciones de cuentas bancarias. Integrar donaciones de PayPal con su sitio web en unos pocos y
sencillos pasos.

General
PayPalCuenta: Dirección de correo electrónico para su cuenta de PayPal.
Botón de imagen: Especifica la imagen del botón que se mostrará en su página web. Seleccione
"Imagen personalizada" si desea especificar una imagen personalizada.
PermitirSandBox: PayPal ofrece un recinto de seguridad para permitir poner a prueba su sitio sin tener
que hacer
pagos.Desactive esta opción cuando la publicación de la versión en vivo de su
sitio! Más información sobre el entorno limitado del
PayPal:https://developer.paypal.com/
Ventana Target:Especifica la ventana del navegador donde se abrirá la página web de PayPal. Por
defecto: PayPal.
Hacer este campo vacío si desea que el sitio Web de PayPal para abrir en la ventana actual.

Detalles
DonaciónNombre / servicio: Introduzca una descripción de la donación. Si no introduce nada en este
campo,
sus clientes pueden completarlo.
DonaciónID / número: Si usted tiene un ID o número de seguimiento para su artículo, escríbalo en el
campo Donación ID / número. Este campo no se mostrará a sus clientes en el momento de la
donación, pero van a ver en sus detalles de las transacciones del sitio Web de PayPal.
Moneda: Elija la moneda en que usted quisiera este pago se denomina. Este campo será por defecto la
divisa de su saldo principal.
Exigirinformación de envío: Especifica si se pide el cliente de una dirección de envío.
Permitirnota del cliente: Especifica si se pide al cliente que incluya una nota con el pago.

URLs
ExitosoURL Pago: La URL a la que se devuelve el navegador del cliente después de completar el
pago;por ejemplo, una dirección URL de su sitio que muestra un "Gracias por su pago" página. Si se
omite el cliente es llevado al sitio Web de PayPal.
Cancelar URL Pago: Una URL a la que se devuelve el navegador del cliente si el pago se cancela; por
ejemplo, una URL de su sitio web que muestra una
"PagoPágina Cancelado ". Si se omite el navegador se dirige a la página web de PayPal.
CompradorPaís: Define el idioma del comprador para la página de Inicio de sesión único.

Más información:
http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/donate-intro-outside

181
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

PHPIniciar sesión Herramientas

Nota importante:
Laherramientas de acceso son un conjunto de formularios y scripts PHP avanzadas. Por favor, tómese
su tiempo para familiarizarse con las herramientas. Primero lea toda la documentación disponible y
estudiar la plantilla de demostración antes de utilizarlos en su propio proyecto.

Web Builder tiene un built-in (PHP) sistema de acceso completa a proteger con contraseña una o más
páginas.

Características principales:
 Proteger una página simplemente arrastrando el objeto Protección de página a la página.
 Inicio de sesión y formas Desconectar.
 Una sección Administrador para agregar, editar o eliminar cuentas de usuario.
 Un formulario de registro para permitir a los usuarios suscribirse a una cuenta.
 Una forma de cambio de contraseña para que los usuarios pueden cambiar su contraseña.
 Una forma de recuperación de contraseña, para restablecer la contraseña del usuario.
 Costumbrecampos de perfil.
 Soporta tanto MySQL y una base de datos de texto sin formato.
 Sin codificación personalizada es necesario, todo es 'arrastrar y soltar'!

Requisitos:
Laherramientas de acceso requieren un servidor web con soporte para PHP, por lo que el primer paso
para empezar a utilizar las herramientas de inicio de sesión de
WYSIWYGWeb Builder es comprobar si su proveedor de alojamiento web es compatible con PHP!

Consejo:
Le recomendamos utilizar sólo un formulario por cada página para evitar conflictos entre los guiones.

Convertir a la Forma
Todos los formularios de ingreso incluyen una opción para convertir la forma predefinida / fijo a una
forma estándar (clic derecho en el formulario de acceso para visualizar el menú contextual). Esto le
permite convertir la forma estática en objetos Web Builder nativos para que pueda personalizar
completamente el diseño y el código si lo desea.
Tenga en cuenta que la personalización del código PHP requiere conocimientos de PHP. Hacer
cambios en el código sin saber lo que estás haciendo va a provocar un comportamiento indefinido!

ManifestaciónPlantilla
Un ejemplo plantilla completamente funcional está incluido en la categoría de 'Demo' de las plantillas
estándar.
Esteplantilla se muestra cómo utilizar las herramientas Iniciar sesión de WYSIWYG Web Builder.

Por favor, primero tome su tiempo para estudiar la plantilla de demostración antes de incluir las
herramientas de acceso en su propio proyecto. La razón más común de las herramientas de acceso a
no trabajar en un sitio web se debe a errores de configuración del usuario!

Para abrirla plantilla de demostración:


1. Seleccione Menú-> Nuevo sitio web de plantilla
2. Seleccione la categoría de 'Demo'
3. Haga clic en'Login' y la prensa en el botón Aceptar.
4. Guardarel proyecto recién generado en una carpeta de su elección.

Comience por leer la información de la página "Introducción" en la plantilla.


Para probarel ejemplo completo de trabajo debe publicar todas las páginas de un servidor web con
soporte para PHP. Asimismo, no se olvide de crear la base de datos de usuario primero !!!

180
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Usuariobase de datos
LaHerramientas Login utilizan un archivo de base de datos en el servidor para almacenar la información
del usuario. Los datos se almacenan en
un archivo de texto y coma separado o en una tabla MySQL. Las contraseñas se hash MD5 utilizando lo
que se guardarán de forma segura.

Lalas siguientes herramientas de acceso utilizará este archivo de base de datos:


 Administración
 Cambiar La Contraseña
 Iniciar Sesión
 Recuperación de la contraseña
 Contratar
 Editar Perfil

Consejo:
Usteddebe establecer el mismo nombre de base de datos para todas las herramientas de acceso!

CómoCómo puedo crear automáticamente una base de datos de usuario en el servidor?


Todos los objetos mencionados anteriormente tienen un botón en su ventana de propiedades llamado
'Crear base de datos'.

1. Haga clic enel 'Crear base de datos'


2. Introduzca un nombre para la base de datos, por ejemplo 'usersdb.php'. Haga clic en Siguiente.
3. Seleccione la ubicación de publicación donde se va a publicar este sitio web para. Haga clic en
Siguiente.

Nota:
Si usted no ve ninguna publican lugares, entonces usted debe agregarlos por primera vez en la ventana
de Publicar!

4. El asistente realizará una conexión con el servidor y mostrar la estructura de carpetas.


5. Seleccione la carpeta en la que se debe crear la base de datos.
6. Haga clic en "Finalizar"para crear el archivo.
WYSIWYGWeb Builder cambiará automáticamente el permiso del archivo para que escribamos habilitado,
por lo
los nuevos usuarios se pueden añadir.

CómoCómo puedo crear manualmente una base de datos de usuario en el servidor?


Una base de datos de usuario es básicamente un archivo de texto en el servidor. Así que si por cualquier
razón las instrucciones anteriores
fallar,usted puede tratar de subir el archivo manualmente usted mismo.
1. Abiertobloc de notas o cualquier otro editor de texto plano y crear un archivo vacío llamado
'usersdb.php'.
2. Subirel archivo en la misma carpeta que sus páginas protegidas. Para cargar el archivo se
puede utilizar a continuación herramienta integrada de FTP o cualquier otra aplicación FTP.
3. Despuésel archivo se ha cargado debe modificar los permisos para que el script PHP puede
escribir datos en él. Los permisos correctos son 757 o 777.
4. Alternativamentepuede utilizar la herramienta de transferencia de archivos del panel de control
de su host. Debe haber un
opción en el panel de control de alojamiento web para establecer permisos de escritura. Si no
está presente, es posible que pueda ponerse en contacto con su servicio de alojamiento web y
solicitar los permisos de escritura para el archivo.

CómoCómo puedo evitar que el usuario puede ver o descargar la base de datos de usuario desde el
servidor?
Por defecto, la base de datos de usuario de las herramientas de acceso se puede acceder por cualquier
persona que no conoce el nombre del archivo. Y aunque las contraseñas se codifican las direcciones de
181
WYSIWYG Web Builder 10 Pablo
correo electrónico no se ocultan. SoftwareSoluciones

Así que lo primero que debe hacer es asegurarse de que usted le da la base de datos de usuario un
nombre único que no puede ser fácilmente adivinado.
Por ejemplo: A6gr8JDaTa.php

182
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Ahacer que la base de datos de usuario completamente inaccesible puede crear un archivo .htaccess
en la carpeta en el servidor con el siguiente contenido:

<Files "usersdb.php">
Orden negar, permitir
Dejar de xxx.xxx.xxx.xxx
Denegar de todos
</ Files>

dondeusersdb.php es el nombre de la base de datos y xxx.xxx.xxx.xxx es la dirección IP.

Ver también:
http://www.javascriptkit.com/howto/htaccess.shtml

Usouna base de datos MySQL para almacenar la información de usuario (sólo para usuarios
avanzados!)
Como alternativa para la base de datos de usuario de texto sin formato también se puede optar por
almacenar los usuarios en un MySQL
base de datos.Cada objeto tiene una categoría especial de base de datos MySQL, donde puede
configurar las propiedades de la base de datos MySQL. Antes de poder utilizar esta opción, debe
crear la tabla en el servidor.
Ingrese a su utilidad de administración de MySQL. Crear la tabla USERS usando esta consulta SQL:

CREATE TABLE `` de los usuarios (


`Int id` (10) NOT NULL AUTO_INCREMENT,
`Varchar username` (50) NOT NULL,
`Varchar fullname` (75) NOT NULL,
`Varchar password` (50) NOT NULL,
`Varchar email` (75) NOT NULL,
`Active` tinyint (1) NOT NULL,
`Varchar code`
(75), PRIMARY KEY
(`Id`)
) ENGINE = MyISAM AUTO_INCREMENT = 1;

Si ha añadido campos de perfil personalizado para cualquiera (o todos) de los objetos de inicio de
sesión a continuación, también debe crear estos campos en la base de datos. Custom campos de
perfil deben ser nombrados extra1, extra2, EXTRA3 etc!
Lasiguiente consulta SQL genera una tabla con 5 campos de perfil personalizados adicionales:

CREATE TABLE `` de los usuarios (


`Int id` (10) NOT NULL AUTO_INCREMENT,
`Varchar username` (50) NOT NULL,
`Varchar fullname` (75) NOT NULL,
`Varchar password` (50) NOT NULL,
`Varchar email` (75) NOT NULL,
`Active` tinyint (1) NOT NULL,
`Varchar code` (75),
`Varchar extra1` (100),
`Varchar extra2` (100),
`Varchar extra3` (100),
`Varchar extra4` (100),
`Varchar extra5` (100),
PRIMARY KEY (`Id`)
) ENGINE = MyISAM AUTO_INCREMENT = 1;

183
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Administración
LaObjeto Administrador le permite añadir, editar o eliminar usuarios de la base de datos del usuario en
línea.
Ahabilitar el desplazamiento de una gran lista de usuarios, la forma de administrador se mostrará
dentro de un marco en línea.

Color de fondo
Especifica el color del fondo.

BorderColor
Especifica el color del borde alrededor del objeto.

BorderWidth
Especifica el ancho del borde alrededor del objeto.

Fuente
Especifica la fuente utilizada para mostrar el texto en el objeto.

HeaderColor
Especifica el color de cabecera.

HeaderTextColor
Especifica el color de texto del encabezado.

Color del texto


Color del texto.

AdminPassword
Especifica la contraseña del administrador.

CustomProfileFields
Esteopción se puede utilizar para añadir campos adicionales para el formulario de registro.
Nuevolos campos pueden ser de tipo 'texto' o 'opción'. Un campo de texto agrega un cuadro de edición
estándar, mientras que los campos de opciones
añade un cuadro combinado para dar al usuario
varias opciones. También puede marcar un campo
como «necesaria».

La'Aplicar a todos "botón se puede utilizar para aplicar los campos de perfil personalizado a todas las
herramientas de acceso en el proyecto, por lo que no tienen que sincronizar manualmente.

Notas importantes:
Todos los objetos de la herramienta de inicio de sesión en el proyecto deben tener los mismos campos de
perfil personalizados!
Al agregar campos de perfil personalizados y utilizar una base de datos MySQL, entonces también debe
agregar estos campos a la base de datos!

Base de datos
Especifica la base de datos de usuario. Este valor se ignora si está utilizando MySQL!

FrameName
LaPropiedad 'FrameName' especifica el nombre de este marco en línea.

MySQLBase de datos (sólo para usuarios avanzados)


Como alternativa para la base de datos de usuario de texto sin formato también se puede optar por
almacenar los usuarios en una base de datos MySQL. Para ello, debe crear una nueva tabla en el
servidor MySQL. Ver Base de datos del usuario para obtener más detalles.

184
WYSIWYG Web Builder 10 Pablo
EnableMySQL SoftwareSoluciones
Especifica si se debe utilizar una base de datos MySQL

185
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Base de datos
Especifica el nombre de base de datos MySQL.

Contraseña
Especifica la contraseña de MySQL.

Servidor
Especifica el servidor de base de datos MySQL.

Mesa
Especifica el nombre de la tabla MySQL.

Nombre de usuario
Especifica el nombre de usuario de MySQL.

186
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Cambiar La Contraseña
LaCambiar contraseña objeto permite a los usuarios cambiar su contraseña. El usuario debe estar
registrado para ser
capaz de cambiar la contraseña.

Nota importante:
LaLa página debe tener la extensión de archivo 'php'! Puede cambiar la extensión del archivo en las
propiedades de la página.

BackgroundColor
Especifica el color del fondo.

BorderColor
Especifica el color del borde.

BorderWidth
Especifica el ancho del borde.

ButtonImage
Especifica la imagen que se muestra para el botón cuando la propiedad ButtonType se establece en
'Imagen'

ButtonText
Especifica el texto que se muestra para el botón cuando la propiedad ButtonType está en 'Button' o 'Link'.

ButtonType
Especifica el tipo de botón. Puede elegir entre 3 tipos: Botón, Imagen o Link.

ConfirmPasswordErrorText
Especifica el texto que se muestra cuando la contraseña y confirmar la contraseña no coinciden.

ConfirmPasswordLabelText
Especificael texto que identifica el cuadro de texto de confirmación de contraseña.

Fuente
Especifica la fuente utilizada para el texto dentro del objeto.

NewPasswordInvalidErrorText
Especifica el texto que se muestra cuando la nueva contraseña no es válida.

NewPasswordLabelText
Especifica el texto que identifica el nuevo cuadro de texto contraseña.

NotLoggedInErrorText
Especifica el texto que se mostrará cuando el usuario no está conectado.

OldPasswordInvalidErrorText
Especifica el texto que se muestra cuando la contraseña antigua no es válida.

PasswordLabelText
Especifica el texto que identifica el cuadro de texto de la contraseña.

Espaciamiento
Especifica el espacio entre los controles.

TextColor
Especifica el color del texto.

187
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

TitleBackColor
Especifica el color de fondo del título.

TitleColor
Especifica el color del texto del título.

TitleText
Especifica el texto mostrado por el título.

Base de datos
Especifica la base de datos de usuario. Este valor se ignora si está utilizando MySQL!

DestinationPage
Especifica la página que el usuario se dirige a después de autenticarse satisfactoriamente.

MySQLBase de datos
Como alternativa para la base de datos de usuario de texto sin formato también se puede optar por
almacenar los usuarios en una base de datos MySQL. Para ello, debe crear una nueva tabla en el
servidor MySQL. Ver Base de datos del usuario para obtener más detalles.

EnableMySQL
Especifica si se debe utilizar una base de datos MySQL

Base de datos
Especifica el nombre de base de datos MySQL.

Contraseña
Especifica la contraseña de MySQL.

Servidor
Especifica el servidor de base de datos MySQL.

Mesa
Especifica el nombre de la tabla MySQL.

Nombre de usuario
Especifica el nombre de usuario de MySQL.

188
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Iniciar Sesión
LaEntrar objeto proporciona una forma estándar para acceder a las páginas protegidas.

Nota importante:
LaLa página debe tener la extensión de archivo 'php'! Puede cambiar la extensión del archivo en las
propiedades de la página.

BackgroundColor
Especifica el color del fondo.

BorderColor
Especifica el color del borde.

BorderWidth
Especifica el ancho del borde.

ButtonImage
Especifica la imagen que se mostrará para el botón cuando la propiedad ButtonType se establece en
'Imagen'.

ButtonText
Especifica el texto que se muestra para el botón cuando la propiedad ButtonType está en 'Button' o 'Link'.

ButtonType
Especifica el tipo de botón. Puede elegir entre 3 tipos: Botón, Imagen o Link.

PasswordLabelText
Especifica el texto que identifica el cuadro de texto de la contraseña.

RememberMeText
Especifica el texto que se muestra para la opción recuérdame.

Espaciamiento
Especifica el espacio entre los controles.

TitleBackColor
Especifica el color de fondo del título.

TitleColor
Especifica el color del texto del título.

TitleText
Especifica el texto mostrado por el título.

UsernameLabelText
Especifica el texto que identifica el nombre de usuario de texto.

Base de datos
Especifica la base de datos de usuario. Este valor se ignora si está utilizando MySQL!

DestinationPage
Especifica la página que el usuario se dirige a después de autenticarse satisfactoriamente.

ErrorPage
Especifica la página que el usuario se dirige a al inicio de sesión fallido.

DisplayRememberMe
Verdaderosi el remember me aparece la casilla de verificación.

189
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Cerrar sesión
LaObjeto Cerrar sesión le da al usuario la opción para iniciar sesión.

Nota importante:
LaLa página debe tener la extensión de archivo 'php'!
Ustedpuede cambiar la extensión de archivo de una página en las propiedades de la página.

BackgroundColor
Especificael color del fondo.

BorderColor
Especifica el color del borde.

BorderWidth
Especifica el ancho del borde.

Fuente
Especifica la fuente utilizada para el texto dentro del objeto.

ButtonImage
Especifica la imagen que se muestra para el botón cuando la propiedad ButtonType se establece en
'Imagen'

ButtonText
Especifica el texto que se muestra para el botón cuando la propiedad ButtonType está en 'Button' o 'Link'.

ButtonType
Especifica el tipo de botón. Puede elegir entre 3 tipos: Botón, Imagen o Link.

TextColor
Especifica el color del texto.

LogoutPage
Especifica la página que el usuario se dirige a al cerrar la sesión.

190
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Recuperación de la contraseña
La ContraseñaObjeto de recuperación permite a los usuarios restablecer su contraseña.
Un mensaje de correo electrónico se envía con la nueva contraseña (al azar).
Si el usuario desea cambiar la contraseña, puede utilizar el formulario de cambio de contraseña.

Nota importante:
LaLa página debe tener la extensión de archivo 'php'! Puede cambiar la extensión del archivo en las
propiedades de la página.

BackgroundColor
Especifica el color del fondo.

BorderColor
Especifica el color del borde.

BorderWidth
Especifica el ancho del borde.

ButtonImage
Especifica la imagen que se mostrará para el botón cuando la propiedad ButtonType se establece en
'Imagen'.

ButtonText
Especifica el texto que se muestra para el botón cuando la propiedad ButtonType está en 'Button' o 'Link'.

ButtonType
Especifica el tipo de botón. Puede elegir entre 3 tipos: Botón, Imagen o Link.

Espaciamiento
Especificael espaciado entre los controles.

TitleBackColor
Especifica el color de fondo del título.

TitleColor
Especifica el color del texto del título.

TitleText
Especifica el texto mostrado por el título.

EmailLabelText
Especifica el texto que identifica el nombre de usuario de texto.

Base de datos
Especifica la base de datos de usuario. Este valor se ignora si está utilizando MySQL!

SuccessPage
Especifica la página que el usuario se dirige a después de la acción ha tenido éxito.

Correo electrónicoDesde
Especifica el de dirección de correo electrónico.

Email Mensaje
Especificael mensaje de correo electrónico.

Correo electrónicoSujeto
Especifica el asunto del correo electrónico.

191
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

ProtegidoPágina
Aproteger a cualquier página de su sitio web, sólo tiene que arrastrar y soltar el objeto 'Protegida página'
a la página.
Si el usuario no está conectado en él será redirigido a la 'Acceso denegado Página'.

Nota importante:
LaLa página debe tener la extensión de archivo 'php'! Puede cambiar la extensión del archivo en las
propiedades de la página.

Acceso DenegadoPágina
Especifica la página que el usuario se dirige a si no iniciado sesión.

AllowUsers
Especifica los usuarios que pueden acceder a la página. Puede introducir una lista de usuarios separados
por comas:
Bill, Steve, Gary
Si deja esta propiedad vacía, todos los usuarios registrados pueden acceder a la página.

190
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Contratar
LaAlojamiento Regístrese permite a los usuarios registrarse para un nueva cuenta de usuario.
Lanueva cuenta se creará inmediatamente después de que el usuario haya
completado el formulario. Un mensaje de correo electrónico será enviado a la
dirección de correo electrónico especificada con los datos de acceso.

Tenga en cuenta que cualquier persona puede crear una cuenta, a fin de utilizar este objeto sólo para las
páginas públicas!

Nota importante:
LaLa página debe tener la extensión de archivo 'php'! Puede cambiar la extensión del archivo en las
propiedades de la página.

BackgroundColor
Especifica el color del fondo.

BorderColor
Especifica el color del borde.

BorderWidth
Especifica el ancho del borde.

ButtonImage
Especifica la imagen que se muestra para el botón cuando la propiedad ButtonType se establece en
'Imagen'

ButtonText
Especifica el texto que se muestra para el botón cuando la propiedad ButtonType está en 'Button' o 'Link'.

ButtonType
Especifica el tipo de botón.

CaptchaEnabled
Especifica si CAPTCHA de debe estar habilitado.

CaptchaLabelText
Especifica el texto que identifica el campo de CAPTCHA.

ConfirmPasswordErrorText
Especifica el texto que se muestra cuando la contraseña y confirmar la contraseña introducida por el
usuario no coinciden.

ConfirmPasswordLabelText
Especifica el texto que identifica el cuadro de texto de confirmación de contraseña.

EmailInvalidErrorText
Especifica el texto que se muestra cuando la dirección de correo electrónico introducida por el usuario no
es válido.

EmailLabelText
Especifica el texto que identifica el cuadro de texto de correo electrónico.

Fuente
Especifica la fuente utilizada para el texto dentro del objeto.

FullnameInvalidErrorText
Especifica el texto que se mostrará cuando el nombre completo introducido por el usuario no es válido.

191
WYSIWYG Web Builder 10 Pablo
FullnameLabelText SoftwareSoluciones
Especifica el texto que identifica el cuadro de texto nombre completo.

192
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

PasswordInvalidErrorText
Especifica el texto que se muestra cuando la contraseña introducida por el usuario no es válido.

PasswordLabelText
Especifica el texto que identifica el cuadro de texto de la contraseña.

Espaciamiento
Especifica el espacio entre los controles.

TextColor
Especifica el color del texto.

TitleBackColor
Especifica el color de fondo del título.

TitleColor
Especifica el color del texto del título.

TitleText
Especifica el texto mostrado por el título.

UsernameAlreadyUsedErrorText
Especifica el texto que se muestra cuando ya existe el nombre de usuario.

UsernameInvalidErrorText
Especifica el texto que se mostrará cuando el nombre de usuario introducido por el usuario no es válido.

UsernameLabelText
Especifica el texto que identifica el cuadro de texto Nombre de usuario.

Comportamiento
Activación de la cuenta
Especifica si se debe activar la cuenta activación por parte del administrador. Si esta opción es
'Administrator', las nuevas cuentas no se activan hasta que el administrador les permite.
Si esta opción es "Automático", entonces la cuenta será activada inmediatamente después de que el
usuario ha completado
el formulario.
Si se selecciona la opción 'Correo electrónico' verificación el usuario debe activar la cuenta a través
de un enlace en el correo electrónico de confirmación antes de que se activará. Esto hace que la
dirección de correo electrónico especificada no es válida.

Consejo:
Si habilita la verificación de correo electrónico a continuación, es probable que desee incluir algunas
instrucciones en el mensaje de correo electrónico para indicar al usuario utilizar el enlace de activación
en el mensaje para activar la cuenta!

193
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CustomProfileFields
Esteopción se puede utilizar para añadir campos adicionales para el formulario de registro.
Nuevolos campos pueden ser de tipo 'texto' o 'opción'. Un campo de texto agrega un cuadro de edición
estándar, mientras que los campos de opción agrega un cuadro combinado para dar al usuario varias
opciones. También puede marcar un campo como «necesaria».

La'Aplicar a todos "botón se puede utilizar para aplicar los campos de perfil personalizado a todas
las herramientas de acceso en el proyecto, por lo que no tienen que sincronizar manualmente.

Notas importantes:
Todos los objetos de la herramienta de inicio de sesión en el proyecto deben tener los mismos campos de
perfil personalizados!
Al agregar campos de perfil personalizados y utilizar una base de datos MySQL, entonces también debe
agregar estos campos a la base de datos!

Base de datos
Especifica la base de datos de usuario. Este valor se ignora si está utilizando MySQL!

SuccessPage
Especifica la página que el usuario se dirige a después de la acción ha tenido éxito.

Correo electrónico
AdminEmailAddress
Especifica la dirección de correo electrónico del administrador. Esto se
puede dejar vacío. Una copia del correo electrónico de confirmación de
inscripción será enviada a esta dirección.

Correo electrónicoDesde
Especifica el de dirección de correo electrónico.

Email Mensaje
Especifica el mensaje de correo electrónico.

Correo electrónicoSujeto
Especifica el asunto del correo electrónico.

Editar Perfil
LaEditar perfil objeto permite al usuario editar la configuración de la cuenta sus / sus. El usuario debe
iniciar sesión para ser capaz de acceder al perfil.

Este objeto esmuy similar al objeto Suscríbete y la mayoría de las propiedades son las mismas.

194
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

El gestor de contenidos

Nota importante:
LaContenido herramientas del sistema de gestión son un conjunto de formularios y scripts PHP
avanzadas. Por favor, tómese su tiempo para familiarizarse con las herramientas. Primero lea toda la
documentación disponible y estudiar la plantilla de demostración antes de empezar a utilizarlos en su
propio proyecto!

WYSIWYGWeb Builder cuenta con un completo sistema integrado (basado en PHP) de gestión de
contenidos para permitir que usted o sus clientes a gestionar contenido en línea. La idea básica es que
el contenido de la página será pantalla dentro de un área fija en la página, este es el CMS View. Puede
parece este un soporte para un marco en línea o contenido lugar, aunque el contenido será
dinámicamente fusionarse con él resto de la página cuando se solicita la página del servidor.
Básicamente esto significa que usted puede tener sólo una página para todo el sitio y el resto del
contenido es gestionado en el servidor. Aunque usted puede mezclar el contenido dinámico y fijo! El
diseño de la página (también llamada la frontera maestro) puede ser diseñado con las herramientas de
desarrollo Web estándar WYSIWYG. La navegación (Menú CMS) se genera automáticamente en función
de la estructura del sitio en el servidor, por lo que no tiene que llenar los menús manualmente.

Nota:
Esimportante entender que este gestor de contenidos no es un sustituto de las soluciones en línea
como Joomla, Drupal o WordPress. El CMS fue diseñado como un complemento, no un sustituto de
sitios web WYSIWYG Web Builder. Así que va a crear el diseño en el software y el contenido en línea.
Tambiénun CMS no es un editor HTML en línea. Usted no edita la página completa, sólo el área de
contenido!

Clavecaracterísticas:
 Panel de administrador en línea para añadir / editar / copiar y eliminar páginas.
 Lapanel de administrador es compatible con varios editores populares como CKEditor, TinyMCE y
CLEditor.
También cuenta con un sencillo editor incorporado.
 Ustedpuede ocultar las páginas de la estructura del menú que actualmente en construcción.
 CMS tiene varios "bloques de diseño 'individuo para darle tanta flexibilidad como sea
posible, por lo que se puede integrar fácilmente las herramientas en sus diseños existentes.
 Un objeto View CMS, que es un marcador de posición para el contenido en línea.
 Un objeto Menú CMS, que se puede utilizar para navegar entre las páginas en línea. El menú
tiene muchas opciones personalizables.
 Un objeto de la búsqueda CMS, que se puede utilizar para buscar contenido en línea.
El índice de búsqueda será automáticamente creado / modificado por el CMS.
 Un objeto de etiqueta CMS, esto puede ser usado para mostrar el título de la página, la fecha
de creación, autor, páginas vistas, etc en cualquier parte de la página.
 CMS se integra con las herramientas de acceso para que pueda asignar diferentes usuarios de
la CMS, pero también tienen un administrador global.
 LaCMS soporta páginas externas, por lo que puede mezclar el contenido en línea con páginas
estándar. O incluso páginas de otros sitios Web.
 Incluye un sencillo administrador de archivos que se puede utilizar para cargar y
administrar archivos en línea (como imágenes).
 Soporta plug-ins para extender la funcionalidad de la CMS con (por ejemplo, un libro
de visitas, comentarios, la protección con contraseña, una tienda on-line, etc.).

Requisitos:
Laherramientas de acceso requieren un servidor web con soporte PHP y MySQL, así que el primer paso
antes de empezar a usar las herramientas de la CMS de WYSIWYG Web Builder es comprobar si su
proveedor de alojamiento web compatible con PHP / MySQL!

Un ejemplo plantilla completamente funcional está incluido en la categoría de 'Demo' de las plantillas

195
WYSIWYG Web Builder 10 Pablo
estándar. SoftwareSoluciones

196
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Base de datos de CMS


LaEl gestor de contenidos requiere una base de datos para almacenar los datos de la página y otra
información relacionada. Este sistema utiliza MySQL, así que su cuenta de hosting debe tener acceso a
una base de datos MySQL. La mayoría pagamos cuentas de alojamiento no tienen el apoyo de base de
datos incluida. Y lo contrario por favor póngase en contacto con su proveedor de alojamiento para
actualizar su plan de alojamiento existente.

Despuéscomprobar si su sitio web es compatible con MySQL usted debe crear una nueva base de datos
o anotar los detalles de una base de datos existente. Por favor, consulte la documentación de su
servidor para obtener más detalles sobre cómo crear una base de datos. Esto es diferente para cada
host para que no haya instrucciones genéricas que podemos darle para eso. Para poder utilizar las
herramientas de la CMS que necesitará siguiente información:

 Servidor
Especifica el servidor de base de datos MySQL.
 Base de datos
Especifica el nombre de base de datos MySQL.
 Nombre de usuario
Especifica el nombre de usuario de MySQL.
 Contraseña
Especifica la contraseña de MySQL.

LaCMS creará automáticamente las tablas necesarias si no existe, por lo que no tiene que crear las
tablas manualmente. Se crearán las siguientes tablas (tenga en cuenta que el prefijo de tabla 'CMS_' es
configurable):

CMS_PAGES
Estetabla contiene la información de la página como título de la página, el recuento de contenido, creada
/ fecha actualizada, vista, etc.

CMS_SEARCH_WORDS
Estetabla forma parte del índice de búsqueda y contiene todas las palabras únicas.

CMS_SEARCH_WORDMATCH
Estetabla forma parte del índice de búsqueda y contiene la palabra a la relación página.

Aunque estas tablas se crearán automáticamente la primera vez que inicie sesión en el CMS de
administración, también puede crear manualmente.

-
- Estructura de tabla para la tabla `CMS_PAGES`
-
CREATE TABLE `CMS_PAGES` (
`Id` int (10) sin firmar NO AUTO_INCREMENT NULL,
`Int category_id` (11) NOT NULL,
`Varchar name` (255) NOT NULL,
`Texto Content` NOT NULL,
`Tinyint del hogar del` (1) NOT NULL DEFAULT '0',
`Visible` tinyint (1) NOT NULL,
`Timestamp create_date` NOT NULL CURRENT_TIMESTAMP defecto en la actualización
CURRENT_TIMESTAMP,
`Varchar created_by` (255) NOT NULL,
`Timestamp last_update_date` NOT NULL DEFAULT '0000-00-00 00:00:00',
`Varchar last_update_by` (255) NOT NULL,
`Int views` (11) NOT NULL,
`Menu_index` smallint (4) NOT NULL,
Varchar url` (255) NULL `,
Varchar extra_data` (255) NULL `,
`Title` VARCHAR (100),
`Description` VARCHAR (255),
VARCHAR keywords` (255),
`Seo_friendly_url` VARCHAR (100),
PRIMARY KEY (`id`));

197
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

-
- Estructura de tabla para la tabla `CMS_SEARCH_WORDMATCH`
-
CREATE TABLE `CMS_SEARCH_WORDMATCH` (
`Int page_id` (10) NOT NULL sin firmar,
`Int word_id` (10) NOT NULL sin firmar,
PRIMARY KEY (`page_id`,` word_id`));

-
- Estructura de tabla para la tabla `CMS_SEARCH_WORDS`
-
CREATE TABLE `CMS_SEARCH_WORDS` (
`Id` int (10) sin firmar NO AUTO_INCREMENT NULL,
`Varchar word` (Escribir 50) NOT
NULL, PRIMARY KEY (` id`));

198
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CMS Administrador

Nota importante:
LaContenido herramientas del sistema de gestión son un conjunto de formularios y scripts PHP
avanzadas. Por favor, tómese su tiempo para familiarizarse con las herramientas. Primero lea toda la
documentación disponible y estudiar la plantilla de demostración antes de empezar a utilizarlos en su
propio proyecto!

LaCMS objeto Administrador le permite añadir, editar o eliminar páginas en línea.


Ustedpuede (opcional) instalar su editor de HTML favorito en línea (como CKEditor, TinyMCE y
CLEditor) para hacer las herramientas CMS aún más potente!

Apariencia
Color de fondo
Especifica el color del fondo.

Color del borde


Especifica el color del borde alrededor del objeto.

Ancho del borde


Especifica el ancho del borde alrededor del objeto.

Fuente
Especifica la fuente utilizada para mostrar el texto en el objeto.

Título del color


Especifica el color del título.

TítuloColor del texto


Especifica el color de texto del título.

Color del texto


Color del texto.

Comportamiento
Administración de contraseña
Especifica la contraseña del administrador.

Permitir que usuarios


Especifica los usuarios que pueden acceder a la sección de administración. Puede introducir una lista
de usuarios separados por comas: Bill, Steve, Gary. Estos usuarios deben existir en su sesión de
configuración Herramientas! Si deja esta propiedad vacía, entonces todo sólo el administrador puede
iniciar sesión (utilizando la contraseña especificada bajo AdminPassword).

199
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Carpeta de Activos
Especifica la (línea) carpeta donde se cargarán los nuevos archivos.
Si especifica ./files luego una carpeta con 'archivos' El nombre debe existir en la carpeta actual en el
servidor y debe tener permisos de escritura. La carpeta puede / no se creará de forma automática lo
que debe crear usted mismo en el servidor.

El capítulo
Ahabilitar el desplazamiento de una gran lista de páginas, el administrador de CMS aparecerán dentro de
una línea
marco. LaPropiedad 'FrameName' especifica el nombre de este marco en línea. Normalmente usted no
tiene que editar este.

Ustedpuede 'ruptura' de la trama al vincular directamente al archivo de script como el siguiente:


./cmsadmin.php
o el uso de la dirección URL completa:
http://www.yourwebsite.com/cmsadmin.php

En ese caso, los malos se utilizará la ventana completa del navegador.

Desactivar Gestión de página para usuarios


Active esta opción para ocultar "Crear nueva página", "Copiar", "Borrar", "Establecer página de inicio"
y "orden" para los usuarios estándar. Las opciones seguirán estando disponibles para el administrador.

Habilitar errorInformes
Si habilita esta opción, el guión se activará detallado informe de errores de PHP. Esto puede ser útil es
que usted está experimentando problemas con los scripts CMS en el servidor. Si PHP Informe de errores
está habilitado más detalles sobre el error se mostrará.

Tiempo de espera de la sesión


Laadministrador se registrará automáticamente si la sesión está inactiva (basado en el tiempo de espera
especificado).

Base de datos MySQL


Por favor, lea base de datos CMS para obtener más detalles.

Base de datos
Especifica el nombre de base de datos MySQL.

Contraseña
Especifica la contraseña de MySQL.

Servidor
Especificael servidor de base de datos MySQL.

MesaNombre
Especifica el nombre de la tabla de prefijo MySQL. Las tablas requeridas se crean automáticamente en
la base de datos especificada.

UsuarioNombre
Especifica el nombre de usuario de MySQL.

200
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Editor
En esta sección puede especificar qué editor se usará para editar el contenido en línea.
WYSIWYGWeb Builder es compatible con varios editores populares como CKEditor, TinyMCE y
CLEditor. También cuenta con un sencillo editor incorporado.

Nota:
Debido a las restricciones de licencia no se nos permite distribuir algunos de estos editores con
WYSIWYG Web Builder por lo que tendrá que instalar manualmente en el ordenador antes de usted será
capaz de utilizarlas! Sin embargo, una vez instalado en el equipo, WWB se hará cargo de la publicación y
configuración de los editores.

EditorAltura
Especifica la altura del editor.

EditorTipo
Especifica el tipo de editor. El objeto CMS Administrador ha incorporado soporte para los siguientes
editores:
 TextArea
Editor de texto plano estándar. Ninguna especial.
 WWB Editor
Un editor de línea simple de texto WYSIWYG creado por el equipo de WYSIWYG Web Builder.
Soporta formato de texto básico y tiene la barra de herramientas configurable.
 CL Editor
CLEditor es un plugin de jQuery de código abierto que proporciona un peso ligero, con todas
las funciones, cruz
navegador, extensible,Editor WYSIWYG
HTML.
http://premiumsoftware.net/cleditor
 TinyMCE (versión jQuery)
TinyMCEes una plataforma web independiente con sede control de editor HTML
WYSIWYG Javascript liberado como código abierto bajo licencia LGPL por Moxiecode
Systems AB. http://www.tinymce.com/
 CK Editor
CKEditores un editor de texto que se utilizará dentro de páginas web. Es un editor WYSIWYG,
lo que significa que
el texto que se está editando en lo que parece lo más similar posible a los resultados que
tienen los usuarios al publicar la misma. Reúne a las características comunes de edición web
que se encuentran en aplicaciones de edición de escritorio como Microsoft Word y OpenOffice.
http://ckeditor.com/

Descargo de responsabilidad:
Aunque hemos añadido soporte para los editores en línea de terceros, no lo hacemos y no podemos
dar apoyo en su funcionalidad. La mayoría de los editores en línea hacen uso de la funcionalidad de
edición HTML incorporado del navegador, por lo que puede observar un comportamiento diferente
entre los navegadores. Desafortunadamente no tenemos absolutamente ningún control sobre eso.
Hemos descubierto que Internet Explorer tiene actualmente la implementación más estable de la
201
WYSIWYG Web Builder 10 Pablo
edición en línea. SoftwareSoluciones

202
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Laeditores deben instalarse en la carpeta Mis documentos \ WYSIWYG Web Builder \ system \ cms
carpeta.

Cada editor tiene su propia carpeta:


Mis \ WYSIWYG Web Builder \ system Documentos \ cms \
CKEditor Mis documentos \ WYSIWYG Web Builder system \ \
cms \ cleditor Mis documentos \ WYSIWYG Web Builder
system \ \ cms \ tinymce Mis documentos \ WYSIWYG Web
Builder system \ \ cms \ wwbeditor

EditorAjustes
Especifica la configuración del editor adicionales.

La mayoría de los editorestiene muchas opciones de configuración. Para mantener esta solución lo
más genérico posible hemos añadido esta opción para que pueda afinar el editor si lo desea.
Consultarla documentación del editor específico para más detalles.

He aquíun ejemplo para el Editor de WWB que le permite modificar la barra de


herramientas. Para la barra de herramientas completa, puede utilizar los
siguientes valores:

botones:
{
"Deshacer": false,
"Rehacer": false,
'Negrita': true,
"cursiva": true,
"subrayado": true,
"tachado": True,
"justifyleft": true,
"justifycenter": true,
"justifyright": true,
"justifyfull": true,
'Insertorderedlist ": true,"
insertunorderedlist ": true," guión ":
true,
'Outdent ": true,
'CreateLink ": true,"
desvincular ": true,"
insertimage': True,
'Inserthorizontalrule ": false,
"Corte": false,
"Copia": false,
"Pegar": false, "color
de primer plano": true,
"hilitecolor": true,
"br": true,
"formatblock": true,
"fontname": true,
"tamaño del texto":
true
}

200
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

O para una barra de herramientas básicas que puede utilizar:


botones:
{
"Deshacer": false,
"Rehacer": false,
'Negrita': true,
"Cursiva": true,
"subrayado": true,
"tachado": True,
"justifyleft": false,
"justifycenter": false,
"justifyright": false,
"justifyfull": false,
"insertorderedlist":
false,
'Insertunorderedlist ": false," guión
": false,
'Outdent ": false,"
CreateLink ": false,"
desvincular ": False,
"insertimage": false,
'Inserthorizontalrule ": false,
"Corte": false,
"Copia": false,
"Pegar": false, "color
de primer plano": true,
"hilitecolor": true,
"br": true,
"formatblock": true,
"fontname": true,
"tamaño del texto":
true
}

He aquíotro ejemplo para tinymce. Este código permite que el "tema avanzado:
tema : "Avanzado"

y este ejemplo se habilita varios plugins:


tema : "Avanzado",
plugins:
"PageBreak, estilo, capa, de mesa, de ahorrar, advhr, advimage, advlink, emociones,
ieSpell, inlinepopups, i
nsertdatetime, vista previa, medios de comunicación, searchreplace, imprimir,
contextual, la pasta, la direccionalidad, een fullscr, no editable, visualchars, de no
separación, xhtmlxtras, plantilla"

Opciones múltiples deben estar separados por comas (el último elemento no tiene una coma al final!):
option1 : "Valor_cadena",
opcion2: true,
option3 : Numeric_value

Publicararchivos del editor


Especifica si desea publicar los archivos del editor.
Si esta opción está activada, WWB se publican / subir todos los archivos desde el editor de su sitio
web. Tenga en cuenta que algún editor de utilizar una gran cantidad de archivos, de manera que esto
puede tomar un tiempo.
En general se habilita esta opción la primera vez que se publicó su sitio web y después de que la
inhabilita para que los archivos se publicarán el segundo tiempo.
Si usted es un usuario avanzado, también puede subir el editor de forma manual mediante el uso de su
cliente favorito de FTP.

201
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Cómo añadir una nueva página?


1. Acceda a la sección de administración en línea. O bien utilizar el AdminPassword o inicia sesión
utilizando una
nombre de usuario / contraseña de las herramientas de acceso (en ese caso usted debe iniciar sesión
utilizando el formulario de inicio de sesión).
2. Añadir una nueva página haciendo clic en la opción 'Nueva página'.
3. En el campo Nombre, escriba el nombre de la página. Este nombre aparecerá en el menú de la CMS.
4. LaContenidocampocontiene el contenido de la página. Si ha configurado uno de los editores te va
ver a un editor de lo-que-ve-es-lo-que-hay. De lo contrario, verá el ingreso de texto estándar que le
permite ya sea entrar en texto plano o HTML.
5. LaURL externacampo puede utilizarse para especificar un enlace a una página externa. Este campo
debe vaciar de páginas estándar! Ver "Cómo incluir páginas externas" para más detalles.
6. LaMás datoscampose puede utilizar para asignar datos extra para una página y que sea parte de
la disposición. Ver "Cómo asignar datos extra y lo mostrará en la página? para más detalles.
7. Visibleespecifica sila página se debe mostrar en el menú de la CMS.
8. Haga clic enGuardarpara guardar la nueva página ..

Cómo incluir páginas externas en el CMS?


1. Añadir una nueva página haciendo clic en la opción 'Nueva página' en el Administrador.
2. Darla nueva página de un nombre, por ejemplo, "página externa '.
3. Deje el área de contenido vacío.
4. Escriba la dirección URL de la página externa en el campo URL. Esto puede ser ya sea una página
externa:
http://www.wysiywgwebbuilder.com/ o una página interna: ./internalpage.html

Cómo asignar datos extra y lo mostrará en la página?


Ustedpuede asignar datos adicionales a una página y que sea parte de la disposición.
Mientras que en la página de modo editor del administrador se dará cuenta el campo "datos
adicionales", aquí se puede escribir un texto como un lema que se aplica a la página.
En su diseño de página a continuación, puede utilizar el objeto etiqueta CMS mostrar este texto en
cualquier parte de la disposición mediante la variable $ cms_extra_data.

CMS Plug-ins
Plug-inspuede agregar nuevos comandos al menú de plug-in (como el Administrador de usuarios y
Administrador de archivos). O añadir nuevas funcionalidades a la página. Por ejemplo, los 'Comentarios'
plug-in añade la capacidad de los usuarios para enviar comentarios en una página.

Plug-inspara el CMS se almacenan en la carpeta


Mis documentos \ WYSIWYG Web Builder \ system \ plugins \
Avanzadolos usuarios pueden modificar los plug-ins estándar para adaptarse a sus necesidades o crear
nuevos plug-ins. Hemos creado algunos plug-ins para demostrar la funcionalidad nueva y vamos a
mejorar en futuras versiones si los usuarios encuentran útiles.

He aquíuna lista de los plug-ins que están al día disponible. Pueden ser activadas a través de la
propiedad 'plugins' del objeto CMS Administrador. Plug-ins habilitados serán subidos al servidor y se
colocan en una carpeta secundaria (plugins) de la carpeta actual.
Ustedpuede activar / desactivar los plug-ins en línea con el plug-in gerente o cambiando el nombre del
nombre de la carpeta (insertar un guión bajo delante del nombre de la carpeta. Por ejemplo cambiar el
nombre de administrador de archivos para _filemanager). O simplemente eliminar toda la carpeta del
servidor.

Importante:
Sólo publicar los plug-ins que realmente necesita porque se cargarán todos los plug-ins / procesada por
todas las páginas, incluso si no están habilitados para la página. Así que tener demasiados plug-ins en el
servidor puede ralentizar el rendimiento del CMS.

202
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

UsuarioAdministrador de plug-in
Agregar / Editar / Eliminarusuarios en línea. Esto hace posible la gestión de usuarios sin la necesidad de
integrar con herramientas de inicio de sesión de WWB. Añadido usuarios podrán añadir o editar sus
propias páginas.

Comentarios plug-in
Añade la posibilidad de publicar comentarios en una página.

Discusión plug-in
LaDiscusión plug-in le permite agregar comentarios funcionalidad de la página.
Usuariospuedo comentar sobre el contenido de la página y otros usuarios podrán responder al
comentario para comenzar una discusión.

Descargas plug-in
Automáticamentecrea una lista de enlaces de archivos de una carpeta.

FAQ plug-in
Crearun (FAQ) sencillas preguntas frecuentes.

Contraseña plug-in
Proteja la página CMS con una contraseña. Esto puede ser configurado por página y cada página puede
tener su propia contraseña.

ExpedienteAdministrador de plug-in
Implementosun administrador de archivos de base para subir archivos a la CMS.

ExpedientePlug-in Manager Plus


Una versión "plus" del Administrador de archivos. Puede ser utilizado para cargar, renombrar y
eliminar archivos y carpetas. Sólo para usuarios avanzados!

Formulario de plug-in
Dinamicamentecrear formularios en línea. Soporta validación básica forma (en función del tipo de
entrada seleccionada) y reCAPTCHA. Los datos presentados se pueden enviar por correo electrónico y
/ o almacenan en una base de datos y exportar a CSV después.

Libro de visitas plug-in


Básicolibro de visitas que se puede integrar en el CMS.

Lista de correo plug-in


Recogery administrar las direcciones de correo electrónico en una lista de correo. Los usuarios
pueden suscribirse a la lista de correo mediante la presentación de su correo electrónico en el
formulario estándar. Un correo electrónico de confirmación se envía a verificar la dirección de
correo electrónico. El administrador puede enviar mensajes a los usuarios suscritos.

Álbum de fotos plug-in


LaAlbum de fotos plug-in es una solución básica álbum de fotos online para el CMS. Puede mostrar
imágenes de una carpeta en el servidor.

Presentación plug-in
LaSlide Show plug-in añade una presentación de diapositivas a la página de la CMS.

Plug-inGerente
El plug-ingerente se puede utilizar para activar / desactivar la CMS plug-ins en línea.

Encuesta plug-in
Un plug-in sencilla encuesta.

Dígale a un amigo plug-in


203
WYSIWYG Web Builder 10 Pablo
Añade una forma decirle a un amigo básica a la página de la CMS. SoftwareSoluciones

204
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Notas sobre los plug-ins:


Cada plug-in generará automáticamente una o más tablas de bases de datos en el servidor MySQL! Las
tablas no se eliminarán cuando se quita el plug-in!

Latablas generadas contienen la configuración de plug-in y otros datos (por ejemplo, el libro de visitas
plug-in almacenar mensajes voluntad).
Por lo que sólo debería instalar los plug-ins que realmente necesita de lo contrario va a terminar con
un montón de (utilizados) tablas de la base.

205
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CMS Label
LaCMS objeto etiqueta debe estar en la misma página que el objeto CMS View!
Este objetose puede utilizar para mostrar el título de la página actual, la fecha de creación, autor,
páginas vistas, etc en cualquier parte de la página. Es un objeto independiente para que pueda
posicionar en forma individual de la vista de objetos de la CMS, por ejemplo, como un encabezado o
barra lateral.

General
Texto
Especifica el texto sea exhibición en la etiqueta. Las siguientes variables están disponibles:

 $ cms_views
El númerode veces que la página ha sido vista.
 $ Cms_name
Lanombre de la página.
 $ Cms_created_by
Lanombre del creador de la página.
 $ Cms_create_date
Muestrala fecha de creación de la página.
 $ Cms_last_update_date
Muestrala fecha en que la página fue modificada por última vez.
 $ Cms_extra_data
Muestracampo de los "datos adicionales" de la página, que se puede asignar en la
herramienta de administrar.

Estosvariables que serán reemplazados por los datos reales de la base de datos de CMS y se relacionan
directamente con las páginas que se muestran actualmente en el interior del CMS View.
Tenga en cuenta que las variables se pueden mezclar con el texto estándar, por lo que, por ejemplo, se
puede utilizar:
Estepáginas fue modificada por última $ cms_last_update_date por $ cms_created_by

Alineación
Especifica la alineación horizontal del texto.

Estilo
En esta sección se puede modificar la apariencia del objeto. Para más detalles sobre el estilo objeto, por
favor
leer Style.

206
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CMS Menu
LaCMS objeto Menú debe estar en la misma página que el objeto CMS View!
Este objetose puede utilizar para navegar entre las páginas que se muestran dentro del objeto CMS
View. El menú CMS tiene muchas opciones de estilo. Los elementos del menú están impulsados por la
base de datos CMS, por lo que no tiene que configurar los enlaces de forma manual.

General
Disposiciónmodo
Lamenú puede ser vertical u horizontal.

Tamaño del botón


Especifica el si el tamaño del botón es fijo o variable.
Si fija se selecciona, se puede especificar la anchura / altura de los botones a través de la anchura y la
altura
propiedades. Sivariable se selecciona entonces el tamaño del botón depende del tamaño del texto en
combinación con la configuración de relleno.

Espaciamiento
Esteconfiguración especifica el espacio entre 2 botones.

UsoEnlaces SEO friendly


Si habilita esta opción en el menú utilizará SEO (Search Engine Optimization) lazos de amistad en la
navegación:
http://www.website.com/cms.php?page=my-seo-friendly-page-name en
lugarde
http://www.website.com/cms.php?page=8

Tenga en cuenta que los nombres de los enlaces se basan en el título de la página tal como se
especifica en el CMS Administrador. Por lo que debe especificar un título en el administrador antes de
esta opción se puede utilizar.

Estilo
En esta sección se puede modificar la apariencia de los elementos de menú. Para más detalles sobre el
estilo de objeto
por favorleer Style.

Estilo Hover
En esta sección se puede modificar la apariencia de los elementos del menú cuando el ratón pasa
sobre el objeto.

207
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CMS
Buscar
LaCMS Buscar objeto debe estar en la misma página que el objeto CMS
View!

Este objetose puede utilizar para buscar contenido en línea. CMS de WYSIWYG Web Builder añadirá
automáticamente las palabras de búsqueda al índice de búsqueda cada vez que una página se crea o
actualiza.
Latabla de índice de búsqueda realiza un seguimiento de todas las palabras únicas dentro del sistema
y almacena referencias a las páginas que contengan esas palabras para resultados rápidos. Los
resultados de la consulta de búsqueda se mostrarán dentro de la vista de objetos de la CMS.

General
Indirect
atexto
Lapista (o 'cue') texto se visualiza en el interior del campo de búsqueda si no tiene el foco. Cuando el
usuario mueve su enfoque hacia el campo, la etiqueta estará oculta.

Result
ados
Definela aparición del resultado dentro de la vista de objetos de
la CMS.

No hay
resultado
s
Especifica el texto que se mostrará si la consulta de búsqueda no tiene
resultados.

Fue
nte
Especifica la familia de fuentes del texto, como Comic Sans, Times New Roman y Courier
New.

Tamaño
de la
fuente
Especifica el tamaño del
texto.

Color del
texto
Especifica el color del texto.

Color de fondo
Especifica el color de fondo de los
resultados.

Enlace de
color
Especifica el color de los
enlaces.

Acolcha
do
Conjuntosla cantidad de espacio entre los resultados y la
frontera.
208
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CMS Ver
LaCMS Ver objeto es un marcador de posición para el contenido en línea. Esta es la parte más
importante del Sistema de Gestión de Contenidos, porque todo el contenido de la página se mostrará
dentro de esta área.
Vas ala navegación entre páginas utilizando el objeto Menú CMS. El objeto CMS Ver también será
usadopara mostrar el resultado de una consulta de búsqueda de la CMS búsqueda de objetos.
Normalmente su sitio web tendrá un único CMS Ver objeto y no será sólo una página en el
Administrador de páginas que se utiliza para el sistema (o dos, si usted tiene una página separada
para el CMS Admin).

Base de datos
MySQL
Por favor, lea base de datos CMS para
obtener más detalles.

Base de
datos
Especifica el nombre de base de
datos MySQL.

Contrase
ña
Especifica la contraseña de
MySQL.

Servid
or
Especifica el servidor de base de
datos MySQL.

MesaNomb
re
Especifica el nombre de la tabla de prefijo MySQL. Las tablas requeridas se crean automáticamente en
la base de datos especificada.

UsuarioNo
mbre
Especifica el nombre de
usuario de MySQL

General
Modo
Especifica el modo de la vista de la
CMS.
 VariableContenido (por defecto)
Lacontenido de la CMS Ver será controlada por la navegación. El visitante de la página web
decide qué página se muestra (a través del menú CMS). Una página sólo puede contener
un CMS Ver que se establece en 'Variable'!

 FijoContenido
Lacontenido de la vista es fijo y no está controlado por el visitante a través de la navegación.
La vista siempre mostrará la misma página (según lo especificado por la propiedad id página).
Esta opción puede ser útil si desea mostrar un encabezado o pie fijo en el que el contenido se
carga desde la base de datos de CMS. Puede utilizar múltiples "contenido fijo" vistas CMS por
página. Por ejemplo, para un texto de cabecera, pie de página o de otros contenidos.
Desde esta opción requiere que se especifique un (válido) página Identificación, primero debe
209
WYSIWYG Web Builder 10 Pablo
crear el contenido de SoftwareSoluciones
la página en la línea CMS Administrador. Siempre se puede configurar la opción visible de la
página para "oculto". Así que no se mostrará en el menú, pero sólo será utilizada para la vista
fija.

Nota: Puede ver el identificador de página en la sección de administración. Por ejemplo: desplazarse con
el puntero del ratón sobre el enlace "Editar" (o cualquiera de las otras acciones) y anote el identificador
de página en la barra de estado del navegador.

210
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Desbordamiento
Lapropiedad de desbordamiento se puede utilizar para controlar el comportamiento de desbordamiento
de la vista.
 Ninguno
Lacontenido de la vista es totalmente visible. No ocurrirá ningún recorte.
 Oculto
Lacontenido es recortado, pero el navegador no muestra una barra de desplazamiento para
ver el resto de la
contenido.
 Voluta
Lacontenido es recortado, pero el navegador muestra una barra de desplazamiento para ver
el resto del contenido.
 Auto
Si se recorta el contenido, el navegador mostrará una barra de desplazamiento para ver el
resto del contenido.

Usar AJAXpara cargar contenido


Permitir al usuario navegar rápidamente entre páginas sin tener que recargar toda la página! Sólo el
contenido se actualizará. Tenga en cuenta que este utiliza jQuery en el fondo, de modo JavaScript debe
estar habilitado.

Uso del títuloy etiquetas meta de base de datos para la optimización del Search Engine.
Active esta opción para utilizar el título, la descripción y las palabras clave de la base de datos de CMS
(especificado en CMS
Admin) en lugardel título / meta tags configuradas en Propiedades de la página.
Esto haceEs posible optimizar las páginas para SEO, porque ahora cada página tendrá su propio título y
metatags.

Consejo:
Un tutorial para empezar a trabajar con las herramientas de la CMS está disponible en el sitio web:
http://www.wysiwygwebbuilder.com/cms_tools.html

211
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery acordeón
Laobjeto jQuery acordeón lleva el nombre del instrumento musical, en la forma en la expansión de un
área conduce a la contracción de la otra. Típicamente, acordeones se fijan de modo que sólo una de
las áreas es visible al mismo tiempo. Este objetivo se basa en el widget de acordeón de la librería
jQuery UI: http://jquery.com/.

Adiciónobjetos a los paneles del acordeón


Ustedpuede agregar fácilmente los objetos a los paneles de acordeón arrastrándolos en el componente.
Esto funciona de la
misma manera que para capas o formas.
Aser capaz de arrastrar y soltar objetos para el acordeón primero asegúrese de que sea lo
suficientemente grande como para que los objetos se pueden arrastrar en él (el objeto acordeón
deberían ser más grande que el objeto que va a añadir!).
Un borde azul alrededor del panel indicará que el objeto arrastrado se convertirá en parte del acordeón.
Aagregar elementos a otro panel, simplemente haga clic en el encabezado para activarla.

General
En la página General puede agregar, editar y eliminar los paneles.

Nota:
Extracciónun panel también eliminará todos los objetos que forman parte de este panel!

Estilo
Ustedpuede controlar la apariencia del widget de acordeón en propiedades de estilo.
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con
el Theme Manager incorporado o visitando el sitio web
ThemeRoller:http://jqueryui.com/themeroller/.

LaNombre de la fuentey Font propiedades tamaño puede utilizarse la anulación de la fuente por defecto
del tema.

Acolchado
Lapropiedades de relleno controlan el relleno texto de las cabeceras.

Icono Offset
Laampliar offset puede ser con Offset Icono / icono colapso.

Animación
LaPropiedad de animación permite la animación de diapositivas para mostrar y ocultar paneles.

Activaren Mouseover
Activaren Mouseover puede habilitarse para cambiar el panel activo el ratón por encima en lugar de la
estándarclic del ratón.
210
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Completa jQuery Auto


Autocompletar puede sustituir a un cuadro de edición estándar. Permite a los usuarios buscar y
seleccionar de una lista poblada antes de valores a medida que escriba rápidamente. La lista puede
ser ya sea local o desde una ubicación remota (AJAX). El jQuery Autocompletar se basa en el
Widget de Autocompletar de la librería jQuery UI: http://jquery.com/.

General
Fuente de datos
Especifica la fuente para los artículos de automóviles completos.
 Local
Usosun array local como origen de datos. Los artículos se pueden agregar, editar o eliminar
mediante el uso de la
'Añadir',botones "Modificar y Eliminar '.
Remoto
Seleccione esta opción si desea obtener los datos de un origen de datos externo, como una
base de datos. También debe especificar la URL en este caso. Esta opción es sólo para usuarios
avanzados!

Retraso
Laretardo en milisegundos el autocompletado espera después de una combinación de teclas para activar
en sí. A-cero retraso tiene sentido para los datos locales (más sensible), pero puede producir una gran
cantidad de carga de datos a distancia, mientras que es menos sensible.

Min Longitud
Lanúmero mínimo de caracteres que un usuario tiene que escribir antes de que el autocompletado
activa. Cero es útil para los datos locales con unos pocos elementos. Se debe aumentar cuando hay una
gran cantidad de artículos, donde un solo personaje que coincida con unos pocos miles de artículos.

Datos
Si la fuente de datos es local, debe especificar los datos completos de automóviles en esta lista. Utilice
el botón "Importar" para seleccionar de una lista predefinida de artículo o importar los elementos de un
archivo externo en la que cada artículo debe estar en una línea nueva.

URL
Cuando se utiliza una fuente de datos remota, el objeto Autocompletar espera que la página devuelve
datos JSON. Puede ser en la misma máquina o en una diferente (adjunta una JSONP).
La solicitudparámetro "expresión" se agrega a que los detalles URL.More están disponibles en el sitio web
de jQuery:
http://jqueryui.com/demos/autocomplete/

ThemeRollertema
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con
el Theme Manager incorporado o visitando el sitio web
ThemeRoller:http://jqueryui.com/themeroller/.

LaNombre de la fuentey Font propiedades tamaño puede utilizarse la anulación de la fuente por defecto
del tema.

211
WYSIWYG Web Builder 10 Pablo
Estilo SoftwareSoluciones
Aquíusted puede controlar la apariencia de la caja de edición. Consulte la descripción de las
propiedades de edición de caja para obtener más detalles.

212
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Botón jQuery
LaBotón jQuery mejora botón estándar (normal, presentar, reajuste o de anclaje / link) a themable
botones con mouseover y estilos activos adecuada. El botón se puede utilizar como un botón de
enviar en un formulario o como un botón independiente para la navegación. La propiedad tipo botón
determina el comportamiento del botón.

General
Nombre
Nombre del botón.

Valor / Etiqueta
Caption del botón.

Tipo de botón
 Presentar
Cuando se activa, un botón de envío envía un formulario.
 Reajustar
Cuando se activa, un botón de reinicio restablece todos los controles a sus valores iniciales.
 Normal
Normal (Push)botones tienen ningún comportamiento predeterminado. Cada botón puede
tener secuencias de comandos del lado del cliente
asociadocon atributos de los eventos del elemento. Cuando ocurre un evento (por ejemplo, el
usuario pulsa el botón, lo libera, etc.), se activa el script asociado.
 EnlaceBotón
Si se selecciona este tipo botón en el botón actuará como un botón de navegación / link.
Puede especificar las propiedades del vínculo en la página de 'Enlace'.
 Caja
Labotón actuará como una casilla de verificación, para que pueda ser utilizado como un
relacement para la casilla de verificación estándar
elementoen formas.
 RadioBotón
Labotón actúa como un botón de radio, para que pueda ser utilizado como un relacement
para el estándar de radio
elemento de botón en formas. Dé varios botones del mismo nombre para que sean parte de
un grupo.
 DivisiónBotón
Añade un menú para el botón. Cada submenú puede tener su propio enlace.
 Botón Set
Añade la posibilidad de definir múltiples botones para crear un menú de navegación temática.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Prensadola clave de acceso sitúa el foco en el elemento.

Discapacitado
Laopción desactivada desactiva el control de la entrada del usuario.

Índice de fichas
Especifica el índice de tabulación del botón (de forma).

Estilo
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de

213
WYSIWYG Web Builder 10 Pablo
Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editadosSoftwareSoluciones
con el Theme Manager
incorporado o visitando el sitio web ThemeRoller:http://jqueryui.com/themeroller/.

214
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery DatePicker
LajQuery DatePicker ofrece un componente de interfaz de usuario sofisticada y featrure ricas para
introducir las fechas en un formulario. El objeto proporciona un calendario gráfico que aparece si hace
clic dentro del campo de formulario.

LajQuery DatePicker se basa en el Widget DatePicker de la librería jQuery UI:http://jquery.com/


Laapariencia del objeto jQuery DatePicker es personalizable a través ThemeRoller temas.

General
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de
Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con el Theme Manager
incorporado o visitando el sitio web ThemeRoller:http://jqueryui.com/themeroller/.

LaNombre de la fuentey Font propiedades tamaño puede utilizarse la anulación de la fuente por defecto
del tema.

Usofecha corriente
Esta voluntadestablecer automáticamente el valor inicial a la fecha actual.

Fechaformato
Laformato de las fechas analizadas y visualizadas. Para obtener una lista completa de los posibles
formatos de ver el formatDate
función:
http://docs.jquery.com/UI/Datepicker/formatDate

Cambio meses
Especifica si el usuario puede cambiar el mes al seleccionar de una lista desplegable.

Cambio años
Especifica si el usuario puede cambiar el año al seleccionar de una lista desplegable.

Showpanel de botones
Especifica si se debe mostrar el panel de botones.

Las opciones personalizadas (sólo para usuarios avanzados)


LajQuery DatePicker tiene muchas más opciones. El campo de opciones de personalización permite incluir
uno o
másde estas opciones.
Comprobarla documentación de jQuery para más detalles.

Estilo
Aquíusted puede controlar la apariencia de la caja de edición. Consulte la descripción de las propiedades
Editar caja de
másdetalles.
215
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery diálogo
Un diálogo es una ventana flotante que contiene una barra de título y un área de contenido. Puede
arrastrar y soltar objetos para el cuadro de diálogo para que entonces formaba parte de la ventana. El
jQuery diálogo se basa en el Widget de diálogo de la librería jQuery UI:http://jquery.com/
Laapariencia del objeto jQuery diálogo es personalizable a través ThemeRoller temas.

Ustedpuede agregar fácilmente los objetos al diálogo arrastrándolos en el componente. Esto funciona
de la misma manera que para capas o formas.

General
ThemeRollertema
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con
el Theme Manager incorporado o visitando el sitio web
ThemeRoller:http://jqueryui.com/themeroller/.

LaNombre de la fuentey Font propiedades tamaño puede utilizarse la anulación de la fuente por defecto
del tema.

Título
Especifica el título del cuadro de diálogo.

Icono Offset
LaDesplazamiento desde el lado derecho de la cabecera icono "Cerrar" puede ser con Offset Icon.

Ancho
Especifica el ancho del cuadro de diálogo.

Altura
Especifica la altura del diálogo.

Mostrar animación
Especifica el efecto que desea utilizar cuando se abre el cuadro de diálogo.

Ocultaranimación
Especifica el efecto que se utilizará cuando el diálogo se cierra.

216
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Alineación horizontal
Especifica dónde se debe mostrar el cuadro de diálogo: "izquierda",
"centro", "derecho". Seleccione 'Posición absoluta' para utilizar la
posición x actual en el espacio de trabajo.

La alineación vertical
Especifica dónde se debe mostrar el cuadro de diálogo: 'top', 'centro', 'de
abajo'. Seleccione 'Posición absoluta' para utilizar la posición actual y en el
espacio de trabajo.

Modal
Si se activa, el diálogo tendrá comportamiento modal; otros elementos de la página se desactivarán
(es decir, no se puede interactuar con). Diálogos modales crean una capa debajo del cuadro de
diálogo, pero por encima de otros elementos de la página.

Redimensionable
Si se activa, el diálogo será de tamaño variable.

Arrastrable
Si se activa, el diálogo será posible arrastrar por la barra de título.

Cercaen fuga
Especifica si el diálogo debería cerrar cuando está seleccionado y el usuario presiona la tecla de escape
(ESC).

Mostrar diálogoautomáticamente
Cuando esta opción está activada, el diálogo se abrirá automáticamente cuando se llama diálogo. De lo
contrario,
quedarseocultos hasta .dialog ("abierta") se llama en ella.

Q: ¿Cómo puedo mostrar u ocultar el diálogo a través de JavaScript?


R: Es muy fácil de mostrar u ocultar el diálogo de JavaScript.
Añadir el widget de diálogo a la página.
Tome nota de la ID. El valor por defecto es 'diálogo'.
Añadir una imagen, forma o otra obejct con el apoyo de eventos a la página.
Abra las propiedades y seleccione la pestaña
"Eventos". Haga clic en "Añadir" para insertar un
nuevo evento.
Seleccione 'Evento': OnClick y establecer la "Acción" para la
función JavaScript. Para mostrar el diálogo de entrar en esta
JavaScript:
$ ('# Diálogo') diálogo ("abierta").;
dondediálogo es el ID del diálogo.

Aocultar el diálogo de entrar en esta JavaScript:


$ ('# Diálogo') diálogo ('cerca.');

... O simplemente puede usar el Show y Hide acciones de eventos!

Avanzado
La avanzadaLa página contiene una serie de propiedades para ajustar con precisión el aspecto del diálogo.
Por ejemplo
se puede controlar el relleno del título.

UstedTambién puede agregar una o dos botones para el diálogo. Para activar un botón da el
Button1Text y / o Button2Text un valor. Button1Function / Button2Function especifica la función
(JavaScript) para el botón.
Si no se especifica una función del botón actuará como un botón de cierre.

217
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Menu
Temable(Multinivel) menú con mouse y teclado interacciones para la navegación.
LajQuery objeto Menu se basa en el menú de widgets de la librería jQuery UI:http://jquery.com/.

General
Seleccione Agregar para agregar un nuevo tema para el menú.
Seleccione Editar para modificar las propiedades de un elemento existente.
Aeliminar un elemento desde el menú seleccione Quitar.

Subir
Movimientoel elemento seleccionado hacia arriba entre sus hermanos.

Bajar
Movimientoel elemento seleccionado hacia abajo entre sus hermanos.

Mover a la izquierda
Hacer el elemento seleccionado un hermano de su padre.

Mover a la derecha
Hacer el elemento seleccionado al hijo de su hermano precedente.

Disposición
El MenúBar puede ser vertical u horizontal.

Orientación
Identificala posición de los submenús en relación con el elemento de menú principal asociado.

Sincronizar con SitioGerente


Cuando esta opción está activada, Web Builder sincroniza automáticamente los artículos con el contenido
de la
Administrador del Portal.
Así que si por ejemplo se agrega una nueva página, a continuación, un elemento se agrega
automáticamente a la barra de menú. o si cambia el nombre de una página también se
actualizará el texto del artículo.

Objetivo
Especifica la ventana de destino de los enlaces cuando 'Sincronizar con el Administrador de Sitio' se activa
..

Estilo
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de
Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con el Theme Manager
incorporado.

El modo de menús
En el modo "Standard menú 'el menú se mostrará en la misma posición que en el modo de diseño.
En el modo "Menú contextual" en el menú se comportará como un menú contextual. El menú se
mostrará en el botón derecho en la posición actual del ratón.

218
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Tabs
Tabsse puede utilizar para romper el contenido en múltiples secciones que se pueden intercambiar
para ahorrar espacio, al igual que el acordeón. El jQuery Tabs se basa en el Widget Tabs de la librería
jQuery UI:http://jquery.com/

Ustedpuede agregar fácilmente los objetos a los paneles de pestañas arrastrándolas en el


componente. Esto funciona de la misma manera que para capas o formas. Para añadir elementos a
otro panel simplemente haga clic en el encabezado de la ficha para activarla.

General
En la página General puede agregar, editar y eliminar páginas de ficha.

Estilo
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con
el Theme Manager incorporado o visitando el sitio web
ThemeRoller:http://jqueryui.com/themeroller/.
LaNombre de la fuentey Font propiedades tamaño puede utilizarse la anulación de la fuente por defecto
del tema.

Ancho de la lengüeta
LengüetaAncho Especifica la anchura de las pestañas. Utilice "0" para un tamaño de la pestaña variable.

Sortable
Si la propiedad Ordenable está activada, el usuario puede ordenar las fichas dinámicamente usando
arrastrar y soltar, un lugar fresco
característicade jQuery;)

ActivarEn Mouseover
Active esta opción para cambiar la pestaña activa el ratón por encima en vez del clic de ratón estándar.

Usoefecto de transición de fundido


LaUso fade propiedad efecto de transición permite la animación de fundido para ocultar y mostrar los
paneles de pestañas.

Collapsable
Habilitar Collapsable para permitir una ficha ya seleccionado para convertirse en no seleccionada vez más
a la nueva selección.

Permitirrotación automática a través de pestañas


Estepermite la rotación automática a través de pestañas con duración configurable.

Continuar la rotación después de una ficha ha sido seleccionado por un usuario.


Especificadosi continuar o no con la rotación después de una ficha ha sido seleccionado por un usuario.

Duración
Lacantidad de tiempo en milisegundos hasta la siguiente pestaña en el ciclo se activa.

219
WYSIWYG Web Builder 10 Pablo
Avanzado SoftwareSoluciones
La avanzadaLa página contiene una serie de propiedades para ajustar con precisión el aspecto del
diálogo. Por ejemplo, usted puede controlar el relleno del título.

220
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Progressbar
Labarra de progreso está diseñado para simplemente mostrar el% actual completa para un proceso. Por
ejemplo, como parte de un script de carga personalizada o para mostrar el estado de una encuesta en
línea.
Larango de la progressbar es de 0 a 100.

Nota:
El valor deprogressbar se actualiza por lo general a través de JavaScript. No hace nada por sí mismo!

General
Valor inicial
Especifica el valor inicial de la progressbar. Normalmente esto es '0'.

Estilo
Ustedpuede controlar la apariencia del widget Tab en propiedades de estilo.

ThemeRollertema
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de
Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con el Theme Manager
incorporado o visitando el sitio web ThemeRoller:http://jqueryui.com/themeroller/.

Ejemplo
Aquíes un ejemplo de cómo actualizar el valor de la progressbar través de JavaScript.

1. Añadir el widget progressbar a su página.


2. Tome nota de la ID. El valor por defecto es 'jQueryProgressbar1'.
3. Añadir una imagen, figura u otro objeto con el apoyo de eventos a la página.
4. Abiertolas propiedades y seleccionar la pestaña "Eventos".
5. Haga clic en'Añadir' para insertar un nuevo evento.
6. Seleccione 'Evento': OnClick y establecer la "Acción" para la

función JavaScript. Para actualizar el valor (0 - 100) de la

progressbar el siguiente código

$ ('# JQueryProgressbar1'). ('Opción' progressbar, "valor",75);

donde jQueryProgressbar1 es el ID de la progressbar.

221
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery deslizador
Lawidget de control deslizante representa un valor que se selecciona arrastrando el pulgar por el fondo.
Esun widget simple, compuesto por dos elementos principales: el mango deslizador (también llamado
el pulgar) y el fondo deslizante.

Nota:
El valor deprogressbar se actualiza por lo general a través de JavaScript. No hace nada por sí mismo!

General
Orientación
Especifica si el control deslizante tiene el min a la izquierda, el máximo a la derecha (= horizontal) o el
min en la parte inferior, el máximo en la parte superior (= vertical).

Animación
Especifica si se debe deslizar manejar sin problemas cuando el usuario haga clic manejar fuera de la
barra.

Valor inicial
Especifica el valor inicial de la barra deslizante.

MínimoValor
Especifica el valor mínimo de la barra deslizante.

MáximoValor
Especifica el valor máximo de la barra deslizante.

Alcance
Cambiosla aparición de la corredera. Una gama min va desde el valor mínimo en el mango. Un rango
máximo va desde el mango hasta el valor máximo.

Alto / Ancho
Especifica la altura (si la orientación es horizontal) o la anchura (si la orientación es vertical) del fondo
deslizante.

Maneje Ancho
Especifica la anchura del mango deslizador.

ManejarAltura
Especifica la altura del mango deslizador.

Estilo
Ustedpuede controlar la apariencia del widget Tab en propiedades de estilo.

ThemeRollertema
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con
el Theme Manager incorporado o visitando el sitio web
ThemeRoller:http://jqueryui.com/themeroller/.

222
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Eventos
Eventosse puede utilizar para actualizar otros partes de la página basándose en el estado actual del
control deslizante.

Lasiguientes eventos son compatibles:


slidestart
Esteevento se activa cuando el usuario comienza a deslizarse.

diapositiva
Esteevento se dispara en cada movimiento del ratón
durante la presentación. Utilice ui.value para obtener el
valor del mango actual.

slidechange
Esteevento se dispara en la parada de diapositivas, o si el valor se cambia mediante programación (por el
método de valor).

slidestop
Esteevento se activa cuando el usuario deja de deslizamiento.

acción
Especifica la acción a tomar cuando se activa el evento.
 Valor de ajuste,establece el valor de un elemento de formulario (por ejemplo editbox, botón o
textaera)
 Costumbrecódigo. Aquí usted puede implementar su propio código que se inserta dentro de
la función de devolución de llamada.

función (evento, ui)


{
// Se insertará el código personalizado aquí ...
});

Utilice ui.value para obtener el valor de la manija.

Ejemplo:
$ ("# Editbox1") val (ui.value).;

Ejemplo
Aquíes un ejemplo de cómo actualizar el valor de un cuadro de edición.

1. Añadir un cuadro de edición a la página.


2. Tome nota de la ID. El valor por defecto es 'Editbox1'.
3. Añadir el widget slider a su página.
4. Abiertolas propiedades del control deslizante y seleccione la pestaña "Eventos".
5. Haga clic en'Añadir' para insertar un nuevo evento.
6. Seleccione 'Evento': slidechange y establecer la "Acción" al valor.
7. En Target seleccionar el cuadro de edición ('Editbox1').

220
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Spinner
Mejorar una entrada de texto para introducir valores numéricos, con botones arriba / abajo y flecha
la entrega de llaves. Tenga en cuenta que este objeto se utiliza normalmente en una forma como un
reemplazo para el cuadro de edición estándar.

Laobjeto jQuery Spinner se basa en el widget del hilandero de la librería jQuery UI:http://jquery.com/

General
Nombre
Introduzca un identificador para el campo.

Valor inicial
Valor que es inicialmente visualización en el campo.

MínimoValor
Lavalor mínimo permitido.

MáximoValor
Lavalor máximo permitido.

Pasos
Latamaño del paso a tomar al girar por medio de botones.

Incremental
Controla el número de pasos dados cuando mantiene pulsado un botón de la vuelta.
Cuando se establece en true, el delta del escalonamiento aumentará cuando se gira incesantemente.
Cuando se establece en false, todas las medidas son iguales (como se define por la opción de paso).

Discapacitado
Laopción desactivada desactiva el control de la entrada del
usuario. Controles con discapacidad no reciben atención.
Discapacitadocontroles se omiten en navegación con tabulador.
Lavalor de los controles con discapacidad no se presentará con el formulario.

AccesoClave
Esteatributo asigna una llave de acceso al objeto. Una tecla de acceso es un único carácter.
Al pulsar la tecla de acceso el foco se dirige al elemento.

Índice de fichas
Todos los elementos (excepto los elementos ocultos) en una forma son parte del orden de tabulación del
formulario.
Cuando el usuario presiona la tecla Tab, el navegador se desplaza el foco de entrada de elemento a
elemento en orden los elementos aparecen en el código HTML.
Sin embargo,a veces desea que el orden de tabulación a fluir un poco diferente. En ese caso, puede
numerar los campos utilizando el atributo tabindex.
En generalla primera tabindex empezar con valor "1". Para excluir un elemento de la orden de
tabulación, establezca el valor de tabindex a 0. En ese caso, el elemento se omite cuando las fichas de
los usuarios de todo el formulario.

Título
Especifica la información sobre herramientas que muestra el navegador.

221
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Tooltips
Personalizable,tooltips temable, reemplazando información sobre herramientas nativas. La descripción
soporta el formato de texto y se puede asignar a cualquier objeto WWB.
Laobjeto jQuery Tooltip se basa en el Widget Tooltip de la librería jQuery UI:http://jquery.com

General
Object ID
Especifica el ID del objeto asociado. La punta de la herramienta se mostrará cuando el usuario se
desplaza sobre el objeto especificado.

Animación
Especifica la animación que se utiliza para mostrar / ocultar la información sobre herramientas: Ninguno,
Fade o diapositivas.

Realizar el seguimiento del ratón


Especifica si la información de herramienta debe rastrear (seguir) el ratón.

Contenido
Especifica el contexto (texto) de la información sobre herramientas. El texto puede ser formateado
utilizando las herramientas de estilo.

Posición
Identificala posición de la descripción en relación con el objeto principal asociado.

Estilo
Lamira y la sensación de este objeto se define por la página del tema. Usted puede establecer el tema
para el conjunto de
Página Propiedades-> Style-> Tema. Los temas pueden ser creados / editados con el Theme Manager
incorporado.

222
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile
jQueryMobile es un marco para la creación de aplicaciones web para móviles. jQuery Mobile funciona
en todos los teléfonos inteligentes y las tabletas populares. WYSIWYG Web Builder utiliza jQuery Mobile
como base para (de respuesta) páginas web para móviles. Cuando se crea una página móvil, tendrá un
conjunto dedicado de herramientas para el diseño web móvil. Y aunque la mayoría de los objetos tienen
los mismos nombres, la mayoría de ellos se han optimizado para el diseño web móvil y por lo tanto se
comportará ligeramente diferente que en un diseño estándar.

Una de las principales diferencias es el estilo de los objetos. A diferencia de una página estándar, en
jQuery móvil todos los objetos están decoradas por temas y muestras.

Tema
Latema de jQuery Mobile proporciona el marco CSS necesario para proporcionar una consistente y
táctil mirada amable y sentir por sus widgets a través de plataformas.
Es compatible con muchas de las propiedades de CSS3, como las esquinas redondeadas, sombras y
gradientes. También prodives un conjunto de iconos de peso ligero, que se puede utilizar en objetos
como botones, menús, etc.
Ustedpuede seleccionar el tema de la página en las propiedades de la página.

Muestras
Una muestra es uno de varios esquemas de color proporcionados por su tema. Un tema puede soportar
hasta 26
muestras,cada uno identificado con una sola letra (A, B, C, D, etc.).
Laincorporado jQuery Mobile Tema Manager le permite crear cualquier número de muestras para un
encargo
tema.

objetos jQuery Mobile


Lasiguientes objetos sólo están disponibles para las páginas web para móviles.
 Plegable
 Interruptor de tirón
 Diseño de cuadrícula
 Listview
 AnidadoMenú
 Panel
 Menú emergente
 SensibleMesa
 Deslizador
 Tabs

Los objetos estándar optimizadaspara jQuery Mobile


Lasiguientes objetos estándar se han optimizado para jQuery Mobile. Su aspecto es también
afectadopor el tema de jQuery Mobile.
 Botón
 Casilla (soporta varios elementos)
 Combobox
 Editbox
 Ir Menu
 Iniciar Sesión
 Cerrar sesión
 NavegaciónBar
 Noticias RSS Ticker
 Radio Button (soporta varios elementos)
 Site Search
 TextoZona
 TextoMenú
223
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Comunes propiedades jQuery Mobile


Lasiguientes propiedades están disponibles en la mayoría de los objetos jQuery Mobile.

Esquinas
Aplicael tema de la frontera de radio si se establece en true.

CompletoAncho
Especifica si el objeto debe utilizar todo el ancho de la página. Si esta opción se establece en false
entonces el
objeto voluntadtener una anchura "fijo", que suele ser el total del texto, relleno y el margen del objeto.

Recuadro
Al establecer esta opción en false el elemento tendrá un aspecto ancho completo sin esquinas.

Mini
Conjuntosel tamaño del elemento a una mini versión más compacta,.

Swatch
Por defecto, la aparición de un objeto jQuery Mobile es determinada por la página del tema (tal como
se establece en las propiedades de la página). Pero cada tema puede tener hasta 26 variaciones
(Muestras).
En la propiedad Swatch puede seleccionar una de esas variaciones. Tenga en cuenta que usted
puede cambiar el estilo de temas y muestras en el Tema Mobile Manager.

UsoEl campo de Contenedores


Especifica si se debe envolver el objeto en un contenedor de campo para ayudar a agrupar visualmente
en una forma más larga. El recipiente se alinea la etiqueta y la forma controla correctamente y agrega
un borde fino para actuar como un separador de campo. El diseño de la etiqueta y de control se define
automáticamente en función de la anchura del dispositivo. Si la anchura del dispositivo es pequeño,
entonces la etiqueta se coloca en la parte superior del control de formulario. Si no, entonces la etiqueta
se coloca a la izquierda en una disposición 2-columna.

Iconos
jQueryMobile ofrece una serie de iconos que pueden ser utilizados por los objetos que los apoyan
como botones, listviews, etc. plegable

224
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

225
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile plegable


LaPlegable objeto se basa en el widget plegable del marco jQuery Mobile:
http://api.jquerymobile.com/collapsible/

Plegable crea unas cuadras plegables de contenido. El objeto plegable puede tener varios paneles que
son contenedores para otros objetos. Estos paneles se pueden expandir o contraer haciendo clic en el
icono de encabezado.

Icono Colapsar
Conjuntosel icono de la cabecera del contenedor plegable cuando está en un estado colapsado.

Icono Ampliado
Conjuntosel icono de la cabecera del contenedor plegable cuando está en un estado expandido.

jQuery Mobile interruptor basculante


LaObjeto de conmutación tirón se basa en el widget Interruptor de tirón del framework jQuery Mobile:
http://api.jquerymobile.com/flipswitch/

El interruptor de la moneda esuna mirada alternativa a la casilla de verificación. Se puede activar


mediante un clic o un golpe.

jQuery Mobile deslizante


LaObjeto deslizante se basa en el widget Slider del framework jQuery Mobile:
http://api.jquerymobile.com/slider/

Deslizadores una mirada alternativa a la caja de edición para los valores numéricos. Especifique
mínimo y máximo valores de atributo para establecer el alcance del control deslizante. Si desea
limitar la entrada a incrementos específicos, a continuación, establezca el atributo paso.

226
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile Diseño de cuadrícula


LaObjeto Grid Layout se basa en la rejilla sensible desde el framework jQuery Mobile:
http://api.jquerymobile.com/responsive-grid/

Ustedpuede utilizar una cuadrícula de diseño para situar los objetos junto a la otra en su página web.
La cuadrícula de diseño crea celdas de la columna con la misma anchura. Por ejemplo, si la cuadrícula
de diseño tiene dos columnas luego ambos serán el 50% del ancho de la página. La rejilla será
siempre utiliza todo el ancho de la página, y puede ser tener hasta 5 columnas, aunque no se
recomienda el uso de demasiadas columnas para pantallas más pequeñas.

Aañadir un objeto a la cuadrícula de diseño sólo tiene que arrastrar y soltar en una celda. Una célula
puede tener múltiples objetos que serán alineación según la alineación especificada (izquierda, centro,
derecha).

Lacuadrícula de diseño es sensible. Esto significa que en las pantallas más pequeñas la disposición
canjeará a disposición apilada.

jQuery Mobile Tabs


En Las pestañas objeto se basa en el widget aquí desde el framework jQuery Mobile:
http://api.jquerymobile.com/tabs/

Tabses una sola área de contenido con múltiples paneles, cada uno asociado a una cabecera en una lista.
Ustedpuede agregar fácilmente los objetos a los paneles de la pestaña arrastrándolos en el
componente. Esto funciona de la misma manera que para capas o formas. Para añadir elementos a otro
panel, haga clic en el / pestaña cabecera para activarla.

227
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile Pie de página


LaObjeto de pie de página se basa en el widget Barra de herramientas en el framework jQuery Mobile:
http://api.jquerymobile.com/toolbar/Un pie de página suele ser el último elemento dentro de cada
página móvil y que por lo general contiene una combinación de botones (navegación) y texto.

Posición fija
Hace que el pie de página para flotar sobre el contenido a través de posición CSS.

CompletoPantalla
Establece siel pie de página debe ser ocultado por completo cuando se toca la página.

Encabezamientoetiqueta
Especifica la etiqueta de cabecera (H1 ... H6) que se utilizará para el pie de página.

Título
Especifica el título del pie de página.

Navegaciónbar
Aquíusted puede (opcionalmente) configurar los botones de navegación que serán parte del pie de
página.
Cada botón puede tener texto, un icono y un enlace. Icono de posición coloca el icono en el botón.
Valores posibles: izquierda, derecha, arriba, abajo, ninguno.

228
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile Header


La cabecera esuna barra de herramientas en la parte superior de la página que por lo general contiene
el texto del título de página y botones opcionales posicionado a la izquierda y / o derecha del título para
la navegación o las acciones.
Encabezadosopcionalmente puede ser posicionado como fijo por lo que permanecen en la parte superior
de la pantalla en todo momento en lugar
de desplazarse con la página.

Latexto del título es normalmente un elemento de encabezado H1 pero es posible utilizar cualquier
nivel de encabezado (H1-H6) para permitir la flexibilidad semántica.

Posición fija
Hace que el pie de página para flotar sobre el contenido a través de posición CSS.

CompletoPantalla
Establece sila barra de herramientas debe ser ocultado por completo cuando se toca la página.

Encabezamientoetiqueta
Especifica la etiqueta de cabecera (H1 ... H6) que se utilizará para el pie de página.

Título
Especifica el título de la cabecera.

Navegaciónbar
Aquíusted puede (opcionalmente) configurar los botones de navegación que serán parte del pie de
página.
Cada botón puede tener texto, un icono y un enlace. Icono de posición coloca el icono en el botón.
Valores posibles: izquierda, derecha, arriba, abajo, ninguno.

229
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile Listview


El objeto se basa en Listviewel widget Listview del framework jQuery Mobile:
http://api.jquerymobile.com/listview/

Una vista de lista es una lista de artículos con temas que pueden tener imágenes, enlaces e incluso un
filtro de búsqueda.

Artículos
Administrar los elementos de la lista. Los elementos enlazados tendrán un indicador de flecha derecha.
También es posible insertar
divisores entrelos elementos para crear grupos.

Tamaño de miniatura
Setel tamaño de las imágenes en miniatura. Todas las imágenes de la lista deben tener el mismo tamaño.

LugarTitular
Especifica un toque corto para ayudar al usuario a rellenar el campo de entrada. El texto desaparecerá
tan pronto como el
usuarioentra un poco de texto.

Filtro de búsqueda
Añadir una barra de filtro de búsqueda para la vista de lista.

230
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile anidada Menú


LaNested objeto Menu se basa en el widget emergente del framework jQuery Mobile:
http://api.jquerymobile.com/popup/

Inicialmente el menú anidado muestra un solo botón en la página. Cuando el usuario hace clic en el
botón aparecerá un menú emergente. Esta es una combinación de la plegables y objetos ListView.
Laelementos de menú se pueden clasificar y cada categoría se pueden contraer / expandida.

jQuery Mobile Menú emergente


LaEmergente del objeto del menú se basa en el widget emergente desde el framework jQuery Mobile:
http://api.jquerymobile.com/popup/

Inicialmente el menú emergente muestra un solo botón en la página. Cuando el usuario hace clic en el
botón aparecerá un menú emergente. El menú también puede incluir separadores para crear grupos.

230
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Mobile Panel jQuery


LaObjeto Grupo se basa en el widget de paneles en el framework jQuery Mobile:
http://api.jquerymobile.com/panel/

Un panel es inicialmente invisible, pero puede deslizarse desde la parte derecha o izquierda de la
página haciendo clic en el botón de menú. El contenido del panel puede ser una vista de lista / menú u
otra página!

CercaTexto del botón


Especifica el texto que se muestra en el botón.

Contenido
Especifica si se debe utilizar una vista de lista / menú o página para el contenido.
Si selecciona 'listview' entonces el panel actuará como un menú. Si selecciona "página" entonces usted
puede seleccionar otra página. En ese caso, todos los objetos de esa página se integrará en la página
actual.

VisualizaciónModo
Especifica la relación de la pantalla a la página de contenidos.
 revelar
Empuje la página más.
 empujar
Re-flujoel contenido para adaptarse al contenido del panel como una columna.
 superposición
Siéntese sobre el contenido.

Posición
Especifica si el menú del panel se mostrará en la parte izquierda o derecha de la página.

Dismissible
Especifica si el panel se puede cerrar haciendo clic fuera hasta la página.

Posición fija
Establece siel panel ha fijado posicionamiento por lo que los contenidos están a la vista, incluso si la
página se desplaza hacia abajo. Esto también permite que la página para desplazarse mientras que el
panel se mantiene fijo.

Swipe Cerrar
Especifica si el panel se puede cerrar al deslizar hacia la izquierda o la derecha sobre el panel ..

231
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

jQuery Mobile Tabla Responsive


El objeto de tabla Responsive se basaen el widget Tabla en el framework jQuery Mobile:
http://api.jquerymobile.com/table/

Uno de los mayores retos en el diseño de páginas web sensibles (RWD) es la presentación de datos
tabulares. Tablas grandes con un montón de columnas no caben en las pantallas más pequeñas y no
hay una forma sencilla de volver a formatear el contenido de la tabla con las consultas CSS y los
medios de comunicación para una presentación aceptable. Para hacer frente a esto, el framework
jQuery Mobile ofrece dos opciones diferentes para la presentación de tablas responsablemente. Cada
uno tiene ventajas y compensaciones, que se presenta la mejor opción dependerá de los datos.

Reflujomodo- Re-formatos de las columnas de mesa en anchuras estrechas por lo que cada fila de
datos se presenta como un bloque con formato de pares etiqueta / de datos. Esto es ideal para
mesas con producto o información de contacto con un formato de datos más complejo o largo, que
no necesita la comparación entre filas de datos.
En el modo de reflujo puede establecer el punto de interrupción para cuando la tabla cambiará a
disposición apilada. El valor por defecto (-1) convertirá a partir de la presentación tabular de la
presentación apilados en 560px (35em).

232
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Columna de palancamodo- Pieles selectivamente columnas con anchuras más estrechas como un
defecto sensible, sino también ofrece un menú para que los usuarios controlan manualmente las
columnas que ellos quieren ver. Este modo es mejor para tablas de datos financieros que tienen
valores compactos y necesitan mantener comparaciones entre columnas y filas de datos. También se
puede utilizar para la construcción de cosas como tablas de comparación de productos.
Lamesa trabaja por ocultar y mostrar columnas basado en dos entradas: ancho de la pantalla, o por el
usuariocomprobación y que columnas desmarcando a mostrar en una ventana emergente selector
columna. Añadir atribuye prioridad de datos para cada una de las cabeceras de la tabla de columnas
que desea mostrar responsablemente y asignar una prioridad (1 = más alto, 6 = más bajo).

LaLo primero que tendrá que hacer es definir la estructura de la tabla. Para cada columna se puede
establecer el nombre de la columna, la prioridad y la alineación. La prioridad (1 = más alto, más bajo =
6) se utiliza sólo en el modo de conmutación de columna. Las columnas se mostrarán en función del
ancho de pantalla disponible y prioridad.

Despuésque ha definido la estructura, puede agregar datos. Usted puede insertar manualmente los
elementos o importar datos de un archivo separado por comas.

233
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Publicar su sitio web


Ustedpuede publicar sus páginas web mediante la acumulación en
la herramienta de Publicar. Seleccione Archivo-> Publicar para
iniciar el diálogo publicar.

Hay dosformas de publicar sus páginas:


1. Publicaren una carpeta local.
2. Publicara un servidor FTP remoto.

Publicaren una carpeta local


Haga clic en Agregarpara añadir una nueva ubicación a la lista.
Introduzca un nombre para la ubicación de un selecto local como tipo.

Entre en la carpeta donde desea publicar el documento activo.


Haga clic enAceptar para guardar los datos y luego haga clic en Publicar para guardar
los archivos en la carpeta especificada. Si usted no quiere, para copiar imágenes u
otros componentes junto con el archivo HTML,
seleccionarla opción archivos HTML sólo publican. De lo contrario, todas las imágenes, controles
ActiveX, applets Java, etc., se copiarán en la misma carpeta.

234
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Publicara un servidor FTP remoto.


Haga clic en Agregarpara añadir una nueva ubicación a la lista.

Introduzca un nombre para la ubicación de un remoto seleccione Servidor / FTP como el tipo y llenar los
siguientes campos:
Anfitrión
LaCampo Dirección del host contiene la ubicación del servidor
FTP. Puede especificar una URL o dirección IP.
Puerto
Lapuerto predeterminado de una conexión FTP es de 21, pero si es necesario se puede configurar algo
más.
PASVmodo
Modo PASV es útil para ciertos tipos de servidores de seguridad que no permiten servidores FTP para
iniciar las conexiones de datos de vuelta al cliente conectado.
Nombre de usuario
Esdonde se introduce el nombre de usuario de la cuenta FTP que le permite iniciar sesión en el servidor
FTP (véase también el entorno en el anonimato).
Contraseña
Introduzca la contraseña de la cuenta FTP.
Carpeta remota
Especifica la carpeta en el servidor FTP donde se cargan los archivos. El valor predeterminado es el
directorio raíz.
Comunes ubicaciones carpetas remotas son:
/ Www
/ Public_html
/ Html

Nota importante:Desafortunadamenteeste valor es diferente para cada servicio de hosting, por lo


tanto consulte la documentación de su servicio de hosting para obtener más detalles.

Prueba de
conexión
Estecomando puede ayudarle a determinar si el nombre de host, nombre de usuario y la contraseña
especificados son correctos.
También verifica si su firewall permite la conexión con el
servidor.

El 'Explorar'botón de configuración de publicación dan acceso a sus archivos publicados. Al hacer clic
en este botón lanzará el incorporado en el cliente FTP para administrar sus archivos en línea.
Laincorporado en el cliente FTP también introduce una forma fácil de encontrar la carpeta publicar
remoto. Simplemente ingrese a su cuenta, vaya a la carpeta y haga clic en 'Make Home'. WYSIWYG Web
Builder ahora utilizará esa carpeta como la raíz de su sitio web!

Amodificar los permisos de cualquier archivo o carpeta. Seleccione el archivo / carpeta y haga clic en el
235
WYSIWYG Web Builder 10 Pablo
botón 'Permisos'. Esta función sólo es compatible con servidores basados en UNIX.
SoftwareSoluciones

236
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Páginas para Publicar


Seleccione qué página o páginas que desea publicar.
TodoSitio Web,publica todas las páginas del sitio web (excepto las páginas que han permitido 'No
publicar esta página' en Propiedades de la página)
Seleccionar páginaSólo,publicala página de selección, haga clic en Seleccionar para especificar la página
que se publicará.
Seleccionar páginay Sub Pages,publica la página de selección y todos sus sub-páginas (si las hay).

Archivos
Especifica que se publicarán los archivos.
 Publicartodos los archivos
Todos los archivos de la página (s) seleccionados serán publicados
 PublicarSólo archivos HTML
Seleccione esta opción si no desea cargar imágenes u otros componentes junto con el
archivo HTML.
 Publicarsólo los archivos modificados
Seleccione esta opción si desea publicado los archivos que se han cambiado desde la última
vez que ha publicado su sitio web. ¿Qué es exactamente será publicado depende de los
cambios que ha realizado. Por ejemplo, si sólo ha cambiado la posición de un objeto, a
continuación, sólo el archivo HTML se cambió, pero si ha cambiado el tamaño de una forma,
entonces la imagen de forma necesita ser regenerado y por lo tanto el código HTML y la
imagen archivo será publicada.

Más información sobre la publicación


Ahacer sus páginas web disponibles para otros usuarios que tienen que publicar en un servidor web. Hay
un montón de empresas de alojamiento disponibles, por ejemplo:
http://www.1and1.com
http://www.tripod.com http://www.free-
webhosts.com

Asegúrese de elegir un proveedor de alojamiento web, que soporta FTP, lo que hace que sea mucho
más fácil para publicar sus páginas Web Builder. Una vez que haya registrado en una red de acogida,
usted recibirá una dirección del servidor, nombre de usuario y contraseña. Introduzca esta
información en Web Builder seleccionando: Archivo-> Publicar. Haga clic en Agregar y seleccione el
tipo remoto. A veces también es necesario especificar una carpeta remota como "public_html". si
usted tiene un firewall / router seleccione 'Usar el modo pasivo para las transferencias ". Haga clic en
Aceptar para guardar. Ahora usted puede publicar cada página, simplemente seleccionando Publicar.
Si desea ver los resultados de la transferencia de archivos, puede ver el archivo de registro a través de:
Herramientas-> Opciones-> editores> Ver registro.

Cómo publicar en el host que ofrecen alojamiento web gratuito que no soportan FTP?
En lugarde publicar sus páginas web directamente a través de FTP, también puede publicar sus páginas en
una carpeta local.
Haga clic enAñadir y seleccione Tipo Local.
Introduzca un nombre y especificar una ubicación mediante el botón Examinar (..).
Haga clic enAceptar para guardar.
Ahora bien, si se pulsa el botón Publicar, los archivos serán generados a la carpeta local.
A continuación, seleccionetodos los archivos en la carpeta local de publicar y subirlos utilizando el
administrador de archivos de su servidor web (por ejemplo, Geocities, yahoo ...).

¿Qué hacer en caso de errores de publicación?


1. Asegúrese de que su dirección ftp (host) es correcta
2. Es su nombre de usuario y contraseña ok?
3. No bloquear el cortafuegos de la conexión FTP de Web Builder?
4. Habilitar 'Usar el modo pasivo para las transferencias'
5. Aumentar el tiempo de espera de conexión de 120 segundos (Herramientas-> Opciones->
Publicar)

237
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
6. Para obtener una lista de todos los posibles códigos de error y sus descripciones, entra aquí:
http://support.microsoft.com/default.aspx?scid=kb;EN-US;193625

238
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Enlaces
(hiper) enlacesson texto o imágenes que se puede hacer clic para que el usuario a otro archivo web
como una página web, imágenes o cualquier otro archivo. Ellos son la esencia de la World Wide
Web, ya que enlazan las páginas de los sitios y páginas web a otros sitios web.

Punto culminanteel texto o la imagen que será el enlace y seleccione Insertar> Enlace desde la barra de
menú o pulsando CTRL + K. Esto mostrará la ventana Insertar hipervínculo.

Enlacea una página en otro sitio web


SetEnlazar con opción de Sitio Web.
Introduzca la URL completa (dirección de Internet) de la página de destino en el cuadro de URL.
URL externa debe comenzar con "http: //" o no van a trabajar.
Por ejemplo, para enlazar a la página de Soluciones casa Pablo Software, escriba
"http://www.pablosoftwaresolutions.com/"En lugar de"www.pablosoftwaresolutions.com".

Enlacea una página en su propio sitio web


SetEnlazar con opción a Internal Página Web.
Haga clic en'Select' para elegir una página. Esto listará todas las páginas que forman parte del proyecto
actual. Seleccione una de las páginas y un vínculo relativo, se creará automáticamente (por
ejemplo,./products.html).
Notas:
 Debe publicartodas las páginas que ha vinculadas con el fin de ser capaz de probar los vínculos
relativos.
 Los enlaces internos no funcionan en modo de vista previa, a menos que haya configurado
la vista previa Alcance al Sitio Web completo (Herramientas-> Opciones-> Vista previa)

Enlacea una dirección de correo electrónico


Seleccione Dirección de correo electrónico desde el menú desplegado de Vincular.
LaCuadro URL se actualizará automáticamente con el mailto: prefijo. A continuación, introduzca la
dirección de correo electrónico de destino
dirección.Por ejemplo: mailto:
webmaster@yourdomain.com o
mailto:? subject = webmaster@yourdomain.com Web Realimentación

Enlacea un archivo
SetEnlazar con opción a archivo.
Busque el archivo que desea crear un vínculo para. WYSIWYG Web Builder cargará automáticamente
el archivo local a su sitio web, cuando publica su página.

Nota:Cuando se enlaza a archivos de gran tamaño, puede tardar un tiempo un tiempo antes de que
el archivo se transfiere a tu sitio!

239
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Smart Links
Inteligenteenlaces puedan utilizarse para enlazar con el siguiente, anterior, padre o hijo de la página
actual. Si cambia
la estructura de su sitio web, estos enlaces se actualizará automáticamente para representar el estado
actual.

Lasiguientes opciones de enlace inteligentes están disponibles:


 Padres Page;Enlace a los padres de la página actual.
 NiñoPágina; Enlace al primer hijo de la página actual.
 Siguiente Página;Enlace a los hermanos a la derecha de esta página.
 AnteriorPágina; Enlace a los hermanos a la izquierda de esta página.
 Espalda; Volver a la página anterior en la historia del navegador.
 Cercala ventana actual del navegador; Cierre la ventana del navegador actual, esta
característica no es compatible con todos los navegadores!
 Impresiónla página actual; Al hacer clic en el enlace se imprimirá la página actual.
 RecargarPágina; Al hacer clic en el enlace que se recargue / actualizar la página actual.

Otros tipos de enlace


 FaceTime
Inicie la aplicación FaceTime e iniciar una llamada al usuario especificado. Ejemplo:
FaceTime: 14085551234 oFaceTime: user@example.com
 Número De Teléfono
Llame al número especificado. Ejemplo: tel: +1200229933
 SMS
Enviarun SMS. Ejemplo: sms: +3290322111
 Skype
Inicie la aplicación de Skype e iniciar una llamada al usuario especificado. Ejemplo: skype:
skype_user

Ventana Target o Frame


Abrir en la misma ventana del navegador, Esta opción establecerá el destino del enlace a _self
Abrir en una nueva ventana del navegador, Esta opción establecerá el destino del enlace a _blank
Abrir en otra ventana o marco, Esta opción le permite especificar un destino personalizado.

Ejemplos:
_parent
abiertoel vínculo en el marco padre
_top
carga la página vinculada en el marco superior
iframe1
especificarel nombre de un marco en línea, para abrir la página vinculada en un marco en línea.

Abrir en una ventana emergente, Esta opción se abrirá la página vinculada en un (javascript)
ventana emergente. Haga clic en "Configuración" para especificar las propiedades de la ventana
emergente:
Izquierda, Especifica la posición de la izquierda, en píxeles. Este valor es relativo a la esquina superior
izquierda de la pantalla. La
valordebe ser mayor que o igual a 0.
Superior, Especifica la posición superior, en píxeles. Este valor es relativo a la esquina superior
izquierda de la pantalla. El valor debe ser mayor que o igual a 0.
Altura,Establece la altura de la ventana en píxeles. El valor mínimo es 150 para Internet Explorer!
Ancho,Establece el ancho de la ventana en píxeles. El valor mínimo es 250 para Internet Explorer!
Barra de estado, Activar la barra de estado en la parte inferior de la ventana.
Barra de herramientas, Activar la barra de herramientas del navegador estándar, con botones, como
Atrás y Adelante.
Localización Bar, Activar el campo de entrada Lugar donde se introduce la URL.
Barra de menús, Activar la barra de menús de la ventana.
Redimensionable,Permitir / No permitir al usuario cambiar el tamaño de la ventana.
240
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Las barras de desplazamiento,Activar las barras de desplazamiento si el documento es más grande que la
ventana

241
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Marcadores (Jumpa otra parte de la página)


Textoy las imágenes se pueden fijar como favoritos (también llamados "anclas") que se pueden vincular a
dentro de una página. Para
ejemplo, siuna página ha varios elementos nuevos, los títulos de las noticias de cada elemento se
puede establecer como marcadores y una fila de enlaces se puede agregar a la parte superior de la
página que cada pase directamente a las secciones marcadas. Este método de usar marcadores
permite a los visitantes a su sitio para acceder rápidamente a la información por no tener que
desplazarse por la página para ver la información que desean.

Paso1
Ustedpuede crear un marcador mediante el uso de la herramienta de marcador en el menú Insertar

Paso2
Movimientoel icono del marcador en la posición en la que desea la página para saltar a si el usuario
hace clic en el enlace. En este caso vamos a saltar a la parte superior de la página.

Paso3
Asegúrese de darle el marcador un nombre único.

242
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Paso4
Una vez que haya colocado el icono del marcador en su página, se puede seleccionar de la lista
desplegable Favoritos.

Apariencia
Todos los hipervínculos en su página web por defecto utilizan los colores de los enlaces HTML
predeterminado (enlace: azul, visitado: púrpura,
activo: rojo).Mediante la definición de estilos de hipervínculo (CCS) puede ajustar los colores y el
formato de un hipervínculo. Una vez que haya definido un estilo que puede adjuntar a un hipervínculo
seleccionándolo en la lista desplegable Estilo. Haga clic en el botón Editar Estilos de añadir o modificar
la hoja de estilo hipervínculo.

Hoja de estilos de hipervínculo


Por defecto, todos los hipervínculos de texto en su página web utilizan los colores de los enlaces HTML
predeterminado (enlace: azul, visitaron:
púrpura, vivo: rojo). Sin embargo, como CSS (Cascading Style Sheets) cuando se introduzcan, más y más
sitios web utilizan diferentes colores para crear diseños de mejor apariencia. Web Builder te da la
opción de personalizar la forma en que los hipervínculos se mostrarán en el navegador mediante la
introducción de la Hoja Editor hipervínculo estilo.

240
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Haga clic en Agregarañadir un nuevo estilo de hipervínculo. Cada estilo hipervínculo le permite
personalizar los colores de los cuatro estados de hipervínculo:
Vinculado(Por defecto: azul,subrayado)
Visitado(Por defecto: púrpura,
subrayado)Activo(Por defecto: rojo,
subrayado)Flotar(Por defecto:
azul,subrayado)
Ademáslos colores, también puede cambiar la negrita, subrayado y cursiva.

Cada estilo se debe guardar con un nombre único.


En la ventana Propiedades de enlaces puede adjuntar este nombre a un enlace.

Haga clic en Editarpara modificar un estilo existente y Quitar para eliminarlo de la

lista. Ejemplo: Eliminar el subrayado de un enlace.


1. Crearun nuevo estilo y desactive la casilla de verificación subrayado para los cuatro estados.
2. Asigne un nombre al estilo 'no_underline'
3. Haga clic enAceptar para guardar.
4. Seleccione un enlace y cambiar el estilo de la lista desplegable de 'no_underline'
5. Publicaro una vista previa de la página para ver el efecto.

Nota:Laestilo de enlace se activa cuando se publica o vista previa de la página. Web Builder siempre
mostrará enlaces en azul.

Transición
Especifica la duración de transición para pasar de un estado a otro. Esto hace que sea posible animar
el cambio de estado de enlace. Lea más acerca de las transiciones aquí: Animaciones y transiciones
CSS3.

241
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Administrador del Portal


LaSite Manager puede utilizarse para gestionar la estructura de su sitio web.
Cuando su sitio web tiene más de una página deben ser todos parte de un mismo archivo de proyecto
Web Builder. El administrador del sitio se puede utilizar para agregar, editar, eliminar páginas y
organizar su sitio web. También hay un botón para abrir las propiedades de la página seleccionada. El
comando Nueva carpeta le dan la posibilidad de organizar sus páginas en carpetas.

En la imagen superior, se ve un ejemplo de una estructura del sitio web. El nombre de archivo de este
ejemplo el sitio web se llama 'mywebsite.wbs', este nombre se muestra siempre en la raíz del árbol del
sitio web. La raíz puede tener uno de más páginas y cada página puede tener sub-páginas.
Los sitios web tienen siempre una página de inicio, que a menudo se llama índice, por lo que por esta
razón constructor Web agrega automáticamente esta página para cada nuevo proyecto. Los nombres
de los elementos (páginas) en el árbol del sitio son los nombres de los archivos de los archivos HTML de
destino, por lo que si usted nombró un "índice" página es publicará como index.html.

Adiciónuna nueva página


1. Seleccione la posición en la que desea insertar la página, por ejemplo, seleccione la raíz (el nivel
superior
artículo)insertar la página al primer nivel.
2. Haga clic enel primer botón de la barra de herramientas (Página nueva)
3. Web Builder agrega la nueva página a su proyecto y se abrirá automáticamente, así que usted
puede comenzar
la construcción de la página.

Para insertaruna nueva página como hijo de una página o carpeta existente, seleccione primero el padre y
haga clic en "Nueva Página"

Consejo:
UstedTambién puede utilizar el menú contextual (botón derecho del ratón) para añadir nuevas
páginas al sitio web o puede seleccionar Página-> Nueva página en el menú Web Builder.

242
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Adiciónuna nueva carpeta


1. Seleccione la posición en la que desea insertar la carpeta, por ejemplo, seleccione la raíz (la
parte superior
nivelelemento) para insertar la página para el primer nivel.
2. Haga clic enel segundo botón de la barra de herramientas (Nueva carpeta)
3. Web Builder agrega la nueva carpeta para su proyecto.

Abra una página existente


1. Seleccione el elemento (nombre de la página) tu quieres editar
2. Haga clic enel tercer botón (de la izquierda) en la barra de herramientas (Editar página).

Inserciónun archivo externo


Esteopción puede ser útil si usted quiere hacer una parte de archivo externo del proyecto, por lo que
fácilmente puede vincular o hacerla parte del mapa del sitio.
Y aunque esta opción fue diseñada para incluir archivos HTML, que básicamente se puede utilizar para
cualquier tipo de archivo.
Tenga en cuenta sin embargo, que sólo será un enlace al archivo. Usted no será capaz de editar el
archivo directamente en WYSIWYG Web Builder.

Clonaciónuna página existente


Ahacer una copia exacta de una página existente, seleccione el elemento (nombre de la página) que
desea clonar y haga clic en el
cuartobotón (de la izquierda) en la barra de herramientas para insertar una copia de esa página.

Quitaruna página / carpeta


Seleccione el elemento (página o nombre de la carpeta) que desea eliminar y haga clic en el botón
Eliminar en la barra de herramientas o pulse la tecla Supr del teclado. No se puede quitar la última
página de su sitio web.

243
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Rebautizaruna página / carpeta


Seleccione el elemento (página o nombre de la carpeta) y pulse F2 para introducir el nuevo nombre.
UstedTambién puede utilizar el menú contextual (botón derecho del ratón) para seleccionar y cambiar el
nombre de una página / carpeta.
Cuándoha vinculado a la página, está cambiando el nombre (de cualquier página dentro del sitio web),
Web Builder se actualiza automáticamente todos los enlaces para usted, así que usted no tiene que
volver a hacer todos los enlaces internos.

Notas acerca de los nombres de página


Aunque la construcción de su sitio web, Web Builder guarda el archivo de proyecto con la extensión
.wbs. Este es un archivo de proyecto utilizado por Web Builder para simplificar el proceso de
construcción. Un archivo de proyecto puede contener varias páginas web. Una vez que sus páginas
están listas debe exportar o publicar como HTML.
Lanombre del archivo HTML de salida se toma del nombre que ha especificado en el administrador del
sitio.
Así que si usted nombró el índice de la página, el archivo de salida se llama index.html. Si la página
necesita otro
extensióncomo .php, puede configurar esto en las propiedades de la página.

Aquíhay algunas pautas sobre cómo nombrar tus páginas web:


6. No agregue .html o .htm extensión al nombre de la página. Web Builder añadirá
automáticamente la
extensión .html (o .php, .asp) cuando publica (o exportaciones) el código HTML.
7. Siempre el nombre de su página web: "índice", este es el nombre más común para una página
web.
8. Utilice siempre los nombres de archivo en minúsculas, la mayoría de los servidores web son
mayúsculas y minúsculas y puede fallar para encontrar su página si ha llamado "Índice" o
"INDEX"
9. No utilice el espacio u otros caracteres especiales en el nombre, que sean
sencillas como: "page1"
o
"my_products"
10. Utilice caracteres de subrayado para conectar palabras.

Editar propiedades de página


Aeditar las propiedades de la página sin tener que abrir la página:
1. Seleccione el elemento (nombre de la página)
2. Haga clic enel botón Propiedades de la barra de herramientas o haga clic derecho en el
menú contextual y seleccione Propiedades de página.

244
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Organizar elementos
Ustedpuede organizar elementos mediante arrastrar y soltar, seleccione el elemento y arrastrarlo a la
posición en la que
querer moverlo. Dejar caer un elemento en otro elemento de forma automática hará que sea un hijo
de este artículo. Para evitar que esto puede mantener pulsada la tecla CTRL, este se moverá el
elemento debajo del elemento gota.
Otra forma de organizar los elementos está utilizando el menú contextual:
1. Seleccione un elemento
2. Haz clic derechopara visualizar el menú.
3. Seleccione Organizar y uno de los elementos disponibles: Subir, Bajar, Mover a la izquierda o
Mover a la derecha.

Importar HTMLPágina
Aunque Web Builder NO es un editor HTML, puede importar páginas HTML existentes.
Seleccione Página-> Import-> Importar HTML página en el menú para mostrar la ventana de la página
Importar HTML. Usted puede seleccionar una página HTML de la unidad local o especificar una
dirección URL de un sitio web en línea.
Haga clic en Aceptarpara iniciar la importación de la página. Web Builder copiará automáticamente todas
las imágenes en la unidad local.

Notas importantes sobre la importación de HTML:


 WYSIWYGWeb Builder no es un editor HTML, pero un generador HTML! Web Builder importa el
HTML por la prestación de los contenidos de una página existente y luego intenta convertir el
diseño de formato de objeto interno de Web Builder.
 Lafunción de importación actualmente sólo importa texto, imágenes, elementos de formulario
y atributos cuerpo (colores de los enlaces, imágenes de fondo, etiquetas meta). Las tablas,
scripts, hojas de estilo y componentes multimedia no se importan. Pero en la mayoría de los
casos esto es suficiente para empezar.
 Web Builder no analiza las hojas de estilo, por lo que es algunos casos el texto puede ser
distinta de la página original.
 Web Builder actualmente no admite conjuntos de marcos. Si desea importar una página
web que utiliza marcos tendrás que importar todas las páginas individuales por separado.
 Es muy difícil de soportar todos los diferentes tipos de HTML. Incluso los navegadores
populares interpretarán HTML de manera diferente, así que no esperes milagros. Si una
página no puede ser importado es probable que contenga código que Web Builder no
entender y usted todavía tiene que empezar de cero.
Importación de páginas web creadas con WYSIWYG Web Builder le dará los mejores resultados!

Importaciónuna página de otro proyecto


Esteopción permite importar la página de otro proyecto WYSIWYG Web Builder.

Posición y tamaño del Administrador del Portal


Ustedpuede colocar el Administrador del Portal donde quieras (acoplado o flotante):
1. 'Agarrar'la barra de título del jefe de obra con el ratón para mover la ventana a otra
ubicación.
2. Ahacer que el auto ocultar administrador del sitio, haga clic en la chincheta en la esquina
superior derecha. Al mover el ratón fuera de la ventana se ocultamiento automático, sólo
mostrar una pequeña pestaña en que oculta las ventanas. Mueve el ratón para esa ficha para
hacer visible la ventana de nuevo.

245
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Objeto Gerente
El ObjetoGerente da una visión general de todos los objetos en la página actual; usted puede hacer
objeto invisible, bloquear / desbloquear objetos, cambiar el orden z o eliminar un objeto específico.
Haga doble clic en un objeto en la lista para seleccionarlo en el espacio de trabajo.

El ObjetoManager también ofrece algunas características avanzadas a través del menú contextual (clic
derecho sobre un objeto en la lista):

Cambiar el
nombre del
objeto
Permite modificar la propiedad ID del objeto. Tenga en cuenta que también puede modificar el ID de la
Propiedad
Inspector.

NumeradoLos
nombres de archivo
Muchos objetos generan dinámico imágenes. Por ejemplo formas, navigationbars, sino también con
imágenes
efectos (como
sombras).
WYSIWYGWeb Builder generará automáticamente nombres de archivo únicos para estas imágenes,
para asegurarse de que no hay conflictos.
Lanombres generados automáticamente están determinadas por la configuración de las
opciones de publicación.
Aver o editar los nombres de archivos generados automáticamente por un objeto se eligen los nombres
de archivo asignado en el menú contextual.
No todos los objetos sí apoyan esta opción. No es más que útil para objeto que genera

246
WYSIWYG Web Builder 10 Pablo
dinámicamente imágenes! SoftwareSoluciones

247
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Mássobre el orden z de los objetos


WYSIWYGWeb Builder utiliza posicionamiento CSS para crear píxeles diseños perfectos en HTML. CSS
opera en
tres dimensiones - altura, anchura y profundidad. En Web Builder cada objeto (elemento) de su página
web se coloca en una capa separada, lo que hace posible solapar estos objetos algo que no se puede
hacer usando el estándar HTML / diseño de página dinámica). Para ello, se puede asignar a cada
elemento de un número (z-index). Los elementos con un alto índice z superponen un elemento con un
índice z inferior. El orden z es el orden en el que los objetos se mostrarán por el navegador.

WB genera automáticamente el z-index para cada objeto que se agrega a su página. Así que el primer
elemento tendrá z-index '0', el siguiente objeto '1', etc. Para cambiar el índice z de objetos que se
pueden utilizar las herramientas de organizar (Formato-> Disposición) o el Administrador de objetos.
Los siguientes arreglos herramientas están disponibles:

Mover al principio
Movimientooponerse al frente de la página

Mueva con espalda


Movimientooponerse al reverso de la página

Avanzar
Movimientoobjeto a la siguiente posición en el orden-z

Retroceder
Movimientoobjeto a la posición anterior en orden z

Digamosdesea mostrar los objetos en un orden determinado.


1. Seleccionar todos los objetos uno por uno en el orden que desee que se muestren.
2. Despuésha seleccionado un objeto, haga clic Formato-> Organizar-> Mover a Frente

248
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Propiedades
Inspector
Utilice la ventana Propiedades del Inspector para ver y cambiar las propiedades de los
objetos seleccionados.
UstedTambién puede utilizar la ventana Propiedades Inspector para modificar las propiedades de
página. Los cambios serán visibles inmediatamente en el área de trabajo.

Para mostrarla ventana Propiedades del Inspector haga clic en Propiedades Inspector en el menú Ver.
La ventana Propiedades muestra normalmente en la esquina inferior derecha de WYSIWYG Web
Builder, bajo el Administrador del Portal, pero usted puede mover y cambiar el tamaño de la ventana.

Nombre del
objeto(Desplegablecaja)
Listasel elegido actualmente objeto o 'Página' si no se selecciona ningún objeto. Sólo los objetos de la
página activa son
visible.Al seleccionar varios objetos, sólo aparecen las propiedades del primer objeto
seleccionado.

En la Categoría(Barra de
herramientasButton)
Listastodas las propiedades y valores de las propiedades del objeto seleccionado, por categoría. Usted
puede contraer una categoría para reducir el número de propiedades visibles. Al expandir o contraer
una categoría, se ve un signo más (+) o menos (-) a la izquierda del nombre de la categoría. Las
categorías se enumeran en orden alfabético.

Alfabético(Barra de
herramientasButton)
Alfabéticamente ordena todas las propiedades de los
objetos seleccionados.

Página de propiedades(Barra
de herramientasButton)
Muestrael cuadro de diálogo Páginas de propiedades del elemento seleccionado. Páginas de
propiedades muestra un subconjunto, el mismo o un superconjunto de las propiedades disponibles en
la ventana Propiedades.

249
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Propiedades /
Valores
Muestralas propiedades y sus valores del objeto de
selección.

Descripcióncrista
l
Espectáculosel tipo de propiedad y una breve descripción de la
propiedad.

Nota:Es tambiénposible modificar manualmente el tamaño y la posición del objeto seleccionado


cambiando la posición y tamaño propiedades.

250
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Gestor de estilos
LaGestor de estilos (Menú-> Formato> Estilos) es un lugar central para agregar, editar o eliminar
definiciones de estilo para todo el sitio web. Actualización de un estilo específico afectará a todos los
objetos que utilizan ese estilo. Por ejemplo, usted puede actualizar todas las fuentes de su sitio web en
una sola operación.

Hay seis estándarestilos de título (H1, H2, H3, H4, H5, H6), que normalmente se utilizan para los
encabezados de texto solamente. Otros estilos se pueden utilizar para todos los demás objetos que los
apoyan, como elementos de formulario y tablas.

Cuando se agrega un nuevo estilo de todos los atributos del estilo están vacías (= por defecto). Usted
no tiene que especificar los valores para todos los atributos. También es posible definir los atributos
de estilo personalizado. Usted puede haber notado que hicimos esto para los estilos de cabecera
(CustomStyle es display: inline;), para asegurarse de que se muestra correctamente en todos los
navegadores.

Notas:
No todos los atributos de estilo se aplican a todos los objetos! Por ejemplo, los márgenes y el relleno son
ignorados por la corriente
másObjetos Web Builder. Estos atributos que sólo agregan a solucionar problemas de
incompatibilidad navegador de estilos de cabecera.

Encabezamientoestilos (H1, H2 ...) sólo se pueden aplicar al texto.

Gradiente Gestor de
estilos
En el Administrador de estilos de degradado puede agregar, editar y eliminar (multicolor)
mundial gradientes efectos. Estos efectos pueden ser utilizados por formas, imágenes
prediseñadas, TextArt y las herramientas de dibujo.

Ladefiniciones de los estilos de gradiente se almacenan en un archivo XML 'gradients.dat' en la


carpeta del programa. Si ha definido estilos personalizados y desea utilizar los mismos estilos en
otro equipo, entonces usted debe copiar este archivo.

251
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Eventos
En WYSIWYG Web Builder imágenes, formas y controles de formulario tienen una propiedad Página
Eventos, para agregar fácilmente a las acciones objeto eventos, como OnClick, OnMouseOver etc.

Acciones predefinidas incluyen: Mostrar, ocultar, mover conjunto de imágenes, Play, Pause, Stop y la
función JavaScript. Varios eventos se pueden asignar a un solo objeto.

Aañadir un evento haga clic en Agregar. A continuación, seleccione el evento,


acción y especificar el destino. Con base en el objeto de uno o más de estos
eventos se puede seleccionar:
onBlur Se activa cuando el objeto pierde el foco de entrada.
onChange Se activa cuando el contenido del objeto o selección han cambiado.
onClick Se activa cuando el usuario hace clic en el botón izquierdo del ratón en el objeto.
ondblclick Se activa cuando el usuario hace doble clic
en el objeto. onFocus Se activa cuando el objeto recibe el
foco. onKeyDown Se activa cuando el usuario presiona
una tecla.
onKeyPress Se activa cuando el usuario pulsa una tecla alfanumérica.
onKeyUp Se activa cuando el usuario suelta una tecla.
onLoad Se activa inmediatamente después de que el navegador carga
el objeto o la página. onMouseDown Se activa cuando el usuario hace clic en el
objeto con cualquiera de los botones del ratón. onMouseMove Se activa cuando
el usuario mueve el ratón sobre el objeto
onMouseOut Se activa cuando el usuario mueve el ratón fuera de los límites del objeto.
onMouseOver Se activa cuando el usuario mueve el puntero del ratón en el objeto.
onMouseUp Se activa cuando el usuario suelta el botón del ratón mientras el ratón está sobre el
objeto.
onreset Dispara cuando el usuario reinicia el formulario.
OnScroll Dispara cuando el usuario cambia de posición del cuadro de desplazamiento en la barra
de desplazamiento.
onSelect Los incendios cuando cambia la selección actual.
onSubmit Se activa cuando un formulario está a punto de ser presentadas.
250
WYSIWYG Web Builder 10 Pablo
onUnload SoftwareSoluciones
Se activa inmediatamente antes del objeto o la página se descarga.

250
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Estosacciones se pueden asignar al evento anterior:


Show Mostrar el objeto tal como se especifica en el campo Destino
Ocultar Ocultar el objeto tal como se especifica en el campo Destino
Movimiento Movimientoel objeto tal como se especifica en el campo Destino para
posicionar Izquierda, Arriba.
Conjunto de imágenes Setla imagen del objeto 'Target' como se especifica en Nombre del archivo
JavaScript Función Ejecutaruna función de JavaScript personalizado (por ejemplo alert ('introduzca
su mensaje.');)

Estosacciones se pueden utilizar en combinación con el objeto de Windows Media Player


Jugar Inicie el archivo WMP.
Pausa Pausael archivo WMP.
Deténgase Detener el archivo WMP.

Laacciones que se pueden utilizar en combinación con la proyección de diapositivas objeto


Asegúrese de seleccionar un objeto de presentación válida como el objetivo y establece el intervalo a 0!
Exposición de diapositivas Siguiente Visualizaciónla siguiente imagen de una presentación de
diapositivas.
Exposición de diapositivasAnterior Visualizaciónla imagen anterior de una presentación de
diapositivas

ShowWithEffects
Mostrar el objeto tal como se especifica en el campo Destino durante el uso de uno de los efectos
espectaculares, como la decoloración, deslizamiento,
persianas, explotar, soplo caen etc ....
Darsu sitio web increíble 'web 2.0' efectos, con sólo unos clics del ratón!

HideWithEffects
Ocultar el objeto tal como se especifica en el campo Destino.

Animar
Realizar una animación personalizada de un conjunto de propiedades de CSS.
Lasiguientes propiedades pueden ser animados:
Izquierda,esto animar el objeto a la posición horizontal especificada (en píxeles).
Arriba, esto animará el objeto a la posición vertical especificado (en píxeles).
Ancho, esto animará el objeto a la anchura especificada (en píxeles).
Altura,esto animará el objeto a la altura especificada (en píxeles).
Opacidad, esto animar la opacidad del objeto especificado (en un rango entre 0,0 a 1,0)

Nota:
Eventosque no figuran más arriba se puede insertar utilizando las herramientas HTML personalizado.

251
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

CSS3 animaciones y transiciones


WYSIWYGWeb Builder ha incorporado soporte para animaciones CSS3 y transiciones. Animaciones y
transiciones son compatibles con todos los navegadores modernos (Firefox / Safari / Opera / Chrome
/ IE10), pero no por Internet Explorer 9 o más!

Animación
Una animación de CSS3 es un efecto que permite a un elemento poco a poco cambia de un estilo a otro
sin
uso de JavaScripto Flash. Los efectos de animación se pueden aplicar a una amplia variedad de
propiedades CSS, incluyendo background-color, anchura, altura, opacidad, transformaciones (rotar,
sesgar, escalar, traducir) y muchos más. El Administrador de animaciones se puede utilizar para definir
animaciones. Estas animaciones se pueden asignar a un objeto en la sección CSS3 Animación de las
propiedades del objeto.

Actualmenteanimaciones son apoyados por los siguientes objetos:


 Imagen
 Texto
 Forma
 PresillaArte
 Text Art
 Curves
 Polígono
 Línea
 Bandera
 Marquesina
 Botón
 Combobox
 Editbox
 TextoZona
Tenga en cuenta sin embargo, que no todas las animaciones son útiles para todos los objetos. Por
ejemplo animando el fondo
color de una imagen o forma no va a hacer nada porque no hay antecedentes en ese caso!

UstedTambién puede asociar una animación a un estilo (en el Administrador de estilos). Esto hace
que sea posible asignar dinámicamente una animación a un objeto (a través de eventos -> conjunto
estilo).

Propiedades de animación
Animación
Especifica la animación (como creado en el Administrador de animaciones) que se utilizará para el objeto.

Duración
Especifica la duración de la animación en milisegundos.

Retraso
Retrasohace que la primera carrera de la animación que esperar a que el período de tiempo
especificado (en milisegundos) antes de comenzar a ejecutar. Tenga en cuenta que no se produzca la
demora durante las repeticiones de animación. Sólo se utiliza para la primera iteración de la animación.

Número de iteraciones
Ustedpuede configurar el número de veces que desea que la animación para jugar, o incluso puede que
se repita
infinitamentemediante el uso de -1.

Dirección
Setesta a la normalidad para reproducir la animación de principio a fin. O utilice alternativo para jugar

252
WYSIWYG Web Builder 10 Pablo
hacia adelante y luego hacia atrás. SoftwareSoluciones

253
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Sincro
nizaci
ón
Laanimación-timing-function especifica la curva de velocidad de la
animación.
Lacurva de velocidad define el tiempo de una animación utiliza para cambiar de un conjunto de estilos
CSS a otro. La curva de velocidad se utiliza para hacer los cambios sin problemas.
Laanimación-timing-función utiliza una función matemática, llamada la curva cúbica de Bézier, para
hacer la
velocidadcur
va.

 lineal
Laanimación tiene la misma velocidad de principio a fin

 facilidad
Laanimación tiene un comienzo lento, luego rápido, antes de que termine lentamente

 facilidad en
Laanimación tiene un comienzo lento.

 la facilidad de salida
Laanimación tiene un final lento

 facilidad in-out
Laanimación tiene tanto un comienzo lento y un extremo lenta

Transició
n
Una transición CSS3 es una animación que se mueve una propiedad entre dos estados. Las transiciones
son una animación implícita, lo que significa que son provocados por un cambio de estado como
"libración" o "enfoque", a diferencia de una animación que funciona de forma constante.
Ustedpuede agregar múltiples transiciones a un objeto. Esto hace que sea posible animar múltiples
propiedades al mismo tiempo.

Gatillo
Especifica que cambian de estado activará la transición. Desencadenantes más utilizados están
rondando "y" enfoque ".

Duració
n
Especifica la duración de la transición en
milisegundos.

Retra
so
Especifica cuando la transición se
iniciará.

Sincro
nizaci
ón
La función de temporizaciónespecifica la curva de velocidad de la animación. Ver las propiedades de
animación '' para más detalles.

Propieda
d
Especifica el nombre de la propiedad CSS al que se aplica la transición.

254
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones
Valor
Especifica el nuevo valor de la propiedad
CSS.

255
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Administrador de animaciones
LaAnimación Manager puede utilizarse para definir animaciones (con fotogramas clave). Hemos incluido
algunos
ejemploanimaciones para ayudarle a empezar.

Importante:
No todas las animaciones son útiles para todos los objetos. Por ejemplo animar el color de fondo de
una imagen o forma no va a hacer nada porque no hay antecedentes en ese caso. También anima
izquierda / arriba / anchura / altura / margen / etc no va a funcionar para la mayoría de los objetos, ya
que estos valores se fijan normalmente. Si desea animar el tamaño o la posición de un objeto que es
mejor usar las transformadas. Vea los ejemplos para más detalles.

Laprimer paso para la creación de animaciones es definir "marcos clave. Un fotograma clave es un
punto que define el inicio y el final de una transición. El más animación simple tendrá dos fotogramas
clave - uno al inicio (0%) y una en el extremo (100%) -, mientras que las animaciones más complejas
tendrá más fotogramas clave en el medio.
En el marco clave se establece la posición (en porcentajes) a lo largo de la duración de la animación.
Usted debe
especificaral menos dos fotogramas clave (0% y 100%), pero se puede tener tantos como quieras.
Cada fotograma clave define una propiedad (y valor) que se aplica al elemento en la fase prevista de la
animación.

Ejemplo:
Primeromarco clave: 0% -> color de fondo # 000000
Última cuadro clave: 100% -> fondo de color
#FFFFFF
Esta voluntadsuavemente animar el color de fondo de un objeto de negro a blanco.
Tenga en cuenta que la sincronización se define en las propiedades de animación del objeto, no en la
propia animación. De esta manera usted puede volver a utilizar una animación en diferentes objetos con
diferentes ajustes de tiempo.

Nota
Ustedpueden animar múltiples propiedades CSS al mismo tiempo mediante el uso de varios
fotogramas clave con la misma posición. Ver la incluyen ejemplos para más detalles.

Línea de tiempo de Animación


LaOpción Duración de la animación está disponible en el menú Página. La línea de tiempo de Animación
muestra todo
animaciones de la página, también pueden agregar, editar y eliminar las animaciones. También es
posible arrastrar y soltar / mover animaciones en la línea de tiempo, así que usted puede controlar
fácilmente el tiempo de las animaciones.

256
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Mobile Web Diseño


WYSIWYGWeb Builder cuenta con un diseñador incorporado para páginas web para móviles. Esto
hace que sea fácil crear una versión móvil de sus páginas sin necesidad de software externo. Las
páginas móviles tienen un conjunto de herramientas diferentes y la creación de un sitio web para
móviles es un poco diferente que un sitio web regular.

Las páginas móviles se basan en jQuery Mobile(http://jquerymobile.com/), Que es un marco para la


creación de aplicaciones web para móviles. jQuery Mobile funciona en todos los teléfonos inteligentes
y las tabletas populares.
jQueryMobile ha sido diseñado para trabajar en un contexto sensible. Todos los reproductores están
diseñados para ser 100% flexibles de ancho para caber fácilmente dentro de un diseño sensible.

Ahacer una página web 'sensibles' que debe ser construido de una manera diferente. A diferencia de los
diseños de Web Builder estándar WYSIWYG donde se pueden arrastrar y soltar objetos en cualquier
lugar y en objeto tiene un tamaño fijo y la posición, objetos móviles necesitar ajustar al ancho de la
pantalla. En la mayoría de los casos, esto significa que el objeto utilizará todo el ancho de la página. Pero
también es posible establecer 'ancho' false en cuyo caso, los objetos serán 'inline', por lo que tienen un
ancho fijo. Por defecto, todos los objetos se colocan uno al lado del otro (que están flotando en el
documento), pero también hay una cuadrícula de diseño disponible para organizar objetos en filas y
columnas.

Otra diferencia es el estilo de los objetos. A diferencia de una página estándar, todos los objetos
móviles jQuery están decoradas por temas y muestras.

Creación de una página web para móviles


En el administrador de la cinta o del sitio, haga clic en 'New Mobile Página'.

Tenga en cuenta que el área de trabajo será inicialmente más pequeño y la caja de herramientas
obtendrá diferentes herramientas (aunque muchos le resultará familiar). Todavía se puede arrastrar y
soltar objetos de la caja de herramientas de la página, pero no se puede controlar la posición exacta
del objeto, ya que se añadirá a la "flujo" de la página.
Quesignifica que el primer objeto estará en la esquina superior izquierda de la página y el siguiente
objeto será justo después de ella. Si el objeto se establece el ancho entonces el siguiente objeto estará
por debajo del objeto.

Ustedpuede controlar la alineación (izquierda, centro, derecha) de los objetos en las propiedades de la
página. Contenedores como plegable, Diseño de cuadrícula y Tabs tienen su propia opción de
alineación.

Atener una buena idea de lo que una página móvil se verá así, arrastrar y soltar un encabezado, pie
de página y un Listview a la página. Usted se dará cuenta que la cabecera se agregará
automáticamente en la parte superior de la página y el pie de página en la parte inferior. El Listview
(y todos los demás objetos) se añadirán entre el encabezado y el pie de página. Más diseños
avanzados se pueden crear con la cuadrícula de diseño.

Latema de la página y los objetos se puede configurar en las propiedades de la página. La mayoría de
los objetos también tienen la opción de cambiar la muestra de tema para darle un estilo diferente que
el resto de la página.

Ahora previsualizar el resultado en el navegador y observe que todos los objetos se llenan de todo el
ancho del navegador! Si ha vinculado a otras páginas jQuery Mobile, entonces también puede ver las
transiciones de página.

Nota
WYSIWYGWeb Builder también soporta Responsive Web Design, donde se pueden diseñar diferentes
diseños dentro de la misma página.

257
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Responsive Web Diseño


Con el aumento de la popularidad de la navegación en los teléfonos móviles y tabletas que se está
convirtiendo en esencial para crear sitios web que están optimizadas para las necesidades de estos
usuarios. Anteriormente había que crear diferentes versiones de la página web y el uso de secuencias
de comandos para redirigir al visitante a la versión móvil de la página. WYSIWYG Web Builder 10
introduce 'Responsive Web Design ", que le permite crear una página HTML simple que contiene las
diferentes variantes de la disposición, cada uno optimizado para anchos de dispositivos específicos. Su
sitio web será responder dinámicamente al tamaño de la pantalla del visitante y mostrar el diseño más
adecuado para su dispositivo. Estas diferentes variantes se llaman "puntos de ruptura" y utiliza
preguntas de los medios de CSS3.

Un punto de ruptura es "vista" separado de la página en WYSIWYG Web Builder. Una página puede
tener múltiples puntos de interrupción, cada uno optimizado para un ancho de pantalla específico. Por
ejemplo, usted puede tener la disposición estándar de escritorio, una para tabletas (1024 píxeles) y
otro para los teléfonos móviles (320 píxeles). Puntos de corte más comunes son:
 320 px, retrato móvil, 480 px, paisaje móvil
 768 px, Tablet retrato 1024 px, Tablet paisaje / netbook
 1280 px y mayor, de escritorio

Por supuesto, usted puede definir sus propios anchos y tener tantos puntos de corte como desee
(máximo 25), aunque por lo general va a tener no más de 3. Para añadir o editar los puntos de
interrupción, haga clic en la opción 'Administrar puntos de interrupción "en el menú Página. Para
cambiar entre los puntos de interrupción, haga clic en el menú "Puntos de interrupción" del menú
desplegable y seleccionar el punto de corte deseado. Para volver a la configuración predeterminada,
seleccione "Default".

Las diferentes variantescompartir el mismo contenido (texto, imágenes, etc) y puede cambiar la
posición y el tamaño del objeto para cada punto de interrupción. También puedes añadir el contenido
único para anchos de pantalla específicos, lo que permite, por ejemplo, para ocultar objetos en la
pantalla más pequeña.

Lasiguientes objetos no son sensibles; esto significa que no pueden tener un tamaño diferente en
puntos de interrupción. Véase también "Notas importantes sobre Responsive Web Design.
 Bandera
 Curva
 Texto curvado
 Línea
 NavegaciónBar
 OLE
 Polígono
 Forma
 Mesa
 TextoArte
 Ajuste del texto
Si necesita diferentes tamaños en puntos de interrupción, entonces tendrá que crear una copia del
objeto.

258
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Notas importantes sobre Responsive Web Design


Objetospuede tener un tamaño, posición diferente y estado de visibilidad por punto de interrupción.
Sin embargo todas las demás propiedades serán exactamente lo mismo! Por ejemplo, si se cambia el
color de un objeto, entonces se cambiará en todos los puntos de interrupción (porque el objeto es
compartida entre todos los puntos de vista).

Aunque los objetos pueden tener diferentes tamaños en puntos de interrupción, hay algunas
excepciones. Por ejemplo, las formas y otras herramientas de dibujo tendrá el mismo tamaño en todos
los puntos de interrupción. La razón de esto se debe a una sola imagen será publicado y si cambia el
tamaño de la imagen en un punto de interrupción, entonces se vería distorsionada en otro punto de
interrupción. Pero usted puede usar múltiples formas, una para cada punto de interrupción y ocultar
los que no usa en otros puntos de interrupción.

Si comparte el texto entre múltiples puntos de interrupción a continuación, establecer el "formato de


salida" en la opción de compatibilidad para 'Default', porque las otras opciones de optimizar el texto
para un ancho específico. Si usted realmente necesita para utilizar una de las opciones de
compatibilidad y luego considerar el uso de un objeto de texto separado por cada punto de
interrupción, por lo que puede ser optimizado para que ancho específico.

Objetossólo puede ser parte de una capa (y forma, Carrusel, Tabs, Acordeón, Dialog). Así que si usted
se mueve un objeto a una capa en un punto de interrupción, entonces será automáticamente parte de
la misma capa en otros puntos de ruptura!

Si se agrega un nuevo objeto a un punto de ruptura, entonces inicialmente se oculta en todos los
demás puntos de interrupción. Puede utilizar el Administrador de objetos para mostrar que si usted
también quiere que en otros puntos de interrupción.

Si elimina un objeto desde un punto de ruptura, entonces se eliminará de todos los demás puntos de
vista también. Si desea ocultar el objeto, puede utilizar el Administrador de objetos.

Ustedpuede poner a prueba los puntos de interrupción en su navegador de escritorio. Cambiar el tamaño
de la ventana del navegador para activar los puntos de interrupción.

Algunos navegadores también tienen herramientas dedicadas para las pruebas de sitios web
sensibles. Por ejemplo, Firefox tiene una Responsive Design View, que es genial para probar los
puntos de interrupción. Consulte la documentación del navegador para obtener más detalles.

Los navegadores que no admiten preguntas de los medios CSS3, mostrarán el diseño predeterminado.

259
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Validación de formulario
WYSIWYGWeb Builder tiene algunas herramientas de validación muy poderosas para validar la entrada
del usuario para el EditBox, Combobox, Radio Button, Checkbox, CAPTCHA de TextArea y antes de que
sea presentado en un formulario. Además de validación basada JavaScript, también hay soporte de
validación HTML5 nativo incorporado!

 Defecto
Muestraun mensaje de JavaScript estándar.
 Burbuja de información (en tiempo real)
Seleccione esta opción para habilitar la validación en tiempo real. El campo de entrada será
validada tan pronto como se
pierde el foco sin la necesidad de que el usuario pulse el botón de enviar primero. La
validación en tiempo real utiliza información globos en lugar del cuadro de mensaje estándar,
dar a sus formas un aspecto profesional. Para configurar el estilo de los globos haga clic en el
botón "Configuración". Puede configurar los colores, el tipo de letra, tipo burbuja, la posición y
efecto de animación.

 HTML5
Seleccione esta opción para utilizar la validación de forma nativa de HTML5. Tenga en cuenta
que esta característica no está disponible en
todos los navegadores todavía.

Validación de CAPTCHA
Mensaje de error
Estemensaje se mostrará si el usuario no se ha introducido su valor en el campo de CAPTCHA.

PermitirEn tiempo real de validación a través de AJAX


Si habilita esta opción, el valor del campo de CAPTCHA será validado en el servidor tan pronto como el
campo pierde el foco, sin la necesidad de enviar el formulario.

Validación Checkbox
Mensaje de error
Estemensaje se mostrará cuando el usuario introduce los datos erróneos.

Selecciónnecesario
Active esta opción si la casilla de verificación debe ser revisado antes de que el usuario puede enviar el
formulario.

260
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Editbox yValidación TextArea


FechaTipo

 No hay restricciones
Toda la entrada es aceptada
 Texto
Lacampo de entrada es un campo de texto. Utilice el formato de texto para especificar qué
caracteres se permiten
 Número
Lacampo de entrada es un campo de número. Utilice Formato numérico para especificar qué
números están permitidos.
 Correo electrónicoDirección
Lacampo de entrada es un campo de dirección de correo electrónico.
 TodosMayor Creditcards
 Tarjeta de crédito - American Express
 Tarjeta de crédito - Dinersclub
 Tarjeta de crédito - Descubra
 Tarjeta de crédito - Mastercard
 Tarjeta de crédito - Visa
EstosOpciones verificar los formatos de tarjetas de crédito comunes.
 Fecha- Ddmmaaaa
 Fecha- Mmddaaaa
 Fecha- Aaaammdd
EstosOpciones verificar los formatos de fecha comunes.
 Dirección IP
Lacampo de entrada es una dirección IP.
 URL
Lacampo de entrada es una URL.
 AJAX
Esteopción es para usuarios avanzados (!) que deseen validar un valor en el servidor, por
ejemplo, en un
base de datos.Use el campo de dirección URL para especificar el script de validación en el
servidor. Por ejemplo:
http://www.yourwebsite.com/validate.php

Lavalidate.php guión en su forma más simple podría ser algo como esto:

<? Php
$ Usuario = $ _POST ['datos'];

// TODO: nombre de usuario de búsqueda


en la base de datos ... if ($ nombre de
usuario == 'usuario')
{
echo "true";
}
más
{
echo "false";
}
?>

 Costumbre
Seleccione la opción Personalizar para especificar su propia (JavaScript) expresión regular.

Mensaje de error
Estemensaje se mostrará cuando el usuario introduce los datos erróneos ..

261
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Formato de texto
Seleccione los tipos de caracteres para permitir que en las Cartas de campo, Dígitos, espacio en
blanco (espacios, tabuladores, retornos de carro y saltos de línea), u Otros (diferentes personajes,
como comas y guiones).

NuméricoFormato
Especificarutilizar una coma o el plazo de puntos decimales.

DatosLongitud
Requerido;requerir al usuario que escriba una entrada en un campo de cuadro
de edición o área de texto. Mínimo; especifica el número mínimo de caracteres
para permitir en el cuadro de texto. Máximo; especifica el número máximo de
caracteres para permitir en el cuadro de texto.

Información del valor


Esteopción se puede utilizar para especificar un valor de limitación. En el campo debe estar lista,
seleccione una restricción: No importa, Menor que, Mayor que, Menor o igual a, mayor que o igual a,
Igual o No igual a. En el cuadro Valor, escriba el valor de la restricción. Para especificar una segunda
restricción, seleccione y debe ser, haga clic en una condición y escriba un valor.

Partido
Esteopción le permite especificar otro campo de formulario cuyo contenido serán comprobados contra
el campo actual para ver si son la misma. Esto puede ser útil para validar campos de correo electrónico
o contraseña.

Validación Combobox
Mensaje de error
Estemensaje se mostrará cuando el usuario introduce los datos erróneos ..

Selecciónnecesario
Exigirlos usuarios hacer una selección en el cuadro combinado.

Rechazarprimera elección
Si utiliza la primera opción para mostrar instrucciones, como "Seleccione una opción", puede hacer que el
que primero
opción disponible habilitando esta opción.

Validación FileUpload
Mensaje de error
Estemensaje se mostrará cuando el usuario introduce los datos erróneos ..

Exigirán datos
Si esta opción está activada, el usuario debe especificar un nombre de archivo.

Extensiones válidas
Especifica que la extensión será aceptado por la forma.

260
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

GDI + Información
WYSIWYGWeb Builder utiliza GDI + (Gdiplus.dll) para algunas de sus características gráficas avanzadas,
como el trazado de líneas, polígonos y curvas.
Si usted no tiene GDI + instalado en su sistema estas características serán desactivadas en la aplicación.
Pero usted puede fácilmente instalar GDI + en su sistema!

GDI +detalles:
Microsoft Windows GDI + es un entorno de "próxima generación" de gráficos 2D, añadiendo funciones
avanzadas
talcomo mezcla alfa, sombreado gradiente, gestión camino más complejo, apoyo intrínseco a los
formatos gráficos de archivos modernos como JPEG y PNG,

GDI + esincluido con Windows XP o superior.


GDI + esdisponible como redistribuible para Windows NT 4.0 SP6, Windows 2000, Windows 98 y
Windows Me. Para descargar la última redistribuible, consulte
http://www.microsoft.com/downloads/details.aspx?FamilyId=A55B6B43-E24F-4EA3-A93E-
40C0EC4F68E5 y displaylang = es.

Más información está disponible en:


http://msdn.microsoft.com/library/default.asp?url=/library/en-us/gdicpp/GDIPlus/GDIPlus.asp

261
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Personalización WYSIWYG Web Builder


En esta seccióndescribe cómo añadir personalizar WYSIWYG Web Builder para que pueda añadir su
propia imagen botones, temas, etc.

WYSIWYGWeb Builder guarda toda la información de configuración específica del usuario en la carpeta:
Mis documentos \ WYSIWYG Web Builder \ system \
Esto hacefácil el respaldo de todos los archivos y la configuración de la copia de todos los archivos y
carpetas en
Mis documentos \ WYSIWYG Web Builder.

Por ejemplo si modifica los estilos de gradiente a través del Administrador de estilos de los cambios se
guardarán en
Mis documentos \ WYSIWYG Web Builder \ system \ gradients.dat

Publicarajustes se guardan en el archivo Mis documentos \ WYSIWYG Web Builder \ system \ publish.dat

Galería de imágenes
Ustedpuede descargar miles de fuentes dingbats gratuitas para su uso como ClipArt desde Internet.
Búsqueda de 'libre
fuentes dingbat 'para encontrar toda gran colección de nuevas formas.
Despuésque haya descargado uno o más archivos que puede copiar a la carpeta 'clipart' en la carpeta
del sistema Web Builder: Mis documentos \ WYSIWYG Web Builder \ system \ clipart \
Vertambién la descripción ClipArt.

Extensiones
Extensiones(también llamados complementos o plugins) son componentes que mejoran la funcionalidad
de
WYSIWYGWeb Builder. Las extensiones pueden ser accedidos a través de la Caja de herramientas oa
través del menú Insertar al igual que los objetos estándar.
Hayya más de 200 extensiones disponibles para WYSIWYG Web Builder! Echa un vistazo a la página web
para más detalles:http://www.wysiwygwebbuilder.com/extensions.html
Aunque puede utilizar el Administrador de extensiones para instalar nuevas extensiones también es
posible copiar los archivos manualmente a los Mis documentos \ WYSIWYG Web Builder \ system \
extensiones \ carpeta.

Galería de fotos Marcos


Los marcos pueden ser aplicados a Galerías de fotos e imágenes estándar.
Chasis Custom estilosse pueden añadir a la carpeta:
Mis documentos \ WYSIWYG Web Builder \ system \ Gallery \
Vertambién: Galería de fotos

Plantillas
Plantillasque cree será salvo a: Mis documentos \ WYSIWYG Web Builder \ system \ templates
Esto significaque si han descargado las plantillas del sitio web u otra fuente de éstos debe ser el lugar
en esta carpeta. Ver también la descripción de la plantilla.

NavegaciónBar
Aañadir sus propias imágenes de los botones para el uso en la barra de navegación de colocarlos en el
Mis documentos \ WYSIWYG Web Builder \ system \ barra de navegación.

Barra de menú
262
WYSIWYG Web Builder 10 Pablo
Acrear su propio tema de la barra de menú se puede utilizar ThemeStudio. SoftwareSoluciones
Estosel tema se debe copiar a Mis documentos \ WYSIWYG Web Builder \ system \ menú de \
Para más detalles sobre cómo crear sus propios temas menubar lea:

263
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Cómoañadir un tema creado con Theme Studioa WYSIWYG Web Builder en el capítulo barra de menú.

Tab Menu
Latemas para el tabmenu se almacenan en la carpeta:
Mis documentos \ WYSIWYG Web Builder \ system \ tabmenu \
Vertambién la descripción de menú Ficha.

Roller tema
Muchos de los widgets jQuery puede ser de estilo mediante el uso de temas ThemeRoller.
Nuevos temas debese instalará en la carpeta 'ThemeRoller' de WYSIWYG Web Builder:
Mis documentos \ WYSIWYG Web Builder \ system \ ThemeRoller \

Ustedpuede crear fácilmente los temas personalizados visitando el sitio web


ThemeRoller:http://www.themeroller.com

Paso 1
Ira la página web ThemeRoller:http://www.themeroller.com

Paso 2
Seleccione uno de los temas predefinidos o crear su propio tema.

Paso 3
Descargar el tema a su ordenador.
Asegúrese de seleccionar "Todos los componentes y de la versión 1.8.x para jQuery 1.4+.
En 'Ajustes de tema avanzadas' puede especificar el nombre de su tema. Llamémoslo 'MyFirstTheme'.

El descargadosarchivo está en formato zip y se llamará algo así como: jquery-ui-

1.8.2.custom.zip Paso 4
Abrir la cremalleralos archivos en una carpeta temporal en
su disco duro. Hay una gran cantidad de archivos en la
postal que usted no necesita.

Vas aencontrar el tema personalizado en: desarrollo de haz \ themes \ MyFirstTheme


(donde MyFirstTheme es el nombre de su tema).

Vas anecesitará copiar esta carpeta completa a la carpeta Constructor ThemeRoller Web:
Mis documentos \ WYSIWYG Web Builder \ system \ ThemeRoller \ MyFirstTheme

Lawil nuevo tema ahora estará disponible la próxima vez que abra las propiedades de los objetos jQuery.

264
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Creación Boletines
Aunque un Boletín HTML parece sólo otra página HTML, esto desafortunadamente no es del todo
cierto. A diferencia de los navegadores modernos, clientes de correo electrónico sólo admiten un
subconjunto limitado de HTML. La mayoría de los clientes de correo electrónico no soportan CSS y allí
para usted tendrá que seguir algunas pautas para asegurarse de que sus boletines se pueden mostrar
en los principales clientes de correo electrónico.

Lapaso más importante es establecer el modo de diseño de la página para 'tabla de disposición'. Puede
hacerlo en la página de propiedades (Menú-> Página-> Página Propiedades-> Misc-> Modo
Presentación).
Ahora WYSIWYG Web Builder utilizará tablas (invisibles) para colocar los objetos en la página. Esto
tiene una gran desventaja: no se puede solapar objetos! Por lo que su diseño no puede tener objetos
encima de la otra.

APara evitar esta limitación puede utilizar la opción 'Merge', para fusionar varios objetos en una sola
imagen.

He aquíuna lista de las limitaciones más importantes de


correo electrónico HTML:
 Ustedno se puede poner objetos encima de la otra. La superposición no es compatible.
Combinar objetos para eludir esta limitación.
 Las hojas de estilo CSS externos no son compatibles. (Desactivar en Menú-> Herramientas->
Opciones-> HTML).
 JavaScript(Esto incluye la navegación, eventos, objetos basados jQuery) no es compatible.
 Por lo general se muestran las formas, pero no van a ser funcional!
 Flashy otros archivos multimedia no son compatibles.
 Las imágenes de fondo no son compatibles.
 Los enlaces internos no funcionan, utilice siempre vínculos absolutos
(Porejemplo:http://www.yourwebsite.com/pagename.html)

Consejo:
Siempre pruebe sus correos electrónicos antes de enviarlos a cabo! Una vez que un mensaje se ha
enviado hacia fuera, es imposible tomar de nuevo.

265
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Índice
CMS Buscar, 207
CMS View, 208
La Combobox,96
Acción,87 El gestor de contenidos,194
Active Link color,36 Contenido Place Holder, 120
ActiveX, 105 Contraste, 77
Añadiral botón del carro, 177 Convertira la Forma, 180
Adiciónuna imagen de una página Copiar, 23
web, 15 Agregar texto a la página, Recortar,77
14 Botón avanzada, 92 Animación y transiciones CSS,248
El texto alternativo, 75 Menú CSS,132
Anclas,72 Curva,147
Animación,248 CurvoTexto, 148
Administrador de animaciones,250 Personalizar,54
Apariencia,236 Cortar,23
Aplicar efectos a una
imagen, 16 Autor, 37 D
Por defecto Font,36
B Eliminar,23
Copia de seguridad,61 BorrarColumna, 45
Carpeta de copia de seguridad,61 BorrarFila, 45
Banner,144 Descripción,37
Blog,156 Tipo de documento,33
Bookmark, 72 No Publicar Activos, 24
Marcadores,235 donaciones, 179
Brillo,77 No publicar esta página,34
Lista con viñetas,73 No sincroniceesta página en Navegación Objetos, 34
Button,102
Botón Comprar ahora, 176 E
Menú Edición,23
C Editbox,98
CAPTCHA93 Efectos,77, 79
Carrusel,157 EmbeddedObjeto OLE, 122
Categorías,37 Tipo de codificación,87
CélulaHTML, 46 Los informes de error,65
Relleno de celda,46 Eventos,246
Propiedades de celda,46 Salida,22
Espacio entre celdas,46 Exportacióna
Centroen el navegador, de 33 años HTML, 22
extensiones, 63

Ch F
Juego de caracteres,34 Favoritos Icon,33
Casilla de verificación,95 Extensión de archivo,32
Menú Archivo,21
Editorial Archivo,106
C Cargar archivo, 100
ClipArt,146 Encuentra,23
Duplicar página,26 Flash,107
Cerrar,21 Variables de Flash,108
Cerca del sitio FlashReproductor de
Web,21 CMS vídeo, 109 Flip, 77
Admin 197 Color de fuente,42
Base de datos de CMS, 195 Tamaño de la Fuente,42
CMS Etiqueta, 205 Estilo de fuente,42
CMS Menú, 206 Tipo de fuente,42
CMS plug-ins, 202 Forma,86

266
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Formulario de Área,86 L
Validación de formularios,254
Asistente para formularios,83 Idioma,61
Menú Formato,42 Capa, 115
Herramientas de formato,10 Line,149
FTP,59, 231 Link,41
Modo de pantalla completa,25 Color de los vínculos,36
Enlaces,233
Lock, 48
G Bloquear todo, 48
GDI + de la Información,257 Tamaño de página de bloqueo, 49
Estilos Generales,43 Explotación forestal,59
Generador,37 Herramientas Login- Admin, 183
Empezando,8 Herramientas Login- Cambiar
Global Reemplazar,68 contraseña, 185 Login
Go menú,133 herramientas - Editar Perfil, 193
Gradiente Administrador de Herramientas Login-
estilos,245 Estilos de Iniciar sesión, 187
gradiente, 43 herramientas Iniciar
Espaciado de cuadrícula,49 sesión - Salir, 188
Guía de Fronteras,49 Herramientas Login- Protegido
Ajustes de guía,49 Página, 190 herramientas Iniciar
sesión - Regístrate, 191
Iniciar sesión -Contraseña herramientas de
H recuperación,189
Manijas,15 Buscar en el diccionario, 43
Los campos ocultos,91
Línea Horizontal,74 M
HTML, 111
HTML 4.01 Transitional, 33 Usar por omisión, 34
Tono / Saturación,Hoja de Marquee,80
estilo 77 de hipervínculo, Fotograma máster,120
236 estilos de Objetos maestros,118
hipervínculo, 43 Media Player,130
Los hipervínculos,17 Mega Menu,134
MenúBar, 136
Nombre del menú,32
YO Combinar celdas,45
Imagen,75 Meta Tags,37
Botón de imagen,101 Mobile Theme Manager,67
Mapa de imagen,159 Mobile Web Design, 251,
Importar HTML, 28 252
Marco en la línea,114
Insertar Menú,41 N
InsertarFilas o columnas, 45
InsertarTabla, 45 Barra de navegación,138
Nueva página,26
Nuevo sitio Web,
J 21
Java, 113 Nueva WebSitio De plantilla, 21
jQuery acordeón,210 News Feed Ticker, 169
jQuery Autocompletar,211 Notas,123
jQuery Button, 212
jQuery DatePicker,213 O
jQuery diálogo,214
Menú jQuery,216 Administrador de objetos,242
jQuery Progressbar,218 Objeto contornos,25
jQuery Slider219 Sitio Web Open,21
jQuery Spinner,221, 225, 226, 227, 228, 229 opciones, 55
jQuery Tabs,217
jQuery Tooltips,222, 223 P
Pie de página,124
K Cabecera de la página,125
Palabras clave,37 Página Altura,32

267
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

PáginaHTML, 28
Página Idioma,34
Propiedades de la página,30
Ancho de página,32
Menú del panel,140

268
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Pega,23 Guardar,22
Pastaen su lugar, 23 Garabato,152
donaciones de PayPal, Búsquedaen Google, 43
179 Búsqueda Índice,64
Herramientas de comercio Seleccionar,41
electrónico PayPal, 175 Seleccionar todo,23
PayPal Cesta de la Forma,153
compra, 177 Galería de ComprasCesta, 177
fotos, 161 Mostrar cuadrícula,49
PHP Iniciar sesión Contratarpara obtener una cuenta PayPal, 175 Site
Herramientas, 180 Manager, 12, 238
Polígono, 151 SitioMapa, 53
Vista Búsqueda en el sitio,172
previa,18 Sitetree,141
Vista previa de la Slide Show,171 Ajustar a la
carpeta,59 cuadrícula, 25 Dividir celda, 45
Preestrenoen el
explorador, 22 Vista
previa de Alcance, 59
PropiedadesInspector, 13,
244
Publicar,1
9
Opciones de
publicación,59
Publicaren una carpeta
local, 19 Publicar su sitio
web, 230

Q
Quicktime,127

R
Botón de
opción,103
Listousar Java Scripts, 164
Real Player,128
Rehacer,
23
Reflexión,75
Retire el formato, 43
Eliminar enlace,
43
Retire Página 26
Cambiar el
nombre de la
página,27
Reemplaza
r,24
Volver a
muestrear,77
Restaurar tamaño del
original,24 Imagen de
sustitución, 165
Rollover
texto,166
Girar,16, 77
Rotación,76
RSS Feed,167
Gobernan
tes,25

S
269
WYSIWYG Web Builder 10 Pablo
SoftwareSoluciones

Plantillas,77 ú Ver, 25 Visitado el


Administrador de estilos,245 Enlace de color, 36
Suscripciones y pagos
periódicos,178 SWFObject, 108 W
Símbolo,41
Fuentes de
seguridad Web,44
T Espacio de
Menú de la pestaña, 142 trabajo, 11
MesaHTML, 46 Cómo ajustar el texto,126
Tabla de menús,45
Tablas,45 X
Tabs,11
Target tamaño de la pantalla,32 XHTML 1.0 Transitional, 33
Plantillas,21
Texto,80, 81 Y
Menú de texto,143
TextArea,104 You Tube, 131
Theme Manager,66
Estudio temático,137 Z
Timer,174
Título,32 z-index,243
Caja de herramientas,11, 69 Zoom, 25
Menú Herramientas,51 z-orden,243
Transición,249
Transiciones,40

U
Deshacer,23
Desbloquear,48
Desbloquear todo,48
Base de datos de usuario,181

V
Verifique Links,52
V
i
s
t
a
B
o
t
ó
n

d
e
l
c
a
r
r
o
,
1
7
7

M
e
n

270

Potrebbero piacerti anche