Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                              Diseño Web Multimedia I...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                               Diseño Web Multimedia ...
Próxima SlideShare
Cargando en…5
×

Guia 1 De Dreamweaver

6.804 visualizaciones

Publicado el

Visitanos en http://www.josuefortis.info y conoce mas a cerca de como diseñar paginas web con multimedia. En esta guía encontraras lo basico de Dreamweaver.

Publicado en: Tecnología, Diseño
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
6.804
En SlideShare
0
De insertados
0
Número de insertados
8
Acciones
Compartido
0
Descargas
369
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Guia 1 De Dreamweaver

  1. 1. Escuela en Ingeniería en Computación Diseño Web Multimedia I Guía práctica de Dreamweaver 1 Dreamweaver es uno de los programas más utilizados en la creación de páginas web. La versión MX es la que utilizaremos durante estas prácticas; sin embargo, existe una versión más reciente: Dreamweaver CS4 IDENTIFICANDO EL ENTORNO DE MACROMEDIA DREAMWEAVER 1. Ingresamos a Dreamweaver MX 2004, haciendo clic el Botón Inicio, luego en Todos los programas, a continuación en Macromedia, y finalmente hacemos clic en Macromedia Dreamweaver MX 2004. 2. Seleccione el diseño del espacio de trabajo que se llama Diseñador. 3. Ahora comenzaremos por realizar una página web muy sencilla. 4. En la pantalla de inicio, en la columna Crear nuevo, haremos clic sobre HTML (véase imagen inferior) 5. Dreamweaver nos permite trabajar en tres vistas: Código, Dividir y Diseño (Ver imagen inferior). Vamos a practicar un poco en las tres vistas. Primero trabajaremos en la vista Diseño. 6. En la página, escribiremos: Esta es posiblemente mi primera página utilizando Dreamweaver MX Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  2. 2. Escuela en Ingeniería en Computación Diseño Web Multimedia I 7. Seleccionaremos el texto en la página (1), y en Propiedades(2), haremos clic sobre los comandos Negrita (3) y Alinear al centro (4) (ver imagen inferior) 8. También cambiaremos el color del texto, en Propiedades, haremos clic sobre el comando Color del texto (Puede ubicarlo en la parte inferior del comando Negrita, tal como se ve en la imagen inferior) 9. Todos los cambios que acabamos de hacer al texto, Dreamweaver los ha asociado en un estilo llamado Estilo 1. 10. Escriba el siguiente texto a partir de la línea siguiente de la página que estamos creando: Encabezado 1 Encabezado 2 Encabezado 3 11. Cambie la alineación de este bloque de texto a Alinear a la izquierda, y cambie el color por uno diferente al seleccionado anteriormente. Estos cambios en conjunto conforman Estilo 2. 12. Seleccione la el texto “Encabezado 1”, y en el comando Formato, seleccione Encabezado 1 (Vea la imagen inferior): Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  3. 3. Escuela en Ingeniería en Computación Diseño Web Multimedia I 13. Con el mismo proceso aplique el formato Encabezado 2 y Encabezado 3, a las frases correspondientes. El resultado deberá ser similar a la imagen inferior. 14. Compruebe por usted mismo el uso de otros comando del Panel Propiedades, tal como Fuente, Tamaño, Lista sin ordenar, Lista ordenada, etc. 15. Haga clic en el comando Propiedades de la página que se encuentra en Propiedades. (Ver imagen inferior) 16. Modifique el color del fondo por uno de su preferencia. 17. Haga clic en la opción Título/Codificación (1), y escriba como título (2) del documento “Mi primera página DW” (Vea la imagen inferior) Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  4. 4. Escuela en Ingeniería en Computación Diseño Web Multimedia I 18. Ahora nos desplazaremos a la vista Código. Tendremos visible el código de la página diseñada. 19. Notará que el código se han generado etiquetas que usted conoce, y posiblemente otras que no ha utilizado antes, así como bloques donde se definen estilos. Agregaremos algunos detalles a nuestro sitio Web desde esta vista. 20. Antes de la etiqueta de cierre </BODY>, agregue el siguiente bloque (Observe que ahora es más fácil crear el código, trate de explorar dichas facilidades) 21. Ya trabajamos en la vista Diseño y la vista Código, ahora visualice la página desde la vista Dividir. Desde esta vista podemos modificar nuestra página Web desde las dos vistas que conocimos en los pasos anteriores. 22. Guarde la página con el nombre La primera en DW.html haciendo clic en el menú Archivo||Guardar, o presionando la combinación Ctrl+S. 23. Haga clic en el menú Archivo||Salir. Creando un sitio web 1. Veremos qué fácil es crear nuestro propio sitio Web , en la pantalla de inicio, haga clic en Sitio de Dreamweaver (Ver imagen inferior) 2. Antes de proseguir, cree una carpeta en su dispositivo de almacenamiento (su memoria USB, un disco flexible si todavía existen, o algo que hayan inventado en la época que desarrolle esta guía). 3. Ahora asignaremos a nuestro sitio el nombre de “Valores”, y haremos clic en Siguiente. 4. Ahora debemos elegir si utilizaremos o no alguna tecnología de servidor, para este caso, seleccione No, no deseo utilizar una tecnología de servidor, y haremos clic en Siguiente. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  5. 5. Escuela en Ingeniería en Computación Diseño Web Multimedia I 5. En este paso, debemos elegir la ubicación donde almacenaremos el sitio. Para cambiar la dirección que aparece por defecto, haga clic en la carpeta a la par del cuadro de texto. Recuerde que todo lo que almacenamos en el disco duro del equipo, se eliminará al apagar la computadora; así que elegiremos la carpeta llamada Valores. Después haga clic en Siguiente. 6. En ¿Cómo conecta con su servidor remoto?, elija la opción Local/red, bajo la pregunta ¿En qué carpeta del servidor desea almacenar los archivos? elija la carpeta Valores que usted creo en su dispositivo externo. (En un caso real de trabajo, aquí deberíamos elegir la carpeta que está en el servidor Web, y no la misma como este caso). Después haga clic en Siguiente. 7. En ¿Desea activar la desprotección y protección… seleccione No, no activa la desprotección y protección. Haga clic en Siguiente. 8. Revise el informe y haga clic en Completado. 9. Observe que él en Panel Archivos, aparece seleccionada una carpeta de color verde llamada Valores (Ver imagen inferior) 10. En el Panel Archivos, haga clic en el comando Contraer/Expandir (Ver imagen inferior). 11. Una vez expandido, el Panel Archivos, nos muestra dos áreas: la de los Archivos locales y la de los Archivos remotos. En este caso, ambas ubicaciones son la misma, pero en la práctica real, a la derecha tendríamos los Archivos locales (los que trabajamos en nuestra computadora), y a la izquierda los del Servidor. Para aprender más sobre la forma de intercambiar archivos entre estas dos ubicaciones, vea su manual Diseño web y multimedia I, en las páginas 55 y 56. 12. Volveremos a hacer clic en el comando Contraer/Expandir, para contraer el Panel Archivo. 13. Ahora crearemos la primera página para nuestro sitio, cree un nuevo archivo HTML (Si no recuerda cómo hacerlo, repase la primera parte de esta guía). Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  6. 6. Escuela en Ingeniería en Computación Diseño Web Multimedia I 14. Utilizando algunas de las herramientas que vimos con anterioridad, diseñe una página similar a la siguiente: 15. Almacene dicha página con el nombre de Home.htm en su carpeta Valores. 16. Haga clic en el menú Archivo||Nuevo, se le mostrará el cuadro de diálogo Nuevo documento, elija la categoría Página básica (1), luego HTML (2) y por último haga clic en Crear (3). 17. Como imaginará, la lista que hemos digitado nos servirá como vínculos a otras páginas, en lo cual trabajaremos la próxima clase. 18. Cree una página similar a la siguiente: La Honestidad Se siempre verídico en tus tratos con los demás. Aunque él no ser honesto a veces parece divertido, inofensivo o beneficioso; recuerda que tarde o temprano el engaño Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  7. 7. Escuela en Ingeniería en Computación Diseño Web Multimedia I se descubrirá, no podremos huir de las consecuencias, y nunca podremos engañar nuestra propia conciencia. 19. Guarda la página en la carpeta Valores, con el nombre de Honestidad.htm 20. Ya habrás observado que por medio de las fichas en la parte superior del área de trabajo, podemos pasarnos de un archivo a otro, volveremos al archivo anterior haciendo clic en la ficha Home (Ver imagen inferior) 21. Si no tiene la carpeta de imágenes llamada Imágenes práctica, pídala a su docente, o a sus compañeros si ellos la tienen, guarde esta carpeta dentro de la carpeta Valores. INSERTAR IMÁGENES 1. Colocaremos el punto de inserción (alias el “cursor”) por debajo del bloque de texto de la página Home.html. 2. En el Panel Insertar (1), en la ficha Común(2) haremos clic en la flecha del comando Imágenes (3), y elegiremos el comando Imagen (4) 3. En el cuadro de diálogo que se le muestra, seleccione la carpeta Imágenes práctica (1), seleccione la Imagen 1 (2), y haga clic en Aceptar. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  8. 8. Escuela en Ingeniería en Computación Diseño Web Multimedia I 4. En el siguiente cuadro de diálogo, escriba un texto alternativo para la imagen: “La Virtud” (1). Escriba también una descripción larga como: “Demos esforzarnos sinceramente por desarrollar la solvencia moral de un niño”. (2). Finalmente, haga clic en Aceptar. 5. Coloque el punto de inserción por debajo de la imagen. Nuevamente haga clic en la flecha del comando Imágenes, y seleccione Imagen de sustitución. 6. Lo primero que hacemos es escribir el Nombre de la imagen (1), para el caso lo dejamos tal como está. En Imagen original (2) buscaremos la Imagen 2, que se encuentra en la carpeta antes mencionada. En Imagen de sustitución, elegiremos la Imagen 3. Nos aseguramos que este marcada la casilla Carga previa… (3). En Texto alternativo escribimos “Hagas lo que hagas, has bien tu parte” y por último en Al Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  9. 9. Escuela en Ingeniería en Computación Diseño Web Multimedia I hacerse clic… (4) escribiremos la dirección www.unavidamejor.org 7. Guarde los cambios realizados, y ahora abra los archivos Web que hemos generado en un navegador, puede hacerlo fácil presionado la tecla F12. Fíjese en especial lo que sucede con la imagen de sustitución cuando paseamos el puntero sobre ella. Ahora, le invitamos a agregar imágenes a la página Honestidad.htm, además, cree tres páginas utilizando Dreamweaver, sobre los siguientes temas:  La virtud.  La diligencia.  La caridad. Puede encontrar mucha información sobre estos temas en Internet. Agregue imágenes y guarde los archivos en su carpeta Valores. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

×