1. Este tutorial lo hice con cariño para aquellos que no saben crear

Anuncio
1.
Este tutorial lo hice con cariño para aquellos que no saben crear paginas web con
este fagnifico programa wueno hay va el tuto..!!
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”
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:
Empecemos!
1. Abrimos Dreamweaver 8 y nos encontraremos con la pantalla de bienvenida
2. En el menú que encontramos al centro
logramos ver la opciones que nos da el programa: abrir, crear y crear
desde.
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
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
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 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”
Después nos saldrá la configuración de la tabla
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í:
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:
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”
13. Si queremos cambiarle la fuente, solo escogemos el mismo menú, solo que “fuente”
Si deseamos cambiar el tamaño de la fuente, solo desplegamos la barra de propiedades y
cambiamos el
tamaño:
Si quieres cambiarle el color de la letra, cambias su propiedad hay mismo:
Ahora 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:
me Explico..!!
14. Cuando vamos a insertar cualquiera imagen, no vamos al menú “insertar” y escogemos
“imagen”
Obviamente que nos corrimos un par de filas para que no quedara tan pegada del título.
15. Nos saldrá este cuando de dialogo:
Buscamos nuestra imagen y aceptamos.
16. Nos encontraremos con
esto:
17. Para que quede en el centro, lo mismo que hemos hecho anteriormente; seleccionamos y
cambiamos sus propiedades:
Y buscamos esto
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”
Escogemos la opción de “botón flash”
19. Nos toparemos con esta ventana que será como un ayudante para crear el botón
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.
Esperen la segudna parte para subirla D: :D
Descargar