You are on page 1of 22

Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro

Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com
MODULO DE TRABAJO DE DREAMWEAVER

























INTRODUCCIÓN

Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com




























Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com








Adobe Dreamweaver
Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de
estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de
sitios, vídeos y aplicaciones Web basados en estándares. Creado inicialmente por
Macromedia (actualmente producido por Adobe Systems) es el programa más utilizado
en el sector del diseño y la programación web, por sus funcionalidades, su integración
con otras herramientas como Adobe Flash y, recientemente, por su soporte de los
estándares del World Wide Web Consortium.

La gran ventaja de este editor sobre otros es su gran poder de ampliación y
personalización del mismo, puesto que en este programa, sus rutinas (como la de
insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en
Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los
archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que
hace que sea un programa muy fluido, que todo ello hace, que programadores y
editores web hagan extensiones para su programa y lo ponga a su gusto.

Las versiones originales de la aplicación se utilizaban como simples editores
WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web
como CSS, JavaScript y algunos frameworks del lado servidor.

Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente
mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto
para la plataforma MAC como para Windows, aunque también se puede ejecutar en
CONCEPTO E
IMPORTANCIA
Sesión 1
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com
plataformas basadas en UNIX utilizando programas que implementan las API's de
Windows, tipo Wine. (Wikypedia, 2013)
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com

Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com

1
2
3
4
5
6
7
1._________________________________________________________
2._________________________________________________________
3._________________________________________________________
4._________________________________________________________
5._________________________________________________________
6._________________________________________________________
7._________________________________________________________
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com




Cuando vamos a trabajar en un proyecto web, lo primero que
demos hacer es definir nuestro Sitio Web, con la finalidad de
trabajar con un directorio donde vamos a guardar nuestros
archivos para que Dreamweaver los haga referencia.

Paso 1: Cree un directorio similar al
siguiente.
Paso 2: Abrir Dreamweaver y siga los pasos
siguientes.



Como soy consciente que voy a diseñar un sitio web basado solamente en archivos HTML, no
coloco nada en la dirección HTTP (URL del sitio)




En este paso nuevamente como no voy a trabajar con servidor, elijo la primera opción.
Clic en siguiente para continuar.

DEFINIENDO UN
SITIO WEB
Sesión 2
Clic
Escriba el nombre para el sitio web
Clic
Clic
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com


Ahora en este siguiente paso debemos de seleccionar el directorio donde vamos a trabajar.







NOTA: Recuerda que la carpeta que creaste como carpeta principal es Mi_Web, ahora
clic en siguiente.
Por último clic en completado.









Ahora
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com
queda elegir una web tipo HTML y en el panel derecho podrá observar
el siguiente directorio.

Nota: Ahora si deseamos administrar nuestros sitios web definidos activamos el
menú Sitio – Administrar sitios.







Aquí puedes modificar, agregar o
eliminar sitios web definidos.

Recuerda que todos los archivos que trabajes
de ahora en adelante serán almacenados en
las carpetas que has creado.














Primera página con
DreamWeaver.
Sesión
03
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com
Recuerda antes de Iniciar que en Dreamweaver se trabaja con tres tipos de vista.

Recuerda que también debes de escribir el título del sitio web, este apartado es equivalente a
la etiqueta HTML <title>

Primeros pasos: Recuerda guardar la página web en el directorio creado, cómo ves
esta va a ser tu página principal de navegación, por lo tanto lo nombraremos como
Index.html.

Recuerda que Dreamweaver permite agregar propiedades a cada objeto que insertamos en
nuestro sitio web y para ello debes de tener en cuenta a la barra de propiedades.
¿Por qué debemos guardar el documento?
Para que cuando hagamos referencias o incorporemos objetos como imágenes, estos creen
vínculos relativos al documento, de tal manera que no dependan de la ubicación de la carpeta
principal.

Configurar propiedades del documento (Página Web de manera general)
Elijo el menú Modificar -- Propiedades de página.



Vista de código : Activa el código fuente de la web que se está diseñando.
Vista Diseño : Facilita la incorporación de objetos de manera fácil para nuestra web.
Ambos (Dividir) : Visualiza el modo código y modo diseño.
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com











Modificar el color de fondo de la página, o de lo contrario puedes agregar una imagen,
seleccionar los márgenes que desear asignar al sitio web, luego que cambias los atributos
presiona en aplicar para ver los cambios sin cerrar la ventana o aceptar.
















Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com




























Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com

























EDITO: Como dice GatorV mas abajo, esto es solo para motores InnoDB, no funciona
con MyISAM

Una pequeña introducción:
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com

Para este ejemplo usaremos la clásica Base de Datos Padres a Hijos, para así lograr al final una
relación de uno (Padre) a varios (Hijos) y no complicarnos con un sistema complejo.

La Base de Datos:

Nuestra Base de Datos, como ya vimos, la llamaremos padres_hijos y tendrá la siguiente
estructura:
Código sql:
Ver original
1. -- Base de datos: 'padres_hijos'
2. -- Estructura de tabla para la tabla 'padres'
3. CREATE TABLE 'padres' (
4. 'padre_ID' INT(11) NOT NULL AUTO_INCREMENT,
5. 'padreNombre' VARCHAR(25) NOT NULL,
6. PRIMARY KEY ('padre_ID')
7. ) ENGINE=InnoDB ;
8. – Estructura de tabla para la tabla 'hijos'
9. CREATE TABLE 'hijos' (
10. 'hijo_ID' INT(11) NOT NULL AUTO_INCREMENT,
11. 'hijoNombre' VARCHAR(25) NOT NULL,
12. 'hijoPadre_ID' INT(11) NOT NULL,
13. PRIMARY KEY ('hijo_ID')
14. ) ENGINE=InnoDB ;


Como ven, lo que hemos hecho es simplemente crear un par de tablas. La tabla padres tiene un
par de campos, padre_ID y padreNombre. Por su parte, la tabla hijos, tiene tres campos,
hijo_ID, hijoNombre e hijoPadre_ID, este último será quien nos sirva para hacer nuestra relación

Cita:
NOTA: Fíjense que el campo hijoPadre_ID es tipo INT, de lo contrario, nos enviará un error al
intentar crear llaves foráneas utilizando este campo.
Creando un campo INDICE:

Una vez logrado lo anterior, ya podemos crear la relación entre ambas tablas. Para ello vamos a
la estructura de la tabla hijos y creamos un INDICEde una columna:

Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com


En el siguiente paso, escogemos el tipo de índice, que será INDEX y el campo que
utilizaremos: hijoPadre_ID:



Damos clic sobre el botón Grabar:

Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com


Y ya tenemos nuestra tabla lista para pasar a la siguiente fase.

Logrando la Integridad Referencial:

Para lograr la Integridad Referencial, que es nuestro objetivo principal, debemos ir
primeramente a la vista de relaciones, por su puesto, en la tablahijos:



Una vez aquí, escogemos el campo que vamos a relacionar y que previamente convertimos en
un INDICE y recuerden que tiene que ser de tipo INT:

Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com


Elegimos las opciones ON DELETE: CASCADE y ON UPDATE: CASCADE, esto asegurará que si
borramos o actualizamos algún registro de la tabla padre, todos los registros de la tabla hijos
que estén relacionados con este, también se borren o actualicen, según la acción. Una vez mas,
hacemos clic en Grabar y todo estará listo:



Conclusiones:

La estructura final de la Base de Datos será la siguiente:
Código sql:
Ver original
1. -- Base de datos: 'padres_hijos'
2. --
3. -- Estructura de tabla para la tabla 'padres'
4. CREATE TABLE 'padres' (
5. 'padre_ID' INT(11) NOT NULL AUTO_INCREMENT,
6. 'padreNombre' VARCHAR(25) NOT NULL,
7. PRIMARY KEY ('padre_ID')
8. ) ENGINE=InnoDB ;
Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com
9. – Estructura de tabla para la tabla 'hijos'
10. CREATE TABLE 'hijos' (
11. 'hijo_ID' INT(11) NOT NULL AUTO_INCREMENT,
12. 'hijoNombre' VARCHAR(25) NOT NULL,
13. 'hijoPadre_ID' INT(11) NOT NULL,
14. PRIMARY KEY ('hijo_ID'),
15. KEY 'hijoPadre_ID' ('hijoPadre_ID')
16. ) ENGINE=InnoDB ;
17. – Filtros para la tabla 'hijos'
18. –
19. ALTER TABLE 'hijos'
20. ADD CONSTRAINT 'hijos_ibfk_1'
21. FOREIGN KEY ('hijoPadre_ID')
22. REFERENCES 'padres' ('padre_ID')
23. ON DELETE CASCADE ON UPDATE CASCADE;


Como se puede ver, la tabla hijos a cambiado su estructura, ahora, además de la llave primaria
(PRIMARY KEY) hijo_ID, tenemos una llave externa o foránea (KEY) hijoPadre_ID.

Ahora, lo más interesante de todo es la última consulta ALTER TABLE, que intentare explicar,
desde mis modestos conocimientos:

ALTER TABLE 'hijos': Hacemos un cambio a la tabla hijos.
ADD CONSTRAINT 'hijos_ibfk_1': Añadimos una restricción, aquí con solo poner hijos es
suficiente, pero al exportar la estructura con phpMyAdmin, automáticamente pone hijos_ibfk_1
:/
FOREIGN KEY ('hijoPadre_ID'): La llave externa será el campo hijoPadre_ID.
REFERENCES 'padres' ('padre_ID'): Que hace referencia al campo padre_ID de la tabla padres.
ON DELETE CASCADE ON UPDATE CASCADE: Cuando se borre o actualice algún registro de la
tabla padre, se afectaran los registros relacionados de la tabla hijos

saludos y suerte








Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com



Direcciones web importantes
http://www.cristalab.com/ejemplos/











Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com













Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com








Módulo de trabajo de Diseño Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernández.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com