MANUAL

COMPONENTES DE DREAMWEAVER

                          

MENÚ PRINCIPAL

Este es el menú típico de cualquier programa. Básicamente, controla todo lo que se ve y lo que no se ve. Desde aquí, podemos crear y guardar archivos, ocultar o mostrar barras de herramientas, manejar las propiedades de la página, colocar las propiedades de las tablas e insertar objetos -imágenes, archivos, videos, etcétera, entre varias otras cosas. describiremos las opciones principales del menú principal del Dreamweaver.

BARRA DE HERRAMIENTAS HORIZONTAL

Es un menú gráfico que se encuentra justo debajo del menú principal. Si bien todas sus opciones también están en éste último, a la hora de trabajar resulta muy dinámico y nos deja acceder rápidamente a herramientas de uso frecuente. Está compuesto por lengüetas que hacen referencia a diversas categorías y permiten, de forma rápida, crear tablas, insertar imágenes, crear vínculos, crear formularios y varias otras cosas.

ÁREA DE TRABAJO (FORM)

Es el espacio de trabajo, es decir, nuestra página web. Conviene pensar en él como si fuera un documento de Word. Todo lo que coloquemos allí será visto en un explorador de Internet. También cuenta con algunas herramientas que, entre otras cosas, permiten pre visualizar la página en un navegador, insertar y editar contenido del encabezado del documento y alternar entre las diferentes vistas (Código, Dividir y Diseño)

BARRA DE VENTANAS

Se encuentra en el lado derecho del programa. Básicamente, es un conjunto de varias ventanas que podemos abrir, minimizar y ocultar para ayudarnos a controlar aspectos estructurales del programa. Desde aquí tendremos la posibilidad, entre otras cosas, de definir el sitio sobre el que estamos trabajando, ver el historial de cambios del documento, crear, modificar y eliminar las hojas de estilo, e insertar comportamientos.

PROPIEDADES DE PÁGINA 

Permite programar ciertos parámetros básicos que tienen que ver con la apariencia de las páginas web. Es importante recordar que estas propiedades deben ser colocadas en cada página HTML, si bien luego se pueden copiar y pegar fundamentalmente permiten controlar el color de texto, el color de fondo, el color de los vínculos (visitados, no visitados y activos), colocar una imagen de fondo, configurar los distintos márgenes y agregar un titulo al documento (que aparecerá en la barra superior del navegador ).

TABLAS Y CELDAS

Dreamweaver tiene una regla de oro: todo el contenido de una página (texto, formatos entre otros) va dentro de tablas, nada va suelto, salvo alguna pequeña excepción que será aclarada. Si uno aprende a manejarlas  bien, maneja el 50% del programa. 

TABLAS

Toda tabla está compuesta por celdas, lo que posibilita que una tabla pueda tener la cantidad de celdas que deseemos. Esto nos permite distribuir y ordenar los elementos de nuestra página como queramos. Recordemos que hay tres maneras de insertar una tabla con un clic en el cuadro icono de la barra de herramientas horizontal, con insertar / tablas o con Ctrl + Alt + T. Al usar cualquiera de estas opciones, aparecerá el menú de inserción de tabla. 

El menú de inserción de tabla. Podemos observar las propiedades y las características básicas de la tabla que vamos a crear 

REPASAREMOS SUS COMPONENTES

* Filas: es la cantidad de filas o divisiones horizontales que tendrá la tabla

* Columnas: es la cantidad de columnas o divisiones verticales que tendrá la tabla

* Ancho de tabla: aquí, colocamos la longitud que tendrá la tabla, expresada en píxeles o porcentaje. Más adelante veremos cuándo utilizar una u otra medida

* Grosor del borde: aquí especificamos el tamaño de borde (ancho) que tendrá nuestra tabla. Se mide en píxeles.

* Relleno de celda: desde aquí, configuramos el espacio que hay entre el contenido de la tabla o de la celda y su borde. También se mide en píxeles

* Espacio entre celdas: aquí, definimos la separación que hay entre las distintas celdas de una misma tabla. Igual que los dos anteriores, se mide en píxeles.

Una vez insertada la tabla, podremos modificar todas las propiedades anteriores y también algunas nuevas, como agregarle un color de fondo y/o de borde, alinearla horizontalmente e insertarle una imagen de fondo.

CELDAS 

Las celdas componen las filas (horizontales) y las columnas (verticales) de unas tablas. Una tabla puede tener infinitas celdas, pero debemos tener en cuenta que mientras más tenga, cada una de éstas tendrá menos espacio para colocar contenido Esto también dependerá del Relleno de celda y del Espacio entre celdas que le coloquemos a la tabla.

La celda tiene propiedades independientes de las de la tabla. Para acceder a éstas debemos posicionarnos con el cursor y hacer clic adentro de la tabla, sobre la celda que deseemos seleccionar.

Se pueden observar las propiedades de la celda seleccionada en la parte inferior de la barra de propiedades...

* Horiz: Permite alinear los elementos que se encuentran dentro de la celda a la izquierda, al centro o a la derecha

* Vert: permite alinear los elementos que se encuentran dentro de la celda de manera superior, medio o inferior

* An y Al: nos permite especificar el ancho y el alto de una celda. Generalmente, estas propiedades no se usan, ya que el mismo contenido se encarga de esto.

* Fnd: permite insertar una imagen de fondo para la celda

* Fnd (con casilla de color): permite colocarle un color de fondo a la celda. Éste puede ser diferente con respecto al color de fondo de la tabla (Figura).

* Borde: habilita la colocación de un color de borde a la celda. Éste puede ser diferente con respecto al color de borde de la tabla.

* Combinar celdas: junta las celdas seleccionadas y las convierte en una única celda. Funciona para unir filas, columnas o ambas.

* Dividir celdas: permite dividir la celda seleccionada en la cantidad elegida de columnas o filas, para generar más campos en la tabla.

Se puede observar desplegado el menú de selección de Color de fondo de la celda

MARCOS

Los marcos o frames son una práctica forma de diseño web que podemos usar para sitios con mucho contenido. También son muy prácticos a la hora de mantener estáticas ciertas porciones de un documento HTML. Esencialmente, son distintos archivos HTML unidos en uno solo. Es decir, cualquier página web hecha en marcos tiene, por lo menos, tres archivos HTML. Cada marco es una página web diferente, es decir, un archivo único. 

Una de las características positivas de diseñar o programar una página con marcos es la barra de navegación estática. Muchas veces, si la página tiene una cantidad importante de contenido, aparecerá la barra de desplazamiento vertical a la derecha de la ventana del navegador, para que podamos navegar todo el documento. Pero al ir bajando, la barra de navegación “ya sea vertical u horizontal”, se perderá y el usuario no la tendrá más a mano

Las opciones para crear una página web con marcos se encuentran en el menú principal, en Modificar / Conjunto de marcos. Si diseñamos un archivo HTML de esta manera, la barra de navegación, tanto si es horizontal como si es vertical, será una página aparte y no se moverá cuando el usuario use la barra de desplazamiento vertical. Esto posibilitará que los navegantes puedan acceder de forma rápida y sencilla a los vínculos.
Crear una página o un sitio con marcos suele ser un poco más complicado que hacer un diseño a página completa (llamado diseño Body). En este caso, tendremos que tener cuidado con las medidas y con los vínculos. En nuestro proyecto, trabajaremos una página en marcos y allí veremos con más detenimiento sus propiedades y características.

CREA UNA PAGINA SENCILLA CON DREAMWEAVER