Que es Dreamweaver...

 Dreamweaver CS6 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS6 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.

Interfaz de Dreamweaver Cs6

Las barras - pestañas del documento - barras de vista al documento 

Vista código del documento - Vista diseño del documento

Barra de estado - Panel de propiedades

Área de paneles - Paneles y ventanas

  

Cómo hacer una pagina Web...

Ahora bien!

Aquí podes aprender a hacer una pagina Web con estos simples pasos...

Para ubicarte un poco, utilizaré estas imágenes que serán aplicadas en la creación de nuestra página:

Definir Sitio...

Luego de abrir el programa, y antes que todo, debemos tener listas las imágenes que se deben utilizar, como ya he mencionado anteriormente. Para así luego poder trabajar.- Entonces, primero, definimos sitio. En la parte superior, debemos hacer "clic" en el botón "sitio" y "nuevo sitio"...

...Después de haber hecho "clic", nos aparecerá una ventana para definir el sitio. Allí deberán clickear donde dice "Carpeta del sitio local" para seleccionar su carpeta que deberán usar para trabajar. una vez hecho esto insertamos "guardar" para definir el sitio.

Ahora bien! Como pueden ver, del lado derecho, se mostraran los archivos de su carpeta seleccionada.

Crear Tablas...

Comencemos con crear una tabla principal, que quiere decir, ahí es donde nos vamos a concentrar con la creación de nuestra página. Todo estará dentro de una sola tabla. Nos dirigimos a "Insertar", "Tabla" 

Nos aparecerá esta ventana para personalizar la tabla que deseamos insertar. Nos dice la cantidad de filas y de columnas que queremos implementar(usaremos 1x1), y también el tamaño de la misma. en este caso, trabajaremos con píxeles con lo cual definiremos 980p porque es lo mas recomendable para una página. Una vez hecho todo, aceptamos .

Y acá te mostramos como se creó la tabla. Un pequeño detalle es alargar la tabla solamente hacia abajo. Recuerden que les dije que lo recomendable de anchura es de 980p. Atención!!

Algunos detalles...

Para que les sea de ayuda y no se vuelvan "locos" en "por qué no está centrada la pagina como las demás", esto es lo que deben hacer.
Van a pulsar adentro de la tabla, luego en el inferior hay una barra de estado donde les dice qué están opcionando cuando hacen "clic" en el cuerpo o Tabla de la pagina. Ahí seleccionan donde dice TABLE, en ingles y  debajo de la barra de estado, verán la barra de propiedades donde tienen que seleccionar "Alinear", y en vez de "predeterminado", seleccionan " Centro". Así se centra una tabla. Recuerden pulsar dentro de la tabla que desean modificar!Centrar tabla

Otro pequeño pero fastidioso detalle es dónde va el puntero!! no seria de gran problema, dependen lo que se hagan idea ustedes, el puntero puede estar en cualquier lado a su elección. pero lo mas recomendable es dejarlo del lado superior izq., ya que empezamos a escribir por ese lado, ¿no? Entonces, a lo que iba... Para que el puntero quede del lado superior izq. debemos pulsar dentro de la tabla, seleccionan en la barra de estado "Table" y en la barra de propiedades seleccionan "vertical o Vert.", y en vez de "predeterminado" que sea "Superior".

Banner

Como vinimos al principio!!! Es muy importante que crees las demás tablas dentro de la principal! porque la principal define el cuerpo de tu pagina. Entonces vamos a "Insertar", "Tabla". Como es un Banner, (el banner es como una representación de tu pagina, lo primero que ves, lo que te llama la atención) tiene que ser una dimensión grande: que ocupe los 980P y que tenga altura mas de 200P.

Luego, simplemente, podes arrastrar con el "mouse" y soltarlo dentro de la tabla la imagen que deseas. claramente tus archivos están definidos para el sitio.

como poner imagen de fondo

Se me paso con contarte! Para insertar una imagen de fondo para tu página tenes que ir a "Modificar",  "Propiedades de la página"... 

...Te aparece esta ventana donde te indica en que categoría te tenes que meter y las opciones que te da: "Imagen de fondo", "examinar", ahí tenes que seleccionar la imagen que deseas insertar. Luego das "Aceptar".

Y Listo! Tu imagen ya se definió!

botones con imagen de sustitucion

Okey, acá viene lo complicado pero bueno... ¿Te acordas los pasos que hiciste para insertar Tabla? Bueno, no te los olvides porque los vas a usar mucho!. Entonces, en vez de insertar una tabla de 1 fila por 1 columna, haces de 1x4. Para insertar los botones de tu pagina. Tenes que pulsar dentro de la casilla que deseas poner según donde quieras y luego arrastras la imagen. Acordate, primero pulsar dentro de la casilla y luego arrastras.

Una vez puestas los botones vas a tener que borrarlos paso por paso. ¿Por qué te hago hacer esto? Porque no quiero que te pierdas cuando te enseño!. Ahora bien...
 Para que funcione los botones, tendrás que crear otra pagina con el mismo banner y mismos botones. Porque la pagina en si, lo único que tiene que tener igual son esas dos cosas. Acordate!! Vas al superior de las barras donde dice "Archivo", "nuevo", y te aparecerá una ventana de "nuevo documento". Pulsas "Pagina en blanco"y en el tipo de pagina "HTML". Das "Aceptar".
Todo esto con el mismo sitio definido, no hace falta que crees uno nuevo.

...Vas a borrar el primer botón (Botón 1), luego vas a las barras donde dice "Insertar", "Objetos de imagen", "Imagen de sustitución"...

...Te aparece esta ventana donde te dice qué imagen debes ubicar y dónde queres que te lleve ese botón(hipervínculo).

Donde dice "Imagen original" tenes que seleccionar la imagen que se vera en el botón permanentemente, y el "Imagen de sustitución" la imagen que queres que cambie cuando arrastras el puntero(mouse) hacia el botón.

Luego en "ir al URL" seleccionas la otra página que creaste para luego, te mande al mismo clickeando el botón que esta trabajando. "Aceptar". Listo!

resultados a cerca de la pagina...

Una vez ya hecho la imagen de sustitución, Apretar F12 que aparece en el teclado. El programa te pregunta si deseas guardar tu pagina. seleccionas "Guardar". Después te manda al sitio de buscador (Google Chrome, Mozilla, etc) porque esa funcion cumple el F12 con el programa.

Estando en una ventana del buscador, fíjate que cuando arrastras el puntero(mouse) al botón que le creaste imagen de sustitución, cambia su imagen, claramente, a la que seleccionaste para reemplazar... 

Y listo! Tu página funciona! No solo podes hacer imagen de sustitución en los botones, sino a cualquier imagen!

Video - Tutorial

Video - Tutorial