Manual de Adobe Dreamweaver CS3

ADOBE DREAMWEAVER CS3

Qu es Adobe Dreamweaver CS3?

Adobe Dreamweaver es una aplicacin en forma de suite (basada en la forma de estudio de Adobe Flash) que est destinada a la construccin, diseo y edicin de sitios, videos 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. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edicin de imgenes como para animacin a travs de su integracin con otras. Hasta la versin MX, fue duramente criticado por su escaso soporte de los estndares de la web, ya que el cdigo que generaba era con frecuencia slo vlido para Internet Explorer y no validaba como HTML estndar. Esto se ha ido corrigiendo en las versiones recientes. Se vende como parte de la suite Adobe Creative Suite. Ingresando a Adobe Dreamweaver CS3: Clic en el botn Inicio. Clic en la opcin Ejecutar. Ingresar el nombre ejecutable: Dreamweaver. Clic en el botn Aceptar.

Conociendo la interfaz de Adobe Dreamweaver CS3:

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Barra de titulo. Botones de Control. Barra de mens. Barra Insertar. Barra de documento. Barra Estndar. Regla o Regleta. Cursor. rea de diseo. rea de paneles. Barra de propiedades.

Creando una pagina web: Clic en el men Archivo. Clic en la opcin Nuevo, aparecer una ventana. En la categora, elegir la opcin pagina bsica. En la pgina bsica, elegir HTML. Clic en el botn Crear.

Guardando una pagina web: Clic en el men Archivo. Clic en la opcin Guardar como En la lista Guardar en, elegir donde se va a almacenar. Ingresar el nombre a la pgina Web. Clic en el botn Guardar.

Abriendo una pagina web: Clic en el men Archivo. Clic en la opcin Abrir. En la lista Buscar en, buscar la pagina existente. Seleccionar el objeto. Clic en el botn Abrir.
2

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3

Visualizando tu pagina web en el navegador: Antes de visualizar una pagina, debern estar guardados los ltimos cambios. Clic en el men Archivo. Seleccionar la opcin Vista previa en el navegador. Clic en la opcin IExplorer 6.0

Cerrando la pagina web: Antes de cerrar una pagina, debern estar guardados los ltimos cambios. Clic en el men Archivo. Clic en la opcin Cerrar.

Preparando la pagina web: Clic en el men Modificar. Clic en la opcin Propiedades de la Pgina. Realizar los cambios, que desee o se pida. Clic en el botn Aceptar.

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3 Conociendo la barra de Propiedades: Esta barra va a variar, segn que objeto tiene seleccionado, pero por defecto se muestra las propiedades de texto. Por ejemplo: alineaciones, listas, tamao, color y estilo de fuente, etc.

Insertando Hipervnculo o enlace (EXTERNO): Clic en el men Insertar. Clic en la opcin Hipervnculo. Ingresar el texto que se va mostrar en la Web. Ingresar el vnculo, donde se va a ingresar al hacer clic. Ingresar el titulo, que se mostrara, cuando se seale. Clic en el botn Aceptar.

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3 PRACTICA 07:

Nota: relacionado al titulo, todos los vnculos, tendrn el mensaje: Clic aqu. Y relacionado al destino, solo se trabajara con Blank y Parent. Tipos de destinos de enlaces o hipervnculo:
1. 2. 3. 4.

Blank: muestra la web en una nueva pgina. Parent: muestra la web en la misma ventana. Self: muestra la web en la misma ventana. Top: muestra la web en la ventana completa.

Insertando un hipervnculo interno: Antes deber disear la pgina, con el contenido que el usuario desee o se le pida. En dicha pgina se mostrara una lista no ordenada y una lista con definicin. (Dicha pgina se muestra mas adelante). En la lista de definicin, seleccionar el texto o imagen, que desea ingresar el anclaje. Clic en el men Insertar. Clic en la opcin Anclaje con nombre. Ingresar el Nombre de anclaje. Clic en el botn Aceptar. Aparecer el marcador de anclaje y eso significara que esta correcto.

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3 En la lista no ordenada, seleccionar el texto donde desea ingresar el anclaje.

En el campo Vinculo de la barra de propiedades, digitar el smbolo ( # ), ms la palabra de anclaje, por ejemplo: #SHAKIRA.

Nota: El nombre ser ingresado como se muestra: AVRIL_LAVIGNE Paginas de Interes: http://www.musica.com http://www.google.com.pe http://www.hotmail.com/ http://www.mixmail.com http://www.yahoo.es http://www.latinmail.com

PRACTICA 08:

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3 Crear una lista no ordenada, con 5 nombres de cantantes. Crear una lista de definicin, con sus respectivas biografas. Ingresar los hipervnculos, que se les pida. Insertando hipervnculo de Correo electronico: Clic en el men Insertar. Clic en la opcin Vnculo de Correo Electrnico. En la ventana que aparece, ingresar el texto a mostrar en la pgina Web. Ingresar el correo electrnico. Clic en el botn Aceptar.

PRACTICA 09:

Insertando un hipervnculo a un archivo: Seleccionar el texto, que desea establecer como vinculo. En el campo Vnculo, hacer clic en el botn Buscar el archivo (situado a la derecha).

Clic en la lista Buscar en, para ubicar y seleccionar el archivo. Clic en el botn Aceptar.
Autor: Gerardo Javier Caldern Hernndez 7

Manual de Adobe Dreamweaver CS3

PRACTICA 10:

Insertando un hipervnculo de correo electrnico desde una imagen Seleccionar la imagen. En el campo Vinculo, ingresar el texto: mailto: Y adems el correo electrnico del contacto o empresa.

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3 Insertando una tabla: Clic en el men Insertar. Clic en la opcin Tabla, aparecer una ventana. En dicha ventana, tendr que elegir cuantas filas y columnas desea. El ancho de la tabla. Grosor del borde de la tabla. Y otros, como por ejemplo: relleno de celda, espaciado entre celdas, encabezado, etc. Clic en el botn Aceptar.

PRACTICA 11:

Esta practica, se va trabajar con la ya creada PRCTICA 08, para darle los cambios respectivos y claro esta gurdalo con otro nombre. Insertar una imagen, segn su biografa. Insertar una imagen al lado derecho del nombre del artista (Lista definicin). Insertar un anclaje, que me permite volver al men.
Autor: Gerardo Javier Caldern Hernndez 9

Manual de Adobe Dreamweaver CS3 Insertar una imagen al lado derecho del nombre del artista (Lista definicin). Crear un hipervnculo de archivo. Insertar una imagen en la parte inferior. Insertar un hipernviculo de correo en la ltima imagen. Guardar con otro nombre.

COMBINANDO CELDAS: Seleccionar el rango de filas o columnas. Clic en el men modificar. Seleccionar la opcin Tabla. Clic en la opcin Combinar Celdas.

INSERTANDO FILA: Posicionar el cursor, donde desea insertar la fila. Clic en el men modificar. Seleccionar la opcin Tabla. Clic en la opcin Insertar Fila (Se insertara hacia arriba). INSERTANDO COLUMNA: Posicionar el cursor, donde desea insertar la columna. Clic en el men modificar. Seleccionar la opcin Tabla. Clic en la opcin Insertar Fila (Se insertara hacia la izquierda).

PRACTICA 12:

CREANDO ALBUM DE FOTOS: Clic en el men Comandos. Clic en la opcin Crear lbum de fotos Web En el campo Titulo del lbum de fotos, ingresar el nombre a dicho lbum.

Autor: Gerardo Javier Caldern Hernndez

10

Manual de Adobe Dreamweaver CS3 En el campo Carpeta origen, clic en el botn Examinar para seleccionar la carpeta de las imgenes. En el campo Carpeta destino, clic en el botn Examinar para seleccionar la carpeta donde se va a almacenar. Clic en el botn Aceptar. Posiblemente cargara el Fireworks, para la detectar las imgenes a importar. Aparecer una ventana de advertencia, que significara que tu lbum de fotos, ya esta creado. Clic en el botn Aceptar.

Nota: se va a crear 4 objetos, en la carpeta destino: El archivo de la pgina web, donde se va a observar el lbum de fotos. Una carpeta llamada Images, donde va a almacenar las imgenes Una carpeta llamada pages, donde va a almacenar las paginas webs de cada foto. Una carpeta llamada thumbnails, donde se va a almacenar las imgenes en tamao reducido.

PRACTICA 14 (PARA LA CASA): Conseguir de cualquier medio 20 fotos (unidad de almacenamiento, hi5, cmara digital, etc.). Luego crear en su casa o en un cibercaf, un lbum de fotos, con la aprendido en clase.

Insertando botn flash: Clic en el men Insertar. Seleccionar la opcin Media.

Autor: Gerardo Javier Caldern Hernndez

11

Manual de Adobe Dreamweaver CS3 Clic en la opcin Botn Flash. En la ventana que aparece, elegir el estilo (diseo) del botn flash. Ingresar el nombre del botn, en el campo texto del botn. Clic en el botn Aceptar.

Insertando un marco a la pagina web: En la barra Insertar, hacer clic en la ficha Diseo. Clic en la flecha hacia abajo del botn Marco. Elegir el modelo de marco predeterminado, que se desee o se pida. Se mostrara una ventana, para poder ingresarle el nombre, dicha ventana deber cancelarla, para luego ubicar los nombres manualmente. Al guardar, tendr que guardar individualmente cada marco, que esta representado por una pagina Web.

1 Pgina

2 Pgina

3 Pgina

Autor: Gerardo Javier Caldern Hernndez

12

Manual de Adobe Dreamweaver CS3

Mostrando bordes de marco (MODO DISEO): Clic en el men Ver. Clic en la opcin Ayudas visuales. Clic en la opcin Bordes de Marco.

Ingresando nombre a los marcos: Clic en el men Ventana. Clic en la opcin Marco. En dicho panel, se mostrara una vista previa de nuestros marcos, deber hacer clic en un marco. En la barra de propiedades, cambiar el nombre, en el campo Nombre de marco. Presionar la tecla Enter. Y as sucesivamente con los dems marcos. Nota: Al primer marco, no se le puede ingresar un nombre.

Guardando marcos o frames: Crear el marco correspondiente. Ingresar los nombres correspondientes a cada marco, en el panel de Marco. Clic en el men Archivo. Clic en la opcin Guardar marco. Aparecer la ventana de Guardar como, guardarlo como Frame01. En la carpeta: FRAME01. Clic en el men archivo. Clic en la opcin Guardar todo. Aparecer de nuevo la ventana de Guardar como, guardar el primer marco, con Frame02, luego correlativamente.

CREANDO BOTONES FLASH DENTRO DE UN MARCO O FRAME: Crear el marco correspondiente.

Autor: Gerardo Javier Caldern Hernndez

13

Manual de Adobe Dreamweaver CS3 Posicionarse en el marco, donde estar el botn o botones. Clic en el men Insertar. Seleccionar la opcin Media. Clic en la opcin Botn Flash. En la ventana que aparece, ingresar el nombre. Darle el formato que usted desee. En el campo destino, ya no aparecer 4 opciones, el caso ser que se aumentara los nombres de los marcos, para que lo usted elija donde se debe visualizar. Clic en el botn Aceptar.

Insertando texto flash: Posicionar el cursor, donde se desea ingresar el texto flash. Clic en el men Insertar. Seleccionar la opcin Media. Clic en la opcin Texto flash. En el campo Texto, ingresar el texto que se va a mostrar. Ingresar el color inicial y luego el color de sustitucin. Dar los cambios, que usted desee o se le pida. Clic en el botn Aceptar.

Autor: Gerardo Javier Caldern Hernndez

14

Manual de Adobe Dreamweaver CS3 PRACTICA 15: Crear una pagina web nueva. Clic en la pestaa Diseo, ubicado en la parte superior. Clic en la opcin Marco. Clic en la opcin Marco izquierdo, aparecer una ventana. Clic en el botn Aceptar.

Establecer los parmetros del borde del marco.

Ahora deber ingresar un nombre al rea del marco. Clic en el men Ventana. Clic en la opcin Marcos, aparecer un panel llamado marcos. Clic en el marco llamado leftframe.

En el nombre del marco, cambiarlo por MENU.

Igual para el marco llamado mainframe.

Autor: Gerardo Javier Caldern Hernndez 15

Manual de Adobe Dreamweaver CS3 Cambiarlo por CONTENIDO. Clic en el men Archivo. Clic en la opcin Guardar Todo, aparecer una ventana llamada Guardar Como. Ingresarle el nombre: Pagina01. Clic en el botn Guardar. Aparecer de nuevo la ventana, ingresar el nombre a la pgina: Pagina02. Clic en el botn Guardar. Aparecer de nuevo la ventana, ingresar el nombre a la pgina: Pagina03.

Modificar la forma de las pginas. En el rea de pagina02. Deber crear el contenido y guardarlo con un nombre. Luego guardar de nuevo el rea de pagina02, con su mismo contenido, para que pueda aparecer el contenido. El contenido del proyecto, ser el siguiente:

Autor: Gerardo Javier Caldern Hernndez

16

Manual de Adobe Dreamweaver CS3

Qu es AJAX? Ajax viene del acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la pgina. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asncrono est formateado en XML.

Autor: Gerardo Javier Caldern Hernndez

17

Manual de Adobe Dreamweaver CS3 Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas operativos y navegadores, dado que est basado en estndares abiertos como JavaScript y Document Object Model (DOM). Ingresando una barra de mens de Spry: Clic en el men Ventana. Clic en el panel Insertar, para activarlo. Clic en la ficha o etiqueta llamado: Spry.

Clic en la opcin llamado: Barra de mens de Spry.

PRACTICA 15:

Primeramente guardar la pagina web. En la ventana que aparece, elegir el diseo horizontal o vertical.

Se muestra de la siguiente manera los mens.

Autor: Gerardo Javier Caldern Hernndez 18

Manual de Adobe Dreamweaver CS3

En la barra de propiedades, te muestra los parmetros del men.

Cambiar su contenido, para que se muestre de la siguiente manera: Men:

Inicio:

Cursos:

Autor: Gerardo Javier Caldern Hernndez

19

Manual de Adobe Dreamweaver CS3 Niveles:

Servicios:

Presionar la tecla F12, para activar el navegador web.

Ingresando un Panel de fichas en Spry: Clic en el men Ventana. Clic en el panel Insertar, para activarlo. Clic en la ficha o etiqueta llamado: Spry.

Clic en la opcin llamado: Panel en fichas de Spry.

Para visualizar cada ficha o etiqueta, clic en el boton en forma de un ojo.

Autor: Gerardo Javier Caldern Hernndez 20

Manual de Adobe Dreamweaver CS3

PRACTICA 17:

Autor: Gerardo Javier Caldern Hernndez

21

Manual de Adobe Dreamweaver CS3 Creando un acorden Spry: Crear una pagina web HTML.

Guardar la pagina web. Clic en el men Insertar. Seleccionar la opcion llamado: Spry. Clic en la opcion llamado: Acorden de Spry.

Se mostrara lo siguiente:

Seleccionar el acorden. En la barra de propiedades, clic en el boton +, para agregar un panel mas.

Autor: Gerardo Javier Caldern Hernndez

22

Manual de Adobe Dreamweaver CS3 Si se desea cambiar sus propiedades, activar el panel de Estilos CSS. Modificar las caractersticas de la opcin llamado: Acorden.

PRACTICA 19:

Autor: Gerardo Javier Caldern Hernndez

23

Manual de Adobe Dreamweaver CS3 QUE ES UNA BASE DE DATOS? Una base de datos o banco de datos (abreviada con la sigla BD) es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemticamente para su posterior uso. En este sentido, una biblioteca puede considerarse una base de datos compuesta en su mayora por documentos y textos impresos en papel e indexados para su consulta. En la actualidad, y debido al desarrollo tecnolgico de campos como la informtica y la electrnica, la mayora de las bases de datos estn en formato digital (electrnico), que ofrece un amplio rango de soluciones al problema de almacenar datos. QUE ES MICROSOFT ACCESS? Microsoft Access es un programa, utilizado en los sistemas operativos Microsoft Windows, para la gestin de bases de datos creado y modificado por Microsoft y orientado a ser usado en entornos personales o en pequeas organizaciones. CREANDO UNA BASE DE DATOS EN ACCESS: Ingresar a Microsoft Access. Crear una base de datos, para este caso, tendr que seleccionar el lugar donde se va a guardar y el nombre de la base de datos.

CREANDO TABLAS EN ACCESS: Ingresar a Microsoft Access. Ingresar a su base de datos llamada agenda. Crear las siguientes tablas: AMIGOS y TELEFONOS. Clic en la cinta de opciones llamada Crear. Clic en la opcin Tabla. Clic en Vista Diseo. Le aparecer una ventana, para guardar la tabla. Ingresar el nombre: AMIGOS.

Autor: Gerardo Javier Caldern Hernndez

24

Manual de Adobe Dreamweaver CS3 Crear los siguientes campos. Con sus respetivos tipos de datos.

Para guardar los cambios, presionar CTRL + W. Le aparecer una ventana, clic en Si, para guardar los cambios. Igual realizarlo para la tabla: TELEFONOS.

Luego agregar su contenido:

QUE ES XAMPP? Es un servidor independiente de plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor web Apache y los intrpretes para lenguajes de script: PHP y Perl. El nombre proviene del acrnimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL, PHP, Perl.

Autor: Gerardo Javier Caldern Hernndez

25

Manual de Adobe Dreamweaver CS3 INGRESANDO A XAMPP:

Ingresar a un navegador web. Ingresar la direccin web llamada: localhost o 127.0.0.1. Clic en el vnculo llamado Espaol. Se mostrara la siguiente ventana web.

Clic en el vinculo phpMyAdmin. Recuerda: para que pueda salir esta ventana o aplicacin web, deber estar instalado el Xampp 1.7.3 (recomendable) o superior.

Autor: Gerardo Javier Caldern Hernndez

26

Manual de Adobe Dreamweaver CS3 Se mostrara la siguiente ventana con su panel de control.

CREANDO UNA BASE DE DATOS EN PHPMYADMIN: Ingresar a un navegador web. En crear una base de datos, ingresar el nombre agenda. Clic en el botn Crear.

SQL: CREATE DATABASE agenda; ELIMINANDO UNA BASE DE DATOS EN PHPMYADMIN: Abrir la base de datos.

Clic en la pestaa o etiqueta Eliminar, se mostrara una ventana. Clic en el botn Aceptar, para la eliminacin.

Autor: Gerardo Javier Caldern Hernndez

27

Manual de Adobe Dreamweaver CS3 SQL: DROP DATABASE AGENDA; CREANDO UNA TABLA EN PHPMYADMIN: Ingresar a un navegador web. Ingresar a la base de datos. Ingresar el nombre de la tabla. Ingresar los nmeros de los campos de la tabla. Clic en el botn Continuar.

Ingresar los campos siguientes. Clic en el botn Continuar, para generarlo. Clic en el botn Grabar. Cdigo SQL:

SQL: CREATE TABLE AGENDA.ALUMNOS ( Id_alumno decimal not null, Nombres varchar(30) not null, Apellidos varchar (30) not null, Direccion varchar (30) not null, Telefono varchar (30) not null ) ENGINE = MYISAM; Establecer el campo Id_alumno, como clave primaria. Cdigo SQL: SQL: ALTER TABLE ALUMNOS ADD PRIMARY KEY (Id_alumno) Tambin crear la tabla Telefono.
Autor: Gerardo Javier Caldern Hernndez 28

Manual de Adobe Dreamweaver CS3 Con lo siguientes campos siguientes:

Cdigo SQL: SQL: CREATE TABLE agenda.telefono ( Nombre varchar (30) not null, TelefonoCasa varchar (7) not null, Movil varchar (9) not null ) ENGINE = MYISAM; Nota: el smbolo apostrofe es con el cdigo ASCII. ALT + 39. ELIMINANDO UNA TABLA EN PHPMYADMIN: Abrir la base de datos.

Seleccionar o activar el check de tabla a borrar. En el campo borrar, clic en objeto: Eliminar.

SQL: DROP TABLE TELEFONO; COMO INSERTAR UN REGISTRO EN UNA TABLA EN PHPMYADMIN: Ingresar a un navegador web. Ingresar a la base de datos. Ingresar a la tabla. Clic en el vinculo Insertar. Clic en el botn Continuar.

Autor: Gerardo Javier Caldern Hernndez

29

Manual de Adobe Dreamweaver CS3

Se mostrara el cdigo SQL. SQL: INSERT INTO AGENDA.ALUMNOS ( Id_alumno, Nombres, Apellidos, Direccion, Telefono ) values ( '1', 'Gerardo Javier', 'Montes Cardenas', 'Av. Mexico 557', '6464987' ) ELIMINANDO UN REGISTRO DE UNA TABLA EN PHPMYADMIN: Abrir la base de datos. Seleccionar la tabla, que contiene el registro a eliminar. Seleccionar el registro que se desea eliminar. Clic en la pestaa o etiqueta Eliminar, se mostrara una ventana.

Clic en el botn Aceptar, para eliminar el registro.

SQL:

Autor: Gerardo Javier Caldern Hernndez

30

Manual de Adobe Dreamweaver CS3 DELETE FROM AGENDA.ALUMNOS WHERE CONCAT(alumnos.Id_alumno)='1' AND alumnos.Nombres = 'Gerardo Javier' AND alumnos.Apellidos = 'Montes Cardenas' AND alumnos.Direccion = 'Av. Mexico 557' AND alumnos.Telefono = '6464987' LIMIT 1 ELIMINANDO TODOS LOS REGISTROS DE UNA TABLA EN PHPMYADMIN: Abrir la base de datos. Seleccionar la tabla, que contiene el registro a eliminar. Clic en la pestaa o etiqueta Vaciar, se mostrara una ventana.

Clic en el botn Aceptar, para eliminar todos los registros.

SQL: TRUNCATE TABLE ALUMNOS; EDITANDO UN REGISTRO DE UNA TABLA EN PHPMYADMIN: Abrir la base de datos. Seleccionar la tabla, que contiene el registro a editar. Clic en el objeto: editar.

Se mostrara la siguiente ventana para actualizar los datos. Modificar los datos del registro. Clic en el botn Continuar.

DONDE SE ALMACENA LAS BASE DE DATOS EN EL XAMPP: Ingresar a mi PC o Equipo. Doble clic en la unidad C:\

Autor: Gerardo Javier Caldern Hernndez

31

Manual de Adobe Dreamweaver CS3 Doble clic en la carpeta o directorio Xampp. Doble clic en la carpeta MySql. Doble clic en la carpeta Data. Hay se creara un directorio con el mismo nombre de la base de datos.

ACTIVAR/DESACTIVAR EL PANEL BASE DE DATOS: Ingresar a Adobe Dreamweaver CS3. Clic en el men Ventana. Clic en la opcin Base de datos, se activa el panel al lado derecho.

CREAR UN SITIO WEB: Clic en el men Sitio. Clic en la opcin Administrar Sitios.

Autor: Gerardo Javier Caldern Hernndez

32

Manual de Adobe Dreamweaver CS3 Clic en el botn Nuevo. Clic en la opcin Sitio, aparecer una ventana. Clic en etiqueta Avanzadas. En datos locales, ingresar el nombre del sitio: phpapache. Carpeta Raz local, seleccionar la siguiente ruta: C:\xampp\htdocs\ En direccin HTTP, dejarlo por defecto: http://localhost/ En datos remotos, en la lista Acceso, elegir la opcin: Local/Red. En carpeta remota, seleccionar la siguiente ruta: C:\xampp\htdocs\dw_db\ Claro esta deber crear la carpeta DW_DB. Activar el check Mantener informacin de sincronizacin. Cargar archivos en el servidor automticamente al guardar. En servidor de prueba, en modelo de servidor, elegir la opcin: PHP MySQL. En acceso elegir la opcin Local/Red. En la carpeta del servidor, elegir la ruta: C:\xampp\htdocs\dw_db\ En el prefijo de URL, dejarlo por defecto: http://localhost/ Clic en el botn Aceptar. Clic en el botn Listo. Aparecer el siguiente listado activado.

Clic en el vinculo tipo de documento. Elegir la opcin PHP. Clic en el botn Aceptar.

Se mostrara el siguiente listado:

Autor: Gerardo Javier Caldern Hernndez

33

Manual de Adobe Dreamweaver CS3 CREANDO UNA CONEXIN DE BASE DE DATOS MYSQL A DREAMWEAVER: Ingresar al sitio web, ya creado. Clic en el men Ventana. Clic en la opcin Base de datos. Clic en el botn +. Clic en la opcin Conexin MySQL, se mostrara una ventana, donde deber ingresar los siguientes datos. Ingresar el nombre de la conexin, puede ser cualquier nombre. Ingresar el servidor MySQL, en este caso llamado: localhost. En el nombre de usuario, ingresar la palabra root. En la contrasea, dejarlo en blanco. En la base de datos, buscar la base de datos agenda.

Clic en el botn Prueba, te va a comentar que no se ingreso una contrasea. Clic en el botn Aceptar. Clic de nuevo en el botn Prueba. Se mostrara un mensaje, que la conexin fue satisfactoria. Se mostrara la siguiente conexin:

CREANDO UN JUEGO DE REGISTROS EN DREAMWEAVER: Ingresar al sitio web, ya creado. Tener la conexin ya creada y establecida. Clic en el men Insertar. Seleccionar la opcin Objetos de datos.Clic en la opcin Juego de Registros. Ingresar los valores que se muestran a continuacin.

Autor: Gerardo Javier Caldern Hernndez

34

Manual de Adobe Dreamweaver CS3

Clic en el botn Prueba, para visualizar los datos de la tabla: Alumno.

Clic en el botn Aceptar. Se mostrara el juego de registro, con los campos de dicha tabla.

Autor: Gerardo Javier Caldern Hernndez

35

Manual de Adobe Dreamweaver CS3 CREANDO UNA TABLA DINAMICA: Clic en el men Insertar. Seleccionar la opcin Objetos de datos. Seleccionar la opcin Datos dinmicos. Clic en la opcin Tabla dinmica. Se mostrara una ventana, para visualizar los registros.

Presionar CTRL + S, para guardar la pagina web en PHP. Ahora ingresar al navegador web y ingresar la siguiente direccin web. http://localhost/dw_db/prueba.php O sino presione la tecla F12, estando en el Adobe Dreamweaver CS3. Nota: recuerda antes de hacer la creacin de la tabla dinmica, guardar tu archivo PHP. Clic en el botn Aceptar.

Autor: Gerardo Javier Caldern Hernndez

36

Manual de Adobe Dreamweaver CS3 Creando contenido en desplazamiento: Crear una pagina web HTML.

Clic en el men Insertar. Seleccionar la opcin llamado: Objetos de diseo. Clic en la opcin llamado: Etiqueta DIV. En la lista anidada llamado: Insertar, elegir la opcin llamado: En el punto de insercin. Clic en el botn Aceptar.

Se mostrara el siguiente enunciado:

Eliminar el texto. Clic derecho dentro del cuadro de texto. Seleccionar en la opcin llamado: Estilos CSS. Clic en la opcin llamado: Nuevo. Establecer las modificacin siguientes, tal como se muestra:

Autor: Gerardo Javier Caldern Hernndez

37

Manual de Adobe Dreamweaver CS3 Se mostrara una ventana llamado: Definicin de regla para .estilodivdesplaz. Dar los siguientes parmetros y aceptar:

Nota 1: es recomendable que active el panel llamado: Estilos CSS. Nota 2: si se desea modificar el alto y ancho del objeto, solo deber hacer clic en el borde del objeto, luego en el panel estilos y por ultimo doble clic en height (alto) o width (ancho), para que se muestre la ventana anterior.

Clic dentro del cuadro de texto, para que se muestra el cursor. En la barra de propiedades, clic en HTML. Clic en la opcin llamado: Clase. Elegir la opcin llamado: Estilodivdesplaz, tal como se muestra:

Autor: Gerardo Javier Caldern Hernndez

38

Manual de Adobe Dreamweaver CS3 Ingresar el siguiente texto, en el cuadro de texto: Alumnos de Diseo: Calixto Marquez, Rocio Magaly. Mejia Reao, Maria Teresa. Huatuco Inga, Alex Freddy. Capcha Remuzgo, Vianca. Ccoyllo Ventura, Sheyla Ventura. Luque Zegarra, Claudia. Martinez Palomino, Leonela Francesca. Atencio Zorrilla, Jefferson Roberto. Barzola Morales, Juan Carlos. Huallpa Acevedo, Edgardo. Mamani Cherres, Renzo Augusto. Ropon Solis, Elvis Peter. Run Rosado, Edwin Peter. Vega Palomino, Ruby Carina. Huapaya Matumay, Jonathan Nilton. Garcia Medina, Tarcila. Aldea Chahua, Norma.

Se mostrara de la siguiente manera:

Seleccin el marco. Doble clic en Width o height, localizado en el panel llamado: Estilos CSS. Se mostrara la ventana llamado: Definicin de regla. En las categoras, clic en la opcin llamado: Posicin. Establecer los parmetros, tal como se muestra:
39

Autor: Gerardo Javier Caldern Hernndez

Manual de Adobe Dreamweaver CS3

El texto sobrantes, se va ocultar, dentro del marco, tal como se muestra:

Seleccin el marco. Doble clic en cualquier Resumen de seleccin en el panel llamado: Estilos CSS.

Autor: Gerardo Javier Caldern Hernndez

40

Manual de Adobe Dreamweaver CS3 Se mostrara la ventana llamado: Definicin de regla. En las categoras, clic en la opcin llamado: Tipo. Establecer los parmetros, tal como se muestra:

Se mostrara de la siguiente manera:

Seleccin el marco. Doble clic en cualquier Resumen de seleccin en el panel llamado: Estilos CSS.

Autor: Gerardo Javier Caldern Hernndez

41

Manual de Adobe Dreamweaver CS3 Se mostrara la ventana llamado: Definicin de regla. En las categoras, clic en la opcin llamado: Fondo. Establecer los parmetros, tal como se muestra:

Se mostrara de la siguiente manera:

Visualizarlo en el navegador de Internet Explorer 9 (Recomendable).

Autor: Gerardo Javier Caldern Hernndez

42

Manual de Adobe Dreamweaver CS3 PRACTICA 18:

FIN 02

Autor: Gerardo Javier Caldern Hernndez

43