viernes, 25 de abril de 2014

Como insertar Formularios

Los formularios sirven para que los usuarios o visitantes de la página envien un comentario o consulta al cliente.

Insertar el contenido


  1. Lo primero que se necesita para crear el formulario es colocar la etiqueta <form> que hace referencia al formulario. Entrar a la ventana de “Insertar” y cambiar la sección de común por la de formulario. Le damos clic a la palabra formulario.
  2. Dentro de este <form> se coloca el cursor y se insertan los campos.  Ingresar a la ventana de “Insertar” y presionar el botón campo de texto. En la siguiente ventana colocar el nombre del campo en la secciónetiqueta. Verificar que en Estilo este seleccionada la opción “Adjuntar etiqueta de título utilizando el atributo ‘for’ “. Luego colocar aceptar. Repetir este paso cuantas veces sea necesario.
  3. Para crear un área de texto se presiona la opción área de texto de la sección de formularios.
  4. Para insertar un botón solo debe darle clic a la opción botón
  5. La apariencia del formulario va ser la siguiente:

Apariencia del formulario

  1. Para alinear los campos, crear el estilo para la etiqueta <label>. Colocar la opción block en display . Este cambio es importante para que la etiqueta tenga las propiedades de altura, ancho, margenes, etc.
     2.  Luego en la categoría cuadro se modifica el ancho de la etiqueta, el float y los márgenes si fuera           necesario.

Como Insertar una tabla en dreamweaver



Las tablas sirven para organizar datos e imágenes en un archivo HTML.
Consisten de tres elementos básicos: filas, columnas y celdas (que surgen de la intersección de una fila con columna). Para crear una tabla debemos hacer clic sobre el botón Insertar tabla (Insert Table) de la paleta de Objetos.

Se abrirá un cuadro de diálogo que nos preguntará cuántas filas y cuantas columnas tendrá nuestra tabla, qué ancho tendrá y si tendrá borde.


Propiedades Tablas


El Cellpading: especifica la cantidad de pixeles entre la celda y el borde de la celda.

El Cellspacing: especifica la cantidad de pixeles entre celda y celda.
Las tablas se hacen en principio con las medidas en porcentaje pero si luego queremos que el usuario al achicar su navegador, éste no intente redimensionar la tabla al nuevo tamaño, lo que debemos hacer es convertir las medidas de porcentaje a pixeles. 

Esto se hace con la tabla seleccionada desde el inspector de propiedades. Hay un icono con la sigla Px que permite convertir las medidas de tabla a pixeles.


Como insertar un botón en dreamweaver

Los Botones Flash al igual que las imágenes de sustitución describen un comportamiento interactivo, este comportamiento se activa al pasar el cursor del mouse encima del botón. En esta lección usted aprenderá lo siguiente:
Para proceder a insertar un Botón Flash usted deberá dirijirse al menú principal del programa y seleccionar la opción Insertar, inmediatamente seleccione la opción Media y a continuación elija del menú emergenteBotón Flash, se muestra el resumen de esta operación a continuación.


Seleccionando la opción que nos permitira insertar un Botón Flash


En este instante, usted podrá apreciar el cuadro de dialogo Insertar botón Flash, se procederá a describir de manera breve cada campo que compone este cuadro.
Muestra:
Este campo le permite obtener una vista previa del botón flash, también podrá visualizar el comportamiento interactivo al pasar el cursor mouse encima del botón.
Estilo:
Macromedia Dreamweaver le permite escoger entre ciertos estilos de manera predeterminada, aunque usted podrá obtener más estilos al hacer click en la opciónObtener más estilos... que aparece en este cuadro de dialogo.
Texto del botón:
Existen ciertos estilos de botones Flash que permiten la inserción de texto, aproveche esta propiedad (en caso de ser aplicable) para aclararle al usuario o visitante de su sitio la funcionalidad de dicho botón.
Fuente:
Esta opción le permite escoger el estilo de fuente que se mostrará en el texto del botón.
Tamaño:
Esta opción le permite escoger el tamaño de la fuente que se mostrará en el texto del botón.
Vínculo:
Este campo le permite incluir un hipervínculo, éste puede ser tanto interno como externo a su sitio.
Destino:
Este campo le indicará donde se abrirá la página, este campo puede tomar los valores de: _parent_blank_top y _self.
Color de fondo:
Este campo le permitirá establecer el color que contendrá el fondo del botón, de manera predeterminada el color será el blanco, usted podrá modificarlo según su conveniencia.
Guardar como:
Este campo le permitirá establecer el nombre del botón Flash, esrecomendable que los botones Flash se guarden en la misma carpeta donde se encuentra la página que hace referencia al botón en cuestión
Este campo le permitirá establecer el nombre del botón Flash, esrecomendable que los botones Flash se guarden en la misma carpeta donde se encuentra la página que hace referencia al botón en cuestión

Como insertar una imagen en DreamWeaver

insertar imágenes
 en un documento. También veremos cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras páginas.

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.
Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Estos formatos son JPG, GIF y PNG.
Para insertar una imagen hay que dirigirse al menú Insertar, a la opciónImagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.




Insertar Imagen

Una imagen de fondo es un gráfico que se repite a lo ancho y alto de toda la ventana del navegador.Podemos definir tanto un color de fondo como una imagen. 
Para insertar una imagen de fondo en Dreamweaver, primero creamos la imagen que queremos utilizar.(Pincha aquí para ver algunos ejemplos de fondo). Después vamos a Modificar| Propiedades de la página| Aspecto | Imagen de fondo y pinchamos en el icono de la carpeta para seleccionar la imagen que vamos a utilizar. Le damos a aceptar y vemos como ha quedado.
Los formatos de imagen que mejor se adaptan a la web son JPG para fotografías y GIF para colores planos, iconos, fondos, texto, además este formato admite transparencia y animación.
Para insertar una imagen en nuestro documento hay varias posibilidades, bien desde la ficha común, pinchando en el icono que tiene un árbol, o bien desde la opción Insertar| Imagen. 
Cuando insertamos una imagen en el documento el inspector de propiedades nos muestra todas sus características (tenemos que tener la imagen seleccionada). 
Ancho y Alto: se refiere al tamaño de la imagen.
Origen (carpeta donde está ubicada).
Alt (el Alt es el texto que aparece enmarcado en un recuadro amarillo cuando nos situamos sobre la imagen al viasualizarla en el navegador). 
Vínculo: si queremos ponerle un enlace.
Edición: son herramientas para el tratamiento de la imagen sobre el documento, recorte, brillo, perfilar bordes.

Dreamweaver CBtis 5


 Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es uno de los programas más utilizados en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium.
Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es de código abierto) y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por parte de Adobe. Las letras CS significan Creative Suite
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++sino rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo,ASPASP.NETColdFusionJSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.
También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.