 Cómo utilizar este curso. |
1. Conceptos básicos de Dreamweaver CS3 2. El entorno de trabajo 3. Configuración de un sitio local 4. El texto 5. Hiperenlaces 6. Imágenes 7. Tablas 8. Marcos 9. Formularios | 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos Avanzados 17. Estilos CSS Avanzado 18. Sitios Remotos | 19. Servidor de Pruebas 20. Páginas Dinámicas 21. Cómo crear un Blog 22. XML y RSS 23. Acceso a datos con Spry 24. AJAX y Spry Framework 25. Spry y Formularios 26. Controles Spry Avanzados |
Í n d i c e d e t a l l a d o |
|
|
Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión de pago de este estupendo programa.
Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.
Si no conoces las características básicas de HTML puedes verlas aquí. |
En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.
También se han incluido efectos spry que se aplican a elementos ya existentes en la página HTML para hacer que se desvanezcan, reduzcan su tamaño, se resalten, etc.
|
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página. Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver. |
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos. |
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet. Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán. Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él. Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores distinguen entrre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imágen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos. |
 |
Veamos las dos formas básicas de arrancar Dreamweaver CS3. |
situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón 
. Puedes arrancar Dreamweaver CS3 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que te explicamos aquí. |
Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones:
Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos. |
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.
|
de la barra de herramientas estándar. Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco, HTML. |
de la barra de herramientas estándar. Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
|
de la barra de herramientas estándar. Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.
Al tener varios documentos abiertos es fácil olvidarse de todos las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. |
de la barra de herramientas estándar. Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es. |
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categoría Página básica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.  |
Una vez introducido el texto, vas a modificar el título y el color de fondo del documento. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Entonces se abrirá una ventana como la que aparece más abajo. |
 |
Cambia el Título por Mi primera página. En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul. Seguidamente pulsa sobre el botón Aceptar. Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro. Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos. |
en una esquina de la imagen, si haces clic en el icono del disquete aparecerá el mismo menú 
Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla. |
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:  |
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraido. Para que te aparezca desplegado debes pulsar sobre el botón |
Si no te aparece, puedes mostrarlo a través del menú 
, que aparece junto al nombre.Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.  |
Después de esto, la apariencia de la primera línea habrá cambiado. Selecciona la imagen y las dos útimas líneas de texto. Pulsa sobre el botón |
para centrarlos.Una vez hayas centrado la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botón  |
y pulsa tres veces sobre el botón 
.Selecciona de nuevo la última línea, y en Vínculo introduce http://www.elpais.es, para crear un enlace a esa otra página:  |
Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12.
Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha de ser htm o html. Por ejemplo, puedes llamarlo prueba1.htm. |
Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien. |
Unidad 2. El entorno de trabajo (I)
Vamos a ver cuáles son los elementos básicos de Dreamweaver CS3 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web. |
| |
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.  |
|
La barra de título contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar. |
|
La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles. |
|
La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir |
|
La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. |
|
La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta ). También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%). |
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes. |
|
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Pulsando sobre el botón Seguramente será la herramienta de Dreamweaver que más vayas a utilizar. |
se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.
|
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez. |
Si lo deseas puedes personalizar el área de trabajo, te explicamos cómo hacerlo aquí |
| |
Puedes cambiar la vista del documento a través de la barra de herramientas de documento. |
|
La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente. |
|
La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código. |
|
La vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra. |
| |
|
A través del menú Unidad 3. Configuración de un sitio local (I
En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo. |
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet. La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica. Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm. |
| |
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios.... Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio. |
Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las características del sitio. |
En el caso de haber seleccionado la opción Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda. Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categoría Datos locales. Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto. Estas tres características son las imprescindibles para definir un sitio local. Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto. Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas. |
Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
|
También podemos utilizar el panel
|
Para practicar puedes realizar el Es posible visualizar un sitio en el panel Archivos o en una ventana. El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. También pulsando F8. |
Para cambiar de una vista a otra hay que pulsar sobre el botón Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio. En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que éste ha sido definido como página principal del sitio y contiene vínculos hacia los otros dos. |
que aparece en la parte superior del panel y de la ventana.
Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc. |
En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a través del sitio, es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado, después no se produzcan problemas al visualizarlas. Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botón Actualizar. |
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente. Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Sino los enlaces no funcionarán correctamente y es posible que algunas imágenes no se muestren. Para subir los archivos via web deberás seguir las instrucciones que te proporcionará tu servidor. La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior. Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de Windows) y, obviamente, nos es mucho más útil para subir los archivos. Uno de los programas gratuitos (si no es con fines comerciales) más utilizados es SmartFTP, desde su página web podrás descargarte el programa y su traducción al español. Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP. Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Host, Usuario y Contraseña. Rellena los campos y haz clic en OK. Se conectará automáticamente y podrás ver una carpeta donde podrás copiar los archivos que hayas creado. Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionándolos a la vez y arrastrándolos a la carpeta (remota) del servidor. Verás como el programa empieza a copiar la información de tu disco a Internet. Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y verás el sitio en Internet!
|
| |
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página. Este cuadro se puede abrir de tres modos diferentes:
|
Las propiedades están organizadas en categorías.
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. Tamaño: permite definir el tamaño de la letra. Color del texto: es el color de la fuente. Márgenes: permiten establecer márgenes en el documento. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarán en los navegadores.
Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver.
Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas. Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no. Vínculos activos: es el color de los vínculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo. |
Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador. Para ver cómo comprobar el tamaño de los documentos, pulsa aquí |
Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. También es posible personalizar los colores a través del botón |
de la parte superior de la paleta.
Los colores pueden asignarse a través de los botones: Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que tienes más arriba. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con valor #3399FF, el botón quedaría del siguiente modo: |
. 
, lo que hace que se despliegue la 
.
|
Unidad 4. El texto
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos. |
| |
Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto.
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo uno.
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc...
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.
Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo.
A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.
Estos botones permiten crear listas con viñetas o listas numeradas.
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de márgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangría a la izquierda del texto. |
|
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Texto. La lista con viñetas (desordenada) se selecciona a través del botón |
, mientras que la lista numerada (ordenada) se selecciona a través del botón 
. Ejemplo de lista numerada (ordenada):
| Ejemplo de lista con viñetas (desordenada):
|
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A través del menú Texto, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú. En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento. |
|
A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación.
Sólo coloca el puntero del ratón sobr«e Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado. Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño. Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:  |
Haz clic en el menú | |
En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado. Los estilos CSS están en hojas de estilo de actualización automática (también denominadas Hojas de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto. También algunas de sus opciones pueden utilizarse para definir atributos de imágenes y otras características que no permitían definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc. Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la página adquirirían la apariencia definida en ese estilo. Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente. |
Con Dreamweaver CS3, las características que apliquemos a un texto crearán automáticamente estilos CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él. Veámoslo:
1. En el documento, se selecciona el texto al que se desea aplicar características concretas. 2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del párrafo que queramos. Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según los nombres de los estilos ya creados. Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades. |
 |
 También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior. | |
Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo. Al aceptar, aparecerá un panel con el nombre Resultados. Cerrar esta ventana. De esta manera se puede crear un estilo para añadirlo a un documento. Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos acceder también de una manera rápida a través del menú Texto, opción Estilos CSS. En el Panel CSS se puede verificar que se ha añadido automáticamente el nuevo estilo. | |
 | |
Para aplicar un Estilo CSS personalizado: En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sitúa el punto de inserción del mouse en un párrafo para aplicar el estilo a todo el párrafo. Si seleccionas un rango de texto dentro de un párrafo, el Estilo CSS sólo afectará al rango seleccionado. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.
|
| |
Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar.
Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los estilos incrustados en un nuevo archivo CSS.
Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras también. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier página que queramos utilizarlos.
Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos...
En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.
Elegimos si queremos Vincular o importar la hoja de estilos.
Si elegimos Vincular la hoja no se incrusta en la página sino que se añade a la página una referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automática en todas las páginas que utilizan la hoja. Esta es la opción más aconsejable si vamos a utilizar el estilo en más de una página, de esta forma sólo será necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas creado.
Si elegimos Importar la hoja se incrusta en la página.
La opción Media te permitirá seleccionar el tipo de medio al que se asociará la hoja de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirán crear hojas de estilos para soportes diferentes. Puedes crear una para screen, que será la que se muestre cuando navegues por Internet, y otra para print que será la que se utilice cuando se imprima el contenido del archivo.
Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.
Unidad 5. Hiperenlaces
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web. |
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen. |
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicación es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../ Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta sería el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Conduce a un documento situado dentro del mismo sitio que el documento actual. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio. En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html. Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser nombre_de_documento.extension#nombre_de_punto. El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre. Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2 Estos tipos de enlace que hemos visto son válidos tanto para referenciar páginas (para crear hiperenlaces) o incluso imágenes u otro tipo de objetos (como veremos en temas posteriores). Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto). Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces. También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas a la hora de referenciar tus objetos. |
| |
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos. |
|
En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de la página. Estos tres colores diferentes son los que se asignan como color de vínculo, de vínculo activo, y de vínculo visitado. Aqui tienes un vínculo de ejemplo: Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqui tienes dos vínculos similares de ejemplo: |
|
Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre debido a que que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la primera imagen vale cero (0). El campo Borde sirve para ponerle un borde a la imagen, independientemente de si ésta va a contener un vínculo o no. Si se pone a cero (0), no aparece ningún borde, ya que esto indica que el tamaño de las líneas que forman el recuadro es cero (0). Puede hacerse un recuadro más gordo incrementando el valor del campo Borde.  Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando. |
Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los visitantes de la web puedan contactar con nosotros. La sintaxis del vínculo en este caso es mailto:direccióndecorreo. Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados. |
También es posible a través del menú Insertar, opción Vínculo de correo electrónico. En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo. |
|
En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vínculos rotos. Si no sabes lo qué son o cómo solucionarlos, consúltalo aquí |
Unidad 6. Imágenes
En este tema vamos a ver cómo 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. Esta información puedes consultarla aquí |
| |
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione Todos los archivos. |
En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior. Lo mismo ocurre cuando se selecciona un documento para crear un vínculo. |
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes. En el caso de insertar la imagen como relativa al Documento la ruta sería: imagenes/aulaclic.jpg Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería: /imagenes/aulaclic.jpg Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio. Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque sí en el navegador. En Dreamweaver aparecerá de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que había sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecerá en el navegador será similar a esta: Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación. |
|
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia: Desde aquí podrás acceder a distintas propiedades: Desde el campo Alt podrás asignarle una ayuda contextual a la imagen, esta se mostrará cuando coloques el ratón sobre ella, y es muy útil de cara a hacer páginas accesibles ya que el texto que se escribe será leído por los programas lectores para invidentes. También es muy útil, como ya hemos visto, si la imagen por alguna razón no puede mostrarse. En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic. Si le damos un valor al campo Vínculo convertiremos al imagen en un link a otra página. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vínculo a un enlace electrónico deberá empezar por mailto: En caso de que le hayas asignado un vínculo podrás decidir en qué ventana quieres que se abra selecionando un valor en el campo Destino. Puedes asignarle un tamaño de borde desde el campo Borde. Y puedes seleccionar su alineación con respecto al texto desde el campo Alinear. Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto. |
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen dentro de la página. Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes: |
Imagen original | Imagen con tamaño modificado
|
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad. Existen dos formas de modificar el tamaño. |
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. |  |
La otra es a través de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen. Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella. |
Pueden crearse vínculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen. Esta información puedes consultarla aquí |
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas. Aquí tienes un ejemplo de rollover. Sitúa el puntero sobre él para ver qué es lo que ocurre. Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución. |
Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.
|
| |
Existen otra serie de imágenes especiales, similares a los rollovers, que suelen utilizarse para crear menús, como pueden ser los botones Flash. Aquí tienes un ejemplo de botón Flash. Sitúa el puntero sobre él para ver qué es lo que ocurre. Para insertar un botón Flash hay que dirigirse al menú Insertar, Media, a la opción Botón Flash, aparecerá el siguiente cuadro de diálogo: A través de Estilo: puede seleccionarse uno de los distintos formatos de botón que se ofrecen. En esta misma ventana hay que especificar también el Texto que mostrará el botón (Texto del botón:), así como el nombre con el que será guardado (Guardar como:) y el vínculo asociado (Vinculo: y Destino:). Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de la carpeta destinada a almacenar imágenes, ya que de no ser así es posible que al intentar asignar un vínculo dentro del propio sitio, Dreamweaver no permita guardar el botón con ese vínculo en una ubicación diferente de la de dicho documento. Recuerda que los botones deben guardarse con la extensión SWF. A través del inspector de propiedades del botón Flash es posible editar de nuevo sus atributos: Puede volver a abrirse el cuadro de diálogo anterior pulsando sobre el botón Editar, y a través del botón Reproducir es posible probar el funcionamiento del botón Flash desde Dreamweaver, sin la necesidad de tener que abrir la página con algún navegador. Después de haber probado el funcionamiento del botón Flash, debe pulsarse de nuevo sobre el botón Reproducir (que habrá cambiado por el botón Detener) |
.
|
| |
El texto Flash es similar a un rollover, pero en lugar de intercambiar imágenes intercambia el color del texto. Para insertar texto Flash hay que dirigirse al menú Insertar, Media, a la opción Texto Flash. En la nueva ventana, además del texto, el vínculo y el nombre con el que será guardado el texto, hay que especificar el color original y el de sustitución. Aquí tienes un ejemplo de texto Flash. Sitúa el puntero sobre él para ver qué es lo que ocurre. |
El inspector de propiedades del texto Flash es igual que el de un botón Flash. |
Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de menú para navegar dentro de una web. Un página web solo puede contener una única barra de navegación. Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de imagen, a la opción Barra de navegación. En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los botones, el vínculo para cada uno de ellos, etc.  A través de los botones superiores de la ventana es posible crear y eliminar botones de la barra de navegación, así como reordenarlos. Con En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todavía no se ha hecho clic). En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el botón y éste estaba mostrando la En Imagen abajo, pones la imagen que quieres mostrar después de que el usuario haya hecho clic en la imagen. En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre sobre el botón y éste estaba De esta forma, si asignas imágenes distintas puedes saber cuál es el último botón que ha sido pulsado (el que tiene Imagen Abajo). Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las mismas imágenes para todos los botones, pero como puedes ver, en el botón del medio aparece inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opción Mostrar "Imagen abajo" inicialmente estaba activa para este botón. Sitúa el puntero sobre los distintos botones, y pulsa sobre alguno, para ver qué es lo que ocurre.
El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está activo, cosa que con un simple rollover no puede hacerse. A través de la opción Insertar es posible especificar si los botones de la barra de navegación van a aparecer de forma horizontal o vertical dentro de la página. |
se crea un botón nuevo, con 
se elimina el botón seleccionado, y con 
se puede modificar la posición del botón seleccionado.
Unidad 7. Tablas
En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde. |
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar. Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla. |
| |
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla. |
El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas. Espacio entre celdas indica la distancia entre las celdas de la tabla. También se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla. Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla. En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla. En Resumen: indicamos una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario. |
En la nueva ventana habrá que especificar el número de Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.
Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el cursor previamente dentro de la celda deseada. | ||||||||||||||||||||||
|
Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando el cursor en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla. También es posible seleccionar una tabla pulsando con el ratón sobre el borde que la rodea, o pulsando sobre la etiqueta Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos menús desplegables (menú de encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten acceder rápidamente a determinados comandos relacionados con la tabla. Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualización seleccionando la opción Anchos de tablas del menú Tabla o también desplegando de la barra de menús, el menú Ver, Ayudas visuales, Anchos de tabla. De la misma forma se desactiva su visualización. Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado, si aparecen dos números, el primer número corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo número es el ancho el ancho visual que aparece en la vista de diseño, por ejemplo en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 píxeles pero al contener una imagen que necesita más espacio, la columna ocupará realmente 142 píxeles (ancho visual de la columna tal como aparece en la pantalla). En este menú vemos que también tenemos la opción Seleccionar tabla. No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas. Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que más te gusta. Estas son las formas de selección: Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón mientras se arrastra sobre las celdas deseadas. Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas. Las propiedades de la tabla se especifican a través de su inspector de propiedades. A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.). Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores. La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada. La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo diferentes de los especificados para la tabla global (en Fnd), el color del Borde de la celda, etc. Dos opciones que posiblemente necesites utilizar con frecuencia serán Horiz y Vert, que definen la alineación del contenido de la celda de forma horizontal y vertical respectivamente. Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura. Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la ventana. No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada. Existen varias formas de añadir y eliminar filas y columnas a una tabla. Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción Tabla. Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no. Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda. También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán. Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla. También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr) A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla. Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto. Mientras que dividir celdas consiste en partir en dos una celda. Una de las formas de dividir y combinar celdas es a través del inspector de propiedades. Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya combinación pueda dar como resultado otra celda, es decir, que su combinación dé como resultado un recuadro. Por ejemplo, en la siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda. En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el número de éstas. A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualización. Nosotros hemos trabajado en todo el tema con el modo estándar, y vamos a seguir trabajando con él, pero se puede pasar a los otros modos a través del menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entre Modo estándar, Modo de tablas expandidas, o modo de diseño. El Modo de diseño se utiliza para dibujar páginas con un diseño determinado, basándose en tablas. Utilizando esta vista, las tablas no han de insertarse obligatoriamente en líneas de texto, como hemos hecho hasta el momento, sino que es posible insertarlas en cualquier punto de la página, y Dreamweaver se encargará de rellenar el espacio vacío, para que sea posible que la tabla aparezca en esa posición. El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes de las tablas para facilitar la edición. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de inserción de forma precisa pero en este modo no vemos la página como quedará exactamente. En este curso nos limitaremos al modo estándar. Siempre que se crea una página web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos tamaños y con distintas resoluciones. Es imposible hacer que una página se vea exactamente igual en todos los monitores de los usuarios que la visitan, pero hay que intentar que su visualización sea lo más parecida posible. La resolución usada de forma más frecuente es la de 800x600, por lo que inicialmente habría que diseñar la página para dicha resolución. Es decir, habría que crear la página en un monitor con dicha resolución, para poder visualizar claramente cómo queda en el navegador, y distribuir el contenido de la página de la forma más adecuada. Normalmente se utilizan tablas, ya que resultan muy útiles para distribuir el contenido de la página. Como recordarás, el tamaño de las tablas puede ser definido en píxeles o en porcentaje. Cuando el tamaño de la tabla sea definido en píxeles, la tabla se verá del mismo modo independientemente del tamaño de la ventana del navegador. En cambio, cuando el tamaño de la tabla sea definido en porcentaje, la tabla se ajustará al tamaño de la ventana del navegador, lo cual implica que el contenido de la tabla se descuadrará. Pulsa aquí para ver una página con tablas de tamaño fijo, en píxeles. Imagina que la página ha sido diseñada para visualizarse correctamente en un monitor pequeño de baja resolución, cuyo tamaño equivale al de la ventana del navegador que se ha abierto. Si modificas el tamaño de la ventana, verás que las tablas son siempre del mismo tamaño. Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldría a visualizar la página en un monitor grande con alta resolución), a la derecha de las tablas aparecerá un gran hueco vacío. Pulsa aquí para ver una página con tablas de tamaño variable, en porcentaje. Si modificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usar tablas con tamaño variable tiene también un gran inconveniente, ya que si maximizas la ventana del navegador apreciarás claramente cómo el contenido de las tablas se descuadra. En un principio puede parecer más conveniente utilizar tablas con tamaño fijo, aunque esto implique que aparezca el hueco vacío a la derecha, en el caso de los monitores con alta resolución. Pero con un poco de práctica a la hora de manejar las tablas, puedes salvar el inconveniente del descuadre de la página y así definir páginas con tamaño en porcentaje que aprovechen el ancho cuando el monitor de más grande. No solo puede establecerse el tamaño de la tabla, también es posible establecer el tamaño de las celdas. El tamaño de la celda a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la altura. Los valores An y Al de una celda siempre están en Píxeles. En la imagen anterior, la celda tiene una anchura de 208 píxeles. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An habría que escribir 25%. Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qué contiene cada una de ellas (imágenes, texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar la página en monitores de distintos tamaños y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribución del contenido de la página no se vea muy afectado por el cambio de tamaño de la ventana del navegador. Unidad 8. Marcos Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en una página, y cómo trabajar con él. Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados. Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos. Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente. Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame). Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado. Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original. En esta imagen puedes ver un ejemplo de marco a la derecha. Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha. Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda. El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
Unidad 9. Formularios
Unidad 10. Multimedia
Unidad 11. Las plantillas
Unidad 12. HTML desde Dreamweaver
Unidad 13. Otros elementos Vamos a ver una serie de elementos que suelen aparecer en las páginas web, como pueden ser las marquesinas, las reglas horizontales y la fecha. Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea. A continuación tienes un ejemplo de marquesina. Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código. Para crear una marquesina hay que insertar las etiquetas y . Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones , la marquesina hará el desplazamiento una sola vez y se detendrá. Si pones , en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación: Bienvenid@s a PerrosGatos
Unidad 14. Capas Vamos a ver algunas de las características básicas sobre las capas, para luego poder trabajar con ellas y aplicarles algún comportamiento. Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página (es decir, que tienen una posición absoluta en la página), en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición. También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado. Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML. Este icono Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño, Div PA (Elemento con Posición Absoluta). Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Elementos PA del panel CSS, que puede abrirse a través del menú Ventana opción Elementos PA. También puedes abrir el panel pulsando F2. En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel. Las propiedades de la capa se especifican a través de su inspector de propiedades. Elemento CSS-P es el nombre de la capa. También puede ser cambiado a través del panel Elementos PA, haciendo doble clic sobre él. Izq y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y la capa. An y Al indican la anchura y la altura de la capa. Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Elementos PA. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo. Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad según el navegador), Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando), Visible (muestra la capa, aunque la página no se esté viendo) y Hidden (la capa está oculta). La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa. Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle cabida. Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador. Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no. Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites). Unidad 15. Comportamientos
Unidad 16. Comportamientos Avanzados En el tema anterior vimos algunos de los comportamientos básicos, en este tema veremos otros comportamientos y veremos cómo utilizarlos y aprovecharnos de esta característica de Dreamweaver para crear diversas funcionalidades automáticamente.
Este comportamiento te permitirá crear avisos emergentes como en el siguiente ejemplo. Este comportamiento es útil para poder enviar mensajes al usuario. Ten en cuenta que no deberás abusar de ellos, pues a la larga pueden resultar un poco incómodos, utilízalos con un objetivo concreto y no porque quieras atraer la atención del usuario. Para crear un mensaje emergente deberás seleccionar el elemento al cual irá asociado el mensaje, en el ejemplo es un texto. Una vez seleccionado ves al panel Comportamientos (Mayus+F4) pulsa el botón Se abrirá el siguiente cuadro de diálogo:
Aquí deberás introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estará listo. Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es más intuitivo para el usuario, por ejemplo, si asocias el mensaje a un evento onMouseOver (cuando se pase el ratón por encima) el usuario no sabrá muy bien porque se ha generado el mensaje de aviso. En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el más indicado para este caso. El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar una página web. Aunque no funciona en algunos navegadores. Si observas esta barra cuando navegas verás que va cambiando su texto según te encuentres sobre un enlace o no. Normalmente, las páginas que no tratan la Barra de Estado (por ejemplo, esta) no muestran ninguna información. Únicamente cuando posicionas el puntero sobre un enlace el texto de la Barra cambia para mostrar la dirección a la que este se dirige. Observa este ejemplo, si haces clic sobre él te llevará a la página principal de aulaClic. Cambiar el Texto de la Barra de Estado significaría modificar el texto que aparece en ese momento cuando realizamos un evento sobre un elemento en particular. Por ejemplo: Este comportamiento es muy útil para personalizar mucho más tu página y mostrar información que de otra forma no sería posible. Aunque no todos los navegadores son capaces de responder a este comportamiento. Para crear este comportamiento selecciona el elemento al cual quieres asociar este comportamiento. Abre el panel Comportamientos (Mayus+F4) y pulsa el botón Luego selecciona la opción Definir texto y haz clic en Establecer texto de la barra de estado. Aquí deberás escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y listos. ¿Dónde y cómo asociar el texto en una página? es sencillo. Una de las opciones que te da este comportamiento es poder asociar un texto en concreto a la página en sí. Es decir, que cuando abras una página se muestre inmediatamente (y permanentemente) un texto en la barra de estado. Eso es posible creando el mensaje asociado al body de la página (para ello tendrás que insertar el comportamiento sin seleccionar ningún elemento para que se asocie con toda la página) y lanzándolo en el evento onLoad (en la carga del documento). De esta forma cuando se abra la página se mostrará el mensaje en la barra de estado y permanecerá allí hasta que se produzca un cambio (por ejemplo, que se posicione el cursor sobre un enlace). Ahora veamos cómo debemos actuar al establecer texto para los enlaces. En este caso será necesario que introduzcamos dos comportamientos. El primero, asociado al evento onMouseOver (cuando el ratón se encuentra encima) que mostrará el mensaje que queramos. El segundo deberá ir asociado al evento onMouseOut (cuando el ratón deja de estar encima) que deberá limpiar la barra de estado para que recupere su estado anterior. En el caso de que hubiésemos establecido un mensaje para el body de la página, al salir de un enlace (en el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrándose. En el caso de que la página no tuviese un mensaje personalizado, deja el cuadro Mensaje en blanco para que la barra de estado recupere su estado natural. Observa que si no estableces el segundo comportamiento, cuando posiciones el ratón sobre el enlace (o imagen, párrafo..., da igual) el texto de la barra de estado cambiará. Pero cuando el ratón deje de estar sobre el elemento no habrá ninguna orden para que el texto vuelva a cambiar y se mantendrá fijo con el mensaje del anterior comportamiento. Su | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cuando ocurren estas diferencias podemos hacer que en el código (propiedades) se cambie el ancho por el real, para ello sólo tenemos que seleccionar la opción
del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel 
del 
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.
y pulsar sobre la opción 
Flash que aparece en la pestaña 
Una vez abierto el panel hay que seleccionar el botón 
, para poder trabajar con las plantillas. 
(Si este botón no está activado, pulsa con el botón derecho del ratón y elige 
.
.
.
.
.
.
de la 
y obtendremos el resultado que vemos a la derecha.
, o en el signo 
y elegimos la opción
.
vuelve a abrirse la ventana de 
sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.
