Dreamweaver 8

Hola amigos, ¿como están?, espero que bien…

Aquí les traigo un tutorial muy interesante y que a muchas personas les va a caer más que bien…

El tema es: “Como hacer páginas web en Macromedia Dreamweaver 8” (http://i169.photobucket.com/albums/u..._boy17/1-1.jpg)

Al final de este tutorial, podremos hacer una página html básica (primera parte) y con marcos (segunda parte).

Requisitos:

Tener instalado Dreamweaver 8, Editor de imágenes (entiéndase paint, paint.NET, photoshop, paint shop pro, etc.) para hacer o editar nuestras imágenes, banners o lo necesario.En este turorial haremos estos dos tipos de páginas: http://i169.photobucket.com/albums/u..._boy17/6-1.jpg
http://i169.photobucket.com/albums/u..._boy17/7-1.jpg


¡Empecemos!

1. Abrimos Dreamweaver 8 y nos encontraremos con la pantalla de bienvenida (http://i169.photobucket.com/albums/u..._boy17/2-1.jpg).

2. En el menú que encontramos al centro (http://i169.photobucket.com/albums/u..._boy17/3-1.jpg) logramos ver la opciones que nos da el programa: abrir, crear y crear desde. (http://i169.photobucket.com/albums/u..._boy17/4-1.jpg).

3. Primero vamos a ver una página html básica…entonces escogemos de “crear nuevo”, html.

4. Al terminar de cargar, no encontramos con nuestro ambiente de desarrollo (http://i169.photobucket.com/albums/u..._boy17/5-1.jpg).

5. En una página html básica podemos hacer muchas cosas, como insertar imágenes, además de escribir, le podemos agregar un formato especial a eso que escribimos, color a la página, etc. Para hacer la página que queremos hacer, es algo cesillo. Definimos el color negro como fondo y se inserta dos imágenes de fondo negro; además de un botón flash.

6. Para colocar el color a la página, debemos saber que es una propiedad, entonces, nos da a pensar que debemos buscar las propiedades de la página. (http://i169.photobucket.com/albums/u..._boy17/8-1.jpg). Podemos dar botón contrario a la página o desplazar la pestañita que estaba en la inferior derecha.

7. Dentro de esta venta de propiedades tenemos las opciones como: Fuente de página(es el tipo de fuente utilizado en la misma), Tamaño(se refiere al tamaño de la fuente), Color de texto(todos ya sabemos para que es), Color de fondo(lo mismo que lo anterior), Imagen de fondo(está demás decirlo), repetir(esta propiedad te indica si quieres repetir la imagen en varios sentidos(http://i169.photobucket.com/albums/u225/Zero_boy17/10-1.jpg)no repetir: no te la repite, solo una ves; repetir: te la repite toda en la página; repetir x: te la repite en el eje de la x, pero en la parte superior, repetir y: te la repite en la parte izquierda de la hoja.), margen(izquierdo, derecho, superior e inferior): determinas los márgenes de la página.

8. Como queremos la página de color negro, solo seleccionamos el color de fondo para la pantalla.Hay dos formas de trabajar las html: a través de tablas o de forma normal (entiéndase, hacer una sola imagen que tenga otras, solo letras, etc.).

Nosotros vamos a hacer una página html básica, de las dos formas…con tablas e imágenes (banners).

9. Vamos a hacer el título con una tabla. ¿Cómo la creamos? Nos dirigimos al el menú “Insertar” y después seleccionamos “tabla” (http://i169.photobucket.com/albums/u...boy17/11-1.jpg). Después nos saldrá la configuración de la tabla (http://i169.photobucket.com/albums/u...boy17/12-1.jpg). Si observamos, vemos las propiedades de ella: filas, columnas, ancho…encabezado, etc. Pues lo dejamos así, si así lo necesitamos.

10. Le damos aceptar…y nos quedara así: http://i169.photobucket.com/albums/u...boy17/13-1.jpg

11. Si escribimos dentro de la tabla, lo podrás alinear a la izquierda, derecha o centro; pero hay un solo detalle, si dejas la tabla así, así te aparecerá en la página, por eso modificamos las propiedades de ella: http://i169.photobucket.com/albums/u...boy17/14-1.jpg. Aclaro, selecciona cuando el cursor pone el borde en rojo.Para que no aparezca la tabla, cambia los valores de “borde” y lo igualas a 0.

12. Para crear el título de la página (“Fumolijup - Herrera”) y que aparezca en el centro, escribimos dentro de ella, bloqueamos el texto y nos dirigimos al menú “Texto”, buscamos la opción “alinear” y escogemos “centro” (http://i169.photobucket.com/albums/u...boy17/15-1.jpg).

13. Si queremos cambiarle la fuente, solo escogemos el mismo menú, solo que “fuente” (http://i169.photobucket.com/albums/u...boy17/16-1.jpg). Si deseamos cambiar el tamaño de la fuente, solo desplegamos la barra de propiedades y cambiamos el tamaño: http://i169.photobucket.com/albums/u...boy17/17-1.jpg. Si quieres cambiarle el color de la letra, cambias su propiedad hay mismo: http://i169.photobucket.com/albums/u...boy17/18-1.jpgAhora vamos a hacer la parte del centro. Esta haremos con una imagen. Obviamente, dará un poco más de trabajo ya que hay que hacer que ese banner o imagen tenga las características de la página en sí; es decir, color negro del fondo, que no sea ni tan ancha ni tan alta…etc. Ya hice la imagen y así queda: http://i169.photobucket.com/albums/u...boy17/19-1.jpg ¿Me explico?

14. Cuando vamos a insertar cualquiera imagen, no vamos al menú “insertar” y escogemos “imagen” (http://i169.photobucket.com/albums/u...o_boy17/20.jpg). Obviamente que nos corrimos un par de filas para que no quedara tan pegada del título.

15. Nos saldrá este cuando de dialogo: ihttp://i169.photobucket.com/albums/u225/Zero_boy17/21.jpg Buscamos nuestra imagen y aceptamos.

16. Nos encontraremos con esto: http://i169.photobucket.com/albums/u...o_boy17/22.jpg

17. Para que quede en el centro, lo mismo que hemos hecho anteriormente; seleccionamos y cambiamos sus propiedades: http://i169.photobucket.com/albums/u...o_boy17/23.jpg Y buscamos esto: http://i169.photobucket.com/albums/u...o_boy17/24.jpgAhora vamos a la parte de abajo, en botón flash. No es necesidad de tener flash 8, instalado aparte, solo que si quieres exportar un flash para tu Web.

18. Nos dirigimos al botón de “flash” que está debajo de los menús “sitio” y “ventana” (http://i169.photobucket.com/albums/u...o_boy17/25.jpg). Escogemos la opción de “botón flash” (http://i169.photobucket.com/albums/u...o_boy17/26.jpg).

19. Nos toparemos con esta ventana que será como un ayudante para crear el botón (http://i169.photobucket.com/albums/u...o_boy17/27.jpg). Lo único que hay que resaltar es que el estilo es el tipo de botón que se te enseña en “muestra”. El vínculo (o hipervínculo) es el enlace a aquella página que quieres que se cargue cuando presionen el botón. El destino es como te la va a abrir (esto se aplica a marcos). Otra cosa…debes definir su color de fondo, en este caso: negro. Después, aceptar.Te saldrá otra ventana sobre accesibilidad, si quieres, llenas los datos o no.

Con esto hemos terminado nuestra página de bienvenida, en una html básica.

Ahora la segunda parte, trabajaremos el Home Page (página principal) con marcos.

1.En la parte izquierda, encuentras la opción “Conjuntos de marcos” (http://i169.photobucket.com/albums/u...o_boy17/28.jpg). Has clic en el.

2.Te aparecerá la siguiente ventana:http://i169.photobucket.com/albums/u...o_boy17/29.jpg

3.En el centro de ella, te muestra los conjuntos posibles, disponibles ah escoger a tu gusto.

4.Encojemos la de tres marcos que se ajusta a nuestro objetivo (http://i169.photobucket.com/albums/u...o_boy17/30.jpg). Y después, “crear”

Te saldrá una ventana que tiene como título “Opciones de accesibilidad” que nos ayuda que relacionar los marcos.

Después nos encontramos con nuestros tres marcos que queríamos (http://i169.photobucket.com/albums/u...o_boy17/31.jpg).

Lo mismo que hicimos para la HTML básica, entiéndase a insertar colores, tablas, imágenes; se aplica acá.

5.Ahora insertaremos el banner en la parte superior. Colocamos el cursor en el marco correspondiente, en este caso, será el superior y nos dirigimos al menú “insertar”, escogemos “imagen” y hacemos todo el protocolo de buscar la imagen, y luego, aceptar. Para que nos quede bien justa la imagen, debemos poner el valor de 0 (cero) en los márgenes izquierdo, derecho, superior e inferior, para que la imagen no nos quede mal de algún lado: (http://i169.photobucket.com/albums/u..._boy17/9-1.jpg).

Nos debe quedar así: http://i169.photobucket.com/albums/u...o_boy17/32.jpg

6.Ahora asemos lo mismo para el marco del centro, pero esta ves, no podemos poner una imagen, acuérdate de que hay se va a escribir, ¿me estás entendiendo lo que quiero decir? Colocamos, entonces una imagen que se repita, o sea, tienes que poner una imagen de fondo: http://i169.photobucket.com/albums/u...o_boy17/33.jpg

7.Para el marco izquierdo, estableceremos un color de fondo. Colocamos el cursor en el marco. Como lo que vamos a cambiar son los atributos o propiedades, obviamente tenemos que ir allá. En la ventana de las propiedades del marco, solo cambias el color o simplemente puedes ponerle una imagen; todo a tu gusto. Por efectos del tutorial, solo estableceremos color, pero te digo, es cuestión de gustos. Al final nos debe quedar así: http://i169.photobucket.com/albums/u...o_boy17/34.jpg

Ahora, cuando extendemos en marco del centro, hacia abajo, no se nos va a correr el marco de la derecha. Se puede hacer que ambos marcos mantenga el mismo tamaño, pero hay que hacer que el usuario se siente cómodo al visitar la página, ¿que quiere decir esto? Que cada ves que el usuario tenga que cambiar de tópico en la página, tendrá que volver a cargar la página. Entonces lo dejamos así, para que cada vez que el usuario tiene que cambiar de tópico, la información se cargue en el mismo marco. Esto es eficiencia. ¿Me estoy explicando lo que te quiero transmitir? ¿Sí?... ¿sí?

Posteriormente, agregaré otro tutorial para insertar flash en nuestras páginas echas aquí.

Espero que esto te ayude mucho.
Cualquiera cosa, estoy anuente a ayudarte.

Pásenla bien!!!
Saellvertu!!!






"Z"