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.
1. Introducción
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.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen 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 el documento index.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, sobre todo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.
Actualmente los marcos están cayendo en desuso. Aunque son realmente prácticos, crean problemas a la hora de ser indexados por los buscadores. Y estar correctamente indexado y posicionado es crucial para una web.
Por ejemplo, si vemos el código fuente de una página con marcos, vemos que realmente no hay más que las llamadas a las páginas correspondientes, por lo que no hay nada que indexar. Por otro lado, si se indexa una página, puede que el visitante llegue a ella directamente, no a través del marco. Esto hace, por ejemplo, que el usuario no pueda acceder a los elementos de navegación de nuestro sitio.
Por lo tanto, si piensas colgar tu página en internet para uso público, no te recomendamos su uso. Pero si la página es de uso privado, tal vez te facilite el trabajo emplear marcos.
2. Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

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.
Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
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.
3. Seleccionar marcos
Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del menú Ventana. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayúsculas + F2.
Panel marcos
En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen).
No es necesario seleccionar los marcos para editar los documentos que éstos contengan.
Sí es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos.

4. Guardar
Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original.
Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos más adelante.
Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opción Guardar todo   , ya que podemos equivocarnos al dar los nombres a los nuevos documentos.
Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna página ya existente, ya que en ese caso el único documento al que habrá que dar nombre será al que contiene el grupo de marcos.
Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre Guardar   .


5. Configurar marcos
Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que está contenido en el marco.
En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde.
Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.
Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.
Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño del marco, que puede ser en PíxelesPorcentaje (de la ventana) o Relativo (proporcional al resto de marcos).
Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el que contenga la barra de navegación, y el otro marco con tamaño Relativo, para que se ajuste a la ventana del navegado
6. Contenido del marco
Como ya has visto, el contenido de un marco puede establecerse a través del campo Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.
A través del campo Origen del inspector de propiedades, sólo es posible especificar el documento que se cargará inicialmente en el marco, pero hemos de poder cambiar este documento por otro a través de vínculos.
Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te serán más fáciles de entender.
• _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. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
• _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, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Además de estos destinos para los enlaces, también aparecerán los nombres de los distintos marcos de la página.
Podemos añadir todos estos destinos a cualquier elemento de la página que contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.

Unidad 3: Configurar un sitio local


1. INTRODUCCIÓN

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, archivos de tipos específico, 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.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.
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.
La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

2. CREAR O EDITAR UN SITIO WEB SIN CONEXIÓN A INTERNET

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.
Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...
Nuevo sitio

En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.
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 o modificar las características del sitio.
Definición de sitio

Las opciones 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, que será lo único que empleemos de momento.
  • Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios.
  • La Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.
Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.
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.
Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y minúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo hará.
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ñaBásicas, en vez de la pestaña Avanzadas.

3. ABRIR UN SITIO

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 Archivosbuscar y seleccionar el sitio a abrir en el menú desplegable Archivos

4. VER EL SITIO

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botón Expandir que aparece en la parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la derecha) con nuestros archivos.
Ventana Expandida 

5. SUBIR ARCHIVOS AL SERVIDOR

Cuando quieras visualizar el sitio en Internet 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. Si no los enlaces no funcionarán correctamente, y es posible que algunas imágenes no se muestren.
Para subir los archivos vía 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.
• Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos allí.

6. PROPIEDADES DEL DOCUMENTO

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:
  • Pulsar la combinación de teclas Ctrl + J.
  • Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
  • Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.
Se abrirá el cuadro de diálogo siguiente:
Las propiedades están organizadas en categorías.
 En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:
  • Fuente de página: es el tipo de letra  que le aplicaremos al texto.
  • Tamaño: es el tamaño de la fuente que aplicaremos al texto.
  • Color del texto: es el color de la fuente.
  • Color del 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.
  • 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. 
  • Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.
  • Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.
• En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:
 
  • 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. 
  • 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 que mostrará el texto de los vínculos.
  • Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
  • Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo.
  • Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.
En la categoría Vínculos (CSS) encontramos las propiedades:
  • Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.
  • Tamaño: es el tamaño del texto de los vínculos.
  • 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 de sustitución: es el color del texto del vínculo cuando situamos el ratón encima del vínculo.
  • 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.
• En la categoría Encabezados (CSS) encontramos la propiedad:
  • Fuente de encabezadopermite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que queremos aplicar a cada tipo de encabezado.
• En la categoría Título/Codificación encontramos la propiedad:
  • Títuloes el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver
• En la categoría Imagen de rastreo encontramos las propiedades:
  • 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.

7. LOS COLORES

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 cualquier navegador bajo cualquier sistema operativo.
Esto no quiere decir que sólo podamos utilizar estos colores. Podemos personalizarlos 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 vimos en este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , 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#39F, el botón quedaría del siguiente modo: .
En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (RojoVerde y Azul).
Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16).
El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total.
Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al verde y el último al azul.
En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.

Unidad 2: El entorno de Dreamweaver CS4


1. Arrancar y cerrar Dreamweaver CS4
Veamos las dos formas básicas de arrancar Dreamweaver CS4.
·         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 Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver CS4 y haz clic sobre él para arrancar el programa.
·         Desde el icono de Dreamweaver CS4 del Escritorio. 
 Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes operaciones:
·         Hacer clic en el botón cerrar, en la esquina superior derecha, como en cualquier ventana de Windows.
·         Pulsar la combinación de teclas Alt + F4.
·         Hacer clic sobre el menú Archivo y elegir la opción Salir

2. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
·         Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).         
·         Pulsar la combinación de teclas Ctrl + O.     
·         Hacer clic sobre el menú Archivo y elegir la opción Abrir.  
·         Hacer doble clic sobre el archivo en la ventana del sitio.    
·         Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver CS4.   


Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:
·         Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible)
·         Pulsar la combinación de teclas Ctrl + N.      
·         Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.       
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.  


Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
·         Hacer clic en el botón Guardar de la barra de herramientas estándar.     
·         Pulsar la combinación de teclas Ctrl + S.      
·         Hacer clic sobre el menú Archivo y elegir la opción Guardar.        
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.
·         Hacer clic en el botón Guardar todo de la barra de herramientas estándar.         
·         Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todas 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 todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento.


3. Las barras
• La barra de la aplicación.
Barra de aplicación

Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), variosbotones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.
Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.
Clásico
Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante.
Los menús, están agrupados en categorías.
Barra de menúBarra de menú
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.


• Las pestañas de documento.
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.
Dreamweaver CS4 añade una novedad. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.

• La barra de estado.
Barar de estado
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.

Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.
Ver → Barras de herramientas

• La barra de herramientas estándar.
La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge (un programa incorporado), Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.

• La barra de herramientas de documento.
Barra de docuemntoBarra de docuemnto
Barra de docuemntoBarra de docuemnto

La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.
Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.


4. Inspectores y paneles
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, mientras que el panel nos da acceso a opciones generales.
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 las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.

El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.


5. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:

La vista Diseño  
La vista Diseño permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

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.
El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.

La vista Dividir   
La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. 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.

La vista en Vivo   
La vista en Vivo es otra de las novedades que trae Dreamweaver CS4. Nos ofrece una vista del resultado final no editable. A diferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador.
La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se previsualizan correctamente en el navegador. 
No obstante, siempre hay que comprobar la página con los principales navegadores del mercado, que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la vista en vivo o en el navegador.

La vista Código en vivo   
Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente.