Guia de Trabajo de Dreamweaver

Mdulo de trabajo de Diseo Web con Dreamweaver -l- Profesor: Levi Ronald Castro
Fernndez.
Email: levironald4@gmail.com sitios web: www.educatics.milaulas.com www.levicastro.260mb.com
MODULO DE TRABAJO DE DREAMWEAVER

INTRODUCCIN

Fernndez.

Fernndez.

Adobe Dreamweaver
Adobe Dreamweaver es una aplicacin en forma de estudio (basada en la forma de
estudio de Adobe Flash) que est destinada a la construccin, diseo y edicin de
sitios, vdeos y aplicaciones Web basados en estndares. Creado inicialmente por
Macromedia (actualmente producido por Adobe Systems) es el programa ms utilizado
en el sector del diseo y la programacin web, por sus funcionalidades, su integracin
con otras herramientas como Adobe Flash y, recientemente, por su soporte de los
estndares del World Wide Web Consortium.

La gran ventaja de este editor sobre otros es su gran poder de ampliacin y
personalizacin del mismo, puesto que en este programa, sus rutinas (como la de
insertar un hipervnculo, una imagen o aadir un comportamiento) estn 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 aplicacin se utilizaban como simples editores
WYSIWYG. Sin embargo, versiones ms recientes soportan otras tecnologas web
como CSS, JavaScript y algunos frameworks del lado servidor.

Dreamweaver ha tenido un gran xito desde finales de los aos 1990 y actualmente
mantiene el 90% del mercado de editores HTML. Esta aplicacin est disponible tanto
para la plataforma MAC como para Windows, aunque tambin se puede ejecutar en
CONCEPTO E
IMPORTANCIA
Sesin 1
Fernndez.
plataformas basadas en UNIX utilizando programas que implementan las API's de
Windows, tipo Wine. (Wikypedia, 2013)
Mdulo de trabajo de Diseo Web con Dreamweaver -l- Profesor: Levi Ronald Castro Fernndez.


1
2
3
4
5
6
7
1._________________________________________________________
2._________________________________________________________
3._________________________________________________________
4._________________________________________________________
5._________________________________________________________
6._________________________________________________________
7._________________________________________________________
Fernndez.

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 disear un sitio web basado solamente en archivos HTML, no
coloco nada en la direccin HTTP (URL del sitio)

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

DEFINIENDO UN
SITIO WEB
Sesin 2
Clic
Escriba el nombre para el sitio web
Clic
Clic
Fernndez.

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
Fernndez.
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 sern almacenados en
las carpetas que has creado.

Primera pgina con
DreamWeaver.
Sesin
03
Fernndez.
Recuerda antes de Iniciar que en Dreamweaver se trabaja con tres tipos de vista.

Recuerda que tambin debes de escribir el ttulo del sitio web, este apartado es equivalente a
la etiqueta HTML <title>

Primeros pasos: Recuerda guardar la pgina web en el directorio creado, cmo ves
esta va a ser tu pgina principal de navegacin, 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 imgenes, estos creen
vnculos relativos al documento, de tal manera que no dependan de la ubicacin de la carpeta
principal.

Configurar propiedades del documento (Pgina Web de manera general)
Elijo el men Modificar -- Propiedades de pgina.

Vista de cdigo : Activa el cdigo fuente de la web que se est diseando.
Vista Diseo : Facilita la incorporacin de objetos de manera fcil para nuestra web.
Ambos (Dividir) : Visualiza el modo cdigo y modo diseo.
Fernndez.

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

Fernndez.

Fernndez.

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

Una pequea introduccin:
Fernndez.

Para este ejemplo usaremos la clsica Base de Datos Padres a Hijos, para as lograr al final una
relacin 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:
Cdigo 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')

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 relacin

Cita:
NOTA: Fjense que el campo hijoPadre_ID es tipo INT, de lo contrario, nos enviar un error al
intentar crear llaves forneas utilizando este campo.
Creando un campo INDICE:

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

Fernndez.

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

Damos clic sobre el botn Grabar:

Fernndez.

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:

Fernndez.

Elegimos las opciones ON DELETE: CASCADE y ON UPDATE: CASCADE, esto asegurar que si
borramos o actualizamos algn registro de la tabla padre, todos los registros de la tabla hijos
que estn relacionados con este, tambin se borren o actualicen, segn la accin. Una vez mas,
hacemos clic en Grabar y todo estar listo:

Conclusiones:

La estructura final de la Base de Datos ser la siguiente:
Cdigo 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')
Fernndez.
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')
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, adems de la llave primaria
(PRIMARY KEY) hijo_ID, tenemos una llave externa o fornea (KEY) hijoPadre_ID.

Ahora, lo ms 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': Aadimos una restriccin, aqu con solo poner hijos es
suficiente, pero al exportar la estructura con phpMyAdmin, automticamente 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 algn registro de la
tabla padre, se afectaran los registros relacionados de la tabla hijos

saludos y suerte

Fernndez.

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



Fernndez.

Guia de Trabajo de Dreamweaver

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guia de Trabajo de Dreamweaver

Caricato da

Copyright:

Formati disponibili

Mdulo de trabajo de Diseo Web con Dreamweaver -l- Profesor: Levi Ronald Castro

Potrebbero piacerti anche