Download - guia1dedreamweaver-090330002250-phpapp02
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
Gua prctica de Dreamweaver 1
Dreamweaver es uno de los programas ms utilizados en la creacin de pginas web. La
versin MX es la que utilizaremos durante estas prcticas; sin embargo, existe una
versin ms reciente: Dreamweaver CS4
IDENTIFICANDO EL ENTORNO DE MACROMEDIA DREAMWEAVER
1. Ingresamos a Dreamweaver MX 2004, haciendo clic el Botn Inicio, luego en
Todos los programas, a continuacin en Macromedia, y finalmente hacemos
clic en Macromedia Dreamweaver MX 2004.
2. Seleccione el diseo del espacio de trabajo que se llama Diseador.
3. Ahora comenzaremos por realizar una pgina web muy sencilla.
4. En la pantalla de inicio, en la columna Crear nuevo, haremos clic sobre HTML (vase
imagen inferior)
5. Dreamweaver nos permite trabajar en tres vistas: Cdigo, Dividir y Diseo (Ver imagen
inferior).
Vamos a practicar un poco en las tres vistas. Primero trabajaremos en la vista Diseo.
6. En la pgina, escribiremos:
Esta es posiblemente mi primera pgina utilizando Dreamweaver MX
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
7. Seleccionaremos el texto en la pgina (1), y en Propiedades(2), haremos clic sobre los
comandos Negrita (3) y Alinear al centro (4) (ver imagen inferior)
8. Tambin 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 lnea siguiente de la pgina que estamos
creando:
Encabezado 1
Encabezado 2
Encabezado 3
11. Cambie la alineacin 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):
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
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, Tamao, Lista sin ordenar, Lista ordenada, etc.
15. Haga clic en el comando Propiedades de la pgina que se encuentra en Propiedades.
(Ver imagen inferior)
16. Modifique el color del fondo por uno de su preferencia.
17. Haga clic en la opcin Ttulo/Codificacin (1), y escriba como ttulo (2) del documento
Mi primera pgina DW (Vea la imagen inferior)
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
18. Ahora nos desplazaremos a la vista Cdigo. Tendremos visible el cdigo de la pgina
diseada.
19. Notar que el cdigo 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 , agregue el siguiente bloque (Observe que
ahora es ms fcil crear el cdigo, trate de explorar dichas facilidades)
21. Ya trabajamos en la vista Diseo y la vista Cdigo, ahora visualice la pgina desde la
vista Dividir. Desde esta vista podemos modificar nuestra pgina Web desde las dos
vistas que conocimos en los pasos anteriores.
22. Guarde la pgina con el nombre La primera en DW.html haciendo clic en el men
Archivo||Guardar, o presionando la combinacin Ctrl+S.
23. Haga clic en el men Archivo||Salir.
Creando un sitio web 1. Veremos qu fcil 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 todava existen, o algo que hayan inventado en la
poca que desarrolle esta gua).
3. Ahora asignaremos a nuestro sitio el nombre de Valores, y haremos clic en
Siguiente.
4. Ahora debemos elegir si utilizaremos o no alguna tecnologa de servidor, para este
caso, seleccione No, no deseo utilizar una tecnologa de servidor, y haremos clic en
Siguiente.
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
5. En este paso, debemos elegir la ubicacin donde almacenaremos el sitio. Para cambiar
la direccin 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.
Despus haga clic en Siguiente.
6. En Cmo conecta con su servidor remoto?, elija la opcin 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 deberamos
elegir la carpeta que est en el servidor Web, y no la misma como este caso). Despus
haga clic en Siguiente.
7. En Desea activar la desproteccin y proteccin seleccione No, no activa la
desproteccin y proteccin. 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
prctica real, a la derecha tendramos los Archivos locales (los que trabajamos en
nuestra computadora), y a la izquierda los del Servidor. Para aprender ms sobre la
forma de intercambiar archivos entre estas dos ubicaciones, vea su manual Diseo
web y multimedia I, en las pginas 55 y 56.
12. Volveremos a hacer clic en el comando Contraer/Expandir, para contraer el Panel
Archivo.
13. Ahora crearemos la primera pgina para nuestro sitio, cree un nuevo archivo HTML (Si
no recuerda cmo hacerlo, repase la primera parte de esta gua).
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
14. Utilizando algunas de las herramientas que vimos con anterioridad, disee una pgina
similar a la siguiente:
15. Almacene dicha pgina con el nombre de Home.htm en su carpeta Valores.
16. Haga clic en el men Archivo||Nuevo, se le mostrar el cuadro de dilogo Nuevo
documento, elija la categora Pgina bsica (1), luego HTML (2) y por ltimo haga clic
en Crear (3).
17. Como imaginar, la lista que hemos digitado nos servir como vnculos a otras pginas,
en lo cual trabajaremos la prxima clase.
18. Cree una pgina similar a la siguiente:
La Honestidad
Se siempre verdico en tus tratos con los dems. Aunque l no ser honesto a veces
parece divertido, inofensivo o beneficioso; recuerda que tarde o temprano el engao
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
se descubrir, no podremos huir de las consecuencias, y nunca podremos engaar
nuestra propia conciencia.
19. Guarda la pgina en la carpeta Valores, con el nombre de Honestidad.htm
20. Ya habrs 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 imgenes llamada Imgenes prctica, pdala a su docente, o a
sus compaeros si ellos la tienen, guarde esta carpeta dentro de la carpeta Valores.
INSERTAR IMGENES 1. Colocaremos el punto de insercin (alias el cursor) por debajo del bloque de texto
de la pgina Home.html.
2. En el Panel Insertar (1), en la ficha Comn(2) haremos clic en la flecha del comando
Imgenes (3), y elegiremos el comando Imagen (4)
3. En el cuadro de dilogo que se le muestra, seleccione la carpeta Imgenes prctica (1),
seleccione la Imagen 1 (2), y haga clic en Aceptar.
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
4. En el siguiente cuadro de dilogo, escriba un texto alternativo para la imagen: La
Virtud (1). Escriba tambin una descripcin larga como: Demos esforzarnos
sinceramente por desarrollar la solvencia moral de un nio. (2). Finalmente, haga clic
en Aceptar.
5. Coloque el punto de insercin por debajo de la imagen. Nuevamente haga clic en la
flecha del comando Imgenes, y seleccione Imagen de sustitucin.
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 sustitucin, 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
-
Escuela en Ingeniera en Computacin
Diseo Web Multimedia I
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez
hacerse clic (4) escribiremos la direccin www.unavidamejor.org
7. Guarde los cambios realizados, y ahora abra los archivos Web que hemos generado en
un navegador, puede hacerlo fcil presionado la tecla F12. Fjese en especial lo que
sucede con la imagen de sustitucin cuando paseamos el puntero sobre ella.
Ahora, le invitamos a agregar imgenes a la pgina Honestidad.htm, adems, cree tres pginas
utilizando Dreamweaver, sobre los siguientes temas:
La virtud.
La diligencia.
La caridad.
Puede encontrar mucha informacin sobre estos temas en Internet. Agregue imgenes y guarde
los archivos en su carpeta Valores.