Abrir un Pop-Up utilizando DreamWeaver es una tarea muy sencilla. Un PopUp es una nueva
ventana que aparece aparte de nuestra web con la peculiaridad de que podemos configurarla en posición, tamaño y también en la cantidad de barras de herramientas que queremos que aparezcan.
Lo primero que necesitaremos para el PopUp es un enlace “vacío”. Para crear un enlace vacío seleccionamos una palabra o frase, vamos a la barra de propiedades (Ventana > Propiedades) y en “Vínculo” ponemos almohadilla.
A continuación, todavía con el enlace seleccionado, vamos a Ventana > Comportamientos y en la ventana que aparece pulsamos en el más (+) y escogemos “Abrir ventana del navegador”.
En esta ventana rellenaremos los campos que nos interesen. Primero la url a mostrar, que podemos escribirla directamente si lo deseamos, las medidas, opciones adicionales y el nombre de la ventana, que podemos llamarla como queramos.
Una vez rellenado este cuadro (sólo con las opciones que queramos) pulsamos en “Aceptar” y ya tendremos listo el popup, que se abrirá al hacer click sobre el enlace.
En la ventana de comportamientos, si tenemos seleccionado el enlace del PopUp, veremos cómo aparece el PopUp que hemos definido y además podemos ver que aparece “onClick”. Si pulsamos ahí podremos escoger otros eventos, por ejemplo para que se abra al hacer doble click o al pasar el ratón por encima.
Fuente: http://www.todo-dreamweaver.com/
CREAR UNA VENTANA POPUP
Este videotutorial está explicado en un ingles escrito muy simple por lo que todo el mundo lo puede entender. Es muy útil ya que te explica paso a paso como crear una ventana popup para tu sitio web.
TUTORIAL DREAMWEAVER
Introducción:
En el trabajo sobre este tutorial hemos utilizado las versiones de Dreamweaver 3 y 4 para que este tutorial sea compatible con ambas versiones. Ambas versiones que tenemos están en inglés. Algunos de los nombres de los menús y objetos en español los hemos obtenido del libro de Oscar Peña, para la versión 4 de Dreamweaver supongo que los nombres no habían cambiado, pero para evitar confusiones, cuando indiquemos algo propio para Dreamweaver 4 que no esté en Dreamweaver 3 pondremos los nombres originales en inglés junto con nuestra traducción al castellano. En todo caso, como este tutorial tendrá bastantes imágenes para apoyar el texto no tendrás problemas en ubicar los menús y objetos en tu versión de Dreamweaver en español.
No se puede enseñar en un tutorial de pocas páginas todo lo que aprenderás de un libro de 300 o más páginas pero después de seguir este tutorial de Dreamweaver serás capaz de orientarte en su entorno, de diseñar páginas sencillas y administrar tu sitio Web.
No se requiere ninguna experiencia previa de Dreamweaver para seguir este tutorial pero suponemos que sepas utilizar Windows y aplicaciones para Windows (Word o Word Pefect por ejemplo), entiendas los términos como por ejemplo "barra de tareas", "menú contextual", "teclas de acceso directo", "barra de menús", "barra de herramientas", y sepas como copiar, pegar, insertar objetos y guardar tu trabajo.
Entorno de trabajo en Dreamweaver y creación de una página Web:
Dreamweaver es un editor del tipo WYSIWYG, es decir, un editor visual que permite diseñar las páginas sin saber nada de HTML. Pero nunca está de más tener el conocimiento de este lenguaje, los editores WYSIWYG no son perfectos y pueden cometer errores o generar también bastante código basura. Para esto Dreamweaver dispone también del editor HTML o permite configurar un editor HTML externo si así lo deseamos. Para ver el código HTML pulsamos F 10 y se abrirá la ventana del editor, en la misma ventana tenemos el botón del editor externo para utilizar otro programa de edición HTML.
En el Dreamweaver 4 además podemos tener ambas vistas: código y diseño a la vez, tienes esta opción en el menú "Ver" o puedes usar los botones correspondientes de la barra de herramientas que están resaltados en rojo en esta imagen:
Para crear una nueva página utiliza el menú "Archivo" / "Nuevo". Tienes las opciones para crear una nueva página o crear una página desde una plantilla previa.
Para insertar objetos ( por ejemplo, imágenes, tablas o animaciones Flash en tu página puedes usar el menú Insertar o la ventana de objetos:
Si no la ves utiliza el menú "Ventana" / "Objetos" o Ctr+F3.
Para utilizar la ventana de los objetos de Dreamweaver, arrastra el icono del objeto que necesites, por ejemplo el icono de la imagen hacia la página, y te aparecerá la ventana del dialogo para indicar la ubicación de la imagen que quieres insertar.
Siempre puedes recurrir a la ventana propiedades de Dreamweaver para editar las propiedades de un objeto:
La ventana que ves en esta imagen corresponde a las propiedades del texto, las opciones de la ventana cambiarán según el objeto que insertemos. Para verla, pulsa el objeto con el botón secundario en el objeto que quieras editar o utilizar el menú "Ventana" - "Propiedades", o las teclas Ctrl+F3.
Los objetos de Dreamweaver accesibles desde la ventana de Objetos:
Si pulsamos el pequeño triangulo que aparece en la parte superior derecha de la ventana de objetos podemos acceder a diferentes ventanas de objetos. A continuación viene la descripción de diferentes ventanas y objetos de Dreamweaver:
Común:
Es la ventana que aparece por defecto y contiene los objetos más comunes de Dreamweaver
Insertar imagen - para insertar objetos gráficos: ficheros .gif, .jpg o .png.
Insertar imagen de sustitución - permite crear los efectos "rollover" - botones o imágenes que cambian su apariencia al pasar el cursor sobre ellas.
Insertar tabla - como su nombre lo indica sirve para insertar tablas. Las tablas son un elemento todavía muy popular para colocar los contenidos de las páginas.
Insertar datos tabulares - Permite insertar datos de una hoja de cálculo.
Insertar barra horizontal - el elemento HTML definido por la etiqueta <HR> muy popular para separar los contenidos en una página Web.
Insertar barra de exploración - son unas barras de navegación creadas con tablas y JavaScript.
Insertar salto de línea - agrega espacio adicional entre los objetos o líneas de texto (la etiqueta <BR> en HTML).
Insertar vínculo de correo electrónico - para insertar vínculos de tipo "mailto" para abrir un nuevo mensaje de correo con la dirección incluida en el campo "Para". Si quieres saber más sobre este tema lee este artículo: Outlook Express: algunos accesos directos de utilidad
Insertar fecha - permite introducir la fecha y la hora de modificación de la página.
Insertar Flash - para insertar objetos creados con Macromedia Flash en tu página.
Insertar Shockwave - para insertar aplicaciones creadas con Macromedia Director.
Insertar Generator - contenidos dinámicos de este programa de Macromedia basados en las plantillas colocadas en el servidor.
Insertar HTML de Fireworks - inserta y convierte el código nativo de Macromedia Fireworks.
Insertar subprograma - para agregar applets Java a la página.
Insertar ActiveX - inserta objetos desarrollados con la tecnología ActiveX de Microsoft.
Insertar Plug-in - para insertar los plugins para Netscape (por ejemplo vídeo o sonido).
Para insertar formularios en una página Web, no hablaremos del tema en este tutorial porque será tratado en nuestro próximo tutorial de Dreamweaver.
Marcos
Permite crear páginas con marcos ("frames"). No trataremos este tema en este tutorial porque estamos absolutamente en contra de su uso (no son amigables para los navegantes ni para los buscadores). Preferimos utilizar barras de navegación. Es solo nuestra opinión personal, si te gustaría utilizar marcos en tu Web encontrarás la información que necesites en cualquier manual o libro de HTML.
Head
Esta ventana es muy importante: nos permite insertar código en la cabecera del documento.
Insertar Meta - son las etiquetas opcionales para los servidores Web, por ejemplo las etiquetas de palabras clave o de descripción.
Insertar palabras clave - la meta etiqueta de las palabras clave("keywords" en HTML) de nuestra página. Puede ser útil en algunos buscadores aunque la mayoría no le hace demasiado caso.
Insertar descripción - Es una meta etiqueta muy importante ("description" en HTML), trata de colocarla siempre, muchos buscadores la toman en cuenta a la hora de indexar la página. Debe ser una frase completa que describa lo mejor posible el contenido y el propósito de nuestro sitio.
Insertar la actualización - Meta "Refresh" en HTML, obliga al navegador a refrescar la página pasado un intervalo de tiempo o cargar una página diferente. Muy útil en los casos cuando nuestra página había cambiado de dirección y queremos que los navegantes que vengan a la URL antigua sean redirigidos automáticamente a la nueva dirección.
Insertar base - esta opción nos sirve si tenemos todos los documentos en un servidor distinto del de la página raíz, en este caso si utilizamos esta meta etiqueta todos los vínculos relativos serán interpretados automáticamente como absolutos, por ejemplo "Introduccion.htm" se interpretaría como "http://tututorial.webcindario.com/Introduccion.htm" si hemos especificado http://tututorial.webcindario.com/ como base.
Insertar vínculo - permite establecer relaciones entre los documentos, esta opción es muy útil para , por ejemplo, vincular rápidamente las hojas de estilo.
Objetos invisibles
Los objetos invisibles pueden ser puntos de fijación con nombre, comentarios, secuencias de comandos o espacio indivisible (éste último ya no existe en Dreamweaver 4).
Punto de fijación con nombre - nos sirve para poder navegar dentro de un documento. Con este objeto podemos fijar un destino para el vínculo.
Comentario - permite insertar texto de comentarios que permiten ayudar a interpretar el código pro serían invisibles desde el navegador, en HTML correspondería a la etiquetas <!-- -->.
Secuencias de comandos - con esta opción podemos insertar JavaScript y VBScript en nuestro documentos.
Espacio indivisible - inserta un espacio en blanco ( en HTML), ya no existe en Dreamweaver 4.
Y ahora, después de leer todo esto prueba crear algo en tu página, escribir algo de texto, insertar una imagen por ejemplo.
Puedes visualizar tu página en el navegador desde el menú "Archivo" / "Vista previa en el navegador" ("Preview en browser"). Por defecto Dreamweaver mostrará nuestro navegador predeterminado que tengamos instalado pero siempre podemos agregar un navegador secundario desde el mismo menú.
Creación y gestión de un sitio Web
Espero que ya pudiste crear una página sencilla con Dreamweaver pero ahora todavía nos hace falta aprender a manejar nuestro sitio Web como un conjunto.
Para hacerlo utilizaremos el menú "Sitio/Nuevo sitio", no aparecerá una ventana como ésta:
Desde esta ventana podemos determinar la ubicación local y remota de los ficheros de nuestro sitio.
Si especificamos el tipo del servidor remoto como "FTP" podremos sincronizar nuestra carpeta local con el servidor remoto.
Una vez creado el sitio siempre podremos abrir y administrarlo desde el menú "Sitio".
http://www.svetlian.com
CREACION
DE UNA PAGINA WEB CON
PHOTOSHOP Y DREAMWEAVER
Ejemplo de
como crear una página
web mediante Photoshop y
Dreamweaver mediante un
valioso tutorial
Videotutorial donde solucionaremos el problema de los hiperlinks y del email link para colocarlos en nuestra página web. El video está en ingles pero por medio de la imagen se entiende bastate bien.
P.Inicio 
Favoritos 
