Buscar

Como hacer páginas en Macromedia Dreamweaver 8 Professional


 
 Old 21 sep 2007, 06:47   #1 (permalink)  
Miembro activo
 
Avatar de _Ivancito_
 
Registrado: octubre 2006
Ubicación: Región de Azuero, República Democrática de Panamá...!100% Santeño!...en mi tierra hermosa y preciosa
Mensajes: 1.669

Alegre Como hacer páginas en Macromedia Dreamweaver 8 Professional

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.

Editado por _Ivancito_ en 21 sep 2007 a las 06:56.

Informatic Style FOREVER
Iván Omar


7777000000770000007700077700770000007700077700077000000
777007700770077007700007700770077007700007000077007700
7700000770000007700700700770000007700700070077000000
7007777770077007700770000770077007700777770077007700
007777770077007700777000770077007700777770077007700

00000 Quizás fuiste tan chica para llevarte toda entera dentro de mi corazón...
0 I love you Panama
NUNCA SE SABE POCO, CUANDO EL FORO ES BUENO
_Ivancito_ is offline   Citar y responder
 
 Old 21 sep 2007, 06:48   #2 (permalink)  
Miembro activo
 
Avatar de _Ivancito_
 
Registrado: octubre 2006
Ubicación: Región de Azuero, República Democrática de Panamá...!100% Santeño!...en mi tierra hermosa y preciosa
Mensajes: 1.669

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

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"

Informatic Style FOREVER
Iván Omar


7777000000770000007700077700770000007700077700077000000
777007700770077007700007700770077007700007000077007700
7700000770000007700700700770000007700700070077000000
7007777770077007700770000770077007700777770077007700
007777770077007700777000770077007700777770077007700

00000 Quizás fuiste tan chica para llevarte toda entera dentro de mi corazón...
0 I love you Panama
NUNCA SE SABE POCO, CUANDO EL FORO ES BUENO
_Ivancito_ is offline   Citar y responder
 
 Old 23 sep 2007, 04:43   #3 (permalink)  
Miembro activo
 
Avatar de Moys117®
 
Registrado: junio 2007
Ubicación: S.P.S., Cortes, Honduras, Centroamerica, America, Tierra...
Mensajes: 814

Guiño Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

Hola Amigo!

Excelente Tutorial Ivancito!

Felicidades!


Saudos!

Why do they always send the poor?

Ubuntu Registered User: #459065
Moys117® is offline   Citar y responder
 
 Old 23 sep 2007, 17:41   #4 (permalink)  
Miembro activo
 
Avatar de _Ivancito_
 
Registrado: octubre 2006
Ubicación: Región de Azuero, República Democrática de Panamá...!100% Santeño!...en mi tierra hermosa y preciosa
Mensajes: 1.669

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

Cita:
Moy117 escribió: Ver post
Hola Amigo!

Excelente Tutorial Ivancito!

Felicidades!


Saudos!
Gracias


Saludos!!!

Informatic Style FOREVER
Iván Omar


7777000000770000007700077700770000007700077700077000000
777007700770077007700007700770077007700007000077007700
7700000770000007700700700770000007700700070077000000
7007777770077007700770000770077007700777770077007700
007777770077007700777000770077007700777770077007700

00000 Quizás fuiste tan chica para llevarte toda entera dentro de mi corazón...
0 I love you Panama
NUNCA SE SABE POCO, CUANDO EL FORO ES BUENO
_Ivancito_ is offline   Citar y responder
 
 Old 23 sep 2007, 18:22   #5 (permalink)  
Miembro activo
 
Avatar de Guillem Cuberes
 
Registrado: noviembre 2005
Mensajes: 8.694

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

no me he leido el tutorial, pero has pensado en el peqeño detalle q la ultima versión del dreamweaver es la CS3??

Web developer


Arch Linux
Linux registered user #475465
CPU: Intel E6850@3GHz
RAM: G.SKILL 4x1024mb DDR2-800
VGA: XFX GTS250
MB: Asus P5E
HDD: Seagate 250GB + 1TB
PSU: Hipper TypeR 580 W
Ratón: Logitech G9x
Teclado: Logitech G110
Alfombrilla: X-Trac ZooM
Joystick: Logitech Extreme Pro 3D
Auriculares: Creative Fatal1ty gaming
Guillem Cuberes is offline   Citar y responder
 
 Old 23 sep 2007, 18:49   #6 (permalink)  
Miembro activo
 
Avatar de _Ivancito_
 
Registrado: octubre 2006
Ubicación: Región de Azuero, República Democrática de Panamá...!100% Santeño!...en mi tierra hermosa y preciosa
Mensajes: 1.669

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

Cita:
guillem92 escribió: Ver post
no me he leido el tutorial, pero has pensado en el peqeño detalle q la ultima versión del dreamweaver es la CS3??
Creo que sabía...

Pero bueno, no todo el mundo puede descargar la CS3...


Saellvertu!!




"Z"

Informatic Style FOREVER
Iván Omar


7777000000770000007700077700770000007700077700077000000
777007700770077007700007700770077007700007000077007700
7700000770000007700700700770000007700700070077000000
7007777770077007700770000770077007700777770077007700
007777770077007700777000770077007700777770077007700

00000 Quizás fuiste tan chica para llevarte toda entera dentro de mi corazón...
0 I love you Panama
NUNCA SE SABE POCO, CUANDO EL FORO ES BUENO
_Ivancito_ is offline   Citar y responder
 
 Old 23 sep 2007, 22:18   #7 (permalink)  
Miembro activo
 
Avatar de adriantxu
 
Registrado: marzo 2005
Ubicación: Bilbao
Mensajes: 1.374

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

Gracias por el manual!

Lo he visto un poco por encima y tiene buena pinta!!


Sin forzar!!!

Euskal Party 14 > AG-63
Euskal Party 15 > AF-62
Euskal Party 16 > AF-61
Euskal Party 17 > AH-53
Euskal Party 18 > AN-45
Euskal Party 19 > AH-63
adriantxu is offline   Citar y responder
 
 Old 24 sep 2007, 04:47   #8 (permalink)  
Miembro activo
 
Avatar de _Ivancito_
 
Registrado: octubre 2006
Ubicación: Región de Azuero, República Democrática de Panamá...!100% Santeño!...en mi tierra hermosa y preciosa
Mensajes: 1.669

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

Cita:
adriantxu escribió: Ver post
Gracias por el manual!

Lo he visto un poco por encima y tiene buena pinta!!

Gracias Adriantxu!!

Informatic Style FOREVER
Iván Omar


7777000000770000007700077700770000007700077700077000000
777007700770077007700007700770077007700007000077007700
7700000770000007700700700770000007700700070077000000
7007777770077007700770000770077007700777770077007700
007777770077007700777000770077007700777770077007700

00000 Quizás fuiste tan chica para llevarte toda entera dentro de mi corazón...
0 I love you Panama
NUNCA SE SABE POCO, CUANDO EL FORO ES BUENO
_Ivancito_ is offline   Citar y responder
 
 Old 24 sep 2007, 16:54   #9 (permalink)  
Miembro Activo
 
Avatar de andres1994
 
Registrado: diciembre 2006
Ubicación: Cádiz,El puerto de santa maria
Mensajes: 139

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

gracias ivan un dia de estos me lo leere completo pero podre hacerlos en dreamweaver cs3?
andres1994 is offline   Citar y responder
 
 Old 24 sep 2007, 17:42   #10 (permalink)  
Miembro activo
 
Avatar de Guillem Cuberes
 
Registrado: noviembre 2005
Mensajes: 8.694

Predeterminado Re: Como hacer páginas en Macromedia Dreamweaver 8 Professional

el cs3 incluye mejoras, pero la estructura del programa sifue siendo la misma asi q no hay problema.

Web developer


Arch Linux
Linux registered user #475465
CPU: Intel E6850@3GHz
RAM: G.SKILL 4x1024mb DDR2-800
VGA: XFX GTS250
MB: Asus P5E
HDD: Seagate 250GB + 1TB
PSU: Hipper TypeR 580 W
Ratón: Logitech G9x
Teclado: Logitech G110
Alfombrilla: X-Trac ZooM
Joystick: Logitech Extreme Pro 3D
Auriculares: Creative Fatal1ty gaming
Guillem Cuberes is offline   Citar y responder
Página 1 de 2 | 1 | 2 | >

« configurar bios despues de agotar pila | Acelera tu menú inicio »

Herramientas
Estilo


 

Tema Iniciado por Foro Respuestas Último mensaje
Como hacer un programa??? Moys117® Programación 35 13 jun 2011 00:36
Como hacer un programa portable??? Moy117 Software 44 11 abr 2010 18:11
Tutorial de como cerrar puertos Christian_22 Seguridad 9 05 may 2007 08:48
Como hacer un archivo JPG mas pequeño? andresads74 Imagen 5 10 ene 2007 19:37
como empiezo con php? para hacer unos foros miguelws Internet 12 10 abr 2005 03:48



Buscar