Tutorial sobre widgets de Spry en Dreamweaver

de Adobe Dreamweaver, un programa que lleva la página web y desarrollo web, viene con muchas herramientas para la creación de elementos de las páginas web y efectos sin tener que escribir mucho código. Uno de los más útiles de estas herramientas es widgets de Spry, que son elementos de la página web pre-hechos, tales como barras de menús, mapas de Google, galerías de fotos, los espectadores de productos 3D, y muchos otros objetos y efectos que se pueden desplegar en sus páginas Web. Dreamweaver tiene varios widgets incorporados, y se puede descargar otros de Adobe Dreamweaver Exchange, donde los usuarios de Dreamweaver suben y se intercambien los widgets de que han creado.

Instrucciones

Built-in Widgets

1 Abrir una página HTML de Dreamweaver existente en la que desea insertar un widget, o iniciar una nueva haciendo clic en "Archivo" y "Nuevo". Esto abre el cuadro de diálogo Nuevo documento. Elija el tipo de página y diseño que desee, a continuación, haga clic en "Crear".

2 Haga clic en el área de la página Web en la que desea insertar un widget.

3 Haga clic en el menú "Insertar" y seleccione "Spry", a continuación, seleccione el widget que desea utilizar. Si se trata de una nueva página, Dreamweaver le pide que guarde la página. Haga clic en Aceptar." Esto muestra el cuadro de diálogo Guardar como; un nombre y guardar la página.

El menú de Spry tiene alrededor de 20 diferentes widgets en él, que van desde los elementos de formulario, como campos de texto, áreas de texto y casillas de verificación, a varios tipos de menús, incluyendo la mosca de espera verticales y horizontales y menús desplegables, así como los paneles con fichas y acordeón (plegable) menús. Dreamweaver inserta el widget en el cursor. Ahora puede editar como lo haría con cualquier otro objeto Dreamweaver - mediante la edición de las hojas de estilo en cascada (CSS), o editando el código en "Split" o ver "Código".

Dreamweaver Exchange y Reproductores

4 Abrir una página HTML de Dreamweaver existente en la que desea insertar un widget, o iniciar una nueva haciendo clic en "Archivo" y "Nuevo". Esto abre el cuadro de diálogo Nuevo documento. Elija el tipo de página y diseño que desee, a continuación, haga clic en "Crear".

5 Haga clic en el menú "Insertar", seleccione "Widget" para abrir el cuadro de diálogo Widget, a continuación, haga clic en "Widget Browser". Esto abre el navegador Adobe Widget. Conectarse a Dreamweaver Exchange desde aquí y descargar widgets a su ordenador.

6 Haga clic en el botón de "intercambio de Adobe" en la esquina superior izquierda de Adobe Widget Browser. Si usted no tiene una cuenta en adobe.com, se le pide que cree uno; complete la información solicitada y haga clic en "Enviar".

El navegador de Elemento muestra todos los widgets disponibles. Haga clic en el widget que desea utilizar; una descripción de las pantallas de widgets. Para descargar el widget, haga clic en el botón "Añadir a Mis widgets" en la esquina inferior derecha de Adobe Widget Browser.

7 Haga clic en "Ir a Mis widgets" y seleccione el widget que ha descargado. La mayoría de los reproductores tienen varias configuraciones predefinidas que puede elegir de la columna de la izquierda, o haga clic en el botón "Configurar" para hacer sus propios cambios de configuración. Haga clic en el botón "Código" cerca de la parte superior de la ventana del explorador de Adobe Widget para mostrar el código del widget, seleccione el código y pulse la tecla "Ctrl" y "C" para copiar el código.

8 Ir al documento de Dreamweaver y pega el código en la página Web. Asegúrese de que Dreamweaver es ya sea en un partido o un modo de edición de código, y pegar el código en la ventana de código, no la ventana de visualización. También asegúrese de que se pega el código en el que desea que el widget para que se vea.

Consejos y advertencias

• Después de haber pegado el código del widget en su página Web, puede editar el objeto creado por el widget al igual que lo haría con cualquier otro objeto en Dreamweaver.
• Algunos de los widgets de Dreamweaver Exchange y crear páginas web enteras, en lugar de fragmentos de código. En estos casos, copiar todo el código, volver al documento, seleccionar todo el código en el documento y sustituirlo por el código del widget.