Curso de    Diseño de  Páginas WebCuaderno de prácticasDreamweaver CS5
Quedan rigurosamente prohibidas, sin la autorización escritade los titulares de «Copyright», bajo las sanciones establecid...
Diseño de Páginas Web                                                ÍNDICEDESCRIPCIÓN DE LA INTERFAZ........................
Cuaderno de prácticas Dreamweaver CS5DESCRIPCIÓN DE LA INTERFAZEl DVD Videotutorial de Adobe Dreamweaver CS5 que se incluy...
Diseño de Páginas Web                                                                               Figura 1.2            ...
Cuaderno de prácticas Dreamweaver CS5       Figura 1.4      Al acceder alcapítulo, podemos     ver los vídeos     que cont...
Diseño de Páginas WebEn la visión reducida, aparecen dos pestañas para pasar al vídeo siguiente o al anterior.La barra de ...
Cuaderno de prácticas Dreamweaver CS5AyudaEn el apartado Ayuda encontraremos soluciones para las dudas más comunes.Además,...
Diseño de Páginas WebEJERCICIOS PRÁCTICOSA continuación, vamos a plantearte una serie de ejercicios que te ayudarán a comp...
Cuaderno de prácticas Dreamweaver CS5Ejercicio 5En este ejercicio vas a trabajar con imágenes. Para ello, importarás una i...
Diseño de Páginas Web        Figura 1.1        Vista general de        la ventana de        configuración        del sitio...
Cuaderno de prácticas Dreamweaver CS5      Figura 1.3      Ventana de    configuración       del nuevo  documento que   va...
Diseño de Páginas WebEjercicio 2Para configurar los navegadores que utilizarás para visualizar el HTML, en primer lugar as...
Cuaderno de prácticas Dreamweaver CS5        Figura 2.2         Dos de los      navegadoresdisponen de atajo   de teclado ...
Diseño de Páginas WebEjercicio 3En primer lugar, deberás introducir una etiqueta párrafo mediante la opción de menú Insert...
Cuaderno de prácticas Dreamweaver CS5       Figura 3.2  Nombramos el estilo CSS como    “párrafo_1”.      Figura 3.3     D...
Diseño de Páginas Web        Figura 3.4        El selector        nos permite        seleccionar la        etiqueta a la  ...
Cuaderno de prácticas Dreamweaver CS5Ejercicio 4Para trabajar con los diferentes tipos de listas, utilizaremos la siguient...
Diseño de Páginas WebPara finalizar el ejercicio, deberemos editar el código HTML (Vista código). Allí generaremos unalist...
Cuaderno de prácticas Dreamweaver CS5       Figura 5.1        La imagen     mapamundi.  gif insertada en   Dreamweaver.   ...
Diseño de Páginas Web        Figura 5.3        Aspecto de        la imagen        mapamundi        convertida en un       ...
Cuaderno de prácticas Dreamweaver CS5Ejercicio 6Para la realización de este ejercicio crearemos un nuevo documento HTML. T...
Diseño de Páginas Web        Figura 6.2        Mensaje de alerta        de Dreamweaver        indicando si        se desea...
Cuaderno de prácticas Dreamweaver CS5Es aconsejable insertar un salto de línea después de cada campo para poder distribuir...
Diseño de Páginas Web        Figura 6.5        Asistente para        crear el elemento        de formulario        “Grupo ...
Cuaderno de prácticas Dreamweaver CS5El procedimiento será el mismo para ambos. Solamente deberemos variar características...
Próxima SlideShare
Cargando en…5
×

Prácticas_Dreamweaver

12.162 visualizaciones

Publicado el

1 comentario
4 recomendaciones
Estadísticas
Notas
Sin descargas
Visualizaciones
Visualizaciones totales
12.162
En SlideShare
0
De insertados
0
Número de insertados
9
Acciones
Compartido
0
Descargas
1.231
Comentarios
1
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

Prácticas_Dreamweaver

  1. 1. Curso de Diseño de Páginas WebCuaderno de prácticasDreamweaver CS5
  2. 2. Quedan rigurosamente prohibidas, sin la autorización escritade los titulares de «Copyright», bajo las sanciones establecidasen las leyes, la reproducción total o parcial de esta obra porcualquier medio o procedimiento, comprendidos la reprografía yel tratamiento informático, y la distribución de ejemplares de ellamediante alquiler o préstamo públicos.INICIATIVA Y COORDINACIÓNDEUSTO FORMACIÓNColaborador:Interficie Proyectos Interactivos, S.L.www.interficie.com© Planeta DeAgostini Formación, S.L.U.Barcelona (España), 2011Primera edición: enero de 2011ISBN: 978-84-394-7322-0 (Obra completa)ISBN: 978-84-394-7333-6 (Cuaderno de prácticas Dreamweaver CS5)Depósito Legal: B-45.650-2010Impreso por:STUDIUM TALLERES GRÁFICOSGorcs Lladó, 99-107Naves 9 y 1008210 Barberà del VallésPrinted in SpainImpreso en España
  3. 3. Diseño de Páginas Web ÍNDICEDESCRIPCIÓN DE LA INTERFAZ.................................................................. 4 Contenidos.................................................................................... 4 Mis marcadores.................................................................................... 7 Ayuda................................................................................................ 8EJERCICIOS PRÁCTICOS............................................................................ 9 Ejercicio 1............................................................................................ 9 Ejercicio 2............................................................................................ 9 Ejercicio 3............................................................................................ 9 Ejercicio 4............................................................................................ 9 Ejercicio 5............................................................................................ 10 Ejercicio 6............................................................................................ 10SOLUCIONES A LOS EJERCICIOS PRÁCTICOS.............................................. 10 Ejercicio 1............................................................................................ 10 Ejercicio 2............................................................................................ 13 Ejercicio 3............................................................................................ 15 Ejercicio 4............................................................................................ 18 Ejercicio 5............................................................................................ 19 Ejercicio 6............................................................................................ 22 3
  4. 4. Cuaderno de prácticas Dreamweaver CS5DESCRIPCIÓN DE LA INTERFAZEl DVD Videotutorial de Adobe Dreamweaver CS5 que se incluye en el curso consta de tressecciones claramente diferenciadas: Contenidos, Marcadores y Ayuda.ContenidosEn este apartado podrás encontrar tres subapartados: Bienvenid@, Ver todos los vídeos yTabla de contenidos.En el apartado Bienvenid@, a modo de resumen, se realiza una presentación del curso de Ado-be Dreamweaver CS5 y sus objetivos mediante un escueto vídeo (Figura 1.1).También podemos ver cuál ha sido el último vídeo que se ha reproducido. Figura 1.1 Aspecto general de la interfaz de la aplicación en el subapartado Bienvenid@.En el apartado Ver todos los vídeos, como su propio nombre indica, podemos visionartodos los vídeos que componen el videotutorial y examinar el tiempo que dura cada uno deellos (Figura 1.2).4
  5. 5. Diseño de Páginas Web Figura 1.2 A la derecha de la interfaz se muestra el listado de videos y su duración.El último apartado perteneciente a esta sección de Contenidos es el subapartado Tabla decontenidos. En él se muestran los capítulos, subcapítulos y vídeos que conforman el curso.Además del nombre del videotutorial y su duración, aparecen señalados los vídeos que ya hemosvisualizado y el botón de reproducción (Figuras 1.3 y 1.4). Figura 1.3 La tabla de contenidos muestra el conjunto de vídeos y la categoría a la que pertenecen. 5
  6. 6. Cuaderno de prácticas Dreamweaver CS5 Figura 1.4 Al acceder alcapítulo, podemos ver los vídeos que contiene.En la parte inferior del vídeo podemos detener la reproducción o avanzar hacia adelante o haciaatrás. También regular el volumen, colocar marcadores y alterar el tamaño de la pantalla. En laimagen de la figura 1.5 resaltamos en color naranja los elementos mencionados. Figura 1.5 Mediante elcuadro naranja en la parte inferior de la interfaz, hemos destacado los elementos de control para la reproducción del vídeo.6
  7. 7. Diseño de Páginas WebEn la visión reducida, aparecen dos pestañas para pasar al vídeo siguiente o al anterior.La barra de información del área derecha nos proporciona datos acerca del vídeo en concretoque estemos viendo o sobre los vídeos que integran el capítulo seleccionado.También facilita información sobre los marcadores de vídeo que hemos creado.Si queremos ir al vídeo siguiente, simplemente tendremos que utilizar los botones superiores,etiquetados como Vídeo siguiente y Vídeo anterior.Mediante la barra superior podemos navegar por los capítulos, subcapítulos y vídeos. En ellapodemos ver las partes que componen los vídeos.Mis marcadoresMediante la opción Mis marcadores podrás seleccionar partes concretas de un vídeo. Deese modo, podrás acceder directamente a la parte del vídeo que hayas marcado previamente(Figura 1.6). Figura 1.6 Muestra de un ejemplo de marcador. 7
  8. 8. Cuaderno de prácticas Dreamweaver CS5AyudaEn el apartado Ayuda encontraremos soluciones para las dudas más comunes.Además, se muestra una serie de atajos de teclado que nos permiten navegar más fácilmentepor el curso (Figura 1.7). Figura 1.7Pantalla de ayuda del videotutorial.8
  9. 9. Diseño de Páginas WebEJERCICIOS PRÁCTICOSA continuación, vamos a plantearte una serie de ejercicios que te ayudarán a complementar yponer en práctica algunos de los conocimientos que se imparten a lo largo del curso.Ejercicio 1En este primer ejercicio te planteamos la creación del sitio web que utilizarás para guardar losdocumentos HTML que crees en cada uno de los ejercicios. También tendrás que configurar unestándar de documento HTML.Para la creación del sitio web, es recomendable que generes una carpeta en el Escritorio y leasignes un nombre similar a “ejercicios_Dreamweaver”. Dentro de esta carpeta deberás crearotra que se llamará “img”. Guarda en ella las imágenes que desees insertar en el HTML.En cuanto a la configuración del documento HTML estándar, deberás tener en cuenta aspectoscomo la versión de HTML, el Doctype, la codificación de los caracteres, etc.Ejercicio 2El segundo ejercicio está orientado al manejo de las herramientas que nos permiten previsualizarel código HTML que estamos creando. Para completarlo, deberás configurar varios navegadoresen Dreamweaver de modo que puedas previsualizar el resultado de la página de forma ágil. Losnavegadores que deberás configurar son: Internet Explorer, Firefox y Chrome.Ejercicio 3En este ejercicio te planteamos jugar con texto. Deberás añadir varios párrafos y cada uno deellos deberá tener su propio color, tamaño, alineación y estilo.Ejercicio 4En este apartado vamos a trabajar con listas. Deberás crear una lista ordenada, otra desordenaday una de definición. Finalmente, crearás una lista anidada a partir de la unión de una lista orde-nada y una desordenada. Cada una de las listas deberá tener un mínimo de cinco elementos. 9
  10. 10. Cuaderno de prácticas Dreamweaver CS5Ejercicio 5En este ejercicio vas a trabajar con imágenes. Para ello, importarás una imagen a Dreamweavery la trabajarás como un mapa de imágenes. Luego, crearás cinco zonas activas dentro de dichomapa y cada uno de los enlaces conducirá a una página diferente que se abrirá en una nuevaventana del navegador.Ejercicio 6Como ejercicio final, deberás crear un formulario. Aunque actualmente no dispongas de ningúnservidor donde alojarlo y conseguir así que pueda enviar los mensajes electrónicos correctamen-te, el objetivo del ejercicio es que te familiarices con los formularios. Para ello, crearás uno quedisponga de los siguientes campos: • Nombre • Apellidos • Teléfono • Hombre o Mujer • Ocupación (desplegable con las opciones: Estudiante, Trabajador/a, Desempleado/a, Jubilado/a).En el siguiente apartado podrás ver la solución de cada uno de los seis ejercicios que se hanplanteado. Recuerda que puedes consultar a tu profesor mediante el buzón de consultasdel Campus Online.SOLUCIONES A LOS EJERCICIOS PRÁCTICOSEjercicio 1El primer paso a realizar es, tal y como se indica en el enunciado, crear una carpeta en el Escrito-rio. Una vez hayas creado la carpeta “ejercicios_Dreamweaver” y su correspondiente subcarpetapara imágenes, deberás definir el sitio web mediante Dreamweaver, tal y como puedes ver enlas figuras 1.1 y 1.2.Cuando hayas indicando las carpetas que actuarán como sitio local, define las características delarchivo HTML (Figura 1.3).Finalmente, deberás guardar el documento HTML. Debes hacerlo en la carpeta definida comositio local (Figura 1.4).10
  11. 11. Diseño de Páginas Web Figura 1.1 Vista general de la ventana de configuración del sitio web. Figura 1.2 Configuración de la carpeta que actuará como sitio web. 11
  12. 12. Cuaderno de prácticas Dreamweaver CS5 Figura 1.3 Ventana de configuración del nuevo documento que vamos a crear. Figura 1.4 Guardaremos eldocumento HTML en la carpeta definida como el sitio web.12
  13. 13. Diseño de Páginas WebEjercicio 2Para configurar los navegadores que utilizarás para visualizar el HTML, en primer lugar ase-gúrate de que dispones de los más utilizados. Si no es así, previamente debes descargarlos einstalarlos.Una vez dispongas de todos los navegadores, configura la vista previa en el navegador. Paraello, accede al menú Edición - Preferencias. Allí, selecciona el apartado Vista previa en el na-vegador (Figura 2.1). Figura 2.1 Seleccionaremos Chrome como tercer navegador para previsualizar los contenidos creados.Configura tantos navegadores como desees. Dos de ellos puedes seleccionarlos para que seejecuten al presionar la tecla F12 o bien el atajo de teclado Ctrl + F12 (Figura 2.2).Para poder seleccionar la visualización del HTML en cualquier navegador de los que hasconfigurado, deberás desplegar el menú Archivo y seleccionar Vista previa en el navegador(Figura 2.3). 13
  14. 14. Cuaderno de prácticas Dreamweaver CS5 Figura 2.2 Dos de los navegadoresdisponen de atajo de teclado para ser ejecutados. Figura 2.3 Podemos lanzarla previsualización en cualquier navegador mediante el menú Archivo - Vista previa en el navegador.14
  15. 15. Diseño de Páginas WebEjercicio 3En primer lugar, deberás introducir una etiqueta párrafo mediante la opción de menú Insertar -HTML - Objetos de texto - Párrafo (Figura 3.1). Figura 3.1 Ejemplo de cómo se inserta la etiqueta párrafo a partir del menú Insertar.Una vez hayas creado la etiqueta párrafo, rellénala con un texto simulado, en este caso “Lo-rem ipsum”. El objetivo es que compruebes el efecto que provocará el estilo que vas a creara continuación. Selecciona la opción Nueva regla CSS y define un estilo. Llámalo “parrafo_1”(Figura 3.2).Al estilo que has denominado “parrafo_1” le aplicarás una serie de características de familia defuente, tamaño de fuente y color (Figura 3.3).Tras definir el estilo “parrafo_1”, selecciona la etiqueta “P” mediante el selector de etiquetas yaplícale el estilo previamente definido, tal y como se muestra en la figura 3.4.Procede de igual forma con las demás etiquetas de párrafo que has creado. Puedes apreciarlos diferentes estilos aplicados a cada párrafo en la figura 3.5. 15
  16. 16. Cuaderno de prácticas Dreamweaver CS5 Figura 3.2 Nombramos el estilo CSS como “párrafo_1”. Figura 3.3 Definimos las propiedades que tendrá el estilo que estamos creando.16
  17. 17. Diseño de Páginas Web Figura 3.4 El selector nos permite seleccionar la etiqueta a la que aplicaremos el estilo CSS. Figura 3.5 Finalmente, observamos el resultado de crear tres párrafos con tres estilos CSS asociados. 17
  18. 18. Cuaderno de prácticas Dreamweaver CS5Ejercicio 4Para trabajar con los diferentes tipos de listas, utilizaremos la siguiente opción de menú Insertar:HTML - Objetos de texto - Lista sin ordenar (Figura 4.1). Figura 4.1 Ejemplo de cómo se inserta la etiqueta UL a partir del menú Insertar.Procederemos de la misma forma para la lista ordenada y la lista de definición (Figura 4.2). Figura 4.2 Ejemplo de cómo se inserta la etiqueta OL a partir del menú Insertar.18
  19. 19. Diseño de Páginas WebPara finalizar el ejercicio, deberemos editar el código HTML (Vista código). Allí generaremos unalista anidada a partir de la inclusión de una lista desordenada dentro de cada elemento de la listaordenada (Figura 4.3). Figura 4.3 Aspecto de la vista diseño y código interpretando la lista anidada que acabamos de crear.Ejercicio 5Para la realización de este ejercicio insertaremos una imagen que previamente habremos guar-dado en la carpeta “img” del sitio local (Figura 5.1).Mediante la paleta flotante Propiedades, crearemos un mapa de imagen para cada uno de loscontinentes (Figuras 5.2 y 5.3).Finalmente, asignaremos un enlace a cada uno de los mapas de imagen creados. Además,indicaremos que el enlace se muestre en una nueva ventana mediante el atributo Destino -“_blank” (Figura 5.4). 19
  20. 20. Cuaderno de prácticas Dreamweaver CS5 Figura 5.1 La imagen mapamundi. gif insertada en Dreamweaver. Figura 5.2 Crearemos una zona activa para cada uno de los continentes.20
  21. 21. Diseño de Páginas Web Figura 5.3 Aspecto de la imagen mapamundi convertida en un mapa de imagen. Figura 5.4 En la paleta Propiedades podemos observar el destino en el que se cargarán cada uno de los enlaces del mapa de imagen. 21
  22. 22. Cuaderno de prácticas Dreamweaver CS5Ejercicio 6Para la realización de este ejercicio crearemos un nuevo documento HTML. Tras guardarlo en lacarpeta ya definida como sitio local, usaremos la pestaña Formularios del panel de Herramientashaciendo clic en el botón Campo de texto. Posteriormente, en la ventana emergente, definire-mos el identificador y el texto de la etiqueta que precederá al campo (Figura 6.1). Figura 6.1 Definiremos los atributos de accesibilidad del formulario.Dreamweaver nos preguntará si queremos introducir la etiqueta <form>. Como no la hemosintroducido anteriormente, responderemos de manera afirmativa (Figura 6.2).De esta manera, tal y como puedes observar, Dreamweaver habrá insertado las etiquetas ne-cesarias para crear un campo de texto y la etiqueta que indica el tipo de dato al que pertenece(Figura 6.3).A continuación, repetiremos el proceso para insertar los otros dos campos del mismo tipo, perovariando el identificador y el nombre.22
  23. 23. Diseño de Páginas Web Figura 6.2 Mensaje de alerta de Dreamweaver indicando si se desea crear la etiqueta de formulario. Figura 6.3 Tanto en la vista código como en el diseño podemos ver el aspecto inicial del formulario. 23
  24. 24. Cuaderno de prácticas Dreamweaver CS5Es aconsejable insertar un salto de línea después de cada campo para poder distribuirlos mejoren la página. El resultado será similar a lo que se observa en la figura 6.4. Figura 6.4 Poco a poco, el formulario va tomando forma.A continuación, insertaremos un campo que permita al usuario escoger su sexo. Para ello, usa-remos la opción Grupo de opción de la pestaña Formularios del panel Herramientas. Luego,configuraremos en la ventana emergente las dos posibles opciones (Figura 6.5).Seguidamente, haremos clic en la opción Seleccionar (Lista /Menú) para insertar un desplegablecon el empleo del usuario. Tras hacer clic, definiremos el identificador y el nombre en la ventanaemergente. Aceptaremos y seleccionaremos el desplegable. Empleando el panel Propiedades,usaremos la opción Valores de lista para definir las diferentes opciones que el usuario podráelegir (Figura 6.6).Finalmente, a través de la opción Botón de la pestaña Formularios, introduciremos dos botones:uno para enviar los datos y otro para borrarlos.24
  25. 25. Diseño de Páginas Web Figura 6.5 Asistente para crear el elemento de formulario “Grupo de opción”. Figura 6.6 En la lista de valores, definiremos todos los elementos que se mostrarán. 25
  26. 26. Cuaderno de prácticas Dreamweaver CS5El procedimiento será el mismo para ambos. Solamente deberemos variar características como elnombre y la acción mediante el panel Propiedades, tal y como se detalla en la figura 6.7. Figura 6.7 El valor de los botones enviar y borrar lo definiremos en la paleta Propiedades.En el caso de que tengas alguna duda con los ejercicios, recuerda que puedes consultar con tuprofesor mediante el buzón de consultas del Campus Online.26

×