Escolar Documentos
Profissional Documentos
Cultura Documentos
Facilitadora:
CNAD - Mecatrnica
TABLA DE CONTENIDO
Objetivo General......................................................................................................2
Introduccin.............................................................................................................2
Unidad I. Generalidades de Dreamweaver..............................................................2
Prctica 1. Entorno de Trabajo.............................................................................2
Prctica 2. Mens.................................................................................................2
Prctica 3. Bosquejo del sitio Web.......................................................................2
Prctica 4. Creacin de un sitio............................................................................2
Prctica 5. Creacin del primer documento.........................................................2
Unidad II. Enlazar e ilustrar una pgina..................................................................2
Prctica 1. Vnculos.............................................................................................2
Prctica 2. Imgenes............................................................................................2
Prctica 3. Imagen de sustitucin.........................................................................2
Prctica 4. Insertar Texto de Flash.......................................................................2
Prctica 5.- Botn de flash...................................................................................2
Unidad III. Formas de ordenar la informacin........................................................2
Prctica 1. Tablas.................................................................................................2
Prctica 2. Aadir y eliminar filas y columnas....................................................2
Prctica 3. Anidar, dividir y combinar celdas......................................................2
Prctica 4. Marcos................................................................................................2
Unidad IV. Creacin de Formularios y Plantillas....................................................2
Prctica 1. Formularios........................................................................................2
Prctica 2. Plantillas.............................................................................................2
Unidad V. Animaciones en una pgina web.............................................................2
Prctica 1. Capas..................................................................................................2
Prctica 2. Cubo mgico......................................................................................2
Conclusiones............................................................................................................2
Bibliografa..............................................................................................................2
2
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Objetivo General
El
participante
utilizar
las
herramientas de Dreamweaver para
disear pginas Web estticas.
3
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Introduccin
El programa DreamWeaver es una herramienta de desarrollo profesional de
sitios web, cuenta con caractersticas novedosas y ofrece un panorama amplio
de opciones de diseo que son indispensables para los diseadores expertos y
principiantes de web.
Podemos emplear DreamWeaver para crear sitios de web en forma visual, con
una interfaz grfica de fcil manejo que nos permite visualizar los cambios que
efectuamos al mismo tiempo que los realizamos.
Con Dreamweaver podemos crear pginas HTML sin tener que preocuparnos
por el cdigo HTML, recordar todos los "tags" necesarios para componer
nuestra pgina o tener que pre-visualizar en nuestra cabeza cual ser el
resultado compositivo del documento final. De esta manera, crear un
documento HTML se convierte en una tarea menos parecida a programar y
ms parecida a maquetar, tal y como se hara en un programa de maquetacin
tradicional como puede ser QuarkExpress o Pagemaker. En resumen,
podramos decir que Dreamweaver es un programa de "maquetacin" de
pginas web, salvando las lgicas distancias que lo separan de un programa
de maquetacin normal.
Con el fin de facilitar aun ms el proceso de creacin de una pgina web,
Dreamweaver aade junto a las opciones que permiten formatear un
documento HTML otras opciones que pueden ser de gran utilidad, como
funciones javascripts predefinidas (behaviors), opciones de HTML dinmico. As
mismo, aade otras herramientas que potencian la productividad, como son la
creacin de plantillas o "templates" que permiten mantener y modificar la
apariencia completa de un sitio modificando un solo documento, la posibilidad
de convertir en smbolos elementos que se repiten en muchas pginas del sitio
de manera que cualquier cambio en este smbolo actualice dicho elemento en
todas las pginas del sitio. Por otro lado, alrededor de estas herramientas de
diseo y composicin se han ido aadiendo otras opciones que permiten
gestionar sitios completos, como puede ser el cliente FTP incluido en
Dreamweaver.
Como ver, un editor de pginas web como Dreamweaver ha dejado de ser
una herramienta de composicin para convertirse en una herramienta completa
para la gestin y desarrollo de sitios web completos.
Los temas de Dreamweaver que se vern en este manual, son los siguientes:
Generalidades de Dreamweaver. En esta unidad los participantes conocern
que es Dreamweaver y cules son los requerimientos para instalar el
programa, as como las herramientas bsicas de dicho software.
4
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
5
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
6
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Prctica 2. Mens.
Escriba sobre la lnea, el nombre de los botones con que se activan los siguientes mens.
________________________________
7
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Entrar a Dreamweaver.
Crear un sitio que se llame Ejercicios en la unidad C:\Mis documentos.
En la ventana Administrador de sitios seleccionar el botn Nuevo.
8
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
9
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
10
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
11
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
12
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Con toda seguridad se tendr que volver a repetir el proceso anterior pues se
habr vuelto a la ventana Definicin del sitio.
CNAD - Mecatrnica
Clic a
y se volver a la ventana de Definicin del sitio pero ahora ya
con la carpeta creada y seleccionada como Carpeta raz local:
14
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
15
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
16
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Y se le da guardar.
17
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
18
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
19
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
20
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
21
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
De todo lo que se puede hacer aqu, de momento nos quedamos con poner un
color de fondo. Hacer clic en el cuadrito
la paleta de colores.
y aparecer
Dar clic en Archivo, Guardar de manera frecuente para conservar los cambios.
Va siendo hora de comprobar la pgina con el navegador.
Una primera forma de hacerlo consiste en darle a la tecla de funciones del
teclado <F12>. Se abrir el navegador que se tenga configurado como
predeterminado y se ver el aspecto de la pgina.
22
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
23
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
24
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Por ejemplo, hacer clic en la frase ir a la pgina anterior sea un vnculo con la
pgina anterior de este curso de Dreamweaver. Seleccionar la frase
de
y se abrir.
CNAD - Mecatrnica
26
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Se hace con el comienzo: se sita el cursor delante del ttulo del documento
(delante de Vnculos) y clic en la barra de mens Insertar, Anclaje con nombre.
27
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
28
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
ste es el resultado:
29
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Prctica 2. Imgenes
Para insertar una imagen es conveniente tenerla previamente guardada en la
carpeta del sitio. De lo contrario Dreamweaver advertir para que se guarde
una copia en la carpeta correspondiente.
Las imgenes pueden estar sueltas en la carpeta raz junto con los archivos de
cada uno de los documentos o, mucho mejor, en una carpeta especial dentro
del sitio a la que se le llamar Imgenes (nombre de los archivos y carpetas sin
acentos) o cualquier otro nombre que sugiera que, dentro de esa carpeta estn
las imgenes.
Para crear una carpeta dentro de la carpeta raz del sitio, dar un clic derecho
sobre el sitio y seleccionar Nueva carpeta.
Se crear una carpeta con el nombre untitled que habr que cambiar por el que
se desee tenga la carpeta de imgenes:
30
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
va a sugerir que se haga. Supongamos que se quiere insertar una imagen que
se tiene guardada en el Escritorio. La imagen se llama obras.
Seleccionar Insertar de la barra de mens y dar clic en Imagen:
31
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
32
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Ahora colocar una imagen a fondo de una tabla, o de una celda. Por ejemplo,
en la tabla que se ha creado en el apartado anterior.
Se pone una imagen de fondo a algunas de las celdas. Por ejemplo,
seleccionar la primera celda (colocar el cursor en ella y pulsar <td> en la barra
de
estado).
En
el
panel
de
Propiedades
seleccionar
en
de
33
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
34
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
1) Crear una nueva pgina llamada menu.html que tenga las siguientes
caractersticas (las imgenes se habrn copiado previamente a la carpeta)
CNAD - Mecatrnica
36
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
37
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
38
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Modificar alguna de las propiedades del mismo, basta con hacer doble clic
sobre el botn para volver a la ventana anterior y poder hacer los cambios
oportunos.
39
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
40
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
La tabla debe ser como sigue: con 3 filas y 6 columnas y que ocupe 80% del
ancho, un borde de 2 pixeles y un relleno de celda de 5 pixeles:
41
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Pulsar el botn
Otra forma de seleccionar filas y/o celdas consiste en situar el cursor en una de
las celdas y arrastrar con el ratn hasta donde se desee.
Seleccionar las cuatro celdas intermedias de la ltima fila. Si se le da clic al
icono
, las celdas seleccionadas se agruparn en una sola:
Se puede aadir texto o variar las propiedades de las celdas por los
procedimientos descritos:
CNAD - Mecatrnica
Para eliminar una fila o una columna, hay que pulsar sobre las opciones
Eliminar fila o Eliminar columna.
1) Abrir el archivo miprimertabla.htm. Aadir una columna a la derecha y
otra a la izquierda y tambin una arriba y otra abajo. Poner como color de
fondo a las celdas creadas el color gris. Esto se hace seleccionando las
celdas y pulsando sobre el botn
Guardar la tabla resultante con el nombre miprimertabla_modificada.htm
43
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Abrir la pgina web del ejercicio anterior y realizar los siguientes pasos:
CNAD - Mecatrnica
Prctica 4. Marcos
Para crear una pgina con marcos, se debe saber que:
Crear un sitio nuevo que se llame Ejemplo de marcos dentro de la carpeta raz
marcos que se crear en Mis documentos.
Empezar por crear un nuevo archivo, sealando Archivo, nuevo archivo.
Aparecer el nuevo archivo al que Dreamweaver llamar untitled.html.
Pulsar
Seleccionar el botn
45
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Colocando el cursor sobre cada uno de los conos muestra los diferentes
conjuntos de marcos que se pueden utilizar.
Una vez decidido qu conjunto de marcos se va a utilizar (en nuestro caso,
hacemos clic sobre el icono
pgina.
46
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Frame el ttulo.
Frame principal.
47
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Este proceso es muy importante, por eso se debe realizar tal como se indica.
Aparecer la siguiente ventana:
48
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
49
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
50
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
51
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
52
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Elige mainFrame.
Haz lo mismo para el enlace del 2: selecconalo o haz clic en la carpeta del
vnculo. Elige el archivo dos y en Dest selecciona el mainFrame.
Lo mismo para el tercer enlace.
Guardar el archivo, guardar todo.
Oprimir <F12> para comprobar con el navegador que las cosas funcionan.
53
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Elegir la pestaa
Ahora, por motivos estticos, coloca una tabla dentro del formulario con dos
columnas y varias filas: sita el cursor dentro del rectngulo de lneas
discontinuas, introduce la tabla y cntrala.
54
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
55
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
56
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Pon un tercer botn con la opcin de que la pgina es mala, bastante mala.
Con el mismo nombre: opinin y como valor activado: mala.
57
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
58
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Escribe en
los elementos del men. En valor escribe lo
mismo (ser lo que aparezca al ser enviado el formulario). Pulsando la tecla
para incluir el siguiente y la tecla
para quitar uno ya introducido. Con las
flechas ve cambiando el orden de las etiquetas de elemento.
59
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
rea de texto:
60
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
61
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
62
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Para dar por finalizado el formulario. Queda por definir la accin que se quiere
realizar una vez relleno. Para usuarios personales, la opcin ms habitual es el
envo por correo electrnico de los datos obtenidos. Esto se hace colocando el
cursor en cualquier punto del formulario y eligiendo <form> desde la barra de
estado
. Aparecern las
propiedades del formulario
63
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Prctica 2. Plantillas
Se empezar abriendo desde Archivo de la barra superior.
64
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Una vez finalizada la tabla se tiene que elegir los elementos que van a poder
ser modificados: Primero se selecciona el elemento modificable (en el primer
ejemplo el nombre del curso) y en el men Insertar clic en Objeto de plantilla,
Regin editable.
65
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
66
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
En los archivos se habr creado una carpeta con el nombre Templates y, dentro
de ella, la plantilla que se acaba de crear. A veces no se visualiza
inmediatamente, hay que cerrar y abrir de nuevo el sitio para que se haga
visible la carpeta.
Ahora para crear un documento basado en esa plantilla, abre Archivo, Nuevo,
Plantillas y haz clic en Crear.
CNAD - Mecatrnica
68
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
69
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
1 2 3
4 5 6
7 8 9
Es importante realizar cada imagen con un tamao redondo. En el ejemplo
miden 100 x 100 pixeles.
Se Irn insertando capas e introduciendo una imagen con el nmero respectivo
dentro de cada una de las capas (el cursor deber estar dentro de la capa
antes de insertar la imagen).
La capa y la imagen deben tener el mismo tamao.
70
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
71
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Se tiene que:
En Capa: seleccionar la capa Layer4 (est colocado el 4).
Movimientos dejar Sin restricciones.
Hacer clic en Obtener posicin actual para que se rellenen los nmeros del
Destino de forma automtica.
Ajustar a 20 pixeles del destino. Esto quiere decir que, cuando el visitante
suelte el objeto a menos de 20 puntos de la solucin, el objeto se colocar solo
de manera exacta en el sitio que acaba de ser obtenido al pulsar en Obtener
posicin actual, lo que proporcionar belleza en la solucin final y sensacin de
seguridad al saber que es sa la posicin a la que haba que llevar el objeto (en
este caso, el nmero).
72
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
73
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Conclusiones
Dreamweaver 8 puede integrar entradas RSS provenientes de otras pginas
con slo introducir la fuente y arrastrar y colocar los campos. De esta forma
podr introducir datos en formato XML fcil y cmodamente.
Esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo
de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS,
donde ahora podr acceder a la configuracin de cada uno de los estilos
desde una lista mucho mejor dotado de una cuadrcula editable desde donde
se modificarn sus propiedades. Adems, Dreamweaver 8, aade una nueva
barra de herramientas que proporciona la reproduccin inmediata de los
estilos para diferentes medios (pantalla, impresora, webTV, PDAs...).
Su sincronizacin ha mejorado notablemente siendo posible una mejor
gestin de cambios, adems de permitir en uso de bolqueo/desbloqueo de
archivos para que estos no se sobreescriban.
Los usuarios con problemas visuales podrn acceder a una opcin de
Aumento de la pantalla en vista de diseo para analizar o trabajar con difciles
anidamientos de tablas. Adems de la inclusin de informacin visual gracias
a las guas que permitirn la medicin pxel a pxel de todos los elementos.
Se ha aadido una barra de herramientas a Dreamweaver 8, podr
encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace
mucho ms accesible el cdigo al permitir la navegacin por etiquetas y su
contraccin. Una de las nuevas novedades es la posibilidad de aadir
comentarios con un slo clic.
Concluiremos, adems, la compatibilidad aadida en esta versin con PHP5,
Coldfusion MX 7 y Video Flash.
74
Lic. Norma Fernndez Osorio
CNAD - Mecatrnica
Bibliografa
GASPAR GONZLEZ MANGAS y ANTONIA GONZLEZ MANGAS.
Negocios Virtuales. Ed. MC Graw Hill. Primera edicin
http://macromedia.com
http://aulaclic.com
http://www.ua.es/ugt/cursos/curso_diseno_web/ejercicios1_8.pdf
http://www.adrformacion.com/cursos/dream/dream.html
http://www.arp.jazztel.es/dreamweaver.htm
http://www.arp.jazztel.es/dreamweaver.htm
75
Lic. Norma Fernndez Osorio