SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
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ÓN
DEUSTO 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ÁFICOS
Gorcs Lladó, 99-107
Naves 9 y 10
08210 Barberà del Vallés

Printed in Spain
Impreso en España
Diseño de Páginas Web



                                                ÍNDICE



DESCRIPCIÓN DE LA INTERFAZ..................................................................                  4
   Contenidos....................................................................................             4
   Mis marcadores....................................................................................         7
   Ayuda................................................................................................      8
EJERCICIOS PRÁCTICOS............................................................................              9
   Ejercicio 1............................................................................................    9
   Ejercicio 2............................................................................................    9
   Ejercicio 3............................................................................................    9
   Ejercicio 4............................................................................................    9
   Ejercicio 5............................................................................................   10
   Ejercicio 6............................................................................................   10
SOLUCIONES 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
Cuaderno de prácticas Dreamweaver CS5



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.




          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 visionar
todos los vídeos que componen el videotutorial y examinar el tiempo que dura cada uno de
ellos (Figura 1.2).



4
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 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.3
                                                                               La tabla de
                                                                               contenidos
                                                                               muestra el
                                                                               conjunto de
                                                                               vídeos y la
                                                                               categoría a la
                                                                               que pertenecen.


                                                                                               5
Cuaderno de prácticas Dreamweaver CS5




       Figura 1.4
      Al acceder al
capí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 hacia
atrás. También regular el volumen, colocar marcadores y alterar el tamaño de la pantalla. En la
imagen de la figura 1.5 resaltamos en color naranja los elementos mencionados.




        Figura 1.5
       Mediante el
cuadro naranja en
   la parte inferior
     de la interfaz,
 hemos destacado
     los elementos
   de control para
   la reproducción
          del vídeo.


6
Diseño de Páginas Web


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.6
                                                                                   Muestra de
                                                                                   un ejemplo de
                                                                                   marcador.




                                                                                                   7
Cuaderno de prácticas Dreamweaver CS5



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.7
Pantalla de ayuda
 del videotutorial.




8
Diseño de Páginas Web



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.




                                                                                                9
Cuaderno de prácticas Dreamweaver CS5



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



10
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
Cuaderno de prácticas Dreamweaver CS5




      Figura 1.3
      Ventana de
    configuración
       del nuevo
  documento que
   vamos a crear.




      Figura 1.4
  Guardaremos el
documento HTML
    en la carpeta
   definida como
     el sitio web.




12
Diseño de Páginas Web



Ejercicio 2
Para 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 e
instalarlos.

Una vez dispongas de todos los navegadores, configura 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).




                                                                                 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 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
configurado, deberás desplegar el menú Archivo y seleccionar Vista previa en el navegador
(Figura 2.3).




                                                                                                13
Cuaderno de prácticas Dreamweaver CS5




        Figura 2.2
         Dos de los
      navegadores
disponen de atajo
   de teclado para
    ser ejecutados.




        Figura 2.3
   Podemos lanzar
la previsualización
      en cualquier
         navegador
       mediante el
   menú Archivo -
    Vista previa en
     el navegador.




14
Diseño de Páginas Web



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




                                                                                   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 crear
a 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 de
fuente, tamaño de fuente y color (Figura 3.3).

Tras definir el estilo “parrafo_1”, selecciona la etiqueta “P” mediante el selector de etiquetas y
aplí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 apreciar
los diferentes estilos aplicados a cada párrafo en la figura 3.5.




                                                                                                15
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
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
Cuaderno de prácticas Dreamweaver CS5



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




       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
Diseño de Páginas Web


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




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




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




                                                                                                   19
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
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
Cuaderno de prácticas Dreamweaver CS5



Ejercicio 6
Para la realización de este ejercicio crearemos un nuevo documento HTML. Tras guardarlo en la
carpeta ya definida 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, 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 hemos
introducido 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, pero
variando el identificador y el nombre.




22
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
Cuaderno de prácticas Dreamweaver CS5


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 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 desplegable
con el empleo del usuario. Tras hacer clic, definiremos el identificador y el nombre en la ventana
emergente. 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
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
Cuaderno de prácticas Dreamweaver CS5



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 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 tu
profesor mediante el buzón de consultas del Campus Online.




26

Más contenido relacionado

La actualidad más candente

Crear sitios web con Joomla
Crear sitios web con JoomlaCrear sitios web con Joomla
Crear sitios web con JoomlaLorena Guerrero
 
Introducción a windows movie maker
Introducción a windows movie makerIntroducción a windows movie maker
Introducción a windows movie makerCruz Fernando
 
Adobe Captivate Multimedia
Adobe Captivate MultimediaAdobe Captivate Multimedia
Adobe Captivate MultimediaYamil Lambert
 
Manual Admon Contenidos Joomla 1.5 V2 Gen
Manual Admon Contenidos Joomla 1.5 V2 GenManual Admon Contenidos Joomla 1.5 V2 Gen
Manual Admon Contenidos Joomla 1.5 V2 GenKnowldedge Factory
 
Manual dvd lab-pro
Manual dvd lab-proManual dvd lab-pro
Manual dvd lab-proJTKirk61
 
Como crear una presentacion en prezi
Como crear una presentacion en preziComo crear una presentacion en prezi
Como crear una presentacion en preziesrodriguez37
 
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...3186841042
 
Manual movie maker
Manual movie makerManual movie maker
Manual movie makerpandresudes
 
Manual Basico De Windows Movie Maker
Manual Basico De Windows Movie MakerManual Basico De Windows Movie Maker
Manual Basico De Windows Movie MakerNCelpa
 

La actualidad más candente (13)

Crear sitios web con Joomla
Crear sitios web con JoomlaCrear sitios web con Joomla
Crear sitios web con Joomla
 
Introducción a windows movie maker
Introducción a windows movie makerIntroducción a windows movie maker
Introducción a windows movie maker
 
Pc power point
Pc power pointPc power point
Pc power point
 
Adobe Captivate Multimedia
Adobe Captivate MultimediaAdobe Captivate Multimedia
Adobe Captivate Multimedia
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
Presentacion3 ide08104152-a
Presentacion3 ide08104152-aPresentacion3 ide08104152-a
Presentacion3 ide08104152-a
 
Manual Admon Contenidos Joomla 1.5 V2 Gen
Manual Admon Contenidos Joomla 1.5 V2 GenManual Admon Contenidos Joomla 1.5 V2 Gen
Manual Admon Contenidos Joomla 1.5 V2 Gen
 
Manual dvd lab-pro
Manual dvd lab-proManual dvd lab-pro
Manual dvd lab-pro
 
Como crear una presentacion en prezi
Como crear una presentacion en preziComo crear una presentacion en prezi
Como crear una presentacion en prezi
 
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
 
Manual movie maker
Manual movie makerManual movie maker
Manual movie maker
 
MANUAL CALCULADORA VOYAGE Capitulo 4(8)
MANUAL CALCULADORA VOYAGE Capitulo 4(8)MANUAL CALCULADORA VOYAGE Capitulo 4(8)
MANUAL CALCULADORA VOYAGE Capitulo 4(8)
 
Manual Basico De Windows Movie Maker
Manual Basico De Windows Movie MakerManual Basico De Windows Movie Maker
Manual Basico De Windows Movie Maker
 

Destacado (20)

Antecedentes de la_universidad
Antecedentes de la_universidadAntecedentes de la_universidad
Antecedentes de la_universidad
 
10 motivos por los que montar tu negocio en internet
10 motivos por los que montar tu  negocio en internet10 motivos por los que montar tu  negocio en internet
10 motivos por los que montar tu negocio en internet
 
Proyecto de Aula Español
Proyecto de Aula Español Proyecto de Aula Español
Proyecto de Aula Español
 
Sistema de planificacion
Sistema de planificacionSistema de planificacion
Sistema de planificacion
 
Trabajo practico de informatica
Trabajo practico de informaticaTrabajo practico de informatica
Trabajo practico de informatica
 
Peores realities
Peores realitiesPeores realities
Peores realities
 
Las venezolanas más bellas
Las venezolanas más bellasLas venezolanas más bellas
Las venezolanas más bellas
 
IDF TEMUCO #01 - Factores Humanos
IDF TEMUCO #01 - Factores HumanosIDF TEMUCO #01 - Factores Humanos
IDF TEMUCO #01 - Factores Humanos
 
Modelo de competencias
Modelo de competenciasModelo de competencias
Modelo de competencias
 
Gestión ambiental
Gestión ambientalGestión ambiental
Gestión ambiental
 
Mezcla y método de separación post
Mezcla y método de separación   postMezcla y método de separación   post
Mezcla y método de separación post
 
Actualizacion tarifas
Actualizacion tarifasActualizacion tarifas
Actualizacion tarifas
 
Etica y moral
Etica y moralEtica y moral
Etica y moral
 
Acuerdo público 2014 201520140325 1214
Acuerdo público 2014 201520140325 1214Acuerdo público 2014 201520140325 1214
Acuerdo público 2014 201520140325 1214
 
Maria fernanda martinez sanchez
Maria fernanda martinez sanchezMaria fernanda martinez sanchez
Maria fernanda martinez sanchez
 
sistemas esbeltos
sistemas esbeltossistemas esbeltos
sistemas esbeltos
 
Quién lo dijo
Quién lo dijoQuién lo dijo
Quién lo dijo
 
Trabajo práctico nº 2
Trabajo práctico nº 2Trabajo práctico nº 2
Trabajo práctico nº 2
 
Tecno 4 tm prog coneau 2013
Tecno 4 tm prog coneau 2013Tecno 4 tm prog coneau 2013
Tecno 4 tm prog coneau 2013
 
Electrocardiograma
ElectrocardiogramaElectrocardiograma
Electrocardiograma
 

Similar a Dw3 prcticasdreamweaver-110513081159-phpapp01

Trabajo power point cristian suarez
Trabajo power point cristian suarezTrabajo power point cristian suarez
Trabajo power point cristian suarezcristiansuarezcr7
 
Manual windows movie maker abc0
Manual windows movie maker abc0Manual windows movie maker abc0
Manual windows movie maker abc0antonio cortés
 
Actividad Power Point_Maicol
Actividad Power Point_MaicolActividad Power Point_Maicol
Actividad Power Point_Maicolmaicol4
 
Breve Manual Kdenlive
Breve Manual KdenliveBreve Manual Kdenlive
Breve Manual Kdenlivecopy51
 
Explicasión powerpoint fa
Explicasión powerpoint faExplicasión powerpoint fa
Explicasión powerpoint fafabian suarez
 
Taller de multimedia
Taller de multimediaTaller de multimedia
Taller de multimediaWillsandoval
 
Marco antonio torres informatica
Marco antonio torres informaticaMarco antonio torres informatica
Marco antonio torres informaticaMarcus Comonforth
 
Manual de-movie-maker1
Manual de-movie-maker1Manual de-movie-maker1
Manual de-movie-maker1Maria Claudia
 
Cuestionario de power point
Cuestionario de power pointCuestionario de power point
Cuestionario de power pointJavier Laguna
 
Fichas movie maker
Fichas movie makerFichas movie maker
Fichas movie makerMarta Ramos
 
crear diapositivas
crear diapositivascrear diapositivas
crear diapositivasticupt
 
que es slideshare
que es slideshareque es slideshare
que es slideshareernesto503
 
actividad power point DIEGO NEMPEQUE 10-05
actividad power point DIEGO NEMPEQUE 10-05actividad power point DIEGO NEMPEQUE 10-05
actividad power point DIEGO NEMPEQUE 10-051002397528
 

Similar a Dw3 prcticasdreamweaver-110513081159-phpapp01 (20)

Taller multimedia
Taller multimediaTaller multimedia
Taller multimedia
 
Trabajo power point cristian suarez
Trabajo power point cristian suarezTrabajo power point cristian suarez
Trabajo power point cristian suarez
 
Manual windows movie maker abc0
Manual windows movie maker abc0Manual windows movie maker abc0
Manual windows movie maker abc0
 
Desarrollo de la guia 4
Desarrollo de la guia 4Desarrollo de la guia 4
Desarrollo de la guia 4
 
Actividad Power Point_Maicol
Actividad Power Point_MaicolActividad Power Point_Maicol
Actividad Power Point_Maicol
 
Breve Manual Kdenlive
Breve Manual KdenliveBreve Manual Kdenlive
Breve Manual Kdenlive
 
Perativo
PerativoPerativo
Perativo
 
Explicasión powerpoint fa
Explicasión powerpoint faExplicasión powerpoint fa
Explicasión powerpoint fa
 
Karen 10 2
Karen 10 2Karen 10 2
Karen 10 2
 
Taller de multimedia
Taller de multimediaTaller de multimedia
Taller de multimedia
 
Marco antonio torres informatica
Marco antonio torres informaticaMarco antonio torres informatica
Marco antonio torres informatica
 
Manual de-movie-maker1
Manual de-movie-maker1Manual de-movie-maker1
Manual de-movie-maker1
 
Joshy
JoshyJoshy
Joshy
 
Trabajo moviemarker
Trabajo moviemarkerTrabajo moviemarker
Trabajo moviemarker
 
Cuestionario de power point
Cuestionario de power pointCuestionario de power point
Cuestionario de power point
 
Fichas movie maker
Fichas movie makerFichas movie maker
Fichas movie maker
 
crear diapositivas
crear diapositivascrear diapositivas
crear diapositivas
 
que es slideshare
que es slideshareque es slideshare
que es slideshare
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
actividad power point DIEGO NEMPEQUE 10-05
actividad power point DIEGO NEMPEQUE 10-05actividad power point DIEGO NEMPEQUE 10-05
actividad power point DIEGO NEMPEQUE 10-05
 

Dw3 prcticasdreamweaver-110513081159-phpapp01

  • 1. Curso de Diseño de Páginas Web Cuaderno de prácticas Dreamweaver CS5
  • 2. 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ÓN DEUSTO 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ÁFICOS Gorcs Lladó, 99-107 Naves 9 y 10 08210 Barberà del Vallés Printed in Spain Impreso en España
  • 3. Diseño de Páginas Web ÍNDICE DESCRIPCIÓN DE LA INTERFAZ.................................................................. 4 Contenidos.................................................................................... 4 Mis marcadores.................................................................................... 7 Ayuda................................................................................................ 8 EJERCICIOS PRÁCTICOS............................................................................ 9 Ejercicio 1............................................................................................ 9 Ejercicio 2............................................................................................ 9 Ejercicio 3............................................................................................ 9 Ejercicio 4............................................................................................ 9 Ejercicio 5............................................................................................ 10 Ejercicio 6............................................................................................ 10 SOLUCIONES 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. Cuaderno de prácticas Dreamweaver CS5 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. 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 visionar todos los vídeos que componen el videotutorial y examinar el tiempo que dura cada uno de ellos (Figura 1.2). 4
  • 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 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.3 La tabla de contenidos muestra el conjunto de vídeos y la categoría a la que pertenecen. 5
  • 6. Cuaderno de prácticas Dreamweaver CS5 Figura 1.4 Al acceder al capí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 hacia atrás. También regular el volumen, colocar marcadores y alterar el tamaño de la pantalla. En la imagen de la figura 1.5 resaltamos en color naranja los elementos mencionados. Figura 1.5 Mediante el cuadro naranja en la parte inferior de la interfaz, hemos destacado los elementos de control para la reproducción del vídeo. 6
  • 7. Diseño de Páginas Web 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.6 Muestra de un ejemplo de marcador. 7
  • 8. Cuaderno de prácticas Dreamweaver CS5 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.7 Pantalla de ayuda del videotutorial. 8
  • 9. Diseño de Páginas Web 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. 9
  • 10. Cuaderno de prácticas Dreamweaver CS5 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). 10
  • 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. Cuaderno de prácticas Dreamweaver CS5 Figura 1.3 Ventana de configuración del nuevo documento que vamos a crear. Figura 1.4 Guardaremos el documento HTML en la carpeta definida como el sitio web. 12
  • 13. Diseño de Páginas Web Ejercicio 2 Para 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 e instalarlos. Una vez dispongas de todos los navegadores, configura 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). 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 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 configurado, deberás desplegar el menú Archivo y seleccionar Vista previa en el navegador (Figura 2.3). 13
  • 14. Cuaderno de prácticas Dreamweaver CS5 Figura 2.2 Dos de los navegadores disponen de atajo de teclado para ser ejecutados. Figura 2.3 Podemos lanzar la previsualización en cualquier navegador mediante el menú Archivo - Vista previa en el navegador. 14
  • 15. Diseño de Páginas Web 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). 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 crear a 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 de fuente, tamaño de fuente y color (Figura 3.3). Tras definir el estilo “parrafo_1”, selecciona la etiqueta “P” mediante el selector de etiquetas y aplí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 apreciar los diferentes estilos aplicados a cada párrafo en la figura 3.5. 15
  • 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. 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. Cuaderno de prácticas Dreamweaver CS5 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). 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. Diseño de Páginas Web Para finalizar 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). Figura 4.3 Aspecto de la vista diseño y código interpretando la lista anidada que acabamos de crear. 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 flotante 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). 19
  • 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. 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. Cuaderno de prácticas Dreamweaver CS5 Ejercicio 6 Para la realización de este ejercicio crearemos un nuevo documento HTML. Tras guardarlo en la carpeta ya definida 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, 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 hemos introducido 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, pero variando el identificador y el nombre. 22
  • 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. Cuaderno de prácticas Dreamweaver CS5 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 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 desplegable con el empleo del usuario. Tras hacer clic, definiremos el identificador y el nombre en la ventana emergente. 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. 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. Cuaderno de prácticas Dreamweaver CS5 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 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 tu profesor mediante el buzón de consultas del Campus Online. 26