Propiedades del documento

Es conveniente que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo y de fuente, etc. Puede definirse el formato de cada una de las páginas a través de Propiedades de la página. Se puede abrir esta ventana de tres modos diferentes:
• Pulsar la combinación de teclas Ctrl+J.
• Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
• Pulsar con el botón derecho sobre el documento abierto en Dreamweaver, y en el menú contextual que aparece seleccionar la útltima opción, que es Propiedades de la página. 
 
Vamos a ver a qué hacen referencia algunos de los elementos:
  • 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.
  • Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imágen 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.
  • 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.
  • Texto: es el color de la fuente.
  • Vínculos: 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.
  • 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.
  • Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que solo 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 de imagen: permite establecer la opacidad de la imagen de rastreo.

Los colores
Para asignar colores es posible desplegar una paleta de colores como la de la imagen. 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 (y hoy por hoy en todos los navegadores como Mozilla, Konqueror, etc y otros sistemas como GNU/Linux puesto que son los colores estandarizados).

También es posible personalizar los colores a través del segundo botón de la parte superior de la paleta, o seleccionar un color de fuera de la paleta pulsando, una vez abieta la paleta, sobre el color deseado.

Los colores de la paleta pueden asignarse seleccionando a través de los botones que tienen la siguiente apariencia:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobretodo 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 (como en esta imagen:
lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco. 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 como el de la imagen:
 
Los valores tras la almohadilla (#) equivalen a los valores de rojo, verde y azul, los colores básicos del espectro visible. El valor es hexadecimal y equivale a valores entre el cero y doscientos cincuenta y cinco.


Los dos primeros equivalen al color rojo, los dos siguientes al verde y los dos restantes al azul (en las siguientes imágenes con el valor FF –el máximo valor- en su lugar). Así, todos los valores en cero sería la ausencia de color, es decir, el negro más puro. Todos los valores en FF, sería por lo tanto el valor más alto –equivalente al valor 255- y sería la suma de todos los colores es decir, el blanco.

Vistas de un documento

Puedes cambiar a vista del documento a través de la barra de herramientas de documento.

 
La vista Diseño
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
 
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
 

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.


Los paneles e inspectores

El lanzador

El lanzador se encuentra en la barra de tareas y si no loves lo activarás desde el menú Edición -->Preferencias -->Paneles -->Mostras iconos lanzador. Con un simple clic sobre los iconos es posible mostrar y ocultar los paneles correspondientes a éstos, sin la necesidad de tener que desplazarse a través de los menús para abrirlos. Es posible personalizar el lanzador, para que solamente aparezcan los iconos deseados por el usuario.

 
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, pero 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
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 flecha del ángulo inferior derecho (señalado en verde en la imagen anterior), se despliega para mostrar más opciones (como el ejemplo de la imagen inferior). Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.

El panel de objetos
El panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú insertar. Los botones están clasificados según su categoría: tablas, texto, objetos de formulario, etc.


El entorno de trabajo


La pantalla inicial
Vamos a ver cuáles son los elementos básicos de Dreamweaver MX, 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 la inferior, 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 en general puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario tiene un sistema operativo, una determinada resolución de pantalla y además, puede decidir qué elementos quiere que se vean y de qué modo en cada momento, como veremos más adelante.


Las barras
La barra de título
La barra de título contiene el nombre del programa. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.


La barra de menús
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
La barra de herramientas éstandar contiene iconos para ejecutar de forma inmedíata algunas de las operaciones más habituales, como Nuevo, Abrir, Guardar, etc. 


La barra de herramientas de documento
La barra de herramientas de documento contiene iconos para ejecutar de forma inmedíata 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. 

Arrancar y cerrar Dreamweaver MX


Dos formas básicas de arrancar Dreamweaver MX
  • Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú; al colocar el cursor sobre Programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Macromedía, seguidamente Macromedía Dreamweaver MX, hacer clic sobre él, y se arrancará el programa.
  • Desde el icono de acceso directo de Dreamweaver MX del escritorio

Para cerrar Dreamweaver MX
Puedes utilizar cualquiera de las siguientes operaciones:
  • Hacer clic en el botón cerrar
  • Pulsar la combinación de teclas ALT+F4.
  • Hacer clic sobre el menú Archivo y elegir la opción Salir.
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 con una ventana similar a ésta:

Qué es Dreamweaver MX





Dreamweaver MX es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver MX 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. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la pagina de Macromedia, la versión caduca al cabo de 30 días.

   La ventana principal del software es la siguiente:


Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo (imagen inferior)


Pero crear páginas web medíante 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 de 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 Macromedía Dreamweaver.