Formularios en Dreamweaver

Dreamweaver también nos permite realizar todos estos tipos de formatos llamados encuestas que son muy comunes en internet.
Para crear un formulario debemos crear una tabla, posteriormente en la pestaña insertar encontraremos varias opciones de botones en la opción Formulario. Entre estos esta la opción de elegir Si o No a una pregunta, o escribir libremente alguna frase, también encontraremos el botón que  nos permite dar determinado numero de opciones y que el encuestado escoga una de ellas.

En el ejemplo de la parte superior encontramos el dato de nombre el cual nos permite escribir libremente, posteriormente encontremos Dirección de correo y contraseña que nos permite hacer lo mismo; la diferencia es que en contraseña podremos agregar la opción de ocultar caracteres, luego sigue un botón que se llama casilla de verificación, debajo estarán dos opciones de elección única y al final podremos agregar el botón enviar. Dreamweaver nos permite agregar a este botón nuestro correo electrónico y así hacer que todas lleguen a este, también dreamweaver nos permite en cada botón arreglar detalles como numero máximo de caracteres, la posición en que lo queremos tener (Alineado, Centrado) y el tamaño de este.

Menu Desplegable en Dreamweaver CS6

Barra de menú Spry

Una de las herramientas que nos ofrece dreamweaver para la creación de nuestra pagina web, es la de agregar un menú de barras spry.

Para insertar este tipo de menú:

1. Insertamos una tabla de 1 sola columna y fila sin borde.

2.Dentro de la tabla, damos clic en la pestaña insertar opción objetos de diseño y seleccionamos barra de menu spry.

3.Nos aparecerá el recuadro con un borde de un tono azul claro, en el cual daremos clic para modificar la cantidad de secciones que queremos tener, las pestañas etc, el nombre, la cantidad de subdivisiones y si queremos agregar o eliminar mas o menos pestañas.

4. Después de haber dispuesto el nombre a cada pestaña podremos agregar una función especifica a cada recuadro, entonces en la parte inferior damos clic en vinculo y ya habiendo descargado previamente una imagen o pagina web la seleccionamos y así quedara enlazada con la casilla.

5.Finalmente damos vista en vivo o la abrimos en cualquier explorador de nuestro computador y así podremos comprobar como al dar clic en cada sección del menú aparecerá lo que enlazamos.

Marcos en Dreamweaver CS6

La herramienta de Marcos es de muy buena utilidad a la hora de diseñar nuestra pagina web ya que ella nos permite pasar imagenes en un mismo lugar sin desplazarnos a otro lugar lo cual crea un aspecto estetico en nuestra pagina. Para hacer esto primero tengo que dar clic en la pestaña insertar, en la opcion HTLM, en marcos, ahi doy clic en el marco que quiero insertar puede ser superior, inferior, derecho e izquierdo y lo mas importante es asignarle nombre ya que esto sera importante a la hora de crear el vinculo.

Luego de tener todos los marcos creados puedo crear en un costado las opciones que quiera y descargar imagenes de acuerdo a cada una, para crear el vinculo subrayo toda la palabra y doy clic izquierdo ahi me aparecera la opcion crear vinculo, des pues de esto tengo que llenar una tabla la cual me pide el nombre del vinculo que seria la palabra, el hiperviculo con la respectiva imagen la cual la busco en archivos y finalmente el destino que quiero que tenga; despues de aplicar este mismo proceso con todas las opciones teniendo en cuenta que todas deben tener el mismo destino, le doy en la opcion de dreamweaver que me permite visualizar en mi explorador y ahi vere como se pasan la imagenes en un mimos marco sin cambiar de pagina o posicion, tal como se observa en las imagenes.

Adobe Flash Professional CS6

Para crear nombres, logos, o titulos adobe flash CS6 nos ofrece una muy buena alternativa, ya que nos permite dar movimientos o animacion a nuestro objetos de la pagina web. Para mi pagina web utilize animacion en el texto, para hacer esto abri adobe flash inserte mi nombre, luego le di clic derecho convertir en simbolo, luego cree la interpolacion de movimiento que es el rango en el cual se mueves, despues en la columna derecha di clic en la opcion de traslacion y rotacion 3D, asigno primero la rotacion que quiero que tenga y luego le doy la traslacion que ya es el movimiento como tal, finalmente le doy reproducir y lo eporto como pelicula SWF para poderlo inserta en dreamweaver CS6.

Tablas en Dreamweaver

Las tablas en dreamweaver CS6 se utilizan para organizar la información de una manera mas eficiente, se insertan en la pestaña insertar y se elige el numero de columnas y filas que se desea tener despues de estoy queda habilitado para insertar cualquier tipo de información en cada casilla incluyendo imágenes  archivos SWF y hipervinculos.

Pagina Web

Mi Profesión

Para la elaboración de mi pagina web, utilice 2 programas diferentes: Paint y Dreamweaver.

En el caso de paint, lo utilice para la elaboración de las dos imágenes que ocupan los paneles superior e inferior, ya que en cuestión de diseño dreamweaver no nos ofrece muchas alternativas. Luego de haber hecho las imagenes en paint las guardo en mi carpeta raíz de dreamweaver y las inserto, en ese momento comienzo a utilizar las herramientas que me ofrece dreamweaver, ya que previamente debo crear una tabla, en mi caso cree una tabla de 4 filas y 7 columnas para el menú.

Así, inserto en la primera fila el encabezado de mi pagina web, en la segunda fila hago las subdivisiones sin hipervinculo del menú y en la tercera y ultima fila inserte una imagen de los servicios que ofrece la pagina web.

Encabezado Pagina web

Continuo, utilizando la herramienta de rectángulo para crear la cabecera de mi pagina (rectángulo 908 x 117), creo un rectángulo en la parte inferior de las mismas dimensiones del grande(solo ancho), luego en textura aplico Linea horizontal 2, de modo que me quedan con un efecto horizontal, en la paleta de colores escoge color plomo a blanco y pongo el plomo en la parte superior; hasta ahí he terminado con la edición de la cabecera de mi pagina web.

Fireworks

Fondo pagina web

Utilizando el programa Adobe fireworks CS6 puedo crear fondos de pagina web. El ejemplo que se puede apreciar en la parte superior fue elaborado de la siguiente manera:

1) Cree un nuevo documento de fireworks con dimensiones de 1000 x 720

2)Cree un rectángulo como fondo en el cual aplique degradado azul con ayuda de las propiedades que se encuentran en la parte inferior del programa

3)Encima del rectángulo creado, cree una barra rectangular la cual tiene degradado azul, con ayuda de los filtros ofrecidos en el programa la ilumine y le puse la opción de relieve para que resaltara sobre el fondo

3)Cree otro rectángulo debajo de la barra con dimensiones mayores, como propiedad le puse textura de lineas horizontales 02 y maneje el degradado con la herramienta que ofrece el programa.

4)Por ultimo,nombre todos los fondos (rectangulos) que habia creado con ayuda de las capas que aparecen en la parte derecha del programa y luego inserte el ultimo rectangulo que puse de ultimo, le cambien el degradado por plomo-blanco y lo ilumine con sombra negra.

Y ya esta, asi creas tu fondo de pagina web en fireworks:)

Como creo una pagina web?

Crear pagina web

More PowerPoint presentations from Lina Maria Jaimes Paez

Medicine Life

Pagina Web (Diseño 1)

Diseño 2

Dreamweaver CS6

Dreamweaver CS6

More PowerPoint presentations from Lina Maria Jaimes Paez