Dw3 prcticasdreamweaver-110513081159-phpapp01

Curso de

Diseño de

Páginas Web

Cuaderno de prácticas Dreamweaver CS5

Quedan rigurosamente prohibidas, sin la autorización escrita de los titulares de «Copyright», bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, comprendidos la reprografía y el tratamiento informático, y la distribución de ejemplares de ella mediante alquiler o préstamo públicos.

INICIATIVA Y COORDINACIÓNDEUSTO FORMACIÓN

Colaborador:Interficie Proyectos Interactivos, S.L.www.interficie.com

© Planeta DeAgostini Formación, S.L.U.Barcelona (España), 2011

Primera edición: enero de 2011

ISBN: 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-2010

Impreso por:STUDIUM TALLERES GRÁFICOSGorcs Lladó, 99-107Naves 9 y 1008210 Barberà del Vallés

Printed in SpainImpreso en España

3

Diseño de Páginas Web

ÍNDICE

DESCRIPCIÓN DE LA INTERFAZ..................................................................

Contenidos....................................................................................

Mis marcadores....................................................................................

Ayuda................................................................................................

EJERCICIOS PRÁCTICOS............................................................................

Ejercicio 1............................................................................................

Ejercicio 2............................................................................................

Ejercicio 3............................................................................................

Ejercicio 4............................................................................................

Ejercicio 5............................................................................................

Ejercicio 6............................................................................................

SOLUCIONES A LOS EJERCICIOS PRÁCTICOS..............................................

Ejercicio 1............................................................................................

Ejercicio 2............................................................................................

Ejercicio 3............................................................................................

Ejercicio 4............................................................................................

Ejercicio 5............................................................................................

Ejercicio 6............................................................................................

4

4

7

8

9

9

9

9

9

10

10

10

10

13

15

18

19

22

4


DESCRIPCIÓN DE LA INTERFAZ

El DVD Videotutorial de Adobe Dreamweaver CS5 que se incluye en el curso consta de tres secciones claramente diferenciadas: Contenidos, Marcadores y Ayuda.

Contenidos

En este apartado podrás encontrar tres subapartados: Bienvenid@, Ver todos los vídeos y Tabla 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.

En el apartado Ver todos los vídeos, como su propio nombre indica, podemos visionar todos los vídeos que componen el videotutorial y examinar el tiempo que dura cada uno de ellos (Figura 1.2).

Figura 1.1Aspecto general de la interfaz de la aplicación en el subapartado

Bienvenid@.

5


El último apartado perteneciente a esta sección de Contenidos es el subapartado Tabla de contenidos. 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 hemos visualizado y el botón de reproducción (Figuras 1.3 y 1.4).

Figura 1.2A la derecha de la interfaz se muestra el listado de videos y su duración.

Figura 1.3La tabla de contenidos muestra el conjunto de vídeos y la categoría a la que pertenecen.

6


En la parte inferior del vídeo podemos detener la reproducción o avanzar hacia adelante o hacia atrás. También regular el volumen, colocar marcadores y alterar el tamaño de la pantalla. En la imagen de la fi gura 1.5 resaltamos en color naranja los elementos mencionados.

Figura 1.4Al acceder al

capítulo, podemos ver los vídeos que contiene.

Figura 1.5Mediante el

cuadro naranja en la parte inferior

de la interfaz, hemos destacado

los elementos de control para la reproducción

del vídeo.

7


En 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 concreto que 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 ella podemos ver las partes que componen los vídeos.

Mis marcadores

Mediante la opción Mis marcadores podrás seleccionar partes concretas de un vídeo. De ese modo, podrás acceder directamente a la parte del vídeo que hayas marcado previamente (Figura 1.6).

Figura 1.6Muestra de un ejemplo de marcador.

8


Ayuda

En 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ácilmente por el curso (Figura 1.7).

Figura 1.7Pantalla de ayuda del videotutorial.

9


EJERCICIOS PRÁCTICOS

A continuación, vamos a plantearte una serie de ejercicios que te ayudarán a complementar y poner en práctica algunos de los conocimientos que se imparten a lo largo del curso.

Ejercicio 1

En este primer ejercicio te planteamos la creación del sitio web que utilizarás para guardar los documentos HTML que crees en cada uno de los ejercicios. También tendrás que configurar un estándar de documento HTML.

Para la creación del sitio web, es recomendable que generes una carpeta en el Escritorio y le asignes un nombre similar a “ejercicios_Dreamweaver”. Dentro de esta carpeta deberás crear otra 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 aspectos como la versión de HTML, el Doctype, la codificación de los caracteres, etc.

Ejercicio 2

El segundo ejercicio está orientado al manejo de las herramientas que nos permiten previsualizar el código HTML que estamos creando. Para completarlo, deberás configurar varios navegadores en Dreamweaver de modo que puedas previsualizar el resultado de la página de forma ágil. Los navegadores que deberás configurar son: Internet Explorer, Firefox y Chrome.

Ejercicio 3

En este ejercicio te planteamos jugar con texto. Deberás añadir varios párrafos y cada uno de ellos deberá tener su propio color, tamaño, alineación y estilo.

Ejercicio 4

En este apartado vamos a trabajar con listas. Deberás crear una lista ordenada, otra desordenada y 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.

10


Ejercicio 5

En este ejercicio vas a trabajar con imágenes. Para ello, importarás una imagen a Dreamweaver y la trabajarás como un mapa de imágenes. Luego, crearás cinco zonas activas dentro de dicho mapa y cada uno de los enlaces conducirá a una página diferente que se abrirá en una nueva ventana del navegador.

Ejercicio 6

Como ejercicio final, deberás crear un formulario. Aunque actualmente no dispongas de ningún servidor 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 que disponga 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 han planteado. Recuerda que puedes consultar a tu profesor mediante el buzón de consultas del Campus Online.

SOLUCIONES A LOS EJERCICIOS PRÁCTICOS

Ejercicio 1

El 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 subcarpeta para imágenes, deberás definir el sitio web mediante Dreamweaver, tal y como puedes ver en las figuras 1.1 y 1.2.

Cuando hayas indicando las carpetas que actuarán como sitio local, define las características del archivo HTML (Figura 1.3).

Finalmente, deberás guardar el documento HTML. Debes hacerlo en la carpeta definida como sitio local (Figura 1.4).

11


Figura 1.1Vista general de la ventana de confi guración del sitio web.

Figura 1.2Confi guración de la carpeta que actuará como sitio web.

12


Figura 1.3Ventana de

confi guración del nuevo

documento que vamos a crear.

Figura 1.4Guardaremos el

documento HTML en la carpeta

defi nida como el sitio web.

13


Ejercicio 2

Para confi gurar 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 e instalarlos.

Una vez dispongas de todos los navegadores, confi gura la vista previa en el navegador. Para ello, accede al menú Edición - Preferencias. Allí, selecciona el apartado Vista previa en el na-vegador (Figura 2.1).

Confi gura tantos navegadores como desees. Dos de ellos puedes seleccionarlos para que se ejecuten 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 has confi gurado, deberás desplegar el menú Archivo y seleccionar Vista previa en el navegador (Figura 2.3).

Figura 2.1Seleccionaremos Chrome como tercer navegador para previsualizar los contenidos creados.

14


Figura 2.2Dos de los

navegadores disponen de atajo

de teclado para ser ejecutados.

Figura 2.3Podemos lanzar

la previsualización en cualquier

navegador mediante el

menú Archivo - Vista previa en el navegador.

15


Ejercicio 3

En 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).

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 crear a continuación. Selecciona la opción Nueva regla CSS y defi ne 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 de fuente, tamaño de fuente y color (Figura 3.3).

Tras defi nir el estilo “parrafo_1”, selecciona la etiqueta “P” mediante el selector de etiquetas y aplícale el estilo previamente defi nido, tal y como se muestra en la fi gura 3.4.

Procede de igual forma con las demás etiquetas de párrafo que has creado. Puedes apreciar los diferentes estilos aplicados a cada párrafo en la fi gura 3.5.

Figura 3.1Ejemplo de cómo se inserta la etiqueta párrafo a partir del menú Insertar.

16


Figura 3.2Nombramos el

estilo CSS como “párrafo_1”.

Figura 3.3Defi nimos las

propiedades que tendrá el estilo

que estamos creando.

17


Figura 3.4El selector nos permite seleccionar la etiqueta a la que aplicaremos el estilo CSS.

Figura 3.5Finalmente, observamos el resultado de crear tres párrafos con tres estilos CSS asociados.

18


Ejercicio 4

Para 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).

Procederemos de la misma forma para la lista ordenada y la lista de defi nición (Figura 4.2).

Figura 4.1Ejemplo de

cómo se inserta la etiqueta UL

a partir del menú Insertar.

Figura 4.2Ejemplo de

cómo se inserta la etiqueta OL

a partir del menú Insertar.

19


Para fi nalizar el ejercicio, deberemos editar el código HTML (Vista código). Allí generaremos una lista anidada a partir de la inclusión de una lista desordenada dentro de cada elemento de la lista ordenada (Figura 4.3).

Ejercicio 5

Para 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 fl otante Propiedades, crearemos un mapa de imagen para cada uno de los continentes (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).

Figura 4.3Aspecto de la vista diseño y código interpretando la lista anidada que acabamos de crear.

20


Figura 5.1La imagen

mapamundi.gif insertada en Dreamweaver.

Figura 5.2Crearemos una

zona activa para cada uno de los

continentes.

21


Figura 5.3Aspecto de la imagen mapamundi convertida en un mapa de imagen.

Figura 5.4En la paleta Propiedades podemos observar el destino en el que se cargarán cada uno de los enlaces del mapa de imagen.

22


Ejercicio 6

Para la realización de este ejercicio crearemos un nuevo documento HTML. Tras guardarlo en la carpeta ya defi nida como sitio local, usaremos la pestaña Formularios del panel de Herramientas haciendo clic en el botón Campo de texto. Posteriormente, en la ventana emergente, defi nire-mos el identifi cador y el texto de la etiqueta que precederá al campo (Figura 6.1).

Dreamweaver nos preguntará si queremos introducir la etiqueta <form>. Como no la hemos introducido anteriormente, responderemos de manera afi rmativa (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, pero variando el identifi cador y el nombre.

Figura 6.1Defi niremos los

atributos de accesibilidad del

formulario.

23


Figura 6.2Mensaje de alerta de Dreamweaver indicando si se desea crear la etiqueta de formulario.

Figura 6.3Tanto en la vista código como en el diseño podemos ver el aspecto inicial del formulario.

24


Es aconsejable insertar un salto de línea después de cada campo para poder distribuirlos mejor en la página. El resultado será similar a lo que se observa en la fi gura 6.4.

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, confi guraremos en la ventana emergente las dos posibles opciones (Figura 6.5).

Seguidamente, haremos clic en la opción Seleccionar (Lista /Menú) para insertar un desplegable con el empleo del usuario. Tras hacer clic, defi niremos el identifi cador y el nombre en la ventana emergente. Aceptaremos y seleccionaremos el desplegable. Empleando el panel Propiedades, usaremos la opción Valores de lista para defi nir 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.

Figura 6.4Poco a poco, el

formulario va tomando forma.

25


Figura 6.5Asistente para crear el elemento de formulario “Grupo de opción”.

Figura 6.6En la lista de valores, defi niremos todos los elementos que se mostrarán.

26


El procedimiento será el mismo para ambos. Solamente deberemos variar características como el nombre y la acción mediante el panel Propiedades, tal y como se detalla en la fi gura 6.7.

En el caso de que tengas alguna duda con los ejercicios, recuerda que puedes consultar con tu profesor mediante el buzón de consultas del Campus Online.

Figura 6.7El valor de los

botones enviar y borrar lo

defi niremos en la paleta

Propiedades.

Dw3 prcticasdreamweaver-110513081159-phpapp01

Documents

Transcript of Dw3 prcticasdreamweaver-110513081159-phpapp01